/* 비즈시그널 — 디자인 v3 → T1 (2026-09-15, docs/design.md)
   방향: 업무 도구의 신뢰감 + 외식업 현장감. 따뜻한 중립 배경 · 짙은 본문 · 절제된 테라코타 한 색.
   글꼴: Pretendard Variable 자체 호스팅(본문 16px/1.65 · 표 14px · 보조 13px), 숫자는 tabular-nums.
   색의 역할 — 주요 행동·링크·초점: --accent | 변화유형: --c-* (색 + 글자 함께) | 성공·주의·오류: --ok/--warn/--err | 보조: --mute/--faint.
   원칙: 한국어 keep-all + overflow-wrap:anywhere · flex/grid 자식 min-width:0 · 가로 넘침은 원인을 고친다(overflow-x:hidden 금지). */
:root {
  /* 2026-10-10 색 2안+(근태노트식 + GPT 원칙, docs/design.md §11) — 사용자 결정. 바탕은 밝은 회색 + 흰 카드, PC 메뉴 띠는 짙은 네이비,
     주요 버튼은 금색(--cta), 링크·선택 글자는 네이비. 금색 글자는 흰 바탕에서 읽히지 않으므로 금색은 칠한 버튼·밑줄·선택 테두리에만 쓴다.
     이전(10/5 B안) --bg #F5F7FA · --bg2 #ECEFF4 · 글자 #111827 · #283241 · #475263 · #5A6374 · 선 #DFE4EC · #E9EDF3 · #C9D1DD
     · 강조 #2563EB · #1D4ED8 · #EFF4FF · #DBE7FF · 메뉴 띠 흰색 · 모서리 10/6px */
  --bg: #F3F5F9; --bg2: #E9EDF4; --paper: #FFFFFF;
  /* 2026-10-05 색 B안(GPT 검토 반영, docs/design.md §10) — 글자는 푸른 기운을 뺀 중립 회색으로, 대비는 같은 날 한 단계 올린 수준 유지
     (흰 바탕 ink 17.7 · ink2 12.9 · mute 7.9 · faint 6.1 : 1). 이전 #111B2E · #263249(오전 #2E3A52) · #465269 · #55617A */
  --ink: #0D1A2E; --ink2: #1E2B40; --mute: #475569; --faint: #5B6678;   /* 흰 바탕 17.6 · 14.3 · 7.6 · 5.9 : 1 */
  --line: #E3E8F0; --line2: #EDF1F6; --line3: #D3DAE6;
  /* 강조의 역할 — 금색(--cta)은 주요 버튼 칠에만, 네이비(--accent)는 링크·초점·선택 글자·활성 탭. 10/5 B안 이전 #1E5EBD · #164A99 · #E7EFFB · #BED2F0 */
  --accent: #1B3766; --accent-dk: #0B1B36; --accent-bg: #FBF1DC; --accent-soft: #F0D9A6;   /* 링크·초점·선(네이비, 흰 바탕 11.4:1) · 옅은 칠은 금색 계열 */
  --cta: #E9B44C; --cta-dk: #D9A23A; --cta-ink: #0B1B36;   /* 주요 버튼 칠 — 네이비 글자 9.6:1 */
  --nav-ink: #C3D0E6; --nav-hover: #132A52;   /* 짙은 메뉴 띠 위 글자(10.9:1)·hover 칠 */
  /* 역할 토큰: 메뉴 띠 바탕 · 선택 상태(옅은 칠 + 진한 파랑 글자 + 파랑 테두리) · 입력칸 경계(흰 바탕 3.6:1) */
  /* 로고 색 — 바꾸지 않는다(2026-10-05 사용자 지시). 버튼·링크의 파랑(--accent)과 따로 둔다. */
  --brand: #1E5EBD;
  --nav-bg: #0B1B36; --sel-bg: var(--accent-bg); --sel-ink: var(--accent-dk); --sel-line: #C9932A; --control: #7B8798;
  --c-new: #1F7A4C; --c-name: #B04A08; --c-category: #5B4BC4; --c-premise: #0B6979; --c-closed: #A33232;
  --bg-new: #E4F2EA; --bg-name: #FBEEE3; --bg-category: #ECEAF8; --bg-premise: #E3F3F5; --bg-closed: #F7E7E7;
  --ok: #1F7A4C; --ok-bg: #E4F2EA; --warn: #B45309; --warn-bg: #FFF4E5; --err: #B42318; --err-bg: #FDECEA;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(34px, 4vw, 46px); --fs-h1: 30px; --fs-h2: 22px; --fs-h3: 17px; --fs-body: 16px; --fs-table: 14px; --fs-meta: 13px; --fs-badge: 12px;
  --r: 14px; --r-sm: 10px;
  --sh-1: 0 1px 1px rgba(17,24,39,.05), 0 0 0 1px rgba(17,24,39,.12);   /* 흰 바탕에서 칸 테두리가 보이게 .08→.12 (2026-10-05) */
  --sh-2: 0 2px 4px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.08), 0 0 0 1px rgba(17,24,39,.07);
  --sh-3: 0 10px 34px rgba(17,24,39,.13), 0 0 0 1px rgba(17,24,39,.08);
  --w-page: 1280px; --w-wide: 1440px; --gutter: 32px;
  --h-btn: 42px; --h-btn-sm: 34px; --h-btn-lg: 50px; --h-btn-xl: 56px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:target { scroll-margin-top: 80px; }
/* 780px 이하는 고정 머리글이 여러 줄로 접힌다(390px 에서 약 140px) — 목차로 이동한 절 제목이 머리글 뒤에 숨지 않게(2026-09-26 검수) */
@media (max-width: 780px) { :target { scroll-margin-top: var(--anchor-gap, 160px); } }
/* 바탕은 흰색(2026-10-05 사용자 승인 — 회청색 바탕이 칙칙해 보였다). --bg 는 표 머리·첫 화면 띠 같은 옅은 칠로만 쓴다. */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { text-wrap: pretty; line-height: 1.28; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-dk); }
img { max-width: 100%; display: block; }
select, input, button, textarea { font: inherit; color: inherit; }
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 3px; }   /* 파란 버튼 칠과 초점선 사이에 흰 간격 */
.mono, .num { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.muted { color: var(--mute); } .faint { color: var(--faint); }
.small { font-size: 14px; } .xs { font-size: var(--fs-badge); }
.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--w-wide); }
.grid > *, .row > *, .flex > *, .trow > *, .kpi > *, .card > *, .plan > *, .hero > *, .hero2 > *, .flow > *, .lock > *,
.detail > *, .sec-head > *, .ke > *, .step > *, .result-head > *, .consent > *, .mon > *, .hcase > *, .steps3 > * { min-width: 0; }

