/* 하루 장례 — 공용 스타일
   구조는 Meta Astryx 디자인 시스템의 규칙을 참고했습니다 (React 라이브러리는 쓰지 않음).
   - 토큰: 역할 이름(--color-text-primary 등)으로 정의하고, 컴포넌트는 토큰만 참조
   - 색마다 밝은/어두운 값 한 쌍 (prefers-color-scheme)
   - 간격은 4px 단위 스케일, 글자 크기는 1.2배 스케일, 줄 간격은 글자 크기에 따라 단계 적용
   - 포커스 링·모션·컨트롤 높이도 토큰으로 관리
   - 캐스케이드 레이어: reset → base → components (레이어 밖 CSS가 항상 우선. admin.css 등)
   Astryx 와 다르게 둔 값: 고령층 가독성을 위해 본문 18px·한글 본문 줄 간격 1.7,
   차분한 분위기를 위해 모서리 반경은 작게(4px) 유지 */

/* ================= 토큰 ================= */
:root {
  color-scheme: light dark;

  /* --- 색: 밝은 화면 (먹색 + 아이보리 + 갈색) --- */
  --color-background-body: #f7f4ee;
  --color-background-muted: #eee9e0;      /* 구획 배경 (section-alt) */
  --color-background-surface: #fffdf9;    /* 입력칸, 글 보기, 강조 칸 */
  --color-text-primary: #1f2428;
  --color-text-secondary: #4a5057;        /* body 위 7.4:1, muted 위 6.7:1 */
  --color-text-disabled: #8a857c;
  --color-border: #d4ccbf;                /* 구분선 (장식) */
  --color-border-input: #8f877b;          /* 입력칸 테두리 (3:1 이상) */
  --color-border-emphasized: #1f2428;     /* 표 머리·구획 시작선 */
  --color-accent: #7b5634;                /* body 위 5.9:1 */
  --color-link: #5f4126;
  --color-link-hover: #1f2428;
  --color-action: #1f2428;                /* 주 버튼 배경 */
  --color-action-hover: #5f4126;
  --color-on-action: #fffdf9;
  --color-overlay-hover: rgb(31 36 40 / 0.05);   /* 불투명 색 대신 반투명 덧칠 */
  --color-error: #9b2c22;
  --color-on-error: #fffdf9;
  --color-success: #5f4126;               /* 차분한 톤 유지: 완료 안내도 갈색 계열 */

  /* 푸터는 두 테마 모두 어두운 바탕 */
  --color-footer-background: #1f2428;
  --color-footer-text: #d9d4cb;
  --color-footer-text-muted: #b5afa5;
  --color-footer-link: #fffdf9;

  /* --- 글꼴 --- */
  --font-family-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-family-heading: "Noto Serif KR", "Nanum Myeongjo", serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- 글자 크기: 기준 18px, 1.2배 스케일 (16px 미만은 쓰지 않음) --- */
  --font-size-sm: 1rem;          /* 16 */
  --font-size-base: 1.125rem;    /* 18 */
  --font-size-lg: 1.375rem;      /* 22 */
  --font-size-xl: 1.625rem;      /* 26 */
  --font-size-2xl: 2rem;         /* 32 */
  --font-size-3xl: 2.375rem;     /* 38 */
  --font-size-4xl: 2.875rem;     /* 46 */

  /* 줄 간격: 20px 미만 1.5 / 20~31px 1.4 / 32px 이상 1.25. 한글 본문만 1.7 */
  --line-height-body: 1.7;
  --line-height-tight: 1.5;
  --line-height-heading: 1.4;
  --line-height-display: 1.25;

  /* 역할별 글자 (semantic) */
  --text-display-size: clamp(var(--font-size-2xl), 7vw, var(--font-size-4xl));
  --text-heading-1-size: clamp(var(--font-size-xl), 4.5vw, var(--font-size-3xl));
  --text-heading-2-size: var(--font-size-lg);
  --text-lead-size: var(--font-size-lg);
  --text-body-size: var(--font-size-base);
  --text-supporting-size: var(--font-size-sm);

  /* --- 간격: 4px 단위 --- */
  --spacing-0: 0;
  --spacing-0-5: 0.125rem;  /* 2 */
  --spacing-1: 0.25rem;     /* 4 */
  --spacing-1-5: 0.375rem;  /* 6 */
  --spacing-2: 0.5rem;      /* 8 */
  --spacing-3: 0.75rem;     /* 12 */
  --spacing-4: 1rem;        /* 16 */
  --spacing-5: 1.25rem;     /* 20 */
  --spacing-6: 1.5rem;      /* 24 */
  --spacing-8: 2rem;        /* 32 */
  --spacing-10: 2.5rem;     /* 40 */
  --spacing-12: 3rem;       /* 48 */
  --spacing-16: 4rem;       /* 64 */
  --spacing-18: 4.5rem;     /* 72 */
  --spacing-24: 6rem;       /* 96 */

  /* --- 모양 --- */
  --radius-none: 0;
  --radius-element: 4px;
  --border-width: 1px;
  --border-width-emphasized: 2px;

  /* --- 컨트롤 크기: 터치 영역 최소 44px --- */
  --size-control-md: 2.75rem;   /* 44 */
  --size-control-lg: 3.5rem;    /* 56 */
  --size-checkbox: 1.375rem;

  /* --- 포커스 링 --- */
  --focus-outline-width: 2px;
  --focus-outline-style: solid;
  --focus-outline-color: var(--color-accent);
  --focus-outline-offset: 3px;

  /* --- 모션: 상태 변화에만 짧게. 장식용 움직임 없음 --- */
  --duration-fast: 175ms;
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);

  /* --- 레이아웃 --- */
  --measure: 40rem;             /* 본문 한 줄 길이 상한 */
  --container-max: 60rem;
  --gutter: var(--spacing-5);
  --header-height: 4rem;
}

