/* OFF BEAUTY B2B — 디자인 시스템 "무신사식" (2026-10, v2 통합 브랜치)
   설계: docs/superpowers/specs/2026-10-08-musinsa-design-system.md
   로드 순서: vendor/reset.css → vendor/open-props.min.css → vendor/pretendard.css → style.css

   무엇을 닮으려 했나 — 무신사(musinsa.com)의 시각 언어: 구조·밀도·타이포·그리드·내비.
   · 대담함은 한 곳: 검정 상단 띠(워드마크·검색·GNB)와 사진끼리 맞닿은 촘촘한 상품 격자.
   · 나머지는 조용히: 흰 면, 1px 선, 작은 글자(본문 14 · 목록 13). 그림자 없음.
   · 반경은 위계로: 사진·배너·표 0 / 태그 2 / 버튼·입력·칩 4 / 패널 8 / 원(아바타).
   · 색은 뜻이 하나씩: 검정 = 주요·현재 위치, 파랑 = 링크·인증·안내, 빨강 = 오류·필수·반려.

   두 셸(base.html 이 사용자에 따라 고른다)
   · 스토어프런트 .app--store — 비로그인·바이어. 상단 바 + (바이어) 검색 줄 + GNB. 흰 바탕.
   · 업무 콘솔 .app--console — 브랜드·MD·영업·관리자. 같은 상단 바 + 흰 좌측 메뉴. 회색 바탕에 흰 패널.

   구조 규칙(tests/test_ui_styles.py · tests/test_design_system.py · tests/test_design_components.py)
   · 토큰은 :root 한 벌(라이트 고정). 테마 덮어쓰기 블록을 두지 않는다.
   · 선언한 토큰은 반드시 var() 로 쓰고, var() 로 부르는 토큰은 반드시 선언돼 있다.
   · 처음 나오는 `:root {`·`body {`·`.table {` 가 진짜 규칙이다(테스트가 첫 블록을 읽는다) —
     `tbody {`·`.sidebar-body {` 같은 규칙을 `body {` 보다 위에 두지 않는다.
   · 파일 끝 패키지 구역 표식 사이에서만 웨이브 패키지가 고친다. 구역 안 새 토큰(`--이름:`) 금지. */

:root {
  /* ── 색: 핵심 여섯 ────────────────────────────────────────────────────
     무신사 계측(글자 #000·보조 #666·혜택 파랑·할인 빨강·회색 면 #F5F5F5)을 OFF BEAUTY 값으로 옮겼다. */
  --ink: #000000;                 /* Ink — 글자·상단 띠·주요 버튼·순위 */
  --card: #ffffff;                /* Paper — 바탕·패널 */
  --raised: #f5f5f5;              /* Mist — 콘솔 바탕·사진 자리·채움 (이름은 모달 JS 계약) */
  --muted: #666666;               /* Graphite — 보조 글자 */
  --teal: #1f5bff;                /* Signal Blue — 링크·포커스·인증·게이지 (이름은 모달 JS 계약) */
  --alert: #e5191a;               /* Alert Red — 필수·오류(흰 바탕 작은 글자 4.6:1) */

  /* 글자·선 보조 */
  --ink-soft: #333333;            /* 표 셀·메뉴 글자 */
  --faint: #6b6b6b;               /* 캡션 — 흰 바탕 5.3:1 · Mist(#f5f5f5) 위 4.9:1 (P8a: #767676 은 Mist 위 4.17:1 이었다) */
  --line: #ebebeb;                /* 구분선 */
  --line-mid: #d4d4d4;            /* 보조 버튼·칩 테두리 */
  --line-strong: #949494;         /* 입력칸 경계 — 비텍스트 대비 3:1(WCAG 1.4.11) */
  --hover: #fafafa;               /* 표 머리·행 호버 */

  /* 파랑 파생 */
  --indigo: rgb(31 91 255 / 0.16);      /* 선택·차트 채움 (이름은 모달 JS 계약) */
  --signal-tint: rgb(31 91 255 / 0.07); /* 안내 상자·일치 칩 바탕 */
  --signal-ink: #1747d6;                /* 옅은 파랑 위 글자 */

  --on-fill: #ffffff;             /* 검정·파랑 채움 위 글자 */
  --snack: #2a2a2a;               /* 성공 알림 띠(무신사 스낵바) */

  /* 상태색 — 장식이 아니라 데이터. 옅은 바탕 + 진한 글자, 모두 4.5:1 이상. */
  --ok-bg: #eaf6ef;   --ok-fg: #12723f;   --ok-line: #bfe3cd;     /* 통과 */
  --bad-bg: #fdeeee;  --bad-fg: #c8141b;  --bad-line: #f5c4c4;    /* 반려 */
  --hold-bg: #fff4dc; --hold-fg: #8a5300; --hold-line: #f0d49a;   /* 조건부 보류 */
  --wait-bg: #f2edff; --wait-fg: #5b37c7;                         /* MD 심사 대기 */
  --info-bg: #eaf0ff; --info-fg: #1747d6;                         /* AI 심사 대기 */
  /* 수동검토(AI 가 채점하지 못함) — 보류와 다른 색. 보류는 "점수가 애매하다", 수동검토는 "점수가 없다". */
  --manual-bg: #fff0e5; --manual-fg: #a8490a; --manual-line: #f5cdae;
  /* 최종승인 — 파이프라인의 종착점이라 유일하게 '채운' 태그(검정). 이름은 테스트 계약. */
  --teal-soft: #000000;
  --teal-ink: #ffffff;
  --good: var(--ok-fg);
  --bad: var(--bad-fg);

  --focus: var(--teal);
  --scrim: rgb(0 0 0 / 0.5);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.16), 0 2px 6px rgb(0 0 0 / 0.06);

  /* ── 서체 — Pretendard 하나(무신사와 같다). 라틴 글자도 Pretendard(Inter 계열)로 그린다. ── */
  --font-ko: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
             "Noto Sans KR", var(--font-sans);
  --font-size-badge: 11px;        /* 태그·배지·알림 수의 최소 크기(H-2: --font-size-00 에 기대지 않는다) */
  --fs-12: 12px;                  /* 캡션·표 머리·브레드크럼 */
  --fs-13: 13px;                  /* 기본 UI — 표 셀·라벨·상품명 */
  --fs-14: 14px;                  /* 본문·입력·버튼 */
  --fs-16: 16px;                  /* GNB·큰 버튼 */
  --fs-18: 18px;                  /* 섹션 제목 */
  --fs-22: 22px;                  /* 페이지 제목·워드마크 */
  --fs-28: 28px;                  /* 지표 숫자·역할 카드·배너 */
  --tracking-head: -0.01em;

  /* ── 모양·치수 ── */
  --r-xs: 2px;                    /* 태그 */
  --r-sm: 4px;                    /* 버튼·입력·칩 */
  --r-md: 8px;                    /* 패널·모달 */
  --r-pill: 999px;                /* 아바타·알림 수 */
  --ease: 120ms ease-out;
  --topbar-h: 56px;
  --gnb-h: 48px;
  --sidebar-w: 216px;
  --sidebar-w-collapsed: 60px;
  --content-max: 1280px;          /* 콘솔 본문 */
  --store-max: 1440px;            /* 스토어 본문 */
  --gutter: 16px;
  --card-pad: 20px;

  color-scheme: light;
}

/* Open Props 의 그림자 토큰은 OS 다크 설정에 따라 값이 바뀐다. 화면은 OS 설정과 무관하게
   라이트 고정이므로 두 경우 모두 같은 값으로 고정한다(지금 규칙들은 이 토큰을 쓰지 않는다). */
:root {
  --shadow-color: 220 20% 10%;
  --shadow-strength: 4%;
  --inner-shadow-highlight: inset 0 -0.5px 0 0 rgb(255 255 255 / 0.6), inset 0 0.5px 0 0 rgb(0 0 0 / 0.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-color: 220 20% 10%;
    --shadow-strength: 4%;
    --inner-shadow-highlight: inset 0 -0.5px 0 0 rgb(255 255 255 / 0.6), inset 0 0.5px 0 0 rgb(0 0 0 / 0.07);
  }
}

body {
  margin: 0;
  /* 세로 flex — 짧은 화면에서도 바닥글이 화면 아래에 붙는다(.app 이 남는 높이를 먹는다).
     스토어 헤더(.store, display: contents)의 줄들도 이 flex 의 항목이라 각자 sticky 로 붙는다. */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ko);
  font-size: var(--fs-14);
  line-height: 1.5;               /* 무신사 본문 14/21 */
  letter-spacing: 0;
  /* 한국어는 keep-all 이 없으면 어절 중간에서 줄이 바뀐다.
     대신 끊을 곳이 없는 긴 영문·URL 이 넘치므로 overflow-wrap 을 같이 건다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--ink); color: var(--on-fill); }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--raised); border-radius: var(--r-xs); padding: 1px 5px; }
small { font-size: var(--fs-12); }
p { margin: 0 0 10px; }

/* 키보드 접근성: 마우스 클릭에는 링을 띄우지 않고 키보드 이동에만 띄운다. 검정 띠 위에서도 보이는 파랑. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 본문 바로가기 — 첫 Tab 에서만 왼쪽 위에 뜬다. 본문 틀(#content)은 링을 그리지 않는다(포커스만 받는다). */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  padding: 10px 14px;
  background: var(--card); color: var(--ink);
  font-size: var(--fs-14); font-weight: 700;
  border-radius: var(--r-sm);
}
.skip-link:focus { top: 10px; text-decoration: none; }
.content:focus { outline: none; }

.icon { flex: none; display: inline-block; vertical-align: middle; }

/* ── 타이포 ── */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.35; letter-spacing: var(--tracking-head); }
h1 { font-size: var(--fs-22); font-weight: 700; margin: 0 0 20px; }
h2 { font-size: var(--fs-16); font-weight: 700; margin: 28px 0 12px; }
h3 { font-size: var(--fs-14); font-weight: 700; margin: 20px 0 8px; }
h4 { font-size: var(--fs-13); font-weight: 600; margin: 16px 0 6px; color: var(--ink-soft); letter-spacing: 0; }
h1 small, h2 small, h3 small, h4 small { font-weight: 400; color: var(--muted); letter-spacing: 0; }
h2 small, h3 small { font-size: var(--fs-13); }

/* ── 상단 바(두 셸 공용) ──────────────────────────────────────────────
   검정 띠 56px. 왼쪽 워드마크, 오른쪽 유틸. 스크롤해도 붙어 있다(무신사 데스크톱). */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 14px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: var(--ink); color: var(--on-fill);
}
/* 로고는 이미지가 아니라 글자다 — Pretendard 900, 라틴 대문자. 이 화면의 유일한 대문자. */
.wordmark {
  flex: none;
  color: var(--on-fill);
  font-size: var(--fs-22); font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  white-space: nowrap;
}
.wordmark:hover { color: var(--on-fill); text-decoration: none; }
.topbar-zone {
  flex: none;
  padding-left: 14px; border-left: 1px solid rgb(255 255 255 / 0.3);
  color: rgb(255 255 255 / 0.85); font-size: var(--fs-14); font-weight: 600; line-height: 16px;
  white-space: nowrap;
}
.topbar-user { margin-left: auto; }
.topbar-btn {
  flex: none;
  width: 32px; height: 32px; margin-left: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
  color: rgb(255 255 255 / 0.8);
}
.topbar-btn:hover { color: var(--on-fill); background: rgb(255 255 255 / 0.1); }

/* 사용자 칩 — 상단 바(검정) 위가 기본. 서랍(흰 바탕) 안에서는 900px 블록이 글자색을 뒤집는다. */
.user-chip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar {
  flex: none;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--ink);
  font-size: var(--fs-12); font-weight: 700;
}
.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-meta b { color: var(--on-fill); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: rgb(255 255 255 / 0.65); font-size: var(--font-size-badge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 버거(900px 이하에서만 보인다). 콘솔의 버거는 #sidebar 밖(상단 바)에 있어 X 모양을
   `.sidebar.is-open` 이 아니라 버튼 자신의 aria-expanded(nav.js 가 바꾼다)로 그린다. */
.burger-btn { display: none; }
.burger-bar { display: none; }

/* 알림 수 — 파랑 알약. */
.notif-link { white-space: nowrap; }
.notif-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--on-fill); border-radius: var(--r-pill);
  font-size: var(--font-size-badge); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* 로그아웃은 세션을 바꾸므로 POST 폼이다. 외형만 메뉴 링크에 맞춘다. */
.linkbtn {
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
}
.nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── 스토어프런트 셸 ──────────────────────────────────────────────────
   .store 는 상자를 만들지 않는다(display: contents) — 상단 바와 GNB 가 각자 페이지 전체를 기준으로
   붙고(sticky 는 감싼 상자 안에서만 붙는다), 가운데 검색 줄만 흘러간다. 무신사 데스크톱과 같다.
   띠는 화면 끝까지 칠하고 내용은 스토어 본문 폭(--store-max)에 맞춘다. */
.store { display: contents; }
.store .topbar { padding-inline: max(var(--gutter), calc((100% - var(--store-max)) / 2 + var(--gutter))); }
.store-utils { margin-left: auto; display: flex; align-items: center; gap: 16px; }
/* 바이어 유틸(데스크톱) — 서랍 요소(#sidebarBody)를 바 오른쪽에 한 줄로 편다. */
.store .sidebar-body { margin-left: auto; min-width: 0; }
.store .sidebar-foot { display: flex; align-items: center; gap: 18px; }
.store .sidebar-foot form { margin: 0; }
.util {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0;
  color: rgb(255 255 255 / 0.8); font-size: var(--fs-13); font-weight: 500;
  white-space: nowrap;
}
.util:hover { color: var(--on-fill); text-decoration: none; }
.linkbtn.util { width: auto; }
.util .notif-badge { margin-left: 2px; }
.util-btn {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 10px;
  border: 1px solid rgb(255 255 255 / 0.7); border-radius: var(--r-sm);
  color: var(--on-fill); font-size: var(--fs-13); font-weight: 500; white-space: nowrap;
}
.util-btn:hover { background: var(--on-fill); color: var(--ink); text-decoration: none; }

/* 검색 줄 — 검정 띠 안의 흰 입력칸(무신사). 흘러간다(붙지 않는다). */
.store-search {
  position: relative;
  display: flex; align-items: center;
  margin: 0; padding: 4px 0 12px;
  padding-inline: max(var(--gutter), calc((100% - var(--store-max)) / 2 + var(--gutter)));
  background: var(--ink);
}
.store-search .store-search-input {
  flex: 1; min-width: 0;
  height: 40px; padding: 0 48px 0 14px;
  border: 0; border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-size: var(--fs-14);
}
.store-search .store-search-input:focus { box-shadow: inset 0 0 0 2px var(--teal); }
.store-search-btn {
  flex: none;
  width: 44px; height: 40px; margin-left: -44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}

/* GNB — 글자 탭. 지금 화면 = 흰색 굵게 + 흰 밑줄 2px. 상단 바 바로 아래에 붙는다. */
.store-gnb {
  position: sticky; top: var(--topbar-h); z-index: 99;
  display: flex; align-items: stretch; gap: 28px;
  height: var(--gnb-h);
  padding-inline: max(var(--gutter), calc((100% - var(--store-max)) / 2 + var(--gutter)));
  background: var(--ink);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.store-gnb::-webkit-scrollbar { display: none; }
.store-gnb a {
  position: relative; flex: none;
  display: inline-flex; align-items: center;
  color: rgb(255 255 255 / 0.62); font-size: var(--fs-16); font-weight: 500;
  white-space: nowrap;
}
.store-gnb a:hover { color: var(--on-fill); text-decoration: none; }
.store-gnb a[aria-current="page"] { color: var(--on-fill); font-weight: 700; }
.store-gnb a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--on-fill);
}

/* ── 본문 틀 ── */
/* overflow-x: clip — 넘치는 것이 있어도 화면이 옆으로 밀리지 않게. hidden 과 달리 스크롤 상자를
   만들지 않아 안쪽 sticky(콘솔 메뉴)가 그대로 붙는다. */
.app { flex: 1 0 auto; display: flex; overflow-x: clip; }
.app--store { background: var(--card); }
.app--console { background: var(--raised); }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.container { width: 100%; margin: 0 auto; flex: 1; }
.app--console .container { max-width: var(--content-max); padding: 28px 32px 56px; }
.app--store .container { max-width: var(--store-max); padding: 28px var(--gutter) 64px; }
.footer {
  padding: 20px 32px 28px;
  color: var(--faint); font-size: var(--fs-12);
}
.app--store .footer {
  border-top: 1px solid var(--line);
  padding-inline: max(var(--gutter), calc((100% - var(--store-max)) / 2 + var(--gutter)));
}
.footer-note { margin: 0; }
/* 비로그인 상태의 탈출구 — 본문보다 크게 만들지 않되 확실히 눌리게 둔다. */
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.footer-links a { color: var(--ink-soft); font-size: var(--fs-13); font-weight: 600; }
.footer-links a:hover { color: var(--ink); }

/* ── 업무 콘솔 셸 — 흰 좌측 메뉴 ────────────────────────────────────────
   216px 흰 기둥은 본문 높이만큼 내려가고(바탕이 끊기지 않게), 안의 메뉴(#sidebarBody)가 상단 바 바로
   아래에 붙는다. 활성 = 검정 굵게 + 왼쪽 2px 검정 막대. 데스크톱에서는 아이콘 열로 접을 수 있다
   (▤ 버튼·[ 키, js/sidebar.js). */
