/* ============================================================
   산소지기 디자인 시스템 v2
   ------------------------------------------------------------
   설계 근거
   - 토스 시니어 UT: 시니어는 텍스트·화살표(>)를 누를 수 있다고
     인지하지 못한다 → 모든 액션은 "채워진 사각 버튼"으로만 만든다.
   - 토스 시니어 UT: 시니어는 스크롤을 시도하지 않는다
     → .scroll-hint 로 아래에 내용이 더 있음을 시각적으로 알린다.
   - 시니어 UI 가이드(designdb/한국디자인진흥원): 본문 최소 16px,
     굵은 서체로 대비 강화 → 본문 19px, 굵기 600 이상을 기본으로.
   - 터치 영역: 최소 56px (모바일 장갑·떨림 고려)
   - 색: 소나무 그린 + 황토. 순백(#fff) 배경 대신 한지 톤 오프화이트로
     장시간 야외 화면 눈부심을 줄인다.
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* ---- 색: 브랜드 ---- */
  --pine-900: #0F2E1C;
  --pine-800: #163A24;
  --pine-700: #1F5132;   /* primary */
  --pine-600: #2A6B43;
  --pine-500: #3C8557;
  --pine-100: #DCEBE1;
  --pine-50:  #EFF6F1;

  --clay-700: #8A4E1F;
  --clay-600: #A9642A;   /* accent (황토) */
  --clay-100: #F4E7D8;
  --clay-50:  #FBF4EA;

  /* ---- 색: 상태 ---- */
  --danger-600: #B23B2E;
  --danger-50:  #FBEDEB;
  --info-600:   #2A5FA5;
  --info-50:    #EAF1FA;
  --warn-600:   #B5820B;
  --warn-50:    #FBF3DC;

  /* ---- 색: 표면 ---- */
  --bg:        #FAF8F3;  /* 한지 오프화이트 */
  --surface:   #FFFFFF;
  --surface-2: #F5F2EA;
  --border:    #E4DED0;
  --border-strong: #CFC6B2;

  /* ---- 색: 글자 ---- */
  --text:      #1A1A17;
  --text-2:    #55504A;
  --text-3:    #6E6860;   /* 14px 보조문에도 쓰이므로 WCAG AA(4.5:1) 이상으로 잡는다 */
  --on-dark:   #FFFFFF;

  /* ---- 타이포 ---- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;

  /* ---- 모양 ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(26, 26, 23, 0.04), 0 2px 8px rgba(26, 26, 23, 0.05);
  --shadow-2: 0 2px 4px rgba(26, 26, 23, 0.05), 0 8px 24px rgba(26, 26, 23, 0.07);
  --shadow-btn: 0 2px 0 rgba(15, 46, 28, 0.22);

  /* ---- 크기 ---- */
  --tap: 56px;           /* 최소 터치 높이 */
  --page: 560px;         /* 본문 최대 너비 */
}

/* ============================================================
   리셋
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 450;
  line-height: 1.62;
  letter-spacing: -0.011em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 3px solid var(--pine-500);
  outline-offset: 2px;
  border-radius: 6px;
}

.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;
}

/* ============================================================
   레이아웃
   ============================================================ */
.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 20px calc(40px + env(safe-area-inset-bottom));
}
.page--wide { max-width: 900px; }

/* 상단 바 — 어느 화면에서든 브랜드로 돌아갈 수 있게 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}
.page--wide ~ .topbar .topbar__inner,
.topbar--wide .topbar__inner { max-width: 900px; }

/* 로고 조합 (lockup)
   ------------------------------------------------------------
   심볼 높이 = 워드마크 글자 크기 × 1.4
   심볼과 워드마크 사이 간격 = 심볼 높이 × 0.32
   워드마크는 Pretendard 800 / 자간 -0.035em 고정.
   이 비례는 brand/brand-guide.html에 도해로 정리해 두었다. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--pine-800);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.brand__mark {
  width: 28px;
  height: 28px;
  flex: none;
  /* 심볼의 시각 중심은 기하 중심보다 살짝 아래 — 광학 정렬 보정 */
  margin-top: -1px;
}
.brand__sub {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-3);
  letter-spacing: -0.01em;
  padding-left: 7px;
  margin-left: 1px;
  border-left: 1.5px solid var(--border-strong);
}
/* 세로 조합 — 좁은 폭이나 공유 이미지용 */
.brand--stacked {
  flex-direction: column;
  gap: 10px;
  font-size: 24px;
}
.brand--stacked .brand__mark { width: 48px; height: 48px; margin-top: 0; }

