/* acham! 우리가게지킴이 — 디자인 토큰과 공용 모양.
   서버가 그린 HTML 위에 얹히는 스타일이다. 색은 아이보리 바탕(--bg)과 흰 카드(--surface)
   양쪽에서 WCAG AA(4.5:1)를 넘는 값만 쓴다. 라이트 모드만 만든다.
   :root 의 값은 docs/brand/2026-10-11-brand-tokens.css 와 같다(test/page.test.js 가 대조한다). */

/* ── 토큰 ─────────────────────────────────────── */
:root{
  --bg:#f7f6f0;--surface:#ffffff;--surface-2:#f0f1e9;
  --line:#dee3d8;--line-strong:#84907e;
  --text:#243129;--muted:#5e685f;
  --brand:#4d6044;--brand-strong:#3e4f37;--brand-soft:#e9eee3;
  --ok:#4d6044;--ok-soft:#e9eee3;
  --warn:#765510;--warn-soft:#f7eecf;
  --danger:#8f3c2d;--danger-soft:#f8e9e4;
  --info:#3d637a;--info-soft:#e8f0f5;
  --focus:#4d6044;
  --radius:16px;--radius-sm:12px;--radius-pill:999px;
  --shadow:0 1px 2px rgba(36,49,41,.04),0 8px 24px rgba(36,49,41,.06);
  --font:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --content-width:68rem;--body-size:1rem;--body-leading:1.65;
  --hero-size:clamp(2rem,4.1vw,2.75rem);--section-size:clamp(1.375rem,2.5vw,1.5rem);
  --control-min-height:48px;
  color-scheme:light;
}

/* ── 기본 ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 붙은 앱 바(.appbar) 밑에 키보드 초점이 가리지 않게(WCAG 2.4.11 — 계획 20, 설계 5장 예외). 한 줄 앱 바 61px(max(min-height 56, 멈춤 단추 48 + 위아래 6) + 아래 테두리 1) + 8px. 테마 화면은 html[data-theme] 의 자기 값이 이긴다 */
html{scroll-padding-top:69px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--body-size);line-height:var(--body-leading);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
a{color:var(--brand-strong);text-underline-offset:3px}
h1,h2,h3{line-height:1.3;margin:0 0 .5rem;letter-spacing:-.01em;font-weight:700}
h3{font-size:1.125rem}
p{margin:0 0 .75rem}
.icon{display:inline-block;vertical-align:middle;flex:none}
/* 포커스 링 — 모든 키보드 포커스가 이 하나다(버튼·링크·입력). 흰 바탕과 아이보리 바탕에서 보이고, 같은 색 버튼(주 행동) 위에서도 3px 떨어져 그려져 보인다.
   어두운 바탕(.band-cta)에서는 아래에서 흰색으로 바꾼다. */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.muted{color:var(--muted);font-size:.875rem}
.err{color:var(--danger);font-weight:600}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* 입력칸은 16px 이상 — iOS 가 포커스 때 화면을 확대하지 않게 한다 */
input[type=text],input[type=tel],input[type=number],input[type=email],input[type=search],select,textarea{font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 14px;min-height:var(--control-min-height);max-width:100%}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* 포커스 링은 위의 전역 :focus-visible 이 그린다 — 여기서는 테두리만 올리브로(마우스로 눌러 :focus 만 되는 select 도) */
input[type=text]:focus,input[type=tel]:focus,input[type=number]:focus,input[type=email]:focus,input[type=search]:focus,select:focus,textarea:focus{border-color:var(--brand)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--brand);vertical-align:-4px;margin:0 6px 0 0}
/* 잠긴 칸은 잠겨 보여야 한다 — 흰 바탕이면 눌러도 아무 일 없는 칸이 눌릴 것처럼 보인다 */
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--muted);border-color:var(--line);cursor:not-allowed}
button:disabled{cursor:not-allowed}
button{font:inherit;color:inherit}

/* ── 틀 ───────────────────────────────────────── */
.page{width:100%;max-width:34rem;margin:0 auto;padding:20px 20px 56px}
.page-wide{width:100%}
.wrap{max-width:40rem;margin:0 auto;padding:0 20px}
.wrap-wide{max-width:var(--content-width);margin:0 auto;padding:0 20px}