.sidebar {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--line);
  transition: width var(--ease), flex-basis var(--ease);
}
.sidebar .sidebar-body {
  position: sticky; top: var(--topbar-h);
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  padding: 16px 12px;
  overflow-x: hidden; overflow-y: auto;
}
.sidebar .sidebar-nav { display: flex; flex-direction: column; gap: 20px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { padding: 0 10px 6px; color: var(--faint); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.sidebar .sidebar-nav a,
.sidebar .sidebar-foot a,
.sidebar .linkbtn {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: var(--fs-14); font-weight: 500;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.sidebar .sidebar-nav a .icon,
.sidebar .sidebar-foot a .icon,
.sidebar .linkbtn .icon { color: var(--faint); }
.sidebar .sidebar-nav a:hover,
.sidebar .sidebar-foot a:hover,
.sidebar .linkbtn:hover { background: var(--raised); color: var(--ink); text-decoration: none; }
.sidebar .sidebar-nav a.is-active {
  background: var(--raised); color: var(--ink); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--ink);
}
.sidebar .sidebar-nav a.is-active .icon { color: var(--ink); }
.sidebar .sidebar-foot {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sidebar .sidebar-foot form { display: block; margin: 0; }

@media (min-width: 901px) {
  [data-sidebar="collapsed"] .sidebar { flex-basis: var(--sidebar-w-collapsed); width: var(--sidebar-w-collapsed); }
  [data-sidebar="collapsed"] .sidebar .sidebar-body { padding-left: 8px; padding-right: 8px; }
  [data-sidebar="collapsed"] .sidebar .nav-text { display: none; }
  [data-sidebar="collapsed"] .nav-label { height: 1px; padding: 0; margin: 4px 10px 8px; background: var(--line); overflow: hidden; color: transparent; }
  [data-sidebar="collapsed"] .sidebar .sidebar-nav a,
  [data-sidebar="collapsed"] .sidebar .sidebar-foot a,
  [data-sidebar="collapsed"] .sidebar .linkbtn { justify-content: center; padding: 0; }
  [data-sidebar="collapsed"] .sidebar .notif-link { position: relative; }
  [data-sidebar="collapsed"] .sidebar .notif-badge { position: absolute; top: 3px; right: 6px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 9px; }
}

/* ── 페이지 머리 — 브레드크럼(글자와 ›) · 제목 · 메타 · 오른쪽 액션 ── */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-heading { min-width: 0; flex: 1 1 360px; }
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px;
  margin-bottom: 6px;
  color: var(--faint); font-size: var(--fs-12);
}
.breadcrumb .icon { color: var(--faint); }
.crumb { display: inline-flex; align-items: center; }
.breadcrumb a { color: var(--faint); }
.breadcrumb a:hover { color: var(--ink); }
.page-title {
  margin: 0;
  font-size: var(--fs-22); font-weight: 700; line-height: 1.3;
  letter-spacing: var(--tracking-head);
}
.page-title small { margin-left: 6px; font-size: var(--fs-14); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-13); color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-actions form { margin: 0; }
.page-lede { margin: -12px 0 20px; color: var(--muted); font-size: var(--fs-14); }

/* ── 패널 — 흰 면 + 1px 선, 그림자 없음 ── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  margin-bottom: 16px;
  min-width: 0;
}
.card > h2:first-child,
.card > h3:first-child,
.card > .section-title:first-child h2,
.card > .section-title:first-child h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-title-row { display: flex; align-items: center; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card { margin-bottom: 0; }
/* 그리드 칸은 내용(가로 스크롤 표)만큼 늘어나지 않게 — 모바일에서 화면 밖으로 밀려나는 원인이었다. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.card .grid-2 { margin-bottom: 0; }
.grid-span { grid-column: 1 / -1; }

/* ── 지표 타일 ──
   라벨이 숫자 **위**에 온다. 마크업은 숫자 → 라벨 순서라(테스트가 인접을 고정) flex 순서로만 뒤집는다.
   할 일이 있는 지표(.stat-action)는 검정으로 채운다 — 화면에서 가장 먼저 눌러야 할 곳. */
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  transition: border-color var(--ease);
}
.stat .stat-num {
  order: 1;
  display: block; color: var(--ink);
  font-size: var(--fs-28); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat > * { order: 2; }
.stat > .stat-num + .stat-label { order: 0; color: var(--muted); font-weight: 600; }
.stat .stat-label { color: var(--faint); font-size: var(--fs-12); line-height: 1.4; }
.stat .stat-label a { font-weight: 600; }
a.stat { color: inherit; }
a.stat:hover { text-decoration: none; color: inherit; border-color: var(--ink); }
.stat-action { background: var(--ink); border-color: var(--ink); }
.stat.stat-action .stat-num { color: var(--on-fill); }
.stat.stat-action .stat-label,
.stat.stat-action > .stat-num + .stat-label { color: rgb(255 255 255 / 0.78); }
a.stat.stat-action:hover { border-color: var(--ink-soft); background: var(--ink-soft); }
.stat-cta { color: var(--teal); font-size: var(--fs-12); font-weight: 600; }
.stat.stat-action .stat-cta { color: var(--on-fill); text-decoration: underline; text-underline-offset: 3px; }

/* ── 표 ──
   행 44px, 머리는 옅은 회색에 작게(대문자 변환 없음). 카드 바로 안에 놓인 표는 카드 가장자리까지
   닿는다. 가격·점수·MOQ 는 자릿수 비교가 잦아 고정폭 숫자(H-1). */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: var(--fs-13); }
.table th, .table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle;
  line-height: 20px;
  color: var(--ink-soft);
}
.table td:first-child { color: var(--ink); }
/* 날짜·보조 칸 — .table td 의 글자색보다 뒤에서 이겨야 한다. 날짜는 줄을 바꾸지 않는다. */
.table td.muted { color: var(--muted); white-space: nowrap; }
.table thead th {
  background: var(--hover);
  color: var(--muted);
  font-size: var(--fs-12); font-weight: 600;
  padding-top: 9px; padding-bottom: 9px;
  white-space: nowrap;
  border-top: 1px solid var(--line);
}
.table tbody tr { transition: background var(--ease); }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr.is-pending { background: var(--hold-bg); }
.table tbody tr.is-pending td { color: var(--ink); }
.table tbody tr.is-unread td:not(.muted),
.table tbody tr.is-current td:not(.muted) { color: var(--ink); font-weight: 600; }
.card > .table,
.card > .table-wrap {
  width: calc(100% + 2 * var(--card-pad));
  max-width: none;
  margin-left: calc(-1 * var(--card-pad));
  margin-right: calc(-1 * var(--card-pad));
}
.card > .table th:first-child, .card > .table td:first-child,
.card > .table-wrap .table th:first-child, .card > .table-wrap .table td:first-child { padding-left: var(--card-pad); }
.card > .table th:last-child, .card > .table td:last-child,
.card > .table-wrap .table th:last-child, .card > .table-wrap .table td:last-child { padding-right: var(--card-pad); }
.card > .table:first-child, .card > .table-wrap:first-child { margin-top: calc(-1 * var(--card-pad)); }
.card > .table:first-child thead th, .card > .table-wrap:first-child thead th { border-top: 0; }
.card > .table:first-child thead th:first-child, .card > .table-wrap:first-child thead th:first-child { border-top-left-radius: calc(var(--r-md) - 1px); }
.card > .table:first-child thead th:last-child, .card > .table-wrap:first-child thead th:last-child { border-top-right-radius: calc(var(--r-md) - 1px); }
.card > .table, .card > .table-wrap { margin-bottom: 16px; }
.card > .table:last-child, .card > .table-wrap:last-child { margin-bottom: calc(-1 * var(--card-pad)); }
.card > .table:last-child tbody tr:last-child td, .card > .table-wrap:last-child tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.th-sortable { white-space: nowrap; }
.th-sort-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: inherit; font-weight: inherit;
  transition: color var(--ease);
}
.th-sort-link:hover { color: var(--ink); text-decoration: none; }
.th-sort-link.active { color: var(--ink); font-weight: 700; }
.th-sort-link .sort-icon { font-size: 10px; opacity: 0.45; }
.th-sort-link.active .sort-icon { opacity: 1; color: var(--ink); }
.col-narrow { width: 64px; }
.col-type { width: 120px; }
.col-date { width: 150px; white-space: nowrap; }
.partner-table td[data-label="사업자번호"] { white-space: nowrap; }
.col-actions { min-width: 140px; }
.col-review { width: 280px; }
.cell-empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.cell-empty .icon { color: var(--faint); margin-right: 6px; }

/* ── 상태 태그 ──
   무신사의 '쿠폰'·'단독' 태그처럼 반경 2 의 사각 태그, 점 없음. STATUS_BADGE(app/templating.py)가 상태를
   색에 대응시킨다. 배경/글자 조합은 서로 겹치면 안 된다(tests/test_ui_styles.py 가 대조한다). */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: var(--font-size-badge); font-weight: 600; line-height: 1;
  white-space: nowrap; vertical-align: middle;
}
.badge-gray { background: var(--line); color: var(--muted); }
.badge-blue { background: var(--info-bg); color: var(--info-fg); }
.badge-green { background: var(--ok-bg); color: var(--ok-fg); }
.badge-amber { background: var(--hold-bg); color: var(--hold-fg); }
.badge-red { background: var(--bad-bg); color: var(--bad-fg); }
/* 보라 — MD 심사 대기. AI 심사 대기(파랑)의 다음 단계. */
.badge-purple { background: var(--wait-bg); color: var(--wait-fg); }
/* 최종승인만 '채운' 검정을 받는다. 파이프라인의 종착점이라 목록에서 가장 강하게 읽혀야 한다. */
.badge-teal { background: var(--teal-soft); color: var(--teal-ink); }

/* ── 알림(플래시) ──
   마크업은 `<div class="flash flash-ok|err">문구</div>` 로 고정이라(테스트 계약) 아이콘은
   가상 요소 + 마스크로 그린다. 마스크 이미지는 data: URI 라 CSP img-src 안이다.
   성공은 무신사 스낵바색 띠에 흰 글, 오류는 읽어야 하므로 옅은 빨강 상자. */
.flash {
  position: relative;
  margin-bottom: 16px;
  padding: 12px 16px 12px 42px;
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--ink-soft);
  font-size: var(--fs-14); font-weight: 500; line-height: 1.5;
}
.flash::before {
  content: "";
  position: absolute; left: 15px; top: 14px;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flash-ok { background: var(--snack); color: var(--on-fill); }
.flash-ok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.flash-err { background: var(--bad-bg); color: var(--bad-fg); box-shadow: inset 0 0 0 1px var(--bad-line); white-space: pre-line; }
.flash-err::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
.flash strong { font-weight: 700; }
.flash ul { margin: 6px 0 0; padding-left: 18px; }
.flash-list { margin: 8px 0 0 18px; padding: 0; white-space: normal; }
.flash-note { margin: 8px 0 0; white-space: normal; }

/* 안내 상자 — 시스템이 지목한 정보(승인 대기·MD 요청사항·데모 계정). 무신사의 '쿠폰 받기' 상자. */
.notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--signal-tint);
  border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.6;
}
.notice strong { color: var(--signal-ink); font-weight: 700; }

/* ── 폼 ──
   라벨은 위, 입력칸 높이 40, 경계 3:1 회색. 포커스는 검정 2px(무신사), 오류 표시는 사용자가 손댄
   뒤에만(:user-invalid — 가이드 validate-input-after-interaction). 최종 판정은 서버. */
form .field { margin-bottom: 16px; }
form label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
form label .req, .req { color: var(--alert); }
.field > small, .field-help { display: block; margin-top: 6px; color: var(--faint); font-size: var(--fs-12); }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
/* 묶음 안의 체크박스·라디오 라벨(입력을 감싼 라벨)만 — 같은 fieldset 의 텍스트 칸 라벨은 위 form label 그대로
   (P8b 독립 검수 디자인 4: 광고 폼 칸 라벨이 굵기 400·회색·간격 8 로 다른 폼과 달랐다). 조건은 :where 안에 넣어
   우선순위를 예전 `fieldset label`(0,0,2) 그대로 둔다 — 칩(.chip)·선택지(.ad-place) 같은 클래스 규칙이 계속 이긴다. */
fieldset label:where(:has(> input[type=checkbox]), :has(> input[type=radio])) { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=tel], input[type=url], input:not([type]), select, textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: var(--fs-14); line-height: 20px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
/* 셀렉트 화살표 — 아래 셰브런(data: URI, CSP img-src 안). */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
/* 금액·MOQ·점수 입력은 자릿수를 눈으로 세는 값이라 고정폭 숫자로 (H-1) */
input[type=number], input[type=date] { font-variant-numeric: tabular-nums; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
input:disabled, select:disabled, textarea:disabled { background: var(--raised); color: var(--muted); border-color: var(--line-mid); }
input[type=file] { width: 100%; font-family: inherit; font-size: var(--fs-13); color: var(--muted); }
input[type=file]::file-selector-button {
  height: 34px; margin-right: 10px; padding: 0 14px;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--ink); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: var(--fs-13); color: var(--ink-soft); }
.checks-block { margin-bottom: 12px; }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
details > summary { cursor: pointer; }
.form-section-title { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ── 버튼 ──
   주요 = 검정 채움(무신사 '구매하기'), 보조 = 흰 면 + 회색 테두리('장바구니'). 높이 40(작은 것 32·큰 것 48). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  background: var(--ink); color: var(--on-fill);
  font-family: inherit; font-size: var(--fs-14); font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--on-fill); text-decoration: none; }
.btn .icon { margin-left: -2px; }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line-mid); }
.btn-secondary:hover { background: var(--card); color: var(--ink); border-color: var(--ink); }
.btn-danger { background: var(--card); color: var(--bad-fg); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-fg); }
.btn-good { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.btn-good:hover { background: var(--ok-line); color: var(--ok-fg); border-color: var(--ok-fg); }
.btn-amber { background: var(--hold-bg); color: var(--hold-fg); border-color: var(--hold-line); }
.btn-amber:hover { background: var(--hold-line); color: var(--hold-fg); border-color: var(--hold-fg); }
.btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-13); }
.btn-lg { height: 48px; padding: 0 24px; font-size: var(--fs-16); }
.btn-block { width: 100%; height: 48px; font-size: var(--fs-16); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.btn-row form { margin: 0; }
.btn-row.is-tight { margin-top: 0; }

.muted { color: var(--muted); }
.text-good { color: var(--good); } .text-bad { color: var(--bad); }
.pre-line { white-space: pre-line; }
.pre-wrap { white-space: pre-wrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.help-text { margin: 0; font-size: var(--fs-13); line-height: 1.7; }

/* ── AI 심사 판정 ─────────────────────────────────────────────────────
   이 앱이 존재하는 이유가 이 블록이다. 막대는 검정(무신사의 평점 막대), 링의 색은 판정. */
.score-row { display: grid; grid-template-columns: 112px 1fr 76px; align-items: center; gap: 12px; margin: 8px 0; }
.score-label { font-size: var(--fs-13); color: var(--ink-soft); }
.score-track { background: var(--line); height: 6px; border-radius: var(--r-pill); overflow: hidden; }
.score-fill { background: var(--ink); height: 100%; border-radius: var(--r-pill); }
.score-value { font-size: var(--fs-12); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* 총점 링 — 호는 점수, 색은 판정. `--score` 는 매크로가 인라인으로 넘긴다(_macros.html). */
.total-score {
  --score: 0;
  --ring: var(--ink);
  position: relative;
  width: 112px; height: 112px; min-width: 112px;
  border-radius: var(--radius-round);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--ring) calc(var(--score) * 1%), var(--line) 0);
}
.total-score::after {
  content: ""; position: absolute; inset: 7px;
  border-radius: var(--radius-round); background: var(--card);
}
/* 두 규칙을 `.total-score strong, .total-score span` 으로 합치지 않는다 —
   합치면 그 선택자가 `.total-score span` 의 첫 매치가 되어, 뱃지 크기 토큰을 확인하는
   테스트가 엉뚱한 규칙 본문을 읽는다(tests/test_ui_styles.py). */
.total-score strong {
  position: relative; z-index: 1;
  font-size: var(--fs-28); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.total-score span {
  position: relative; z-index: 1;
  font-size: var(--font-size-badge); color: var(--faint);
  margin-top: 2px;
}
.total-score.muted strong { color: var(--faint); }
.score-good { --ring: var(--ok-fg); }
.score-mid { --ring: var(--hold-fg); }
.score-bad { --ring: var(--bad-fg); }

.analysis-head {
  display: flex; gap: 24px; align-items: center;
  background: var(--raised);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 16px;
}
.analysis-head > div:last-child { flex: 1; min-width: 0; }
.analysis-head .total-score::after { background: var(--raised); }
.analysis-head h2 { margin: 0; }
.analysis-result { margin: 0 0 8px; font-size: var(--fs-16); font-weight: 700; color: var(--ink); }

.reason-list { margin: 6px 0 12px; padding-left: 18px; }
.reason-list li { margin: 4px 0; color: var(--ink-soft); }
.reason-list li::marker { color: var(--faint); }
.reason-list.risk li { color: var(--bad-fg); }
.reason-list.rec li { color: var(--hold-fg); }

.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 20px; margin: 12px 0 16px; }
.kv-grid > div { min-width: 0; }
.kv-grid dt, .kv-grid dd { margin: 0; }
.kv-k { display: block; font-size: var(--fs-12); color: var(--faint); }
.kv-v { display: block; margin-top: 2px; font-weight: 500; font-size: var(--fs-14); font-variant-numeric: tabular-nums; color: var(--ink); }

.compare-table { font-variant-numeric: tabular-nums; }
.compare-table td:first-child { color: var(--muted); font-size: var(--fs-12); width: 160px; }

/* ── 로그인·가입 ──
   무신사 로그인처럼 가운데 기둥에 평평한 폼(카드 테두리 없음), 검정 전폭 버튼. */
.auth-box { max-width: 440px; margin: 56px auto 32px; }
.auth-box.wide { max-width: 760px; }
.auth-box .card { padding: 0; border: 0; border-radius: 0; background: none; }
.auth-box > h1 { text-align: center; }
.auth-title { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; }
.auth-title .logo-big {
  display: block; margin: 0;
  font-size: var(--fs-28); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15;
  color: var(--ink);
}
.auth-title .sub { display: block; color: var(--muted); font-size: var(--fs-14); margin-top: 10px; }
.auth-alt { text-align: center; margin: 20px 0 0; font-size: var(--fs-13); }
.auth-alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.auth-alt a:hover { color: var(--ink); }
.auth-box .card + .notice { margin-top: 24px; }
.choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.auth-box .choice-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.auth-box .choice-card:hover { border-color: var(--ink); }
.choice-card h2 { margin: 10px 0 2px; font-size: var(--fs-18); }
.choice-card p { color: var(--muted); font-size: var(--fs-14); margin-bottom: 14px; }
.choice-icon {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--raised); color: var(--ink);
}
/* ── 역할 카드(통합 홈의 시연 입구·일반 모드 파트별 입구, home/_entry*.html·demo/_role_cards.html) ──
   무신사 모바일의 스토어 카드(MUSINSA ›, BEAUTY ›)처럼 큰 라틴 이름 + 한국어 부제. 흰 패널(1px 선·반경 8)이고
   지금 보는 역할은 검정 테두리 2px. 카드 전체가 같은 높이로 서고 버튼이 바닥에 맞춰지도록 설명이 남는 높이를
   먹는다. 카드 자체는 누르는 곳이 아니라서(버튼만 누른다) 마우스를 올려도 테두리가 바뀌지 않는다. */
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.role-card {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.role-card.is-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.role-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.role-card-title { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; font-size: var(--fs-28); font-weight: 900; letter-spacing: -0.03em; }
.role-card-title small { color: var(--muted); font-size: var(--fs-14); font-weight: 500; letter-spacing: 0; }
.role-card-desc { flex: 1; margin: 0; color: var(--ink-soft); font-size: var(--fs-14); line-height: 1.6; }
.role-card-account {
  display: flex; align-items: center; gap: 6px; margin: 0;
  color: var(--faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.role-card form { margin: 6px 0 0; }

/* 오류 화면 — 무신사 404 처럼 가운데 정렬, 평평하게. */
.error-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.error-card h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; margin: 14px 0 2px; font-variant-numeric: tabular-nums; }
.error-card p:first-of-type { font-size: var(--fs-16); font-weight: 700; color: var(--ink); }

/* ── 탭 — 밑줄 탭(무신사 카테고리 탭). 지금 탭 = 검정 굵게 + 검정 밑줄 2px. ── */
.tabs {
  display: flex; gap: 24px;
  margin-bottom: 20px;
  box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative; flex: none;
  display: inline-flex; align-items: center;
  height: 44px;
  color: var(--muted); font-size: var(--fs-14); font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--ink); font-weight: 700; }
.tabs a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }

