:root{
    --primary-5:#F0EEFC; --primary-10:#E4E0FA; --primary-20:#C9C1F5; --primary-30:#A99EEE;
    --primary-40:#857AE4; --primary-50:#6C5CE7; --primary-60:#5A4BD4; --primary-70:#4A3CB8;
    --primary-80:#352A85; --primary-90:#1F1852;
    --gray-0:#fff; --gray-5:#F7F8FA; --gray-10:#EEF0F4; --gray-20:#E3E6EC; --gray-30:#C4C8D2;
    --gray-40:#9AA0AE; --gray-50:#6B7280; --gray-60:#565E6B; --gray-70:#434A56; --gray-95:#1B1F27;
    --success-10:#E6F6EE; --success-50:#16A34A; --success-70:#15803D;
    --warning-10:#FEF3E2; --warning-60:#B45309; --warning-70:#92400E;
    --danger-10:#FCE9E9; --danger-60:#DC2626; --danger-70:#B91C1C;
    --info-50:#2563EB;
    --bg:var(--gray-5); --card:var(--gray-0); --fg:var(--gray-95); --dim:var(--gray-50);
    --line:var(--gray-20); --head:#F4F5F8; --brand:var(--primary-50); --brand-strong:var(--primary-60);
    --brand-soft:var(--primary-5); --brand-ink:var(--primary-60);
    --ok:var(--success-50); --ok-soft:var(--success-10); --ok-ink:var(--success-70);
    --warn:var(--warning-60); --warn-soft:var(--warning-10); --warn-ink:var(--warning-70);
    --err:var(--danger-60); --err-soft:var(--danger-10); --err-ink:var(--danger-70);
    --focus:var(--info-50); --radius:8px; --shadow:0 1px 2px rgba(20,24,40,.04);
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--fg);
       font:14px/1.5 -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
  .skip{position:absolute; left:-9999px}
  .skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:8px 12px; border-radius:6px; border:1px solid var(--line)}

  /* ── 레이아웃: 좌측 고정 사이드바 + 본문 ── */
  .app{display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh}
  .side{position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--card);
        border-right:1px solid var(--line); padding:20px 12px}
  .brand{font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--fg); padding:6px 12px 18px}
  .brand b{color:var(--brand)}
  .navsec{font-size:11px; font-weight:700; color:var(--dim); text-transform:uppercase;
          letter-spacing:.04em; padding:14px 12px 6px}
  .lnb ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
  .lnb a{display:block; padding:9px 12px; border-radius:7px; color:var(--fg);
         text-decoration:none; font-size:14px; font-weight:500; cursor:pointer}
  .lnb a:hover{background:var(--bg)}
  .lnb a[aria-current="true"]{background:var(--brand-soft); color:var(--brand-ink); font-weight:700}

  .main{min-width:0; overflow-x:hidden}
  .topbar{display:flex; align-items:center; padding:14px 28px; border-bottom:1px solid var(--line);
          background:var(--card); position:sticky; top:0; z-index:5}
  .stamp{margin-left:auto; color:var(--dim); font-size:13px; display:flex; align-items:center; gap:6px}
  .exmore{color:var(--dim); font-size:12px; font-weight:600; margin-left:3px}
  .dot{width:8px; height:8px; border-radius:50%; background:var(--ok)}
  /* 주황(수집 늦음)보다 빨강(연결 끊김)이 이긴다 — 뒤에 둔다 */
  .dot.warn{background:var(--warn)}
  .dot.idle{background:var(--dim)}   /* 아직 수집 전 — 회색 */
  .dot.off{background:var(--err)}
  .content{padding:22px 28px 60px}

  /* ── 상단 알림 ── */
  #todo{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
  #todo:empty{display:none}
  .todo{display:flex; align-items:flex-start; gap:10px; background:var(--warn-soft);
        border:1px solid #F5D9A8; border-radius:var(--radius); padding:12px 14px}
  .todo .hand{flex:none}
  .todo .body{flex:1; min-width:0} .todo .what{font-weight:700; margin-right:8px}
  .todo .why{color:var(--warn-ink); font-size:13px} .todo .n{color:var(--dim); font-size:12px; white-space:nowrap}
  .todo .x{border:0; background:none; color:var(--dim); cursor:pointer; font-size:15px}
  .todo.shut{opacity:.5} .todo-more,.todo-reopen{align-self:flex-start; border:0; background:none; color:var(--brand); cursor:pointer; font-size:13px; padding:2px 4px}

  /* ── 화면 전환(SPA): 활성 화면만 보인다 ── */
  .block{display:none}
  .block.is-active{display:block; animation:fade .15s ease}
  @keyframes fade{from{opacity:0} to{opacity:1}}
  .block>h2{font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--fg); margin:0 0 16px;
            padding-bottom:14px; border-bottom:1px solid var(--line)}
  .block>h2 .sub{font-size:13px; font-weight:400; color:var(--dim); margin-left:10px}

  /* ── 요약 카드 ── */
  .sums{display:flex; flex-direction:column; gap:18px}
  /* 최근 변동은 .sums 바깥 형제라 그룹 간격(18px)을 못 받는다 — 같은 리듬으로 띄운다 */
  #view-sum #log{margin-top:18px}
  .sum-label{font-size:13px; font-weight:700; color:var(--dim); margin-bottom:8px}
  .sum-group{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
  .sum{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
       box-shadow:var(--shadow); padding:16px 18px}
  .sum.alert{border-color:#F5D9A8; background:var(--warn-soft)}
  /* 요약 카드 — 누르면 그 목록으로 간다(볼 것이 있을 때만) */
  .sum.link{cursor:pointer; transition:box-shadow .15s, border-color .15s}
  .sum.link:hover{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
  .sum.link:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  .sum .go{display:block; margin-top:8px; font-size:13px; font-weight:600; color:var(--brand-ink)}
  /* 요약에서 고른 조건이 걸린 화면 맨 위 칩 */
  .sum-chip{display:inline-flex; align-items:center; gap:10px; margin:0 0 12px; padding:8px 8px 8px 14px;
    border-radius:999px; background:var(--brand-soft); color:var(--brand-ink); font-size:13px; font-weight:600}
  .sum-chip button{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:4px 12px;
    font:inherit; font-size:12px; color:var(--brand-ink); cursor:pointer}
  .sum-chip button:hover{border-color:var(--brand)}
  .sum .k{font-size:13px; color:var(--dim); font-weight:600; margin-bottom:6px}
  .sum .v{font-size:26px; font-weight:800; color:var(--fg)} .sum .v small{font-size:14px; font-weight:600; color:var(--dim); margin-left:3px}

  /* ── 필터 바 ── */
  .tools{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
         background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
         box-shadow:var(--shadow); padding:16px 20px; margin-bottom:18px}
  .field{display:flex; flex-direction:column; gap:6px} .field.grow{flex:1; min-width:240px}
  .field label{font-size:12px; font-weight:600; color:var(--dim)}
  .field input,.field select{height:40px; padding:0 12px; font:inherit; font-size:14px;
    border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--fg)}
  .field input{width:100%}
  .field input:focus,.field select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
  .toggle{display:inline-flex; align-items:center; gap:8px; height:40px; font-size:14px; cursor:pointer}

  /* ── 검색 자동완성(커스텀 콤보박스) ── */
  .combo{position:relative}
  .ac{position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px;
      list-style:none; max-height:320px; overflow-y:auto; background:var(--card);
      border:1px solid var(--line); border-radius:10px;
      box-shadow:0 12px 28px rgba(20,24,40,.14), 0 2px 6px rgba(20,24,40,.06)}
  .ac li{display:flex; align-items:baseline; gap:10px; padding:9px 10px; border-radius:7px;
         cursor:pointer; font-size:14px; line-height:1.35}
  .ac li .nm{flex:1; min-width:0; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ac li .bc{flex-shrink:0; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
  .ac li .tag{flex-shrink:0; font-size:11px; font-weight:600; color:var(--brand-ink);
              background:var(--brand-soft); padding:1px 7px; border-radius:999px}
  .ac li mark{background:none; color:var(--brand); font-weight:700; padding:0}
  .ac li[aria-selected="true"]{background:var(--brand-soft)}
  .ac li[aria-selected="true"] .nm{color:var(--brand-ink)}
  .ac .more{cursor:default; color:var(--dim); font-size:12px; justify-content:center; padding:7px}
  .ac .none{cursor:default; color:var(--dim); justify-content:center; padding:12px}
  .chks{display:flex; gap:12px; flex-wrap:wrap; align-items:center; min-height:40px}
  .chk{display:inline-flex; align-items:center; gap:5px; font-size:13px; cursor:pointer; white-space:nowrap}
  .chk input{width:16px; height:16px; accent-color:var(--brand)}
  .toggle input{width:17px; height:17px; accent-color:var(--brand)}

  /* ── 표 카드 ── */
  .secs{display:flex; flex-direction:column; gap:16px}
  .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
        box-shadow:var(--shadow); overflow:hidden}
  .card-h{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line);
          width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left;
          font:inherit; cursor:pointer; color:inherit}
  .card-h:hover{background:var(--gray-5)}
  .card-h:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
  .card.collapsed .card-h{border-bottom:0}
  .card-h .caret{flex-shrink:0; width:14px; height:14px; color:var(--dim); transition:transform .15s;
                 background:currentColor;
                 -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                 mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .card.collapsed .card-h .caret{transform:rotate(-90deg)}
  .card-h .nm{font-weight:700; font-size:15px; color:var(--fg)}
  .card-h .n{color:var(--brand); font-weight:800; font-size:14px}
  .card-h .why{color:var(--dim); font-size:12px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .card-h .badge{font-size:12px; padding:3px 10px; border-radius:999px; background:var(--head); color:var(--dim); font-weight:600; white-space:nowrap}
  .card.ok .badge{background:var(--ok-soft); color:var(--ok-ink)}
  .card.warn .badge{background:var(--warn-soft); color:var(--warn-ink)}
  .card.err .badge{background:var(--err-soft); color:var(--err-ink)}
  .card.off{opacity:.7}   /* 안 쓰는 판매처(2026-10-13) — 회색 한 줄 */
  .card.off .card-h{cursor:default}
  .card .stale-note{padding:10px 18px; background:var(--warn-soft); color:var(--warn-ink); font-size:13px}
  .card .empty{padding:28px 18px; color:var(--dim); text-align:center}
  .tscroll{overflow:auto; max-height:68vh}   /* 긴 표는 카드 안에서 스크롤 — 아래 카드(다른 판매처)가 묻히지 않게 */

  table{width:100%; border-collapse:collapse; font-size:14px}
  thead th{background:var(--head); color:var(--fg); font-weight:700; font-size:13px; text-align:left;
           padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap;
           position:sticky; top:0; z-index:2}   /* 스크롤해도 헤더 1행은 카드 위에 고정 */
  thead th.n{text-align:right}
  tr.lotrow{cursor:pointer} tr.lotrow:hover td{background:var(--gray-5)}
  .lotcaret{color:var(--brand); font-weight:700; font-size:11px}
  th.sortable{cursor:pointer; user-select:none}
  th.sortable:hover{color:var(--brand-ink)}
  th.sorted{color:var(--brand-ink)}
  th .arw{font-size:10px; color:var(--brand); font-weight:800}
  th.pad,td.pad{width:100%}
  tbody td{padding:14px 16px; border-bottom:1px solid #F0F1F5; color:var(--fg); white-space:nowrap; vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  tbody tr.clickable{cursor:pointer} tbody tr:hover td{background:#FBFBFD}
  td.n{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
  td.zero{color:var(--gray-30); font-weight:400} td.none{color:var(--gray-30)}
  /* 증감 — 늘었는지 줄었는지 한눈에. 초록 ▲ 늘음 / 빨강 ▼ 줄음. */
  .delta{display:inline-block; min-width:52px; text-align:center; padding:2px 9px; border-radius:999px;
         font-weight:700; font-variant-numeric:tabular-nums; line-height:1.4}
  .delta.up{color:var(--ok-ink); background:var(--ok-soft)}
  .delta.down{color:var(--err-ink); background:var(--err-soft)}
  .delta.up::before{content:"▲ "; font-size:9px; vertical-align:1px}
  .delta.down::before{content:"▼ "; font-size:9px; vertical-align:1px}
  .hist .d.up{color:var(--ok-ink); font-weight:700} .hist .d.down{color:var(--err-ink); font-weight:700}
  /* 상품 한 줄을 눌러 펴는 '최근 변동' 이력 — 시각·창고·이전→이후·증감을 칸으로 나눠 읽히게 */
  .hist-in{padding:8px 12px 10px; background:var(--gray-5); border-radius:8px; margin:2px 0 4px}
  .hist-in .l{display:grid; grid-template-columns:170px 68px 116px auto; gap:16px; align-items:baseline;
              justify-content:start; padding:6px 4px; border-bottom:1px solid var(--line); font-size:13px}
  .hist-in .l:last-child{border-bottom:0}
  .hist-in .l .t{color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap}
  .hist-in .l .w{font-weight:600; color:var(--fg)}
  .hist-in .l .q{font-variant-numeric:tabular-nums; white-space:nowrap}
  .hist-in .l .d{font-weight:700; font-variant-numeric:tabular-nums}
  /* 재고사별 유통기한 펼침 — '외 N'을 누르면 나온다 */
  .exp-in{padding:6px 10px 10px; background:var(--gray-5); border-radius:8px; margin:2px 0 4px}
  .exp-in .l{display:grid; grid-template-columns:120px 1fr 110px 90px; gap:10px; align-items:center;
             padding:6px 4px; border-bottom:1px solid var(--line); font-size:14px}
  .exp-in .l:last-child{border-bottom:0}
  .exp-in .l .w{font-weight:600; color:var(--fg)}
  .exp-in .l .t{font-variant-numeric:tabular-nums}
  .exp-in .l .d{text-align:right; font-variant-numeric:tabular-nums; color:var(--dim)}
  .exp-in .l .d.gone{color:var(--danger-60); font-weight:700}   /* 펼침 목록도 본표와 같은 상태색 */
  .exp-in .l .d.urgent{color:var(--err); font-weight:700}
  .exp-in .l .d.soon{color:var(--warn); font-weight:700}
  .exp-in .l .q{text-align:right; font-variant-numeric:tabular-nums; color:var(--dim)}
  .exp-in .l.exhead{font-size:12px; font-weight:700; color:var(--dim); border-bottom:1.5px solid var(--line)}
  .exp-in .l.exhead .d,.exp-in .l.exhead .q,.exp-in .l.exhead .w{color:var(--dim)}
  .exmore{cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px}
  .exmore:hover{color:var(--brand-ink)}
  td.total{font-weight:800; color:var(--fg)}
  td.soft{color:var(--dim)} td.bad{color:var(--err); font-weight:700}
  .pname{font-weight:600; color:var(--fg)} td.c1 code{display:block; color:var(--dim); font-size:12px; margin-top:2px}
  .ctag{display:inline-block; font-size:11px; font-weight:600; color:var(--brand-ink);
        background:var(--brand-soft); padding:2px 9px; border-radius:999px; line-height:1.5; white-space:nowrap}
  .gone{color:var(--danger-60); font-weight:800}
  .urgent{color:var(--err); font-weight:700} .soon{color:var(--warn); font-weight:700}
  .sr{position:absolute; left:-9999px}

  /* ── 재고 수불부(view-trend) ── 아르고 수불부 모양. 기간이 옆으로 길어 좌우 스크롤. */
  #tr-bar .btn{height:40px; padding:0 20px; border:0; border-radius:7px; background:var(--brand);
    color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; align-self:flex-end}
  #tr-bar .btn:hover{background:var(--brand-strong)} #tr-bar .btn:disabled{opacity:.5; cursor:default}
  .tr-msg{align-self:flex-end; padding-bottom:10px; font-size:13px; color:var(--dim)}
  .tr-msg.err{color:var(--err); font-weight:700}
  .trhelp{font-size:13px; color:var(--dim); line-height:1.7; margin-bottom:14px}
  .trhelp code{background:var(--head); padding:1px 6px; border-radius:4px; font-size:12px}
  .trscroll{overflow-x:auto} .trscroll:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
  #view-trend table{border-collapse:collapse; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13px}
  #view-trend th,#view-trend td{padding:9px 12px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:right}
  #view-trend thead th{position:sticky; top:0; background:var(--card); z-index:2; font-weight:700;
    font-size:12px; color:var(--dim)}
  /* 월 경계는 뚜렷하게(진한 2px), 월 안쪽 칸선은 얇게(연한 1px) — 위계로 월별 구분을 살린다 */
  #view-trend .grp{text-align:center; border-left:2px solid var(--gray-30); background:var(--head)}
  #view-trend .k0{border-left:2px solid var(--gray-30)}
  #view-trend .no{position:sticky; left:0; width:52px; min-width:52px; z-index:1; background:var(--card); color:var(--dim)}
  #view-trend .ctr{position:sticky; left:52px; width:92px; min-width:92px; z-index:1; background:var(--card); text-align:left}
  #view-trend .nm{position:sticky; left:144px; min-width:240px; max-width:300px; z-index:1; background:var(--card);
    text-align:left; white-space:normal; box-shadow:1px 0 0 var(--line)}
  #view-trend thead .no,#view-trend thead .ctr,#view-trend thead .nm{z-index:3; background:var(--card)}
  #view-trend .bc{text-align:left; font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--dim)}
  #view-trend .exp{text-align:left; line-height:1.35} #view-trend .exp .sub{color:var(--dim); font-size:12px}
  #view-trend .lot{text-align:left; font-family:ui-monospace,Menlo,monospace; font-size:12px}
  #view-trend .lot .more{color:var(--brand); font-weight:700}
  #view-trend .base{font-weight:700; border-left:2px solid var(--gray-30)}
  #view-trend .up{color:var(--ok-ink)} #view-trend .down{color:var(--err)} #view-trend .zero{color:var(--gray-30)}
  #view-trend .end{font-weight:700}
  #view-trend .bymonth::after{content:'·달'; font-size:11px; font-weight:500; color:var(--dim); margin-left:4px}
  .trnone{padding:40px 0; text-align:center; color:var(--dim)}

  /* ── 실사 입력(view-scan) ── 창고에서 손에 들고 쓰는 화면. 누르는 것 48px 이상.
     넓은 화면은 두 칸(입력 | 결과), 좁으면 위아래로 쌓는다. */
  .ofgrid{display:grid; grid-template-columns:minmax(340px,460px) minmax(0,1fr); gap:18px; align-items:start}
  @media (max-width:900px){ .ofgrid{grid-template-columns:1fr} }
  .ofcol-in,.ofcol-side{display:flex; flex-direction:column; gap:16px; min-width:0}
  .ofcard{overflow:hidden} .ofcard .card-h .n{color:var(--brand); font-weight:800}
  .ofpad{padding:16px 18px}
  #of-log{max-height:60vh} #of-log table{width:100%}
  #of-log .none{padding:24px 18px; color:var(--dim)}
  #of-log .up{color:var(--ok-ink); font-weight:700} #of-log .down{color:var(--err); font-weight:700}
  .ofrow-who{font-size:14px; color:var(--dim)}
  .ofrow-who input{font:inherit; font-size:15px; width:130px; padding:8px 12px; min-height:44px;
    border:1px solid var(--gray-40); border-radius:7px; background:var(--card); color:var(--fg); margin-left:8px}
  #view-scan .btn{height:44px; padding:0 20px; border:0; border-radius:7px; background:var(--brand);
    color:#fff; font:inherit; font-weight:700; cursor:pointer}
  #view-scan .btn:hover{background:var(--brand-strong)}
  .ofscan{display:flex; flex-direction:column; gap:8px}
  .ofscan label{font-size:14px; color:var(--dim); font-weight:500}
  #of-barcode{font:700 22px/1.4 ui-monospace,Menlo,monospace; padding:16px; border:2px solid var(--brand);
    border-radius:8px; background:var(--card); color:var(--fg); width:100%; min-height:56px}
  #view-scan .item .nm{font-size:19px; font-weight:700; overflow-wrap:anywhere; line-height:1.5}
  #view-scan .item .bc{font:14px/1.5 ui-monospace,Menlo,monospace; color:var(--dim)}
  #view-scan .item .tag{display:inline-block; font-size:12px; padding:4px 12px; border-radius:99px;
    background:var(--head); color:var(--dim); margin-top:6px; font-weight:700}
  #view-scan .item .tag.new{background:var(--warn-soft); color:var(--warn-ink)}
  #view-scan .stock{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
  #view-scan .stock span{font-size:12px; padding:4px 12px; border-radius:99px; background:var(--head); color:var(--dim)}
  #view-scan .stock span b{color:var(--fg)}
  #view-scan .found{display:flex; flex-direction:column; gap:0}
  #view-scan .found button{font:inherit; text-align:left; background:none; border:0; cursor:pointer; color:inherit;
    padding:12px; border-radius:7px; min-height:48px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline}
  #view-scan .found button:hover{background:var(--head)}
  #view-scan .found button+button{border-top:1px solid var(--line); border-radius:0}
  #view-scan .found .bc{font:14px/1.5 ui-monospace,Menlo,monospace; color:var(--dim)}
  #view-scan .found .q{font-size:14px; color:var(--dim); white-space:nowrap}
  #view-scan .row{display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center; margin-top:16px}
  #view-scan .row>label{font-size:14px; color:var(--dim); font-weight:500}
  #view-scan .row input{font:700 20px/1.4 ui-monospace,Menlo,monospace; padding:12px 16px; border:1px solid var(--gray-40);
    border-radius:7px; background:var(--card); color:var(--fg); width:100%; min-height:52px}
  #view-scan .hint{grid-column:2; font-size:14px; color:var(--dim); margin-top:-4px}
  #view-scan .lots{display:flex; gap:8px; flex-wrap:wrap; grid-column:2}
  #view-scan .lots button{font:inherit; font-size:14px; padding:8px 16px; border-radius:99px; min-height:44px;
    border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer}
  #view-scan .lots button:hover{border-color:var(--brand); background:var(--brand-soft)}
  #view-scan .lots button .q{color:var(--dim); margin-left:8px}
  #view-scan .go{margin-top:16px; width:100%; font:700 17px/1 inherit; padding:20px; min-height:56px;
    border:0; border-radius:8px; background:var(--brand); color:#fff; cursor:pointer}
  #view-scan .go:hover{background:var(--brand-strong)} #view-scan .go:disabled{opacity:.45; cursor:default}
  #view-scan .warn{margin-top:12px; padding:12px 16px; border-radius:7px; font-size:14px; font-weight:500;
    background:var(--warn-soft); color:var(--warn-ink); border:1px solid var(--warn-soft)}
  #view-scan .warn.err{background:var(--err-soft); color:var(--err-ink); border-color:var(--err)}
  #view-scan .ofdone h3,#view-scan .ofclose h3{font-size:17px; margin:0 0 10px; font-weight:700}
  #view-scan .done .l,#of-log .l{display:grid; grid-template-columns:1fr auto auto; gap:12px; font-size:16px;
    align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line)}
  #of-log .l:last-child{border-bottom:0}
  #of-log .e{color:var(--dim)} #of-log .q{font-weight:700}
  #of-log .none,#of-closing .none{color:var(--dim); font-size:16px}
  #view-scan .up{color:var(--ok-ink)} #view-scan .down{color:var(--err)}
  #view-scan [hidden]{display:none!important}
  #view-scan .ofwhy{margin:0 0 16px; color:var(--dim); line-height:1.5; font-size:14px}
  #view-scan .ofsince{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  #view-scan .ofsince label{color:var(--dim); font-size:14px}
  #view-scan .ofsince input[type=date]{padding:12px 16px; font:inherit; font-size:16px; min-height:48px;
    border:1px solid var(--gray-40); border-radius:7px; background:var(--card); color:var(--fg)}
  #of-closemsg:not(:empty){margin-top:16px; font-size:16px} #of-closemsg.err{color:var(--err)}
  #view-scan .rep{margin-top:20px}
  #view-scan .rep .sum{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:16px}
  #view-scan .rep h3{margin:0 0 8px; font-size:17px; font-weight:700}
  #view-scan .rep .l{display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
  #view-scan .rep .l .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #view-scan .rep .l .e{color:var(--dim)} #view-scan .rep .l .q{width:84px; text-align:right}
  #view-scan .rep .miss{margin-top:24px} #view-scan .rep .acts{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; align-items:center}
  #view-scan .rep .keep{padding:12px 24px; font:inherit; font-size:16px; cursor:pointer; font-weight:700; min-height:48px;
    border-radius:7px; border:1px solid var(--brand); background:var(--brand); color:#fff}
  #view-scan .rep .keep:hover{background:var(--brand-strong)}
  #view-scan .rep .zero{padding:12px 24px; font:inherit; font-size:16px; cursor:pointer; min-height:48px; border-radius:7px;
    background:none; border:1px solid var(--gray-40); color:var(--fg)}
  #view-scan .rep .zero:hover{border-color:var(--err); color:var(--err)}
  #view-scan .rep .warn{color:var(--err); font-size:14px; background:none; border:0; padding:0; margin-top:0}