/* --- 색: 어두운 화면 (밤에 급히 찾는 분들의 눈부심을 줄임) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background-body: #16191c;
    --color-background-muted: #1d2125;
    --color-background-surface: #23282c;
    --color-text-primary: #ece7df;
    --color-text-secondary: #b8b2a8;
    --color-text-disabled: #7a766f;
    --color-border: #3b4147;
    --color-border-input: #8a847a;
    --color-border-emphasized: #ece7df;
    --color-accent: #d6ab7e;
    --color-link: #e3c39f;
    --color-link-hover: #ece7df;
    --color-action: #ece7df;
    --color-action-hover: #d6ab7e;
    --color-on-action: #16191c;
    --color-overlay-hover: rgb(236 231 223 / 0.06);
    --color-error: #ff9585;
    --color-on-error: #16191c;
    --color-success: #e3c39f;

    --color-footer-background: #0e1012;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; }
}

@layer reset, base, components;

/* ================= reset ================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  /* display 를 지정한 요소(.pager 등)에서도 hidden 속성이 확실히 적용되도록 */
  [hidden] { display: none !important; }
  h1, h2, h3, h4, h5, p { margin: 0; }
}

/* ================= base ================= */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--spacing-4));
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    margin: 0;
    background: var(--color-background-body);
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    line-height: var(--line-height-body);
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4, h5 { line-height: var(--line-height-heading); font-weight: var(--font-weight-semibold); }
  p { margin-bottom: 1em; }

  a {
    color: var(--color-link);
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  a:hover { color: var(--color-link-hover); }

  :focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
  }

  .serif {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
  }
  .nowrap { white-space: nowrap; }

  .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  .skip-link {
    position: absolute;
    left: var(--spacing-4);
    top: calc(-1 * var(--spacing-16));
    background: var(--color-action);
    color: var(--color-on-action);
    padding: var(--spacing-2) var(--spacing-4);
    z-index: 100;
  }
  .skip-link:focus { top: var(--spacing-2); }
}