/* ============================================================
   타이포
   ============================================================ */
.h1 {
  font-size: 30px;
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--pine-900);
  margin: 28px 0 12px;
}
.h1--hero { font-size: 34px; margin-top: 32px; }

.h2 {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 750;
  letter-spacing: -0.028em;
  color: var(--pine-800);
  margin: 0 0 10px;
}

.h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0 0 6px;
}

.section-title {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 32px 0 12px;
}

.lead {
  font-size: 19px;
  line-height: 1.66;
  color: var(--text-2);
  margin: 0 0 24px;
}

.muted   { color: var(--text-2); }
.small   { font-size: 16px; line-height: 1.55; }
.tiny    { font-size: 14px; line-height: 1.5; color: var(--text-3); }
.strong  { font-weight: 750; color: var(--text); }
.center  { text-align: center; }

/* 본문 안 강조 — 밑줄 마커 */
.mark {
  background: linear-gradient(transparent 58%, var(--clay-100) 58%);
  font-weight: 750;
  padding: 0 1px;
}

/* ============================================================
   카드
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.card--flat   { box-shadow: none; }
.card--tint   { background: var(--pine-50); border-color: var(--pine-100); }
.card--clay   { background: var(--clay-50); border-color: var(--clay-100); }
.card--accent { border-left: 5px solid var(--pine-700); }
.card--pad-sm { padding: 16px; }
.card > * + * { margin-top: 12px; }
.card > .btn + .btn { margin-top: 10px; }

/* 카드 상단 라벨 (예: "1단계") */
.card__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--pine-700);
  background: var(--pine-50);
  border-radius: var(--r-full);
  padding: 4px 12px;
  margin-bottom: 4px;
}

/* ============================================================
   버튼
   ------------------------------------------------------------
   토스 UT 결과 반영: 누를 수 있는 것은 전부 이 형태다.
   텍스트 링크나 ">" 아이콘만으로 액션을 만들지 않는다.
   ============================================================ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 15px 20px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--pine-700);
  color: var(--on-dark);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.06s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { background: var(--pine-600); }
.btn:active { transform: translateY(2px); box-shadow: none; }

.btn--lg  { min-height: 64px; font-size: 21px; padding: 18px 20px; }
.btn--sm  { min-height: 46px; font-size: 16px; padding: 10px 16px; width: auto; box-shadow: none; }

.btn--secondary {
  background: var(--clay-600);
  box-shadow: 0 2px 0 rgba(138, 78, 31, 0.28);
}
.btn--secondary:hover { background: var(--clay-700); }

.btn--outline {
  background: var(--surface);
  color: var(--pine-800);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn--outline:hover { background: var(--surface-2); border-color: var(--pine-700); }

.btn--ghost {
  background: transparent;
  color: var(--pine-800);
  border-color: transparent;
  box-shadow: none;
  font-weight: 700;
}
.btn--ghost:hover { background: var(--surface-2); }

.btn--danger {
  background: var(--danger-600);
  box-shadow: 0 2px 0 rgba(120, 38, 29, 0.3);
}

.btn--info {
  background: var(--info-600);
  box-shadow: 0 2px 0 rgba(28, 65, 113, 0.3);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: #CFCBC3;
  color: #FFFFFF;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.btn__icon { width: 22px; height: 22px; flex: none; }

/* 버튼 묶음 */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn { width: auto; flex: 1 1 auto; }

/* 되돌아가기 — 액션이 아니라 내비게이션이므로 유일하게 링크 형태 허용 */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 4px;
  margin-top: 28px;
  color: var(--text-2);
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 2px solid var(--border-strong);
}
.backlink:hover { color: var(--pine-700); border-color: var(--pine-700); }

/* ============================================================
   폼
   ============================================================ */