/* Shared working surface: all routes use this shell and the same controls. */
[hidden]{display:none!important}
button,input,select{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button:disabled{opacity:.55;cursor:wait}
.block>h2{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:22px;line-height:1.4;margin-bottom:20px}
.block>h2 .sub{margin-left:0}
.tools{padding:16px 18px;gap:16px}
.ofrow-who{margin:0;align-items:center;gap:12px}
.ofrow-who input{margin:0;flex:1;min-width:0;height:40px;font-size:14px;border-color:var(--line)}
.ofrow-who label{font-size:12px;font-weight:600;color:var(--dim)}
#of-panel .item{padding-bottom:16px;border-bottom:1px solid var(--line)}
#view-scan .row{grid-template-columns:1fr;gap:6px;margin-top:18px}
#view-scan .row>label{font-size:12px;font-weight:600}
#view-scan .row input{font-size:16px;font-family:inherit;min-height:44px;padding:10px 12px;border-color:var(--line)}
#view-scan .hint{grid-column:auto;font-size:12px;line-height:1.6;margin:0;color:var(--dim)}
#view-scan .lots{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
#view-scan .lots .hint{flex-basis:100%}
#view-scan .lots button{font-size:13px;padding:6px 12px;min-height:36px}
#view-scan .go{padding:12px 18px;min-height:44px;font:600 14px/1.5 inherit;border-radius:7px}
#of-barcode{font:500 16px/1.5 inherit;min-height:48px;padding:12px;border-width:1px}
.ofscan>label{font-size:12px;font-weight:600}
.notice:empty{display:none}.notice{font-size:13px;line-height:1.6;color:var(--ok-ink);padding:10px 12px;background:var(--ok-soft);border-radius:6px}
.notice.error{color:var(--err-ink);background:var(--err-soft)}
.found button small{display:block}.empty{padding:18px;margin:0;color:var(--dim)}
#view-scan .ofsince{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
#view-scan .ofsince label{grid-column:1/-1;font-size:12px;font-weight:600}
#view-scan .ofsince input[type=date]{min-width:0;width:100%;height:40px;min-height:40px;padding:8px 12px;font-size:14px;border-color:var(--line)}
#view-scan .btn,#tr-bar .btn{height:40px;font-size:14px;padding:0 18px}
#of-closemsg:not(:empty){font-size:13px;margin-top:12px}
.closing-list{max-height:260px;overflow:auto;border-top:1px solid var(--line);margin:12px 0}
.closing-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.secondary,.danger{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:var(--card);cursor:pointer}
.danger{border-color:var(--err);color:var(--err-ink)}
.trhelp{padding:16px 18px;border-bottom:1px solid var(--line);margin:0;font-size:12px}
.trscroll{max-height:65vh;overflow:auto}
#view-trend thead tr:nth-child(2) th{top:37px}
#view-trend thead th{background:var(--head)}
#view-trend .nm{width:240px;min-width:240px;max-width:240px}
#view-trend .grp,#view-trend .k0{border-left:1px solid var(--gray-30)}
#of-log{max-height:360px}
@media(max-width:1100px){.ofgrid{grid-template-columns:1fr}.content{padding:20px}.field.grow{min-width:180px}}
@media(max-width:700px){
 .app{display:block}.side{height:auto;position:relative;padding:12px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
 .brand{padding:0 8px 10px;font-size:17px}.lnb ul{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px}
 .lnb a{white-space:nowrap;padding:8px 10px;font-size:13px}.topbar{padding:10px 16px;position:relative}
 .content{padding:18px 12px 40px}.stamp{font-size:12px}.block>h2{font-size:20px;gap:4px}.block>h2 .sub{flex-basis:100%;font-size:12px}
 .tools{gap:12px;padding:14px}.field.grow{flex-basis:100%;min-width:0}.field select{max-width:100%}
 .ofgrid{grid-template-columns:minmax(0,1fr)}.ofpad{padding:16px}.card-h{padding:12px 14px}.card-h .why{display:none}
 .sum-group{grid-template-columns:repeat(2,minmax(0,1fr))}.sum{padding:14px}.sum .v{font-size:22px}
 tbody td,thead th{padding:10px 12px;font-size:13px}#view-trend .no,#view-trend .ctr,#view-trend .nm{position:static}
 #tr-bar .field{flex:1;min-width:120px}.closing-row{gap:8px}.hist-in .l{grid-template-columns:1fr 60px;gap:6px}
}
@media(prefers-reduced-motion:reduce){.block.is-active{animation:none}*{scroll-behavior:auto!important}}

.login-card{width:min(440px,calc(100% - 32px));margin:12vh auto;padding:28px}.login-card .field{display:grid;gap:8px;margin:24px 0}.login-card input{width:100%;box-sizing:border-box;padding:12px}.login-card button{padding:12px 20px;background:var(--brand);color:white;border:0;border-radius:8px}
/* 접속 승인(2026-10-14 시안) — 처음 보는 기기는 사장님 승인을 기다린다 */
.login-card [hidden]{display:none !important}
.login-card .login-hint{color:var(--dim);font-size:14px;line-height:1.6;margin:16px 0 0}
.login-card .login-wait{display:flex;align-items:center;gap:10px;margin:8px 0 4px;font-weight:700;color:var(--brand-strong)}
.login-card .login-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);animation:login-blink 1.2s infinite}
@keyframes login-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.login-card .login-dot{animation:none}}
.login-card .login-who{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:18px 0}
.login-card .login-who dt{color:var(--dim)} .login-card .login-who dd{margin:0}
.login-card button.login-ghost{background:var(--card);color:var(--fg);border:1px solid var(--line)}

