@charset "UTF-8";
/* ==========================================================================
   송골농원 공통 디자인 시스템 (site.css)
   - 모바일 퍼스트, 브레이크포인트 640px / 1024px
   - 외부 폰트/이미지 CDN 사용 금지 (시스템 폰트 스택만 사용)
   - 페이지별 스타일은 /css/pages/*.css 에서 각 담당이 확장한다
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
    /* 브랜드 컬러 (원본 색 계승) */
    --color-primary: #dc2626;        /* 목업 주색 = 사과 빨강(red-600). 흰 글자 4.83:1 */
    --color-primary-dark: #b91c1c;   /* hover · 옅은 빨강 위 글자(6.47:1) */
    --color-primary-light: #fef2f2;
    --color-accent: #dc2626;         /* 가격도 주색과 같은 사과 빨강(목업) */
    --color-accent-light: #fee2e2;
    --color-tint: #fffbeb;           /* 호박색 옅은 바탕(amber-50) — 안내 상자 */
    --color-warm: #d97706;           /* 호박색(amber-600). 장식(선·아이콘) 전용 */
    --color-warm-text: #b45309;      /* 위 색의 글자용(amber-700). 흰 바탕 5.02:1 · 옅은 호박 4.84:1 */
    --color-text: #1f2937;
    /* ★ 2026-09-25 #6b7280 → #4b5563. 옛 값은 흰 바탕 4.83 이었지만 옅은 회색(#f3f4f6) · 분홍(#fef2f2) 면 위에서
         4.39~4.42 로 AA(4.5)에 못 미쳤다(표 머리 '번호', 규격 값, 인증번호 줄). 어르신이 주 손님이라 AAA(7) 를 기준으로 삼는다. */
    --color-text-muted: #4b5563;     /* 흰 바탕 7.56:1 · 바닥 7.23:1 · 옅은 회색 6.87:1 */
    /*
      선 두 단계.

      ★ 예전에는 #e3e0d8 하나였다. 그때 바닥(#fbfaf6) 대비 1.26:1 — 사실상 안 보이는 선이었다.
        91곳에 쓰이면서 아무 데서도 경계 노릇을 못 하고 있었다.
        안 보이는 선은 장식도 아니다. 자리만 차지한다.

      ★★ 왜 두 단계로 나누나
        전부 3:1 로 올리면 카드마다 회색 윤곽이 둘려 화면이 와이어프레임처럼 보인다.
        그런데 WCAG 1.4.11(비텍스트 대비 3:1)이 실제로 요구하는 것은
        <조작하는 부품> 이다 — 입력칸·선택칸·글상자. 카드 윤곽은 장식이다.
        그래서 일상선과 부품선을 나눈다. 선의 굵기가 곧 <여기는 만지는 곳> 이라는 뜻이 된다.

      ★★★ 대비 (본문 배경 #ECEFEA 기준 / 흰 면 기준)
        --color-border        1.19 / 1.24  — 목업처럼 옅은 장식선(카드는 그림자가 경계를 맡는다)
        --color-border-strong 3.17 / 3.33  — 부품 기준 3:1 통과

      ★★★★ 2026-09-24 농원주가 준 목업(빨강 · 호박 · 회색) 팔레트로 값을 바꿨다. 이름은 그대로라 모든 화면이 따라온다.
    */
    --color-border: #e5e7eb;
    --color-border-strong: #868e99;
    --color-surface: #ffffff;
    --color-bg: #f9fafb;

    /* 상태 컬러 */
    --color-danger: #b91c1c;
    --color-success: #15803d;

    /* 타이포그래피 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard",
        "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    /*
      ★ 어르신이 주 사용자다. 그래서 본문을 17px 에서 시작한다.
        예전 스케일은 본문 15px, 보조 13px, 캡션 12px 이었다 — 실측해 보니
        상품 카드의 한 줄 요약(13px)과 정렬 버튼(13px)이 특히 읽기 어려웠다.
        모바일 기준으로 12~13px 은 팔을 뻗어 드는 거리에서 사실상 안 읽힌다.

      ★★ 크기만 키우면 위계가 무너진다. 실측에서 h1 22px, h2 23px 로
        <h2 가 h1 보다 큰> 상태였다. 아래 스케일은 인접 단계가 최소 1.15배,
        본문→섹션 제목→페이지 제목의 핵심 세 단계는 1.25배 이상 벌어지게 잡았다.
        (역할별 적용은 이 파일 아래 '타입 위계' 블록에서 한다.)

      ★★★ rem 기준이라 손님이 브라우저 글자 크기를 키우면 그대로 따라 커진다.
        px 로 박으면 그 설정이 무시된다 — 어르신이 실제로 쓰는 기능이다.
    */
    /* ★ 2026-09-25 바닥을 올렸다(13 → 15, 15 → 16). 주 손님이 어르신이다 — 휴대폰 본문은 16px 아래로 내리지 않는다. */
    --font-size-xs: 0.9375rem;  /* 15px  캡션·법적 고지. 이보다 작게 쓰지 마라 */
    --font-size-sm: 1rem;       /* 16px  보조 설명 */
    --font-size-base: 1.0625rem;/* 17px  본문 기본 */
    --font-size-md: 1.1875rem;  /* 19px  입력칸·버튼 글자 */
    --font-size-lg: 1.375rem;   /* 22px  카드 제목·소제목 */
    --font-size-xl: 1.75rem;    /* 28px  섹션 제목(h2) */
    --font-size-2xl: 2.125rem;  /* 34px  페이지 제목(h1) */
    --font-size-3xl: 2.625rem;  /* 42px  히어로 */
    --line-height-base: 1.7;
    --line-height-tight: 1.35;

    /*
      읽기 폭. 실측에서 본문이 한 줄 106~109자였다 —
      눈이 다음 줄 첫머리를 되찾지 못해 같은 줄을 두 번 읽게 되는 폭이다.
      한글은 라틴 문자보다 글자당 정보량이 커서 65ch 가 더 좁게 느껴지므로 72ch 로 둔다.
    */
    --measure: 72ch;

    /*
      누를 수 있는 것의 최소 높이.
      WCAG 최소치는 44px 이지만, 손끝이 무디거나 손이 떨리는 분에게는 부족하다.
      내비게이션·버튼·정렬처럼 <눌러서 이동하는> 것은 전부 이 값을 지킨다.
      (본문 중간의 인라인 링크는 예외다 — 글 흐름을 끊지 않는 것이 더 중요하다.)
    */
    --tap-min: 48px;

    /* 간격 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* 레이아웃 */
    --container-max: 1200px;
    --container-pad: 16px;
    --sidebar-width: 240px;
    --header-height: 76px;   /* 헤더 본체: 상하 14px + 48px 버튼 (--tap-min) */
    /*
      ★ 화면에 고정돼 있는 <머리 전체>의 높이. 위 --header-height 는 <본체>만이다.
        앵커(#products, #order)가 멈출 자리를 정하는 값은 본체가 아니라 이것이다 —
        72px 을 근거로 80px 을 쓰던 동안, 내부 링크로 이동하면 섹션 제목이 40px 잘려 있었다.

        실측(브라우저): 유틸 바 49 + 본체 76 = 126px.
        360 / 768 / 1280px 폭에서 셋 다 126 으로 같았다.

      ★★ 2026-09-20 에 122~124 에서 126 으로 바뀌었다.
        헤더 버튼(로고·햄버거·구매하기)이 44px 이라 --tap-min(48px) 을 어기고 있어서
        48 로 올렸고, 본체가 73.5 → 76 으로 따라 자랐다.
        이 값을 안 따라 올리면 앵커로 이동할 때 제목이 2px 씩 가려진다 —
        <버튼 크기를 건드리면 반드시 여기도 다시 재라.>
    */
    --header-stack: 126px;

    /* 형태 */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 10px 25px -5px rgba(15, 23, 42, .08), 0 8px 10px -6px rgba(15, 23, 42, .04);
    --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .18);

    /* z-index
       헤더는 시안 계약(HOME_SPEC §8)대로 40. 고정 상담 독이 50 이라 독이 헤더 위로 뜬다.
       드롭다운/모바일 패널 값은 헤더가 만드는 스택 컨텍스트 '안'에서의 순서라 그대로 둔다. */
    --z-header: 40;
    --z-dock: 50;
    /* ★ 고정 구매바는 상담 독보다 위다.
       독(50)이 화면 오른쪽 아래에 떠 있는데 구매바가 그보다 아래에 있으면,
       '바로 구매' 버튼 자리를 독이 덮어 <눌러도 눌리지 않는다>.
       화면에는 버튼이 멀쩡히 보이므로 원인을 찾기 어려운 종류의 고장이다. */
    --z-buybar: 60;
    --z-dropdown: 120;
    --z-mobile-nav: 130;
    --z-skip: 200;

    /* 전환 */
    --transition: .18s ease;

    /* ----------------------------------------------------------------------
       어두운 면 (푸터 · 히어로)

       ★ 왜 새로 두는가
         원래 --color-* 체계에는 <어두운 배경 위에 쓰는 색>이 없었다. 그래서 푸터가
         Tailwind stone 팔레트를 따로 들여와 썼고, 그게 색 체계가 둘로 갈라진 출발점이다.
         역할 이름으로 네 개만 둔다 — 면, 그 위의 선, 그 위의 본문, 그 위의 보조문.

       ★★ 값은 이 농원 글자색(#23241f)과 같은 색상 계열에서 뽑았다.
         Tailwind stone 은 갈색기가 도는 따뜻한 회색이라, 이 사이트의 본문 색과 나란히 두면
         두 회색이 서로 다른 집안처럼 보인다. 여기서는 한 집안으로 맞춘다.

       ★★★ 대비는 계산해서 정했다 (어두운 면 #1e1f1a 기준)
         본문 12.04:1 · 보조문 6.99:1 · 선 2.35:1(장식).
         선은 예전에 stone-800 on stone-900 으로 1.15:1 이었다 — 아무에게도 안 보이는 선이었다.
         안 보이는 선은 구분을 못 한다.
       ---------------------------------------------------------------------- */
    --color-dark: #111827;
    --color-dark-line: #4b5563;
    --color-dark-text: #d1d5db;
    --color-dark-muted: #9ca3af;

    /*
      사과 빨강의 나머지 두 자리.

      ★ 예전에는 주 CTA 가 Tailwind red-600(#dc2626) 이었다. 흰 글자가 4.83:1 이다.
        이 농원이 원래 쓰던 사과 빨강(--color-accent #991f1e)은 같은 자리에서 8.17:1 이다.
        색을 하나로 모으면서 대비도 같이 올라간다 — 야외에서 보시는 분에게는 이게 크다.
    */
    --color-accent-dark: #991b1b;      /* CTA hover. 흰 글자 8.3:1 */
    --color-accent-on-dark: #fca5a5;   /* 어두운 면 위 강조. 9.35:1 */

    /* 브랜드 색 — 카카오·네이버 모두 버튼 색 변경을 금지한다. 바꾸지 말 것. */
    --color-kakao-bg: #fee500;
    --color-kakao-fg: #3c1e1e;
    /*
      네이버 초록.

      ★ 브랜드 원색은 #03c75a 인데, 그 위의 흰 글자는 대비 2.25:1 로 WCAG AA(4.5:1)에
        한참 못 미친다. 밝은 초록 위의 흰 글자는 실제로 밖에서 보면 글자가 날아간다 —
        어르신이 야외에서 휴대폰을 보는 상황이 이 농원 손님의 기본값이다.

      그래서 <색상(hue)은 그대로 두고 명도만> 내렸다(원색의 68%). 4.63:1 로 AA 를 넘기면서
        여전히 '네이버 초록' 으로 읽힌다. 아이콘 모양과 버튼 형태가 브랜드를 이미 말해 준다.
      원색이 필요한 자리(테두리·아이콘 등 큰 면적이 아닌 곳)는 --color-naver-brand 를 쓴다.
    */
    --color-naver-bg: #02873d;
    --color-naver-brand: #03c75a;
    --color-naver-fg: #ffffff;

    /*
      섹션 세로 여백. 홈이 쓰던 --c-section-pad 를 이름만 옮겼다.
      640px 이상에서 6rem 으로 바뀐다(아래 미디어쿼리).
    */
    --section-pad: 5rem;

    /* 우하단 상담 독 전용 그림자. --shadow-lg 보다 진해야 사진 위에서 떠 보인다. */
    --shadow-dock: 0 10px 15px -3px rgb(30 31 26 / .25);
}