/* 필터 줄 — 카드 안에 놓이므로 자체 테두리를 두지 않는다(이중 테두리 방지). */
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-bar .field { margin: 0; min-width: 160px; flex: 1 1 180px; max-width: 320px; }
.filter-bar .checks { min-height: 40px; align-items: center; }
.filter-actions { display: flex; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.card > .filter-bar + .btn-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── 눌러서 펼치는 집계표 (관리자 대시보드) ──
   셀 전체를 링크로 채운다. 표에서 사람이 겨냥하는 것은 글자가 아니라 행이다. */
.table-linked tbody tr { cursor: pointer; }
.table-linked td { padding: 0; }
.table-linked td a {
  display: block; padding: 11px 12px;
  color: inherit; text-decoration: none;
}
.card > .table.table-linked td { padding: 0; }
.card > .table-linked td:first-child a { padding-left: var(--card-pad); }
.table-linked td a:hover { text-decoration: none; }
.table-linked tbody tr:hover { background: var(--hover); }
/* 펼쳐진 행 — 메뉴의 활성 항목과 같은 언어(회색 면 + 왼쪽 검정 막대). */
.table-linked tbody tr.is-selected { background: var(--raised); }
.table-linked tbody tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--ink); }
.table-linked tbody tr.is-selected td a { color: var(--ink); font-weight: 700; }
.preview-hint { font-size: var(--fs-12); margin: 12px 0 0; }

/* ── AI 점수 칩 ──
   목록에서 점수 하나로 훑기 위한 색. 폭을 고정해 두 자리·세 자리 점수가 섞여도 열이 흔들리지 않는다. */
.score-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 22px; padding: 0 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  font-size: var(--fs-12); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--raised); color: var(--ink-soft);
}
.score-chip.is-good { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.score-chip.is-mid { background: var(--hold-bg); color: var(--hold-fg); border-color: var(--hold-line); }
.score-chip.is-bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-line); }
/* 수동검토 — AI 가 채점하지 못한 칸. 보류(노랑)와 다른 색이어야 한다. */
.score-chip.is-manual { background: var(--manual-bg); color: var(--manual-fg); border-color: var(--manual-line); }
/* 심사 전 — 아직 아무 일도 없었다는 뜻이라 가장 조용해야 한다. 점선은 '채워질 자리'. */
.score-chip.is-none {
  background: transparent; color: var(--faint);
  border-style: dashed; border-color: var(--line-strong);
  font-weight: 500;
}

/* 펼친 목록의 높이를 묶는다 — 상태마다 0~20행으로 달라지는데 카드가 늘었다 줄었다 하면
   다른 상태를 눌러 볼 때마다 화면이 출렁인다. 안쪽 스크롤이면 카드 자리가 같다. */
.drill-body {
  min-height: 220px;
  max-height: 440px;
  overflow-y: auto;
  margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
  border-top: 1px solid var(--line);
}
.drill-body > .table thead th { border-top: 0; }
.drill-body > .table th:first-child, .drill-body > .table td:first-child { padding-left: var(--card-pad); }
.drill-body > .empty-state, .drill-body > p { padding-left: var(--card-pad); padding-right: var(--card-pad); }
/* 안쪽 스크롤에서는 표 머리가 붙어 있어야 어느 열인지 놓치지 않는다. */
.drill-body .table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--hover);
}
.drill-body > p.muted { margin: 12px 0; font-size: var(--fs-12); }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-title > h2, .section-title > h3 { margin: 0; }
.card > .section-title:first-child { margin-bottom: 4px; }
.thumb { width: 52px; height: 52px; border-radius: var(--r-xs); object-fit: cover; background: var(--raised); }
.diff-add { background: var(--ok-bg); color: var(--ok-fg); border-radius: var(--r-xs); padding: 0 4px; }
.diff-del { background: var(--bad-bg); color: var(--bad-fg); text-decoration: line-through; }

/* 목록 페이지 이동 (B-10) — 지금 쪽만 검정 사각. */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 20px;
  font-size: var(--fs-13);
}
.pager-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pager-links a, .pager-links strong {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: var(--fs-13);
}
.pager-links a { color: var(--muted); font-weight: 500; }
.pager-links a:hover { background: var(--raised); color: var(--ink); text-decoration: none; }
.pager-links strong { background: var(--ink); color: var(--on-fill); font-weight: 700; }

/* ── 빈 상태 — 굵은 한 줄 + (있으면) 작은 테두리 버튼. 무신사 '장바구니에 담은 상품이 없습니다'. ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 16px;
  text-align: center;
}
.empty-state.is-compact { padding: 24px 12px; gap: 10px; }
.empty-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--raised);
  color: var(--faint);
}
.empty-text { margin: 0; max-width: 440px; color: var(--ink); font-size: var(--fs-14); font-weight: 600; line-height: 1.6; }
.empty-text a { font-weight: 600; }

/* ── 화면별 소품 ── */
.temp-password {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised);
  font-family: var(--font-mono); font-size: 20px; letter-spacing: 1px;
  user-select: all; word-break: break-all;
}
.inline-form { display: inline; }
.inline-details { display: inline-block; }
.inline-details > summary { font-size: var(--fs-13); }
.correction-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.correction-form select, .correction-form input { width: auto; min-width: 140px; height: 32px; font-size: var(--fs-13); }
.brand-item {
  margin-bottom: 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card);
}
.brand-item[open] { background: var(--hover); }
.brand-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.brand-item > form { margin-top: 12px; }
.product-card h2 { margin: 4px 0 6px; font-size: var(--fs-16); }
.product-card p { margin: 0 0 4px; font-size: var(--fs-13); }
.product-meta { color: var(--muted); font-size: var(--fs-12); }
.reco-grid > article { display: flex; flex-direction: column; gap: 2px; }
.reco-grid > article h3 { margin: 4px 0 6px; font-size: var(--fs-16); }
.reco-grid > article p { margin: 0 0 4px; font-size: var(--fs-13); }
.reco-grid > article > a:last-child { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: var(--fs-13); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 500; color: var(--muted); margin-bottom: 12px; }
.back-link:hover { color: var(--ink); text-decoration: none; }
.notif-message { font-weight: 400; margin-top: 2px; }
.card-alert { border-color: var(--bad-line); box-shadow: inset 3px 0 0 var(--bad-fg); }
.card-alert h2 { color: var(--bad-fg); }
.pref-summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.pref-summary::-webkit-details-marker { display: none; }
/* 펼침 표시 — flex 로 바꾸면 기본 삼각형이 사라지므로 셰브런을 직접 그린다. */
.pref-summary::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--ease);
}
details[open] > .pref-summary::before { transform: rotate(90deg); }
.pref-summary + p { margin-top: 10px; }
.section-heading { display: flex; align-items: center; gap: 8px; }
.section-heading .icon { color: var(--ink); }
.table-caption { margin: 10px 0 0; }
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }

/* ── 모바일·태블릿 (≤ 900px) ───────────────────────────────────────────
   콘솔: 상단 바(52px, 붙음) 왼쪽 버거 → 바 아래를 덮는 흰 서랍(메뉴 + 계정).
   스토어: 상단 바는 흘러가고 GNB 만 붙는다(무신사 모바일). 바이어의 계정 링크는 버거 서랍.
   id·클래스 계약(#sidebar #burgerBtn #sidebarBody .is-open body.menu-open)은 js/nav.js 가 쓴다. */