body.loading::before { content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 40%; background: var(--accent); z-index: 100; animation: ld 1s linear infinite; }
@keyframes ld { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.pvbar { background: #2B2A26; color: #fff; font-size: 13px; text-align: center; padding: 7px 16px; line-height: 1.5; }
.pvbar strong { color: var(--accent-soft); }
/* 키보드 사용자용 본문 건너뛰기 — 포커스될 때만 보인다 */
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: #fff; color: var(--ink); padding: 9px 13px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.skip:focus { top: 10px; color: var(--ink); box-shadow: var(--sh-3); }   /* 그림자는 보일 때만 — 숨어 있을 때 흰 메뉴 띠 위로 번졌다(2026-10-05) */

/* ---------- 헤더 ---------- */
.top { background: var(--nav-bg); color: #fff; position: sticky; top: 0; z-index: 20; }
.top .in { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand:hover { color: #fff; }
.brand .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--brand); color: #fff; display: inline-grid; place-items: center; }   /* 막대 아이콘은 늘 흰색 — 글자색(currentColor)을 따라가면 흰 메뉴 띠에서 검게 된다(2026-10-05) */
.brand .mark svg { width: 15px; height: 15px; }
.nav { display: flex; gap: 2px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--nav-ink); padding: 8px 11px; border-radius: 6px; white-space: nowrap; }
.nav a:hover { color: #fff; background: var(--nav-hover); }
.nav a.on { color: #fff; font-weight: 600; border-radius: 0; box-shadow: inset 0 -3px 0 var(--cta); }   /* 현재 메뉴는 금색 밑줄(금색 칠은 버튼에만) */
.top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.top .plan-tag { font-size: 14px; color: var(--nav-ink); white-space: nowrap; }
.top .plan-tag b { color: #fff; } .top .plan-tag:hover { color: #fff; }
.top .logout { margin: 0; } .top .linkbtn { background: none; border: 0; padding: 6px 2px; color: var(--nav-ink); font-size: 14px; cursor: pointer; white-space: nowrap; }
.top .linkbtn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.top .btn-line { background: transparent; color: #fff; border-color: #34599A; } .top .btn-line:hover { background: var(--nav-hover); color: #fff; }
/* 태블릿 세로(아이패드 820·834px) — 메뉴 띠가 891px 까지 밀려 가입 버튼이 잘렸다(2026-10-05 발견, 781~899px 전부).
   간격·글자를 줄여 한 줄을 지키고, 로그인 상태처럼 오른쪽이 더 길어도 넘치지 않고 줄을 바꾼다. */
@media (min-width: 781px) and (max-width: 980px) {
  .top .in { gap: 12px; padding: 0 20px; flex-wrap: wrap; height: auto; min-height: 62px; }
  .nav { gap: 0; font-size: 14px; }
  .nav a { padding: 7px 7px; }
  .top .right { gap: 10px; }
  .top .right .btn { height: 36px; padding: 0 12px; font-size: 14px; }
}

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-btn); padding: 0 18px;
  font-size: 15px; font-weight: 600; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
  font-family: inherit; line-height: 1; white-space: nowrap; transition: background .12s, box-shadow .12s, transform .1s, border-color .12s; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-accent { background: var(--cta); color: var(--cta-ink); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.btn-accent:hover { background: var(--cta-dk); color: var(--cta-ink); }
.btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #030712; color: #fff; }
.btn-light { background: #fff; color: var(--ink); } .btn-light:hover { background: var(--bg2); color: var(--ink); }
/* 두 번째 행동(유료지만 추천이 아닌 플랜 등) — 칠한 파랑(주요 행동)보다 약하고, 검은 칠처럼 튀지 않게(2026-10-05) */
.btn-soft { background: var(--accent-bg); color: var(--accent-dk); border-color: var(--accent-soft); } .btn-soft:hover { background: var(--accent-soft); color: var(--accent-dk); }
.btn-line { background: var(--paper); color: var(--ink2); border-color: var(--line3); font-weight: 500; }
.btn-line:hover { border-color: var(--ink2); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink2); font-weight: 500; } .btn-ghost:hover { background: var(--bg2); }
.btn-sm { height: var(--h-btn-sm); padding: 0 12px; font-size: 14px; }
.btn-lg { height: var(--h-btn-lg); padding: 0 24px; font-size: 16px; }
.btn-xl { height: var(--h-btn-xl); padding: 0 28px; font-size: 17px; border-radius: 8px; }
.btn-lock { color: var(--faint); border: 1px dashed var(--line3); background: var(--paper); font-weight: 500; }
.btn-lock:hover { color: var(--ink2); border-color: var(--ink2); }
.btn-block { width: 100%; }

/* ---------- 칩·배지 ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-badge); font-weight: 600; padding: 3px 9px; border-radius: 4px; background: var(--bg2); color: var(--ink2); white-space: nowrap; }
.chip-new { background: var(--bg-new); color: #17603A; } .chip-name { background: var(--bg-name); color: #8F3B06; }
.chip-category { background: var(--bg-category); color: #40349E; } .chip-premise { background: var(--bg-premise); color: #095A68; } .chip-closed { background: var(--bg-closed); color: #7A2626; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-new { background: var(--c-new); } .dot-name { background: var(--c-name); } .dot-category { background: var(--c-category); } .dot-premise { background: var(--c-premise); } .dot-closed { background: var(--c-closed); }
.tag-soon { font-size: 12px; font-weight: 600; color: var(--faint); border: 1px dashed var(--line3); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
a.tag-soon:hover { color: var(--accent); border-color: var(--accent); }
.pri { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-badge); font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.pri-2 { background: var(--sel-bg); color: var(--sel-ink); box-shadow: inset 0 0 0 1px var(--sel-line); } .pri-1 { background: #fff; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line3); }   /* 2026-10-10 칠한 배지 → 테두리(행동 버튼과 구분) */
.pri svg { width: 11px; height: 11px; }
.sb { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-meta); font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--paper); color: var(--ink2); box-shadow: var(--sh-1); }
.sb-strong { background: var(--ink); color: #fff; box-shadow: none; }
.sb-warn { background: var(--accent-bg); color: var(--accent-dk); box-shadow: none; }
.sig { font-size: 11px; font-weight: 500; color: var(--mute); background: transparent; border: 1px solid var(--line3); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.sig-2 { color: var(--ink2); border-color: var(--line3); }
.fmark { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
.ckmark { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--c-new); background: var(--bg-new); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
/* 가려진 상호·주소 — 서버가 자리표시(●)만 보냈고, 화면은 그 위에 모자이크만 올린다. 선택·복사할 원문이 없다. */
.mz { display: inline-block; filter: blur(4px); color: var(--ink2); letter-spacing: -1px; user-select: none; -webkit-user-select: none; cursor: default; pointer-events: none; }
.mz-hint { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--fs-badge); font-weight: 600; color: var(--mute); background: var(--bg2); border-radius: 4px; padding: 2px 7px; vertical-align: middle; white-space: nowrap; }
.mz-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--accent-dk); background: var(--accent-bg); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
/* 무료 가림 + 가입 혜택 한 상자(2026-10-05) — 왼쪽 가려지는 것 · 오른쪽 여는 방법. 글은 span 안에 둔다(flex 칸 바로 아래 글은 문장 줄바꿈이 빈 칸이 된다). */
.notice.mask-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; align-items: center; border-left-color: var(--accent); }
.mask-note .mn-l, .mask-note .mn-t { display: flex; align-items: flex-start; gap: 8px; }
.mask-note .mn-l svg, .mask-note .mn-t svg { flex: none; margin-top: 5px; }
.mask-note .mn-t svg { color: var(--ok); }
.mask-note .mn-r { display: flex; flex-direction: column; gap: 8px; padding-left: 28px; border-left: 1px solid var(--line); }
.mask-note .mn-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.mask-note .mn-a a:not(.btn) { font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
  .notice.mask-note { grid-template-columns: minmax(0, 1fr); }
  .mask-note .mn-r { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- 섹션 ---------- */
.section { margin-top: 64px; }
.section-tight { margin-top: 36px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head h2 { font-size: var(--fs-h2); font-weight: 700; }
.sec-head h3 { font-size: 19px; font-weight: 700; }
.sec-head .sub { font-size: 15px; color: var(--mute); margin-top: 5px; }
.eyebrow { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .02em; color: var(--mute); margin-bottom: 8px; }
.eyebrow.muted { color: var(--faint); }
.ref { font-size: var(--fs-meta); color: var(--mute); }
.note { font-size: var(--fs-meta); color: var(--faint); line-height: 1.6; }
.notice { background: var(--paper); border-left: 3px solid var(--accent); border-radius: 6px; padding: 12px 16px; font-size: 14.5px; color: var(--ink2); margin: 8px 0; box-shadow: var(--sh-1); }
.notice.warn { border-left-color: var(--err); }
.notice.ok-note { border-left-color: var(--ok); }
.ok { background: var(--ok-bg); color: #17603A; border-radius: 6px; padding: 12px 14px; font-size: 15px; }
.err { color: var(--err); font-size: 14px; }

/* ---------- 첫 화면 (메인) ---------- */
.hero2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 64px 0 20px; }
.hero2 .eyebrow { margin-bottom: 14px; }
.hero2 h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.hero2 .lead { font-size: 18px; color: var(--ink2); margin: 20px 0 28px; max-width: 600px; line-height: 1.6; text-wrap: pretty; }
.hero2 .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero2 .h-note { margin-top: 14px; font-size: 14px; color: var(--mute); }
/* 주 버튼 옆 글자 링크 — 첫 화면 버튼은 하나(전체 음식점), 최근 변화는 링크로(2026-09-27 외부 재검수) */
.hero2 .cta .cta-2 { align-self: center; padding: 8px 4px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.hero2 .cta .cta-2:hover { text-decoration: underline; }
/* 실제 신호 카드 — 도표 대신 결과물 하나를 보여준다 */
.hcase { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-2); padding: 22px 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
/* .hcase::before(왼쪽 5px 강조선)는 2026-10-10 뺐다 — 사례 카드가 광고 상자가 아니라 업무 사례로 보이게(GPT 검토) */
.hc-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-meta); }
.hc-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink2); background: var(--bg2); border-radius: 999px; padding: 4px 10px; }
.hc-where { color: var(--mute); font-weight: 600; }
.hc-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.3; }
.hc-diff { margin: 0; display: grid; grid-template-columns: 56px 1fr; gap: 8px 12px; font-size: 15px; }
.hc-diff div { display: contents; }
.hc-diff dt { color: var(--mute); font-size: var(--fs-meta); padding-top: 2px; }
.hc-diff dd { margin: 0; }
.hc-diff .arr { color: var(--faint); margin: 0 8px; font-weight: 700; }
.hc-fact { border-top: 1px solid var(--line2); padding-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.hc-fact b, .hc-why b { display: block; font-size: var(--fs-badge); letter-spacing: .04em; color: var(--mute); margin-bottom: 4px; font-weight: 700; }
.hc-why { background: var(--bg); color: var(--ink2); border-radius: 8px; padding: 12px 14px; font-size: 15px; line-height: 1.6; }
.hc-why b { color: var(--mute); }
.hc-more { font-size: 14px; font-weight: 600; align-self: flex-start; }
.hcase.hc-empty { color: var(--mute); }
.prev { color: var(--faint); text-decoration: line-through; font-weight: 500; }

/* ---------- 이용 방법 · 신뢰 정보 · 이용권 띠 ---------- */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps3 li { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 22px 24px; display: flex; flex-direction: column; gap: 9px; }
.steps3 .n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.steps3 b { font-size: var(--fs-h3); }
.steps3 li > span:not(.n) { color: var(--ink2); font-size: 15px; line-height: 1.6; }
.trust { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-1); padding: 34px 36px 30px; }
.tnum { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tnum > div { min-width: 0; padding-left: 16px; border-left: 3px solid var(--accent-soft); }
.tnum dt { font-size: 14px; color: var(--mute); margin-bottom: 6px; }
.tnum dd { margin: 0; font-size: clamp(36px, 3.7vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; display: flex; align-items: baseline; gap: 6px; }
.tnum dd small { font-size: 15px; font-weight: 500; color: var(--faint); }
.tsrc { margin-top: 20px; font-size: 14px; color: var(--mute); line-height: 1.6; }
.band, .band2 { margin-top: 64px; background: var(--paper); box-shadow: var(--sh-1); color: var(--ink); border-radius: 14px; padding: 38px 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }   /* 2026-10-10 넓은 금색 면이 되어 흰 카드로(회색 바탕 위) */
.band h2, .band2 h2 { font-size: 24px; color: var(--ink); }
/* 글은 버튼 앞까지 넓게(2026-09-27 사용자: 글 폭을 좁혀 줄이 갈리지 않게) */
.band > div:first-child, .band2 > div:first-child { flex: 1 1 480px; min-width: 0; }
.band p, .band2 p { color: var(--mute); margin-top: 8px; font-size: 15px; line-height: 1.65; }
.band .btns, .band2 .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.others .regions a { font-size: 15px; }

/* ---------- 기본 Hero (하위 페이지) ---------- */
/* 글 폭: 오른쪽이 비는 좁은 폭 제한을 두지 않는다 — 머리·구역 설명·FAQ 답·본문(2026-09-27 사용자: "오른쪽 빈 공간에도 넓게"). 옆에 카드·버튼이 붙는 곳만 폭을 둔다. */
.hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: start; padding: 52px 0 12px; }
.hero h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.hero h1 em { font-style: normal; color: inherit; }
.hero .lead { font-size: 17px; color: var(--ink2); margin: 18px 0 26px; max-width: 560px; line-height: 1.65; }
.hero .cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero .proof { display: flex; gap: 30px; margin: 26px 0 10px; flex-wrap: wrap; font-size: 15px; color: var(--ink2); }
.hero .proof div { min-width: 0; }
.hero .proof dt { font-size: var(--fs-meta); color: var(--mute); margin-bottom: 3px; }
.hero .proof dd { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.hero .proof dd span { font-size: var(--fs-meta); color: var(--faint); font-weight: 400; margin-left: 1px; }
.hero-sm { padding: 40px 0 6px; display: block; }
.hero-sm h1 { font-size: var(--fs-h1); }
.hero-sm .lead { font-size: 16px; max-width: none; text-wrap: pretty; }

.flow { background: var(--paper); border-radius: 12px; box-shadow: var(--sh-2); padding: 22px 24px; display: flex; flex-direction: column; gap: 13px; }
.flow .fh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 4px; }
.flow .fh .t { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .02em; color: var(--mute); }
.flow .step { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; }
.flow .step .i { width: 22px; height: 22px; border-radius: 50%; background: var(--bg2); color: var(--mute); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.flow .step:last-of-type .i { background: var(--accent); color: #fff; }
.flow .step .l { font-size: 15px; font-weight: 600; }
.flow .step .l small { display: block; font-size: var(--fs-meta); color: var(--mute); font-weight: 400; margin-top: 2px; }
.flow .step .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-align: right; }
.flow .step .v small { font-size: var(--fs-meta); color: var(--faint); margin-left: 3px; font-weight: 400; }
.flow .bar { height: 5px; border-radius: 3px; background: var(--bg2); overflow: hidden; margin: -7px 0 0 34px; }
.flow .bar i { display: block; height: 100%; background: var(--line3); border-radius: 3px; }
.flow .bar.hi i { background: var(--accent); }
.flow .ff { font-size: var(--fs-meta); color: var(--faint); border-top: 1px solid var(--line2); padding-top: 12px; line-height: 1.6; }

/* ---------- 변화유형 진입 (영업 레시피) ---------- */
.ke-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ke { background: transparent; border: 1px solid var(--line3); border-radius: var(--r); padding: 16px 18px; color: var(--ink); display: flex; flex-direction: column; gap: 7px; transition: background .12s, border-color .12s; }
.ke:hover { background: var(--paper); border-color: var(--ink2); color: var(--ink); }
.ke .kd { display: flex; align-items: center; height: 18px; color: var(--mute); }
.ke .t { font-size: 16px; font-weight: 700; }
.ke .d { font-size: var(--fs-meta); color: var(--mute); line-height: 1.5; flex: 1; }
.ke .go { font-size: 14px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.ke .go svg { transition: transform .12s; } .ke:hover .go svg { transform: translateX(3px); }

/* ---------- KPI (데이터 안내) ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 5px; color: inherit; position: relative; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kc, var(--ink)); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: inherit; }
.kpi .k { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.kpi .v { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; display: flex; align-items: baseline; gap: 3px; }
.kpi .v small { font-size: var(--fs-meta); color: var(--faint); font-weight: 400; }
.kpi .spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 5px; }
.kpi .spark i { flex: 1; background: var(--kc, var(--ink)); opacity: .22; border-radius: 2px 2px 0 0; min-height: 2px; }
.kpi .spark i:last-child { opacity: .95; }
.kpi .sub { font-size: var(--fs-badge); color: var(--faint); }
.kpi-new { --kc: var(--c-new); } .kpi-name { --kc: var(--c-name); } .kpi-category { --kc: var(--c-category); } .kpi-premise { --kc: var(--c-premise); } .kpi-closed { --kc: var(--c-closed); }

/* ---------- 사례 카드 ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; color: inherit; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: inherit; }
.card .meta { display: flex; gap: 6px; align-items: center; font-size: var(--fs-badge); flex-wrap: wrap; }
.card .meta .where { color: var(--mute); margin-left: auto; white-space: nowrap; font-size: var(--fs-meta); }
.card .title { font-size: 18px; font-weight: 700; line-height: 1.35; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.card .sub { font-size: var(--fs-meta); color: var(--mute); }
.card .why { font-size: 15px; color: var(--ink2); border-top: 1px solid var(--line2); padding-top: 10px; line-height: 1.6; }
.card .reason { font-size: var(--fs-meta); color: var(--accent-dk); background: var(--accent-bg); border-radius: 5px; padding: 6px 9px; }

/* ---------- 지역 · 지도 ---------- */
.region-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; align-items: start; }
.rlist { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 6px 0 8px; }
.rl-head { display: flex; justify-content: space-between; padding: 10px 18px 8px; font-size: var(--fs-badge); font-weight: 700; letter-spacing: .02em; color: var(--faint); border-bottom: 1px solid var(--line2); }
.rlist a { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 18px 8px; color: var(--ink); font-size: 15px; font-weight: 500; }
.rlist a:hover { background: #F8FAFC; }
.rlist .bar { grid-column: 1 / 3; height: 4px; background: var(--bg2); border-radius: 2px; }
.rlist .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.rlist .n { color: var(--mute); font-size: var(--fs-meta); }
.rlist .n b { color: var(--ink); font-weight: 600; }
.mapfig { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 14px; margin: 0; }
.mapfig .frame { width: 100%; max-height: 520px; display: flex; justify-content: center; }
.mapfig svg { width: auto; height: 100%; max-height: 520px; max-width: 100%; }
.pv-fill use { fill: #E9EDF3; stroke: none; }
.pv-line use { fill: none; stroke: #C3CAD5; stroke-width: 1.1; stroke-linejoin: round; }
.pv-dots circle { stroke: #fff; stroke-width: 1; opacity: .95; }
.pv-dots circle.pri { stroke-width: 1.6; }
.pv-label text { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: #475263; text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 3px; }
.pv-label text.metro { font-size: 11px; font-weight: 500; fill: #5A6374; }
.mapfig figcaption { padding-top: 12px; border-top: 1px solid var(--line2); margin-top: 8px; }
.mapfig .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--ink2); }
.mapfig .legend span { display: inline-flex; align-items: center; gap: 5px; }
.mapfig .pri-key i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 3.4px var(--accent); display: inline-block; margin-right: 3px; }
.mapfig .src { font-size: var(--fs-badge); color: var(--faint); margin-top: 8px; line-height: 1.5; }
.regions { display: flex; flex-wrap: wrap; gap: 8px; }
.regions a { font-size: 15px; font-weight: 500; background: var(--paper); box-shadow: var(--sh-1); border-radius: 6px; padding: 8px 12px; color: var(--ink); }
.regions a:hover { box-shadow: var(--sh-2); }
.regions a .num, .regions a .mono { color: var(--mute); margin-left: 6px; font-size: var(--fs-meta); }
.regions a.on { background: var(--sel-bg); color: var(--sel-ink); box-shadow: inset 0 0 0 1px var(--sel-line); } .regions a.on .num, .regions a.on .mono { color: var(--sel-ink); }
.region-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; }
.klist { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.klist .li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line2); font-size: 15px; font-weight: 600; color: inherit; }
.klist .li:last-child { border-bottom: 0; } .klist .li .num, .klist .li .mono { font-size: 22px; font-weight: 700; }
.klist .li:hover { background: #F8FAFC; }
.panel { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.panel h3 { font-size: var(--fs-h3); }
.plan-now { font-size: 22px; font-weight: 700; }
.kv-me { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 14.5px; margin: 6px 0 0; }
.kv-me dd { margin: 0; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.bars div { flex: 1; background: #D3DAE4; border-radius: 3px 3px 0 0; } .bars div.hi { background: var(--accent); }
.bars-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); }
form.lead { display: flex; gap: 8px; flex-wrap: wrap; }
form.lead input[type=email] { font-size: 15px; height: var(--h-btn); padding: 0 12px; border: 1px solid var(--control); border-radius: 6px; min-width: 220px; flex: 1; }
.consent { font-size: var(--fs-meta); color: var(--mute); display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }
.consent input { margin-top: 3px; }
.picker { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; max-width: 680px; }
.picker label { font-size: var(--fs-meta); color: var(--mute); display: block; margin-bottom: 4px; font-weight: 600; }
.picker select { width: 100%; height: var(--h-btn); border: 1px solid var(--control); border-radius: 6px; padding: 0 12px; background: #fff; font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.faq-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.faq-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: var(--fs-meta); font-weight: 600; color: var(--ink2); text-decoration: none; }
.faq-jump a:hover { border-color: var(--accent); color: var(--accent-dk); }
.faq-jump .num { color: var(--faint); font-weight: 500; }
.sec-head .more { font-size: var(--fs-meta); font-weight: 700; color: var(--accent); white-space: nowrap; text-decoration: none; align-self: center; }
.sec-head .more:hover { color: var(--accent-dk); text-decoration: underline; }
.faq details { border-bottom: 1px solid var(--line2); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 20px; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { color: var(--accent-dk); }
.faq .a { padding: 0 20px 18px; font-size: 15px; color: var(--ink2); line-height: 1.7; }

/* ---------- 검색 필터 ---------- */
.filters { position: sticky; top: 62px; z-index: 10; background: var(--paper); box-shadow: var(--sh-1); border-radius: 0 0 10px 10px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.filters .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters select { font-size: 15px; font-weight: 500; background: var(--paper); border: 1px solid var(--control); border-radius: 6px; height: 38px; padding: 0 30px 0 12px; min-width: 152px; color: var(--ink); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6C64' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.filters select.mini { min-width: 128px; height: 34px; font-size: 14px; }
.filters select:disabled { color: var(--faint); background-color: var(--bg2); }
.filters .date { height: 34px; padding: 0 10px; border: 1px solid var(--control); border-radius: 6px; font-size: 14px; }
.filters .sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }
.filters .fg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }   /* 라벨+입력이 한 묶음으로 줄바꿈된다 */
.filters .lbl { font-size: var(--fs-badge); font-weight: 700; color: var(--faint); letter-spacing: .02em; margin-right: 1px; }
.pill { height: 34px; font-size: 14px; font-weight: 500; border-radius: 999px; padding: 0 13px; border: 1px solid var(--line3); background: var(--paper); color: var(--ink2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; white-space: nowrap; position: relative; margin: 0; }
.pill:hover { border-color: var(--ink2); }
.pill.on { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }
.pill.on .dot { box-shadow: none; }
.pill.locked { color: var(--faint); border-style: dashed; }
.pill.locked:hover { color: var(--accent); border-color: var(--accent); }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.recipe-bar { margin-top: 14px; background: var(--accent-bg); border-radius: var(--r); padding: 14px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.recipe-bar .ic { width: 36px; height: 36px; border-radius: 9px; background: #fff; color: var(--accent-dk); display: grid; place-items: center; }
.recipe-bar .t { font-size: 15px; font-weight: 700; }
.recipe-bar .s { font-size: var(--fs-meta); color: var(--ink2); margin-top: 2px; line-height: 1.5; }
.recipe-bar .rb-act { display: flex; gap: 6px; }
.recipe-bar .fo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 9px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
.recipe-bar .fo .fb { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--accent-dk); background: var(--accent-bg); border-radius: 3px; padding: 2px 6px; }
.recipe-bar .fo b { font-size: 14px; font-weight: 600; }
.recipe-bar .fo .wy { font-size: var(--fs-meta); color: var(--mute); flex: 1 1 240px; min-width: 0; }

/* ---------- 결과 헤더 · 활성 필터 ---------- */
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 0 8px; flex-wrap: wrap; }
.result-head h2 { font-size: 20px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.result-head h2 .num { font-size: 28px; color: var(--ink); }
.result-head .rh-sub { font-size: 15px; font-weight: 500; color: var(--mute); }
.result-head .tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.facets { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 7px; }
.facets .fx { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-meta); color: var(--mute); }
.facets .fx b { color: var(--ink); font-weight: 600; }
.facets .fx svg { color: var(--faint); }
.facets a.tog { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.facets a.tog:hover { border-bottom-color: var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--paper); color: var(--ink2); box-shadow: var(--sh-1); }
.fchip .x { color: var(--faint); font-weight: 400; font-size: 14px; line-height: 1; }
.fchip:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--ink2); }
.fchip:hover .x { color: var(--err); }
.fchip.static { color: var(--mute); box-shadow: none; background: var(--bg2); }
.fchip.clear { background: transparent; box-shadow: none; color: var(--accent); }
.seg { display: inline-flex; background: var(--bg2); border-radius: 7px; padding: 3px; }
.seg a, .seg button { font-size: 14px; font-weight: 600; height: 28px; padding: 0 11px; border-radius: 5px; color: var(--mute); border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg .on { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.seg svg { width: 14px; height: 14px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--mute); padding-bottom: 10px; }
.pnote { position: relative; }
.pnote summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; }
.pnote summary::-webkit-details-marker { display: none; }
.pnote > div { position: absolute; right: 0; top: 26px; z-index: 12; width: min(440px, 80vw); background: var(--paper); box-shadow: var(--sh-3); border-radius: var(--r); padding: 14px 16px; font-size: 14px; color: var(--ink2); line-height: 1.65; }

/* ---------- 결과 표 ---------- */
.tbl-wrap { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.thead, .trow { display: grid; grid-template-columns: 30px minmax(200px, 2fr) minmax(96px, .9fr) minmax(180px, 1.7fr) 96px 78px 112px 22px; gap: 12px; align-items: center; padding: 12px 16px; font-size: var(--fs-table); }
.thead { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--faint); border-bottom: 1px solid var(--line); padding: 9px 16px; background: var(--bg2); }
details.r { border-bottom: 1px solid var(--line2); }
details.r:last-of-type { border-bottom: 0; }
details.r > summary { list-style: none; cursor: pointer; }
details.r > summary:hover { background: #F8FAFC; }
details.r > summary::-webkit-details-marker { display: none; }
details.r[open] { background: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
details.r[open] > summary { background: #F8FAFC; }
.trow .nm { font-weight: 600; line-height: 1.35; font-size: 15px; }
.trow .nm .pri { margin-right: 6px; vertical-align: 1px; }
.trow .why1 { font-size: var(--fs-meta); color: var(--mute); font-weight: 400; display: block; margin-top: 3px; }
.trow .car { color: var(--faint); text-align: right; transition: transform .15s; }
details.r[open] .trow .car { transform: rotate(180deg); }
.trow .addr { font-size: var(--fs-meta); color: var(--faint); display: block; }
.trow .tel { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nb { white-space: nowrap; }   /* 면적 같은 값 하나는 중간에서 끊지 않는다. 구→신 은 화살표 뒤에서만 줄이 바뀐다 */
.nv-btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 9px; border-radius: 4px;
  font-size: var(--fs-badge); font-weight: 600; white-space: nowrap; text-decoration: none;
  background: var(--accent-bg); color: var(--accent-dk); border: 1px solid var(--accent-soft); }
.nv-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.nv-mini { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; flex: none;
  font-size: 10.5px; font-weight: 700; text-decoration: none; background: var(--bg2); color: var(--mute); }
.nv-mini:hover { background: var(--accent); color: #fff; }
.btn.ck.on { background: var(--bg-new); border: 1px solid var(--c-new); color: var(--c-new); }
.btn.ck.on svg { color: var(--c-new); }
.acts-note { font-size: var(--fs-badge); color: var(--faint); margin-top: 2px; line-height: 1.5; text-align: left; }
.reason.sub { color: var(--mute); }
.reason.sub b { color: var(--mute); font-weight: 600; }
.detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; padding: 8px 20px 20px 60px; border-top: 1px solid var(--line2); }
.detail h4 { margin: 12px 0 6px; font-size: 11.5px; letter-spacing: .04em; color: var(--faint); }
.detail .facts { font-size: 15px; color: var(--ink); line-height: 1.6; }
.detail .reason { margin-top: 8px; font-size: 14px; color: var(--accent-dk); background: var(--accent-bg); border-radius: 5px; padding: 6px 10px; display: inline-block; }
.detail ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink2); font-size: 14px; }
.detail .kv { display: grid; grid-template-columns: 80px 1fr; gap: 5px 12px; font-size: 14px; margin: 0; }
.detail .kv dt { color: var(--mute); } .detail .kv dd { margin: 0; }
.detail .acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding-top: 12px; }
.detail .acts .btn { justify-content: center; }
.lock { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper); border-radius: var(--r); padding: 22px 24px; margin-top: 14px; flex-wrap: wrap; box-shadow: var(--sh-1); border: 1px dashed var(--line3); }
/* 글은 버튼 앞까지 넓게 — 640px 제한으로 오른쪽이 비고 '준비 / 중)'처럼 괄호 끝이 갈렸다(2026-09-28, .band 와 같은 규칙) */
.lock > div:first-child { flex: 1 1 480px; }
.lock .t { font-size: 17px; font-weight: 700; } .lock .t .num { color: var(--accent); }
.lock .s { font-size: 14px; color: var(--mute); margin-top: 3px; }
.lock .b { display: flex; gap: 8px; flex-wrap: wrap; }
.empty { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 44px 24px; text-align: center; }
.empty .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--bg2); color: var(--mute); display: grid; place-items: center; margin: 0 auto 12px; }
.empty .t { font-size: 17px; font-weight: 700; } .empty .s { font-size: 14.5px; color: var(--mute); margin-top: 4px; }
.empty .b { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pager a, .pager span { font-size: 14px; font-weight: 600; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 6px; background: var(--paper); box-shadow: var(--sh-1); color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; }
.pager a:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--ink2); }
.pager .on { background: var(--sel-bg); color: var(--sel-ink); box-shadow: inset 0 0 0 1px var(--sel-line); }

/* 지도 보기 */
.mapview { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 12px; display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
.mapview canvas { width: 100%; height: 560px; border-radius: 7px; background: #F8FAFC; display: block; cursor: grab; }
.mapview .side { display: flex; flex-direction: column; gap: 10px; }
.mapcard { background: var(--bg2); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.mapcard .mc-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mapcard .mc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mapcard .mc-meta { font-size: var(--fs-meta); color: var(--mute); }
.mapcard .mc-why { font-size: 14px; color: var(--ink2); }
.maplegend { font-size: var(--fs-meta); color: var(--mute); display: flex; flex-direction: column; gap: 6px; }
.maplegend span { display: inline-flex; align-items: center; gap: 6px; }
.mapnote { font-size: var(--fs-meta); color: var(--faint); line-height: 1.55; }

/* ---------- 모니터링 ---------- */
.mon-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mon-sum > div { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 18px; }
.mon-sum .l { font-size: var(--fs-meta); color: var(--mute); }
.mon-sum .v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.mon-sum .hi .v { color: var(--accent); }
.mon-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mon { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 20px; display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.mon.has-new { box-shadow: 0 0 0 1px var(--accent-soft), var(--sh-1); }
.mon .t { font-size: 16px; font-weight: 700; }
.mon .cond { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.mon .meta { font-size: var(--fs-meta); color: var(--faint); margin-top: 7px; }
.mon .cnt { text-align: right; }
.mon .cnt .v { font-size: 24px; font-weight: 700; color: var(--accent); }
.mon .cnt .z { font-size: 14px; color: var(--faint); }
.mon .cnt .b { font-size: var(--fs-badge); color: var(--mute); margin-top: 3px; }
.mon .act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 가격 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-top: 26px; }
.plan { background: var(--paper); border: 1px solid transparent; border-radius: 12px; box-shadow: var(--sh-1); padding: 26px 24px 24px; position: relative;
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px;
  transition: box-shadow .18s ease, border-color .18s ease; animation: plan-in .5s cubic-bezier(.22,.61,.36,1) both; }
.plan:nth-child(2) { animation-delay: .07s; } .plan:nth-child(3) { animation-delay: .14s; }
@keyframes plan-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.plan:hover, .plan:focus-within { box-shadow: var(--sh-2); border-color: var(--line3); }
/* 최상위 이용권(프로) — 포인트 색 테두리 + 옅은 배경 + 그림자. 카드 크기는 다른 카드와 같다.
   등장 1회 · 호버/포커스에는 테두리·그림자만 · 테두리 위 느린 빛 흐름(::after, 9초·옅게) · reduced-motion 이면 전부 멈춘다. */
.plan.rec { border-color: var(--accent); background: var(--paper);   /* 그라데이션 배경을 뺐다(2026-10-05, 단색 원칙) */
  box-shadow: 0 0 0 1px var(--accent), 0 14px 36px rgba(11,27,54,.12), 0 2px 6px rgba(11,27,54,.05); }
.plan.rec:hover, .plan.rec:focus-within { border-color: var(--accent-dk);
  box-shadow: 0 0 0 1px var(--accent-dk), 0 18px 44px rgba(11,27,54,.18), 0 2px 8px rgba(11,27,54,.07); }
.plan.rec::after { content: ""; position: absolute; inset: -2px; border-radius: 13px; padding: 2px; pointer-events: none; opacity: .55;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%); background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: plan-sheen 9s linear infinite; }
@keyframes plan-sheen { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.rec-tag { position: absolute; top: -12px; left: 22px; background: var(--accent); color: #fff; font-size: var(--fs-badge); font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: .02em; }
.rec-tag.inline { position: static; display: inline-block; margin-left: 8px; padding: 2px 7px; font-size: 11px; vertical-align: 1px; }
.plan h3 { font-size: 21px; font-weight: 700; }
.plan .tag { font-size: 14px; color: var(--mute); margin-top: 3px; }
.plan .p-price { display: flex; flex-direction: column; gap: 4px; }
.plan .p-price .now { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.plan .p-price .per { font-size: 14px; color: var(--mute); }
.plan .p-price .fine { font-size: var(--fs-meta); color: var(--faint); line-height: 1.5; }
.plan.rec .p-price .now { color: var(--accent-dk); }
.plan .p-fit { font-size: 14px; color: var(--ink2); line-height: 1.55; background: var(--bg2); border-radius: 8px; padding: 9px 12px; }
.plan .p-fit b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--mute); margin-bottom: 2px; }
.plan.rec .p-fit { background: var(--accent-bg); color: var(--accent-dk); }
.plan.rec .p-fit b { color: var(--accent-dk); }
.plan .p-key { margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink); line-height: 1.5; }
.plan .p-key li { display: flex; gap: 9px; align-items: flex-start; }
.plan .p-key li svg { flex: none; margin-top: 4px; color: var(--c-new); }
.plan .p-cta { padding-top: 4px; }
.plan.rec .p-cta .btn { font-weight: 700; box-shadow: 0 6px 16px rgba(201,147,42,.32), inset 0 -1px 0 rgba(0,0,0,.12); }
.plan.rec .p-cta .btn:hover { box-shadow: 0 8px 20px rgba(201,147,42,.42), inset 0 -1px 0 rgba(0,0,0,.12); }
.plans-note { font-size: 14px; color: var(--mute); margin-top: 14px; line-height: 1.6; }
.benefits { margin-top: 18px; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 0 22px; align-items: start;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 20px; }
.benefits .bh { font-size: var(--fs-badge); font-weight: 700; letter-spacing: .02em; color: var(--mute); padding-top: 2px; padding-right: 8px; border-right: 1px solid var(--line2); margin-right: 4px; white-space: nowrap; }
.benefits .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.benefits .b .t { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.benefits .b .t svg { color: var(--accent); flex: none; }
.benefits .b .d { font-size: var(--fs-meta); color: var(--mute); line-height: 1.55; }
.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-table); background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.matrix th, .matrix td { padding: 0 14px; height: 46px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.matrix thead th { font-size: var(--fs-badge); letter-spacing: .02em; color: var(--faint); background: var(--bg2); font-weight: 700; text-align: center; height: 40px; }
.matrix thead th:first-child { text-align: left; }
.matrix thead th.rec { color: var(--accent-dk); }
.matrix tbody th { text-align: left; font-weight: 500; color: var(--ink2); font-size: 14px; }
.matrix td.c { text-align: center; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.matrix tbody tr:hover { background: #F8FAFC; }
.matrix .yes { color: var(--c-new); font-weight: 600; } .matrix .no { color: var(--faint); }
/* 기능 비교: 칸마다 세로줄, 추천(프로) 칸은 옅은 파란 바탕, 위 카드 묶음과 여백(2026-09-27 사용자 지적) */
.matrix th + th, .matrix td { border-left: 1px solid var(--line2); }
.matrix thead th.rec { background: var(--accent-bg); } .matrix td.rec { background: #F5F9FF; }
#compare { margin-top: 56px; }
.cmp-stack { display: none; }
.cs { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.cs.rec { box-shadow: 0 0 0 2px var(--accent), var(--sh-1); }
.cs-h { font-size: 16px; font-weight: 700; padding: 12px 16px; background: var(--bg2); }
.cs dl { margin: 0; }
.cs-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line2); font-size: 14px; }
.cs-row:last-child { border-bottom: 0; }
.cs dt { color: var(--mute); } .cs dd { margin: 0; font-weight: 600; text-align: right; }
.cs dd.yes { color: var(--c-new); } .cs dd.no { color: var(--faint); font-weight: 400; }
.beta-form { background: var(--paper); border-radius: 12px; box-shadow: var(--sh-2); padding: 28px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.beta-form .full { grid-column: 1 / 3; }
.beta-form label { font-size: var(--fs-meta); font-weight: 600; color: var(--ink2); display: block; margin-bottom: 5px; }
.beta-form input, .beta-form select, .beta-form textarea { width: 100%; font-size: 15px; height: var(--h-btn); padding: 0 12px; border: 1px solid var(--control); border-radius: 6px; background: #fff; }
.beta-form textarea { min-height: 84px; padding: 10px 12px; resize: vertical; height: auto; }
.beta-form input[type=checkbox] { width: auto; height: auto; margin: 3px 0 0; flex: none; }
.beta-form h3 { grid-column: 1 / 3; font-size: 21px; }
.beta-form .hint { grid-column: 1 / 3; font-size: 14px; color: var(--mute); line-height: 1.65; }
/* 현황 페이지(검색 유입 입구) 첫 화면의 행동 버튼 — 매장 목록으로 가는 버튼이 맨 아래에만 있었다(2026-09-26 검수) */
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.hero-acts .small { flex-basis: 100%; }
/* 만료 전 안내 팝업(2026-09-26 — components/RenewNotice.astro, /js/renew.js). 휴대폰에서는 아래에서 올라오는 카드 */
.renew-pop { position: fixed; inset: 0; z-index: 60; background: rgba(17,24,39,.38); display: flex; align-items: center; justify-content: center; padding: 16px; }
.renew-pop .rp-box { background: var(--paper); border-radius: 12px; box-shadow: var(--sh-3); max-width: 440px; width: 100%; padding: 22px 22px 18px; }
.renew-pop .rp-t { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.4; }
.renew-pop p { margin: 0 0 8px; font-size: 15px; color: var(--ink2); line-height: 1.65; }
.renew-pop .rp-b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 480px) { .renew-pop { align-items: flex-end; } .renew-pop .rp-b .btn { flex: 1 1 auto; } }
/* 신청 내용 확인 카드(2026-09-26 사용자 결정) — 동의·신청 직전 요약. 플랜·지역을 바꾸면 /js/pricing.js 가 바꾼다 */
.apply-sum .as-box { background: var(--accent-bg); border: 1px solid var(--accent-soft); border-radius: 8px; padding: 12px 16px; }
.apply-sum .as-t { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-dk); margin-bottom: 6px; font-size: 15px; }
.apply-sum ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink2); line-height: 1.75; }
.beta-form .fgroup { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; font-size: 15px; }   /* 세금계산서 정보 묶음 머리 */
.beta-form .acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stepsline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink2); margin-top: 16px; }
.stepsline .s { background: var(--paper); box-shadow: var(--sh-1); border-radius: 5px; padding: 5px 11px; font-weight: 600; }
.stepsline .ar { color: var(--faint); }
.cv { display: block; margin-top: 5px; color: var(--faint); font-size: var(--fs-badge); }

/* ---------- 가이드 ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prose { font-size: 16px; line-height: 1.75; color: var(--ink2); }
.prose h2 { font-size: var(--fs-h2); color: var(--ink); margin: 36px 0 12px; }
.prose h3 { font-size: 18px; color: var(--ink); margin: 24px 0 8px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 12px; }
.prose li { margin-bottom: 7px; }
/* 이용 방법(/guide/how-to-use, 2026-09-25) — 글은 읽기 폭, 화면 그림은 그보다 넓게(글자가 읽히게). 그림을 누르면 원본. */
.howto { font-size: 16px; line-height: 1.75; color: var(--ink2); }
.howto > section { margin-top: 34px; }
.howto h2 { font-size: var(--fs-h2); color: var(--ink); margin: 0 0 12px; }
.howto p, .howto ul { margin: 0 0 12px; }
.howto ul { padding-left: 22px; } .howto li { margin-bottom: 7px; }
.step-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step-n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; }
.tag-plan { font-size: var(--fs-badge); font-weight: 600; color: var(--accent-dk); background: var(--accent-bg); border-radius: 4px; padding: 2px 8px; }
.howto-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.howto-plans .panel { gap: 6px; } .howto-plans ul { margin: 0; padding-left: 18px; }
.howto-toc { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.howto-toc a { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--paper); border-radius: var(--r-sm); box-shadow: var(--sh-1); color: var(--ink); text-decoration: none; font-size: 15px; }
.howto-toc a:hover { box-shadow: var(--sh-2); } .howto-toc .n { color: var(--accent); font-weight: 700; }
.shot { margin: 14px 0 24px; }
.shot a { display: block; } .shot img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--sh-2); background: var(--paper); }
.shot.narrow img { max-width: 520px; }
.shot figcaption { font-size: var(--fs-meta); color: var(--mute); margin-top: 8px; }
@media (max-width: 720px) { .howto-plans { grid-template-columns: 1fr; } .howto-toc { grid-template-columns: 1fr 1fr; } .howto-toc a { padding: 8px 10px; font-size: 14px; align-items: flex-start; } }
.sig-list { display: flex; flex-direction: column; gap: 8px; }
.sig-list .it { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 13px 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; }
.crumbs { font-size: var(--fs-meta); color: var(--mute); display: flex; gap: 6px; flex-wrap: wrap; padding: 16px 0 0; }
.crumbs a { color: var(--mute); } .crumbs a:hover { color: var(--ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- 로그인·계정·문의 ---------- */
.auth { max-width: 470px; margin: 56px auto; background: var(--paper); border-radius: 12px; box-shadow: var(--sh-2); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.auth h1 { font-size: 24px; }
/* 가입 화면 핵심 한 줄·아래 작은 안내(2026-10-09 '직관적으로') */
.auth .auth-lead { font-size: 16px; color: var(--ink2); line-height: 1.6; margin: 0; }
.auth .auth-foot { text-align: center; margin: 0; }
.auth input:not([type=checkbox]) { width: 100%; font-size: 16px; height: var(--h-btn-lg); padding: 0 14px; border: 1px solid var(--control); border-radius: 6px; font-family: var(--mono); }
.keyform { display: flex; flex-direction: column; gap: 10px; }
.lbl-plain { font-size: var(--fs-meta); font-weight: 600; color: var(--ink2); }
.keybox { font-family: var(--mono); font-size: 15px; background: var(--bg2); border: 1px dashed var(--line3); border-radius: 6px; padding: 12px 14px; word-break: break-all; }
.formwrap { max-width: 640px; margin: 8px auto 0; }
.formwrap > .note { margin-top: 12px; }
/* 소셜 로그인 — 각 사 브랜드 색. 로고는 인라인 SVG(외부 이미지 없음). */
.sso { display: flex; flex-direction: column; gap: 8px; }
.sso .btn { justify-content: center; font-weight: 600; gap: 10px; }
.sso-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.sso-google { background: #fff; color: #1f1f1f; border: 1px solid var(--line3); }
.sso-google:hover { background: #f6f5f3; }
.sso-kakao { background: #FEE500; color: #191600; border: 1px solid #F0D800; }
.sso-kakao:hover { background: #F5DC00; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: var(--fs-meta); margin: 4px 0 2px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.ent { display: grid; grid-template-columns: 1fr minmax(240px, 300px); gap: 28px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 22px 26px; margin: 18px 0 6px; }
.ent h3 { font-size: 18px; margin: 4px 0 8px; letter-spacing: -.01em; }
.ent p { margin: 0 0 6px; line-height: 1.65; font-size: 15px; color: var(--ink2); }
.ent .eyebrow { font-size: 18px; letter-spacing: -.01em; margin-bottom: 10px; }
.ent .ent-r { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-self: center; width: 100%; padding: 22px 20px; background: var(--bg2); border-radius: var(--r); }
.ent .ent-cap { font-size: var(--fs-meta); color: var(--faint); }
.ent .ent-price { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.cta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 22px; }
.cta-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 15px 17px; }
.cta-card .b { font-weight: 700; font-size: 14.5px; margin-bottom: 5px; }
.cta-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink2); }

/* ---------- 푸터 ----------
   세 칸(소개 | 서비스 | 안내) + 아래 사업자 정보 띠. 링크 두 칸은 글자 폭만큼만 잡아 오른쪽으로 모은다(2026-09-22). */
/* 2026-10-05 사용자 지시 "푸터 빈 공간이 많다 — 글씨를 줄이든지": 글자 13.5→12.5px, 링크 두 칸은 2열(.fc-links), 위아래 여백·줄 간격 축소. */
.foot { max-width: var(--w-wide); margin: 56px auto 0; padding: 22px var(--gutter) 30px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--mute); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px 64px; align-items: start; }
.foot .b { color: var(--ink); font-weight: 700; margin-bottom: 6px; font-size: 13px; letter-spacing: -.01em; }
/* 문단 폭을 34ch 로 묶었더니 넓은 칸에서도 문장이 어중간하게 꺾이고 오른쪽이 비었다 — 칸 폭을 그대로 쓴다(2026-09-22). 2026-10-05: 아주 넓은 화면에서만 68ch 에서 꺾는다 */
.foot .fc p { margin: 0 0 3px; line-height: 1.55; max-width: 68ch; }
.foot .fc p:last-child { margin-bottom: 0; }
.foot .fc strong { color: var(--ink2); font-weight: 600; }
.foot .fc-brand .b { font-size: 14.5px; }
.foot .asof { color: var(--faint); margin-top: 6px; font-size: var(--fs-badge); }
.foot a { color: var(--ink2); display: block; padding: 2px 0; width: fit-content; }
.foot a:hover { color: var(--accent); }
.foot .fc-links { display: grid; grid-template-columns: repeat(2, auto); column-gap: 20px; row-gap: 0; align-content: start; }
.foot .fc-links .b { grid-column: 1 / -1; }
.foot .biz { grid-column: 1 / -1; border-top: 1px solid var(--line2); padding-top: 12px; margin-top: 2px; font-size: var(--fs-badge); color: var(--faint); line-height: 1.6; }
.foot .biz .who { margin: 0 0 6px; }
.foot .biz strong { color: var(--mute); font-weight: 600; }
.foot .biz dl { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 0; }
.foot .biz dl + dl { margin-top: 2px; }
.foot .biz dl > div { display: flex; gap: 7px; min-width: 0; }
.foot .biz dt { flex: 0 0 auto; color: var(--faint); }
.foot .biz dd { margin: 0; color: var(--mute); min-width: 0; overflow-wrap: anywhere; }
.foot .biz .pv { margin: 12px 0 0; }
/* 중간 폭: 링크 칸 사이만 좁힌다(세 칸 배치는 그대로) */
@media (min-width: 781px) and (max-width: 1100px) {
  .foot { gap: 24px 48px; }
}

/* ---------- 관리자 ---------- */
.adm { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 62px); }
.adm .side { background: var(--paper); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.adm .side a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--ink2); font-size: 15px; font-weight: 500; }
.adm .side a.on, .adm .side a:hover { background: var(--bg2); color: var(--ink); }
.adm .side .h { font-size: 11px; letter-spacing: .04em; color: var(--faint); margin: 14px 12px 4px; font-weight: 700; }
.adm .main { padding: 22px 28px 60px; min-width: 0; }
.adm h1 { font-size: 21px; margin-bottom: 14px; }
.adm h2 { font-size: 16px; margin: 22px 0 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 12px 14px; }
.stat .l { font-size: var(--fs-meta); color: var(--mute); } .stat .v { font-size: 24px; font-weight: 700; margin-top: 2px; } .stat .s { font-size: var(--fs-badge); color: var(--faint); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-table); background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: top; }
.tbl th { font-size: 11.5px; letter-spacing: .02em; color: var(--faint); background: var(--bg2); font-weight: 700; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.mono, .tbl td.num { font-size: 13px; white-space: nowrap; }
.tbl td { line-height: 1.4; }
.tbl-scroll { overflow-x: auto; border-radius: var(--r); }
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-new); box-shadow: 0 0 0 3px var(--bg-new); margin-right: 6px; }
.off-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line3); margin-right: 6px; }
.tl { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.tl .it { position: relative; font-size: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.tl .it::before { content: ""; position: absolute; left: -23px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--line3); }
.tl .it.page::before { background: var(--ink); }
.tl .it.event::before { background: var(--accent); }
/* 관리자 세션 상세 — 같은 사람의 다른 방문·같은 연결의 다른 방문(2026-10-13) */
.vh { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.vh-it { background: var(--paper); border-radius: var(--r-sm); box-shadow: var(--sh-1); padding: 9px 12px; font-size: 14px; }
.vh-it .small { margin-top: 3px; line-height: 1.5; }
.tl .t { font-size: 13px; color: var(--mute); }
.tl .d { font-size: var(--fs-badge); color: var(--faint); }
.kv2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kv2 div { background: var(--paper); border-radius: 6px; box-shadow: var(--sh-1); padding: 8px 10px; font-size: var(--fs-meta); }
.kv2 b { display: block; font-size: 16px; font-weight: 600; }
.sus { display: inline-block; font-size: var(--fs-badge); font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.sus-0 { background: var(--bg-new); color: #17603A; } .sus-1 { background: #FFF4D6; color: #8A5A00; } .sus-2 { background: var(--bg-closed); color: #7A2626; }
.aform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 18px; }
.aform label { font-size: var(--fs-badge); font-weight: 600; color: var(--mute); display: block; margin-bottom: 3px; }
.aform input, .aform select, .aform textarea { width: 100%; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line3); border-radius: 5px; }
.aform .full { grid-column: 1 / -1; }
.aform .acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm .filters-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.adm .filters-a input, .adm .filters-a select { font-size: 14px; padding: 7px 10px; border: 1px solid var(--line3); border-radius: 5px; }
.ing { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--c-new); border-radius: 8px; padding: 14px 18px; margin-bottom: 18px; }
.ing.ing-no_update { border-left-color: var(--c-premise); }
.ing.ing-failed, .ing.ing-stale, .ing.ing-never { border-left-color: var(--c-closed); background: #FDF6F5; }
.ing .ih { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.ing .ih .dotx { width: 9px; height: 9px; border-radius: 50%; background: var(--c-new); }
.ing.ing-no_update .ih .dotx { background: var(--c-premise); }
.ing.ing-failed .ih .dotx, .ing.ing-stale .ih .dotx, .ing.ing-never .ih .dotx { background: var(--c-closed); }
.ing .ih .st { color: var(--ink2); }
.ing .ih .warn { font-size: var(--fs-badge); font-weight: 700; color: #fff; background: var(--c-closed); border-radius: 4px; padding: 2px 8px; }
.ing .ih .re { margin-left: auto; font-size: var(--fs-badge); color: var(--mute); }
.ing .ig { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); }
.ing .ig > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ing .ig .l { font-size: var(--fs-badge); color: var(--mute); }
.ing .ig b { font-size: 16px; }
.ing .ierr { margin-top: 10px; font-size: var(--fs-badge); color: var(--c-closed); }
.pstat { font-size: var(--fs-badge); font-weight: 600; border-radius: 3px; padding: 2px 7px; }
.pstat.p-ok { background: var(--bg-new); color: var(--c-new); }
.pstat.p-no_update { background: var(--bg-premise); color: var(--c-premise); }
.pstat.p-failed { background: var(--bg-closed); color: var(--c-closed); }
.pstat.p-skip { background: var(--bg2); color: var(--mute); }

/* ---------- 진입 애니메이션 (1회만, reduced-motion 이면 전부 꺼진다) ---------- */
.flow.seq .step { opacity: .35; transform: translateY(3px); transition: opacity .34s ease, transform .34s ease; }
.flow.seq .step.on, .flow.seq-done .step { opacity: 1; transform: none; }
.flow .bar i { transition: width .7s cubic-bezier(.22,.61,.36,1); }
.pv-dots circle.pri { transform-box: fill-box; transform-origin: center; }
svg.dots-in .pv-dots circle.pri { animation: pri-once .9s ease-out 1; }
@keyframes pri-once { 0% { opacity: 1; } 40% { opacity: .55; } 100% { opacity: 1; } }
.pv-dots circle { transition: opacity .32s ease; }
.results-pending { opacity: .5; transition: opacity .12s ease; pointer-events: none; }
/* 필터를 바꾼 뒤 다음 화면이 올 때까지 — 제목 글자(곳 수·조건)는 통째로 숨기고 '데이터 비교 중…' 한 줄만(예전엔 조건 글 위에 겹쳐 보였다, 2026-09-27 사용자 지적) */
.result-head h2[data-comparing] { font-size: 0; min-height: 36px; align-items: center; }
.result-head h2[data-comparing] > * { display: none; }
.result-head h2[data-comparing]::after { content: "데이터 비교 중…"; font-size: 20px; font-weight: 700; color: var(--accent); }

/* ---------- 반응형 ---------- */
@media (max-width: 1240px) {
  .hero, .hero2 { gap: 34px; }
}
@media (max-width: 1024px) {
  .hero, .hero2 { grid-template-columns: 1fr; padding-top: 40px; }
  .hero2 .lead { max-width: 640px; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ke-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-split { grid-template-columns: 1fr; }
  .uc-grid, .cards-3, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { grid-template-rows: auto; }
  .thead { display: none; }
  .trow { grid-template-columns: 24px 1fr; gap: 4px 12px; padding: 12px 14px; }
  .trow > *:not(.nm):not(.ic) { grid-column: 2; font-size: 14px; color: var(--mute); }
  .trow .nm { grid-column: 2; } .trow .ic { grid-row: 1; } .trow .car { display: none; }
  .trow [data-l]::before { content: attr(data-l) " "; color: var(--faint); font-family: var(--sans); font-size: var(--fs-meta); }
  .detail { grid-template-columns: 1fr; padding: 4px 14px 16px 14px; } .detail .acts { align-items: stretch; }
  .mapview { grid-template-columns: 1fr; } .mapview canvas { height: 440px; }
  .mon { grid-template-columns: 1fr auto; } .mon .act { grid-column: 1 / 3; justify-content: flex-start; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm { grid-template-columns: 1fr; } .adm .side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } .adm .side .h { display: none; }
  .kv2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  :root { --gutter: 18px; }
  /* 휴대폰은 메뉴가 두 줄이라 짙은 띠가 화면 위를 크게 차지한다(GPT 검토) — 흰 띠 + 아래 선, 현재 메뉴는 네이비 글자 + 금색 밑줄 */
  .top { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  .brand, .brand:hover { color: var(--ink); }
  .nav a { color: var(--ink2); } .nav a:hover { color: var(--ink); background: var(--bg); } .nav a.on { color: var(--accent-dk); }
  .top .plan-tag, .top .linkbtn { color: var(--ink2); } .top .plan-tag b { color: var(--ink); }
  .top .btn-line { background: var(--paper); color: var(--ink2); border-color: var(--line3); }
  .top .in { height: auto; padding: 10px 18px; gap: 10px; flex-wrap: wrap; }
  .nav { order: 3; width: 100%; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 9px; font-size: 14px; }
  .top .right { gap: 10px; } .top .right .btn { height: 36px; padding: 0 12px; font-size: 14px; }
  .filters { position: static; }
  .hero { padding: 26px 0 6px; gap: 20px; } .hero h1 { font-size: 27px; } .hero .lead { font-size: 16px; margin: 14px 0 18px; }
  .hero .cta .btn { flex: 1 1 100%; }
  .hero .proof { gap: 18px; } .hero .proof dd { font-size: 21px; }
  .hero2 { padding: 28px 0 8px; gap: 22px; } .hero2 h1 { font-size: 30px; } .hero2 .lead { font-size: 16.5px; margin: 14px 0 20px; }
  .hero2 .cta .btn { flex: 1 1 100%; } .hero2 .cta .cta-2 { flex: 1 1 100%; text-align: center; } .hcase { padding: 18px 18px 18px 20px; } .hc-name { font-size: 19px; }
  .steps3, .tnum { grid-template-columns: 1fr; }
  .trust { padding: 22px 20px; } .tnum > div { padding-left: 14px; }
  .section { margin-top: 44px; }
  .flow { padding: 18px; } .flow .step .v { font-size: 19px; }
  .ke-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi { padding: 14px; } .kpi .v { font-size: 25px; }
  .cards, .cards-3, .uc-grid, .plans, .two, .region-grid, .mon-sum { grid-template-columns: 1fr; }
  .filters { padding: 12px 14px; border-radius: 8px; gap: 8px; }
  .filters .row { gap: 6px; }
  .filters select { min-width: 0; flex: 1 1 45%; height: 38px; font-size: 14.5px; }
  .filters .sep { display: none; }
  .filters .fg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
  .filters .fg > .lbl { flex: 0 0 auto; min-width: 52px; }
  .pill { height: 34px; padding: 0 11px; font-size: 13.5px; }
  .pill.locked { flex: 0 0 auto; }
  .result-head { padding: 16px 0 6px; } .result-head h2 .num { font-size: 24px; }
  .result-head .tools { width: 100%; }
  .pnote > div { position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; max-height: 60vh; overflow: auto; }
  .lock { padding: 18px; } .lock .b { width: 100%; } .lock .b .btn { flex: 1; }
  .band, .band2 { padding: 26px 22px; } .band .btns, .band2 .btns { width: 100%; } .band .btns .btn, .band2 .btns .btn { flex: 1; }
  .foot { grid-template-columns: 1fr 1fr; gap: 18px 18px; margin-top: 40px; }
  .foot .fc-brand { grid-column: 1 / -1; }
  .foot .fc-links { grid-template-columns: 1fr; }
  .foot .biz dl { flex-direction: column; gap: 2px; }
  .beta-form { grid-template-columns: 1fr; padding: 22px 18px; } .beta-form .full, .beta-form h3, .beta-form .hint { grid-column: 1; }
  .plan .p-price .now { font-size: 31px; }
  .benefits { grid-template-columns: 1fr; gap: 12px; }
  .benefits .bh { border-right: 0; border-bottom: 1px solid var(--line2); padding: 0 0 8px; margin: 0; }
  .cmp-wide { display: none; } .cmp-stack { display: flex; flex-direction: column; gap: 10px; }
  .picker { grid-template-columns: 1fr; }
  .mon { grid-template-columns: 1fr; } .mon .cnt { text-align: left; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl .it { grid-template-columns: 52px 1fr; }
  .kv2, .aform { grid-template-columns: 1fr; }
  .kv-me { grid-template-columns: 1fr; gap: 2px 0; } .kv-me dd { margin-bottom: 8px; }
  .auth { margin: 24px auto; padding: 22px 18px; }
  .mapfig .frame, .mapfig svg { max-height: 420px; }
  .ent { grid-template-columns: 1fr; } .ent .ent-r { align-items: center; text-align: center; }
}
@media (max-width: 400px) {
  :root { --gutter: 14px; }
  .hero h1 { font-size: 24px; } .hero2 h1 { font-size: 27px; }
  .kpi .v { font-size: 22px; } .kpi .k { font-size: 13px; }
  .btn { height: 40px; padding: 0 13px; font-size: 14.5px; } .btn-lg { height: 46px; font-size: 15px; } .btn-xl { height: 52px; font-size: 16px; }
  .card { padding: 14px 16px; } .card .title { font-size: 16.5px; }
  .plan { padding: 22px 18px; }
  .nav { flex-wrap: wrap; overflow: visible; } .nav a { padding: 6px 8px; }
  .stepsline { font-size: 13px; } .stepsline .s { padding: 4px 8px; }
  .tnum dd { font-size: 32px; }
}
/* 1700px 이상에서 폭을 1360·1560px 로 넓히던 것을 뺐다(2026-10-05 사용자 승인) — 큰 화면에서 표 칸 사이·상자 안이 비어 보였다.
   이제 어느 화면이든 내용 폭은 최대 1280px(일반)·1440px(찾기·검색) 이다. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .flow.seq .step, .flow .bar i, .pv-dots circle, .kpi, .card { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
  .plan { animation: none; } .plan.rec::after { display: none; }
}

/* 이용권 신청 직후 입금 안내 (/pricing?lead=ok) — 계좌·금액·입금자명. 계좌값은 관리자 설정('bank')에서 온다. */
.deposit { display: grid; gap: 14px; }
.deposit .ok { font-size: 16px; padding: 14px 18px; }
.dp-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
.dp-box, .dp-next { background: var(--paper); border-radius: 12px; box-shadow: var(--sh-2); padding: 22px 24px; }
.dp-box h3, .dp-next h3 { font-size: var(--fs-h3); margin: 0 0 12px; }
.dp-box .kv-me { grid-template-columns: 118px 1fr; font-size: 15px; row-gap: 10px; }
.dp-box .kv-me dt { color: var(--mute); }
.dp-amount { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-dk); }
.dp-acct { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.dp-next ol { margin: 0; padding-left: 20px; line-height: 1.65; display: grid; gap: 8px; font-size: 15px; }
.dp-next p { margin: 12px 0 0; }
@media (max-width: 767px) { .dp-grid { grid-template-columns: 1fr; } .dp-box, .dp-next { padding: 18px 16px; } .dp-box .kv-me { grid-template-columns: 92px 1fr; } }

/* 지역 요약의 확인일별 막대 — 날이 며칠 없어도 막대가 화면을 다 채우지 않게 폭을 고정한다. */
.bars { justify-content: flex-start; gap: 10px; padding-top: 16px; box-sizing: border-box; }
.bars div { flex: 0 1 44px; position: relative; }
.bars div::after { content: attr(data-n); position: absolute; left: 0; right: 0; top: -16px; text-align: center; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bars div.hi::after { color: var(--accent-dk); font-weight: 600; }
.bars-x { justify-content: flex-start; gap: 10px; }
.bars-x span { flex: 0 1 44px; text-align: center; white-space: nowrap; }

/* 헤더 오른쪽 — 비회원: 로그인 + '3초 만에 가입하기'(→ /access?signup=1). 회원: 플랜 · 관리자(role=admin) · 로그아웃 */
/* .top-admin 은 btn-line 모양 그대로(메뉴 띠가 흰색이 되어 따로 칠하지 않는다, 2026-10-05) */

/* 확인한 매장 — 줄 앞 표시등을 초록 체크로 바꾸고 왼쪽 띠·옅은 바탕으로 한눈에 구분 */
.r.ckd > summary { box-shadow: inset 3px 0 0 var(--c-new); }   /* 확인한 매장: 왼쪽 녹색 선만(그라데이션 배경 뺌, 2026-10-05) */
.r.ckd > summary .ic .dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--c-new); box-shadow: 0 0 0 3px var(--bg-new); }
.r.ckd > summary .ic .dot::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; }
.r.ckd > summary .ckmark { background: var(--c-new); color: #fff; }

/* 변화유형 칩 — 페이지가 다시 오기 전에도 누른 것이 바로 보이게 */
.pill:has(input:checked) { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }

/* 지역 지도 확대 (public/js/regionmap.js) */
.mapfig .frame { position: relative; }
.mapfig svg { touch-action: pan-y; cursor: zoom-in; }
.mapfig.zoomed svg { touch-action: none; cursor: grab; }
.map-ctl { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.map-ctl button { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--line3); background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--sh-1); padding: 0; }
.map-ctl button:hover { border-color: var(--ink2); }
.map-ctl .lvl { font-size: 11px; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
.mapfig.zoomed .pv-dots circle { r: calc(3.2px / var(--z, 1)); stroke-width: calc(1px / var(--z, 1)); }
.mapfig.zoomed .pv-dots circle.pri { r: calc(5px / var(--z, 1)); stroke-width: calc(1.6px / var(--z, 1)); }
.mapfig.zoomed .pv-label text { font-size: calc(13px / var(--z, 1)); }
.mapfig.zoomed .pv-label text.metro { font-size: calc(11px / var(--z, 1)); }
.mapfig.zoomed .pv-line use { stroke-width: calc(1.1px / var(--z, 1)); }
.map-hint { margin-top: 6px; }

/* 이용 방법 1·2·3 — 화면에 들어오면 차례로 켜진다(한 번만, 반복 깜빡임 없음). 각 단계의 작은 예시가 같이 움직여 "이 과정이구나"가 보이게. */
.steps3 li { position: relative; overflow: hidden; }
.steps3 li::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.steps3.play li { opacity: .5; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.steps3.play li.on { opacity: 1; transform: none; }
.steps3.play li.on::before { transform: scaleX(1); }
.steps3.play li.on .n { background: var(--accent); animation: stepPulse 1s ease-out 1; }
@keyframes stepPulse { 0% { box-shadow: 0 0 0 0 rgba(201,147,42,.5); } 100% { box-shadow: 0 0 0 16px rgba(201,147,42,0); } }
.demo { min-height: 54px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--line3); font-size: 13px; }
.dchip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--sel-line); background: var(--sel-bg); color: var(--sel-ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.dchip.alt { background: var(--paper); color: var(--ink); border: 1px solid var(--line3); }
.dcount { color: var(--mute); } .dcount b { color: var(--accent-dk); }
.drow { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.drow em { font-style: normal; color: var(--faint); text-decoration: line-through; } .drow b { color: var(--ink); } .drow i { font-style: normal; color: var(--accent); font-weight: 700; }
.drow .pri { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 4px; padding: 2px 6px; }
.dwhy { font-size: 12px; color: var(--accent-dk); background: var(--accent-bg); border-radius: 4px; padding: 3px 8px; }
.dcheck { width: 30px; height: 30px; fill: none; stroke: var(--c-new); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dck { font-weight: 700; color: var(--c-new); } .dnext { color: var(--mute); }
.steps3.play .demo > * { opacity: 0; transform: translateY(6px); }
.steps3.play li.on .demo > * { animation: demoIn .5s cubic-bezier(.22,.61,.36,1) forwards; }
.steps3.play li.on .demo > *:nth-child(2) { animation-delay: .3s; } .steps3.play li.on .demo > *:nth-child(3) { animation-delay: .6s; }
@keyframes demoIn { to { opacity: 1; transform: none; } }
.steps3.play li.on .dcheck circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: dash .6s ease-out .15s forwards; }
.steps3.play li.on .dcheck path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: dash .45s ease-out .7s forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .steps3.play li, .steps3.play .demo > *, .steps3.play li.on .demo > * { transition: none; animation: none; opacity: 1; transform: none; }
  .steps3 li::before { transition: none; transform: scaleX(1); }
  .steps3.play li.on .n { animation: none; }
  .steps3.play li.on .dcheck circle, .steps3.play li.on .dcheck path { animation: none; stroke-dashoffset: 0; }
}

/* 월간 리포트 (/insights) — 집계만, 상호·주소·전화 없음 */
.rep-list { display: grid; gap: 10px; }
.rep-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 20px; color: var(--ink); }
.rep-item:hover { box-shadow: var(--sh-2); color: var(--ink); }
.rep-ym { font-size: var(--fs-h3); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rep-live { font-size: 11px; font-weight: 700; color: var(--accent-dk); background: var(--accent-bg); border-radius: 4px; padding: 2px 6px; }
.rep-n { font-size: 15px; font-weight: 600; color: var(--mute); } .rep-n b { font-size: 24px; color: var(--ink); margin-right: 2px; }
.rep-range { grid-column: 1 / -1; }
.rep-nav { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.rep-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rep-num { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 14px 16px; display: grid; gap: 3px; align-content: start; }
.rep-num dt { font-size: var(--fs-meta); color: var(--mute); display: flex; align-items: center; gap: 6px; }
.rep-num dd { margin: 0; font-size: 15px; } .rep-num dd b { font-size: 26px; letter-spacing: -0.02em; margin-right: 2px; }
.rep-num small { font-size: 12px; color: var(--faint); line-height: 1.4; }
.rep-num.pri { border: 1px solid var(--accent-soft); background: var(--accent-bg); }
.rep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.rep-rank { list-style: none; margin: 0; padding: 0; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); }
.rep-rank li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line2); font-size: 15px; }
.rep-rank li:first-child { border-top: 0; }
.rep-rank .i { width: 22px; height: 22px; border-radius: 50%; background: var(--bg2); color: var(--mute); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.rep-rank li:nth-child(-n+3) .i { background: var(--ink); color: #fff; }
.rep-rank .v { text-align: right; white-space: nowrap; } .rep-rank .v b { font-size: 17px; }
.rep-tbl th.num, .rep-tbl td.num { text-align: right; }
.rep-method p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; } .rep-method p:last-child { margin: 0; }
.bars.dense { gap: 3px; padding-top: 0; } .bars.dense div { flex: 1 1 0; } .bars.dense div::after { display: none; }
.bars-x.dense { gap: 3px; } .bars-x.dense span { flex: 1 1 0; font-size: 10px; overflow: hidden; }
@media (max-width: 1023px) { .rep-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rep-two { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 480px) { .rep-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 실제 지도 (components/RegionMap.astro, 2026-09-15) ---- */
.gmap-wrap { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 12px; min-width: 0; }
.gmap { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #E9EDF3; }
.gmap-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 14px; text-align: center; padding: 20px; }
.gmap.live .gmap-wait { display: none; }
.gmap.failed .gmap-wait { color: var(--ink2); }
.gmap-cap { padding-top: 12px; border-top: 1px solid var(--line2); margin-top: 10px; }
.gmap-cap .legend { display: flex; gap: 12px 14px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--ink2); margin-bottom: 8px; }
.gmap-cap .legend > span { display: inline-flex; align-items: center; gap: 5px; }
.gmap-cap .pri-key i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 3.4px var(--accent); display: inline-block; margin-right: 3px; }
.gmap-cap .dot-cluster { background: var(--accent); color: #fff; width: 20px; height: 20px; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); }
.gmap-cap .small { line-height: 1.55; }
.panel-map { padding-bottom: 12px; }
.panel-map .gmap-wrap { padding: 0; box-shadow: none; background: transparent; }
.panel-map .gmap-cap { border-top: 0; padding-top: 8px; }
.maplibregl-popup-content { font-family: var(--sans); border-radius: 10px; box-shadow: var(--sh-2); padding: 12px 14px; color: var(--ink); }
.maplibregl-popup-close-button { font-size: 18px; padding: 2px 8px; color: var(--faint); }
.gp b { font-size: 14px; color: var(--ink); }
.gp-sub { font-size: 12px; color: var(--mute); margin-top: 2px; }
.gp-act { margin-top: 8px; font-size: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gp-act a { color: var(--accent); font-weight: 700; text-decoration: none; }
.gp-act a:hover { text-decoration: underline; }
.gp-lock { color: var(--faint); }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-group { box-shadow: var(--sh-1) !important; }
@media (max-width: 720px) { .gmap { height: 380px !important; } }

/* ---- 첫 화면의 배경 리듬 (2026-09-18) ----
   섹션이 전부 같은 바탕 위에 이어져 평평해 보이던 것을 고친다. 흰 바탕과 아주 옅은 tint 를 번갈아 두어
   '소개 → 실제 신호 → 이용 방법 → 데이터 규모 → 가입 → FAQ' 덩어리가 스크롤에서 구분되게 한다.
   새 색을 만들지 않는다 — tint 는 기존 --bg(#F5F7FA), 카드는 언제나 흰색(--paper)이라 tint 위에서 떠 보인다.
   전체 폭 배경은 box-shadow 확산 + clip-path 로 만든다(100vw 를 쓰면 스크롤바 폭 때문에 가로 넘침이 생긴다). */
body[data-page="landing_view"] { background: var(--paper); }
.stripe { padding-block: 72px; }
.stripe:first-child { padding-top: 0; }
.stripe:last-child { padding-bottom: 16px; }
.stripe > .section:first-child, .stripe > .section-tight:first-child, .stripe > .band2:first-child { margin-top: 0; }
.stripe.tint { background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
.stripe.tint .faq, .stripe.tint .trust, .stripe.tint .case { border: 1px solid var(--line); }
@media (max-width: 980px) { .stripe { padding-block: 56px; } }
@media (max-width: 720px) { .stripe { padding-block: 40px; } .trust { padding: 26px 20px 22px; } }

/* ---- 출시 전 감사 (2026-09-19) ----
   ① 첫 화면 '다른 품목' 바로가기: 광고대행 문구는 그대로 두고, POS·식자재·통신·주방기기·지역영업 방문자가 자기 품목을 첫 화면에서 찾게 한다.
   ② 모바일 검색 조건 접기: 지역만 펼쳐 두고 업종·기간·변화유형·세부·정렬은 한 줄 스위치 뒤로. 쓰고 있는 조건이 있으면 펼친 채로 열린다(search.astro).
   ③ 모바일 터치 영역: 헤더 메뉴·로그인, 검색의 '폐업 제외'·'전화번호 있는 매장만'·'우선 확인 기준' 을 최소 32px 이상으로.
   ④ 화면에 안 보이는 제목(sr-only): 검색 결과에도 페이지 제목(h1)이 있게. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero2 .h-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.hero2 .h-roles .hr-l { flex-basis: 100%; font-size: 14px; color: var(--mute); }
.hero2 .h-roles a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--line3); border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 500; color: var(--ink2); white-space: nowrap; }
.hero2 .h-roles a:hover { border-color: var(--accent); color: var(--accent); }
.klist-note { margin: 0; padding: 10px 20px 12px; font-size: 13px; color: var(--mute); background: var(--bg2); }
.mf-t, .mf-btn { display: none; }
@media (max-width: 780px) {
  .mf-t { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .mf-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 12px; border: 1px dashed var(--line3); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink2); cursor: pointer; }
  .mf-btn b { font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
  .mf-btn .mf-s { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--mute); }
  .mf-btn .mf-s::after { content: '펼치기 ▾'; }
  .mf-t:checked + .filters .mf-btn .mf-s::after { content: '접기 ▴'; }
  .mf-t:not(:checked) + .filters .fg-adv, .mf-t:not(:checked) + .filters .row-adv { display: none; }
  .mf-t:focus-visible + .filters .mf-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
  .top .plan-tag { display: inline-flex; align-items: center; gap: .3em; min-height: 36px; padding: 0 4px; }   /* gap: inline-flex 는 '이용권'과 '이용 중' 사이 빈칸을 지운다(2026-10-11) */
  .nav a { display: inline-flex; align-items: center; min-height: 36px; }
  .facets a.tog { display: inline-flex; align-items: center; min-height: 32px; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 3px; }
  .pnote summary { min-height: 32px; }
}
@media (max-width: 400px) { .nav a { padding: 6px 10px; } }
/* 401~480px(대화면 휴대폰)에서 메뉴가 가로 스크롤로 넘어가 'FAQ' 가 스크롤 표시 없이 잘렸다 — 400px 이하처럼 두 줄로 감싼다 */
@media (max-width: 480px) { .nav { flex-wrap: wrap; overflow: visible; } }
/* 문장 속 링크는 색만이 아니라 밑줄로도 구분한다(WCAG 1.4.1). 버튼형 링크·칩·메뉴는 제외 */
main p a:not(.btn):not(.fchip):not(.tag-soon), main .note a:not(.btn), main .consent a, main .tsrc a, main .plans-note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.stale-bar { background: #FFF6E5; color: var(--ink2); font-size: 14px; text-align: center; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.stale-bar a { color: var(--accent-dk); font-weight: 600; text-decoration: underline; }
/* 음식점 찾기(2026-09-27, /find) — 전체 음식점 목록 · 두 탭(전체 음식점 /find · 최근 변화 /search) */
.find-head { padding: 22px 0 4px; }
.find-head h1 { font-size: var(--fs-h1); font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.find-head .sub { margin: 0; color: var(--ink2); font-size: 15.5px; text-wrap: pretty; }
.find-head .sub b { color: var(--ink); }
/* 짧은 구절을 한 줄에 두기 — "하루 최대 한 통"이 "한 / 통"으로 갈리지 않게(2026-09-27) */
.nw { white-space: nowrap; }
.find-head .asof { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--mute); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-pop { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 8px; white-space: nowrap; vertical-align: middle; cursor: help; }
.ftr .c-st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ftr .pop-why { flex-basis: 100%; font-size: 11.5px; line-height: 1.35; color: var(--mute); }
.ftr .chg-d { display: block; margin-top: 1px; font-size: 11.5px; color: var(--faint); }
.find-head-sm { padding-top: 18px; }
.find-head .scale { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 18px; color: var(--ink); }
.find-head .scale b { font-weight: 800; }
.find-head .scale .sep { color: var(--faint); }
.find-head .scale .how { flex-basis: 100%; font-size: 14px; color: var(--mute); }
.find-head-sm .sub { font-size: 14.5px; }
.daily { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 2px 9px; }
.find-tabs { display: flex; gap: 6px; margin: 12px 0 0; border-bottom: 1px solid var(--line); }
.find-tabs a { display: flex; flex-direction: column; padding: 10px 18px 9px; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.find-tabs a b { font-size: 16px; font-weight: 700; color: var(--ink2); }
.find-tabs a span { font-size: 12px; color: var(--faint); }
.find-tabs a.on { background: var(--paper); border-color: var(--line); box-shadow: inset 0 2px 0 var(--accent); }   /* 활성 탭은 글자색 + 위쪽 파란 선(색만으로 구분하지 않게) */
.find-tabs a.on b { color: var(--accent); }
.find-tabs a:hover b { color: var(--ink); }
.filters .find-q input { height: 38px; min-width: 220px; padding: 0 12px; border: 1px solid var(--control); border-radius: 6px; font-size: 15px; font-family: inherit; color: var(--ink); }
.ftbl { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.ftr { display: grid; grid-template-columns: minmax(170px, 1.6fr) minmax(120px, 1.1fr) minmax(200px, 2fr) 76px 104px 124px 120px minmax(110px, 1fr); gap: 12px; align-items: center; padding: 11px 16px; font-size: var(--fs-table); border-top: 1px solid var(--line2); }
.ftr.fth { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--faint); background: var(--bg2); border-top: 0; padding: 9px 16px; }
.ftr .lb { display: none; }
.ftr .c-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; min-width: 0; }
.ftr .c-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftr .nv { font-size: 11.5px; font-weight: 600; color: var(--c-new); background: var(--bg-new); border-radius: 4px; padding: 1px 6px; flex: none; }
.ftr .c-cat .ind { display: block; font-size: 11.5px; color: var(--faint); }
.ftr .c-addr { color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.ftr .stb { display: inline-flex; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ftr .stb.on { color: var(--ok); background: var(--ok-bg); }
.ftr .stb.off { color: var(--c-closed); background: var(--bg-closed); }
.ftr.closed .c-name { color: var(--ink2); }
.ftr .chg { font-size: 12.5px; font-weight: 600; color: var(--c-name); }
.ftr .faint { color: var(--faint); }
.find-about { margin: 18px 0 8px; font-size: 14px; color: var(--ink2); background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 12px 16px; }
.find-about summary { cursor: pointer; font-weight: 600; }
.find-about ul { margin: 8px 0 2px; padding-left: 18px; }
@media (max-width: 1080px) {
  .ftr.fth { display: none; }
  .ftr { grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 12px 14px; }
  .ftr .c-name, .ftr .c-addr { grid-column: 1 / -1; }
  .ftr .lb { display: inline; font-size: 11.5px; font-weight: 600; color: var(--faint); margin-right: 6px; }
  .ftr .c-cat .ind { display: inline; margin-left: 6px; }
}
@media (max-width: 780px) {
  .find-head h1 { font-size: 24px; }
  .filters .find-q { width: 100%; }
  .filters .find-q input { flex: 1; min-width: 0; }
  .find-tabs a { flex: 1; padding: 9px 10px; }
}

/* 본문 글 — 마지막 줄에 한 단어만 남지 않게(2026-09-27 사용자 지적 "따로 / 봅니다"). 문장 줄바꿈은 서버가 넣는다(lib/sentences.ts). */
main :is(p, li, dd, .sub, .note, .notice, .why, .facts, .reason) { text-wrap: pretty; }
.faq .a, .hc-fact, .hc-why { text-wrap: pretty; }

/* ---------- 영업 레시피(2026-09-27 개편: 판매 상품·서비스 → 찾아볼 음식점, 후속 지시서의 공통 8단계) ---------- */
.cond-note { font-size: 13px; color: var(--mute); margin: 10px 0 0; line-height: 1.6; }
.cond-note b { color: var(--ink2); font-weight: 600; }
.cond-note .cn { display: block; }
.rconds { margin: 2px 0 6px; padding-left: 18px; color: var(--ink); line-height: 1.6; }
.rconds li + li { margin-top: 2px; }
.flow .step.sum { border-top: 1px dashed var(--line2); padding-top: 11px; }
.flow .step.sum .i { background: transparent; color: var(--mute); font-size: 15px; }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rsteps > li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; background: var(--paper); border-radius: 10px; box-shadow: var(--sh-1); padding: 14px 16px; }
.rsteps > li > .n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.rsteps > li > div > b { display: block; margin-bottom: 3px; font-size: 15px; color: var(--ink); }
.rsteps > li > div > span { color: var(--ink2); line-height: 1.65; }
.racts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.racts .ra { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 220px; text-decoration: none; }
.racts .ra:hover { border-color: var(--accent); }
.racts .al { font-weight: 700; color: var(--accent); }
.racts .ac { font-size: 12.5px; color: var(--mute); line-height: 1.5; }
.uc2 { gap: 10px; }
.uc2 .ic { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-bg); color: var(--accent-dk); display: grid; place-items: center; }
/* 칸 구분 — 엑셀처럼 바깥 테두리 없이 안쪽 가로·세로 선만(2026-09-27 사용자 지시) */
.uc-kv { margin: 0; display: grid; gap: 0; }
.uc-kv > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: 14px; line-height: 1.55; padding: 9px 0; border-top: 1px solid var(--line2); }
.uc-kv > div:first-child { border-top: 0; padding-top: 2px; }
.uc-kv > div:last-child { padding-bottom: 2px; }
.uc-kv dt { color: var(--mute); border-right: 1px solid var(--line2); }
.uc-kv dd { margin: 0; color: var(--ink2); }
.uc-b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.uc-cond { margin: 0; font-size: 12.5px; color: var(--mute); line-height: 1.55; }
.uc-cond b { color: var(--ink2); font-weight: 600; margin-right: 4px; }
.uc-cond .rest { display: block; }
.faq-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.faq-links a { font-weight: 600; }
.hero2 .h-roles a.all { border-color: transparent; background: none; color: var(--accent); font-weight: 700; padding-left: 4px; }
.hero2 .h-roles .hr-l b { color: var(--ink); }

/* ---------- 2026-10-03 가치 확인 동선(GPT 검토 1·2·3차) ---------- */
/* 휴대폰에서는 머리글이 따라 내려오지 않는다 — 메뉴가 2~3줄로 감겨 스크롤해도 약 130px 를 차지했다. */
@media (max-width: 780px) {
  .top { position: static; }
  .find-head .sub { display: none; }            /* 첫 화면에 결과가 보이게 소개 문장은 휴대폰에서 뺀다(규모·기준일 줄은 남김) */
  .hero-sm .lead.lead-more { display: none; }   /* 이용권: 같은 내용이 카드에 있다 — 휴대폰 첫 화면에 가격이 보이게 */
}
/* 무엇을 영업하시나요 — 영업 레시피를 음식점 찾기 위로 */
.find-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 2px; }
.find-start .fs-l { font-size: 14px; font-weight: 700; color: var(--ink); margin-right: 2px; }
.find-start a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line3); font-size: 14px; color: var(--ink2); white-space: nowrap; }
.find-start a:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-dk); }
.find-start a.all { box-shadow: none; background: none; color: var(--accent); font-weight: 700; padding-left: 4px; }
@media (max-width: 780px) {   /* 휴대폰: 세 줄로 감기면 목록이 그만큼 밀린다 — 한 줄 가로 스크롤(페이지 가로 넘침은 0 그대로) */
  .find-start { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .find-start::-webkit-scrollbar { display: none; }
  .find-start .fs-l { white-space: nowrap; }
}
/* 가입 혜택 — 고른 매장 5곳 열기 */
.notice.trial-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-left-color: var(--ok); }
.rv-mini { display: inline; margin: 0 0 0 6px; }
.rv-btn { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-dk); background: var(--accent-bg); border: 1px solid var(--accent-soft); border-radius: 999px; padding: 1px 9px; cursor: pointer; vertical-align: 1px; }
.rv-btn:hover { background: #fff; border-color: var(--accent); }
.rv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-tag { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.rv-form { display: contents; }
/* 지역 변화 요약 받기(무료 알림) — 결과 바로 아래 */
.alert-box { margin-top: 14px; }
.alert-box h3 { margin: 0; font-size: 17px; }
.alert-box p { margin: 0; }
/* 이용권 — 입금액(VAT 포함)·선택 입력 접기 */
.p-price .fine.pay { color: var(--ink2); }
.beta-form .bf-more { border-top: 1px solid var(--line); padding-top: 12px; }
.beta-form .bf-more > summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink2); min-height: 32px; display: flex; align-items: center; }
.beta-form .bf-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 12px; }
.beta-form .bf-more-grid > div { min-width: 0; }
@media (max-width: 780px) { .beta-form .bf-more-grid { grid-template-columns: 1fr; } .beta-form .bf-more-grid .full { grid-column: 1; } }
/* 공개 샘플 */
.sample-tbl { margin-top: 14px; }
.sample-cta { margin-top: 16px; }
/* /find 첫 화면 가입 혜택·공개 샘플 한 줄(2026-10-04) — 휴대폰에서도 제목 바로 아래에 보인다 */
.find-head .trial-top { margin: 2px 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--ink2); }
.find-head .trial-top svg { color: var(--ok); flex: none; }
.find-head .trial-top b { color: var(--ink); }
.find-head .trial-top a { font-weight: 600; white-space: nowrap; }
/* /find 머리 오른쪽 규모 숫자(2026-10-05 사용자 제안) — 넓은 화면에서만. 좁으면 왼쪽 한 줄(.scale) 그대로 */
.find-head .find-stats { display: none; }
@media (min-width: 1200px) {
  .find-head.has-stats { display: flex; align-items: center; gap: 48px; }
  .find-head.has-stats .fh-main { flex: 1 1 auto; min-width: 0; }
  .find-head .find-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 44px; flex: 0 0 auto; margin: 0 8px 0 0; }
  .find-head .find-stats dd { font-size: 52px; }
  .find-head.has-stats .scale > b, .find-head.has-stats .scale > .sep { display: none; }
}

