/*
  NutriLabel — Direction C: 데이터 밀도 프로 도구 (라이브 앱)
  Reference: Stripe(정밀·신뢰) + Resend(monospace 수치) + Supabase(테이블 파워툴)
  direction-c.html의 토큰/레이아웃을 그대로 라이브 앱에 이식.

  DARK MODE 매핑(라이트 기준):
    --bg #F1F5F9→#0A0E17 · --surface #FFFFFF→#111827 · --ink #0F172A→#E5E9F0
    --muted #64748B→#94A3B8 · --line #E2E8F0→#1E293B · --indigo #4F46E5→#818CF8
    라벨 종이(.nfacts)는 다크에서도 흰 종이/검정 잉크 유지.
*/
:root{
  --bg:#F1F5F9; --surface:#FFFFFF; --panel:#F8FAFC; --ink:#0F172A; --muted:#64748B; --faint:#94A3B8;
  --line:#E2E8F0; --line-strong:#CBD5E1;
  --indigo:#4F46E5; --indigo-weak:#EEF0FE; --indigo-ink:#3730A3;
  --green:#059669; --green-weak:#E6F6F0; --amber:#B45309; --amber-weak:#FEF3E2; --red:#B42318; --red-weak:#FEF0EF;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Menlo","Consolas",monospace;
  /* 리퀴드 글래스(iOS26 느낌) — 크롬 레이어 전용 토큰.
     데이터 스프레드시트·라벨 미리보기·검증 리포트 본문에는 적용 금지(불투명 유지).
     DARK MODE: 다크 매핑 시 --glass-bg rgba(17,24,39,.62) · --glass-hi rgba(255,255,255,.08)
     · --glass-brd rgba(255,255,255,.10) 로 치환(현재 앱은 라이트 전용). */
  --glass-blur:saturate(180%) blur(20px);
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-strong:rgba(255,255,255,.82);
  --glass-brd:rgba(255,255,255,.55);
  --glass-hi:rgba(255,255,255,.65);
  --glass-shadow:0 8px 30px -12px rgba(15,23,42,.28);
  /* 스펙큘러 림("프로스티드"→"리퀴드"): 모든 글래스 표면 공통.
     상단 1px 밝은 하이라이트 림(inset) + 하단 미묘한 어두운 엣지 →
     단색 테두리 대신 "위 밝고 아래 어두운" 그라데이션 테두리 느낌.
     border-radius 를 존중하도록 border-image 대신 inset box-shadow 로 구현. */
  --glass-rim:inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(15,23,42,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
kbd{font-family:var(--mono); font-size:10.5px; background:var(--surface); border:1px solid var(--line-strong);
  border-bottom-width:2px; border-radius:5px; padding:1px 5px; color:var(--muted)}

/* top bar — 리퀴드 글래스(크롬) */
header.app{display:flex; align-items:center; gap:14px; height:48px; padding:0 16px;
  background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-brd); box-shadow:var(--glass-rim); position:sticky; top:0; z-index:40}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; letter-spacing:-.02em}
.brand .mark{width:20px;height:20px;border-radius:6px;background:var(--indigo);display:grid;place-items:center}
.tabs{display:flex; gap:2px; margin-left:8px}
.tab{padding:6px 12px; border-radius:7px 7px 0 0; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; border:1px solid transparent; border-bottom:0}
.tab.on{background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:0 -2px 0 var(--indigo) inset}
.tab:hover:not(.on){background:var(--panel); color:var(--ink)}
.concept{margin-left:12px; font-size:11.5px; color:var(--muted); border-left:1px solid var(--line); padding-left:12px}
.concept b{color:var(--indigo-ink)}
header.app .spacer{flex:1}
.btn{font:inherit; font-weight:700; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:7px 12px; min-height:36px; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.btn:hover{background:var(--panel)}
.btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff}
.btn.primary:hover{background:#4338CA}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

/* 3-pane grid (+ dock 리사이즈 핸들 열). 우측 dock 폭은 --dock-w 로 제어(JS 드래그·저장). */
.app-grid{display:grid; grid-template-columns:210px minmax(0,1fr) 6px var(--dock-w,340px); height:calc(100vh - 48px); min-height:640px}
/* 우측 패널 리사이즈 핸들 */
.dock-resizer{position:relative; cursor:col-resize; background:transparent; display:flex; align-items:center; justify-content:center; z-index:6; touch-action:none}
.dock-resizer:hover, .dock-resizer.dragging{background:var(--indigo-weak)}
.dock-resizer-grip{width:2px; height:38px; border-radius:2px; background:var(--line-strong)}
.dock-resizer:hover .dock-resizer-grip, .dock-resizer.dragging .dock-resizer-grip{background:var(--indigo)}
.dock-resizer:focus-visible{outline:2px solid var(--indigo); outline-offset:-2px}
.rail{background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-brd); padding:12px 10px; overflow:auto; box-shadow:var(--glass-rim)}
.rail .lbl{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:6px 8px}
.prod{display:flex; align-items:center; gap:9px; padding:8px; border-radius:8px; cursor:pointer; margin-bottom:2px; width:100%; border:0; background:transparent; text-align:left}
.prod:hover{background:var(--panel)}
.prod.on{background:var(--indigo-weak)}
.prod .sw{width:8px;height:8px;border-radius:3px;flex:none}
.prod .nm{font-weight:600; font-size:12.5px} .prod .st{font-size:11px; color:var(--faint)}
.prod.on .nm{color:var(--indigo-ink)}
.prod .spacer{flex:1}
.prod:disabled{opacity:.55; cursor:not-allowed}
.mini{font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px}
.mini.done{background:var(--green-weak); color:#065F46} .mini.wip{background:var(--amber-weak); color:var(--amber)}

/* center workbench */
.bench{overflow:auto; padding:16px 18px}
.bench-head{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.bench-head h2{font-size:16px; margin:0; letter-spacing:-.02em; font-weight:800}
.meta{display:flex; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); margin-left:auto}
.meta .cell{padding:6px 12px; border-left:1px solid var(--line)}
.meta .cell:first-child{border-left:0}
.meta .k{font-size:10.5px; color:var(--faint); font-weight:600} .meta .v{font-weight:700; font-size:13px}
.meta .v-inp{width:64px; border:0; background:transparent; font:inherit; font-weight:700; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); padding:0}
.meta .v-inp:focus-visible{outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px}

.toolbar{display:flex; align-items:center; gap:8px; margin-bottom:8px; position:relative}
.search-wrap{position:relative; flex:1; max-width:380px}
.search-wrap .ico{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint); display:flex}
.inp{width:100%; font:inherit; padding:7px 10px 7px 32px; min-height:36px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink)}
.inp:focus-visible{outline:2px solid var(--indigo); outline-offset:1px; border-color:var(--indigo)}
.khint{font-size:11px; color:var(--faint); display:flex; align-items:center; gap:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* dense spreadsheet */
.grid{border:1px solid var(--line); border-radius:9px; overflow:auto; background:var(--surface)}
/* sticky thead 글래스가 뷰포트(중앙 .bench 스크롤 컨테이너) 기준으로 동작하려면
   표를 감싼 스크롤 컨테이너가 vertical 오버플로를 만들면 안 된다(그러면 thead 가
   그 안에서만 sticky 되어 데이터와 함께 스크롤되어 사라진다). .grid 의 overflow:auto
   는 vertical 스크롤 컨테이너를 만들어 thead sticky 를 무력화하므로 시트 그리드만
   overflow:visible 로 되돌려 .bench 기준 sticky 를 살린다(수평 오버플로가 필요한
   좁은 폭에서는 .bench 가 대신 가로 스크롤한다). 통상 폭에서는 표가 그리드에 딱
   맞아 시각 변화가 없다. */
#sheet-grid{overflow:visible}
table.sheet{width:100%; border-collapse:collapse; font-size:12.5px; min-width:720px}
/* 배합 시트 헤더 행 — 리퀴드 글래스(크롬). 스크롤 시 데이터 행이 반투명 헤더
   밑으로 비쳐 지나간다. 가독성 위해 bg-strong 계열 + 스펙큘러 림. */
table.sheet th{background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); text-align:right; padding:7px 10px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:3; box-shadow:var(--glass-rim)}
table.sheet th.l{text-align:left}
table.sheet td{padding:0; border-bottom:1px solid var(--line); text-align:right}
table.sheet td.l{text-align:left}
table.sheet tr:last-child td{border-bottom:0}
table.sheet tbody tr:hover td{background:#FBFCFE}
.cellpad{padding:7px 10px}
.ing-nm{font-weight:600; display:flex; align-items:center; gap:7px}
.ing-sub{font-size:11px; color:var(--faint)}
.g-inp{width:100%; border:0; background:transparent; font:inherit; font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; padding:8px 10px; color:var(--ink)}
.g-inp:focus-visible{outline:2px solid var(--indigo); outline-offset:-2px; background:var(--indigo-weak)}
.cell-edit{background:#FCFCFF; box-shadow:inset 2px 0 0 var(--indigo)}
.row-del{border:0; background:transparent; color:var(--faint); cursor:pointer; padding:4px 6px; border-radius:5px; font-size:14px; line-height:1}
.row-del:hover{background:var(--red-weak); color:var(--red)}
.badge{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; white-space:nowrap}
.badge.ok{background:var(--green-weak); color:#065F46} .badge.mid{background:var(--indigo-weak); color:var(--indigo-ink)} .badge.low{background:var(--amber-weak); color:var(--amber)}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
tfoot td{background:var(--panel); font-weight:800; border-top:1px solid var(--line-strong)}
.muted-cell{color:var(--faint)}

/* 표 인라인 추가 행(Notion/Airtable 식): 데이터 행과 primary 계열 점선 보더로 구분.
   "여기가 원료 추가 지점"이 한눈에 보이도록 옅은 primary 틴트 + 진한(읽히는) 텍스트 +
   브랜드 인디고 "+" 아이콘. 다만 solid 버튼화는 피해 표의 일부라는 정체성은 유지.
   펼치면(.active) 같은 자리에 검색 위젯이 나타난다(활성 스타일은 아래 유지). */
.adder-row td{padding:0; border-top:1px dashed rgba(79,70,229,.32); text-align:left; background:rgba(79,70,229,.055)}
.adder-row.active td{background:#FCFCFF; border-top:1px dashed var(--line-strong)}
/* 데이터 행(.cellpad 7px 10px)보다 여유 있는 세로 패딩으로 터치 타깃 확대. */
.adder-btn{display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent; text-align:left;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--indigo-ink); cursor:pointer; padding:13px 12px}
.adder-btn[hidden]{display:none}
.adder-btn svg{color:var(--indigo); flex:none}
.adder-btn:hover{background:rgba(79,70,229,.12)}
.adder-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:-2px}
.adder-eg{color:var(--muted); font-weight:600}
.adder-row .toolbar{margin:0; padding:6px 8px; max-width:440px}
.adder-row .search-wrap{max-width:none}

/* autocomplete popover — body 레벨 fixed. 표 오버플로(.grid)에 잘리지 않도록
   JS(positionPop)가 검색 인풋의 실측 위치 아래에 left/top/width 를 인라인 지정. */
.pop{position:fixed; top:0; left:0; z-index:45; border:1px solid var(--glass-brd); border-radius:9px; overflow:hidden;
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),var(--glass-rim); width:min(560px,90vw)}
.pop[hidden]{display:none}
/* 팝오버 하단 직접 입력 진입점(항상 노출, 검색 0건 포함) */
.pop-manual{display:block; width:100%; text-align:left; border:0; border-top:1px solid var(--line); background:var(--panel);
  color:var(--indigo-ink); font:inherit; font-weight:700; font-size:12px; padding:10px 11px; cursor:pointer}
.pop-manual:hover{background:var(--indigo-weak)}
.pop-manual:focus-visible{outline:2px solid var(--indigo); outline-offset:-2px}
.pop .ph{padding:6px 10px; font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--faint); background:var(--panel); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:8px}
.opt{display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; border-bottom:1px solid var(--line); width:100%; border-left:0;border-right:0;border-top:0; background:var(--surface); text-align:left; font:inherit}
.opt:last-of-type{border-bottom:0} .opt:hover, .opt.sel{background:var(--indigo-weak)}
.opt .nm{font-weight:600} .opt .code{font-family:var(--mono); font-size:11px; color:var(--faint)} .opt .spacer{flex:1}
.opt .opt-main{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.opt .opt-sub{font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.opt .opt-sub .mk{color:var(--muted); font-weight:600; font-family:inherit}
.pop .foot{padding:8px 10px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; justify-content:space-between; background:var(--panel)}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--indigo-weak);border-top-color:var(--indigo);display:inline-block;vertical-align:-2px}
@media (prefers-reduced-motion:no-preference){.spin{animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}}
.llm-status{font-size:11.5px; color:var(--indigo-ink); font-weight:600; display:flex; align-items:center; gap:7px}
.empty{padding:12px 10px; font-size:12px; color:var(--muted)}