.appbar{position:sticky;top:0;z-index:20;background:rgba(247,246,240,.94);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.appbar-in{max-width:var(--content-width);margin:0 auto;padding:6px 20px;min-height:56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 12px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap;font-weight:700;font-size:1.05rem;color:var(--text);text-decoration:none;letter-spacing:-.01em}
/* 앱 바 이미지 — 64px 원본(brand/icon-64.png)을 32px 로 보여 2배 선명도. 글자가 옆에 있어서 장식(alt="")이다 */
.brand-mark{display:block;flex:none;width:32px;height:32px;border-radius:8px}
/* 첫 화면 앱 바의 공식 로고(브랜드 가이드북 v1.2 「가로형·태그라인 없음」 — src/page.js logoLink, 2026-10-22). 가이드북 9쪽 최소 크기가 내용 폭 160px 이고 SVG 의
   viewBox 가 보호 여백을 뺀 내용 영역이라 이미지 폭 = 내용 폭 160px, 높이는 원본 비율(922:266 — 약 46px)이다. 로고를 160px 아래로 줄이거나 말줄임하지 않는다.
   링크가 크기 판정 상자(container)다: 자리가 넉넉하면 가로형 전체, 오른쪽 단추(로그인한 사장님·관리자)에 밀려 160px 보다 좁아지면 심벌만(가이드북 9·24쪽 「작은
   공간은 심벌」, 심벌 32px 이상) — 같은 원본의 왼쪽 심벌 부분을 object-fit 으로 보인다(심벌 내용 영역 280×266 → 높이 46 에서 48.4px, 오른쪽 「a」는 53px 부터라
   49px 상자에 섞이지 않는다). 글꼴 차이로 단추 폭이 달라도 넘치지 않고 그때그때 판정한다. 컨테이너 질의를 모르는 옛 브라우저는 링크 밖 8px 너머를 자른다(clip-path —
   단추를 덮지 않게. overflow 가 아닌 까닭은 초점 테두리(바깥 6px 까지)와 테마의 로고 받침 띠를 남기려고) */
.brand-logo-link{flex:0 1 160px;width:160px;min-width:49px;clip-path:inset(-8px);container-type:inline-size}
.brand-logo{display:block;flex:none;width:160px;height:auto;aspect-ratio:922/266}
@container (max-width:159.98px){.brand-logo{width:49px;height:calc(160px*266/922);aspect-ratio:auto;object-fit:cover;object-position:0 50%}}
/* 보호 여백(가이드북 8쪽 — 로고 바깥 사방 x = 심벌 폭의 1/4, 160px 로고에서 약 12.15px. 「여백 안에는 다른 글자·강한 경계선·재단선을 넣지 않는다」): 로고 높이 46.16 +
   위아래 x 라 앱 바 안쪽이 70.46px 이상이어야 한다 — 로고 앱 바만 72px(위아래 12.9px — 위는 화면 끝, 아래는 앱 바 테두리. 2026-10-22 검토 I1, 고치기 전 6.9px).
   테마 앱 바는 제 높이 변수(merged·isometric --t-bar, kinetic --t-hd = 72px)·editorial 은 위 여백 14 + 알약 48 로 같은 기준을 지킨다(test/brand-logo.test.js) */
.appbar-in:has(>.brand-logo-link){min-height:72px;flex-wrap:nowrap}
/* 로고 앱 바는 관리자(콘솔 링크 — 아래 :not(:has(…a[href="/console"])) 규칙이 빼는 경우)여도 한 줄 — 두 줄로 꺾이면 단추 줄이 로고 바로 아래(0px)에 붙고 위 여백도
   6px 라 보호 여백이 깨졌다(검토 M2 — 콘솔만 관리자 320px 앱 바 61 → 107px). 좁으면 링크가 줄어 심벌(@container), 단추가 둘(가게도 가진 관리자)이고 380px 아래면
   심벌도 들 자리가 없어(320px 에서 34px) 로고 링크를 뗀다 — 지금 보는 화면이 첫 화면이라 돌아갈 곳이 같다(merged·editorial·kinetic 첫 화면과 같은 규칙) */
@media (max-width:379.98px){.appbar-in:has(.btn+.btn)>.brand-logo-link{display:none}}
/* 높아진 붙은 앱 바(72 + 테두리 1) 밑에 키보드 초점이 가리지 않게(위 html 규칙과 같은 까닭 — 73 + 8). :where 로 html 과 같은 특이도라 테마 화면(html[data-theme])은 제 값이 이긴다 */
html:where(:has(.appbar-in>.brand-logo-link)){scroll-padding-top:81px}
/* 컨테이너 질의를 모르는 옛 브라우저(iOS 15.4~15 Safari·같은 판 카카오 인앱 — :has 는 안다)는 위 @container 가 없어 로고가 160px 그대로 링크 밖 8px 너머에서 잘린다
   (워드마크가 글자 중간에서 끊김 — 가이드북 25쪽 「재조합하지 않았는가」, 검토 M4). 로그인 앱 바(「로그인」 링크가 없음 — 오른쪽 단추가 넓다)·480px 아래는 처음부터
   심벌만(@container 와 같은 값). 로그아웃 앱 바는 320px 에서도 로고 전체가 든다(위 380px 여백 규칙) */
@media (max-width:479.98px){@supports not (container-type:inline-size){.appbar-in:not(:has(a[href="/login"]))>.brand-logo-link .brand-logo{width:49px;height:calc(160px*266/922);aspect-ratio:auto;object-fit:cover;object-position:0 50%}}}
/* 고대비(forced-colors): 그림은 시스템 색으로 바뀌지 않는데 앱 바 바탕은 시스템 바탕(Canvas)이 되어 네이비 로고가 어두운 고대비 바탕에 묻힌다(검토 M5) —
   로고 이미지에 판에 맞는 단색 받침을 둔다(기본 판 미색 #FAF8F3, 반전 판 네이비 #183343 — 가이드북 9쪽 「밝은 배경·어두운 배경」). 반전 판은 주소(brand.js LOGO.rev)로 고른다 */
@media (forced-colors:active){.brand-logo{forced-color-adjust:none;background:#FAF8F3}.brand-logo[src*="logo-rev"]{background:#183343}}
/* 좁은 폰(380px 이하)의 첫 화면(로고 앱 바)만 좌우 여백 20 → 16px — 320px 에서도 로그아웃 앱 바(로고 160 + 멈춤 단추 + 로그인)가 한 줄에 로고 전체로 든다.
   16px 는 가이드북 8쪽 보호 여백(x = 심벌 폭의 1/4 — 160px 로고에서 약 12px) 이상이다. 다른 화면 앱 바는 그대로 */
@media (max-width:380px){.appbar-in:has(>.brand-logo-link){padding-left:16px;padding-right:16px}}
/* 앱 바 이름 글자 = 워드마크 두 칸(src/page.js brandName — 계획 42): .brand-word 는 줄지도 꺾이지도 않고, 말줄임은 .brand-word 를 뺀 칸(서브)에만 건다(아래 :not(.brand-word)) */
.brand-word{flex:none}
.brand-word,.brand-sub{white-space:nowrap}
.appbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.appbar-right .btn{white-space:nowrap}
/* 정식 이름(「acham! 우리가게지킴이」)이 길어, 관리자 번호로 가게도 가진 사람의 앱 바(버튼 둘)는 폰 폭에서 한 줄에 안 든다 — 이름도 버튼 글자도 꺾지 않고 버튼 줄을 아래 오른쪽으로 내린다(.appbar-in 이 wrap).
   좁은 폭에서는 간격·안쪽 여백을 줄여 한 줄에 드는 경우를 늘린다(.btn-sm 의 min-height 44px 는 그대로) */
@media (max-width:380px){.appbar-right{gap:4px}.appbar-right .btn-sm{padding:8px 10px}}
/* 관리자가 아닌 앱 바(손님 「로그인」·사장님 「내 가게 관리」·「로그아웃」 + 멈춤 단추)는 폭·기기 글꼴과 상관없이 한 줄 — 꺾지 않고 정식 이름 글자가 모자란 만큼만 말줄임(…)으로
   준다(링크 이름은 글자 그대로). 두 줄(약 105px)이면 위 scroll-padding-top 이 초점을 가리고, 멈춤 단추가 늦게 뜰 때 화면이 밀린다(통합 확인 — 계획 25 판정 P15 넓힘).
   관리자(콘솔 링크)·콘솔(꼬리표)은 위 규칙대로 버튼 줄을 내린다. :has() 를 모르는 브라우저는 규칙째 버려 지금처럼 꺾인다.
   min-width:0 은 이름 글자 링크만 — 첫 화면 로고 링크(.brand-logo-link)는 빼서 심벌 상자 49px 아래로 줄지 않는다(이 규칙의 특이도가 높아 덮고 있었다 — 검토 M1) */
.appbar-in:not(:has(.appbar-label,a[href="/console"])){flex-wrap:nowrap}
.appbar-in:not(:has(.appbar-label,a[href="/console"])) .brand:not(.brand-logo-link){min-width:0}
.appbar-in:not(:has(.appbar-label,a[href="/console"])) .brand>span:not(.brand-word){min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 멈춤 단추 — 움직임 화면(첫 화면·/me) 앱 바 맨 앞. 반복 장면이 있을 때만 app.js 가 보인다(src/theme-parts.js pauseButton). 48×48, 이름(「움직임 멈춤」)은
   고정이고 상태는 aria-pressed 와 아이콘(멈춤 ↔ 재생)으로 — 색만으로 말하지 않는다. .icon-btn(44px·올리면 빨강)과 달리 올려도 빨강이 없다(멈춤은 위험한 동작이 아니다).
   포커스 링은 위의 전역 :focus-visible 그대로 */
.pause-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer}
.pause-btn:hover{background:var(--surface-2)}
.pause-btn[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand)}
.pause-btn .icon{width:20px;height:20px}
.pause-btn .icon-play,.pause-btn[aria-pressed="true"] .icon-pause{display:none}
.pause-btn[aria-pressed="true"] .icon-play{display:inline-block}

.site-foot{border-top:1px solid var(--line);background:var(--bg)}
.site-foot-in{max-width:var(--content-width);margin:0 auto;padding:14px 20px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:.875rem}
.site-foot a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
.site-foot a:hover{color:var(--text)}
.foot-brand{font-weight:700;color:var(--text)}
.site-foot .dot{color:var(--muted)}

/* ── 버튼 — 주요 버튼은 48px, 작은 버튼(.btn-sm)도 누를 것은 44px 이상 ──────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-min-height);padding:12px 20px;border-radius:var(--radius-sm);border:1px solid transparent;font:inherit;font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--brand);color:var(--surface)}
.btn-primary:hover{background:var(--brand-strong)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--muted)}
.btn-ghost{background:transparent;color:var(--brand-strong)}
.btn-ghost:hover{background:var(--brand-soft)}
.btn-light{background:var(--surface);color:var(--brand-strong)}
.btn-light:hover{background:var(--brand-soft)}
.btn-lg{padding:12px 28px}
.btn-sm{min-height:44px;padding:8px 14px;font-size:.95rem}
/* 눌리지 않는 버튼 — 투명도로 흐리게 하면 글자가 3:1 까지 내려간다(「인증번호 다시 받기 (60초)」의 남은 시간이 이 글자다). 회색 바탕에 보조 글자색(5.1:1)으로 눌리지 않는 것을 보여 준다. 위의 :hover 규칙과 힘이 같아 뒤에 둔다 */
.btn:disabled{background:var(--surface-2);border-color:var(--line);color:var(--muted)}

/* ── 안내 카드(오류 화면) ───────────────────────── */
.notice{max-width:28rem;margin:32px auto;padding:28px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}
.notice-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;margin-bottom:12px}
.notice-icon .icon{width:28px;height:28px}
.notice-danger .notice-icon{background:var(--danger-soft);color:var(--danger)}
.notice-title{font-size:var(--section-size);font-weight:700;margin:0 0 8px}
.notice-body{color:var(--muted);margin:0}
.notice-body + .notice-body{margin-top:8px}
.notice-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}