/* ---- 매장 공개 페이지 /place (2026-10-05, docs/public-pages-2026-10-05.md) ---- */
.pl-head { padding-bottom: 14px; }
.pl-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 14px; color: var(--mute); }
.pl-badges .stb { display: inline-flex; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pl-badges .stb.on { color: var(--ok); background: var(--ok-bg); } .pl-badges .stb.off { color: var(--c-closed); background: var(--bg-closed); }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: start; margin-top: 16px; }
.pl-grid > div, .pl-grid > aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 14px; margin: 4px 0 0; font-size: 15px; }
.pl-kv dt { color: var(--mute); } .pl-kv dd { margin: 0; }
.pl-lock { display: inline-flex; align-items: center; gap: 5px; color: var(--mute); font-size: 14px; }
.pl-lock svg { color: var(--faint); flex: none; }
.pl-src { margin-top: 6px; }
.pl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl-evs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-evs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ink2); }
.pl-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 14.5px; border-bottom: 1px solid var(--line2); padding-bottom: 6px; }
.pl-list a { font-weight: 600; color: var(--ink); } .pl-list a:hover { color: var(--accent); }
.pl-list .muted { font-size: 13px; }
.pl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.pl-cta a:not(.btn) { font-weight: 600; white-space: nowrap; }
.ftbl .c-name a.pl-link { color: var(--ink); font-weight: 600; } .ftbl .c-name a.pl-link:hover { color: var(--accent); }
@media (max-width: 900px) { .pl-grid { grid-template-columns: minmax(0, 1fr); } .pl-kv { grid-template-columns: 84px minmax(0, 1fr); } }
/* 관심 매장 저장(2026-10-05) — 매장 제목 아래 버튼 한 줄 */
.pl-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.pl-save form { display: inline; }
.sp-tbl .stb { display: inline-flex; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sp-tbl .stb.on { color: var(--ok); background: var(--ok-bg); } .sp-tbl .stb.off { color: var(--c-closed); background: var(--bg-closed); }
.sp-tbl td form { display: inline; }

/* ---- 결과 머리의 열람 현황 한 줄(2026-10-05 사용자 결정 "열람 횟수 표시", lib/usage) ---- */
.result-head .rh-use { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: 13.5px; color: var(--mute); }
.result-head .rh-use svg { color: var(--faint); flex: none; }
.result-head .rh-use b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- 이용권 화면 위쪽 가운데 정렬(2026-10-05 사용자 지시 "전부 다 너무 왼쪽") — 소개·흐름·카드 둘·혜택. 비교표·신청서는 그대로 ---- */
.pricing-c .hero-sm { text-align: center; }
.pricing-c .hero-sm .lead { margin-left: auto; margin-right: auto; max-width: 880px; }
.pricing-c .plans { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.pricing-c .plans.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin-left: auto; margin-right: auto; }   /* 2026-10-28 무료 · 지역 · 전국(개정 17) */
@media (max-width: 1000px) { .pricing-c .plans.n3 { grid-template-columns: 1fr; max-width: 560px; } }
.pricing-c .plans-note { text-align: center; }
/* 2026-10-08 잠금을 눌러 온 비회원에게 결제 전 무료 가입 5곳(pricing.astro lockName) · 무료 칸의 '가입 없이 검색' 보조 링크 */
.pricing-c .lock-trial { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; max-width: 880px; margin: 14px auto 0; text-align: left; }
.pricing-c .lock-trial span { flex: 1 1 320px; }
/* 신청 전에 걸리는 것(2026-10-13 제안 B) — 눈에 띄되 주요 버튼(금색)과 겨루지 않게 흰 칸 + 테두리 버튼 */
@media (max-width: 640px) { .why-ask .wa-b { flex-direction: column; align-items: stretch; } }
.plan .p-cta .p-alt { display: block; margin-top: 10px; text-align: center; font-size: var(--fs-meta); color: var(--mute); }
.pricing-c .benefits { grid-template-columns: auto repeat(3, minmax(0, 270px)); justify-content: center; }
/* 2026-10-24 사용자 "지금 시작하면도 가운데로, 글씨를 키우거나" — 칸 높이 가운데 · 16px · 본문색 */
.pricing-c .benefits .bh { align-self: stretch; display: flex; align-items: center; font-size: 16px; color: var(--ink); letter-spacing: 0; padding: 0 16px 0 4px; }
@media (max-width: 780px) { .pricing-c .plans { grid-template-columns: 1fr; } .pricing-c .benefits { grid-template-columns: 1fr; } .pricing-c .benefits .bh { justify-content: center; padding: 0 0 10px; } }

/* ---- 음식점 찾기 조건 상자 정리(2026-10-06 사용자 "필터가 복잡해 보이고 지저분") ----
   줄마다 한 종류: ① 지역·상호(큰 칸) ② 알약(상태·인허가일·폐업일·전화번호) ③ 선택칸(종별·업종·세부·정렬). 세로선 대신 묶음 사이 간격.
   위의 '영업 품목으로 시작'은 알약 여덟 개 → 글자 링크 한 줄(조건처럼 보이지 않게). */
.filters-v2 { gap: 9px; padding: 12px 18px 12px; }
.filters-v2 .row { gap: 8px 22px; }
.filters-v2 .lbl { font-size: 12.5px; color: var(--mute); margin-right: 3px; }
.filters-v2 .row-main .fg { gap: 8px; }
.filters-v2 .row-pills .pill { height: 32px; font-size: 13.5px; padding: 0 12px; }
.filters-v2 .row-pills .fg { gap: 5px; }
.filters-v2 .row-sel select.mini { height: 34px; font-size: 14px; min-width: 132px; }
.filters-v2 .row-sel { padding-top: 1px; }
.find-start.quiet { gap: 2px 0; margin: 12px 0 4px; font-size: 14px; color: var(--ink2); }
.find-start.quiet .fs-l { color: var(--mute); font-weight: 600; margin-right: 10px; }
.find-start.quiet a { min-height: 0; padding: 2px 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink2); font-weight: 500; }
.find-start.quiet a + a::before { content: '·'; color: var(--faint); margin: 0 9px; }
.find-start.quiet a:hover { box-shadow: none; color: var(--accent); }
.find-start.quiet a.all { color: var(--accent); font-weight: 700; padding-left: 0; }
.find-start.quiet a.all::before { content: '·'; color: var(--faint); margin: 0 9px; }
@media (max-width: 780px) { .find-start.quiet a + a::before, .find-start.quiet a.all::before { margin: 0 7px; } }