/* 섹션 여백은 640px 이상에서 96px 로 커진다 */
@media (min-width: 640px) {
    :root {
        --section-pad: 6rem;   /* 96px */
    }
}

/* --------------------------------------------------------------------------
   2. 리셋 / 기본 요소
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/*
  ★ hidden 속성이 실제로 숨기게 만든다.
    브라우저 기본 스타일은 [hidden] { display: none } 인데, 이건 <작성자 규칙에 진다>.
    그래서 .form-grid { display: grid } 같은 클래스가 붙어 있으면 JS 로 hidden 을 켜도
    화면에서는 그대로 보인다 — DOM 속성은 true 인데 눈에는 보이는, 알아채기 어려운 상태다.
    (실제로 '받는 분이 주문자와 같습니다' 를 만들다 여기서 한 번 걸렸다.)
*/
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    word-break: keep-all;      /* 한국어 어절 단위 줄바꿈 */
    overflow-wrap: anywhere;   /* 긴 URL 로 인한 가로 스크롤 방지 */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
    font-weight: 700;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
picture,
video {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

address {
    font-style: normal;
}

/* --------------------------------------------------------------------------
   3. 접근성
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 스크린리더 전용 텍스트 */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 본문 바로가기 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-skip);
    /* 45px 이었다. 이 링크를 쓰는 사람은 키보드나 보조기기를 쓰는 사람이라
       과녁이 작으면 가장 곤란한 쪽이다. --tap-min 을 여기서 어길 이유가 없다. */
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: #fff;
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   4. 레이아웃
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* 시안 래퍼 (HOME_SPEC §8).
   .container(1200px)와 별개다 — 시안은 1152px + 좌우 20px 이다.
   홈·헤더·푸터가 이걸 쓰고, 서브페이지는 기존 .container 를 그대로 쓴다. */
.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.site-main {
    display: block;
    min-height: 40vh;
}

/* 스킵 링크용 tabindex="-1" 때문에 클릭 시 포커스 링이 뜨는 것을 막는다
   (키보드 사용자는 스킵 링크 자체의 포커스 링으로 위치를 이미 인지한다) */
.site-main:focus {
    outline: none;
}

/* 서브페이지 wrapper */
.page {
    display: block;
    padding-block: var(--space-6) var(--space-10);
}

/* 사이드바 + 본문 그리드 */
.page__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* 그리드 자식 blowout 방지 */
.page__layout > * {
    min-width: 0;
}

/* 사이드바가 렌더되지 않은 경우 본문이 전체 폭 사용 */
.page__layout > .page__body:only-child {
    grid-column: 1 / -1;
}

.page__body {
    display: block;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   4.1 섹션 (시안 계약 / 서브페이지 하위호환)

   .section 은 1단계에서 '서브페이지 본문 안의 블록 간격' 이었고,
   지금은 시안의 '화면 폭 전체 섹션(상하 80/96px)' 이기도 하다. 이름이 겹친다.
   기존 마크업(product/detail.html, member/mypage.html, member/orders.html)은 전부
   <main class="page"> 안에 있으므로, .page 안쪽에서만 옛 의미로 되돌려 둘 다 살린다.
   -------------------------------------------------------------------------- */
.section {
    padding-block: var(--section-pad);
    margin-bottom: 0;
    /* sticky 헤더에 앵커가 가리지 않게 (HOME_SPEC §9).
       ★ 80px 을 손으로 적어 두지 않는다. 헤더 높이는 토큰 하나(--header-stack)에서만 나온다 —
         이 값과 home.css 에 80px 이 따로 적혀 있던 동안, 한쪽만 고쳐 다시 어긋났다. */
    scroll-margin-top: calc(var(--header-stack) + var(--space-4));
}

/* 연회색 배경 섹션 (주문 방법 / FAQ) */
.section--tint {
    background: var(--color-tint);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/*
  섹션 이정표.

  ★ 이건 <아이브로우 라벨> 이 아니다 — 그 차이가 중요하다.
    제목마다 기계적으로 붙는 라벨은 읽을 거리만 늘린다. 2026-09-20 에 셋을 지웠다:
    "농원 소식" 위에 "농원에서 전하는 소식" 이 있었고, "자주 묻는 질문" 위에
    "전화로 자주 받는 질문입니다" 가 있었다. 같은 말을 두 번 한 것이다.
    남긴 셋(사과 고르기 · 농원 이야기 · 오시는 길)은 제목이 말하지 않는 것을 말한다.

  ★★ 자리를 바꿨다. 제목 <위>가 아니라 <옆>이다(1024px 이상).
    책의 난외주처럼 본문 바깥에 서서, 지금 어느 장인지만 알려 준다.
    제목 위에 얹혀 있으면 제목을 읽기 전에 반드시 지나가야 하는 글이 된다.
    좁은 화면에서는 옆에 설 자리가 없으므로 위로 돌아가되, 색을 브랜드 초록에서
    보조문 회색으로 내렸다 — 초록은 이 사이트에서 <누를 수 있는 것> 의 색이다.
*/
.section__label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* 본문 1520px와 양쪽 라벨 공간이 확보되면 라벨을 제목 왼쪽 바깥에 둔다. */
@media (min-width: 1728px) {
    .section__label {
        position: absolute;
        transform: translateX(-100%);
        padding-right: var(--space-6);
        margin-top: .5rem;
        text-align: right;
        white-space: nowrap;
    }

    .section__label + .section__title {
        margin-top: 0;
    }
}

/*
  섹션 제목(h2).

  ★ 예전에는 1.875rem(30px) 하드코딩이었다. 그래서 실측하면 <h2 30px 가 h1 22px 보다 컸다> —
    페이지 제목보다 섹션 제목이 큰 상태라 눈이 어디부터 읽어야 할지 매번 다시 판단해야 했다.
    토큰으로 되돌리고, 페이지 제목보다 항상 한 단계 아래에 오게 묶는다.

  ★★ 카드 제목(h3, 22px)과 충돌하지 않아야 한다.
    한 번 섹션 제목을 22px 로 내렸다가 상품 카드 제목과 같아진 적이 있다 —
    섹션 제목이 <그 아래 카드들을 이끌지 못하는> 상태가 되어, 눈이 어디가 묶음의
    머리인지 판단하지 못했다. 카드가 곧 본문인 페이지라 이 충돌이 특히 아프다.

  위계(실측 기준):
    모바일  본문 17 → 카드 22 (1.29배) → 섹션 28 (1.27배) → 페이지 34 (1.21배)
    데스크톱 본문 17 → 카드 22 (1.29배) → 섹션 34 (1.55배) → 페이지 42 (1.24배)
*/
.section__title {
    margin-top: .75rem;
    font-size: var(--font-size-xl);
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--color-text);
}

@media (min-width: 640px) {
    .section__title {
        font-size: var(--font-size-2xl);
    }
}

.section__lead {
    margin-top: 1.25rem;
    max-width: 42rem;
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-muted);
}