/* ── 첫 화면 ──────────────────────────────────────
   순서(브랜드 요청서 §5): 히어로 → 지킴이 카드 → 언제 문자가 오나요 → 문자 예시 → 신청 절차 → 자주 묻는 질문 → 마지막 신청 띠.
   화면은 평면이다 — 히어로는 움직이는 평면 장면(motion.css · scenes.js)이고, 바탕에 그라데이션 효과를 깔지 않는다.
   보조 글자도 14px(.875rem) 아래로 내리지 않는다(test/landing.test.js 가 이 묶음을 잰다). */
.hero{padding:var(--space-8) 0 var(--space-12)}
/* 폰: 글(눈썹·제목·설명·신청 버튼) → 그림 → 문자 예시 순서로 한 줄씩. 그림이 글 뒤라 제목·신청 버튼을 첫 화면 밖으로 밀지 않는다.
   720px 부터는 왼쪽에 글과 문자 예시, 오른쪽에 그림(두 줄에 걸쳐 가운데) */
.hero-grid{display:grid;gap:var(--space-6);grid-template-areas:"copy" "art" "sms"}
.hero-copy{grid-area:copy;min-width:0}
.hero-art{grid-area:art}
.hero-sms{grid-area:sms;margin:0;min-width:0}
.eyebrow{display:inline-block;margin:0 0 var(--space-4);padding:4px 12px;border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--brand-strong);font-size:.875rem;font-weight:700}
.display{font-size:var(--hero-size);font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:0 0 var(--space-4)}
.lead{max-width:32rem;margin:0 0 var(--space-6)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero-note{margin:var(--space-4) 0 0;color:var(--muted);font-size:.875rem;font-weight:600}
.hero-sms figcaption{margin:0 0 var(--space-2);color:var(--muted);font-size:.875rem;font-weight:700}
.hero-sms .sms{margin:0}
.hero-sms .sms p{background:var(--surface);border:1px solid var(--line)}
@media (min-width:720px){.hero{padding:var(--space-12) 0 var(--space-16)}.hero-grid{grid-template-columns:1.1fr .9fr;grid-template-areas:"copy art" "sms art";column-gap:var(--space-12);row-gap:var(--space-8);align-items:start}.hero-art{align-self:center}}

/* 문자 말풍선 — 신청 3단계의 문자 예시(.sms-sample)도 같은 모양을 쓴다 */
.sms{margin:0 0 12px}
.sms p{display:inline-block;margin:0;padding:10px 14px;background:var(--surface-2);border-radius:18px 18px 18px 6px;font-size:.95rem;line-height:1.5}
.sms-when{display:block;margin:4px 0 0 8px;color:var(--muted);font-size:.875rem}
.phone{max-width:340px;margin:0 auto;padding:16px 14px 20px;background:var(--surface);border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow)}
.phone-head{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.875rem;font-weight:700}
.phone-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand)}
.phone-avatar .icon{width:18px;height:18px}
.sms-grid{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:720px){.sms-grid{grid-template-columns:1fr 1fr}}

.band{padding:var(--space-12) 0}
.band-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{margin:0 0 8px;font-size:var(--section-size);font-weight:700;letter-spacing:-.02em}
.section-lead{max-width:40rem;margin:0 0 var(--space-6);color:var(--muted)}