@media (max-width: 900px) {
  :root { --topbar-h: 52px; --card-pad: 16px; }

  .topbar { gap: 10px; padding: 0 12px; }
  .wordmark { font-size: 20px; }
  .topbar-zone { padding-left: 10px; font-size: var(--fs-13); }
  .sidebar-collapse { display: none; }
  .topbar-user .user-meta { display: none; }

  .burger-btn {
    flex: none;
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 36px; height: 36px; padding: 0 8px;
    background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
  }
  .burger-btn:hover { background: rgb(255 255 255 / 0.1); }
  .burger-bar {
    display: block; width: 100%; height: 1.5px;
    background: var(--on-fill); border-radius: 1px;
    transition: transform var(--ease), opacity var(--ease);
    transform-origin: center;
  }
  /* 버거 → X (막대 3개의 순서가 전제) */
  .burger-btn[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .burger-btn[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
  .burger-btn[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  body.menu-open { overflow: hidden; }

  /* 콘솔 — 메뉴는 서랍으로 */
  .app--console { display: block; }
  .sidebar { width: auto; height: 0; flex: none; border: 0; }
  .sidebar .sidebar-body {
    display: none;
    position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
    height: auto; padding: 12px 12px 24px;
    background: var(--card);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    z-index: 99;
  }
  .sidebar.is-open .sidebar-body { display: flex; }
  .sidebar .sidebar-nav a, .sidebar .sidebar-foot a, .sidebar .linkbtn { height: 44px; font-size: var(--fs-16); }

  /* 스토어 — 상단 바는 흘러가고 GNB 가 맨 위에 붙는다. 바이어 계정 링크는 서랍. */
  .store .topbar { position: relative; padding: 0 var(--gutter); }
  .store .burger-btn { margin-left: auto; margin-right: -8px; }
  .store-gnb { top: 0; gap: 22px; height: 46px; }
  .store-gnb a { font-size: 15px; }
  .store .sidebar-body {
    display: none;
    position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
    margin: 0; padding: 12px var(--gutter) 24px;
    background: var(--card);
    overflow-y: auto;
    z-index: 99;
  }
  .store.is-open .sidebar-body { display: block; }
  /* 서랍(흰 바탕) 안에서만 글자색을 뒤집는다 — 바 위의 공개 유틸(.store-utils)은 그대로 흰 글자. */
  .store .sidebar-foot { flex-direction: column; align-items: stretch; gap: 2px; }
  .store .sidebar-foot .user-chip { order: -1; padding: 8px 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  .store .sidebar-foot .avatar { background: var(--ink); color: var(--on-fill); width: 36px; height: 36px; font-size: var(--fs-14); }
  .store .sidebar-foot .user-meta b { color: var(--ink); font-size: var(--fs-16); }
  .store .sidebar-foot .user-meta small { color: var(--muted); font-size: var(--fs-12); }
  .store .sidebar-foot .util { height: 48px; gap: 10px; color: var(--ink-soft); font-size: var(--fs-16); }
  .store .sidebar-foot .util:hover { color: var(--ink); }
  .store .sidebar-foot .util .icon { color: var(--faint); }
  .store-search { padding: 0 var(--gutter) 10px; }
  /* iOS 는 16px 미만 입력칸을 누르면 화면을 확대한다(가이드 forms 5) */
  .store-search .store-search-input { font-size: var(--fs-16); }
  .util-btn { height: 28px; }

  .app--console .container { padding: 16px 16px 40px; }
  .app--store .container { padding: 20px var(--gutter) 48px; }
  .footer { padding: 16px 16px 24px; }

  .page-header { margin-bottom: 16px; align-items: flex-start; }
  .page-heading { flex-basis: 100%; }
  .page-title { font-size: 20px; }
  .page-actions { width: 100%; }

  .card { overflow-wrap: break-word; }

  /* 긴 텍스트 줄바꿈 보장 */
  p, li, dd, dt, h1, h2, h3, h4, span, a, label, td, th { overflow-wrap: break-word; }
  code, pre { word-break: break-all; overflow-wrap: anywhere; white-space: pre-wrap; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 14px; }
  .stat .stat-num { font-size: var(--fs-22); }

  .analysis-head { flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
  .analysis-head > div:last-child { width: 100%; }
  .analysis-head .section-title { flex-direction: column; align-items: flex-start; gap: 8px; }

  .score-row { grid-template-columns: 84px 1fr 64px; gap: 8px; }
  .score-label { font-size: var(--fs-12); white-space: nowrap; }
  .score-value { white-space: nowrap; }

  /* 표는 카드 안에서 가로로 스크롤한다(행을 부수지 않는다). */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table td:first-child { min-width: 8em; }
  .compare-table td:first-child { width: auto; min-width: 90px; white-space: nowrap; }

  .kv-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 14px; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  /* 세로로 쌓이면 flex 기준값(180px)·grow 가 높이에 걸린다 — 내용 높이로 되돌린다. */
  .filter-bar .field { flex: 0 0 auto; min-width: 100%; max-width: none; }
  .filter-actions .btn { flex: 1; }

  /* 입력칸 글자 16px — iOS 확대 방지, 손가락 높이 44 */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
  input[type=search], input[type=tel], input[type=url], input:not([type]), select, textarea { font-size: var(--fs-16); height: 44px; }
  textarea { height: auto; }

  .auth-box { margin: 32px auto; }
  .role-card { padding: 20px; }
  .role-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .field-row { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 auto; }
  .tabs { gap: 20px; }
}

/* 움직임 줄이기 — 전역 0.01ms 강제 대신(가이드 motion: 더 거슬리게 만들 수 있다) 움직이는 것만 끈다. */
@media (prefers-reduced-motion: reduce) {
  .burger-bar, .pref-summary::before, .sidebar { transition: none; }
  .skeleton-pulse { animation: none; }
  .product-modal-backdrop, .product-modal-dialog { transition: none; }
}

/* ── 상품 요약 팝업 (product_brief_modal.js) ── */
.product-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
.product-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.product-modal-dialog {
  background: var(--card);
  color: var(--ink);
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 0.18s ease-out;
}
.product-modal-backdrop.open .product-modal-dialog { transform: translateY(0); }
.product-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 10;
}
.modal-header-info { flex: 1; min-width: 0; }
.modal-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.modal-product-title {
  font-size: var(--fs-18);
  font-weight: 700;
  margin: 0 0 2px;
  letter-spacing: var(--tracking-head);
  line-height: 1.3;
  color: var(--ink);
}
.modal-sub-info { font-size: var(--fs-13); color: var(--muted); }
.btn-modal-close {
  background: none;
  border: none;
  width: 32px; height: 32px;
  font-size: var(--fs-22);
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color var(--ease), background var(--ease);
}
.btn-modal-close:hover { color: var(--ink); background: var(--raised); }
.product-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--raised);
  color: var(--ink);
}
.product-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
}
.btn-modal-action { font-weight: 700; }

.brief-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
}
.brief-section-title {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.brief-section-title .icon { font-size: 15px; }

.brief-score-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
.score-summary-box {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 8px;
  border-right: 1px solid var(--line);
}
.total-score-card {
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 4px solid var(--line);
  margin-bottom: 8px;
  background: var(--card);
  color: var(--ink);
}
.total-score-card.score-good { border-color: var(--ok-fg); color: var(--ok-fg); }
.total-score-card.score-bad { border-color: var(--bad-fg); color: var(--bad-fg); }
.total-score-card.score-mid { border-color: var(--hold-fg); color: var(--hold-fg); }
.total-score-number { font-size: var(--fs-28); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.total-score-max { font-size: var(--font-size-badge); color: var(--muted); }
.score-verdict-tag { font-size: var(--fs-14); margin-bottom: 4px; }
.score-verdict-tag.score-good { color: var(--ok-fg); }
.score-verdict-tag.score-bad { color: var(--bad-fg); }
.score-verdict-tag.score-mid { color: var(--hold-fg); }
.score-threshold-info { font-size: var(--fs-12); line-height: 1.4; color: var(--muted); }
.score-quick-reasons {
  margin-top: 12px; width: 100%;
  text-align: left; font-size: var(--fs-12);
  background: var(--raised);
  padding: 8px 12px;
  border-radius: var(--r-sm);
}
.score-quick-reasons strong { display: block; margin-bottom: 4px; color: var(--ink-soft); }
.score-quick-reasons ul { margin: 0; padding-left: 14px; }
.score-quick-reasons li { margin: 2px 0; color: var(--muted); }
.hexagon-chart-box { display: flex; justify-content: center; align-items: center; padding: 4px; }
.radar-chart-wrapper { position: relative; display: flex; justify-content: center; }
.radar-chart-svg { max-width: 100%; height: auto; overflow: visible; }
.radar-label { font-family: var(--font-ko); font-size: var(--fs-12); }
.radar-label-title { fill: var(--ink-soft); }
.radar-label-score { fill: var(--teal); }

.price-highlight-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  margin-bottom: 12px;
}
.banner-good { background: var(--ok-bg); color: var(--ok-fg); }
.banner-bad { background: var(--bad-bg); color: var(--bad-fg); }
.banner-icon { font-weight: 700; }
.price-margin-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sub-title { font-size: var(--fs-13); font-weight: 700; color: var(--ink-soft); margin: 0 0 8px; }
.price-kv-rows { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.p-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-13);
}
.p-row:last-child { border-bottom: none; }
.p-row.highlight-row { background: var(--indigo); }
.p-label { color: var(--muted); }
.p-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.text-brand { color: var(--teal); font-size: var(--fs-14); }
.kpi-boxes-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kpi-tile { border-radius: var(--r-sm); padding: 8px 12px; border: 1px solid var(--line); }
.kpi-tile.kpi-good { background: var(--ok-bg); border-color: var(--ok-line); }
.kpi-tile.kpi-good .kpi-value { color: var(--ok-fg); }
.kpi-tile.kpi-bad { background: var(--bad-bg); border-color: var(--bad-line); }
.kpi-tile.kpi-bad .kpi-value { color: var(--bad-fg); }
.kpi-tile.kpi-neutral { background: var(--raised); border-color: var(--line); }
.kpi-tile.kpi-neutral .kpi-value { color: var(--ink); }
.kpi-title { font-size: var(--fs-12); color: var(--ink-soft); font-weight: 600; }
.kpi-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0; }
.kpi-desc { font-size: var(--font-size-badge); color: var(--muted); }
.market-stat-cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.stat-card { background: var(--raised); border-radius: var(--r-sm); padding: 8px; text-align: center; }
.stat-icon { font-size: 17px; margin-bottom: 2px; }
.stat-title { font-size: var(--fs-12); color: var(--muted); font-weight: 500; }
.stat-number { font-size: var(--fs-16); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.market-keywords-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--fs-13); margin-bottom: 8px; }
.kw-label { font-weight: 700; color: var(--ink-soft); }
.market-summary-quote {
  background: var(--raised);
  border-left: 2px solid var(--ink);
  padding: 8px 12px;
  font-size: var(--fs-13);
  color: var(--ink-soft);
}
.quote-mark { font-size: var(--fs-16); color: var(--ink); font-weight: 700; }
.export-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.export-info-block { display: flex; flex-direction: column; gap: 8px; }
.export-kv { display: flex; flex-direction: column; gap: 2px; }
.ek-label { font-size: var(--fs-12); color: var(--muted); font-weight: 500; }
.ek-val { font-size: var(--fs-13); color: var(--ink); }
.export-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.skeleton-pulse {
  background: linear-gradient(90deg, var(--raised) 25%, var(--hover) 50%, var(--raised) 75%);
  background-size: 200% 100%;
  border-radius: var(--r-md);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row { margin-bottom: 12px; }
.muted-box {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  background: var(--raised);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
}
.modal-error-box { padding: 24px; text-align: center; }

@media (max-width: 768px) {
  .brief-score-layout,
  .price-margin-split-grid,
  .export-grid-layout { grid-template-columns: 1fr; }
  .score-summary-box { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .market-stat-cards-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── 파트너 심사 — 휴대폰에서도 가로 스크롤 없이 결정 버튼이 보이게 ── */
.partner-name { overflow-wrap: anywhere; }
.company-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.company-actions form { margin: 0; }
.company-actions .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; }
.partner-review-cell .company-actions { margin-top: 0; }
.partner-review-cell .company-actions > * { flex-shrink: 0; }
.partner-review-cell .company-reject:not([open]) { flex: 0 0 auto; }
.partner-review-cell .company-reject[open] { flex-basis: 100%; width: 100%; }
.company-reject { min-width: 0; flex: 1; }
.company-reject summary { list-style: none; cursor: pointer; }
.company-reject summary::-webkit-details-marker { display: none; }
.company-reject-form { display: grid; gap: 8px; padding-top: 8px; }
.company-reject-form label { margin: 0; }
.company-reject-form textarea { width: 100%; min-width: 0; }
.company-reject-form .btn { justify-self: start; }
/* 상세 화면(P8b): 승인(주요) · 반려(접힌 보조) 한 줄, 펼친 반려는 아래 한 줄을 다 쓴다. */
.company-actions[data-layout="detail"] { align-items: flex-start; gap: 8px; }
.company-actions[data-layout="detail"] .company-reject { flex: 0 0 auto; }
.company-actions[data-layout="detail"] .company-reject[open] { flex-basis: 100%; }
.company-actions[data-layout="detail"] .company-reject-form { max-width: 640px; }
.company-detail .kv-grid > div { min-width: 0; }
.company-detail .kv-v { margin-left: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .partner-table, .partner-table tbody { display: block; width: 100%; }
  .card > .partner-table { width: 100%; margin: 0; }
  .partner-table { overflow: visible; }
  .partner-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .partner-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
  .partner-table tbody td { min-width: 0; padding: 8px; border: 0; overflow-wrap: anywhere; }
  .card > .partner-table td:first-child { padding-left: 8px; }
  .card > .partner-table td:last-child { padding-right: 8px; }
  .partner-table td::before { content: attr(data-label); display: block; font-size: var(--font-size-badge); color: var(--muted); margin-bottom: 4px; }
  .partner-table td:first-child { grid-column: 1 / -1; }
  .partner-table .partner-review-cell { grid-column: 1 / -1; grid-row: 2; }
  .partner-table td:first-child::before, .partner-table .partner-review-cell::before { display: none; }
  .partner-review-cell > .btn, .company-actions .btn { min-height: 44px; min-width: 64px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v2 패키지 구역 (설계 docs/superpowers/specs/2026-10-08-customer-req-v2-design.md 8.3-3)
   · 각 패키지는 **자기 구역 표식 사이에서만** 고친다. 위쪽 공용 규칙(:root·body·공용 900px 블록)은
     손대지 않는다.
   · 새 토큰(`--이름:`)을 만들지 않는다 — 위 :root 토큰만 쓴다(무신사식 디자인 시스템 2·9절).
   · 구역마다 자기 `@media (max-width: 900px)` 블록을 둔다(390px 가로 넘침 금지).
   · 표식 문구·순서는 tests/test_v2_contract_p0_1.py 가 고정한다.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ [P0 공용] 시작 ══ */
/* 무신사식 공용 상거래 부품 — 홈(P1)·바이어 탐색(P4)·구매 신청(P5)이 쓴다.
   마크업은 app/templates/_catalog.html(ptile·cert_chips·ad_banner)과 설계서 6절의 마크업 조각.
   사진 실패 자리표시는 js/media.js, 두 번 제출 막기는 js/confirm.js.
   · 상품 타일(.ptile): 정사각 사진(테두리·반경·그림자 없음) + 브랜드(굵게)·상품명(두 줄)·용량·인증 태그.
   · 격자(.ptile-grid): 6·5·4열, 900px 이하 3열. **열 간격 0** — 사진끼리 맞닿는다(무신사 카테고리).
     줄(.ptile-row): 랭킹·광고 줄처럼 한 줄로 흐르는 목록 — 섹션 안에서만 가로 스냅 스크롤.
   · 광고 배너(.ad-banner): 넓은 자리 = 회색 띠(글 왼쪽·사진 오른쪽), 좁은 자리(<600px) = 포스터
     (사진이 전체를 덮고 흰 굵은 글). 하우스 배너(사진 없음) = 검정 면 흰 글. 컨테이너 쿼리.
   · 진열대 머리·캐러셀·칩·정렬 줄·브랜드 줄·상품 상세·장바구니·완료 화면(설계서 6절 표). */

/* 화면 읽기 프로그램에만 들리는 글자(예: 순위 숫자 앞의 '순위') */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 잠긴 버튼 — data-submit-once 제출 중, 신청할 수 없는 상태 등 */
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
form[aria-busy="true"] .btn:disabled { cursor: progress; }

/* ── 상품 타일 ── */
.ptile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ptile-media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--raised);
}
.ptile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptile-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--raised); color: var(--line-strong);
  font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  user-select: none;
}
/* 순위·광고 표시는 사진 링크 밖에 있지만 사진 위에 겹친다. 누르면 아래 사진 링크로 간다.
   순위 = 사진 왼쪽 위 흰 사각 안 검정 숫자(무신사 랭킹). */
.ptile-rank {
  position: absolute; top: 8px; left: 8px;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--ink);
  font-size: var(--fs-12); font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ptile-ad {
  position: absolute; top: 8px; right: 8px;
  height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-xs);
  background: var(--card); color: var(--muted);
  font-size: var(--font-size-badge); font-weight: 600;
  pointer-events: none;
}
.ptile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 10px 0; }
.ptile-brand {
  margin: 0; color: var(--ink); font-size: var(--font-size-badge); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptile-name {
  margin: 0; color: var(--ink);
  font-size: var(--fs-13); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ptile-name a { color: inherit; }
.ptile-name a:hover { color: inherit; }
.ptile-meta { margin: 0; color: var(--faint); font-size: var(--fs-12); }
.ptile-actions { margin-top: auto; padding: 10px 10px 0; }
.ptile-actions form { margin: 0; }
.ptile-actions .btn { width: 100%; height: 32px; font-size: var(--fs-13); }

/* 인증 국가 태그 — 무신사 '쿠폰'(파랑)·'단독'(회색) 태그 문법. 고른 국가와 일치하면 파랑.
   늘 한 줄(P1b — 390 의 3열 타일에서 두 줄로 넘쳤다): 넓은 타일 3개 + '+N', 900px 이하 2개 + '+N'
   (`only-wide`·`only-narrow`, _catalog.html), 긴 국가명은 글자만 말줄임. '+N' 은 줄어들지 않는다.
   '기타 인증'(`is-other`)은 나라가 아니라서 바탕 없이 선만 — 국가 태그와 모양이 다르다. */
.cert-chips { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; margin: 6px 0 0; padding: 0; list-style: none; }
.cert-chip {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 1 auto; min-width: 0;
  height: 20px; padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--raised); color: var(--muted);
  font-size: var(--font-size-badge); font-weight: 600; white-space: nowrap;
}
.cert-chip .icon { flex: none; }
.cert-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-chip.is-match { background: var(--signal-tint); color: var(--signal-ink); }
.cert-chip.is-other { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cert-chip.is-more { flex: none; background: transparent; color: var(--faint); padding: 0 2px; }
.cert-chip.only-narrow { display: none; }

/* ── 타일 격자·줄 ── */
.ptile-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0; row-gap: 32px; }
.ptile-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / 6);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding-bottom: 12px;
}
.ptile-row > .ptile { scroll-snap-align: start; }
/* 광고 상품 줄(BUYER_SPOTLIGHT, 섹션에 `.shelf-ads`)은 일반 줄과 같은 타일 폭이다 — 바이어 홈의 4장이 한 화면
   25% 로 커서 바로 위 맞춤 추천(6열)과 한 화면에 타일 폭이 둘이었다(P8b 독립 검수 디자인 7). 자리 수(바이어 홈·빈
   장바구니 4개)는 그대로라 오른쪽 두 칸이 빈다 — 6개로 늘릴지는 고객 확인(BACKLOG V-6). */

/* 담은 타일로 돌아올 때(next=…#p-12) 고정 머리 띠 밑에 숨지 않게(P8a 검수 기능 11) */
.ptile[id] { scroll-margin-top: calc(var(--topbar-h) + var(--gnb-h) + 16px); }
/* 격자에 섞인 광고 타일(카탈로그 첫 페이지 맨 앞 칸) — 모양은 일반 타일과 같고 '광고' 표시만 다르다.
   사진 칸에 아주 옅은 선 하나로 일반 타일과 붙어 보이지 않게 한다. */
.ptile.is-ad .ptile-media { box-shadow: inset 0 0 0 1px var(--line); }

/* 스토어의 성공 안내 = 무신사 스낵바 — 화면 아래 가운데 떴다가 몇 초 뒤 사라진다. 담기처럼 누른 자리에
   머무는 흐름에서도 보인다(P8a 검수 기능 11). 오류(flash-err)는 읽고 고쳐야 하므로 제자리에 남는다.
   마우스를 올리면 멈춘다. 마크업은 그대로(`<div class="flash flash-ok">` 계약). */
.app--store .flash-ok {
  position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: max-content; max-width: min(560px, calc(100vw - 32px));
  margin: 0; box-shadow: var(--shadow-pop);
  animation: snack-out 0.25s ease-in 5s forwards;
}
.app--store .flash-ok:hover { animation-play-state: paused; }
@keyframes snack-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .app--store .flash-ok { animation: snack-out 0s 7s forwards; }
}