.field { margin-top: 20px; }
.field:first-child { margin-top: 0; }

.label {
  display: block;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.label__hint {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 2px;
}

.input,
.select {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 16px;
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: #A9A29A; font-weight: 450; }
.input:focus,
.select:focus {
  border-color: var(--pine-700);
  box-shadow: 0 0 0 4px var(--pine-50);
  outline: none;
}

.select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%231F5132' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* 체크박스 — 시니어가 놓치지 않도록 카드 전체를 누를 수 있게 */
.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 16px;
  background: var(--clay-50);
  border: 2px solid var(--clay-100);
  border-radius: var(--r-md);
  cursor: pointer;
}
.check:has(input:checked) { border-color: var(--clay-600); background: var(--clay-50); }
.check input {
  width: 28px; height: 28px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--clay-600);
  cursor: pointer;
}
.check span { font-size: 17px; line-height: 1.5; color: var(--text-2); }

/* 지역 선택 그리드 */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 420px) { .chip-grid { grid-template-columns: repeat(4, 1fr); } }

.chip {
  min-height: 54px;
  padding: 10px 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.12s ease;
}
.chip:hover { border-color: var(--pine-500); }
.chip.selected,
.chip[aria-pressed="true"] {
  background: var(--pine-700);
  border-color: var(--pine-700);
  color: var(--on-dark);
}

/* ============================================================
   상태 메시지
   ============================================================ */
/* flex로 두면 <strong>과 앞뒤 글자가 각각 칸이 되어 문장이 세로로 찢어진다.
   아이콘(.rec-dot)은 이미 inline-block이라 block 흐름에서도 옆자리로 붙는다. */
.msg {
  display: block;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  margin-top: 12px;
}
.msg--info    { background: var(--info-50);   color: var(--info-600); }
.msg--error   { background: var(--danger-50); color: var(--danger-600); }
.msg--success { background: var(--pine-50);   color: var(--pine-700); }
.msg--warn    { background: var(--warn-50);   color: #8A6208; }
.msg--plain   { background: var(--surface-2); color: var(--text-2); font-weight: 500; }

/* 큰 성공 배너 */
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--pine-700);
  color: var(--on-dark);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  box-shadow: var(--shadow-2);
}
.banner svg { width: 28px; height: 28px; flex: none; }

/* ============================================================
   뱃지
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge--new  { background: var(--danger-50); color: var(--danger-600); }
.badge--sold { background: var(--info-50);   color: var(--info-600); }
.badge--done { background: var(--pine-50);   color: var(--pine-700); }
.badge--hold { background: var(--clay-50);   color: var(--clay-700); }
.badge--soft { background: var(--surface-2); color: var(--text-2); }

/* ============================================================
   신뢰 요소 (경쟁사 벌초닷컴 대비 필수)
   ============================================================ */
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0;
}
.trust-item {
  text-align: center;
  padding: 16px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.trust-item strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pine-700);
}
.trust-item span { font-size: 14px; color: var(--text-3); font-weight: 600; }

/* 시세표 */
.price-table { display: grid; gap: 2px; margin-top: 12px; }
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: 17px;
}
.price-row dt { color: var(--text-2); font-weight: 600; }
.price-row dd { font-weight: 800; color: var(--pine-800); letter-spacing: -0.02em; white-space: nowrap; }

/* 단계 안내 리스트
   li 안 strong/텍스트를 grid 칸으로 쪼개면 문장이 34px 칸에 끼어 잘린다.
   번호만 절대위치로 빼고 본문은 한 흐름으로 둔다. */
.steps { counter-reset: step; display: grid; gap: 14px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  font-size: 18px;
  line-height: 1.55;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--pine-700);
  color: var(--on-dark);
  font-size: 17px;
  font-weight: 800;
}
.steps--clay li::before { background: var(--clay-600); }

/* 일러스트가 있는 사용법 — 그림 → 번호 → 설명 순으로 가운데 정렬 */
.steps--illust {
  gap: 28px;
}
.steps--illust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 4px;
  padding-left: 0; /* 기본 steps의 번호 여백을 없애 가운데 정렬 */
  text-align: center;
}
.steps--illust li::before {
  position: static;
  order: 2;
  margin: 4px 0 10px;
  flex-shrink: 0;
}
.steps--illust .steps__illust {
  order: 1;
  width: min(200px, 72%);
  height: auto;
  margin: 0 auto;
}
.steps--illust .steps__body {
  order: 3;
  width: 100%;
  text-align: left;
  font-size: 18px;
  line-height: 1.55;
}

