/* =====================================================================
   HCORE 디자인 시스템 — 공통 컴포넌트 (tokens.css 다음에 불러온다)
   새 화면은 아래 ds-* 클래스를 조합해서 만든다. 같은 모양을 페이지 <style>에
   다시 만들지 않는다. 마크업이 필요한 컴포넌트는 /ds/ui.js 의 DS.* 함수로 그린다.
   목차: 바탕 · 아이콘 · 카드 · 글자 · 버튼 · 칩 · 세그먼트 탭 · 아이콘 배지 ·
        숫자 칸 · 링 · 진행 막대 · 목록 줄 · 알림 · 입력 · 시트 · 상단바 ·
        아래 메뉴 · 가입/결제 창 · 푸터
   ===================================================================== */

/* ---------- 바탕 ---------- */
* { box-sizing: border-box; }
html { background: var(--bg-solid); }
body {
  margin: 0; background: transparent; color: var(--c-ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; /* 한글이 단어 중간에서 끊기지 않게 */
}
/* 그라데이션은 화면에 고정(iOS는 background-attachment: fixed를 무시하므로 가상 요소로) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg-gradient); pointer-events: none; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.ds-page { max-width: 720px; margin: 0 auto; padding: 0 var(--sp-4); }
.ds-stack { display: grid; gap: var(--sp-3); }
.ds-row { display: flex; align-items: center; gap: var(--sp-2); }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 선 아이콘 (DS.icon) ---------- */
.lic, .ds-ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 카드: 반투명 흰 글래스 ---------- */
.ds-card {
  background: var(--c-surface); border: 1px solid var(--c-surface-border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--sh-1);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.ds-card--solid { background: var(--c-surface-solid); }
.ds-card--tight { padding: var(--sp-4); }
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-card--hero { background: var(--hero-gradient); border-color: rgba(255,255,255,.7); }
.ds-card > h2, .ds-card-title { font-size: calc(16px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.02em; margin: 0 0 var(--sp-3); }
/* 카드 안 눌린 칸(카드 속 작은 상자) */
.ds-well { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }

/* ---------- 글자 ---------- */
.ds-kicker { font-size: calc(12.5px * var(--fs)); font-weight: var(--fw-bold); color: var(--c-sub); letter-spacing: .01em; }
.ds-h1 { font-size: calc(24px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1.25; margin: 0; }
.ds-h2 { font-size: calc(18px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.ds-sub { font-size: calc(13.5px * var(--fs)); color: var(--c-sub); line-height: 1.6; margin: 0; }
.ds-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.ds-em { color: var(--c-primary-strong); }
.ds-section-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-5) 2px var(--sp-2); }
.ds-section-h > h2, .ds-section-h > h3 { margin: 0; font-size: calc(16px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.ds-section-h > span, .ds-section-h > a { font-size: calc(12.5px * var(--fs)); color: var(--c-sub); text-decoration: none; }

/* ---------- 버튼 ----------
   <button class="ds-btn ds-btn--primary">  기본(틸)
   --accent(코랄) · --ghost(흰 테두리) · --soft(틸 옅은 바탕) · --quiet(글자만)
   크기: --sm · --lg / 폭: --block / 아이콘만: --icon */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 12px 20px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-family: inherit; font-size: calc(15px * var(--fs)); font-weight: var(--fw-bold); line-height: 1.3;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ds-btn:active { transform: translateY(1px) scale(.99); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .45; box-shadow: none; cursor: default; transform: none; }
/* 비활성은 흐리게만 하지 않고 바탕·글자·커서로 구분. 결제창(#pay-overlay, 동결)은 위 예전 모양 그대로 */
.ds-btn:is(:disabled, [aria-disabled="true"]):not(#pay-overlay *) { opacity: 1; filter: none; background: var(--c-sunken); color: var(--c-sub); border-color: var(--c-line); box-shadow: none; cursor: not-allowed; }
.ds-btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--sh-primary); }
.ds-btn--primary:hover { background: var(--c-primary-strong); }
.ds-btn--accent { background: var(--c-accent); color: #fff; box-shadow: var(--sh-accent); }
.ds-btn--accent:hover { filter: brightness(.96); }
.ds-btn--ghost { background: var(--c-surface-solid); color: var(--c-primary-strong); border-color: var(--c-line-strong); }
.ds-btn--ghost:hover { border-color: var(--c-primary); }
.ds-btn--soft { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.ds-btn--quiet { background: none; color: var(--c-sub); min-height: 36px; padding: 6px 8px; text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-regular); }
.ds-btn--danger { background: var(--c-danger); color: #fff; }
.ds-btn--sm { min-height: 36px; padding: 7px 14px; font-size: calc(13px * var(--fs)); }
.ds-btn--lg { min-height: 54px; padding: 15px 22px; font-size: calc(16.5px * var(--fs)); }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn--icon { width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 50%; }
/* 버튼 오른쪽 원형 화살표(레퍼런스 "Get Started →") */
.ds-btn-arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -10px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--c-primary-strong); }
.ds-btn-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 그림 워터마크 ----------
   <div class="ds-wm">그림</div>  왼쪽 위·오른쪽 아래 모서리에 "설원 위의 지배자" (운동 그림 무단 사용 방지) */
.ds-wm { position: relative; }
.ds-wm::before, .ds-wm::after {
  content: "설원 위의 지배자"; position: absolute; z-index: 2; pointer-events: none;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: rgba(27, 42, 40, .38);
}
.ds-wm::before { top: 6px; left: 8px; }
.ds-wm::after { bottom: 6px; right: 8px; }

/* ---------- 칩 ----------
   <button class="ds-chip" aria-pressed="true">  선택되면 틸로 채움 */
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-surface-solid); color: var(--c-ink-2);
  font-family: inherit; font-size: calc(13px * var(--fs)); font-weight: var(--fw-bold); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ds-chip[aria-pressed="true"], .ds-chip[aria-selected="true"], .ds-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ds-chip--accent { background: var(--c-accent-soft); border-color: rgba(242,131,107,.45); color: var(--c-ink); }
.ds-chip--static { cursor: default; }
.ds-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff;
  font-size: calc(12.5px * var(--fs)); font-weight: var(--fw-bold); white-space: nowrap; vertical-align: 1px; }
.ds-badge--soft { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.ds-badge--accent { background: var(--c-accent-soft); color: var(--c-accent-strong); }

/* ---------- 세그먼트 탭(Day·Week·Month처럼) ----------
   <div class="ds-seg" role="tablist"><button role="tab" aria-selected="true">…</button></div> */
.ds-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-surface-border);
  box-shadow: var(--sh-1); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.ds-seg > button, .ds-seg > a { flex: 1; min-height: 40px; border: none; background: none; padding: 8px 6px; border-radius: var(--r-pill);
  font-family: inherit; font-weight: var(--fw-bold); font-size: calc(14px * var(--fs)); color: var(--c-sub); cursor: pointer; text-align: center; text-decoration: none; }
.ds-seg > [aria-selected="true"], .ds-seg > [aria-current="page"], .ds-seg > [aria-checked="true"] { background: var(--c-primary); color: #fff; box-shadow: 0 4px 12px rgba(31,138,122,.25); }
.ds-seg--sticky { position: sticky; top: 8px; z-index: 20; }

/* ---------- 글자 크기 고르기(DS.fontSizePicker) ---------- */
.ds-fs-pick { border-radius: var(--r-md); }
.ds-fs-pick > button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; border-radius: 12px; font-size: 13px; }
.ds-fs-pick .ds-fs-sample { font-weight: var(--fw-heavy); line-height: 1.1; }
.ds-fs-preview { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-line);
  font-size: calc(15px * var(--fs)); line-height: 1.6; }

/* ---------- 아이콘 배지(Quick Actions의 색 사각형) ---------- */
.ds-icon-badge { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: var(--c-primary-soft); color: var(--c-primary-strong); font-size: 19px; }
.ds-icon-badge .lic, .ds-icon-badge .ds-ic { width: 20px; height: 20px; }
.ds-icon-badge--accent { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.ds-icon-badge--violet { background: var(--c-violet-soft); color: var(--c-violet); }
.ds-icon-badge--amber { background: var(--c-amber-soft); color: var(--c-amber); }
.ds-icon-badge--lg { width: 48px; height: 48px; border-radius: 15px; }
.ds-icon-badge--lg .lic, .ds-icon-badge--lg .ds-ic { width: 24px; height: 24px; }

/* 빠른 실행 타일(2열) — <a class="ds-tile"><span class="ds-icon-badge">…</span>운동 시작</a> */
.ds-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ds-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--c-surface-solid);
  border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; font-weight: var(--fw-bold); font-size: calc(14px * var(--fs)); cursor: pointer; font-family: inherit; text-align: left; }

/* ---------- 숫자 칸(Duration · Calories · Level처럼 한 카드에 세로줄로) ----------
   DS.stats([{ value, label }]) */
.ds-stats { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.ds-stats > div { min-width: 0; padding: 12px 6px 10px; text-align: center; }
.ds-stats > div + div { border-left: 1px solid var(--c-line); }
.ds-stats b { display: block; font-size: calc(21px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.ds-stats b small { font-size: .6em; font-weight: var(--fw-bold); color: var(--c-sub); margin-left: 2px; }
.ds-stats span { display: block; font-size: calc(13px * var(--fs)); color: var(--c-sub); margin-top: 2px; }
.ds-stats .lic { color: var(--c-primary-strong); margin-right: 2px; } /* 연속 기록 불꽃 — 코랄은 구독·오늘·맞춤에만(규칙 12) */

/* ---------- 원형 진행 링(Today's Progress 75%) ----------
   DS.ring(75, { size: 88, label: "75%" }) */
.ds-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ds-ring svg { display: block; transform: rotate(-90deg); }
.ds-ring .ds-ring-track { stroke: var(--c-primary-soft); }
.ds-ring .ds-ring-bar { stroke: var(--c-primary); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ds-ring--accent .ds-ring-track { stroke: var(--c-accent-soft); }
.ds-ring--accent .ds-ring-bar { stroke: var(--c-accent); }
.ds-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
/* 링 크기는 고정이라 안의 글자는 큰 글씨에서도 넘치지 않게 최대값을 둔다 */
.ds-ring-label b { font-size: min(calc(20px * var(--fs)), 25px); font-weight: var(--fw-heavy); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ds-ring-label small { display: block; font-size: min(calc(12.5px * var(--fs)), 14px); color: var(--c-sub); font-weight: var(--fw-bold); margin-top: 2px; }
/* 링 + 범례(오른쪽 점 목록) */
.ds-ring-row { display: flex; align-items: center; gap: var(--sp-4); }
.ds-legend { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: calc(13px * var(--fs)); }
.ds-legend li { display: flex; align-items: center; gap: 8px; color: var(--c-sub); }
.ds-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--c-primary)); flex: none; }
.ds-legend li b { margin-left: auto; color: var(--c-ink); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* 합계 줄(그래프에 색이 없는 항목): 점 없이 위에 구분선 */
.ds-legend li.is-total { padding-top: 7px; border-top: 1px solid var(--c-line); }
.ds-legend li.is-total::before { display: none; }

/* ---------- 진행 막대 ---------- DS.progress(40) / 코랄은 ds-progress--accent */
.ds-progress { height: 8px; border-radius: var(--r-pill); background: var(--c-primary-soft); overflow: hidden; }
.ds-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); transition: width .4s ease; }
.ds-progress--accent { background: var(--c-accent-soft); }
.ds-progress--accent > span { background: var(--c-accent); }
/* 칸 나뉜 막대(주간 활동 · 8주 진도): <div class="ds-segbar"><i><span style="width:50%"></span></i>…</div> */
.ds-segbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.ds-segbar > i { height: 6px; border-radius: 3px; background: var(--c-primary-soft); overflow: hidden; }
.ds-segbar > i > span { display: block; height: 100%; background: var(--c-primary); border-radius: inherit; }

/* ---------- 목록 줄(Exercises 목록처럼 썸네일 · 제목 · 보조 · ›) ----------
   <div class="ds-list"><a class="ds-list-row">…</a></div> */
.ds-list { border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-surface-border); box-shadow: var(--sh-1); overflow: hidden;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.ds-list-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: none; background: none;
  border-top: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; text-align: left; font-family: inherit; cursor: pointer; }
.ds-list > .ds-list-row:first-child, .ds-list > :first-child > .ds-list-row { border-top: none; }
.ds-list-thumb { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--c-surface-solid); border: 1px solid var(--c-line); }
.ds-list-body { flex: 1; min-width: 0; }
.ds-list-body b { display: block; font-size: calc(15px * var(--fs)); font-weight: var(--fw-bold); line-height: 1.35; }
.ds-list-body small { display: block; font-size: calc(12.5px * var(--fs)); color: var(--c-sub); margin-top: 2px; }
.ds-chev { flex: none; width: 18px; height: 18px; color: var(--c-sub); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary); color: #fff; }
.ds-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 알림 상자 ---------- */
.ds-note { padding: 11px 14px; border-radius: var(--r-sm); font-size: calc(13.5px * var(--fs)); line-height: 1.6; background: var(--c-primary-tint); color: var(--c-ink); }
.ds-note--accent { background: var(--c-accent-soft); border: 1px solid rgba(242,131,107,.35); }
.ds-note--warn { background: var(--c-amber-soft); border: 1px solid var(--c-amber-border); } /* 주의(무리·휴식 부족 같은 몸 상태 경고) — 코랄·빨강과 구분 */
.ds-note--danger { background: var(--c-danger-soft); color: var(--c-danger-text); }