/* validation strip */
.vstrip{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:8px; font-size:12px; font-weight:600; border:1px solid transparent}
.chip.warn{background:var(--amber-weak); color:var(--amber); border-color:#F6D9AE}
.chip.err{background:var(--red-weak); color:var(--red); border-color:#F5C4BF}
.chip.info{background:var(--indigo-weak); color:var(--indigo-ink); border-color:#D6D9FB}
.chip svg{width:15px;height:15px;flex:none}

/* RIGHT docked label */
.dock{background:var(--surface); border-left:1px solid var(--line); padding:14px; overflow:auto}
/* 독 크롬 — 캡션/컨트롤 띠는 글래스. 스티커(#sticker/#sticker-inner)와 내부는
   인쇄물 미리보기라 절대 불투명 유지(아래 .sticker 규칙 그대로). */
.dock-cap{display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:7px 10px; border-radius:9px;
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); box-shadow:var(--glass-rim)}
.dock-cap .t{font-size:12px; font-weight:700}
.dock-cap .spacer{flex:1}
.zoom-open-btn{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--muted); cursor:pointer}
.zoom-open-btn:hover{background:var(--panel); color:var(--indigo-ink); border-color:var(--indigo)}
.zoom-open-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.dock .sticker{cursor:zoom-in}
.live{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:var(--indigo)}
.live .pulse{width:6px;height:6px;border-radius:50%;background:var(--indigo)}
@media (prefers-reduced-motion:no-preference){.live .pulse{animation:pl 1.8s ease-in-out infinite}@keyframes pl{0%,100%{opacity:1}50%{opacity:.3}}}
/* legal vertical format */
.nfacts{border:1.5px solid #111; padding:9px 11px; color:#111; background:#fff}
.nfacts .ttl{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1}
.nfacts .serv{display:flex;justify-content:space-between;align-items:flex-end;font-size:10.5px;margin-top:4px}
.nfacts .serv .amt{font-weight:700}
.rule-lg{border-top:8px solid #111;margin:5px 0}.rule-md{border-top:4px solid #111}
.kcal-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0}
.kcal-row .k{font-size:13px;font-weight:800}.kcal-row .v{font-size:19px;font-weight:800;font-family:var(--mono)}
.dvhdr{text-align:right;font-size:9px;font-weight:700;padding:3px 0 2px}
.nrow{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:11.5px;border-top:1px solid #111}
.nrow .n{font-weight:700}.nrow .n .u{font-weight:400;font-family:var(--mono)}.nrow .p{font-weight:700;font-family:var(--mono)}
.nrow.ind .n{font-weight:400;padding-left:13px}.nrow.ind{border-top:1px solid #B9B9B9}
.nrow.flag .p{color:#B42318}
.nfacts .foot{font-size:8px;line-height:1.35;color:#333;margin-top:5px;padding-top:5px;border-top:4px solid #111}
.blk{border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-top:10px; background:var(--panel)}
.blk .h{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--faint); margin-bottom:3px}
.blk p{margin:0; font-size:12px; white-space:pre-line}
.aller b{color:var(--red)}
.dock .btn{width:100%; justify-content:center; margin-top:12px}

/* -------------------------------------------------------------------
   라벨 크기 프리셋 + 실측(pt/mm) 렌더 + 규정 한도 내 자동 압축
   시행규칙 [별표3] 제5호(글씨 10pt 이상)·제6호(장평 90%↑, 자간 -5%↑;
   정보표시면적 100cm² 미만이면 장평 50%↑) / 고시 별지1(영양성분 10pt·bold).
   ------------------------------------------------------------------- */
.label-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; padding:8px 10px; border-radius:9px;
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); box-shadow:var(--glass-rim)}
.label-tools .lt-lbl{font-size:10.5px; font-weight:700; color:var(--muted)}
.lt-sel{font:inherit; font-size:12px; padding:5px 8px; min-height:32px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink)}
.lt-sel:focus-visible{outline:2px solid var(--indigo); outline-offset:1px}
.lt-custom{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted)}
.lt-custom[hidden]{display:none}
.lt-dim{width:52px; font:inherit; font-size:11.5px; text-align:right; padding:4px 6px; min-height:30px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink)}
.lt-dim:focus-visible{outline:2px solid var(--indigo); outline-offset:1px}

/* fit 판정 바 — 글래스 크롬. 시맨틱 색은 유지하되 반투명 틴트 + blur + 스펙큘러 림.
   틴트 알파를 높게(≥.7) 두어 흰 독 위 텍스트 가독성을 지킨다. 미지원 폴백은 아래
   @supports 블록에서 불투명 weak 색으로 되돌린다. */
