/* ui.css - completeness uplift (2026-10-13): icons, canvas charts, dialogs, member search, file import,
   sortable headers, statistics layout and the 360px bottom bar.
   Everything reads the console tokens (--panel, --line, --accent ...) so light and dark follow automatically.
   Motion floors: every transition/animation here is switched off by the existing global rules
   (prefers-reduced-motion and body.capture-mode). Nothing here hides content by default. */

[hidden]{display:none!important}   /* class display rules below (.search-clear, .viz ...) must not beat the hidden attribute */

/* ── icons (lucide sprite in index.html; stroke icons, colour = currentColor) ── */
.ico{width:16px;height:16px;flex:0 0 auto;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico.lg{width:20px;height:20px;stroke-width:1.5}
nav.tabs .nav-icon.ico{width:20px;height:20px;stroke-width:1.5}
@media(max-width:800px){nav.tabs .nav-icon.ico{width:16px;height:16px}}
.btn,.rowbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.rowbtn{gap:5px}
.rowbtn .ico{width:14px;height:14px}
.note-symbol .ico{width:22px;height:22px}
.exlogo{font-size:10.5px;letter-spacing:-.02em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* theme toggle: label fixed ("다크 모드"), state = aria-pressed */
#themeToggle{display:inline-flex;align-items:center;gap:7px}
#themeToggle[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:rgba(76,141,255,.12)}

/* button groups (CSV + 엑셀) */
.btn-group{display:inline-flex;align-items:stretch}
.filterbar .btn-group{margin-left:auto}
.btn-group .btn{border-radius:0}
.btn-group .btn:first-child{border-radius:8px 0 0 8px}
.btn-group .btn:last-child{border-radius:0 8px 8px 0;margin-left:-1px}
.btn-group .btn:only-child{border-radius:8px;margin-left:0}
.btn-group .btn:hover,.btn-group .btn:focus-visible{position:relative;z-index:1}
.btn[aria-disabled="true"]{opacity:.62;cursor:progress}
.xlsx-btn .ico{color:#1f9d55}
@media(max-width:600px){.filterbar .btn-group{margin-left:0;flex:1 1 100%}.btn-group .btn{flex:1 1 0}}

/* sortable headers */
.th-sort{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;cursor:pointer;border-radius:4px;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.th-sort:hover{color:var(--txt)}
.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.th-sort .sort-ic{width:12px;height:12px;opacity:.4;vertical-align:0}
th[aria-sort] .th-sort{color:var(--txt)}
th[aria-sort] .sort-ic{opacity:1;color:var(--accent)}

/* empty states with [필터 해제] */
td.empty-cell{text-align:center!important;color:var(--dim);padding:22px!important}
td.empty-cell>span{display:block;margin-bottom:10px}
td.empty-cell>.empty-ic{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 10px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-style:normal}
td.empty-cell>.empty-ic .ico{width:20px;height:20px;vertical-align:0}
.clear-filter{display:inline-flex}

/* ledger row details on 360px: 거래소·회원·페이백·상태 + [상세] */
.m-only{display:none}
@media(max-width:600px){
  .mobile-cards td.m-only{display:flex;justify-content:flex-end;border-bottom:0}
  .mobile-cards td.m-only:before{display:none}
  .mobile-cards #ledgerBody tr:not(.is-open)>td:nth-child(n+3):nth-child(-n+7),
  .mobile-cards #ledgerBody tr:not(.is-open)>td:nth-child(9),
  .mobile-cards #ledgerBody tr:not(.is-open)>td:nth-child(10){display:none}
  .mobile-cards #ledgerBody tr:not(.is-open)>td.st-cell{border-bottom:1px solid var(--line)}
  .mobile-cards td.empty-cell[colspan]{text-align:center}
  .m-more .ico{transition:transform .22s cubic-bezier(.16,1,.3,1)}
  tr.is-open .m-more .ico{transform:rotate(180deg)}
}

/* ── charts (Chart.js canvas, SVG/conic fallback) ── */
.viz{position:relative;height:240px;margin-top:8px}
.viz.viz-wide{height:270px}
.viz canvas{display:block;width:100%!important;height:100%!important}
.viz[data-state="fallback"]{height:auto}
.viz-skel{position:absolute;inset:10px 6px 24px 40px;display:flex;align-items:flex-end;gap:9%;padding:0 4%;border-bottom:1px solid var(--line)}
.viz-skel i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(90deg,var(--panel2) 20%,var(--line) 50%,var(--panel2) 80%);background-size:220% 100%;animation:pb-shim 1.5s ease-in-out infinite}
.viz-skel i:nth-child(1){height:34%}.viz-skel i:nth-child(2){height:52%}.viz-skel i:nth-child(3){height:44%}.viz-skel i:nth-child(4){height:70%}.viz-skel i:nth-child(5){height:61%}
.viz-skel.ring{inset:6px;padding:0;border:0;border-radius:50%;background:conic-gradient(var(--panel2),var(--line),var(--panel2));-webkit-mask:radial-gradient(circle closest-side,transparent 66%,#000 67%);mask:radial-gradient(circle closest-side,transparent 66%,#000 67%)}
@keyframes pb-shim{0%{background-position:100% 0}100%{background-position:-120% 0}}
.viz-ring{width:100%;height:100%;border-radius:50%;-webkit-mask:radial-gradient(circle closest-side,transparent 66%,#000 67%);mask:radial-gradient(circle closest-side,transparent 66%,#000 67%)}
@media(max-width:600px){.viz{height:220px}.viz.viz-wide{height:230px}}

.legend-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:inherit;cursor:pointer}
.legend-btn:hover:not([aria-disabled="true"]){border-color:var(--accent);color:var(--txt)}
.legend-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.legend-btn[aria-pressed="false"]{color:var(--dim);text-decoration:line-through}
.legend-btn[aria-pressed="false"] .dot{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--dim)}
.legend-btn[aria-disabled="true"]{cursor:default}

/* ── statistics layout ── */
.stats-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-top:4px}
.stats-top .kpi-rail{grid-template-columns:1fr;gap:12px}
.stats-top .kpi{display:flex;flex-direction:column;justify-content:center}
.kpi-lead .v{font-size:27px}
.ratio{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--chip);margin-top:12px}
.ratio span{display:block;height:100%;width:0;transition:width .6s cubic-bezier(.16,1,.3,1)}
.ratio-m{background:var(--green)}
.ratio-u{background:var(--red)}
.ratio-cap{margin-top:6px}
.ratio-cap:empty{display:none}
@media(max-width:1100px){
  .stats-top{grid-template-columns:1fr}
  .stats-top .kpi-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:860px){.stats-top .kpi-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.stats-top .kpi-rail{order:-1;grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-lead .v{font-size:26px}}

.donut-row{display:grid;grid-template-columns:172px minmax(0,1fr);gap:20px;align-items:center}
.donut-box{position:relative;width:172px;height:172px}
.viz.viz-donut,.viz.viz-donut[data-state="fallback"]{height:100%;margin:0}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;line-height:1.3}
.donut-center span{font-size:10.5px;color:var(--muted)}
.donut-center b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0}
.donut-center small{font-size:10px;color:var(--dim)}
#exDistrib .row{grid-template-columns:64px minmax(0,1fr) 96px}
.distrib .amt small{display:block;font-size:10px;color:var(--dim);line-height:1.3}
@media(max-width:1250px) and (min-width:861px){.donut-row{grid-template-columns:1fr;justify-items:center}.donut-row .distrib{width:100%}}
@media(max-width:600px){#exDistrib .row{grid-template-columns:52px minmax(0,1fr) 82px}.donut-row{grid-template-columns:1fr;justify-items:center}.donut-row .distrib{width:100%}}

.distrib-links{gap:4px}
.distrib-links button.row{width:calc(100% + 16px);margin:0 -8px;padding:7px 8px;background:none;border:1px solid transparent;border-radius:8px;color:inherit;font:inherit;text-align:left;cursor:pointer}
.distrib-links button.row:hover{background:var(--panel2);border-color:var(--line)}
.distrib-links button.row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.distrib-links .amt{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}
.distrib-links .go-ic{width:14px;height:14px;opacity:.5}
.distrib-tip{margin-top:10px}

/* ── file import (CSV fallback panel) ── */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;transition:border-color .15s,background-color .15s}
.drop-ic{width:28px;height:28px;color:var(--accent)}
.drop-main{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.drop-hint{max-width:560px;line-height:1.6}
.drop.is-over{border-color:var(--accent);background:rgba(76,141,255,.08)}
.drop.is-busy{cursor:progress}
.drop.is-busy .drop-ic{opacity:.5}
.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0,0,0,0)}
.import-errors{margin:10px 0;padding:13px 15px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;background:var(--panel);font-size:12.5px;line-height:1.6}
.ie-head{display:flex;align-items:center;gap:8px}
.ie-head .ico{color:var(--amber)}
.ie-line{margin:6px 0 2px}
.ie-fix{color:var(--muted);font-size:11.5px}
p.ie-fix{margin:0 0 4px}
.ie-list{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px;max-height:240px;overflow:auto}
.ie-list li{display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:8px}
.ie-list li .ie-fix{grid-column:2}
.ie-row{font-family:var(--mono);font-size:11.5px;color:var(--amber)}
.ie-sample{margin-top:9px}
.linkbtn{padding:0 2px;border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.linkbtn:disabled{color:var(--dim);text-decoration:none;cursor:default}

/* ── member search combobox ── */
.search-box{position:relative;display:flex;align-items:center}
.search-box .inp{width:100%;padding-left:34px;padding-right:36px}
.search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer}
.search-clear:hover{background:var(--panel2);color:var(--txt)}
.search-clear:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.search-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:45;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(9,25,45,.2);max-height:300px;overflow:auto;min-width:260px}
.search-list li{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:7px;cursor:pointer;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-list li:hover,.search-list li.is-active{background:var(--panel2)}
.search-list li.is-active{box-shadow:inset 3px 0 0 var(--accent)}
.search-list .mono{font-size:11.5px;color:var(--muted)}
.opt-sep{color:var(--dim)}
mark{background:rgba(210,153,34,.3);color:inherit;border-radius:3px;padding:0 1px}
.uid-hit{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--muted)}
.amt-row{display:flex;gap:8px}
.amt-row .inp{flex:1;min-width:0}
.amt-row .btn{flex:0 0 auto}