/* ---------- 입력 ---------- */
.ds-field { display: block; margin-bottom: var(--sp-3); }
.ds-field > label, .ds-label { display: block; font-size: calc(13px * var(--fs)); font-weight: var(--fw-bold); color: var(--c-ink-2); margin-bottom: 6px; }
.ds-input, .ds-field input:not([type=checkbox]):not([type=radio]), .ds-field select {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--c-line);
  background: var(--c-surface-solid); color: var(--c-ink); font-family: inherit; font-size: calc(15.5px * var(--fs));
}
.ds-input:focus-visible, .ds-field input:focus-visible, .ds-field select:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }
input[type=checkbox], input[type=radio] { accent-color: var(--c-primary); }

/* ---------- 시트(아래에서 올라오는 창) ---------- */
.ds-scrim { position: fixed; inset: 0; z-index: 57; background: rgba(20, 44, 40, .38); display: flex; align-items: flex-end; justify-content: center;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ds-sheet { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: var(--c-surface-solid); color: var(--c-ink);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--sp-6) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); box-shadow: var(--sh-2); }
@media (min-width: 760px) { .ds-scrim { align-items: center; } .ds-sheet { border-radius: var(--r-xl); } }

/* ---------- 상단바 ----------
   <header class="app-bar"><h1>제목</h1><a class="hdr-me">…</a></header>
   바탕 그라데이션 위에 그대로 얹는 밝은 바. 오른쪽 둥근 버튼 하나(내 정보 — 글자 크기도 여기서) */