/* ---- 홈 첫 화면 검색창 + '음식점만' 강조(2026-10-05 사용자 지시) ---- */
.hero2 .eyebrow.ey-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); color: var(--ink2); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; margin-bottom: 16px; }
.hero2 .eyebrow.ey-pill svg { flex: none; }
.hero2 h1 em { font-style: normal; color: inherit; }   /* 2026-10-10 파랑 강조 뺌(GPT 원칙: 색은 행동에만) */
.hero2 .lead b { color: var(--ink); font-weight: 700; }
.h-search { display: flex; gap: 8px; margin: 22px 0 10px; max-width: 600px; }
.h-search input { flex: 1 1 auto; min-width: 0; height: var(--h-btn-xl); padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 2px solid var(--line3); border-radius: 10px; -webkit-appearance: none; appearance: none; }
.h-search input::placeholder { color: var(--faint); }
.h-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.h-search .btn { flex: none; }
.hero2 .cta.cta-sub { gap: 4px 22px; }
@media (max-width: 480px) { .h-search { flex-direction: column; } .h-search input { height: 50px; font-size: 16px; } .hero2 .cta.cta-sub .cta-2 { text-align: left; } }

/* 알림 받을 이메일 칸(2026-10-11, components/NotifyEmail) — 카카오에서 이메일을 받지 못한 계정만 */
.notify-email .ne-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.notify-email .ne-form input[type=email] { flex: 1 1 240px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--r-sm); background: var(--paper); font: inherit; }
.notify-email .ne-form label { flex: 1 1 100%; order: 3; display: block; color: var(--mute); }
.notify-email .ne-form label input { vertical-align: -2px; margin: 0 6px 0 0; }
/* 모니터링 조건 카드 — 좁은 화면에서 버튼 줄의 grid-column: 1 / 3 이 한 칸 격자에 보이지 않는 둘째 칸을 만들어 조건 글자가 세로로 깨졌다(2026-10-11 발견) */
@media (max-width: 640px) { .mon { grid-template-columns: 1fr; gap: 10px; } .mon .cnt { text-align: left; } .mon .act { grid-column: 1 / -1; justify-content: flex-start; } }
/* 휴대폰 목록 먼저(2026-10-13, docs/mobile-analysis-2026-10-13.md · 가입 판정 개정 4) — 360×780 에서 음식점 찾기의 첫 매장 카드가 1,280px 아래였다.
   넓은 화면은 그대로. 780px 이하에서만: 가림 안내·엑셀 잠금·안내 줄을 네 번째 카드 뒤로(MaskNote where=inline) · 머리말 숫자 한 줄 · 시/도와 시/군/구 한 줄 · 인허가일 한 줄 */