/* ── dialogs (native <dialog>) ── */
.dlg{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--txt);box-shadow:0 24px 64px rgba(6,14,28,.35)}
.dlg::backdrop{background:rgba(6,12,22,.55)}
.dlg-box{margin:0;padding:22px 22px 18px}
.dlg-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dlg-head h3{margin:0;font-size:16px}
.dlg-ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:rgba(63,185,80,.14);color:var(--green)}
.dlg-ic.warn{background:rgba(248,81,73,.13);color:var(--red)}
.dlg-body{margin:0 0 12px;font-size:13px;line-height:1.6}
.dlg-body:empty{display:none}
.dlg-sum{display:grid;gap:6px;margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--panel2);font-size:12.5px}
.dlg-sum:empty{display:none}
.dlg-sum div{display:flex;justify-content:space-between;gap:12px}
.dlg-sum dt{color:var(--muted)}
.dlg-sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.dlg-note{margin:0 0 14px}
.dlg-note:empty{display:none}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}
.reason-list{display:grid;gap:6px;margin:0 0 6px;padding:0;border:0}
#rdList{display:grid;gap:6px}
.reason-opt{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;line-height:1.5;cursor:pointer}
.reason-opt:has(input:checked){border-color:var(--accent);background:rgba(76,141,255,.08)}
.reason-opt input{margin:3px 0 0;accent-color:var(--accent)}
.reason-text{width:100%;box-sizing:border-box}
.reason-text[aria-invalid="true"]{border-color:var(--red)}
.dlg .field-err{margin:2px 0 8px}

