/* 10/8 애플 기준 바탕(기획/130) — 모든 화면이 함께 쓰는 색 · 글자 · 간격 · 단추 · 시트 기준.
   색은 아이폰 어두운 모드 시스템 색, 강조는 달 금색(#FFB800) 하나, 글자 크기는 아이폰 글자 스타일(기본 Large)을 rem 으로.
   아이폰 웹(-apple-system-body)에서는 html 글자 크기가 손님의 글자 크기 설정을 따라 바뀌므로 rem 으로 쓴 글자가 같이 커진다.
   SF Pro(영문 · 숫자) · SF Symbols(기호) 글꼴은 sf.css(tools/sf/build.py 가 만듦). */
:root{
  /* 바탕 · 묶음 */
  --bg:#000; --bg-2:#1C1C1E; --bg-3:#2C2C2E; --bg-4:#3A3A3C;
  /* 글자 */
  --label:#fff; --label-2:rgba(235,235,245,.6); --label-3:rgba(235,235,245,.3); --label-4:rgba(235,235,245,.16);
  /* 구분선 · 채움 */
  --sep:rgba(84,84,88,.65); --sep-opaque:#38383A;
  --fill-1:rgba(120,120,128,.36); --fill-2:rgba(120,120,128,.32); --fill-3:rgba(118,118,128,.24); --fill-4:rgba(118,118,128,.18);
  /* 강조(달 금색 — 애플 이름으로 tint, 기존 --accent 와 안 겹치게) · 위험 · 성공 */
  --tint:#FFB800; --on-tint:#000; --tint-soft:rgba(255,184,0,.16);
  --red:#FF453A; --green:#30D158;
  /* 유리(탭 바 · 윗줄 같은 탐색 층에만) */
  --glass:rgba(28,28,30,.62); --glass-edge:rgba(255,255,255,.12); --glass-blur:saturate(180%) blur(24px);
  /* 글꼴: 영문 · 숫자 SF Pro, 한글 나눔스퀘어 */
  --font:"SF Pro","NanumSquare","Apple SD Gothic Neo",system-ui,sans-serif;
  /* 글자 크기(아이폰 글자 스타일 Large · 기준 17 = 1rem) — 크기 / 줄 높이 */
  --t-large:2rem;       --l-large:1.206;   /* 34 / 41 */
  --t-title1:1.647rem;  --l-title1:1.214;  /* 28 / 34 */
  --t-title2:1.294rem;  --l-title2:1.273;  /* 22 / 28 */
  --t-title3:1.176rem;  --l-title3:1.25;   /* 20 / 25 */
  --t-headline:1rem;    --l-headline:1.294;/* 17 / 22 굵게 */
  --t-body:1rem;        --l-body:1.294;    /* 17 / 22 */
  --t-callout:.941rem;  --l-callout:1.3125;/* 16 / 21 */
  --t-subhead:.882rem;  --l-subhead:1.333; /* 15 / 20 */
  --t-footnote:.765rem; --l-footnote:1.385;/* 13 / 18 */
  --t-caption1:.706rem; --l-caption1:1.333;/* 12 / 16 */
  --t-caption2:.6471rem; --l-caption2:1.182;/* 11 / 13 — 이보다 작은 글자 없음(10/8 .647 은 10.999px 로 잡혀 .6471) */
  /* 간격 · 모서리 · 누르는 영역 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px; --r-pill:999px;
  --tap:44px;
  /* 움직임 */
  --ease:cubic-bezier(.2,.8,.2,1); --dur:.25s;
}
/* 아이폰 · 아이패드는 글자 크기 설정(Dynamic Type)을 따르고, 나머지는 17px 기준(브라우저 글자 크기 설정을 따라 비율로).
   맥 사파리의 -apple-system-body 는 13px 이라 터치 기기(-webkit-touch-callout 은 iOS 만 앎)에서만 켠다. 글꼴 이름은 다시 우리 것으로 */
html{font-size:106.25%}
@supports (font:-apple-system-body) and (-webkit-touch-callout:none){html{font:-apple-system-body;font-family:var(--font)}}

/* 글자 스타일 */

/* 단추 — 캡슐, 44 이상, 눌림 상태. 채움(강조, 화면당 한두 개) · 옅은 채움 · 회색 · 글자만 · 위험 */
.hb{-webkit-appearance:none;appearance:none;border:0;margin:0;font:inherit;font-family:var(--font);font-size:var(--t-headline);line-height:1.2;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);min-width:var(--tap);padding:0 var(--s5);
  border-radius:var(--r-pill);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--ease),opacity .12s var(--ease),background-color var(--dur) var(--ease)}
.hb:active{transform:scale(.97);opacity:.82}
.hb:focus-visible{outline:2px solid var(--tint);outline-offset:3px}
.hb[disabled],.hb[aria-disabled="true"]{opacity:.38;pointer-events:none}
.hb-filled{background:var(--tint);color:var(--on-tint)}
.hb-tinted{background:var(--tint-soft);color:var(--tint)}
.hb-gray{background:var(--fill-2);color:var(--label)}
.hb-danger{background:rgba(255,69,58,.18);color:var(--red)}
.hb-small{min-height:var(--tap);font-size:var(--t-subhead);padding:0 var(--s4)}
.hb-block{display:flex;width:100%}

/* 알약(정보 · 고르기) — 예: 「다섯 장면」. 고른 것은 금색 옅은 채움 */
.hpill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--s3);border-radius:var(--r-pill);
  background:var(--fill-3);color:var(--label);font-family:var(--font);font-size:var(--t-subhead);line-height:1.2;font-weight:400;white-space:nowrap}
.hpill[aria-pressed="true"],.hpill[aria-selected="true"]{background:var(--tint-soft);color:var(--tint);font-weight:700}
button.hpill,a.hpill{border:0;cursor:pointer;min-height:var(--tap)}

/* 묶음 목록(아이폰 설정 앱 꼴) */
.hgroup{background:var(--bg-2);border-radius:var(--r-m);overflow:hidden}
.hrow{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);padding:var(--s3) var(--s4);color:var(--label);font-size:var(--t-body);text-decoration:none;position:relative}
.hrow + .hrow::before{content:"";position:absolute;top:0;left:var(--s4);right:0;border-top:.5px solid var(--sep)}
.hrow .sub{margin-left:auto;color:var(--label-2)}
.hgroup-title{margin:var(--s6) var(--s4) var(--s2);color:var(--label-2);font-size:var(--t-footnote);text-transform:none}

/* 시트(아래서 올라오는 창) — 한 번에 하나, 손잡이 */
.hsheet{background:var(--bg-2);border-radius:var(--r-l) var(--r-l) 0 0;color:var(--label)}
.hsheet-grabber{width:36px;height:5px;border-radius:3px;background:var(--fill-1);margin:var(--s2) auto}

/* 유리(탐색 층) */
.hglass{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:.5px solid var(--glass-edge)}

/* 동작 줄이기 — 자동 · 반복 움직임 멈춤, 옮김 대신 페이드 */
@media (prefers-reduced-motion:reduce){
  .hb,.hpill{transition:none}
  .hb:active{transform:none}
}