.app-bar { position: relative; color: var(--c-ink); padding: calc(14px + env(safe-area-inset-top)) var(--sp-4) var(--sp-3); }
.app-bar h1 { margin: 0; font-size: calc(20px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1.3; padding-right: 52px; }
.app-bar .app-bar-sub { margin: 2px 0 0; font-size: calc(13px * var(--fs)); color: var(--c-sub); padding-right: 52px; }
.hdr-me { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: var(--sp-3); z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-surface); border: 1px solid var(--c-surface-border); color: var(--c-ink); box-shadow: var(--sh-1);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.hdr-me svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hdr-me[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
@media (min-width: 760px) {
  .app-bar { padding-left: calc(50% - 344px); padding-right: calc(50% - 344px); }
  .app-bar .hdr-me { right: calc(50% - 352px); }
}

header:has(> .hdr-me) > h1, header:has(> .hdr-me) > p { padding-right: 52px; }

/* ---------- 아래 메뉴(떠 있는 글래스 바) ----------
   <nav class="bottom-nav fixed" data-ds-nav></nav> 만 두면 ui.js가 채운다 */
.bottom-nav { display: flex; gap: 2px; z-index: 30; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.82); border-top: 1px solid var(--c-surface-border); box-shadow: 0 -6px 24px rgba(27,74,64,.08);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.bottom-nav.fixed { position: fixed; left: 0; right: 0; bottom: 0; }
.bottom-nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border-radius: var(--r-md);
  color: var(--c-sub); text-decoration: none; font-size: min(calc(12.5px * var(--fs)), 15.5px); font-weight: var(--fw-bold); letter-spacing: -0.02em; white-space: nowrap; }
.bottom-nav a .ic { display: grid; place-items: center; width: 40px; height: 28px; border-radius: var(--r-pill); transition: background-color .15s ease; }
.bottom-nav a .ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.bottom-nav a.on { color: var(--c-primary-strong); }
.bottom-nav a.on .ic { background: var(--c-primary-soft); }
/* 새 소식 점(DS.navDot — 트레이너가 확인한 새 답) */
.bottom-nav a .ic { position: relative; }
.bottom-nav a.dot .ic::after { content: ""; position: absolute; top: 2px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary-strong); box-shadow: 0 0 0 2px var(--c-surface-solid); }
@media (min-width: 760px) {
  .bottom-nav.fixed { max-width: 560px; margin: 0 auto 12px; border: 1px solid var(--c-surface-border); border-radius: var(--r-xl); padding-bottom: 6px; box-shadow: var(--sh-2); }
}