/* ── 광고 배너 ── */
.ad-banner {
  container: ad / inline-size;
  position: relative; overflow: hidden;
  background: var(--raised); color: var(--ink);
}
.ad-banner-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  min-height: 180px;
}
.ad-banner.is-text-only { background: var(--ink); color: var(--on-fill); }
.ad-banner.is-text-only .ad-banner-inner { grid-template-columns: minmax(0, 1fr); }
.ad-banner-text {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px;
  min-width: 0; padding: 28px 32px;
}
.ad-banner-eyebrow { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.ad-banner-label {
  display: inline-flex; align-items: center; height: 18px; padding: 0 5px;
  border: 1px solid currentColor; border-radius: var(--r-xs);
  font-size: var(--font-size-badge); font-weight: 700;
}
.ad-banner-title {
  margin: 0; color: inherit;
  font-size: var(--fs-22); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.ad-banner-sub { margin: 0; color: var(--muted); font-size: var(--fs-14); }
.ad-banner-cta { margin-top: 8px; }
.ad-banner-media {
  position: relative; overflow: hidden;
  width: 240px; min-height: 100%;
  background: var(--raised);
}
.ad-banner-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-banner.is-text-only .ad-banner-eyebrow,
.ad-banner.is-text-only .ad-banner-sub { color: rgb(255 255 255 / 0.75); }
.ad-banner.is-text-only .ad-banner-cta { background: var(--card); color: var(--ink); border-color: var(--card); }

/* 조금 좁은 띠(태블릿) — 사진 칸을 줄인다. 미디어 쿼리가 아니라 컨테이너 쿼리라서 아래 포스터 규칙과
   순서로만 겨룬다(뒤에 오는 포스터가 이긴다). */
@container ad (max-width: 799px) {
  .ad-banner-text { padding: 20px; }
  .ad-banner-media { width: 160px; }
}
/* 좁은 자리 = 포스터(P8b 독립 검수 디자인 6·기능 4). 위는 사진 칸(흰 바탕 — 상품 사진이 흰 배경이라 칸과 이어진다.
   사진 전체가 보이게 contain — 예전에는 사진을 덮어 깔고 아래쪽을 보여 줘 뚜껑·스포이트가 잘렸고 흰 제목이 상품 위에
   겹쳤다), 아래는 검정 글 띠(흰 글). '광고' 표시는 언제나 검정 띠 위라 밝은 사진에 묻히지 않는다. 제목·부제는 두
   줄까지(관리자 폼 상한 60·120자). */
@container ad (max-width: 599px) {
  .ad-banner-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
  .ad-banner-media { grid-row: 1; width: 100%; aspect-ratio: 2 / 1; min-height: 0; background: var(--card); }
  .ad-banner-media img { object-fit: contain; object-position: 50% 50%; padding: 12px 0; }
  .ad-banner-text {
    grid-row: 2; justify-content: flex-start; gap: 6px;
    padding: 14px 20px 18px;
    color: var(--on-fill); background: var(--ink);
  }
  .ad-banner-eyebrow, .ad-banner-sub { color: rgb(255 255 255 / 0.85); }
  .ad-banner-title {
    font-size: var(--fs-22); color: var(--on-fill);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ad-banner-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ad-banner-cta.btn { height: 32px; padding: 0 12px; font-size: var(--fs-13); background: var(--card); color: var(--ink); border-color: var(--card); }
  .ad-banner.is-text-only .ad-banner-inner { min-height: 240px; grid-template-rows: minmax(0, 1fr); }
  .ad-banner.is-text-only .ad-banner-text { grid-row: 1; background: none; justify-content: flex-end; }
}

/* ── 진열대 머리 — 섹션 제목 왼쪽, '더보기' 밑줄 링크 오른쪽(무신사) ── */
.shelf { margin: 0 0 48px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.shelf-title { margin: 0; font-size: var(--fs-18); font-weight: 700; letter-spacing: var(--tracking-head); }
.shelf-title small { margin-left: 6px; color: var(--muted); font-size: var(--fs-13); font-weight: 500; letter-spacing: 0; }
.shelf-more { flex: none; color: var(--ink); font-size: var(--fs-13); text-decoration: underline; text-underline-offset: 3px; }
.shelf-more:hover { color: var(--muted); }

/* ── 메인 배너 캐러셀 — 데스크톱 한 화면에 3장, 900px 이하 1장. 동작(자동 넘김·일시정지·
   reduced-motion)은 P1 의 js/home.js. JS 가 없으면 이 트랙 자체가 가로 스냅 스크롤 목록이다. */
.carousel { position: relative; margin-bottom: 32px; }
/* 스토어에서는 화면 끝까지, 첫 요소면 GNB 바로 아래에 붙는다(무신사 메인). */
.app--store .carousel { margin-inline: calc(-1 * var(--gutter)); }
.app--store .container > .carousel:first-child { margin-top: -28px; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / 3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { min-width: 0; scroll-snap-align: start; }
.carousel-slide > .ad-banner { height: 100%; }
.carousel-slide > .ad-banner .ad-banner-inner { height: 100%; }
.carousel-ui { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 4px; }
.carousel-count {
  display: inline-flex; align-items: center; gap: 2px;
  height: 28px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: rgb(0 0 0 / 0.55); color: var(--on-fill);
  font-size: var(--fs-12); font-variant-numeric: tabular-nums;
}
.carousel-count b { font-weight: 700; }
.carousel-btn {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgb(0 0 0 / 0.55); color: var(--on-fill);
}
.carousel-btn:hover { background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .carousel-track { scroll-behavior: smooth; }
}

/* ── 칩 — 테두리 사각(반경 4). 지금 고른 것 = 검정 테두리 2px + 굵게(무신사 필터 칩).
   링크 칩: <a class="chip" aria-current="page">. 다중 선택 칩: <label class="chip"><input type="checkbox">…
   입력은 시각적으로만 숨기고(포커스는 칩 테두리로 보인다) 체크 상태는 :has() 로 그린다 — JS 없이. */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
/* 목록으로 쓴 칩 줄(ul > li > .chip) — li 가 줄어들면 칩 안의 건수가 칩 밖으로 넘쳐 다음 칩에 가린다(390 홈 실측). */
.chip-row > li { flex: none; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-size: var(--fs-13); font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer;
}
.chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.chip.is-on, .chip[aria-current="page"], .chip:has(input:checked) {
  border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 700;
}
.chip input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip .icon { color: var(--muted); }
.chip-thumb { width: 24px; height: 24px; margin-left: -6px; object-fit: cover; background: var(--raised); }
.chip-count { color: var(--faint); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── 정렬 줄 — 왼쪽 개수, 오른쪽 정렬 기준(또는 정렬 링크) ── */
.sortbar { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 14px; font-size: var(--fs-13); }
.sortbar-count { margin: 0; color: var(--ink); }
.sortbar-count b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sortbar-note { margin: 0; color: var(--muted); font-size: var(--fs-12); }
.sortbar a { color: var(--muted); }
.sortbar a[aria-current] { color: var(--ink); font-weight: 700; }

/* ── 입점 브랜드 줄 — 원형 머리글자(로고 자리) + 이름 + 상품 수 ── */
.brand-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 18px 8px; margin: 0; padding: 0; list-style: none; }
.brand-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); text-align: center; }
.brand-chip:hover { color: var(--ink); text-decoration: none; }
.brand-avatar {
  width: 64px; height: 64px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: var(--fs-22); font-weight: 800;
}
.brand-chip:hover .brand-avatar { border-color: var(--ink); }
.brand-name { font-size: var(--fs-12); font-weight: 500; line-height: 1.3; }
.brand-count { color: var(--faint); font-size: var(--font-size-badge); font-variant-numeric: tabular-nums; }

/* ── 상품 상세 — 왼쪽 큰 사진, 오른쪽 정보(붙음). 무신사 상세의 구매 패널 자리. ── */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.pdp-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--raised); }
.pdp-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-info {
  position: sticky; top: calc(var(--topbar-h) + var(--gnb-h) + 20px);
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.pdp-brand { margin: 0; font-size: var(--fs-13); font-weight: 700; }
.pdp-title { margin: 0; font-size: var(--fs-18); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pdp-actions form { margin: 0; }
.pdp-actions .btn { width: 100%; height: 48px; }

/* ── 장바구니 — 왼쪽 품목 목록(위에 검정 1px), 오른쪽 요약(붙음) ── */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cart-lines { border-top: 1px solid var(--ink); }
.cart-line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-thumb { display: block; width: 88px; height: 88px; object-fit: cover; background: var(--raised); }
.cart-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-13); }
.cart-info .ptile-brand { font-size: var(--fs-12); }
.cart-info a { color: var(--ink); }
.summary {
  position: sticky; top: calc(var(--topbar-h) + var(--gnb-h) + 20px);
  padding: 20px;
  background: var(--raised);
  border-radius: var(--r-md);
}
.summary-rows { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 16px; font-size: var(--fs-13); }
.summary-rows dt { color: var(--muted); }
.summary-rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summary-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 16px; padding-top: 16px;
  border-top: 1px solid var(--line-mid);
  font-size: var(--fs-14); font-weight: 600;
}
.summary-total b { font-size: var(--fs-22); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 완료 화면 — 검정 원 체크, 굵은 제목, 신청번호, 검정 선 아래 요약 ── */
.done { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; margin: 32px auto; text-align: center; }
.done-mark {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-fill);
}
.done-title { margin: 8px 0 0; font-size: var(--fs-22); font-weight: 700; }
.done-code { margin: 0; color: var(--muted); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.done-code b { color: var(--ink); font-weight: 700; }
.done-list {
  width: 100%; margin: 16px 0 4px; padding-top: 16px;
  border-top: 1px solid var(--ink);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px;
  text-align: left; font-size: var(--fs-13);
}
.done-list dt { color: var(--muted); }
.done-list dd { margin: 0; }
.done .btn-row { justify-content: center; }

@media (max-width: 1279px) {
  .ptile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ptile-row { grid-auto-columns: calc(100% / 5); }
}
/* ── 바닥글 약관 줄(웨이브 2 통합 — P2 통합 요청, base.html) — 링크 줄보다 작게, 처리방침만 굵게(쉽게 찾도록).
   글자 링크라 위아래 4px 를 더해 누르는 높이를 24 이상으로 둔다. ── */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 4px; }
.footer-legal a { display: inline-block; padding: 4px 0; color: var(--muted); font-size: var(--fs-12); }
.footer-legal a:hover { color: var(--ink); }
.footer-legal .is-privacy { color: var(--ink-soft); font-weight: 700; }

@media (max-width: 1100px) {
  .ptile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ptile-row { grid-auto-columns: calc(100% / 4); }
  .pdp { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  .cart-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
  .ptile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  /* 3.3장이 보여 옆으로 넘길 수 있음을 알린다(무신사 모바일 줄). */
  .ptile-row { grid-auto-columns: calc(100% / 3.3); scrollbar-width: none; }
  /* 스토어에서는 격자·줄이 화면 끝까지 닿는다(무신사 390 — 좌우 여백 없이 3열). */
  .app--store .ptile-grid, .app--store .ptile-row { margin-inline: calc(-1 * var(--gutter)); }
  .ptile-body { padding: 8px 8px 0; }
  .ptile-actions { padding: 8px 8px 0; }
  .cert-chip.only-wide { display: none; }
  .cert-chip.only-narrow { display: inline-flex; }
  .ptile-ph { font-size: 28px; }

  .carousel-track { grid-auto-columns: 100%; }
  .app--store .container > .carousel:first-child { margin-top: -20px; }
  .carousel-ui { right: 12px; bottom: 12px; }

  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { height: 36px; }

  .pdp, .cart-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pdp-info, .summary { position: static; }
  .app--store .pdp-media { margin-inline: calc(-1 * var(--gutter)); }
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line > :last-child { grid-column: 2; }
  .cart-thumb { width: 72px; height: 72px; }
  .shelf { margin-bottom: 36px; }
  .brand-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 터치 높이 36 이상(디자인 시스템 9-7, P8a 검수 디자인 9) — 데스크톱 크기는 그대로. */
  .btn-sm { height: 36px; }
  /* 페이지 제목 크기·굵기는 한 단계(.page-title 과 같다, P8a 검수 디자인 11) */
  .done-title { font-size: 20px; }
  .carousel-btn { width: 36px; height: 36px; }
  .carousel-count { height: 36px; }
  /* 콘솔 표가 옆으로 넘칠 때 오른쪽(왼쪽) 끝에 그림자 — 숨은 열이 있다는 단서(P8a 검수 디자인 10).
     배경을 스크롤 내용에 붙인(local) 흰 덮개가 끝에 닿으면 그림자를 가린다 — 스크립트 없이 모든 브라우저. */
  .card > .table, .card .table-wrap {
    background:
      linear-gradient(to right, var(--card) 30%, rgb(255 255 255 / 0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, var(--card) 30%, rgb(255 255 255 / 0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0)) right center / 14px 100% no-repeat scroll;
  }
}

/* ══ [P0] 끝 ══ */

/* ══ [P1 홈·시연 입구] 시작 ══ */
/* 통합 홈(app/templates/home.html · home/_*.html · demo/_role_cards.html, 설계 5.1).
   부품(진열대·캐러셀·칩·타일·브랜드 줄)은 [P0 공용] 그대로 쓰고, 여기는 홈에서만 다른 배치뿐이다.
   · 시연 입구 띠: 헤더 바로 아래 회색 면(Mist) 위 흰 패널 3장 — 1280×800 에서 버튼이 스크롤 없이 보인다.
   · 광고 상품 줄(한 화면 4장)은 [P0 공용] `.shelf-ads` — 바이어 홈·카탈로그와 같은 모양이다.
   · 한 화면 타일 폭은 하나다(P8a 검수 디자인 3): 광고 줄·인기 랭킹(TOP 10 한 줄)·신규 입점·카테고리별 모두
     6·5·4열 폭, 900px 이하 3.3장(줄)·3열(격자). 랭킹·브랜드 픽은 가로로 넘기고, 넘길 것이 있을 때만
     머리의 넘김 버튼(.row-nav, js/home.js)이 보인다.
   · 밀도(P1b): 기획전 카드(회색 면, 카드마다 작은 타일 3) · 브랜드 픽(흰 패널 + 선, 가로 넘김) · 지역별 인기
     (검정 1px 머리 줄 + 번호 목록, 무신사 랭킹 상자). 새 색·반경·그림자 없이 기존 토큰만. */

/* 바로가기 탭이 가리키는 섹션 머리가 고정 헤더(상단 바 + GNB) 밑에 숨지 않게 */
.home [id] { scroll-margin-top: calc(var(--topbar-h) + var(--gnb-h) + 16px); }

/* 홈의 첫 요소(시연 입구 띠 또는 메인 배너)를 GNB 에 붙인다 — 무신사 메인. 플래시가 먼저 오면 붙이지 않는다. */
.app--store .container > .home:first-child { margin-top: -28px; }

/* ── 시연 입구 띠 ── */
.home-entry.is-demo {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px;
  align-items: start;   /* 왼쪽 안내가 길어져도(?next 안내) 카드가 따라 늘어나 빈 칸이 생기지 않게 */
  margin: 0 calc(-1 * var(--gutter));
  padding: 20px var(--gutter);
  background: var(--raised);
}
.home-entry-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* 900 은 워드마크만(디자인 시스템 3절) — 입구 제목은 페이지 제목과 같은 700 */
.home-entry-title { margin: 0; font-size: var(--fs-28); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.home-entry-lead { margin: 0; color: var(--ink-soft); font-size: var(--fs-14); line-height: 1.55; }
.home-entry-intro .notice { margin: 2px 0 0; }
.home-entry-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--muted); font-size: var(--fs-13); }
.home-entry-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.home-entry-note { margin: auto 0 0; padding-top: 4px; color: var(--faint); font-size: var(--fs-12); line-height: 1.6; }

/* 역할 카드 — 패널(흰 면·1px 선·반경 8·지금 역할)은 공용 `.role-card`. 여기서는 띠에 맞춰 크기만 줄인다. */
.home-entry .role-card { gap: 8px; min-width: 0; padding: 16px 18px; }
.home-entry .role-card.is-wanted { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.home-entry .role-card-head { align-items: flex-start; min-height: 0; }
.home-entry .role-card-title { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0; font-size: var(--fs-22); }
.home-entry .role-card-title small { font-size: var(--fs-13); }
.home-entry .role-card-desc { font-size: var(--fs-13); line-height: 1.55; }
.home-entry .role-card form { margin: 4px 0 0; }
.home-entry .role-card .btn-block { height: 40px; font-size: var(--fs-14); }

/* ── 일반 모드 입구(배너 다음) — 파트별 로그인·가입 ── */
.home-parts { margin: 0 0 40px; }
.home-parts > .shelf-title { margin-bottom: 14px; }
.home-parts .role-card { padding: 20px; }
.home-parts .role-card-title { font-size: var(--fs-18); font-weight: 700; letter-spacing: var(--tracking-head); }
.home-parts .role-card-desc { margin-bottom: 8px; }
.home-parts .btn-row { margin-top: auto; }
.home-signed {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  padding: 14px 16px;
  background: var(--raised); border-radius: var(--r-md);
}
.home-signed-text { margin: 0; font-size: var(--fs-14); }

/* ── 메인 배너 — 버튼 줄은 넘길 것이 있을 때만 js/home.js 가 연다 ── */
.home-hero .carousel-ui[hidden],
.home-hero .carousel-icon[hidden] { display: none; }
.home-hero .carousel-icon { display: inline-flex; }

/* 하우스 배너(광고 없음)는 검정 면이라 바로 위 검정 GNB 와 한 덩어리로 보인다 — 홈에서는 회색 면(Mist)에
   검정 글로 뒤집고 칸 사이에 선을 둔다. 광고 배너(사진)는 그대로. */
.home-hero.is-house .carousel-slide + .carousel-slide { border-left: 1px solid var(--line); }
.home-hero.is-house .ad-banner.is-text-only { background: var(--raised); color: var(--ink); }
.home-hero.is-house .ad-banner.is-text-only .ad-banner-text,
.home-hero.is-house .ad-banner.is-text-only .ad-banner-title { color: var(--ink); }
.home-hero.is-house .ad-banner.is-text-only .ad-banner-eyebrow,
.home-hero.is-house .ad-banner.is-text-only .ad-banner-sub { color: var(--muted); }
.home-hero.is-house .ad-banner.is-text-only .ad-banner-cta.btn { background: var(--ink); color: var(--on-fill); border-color: var(--ink); }

/* ── 카테고리 바로가기 ── */
.home-cats { margin: 0 0 40px; }
/* 위아래 여백만 없앤다 — 좌우는 [P0 공용] 휴대폰 규칙(화면 끝까지 스크롤, 첫 칩은 본문 여백에 맞춤)을 따른다. */
.home-cats .chip-row { margin-block: 0; }

/* ── 진열대별 배치 ── */
/* 광고 상품 줄 — 홈은 한 줄 6장(무신사 메인의 촘촘한 줄, P1b). 바이어 홈·카탈로그의 4장은 [P0 공용] 그대로. */
.home-spotlight .ptile-row { grid-auto-columns: calc(100% / 6); }

/* 진열대 머리 오른쪽 — 넘김 버튼 + '전체 보기' */
.shelf-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.row-nav { display: inline-flex; gap: 4px; }
.row-nav[hidden] { display: none; }
.row-nav-btn {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); cursor: pointer;
}
.row-nav-btn:hover { border-color: var(--ink); }
.row-nav-btn:disabled { color: var(--line-strong); border-color: var(--line); cursor: default; }

/* 인기 랭킹 — 대분류 탭(테두리 칩, 고른 것 = 검정 테두리) + TOP 10 한 줄 */
/* margin-block 만 — `margin: 0 …` 은 공용 휴대폰 규칙(화면 끝까지 넘기는 칩 줄의 margin-inline)을 덮어 첫 칩이
   32px 에서 시작했다(디자인 시스템 11절 같은 실수, P8b 독립 검수 디자인 5). */
.home-rank-tabs { margin-block: 0 14px; }
.home-rank-tabs .chip { height: 32px; }

/* 기획전 — 카드 수만큼 같은 폭으로 나눈다(카드는 3~4장). 회색 면 위 작은 타일 3장. */
.home-collection-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.home-collection {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px 16px 16px;
  background: var(--raised); border-radius: var(--r-md);
}
.home-collection-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; }
.home-collection-title { margin: 0; font-size: var(--fs-16); font-weight: 700; letter-spacing: var(--tracking-head); }
.home-collection-note { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--muted); font-size: var(--fs-12); }
.home-collection-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.home-collection-items .ptile-body { padding: 8px 0 0; }
.home-collection-items .ptile-name { font-size: var(--fs-12); }