/* ── architecture: vertical diagram on 360px ── */
.archwrap svg.arch-v{min-width:0;width:100%;max-width:420px;margin:0 auto}
.archwrap.is-v:before{display:none}

/* ── 360px: bottom bar + menu sheet (desktop/tablet keep the sidebar/grid tabs) ── */
.mbar,.sheet-back{display:none}
@media(max-width:600px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .mbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#14223a;border-top:1px solid #ffffff14;box-shadow:0 -8px 24px rgba(8,18,36,.18)}
  .mbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:4px 2px;border:0;border-radius:9px;background:none;color:#b6c4d9;font:inherit;font-size:9.5px;line-height:1.2;cursor:pointer}
  .mbar button[aria-current="page"],.mbar button.is-current{background:#285dcc;color:#fff}
  .mbar button[aria-expanded="true"]{background:#22334d;color:#fff}
  .mbar button:focus-visible{outline:2px solid #8fbaff;outline-offset:-2px}
  nav.tabs{position:fixed;top:auto;left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:62;width:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0;padding:12px;border-radius:14px;background:#14223a;box-shadow:0 18px 48px rgba(8,18,36,.42);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility 0s linear .28s}
  nav.tabs.sheet-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility 0s}
  nav.tabs:before{display:block;content:"전체 메뉴";grid-column:1/-1;padding:2px 6px 8px;color:#b0c2dc;font-size:10px;letter-spacing:.08em}
  nav.tabs button{min-height:44px}
  .sheet-back{display:block;position:fixed;inset:0;z-index:61;background:rgba(6,12,22,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
  .sheet-back.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s}
  .mk-toasts{bottom:calc(78px + env(safe-area-inset-bottom))!important}
}