/* ---------- 가입 창(#gate-overlay) · 결제 창(#pay-overlay) — 앱·질문하기 공통 ---------- */
#gate-overlay, #pay-overlay { display: none; position: fixed; inset: 0; z-index: 30; align-items: center; justify-content: center; padding: 20px;
  background: var(--bg-gradient); background-color: var(--bg-solid); overflow-y: auto; }
#gate-overlay.show, #pay-overlay.show { display: flex; }
#gate-card, #pay-card { width: 100%; max-width: 380px; margin: auto; background: var(--c-surface); border: 1px solid var(--c-surface-border); border-radius: var(--r-xl);
  padding: 22px 20px; box-shadow: var(--sh-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
#pay-card { text-align: center; }
#gate-card h2, #pay-card h2 { font-size: calc(19px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.02em; margin: 0 0 6px; }
#gate-card .gate-sub, #pay-card .pay-sub { font-size: calc(13.5px * var(--fs)); line-height: 1.55; color: var(--c-sub); margin: 0 0 16px; }
#pay-card .pay-sub { margin-bottom: 20px; }
#gate-card .gate-mark { display: block; margin-bottom: 14px; }
.gate-logo { display: block; height: 30px; width: auto; }
.gate-logo-light { display: none; }
.gate-field { margin-bottom: 10px; }
.gate-field label { display: block; font-size: calc(13px * var(--fs)); font-weight: var(--fw-bold); color: var(--c-ink-2); margin-bottom: 6px; }
.gate-field input, .gate-field select { width: 100%; min-height: 46px; border: 1.5px solid var(--c-line); border-radius: var(--r-sm); padding: 11px 14px;
  font-size: calc(15.5px * var(--fs)); font-family: inherit; color: var(--c-ink); background: var(--c-surface-solid); }
.gate-field input:focus-visible, .gate-field select:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }
/* 카카오 로그인 버튼 — 카카오 디자인 가이드 색(#FEE500 · 검정 85%)을 그대로 쓴다(브랜드 예외) */
.btn-kakao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border: none; border-radius: 12px;
  background: #fee500; color: rgba(0,0,0,.85); font-family: inherit; font-size: calc(15.5px * var(--fs)); font-weight: var(--fw-bold); cursor: pointer; }