/* 고민 인용 목록 — 체크 표시(✓)는 "해결됨"으로 읽혀 고민 나열에는 쓰지 않는다 */
.pain-list { display: grid; gap: 8px; }
.pain-list li {
  position: relative;
  padding: 12px 14px 12px 34px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
}
.pain-list li::before {
  content: "\201C";
  position: absolute;
  left: 14px;
  top: 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-3);
}

/* 체크 리스트 — steps와 같은 이유로 absolute 마커 */
.checklist { display: grid; gap: 10px; }
.checklist li {
  position: relative;
  padding-left: 36px;
  font-size: 18px;
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--pine-50)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F5132' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

/* ============================================================
   측정 / 진행 표시
   ============================================================ */
.countdown {
  font-size: 76px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--pine-700);
  font-variant-numeric: tabular-nums;
  margin: 8px 0;
}
.countdown small { display: block; font-size: 17px; font-weight: 650; color: var(--text-3); letter-spacing: 0; margin-top: 8px; }

.progress {
  height: 14px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
  margin: 16px 0;
}
.progress__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--pine-600), var(--pine-500));
  transition: width 0.25s linear;
}

/* 통계 타일 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats > div {
  text-align: center;
  padding: 14px 6px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 650;
  color: var(--text-3);
}
.stats strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pine-800);
  font-variant-numeric: tabular-nums;
}

/* 녹화 중 점멸 표시 */
.rec-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: var(--r-full);
  background: var(--danger-600);
  animation: rec 1.4s ease-in-out infinite;
  vertical-align: -1px;
  margin-right: 8px;
}
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* ============================================================
   사진 / 지도 그림
   ============================================================ */
.photo {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
/* 카카오맵 컨테이너 — SDK가 이 영역에 타일을 그린다 */
.map-box {
  width: 100%;
  height: 220px;
  margin: 12px 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
}
/* 핀 보정용 위성 지도는 손가락으로 조작할 공간이 더 필요하다 */
.map-box--adjust { height: 320px; }
.map-box--error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--text-3);
  font-size: 14px;
  text-align: center;
}
.figure-box {
  display: block;
  margin: 4px auto;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.stamp {
  font-size: 14px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.waypoint {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}
.waypoint p { font-size: 17px; font-weight: 650; }
.waypoint img { width: 100%; border-radius: var(--r-sm); margin-top: 8px; border: 1px solid var(--border); }

/* 계좌 안내 */
.account {
  background: var(--clay-50);
  border: 2px dashed var(--clay-600);
  border-radius: var(--r-md);
  padding: 16px;
  font-size: 18px;
  font-weight: 750;
  color: var(--clay-700);
  white-space: pre-line;
  line-height: 1.7;
}

/* ============================================================
   스크롤 유도 (토스 UT #5)
   ============================================================ */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 0 4px;
  color: var(--text-3);
  font-size: 15px;
  font-weight: 650;
}
.scroll-hint svg { width: 22px; height: 22px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }

/* ============================================================
   푸터
   ============================================================ */
.footer {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-3);
}
.footer strong { color: var(--text-2); }
.footer__copy {
  margin: 6px 0;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--text-3);
}

/* ============================================================
   표 (어드민)
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; white-space: nowrap; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table th {
  background: var(--surface-2);
  font-weight: 750;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-2);
  position: sticky; top: 0;
}
.table tbody tr:hover { background: var(--pine-50); }
.table td { font-variant-numeric: tabular-nums; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.form-grid .input, .form-grid .select { min-height: 48px; font-size: 16px; padding: 10px 14px; }
.form-grid .select { padding-right: 44px; }

/* 어드민은 정보 밀도가 우선 — 본문 축소 */
.admin { font-size: 16px; }
.admin .h1 { font-size: 26px; }
.admin .card { padding: 16px; margin-bottom: 10px; }