/* 서브페이지 하위호환: .page 안에서는 1단계 의미(본문 블록 간격 + 밑줄 제목)를 유지한다.
   여기를 지우면 상품상세·마이페이지·주문조회 제목이 전부 깨진다. */
.page .section {
    padding-block: 0;
    margin-bottom: var(--space-10);
    scroll-margin-top: 0;
}

.page .section__title {
    margin-top: 0;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    letter-spacing: normal;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
}

@media (min-width: 640px) {
    :root {
        --container-pad: 20px;
    }

    .section__title {
        font-size: 2.25rem;    /* 36px */
    }

    .page .section__title {
        font-size: var(--font-size-lg);
    }

    .page {
        padding-block: var(--space-8) var(--space-12);
    }
}

@media (min-width: 1024px) {
    .page__layout {
        grid-template-columns: var(--sidebar-width) 1fr;
        gap: 40px;
    }
}

/* --------------------------------------------------------------------------
   5. 헤더
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    /* 시안: 흰 배경 95% + 배경 블러. 스크롤할 때 아래 사진이 비쳐 보인다. */
    background: rgb(255 255 255 / .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}

/* backdrop-filter 미지원 브라우저에서는 반투명 배경이 그대로 비쳐 글자가 읽히지 않는다.
   그때만 불투명 흰색으로 되돌린다. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .site-header {
        background: #fff;
    }
}

/* 5.1 상단 유틸 바 — 시안에는 없지만 로그인/회원 메뉴가 있어야 해서 유지한다.
   시안 톤에 맞춰 크림색 띠를 걷어내고 얇은 구분선만 남긴다. */
.site-header__utility {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
}

.util-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    min-height: 32px;
}

/*
  세로 패딩이 4px 뿐이라 손가락으로 누르기 어려웠다(로그인·마이페이지가 여기 있다).
  띠 자체를 키우지 않으면서 누를 수 있는 넓이만 좌우로 벌린다.
*/
.util-nav__link {
    display: inline-flex;
    align-items: center;
    /* 실측 32px 였다. 로그인·회원가입이 여기 있는데 화면 맨 위 구석이라
       조준이 가장 어려운 자리다. --tap-min 근거는 파일 상단 토큰 주석 참고. */
    min-height: var(--tap-min);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
}

.util-nav__link:hover,
.util-nav__link:focus-visible {
    color: var(--color-text);
}

/* 5.2 헤더 본체 — 시안: 좌우 정렬, 상하 14px */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 14px;
    position: relative;
}

/*
  ★ 로고는 홈으로 가는 링크다. 과녁 높이가 32px 이었다 — 그림 높이를 그대로 물려받은 값이다.
    그림은 32px 그대로 두고 <누를 수 있는 넓이만> 48px 로 키운다.
    로고를 눌러 홈으로 가는 건 어르신이 길을 잃었을 때 제일 먼저 하는 행동이다.
*/
.site-header__logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    gap: 10px;
    flex: 0 0 auto;
}

/* 시안은 폭에 관계없이 로고 높이를 32px 로 고정한다 */
.site-header__logo img {
    display: block;
    width: auto;
    height: 32px;
}

/* 헤더 우측 주 CTA 알약 버튼 (HOME_SPEC §3.2 / §8).
   ★ 이름이 .btn-call 이었다. 오래 '주문 전화' 였기 때문인데, 지금은 상품 목록으로 간다.
     선택자 이름이 옛 행동을 말하고 있으면 다음 사람이 그 이름을 믿고 전화 관련 규칙을 여기 얹는다. */
.btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: 0 0 auto;
    /* 44px 이었다. 이 사이트에서 가장 중요한 버튼이 --tap-min 을 안 지키고 있었다. */
    min-height: var(--tap-min);
    padding: 10px 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    transition: background-color var(--transition);
}

.btn-buy:hover,
.btn-buy:focus-visible {
    background: var(--color-accent-dark);
    color: #fff;
}

.btn-buy svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* 좁은 화면에서는 "구매", 640px 이상에서는 "구매하기" 로 라벨을 바꾼다(시안 동작). */
.btn-buy__label {
    display: none;
}

.btn-buy__label--short {
    display: inline;
}

/* 헤더 전화번호 */
.site-header__tel {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex: 0 0 auto;
}

.site-header__tel-label {
    font-size: var(--font-size-xs);
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}

.site-header__tel-number {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
}

/* 5.3 햄버거 버튼 (모바일 전용)
   ★ 44x44 였다. --tap-min 은 48 이다.
     안쪽 여백을 10 → 12 로 같이 올려 줄(bar) 폭은 24px 그대로 둔다 —
     과녁만 커지고 보이는 모양은 안 변한다. */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 12px;
    margin-right: -12px;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 5.4 데스크톱 GNB (기본은 숨김) */
.gnb {
    display: none;
}

.gnb__list {
    display: flex;
    /*
      줄바꿈을 허용하면 1024~1100px 구간에서 대메뉴가 두 줄이 되어 헤더 높이가 통째로 늘어난다.
      로고·전화 버튼과 세로 정렬이 어긋나 '깨진 화면' 으로 읽힌다.
      한 줄을 유지하고, 대신 항목 사이 간격을 화면 폭에 따라 줄여 흡수한다.
    */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0 clamp(.9rem, 1.8vw, 1.75rem);   /* 넉넉할 때는 시안 값(28px) */
}

.gnb__item {
    position: relative;
}

/* 시안 GNB 는 텍스트만이다 — 14px / 굵게 / stone-600, hover 에 stone-900.
   상하 9px 은 링크 높이를 전화 버튼(44px)에 맞춰 헤더 본체를 시안과 같은 72px 로 만드는 값이다. */
.gnb__link {
    display: block;
    padding: 9px 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.gnb__link:hover,
.gnb__link:focus-visible,
.gnb__item:hover > .gnb__link,
.gnb__item:focus-within > .gnb__link {
    color: var(--color-text);
}

.gnb__link--active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/*
  ★ 판매상품 하나만 강조한다. 이 사이트는 농원 소개가 아니라 사과를 파는 자리다.
    --active 뒤에 두어, 판매상품 페이지에 있을 때도 초록은 유지하고
    빨간 밑줄(활성 표시)은 그대로 얹히게 한다.
  ★★ 색만 바꾸지 않는다. 색을 잘 못 가리는 손님에게는 차이가 없으므로 크기도 한 단 올린다
     (14px → 15px, --font-size-sm 으로 타입 램프 위의 값이다).
*/
.gnb__item.is-primary > .gnb__link {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

/* 드롭다운 (hover / focus-within 동작은 1단계 그대로 유지) */
.gnb__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: var(--z-dropdown);
    min-width: 168px;
    /* 헤더 본체 하단 패딩(14px)만큼 내려 헤더 밑줄 아래에서 열리게 한다.
       그 사이 빈 틈은 아래 ::before 다리가 덮어서 hover 가 끊기지 않는다. */
    margin-top: 14px;
    transform: translate(-50%, 6px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 숨길 때만 visibility 를 지연시킨다(보일 때는 즉시 visible) */
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear .18s;
}

/* 링크와 드롭다운 사이 14px 빈 틈을 덮는 투명 다리.
   없으면 마우스가 틈을 지나는 순간 hover 가 풀려 메뉴가 닫힌다. */
.gnb__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.gnb__item:hover > .gnb__sub,
.gnb__item:focus-within > .gnb__sub,
.gnb__item--open > .gnb__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0s;
}

/*
  손가락에는 hover 가 없다. 그런데 모바일 브라우저는 탭을 한 번 hover 로 흉내 내기 때문에,
  site.js 가 "닫아라" 고 클래스를 떼도 :hover 규칙이 메뉴를 다시 열어 둔다.
  터치 기기에서는 JS 가 관리하는 --open 하나만 믿는다(첫 탭 펼침 / 두 번째 탭 이동).
*/
@media (hover: none) {
    .gnb__item:hover > .gnb__sub {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .gnb__item--open > .gnb__sub {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}

.gnb__sub-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.gnb__sub-link:hover,
.gnb__sub-link:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.gnb__sub-link--active {
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* 5.5 모바일 패널 */
.mobile-nav {
    display: none;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-height) - 32px);
    overflow-y: auto;
    z-index: var(--z-mobile-nav);
}

.mobile-nav--open {
    display: block;
    animation: mobile-nav-in .18s ease;
}

@keyframes mobile-nav-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-nav__inner {
    padding-block: var(--space-4) var(--space-6);
}

.mobile-nav__group {
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-1);
}

/* 대메뉴 링크와 접기 버튼을 한 줄에 나눠 놓는다.
   링크는 그 대메뉴 화면으로 가고, 오른쪽 화살표만 하위 목록을 여닫는다. */
.mobile-nav__grouphead {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mobile-nav__grouphead .mobile-nav__link--group {
    flex: 1 1 auto;
}

/* 손가락으로 누르는 목록이다. 44px 은 양보하지 않는다. */
/* 44px → --tap-min 으로 올렸다 (2026-09-20). 모바일 메뉴의 주 내비게이션. 주석이 스스로 "손가락으로 누르는 목록이다" 라고 적어 두고 44 였다. */
.mobile-nav__link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

/* 44px → --tap-min 으로 올렸다 (2026-09-20). 모바일 메뉴 안 하위메뉴 펼침 버튼. */
.mobile-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* 화살표는 사각형 두 변을 회전시켜 만든다(아이콘 파일·폰트를 늘리지 않는다). */
.mobile-nav__chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition);
}