.btn-kakao[hidden] { display: none; }
.btn-kakao svg { width: 20px; height: 20px; fill: #000; }
.gate-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--c-sub); font-size: calc(13px * var(--fs)); }
.gate-or[hidden] { display: none; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
#kakao-error { margin: 8px 0 0; }
.gate-consent { display: flex; gap: 8px; align-items: flex-start; font-size: calc(12.5px * var(--fs)); color: var(--c-ink-2); line-height: 1.55; margin: 14px 0 16px; }
.gate-consent input { margin-top: 2px; flex: none; width: 18px; height: 18px; }
.gate-consent a, .gate-biz a { color: inherit; text-decoration: underline; }
.gate-marketing { margin: -4px 0 16px; padding-top: 12px; border-top: 1px dashed var(--c-line-strong); }
.gate-marketing .gate-consent { margin: 0; }
.gate-marketing-phone { margin: 10px 0 0 26px; }
.gate-marketing-phone[hidden] { display: none; }
.gate-marketing-note { font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--c-sub); margin: 6px 0 0; }
.gate-error { font-size: calc(12.5px * var(--fs)); color: var(--c-danger-text); margin: -4px 0 10px; display: none; }
.gate-error.show { display: block; }
.gate-error.info { color: var(--c-sub); }
.gate-link { display: block; width: 100%; border: none; background: none; color: var(--c-sub); font-family: inherit; font-size: calc(13px * var(--fs)); padding: 10px 0 0; cursor: pointer; text-align: center; }
.gate-link:hover { color: var(--c-ink); }
.gate-link:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
#verify-code { letter-spacing: 6px; font-size: calc(20px * var(--fs)); text-align: center; font-variant-numeric: tabular-nums; }
.gate-returning { margin: 12px 0 0; font-size: calc(12.5px * var(--fs)); color: var(--c-sub); text-align: center; line-height: 1.5; }
.gate-biz { margin: 14px 0 0; font-size: calc(12.5px * var(--fs)); line-height: 1.6; color: var(--c-sub); text-align: center; }
/* 첫 화면 소개(레퍼런스 온보딩: 민트 카드 + 큰 제목 + 틸 강조) */
.gate-intro { margin: -4px 0 14px; padding: 16px 16px; border-radius: var(--r-lg); background: var(--hero-gradient); border: 1px solid rgba(255,255,255,.8); text-align: left; }
.gi-kicker { font-size: calc(13px * var(--fs)); font-weight: var(--fw-bold); color: var(--c-primary-strong); letter-spacing: .01em; }
/* 제휴 링크(스키스쿨·코치)로 왔을 때 kicker 자리: "OO스키스쿨 강습생 전용"(public/auth-kakao.js) */
.gi-kicker--partner { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font-size: calc(13.5px * var(--fs)); }
.gi-title { font-size: calc(22px * var(--fs)); font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1.3; margin: 4px 0 12px; color: var(--c-ink); word-break: keep-all; }
.gi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gi-list li { font-size: calc(12.5px * var(--fs)); color: var(--c-sub); line-height: 1.45; padding-left: 16px; position: relative; }
.gi-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.gi-list b { display: block; font-size: calc(14px * var(--fs)); color: var(--c-ink); }
.gi-free { margin-top: 14px; display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); background: var(--c-surface-solid); color: var(--c-accent-strong);
  font-size: calc(12.5px * var(--fs)); font-weight: var(--fw-bold); border-radius: var(--r-sm); line-height: 1.45; }