/* 브랜드 픽 — 흰 패널(선 1px) 한 화면 4장, 가로로 넘긴다. 머리 = 원형 머리글자 + 이름 + 상품 수 + 전체 보기. */
.home-pick-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.home-pick-row::-webkit-scrollbar { display: none; }
.home-brand-pick {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 16px; scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.home-brand-pick-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.home-brand-pick-head .brand-avatar { width: 40px; height: 40px; flex: none; font-size: var(--fs-16); }
.home-brand-pick-title {
  margin: 0; min-width: 0; font-size: var(--fs-14); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-brand-pick-head .brand-count { flex: none; }
.home-brand-pick-more { margin-left: auto; font-size: var(--fs-12); }
.home-brand-pick .ptile-media { background: var(--raised); }

/* 지역별 인기 — 지역마다 번호 목록(무신사 랭킹 상자: 검정 1px 머리 줄, 행 사이 옅은 선). 4개 넘으면 옆으로. */
.home-region-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.home-region { min-width: 0; border-top: 1px solid var(--ink); }
.home-region-title { margin: 0; padding: 12px 0 8px; font-size: var(--fs-14); font-weight: 700; }
.home-region-list { margin: 0; padding: 0; list-style: none; }
.home-region-item {
  display: grid; grid-template-columns: 18px 56px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.home-region-rank { position: relative; color: var(--ink); font-size: var(--fs-14); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.home-region-thumb { position: relative; display: block; width: 56px; height: 56px; overflow: hidden; background: var(--raised); }
.home-region-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-region-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-region-name {
  margin: 0; color: var(--ink); font-size: var(--fs-13); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-region-name a { color: inherit; }

.home-by-category .tabs { margin-bottom: 16px; }
.home-by-category .tabs .chip-count { margin-left: 2px; font-size: var(--fs-12); }
.home-brands .brand-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* ── 빈 상태·파트너 안내 ── */
.home-empty { margin: 0 0 40px; border: 1px solid var(--line); border-radius: var(--r-md); }
.home-partner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px;
  padding: 28px 32px;
  background: var(--raised); border-radius: var(--r-md);
}
.home-partner-copy { min-width: 0; max-width: 640px; }
.home-partner-title { margin: 0 0 6px; font-size: var(--fs-18); font-weight: 700; letter-spacing: var(--tracking-head); }
.home-partner-copy p { margin: 0; color: var(--muted); font-size: var(--fs-14); }

@media (max-width: 1279px) {
  .home-spotlight .ptile-row { grid-auto-columns: calc(100% / 5); }
  .home-pick-row { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 1100px) {
  .home-brands .brand-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-spotlight .ptile-row { grid-auto-columns: calc(100% / 4); }
  .home-collection-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* 휴대폰은 GNB 만 붙는다(상단 바는 흘러간다) */
  .home [id] { scroll-margin-top: calc(var(--gnb-h) + 12px); }
  .app--store .container > .home:first-child { margin-top: -20px; }

  .home-entry.is-demo { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px var(--gutter) 20px; }
  .home-entry-note { margin-top: 0; }
  .home .role-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* 휴대폰에서는 카드 3장이 세로로 쌓여 배너가 멀어진다 — 계정 줄을 접어 카드 높이를 줄인다. */
  .home-entry .role-card-account { display: none; }
  .home-entry .role-card { gap: 6px; padding: 14px 16px; }
  .home-entry .role-card .btn-block { height: 44px; }
  .home-parts .role-card { padding: 16px; }

  /* 한 화면 1장일 때 버튼 줄(오른쪽 아래)이 배너 글·'자세히 보기'를 덮지 않게 — 하우스 배너만이 아니라 모든 배너
     (P8b 독립 검수 기능 4: 긴 광고 문구에서 버튼이 넘김 버튼과 겹쳤다). */
  .home-hero .ad-banner-text { padding-bottom: 60px; }
  .home-cats { margin-bottom: 32px; }
  .home-spotlight .ptile-row { grid-auto-columns: calc(100% / 3.3); }
  /* 휴대폰은 손으로 넘긴다 — 넘김 버튼을 두지 않는다 */
  .row-nav { display: none; }
  .home-rank-tabs { margin-bottom: 12px; }
  .home-rank-tabs .chip { height: 36px; }

  /* 기획전·브랜드 픽·지역별 인기 — 화면 끝까지 닿는 가로 넘김 줄, 다음 카드가 조금 보인다 */
  .home-collection-row, .home-pick-row, .home-region-grid {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .home-collection-row::-webkit-scrollbar, .home-region-grid::-webkit-scrollbar { display: none; }
  .home-collection, .home-region { scroll-snap-align: start; }
  .home-collection, .home-brand-pick { padding: 14px; }
  .home-brands .brand-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .home-partner { padding: 20px; }
  .home-partner .btn-row { width: 100%; }
  .home-partner .btn { flex: 1 1 0; }
}
/* ══ [P1] 끝 ══ */

/* ══ [P2 가입·로그인·파트너 심사] 시작 ══ */
/* 단계형 가입(signup.html·js/signup.js)·가입 완료·약관(legal/*.html)·로그인 파트 제목·관리자 파트너 상세.
   단계 표시는 바이어 신청 상세의 진행 단계(.req-steps)와 같은 언어 — 위 2px 선, 원 안 번호, 지금 단계는 검정 채움.
   폼 자체는 공용 .field·.chip·.btn 그대로이고, 여기에는 화면 고유의 배치만 둔다. */

/* ── 유형 선택 ── */
.signup-choices { margin-bottom: 0; }
.signup-choice-meta { margin: -6px 0 14px; color: var(--ink-soft); font-size: var(--fs-12); font-weight: 600; }

/* ── 단계 표시 ── */
/* 단계를 바꾸면 폼 머리로 스크롤한다 — 고정 상단 바(56) 밑에 단계 표시가 숨지 않게 띄운다. */
.signup-form { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.stepper { margin: 0 0 28px; }
.stepper-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: 0; padding: 0; list-style: none;
}
.stepper-link {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 12px 8px 10px 0; border-top: 2px solid var(--line);
  color: var(--faint); font-size: var(--fs-13); text-decoration: none;
}
.stepper-link:hover { color: var(--ink); text-decoration: none; }
.stepper-no {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; font-size: var(--fs-12); font-variant-numeric: tabular-nums;
}
.stepper-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* JS 가 없으면 모든 단계가 보이므로 단계 표시는 바로가기 목록일 뿐 — 지금·지난 단계 강조는 JS 가 붙인다. */
.stepper-item.is-done .stepper-link { border-top-color: var(--ink); color: var(--ink-soft); }
.stepper-item.is-current .stepper-link { border-top-color: var(--ink); color: var(--ink); font-weight: 700; }
.stepper-item.is-current .stepper-no { background: var(--ink); border-color: var(--ink); color: var(--on-fill); }
.stepper-compact { display: none; }
.stepper-now { margin: 0 0 8px; font-size: var(--fs-14); color: var(--ink-soft); }
.stepper-now b { color: var(--ink); font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.stepper-now span { color: var(--ink); font-weight: 700; }
.stepper-progress {
  display: block; width: 100%; height: 2px; border: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--line); color: var(--ink);
}
.stepper-progress::-webkit-progress-bar { background: var(--line); }
.stepper-progress::-webkit-progress-value { background: var(--ink); }
.stepper-progress::-moz-progress-bar { background: var(--ink); }

/* ── 단계 본문 ── */
.signup-step { padding: 0 0 32px; }
.signup-step + .signup-step { padding-top: 28px; border-top: 1px solid var(--line); }
.signup-form.is-stepped .signup-step + .signup-step { padding-top: 0; border-top: 0; }
.signup-step[hidden] { display: none; }
.signup-step-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; font-size: var(--fs-18); font-weight: 700;
}
.signup-step-title:focus { outline: none; }
.signup-step-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.signup-step-no {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-fill);
  font-size: var(--fs-13); font-variant-numeric: tabular-nums;
}
/* 단계 표시가 번호를 이미 보여 주므로 JS 단계 모드에서는 제목 앞 번호를 뺀다(같은 정보 두 번). */
.signup-form.is-stepped .signup-step-no { display: none; }
.signup-step-lead { margin: 0 0 20px; color: var(--muted); font-size: var(--fs-13); line-height: 1.6; }

/* 약관 — 체크 줄 + 오른쪽 '보기' 링크, 아래 회색 면에 수집 항목 요약(개인정보 보호법이 동의 때 알리라는 네 가지) */
.signup-agree-list { display: grid; gap: 4px; }
.signup-agree {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 2px; border-bottom: 1px solid var(--line);
}
form .signup-check { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-14); font-weight: 500; cursor: pointer; }
.signup-check b { font-weight: 700; }
.signup-check input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.signup-agree-side { flex: none; display: inline-flex; align-items: baseline; gap: 10px; }
.signup-agree-side small { color: var(--faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.signup-agree-link { color: var(--muted); font-size: var(--fs-13); text-decoration: underline; text-underline-offset: 3px; }
.signup-agree-link:hover { color: var(--ink); }
.signup-privacy {
  margin: 12px 0 0; padding: 14px 16px; background: var(--raised); border-radius: var(--r-sm);
  display: grid; gap: 6px; font-size: var(--fs-12); line-height: 1.55;
}
.signup-privacy > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.signup-privacy dt { color: var(--muted); }
.signup-privacy dd { margin: 0; color: var(--ink-soft); }

/* 선택 묶음(매출 구간 라디오·국가·채널 체크) — 칩이 줄을 넘기며 감싼다(휴대폰에서도 가로 스크롤 대신 감싼다:
   고를 것을 숨기면 안 된다). */
.signup-choice { margin: 4px 0 20px; }
.signup-choice legend { margin-bottom: 8px; }
.signup-chips { margin: 0; }
.signup-chips .chip { margin: 0; }
.signup-other { margin: 12px 0 0; max-width: 420px; }
.signup-choice .field-help { margin-top: 8px; }

.field-error {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0; color: var(--alert); font-size: var(--fs-12); font-weight: 600; line-height: 1.5;
}
.field-error .icon { flex: none; margin-top: 2px; }
.signup-errors { margin-bottom: 20px; }
.signup-errors:focus { outline: none; }
.signup-errors .flash { margin-bottom: 0; white-space: normal; }
.signup-errors .flash-list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* 서버가 오류로 돌려보낸 칸 — :user-invalid 는 손댄 뒤에만 켜지므로 aria-invalid 로 처음부터 표시한다. */
.signup-form [aria-invalid="true"] { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
.signup-form input[type=checkbox][aria-invalid="true"] { outline: 2px solid var(--alert); outline-offset: 2px; box-shadow: none; }
.signup-choice:focus { outline: none; }
.signup-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.signup-password { display: flex; gap: 8px; align-items: center; }
.signup-password input { flex: 1; min-width: 0; }
.signup-reveal { flex: none; height: 40px; }
.signup-docs-later { margin-top: 4px; }

.signup-nav, .signup-submit { display: flex; justify-content: space-between; gap: 8px; margin-top: 24px; }
.signup-nav[hidden], .signup-submit [hidden] { display: none; }
.signup-nav .btn, .signup-submit .btn { min-width: 120px; }
.signup-nav [data-step-next]:only-child { margin-left: auto; }
.signup-submit-btn { margin-left: auto; }

/* ── 가입 완료 ── */
.signup-next {
  width: 100%; margin: 16px 0 4px; padding: 16px 0 0 20px;
  border-top: 1px solid var(--ink);
  display: grid; gap: 8px; text-align: left; font-size: var(--fs-13); color: var(--ink-soft); line-height: 1.6;
}

/* ── 로그인 파트 제목 ── */
.login-part-title { margin: 14px 0 0; font-size: var(--fs-18); font-weight: 700; }
.login-part-title + .sub { margin-top: 6px; }

/* ── 약관·처리방침 — 읽는 문서라 한 단 760, 왼쪽 정렬 ── */
.legal-doc { max-width: 760px; margin: 40px auto 48px; font-size: var(--fs-14); line-height: 1.75; color: var(--ink-soft); }
.legal-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.legal-title { margin: 0; font-size: var(--fs-22); font-weight: 700; color: var(--ink); }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; color: var(--muted); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.legal-draft { margin: 14px 0 0; }
.legal-switch { display: flex; gap: 18px; margin-top: 16px; font-size: var(--fs-13); }
.legal-switch a { color: var(--muted); }
.legal-switch a[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.legal-doc > p { margin: 0 0 24px; }
.legal-doc section { margin: 0 0 24px; }
.legal-doc h2 { margin: 0 0 8px; font-size: var(--fs-16); font-weight: 700; color: var(--ink); }
.legal-doc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.legal-doc p { margin: 0 0 8px; }
.legal-table td { vertical-align: top; font-size: var(--fs-13); }
.legal-table td:first-child { white-space: nowrap; color: var(--muted); }

/* ── 관리자 파트너 상세 — 계약 서류·동의 기록 ── */
.doc-list { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.doc-list > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13);
}
.doc-list .doc-kind { min-width: 120px; font-weight: 600; color: var(--ink); }
.doc-list .doc-when { color: var(--faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.doc-list > li.is-deleted .doc-kind, .doc-list > li.is-deleted a { color: var(--faint); text-decoration: line-through; }
.consent-list { margin: 4px 0 16px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-13); color: var(--ink-soft); }
.consent-list time, .consent-list .consent-ip { color: var(--faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.consent-none { margin: 4px 0 16px; color: var(--faint); font-size: var(--fs-13); }
.partner-facts { color: var(--muted); font-size: var(--fs-12); }

@media (max-width: 900px) {
  .stepper { margin-bottom: 20px; }
  .signup-form.is-stepped .stepper-list { display: none; }
  .signup-form.is-stepped .stepper-compact { display: block; }
  .stepper-list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .stepper-link { min-height: 40px; padding: 8px 0; }
  .signup-agree { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 2px; }
  .signup-agree-side { padding-left: 30px; }
  /* 휴대폰 단계 모드: 위 '2/5 회사 정보' 줄이 단계 이름을 이미 말한다 — 제목은 화면 읽기용으로만 남긴다. */
  .signup-form.is-stepped .signup-step-title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .signup-privacy > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .signup-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .signup-nav .btn, .signup-submit .btn { flex: 1 1 0; min-width: 0; }
  .signup-reveal { height: 44px; }
  .legal-doc { margin: 24px auto 32px; }
  .doc-list .doc-kind { min-width: 0; }
}
/* ══ [P2] 끝 ══ */

/* ══ [P3 브랜드] 시작 ══ */
/* [P3a] MD 반려 사유 블록(brand/_reject_reason.html) — `.card-alert` 위에 글의 위계만 얹는다.
   제목(빨강)과 결정일은 한 줄, 사유 본문이 가장 진하고, 다음 행동 안내는 한 단계 낮춘다. */
.reject-reason-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px 16px; margin-bottom: 12px;
}
.reject-reason-head h2 { margin: 0; }
.reject-reason-date { margin: 0; color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.reject-reason-note { margin: 0 0 8px; max-width: 72ch; color: var(--ink); font-size: var(--fs-14); font-weight: 500; line-height: 1.6; }
.reject-reason-note.is-missing { color: var(--muted); font-weight: 400; }
.reject-reason-guide { margin: 0; color: var(--muted); font-size: var(--fs-13); }
/* 다른 화면이 `#cert-add`·`#reject-reason` 으로 바로 오면 고정 상단 바(56px) 밑에 숨지 않게 */
#reject-reason, #cert-add { scroll-margin-top: 72px; }
@media (max-width: 900px) {
  .reject-reason .btn-row > .btn, .reject-reason .btn-row > form { flex: 1 1 100%; }
  .reject-reason .btn-row > form .btn { width: 100%; }
}

/* [P3b] 상품 등록·수정 폼의 입력 도움(brand/product_form.html, _help.html) — 무신사 파트너센터처럼
   칸 머리(라벨 + 필수 표시 + `?`) · 입력 · 칸 아래 회색 한 줄. `?` 를 열면 설명이 칸 머리 바로 아래
   흐름 안에 펼쳐진다(겹쳐 뜨지 않아 좁은 화면에서도 넘치지 않는다). 필수 = 빨강 *, 수출 시 = 호박 태그,
   선택 = 회색 글자. 표시는 data-req 에서만 나온다(라우터 field_mark). */
.field-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 6px; }
.field-head > label, .field-head > .field-label { margin: 0; }
.field-label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.field > .field-label { margin-bottom: 6px; }
.field-opt { margin-left: 2px; color: var(--faint); font-size: var(--fs-12); font-weight: 400; }
.field-cond {
  display: inline-block; margin-left: 2px; padding: 0 4px;
  border-radius: var(--r-xs); background: var(--hold-bg); color: var(--hold-fg);
  font-size: var(--font-size-badge); font-weight: 600; line-height: 16px; vertical-align: 1px;
}
.help-pop { display: contents; }
.help-pop > summary {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer; list-style: none; user-select: none;
}
.help-pop > summary::-webkit-details-marker { display: none; }
.help-pop > summary:hover, .help-pop[open] > summary { border-color: var(--ink); background: var(--ink); color: var(--on-fill); }
.help-pop > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.help-pop-body {
  flex: 1 0 100%; order: 9;
  margin-top: 4px; padding: 10px 12px; max-width: 72ch;
  border-radius: var(--r-sm); background: var(--raised);
  color: var(--ink-soft); font-size: var(--fs-13); font-weight: 400; line-height: 1.6;
}
.help-pop-sample {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--muted); font-size: 10px; font-weight: 700; vertical-align: 1px;
}
.field-help { line-height: 1.5; }
.field-error { margin: 6px 0 0; color: var(--alert); font-size: var(--fs-12); }

/* 작성 가이드 카드 + 섹션 단계 줄(긴 폼에서 지금 어디인지 — 상단 바 아래에 붙는다) */
.form-guide-card { border-color: var(--line); }
.form-guide-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.form-guide-head h2 { margin: 0; }
.form-guide-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.6; }
.form-guide-list strong { color: var(--ink); font-weight: 600; }
.form-steps {
  position: sticky; top: var(--topbar-h); z-index: 20;
  display: flex; gap: 0; margin: 0 0 16px; padding: 0;
  overflow-x: auto; scrollbar-width: none;
  /* 상자 대신 밑줄 탭 한 줄(장식 하나 빼기) — 바탕은 콘솔 바탕과 같아 붙어 있을 때 뒤 글이 비치지 않는다 */
  background: var(--raised); border-bottom: 1px solid var(--line);
}
.form-steps::-webkit-scrollbar { display: none; }
.form-steps a {
  flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted); font-size: var(--fs-13); font-weight: 600; white-space: nowrap;
}
.form-steps a:hover { color: var(--ink); border-bottom-color: var(--ink); text-decoration: none; }
/* 지금 화면의 섹션(js/product_form.js 가 붙인다) — 밑줄 탭의 활성과 같은 모양(P8b). */
.form-steps a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.form-section { scroll-margin-top: calc(var(--topbar-h) + 60px); }
.form-section-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.form-section-head h2 { margin: 0 0 4px; }
.form-section-guide { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-13); line-height: 1.5; }
.form-section-head .form-section-guide { margin: 0; }

/* 대표 사진 칸 — 현재 사진과 새로 고른 사진을 나란히(160px, 사진 반경 0) */
.photo-slots { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.photo-slots:not(:has(.photo-slot:not([hidden]))) { display: none; }
.photo-slot { margin: 0; width: 160px; }
.photo-slot img { display: block; width: 160px; height: 160px; object-fit: cover; background: var(--raised); border: 1px solid var(--line); }
.photo-slot figcaption { margin-top: 4px; color: var(--faint); font-size: var(--fs-12); }
.photo-slot[hidden] { display: none; }
.file-current { margin: 0 0 8px; font-size: var(--fs-13); }
.field-row-files { align-items: start; }

/* 인증서 안내 — 상품 저장 뒤 인증서 화면으로 */
.cert-hint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 8px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--signal-tint);
}
.cert-hint strong { color: var(--signal-ink); font-size: var(--fs-13); }
.cert-hint p { margin: 2px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.6; }
.cert-hint .cert-hint-later { margin: 0; color: var(--muted); }
/* 저장 줄 — 긴 폼 어디서든 보이게 화면 아래에 붙는다(파트너센터의 하단 저장 바) */
.form-actions {
  position: sticky; bottom: 0; z-index: 10; justify-content: flex-end;
  margin: 0; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0;
}
.form-actions-note { margin: 0 auto 0 0; color: var(--muted); font-size: var(--fs-12); }

/* 상품 상세 — 기본정보 맨 앞 대표 사진(240px)·단품 규격·동일 제품 링크 */
.detail-lead { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 16px; }
.detail-photo { position: relative; margin: 0; width: 240px; }
.detail-photo img, .detail-photo .ptile-ph { display: flex; width: 240px; height: 240px; object-fit: cover; background: var(--raised); }
.detail-photo .ptile-ph { position: relative; inset: auto; font-size: 64px; }
.detail-photo figcaption { margin-top: 6px; color: var(--faint); font-size: var(--fs-12); }
.detail-lead-kv { margin-top: 0; }

/* 상품 목록 첫 열 — 48px 썸네일(사진 반경 0) */
.table .col-thumb { width: 64px; }
.list-thumb { position: relative; display: block; width: 48px; height: 48px; overflow: hidden; background: var(--raised); }
.list-thumb img { display: block; width: 48px; height: 48px; object-fit: cover; }
.list-thumb .ptile-ph { font-size: var(--fs-18); }

/* 작성 예시 — 칸 · 예시 값 · 이렇게 쓰는 이유 세 열(파트너센터의 항목 표) */
.example-brand { margin: 0; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.example-name { margin: 2px 0 12px; color: var(--ink); font-size: var(--fs-18); font-weight: 700; }
.example-photo .ptile-ph { font-size: 64px; }
.example-legend {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
  margin: 8px 0 8px; padding: 0 calc(var(--card-pad) + 1px);
  color: var(--faint); font-size: var(--fs-12); font-weight: 600;
}
.example-section > h2 { margin: 0 0 8px; }
.example-note { margin: 0 0 8px; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.6; }
.example-list { margin: 0; }
.example-row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.example-row dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.example-row dd { margin: 0; min-width: 0; font-size: var(--fs-13); line-height: 1.6; overflow-wrap: anywhere; }
.example-value { color: var(--ink); font-weight: 500; }
.example-why { color: var(--muted); }
.example-mono { font-variant-numeric: tabular-nums; }

/* 제출 서류 카드(brand/_company_docs.html) — 종류 · 파일 · 등록일 · 삭제 한 줄 */
.company-docs-count { color: var(--faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.company-docs .section-title h2 { margin: 0; }
.doc-list { margin: 0 0 12px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.doc-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px;
  min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13);
}
.doc-row > :last-child:not(form) { grid-column: span 2; }
.doc-kind { color: var(--ink); font-weight: 600; }
.doc-file { min-width: 0; overflow-wrap: anywhere; }
.doc-meta { color: var(--faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-delete { margin: 0; }
.doc-upload { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 0 12px; align-items: end; }
.doc-upload .field { margin-bottom: 0; }
/* 파일 칸을 옆 선택칸과 같은 높이로 — 라벨 줄이 어긋나지 않게 */
.doc-upload input[type="file"] { display: block; box-sizing: border-box; height: 40px; padding: 2px 0; }
.doc-upload + .field-help { margin-top: 8px; }
.company-docs-pointer { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-12); }
#company-docs { scroll-margin-top: 72px; }

@media (max-width: 900px) {
  .form-steps { margin-inline: calc(-1 * var(--gutter)); padding-inline: 4px; }
  .form-steps a { height: 44px; padding: 0 12px; }
  .help-pop > summary { width: 24px; height: 24px; font-size: 12px; position: relative; }
  /* 보이는 원은 24, 누르는 영역은 36×36(디자인 시스템 9.7) — 라벨 줄 높이는 그대로(P8b 독립 검수 디자인 8). */
  .help-pop > summary::after { content: ""; position: absolute; inset: -6px; }
  .form-actions { margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter); border-radius: 0; border-inline: 0; border-bottom: 0; }
  .form-actions-note { display: none; }   /* 휴대폰 화면 아래를 덜 가리게 — 같은 말이 작성 가이드에 있다 */
  .form-actions .btn { flex: 1 1 auto; }
  .detail-lead { grid-template-columns: 1fr; }
  .detail-photo, .detail-photo img, .detail-photo .ptile-ph { width: 160px; height: auto; }
  .detail-photo img, .detail-photo .ptile-ph { height: 160px; }
  .example-legend { display: none; }
  .example-row { grid-template-columns: 1fr; }
  .doc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .doc-kind { grid-column: 1 / -1; }
  .doc-row > :last-child:not(form) { grid-column: auto; }
  /* 지울 수 있는 줄: 파일명 아래 등록일, 삭제 버튼은 오른쪽 두 줄에 걸쳐 */
  .doc-row:has(.doc-delete) .doc-file, .doc-row:has(.doc-delete) .doc-meta { grid-column: 1; }
  .doc-row .doc-delete { grid-column: 2; grid-row: 2 / span 2; }
  .doc-upload { grid-template-columns: 1fr; gap: 12px; }
  .doc-upload .btn { width: 100%; }
}
/* 승인 전 브랜드 대시보드의 입점 진행 상태(P8b) — 가입 화면의 단계 표시(.stepper-*, [P2])를 그대로 쓰고 반려만 빨강.
   지표·최근 심사 결과 대신 놓인다(열 수 없는 상품 화면으로 가는 링크를 두지 않는다). */
.onboard .stepper-list { margin: 12px 0 8px; }
.stepper-item.is-rejected .stepper-link { border-top-color: var(--alert); color: var(--alert); }
.stepper-item.is-rejected .stepper-no { background: var(--alert); border-color: var(--alert); color: var(--on-fill); }

/* ══ [P3] 끝 ══ */

/* ══ [P4 바이어 탐색] 시작 ══ */
/* 바이어 홈·카탈로그·상품 상세(설계 5.4). 마크업은 app/templates/buyer/*.html. 공용 부품(.ptile·.chip·
   .sortbar·.pdp·.shelf·.ad-banner)은 [P0 공용] 그대로 쓰고, 여기에는 이 화면들만의 배치를 둔다.
   · 필터는 상자로 감싸지 않는다(무신사 카테고리 화면 — 칩 줄 아래 1px 선 하나).
   · 칩 라벨이 폼 안에 있어 `form label` 의 아래 여백·굵기를 받는다 — 칩 줄 안에서만 되돌린다.
   · 추천 카드(`article.card` 6개 계약)는 패널이 아니라 타일처럼 보이게 테두리·여백을 뺀다. */

/* ── 카탈로그 ── */
.buyer-banner { margin: 0 0 24px; }
/* 한 줄 광고 띠(P8a 검수 디자인 1) — 홈 캐러셀과 같은 광고를 크게 되풀이하지 않고, 격자를 첫 화면으로 올린다.
   공용 배너의 띠·포스터 규칙(컨테이너 쿼리)보다 구체적인 선택자라 폭과 상관없이 이 모양이 된다. */
.buyer-banner.is-slim { margin-bottom: 16px; }
.buyer-banner.is-slim .ad-banner-inner { min-height: 0; grid-template-columns: minmax(0, 1fr) 132px; grid-template-rows: none; }
.buyer-banner.is-slim .ad-banner-text {
  grid-area: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 4px 16px; padding: 14px 20px;
  background: none; color: var(--ink);
}
.buyer-banner.is-slim .ad-banner-eyebrow { flex: 1 0 100%; color: var(--muted); }
.buyer-banner.is-slim .ad-banner-title { font-size: var(--fs-16); font-weight: 700; color: var(--ink); }
.buyer-banner.is-slim .ad-banner-sub { flex: 1 1 240px; color: var(--muted); font-size: var(--fs-13); }
.buyer-banner.is-slim .ad-banner-cta.btn { margin: 0 0 0 auto; background: var(--ink); color: var(--on-fill); border-color: var(--ink); }
.buyer-banner.is-slim .ad-banner-media { grid-area: auto; width: 132px; min-height: 96px; aspect-ratio: auto; background: var(--raised); }
/* 한 줄 띠는 좁은 화면에서도 사진을 채워 깐다 — 포스터형의 contain(P8b)을 받지 않는다. */
.buyer-banner.is-slim .ad-banner-media img { object-fit: cover; object-position: 50% 50%; padding: 0; }
.buyer-cats { margin-bottom: 14px; }
.buyer-filter { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.buyer-countries { margin: 0 0 12px; }
.buyer-countries legend { margin-bottom: 8px; font-size: var(--fs-13); font-weight: 700; color: var(--ink); }
.buyer-legend-help { margin-left: 6px; color: var(--muted); font-size: var(--fs-12); font-weight: 400; }
.buyer-countries .chip-row { margin-block: 0; }
.buyer-countries .chip { margin: 0; color: var(--ink); }
.buyer-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.buyer-filter-row select { width: auto; min-width: 220px; max-width: 100%; height: 34px; font-size: var(--fs-13); }
.buyer-filter-link { color: var(--muted); font-size: var(--fs-13); text-decoration: underline; text-underline-offset: 3px; }
.buyer-filter-link:hover { color: var(--ink); }
.buyer-matched { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-mid); color: var(--signal-ink); }
.buyer-disclaimer {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 0 18px;
  color: var(--faint); font-size: var(--fs-12);
}
.buyer-disclaimer .icon { flex: none; }

/* ── 상품 상세 — 사진 | 정보(붙음) / 사진 아래 설명. 정보 칸이 두 줄을 차지해 설명을 읽는 동안 따라온다. ── */
.buyer-crumbs { margin: 0 0 14px; }
.buyer-pdp {
  grid-template-areas: "media info" "body info";
  row-gap: 40px;
  margin-bottom: 56px;
}
.buyer-pdp > .pdp-media { grid-area: media; }
.buyer-pdp > .pdp-info { grid-area: info; }
.buyer-pdp > .buyer-pdp-body { grid-area: body; min-width: 0; }
/* 사진은 첫 화면에 다 보이게 — 칸 가운데 600px 이하·화면 높이 안(무신사 상세 약 600, P8a 검수 디자인 2).
   설명·상세 이미지도 읽기 폭(860) 안에서 같은 가운데에 둔다. */
.buyer-pdp > .pdp-media {
  justify-self: center; width: 100%;
  max-width: min(600px, calc(100vh - var(--topbar-h) - var(--gnb-h) - 96px));
  max-width: min(600px, calc(100dvh - var(--topbar-h) - var(--gnb-h) - 96px));
}
.buyer-pdp > .buyer-pdp-body { justify-self: center; width: 100%; max-width: 860px; }
.pdp-brand a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.buyer-pdp-en { margin: -6px 0 0; color: var(--muted); font-size: var(--fs-13); }
.buyer-pdp-facts {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px;
  margin: 4px 0 0; padding: 16px 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  font-size: var(--fs-13);
}
.buyer-pdp-facts > div { display: contents; }
.buyer-pdp-facts dt { color: var(--muted); }
.buyer-pdp-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.buyer-pdp-h { margin: 0 0 10px; font-size: var(--fs-14); font-weight: 700; letter-spacing: 0; }
.buyer-pdp-sub { margin: 16px 0 6px; font-size: var(--fs-13); font-weight: 700; }
.buyer-pdp-muted { margin: 0; color: var(--faint); font-size: var(--fs-12); line-height: 1.5; }
.pdp-certs { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.buyer-cert-list { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.buyer-cert-list li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-13); }
.buyer-cert-list .cert-chip { flex: none; }
.buyer-cert-type { color: var(--ink-soft); overflow-wrap: anywhere; }
.buyer-pdp-section { padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--fs-14); line-height: 1.7; }
.buyer-pdp-section:first-child { padding-top: 0; border-top: 0; }
.buyer-pdp-section + .buyer-pdp-section { margin-top: 24px; }
.buyer-pdp-section p { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.buyer-detail-img { display: block; width: 100%; height: auto; background: var(--raised); }
.buyer-more-link { margin: 0 0 40px; }

/* ── 바이어 홈 ── */
.buyer-home-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: end;
  margin: 0 0 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--ink);
}
.buyer-home-name { margin: 0; font-size: var(--fs-22); font-weight: 700; letter-spacing: -0.01em; }
.buyer-home-lead { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-13); }
.buyer-home-links { display: flex; gap: 4px; }
.buyer-home-links a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--fs-13); font-weight: 500;
}
.buyer-home-links a:hover { border-color: var(--ink); text-decoration: none; }
.buyer-home-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.buyer-countries-edit { grid-column: 1 / -1; }
.buyer-countries-edit > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  list-style: none; cursor: pointer;
  font-size: var(--fs-13);
}
.buyer-countries-edit > summary::-webkit-details-marker { display: none; }
.buyer-countries-label { font-weight: 700; color: var(--ink); }
.buyer-countries-now { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.buyer-countries-action { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.buyer-countries-edit[open] .buyer-countries-action { color: var(--ink); }
.buyer-countries-edit > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.buyer-countries-edit[open] > summary { margin-bottom: 14px; }
.buyer-countries-edit form { margin: 0; }
.buyer-prefs { margin: 0 0 40px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.buyer-prefs form { margin-top: 12px; }
.buyer-reco-note { margin: -6px 0 14px; color: var(--muted); font-size: var(--fs-12); }
.buyer-reco-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0; row-gap: 28px; }
.buyer-reco-grid > .card {
  display: flex; flex-direction: column; min-width: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
}
.buyer-reason-text { margin: 6px 0 0; color: var(--faint); font-size: var(--fs-12); line-height: 1.45; }
.buyer-reason-cert {
  align-self: flex-start;
  margin: 6px 0 0; padding: 2px 5px;
  border-radius: var(--r-xs);
  background: var(--signal-tint); color: var(--signal-ink);
  font-size: var(--font-size-badge); font-weight: 600; line-height: 1.45;
}

@media (max-width: 1100px) {
  .buyer-reco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .buyer-filter-row select { flex: 1 1 100%; min-width: 0; height: 44px; font-size: var(--fs-16); }
  .buyer-filter-row .btn { flex: 1 1 auto; height: 44px; }
  .buyer-legend-help { display: block; margin: 2px 0 0; }
  .buyer-matched { display: inline-block; }
  .buyer-pdp { grid-template-areas: "media" "info" "body"; row-gap: 24px; }
  .buyer-pdp > .pdp-media { max-width: none; width: auto; justify-self: stretch; }   /* 휴대폰은 화면 끝까지(P0) */
  /* 신청·담기 버튼을 화면 아래에 붙인다 — 장바구니의 고정 버튼과 같은 자리·바탕(P8a 검수 디자인 5). */
  .app:has(.buyer-pdp) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .buyer-pdp .pdp-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    margin: 0; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line);
  }
  .app:has(.buyer-pdp) .flash-ok, .app:has(.cart-page.has-cta) .flash-ok {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .buyer-banner.is-slim .ad-banner-inner { grid-template-columns: minmax(0, 1fr) 96px; }
  .buyer-banner.is-slim .ad-banner-text { padding: 12px 14px; gap: 2px 10px; }
  .buyer-banner.is-slim .ad-banner-title { font-size: var(--fs-14); }
  .buyer-banner.is-slim .ad-banner-sub { display: none; }
  .buyer-banner.is-slim .ad-banner-cta.btn { margin: 6px 0 0; height: 36px; }
  .buyer-banner.is-slim .ad-banner-media { width: 96px; }
  .buyer-home-head { grid-template-columns: minmax(0, 1fr); }
  .buyer-home-name { font-size: 20px; }
  .buyer-home-links { flex-wrap: wrap; }
  .buyer-home-links a { flex: 1 1 0; justify-content: center; min-width: 0; }
  .app--store .buyer-reco-grid { margin-inline: calc(-1 * var(--gutter)); }
  .buyer-reco-grid > .card .ptile-body { padding: 8px 8px 0; }
}
/* ══ [P4] 끝 ══ */

/* ══ [P5 구매 신청] 시작 ══ */
/* 장바구니·신청 완료·신청 내역(스토어) + 구매 신청 목록·상세(콘솔). 설계 5.5, 디자인 시스템 6절 '장바구니'·'완료 화면'.
   공용 틀(.cart-layout·.cart-line·.summary·.done)은 [P0 공용] 그대로 쓰고, 여기에는 화면 고유의 것만 둔다.
   대담함은 한 곳 — 요약의 큰 '0원'(P0). 나머지는 흰 면·1px 선·작은 글자. */

/* ── 장바구니 — 유틸 화면(디자인 시스템 1절): 회색 바탕 위 가운데 흰 기둥 960(무신사 장바구니, P8a 검수 디자인 6) ── */
.app--store:has(.cart-page) .content { background: var(--raised); }
.cart-page { max-width: 960px; margin-inline: auto; padding: 24px 32px 40px; background: var(--card); }
.cart-page .summary { background: var(--raised); }
.cart-page > .empty-state { padding: 56px 16px 48px; }
.cart-page > .empty-state .empty-text { font-size: var(--fs-16); font-weight: 700; }
.cart-page > .shelf { margin: 8px 0 0; }
.cart-line { align-items: center; }
.cart-line > a { display: block; }
.cart-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--line-strong); font-size: var(--fs-28); font-weight: 800; user-select: none;
}
.cart-name { margin: 2px 0 0; font-size: var(--fs-14); font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.cart-name a { color: var(--ink); }
.cart-meta { margin: 0; color: var(--faint); font-size: var(--fs-12); }
.cart-flag { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--bad-fg); font-size: var(--fs-12); }
.cart-line.is-blocked .cart-thumb, .cart-line.is-blocked .cart-name { opacity: 0.55; }
.cart-foot { margin: 12px 0 0; }
.summary-title { margin: 0 0 14px; font-size: var(--fs-16); }
.cart-request { margin: 0; }
.cart-request .field { margin-bottom: 12px; }
.cart-request textarea { min-height: 88px; background: var(--card); }
.summary-block { margin: 0 0 10px; color: var(--bad-fg); font-size: var(--fs-13); font-weight: 600; }
.summary-note { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }

