/* 고객 포털 (부록 C-2) — 경량, 라이트/다크 대응 */
:root {
  /* ⭐ 색은 tokens.css 가 정본이다 — 여기서 값을 «새로 적지» 않는다. 이름만 잇는다.
     (tokens.css 가 index.html 에서 이 파일보다 «먼저» 실린다) */
  --bg: var(--page); --surface: var(--card); --border: var(--line-c); --text: var(--tx); --muted: var(--tx3);
  /* 브랜드 컬러 — GloSize 라임. 하나가 «글자»와 «면» 두 일을 하다 라이트 모드가 깨졌다.
     그래서 셋으로 갈랐다 (CEO 확정 2026-08-07 · 전자책이 이미 쓰는 구조):
       --accent       글자     라이트 #4C6A00 / 다크 #c6f24e   ← 배경에 따라 내린다
       --accent-fill  면       양쪽 #c6f24e 고정              ← 라이트에서도 형광 라임 버튼이 산다
       --accent-ink   면 위 글자 양쪽 #14180c 고정
     이유: 밝은 배경에 형광 라임을 글자로 쓰면 대비 1.21 로 안 읽히고(글자 17곳),
           반대로 면을 짙게 하면 그 위 검은 글자가 2.89 가 된다. 한 변수로는 둘 다 안 된다.
     결과: 글자 5.82 · 버튼 13.91 — 라이트·다크 양쪽 모두.
     ⚠️ ink 를 흰색으로 바꾸는 길은 버렸다 — 밝은 화면에서 브랜드 색이 통째로 사라진다. */
  /* 「지금 해야 할 일」 — tokens.css 의 상태색을 그대로 받는다.
     ⚠️ 라이트에서 이 값이 «올리브 #4C6A00 → 파랑»으로 바뀐다. 그게 정본 결정이다 (J.J 2026-08-20). */
  --accent: var(--now); --accent-fill: var(--now-solid); --accent-ink: var(--now-ink);
  /* --err 는 이 파일이 옛날부터 쓰던 이름이다. 토큰 쪽 이름은 --danger 로 갈라 두었다
     (같은 이름을 두 파일이 정의하면 «자기 참조»가 되어 색이 조용히 사라진다) */
  --ok: var(--done); --err: var(--danger); --over: var(--danger);
  /* 차트 계열색 (src/reporters/charts.js가 var()로 받는다 — 리포트 CSS와 같은 값) */
  --accent2: #7c5cff; --accent3: #12a594; --accent4: #e08700;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --radius: 12px;
  /* 「자동으로 정해진 것」 표시색 — 이 제품 하나가 아니라 앞으로 전부에 적용된다는 신호.
     목업에서 가져온 값. 라임(강조)은 «눌러야 하는 것»에만 쓰고, 자동은 전부 이 보라로 통일한다. */
  /* 보라 = "우리가 자동으로 해준 것". 라임(행동·편집)과 역할이 다르다. */
  /* 보라 삭제 (J.J 2026-08-20) — 「자동으로 해줬다」는 손님 행동을 안 바꾼다.
     결국 「봐 주세요」라서 «지금 해야 함»과 같은 색이다. 자동이라는 사실은 문장이 말한다. */
  --auto: var(--now);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 다크 바탕 — 두 번에 걸쳐 정했다 (J.J 2026-08-20).
       ① 순검정에 가까우면 형광 라임·흰 글자가 번진다(halation) → 밝기를 한 단계 올렸다  #0e1116 → #13171d
       ② 그 값은 채도 5.27 로 «어두운 남색»으로 읽혔다 → 밝기는 그대로 두고 파랑기만 뺐다  #13171d → #15171a
       바탕만 중화하면 카드가 상대적으로 더 파래 보인다 → 카드·선도 같이 중화했다.
         바탕   #15171a   L* 7.4   채도 2.88 (전 5.27)   흰글자 대비 14.63
         카드   #1e2125   카드↔바탕 갈림 1.111
         선     #31353b   선↔카드 1.311
       ⛔ 여섯 가족(라임·초록·파랑·금색·보라·오렌지)은 안 건드렸다 — 정본은 노션 「📍 앱 코어색」이다.
       ⚠️ 앱은 OS 를 따라간다(라이트/다크 둘 다 만든다) — J.J 확정 2026-08-20. 한쪽 고정으로 바꾸지 마라. */
    --bg: var(--page); --surface: var(--card); --border: var(--line-c); --text: var(--tx); --muted: var(--tx3);
    /* 어두운 배경에선 라임을 글자로 그대로 쓴다 (대비 14.82). 면·ink 는 :root 값을 물려받는다. */
    /* accent · ok · err · over 는 :root 에서 tokens.css 를 이미 잇고 있다 — 다시 적지 않는다 */
    --accent2: #9b83ff; --accent3: #2fd4bd; --accent4: #f2a33c;
    --shadow: none;
  }
}

/* ── 손님이 «직접 고른» 판 ─────────────────────────────────────────────
   위 두 블록은 «OS 가 정한 것»이라 화면 한 곳만 다른 판으로 둘 수 없다.
   아래 둘은 `:root` 가 아니라 «그냥 붙임딱지»라 아무 칸에나 걸 수 있다 —
   그래서 「껍데기는 다크, 본문은 손님이 고른 판」이 된다 (J.J 2026-08-21).
   ⛔ 값은 한 개도 안 바뀌었다. 위 두 블록과 «같은 값»을 그대로 다시 적을 뿐이다.
   ⚠️ `[data-theme="light"]` 이 OS 다크를 이겨야 해서 위 media 선택자에 `:not()` 을 달았다. */
[data-theme="dark"]{
  /* 다크 바탕 — 두 번에 걸쳐 정했다 (J.J 2026-08-20).
     ① 순검정에 가까우면 형광 라임·흰 글자가 번진다(halation) → 밝기를 한 단계 올렸다  #0e1116 → #13171d
     ② 그 값은 채도 5.27 로 «어두운 남색»으로 읽혔다 → 밝기는 그대로 두고 파랑기만 뺐다  #13171d → #15171a
     바탕만 중화하면 카드가 상대적으로 더 파래 보인다 → 카드·선도 같이 중화했다.
       바탕   #15171a   L* 7.4   채도 2.88 (전 5.27)   흰글자 대비 14.63
       카드   #1e2125   카드↔바탕 갈림 1.111
       선     #31353b   선↔카드 1.311
     ⛔ 여섯 가족(라임·초록·파랑·금색·보라·오렌지)은 안 건드렸다 — 정본은 노션 「📍 앱 코어색」이다.
     ⚠️ 앱은 OS 를 따라간다(라이트/다크 둘 다 만든다) — J.J 확정 2026-08-20. 한쪽 고정으로 바꾸지 마라. */
  --bg: var(--page); --surface: var(--card); --border: var(--line-c); --text: var(--tx); --muted: var(--tx3);
  /* 어두운 배경에선 라임을 글자로 그대로 쓴다 (대비 14.82). 면·ink 는 :root 값을 물려받는다. */
  /* accent · ok · err · over 는 :root 에서 tokens.css 를 이미 잇고 있다 — 다시 적지 않는다 */
  --accent2: #9b83ff; --accent3: #2fd4bd; --accent4: #f2a33c;
  --shadow: none;
}
[data-theme="light"]{
  /* ⭐ 색은 tokens.css 가 정본이다 — 여기서 값을 «새로 적지» 않는다. 이름만 잇는다.
     (tokens.css 가 index.html 에서 이 파일보다 «먼저» 실린다) */
  --bg: var(--page); --surface: var(--card); --border: var(--line-c); --text: var(--tx); --muted: var(--tx3);
  /* 브랜드 컬러 — GloSize 라임. 하나가 «글자»와 «면» 두 일을 하다 라이트 모드가 깨졌다.
     그래서 셋으로 갈랐다 (CEO 확정 2026-08-07 · 전자책이 이미 쓰는 구조):
       --accent       글자     라이트 #4C6A00 / 다크 #c6f24e   ← 배경에 따라 내린다
       --accent-fill  면       양쪽 #c6f24e 고정              ← 라이트에서도 형광 라임 버튼이 산다
       --accent-ink   면 위 글자 양쪽 #14180c 고정
     이유: 밝은 배경에 형광 라임을 글자로 쓰면 대비 1.21 로 안 읽히고(글자 17곳),
           반대로 면을 짙게 하면 그 위 검은 글자가 2.89 가 된다. 한 변수로는 둘 다 안 된다.
     결과: 글자 5.82 · 버튼 13.91 — 라이트·다크 양쪽 모두.
     ⚠️ ink 를 흰색으로 바꾸는 길은 버렸다 — 밝은 화면에서 브랜드 색이 통째로 사라진다. */
  /* 「지금 해야 할 일」 — tokens.css 의 상태색을 그대로 받는다.
     ⚠️ 라이트에서 이 값이 «올리브 #4C6A00 → 파랑»으로 바뀐다. 그게 정본 결정이다 (J.J 2026-08-20). */
  --accent: var(--now); --accent-fill: var(--now-solid); --accent-ink: var(--now-ink);
  /* --err 는 이 파일이 옛날부터 쓰던 이름이다. 토큰 쪽 이름은 --danger 로 갈라 두었다
     (같은 이름을 두 파일이 정의하면 «자기 참조»가 되어 색이 조용히 사라진다) */
  --ok: var(--done); --err: var(--danger); --over: var(--danger);
  /* 차트 계열색 (src/reporters/charts.js가 var()로 받는다 — 리포트 CSS와 같은 값) */
  --accent2: #7c5cff; --accent3: #12a594; --accent4: #e08700;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --radius: 12px;
  /* 「자동으로 정해진 것」 표시색 — 이 제품 하나가 아니라 앞으로 전부에 적용된다는 신호.
     목업에서 가져온 값. 라임(강조)은 «눌러야 하는 것»에만 쓰고, 자동은 전부 이 보라로 통일한다. */
  /* 보라 = "우리가 자동으로 해준 것". 라임(행동·편집)과 역할이 다르다. */
  /* 보라 삭제 (J.J 2026-08-20) — 「자동으로 해줬다」는 손님 행동을 안 바꾼다.
     결국 「봐 주세요」라서 «지금 해야 함»과 같은 색이다. 자동이라는 사실은 문장이 말한다. */
  --auto: var(--now);
}
* { box-sizing: border-box; }
/* [hidden]가 항상 이긴다 — .screen/.pane의 display:flex/grid가 hidden을 덮어쓰는 것 방지 */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* 화면 전환 */
.screen[data-screen="loading"], .screen[data-screen="login"] {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.spinner { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }

/* 로그인 */
.auth-card { width: 100%; max-width: 380px; text-align: center; padding: 32px 28px; }
.auth-card .brand { font-weight: 700; letter-spacing: .04em; color: var(--accent); font-size: 13px; text-transform: uppercase; }
.auth-card h1 { margin: 6px 0 4px; font-size: 22px; }
#login-form { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
input[type="email"], input[type="text"] {
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 15px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
button {
  cursor: pointer; border: 0; border-radius: 9px; padding: 11px 14px; font-size: 15px; font-weight: 600;
  background: var(--accent-fill); color: var(--accent-ink);
}
button:disabled { opacity: .55; cursor: default; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); font-weight: 500; padding: 7px 12px; font-size: 13px; }
.msg { margin: 14px 0 0; font-size: 13.5px; padding: 10px; border-radius: 8px; }
.msg.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.msg.err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }

/* 앱 셸 */
.app-shell { display: block; }
/* ── 상단 껍데기 (J.J 2026-08-19 · 목업 규격) ─────────────────────────────
   여섯 화면(온보딩·대시보드·사용량·제품선택·처음셋팅·편집)이 이 한 벌을 같이 쓴다.
   ⛔ **`.pill`·`.ghost` 를 통째로 고치지 않는다** — 그 두 낱말은 앱 곳곳(12군데)에서 쓴다.
      상단 것만 `.who` 안으로 좁혀서 손댄다.
   ⚠️ 손님 중에 50대가 있다 — 글자와 누르는 자리를 키웠다(탭 13→14.5px · 상단 높이 ↑).
   ⚠️ 라임은 «브랜드»가 아니라 «누르는 것»에 쓴다. 전엔 브랜드 글자와 켜진 탭이 둘 다 라임이라
      어느 쪽이 눌리는 것인지 안 보였다. 이제 켜진 탭은 «가는 밑줄»로만 표시한다. */
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 20px; min-height: 56px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
/* 브랜드 — 로고 마크 + 글자. **마크업을 안 고친다**(`::before` 로 그린다).
   ⚠️ 로고는 «크롬 은색»이다. 라임을 안 섞는다 — 섞으면 로고가 눌리는 것처럼 보인다.
   ⚠️ 원본은 800×800 이고 여백이 크다. 여백을 떼고 높이 66px(레티나 3배)로 줄여 뒀다 —
      매 화면이 여는 그림이라 무거우면 안 된다(7 KB). */
.brand-sm {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; color: var(--text); font-size: 15px; letter-spacing: -.01em; margin-right: 12px;
}
.brand-sm::before {
  content: ""; width: 24px; height: 22px; flex: none;
  background: url("brand-mark.png") center/contain no-repeat;
}
.tabs { display: flex; gap: 2px; }
.tab {
  position: relative; background: transparent; color: var(--muted); font-weight: 500; font-size: 14.5px;
  padding: 9px 14px; border-radius: 8px;
}
.tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.tab.active { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
/* 켜진 자리 표시 — 꽉 찬 라임 알약 대신 «가는 선». 상단이 조용해야 아래 할 일이 보인다 */
.tab.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -9px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
/* 상단의 스토어 칩 — 앞에 «살아 있다»는 점 하나. 마크업은 안 건드리고 ::before 로 만든다 */
.who .pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border-color: var(--border); color: var(--text);
  padding: 5px 13px 5px 10px; font-size: 13.5px; font-weight: 500;
}
.who .pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
}
.who #who-email { font-size: 13px; }
.who .ghost { font-size: 13.5px; padding: 7px 13px; border-radius: 8px; }

/* 🔴 align-content:start 가 «반드시» 있어야 한다 (J.J 2026-08-21 · 맨 위 빈 칸의 정체)
   `.pane` 은 grid 인데, 새 껍데기가 `.app-shell[data-screen="app"]` 를 `grid-template-rows:auto 1fr`
   + `min-height:100vh` 로 만들면서 이 판이 «남는 세로»만큼 늘어나게 됐다.
   grid 의 기본 align-content 는 stretch 라, 그 남는 높이가 «줄 사이»로 흩어진다 —
   창이 길수록 머리줄이 부풀어(실측 900px→32 · 1600px→239 · 2200px→539) 편집 화면이 아래로 밀렸다.
   ⛔ 지우지 마라. `.pane-home` 이 같은 이유로 이미 이 한 줄을 들고 있다(shell.css). */
.pane { max-width: 960px; margin: 0 auto; padding: 20px; display: grid; gap: 16px; align-content: start; }
/* 🔄 2026-08-23 (J.J) — 제품편집 판만 «조금» 넓힌다(960 → 1090). 사진 한 줄에 대표 빼고 4장이
   들어가야 하는데 960 에선 3장뿐이었다. ⛔ 다른 판(목록·설정)은 그대로 둔다 — 여기만 사진 격자가 있다.
   ⚠️ 폭을 더 벌리는 대신 «타일을 조금 줄이는» 쪽으로 맞췄다(6칸) — J.J 가 정한 방향이다. */
.pane:has(#studio-root) { max-width: 1090px; }

/* 사용량 stat */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.stat-label { color: var(--muted); font-size: 12.5px; }
.stat-val { font-size: 24px; font-weight: 700; margin-top: 4px; }
.meter { height: 6px; background: var(--border); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--accent-fill); transition: width .3s; }
.meter-fill.over { background: var(--over); }

/* 테이블 */
h2 { font-size: 15px; margin: 0 0 12px; }
.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grid th, .grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.grid th { color: var(--muted); font-weight: 600; font-size: 12px; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr:last-child td { border-bottom: 0; }
.empty { color: var(--muted); font-size: 13.5px; padding: 8px 2px 0; }
.hint { color: var(--muted); font-size: 12.5px; }

/* 선택 UI */
.pane-head { display: flex; align-items: center; justify-content: space-between; }
.pane-head h2 { margin: 0; }
.sel-list { display: grid; gap: 16px; }
/* 노션에서 딥링크로 열린 제품 — 어느 카드가 그 제품인지 바로 보이게 */
.product.deeplink, .card.deeplink { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.card.deeplink h3 { margin: 0 0 6px; font-size: 15px; }
.product-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.product-head h3 { margin: 0; font-size: 15px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.photo { position: relative; cursor: pointer; border-radius: 10px; overflow: hidden; border: 2px solid var(--border); aspect-ratio: 1; }
.photo.picked { border-color: var(--accent); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; accent-color: var(--accent); }
.photo:not(.picked) img { opacity: .5; filter: grayscale(.3); }
.product-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.var { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.var-input { width: 140px; padding: 7px 10px; font-size: 14px; }
.sel-count { color: var(--muted); font-size: 13px; margin-left: auto; }

/* 제품 목록 — 푸시 → 목록 → [불러오기] → 편집.
   목업이 없는 화면이라 위 «선택 UI» 어법(card product · product-head · product-foot · pill)을 그대로 잇는다. */
.sel-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 58px; z-index: 4;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.sel-bar .sel-count { margin-left: 0; }
.p-pick { display: flex; align-items: center; }
.p-chk { width: 18px; height: 18px; accent-color: var(--accent-fill); }
.p-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); flex: none; }
.product-head h3 { min-width: 0; overflow-wrap: anywhere; }
/* 긴 제목이 들어와도 상태 알약은 안 쪼개진다 — 「푸시 / 됨」 으로 갈라져 두 줄이 됐다 */
.product-head .pill { flex: none; white-space: nowrap; }
/* 「아직 이 제품 사진을 못 가져왔어요」 처럼 **누르는 게 아니라 상태를 말하는 줄** — 서버 label 그대로 */
.p-state { color: var(--muted); font-size: 13px; }
.p-tip { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; }
/* 「누르는 동안」 — 스피너 + 단계별 말(서버 `기다림단계`). 말은 화면이 짓지 않는다 */
.p-wait { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: 13px; font-weight: 600; color: var(--text); }
.spinner.sm { width: 15px; height: 15px; border-width: 2px; flex: none; }

/* 검수 스튜디오 — 한 줄로 세운 «단계» 배치 (목업 반영 2026-08-06 · 조각 1).
   전에는 좌(본문)·우(사이드바) 2단이었다. 한 줄로 바꾼 이유: 카드마다 번호가 붙는데
   2단이면 번호가 «왼쪽 1·2·3 → 오른쪽 4·5·6» 으로 튀어서 순서로 읽히지 않는다.
   손님이 위에서 아래로 훑으며 채우는 화면이라 순서가 곧 안내다. */
/* ⚠️ `margin:0 auto` 를 뺐다 (J.J 2026-08-21 · 「레이아웃이 안 맞아»의 정체) —
   `.pane` 이 grid 라, auto 여백이 붙은 칸은 «내용만큼 줄어든다». 그래서 편집화면 본문이
   제 머리줄(목록·검토대기)보다 좌우로 16px 씩 안쪽에 서 있었다(실측 889 vs 920).
   판 폭은 `.pane`(max-width 960)이 이미 잡는다 — 여기서 또 잡을 이유가 없다. */
.studio { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: start;
  width: 100%; margin: 0; counter-reset: cardno; }
.studio-main, .studio-side { display: grid; gap: 16px; min-width: 0; }
/* 두 그릇이 각각 grid라 번호가 그릇별로 다시 세지 않도록 «펼쳐서» 같은 줄에 세운다 */
.studio-main, .studio-side { display: contents; }

/* 카드 제목줄 — 한글 제목 + 작은 영어 부제. 영어는 쇼피파이 화면에서 찾을 때의 단어다. */
.card-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.card-h h2 { margin: 0; }
.card h2.big { font-size: 17px; }
.card h2 .en { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 6px; vertical-align: baseline; }

/* 카드 앞 번호 — 몇 번째 단계인지 보이게. CSS가 자동으로 매겨서 카드를 옮겨도 안 어긋난다.
   ⚠️ 자식(>) 이 아니라 자손(공백)으로 찾는다. 위에서 .studio-main 을 display:contents 로
   펼쳤지만 그건 «배치»만 펼치고 DOM 부모는 그대로라, .studio > .card 는 하나도 안 맞는다. */
.studio .card h2.big::before {
  counter-increment: cardno; content: counter(cardno);
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; margin-right: 9px; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 1; vertical-align: 2px;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 13%, transparent);
  border: 1px solid var(--border);
}
.fld { display: block; margin-bottom: 12px; }
.fld > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.fld input[type="text"], .fld textarea, #st-tag-input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px; resize: vertical;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-weight: 500; cursor: pointer; }
.chip.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--accent); cursor: default; }
.chip.add { opacity: .75; }
.chip.add:hover { opacity: 1; border-color: var(--accent); }
.vocab summary { font-size: 12px; color: var(--muted); cursor: pointer; margin-top: 6px; }
.vocab .chips { margin-top: 8px; max-height: 190px; overflow-y: auto; }
.vt { margin-bottom: 16px; }
.vt h4 { margin: 0 0 8px; font-size: 13.5px; }
.studio-actions { display: grid; gap: 8px; }
.studio-actions button { width: 100%; }
#studio-root .spinner { margin: 40px auto; }
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
  .studio-side { position: static; }
}

/* ④ 상시 대시보드 — 차트·타일 마크업은 src/reporters/charts.js가 만든다(리포트와 같은 그림). */
.range-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.range-presets { margin-bottom: 0; }
.chip.range { cursor: pointer; padding: 6px 12px; font-size: 13px; }
.chip.range.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--accent); }
.range-custom { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; }
.range-custom input[type="date"] {
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.freshness { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--muted);
  background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 13px; }
.freshness b { color: var(--text); }
.dash { display: grid; gap: 16px; }
.dash-sec { padding: 18px 20px; }
.dash-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-head h2 { margin: 0; }
.dash-note { font-size: 12px; }
.badge { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--border); color: var(--muted); }
.badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.badge.off { color: var(--muted); }
.badge.wait { color: var(--over); border-color: color-mix(in srgb, var(--over) 45%, transparent); }
.badge.warn { color: var(--over); border-color: color-mix(in srgb, var(--over) 45%, transparent); }
.dash-sec.awaiting { opacity: .72; }

/* 타일 (charts.js statCard) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stats .stat { padding: 14px; box-shadow: none; }
.stats .stat.muted { opacity: .6; }
.stats .stat .stat-val { font-size: 21px; }
.stat-note { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
/* 당일(웹훅) 타일 — 확정값이 아니라는 것이 한눈에 보여야 한다 */
.live-strip .stat { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* 차트 (charts.js barChart) — 넓으면 2단, 좁으면 1단 (DO 확정 2026-07-23) */
/* auto-fill(auto-fit 아님): 차트가 하나뿐인 섹션에서도 칸 크기가 같아진다 —
   auto-fit이면 혼자 남은 차트가 폭 전체로 늘어나 섹션마다 눈금 크기가 달라 보인다. */
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px 18px; }
.dash .chart { margin: 0 0 16px; min-width: 0; }
.dash .chart figcaption { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dash .chart .unit { color: var(--muted); font-weight: 400; }
.dash .chart svg { width: 100%; height: auto; display: block; }
.dash .chart .grid { stroke: var(--border); stroke-width: 1; }
.dash .chart .axis { stroke: var(--border); stroke-width: 1.5; }
.dash .chart .missing { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 2 2; opacity: .5; }
.dash .chart .ytick { fill: var(--muted); font-size: 10px; text-anchor: end; }
.dash .chart .xtick { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.nodata { color: var(--muted); font-size: 13px; padding: 20px; text-align: center;
  border: 1px dashed var(--border); border-radius: 8px; }
.nodata b { color: var(--text); }

@media (max-width: 640px) {
  .range-custom { margin-left: 0; }
}

/* 토스트 */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 20;
  padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.18); color: #fff; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }

@media (max-width: 640px) {
  .stat-row { grid-template-columns: 1fr; }
  .who .muted { display: none; }
}

/* 선택본 스트립 + 크롭 */
.ratio-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; }
/* 비율 칩 (J.J 2026-08-23) — «고른 것만» 얇은 라임 테두리 + 라임 글자. 면(라임 틴트)은 걷었다.
   ⛔ 강조를 두 겹(면 + 테두리 + 글자)으로 주지 마라 — 이 줄은 «고르는 자리»지 «지금 할 일»이 아니다. */
.ratio-row .chip.ratio { background: transparent; }
.ratio-row .chip.ratio.on { background: transparent; border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent); font-weight: 700; }
/* 🔴 «요소+클래스»로 무게를 맞춘다 — `.ratio-custom` 만으로는 기본 `input` 규칙(패딩 11·글 15)에 밀려
   높이가 47px 로 섰다(실측 2026-08-24). 이 저장소가 `button.ghost vs .sec-btn` 에서 밟은 그 자리다. */
input.ratio-custom { width: 92px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; }
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.strip-item { position: relative; flex: 0 0 108px; width: 108px; border: 2px solid var(--border); border-radius: 10px;
  background-color: var(--bg); background-repeat: no-repeat; cursor: pointer; padding: 0; }
.strip-item.cropped { border-color: var(--accent); }
.strip-n { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.cropper { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 30; display: grid; place-items: center; padding: 20px; }
/* 🔴 자르기 판도 «집 색»을 쓴다 (J.J 2026-08-23 · C안).
   한때 판·선을 #16181c/#2b3038 로 «지어내고» 글자를 전부 #fff 로 박았다. 그러면 이 창만
   다른 앱처럼 보이고, 정본(`tokens.css`)이 바뀌어도 여기만 안 따라온다.
   ⭕ 판 --surface · 선 --border · 글자 --text 로 되돌리고, 「또렷하게」는 **글자 밝기 한 단계**로만 푼다.
   ⛔ 이 창 안에 색을 새로 짓지 마라. 사진 위(무대·상자·손잡이)만 흰색을 쓴다 — 거긴 사진이 바탕이라
      판 색과 상관없이 흰 선이 맞다. */
.crop-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  max-width: 560px; width: 100%; }
.crop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.crop-head .ghost { margin-left: auto; }
/* 자르기 창 (J.J 2026-08-23) — **사진은 고정, 상자가 움직인다.**
   ⛔ 확대·축소 바(.crop-zoom)는 걷었다. 상자를 끄는 판에선 배율이라는 말이 필요 없다.
   ⛔ 여백(사진보다 작게 줄이기)도 없앴다 — 상자가 사진 밖으로 못 나간다. */
.crop-stage { position: relative; line-height: 0; background: #111; border-radius: 8px; overflow: hidden;
  touch-action: none; width: 100%; height: min(58vh, 460px);
  box-shadow: inset 0 0 0 1px var(--border); }
/* 사진은 «가운데»에 두고 돌린다 — 인라인 transform 이 돌리기·뒤집기를 얹는다 */
.crop-stage .crop-img { position: absolute; left: 50%; top: 50%; display: block; max-width: none;
  transform: translate(-50%, -50%); user-select: none; -webkit-user-drag: none; }
/* 자르기 상자 — 밖은 어둡게(그림자 한 겹으로 덮는다), 안은 그대로 */
.crop-sel { position: absolute; box-sizing: border-box; cursor: move;
  border: 1px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); }
/* 삼분할 안내선 — 눈으로 «어디가 가운데인지»를 준다. 글자로 설명하지 않는다 */
.crop-grid { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px) 0 33.33% / 100% 33.34% repeat-y,
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px) 33.33% 0 / 33.34% 100% repeat-x; }
/* 손잡이 8개 — 모서리 4 + 변 4. 손가락으로도 잡히게 «보이는 것보다 크게» 잡는다 */
.crop-h { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.crop-h.nw { left: -7px; top: -7px; cursor: nwse-resize; }
.crop-h.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.crop-h.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-h.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.crop-h.n { left: 50%; top: -7px; margin-left: -7px; cursor: ns-resize; }
.crop-h.s { left: 50%; bottom: -7px; margin-left: -7px; cursor: ns-resize; }
.crop-h.w { top: 50%; left: -7px; margin-top: -7px; cursor: ew-resize; }
.crop-h.e { top: 50%; right: -7px; margin-top: -7px; cursor: ew-resize; }
/* 글자는 «한 단계 밝게» — 집 기준(--muted)보다 또렷한 --text 로. 손님 중에 50대가 많다.
   ⛔ #fff 를 박지 않는다. 라이트 판에서 흰 글자는 통째로 사라진다(실측으로 밟은 자리). */
.crop-box .ghost, .crop-box .crop-head b { color: var(--text); font-weight: 600; }
.crop-box .ghost { border-color: var(--border); background: transparent; }
.crop-box .ghost:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.crop-box .crop-say { color: var(--tx2); }
.crop-box .crop-head .muted { color: var(--muted); }

/* 비율 칩 — 한 줄. 모서리는 집 기준 9px(알약 아님) */
.crop-ratios { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.crop-ratios .ratio-c { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.crop-ratios .ratio-c.on { color: var(--accent); border-color: var(--accent); background: var(--now-bg); }
.crop-ratios .ratio-c i { font-style: normal; font-size: 10.5px; color: var(--muted); margin-left: 5px; }
/* 🔴 «올리면 바로» 뜨는 쪽지 (J.J 2026-08-23). 브라우저 기본 title 은 1초쯤 기다려야 뜨고
   안 뜨기도 한다 — 그림만 있는 단추에서는 그게 곧 「뜻을 알 길이 없다」가 된다.
   ⛔ title 과 같이 쓰지 마라(두 개 뜬다). 읽어 주는 이름은 aria-label 이 맡는다. */
.쪽지 { position: relative; }
.쪽지::after { content: attr(data-쪽지); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 600; background: var(--tx); color: var(--card);
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.쪽지:hover::after, .쪽지:focus-visible::after { opacity: 1; }

/* 돌리기·반전 — **그림만**. 뜻은 마우스를 올렸을 때 뜬다 (J.J 재검수: 단추가 너무 많아 보인다)
   ⚠️ 글자가 없으니 그림을 «크고 또렷하게». 작은 회색 화살표로 두면 50대 손님 눈에 안 들어온다. */
.crop-turns { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.crop-turns .ghost { width: 34px; height: 34px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
/* 아래 줄 — 곁말(왼쪽) · 손잡이 묶음(오른쪽). 높이를 맞춰 «한 줄»로 읽히게 한다 (J.J ⑤) */
.crop-ctl { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  border-top: 1px solid var(--border); padding-top: 12px; }
.crop-say { flex: 1; font-size: 12.5px; line-height: 1.5; }
.crop-acts { display: inline-flex; align-items: center; gap: 8px; }
.crop-acts .ghost, .crop-acts .crop-ok { height: 34px; padding: 0 16px; font-size: 13px;
  display: inline-flex; align-items: center; border-radius: 9px; }
/* 「최대로 잡기」는 그림 줄로 올라갔다 (J.J 2026-08-23) — 아래줄엔 «원래대로 · 적용»만 남는다.
   ⛔ `.crop-max`·`.crop-why` 는 걷었다. 되살리지 마라 — 열면 이미 최대라 기본 화면에선 할 일이 없는 단추다. */
.crop-sep { width: 1px; height: 20px; background: var(--line-c); margin: 0 3px; }
/* 「적용」 = **핵심 단추**다 (J.J 2026-08-23 · C안). 정본 문서가 「핵심 버튼」을 라임이 들어가는
   여섯 자리 중 하나로 못박아 뒀다 — 속 빈 흰 알약은 그 규칙 밖이었다. */
.crop-ok { background: var(--accent-fill); color: var(--accent-ink); border: 0; font-weight: 700; font-size: 14px; }
.crop-ok:hover { filter: brightness(1.06); }

/* 「새 줄 적기」 — ＋ 글자 대신 줄그림(J.J 2026-08-23 · 추가정보). 글자와 가운데를 맞춘다 */
.tb-addbtn { display: inline-flex; align-items: center; gap: 6px; }
.tb-addbtn svg { flex: none; }

/* 옵션 이름 대소문자 — 작은 두 칸. 늘 대문자가 맞지는 않아서 되돌릴 길을 둔다 (J.J 2026-08-23) */
.opt-cases { display: inline-flex; gap: 4px; }
.opt-cases .opt-case { padding: 7px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* ── ⓪ 온보딩 폼 (Phase A) ────────────────────────────── */
.onb-intro { margin: 2px 0 18px; }
.onb-form { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.onb-q > label { display: block; font-weight: 600; font-size: 14.5px; }
.onb-q .req { color: var(--err); }
.onb-q .opt { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.onb-help { margin: 4px 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.onb-q input, .onb-q textarea { width: 100%; box-sizing: border-box; }
.onb-cardintro { margin: 2px 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.onb-fence { margin: 2px 0 8px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--over) 12%, transparent); color: var(--over);
  border: 1px solid color-mix(in srgb, var(--over) 32%, transparent); }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.opt-card { display: flex; flex-direction: column; gap: 5px; text-align: left; align-items: stretch;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); font-weight: 400; cursor: pointer; }
.opt-card:hover { border-color: var(--accent); }
.opt-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.oc-name { font-weight: 600; font-size: 14px; }
.oc-line { font-size: 12px; color: var(--muted); line-height: 1.45; }
.oc-fit { color: var(--ok); }
.oc-risk { color: var(--over); }
.onb-multi, .onb-single { display: flex; flex-wrap: wrap; gap: 7px; }
.onb-multi .chip, .onb-single .chip { cursor: pointer; padding: 6px 12px; font-size: 13px; }
.onb-actions { margin-top: 4px; }
.onb-done { max-width: 560px; }
/* ㊼-c 단계 재시도 표기 — 되돌림은 감추지 않고 다르게 보인다 */
.onb-step .retry { font-size: 11px; color: var(--over); margin-left: 6px; }
.onb-step .s4-open { background: transparent; color: var(--accent); border: 0; padding: 0 0 0 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.onb-step .s4-open:hover { text-decoration: underline; }
/* 단계 링크(예: 「제안 패키지 보기」) — 맨 <a>면 브라우저 기본 #0000EE+밑줄이라 다크에서 취소선처럼 깨져 보인다.
   테마 색으로 통일한다(진단 보기 버튼과 같은 accent). 「노션에서 확정」(.muted)은 회색 유지. */
.onb-step a { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; padding-left: 6px; }
.onb-step a:hover { text-decoration: underline; }
.onb-step a.muted { color: var(--muted); font-weight: 500; }

/* ───────────────────────── ㊼-3 화면4 — 포털 내부 진단 뷰 (자립·라이트/다크) ───────────────────────── */
.s4-overlay { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; }
.s4 {
  --s4-plane:#f9f9f7; --s4-surface:#fcfcfb; --s4-ink:#0b0b0b; --s4-ink2:#52514e; --s4-muted:#898781;
  --s4-grid:#e1e0d9; --s4-axis:#c3c2b7; --s4-ring:rgba(11,11,11,.10);
  --s4-s1:#2a78d6; --s4-s2:#eb6834; --s4-s3:#1baf7a; --s4-f1:#86b6ef; --s4-f2:#2a78d6; --s4-f3:#1c5cab; --s4-f4:#104281;
  --s4-good:#0ca30c; --s4-warn:#fab219; --s4-serious:#ec835a; --s4-crit:#d03b3b; --s4-up:#006300;
  min-height:100vh; background:var(--s4-plane); color:var(--s4-ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: dark) { .s4:where(:not([data-s4theme="light"])) {
  --s4-plane:#0d0d0d; --s4-surface:#1a1a19; --s4-ink:#fff; --s4-ink2:#c3c2b7; --s4-muted:#898781;
  --s4-grid:#2c2c2a; --s4-axis:#383835; --s4-ring:rgba(255,255,255,.10);
  --s4-s1:#3987e5; --s4-s2:#d95926; --s4-s3:#199e70; --s4-f1:#cde2fb; --s4-f2:#9ec5f4; --s4-f3:#3987e5; --s4-f4:#184f95; --s4-serious:#ec835a; --s4-up:#0ca30c;
} }
.s4[data-s4theme="dark"] {
  --s4-plane:#0d0d0d; --s4-surface:#1a1a19; --s4-ink:#fff; --s4-ink2:#c3c2b7; --s4-muted:#898781;
  --s4-grid:#2c2c2a; --s4-axis:#383835; --s4-ring:rgba(255,255,255,.10);
  --s4-s1:#3987e5; --s4-s2:#d95926; --s4-s3:#199e70; --s4-f1:#cde2fb; --s4-f2:#9ec5f4; --s4-f3:#3987e5; --s4-f4:#184f95; --s4-serious:#ec835a; --s4-up:#0ca30c;
}
.s4-wrap { max-width: 1060px; margin: 0 auto; padding: 22px 20px 90px; }
.s4-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--s4-ring); margin-bottom:20px; }
.s4-head h1 { margin:0; font-size:22px; font-weight:650; letter-spacing:-0.01em; color:var(--s4-ink); }
.s4-head .sub { color:var(--s4-muted); font-size:13px; margin-top:4px; }
.s4-tools { display:flex; gap:8px; }
.s4-btn { background:var(--s4-surface); border:1px solid var(--s4-ring); color:var(--s4-ink2); border-radius:8px;
  padding:7px 13px; font-size:13px; font-weight:500; cursor:pointer; }
.s4-btn:hover { color:var(--s4-ink); border-color:var(--s4-axis); }
.s4 h2 { margin:0 0 3px; font-size:16px; font-weight:620; letter-spacing:-0.01em; color:var(--s4-ink); }
.s4-card { background:var(--s4-surface); border:1px solid var(--s4-ring); border-radius:16px; padding:20px 22px; margin-bottom:14px; }
.s4-note { color:var(--s4-muted); font-size:12.5px; margin:2px 0 16px; max-width:82ch; }
.s4-after { font-size:13px; color:var(--s4-ink2); margin-top:12px; }
/* ── 블록9 dataviz 유틸 — 상태색은 «아이콘+라벨»과 함께만 뜻을 진다(색만으론 라이트 warning/serious 대비 미달) ── */
.s4-ico { width:13px; height:13px; vertical-align:-2px; margin-right:4px; }
.s4-flag { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:560; padding:2px 8px; border-radius:7px; }
.s4-flag::before { content:""; width:8px; height:8px; border-radius:2px; flex:none; }
.s4-flag.good { color:var(--s4-good); background:color-mix(in srgb,var(--s4-good) 12%,transparent); }
.s4-flag.good::before { background:var(--s4-good); }
.s4-flag.warning { color:var(--s4-ink2); background:color-mix(in srgb,var(--s4-warn) 20%,transparent); }
.s4-flag.warning::before { background:var(--s4-warn); }
.s4-flag.serious { color:var(--s4-serious); background:color-mix(in srgb,var(--s4-serious) 14%,transparent); }
.s4-flag.serious::before { background:var(--s4-serious); }
.s4-flag.critical { color:var(--s4-crit); background:color-mix(in srgb,var(--s4-crit) 14%,transparent); }
.s4-flag.critical::before { background:var(--s4-crit); }
.s4-tagp { font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:1px 5px; border-radius:4px; color:var(--s4-s2); border:1px solid color-mix(in srgb,var(--s4-s2) 45%,transparent); vertical-align:1px; }
.s4-dim { color:var(--s4-muted); }
td.s4-dim, th.s4-dim { font-size:12px; }
/* 방향 화살표 — 좋음/나쁨을 색만이 아니라 기호로도 */
.s4-dir { font-weight:700; margin-right:3px; }
.s4-dir.up { color:var(--s4-good); }
.s4-dir.down { color:var(--s4-crit); }
.s4-dir.flat { color:var(--s4-muted); }
.s4-base { font-size:10.5px; font-weight:500; color:var(--s4-muted); margin-left:5px; padding:1px 5px; border:1px solid var(--s4-ring); border-radius:5px; }
/* 블록10 — 막힌 곳 4칸 카드 */
.s4-block { border:1px solid var(--s4-ring); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:var(--s4-plane); }
.s4-blockhd { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14.5px; }
.s4-4 { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.s4-4c { font-size:13px; color:var(--s4-ink2); line-height:1.5; }
.s4-4k { font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--s4-muted); text-transform:none; margin-bottom:2px; }
.s4-4do { margin:0; padding-left:16px; }
.s4-4do li { margin:1px 0; }
@media (max-width:560px){ .s4-4 { grid-template-columns:1fr; } }
/* 접기 — 표/자세히 뷰. 기본 닫힘, 접힌 양을 summary에 표기 */
.s4-fold { margin-top:10px; border:1px solid var(--s4-ring); border-radius:10px; padding:0 14px; }
.s4-fold > summary { cursor:pointer; padding:11px 2px; font-size:13px; font-weight:560; color:var(--s4-ink2); list-style:none; display:flex; align-items:center; gap:7px; }
.s4-fold > summary::-webkit-details-marker { display:none; }
.s4-fold > summary::before { content:"▸"; color:var(--s4-muted); font-size:11px; transition:transform .15s; }
.s4-fold[open] > summary::before { transform:rotate(90deg); }
.s4-fold[open] > summary { border-bottom:1px solid var(--s4-ring); margin-bottom:12px; }
.s4-fold > *:last-child { padding-bottom:14px; }
/* 표 앞 미니 막대(가로) */
.s4-hrow { display:grid; grid-template-columns:110px 1fr 52px; align-items:center; gap:12px; padding:3px 0; }
.s4-hlab { font-size:12.5px; color:var(--s4-ink2); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s4-htrack { height:16px; background:color-mix(in srgb,var(--s4-ink) 4%,transparent); border-radius:4px; }
.s4-hfill { height:100%; border-radius:0 4px 4px 0; min-width:2px; }
.s4-hval { font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--s4-ink); font-weight:560; }
.s4-hfill.dashed { background:transparent; border:1px dashed var(--s4-axis); border-radius:4px; }
/* 연간 격자 카드(모바일 접힘) */
.s4-gridcards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.s4-gcard { border:1px solid var(--s4-ring); border-radius:9px; padding:9px 11px; background:var(--s4-plane); }
.s4-gcard.un { border-style:dashed; opacity:.72; }
.s4-gcardh { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:3px; }
@media (max-width:560px){ .s4-gridcards { grid-template-columns:1fr; } }
/* 표본 하한 미달 행 — 회색으로 눕힌다(판정하지 않음) */
tr.s4-mute td { color:var(--s4-muted); font-style:italic; }
tr.s4-mute b { font-weight:500; color:var(--s4-muted); }
/* 성장 단계 */
.s4-stage { background:var(--s4-surface); border:1px solid var(--s4-ring); border-radius:16px; padding:20px 24px; margin-bottom:14px; }
.s4-stagetop { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.s4-badge { font-size:12px; font-weight:700; letter-spacing:.06em; padding:5px 12px; border-radius:999px; background:var(--s4-s1); color:#fff; }
.s4-stagename { font-size:18px; font-weight:640; letter-spacing:-0.01em; }
.s4-steps { display:flex; gap:6px; margin:14px 0 4px; }
.s4-step2 { flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--s4-ring); background:var(--s4-plane); font-size:12.5px; color:var(--s4-muted); }
.s4-step2.on { background:color-mix(in srgb,var(--s4-s1) 12%,var(--s4-surface)); border-color:var(--s4-s1); color:var(--s4-ink); }
.s4-step2 b { display:block; font-size:13px; margin-bottom:2px; font-weight:620; }
/* 판정 */
.s4-verdict { background:var(--s4-surface); border:1px solid var(--s4-ring); border-radius:16px; padding:24px 26px; margin-bottom:14px; position:relative; overflow:hidden; }
.s4-verdict::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--s4-crit); }
.s4-vlabel { font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--s4-muted); font-weight:600; }
.s4-vmain { font-size:24px; font-weight:660; letter-spacing:-0.02em; margin:9px 0 8px; line-height:1.3; }
.s4-vsub { color:var(--s4-ink2); font-size:14.5px; max-width:78ch; }
/* 타일 */
.s4-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.s4-tile { background:var(--s4-plane); border:1px solid var(--s4-ring); border-radius:14px; padding:14px 16px; }
.s4-tk { font-size:12.5px; color:var(--s4-muted); font-weight:550; }
.s4-tv { font-size:24px; font-weight:660; letter-spacing:-0.02em; margin-top:5px; line-height:1.1; }
.s4-tv.sm { font-size:16px; color:var(--s4-muted); font-weight:600; }
.s4-td { font-size:12px; margin-top:5px; color:var(--s4-ink2); }
.s4 .dn { color:var(--s4-crit); } .s4 .dup { color:var(--s4-up); }
/* 역산 */
.s4-calc { display:flex; align-items:center; gap:0; flex-wrap:wrap; margin:4px 0 16px; }
.s4-cstep { background:var(--s4-plane); border:1px solid var(--s4-ring); border-radius:11px; padding:11px 15px; text-align:center; min-width:104px; }
.s4-cl { font-size:11.5px; color:var(--s4-muted); } .s4-cv { font-size:18px; font-weight:660; margin-top:2px; }
.s4-cop { padding:0 10px; color:var(--s4-muted); font-size:15px; font-weight:600; }
.s4-gapbar { height:32px; background:color-mix(in srgb,var(--s4-ink) 5%,transparent); border-radius:6px; position:relative; margin-top:6px; overflow:hidden; }
.s4-gapfill { height:100%; background:var(--s4-crit); border-radius:6px 3px 3px 6px; min-width:4px; }
.s4-gaplbl { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:650; }
/* 퍼널 바 */
.s4-fun { display:flex; flex-direction:column; gap:3px; }
.s4-frow { display:grid; grid-template-columns:132px 1fr 62px; align-items:center; gap:14px; padding:4px 0; border-radius:8px; }
.s4-fname { font-size:13px; color:var(--s4-ink2); text-align:right; }
.s4-ftrack { height:26px; background:color-mix(in srgb,var(--s4-ink) 4%,transparent); border-radius:4px; }
.s4-fbar { height:100%; border-radius:0 4px 4px 0; position:relative; min-width:3px; }
.s4-fval { font-size:13px; font-variant-numeric:tabular-nums; color:var(--s4-ink); font-weight:560; }
.s4-fpass { position:absolute; left:calc(100% + 9px); top:50%; transform:translateY(-50%); font-size:12px; font-weight:620; color:var(--s4-ink2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.s4-fpass.in { left:auto; right:9px; color:#fff; }
/* 차트 공통 */
.s4 svg { display:block; overflow:visible; max-width:100%; }
.s4 .tick { font-size:11px; fill:var(--s4-muted); }
.s4 .lbl { font-size:12px; fill:var(--s4-ink2); }
.s4 .vlbl { font-size:11.5px; fill:var(--s4-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.s4-legend { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; font-size:12.5px; color:var(--s4-ink2); }
.s4-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.s4-cap { font-size:12.5px; color:var(--s4-muted); margin-bottom:9px; }
.s4-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px) { .s4-grid2 { grid-template-columns:1fr; } }
/* 표 */
.s4-xt { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.s4-xt th, .s4-xt td { padding:8px 10px; border-bottom:1px solid var(--s4-ring); text-align:right; }
.s4-xt th:first-child, .s4-xt td:first-child, .s4-xt th:nth-child(2), .s4-xt td:nth-child(2) { text-align:left; }
.s4-xt th { color:var(--s4-muted); font-weight:600; font-size:12px; }
.s4-xt .hi { background:color-mix(in srgb,var(--s4-crit) 9%,transparent); }
.s4-xt .lo { background:color-mix(in srgb,var(--s4-good) 9%,transparent); }
.s4-pill { font-size:11px; font-weight:650; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.s4-pill.b { background:color-mix(in srgb,var(--s4-crit) 16%,transparent); color:var(--s4-crit); }
.s4-pill.g { background:color-mix(in srgb,var(--s4-good) 16%,transparent); color:var(--s4-up); }
.s4-pill.w { background:color-mix(in srgb,var(--s4-warn) 22%,transparent); color:var(--s4-ink2); }
/* ROAS 2종 */
.s4-roas { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .s4-roas { grid-template-columns:1fr; } }
.s4-roasbox { border:1px solid var(--s4-ring); border-radius:12px; padding:14px 16px; background:var(--s4-plane); }
.s4-roasbox .rlabel { font-size:12px; font-weight:650; color:var(--s4-ink2); }
.s4-roasbox .rval { font-size:26px; font-weight:660; margin:5px 0 4px; letter-spacing:-0.02em; }
.s4-roasbox .rnote { font-size:12px; color:var(--s4-muted); }
.s4-roasbox.nullish .rval { color:var(--s4-muted); }
/* 진단·처방 */
.s4-diag { border-left:3px solid var(--s4-s1); padding-left:16px; margin:4px 0 18px; }
.s4-diag p { margin:0 0 10px; font-size:14.5px; } .s4-diag p:last-child { margin-bottom:0; }
.s4-rx { display:grid; gap:9px; }
.s4-rxi { display:flex; gap:11px; align-items:flex-start; background:var(--s4-plane); border:1px solid var(--s4-ring); border-radius:11px; padding:12px 14px; }
.s4-rxn { flex:none; width:21px; height:21px; border-radius:6px; background:var(--s4-s1); color:#fff; font-size:12px; font-weight:650; display:grid; place-items:center; margin-top:1px; }
.s4-rxt { font-size:14px; } .s4-rxt .src { display:block; font-size:11.5px; color:var(--s4-muted); margin-top:3px; }
.s4-sev { font-size:11px; font-weight:650; padding:1px 7px; border-radius:5px; margin-right:6px; }
.s4-sev.high { background:color-mix(in srgb,var(--s4-crit) 16%,transparent); color:var(--s4-crit); }
.s4-sev.mid { background:color-mix(in srgb,var(--s4-warn) 22%,transparent); color:var(--s4-ink2); }
.s4-sev.low { background:color-mix(in srgb,var(--s4-muted) 18%,transparent); color:var(--s4-muted); }
/* 미수집 */
.s4-miss { background:color-mix(in srgb,var(--s4-muted) 9%,var(--s4-surface)); border:1px dashed var(--s4-axis); border-radius:14px; padding:16px 20px; font-size:13px; color:var(--s4-ink2); }
.s4-miss h3 { margin:0 0 9px; font-size:13.5px; color:var(--s4-ink); font-weight:620; }
.s4-miss li { margin-bottom:6px; }
.s4-miss .conn { color:var(--s4-s1); font-weight:600; }
.s4 code { font-size:12px; background:color-mix(in srgb,var(--s4-ink) 6%,transparent); padding:1px 5px; border-radius:4px; }
.s4-tip { position:fixed; pointer-events:none; opacity:0; transition:opacity .12s; background:var(--s4-ink); color:var(--s4-plane); font-size:12.5px; padding:7px 10px; border-radius:8px; z-index:99; white-space:nowrap; font-variant-numeric:tabular-nums; box-shadow:0 4px 16px rgba(0,0,0,.18); }

/* ── §3-2 브랜드 코어 «보이는 물건» 오버레이 ─────────────────────── */
#core-overlay { position:fixed; inset:0; z-index:120; background:var(--s4-plane,#f9f9f7); overflow-y:auto; -webkit-overflow-scrolling:touch; }
#core-overlay[hidden] { display:none; }
.core-wrap { max-width:920px; margin:0 auto; padding:56px 28px 80px; color:var(--s4-ink,#0b0b0b); }
.core-load { padding:80px 0; text-align:center; color:var(--s4-muted,#898781); }
.core-eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--s4-muted,#898781); font-weight:700; margin-bottom:12px; }
.core-pos { font-size:32px; line-height:1.22; font-weight:800; margin:0 0 14px; letter-spacing:-.01em; }
.core-tag { font-size:18px; font-style:italic; color:var(--s4-ink2,#52514e); margin-bottom:10px; }
.core-target { font-size:14px; color:var(--s4-muted,#898781); margin:0 0 26px; max-width:640px; }
.core-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:8px; }
.core-grid section { border:1px solid var(--s4-axis,#e3e2de); border-radius:14px; padding:18px 18px 20px; }
.core-grid h2 { font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--s4-muted,#898781); margin:0 0 12px; font-weight:700; }
.core-swatches { display:flex; gap:14px; flex-wrap:wrap; }
.core-sw { text-align:center; }
.core-chip { width:74px; height:74px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.core-hex { font-size:11px; color:var(--s4-muted,#898781); margin-top:6px; line-height:1.4; }
.core-fonts { display:flex; flex-direction:column; gap:16px; }
.core-font-lab { font-size:11px; color:var(--s4-muted,#898781); margin-bottom:4px; }
.core-font-sample { line-height:1.25; overflow-wrap:anywhere; }
.core-tone { font-size:14px; line-height:1.6; margin:0 0 8px; }
.core-ul { margin:6px 0 0; padding-left:18px; font-size:13px; line-height:1.7; }
.core-forbid { grid-column:1/-1; }
.core-forbid h2 { color:var(--s4-crit,#d03b3b); }
.core-miss { font-size:13px; color:var(--s4-muted,#898781); font-style:italic; margin:0; }
.core-foot { margin-top:30px; font-size:12px; color:var(--s4-muted,#898781); border-top:1px solid var(--s4-axis,#e3e2de); padding-top:14px; }
@media (prefers-color-scheme: dark) {
  #core-overlay { background:#0d0d0d; }
  .core-wrap, .core-pos { color:#f2f2f0; }
  .core-tag { color:#cbcac5; }
  .core-eyebrow, .core-target, .core-hex, .core-font-lab, .core-miss, .core-foot, .core-grid h2 { color:#9a9a95; }
  .core-grid section { border-color:#2c2c2a; }
  .core-foot { border-top-color:#2c2c2a; }
  .core-chip { box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
}

/* ── §12-4 3층 지도 + ① 한 문장 (진단 화면 재배치) ─────────────── */
.s4-lede{ font-size:22px; line-height:1.45; font-weight:650; margin:0; letter-spacing:-.01em; color:var(--s4-ink); }
.s4-ledecard{ border-left:3px solid var(--s4-s1); }
.s4-lmap{ margin-top:4px; }
.s4-lband{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:18px 0 9px; }
.s4-lband:first-child{ margin-top:2px; }
.s4-lt{ font-size:13.5px; font-weight:600; color:var(--s4-ink); }
.s4-lw{ font-size:11.5px; color:var(--s4-muted); white-space:nowrap; }
.s4-lrow{ display:grid; grid-template-columns:112px 1fr 54px 58px; gap:10px; align-items:center; margin-bottom:6px; }
.s4-llab{ font-size:12.5px; color:var(--s4-ink2); text-align:right; overflow-wrap:anywhere; }
.s4-ltrack{ position:relative; height:22px; background:color-mix(in srgb,var(--s4-muted) 14%,transparent); border-radius:5px; overflow:hidden; }
.s4-ltrack.dotted{ background:transparent; border:1px dashed var(--s4-axis); }
.s4-lfill{ position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb,var(--s4-muted) 60%,transparent); border-radius:5px; min-width:3px; }
.s4-lfill.bn{ background:var(--s4-crit); }
.s4-lfill.miss{ background:transparent; min-width:0; }
.s4-lnum{ font-size:13.5px; font-weight:650; font-variant-numeric:tabular-nums; color:var(--s4-ink); text-align:right; }
.s4-lnum.bn{ color:var(--s4-crit); }
.s4-lnum.miss{ font-size:10.5px; font-weight:500; color:var(--s4-muted); }
.s4-lpct{ font-size:11.5px; color:var(--s4-muted); font-variant-numeric:tabular-nums; }
.s4-ldrop{ font-size:12px; color:var(--s4-muted); margin:-1px 0 6px 122px; line-height:1.5; }
.s4-ldrop.bad{ color:var(--s4-crit); font-weight:600; }
/* ★ 블록24 §3 — 경보 라벨: 색(crit)+아이콘+라벨을 «한 덩이»로. 경보는 이 패턴만 쓴다(핵심 수치·메타와 구분). */
.s4-alarm-lab{ display:inline-block; font-weight:800; color:var(--s4-crit); background:color-mix(in srgb,var(--s4-crit) 12%,transparent); border-radius:5px; padding:0 6px; margin-right:5px; }
.s4-ljoint{ border-left:2px dashed var(--s4-axis); margin:8px 0 6px 122px; padding:5px 0 5px 12px; font-size:12px; color:var(--s4-muted); line-height:1.55; }
@media(max-width:760px){
  .s4-lrow{ grid-template-columns:78px 1fr 46px; }
  .s4-lpct{ display:none; }
  .s4-ldrop,.s4-ljoint{ margin-left:88px; }
  .s4-lede{ font-size:19px; }
}

/* ── 블록7 모집단 띠 ─────────────────────── */
.s4-bands{ border:1px dashed var(--s4-axis); border-radius:10px; padding:10px 12px; margin:8px 0 12px; }
.s4-bandsn{ font-size:11.5px; color:var(--s4-muted); margin-bottom:6px; }
.s4-band2{ font-size:13px; margin:3px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.s4-b2t{ font-weight:700; min-width:34px; color:var(--s4-ink2); }
.s4-b2s{ color:var(--s4-ink2); }
.s4-b2m{ color:var(--s4-muted); font-size:12px; }
/* ★ 블록24 §3 — 색 역할 분리. 핵심 수치(★사람·★유효)는 «중요»지 «나쁨»이 아니다 — 경보색(crit) 대신 굵기·크기로. 경보색은 병목(s4-ldrop.bad)만 쓴다. */
.s4-b2h{ font-weight:800; font-size:1.06em; color:var(--s4-ink); }

/* ══ 블록39 — 남에게 보여주는 물건(인쇄·PDF). 표지 + 출처 부록 + @media print ══ */
/* 표지·부록은 화면에서도 보이되, 인쇄에서 「첫 장/마지막 장」으로 배치된다. */
.s4-cover{ display:none; } /* 표지는 인쇄에서만 편다(화면은 스크롤 문서라 불필요) */
.s4-appendix{ margin-top:22px; }
.s4-cover-inner{ border:1px solid var(--s4-ring); border-radius:14px; padding:44px 40px; max-width:640px; }
.s4-cover h1{ font-size:30px; font-weight:680; letter-spacing:-.02em; margin:0 0 2px; color:var(--s4-ink); }
.s4-cover .s4-cover-sub{ font-size:15px; color:var(--s4-muted); margin-bottom:26px; }
.s4-cover-meta{ font-size:14px; line-height:1.9; color:var(--s4-ink2); }
.s4-cover-meta b{ color:var(--s4-ink); font-weight:620; }
.s4-cover-verdict{ margin-top:26px; padding-top:20px; border-top:1px solid var(--s4-ring); font-size:19px; font-weight:640; color:var(--s4-ink); letter-spacing:-.01em; }
.s4-cover-verdict .sub{ display:block; margin-top:6px; font-size:14px; font-weight:440; color:var(--s4-ink2); }
.s4-apx-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:10px; }
.s4-apx-table th, .s4-apx-table td{ text-align:left; padding:7px 9px; border-bottom:1px solid var(--s4-ring); vertical-align:top; }
.s4-apx-table th{ font-weight:620; color:var(--s4-ink2); font-size:11.5px; }
.s4-apx-table td{ color:var(--s4-ink2); }
.s4-apx-table .num{ font-weight:640; color:var(--s4-ink); white-space:nowrap; }
.s4-apx-table .warn{ color:var(--s4-warn); font-weight:560; }
.s4-apx-missing{ margin-top:14px; border-left:3px solid var(--s4-axis); padding-left:12px; font-size:12.5px; color:var(--s4-ink2); }
.s4-apx-missing b{ color:var(--s4-ink); }

/* ══ 블록40 — 드릴다운 ①②③. 지도 목차 칩 → 상세로. 새 색 안 만든다(막힘=crit·나머지 중립). ══ */
.s4-drill-toc{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 2px; }
.s4-drill-lab{ font-size:12px; color:var(--s4-muted); }
.s4-drill-chip{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; border:1px solid var(--s4-ring); border-radius:20px; padding:5px 12px; font-size:13px; color:var(--s4-ink2); background:var(--s4-surface); }
.s4-drill-chip:hover{ border-color:var(--s4-axis); color:var(--s4-ink); }
.s4-drill-chip:focus-visible{ outline:2px solid var(--s4-s1); outline-offset:2px; }
.s4-drill-n{ font-weight:700; color:var(--s4-ink); }
.s4-drill-v{ font-size:11.5px; color:var(--s4-muted); }
.s4-drill-chip.bad{ border-color:var(--s4-crit); }
.s4-drill-chip.bad .s4-drill-v{ color:var(--s4-crit); font-weight:600; }
.s4-drill-badge{ font-weight:700; color:var(--s4-ink); }
.s4-drill-back{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--s4-muted); text-decoration:none; }
.s4-drill-back:hover{ color:var(--s4-ink2); }
.s4-drill-back:focus-visible{ outline:2px solid var(--s4-s1); outline-offset:2px; }
/* 도착 강조 — 테두리 한 줄, 짧게(색 반짝임 아님). scroll-margin으로 도착 지점이 안 가린다(모바일 포함). */
[id^="drill-"]{ scroll-margin-top:14px; }
.s4-card.s4-arrived{ box-shadow:0 0 0 2px var(--s4-s1); transition:box-shadow .2s; outline:none; }

@media print {
  /* 드릴다운은 인쇄본에서 «번호로» 잇는다(클릭 없음). 상세 절 머리에 같은 번호(①②③)가 있어 번호로 찾는다.
     ※ 정확한 쪽 번호(target-counter)는 Chrome 인쇄 엔진이 «미지원»이라 렌더 안 됨(실측 확인) — 번호 참조로 잇는다. */
  .s4-drill-back{ display:none !important; }
  .s4-drill-toc{ display:block; margin:8px 0; }
  .s4-drill-lab::after{ content:" — 아래 같은 번호(①②③)가 붙은 절에서 자세히 봅니다"; }
  .s4-drill-chip{ display:inline-block; border:1px solid #999 !important; background:none !important; margin:2px 4px 2px 0; color:#000 !important; }
  .s4-card.s4-arrived{ box-shadow:none; }
  /* 흑백에서도 읽히게: 화면 다크/색 배경을 흰 바탕·검정 글자로 되돌린다(색은 강조에만) */
  .s4, .s4[data-s4theme]{ --s4-plane:#fff; --s4-surface:#fff; --s4-ink:#000; --s4-ink2:#1c1c1c; --s4-muted:#555; --s4-ring:#ccc; --s4-axis:#999; }
  html, body, .s4{ background:#fff !important; color:#000 !important; }
  @page{ size:A4; margin:14mm 13mm 16mm; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  p, li, .s4-note, .s4-card{ orphans:3; widows:3; } /* 페이지 끝/시작에 한 줄만 남지 않게 */
  /* #2 토글·버튼·오버레이·툴팁 숨김 */
  .s4-tools, .s4-btn, .s4-tip, .s4-no-print, [data-s4-theme], [data-s4-close]{ display:none !important; }
  /* #1 접기 전부 펼침 — 인쇄본엔 「자세히 보기」가 없다 */
  details.s4-fold > summary{ display:none !important; }
  details.s4-fold > *:not(summary){ display:revert !important; }
  /* 표지 = 첫 장, 그다음 페이지 나눔 */
  .s4-cover{ display:flex !important; align-items:center; justify-content:center; min-height:88vh; break-after:page; }
  /* #4 그림만 안 잘리게. ★ 블록40 0-2 — 섹션 «전부»에 걸던 break-before:page를 뺐다: 섹션 내용이 페이지 경계와
     안 맞으면 한 줄짜리 빈 페이지(widow)가 생겼다(블록39 p12). 이제 표지·부록만 나누고 본문은 흐르게 둔다. */
  .s4-secq{ break-after:avoid; } /* 섹션 제목이 페이지 끝에 홀로 남지 않게(제목만 걸리는 것 방지) */
  .s4-fig, .s4-hrow, .s4 svg, .s4-apx-table tr, .s4-cover-inner{ break-inside:avoid; }
  .s4-card > h2{ break-after:avoid; } /* 제목이 페이지 끝에 홀로 남지 않게 */
  .s4-appendix{ break-before:page; }
  /* #6 링크는 텍스트로(파란 밑줄 무의미) */
  .s4 a{ color:#000 !important; text-decoration:none !important; }
  /* 화면 폭 제약 해제 */
  .s4-wrap{ max-width:none; padding:0; }
}

/* ══ 블록41 관문20 — 「멈춤」이 보이는 그림(small multiples). 앞/뒤 다른 색·흑백 무늬·바뀜 세로선. ══ */
.s4-trrow{ margin:8px 0; }
.s4-trhead{ font-size:12px; margin-bottom:3px; }
.s4-trplot{ position:relative; display:flex; align-items:flex-end; gap:1px; border-bottom:1px solid var(--s4-axis); }
.s4-trbar{ flex:1 1 0; min-width:0; border-radius:1px 1px 0 0; }
.s4-tr-a{ background:#2a78d6; }   /* 바뀜 전 — 파랑 */
.s4-tr-b{ background:#eb6834; }   /* 바뀜 후 — 주황 */
.s4-trline{ position:absolute; top:-2px; bottom:0; width:0; border-left:1.5px dashed var(--s4-ink2); }
.s4-trline span{ position:absolute; top:-2px; left:3px; font-size:9.5px; color:var(--s4-ink2); white-space:nowrap; }
@media (prefers-color-scheme: dark){ .s4:where(:not([data-s4theme="light"])) .s4-tr-a{ background:#3987e5; } .s4:where(:not([data-s4theme="light"])) .s4-tr-b{ background:#d95926; } }
.s4[data-s4theme="dark"] .s4-tr-a{ background:#3987e5; }
.s4[data-s4theme="dark"] .s4-tr-b{ background:#d95926; }
@media print {
  /* 흑백 — 앞/뒤를 색이 아니라 «무늬»로 가른다. 앞=채움, 뒤=빗금. */
  .s4-tr-a{ background:#555 !important; }
  .s4-tr-b{ background:repeating-linear-gradient(45deg,#000,#000 1.5px,transparent 1.5px,transparent 3px) !important; }
  .s4-trline{ border-left:1.5px solid #000; }
}

/* 목록을 못 열었을 때 자리에 남는 안내 — 토스트만 띄우면 3.2초 뒤 빈 화면이 남고,
   손님은 그걸 「제품이 없다」로 읽는다. 이유와 다시 시도를 화면에 붙여 둔다. */
.sel-oops { border: 1px solid var(--border); border-radius: 12px; padding: 18px 16px; background: var(--surface); }
.sel-oops-t { margin: 0 0 6px; font-weight: 700; }
.sel-oops-s { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* 제품 이름 자동 규칙 — 무슨 일이 일어났는지 칸 아래에 한 줄로 (조각 2) */
.nm-note { display: flex; align-items: center; gap: 9px; margin: -4px 0 10px; padding: 8px 12px;
  border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--auto);
  background: color-mix(in srgb, var(--auto) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--auto) 32%, transparent); }
.nm-note.warn { color: var(--over); background: color-mix(in srgb, var(--over) 12%, transparent);
  border-color: color-mix(in srgb, var(--over) 38%, transparent); }
.nm-note .ghost.sm { margin-left: auto; padding: 3px 10px; font-size: 11.5px; }
.nm-orig { margin: -4px 0 12px; font-size: 12px; color: var(--muted); }
.nm-orig summary { cursor: pointer; }
.nm-orig .mono { display: block; margin-top: 5px; line-height: 1.6; word-break: break-word; }

/* 중국어가 남았을 때 — 카드 맨 위에 한 줄 (조각 3). 우리가 고쳐줄 수 없는 자리도 있어 «알림»이다. */
.cjk-warn { padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--over); background: color-mix(in srgb, var(--over) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--over) 38%, transparent); }
/* 끌어서 순서 바꾸는 중인 사진 */
.strip-item.dragging { opacity: .45; outline: 2px dashed var(--accent); }
.strip-item { cursor: grab; }
.strip-item:active { cursor: grabbing; }

/* 승인 게이트 (조각 4) — 승인 전에 «빠진 것»을 세 무리로 보여준다 */
.gate-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: color-mix(in srgb, #000 55%, transparent); }
.gate { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column; }
.gate-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.gate-h b { font-size: 15.5px; }
.gate-h .ghost { margin-left: auto; }
.gate-body { padding: 14px 18px 18px; overflow: auto; }
.gate-body .hint { margin: 2px 0 12px; }
.gate-grp { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 7px; font-size: 13px; font-weight: 800; }
.gate-grp span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.gate-grp.req { color: var(--err); } .gate-grp.soft { color: var(--over); } .gate-grp.warn { color: var(--over); }
.gate-list { display: grid; gap: 8px; }
.gate-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.gate-item.req { border-left: 3px solid var(--err); }
.gate-item.soft, .gate-item.warn { border-left: 3px solid var(--over); }
.gate-why { color: var(--muted); font-size: 12px; flex: 1 1 100%; }
.gate-fix { margin-left: auto; padding: 4px 11px; font-size: 12px; background: transparent;
  color: var(--muted); border: 1px solid var(--border); font-weight: 600; }
.gate-fix:hover { color: var(--accent); border-color: var(--accent); }
.gate-ok { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent); }
.gate-go { width: 100%; margin-top: 14px; }

/* ③⑤⑥⑦⑧ 카드 — 목업에서 «규칙 단위로» 옮김 (2026-08-07).
   ⚠️ 전에는 줄 단위 grep 으로 뽑아 여러 줄 규칙이 잘렸고, 중괄호가 18개 어긋나
      그 뒤 CSS 가 통째로 죽었다(SKU 열 숨김이 안 먹어서 발견). 반드시 규칙 단위로 뽑는다. */
.vchip{ background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:4px 10px; font-size:12.5px; font-weight:600 }
.vchip.addv{ border-style:dashed; color:var(--muted); cursor:pointer }
.vchip .cmark{ margin-left:5px; font-size:10px }
.vchip.mixed{ border-color: color-mix(in srgb, var(--over) 50%, var(--border)) }
/* ⛔ `.vchip.cleaned`(AI 가 정리한 값 = 라임 테두리)는 걷었다 (J.J 2026-08-28):
   「자동으로 바뀐 사실은 제품 단위 AI 보고에서 확인 — 옵션 카드에 별도 강조를 중복하지 않습니다」.
   ⚠️ 되살리지 마라. 판정(`v.from`)과 AI 리포트의 「원래값 → 변경값 + 되돌리기」는 그대로 산다. */
/* 변형 표 + 비교가 + 옵션별 썸네일 */
  .pinput, .cinput { width: 100px; padding:6px 9px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:13.5px; text-align:right; }
.disc { color: var(--ok); font-size:12.5px; font-weight:800; }
.bulk-wrap{ margin-top:6px; display:flex; justify-content:flex-end; }
.bulk-pill{ display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:8px; background:color-mix(in srgb, var(--accent) 8%, var(--bg)); padding:3px 8px; }
.bulk-pill:focus-within{ border-color:var(--accent); }
.bulk-lbl{ font-size:10.5px; font-weight:800; color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); padding:2px 6px; border-radius:6px; white-space:nowrap; }
.bulk-in{ width:78px; border:0; background:transparent; color:var(--text); font-size:13px; text-align:right; font-weight:700; padding:2px; }
.bulk-in:focus{ outline:none; }
.bulk-in::placeholder{ color:var(--muted); font-weight:500; }
.vthumb-cell{ width:58px; }
.vthumb{ width:40px; height:40px; border-radius:7px; object-fit:cover; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:10px; border:1px solid var(--border); }
.vthumb.sm{ width:30px; height:30px; }
.thumb-btn{ padding:0; background:transparent; border:0; cursor:pointer; border-radius:9px; position:relative; }
.thumb-btn .vthumb{ width:46px; height:46px; border:2px solid var(--border); }
.thumb-btn:hover .vthumb{ border-color:var(--accent); }
.thumb-btn .pen{ position:absolute; right:-4px; bottom:-4px; background:var(--accent-fill); color:var(--accent-ink); font-size:10px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3) }
.vthumb.empty{ border:2px dashed var(--border); color:var(--muted); background:transparent; font-size:16px; }
tr.grp .gname b{ font-size:14px }
tr.grp .gname .muted{ font-weight:500; font-size:12px; margin-left:7px }
/* 카테고리 — 현재 값 칩 + 못 찾은 경우 경고줄 */
  .cat-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cat-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 7px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--text);
    background:color-mix(in srgb,var(--accent) 8%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); }
.cat-badge{ flex:none; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap;
    background:color-mix(in srgb,var(--muted) 15%,transparent); border:1px solid var(--border); color:var(--muted); }
/* 자동으로 채워졌다는 '정보' 배지 — 형광 아님(기본 배지와 같은 무게). 형광은 대표 사진·승인처럼 꼭 알아야 하는 것에만 쓴다. */
  .cat-badge.ai{ background:color-mix(in srgb,var(--muted) 15%,transparent); color:var(--muted); border-color:var(--border); }
.cat-path{ overflow-wrap:anywhere; }
/* 편집(바꾸기·수정)류 공통 버튼 — 라임 테두리. 승인 같은 '주인공' 버튼(꽉 찬 라임)보다 한 단계 약하게. */
  .cat-btn{ padding:6px 13px; font-size:12.5px; font-weight:800; border-radius:8px;
    color:var(--accent); background:var(--now-bg);
    border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border)); }
.cat-btn:hover{ background:var(--now-bg); border-color:var(--accent); }
/* 12.5px 이라 «작은 글자» 기준(4.5)이다 — 진한 면 위 흰 글자는 4.37 로 모자라, 글자용 값으로 채운다 */
/* 🔄 2026-08-23 (J.J) — 「적용」이 민트로 떠서 우리 판과 안 어울렸다.
   `--accent` 는 «글자용»이라 면에 깔면 색이 뜬다 — 면은 집의 핵심 단추 값(`--accent-fill`)이 정본이다. */
.cat-btn.find{ margin-left:auto; background:var(--accent-fill); color:var(--accent-ink); border:0; font-weight:700; }
.cat-btn.find:hover{ filter:brightness(1.06); }
/* 「＋ 직접 넣기」 — 흰색과 회색 «사이». 있는 듯 없는 듯하되 눌러야 할 때 보이게 (J.J) */
.pt-none .cat-btn{ color:var(--tx2); border-color:var(--border); background:transparent; font-weight:600; }
/* 🔄 2026-08-25 (J.J) — 「직접 넣기」·「바꾸기」의 글자·테두리를 #bfcee0 로.
   ⚠️ 사전에 없는 값이지만 J.J 가 «값으로 직접» 준 색이다 — 「📖 가이드」와 같은 색이라 여기서도 그 값을 쓴다.
      테두리는 같은 색을 34% 로 내려 쓴다(가이드 단추가 이미 그 규율이다 — 같은 세기면 너무 튄다). */
.cat-btn.cat-btn-q, #catChange.cat-btn{ color:#bfcee0; background:transparent;
  border-color:color-mix(in srgb,#bfcee0 34%, transparent); }
.cat-btn.cat-btn-q:hover, #catChange.cat-btn:hover{ background:color-mix(in srgb,#bfcee0 10%, transparent);
  border-color:color-mix(in srgb,#bfcee0 55%, transparent); }

.pt-none .cat-btn:hover{ color:var(--text); border-color:var(--tx3); background:color-mix(in srgb,var(--text) 6%,transparent); }
.cat-x{ width:29px; height:29px; padding:0; font-size:12px; font-weight:800; border-radius:8px; background:transparent; color:var(--muted); border:1px solid var(--border); }
.cat-x:hover{ color:var(--over); border-color:color-mix(in srgb,var(--over) 55%,var(--border)); }
.cat-row.empty{ padding:10px 13px; border-radius:10px; background:color-mix(in srgb,var(--over) 10%,var(--surface));
    border:1px solid color-mix(in srgb,var(--over) 34%,var(--border)); border-left:3px solid var(--over); }
.cat-miss{ font-size:13.5px; font-weight:800; color:var(--over); }
.cat-row .req{ font-size:10.5px; font-weight:800; color:var(--err); background:color-mix(in srgb,var(--err) 13%,transparent);
    border:1px solid color-mix(in srgb,var(--err) 35%,transparent); padding:2px 8px; border-radius:999px; }
/* ✨ 카테고리 자동 추천 (§4-B ㊈) — 「찾는 중」·「골라주세요」는 «경고가 아니다».
   ⚠️ 주황(--over) 은 「뭔가 잘못됐다」는 뜻으로 이 앱 곳곳에서 쓴다. 아직 아무 일도 안 일어난
   자리에까지 주황을 칠하면 손님은 «틀린 것»으로 읽는다 — 그래서 조용한 판을 따로 둔다. */
.cat-row.empty.calm{ background:var(--surface); border-color:var(--border); border-left-color:var(--border); }
.cat-row.empty.calm .cat-miss{ color:var(--muted); font-weight:700; }
.cat-row.rec{ padding:10px 13px; border-radius:10px; background:var(--surface); border:1px solid var(--border); align-items:flex-start; }
.cat-recs{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 260px; min-width:0; }
.cat-rec{ text-align:left; padding:7px 11px; border-radius:9px; line-height:1.45; cursor:pointer;
    font-size:12.5px; font-weight:500; background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.cat-rec b{ color:var(--text); font-weight:800; font-size:13px; }
.cat-rec:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg)); }
.cat-hint{ font-size:11.5px; color:var(--muted); }
/* 카테고리 찾기 팝업 */
  .cat-search{ width:100%; margin-top:12px; }
.cat-list{ margin-top:10px; max-height:290px; overflow-y:auto; display:grid; gap:5px; }
.cat-item{ display:block; width:100%; text-align:left; padding:9px 12px; border-radius:9px; line-height:1.45; cursor:pointer;
    font-size:12.5px; font-weight:500; background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.cat-item b{ color:var(--text); font-weight:800; font-size:13px; }
.cat-item:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg)); }
.cat-none{ padding:20px 4px; text-align:center; font-size:12.5px; color:var(--muted); }
.cat-none b{ color:var(--text); font-weight:800; }
.col-sw{ position:relative; flex:none; width:38px; height:21px; display:inline-block; }
.col-sw input{ position:absolute; z-index:1; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.col-track{ position:absolute; inset:0; border-radius:999px; background:color-mix(in srgb,var(--muted) 30%,transparent); border:1px solid var(--border); transition:background .15s; }
.col-track::after{ content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .15s; }
.col-sw input:checked + .col-track{ background:var(--accent-fill); border-color:transparent; }
.col-sw input:checked + .col-track::after{ transform:translateX(17px); }
.col-sw input:disabled{ cursor:default; }
.col-sw input:disabled + .col-track{ opacity:.45; background:color-mix(in srgb,var(--muted) 30%,transparent); border-color:var(--border); }
/* 태그 · 제품 유형 추천 카드 */
  .tc-tools{ display:flex; align-items:center; gap:10px; margin:0 0 10px; flex-wrap:wrap; }
.tc-all{ margin-left:auto; flex:none; font-weight:800; }
.tc-list{ display:grid; gap:7px; }
.tc-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; padding:10px 12px; border-radius:10px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--border); }
.tc-row.on{ background:color-mix(in srgb,var(--accent) 8%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); border-left-color:var(--accent); }
.tc-row.off{ opacity:.6; }
.tc-kind{ flex:none; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.tc-kind.tag{ color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); }
.tc-kind.type{ color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--border); }
.tc-val{ font-size:13.5px; font-weight:800; }
.tc-arrow{ color:var(--muted); font-weight:800; }
.tc-eff{ font-size:12.5px; font-weight:700; color:var(--muted); }
.tc-eff b{ color:var(--text); font-weight:800; }
.tc-st{ margin-left:auto; flex:none; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.tc-st.wait{ color:var(--over); background:color-mix(in srgb,var(--over) 14%,transparent); border:1px solid color-mix(in srgb,var(--over) 34%,transparent); }
.tc-st.done{ color:var(--accent-ink); background:var(--accent-fill); }
.tc-st.skip{ color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--border); }
.tc-btn{ flex:none; padding:5px 12px; font-size:11.5px; font-weight:800; border-radius:7px; background:var(--accent-fill); color:var(--accent-ink); border:0; }
.tc-btn:hover{ filter:brightness(1.06); }
.tc-btn.no, .tc-btn.undo{ background:transparent; color:var(--muted); border:1px solid var(--border); }
.tc-btn.no:hover, .tc-btn.undo:hover{ color:var(--text); border-color:var(--accent); filter:none; }
.tc-foot{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; border-radius:9px; font-size:12.5px; font-weight:800; }
.tc-foot.warn{ color:var(--over); background:color-mix(in srgb,var(--over) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--over) 32%,var(--border)); }
.tc-foot.done{ color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border)); }
.tc-flash{ animation:tcflash 1.7s ease-out; }
/* 데모: 태그 없으면 홈페이지 메뉴 어디에도 안 뜬다 */
  .tc-demo{ padding:13px 13px 12px; }
.tc-menubar{ display:flex; align-items:center; gap:5px; padding:7px 9px; margin-bottom:12px; border-radius:9px;
    background:color-mix(in srgb,var(--surface) 60%,var(--bg)); border:1px solid var(--border); }
.tc-shop{ font-size:11px; font-weight:800; color:var(--muted); margin-right:4px; }
.tc-mi{ font-size:11px; font-weight:800; color:var(--muted); padding:3px 9px; border-radius:999px; }
.tc-mi.hi{ color:var(--accent-ink); background:var(--accent-fill); animation:tchi 3.2s ease-in-out infinite; }
.tc-drow{ display:flex; align-items:center; gap:11px; padding:7px 0; }
.tc-drow .wc-tag{ width:104px; }
.tc-shelf{ display:flex; gap:5px; flex:none; }
.tc-pcard{ width:26px; height:33px; border-radius:5px; display:block; background:linear-gradient(135deg,#6b8cff,#4d84ff); }
.tc-pcard.gone{ background:color-mix(in srgb,#ff6b6b 7%,transparent); border:1px dashed color-mix(in srgb,#ff6b6b 70%,var(--border)); animation:catgone 3.2s ease-in-out infinite; }
.tc-pcard.gone:nth-child(2){ animation-delay:.14s }
.tc-pcard.gone:nth-child(3){ animation-delay:.28s }
.tc-drow.good .tc-pcard{ animation:tcin 3.2s ease-in-out infinite; }
.tc-drow.good .tc-pcard:nth-child(2){ animation-delay:.16s }
.tc-drow.good .tc-pcard:nth-child(3){ animation-delay:.32s }
.tc-dnote{ font-size:11.5px; font-weight:800; }
.tc-dnote.bad{ color:#ff7a7a }
.tc-dnote.good{ color:var(--accent) }
/* 벤더(브랜드) — 셋팅 기준대로 자동, 못 채우면 직접 입력 (제품 분류 카드 안 '벤더' 칸) */
  .ven-hr{ height:1px; margin:15px 0 13px; background:var(--border); }
.ven-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px; }
.ven-lbl{ font-size:13.5px; font-weight:800; color:var(--text); }
.ven-sub{ font-size:12px; font-weight:600; color:var(--muted); }
.ven-why{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--text);
    background:color-mix(in srgb,#000 7%,transparent); border:1px solid color-mix(in srgb,#ffd21a 50%,var(--border)); padding:3px 10px 3px 4px; border-radius:999px; white-space:nowrap; }
.ven-why:hover{ filter:brightness(1.12); }
.ven-hint{ font-size:12px; font-weight:600; color:var(--muted); }
.ven-raw{ flex-basis:100%; font-size:11.5px; color:var(--muted); overflow-wrap:anywhere; }
.ven-fill{ flex-basis:100%; display:flex; align-items:center; gap:7px; margin-top:2px; }
.ven-in{ flex:1; min-width:0; padding:7px 11px; font-size:13.5px; }
.ven-demo{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:11px; padding:8px 11px; border:1px dashed var(--border); border-radius:9px; }
.ven-demo-lbl{ font-size:11px; font-weight:800; color:var(--muted); }
.ven-seg button{ padding:5px 11px; font-size:11.5px; }
.ven-demo-note{ font-size:11px; color:var(--muted); }
/* 벤더 기준 팝업 (셋팅) */
  .ven-modal{ max-height:100%; overflow-y:auto; }
.ven-opts{ display:grid; gap:9px; margin-top:13px; }
.ven-opt{ border:1.5px solid var(--border); border-radius:11px; background:var(--bg); overflow:hidden; }
.ven-opt.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.ven-pick{ display:flex; align-items:flex-start; gap:11px; padding:13px 14px; cursor:pointer; }
.ven-radio{ flex:none; position:relative; width:18px; height:18px; margin-top:2px; border-radius:50%; border:2px solid var(--border); background:var(--surface); }
.ven-opt.on .ven-radio{ border-color:var(--accent); }
.ven-opt.on .ven-radio::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent-fill); }
.ven-otx{ display:grid; gap:3px; min-width:0; }
.ven-otx b{ font-size:14px; font-weight:800; }
.ven-otx > span{ font-size:12px; color:var(--muted); }
.ven-body{ padding:0 14px 13px 43px; display:grid; gap:8px; }
.ven-note{ font-size:12px; line-height:1.6; color:var(--muted); }
.ven-ok{ justify-self:start; padding:7px 16px; font-size:12.5px; font-weight:800; border-radius:8px; background:var(--accent-fill); color:var(--accent-ink); border:0; }
.ven-ok:hover{ filter:brightness(1.06); }
.ven-warn{ font-size:12px; font-weight:800; color:var(--over); }
.ven-done{ font-size:12.5px; font-weight:800; color:var(--accent); }
.ven-save:disabled:hover{ filter:none; }
/* 데모: 영어 이름은 그대로 자동 / 중국어면 손님 화면에 중국어가 보인다 */
  .ven-gdemo{ padding:13px 13px 12px; }
.ven-dtop{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:12px; }
.ven-drow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:7px 0; }
.ven-drow .wc-tag{ width:104px; }
.ven-dsrc{ font-size:11.5px; font-weight:700; color:var(--muted); }
.ven-dshop{ font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.ven-dshop.ok{ color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); animation:tcin 3.2s ease-in-out infinite; }
.ven-dshop.ok.d2{ animation-delay:.2s; }
.ven-dshop.cn{ color:#ff7a7a; background:color-mix(in srgb,#ff6b6b 10%,transparent); border-color:color-mix(in srgb,#ff6b6b 40%,var(--border)); animation:catgone 3.2s ease-in-out infinite; }
.ven-dnote{ font-size:11.5px; font-weight:800; }
.ven-dnote.bad{ color:#ff7a7a }
.ven-dnote.good{ color:var(--accent) }
.nm-slot .col-sw{ margin-left:auto; }
.nm-slot .nm-lock + .col-sw{ margin-left:0; }
.nm-slot .col-sw input:disabled:checked + .col-track{ opacity:.55; background:var(--accent-fill); border-color:transparent; }
.nm-check .col-sw{ margin-top:1px; }
.nm-x{ padding:0 1px; line-height:1; font-size:10px; font-weight:800; color:var(--muted); background:transparent; border:0; cursor:pointer; }
.nm-x:hover{ color:var(--over); }
.im-ratios .ven-pick{ align-items:center; padding:12px; gap:10px; }
.im-fits .ven-pick{ align-items:center; }
.ven-opt.on .im-shape{ outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent); outline-offset:2px; }
/* 승인 후 처리 — Draft 쪽 설명은 경고색 (카테고리 못 찾음 줄과 같은 --over 계열) */
  .ven-otx > span.pb-warn{ color:var(--over); font-weight:700; }
/* 컬렉션 칸 — 이 제품이 어느 메뉴에 들어가는지 (제품 분류 카드 안 '컬렉션' 칸)
     상자는 태그 카드의 '적용된 태그'(.tg-box.tg-fixed)를 그대로 써요. 아래 줄 모양은 '확인 필요'에만 남아요. */
  .cl-groups{ display:grid; gap:13px; }
.cl-note{ font-size:11.5px; font-weight:600; color:var(--muted); }
.al-title .ven-why{ margin-left:0; }
.ven-otx > span.al-ex{ white-space:pre-wrap; }
/* 카테고리 물음표 — 배지 옆 작은 아이콘 + 바로 아래 설명창 */
  .cat-anc{ position:relative; display:inline-flex; flex:none }
/* 🔴 「?」가 동그라미 «정중앙»이 아니었다 (J.J 2026-08-26 실측 지적).
   까닭: 크기만 주고 «가운데 두는 규칙»이 없었다. line-height:1 은 글자를 baseline 에 세울 뿐
   17px 상자의 세로 가운데로 옮기지 않는다 — 글꼴마다 몇 px 씩 아래로 처진다.
   ⇒ grid + place-items:center 로 못박는다. ⛔ line-height 로 맞추려 하지 마라(글꼴이 바뀌면 또 어긋난다). */
.cat-q{ width:17px; height:17px; border-radius:50%; padding:0; cursor:pointer; flex:none;
    display:grid; place-items:center;
    font-size:11px; font-weight:800; line-height:1; color:var(--muted);
    background:transparent; border:1px solid var(--border) }
.cat-q:hover{ color:var(--accent); border-color:var(--accent) }
.cat-pop{ position:absolute; left:0; top:calc(100% + 7px); z-index:40; width:330px; max-width:78vw;
    display:grid; gap:3px; padding:12px 14px 13px; border-radius:11px; text-align:left;
    background:color-mix(in srgb, var(--text) 9%, var(--surface));
    border:1px solid var(--border); border-top:3px solid color-mix(in srgb, var(--accent) 70%, var(--border));
    box-shadow:0 14px 36px rgba(0,0,0,.5) }
.cat-pop b{ font-size:11.5px; font-weight:800; color:var(--accent); margin-top:7px }
.cat-pop b:first-child{ margin-top:0 }
.cat-pop span{ font-size:12.5px; line-height:1.6; color:var(--text) }
.cat-pop span b{ color:var(--text); font-size:inherit; margin:0 }
.cat-pop-ok{ font-weight:700 }
/* ⚠️ 틴트를 «손으로» 만들면(14%) 그 위 작은 글자가 4.3 으로 떨어진다.
   사전의 옅은 면(--now-bg)은 그 글자가 4.5 를 넘게 «재서» 만든 값이다 — 그걸 쓴다. */
/* 자동으로 채워졌다는 배지 — 색은 «지금 할 일»과 같다 (보라 삭제) */
  .cat-badge.ai, .tb-badge.auto{ color:var(--auto);
    background:var(--now-bg); border:1px solid var(--now-ln); }
/* 칸 제목 옆 ⚙️ 는 카드 제목 것보다 조금 작게 */
  /* 물음표(?) — 눌러서 여는 버튼이라 라임(눌러도 되는 것)으로. 설명창(.cat-pop)은 그대로. */
  .cat-q{ color:var(--accent); background:var(--now-bg); border-color:var(--now-ln); }
.cat-q:hover{ color:var(--accent); background:color-mix(in srgb,var(--accent) 24%,transparent); border-color:var(--accent); }
/* 카드 제목 옆 확인 상태 — 적용이든 안 함이든 누르면 여기가 바로 바뀐다 */
  .st-chip{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; margin-left:2px; vertical-align:2px; }
.st-chip.wait{ color:var(--over); background:color-mix(in srgb,var(--over) 14%,transparent); border:1px solid color-mix(in srgb,var(--over) 38%,transparent); }
.st-chip.done{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); }
/* 제품 유형 — 한 제품에 하나뿐이라 카테고리 칸과 같은 모양. 비어도 괜찮은 칸이라 경고색·필수는 안 쓴다. */
  .cat-row.pt-none{ padding:10px 13px; border-radius:10px; background:color-mix(in srgb,var(--muted) 7%,var(--surface));
    border:1px solid var(--border); border-left:3px solid color-mix(in srgb,var(--muted) 45%,var(--border)); }
.pt-miss{ font-size:13.5px; font-weight:800; color:var(--muted); }
.pt-hint{ font-size:12px; font-weight:600; color:var(--muted); opacity:.85; }
/* 태그 — 한 제품에 여러 개라 쇼피파이 태그 칸처럼 칩으로. 상자 두 개 = 위:적용할 태그 / 아래:적용된 태그 */
  .tg-on{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-height:31px; }
.tg-auto{ flex:none; }
.tg-chip{ padding:5px 8px 5px 12px; font-size:13px; }
.tg-x{ font-size:11px; }
.tg-none{ font-size:12.5px; color:var(--muted); }
.tg-lbl{ flex:none; font-size:11.5px; font-weight:800; color:var(--muted); }
.tg-cand{ font-family:inherit; }
.tg-cand:hover{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
/* 추천 한 줄(태그·제품 유형 공통) — 왼쪽에 상태 칩, 오른쪽 끝에 버튼. 손님 메뉴를 정하는 칸이라 눌러서 '적용'해야 반영돼요. */
  .tc-row .tc-st{ margin-left:0; }
/* 상태 칩을 줄 맨 앞으로 (원래는 오른쪽 끝) */
  .tc-push{ margin-left:auto; }
/* 여기서부터 오른쪽 끝 */
  .tc-val.gone{ color:var(--muted); text-decoration:line-through; }
/* 안 씀 = 값에 줄 긋기 */
  .tc-row .ven-fill{ margin-top:0; }
.tc-row .ven-fill .ghost{ flex:none; }
/* 직접 담기 = 검색해서 고르기 (컬렉션이 수십 개인 스토어도 있어서 목록을 통째로 안 펼쳐요) */
  .cl-in{ margin-top:2px; padding:9px 12px; font-size:14px; }
.cl-res{ margin-top:0; max-height:250px; }
.cl-res:empty{ display:none; }
/* 태그 검색 = 컬렉션 직접 담기와 같은 방식 (태그가 수십·수백 개인 스토어도 있어서 목록을 통째로 안 펼쳐요) */
  .tg-find{ margin-top:12px; }
.tg-find .cl-in{ margin-top:0; }
.tg-picked{ margin-top:11px; }
/* ⚙️ 팝업에서 고른 태그 칩줄 */
  /* 태그 두 상자 — 위(적용할 태그)에서 누르면 아래(적용된 태그)로 옮겨져요. */
  .tg-box{ padding:11px 13px 12px; border-radius:11px; border:1px solid var(--border);
    background:color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.tg-bh{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tg-bt{ font-size:13px; font-weight:800; color:var(--text); }
.tg-bsub{ font-size:11.5px; font-weight:600; color:var(--muted); }
.tg-line{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tg-line + .tg-line{ margin-top:8px; }
.tg-line .tg-lbl{ min-width:52px; }
/* 두 줄 이름표 폭을 맞춰 칩이 나란히 서게 */
  .tg-ai{ font-style:normal; font-weight:800; color:var(--auto); }
/* 보라 = 우리가 이름에서 찾아준 것 (카테고리 ✨ 배지와 같은 색) */
  .tg-cand.ai{ background:color-mix(in srgb,var(--auto) 9%,var(--surface)); border-color:color-mix(in srgb,var(--auto) 34%,var(--border)); }
/* 「↓ 고르면 아래에 쌓여요」 — 위에서 고른 것이 아래로 간다는 안내 줄 (J.J 2026-08-21).
   보조색(--tx3)이라 너무 흐렸다 → 일반 문구는 --tx2, «시키는 쪽»(↓ 고르면)만 지금색(--now).
   ⛔ 낱말은 한 자도 안 바꿨다 — 어디를 강조로 볼지만 표시했다. */
.tg-flow{ margin:6px 0; text-align:center; font-size:11.5px; font-weight:700; color:var(--tx2); }
.tg-flow b{ color:var(--now); font-weight:800; }
.tg-box .tg-find{ margin-top:0; }
.tg-box .tg-on{ margin-top:9px; }
.cat-item.tg-mk{ color:var(--text); font-weight:700;                /* 검색해도 없으면 그 자리에서 새로 만들기 */
    background:color-mix(in srgb,var(--accent) 9%,var(--bg)); border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.cat-item.tg-mk b{ color:var(--accent); }
/* 태그 두 상자 — 눈으로 바로 갈리게. 위(적용할 태그) = 아직 정한 게 아니다(점선·배경 없음) / 아래(적용된 태그) = 이건 확정이다(실선·살짝 뜬 배경·라임 테두리) */
  .tg-box.tg-todo{ background:transparent; border:1.5px dashed color-mix(in srgb,var(--muted) 42%,var(--border)); }
/* 🔄 2026-08-24 (J.J · B-3안) — 「액자 안에 액자 안에 액자」를 걷었다.
   전엔 이 상자가 라임을 «면 · 테두리 · 왼쪽 굵은 선 · 그림자» 넷으로 한꺼번에 썼다.
   그런데 이 상자는 이미 «섹션 카드» 안에 있고, 그 카드는 «단계 카드» 안에 있다 — 액자가 셋이었다.
   ⇒ 상자를 없앤다. 라벨(.tg-bt) 한 줄 + 여백만으로 묶는다.
   ⛔ 왼쪽 «세로선»으로 대신하지 마라(B안에서 걸렀다): 열린 단계가 이미 왼쪽에 라임 3px 바를 들고 있어
      라임 세로선이 «둘»이 된다. 회색으로 바꿔도 선이 둘인 건 같다.
   ⭐ 상태는 이미 두 곳이 말한다 — 섹션 카드 머리의 「✦ N개 적용」 · 컬렉션 칩의 「자동」 배지.
      본문에서 라임을 뺄수록 그 둘이 또렷해진다. (§0-A ④ — 눈으로 보이는 것을 또 칠하지 않는다)
   ⚠️ 「적용할 태그」(.tg-todo · 점선)는 그대로 둔다 — 그건 «아직 안 정한 것»이라 다른 상태다. */
.tg-box.tg-fixed{ background:none; border:0; border-radius:0; box-shadow:none; padding:2px 0 0; }
.tg-lgrp{ display:inline-flex; align-items:center; gap:5px; flex:none; min-width:78px; }
/* 이름표 + ? 를 한 덩어리로 — 두 줄 칩이 나란히 서게 */
  .tg-lgrp .tg-lbl{ min-width:0; }
.tg-lgrp .cat-q{ width:16px; height:16px; font-size:10px; }
.gate-grp.req{ color:var(--err); }
.gate-item.req{ background:color-mix(in srgb,var(--err) 9%,var(--surface));      /* 막는 줄 = 빨강 */
    border-color:color-mix(in srgb,var(--err) 30%,var(--border)); border-left-color:var(--err); }
.cl-groups .cl-note{ margin-top:9px; }
/* 추가 정보 — 칸 하나에 줄 하나. 접힌 줄엔 이름 · 값 미리보기 · 지금 상태만.
     상자 모양은 태그·컬렉션 칸(.tg-box)과 같은 배경을 써서 한 화면처럼 보이게 하고,
     아직 채워야 하는 줄만 경고색 왼쪽 띠(.cl-row.etc 와 같은 방식)로 눈에 띄게 해요. */
  .tb-row{ padding:0; overflow:hidden; background:color-mix(in srgb, var(--surface) 55%, var(--bg)); }
/* 변형 표 제목줄의 ? — 배너 대신 설명할 것 바로 옆에. 버튼 모양은 .cat-q 그대로 쓰고 자리만 잡아줘요. */
  .bulk-wrap{ align-items:center; gap:6px; }
/* '옵션 사진' 이 두 줄로 갈라지지 않게 */
  /* 카드 제목 옆 상태 칩 — 세 번째 색. 승인을 '막는' 것만 빨강으로, 승인 팝업의 🔴 줄(.gate-item.req)과 같은 색을 써요.
     .wait(경고색) 다음에 와서 같은 순위면 이게 이겨요 — 급한 것 하나만 띄우는 칩이라 색도 하나만 보여야 해요. */
  .st-chip.block{ color:var(--err); background:color-mix(in srgb,var(--err) 13%,transparent);
    border:1px solid color-mix(in srgb,var(--err) 38%,transparent); }
/* SKU 열 — 평소엔 없는 게 맞아요(안 쓰는 칸을 늘 띄우지 않는다). 켤 때는 모든 줄에 한꺼번에 나와요.
     표를 다시 그리지 않고 열만 숨기니까, 가격 고치던 커서가 튀지 않아요. */
  #vtable:not(.sku-on) .skucol{ display:none; }
.sku-v{ font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
/* 제목줄 오른쪽 스위치 — 작고 조용하게 (⚙️ 자리와 같은 오른쪽 끝) */
  .sku-sw{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
    font-size:11.5px; font-weight:800; color:var(--muted); padding:3px 8px 3px 11px; border-radius:999px; border:1px solid var(--border); }
.sku-sw:hover{ color:var(--text); border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.sku-sw .col-sw{ width:30px; height:17px; }
/* 셋팅 팝업 스위치를 그대로 쓰되 한 치수 작게 */
  .sku-sw .col-track::after{ width:11px; height:11px; }
.sku-sw .col-sw input:checked + .col-track::after{ transform:translateX(13px); }
/* 집행 대상 — 승인하면 '어디로' 나가는지. 읽기 전용이라 누를 것처럼 안 보이게(라임 없음) */
  .tgt{ margin:0 0 14px; padding:12px 13px 13px; border-radius:11px;
    background:color-mix(in srgb, var(--surface) 55%, var(--bg)); border:1px solid var(--border); }
.tgt-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tgt-h b{ font-size:13.5px; font-weight:800; color:var(--text); }
.tgt-sub{ font-size:12px; font-weight:600; color:var(--muted); }
.tgt-ro{ margin-left:auto; flex:none; font-size:10.5px; font-weight:800; color:var(--muted); white-space:nowrap;
    background:color-mix(in srgb,var(--muted) 13%,transparent); border:1px solid var(--border); padding:3px 9px; border-radius:999px; }
.tgt-list{ display:grid; gap:7px; }
.tgt-it{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:9px 12px; border-radius:9px;
    background:var(--bg); border:1px solid var(--border); }
.tgt-n{ font-size:13px; font-weight:800; color:var(--text); overflow-wrap:anywhere; }
.tgt-id{ font-size:11.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.tgt-note{ flex-basis:100%; font-size:11.5px; color:var(--muted); }
.tgt-say{ margin:10px 0 0; font-size:11.5px; line-height:1.6; color:var(--muted); }
.tgt-say b{ color:var(--text); font-weight:800; }
/* 지금 쇼피파이에 있는 상태 — 우리가 정하는 게 아니라 저쪽을 비추기만 해요.
     그래서 라임(누르는 것)도, 보라(우리가 자동으로 해준 것)도 안 써요. 파는 중 = 초록 / 아직 안 보임 = 회색. */
  .tgt-it .st-chip{ margin-left:auto; cursor:default; user-select:none; }
.st-chip.live{ color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--ok) 38%,transparent); }
.st-chip.draft{ color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--border); }

/* SKU 열 — 평소엔 숨김. 「SKU 보기」를 켜면 모든 줄에 한꺼번에 나온다 (목업 규칙). */
.skucol { display: none; }
#studio-root.sku-on .skucol { display: table-cell; }

/* ④ 옵션 카드 — 목업에서 규칙 단위로 (2026-08-07) */
.tip { display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:10px 14px; border-radius:10px;
    background: color-mix(in srgb, #ffd21a 16%, var(--surface));
    border:1px solid color-mix(in srgb, #ffd21a 55%, var(--border));
    font-size:14px; font-weight:700; color: var(--text); }
.tip .bulb { font-size:19px; line-height:1; filter:saturate(1.35); }
/* 옵션 에디터 */
  .opts { display:grid; gap:8px; }
.opt { padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.opt.dragging{opacity:.35}
.opt.over{outline:2px dashed var(--accent); outline-offset:-2px}
.opt .ohead{ display:flex; align-items:center; gap:9px; }
.opt .grip{color:var(--muted); font-size:16px; letter-spacing:-2px; cursor:grab}
.opt .pos{font-size:11px; color:var(--muted); width:16px; text-align:center; font-weight:700}
/* 옵션 이름칸 — 목업은 «굵은 글씨»처럼 보인다. 테두리·배경이 없고, 올리거나 누를 때만 칸이 드러난다.
   이 세 줄이 빠져 있어서 브라우저 기본 입력칸으로 보였다(CEO 「못생겼다」 2026-08-08). */
.oname-input{ font-weight:700; font-size:14.5px; color:var(--text); background:transparent; border:1px solid transparent; border-radius:6px; padding:3px 7px; min-width:96px; }
.oname-input:hover{ border-color:var(--border); }
.oname-input:focus{ border-color:var(--accent); outline:none; background:var(--surface); }
.opt .vbadge{margin-left:auto; font-size:11px; font-weight:800; color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding:3px 9px; border-radius:999px}
/* 🔄 2026-08-24 (J.J) — 「SIZE : S M L XL」처럼 **한 줄**로. 전엔 이름이 윗줄, 값이 아랫줄이라
   옵션 세 개면 여섯 줄이 됐다. 값이 많으면 그 자리에서 접혀 내려간다(이름 칸은 안 밀린다).
   ⚠️ `.opt` 를 flex 로 만들되 `align-items:flex-start` — 값이 두 줄이 돼도 이름이 가운데로 뜨지 않게. */
.opt{ display:flex; align-items:flex-start; gap:10px; }
.opt .ohead{ flex:none; padding-top:2px; }
.opt .vals{ display:flex; gap:6px; flex-wrap:wrap; padding-left:0; margin-top:0; flex:1; min-width:0; align-items:flex-start; }
/* 이름과 값 사이 «: » — 글자가 아니라 CSS 로 둔다(저장값에 섞이면 안 된다) */
.opt .vals::before{ content:':'; color:var(--muted); font-weight:700; margin:4px 2px 0 0; flex:none; }
.vchip{ background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:4px 10px; font-size:12.5px; font-weight:600 }
.vchip.addv{ border-style:dashed; color:var(--muted); cursor:pointer }
.vchip .cmark{ margin-left:5px; font-size:10px }
.vchip.mixed{ border-color: color-mix(in srgb, var(--over) 50%, var(--border)) }
/* 지우기 — 옵션 × 와 값 × (J.J 2026-08-27).
   ⛔ 늘 빨갛게 두지 않는다. 평소엔 흐린 회색이고 «올려야» 붉어진다 — 옵션 카드는 손님이 자주 만지는
      자리라, 지우기 단추가 늘 눈에 띄면 그 카드가 위험해 보인다. 위험한 건 «누른 뒤»고 그건 확인창이 막는다. */
/* 🔴 × 는 **자리를 안 먹는다.** 칩 안에 끼워 넣었더니 칩마다 폭이 늘어 값이 한 줄에 하나씩 깨졌다
   (실측 화면으로 확인). 그래서 칩 «위에» 띄우고 평소엔 숨긴다 — 올려야 나온다. */
.vchip{ position:relative }
.vchip .vx{ position:absolute; top:-7px; right:-6px; width:16px; height:16px; padding:0;
  display:none; place-items:center; border:1px solid var(--border); border-radius:999px;
  background:var(--bg); color:var(--muted); font-size:11px; line-height:1; font-weight:700; cursor:pointer }
.vchip:hover .vx{ display:grid }
.vchip .vx:hover{ color:var(--over); border-color:color-mix(in srgb, var(--over) 55%, var(--border)) }
.opt .ox{ border:0; background:none; padding:0 2px; cursor:pointer; color:var(--muted);
  font-size:13px; line-height:1; font-weight:700; opacity:0 }
.opt:hover .ox{ opacity:.6 }
.opt .ox:hover{ opacity:1; color:var(--over) }
/* 되돌리기는 «예외 상태»라 늘 보인다 — 지운 걸 못 물리면 손님이 갇힌다 */
.vchip .vx.undo{ position:static; display:inline; width:auto; height:auto; border:0; background:none;
  margin-left:5px; font-size:11px; font-weight:800; color:var(--accent) }
.opt .ox.undo{ opacity:1; font-size:11px; font-weight:800; color:var(--accent) }
/* 지우기로 표시된 값 — «목록에 남아 있다»(집행부가 옵션을 값 묶음으로 찾기 때문). 그은 채로 둔다. */
.vchip.del{ text-decoration:line-through; color:var(--muted);
  border-style:dashed; border-color:color-mix(in srgb, var(--over) 45%, var(--border));
  background:color-mix(in srgb, var(--over) 7%, transparent) }
.vchip.del .vx.undo{ text-decoration:none }
.opt .ohead{ display:flex; align-items:center; gap:4px }
/* 지울 옵션 — 줄 하나로 말한다. 인풋에 테두리까지 그리면 «넓은 빈 칸»이 눈에 먼저 들어온다(실측 화면). */
.opt.gone .oname-input{ text-decoration:line-through; color:var(--muted); border-color:transparent;
  background:none; opacity:1; -webkit-text-fill-color:var(--muted) }
/* 딸린 값도 같이 사라진다 — 그 사실을 값에도 보여야 「이름만 지우나」로 안 읽는다 */
.opt.gone .vchip{ opacity:.45; text-decoration:line-through }
.opt.gone{ opacity:.9 }
/* 새 옵션 안내 — «그 옵션 바로 아래» 한 줄 (J.J 2026-08-27).
   ⛔ 경고색(주황·빨강)을 쓰지 않는다. 파란 «알려주기»(--read) 계열이다 — tokens.css 가
      「상태가 아니다 · 알려주기만 한다」로 못박아 둔 그 자리다. 새 옵션은 «잘못된 것»이 아니다.
   ⚠️ `.opt` 가 flex 라 이 줄은 제 줄로 내려가야 한다 → 통째로 한 줄(flex-basis:100%). */
.opt{ flex-wrap:wrap }
.opt .opt-new{ flex:0 0 100%; margin:6px 0 0; display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--read); }
.opt .opt-new .cat-anc{ display:inline-flex; position:relative }
.opt .opt-new .cat-q{ width:16px; height:16px; padding:0; font-size:11px; line-height:1 }
/* 이 쪽지창은 «알려주기»라 머리선도 파랑이다 — 다른 ? 창(--accent)과 계열을 갈라 둔다 */
.cat-pop.read{ border-top-color: color-mix(in srgb, var(--read) 70%, var(--border)) }
.cat-pop.read b{ color:var(--read) }
.ai-anchor{ position:relative; flex:none }
.ai-btn{ display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 7px; border-radius:10px; cursor:pointer; font-weight:800; font-size:12.5px; color:var(--text);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)) }
.ai-btn:hover{ background: color-mix(in srgb, var(--accent) 20%, var(--surface)) }
.ai-badge-ico{ width:24px; height:24px; border-radius:7px; background: color-mix(in srgb, #000 30%, var(--surface)); display:inline-flex; align-items:center; justify-content:center; flex:none }
.ai-badge-ico svg{ width:16px; height:16px; color:var(--accent) }
.ai-btn.pulse{ animation:aipulse 1.7s ease-out infinite }
/* 리포트 팝업(떠서 나옴)
   🔄 2026-08-28 (㉣ 확정) — 머리선을 라임(--accent)에서 «알려주기» 파랑(--read)으로 바꿨다.
      바로 위 `.cat-pop.read` 가 「이 쪽지창은 «알려주기»라 머리선도 파랑」이라고 이미 정해 뒀다.
      보고는 «읽는 판»이라 같은 계열이어야 한다 — 라임은 «지금 누를 것»(승인·으뜸 단추)이다.
      그리고 확인 필요가 주황 카드로 판을 채우니, 라임 윗선까지 얹히면 «나 봐라» 색이 둘이 된다. */
  .report{ position:absolute; right:0; top:calc(100% + 8px); width:400px; max-width:82vw; z-index:40; border-radius:12px; overflow:hidden; color:var(--text);
    background: color-mix(in srgb, var(--text) 9%, var(--surface));
    border:1px solid var(--border); border-top:3px solid color-mix(in srgb, var(--read) 70%, var(--border));
    box-shadow:0 16px 44px rgba(0,0,0,.55) }
.report-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px 11px; border-bottom:1px solid var(--border) }
.report-title{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:14px; color:var(--text) }
.report-badge{ width:30px; height:30px; border-radius:8px; background: color-mix(in srgb, #000 30%, var(--surface)); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; flex:none }
.report-btn{ padding:6px 13px; font-size:12.5px; font-weight:800; border-radius:8px; cursor:pointer; color:var(--accent-ink); background:var(--accent-fill); border:0 }
.report-btn:hover{ filter:brightness(1.06) }
.report-labels{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 15px 0 }
/* 🔄 2026-08-28 — 보고가 «제품 하나에 한 벌»이 되면서 `.ac-item`·`.ac-group` 은 붙이는 곳이 0이 됐다.
   ⛔ 규칙만 남기지 않는다 — 붙이는 곳이 0인데 규칙이 남으면 다음 사람이 되살린다
      (test-option-case ⑧ 이 `.vchip.cleaned` 에 대해 적어 둔 그 규율과 같다).
   지금 판을 그리는 규칙은 아래 「AI 보고 «한 벌»」 한 자리에 있다. 두 벌로 쓰지 마라. */
.row-tools{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
/* AI 안내원 — 팁 클릭 → 시각 설명 */
  .tip.clickable{ cursor:pointer; transition:filter .15s, box-shadow .15s; }
.tip.clickable:hover{ filter:brightness(1.05); box-shadow:0 3px 14px color-mix(in srgb,#ffd21a 22%,transparent); }
.tip-more{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--text);
    background:color-mix(in srgb,#000 7%,transparent); border:1px solid color-mix(in srgb,#ffd21a 50%,var(--border)); padding:3px 10px 3px 4px; border-radius:999px; white-space:nowrap; }

/* AI 안내원 · 데모 그림 — 목업에서 규칙 단위로 (2026-08-07) */
.tip { display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:10px 14px; border-radius:10px;
    background: color-mix(in srgb, #ffd21a 16%, var(--surface));
    border:1px solid color-mix(in srgb, #ffd21a 55%, var(--border));
    font-size:14px; font-weight:700; color: var(--text); }
.tip .bulb { font-size:19px; line-height:1; filter:saturate(1.35); }
.vchip .cmark{ margin-left:5px; font-size:10px }
.ai-anchor{ position:relative; flex:none }
.ai-btn{ display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 7px; border-radius:10px; cursor:pointer; font-weight:800; font-size:12.5px; color:var(--text);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)) }
.ai-btn:hover{ background: color-mix(in srgb, var(--accent) 20%, var(--surface)) }
.ai-badge-ico{ width:24px; height:24px; border-radius:7px; background: color-mix(in srgb, #000 30%, var(--surface)); display:inline-flex; align-items:center; justify-content:center; flex:none }
.ai-badge-ico svg{ width:16px; height:16px; color:var(--accent) }
.ai-count{ min-width:19px; height:19px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; background:var(--over); color:#231607 }
.ai-count.info{ background: color-mix(in srgb, var(--accent) 28%, transparent); color:var(--accent) }
.ai-btn.pulse{ animation:aipulse 1.7s ease-out infinite }
.report-badge{ width:30px; height:30px; border-radius:8px; background: color-mix(in srgb, #000 30%, var(--surface)); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; flex:none }
.rico{ width:20px; height:20px; color:var(--accent); flex:none }

/* ══ AI 보고 «한 벌» — 지침 「AI 보고를 제품 하나에 한 벌로」(2026-08-28 · 목업 A안 · 머리 ㉣) ══
   ⛔ 색 규율(지침 §6)을 여기서 어기지 마라:
        라임(--accent)  판에 «닫기»(.report-btn) 하나뿐이다. 되돌리기·자동 적용 줄은 «중립»이다 —
                        되돌리기가 셋이면 라임이 셋이 되어 「지금 누를 것」이 셋으로 보인다
        주황(--over)    확인 필요는 «약하게» — 테두리 26% · 바탕 7% · 왼쪽 3px
        파랑(--read)    머리(윗선·뱃지·머리칸·「보고」 딱지). 이 판은 «읽는 판»이다
   ⛔ 값을 여기 박지 마라 — 색은 tokens.css 한 곳에서 온다(test-core-colors ⑤). */

/* ── 머리 ㉣ ─────────────────────────────────────────────────────────────── */
.report .report-head{ background: color-mix(in srgb, var(--read) 12%, transparent); border-bottom-color:var(--read-ln) }
.report .report-badge{ background:var(--read-bg); border-color:var(--read-ln) }
.report .rico{ color:var(--read) }
/* 「보고」 딱지 — 글자로도 못박는다. 색을 못 읽는 손님에게도 판의 성격이 전해진다 */
.report-tag{ padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; line-height:1.5;
  color:var(--read); background:var(--read-bg); border:1px solid var(--read-ln) }

.acbar-body{ padding:12px 15px 15px; display:grid; gap:9px }

/* ── ① 자동 적용한 것 — 한 줄. 누르면 펼친다 (기본 접힘) ──────────────────── */
.ac-auto{ display:flex; align-items:center; gap:9px; width:100%; padding:11px 13px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font:inherit; font-size:12.5px; font-weight:800; text-align:left; cursor:pointer }
.ac-auto:hover{ border-color: color-mix(in srgb, var(--read) 45%, var(--border)) }
.ac-auto-t{ flex:1 }
.ac-auto-n{ flex:none; color:var(--muted); font-weight:700 }
.ac-auto-x{ flex:none; color:var(--muted); transition:transform .15s }
.ac-auto.open .ac-auto-x{ transform:rotate(90deg) }
.ac-auto-body{ display:grid; gap:6px; padding:2px }
/* 한 줄 = 「무엇이 → 무엇으로」. ⛔ 장문 설명을 여기 되살리지 마라 — 까닭은 손님이 안 물어본다 */
.ac-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:7px 11px; border-radius:8px;
  font-size:12.5px; color:var(--text); background:var(--surface); border:1px solid var(--border) }
.ac-what{ flex:none; min-width:54px; font-size:11.5px; font-weight:700; color:var(--muted) }
.ac-move{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0 }
.ac-was, .ac-arw{ color:var(--muted) }
/* 되돌린 줄은 «지운 게 아니라» 그은 것이다 — 그 자리에 남아 「내가 되돌렸구나」를 보인다 */
.ac-row.done .ac-move{ text-decoration:line-through; opacity:.7 }
.ac-undone{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted) }

/* ── ② 확인 필요 — 같은 이유끼리 «한 카드» (기본 펼침) ────────────────────── */
.ac-sum{ padding:5px 2px 0; font-size:12px; font-weight:800; color:var(--text) }
.ac-sum b{ margin-left:4px; color:var(--over) }
.ac-card{ padding:11px 13px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--over) 26%, var(--border));
  border-left:3px solid var(--over);
  background: color-mix(in srgb, var(--over) 7%, var(--surface)) }
.ac-card-h{ font-size:13px; font-weight:800; color:var(--text) }
.ac-card-h b{ margin-left:4px; color:var(--over) }
.ac-why{ margin-top:3px; font-size:12px; color:var(--muted) }
/* 한 항목 = 칩 하나. 누르면 그 자리로 데려가고 그 밑에서 단추가 열린다 */
.ac-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px }
.ac-chip{ padding:6px 11px; border-radius:9px; font:inherit; font-size:12.5px; font-weight:800;
  color:var(--text); background:var(--surface); border:1px solid var(--border); cursor:pointer }
.ac-chip:hover{ border-color: color-mix(in srgb, var(--over) 55%, var(--border)) }
.ac-chip.on{ border-color:var(--over); background: color-mix(in srgb, var(--over) 12%, var(--surface)) }
.ac-act{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:9px; padding-top:9px;
  border-top:1px solid color-mix(in srgb, var(--over) 22%, var(--border)) }
.ac-act-t{ flex:1 1 100%; font-size:12px; color:var(--muted) }
.ac-none{ padding:12px 13px; border-radius:10px; font-size:12.5px; color:var(--muted);
  background:var(--surface); border:1px solid var(--border) }

/* ── 작은 단추 — «중립»이다. ⛔ 라임 채움으로 되돌리지 마라(지침 §6) ────────── */
.report .mini{ padding:4px 10px; border-radius:7px; font:inherit; font-size:11.5px; font-weight:800;
  color:var(--text); background:transparent; border:1px solid var(--border); cursor:pointer }
.report .mini:hover{ border-color: color-mix(in srgb, var(--text) 35%, var(--border)) }
.report .mini.ghost{ color:var(--muted) }
.ac-row .mini{ margin-left:auto }

/* 칩을 눌러 «그 자리»로 왔을 때 한 번 깜빡인다 — 어디로 왔는지 눈이 못 따라가면 데려간 뜻이 없다 */
.opt.ac-hit{ border-radius:10px; box-shadow:0 0 0 2px color-mix(in srgb, var(--read) 55%, transparent) }
/* 옵션 사진 선택 팝업 */
  .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; max-width:520px; width:100%; box-shadow:0 12px 44px rgba(0,0,0,.45); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; }
.modal-head b{ font-size:15px }
.modal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px }
/* AI 안내원 — 팁 클릭 → 시각 설명 */
  .tip.clickable{ cursor:pointer; transition:filter .15s, box-shadow .15s; }
.tip.clickable:hover{ filter:brightness(1.05); box-shadow:0 3px 14px color-mix(in srgb,#ffd21a 22%,transparent); }
.tip-more{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--text);
    background:color-mix(in srgb,#000 7%,transparent); border:1px solid color-mix(in srgb,#ffd21a 50%,var(--border)); padding:3px 10px 3px 4px; border-radius:999px; white-space:nowrap; }
.guide .modal-head b{ display:inline-flex; align-items:center; gap:9px; font-size:15px; }
.guide-q{ font-size:14.5px; font-weight:800; color:var(--text); margin:14px 0 0; }
.guide-say{ font-size:13.5px; line-height:1.6; color:var(--text); margin:8px 0 0; }
.guide-say p{ margin:0 0 11px; }
/* 문단 사이만 띄운다 */
  .guide-say p:last-child{ margin-bottom:0; }
/* 안내원 설명은 통글이라 눈이 미끄러져요 — 핵심어만 보라로 집어줘요 (보라 = 우리가 자동으로 해주는 것) */
  .guide-say b{ font-weight:800; color:var(--auto); }
.guide-say em{ font-style:normal; font-weight:800; color:var(--text); }
/* 보라를 쓰기엔 애매한 강조 */
  .demo{ margin-top:14px; border:1px solid var(--border); border-radius:11px; overflow:hidden; background:var(--bg); }
.demo-bulk{ display:flex; align-items:center; gap:9px; padding:11px 13px; background:color-mix(in srgb,var(--accent) 14%,var(--surface)); border-bottom:1px solid var(--border); }
.demo-bulk .db-lbl{ font-size:10.5px; font-weight:800; color:var(--accent-ink); background:var(--accent-fill); padding:2px 8px; border-radius:6px; flex:none; }
.demo-bulk .db-cap{ font-size:12px; color:var(--muted); font-weight:700; }
.demo-bulk .db-val{ position:relative; font-weight:800; font-size:15px; color:var(--text); margin-left:auto; }
.demo-bulk .db-val::after{ content:'|'; color:var(--accent); margin-left:1px; animation:dcaret 1s steps(1) infinite; }
.demo-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 13px; font-size:13px; color:var(--text); border-top:1px solid var(--border); }
.demo-row .rn{ color:var(--muted); }
.demo-row .fill{ min-width:54px; text-align:center; color:var(--accent-ink); background:var(--accent-fill); padding:2px 10px; border-radius:6px; font-weight:800; animation:fillin 3s ease-in-out infinite; }
.demo-row:nth-child(3) .fill{ animation-delay:.35s; }
.demo-row:nth-child(4) .fill{ animation-delay:.7s; }
.demo-foot{ padding:9px 13px; font-size:12px; font-weight:800; color:var(--muted); background:color-mix(in srgb,var(--surface) 55%,var(--bg)); border-top:1px solid var(--border); }
/* 데모: 왜 옵션 순서로? (뒤죽박죽 vs 옵션순서 비교) */
  .whydemo{ padding:13px; }
.wd-top{ font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.wd-opt{ font-size:11px; font-weight:800; padding:2px 10px; border-radius:999px; }
.wd-opt.blue{ background:#4d84ff; color:#fff; }
.wd-opt.white{ background:#e8ecf3; color:#2a2f3a; border:1px solid #cfd6e2; }
.wd-arrow{ color:var(--muted); font-weight:800; }
.wcase{ display:flex; align-items:center; gap:11px; padding:7px 0; }
.wc-tag{ font-size:11px; font-weight:800; padding:4px 9px; border-radius:7px; white-space:nowrap; flex:none; width:100px; text-align:center; }
.wc-tag.bad{ color:#ff7a7a; background:color-mix(in srgb,#ff6b6b 13%,transparent); border:1px solid color-mix(in srgb,#ff6b6b 34%,var(--border)); }
.wc-tag.good{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); }
.wp{ width:26px; height:33px; border-radius:5px; display:block; }
.wp.b{ background:linear-gradient(135deg,#6b8cff,#4d84ff); }
.wp.w{ background:linear-gradient(135deg,#eef1f6,#d8dee9); border:1px solid #cfd6e2; }
.wcase.good .wp{ animation:wparr 3.2s ease-in-out infinite; }
.wcase.good .wp:nth-child(2){ animation-delay:.12s; }
.wcase.good .wp:nth-child(3){ animation-delay:.24s; }
.wcase.good .wp:nth-child(4){ animation-delay:.36s; }
.wcase.good .wp:nth-child(5){ animation-delay:.48s; }
/* ⛔ 「분할소싱」 데모 규칙(.split-*)을 걷었다 (J.J 2026-08-27) — 그 팝업 자체가 없어졌다. */
/* 데모: 카테고리 없으면 검색·필터에서 사라진다 */
  .cat-demo{ padding:13px 13px 12px; }
.cat-dtop{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:12px; }
.cat-dq{ font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; color:var(--text);
    background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--border); }
.cat-drow{ display:flex; align-items:center; gap:11px; padding:7px 0; }
.cat-drow .wc-tag{ width:112px; }
.cat-dshelf{ display:flex; gap:5px; flex:none; }
.cat-dcard{ width:26px; height:33px; border-radius:5px; display:block; background:linear-gradient(135deg,#6b8cff,#4d84ff); }
.cat-dcard.miss{ background:color-mix(in srgb,#ff6b6b 7%,transparent); border:1px dashed color-mix(in srgb,#ff6b6b 70%,var(--border)); animation:catgone 3.2s ease-in-out infinite; }
.cat-dcard.miss:nth-child(2){ animation-delay:.14s }
.cat-dcard.miss:nth-child(3){ animation-delay:.28s }
.cat-drow.good .cat-dcard{ animation:catpop 3.2s ease-in-out infinite; }
.cat-drow.good .cat-dcard:nth-child(2){ animation-delay:.14s }
.cat-drow.good .cat-dcard:nth-child(3){ animation-delay:.28s }
.cat-dnote{ font-size:11.5px; font-weight:800; }
.cat-dnote.bad{ color:#ff7a7a }
.cat-dnote.good{ color:var(--accent) }
/* 컬렉션 정리 */
  .modal.col-modal{ max-height:100%; overflow-y:auto; }
/* 데모: 태그 없으면 홈페이지 메뉴 어디에도 안 뜬다 */
  .tc-demo{ padding:13px 13px 12px; }
.tc-drow{ display:flex; align-items:center; gap:11px; padding:7px 0; }
.tc-drow .wc-tag{ width:104px; }
.tc-drow.good .tc-pcard{ animation:tcin 3.2s ease-in-out infinite; }
.tc-drow.good .tc-pcard:nth-child(2){ animation-delay:.16s }
.tc-drow.good .tc-pcard:nth-child(3){ animation-delay:.32s }
.tc-dnote{ font-size:11.5px; font-weight:800; }
.tc-dnote.bad{ color:#ff7a7a }
.tc-dnote.good{ color:var(--accent) }
.ven-demo{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:11px; padding:8px 11px; border:1px dashed var(--border); border-radius:9px; }
.ven-demo-lbl{ font-size:11px; font-weight:800; color:var(--muted); }
.ven-demo-note{ font-size:11px; color:var(--muted); }
.ven-done{ font-size:12.5px; font-weight:800; color:var(--accent); }
.ven-dtop{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:12px; }
.ven-drow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:7px 0; }
.ven-drow .wc-tag{ width:104px; }
.ven-dsrc{ font-size:11.5px; font-weight:700; color:var(--muted); }
.ven-dshop{ font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.ven-dshop.ok{ color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); animation:tcin 3.2s ease-in-out infinite; }
.ven-dshop.ok.d2{ animation-delay:.2s; }
.ven-dshop.cn{ color:#ff7a7a; background:color-mix(in srgb,#ff6b6b 10%,transparent); border-color:color-mix(in srgb,#ff6b6b 40%,var(--border)); animation:catgone 3.2s ease-in-out infinite; }
.ven-dnote{ font-size:11.5px; font-weight:800; }
.ven-dnote.bad{ color:#ff7a7a }
.ven-dnote.good{ color:var(--accent) }
.nm-draghint{ display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:11.5px; font-weight:700; color:var(--muted); }
.nm-draghint .nm-grip{ cursor:default; }
.nm-det{ margin-top:8px; }
.nm-det summary{ font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer; }
.nm-det summary:hover{ color:var(--text); }
/* 데모: 지저분한 원본 → 쓸 단어만 남겨 짧은 이름으로 */
  .nm-demo{ padding:13px 13px 12px; }
.nm-dtop{ margin-bottom:9px; font-size:11.5px; font-weight:800; color:var(--muted); }
.nm-line{ display:flex; flex-wrap:wrap; gap:5px; }
.nm-w{ position:relative; padding:3px 8px; border-radius:7px; font-size:11.5px; font-style:normal; font-weight:700; color:var(--muted); background:var(--surface); border:1px solid var(--border); }
.nm-w.cut{ animation:nmcut 5.4s ease-in-out infinite both; animation-delay:var(--d,0s); }
.nm-w.cut::after{ content:''; position:absolute; left:5px; right:5px; top:50%; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left;
    animation:nmstrike 5.4s ease-in-out infinite both; animation-delay:var(--d,0s); }
.nm-w.keep{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
    animation:nmkeep 5.4s ease-in-out infinite both; animation-delay:var(--d,0s); }
.nm-darrow{ margin:11px 0 8px; font-size:11.5px; font-weight:800; color:var(--muted); }
.nm-darrow b{ color:var(--text); }
.nm-out{ padding:9px 12px; border-radius:9px; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border)); }
.nm-fin{ display:inline-block; font-size:15px; font-weight:800; color:var(--text); animation:nmfin 5.4s ease-in-out infinite both; }
/* AI 안내원은 셋팅 팝업 위에서도 열려요 — 다른 팝업(z-index 50)보다 항상 위 */
  .im-guide-top{ z-index:55; }
/* 사진 모양 셋팅 — 비율 카드 · 자르기/여백 그림 · 미리보기 (제품 이름 규칙 팝업과 같은 단계식) */
  .im-ratios{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.im-ratios .ven-pick{ align-items:center; padding:12px; gap:10px; }
.im-fits{ display:grid; gap:9px; }
.im-fits .ven-pick{ align-items:center; }
.im-shapebox{ flex:none; width:48px; height:46px; display:flex; align-items:center; justify-content:center; }
.im-shape{ border-radius:4px; background:linear-gradient(135deg,#6b8cff,#9b83ff); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.ven-opt.on .im-shape{ outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent); outline-offset:2px; }
.im-rt{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.im-most{ flex:none; font-size:9.5px; font-weight:800; color:var(--accent-ink); background:var(--accent-fill); padding:1px 6px; border-radius:999px; letter-spacing:.03em; }
/* 정사각형 원본이 고른 비율로 들어가는 그림 — 흐린 부분 = 잘려 나가는 자리 */
  .im-figbox{ flex:none; display:flex; align-items:center; justify-content:center; }
/* 잘려 나가는 부분까지 자리를 잡아둬요 (글자 위로 안 넘치게) */
  .im-fig{ position:relative; flex:none; }
.im-sq{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:3px; background:linear-gradient(135deg,#6b8cff,#9b83ff); }
.im-ghost{ opacity:.17; }
.im-clip{ position:absolute; inset:0; overflow:hidden; border-radius:5px; border:1.5px solid var(--accent); }
.im-fig.pad .im-ghost{ display:none; }
.im-fig.pad .im-clip{ background:#fff; }
.im-prev{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
.im-sum{ font-size:13.5px; font-weight:800; color:var(--text); }
.im-sum span{ display:block; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--muted); }
/* 참고 박스 — 단계가 아니라 읽고 넘어가는 안내 (줄바꿈 그대로 보여요) */
  .im-ref{ margin-top:16px; padding:13px 15px; border-radius:10px; white-space:pre-wrap; overflow-x:auto;
    font-size:12px; line-height:1.85; color:var(--muted); background:color-mix(in srgb,var(--surface) 55%,var(--bg)); border:1px solid var(--border); }
.im-ref b{ color:var(--text); font-weight:800; }
/* 데모: 비율이 섞이면 목록 줄이 들쭉날쭉해 보인다 */
  .im-gdemo{ padding:13px 13px 12px; }
.im-dtop{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:12px; }
.im-drow{ display:flex; align-items:center; gap:11px; padding:8px 0; }
.im-drow .wc-tag{ width:118px; }
.im-shelf{ display:flex; align-items:flex-start; gap:5px; flex:none; height:50px; }
.im-t{ width:26px; height:var(--th,44px); border-radius:5px; display:block; transform-origin:top center;
    background:linear-gradient(135deg,#6b8cff,#4d84ff); }
.im-drow.good .im-t{ animation:imsnap 3.2s ease-in-out infinite; }
.im-drow.good .im-t:nth-child(2){ animation-delay:.13s }
.im-drow.good .im-t:nth-child(3){ animation-delay:.26s }
.im-drow.good .im-t:nth-child(4){ animation-delay:.39s }
.im-dnote{ font-size:11.5px; font-weight:800; }
.im-dnote.bad{ color:#ff7a7a }
.im-dnote.good{ color:var(--accent) }
/* 승인 후 처리 — Draft 쪽 설명은 경고색 (카테고리 못 찾음 줄과 같은 --over 계열) */
  .ven-otx > span.pb-warn{ color:var(--over); font-weight:700; }
/* 데모: 승인 전 → 승인 후, 두 갈래로 갈린다 */
  .pb-demo{ padding:13px 13px 12px; display:grid; gap:8px; }
.pb-row{ display:grid; grid-template-columns:96px 16px 1fr; align-items:center; gap:9px; }
.pb-row.pb-head span{ font-size:11px; font-weight:800; color:var(--muted); }
.pb-card{ display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:9px; font-size:11.5px; font-weight:800; color:var(--text);
    background:var(--surface); border:1px solid var(--border); }
.pb-th{ flex:none; width:19px; height:25px; border-radius:4px; background:linear-gradient(135deg,#6b8cff,#4d84ff); }
.pb-arrow{ text-align:center; color:var(--muted); font-weight:800; }
.pb-res{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 11px; border-radius:9px; font-size:12px; font-weight:800;
    animation:tcin 3.4s ease-in-out infinite; }
.pb-res span{ font-size:11px; font-weight:600; opacity:.85; }
.pb-res.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); }
.pb-res.off{ color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,transparent); border:1px solid var(--border); animation-delay:.25s; }
.pb-manual{ font-style:normal; font-size:10.5px; font-weight:800; color:var(--over); padding:2px 8px; border-radius:999px;
    background:color-mix(in srgb,var(--over) 14%,transparent); border:1px solid color-mix(in srgb,var(--over) 36%,transparent); }
/* 컬렉션 칸 — 이 제품이 어느 메뉴에 들어가는지 (제품 분류 카드 안 '컬렉션' 칸)
     상자는 태그 카드의 '적용된 태그'(.tg-box.tg-fixed)를 그대로 써요. 아래 줄 모양은 '확인 필요'에만 남아요. */
  .cl-groups{ display:grid; gap:13px; }
/* 🔴 칩과 그 아래 곁말이 «붙어» 있었다 (J.J 2026-08-24). 상자를 걷으면서(B-3) 상자가 들고 있던
   안쪽 여백이 같이 사라진 자리다 — 칩 줄이 두 줄로 접히면 글자가 칩에 닿는다.
   ⚠️ `.cl-note` 는 상자 «안»에도 쓴다(「직접 담을 수 있는 메뉴가 없어요」). 그래서 전부에 여백을 주지 않고
      «상자 바로 다음에 오는» 곁말에만 준다. */
.tg-box + .cl-note{ margin-top:11px; }

/* 접힌 한 줄 (J.J 2026-08-24) — 「확인 필요」 블록을 대신한다.
   ⛔ 경고색(--over)을 쓰지 않는다: 손님이 고쳐야 하는 것이 아니라 «아직 모른다»는 말이다.
   평소엔 한 줄, 누르면 어느 메뉴인지 펴진다 (§0-A ② 설명은 지우지 말고 접어 둔다).
   ⚠️ `.cl-g` 가 이 파일에 «두 벌» 있다(1560·1941). 뒤엣것이 이기니, 새 규칙은 이름을 겹치지 않게 뒀다. */
.cl-fold{ margin-top:10px; border:1px dashed color-mix(in srgb,var(--border) 88%,transparent);
  border-radius:9px; padding:7px 11px; }
.cl-fold > summary{ list-style:none; cursor:pointer; font-size:11.5px; font-weight:700; color:var(--muted); }
.cl-fold > summary::-webkit-details-marker{ display:none }
.cl-fold > summary::before{ content:'▸ '; color:var(--muted) }
.cl-fold[open] > summary::before{ content:'▾ ' }
.cl-fold-in{ margin-top:7px; font-size:12px; color:var(--text); }
.cl-g{ display:grid; gap:6px; }
.cl-gh{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--text); }
.cl-g.etc .cl-gh{ color:var(--over); }
.cl-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; padding:9px 12px; border-radius:10px; color:var(--text);
    background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--border); }
.cl-row b{ font-size:13.5px; font-weight:800; }
.cl-row.etc{ background:color-mix(in srgb,var(--over) 9%,var(--surface)); border-color:color-mix(in srgb,var(--over) 30%,var(--border)); border-left-color:var(--over); }
.cl-chk{ position:absolute; width:0; height:0; opacity:0; }
.cl-box{ flex:none; position:relative; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border); background:var(--surface); }
.cl-chk:checked + .cl-box{ background:var(--accent-fill); border-color:transparent; }
.cl-chk:checked + .cl-box::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:900; color:var(--accent-ink); }
.cl-chk:focus-visible + .cl-box{ outline:2px solid var(--accent); outline-offset:2px; }
.cl-why{ font-size:12px; font-weight:600; color:var(--muted); }
.cl-note{ font-size:11.5px; font-weight:600; color:var(--muted); }
/* 컬렉션 정리 팝업 — 규칙 있는/없는 두 무리로 나눠 보여줘요 */
  .cl-cg{ display:grid; gap:2px; padding:10px 2px 4px; }
.cl-cg:first-child{ padding-top:2px; }
.cl-cg b{ font-size:12.5px; font-weight:800; color:var(--text); }
.cl-cg span{ font-size:11.5px; font-weight:600; color:var(--muted); }
/* 데모: 메뉴에 들어가는 두 가지 방법 (규칙이 자동으로 / 내가 직접) */
  .cl-demo{ padding:13px 13px 12px; display:grid; gap:9px; }
.cl-drow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cl-drow .wc-tag{ width:118px; }
.wc-tag.cl-mut{ color:var(--muted); background:color-mix(in srgb,var(--muted) 13%,transparent); border:1px solid var(--border); }
.cl-tag{ font-style:normal; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; color:var(--accent);
    background:color-mix(in srgb,var(--accent) 15%,transparent); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
    animation:clfly 3.4s ease-in-out infinite; }
.cl-pick{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--muted); }
.cl-cbox{ position:relative; flex:none; display:inline-block; width:16px; height:16px; border-radius:5px;
    border:1.5px solid var(--border); background:var(--surface); animation:clcheck 3.4s ease-in-out infinite; }
.cl-cbox::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:900; color:var(--accent-ink); opacity:0; animation:clmark 3.4s ease-in-out infinite; }
.cl-menu{ font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:8px; color:var(--muted); background:var(--surface);
    border:1px dashed var(--border); animation:tcin 3.4s ease-in-out infinite; animation-delay:.3s; }
.cl-menu.on{ color:var(--accent-ink); background:var(--accent-fill); border:1px solid transparent; }
.cl-drow.man .cl-menu{ animation-delay:.95s; }
.cl-dnote{ font-size:11.5px; font-weight:800; color:var(--muted); }
.cl-dnote.good{ color:var(--accent); }
/* 알트 태그(사진 설명) 셋팅 — 제목 옆 질문칩 · 두 줄짜리 설명 · 미리보기 줄 */
  .al-title{ display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; }
.al-title .ven-why{ margin-left:0; }
.ven-otx > span.al-ex{ white-space:pre-wrap; }
.al-rows{ display:grid; gap:4px; }
.al-row{ display:flex; align-items:baseline; gap:9px; font-size:12px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.al-n{ flex:none; width:11px; text-align:right; color:var(--muted); opacity:.75; }
.al-t{ color:var(--text); overflow-wrap:anywhere; }
.al-note{ margin-top:8px; font-size:11.5px; font-weight:600; color:var(--muted); }
/* 데모: 알트 태그가 없으면 사진이 검색에 안 잡힌다 */
  .al-demo{ padding:13px 13px 12px; display:grid; gap:9px; }
.al-dtop{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:3px; }
.al-case{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.al-case .wc-tag{ width:96px; }
.al-photo{ display:flex; align-items:center; gap:7px; flex:none; }
.al-th{ flex:none; width:26px; height:33px; border-radius:5px; display:block; background:linear-gradient(135deg,#6b8cff,#4d84ff); }
.al-cap{ font-style:normal; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:7px; color:var(--accent); white-space:nowrap;
    background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); }
.al-cap.empty{ width:76px; height:19px; background:transparent; border:1px dashed color-mix(in srgb,#ff6b6b 60%,var(--border)); }
.al-case.good .al-cap{ animation:alcap 3.4s ease-in-out infinite; }
.al-box{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:126px; min-height:31px; padding:5px 10px; border-radius:9px;
    font-size:10.5px; font-weight:800; background:color-mix(in srgb,var(--surface) 60%,var(--bg)); border:1px solid var(--border); overflow:hidden; }
.al-box.off{ color:var(--muted); border-style:dashed; animation:catgone 3.4s ease-in-out infinite; }
.al-fly{ font-style:normal; padding:3px 9px; border-radius:7px; white-space:nowrap; color:var(--accent-ink); background:var(--accent-fill);
    animation:alfly 3.4s ease-in-out infinite; }
/* 추가 정보 — 스토어에서 읽어온 칸 목록대로 입력란을 그려요 (셋팅 = 공통 기본값 · 제품 화면 = 이 제품 값) */
  .tb-sync{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:11px; font-size:11.5px; color:var(--muted); }
.tb-sync .ghost{ padding:3px 9px; font-size:11px; font-weight:700; border-radius:7px; }
.tb-syncing{ font-weight:800; color:var(--accent); }
.tb-ta{ width:100%; min-height:64px; padding:9px 12px; font:inherit; font-size:13.5px; line-height:1.6; color:var(--text);
    background:var(--bg); border:1px solid var(--border); border-radius:9px; resize:vertical; }
.tb-ta:focus{ outline:none; border-color:var(--accent); }
.tb-list{ display:grid; gap:6px; }
.tb-item{ display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg); }
.tb-txt{ font-size:12.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.tb-x{ flex:none; padding:0 3px; line-height:1; font-size:10px; font-weight:800; color:var(--muted); background:transparent; border:0; cursor:pointer; }
.tb-x:hover{ color:var(--over); }
.tb-add{ display:flex; gap:6px; margin-top:8px; }
.tb-addin{ flex:1; min-width:0; padding:6px 10px; font-size:12.5px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.tb-addin:focus{ outline:none; border-color:var(--accent); }
.tb-more{ border:1px solid var(--border); border-radius:10px; background:var(--bg); padding:11px 13px; }
.tb-more summary{ font-size:13px; font-weight:800; color:var(--text); cursor:pointer; }
.tb-more summary:hover{ color:var(--accent); }
.tb-more .nm-guide{ margin:8px 0 10px; }
.tb-grp{ margin:11px 0 6px; font-size:11.5px; font-weight:800; color:var(--muted); }
.tb-grp:first-child{ margin-top:2px; }
.tb-opt{ display:flex; align-items:center; gap:9px; margin-bottom:5px; padding:8px 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface); cursor:pointer; }
.tb-opt:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.tb-otx{ font-size:12.5px; font-weight:700; color:var(--text); }
.tb-otx i{ font-style:normal; font-weight:600; color:var(--muted); }
/* 셋팅 팝업 미리보기 — 손님 제품페이지에서 눌러서 열리는 칸 흉내 (CSS만) */
  .tb-acc{ border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.tb-tab{ border-bottom:1px solid var(--border); }
.tb-tab:last-child{ border-bottom:0; }
.tb-tab summary{ display:flex; align-items:center; gap:8px; padding:10px 13px; list-style:none; cursor:pointer;
    font-size:12.5px; font-weight:800; color:var(--text); }
.tb-tab summary::-webkit-details-marker{ display:none; }
.tb-tab summary::after{ content:'▾'; margin-left:auto; font-size:11px; color:var(--muted); transition:transform .15s; }
.tb-tab[open] summary::after{ transform:rotate(180deg); }
.tb-tbody{ padding:0 13px 12px; font-size:12.5px; line-height:1.7; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.tb-tbody ul{ margin:0; padding-left:18px; }
.tb-empty{ opacity:.7; }
.tb-cap{ margin-top:7px; font-size:11.5px; font-weight:700; color:var(--muted); }
/* 제품 화면 추가 정보 줄 */
  .tb-row{ margin-bottom:9px; padding:12px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.tb-row:last-child{ margin-bottom:0; }
.tb-rh{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px; }
.tb-name{ font-size:13.5px; font-weight:800; color:var(--text); }
.tb-badge{ flex:none; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.tb-badge.auto{ color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--border); }
/* 정보 배지 — 형광 아님 (옆 '되돌리기'와 안 싸우게) */
  .tb-badge.own{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); }
.tb-row .tb-undo{ margin-left:auto; }
/* 데모: 한 번 적어두면 앞으로 올리는 제품에 자동으로 들어간다 */
  .tb-gdemo{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:14px 13px; }
.tb-set{ flex:none; width:164px; padding:9px 11px; border-radius:10px;
    background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); }
.tb-slbl{ font-size:10.5px; font-weight:800; color:var(--accent); }
.tb-sline{ margin-top:6px; font-size:11px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; }
.tb-sline::after{ content:'|'; margin-left:1px; color:var(--accent); animation:dcaret 1s steps(1) infinite; }
.tb-arr{ flex:none; font-size:15px; font-weight:800; color:var(--muted); }
.tb-cards{ display:flex; gap:6px; flex:none; }
.tb-pc{ display:grid; gap:5px; width:74px; padding:7px; border-radius:9px; background:var(--surface); border:1px solid var(--border); }
.tb-pth{ height:26px; border-radius:5px; background:linear-gradient(135deg,#6b8cff,#4d84ff); }
.tb-pn{ font-size:9.5px; font-weight:800; color:var(--muted); }
.tb-pl{ padding:2px 5px; border-radius:4px; font-size:9px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); animation:tbin 3.4s ease-in-out infinite; }
.tb-pc:nth-child(2) .tb-pl{ animation-delay:.25s }
.tb-pc:nth-child(3) .tb-pl{ animation-delay:.5s }
/* 자동으로 채워졌다는 배지 — 전부 보라로 통일 (라임은 눌러야 하는 것에만) */
  .cat-badge.ai, .tb-badge.auto{ color:var(--auto);
    background:var(--now-bg); border:1px solid var(--now-ln); }
/* 직접 담기 = 검색해서 고르기 (컬렉션이 수십 개인 스토어도 있어서 목록을 통째로 안 펼쳐요) */
  .cl-in{ margin-top:2px; padding:9px 12px; font-size:14px; }
.cl-res{ margin-top:0; max-height:250px; }
.cl-res:empty{ display:none; }
.cl-picked{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:3px; }
.tg-find .cl-in{ margin-top:0; }
/* 컬렉션 = 상자 하나 (태그의 '적용된 태그' 상자와 같은 모양). 칩 하나 = 이 제품이 들어가는 메뉴 하나. */
  .cl-chip.has-auto{ padding-left:5px; }
/* 「자동」 이름표가 앞에 붙는 칩은 왼쪽 여백을 줄여요 */
  .cl-auto{ flex:none; font-style:normal; font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; cursor:help;
    color:var(--auto); background:var(--now-bg); border:1px solid var(--now-ln); }
/* 보라 = 우리가 자동으로 해준 것 (카테고리 ✨ 배지와 같은 색) */
  /* 왜 들어갔는지 — 칩 아무 데나 올리면 바로 떠요 (이름표에만 달면 못 찾아요) */
  .cl-chip.has-auto{ position:relative; cursor:help; }
.cl-tip{ position:absolute; left:0; top:calc(100% + 6px); z-index:40; display:none;
    width:max-content; max-width:280px; white-space:normal; text-align:left;
    padding:7px 10px; border-radius:9px; font-size:12px; font-weight:600; line-height:1.45;
    color:var(--ink); background:#1b2030; border:1px solid var(--border); box-shadow:0 8px 22px rgba(0,0,0,.45); }
.cl-chip.has-auto:hover .cl-tip, .cl-chip.has-auto:focus-within .cl-tip{ display:block; }
.cl-groups .cl-note{ margin-top:9px; }
.cl-groups .cl-g.etc{ margin-top:13px; }
/* 자동으로 들어간 메뉴에서 뺄 때 물어보는 작은 창 — 무엇이 바뀌는지 · 어디가 같이 빠지는지 */
  .modal.cl-ask{ max-width:430px; }
.cl-askq{ margin-top:13px; }
.cl-askhead{ margin:0; font-size:14.5px; font-weight:800; line-height:1.55; color:var(--text); }
.cl-askhead b{ font-weight:800; color:var(--accent); }
.cl-asksub{ margin:7px 0 0; font-size:13px; line-height:1.6; color:var(--muted); }
.cl-asksub b{ font-weight:800; color:var(--text); }
.cl-askbtn{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:16px; }
/* 추가 정보 — 칸 하나에 줄 하나. 접힌 줄엔 이름 · 값 미리보기 · 지금 상태만.
     상자 모양은 태그·컬렉션 칸(.tg-box)과 같은 배경을 써서 한 화면처럼 보이게 하고,
     아직 채워야 하는 줄만 경고색 왼쪽 띠(.cl-row.etc 와 같은 방식)로 눈에 띄게 해요. */
  .tb-row{ padding:0; overflow:hidden; background:color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.tb-row.need{ background:color-mix(in srgb,var(--over) 8%,var(--surface));
    border-color:color-mix(in srgb,var(--over) 30%,var(--border)); border-left:3px solid var(--over); }
.tb-rh{ margin:0; padding:11px 13px; flex-wrap:nowrap; cursor:pointer; }
.tb-rh:hover{ background:color-mix(in srgb,var(--accent) 7%,transparent); }
.tb-rh:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.tb-row.open .tb-rh{ border-bottom:1px solid var(--border); }
.tb-caret{ flex:none; width:11px; text-align:center; font-size:12.5px; line-height:1; color:var(--muted); transition:transform .15s; }
.tb-rh:hover .tb-caret{ color:var(--accent); }
.tb-row.open .tb-caret{ transform:rotate(180deg); }
.tb-rh .tb-name{ flex:none; }
.tb-row.open .tb-name{ flex:1; min-width:0; }
/* 접힌 줄 값 — 알아볼 만큼만 보여주고 길면 …으로 잘라요 */
  .tb-prev{ flex:1; min-width:0; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-prev.none{ opacity:.7; }
.tb-row.open .tb-prev{ display:none; }
/* 아직 채워야 하는 칸 — 비어 있어요 · 골라 주세요 (경고색) */
  .tb-badge.need{ color:var(--over); background:color-mix(in srgb,var(--over) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--over) 36%,transparent); }
.tb-body{ padding:12px 13px; }
/* 리스트형은 손님 화면에 점(•) 붙은 목록으로 나가요 — 그래서 여기도 점 */
  .tb-bul{ flex:none; color:var(--accent); font-weight:800; line-height:1; }
.tb-item .tb-txt{ flex:1; min-width:0; }
/* 선택형 — 미리 만들어 둔 목록에서 하나만 (글 쓰는 칸이 아니에요) */
  .tb-picks{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tb-pk{ font-family:inherit; color:var(--text); cursor:pointer; }
.tb-pk:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
.tb-pk.on{ color:var(--accent-ink); background:var(--accent-fill); border-color:transparent; }
.tb-note{ margin-top:9px; font-size:11.5px; color:var(--muted); }
/* 사진 체크 — 타일 오른쪽 위. 기본 규칙이 빠져 있어서 체크가 자리를 못 잡았다(2026-08-08). */
.ph-chk{ position:absolute; top:6px; right:6px; z-index:2; display:inline-flex; cursor:pointer; }
.ph-chk .cl-box{ width:19px; height:19px; border-width:2px; box-shadow:0 1px 5px rgba(0,0,0,.5); }
.ph-chk .cl-chk:checked + .cl-box::after{ font-size:12px; }
/* 안 쓰는 사진 묶음 — 체크를 끈 사진이 위 그리드에서 빠져 여기로 내려와요 (지운 게 아니라 접어둔 것).
     한 장이라도 꺼야 생기고, 처음엔 접혀 있어요. 여닫는 모양은 추가 정보 칸(.tb-row)과 같은 방식 —
     같은 화면에서 접는 법을 두 번 배우게 하지 않으려고 .tb-caret 을 그대로 씁니다. */
  .phg{ margin-top:11px; max-width:640px; border:1px solid var(--border); border-radius:10px; overflow:hidden;
    background:color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.phg-h:hover .tb-caret{ color:var(--accent); }
.phg.open .tb-caret{ transform:rotate(180deg); }

/* 톱니 ⚙ · 이름 줄 · 미디어 — 목업에서 규칙 단위로 (2026-08-07 2차).
   ⚠️ 1차 때 이 뭉치를 통째로 안 가져와서 톱니가 앱 기본 버튼 스타일(라임 배경)을 먹고
      툴팁이 항상 보였다. 사장님이 화면 보고 잡았다. */
/* 대표사진 */
  .pg { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; max-width:640px; }
/* 🔴 여기 `aspect-ratio:1` 이 박혀 있어서 «비율을 골라도 타일이 안 바뀌었다» (J.J 2026-08-22 · 사진1).
   이제 고른 비율(`--ph-ar`)을 쓴다 — 값은 `phCard` 에 걸리고 두 그리드가 물려받는다.
   ⛔ 기본값 1 을 지우지 마라: 카드가 아직 안 그려진 순간에도 타일이 찌그러지면 안 된다. */
.ph { position:relative; border:1px solid var(--border); border-radius:9px; overflow:hidden;
  aspect-ratio: var(--ph-ar, 1); cursor:grab; background:var(--surface); }
.ph .thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.ph img.thumb { object-fit:cover; }
/* 손님이 «직접 잡은» 장 — 타일이 곧 프레임이고 사진이 그 안에 놓인다(편집 창과 같은 셈).
   바탕이 흰색이라 줄여 놓은 장은 타일에서도 흰 여백이 그대로 보인다.
   ⚠️ `object-fit:fill` 이 맞다 — 칸 자체가 이미 사진의 제 비율이라 늘어나지 않는다. */
.ph img.thumb.cropped { position:absolute; object-fit:fill; max-width:none; }
.ph:has(> img.thumb.cropped) { background:#fff; }
.ph.hero { grid-column: span 2; grid-row: span 2; border:2px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ph.hero .thumb { font-size:14px; }
/* 「대표 사진」 라벨 (J.J 2026-08-22 · 사진6) — 전엔 «앱색으로 꽉 채운» 알약이라 사진 위에서
   혼자 튀었다. 색감은 죽이지 않되 «면»이 아니라 «유리»로 간다: 어두운 반투명 위에 앱색 글자.
   ⛔ 색을 회색으로 빼지 마라 — 대표 사진은 계속 눈에 띄어야 한다. */
/* 대표 라벨 (J.J 2026-08-23) — ⛔ 별표 없음 · ⛔ 테두리 없음 · 글자는 흰색.
   사진 위에 얹히는 것이라 판 색과 상관없이 흰 글자가 맞다(자르기 창 손잡이와 같은 규율). */
.ph .badge { position:absolute; top:7px; left:7px; display:inline-flex; align-items:center; gap:4px;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size:10.5px; font-weight:700; letter-spacing:-.1px;
  padding:3px 9px; border-radius:999px; border:0; box-shadow:0 1px 6px rgba(0,0,0,.3); }
.ph .ord { position:absolute; bottom:5px; right:6px; background: rgba(0,0,0,.6); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; }
.ph.dragging { opacity:.35; }
.ph.over { outline: 2px dashed var(--accent); outline-offset:-2px; }
.ph.add { border:2px dashed #98a2b3; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ph.add:hover { border-color:var(--text); }
.ph.add .plus { display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--muted); font-size:20px; font-weight:700; line-height:1; }
.ph.add .plus span { font-size:10.5px; font-weight:600; }
.pg.grouped{ display:block; max-width:690px; }
.ph.gph{ cursor:pointer; }
.mini-bot{ width:20px; height:20px; border-radius:6px; background:color-mix(in srgb,#000 32%,var(--surface)); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.mini-bot svg{ width:13px; height:13px; color:var(--accent); }
.ven-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px; }
.ven-why{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--text);
    background:color-mix(in srgb,#000 7%,transparent); border:1px solid color-mix(in srgb,#ffd21a 50%,var(--border)); padding:3px 10px 3px 4px; border-radius:999px; white-space:nowrap; }
.ven-why:hover{ filter:brightness(1.12); }
.ven-hint{ font-size:12px; font-weight:600; color:var(--muted); }
.ven-raw{ flex-basis:100%; font-size:11.5px; color:var(--muted); overflow-wrap:anywhere; }
.ven-fill{ flex-basis:100%; display:flex; align-items:center; gap:7px; margin-top:2px; }
.ven-in{ flex:1; min-width:0; padding:7px 11px; font-size:13.5px; }
.nm-draghint .nm-grip{ cursor:default; }
.nm-slot{ display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg); }
.nm-slot.dragging{ opacity:.35 }
.nm-slot.over{ outline:2px dashed var(--accent); outline-offset:-2px }
.nm-slot.off{ opacity:.62 }
.nm-grip{ flex:none; color:var(--muted); font-size:16px; letter-spacing:-2px; cursor:grab; }
.nm-pos{ flex:none; width:14px; text-align:center; font-size:11px; font-weight:700; color:var(--muted); }
.nm-stx{ display:grid; gap:2px; min-width:0; }
.nm-sname{ font-size:13px; font-weight:800; color:var(--text); }
.nm-ex{ font-size:11.5px; color:var(--muted); }
.nm-lock{ margin-left:auto; flex:none; font-size:10.5px; font-weight:800; color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--border); padding:3px 9px; border-radius:999px; white-space:nowrap; }
.nm-slot .col-sw{ margin-left:auto; }
.nm-slot .nm-lock + .col-sw{ margin-left:0; }
.nm-slot .col-sw input:disabled:checked + .col-track{ opacity:.55; background:var(--accent-fill); border-color:transparent; }
/* 제품 화면 이름 줄 */
  .nm-box{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.nm-in{ flex:1; min-width:220px; padding:9px 12px; font-size:16px; font-weight:800; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:9px; }
.nm-in:focus{ outline:none; border-color:var(--accent); }
.al-title .ven-why{ margin-left:0; }
/* 원본 이름 — 버튼 바로 아래 뜨는 작은 창 (모달 아님) */
  .nm-anc{ position:relative; display:inline-flex }
.nm-pop{ position:absolute; right:0; top:calc(100% + 7px); z-index:40; width:340px; max-width:78vw;
    display:grid; gap:6px; padding:11px 13px; border-radius:11px; text-align:left;
    background:color-mix(in srgb, var(--text) 9%, var(--surface));
    border:1px solid var(--border); border-top:3px solid color-mix(in srgb, var(--accent) 70%, var(--border));
    box-shadow:0 14px 36px rgba(0,0,0,.5) }
.nm-pop b{ font-size:11.5px; font-weight:800; color:var(--accent) }
.nm-pop span{ font-size:12.5px; line-height:1.6; color:var(--text); word-break:break-word }
/* ⚙ 는 «셋팅으로 가는 문»이다 — 상태가 아니다. 그래서 상태색을 안 쓰고 «알아두기» 계열(--read)을 쓴다.
   전엔 회색 글자 + 테두리라 아이콘 티가 안 났다 (J.J 2026-08-22).
   ⛔ 테두리를 두지 않는다. 옅은 둥근 바탕 하나로 «누를 수 있는 것»임을 말한다. */
/* ⚠️ 그림은 «글자 ⚙» 가 아니라 SVG 다 — 글꼴마다 모양이 달라 톱니로 안 보였다 (J.J 2026-08-22).
   ⚠️ 바탕은 그림보다 «조금만» 커야 한다. 28px 상자에 15px 글자면 여백이 너무 넓어 상자만 보였다.
      지금은 24px 상자에 16px 그림 — 여백 4px. */
.card-gear{ margin-left:auto; flex:none; width:24px; height:24px; padding:0; line-height:0; border-radius:7px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--read); background:var(--read-bg); border:0; }
.card-gear:hover{ color:var(--read); background:color-mix(in srgb,var(--read) 26%,var(--read-bg)); }
/* ⚙️ 이름표 — 브라우저 기본 툴팁 대신 바로 뜨는 설명 (호버·키보드 포커스). 버튼이 오른쪽 끝이라 왼쪽으로 펼쳐요. */
  .cg-anc{ position:relative; display:inline-flex; flex:none; margin-left:auto; }
.cg-tip{ position:absolute; right:calc(100% + 7px); top:50%; transform:translateY(-50%); z-index:45;
    padding:5px 10px; border-radius:8px; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden;
    font-size:11.5px; font-weight:700; line-height:1.4; color:#fff; background:rgba(12,14,18,.94);
    border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 6px 18px rgba(0,0,0,.45); }
.card-gear:hover + .cg-tip, .card-gear:focus-visible + .cg-tip{ opacity:1; visibility:visible; }
/* '자동 규칙'만 색을 달리해 — 이 제품 하나가 아니라 앞으로 전부에 적용된다는 신호 */
  .cg-auto{ color:var(--auto); font-weight:800; }
/* 쇼피파이 어드민에서 뭐라고 부르는 칸인지 — 정보라서 작고 흐리게 */
  .po-h .card-gear{ width:24px; height:24px; font-size:13px; }
/* 안 씀 = 값에 줄 긋기 */
  .tc-row .ven-fill{ margin-top:0; }
.tc-row .ven-fill .ghost{ flex:none; }
/* 후보 사진 고르기 — 소싱해 온 사진에는 사이즈표·중국어 안내컷이 섞여 있어요.
     체크를 끈 사진은 지우지 않고 아래 '안 쓰는 사진'(.phg) 묶음으로 내려요 — 위 그리드엔 쓸 사진만 남아요.
     (20~30장 들어오는 제품에서 흐린 사진이 사이사이 끼면 눈이 자꾸 걸려요) */
  .ph-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 11px; }
.ph-note{ flex-basis:100%; margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
.ph-note b{ color:var(--text); font-weight:800; }
.ph[data-i]:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
/* 체크를 끈 사진 — 아래 묶음 안에서 흐리게. 순서·대표 사진·사진 설명에서 빠져요 */
  .ph.ph-off{ border-style:dashed; }
.ph.ph-off .thumb{ opacity:.26; filter:grayscale(1); }
.phg-body .ph{ cursor:default; }
/* 안 쓰는 사진은 끌지도, 자르지도 않아요 — 체크만 다시 누르면 돼요 */
  /* 펼친 안에서는 조금 덜 흐리게 — 어떤 사진인지 알아봐야 되돌릴 수 있으니까요 (회색은 그대로 = 안 쓰는 표시) */
  .phg-body .ph.ph-off .thumb{ opacity:.5; }
/* 공급처 링크 — '원본 이름 보기' 옆. 둘 다 "이게 어디서 왔나"라서 한 덩어리로 둬요 */
  .nm-from{ margin-left:auto; display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; }
.src-link{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:11.5px; font-weight:800;
    color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.src-link:hover{ filter:brightness(1.12); }

/* 미디어 카드 머리글·업로드 타일 — 목업 규칙 단위 (2026-08-07 3차)
   🔴 여기 `.ph.hero` · `.ph.hero .thumb` · `.ph .badge` · `.ph .ord` 가 «한 벌 더» 있었다.
      위(1679~) 에 이미 같은 선택자가 있어서 **뒤에 있는 이것이 이겼다** — 대표 라벨을 위에서
      고쳤는데 화면은 옛 모습 그대로였다(J.J 2026-08-22 실측으로 잡았다. BOARD §0-A ⑦ 그 자리다).
      네 줄을 걷었다. 정본은 위 한 곳뿐이다. ⛔ 여기에 `.ph` 규칙을 다시 적지 마라. */
.ph.add { border:2px dashed #98a2b3; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ph.add:hover { border-color:var(--text); }
.ph.add .plus { display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--muted); font-size:20px; font-weight:700; line-height:1; }
/* 올리는 동안 — 눌러도 아무 일 안 나는 것처럼 보이지 않게(A10). 두 번 눌러 두 번 올라가는 것도 막는다 */
.ph.add.busy { pointer-events:none; opacity:.55; border-style:solid; border-color:var(--accent); }
.ph.add .plus span { font-size:10.5px; font-weight:600; }
.tip-more{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--text);
    background:color-mix(in srgb,#000 7%,transparent); border:1px solid color-mix(in srgb,#ffd21a 50%,var(--border)); padding:3px 10px 3px 4px; border-radius:999px; white-space:nowrap; }
.tb-caret{ flex:none; width:11px; text-align:center; font-size:12.5px; line-height:1; color:var(--muted); transition:transform .15s; }
.tb-rh:hover .tb-caret{ color:var(--accent); }
.tb-row.open .tb-caret{ transform:rotate(180deg); }
/* 후보 사진 고르기 — 소싱해 온 사진에는 사이즈표·중국어 안내컷이 섞여 있어요.
     체크를 끈 사진은 지우지 않고 아래 '안 쓰는 사진'(.phg) 묶음으로 내려요 — 위 그리드엔 쓸 사진만 남아요.
     (20~30장 들어오는 제품에서 흐린 사진이 사이사이 끼면 눈이 자꾸 걸려요) */
  .ph-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 11px; }
.ph-cnt{ font-size:13.5px; font-weight:800; color:var(--text); }
.ph-cnt b{ font-weight:800; color:var(--accent); }
.ph-cnt.none b{ color:var(--over); }
.ph-warn{ flex:none; font-size:11.5px; font-weight:800; color:var(--over);
    background:color-mix(in srgb,var(--over) 13%,transparent); border:1px solid color-mix(in srgb,var(--over) 35%,transparent);
    padding:3px 9px; border-radius:999px; }
.ph-click{ margin-left:auto; flex:none; font-size:11.5px; font-weight:700; color:var(--muted); }
.ph-note{ flex-basis:100%; margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
.ph-note b{ color:var(--text); font-weight:800; }
/* 재료가 어떤 상태인가 — 서버 `fetch.말` 한 줄. 목업엔 없는 줄이라(목업은 사진이 늘 있다)
     같은 카드의 .ph-head 어법(간격·글자 크기)에 맞춘다. 색은 목업 인라인 <style> 의 --accent 계열. */
.ph-fetch{ flex-basis:100%; order:-1; display:flex; align-items:center; gap:9px; margin:0 0 2px;
    padding:9px 12px; border-radius:10px; font-size:13px; font-weight:700; line-height:1.55; color:var(--text);
    background:color-mix(in srgb,var(--accent) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); }
.ph-fit{ position:absolute; left:6px; bottom:5px; z-index:2; font-size:10px; font-weight:800; color:#fff; white-space:nowrap;
    background:rgba(0,0,0,.66); padding:2px 7px; border-radius:5px; box-shadow:0 1px 4px rgba(0,0,0,.35); }
/* 안 쓰는 사진 묶음 — 체크를 끈 사진이 위 그리드에서 빠져 여기로 내려와요 (지운 게 아니라 접어둔 것).
     한 장이라도 꺼야 생기고, 처음엔 접혀 있어요. 여닫는 모양은 추가 정보 칸(.tb-row)과 같은 방식 —
     같은 화면에서 접는 법을 두 번 배우게 하지 않으려고 .tb-caret 을 그대로 씁니다. */
/* ⚠️ 전엔 «긴 알약 한 줄»이라 못생겼다(J.J). 카드 안의 다른 묶음처럼 «구역»으로 두고,
   글은 두 단(제목 / 귀띔)으로 나눈다. 화살표는 오른쪽 끝으로 — 여닫는 것이 뒤에 오는 게 자연스럽다. */
/* ⚠️ 폭을 «사진 판만큼» 쓴다. 전엔 max-width:640px 이라 사진 줄보다 짧아 어정쩡했다
   (J.J: 「토글 양옆길이가 좀 짧은거 같아. 디자인적으로 옆으로 길게」). */
.phg{ width:100%; margin-top:14px; border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--surface) 60%, var(--bg)); }
.phg-h{ display:flex; align-items:center; gap:10px; padding:10px 13px; cursor:pointer; user-select:none; }
.phg-h:hover{ background:color-mix(in srgb, var(--text) 4%, transparent); }
.phg-n{ font-size:13px; font-weight:800; color:var(--text); white-space:nowrap; }
.phg-n b{ color:var(--muted); font-weight:800; }
.phg-hint{ font-size:12px; color:var(--muted); font-weight:500; }
.phg-h .tb-caret{ margin-left:auto; color:var(--muted); transition:transform .15s; }
.phg-h:hover .tb-caret{ color:var(--accent); }
.phg.open .tb-caret{ transform:rotate(180deg); }
.phg.open .phg-h{ border-bottom:1px solid var(--border); }
.phg-body{ padding:12px 13px 13px; }

/* ⑨ 컬렉션 카드 — 목업 규칙 단위 (2026-08-07) */
.cl-g{ display:grid; gap:6px; }
.cl-gh{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--text); }
.cl-g.etc .cl-gh{ color:var(--over); }
.cl-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; padding:9px 12px; border-radius:10px; color:var(--text);
    background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--border); }
.cl-row b{ font-size:13.5px; font-weight:800; }
.cl-row.etc{ background:color-mix(in srgb,var(--over) 9%,var(--surface)); border-color:color-mix(in srgb,var(--over) 30%,var(--border)); border-left-color:var(--over); }
.cl-why{ font-size:12px; font-weight:600; color:var(--muted); }
.cl-note{ font-size:11.5px; font-weight:600; color:var(--muted); }
/* 직접 담기 = 검색해서 고르기 (컬렉션이 수십 개인 스토어도 있어서 목록을 통째로 안 펼쳐요) */
  .cl-in{ margin-top:2px; padding:9px 12px; font-size:14px; }
.cl-res{ margin-top:0; max-height:250px; }
.cl-res:empty{ display:none; }
.tg-find .cl-in{ margin-top:0; }
/* 컬렉션 = 상자 하나 (태그의 '적용된 태그' 상자와 같은 모양). 칩 하나 = 이 제품이 들어가는 메뉴 하나. */
  .cl-chip.has-auto{ padding-left:5px; }
/* 「자동」 이름표가 앞에 붙는 칩은 왼쪽 여백을 줄여요 */
  .cl-auto{ flex:none; font-style:normal; font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; cursor:help;
    color:var(--auto); background:var(--now-bg); border:1px solid var(--now-ln); }
/* 보라 = 우리가 자동으로 해준 것 (카테고리 ✨ 배지와 같은 색) */
  /* 왜 들어갔는지 — 칩 아무 데나 올리면 바로 떠요 (이름표에만 달면 못 찾아요) */
  .cl-chip.has-auto{ position:relative; cursor:help; }
.cl-tip{ position:absolute; left:0; top:calc(100% + 6px); z-index:40; display:none;
    width:max-content; max-width:280px; white-space:normal; text-align:left;
    padding:7px 10px; border-radius:9px; font-size:12px; font-weight:600; line-height:1.45;
    color:var(--ink); background:#1b2030; border:1px solid var(--border); box-shadow:0 8px 22px rgba(0,0,0,.45); }
.cl-chip.has-auto:hover .cl-tip, .cl-chip.has-auto:focus-within .cl-tip{ display:block; }
.cl-groups .cl-note{ margin-top:9px; }
.cl-groups .cl-g.etc{ margin-top:13px; }
/* 추가 정보 — 칸 하나에 줄 하나. 접힌 줄엔 이름 · 값 미리보기 · 지금 상태만.
     상자 모양은 태그·컬렉션 칸(.tg-box)과 같은 배경을 써서 한 화면처럼 보이게 하고,
     아직 채워야 하는 줄만 경고색 왼쪽 띠(.cl-row.etc 와 같은 방식)로 눈에 띄게 해요. */
  .tb-row{ padding:0; overflow:hidden; background:color-mix(in srgb, var(--surface) 55%, var(--bg)); }

/* ⑩ 추가 정보 카드 — 목업 규칙 단위 (2026-08-07) */
.tb-ta{ width:100%; min-height:64px; padding:9px 12px; font:inherit; font-size:13.5px; line-height:1.6; color:var(--text);
    background:var(--bg); border:1px solid var(--border); border-radius:9px; resize:vertical; }
.tb-ta:focus{ outline:none; border-color:var(--accent); }
.tb-list{ display:grid; gap:6px; }
.tb-item{ display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg); }
.tb-txt{ font-size:12.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.tb-add{ display:flex; gap:6px; margin-top:8px; }
.tb-addin{ flex:1; min-width:0; padding:6px 10px; font-size:12.5px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.tb-addin:focus{ outline:none; border-color:var(--accent); }
/* 제품 화면 추가 정보 줄 */
  .tb-row{ margin-bottom:9px; padding:12px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.tb-row:last-child{ margin-bottom:0; }
.tb-rh{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px; }
.tb-name{ font-size:13.5px; font-weight:800; color:var(--text); }
.tb-badge{ flex:none; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.tb-badge.auto{ color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--border); }
/* 정보 배지 — 형광 아님 (옆 '되돌리기'와 안 싸우게) */
  .tb-badge.own{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); }
.tb-row .tb-undo{ margin-left:auto; }
/* 자동으로 채워졌다는 배지 — 전부 보라로 통일 (라임은 눌러야 하는 것에만) */
  .cat-badge.ai, .tb-badge.auto{ color:var(--auto);
    background:var(--now-bg); border:1px solid var(--now-ln); }
/* 추가 정보 — 칸 하나에 줄 하나. 접힌 줄엔 이름 · 값 미리보기 · 지금 상태만.
     상자 모양은 태그·컬렉션 칸(.tg-box)과 같은 배경을 써서 한 화면처럼 보이게 하고,
     아직 채워야 하는 줄만 경고색 왼쪽 띠(.cl-row.etc 와 같은 방식)로 눈에 띄게 해요. */
  .tb-row{ padding:0; overflow:hidden; background:color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.tb-row.need{ background:color-mix(in srgb,var(--over) 8%,var(--surface));
    border-color:color-mix(in srgb,var(--over) 30%,var(--border)); border-left:3px solid var(--over); }
.tb-rh{ margin:0; padding:11px 13px; flex-wrap:nowrap; cursor:pointer; }
.tb-rh:hover{ background:color-mix(in srgb,var(--accent) 7%,transparent); }
.tb-rh:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.tb-row.open .tb-rh{ border-bottom:1px solid var(--border); }
.tb-caret{ flex:none; width:11px; text-align:center; font-size:12.5px; line-height:1; color:var(--muted); transition:transform .15s; }
.tb-rh:hover .tb-caret{ color:var(--accent); }
.tb-row.open .tb-caret{ transform:rotate(180deg); }
.tb-rh .tb-name{ flex:none; }
.tb-row.open .tb-name{ flex:1; min-width:0; }
/* 접힌 줄 값 — 알아볼 만큼만 보여주고 길면 …으로 잘라요 */
  .tb-prev{ flex:1; min-width:0; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-prev.none{ opacity:.7; }
.tb-row.open .tb-prev{ display:none; }
/* 아직 채워야 하는 칸 — 비어 있어요 · 골라 주세요 (경고색) */
  .tb-badge.need{ color:var(--over); background:color-mix(in srgb,var(--over) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--over) 36%,transparent); }
.tb-body{ padding:12px 13px; }
/* 리스트형은 손님 화면에 점(•) 붙은 목록으로 나가요 — 그래서 여기도 점 */
  .tb-bul{ flex:none; color:var(--accent); font-weight:800; line-height:1; }
.tb-item .tb-txt{ flex:1; min-width:0; }
/* 선택형 — 미리 만들어 둔 목록에서 하나만 (글 쓰는 칸이 아니에요) */
  .tb-picks{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
/* 안 쓰는 사진 묶음 — 체크를 끈 사진이 위 그리드에서 빠져 여기로 내려와요 (지운 게 아니라 접어둔 것).
     한 장이라도 꺼야 생기고, 처음엔 접혀 있어요. 여닫는 모양은 추가 정보 칸(.tb-row)과 같은 방식 —
     같은 화면에서 접는 법을 두 번 배우게 하지 않으려고 .tb-caret 을 그대로 씁니다. */
  .phg{ margin-top:11px; max-width:640px; border:1px solid var(--border); border-radius:10px; overflow:hidden;
    background:color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.phg-h:hover .tb-caret{ color:var(--accent); }
.phg.open .tb-caret{ transform:rotate(180deg); }

/* 고르기형 안내·칩 — 목업 규칙 단위 */
/* 선택형 — 미리 만들어 둔 목록에서 하나만 (글 쓰는 칸이 아니에요) */
  .tb-picks{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tb-pk{ font-family:inherit; color:var(--text); cursor:pointer; }
.tb-pk:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
.tb-pk.on{ color:var(--accent-ink); background:var(--accent-fill); border-color:transparent; }
.tb-note{ margin-top:9px; font-size:11.5px; color:var(--muted); }

/* 자동 저장 표시 — 목업에서 그대로. 이 화면엔 「임시저장」 버튼이 없다.
   버튼이 안 보이면 사람은 저장할 곳을 찾아 헤매니, 이 줄이 대신 말해준다.
   ⚠️ 실패 갈래(.fail)는 목업에 없다 — 목업은 서버가 없어서 실패할 일이 없었다.
      사라지는 토스트로는 안 된다(빈 화면만 남으면 손님은 «저장됐구나»로 읽는다). */
.save-ind{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; font-weight:700; color:var(--muted); }
.si-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:color-mix(in srgb,var(--muted) 55%,transparent); }
.save-ind.saving .si-dot{ background:var(--over); animation:sipulse 1s ease-in-out infinite; }
.save-ind.saved{ color:var(--ok); }
.save-ind.saved .si-dot{ background:var(--ok); }
@keyframes sipulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }
/* 「저장 안 됨」 — 주황 (J.J 2026-08-28).
   ⛔ `--danger` 를 쓰지 마라. 「저장 안 됨」은 **실패가 아니라 «아직»**이다 —
      08-22 경고창에서 J.J 가 이미 확정한 그 규율이다(tokens.css --warn 주석).
   크기·굵기는 안 건드린다(11.5px/600). 색만 갈리고, 흐리기(.85)만 걷는다. */
.save-ind.안됨{ color:var(--warn); }
.save-ind.안됨 .si-dot{ background:var(--warn); }
.st-gate .save-ind.안됨{ opacity:1; }
.save-ind.fail{ color:var(--err); }
.save-ind.fail .si-dot{ background:var(--err); }
.save-fail{ margin-top:9px; padding:11px 13px; border-radius:10px; font-size:12.5px; font-weight:600;
  color:var(--text); background:color-mix(in srgb,var(--err) 12%,transparent); border:1px solid color-mix(in srgb,var(--err) 45%,var(--border)); }
.save-fail b{ color:var(--err); }
.save-fail .again{ margin-left:9px; padding:5px 12px; font-size:12px; font-weight:800; border-radius:8px; cursor:pointer;
  color:var(--accent-ink); background:var(--accent-fill); border:0; }
.save-fail .again:hover{ filter:brightness(1.06); }

/* 승인 줄 — 목업 gate-bar 그대로. 「저장됨 ✓」가 승인 버튼과 **같은 줄**에 서야 눈에 든다.
   전엔 승인 버튼이 폭 전체(616px)를 차지해 표시가 아래로 밀려 12px 글자만 남았다(실측 2026-08-08). */
.gate-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* 🔄 2026-08-27 (J.J A안) — 두 겹을 «한 줄»로. 세로 여백을 8px 로 줄인다(전 11+9px).
   ⛔ 설명문·「설정 바꾸기」·자동저장 표시는 걷었다. 남는 것은 넷뿐: 상태 라벨 · 상태칩 · 임시저장 · 승인 */
/* ⚠️ `.st-gate .gate-bar{ padding:9px 14px }`(0,2,0)이 더 좁아서 이겼다 — 라이브에서 9px 로 쟀다.
   ⇒ `.st-gate` 를 얹어 «같은 폭 이상»으로 받는다. 오늘 세 번째로 밟은 명시도 자리다. */
.gate-bar.one{ gap:10px; flex-wrap:nowrap; }
.st-gate .gate-bar.one{ padding-top:8px; padding-bottom:8px; }
/* 🔴 라이브에서 재서 잡았다 (2026-08-27 · 🟣제품선택7 지적) — `.pub-one` 은 원래 «혼자 서는 칸»이라
   테두리·배경·안쪽 여백을 갖고 있다. 한 줄 바 안으로 들어오면 그게 그대로 남아 **상자 안 상자**가 되고,
   안쪽 11px 이 바의 8px 을 되돌려 「한 겹으로 낮춘다」가 절반만 든다.
   실측: padding 11px 14px · border 1px · radius 10px · bg #1e2125 가 살아 있었다.
   ⇒ 한 줄 안에서는 «글자 묶음»일 뿐이다. 상자 옷을 벗긴다. */
.gate-bar.one .pub-one{ display:inline-flex; align-items:center; gap:8px; min-width:0;
  margin:0; padding:0; border:0; background:none; border-radius:0; }
.gate-bar.one .pub-one-t{ font-size:12.5px; color:var(--muted); white-space:nowrap }
/* 승인이 «왜» 안 눌리나 — 잠겼을 때만, 단추 위에 뜬다. ⛔ 경고색 아님(막힌 게 아니라 아직인 것이다) */
.gate-approve-wrap{ position:relative; display:inline-flex }
.gate-why{ position:absolute; bottom:calc(100% + 8px); right:0; z-index:5; max-width:280px; padding:8px 11px;
  border-radius:9px; background:var(--surface); border:1px solid var(--read-ln); color:var(--read);
  font-size:12px; line-height:1.5; word-break:keep-all; box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .12s }
.gate-approve-wrap.잠김:hover .gate-why,
.gate-approve-wrap.잠김:focus-within .gate-why{ opacity:1 }
.gate-say{ font-size:13.5px; color:var(--muted); } .gate-say b{ color:var(--text); font-weight:800; }
.gate-right{ margin-left:auto; display:inline-flex; align-items:center; gap:13px; flex-wrap:wrap; }
.gate-approve{ margin-left:0; padding:11px 30px; font-size:15px; font-weight:800; border-radius:10px; background:var(--accent-fill); color:var(--accent-ink); border:0; cursor:pointer; }
.gate-approve:hover{ filter:brightness(1.06); }
.gate-approve:disabled{ opacity:.5; cursor:default; }

/* 「임시저장」 — 승인 옆의 «둘째» 단추 (J.J 2026-08-27).
   ⛔ 승인과 같은 무게로 보이면 안 된다. 승인은 채운 단추, 이건 테두리만. */
.gate-draft{ padding:11px 18px; font-size:14px; font-weight:700; border-radius:10px;
  background:transparent; color:var(--text); border:1px solid var(--border); cursor:pointer; }
.gate-draft:hover{ border-color:var(--muted); }
.gate-draft:disabled{ opacity:.5; cursor:default; }
/* 🔄 편집 화면의 임시저장 — 「B안(회색 면 채움)」으로 다시 잡았다 (J.J 2026-08-28 확정).
   ⛔ 08-27 의 «도는 빛 없는 알약»을 걷은 까닭: **알약은 승인 하나뿐**이어야 한다.
      같은 알약을 나란히 세우면 «같은 종류의 단추 둘»로 읽히고, 가르는 것이 글자 색밖에 안 남는다.
   ⇒ 승인은 면이 없고 힘이 «움직임 + 크기 + 알약»에서 온다. 그래서 임시저장에 면을 깔아도
      «덩치»로 승인을 넘지 않게 축 셋을 못 박는다 — 어떤 상태에서도 안 바뀐다:
        모양 사각 9px (알약 아님) · 크기 12.5px · 6px 12px · 빛 없음
      「저장 안 됨」에서 바뀌는 것은 **면·테두리·글자·굵기 넷뿐**이다.
   ⚠️ 조용함의 기준은 `.pub-one-set`(③ 보조 갈래)이다 — 새 값을 만들지 않았다. */
.st-gate .gate-draft{ padding:6px 12px; border-radius:9px;
  font-size:12.5px; font-weight:600; font-family:inherit;
  background:transparent; color:var(--tx2);      /* #C4CAD3 */
  border:1px solid var(--border);                /* #31353b */
  box-shadow:none; cursor:pointer; white-space:nowrap; }
/* 「저장 안 됨」 — 면이 차오른다.
   🔴 면을 `--wait-bg`(#22262b)로 하지 마라. #22262b + #98A2B3 + #3a3f46 세 값은
      «못 누르는 승인»이 쓰는 그 한 벌이다(아래 `.gate-approve:disabled`) — 그대로 쓰면
      임시저장이 «꺼진 승인»으로 읽힌다. 면은 이 앱의 회색 면(--chip-c)이고,
      #98A2B3(--tx3)은 «테두리에만» 쓴다. */
.st-gate .gate-draft.안됨{
  background:var(--chip-c);                      /* #262a30 */
  border-color:var(--tx3);                       /* #98A2B3 ← J.J 가 고른 값 */
  color:var(--tx);                               /* #F2F4F7 */
  font-weight:700; }
/* ⚠️ 올렸을 때는 08-27 그대로 둔다 — 이번 지침이 «정하지 않은» 자리라 값을 새로 만들지 않았다. */
.st-gate .gate-draft:hover{ color:var(--tx); background:var(--알약-호버); }

/* 「다시 작성」 (J.J 2026-08-27) — 보조 단추다. ⛔ 메인 액션처럼 보이면 안 된다(라임 채우기 금지). */
/* 줄 전체를 오른쪽으로 붙인다 (J.J 2026-08-28). 설명 칸 오른쪽 끝에 단추가 선다. */
.desc-act{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 9px;flex-wrap:wrap}
.desc-again{height:30px;padding:0 13px;border-radius:9999px;background:transparent;color:var(--tx2,var(--text));
  border:1px solid var(--border);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.desc-again:hover{color:var(--text);border-color:var(--muted)}
.desc-again:disabled{opacity:.5;cursor:default}
/* 상태 문구(그리고 그 안의 「새 글쓰기 기준으로…」 단추)는 «단추 왼쪽»에 선다 —
   order 로 자리만 바꾼다. 문구가 떴다 사라져도 「다시 작성」은 늘 같은 오른쪽 끝에 있다.
   ⛔ HTML 차례는 안 바꿨다 — 읽어주는 순서(단추 → 문구)를 그대로 두려고 CSS 로만 옮겼다. */
.desc-again-say{order:-1;font-size:12px;color:var(--muted)}
.desc-again2{height:28px;padding:0 12px;border-radius:9999px;background:transparent;color:var(--read);
  border:1px solid var(--read-ln);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.desc-again2:hover{background:var(--read-bg)}
/* 3번째 뒤 «한 번만» 뜨는 조용한 안내. ⛔ 경고색 금지 — 잘못한 게 아니다. */
.desc-note{margin:0 0 10px;padding:11px 13px;border-radius:9px;background:var(--card,var(--surface));
  border:1px solid var(--border);color:var(--tx2,var(--text));font-size:12.5px;word-break:keep-all}
.desc-note p{margin:0 0 4px}
.desc-note-go{margin-top:8px;height:28px;padding:0 12px;border-radius:9999px;background:transparent;
  color:var(--tx2,var(--text));border:1px solid var(--border);font:inherit;font-size:12px;cursor:pointer}
.desc-note-go:hover{color:var(--text);border-color:var(--muted)}

/* 첫 「다시 작성」 — 사진 3~10장 고르기 창 */
.pick-ask{max-width:720px}
.pick-ask b{display:block;font-size:15.5px}
.pick-ask p{margin:8px 0 0;color:var(--muted);font-size:13px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:14px;
  max-height:46vh;overflow-y:auto}
.pick-one{position:relative;display:block;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer}
.pick-one img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.pick-one input{position:absolute;top:6px;left:6px;width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent)}
.pick-one.on{border-color:var(--accent)}
.pick-foot{display:flex;align-items:center;gap:9px;margin-top:14px}
.pick-n{flex:1;font-size:12.5px;color:var(--muted)}
.pick-no{height:36px;padding:0 14px;border-radius:9999px;background:transparent;color:var(--text);
  border:1px solid var(--border);font:inherit;font-size:13px;cursor:pointer}
.pick-go{height:36px;padding:0 16px;border-radius:9999px;background:var(--accent-fill);color:var(--accent-ink);
  border:0;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.pick-go:disabled{opacity:.45;cursor:default}

/* 「AI가 설명을 만들고 있어요」 — 설명 칸 위의 조용한 한 줄 (J.J 2026-08-27).
   ⛔ 경고색(--warn)을 쓰지 마라. 잘못된 것이 아니라 «오는 중»이다 — 알려주기 파랑(--read) 계열이다. */
.desc-wait{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 12px;border-radius:9px;
  background:var(--read-bg);border:1px solid var(--read-ln);color:var(--read);font-size:12.5px;word-break:keep-all}
/* ⚠️ 글을 반드시 «한 덩어리»로 감싼다(.dw-tx). 안 감싸면 문장이 flex 자식 셋으로 갈려
   **세 칸으로 나뉘어** 선다 — 진짜 화면에 그려 보고서야 보였다. */
.desc-wait .dw-tx{flex:1;min-width:0;line-height:1.6}
.desc-wait b{color:var(--read);font-weight:700}
.dw-dot{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;animation:dw-blink 1.4s ease-in-out infinite}
@keyframes dw-blink{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dw-dot{animation:none;opacity:.7}}

/* 「저장하지 않은 변경사항이 있어요」 확인창 (J.J 2026-08-27 ①-3).
   ⛔ 「저장하지 않고 나가기」는 **보조/위험**이다 — 제일 눈에 띄는 단추가 되면 안 된다. */
.leave-ask{ max-width:440px; }
.leave-ask b{ display:block; font-size:15.5px; }
.leave-ask p{ margin:9px 0 0; color:var(--muted); font-size:13.5px; word-break:keep-all; }
.leave-ask-btns{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
/* ⛔ `font: inherit` 를 쓰지 마라 — 그 한 줄이 font-weight·font-size 를 «되돌린다».
   게다가 이 묶음 선택자가 낱개(.la-save)보다 명시도가 높아, 아래 굵기·크기가 **전부 먹히지 않았다.**
   (진짜 CSS 위에 그려 재 보고 잡았다: 으뜸 단추가 400 으로 나왔다)
   ⇒ 물려받을 것은 «글꼴»뿐이고, 낱개 값은 같은 묶음 안에서 준다. */
.leave-ask-btns button{ width:100%; padding:11px 14px; border-radius:10px; font-family:inherit; font-size:14px; cursor:pointer; }
.leave-ask-btns .la-save{ background:var(--accent-fill); color:var(--accent-ink); border:0; font-weight:800; }
.leave-ask-btns .la-save:hover{ filter:brightness(1.06); }
.leave-ask-btns .la-save:disabled{ opacity:.5; cursor:default; }
.leave-ask-btns .la-stay{ background:transparent; color:var(--text); border:1px solid var(--border); font-weight:700; }
.leave-ask-btns .la-stay:hover{ border-color:var(--muted); }
/* 🔴 포커스는 «링»이 아니라 «테두리»로 말한다 (J.J 2026-08-28).
   이 판은 열 때 laStay.focus() 를 주므로 «누르기도 전에» 포커스 표시가 켜진 채로 뜬다.
   여기 포커스 모양을 안 정해 두면 브라우저가 제 마음대로 밝은 링을 그리고,
   그러면 라임 채움(임시저장하고 나가기)과 나란히 서서 **으뜸이 둘처럼 보인다.**
   → 링은 안 그리고 «있던 테두리»만 진하게 한다. 두께는 1px 그대로다.
   ⭕ 앱이 이미 쓰는 방법이다 — first-shell.css `.fs-next:focus-visible` 가 그렇다. */
.leave-ask-btns .la-stay:focus-visible{ outline:none; border-color:var(--tx2); }
/* 위험한 쪽 — 테두리 없이 작게. 누르려면 «찾아서» 눌러야 한다.
   ⚠️ 자동저장이 없어져서 이 판이 «유일한» 안전망이다 — 눌리면 통째로 사라진다.
      그래서 라임 단추와 같은 리듬으로 붙여 두지 않고, 구분선 아래로 떼어 놓는다. */
.leave-ask-btns .la-drop{ background:transparent; color:var(--muted); border:0; border-radius:0;
  font-size:12.5px; font-weight:400; text-decoration:underline;
  margin-top:6px; padding-top:12px; border-top:1px solid var(--line-s); }
.leave-ask-btns .la-drop:hover{ color:var(--danger, var(--text)); }
.pub-line{ margin-top:11px; font-size:12.5px; color:var(--muted); }
.pub-line b{ color:var(--text); font-weight:800; }
.pub-chg{ margin-left:7px; font-size:11.5px; opacity:.85; }

/* ⛔ 크롭 창의 「사진 모양」 두 단추(.crop-fit·.cf-b·.crop-stage.pad)는 걷었다 (J.J 2026-08-22).
   아무 일도 안 하던 단추였다 — 이제 손님이 «사진 크기»로 말하고, 남는 자리가 흰 여백이 된다. */

/* A13 — 「공급처엔 있는데 스토어엔 없는 변형」 자리.
   ⚠️ 낱말이 아직 없다(J.J 검수). 지금은 잰 값만 나란히 놓는 자리라 조용하게 둔다. */
.vt-gap { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vt-gap-axes { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.vt-gap-axes > div { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* A14 — 「승인했는데 아직 스토어엔 안 갔다」 자리.
   ⚠️ 낱말은 아직 없다(J.J 검수). 여기서 정하는 것은 «경고로 읽히는가»뿐이다 —
      「집행 대상」 카드가 이미 스토어 실값을 보여줬는데 「👁 보기만」이라 경고로 안 읽혔다. */
.apply-warn { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--over) 55%, var(--border));
  background: color-mix(in srgb, var(--over) 12%, transparent); }
.apply-warn.hot { border-color: color-mix(in srgb, var(--err) 55%, var(--border));
  background: color-mix(in srgb, var(--err) 12%, transparent); }
.apply-warn .aw-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.apply-warn .aw-row + .aw-row { margin-top: 4px; }
.apply-warn .aw-times, .apply-warn .aw-err { font-size: 12px; opacity: .85; }
.apply-warn .aw-err { word-break: break-word; }
/* 낱말이 들어올 자리. 비어 있으면 자리를 안 차지한다 — 빈 칸이 보이면 안 된다. */
.apply-warn .aw-slot:empty { display: none; }
.gate-approve[disabled] { opacity: .5; cursor: not-allowed; }

/* 「내 스토어에서 보기」 — ⛔ 낱말이 아직 없다(J.J 검수).
   낱말이 안 들어온 동안 «빈 링크»가 보이면 안 되므로, 비어 있으면 자리를 안 차지한다. */
.tgt-link { font-size: 12px; }
.tgt-link:empty { display: none; }

/* A4 재편집하기 — 상태로 거르는 칸. 낱말은 서버가 준 status 값 그대로다(J.J 검수 대상 아님). */
.sel-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sel-filter .filter-pill { cursor: pointer; border: 1px solid var(--border); background: transparent; }
.sel-filter .filter-pill.on { border-color: var(--accent); font-weight: 600; }

/* ⓪-b ㉠ — 사진 타일의 「글자 지우기」 손잡이. ⛔ 낱말은 아직 없다(J.J 검수) — 아이콘만. */
/* ⚠️ 전엔 «마우스를 올려야» 보였다(opacity:0). J.J 가 손잡이가 있는 줄도 몰랐다 —
   안 보이면 없는 것이다. 늘 보이게 두고, 올렸을 때만 또렷해진다.
   ⛔ 앱 토큰만 쓴다 — `--line` 같은 «없는 이름»을 쓰면 대체값이 튄다(전에 그래서 흰 판이 떴다). */
/* ⚠️ 전엔 오른쪽 아래였는데 «순서 숫자»(.ord)가 같은 자리라 겹쳐 보였다(J.J).
   왼쪽 아래로 옮긴다 — 체크(오른쪽 위)·숫자(오른쪽 아래) 어느 쪽과도 안 부딪힌다. */
.ph .ph-erase { position: absolute; left: 4px; bottom: 4px; z-index: 2;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--text); border-radius: 6px; width: 24px; height: 24px; line-height: 1;
  cursor: pointer; opacity: .55; transition: opacity .12s, border-color .12s; }
.ph:hover .ph-erase, .ph .ph-erase:focus-visible { opacity: 1; border-color: var(--accent); }

/* ⓪-b ㉡ — 처음 셋팅으로 들어가는 문. ⛔ 링크 글자는 그 화면들 자기 제목 그대로다(J.J 검수 대상). */
.first-links { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.first-link { display: block; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: inherit; }
.first-link:hover { border-color: var(--accent); }


/* ── 목업에서 «안 옮겨져 있던» 것들 (2026-08-12) ─────────────────────────────
   J.J: 「원래 목업에서는 인터렉션처럼 리드미컬하게 움직이는데 … 우리껀 모양도이상하고 안움직여」
   재보니 안내원 애니메이션 22개가 통째로 빠져 있었다(HTML 은 목업과 같은데 판만 없었다).
   그리고  규칙이 없어서 사진 다섯 장이 «가로»가 아니라 세로로 쌓였다 — 그게 「모양이 이상」이다.
   ⚠️ 목업이 정본이라 «글자 그대로» 옮긴다. 값을 손보지 않는다. */
.wc-strip{ display:flex; gap:5px; }
@keyframes aipulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--over) 50%, transparent) } 70%,100%{ box-shadow:0 0 0 7px transparent } }
@keyframes dcaret{ 50%{ opacity:0 } }
@keyframes fillin{ 0%,10%{ opacity:0; transform:translateY(-5px) scale(.88) } 22%,74%{ opacity:1; transform:none } 90%,100%{ opacity:0; transform:translateY(-5px) scale(.88) } }
@keyframes wparr{ 0%,6%{ opacity:.15; transform:translateX(-7px) } 17%,80%{ opacity:1; transform:none } 92%,100%{ opacity:.15; transform:translateX(-7px) } }
@keyframes catpop{ 0%,6%{ opacity:.12; transform:scale(.72) } 18%,80%{ opacity:1; transform:none } 92%,100%{ opacity:.12; transform:scale(.72) } }
@keyframes catgone{ 0%,6%{ opacity:.9 } 18%,80%{ opacity:.34 } 92%,100%{ opacity:.9 } }
@keyframes gatepop{ 0%{ opacity:0; transform:scale(.4) } 60%{ transform:scale(1.18) } 100%{ opacity:1; transform:none } }
@keyframes tcflash{ 0%,55%{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent) } 100%{ box-shadow:0 0 0 3px transparent } }
@keyframes tchi{ 0%,12%{ opacity:.3 } 24%,80%{ opacity:1 } 92%,100%{ opacity:.3 } }
@keyframes tcin{ 0%,12%{ opacity:0; transform:translateY(7px) scale(.78) } 24%,80%{ opacity:1; transform:none } 92%,100%{ opacity:0; transform:translateY(7px) scale(.78) } }
@keyframes nmstrike{ 0%,9%{ transform:scaleX(0) } 20%,90%{ transform:scaleX(1) } 97%,100%{ transform:scaleX(0) } }
@keyframes nmcut{ 0%,9%{ opacity:1; transform:none } 22%{ opacity:.8 } 42%,90%{ opacity:.12; transform:translateY(6px) scale(.92) } 97%,100%{ opacity:1; transform:none } }
@keyframes nmkeep{ 0%,44%{ transform:none; filter:none } 58%,90%{ transform:translateY(-4px); filter:brightness(1.15) } 97%,100%{ transform:none; filter:none } }
@keyframes nmfin{ 0%,48%{ opacity:0; transform:translateY(8px) scale(.95) } 62%,90%{ opacity:1; transform:none } 97%,100%{ opacity:0; transform:translateY(8px) scale(.95) } }
@keyframes imsnap{ 0%,10%{ opacity:0; transform:translateY(-9px) scaleY(.68) } 24%,80%{ opacity:1; transform:none } 92%,100%{ opacity:0; transform:translateY(-9px) scaleY(.68) } }
@keyframes clfly{ 0%,8%{ opacity:0; transform:translateX(-16px) } 26%,80%{ opacity:1; transform:none } 94%,100%{ opacity:0; transform:translateX(-16px) } }
@keyframes clcheck{ 0%,20%{ background:var(--surface); border-color:var(--border) } 34%,80%{ background:var(--accent); border-color:transparent } 94%,100%{ background:var(--surface); border-color:var(--border) } }
@keyframes clmark{ 0%,20%{ opacity:0 } 34%,80%{ opacity:1 } 94%,100%{ opacity:0 } }
@keyframes alcap{ 0%,10%{ opacity:.2; transform:translateY(5px) } 26%,80%{ opacity:1; transform:none } 94%,100%{ opacity:.2; transform:translateY(5px) } }
@keyframes alfly{ 0%,26%{ opacity:0; transform:translateX(-26px) } 46%,80%{ opacity:1; transform:none } 94%,100%{ opacity:0; transform:translateX(-26px) } }
@keyframes tbin{ 0%,14%{ opacity:0; transform:translateX(-9px) } 30%,82%{ opacity:1; transform:none } 94%,100%{ opacity:0; transform:translateX(-9px) } }

/* 「처음 셋팅하시는 분이라면」 — 눌러야 열리는 옆창. 저절로 안 뜨고, 덮지 않는다.
   ⛔ 앱 토큰만 쓴다(없는 이름을 쓰면 대체값이 튄다 — 전에 그래서 흰 판이 떴다). */
/* ⚠️ 전엔 밑줄 친 작은 글자였다. J.J: 「너무 작은거 같아 좀 잘보이는 곳에 라벨형태로」
   → 칩(라벨)으로 키우고, 문구 뒤가 아니라 «줄을 따로» 차지하게 둔다. */
/* 🔄 2026-08-23 (J.J) — «알약을 버리고 작은 SaaS 직사각»으로. 다른 칩들과 안 섞이게.
   어두운 면 + 라임 글자·얇은 라임 테두리 · 이모지 대신 crop 줄그림 · 살짝 더 높고 넓게. */
/* 🔄 2026-08-23 (J.J) — 라임이라 옆의 «지금 할 일» 것들과 섞였다. 색을 «알려주기»(--read) 계열로 바꿨다.
   그 계열은 tokens.css 가 「상태가 아니다 · 알려주기만 한다」로 못박아 둔 자리라 뜻도 맞는다. */
.ph-firsthelp { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0; padding: 9px 14px;
  border: 1px solid var(--read-ln); border-radius: 11px;
  background: var(--read-bg); color: var(--read);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ph-firsthelp svg { flex: none; }
.ph-firsthelp:hover { border-color: var(--read); filter: brightness(1.06); }
/* ⚠️ flex-basis:100% 를 주면 «폭»까지 100% 가 된다(칩이 가로로 늘어났다).
   줄만 따로 쓰게 하려면 그냥 블록으로 두면 된다 — 폭은 글자만큼만. */
.ph-note .ph-firsthelp { display: flex; }
.fh { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 92vw); z-index: 70;
  background: var(--surface); border-left: 1px solid var(--border); color: var(--text);
  display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.28); }
.fh-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.fh-body { padding: 14px 16px; overflow: auto; display: grid; gap: 16px; }
/* 🔄 2026-08-23 (J.J) — 가이드창 안이 «한 덩어리»로 보여 안 읽혔다. 넷을 같이 고쳤다:
   ① 항목 제목 앞에 색 블릿  ② 제목 한 단계 크게  ③ 설명 글자를 흰색 쪽으로  ④ 항목 사이 옅은 선 */
.fh-it { display: flex; gap: 11px; align-items: flex-start; padding-top: 13px; border-top: 1px solid var(--border); }
.fh-it:first-of-type, .fh-sec + .fh-it { border-top: 0; padding-top: 0; }
/* 🔄 2026-08-24 (J.J · A-3안) — 「제목이 한눈에 안 들어온다. 제목과 그 아래 글자가 비슷하다」
   층을 «셋»으로 벌린다:  묶음 제목(파랑 작게) → 기능 제목(흰 굵게) → 설명(회색)
   ⛔ 새 색을 만들지 않는다 — tokens 의 --read · --text · --tx3 셋만 쓴다.
   ⛔ 제목에 색을 칠하지 않는다(A-2 를 걸렀다): 제목이 전부 파랑이면 «누르는 것»처럼 읽힌다.
      파랑은 «묶음 제목»에만 둔다. */
/* 🔴 라이트에서 «파랑 위 파랑»이라 안 보였다 (J.J 2026-08-24 실측: 칸 면 #e7f6f9 · 테 #c8ebf0 ·
   창 바탕 #FFFFFF → 칸이 바탕에 묻히고 그 위 파랑 글리프라 약하다).
   ⇒ ②안: **면을 비우고 테로 세운다.** 색은 한 겹(테+글리프)만 쓴다.
   ⛔ 면을 채우지 않는다 — 채운 칸은 이 앱에서 «켜져 있음/선택됨»이라는 뜻이라, 그냥 목록 아이콘에
      쓰면 손님이 상태로 읽는다. (그리고 마법봉이 제 색을 잃는다)
   ⚠️ 테 굵기는 테마마다 다르다 — 자손 규칙은 테마로 못 가르니 «변수»로 가른다(라이트 1.5px · 다크 1px). */
.fh-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--chip-c); color: var(--read);
  font-size: 15px; line-height: 1; }
/* 「영역 지우기」만 «테두리형»이다 (J.J 2026-08-24 실물 확인).
   그 칸의 그림은 마법봉 — 제 색(금색)을 들고 있어서, 회색 면 위에서는 파랑 글리프들보다 오히려 덜 띈다.
   ⇒ 그 하나만 면을 비우고 파랑 테로 세운다. 굵기는 1px(다른 칸의 회색 테와 같은 굵기)로 둔다. */
/* 🔄 J.J: 「파란 테가 좀 너무 티긴 하다 — 딱 한 단계만 색을 낮춰라」
   ⇒ 굵기(1px)는 그대로 두고 «색만» 한 단계 내린다: 알려주기 파랑에 테두리색을 섞는다.
   ⛔ --read-ln 으로 내려가지 않는다 — 그게 처음에 라이트에서 «묻히던» 그 값이다(#c8ebf0).
      섞는 자리는 그 둘의 «가운데»다. */
.fh-ic.fh-ic-out { background: transparent;
  border: 1px solid color-mix(in srgb, var(--read) 55%, var(--border)); }
/* ⚠️ 제목 b 만 블록이다. `.fh-it b` 로 잡으면 «본문 안» b(✎ 같은 것)까지 줄이 바뀐다. */
/* 제목 — 15px/800 흰색. ⛔ 앞의 «색 블릿»은 걷었다(아이콘 칸이 그 자리를 대신한다). */
.fh-it > div > b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 3px;
  letter-spacing: -.2px; color: var(--text); }
.fh-it p b { color: var(--text); }
/* 설명 — 제목과 «가까웠다»(--tx2 #C4CAD3 는 흰색에 너무 붙는다). 한 단계 내린다. */
.fh-it p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--tx3); }

/* 옆창 «움직이는 그림» — J.J: 「실제목업처럼 영상처럼 마치 볼수있는 그림으로 움직이게 해줘
   글만보면헷갈려」. 목업 데모 어법(.demo·리듬 애니메이션)을 그대로 따른다. */
.fhd { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); position: relative; }
.fhd-ph { width: 30px; height: 38px; border-radius: 5px; flex: none; position: relative;
  background: linear-gradient(135deg, #6b8cff, #4d84ff); display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 800; }
.fhd-ph.dim { opacity: .3; }
.fhd-arrow { color: var(--muted); font-weight: 800; }
/* ① 누르면 — 손가락이 내려와 톡, 자르기 틀이 뜬다 */
.fhd-finger { position: absolute; left: 22px; top: 6px; font-size: 15px; animation: fhtap 2.6s ease-in-out infinite; }
.fhd-box { width: 46px; height: 38px; border: 2px dashed var(--accent); border-radius: 5px;
  opacity: 0; animation: fhbox 2.6s ease-in-out infinite; }
@keyframes fhtap { 0%,18%{ transform: translateY(-7px); opacity:.5 } 28%,40%{ transform: translateY(2px); opacity:1 }
  55%,100%{ transform: translateY(-7px); opacity:.5 } }
@keyframes fhbox { 0%,38%{ opacity:0; transform: scale(.82) } 52%,86%{ opacity:1; transform:none } 96%,100%{ opacity:0; transform: scale(.82) } }
/* ② 끌면 — 앞의 두 장이 자리를 바꾼다 */
.fhd-drag .fhd-ph.a { animation: fhdragA 3s ease-in-out infinite; }
.fhd-drag .fhd-ph.b { animation: fhdragB 3s ease-in-out infinite; }
@keyframes fhdragA { 0%,14%{ transform:none } 40%,72%{ transform: translateX(38px) } 92%,100%{ transform:none } }
@keyframes fhdragB { 0%,14%{ transform:none } 40%,72%{ transform: translateX(-38px) } 92%,100%{ transform:none } }
/* ③ 체크를 끄면 — 체크가 꺼지고 아래로 내려간다 */
.fhd-chk { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; display: grid; place-items: center;
  font-style: normal; animation: fhchk 3s ease-in-out infinite; }
.fhd-off .fhd-arrow { animation: fhdown 3s ease-in-out infinite; }
@keyframes fhchk { 0%,26%{ opacity:1; transform:none } 40%,100%{ opacity:0; transform: scale(.6) } }
@keyframes fhdown { 0%,30%{ opacity:.25; transform: translateY(-3px) } 48%,84%{ opacity:1; transform: translateY(2px) } 96%,100%{ opacity:.25; transform: translateY(-3px) } }
/* 절 제목 — 「1. 맨 위 대표 기능」 처럼 묶음을 가른다 (J.J 2026-08-22 · 사진2) */
/* 묶음 제목 — 세 층의 «맨 위». 파랑·작게·자간 넓게 + 아래 선 한 겹 (J.J 2026-08-24 · A-3) */
.fh-sec { margin: 10px 0 -2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--read);
  border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.fh-sec:first-child { margin-top: 0; }

/* ④ 영역 지우기 — «브러시로 칠하면» 그 자리가 사라진다 (J.J 2026-08-22: 칠하기 → 사라짐) */
.fhd-cn { font-style: normal; font-size: 9px; animation: fhcn 3s ease-in-out infinite; }
@keyframes fhcn { 0%,32%{ opacity:1; filter:none } 56%,88%{ opacity:0; filter: blur(3px) } 98%,100%{ opacity:1; filter:none } }
.fhd-brush { position:absolute; left:2px; top:12px; width:0; height:13px; border-radius:3px;
  background: color-mix(in srgb, var(--accent) 55%, transparent); animation: fhbrush 3s ease-in-out infinite; }
@keyframes fhbrush { 0%,10%{ width:0; opacity:0 } 20%{ opacity:.9 } 34%{ width:26px; opacity:.9 }
  58%{ width:26px; opacity:0 } 100%{ width:0; opacity:0 } }

/* ⑤ 「사진 직접 편집하기」 셋 — 프레임 «안»에서 사진이 잘리고·커지고·움직인다.
   글은 제목뿐이라(J.J: 설명이 길어지지 않게) 그림이 뜻을 다 져야 한다. */
.fhf { position:relative; width:52px; height:38px; flex:none; border-radius:5px; overflow:hidden;
  background:#fff; border:1px solid var(--border); }
.fhf-ph { position:absolute; left:0; top:0; width:100%; height:100%; font-style:normal;
  background: linear-gradient(135deg, #6b8cff, #4d84ff); }
.fhf-crop { animation: fhfcrop 3s ease-in-out infinite; }
@keyframes fhfcrop { 0%,16%{ inset:0 } 42%,74%{ inset:0 14px 0 0 } 96%,100%{ inset:0 } }
.fhf-zoom { animation: fhfzoom 3s ease-in-out infinite; transform-origin:center; }
@keyframes fhfzoom { 0%,14%{ transform:scale(1) } 42%,72%{ transform:scale(.56) } 96%,100%{ transform:scale(1) } }
.fhf-move { animation: fhfmove 3s ease-in-out infinite; }
@keyframes fhfmove { 0%,14%{ transform:none } 44%,74%{ transform: translate(11px,-7px) } 96%,100%{ transform:none } }

/* 「쓸 사진만 체크해 주세요」 — 숫자 옆에 붙는다(J.J: 「어차피 조그마니까 … 옆에」).
   숫자가 주인공이라 이 줄은 한 톤 낮춘다. */
.ph-cnt .ph-do { margin-left: 10px; color: var(--muted); font-weight: 500; font-size: 12.5px; }
/* 영상이 없을 때 — 카드는 열리되 «없다»고만 말한다 (J.J 2026-08-22 · 영상1).
   ⛔ 여기에 올리기 단추를 그리지 마라. 서버에 영상 올리는 문이 아직 없다. */
.vd-none { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* 편집 창 머리의 「영역 지우기」 — 닫기 왼쪽에 붙는다.
   J.J 2026-08-22 · 사진3 — 테두리·글자는 #bfcee0, 연필만 «꽉 찬 연필색»(아이콘 안에 박혀 있다). */
.crop-head .crop-erase { margin-left: auto; display:inline-flex; align-items:center; gap:6px;
  color: var(--erase-ink); border-color: var(--erase-ink); }
.crop-head .crop-erase:hover { border-color: var(--erase-ink); color: var(--erase-ink);
  background: color-mix(in srgb, var(--erase-ink) 12%, transparent); }
.crop-head .crop-erase .pen-ico { flex:none; }
.crop-head .crop-x { margin-left: 8px; }

/* 「아래 이미지들은 스토어 이미지들이에요」 — 알림 띠. J.J: 「약간 오류나 알림노티스처럼 …
   따라서 «엑스»를 할수도 잇게」. ?로 이유를 펴고, ✕로 닫는다(값은 안 바뀐다 — 보기만 접는다). */
.ph-fetch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--over) 45%, var(--border));
  background: color-mix(in srgb, var(--over) 10%, transparent); color: var(--text); }
.ph-fetch.busy { border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ph-fetch .ph-fetch-tx { flex: 1 1 auto; }
.ph-fetch .ph-fetch-x { flex: none; border: 0; background: none; color: var(--muted);
  font-size: 13px; line-height: 1; padding: 2px 4px; cursor: pointer; border-radius: 5px; }
.ph-fetch .ph-fetch-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.ph-why { flex-basis: 100%; margin: 4px 0 0; padding-top: 8px; font-size: 12.5px; line-height: 1.6;
  color: var(--muted); border-top: 1px solid var(--border); }


/* ① 안 쓰는 사진 칸을 «위 그리드와 같은 크기»로 (J.J: 「가로비율넓이가 왜 작지? 가로가 맞췄으면」).
   원인: 위는 `.pg{repeat(6,1fr); max-width:640px}` 인데 아래는 `.photo-grid{auto-fill minmax(120px)}` 라
   서로 «다른 격자»였다. 묶음 자체는 넓게 두되(앞서 J.J 요청), 안쪽 격자만 같은 규칙을 쓴다. */
.phg-body .photo-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
/* ⚠️ 위 규칙만으로는 «칸 크기»가 안 맞았다 — 실측(1440 창) 위 138px / 아래 135px.
   격자를 6칸으로 맞춰도 «담는 그릇»이 다르면 칸이 달라진다: 위 #pg 는 878px 인데
   아래는 묶음 좌우 여백 13px 씩 때문에 850px 이었다(gap 도 8 vs 10 으로 갈려 있었다).
   → 좌우 여백을 0 으로 두고 gap 을 10 으로 맞춘다. 그래야 아래 사진이 위 사진과 «같은 줄»에 선다.
   ⛔ `max-width:640px` 은 뺐다 — 미디어 카드가 카드 폭을 다 쓰게 바뀐 뒤로 위 격자엔 없는 값이다. */
.phg-body { padding: 12px 0 13px; }

/* ② 여닫는 세모 (J.J 두 번 짚음: 「토글 닫는거 저 버튼이 작다니까 키워달라고」).
   ⚠️ 처음엔 `font-size` 만 키웠는데 그대로였다 — 원래 규칙에 `width:11px` 이 있어서
      글자가 그 폭에 갇혔다. 폭·높이를 같이 줘야 커진다. 눌리는 자리도 «보이게» 둘렀다. */
.phg-h .tb-caret { width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 17px; line-height: 1; border-radius: 8px;
  /* J.J: 「점선 테두리로 해줘 아주연한 형광으로 대신에 찐한형광말고」 —
     라임을 «묽게» 섞어 점선으로. 진한 라임은 «눌러야 하는 것» 자리라 여기엔 안 쓴다. */
  border: 1px dashed color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--bg); color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.phg-h:hover .tb-caret { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent); }


/* ── 미디어 카드 폭을 «카드만큼» 쓴다 (J.J 2026-08-12) ─────────────────────────
   『이거 고쳤다면서 여기 여백이 있자나 … 넓이를 말야』
   원인: 사진 격자·안 쓰는 묶음이 `max-width:640px` 에 묶여 있어서 카드 오른쪽이 비어 있었다.
   위·아래 격자가 «같은 6칸»이라 폭만 풀면 둘 다 같이 커진다(칸 크기는 계속 맞는다). */
/* 🔴 실측 2026-08-23 — `#pg` 는 `.pg` 가 아니라 `.photo-grid`(auto-fill minmax(120px)) 에 걸려
   **5칸**으로 깔리고 있었다. 그래서 대표(2칸) 옆에 3장뿐이었다. 6칸으로 못박는다 → 대표 빼고 4장.
   ⛔ 아래 「안 쓰는 사진」 격자도 같은 6칸이어야 한다 — 두 격자 칸이 어긋나면 눈에 바로 띈다. */
#pg, #pg.photo-grid, #pg.pg { grid-template-columns: repeat(6, 1fr); }
#pg.pg, .pg { max-width: none; }
.pg.grouped { max-width: none; }
.phg { max-width: none; }
.phg-body .photo-grid { max-width: none; }

/* ── 사이즈표 카드 (2026-08-15 · 1차) ─────────────────────────────────────────
   ⛔ 점수·판정을 보여주지 않는다. 손님이 할 일은 «고르는 것» 하나다. */
#szBox .sz-say { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; }
#szBox .sz-wait { color: var(--muted); font-size: 13px; padding: 8px 0; }
#szBox .sz-grid { display: flex; gap: 10px; flex-wrap: wrap; }
#szBox .sz-grid.all { max-height: 340px; overflow-y: auto; padding: 4px; }
/* 🔄 2026-08-23 (J.J) — 후보 테두리가 «코랄»(--over = --danger)이었다. 후보는 «문제»가 아니다.
   #bfcee0 계열(--erase-ink)로 바꾼다 — 라이트에선 같은 계열의 진한 값이라 대비가 산다. */
#szBox .sz-tile { width: 108px; height: 108px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--erase-ink) 55%, transparent); background: var(--surface); cursor: pointer; }
#szBox .sz-tile img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
#szBox .sz-tile:hover { border-color: var(--accent); }
#szBox .sz-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
#szBox .sz-picked { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
#szBox .sz-picked img { width: 168px; height: 168px; object-fit: contain; background: #fff;
  border-radius: 10px; border: 2px solid var(--accent); }
#szBox .sz-picked-r { display: flex; flex-direction: column; gap: 6px; }
#szBox .sz-sub { color: var(--muted); font-size: 12.5px; }
#szBox .sz-acts { display: flex; gap: 8px; margin-top: 4px; }
#szBox .sz-all { margin-top: 12px; }
#szBox .sz-all summary { cursor: pointer; font-size: 13px; font-weight: 700; }
#szBox .sz-own { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
#szBox .sz-up { border: 1px dashed var(--over); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
#szBox .sz-or { color: var(--muted); font-size: 12.5px; }
#szBox .sz-own input[type=url] { flex: 1; min-width: 220px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--over); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }

/* ── 사이즈표 «판독» (2026-08-17) — 읽은 표를 그대로 보여준다 ─────────────────
   ⛔ 표를 제품설명·메타필드에 자동으로 넣지 않는다. 손님이 [표 복사]로 가져간다. */
#szBox .sz-read { margin: 12px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
#szBox .sz-read.wait { color: var(--muted); }
#szBox .sz-read.err { display: block; }
#szBox .sz-read.err .muted { display: block; margin: 4px 0 8px; font-size: 12.5px; }
/* 「읽을까요?」 — 값(G-Coin)이 나가는 실행 «직전»에 묻는 자리 (DO 2026-08-28 ③).
   ⛔ 경고색을 쓰지 않는다. 잘못된 것이 아니라 «알리는» 자리다. */
#szBox .sz-read.ask { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
#szBox .sz-read.ask .muted { display: block; margin: 4px 0 10px; font-size: 12.5px; line-height: 1.6; }
#szBox .sz-read.ask .sz-2nd { margin-left: 8px; }
/* 읽은 표 상자 — 코랄에서 «집 기본 테두리»로 (J.J 2026-08-23). 다 읽은 것은 문제 상태가 아니다 */
#szBox .sz-read.done { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
#szBox .sz-read-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#szBox .sz-read-h .sz-acts { margin-left: auto; margin-top: 0; }
/* 원문(중국어) 줄 — 기본은 접혀 있다 (J.J 2026-08-23). 「원문 보기」로 편다.
   ⛔ display:none 으로 «지우지» 않는다 — 고칠 수 있는 칸이라 폈을 때 그대로 살아 있어야 한다. */
#szBox .sz-cn.접힘 { display: none; }
#szBox .sz-2nd { display: inline-flex; align-items: center; gap: 6px; }
#szBox .sz-2nd svg { flex: none; }

/* 후보 타일의 «크게 보기» — 오른쪽 아래에 늘 떠 있다(숨겼다 뜨면 있는 줄 모른다) */
.sz-tile-wrap { position: relative; display: inline-flex; }
.sz-tile-zoom { position: absolute; right: 5px; bottom: 5px; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 7px;
  background: rgba(0,0,0,.6); color: #fff; border: 0; cursor: pointer; }
.sz-tile-zoom:hover { background: rgba(0,0,0,.8); }
/* 「AI가 읽어 표로 옮겨드려요」 — 그 부분만 라임 + 앞에 반짝이 (J.J 2026-08-23) */
.sz-ai { color: var(--accent); }
.sz-ai-ico { margin-right: 3px; font-size: 11px; }

#szBox .sz-table-wrap { overflow-x: auto; }
#szBox .sz-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
#szBox .sz-table th, #szBox .sz-table td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; white-space: nowrap; }
#szBox .sz-table th { background: var(--surface); font-weight: 700; }
#szBox .sz-note { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
/* 「확인이 필요한 곳」 — 지어내지 않은 대신 남긴 자리다. 눈에 띄어야 한다. */
#szBox .sz-check { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.6;
  background: color-mix(in srgb, var(--over) 12%, transparent); }
/* 칸 고치기 — 「눌러서 고칠 수 있다」가 보여야 손님이 고친다 */
#szBox .sz-editsay { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
#szBox .sz-table [contenteditable]:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); cursor: text; }
#szBox .sz-table [contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); }
/* 사이즈차트 앱으로 보내기 — ⛔ 판독 직후 저절로 안 간다. 손님이 누를 때만. */
#szBox .sz-send { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
#szBox .sz-send.err { display: block; }
#szBox .sz-send.err .muted { display: block; margin: 4px 0 8px; font-size: 12.5px; }
#szBox .sz-send.done { color: var(--ok); }

/* ── 「리스팅이 처음이신가요?」 (2026-08-16) ─────────────────────────────────
   ⛔ 평소 화면을 방해하지 않는다 — 작은 글씨 링크 하나. 누른 사람만 본다. */
.fl-btn { margin-left: auto; font-size: 12.5px; opacity: .85; }
.fl-btn:hover { opacity: 1; }
.fl-modal { max-width: 620px; }
.fl-modal .fl-say { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.fl-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
/* 🔴 전엔 구분선·번호가 `--over`(= --danger · 경고색)였다 — 「무슨 경고 같다」의 정체다 (J.J 2026-08-22).
   안내 목록은 «알려주는 자리»지 «문제»가 아니다. 줄은 목록선(--line-s), 번호는 무채색으로 조용히. */
.fl-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line-s); }
.fl-row:first-child { border-top: 0; }
.fl-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--read-bg);
  color: var(--read); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; font-variant-numeric: tabular-nums; }
/* 열 줄이 «한 덩어리»로 읽혔다 (J.J 2026-08-22). 색을 더 뿌리는 대신 «움직임»으로 깬다 —
   마우스가 얹힌 줄만 밝아지고 그 줄의 [보러 가기] 가 살아난다. 색은 번호 한 자리에만 쓴다.
   ⛔ 상태색이 아니다 — 가이드 화면 색(--read)이다. 이 목록은 «알려주는 자리»지 «할 일»이 아니다. */
.fl-row { padding-left: 8px; padding-right: 8px; border-radius: 8px; transition: background .12s; }
.fl-row:hover { background: var(--chip-c); }
.fl-row:hover .fl-go { border-color: var(--read); color: var(--read); }
.fl-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fl-t b { font-size: 13.5px; }
.fl-w { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.fl-go { flex: none; font-size: 12px; padding: 4px 10px; }
.gate-flash { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; transition: outline-color .4s; }

/* ── 영상 (2026-08-18 · B4 「작은 판」) ────────────────────────────────────────
   ⛔ 선택자를 «한 벌»로 둔다 — `#vdBox` 아래로만 적는다 (B6-c: `.phg` 가 셋이라
      앞의 고침이 안 먹었던 자리와 같은 병을 만들지 않으려고).
   ⛔ 새 색을 고르지 않는다. 앱이 이미 쓰는 값(var(--muted)·--over·--surface)만 쓴다. */
#vdBox .vd-wrap { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
#vdBox .vd-prev { width: 220px; max-width: 100%; border-radius: 10px; border: 1px solid var(--over);
  background: #000; display: block; }
#vdBox .vd-r { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1; }
#vdBox .vd-tog { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 700; cursor: pointer; }
#vdBox .vd-sub { color: var(--muted); font-size: 12.5px; }
#vdBox .vd-left { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 4px 0 0; }
/* 스토어에 이미 있는 영상 — 손님이 «최종 상태»를 고르는 자리 (J.J 2026-08-19).
   ⛔ 고른 것을 «파랑/라임»으로 칠하지 않는다. 여기서 눈에 띄어야 하는 것은 «뺄 것»이다. */
#vdBox .vd-store { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
#vdBox .vd-store-h { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .04em; margin-bottom: 9px; }
#vdBox .vd-item { display: flex; gap: 11px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
#vdBox .vd-item:first-of-type { border-top: 0; }
#vdBox .vd-item video { width: 84px; border-radius: 8px; background: #000; flex: none; }
#vdBox .vd-item-n { flex: 1; min-width: 120px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
#vdBox .vd-item-k { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 600; cursor: pointer; }
/* 뺄 것으로 고른 줄은 «흐리게 + 빨간 꼬리» — 승인하면 사라진다는 걸 눈으로 알게 */
/* AI 리포트가 «처음 생길 때»는 팝업으로 뜬다 (J.J 2026-08-23).
   한 섹션씩 여는 판이라 접힌 채로 두면 있는 줄도 모른다. 닫으면 그냥 접힌다.
   ⛔ 화면 전체를 덮지 않는다 — 손님이 뒤 칸을 보면서 읽을 수 있어야 한다. */
/* ⚠️ `.report` 가 `top:calc(100% + 8px)` 를 들고 있다 — 그걸 안 지우면 top·bottom 이 둘 다 걸려
   높이가 2px 로 찌그러지고 화면 밖으로 나간다(실측 2026-08-23: y=2017 · h=2). 그래서 top 을 푼다. */
/* 🔄 2026-08-23 (J.J) — «오른쪽 아래»를 걷었다. 자리는 `팝업자리맞추기()` 가 정한다:
   지금 연결된 단계 카드의 «시작 지점 옆». 여기 right/bottom 을 되돌리면 그 계산을 이긴다.
   ⛔ top/left 를 CSS 로 쓰지 마라 — 인라인 값이 없을 «첫 프레임»만 위해 0,0 이 잡히면 깜빡인다.
      대신 `visibility` 로 첫 프레임을 가릴 필요도 없다: 붙이는 즉시 자리를 잡는다(같은 프레임). */
.report.pop{ position:fixed; right:auto; bottom:auto; z-index:60; width:min(420px, 92vw);
  max-height:min(72vh, 560px); overflow:auto;
  /* ⛔ `border` 한 낱말을 여기서 다시 쓰지 마라 — 위 `.report` 의 ㉣ 파랑 3px 윗선까지 덮는다.
     `.report.pop` 이 더 세고(0,2,0) 더 뒤라 그 줄이 이겼고, 손님은 그 파랑 선을 «한 번도» 못 봤다
     (실측 2026-08-30: 요구 3px 파랑 → 실제 `1px solid rgb(49,53,59)`).
     테두리는 `.report` 것이 그대로 온다 — 같은 1px 이라 없앤 것이 없다.
     ⛔ 값을 여기에 옮겨 적지도 마라. 두 벌이 되면 언젠가 한쪽만 바뀐다. */
  box-shadow:0 18px 48px rgba(0,0,0,.45); border-radius:12px; }
@media (max-width: 720px){ .report.pop{ width:calc(100vw - 24px); } }

/* ── 격자 안 «영상 타일» (J.J 2026-08-23) ─────────────────────────────────────
   사진과 같은 칸에 서고, 「영상」 배지로 갈린다(대표 사진 배지와 같은 결).
   ⛔ 색으로 가르지 않는다 — 배지 한 줄이면 충분하다. */
.ph.ph-vd{ position:relative; }
.ph.ph-vd video.thumb{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.ph.ph-vd .vd-none{ display:grid; place-items:center; width:100%; height:100%; background:var(--bg); color:var(--muted); font-size:18px; }
/* 「영상」 배지 — 바탕은 대표 사진 라벨과 «같은» 중립 반투명(유리), 파랑은 아이콘·글자·테두리«만»
   (J.J 2026-08-28). 전엔 `--read-bg` 로 «면»까지 파랗게 채워서 사진 위에서 배지가 통째로 파랬다.
   ⛔ 바탕에 파랑을 넣지 마라 — 대표 사진 라벨과 갈리는 것은 «글자·테두리»지 «면»이 아니다.
   ⛔ 크기·자리·둥근 모서리는 건드리지 않는다 — 위 `.ph .badge` 가 정한 그대로다(테두리도 1px 그대로).
   ⚠️ 여기서만 색을 «박는다». `--read` 낱말을 못 쓰는 까닭: 라이트의 --read 는 파랑이 아니라
      청록(#007b8b)이라(tokens.css 주석) 이 검은 유리 위에서 파랑으로 안 읽힌다. 값은 지어낸 것이
      아니라 사전에 있는 다크 --read(#8fc7f0) 그대로다. 바로 위 `.ph .badge` 가 판 색과 상관없이
      #fff 를 박는 것과 «같은 규율»이다 — 사진·영상 위에 얹히는 라벨은 판이 아니라 «유리»를 바탕으로 읽는다. */
.ph .badge.vd-badge{ left:7px; right:auto; display:inline-flex; align-items:center; gap:4px;
  color:#8fc7f0; border:1px solid rgba(143,199,240,.55); }
.ph .badge.vd-badge .vd-ic{ flex:none; color:currentColor; }
/* 올린 영상 «빼기» — 되돌릴 수 없는 일이라 사진 체크와 다른 모양(✕)으로 둔다 */
.ph .ph-x{ position:absolute; top:6px; right:6px; width:22px; height:22px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.35); cursor:pointer; }
.ph .ph-x:hover{ background:var(--danger); border-color:var(--danger); }
/* 타일 위 「영상 편집하기」 — 올리면 뜬다(대표 사진 배지처럼 «영상»임을 먼저 알린다) */
.ph.ph-vd .vd-edit-hov{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px;
  background:rgba(0,0,0,.72); color:#fff; border:1px solid rgba(255,255,255,.45);
  font-size:12px; font-weight:700; cursor:pointer; opacity:0; transition:opacity .12s; white-space:nowrap; }
.ph.ph-vd:hover .vd-edit-hov, .ph.ph-vd .vd-edit-hov:focus-visible{ opacity:1; }

/* 영상 위 «영상 편집하기» — 올리면 뜬다 (J.J 2026-08-23). 사진처럼 «눌러야» 편집칸이 열린다. */
#vdBox .vd-hov{ position:relative; display:inline-flex; }
#vdBox .vd-edit-hov{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px;
  background:rgba(0,0,0,.72); color:#fff; border:1px solid rgba(255,255,255,.45);
  font-size:12.5px; font-weight:700; cursor:pointer; opacity:0; transition:opacity .12s; }
#vdBox .vd-hov:hover .vd-edit-hov, #vdBox .vd-edit-hov:focus-visible{ opacity:1; }
#vdBox .vd-edit{ display:inline-flex; align-items:center; gap:6px; }
#vdBox .vd-edit svg{ flex:none; }

/* 내가 올린 영상 (2026-08-23) — 스토어 영상과 «같은 줄 모양»을 쓰되 머리만 다르다.
   ⛔ 색으로 구분하지 않는다. 올린 것이 «특별한 상태»가 아니라 그냥 또 하나의 영상이다. */
#vdBox .vd-mine .vd-item-n { color: var(--text); }
#vdBox .vd-item-x { width: 84px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 13px; }
/* 올리는 자리 — 늘 있다(영상이 없는 제품에서 손님이 할 수 있는 일이 이것 하나다) */
#vdBox .vd-up { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
#vdBox .vd-up button[disabled] { opacity: .55; cursor: progress; }
#vdBox .vd-item.빠짐 video { opacity: .45; }
#vdBox .vd-item.빠짐 .vd-item-n { color: var(--err); }


/* ── 제품편집 투어 (2026-08-18 · J.J 7차 스펙) ───────────────────────────────
   J.J: 「지금 문제는 «어디를 봐야 하는지가 안 보이는 것». 더 어둡게가 아니라 **대비**로 잡아야 해.
         다크 오버레이 + 밝은 카드 + 선명한 스포트라이트」

   ⭐ 그래서 «검정을 늘리지 않고» 셋을 쓴다: ① 흐림 ② 활성 카드 밝은 테두리 ③ 밝은/대비 큰 말풍선.
   ⛔ 이 투어에선 **브랜드 라임을 안 쓴다** (J.J 지시: 「형광 연두는 빼고, 포인트는 흰색에 가까운 쿨톤」).
      ⚠️ 앱의 색 규칙(면=--accent-fill)과 어긋나 보이지만 어긋나지 않는다 —
         투어의 면은 «짙은 남색 말풍선»과 «오프화이트 모달»이라 라임이 설 자리가 아니다.
         그리고 아래 값은 라이트·다크 **양쪽에서 같다**(투어는 제 색을 들고 다닌다) —
         그래서 테마별 갈래가 필요 없다. 이게 4차에 라이트에서 깨졌던 병의 근본 해결이다.

   색 (J.J 가 준 값) — 오버레이 rgba(10,14,20,.58~.68) · 말풍선 #0f172a · 모달 #f8fafc
   ⛔ 선택자는 `.tour-` 한 벌만 쓴다 (B6-c 의 `.phg` 셋 사고 방지). */

/* ── ① 어둡게 + 흐리게 ────────────────────────────────────────────────────
   화면 «전체»를 덮고 지금 카드 자리만 `clip-path` 로 도려낸다.
   🔴 전엔 `box-shadow: 0 0 0 9999px` 로 구멍을 팠다. 그 방식으론 **뒤를 흐릴 수 없다** —
      `backdrop-filter` 는 «요소가 덮은 자리»에만 걸리는데, 그 방식은 요소가 구멍 크기라서다.
   ⛔ `pointer-events: none` — 어둡게만 하고 손님을 «가두지 않는다».
   ⛔ 여기에 `transition` 을 넣지 마라 (실측 2026-08-18: 매 프레임 자리를 맞추는 «따라붙기»와
      싸워 구멍이 최대 874px 어긋난 채로 굳었다. node --check 도 시험도 못 잡는다). */
/* 🔄 2026-08-29 (J.J) — **흐림을 뺐다.** 흐림이 「화면 전체를 덮고 clip-path 로 도려내는」
   약한 방식을 강요했고, 구멍이 어긋나면 대상까지 흐려진 채 굳었다(그게 지금 증상이었다).
   흐림을 빼면 그 제약이 사라진다 ⇒ 요소 자체가 «구멍»이고 바깥은 box-shadow 로 어둡게.
   ⭐ 구멍 «안»에는 필터가 0이라 대상이 **원래 화면 그대로 선명하다.**
   ⛔ transition 금지 — 「따라붙기」와 싸워 구멍이 874px 어긋난 채 굳는다(2026-08-18 실측).
   ⚠️ 선택자 이름은 .tour-spot 을 지킨다(이 저장소 규칙: 선택자는 한 벌). */
.tour-spot { position: fixed; z-index: 8990; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(8, 11, 16, .66);
  outline: 1.5px solid var(--read); }

/* ── ② 활성 카드 — 대비를 «내는» 자리 ────────────────────────────────────
   어둠과 따로 둔다: 어둠엔 흐림이 걸려 있어 거기 테를 그리면 테까지 뭉개진다.
   J.J 가 「둘 이상 넣으라」고 한 것 중 셋을 넣었다 — 얇은 밝은 테두리 · 부드러운 글로우 · 그림자. */
/* ⛔ 2026-08-29 — 따로 그리던 테(.tour-ring)는 «걷었다». 구멍의 outline 이 그 일을 한다.
   두 벌로 남기면 하나는 반드시 낡는다. 붙이는 곳도 tour.js 에서 같이 걷었다. */
/* 카드가 «살짝 앞으로» 나온 느낌. ⚠️ 전환을 안 건다 — 크기가 변하는 동안 구멍이 따라오지 못한다. */
/* ⛔ 2026-08-29 — .tour-hi 의 scale 도 걷었다: 대상이 커지는 동안 구멍이 못 따라와 어긋난다.
   구멍의 outline 이 이미 «여기다»를 말한다. 클래스는 남긴다 — tour.js 가 붙였다 떼는 열쇠다. */
.tour-hi { position: relative; z-index: 8991; }

/* 카드 위 작은 표 — 「어디를 보는지」를 카드 자신이 말한다 */
.tour-chip { position: fixed; z-index: 8993; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  background: var(--투어칩-면); color: var(--투어칩-글); border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 700; box-shadow: 0 6px 16px -4px rgba(10, 14, 20, .5); }
.tour-chip-n { color: var(--투어칩-흐림); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── ③ 말풍선 — 짙은 차콜/네이비 + 흰 글자 ───────────────────────────────
   ⛔ 새까만(#000) 게 아니다. J.J: 「완전 검정은 답답해 보인다」 */
/* 🔄 2026-08-29 (J.J §2) — 값은 지침 그대로. ⚠️ 색을 «말풍선 안에서» 못박는다 —
   말풍선은 늘 차콜이라, 토큰(판 따라 바뀜)을 쓰면 밝은 판에서 글자가 차콜 위에 얹혀 안 보인다. */
.tour-tip { position: fixed; z-index: 9000; width: min(344px, calc(100vw - 24px));
  background: #1a1d21; color: #C4CAD3; border: 1px solid #383d44;
  border-radius: 14px; box-shadow: 0 26px 54px -18px rgba(10, 14, 20, .75);
  padding: 14px 16px 12px; }
.tour-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  padding-bottom: 8px; border-bottom: 1px solid #33383f; }
.tour-t { font-size: 14.5px; font-weight: 800; flex: 1; color: #F2F4F7; }
/* 「3 / 9」 — 지금 어디쯤인지. 오른쪽·조용하게 */
.tour-n { font-size: 11.5px; font-weight: 700; color: #98A2B3; font-variant-numeric: tabular-nums; }
/* 🔴 색이 붙는 자리는 셋뿐이다 (J.J §2). 굵게는 「자동 적용」 하나뿐이다. */
.tour-say .t-auto { color: var(--read); font-weight: 800; }
.tour-say .t-app  { color: var(--read); font-weight: inherit; }
.tour-say .t-you  { color: var(--danger); font-weight: inherit; }
/* 9걸음의 두 단추를 «나란히» — 문장으로 풀어 쓰지 않는다(J.J). 갈리는 것은 「어디에 저장되나」다 */
.tour-tb { width: 100%; border-collapse: collapse; margin-top: 9px; }
.tour-tb th { text-align: left; white-space: nowrap; padding: 4px 10px 4px 0; vertical-align: top;
  font-size: 12.8px; font-weight: 700; }
.tour-tb td { font-size: 12.8px; line-height: 1.65; color: #C4CAD3; padding: 4px 0; }
/* ⛔ 2026-08-29 — 옛 뱃지(.tour-must · .tour-auto)는 «걷었다». 붙이는 곳이 0인데 규칙만
   남으면 다음 사람이 되살린다. 색이 붙는 자리는 이제 ✨ · 파랑 · 주황 셋뿐이다(J.J §2). */
.tour-x { background: none; border: 0; color: #94a3b8; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
.tour-x:hover { color: #f8fafc; }
.tour-says { margin: 0 0 12px; }
.tour-says .tour-say { margin: 0 0 6px; }
.tour-says .tour-say:last-child { margin-bottom: 0; }
.tour-say { font-size: 12.8px; line-height: 1.65; margin: 0 0 6px; color: #C4CAD3; }
.tour-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-f-r { display: flex; align-items: center; gap: 6px; }
.tour-skip { background: none; border: 0; color: #64748b; cursor: pointer; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; }
.tour-skip:hover { color: #cbd5e1; }
.tour-prev { background: none; border: 1px solid rgba(255, 255, 255, .18); color: #cbd5e1;
  cursor: pointer; font-size: 12.5px; padding: 6px 12px; border-radius: 9px; }
.tour-prev:hover { border-color: rgba(255, 255, 255, .38); color: #f8fafc; }
.tour-next { background: #f8fafc; color: #0f172a; border: 0; border-radius: 9px;
  cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 7px 16px; }
.tour-next:hover { background: #fff; }

/* ── ④ 시작 안내창 — 오프화이트(완전 흰색 아님) ──────────────────────────── */
.tour-veil { position: fixed; inset: 0; z-index: 9100; background: rgba(10, 14, 20, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.tour-intro { width: min(392px, 100%); display: flex; flex-direction: column; align-items: center; }
.tour-bubble { position: relative; margin-top: 10px; background: #f8fafc; color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .08); border-radius: 16px;
  box-shadow: 0 30px 64px -20px rgba(10, 14, 20, .7); padding: 22px 26px 18px;
  width: 100%; text-align: center; }
.tour-bubble::before { content: ''; position: absolute; top: -8px; left: 50%; margin-left: -8px;
  width: 15px; height: 15px; background: #f8fafc;
  border-left: 1px solid rgba(15, 23, 42, .08); border-top: 1px solid rgba(15, 23, 42, .08);
  transform: rotate(45deg); border-radius: 4px 0 0 0; }
.tour-intro-t { display: block; font-size: 17px; margin-bottom: 9px; color: #0f172a; }
.tour-intro-s { font-size: 13.5px; line-height: 1.68; color: #475569; margin: 0 0 18px; }
.tour-intro-f { display: flex; justify-content: center; align-items: center; gap: 8px; }
/* 안내창의 주 단추는 «짙은 것»이다 — 오프화이트 판 위라 밝은 단추는 안 보인다 */
.tour-go { background: #0f172a; color: #f8fafc; border: 0; border-radius: 10px;
  cursor: pointer; font-size: 13px; font-weight: 700; padding: 9px 20px; }
.tour-go:hover { background: #1e293b; }
/* 안내창의 「건너뛰기」는 «테두리를 준다» (J.J 2026-08-18 8차).
   말풍선 안의 건너뛰기는 글자만으로 충분하지만(짙은 판이라 대비가 산다),
   여기는 오프화이트 판 위에 짙은 주 단추와 «나란히» 서는 자리다 —
   테가 없으면 단추로 안 보이고 «글자 하나»가 떠 있는 것처럼 읽힌다.
   ⚠️ 주 단추와 «같은 크기»로 맞춘다(패딩·굴림·글자 크기). 높이가 다르면 둘이 짝으로 안 보인다. */
/* ⚠️ 세로 패딩이 주 단추(9px)보다 «1px 적다». 테두리 1px 이 위아래로 붙어서
      그대로 두면 36px 대 34px 로 **2px 더 높아진다**(실측). 눈에 띄진 않아도 둘이 안 맞는다. */
.tour-intro .tour-skip { border: 1px solid rgba(15, 23, 42, .20); border-radius: 10px;
  padding: 8px 20px; font-size: 13px; font-weight: 700; color: #475569; background: #fff; }
.tour-intro .tour-skip:hover { border-color: rgba(15, 23, 42, .38); color: #0f172a; background: #fff; }

/* ── ⑤ AI 안내원 ──────────────────────────────────────────────────────────
   ⛔ 아이콘을 늘려 쓰지 않는다 — 24px 용 도형을 늘리면 각짐도 같이 커진다(3차 실패).
   ⛔ 팔은 없다 (6차: 두 판을 고쳐도 어색해서 뺐다). 대신 눈이 깜빡인다. */
.tour-bot { width: 96px; height: 114px; display: block;
  animation: tourFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 12px 20px rgba(10, 14, 20, .45)); }
.tour-bot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tour-bot .tb-body { fill: #f4f6fa; stroke: rgba(15, 23, 42, .12); stroke-width: 1.5; }
.tour-bot .tb-face { fill: #0f172a; }
/* 눈·입은 쿨톤 민트 — 투어에서 브랜드 라임을 뺐다(J.J 7차). 얼굴이 짙어 이 색만 살아난다. */
.tour-bot .tb-lit  { fill: #7dd3fc; stroke: #7dd3fc; }
.tour-bot .tb-eye { transform-box: fill-box; transform-origin: center;
  animation: tourBlink 4.6s ease-in-out infinite; }

/* 붕붕 — ⚠️ 크게 흔들지 않는다(멀미 난다). */
@keyframes tourFloat {
  0%, 100% { transform: translateY(0) rotate(-1.8deg); }
  50%      { transform: translateY(-10px) rotate(1.8deg); }
}
/* 두 번 깜빡 — 한 번이면 눈치 못 채고, 잦으면 산만하다.
   ⚠️ 뜨는 주기(3.4s)와 «일부러 다르게» 뒀다. 같으면 늘 같은 자리에서 깜빡여 기계처럼 보인다. */
@keyframes tourBlink {
  0%, 86%, 100% { transform: scaleY(1) translateY(0); }
  88%, 92%      { transform: scaleY(.16) translateY(2.2px); }
  90%           { transform: scaleY(1) translateY(0); }
}
/* 멀미·어지럼을 타는 손님을 위해 — 움직임만 멈추고 그림·대비는 그대로 */
@media (prefers-reduced-motion: reduce) {
  .tour-bot, .tour-bot .tb-eye { animation: none; }
  .tour-hi { transform: none; }
}

/* ── ⑥ 되돌아올 길 — 닫으면 자동으로 안 뜨니 이 단추가 «반드시» 있어야 한다 */
.tour-anc { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.tour-again { background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); cursor: pointer; font-size: 12px; padding: 3px 11px; }
.tour-again:hover { border-color: var(--accent); color: var(--accent); }

/* 제품 설명 — 브라우저 번역 «안내» 링크 (J.J 2026-08-18)
   ⛔ 앱이 번역해 주는 것처럼 보이면 안 된다 — 그래서 단추처럼 굵게 두지 않고
      «회색 도움말 글씨»로 둔다. 편집을 방해하지 않는 게 이 요소의 첫 조건이다. */
.desc-tr { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.desc-tr:hover { color: var(--text); text-decoration-color: currentColor; }

/* ══ 8단계 구조 — 화면 개편 1·2·3 (J.J 2026-08-20) · 여백·분리 손질 (J.J 2026-08-21) ═══
   1 왼쪽 단계 레일 + 진행 줄 · 2 한 번에 하나만 열기 · 3 아래 고정 승인 바
   목업 정본 : ~/Downloads/제품편집-밝은판.html · 제품편집-어두운판.html
   색은 tokens.css 가 정본이다 — 여기서 값을 새로 적지 않는다.
   ⛔ 카드 «안»은 안 건드린다. 여기 규칙은 «감싸는 것»과 «접는 것»뿐이다.

   ── 여백은 «눈금 넷»으로만 준다 (J.J 2026-08-21 · 들쭉날쭉해서 나온 자리) ──
      8px   단계와 단계 사이 · 마지막 단계와 승인 바 사이
      10px  열린 머리와 내용 사이
      15px  카드 좌우
      16px  내용 마지막과 카드 아래끝 사이
      ⛔ 여기 없는 숫자를 새로 만들지 마라. 하나 늘 때마다 다시 들쭉날쭉해진다 */
/* ── 깊이 — 코어 목업 「깊이시안」의 겹을 «색 없이» 옮겨온다 (J.J 2026-08-21) ──
   시안 : ~/Downloads/앱 디자인/포털홈-판떼기밝게.html
   ⛔ 색을 «칠하는» 게 아니다. 넷 다 흰색·검정 알파라 색상(hue)이 0 이고 tokens.css 를 안 건드린다.
      ① 세로 그라데이션(면이 위에서 밝다)  ② 헤어라인 테두리  ③ 안쪽 윗선  ④ 바닥 그림자
      ⚠️ ①만 있으면 «면»이고, ③이 있어야 «물건»이 된다 — 시안이 직접 적어둔 말이다.
   🔴 ①③ 은 «흰색 알파»라 **어두운 바탕에서만** 통한다. 라이트는 흰 위에 흰색이라 아무것도 안 보인다.
      그래서 라이트는 같은 «떠 있음»을 «아래 그림자»로 만든다. 다크 값을 그대로 베끼면 라이트가 납작해진다.
      (tokens.css 가 --pv 자리에 「라이트에선 틀 안쪽을 밝게가 안 통한다」고 적어둔 것과 같은 함정) */
:root{
  --깊이-면:       linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
  --깊이-윗선:     0 0 0 0 transparent;
  --깊이-바닥:     0 10px 24px -14px rgba(16,24,40,.16), 0 2px 5px -3px rgba(16,24,40,.10);
  --깊이-윗선-얕게: 0 0 0 0 transparent;
  --깊이-바닥-얕게: 0 4px 12px -10px rgba(16,24,40,.13);
  /* 열린 판의 테두리 — 「티가 잘 안 난다」는 자리다 (J.J 2026-08-21). 색이 아니라 «세기»다 */
  --깊이-테두리:   rgba(16,24,40,.26);
  /* 닫힌 단계의 «눌린 면». 🔴 이건 «변수»여야 한다 —
     `@media(dark) :root:not([data-theme="light"]) .st-step` 같은 «자손 규칙»은 「본문만 라이트」를 못 잡는다:
     `:not()` 이 걸린 곳이 :root(<html>)라, 붙임딱지를 본문 그릇에 달아도 :root 는 그대로다(실측으로 밟았다).
     변수는 그 칸에서 다시 정의되니 자손까지 따라온다. ⭐ 자손 규칙엔 media·:root 를 걸지 마라. */
  --단계-닫힌면: var(--chip-c);
  /* 투어의 «표식» 둘 — 이건 투어 제 면이 아니라 «손님 카드 위»에 얹힌다.
     그래서 판을 따라야 한다: 흰 카드 위에 흰 테두리는 안 보인다(라이트에서 실측으로 밟았다).
     ⛔ 투어의 «제 면»(막·말풍선·시작창)은 그대로 둔다 — 판을 안 따르는 게 J.J 7차 결정이다. */
  --투어-테: rgba(15,23,42,.62); --투어-빛: rgba(15,23,42,.16);
  --투어칩-면: #0f172a; --투어칩-글: #f8fafc; --투어칩-흐림: #94a3b8;
  /* 승인 단추를 지나가는 «빛» 두 줄기 — 시안 .gwR 값. 라이트는 흰 빛이 안 보여 어둡게 뒤집는다 */
  --빛-센:   rgba(16,24,40,.62);
  --빛-여린: rgba(16,24,40,.28);
  /* 알약의 «늘 있는» 선 — 빛은 링의 23%만 밝고 176°는 완전 투명이라, 이 선이 없으면
     빛이 지나간 쪽 말고는 단추 모양이 사라진다(시안에선 카드가 그 받침을 대신했다).
     ⛔ 무채색이어야 한다 — 색을 깔면 「초록 테두리 단추」가 되어 시안과 달라진다(한 번 밟았다). */
  --알약-선:   rgba(16,24,40,.20);
  --알약-호버: rgba(16,24,40,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --깊이-면:       linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014));
    --깊이-윗선:     inset 0 1px 0 rgba(255,255,255,.07);
    /* ⚠️ 시안은 «완전 검정»(rgba(0,0,0,.9))인데 여기선 차콜로 내려 쓴다 — 앱에 「완전 검정은 답답하다」는
       J.J 결정이 이미 있고(scripts/test-tour.js 가 지킨다), 바탕(#15171a) 위에서는 눈으로 구별이 안 된다 */
    --깊이-바닥:     0 16px 34px -24px rgba(8,10,14,.90);
    --깊이-윗선-얕게: inset 0 1px 0 rgba(255,255,255,.045);
    --깊이-바닥-얕게: 0 10px 22px -18px rgba(8,10,14,.85);
    --깊이-테두리:   rgba(255,255,255,.30);
    --단계-닫힌면: var(--page);
  --투어-테: rgba(255,255,255,.92); --투어-빛: rgba(226,240,255,.30);
  --투어칩-면: #f8fafc; --투어칩-글: #0f172a; --투어칩-흐림: #64748b;
    --투어-테: rgba(255,255,255,.92); --투어-빛: rgba(226,240,255,.30);
    --투어칩-면: #f8fafc; --투어칩-글: #0f172a; --투어칩-흐림: #64748b;
    --빛-센:   rgba(240,247,255,.95);
    --빛-여린: rgba(198,214,232,.52);
    --알약-선:   rgba(255,255,255,.16);
    --알약-호버: rgba(255,255,255,.08);
  }
}
/* 손님이 고른 판 — 사전과 «같은 넷»이어야 한다. 반만 넓히면 판을 바꿔도 깊이가 안 따라온다 */
[data-theme="dark"]{

  --깊이-면:       linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014));
  --깊이-윗선:     inset 0 1px 0 rgba(255,255,255,.07);
  /* ⚠️ 시안은 «완전 검정»(rgba(0,0,0,.9))인데 여기선 차콜로 내려 쓴다 — 앱에 「완전 검정은 답답하다」는
     J.J 결정이 이미 있고(scripts/test-tour.js 가 지킨다), 바탕(#15171a) 위에서는 눈으로 구별이 안 된다 */
  --깊이-바닥:     0 16px 34px -24px rgba(8,10,14,.90);
  --깊이-윗선-얕게: inset 0 1px 0 rgba(255,255,255,.045);
  --깊이-바닥-얕게: 0 10px 22px -18px rgba(8,10,14,.85);
  --깊이-테두리:   rgba(255,255,255,.30);
  --단계-닫힌면: var(--page);
  --빛-센:   rgba(240,247,255,.95);
  --빛-여린: rgba(198,214,232,.52);
  --알약-선:   rgba(255,255,255,.16);
  --알약-호버: rgba(255,255,255,.08);
}
[data-theme="light"]{
  --깊이-면:       linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
  --깊이-윗선:     0 0 0 0 transparent;
  --깊이-바닥:     0 10px 24px -14px rgba(16,24,40,.16), 0 2px 5px -3px rgba(16,24,40,.10);
  --깊이-윗선-얕게: 0 0 0 0 transparent;
  --깊이-바닥-얕게: 0 4px 12px -10px rgba(16,24,40,.13);
  /* 열린 판의 테두리 — 「티가 잘 안 난다」는 자리다 (J.J 2026-08-21). 색이 아니라 «세기»다 */
  --깊이-테두리:   rgba(16,24,40,.26);
  --단계-닫힌면: var(--chip-c);
  --투어-테: rgba(15,23,42,.62); --투어-빛: rgba(15,23,42,.16);
  --투어칩-면: #0f172a; --투어칩-글: #f8fafc; --투어칩-흐림: #94a3b8;
}
.st-top{ max-width:1000px; margin:0 auto }
/* 지금 편집 중인 제품 — 늘 위에 뜨는 «알려주기» 띠 (J.J 2026-08-23 · 기타1).
   ⛔ 해야 할 일처럼 보이지 않게: 색 없음 · 단추 없음 · 테두리 한 겹. */
/* 🔄 2026-08-24 (J.J) — «한 줄짜리 고정 바». 스크롤해도 위에 붙어 제품을 늘 알 수 있고,
   전처럼 위에 큰 빈 자리가 생기지 않는다.
   ⛔ 공통 상단 메뉴(.gr-top — sticky top:0 · 높이 50px)를 «덮지 않는다». 그 아래(top:50px)에 선다.
   ⚠️ 배경을 반드시 칠한다 — 투명하면 스크롤된 카드가 글자 뒤로 비쳐 지나간다. */
/* 🔄 2026-08-29 (J.J) — **상단 스티키를 걷었다.** 위·아래가 동시에 따라다녀 편집 영역을 먹었다.
   제품 정보(.st-now)와 「편집 순서 보기」는 왼쪽 레일로 내려갔고, 여기 남은 것은
   한자 경고 같은 «화면 머리»뿐이다. 그래서 이제 그냥 흐름 위에 있는다.
   ⛔ 자리를 통째로 지우지 않는다 — 한자 경고가 붙는 자리라, 지우면 그게 갈 곳을 잃는다.
   ⚠️ 유리·흐림도 같이 걷는다. 안 따라다니는 것을 반투명으로 두면 «떠 있는 것처럼» 보여 거짓말이 된다. */
.st-top{ position:static; z-index:auto;
  /* ② 유리 (J.J 2026-08-24) — 땅 색과 «똑같아서» 겉돌던 것을 반투명+흐림으로 바꿨다.
     밑 내용이 지나가는 게 비쳐서 «떠 있는 바»로 읽힌다.
     ⚠️ 흐림이 안 먹는 브라우저에서도 글자는 읽혀야 한다 → 밑색을 72% 로 남겨 둔다(투명 아님). */
  background:none;
  display:flex; align-items:center; gap:10px; padding:0;
  border-bottom:0; margin-bottom:0; }
/* 비어 있으면 자리도 안 먹는다 — 한자 경고가 없을 때 빈 칸이 남으면 위가 벌어져 보인다 */
.st-top:empty{ display:none }
/* 🔄 2026-08-29 — 왼쪽 레일 «맨 위»로 내려왔다. 한 줄이 아니라 세로로 쌓는다
   (레일이 좁아서 한 줄로 두면 제품명이 두 글자만 보인다).
   ⛔ 「해야 할 일」처럼 보이면 안 된다 — 색 없음·강조 없음. 단계 레일과 «한 덩어리»로 읽히게
      구분선 하나만 아래에 둔다. */
.st-now{ display:flex; flex-direction:column; align-items:stretch; gap:7px; min-width:0;
  margin:0 0 10px; padding:0 0 10px; border:0; border-bottom:1px solid var(--border); background:none; }
.st-now .st-now-line{ display:flex; align-items:center; gap:9px; min-width:0; }
/* 🔄 2026-08-29 2차 (J.J 확정안) — 맨 윗줄: [← 목록] ......... [↗ 바로가기 ▾]
   제품정보보다 «위»다. 그래야 메뉴가 열려도 아래 「편집 단계」 제목 글자 윗부분(17px)만 덮고
   진행 막대는 안 덮는다. */
.st-now .st-now-top{ display:flex; align-items:center; gap:8px; min-width:0; }
/* ← 목록 — 테두리를 걷고 «글자만» 남긴다.
   ⛔ 왼쪽 여백도 걷는다. 그래야 썸네일과 «같은 세로줄»(레일 왼쪽에서 10px = 테두리 1 + 안여백 9)에 선다.
      테두리·안여백이 있으면 글자가 20px 에서 시작해 썸네일보다 10px 안쪽으로 밀린다. */
.st-back{ display:inline-block; width:auto; margin-right:auto; text-align:left;
  font-size:12px; font-weight:700; color:var(--muted); background:transparent;
  border:0; border-radius:0; padding:6px 0; cursor:pointer; }
.st-back:hover{ color:var(--text); }
/* 🆕 ↗ 바로가기 — 밖으로 나가는 링크를 «하나»로 묶은 문 (J.J 2026-08-29 확정안 ㉢).
   결은 중립이다: 테두리는 --border, 글자는 --muted. **파랑(--read)은 ↗ 하나뿐이다.**
   ⛔ 라임(--now/--accent)을 쓰지 마라 — 그건 «진행 단계» 색이라 바로 아래 막대와 섞인다. */
.st-now .st-go{ position:relative; flex:none; }
.st-now .st-go-b{ display:inline-flex; align-items:center; gap:4px; font:inherit;
  font-size:11.5px; font-weight:700; color:var(--muted); background:transparent;
  border:1px solid var(--border); border-radius:8px; padding:5px 8px; cursor:pointer; white-space:nowrap; }
.st-now .st-go-b:hover{ color:var(--text); border-color:var(--read); }
.st-now .st-go-i{ color:var(--read); }
.st-now .st-go-v{ font-size:9px; color:var(--tx3); }
/* 메뉴 — 폭 172px. 레일 안쪽이 178px 이라 밖으로 안 나간다.
   높이는 한 줄 44px · 두 줄 76px (항목 32px + 안여백 10 + 테두리 2). */
.st-now .st-go-m{ position:absolute; top:calc(100% + 6px); right:0; z-index:40; width:172px;
  padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--깊이-바닥-얕게); }
.st-now .st-go-m[hidden]{ display:none; }
/* 항목 모양 = [아이콘] 낱말 …… ↗ */
.st-now .st-go-it{ display:flex; align-items:center; gap:7px; min-width:0; padding:7px 8px;
  border-radius:7px; font-size:12px; font-weight:600; color:var(--text); text-decoration:none; }
.st-now .st-go-it:hover{ background:var(--chip-c); }
.st-now .st-go-ic{ flex:none; width:14px; height:14px; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; line-height:1; }
.st-now .st-go-tx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-now .st-go-ar{ flex:none; color:var(--read); font-weight:700; }
.st-now img{ width:34px; height:34px; flex:none; border-radius:7px; object-fit:cover; background:var(--bg); }
.st-now .st-now-x{ width:34px; height:34px; flex:none; border-radius:7px; background:var(--bg); border:1px solid var(--border); }
.st-now .st-now-t{ min-width:0; font-size:13px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-now-w{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
/* 🆕 승인 상태 — 제품명 «아래» 작은 줄 (J.J 2026-08-29 확정안 ㉮).
   「현재 편집 중」이 서 있던 자리를 그대로 이어받는다(글자 10.5px/700 — 옛 규격 그대로).
   ⚠️ 두 색은 밝기가 거의 같아 대비가 1.45 다 — 색만으로 가르면 초록을 못 가리는 손님에겐
      같은 회색 점이다. 그래서 «모양»으로도 가른다: 승인 전 = 빈 고리 · 승인 완료 = 채운 점.
   ⛔ 라임(--now)을 쓰지 마라 — 이 화면에서 라임은 「지금 해야 함」이라, 「승인 전」에 주면
      상태가 할 일로 바뀐다. 승인하라는 말은 아래 큰 단추가 이미 하고 있다. */
.st-now .st-now-st{ display:flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.st-now .st-dot{ flex:none; width:7px; height:7px; border-radius:50%; }
.st-now .st-now-st.no{ color:var(--tx3); }
.st-now .st-now-st.no .st-dot{ border:1.5px solid var(--tx3); background:none; }
.st-now .st-now-st.ok{ color:var(--done); }
.st-now .st-now-st.ok .st-dot{ border:0; background:var(--done); }
.st-now-step{ flex:none; margin-left:auto; font-size:12px; font-weight:700; color:var(--read);
  background:var(--read-bg); border:1px solid var(--read-ln); border-radius:999px; padding:4px 11px; white-space:nowrap; }

/* 🆕 2026-08-29 (J.J ③) — 레일 아래 «보조» 단추. 상단 드롭다운에서 내려온 자리다.
   ⛔ 라임을 쓰지 않는다 — 이 화면에서 가장 강한 것은 아래 「승인」 하나뿐이다. */
.st-rail .st-tour{ display:block; width:100%; margin-top:12px; padding:8px 10px;
  font:inherit; font-size:12px; font-weight:700; color:var(--muted);
  background:transparent; border:1px dashed var(--border); border-radius:8px; cursor:pointer; }
.st-rail .st-tour:hover{ color:var(--text); border-color:var(--read); border-style:solid; }

/* ⚠️ 여기도 `margin:0 auto` 를 뺐다 — `.studio` 가 grid 라 auto 여백이 붙으면 내용만큼 줄어들어
   레일·단계가 머리줄보다 16px 안쪽에 섰다. 폭은 `.pane` 이 이미 잡는다 (J.J 2026-08-21) */
.st-shell{ display:grid; grid-template-columns:198px minmax(0,1fr); gap:20px;
  width:100%; margin:0; align-items:start }
.st-body{ min-width:0 }

/* ── 1 · 단계 레일 — 흰(차콜) 카드 패널. 앱 사이드 메뉴와 «다른 물건»으로 보이게 ── */
.st-rail{ position:sticky; top:18px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:12px 9px;
  box-shadow:var(--깊이-윗선-얕게), var(--깊이-바닥-얕게) }
/* 「이 제품 진행」 — 보조색(--tx3)은 너무 흐렸다. 한 단계 밝은 «중성 제목색»으로 (J.J 2026-08-21).
   ⛔ 상태색이 아니다 — 제목이라 무채색이어야 한다 (라이트 10.78 · 다크 10.89) */
.st-rh{ color:var(--tx2); font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:0 8px 9px; margin:0 }
.st-p{ display:flex; align-items:center; gap:8px; padding:0 8px 11px; color:var(--muted); font-size:12px }
.st-pbar{ flex:1; height:4px; border-radius:3px; background:var(--chip-c); overflow:hidden }
.st-pbar i{ display:block; height:100%; background:var(--now-solid) }   /* 진행 막대 = 현재 단계 색 */
.st-p b{ color:var(--text); font-weight:700 }
/* 여덟 줄의 높이가 «똑같아야» 잇는 선이 곧게 선다. 그래서 줄 높이를 값으로 못 박는다 */
.st-rs{ position:relative; display:flex; gap:9px; align-items:flex-start; width:100%; background:none; border:0;
  color:var(--text); font:inherit; font-size:13px; padding:8px; min-height:50px; border-radius:7px;
  cursor:pointer; text-align:left }
.st-rs:hover{ background:var(--chip-c) }
.st-rs.here{ background:var(--chip-c) }
.st-rs .tx{ flex:1; min-width:0 }
.st-rs .tx b{ display:block; font-weight:600; color:var(--text); font-size:13px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st-rs.here .tx b{ font-weight:700 }
/* ⚠️ 설명은 «여덟이 다 한 줄»이어야 한다 (J.J 2026-08-21).
   전엔 두 줄 자리를 늘 잡아(min-height:33px) 높이를 맞췄다 — 줄 높이는 맞았지만 빈 줄이 남았다.
   이제는 «접히지 않게» 막는다. 레일 폭에서 글자가 넘치면 말줄임표가 뜬다 — 그게 보이면 설명이 긴 것이다. */
.st-rs .tx small{ display:block; color:var(--muted); font-size:11.5px; margin-top:1px; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── 번호를 «잇는 선» ── 동그라미가 따로 떠 있으면 체크리스트로 읽힌다. 이어야 «과정»이 된다.
   1px · 아주 은은하게. 강하면 오히려 복잡해진다 (J.J 2026-08-20).
   자리: 번호 원 중심 = 왼 패딩 8px + 원 23px 의 절반 = 19.5px → 1px 선을 19px 에 둔다
   위아래: 원 아래끝(8+23=31)에서 2px 띄우고, 다음 줄 원 위끝(줄높이+8)에서 2px 못 미치게 멈춘다 */
.st-rs::after{ content:""; position:absolute; left:19px; top:33px; bottom:-6px; width:1px;
  background:var(--line-s); pointer-events:none }
.st-rs:last-child::after{ display:none }
/* 지나온 구간은 «지금색»이다 — 완료색(초록)을 쓰면 선까지 「끝났다」고 말하게 된다 (J.J 2026-08-21) */
.st-rs.지나옴::after{ background:color-mix(in srgb, var(--now) 42%, var(--line-s)) }

/* ── 2 · 단계 여덟이 «각각의 카드»로 읽히게 (J.J 2026-08-21) ──────────────
   전엔 한 상자 안에 줄만 그어 여덟이 «한 덩어리»로 보였다 — 어디가 열렸는지 약했다.
   ⛔ 상태색을 카드 전체에 칠하지 않는다. 열린 표시는 «면 한 단계 + 왼쪽 얇은 선»뿐이다. */
/* 「전부 펼치기」 스위치 줄 — 목록 바로 위 오른쪽 (J.J 2026-08-24).
   ⛔ 새 스위치를 만들지 않는다 — SKU 보기와 같은 부품(.col-sw)을 그대로 쓴다. */
.st-tools{ display:flex; justify-content:flex-end; margin:0 0 8px }
.st-allsw{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  color:var(--tx2); cursor:pointer; user-select:none }   /* 글자를 한 단계 밝게 (J.J 2026-08-25) */
.st-allsw:hover{ color:var(--text) }
.st-list{ display:flex; flex-direction:column; gap:8px }
.st-step{ background:var(--단계-닫힌면); border:1px solid var(--border); border-radius:10px; overflow:hidden }
/* 열린 단계 — «면»이 아니라 «물건»이 된다 (J.J 2026-08-21).
   면 위에 세로 그라데이션 ① · 안쪽 윗선 ③ · 바닥 그림자 ④ 를 얹고, 3px 현재단계 선은 그대로 둔다.
   ⛔ 도는 빛·발광은 안 넣는다 — 시안의 그 연출은 홈 카드 «둘»의 서명이다. 여기선 여덟이 같이 돌아 방해가 된다. */
.st-step.open{ background:var(--깊이-면), var(--surface);
  border-color:var(--깊이-테두리);
  box-shadow:inset 3px 0 0 0 var(--now), var(--깊이-윗선), var(--깊이-바닥) }
/* 땅이 검정이면 닫힌 단계는 «땅과 같은 색»(눌린 면)이고, 라이트에선 회색이다 —
   그 갈림은 위 `--단계-닫힌면` 이 들고 있다. 여기 규칙은 하나면 된다. */
.st-head{ display:flex; align-items:center; gap:11px; width:100%; min-height:52px; padding:13px 15px;
  background:none; border:0; font:inherit; color:var(--text); cursor:pointer; text-align:left }
.st-head:hover{ background:var(--chip-c) }
.st-t{ font-size:14px; font-weight:600; color:var(--text); white-space:nowrap }
.st-sum{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-width:0 }
.st-chev{ color:var(--muted); font-size:10px; flex:none; transition:transform .12s }
.st-step.open > .st-head{ cursor:default; padding-bottom:10px }
.st-step.open > .st-head:hover{ background:none }
.st-step.open .st-t{ font-size:16px; font-weight:700 }
.st-step.open .st-chev{ transform:rotate(90deg) }
.st-in{ padding:0 15px 16px }
.st-step:not(.open) .st-in{ display:none }
/* 카드가 «단계 안»에 들어왔으니 카드 껍데기를 벗긴다 — 상자 안의 상자를 만들지 않는다 */
.st-in .card{ background:none; border:0; border-radius:0; box-shadow:none; padding:0; margin:0 0 18px }
.st-in .card:last-child{ margin-bottom:0 }

/* 상태 뱃지는 «각 항목 첫 줄 오른쪽 끝» 한 자리에서 읽힌다 (J.J 2026-08-22 · 카테고리3).
   🔴 전엔 제목 «바로 옆»에 붙어 있어서 항목마다 뱃지가 서는 자리가 달랐다 — 눈이 매번 다시 찾았다.
   ⚙ 이 있는 항목은 「뱃지 → ⚙」 차례로 둘 다 오른쪽 끝에 선다.
   ⚠️ 카드 제목은 h2 안에 칩이 들어 있다 → h2 를 늘리고 칩만 밀어낸다. */
.st-in .card > h2.big,
.st-in .card > .card-h > h2.big{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.st-in .card > h2.big > .chip6,
.st-in .card > .card-h > h2.big > .chip6{ margin-left:auto; }
/* ⚙ 은 «칩 다음» 자리다 — 카드 머리가 flex 라 순서만 지키면 된다 */
.st-in .card > .card-h{ align-items:center; }

/* 추천 카테고리 — «줄»로 눕는다.
   ⚠️ 전엔 `.cat-row.rec`(가로 flex) 안에 있어서 저절로 눌렸는데, 짜임새를 세로로 바꾸면서
      단추가 칸 높이만큼 늘어났다(실측: 한 칸이 세로로 100px 넘게 벌어졌다).
      세로 flex 에서는 `align-items` 를 안 주면 아이템이 «늘어난다». */
.cat-pick .cat-recs{ flex:none; align-items:flex-start; }
.cat-pick .cat-rec{ flex:0 1 auto; }

/* Secondary 단추 — «찾기 쉽게» (J.J 2026-08-22 · 판매가2).
   ⛔ 라임 Primary 처럼 과하게 강조하지 않는다. #bfcee0 계열(`--erase-ink`)을 쓴다. */
/* ⚠️ `button.ghost` 가 «요소+클래스»라 `.sec-btn` 하나로는 못 이긴다 — 같은 무게로 맞춘다.
      (실측: 색이 --wait 회색 그대로였다. 「고쳤는데 화면이 그대로」인 그 자리다) */
button.sec-btn{ color:var(--erase-ink); border-color:var(--erase-ink); font-weight:700; }
button.sec-btn:hover{ color:var(--erase-ink); border-color:var(--erase-ink);
  background:color-mix(in srgb, var(--erase-ink) 12%, transparent); }

/* ── 사이즈표 카드 (J.J 2026-08-22 · 사이즈표3) ────────────────────────────
   무채색 SaaS 형이 기본이다. ⛔ 핑크/주황 테두리 없음 — 라임은 «고른 것·지금 고치는 칸»에만. */
.sz-intro{ display:flex; flex-direction:column; gap:3px; margin-bottom:11px; }
.sz-intro b{ font-size:13.5px; font-weight:700; color:var(--text); }
.sz-intro .muted{ font-size:12.5px; }
/* 「다른 방법으로 준비하기」 — 늘 보인다. 토글로 감추지 않는다 */
.sz-ways{ margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }
.sz-ways-h{ margin:0 0 8px; font-size:11.5px; font-weight:800; color:var(--muted); }
.sz-way-row{ display:flex; flex-wrap:wrap; gap:7px; }
.sz-way{ display:inline-flex; align-items:center; padding:8px 13px; border-radius:9px; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); color:var(--text); font:inherit; font-size:12.5px; font-weight:600; }
.sz-way:hover{ border-color:var(--accent); }
.sz-more{ margin-top:13px; padding-top:12px; border-top:1px solid var(--border); }
/* 고른 사진은 «작은» 미리보기로만 남는다 */
.sz-mini{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.sz-mini .sz-zoom{ width:74px; flex:none; }
.sz-mini .sz-zoom img{ width:100%; border-radius:8px; border:1px solid var(--border); }
/* 보조 단추 — 회색 테두리(같은 디자인 체계) */
.sz-2nd{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--text); font:inherit; font-size:12px; font-weight:600; }
.sz-2nd:hover{ border-color:var(--accent); }
/* 표 위 작은 아이콘 손잡이 */
.sz-icos{ margin-left:auto; display:flex; gap:5px; flex-wrap:wrap; }
.sz-ico{ display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--muted); font:inherit; font-size:11.5px; font-weight:600; }
.sz-ico:hover{ color:var(--text); border-color:var(--accent); }
.sz-ico svg{ flex:none; }
/* 읽은 표 — 무채색·얇은 구분선·헤더만 약하게. 지금 고치는 칸에만 라임 */
.sz-table{ border-collapse:collapse; width:100%; }
.sz-table th, .sz-table td{ border:1px solid var(--border); padding:7px 9px; font-size:12.5px; text-align:left; }
.sz-table th{ background:color-mix(in srgb,var(--muted) 8%,transparent); }
.sz-table td{ color:var(--text); }
.sz-table td:focus, .sz-table .sz-cn:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--accent); border-radius:3px; }
/* 마지막 단추 — 어두운 알약 + 얇은 라임 테두리 (G·ROAD 기존 단추 체계) */
.sz-go{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:999px; cursor:pointer;
  background:var(--알약-면, var(--bg)); color:var(--accent); font:inherit; font-size:13px; font-weight:700;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); }
.sz-go:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg)); }

/* 「제품 추가정보」 — 한 덩어리, 얇은 구분선 (J.J 2026-08-22).
   ⛔ 메타필드마다 큰 카드를 만들지 않는다. ⛔ 비었다고 주황으로 칠하지 않는다. */
.mf-row{ padding:13px 0; }
.mf-row:first-child{ padding-top:2px; }
.mf-row:last-child{ padding-bottom:0; }
.mf-row + .mf-row{ border-top:1px solid var(--border); }
.mf-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px; }
.mf-name{ font-size:13px; font-weight:700; color:var(--text); }
.mf-none{ margin:0; font-size:12.5px; color:var(--muted); }
/* 위저드 목록이 비어 «물러선» 상태 — 조용히 넘기지 않고 그 사실을 적는다 */
.mf-fb{ margin:12px 0 0; padding:8px 11px; border-radius:8px; font-size:12px; line-height:1.55;
  color:var(--read); background:var(--read-bg); border:1px solid var(--read-ln); }
/* 스토어엔 있는데 «안 고른» 칸 — 평소엔 한 줄, 눌러야 펴진다 (J.J 2026-08-23 · §0-A ②).
   ⛔ 경고색을 쓰지 않는다. 안 고른 건 «정상»이다 — 손님이 그렇게 정한 것이다. */
.mf-off{ margin:12px 0 0; font-size:12px; color:var(--muted); }
.mf-off > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--border);
  font-weight:600; color:var(--muted); }
.mf-off > summary::-webkit-details-marker{ display:none; }
.mf-off > summary::before{ content:'▸'; font-size:10px; opacity:.8; }
.mf-off[open] > summary::before{ content:'▾'; }
.mf-off > summary:hover{ color:var(--text); border-color:color-mix(in srgb,var(--text) 22%,transparent); }
.mf-offp{ margin:9px 0 0; font-size:12px; line-height:1.55; color:var(--muted); }
.mf-offl{ margin:7px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.mf-offl li{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text); }
.mf-offl li span{ margin-left:auto; font-size:10.5px; font-weight:600; color:var(--muted); opacity:.7; }
.mf-in .tb-one{ width:100%; padding:8px 11px; font-size:13.5px; border-radius:9px;
  background:var(--bg); border:1px solid var(--border); color:var(--text); }
.mf-in .tb-one:focus{ outline:none; border-color:var(--accent); }
/* 제품 고르기 (Complementary products) */
.mf-prod{ display:flex; align-items:center; gap:9px; }
/* 고른 것 «한 줄 띠» — 줄바꿈 없이 옆으로 흐른다. 넘치면 잘린다(쇼피파이도 그렇게 둔다).
   ⛔ flex-wrap 을 켜지 마라: 4개만 돼도 칸 높이가 두 배가 된다(J.J 실물 지적). */
.mf-pstrip{ flex:1; min-width:0; display:flex; gap:6px; align-items:center; overflow-x:auto; overflow-y:hidden;
  padding:5px 7px; border:1px solid var(--border); border-radius:9px; background:var(--bg);
  scrollbar-width:none; cursor:pointer; min-height:36px; }
.mf-pstrip::-webkit-scrollbar{ display:none }
.mf-pchip{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--text);
  white-space:nowrap; flex:none; }
.mf-popen{ flex:none; }
/* 팝업 안 — 찾는 칸 · 결과 줄 · 고른 것 줄 (셋 다 «한 줄에 하나»)
   🔄 J.J 실물 확인: 「화면이 너무 작고 썸네일이 너무 작다」 → 판을 넓히고(520 → 860) 사진을 키운다(40 → 64).
      옷 사진은 «작게 보면 다 비슷해» 보인다 — 이 창은 사진으로 고르는 창이다. */
.gate.gate-pick{ max-width:860px; max-height:88vh; }
.gate-pick .gate-body{ display:flex; flex-direction:column; gap:10px; }
.gate-pick .mf-pimg{ width:64px; height:64px; border-radius:11px; }
.gate-pick .mf-pres button, .gate-pick .mf-pitem{ font-size:14px; gap:13px; padding:8px 10px; }
.gate-pick .mf-pres{ max-height:min(46vh, 430px); }
.mf-pin{ width:100%; padding:9px 12px; font-size:13.5px; border-radius:9px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); }
.mf-pin:focus{ outline:none; border-color:var(--accent); }
.mf-pres{ display:flex; flex-direction:column; gap:2px; max-height:230px; overflow:auto; }
.mf-pres button{ display:flex; align-items:center; gap:11px; text-align:left; padding:7px 9px; border-radius:9px;
  cursor:pointer; background:transparent; border:1px solid transparent; color:var(--text); font-size:13px; width:100%; }
.mf-pres button:hover{ background:var(--chip-c); border-color:var(--border); }
.mf-plist{ display:flex; flex-direction:column; }
.mf-plabel{ font-size:11.5px; font-weight:800; color:var(--muted); margin:4px 0 2px; }
.mf-pitem{ display:flex; align-items:center; gap:11px; padding:8px 4px; border-top:1px solid var(--border); font-size:13px; }
.mf-plabel + .mf-pitem{ border-top:0 }
.mf-pnm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mf-pdel{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:12px; padding:0 3px; flex:none; }
.mf-pdel:hover{ color:var(--danger); }
/* 썸네일 — 팝업은 40px, 띠 안 칩은 22px */
.mf-pimg{ width:40px; height:40px; border-radius:8px; object-fit:cover; flex:none;
  border:1px solid var(--border); background:var(--bg); display:block; }
.mf-pchip .mf-pimg{ width:22px; height:22px; border-radius:5px; }
.mf-pst{ margin-left:auto; font-size:11px; font-weight:700; color:var(--muted); flex:none; }
.mf-pnote{ font-size:12px; color:var(--muted); padding:5px 2px; }
/* 썸네일 (J.J 2026-08-24) — 쇼피파이 제품 고르는 창과 같은 모양. 사진이 없으면 «빈 네모»로
   자리만 지킨다: 줄마다 글자 시작이 어긋나면 목록이 훨씬 읽기 어려워진다. */
/* 「새로 생긴 칸이 있어요」 (J.J 2026-08-24) — 카드 «맨 위»에 선다. 손님이 답하면 사라진다.
   ⛔ 경고색을 쓰지 않는다: 잘못된 게 아니라 «물어보는» 자리다. 알려주기(--read) 계열로 둔다. */
.mf-new{ border:1px solid var(--read-ln); background:var(--read-bg); border-radius:11px;
  padding:11px 13px; margin:0 0 13px; display:flex; flex-direction:column; gap:4px; }
.mf-new > b{ font-size:13.5px; }
.mf-new > p{ margin:0 0 4px; font-size:12.5px; color:var(--muted); }
.mf-newrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:7px 0 0; }
.mf-newname{ font-size:13px; font-weight:700; }
.mf-newbtns{ margin-left:auto; display:inline-flex; gap:7px; }
.mf-newbtns button{ font-size:12.5px; padding:5px 11px; }
/* 🔴 「쓸래요」가 «라임 면 + 옅은 회청 글자»로 떴다(실측 #c6f24e 위 #bfcee0 — 안 읽힌다).
   면을 칠했으면 글자는 그 면의 짝(`--accent-ink`)이어야 한다. tokens 가 그러라고 셋으로 갈라 둔 값이다. */
.mf-newbtns .sec-btn{ background:var(--accent-fill); color:var(--accent-ink); border-color:transparent; font-weight:700; }
.mf-pimg{ width:26px; height:26px; border-radius:6px; object-fit:cover; flex:none;
  border:1px solid var(--border); background:var(--bg); display:block; }
.mf-pimg.none{ display:block; }
.mf-pchip .mf-pimg{ width:22px; height:22px; border-radius:5px; }
.mf-pst{ margin-left:auto; font-size:11px; font-weight:700; color:var(--muted); flex:none; }
.mf-pres button{ display:flex; align-items:center; gap:9px; text-align:left; padding:6px 10px; border-radius:8px; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); color:var(--text); font:inherit; font-size:12.5px; }
.mf-pres button:hover{ border-color:var(--accent); }

/* 읽은 사이즈표 머리줄 — 영어가 «주»고 원문은 밑에 작게 (J.J 2026-08-22 · 사이즈표1).
   원문을 지우지 않는 게 핵심이다 — AI 가 부위를 바꿔 적어도 대조할 원본이 남는다. */
.sz-en{ display:block; font-size:12px; font-weight:800; letter-spacing:-.1px; color:var(--text); }
.sz-cn{ display:block; font-size:10.5px; font-weight:600; color:var(--muted); }
.sz-cn:focus{ outline:none; color:var(--text); }

/* 고른 사이즈표 «확대하기» (J.J 2026-08-22 · 사이즈표2)
   작은 미리보기는 글씨가 안 보인다 — 눌러서 크게 본다. 값이 바뀌는 자리가 아니다. */
.sz-zoom{ position:relative; padding:0; border:0; background:none; cursor:zoom-in; line-height:0; border-radius:8px; overflow:hidden; }
.sz-zoom .sz-zoom-say{ position:absolute; left:0; right:0; bottom:0; padding:5px 0 4px;
  background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; font-weight:700; line-height:1.2;
  opacity:0; transition:opacity .13s ease; }
.sz-zoom:hover .sz-zoom-say, .sz-zoom:focus-visible .sz-zoom-say{ opacity:1; }
.szmax{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.72); display:grid; place-items:center; padding:24px; }
.szmax-in{ position:relative; max-width:min(1100px,94vw); max-height:92vh; display:flex; flex-direction:column; gap:9px; }
.szmax-in img{ max-width:100%; max-height:calc(92vh - 46px); object-fit:contain; border-radius:10px; background:#fff; }
.szmax-x{ align-self:flex-end; }

/* 「브라우저 번역으로 확인할 수 있어요」 — 실제로 «번역되는 것»을 보여준다 (J.J 2026-08-22).
   흐름: 주소줄 번역 아이콘이 눌린다 → 아래로 쪽지가 열린다 → 「한국어」 탭이 켜지고 글이 한글로 바뀐다.
   ⛔ 앱은 번역을 «하지 않는다». 이건 브라우저가 하는 일을 «보여주는 그림»이다. */
.cat-pop.wide{ width:min(330px, 84vw); }
.tr-say{ margin:0 0 9px; }
.trd{ position:relative; border:1px solid var(--border); border-radius:9px; background:var(--bg); padding:8px; }
.trd-bar{ display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:7px;
  background:var(--surface); border:1px solid var(--border); }
.trd-url{ flex:1; min-width:0; font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trd-ico{ position:relative; display:grid; place-items:center; width:19px; height:19px; border-radius:5px;
  color:var(--muted); animation:trdIco 6s ease-in-out infinite; }
.trd-star{ font-size:11px; color:var(--muted); }
/* 눌리는 순간의 «물결» */
.trd-tap{ position:absolute; inset:-2px; border-radius:6px; border:1.5px solid var(--accent);
  opacity:0; animation:trdTap 6s ease-in-out infinite; }
.trd-pop{ margin:6px 0 0 auto; width:132px; border-radius:8px; background:var(--surface);
  border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.3);
  opacity:0; transform:translateY(-4px) scale(.97); transform-origin:top right;
  animation:trdPop 6s ease-in-out infinite; }
.trd-tabs{ display:flex; align-items:center; gap:4px; padding:5px 6px; border-bottom:1px solid var(--border); }
.trd-tab{ padding:2px 6px; border-radius:5px; font-size:10px; font-weight:700; color:var(--muted); }
.trd-tab.en{ animation:trdTabEn 6s ease-in-out infinite; }
.trd-tab.ko{ animation:trdTabKo 6s ease-in-out infinite; }
.trd-more, .trd-x{ font-size:9px; color:var(--muted); }
.trd-more{ margin-left:auto; }
.trd-foot{ padding:4px 6px; font-size:9px; color:var(--muted); }
/* 🔴 글자가 상자 «밖»으로 나갔다 (J.J 2026-08-24 · 실측: 글 높이 20px · 상자 17px).
   글이 absolute 라 상자를 못 밀어낸다 → 상자에 «글이 들어갈 만큼»을 직접 준다. 옆으로도 잘라 둔다. */
.trd-page{ position:relative; margin-top:7px; padding:6px 7px; border-radius:7px;
  background:var(--surface); border:1px solid var(--border); min-height:26px; overflow:hidden; }
.trd-line{ position:absolute; left:7px; right:7px; top:5px; font-size:11px; line-height:1.35; font-weight:700;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trd-line.en{ animation:trdEn 6s ease-in-out infinite; }
.trd-line.ko{ animation:trdKo 6s ease-in-out infinite; }
/* 6초 한 바퀴 — ①0~18% 가만히 ②20% 아이콘 눌림 ③28% 쪽지 열림 ④46% 한국어 탭 ⑤52% 글이 한글로 */
@keyframes trdIco{ 0%,17%{ color:var(--muted); background:transparent }
  22%,88%{ color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent) }
  96%,100%{ color:var(--muted); background:transparent } }
@keyframes trdTap{ 0%,16%{ opacity:0; transform:scale(.8) } 21%{ opacity:.9; transform:scale(1) }
  32%,100%{ opacity:0; transform:scale(1.25) } }
@keyframes trdPop{ 0%,25%{ opacity:0; transform:translateY(-4px) scale(.97) }
  33%,88%{ opacity:1; transform:none } 96%,100%{ opacity:0; transform:translateY(-4px) scale(.97) } }
@keyframes trdTabEn{ 0%,43%{ color:var(--accent-ink); background:var(--accent-fill) }
  50%,100%{ color:var(--muted); background:transparent } }
@keyframes trdTabKo{ 0%,43%{ color:var(--muted); background:transparent }
  50%,88%{ color:var(--accent-ink); background:var(--accent-fill) }
  96%,100%{ color:var(--muted); background:transparent } }
@keyframes trdEn{ 0%,47%{ opacity:1 } 54%,92%{ opacity:0 } 98%,100%{ opacity:1 } }
@keyframes trdKo{ 0%,47%{ opacity:0 } 54%,92%{ opacity:1 } 98%,100%{ opacity:0 } }

/* 제품 유형 «직접 입력» (J.J 2026-08-22 · 제품유형1)
   검정은 «입력칸 자체»에만. 바깥 컨테이너·회색 라인 없음. 적용/취소는 같은 행 오른쪽. */
.pt-edit{ display:flex; align-items:center; gap:7px; }
.pt-edit .ven-in{ flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:9px; color:var(--text); }
.pt-edit .ven-in:focus{ outline:none; border-color:var(--accent); }
.pt-edit .cat-btn, .pt-edit .ghost{ flex:none; }

/* 벤더 값 — 알약이 아니라 «읽는 글자» (J.J 2026-08-22 · 벤더1) */
.ven-read{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ven-val{ font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }

/* 카테고리 고르는 자리 (J.J 2026-08-22 · 카테고리2)
   머리글 → 작은 안내문 → 추천 목록 → «보조» 액션. 이 차례가 곧 손님이 읽는 차례다. */
.cat-pick{ display:flex; flex-direction:column; gap:8px; }
.cat-pick-h{ font-size:13px; font-weight:800; letter-spacing:-.2px; color:var(--text); }
.cat-pick-say{ margin:-3px 0 1px; font-size:12.5px; color:var(--muted); }
.cat-pick-foot{ margin-top:2px; }
/* 「직접 카테고리 찾기」 — «큰 컬러 단추»가 아니다. 추천을 고르는 게 으뜸이고 이건 곁길이다. */
.cat-find2{ display:inline-flex; align-items:center; gap:6px; padding:5px 2px;
  background:none; border:0; color:var(--muted); font:inherit; font-size:13.5px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.cat-find2:hover{ color:var(--text); }

/* 🔄 2026-08-23 (J.J) — 안내창 굵은 글자의 «라임»을 걷는다. 라임은 「지금 할 일」 자리라
   설명문에 쓰면 눈이 그리로 끌려가고 정작 읽어야 할 문장이 안 읽힌다. 강조는 «굵기»로만. */
.cat-pop b.plain{ color:var(--text); font-size:inherit; font-weight:800; margin:0; }
/* 예시 아래 한 칸 — 다음 문장이 «새로 시작»하는 것으로 읽히게 */
.cat-gap{ display:block; height:9px; }

/* 카테고리 안내의 «예» — 의류 → 상의 → 셔츠 (J.J 2026-08-22) */
.cat-eg{ display:inline-block; margin:2px 0; padding:2px 8px; border-radius:6px;
  background:var(--read-bg); border:1px solid var(--read-ln); color:var(--read);
  font-size:12.5px; font-weight:700; }

/* 오른쪽 라벨 — «클릭/호버 하면 설명» (J.J 2026-08-22 · 오른쪽 라벨 통일).
   라벨은 각 항목 오른쪽 «끝» 같은 자리에 선다. 설명은 그 아래 떠 있는 쪽지로 나온다.
   ⛔ title 속성을 쓰지 마라 — 브라우저 쪽지는 늦게 뜨고 손가락으로는 아예 안 뜬다. */
/* ✦ — 「자동으로 됐다」는 표시 (J.J 2026-08-23). 색은 «적용됨»과 같은 초록이고,
   자동이라는 사실은 이 작은 별 하나가 말한다. ⛔ 색으로 가르지 않는다. */
.chip6.자동ai .ai별{ font-size:9.5px; line-height:1; opacity:.9; }
/* 조치가 필요한 라벨의 설명 — «접지 않고» 라벨 아래 한 줄로 (J.J 2026-08-23) */
.chip-say{ margin:2px 0 10px; font-size:12.5px; line-height:1.55; color:var(--tx2); }
/* 안 봐도 되는 보조설명은 이 「?」 뒤에 접는다 */
.chip-q{ display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:4px; border-radius:50%;
  border:1px solid currentColor; opacity:.65; font-size:10px; font-weight:700; line-height:1; cursor:pointer; }
.chip-q:hover{ opacity:1; }

.chip6[data-tip]{ position:relative; cursor:help; }
.chip6[data-tip]::after{
  content:attr(data-tip); position:absolute; top:calc(100% + 7px); right:0; z-index:40;
  width:max-content; max-width:min(290px, 68vw); padding:9px 11px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border); box-shadow:0 6px 20px rgba(0,0,0,.28);
  color:var(--text); font-size:12px; font-weight:500; line-height:1.55; letter-spacing:-.1px;
  white-space:normal; text-align:left; opacity:0; visibility:hidden; transform:translateY(-3px);
  transition:opacity .13s ease, transform .13s ease; pointer-events:none; }
.chip6[data-tip]:hover::after,
.chip6[data-tip].tip열림::after{ opacity:1; visibility:visible; transform:none; }
/* 단계 머리 라벨 — 카드 칩과 같은 자리(오른쪽 끝)에 선다 */
.st-sum .st-lab{ margin-left:auto; }

/* 한 단계 «안»의 항목 사이를 가르는 띠 (J.J 2026-08-22 · 분류2).
   「여백처럼 보이는 배경색 띠」 — 새 카드도 새 테두리도 안 만든다. 끊겨 보이게만 한다.
   ⛔ 고정 검정 금지: 페이지 «바깥» 배경(--bg)을 쓴다 → 라이트/다크가 저절로 따라온다.
   ⚠️ 단계 안쪽엔 좌우 여백(15px)이 있다 — 띠를 그 여백«까지» 늘려야 «칸이 끊긴» 것으로 읽힌다.
      안 늘리면 가운데만 그어진 «줄»이 되어 새 테두리를 그린 것처럼 보인다. */
/* 🔄 2026-08-23 (J.J) — 띠가 `left:-15px` 로 «단계 상자 밖»까지 나가 맨 앞 상황띠를 침범했다.
   안쪽으로 들인다(left:0). 끊겨 보이는 효과는 그대로다. */
.st-step.divided .st-in > .card + .card{ position:relative; padding-top:29px; }
.st-step.divided .st-in > .card + .card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:11px;
  background:var(--bg); }
/* 단계 제목과 첫 카드 사이 — 회색 «얇은 점선» 한 겹 (J.J 2026-08-23 · 기본분류 3).
   ⛔ 굵은 선·색 있는 선을 쓰지 않는다: 나누는 것이지 «강조»가 아니다.
   ⚠️ 항목이 여럿인 단계(띠를 단 단계)에만 건다 — 카드 하나짜리엔 나눌 것이 없다. */
.st-step.divided.open > .st-in::before{
  content:''; display:block; height:0; margin:0 0 14px;
  border-top:1px dashed color-mix(in srgb, var(--border) 85%, transparent); }
/* ⛔ 옛 「카드마다 번호」 카운터를 안쪽에선 끈다 — 단계 번호와 «두 번» 말하게 된다
   (4 분류 안에 1·2·3·4·5 가 또 뜨던 자리) */
.st-in .card h2.big::before{ display:none }
.st-in .card h2.big{ font-size:15px }
/* 카드가 하나뿐인 단계는 카드 제목이 단계 제목과 같은 말이다 — 안쪽 제목을 숨긴다 */
.st-step.one-card .st-in > .card > .card-h > h2.big,
.st-step.one-card .st-in > .card > h2.big{ display:none }

/* ── 단계 안에서 «섹션을 카드로» 가른다 (J.J 2026-08-23 · 판매가·옵션 시안) ────
   7 판매가·옵션(변형)은 세 영역(옵션 · 판매가 계산 · 변형별)이 한 단계에 산다.
   전엔 회색 «띠»로만 끊어서 스크롤하면 어디까지가 무엇인지 흐려졌다 —
   접기/펼치기 없이 전부 보이되, 셋을 «같은 카드 규칙»으로 세워 한눈에 갈리게 한다.
   ⛔ 새 색을 고르지 않는다: 면=--surface · 테=--border · 곁말=--muted (tokens.css 에 있는 값만).
   ⚠️ `.st-in .card` 가 카드 껍데기를 벗기고 있다(2799줄) — 여기서 «되입힌다». 무게로 이겨야 해서
      선택자를 `.st-step.sec-cards .st-in > .card` 로 둔다(0-4-0 > 0-2-0). */
/* 🔴 바깥(단계)과 안(섹션 카드)이 «완전히 같은 색»이었다 (실측 2026-08-24: 다크 #1e2125/#1e2125 ·
   라이트 #FFF/#FFF). 1px 테두리 하나로 버티고 있었다 → J.J: 「구분이 약하다」.
   ⇒ 테두리를 굵히지 않는다(액자가 3중이 되고 다크에서 선만 도드라진다). **바깥을 한 톤 낮춘다.**
      다크 #0A0A0A → #1e2125 → #0A0A0A · 라이트 #F7F8F9 → #FFF → #F7F8F9
      = 「카드는 떠 보이고, 안쪽 칸은 파여 보인다」. 두 테마가 같은 규칙으로 선다.
   ⛔ 반대로 «섹션 카드를 밝히는» 안(--chip-c)은 쓰지 마라 — 라이트에서 섹션이 회색이 되어
      속 패널(#F7F8F9)보다 진해진다(깊이가 뒤집힌다).
   ⚠️ 열린 단계의 «물건처럼» 연출(그라데이션·윗선·바닥 그림자, J.J 2026-08-21)은 그대로 둔다 —
      바꾸는 것은 **면 하나**다. 그래서 `--깊이-면` 을 그대로 얹고 밑면만 --bg 로 간다.
   ⚠️ 섹션 카드가 없는 단계엔 걸지 않는다(`.sec-cards` 한정) — 안쪽이 투명해서 «구멍»으로 읽힌다. */
.st-step.sec-cards.open{ background:var(--깊이-면), var(--bg); }
.st-step.sec-cards .st-in > .card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:0 15px 14px; margin:0 0 10px; }
.st-step.sec-cards .st-in > .card:last-child{ margin-bottom:0 }
/* 머리 — 제목 왼쪽 · 세는 줄 오른쪽 · 아래 실선 한 겹.
   ⚠️ 좌우 여백을 «뚫고» 나가야 선이 카드 폭을 다 긋는다 → 음수 마진으로 되민다. */
/* ⚠️ 머리는 카드마다 «생김새가 셋»이다 — `.card-h` · `.card-top` · 그리고 h2 하나만 있는 것
   (카테고리 카드가 그렇다). 셋을 다 잡아야 구분선이 «모든 항목 아래»에 선다.
   한 벌만 잡았다가 카테고리만 선이 없던 자리다(J.J 2026-08-24 「각 섹션 구분선도 포함해서」). */
.st-step.sec-cards .st-in > .card > .card-h,
.st-step.sec-cards .st-in > .card > .card-top,
.st-step.sec-cards .st-in > .card > h2.big{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 -15px 13px; padding:12px 15px; border-bottom:1px solid var(--border); }
.st-step.sec-cards .st-in > .card > .card-top > h2.big{ flex:0 0 auto }
/* 세는 줄 — 「3개 옵션 · 6개 값」처럼 «읽기만 하는» 값. 상태 칩(chip6)과 헷갈리면 안 되므로
   테두리도 면도 주지 않는다. 오른쪽 끝에 선다. */
.sec-meta{ margin-left:auto; font-size:12.5px; color:var(--muted); white-space:nowrap }
/* 표 바로 위 «도구 줄» (SKU 보기) — 오른쪽 끝 */
.sec-tools{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:0 0 10px }
/* 띠를 끈다 — 카드가 이미 끊고 있는데 회색 여백까지 겹치면 «두 번» 나눈 화면이 된다.
   ⚠️ 단계 제목 아래 «점선 한 겹»(.divided.open > .st-in::before)은 그대로 둔다. */
.st-step.sec-cards.divided .st-in > .card + .card{ padding-top:0 }
.st-step.sec-cards.divided .st-in > .card + .card::before{ display:none }

/* ── 판매가 «요약판» (J.J 2026-08-23 · 판매가 ui.png) ─────────────────────────
   왼쪽 배송비 하나만 확인하면 오른쪽에 판매가가 뜬다. 원가·수수료·마진은 「계산 기준 보기 ▾」 뒤.
   ⛔ 여기에 셈을 더 늘어놓지 마라 — 손님이 여기서 할 일은 «배송비 확인» 하나다. */
/* ── 판매가 계산 «요약판» (J.J 2026-08-25 시안) ───────────────────────────────
   왼쪽 = 재료(배송비) · 사이 화살표 · 오른쪽 = 결과(판매가). 결과 카드를 «더 세게» 잡는다.
   ⛔ 배송비 칸엔 실행 단추를 두지 않는다 — 최종 반영은 오른쪽 「판매가 적용」 하나뿐이다. */
.calc-sum{ display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); gap:12px; align-items:stretch; }
.calc-sum .cs-flow{ align-self:center; text-align:center; color:var(--muted); font-size:16px; font-weight:700; }
.calc-sum .cs-ship, .calc-sum .cs-out{ padding:14px 15px; border:1px solid var(--border); border-radius:12px;
  background:var(--bg); display:flex; flex-direction:column; gap:7px; }
/* 결과 카드가 «주인공»이다 — 면 한 단계 + 테두리를 라임 쪽으로 살짝 */
.calc-sum .cs-out{ background:var(--surface); border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
  align-items:stretch; }
.calc-sum .cs-h{ display:flex; align-items:center; gap:7px; font-size:13.5px; }
.calc-sum .cs-h b{ font-size:13.5px; font-weight:800; }
.calc-sum .cs-ico{ font-size:14px; line-height:1; }
.calc-sum .cs-ai{ font-size:10.5px; font-weight:800; color:var(--read); background:var(--read-bg);
  border:1px solid var(--read-ln); border-radius:999px; padding:2px 8px; }
.calc-sum .cs-say{ margin:0; font-size:12.5px; line-height:1.55; color:var(--muted); }
.calc-sum .cs-in{ display:flex; align-items:stretch; gap:0; margin-top:2px; }
.calc-sum .cs-in input{ flex:1; min-width:0; font-size:26px; font-weight:800; letter-spacing:-.5px;
  padding:10px 13px; border:1px solid var(--border); border-right:0; border-radius:10px 0 0 10px;
  background:var(--bg); color:var(--text); }
.calc-sum .cs-in input:focus{ outline:none; border-color:var(--accent); }
.calc-sum .cs-in .u{ flex:none; display:grid; place-items:center; padding:0 14px; font-size:12.5px; font-weight:800;
  color:var(--muted); border:1px solid var(--border); border-left:0; border-radius:0 10px 10px 0; background:var(--chip-c); }
.calc-sum .cs-sub{ margin:0; font-size:11.5px; color:var(--muted); }
/* 「추천값으로」 — 단추가 아니라 «곁줄의 작은 링크»다(배송비 칸엔 단추를 안 둔다) */
.calc-sum .cs-rec{ background:none; border:0; padding:0 0 0 2px; font:inherit; font-size:11.5px; font-weight:800;
  color:var(--read); cursor:pointer; text-decoration:underline; }
.calc-sum .cs-auto{ margin:auto 0 0; font-size:11.5px; font-weight:600; color:var(--muted);
  background:var(--chip-c); border-radius:9px; padding:8px 11px; }
.calc-sum .cs-v{ font-size:34px; font-weight:800; letter-spacing:-.8px; color:var(--text); line-height:1.15; }
/* 옛 갈래 — 34px 자리에 12.5px 문장 한 줄. J.J 2026-08-26 에 «유령 숫자»로 바뀌었다.
   부르는 곳이 0곳이지만 옛 탭·캐시가 남아 있을 수 있어 판은 그대로 둔다. */
.calc-sum .cs-v.miss{ font-size:14px; font-weight:700; color:var(--warn); }
/* ⭐ 「아직 안 나온 판매가」 — 들어올 숫자를 «같은 크기·같은 자리»에 회색으로 미리 그린다.
   ⛔ 크기를 줄이지 마라. 줄이면 «숫자가 올 자리»라는 신호가 사라져서 고친 뜻이 없어진다.
   기호(cur)를 한 톤 더 죽인다 — 자리를 잡되 «값»으로 읽히면 안 된다. */
.calc-sum .cs-v.ghost{ color:color-mix(in srgb,var(--muted) 46%,var(--bg)); user-select:none; }
.calc-sum .cs-v.ghost .cur{ color:color-mix(in srgb,var(--muted) 32%,var(--bg)); }
/* 유령 숫자와 «완전히 붙어» 보였다(J.J) — 카드 gap(7px)에 5px 만 얹는다.
   더 벌리면 둘이 «다른 것»으로 읽혀 「이 자리에 대한 말」이라는 게 흐려진다. */
.calc-sum .cs-miss{ display:flex; align-items:center; gap:7px; margin:5px 0 0;
  font-size:12.5px; font-weight:700; color:var(--warn); line-height:1.5; }
.calc-sum .cs-miss::before{ content:''; width:6px; height:6px; border-radius:50%;
  background:var(--warn); flex:none; }
.calc-sum .cs-cny{ font-size:12.5px; color:var(--muted); }
/* 「판매가 적용」 — 이 영역의 최종 반영 하나. 폭을 꽉 채워 «여기서 끝난다»를 말한다 */
.calc-sum .cs-go{ margin-top:auto; width:100%; padding:11px 14px; border:0; border-radius:10px;
  background:var(--accent-fill); color:var(--accent-ink); font-size:13.5px; font-weight:800; cursor:pointer; }
.calc-sum .cs-go:hover{ filter:brightness(1.05); }
@media (max-width: 720px){ .calc-sum{ grid-template-columns:1fr; } }

/* 승인 후 제품 상태 — «한 줄» (J.J 2026-08-23). 설명 없이 값만.
   ⛔ 여기에 도움말·팝업을 붙이지 마라. 손님이 할 일은 «보고 승인»뿐이다. */
.pub-one{ display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:11px 14px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.pub-one:empty{ display:none; }
.pub-one-t{ font-size:13px; font-weight:700; color:var(--text); }
.pub-one-v{ font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; }
.pub-one-v.live{ color:var(--done); background:var(--done-bg); border:1px solid var(--done-ln); }
.pub-one-v.draft{ color:var(--wait); background:var(--wait-bg); border:1px solid var(--wait-ln); }
.pub-one-set{ margin-left:auto; padding:6px 12px; border-radius:9px; font-size:12.5px; font-weight:600;
  background:transparent; color:var(--tx2); border:1px solid var(--border); cursor:pointer; }
.pub-one-set:hover{ color:var(--text); border-color:var(--tx3); }

/* ── 3 · 아래 고정 승인 바 (J.J 2026-08-21 재정리) ────────────────────────
   왼쪽 «지금 승인이 되나» 한 문장 · 가운데 자동저장은 조용히 · 오른쪽 승인이 마지막 CTA */
/* 🔄 2026-08-29 (J.J ④) — **따라다니는 것은 이제 이 바 하나뿐이다.**
   위 스티키를 걷었으니 이 바가 본문과 «확실히» 갈려야 한다 — 다만 두꺼워지면 안 된다.
   ⇒ 독립된 면(--surface) + 윗선 한 겹 + 옅은 그림자. 높이·세로 여백은 그대로 둔다. */
.st-gate{ position:sticky; bottom:0; z-index:5; margin-top:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  border-top-color:color-mix(in srgb, var(--border) 55%, var(--text) 45%);
  box-shadow:0 -6px 16px -12px rgba(0,0,0,.55), var(--깊이-윗선-얕게), var(--깊이-바닥-얕게) }
/* ⚠️ 셋이 «한 줄»에 서야 한다 — 문장이 늘어나면(flex-grow) 승인이 아랫줄로 밀린다(실측 1280px 에서도 밀렸다).
      그래서 문장은 «줄어들기만» 한다(0 1 auto). 길면 말줄임표로 접히고, 승인은 늘 오른쪽 끝에 남는다. */
.st-gate .gate-bar{ margin:0; border:0; border-radius:10px; padding:9px 14px; flex-wrap:nowrap }
.st-gate .gate-say{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* 「아직 확인할 게 남았다」 = 경고다 (J.J 2026-08-21). 회색이면 «그냥 안내문»으로 읽고 지나간다.
   ⛔ 다 된 문장(「확인이 끝났어요」)에는 안 붙는다 — 늘 빨가면 색이 아무 말도 못 한다.
   앞에 점을 하나 찍어 색«만»으로 가르지 않는다(색약). */
.st-gate .gate-say.할일{ color:var(--danger) }
.st-gate .gate-say.할일 b{ color:var(--danger) }
.st-gate .gate-say.할일::before{ content:"●"; font-size:9px; vertical-align:2px; margin-right:6px }

/* ══ 편집 화면 «머리줄» 한 벌 (J.J 2026-08-21) ════════════════════════════
   전엔 넷이 제각각이었다 — 높이 23·27·32 세 가지, 모양 «9px 네모»와 «알약» 두 가지,
   글자 12·12.5·13 세 가지. 한 벌로 맞춘다: 알약 · 높이 28 · 12.5px/600.
   ⛔ `.ghost`·`.pill` 을 통째로 고치지 않는다 — 그 두 낱말은 앱 곳곳에서 쓴다(보드 규칙).
      `:has(#studio-root)` 로 «편집 화면 머리줄»에만 좁힌다. */
/* 🔴 「← 목록」이 «둘»이었다 (J.J 2026-08-24 실측: `#studio-back` y=70 · `#stBack` y=128).
   이제 고정 바가 그 일을 한다 → 옛 자리를 감춘다.
   ⛔ index.html 을 고쳐 지우지 않는다 — 그 파일은 지금 다른 레인이 열어 두고 있다(§6).
      여기서 감추는 것으로 충분하다: 화면에 하나만 남는다. */
.pane:has(#studio-root) > .pane-head #studio-back{ display:none }
.pane:has(#studio-root) > .pane-head .ghost,
.pane:has(#studio-root) > .pane-head .pill,
.st-top .tour-again{
  border-radius:9999px; min-height:28px; padding:5px 13px;
  font-size:12.5px; font-weight:600; line-height:1.4; }
/* 「📖 가이드」 — 바탕이 옅어 눈에 안 들어왔다. 앞에 책 그림을 붙여 «시선이 먼저 걸리게» 한다 (J.J 2026-08-22).
   ⚠️ 글자색은 J.J 가 값으로 직접 준 것이다(#bfcee0) — 사전에 없는 색이라 여기 한 자리에만 쓴다.
   ⚠️ 테두리는 «같은 색을 34% 로 내려» 쓴다 — 글자와 테두리를 같은 세기로 주니 너무 튀었다(J.J).
      선을 더 얇게 하는 길은 안 썼다(1px 밑은 화면마다 사라진다). 세기로 낮춘다.
   🔴 다크에서만 쓴다. 라이트(흰 바탕)에 이 값을 쓰면 대비 1.6 이라 글자가 사라진다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .st-top .tour-again{ color:#bfcee0; border-color:color-mix(in srgb,#bfcee0 34%,transparent) }
}
[data-theme="dark"] .st-top .tour-again{ color:#bfcee0; border-color:color-mix(in srgb,#bfcee0 34%,transparent) }
/* 머리줄 상태 칩 — 목록 카드와 «같은 두 낱말»만 쓴다(올리는 중 · 실패). 색도 코어 사전대로 */
.pane:has(#studio-root) > .pane-head .pill.진행{
  color:var(--now); background:var(--now-bg); border-color:var(--now-ln) }
.pane:has(#studio-root) > .pane-head .pill.사고{
  color:var(--danger); background:var(--danger-bg); border-color:var(--danger-ln) }
/* 「사용 가이드」가 혼자 가운데 있어 줄이 어긋나 보였다 — 오른쪽 끝으로 붙이고 사이를 좁힌다 */
/* ⚠️ `margin:0 auto` 를 빼야 한다 — `.studio` 가 grid 라, auto 여백이 붙은 칸은 «내용만큼 줄어들어»
   가운데로 간다(실측 920px 칸에서 97px 로 줄었다). 가운데 정렬은 `.studio` 가 이미 하고 있다. */
/* ⚠️ 이 규칙이 위(2786줄)의 «고정 바»보다 뒤에 있어서 «이긴다» — 그래서 여기서 마무리한다.
   전엔 `justify-content:flex-end` 라 가이드 단추만 오른쪽에 서고 제품 띠가 아랫줄로 밀렸다. */
/* 🔴 `flex-wrap` 이 «없어서» 경고 띠가 제 줄로 못 내려갔다 (J.J 2026-08-26 실측 지적).
   아래 `.cjk-warn{ flex:1 1 100% }` 은 «한 줄을 통째로 차지해 다음 줄로 내려가라»는 뜻인데,
   `.st-top` 이 wrap 없는 한 줄짜리 flex 라 그 100% 가 «같은 줄에서» 자리를 다 먹었다.
   그래서 「📖 가이드」가 글자 폭 밑으로 쪼그라들어 «가이/드» 두 줄로 접혔다.
   ⛔ wrap 을 다시 빼지 마라 — 빼면 경고가 뜨는 제품마다 가이드 단추가 또 접힌다. */
.st-top{ justify-content:flex-start; margin:0; max-width:none; flex-wrap:wrap }

/* ⛔ 판을 «자기 그릇»에 붙이지 않는다 — shell-theme.js 가 <html> 에 data-theme + color-scheme 을 건다.
   껍데기(기둥·띠·홈)는 자기 요소에 다크가 박혀 있어 안 물들고, 본문만 갈린다 (J.J 2026-08-21).
   그래서 여기 있던 `.pane[data-pane="studio"]` 의 배경·글자색·color-scheme 세 줄을 걷었다. */
/* ⚠️ `flex:none` 을 같이 준다 — wrap 이 있어도 좁은 화면에선 또 줄어들 수 있다.
   이 단추는 글자 폭보다 작아지면 «접혀서» 알약이 동그라미가 된다(위 실측). 줄지 않게 못 박는다. */
.st-top .tour-anc{ display:inline-flex; flex:none }
.st-top .tour-again{ white-space:nowrap }

/* ══ 가이드 문 하나 (J.J 2026-08-22) ══════════════════════════════════════
   전엔 「리스팅이 처음이신가요?」와 「? 사용 가이드」가 따로 서서 손님이 «뭘 눌러야 하나»부터 골랐다.
   ⛔ 안(투어·한눈에 보기)은 안 건드린다 — 진입 구조와 이름만 정리한다.
   ⚠️ 옛 단추(#firstListingBtn)는 index.html(껍데기 레인 파일)에 있다. 그 파일을 건드리지 않으려고
      여기서 감춘다 — 그 레인이 그 한 줄을 지우면 이 규칙도 같이 지우면 된다. */
.pane[data-pane="studio"] > .pane-head #firstListingBtn{ display:none }
.gd-anc{ position:relative }
.gd-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:190px;
  display:flex; flex-direction:column; padding:5px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--깊이-윗선-얕게), 0 14px 30px -12px rgba(16,24,40,.28) }
.gd-menu[hidden]{ display:none }
.gd-menu button{ display:flex; align-items:center; gap:9px;
  background:none; border:0; border-radius:8px; cursor:pointer; text-align:left;
  padding:9px 11px; font-size:13px; font-weight:600; color:var(--text); line-height:1.4 }
/* 아이콘은 «색 없이» 글자색을 따른다 — 뜻을 그림으로 한 번 더 말할 뿐, 상태를 말하지 않는다 */
.gd-menu button svg{ flex:none; color:var(--muted) }
.gd-menu button:hover svg{ color:var(--text) }
.gd-menu button:hover{ background:var(--chip-c) }
.st-top .cjk-warn{ flex:1 1 100%; order:2 }
.st-gate .gate-right{ flex:none }
/* 자동저장 — «작고 조용하게». 승인 옆에서 같은 목소리로 말하면 어느 쪽이 중요한지 안 보인다 */
.st-gate .save-ind{ font-size:11.5px; font-weight:600; opacity:.85 }

@media (max-width:900px){
  .st-shell{ grid-template-columns:1fr }
  .st-rail{ position:static }
}

/* ══ 행동 버튼과 상태 칩을 «눈으로» 가른다 (J.J 2026-08-21) ═══════════════
   알려주기만 하는 것(상태 칩)  → 옅은 면 + 같은 색 글자   ← .chip6 한 벌 그대로 (tokens.css)
   눌러서 «실제로 고치는» 것    → 진한 초록 면 + 흰 글자
   ⛔ 새 색이 아니다 — 이미 있는 완료색(--done)과 그 위 글자(--done-ink)를 쓴다.
   ⛔ --done-solid 를 면으로 쓰지 마라 : 라이트에서 흰 글자가 3.00 이라 못 읽는다 (--done 은 5.07).
   ⚠️ «켜짐/꺼짐»을 말하는 단추(.tb-pk.on · .cl-menu.on)는 «상태»라 여기 없다.
      그건 눌러서 고르는 «값»이지 실행하는 행동이 아니다. */
#studio-root .cat-btn.find,
#studio-root .report-btn,
#studio-root .tb-addbtn,
#studio-root .tb-del,
.save-fail .again{ background:var(--done); color:var(--done-ink); }

/* ══ 승인 — 알약 + «지나가는 흰 빛» (J.J 2026-08-21 · 시안 .gwR 값 그대로) ═══
   시안 : ~/Downloads/앱 디자인/포털홈-판떼기밝게.html 의 .gw / .gwR
   ⚠️ 처음에 이걸 «라임 테두리가 도는 것»으로 만들었는데 시안과 다른 물건이었다. 다른 점 셋:
     ① 알약이다 (border-radius 9999px) — 모서리 10px 이면 링이 «상자 테두리»로 읽힌다
     ② 빛이 «흰색»이다. 시안에서 앱색(라임)이 도는 건 «카드 테두리»(.cwR·7초)고,
        단추(.gwR·3.2초)는 흰 빛이다. 단추에 색을 칠하면 그 둘이 같은 말을 하게 된다
     ③ 빈 곳은 «완전 투명»이다 — 테두리가 늘 그려져 있는 게 아니라 «빛만 두 줄기 지나간다».
        내가 바닥을 깔았더니 「초록 테두리 단추」가 되어 시안과 달라졌다
   ⚠️ 도는 방식은 요소를 «돌리지» 않고 conic 시작각만 돌린다(@property) —
      요소를 돌리면 그 위의 테두리 마스크까지 같이 돌아 링이 일그러진다.
   🔴 라이트에선 «흰 빛»이 안 보인다(흰 바탕 위 흰색) → 라이트만 빛을 어둡게 뒤집는다. */
@property --돌각{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes 돌기{ to{ --돌각:360deg } }
.st-gate .gate-approve{ position:relative; isolation:isolate; overflow:hidden;
  border-radius:9999px; padding:11px 32px;
  background:transparent; color:var(--text);
  box-shadow:inset 0 0 0 1px var(--알약-선); }
/* 🔄 흰 빛을 «더 잘 보이게» — 바꾸는 것은 숫자 셋뿐이다 (J.J 2026-08-28).
   ① 링 두께 1.1px → 1.6px   지금은 머리카락이라 빛이 지나가도 눈에 안 걸린다. 제일 크게 먹는 손잡이
   ② 빛 호     42/92 → 58/118  빛줄기가 길어져 «지나가는 동안» 보이는 시간이 는다
   ③ 거울쪽   268/318 → 242/302  ②의 짝(360-118 · 360-58)
   ⛔ **색 값은 한 개도 안 바꾼다.** `--빛-센`·`--빛-여린` 은 이 단추만의 것이 아니다 —
      shell.css 의 «기둥(사이드바) 켜진 탭»이 같은 값을 쓰고 tests/test-topbar.js 가 그 배선을 지킨다.
      토큰을 올리면 다른 화면이 같이 밝아지고 시험이 운다.
   ⛔ 두께를 2px 이상으로 올리지 마라 — «빛이 지나간다»가 아니라 «테두리 단추»로 읽히기 시작한다.
   ⛔ 바깥 번짐(drop-shadow)·속도(3.2s)·면 채우기로 풀지 마라 (아래 08-21 주석의 그 세 함정).
   ★ 셋 다 «색이 아닌 값»이라 라이트/다크 양쪽에 저절로 맞는다 — 따로 손댈 라이트 규칙이 없다. */
.st-gate .gate-approve::before{ content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; padding:1.6px;
  /* ⚠️ 마스크 색은 «알파»만 쓰인다 — 흰색을 쓴 까닭은 test-tour.js 가 이 파일의 .tour-spot 아래를
     «투어 것»으로 보고 #000 을 막기 때문이다(투어 규칙이지 이 단추 규칙이 아니다). */
  background:conic-gradient(from var(--돌각),
    var(--빛-센) 0deg, var(--빛-여린) 58deg, transparent 118deg,
    transparent 242deg, var(--빛-여린) 302deg, var(--빛-센) 360deg);
  -webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  -webkit-mask-clip:content-box,border-box; -webkit-mask-composite:xor;
  mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  mask-clip:content-box,border-box; mask-composite:exclude;
  animation:돌기 3.2s linear infinite; }
.st-gate .gate-approve:hover{ background:var(--알약-호버) }
/* 승인 못 하는 상태 — 빛이 «돌면» 누르라는 말이 된다. 멈추고 회색으로 내린다 */
.st-gate .gate-approve:disabled{ opacity:1; cursor:not-allowed;
  background:var(--wait-bg); color:var(--wait); box-shadow:inset 0 0 0 1px var(--wait-ln); }
.st-gate .gate-approve:disabled::before{ animation:none; background:none; }
/* 움직임을 줄인 손님에겐 빛이 0°에 굳는다 — 그래도 위의 «늘 있는 선»이 남아 알약 모양은 산다.
   전엔 이 자리에서 단추가 거의 안 보였다 (A 를 넣는 두 번째 까닭 · J.J 2026-08-21) */
@media (prefers-reduced-motion: reduce){ .st-gate .gate-approve::before{ animation:none } }

/* ══════════════════════════════════════════════════════════════════════════
   단추 체계 — 다섯 갈래 (J.J 2026-08-25 확정 · `~/globalroad-notes/단추-체계-시안.html`)

   손님이 외울 것은 한 문장이다:
     ① 빛나는 알약 = 마지막 한 번   ② 라임 «면» = 지금 값이 든다 / 라임 «테두리» = 자리를 연다
     ③ 검정에 가까운 면 = 곁일      ④ 파랑 테두리 = 설명      ⑤ 회색→빨강 = 지우기

   ⛔ ① 승인은 **손대지 않는다** (J.J 2026-08-25: 「지금 우리 걸로 사용, 목업대로 수정 안 함」).
      `.st-gate .gate-approve` 는 위쪽 규칙 그대로다 — 여기서 다시 적지 않는다.
   ⚠️ 이 블록이 **파일 맨 뒤**에 있는 것이 규칙이다. `.st-top` 이 셋으로 갈려 맨 뒤엣것이 이겼던
      08-25 §4⑤ 와 같은 자리라, 위에서 정한 것을 여기서 «한 번에» 덮는다.
   ⚠️ 무게를 `button.클래스` 로 맞춘다 — `button.ghost` 가 요소+클래스라 클래스 하나로는 못 이긴다
      (이 저장소가 `button.ghost vs .sec-btn` 에서 이미 밟았다).
   ══════════════════════════════════════════════════════════════════════════ */

/* ③ 보조 «면» — 검정에 가깝게 (J.J 2026-08-25: 「좀더 어두워서 검정색에 가까워야 함」).
   판(--surface #1e2125) 위에서 **파인 것처럼** 보이게 내린다. 글자는 회색 그대로. */
/* ⚠️ 「검정에 가깝게」는 **다크에서만** 맞는 말이다 — 라이트(흰 바탕)에 그대로 쓰면
      흰 카드 위에 검정 단추가 서서 «곁일»이 제일 세게 보인다(가이드 #bfcee0 가 밟은 자리와 같다).
      뜻은 하나다: «판보다 한 톤 «내린» 면». 다크는 검정 쪽으로, 라이트는 옅은 회색으로 내린다.
   ⚠️ 자손 규칙엔 `:root:not([data-theme="light"])` 이 안 통한다 → **변수로 가른다**(하니스 §7 ②). */
:root{ --btn-quiet: var(--chip-c); }                                   /* 라이트 기본 — 옅은 회색 면 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --btn-quiet: color-mix(in srgb, var(--bg) 62%, #000); }
}
[data-theme="dark"]{ --btn-quiet: color-mix(in srgb, var(--bg) 62%, #000); }
[data-theme="light"]{ --btn-quiet: var(--chip-c); }
button.ghost,
button.sec-btn,
button.cat-btn,
.st-back,
.calc-h .fold,
button.pub-one-set{
  background: var(--btn-quiet);
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 600;
}
button.ghost:hover,
button.sec-btn:hover,
button.cat-btn:hover,
.st-back:hover,
.calc-h .fold:hover,
button.pub-one-set:hover{
  background: color-mix(in srgb, var(--btn-quiet) 70%, var(--surface));
  color: var(--text);
  border-color: color-mix(in srgb, var(--muted) 46%, var(--border));
}

/* ② 라임 «면» — 누르면 그 칸의 값이 «실제로» 든다.
   ⛔ 면을 칠했으면 글자는 그 면의 짝(`--accent-ink`)이다. 라임 위 회청(#bfcee0)은 안 읽힌다(실측). */
button.cat-btn.find,
button.sec-btn.mf-use[data-use="1"],
button.tc-btn.tc-push,
button.crop-ok,
.calc-sum button.cs-rec{
  background: var(--accent-fill);
  color: var(--accent-ink);
  border: 1px solid var(--accent-fill);
  font-weight: 800;
}
button.cat-btn.find:hover,
button.sec-btn.mf-use[data-use="1"]:hover,
button.tc-btn.tc-push:hover,
button.crop-ok:hover,
.calc-sum button.cs-rec:hover{ filter: brightness(1.06); background: var(--accent-fill); color: var(--accent-ink); }

/* 「추천값으로」는 곁줄의 «작은 링크»였다 — 면을 받았으니 단추 꼴을 갖춘다 */
.calc-sum button.cs-rec{ padding:4px 10px; border-radius:8px; font-size:11.5px; margin-left:6px; }

/* ② 라임 «테두리» — 누르면 «자리가 열릴» 뿐, 아직 아무 값도 안 바뀐다 */
button.ghost.sec-btn#addOpt,
button.ghost.sec-btn.mf-popen,
button.tb-addbtn{
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font-weight: 700;
}
button.ghost.sec-btn#addOpt:hover,
button.ghost.sec-btn.mf-popen:hover,
button.tb-addbtn:hover{
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}

/* ④ 알려주기 — 파랑 테두리(앱의 「읽기」 색). 누르면 «설명»이 뜬다 */
button.cat-q,
button.tour-again{
  background: transparent;
  color: var(--read);
  border: 1px solid color-mix(in srgb, var(--read) 45%, transparent);
  font-weight: 700;
}
button.cat-q:hover,
button.tour-again:hover{
  background: color-mix(in srgb, var(--read) 12%, transparent);
  color: var(--read);
  border-color: var(--read);
}

/* ⑤ 지우기 — 평소엔 회색으로 조용히, 올리면 빨강. 실수로 누르지 않게 «면을 안 준다» */
button.nm-x, button.tg-x, button.mf-pdel, button.cat-x, button.ph-x{
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  font-weight: 700;
}
button.nm-x:hover, button.tg-x:hover, button.mf-pdel:hover, button.cat-x:hover, button.ph-x:hover{
  background: color-mix(in srgb, var(--over) 12%, transparent);
  color: var(--over);
  border-color: color-mix(in srgb, var(--over) 40%, transparent);
}

/* ── 무게 맞추기 — 위에서 «더 센» 규칙이 셋 있었다 (실측 getComputedStyle 2026-08-25) ──
   ⚠️ 고친 «뒤» 재서 찾았다. 소스에 한 줄 넣은 것 ≠ 화면이 그 값을 쓰는 것(08-23 §4①).  */

/* ① `#studio-root .tb-addbtn`(3398줄)이 «민트 면»을 칠하고 있었다 — id+class 라 `button.x` 로는 못 이긴다.
      그 줄이 바로 시안이 짚은 「민트가 두 얼굴」이다: 「＋ 더하기」와 「✕ 지우기」가 같은 민트였다.
      ⛔ 3398 줄을 지우지 않는다 — `.report-btn`·`.save-fail .again` 은 이 체계 밖이라 그대로 둔다. */
/* ⚠️ 크기도 여기서 준다 — `.tb-addbtn` 은 `.ghost` 가 «아니라» 기본 `button` 규칙(15px · 11/14px)을
      타고 있었다. 그래서 같은 갈래(＋ 옵션 추가 13px · 7/12px)보다 혼자 컸다(J.J 실측 지적 08-25).
      갈래가 같으면 크기도 같아야 한다 — 색만 맞추면 「같은 뜻」으로 안 읽힌다. */
#studio-root button.tb-addbtn{
  background: transparent; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); font-weight: 700;
  font-size: 13px; padding: 7px 12px; border-radius: 9px; }
#studio-root button.tb-addbtn:hover{
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: var(--accent); }
/* 「적용」은 ② 라임 «면» 이다 — 민트가 아니다 */
#studio-root button.cat-btn.find{
  background: var(--accent-fill); color: var(--accent-ink); border: 1px solid var(--accent-fill); font-weight: 800; }
#studio-root button.cat-btn.find:hover{ filter: brightness(1.06); background: var(--accent-fill); color: var(--accent-ink); }
/* 「✕ 줄 지우기」는 ⑤ 지우기다 — 민트 면을 걷는다 */
#studio-root button.tb-del{
  background: transparent; color: var(--muted); border: 1px solid transparent; font-weight: 700; }
#studio-root button.tb-del:hover{
  background: color-mix(in srgb, var(--over) 12%, transparent); color: var(--over);
  border-color: color-mix(in srgb, var(--over) 40%, transparent); }

/* ② 「📖 가이드」는 ④ 알려주기(파랑)로 간다.
      전엔 `[data-theme="dark"] .st-top .tour-again` 이 `#bfcee0`(--erase-ink)을 줬다(08-22 · J.J 지정값).
      🔄 08-25 시안에서 J.J 가 «가이드=파랑»으로 확정해 그 값을 대신한다.
      ⛔ 되돌리려면 3331~3342 줄의 08-22 값이 그대로 남아 있다 — 이 블록만 걷으면 된다. */
[data-theme="dark"] .st-top button.tour-again,
[data-theme="light"] .st-top button.tour-again{
  color: var(--read); border-color: color-mix(in srgb, var(--read) 45%, transparent); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .st-top button.tour-again{
    color: var(--read); border-color: color-mix(in srgb, var(--read) 45%, transparent); }
}
[data-theme="dark"] .st-top button.tour-again:hover,
[data-theme="light"] .st-top button.tour-again:hover{
  background: color-mix(in srgb, var(--read) 12%, transparent); border-color: var(--read); }

/* ── ③ 보조 «면»이 안 먹던 세 자리 (J.J 실측 지적 2026-08-25: 「여전히 판색이랑 똑같아」) ──
   `button.cat-btn`(요소+클래스)보다 «센» 규칙 셋이 전부 `background:transparent` 를 주고 있었다:
     `.cat-btn.cat-btn-q`(클래스 둘) · `#catChange.cat-btn`(id+클래스) · `.pt-none .cat-btn`(클래스 둘)
   그래서 「✎ 바꾸기」·「🔍 직접 넣기」가 판(--surface) 색 그대로 비쳤다.
   ⚠️ **면만** 내린다 — 글자·테두리의 `#bfcee0` 은 J.J 가 08-25 에 «값으로 직접» 준 것이라 안 건드린다.
      (975~983 줄 그대로 산다. 여기서는 background 만 덮는다) */
#studio-root .cat-btn.cat-btn-q,
#studio-root #catChange.cat-btn,
#studio-root .pt-none .cat-btn,
.cat-btn.cat-btn-q, #catChange.cat-btn, .pt-none .cat-btn{ background: var(--btn-quiet); }
#studio-root .cat-btn.cat-btn-q:hover,
#studio-root #catChange.cat-btn:hover{ background: color-mix(in srgb, #bfcee0 10%, var(--btn-quiet)); }
#studio-root .pt-none .cat-btn:hover{ background: color-mix(in srgb, var(--text) 6%, var(--btn-quiet)); }

/* 🔄 2026-08-27 (J.J ⑤-1) — 점선 색은 #98a2b3(J.J 가 못박은 값) · ⛔ 라임 테두리 금지.
   ⚠️ `.ph.add` 규칙이 이 파일에 **둘** 있다(1865·1958). 한쪽만 고치면 뒤엣것이 이겨 조용히 안 바뀐다. */
.ph.add .plus small{ font-size:10.5px; font-weight:600; color:var(--muted); margin-top:3px }

/* 업로드 중/실패 카드 — 파일마다 «따로» 선다 (J.J ⑤-2·3·4·6) */
.ph.ph-up{ position:relative; border:1px solid #98a2b3; overflow:hidden }
.ph.ph-up .thumb{ width:100%; height:100%; object-fit:cover; filter:saturate(.7) }
.ph.ph-up .up-over{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; padding:8px; background:rgba(0,0,0,.55); text-align:center }
.up-tx{ font-size:11.5px; font-weight:700; color:#fff; word-break:keep-all }
.up-bar{ width:78%; height:4px; border-radius:9999px; background:rgba(255,255,255,.28); overflow:hidden }
.up-bar i{ display:block; height:100%; background:var(--accent-fill); transition:width .15s linear }
/* 실패 — 빨강 계열. ⛔ 카드 전체를 라임으로 만들지 않는다 */
.ph.ph-up.bad{ border-color:color-mix(in srgb,#ff6b6b 55%,var(--border)) }
.ph.ph-up.bad .up-over{ background:color-mix(in srgb,#ff6b6b 20%,rgba(0,0,0,.6)) }
.up-x{ width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#ff6b6b; color:#fff; font-size:12px; font-weight:800 }
.up-again{ height:24px; padding:0 10px; border-radius:9999px; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.55); font:inherit; font-size:11px; font-weight:700; cursor:pointer }
.up-again:hover{ background:rgba(255,255,255,.14) }
.up-cancel{ z-index:2 }

/* 옵션 «값» 이름칸 (J.J 2026-08-28: 「옵션타이틀만 수정되고 실제 옵션이 수정이 되지않아 이름이」).
   ⚠️ `.vchip` 규칙이 이 파일에 **셋**이다(931·1320·1408). 같은 명시도면 뒤엣것이 이기니 맨 끝에 둔다 —
      위에 끼워 넣으면 조용히 안 먹는다(인계서 §4① · 명시도로 세 번 진 자리).
   ⛔ 칩 안이라 «입력칸처럼» 보이면 안 된다. 평소엔 글자 그대로, 올리면 테두리, 누르면 라임 —
      옵션 이름칸(.oname-input)과 같은 규율이다. */
.vchip .vname-input{ font:inherit; color:inherit; background:transparent; border:1px solid transparent;
  border-radius:5px; padding:0; margin:0 -1px; min-width:1.2ch; max-width:30ch; }
/* ⚠️ 안여백 0 · 바깥여백 -1px — 테두리 1px 이 «칩 폭을 안 늘리게» 상쇄한 값이다.
   안 맞추면 칩마다 4.7px 씩 넓어져 값이 많은 옵션은 한 줄이 통째로 접힌다(실측 2026-08-28). */
.vchip .vname-input:hover{ border-color:var(--border) }
.vchip .vname-input:focus{ border-color:var(--accent); outline:none; background:var(--bg) }
/* 지운 값은 못 고친다 — 그은 채로 두고 「되돌리기」만 준다(그 칩엔 칸을 아예 안 그린다) */

/* 업로드 실패 — «진짜 까닭»과 «치우기» (J.J 2026-08-28)
   「실제 실패 이유 + ✕ 닫기를 둘 다 넣어주세요 … 실패 카드는 새로고침 없이 직접 제거할 수 있어야 합니다」
   ⚠️ 카드가 125px 밖에 안 된다 — 까닭은 두 줄까지만 보이고 나머지는 자른다(title 로 전문을 남긴다).
      안 자르면 「다시 시도」가 카드 밖으로 밀려난다. */
.up-why{ font-size:10.5px; line-height:1.35; color:rgba(255,255,255,.88); margin:-2px 0 1px; max-width:100% }
/* 🔴 줄 자르기(-webkit-line-clamp)는 **flex 아이템에 안 먹는다** — `display:-webkit-box` 가
   `flow-root` 로 블록화된다(실측 2026-08-28: 그래서 글자가 «줄 가운데»에서 싹둑 잘렸다).
   ⇒ 안쪽 span 이 자르기를 진다. 전문은 `title` 에 남는다. 이 두 겹을 한 겹으로 합치지 마라. */
.up-why > span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:keep-all }
/* 치우기 ✕ — 진행 중 카드의 «취소»와 같은 자리·같은 모양이다(손님에겐 둘 다 「이 카드 없애기」다) */
.up-drop{ z-index:2 }

/* 반영 실패 카드 — 머리말 · 우리말 까닭 · 영어 원문 (J.J 2026-08-28)
   「손님이 이해할 수 있는 설명을 먼저 보여주고, 필요하면 영어 원문은 아래에 작게 보조로 남겨주세요」
   ⚠️ `.apply-warn` 규칙이 위(2265~2271)에 이미 있다 — 같은 명시도면 뒤엣것이 이기니 여기(맨 끝)에 둔다. */
.apply-warn .aw-head{ font-size:13px; font-weight:800; color:var(--text) }
/* 영어 원문은 «보조»다 — 우리말보다 작고 흐리게. 손님이 읽어야 하는 줄이 아니라 옮겨 적을 줄이다. */
.apply-warn .aw-raw{ font-size:11px; opacity:.55; word-break:break-word; line-height:1.4; margin-top:-2px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace }

/* 고른 대소문자 꼴 — 셋 중 무엇인지 보이게 (J.J 2026-08-28: 기본 Abc · 고르면 그게 이긴다)
   ⛔ 라임 «면»으로 칠하지 않는다 — 그건 승인 단추 시그니처다. 테두리와 글자만 든다. */
.opt-case.on{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)) }