/* 25판 카드 and 후잉 맞추기 (stream cardwh). Loaded after choi.css; black and white through the tokens. */

/* ===== 카드 ===== */
/* card tiles: the chosen card is filled with ink, the others are outlined */
.cw-tiles{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:0;margin:0}
.cw-tiles::-webkit-scrollbar{display:none}
.cw-tiles .ctile{flex:none;width:300px;aspect-ratio:auto;min-height:128px;border-radius:14px;padding:18px 20px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;text-align:left;position:relative;box-shadow:none;transform:none;overflow:hidden;cursor:pointer}
.cw-tiles .ctile::before,.cw-tiles .ctile::after{display:none;content:none}
.cw-tiles .ctile:hover{transform:none;box-shadow:none;border-color:var(--ink-4)}
.cw-tiles .ctile.on{background:var(--ink);border-color:var(--ink);color:var(--brand-ink);box-shadow:none}
.cw-tiles .ctile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cw-tiles .ctile .nm{font-size:15px;font-weight:700;padding-right:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-tiles .ctile .chip-ic{position:absolute;right:20px;top:18px;width:30px;height:22px;border-radius:4px;background:var(--line)}
.cw-tiles .ctile.on .chip-ic{background:var(--ink-2)}
.cw-tv{display:flex;flex-direction:column;gap:2px}
.cw-tiles .ctile small{font-size:12px;font-weight:500;color:var(--ink-3);opacity:1}
.cw-tiles .ctile.on small{color:var(--brand-ink);opacity:.72}
.cw-tiles .ctile b{display:block;font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.2}
.cw-tiles .ctile.none b{color:var(--ink-4)}

/* the bill and the chart share one 2px rule */
.cw .cw-top{gap:0}
.cw-two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:32px;row-gap:26px;align-items:start}
.cw-low{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cw-bill{display:flex;flex-direction:column;gap:10px;min-width:0}
.cw-bill .card-h{justify-content:space-between;align-items:baseline}
.cw .hero.cw-big{font-size:64px;font-weight:900;letter-spacing:-.05em;line-height:1;margin:4px 0 2px}
.cw .hero.cw-big small{font-size:18px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:6px}
.cw-note{font-size:14px;color:var(--ink);margin:0}
.kv.cw-kv{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2);padding-top:12px;margin-top:6px}
.kv.cw-kv>div{gap:2px;padding:0 14px;border-left:1px solid var(--line-2)}
.kv.cw-kv>div:first-child{padding-left:0;border-left:0}
.kv.cw-kv span{font-size:11px;font-weight:500;color:var(--ink-3)}
.kv.cw-kv b{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.cw-sub{font-size:12.5px;margin:0}
.cw-tg{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line-2);padding-top:12px}
.cw-btns{gap:8px;flex-wrap:wrap;align-items:center}
.cw-set{border:0;background:none;padding:2px 0;color:var(--ink-3);font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btn.cw-setb{height:38px;padding:0 14px;font-weight:500;box-shadow:none!important;border:1px solid var(--line)!important;background:var(--surface)!important}

/* the chart beside the bill: a small grey title on wide screens */
.cw-chart{display:flex;flex-direction:column;gap:6px;min-width:0}
.cw-chart>.card-h{justify-content:space-between;align-items:baseline;min-height:0}
.cw-chart>.card-h h2{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.cw-chart>.card-h .sub{font-size:12px}
.cw-chart .chart{min-width:200px}
.cw-chart .chart text{font-size:12px;fill:var(--ink-3)}
.cw-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;border-top:1px solid var(--line-2);padding-top:10px;margin-top:4px;font-size:13px}
.cw-nrow{display:inline-flex;gap:6px;color:var(--ink-3)}.cw-nrow b{color:var(--ink);font-weight:700}

/* lists with the title above a 2px rule */
.cw .cw-list{border-top:0!important;padding-top:0!important;gap:0!important;min-width:0}
.cw .cw-list>.card-h{border-bottom:2px solid var(--ink);padding-bottom:10px!important;min-height:0;align-items:baseline}
.cw .cw-list>.card-h h2{font-size:15px;font-weight:900}
.cw-list>.card-h .sub{font-size:12px}
.cw-empty{padding:14px 0;margin:0}
.cw-cr{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr) 96px;align-items:center;gap:14px;min-height:39px;padding:6px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.cw-cr .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-cr .bar{height:8px}
.cw-cr .v{text-align:right;font-weight:800;font-size:13.5px}
.cw-cr.etc .nm{color:var(--ink-3)}
.cw-ir{display:grid;grid-template-columns:42px minmax(0,1fr) minmax(0,.9fr) 92px;align-items:center;column-gap:12px;width:100%;min-height:45px;padding:8px 0;border:0;border-bottom:1px solid var(--line-2);background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.cw-ir.ppl{grid-template-columns:24px 42px minmax(0,1fr) minmax(0,.9fr) 92px}
.cw-ir .ava{width:24px;height:24px;font-size:11px;box-shadow:none}
.cw-ir:hover .nm{text-decoration:underline;text-underline-offset:3px}
.cw-ir .t{display:contents}
.cw-ir .d{font-size:13px;color:var(--ink-3)}
.cw-ir .nm{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-ir .ac{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-ir .v{font-size:14px;font-weight:800;text-align:right;white-space:nowrap}
.cw-all{border:0;background:none;padding:12px 0 2px;cursor:pointer;align-self:flex-start;color:var(--ink-3);font-size:13px;font-weight:500}
.cw-all:hover{color:var(--ink)}

/* bills of a longer period */
.cw-bills{margin-top:6px}
.cw-bills .billh,.cw-bills .billrow{padding-left:0;padding-right:0}
.cw-bills .billh{border-top:1px solid var(--line-2);padding-top:10px;font-size:11px;font-weight:700}
.cw-bills button.billrow:hover{background:var(--surface-2)}
.cw-bills .billrow .ba{font-weight:800}
.cw-bills .billrow .bd.neg{color:var(--ink);font-weight:800}
.cw-bills .billrow.tot{border-top:2px solid var(--ink)}

@media (max-width:1099px){
  .cw-tiles{margin-right:-16px;padding-right:16px}
  .cw-tiles .ctile{width:250px;min-height:112px;padding:16px 18px;gap:12px}
  .cw-tiles .ctile .nm{font-size:14px}
  .cw-tiles .ctile small{font-size:11px}
  .cw-tiles .ctile b{font-size:24px}
  .cw-two,.cw-low{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .cw .hero.cw-big{font-size:clamp(32px,10.4vw,40px)}
  .cw .hero.cw-big small{font-size:15px}
  .cw-note{font-size:13px}
  .kv.cw-kv{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));padding-top:10px}
  .kv.cw-kv>div{padding:0 10px}
  .kv.cw-kv>.z{display:none}
  .kv.cw-kv:has(>.z){grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
  .kv.cw-kv b{font-size:13px}
  .cw-chart>.card-h{border-bottom:2px solid var(--ink);padding-bottom:10px!important}
  .cw-chart>.card-h h2{font-size:15px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
  .cw-cr{grid-template-columns:minmax(0,1fr) 46% 80px;gap:10px}
  .cw-ir,.cw-ir.ppl{grid-template-columns:40px minmax(0,1fr) auto;min-height:54px}
  .cw-ir .ava{display:none}
  .cw-ir .t{display:flex;flex-direction:column;gap:1px;min-width:0}
  .cw-ir .nm{font-size:13.5px}.cw-ir .ac{font-size:11.5px}
  .cw-ir .d{font-size:12px}.cw-ir .v{font-size:13.5px}
  .cw-all{font-size:12.5px}
}
@media (max-width:380px){.kv.cw-kv>div{padding:0 7px}.kv.cw-kv b{font-size:12px}}

/* ===== 후잉 맞추기 ===== */
.wh{display:contents}
.wh-grid{row-gap:22px}
.wh-rgbox{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:700;white-space:nowrap;background:var(--surface);color:var(--ink)}
.wh-rgbox .ico{color:var(--ink-3)}
.wh-cmp{height:38px;padding:0 14px;font-weight:700}
.wh-segm .seg{width:100%}
.wh-dates{margin:0}
.wh-status{display:flex;align-items:center;gap:20px;background:var(--surface-2);border-radius:12px;padding:14px 18px;font-size:13px;flex-wrap:wrap;min-width:0}
.wh-conn{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.wh-conn i{width:8px;height:8px;border-radius:50%;background:var(--ink);display:inline-block;flex:none}
.wh-meta{display:flex;gap:20px;color:var(--ink-3);flex-wrap:wrap}.wh-meta b{color:var(--ink);font-weight:700}
.wh-trash{margin-left:auto;color:var(--ink-3)}
.wh-state{background:var(--surface-2);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.wh-secs{max-width:360px}
.wh-intro{margin:0}
.wh-err{background:var(--surface-2);color:var(--ink);border-left:3px solid var(--ink);border-radius:8px}
/* the five counts under one 2px rule; the first group with work is shaded */
.wh-kpis{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));border-top:2px solid var(--ink)}
.wh-kpi{display:flex;flex-direction:column;gap:3px;padding:16px 16px 18px;border:0;border-left:1px solid var(--line);background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;min-width:0}
.wh-kpi:first-child{border-left:0;padding-left:0}
.wh-kpi span{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-kpi b{font-size:30px;font-weight:900;letter-spacing:-.035em;line-height:1.1}
.wh-kpi b small{font-size:14px;font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.wh-kpi.z b{color:var(--ink-4)}
.wh-kpi.hl{background:var(--surface-2);padding-left:16px}
.wh-kpi:not(:disabled):hover span{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wh-kpi:disabled{cursor:default;opacity:1}
/* what to do with each transaction */
.wh-res-sec{display:flex;flex-direction:column;min-width:0}
.wh-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px;gap:12px}
.wh-h h2{font-size:15px;font-weight:900;letter-spacing:-.02em}
.wh-h .sub{font-size:12px}
.wh-note{margin:10px 0 0}
.wh-g{display:flex;flex-direction:column}
.wh-gh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 8px}
.wh-g+.wh-g:not(.open)>.wh-gh,.wh-g.open+.wh-g>.wh-gh,.wh-none{border-top:1px solid var(--line-2);margin-top:8px}
.wh-g:not(.open)>.wh-gh{padding-bottom:10px}
.wh-gh b{font-size:14px;font-weight:700}.wh-gh b .tnum{font-weight:500;color:var(--ink-3)}
.wh-none{padding:10px 0}.wh-none b{color:var(--ink-4)}.wh-none .sub{font-size:12px}
.wh-gt{display:flex;gap:14px;flex:none}
.wh-lnk{border:0;background:none;padding:2px 0;color:var(--ink-3);font-size:12px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.wh-lnk:hover{color:var(--ink)}
.wh-lnk .ico{transition:transform .15s}.wh-lnk[aria-expanded="true"] .ico{transform:rotate(180deg)}
.wh-gs{margin:0 0 6px;font-size:12px}
.wh-th,.wh .wh-top{display:grid;grid-template-columns:22px 70px minmax(0,1fr) minmax(0,200px) 100px 150px;gap:14px;align-items:center}
.wh-th{font-size:11px;font-weight:700;color:var(--ink-3);padding:4px 0}
.wh-th .r{text-align:right}
.wh .wh-row{padding:11px 0;border-top:1px solid var(--line-2);gap:8px}
.wh-ck{display:flex;align-items:center}
.wh-ck input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.wh-d{font-size:13px;color:var(--ink-3);white-space:nowrap}
.wh .wh-main b{font-size:14px;font-weight:700}
.wh .wh-main .sub{font-size:12px}
.wh-dm,.wh-am{display:none}
.wh-acc{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh .wh-amt{text-align:right;font-weight:800;font-size:14px}
.wh-do{min-width:0}
.wh-do .wh-sel,.wh-map .wh-sel{width:100%;max-width:none;height:34px;font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:8px;background-color:var(--surface);color:var(--ink)}
.wh-map .wh-sel{width:auto;max-width:240px}
.wh .wh-diff,.wh .wh-why,.wh .wh-map,.wh .wh-res{margin-left:36px;width:auto}
.wh .wh-diff{width:calc(100% - 36px)}
.wh-diff tr.chg td{background:var(--surface-2);color:var(--ink);font-weight:700}
.wh .wh-why{color:var(--ink)}.wh .wh-why.soft{color:var(--ink-3)}
.wh .wh-res.ok{color:var(--ink-2)}.wh .wh-res.err,.wh .wh-res.unknown{color:var(--ink)}
/* the apply bar */
.wh-bar{display:flex;align-items:center;gap:14px;border:1.5px solid var(--ink);border-radius:12px;padding:14px 16px;background:var(--surface)}
.wh-bt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.wh-bt b{font-size:15px;font-weight:800}.wh-bt .sub{font-size:12px}
.wh-bar .btn{height:38px;padding:0 14px;flex:none}
.wh .insight.wh-ai{background:none;border:0;border-radius:0;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:10px}
.wh-ai .txt{font-size:14px;line-height:1.65}
.wh-how .wh-howl{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2);display:grid;gap:4px}
@media (max-width:1099px){
  .wh-grid{row-gap:16px}
  .wh-rgbox{height:36px;font-size:13px;padding:0 10px;gap:8px}
  .wh-status{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;font-size:12px}
  .wh-meta{gap:0}.wh-meta>span+span::before{content:", "}
  .wh-trash{display:none}
  .wh-cmprow{gap:8px}.wh-cmprow .wh-cmpw{flex:1;height:44px;border-radius:10px;font-size:14px}
  .wh-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-top:0}
  .wh-kpi,.wh-kpi:first-child{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  .wh-kpi.hl{background:var(--surface-2);border-color:transparent;padding-left:12px}
  .wh-kpi span{font-size:11px}.wh-kpi b{font-size:20px}.wh-kpi b small{font-size:11px}
  .wh-th{display:none}
  .wh-kpi.z[data-g="near"],.wh-kpi.z[data-g="blocked"]{display:none}
  .wh .wh-top{grid-template-columns:16px minmax(0,1fr) auto;grid-template-areas:"ck main amt" ". do do";column-gap:10px;row-gap:8px}
  .wh-ck{grid-area:ck}.wh .wh-main{grid-area:main}.wh .wh-amt{grid-area:amt;margin:0;font-size:13px}.wh-do{grid-area:do}
  .wh-d,.wh-acc,.wh-who{display:none}
  .wh-dm,.wh-am{display:inline}
  .wh .wh-main b{font-size:13px}.wh .wh-main .sub{font-size:11px;white-space:normal}
  .wh-do .wh-sel{font-size:12px;height:32px}
  .wh .wh-diff,.wh .wh-why,.wh .wh-map,.wh .wh-res{margin-left:26px}.wh .wh-diff{width:calc(100% - 26px)}
  .wh-bar.wh-act{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:5;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:12px 0;gap:10px}
  .wh-bt b{font-size:14px}.wh-bt .sub{font-size:11px}
  .wh-bar .btn{height:36px;padding:0 12px;font-size:13px}
}
@media (min-width:1100px){.wh-who::before{content:""}.wh .wh-main .sub{display:flex;gap:6px}.wh-main .wh-who{white-space:nowrap}}

.wh .btn:not(.pri),.cw .btn:not(.pri),.cw-tiles~.grid .btn:not(.pri){box-shadow:none!important}