/* 지킴이 카드(파라솔·동파·눈길) — 이름 / 무엇 전에 / 할 일 / 신청 버튼. 넓은 화면에서는 세 칸이고 버튼이 카드 맨 아래에 나란히 선다 */
.kinds{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.kind{padding:var(--space-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.kind-icon{display:block;margin:0 0 var(--space-3);color:var(--brand)}
.kind-icon .icon{width:36px;height:36px}
.kind h3{margin:0 0 var(--space-1);font-size:1.125rem}
.kind p{margin:0 0 var(--space-4)}
.kind .kind-when{margin:0 0 var(--space-2);color:var(--brand-strong);font-weight:700}
.kinds-guards .kind{display:flex;flex-direction:column;align-items:flex-start}
.kinds-guards .kind .btn{margin-top:auto}

/* 언제 문자가 오나요 — 영업 중 / 마감 1시간 전 두 칸 */
.when-grid{display:grid;gap:var(--space-4);align-items:start}
.when{padding:var(--space-6);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.when h3{margin:0 0 var(--space-1);font-size:1.125rem}
.when p{margin:0 0 var(--space-3)}
.when .when-who{color:var(--brand-strong);font-size:.875rem;font-weight:700}
.when-meta{color:var(--muted);font-size:.875rem}
.when > .when-meta{margin:0}
.when-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.when-list li{padding:var(--space-3) 0 0;border-top:1px solid var(--line)}
.when-list strong{display:block}
.when-list .when-meta{display:block;margin-top:var(--space-1)}
@media (min-width:720px){.when-grid{grid-template-columns:1fr 1fr}}

/* 신청 절차 — 번호는 목록(<ol>)이 이미 말하므로 동그라미 숫자는 화면용(aria-hidden) */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.step{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 var(--space-3);border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums}
.steps > .step h3{margin:0 0 6px;font-size:1.125rem}
.steps > .step p{margin:0;color:var(--muted)}
.band-alt .steps > .step{background:var(--bg)}
@media (min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}.kinds{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}

.faq{display:grid;gap:10px;max-width:40rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.faq summary{position:relative;min-height:44px;padding:16px 48px 16px 18px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0;padding:0 18px 16px;color:var(--muted)}

.band-cta{padding:var(--space-12) 0;background:var(--brand);color:var(--surface)}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.cta-inner h2{margin:0;color:var(--surface);font-size:var(--section-size);font-weight:700;letter-spacing:-.02em}
/* 올리브 바탕의 띠 — 포커스 링이 바탕과 같은 올리브면 안 보인다 */
.band-cta :focus-visible{outline-color:var(--surface)}

/* ── 글 화면(개인정보처리방침) ───────────────────── */
.prose{max-width:42rem;margin:0 auto;padding:32px 20px 56px}
.prose h1{font-size:var(--section-size);font-weight:700;margin:0 0 6px}
.prose h2{font-size:1.08rem;margin:28px 0 8px}
.prose ul{margin:0 0 12px;padding-left:1.2rem}
.prose li{margin:4px 0}
.prose .meta{color:var(--muted);font-size:.9rem;margin:0 0 20px}

/* ── 공용 조각(신청·로그인부터) ───────────────────
   hidden 속성은 어떤 display 규칙보다 이긴다 — 단계형 신청이 hidden 으로 단계를 숨긴다. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.btn-block{display:flex;width:100%}

/* 입력 칸 */
.field{margin:0 0 18px}
.field-label{display:block;margin:0 0 6px;font-weight:700}
.field-label .muted{font-weight:400}
.field input[type=text],.field input[type=tel],.field select{width:100%}
.field-help{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.field-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.counter{flex:none;margin-top:6px;color:var(--muted);font-size:.875rem;font-variant-numeric:tabular-nums}
.field-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;color:var(--danger);font-size:.92rem;font-weight:600}
.field-error .icon{width:18px;height:18px;margin-top:2px}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
input[aria-invalid=true]:focus,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{border-color:var(--danger);outline-color:var(--danger)}

/* 단계형 신청 */
.flow{max-width:34rem;margin:0 auto}
.flow-head{margin:4px 0 18px}
/* 신청 5단계 진행 표시 — 「N / 5단계」는 왼쪽, 남은 단계는 오른쪽(좁은 폭에서는 아래로 내려간다). 막대는 장식(aria-hidden)이고 뜻은 글자가 전한다 */
.progress-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--space-3);margin:0 0 var(--space-2);color:var(--muted);font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums}
.progress-label > span:first-child{color:var(--text)}
.progress-bar{height:8px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}
.progress-bar i{display:block;height:100%;width:var(--pct,0%);border-radius:inherit;background:var(--brand);transition:width .25s}
.flow-title{font-size:var(--section-size);font-weight:700;margin:0 0 6px}
.flow-sub{margin:0 0 18px;color:var(--muted)}
fieldset.step{margin:0 0 16px;padding:20px 18px 8px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
/* 단계 제목(질문)은 섹션 제목 크기(24/22px)·700 — 안의 선택 카드 제목(.choice-title)은 카드 제목 18px */
.step legend{float:left;width:100%;padding:0;margin:0 0 8px;font-size:var(--section-size);font-weight:700;line-height:1.35;letter-spacing:-.01em}
.step legend + *{clear:both}
/* 신청 1·3단계의 지킴이별 묶음(파라솔·동파) 사이 간격 */
.guard-part{margin-top:20px}
.flow-step{display:block;margin:0 0 2px;color:var(--brand);font-size:.875rem;font-weight:700}
.wizard :is(legend,input,select){scroll-margin-top:84px}
.wizard-nav{display:flex;gap:10px;margin:4px 0 0}
.wizard-nav .btn{flex:1}

/* 선택 카드 — 진짜 라디오를 카드 위에 투명하게 겹친다 */
.choices{display:grid;gap:10px;margin:14px 0 8px}
.choice{position:relative;display:block}
.choice input[type=radio],.choice input[type=checkbox]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice-body{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);transition:border-color .15s,background-color .15s}
.choice:hover .choice-body{border-color:var(--muted)}
.choice input:checked + .choice-body{border-color:var(--brand);background:var(--brand-soft)}
.choice input:focus-visible + .choice-body{outline:3px solid var(--focus);outline-offset:3px}
.choice-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--brand)}
.choice input:checked + .choice-body .choice-icon{background:var(--surface)}
.choice-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.choice-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.choice-title{font-size:1.125rem;font-weight:700;line-height:1.4}
.choice-desc{color:var(--muted);font-size:.92rem}
.choice-meta{align-self:flex-start;margin-top:4px;padding:2px 10px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--brand-strong);font-size:.875rem;font-weight:700;font-variant-numeric:tabular-nums}
.choice-check{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);color:transparent}
.choice-check .icon{width:16px;height:16px}
/* 폰 320px 대 — 카드 안쪽(그림·체크·간격)을 줄여 글자 자리를 늘린다. 「기본 경고 4 m/s」 알약이 두 줄로 꺾이지 않게 */
@media (max-width:360px){.choice-body{gap:10px;padding:12px}.choice-icon{width:36px;height:36px}.choice-icon .icon{width:20px;height:20px}.choice-check{width:24px;height:24px}}
.choice input:checked + .choice-body .choice-check{background:var(--brand);border-color:var(--brand);color:var(--surface)}
.badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:.875rem;font-weight:800;line-height:1.5;vertical-align:middle}
.badge-brand{background:var(--brand);color:var(--surface)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}

/* 세그먼트(둘 중 하나) */
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:12px 0 16px;padding:4px;background:var(--surface-2);border-radius:var(--radius-sm)}
.segmented label{position:relative;display:block}
.segmented input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.segmented span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border-radius:9px;color:var(--muted);font-weight:700;text-align:center}
.segmented input:checked + span{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(36,49,41,.12)}
.segmented input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}