/* 2026-10-22 가입 창 짧게: 기능은 한 줄 칩, 동의 전문은 "내용 보기", 카카오가 켜져 있으면 이메일 칸은 버튼을 눌러야 펼침 */
.gi-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gi-chips li { font-size: calc(12.5px * var(--fs)); font-weight: var(--fw-bold); color: var(--c-ink); background: var(--c-surface-solid); border-radius: var(--r-pill); padding: 4px 10px; }
.gi-chips li::before { content: "✓ "; color: var(--c-primary); }
.gate-consent-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.gate-consent-row .gate-consent { margin: 0; flex: 1 1 0; min-width: 0; }
.gate-consent-more:not([open]) { flex: none; }
.gate-consent-more { font-size: calc(12.5px * var(--fs)); color: var(--c-sub); }
.gate-consent-more summary { cursor: pointer; text-decoration: underline; padding: 2px 0; list-style: none; }
.gate-consent-more summary::-webkit-details-marker { display: none; }
.gate-consent-more[open] { flex-basis: 100%; }
.gate-consent-more p { margin: 6px 0 0; line-height: 1.55; color: var(--c-ink-2); }
.gate-consent-more a { color: inherit; text-decoration: underline; }
.gi-by { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(23,64,58,.12); font-size: calc(12.5px * var(--fs)); color: var(--c-sub); line-height: 1.5; }
.gi-by b { color: var(--c-ink); }
/* 가입 창 회원 후기 한 줄(auth-kakao.js gateVoice — 관리자 승인 후기가 있을 때만) */
.gi-voice { margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm); background: rgba(255,255,255,.75); font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--c-ink); }
.gi-voice span { display: block; margin-top: 2px; font-size: calc(12px * var(--fs)); color: var(--c-sub); }
/* 동의 없이 카카오를 누르면 체크할 칸을 빨간 테두리로 잠깐 강조 */
.gate-consent-row--need { outline: 2px solid var(--c-danger); outline-offset: 4px; border-radius: var(--r-sm); animation: gate-need .4s ease 2; }
@keyframes gate-need { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .gate-consent-row--need { animation: none; } }
.gate-email-open { margin-top: 10px; }
.gate-email-open[hidden] { display: none; }
#gate-card.gate--kakao:not(.gate--email) .gate-email { display: none; }
#gate-card.gate--email .gate-email-open { display: none; }
#gate-card.gate--email .gate-email { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.gi-book { margin-top: 14px; font-size: calc(13px * var(--fs)); color: var(--c-ink-2); line-height: 1.5; text-align: center; }
.gi-book b { color: var(--c-primary-strong); }
.gi-book .nw { white-space: nowrap; }
#gate-card:has(#verify-form:not([hidden])) .gate-intro { display: none; }
.pay-submit { margin-bottom: 8px; }
.pay-submit[hidden] { display: none; }
.pay-cancel { width: 100%; border: none; background: none; color: var(--c-sub); font-family: inherit; font-size: calc(13.5px * var(--fs)); padding: 8px 0; cursor: pointer; }
.pay-error { font-size: calc(12.5px * var(--fs)); color: var(--c-danger-text); margin: 10px 0 0; display: none; white-space: pre-line; }
.pay-error.show { display: block; }
.pay-bank-info { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 12px; font-size: calc(14px * var(--fs)); line-height: 1.6; margin: 0 0 14px; }

/* ---------- 사업자정보 푸터 ---------- <footer class="site-footer" data-ds-footer></footer> */
.site-footer { max-width: 720px; margin: 18px auto 0; padding: 16px 16px 4px; font-size: calc(12.5px * var(--fs)); line-height: 1.7; color: var(--c-sub); text-align: center; }
.site-footer a { color: inherit; }
/* 2026-11-04 접는 사업자정보: 약관 링크 한 줄 + '상호 · 사업자정보 ▾' 한 줄, 누르면 나머지 */
.site-footer .sf-links { margin-bottom: 4px; }
.site-footer .sf-biz summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 4px 6px; border-radius: var(--r-sm, 8px); }
.site-footer .sf-biz summary::-webkit-details-marker { display: none; }
.site-footer .sf-biz summary span { text-decoration: underline; }
.site-footer .sf-biz summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.site-footer .sf-biz[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.site-footer .sf-biz p { margin: 2px 0 0; }

/* 움직임 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) { .ds-btn, .ds-ring .ds-ring-bar, .ds-progress > span { transition: none; } }
/* 모든 화면 공통: 미끄러지듯 움직이는 전환·부드러운 스크롤을 끈다(애니메이션은 화면별로 끔, 결제 처리 중 표시는 그대로) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; } }