@media(max-width:700px){.lnb .navsec{display:none}.lnb li{flex-shrink:0}}
  /* 실사: 센 방식(새로 세기 / 더하기) */
  #view-scan .seg{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  #view-scan .seg button{font:inherit; display:flex; flex-direction:column; gap:2px; align-items:center; padding:10px 12px;
    min-height:56px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); cursor:pointer}
  #view-scan .seg button small{font-size:12px; color:var(--dim)}
  #view-scan .seg button[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--brand)}
  #view-scan .seg button[aria-pressed="true"] strong{color:var(--brand-strong)}
  #view-scan .hint.preview{font-size:14px; font-weight:700; color:var(--fg)}
  #view-scan .today{grid-column:1/-1; font-size:14px}
  #view-scan .today .l{padding:4px 0; border-bottom:1px solid var(--line)}
  #view-scan .today .l:last-child{border-bottom:0}
  /* 실사: 검색 결과는 검색칸 바로 아래 / 반영 전 기록 / 실사 마치기 */
  #view-scan .ofscan #of-found{margin-top:8px; border:1px solid var(--line); border-radius:8px; max-height:50vh; overflow:auto; background:var(--card)}
  #view-scan .ofscan #of-found .empty{padding:12px; margin:0; color:var(--dim); font-size:14px}
  #of-log .warnbar{background:var(--warn-soft); color:var(--warn-ink); padding:8px 16px; font-size:13px; font-weight:600}
  #of-log .draft{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:10px; align-items:center;
    padding:10px 16px; border-top:1px solid var(--line); font-size:14px}
  #of-log .draft .pname{font-weight:600} #of-log .draft small{color:var(--dim); font-size:12px}
  #of-log .draft .at{color:var(--dim); font-size:12px}
  #of-log .draft .x{font:inherit; font-size:12px; color:var(--dim); background:none; border:0; text-decoration:underline; cursor:pointer; padding:6px}
  #of-log .empty{padding:16px; margin:0; color:var(--dim); font-size:14px}
  #of-closing .chk{display:flex; gap:8px; align-items:flex-start; font-size:13px; margin-top:12px; color:var(--dim)}
  #of-closing .chk input{margin-top:2px}
  #of-closing .closing-row{grid-template-columns:minmax(0,1fr) auto}
  @media(max-width:700px){#of-log .draft{grid-template-columns:minmax(0,1fr) auto; } #of-log .draft .at{display:none}}

/* 화면 판 대기·숨긴 상품 안내 줄 */
.infobar{margin:0 0 12px; padding:8px 14px; border-radius:8px; background:var(--head); font-size:13px; color:var(--dim)}
.infobar a{color:var(--brand-strong); font-weight:700; margin-left:4px}
#view-scan .tag.hid,#of-log .tag.hid,#of-found .tag.hid{display:inline-block; margin-left:6px; font-size:11px; padding:1px 7px; border-radius:6px; background:#eceef2; color:#5b6170; font-weight:600}

/* 관리자 — 상품 보이기 설정 */
#view-admin .adm-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line)}
#view-admin .adm-bar input,#view-admin .adm-bar select{padding:8px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--card); color:var(--fg)}
#view-admin .adm-bar input{min-width:220px; flex:1 1 220px}
#view-admin .adm-chips{display:flex; gap:6px}
#view-admin .chip{padding:6px 12px; border-radius:99px; border:1px solid var(--line); font:inherit; font-size:13px; background:var(--card); color:var(--fg); cursor:pointer}
#view-admin .chip[aria-pressed="true"]{background:var(--brand-soft); border-color:var(--brand); color:var(--brand-strong); font-weight:700}
#view-admin .adm-bulk{margin-left:auto; display:flex; gap:6px; align-items:center}
#view-admin .adm-sel{font-size:13px; color:var(--dim)}
#view-admin .adm-bulk button{padding:7px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; font-size:13px; cursor:pointer}
#view-admin .adm-bulk button:disabled{opacity:.45; cursor:default}
#view-admin table{width:100%; border-collapse:collapse; font-size:14px}
#view-admin th,#view-admin td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
#view-admin td.n,#view-admin th.n{text-align:right; font-variant-numeric:tabular-nums}
#view-admin tr.off td{color:var(--dim)}
#view-admin .pname{font-weight:600} #view-admin code{font-size:12px; color:var(--dim)}
#view-admin .tag{display:inline-block; margin-left:6px; font-size:11px; padding:1px 7px; border-radius:6px; background:#eceef2; color:#5b6170; font-weight:600}
#view-admin .when{display:block; font-size:11px; color:var(--dim)}
#view-admin .tg{width:42px; height:24px; border-radius:99px; background:#cfd3da; position:relative; border:0; cursor:pointer; vertical-align:middle; margin-right:6px}
#view-admin .tg::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s}
#view-admin .tg.on{background:var(--brand)} #view-admin .tg.on::after{left:21px}
#view-admin .tg:disabled{opacity:.45; cursor:default}
#view-admin .risk{margin:12px 16px; padding:10px 14px; border-radius:8px; background:var(--warn-soft); color:var(--warn-ink); font-size:13px}
#view-admin .risk summary{font-weight:700; cursor:pointer} #view-admin .risk ul{margin:8px 0 0; padding-left:18px}
#view-admin .empty{padding:16px; color:var(--dim)}
.infobar.err{background:var(--err-soft); color:var(--err-ink)}
.infobar.warnbar{background:var(--warn-soft); color:var(--warn-ink); font-weight:600}
@media(max-width:700px){#view-admin .adm-bulk{margin-left:0} #view-admin th:nth-child(3),#view-admin td:nth-child(3){display:none}}

/* 업무 프로필 — 위쪽 고르기와 관리 화면 */
.topbar .pf{display:flex; align-items:center; gap:8px; margin-right:auto; font-size:13px; color:var(--dim)}
.topbar .pf select{padding:6px 10px; border-radius:8px; border:1px solid var(--brand); background:var(--brand-soft); color:var(--brand-strong); font:inherit; font-weight:700; max-width:240px}
#view-profiles .pf-new{display:flex; gap:8px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
#view-profiles .pf-new input,#view-profiles .pf-new select,#view-profiles .pf-rename{padding:8px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--card); color:var(--fg)}
#view-profiles .pf-new input{min-width:240px; flex:1 1 240px}
#view-profiles .pf-copy{display:flex; gap:6px; align-items:center; font-size:13px; color:var(--dim)}
#view-profiles .go2{padding:8px 16px; border-radius:8px; border:0; background:var(--brand); color:#fff; font:inherit; font-weight:700; cursor:pointer}
#view-profiles .go2:disabled{opacity:.45}
#view-profiles table{width:100%; border-collapse:collapse; font-size:14px}
#view-profiles th,#view-profiles td{padding:12px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
#view-profiles td.acts{text-align:right; white-space:nowrap}
#view-profiles .btn2{padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; font-size:13px; margin-left:6px; cursor:pointer}
#view-profiles .btn2.danger{color:var(--err); border-color:var(--err); width:7.5em; box-sizing:border-box; text-align:center}   /* '정말 지우기' 로 바뀌어도 폭이 같게 */
#view-profiles .btn2:disabled{opacity:.45}
#view-profiles .using{font-size:11px; padding:2px 8px; border-radius:99px; background:var(--brand-soft); color:var(--brand-strong); font-weight:700; margin-left:6px}
#view-profiles .pf-fixed{font-size:11px; padding:2px 8px; border-radius:99px; background:var(--line); color:var(--dim); margin-left:6px}
#view-profiles .pf-note{padding:12px 16px; margin:0; font-size:13px; color:var(--dim)}
#view-profiles .empty{padding:16px; color:var(--dim)}
@media(max-width:700px){.topbar .pf{margin-right:0} #view-profiles td.acts{white-space:normal}}

/* 접속 기기 — 업무 프로필 표와 같은 짜임 */
#view-devices table{width:100%; border-collapse:collapse; font-size:14px}
#view-devices th,#view-devices td{padding:12px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
#view-devices .using{font-size:11px; padding:2px 8px; border-radius:99px; background:var(--brand-soft); color:var(--brand-strong); font-weight:700; margin-left:6px}
#view-devices .pf-note{padding:12px 16px; margin:0; font-size:13px; color:var(--dim)}
#view-devices .empty{padding:16px; color:var(--dim)}
#view-devices .dev-wait{padding:16px 18px; margin-bottom:16px; border-left:4px solid var(--brand)}
#view-devices .dev-row{display:flex; align-items:center; gap:16px; margin-top:10px; flex-wrap:wrap}
#view-devices .dev-note{color:var(--dim); font-size:13px; margin-top:6px}
#view-devices .infobar.warnbar{margin-bottom:12px}
@media(max-width:700px){#view-devices th:nth-child(3),#view-devices td:nth-child(3),#view-devices th:nth-child(5),#view-devices td:nth-child(5){display:none} }

/* 상품 보이기 설정: 이 설정을 적용할 업무 */
.adm-pf{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; margin:0 0 14px; border:2px solid var(--brand); border-radius:12px; background:var(--brand-soft)}
.adm-pf label{font-size:13px; color:var(--dim)}
.adm-pf select{padding:6px 12px; border:1px solid var(--brand); border-radius:8px; background:var(--card); color:var(--brand-strong); font:inherit; font-size:16px; font-weight:700; max-width:280px}
.adm-pf #adm-pf-info{font-size:13px; color:var(--dim)}
.adm-pf a{margin-left:auto; font-size:13px; color:var(--brand-strong)}

/* 사무실 재고 바로 고치기 — 버튼은 모든 줄이 같은 자리(폭 고정), 고치는 줄은 옅은 보라 */
.infobar.ok{background:var(--ok-soft); color:var(--ok-ink); font-size:14px}
th.acts,td.acts{text-align:right; white-space:nowrap}
.offb{box-sizing:border-box; padding:6px 0; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; font-size:13px; font-weight:600; margin-left:6px; cursor:pointer}
.offb.one{width:7em}
.offb.two{width:7.5em}
.offb.danger{color:var(--err); border-color:var(--err)}
.offb.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.offb:disabled{opacity:.45; cursor:default}
tr.editing td{background:var(--brand-soft)}
.off-qty{box-sizing:border-box; width:8em; padding:5px 10px; border:2px solid var(--brand); border-radius:8px; font:inherit; font-weight:700; text-align:right; background:var(--card); color:var(--fg)}
.card-foot{margin:0; padding:12px 16px; font-size:13px; color:var(--dim); border-top:1px solid var(--line)}

/* 메뉴마다 무엇을 언제 새로 받는지 — 제목 바로 아래 한 줄 */
.cadence{display:inline-block; margin:-6px 0 14px; padding:7px 12px; border-radius:8px; background:var(--brand-soft); color:var(--brand-strong); font-size:13px; line-height:1.5}

/* 아르고 적재 대기 — 판매가능에 들어 있지만 실제로 없는 재고(2026-10-08) */
.sum.must{outline:2px solid var(--err); outline-offset:-2px}
.sum .pill{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px; background:var(--err-soft); color:var(--err-ink); font-size:11px; font-weight:700; vertical-align:middle}
.sum .v .extra{font-style:normal; font-size:15px; font-weight:700; margin-left:8px}
tr.waitrow td{background:var(--err-soft)}
th .thsub{font-size:10px; font-weight:400; color:var(--dim); line-height:1.2}

/* 아르고 적재 대기 로트(2026-10-13 승인 1안) — 실제로 없는 로트는 흐리게, 남은 일수도 굵지 않게. 꼬리표는 붉은 알약 */
.exp-in .l.waitlot{opacity:.5}
.exp-in .l.waitlot .d{font-weight:400; color:inherit}
.waittag{display:inline-block; margin-left:10px; padding:1px 8px; border-radius:99px; font-size:11px; font-weight:700;
  background:var(--err-soft); color:var(--err-ink); vertical-align:middle}
td.waitcell{color:var(--dim)}

/* 쿠팡 미매핑 펼쳐 붙이기(2026-10-14 승인 시안) */
.sum.open{outline:2px solid var(--brand)}
.card.unmap{margin:12px 0 4px}
.unmap-h{padding:14px 16px; display:flex; gap:10px; flex-wrap:wrap; align-items:baseline}
.unmap-h span{font-size:13px; color:var(--dim)}
.unmap-row{padding:16px; border-top:1px solid var(--line)}
.unmap-top{display:flex; gap:12px; justify-content:space-between; align-items:flex-start}
.unmap-top small{display:block; font-size:12px; color:var(--dim); margin-top:4px}
.unmap-q{white-space:nowrap; text-align:right} .unmap-q small{font-size:12px; color:var(--dim)}
.unmap-body{margin-top:10px; display:flex; flex-wrap:wrap; align-items:center}
.unmap-hint{flex:1 1 100%; font-size:12px; color:var(--dim); margin-bottom:6px}
.unmap-cand{display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; text-align:left; max-width:100%; margin:0 6px 6px 0; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; font-size:13px; cursor:pointer}
.unmap-cand .bc{font-variant-numeric:tabular-nums} .unmap-cand .nm{color:var(--dim)}
.unmap-cand.on{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-strong); font-weight:700}
.unmap-cand.on::before{content:'✓'}
.unmap-warn{flex:1 1 100%; font-size:12px; color:var(--warn-ink); background:var(--warn-soft); padding:6px 10px; border-radius:8px; margin:2px 0 8px}
.unmap-in{display:flex; gap:8px; align-items:center; flex:1 1 100%; margin-top:2px}
.unmap-in input{flex:1 1 auto; min-width:0; max-width:360px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--card); color:var(--fg)}
.unmap-go{padding:8px 16px; border-radius:8px; border:1px solid var(--brand); background:var(--brand); color:#fff; font:inherit; font-weight:700; cursor:pointer}
.unmap-go:disabled{border-color:var(--line); background:var(--card); color:var(--dim); opacity:.6; cursor:default}
.unmap-merge{flex:1 1 100%; font-size:12px; color:var(--brand-strong); margin-top:8px}
.unmap-merge:empty,.unmap-msg:empty{display:none}
.unmap-msg{flex:1 1 100%; font-size:13px; padding:8px 16px; color:var(--ok-ink)}
.unmap-msg.err{color:var(--err-ink)}
.unmap-foot{margin:0; padding:12px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--dim)}
.remap{margin-left:8px}
.remap-b{font:inherit; font-size:12px; padding:2px 8px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--dim); cursor:pointer; margin-left:4px}
.remap-b.yes{border-color:var(--err-ink); color:var(--err-ink)}
.remap-ask{font-size:12px; color:var(--err-ink)}