@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
  /* Pretendard 자가호스팅(같은 출처) — CDN 차단/미로딩(예: Edge) 시 맑은고딕 폴백 방지.
     ⚠️선언은 `fonts.css` 에 있다(SPA 와 공용). @import 라 다른 규칙보다 앞에 와야 유효하다. */
  @import url('/fonts.css');
  :root{
    --brand:#2c5aa0;
    --accent:#4A7BE5; --accent-600:#3A6BC4; --accent-700:#2E568F; --accent-soft:#EAF1FC; --accent-fg:#3A6BC4;
    /* ★accent 를 **바탕으로 깔았을 때** 얹는 글자색. `--accent-fg` 는 `--accent-soft`(연한 바탕)
       위 글자라 다른 것이다 — 둘을 헷갈리면 빨강 위에 빨강을 쓴다.
       레포 곳곳이 이 자리에 흰색을 손으로 박고 있었는데(디자인시스템 primitive 포함)
       **이름이 없어서** 그랬다. 두 테마 모두 accent 가 짙은 붉은 계열이라 값은 하나로 충분하다.
       ⚠️이 주석에 hex 를 그대로 적지 마라 — `check_hex_colors` 는 주석도 세므로 늘어난 걸로 잡힌다. */
    --on-accent:#fff;
    /* 토스 톤(2026-06-22): 따뜻한 회색 스케일·부드러운 그림자. brand=주 파랑(사방넷 관리자 톤 §5)은 로고·프라이머리 CTA, accent=반복 UI 크롬용 차분한 파랑 — 쿠팡 레드는 2026-09 걷어냈다(빨강은 경고 전용) */
    --fg:#191f28; --fg2:#333d4b; --muted:#6b7684; --faint:#8b95a1;
    --bg:#F5F6FA; --panel:#fff; --subtle:#f9fafb; --soft:#f9fafb;
    --border:#E3E8F0; --border-soft:#f2f4f6;
    --thead-bg:#F2F2F2; /* 사방넷식 연회색 밴드 — 표 헤더(finance·settings·ads…) + 조회 검색패널 라벨셀. 다크는 아래서 재정의 */
    --lookup-thead:#3A4A6B; /* 조회틀 결과표(.table.console)만 다크네이비 헤더 · 흰 텍스트는 on-accent. 사방넷 A-5: 필터 라벨=회색, 결과 격자=네이비(두 색이 다르다). 다크는 이 값을 그대로 상속 */
    /* 의미색 3종 — 2026-08-27 접근성 실측(PR 963 · 디자인_토큰_사용규칙 §9)에서 **라이트만** AA(4.5:1)
       미달이라 명도를 낮췄다. 색상·채도는 그대로 두고 명도만 내린 최소값이다
       ⚠️PR 번호를 샵+세자리(예: 샵963)로 쓰지 마라 — `check_hex_colors.py` 가 그걸 3자리 hex 로
          세어 게이트가 깨진다. 이 파일 주석에서는 「PR 963」처럼 샵 없이 적는다.
       (--ok 3.13→4.54 · --warn 3.00→4.54 · --rej 4.41→4.52 · 최악은 --panel/-bg 중 나쁜 쪽).
       ⚠️`.dev/mockups/commerce-console/*.dc.html` 이 이 세 값을 인라인으로 베끼므로 같이 움직여야 한다
          (안 그러면 `check_mockup_tokens.py` 드리프트가 baseline 을 넘긴다).
       ⛔다크는 이미 전부 통과라(7.76·8.50·6.12) 안 건드린다. -bg 3종도 그대로. */
    --ok:#12843c; --ok-bg:#ecfdf5; --rej:#DC2626; --rej-bg:#fef2f2;
    --warn:#ac5e05; --warn-bg:#fff7ed;
    --money:#0a7a55;  /* 돈(순이익·매출) 초록 — v6 --money 이식 */
    --t-official:#2a78d6; --t-official2:#1baf7a; --t-match:#e87ba4; --t-judge:#c98500; --t-internal:#4a3aa7;
    color-scheme:light;
    --radius:2px; --radius-sm:2px; /* 사방넷식 각진 모서리 — 표·카드·버튼·입력 전역에 번진다 */
    --shadow:0 1px 3px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.03);
  }
  /* ══ 다크모드 (v6) — 토큰만 재정의하면 전 컴포넌트가 토큰을 읽으므로 앱 전체가 다크로 전환.
     기본 :root=라이트. 시스템 다크(사용자가 라이트 강제 안 함) 또는 [data-theme=dark] 강제 시 적용.
     brand·accent 는 다크 배경 대비 위해 살짝 밝게. 라이트 강제=기본 :root가 그대로 이김(별도 블록 불필요). ══ */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --brand:#3f72c9;
      --accent:#6B9BF0; --accent-600:#82AEF5; --accent-700:#5386DB; --accent-soft:#172740; --accent-fg:#8AB4F5;
      --fg:#e6edf3; --fg2:#c8d2dc; --muted:#9aa6b2; --faint:#6b7684;
      --bg:#0b0d10; --panel:#14171c; --subtle:#1a1e24; --soft:#1a1e24;
      --border:#232a32; --border-soft:#1b2129;
      --thead-bg:#232a32; /* 다크: 헤더는 본문보다 밝은 회색 밴드 · 글씨는 --fg(연) */
      --ok:#4ecb83; --ok-bg:#10261a; --rej:#f2707e; --rej-bg:#2a1414;
      --warn:#e0b64d; --warn-bg:#271f10;
      --money:#3fbf87;
      --shadow:0 1px 3px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.28);
      color-scheme:dark;
    }
    :root:not([data-theme="light"]) .pgtop-back,
    :root:not([data-theme="light"]) .pgtop-refresh{
      background:var(--panel); border-color:var(--border); color:var(--fg2);
    }
  }
  :root[data-theme="dark"]{
    --brand:#3f72c9;
    --accent:#6B9BF0; --accent-600:#82AEF5; --accent-700:#5386DB; --accent-soft:#172740; --accent-fg:#8AB4F5;
    --fg:#e6edf3; --fg2:#c8d2dc; --muted:#9aa6b2; --faint:#6b7684;
    --bg:#0b0d10; --panel:#14171c; --subtle:#1a1e24; --soft:#1a1e24;
    --border:#232a32; --border-soft:#1b2129;
    --thead-bg:#232a32; /* 다크: 헤더는 본문보다 밝은 회색 밴드 · 글씨는 --fg(연) */
    --ok:#4ecb83; --ok-bg:#10261a; --rej:#f2707e; --rej-bg:#2a1414;
    --warn:#e0b64d; --warn-bg:#271f10;
    --money:#3fbf87;
    --shadow:0 1px 3px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.28);
    color-scheme:dark;
  }
  :root[data-theme="dark"] .pgtop-back,
  :root[data-theme="dark"] .pgtop-refresh{
    background:var(--panel); border-color:var(--border); color:var(--fg2);
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  /* 글씨 굵기 사다리 넷 — 본문 400 / 라벨 600(th·버튼·탭·필드라벨·칩) / 강조 700(상태알약·배지·섹션제목·강조숫자).
     ⛔800 이상을 새로 쓰지 마라: 13px 본문에 800 을 얹으면 글자 속이 막히고, 전부 굵으면 아무것도 강조되지 않는다. */
  body{ font-family:'Pretendard Variable','Pretendard',-apple-system,'Malgun Gothic',sans-serif;
        font-size:13px; font-weight:400; line-height:1.5; color:var(--fg2); background:var(--bg); -webkit-font-smoothing:antialiased; }
  a{ color:var(--accent); text-decoration:none; }
  /* <details> 마커 전역 제거 — 일부 브라우저가 마커를 'arrow_right' 글자로 렌더해 텍스트와 겹치는 글리치 방지 */
  summary{ list-style:none; }
  summary::-webkit-details-marker{ display:none; }
  summary::marker{ content:""; }

  .app{ display:grid; grid-template-columns:204px 1fr; min-height:100vh; }

  /* ── 사이드바 ── */
  /* ── 사이드바 = 사방넷식 다크네이비 ──
     팔레트를 .side 스코프에서 토큰으로 재정의한다. 하위 nav/brand/footer 는 전부 이 토큰들
     (--fg2·--muted·--soft·--accent-soft·--accent-fg·--border …)을 참조하므로 자동으로 재색상된다.
     ⚠️hex 는 전부 `--이름:` 선언 자리라 check_hex_colors 가 제외한다(토큰 정의는 허용처).
     ⚠️미선언 var 금지 — 새 이름을 만들지 않고 기존 토큰을 이 스코프에서만 덮어쓴다.
     --brand(주 파랑)는 side 안에서도 그대로 → .brandsq 는 파랑. side 자체는 라이트/다크 공통 네이비. */
  .side{
    --panel:#191C2D; --subtle:#212842; --soft:#212842;
    --fg:#FFFFFF; --fg2:#E4E9F2; --muted:#AEB7CC; --faint:#8892A8;
    --accent:#57A0FF; --accent-fg:#57A0FF; --accent-soft:#233A5E;
    --border:#2E3A5C; --border-soft:#28304C;
    background:var(--panel); color:var(--fg2);
    border-right:1px solid var(--border); position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  .brand{ padding:16px 16px 12px; font-size:16px; font-weight:700; color:var(--fg); letter-spacing:-.02em;
          border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:7px;
          text-decoration:none; cursor:pointer; transition:color .12s; }
  .brand:hover{ color:var(--accent); }
  .brand .brandsq{ width:22px; height:22px; border-radius:2px; background:var(--brand); flex:0 0 auto; }
  .sidefoot{ padding:12px 16px 16px; font-size:12px; color:var(--faint); }
  .navgroup{ padding:14px 10px 2px; font-size:11px; font-weight:600; color:var(--faint); letter-spacing:.04em; }
  .navgroup span{ display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; letter-spacing:0; color:var(--muted); }
  .nav a{ display:block; padding:8px 16px; color:var(--fg2); font-size:13px; font-weight:600; border-left:2px solid transparent; }
  .nav a:hover{ background:var(--soft); color:var(--accent); }
  .nav a.on{ background:var(--accent-soft); color:var(--accent-fg); font-weight:700; border-left-color:var(--accent); }
  .navmeta{ display:block; margin-top:2px; padding-right:24px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:400; overflow-wrap:anywhere; }
  .nav a.on .navmeta{ color:var(--accent-fg); opacity:.82; }
  .navbadge{ float:right; min-width:18px; text-align:center; font-size:10.5px; font-weight:700; color:#fff; border-radius:2px; padding:1px 6px; margin-top:1px; }
  .navbadge.bad{ background:var(--rej); } .navbadge.warn{ background:var(--warn); }
  .nav a .stage{ float:right; font-size:9.5px; color:var(--faint); font-weight:600; margin-top:3px; }

  /* ── 메인 ── */
  .main{ padding:0; min-width:0; }
  .topbar{ position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(6px);
           border-bottom:1px solid var(--border); padding:14px 26px; display:flex; align-items:center; gap:12px; }
  .topbar h1{ font-size:18px; font-weight:700; color:var(--fg); letter-spacing:-.02em; }
  .topbar .count{ font-size:12px; font-weight:700; color:var(--muted); background:var(--subtle);
                  padding:2px 9px; border-radius:999px; font-variant-numeric:tabular-nums; }
  .topbar .sub{ font-size:12px; color:var(--muted); }
  .pgtop-back{ display:inline-flex; align-items:center; gap:5px; min-height:29px; padding:0 11px 0 8px;
               border:1px solid var(--border); border-radius:2px; background:var(--panel);
               color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
  .pgtop-back:hover{ border-color:var(--accent); color:var(--accent); }
  .pgtop-back svg{ width:14px; height:14px; opacity:.65; flex:0 0 auto; }
  .pgtop-count{ display:inline-flex; align-items:center; min-height:24px; padding:2px 9px;
                border-radius:999px; background:var(--subtle); color:var(--muted);
                font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .pgtop-fresh{ display:inline-flex; align-items:center; gap:6px; margin-left:auto;
                color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap; }
  .pgtop-fresh .d{ width:7px; height:7px; border-radius:999px; background:var(--ok); flex:0 0 auto; }
  .pgtop-refresh{ display:inline-flex; align-items:center; gap:5px; min-height:29px; padding:0 10px;
                  border:1px solid var(--border); border-radius:2px; background:var(--panel);
                  color:var(--fg2); font-family:inherit; font-size:12px; font-weight:700;
                  cursor:pointer; white-space:nowrap; }
  .pgtop-refresh:hover{ border-color:var(--accent); color:var(--accent); }
  .pgtop-refresh svg{ width:14px; height:14px; opacity:.65; flex:0 0 auto; }
  .content{ padding:20px 26px 60px; max-width:1560px; margin:0 auto; }

  /* ── KPI 스트립 ── */
  .kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:22px; }
  .kpi{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 15px; box-shadow:var(--shadow); }
  .kpi .lbl{ font-size:11.5px; color:var(--muted); font-weight:600; }
  .kpi .val{ font-size:24px; font-weight:700; color:var(--fg); margin-top:3px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .kpi .sub{ font-size:11px; margin-top:3px; font-weight:600; }
  .kpi.alert{ border-color:#fbd5dc; }
  .kpi.alert .val{ color:var(--rej); }
  .kpi .sub.bad{ color:var(--rej); } .kpi .sub.good{ color:var(--ok); }
  .kpi.accent .val{ color:var(--accent); }
  /* ── 공통 섹션/테이블 ── */
  .section{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
            box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden; }
  .sec-head{ padding:11px 16px; border-bottom:1px solid var(--border-soft); font-size:13px; font-weight:700; color:var(--fg); display:flex; align-items:center; gap:8px; }
  .sec-head .hint{ font-weight:400; font-size:11.5px; color:var(--muted); }
  .sec-body{ padding:14px 16px; }
  table.t{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .t th{ background:var(--thead-bg); color:var(--fg); font-weight:700; text-align:left; padding:7px 12px;
         border-bottom:1px solid var(--border); border-right:1px solid var(--border); font-size:11px; white-space:nowrap; }
  .t td{ padding:7px 12px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
  .t th:last-child, .t td:last-child{ border-right:0; }
  .t tr:last-child td{ border-bottom:0; }
  .t tr:hover td{ background:var(--soft); }
  .t .num{ text-align:right; font-variant-numeric:tabular-nums; }
  .t .kw{ font-weight:600; }
  .btn{ display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 14px;
        border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel);
        color:var(--fg2); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
        text-decoration:none; white-space:nowrap; box-sizing:border-box; vertical-align:middle; }
  .btn:hover{ border-color:var(--accent); color:var(--accent); }
  .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
  .btn.primary:hover{ background:color-mix(in srgb, var(--brand) 85%, black); }
  /* ══ UI 정직화 공통 컴포넌트 (SSOT: docs/_ai/reference/UI_정직화_규칙.md) — 표시/색 전용, 로직 불변 ══ */
  /* 버튼 위험 등급: 🟢안전(기본/측정·되돌리기) · 🟡주의(적용·전환) · 🔴비가역(환불·판매중지·발사·등록) */
  .btn.safe{ border-color:#bbf7d0; color:#15803d; }
  .btn.safe:hover{ border-color:var(--ok); color:var(--ok); }
  .btn.caution{ border-color:#fed7aa; color:#9a5b06; background:var(--warn-bg); }
  .btn.caution:hover{ border-color:var(--warn); color:var(--warn); }
  .btn.danger{ border-color:#fecaca; color:var(--rej); background:var(--rej-bg); }
  .btn.danger:hover{ background:var(--rej); border-color:var(--rej); color:#fff; }
  .btn.dimmed{ opacity:.45; }
  /* ⚠️★ 잠긴 버튼은 잠긴 것처럼 보여야 한다 (2026-08-22 실측).
     그 전엔 잠긴 버튼과 멀쩡한 버튼의 계산 스타일이 **완전히 같았다**
     (opacity 1 · color rgb(51,61,75) · cursor:pointer 까지 동일). 이유는 title
     툴팁에만 있어서 마우스를 올려야 보였고, 사장님은 눌러도 무반응인 것을
     「예산 수정이 고장났다」로 읽었다.
     ⚠️ aria-disabled 를 같이 받는다 — disabled 는 브라우저가 클릭 이벤트를 아예
        안 만들어(부모로도 안 간다) 「왜 잠겼는지」를 말해줄 수가 없다. 이유를
        말해야 하는 버튼은 aria-disabled 로 잠근다(광고 화면 adsLockedExplain). */
  .btn[disabled], .btn[aria-disabled="true"]{ background:var(--soft); border-color:var(--border);
        color:var(--faint); cursor:not-allowed; box-shadow:none; }
  .btn[disabled]:hover, .btn[aria-disabled="true"]:hover{ border-color:var(--border);
        color:var(--faint); background:var(--soft); }
  /* 신선도·출처 배지: 출처 아이콘 + 시각 + 신선도색. template tag srcbadge 가 렌더 */
  .srcb{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700;
        border-radius:999px; padding:1px 7px; white-space:nowrap; vertical-align:middle; }
  .srcb .sb-dot{ width:6px; height:6px; border-radius:999px; flex-shrink:0; }
  .srcb.f-fresh .sb-dot{ background:var(--ok); }
  .srcb.f-warn  .sb-dot{ background:var(--warn); }
  .srcb.f-stale .sb-dot{ background:var(--rej); }
  .srcb.f-na    .sb-dot{ background:var(--faint); }
  .srcb.s-live  { background:var(--ok-bg);   color:var(--ok); }
  .srcb.s-snap  { background:var(--subtle);  color:var(--muted); }
  .srcb.s-report{ background:var(--subtle);  color:var(--muted); }
  .srcb.s-est   { background:var(--warn-bg); color:#92520a; }
  .srcb.s-manual{ background:var(--subtle);  color:var(--muted); }
  /* 서브탭 (한 메뉴 안 여러 뷰 전환 — 예: 손익 ↔ 배송수익성) */
  .subtabs{ display:flex; gap:2px; margin:0 0 18px; border-bottom:1px solid var(--border); }
  .subtabs a{ padding:9px 18px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
  .subtabs a:hover{ color:var(--fg2); }
  .subtabs a.on{ color:var(--accent); border-bottom-color:var(--accent); }

  /* ── 페이지 목적 헤더 (모든 페이지: "여기서 ___ 하는 곳" + 핵심 KPI) ── */
  .purpose{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;
            background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
            box-shadow:var(--shadow); padding:14px 18px; margin-bottom:18px; }
  .purpose .lead{ flex:1; min-width:200px; }
  .purpose .lead .h{ font-size:15px; font-weight:700; color:var(--fg); letter-spacing:-.02em; }
  .purpose .lead .d{ font-size:12px; color:var(--muted); margin-top:2px; }
  .purpose .kstrip{ display:flex; gap:20px; }
  .purpose .k .v{ font-size:20px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .purpose .k .l{ font-size:11px; color:var(--muted); font-weight:600; }
  /* ── 페이지 안내(손그림 흐름): "이 페이지 = 뭐 하는 곳 + 쓰는 순서 + 신호 범례" (전 페이지 공용) ── */
  .pg-flow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px; }
  .pg-step{ background:var(--soft); border:1px solid var(--border); border-radius:999px;
            padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--fg2); white-space:nowrap; }
  .pg-arr{ color:var(--faint); font-weight:700; font-size:14px; }
  .pg-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:11px; font-size:12px; color:var(--muted); font-weight:600; }
  .pg-legend span{ white-space:nowrap; }

  /* ── 신호등 닷 (🔴위기 🟡손봐야함 🟢기회 · 정상은 무표시) ── */
  .sdot{ display:inline-block; width:9px; height:9px; border-radius:999px; flex-shrink:0; vertical-align:middle; }
  .sdot.red{ background:var(--rej); box-shadow:0 0 0 3px var(--rej-bg); }
  .sdot.yel{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg); }
  .sdot.grn{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg); }

  /* ── 추천 액션 카드 (인사이트 + 영향숫자 + 한클릭 CTA) ── */
  .acards{ display:grid; gap:12px; margin-bottom:18px; }
  .acard{ display:flex; align-items:center; gap:14px; background:var(--panel);
          border:1px solid var(--border); border-left:4px solid var(--faint);
          border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px 14px 15px; }
  .acard.red{ border-left-color:var(--rej); }
  .acard.yel{ border-left-color:var(--warn); }
  .acard.grn{ border-left-color:var(--ok); }
  .acard.gray{ border-left-color:var(--faint); opacity:.8; }
  /* 액션카드 배지 — 우선순위·임팩트·API소스 */
  .apri{ display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--accent);color:#fff;border-radius:50%;font-size:10px;font-weight:700;flex-shrink:0;margin-right:4px; }
  .aimp{ font-size:11px;font-weight:700;padding:1px 7px;border-radius:2px;background:var(--ok-bg);color:#15803d;margin-left:5px; }
  .aimp.q{ background:var(--subtle);color:var(--muted); }
  .apisrc{ font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:2px;background:#dcfce7;color:#15803d;margin-left:4px;white-space:nowrap; }
  .apisrc.int{ background:#fff7ed;color:#c2410c; }
  .acard .ic{ font-size:20px; line-height:1; flex-shrink:0; }
  .acard .body{ flex:1; min-width:0; }
  .acard .ttl{ font-size:13.5px; font-weight:700; color:var(--fg); }
  .acard .ttl .n{ color:var(--accent); }
  .acard .why{ font-size:12px; color:var(--muted); margin-top:2px; }
  .acard .cta{ display:flex; gap:8px; flex-shrink:0; }
  .acard .cta .btn.ghost{ background:transparent; }
  .acard.done{ opacity:.55; }
  @media(max-width:720px){ .acard{ flex-wrap:wrap; } .acard .cta{ width:100%; } .acard .cta .btn{ flex:1; } }
  /* 아코디언 — 카드 헤더 클릭 시 그 상품 리스트가 인라인으로 펼쳐짐 */
  .acard.acc{ flex-direction:column; align-items:stretch; padding:0; cursor:pointer; }
  .acard.acc .hd{ display:flex; align-items:center; gap:14px; padding:14px 16px 14px 15px; }
  /* ⚠️ 이름충돌 방지: 손그림 노트 .hd 스타일이 액션카드 헤더(.acard .hd)에 새어들지 않게 리셋 */
  .acard .hd{ font-family:inherit; border:0; background:none; border-radius:0; margin:0; color:inherit; box-shadow:none; }
  .acard.acc .chev{ color:var(--faint); font-size:13px; transition:transform .15s; flex-shrink:0; }
  .acard.acc.open .chev{ transform:rotate(90deg); }
  .acard.acc .panel{ display:none; border-top:1px solid var(--border-soft); cursor:default; }
  .acard.acc.open .panel{ display:block; }
  .acard.acc .panel .pwrap{ max-height:340px; overflow:auto; }
  .acard.acc table.lst{ width:100%; border-collapse:collapse; font-size:12px; }
  .acard.acc table.lst th{ position:sticky; top:0; background:var(--thead-bg); color:var(--fg); font-weight:600;
        text-align:left; padding:6px 14px; font-size:11px; border-bottom:1px solid var(--border); white-space:nowrap; }
  .acard.acc table.lst td{ padding:6px 14px; border-bottom:1px solid var(--border-soft); }
  .acard.acc table.lst tr:last-child td{ border-bottom:0; }
  .acard.acc .acct{ font-weight:700; color:var(--accent); white-space:nowrap; }
  .acard.acc .tagchip{ display:inline-block; background:var(--soft); border:1px solid var(--border-soft);
        border-radius:2px; padding:0 6px; margin:1px 2px; font-size:11px; }
  .acard.acc .more-n{ padding:8px 16px; font-size:11.5px; color:var(--muted); background:var(--soft); }

  /* ── Undo 토스트 (적용 후 "끝났어요 N건 · 되돌리기") ── */
  .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
          background:var(--fg); color:#fff; padding:12px 18px; border-radius:999px; box-shadow:0 6px 24px rgba(15,23,42,.25);
          display:flex; align-items:center; gap:14px; font-size:13px; font-weight:600; opacity:0; pointer-events:none;
          transition:opacity .2s, transform .2s; z-index:1000; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  .toast .undo{ color:#ffd2da; font-weight:700; cursor:pointer; text-decoration:underline; }

  /* ── 손그림 도식 공통 컴포넌트 (hand-drawn .hd) — winners·playbook·pnl 공용 (폰트 import는 상단) ── */
  .hd{ font-family:'Nanum Pen Script','Comic Sans MS',cursive; border:2.5px solid #2b2b2b;
       border-radius:255px 12px 225px 14px/14px 225px 12px 255px; background:#fffdf6;
       padding:16px 22px 18px; margin-bottom:16px; color:#222; }
  .hd-h{ font-size:28px; color:#161616; line-height:1.12; }
  .hd-h b{ color:#c0392b; }
  .hd-sub{ font-size:18px; color:#666; margin:2px 0 15px; }
  .hd-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .hd-col{ display:flex; flex-direction:column; gap:7px; }
  .hd-box{ border:2.5px solid #2b2b2b; background:#fff; padding:9px 15px 11px;
       font-size:18.5px; line-height:1.25; color:#444;
       border-radius:16px 235px 14px 240px/240px 14px 235px 16px; transform:rotate(-0.4deg); }
  .hd-row > .hd-box{ flex:1 1 150px; min-width:118px; }
  .hd-box.alt{ transform:rotate(0.45deg); border-radius:235px 16px 240px 14px/14px 240px 16px 235px; }
  .hd-box .t{ font-size:21px; color:#111; }
  .hd-box .s{ font-size:15.5px; color:#8a8a8a; margin-top:2px; }
  .hd-win{ border-color:#15803d !important; background:#effdf2 !important; }
  .hd-win .t{ color:#15803d; }
  .hd-bad{ border-color:#d13b30 !important; background:#fdeceb !important; }
  .hd-bad .t{ color:#c0392b; }
  .hd-cost{ border-color:#e0902e !important; background:#fff6e9 !important; }
  .hd-cost .t{ color:#c77c1e; }
  .hd-ar{ font-size:34px; color:#2b2b2b; flex:0 0 auto; line-height:1; }
  .hd-down{ font-size:26px; color:#2b2b2b; text-align:center; line-height:1.1; }
  .hd-gate{ font-size:18px; color:#b03a2e; text-align:center; padding:1px 0; }
  .hd-gate b{ color:#8e2a20; }
  .hd-note{ font-size:16px; color:#999; margin-top:5px; }
  .hd-loss{ margin-top:15px; padding-top:12px; border-top:2px dashed #c9c2af; font-size:19.5px; line-height:1.6; }
  .hd-loss .r{ color:#c0392b; } .hd-loss .o{ color:#c77c1e; }
  .hd-lever{ margin-top:11px; font-size:19px; color:#1a1a1a; }
  .hd-lever b{ color:#c0392b; }
  @media(max-width:760px){ .hd-ar{ transform:rotate(90deg); width:100%; text-align:center; } }

  /* ── 필기노트 (handwritten note) — 줄친 공책 종이 + 손글씨 + 필기표시 ── */
  .note{ font-family:'Nanum Pen Script','Comic Sans MS',cursive; color:#26303a; position:relative;
    background-color:#fffdf5;
    background-image:repeating-linear-gradient(#fffdf5 0px, #fffdf5 33px, #cadcec 33px, #cadcec 34px);
    background-size:100% 34px; background-position:0 20px;
    border:1px solid #e7e0cd; border-radius:2px;
    box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.05);
    padding:18px 26px 22px 58px; margin-bottom:16px; }
  .note::before{ content:''; position:absolute; top:0; bottom:0; left:42px; width:2px; background:#efb0b0; }
  .note-h{ font-size:30px; line-height:1.18; color:#1c1c24; }
  .note-h b{ color:#c0392b; }
  .note-sub{ font-size:18.5px; color:#6b6b6b; margin:2px 0 12px; }
  .note-line{ font-size:20px; line-height:1.55; color:#2a2a35; }
  .note-line.sm{ font-size:17.5px; color:#5a5a5a; }
  /* 형광펜 */
  .note-hl{ background:linear-gradient(104deg, transparent .5%, rgba(255,222,82,.72) 2%, rgba(255,222,82,.6) 96%, transparent 99.5%); padding:0 3px; border-radius:2px; }
  .note-hl.g{ background:linear-gradient(104deg, transparent .5%, rgba(120,216,150,.6) 2%, rgba(120,216,150,.5) 96%, transparent 99.5%); }
  .note-hl.r{ background:linear-gradient(104deg, transparent .5%, rgba(240,150,140,.6) 2%, rgba(240,150,140,.5) 96%, transparent 99.5%); }
  /* 빨간펜 동그라미 / 밑줄 / 펜색 */
  .note-circ{ border:2.5px solid #c0392b; border-radius:46% 54% 52% 48%/58% 46% 54% 42%; padding:0 9px; color:#c0392b; display:inline-block; }
  .note-u{ border-bottom:2.5px solid #2b6fb0; padding-bottom:1px; }
  .note-uw{ border-bottom:2.5px solid #c0392b; padding-bottom:1px; }
  .note-pen{ color:#c0392b; } .note-blue{ color:#2b6fb0; } .note-grn{ color:#15803d; }
  .note-star{ color:#e0a000; }
  /* 손계산식 ledger (note 안에서) */
  .led{ max-width:480px; margin:6px 0 4px; }
  .led-row{ display:flex; justify-content:space-between; gap:18px; font-size:19px; padding:1.5px 0; color:#333; font-variant-numeric:tabular-nums; }
  .led-row .dim{ font-size:14.5px; color:#9a9a9a; }
  .led-row.op{ color:#c0392b; }
  .led-row.sum{ border-top:2px solid #2b2b2b; margin-top:1px; padding-top:3px; font-size:20px; color:#1a1a1a; }
  .led-row.result{ font-size:21px; }

  /* ══ 시안 v2 공통 CSS ══ */
  /* 퍼널 단계 배지 */
  .stagebadge{ display:inline-flex; align-items:center; gap:6px; background:var(--subtle); border:1px solid var(--border); border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:700; color:var(--fg2); margin-bottom:14px; }
  .stagebadge b{ color:var(--accent); }
  /* 증상 라우터 */
  .symhead{ font-size:14px; font-weight:700; color:var(--fg); margin:2px 0 10px; display:flex; align-items:center; gap:8px; }
  .symhead .hint{ font-weight:400; font-size:11.5px; color:var(--muted); }
  .symrow{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:22px; }
  @media(max-width:1100px){ .symrow{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:560px){ .symrow{ grid-template-columns:1fr; } }  /* 폰: 증상 1칸(2칸 빡빡 해소) */
  .sym{ background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--faint); border-radius:var(--radius); box-shadow:var(--shadow); padding:13px 14px; cursor:pointer; transition:transform .1s,box-shadow .1s; display:flex; flex-direction:column; gap:6px; position:relative; }
  .sym:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,23,42,.08); border-color:var(--accent); }
  .sym.red{ border-left-color:var(--rej); } .sym.yel{ border-left-color:var(--warn); } .sym.grn{ border-left-color:var(--ok); } .sym.gray{ border-left-color:var(--faint); }
  .sym .ic{ font-size:18px; } .sym .q{ font-size:13px; font-weight:700; color:var(--fg); line-height:1.35; }
  .sym .n{ font-size:20px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
  .sym .n.muted{ color:var(--faint); font-size:13px; }
  .sym .impact{ font-size:12px; font-weight:700; color:var(--ok); }
  .sym .impact.q{ color:var(--faint); font-weight:600; }
  .sym .go{ font-size:11px; color:var(--muted); font-weight:600; margin-top:auto; }
  .sym .dismiss{ position:absolute; top:5px; right:7px; font-size:14px; color:var(--faint); cursor:pointer; line-height:1; padding:1px 4px; border-radius:2px; z-index:2; }
  .sym .dismiss:hover{ color:var(--rej); background:var(--rej-bg); }
  .sym .go b{ color:var(--fg2); }
  .sym .meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:10.5px; }
  .sym .rank{ position:absolute; top:-8px; left:-8px; width:20px; height:20px; border-radius:999px; background:var(--fg); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  /* 델타 배지 */
  .delta{ font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .delta.up{ color:var(--ok); } .delta.dn{ color:var(--rej); } .delta.flat{ color:var(--faint); }
  /* ── 공용 페이지 컴포넌트 (여러 head 에서 바이트 동일 복붙되던 것 승격) ── */
  .msg{ padding:10px 16px; border-radius:var(--radius); margin-bottom:16px; font-weight:600; font-size:13px;
        background:var(--ok-bg); color:var(--ok); border:1px solid #bbf7d0; }
  .msg.err{ background:var(--rej-bg); color:var(--rej); border-color:#fecaca; }
  .pane{ display:none; } .pane.on{ display:block; }
  .val-badge{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
  .val-ok{ background:var(--ok-bg); color:var(--ok); }
  .val-warn{ background:var(--warn-bg); color:var(--warn); }
  .val-bad{ background:var(--rej-bg); color:var(--rej); }
  /* 매출 퍼널 */
  .funnel{ display:flex; align-items:stretch; gap:0; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 16px 14px; overflow-x:auto; margin-bottom:8px; }
  .fstage{ flex:1; min-width:130px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; padding:0 6px; }
  .fstage+.fstage::before{ content:"×"; position:absolute; left:-7px; top:34px; color:var(--faint); font-size:15px; font-weight:700; }
  .fstage .flbl{ font-size:11.5px; font-weight:600; color:var(--muted); }
  .fstage .fmul{ font-size:10.5px; color:var(--faint); font-weight:600; }
  .fstage .fval{ font-size:20px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; margin:5px 0 2px; }
  .fstage .fbar{ width:100%; height:7px; background:var(--subtle); border-radius:2px; overflow:hidden; margin-top:6px; }
  .fstage .fbar i{ display:block; height:100%; background:var(--accent); opacity:.85; }
  .fstage.leak .fval{ color:var(--rej); } .fstage.leak .fbar i{ background:var(--rej); }
  .fstage.leak{ background:var(--rej-bg); border-radius:var(--radius-sm); }
  .fstage .conf{ font-size:9.5px; font-weight:700; margin-top:4px; padding:1px 6px; border-radius:999px; }
  .fstage .conf.measured{ background:var(--ok-bg); color:var(--ok); }
  .fstage .conf.est{ background:var(--warn-bg); color:#92520a; }
  .fstage .conf.unk{ background:var(--subtle); color:var(--faint); }
  .fstage .fix{ margin-top:8px; font-size:10.5px; font-weight:600; color:var(--accent); border:1px solid var(--accent-soft); background:#fff; border-radius:999px; padding:3px 9px; cursor:pointer; text-decoration:none; display:inline-block; }
  .fstage .fix:hover{ background:var(--accent); color:#fff; }
  .fcap{ font-size:12px; color:var(--muted); margin:8px 2px 14px; font-weight:600; }
  .fcap b{ color:var(--accent); }
  /* 주문 파이프라인 */
  .opipe{ display:flex; align-items:stretch; gap:5px; margin:6px 0 18px; flex-wrap:wrap; }
  .opstage{ flex:1; min-width:128px; background:var(--panel); border:1px solid var(--border); border-radius:2px; padding:13px 15px; cursor:pointer; box-shadow:var(--shadow); transition:.12s; position:relative; }
  .opstage:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(25,31,40,.08); border-color:#d1d6db; }
  .opstage .opn{ font-size:26px; font-weight:700; letter-spacing:-.03em; color:var(--fg); line-height:1.05; }
  .opstage .opn span{ font-size:12px; color:var(--faint); font-weight:600; margin-left:2px; }
  .opstage .opl{ font-size:12.5px; color:var(--muted); font-weight:600; margin-top:2px; }
  .opstage .opa{ font-size:11px; font-weight:600; margin-top:8px; color:var(--accent); }
  .opstage .opa.muted{ color:var(--faint); font-weight:600; }
  .opstage.act::after{ content:""; position:absolute; top:11px; right:11px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--rej-bg); }
  .opstage.passive{ background:var(--soft); }
  .opstage.passive .opn{ color:var(--fg2); }
  .opstage.on{ border-color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent),0 6px 18px rgba(228,0,43,.12); }
  .opstage.on .opn,.opstage.on .opl{ color:var(--accent); }
  .oparrow{ display:flex; align-items:center; color:var(--faint); font-size:13px; flex:none; font-weight:700; }
  @media(max-width:820px){ .oparrow{ display:none; } }
  /* 픽킹 박스 */
  .pkbox{ border:1px solid var(--border); border-radius:2px; margin-bottom:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
  .pkbox>summary{ list-style:none; cursor:pointer; padding:12px 16px; display:flex; align-items:center; gap:10px; }
  .pkbox>summary:hover{ background:var(--soft); }
  .pkbox>summary::-webkit-details-marker{ display:none; }
  .pkttl{ font-size:15px; font-weight:700; } .pkmeta{ font-size:13px; color:var(--muted); } .pktools{ margin-left:auto; display:flex; gap:6px; }
  .pkbody{ padding:14px; background:var(--soft); border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:14px; }
  .pksec{ border:1px solid var(--border); border-radius:2px; overflow:hidden; background:#fff; flex-shrink:0; }
  .pksec-hd{ display:flex; justify-content:space-between; padding:8px 14px; background:#D9E2F3; border-bottom:1px solid #c2d3ec; }
  .pksec-hd .pub{ font-weight:700; color:#1e293b; font-size:14px; } .pksec-hd .sum{ font-weight:700; color:#334155; font-size:13px; }
  .pktbl{ width:100%; border-collapse:collapse; font-size:13px; }
  .pktbl th{ background:var(--thead-bg); color:var(--fg); font-weight:600; font-size:12px; text-align:left; padding:6px 12px; border-bottom:1px solid var(--border); }
  .pktbl td{ padding:7px 12px; border-bottom:1px solid var(--border-soft); color:var(--fg2); }
  .pktbl td.qty{ font-weight:700; color:var(--accent); text-align:right; }
  .pktbl tr.pkdone td{ opacity:.42; } .pktbl tr.pkdone td.title{ text-decoration:line-through; }
  .pkgrand{ text-align:right; font-weight:700; padding:4px 6px; font-variant-numeric:tabular-nums; }
  /* 주소 경고 */
  .addrwarn{ border:1px solid #fcd34d; background:var(--warn-bg); border-radius:2px; margin-bottom:18px; overflow:hidden; }
  .addrwarn .awh{ padding:11px 16px; font-size:12.5px; font-weight:700; color:var(--warn); border-bottom:1px solid #fde68a; }
  .addrwarn .awh b{ color:var(--rej); }
  .awtbl{ width:100%; border-collapse:collapse; font-size:12px; }
  .awtbl th{ text-align:left; padding:6px 16px; color:var(--muted); font-weight:600; font-size:11px; background:#fffbeb; }
  .awtbl td{ padding:6px 16px; border-top:1px solid #fef3c7; }
  .awtbl .bad{ color:var(--rej); font-weight:700; } .awtbl .sug{ color:var(--ok); }
  /* 필터 칩 */
  .fchips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .fchip{ border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--fg2); background:var(--panel); cursor:pointer; transition:border-color .1s; }
  .fchip:hover{ border-color:var(--accent); color:var(--accent); }
  .fchip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-fg); font-weight:700; }
  .fchip .c{ color:var(--accent); font-weight:700; }
  /* kgrid */
  .kgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media(max-width:900px){ .kgrid{ grid-template-columns:1fr; } }
  /* pill 배지 */
  .pill{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--subtle); color:var(--muted); vertical-align:middle; }
  .pill.bad{ background:var(--rej-bg); color:var(--rej); } .pill.warn{ background:var(--warn-bg); color:#9a5b06; } .pill.ok{ background:var(--ok-bg); color:var(--ok); }
  /* 분포 스택바 */
  .dist{ display:flex; height:30px; border-radius:2px; overflow:hidden; margin:5px 0 3px; box-shadow:inset 0 1px 2px rgba(10,16,32,.05); }
  .dist span{ display:flex; align-items:center; justify-content:center; color:#fff; white-space:nowrap; font-size:11px; font-weight:700; min-width:0; }
  .distleg{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-top:6px; }
  .distleg b{ color:var(--fg2); }
  .distleg i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; vertical-align:middle; font-style:normal; }
  /* 노출→위너 막대 퍼널 */
  .fnlrow{ display:flex; align-items:center; gap:14px; margin-bottom:4px; }
  .fnltrack{ width:44%; max-width:380px; min-width:200px; flex-shrink:0; }
  .fnlbar{ height:36px; border-radius:2px; }
  .fnllbl{ font-size:12.5px; color:var(--fg2); font-weight:600; line-height:1.3; }
  .fnllbl b{ font-size:17px; font-weight:700; color:var(--fg); margin:0 4px; font-variant-numeric:tabular-nums; }
  .fnllbl .pct{ color:var(--muted); font-weight:600; font-size:11.5px; }
  .fnlq{ font-size:12px; color:var(--accent); font-weight:700; padding:6px 0 6px 16px; }
  .fnllost{ font-size:11.5px; color:var(--muted); padding:3px 0 4px 16px; }
  .fnllost.big{ color:var(--accent-fg); font-weight:700; background:var(--accent-soft); border-radius:2px; padding:8px 13px; margin:3px 0 2px; }
  /* 경고 박스 */
  .warnbox{ background:var(--warn-bg); border:1px solid #fde6c7; color:#92520a; border-radius:var(--radius); padding:10px 14px; font-size:12.5px; font-weight:600; margin-bottom:16px; }
  /* 반품·교환 관리 섹션 (orders 임베드 + /returns/ 공용 — orders .pane 과 충돌 회피용 rtabs/rpane) */
  .rtabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; }
  .rtabs a{ padding:8px 15px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
  .rtabs a.on{ color:var(--accent); border-bottom-color:var(--accent); }
  .rpane{ display:none; } .rpane.on{ display:block; }
  .rtabs-wrap{ margin-bottom:14px; }
  .rtabs-wrap .rtabs{ margin-bottom:0; }
  .rtabs-groups{ display:flex; font-size:11px; font-weight:600; color:var(--muted); padding:0 15px; }
  .rtabs-grp-cs{ margin-left:auto; padding-left:16px; border-left:1px solid var(--border); }
  .rtabs-sep{ display:inline-block; width:1px; align-self:stretch; background:var(--border); margin:0 8px; }
  .rs-uncheck{ background:var(--warn-bg); color:var(--warn); }
  .rs-warehouse{ background:#e0f2fe; color:#0284c7; }
  .rs-stop{ background:var(--rej-bg); color:var(--rej); }
  .rs-done{ background:var(--ok-bg); color:var(--ok); }
  .ract form{ display:inline-flex; gap:4px; align-items:center; margin-right:4px; }
  .ract .btn{ height:28px; padding:0 10px; font-size:11.5px; }
  .ract input[type=text]{ height:28px; border:1px solid var(--border); border-radius:2px; padding:0 8px; font-size:11.5px; width:118px; }
  .ract select{ height:28px; border:1px solid var(--border); border-radius:2px; font-size:11.5px; }
  .rnm{ max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  table.t.returns-pending{ table-layout:fixed; }
  table.t.returns-pending th, table.t.returns-pending td{ overflow:hidden; }
  .returns-pending .id{ color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
  .returns-pending .pname{ color:var(--fg); font-weight:600; line-height:1.45; }
  .returns-pending .pname .qty{ color:var(--muted); font-weight:400; white-space:nowrap; }
  .returns-pending .why{ margin-top:5px; font-size:11.5px; color:var(--muted); font-weight:400; line-height:1.5; overflow-wrap:anywhere; }
  .returns-pending .why .who{ font-weight:700; color:var(--faint); white-space:nowrap; }
  .returns-pending .why .who.sell{ color:var(--rej); }
  .returns-pending .sub2{ margin-top:5px; font-size:11px; color:var(--faint); font-weight:600; line-height:1.35; }
  .returns-pending .ctr{ font-size:12px; color:var(--muted); line-height:1.4; overflow-wrap:anywhere; }
  .returns-pending .ctr .live, .returns-pending .ctr .dead{ display:block; margin-top:4px; font-size:11px; font-weight:700; }
  .returns-pending .ctr .live{ color:var(--faint); }
  .returns-pending .ctr .dead{ color:var(--rej); }
  .returns-pending .ract{ white-space:normal; }
  .returns-pending .ract form{ margin:0 4px 5px 0; }
  .returns-pending .ract .mode{ display:inline-block; margin:2px 0 5px; font-size:11px; font-weight:600; color:var(--faint); line-height:1.35; }
  /* 커머스 콘솔 공용: 반품/문의 목업에서 승격한 표현 컴포넌트 */
  .todo{ display:flex; align-items:center; gap:22px; background:var(--panel); border:1px solid var(--rej-bg);
         border-radius:var(--radius); box-shadow:var(--shadow); padding:17px 20px; margin-bottom:10px; }
  .todo .big{ text-align:center; padding-right:22px; border-right:1px solid var(--border-soft); flex:0 0 auto; }
  .todo .big .n{ font-size:34px; font-weight:700; color:var(--rej); letter-spacing:0; line-height:1;
                 font-variant-numeric:tabular-nums; }
  .todo .big .l{ margin-top:6px; font-size:12px; font-weight:600; color:var(--fg2); }
  .todo .mid{ flex:1; min-width:0; }
  .todo .mid .t{ font-size:14.5px; font-weight:700; color:var(--fg); letter-spacing:0; }
  .todo .mid .s{ margin-top:7px; font-size:12.5px; line-height:1.6; color:var(--muted); font-weight:600; }
  .todo .mid .s b{ color:var(--fg2); font-weight:700; }
  .doneline{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:16px; padding-left:2px; }
  .doneline b{ color:var(--fg2); font-weight:700; }
  .segs{ display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
  .seg{ display:inline-flex; align-items:center; gap:6px; height:29px; padding:0 13px; border-radius:999px;
        border:1px solid var(--border); background:var(--panel); font-size:12px; font-weight:600; color:var(--muted); }
  .seg.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-fg); }
  .seg .n{ font-size:10.5px; font-weight:700; opacity:.75; }
  .scope{ display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
  .scope .s{ display:inline-flex; align-items:center; gap:7px; min-height:27px; padding:5px 12px; border-radius:999px;
             font-size:11.5px; font-weight:600; border:1px solid var(--border); background:var(--panel); color:var(--muted); }
  .scope .s b{ color:var(--fg2); font-weight:700; }
  .scope .s .d{ width:7px; height:7px; border-radius:999px; flex:0 0 7px; }
  .scope .s.ok .d{ background:var(--ok); }
  .scope .s.warn .d{ background:var(--warn); }
  .scope .s.rej .d{ background:var(--rej); }
  .scope .s.accent .d{ background:var(--accent); }
  .causeline{ display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:14px;
              border:1px solid var(--border); border-radius:2px; background:var(--subtle); }
  .causeline .ic{ width:17px; height:17px; border-radius:999px; background:var(--warn); color:var(--panel);
                  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 17px; }
  .causeline .tx{ font-size:12.5px; color:var(--fg2); font-weight:600; line-height:1.5; }
  .causeline .tx b{ font-weight:700; }
  .causeline .ex{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
  tr.orow{ cursor:pointer; }
  tr.orow:hover{ background:var(--soft); }
  tr.orow.open{ background:var(--accent-soft); }
  tr.orow .caret{ display:inline-block; width:12px; color:var(--faint); transition:transform .15s; font-size:10px; }
  tr.orow.open .caret{ transform:rotate(90deg); color:var(--accent); }
  .odetail-row > td, tr.rdetail > td{ padding:0; background:var(--subtle); border-bottom:1px solid var(--border); }
  .odetail{ padding:12px 18px 14px 30px; }
  .od-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 28px; }
  .od-item{ display:flex; gap:8px; font-size:12.5px; align-items:baseline; }
  .od-item.od-wide{ grid-column:1 / -1; }
  .od-l{ color:var(--muted); font-weight:600; min-width:68px; flex-shrink:0; }
  .od-v{ color:var(--fg); word-break:break-all; }
  .od-opt{ color:var(--accent); font-weight:600; }
  .od-copy{ margin-left:6px; border:1px solid var(--border); background:var(--panel); border-radius:2px;
            font-size:10.5px; font-weight:600; color:var(--muted); padding:1px 7px; cursor:pointer; font-family:inherit; }
  .od-copy:hover{ border-color:var(--accent); color:var(--accent); }
  .rdet{ padding:15px 20px 15px 30px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; }
  .rd-h{ font-size:11px; font-weight:600; color:var(--faint); letter-spacing:0; text-transform:uppercase; padding-bottom:9px; }
  .rd-item{ display:flex; gap:8px; font-size:12.5px; align-items:baseline; padding:3px 0; }
  .rd-l{ color:var(--muted); font-weight:600; min-width:58px; flex-shrink:0; }
  .rd-v{ color:var(--fg); word-break:break-word; }
  .rd-copy{ margin-left:6px; border:1px solid var(--border); background:var(--panel); border-radius:2px;
            font-size:10.5px; font-weight:600; color:var(--muted); padding:1px 7px; cursor:pointer; font-family:inherit; }
  .rd-copy:hover{ border-color:var(--accent); color:var(--accent); }
  .rd-foot{ display:flex; align-items:center; gap:12px; padding:11px 20px 12px 30px;
            border-top:1px solid var(--border); background:var(--panel); }
  .rd-foot .tx{ font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.55; }
  .rd-foot .tx b{ color:var(--fg2); font-weight:700; }
  .rd-foot .sp{ flex:1; }
  .quote{ padding:10px 12px; border-radius:2px; background:var(--panel); border:1px solid var(--border);
          font-size:12.5px; line-height:1.55; color:var(--fg2); }
  .quote .who{ font-size:10.5px; font-weight:600; color:var(--faint); display:block; margin-bottom:5px; }
  .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
  .tab{ padding:9px 16px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
  .tab.on{ color:var(--accent); border-bottom-color:var(--accent); }
  .urg{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap; }
  .urg.over{ background:var(--rej-bg); color:var(--rej); }
  .urg.soon{ background:var(--warn-bg); color:var(--warn); }
  .urg.ok{ background:var(--ok-bg); color:var(--ok); }
  .ct{ max-width:380px; white-space:normal; font-size:12px; line-height:1.45; }
  .st{ font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
  .st.no{ color:var(--fg2); }
  .reply{ display:flex; gap:5px; align-items:center; }
  .reply input[type=text]{ height:30px; border:1px solid var(--border); border-radius:2px; padding:0 9px; font-size:12px; width:240px; }
  .reply .btn{ height:30px; }
  .answered{ font-size:12px; line-height:1.5; color:var(--fg2); }
  .answered .mark{ color:var(--ok); font-weight:700; }
  .answered .at{ font-size:10.5px; color:var(--faint); margin-top:3px; }
  .warnbar{ display:flex; align-items:flex-start; gap:9px; padding:12px 16px; background:var(--subtle);
            border-top:1px solid var(--border); font-size:11.8px; font-weight:600; color:var(--fg2); }
  .warnbar .h{ color:var(--muted); font-weight:600; line-height:1.6; }
  .warnbar .h b{ color:var(--fg2); font-weight:700; }
  @media(max-width:760px){
    .todo{ align-items:flex-start; flex-wrap:wrap; gap:12px; }
    .todo .big{ padding-right:14px; }
    .todo .btn{ width:100%; }
    .causeline{ align-items:flex-start; flex-wrap:wrap; }
    .causeline .ex{ margin-left:27px; }
    .od-grid, .rdet{ grid-template-columns:1fr; }
    .rd-foot{ align-items:flex-start; flex-direction:column; }
  }
  /* Shapley 오가닉 순위 막대 (홈 시안 702) */
  .shap{ display:flex; gap:2px; margin-top:6px; height:22px; border-radius:2px; overflow:hidden; }
  .shap span{ display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; white-space:nowrap; }

  /* ══════════ 시안 v6 공통 컴포넌트 (SSOT: 아티팩트 "커머스 인텔리전스 콘솔 — 시안 v6")
     v6의 --ink/--hair/--money 는 기존 토큰(--fg/--border/--money)으로 매핑해 이식.
     쿠팡 레드 --accent 유지. 다크모드는 토큰이 자동 전환. ══════════ */

  /* ── 섹션 라벨 (얇은 구분선 + 라벨 + 카운트) ── */
  .sec{ display:flex; align-items:center; gap:8px; margin:24px 0 8px; }
  .sec .l{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .sec .n{ font-size:11px; color:var(--faint); }
  .sec .ru{ flex:1; height:1px; background:var(--border); }
  kbd{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px; background:var(--border-soft); border:1px solid var(--border); border-radius:2px; padding:1px 5px; color:var(--muted); }

  /* ── 돈 · 손익 목업 이식 (/pnl/) — Money.dc.html 클래스. 기존 전역 tab/search/table 클래스와 충돌하지 않게 .money-page 아래에서만 적용. ── */
  .money-page .fresh{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; color:var(--muted); font-weight:600; }
  .money-page .fresh .d{ width:7px; height:7px; border-radius:999px; background:var(--ok); }
  .money-page .money-kpis,
  .money-page .kpis.money-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border-soft);
         border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
         overflow:hidden; margin-bottom:14px; }
  .money-page .kp{ background:var(--panel); padding:15px 17px 16px; min-width:0; }
  .money-page .kp .k{ font-size:10.5px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.03em; }
  .money-page .kp .v{ margin-top:6px; font-size:21px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:0; }
  .money-page .kp .v .u{ font-size:12px; font-weight:700; color:var(--muted); margin-left:2px; }
  .money-page .kp .v.money{ color:var(--money); }
  .money-page .kp .v.cost{ color:var(--fg2); }
  .money-page .kp .v.rej{ color:var(--rej); }
  .money-page .kp .s{ margin-top:6px; font-size:11px; color:var(--faint); font-weight:600; }
  .money-page .kp .s.rej{ color:var(--rej); font-weight:700; }
  .money-page .money-tabs,
  .money-page .tabs{ display:flex; align-items:center; gap:4px; margin-bottom:12px; }
  .money-page .tab{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; border-radius:999px;
        font-size:12.5px; font-weight:700; color:var(--muted); border:1px solid transparent; background:transparent; white-space:nowrap; }
  .money-page .tab.on{ background:var(--panel); border-color:var(--border); color:var(--fg); box-shadow:var(--shadow); }
  .money-page .winnote{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
            color:var(--warn); background:var(--warn-bg); border:1px solid #f3ddbc; border-radius:999px; padding:6px 13px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .money-page .grid tbody tr.bad td{ background:#fffafa; }
  
  .money-page .pname{ font-weight:700; color:var(--fg); max-width:260px; overflow:hidden; text-overflow:ellipsis; }
  .money-page .money{ color:var(--money); font-weight:700; }
  .money-page .loss{ color:var(--rej); font-weight:700; }
  .money-page .mut{ color:var(--faint); }
  .money-page .fb{ display:inline-flex; align-items:center; height:19px; padding:0 7px; border-radius:2px;
       font-size:10.5px; font-weight:700; }
  .money-page .fb.free{ background:var(--ok-bg); color:#15803d; }
  .money-page .fb.paid{ background:var(--subtle); color:var(--muted); border:1px solid var(--border); }
  .money-page .fb.guess{ background:var(--warn-bg); color:var(--warn); }
  .money-page .pager{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--border-soft);
          background:var(--subtle); font-size:12px; color:var(--muted); font-weight:700;
          border-radius:0 0 var(--radius) var(--radius); }
  .money-page .pager .sp{ flex:1; }
  .money-page .pager b{ color:var(--fg); }
  .money-page .warnbar{ display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--warn-bg);
            border-top:1px solid #f3ddbc; font-size:11.8px; font-weight:700; color:var(--warn); }
  .money-page .warnbar.rej{ background:#fffafa; border-top-color:#f0c9c9; color:var(--rej); }
  .money-page .warnbar .h{ color:#8a5a12; font-weight:600; }
  .money-page .warnbar.rej .h{ color:var(--muted); }
  .money-page .icon{ width:14px; height:14px; }
  @media(max-width:980px){
    .money-page .money-kpis,
    .money-page .kpis.money-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .money-page .money-tabs,
    .money-page .tabs,
    .money-page .searchrow{ flex-wrap:wrap; }
    .money-page .winnote{ margin-left:0; }
    .money-page .gridwrap{ overflow-x:auto; }
  }
  @media(max-width:560px){
    .money-page .money-kpis,
    .money-page .kpis.money-kpis{ grid-template-columns:1fr; }
    .money-page .tab,
    .money-page .toolbtn{ flex:1 1 auto; }
    .money-page .money-search{ flex-basis:100%; }
  }

  /* ── 트리아지 리스트 (오늘/등록추천 — "왜 + 확신 + 액션") ── */
  .tlist{ background:var(--panel); border:1px solid var(--border); border-radius:2px; overflow:hidden; }
  .trow{ display:flex; align-items:flex-start; gap:12px; padding:14px 15px; border-bottom:1px solid var(--border-soft); transition:background-color .1s; }
  .trow:last-child{ border-bottom:0; } .trow:hover{ background:var(--subtle); }
  .trow .ic{ width:30px; height:30px; border-radius:2px; background:var(--border-soft); display:grid; place-items:center; color:var(--muted); flex:0 0 auto; margin-top:1px; }
  .trow.act .ic{ background:var(--accent-soft); color:var(--accent); }
  .trow .bd{ flex:1; min-width:0; }
  .trow .t{ font-size:14px; font-weight:600; letter-spacing:-.005em; color:var(--fg); } .trow .t .a{ color:var(--muted); font-weight:400; }
  .trow .why{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5; } .trow .why b{ color:var(--fg); font-weight:600; }
  .trow .mt{ display:flex; align-items:center; gap:12px; margin-top:8px; }
  .trow .ac{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
  .trow.fyi{ padding:11px 15px; } .trow.fyi .ic{ width:24px; height:24px; background:none; color:var(--faint); } .trow.fyi .t{ font-size:13px; font-weight:400; }
  .iconbtn{ width:32px; height:32px; border-radius:2px; border:1px solid transparent; background:none; color:var(--faint); cursor:pointer; display:grid; place-items:center; transition:.12s; }
  .iconbtn:hover{ background:var(--border-soft); color:var(--fg); }
  .conf{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); font-weight:600; }
  .conf .b{ display:inline-flex; gap:2px; } .conf .b i{ width:3px; height:10px; border-radius:1px; background:var(--border); }
  .conf.h .b i{ background:var(--ok); } .conf.m .b i:nth-child(-n+2){ background:var(--warn); }
  .caught{ display:flex; align-items:center; gap:9px; margin-top:20px; padding:12px 15px; border:1px dashed var(--border); border-radius:2px; color:var(--faint); font-size:12.5px; }
  .link{ color:var(--muted); font-size:12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; } .link:hover{ color:var(--accent); }
  .btn.sm{ height:28px; padding:0 10px; font-size:12.5px; }
  /* ── 오늘 '지금 할 것' 카드 = trow 행 + 인라인 미리보기 패널(그룹 .tlist 안). 아코디언/테이블 스타일은 .acard.acc(위) 미러 ── */
  .tcard{ cursor:pointer; }
  .tcard.done{ opacity:.6; }
  .tcard .panel{ display:none; border-top:1px solid var(--border-soft); cursor:default; }
  .tcard.open .panel{ display:block; }
  .tcard .panel .pwrap{ max-height:340px; overflow:auto; }
  .tcard table.lst{ width:100%; border-collapse:collapse; font-size:12px; }
  .tcard table.lst th{ position:sticky; top:0; background:var(--thead-bg); color:var(--fg); font-weight:600; text-align:left; padding:7px 14px; border-bottom:1px solid var(--border); font-size:11px; }
  .tcard table.lst td{ padding:6px 14px; border-bottom:1px solid var(--border-soft); }
  .tcard table.lst tr:last-child td{ border-bottom:0; }
  .tcard .acct{ font-weight:700; color:var(--accent); white-space:nowrap; }
  .tcard .tagchip{ display:inline-block; background:var(--soft); border:1px solid var(--border-soft); border-radius:2px; padding:1px 6px; margin:1px; font-size:10.5px; color:var(--muted); }
  .tcard .more-n{ padding:8px 16px; font-size:11.5px; color:var(--muted); background:var(--soft); }
  .tlist > :last-child .trow, .tlist > .trow:last-child{ border-bottom:0; }

  /* ── Wing 홈 작업대 (/wing/) — 기존 purpose/tlist/button 토큰을 조합한 페이지 전용 레이아웃 ── */
  /* 2단(런처+할일) 전제로 짰다가 우측 패널이 템플릿에서 빠져 좌 65%만 쓰고 있었다 → 전폭 1단으로 복귀. */
  .wingpage .workbench{ display:block; margin-bottom:18px; }
  .wingpage .hero, .wingpage .launch-panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .wingpage .hero-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:16px 18px 12px; border-bottom:1px solid var(--border-soft); }
  .wingpage .hero-head .eyebrow{ font-size:11px; font-weight:600; color:var(--faint); margin-bottom:4px; }
  .wingpage .hero-head .h{ font-size:20px; line-height:1.25; font-weight:700; color:var(--fg); }
  .wingpage .hero-head .d{ margin-top:4px; font-size:12.5px; line-height:1.55; color:var(--muted); }
  .wingpage .hero-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto; }
  .wingpage .summary-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:14px 16px; }
  .wingpage .summary-card{ border:1px solid var(--border); border-radius:2px; background:var(--subtle); padding:12px 13px; min-width:0; }
  .wingpage .summary-card .lbl{ font-size:11px; font-weight:600; color:var(--muted); }
  .wingpage .summary-card .val{ margin-top:3px; font-size:26px; line-height:1; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
  .wingpage .summary-card .val.warn-val{ color:var(--warn); }
  .wingpage .summary-card .txt{ margin-top:5px; font-size:11.5px; line-height:1.45; color:var(--muted); }
  .wingpage .task-list{ padding:0 16px 16px; }
  .wingpage .trow .cnt{ min-width:36px; text-align:right; font-size:18px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
  .wingpage .trow.bad .cnt{ color:var(--rej); }
  .wingpage .trow.yel .cnt{ color:var(--warn); }
  .wingpage .launch-head{ padding:14px 16px; border-bottom:1px solid var(--border-soft); }
  .wingpage .launch-head .h{ font-size:15px; font-weight:700; color:var(--fg); }
  .wingpage .launch-head .d{ margin-top:3px; font-size:12px; color:var(--muted); line-height:1.45; }
  .wingpage .launch-body{ padding:14px 16px 16px; }
  /* 주행동(전부 열기)은 넓게, 보조(광고센터)는 제 폭만 — 세로로 쌓으면 둘 다 같은 무게로 보인다. */
  .wingpage .launch-actions{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:12px; }
  .wingpage .launch-actions .btn{ height:38px; font-size:13.5px; }
  .wingpage .acct{ font-weight:700; color:var(--accent); white-space:nowrap; }
  .wingpage .fresh{ display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px; white-space:nowrap; }
  .wingpage .fresh.live{ background:var(--ok-bg); color:var(--ok); }
  .wingpage .fresh.stale{ background:var(--rej-bg); color:var(--rej); }
  .wingpage .win{ color:var(--ok); font-weight:700; }
  .wingpage .collapse .sec-body{ display:none; }
  .wingpage .collapse.open .sec-body{ display:block; }
  .wingpage .collapse .sec-head{ cursor:pointer; }
  /* 6계정을 한 줄에 — 계정 수만큼 열을 깔아 "한눈에 쫙" 이 유지되게. */
  .wingpage .acct-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
  .wingpage .acct-grid .btn{ height:auto; min-height:70px; flex-direction:column; justify-content:center;
                             gap:3px; padding:11px 8px; line-height:1.35; text-align:center; }
  .wingpage .acct-grid .nm{ max-width:100%; font-size:12.5px; font-weight:600; color:var(--fg);
                            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wingpage .acct-grid .btn:hover .nm{ color:var(--accent); }
  .wingpage .acct-grid .acct{ font-size:11px; }
  .wingpage .acct-grid .hb{ margin-top:1px; }
  .wingpage .cred-grid{ display:grid; grid-template-columns:130px 1fr 1fr; gap:9px 12px; align-items:center; max-width:560px; }
  .wingpage .cred-grid.api-grid{ grid-template-columns:auto 1fr 1fr 1fr; max-width:none; }
  .wingpage .cred-grid label{ font-size:12px; font-weight:600; color:var(--muted); }
  .wingpage .cred-grid label .sub{ font-weight:600; color:var(--faint); font-size:11px; }
  .wingpage input.f{ width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 11px; font-size:13px; font-family:inherit; color:var(--fg); background:var(--panel); transition:border-color .12s, box-shadow .12s; }
  .wingpage input.f:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .wingpage input.f:hover{ border-color:var(--faint); }
  .wingpage .hb{ display:inline-block; margin-top:5px; font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px; white-space:nowrap; }
  .wingpage .hb.up{ background:var(--ok-bg); color:var(--ok); }
  .wingpage .hb.nologin{ background:var(--warn-bg); color:var(--warn); }
  .wingpage .hb.down{ background:var(--rej-bg); color:var(--rej); }
  .wingpage .hbsum{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:12px; font-weight:600; margin-bottom:12px; padding:8px 12px; border-radius:var(--radius-sm); background:var(--soft); }
  .wingpage .hbsum.stale{ background:var(--warn-bg); color:var(--warn); }
  .wingpage .host-line{ font-weight:700; }
  .wingpage .host-time{ color:var(--muted); font-weight:600; }
  .wingpage .kpis.compact{ margin-bottom:14px; }
  .setup-warn{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
  .setup-warn-icon{ font-size:15px; }
  .strong-link{ font-weight:700; color:var(--accent); }
  .setup-state{ font-weight:700; }
  .setup-state.ok{ color:var(--ok); }
  .setup-state.warn{ color:var(--warn); }
  .push-right{ margin-left:auto; }
  .form-note{ margin:0 0 10px; }
  .checkline{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; cursor:pointer; font-size:12.5px; color:var(--muted); }
  .form-actions{ margin-top:12px; }

  /* ── 연동 설정 (/settings/) — Integrations.dc.html 클래스 이식. 전역 .card/.grid/.fresh 와 충돌하지 않게 페이지 스코프만 사용. ── */
  .settings-page .fresh{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; color:var(--muted); font-weight:600; }
  .settings-page .fresh .d{ width:7px; height:7px; border-radius:999px; background:var(--ok); }
  .settings-page .fc-h{ padding:14px 18px 13px; border-bottom:1px solid var(--border-soft);
         font-size:13.5px; font-weight:700; color:var(--fg); display:flex; align-items:center; gap:8px; }
  .settings-page .fc-h .sub{ font-size:11.5px; font-weight:600; color:var(--faint); }
  .settings-page .fc-h .sp{ flex:1; }
  .settings-page .fc-h .badge{ font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; }
  .settings-page .grid tbody tr:hover td{ background:var(--soft); }
  .settings-page .grid tbody tr.bad td{ background:#fffafa; }
  .settings-page .grid tbody tr:last-child td{ border-bottom:none; }
  .settings-page .unit{ font-weight:700; color:var(--fg); }
  .settings-page .mono{ font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11.5px; color:var(--muted); }
  .settings-page .sub2{ color:var(--muted); font-size:11.5px; }
  .settings-page .mut{ color:var(--faint); }
  .settings-page .st{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; white-space:nowrap; }
  .settings-page .st .d{ width:7px; height:7px; border-radius:999px; }
  .settings-page .st.ok{ color:var(--ok); }
  .settings-page .st.ok .d{ background:var(--ok); }
  .settings-page .st.no, .settings-page .st.bad{ color:var(--rej); }
  .settings-page .st.no .d, .settings-page .st.bad .d{ background:var(--rej); }
  .settings-page .st.warn{ color:var(--warn); }
  .settings-page .st.warn .d{ background:var(--warn); }
  .settings-page .st.off, .settings-page .st.unknown{ color:var(--faint); }
  .settings-page .st.off .d, .settings-page .st.unknown .d{ background:#cfd5dc; }
  .settings-page .streak{ display:inline-flex; align-items:center; height:19px; padding:0 7px; margin-left:7px; border-radius:2px;
           background:var(--rej-bg); color:var(--rej); font-size:10px; font-weight:700; }

  .settings-page .ports{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--border-soft); }
  .settings-page .pt{ background:var(--panel); padding:13px 14px 14px; }
  .settings-page .pt .t{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--fg); }
  .settings-page .pt .t .d{ width:7px; height:7px; border-radius:999px; background:var(--ok); }
  .settings-page .pt .t .d.no{ background:var(--rej); }
  .settings-page .pt .t .d.warn{ background:var(--warn); }
  .settings-page .pt .t .d.unknown{ background:#cfd5dc; }
  .settings-page .pt .p{ margin-top:6px; font-size:11px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
  .settings-page .pt .s{ margin-top:4px; font-size:11px; color:var(--faint); font-weight:600; }
  .settings-page .pt.dead .t{ color:var(--rej); }
  .settings-page .pt.warn .t{ color:var(--warn); }
  .settings-page .pt.unknown .t{ color:var(--faint); }

  .settings-page .warnbar{ display:flex; align-items:center; gap:9px; padding:11px 18px; background:var(--warn-bg);
            border-top:1px solid #f3ddbc; font-size:11.8px; font-weight:700; color:var(--warn); }
  .settings-page .warnbar.rej{ background:#fffafa; border-top-color:#f0c9c9; color:var(--rej); }
  .settings-page .warnbar .h{ color:#8a5a12; font-weight:600; }
  .settings-page .warnbar.rej .h{ color:var(--muted); }
  .settings-page .note{ padding:12px 18px 15px; font-size:11.8px; line-height:1.7; color:var(--muted); font-weight:600; }
  .settings-page .note b{ color:var(--fg2); font-weight:700; }
  .settings-page .icon{ width:14px; height:14px; }
  @media(max-width:1240px){ .wingpage .acct-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media(max-width:980px){
    .wingpage .hero-head{ flex-direction:column; }
    .wingpage .hero-actions{ justify-content:flex-start; }
  }
  @media(max-width:720px){
    .wingpage .summary-grid{ grid-template-columns:1fr; }
    .wingpage .launch-actions{ grid-template-columns:1fr; }
    .wingpage .acct-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .wingpage .cred-grid, .wingpage .cred-grid.api-grid{ grid-template-columns:1fr; max-width:none; }
    .wingpage .trow{ flex-wrap:wrap; }
    .wingpage .trow .cnt{ margin-left:42px; text-align:left; min-width:0; }
    .wingpage .trow .ac{ width:100%; padding-left:42px; }
    .wingpage .trow .ac .btn{ width:100%; }
  }
  @media(max-width:420px){
    .wingpage .hero-head, .wingpage .summary-grid, .wingpage .task-list, .wingpage .launch-head, .wingpage .launch-body{ padding-left:12px; padding-right:12px; }
    .wingpage .hero-actions .btn{ width:100%; }
    .wingpage .acct-grid{ grid-template-columns:1fr; }
    .wingpage .trow .cnt, .wingpage .trow .ac{ margin-left:0; padding-left:0; }
  }
  @media(max-width:1240px){ .settings-page .ports{ grid-template-columns:repeat(3,1fr); } }
  @media(max-width:760px){
    .settings-page .fc-h{ flex-wrap:wrap; padding:13px 14px; }
    .settings-page .fc-h .sp{ display:none; }
    .settings-page .ports{ grid-template-columns:repeat(2,1fr); }
    .settings-page .warnbar{ align-items:flex-start; flex-wrap:wrap; padding:11px 14px; }
    .settings-page .grid{ min-width:720px; }
    .settings-page .card:has(.grid){ overflow-x:auto; }
  }
  @media(max-width:420px){ .settings-page .ports{ grid-template-columns:1fr; } }

  /* ── 밀도 테이블 (v6 dense table) — 기존 table.t 와 별개, 더 촘촘 ── */
  .tw{ border:1px solid var(--border); border-radius:2px; overflow:hidden; background:var(--panel); }
  .tw.scroll{ overflow-x:auto; }
  table.dt{ width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap; }
  .dt th{ background:var(--subtle); text-align:left; font-size:10.5px; color:var(--faint); font-weight:600; letter-spacing:.02em; padding:9px 12px; border-bottom:1px solid var(--border); }
  .dt th.n, .dt td.n{ text-align:right; }
  .dt td{ padding:9px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; color:var(--fg2); }
  .dt tr:last-child td{ border-bottom:0; } .dt tbody tr:hover td{ background:var(--subtle); }
  .dt .num{ text-align:right; font-variant-numeric:tabular-nums; } .dt .kw{ font-weight:600; }  /* .t→.dt 이식 호환(광고 등 .num/.kw 셀 유지) */
  .thumb{ width:26px; height:34px; border-radius:2px; background:linear-gradient(135deg,#dbe3ee,#c3cede); flex:0 0 auto; }
  :root[data-theme="dark"] .thumb{ background:linear-gradient(135deg,#232a34,#2f3742); }
  @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .thumb{ background:linear-gradient(135deg,#232a34,#2f3742); } }
  .prod{ display:flex; align-items:center; gap:9px; } .pc{ font-size:10.5px; color:var(--faint); }
  .miniact{ height:27px; padding:0 10px; border-radius:2px; border:1px solid var(--border); background:var(--panel); font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; }
  .pill.mut{ background:var(--border-soft); color:var(--muted); }

  /* 상품 조회 우측 드로어: partial 안의 예전 폭보다 전역 CSS가 나중에 로드되어 최종 폭을 고정한다. */
  body.product-drawer-open .drawer{ width:min(960px,calc(100vw - 24px)); }
  @media(min-width:1180px){
    body.product-drawer-open #view-products{ margin-right:min(980px,calc(100vw - 260px)); transition:margin-right .22s cubic-bezier(.2,.7,.3,1); }
  }

  /* ── 상품 매트릭스 (책 × 6계정) ── */
  .mx{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
  .mx th{ padding:9px 8px; font-size:10.5px; font-weight:600; color:var(--faint); border-bottom:1px solid var(--border); text-align:center; white-space:nowrap; background:var(--panel); }
  .mx th.p{ text-align:left; position:sticky; left:0; background:var(--panel); min-width:230px; }
  .mx td{ padding:8px; border-bottom:1px solid var(--border-soft); text-align:center; }
  .mx td.p{ text-align:left; position:sticky; left:0; background:var(--panel); }
  .mx tbody tr:hover td{ background:var(--subtle); }
  .acell{ display:inline-flex; flex-direction:column; gap:1px; line-height:1.25; cursor:pointer; padding:3px 6px; border-radius:2px; min-width:58px; }
  .acell:hover{ background:var(--accent-soft); }
  .acell .pr{ font-weight:600; } .acell .s{ font-size:9.5px; font-weight:600; }
  .s-ok{ color:var(--ok); } .s-off{ color:var(--warn); } .s-bad{ color:var(--rej); } .s-none{ color:var(--faint); }

  /* ── 상품 조회 v2 목업 이식: 표 · 툴바 · 서랍. 기존 전역 toolbar/grid/drawer 이름을 덮지 않기 위해 p2- 접두사만 쓴다. ── */
  .p2-products{
    --p2-official:#2a78d6;
    --p2-official2:#1baf7a;
    --p2-match:#e87ba4;
    --p2-judge:#c98500;
    --p2-internal:#4a3aa7;
  }.p2-countline{ font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; }
  .p2-source-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding-top:11px; border-top:1px dashed var(--border-soft); }
  .p2-source-label{ font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; margin-right:2px; }.p2-chip.locked{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-fg); }
  .p2-chip.on{ font-weight:700; }
  .p2-chip.on.match{ background:color-mix(in srgb, var(--p2-match) 16%, var(--panel)); border-color:var(--p2-match); color:#b23368; }
  .p2-chip.on.internal{ background:color-mix(in srgb, var(--p2-internal) 14%, var(--panel)); border-color:var(--p2-internal); color:var(--p2-internal); }
  .p2-chip .dot{ width:7px; height:7px; border-radius:999px; flex:0 0 auto; }
  .p2-chip .dot.match{ background:var(--p2-match); }
  .p2-chip .dot.judge{ background:var(--p2-judge); }
  .p2-chip .dot.internal{ background:var(--p2-internal); }
  .p2-chip .dot.meta{ background:var(--muted); }
  .p2-chip .dot.unknown{ background:var(--faint); }
  .p2-tier-hint{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:4px 8px 4px 11px;
                 border:1px solid var(--accent); border-radius:999px; background:var(--accent-soft); color:var(--accent-fg);
                 font-size:11.5px; font-weight:700; line-height:1.25; }
  .p2-tier-hint button{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:0;
                        border-radius:999px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
  .p2-tier-hint button:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .p2-scenario-row{ display:flex; align-items:center; gap:7px; flex-wrap:nowrap; overflow:hidden;
                    padding-top:10px; margin-top:10px; border-top:1px dashed var(--border-soft); }
  .p2-scenario-chip{ flex:0 1 auto; min-width:0; white-space:nowrap; cursor:pointer; font-family:inherit; }
  .p2-scenario-chip:hover{ border-color:var(--accent); color:var(--accent); }
  .p2-scenario-chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .p2-scenario-chip .n{ opacity:.8; }
  .p2-banner{ display:flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent-fg);
              border:1px solid var(--accent); border-radius:var(--radius-sm); padding:8px 12px; margin-bottom:12px;
              font-size:12px; font-weight:700; }
  .p2-banner svg{ width:14px; height:14px; flex:0 0 auto; }
  .p2-ops-tools{ margin:-6px 0 14px; }
  .p2-ops-tools summary{ display:inline-flex; align-items:center; min-height:30px; padding:0 10px;
                         border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel);
                         color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; }
  .p2-ops-tools[open] summary{ margin-bottom:10px; color:var(--accent-fg); border-color:var(--accent); background:var(--accent-soft); }table.p2-grid.wide{ min-width:1720px; }
  table.p2-grid.xwide{ min-width:2160px; }.p2-grid .thumb-cell{ width:56px; }
  .p2-thumb{ width:34px; height:34px; border-radius:2px; background:linear-gradient(135deg,#e7eaee,#d9dee4); object-fit:cover; }
  :root[data-theme="dark"] .p2-thumb{ background:linear-gradient(135deg,#232a34,#2f3742); }
  @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .p2-thumb{ background:linear-gradient(135deg,#232a34,#2f3742); } }
  .p2-name{ font-weight:700; color:var(--fg); max-width:250px; overflow:hidden; text-overflow:ellipsis; }
  .p2-isbn{ font-variant-numeric:tabular-nums; color:var(--muted); font-size:11.5px; }
  .p2-account-chip{ display:inline-flex; align-items:center; min-height:20px; padding:2px 8px; border-radius:2px;
                    font-size:11px; font-weight:700; background:var(--subtle); color:var(--fg2); border:1px solid var(--border); }
  .p2-status{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; }
  .p2-status .dot{ width:7px; height:7px; border-radius:999px; flex:0 0 auto; }
  .p2-status.live{ color:var(--ok); } .p2-status.live .dot{ background:var(--ok); }
  .p2-status.stop{ color:var(--muted); } .p2-status.stop .dot{ background:var(--faint); }
  .p2-status.soldout{ color:var(--warn); } .p2-status.soldout .dot{ background:var(--warn); }
  .p2-status.rejected{ color:var(--rej); } .p2-status.rejected .dot{ background:var(--rej); }
  .p2-tags{ color:var(--muted); font-size:11.5px; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
  .p2-muted{ color:var(--faint); }
  .p2-option-badge{ display:inline-flex; align-items:center; height:18px; padding:0 6px; margin-left:7px; border-radius:2px;
                    background:var(--accent-soft); color:var(--accent-fg); font-size:10px; font-weight:700; vertical-align:1px; }
  .p2-box{ display:inline-block; width:14px; height:14px; border:1px solid #c8ced6; border-radius:2px;
           background:var(--panel); vertical-align:middle; position:relative; }
  .p2-box.on{ background:var(--accent); border-color:var(--accent); }
  .p2-box.on::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
                     border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(42deg); }
  /* 칼럼 머리에 데이터 출처 티어 배지를 얹은 표. th 의 기본 padding 을 안쪽 두 줄로 넘긴다 —
     안 그러면 배지줄·라벨줄이 th padding 안에서 한 번 더 들여써져 머리가 두 배로 두꺼워진다. */
  table.p2-grid.tiered th{ padding:0; vertical-align:top; }
  .p2-header-thin{ padding:9px 10px 8px; }
  .p2-header-badge-row{ min-height:19px; padding:5px 10px 0; }
  .p2-header-label{ padding:0 10px 8px; font-size:11.5px; font-weight:700; color:var(--fg2); white-space:nowrap; }
  .p2-tierpill{ display:inline-flex; align-items:center; height:15px; padding:0 6px; border-radius:2px;
                font-size:9px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
  .p2-tierpill.official{ background:color-mix(in srgb, var(--p2-official) 14%, var(--panel)); color:var(--p2-official); }
  .p2-tierpill.official2{ background:color-mix(in srgb, var(--p2-official2) 16%, var(--panel)); color:var(--p2-official2); }
  .p2-tierpill.match{ background:color-mix(in srgb, var(--p2-match) 20%, var(--panel)); color:#b23368; }
  .p2-tierpill.judge{ background:color-mix(in srgb, var(--p2-judge) 18%, var(--panel)); color:var(--p2-judge); }
  .p2-tierpill.internal{ background:color-mix(in srgb, var(--p2-internal) 14%, var(--panel)); color:var(--p2-internal); }
  .p2-tierpill.meta{ background:var(--subtle); color:var(--muted); border:1px solid var(--border); }
  .p2-ext-label{ padding:5px 10px 7px; font-size:9.5px; font-weight:700; color:var(--accent-fg);
                 background:var(--accent-soft); white-space:nowrap; border-bottom:1px solid var(--border); }
  .p2-grid th.ext, .p2-grid td.ext{ background:color-mix(in srgb, var(--p2-match) 5%, var(--panel)); }
  .p2-grid th.ext-start, .p2-grid td.ext-start{ border-left:2px solid var(--accent); }
  .p2-grid tbody tr:hover td.ext{ background:color-mix(in srgb, var(--p2-match) 9%, var(--panel)); }
  .p2-okmark{ font-weight:700; }
  .p2-okmark.y{ color:var(--ok); }
  .p2-okmark.n{ color:var(--rej); }
  .p2-pager{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--border-soft);
             font-size:12px; color:var(--muted); font-weight:600; }
  .p2-pager .sp{ flex:1; }
  .p2-pagebtn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
               border:1px solid var(--border); border-radius:2px; color:var(--faint); background:var(--panel); }

  .p2-scrim{ position:fixed; inset:0; background:rgba(25,31,40,.14); z-index:40; }
  .p2-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(576px,calc(100vw - 24px)); z-index:50;
              background:var(--panel); border-left:1px solid var(--border); box-shadow:-24px 0 56px -10px rgba(25,31,40,.16);
              display:flex; flex-direction:column; transform:none; overflow:hidden; }
  .p2-drawer-head{ flex:0 0 auto; padding:16px 20px 13px; border-bottom:1px solid var(--border-soft); }
  .p2-drawer-title{ display:flex; align-items:flex-start; gap:10px; }
  .p2-drawer-title h2{ flex:1; min-width:0; font-size:16.5px; font-weight:700; color:var(--fg); letter-spacing:-.02em; line-height:1.35; }
  .p2-drawer-close{ margin-left:auto; border:0; background:none; color:var(--faint); font:inherit; font-size:17px; cursor:pointer; }
  .p2-drawer-meta{ margin-top:9px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
                   font-size:11.5px; color:var(--faint); font-weight:600; }
  .p2-drawer-ids{ margin-top:7px; font-size:11px; color:var(--faint); font-weight:600; font-variant-numeric:tabular-nums; }
  .p2-drawer-ids b{ color:var(--fg2); font-weight:700; }
  .p2-drawer-tabs{ display:flex; align-items:center; gap:4px; padding:11px 20px 0; flex-wrap:wrap; }
  .p2-drawer-tab{ display:inline-flex; align-items:center; gap:6px; min-height:31px; padding:6px 12px; border-radius:999px;
                  font-size:12px; font-weight:700; color:var(--muted); border:1px solid transparent; background:transparent; cursor:pointer; }
  .p2-drawer-tab b{ font-size:10.5px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
  .p2-drawer-tab.on{ background:var(--accent-soft); color:var(--accent-fg); border-color:var(--accent); }
  .p2-drawer-tab.on b{ color:var(--accent-fg); }
  .p2-drawer-body{ flex:1; min-height:0; overflow-y:auto; padding:14px 20px 20px; }
  .p2-drawer-section{ margin-bottom:18px; }
  .p2-section-head{ display:flex; align-items:center; gap:8px; padding-bottom:10px;
                    font-size:12.5px; font-weight:700; color:var(--fg); }
  .p2-section-head .n{ font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
  .p2-section-head .tail{ margin-left:auto; font-size:11px; font-weight:700; color:var(--faint); }
  .p2-images{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
  .p2-image{ position:relative; aspect-ratio:1/1; border-radius:2px; border:1px solid var(--border);
             background:linear-gradient(135deg,#e7eaee,#d9dee4); overflow:hidden; }
  .p2-image img{ width:100%; height:100%; object-fit:cover; display:block; }
  .p2-image .badge{ position:absolute; left:5px; top:5px; min-height:16px; padding:2px 5px; border-radius:2px;
                    font-size:9px; font-weight:700; background:rgba(25,31,40,.66); color:#fff; display:inline-flex; align-items:center; }
  .p2-image .badge.rep{ background:var(--accent); }
  .p2-image .num{ position:absolute; right:6px; bottom:4px; font-size:10px; font-weight:700; color:#8d959e; }
  .p2-image.dead{ background:#fff5f5; border-color:#f0c2c2; }
  .p2-image.dead .dead-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                              font-size:10.5px; font-weight:700; color:var(--rej); }
  .p2-note{ margin-top:11px; font-size:11.5px; line-height:1.65; color:var(--muted); font-weight:600;
            background:var(--subtle); border:1px solid var(--border-soft); border-radius:2px; padding:10px 12px; }
  .p2-note b{ color:var(--fg2); font-weight:700; }
  .p2-note.warn{ background:var(--warn-bg); border-color:#f3ddbc; color:#8a5a12; }
  .p2-note.warn b{ color:var(--warn); }
  table.p2-subtable{ width:100%; border-collapse:collapse; font-size:12px; }
  .p2-subtable th{ background:var(--thead-bg); color:var(--fg); font-size:10.5px; font-weight:700;
                   text-align:left; padding:7px 9px; border-bottom:1px solid var(--border); white-space:nowrap; }
  .p2-subtable th.num, .p2-subtable td.num{ text-align:right; }
  .p2-subtable td{ padding:8px 9px; border-bottom:1px solid var(--border-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .p2-subtable .name{ max-width:180px; overflow:hidden; text-overflow:ellipsis; font-weight:700; color:var(--fg); }
  .p2-subtable tr.first td{ background:var(--accent-soft); }
  .p2-first-badge{ display:inline-flex; align-items:center; min-height:17px; padding:1px 6px; margin-left:6px; border-radius:2px;
                   background:var(--panel); border:1px solid var(--accent); color:var(--accent-fg); font-size:9.5px; font-weight:700; }
  .p2-drawer-foot{ flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:12px 20px;
                   border-top:1px solid var(--border-soft); background:var(--subtle); }
  .p2-drawer-foot .sp{ flex:1; }

  @media(max-width:900px){.p2-countline{ width:100%; }
    .p2-drawer{ width:100vw; }
    .p2-images{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media(max-width:560px){.p2-drawer-head, .p2-drawer-tabs, .p2-drawer-body, .p2-drawer-foot{ padding-left:14px; padding-right:14px; }
    .p2-images{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  }

  /* ── master-detail (조종석: 좌 레버리스트 / 우 인스펙터) ── */
  .md{ display:grid; grid-template-columns:1fr 1.05fr; gap:16px; align-items:start; }
  @media(max-width:900px){ .md{ grid-template-columns:1fr; } }
  .card{ background:var(--panel); border:1px solid var(--border); border-radius:2px; overflow:hidden; }
  .lh{ display:flex; align-items:center; padding:10px 14px; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--faint); background:var(--subtle); border-bottom:1px solid var(--border); }
  .lev{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-bottom:1px solid var(--border-soft); cursor:pointer; transition:background-color .1s; }
  .lev:last-child{ border-bottom:0; } .lev:hover{ background:var(--subtle); }
  .lev.on{ background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
  .lev .nm{ font-weight:600; font-size:13.5px; flex:1; min-width:0; color:var(--fg); }
  .lev .ct{ font-weight:700; width:42px; text-align:right; color:var(--fg2); } .lev .imp{ font-size:12px; color:var(--money); font-weight:600; width:74px; text-align:right; }
  .insp{ position:sticky; top:70px; }
  .ih{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); } .ih .t{ font-size:16px; font-weight:700; flex:1; letter-spacing:-.01em; color:var(--fg); }
  .ib{ padding:15px 16px; }
  .why2{ background:var(--subtle); border:1px solid var(--border); border-radius:2px; padding:12px 13px; margin-bottom:15px; }
  .why2 .l{ font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:6px; margin-bottom:7px; }
  .why2 .lg{ font-size:13px; line-height:1.55; color:var(--fg2); } .why2 .lg b{ color:var(--accent); }
  .why2 ul{ margin:9px 0 0; padding:0; list-style:none; font-size:12.5px; color:var(--muted); }
  .why2 li{ padding:2px 0 2px 15px; position:relative; } .why2 li::before{ content:""; position:absolute; left:3px; top:9px; width:4px; height:4px; border-radius:50%; background:var(--faint); } .why2 li b{ color:var(--fg); }
  .slbl{ font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; }
  .tgt{ border:1px solid var(--border); border-radius:2px; overflow:hidden; margin-bottom:13px; }
  .tgt .r{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border-soft); font-size:12.5px; } .tgt .r:last-child{ border-bottom:0; }
  .tgt .nm{ flex:1; color:var(--fg2); } .tgt .from{ color:var(--faint); text-decoration:line-through; font-size:12px; } .tgt .to{ color:var(--money); font-weight:600; font-size:12px; }
  .deep{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-decoration:none; padding:9px 0 0; border-top:1px solid var(--border-soft); } .deep:hover{ color:var(--accent); } .deep b{ color:var(--fg); }

  /* ── 필터 바 (v6 .fbar 개명 — 기존 .fstage .fbar 퍼널막대와 충돌 회피) ── */
  .filterbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
  .search{ flex:1; min-width:200px; display:flex; align-items:center; gap:8px; height:34px; padding:0 11px; border:1px solid var(--border); border-radius:2px; background:var(--panel); }
  .search input{ flex:1; border:0; background:none; outline:none; font-size:13px; color:var(--fg); min-width:0; font-family:inherit; }
  .fsel{ height:34px; padding:0 30px 0 11px; border:1px solid var(--border); border-radius:2px; background:var(--panel); color:var(--fg); font-size:12.5px; font-weight:600; cursor:pointer; appearance:none; font-family:inherit;
    background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px; background-size:5px 5px; background-repeat:no-repeat; }
  .chip{ height:30px; padding:0 12px; border:1px solid var(--border); border-radius:2px; background:var(--panel); color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; }
  .chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

  /* ── 전역 PJAX fade 전환 (_pjax.html) — 목업 .page 애니메이션과 동일 타이밍 ── */
  @keyframes fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
  .main-swap{ animation:fade .18s ease-out; }
  @media (prefers-reduced-motion:reduce){ .main-swap{ animation:none; } }

  /* ══ Apple 폴리시 (전역) — 누름 피드백 · 접근성 가드. /ads/ 에서 승격(ads_board.html 은 sticky 탭만 유지) ══ */
  /* Response §1: 실제 컨트롤은 누르는 즉시 반응(pointer-down). 데이터 행·리스트 행은 제외(클릭 액션 없음=인과성). */
  .btn, .chip, .kwf, .miniact, .subtabs a, .todo-item, .exclChip{ transition:transform .08s ease-out; }
  .fchip{ transition:border-color .1s, transform .08s ease-out; }   /* 기존 border-color 유지 + transform append */
  .btn:active, .fchip:active, .chip:active, .kwf:active, .miniact:active, .iconbtn:active, .todo-item:active, .exclChip:active{ transform:scale(.985); }
  .subtabs a:active{ transform:translateY(1px); }   /* 탭은 눌리는 방향으로 */
  /* §14 접근성 가드(전역) */
  @media (prefers-reduced-motion:reduce){
    .btn, .chip, .kwf, .miniact, .subtabs a, .todo-item, .exclChip, .fchip{ transition:none; }
    .btn:active, .fchip:active, .chip:active, .kwf:active, .miniact:active, .iconbtn:active, .subtabs a:active, .todo-item:active, .exclChip:active{ transform:none; }
  }
  @media (prefers-reduced-transparency:reduce){ .topbar{ background:var(--bg); backdrop-filter:none; } }
  @media (prefers-contrast:more){ .btn, .fchip, .chip{ border-width:1.5px; } }

  /* ── 광고 목업 포트 v1 (/ads/) — .dev/mockups/commerce-console/Ads*.dc.html tokens/classes
     기존 전역 .tabs/.chip/.pill/.drawer 는 건드리지 않고, 다음 step 템플릿 이식용 namespace만 둔다. */
  .ads-mockup{ --ads-rail-width:264px; --ads-gap:14px; }
  .ads-mockup .content{ max-width:none; }
  .ads-layout, .ads-mockup .cols{ display:grid; grid-template-columns:var(--ads-rail-width) minmax(0,1fr); gap:var(--ads-gap); align-items:start; }
  .ads-campaign-rail, .ads-mockup .cp{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; position:sticky; top:74px; max-height:calc(100vh - 92px); display:flex; flex-direction:column; }
  .ads-campaign-account, .ads-mockup .cp-acct{ padding:12px 12px 0; flex:0 0 auto; }
  .ads-account-picker summary{ list-style:none; cursor:pointer; }
  .ads-account-picker summary::-webkit-details-marker{ display:none; }
  .ads-account-picker summary::marker{ content:""; }
  .ads-account-button, .ads-mockup .acctbtn{ display:flex; align-items:center; gap:8px; height:38px; padding:0 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--subtle); min-width:0; }
  .ads-account-picker[open] .ads-account-button{ border-color:var(--accent); background:var(--accent-soft); }
  .ads-account-button .lbl, .ads-mockup .acctbtn .lbl{ font-size:10.5px; font-weight:700; color:var(--faint); letter-spacing:.03em; }
  .ads-account-button .nm, .ads-mockup .acctbtn .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; color:var(--fg); }
  .ads-account-button .cv, .ads-mockup .acctbtn .cv{ margin-left:auto; color:var(--faint); flex:0 0 auto; }
  .ads-account-picker[open] .ads-account-button .cv{ color:var(--accent-fg); transform:rotate(180deg); }
  .ads-account-menu{ margin-top:7px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); box-shadow:var(--shadow); overflow:hidden; }
  .ads-account-option{ display:flex; align-items:center; gap:8px; min-height:34px; padding:7px 10px; color:var(--fg2); border-top:1px solid var(--border-soft); }
  .ads-account-option:first-child{ border-top:none; }
  .ads-account-option:hover{ background:var(--soft); color:var(--fg); }
  .ads-account-option.on{ background:var(--accent-soft); color:var(--accent-fg); }
  .ads-account-option .acct{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
  .ads-account-option b, .ads-account-option .na{ flex:0 0 auto; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); }
  .ads-account-option.on b{ color:var(--accent-fg); }
  .ads-account-option .na{ color:var(--faint); }
  .ads-account-option.missing .acct{ color:var(--muted); }
  .ads-account-hint{ display:block; margin-top:7px; font-size:11px; line-height:1.35; font-weight:700; color:var(--muted); text-decoration:none; }
  .ads-account-hint:hover{ color:var(--accent); }
  .ads-campaign-search, .ads-mockup .cp-search{ padding:9px 12px 11px; flex:0 0 auto; }
  .ads-campaign-search .search, .ads-mockup .cp-search .search{ height:32px; }
  .ads-campaign-list{ min-height:0; overflow:auto; padding-bottom:4px; }
  .ads-campaign-group, .ads-mockup .cp-group{ display:flex; align-items:center; gap:6px; padding:11px 14px 5px; font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; border-top:1px solid var(--border-soft); }
  .ads-campaign-group .n, .ads-mockup .cp-group .n{ font-weight:700; opacity:.75; font-variant-numeric:tabular-nums; }
  .ads-campaign-group .cv, .ads-mockup .cp-group .cv{ opacity:.5; margin-left:-3px; }
  .ads-campaign-group.shut, .ads-mockup .cp-group.shut{ padding-bottom:12px; color:var(--muted); }
  .ads-campaign-item, .ads-mockup .ci{ display:block; padding:8px 13px 9px 12px; border-left:2px solid transparent; color:inherit; cursor:pointer; }
  .ads-campaign-item:hover, .ads-mockup .ci:hover{ background:var(--soft); }
  .ads-campaign-item .t, .ads-mockup .ci .t{ display:flex; align-items:center; gap:7px; min-width:0; }
  .ads-campaign-dot, .ads-mockup .ci .t .d{ width:7px; height:7px; border-radius:999px; background:var(--ok); flex:0 0 auto; }
  .ads-campaign-dot.off, .ads-mockup .ci .t .d.off{ background:#cfd5dc; }
  .ads-campaign-name, .ads-mockup .ci .t .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:700; color:var(--fg2); }
  .ads-campaign-badge, .ads-mockup .ci .t .b{ background:var(--rej-bg); color:var(--rej); font-size:10px; font-weight:700; border-radius:999px; padding:1px 6px; flex:0 0 auto; font-variant-numeric:tabular-nums; }
  .ads-campaign-meta, .ads-mockup .ci .s{ margin-top:3px; padding-left:14px; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
  .ads-campaign-meta.stale, .ads-campaign-fact .s.stale{ opacity:.55; }
  .ads-campaign-item.on, .ads-mockup .ci.on{ background:var(--accent-soft); border-left-color:var(--accent); }
  .ads-campaign-item.on .ads-campaign-name, .ads-mockup .ci.on .t .nm{ color:var(--accent-fg); font-weight:700; }
  .ads-campaign-item.on .ads-campaign-meta, .ads-mockup .ci.on .s{ color:var(--accent-fg); opacity:.72; }
  .ads-campaign-item.dim .ads-campaign-name, .ads-mockup .ci.dim .t .nm{ color:var(--muted); font-weight:600; }
  .ads-campaign-foot, .ads-mockup .cp-foot{ padding:11px 12px; border-top:1px solid var(--border-soft); flex:0 0 auto; }
  .ads-new-campaign, .ads-mockup .newbtn{ display:flex; align-items:center; justify-content:center; gap:6px; height:34px; border-radius:var(--radius-sm); background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; }

  .ads-campaign-main{ min-width:0; }
  .ads-campaign-head, .ads-mockup .chead{ display:flex; align-items:stretch; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:13px 16px; margin-bottom:12px; }
  .ads-campaign-title, .ads-mockup .ch-l{ flex:1; min-width:0; padding-right:16px; }
  .ads-campaign-title .name, .ads-mockup .ch-name{ display:flex; align-items:center; gap:8px; min-width:0; font-size:15px; font-weight:700; color:var(--fg); letter-spacing:-.02em; }
  .ads-campaign-title .sub, .ads-mockup .ch-sub{ margin-top:6px; font-size:11.5px; color:var(--faint); font-weight:600; }
  .ads-campaign-fact, .ads-mockup .ch-f{ width:172px; padding:0 16px; border-left:1px solid var(--border-soft); flex:0 0 auto; }
  .ads-campaign-fact .k, .ads-mockup .ch-f .k{ font-size:10.5px; font-weight:700; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; }
  .ads-campaign-fact .v, .ads-mockup .ch-f .v{ margin-top:4px; font-size:17px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .ads-campaign-fact .v .u, .ads-mockup .ch-f .v .u{ font-size:12px; font-weight:700; color:var(--muted); margin-left:2px; }
  .ads-campaign-fact .v.money, .ads-mockup .ch-f .v.money{ color:var(--money); }
  .ads-campaign-fact .s, .ads-mockup .ch-f .s{ margin-top:5px; font-size:11px; color:var(--faint); font-weight:600; }
  .ads-budget-bar, .ads-mockup .mbar{ margin-top:6px; height:5px; border-radius:999px; background:var(--border-soft); overflow:hidden; }
  .ads-budget-bar i, .ads-mockup .mbar i{ display:block; height:100%; background:var(--accent); }
  .ads-budget-bar i.full, .ads-mockup .mbar i.full{ background:var(--warn); }
  .ads-campaign-actions, .ads-mockup .ch-act{ display:flex; align-items:flex-start; padding-left:16px; border-left:1px solid var(--border-soft); }
  .ads-campaign-tabs, .ads-mockup .tabs{ display:flex; align-items:center; gap:4px; margin-bottom:12px; min-width:0; }
  .ads-campaign-tab, .ads-mockup .tab{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--muted); border:1px solid transparent; white-space:nowrap; }
  .ads-campaign-tab b, .ads-mockup .tab b{ font-size:11px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
  .ads-campaign-tab.on, .ads-mockup .tab.on{ background:var(--panel); border-color:var(--border); color:var(--fg); box-shadow:var(--shadow); }
  .ads-campaign-tab.on b, .ads-mockup .tab.on b{ color:var(--accent-fg); }
  .ads-one-note, .ads-mockup .onenote{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; min-width:0; font-size:11.5px; font-weight:700; color:var(--warn); background:var(--warn-bg); border:1px solid #f3ddbc; border-radius:999px; padding:6px 13px; }
  .ads-one-note b, .ads-mockup .onenote b{ font-weight:700; }

  .ads-toolbar, .ads-mockup .toolbar{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 14px 13px; margin-bottom:14px; }
  .ads-toolbar-row, .ads-mockup .searchrow{ display:flex; align-items:center; gap:10px; margin-bottom:12px; min-width:0; }
  .ads-toolbar-row .search, .ads-mockup .searchrow .search{ flex:1; min-width:180px; }
  .ads-chipbar, .ads-mockup .srcrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding-top:11px; border-top:1px dashed var(--border-soft); }
  .ads-chipbar-label, .ads-mockup .srclbl{ font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; margin-right:2px; }
  .ads-filter-chip, .ads-mockup .srcrow .chip, .ads-mockup .dw-seg .chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px 0 10px; border-radius:999px; border:1px solid var(--border); background:var(--panel); font-size:12px; font-weight:700; color:var(--faint); }
  .ads-filter-chip .n, .ads-mockup .chip .n{ font-size:10.5px; font-weight:700; opacity:.7; font-variant-numeric:tabular-nums; }
  .ads-filter-chip .dot, .ads-mockup .chip .dot{ width:7px; height:7px; border-radius:999px; flex:0 0 auto; }
  .ads-filter-chip.on, .ads-mockup .srcrow .chip.on, .ads-mockup .dw-seg .chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-fg); }
  .ads-verdict-pill, .ads-mockup .vd{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:2px; font-size:11px; font-weight:700; white-space:nowrap; }
  .ads-verdict-pill.keep, .ads-mockup .vd.keep{ background:var(--ok-bg); color:#15803d; }
  .ads-verdict-pill.cut, .ads-mockup .vd.cut{ background:var(--rej-bg); color:var(--rej); }
  .ads-verdict-pill.win, .ads-mockup .vd.win{ background:var(--warn-bg); color:var(--warn); }
  .ads-verdict-pill.hold, .ads-mockup .vd.hold{ background:var(--subtle); color:var(--muted); border:1px solid var(--border); }

  .ads-grid-card, .ads-mockup .gridwrap{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .ads-scroll-x, .ads-mockup .scrollx{ overflow-x:auto; }
  .ads-data-grid, .ads-mockup table.grid{ border-collapse:collapse; font-size:12.5px; width:100%; }
  .ads-data-grid thead th, .ads-mockup .grid thead th{ position:sticky; top:0; z-index:5; background:var(--subtle); border-bottom:1px solid var(--border); border-right:1px solid var(--border-soft); padding:0; vertical-align:top; text-align:left; }
  .ads-col-label, .ads-mockup .collabel{ padding:10px 10px 9px; font-size:11.5px; font-weight:700; color:var(--fg); white-space:nowrap; }
  .ads-col-label.num, .ads-mockup .collabel.num{ text-align:right; }
  .ads-col-label.f, .ads-mockup .collabel.f{ color:var(--fg); }
  .ads-data-grid tbody td, .ads-mockup .grid tbody td{ padding:8px 10px; border-bottom:1px solid var(--border-soft); border-right:1px solid var(--border-soft); white-space:nowrap; color:var(--fg2); }
  .ads-data-grid tbody tr:hover td, .ads-mockup .grid tbody tr:hover td{ background:var(--soft); }
  .ads-data-grid .num, .ads-mockup .grid .num{ text-align:right; font-variant-numeric:tabular-nums; }
  .ads-data-grid tbody tr.out td, .ads-mockup .grid tbody tr.out td{ background:#fffafa; color:var(--faint); }
  .ads-data-grid tbody tr.add td, .ads-mockup .grid tbody tr.add td{ background:#f8f7ff; }
  .ads-pending-tag, .ads-mockup .pend{ display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:2px; font-size:10px; font-weight:700; margin-left:7px; background:#fff; }
  .ads-pending-tag.o, .ads-mockup .pend.o{ color:var(--rej); border:1px dashed #f0c2c2; }
  .ads-pending-tag.a, .ads-mockup .pend.a{ color:var(--accent-fg); border:1px dashed #cbc6f5; }
  .ads-status, .ads-mockup .status{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; }
  .ads-status .d, .ads-mockup .status .d{ width:7px; height:7px; border-radius:999px; }
  .ads-status.live, .ads-mockup .status.live{ color:var(--ok); }
  .ads-status.live .d, .ads-mockup .status.live .d{ background:var(--ok); }
  .ads-status.no, .ads-mockup .status.no{ color:var(--warn); }
  .ads-status.no .d, .ads-mockup .status.no .d{ background:var(--warn); }
  .ads-status.na, .ads-mockup .status.na{ color:var(--faint); }
  .ads-status.na .d, .ads-mockup .status.na .d{ background:#cfd5dc; }
  .ads-pager, .ads-mockup .pager{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--muted); font-weight:600; }
  .ads-pager .sp, .ads-mockup .pager .sp{ flex:1; }
  .ads-pending-bar, .ads-mockup .pending{ display:inline-flex; align-items:center; gap:9px; padding-left:12px; border-left:2px solid var(--warn); }
  .ads-pending-bar .txt b, .ads-mockup .pending .txt b{ color:var(--warn); font-weight:700; }
  .ads-pending-button, .ads-mockup .pbtn{ display:inline-flex; align-items:center; height:28px; padding:0 11px; border:1px solid var(--border); border-radius:2px; background:var(--panel); font-size:12px; font-weight:700; color:var(--fg2); }
  .ads-pending-button.apply, .ads-mockup .pbtn.apply{ background:var(--warn-bg); border-color:#f3d9b0; color:var(--warn); font-weight:700; }
  .ads-mockup .toolbtn[aria-disabled="true"]{ background:var(--soft); border-color:var(--border); color:var(--faint); cursor:not-allowed; }
  /* ⚠️잠긴 버튼은 잠겨 보여야 한다. 이 규칙이 없어서 「한 번에 끄기」가 잠긴 채로도
     평소와 같은 색이었고, 눌러보고 나서야 잠긴 걸 알았다(2026-08-30). */
  /* 판정 칩의 점 — 인라인 style 대신 클래스로. 칩이 <span> 에서 <a>(필터 링크)로
     바뀌면서 색을 템플릿에 박아두면 두 자리에 흩어진다. */
  .ads-filter-chip .dot-keep{ background:var(--ok); }
  .ads-filter-chip .dot-cut{ background:var(--rej); }
  .ads-filter-chip .dot-winner_first{ background:var(--warn); }
  .ads-filter-chip .dot-hold{ background:var(--faint); }
  a.ads-filter-chip{ text-decoration:none; cursor:pointer; }
  .ads-pending-button[aria-disabled="true"]{ background:var(--soft); border-color:var(--border); color:var(--faint); cursor:not-allowed; }
  .ads-add-backdrop-panel{ min-height:360px; display:flex; flex-direction:column; }
  .ads-add-backdrop-empty{ flex:1; display:flex; align-items:center; justify-content:center; padding:30px; color:var(--muted); font-size:12.5px; line-height:1.55; text-align:center; background:linear-gradient(135deg,var(--panel),var(--subtle)); }
  .ads-add-backdrop-empty b{ color:var(--accent-fg); }

  .ads-add-scrim, .ads-mockup .scrim{ position:fixed; inset:0; background:rgba(25,31,40,.16); z-index:40; }
  .ads-add-drawer, .ads-mockup .drawer{ position:fixed; top:0; right:0; bottom:0; width:min(540px,100vw); z-index:50; background:var(--panel); border-left:1px solid var(--border); box-shadow:-24px 0 56px -10px rgba(25,31,40,.16); display:flex; flex-direction:column; }
  .ads-add-drawer[hidden], .ads-add-scrim[hidden]{ display:none; }
  .ads-add-head, .ads-mockup .dw-head{ flex:0 0 auto; padding:16px 20px 14px; border-bottom:1px solid var(--border-soft); }
  .ads-add-title, .ads-mockup .dw-t{ display:flex; align-items:center; gap:10px; }
  .ads-add-title h2, .ads-mockup .dw-t h2{ font-size:18px; font-weight:700; color:var(--fg); letter-spacing:-.02em; }
  .ads-add-close, .ads-mockup .dw-x{ margin-left:auto; color:var(--faint); font-size:17px; cursor:pointer; }
  .ads-add-meta, .ads-mockup .dw-meta{ margin-top:6px; font-size:12px; color:var(--muted); }
  .ads-add-tools, .ads-mockup .dw-tools{ display:flex; align-items:center; gap:9px; padding:13px 20px 0; }
  .ads-add-tools .search, .ads-mockup .dw-tools .search{ flex:1; height:34px; }
  .ads-add-segments, .ads-mockup .dw-seg{ display:flex; align-items:center; gap:8px; padding:11px 20px 13px; flex-wrap:wrap; }
  .ads-add-body, .ads-mockup .dw-body{ flex:1; min-height:0; overflow-y:auto; padding:0 20px 20px; }
  .ads-add-section, .ads-mockup .sec{ border-top:1px solid var(--border-soft); }
  .ads-add-section:first-child, .ads-mockup .sec:first-child{ border-top:none; }
  .ads-add-section-head, .ads-mockup .sec-h{ display:flex; align-items:center; gap:8px; padding:13px 0 10px; font-size:12px; font-weight:700; color:var(--fg2); }
  .ads-add-section-head .n, .ads-mockup .sec-h .n{ font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
  .ads-add-section-head .hint, .ads-mockup .sec-h .hint{ margin-left:auto; font-size:11px; font-weight:600; color:var(--faint); }
  .ads-add-section.shut .ads-add-section-head, .ads-mockup .sec.shut .sec-h{ color:var(--muted); }
  .ads-add-section-body, .ads-mockup .sec-b{ padding-bottom:14px; }
  .ads-add-section summary.ads-add-section-head{ cursor:pointer; }
  .ads-add-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .ads-add-table th{ background:var(--thead-bg); color:var(--fg); font-size:10.5px; font-weight:700; text-align:left; padding:7px 9px; border-bottom:1px solid var(--border); white-space:nowrap; }
  .ads-add-table th.num, .ads-add-table td.num{ text-align:right; }
  .ads-add-table td{ padding:8px 9px; border-bottom:1px solid var(--border-soft); font-variant-numeric:tabular-nums; white-space:nowrap; vertical-align:top; }
  .ads-add-table tr.on td{ background:var(--accent-soft); }
  .ads-add-name{ max-width:210px; overflow:hidden; text-overflow:ellipsis; font-weight:700; color:var(--fg); }
  .ads-add-name .ads-verdict-pill{ margin-left:4px; vertical-align:1px; }
  .ads-add-note, .ads-mockup .note{ margin-top:6px; font-size:11.5px; line-height:1.6; color:#8a5a12; background:var(--warn-bg); border:1px solid #f3ddbc; border-radius:var(--radius-sm); padding:10px 12px; }
  .ads-add-note b, .ads-mockup .note b{ color:var(--warn); font-weight:700; }
  .ads-add-foot, .ads-mockup .dw-foot{ flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:12px 20px; border-top:1px solid var(--border-soft); background:var(--subtle); }
  .ads-add-foot .sum, .ads-mockup .dw-foot .sum{ font-size:12.5px; font-weight:700; color:var(--fg); }
  .ads-add-foot .sum span, .ads-mockup .dw-foot .sum span{ font-weight:600; color:var(--muted); margin-left:8px; font-variant-numeric:tabular-nums; }
  .ads-add-foot .sp, .ads-mockup .dw-foot .sp{ flex:1; }
  .ads-keyword-input, .ads-mockup .kwin{ flex:1; min-width:240px; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--panel); }
  .ads-keyword-input.locked, .ads-keyword-input[aria-disabled="true"]{ border-color:var(--border); background:var(--soft); color:var(--faint); }
  .ads-keyword-input .plus, .ads-mockup .kwin .plus{ color:var(--accent); font-size:16px; font-weight:700; line-height:1; }
  .ads-keyword-input .ph, .ads-mockup .kwin .ph{ font-size:12.5px; color:var(--faint); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ads-keyword-input .car, .ads-mockup .kwin .car{ width:1px; height:15px; background:var(--accent); }
  .ads-keyword-input.locked .car, .ads-keyword-input[aria-disabled="true"] .car{ display:none; }
  .ads-keyword-rec-row, .ads-mockup .recrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:11px; border-top:1px dashed var(--border-soft); }
  .ads-keyword-chip, .ads-mockup .kchip{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px 0 8px; border-radius:999px; border:1px dashed var(--border); background:var(--panel); font-size:12px; font-weight:700; color:var(--fg2); }
  .ads-keyword-chip[aria-disabled="true"]{ background:var(--soft); color:var(--faint); cursor:not-allowed; }
  .ads-keyword-chip .pl, .ads-mockup .kchip .pl{ color:var(--accent); font-weight:700; }
  .ads-keyword-source, .ads-mockup .src{ display:inline-flex; align-items:center; height:19px; padding:0 7px; border-radius:2px; font-size:10.5px; font-weight:700; white-space:nowrap; }
  .ads-keyword-source.auto, .ads-mockup .src.auto{ background:#eaf3ff; color:#2a78d6; }
  .ads-keyword-source.wing, .ads-mockup .src.wing{ background:#f0eeff; color:#4a3aa7; }
  .ads-keyword-source.self, .ads-mockup .src.self{ background:#fdeff4; color:#b23368; }
  .ads-keyword-bid, .ads-mockup .bid{ display:inline-flex; align-items:center; justify-content:flex-end; min-width:62px; height:27px; padding:0 9px; border:1px solid var(--border); border-radius:2px; background:var(--panel); font-size:12.5px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
  .ads-keyword-bid.ch, .ads-mockup .bid.ch{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-fg); }
  .ads-keyword-bid.base, .ads-mockup .bid.base{ border-style:dashed; color:var(--muted); font-weight:600; }
  .ads-check-box, .ads-mockup .box{ display:inline-block; width:15px; height:15px; border:1px solid #c8ced6; border-radius:2px; background:var(--panel); vertical-align:middle; position:relative; }
  button.ads-check-box{ padding:0; cursor:pointer; }
  .ads-check-box.on, .ads-mockup .box.on{ background:var(--accent); border-color:var(--accent); }
  .ads-check-box.on::after, .ads-mockup .box.on::after{ content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(42deg); }
  .ads-check-box.off, .ads-mockup .box.off{ border-color:#e6b3b3; background:var(--panel); }
  .ads-check-box[aria-disabled="true"]{ background:var(--soft); border-color:var(--border); cursor:not-allowed; }
  .ads-data-grid .kw{ font-weight:700; color:var(--fg); }
  .ads-data-grid .money{ color:var(--money); font-weight:700; }
  .ads-data-grid .loss{ color:var(--rej); font-weight:700; }
  .ads-data-grid .mut{ color:var(--faint); }
  .recmore{ font-size:11.5px; font-weight:700; color:var(--muted); }

  .ads-settings-wrap, .ads-mockup .fwrap{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:14px; align-items:start; }
  .ads-settings-card, .ads-mockup .card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .ads-settings-head, .ads-mockup .fc-h{ padding:14px 18px 13px; border-bottom:1px solid var(--border-soft); font-size:13.5px; font-weight:700; color:var(--fg); display:flex; align-items:center; gap:8px; }
  .ads-settings-head .sub, .ads-mockup .fc-h .sub{ font-size:11.5px; font-weight:600; color:var(--faint); }
  .ads-settings-body, .ads-mockup .fc-b{ padding:2px 18px; }
  .ads-settings-row, .ads-mockup .frow{ display:flex; gap:20px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border-soft); }
  .ads-settings-row:last-child, .ads-mockup .frow:last-child{ border-bottom:none; }
  .ads-settings-label, .ads-mockup .flab{ width:132px; flex:0 0 132px; padding-top:9px; }
  .ads-settings-label .t, .ads-mockup .flab .t{ font-size:12.5px; font-weight:700; color:var(--fg2); }
  .ads-settings-label .h, .ads-mockup .flab .h{ margin-top:4px; font-size:11px; color:var(--faint); font-weight:600; line-height:1.5; }
  .ads-settings-value, .ads-mockup .fval{ flex:1; min-width:0; }
  .ads-settings-input, .ads-mockup .inp{ display:flex; align-items:center; height:38px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); font-size:13px; font-weight:700; color:var(--fg); max-width:340px; font-variant-numeric:tabular-nums; }
  .ads-settings-input.wide, .ads-mockup .inp.wide{ max-width:100%; font-weight:600; }
  .ads-settings-input .u, .ads-mockup .inp .u{ margin-left:auto; color:var(--faint); font-weight:700; font-size:12px; }
  .ads-settings-input.ch, .ads-mockup .inp.ch{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-fg); }
  .ads-settings-input[aria-disabled="true"]{ background:var(--soft); color:var(--faint); }
  .ads-settings-hint, .ads-mockup .fhint{ margin-top:8px; font-size:11.5px; color:var(--faint); font-weight:600; line-height:1.45; }
  .ads-settings-hint b, .ads-mockup .fhint b{ color:var(--warn); font-weight:700; }
  .ads-segment, .ads-mockup .seg2{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
  .ads-segment span, .ads-mockup .seg2 span{ padding:0 16px; height:38px; display:inline-flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--muted); background:var(--panel); border-right:1px solid var(--border); }
  .ads-segment span:last-child, .ads-mockup .seg2 span:last-child{ border-right:none; }
  .ads-segment span.on, .ads-mockup .seg2 span.on{ background:var(--accent-soft); color:var(--accent-fg); font-weight:700; }
  .ads-segment span.dis, .ads-mockup .seg2 span.dis{ color:#c6ccd4; }
  .ads-toggle, .ads-mockup .tgl{ display:inline-flex; align-items:center; gap:10px; padding-top:7px; }
  .ads-toggle .sw, .ads-mockup .sw{ width:42px; height:23px; border-radius:999px; background:var(--ok); position:relative; }
  .ads-toggle .sw.off{ background:#cfd5dc; }
  .ads-toggle .sw::after, .ads-mockup .sw::after{ content:""; position:absolute; top:3px; right:3px; width:17px; height:17px; border-radius:999px; background:#fff; }
  .ads-toggle .sw.off::after{ right:auto; left:3px; }
  .ads-toggle .lb, .ads-mockup .tgl .lb{ font-size:12.5px; font-weight:700; color:var(--ok); }
  .ads-date-row, .ads-mockup .dates{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .ads-date-row .sepr, .ads-mockup .dates .sepr{ color:var(--faint); font-weight:700; }
  .ads-check-line, .ads-mockup .chkline{ display:flex; gap:20px; padding-top:9px; flex-wrap:wrap; }
  .ads-check-line span, .ads-mockup .chkline span{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--fg2); }
  .ads-settings-savebar, .ads-mockup .savebar{ display:flex; align-items:center; gap:10px; padding:13px 18px; border-top:1px solid var(--border-soft); background:var(--subtle); border-radius:0 0 var(--radius) var(--radius); }
  .ads-settings-savebar .txt, .ads-mockup .savebar .txt{ font-size:12.5px; font-weight:700; color:var(--muted); }
  .ads-settings-savebar .txt b, .ads-mockup .savebar .txt b{ color:var(--warn); font-weight:700; }
  .ads-settings-savebar .sp, .ads-mockup .savebar .sp{ flex:1; }
  .ads-apply-note, .ads-mockup .side-note{ padding:15px 17px; }
  .ads-apply-note .sn-t, .ads-mockup .sn-t{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--fg); }
  .ads-apply-note .sn-b, .ads-mockup .sn-b{ margin-top:10px; font-size:11.8px; line-height:1.7; color:var(--muted); font-weight:600; }
  .ads-apply-note .sn-b b, .ads-mockup .sn-b b{ color:var(--fg2); font-weight:700; }
  .ads-apply-note .sn-code, .ads-mockup .sn-code{ margin-top:10px; padding:9px 11px; border-radius:2px; background:var(--subtle); border:1px solid var(--border-soft); font-size:11px; color:var(--muted); font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; word-break:break-all; }
  .ads-apply-note .steps, .ads-mockup .steps{ margin-top:12px; }
  .ads-apply-note .step, .ads-mockup .step{ display:flex; gap:9px; padding:7px 0; }
  .ads-apply-note .step .n, .ads-mockup .step .n{ width:19px; height:19px; flex:0 0 19px; border-radius:999px; background:var(--accent-soft); color:var(--accent-fg); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .ads-apply-note .step .x, .ads-mockup .step .x{ font-size:11.8px; line-height:1.55; color:var(--fg2); font-weight:600; }
  .ads-danger-zone, .ads-mockup .danger{ margin-top:14px; border:1px solid #f3d2d2; border-radius:var(--radius); background:#fffafa; padding:14px 16px; display:flex; align-items:center; gap:12px; }
  .ads-danger-zone .t, .ads-mockup .danger .t{ font-size:12.5px; font-weight:700; color:var(--rej); }
  .ads-danger-zone .h, .ads-mockup .danger .h{ margin-top:4px; font-size:11.5px; color:var(--muted); font-weight:600; }
  .ads-danger-zone .dbtn2, .ads-mockup .dbtn2{ margin-left:auto; height:34px; padding:0 13px; border:1px solid #f0c2c2; border-radius:2px; background:var(--panel); color:var(--rej); font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; }

  @media(max-width:1180px){
    .ads-layout, .ads-mockup .cols{ grid-template-columns:232px minmax(0,1fr); }
    .ads-campaign-fact, .ads-mockup .ch-f{ width:150px; padding:0 12px; }
    .ads-settings-wrap, .ads-mockup .fwrap{ grid-template-columns:1fr; }
  }
  @media(max-width:900px){
    .ads-layout, .ads-mockup .cols{ grid-template-columns:1fr; }
    .ads-campaign-rail, .ads-mockup .cp{ position:static; max-height:none; }
    .ads-campaign-head, .ads-mockup .chead{ flex-wrap:wrap; }
    .ads-campaign-title, .ads-mockup .ch-l{ flex:1 1 100%; padding-right:0; padding-bottom:10px; }
    .ads-campaign-fact, .ads-mockup .ch-f{ flex:1 1 150px; width:auto; padding:10px 12px 0 0; border-left:0; border-top:1px solid var(--border-soft); }
    .ads-campaign-actions, .ads-mockup .ch-act{ flex:1 1 100%; padding:10px 0 0; border-left:0; }
    .ads-campaign-tabs, .ads-mockup .tabs{ flex-wrap:wrap; }
    .ads-one-note, .ads-mockup .onenote{ margin-left:0; width:100%; justify-content:flex-start; border-radius:var(--radius-sm); }
    .ads-toolbar-row, .ads-mockup .searchrow{ flex-wrap:wrap; }
    .ads-toolbar-row .toolbtn, .ads-mockup .searchrow .toolbtn{ flex:1 1 auto; }
    .ads-pager, .ads-mockup .pager{ flex-wrap:wrap; }
    .ads-pending-bar, .ads-mockup .pending{ width:100%; padding-left:0; padding-top:8px; border-left:0; border-top:2px solid var(--warn); justify-content:flex-start; flex-wrap:wrap; }
  }
  @media(max-width:620px){
    .ads-add-drawer, .ads-mockup .drawer{ width:100vw; }
    .ads-add-tools, .ads-mockup .dw-tools{ flex-wrap:wrap; }
    .ads-add-tools .toolbtn, .ads-mockup .dw-tools .toolbtn{ flex:1 1 100%; }
    .ads-add-foot, .ads-mockup .dw-foot{ flex-wrap:wrap; }
    .ads-add-foot .sum, .ads-mockup .dw-foot .sum{ width:100%; }
    .ads-add-foot .sum span, .ads-mockup .dw-foot .sum span{ display:block; margin:3px 0 0; }
  }
  @media(max-width:760px){
    .app{ display:block; min-height:100vh; }
    .side{ position:relative; height:auto; max-height:none; border-right:0; border-bottom:1px solid var(--border); }
    .brand{ padding:14px 16px 10px; }
    .nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; padding:8px 8px 10px !important; }
    .navgroup{ grid-column:1/-1; padding:8px 8px 2px; }
    .nav a{ border-left:0; border-radius:var(--radius-sm); padding:8px 10px; min-height:50px; }
    .nav a.on{ border-left:0; box-shadow:inset 0 0 0 1.5px var(--accent); }
    .navmeta{ padding-right:0; font-size:10.5px; }
    .navbadge{ float:none; margin-left:6px; vertical-align:1px; }
    .topbar{ position:relative; flex-wrap:wrap; padding:12px 16px; }
    .topbar h1{ width:100%; font-size:17px; }
    .pgtop-fresh{ margin-left:0; }
    .pgtop-refresh{ flex:1 1 auto; justify-content:center; }
    .content{ padding:16px 14px 48px; }
  }

  /* ── 상품 등록 목업 이식 공통 클래스 (Register / RegisterBulk / RegisterSet)
     기존 전역 .card/.search/.chip/.grid 를 덮지 않도록 .register-mockup 아래에서만 적용한다. ── */
  .register-mockup{ --reg-side:264px; }
  .register-mockup .cols{ display:grid; grid-template-columns:var(--reg-side) minmax(0,1fr); gap:14px; align-items:start; }
  .register-mockup .cp{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .register-mockup .cp-acct{ padding:12px 12px 0; }
  .register-mockup .acctbtn{ display:flex; align-items:center; gap:8px; height:38px; padding:0 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--subtle); }
  .register-mockup .acctbtn .lbl{ font-size:10.5px; font-weight:700; color:var(--faint); letter-spacing:.03em; }
  .register-mockup .acctbtn .nm{ font-size:13px; font-weight:700; color:var(--fg); }
  .register-mockup .acctbtn .cv{ margin-left:auto; color:var(--faint); }
  .register-mockup .cp-h{ padding:13px 14px 11px; font-size:12.5px; font-weight:700; color:var(--fg); border-bottom:1px solid var(--border-soft); }
  .register-mockup .cp-h .s{ margin-top:5px; font-size:11px; font-weight:600; color:var(--faint); }
  .register-mockup .cp-search{ padding:9px 12px 11px; }
  .register-mockup .search{ display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--subtle); color:var(--muted); }
  .register-mockup .search svg{ flex:0 0 auto; opacity:.6; }
  .register-mockup .search span{ font-size:12.5px; }
  .register-mockup .search input{ flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--fg2); font:inherit; font-size:12.5px; }
  .register-mockup .search input::placeholder{ color:var(--muted); }
  /* 카테고리 직접 고르기 (2026-08-30) — 표의 「고치기」로 열린다.
     ⚠️사람이 고른 값은 조립기가 다시 판정하지 않는다(`category_locked`). 그래서
     화면이 「사람이 고름」이라고 분명히 말해야 한다 — 자동값과 구별이 안 되면 위험하다. */
  .register-mockup .catpick{ margin:0 14px 12px; padding:11px 12px 12px; border:1px solid var(--accent);
      border-radius:var(--radius-sm); background:var(--accent-soft); }
  .register-mockup .catpick[hidden]{ display:none; }
  .register-mockup .catpick .cp-h{ padding:0 0 8px; border:0; font-size:12px; color:var(--accent-fg); }
  .register-mockup .catpick .cp-h .sub{ font-weight:600; color:var(--muted); }
  .register-mockup .catpick .search{ background:var(--panel); }
  .register-mockup .catfix{ margin-left:8px; padding:1px 7px; border:1px solid var(--border);
      border-radius:999px; background:var(--panel); color:var(--fg2); font-size:11px; font-weight:700;
      cursor:pointer; font-family:inherit; }
  .register-mockup .catfix:hover{ background:var(--soft); }
  .register-mockup .catlock{ margin-left:6px; padding:1px 7px; border-radius:999px;
      background:var(--accent); color:var(--on-accent); font-size:10.5px; font-weight:700; }
  .register-mockup .cp-group{ display:flex; align-items:center; gap:6px; padding:11px 14px 5px; font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; border-top:1px solid var(--border-soft); }
  .register-mockup .cp-group .n{ font-weight:700; opacity:.75; }
  .register-mockup .cp-group .cv{ opacity:.5; margin-left:-3px; }
  .register-mockup .cp-group.shut{ padding-bottom:12px; color:var(--muted); }
  /* 2026-08-30: 세 덩어리를 <details> 로 진짜 접는다. 전에는 화살표만 있고 안 접혔다 —
     `.shut` 은 글자색만 바꾸는 CSS 였다. summary 라 JS 가 필요없다. */
  .register-mockup summary.cp-group{ cursor:pointer; list-style:none; user-select:none; }
  .register-mockup summary.cp-group::-webkit-details-marker{ display:none; }
  .register-mockup summary.cp-group::before{ content:"▸"; margin-right:2px; opacity:.55; }
  .register-mockup details[open]>summary.cp-group::before{ content:"▾"; }
  .register-mockup summary.cp-group:hover{ color:var(--fg2); }
  /* 왜 이 덩어리인지 — 기준을 옆에 적는다. 접힌 채로도 뜻이 보여야 한다. */
  .register-mockup .cp-why{ margin-left:auto; font-size:10px; font-weight:600; color:var(--faint);
                            text-transform:none; letter-spacing:0; opacity:.85; }
  .register-mockup .ci{ display:block; padding:8px 13px 9px 12px; border-left:2px solid transparent; }
  .register-mockup .ci .t{ display:flex; align-items:center; gap:7px; }
  .register-mockup .ci .t .d{ width:7px; height:7px; border-radius:999px; background:var(--warn); flex:0 0 auto; }
  .register-mockup .ci .t .d.ok{ background:var(--ok); }
  .register-mockup .ci .t .d.no{ background:var(--rej); }
  .register-mockup .ci .t .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:700; color:var(--fg2); }
  .register-mockup .ci .s{ margin-top:3px; padding-left:14px; font-size:11px; color:var(--faint); font-weight:600; font-variant-numeric:tabular-nums; }
  .register-mockup .ci.on{ background:var(--accent-soft); border-left-color:var(--accent); }
  .register-mockup .ci.on .t .nm{ color:var(--accent-fg); font-weight:700; }
  .register-mockup .ci.on .s{ color:var(--accent-fg); opacity:.72; }
  .register-mockup .cp-foot{ padding:11px 12px; border-top:1px solid var(--border-soft); }
  .register-mockup .newbtn{ display:flex; align-items:center; justify-content:center; gap:6px; height:34px; border:0; border-radius:var(--radius-sm); background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer; width:100%; }
  .register-mockup .newbtn:disabled{ opacity:.55; cursor:not-allowed; }
  .register-mockup .paste{ margin:12px 14px 0; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--panel); padding:10px 11px; height:246px; overflow:hidden; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px; line-height:1.85; color:var(--fg2); }
  .register-mockup textarea.paste{ display:block; width:calc(100% - 28px); resize:none; outline:none; }
  .register-mockup .paste .dup{ color:var(--warn); }
  .register-mockup .paste .bad{ color:var(--rej); text-decoration:line-through; }
  .register-mockup .paste .car{ display:inline-block; width:1px; height:13px; background:var(--accent); vertical-align:-2px; }
  .register-mockup .pmeta{ padding:10px 14px 0; font-size:11px; font-weight:700; color:var(--faint); line-height:1.7; }
  .register-mockup .pmeta b{ color:var(--fg2); }
  .register-mockup .pmeta .w{ color:var(--warn); }

  .register-mockup .chead{ display:flex; align-items:stretch; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:13px 16px; margin-bottom:12px; }
  .register-mockup .cover{ width:52px; height:70px; border-radius:2px; background:linear-gradient(135deg,#e7eaee,#d3d9e0); flex:0 0 52px; position:relative; }
  .register-mockup .cover .bd{ position:absolute; left:6px; right:6px; bottom:6px; height:4px; border-radius:2px; background:#c3cad2; }
  .register-mockup .ch-l{ flex:1; min-width:0; padding:0 16px; }
  .register-mockup .chead > .ch-l:first-child{ padding-left:0; }
  .register-mockup .ch-name{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--fg); letter-spacing:-.02em; }
  .register-mockup .ch-sub{ margin-top:7px; font-size:11.5px; color:var(--faint); font-weight:600; }
  .register-mockup .ch-sub b{ color:var(--fg2); font-weight:700; }
  .register-mockup .ch-f{ width:160px; padding:0 16px; border-left:1px solid var(--border-soft); }
  .register-mockup .ch-f .k{ font-size:10.5px; font-weight:700; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; }
  .register-mockup .ch-f .v{ margin-top:4px; font-size:17px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .register-mockup .ch-f .v.ok{ color:var(--ok); }
  .register-mockup .ch-f .v.warn{ color:var(--warn); }
  .register-mockup .ch-f .v.rej{ color:var(--rej); }
  .register-mockup .ch-f .v.money{ color:var(--money); }
  .register-mockup .ch-f .v .u{ font-size:12px; font-weight:700; color:var(--muted); margin-left:2px; }
  .register-mockup .ch-f .s{ margin-top:5px; font-size:11px; color:var(--faint); font-weight:600; }
  .register-mockup .ch-act{ display:flex; align-items:flex-start; padding-left:16px; border-left:1px solid var(--border-soft); }

  .register-mockup .tabs{ display:flex; align-items:center; gap:4px; margin-bottom:12px; }
  .register-mockup .tab{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--muted); border:1px solid transparent; }
  .register-mockup .tab b{ font-size:11px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
  .register-mockup .tab.on{ background:var(--panel); border-color:var(--border); color:var(--fg); box-shadow:var(--shadow); }
  .register-mockup .tab.on b{ color:var(--accent-fg); }
  .register-mockup .onenote,
  .register-mockup .stopnote{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; border-radius:999px; padding:6px 13px; }
  .register-mockup .onenote{ color:var(--warn); background:var(--warn-bg); border:1px solid #f3ddbc; }
  .register-mockup .stopnote{ color:var(--rej); background:var(--rej-bg); border:1px solid #f3cccc; font-weight:700; }
  .register-mockup .toolbtn{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); color:var(--fg2); font-size:12.5px; font-weight:700; white-space:nowrap; }
  .register-mockup .toolbtn svg{ opacity:.6; }
  .register-mockup .toolbtn.pri{ background:var(--brand); border-color:var(--brand); color:#fff; }
  .register-mockup .toolbtn.pri svg{ opacity:1; }
  .register-mockup .toolbtn.dis{ background:var(--subtle); border-color:var(--border); color:#c3c9d1; }

  .register-mockup .fwrap{ display:grid; grid-template-columns:minmax(0,1fr) 344px; gap:14px; align-items:start; }
  .register-mockup .card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .register-mockup .card.bad{ border-color:#f0c9c9; }
  .register-mockup .fc-h{ padding:14px 18px 13px; border-bottom:1px solid var(--border-soft); font-size:13.5px; font-weight:700; color:var(--fg); display:flex; align-items:center; gap:8px; }
  .register-mockup .fc-h .sub{ font-size:11.5px; font-weight:600; color:var(--faint); }
  .register-mockup .fc-h .sp{ flex:1; }
  .register-mockup .fc-h .bad{ font-size:11.5px; font-weight:700; color:var(--rej); background:var(--rej-bg); border-radius:2px; padding:3px 9px; }
  .register-mockup .gridwrap{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .register-mockup table.grid{ border-collapse:collapse; font-size:12.5px; width:100%; }
  .register-mockup .grid thead th{ background:var(--subtle); border-bottom:1px solid var(--border); border-right:1px solid var(--border-soft); padding:8px 12px; text-align:left; font-size:11.5px; font-weight:700; color:var(--fg2); white-space:nowrap; }
  .register-mockup .grid thead th.num{ text-align:right; }
  .register-mockup .grid tbody td{ padding:7px 12px; border-bottom:1px solid var(--border-soft); border-right:1px solid var(--border-soft); color:var(--fg2); vertical-align:middle; }
  .register-mockup .grid tbody tr:hover td{ background:var(--soft); }
  .register-mockup .grid tbody tr.blocked td,
  .register-mockup .grid tbody tr.miss td{ background:#fffafa; }
  .register-mockup .grid tbody tr.blocked td{ color:var(--faint); }
  .register-mockup .grid tbody tr.blocked .pname{ color:var(--muted); }
  .register-mockup .grid tr.grp td{ background:#f4f6f8; padding:6px 12px; font-size:10.5px; font-weight:700; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; border-right:none; }
  .register-mockup .grid .chk{ width:34px; text-align:center; }
  .register-mockup .grid .num{ text-align:right; font-variant-numeric:tabular-nums; }
  .register-mockup .isbn{ font-variant-numeric:tabular-nums; color:var(--muted); font-size:11.5px; }
  .register-mockup .pname{ font-weight:700; color:var(--fg); max-width:280px; overflow:hidden; text-overflow:ellipsis; }
  .register-mockup .fname{ font-weight:700; color:var(--fg2); white-space:nowrap; }
  .register-mockup .why{ color:var(--muted); font-size:11.5px; max-width:270px; overflow:hidden; text-overflow:ellipsis; }
  .register-mockup .mut{ color:var(--faint); }
  .register-mockup .req{ color:var(--rej); font-weight:700; margin-left:3px; }
  .register-mockup .fv{ font-weight:700; color:var(--fg); }
  .register-mockup .fv.empty{ color:var(--faint); font-weight:600; font-style:normal; }
  .register-mockup .fnote{ color:var(--muted); font-size:11.5px; font-weight:600; }
  .register-mockup .money{ color:var(--money); font-weight:700; }
  .register-mockup .rejtx{ color:var(--rej); font-weight:700; }

  .register-mockup .tierpill{ display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:2px; font-size:10px; font-weight:700; white-space:nowrap; }
  .register-mockup .tierpill.biblio{ background:color-mix(in srgb, var(--t-official) 14%, white); color:var(--t-official); }
  .register-mockup .tierpill.bm,
  .register-mockup .tierpill.kyobo{ background:color-mix(in srgb, var(--t-official2) 16%, white); color:#0f8f63; }
  .register-mockup .tierpill.parse{ background:color-mix(in srgb, var(--t-match) 20%, white); color:#b23368; }
  .register-mockup .tierpill.rule{ background:color-mix(in srgb, var(--t-judge) 18%, white); color:var(--t-judge); }
  .register-mockup .tierpill.hand{ background:color-mix(in srgb, var(--t-internal) 14%, white); color:var(--t-internal); }
  .register-mockup .tierpill.none{ background:var(--rej-bg); color:var(--rej); }
  .register-mockup .tierpill.cp{ background:var(--subtle); color:var(--muted); border:1px solid var(--border); }
  .register-mockup .st{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; white-space:nowrap; }
  .register-mockup .st .d{ width:7px; height:7px; border-radius:999px; }
  .register-mockup .st.ok{ color:var(--ok); } .register-mockup .st.ok .d{ background:var(--ok); }
  .register-mockup .st.warn{ color:var(--warn); } .register-mockup .st.warn .d{ background:var(--warn); }
  .register-mockup .st.no{ color:var(--rej); } .register-mockup .st.no .d{ background:var(--rej); }
  .register-mockup .st.skip{ color:var(--faint); } .register-mockup .st.skip .d{ background:#cfd5dc; }
  .register-mockup .vd{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:2px; font-size:11px; font-weight:700; white-space:nowrap; }
  .register-mockup .vd.keep{ background:var(--ok-bg); color:#15803d; }
  .register-mockup .vd.warn{ background:var(--warn-bg); color:var(--warn); }
  .register-mockup .vd.cut{ background:var(--rej-bg); color:var(--rej); }
  .register-mockup .tagline{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
  .register-mockup .tg{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:2px; background:var(--accent-soft); color:var(--accent-fg); font-size:11px; font-weight:700; }
  /* 추가이미지 9칸 — 등록 전에 「무엇이 나가나」를 보는 유일한 자리(2026-08-30).
     ⚠️사람이 채우는 칸이 아니다. ISBN 으로 서버가 조합한 것을 그대로 보여줄 뿐이다. */
  .register-mockup .regimgs{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
  .register-mockup .regimg{ position:relative; width:52px; height:70px; border:1px solid var(--border);
      border-radius:2px; overflow:hidden; background:var(--soft); display:block; flex:0 0 auto; }
  .register-mockup .regimg img{ width:100%; height:100%; object-fit:contain; display:block; }
  .register-mockup .regimg b{ position:absolute; left:0; bottom:0; padding:0 4px; border-top-right-radius:5px;
      background:var(--accent); color:var(--on-accent); font-size:9.5px; font-weight:700;
      font-variant-numeric:tabular-nums; }
  /* 못 불러온 칸을 조용히 비워두지 않는다 — 「없는 것」과 「깨진 것」은 다르다. */
  .register-mockup .regimg.dead{ border-style:dashed; border-color:var(--rej); background:var(--rej-bg); }
  .register-mockup .regimg.dead img{ display:none; }
  .register-mockup .tgmore{ font-size:11px; font-weight:700; color:var(--faint); }

  .register-mockup .box{ display:inline-block; width:15px; height:15px; border:1px solid #c8ced6; border-radius:2px; background:#fff; vertical-align:middle; position:relative; flex:0 0 15px; }
  .register-mockup .box.on{ background:var(--accent); border-color:var(--accent); }
  .register-mockup .box.on::after{ content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(42deg); }
  .register-mockup .box.dis{ background:var(--border-soft); border-color:var(--border); }
  .register-mockup .pk{ padding:6px 16px 14px; }
  .register-mockup .pkrow{ display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
  .register-mockup .pkrow:last-child{ border-bottom:none; }
  .register-mockup .pkrow .nm{ font-size:12.5px; font-weight:700; color:var(--fg2); }
  .register-mockup .pkrow .tail{ margin-left:auto; font-size:11px; font-weight:700; color:var(--faint); }
  .register-mockup .pkrow.off .nm{ color:var(--faint); font-weight:600; }
  .register-mockup .savebar,
  .register-mockup .pager{ display:flex; align-items:center; gap:10px; padding:13px 18px; border-top:1px solid var(--border-soft); background:var(--subtle); border-radius:0 0 var(--radius) var(--radius); }
  .register-mockup .savebar .txt{ font-size:12.5px; font-weight:700; color:var(--muted); }
  .register-mockup .savebar .txt b{ color:var(--warn); font-weight:700; }
  .register-mockup .savebar .sp,
  .register-mockup .pager .sp{ flex:1; }
  .register-mockup .pager{ padding:11px 14px; font-size:12px; color:var(--muted); font-weight:700; }
  .register-mockup .pager b{ color:var(--fg); }
  .register-mockup .sn-b{ padding:13px 16px 15px; font-size:11.8px; line-height:1.7; color:var(--muted); font-weight:600; }
  .register-mockup .sn-b b{ color:var(--fg2); font-weight:700; }
  .register-mockup .warncard{ margin-top:14px; border:1px solid #f3ddbc; border-radius:var(--radius); background:var(--warn-bg); padding:14px 16px; }
  .register-mockup .warncard .t{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--warn); }
  .register-mockup .warncard .h{ margin-top:8px; font-size:11.8px; line-height:1.65; color:#8a5a12; font-weight:600; }
  .register-mockup .warncard .h b{ font-weight:700; }
  .register-mockup .icon{ width:14px; height:14px; }

  .register-mockup .toolbar{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 14px 13px; margin-bottom:14px; }
  .register-mockup .searchrow{ display:flex; align-items:center; gap:10px; }
  .register-mockup .toolbar .search{ flex:1; height:36px; }
  .register-mockup .srcrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding-top:11px; margin-top:12px; border-top:1px dashed var(--border-soft); }
  .register-mockup .srclbl{ font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; margin-right:2px; }
  .register-mockup .chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px 0 10px; border-radius:999px; border:1px solid var(--border); background:var(--panel); font-size:12px; font-weight:700; color:var(--faint); font-family:inherit; cursor:pointer; }
  .register-mockup .chip .n{ font-size:10.5px; font-weight:700; opacity:.7; }
  .register-mockup .chip .dot{ width:7px; height:7px; border-radius:999px; }
  .register-mockup .chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-fg); }
  .register-mockup .acctnote{ margin-left:auto; font-size:12px; font-weight:700; color:var(--muted); }
  .register-mockup .acctnote b{ color:var(--fg); }

  .register-mockup .findbtn{ display:inline-flex; align-items:center; gap:5px; height:25px; padding:0 9px; border-radius:2px; border:1px solid #f0c2c2; background:#fff; color:var(--rej); font-size:11.5px; font-weight:700; }
  .register-mockup .cell{ display:inline-flex; align-items:center; justify-content:flex-end; min-width:66px; height:26px; padding:0 9px; border:1px solid var(--border); border-radius:2px; background:var(--panel); font-size:12.5px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
  .register-mockup .cell.na{ border-style:dashed; color:#cfd5dc; }
  .register-mockup .noloop{ display:flex; align-items:center; gap:8px; padding:10px 18px; background:#fffafa; border-top:1px solid var(--border-soft); font-size:11.8px; font-weight:700; color:var(--rej); }
  .register-mockup .noloop .x{ font-size:13px; }
  .register-mockup .noloop .h{ color:var(--muted); font-weight:600; }
  .register-mockup .sumrow td{ background:var(--subtle) !important; font-weight:700; color:var(--fg); }
  .register-mockup .kinds{ padding:12px 16px 15px; }
  .register-mockup .kind{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 12px; margin-bottom:9px; }
  .register-mockup .kind:last-child{ margin-bottom:0; }
  .register-mockup .kind.on{ border-color:var(--accent); background:var(--accent-soft); }
  .register-mockup .kind .t{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--fg2); }
  .register-mockup .kind.on .t{ color:var(--accent-fg); }
  .register-mockup .kind .h{ margin-top:6px; padding-left:23px; font-size:11.5px; line-height:1.6; color:var(--muted); font-weight:600; }
  .register-mockup .kind.on .h{ color:var(--accent-fg); opacity:.8; }
  .register-mockup .radio{ width:15px; height:15px; border-radius:999px; border:1px solid #c8ced6; background:#fff; flex:0 0 15px; position:relative; }
  .register-mockup .kind.on .radio{ border-color:var(--accent); }
  .register-mockup .kind.on .radio::after{ content:""; position:absolute; inset:3px; border-radius:999px; background:var(--accent); }
  .register-mockup .covers{ display:flex; gap:8px; padding:12px 16px 6px; }
  .register-mockup .cv1{ width:56px; height:74px; border-radius:2px; background:linear-gradient(135deg,#e7eaee,#d3d9e0); flex:0 0 56px; }
  .register-mockup .cv1.ghost{ background:#fff; border:1px dashed #e0c4c4; }
  .register-mockup .cvnote{ padding:2px 16px 15px; font-size:11.5px; line-height:1.65; color:var(--muted); font-weight:600; }
  .register-mockup .cvnote b{ color:var(--fg2); font-weight:700; }
  .register-mockup .register-set-warning .warncard,
  .register-mockup .warncard.danger{ border-color:#f3cccc; background:#fffafa; }
  .register-mockup .register-set-warning .warncard .t,
  .register-mockup .warncard.danger .t{ color:var(--rej); }
  .register-mockup .register-set-warning .warncard .h,
  .register-mockup .warncard.danger .h{ color:var(--muted); }
  .register-mockup .register-set-warning .savebar .txt b,
  .register-mockup .savebar.danger .txt b{ color:var(--rej); }

  @media(max-width:1120px){
    .register-mockup .cols,
    .register-mockup .fwrap{ grid-template-columns:1fr; }
    .register-mockup .ch-f{ width:auto; min-width:132px; }
  }
  @media(max-width:760px){
    .register-mockup .chead,
    .register-mockup .searchrow,
    .register-mockup .tabs,
    .register-mockup .savebar,
    .register-mockup .pager{ flex-wrap:wrap; }
    .register-mockup .ch-l{ padding:0 0 10px; flex-basis:100%; }
    .register-mockup .cover + .ch-l{ flex-basis:calc(100% - 68px); padding-left:12px; }
    .register-mockup .ch-f{ flex:1 1 130px; border-left:0; border-top:1px solid var(--border-soft); padding:10px 0 0; }
    .register-mockup .ch-act{ border-left:0; padding-left:0; }
    .register-mockup .onenote,
    .register-mockup .stopnote,
    .register-mockup .acctnote{ margin-left:0; }
    .register-mockup .toolbtn,
    .register-mockup .newbtn{ width:100%; justify-content:center; }
  }

  /* ══ 포커스 표시 — 키보드로 탭할 때만 (2026-08-27, WCAG 2.4.7 Focus Visible)
     왜: 이 파일엔 `:focus` 스타일이 `.wingpage input.f:focus` **딱 하나**인데, 브라우저 기본
     표시를 끄는 `outline:none`/`outline:0` 은 **네 군데**였다(`.p2-search input` ·
     `.search input` · `.register-mockup .search input` · `.register-mockup textarea.paste`).
     = 기본 표시를 끄고 대체를 안 준 상태라, 키보드 사용자는 지금 어디에 있는지 볼 수 없었다.

     `:focus` 가 아니라 `:focus-visible` 인 이유 — 마우스 클릭에는 안 뜨고 키보드 탭에서만 뜬다.
     **마우스 사용자 화면은 하나도 안 바뀐다.**

     ⚠️왜 파일 끝인가(특이도 계산):
        `:root <타입>:focus-visible` = (0,2,1).
        위 넷 중 `.register-mockup .search input`·`.register-mockup textarea.paste` 도 (0,2,1) 이라
        **동점**이고, 동점은 나중에 온 쪽이 이긴다 ⇒ 끝에 둬야 그 둘 위에 얹힌다.
        `.p2-search input`·`.search input` 은 (0,1,1) 이라 어차피 진다.
        반대로 `.wingpage input.f:focus` 는 (0,3,1) 이라 **이 규칙을 이긴다** — 의도한 것이다.
        거기엔 이미 대체 표시(box-shadow 링)가 있어서 겹치면 링이 두 겹이 된다.
     ⚠️위 넷의 `outline:none` 은 디자인 의도(검색창 테두리를 직접 그린다)라 지우지 않았다.
     ⚠️`box-shadow` 가 아니라 `outline` 만 쓴다 — box-shadow 를 얹으면 그림자를 가진 카드·버튼의
        기존 그림자를 통째로 덮어쓴다. outline 은 레이아웃도 안 밀고 border-radius 도 따라간다.
     색은 새 hex 없이 기존 `--accent` 토큰뿐이다(라이트 7.24 · 다크 5.89 — WCAG 2.4.11 의 3:1 통과). */
  :root a:focus-visible,
  :root button:focus-visible,
  :root input:focus-visible,
  :root select:focus-visible,
  :root textarea:focus-visible,
  :root summary:focus-visible,
  :root [tabindex]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

/* ── ads desk template styles migrated from inline <style> ── */
.ads-keyword-source.unknown{ background:var(--subtle); color:var(--muted); border:1px solid var(--border); }
.ads-keyword-chip .ads-vol{ font-size:10.5px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
.ads-keyword-bid[aria-disabled="true"]{ color:var(--faint); background:var(--soft); }
.ads-was{ margin-left:7px; font-size:11px; color:var(--faint); text-decoration:line-through; font-variant-numeric:tabular-nums; }

/* ── PRODUCT TRENDS PAGE-SPECIFIC STYLES ── */
.ck-card{ background:#fff;border:1px solid var(--border);border-radius:2px;margin-bottom:18px;overflow:hidden }
  .ck-head{ padding:13px 16px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:10px }
  .ck-head h3{ margin:0;font-size:15px } .ck-head .cnt{ color:var(--accent);font-weight:700 }
  .ck-head .desc{ color:var(--muted);font-size:12px;margin-left:auto }
  .ck-body{ padding:0 } .ck-body.pad{ padding:14px 16px }
  .ck-toolbar{ padding:10px 16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border-soft);background:var(--soft) }
  table.ck{ width:100%;border-collapse:collapse;font-size:12.5px }
  table.ck th,table.ck td{ padding:7px 10px;border-bottom:1px solid var(--border-soft);text-align:left }
  table.ck th{ background:var(--soft);font-weight:600;position:sticky;top:0 }
  .ck-scroll{ max-height:420px;overflow:auto }
  .miss{ color:var(--muted);font-size:11px }
  .progress{ height:18px;background:var(--soft);border-radius:2px;overflow:hidden;margin:8px 0 }
  .progress > div{ height:100%;background:var(--accent);width:0;transition:width .3s;color:#fff;font-size:11px;text-align:center;line-height:18px }
  /* 📱 모바일 (≤820px) */
  @media(max-width:820px){
    .ck-head{ flex-wrap:wrap; }
    .ck-head .desc{ margin-left:0; flex-basis:100%; }
    .ck-toolbar{ flex-wrap:wrap; gap:8px; }
    .ck-toolbar > div[style*="flex"]{ display:none; }
    .ck-body.pad{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .ck-body.pad table.ck{ min-width:430px; }
    table.ck th:first-child, table.ck td:first-child{ white-space:nowrap; }
  }

/* ── PRODUCT RAW PAGE-SPECIFIC STYLES ── */
/* 원본 표 — 엑셀처럼 훑어보는 용도. 열이 30개라 가로 스크롤 + 머리행 고정. */
.rawtbl{border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap}
.rawtbl th,.rawtbl td{padding:6px 9px;border-bottom:1px solid var(--border);text-align:left}
.rawtbl thead th{position:sticky;top:0;z-index:2;background:var(--panel,#fff);
  border-bottom:2px solid var(--border);font-weight:700;font-size:11px;color:var(--muted)}
/* 계정·상품ID 는 가로 스크롤해도 붙어 있어야 어느 행인지 안 놓친다 */
.rawtbl thead th:nth-child(1),.rawtbl tbody td:nth-child(1){position:sticky;left:0;z-index:1;
  background:var(--panel,#fff);font-weight:700}
.rawtbl thead th:nth-child(1){z-index:3}
.rawtbl tbody tr:hover td{background:var(--soft,#f6f8fa)}
/* 긴 값(상품명·옵션명·검색태그)은 잘라 보여주고 hover 로 전문 — title 속성에 원문이 있다 */
.rawtbl td:nth-child(7),.rawtbl td:nth-child(8){max-width:320px;overflow:hidden;text-overflow:ellipsis}
.rawtbl td:nth-child(25){max-width:420px;overflow:hidden;text-overflow:ellipsis}
.rawtbl td:empty::after{content:'—';color:var(--muted);opacity:.45}