/* drawer.css — 담기 서랍(dialog#drawer, 디자인 2d): 아래에서 올라오는 시트 · 검색/칩 · 담을 곳 · 표 · 발
   색은 전부 tokens.css 변수. 하드코딩 금지 — 라이트 테마에서도 같은 구조로 보인다.
   창 높이는 화면의 60%로 고정하고 표만 스크롤한다 → 발의 「닫고 보드로」가 절대 화면 밖으로 밀리지 않는다. */
#drawer{position:fixed;inset:auto 0 0 0;width:auto;max-width:none;height:60vh;max-height:60vh;margin:0;
  border:0;border-top:1px solid var(--line3);border-radius:16px 16px 0 0;background:var(--card);
  box-shadow:0 -30px 80px var(--shadow);overflow:hidden}
/* 자식 차례 = 손잡이 · 머리줄 · 검색줄 · 담을 곳 · 표머리 · 몸 · 발.
   넓은 폭에서는 손잡이가, 좁은 폭에서는 표머리가 숨어 **어느 쪽이든 여섯**이다.
   이걸 안 맞춰 둔 탓에 좁은 폭에서 한 칸씩 당겨져 **목록이 `auto`, 발이 `1fr`** 을
   받았고, 「담은 작업 · 닫고 보드로」 바가 화면에서 사라졌다 (대표 화면).
   시안 §6: 「하단 바는 항상 고정」. */
#drawer[open]{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto}

/* ── 손잡이 · 머리줄 (시안 §6) ── */
.dw-grip{display:none;justify-content:center;padding:6px 0 0;background:var(--panel);flex:none}
.dw-grip span{width:34px;height:4px;border-radius:2px;background:var(--line3)}
.dw-hdr{display:flex;align-items:center;gap:8px;height:36px;padding:0 16px;flex:none;
  border-bottom:1px solid var(--line);background:var(--panel);min-width:0}
.dw-hdr b{font-size:var(--fs-card);font-weight:700;color:var(--gold2);white-space:nowrap}
.dw-hdr .n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--sub);white-space:nowrap}
#drawer::backdrop{background:var(--backdrop)}

/* ── 1줄: 검색 · 건수 · 종류 칩 · 스킬 칩 · 닫기 ── */
.dw-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);min-width:0}
.dw-search{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg);border:1px solid var(--gold);border-radius:8px;width:min(360px,calc(100vw - 40px));flex:none}
.dw-search .mag{color:var(--sub)}
.dw-search input{border:0;background:transparent;padding:0;width:100%;color:var(--gold2);font-size:var(--fs-card)}
.dw-search input:focus{outline:none}
.dw-seg{display:inline-flex;background:var(--bg);border:1px solid var(--line2);border-radius:6px;overflow:hidden;font-size:var(--fs-sm);flex:none}
.dw-seg button{border:0;border-radius:0;padding:4px 10px;font-size:var(--fs-sm);color:var(--sub)}
.dw-seg button.t-gather{color:var(--gather)}.dw-seg button.t-craft{color:var(--blue)}.dw-seg button.t-alter{color:var(--orange)}
.dw-seg button.t-collect{color:var(--collect)}
.dw-seg button.on{background:var(--gold);color:var(--ongold);font-weight:600}
.dw-seg button:disabled{color:var(--dim)}
.dw-skills{display:flex;align-items:center;gap:6px;overflow:hidden;min-width:0;flex:1}
.dw-skills button{padding:3px 9px;font-size:var(--fs-xs);border-radius:5px;color:var(--sub)}
.dw-skills button.on{background:var(--goldbg);border-color:var(--goldline);color:var(--gold2);font-weight:600}
.dw-x{padding:6px 12px;font-size:var(--fs-sm);color:var(--fg2);border:1px solid var(--line2);border-radius:7px;white-space:nowrap;flex:none}
.grow{flex:1}