/* 펼쳐져 있으면 화살표가 위를 본다 = "누르면 접힌다" */
.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__chevron {
    transform: translateY(2px) rotate(-135deg);
}

.mobile-nav__link--group {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
}

.mobile-nav__link--active {
    color: var(--color-primary);
    font-weight: 700;
}

.mobile-nav__sub {
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-primary-light);
    margin-left: var(--space-1);
}

.mobile-nav__util {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding-top: var(--space-3);
}

/* 여기도 손가락으로 누른다. gap 만으로 벌려 두면 글자 높이(≈20px)가 그대로 탭 타깃이 된다. */
/* 44px → --tap-min 으로 올렸다 (2026-09-20). 모바일 메뉴 안 로그인·회원가입·고객센터. */
.mobile-nav__util-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

.mobile-nav__util-link:hover,
.mobile-nav__util-link:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.mobile-nav__tel {
    margin-top: var(--space-3);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-primary-dark);
}

@media (min-width: 640px) {
    /* 주 CTA 라벨: 640px 이상은 "구매하기", 미만은 "구매" */
    .btn-buy__label {
        display: inline;
    }

    .btn-buy__label--short {
        display: none;
    }

    .site-header__tel {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .gnb {
        display: block;
        flex: 1 1 auto;
        min-width: 0;   /* flex 기본 min-width:auto 로는 줄어들지 못해 헤더가 넘친다 */
    }

    .nav-toggle {
        display: none;
    }

    /* 데스크톱에서는 모바일 패널을 강제로 숨긴다 */
    .mobile-nav,
    .mobile-nav--open {
        display: none;
    }

    .site-header__tel {
        margin-left: 0;
    }
}

/* GNB 가 켜지는 1024px 직후 구간은 여유가 얼마 없다.
   대체 폰트(맑은 고딕)나 브라우저 텍스트 확대에서 넘치지 않도록 링크 사이 간격을 줄여 둔다. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .gnb__list {
        gap: 0 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   6. 페이지 헤드 / breadcrumb
   -------------------------------------------------------------------------- */
.page-head {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

/*
  ★ 과녁이 22px 이었다.
    안쪽 여백으로 48px 까지 넓히고, 같은 크기의 음수 여백으로 줄 높이를 되돌린다.
    <보이는 크기는 그대로, 누를 수 있는 넓이만> 커진다 — 화면 위 여백을 26px 뺏지 않는다.

  ★★ 겹침 걱정은 없다. 항목들이 가로로 나란히 있어서 넓어지는 방향(세로)에서는
    서로 만나지 않는다. 위아래로 만나는 것은 헤더와 h1 인데 둘 다 누르는 것이 아니다.
*/
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    min-width: var(--tap-min);   /* 'HOME' 처럼 짧은 칸도 누르는 폭은 48px */
    margin-block: calc((var(--tap-min) - 1.5em) / -2);
    color: var(--color-text-muted);
}

.breadcrumb__item:hover {
    color: var(--color-primary);
}

.breadcrumb__item:last-child {
    color: var(--color-text);
    font-weight: 700;
}

/*
  ★ --color-border 였다. 배경 대비 1.26:1 — 아무에게도 안 보였다.
    aria-hidden 이라 읽어 주지도 않으니, 안 보이면 이 기호는 하는 일이 하나도 없다.
    항목 글자와 같은 단계로 올린다. 마지막 항목만 진하고 굵으니 위계는 그대로다.
*/
.breadcrumb__sep {
    color: var(--color-text-muted);
}

/* 페이지 제목(h1). 어느 화면에서도 섹션 제목보다 한 단계 위다 — 위 .section__title 주석 참고. */
.page-head__title {
    font-size: var(--font-size-2xl);
    color: var(--color-text);
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .page-head__title {
        font-size: var(--font-size-3xl);
    }
}

/* --------------------------------------------------------------------------
   7. 사이드 내비게이션
   모바일: 가로 스크롤 탭 / 데스크톱(1024+): 세로 목록
   -------------------------------------------------------------------------- */
.side-nav {
    min-width: 0;
}

.side-nav__title {
    display: none; /* 모바일에서는 탭만 노출 */
}

.side-nav__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.side-nav__list::-webkit-scrollbar {
    height: 4px;
}

.side-nav__list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-pill);
}

.side-nav__link {
    /* block 이면 세로 가운데 정렬이 안 돼 min-height 를 줘도 글자가 위로 붙는다 */
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.side-nav__link:hover,
.side-nav__link:focus-visible {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.side-nav__link--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.side-nav__link--active:hover {
    color: #fff;
}

/* 고객센터 배너.
   모바일(1024px 미만)에서는 숨긴다 — 이 폭에서 사이드바가 가로 스크롤 탭으로 바뀌는데
   탭 줄에 카드가 끼면 레이아웃이 무너진다. 대신 헤더의 "주문 전화" 버튼과 고정 상담 독,
   푸터가 같은 연락처를 이미 노출하고 있어 정보가 사라지지는 않는다. */
.side-cs {
    display: none;
}

@media (min-width: 1024px) {
    .side-nav__title {
        display: block;
        font-size: var(--font-size-lg);
        color: #fff;
        background: var(--color-primary);
        border-radius: var(--radius) var(--radius) 0 0;
        padding: var(--space-4) var(--space-5);
    }

    .side-nav__list {
        display: block;
        overflow: visible;
        padding-bottom: 0;
        border: 1px solid var(--color-border);
        border-top: 0;
        border-radius: 0 0 var(--radius) var(--radius);
        background: var(--color-surface);
    }

    .side-nav__list > li + li {
        border-top: 1px solid var(--color-border);
    }

    .side-nav__link {
        border: 0;
        border-radius: 0;
        background: transparent;
        white-space: normal;
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-base);
    }

    .side-nav__link:hover,
    .side-nav__link:focus-visible {
        background: var(--color-primary-light);
    }

    /* 왼쪽 색 레일은 뺐다. 크림 물듦 + 진초록 글자 + 굵기 700(위 규칙에서 이어받는다)
       세 가지가 이미 '지금 여기' 를 말한다. 백오피스 사이드 내비와 같은 판단이다.
       레일을 없애면 그걸 상쇄하려던 padding-left 보정도 같이 필요 없어진다. */
    .side-nav__link--active {
        background: var(--color-tint);
        color: var(--color-primary-dark);
    }

    .side-nav__link--active:hover {
        color: var(--color-primary-dark);
        background: var(--color-tint);
    }

    .side-cs {
        display: block;
        margin-top: var(--space-5);
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    }

    .side-cs__photo {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .side-cs__body {
        padding: var(--space-4) var(--space-4) var(--space-5);
    }

    .side-cs__label {
        margin: 0;
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--color-primary);
    }

    /* ★ 1.25rem(20px) 굵은 글씨로 카드 맨 위에 있었다. 지금은 안내문 안의 한 항목이다 —
         크기를 주변 글과 맞춘다. 읽기 어려워진 것이 아니라 <주인공 자리에서 내려온> 것이다. */
    .side-cs__tel {
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--color-text);
        text-decoration: none;
    }

    .side-cs__tel:hover,
    .side-cs__tel:focus-visible {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .side-cs__sub {
        margin: var(--space-4) 0 0;
        font-size: var(--font-size-xs);
        line-height: 1.7;
        color: var(--color-text-muted);
    }

    .side-cs__sub a {
        color: inherit;
        font-weight: 600;
    }

    .side-cs__note {
        margin: var(--space-2) 0 0;
        /* 0.75rem(12px) 이었다. DESIGN.md 의 캡션 하한은 13px 이고, 이 문장은 장식이 아니라
           "왜 전화를 못 받는지" 를 설명하는 안내다 — 읽히지 않으면 없는 것과 같다. */
        font-size: var(--font-size-xs);
        line-height: 1.6;
        color: var(--color-text-muted);
    }

    .side-cs__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 40px 이었다. --tap-min(48px)에 맞춘다 — 이 카드가 뜨는 화면에서 이제 이 버튼이 주 행동이다. */
        min-height: var(--tap-min);
        width: 100%;
        margin-top: var(--space-4);
        padding: 0 var(--space-4);
        border-radius: 9999px;
        background: var(--color-accent);
        color: #fff;
        font-size: var(--font-size-sm);
        font-weight: 700;
        text-decoration: none;
    }

    .side-cs__link:hover,
    .side-cs__link:focus-visible {
        background: var(--color-accent-dark);
        color: #fff;
    }

    /* 둘째 선택지(카카오톡). 같은 크기·같은 모양이되 색만 낮춘다 —
       모양까지 달리하면 "버튼이 아닌 무언가" 로 읽혀 눌리지 않는다. */
    .side-cs__link--sub {
        margin-top: var(--space-2);
        background: #fff;
        border: 1px solid var(--color-border);
        color: var(--color-text);
    }

    .side-cs__link--sub:hover,
    .side-cs__link--sub:focus-visible {
        background: var(--color-tint);
        color: var(--color-text);
    }
}