/* ── 신청 완료 ── */
.done-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.done-memo { white-space: pre-line; }
.done-notice { width: 100%; margin: 4px 0 0; text-align: left; }

/* ── 바이어 신청 내역 — 한 줄 = 한 신청, 줄 전체가 링크(무신사 주문 내역) ── */
.req-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.req-list > li { border-bottom: 1px solid var(--line); }
.req-row {
  display: grid; grid-template-columns: 56px 168px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 4px; color: var(--ink);
}
.req-thumb { display: block; width: 56px; height: 56px; object-fit: cover; background: var(--raised); }
.req-thumb.cart-thumb-ph { font-size: var(--fs-18); }
.req-row:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.req-when { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.req-when time { color: var(--faint); font-size: var(--fs-12); }
.req-what { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-14); }
.req-what small { color: var(--faint); font-size: var(--fs-12); }
.req-state { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); }

/* ── 바이어 신청 상세 — 진행 단계(실제 순서라 번호가 있다) ── */
.req-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 32px; padding: 0; list-style: none;
}
.req-steps li {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 12px; border-top: 2px solid var(--line);
  color: var(--faint); font-size: var(--fs-13);
}
.req-steps li.is-done { border-top-color: var(--ink); color: var(--ink-soft); }
.req-steps li.is-current { border-top-color: var(--ink); color: var(--ink); font-weight: 700; }
.req-step-no {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; font-size: var(--fs-12); font-variant-numeric: tabular-nums;
}
.req-steps li.is-current .req-step-no { background: var(--ink); border-color: var(--ink); color: var(--on-fill); }
.req-section { margin: 0 0 32px; }
.req-section > h2 { margin: 0 0 12px; }
.req-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.req-memo { margin: 0; white-space: pre-line; font-size: var(--fs-14); }
.req-history { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--fs-13); }
.req-history time { display: inline-block; min-width: 128px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── 내부 목록·상세(콘솔) ── */
.req-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-13); }
.req-table td.num, .req-table th.num { text-align: right; }
.req-table .req-code { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 상세로 가는 신청번호가 링크(파랑), 회사명은 목록을 거르는 보조 링크라 글자색 그대로·누를 때만 밑줄
   (디자인 시스템 5-5 '파랑 = 링크', P8a 검수 디자인 8) */
.req-table .req-c-company a { color: var(--ink); }
.req-table .req-c-company a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.req-table .req-countries { max-width: 200px; }
.req-table .req-first { min-width: 220px; }
.req-grid { align-items: start; }
.req-grid > .card { margin-bottom: 0; }
.req-grid + .card { margin-top: 16px; }
.kv-grid .kv-wide { grid-column: 1 / -1; }
.req-card-link { margin: 0; font-size: var(--fs-13); }
.req-status-form { max-width: 560px; }
.req-next { display: flex; flex-wrap: wrap; gap: 8px; }
.req-next legend { width: 100%; }
.req-option {
  display: flex; align-items: flex-start; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  cursor: pointer;
}
.req-option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.req-option input { margin: 3px 0 0; accent-color: var(--ink); }
.req-option span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-13); }
.req-log { margin: 0; padding: 0; list-style: none; }
.req-log li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13); }
.req-log li:last-child { border-bottom: 0; }
.req-log time { color: var(--faint); font-variant-numeric: tabular-nums; }
.req-log-what { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.req-log-memo { grid-column: 2; margin: 0; padding: 8px 12px; background: var(--raised); border-radius: var(--r-sm); white-space: pre-line; }

@media (max-width: 900px) {
  /* 장바구니 — 신청 버튼을 화면 아래에 붙인다(무신사 모바일). 아래 여백만큼 본문을 띄워 바닥글을 가리지 않는다. */
  .app:has(.cart-page.has-cta) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .cart-page.has-cta .cart-request .btn-block {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    border-radius: 0;
  }
  .cart-line { align-items: start; }
  .cart-page { margin-inline: calc(-1 * var(--gutter)); padding: 16px var(--gutter) 32px; }
  .cart-thumb-ph { font-size: var(--fs-22); }
  .summary { border-radius: 0; margin-inline: calc(-1 * var(--gutter)); }

  /* 장바구니·신청 상세 줄 — '빼기'·상태 표시를 사진 옆 오른쪽 위에 둔다([P0] 의 두 줄 배치 대신). */
  .cart-page .cart-line, .req-item { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; }
  .cart-page .cart-line > :last-child, .req-item > :last-child { grid-column: auto; }

  .req-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; }
  .req-thumb { grid-row: span 2; }
  .req-when { grid-column: 2 / -1; flex-direction: row; justify-content: space-between; gap: 8px; }
  .req-what { grid-column: 2; }
  .req-steps li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 4px 8px; font-size: var(--fs-12); }
  .req-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .req-history time { min-width: 0; margin-right: 8px; }

  .req-grid + .card { margin-top: 12px; }
  /* 구매 신청 표 — 휴대폰에서는 행 하나를 카드 한 장으로 쌓는다(가이드 responsive-table). 머리줄은 숨기고
     보조 칸에는 data-label 로 이름을 붙인다. 표 의미는 그대로라 화면 읽기 프로그램은 표로 읽는다. */
  .req-table { display: block; overflow: visible; }
  .req-table thead { display: none; }
  .req-table tbody, .req-table tr { display: block; }
  .req-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
    padding: 14px var(--card-pad); border-bottom: 1px solid var(--line);
  }
  .req-table tbody tr:last-child { border-bottom: 0; }
  .req-table td, .card > .table-wrap .req-table td:first-child, .card > .table-wrap .req-table td:last-child {
    display: block; padding: 0; border: 0; min-width: 0; text-align: left;
  }
  .req-table .req-c-code { grid-column: 1; }
  .req-table .req-c-state { grid-column: 2; grid-row: 1; justify-self: end; }
  .req-table .req-c-when, .req-table .req-c-company { grid-column: 1 / -1; }
  .req-table td[data-label] { grid-column: 1 / -1; display: flex; gap: 8px; font-size: var(--fs-12); }
  .req-table td[data-label]::before { content: attr(data-label); flex: none; min-width: 84px; color: var(--faint); text-align: left; }
  .req-table td.num { text-align: left; }
  .req-table .req-first, .req-table .req-countries { min-width: 0; max-width: none; }
  .req-next { flex-direction: column; }
  .req-status-form .btn { width: 100%; height: 44px; }
  .req-log li { grid-template-columns: minmax(0, 1fr); }
  .req-log-memo { grid-column: 1; }
}
/* ══ [P5] 끝 ══ */