/* ── 2줄: 담을 곳 ── */
.dw-tgt{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--bg);font-size:var(--fs-sm);min-width:0}
.dw-tgt .lb{color:var(--sub);white-space:nowrap}
.dw-tgts{display:inline-flex;background:var(--inset);border:1px solid var(--line2);border-radius:6px;overflow:hidden;max-width:60%;overflow-x:auto}
.dw-tgts button{border:0;border-radius:0;padding:5px 12px;font-size:var(--fs-sm);color:var(--sub);white-space:nowrap}
.dw-tgts button.on{background:var(--gold);color:var(--ongold);font-weight:600}
.dw-tgts button.busy{color:var(--dim);background:repeating-linear-gradient(135deg,transparent 0 5px,var(--goldwash) 5px 10px)}
.dw-tgts button.new{color:var(--gold)}
.dw-tgtmsg{font-size:var(--fs-xs);color:var(--sub2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dw-tgtmsg.warn{color:var(--warn)}
.dw-newg{display:flex;align-items:center;gap:6px}
.dw-newg input{width:150px;padding:4px 8px;font-size:var(--fs-sm)}
.dw-chain{display:flex;align-items:center;gap:6px;color:var(--sub);white-space:nowrap;margin:0;cursor:pointer}
.dw-chain span{font-size:var(--fs-sm);color:var(--sub)}
.dw-chain em{font-style:normal;color:var(--gold);font-weight:600}
.dw-chain input{margin:0;accent-color:var(--gold);cursor:pointer}

/* ── 표 ── */
.dw-hd,.dw-r{display:grid;grid-template-columns:44px minmax(0,1fr) 70px 96px minmax(0,1fr) 204px;gap:10px;align-items:center;padding:0 16px}
.dw-hd{font-size:var(--fs-xs);color:var(--sub);border-bottom:1px solid var(--line2);padding-top:6px;padding-bottom:6px}
.dw-hd .per{text-align:right}
.dw-hd .qh{display:grid;grid-template-columns:104px 28px 64px;gap:8px;justify-content:end;text-align:center}
.dw-body{overflow-y:auto;overflow-x:hidden;min-height:0}
.dw-r{height:52px;border-bottom:1px solid var(--line)}
.dw-r:hover{background:var(--hover)}
.dw-r .kd{font-size:var(--fs-xs);padding:2px 0;border-radius:4px;text-align:center;font-weight:600;background:var(--soft);color:var(--sub)}
.dw-r .kd.gather{background:var(--gatherbg);color:var(--gather)}
.dw-r .kd.craft{background:var(--runbg);color:var(--blue)}
.dw-r .kd.alter{background:var(--orangebg);color:var(--orange)}
.dw-r .kd.collect{background:var(--collectbg);color:var(--collect)}
/* 가공 행은 「걸기만 / 수령까지」 한 줄이 더 붙어 높다. 수량 열의 폭은 그대로라 +/− 의 x 위치는 다른 행과 같다 */
.dw-r.k-alter{height:70px}
.dw-r .nm{display:flex;flex-direction:column;gap:1px;min-width:0}
.dw-r .nm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-r .nm i{font-style:normal;font-size:var(--fs-xs);color:var(--sub2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-r .dwst{min-width:0;overflow:hidden}
.dw-r .dwst .badge{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.dw-r .per{text-align:right;font-family:var(--mono);color:var(--fg2)}
.dw-r .mats{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;font-size:var(--fs-xs)}
.dw-r .mat{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:4px;border:1px solid var(--line2);color:var(--sub);white-space:nowrap}
.dw-r .mat b{font-family:var(--mono);font-weight:400;color:var(--fg2)}
.dw-r .mat.short{border-color:var(--badline);color:var(--bad2)}
.dw-r .mat.short b{color:var(--bad2)}
.dw-r .mat.move{border-color:var(--warnline);color:var(--warnfg)}
.dw-r .mat.move b{color:var(--warnfg)}
/* 둘째 줄 묶음(.l2 > .dwst · .sep · .tx > .sub · .sep · .est · .mats) 은 좁은 폭의 것이다.
   넓은 폭에서는 `.l2`·`.tx` 를 풀어 `.dwst`·`.mats` 가 표의 4·5열에 그대로 서고,
   좁은 폭 전용 짝(·, 경로, 예상, ×산출, 값 칸 안 단위, 짧은 라벨)은 숨긴다 — 같은 값이 제 열에 있다. */
.dw-r .l2,.dw-r .tx{display:contents}
.dw-r .sep,.dw-r .sub,.dw-r .est,.dw-r .nm .x,.dw-q .vb .u,.dw-chain .short{display:none}
/* 둘째 줄 꼬리(.ops = 가공 방식 · 「최대」 · 수령 안내)는 좁은 폭의 것 — 넓은 폭은 `.qty` 의 짝을 쓴다 (P24) */
.dw-r .ops{display:none}
/* 수량·단위·담기는 고정 폭 열 — 행마다 +/− 의 x 위치가 같아야 한다 (대표 지시) */
.dw-q{display:grid;grid-template-columns:104px 28px 64px;gap:8px;align-items:center;justify-content:end}
.dw-q .qty{display:flex;flex-direction:column;gap:2px;align-items:center}
.dw-q .stepper{grid-template-columns:26px 50px 26px;width:104px}
/* 값 칸 `.vb` = 입력칸 + 단위. base.css 의 `.stepper>*:nth-child(2)` 가 칸(테두리·바탕)을 맡고,
   안의 입력칸은 여기서 민다 — 넓은 폭에서는 칸을 꽉 채우고 단위는 숨는다(옆 `.unit` 열이 있다). */
.dw-q .vb{display:flex;align-items:center;justify-content:center;gap:1px;min-width:0;padding:0;cursor:text}
.dw-q .vb .v{width:100%;min-width:0;height:100%;border:0;background:transparent;padding:0;margin:0;text-align:center;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--fg);-moz-appearance:textfield;border-radius:0}
.dw-q .vb .v::-webkit-outer-spin-button,.dw-q .vb .v::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dw-q .vb .v:focus{outline:none;box-shadow:none}
.dw-q .vb:focus-within{box-shadow:inset 0 0 0 1px var(--gold)}
.dw-q .dwnote{font-size:var(--fs-eyebrow);color:var(--sub2);white-space:nowrap;line-height:1}
/* 가공 방식 두 갈래 (걸기만 / 수령까지) — 스테퍼와 같은 104px 고정 폭 */
.dw-q .dwmode{display:flex;width:104px;background:var(--bg);border:1px solid var(--line2);border-radius:5px;overflow:hidden}
.dw-q .dwmode button{flex:1;min-width:0;height:auto;padding:2px 0;border:0;border-radius:0;
  font-size:var(--fs-eyebrow);line-height:1.5;color:var(--sub);white-space:nowrap}
.dw-q .dwmode button.on{background:var(--orangebg);color:var(--orange);font-weight:600}
.dw-q .dwmode button:hover:not(.on){background:var(--hover);color:var(--fg2)}
/* 수령 행: 스테퍼 대신 완료 건수만 (시설당 1개라 수량을 고를 수 없다) */
.dw-q .cq{display:grid;place-items:center;width:104px;height:26px;font-family:var(--mono);font-size:var(--fs-card);color:var(--fg2)}
.dw-q button.mx{padding:0;border:0;background:transparent;font-size:var(--fs-eyebrow);color:var(--gold3);line-height:1;height:auto}
.dw-q button.mx:hover{color:var(--gold)}
.dw-q .unit{font-size:var(--fs-xs);color:var(--sub);text-align:center}
.dw-q .go{width:64px;padding:5px 0;text-align:center;font-size:var(--fs-sm);font-weight:600;border-radius:6px}
.dw-q .go.gold{background:var(--gold);border-color:var(--gold);color:var(--ongold)}
.dw-q .go.gold:hover{background:var(--goldhover);border-color:var(--goldhover)}
.dw-more{display:flex;justify-content:center;padding:10px}
.dw-empty{padding:28px;text-align:center;color:var(--sub)}

/* ── 발 ── */
.dw-foot{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line2);background:var(--inset);font-size:var(--fs-sm);min-width:0}
.dw-foot .i{color:var(--gold);flex:none}
.dw-foot .info{color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dw-foot .info b{font-family:var(--mono);font-weight:400;color:var(--warnfg)}
.dw-foot .cnt{color:var(--sub);white-space:nowrap}
.dw-foot .cnt b{font-family:var(--mono);font-weight:400;color:var(--fg)}

/* ── 장바구니 (시안 §7) ────────────────────────────────────────────────
   **담기는 바로 담는다.** 이 판은 「내가 뭘 골랐나」를 보여 주고 고치는 창이다
   (대표: 「모바일환경에서 뭘 내가 선택햇는지 보기힘드니까 보여주는 역할」).

   확정 단계는 두지 않는다 — 담기는 재화를 쓰지 않아 되돌릴 수 있고, 재화가 나가는
   자리(▶ 시작)에는 이미 확인창이 있다. 되돌릴 수 있는 일에 확인을 두 번 두면
   손만 한 번 더 간다. **되돌릴 수 있으면 바로, 되돌릴 수 없으면 확정.**

   보여 주는 것은 **대기 열 그 자체**다. 「이번에 담은 것」만 보여 주면 화면을 옮기거나
   새로 고치는 순간 사라져서, 정작 「뭘 골랐나」를 못 보게 된다. 이번에 담은 줄만 표시한다. */
.dw-cartbtn{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  flex:none;cursor:pointer;border-radius:9px;border:1px solid var(--line3);background:transparent;
  color:var(--sub);font-size:var(--fs-sm)}
.dw-cartbtn .ci{flex:none}
.dw-cartbtn .lb{display:flex;flex-direction:column;gap:1px;line-height:1.1;text-align:left}
.dw-cartbtn .lb b{font-weight:600}
.dw-cartbtn .lb i{font-style:normal;font-size:var(--fs-eyebrow);color:var(--sub2)}
.dw-cartbtn:hover{border-color:var(--line3);background:var(--hover);color:var(--fg)}
/* 0건이면 회색 외곽선, 담으면 골드 (시안) */
.dw-cartbtn.has{border-color:var(--goldline);background:var(--goldbg);color:var(--gold)}
/* 배지 — 시안 §6: 우상단 −6 · 18×18 · padding 0 5 · radius 9 · Mono 10 · 테두리 2px(바 색) */
.dw-cartbtn .n{position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:9px;background:var(--gold);color:var(--ongold);
  font:700 10px/1 var(--mono);border:2px solid var(--panel)}

/* 뒤는 62% 어둡게 (시안) — 서랍 **안에서만** 덮는다 */
.dw-scrim{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.62)}

/* 좌우 8px 띄운 카드 · radius 14 · 골드 테두리 (시안) */
.dw-cart{position:absolute;left:8px;right:8px;bottom:8px;z-index:9;max-height:calc(100% - 24px);
  display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:var(--card);border:1px solid var(--goldline);box-shadow:0 -12px 32px var(--shadow)}
.dw-cart .hd{display:flex;align-items:center;gap:8px;padding:10px 12px;flex:none;
  border-bottom:1px solid var(--line2);background:var(--inset)}
.dw-cart .hd b{font-size:var(--fs-card);color:var(--gold2)}
.dw-cart .hd .n{font-family:var(--mono);color:var(--sub)}
.dw-cart .rows{overflow:auto;min-height:0}
.dw-cart .empty{padding:22px 12px;text-align:center;color:var(--sub2);font-size:var(--fs-sm)}

/* 행 = 종류 · 이름/메모 · 스테퍼 · ✕ (시안) */
.dw-cart .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center;
  padding:7px 12px;border-bottom:1px solid var(--line)}
.dw-cart .row.new{background:var(--goldwash)}     /* 이번에 담은 줄 */
.dw-cart .row .nm{display:flex;flex-direction:column;gap:1px;min-width:0}
.dw-cart .row .nm b{font-size:var(--fs-card);font-weight:600;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-cart .row .nm i{font-style:normal;font-size:var(--fs-xs);color:var(--sub2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-cart .row .x{width:26px;height:26px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--line2);border-radius:7px;background:transparent;color:var(--sub)}
.dw-cart .row .x:hover{border-color:var(--badline);color:var(--bad2);background:var(--badbg2)}
.dw-cart .row .stepper{height:34px}               /* 터치 최소치 (시안) */

/* 맨 아래 호출 예상 + 정령의 날개 합계 (시안) */
.dw-cart .sum{display:flex;align-items:center;gap:10px;padding:9px 12px;flex:none;
  border-top:1px solid var(--line2);background:var(--inset);font-size:var(--fs-sm);color:var(--sub)}
.dw-cart .sum b{font-family:var(--mono);font-weight:400;color:var(--fg)}
.dw-cart .sum .gold{color:var(--gold)}

/* 담기·스테퍼 높이 34px — 마우스/터치 겸용 최소치 (시안) */
.dw-q .stepper,.dw-r .go{height:34px}
.dw-r .go{padding:0 12px}
/* 담은 행 — 「✓ 담음」 외곽선. 수량은 그대로 남아 **다시 담을 수 있다** (시안) */
.dw-r .go.done{background:transparent;border:1px solid var(--goldline);color:var(--gold)}

@media (width < 600px){
  /* ── 시트 (시안 §6: 「위 14px를 비우고 뜹니다」) ──────────────────────
     꽉 차서 100dvh 로 두면 「새 페이지」처럼 보여 닫는 것인 줄을 모른다.
     14px 틈과 윗변 골드 헤어라인이 「이건 위에 얹힌 판」이라고 말해 준다. */
  #drawer{inset:14px 0 0 0;height:auto;max-height:none;
    border:1px solid var(--line3);border-bottom:0;border-radius:16px 16px 0 0;
    box-shadow:0 -12px 32px var(--shadow),0 -1px 0 var(--goldwash)}
  .dw-grip{display:flex}
  /* 머리줄 — 목업: h36 · padding 0 12 · 제목 13px 700 · 건수 Mono 10px · 「닫기」 h28 r8 11px */
  .dw-hdr{padding:0 12px}
  .dw-hdr b{font-size:var(--fs-body)}
  .dw-hdr .n{font-size:var(--fs-eyebrow)}
  .dw-x .esck{display:none}          /* 시안: 좁은 폭에서는 그냥 「닫기」 */
  .dw-x{height:28px;padding:0 11px;border-radius:8px;font-size:var(--fs-xs)}

  /* ── 검색 · 분류 칩 — **각자 자기 줄** (시안) ──────────────────────
     한 줄에 몰아넣었더니 검색창(360px 고정)이 칩도 닫기도 화면 밖으로 밀어냈다. */
  .dw-top{flex-direction:column;align-items:stretch;gap:8px;padding:10px 10px 0;border-bottom:0}
  /* 검색 — 목업: h38 · padding 0 11 · r9 · 골드 테두리 · ⌕ 골드 12px · 글 12px */
  .dw-search{width:auto;flex:none;height:38px;padding:0 11px;border-radius:9px;background:var(--card2)}
  .dw-search .mag{color:var(--gold);font-size:var(--fs-sm)}
  .dw-search input{font-size:var(--fs-sm)}
  /* 칩은 **가로로 끌린다** — 다섯 개를 접어 넣으면 글자가 짜부라진다 */
  .dw-seg,.dw-skills{flex:none;max-width:100%;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;background:transparent;border:0;border-radius:0}
  .dw-seg::-webkit-scrollbar,.dw-skills::-webkit-scrollbar{display:none}
  /* 분류 칩 — 목업: h26 · padding 0 9 · r13 · gap 5 · 10px 500(꺼짐)/700(켜짐) · 건수 Mono 9px */
  .dw-seg{gap:5px}
  .dw-seg button{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:13px;
    border:1px solid var(--line2);background:transparent;font-size:var(--fs-eyebrow);font-weight:500}
  .dw-seg button .c{font-family:var(--mono);font-size:9px}
  .dw-seg button.on{border-color:var(--goldline);background:var(--goldbg);color:var(--gold2);font-weight:700}
  .dw-skills:empty{display:none}

  /* 담을 곳 + 「부족 재료 제안」은 **한 줄에** (시안) — 세그 h24 r8 · 라벨 10px · ✓ 네모 14px r4 골드 */
  .dw-tgt{padding:8px 10px 9px;gap:6px;background:transparent;font-size:var(--fs-eyebrow)}
  .dw-tgt .lb{font-size:var(--fs-eyebrow)}
  .dw-tgts{border-radius:8px;max-width:none}
  .dw-tgts button{height:24px;padding:0 9px;font-size:var(--fs-eyebrow);line-height:1}
  .dw-chain{gap:5px}
  .dw-chain span{font-size:var(--fs-eyebrow)}
  .dw-chain .long{display:none}
  .dw-chain .short{display:inline}
  .dw-chain input{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;border-radius:4px;
    border:1px solid var(--line3);background:transparent;display:inline-grid;place-items:center;
    font-size:9px;font-weight:700;line-height:1;color:var(--ongold)}
  .dw-chain input:checked{background:var(--gold);border-color:var(--gold)}
  .dw-chain input:checked::before{content:"✓"}
  .dw-tgtmsg{display:none}           /* 줄을 밀어낸다 — 같은 말이 토스트로도 나온다 */

  /* ── 행 — 시안 §6 목업의 행 HTML 그대로 (`fr.rows` 한 줄) ───────────────
       grid auto 1fr auto auto · gap 9 · padding 8px 10px · 아래선
       ┌ 종류 칩 ┐ 이름 13px 700 ………………  ┌ − │ 100개 │ + ┐ ( 담기 )
       └ h20 r5 ┘ 상태 · 경로 · 재료|예상 (한 줄) └ h34 r8 ────┘  h34 r17   (목업 그림 h30 → 글머리 34px, P24)
     앞서 설명 목록만 보고 옮겨 상태·경로를 격자 칸에 따로 놓았고, 재료를 접고, 단위를 숨겼다 —
     대표가 목업과 나란히 놓고 「왜 이대로 안 했냐」 했다. 이번엔 목업의 행 한 줄을 그대로 옮긴다. */
  .dw-hd{display:none}
  .dw-r{grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-rows:auto auto;height:auto;
    padding:8px 10px;column-gap:9px;row-gap:2px;align-items:center;border-bottom:1px solid var(--line)}
  .dw-r.k-alter{height:auto}
  /* 종류 칩 — h20 · padding 0 6 · r5 · 10px 700 · 색은 종류별 (넓은 폭 규칙 그대로) */
  .dw-r .kd{grid-area:1/1/3/2;height:20px;display:inline-flex;align-items:center;
    padding:0 6px;border-radius:5px;font-size:var(--fs-eyebrow);font-weight:700;white-space:nowrap}
  /* 이름 — 13px 700 골드 말줄임 · ×산출은 이름 옆 「가죽 ×3」 (목업 `n:'가죽 ×3'`) */
  .dw-r .nm{grid-area:1/2/2/3;gap:0}
  .dw-r .nm b{font-size:var(--fs-body);font-weight:700;color:var(--gold2);line-height:1.3}
  .dw-r .nm .x{display:inline;font-style:normal;font-family:var(--mono);font-size:var(--fs-eyebrow);
    font-weight:400;color:var(--sub2);margin-left:5px}
  .dw-r .nm i,.dw-r .per,.dw-r .unit,.dw-r.k-gather .dwnote{display:none}   /* 넓은 폭의 짝 — 둘째 줄·이름·값 칸에 같은 값이 있다 */
  /* 둘째 줄 — **한 요소 한 줄** (목업 `{{ r.st }} · {{ r.line2 }}`): flex gap 4 · 10px · #6f7a8a
     상태는 색만 있는 글자(600, 줄어들지 않음) · 「·」 · 나머지가 한 덩어리로 말줄임 */
  .dw-r .l2{grid-area:2/2/3/3;display:flex;gap:4px;min-width:0;font-size:var(--fs-eyebrow);
    color:var(--sub2);white-space:nowrap;overflow:hidden;line-height:1.3}
  .dw-r .l2 .dwst,.dw-r .l2>.sep{flex:none;overflow:visible;min-width:auto}
  .dw-r .l2 .badge{display:inline;background:transparent;padding:0;border-radius:0;
    font-size:var(--fs-eyebrow);font-weight:600;max-width:none;overflow:visible}
  .dw-r .l2 .tx{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .dw-r .l2 .sep,.dw-r .l2 .sub,.dw-r .l2 .est,.dw-r .l2 .mats,.dw-r .l2 .mat{display:inline}
  .dw-r .l2 .sub{font-style:normal}
  /* 재료는 칩이 아니라 글줄이다 — 「상급 가죽 6/4 · 옷감+ 337/2」 (목업 `mats`) */
  .dw-r .l2 .mat{gap:0;padding:0;border:0;color:inherit}
  .dw-r .l2 .mat b{font-family:inherit;color:inherit}
  .dw-r .l2 .mat.short,.dw-r .l2 .mat.short b,.dw-r .l2 .mat.move,.dw-r .l2 .mat.move b{color:inherit}
  /* 둘째 줄 꼬리 (P24) — 시안에 없는 기능 둘(가공 방식 · 「최대」)을 행 높이를 안 늘리는 이 줄 끝에 둔다.
     예전엔 스테퍼 위·아래에 쌓아 제작 59px · 가공 82px 로 채집(한 줄 행)보다 컸다 (실테스트 T1-3-2).
     글줄(.tx)이 먼저 말줄임되고 꼬리는 줄지 않는다. 글자 크기 = 둘째 줄 그대로(10px), 칩 높이 14px. */
  .dw-r .l2 .ops{display:inline-flex;align-items:center;gap:4px;flex:none}
  .dw-r .l2 .dwmode{display:inline-flex;height:14px;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
  .dw-r .l2 .dwmode button{height:100%;padding:0 4px;margin:0;border:0;border-radius:0;background:transparent;
    font-size:inherit;line-height:1;color:var(--sub)}
  .dw-r .l2 .dwmode button.on{background:var(--orangebg);color:var(--orange);font-weight:600}
  .dw-r .l2 .mx{height:auto;padding:0;margin:0;border:0;border-radius:0;background:transparent;
    font-size:inherit;line-height:inherit;font-weight:600;color:var(--gold3)}
  .dw-r .l2 .mx:hover{color:var(--gold)}
  .dw-r .qty .dwmode,.dw-r .qty .mx,.dw-r.k-collect .dwnote{display:none}   /* 넓은 폭의 짝 — 둘째 줄 꼬리가 대신한다 */
  /* 스테퍼·담기는 격자의 3·4열 — `.dw-q` 를 풀어 `.qty`·`.go` 가 직접 선다 (단위 열은 값 칸 안으로) */
  .dw-r .dw-q{display:contents}
  .dw-r .qty{grid-area:1/3/3/4}
  /* 수령 행은 스테퍼가 없다 — 수량 글자를 스테퍼 높이(34)에 맞춰 둔다 */
  .dw-r.k-collect .cq{width:auto;min-width:42px;height:34px}
  /* 스테퍼 — **h34** (시안 글머리 「스테퍼·담기 높이 34px — 마우스/터치 겸용 최소치」; 목업 그림의 h30 보다 글이 우선,
     대표 결정 2026-09-24) · r8 · −/+ 26px 12px · 값 칸 min-width 42 Mono 12px + 단위 9px 가 값 칸 **안** */
  .dw-q .stepper{grid-template-columns:26px minmax(42px,auto) 26px;width:auto;height:34px;border-radius:8px}
  .dw-q .stepper>button{font-size:var(--fs-sm)}
  .dw-q .vb{padding:0 3px;gap:1px}
  .dw-q .vb .v{width:3.5ch;text-align:right}
  @supports (field-sizing:content){.dw-q .vb .v{width:auto;field-sizing:content;text-align:center}}
  .dw-q .vb .u{display:inline;font-family:var(--font);font-size:9px;color:var(--sub2);padding-top:1px}
  /* 담기 = 알약 — **h34** · min-width 44 · padding 0 9 · r17(알약) · 11px 700 · 골드 채움 / 담으면 ✓ 외곽선 */
  .dw-r .go{grid-area:1/4/3/5;width:auto;height:34px;min-width:44px;padding:0 9px;border-radius:17px;
    font-size:var(--fs-xs);font-weight:700}

  /* ── 발 — 장바구니 · 닫고 보드로만 (시안) ────────────────────────── */
  .dw-foot{padding:10px;gap:9px;background:var(--panel);border-top:1px solid var(--line3);
    position:relative;z-index:5}
  .dw-foot .i,.dw-foot .info,.dw-foot .cnt{display:none}
  /* 「닫고 보드로」 h36 · padding 0 16 · r9 · 12px 700 / 장바구니 h36 · padding 0 12 0 10 · 11px · 두 줄 라벨(아랫줄 9px) */
  .dw-foot .pri{height:36px;padding:0 16px;border-radius:9px;font-size:var(--fs-sm);font-weight:700}
  .dw-cartbtn{height:36px;padding:0 12px 0 10px;font-size:var(--fs-xs)}
  .dw-cartbtn .lb i{font-size:9px}

  /* 장바구니는 **바 위로** 올라온다 — 바가 가려지면 다시 못 누른다 (시안) */
  .dw-scrim{bottom:57px}
  .dw-cart{bottom:63px;max-height:calc(100% - 100px)}
}