/* 영업시간 */
.hours-same{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
/* 칸 바닥 폭 6rem — 8rem 이면 폰 320~375px(스크롤바 있는 창)에서 두 칸이 한 줄에 못 들어 「~」만 첫 칸 옆에 덩그러니 남았다 */
.hours-same .field{flex:1 1 6rem;margin:0}
.hours-sep{padding-bottom:12px;color:var(--muted)}
.hours-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours-table th,.hours-table td{padding:5px 3px;text-align:left;vertical-align:middle}
.hours-table thead th{color:var(--muted);font-size:.875rem;font-weight:700;white-space:nowrap}
/* 요일 칸은 한 글자라 좁게 — 폰 320px 에서 두 선택칸이 「10:00」을 다 보이게(본문 좌우 여백이 20px 가 되며 좁아졌다) */
.hours-table tbody th{width:1.5rem;font-weight:800}
.hours-table select{width:100%;min-width:0;padding:9px 2px 9px 8px}
.hours-table tr.is-off select{opacity:.45}
.hours-off{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;cursor:pointer}
/* 폰 320px 대(스크롤바가 자리를 차지하는 PC 브라우저 창은 305px) — 단계 카드 좌우 여백과 표 칸 여백을 줄여 선택칸이 「10:00」을 다 보이게 한다 */
@media (max-width:360px){fieldset.step{padding-left:12px;padding-right:12px}.hours-table th,.hours-table td{padding:5px 2px}.hours-off input{margin-right:4px}}

/* 받는 사람 */
.staff{display:grid;gap:8px}
.staff-row{display:grid;grid-template-columns:7rem 1fr;gap:8px}
.staff-row input{width:100%;min-width:0}
.staff-row .field-error{grid-column:1/-1;margin:0}
/* 320px 대에서는 이름 칸과 번호 칸을 위아래로 — 한 줄이면 번호(010-1234-5678)가 칸 밖으로 잘린다 */
@media (max-width:360px){.staff-row{grid-template-columns:1fr}}

/* 요약·동의·문자 예시 */
.summary{margin:6px 0 16px;padding:14px 16px;background:var(--bg);border:1px dashed var(--line-strong);border-radius:var(--radius-sm)}
.summary-title{margin:0 0 8px;font-weight:700}
.summary dl{margin:0;display:grid;gap:6px}
.summary dl div{display:grid;grid-template-columns:5.5rem 1fr;gap:8px}
.summary dt{color:var(--muted);font-size:.9rem}
.summary dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.consent{margin:4px 0 16px;padding:12px 14px;background:var(--surface-2);border-radius:var(--radius-sm)}
.consent label{display:flex;align-items:flex-start;gap:8px;min-height:44px;cursor:pointer;font-weight:600}
.consent input[type=checkbox]{flex:none;width:20px;height:20px;margin:3px 0 0}
.consent a{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem}
.owner-fixed{margin:0;font-size:1.05rem}
.sms-sample{margin:16px 0 10px}
.sms-sample .sms{margin:6px 0 0}
.sms-prefix{font-weight:800;color:var(--text)}

/* 인증번호 */
.form-stack{display:grid;gap:10px}
input.otp{width:100%;font-size:1.6rem;font-weight:800;letter-spacing:.5em;text-align:center;padding:12px 0 12px .5em;font-variant-numeric:tabular-nums}
.resend{margin:12px 0 0;text-align:center}

/* 알림 띠 */
.flash{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;border-radius:var(--radius-sm);font-weight:600}
.flash p{margin:0}
.flash .icon{width:20px;height:20px;margin-top:1px}
.flash-ok{background:var(--ok-soft);color:var(--ok)}
.flash-err{background:var(--danger-soft);color:var(--danger)}
.notice-ok .notice-icon{background:var(--ok-soft);color:var(--ok)}

/* 다음에 일어날 일 */
.timeline{list-style:none;counter-reset:tl;margin:24px auto 0;padding:0;max-width:28rem;display:grid;gap:14px}
.timeline li{counter-increment:tl;position:relative;padding:3px 0 0 44px}
.timeline li::before{content:counter(tl);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);font-weight:800;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.timeline strong{display:block}
.timeline span{color:var(--muted);font-size:.92rem}
.done-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 0}
.notice-shop{margin:0 0 var(--space-2);font-size:1.125rem}
.next-title{max-width:28rem;margin:var(--space-8) auto 0;font-size:1.125rem}
.next-title + .timeline{margin-top:var(--space-3)}