.ftr-ins, .mask-note.mn-inline, .find-head .trial-top .tt-short, .ftr .c-act, .ftr .ic-m { display: none; }
@media (max-width: 780px) {
  .mask-note.mn-top, .rh-free .tools, .meta-row.mr-free { display: none; }
  .ftr-ins { display: block; padding: 12px; border-top: 1px solid var(--line); background: var(--bg); }
  .mask-note.mn-inline { display: grid; margin: 0; }
  .mask-note .mn-m { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--mute); }
  .mask-note .mn-m p { margin: 0; }
  .mask-note .mn-m .rh-use { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .mask-note .mn-m .rh-use b { color: var(--ink); }
  .find-head { padding-top: 14px; }
  .find-head h1 { margin-bottom: 2px; }
  .find-head .trial-top a[href="/sample"] { display: none; }
  .find-head .scale { margin-top: 4px; font-size: 14.5px; gap: 2px 8px; }
  .find-head .scale .how { display: none; }
  .find-head .asof { margin-top: 4px; }
  .filters .fg:has(> select[name="sido"]) > .lbl { display: none; }   /* '지역' 이름표를 빼고 시/도·시/군/구를 한 줄에(선택칸 첫 글자가 '전국'·'시/군/구'라 뜻이 보인다) */
  .filters .fg:has(> select[name="sido"]) select { flex: 1 1 0; }
  .rh-free-s .rh-use, .rh-free-s .tools .btn-lock { display: none; }   /* 최근 변화: 잠금 버튼·오늘 본 지역 줄은 네 번째 카드 뒤 상자로(지역 요약·목록/지도는 그대로) */
  .ftr .c-lic { white-space: nowrap; }
  .find-head .trial-top .tt-long { display: none; } .find-head .trial-top .tt-short { display: inline; }
  .find-tabs a span { display: none; }          /* 탭 이름만(전체 음식점 · 최근 변화) — 아래 설명은 넓은 화면에서 */
  .rh-free .rh-use { display: none; }           /* 오늘 본 지역·가입 혜택 줄 — 머리말 가입 안내와 같은 말이라 휴대폰에서는 뺀다 */
  /* 카드 — 메디트레이스 신규 병원 카드처럼 한 장씩 띄우고 이름표 없이(2026-10-13 사용자 "메디트레이스가 더 깔끔해 보였다").
     인허가일·상태 / 상호·업종 / 지역 / 면적·전화 / (변화가 있으면) 최근 변화 / 점선 아래 보기 링크 */
  .ftbl { background: none; box-shadow: none; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
  .ftbl .ftr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lic st" "name cat" "addr addr" "area tel" "chg chg" "act act";
    gap: 5px 10px; padding: 12px 14px; background: var(--paper); border: 0; border-radius: 12px; box-shadow: var(--sh-1); }
  .ftr .c-lic { grid-area: lic; align-self: center; font-size: 13px; font-weight: 600; color: var(--ink2); }
  .ftr .c-st { grid-area: st; justify-content: flex-end; }
  .ftr .c-name { grid-area: name; display: block; font-size: 16.5px; line-height: 1.4; }   /* 긴 상호도 글자처럼 이어서 감기게(네이버 표시는 끝에) */
  .ftr .c-name .nv, .ftr .c-name .rv-tag, .ftr .c-name .rv-mini { display: inline-flex; vertical-align: 2px; margin-left: 6px; }
  .ftr .c-cat { grid-area: cat; justify-self: end; align-self: center; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: var(--accent-dk); background: var(--accent-bg); border-radius: 999px; padding: 2px 9px; }
  .ftr .c-addr { grid-area: addr; display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--mute); }
  .ftr .c-area { grid-area: area; font-size: 12.5px; color: var(--mute); }
  .ftr .c-tel { grid-area: tel; justify-self: end; font-size: 12.5px; color: var(--mute); }
  .ftr .c-chg { grid-area: chg; font-size: 12.5px; }
  .ftr .c-chg.no-chg { display: none; }
  .ftr .c-act { display: block; grid-area: act; margin-top: 4px; padding-top: 9px; border-top: 1px dashed var(--line3); font-size: 13.5px; }
  .ftr .c-act a { font-weight: 700; color: var(--accent); }
  .ftr .c-name .lb, .ftr .c-cat .lb, .ftr .c-addr .lb, .ftr .c-st .lb, .ftr .c-cat .ind, .ftr .pop-why { display: none; }
  .ftr .c-lic .lb { margin-right: 5px; }
  .ftr .chg-d { display: inline; margin-left: 6px; }
  .ftr .ic-m { display: inline-block; flex: none; color: var(--faint); }
  .ftr-ins { padding: 0; border: 0; background: none; }
  /* 최근 변화(.tbl-wrap)도 카드를 한 장씩 — 음식점 찾기와 같은 모양 */
  [data-pane="list"] .tbl-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
  [data-pane="list"] .tbl-wrap details.r { background: var(--paper); border: 0; border-radius: 12px; box-shadow: var(--sh-1); overflow: hidden; }
  [data-pane="list"] .tbl-wrap details.r[open] { box-shadow: var(--sh-1), inset 3px 0 0 var(--accent); }
  /* 가입 상자(휴대폰) — 큰 제목 하나와 큰 버튼 둘, 가림 설명은 작은 글씨 */
  .mask-note.mn-inline { display: block; padding: 16px; border-radius: 12px; border-left: 0; box-shadow: var(--sh-1); background: var(--accent-bg); }
  .mn-inline .mi-h { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--ink); }
  .mn-inline .mi-s { margin: 6px 0 12px; font-size: 14px; color: var(--ink2); }
  .mn-inline .btn-block { display: flex; width: 100%; justify-content: center; }
  .mn-inline .btn-block + .btn-block { margin-top: 8px; }
  .mn-inline .mi-n { display: flex; gap: 6px; align-items: flex-start; margin: 12px 0 0; font-size: 12.5px; color: var(--mute); }
  .mn-inline .mi-n svg { flex: none; margin-top: 3px; }
  .mn-inline .mi-n a { white-space: nowrap; font-weight: 600; }
}

/* ───── 내 지역(2026-10-15, docs/signup-analysis-2026-10-08.md 개정 5) — 홈 맨 위 패널 · 비회원 미리보기 · 2단계 화면 · 배너 ───── */
.mr-stripe { padding-block: 20px 0; }
.mr-stripe-pv { padding-block: 44px 12px; }
.mr-member { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); padding: 18px 22px 20px; }
.mr-member .mr-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px 28px; align-items: start; }
.mr-head h2 { font-size: 24px; letter-spacing: -.3px; margin: 6px 0 18px; }
.mr-eye { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--accent); }
.m-br { display: none; }
.mr-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.mr-preview .mr-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); padding: 16px 18px; }
.mr-pl { font-size: 13.5px; font-weight: 800; color: var(--ink2); margin-bottom: 9px; }
.mr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mr-chip { border: 1px solid var(--line3); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 600; color: var(--ink2); background: var(--paper); text-decoration: none; white-space: nowrap; }
.mr-chip:hover { border-color: var(--ink2); }
.mr-chip.on { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.mr-chip.off { color: var(--faint); border-style: dashed; cursor: not-allowed; }
.mr-sm .mr-chip { padding: 6px 11px; font-size: 13.5px; }
.mr-sgw { margin-top: 16px; }
.mr-sgw summary { cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--ink2); margin-bottom: 9px; }
.mr-sgw summary span { font-weight: 500; color: var(--faint); }
.mr-what { font-size: 12.5px; font-weight: 800; color: var(--accent); margin-bottom: 9px; }
.mr-ok { display: flex; gap: 6px; align-items: center; background: var(--ok-bg); color: var(--ok); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.mr-cond { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.mr-cond span { display: inline-flex; align-items: center; gap: 6px; }
.mr-cond a { font-size: 12.5px; font-weight: 700; border: 1px solid var(--line3); border-radius: 7px; padding: 4px 9px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mr-since { font-size: 13px; color: var(--mute); margin: 12px 0 8px; }
.mr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mr-t { border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; color: var(--ink); text-decoration: none; background: var(--paper); }
.mr-t:hover { border-color: var(--accent); }
.mr-t.on { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.mr-t span { display: block; font-size: 13px; opacity: .85; }
.mr-t b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.mr-t small { font-size: 15px; font-weight: 700; margin-left: 2px; }
.mr-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mr-kinds span { font-size: 12.5px; font-weight: 600; background: var(--bg2); color: var(--ink2); border-radius: 6px; padding: 3px 8px; }
.mr-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); margin-top: 12px; text-decoration: none; }
.mr-lock:hover { color: var(--accent); }
.mr-row { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; color: var(--ink); text-decoration: none; background: var(--paper); }
.mr-member .mr-list > .mr-row:first-child { margin-top: 0; }
.mr-row:hover { border-color: var(--accent); }
.mr-r1 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); }
.mr-k { font-size: 12px; font-weight: 700; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.mr-k.k-new { color: var(--c-new); background: var(--bg-new); }
.mr-k.k-name { color: var(--c-name); background: var(--bg-name); }
.mr-k.k-cat { color: var(--c-category); background: var(--bg-category); }
.mr-k.k-pre { color: var(--c-premise); background: var(--bg-premise); }
.mr-nm { display: block; font-size: 16px; font-weight: 800; margin: 4px 0; }
.mr-r2 { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mr-r2 b { color: var(--accent); font-weight: 800; }
.mr-r2 em { font-style: normal; color: var(--faint); }
.mr-all { display: block; text-align: right; font-size: 13.5px; font-weight: 800; color: var(--accent); margin-top: 10px; text-decoration: none; }
.mr-zero { display: grid; gap: 6px; border: 1px dashed var(--line3); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--ink2); }
.mr-zero span { color: var(--mute); font-size: 13.5px; }
.mr-zb { display: flex; gap: 16px; font-weight: 700; }
.mr-next { display: flex; gap: 6px; align-items: flex-start; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line3); font-size: 13.5px; color: var(--ink2); }
.mr-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.mr-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.mr-steps li { display: flex; gap: 8px; align-items: flex-start; }
.mr-steps b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-dk); color: #fff; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }
.mr-steps span { display: grid; font-size: 13px; color: var(--mute); }
.mr-steps strong { font-size: 14.5px; color: var(--ink); }
.mr-cta { display: grid; gap: 6px; justify-items: center; }
.mr-cta span { font-size: 12.5px; color: var(--faint); }
.mr-unset { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--accent-bg); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 12px 16px; color: var(--ink2); text-decoration: none; font-size: 14.5px; }
.mr-unset span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mr-unset em { font-style: normal; font-weight: 800; color: var(--accent-dk); white-space: nowrap; }
.mr-bar { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--accent-bg); border-bottom: 1px solid var(--accent-soft); padding: 9px 16px; font-size: 14px; color: var(--ink2); }
.mr-bar span { display: inline-flex; align-items: center; gap: 6px; }
.mr-bar-go { background: var(--accent-dk); color: #fff; font-weight: 700; font-size: 13px; border-radius: 8px; padding: 6px 10px; text-decoration: none; white-space: nowrap; }
.mr-bar-x { color: var(--faint); font-size: 18px; line-height: 1; text-decoration: none; padding: 0 4px; }
.mr-meset { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mro { max-width: 600px; margin: 28px auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); padding: 22px 24px 0; }
.mro-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.mro-skip, .mro-back { color: var(--mute); text-decoration: none; }
.mro-step { font-weight: 700; color: var(--ok); }
.mro-prog { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--accent-dk); }
.mro-prog i { flex: 1; height: 5px; border-radius: 3px; background: var(--line2); position: relative; overflow: hidden; }
.mro-prog i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--accent-dk); }
.mro-q { font-size: 28px; line-height: 1.3; letter-spacing: -.5px; margin: 18px 0 8px; }
.mro-s { color: var(--mute); font-size: 14.5px; margin: 0; }
.mro-l { font-size: 13.5px; font-weight: 800; color: var(--ink2); margin: 22px 0 9px; }
.mro-l span { font-weight: 500; color: var(--faint); }
.mro-hint { margin-top: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 13px; color: var(--mute); }
.mro-foot { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); margin: 24px -24px 0; padding: 12px 24px 16px; display: grid; gap: 10px; border-radius: 0 0 18px 18px; }
.mro-num { font-size: 13.5px; color: var(--mute); text-align: center; }
.mro-num b { color: var(--ink); }
.mro-ref { font-size: 12px; color: var(--faint); text-align: center; }
@media (max-width: 780px) {
  .mr-stripe { padding-block: 12px 0; }
  .mr-stripe-pv { padding-block: 28px 4px; }
  .mr-member { padding: 14px 14px 16px; border-radius: 14px; }
  .mr-member .mr-card { display: block; }
  .mr-member .mr-list { margin-top: 12px; }
  .mr-member .mr-list > .mr-row:first-child { margin-top: 8px; }
  .mr-head h2 { font-size: 21px; line-height: 1.35; margin-bottom: 14px; }
  .m-br { display: inline; }
  .mr-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mr-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .mr-steps { display: grid; gap: 10px; }
  .mr-cta .btn { width: 100%; justify-content: center; }
  .mr-unset { font-size: 14px; padding: 11px 13px; }
  .mr-bar { justify-content: flex-start; font-size: 13px; padding: 8px 12px; }
  .mro { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; border-width: 0 0 1px; box-shadow: none; padding: 16px 18px 0; }
  .mro-foot { margin: 20px -18px 0; padding: 12px 18px 14px; border-radius: 0; }
  .mro-q { font-size: 25px; }
}

