:root{
  --ink:#2b2013;          /* deep walnut ink */
  --paper:#f7f4ee;        /* workshop paper */
  --panel:#ffffff;
  --grain:#e8e1d4;        /* birch grain line */
  --wood:#c89b62;         /* rubberwood accent */
  --wood-deep:#8a5f2e;
  --ok:#2e6b4f;
  --muted:#8c8272;
  --danger:#b0472e;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* 오프캔버스 관리자 드로어(fixed, 화면 밖 우측)가 모바일에서 가로 스크롤을 만들지 않도록 클립 */
html{overflow-x:hidden}
body{
  font-family:'IBM Plex Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--paper);color:var(--ink);
  background-image:repeating-linear-gradient(90deg,transparent 0 119px,rgba(138,95,46,.045) 119px 120px);
}
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:2px solid var(--ink);background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.brand span{font-size:12px;color:var(--muted)}
.admin-toggle{
  font-size:13px;font-weight:600;border:1.5px solid var(--ink);background:transparent;
  padding:8px 14px;border-radius:99px;cursor:pointer;color:var(--ink);
}
.admin-toggle.on{background:var(--ink);color:var(--paper)}
main{max-width:1180px;margin:0 auto;padding:26px 22px 80px;display:grid;grid-template-columns:340px 1fr 300px;gap:20px}
.card{background:var(--panel);border:1.5px solid var(--ink);border-radius:var(--radius);padding:20px}
.card h2{font-size:14px;font-weight:700;letter-spacing:.02em;margin-bottom:4px}
.card .sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.field{margin-bottom:18px}
.field label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px}
.field label .val{font-variant-numeric:tabular-nums;color:var(--wood-deep)}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.seg button{flex:1;padding:9px 0;font-size:13px;font-weight:600;background:#fff;border:none;cursor:pointer;color:var(--ink)}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button.on{background:var(--ink);color:var(--paper)}
.slider-row{display:flex;gap:10px;align-items:center}
input[type=range]{flex:1;accent-color:var(--wood-deep)}
input[type=number]{
  width:74px;padding:7px 8px;border:1.5px solid var(--grain);border-radius:8px;
  font-family:inherit;font-size:13px;font-weight:600;text-align:right;background:#fff;
}
input[type=number]:focus,input[type=text]:focus,input[type=tel]:focus{outline:2px solid var(--wood);border-color:var(--wood)}
.hint{font-size:11px;color:var(--muted);margin-top:5px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{
  border:1.5px solid var(--grain);border-radius:10px;padding:10px;cursor:pointer;
  font-size:12.5px;font-weight:600;display:flex;flex-direction:column;gap:3px;background:#fff;
}
.opt .price{font-size:11px;color:var(--muted);font-weight:500}
.opt.on{border-color:var(--ink);background:#fbf7ef}
.opt.on .price{color:var(--wood-deep)}
.note-line{
  margin-top:14px;padding:10px 12px;border-radius:10px;background:#f0ece2;
  font-size:12px;line-height:1.5;color:#5c5343;
}
.note-line b{color:var(--ok)}

/* viewer */
.viewer-wrap{display:flex;flex-direction:column;gap:14px}
#viewer{position:relative;background:linear-gradient(180deg,#fdfbf7 0%,#f1ebdf 100%);
  border:1.5px solid var(--ink);border-radius:var(--radius);height:430px;overflow:hidden;cursor:grab}
#viewer:active{cursor:grabbing}
#viewer canvas{display:block;max-width:100%}

/* ── 프리뷰 탭 (tenant.artifacts 2개 이상일 때만: engine이 #viewer에 has-tabs를 붙인다) ── */
#viewer.has-tabs{cursor:default;padding:0;display:flex;flex-direction:column}
.art-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--ink);background:#fdfbf7;
  border-radius:var(--radius) var(--radius) 0 0;overflow-x:auto;flex:0 0 auto}
.art-tabs button{padding:11px 16px;font:600 13px inherit;background:none;border:none;cursor:pointer;
  color:var(--muted);white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1.5px}