/* 신청 진행 목록(번호 인증·신청 완료 화면) — 가게 정보 → 번호 인증 → 운영자 확인 → 알림 시작. 색만으로 가르지 않는다:
   완료는 체크 표시, 지금은 굵은 이름이고, 둘 다 「완료」·「지금」 글자가 붙는다(aria-current 도 있다). 좁은 폭에서는 이름이 두 줄로 꺾인다 */
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);list-style:none;margin:0 0 var(--space-6);padding:0}
.path-narrow{max-width:28rem;margin:var(--space-6) auto 0}
.path-item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.path-item + .path-item::before{content:"";position:absolute;top:15px;right:calc(50% + 16px);width:calc(100% + var(--space-2) - 32px);height:2px;background:var(--line-strong)}
.path-item.is-done::before,.path-item.is-now::before{background:var(--brand)}
.path-mark{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:2px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.path-mark .icon{width:16px;height:16px}
.path-item.is-done .path-mark{border-color:var(--brand);background:var(--brand);color:var(--surface)}
.path-item.is-now .path-mark{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.path-name{margin-top:var(--space-2);color:var(--muted);font-size:.875rem;font-weight:700;line-height:1.35}
.path-item.is-done .path-name,.path-item.is-now .path-name{color:var(--text)}
.path-note{display:block;min-height:1.35em;color:var(--brand-strong);font-size:.875rem;font-weight:700;line-height:1.35}

/* 로그인 */
.auth{max-width:26rem;margin:16px auto 0}
.auth-card{padding:28px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.auth-title{font-size:var(--section-size);font-weight:700;margin:0 0 6px}
.auth-sub{margin:0 0 20px;color:var(--muted)}
.auth-alt,.flow-alt{margin:18px 0 0;text-align:center;color:var(--muted);font-size:.95rem}
.auth-alt a,.flow-alt a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.shop-list{display:grid;gap:10px}
.shop-pick{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 16px;text-align:left;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer}
.shop-pick:hover{border-color:var(--brand)}
.shop-pick-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.shop-pick-name{font-size:1.125rem;font-weight:700;line-height:1.4}
.shop-pick-addr{color:var(--muted);font-size:.9rem}
.shop-pick .icon{color:var(--muted)}
/* 「내 가게」(/me, 가게 둘 이상) — 카드는 위의 가게 카드(.shop-pick)를 링크로 쓴다 */
a.shop-pick{color:inherit;text-decoration:none}
.shop-pick.is-off{cursor:default;background:var(--surface-2);border-color:var(--line)}
.mine{display:grid;gap:14px}
.mine-title{font-size:var(--section-size);font-weight:700;margin:4px 0 0}
.mine-addr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 말줄임이 되려면 카드가 줄어들 수 있어야 한다. 카드는 그리드 칸이라 기본이 min-width:auto(내용 폭 밑으로 못 줄어듦)여서,
   이 줄이 없으면 긴 주소가 칸을 밀어내 화면 전체가 옆으로 넓어진다. */
.mine .shop-pick{min-width:0}
/* 상태 줄은 히어로 문장 그대로라 폰에서 두 줄로 꺾인다(「다음 영업일 마감 전에 밤 기온·눈·빙판을 확인할게요」) — 알약 모양(999px)은 두 줄이면
   양 끝이 반원으로 부풀어 뭉개진다. 카드 안 모서리(12px)로 두 줄이어도 상자 모양이 유지되게 한다 */
.mine-state{align-self:flex-start;margin-top:6px;padding:4px 10px;border:0;border-radius:var(--radius-sm);font-size:.9rem;font-weight:700;line-height:1.45}
.mine-state span{white-space:nowrap}
/* 정지된 가게(회색 카드)의 회색 상태 줄은 카드 바탕과 같은 색이라 글자만 들여 쓴 것처럼 보였다 — 흰 바탕으로 띄운다 */
.shop-pick.is-off .mine-state{background:var(--surface)}
.mine-nudge{align-self:flex-start;margin-top:6px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--warn-soft);color:var(--warn);font-size:.88rem;font-weight:700}
.mine-ask{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;font-weight:700}
.shop-pick-text > .badge{align-self:flex-start;margin-top:6px}
.shop-add .shop-pick-name{color:var(--brand-strong)}

/* ── 사장님 관리화면(/me) ───────────────────────────
   읽는 순서(브랜드 요청서 §6): 상태(히어로) → 할 일 → 근거와 시점(지킴이 칸·오늘 일정·이번 주) → 설정. 글자는 14px(.875rem) 아래로 내리지
   않는다(test/manage-brand.test.js 가 이 묶음을 잰다). 히어로 제목은 섹션 제목 크기, 칸 제목은 카드 제목 18px, 수치는 24~32px·tabular-nums. */
.me{display:grid;gap:12px}
.me > .flash{margin:0}
.appbar-form{margin:0}
.me-hero{padding:18px 18px 16px;border:1.5px solid transparent;border-radius:var(--radius)}
.me-hero-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px}
.me-hero-kicker{margin:0;font-size:.9rem;font-weight:700}
.me-hero-title{margin:0 0 6px;font-size:var(--section-size);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.me-hero-detail{margin:0;font-size:1rem}
.me-hero-meta{margin:8px 0 0;font-size:.875rem;font-variant-numeric:tabular-nums}
.tone-green{background:var(--ok-soft);color:var(--ok)}
.tone-yellow{background:var(--warn-soft);color:var(--warn)}
.tone-red{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.tone-gray{background:var(--surface-2);color:var(--text)}

.panel{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.panel-title{margin:0;font-size:1.125rem;font-weight:700;line-height:1.4}
.panel-aside{color:var(--muted);font-size:.875rem;font-variant-numeric:tabular-nums}
.panel-note{margin:10px 0 0;color:var(--muted);font-size:.9rem}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-muted{background:var(--surface-2);color:var(--muted)}

/* 바람 확인값·동파·눈길 칸의 숫자 줄 — 숫자 옆은 단위(동파·눈길 칸은 뜻·시각까지 한 줄), 바람 칸은 뜻·시각을 숫자 아래 줄(.wind-what)에 둔다 */
.wind-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.wind-now b{font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wind-now span{color:var(--muted);font-size:.9rem}
.wind-what{margin:4px 0 0;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.wind-what span{white-space:nowrap}
/* 확인이 늦어질 때 — 낡은 값이라는 줄은 보조 글자가 아니라 본문 색·굵게(색만이 아니라 「확인 늦어짐」 뱃지와 글이 함께 말한다) */
.wind-late{color:var(--text);font-weight:600}
.gauge{position:relative;height:12px;margin:18px 0 6px;border-radius:var(--radius-pill);background:var(--surface-2)}
.gauge-fill{position:absolute;top:0;bottom:0;left:0;width:var(--pct,0%);border-radius:inherit;background:var(--ok)}
.gauge-fill.is-warn{background:var(--warn)}
.gauge-fill.is-danger{background:var(--danger)}
.gauge-fill.is-muted{background:var(--muted)}
.gauge-mark{position:absolute;top:-5px;bottom:-5px;left:var(--at,0%);width:3px;margin-left:-1px;border-radius:2px}
.mark-off{background:var(--warn)}
.mark-on{background:var(--danger)}
.gauge-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.875rem;font-variant-numeric:tabular-nums}
.gauge-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;font-size:.88rem;font-variant-numeric:tabular-nums}
.gauge-legend li{display:inline-flex;align-items:center;gap:6px}
.gauge-legend i{width:10px;height:10px;border-radius:3px}

/* 오늘 일정 */
.schedule{list-style:none;margin:0;padding:0}
.schedule li{display:flex;gap:12px;padding:8px 0;border-top:1px dashed var(--line)}
.schedule li:first-child{padding-top:0;border-top:0}
.schedule time{flex:none;width:3.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.schedule .is-past{color:var(--muted)}
.schedule-off{margin:0}

/* 이번 주 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{padding:10px 6px;border-radius:var(--radius-sm);background:var(--surface-2);text-align:center}
.stat b{display:block;font-size:1.5rem;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--muted);font-size:.875rem;line-height:1.4}

/* 받는 사람 */
.people{list-style:none;margin:0;padding:0}
.person{display:flex;align-items:center;gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.person:first-child{border-top:0}
.person form{margin:0}
.avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);font-weight:800}
.person-text{flex:1;display:flex;flex-direction:column;min-width:0}
.person-name{font-weight:700}
.person-phone{color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--danger)}
.icon-btn .icon{width:20px;height:20px}
.add-person{margin:12px 0 0}
.add-person > summary{list-style:none}
.add-person > summary::-webkit-details-marker{display:none}
.add-person[open] > summary{margin-bottom:12px}
.check{display:flex;align-items:flex-start;gap:8px;min-height:44px;cursor:pointer;font-weight:600}
.check input[type=checkbox],.check input[type=radio]{flex:none;width:20px;height:20px;margin:3px 0 0}

/* 설정 */
.setting{border-top:1px solid var(--line)}
.setting:first-child{border-top:0}
.setting > summary,.setting-static{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 0}
.setting > summary{cursor:pointer;list-style:none;border-radius:8px}
.setting > summary::-webkit-details-marker{display:none}
.setting-name{flex:none;font-weight:700}
.setting-value{flex:1;min-width:0;text-align:right;color:var(--muted);font-size:.92rem}
.setting > summary .icon{width:18px;height:18px;color:var(--muted);transition:transform .15s}
.setting[open] > summary .icon{transform:rotate(90deg)}
.setting-body{padding:4px 0 16px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair .field{margin:0}
.pair input{width:100%}

/* 알림 잠시 끄기 — 스위치는 진짜 체크박스다(JS 가 없으면 옆 「저장」으로 제출) */
.switch-row{display:flex;align-items:center;gap:12px;margin:0}
/* 「지킴이」 칸 — 설정이 없는 지킴이 안내 줄 바로 뒤에 스위치 줄이 오면 붙어 보인다 */
.panel-note + .switch-row{margin-top:14px}
.switch-label{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:44px;cursor:pointer}
.switch-label span{color:var(--muted);font-size:.9rem}
input.switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:52px;height:32px;margin:0;border-radius:var(--radius-pill);background:var(--line-strong);cursor:pointer;transition:background-color .15s;vertical-align:middle}
input.switch::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(36,49,41,.25);transition:transform .15s}
input.switch:checked{background:var(--brand)}
input.switch:checked::after{transform:translateX(20px)}
/* 잠긴 스위치(마지막 하나 남은 지킴이) — 눌러도 아무 일 없다는 걸 누르기 전에 보여준다 */
input.switch:disabled{opacity:.5;cursor:not-allowed}
.switch-row:has(input.switch:disabled) .switch-label{cursor:default}

/* 테스트 문자·문의 */
.me-actions{display:grid;gap:8px}
.me-actions form{margin:0}
.me-actions-note{margin:0;text-align:center;color:var(--muted);font-size:.9rem}
.me-foot{margin:4px 0 0;text-align:center;color:var(--muted);font-size:.875rem}
.me-foot a{display:inline-flex;align-items:center;min-height:44px}

/* 알림 기준 — 직접 입력·보호 대상의 기준 묻기 */
.custom-input{margin:12px 0 0;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.custom-input > summary{min-height:44px;padding:10px 0;font-weight:700;cursor:pointer}
.custom-input > form{padding:0 0 12px}
.ask{margin:0;padding:0;border:0;min-width:0}
.ask legend{padding:0;margin:0 0 4px}

/* 「‹ 내 가게」(히어로 위쪽 — 히어로 색을 그대로 물려받는다)·「다른 가게도 등록하기」(맨 아래) */
.me-back{flex:none}
.me-hero .me-back{color:inherit;text-decoration:underline;text-underline-offset:3px}
.me-more{margin:0;text-align:center}
.me-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* 확인 창(app.js 가 만든다)·저장 결과 띠 접기 */
.confirm{width:calc(100% - 40px);max-width:22rem;padding:22px 20px 16px;border:0;border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.confirm::backdrop{background:rgba(36,49,41,.45)}
.confirm-text{margin:0 0 18px;font-size:1.05rem;font-weight:700}
.confirm-actions{display:flex;gap:8px}
.confirm-actions .btn{flex:1}
.btn-danger{background:var(--danger);color:var(--surface)}
.flash{transition:opacity .3s}
.flash.is-hiding{opacity:0}

/* ── 관리자 콘솔 — 목록 ─────────────────────────────
   PC 기준(설계 2026-10-09). 900px 아래에서는 표의 행이 가게별 카드로 접힌다(CSS 만 — 서버 HTML 은 하나다).
   본문 폭은 앱 바와 같은 토큰(--content-width = 68rem = 1088px)이다 — 앱 바의 이름·버튼과 본문의 왼쪽·오른쪽 끝이 맞는다(예전 72rem 은 32px 어긋났다).
   안쪽 1048px 에서도 일곱 칸 표와 다섯 칸 요약이 한 줄에 든다. 글자는 14px(.875rem) 아래로 내리지 않는다(test/console-brand.test.js 가 이 묶음을 잰다). */
.console{max-width:var(--content-width);margin:0 auto;padding:16px 20px 56px;display:grid;gap:14px}
.appbar-label{font-weight:800;color:var(--muted);font-size:.95rem;white-space:nowrap}
@media (max-width:480px){.appbar-label{display:none}}
/* 한도 띠 — 80% 이상 노랑, 100% 이상 빨강 */
.strip{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);font-weight:600}
.strip .icon{width:20px;height:20px;flex:none;margin-top:1px}
.strip p{margin:0}
.strip-warn{background:var(--warn-soft);color:var(--warn)}
.strip-over{background:var(--danger-soft);color:var(--danger)}
/* 요약 칸 다섯 개 */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{margin:0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.tile b{display:block;font-size:1.75rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile span{display:block;margin-top:2px;color:var(--muted);font-size:.875rem}
.tile-sub{display:block;margin:4px 0 0;color:var(--muted);font-size:.875rem}
.tile-sub code{font-size:1em}
.tile.is-warn{border-color:var(--warn);background:var(--warn-soft)}
.tile.is-warn b{color:var(--warn)}
.tile.is-bad{border-color:var(--danger)}
.tile.is-bad b{color:var(--danger)}
.tile-budget{grid-column:1/-1}
.tile-budget > summary{cursor:pointer;list-style:none;min-height:44px}
.tile-budget > summary::-webkit-details-marker{display:none}
.tile-budget > summary::after{content:"펼치기";display:block;margin-top:4px;color:var(--brand-strong);font-size:.875rem;font-weight:700}
.tile-budget[open] > summary::after{content:"접기"}
.budget-table{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:.9rem;font-variant-numeric:tabular-nums}
.budget-table th,.budget-table td{padding:4px 6px;text-align:right;border-top:1px solid var(--line)}
.budget-table th:first-child,.budget-table td:first-child{text-align:left}
.budget-table thead th{border-top:0;color:var(--muted);font-weight:700}
@media (min-width:900px){.tiles{grid-template-columns:repeat(5,1fr)}.tile-budget{grid-column:auto}.tile-budget[open]{grid-column:1/-1}}
/* 탭 + 검색 */
.console-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-2);border-radius:var(--radius-sm)}
.tab{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:9px;color:var(--muted);font-weight:700;text-decoration:none}
.tab.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.tab-n{padding:0 8px;border-radius:var(--radius-pill);background:var(--surface-2);font-size:.875rem;font-variant-numeric:tabular-nums}
.search{display:flex;gap:6px;flex:1 1 14rem;min-width:0}
/* width:100% — 검색 칸의 기본 폭(약 226px)이 내용 폭으로 잡히면 폰 320px 에서 목록 전체가 옆으로 넓어진다(칸 안쪽 여백이 14px 가 되며 넘기 시작했다) */
.search input{flex:1;min-width:0;width:100%}
/* 표 — PC 에서는 표, 폰에서는 카드 */
.shops{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.shops th,.shops td{padding:10px 12px;text-align:left;vertical-align:middle;border-top:1px solid var(--line)}
.shops thead th{color:var(--muted);font-size:.875rem;font-weight:700;border-top:0;white-space:nowrap}
.shops .badge + .badge{margin-left:2px}
.shop-link{color:inherit;text-decoration:none}
.shop-link b{display:block}
.shop-link span{display:block;color:var(--muted);font-size:.88rem}
.wind{font-variant-numeric:tabular-nums}
.wind.is-windy{color:var(--danger);font-weight:700}
/* 표는 900px 부터다 — 그 아래(폰·태블릿)는 카드. 일곱 칸 표는 가게 이름 칸 바닥(9rem)과 한 줄로 못 박은 칸(뱃지·날짜·[보기])을 합쳐 안쪽 폭 약 800px 가 있어야 하고,
   900px 화면의 안쪽 폭은 860px 이고 윈도 데스크톱의 17px 스크롤바를 빼도 843px 다(요약 칸 5열·상세 두 단과 같은 경계; 실측: 안쪽 폭 764px 부터 줄바꿈 없이 들고, 시스템 글꼴로 바뀌어도 823px 라 20px 여유가 있다 — 880px 경계에서는 0px 였다). 카드 쪽 경계가 899.98px 인 것은 브라우저 확대로 폭이 소수가 될 때 두 쪽이 다 빠지는 틈을 없애려는 것이다. 이 바닥이 없으면 칸이 글자 폭까지 줄어 이름이 「관아공원카/페」처럼 글자마다 꺾인다.
   가게 이름이 열두 글자 띄어쓰기 없이 길면 이 칸 안에서 두 줄로 꺾인다 — 글자마다 꺾이지 않는다 */
@media (min-width:900px){.shops td.col-open{text-align:right}
.shops .col-shop{min-width:9rem}
.shops .badge,.shops td[data-th="신청·개통일"],.shops .col-open .btn{white-space:nowrap}}
/* 표 아래 한 줄 — 「바람 확인값」이 무슨 값인지(열 머리는 짧게 두고 뜻은 여기서 한 번만) */
.table-note{margin:0;color:var(--muted);font-size:.9rem}
.empty{margin:0;padding:28px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius)}
@media (max-width:899.98px){.shops,.shops tbody,.shops tr,.shops td{display:block}
.shops thead{display:none}
.shops tr{padding:10px 12px;border-top:1px solid var(--line)}
.shops tr:first-child{border-top:0}
.shops td{padding:3px 0;border:0}
.shops td[data-th]::before{content:attr(data-th) " ";color:var(--muted);font-size:.875rem;margin-right:6px}}
/* 목록 머리의 링크(돌풍 기록) — 오른쪽 끝 */
.console-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* 돌풍 기록(설계 2026-10-12) — 표는 .shops 를 그대로 써서 900px 아래에서 시각별 카드로 접힌다. 칸 머리(「칸 76,114 예보 돌풍」)는 길어
   줄바꿈을 허용한다(.shops thead th 의 nowrap 을 덮는다 — 이 규칙이 뒤에 있어야 한다) */
.gust thead th{white-space:normal}
.gust td{font-variant-numeric:tabular-nums}
.gust td.gust-at{white-space:nowrap}
.gust-note{margin:0;color:var(--muted);font-size:.9rem}
.gust-foot{margin:0}
.gust-credit{margin:0;color:var(--muted);font-size:.875rem}
/* ── 관리자 콘솔 — 상세 ───────────────────────────── */
.detail{max-width:var(--content-width);margin:0 auto;padding:16px 20px 56px;display:grid;gap:14px}
.detail-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.back{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none}
.detail-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;min-width:0}
.detail-title h1{margin:0;font-size:var(--section-size);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.detail-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.detail-actions form{margin:0}
.action-note{margin:6px 0 0;max-width:18rem;color:var(--danger);font-size:.88rem;font-weight:600}
.detail-kicker{margin:0;color:var(--muted);font-size:.9rem;font-weight:700}
.stats-4{grid-template-columns:repeat(2,1fr)}
.stat.is-bad b{color:var(--danger)}
/* 현황 카드 아래 한 줄 — 「바람 확인값」의 뜻. .detail 의 grid gap(14px)이 카드와 떨어뜨려 놓아 그만큼 당겨 붙인다 */
.stats-note{margin:-6px 0 0;color:var(--muted);font-size:.9rem}
.columns{display:grid;gap:14px}
.column{display:grid;gap:14px;align-content:start}
@media (min-width:640px){.stats-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.columns{grid-template-columns:1.1fr .9fr;align-items:start}}
.panel-aside a,a.panel-aside{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.coords .pair{margin:0 0 10px}
.week{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-variant-numeric:tabular-nums}
.week li{padding:6px 2px;border-radius:8px;background:var(--surface-2);font-size:.875rem}
/* 폰(480px 이하)에서는 일곱 칸이 40px 안팎이라 「10–18」이 「10–」/「18」로 꺾였다 — 네 칸씩 두 줄(월~목, 금~일)로 둔다 */
@media (max-width:480px){.week{grid-template-columns:repeat(4,1fr)}}
.week li b{display:block}
.week li.is-off{color:var(--muted)}
.inline-edit{margin-top:6px}
.inline-edit > summary{list-style:none;display:inline-flex}
.inline-edit > summary::-webkit-details-marker{display:none}
.inline-edit > form{margin-top:10px}
.inline-edit input[type=text]{width:100%}
.info{margin:0;display:grid;gap:8px}
.info > div{display:grid;grid-template-columns:7rem 1fr;gap:8px;align-items:start}
.info dt{padding-top:2px;color:var(--muted);font-size:.9rem}
.info dd{margin:0;min-width:0;overflow-wrap:anywhere}
.danger-zone{border-color:var(--danger)}
.danger-zone .panel-title{color:var(--danger)}
.danger-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.danger-form input{flex:1 1 12rem}
textarea{width:100%;resize:vertical}
/* 지도(콘솔 상세) — 핀은 이미지가 아니라 CSS(L.divIcon). Leaflet 이 .map-pin 에 translate3d 를 직접 써 넣어 이 칸의 transform 은
   무시되므로, 물방울 모양은 ::before 가 맡는다. -45° 로 돌리면 뾰족한 끝이 상자 아래로 5px 나와서 그만큼 올린다(끝이 가게 자리). */
.map{height:320px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);z-index:0}
.map-pin::before{content:"";display:block;width:24px;height:24px;border-radius:50% 50% 50% 0;background:var(--brand);border:2px solid var(--surface);box-shadow:var(--shadow);transform:translateY(-5px) rotate(-45deg)}
/* Leaflet 의 +/− 는 터치 화면에서 30px 라 누를 것 44px 규칙에 못 미친다. leaflet.css 가 app.css 뒤에 실리고 거기 선택자가
   .leaflet-touch .leaflet-bar a 라서, 한 단계 더 센 선택자로 덮는다. */
.map.leaflet-container .leaflet-bar a{width:44px;height:44px;line-height:44px}
/* 지도 출처 표기(Leaflet | © OpenStreetMap)도 14px — leaflet.css 가 컨테이너 글자를 12px 로 둔다 */
.map.leaflet-container{font-size:.875rem}
.map-note{margin:0 0 10px;color:var(--muted);font-size:.88rem}
/* 사장님께 문자 — 머리의 주 동작 옆, 펼치면 한 줄을 다 쓴다 */
.msg-owner > summary{list-style:none;display:inline-flex}
.msg-owner > summary::-webkit-details-marker{display:none}
.msg-owner[open]{flex-basis:100%}
.msg-owner > form{max-width:34rem;margin-top:10px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
/* .detail-actions 는 내용만큼만 차지하는 flex 칸이라 위의 flex-basis:100% 가 그 칸 안에서만 100% 다 — 데스크톱에서 글상자가 제목 오른쪽에 끼고
   머리가 길어지며 제목이 한가운데로 뜬다. 펼친 동안만 이 칸을 풀어(display:contents) 주 동작은 첫 줄 오른쪽 그대로, 이 칸은 다음 줄을 통째로
   쓰게 한다. :has() 가 없는 브라우저에서는 이 규칙만 빠지고 위의 규칙대로 그려진다(쓸 수는 있다). */
.detail-actions:has(> .msg-owner[open]){display:contents}
/* 폰 폭에서는 두 버튼(주 동작·사장님께 문자)이 제목 옆에 끼면 제목이 몇 글자 폭까지 줄어 글자 중간에서 꺾인다 — 제목에 최소 폭을 주어 버튼이 다음 줄로 내려가게 한다 */
@media (max-width:640px){.detail-title{flex-basis:12rem}}
/* 앱 바 워드마크(계획 42 작업 3) — 600px 아래(폰·작은 가로 화면)에서는 서브(.brand-sub)를 화면에서만 감추고 워드마크(.brand-word)만 남긴다. display·visibility 가
   아니라 clip 이라 낭독기는 이름 두 칸을 그대로 읽는다(로고는 alt="" — 이름은 이 글자뿐). classic .brand·에디토리얼 흐름 .flow-brand 둘 다.
   경계는 실측으로 정했다 — 480px 에서 관리자 앱 바(멈춤 단추 + 단추 둘)의 서브가 말줄임으로 잘렸고(테마 첫 화면), 잘림 0 이 되는 첫 폭이 560px 이라 둥근 600px */
@media (max-width:599.98px){.brand-sub{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}