/* 0건 안내(2026-10-16, components/ZeroHelp) — 조건을 하나만 넓혔을 때의 실제 매장 수 */
.zh { max-width: 520px; margin: 16px auto 0; text-align: left; }
.zh-t { font-size: 14px; font-weight: 800; color: var(--ink2); margin-bottom: 8px; text-align: center; }
.zh-list { display: grid; gap: 6px; }
.zh-o { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.zh-o:hover { border-color: var(--accent); }
.zh-o b { margin-left: auto; font-weight: 800; color: var(--accent-dk); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zh-o em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 12px; color: var(--faint); border: 1px dashed var(--line3); border-radius: 5px; padding: 1px 6px; }

/* ───── 홈 3초 테스트 v3(2026-10-16, docs/signup-analysis-2026-10-08.md 개정 6) — 숫자 질문 제목 · 지역 입력 · 내 지역 카드 · 숫자 띠 · 품목 · 가입하면 · 무료와 이용권 ───── */
.top .top-join { background: transparent; color: #fff; border: 1.5px solid #C3D0E6; font-weight: 700; }
.top .top-join:hover { background: var(--nav-hover); color: #fff; }
.h3-stripe { padding-block: 0; }
.h3 { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 52px; align-items: center; padding: 60px 0 60px; }
.h3-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.h3-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); }
.h3-h1 { font-size: 54px; line-height: 1.2; letter-spacing: -.03em; font-weight: 800; margin: 18px 0; color: var(--ink); }
.h3-kick { display: block; font-size: 27px; line-height: 1.35; font-weight: 800; color: var(--ink2); letter-spacing: -.02em; margin-bottom: 6px; }
.h3-kick b { color: var(--ink); box-shadow: inset 0 -.34em 0 var(--accent-soft); }
.h3-sub { font-size: 17px; line-height: 1.65; color: var(--mute); margin: 0; }
.h3-sr { display: flex; gap: 10px; margin-top: 26px; }
.h3-sr .in { flex: 1; display: flex; align-items: center; gap: 10px; border: 2px solid var(--line3); border-radius: 12px; background: var(--paper); padding: 0 16px; color: var(--faint); }
.h3-sr .in:focus-within { border-color: var(--accent); }
.h3-sr input, .h3-sr input:focus { border: 0; outline: 0; box-shadow: none; background: transparent; font: inherit; font-size: 16px; color: var(--ink); width: 100%; height: 54px; padding: 0; margin: 0; }
.h3-sr .btn { height: 58px; white-space: nowrap; gap: 8px; }
.h3-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; color: var(--mute); }
.h3-hot b { font-weight: 700; color: var(--ink2); margin-right: 2px; }
.h3-hot a { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--ink2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.h3-hot a:hover { border-color: var(--accent); color: var(--ink); }
.h3-hot em { font-style: normal; color: var(--ok); font-weight: 800; margin-left: 5px; }
.h3-bf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.h3-bf div { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.h3-bf svg { color: var(--accent); flex: none; margin-top: 1px; }
.h3-bf p { margin: 0; }
.h3-bf b { display: block; font-size: 14px; color: var(--ink); }
.h3-bf span { font-size: 12.5px; color: var(--mute); }
.hc3-stage { position: relative; padding-top: 60px; }
.hc3-toast { position: absolute; top: 0; right: -6px; z-index: 2; display: flex; gap: 10px; align-items: center; background: var(--accent-dk); color: #fff; border-radius: 14px; padding: 11px 15px; box-shadow: 0 12px 26px rgba(11, 27, 54, .28); max-width: 330px; text-decoration: none; }
.hc3-toast svg { color: var(--cta); flex: none; }
.hc3-toast b { display: block; font-size: 14px; }
.hc3-toast em { display: block; font-style: normal; font-size: 12.5px; color: var(--nav-ink); }
a.hc3-toast:hover { background: var(--nav-hover); color: #fff; }
.hc3 { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 34px rgba(11, 27, 54, .12); padding: 20px 22px 4px; }
.hc3-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hc3-h .w { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 800; color: var(--ink); }
.hc3-h .w svg { color: var(--accent); }
.hc3-h .d { font-size: 13px; color: var(--mute); white-space: nowrap; }
.hc3-h a { font-size: 12.5px; font-weight: 700; border: 1px solid var(--line3); border-radius: 7px; padding: 4px 9px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.hc3-s { font-size: 13px; color: var(--mute); margin-top: 6px; }
.hc3-tabs { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 6px; margin: 14px 0 6px; }
.hc3-tabs a { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; color: var(--ink); text-decoration: none; background: var(--paper); }
.hc3-tabs a:hover { border-color: var(--accent); }
.hc3-tabs a.on { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.hc3-tabs span { display: block; font-size: 12.5px; opacity: .85; white-space: nowrap; }
.hc3-tabs b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hc3-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 3px; border-top: 1px solid var(--line2); padding: 11px 2px; color: var(--ink); text-decoration: none; }
.hc3-r:hover .rn { color: var(--accent); }
.hc3-r .t1 { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); min-width: 0; }
.hc3-r .rn { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc3-r .t1 .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc3-r .go { font-size: 13.5px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.hc3-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line2); padding: 13px 2px 14px; }
.hc3-f a { font-size: 14px; font-weight: 800; color: var(--accent); text-decoration: none; }
.hc3-f span { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.hc3-zero { display: grid; gap: 6px; border: 1px dashed var(--line3); border-radius: 12px; padding: 14px; margin: 12px 0 16px; font-size: 14px; }
.hc3-zero span { color: var(--mute); font-size: 13.5px; }
.hc3-zero div { display: flex; gap: 16px; font-weight: 700; }
.hc3-others { font-size: 13px; color: var(--mute); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.hc3-others a { font-weight: 700; }
.hc3-empty { padding: 30px; text-align: center; color: var(--mute); }
.h3-band-s { padding-block: 0; background: var(--accent-dk); box-shadow: 0 0 0 100vmax var(--accent-dk); clip-path: inset(0 -100vmax); }
.h3-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 28px 0; color: #fff; }
.h3-band div { padding: 0 24px; border-left: 1px solid rgba(255, 255, 255, .14); }
.h3-band div:first-child { border-left: 0; padding-left: 0; }
.h3-band b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.h3-band span { font-size: 14px; color: var(--nav-ink); }
.h3-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.h3-role { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; color: var(--ink); text-decoration: none; }
.h3-role:hover { border-color: var(--accent); color: var(--ink); }
.h3-role .rt { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.h3-role .rt svg { color: var(--accent); }
.h3-role b { font-size: 30px; font-weight: 800; margin: 12px 0 2px; letter-spacing: -.02em; }
.h3-role b small { font-size: 15px; margin-left: 2px; }
.h3-role .d { font-size: 13.5px; color: var(--mute); line-height: 1.55; flex: 1; }
.h3-role .l { font-size: 13.5px; font-weight: 800; color: var(--accent); margin-top: 10px; }
.h3-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.h3-steps li { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--paper); display: flex; flex-direction: column; }
.h3-steps .no { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dk); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.h3-steps b { font-size: 17px; margin: 12px 0 4px; }
.h3-steps li > span:not(.no) { font-size: 14px; color: var(--mute); line-height: 1.55; flex: 1; }
.h3-steps .ui { margin-top: 14px; background: var(--bg); border-radius: 10px; padding: 10px; font-size: 12px; color: var(--ink2); }
.h3-steps .ui p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.h3-steps .ui p + p { margin-top: 6px; }
.h3-steps .ui i { font-style: normal; border: 1px solid var(--line3); background: var(--paper); border-radius: 999px; padding: 3px 9px; }
.h3-steps .ui i.on { background: var(--accent-dk); color: #fff; border-color: var(--accent-dk); }
.h3-cta { display: flex; justify-content: center; margin-top: 22px; }
.h3-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.h3-tier { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.h3-tier.pay { border: 2px solid var(--cta); }
.h3-tier .tt { font-size: 15px; font-weight: 800; color: var(--mute); }
.h3-tier .pr { font-size: 30px; font-weight: 800; margin: 6px 0 10px; }
.h3-tier .pr small { font-size: 13.5px; color: var(--mute); margin-left: 6px; font-weight: 600; }
.h3-tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1; font-size: 14px; color: var(--ink2); }
.h3-tier li { display: flex; gap: 7px; align-items: flex-start; }
.h3-tier li svg { color: var(--ok); flex: none; margin-top: 3px; }
.h3-tier .btn { margin-top: 16px; justify-content: center; }
@media (min-width: 781px) and (max-width: 1080px) {
  .h3 { gap: 32px; } .h3-h1 { font-size: 44px; } .h3-kick { font-size: 23px; }
  .h3-bf { grid-template-columns: 1fr; } .h3-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h3-sr { flex-direction: column; } .h3-sr .btn { width: 100%; justify-content: center; }
}
@media (max-width: 780px) {
  .top .top-join { color: var(--accent-dk); border-color: var(--accent-dk); background: var(--paper); }
  .nav { justify-content: space-between; }
  .h3 { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 0 22px; }
  .h3-l { display: contents; }
  .h3-pill { order: 1; justify-self: start; font-size: 12px; padding: 5px 11px; }
  .h3-h1 { order: 2; font-size: 35px; line-height: 1.24; margin: 14px 0 12px; }
  .h3-kick { font-size: 19px; margin-bottom: 4px; }
  .h3-sub { order: 3; font-size: 14.5px; }
  .h3-sr { order: 4; flex-direction: column; gap: 8px; margin-top: 16px; }
  .h3-sr input, .h3-sr input:focus { height: 46px; font-size: 15px; }
  .h3-sr .btn { height: 52px; width: 100%; justify-content: center; }
  .h3-hot { order: 5; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 12.5px; margin-top: 12px; }
  .h3-hot::-webkit-scrollbar { display: none; }
  .h3-hot b { white-space: nowrap; }
  .h3-r { order: 6; margin-top: 16px; }
  .h3-bf { order: 7; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
  .h3-bf div:nth-child(3) { display: none; }   /* 바로 위 카드 아래 알림과 같은 말 */
  .hc3-stage { padding-top: 0; display: flex; flex-direction: column; }
  .hc3 { order: 1; padding: 14px 14px 2px; border-radius: 16px; }
  .hc3-toast { order: 2; position: static; max-width: none; margin-top: 12px; box-shadow: none; }
  .hc3-others { order: 3; }
  .hc3-h .w { font-size: 15px; } .hc3-h .d { font-size: 11.5px; }
  .hc3-tabs { gap: 5px; margin: 10px 0 4px; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .hc3-tabs a { padding: 7px 8px; } .hc3-tabs span { font-size: 10.5px; } .hc3-tabs b { font-size: 18px; }
  .hc3 > a.hc3-r:nth-of-type(n+3) { display: none; }
  .hc3-r { padding: 10px 0; } .hc3-r .t1 { font-size: 11.5px; } .hc3-r .rn { font-size: 15px; } .hc3-r .go { font-size: 12.5px; }
  .hc3-f { padding: 11px 0 12px; } .hc3-f a { font-size: 13px; } .hc3-f span { font-size: 11.5px; }
  .h3-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; padding: 18px 0; }
  .h3-band div { padding: 0 10px; }
  .h3-band div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .h3-band b { font-size: 24px; } .h3-band span { font-size: 12px; }
  .h3-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .h3-role { padding: 13px; border-radius: 14px; } .h3-role .rt { font-size: 13.5px; } .h3-role b { font-size: 24px; margin-top: 8px; } .h3-role .d { font-size: 12px; } .h3-role .l { font-size: 12.5px; margin-top: 8px; }
  .h3-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .h3-steps li { padding: 14px; } .h3-steps .ui { display: none; } .h3-steps b { margin-top: 8px; font-size: 16px; }
  .h3-cta .btn { width: 100%; justify-content: center; }
  .h3-tiers { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .h3-tier { padding: 16px; } .h3-tier .pr { font-size: 24px; }
}
/* ── 2026-10-21 개정 7 '결제할 이유': 월요일 메일 칸 · 영업 장부 · 새 사장 자리 · 하루 동선 ── */
.mro-weekly { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 14px; color: var(--ink2); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.mro-weekly input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.mro-weekly small { color: var(--mute); font-size: 12.5px; line-height: 1.5; }
.mr-weekly { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14.5px; }
.ok-t { color: var(--ok); font-weight: 700; }
.lg-me { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14.5px; }
.lg-lock h3 { display: flex; align-items: center; gap: 6px; }
.lg-feat { margin: 10px 0 12px; padding-left: 18px; line-height: 1.7; font-size: 15px; }
.lg-feat li { margin-bottom: 4px; }
.lg-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lg-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-tab { display: inline-flex; gap: 4px; align-items: baseline; padding: 6px 12px; border: 1px solid var(--line3); border-radius: 999px; background: var(--paper); color: var(--ink2); font-size: 14px; text-decoration: none; }
.lg-tab.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--sel-ink); font-weight: 700; }
.lg-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lg-tbl td { vertical-align: middle; }
.lg-tagcell { white-space: nowrap; }
.lg-tagcell select { height: 30px; margin-right: 4px; }
.lg-excluded td { color: var(--faint); }
.lg-client td:nth-child(2) a { font-weight: 700; }
.lg-text { width: 100%; font-family: var(--mono); font-size: 13px; padding: 10px; border: 1px solid var(--line3); border-radius: var(--r-sm); resize: vertical; }
.lg-imp { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: 14px; }
.lg-res { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.lg-amb, .lg-miss { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; }
.lg-amb { background: var(--warn-bg); }
.lg-miss { background: var(--bg); }
.pl-tag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pl-tagb { height: 30px; padding: 0 12px; border: 1px solid var(--line3); border-radius: 999px; background: var(--paper); color: var(--ink2); font-size: 13px; cursor: pointer; font-family: inherit; }
.pl-tagb.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--sel-ink); font-weight: 700; }
.pl-spot { border-color: var(--sel-line); }
.tag-new { display: inline-flex; font-size: 11.5px; font-weight: 700; color: #8A6400; background: #FBE7A8; border-radius: 4px; padding: 1px 6px; vertical-align: middle; margin-left: 4px; }
.rt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 15px; }
.rt-start { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rt-start select { height: 32px; max-width: 220px; }
.rt-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.rt-list li { display: flex; gap: 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); }
.rt-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--nav-bg); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rt-b { min-width: 0; }
.rt-t { font-size: 15.5px; font-weight: 700; }
.rt-a { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 640px) {
  .mr-weekly, .lg-me { flex-direction: column; align-items: stretch; }
  .lg-tbl th:nth-child(3), .lg-tbl td:nth-child(3), .lg-tbl th:nth-child(4), .lg-tbl td:nth-child(4), .lg-tbl th:nth-child(8), .lg-tbl td:nth-child(8) { display: none; }
}
@media print {
  .site-head, .site-foot, nav, .rt-start, .crumbs { display: none !important; }
  .rt-list li { break-inside: avoid; border-color: #999; }
}

/* ── 2026-10-23 개정 8 가맹·체인 추정: 매장 줄 표시 · 검색 머리 잠금 ── */
.chn { display: inline-flex; align-items: center; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--mute); background: var(--line2); border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; white-space: nowrap; vertical-align: 1px; }
.facets a.tog.lk { color: var(--mute); border-bottom-color: var(--line); }
.facets a.tog.lk svg { color: var(--faint); }

/* ── 2026-10-24 개정 9 이번 주 방문 계획(/me/plan) · 이용권 카드 '대신 해 주는 일' · 메인 이용권 칸 ── */
.pl-funnel { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14.5px; color: var(--ink2); }
.pl-funnel b { color: var(--ink); }
.pl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-acts .btn svg { margin-right: 4px; }
.pl-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.pl-chip { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink2); font-size: 13px; text-decoration: none; }
.pl-chip b { font-size: 16px; color: var(--ink); }
.pl-chip:hover { border-color: var(--sel-line); }
.pl-day { margin: 18px 0 6px; }
.pl-dh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pl-dh h2 { font-size: 18px; margin: 0; }
.pl-dh h2 span { font-size: 14px; font-weight: 500; color: var(--mute); margin-left: 6px; }
.pl-hid { color: var(--faint); letter-spacing: 1px; }
.plan .uq-h { font-size: 13px; font-weight: 800; color: #8A5A00; margin: 16px 0 8px; letter-spacing: .02em; }
.plan ul.uq { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan ul.uq li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: start; }
.plan ul.uq li svg { color: var(--sel-line); margin-top: 3px; }
.plan ul.uq b { display: block; font-size: 15.5px; color: var(--ink); line-height: 1.45; }
.plan ul.uq .d { display: block; font-size: 13.5px; color: var(--mute); line-height: 1.5; }
.tag-nw { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: #2563EB; border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 2px; line-height: 1.5; }
.plan .uq-all { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); line-height: 1.6; }
.plan .uq-all b { color: var(--ink); }
.h3-tier.pay li svg { color: var(--sel-line); }
.h3-tier .base { font-size: 13px; color: var(--mute); margin: 8px 0 0; }
@media (max-width: 640px) { .pl-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media print {
  .pl-acts, .lg-tabs, .pl-sum { display: none !important; }
  .pl-day + .pl-day { break-before: page; }
}

/* ── 2026-10-24 개정 10 시군구 월별 리포트(/report) ── */
.rp-line { margin: 8px 0 0; font-size: 14.5px; }
.rp-line a { font-weight: 700; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin: 14px 0 12px; }
.rp-head h1 { font-size: 28px; margin: 4px 0; }
.rp-buy { flex: 0 1 360px; background: var(--paper); border: 2px solid var(--cta); border-radius: var(--r); padding: 14px 18px; }
.rp-buy .p { font-size: 22px; font-weight: 800; color: var(--ink); }
.rp-buy .p small { font-size: 13px; color: var(--mute); font-weight: 600; margin-left: 6px; }
.rp-buy .btn { margin: 10px 0 6px; justify-content: center; }
.rp-buy .btn svg { margin-right: 6px; }
.rp-buy .n { font-size: 12.5px; color: var(--mute); line-height: 1.55; }
.rp-dep { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 8px; font-size: 14px; }
.rp-dep dt { color: var(--mute); }
.rp-dep dd { margin: 0; }
.rp-form { display: grid; gap: 8px; }
.rp-form label { display: grid; gap: 3px; }
.rp-form input[type=text], .rp-form input[type=email] { height: 34px; padding: 0 10px; border: 1px solid var(--line3); border-radius: 8px; font: inherit; width: 100%; }
.rp-form details input { margin-top: 6px; }
.rp-form .consent { display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }
.rp-form .consent input { margin-top: 3px; flex: none; }
.rp-months { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.rp-months a, .rp-months .soon { padding: 5px 11px; border: 1px solid var(--line3); border-radius: 999px; font-size: 13px; background: var(--paper); color: var(--ink2); text-decoration: none; }
.rp-months a.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--sel-ink); font-weight: 700; }
.rp-months .soon { border-style: dashed; color: var(--faint); }
.rp-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.rp-t { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.rp-t .k { font-size: 12.5px; color: var(--mute); }
.rp-t .v { font-size: 24px; font-weight: 800; margin: 2px 0; color: var(--ink); }
.rp-t .d { font-size: 12px; color: var(--faint); }
.rp-t.svc, .rp-box.svc { border-style: dashed; border-color: var(--sel-line); }
.rp-box .tag, .rp-t .tag { display: inline-block; font-size: 10.5px; font-weight: 600; color: #8A5A00; background: var(--accent-bg); border-radius: 3px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.rp-note { font-size: 12.5px; color: var(--faint); margin: 6px 0 12px; line-height: 1.6; }
.rp-two { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-bottom: 12px; }
.rp-two.one { grid-template-columns: 1fr; }
.rp-two.one > section:last-child { order: -1; }   /* 전체 보기 — 명단이 길어 추이를 위로, 명단은 한 줄 전체 폭 */
.rp-two.one > section:last-child svg { max-width: 640px; display: block; }
.rp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rp-box { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.rp-box h2 { font-size: 16px; margin: 0 0 8px; }
.rp-box h2 small { font-size: 13px; font-weight: 500; color: var(--mute); margin-left: 4px; }
.rp-sub { font-size: 12.5px; color: var(--faint); margin: -4px 0 8px; }
.rp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-tbl th { text-align: left; background: var(--bg2); padding: 6px 7px; font-size: 12px; white-space: nowrap; }
.rp-tbl td { padding: 6px 7px; border-top: 1px solid var(--line2); vertical-align: top; }
.rp-tbl td.nw { white-space: nowrap; }
.rp-lock { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 9px 12px; background: var(--accent-bg); border-radius: 8px; font-size: 13px; }
.rp-lock b { color: var(--accent-dk); }
.rp-leg { font-size: 12px; color: var(--mute); }
.rp-leg i { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; vertical-align: -1px; }
.rp-hb { display: grid; grid-template-columns: 110px 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.rp-hb i { display: block; height: 10px; background: #1B3766; border-radius: 3px; min-width: 2px; }
.rp-hb b { text-align: right; }
.rp-ul { margin: 4px 0 0; padding-left: 16px; font-size: 13.5px; line-height: 1.75; }
.rp-how { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.rp-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rp-pick select { height: 42px; min-width: 200px; }
.rp-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rp-top a { display: flex; gap: 8px; align-items: baseline; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink2); text-decoration: none; font-size: 14px; }
.rp-top a .r { color: var(--faint); font-size: 12px; min-width: 16px; }
.rp-top a span:last-child { margin-left: auto; color: var(--mute); font-size: 13px; }
@media (max-width: 980px) { .rp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-two, .rp-three { grid-template-columns: 1fr; } .rp-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-buy { flex-basis: 100%; } .rp-head h1 { font-size: 23px; } .rp-top { grid-template-columns: 1fr; } }
.rep-rank .rp-mini { margin-left: 8px; font-size: 12px; padding: 1px 7px; border: 1px solid var(--line3); border-radius: 999px; color: var(--accent); text-decoration: none; white-space: nowrap; }

/* ── 2026-10-24 개정 11 내 거래처 대조(/me/match) — 시안 data/mockups/거래처대조-2026-10-24 의 LOCAL 블록을 옮김 ── */
.cl-drop { border: 2px dashed var(--line3); border-radius: var(--r); padding: 22px 18px 18px; text-align: center; background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cl-drop > svg { width: 32px; height: 32px; color: var(--accent); margin-bottom: 2px; }
.cl-drop .t { font-size: 16.5px; font-weight: 700; }
.cl-drop .s { font-size: 13.5px; color: var(--mute); line-height: 1.55; }
.cl-drop input[type=file] { max-width: 100%; min-width: 0; font-size: 14px; margin: 6px 0 2px; }
.cl-drop .btn { margin: 6px 0 4px; }
.cl-kv { display: grid; grid-template-columns: 92px 1fr; gap: 12px 14px; font-size: 14.5px; margin: 2px 0 0; }
.cl-kv dt { font-weight: 700; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.cl-kv dd { margin: 0; color: var(--ink2); line-height: 1.6; }
.cl-kv .ck { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; font-weight: 800; flex: none; }
.cl-kv .ok { background: var(--ok-bg); color: var(--ok); } .cl-kv .no { background: var(--bg-closed); color: var(--c-closed); }
.cl-kv .ck svg { stroke-width: 2.8; }
.cl-ex th.x { color: var(--faint); font-weight: 500; }
.cl-ex td.x { color: var(--faint); background: var(--bg); font-size: 12.5px; }
.rp-tiles.cl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.pl-sum.cl-sum { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 10px; }
.cl-sum .pl-chip b { font-size: 18px; }
.cl-tbl td { vertical-align: middle; }
.cl-tbl .nw { white-space: nowrap; }
.cl-tbl td:first-child a { white-space: nowrap; }   /* 휴대폰에서 상호가 글자 중간에서 꺾이지 않게(표는 가로 스크롤) */
tr.bl td { color: var(--line3); filter: blur(2px); user-select: none; -webkit-user-select: none; }
.cl-lock { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-top: 18px; }
.cl-lock .rp-buy { flex: none; }
.cl-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 4px; }
.cl-why div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13.5px; color: var(--ink2); }
.cl-why b { display: block; font-size: 17px; color: var(--ink); }
.cl-res { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.75; }
.cl-res .mono { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
details.cl-det { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin-top: 14px; }
details.cl-det summary { cursor: pointer; font-weight: 700; font-size: 15.5px; }
.cl-note { font-size: 13px; color: var(--faint); line-height: 1.6; margin-top: 10px; }
@media (max-width: 780px) {
  .rp-tiles.cl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-sum.cl-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-lock, .cl-why { grid-template-columns: 1fr; }
  .cl-kv { grid-template-columns: 1fr; gap: 2px 0; } .cl-kv dd { margin-bottom: 10px; }
}

/* ===== 개정 12 (2026-10-26) 전 페이지 3초 테스트 — 묶음별(G1 메뉴·홈·이용권 · G2 찾기·최근 변화 · G3 활용법·가이드 · G4 매장·지역·리포트 · G5 내 계정) ===== */
/* 3초 테스트(개정 12) g1 묶음 — 작업이 끝나면 styles.css 끝으로 합친다 */
/* 2026-10-26 사용자 "전부 진행" · 메뉴 "A안: '리포트' 메뉴 추가". 시안: 바탕 화면 '비즈시그널 3초 테스트 시안 2026-10-26\G1 메뉴·홈·이용권'.
   공통 기준 — 스크롤 전 첫 화면(PC 1280×800 · 휴대폰 390×844)에 ①누구에게 무엇을 ②실제 숫자 하나 ③금색 버튼 하나. */

/* ---- 공통 메뉴 A안: 5개(로그인하면 6개). 휴대폰 한 줄 ---- */
@media (max-width: 400px) { .nav a { padding: 6px 7px; } }
/* 로그인하면 6개 — 좁은 휴대폰에서는 '활용법'을 메뉴에서 숨긴다(바닥글 '서비스' 칸에 그대로 있다) */
@media (max-width: 480px) { .nav.nav-in a[href="/use-cases"] { display: none; } }

/* ---- 홈: 내 지역 카드 아래 리포트 한 줄(components/HeroRegionCard) ---- */
.hc3-rep { display: flex; align-items: center; gap: 9px; margin: 2px 0 0; padding: 11px 12px; border-radius: 10px; background: var(--bg2); color: var(--ink2); font-size: 14px; text-decoration: none; }
.hc3-rep svg { flex: none; color: var(--accent-dk); }
.hc3-rep > span { flex: 1; min-width: 0; }
.hc3-rep b { color: var(--ink); margin-right: 6px; }
.hc3-rep em { font-style: normal; font-weight: 700; color: var(--accent-dk); white-space: nowrap; }
.hc3-rep:hover { background: var(--accent-bg); }
.hc3-rep.z { margin: 0 0 16px; }   /* 새로 반영된 것 0건 상자 아래 */
@media (max-width: 780px) { .hc3-rep b { display: block; } }

/* ---- 이용권(/pricing): 머리 = 제목 · 가격 한 줄 · 숫자 한 줄 · (휴대폰) 금색 버튼, 카드 안 버튼을 가격 바로 아래로 ---- */
.pz-hero { padding-top: 34px; }
.pz-hero h1 { font-size: 36px; }
.pricing-c .pz-hero .lead { margin: 10px auto 0; }
.pz-num { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 16px; padding: 10px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--ink2); }
.pz-num b { color: var(--ink); font-weight: 800; font-size: 17px; }
.pz-num i { width: 1px; height: 16px; background: var(--line3); }
.pz-num .d { color: var(--mute); font-size: 13.5px; white-space: nowrap; }
.pz-m { display: none; }
.pricing-c .plans { margin-top: 22px; }
.pricing-c .plan { grid-template-rows: auto auto auto auto 1fr; gap: 12px; }
.pricing-c .plan .p-price { min-height: 122px; }   /* 두 카드의 버튼 높이를 맞춘다(카드 CTA Y축 정렬) */
.pricing-c .plan .p-cta { padding-top: 0; }
.pricing-c .plan .p-cta .p-alt { margin-top: 8px; }
.pricing-c .plan.rec .p-cta .btn-soft, .pricing-c .plan.rec .p-cta .btn-soft:hover { box-shadow: none; }   /* 잠금에서 온 비회원 — 금색 그림자도 뺀다 */
.pricing-c .pz-scope { margin-top: 18px; color: var(--ink2); }
@media (max-width: 780px) {
  .pz-hero { padding-top: 22px; }
  .pz-hero h1 { font-size: 27px; }
  .pz-num { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 12px; text-align: left; padding: 10px 14px; }
  .pz-num i { display: none; }
  .pz-m { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
  .pricing-c .plan .p-price { min-height: 0; }
}

/* ---- 샘플(/sample): 머리 왼쪽 제목·설명·숫자, 오른쪽 금색 '이용권 보기' · CSV · 가입 링크 ---- */
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.sp-l { flex: 1 1 560px; min-width: 0; }
.sp-num { margin: 10px 0 0; font-size: 16px; color: var(--ink2); }
.sp-num b { font-size: 19px; font-weight: 800; color: var(--ink); margin-right: 4px; }
.sp-num .b::before { content: ' — '; }
.sp-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-content: flex-end; }
.sp-join { flex-basis: 100%; text-align: right; font-size: 14px; font-weight: 600; }
.sp-asof { margin: 12px 0 0; font-size: var(--fs-meta); color: var(--mute); display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.sp-note { margin-top: 6px; }
@media (max-width: 780px) {
  .sp-head h1 { font-size: 23px; }
  .sp-num { font-size: 14.5px; } .sp-num b { font-size: 17px; }
  .sp-num span { display: block; } .sp-num .b::before { content: none; }
  .sp-r { justify-content: stretch; width: 100%; } .sp-r .btn { flex: 1 1 100%; justify-content: center; }
  .sp-r .btn-line { display: none; }   /* 휴대폰 첫 화면은 버튼 하나 — CSV 는 표 아래 상자에 그대로 */
  .sp-join { text-align: center; }
}

/* ---- 가입·로그인(/access): 숫자 칸, 로그인 화면의 이용권 키는 접기 안으로 ---- */
.au-num { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: 0; font-size: 14.5px; color: var(--ink2); background: var(--bg2); border-radius: 8px; padding: 9px 12px; }
.au-num b { font-size: 16px; font-weight: 800; color: var(--ink); margin-right: 3px; }
.au-num .nw { color: var(--mute); }
.au-same { margin: 0; text-align: center; }
.au-key { border-top: 1px solid var(--line2); padding-top: 12px; }
.au-key summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink2); list-style: none; text-align: center; }
.au-key summary::-webkit-details-marker { display: none; }
.au-key summary::after { content: ' ▾'; color: var(--mute); }
.au-key[open] summary::after { content: ' ▴'; }
.au-key .au-key-s { margin: 10px 0 0; }
.au-key .keyform { margin-top: 12px; }
.au-key .keyform + .note { margin-top: 10px; }
/* 3초 테스트(개정 12) g2 묶음 — 작업이 끝나면 styles.css 끝으로 합친다 */
/* G2 음식점 찾기(/find) · 최근 변화(/search) · 지도 보기 — 2026-10-26 시안(바탕 화면 '비즈시그널 3초 테스트 시안 2026-10-26/G2', make_after.py LOCAL) 그대로.
   표 칸 너비처럼 다른 화면과 같이 쓰는 클래스는 body[data-page] 로 이 두 화면에만 건다(/sample 도 같은 표 줄을 쓴다). */

/* ---- 머리: 작은 머리말(h1 '음식점 찾기' 그대로) + 큰 한 줄 + 설명 한 줄 + 기준일 ---- */
.find-head.g2h h1 { font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--accent); margin: 0 0 2px; }
.find-head.g2h .g2-t { margin: 0 0 4px; font-size: 28px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.find-head.g2h .sub { font-size: 15.5px; }
.find-head.g2h .asof { margin-top: 6px; }
@media (min-width: 1200px) {
  .find-head.g2h.has-stats { align-items: flex-end; }
  .find-head.g2h .find-stats dd { font-size: 46px; }
  .find-head.g2h.has-stats .scale { display: none; }   /* 넓은 화면은 오른쪽 큰 숫자가 같은 말이다 */
}

/* ---- 켜고 끄는 칩(토글) — 글자 자체가 스위치다. 켜면 옅은 금색 + 스위치 오른쪽 ---- */
.g2-facets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tg { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--line3); background: var(--paper);
  font-size: 14px; font-weight: 500; color: var(--ink2); white-space: nowrap; text-decoration: none !important; cursor: pointer; }
.tg:hover { border-color: var(--ink2); color: var(--ink); }
.tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tg svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.tg b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tg .sw { width: 30px; height: 18px; border-radius: 999px; background: #C5CEDB; position: relative; flex: none; margin-left: 3px; }
.tg .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tg.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--sel-ink); font-weight: 600; }
.tg.on svg { color: var(--sel-ink); }
.tg.on .sw { background: var(--accent); }
.tg.on .sw::after { left: 14px; }
.tg.lk { border-style: dashed; color: var(--faint); }
.tg.lk b { color: var(--ink2); }
.tg.lk .tp { font-size: 12px; font-weight: 600; color: var(--faint); border-left: 1px solid var(--line3); padding-left: 8px; margin-left: 1px; }
.tg-note { font-size: var(--fs-meta); color: var(--mute); margin: 0 0 0 2px; }
.tg-note .nw { white-space: nowrap; }   /* '가입 혜택 5곳· / 이용권'으로 갈리지 않게(360px) */

/* ---- 결과 머리 ---- */
.result-head.g2r { padding-top: 16px; }
.result-head.g2r h2 .rh-sub { color: var(--ink2); }
.result-head.g2r > .g2-facets { flex-basis: 100%; margin-top: -6px; }
.result-head.g2r > .g2-tn { flex-basis: 100%; margin: -10px 0 0 4px; }
.result-head.g2r > .chips, .result-head.g2r > .rh-use { flex-basis: 100%; margin-top: -8px; }
/* 음식점 찾기: 토글을 결과 수 바로 옆에 */
.result-head.g2f .rh-l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.result-head.g2f .rh-l > .g2-facets { margin-top: 0; }
.result-head.g2f .rh-l > .chips, .result-head.g2f .rh-l > .rh-use, .result-head.g2f .rh-l > .g2-tn { flex-basis: 100%; margin-top: 2px; }

/* ---- 목록 위 한 줄 띠(무료 가림 · 가입 혜택) — 두 칸 상자를 대신한다. 첫 화면 금색은 이 띠의 가입 버튼 하나 ---- */
.g2-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; background: var(--paper); border-left: 3px solid var(--accent); border-radius: 6px; box-shadow: var(--sh-1);
  padding: 7px 10px 7px 16px; margin: 6px 0 10px; font-size: 14px; color: var(--ink2); }
.g2-strip > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.g2-strip svg { width: 13px; height: 13px; flex: none; color: var(--faint); }
.g2-strip .gt svg { color: var(--ok); }
.g2-strip b { color: var(--ink); }
.g2-strip .g2s { display: none; }
.g2-strip .ga { margin-left: auto; gap: 16px; }
.g2-strip .ga a:not(.btn) { font-weight: 600; }

/* ---- 목록 아래 안내 줄(목록 위에서 옮긴 기준 · 전화 등록률 · 오늘 본 지역 · 우선 확인 기준) ---- */
.g2-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px 18px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--mute); margin: 12px 2px 0; }
.g2-meta > span { display: inline-flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.g2-meta .g2-use { gap: 6px; }
.g2-meta .g2-use svg { color: var(--faint); flex: none; }
.g2-meta b { color: var(--ink2); }
.g2-meta .g2-why { flex-basis: 100%; }
.find-start.g2-start { margin: 14px 0 0; }

/* ---- 표 칸: 음식점 찾기 인허가일이 '2026년 10월 / 23일'로 갈리지 않게 · 최근 변화 가린 번호(●●●-●●●●-●●●●)+N 이 전화 칸을 넘어 ▾ 와 겹치지 않게 ---- */
@media (min-width: 1081px) {
  body[data-page="find_open"] .ftbl .ftr { grid-template-columns: minmax(170px, 1.6fr) minmax(120px, 1.1fr) minmax(200px, 2fr) 76px 128px 118px 120px minmax(110px, 1fr); }
  body[data-page="find_open"] .ftbl .ftr .c-lic { white-space: nowrap; }
}
@media (min-width: 1025px) {
  body[data-page="search_open"] .thead, body[data-page="search_open"] .trow { grid-template-columns: 30px minmax(200px, 2fr) minmax(96px, .9fr) minmax(170px, 1.6fr) 92px 78px 152px 22px; }
}

/* ---- 지도 보기: 지도 위 한 줄(범례 가로) · 시/군/구 고르기 카드 · 옆 안내 ---- */
.g2-mapbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 14px; color: var(--ink2); }
.g2-mapbar > b { font-size: 15px; color: var(--ink); }
.g2-mapbar .lg { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-meta); color: var(--mute); }
.g2-mapbar .lg > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.g2-mapwrap { position: relative; min-width: 0; }
.g2-pick { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: min(660px, calc(100% - 28px)); background: #fff; border-radius: 12px; box-shadow: var(--sh-3); padding: 16px 18px; }
.g2-pick .g2ph { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.g2-pick .g2ps { margin: 4px 0 10px; font-size: var(--fs-meta); color: var(--mute); }
.g2-pick .g2pc { display: flex; flex-wrap: wrap; gap: 8px; }
.g2-pick .g2pc a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line3); font-size: 14px; font-weight: 600; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.g2-pick .g2pc a:hover { border-color: var(--ink2); color: var(--ink); }
.g2-pick .g2pc a b { color: var(--ink); }
.g2-pick .g2pc a svg { width: 13px; height: 13px; color: var(--faint); flex: none; }
.g2-side-note { font-size: var(--fs-meta); color: var(--mute); line-height: 1.6; margin: 0; }

/* ---- 휴대폰 ---- */
@media (max-width: 780px) {
  .find-head.g2h h1 { font-size: 13px; margin-bottom: 1px; }
  .find-head.g2h .g2-t { font-size: 22px; margin-bottom: 2px; }
  .g2-strip { padding: 8px 8px 8px 12px; gap: 6px 10px; margin: 4px 0 10px; font-size: 14px; }
  .g2-strip .gl, .g2-strip .ga a:not(.btn), .g2-strip .g2l { display: none; }
  .g2-strip .g2s { display: inline; }
  .g2-strip .ga { margin-left: auto; }
  .result-head.g2r { padding-top: 12px; }
  .g2-facets { margin-top: 8px; gap: 6px; }
  .tg { height: 32px; font-size: 13px; gap: 5px; padding: 0 7px 0 9px; }
  .tg .sw { width: 26px; height: 16px; }
  .tg .sw::after { width: 12px; height: 12px; }
  .tg.on .sw::after { left: 12px; }
  .tg.lk .tp { padding-left: 6px; }
  /* 최근 변화: 결과 수 → 토글(한 줄, 옆으로 밀기) → 안내 → 칩 → 도구 순서 */
  .result-head.g2r > .rh-l { order: 1; }
  .result-head.g2r > .g2-facets { order: 2; margin-top: -4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .result-head.g2r > .g2-facets::-webkit-scrollbar { display: none; }
  .result-head.g2r > .g2-facets .tg { flex: none; }
  .result-head.g2r > .g2-tn { order: 3; margin: -6px 0 0 2px; }
  .result-head.g2r > .chips, .result-head.g2r > .rh-use { order: 3; margin-top: -6px; }
  .result-head.g2r > .tools { order: 4; }
  .g2-meta { margin-top: 10px; }
  .g2-meta.g2-meta-free { display: none; }   /* 네 번째 카드 뒤 상자(MaskNote inline)가 같은 말을 한다 */
  .g2-pick { top: 12px; padding: 12px 14px; }
  .g2-pick .g2ph { font-size: 15.5px; }
  .g2-pick .g2pc a { height: 32px; padding: 0 11px; font-size: 13.5px; }
}
/* 3초 테스트(개정 12) g3 묶음 — 작업이 끝나면 styles.css 끝으로 합친다 */
/* 활용법 · 가이드 · 이용 방법 · 데이터 안내 · FAQ (2026-10-26, 시안 '…\G3 활용법·가이드\src\g3.css' 를 제품 마크업에 맞춘 것).
   제품 styles.css 의 토큰(--accent · --cta · --line · --paper …)만 쓴다. 새 색·그라데이션 없음. 금색(.btn-accent)은 첫 화면마다 하나. */

/* ── 공통: 첫 화면 숫자 한 줄 · 짧은 설명 · 버튼 줄 ───────────────────────── */
.t3-kick { display: block; font-size: 20px; line-height: 1.4; font-weight: 800; color: var(--ink2); letter-spacing: -.02em; margin: 2px 0 8px; }
.t3-kick b { color: var(--ink); box-shadow: inset 0 -.34em 0 var(--accent-soft); white-space: nowrap; }
.t3-sub { font-size: 16.5px; line-height: 1.65; color: var(--mute); margin: 12px 0 0; }
.t3-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.t3-cta .note { font-size: 13.5px; color: var(--mute); }
.t3-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 13px; line-height: 1.4; letter-spacing: 0; font-weight: 700; color: var(--accent); margin: 0 0 14px; }
.t3-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); flex: none; }

/* ── /use-cases 첫 화면: 왼쪽 제목·품목 칩 · 오른쪽 고른 품목 카드 ───────────── */
/* h1(제목 글 그대로)은 맨 위 표지, 큰 글씨 한 줄(.t3-h)은 문단이다 — 개정 12 'h1 그대로' */
.t3-uh { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 44px; align-items: start; padding: 38px 0 6px; }
.t3-uh > * { min-width: 0; }
.t3-h { font-size: 40px; line-height: 1.22; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.t3-chips-h { display: block; font-size: 14px; font-weight: 800; color: var(--ink2); margin: 24px 0 10px; }
.t3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t3-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--paper); border: 1px solid var(--line3); border-radius: 999px; padding: 8px 14px 8px 11px; font-size: 14.5px; font-weight: 700; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.t3-chip svg { color: var(--accent); flex: none; }
.t3-chip:hover { border-color: var(--accent); color: var(--ink); }
.t3-chip.on { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.t3-chip.on svg { color: var(--cta); }
.t3-chip.field { border-style: dashed; }
.t3-chip.on.field { border-style: solid; }

.t3-pick { background: var(--paper); border-radius: 16px; box-shadow: var(--sh-2); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.t3-pick > * { min-width: 0; }
.t3-pick .pk-h { display: flex; align-items: center; gap: 10px; }
.t3-pick .pk-h .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-bg); color: var(--accent-dk); display: grid; place-items: center; flex: none; }
.t3-pick .pk-h b { font-size: 19px; font-weight: 800; color: var(--ink); min-width: 0; }
.t3-pick .pk-h a { margin-left: auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.t3-pick .pk-t { font-size: 15px; color: var(--ink2); line-height: 1.55; margin: 0; }
.t3-pick .pk-n { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.t3-pick .pk-n b { font-size: 46px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.t3-pick .pk-n span { font-size: 18px; font-weight: 700; color: var(--ink2); }
.t3-pick .pk-n em { font-style: normal; font-size: 14px; color: var(--mute); margin-left: 8px; }
.t3-pick .pk-go { width: 100%; justify-content: center; gap: 8px; margin-top: 4px; height: auto; min-height: var(--h-btn-xl); padding-top: 10px; padding-bottom: 10px; white-space: normal; line-height: 1.3; text-align: center; }
.t3-pick .pk-c { font-size: 13px; color: var(--mute); line-height: 1.55; margin: 0; }
.t3-pick .pk-c b { color: var(--ink2); font-weight: 700; margin-right: 4px; }

/* 품목 카드 — 앞면 = 품목 · 한 줄 · 숫자 · 적용 조건 · 버튼, '할 수 있는 일 · 직접 확인할 것'은 접기.
   카드 뿌리는 .card.uc2 그대로(점검 스크립트가 이 마크업으로 카드를 찾는다) */
.t3-ucsec { margin-top: 30px; }
.t3-ucsec .sec-head .sub { max-width: none; }
.t3-ucards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.t3-ucards > .card.uc2 { position: relative; border-radius: 16px; padding: 18px 20px 16px; gap: 8px; }
.t3-ucards > .card.uc2:has(> .t3-anchor:target) { box-shadow: 0 0 0 2px var(--sel-line); }
.t3-ucards .t3-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.t3-ucards .uh { display: flex; align-items: center; gap: 9px; }
.t3-ucards .uh .ic { width: 30px; height: 30px; flex: none; }
.t3-ucards .uh .title { font-size: 17px; font-weight: 800; color: var(--ink); }
.t3-ut { margin: 0; }
.t3-ut dt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.t3-ut dd { margin: 0; font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.t3-ucards .un { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.t3-ucards .un b { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.t3-ucards .un span { font-size: 15px; font-weight: 700; color: var(--ink2); }
.t3-ucards .un em { font-style: normal; font-size: 13px; color: var(--mute); margin-left: 6px; }
.t3-ucards .uc-cond b { font-weight: 700; }
.t3-ucards .ub { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.t3-ucards .ub .btn { height: auto; min-height: var(--h-btn-sm); padding-top: 7px; padding-bottom: 7px; white-space: normal; line-height: 1.3; text-align: left; }
.t3-ucards .ub .ul { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; }
main .t3-ucards .ub p.ul a { text-decoration: none; }   /* main p a 밑줄(styles.css) 보다 뒤 · 같은 무게 */
.t3-ucards details { border-top: 1px solid var(--line2); margin-top: 4px; padding-top: 8px; }
.t3-ucards summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--mute); list-style: none; display: flex; align-items: center; gap: 6px; }
.t3-ucards summary::-webkit-details-marker { display: none; }
.t3-ucards summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg2); color: var(--ink2); font-size: 13px; font-weight: 800; flex: none; }
.t3-ucards details[open] summary::before { content: "−"; }
.t3-ucards details .uc-kv { margin-top: 8px; }

/* ── 레시피 상세: 제목 위 숫자 한 줄 · 휴대폰 순서 ─────────────────────── */
.t3-dkick { margin: 0 0 10px; }

/* ── 가이드 글: 제목 바로 아래 '숫자로 먼저' 상자 ─────────────────────── */
.t3-ans { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; background: var(--paper); border-radius: 16px; box-shadow: var(--sh-1); padding: 18px 22px; margin: 22px 0 6px; }
.t3-ans .an-n { display: flex; gap: 0; flex-wrap: wrap; min-width: 0; }
.t3-ans .an-n > div { padding: 0 24px; border-left: 1px solid var(--line2); min-width: 0; }
.t3-ans .an-n > div:first-child { padding-left: 0; border-left: 0; }
.t3-ans .an-n b { display: inline-block; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.t3-ans .an-n span { font-size: 15px; font-weight: 700; color: var(--ink2); margin-left: 2px; }
.t3-ans .an-n em { display: block; font-style: normal; font-size: 13.5px; color: var(--mute); margin-top: 3px; }
.t3-ans .an-go { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.t3-ans .an-go .small { text-align: center; }

/* ── 가이드 목록 ───────────────────────────────────────────────────── */
.t3-gsec { margin-top: 30px; }
.t3-glist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.t3-g { display: flex; flex-direction: column; gap: 5px; background: var(--paper); border-radius: 14px; box-shadow: var(--sh-1); padding: 16px 20px; color: var(--ink); text-decoration: none; min-width: 0; }
.t3-g:hover { box-shadow: var(--sh-2); color: var(--ink); }
.t3-g .gq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 800; }
.t3-g .gq .tag { font-size: 12px; font-weight: 700; color: var(--accent-dk); background: var(--accent-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.t3-g .gt { font-size: 14px; color: var(--mute); line-height: 1.5; }
.t3-g .go { font-size: 13.5px; font-weight: 700; color: var(--accent); margin-top: auto; padding-top: 2px; }
.t3-gmanual { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; background: var(--paper); border-radius: 14px; box-shadow: var(--sh-1); padding: 14px 20px; margin-top: 14px; color: var(--ink); text-decoration: none; }
.t3-gmanual:hover { box-shadow: var(--sh-2); color: var(--ink); }
.t3-gmanual .k { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.t3-gmanual b { font-size: 16px; }
.t3-gmanual .d { font-size: 14px; color: var(--mute); }
.t3-gmanual .go { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ── 이용 방법 ─────────────────────────────────────────────────────── */
.t3-plan { font-size: 14px; color: var(--ink2); line-height: 1.6; flex: 1 1 320px; min-width: 0; }
.t3-plan b { color: var(--ink); }
.t3-plan .nw { white-space: nowrap; }
.howto .t3-shotnote { font-size: 13px; color: var(--faint); margin: 10px 0 0; }

/* ── 데이터 안내 · FAQ: 날짜 칩 · 숫자 칸 ─────────────────────────────── */
.t3-dates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.t3-dates span { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.t3-dates span b { color: var(--ink); }
.t3-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.t3-nums > * { background: var(--paper); border-radius: 14px; box-shadow: var(--sh-1); padding: 14px 18px; min-width: 0; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
a.t3-n:hover { box-shadow: var(--sh-2); color: var(--ink); }
.t3-nums .q { font-size: 13px; font-weight: 700; color: var(--mute); }
.t3-nums b { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.t3-nums b small { font-size: 15px; margin-left: 2px; font-weight: 700; color: var(--ink2); }
.t3-nums .d { font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.t3-nums .go { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: auto; padding-top: 4px; }

/* ── 좁은 PC·태블릿 ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .t3-uh { gap: 28px; }
  .t3-h { font-size: 34px; }
  .t3-ucards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 휴대폰 ─────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .t3-kick { font-size: 17px; margin-bottom: 6px; }
  .t3-sub { font-size: 15px; margin-top: 8px; }
  .t3-cta { margin-top: 16px; }
  .t3-cta .btn { width: 100%; }
  .t3-cta .note { width: 100%; text-align: center; }
  .t3-uh { display: block; padding: 22px 0 4px; }
  .t3-h { font-size: 27px; }
  .t3-chips-h { margin: 16px 0 8px; font-size: 13.5px; }
  .t3-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; }
  .t3-chips::-webkit-scrollbar { display: none; }
  .t3-chip { padding: 7px 12px 7px 10px; font-size: 14px; }
  .t3-pick { margin-top: 14px; padding: 16px 16px 14px; gap: 8px; }
  .t3-pick .pk-h b { font-size: 17px; }
  .t3-pick .pk-n b { font-size: 38px; }
  .t3-ucsec { margin-top: 36px; }
  .t3-ucards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .t3-ans { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; gap: 12px; margin-top: 16px; }
  .t3-ans .an-n { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t3-ans .an-n > div { padding: 0 12px; }
  .t3-ans .an-n em { font-size: 12.5px; }
  .t3-ans .an-n b { font-size: 25px; }
  .t3-ans .an-go .btn { width: 100%; }
  .t3-gsec { margin-top: 20px; }
  .t3-glist { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .t3-g .gq { font-size: 16px; }
  .t3-gmanual .go { margin-left: 0; }
  .t3-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .t3-nums > * { padding: 11px 13px; }
  .t3-nums b { font-size: 23px; }
  .t3-nums .d { font-size: 12.5px; }
  .t3-dates { gap: 6px; margin-top: 12px; }
  .t3-dates span { font-size: 12.5px; padding: 5px 10px; }
  /* 레시피 상세: 제목 → 숫자 → 금색 버튼 → 적용 조건 → 숫자 상자 → 설명 순서(버튼이 첫 화면에 들게) */
  .t3-dhero > div:first-child { display: contents; }
  .t3-dhero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .t3-dhero .eyebrow { order: 1; }
  .t3-dhero .t3-dkick { order: 2; }
  .t3-dhero h1 { order: 3; }
  .t3-dhero .cta { order: 4; margin-top: 14px; }
  .t3-dhero .cta .btn { width: 100%; }
  .t3-dhero .cond-note { order: 5; }
  .t3-dhero .flow { order: 6; margin-top: 16px; }
  .t3-dhero .lead { order: 7; margin: 18px 0 0; }
}
/* 3초 테스트(개정 12) g4 묶음 — 작업이 끝나면 styles.css 끝으로 합친다 */
/* G4 — 검색 유입 페이지(매장 · 지역 · 업종 · 신규 오픈 · 월간 리포트 · 시군구 리포트) 첫 화면(2026-10-26 시안 그대로).
   홈 v3(.h3-pill · .h3-kick)의 말투·색을 이어받는다. 규칙: 금색 칠 버튼(.btn-accent)은 첫 화면에 하나.
   리포트로 가는 길은 네이비 테두리 카드(.g4-rp)와 네이비 테두리 버튼(.g4-navy). 이름은 전부 g4- 로 시작한다(다른 묶음과 겹치지 않게). */

/* 첫 화면 틀 — 왼쪽: 무엇·누구·숫자·행동 / 오른쪽: 이 페이지 사실 카드 + 리포트 카드 */
.g4 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; padding: 22px 0 8px; }
.g4.one { grid-template-columns: minmax(0, 1fr); }
.g4-l { min-width: 0; }
.g4-r { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.g4-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 12px; white-space: nowrap; max-width: 100%; }
.g4-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); flex: none; }
.g4 .eyebrow { margin-bottom: 4px; }
.g4 h1 { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.22; margin: 0; color: var(--ink); text-wrap: balance; }
.g4 h1 .num { color: inherit !important; box-shadow: inset 0 -.28em 0 var(--accent-soft); }
.g4-kick { font-size: 19px; font-weight: 800; color: var(--ink2); margin: 16px 0 0; letter-spacing: -.02em; line-height: 1.4; }
.g4-kick b { color: var(--ink); box-shadow: inset 0 -.34em 0 var(--accent-soft); white-space: nowrap; }
.g4-pill + .g4-kick { margin: 0 0 6px; }
.g4-val { font-size: 17px; line-height: 1.6; color: var(--ink2); margin: 14px 0 0; }
.g4-kick + .g4-val { margin-top: 4px; }
.g4-val b { color: var(--ink); font-weight: 700; }
.g4-meta { font-size: 13.5px; color: var(--mute); margin: 8px 0 0; line-height: 1.55; }
.g4-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.g4-acts form { margin: 0; display: inline-flex; }
.g4-acts .btn svg, .g4-pick .btn svg, .btn.g4-navy svg { margin-left: 2px; }
.g4-acts .lnk { font-weight: 600; font-size: 15px; padding: 6px 4px; white-space: nowrap; }
.g4-note { font-size: 13.5px; color: var(--mute); margin: 10px 0 0; line-height: 1.55; }
.g4 .pl-badges { margin-top: 10px; }
.g4 .rep-nav { margin-top: 14px; font-size: 14px; }
.g4 .pl-tag { margin-top: 12px; }
.g4-l > .notice { margin-top: 12px; }

/* 네이비 테두리 버튼 — 리포트 길(금색 다음으로 눈에 띄되 금색과 겹치지 않게) */
.btn.g4-navy { background: var(--paper); color: var(--accent); border: 1.5px solid var(--accent); font-weight: 700; }
.btn.g4-navy:hover { background: var(--accent); color: #fff; }

/* 오른쪽 카드 */
.g4-card { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-2); padding: 18px 20px; min-width: 0; }
.g4-card .ct { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--mute); }
.g4-card .ct span { display: inline-flex; align-items: center; gap: 6px; }
.g4-card .ct svg { color: var(--accent); }
.g4-card .tag { font-size: 11.5px; font-weight: 700; color: var(--accent-dk); background: var(--accent-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.g4-card h2 { font-size: 19px; margin: 6px 0 10px; letter-spacing: -.02em; }
.g4-foot { font-size: 13px; color: var(--mute); margin: 10px 0 0; line-height: 1.6; }
.g4-foot a { font-weight: 600; white-space: nowrap; }

/* 리포트 카드 */
.g4-rp { border: 1.5px solid var(--accent); box-shadow: none; }
.g4-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 10px; }
.g4-tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4-tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g4-tiles > div { background: var(--bg); border-radius: 10px; padding: 9px 12px; min-width: 0; }
.g4-tiles .k { display: block; font-size: 12.5px; color: var(--mute); }
.g4-tiles .v { display: block; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.3; letter-spacing: -.02em; }
.g4-tiles .v small { font-size: 13px; font-weight: 600; color: var(--mute); margin-left: 1px; }
.g4-tiles .d { display: block; font-size: 12px; color: var(--faint); }
.g4-rp .inc { font-size: 13.5px; color: var(--ink2); margin: 0; }
.g4-rp .go { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; }
.g4-rp .price { font-size: 13px; color: var(--mute); }
.g4-rp-go { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 10px; }

/* 가린 정보 카드(매장) */
.g4-lock dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 9px 12px; margin: 10px 0 0; font-size: 15px; }
.g4-lock dt { color: var(--mute); }
.g4-lock dd { margin: 0; color: var(--ink2); min-width: 0; }
.g4-lock .lk { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 14px; white-space: nowrap; }

/* 순위 목록(카드 안) */
.g4-rank { list-style: none; margin: 6px 0 0; padding: 0; }
.g4-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 15px; }
.g4-rank li:last-child { border-bottom: 0; }
.g4-rank .r { width: 18px; color: var(--faint); font-size: 13px; flex: none; }
.g4-rank .nm { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); }
.g4-rank .v { font-weight: 700; color: var(--ink); white-space: nowrap; }
.g4-rank .v small { font-weight: 500; color: var(--mute); font-size: 13px; margin-left: 1px; }
.g4-rank .rl { font-size: 12.5px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.g4-rank .sm { display: block; font-size: 13px; color: var(--mute); font-weight: 400; }

/* 빠른 고르기 칩 */
.g4-hot { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 14px; font-size: 14px; }
.g4-hot b { color: var(--mute); font-weight: 700; margin-right: 2px; font-size: 13px; }
.g4-hot a { background: var(--paper); box-shadow: var(--sh-1); border-radius: 999px; padding: 4px 11px; color: var(--ink2); font-weight: 600; white-space: nowrap; }
.g4-hot a em { font-style: normal; color: var(--mute); margin-left: 5px; font-weight: 500; }

/* 고르기 칸 + 금색 버튼 한 줄 */
.g4-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.g4-pick select { height: var(--h-btn-lg); min-width: 170px; max-width: 100%; border: 1px solid var(--control); border-radius: 8px; padding: 0 12px; background: #fff; font: inherit; font-size: 15.5px; color: var(--ink); }
.g4-pick select:disabled { color: var(--faint); background: var(--bg); }

/* 첫 화면에서 아래로 옮긴 요약 문단(본문 글 양은 그대로) */
.g4-sum { background: var(--paper); box-shadow: var(--sh-1); border-radius: var(--r); padding: 18px 22px; }
.g4-sum h2 { font-size: 18px; margin-bottom: 6px; }
.g4-sum p { margin: 0; font-size: 15.5px; color: var(--ink2); line-height: 1.75; }

/* 리포트 상세 — 첫 화면 숫자 세 칸 */
.rp-head .g4-tiles { max-width: 640px; margin-top: 14px; }
.rp-head .g4-tiles > div { background: var(--paper); border: 1px solid var(--line); }
.rp-head h1 .num { box-shadow: inset 0 -.28em 0 var(--accent-soft); }
.rp-head .g4-val { margin-top: 8px; }
.rp-tiles.g4-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 세 칸 배치(매장) — PC: 왼쪽 위 글·행동 / 왼쪽 아래 리포트 / 오른쪽 이 매장 카드. 휴대폰: 글 → 이 매장 → 리포트 */
.g4.g4-3 { grid-template-areas: "l r" "x r"; row-gap: 22px; }
.g4-3 > .g4-l { grid-area: l; } .g4-3 > .g4-r { grid-area: r; } .g4-3 > .g4-x { grid-area: x; min-width: 0; }
@media (max-width: 980px) {
  .g4 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .g4.g4-3 { grid-template-areas: "l" "r" "x"; }
}
@media (max-width: 780px) {
  .g4 { padding-top: 12px; }
  .g4-pill { font-size: 12px; padding: 4px 11px; margin-bottom: 10px; }
  .g4 h1 { font-size: 27px; }
  .g4-kick { font-size: 16.5px; }
  .g4-val { font-size: 15.5px; margin-top: 10px; }
  .g4-acts { margin-top: 16px; gap: 8px; }
  .g4-tiles.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4-tiles .v { font-size: 20px; }
}
@media (max-width: 480px) {
  .g4-acts > .btn-accent, .g4-pick .btn-accent, .g4-acts > form:first-child, .g4-acts > form:first-child .btn-accent { width: 100%; }
  .g4-pick select { flex: 1 1 100%; }
  .g4-tiles.t3 .v { font-size: 18px; }
  .g4-tiles.t3 > div { padding: 8px 9px; }
  .rp-tiles.g4-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 3초 테스트(개정 12) g5 묶음 — 작업이 끝나면 styles.css 끝으로 합친다 */
/* 로그인 뒤 화면(/me · /monitor · /me/plan · /me/ledger · /me/match · /me/region) 첫 카드 = 한 줄 · 실제 숫자 · 금색 버튼 하나.
   시안: 바탕 화면 '비즈시그널 3초 테스트 시안 2026-10-26/G5 내 계정·내 영업신호'(.g5-* 그대로). */

/* 첫 카드 — 왼쪽 머리·제목·설명·숫자 칩, 오른쪽 금색 버튼(휴대폰은 한 줄로 쌓인다) */
.g5-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: end; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 26px 30px 24px; margin-top: 28px; }
.g5-l { min-width: 0; }
.g5-now .eyebrow { margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g5-now .eyebrow .g5-mail { font-weight: 500; color: var(--faint); overflow-wrap: anywhere; }
.g5-now h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.28; margin: 0; text-wrap: balance; }
.g5-now h1 .n { color: var(--accent); }
.g5-s { font-size: 15.5px; color: var(--ink2); margin: 10px 0 0; line-height: 1.6; }
.g5-num { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.g5-num:empty { display: none; }
.g5-num .c { display: inline-flex; align-items: baseline; gap: 6px; background: var(--bg); border-radius: var(--r-sm); padding: 8px 13px; font-size: 14px; color: var(--ink2); white-space: nowrap; text-decoration: none; }
.g5-num .c b { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.g5-num .c.k { background: transparent; padding-left: 0; color: var(--mute); font-weight: 600; }
.g5-num a.c { color: var(--ink2); }
.g5-num a.c:hover { box-shadow: inset 0 0 0 1px var(--line3); }
.g5-act { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 270px; max-width: 360px; }
/* 조건 이름이 버튼에 들어가는 곳(/monitor)이 있어 버튼 글자는 줄을 바꿀 수 있게 — 가로 넘침 대신 두 줄 */
.g5-act .btn { white-space: normal; height: auto; min-height: var(--h-btn-lg); padding-top: 10px; padding-bottom: 10px; line-height: 1.35; text-align: center; }
.g5-act .g5-2 { font-size: 14px; font-weight: 600; text-align: center; }
.g5-act .g5-3 { font-size: 13px; color: var(--faint); text-align: center; line-height: 1.5; }
.g5-act .g5-3.l { text-align: left; }
.g5-act .g5-3 a { color: var(--mute); }
.g5-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink2); background: var(--bg2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.g5-pill.pro { background: var(--accent-bg); color: var(--accent-dk); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.g5-ref { font-size: 13px; color: var(--faint); margin-top: 10px; }
.g5-funnel { font-size: 13.5px; color: var(--mute); margin-top: 12px; line-height: 1.6; }
.g5-funnel b { color: var(--ink2); }
.g5-notes { margin-top: 14px; }

/* 이번 주 방문 계획 요일 칸(/me 이용권 · /me/plan) */
.g5-dayrow { display: flex; gap: 8px; flex-wrap: wrap; }
.g5-day { display: inline-flex; flex-direction: column; gap: 1px; background: var(--bg); border-radius: var(--r-sm); padding: 9px 14px; min-width: 150px; color: var(--ink2); text-decoration: none; }
.g5-day b { font-size: 16px; color: var(--ink); }
.g5-day span { font-size: 13.5px; color: var(--mute); }
.g5-day .big { font-size: 19px; font-weight: 800; color: var(--ink); }
.g5-day.on { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-soft); }
a.g5-day:hover { box-shadow: inset 0 0 0 1px var(--line3); color: var(--ink2); }
a.g5-day.on:hover { box-shadow: inset 0 0 0 1px var(--sel-line); }

/* /me 무료 — 세 단계 카드 */
.g5-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; list-style: none; padding: 0; }
.g5-steps li { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.g5-steps li.on { box-shadow: inset 0 0 0 2px var(--cta); }
.g5-steps .h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; }
.g5-steps .i { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; flex: none; }
.g5-steps .done .i { background: var(--ok); }
.g5-steps .done .i svg { width: 13px; height: 13px; stroke-width: 3; }
.g5-steps .t { font-size: 12px; font-weight: 700; color: var(--faint); margin-left: auto; white-space: nowrap; }
.g5-steps li.on .t { color: var(--accent-dk); }
.g5-steps .d { font-size: 14px; color: var(--mute); line-height: 1.55; }
.g5-steps .v { font-size: 14px; color: var(--ink2); }
.g5-steps .v b { font-size: 17px; }
.g5-steps a.l { font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 4px; }
.g5-steps form { display: inline; margin: 0; }
.g5-lb { background: none; border: 0; padding: 0; margin: 0 0 0 6px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.g5-lb:hover { color: var(--accent-dk); }
.g5-steps .ok { font-size: 13px; color: var(--ok); font-weight: 600; }

/* /me 이용권 — 카드 셋(영업 장부 · 내 영업신호 · 내 거래처 대조) */
.g5-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.g5-tri a { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); min-width: 0; text-decoration: none; }
.g5-tri a:hover { box-shadow: inset 0 0 0 1px var(--ink2); }
.g5-tri .h { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 7px; }
.g5-tri .v { font-size: 14px; color: var(--ink2); }
.g5-tri .v b { font-size: 18px; font-weight: 800; }
.g5-tri .d { font-size: 13.5px; color: var(--mute); line-height: 1.5; }
.g5-tri .go { font-size: 14px; font-weight: 600; color: var(--accent); margin-top: auto; padding-top: 4px; }

/* /me — 플랜 · 내 활동은 맨 아래에 접는다 */
.g5-acct { margin-top: 36px; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); padding: 12px 18px; }
.g5-acct > summary { cursor: pointer; font-weight: 700; font-size: 15px; display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.g5-acct > summary span { font-weight: 500; font-size: 14px; color: var(--mute); }
.g5-acct .two { margin-top: 12px; }
.g5-acct .section-tight { margin-top: 20px; }

/* /monitor 무료 — 조건 모니터링 잠금 카드의 실제 숫자 두 줄 */
.g5-lockrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 12px 0 4px; }
.g5-lockrow > div { background: var(--bg); border-radius: var(--r-sm); padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink2); }
.g5-lockrow b { font-size: 18px; color: var(--ink); }
.g5-lockrow small { color: var(--faint); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-left: 6px; }

/* /me/match 올리기 화면 — 두 칸(.two) 자식이 내용 폭 밑으로 줄지 않아 390px 에서 1px 넘쳤다(CLAUDE.md §9 grid 자식 min-width: 0) */
#upload .two > * { min-width: 0; }
#upload .cl-drop input[type=file] { max-width: 100%; }


@media (max-width: 780px) {
  .g5-now { grid-template-columns: 1fr; padding: 18px; margin-top: 14px; gap: 14px; }
  .g5-now h1 { font-size: 23px; }
  .g5-s { font-size: 14.5px; }
  .g5-num { gap: 6px; margin-top: 12px; }
  .g5-num .c { padding: 6px 10px; font-size: 13px; }
  .g5-num .c b { font-size: 17px; }
  .g5-act { min-width: 0; max-width: none; }
  .g5-act .g5-3.l { text-align: center; }
  .g5-steps, .g5-tri, .g5-lockrow { grid-template-columns: 1fr; }
  .g5-dayrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .g5-day { min-width: 0; padding: 7px 10px; }
  .g5-day b { font-size: 14.5px; }
  .g5-day .big { font-size: 17px; }
  .g5-hide-m { display: none; }

  /* 영업 장부 표 → 줄마다 카드. 표 그대로면 상호 칸이 한 글자 폭으로 눌려 세로로 갈렸다(2026-10-26 시안에서 찾은 버그).
     1 고르기 · 2 상호 · 3 지역 · 4 업태 · 5 지금 상태 · 6 표시 · 7 방문일 · 8 저장 뒤 변화 */
  .lg-tbl.g5-cards thead { display: none; }
  .lg-tbl.g5-cards, .lg-tbl.g5-cards tbody { display: block; width: 100%; }
  .lg-tbl.g5-cards tr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line2); }
  .lg-tbl.g5-cards tr:last-child { border-bottom: 0; }
  .lg-tbl.g5-cards td { display: block; padding: 0; border: 0; min-width: 0; }
  .lg-tbl.g5-cards td:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: 2px; }
  .lg-tbl.g5-cards td:nth-child(1) input { width: 18px; height: 18px; }
  .lg-tbl.g5-cards td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; }
  .lg-tbl.g5-cards td:nth-child(5) { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
  .lg-tbl.g5-cards td:nth-child(3) { display: block; grid-column: 2; grid-row: 2; font-size: 13px; color: var(--mute); }
  .lg-tbl.g5-cards td:nth-child(4) { display: block; grid-column: 3; grid-row: 2; justify-self: end; font-size: 13px; color: var(--mute); }
  .lg-tbl.g5-cards td:nth-child(6) { grid-column: 2 / 4; grid-row: 3; }
  .lg-tbl.g5-cards td:nth-child(7) { grid-column: 2; grid-row: 4; font-size: 12.5px; color: var(--mute); }
  .lg-tbl.g5-cards td:nth-child(8) { display: block; grid-column: 3; grid-row: 4; justify-self: end; font-size: 12.5px; color: var(--mute); }
  .lg-tbl.g5-cards td:nth-child(7)::before { content: '방문일 '; }
  .lg-tbl.g5-cards td:nth-child(8)::before { content: '변화 '; }

  /* 내 지역 2단계 바닥 줄 — 월요일 메일 설명 세 줄을 접고 제목 한 줄만(휴대폰 첫 화면에 '내 지역 보기'가 들어오게) */
  .mro-weekly { padding: 9px 12px; align-items: center; }
  .mro-weekly input { margin-top: 0; }
  .mro-weekly small, .mro-weekly br { display: none; }
}