.fit-verdict{font-size:11px; font-weight:700; line-height:1.4; border-radius:8px; padding:7px 10px; margin-bottom:10px; border:1px solid transparent;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-rim)}
.fit-verdict.ok{background:rgba(230,246,240,.72); color:#065F46; border-color:#B6E6D2}
.fit-verdict.compress{background:rgba(238,240,254,.72); color:var(--indigo-ink); border-color:#D6D9FB}
.fit-verdict.fail{background:rgba(254,240,239,.72); color:var(--red); border-color:#F5C4BF}
.fit-verdict .fv-sub{display:block; font-weight:600; opacity:.85; margin-top:2px}
.fit-verdict[hidden]{display:none}

/* 실측 스티커 프레임: width/height는 JS가 mm 단위로 인라인 지정.
   flex 컨테이너의 align-items:stretch가 스티커 높이를 콘텐츠에 맞춰 늘려
   clientHeight 측정을 흔드는 것을 막기 위해 inline-block + text-align 로 중앙정렬. */
.print-area{display:block; text-align:center}
/* 미리보기 scale-to-fit 래퍼: 실측 스티커가 도킹 패널 폭을 넘으면 JS가 sticker에
   transform:scale()을 적용하고 이 래퍼 높이를 스케일된 높이로 보정해 넘침/빈공간을
   방지한다. 장평·자간 압축(fitLabel) 측정은 반드시 scale 제거 상태(실측)에서 수행. */
.sticker-fit{display:block; text-align:left; overflow:hidden}
.sticker-fit .sticker{transform-origin:top left}
.preview-scale-note{font-size:10.5px; color:var(--faint); margin-top:7px; text-align:center}
.preview-scale-note[hidden]{display:none}
.sticker{
  display:inline-block; vertical-align:top; text-align:left;
  width:80mm; height:60mm; overflow:hidden;
  background:#fff; color:#111; border:1px solid #B9B9B9;
  box-shadow:0 6px 20px -12px rgba(15,23,42,.4);
  padding:2mm; box-sizing:border-box;
}
/* 콘텐츠 래퍼: 좁은 라벨에서 세로 넘침 시 JS(fitLabel)가 균등 축소(transform:scale)해
   잘림 없이 담는다. 미리보기 scale-to-fit(#sticker)·장평 scaleX(.cxin/.n)와 서로 다른
   요소라 섞이지 않는다. 인쇄 시에도 이 축소는 유지(라벨에 실제로 담기 위해). */
.sticker-inner{transform-origin:top left; width:100%}
/* 실측 스티커 안에서는 규정 최소 pt로 강제(px 프리뷰 값을 덮어씀) */
.sticker .nfacts{border:1pt solid #111; padding:1.4mm 1.8mm; background:#fff}
.sticker .nfacts .ttl{font-size:12pt; line-height:1.05}
.sticker .nfacts .serv{font-size:7.5pt}
.sticker .rule-lg{border-top-width:2.4mm}
.sticker .kcal-row .k{font-size:10pt}        /* 열량 명칭 ≥10pt */
.sticker .kcal-row .v{font-size:12pt}         /* 열량 값: 크고 굵게 */
.sticker .dvhdr{font-size:6.5pt}
.sticker .kcal-row{padding:0.6mm 0}
.sticker .nrow{font-size:10pt; overflow:hidden; padding:0.4mm 0}   /* 영양성분 명칭·함량·% ≥10pt(실측 밀도) */
.sticker .nrow.ind .n{padding-left:2mm}
.sticker .nfacts .foot{font-size:6pt}         /* 각주(비규제) */
.sticker .blk{border:0.4pt solid #C8C8C8; border-radius:3px; padding:1.2mm 1.6mm; margin-top:1.4mm; background:#fff; overflow:hidden}
.sticker .blk .h{font-size:6.5pt; color:#666; margin-bottom:0.6mm}
.sticker .blk p{font-size:10pt; line-height:1.3; color:#111; overflow:hidden}   /* 원재료명 등 표시사항 ≥10pt */
.sticker .aller b{color:#B42318}
/* U10: 원산지 접미 굵게(표시요령 부속·시행규칙 별표2 10pt 굵게) */
.sticker #ing-statement b{font-weight:700}
/* U10: 분리배출 도안(SVG)·일괄표시. 도안은 압축(장평/자간) 대상이 아니며,
   SVG 자체가 mm 단위 크기를 지녀 최소 8mm(고시 제5조제2호)를 보장한다. */
.sticker .recy-syms{display:flex; flex-wrap:wrap; gap:1.5mm; align-items:flex-start; margin-bottom:0.6mm}
.sticker .recy-sym{display:inline-block; transform-origin:top left; overflow:visible}
.sticker .recy-sym svg{display:block}
.sticker .recy-batch{font-size:8pt; color:#333}
.sticker .pinfo{font-size:9pt; gap:1px 2mm}
.sticker .pinfo dt{color:#555}
.sticker .pinfo dd{overflow:hidden}
.sticker .pinfo dd.miss{color:#B45309}
/* 자동 압축: 장평은 scaleX, 자간은 letter-spacing 으로 구현.
   문단형은 내부 래퍼(.cxin)에 폭·scaleX를 주고 바깥은 overflow:hidden 으로
   고정하여 flex min-content 팽창(레이아웃 부풀림)을 차단한다. */
.sticker .cxin{display:inline-block; transform-origin:left top; white-space:normal}
.sticker .nrow .n.cx{transform-origin:left center; display:inline-block; white-space:nowrap; min-width:0}

/* A. 스티커 표시란 호버 복사 버튼(원재료명·알레르기). position:absolute 라
   레이아웃(fit 측정 scrollHeight)에 비침범, 인쇄·확대보기에선 숨김. */
.sticker .blk{position:relative}
.sticker-copy{position:absolute; top:1mm; right:1mm; z-index:2; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; padding:0; border-radius:5px; cursor:pointer; opacity:0; transition:opacity .12s ease;
  border:1px solid var(--glass-brd); background:var(--glass-bg-strong); color:var(--muted);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-rim)}
.sticker-copy svg{width:11px; height:11px; display:block}
.sticker .blk:hover .sticker-copy, .sticker-copy:focus-visible{opacity:1}
.sticker-copy.copied{color:var(--green); border-color:var(--green); opacity:1}

/* 라벨 위 citation 각주 마커: 스티커 판정 지점(원재료명·알레르기·영양·GMO·분리배출)
   좌상단에 붙는 미리보기 전용 ⓘ. sticker-copy 와 동일한 오버레이 패턴(position:absolute)
   이라 fit 측정(scrollHeight)에 비침범하고, @media print·확대보기 클론에선 숨긴다.
   sticker-copy 는 우상단(right:1mm)이라 좌상단(left:1mm)으로 두어 겹치지 않는다. */
.sticker .nfacts{position:relative}
.cite-mark{position:absolute; top:1mm; left:1mm; z-index:2; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; padding:0; border-radius:50%; cursor:pointer; opacity:.55; transition:opacity .12s ease;
  border:1px solid var(--glass-brd); background:var(--glass-bg-strong); color:var(--indigo);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-rim)}
.cite-mark svg{width:11px; height:11px; display:block}
.sticker .blk:hover .cite-mark, .sticker .nfacts:hover .cite-mark, .cite-mark:hover, .cite-mark:focus-visible, .cite-mark.on{opacity:1}
.cite-mark.on{color:#fff; background:var(--indigo); border-color:var(--indigo)}

/* citation 팝오버(body 포탈, position:fixed) — #search-pop 과 같은 글래스 크롬. */
.cite-pop{position:fixed; top:0; left:0; z-index:46; border:1px solid var(--glass-brd); border-radius:10px; overflow:hidden;
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),var(--glass-rim); display:flex; flex-direction:column}
.cite-pop[hidden]{display:none}
.cite-pop-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--line); background:rgba(248,250,252,.55)}
.cite-pop-ttl{font-size:11.5px; font-weight:700; color:var(--ink)}
.cite-pop-x{border:0; background:transparent; color:var(--muted); font-size:16px; line-height:1; cursor:pointer; padding:0 2px}
.cite-pop-x:hover{color:var(--ink)}
.cite-pop-body{padding:10px 12px; overflow:auto}
.cite-sec{margin-bottom:10px}
.cite-sec:last-child{margin-bottom:0}
.cite-sec-h{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--faint); margin-bottom:4px}
.cite-line{font-size:12px; line-height:1.45; color:var(--ink); margin:2px 0}
.cite-ref{font-size:11px; line-height:1.4; color:var(--indigo-ink); font-weight:600; margin-top:3px}
.cite-empty{font-size:12px; color:var(--muted)}

/* B. 면 구성 툴바(글래스 정합) — 면 탭·추가/삭제·섹션 배치 드롭다운 */
.face-tools{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.face-tools:empty{display:none}
.face-tabrow{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.face-tab{display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:8px; font-size:11px; font-weight:700; cursor:pointer;
  color:var(--muted); border:1px solid var(--glass-brd); background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-rim)}
.face-tab.on{color:var(--indigo-ink); border-color:#D6D9FB; background:var(--indigo-weak)}
.face-tab .face-del{display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:4px;
  border:0; background:transparent; color:inherit; font-size:13px; line-height:1; cursor:pointer; opacity:.7}
.face-tab .face-del:hover{opacity:1; color:var(--red)}
.face-add{padding:5px 9px; border-radius:8px; font-size:11px; font-weight:700; cursor:pointer; color:var(--indigo-ink);
  border:1px dashed #C7CBF7; background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}
.face-add[disabled]{opacity:.45; cursor:not-allowed}
.face-assign{width:100%; display:flex; flex-direction:column; gap:4px; margin-top:4px; padding:8px 10px; border-radius:9px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-brd); box-shadow:var(--glass-rim);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}
.face-assign-h{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:2px}
.face-assign-row{display:flex; align-items:center; gap:8px; font-size:11.5px}
.face-assign-row .fa-name{flex:1; color:var(--ink)}
.face-assign-row .fa-empty{color:var(--faint); font-size:10.5px}
.face-assign-row select{font-size:11px; padding:3px 6px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink)}
.face-split-btn{margin-top:6px; padding:5px 10px; border-radius:7px; font-size:11px; font-weight:700; cursor:pointer;
  color:var(--indigo-ink); border:1px solid #D6D9FB; background:var(--indigo-weak)}
.face-legal-note{font-size:10.5px; line-height:1.5; color:var(--muted); margin:8px 2px 0; padding:6px 9px;
  border-left:2px solid var(--amber); background:var(--amber-weak); border-radius:5px}

/* 선택되지 않은 면의 섹션은 미리보기에서 숨긴다(display:none → fit 측정 제외). */
.face-hidden{display:none !important}

/* 여러 면 인쇄 호스트: 평소·1면 인쇄엔 숨김. body.printing-faces 에서만 인쇄. */
#print-faces{display:none}
/* 확대보기·인쇄 클론에는 복사 버튼 노출 안 함 */
.zoom-canvas .sticker-copy{display:none}
/* 확대보기 클론에는 citation 마커도 숨긴다(클론은 리스너 미복제라 어차피 무해). */
.zoom-canvas .cite-mark{display:none}

/* save status indicator */
.savestat{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--muted)}
.savestat .sdot{width:7px; height:7px; border-radius:50%; background:var(--green); flex:none}
.savestat.saving{color:var(--amber)} .savestat.saving .sdot{background:var(--amber)}
.savestat.saving .sdot{animation:pl 1s ease-in-out infinite}
.savestat.error{color:var(--red)} .savestat.error .sdot{background:var(--red)}

/* product rail (dynamic) */
.prod{position:relative}
.prod .kebab{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--faint); cursor:pointer; padding:2px 5px; border-radius:5px; line-height:1; font-size:15px; opacity:0}
.prod:hover .kebab, .prod.on .kebab{opacity:1}
.prod .kebab:hover{background:var(--surface); color:var(--ink)}
.prod.new{border:1px dashed var(--line-strong); margin-top:6px}
.prod.new .nm{color:var(--muted)}
.prod .cnt{font-family:var(--mono); font-variant-numeric:tabular-nums}
.prod-confirm{display:flex; align-items:center; gap:6px; padding:8px; margin-bottom:2px; border-radius:8px; background:var(--red-weak); font-size:11.5px; color:var(--red); font-weight:600}
.prod-confirm .spacer{flex:1}
.prod-confirm button{font:inherit; font-weight:700; font-size:11px; border-radius:6px; padding:4px 9px; cursor:pointer; border:1px solid transparent}
.prod-confirm .del{background:var(--red); color:#fff; border-color:var(--red)}
.prod-confirm .cancel{background:var(--surface); color:var(--muted); border-color:var(--line-strong)}

/* allergen tags on rows */
.rowallers{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:4px}
.atag{display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; background:var(--red-weak); color:var(--red); white-space:nowrap}
.atag.none{background:var(--panel); color:var(--faint); font-weight:600}
.atag-edit{border:1px dashed var(--line-strong); background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px}
.atag-edit:hover{border-color:var(--indigo); color:var(--indigo-ink)}

/* ingredient attribute chips (origin / additive purpose / GMO) — U8 */
.rowattrs{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:4px}
.attrchip{font:inherit; font-size:10px; font-weight:700; padding:1px 7px; border-radius:5px; border:1px solid transparent; cursor:pointer; white-space:nowrap}
.attrchip.set{background:var(--indigo-weak); color:var(--indigo-ink)}
.attrchip.todo{background:var(--amber-weak); color:var(--amber); border-color:#F6D9AE}
.attrchip:hover{border-color:var(--indigo)}
.attrchip-edit{border:1px dashed var(--line-strong); background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px}
.attrchip-edit:hover{border-color:var(--indigo); color:var(--indigo-ink)}

/* ingredient attribute modal — U8 */
.attr-modal .sec-lbl{margin-top:16px}
.attr-modal .sec-lbl:first-child{margin-top:0}
.attr-note{margin:4px 0 8px; font-size:11.5px; color:var(--muted); line-height:1.4}
.attr-mode-inputs:empty{display:none}
.attr-toggle{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink); margin:6px 0 10px; cursor:pointer}
.attr-toggle input{width:16px; height:16px; flex:none}
.attr-mix-row{display:flex; gap:8px; margin-bottom:8px}
.attr-mix-row input{font:inherit; padding:7px 9px; min-height:34px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink)}
.attr-mix-name,.attr-freq-country{flex:1 1 auto; min-width:0}
.attr-mix-pct{width:76px; flex:none}
.attr-radios{display:flex; flex-direction:column; gap:6px; margin-bottom:4px}
.attr-radio{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink); cursor:pointer}
.attr-radio input{width:16px; height:16px; flex:none}
.attr-sub-row{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.attr-sub-name{font-size:11.5px; font-weight:700; color:var(--muted); min-width:72px; flex:none}
.attr-sub-row select,.attr-sub-row input{font:inherit; padding:6px 8px; min-height:32px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink)}
.attr-sub-country{flex:1 1 auto; min-width:0}
.attr-complex{margin:4px 0 8px}

/* meta panel */
.mpanel{border:1px solid var(--line); border-radius:9px; background:var(--surface); margin-top:14px; overflow:hidden}
.mpanel-head{display:flex; align-items:center; gap:8px; width:100%; border:0; background:var(--panel); padding:9px 12px; cursor:pointer; font:inherit; font-weight:700; font-size:12.5px; color:var(--ink); text-align:left}
.mpanel-head .chev{transition:transform .15s ease; color:var(--muted); flex:none}
.mpanel-head[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.mpanel-hint{margin-left:auto; font-size:11px; font-weight:600; color:var(--amber)}
.mpanel-body{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; padding:12px}
.mpanel-body[hidden]{display:none}
.mfield{display:flex; flex-direction:column; gap:3px}
.mfield label{font-size:10.5px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:6px}
.mfield input{font:inherit; padding:6px 9px; min-height:32px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink)}
.mfield input:focus-visible{outline:2px solid var(--indigo); outline-offset:1px; border-color:var(--indigo)}
.auto-btn{border:1px solid var(--line-strong); background:var(--surface); color:var(--indigo-ink); font:inherit; font-size:9.5px; font-weight:700; padding:0 5px; border-radius:4px; cursor:pointer; line-height:1.5}
.auto-btn:hover{background:var(--indigo-weak)}

/* U9: 제품 단위 신규 표시사항(소비기한·포장재·혼입 알레르기·소비자 안내·GMO) */
.mfield-full{grid-column:1/-1}
.mfield-full[hidden]{display:none}
#meta-extras{display:flex; flex-direction:column; gap:14px}
.meta-sec{display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px solid var(--line)}
.meta-sec[hidden]{display:none}
.meta-obj{display:flex; flex-direction:column; gap:8px}
.meta-obj .wz-chips{margin-bottom:0}
.meta-obj .wz-chip{font-size:12px; padding:6px 11px; min-height:34px}
.meta-obj .mrow{margin-bottom:0}
.pkg-part{display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--panel)}
.pkg-part .attr-mix-row{margin-bottom:0}
.pkg-part select{font:inherit; padding:7px 9px; min-height:34px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink); flex:1}
.pkg-adv summary{font-size:11.5px; font-weight:600; color:var(--muted); cursor:pointer}
.pkg-adv[open] summary{margin-bottom:8px}
.pkg-add, .pkg-remove, .cc-none{align-self:flex-start; font-size:12px; padding:6px 12px; min-height:34px}
.pkg-remove{color:var(--red)}

/* product info in label dock */
.pinfo{margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:11px}
.pinfo dt{color:var(--faint); font-weight:600} .pinfo dd{margin:0; color:var(--ink)}
.pinfo dd.miss{color:var(--amber); font-style:italic}

/* modal (직접 입력 / 알레르기 태그) */
.modal-host{position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.32);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow:auto}
.modal-host[hidden]{display:none}
.modal{background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius:14px; box-shadow:var(--glass-shadow),var(--glass-rim); width:min(560px,100%); overflow:hidden}
.modal-cap{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel)}
.modal-cap .t{font-weight:800; font-size:13.5px}
.modal-cap .x{margin-left:auto; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:2px 6px; border-radius:6px}
.modal-cap .x:hover{background:var(--surface); color:var(--ink)}
.modal-body{padding:14px 16px; max-height:66vh; overflow:auto}
.modal-foot{display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--line); background:var(--panel)}
.mrow{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.mrow label{font-size:11px; font-weight:700; color:var(--muted)}
.mrow input, .mrow select{font:inherit; padding:7px 9px; min-height:34px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink)}
.mrow input:focus-visible, .mrow select:focus-visible{outline:2px solid var(--indigo); outline-offset:1px; border-color:var(--indigo)}
.ngrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 12px}
.ngrid .nfield{display:flex; flex-direction:column; gap:3px}
.ngrid label{font-size:10px; font-weight:700; color:var(--muted)}
.ngrid input{font:inherit; font-family:var(--mono); text-align:right; padding:6px 8px; min-height:32px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink)}
.ngrid input:focus-visible{outline:2px solid var(--indigo); outline-offset:-1px; background:var(--indigo-weak)}
.sec-lbl{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); margin:4px 0 8px}
.chipset{display:flex; flex-wrap:wrap; gap:6px}
.chiptog{border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); font:inherit; font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; cursor:pointer}
.chiptog[aria-pressed="true"]{background:var(--red-weak); border-color:#F5C4BF; color:var(--red)}
.formerr{font-size:11.5px; color:var(--red); font-weight:600; margin:0 0 8px}
.formerr[hidden]{display:none}

/* 배합량 입력 단위(g) 접미 */
.g-wrap{display:flex; align-items:center; padding-right:8px; box-shadow:inset 2px 0 0 var(--indigo)}
.cell-edit{box-shadow:none}
.g-wrap .g-inp{flex:1; padding-right:3px; box-shadow:none}
.g-wrap .g-inp:focus-visible{outline:2px solid var(--indigo); outline-offset:-2px; background:var(--indigo-weak)}
.unit-sfx{flex:none; color:var(--faint); font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11.5px; padding-left:1px}

/* 탭 뷰(원재료명 / 검증 리포트) */
.tab{font-family:inherit}
#view-main[hidden]{display:none}
.tabview{background:var(--bg); min-height:calc(100vh - 48px)}
.tabview[hidden]{display:none}
.tabview-inner{max-width:900px; margin:0 auto; padding:22px 20px 48px}
.tv-title{font-size:18px; letter-spacing:-.02em; margin:0 0 4px}
.tv-lead{font-size:12.5px; color:var(--muted); margin:0 0 18px}
.tv-empty{padding:14px; font-size:12.5px; color:var(--muted); background:var(--surface); border:1px dashed var(--line-strong); border-radius:9px}
.tv-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; margin-bottom:16px; overflow:hidden}
.tv-card-head{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line)}
.tv-card-title{font-size:12.5px; font-weight:700; margin:0} .tv-card-head .spacer{flex:1}
.tv-card-body{padding:14px}
.copy-btn{padding:5px 10px; min-height:30px; font-size:11.5px}
.tv-statement{margin:0; font-size:13px; line-height:1.6; color:var(--ink); white-space:pre-line}
.tv-statement.aller b{color:var(--red)}
.tv-note{font-size:11px; color:var(--muted); margin:8px 0 0}
.tv-table{width:100%; border-collapse:collapse; font-size:12.5px}
.tv-table th{text-align:right; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:6px 10px; border-bottom:1px solid var(--line)}
.tv-table th.l{text-align:left}
.tv-table td{padding:7px 10px; border-bottom:1px solid var(--line); text-align:right}
.tv-table td.l{text-align:left; font-weight:600}
.tv-table tr:last-child td{border-bottom:0}
.tv-tag{display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--amber-weak); color:var(--amber); white-space:nowrap}
.tv-complex{padding:10px 0; border-bottom:1px solid var(--line)}
.tv-complex:last-child{border-bottom:0}
.tv-complex-head{display:flex; align-items:center; gap:8px; font-size:13px}
/* 검증 리포트 */
.tv-tolbox{background:var(--indigo-weak); border:1px solid #D6D9FB; border-radius:10px; padding:12px 14px; margin-bottom:18px}
.tv-tolbox-h{font-size:11.5px; font-weight:800; color:var(--indigo-ink); margin-bottom:6px}
.tv-tollist{margin:0; padding-left:18px; font-size:12px; color:var(--indigo-ink); line-height:1.6}
.tv-repgroup{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:14px}
.tv-repgroup.err{border-color:#F5C4BF} .tv-repgroup.warn{border-color:#F6D9AE}
.tv-repgroup-head{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:10px}
.tv-repbadge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:800}
.tv-repbadge.err{background:var(--red-weak); color:var(--red)} .tv-repbadge.warn{background:var(--amber-weak); color:var(--amber)} .tv-repbadge.info{background:var(--indigo-weak); color:var(--indigo-ink)}
.tv-repitem{padding:8px 0; border-top:1px solid var(--line)}
.tv-repitem:first-of-type{border-top:0}
.tv-repbasis{font-size:11px; color:var(--muted); margin-top:5px; padding-left:2px}

/* 데스크톱(>1080px): 레일은 상시 좌측 컬럼이므로 햄버거·닫기·백드롭 숨김.
   ≤1080px 미디어쿼리가 소스 뒤에 와서 이 규칙을 덮어쓴다(동일 특이도, 후순위 승). */
.nav-toggle, .nav-close, .nav-backdrop{display:none}

@media (max-width:1080px){
  /* 좁은 화면: 단일 열로 쌓고 리사이즈 핸들 숨김(--dock-w 무시). */
  .app-grid{grid-template-columns:1fr; height:auto}
  .concept{display:none}   /* 헤더 목적 태그라인은 폭 부족 → 숨김(푸터가 목적 담당) */
  .dock{border-left:0; border-top:1px solid var(--line)}
  .dock-resizer{display:none}
  .mpanel-body{grid-template-columns:1fr}

  /* 제품 목록: 좌측 세로 레일 → 햄버거로 여는 오프캔버스 드로어(ChatGPT 세션
     목록식). 세로 리스트라 제품이 30개든 스크롤로 확장된다. 평소엔 화면 밖
     (translateX(-100%)), .open 이면 슬라이드 인. */
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:none; border:1px solid var(--line-strong);
    border-radius:8px; background:var(--surface); color:var(--muted); cursor:pointer; padding:0}
  .nav-toggle:hover{background:var(--panel); color:var(--ink)}
  .nav-toggle:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

  .rail{position:fixed; top:0; left:0; bottom:0; width:min(84vw,320px); z-index:80;
    grid-column:auto; height:100vh; overflow:auto; padding:14px 12px 20px;
    border-right:1px solid var(--line); border-bottom:0;
    box-shadow:0 24px 60px -20px rgba(15,23,42,.4);
    transform:translateX(-100%); transition:transform .22s ease; will-change:transform}
  .rail.open{transform:translateX(0)}
  @media (prefers-reduced-motion:reduce){.rail{transition:none}}

  .nav-close{display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:10px; right:10px; width:36px; height:36px;
    border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px}
  .nav-close:hover{background:var(--panel); color:var(--ink)}
  .rail .lbl{padding:6px 8px 8px; margin-right:40px}
  /* 케밥(삭제 메뉴): 호버 없는 터치 환경이라 항상 노출 */
  .rail .prod .kebab{opacity:1; padding:6px 8px}
  .rail .prod{padding-right:36px}          /* 케밥 상시 노출과 이름 겹침 방지 */
  .rail .prod .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  .nav-backdrop{display:block; position:fixed; inset:0; z-index:75; background:rgba(15,23,42,.42);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
  .nav-backdrop[hidden]{display:none}
}

/* =====================================================================
   모바일(≤640px): 배합 시트 표 → 원료별 카드 전환 + 헤더 넘침 제거 +
   터치 타깃 확대. 표의 DOM(td 순서)은 그대로 두고 display 만 바꾸는
   CSS-only 변환이라 updateSheetNumbers/updateRowAttrs 의 셀 인덱싱이 보존된다.
   각 셀의 라벨은 renderSheet 가 붙인 data-label 을 ::before 로 표시.
   ===================================================================== */
@media (max-width:640px){
  /* ---- 헤더: 가로 넘침 제거 + 터치 타깃 ≥40px ---- */
  header.app{gap:6px; padding:0 10px}
  .savestat{display:none}                       /* 저장 상태는 자동저장으로 대체, 폰에선 생략 */
  header.app .btn{padding:0 11px; min-height:40px}
  header.app .bell{width:40px; height:40px}
  header.app .auth-signin-btn{min-height:40px; padding:8px 10px}
  header.app .auth-chip{width:40px; height:40px}

  /* ---- 벤치 여백/헤더 ---- */
  .bench{padding:12px 12px}
  .bench-head{gap:8px}
  .bench-head h1{font-size:15px}
  .meta{margin-left:0; width:100%}
  .meta .cell{flex:1}

  /* ---- 표를 블록으로 풀고 컬럼 헤더 숨김 ---- */
  table.sheet{display:block; width:100%; min-width:0; font-size:13px}
  table.sheet thead{display:none}
  table.sheet tbody, table.sheet tfoot{display:block}

  /* ---- 데이터 행 = 카드 ---- */
  #sheet-body tr{
    display:grid; grid-template-columns:1fr 1fr; position:relative;
    border:1px solid var(--line-strong); border-radius:12px; background:var(--surface);
    margin-bottom:10px; padding:4px 6px 8px; box-shadow:0 1px 2px rgba(15,23,42,.05);
  }
  #sheet-body tr:hover td{background:transparent}   /* 카드에선 행 hover 배경 무의미 */
  #sheet-body td{
    display:flex; justify-content:space-between; align-items:baseline; gap:8px;
    border-bottom:0; padding:6px 8px; text-align:right; min-width:0;
  }
  #sheet-body td .cellpad{padding:0}
  #sheet-body td::before{
    content:attr(data-label); flex:none; text-align:left; white-space:nowrap;
    color:var(--faint); font-size:11px; font-weight:700;
  }
  /* 원료명 = 카드 제목(전체폭, 라벨 없음, 일반 블록 흐름) */
  #sheet-body td.l{grid-column:1/-1; display:block; text-align:left;
    padding:8px 8px 6px; border-bottom:1px solid var(--line); margin-bottom:4px}
  #sheet-body td.l::before{display:none}
  #sheet-body td.l .cellpad{padding:0}
  /* 배합량 입력 = 강조 전체폭 필드 */
  #sheet-body td.cell-edit{grid-column:1/-1; box-shadow:none; background:var(--indigo-weak);
    border-radius:8px; margin:2px 2px 6px; padding:2px 10px; align-items:center}
  #sheet-body td.cell-edit::before{align-self:center; color:var(--indigo-ink); font-size:12px}
  #sheet-body td.cell-edit .g-wrap{flex:1; box-shadow:none; padding-right:2px}
  #sheet-body td.cell-edit .g-inp{padding:10px 4px; font-size:15px}
  /* 삭제 = 카드 우상단 */
  #sheet-body td:last-child{position:absolute; top:3px; right:3px; padding:0}
  #sheet-body td:last-child::before{display:none}
  #sheet-body td:last-child .cellpad{padding:0}
  #sheet-body .row-del{padding:11px 14px; font-size:18px; border-radius:8px; line-height:1}
  #sheet-body td.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
  #sheet-body td.cell-edit .g-inp{min-height:24px}   /* g-wrap 패딩 포함 ≈44px */

  /* ---- 합계 tfoot = 요약 카드 ---- */
  #sheet-foot tr{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--indigo);
    border-radius:12px; background:var(--indigo-weak); padding:4px 6px 8px}
  #sheet-foot td{display:flex; justify-content:space-between; gap:8px; padding:6px 8px;
    border:0; text-align:right}
  #sheet-foot td .cellpad{padding:0}
  #sheet-foot td::before{content:attr(data-label); flex:none; text-align:left;
    color:var(--indigo-ink); font-size:11px; font-weight:700}
  #sheet-foot td.l{grid-column:1/-1; font-weight:800; padding:4px 8px 6px;
    border-bottom:1px solid var(--indigo); margin-bottom:4px}
  #sheet-foot td.l::before{display:none}
  #sheet-foot td:last-child{display:none}          /* 삭제열 자리(빈 셀) 숨김 */

  /* ---- 원료 추가 행 ---- */
  table.sheet #sheet-adder, #adder-row, #adder-cell{display:block; width:auto; padding:0}
  .adder-btn{min-height:46px; justify-content:center; border:1px dashed var(--line-strong);
    border-radius:11px; padding:10px}
  .adder-eg{display:none}

  /* ---- 작은 태그/편집 버튼 터치 타깃 확대 ---- */
  .atag{padding:3px 8px; font-size:11px}
  .atag-edit{padding:8px 12px; font-size:11px}
  .attrchip-edit{padding:6px 10px; font-size:11px}

  /* ---- 라벨 영역 컨트롤 터치 타깃 ≥40px ---- */
  .btn{min-height:42px}
  .meta .cell{padding:8px 12px}
  .meta .v-inp{padding:6px 0; font-size:14px}
  .lt-sel{min-height:40px; padding:8px 10px; font-size:13px}
  .zoom-open-btn{width:40px; height:40px}
  .face-add{padding:9px 12px; font-size:12px}
  .face-split-btn{padding:9px 12px; font-size:12px}
  .mpanel-head{padding:13px 12px}
  /* .cite-mark / .sticker-copy 는 실제 라벨 스티커 위 초소형 마커라 확대 대상 아님 */
}