/* ══ [P6 광고 관리] 시작 ══ */
/* 광고 관리(관리자) — 목록 '노출' 칸이 주인이다: 돈을 낸 광고가 지금 나가는지, 안 나가면 왜인지.
   색은 상태색 토큰의 뜻 그대로 — 노출 중 = 통과 초록, 자리 밖 = 보류 호박, 조건 깨짐 = 반려 빨강. */
.ads-table td { vertical-align: top; }
.ads-table tbody tr.is-done td { color: var(--muted); }
.ads-c-where { white-space: nowrap; }
.ads-c-what { min-width: 220px; max-width: 360px; }
.ads-title { display: block; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ads-title:hover { text-decoration: underline; }
.ads-target { display: block; margin-top: 2px; color: var(--faint); font-size: var(--fs-12); overflow-wrap: anywhere; }
.ads-c-when, .ads-c-fee { white-space: nowrap; }
.ads-table .num { text-align: right; }
.ads-c-exp { min-width: 180px; max-width: 280px; }
.ads-exp { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 600; font-size: var(--fs-13); }
.ads-exp.is-ok { color: var(--ok-fg); }
.ads-exp.is-warn { color: var(--hold-fg); }
.ads-exp.is-bad { color: var(--bad-fg); }
.ads-exp.is-wait { color: var(--info-fg); font-weight: 500; }
.ads-exp.is-off { color: var(--faint); font-weight: 400; }
.ads-exp svg { flex: none; }
.ads-exp-note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-12); line-height: 1.45; }
.ads-c-act { width: 1%; white-space: nowrap; }
.ads-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ads-actions form { margin: 0; }

/* 등록·수정 폼 — 폼 한 장 + 오른쪽 '지금 노출' 패널(수정일 때). */
.ad-form-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 300px); gap: 16px; align-items: start; }
.ad-form-layout > .card { margin-bottom: 0; }
.ad-form-layout > .card:only-child { grid-column: 1; }
.ad-sec { margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.ad-sec + .ad-sec { padding-top: 20px; }
.ad-sec-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; padding: 0; font-size: var(--fs-14); font-weight: 700; color: var(--ink); }
.ad-sec-title svg { align-self: center; }
.ad-sec-title small { color: var(--muted); font-size: var(--fs-12); font-weight: 400; }
/* legend 는 fieldset 테두리 자리에 그려져 위 여백이 아래로 밀린다 — 띄워서 보통 제목처럼 흐르게 한다. */
.ad-sec > legend { float: left; width: 100%; }
.ad-sec > legend + * { clear: both; }
.ad-sec > .field-help { margin: -4px 0 16px; }
.ad-sec .field-row { margin-top: 0; }
.ad-field-short { max-width: 240px; }
.ad-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad-place {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; margin: 0;
  padding: 12px 14px; border: 1px solid var(--line-mid); border-radius: var(--r-sm); cursor: pointer; font-weight: 400;
}
.ad-place input { margin-top: 2px; }
.ad-place:has(:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ad-place:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ad-place-name { font-size: var(--fs-14); font-weight: 700; color: var(--ink); }
.ad-place-desc { grid-column: 2; color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }
.ad-contract { margin: 0 0 8px; }
.ad-contract dt { color: var(--faint); font-size: var(--fs-12); }
.ad-contract dd { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ad-fee { font-variant-numeric: tabular-nums; }
.ad-form .btn-row { margin-top: 20px; }
.ad-side h2 { margin: 0 0 8px; font-size: var(--fs-14); }
.ad-side .ads-exp { margin-bottom: 4px; }
.ad-side-text { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.55; }
.ad-side form { margin-top: 12px; }
.ad-side-warn { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }
.ad-form-layout .notice { margin-top: 0; }
.ad-form-layout .notice svg { vertical-align: -3px; }

@media (max-width: 900px) {
  .ad-form-layout { grid-template-columns: minmax(0, 1fr); }
  .ad-places { grid-template-columns: minmax(0, 1fr); }
  .ad-field-short { max-width: none; }
  .ad-form .btn-row .btn { flex: 1 1 0; height: 44px; }
  /* 광고 표 — 휴대폰에서는 행 하나를 카드 한 장으로(구매 신청 표와 같은 방식). 머리줄은 숨기고 data-label 로 이름. */
  .ads-table { display: block; overflow: visible; }
  .ads-table thead { display: none; }
  .ads-table tbody, .ads-table tr { display: block; }
  .ads-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
    padding: 14px var(--card-pad); border-bottom: 1px solid var(--line);
  }
  .ads-table tbody tr:last-child { border-bottom: 0; }
  .ads-table td, .card > .table-wrap .ads-table td:first-child, .card > .table-wrap .ads-table td:last-child {
    display: block; padding: 0; border: 0; min-width: 0; max-width: none; text-align: left;
  }
  .ads-table .ads-c-what { grid-column: 1; grid-row: 1; }
  .ads-table .ads-c-state { grid-column: 2; grid-row: 1; justify-self: end; }
  .ads-table td[data-label] { grid-column: 1 / -1; display: flex; gap: 8px; font-size: var(--fs-12); }
  .card > .table-wrap .ads-table td[data-label] { display: flex; }
  .ads-table td.num { text-align: left; }
  .ads-table td[data-label]::before { content: attr(data-label); flex: none; min-width: 56px; color: var(--faint); }
  .ads-table .ads-c-exp { flex-wrap: wrap; }
  .ads-table .ads-c-exp .ads-exp-note { flex-basis: 100%; padding-left: 64px; margin-top: 0; }
  .ads-table .ads-c-act { grid-column: 1 / -1; width: auto; margin-top: 6px; }
  .ads-actions { justify-content: stretch; }
  .ads-actions > .btn, .ads-actions > form { flex: 1 1 0; }
  .ads-actions .btn { width: 100%; height: 40px; }
}
/* ══ [P6] 끝 ══ */

/* ══ [P7 MD·AI 의견] 시작 ══ */
/* MD 상세분석(md/product_detail.html)의 AI 의견 카드·유사 성공 사례·배점 줄·브랜드 제출 자료·결정 폼.
   콘솔 언어 그대로: 흰 패널·1px 선·작은 글자. 판정 배지(사각 태그) 하나만 색을 갖는다. */

/* 상단 요약 — 영역 점수 막대 아래 MD 전용 배점 줄 */
.score-weights {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 10px 0 0; font-size: var(--fs-12); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.score-weights span { color: var(--ink-soft); }
.score-weights small { flex-basis: 100%; color: var(--faint); font-size: var(--fs-12); }

/* AI 의견 카드 — 머리(제목·권고 배지·버전/점수/시각) + 근거·리스크·권장 조건 세 줄 */
.ai-opinion-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.ai-opinion-head h2 { margin: 0; }
.ai-opinion-head .badge { font-size: var(--fs-13); font-weight: 700; padding: 3px 8px; }
.ai-opinion-meta {
  margin: 0 0 0 auto; font-size: var(--fs-12); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ai-opinion-body { margin: 0; display: grid; gap: 6px; }
.ai-opinion-body > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.ai-opinion-body dt { margin: 0; padding-top: 4px; font-size: var(--fs-12); color: var(--faint); }
.ai-opinion-body dd { margin: 0; min-width: 0; }
.ai-opinion-body .reason-list { margin: 0; }

/* 유사 성공 사례 — 선 하나로 의견과 나눈다(새 상자를 만들지 않는다) */
.ai-opinion-cases { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ai-opinion-cases h3 { margin: 0 0 8px; }
.cases-line { margin: 0 0 12px; font-size: var(--fs-14); color: var(--ink-soft); }
.cases-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ai-opinion-cases .table-wrap { margin-bottom: 8px; }
.cases-note { margin: 8px 0 0; font-size: var(--fs-12); color: var(--faint); }

/* 가격 비교표 아래 설명 한 줄 */
.table-note { margin: 8px 0 16px; font-size: var(--fs-12); color: var(--faint); }

/* 브랜드 제출 자료 — 대표 사진 썸네일(사진은 반경 0)·동일 제품 링크(도메인만) */
.md-photo { position: relative; display: block; width: 96px; height: 96px; background: var(--raised); overflow: hidden; }
.md-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.md-photo .ptile-ph { font-size: var(--fs-22); }
.ref-links { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-links a { overflow-wrap: anywhere; }

/* 결정 폼 — 반려 사유 칸은 '반려'를 골랐을 때만 보인다. :has 를 모르는 브라우저는 늘 보인다(안전한 쪽).
   필수 여부는 서버가 정한다(md.py decide) — CSS 는 보여 주기만 한다. */
.decide-form:has(select[name="action"] option[value="REJECT"]:checked) .decide-brand-note textarea {
  border-color: var(--ink);
}
.decide-form:not(:has(select[name="action"] option[value="REJECT"]:checked)) .decide-brand-note { display: none; }

@media (max-width: 900px) {
  .ai-opinion-meta { flex-basis: 100%; margin-left: 0; }
  .ai-opinion-body > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ai-opinion-body dt { padding-top: 0; }
}
/* AI 결과 '예시 결과' 표지(P8b, _macros.ai_sample_note) — 배지(사각 태그) + 도움말 한 줄. 새 색·모양 없음. */
.ai-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; }
.ai-sample-text { color: var(--faint); font-size: var(--fs-12); }

/* ══ [P7] 끝 ══ */