.art-tabs button.on{color:var(--ink);border-bottom-color:var(--wood-deep)}
.art-panes{position:relative;flex:1 1 auto;min-height:0}
.art-pane{position:absolute;inset:0;display:flex;flex-direction:column}
.art-pane[hidden]{display:none}
.viewer-host{position:relative;width:100%;height:100%;cursor:grab}
.viewer-host:active{cursor:grabbing}

/* ── 전개도 탭 ── */
.dieline-pane{padding:12px 14px 10px;gap:8px}
.dl-canvas{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.dl-svg{width:100%;height:100%;max-height:100%}
.dl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto}
.dl-legend{display:flex;gap:12px;font-size:11.5px;color:var(--muted)}
.lg::before{content:'';display:inline-block;width:16px;height:0;vertical-align:3px;margin-right:5px}
.lg-cut::before{border-top:2px solid #1a1a1a}
.lg-crease::before{border-top:2px dashed #c0392b}
.lg-glue::before{height:9px;background:rgba(200,160,60,.5);vertical-align:-1px}
.dl-dl{padding:7px 13px;font:600 12px inherit;border:1.5px solid var(--ink);border-radius:9px;
  background:#fff;cursor:pointer;color:var(--ink);white-space:nowrap}
.dl-dl:hover{background:var(--ink);color:var(--paper)}

/* ── 전지 조판 탭 ── */
.impos-pane{padding:12px 14px 10px;gap:8px}
.im-canvas{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}
.im-summary{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.im-summary b{font-size:15px;letter-spacing:-.01em}
.im-tag{font-size:10.5px;font-weight:700;color:var(--paper);background:var(--wood-deep);
  border-radius:4px;padding:2px 6px}
.im-sheets{flex:1 1 auto;min-height:0;display:flex;gap:14px;justify-content:center;align-items:center}
.im-svg{max-width:100%;max-height:100%;flex:1 1 0;min-width:0}
.im-note{font-size:11.5px;color:var(--muted);flex:0 0 auto;line-height:1.55}
.im-warn{margin:auto;font-size:13px;color:var(--danger);font-weight:600;text-align:center;padding:20px}

.dim-label{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  font-size:11.5px;font-weight:700;color:var(--ink);
  background:rgba(247,244,238,.92);border:1px solid var(--ink);border-radius:6px;padding:2px 7px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.viewer-tag{position:absolute;left:14px;top:12px;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.viewer-hint{position:absolute;right:14px;bottom:10px;font-size:11px;color:var(--muted)}
.product-strip{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.product-strip b{color:var(--ink)}

/* 모바일 고정 합계 바 — 데스크톱에서는 숨김(우측 견적 패널로 대체) */
.mobile-bar{display:none}

/* ── 개당 단가 히어로 (meta.quantityField 선언 시에만 렌더) ── */
.unit-hero{border:1.5px solid var(--ink);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:#fbf7ef}
.unit-hero .uh-label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.unit-hero .uh-amt{font-size:34px;font-weight:700;color:var(--wood-deep);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.unit-hero .uh-sub{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.unit-hero .uh-moq{font-size:11.5px;color:var(--danger);margin-top:8px;font-weight:600}
/* 다이라인이 전지에 앉지 않는 경우(oversize) — 잘못된 저가를 보여주는 대신 안내로 대체한다.
   MOQ 안내와 톤을 맞추되(--danger), 히어로의 주 콘텐츠가 되도록 크게 둔다. */
.unit-hero.oversize{border-color:var(--danger)}
.unit-hero .uh-oversize{font-size:14px;color:var(--danger);font-weight:700;line-height:1.5}
.qnote{font-size:10px;font-weight:700;color:var(--paper);background:var(--wood-deep);
  border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px;white-space:nowrap}
.die-note{font-size:11.5px;color:var(--ok);font-weight:600;margin:12px 0 4px}

/* quote panel */
.quote .rows{border-top:1.5px solid var(--ink);margin-top:8px}
.qrow{display:flex;justify-content:space-between;padding:9px 0;font-size:13px;border-bottom:1px dashed var(--grain)}
.qrow span:last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;padding-left:10px}
.qrow span:first-child{min-width:0}
.qrow.total{border-bottom:none;padding-top:14px;align-items:baseline}
.qrow.total span:first-child{font-size:13px;font-weight:700}
/* oversize(다이라인이 전지에 앉지 않음) — 행/합계 대신 이 문구로 대체(§oversize 처리, 히어로와 동일 톤) */
.qrow-oversize{font-size:13px;color:var(--danger);font-weight:600;line-height:1.55;padding:9px 0}
.qrow.total span:last-child{font-size:26px;font-weight:700;color:var(--wood-deep);letter-spacing:-.02em}
.cta{
  width:100%;margin-top:14px;padding:14px;border:none;border-radius:11px;cursor:pointer;
  background:var(--ink);color:var(--paper);font-family:inherit;font-size:15px;font-weight:700;
}
.cta:hover{background:#3d2f1c}
.cta-sub{width:100%;margin-top:8px;padding:11px;border:1.5px solid var(--ink);border-radius:11px;cursor:pointer;
  background:transparent;color:var(--ink);font-family:inherit;font-size:13px;font-weight:600}
.small-print{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.5}

/* admin drawer — fixed 호스트가 뷰포트를 덮고 오프캔버스 드로어를 클립(모바일 가로 스크롤 방지) */
.drawer-host{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:40}
#adminDrawer{
  position:absolute;right:0;top:0;height:100%;width:330px;max-width:85vw;background:var(--ink);color:var(--paper);
  pointer-events:auto;opacity:0;visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;padding:24px;overflow-y:auto;
}
#adminDrawer.open{opacity:1;visibility:visible}
.drawer-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;
  border:1px solid #5c4a2e;background:#3d2f1c;color:var(--paper);border-radius:8px;
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.drawer-close:hover{background:#5c4a2e}
#adminDrawer h3{font-size:15px;margin-bottom:2px;padding-right:40px}
#adminDrawer .sub{font-size:12px;color:#b8ab95;margin-bottom:20px}
.admin-group{margin-bottom:20px}
.admin-group h4,.admin-group summary{font-size:12px;letter-spacing:.05em;color:var(--wood);margin-bottom:10px;text-transform:uppercase}
#adminDrawer .admin-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:8px;font-size:12px;font-weight:700;letter-spacing:.03em;
  color:var(--wood);margin-bottom:9px;padding:2px 0}
#adminDrawer .admin-group summary::-webkit-details-marker{display:none}
#adminDrawer .admin-group summary::after{content:'▾';font-size:10px;opacity:.7;transition:transform .15s}
#adminDrawer .admin-group[open] summary::after{transform:rotate(180deg)}
.ag-count{font-size:10px;font-weight:600;color:#b8ab95;background:rgba(255,255,255,.08);
  border-radius:4px;padding:1px 5px;margin-left:auto;margin-right:4px}
.admin-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}
.admin-row input{width:96px;background:#3d2f1c;border:1px solid #5c4a2e;color:var(--paper);
  border-radius:7px;padding:6px 8px;font-family:inherit;font-size:13px;font-weight:600;text-align:right}
.admin-note{font-size:11.5px;color:#b8ab95;line-height:1.6;border-top:1px solid #5c4a2e;padding-top:14px}

/* 발송 견적 현황 (Phase C · 관리자 드로어 안, 다크 배경) */
.admin-track{border-top:1px solid #5c4a2e;padding-top:14px;margin-top:16px}
.admin-track-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.admin-track-head h4{font-size:12px;letter-spacing:.05em;color:var(--wood);text-transform:uppercase;margin:0}
.admin-track-refresh{
  width:26px;height:26px;border:1px solid #5c4a2e;background:#3d2f1c;color:var(--paper);
  border-radius:7px;font-size:14px;line-height:1;cursor:pointer;
}
.admin-track-refresh:hover{background:#5c4a2e}
.track-hint{font-size:11.5px;color:#b8ab95;line-height:1.6}
.track-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;padding:8px 0;border-bottom:1px solid #3d2f1c}
.track-qid{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--paper)}
.track-when{font-size:11px;color:#b8ab95;text-align:right;white-space:nowrap}
.track-tags{grid-column:1 / -1;display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.track-tags .tag{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:99px;background:#3d2f1c;color:#b8ab95;border:1px solid #5c4a2e}
.track-tags .tag.ok{background:#234b39;color:#cde7d8;border-color:#2e6b4f}
.track-tags .tag.hot{background:#5a2f22;color:#f0cabd;border-color:#b0472e}

/* modal */
#modalBack{position:fixed;inset:0;background:rgba(43,32,19,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
#modalBack.open{display:flex}
.modal{background:var(--panel);border-radius:16px;max-width:400px;width:100%;padding:26px;border:2px solid var(--ink)}
.modal h3{font-size:17px;margin-bottom:4px}
.modal .sub{font-size:12.5px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.modal input{width:100%;padding:11px 12px;border:1.5px solid var(--grain);border-radius:10px;font-family:inherit;font-size:14px;margin-bottom:10px}
.modal .spec{background:#f7f4ee;border-radius:10px;padding:12px;font-size:12.5px;line-height:1.7;margin-bottom:14px}
.success{display:none;text-align:center}
.success .badge{width:54px;height:54px;border-radius:50%;background:var(--ok);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.success h3{margin-bottom:8px}
.success p{font-size:13px;color:var(--muted);line-height:1.7}
.success .qno{font-weight:700;color:var(--ink)}

/* ── 카페24 주문 전송 (features.cafe24Order) ── */
#cafe24Back{position:fixed;inset:0;background:rgba(43,32,19,.55);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .18s}
#cafe24Back.open{opacity:1;visibility:visible}
.cafe24-modal{max-width:420px;width:100%}
.c24-mark{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--paper);background:#0f5ad2;border-radius:5px;padding:3px 8px;margin-bottom:10px}
.c24-order{border:1.5px solid var(--ink);border-radius:10px;padding:12px 14px;margin:12px 0}
.c24-no{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:6px}
.c24-no b{font-variant-numeric:tabular-nums}
.c24-spec{font-size:12.5px;color:var(--muted);line-height:1.55}
.c24-body{font-size:13px;line-height:1.6}
/* 데모 각주는 죽이지 않는다 — 과장으로 읽히면 역효과다 */
.c24-demo{font-size:12px;font-weight:600;color:var(--danger);background:#fdf1ee;
  border-radius:8px;padding:9px 11px;margin:12px 0 4px;line-height:1.5}
.c24-badge{display:inline-block;font-size:10.5px;font-weight:700;color:var(--paper);
  background:#0f5ad2;border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:1px}

/* right column (견적 + 주문서 세로 스택) */
.right-col{display:flex;flex-direction:column;gap:20px}

/* 영업 배너 (차별점 카피) */
.sales-banner{
  max-width:1180px;margin:18px auto 0;padding:12px 22px;
  border:1.5px solid var(--ink);border-radius:12px;background:#fbf3e4;
  font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5;
  display:flex;align-items:center;gap:10px;
}
.sales-banner::before{content:"✳";color:var(--wood-deep);font-weight:700}

/* 스테퍼 (타공 수량) */
.qty-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty-row button{
  width:24px;height:24px;border:1.5px solid var(--ink);background:#fff;border-radius:6px;
  font-size:15px;font-weight:700;line-height:1;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.qty-row span{min-width:20px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.opt.stepper{cursor:default}

/* 주문서 (부재 목록) */
.order-list h2{margin-bottom:2px}
.order-rows{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.order-empty{font-size:12.5px;color:var(--muted);padding:10px 2px}
.order-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;
  padding:9px 10px;background:#faf7f0;border:1px solid var(--grain);border-radius:9px;
}
.order-spec{font-size:12px;line-height:1.4;color:#5c5343}
.order-amt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.order-del{
  width:22px;height:22px;border:none;background:transparent;color:var(--muted);
  font-size:16px;line-height:1;cursor:pointer;border-radius:5px;
}
.order-del:hover{background:#efe7d8;color:var(--danger)}
.order-foot{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:12px;border-top:1.5px solid var(--ink);
}
.order-foot span:first-child{font-size:13px;font-weight:700}
.order-foot span:last-child{font-size:20px;font-weight:700;color:var(--wood-deep);font-variant-numeric:tabular-nums}

/* compose(작성) 모드 — 우측 카드 CTA 영역 교체 (견적 링크 생성) */
.compose-field{margin-top:14px;margin-bottom:0}
.compose-memo{
  width:100%;padding:10px 12px;border:1.5px solid var(--grain);border-radius:10px;
  font-family:inherit;font-size:13px;background:#fff;
}
.compose-result{
  margin-top:16px;padding:14px;border:1.5px solid var(--ink);border-radius:12px;background:#fbf7ef;
}
.compose-result[hidden]{display:none}
.compose-result-label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}
.compose-url{
  width:100%;padding:10px 12px;border:1.5px solid var(--grain);border-radius:9px;background:#fff;
  font-family:inherit;font-size:12px;color:var(--ink);
}
.compose-actions{display:flex;gap:8px;margin-top:10px}
.compose-actions .cta,.compose-actions .cta-sub{margin-top:0;flex:1;text-align:center;text-decoration:none}
.compose-actions .compose-preview{display:flex;align-items:center;justify-content:center}
.compose-copy.copied{background:var(--ok)}
.compose-hint{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
/* 드로어 안 '견적 직접 작성' 진입 버튼 (다크 배경) */
.drawer-compose-nav{
  width:100%;margin-bottom:20px;padding:11px;border:1.5px solid var(--wood);border-radius:10px;
  background:transparent;color:var(--paper);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
.drawer-compose-nav:hover{background:var(--wood);color:var(--ink)}

/* 열람 모드 (견적서, 읽기 전용) — /{tenant}/q# */
.quote-badge{
  font-size:12px;font-weight:700;letter-spacing:.08em;
  border:1.5px solid var(--ink);border-radius:99px;padding:6px 14px;background:var(--ink);color:var(--paper);
}
main.view{grid-template-columns:1fr 360px}
.view-meta{
  border-top:1.5px solid var(--ink);border-bottom:1px dashed var(--grain);
  padding:12px 0;margin-bottom:14px;display:flex;flex-direction:column;gap:7px;
}
.view-meta-row{display:flex;justify-content:space-between;font-size:13px;gap:10px}
.view-meta-row span:first-child{color:var(--muted);font-weight:600;white-space:nowrap}
.view-meta-row span:last-child{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.view-meta-row .qno{color:var(--wood-deep);font-weight:700}
.view-expired{
  font-size:12.5px;font-weight:600;color:var(--danger);line-height:1.5;
  background:#f8ece8;border:1px solid var(--danger);border-radius:9px;padding:9px 11px;
}
.view-memo{
  font-size:13px;font-weight:600;line-height:1.5;
  background:#fbf3e4;border:1px solid var(--grain);border-radius:9px;padding:10px 12px;margin-bottom:14px;
}
.view-spec{font-size:12.5px;color:#5c5343;line-height:1.6;margin-bottom:6px}
.cta-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.jaro-credit{
  font-size:11px;color:var(--muted);text-align:center;
  margin-top:16px;padding-top:12px;border-top:1px dashed var(--grain);
}
.jaro-credit a{color:var(--wood-deep);font-weight:700;text-decoration:none}
.jaro-credit a:hover{text-decoration:underline}
.modal textarea{
  width:100%;padding:11px 12px;border:1.5px solid var(--grain);border-radius:10px;
  font-family:inherit;font-size:14px;margin-bottom:10px;resize:vertical;
}
.view-error{max-width:420px;margin:80px auto;text-align:center;padding:0 22px}
.view-error-badge{
  width:54px;height:54px;border-radius:50%;background:var(--danger);color:#fff;
  font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.view-error h3{font-size:18px;margin-bottom:8px}
.view-error p{font-size:13.5px;color:var(--muted);line-height:1.7}

/* ── 수량 구간 단가 막대 (features.qtyCurve) ── */
.qty-curve h2{margin-bottom:12px}
.qc-rows{display:flex;flex-direction:column;gap:5px}
.qc-row{display:grid;grid-template-columns:56px 1fr 78px;align-items:center;gap:10px;
  width:100%;padding:5px 7px;border:1.5px solid transparent;border-radius:8px;
  background:none;cursor:pointer;font:inherit;color:inherit;text-align:left}
.qc-row:hover{background:#faf6ef}
.qc-row.on{border-color:var(--ink);background:#fbf7ef}
.qc-qty{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.qc-row.on .qc-qty{color:var(--ink)}
.qc-bar{height:13px;background:var(--grain);border-radius:3px;overflow:hidden}
.qc-bar i{display:block;height:100%;background:var(--wood);border-radius:3px;
  transition:width .35s cubic-bezier(.22,1,.36,1)}
.qc-row.on .qc-bar i{background:var(--wood-deep)}
.qc-amt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.qc-note{font-size:11.5px;color:var(--muted);margin-top:11px;line-height:1.55}
@media(prefers-reduced-motion:reduce){.qc-bar i{transition:none}}
/* oversize(다이라인이 전지에 앉지 않음) — 히어로의 안내 톤(--danger)과 맞춘다. 수량과 무관한
   상태라 막대 대신 이 문구 하나로 대체한다(§task-7 oversize 처리). */
.qc-oversize{font-size:13px;color:var(--danger);font-weight:600;line-height:1.55}

@media(max-width:980px){
  main.view{grid-template-columns:1fr}
}
@media(max-width:980px){
  main{grid-template-columns:1fr;max-width:640px}
  /* 헤더는 흐름에 두어 스크롤로 사라지게 → 뷰어가 top:0에 안전하게 고정(겹침 방지) */
  header{position:static}
  /* 뷰어+합계를 맨 위로 올려 상단 고정, 옵션 목록만 그 아래로 스크롤 */
  .viewer-wrap{
    order:-1;position:sticky;top:0;z-index:5;
    background:var(--paper);padding-bottom:12px;
    box-shadow:0 8px 14px -10px rgba(43,32,19,.35);
  }
  .product-strip{display:none}       /* 고정 영역 슬림하게 */
  #viewer{height:260px}
  .mobile-bar{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:10px 14px;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--panel);
  }
  .mb-price{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .mb-label{font-size:11px;font-weight:600;color:var(--muted)}
  .mb-amt{font-size:19px;font-weight:700;color:var(--wood-deep);font-variant-numeric:tabular-nums}
  /* oversize(다이라인이 전지에 앉지 않음) — 숫자 대신 짧은 안내 문구, 모바일 고정 바가 이 화면의
     유일한 가격 표시일 수 있어 여기도 반드시 가려야 한다 */
  .mb-amt.oversize{font-size:12.5px;font-weight:600;color:var(--danger);font-variant-numeric:normal;white-space:normal}
  .mb-cta{
    flex:0 1 auto;padding:11px 14px;border:none;border-radius:10px;
    background:var(--ink);color:var(--paper);font-family:inherit;font-size:13px;font-weight:700;
    cursor:pointer;white-space:normal;line-height:1.25;
  }
  .sales-banner{max-width:640px}

  /* 프리뷰 탭: 세로 공간이 좁으므로 최소 높이를 보장하고 탭은 가로 스크롤 */
  #viewer.has-tabs{min-height:340px}
  .art-tabs{-webkit-overflow-scrolling:touch}
  .art-tabs button{padding:10px 13px;font-size:12.5px}
  .im-sheets{flex-direction:column;gap:10px}
  .dl-foot{flex-direction:column;align-items:stretch;gap:8px}
  .dl-dl{width:100%}
}
@media(max-width:480px){
  header{padding:12px 14px}
  .brand{flex-direction:column;gap:1px}
  .brand b{font-size:16px}
  .brand span{font-size:11px}
  .admin-toggle{white-space:nowrap;flex-shrink:0;padding:8px 12px;font-size:12px}
  main{padding:18px 14px 60px}
  .sales-banner{margin:14px auto 0;padding:11px 14px;font-size:12.5px}
  #viewer{height:220px}

  .unit-hero .uh-amt{font-size:29px}
  .qc-row{grid-template-columns:48px 1fr 70px;gap:7px}
  .qc-qty{font-size:11.5px}
  .qc-amt{font-size:12px}
  .cafe24-modal{padding:20px 18px}
}