/* --------------------------------------------------------------------------
   8. 버튼
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* ★ --tap-min(48px)과 같은 값이다. 한때 여기만 44px 이었다 —
         상품 상세의 [장바구니 담기](44) 와 [바로 구매](52) 가 위아래로 붙어 계단으로 보였고,
         같은 두 버튼이 하단 고정바에서는 48px 이라 한 화면에 세 높이가 있었다. */
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    background: var(--color-surface);
    /*
      ★ 부품선(--color-border-strong)이다. 일상선이 아니다.
        기본 버튼은 흰 면에 테두리 하나뿐이다. 바닥이 서리빛이 되면서 면 차이가
        1.02 → 1.16:1 로 조금 벌어졌지만, 이 버튼이 <버튼이다> 라고 말하는 것은 여전히 테두리다.
        WCAG 1.4.11 이 조작 부품에 3:1 을 요구하는 것이 바로 이런 경우다.
    */
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.btn[disabled],
.btn--disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.btn--accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.btn--accent:hover,
.btn--accent:focus-visible {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/*
  어두운 사진 위에 놓는 보조 버튼 (히어로의 "주문 방법 보기").

  ★ 사진 위에서는 흰 테두리가 배경 대비 11:1 이라, 버튼이 <거기 있다> 는 것을
    색이 아니라 테두리가 말한다. 배경을 반투명 흰색으로만 채우면
    밝은 사과 위에서 테두리가 사라져 버튼이 사진에 묻힌다.
*/
.btn--ghost-light {
    background: rgb(255 255 255 / .12);
    border-color: rgb(255 255 255 / .85);
    color: #fff;
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
    background: rgb(255 255 255 / .24);
    border-color: #fff;
    color: #fff;
}

/*
  브랜드 버튼: 카카오 #FEE500 / 네이버.
  두 회사 모두 버튼 색 변경을 금지한다. hover 는 색을 바꾸지 말고 밝기만 줄인다.

  ★ 로그인 화면의 .social-btn--kakao / --naver 와는 다른 물건이다.
    저쪽은 <카카오로 로그인> 이고 이쪽은 <카카오톡으로 문의> 다.
    같은 브랜드 색을 쓰지만 크기와 자리가 달라서 한 클래스로 묶지 않았다.
*/
.btn--kakao {
    background: var(--color-kakao-bg);
    border-color: var(--color-kakao-bg);
    color: var(--color-kakao-fg);
}

.btn--kakao:hover,
.btn--kakao:focus-visible {
    filter: brightness(.95);
    color: var(--color-kakao-fg);
}

.btn--naver {
    background: var(--color-naver-bg);
    border-color: var(--color-naver-bg);
    color: var(--color-naver-fg);
}

.btn--naver:hover,
.btn--naver:focus-visible {
    filter: brightness(.95);
    color: var(--color-naver-fg);
}

.btn--block {
    display: flex;
    width: 100%;
}

/*
  ★ 34px 이었다. '작은 버튼' 이라도 누르는 것은 누르는 것이다 — --tap-min 은 48 이다.
    작아 보이는 역할은 글자 크기와 좌우 여백이 맡는다. 높이로 줄이지 않는다.
*/
.btn--sm {
    min-height: var(--tap-min);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

/* 버튼 묶음 */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.btn-group--center {
    justify-content: center;
}

.btn-group--end {
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   9. 카드
   -------------------------------------------------------------------------- */
/*
  카드는 쉬고 있을 때도 은은한 그림자를 둔다(저장소 주인 결정, 2026-09-18).

  ★ 테두리만으로 면을 구분하면, 카드가 배경과 같은 평면에 있는 종잇장처럼 보인다.
    상품 카드가 곧 본문인 페이지에서 그 평면성은 "눌러도 되는 것" 이라는 신호를 지운다.
    그림자는 <떠 있다 = 만질 수 있다> 를 말하는 가장 조용한 방법이다.
  ★★ 테두리를 빼지 않는다. 밝은 화면·야외 환경에서는 그림자가 거의 안 보이는데,
    그때 경계를 지켜 주는 것은 테두리다. 둘은 경쟁이 아니라 이중화다.
*/
.card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
}

a.card:hover {
    color: inherit;
}

.card__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-tint);
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.card:hover .card__media img {
    transform: scale(1.04);
}

.card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
}

.card__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-warm-text);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

/*
  카드 본문 설명. 시안 카드(.card2__text)에만 있던 것을 여기로 옮겼다.
  ★ 15px 이다. 예전 값은 14px 이었는데, 이 자리에 들어가는 글이
    "한 손에 잡히는 크기입니다. 10kg 한 상자에 48과가 들어갑니다." 처럼
    <사기 전에 꼭 읽어야 하는 설명> 이다. 보조 설명 하한(--font-size-sm)을 지킨다.
*/
.card__text {
    font-size: var(--font-size-sm);
    line-height: 1.75;
    color: var(--color-text-muted);
}

/* 카드 그리드 (갤러리/상품 공통 기본형) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .card-grid {
        gap: var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   10. 테이블
   -------------------------------------------------------------------------- */
/* 넓은 표는 이 래퍼로 감싸 가로 스크롤 처리 */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    background: var(--color-surface);
    font-size: var(--font-size-sm);
}

.table th,
.table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.table thead th {
    background: var(--color-tint);
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 700;
    white-space: nowrap;
}

.table tbody tr:hover {
    background: var(--color-bg);
}

/* 게시판 목록형 표
   컬럼 클래스 계약(각 담당 에이전트가 th/td 에 부여):
     .col-no      번호
     .col-title   제목 (가변 폭)
     .col-writer  작성자  -> 모바일 숨김
     .col-date    작성일
     .col-views   조회수  -> 모바일 숨김 */
.table--list {
    border-top: 2px solid var(--color-primary);
    table-layout: fixed;
}

.table--list th,
.table--list td {
    text-align: center;
}

.table--list .col-title {
    text-align: left;
    width: auto;
}

/*
  ★ 26px 이었다. 게시판에서 <실제로 누르는 것>은 이 제목 링크 하나다.
    줄은 더 높은데 링크만 글자 높이라, 줄 위아래를 누르면 아무 일도 없었다.
*/
.table--list .col-title a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table--list .col-no {
    width: 56px;
    color: var(--color-text-muted);
}

.table--list .col-date {
    width: 96px;
    color: var(--color-warm-text);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.table--list .col-writer {
    width: 110px;
    color: var(--color-text-muted);
}

.table--list .col-views {
    width: 72px;
    color: var(--color-text-muted);
}

/* 모바일에서는 작성자/조회수 열 숨김 */
.table--list .col-writer,
.table--list .col-views {
    display: none;
}

@media (min-width: 640px) {
    .table--list .col-writer,
    .table--list .col-views {
        display: table-cell;
    }
}

/* 라벨/값 정보 표 (상세, 주문정보 등) */
.table--info {
    border-top: 2px solid var(--color-primary);
}

.table--info th {
    width: 30%;
    background: var(--color-tint);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. 페이지네이션
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-8);
}