/* 규정 개정 영향 알림(헤더 벨 + 드롭다운) */
.alerts-wrap{position:relative}
.bell{position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); border-radius:7px; cursor:pointer}
.bell:hover{background:var(--panel); color:var(--ink)}
.bell:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.bell.has-alert{color:var(--amber); border-color:#F6D9AE; background:var(--amber-weak)}
.bell-badge{position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--red); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; line-height:1}
.bell-badge[hidden]{display:none}
.alert-panel{position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:min(360px,92vw);
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius:11px; box-shadow:var(--glass-shadow),var(--glass-rim); overflow:hidden}
.alert-panel[hidden]{display:none}
.ap-head{padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel)}
.ap-title{font-size:12.5px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:7px}
.ap-sub{font-size:11px; color:var(--muted); margin-top:3px}
.ap-toggle{display:flex; align-items:center; gap:7px; margin-top:9px; font-size:11.5px; font-weight:700; color:var(--indigo-ink); cursor:pointer; user-select:none}
.ap-toggle input{width:14px; height:14px; accent-color:var(--indigo); cursor:pointer}
.ap-sim{padding:9px 14px; background:var(--indigo-weak); border-bottom:1px solid #D6D9FB; font-size:11px; color:var(--indigo-ink); line-height:1.5}
.ap-sim b{display:block; margin-bottom:3px; font-size:11px}
.ap-list{max-height:320px; overflow:auto}
.ap-item{display:flex; align-items:center; gap:9px; width:100%; border:0; border-bottom:1px solid var(--line); background:var(--surface); text-align:left; padding:10px 14px; cursor:pointer; font:inherit}
.ap-item:last-child{border-bottom:0}
.ap-item:hover{background:var(--amber-weak)}
.ap-item .ap-dot{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none}
.ap-item .ap-nm{font-weight:700; font-size:12.5px}
.ap-item .ap-meta{font-size:11px; color:var(--muted); margin-top:1px}
.ap-item .ap-cnt{margin-left:auto; font-size:10.5px; font-weight:800; color:var(--amber); background:var(--amber-weak); border:1px solid #F6D9AE; border-radius:999px; padding:2px 8px; white-space:nowrap}
.ap-empty{padding:18px 14px; font-size:12px; color:var(--muted); text-align:center}
.ap-empty .ap-ok{display:block; font-size:22px; margin-bottom:6px}

/* 제품 상단 영향 배너 */
.impact-banner{display:flex; align-items:center; gap:10px; padding:10px 13px; margin-bottom:12px; border:1px solid #F6D9AE; background:var(--amber-weak); border-radius:9px}
.impact-banner[hidden]{display:none}
.impact-banner svg{color:var(--amber); flex:none}
.impact-banner .ib-txt{font-size:12.5px; font-weight:700; color:var(--amber)}
.impact-banner .ib-txt b{color:var(--red)}
.impact-banner .spacer{flex:1}
.impact-banner .ib-btn{font:inherit; font-weight:700; font-size:12px; border:1px solid var(--amber); background:var(--amber); color:#fff; border-radius:7px; padding:6px 12px; cursor:pointer; white-space:nowrap}
.impact-banner .ib-btn:hover{background:#9A4708}
.impact-banner.demo{border-color:#D6D9FB; background:var(--indigo-weak)}
.impact-banner.demo svg, .impact-banner.demo .ib-txt{color:var(--indigo-ink)}
.impact-banner.demo .ib-btn{border-color:var(--indigo); background:var(--indigo)}
.impact-banner.demo .ib-btn:hover{background:#4338CA}

/* 수정안 diff 모달 */
.diff-note{font-size:12px; color:var(--muted); margin:0 0 12px; line-height:1.55}
.diff-note.demo{color:var(--indigo-ink); background:var(--indigo-weak); border:1px solid #D6D9FB; border-radius:8px; padding:9px 11px}
.diff-table{width:100%; border-collapse:collapse; font-size:12px}
.diff-table th{text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:6px 9px; border-bottom:1px solid var(--line)}
.diff-table td{padding:8px 9px; border-bottom:1px solid var(--line); vertical-align:top}
.diff-table tr:last-child td{border-bottom:0}
.diff-field{font-weight:700}
.diff-old{color:var(--muted); font-family:var(--mono); text-decoration:line-through}
.diff-new{color:var(--green); font-weight:700; font-family:var(--mono)}
.diff-action{font-size:11px; color:var(--amber); font-weight:600}

/* ===================================================================
   리퀴드 글래스 — 크롬 표면 위 자식요소 투명 보정 + 미지원 폴백
   금지 표면(스프레드시트·라벨 미리보기·검증 리포트 본문)은 위에서 불투명 유지.
   =================================================================== */
/* 글래스 컨테이너 안의 불투명 패널 조각을 살짝 투명하게 눌러 유리 질감을 살린다. */
.pop .ph,.pop .foot,.alert-panel .ap-head,.modal-cap,.modal-foot{background:rgba(248,250,252,.55)}
.opt,.ap-item{background:transparent}
.modal-body{background:transparent}
/* backdrop-filter 미지원 브라우저: 불투명 배경으로 폴백(가독성 우선).
   신규 글래스 적용처(시트 헤더 행·독 크롬·개정 이벤트 카드)도 함께 커버한다. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header.app,.rail,.pop,.alert-panel,.modal,.dock-cap,.label-tools,.auth-signin-btn,.auth-chip,.auth-popover{background:var(--surface)}
  .modal-host{background:rgba(15,23,42,.42)}
  .pop .ph,.pop .foot,.alert-panel .ap-head,.modal-cap,.modal-foot{background:var(--panel)}
  .opt,.ap-item,.ap-event{background:var(--surface)}
  .modal-body{background:var(--surface)}
  /* 시트 헤더 행: 반투명 대신 원래 불투명 패널색으로 */
  table.sheet th{background:var(--panel)}
  /* fit 판정 바: 불투명 weak 색으로 복원(가독성) */
  .fit-verdict.ok{background:var(--green-weak)}
  .fit-verdict.compress{background:var(--indigo-weak)}
  .fit-verdict.fail{background:var(--red-weak)}
}

/* [hidden] 강제: display:flex/grid 를 가진 author 규칙은 UA [hidden]{display:none}
   보다 우선하므로(동일 특이도에서 author 우선), 단계 전환으로 감출 표면들에는
   명시적 [hidden] 규칙이 필요하다. */
.bench-head[hidden],.vstrip[hidden],.toolbar[hidden],.mpanel[hidden],.grid[hidden]{display:none}

/* 헤더 점검 버튼 + 배지 */
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted); padding:7px 10px}
.btn.ghost:hover{background:rgba(255,255,255,.55); color:var(--ink)}
.checklist-btn{position:relative}
.checklist-btn.has-todo{color:var(--amber)}
.chk-badge{min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--amber); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; line-height:1; margin-left:2px}
.chk-badge[hidden]{display:none}

/* Google 로그인 헤더 UI(auth.js가 렌더/토글) — 벨/인쇄 버튼과 동일한 글래스 크롬 토큰 */
.auth-wrap{position:relative}
.auth-signin-btn{font:inherit; font-weight:700; font-size:12.5px; display:inline-flex; align-items:center; gap:7px;
  border-radius:7px; border:1px solid var(--glass-brd); background:var(--glass-bg-strong); color:var(--ink);
  padding:7px 12px; min-height:36px; cursor:pointer;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-rim)}
.auth-signin-btn:hover{background:var(--glass-bg)}
.auth-signin-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.auth-signin-btn[hidden]{display:none}
.auth-chip{position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border-radius:999px; border:1px solid var(--glass-brd); background:var(--glass-bg-strong); cursor:pointer; overflow:hidden;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-rim)}
.auth-chip:hover{background:var(--glass-bg)}
.auth-chip:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.auth-chip[hidden]{display:none}
.auth-avatar{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--indigo); color:#fff; font-weight:800; font-size:13px; line-height:1}
.auth-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.auth-popover{position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:min(240px,88vw); padding:12px 14px;
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius:11px; box-shadow:var(--glass-shadow),var(--glass-rim)}
.auth-popover[hidden]{display:none}
.auth-email{font-size:12px; color:var(--muted); font-weight:600; margin-bottom:10px; word-break:break-all}
.auth-signout-btn{width:100%; justify-content:center}

/* ===================================================================
   토스식 온보딩 카드(빈 제품) — 한 번에 한 질문, 큰 터치 타깃
   =================================================================== */
.onboarding{display:flex; align-items:flex-start; justify-content:center; padding:6vh 8px 24px}
.onboarding[hidden]{display:none}
.onb-card{width:100%; max-width:460px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px -28px rgba(15,23,42,.35); padding:28px 26px}
.onb-step{font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--indigo); margin-bottom:8px}
.onb-back{border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:0 0 10px; display:inline-flex}
.onb-back:hover{color:var(--ink)}
.onb-q{font-size:22px; line-height:1.3; letter-spacing:-.02em; margin:0 0 8px; font-weight:800}
.onb-hint{font-size:13px; color:var(--muted); margin:0 0 20px; line-height:1.5}
.onb-field{margin-bottom:16px}
.onb-inp{font-size:16px; min-height:54px; padding:14px 16px; border-radius:12px}
.onb-inp.shake{animation:shake .32s}
.onb-next{width:100%; justify-content:center; min-height:52px; font-size:15px; border-radius:12px}
/* search 단계: 카드 안으로 이식된 검색 툴바를 세로로 큼직하게 배치 */
.onb-search-slot .toolbar{flex-direction:column; align-items:stretch; gap:10px; margin:0}
.onb-search-slot .search-wrap{max-width:none}
.onb-search-slot .inp{font-size:16px; min-height:54px; padding:14px 16px 14px 40px; border-radius:12px}
.onb-search-slot .search-wrap .ico{left:14px}
.onb-search-slot .btn{min-height:48px; justify-content:center; border-radius:12px}
.onb-search-slot .khint{display:none}
.onb-search-slot .pop{width:min(560px,100%)}

/* ===================================================================
   "라벨 완성하기" 단계형 카드
   =================================================================== */
.wizard{margin-top:14px}
.wizard[hidden]{display:none}
.wz-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px -22px rgba(15,23,42,.4); padding:18px 18px 16px}
.wz-head{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.wz-head .spacer{flex:1}
.wz-title{font-size:12.5px; font-weight:800; color:var(--indigo)}
.wz-count{font-size:11.5px; font-weight:800; color:var(--muted); font-family:var(--mono); font-variant-numeric:tabular-nums}
.wz-close{border:0; background:transparent; color:var(--faint); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; padding:2px 6px; border-radius:6px}
.wz-close:hover{background:var(--panel); color:var(--muted)}
.wz-progress{height:5px; border-radius:999px; background:var(--line); overflow:hidden; margin-bottom:16px}
.wz-progress-fill{height:100%; background:var(--indigo); border-radius:999px}
@media (prefers-reduced-motion:no-preference){.wz-progress-fill{transition:width .3s ease}}
.wz-q{font-size:18px; line-height:1.35; letter-spacing:-.02em; margin:0 0 6px; font-weight:800}
.wz-hint{font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.5}
.wz-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.wz-chip{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; font-weight:600; padding:9px 14px; min-height:40px; border-radius:10px; cursor:pointer}
.wz-chip:hover{background:var(--panel); border-color:var(--indigo)}
.wz-chip.on{background:var(--indigo-weak); border-color:var(--indigo); color:var(--indigo-ink)}
.wz-chip.other{border-style:dashed; color:var(--muted)}
.wz-inp{font-size:15px; min-height:50px; padding:12px 14px; border-radius:11px}
.wz-auto{margin-top:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--indigo-ink); font:inherit; font-size:12px; font-weight:700; padding:8px 12px; border-radius:9px; cursor:pointer}
.wz-auto:hover{background:var(--indigo-weak)}
.wz-acts{display:flex; align-items:center; gap:8px; margin-top:16px}
.wz-acts .spacer{flex:1}
.wz-btn{font:inherit; font-weight:700; font-size:14px; border-radius:11px; padding:11px 18px; min-height:48px; cursor:pointer; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink)}
.wz-btn.ghost{border-color:transparent; background:transparent; color:var(--muted); padding:11px 12px}
.wz-btn.ghost:hover{background:var(--panel); color:var(--ink)}
.wz-btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff}
.wz-btn.primary:hover{background:#4338CA}
.wz-btn:focus-visible,.wz-chip:focus-visible,.onb-inp:focus-visible,.wz-inp:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

/* "배합으로 돌아가기" — 마법사 진행 중에도 배합표로 되돌아갈 수 있음을 알린다.
   카드 상단에 두어, 마법사가 배합 수정을 막지 않는다는 인상을 준다. */
.wz-back{border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:0 0 12px; display:inline-flex; align-items:center; gap:4px}
.wz-back:hover{color:var(--indigo-ink)}

/* 배합 완료 전환 CTA(마법사 시작 전) — 사용자가 명시적으로 눌러야만 마법사가
   시작된다. 배합량 합계가 0이면 비활성 + 안내 힌트. */
.wz-cta{background:var(--surface); border:1px dashed var(--line-strong); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.wz-cta-btn{font:inherit; font-weight:700; font-size:14px; border-radius:11px; padding:12px 18px; min-height:48px; cursor:pointer; border:1px solid var(--indigo); background:var(--indigo); color:#fff; width:100%; justify-content:center; display:flex; align-items:center}
.wz-cta-btn:hover:not(:disabled){background:#4338CA}
.wz-cta-btn:disabled{opacity:.45; cursor:not-allowed; background:var(--panel); border-color:var(--line-strong); color:var(--muted)}
.wz-cta-hint{margin:0; font-size:12px; color:var(--amber); font-weight:600}
.wz-cta-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

/* 마법사 완료/나중에 이후 재진입 CTA — 미입력 항목이 남았을 때만 노출. */
.wz-resume{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:10px}
.wz-resume .wz-resume-txt{font-size:12.5px; font-weight:700; color:var(--ink)}
.wz-resume-btn{font:inherit; font-weight:700; font-size:12.5px; border-radius:9px; padding:8px 14px; min-height:36px; cursor:pointer; border:1px solid var(--indigo); background:var(--surface); color:var(--indigo-ink); margin-left:auto}
.wz-resume-btn:hover{background:var(--indigo-weak)}
.wz-resume-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

/* ===================================================================
   우측 도킹 placeholder(배합량 입력 전) + 내보내기 전 점검 체크리스트
   =================================================================== */
.dock-placeholder{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:44px 18px; color:var(--faint); border:1px dashed var(--line-strong); border-radius:12px; background:var(--panel)}
.dock-placeholder[hidden]{display:none}
.dock-placeholder .dph-txt{margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); max-width:220px}
#label-live[hidden]{display:none}

/* 배합 진행 중 상태 라벨(마법사 시작 전에만, 미리보기 위). */
.dock-status{font-size:11.5px; font-weight:700; color:var(--indigo-ink); background:var(--indigo-weak); border-radius:8px; padding:6px 10px; margin-bottom:10px; text-align:center}
.dock-status[hidden]{display:none}

.chk-list{display:flex; flex-direction:column; gap:2px}
.chk-lead{font-size:12.5px; color:var(--muted); margin:0 0 10px; line-height:1.5}
.chk-item{display:flex; align-items:flex-start; gap:10px; padding:9px 4px; border-top:1px solid var(--line)}
.chk-item:first-of-type{border-top:0}
.chk-icon{flex:none; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; line-height:1}
.chk-item.ok .chk-icon{background:var(--green-weak); color:#065F46}
.chk-item.todo .chk-icon{background:var(--amber-weak); color:var(--amber)}
.chk-item.soft .chk-icon{background:var(--panel); color:var(--faint)}
.chk-mid{display:flex; flex-direction:column; gap:2px; min-width:0}
.chk-label{font-size:13px; font-weight:700; color:var(--ink)}
.chk-detail{font-size:11.5px; color:var(--muted); line-height:1.45}
.chk-item.todo .chk-label{color:var(--amber)}
/* 점검 항목 "고치기" 점프 버튼(U11) */
.chk-fix{flex:none; margin-left:auto; align-self:center; font:inherit; font-size:11px; font-weight:700; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:7px; padding:4px 10px; cursor:pointer; white-space:nowrap}
.chk-fix:hover{background:var(--amber-weak); border-color:#F6D9AE; color:var(--amber)}

/* 한눈에 보기 도메인 카드 보조 요소(U11) */
.tv-note.warn{color:var(--amber); font-weight:600}
.tv-marks{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px}
.tv-mark{display:flex; flex-direction:column; align-items:center; gap:4px}
.tv-mark-svg{display:flex; align-items:center; justify-content:center}
.tv-mark-svg svg{display:block}
.tv-mark-lbl{font-size:10.5px; color:var(--muted); text-align:center}

/* 규정 개정 이벤트 카드(U11) — affected 목록 위에 노출 */
.ap-events{border-bottom:1px solid var(--line)}
/* 규정 개정 이벤트 카드 — 글래스 알림 패널과 정합(다른 팝오버 아이템 .ap-item 처럼
   투명 배경으로 프로스티드 패널이 비치게). 미지원 폴백은 @supports 에서 불투명 복원. */
.ap-event{padding:11px 14px; border-bottom:1px solid var(--line); background:transparent}
.ap-event:last-child{border-bottom:0}
.ap-ev-top{display:flex; align-items:center; gap:8px; margin-bottom:5px}
.ap-ev-badge{flex:none; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--panel); color:var(--muted); border:1px solid var(--line)}
.ap-ev-badge.dom-origin{background:var(--amber-weak); color:var(--amber); border-color:#F6D9AE}
.ap-ev-badge.dom-gmo{background:var(--indigo-weak); color:var(--indigo-ink); border-color:#D6D9FB}
.ap-ev-badge.dom-recycling{background:var(--green-weak); color:#065F46; border-color:#B7E4C7}
.ap-ev-badge.dom-labeling{background:var(--panel); color:var(--ink)}
.ap-ev-title{font-size:12.5px; font-weight:700; color:var(--ink); min-width:0}
.ap-ev-rev{display:flex; align-items:center; gap:6px; font-size:11px; margin-bottom:4px}
.ap-ev-old{color:var(--muted); text-decoration:line-through}
.ap-ev-arrow{color:var(--faint)}
.ap-ev-new{color:var(--ink); font-weight:700}
.ap-ev-date{margin-left:auto; color:var(--faint); font-size:10.5px}
.ap-ev-summary{font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:4px}
.ap-ev-rel{font-size:11px; color:var(--ink); margin-bottom:4px}
.ap-ev-rel.muted{color:var(--faint)}
.ap-ev-manual{font-size:10.5px; color:var(--amber); font-weight:700; margin-bottom:8px}
.ap-ev-foot{display:flex; justify-content:flex-end}
.ap-ev-ack{font:inherit; font-size:11px; font-weight:700; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:7px; padding:4px 14px; cursor:pointer}
.ap-ev-ack:hover:not(:disabled){background:var(--green-weak); border-color:#B7E4C7; color:#065F46}
.ap-ev-ack:disabled{opacity:.6; cursor:default}

/* 단계 전환 애니메이션(부드럽게) — reduced-motion 존중 */
@media (prefers-reduced-motion:no-preference){
  .onb-anim{animation:onbIn .28s ease}
  .wz-anim{animation:onbIn .22s ease}
  @keyframes onbIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
  @keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
}

/* ===================================================================
   라벨 확대보기 오버레이(전체화면, 글래스 크롬)
   =================================================================== */
.zoom-overlay{position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
  background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.zoom-overlay[hidden]{display:none}
.zoom-bar{display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-brd); box-shadow:var(--glass-rim)}
.zoom-bar .spacer{flex:1}
.zoom-title{font-weight:800; font-size:13px; color:var(--ink)}
.zoom-ctrls{display:flex; align-items:center; gap:6px}
.zoom-btn{min-width:32px; height:32px; padding:0 9px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; font-weight:700; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center}
.zoom-btn.wide{font-size:12px}
.zoom-btn.x{font-size:20px; line-height:1}
.zoom-btn:hover{background:var(--panel)}
.zoom-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.zoom-pct{min-width:54px; text-align:center; font-weight:800; font-size:12.5px; color:var(--muted)}
.zoom-stage{flex:1; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; touch-action:none}
.zoom-canvas{transform-origin:center center; cursor:grab}
.zoom-canvas.panning{cursor:grabbing}
.zoom-canvas .sticker{box-shadow:0 16px 50px -12px rgba(0,0,0,.55); cursor:inherit}
.zoom-hint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font-size:11px;
  color:rgba(255,255,255,.9); background:rgba(15,23,42,.5); padding:5px 12px; border-radius:999px; pointer-events:none}

/* 인쇄: 실측 스티커(.sticker)만 실크기(mm/pt)로 출력 */
/* 브랜드 영문 병기(헤더) — 구글 OAuth 콘솔 앱 이름 "Labelo"와 매칭용 */
.brand-en{font-weight:800; color:var(--muted); letter-spacing:0}

/* 서비스 소개 배너(편집기 최상단, above the fold) — 앱 이름 + 목적 즉시 노출 */
.intro-banner{display:flex; align-items:flex-start; gap:10px; margin:0 0 14px;
  padding:12px 14px; border:1px solid var(--indigo); border-radius:12px;
  background:linear-gradient(180deg,var(--indigo-weak),var(--surface))}
.intro-banner[hidden]{display:none}
.intro-mark{width:26px; height:26px; border-radius:7px; background:var(--indigo);
  display:grid; place-items:center; flex:none; margin-top:1px}
.intro-body{flex:1; min-width:0}
.intro-title{margin:0 0 4px; font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--indigo-ink); line-height:1.35}
.intro-txt{margin:0; font-size:13px; line-height:1.6; color:var(--ink)}
.intro-txt b{color:var(--indigo-ink)}
.intro-x{flex:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:5px; border-radius:7px; line-height:1}
.intro-x:hover{background:var(--surface); color:var(--ink)}
.intro-x:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

/* 사이트 푸터(앱 목적 설명 + 법적 링크) — 앱 그리드 아래 공통 표시 */
.site-foot{border-top:1px solid var(--line); background:var(--panel);
  padding:22px 18px 26px; color:var(--faint); font-size:12.5px}
.foot-about{max-width:760px; margin:0 auto 14px}
.foot-brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px}
.foot-brand .mark{width:22px; height:22px; border-radius:6px; background:var(--indigo); display:grid; place-items:center; flex:none}
.foot-en{color:var(--muted); font-weight:700}
.foot-desc{margin:0; color:var(--muted); font-size:13px; line-height:1.65}
.foot-desc b{color:var(--indigo-ink)}
.foot-links{display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center;
  max-width:760px; margin:0 auto; padding-top:14px; border-top:1px solid var(--line)}
.site-foot a{color:var(--muted); text-decoration:none}
.site-foot a:hover{color:var(--indigo-ink); text-decoration:underline}
.site-foot .dot{color:var(--line-strong)}

@media print{
  @page{margin:6mm}
  header.app, .rail, .bench, .dock-cap, .dock .btn, .modal-host, .dock-resizer, .zoom-overlay,
  .label-tools, .fit-verdict, .dock-placeholder, .dock-status, .site-foot, .nav-toggle, .nav-backdrop,
  .face-tools, .face-legal-note, .sticker-copy, .cite-mark, .cite-pop{display:none !important}
  /* 여러 면 인쇄: 활성 면(라이브 미리보기)은 숨기고, 면별 실측 스티커를 인쇄한다.
     면 사이 page-break. 1면(기본)일 땐 body.printing-faces 가 없어 기존 경로 그대로. */
  body.printing-faces .dock .print-area{display:none !important}
  body.printing-faces #print-faces{display:block !important}
  #print-faces .pf-face + .pf-face{page-break-before:always; break-before:page}
  #print-faces .pf-face{break-inside:avoid}
  /* 배합량 미입력 상태에서 강제 내보내기해도 라벨 영역은 인쇄되도록 표시 복원 */
  #label-live{display:block !important}
  .app-grid{display:block; height:auto}
  .dock{border:0; padding:0; overflow:visible}
  body{background:#fff}
  .print-area{display:block; max-width:none}
  /* 스티커는 인라인 style의 mm 실측 폭/높이를 그대로 인쇄(장평·자간 압축 유지).
     미리보기 scale-to-fit(래퍼 높이 보정 + sticker transform:scale)은 인쇄 시 제거해
     실치수로 출력한다. */
  .sticker-fit{height:auto !important; overflow:visible !important}
  .sticker{box-shadow:none; border:1px solid #999; overflow:hidden; transform:none !important}
  .preview-scale-note{display:none !important}
  /* 글래스 잔재 방지(방어적): 인쇄되는 서브트리(독/스티커)에서 backdrop-filter·
     그림자 제거. 글래스 크롬(.dock-cap/.label-tools/.fit-verdict/header/rail 등)은
     위에서 이미 display:none 이지만, 인쇄 경로에 글래스가 전혀 남지 않게 보증한다. */
  .dock, .print-area, .sticker, .sticker *{-webkit-backdrop-filter:none !important; backdrop-filter:none !important}
  /* 근거 리포트 인쇄 격리: printing-report 일 때만 문서를 노출하고 라벨 스티커
     경로(app-grid·면별 인쇄 호스트)를 모두 숨긴다 → 스티커 인쇄와 상호 독립. */
  body.printing-report .app-grid{display:none !important}
  body.printing-report #print-faces{display:none !important}
  body.printing-report #report-doc{display:block !important}
}

/* ── IA 개편: 근거 리포트 문서(인쇄 전용 A4 뷰) ── */
/* 화면에선 항상 숨김. body.printing-report + @media print 에서만 노출된다. */
#report-doc{display:none}
.report-doc{max-width:760px; margin:0 auto; padding:8mm 6mm; color:#111; background:#fff; font-size:11pt; line-height:1.5}
.report-doc .rd-title{font-size:19pt; font-weight:800; letter-spacing:-.01em; margin:0 0 4px}
.report-doc .rd-lead{font-size:9.5pt; color:#444; margin:0 0 14px}
.report-doc .rd-sec{margin:0 0 16px; break-inside:avoid}
.report-doc .rd-h{font-size:12.5pt; font-weight:700; margin:0 0 6px; padding-bottom:3px; border-bottom:2px solid #111}
.report-doc .rd-h3{font-size:10.5pt; font-weight:700; margin:8px 0 3px}
.report-doc .rd-h3.err{color:#B42318}
.report-doc .rd-h3.warn{color:#B54708}
.report-doc .rd-summary{display:grid; grid-template-columns:auto 1fr; gap:2px 14px; margin:0}
.report-doc .rd-summary dt{font-weight:700; color:#333}
.report-doc .rd-summary dd{margin:0}
.report-doc .rd-tollist,.report-doc .rd-warnlist{margin:0; padding-left:18px}
.report-doc .rd-tollist li,.report-doc .rd-warnlist li{margin:2px 0}
.report-doc .rd-note{font-size:10pt; color:#555; margin:6px 0 0}
.report-doc .rd-foot{margin-top:20px; padding-top:8px; border-top:1px solid #999; font-size:9pt; color:#555}
.report-doc .rd-foot-line{margin:2px 0}
/* 재사용된 계약 함수 산출물(.tv-card / .tv-collap)을 문서 흐름에 맞춰 인쇄 톤으로. */
.report-doc .tv-card,.report-doc .tv-collap{border:1px solid #CBD5E1; background:#fff; box-shadow:none; break-inside:avoid}
.report-doc .tv-collap-sum{background:#F1F5F9}
.report-doc .tv-collap-sum::before{content:"▾"}

/* ── 라운드2 A: 복합원재료 하위 구성 편집기 ── */
.attrchip.complex{background:var(--green-weak); color:#065F46}
.attr-complex-guide{font-weight:600; color:var(--indigo-ink)}
.attr-complex-warn{color:var(--amber); font-weight:600}
.attr-sublist{display:flex; flex-direction:column; gap:8px; margin:4px 0 8px}
.attr-sub-edit{border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--panel); display:flex; flex-direction:column; gap:6px}
.attr-sub-line{display:flex; gap:6px; align-items:center}
.attr-sub-edit input, .attr-sub-edit select{font:inherit; padding:6px 8px; min-height:32px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink)}
.attr-sub-edit input:focus-visible, .attr-sub-edit select:focus-visible{outline:2px solid var(--indigo); outline-offset:1px; border-color:var(--indigo)}
.attr-sub-nm{flex:1 1 auto; min-width:0}
.attr-sub-pct{width:64px; flex:none}
.attr-sub-mode{flex:none; width:96px}
.attr-sub-country{flex:1 1 auto; min-width:0}
.attr-sub-aller{flex:1 1 auto; min-width:0}
.attr-sub-mv,.attr-sub-rm{flex:none; width:28px; min-height:32px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--muted); cursor:pointer; font-weight:700}
.attr-sub-mv:hover{border-color:var(--indigo); color:var(--indigo-ink)}
.attr-sub-rm:hover{border-color:#F5C4BF; color:var(--red)}
.attr-sub-add{align-self:flex-start; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; color:var(--indigo-ink);
  border:1px dashed #C7CBF7; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}

/* ── 라운드2 B: 판정 근거 하위 접이식 상세 섹션 ── */
.tv-collap{background:var(--surface); border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden}
.tv-collap-sum{cursor:pointer; padding:10px 14px; background:var(--panel); border-bottom:1px solid transparent; font-size:12.5px; font-weight:700; color:var(--ink); list-style:none}
.tv-collap-sum::-webkit-details-marker{display:none}
.tv-collap-sum::before{content:"▸"; display:inline-block; margin-right:8px; color:var(--faint); transition:transform .15s ease}
.tv-collap[open] .tv-collap-sum{border-bottom-color:var(--line)}
.tv-collap[open] .tv-collap-sum::before{transform:rotate(90deg)}
.tv-collap-body{padding:12px 14px}
.tv-collap-body .tv-table{margin-bottom:0}
.tv-svggal{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.tv-svgcell{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--panel)}
.tv-svg{width:48px; height:48px; display:flex; align-items:center; justify-content:center}
.tv-svg svg{max-width:48px; max-height:48px}
.tv-svglbl{font-size:10.5px; font-weight:700; color:var(--muted)}