/* ================= components ================= */
@layer components {

  /* ---------- 헤더 ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-background-body);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    min-height: var(--header-height);
  }
  .logo {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
  }
  .header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
  }
  .btn-call {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: var(--size-control-md);
    padding: 0 var(--spacing-4);
    background: var(--color-action);
    color: var(--color-on-action);
    border-radius: var(--radius-element);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }
  .btn-call:hover { background: var(--color-action-hover); color: var(--color-on-action); }
  .btn-call-number { display: none; }

  .menu-toggle {
    min-height: var(--size-control-md);
    padding: 0 var(--spacing-3);
    background: transparent;
    border: var(--border-width) solid var(--color-border-input);
    border-radius: var(--radius-element);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--text-supporting-size);
    cursor: pointer;
  }
  .menu-toggle:hover { background: var(--color-overlay-hover); }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-background-body);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { list-style: none; margin: 0; padding: var(--spacing-2) var(--gutter) var(--spacing-4); }
  .site-nav a {
    display: block;
    padding: var(--spacing-3) 0;
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: var(--border-width) solid var(--color-background-muted);
  }
  .site-nav a:hover { color: var(--color-link); }

  @media (min-width: 60rem) {
    .menu-toggle { display: none; }
    .btn-call-number { display: inline; }
    .site-nav {
      display: block;
      position: static;
      border: 0;
      background: none;
      margin-left: var(--spacing-6);
    }
    .site-nav ul { display: flex; gap: var(--spacing-6); padding: 0; }
    .site-nav a { border: 0; padding: var(--spacing-2) 0; font-size: var(--text-supporting-size); }
  }

  /* ---------- 공통 섹션 ---------- */
  .section { padding: var(--spacing-18) 0; }
  .section-alt { background: var(--color-background-muted); }
  .section-title {
    font-size: var(--text-heading-1-size);
    line-height: var(--line-height-display);
    margin-bottom: var(--spacing-5);
  }
  .section-desc { color: var(--color-text-secondary); max-width: var(--measure); margin-bottom: var(--spacing-10); }
  .sub-title { font-size: var(--text-heading-2-size); margin: var(--spacing-12) 0 var(--spacing-4); }
  .prose { max-width: var(--measure); }
  .note {
    color: var(--color-text-secondary);
    font-size: var(--text-supporting-size);
    line-height: var(--line-height-body);
    max-width: var(--measure);
    margin-top: var(--spacing-5);
  }

  /* ---------- 버튼 ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-height: var(--size-control-lg);
    padding: 0 var(--spacing-6);
    border-radius: var(--radius-element);
    border: var(--border-width) solid var(--color-action);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }
  .btn-primary { background: var(--color-action); color: var(--color-on-action); }
  .btn-primary:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-on-action);
  }
  .btn-secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-emphasized); }
  .btn-secondary:hover { background: var(--color-overlay-hover); color: var(--color-text-primary); }
  /* 비활성은 투명도만이 아니라 커서·상태로도 구분 */
  .btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .btn[aria-busy="true"] { cursor: progress; }
  .btn-text {
    background: none;
    border: 0;
    padding: var(--spacing-2) var(--spacing-3);
    font: inherit;
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    min-height: var(--size-control-md);
  }
  .btn-text:disabled { color: var(--color-text-disabled); text-decoration: none; cursor: default; }

  /* ---------- 첫 화면 ---------- */
  .hero { padding: var(--spacing-16) 0 var(--spacing-18); border-bottom: var(--border-width) solid var(--color-border); }
  .eyebrow {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-supporting-size);
    margin-bottom: var(--spacing-4);
  }
  .hero h1 {
    font-size: var(--text-display-size);
    line-height: var(--line-height-display);
    margin-bottom: var(--spacing-6);
  }
  .lead {
    font-size: var(--text-lead-size);
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 36rem;
    margin-bottom: var(--spacing-8);
  }
  .hero-actions { display: flex; flex-direction: column; gap: var(--spacing-3); max-width: 26rem; }
  .hours { margin-top: var(--spacing-5); color: var(--color-text-secondary); font-size: var(--text-supporting-size); }
  @media (min-width: 40rem) {
    .hero { padding: var(--spacing-24) 0; }
    .hero-actions { flex-direction: row; max-width: none; }
  }

  /* ---------- 비교표 ---------- */
  .table-wrap { overflow-x: auto; margin-top: var(--spacing-10); }
  .compare {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--text-supporting-size);
    line-height: var(--line-height-tight);
  }
  .compare caption {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    padding-bottom: var(--spacing-3);
    font-size: var(--text-body-size);
  }
  .compare th, .compare td {
    text-align: left;
    vertical-align: top;
    padding: var(--spacing-4) var(--spacing-3);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .compare thead th {
    border-bottom: var(--border-width-emphasized) solid var(--color-border-emphasized);
    font-weight: var(--font-weight-semibold);
  }
  .compare tbody th { font-weight: var(--font-weight-semibold); white-space: nowrap; width: 7rem; }
  .compare td:nth-child(2) { background: var(--color-background-surface); }

  /* ---------- 타임라인 ---------- */
  .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 42rem;
    counter-reset: step;
  }
  .timeline li {
    position: relative;
    padding: 0 0 var(--spacing-10) var(--spacing-12);
    counter-increment: step;
  }
  .timeline li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: var(--spacing-0-5);
    width: var(--spacing-8);
    height: var(--spacing-8);
    display: grid;
    place-items: center;
    background: var(--color-background-muted);
    border: var(--border-width) solid var(--color-border-emphasized);
    font-size: var(--text-supporting-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
  }
  .timeline li::after {
    content: "";
    position: absolute;
    left: calc(var(--spacing-4) - 0.5px);
    top: calc(var(--spacing-8) + var(--spacing-1));
    bottom: var(--spacing-1);
    border-left: var(--border-width) solid var(--color-border);
  }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline li:last-child::after { display: none; }
  .timeline-when {
    color: var(--color-accent);
    font-size: var(--text-supporting-size);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1);
  }
  .timeline h3 { font-size: var(--text-heading-2-size); margin-bottom: var(--spacing-2); }
  .timeline p:last-child { margin-bottom: 0; }

  /* ---------- 비용 ---------- */
  .price-list { display: grid; gap: var(--spacing-8); }
  @media (min-width: 44rem) { .price-list { grid-template-columns: 1fr 1fr; gap: var(--spacing-12); } }
  .price-item {
    border-top: var(--border-width-emphasized) solid var(--color-border-emphasized);
    padding-top: var(--spacing-5);
  }
  .price-item h3 { font-size: var(--text-heading-2-size); }
  .price-amount {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-1) 0 var(--spacing-4);
  }
  .price-item ul, .plain-list { margin: 0; padding-left: var(--spacing-5); }
  .price-item li, .plain-list li { margin-bottom: var(--spacing-1-5); }
  .plain-list { max-width: 42rem; }

  /* ---------- FAQ (접고 펼치기) ---------- */
  .faq { max-width: 44rem; border-top: var(--border-width) solid var(--color-border-emphasized); }
  .faq details { border-bottom: var(--border-width) solid var(--color-border); }
  .faq summary {
    list-style: none;
    cursor: pointer;
    min-height: var(--size-control-lg);
    padding: var(--spacing-5) var(--spacing-10) var(--spacing-5) 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    position: relative;
  }
  .faq summary:hover { background: var(--color-overlay-hover); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    position: absolute;
    right: var(--spacing-1);
    top: var(--spacing-5);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: 1;
    color: var(--color-accent);
  }
  .faq details[open] summary::after { content: "\2212"; }
  .faq-body { padding: 0 0 var(--spacing-5); color: var(--color-text-secondary); }
  .faq-body p:last-child { margin-bottom: 0; }

  /* ---------- 게시판 ---------- */
  .board-list { max-width: 44rem; border-top: var(--border-width) solid var(--color-border-emphasized); }
  .post-list { list-style: none; margin: 0; padding: 0; }
  .post-list > li { border-bottom: var(--border-width) solid var(--color-border); }
  .post-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-1) var(--spacing-4);
    width: 100%;
    min-height: var(--size-control-lg);
    padding: var(--spacing-4) 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .post-row:hover { background: var(--color-overlay-hover); }
  .post-row:hover .post-title { text-decoration: underline; text-underline-offset: 3px; }
  .post-no { color: var(--color-text-secondary); font-size: var(--text-supporting-size); min-width: var(--spacing-10); }
  .post-title { flex: 1 1 auto; }
  .post-date { color: var(--color-text-secondary); font-size: var(--text-supporting-size); }
  .post-badge {
    font-size: var(--text-supporting-size);
    line-height: var(--line-height-tight);
    padding: 0 var(--spacing-2);
    border: var(--border-width) solid var(--color-accent);
    color: var(--color-link);
    border-radius: var(--radius-element);
    white-space: nowrap;
  }
  .post-panel { padding: 0 0 var(--spacing-6); }
  .post-panel .inline-form { display: flex; flex-wrap: wrap; gap: var(--spacing-2); align-items: flex-end; }
  .post-panel .inline-form .field { margin: 0; flex: 1 1 12rem; }
  .post-panel .btn { min-height: var(--size-control-md); }
  .post-view {
    background: var(--color-background-surface);
    border-left: 3px solid var(--color-border-emphasized);
    padding: var(--spacing-5);
  }
  .post-view h4 { margin: 0 0 var(--spacing-1); font-size: var(--text-heading-2-size); }
  .post-view .meta { color: var(--color-text-secondary); font-size: var(--text-supporting-size); margin-bottom: var(--spacing-4); }
  .post-view .body { white-space: pre-wrap; margin-bottom: 0; }
  .post-reply {
    margin-top: var(--spacing-5);
    padding-top: var(--spacing-5);
    border-top: var(--border-width) dashed var(--color-border);
  }
  .post-reply h5 { margin: 0 0 var(--spacing-2); font-size: var(--text-body-size); color: var(--color-link); }
  .post-reply .body { white-space: pre-wrap; margin: 0; }
  .board-status { color: var(--color-text-secondary); padding: var(--spacing-4) 0; margin: 0; }
  .board-status:empty { display: none; }
  .pager { display: flex; align-items: center; justify-content: center; gap: var(--spacing-4); padding: var(--spacing-4) 0; }

  /* ---------- 폼 필드: 라벨 → 입력 → 도움말 → 오류 (aria-describedby 로 연결) ---------- */
  .form { max-width: 36rem; }
  .field { margin-bottom: var(--spacing-6); }
  .field label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1-5);
  }
  .field input, .field textarea {
    width: 100%;
    min-height: var(--size-control-lg);
    padding: var(--spacing-3) var(--spacing-4);
    font: inherit;
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    background: var(--color-background-surface);
    border: var(--border-width) solid var(--color-border-input);
    border-radius: var(--radius-element);
    transition: border-color var(--duration-fast) var(--ease-standard);
  }
  .field textarea { resize: vertical; min-height: 10rem; line-height: var(--line-height-body); }
  .field input:focus, .field textarea:focus { border-color: var(--color-border-emphasized); }
  /* 오류는 색만으로 구분하지 않음: 테두리를 두껍게 + 아래 오류 문장 */
  .field [aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
  }
  .hint {
    color: var(--color-text-secondary);
    font-size: var(--text-supporting-size);
    line-height: var(--line-height-tight);
    margin: var(--spacing-1-5) 0 0;
  }
  .field-error {
    color: var(--color-error);
    font-size: var(--text-supporting-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: var(--spacing-1-5) 0 0;
  }
  .field-error:empty { display: none; }
  .consent .field-error { margin-top: var(--spacing-2); }

  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .consent {
    margin: var(--spacing-8) 0 var(--spacing-5);
    padding: var(--spacing-5);
    border: var(--border-width) solid var(--color-border);
    background: var(--color-background-surface);
    font-size: var(--text-supporting-size);
  }
  .consent legend { font-weight: var(--font-weight-semibold); padding: 0 var(--spacing-2); font-size: var(--text-body-size); }
  .consent ul { margin: 0 0 var(--spacing-3); padding-left: var(--spacing-5); }
  .check {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: var(--size-control-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    font-size: var(--text-body-size);
  }
  .check input {
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    accent-color: var(--color-action);
    flex: none;
  }

  .turnstile { min-height: 65px; margin-bottom: var(--spacing-4); }
  .form-status { min-height: 1.75em; margin-bottom: var(--spacing-3); font-weight: var(--font-weight-semibold); }
  .form-status.is-error { color: var(--color-error); }
  .form-status.is-ok { color: var(--color-success); }
  .form .btn-primary { width: 100%; }
  @media (min-width: 40rem) { .form .btn-primary { width: auto; min-width: 12rem; } }

  /* ---------- 푸터 ---------- */
  .site-footer {
    background: var(--color-footer-background);
    color: var(--color-footer-text);
    padding: var(--spacing-12) 0 var(--spacing-16);
    font-size: var(--text-supporting-size);
    border-top: var(--border-width) solid var(--color-border);
  }
  .site-footer a { color: var(--color-footer-link); }
  /* 어두운 바탕에서는 갈색 포커스 링 대비가 낮아 밝은 색으로 */
  .site-footer :focus-visible { outline-color: var(--color-footer-link); }
  .footer-logo { font-size: var(--font-size-lg); color: var(--color-footer-link); margin-bottom: var(--spacing-5); }
  .biz-info { margin: 0 0 var(--spacing-5); }
  .biz-info div { display: flex; gap: var(--spacing-3); }
  .biz-info dt { min-width: 7.5rem; color: var(--color-footer-text-muted); }
  .biz-info dd { margin: 0; }
  .footer-links { margin-bottom: var(--spacing-2); }
  .copyright { color: var(--color-footer-text-muted); margin: 0; }

  /* ---------- 개인정보처리방침 등 문서 페이지 ---------- */
  .doc { padding: var(--spacing-12) 0 var(--spacing-24); }
  .doc h1 { font-size: var(--text-heading-1-size); line-height: var(--line-height-display); margin-bottom: var(--spacing-6); }
  .doc h2 { font-size: var(--text-heading-2-size); margin: var(--spacing-10) 0 var(--spacing-3); }
  .doc .prose ul { padding-left: var(--spacing-5); }
  .doc table { border-collapse: collapse; width: 100%; font-size: var(--text-supporting-size); line-height: var(--line-height-tight); }
  .doc th, .doc td {
    border: var(--border-width) solid var(--color-border);
    padding: var(--spacing-3);
    text-align: left;
    vertical-align: top;
  }

  @media print {
    .site-header, .skip-link { position: static; }
    .btn-call, .menu-toggle { display: none; }
  }
}