/*
  ★ 38x38 이었다. 쪽 번호는 손가락으로 정확히 집어야 하는데 가장 작은 과녁이었다.
    height 를 min-height 로 바꾼다 — 글자가 커져도(브라우저 확대) 칸이 따라 늘어난다.
*/
.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.pagination__link:hover,
.pagination__link:focus-visible {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.pagination__link--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.pagination__link--active:hover,
.pagination__link--active:focus-visible {
    background: var(--color-primary-dark);
    color: #fff;
}

.pagination__link--nav {
    padding: 0 var(--space-3);
}

.pagination__link--disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   12. 뱃지
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.6;
    border-radius: var(--radius-pill);
    background: var(--color-tint);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.badge--notice {
    background: var(--color-primary-light);
    border-color: #fecaca;
    color: var(--color-primary-dark);
}

.badge--info {
    background: #eef2f7;
    border-color: #dbe3ec;
    color: #38506e;
}

.badge--event {
    background: var(--color-accent-light);
    border-color: #f3d3d3;
    color: var(--color-accent);
}

/*
  상품 라벨 — 중량·품종 같은 <분류> 다. 상태가 아니다.
  .chip--red / .chip--green 이던 것을 옮겼다.
*/
.badge--accent {
    background: var(--color-accent-light);
    border-color: #f3d3d3;
    color: var(--color-accent-dark);
}

.badge--primary {
    background: var(--color-primary-light);
    border-color: #fecaca;
    color: var(--color-primary-dark);
}

/*
  주문 상태 — 여기 이름은 손으로 적는 것이 아니라 OrderStatus.memberChipTone() 이 만든다.
  (member/orders.html, member/order-detail.html 의 th:classappend)

  ★ 이름을 바꾸려면 자바 쪽 enum 도 같이 바꿔야 한다. 한쪽만 바꾸면
    클래스가 없는 배지가 되어 <색만 조용히 사라진다> — 화면은 안 깨지고 상태만 안 보인다.

  ★★ 관리자 화면은 일부러 다른 갈래를 쓴다(adm-badge--*).
    농원 사람은 "오늘 내가 보낼 게 뭔가" 를 묻고, 손님은 "내 주문이 어디쯤 왔나" 를 묻는다.
*/
.badge--action {
    background: var(--color-accent-light);
    border-color: #f3d3d3;
    color: var(--color-accent);
}

.badge--progress {
    background: var(--color-tint);
    border-color: var(--color-border);
    color: var(--color-text);
}

.badge--sent {
    background: var(--color-primary-light);
    border-color: #fecaca;
    color: var(--color-primary-dark);
}

.badge--closed {
    background: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   13. 빈 상태 / 알림
   -------------------------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    font-size: var(--font-size-base);
}

.empty-state__title {
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

/*
  안내 상자. 배송·교환·문의처럼 <읽어야 하는> 문장이 들어간다.
  ★ 보조 텍스트 크기(15px)로 두면 정작 읽어야 할 내용이 각주처럼 보인다.
    본문 크기로 올리고 폭을 제한한다.
*/
.notice-box {
    padding: var(--space-4) var(--space-5);
    max-width: var(--measure);
    background: var(--color-tint);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   14. 폼 요소 공통
   -------------------------------------------------------------------------- */
/*
  44px → --tap-min 으로 올렸다 (2026-09-20).
  주문서·로그인·가입의 <모든> 입력칸이 44px 이었다. 어르신이 이름·주소·전화번호를 채우는 자리다.
*/
.form-control,
select.form-control,
input[type="text"].form-control,
input[type="tel"].form-control,
input[type="email"].form-control,
input[type="number"].form-control,
textarea.form-control {
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
}

.form-control:focus {
    border-color: var(--color-primary);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.form-field__label {
    font-size: var(--font-size-sm);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   15. 본문 콘텐츠
   -------------------------------------------------------------------------- */
.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.content-body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
}

.content-body p {
    margin-bottom: var(--space-4);
}

.content-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-accent {
    color: var(--color-accent);
}

.text-center {
    text-align: center;
}

/* --------------------------------------------------------------------------
   16. 푸터 (시안: 어두운 배경)

   대비 메모: 시안은 라벨에 stone-500 을 쓰는데 stone-900 배경 위에서 3.6:1 이라
   본문 대비 기준(4.5:1)에 못 미친다. 그래서 라벨은 stone-400(6.9:1),
   값은 stone-200 으로 올려 잡았다. 위계는 굵기와 밝기 차로 유지한다.
   -------------------------------------------------------------------------- */
.site-footer {
    margin-top: 0;             /* 시안 푸터는 마지막 섹션에 바로 붙는다 */
    padding-block: 3.5rem;     /* 56px */
    background: var(--color-dark);
    border-top: 1px solid var(--color-dark-line);
    color: var(--color-dark-muted);
    font-size: var(--font-size-xs);
    line-height: 1.75;
}

/* 로고는 농원 것이다. 어두운 배경에 맞추겠다고 색을 뒤집으면 사과가 흰 얼룩이 된다.
   원본을 그대로 두고 흰 판을 깔아 준다(시안 주석 그대로). */
.site-footer__logo-plate {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: #fff;
    border-radius: 12px;
}

.site-footer__logo-plate img,
.site-footer__logo {
    display: block;
    width: auto;
    height: 32px;
    opacity: 1;
}

/* 사업자 정보 dl — 640px 이상 2열 */
.site-footer__biz {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem 2.5rem;
    margin-top: 2rem;
    font-size: var(--font-size-xs);
    line-height: 1.75;
}

.site-footer__biz > div,
.site-footer__biz > p {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}

.site-footer__biz dt {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-dark-muted);
}

.site-footer__biz dd {
    margin: 0;
    color: var(--color-dark-text);
}

.site-footer__biz strong {
    font-weight: 600;
    color: var(--color-dark-text);
}

.site-footer__biz a {
    color: var(--color-dark-text);
}

.site-footer__biz a:hover,
.site-footer__biz a:focus-visible {
    color: #fff;
}

/* 주소처럼 긴 항목은 640px 이상에서 두 칸을 다 쓴다 */
.site-footer__biz-row--wide {
    grid-column: 1 / -1;
}

/* 공정위 사업자정보 조회 링크 */
.site-footer__ftc {
    color: var(--color-dark-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer__ftc:hover,
.site-footer__ftc:focus-visible {
    color: #fff;
}

/*
  법적 링크 줄 (회원약관 · 개인정보취급방침 · 이메일무단수집거부 · 사업자정보).

  ★ 12px 이었다. 토큰 주석이 "--font-size-xs(13px) 이보다 작게 쓰지 마라" 라고
    적어 둔 바로 그 규칙을, 하필 <약관과 사업자정보> 자리에서 어기고 있었다.
    가장 작게 적어 둔 글이 가장 법적으로 중요한 글이었다.

  ★★ 누르는 높이도 함께 키운다. 글자만 키우면 여전히 27px 짜리 과녁이다.
    padding 으로 과녁을 넓히고 음수 margin 으로 줄 간격을 되돌린다 —
    <보이는 크기는 그대로, 누를 수 있는 넓이만> 커진다.
*/
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

/* 푸터 첫 줄에 오는 경우(현재 마크업) 위 여백을 없앤다 */
.site-footer__links:first-child {
    margin-top: 0;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-dark-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
    color: #fff;
}

/* 청약철회·반품 등 고지 문단 */
/*
  푸터의 반품·교환 안내.

  ★ 실측에서 이 저장소에서 가장 읽기 어려운 텍스트였다 — 12px 글자가 한 줄 185자.
    어두운 배경 위 회색이라 대비도 낮고, 폭이 화면 전체라 눈이 다음 줄을 못 찾는다.
    그런데 이건 장식이 아니라 <전자상거래법상 고지해야 하는 내용>이고,
    실제로 반품 문의가 들어오면 "여기 적혀 있다" 고 가리키게 되는 문장이다.
    읽히지 않는 고지는 고지가 아니다.
*/
.site-footer__note {
    margin-top: 1rem;
    /* 72ch. 눈이 다음 줄 첫머리를 되찾을 수 있는 폭이다 */
    max-width: var(--measure);
    font-size: var(--font-size-xs);
    line-height: 1.7;
    color: var(--color-dark-text);
}

.site-footer__note strong {
    font-weight: 600;
    color: var(--color-dark-text);
}

.site-footer__main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.site-footer__brand,
.site-footer__related {
    flex: 0 0 auto;
}

/* 관련사이트 셀렉트 — 어두운 배경용.
   color-scheme:dark 가 있어야 펼친 목록까지 어둡게 그려진다. */
.related-select {
    width: 100%;
    max-width: 220px;
    min-height: var(--tap-min);
    padding: .5rem .75rem;
    background: var(--color-dark);
    border: 1px solid var(--color-dark-line);
    border-radius: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-dark-text);
    color-scheme: dark;
}

.related-select:focus {
    border-color: var(--color-border);
}

/*
  ★ 구분선이 stone-800 on stone-900 이라 대비 1.15:1 — 사실상 안 보였다.
    안 보이는 선은 구분을 못 한다. 같은 계열에서 한 단계 올린다.
*/
.site-footer__copy {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-dark-line);
    font-size: var(--font-size-xs);
    line-height: 1.7;
    color: var(--color-dark-muted);
}

@media (min-width: 640px) {
    .site-footer__biz {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__main {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .site-footer__related {
        text-align: right;
    }
}

/* --------------------------------------------------------------------------
   17. 고정 상담 독 (우하단 플로팅)

   농원 손님은 전화로 주문하던 분들인데 낮에는 밭에 있어 전화를 못 받는다.
   그래서 '전화 말고 남길 수 있는 곳'을 화면에 붙박이로 둔다.

   ★ 링크 주소: 농원의 카카오톡 채널·네이버 톡톡 계정이 아직 없다.
     지금은 홈의 주문 방법 섹션(/#order)으로 보낸다. 없는 주소를 지어 넣으면
     눌렀을 때 404 가 뜨고, 그 순간 화면 전체가 거짓말처럼 보인다.
     채널 개설 후 아래 형태로 교체하면 된다(마크업은 fragments 담당).
       카카오톡 채널  https://pf.kakao.com/_{채널ID}/chat
       네이버 톡톡    https://talk.naver.com/ct/{톡톡ID}

   색은 각 서비스가 정한 값을 그대로 쓴다(카카오 #FEE500, 네이버 #03C75A).
   두 회사 모두 버튼 색을 바꾸는 것을 금지한다.
   -------------------------------------------------------------------------- */
.channel-dock {
    position: fixed;
    right: 1rem;
    /* 홈 인디케이터(아이폰 하단 안전영역)에 가리지 않게 띄운다 */
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-dock);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .625rem;
}

.channel-dock__btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: var(--shadow-dock);
    transition: transform .2s ease, box-shadow .2s ease;
}

.channel-dock__btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(12 10 9 / .3);
}

.channel-dock__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
}

.channel-dock__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* 좁은 화면에서는 글자를 숨기고 동그란 아이콘만 남긴다.
   사과 가격표 위에 가로로 긴 버튼 두 개가 늘 떠 있으면 도움이 아니라 가림막이 된다. */
.channel-dock__label {
    display: none;
}

.channel-dock__btn--kakao {
    background: var(--color-kakao-bg);
    color: var(--color-text);
}

.channel-dock__btn--kakao:hover,
.channel-dock__btn--kakao:focus-visible {
    color: var(--color-text);
}

.channel-dock__btn--kakao:focus-visible {
    outline: 2px solid var(--color-kakao-bg);
    outline-offset: 3px;
}

.channel-dock__btn--naver {
    background: var(--color-naver-bg);
    color: var(--color-naver-fg);
}

.channel-dock__btn--naver:hover,
.channel-dock__btn--naver:focus-visible {
    color: var(--color-naver-fg);
}

.channel-dock__btn--naver:focus-visible {
    outline: 2px solid var(--color-naver-bg);
    outline-offset: 3px;
}

/* 전화. 카카오 채널이 없어 비워 두느니 실제로 동작하는 창구를 둔다. */
.channel-dock__btn--call {
    background: var(--color-accent);
    color: #fff;
}

.channel-dock__btn--call:hover,
.channel-dock__btn--call:focus-visible {
    background: var(--color-accent-dark);
    color: #fff;
}

.channel-dock__btn--call:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* 홈의 "주문 방법"(#order) 구간에서는 독을 접는다(site.js 의 initChannelDockAutoHide).
   그 섹션 안에 톡톡·전화가 이미 다 있어 독이 중복이고, 스마트스토어 버튼을 가리기 때문이다.
   visibility:hidden 을 함께 쓰는 이유: opacity 만 0 으로 두면 화면에서 안 보이는데도
   Tab 키가 그 링크에 그대로 들어간다(포커스가 사라진 것처럼 보인다). */
.channel-dock {
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.channel-dock--hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(.75rem);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .channel-dock {
        transition: none;
    }

    .channel-dock--hidden {
        transform: none;
    }
}

/* 모바일 메뉴가 열려 있을 때는 독을 감춘다.
   헤더(z 40)보다 독(z 50)이 위라, 열린 패널 위에 버튼이 겹쳐 보이기 때문이다.
   :has() 미지원 브라우저에서는 그대로 겹쳐 보일 뿐 기능은 멀쩡하다. */
body:has(.mobile-nav--open) .channel-dock {
    display: none;
}

/*
  ★ 640px 이상에서 라벨을 펴던 규칙을 걷어냈다 (2026-09-20).

    실측으로 잡았다. 1280x800 상품 상세에서 독이 <수량 조절기를 덮어>
    + 버튼과 수량 입력칸을 눌러도 카카오톡 버튼이 눌렸다.
    elementFromPoint 로 확인한 값이라 짐작이 아니다.
    화면에는 버튼이 멀쩡히 보이므로 원인을 찾기 어려운 종류의 고장이고,
    하필 <수량을 정하는 자리> 라 두 상자를 사려던 손님이 못 산다.

    라벨을 펴면 독이 152px 이 되어 본문 칸(1280px 화면에서 40~1240)을 143px 파고든다.
    아이콘만 두면 48px 이라 1216~1264 에 서고, 수량 조절기(~1188에서 끝)와 만나지 않는다.
    <누를 수 없는 라벨 달린 버튼보다, 누를 수 있는 아이콘이 낫다.>

  ★★ 글자를 아예 없앤 것이 아니다.
    - aria-label 이 링크마다 붙어 있어 화면 낭독기는 전과 똑같이 읽는다.
    - 마우스를 올리거나 키보드 초점이 가면 왼쪽으로 라벨이 펴진다(아래 규칙).
    - 모바일에서는 원래도 아이콘만이었다. 달라진 것은 데스크톱뿐이다.
*/

/* 초점·호버 때만 라벨을 편다. 펴지는 방향이 왼쪽이라 화면 밖으로 나가지 않는다. */
.channel-dock__btn:hover .channel-dock__label,
.channel-dock__btn:focus-visible .channel-dock__label {
    display: inline;
    padding-left: .5rem;
}

/*
  아이콘만 있을 때 정확히 --tap-min(48px) 원이 되게 한다.
  padding 을 0 으로 두고 아이콘 칸이 곧 버튼 크기다 — 그래야 폭을 계산해 둘 수 있다.
*/
.channel-dock__btn {
    padding: .25rem;
}

@media (hover: none) {
    /* 손가락으로 쓰는 화면에는 hover 가 없다. 눌리면 바로 채널로 가야 하므로
       라벨이 펴질 일이 없고, 펴 봐야 그 순간 화면을 가린다. */
    .channel-dock__btn:hover .channel-dock__label {
        display: none;
    }
}

@media (min-width: 1024px) {
    /* 데스크톱에서는 모바일 패널이 강제로 숨겨지므로 독을 다시 보인다 */
    body:has(.mobile-nav--open) .channel-dock {
        display: flex;
    }
}

/* 애니메이션을 줄여 달라고 한 사용자에게는 hover 로 버튼이 뛰지 않게 한다
   (전역 규칙은 transition 시간만 없앨 뿐, transform 자체는 그대로 적용된다). */
@media (prefers-reduced-motion: reduce) {
    .channel-dock__btn:hover {
        transform: none;
    }

    .gnb__sub,
    .gnb__item:hover > .gnb__sub,
    .gnb__item:focus-within > .gnb__sub,
    .gnb__item--open > .gnb__sub {
        transform: translate(-50%, 0);
    }
}

/* ==========================================================================
   관리자가 편집기로 쓴 본문 (.rich-text)

   ★ 이 블록이 <반드시> 있어야 한다. 이 파일 맨 위의 전역 초기화가
     p·h2~h6 의 margin 을 0 으로 만들고, ul/ol 의 list-style 을 none 으로 지운다.
     초기화 자체는 옳다 — 이 사이트의 목록은 대부분 내비게이션이고 거기에 점이 붙으면 안 된다.
     문제는 <본문 속 목록>까지 함께 지워진다는 것이다. 그대로 두면 농원주가 편집기에서
     점 찍힌 목록을 만들어 저장했는데 손님 화면에는 <점도 들여쓰기도 없는 맨 줄>이 나온다.
     저장은 성공했고 글자도 다 있으니, 아무도 이것을 고장이라고 부르지 않는다.

   ★★ 붙이는 곳은 RichText 를 지나 th:utext 로 찍는 자리 셋이다 —
     청송소개 문단 본문 · 공지/갤러리 본문 · 상품 상세설명.
     이 클래스가 붙어 있다는 것은 곧 <여기 들어오는 HTML 은 허용 목록을 지났다> 는 뜻이다.
     거르지 않은 값에 이 클래스를 붙이지 마라.

   ★★★ 여백은 margin-bottom 으로만 준다. '형제 사이에 margin-top' 방식을 쓰면
     이미 .content-body p 가 걸고 있는 아래 여백과 겹쳐 문단 사이가 두 배로 벌어진다.
   ========================================================================== */
.rich-text {
    line-height: var(--line-height-base);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.rich-text p,
.rich-text ul,
.rich-text ol,
.rich-text table,
.rich-text blockquote,
.rich-text figure,
.rich-text pre,
.rich-text hr {
    margin-bottom: var(--space-5);
}

/* 블록 끝의 여백은 떼어 낸다. 안 그러면 글 아래에 빈 줄이 하나 더 있는 것처럼 보인다. */
.rich-text > :last-child {
    margin-bottom: 0;
}

/* 본문 속 제목. 페이지 제목(h1)·섹션 제목과 다투지 않게 한 단계씩 낮춰 잡는다.
   위 여백이 아래보다 커야 <이 제목이 어느 글에 붙은 것인지>가 눈에 보인다. */
.rich-text h2,
.rich-text h3,
.rich-text h4 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    line-height: var(--line-height-tight);
}

.rich-text > h2:first-child,
.rich-text > h3:first-child,
.rich-text > h4:first-child {
    margin-top: 0;
}

.rich-text h2 {
    font-size: var(--font-size-lg);
}

.rich-text h3 {
    font-size: var(--font-size-md);
}

.rich-text h4 {
    font-size: var(--font-size-base);
}

/* ★ 목록에 점과 번호를 되돌린다. 전역 초기화가 지운 것을 여기서만 복구한다. */
.rich-text ul,
.rich-text ol {
    padding-left: 1.4em;
}

.rich-text ul {
    list-style: disc outside;
}

.rich-text ol {
    list-style: decimal outside;
}

.rich-text li + li {
    margin-top: var(--space-2);
}

/* 편집기는 목록 항목과 표 칸 안을 <p> 로 감싸서 내보낸다.
   그 <p> 에까지 문단 여백이 걸리면 목록과 표가 성기게 벌어진다. */
.rich-text li > p,
.rich-text th > p,
.rich-text td > p {
    margin-bottom: 0;
}

.rich-text blockquote {
    padding: var(--space-3) var(--space-5);
    border-left: 4px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

/* ★ 본문 속 링크는 <밑줄이 있어야> 한다. 전역에서 a 의 밑줄을 없앤 것은 내비게이션 때문인데,
     글 한가운데의 링크를 색만으로 구분하면 색을 잘 못 가리는 분에게는 그냥 글자다. */
.rich-text a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-text img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.rich-text figcaption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.rich-text hr {
    height: 1px;
    border: 0;
    background: var(--color-border);
}

/* 표. 농원주가 규격·가격을 정리할 때 쓴다 — 숫자를 견주어 읽는 표라 선이 분명해야 한다. */
.rich-text table {
    width: 100%;
    border-collapse: collapse;
}

.rich-text th,
.rich-text td {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.rich-text th {
    background: var(--color-surface);
    font-weight: 700;
}

.rich-text pre {
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow-x: auto;
}

.rich-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em;
}

@media (max-width: 640px) {
    /*
      ★ 좁은 화면에서 표는 <가로로 넘긴다>. 글자를 줄여 억지로 맞추지 않는다.
        줄이면 어르신 화면에서 읽을 수 없는 크기가 되고, 그냥 두면 표가 화면을 밀어내
        <페이지 전체>가 좌우로 흔들린다. 읽을 수 있는 크기를 지키고 표만 넘기는 편이 낫다.
    */
    .rich-text table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ==========================================================================
   목업 테마 (2026-09-24)

   농원주가 준 목업(code_artifact)의 모양 — 빨강 주색 · 호박 강조 · 회색 바닥 · 둥근 흰 카드 ·
   검은 바닥 — 을 입힌다. 색·둥글기·그림자는 위 :root 토큰을 바꿔서 이미 모든 화면이 따라왔다.
   여기는 모양이 달라진 부품만 둔다: 알림 띠, 검색 알약, 장바구니 배지, 관리자 단추, 메뉴 줄, 바닥 세 칸, 토스트.

   ★ 목업의 글씨 크기(10~12px)는 따르지 않는다. 주 사용자가 어르신이라 크기 토큰(본문 17px,
     캡션 최소 13px, 누르는 곳 48px)을 그대로 쓴다 — 농원주가 그렇게 정했다.
   ★★ 목업은 Tailwind · Font Awesome · 구글 글꼴 CDN 을 쓰지만 여기는 하나도 싣지 않는다
     (이 파일 머리말의 외부 CDN 금지). 아이콘은 fragments/icons.html 의 인라인 SVG 다.
   ========================================================================== */

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    vertical-align: -0.2em;
}

/* ---- 윗줄: 빨강 알림 띠 ------------------------------------------------- */
.site-notice {
    margin: 0;
    background: var(--color-primary);
    color: #fff;                                /* 4.83:1 */
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.site-notice__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding-block: 6px;
    text-align: center;
}

.site-notice .icon {
    color: #fde68a;
}

.site-top .site-header__utility {
    background: var(--color-surface);
}

/* ---- 본체 ---------------------------------------------------------------- */
.site-header {
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    gap: var(--space-4);
    padding-block: 12px;
}

.site-header__logo {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
}

.site-header__logo img {
    height: 34px;
}

.site-header__tagline {
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary-dark);           /* 6.47:1 */
}

/* 상품 검색 알약. 1024px 미만에서는 햄버거 패널 안의 같은 검색칸을 쓴다. */
.header-search {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-height: 52px;
    padding: 4px 4px 4px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.header-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(220 38 38 / .18);
}

.header-search .icon {
    color: var(--color-text-muted);
}

.header-search__input {
    flex: 1 1 auto;
    /* 알약 칸 높이 전체가 입력칸이다 — 예전에는 글자 줄(31px)만 눌려서 칸 위아래를 누르면 아무 일도 없었다. */
    align-self: stretch;
    min-height: 44px;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.header-search__input::placeholder {
    color: var(--color-text-muted);
}

.header-search__button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
}

.header-search__button:hover,
.header-search__button:focus-visible {
    background: var(--color-primary-dark);
}

.header-search--panel {
    display: flex;
    margin: var(--space-4) 0 var(--space-2);
}

@media (min-width: 1024px) {
    .site-header__inner > .header-search {
        display: flex;
        flex: 1 1 auto;
        max-width: 32rem;
        margin-inline: var(--space-4) auto;
    }
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: background var(--transition), color var(--transition);
}

.header-cart:hover,
.header-cart:focus-visible {
    background: #f3f4f6;
    color: var(--color-primary-dark);
}

.header-cart .icon {
    width: 26px;
    height: 26px;
}

.header-cart__label {
    display: none;
}

.header-cart__badge {
    position: absolute;
    top: 2px;
    left: 30px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.header-admin {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    background: #111827;
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
}

.header-admin .icon {
    color: #fbbf24;
}

.header-admin:hover,
.header-admin:focus-visible {
    background: #1f2937;
    color: #fff;
}

@media (min-width: 640px) {
    .header-admin {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .header-cart__label {
        display: inline;
    }
}

/* ---- 메뉴 줄 (1024px 이상) ----------------------------------------------- */
.site-header__navrow {
    display: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

@media (min-width: 1024px) {
    .site-header__navrow {
        display: block;
    }

    .site-header__navrow .gnb {
        display: block;
    }

    .site-header__navrow .gnb__list {
        justify-content: flex-start;
        gap: 0 var(--space-1);
    }

    .site-header__navrow .gnb__link {
        padding: 12px var(--space-4);
        font-size: var(--font-size-base);
        color: var(--color-text);
        border-radius: var(--radius-sm);
    }

    .site-header__navrow .gnb__link:hover,
    .site-header__navrow .gnb__link:focus-visible,
    .site-header__navrow .gnb__link--active,
    .site-header__navrow .gnb__item.is-primary .gnb__link {
        color: var(--color-primary-dark);
    }

    /* ★ 판매상품 강조는 '한 단 크게' 다(위 .gnb__item.is-primary 주석). 그 규칙(--font-size-sm)이 여기서도 이겨서
         메뉴 줄에서는 강조한 칸이 오히려 가장 작았다(16px, 나머지 17px). 이 줄의 본문 크기보다 한 단 위로. */
    .site-header__navrow .gnb__item.is-primary > .gnb__link {
        font-size: var(--font-size-md);
    }
}

/*
  화면에 붙어 있는 머리의 높이. 알림 띠와 로그인 줄은 스크롤과 함께 올라가므로 넣지 않는다.
  실측(1280px): 본체 + 메뉴 줄 135px. 휴대폰은 본체만(약 77px).
*/
:root {
    --header-stack: 80px;
}

@media (min-width: 1024px) {
    :root {
        --header-stack: 136px;
    }
}

/* ---- 바닥: 검은 면 세 칸 --------------------------------------------------- */
.site-footer {
    padding-block: 3rem 2rem;
    font-size: var(--font-size-sm);
}

.site-footer__cols {
    display: grid;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid #374151;
}

@media (min-width: 768px) {
    .site-footer__cols {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
}

.site-footer__intro {
    margin: var(--space-3) 0;
    color: var(--color-dark-muted);
    line-height: 1.7;
}

.site-footer__bank {
    padding: var(--space-5);
    background: rgb(31 41 55 / .7);
    border: 1px solid #374151;
    border-radius: var(--radius);
}

.site-footer__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: #fbbf24;                             /* 짙은 면 위 9:1 이상 */
}

.site-footer__center .site-footer__heading {
    color: var(--color-dark-text);
}

.site-footer__account {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #fff;
}

.site-footer__holder {
    margin: 4px 0 var(--space-3);
    color: var(--color-dark-muted);
}

.site-footer__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid #4b5563;
    border-radius: var(--radius-sm);
    background: #374151;
    color: #f3f4f6;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.site-footer__copy-btn:hover,
.site-footer__copy-btn:focus-visible {
    background: #4b5563;
}

.site-footer__phone {
    display: inline-block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--color-accent-on-dark);
}

.site-footer__sub {
    margin: var(--space-2) 0 0;
    color: var(--color-dark-muted);
}

.site-footer__sub a {
    color: var(--color-dark-text);
    text-decoration: underline;
}

/* ---- 토스트 — site.js [data-copy] 가 띄운다 ------------------------------- */
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    margin: 0;
    padding: 12px 20px;
    border-radius: var(--radius);
    background: #111827;
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    animation: toast-up .3s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes toast-up {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none;
    }
}

/* ---- 공용 부품의 목업 모양 --------------------------------------------- */
.card {
    border-radius: var(--radius-lg);
}

.card:hover {
    box-shadow: var(--shadow);
}

.badge {
    border-radius: var(--radius-pill);
    font-weight: 700;
}

.notice-box {
    border-color: #fde68a;
    border-radius: var(--radius);
}

.form-control:focus,
.form-control:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(220 38 38 / .18);
    outline: none;
}

/*
  휴대폰(480px 미만) 머리 한 줄: [햄버거 · 로고 · 장바구니 · 구매] 가 375px 안에 들어가야 한다.
  실측(375px)에서 영문 부제가 로고 폭을 164px 로 늘려 구매 단추가 오른쪽 밖으로 39px 밀려났다.
  로고 그림에 이미 송골농원 글자가 있으므로 좁은 화면에서는 부제를 감추고 틈을 줄인다.
*/
@media (max-width: 479.98px) {
    .site-header__inner {
        gap: var(--space-2);
    }

    .site-header__tagline {
        display: none;
    }

    .site-header__logo img {
        height: 30px;
    }

    .site-header__actions {
        gap: var(--space-1);
    }
}

/* ---- 화면 공통 틀(옆 메뉴 · 빈 화면) — 목업 카드 말투 ---------------------- */
.side-nav {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.empty-state {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.page-head__title {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ==========================================================================
   필수 동의를 안 하고 누르면 — 그 줄을 빨갛게 두르고 바로 아래 문구를 둔다 (2026-09-24, site.js initConsentFocus)
   농원주 요청: "동의시 체크가 안되어있으면 거기로 포커싱되게해줘".
   ★ 색만으로 알리지 않는다 — 굵은 테두리 + 문구 + 초점이 함께 간다.
   ========================================================================== */
.check-row.is-attention {
    border-radius: var(--radius);
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
    background: var(--color-primary-light);
    animation: consent-nudge .5s ease 1;
}

.check-row.is-attention .check-row__box:focus-visible,
.check-row.is-attention .check-row__box:focus {
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.consent-alert {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-accent);
}

@keyframes consent-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .check-row.is-attention {
        animation: none;
    }
}

/* PC 공통 너비와 간격. 1024px 미만은 기존 모바일·태블릿 배치를 유지한다. */
@media (min-width: 1024px) {
    :root {
        --container-max: 1520px;
        --container-pad: clamp(24px, 2.5vw, 40px);
    }

    .page {
        padding-block: 40px 64px;
    }

    .page__layout {
        column-gap: clamp(40px, 3vw, 56px);
    }

    .page .section,
    .page .order-form .section {
        margin-bottom: 48px;
    }

    .page .form-grid--2 {
        column-gap: 32px;
    }

    .site-header__navrow .gnb__list {
        column-gap: clamp(8px, 1vw, 20px);
    }

    .site-footer__cols {
        gap: clamp(40px, 4vw, 64px);
    }
}

@media (min-width: 1280px) {
    .site-header__inner {
        column-gap: 32px;
    }
}