@charset "UTF-8";
/* ==========================================================================
   메인 페이지 전용 스타일 (home.css)

   - 처음에는 시안의 Tailwind 유틸리티를 옮겨 온 파일이었다. 2026-09-20 에
     토큰과 컴포넌트를 사이트 자기 체계로 합치면서 --c-* / .btn2 / .card2 는 전부 사라졌다.
   - 토큰(--color-*)과 공통 클래스(.wrap/.section/.btn/.card/.badge)는 site.css 소유다.
     여기서 다시 정의하지 않는다. 이 파일에는 홈 전용 블록만 있다.
   - 모바일 퍼스트. 브레이크포인트 640px / 768px(주문 카드 3열) / 1024px.
   ========================================================================== */

.home {
    display: block;
}

/* sticky 헤더 아래로 앵커가 숨지 않게 (HOME_SPEC §9).
   .section 에는 site.css 가 이미 넣어 두었지만, 히어로처럼 .section 이 아닌
   섹션이 나중에 id 를 갖게 돼도 규칙이 새지 않도록 홈 전체에 한 번 더 건다.
   ★ 값은 반드시 site.css 와 같은 식이어야 한다. 예전에는 양쪽에 80px 이 따로 적혀 있었고,
     실제 헤더는 122px 이라 두 곳이 사이좋게 40px 씩 틀려 있었다. */
.home section[id] {
    scroll-margin-top: calc(var(--header-stack) + var(--space-4));
}

/* 모바일에서만 줄을 끊는 <br> (시안의 sm:hidden) */
@media (min-width: 640px) {
    .br-mobile {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   1. 히어로 — 말의 층 + 땅의 층

   글자를 사진에서 내렸다(2026-09-20). 근거는 home/index.html 의 히어로 주석에 있다.
   요약하면: 사진 위에 글자를 얹는 한, 그늘막을 몇 겹 쌓아도 주 버튼이 배경 대비
   1.4:1 을 못 넘었다. 층을 가르면 그 싸움 자체가 없어진다.
   -------------------------------------------------------------------------- */
.hero {
    display: block;
}

/* 말의 층 — 밝은 면. 이 화면에서 대담함을 쓰는 곳은 여기 제목 하나다. */
.hero__say {
    padding-block: var(--space-10) var(--space-12);
}

/*
  제목.

  ★ 고운바탕 700. 사이트에서 가장 큰 글자이고, 이 농원의 목소리가 실리는 유일한 자리다.
    "껍질째 드셔 보세요" 는 파는 말이 아니라 <말해 주는 말> 이라, 고딕으로 크게 쓰면
    같은 문장이 배너가 된다.

  ★★ 한 구절만 색을 바꾸지 않는다. 예전에는 '청송 송골농원' 만 빨갛게 했는데,
    그건 어느 사이트에나 있는 기본값이고 여기서는 부리체 자체가 이미 강조다.
    강조를 두 번 하면 어느 쪽도 강조가 아니게 된다.

  ★★★ 글자 그림자가 없다. 밝은 면 위 먹빛이라 15:1 이다.
*/
/*
  ★ word-break: keep-all — 한글 어절을 중간에서 끊지 않는다.
    이 값이 없으면 '사과입니다' 가 '사과입니 / 다' 로 갈릴 수 있다.
    375px 에서는 세 줄이 되는데, 끊기는 자리가
      껍질째 드셔 보세요. / 청송 송골농원 / 사과입니다.
    라 농원 이름이 제 줄을 갖는다. 우연히 그렇게 된 것이 아니라 어절 단위로 끊어서 그렇다.
*/
.hero__title {
    font-size: 2.375rem;        /* 38px */
    line-height: 1.3;
    letter-spacing: -0.005em;
    font-weight: 700;
    color: var(--color-text);
    word-break: keep-all;
}

.hero__lead {
    margin-top: var(--space-5);
    max-width: var(--measure);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/*
  우수관리인증.

  ★ 버튼 아래다. 믿을 근거는 제목 위에 얹는 장식이 아니라,
    "정말인가" 를 물을 때 손이 닿는 자리에 있어야 한다.
  ★★ 인증번호는 Pretendard 고정폭 숫자로 그린다 — 조회해 볼 값이라 자릿수가 읽혀야 한다.
*/
.hero__gap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.hero__gap img {
    display: block;
    height: 2.25rem;
    width: auto;
    flex: 0 0 auto;
}

/*
  땅의 층 — 사진 전폭. 글자를 한 자도 얹지 않는다.

  ★ 높이를 vh 로 잡지 않는다. 모바일 브라우저는 주소창이 접히고 펴지면서 vh 가 바뀌어,
    스크롤할 때 사진이 늘었다 줄었다 한다. 가로세로비로 잡으면 그 일이 없다.
*/
.hero__land {
    background: var(--color-dark);   /* 사진 로드 전/실패 시의 바탕 */
}

.hero__bg {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 55%;     /* 가지에 달린 사과가 가운데 오도록 */
}

@media (min-width: 640px) {
    .hero__say {
        padding-block: var(--space-16) var(--space-16);
    }

    .hero__title {
        font-size: 3.25rem;          /* 52px */
        line-height: 1.2;
    }

    .hero__lead {
        font-size: var(--font-size-md);
    }

    .hero__actions {
        flex-direction: row;
    }

    .hero__bg {
        aspect-ratio: 21 / 9;
    }
}

/* --------------------------------------------------------------------------
   2. 인증 스트립

   칸 사이 1px 선은 border 가 아니라 grid gap(1px) + 바깥 배경색으로 만든다.
   그래야 칸이 2열/4열로 바뀌어도 선이 어긋나지 않는다.
   -------------------------------------------------------------------------- */
/*
  ★ 통계 띠가 아니라 <확인할 수 있는 사실 목록> 이다.

    예전에는 작은 라벨 위 + 큰 값 아래를 네 칸으로 가운데 정렬해 두었다.
    그 형태는 "이 숫자들을 서로 견주어 보라" 는 뜻인데, 여기 있는 넷은 견줄 수 있는
    수치가 아니다 — 인증번호 · 신고번호 · 지역 · 판매 방식이다. 형태가 내용을 속이고 있었다.

    지금은 <무엇 / 값> 을 한 줄로 왼쪽에 세운다. 가운데 정렬을 버린 이유는
    한 줄씩 훑을 때 눈이 매번 줄 가운데를 다시 찾아야 하기 때문이다. 왼쪽 축이 하나면
    위에서 아래로 그냥 내려 읽힌다.

  ★★ 번호 둘(GAP · 통신판매업)은 고정폭 숫자로 그린다. 조회해 볼 값이라
    자릿수가 흔들리면 옮겨 적다가 틀린다.
*/
.certs {
    background: var(--color-tint);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.certs__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-2) var(--container-pad);
}

.certs__cell {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    min-width: 0;
    padding-block: var(--space-3);
}

/* 줄 사이 실선. 마지막 줄 아래는 섹션 테두리가 이미 있으므로 겹치지 않게 끈다. */
.certs__cell + .certs__cell {
    border-top: 1px solid var(--color-border);
}

.certs__term {
    flex: 0 0 auto;
    min-width: 7.5rem;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.certs__value {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    /* 한글 어절이 중간에서 끊기지 않게 한다. */
    word-break: keep-all;
}

@media (min-width: 640px) {
    .certs__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space-10);
    }

    /*
      2열이 되면 "위 칸과의 선" 이 아니라 "각 열의 첫 줄만 선이 없다" 로 바뀐다.
      1·2번째 칸이 각 열의 머리이므로 그 둘만 선을 끈다.
    */
    .certs__cell + .certs__cell {
        border-top: 1px solid var(--color-border);
    }

    .certs__cell:nth-child(2) {
        border-top: 0;
    }
}

/*
  ★ 4열로 가지 않는다.

    예전에는 1024px 이상에서 네 칸으로 쪼갰다. 그때 남긴 주석이 이유를 말해 준다 —
    640px 에서 4열로 쪼개면 통신판매업 신고번호(2007-경북청송-00010, 19자)가
    '2007-경북청송-000 / 10' 으로 잘려서, 신뢰를 보여 주려고 둔 줄에서 번호가 깨진다고.

    칸을 좁히면 번호가 깨진다는 것은 <이 내용이 칸에 안 맞는다> 는 뜻이다.
    화면이 넓어질 때까지 기다릴 게 아니라 형태를 바꿔야 한다.
    2열까지만 간다. 각 줄은 <무엇 / 값> 한 줄이라 가로로 길어도 읽힌다.
*/

/* --------------------------------------------------------------------------
   소식 판이 놓이는 띠

   ★ 예전에는 여기 주석이 "캐러셀 없음 — 자동 회전은 만들지 않는다" 였다.
     지금은 <옆으로 넘겨 보는> 판이 맞다(농원주가 그렇게 요청했다).
     다만 <b>자동 회전은 여전히 없다</b> — 천천히 읽는 분에게 자동 전환은
     읽던 것을 빼앗는 동작이라, 그 결론만은 그대로 남긴다.
     넘기는 일은 .slider 규칙이 맡는다(이 파일 아래쪽).
   -------------------------------------------------------------------------- */
.slider {
    padding-block: 2.5rem;
    background: var(--color-tint);
    border-bottom: 1px solid var(--color-border);
}

/*
  띠 바로 아래가 연회색 섹션(주문 방법)이면 <선이 두 줄로 겹친다> —
  띠의 border-bottom 1px 과 .section--tint 의 border-top 1px 이 같은 색으로 맞붙어
  2px 짜리 이중선이 생긴다. 배경색까지 같아서(--color-tint) 더 눈에 띈다.
  띠 쪽 선을 남기고 섹션 쪽을 끈다.
*/
.slider + .section--tint {
    border-top: 0;
}

@media (min-width: 640px) {
    .slider {
        padding-block: 3rem;
    }

    /* 넓은 화면에서 한 장이 화면을 다 먹으면 사진만 거대해진다. 폭을 묶고 가운데 세운다. */
    .slider__frame {
        max-width: 44rem;
        margin-inline: auto;
    }
}

/* --------------------------------------------------------------------------
   3. 사과 고르기
   -------------------------------------------------------------------------- */
.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.products > * {
    min-width: 0;
}

.product-card__name {
    margin-top: .75rem;
}

/*
  ★ 카드 전체가 링크가 되면서 선택자가 바뀌었다.
    예전에는 .product-card__name a (이름 글자 안의 <a>) 였는데, 이제 <a> 가 카드를 감싼다.
    옛 선택자를 그대로 두면 아무것도 걸리지 않아 hover 표시가 조용히 사라진다.
*/
.product-card__link:hover .product-card__name,
.product-card__link:focus-visible .product-card__name {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/*
  카드가 눌리는 것이라는 표시. 손님이 "여기를 누르면 되는구나" 를 알아야 한다.
  ★ .card2 가 overflow:hidden 이라, 링크에 <바깥으로> 그린 아웃라인은 잘려 안 보인다.
    안쪽으로 그려서(-2px) 키보드 초점이 카드 테두리에 또렷이 남게 한다.
*/
.products .product-card__link {
    border-radius: inherit;
}

.products .product-card__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.products .product-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow);
}

.product-card__desc {
    flex: 1 1 auto;
    margin-top: .5rem;
}

.product-card__price {
    margin-top: 1.25rem;
    font-size: 1.5rem;         /* 24px */
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}

.product-card__won {
    margin-left: .125rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* 품종 문의 카드의 "수확 시기 문의" — 값이 없는 자리라 가격보다 한 단계 작게 둔다 */
.product-card__ask {
    margin-top: 1.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

.product-card__note {
    margin-top: .25rem;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* 품절 표시는 데이터가 품절일 때만 나온다(시안에는 없던 자리) */
.product-card__soldout-chip {
    margin-top: .5rem;
    background: var(--color-tint);
    color: var(--color-text-muted);
}

/* 가격 안내 박스 */
/* 실측 14px 에 한 줄 153자 — 이 페이지에서 가장 긴 줄이었다.
   소포장·흠과 문의 안내라 실제로 전화를 부르는 문장이다. */
.notebox {
    display: grid;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    max-width: var(--measure);
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-tint);
    font-size: var(--font-size-sm);
    line-height: 1.75;
    color: var(--color-text-muted);
}

.notebox strong {
    font-weight: 600;
    color: var(--color-text);
}

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

    /* 2열일 때 세 번째(품종 문의) 카드가 혼자 반 칸으로 남지 않게 두 칸을 쓴다 */
    .product-card--ask {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .products {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-card--ask {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------------------
   4. 주문 방법
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   4-0. 사이트 주문 (주 카드)

   ★ 폭 전체를 쓰는 카드 한 장 + 그 아래 3열 카드. 4열로 만들지 않은 이유:
     768px 에서 격자가 3열이라 넷째 칸이 혼자 남고, 무엇보다 <넷 중 하나>가 되면
     사이트 주문이 전화·문자와 같은 급으로 읽힌다. 위아래로 나눠야 순서가 보인다.
   -------------------------------------------------------------------------- */
.order-lead {
    display: grid;
    gap: var(--space-6);
    margin-top: 2.5rem;
    padding: var(--space-6);
    /* 강조 테두리는 이 구획에서 이 카드 하나뿐이다(아래 --messenger 주석 참고) */
    border: 2px solid var(--color-primary);
}

.order-lead__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}

/* 단계 목록. 번호는 원 안에 넣어 <몇 단계인지>가 글보다 먼저 보이게 한다. */
.order-steps {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.order-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-3);
}

.order-steps__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.order-steps__text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
}

/* 각 단계의 근거(배송비·결제 수단·송장). 여기가 실제로 전화를 줄이는 자리다. */
.order-steps__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.order-lead__side {
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.order-lead__note {
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* 3열 카드 위의 작은 머리말. 아래 셋이 <대안>임을 한 줄로 말해 준다. */
.orders__label {
    margin-top: var(--space-8);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
}

.orders {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    /* 2.5rem 이었다. 바로 위에 .orders__label 한 줄이 생겼으므로 그만큼 당긴다 —
       라벨과 그것이 가리키는 카드가 떨어져 있으면 라벨이 아니라 떠 있는 문장이 된다. */
    margin-top: var(--space-4);
}

.orders > * {
    min-width: 0;
}

/* .card2 는 여백이 없는 껍데기다. 주문 카드는 본문 래퍼 없이 카드 자체에 여백을 준다. */
.order-card {
    padding: 1.75rem;
}

/* 카카오톡 카드만 테두리를 굵게 해 첫 번째 선택지임을 드러낸다 */
.order-card--kakao {
    border: 2px solid var(--color-kakao-bg);
}

/* 메신저 문의 카드(카카오톡 채널 + 네이버 톡톡).
   테두리는 카카오 노랑 그대로 둔다. 두 색을 반씩 섞으면 어느 쪽도 아닌 색이 된다.

   ★ 2px 이었다. 1px 로 낮춘다 — 이 구획에서 <굵은 테두리로 강조되는 카드>는
     이제 위쪽 .order-lead(사이트 주문) 하나여야 한다. 둘이 같이 굵으면
     손님 눈에는 "둘 다 주 선택지" 로 읽혀, 무엇이 기본인지 다시 흐려진다.
     브랜드 단서인 노랑은 그대로 남는다. */
.order-card--messenger {
    border: 1px solid var(--color-kakao-bg);
}

.order-card__icon--naver {
    background: var(--color-naver-bg);
    color: var(--color-naver-fg);
}

.order-card__icon--naver svg {
    width: 1.5rem;
    height: 1.5rem;
}

.order-card--messenger .order-card__text {
    flex: 1 1 auto;
}

/* 버튼 두 개를 세로로 쌓는다. 가로로 나누면 640~1023px 에서 글자가 두 줄로 접힌다. */
.order-card__ctas {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: 1.5rem;
}

.order-card__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.order-card__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
}

.order-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* 카카오 색은 회사가 정한 값이다. 바꾸지 말 것. */
.order-card__icon--kakao {
    background: var(--color-kakao-bg);
    color: var(--color-kakao-fg);
}

.order-card__icon--kakao svg {
    width: 1.5rem;
    height: 1.5rem;
}

.order-card__icon--red {
    background: var(--color-accent);
    color: #fff;
}

.order-card__icon--green {
    background: var(--color-primary);
    color: #fff;
}

.order-card__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.order-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}

.order-card__text {
    margin-top: 1rem;
    font-size: var(--font-size-xs);
    line-height: 1.75;
    color: var(--color-text-muted);
}

/* 카카오 카드는 본문이 늘어나 버튼이 카드 아래에 붙게 한다 */
.order-card--kakao .order-card__text {
    flex: 1 1 auto;
}

.order-card__cta {
    margin-top: 1.5rem;
}

.order-card__grow {
    flex: 1 1 auto;
}

.order-card__list {
    display: grid;
    gap: .625rem;
    flex: 1 1 auto;
    margin-top: 1rem;
    font-size: var(--font-size-xs);
}

.order-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.order-card__row dt {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text-muted);
}

.order-card__row dd {
    min-width: 0;
    text-align: right;
}

.order-card__strong {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

.order-card__link {
    font-weight: 700;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.order-card__strong:hover,
.order-card__strong:focus-visible,
.order-card__link:hover,
.order-card__link:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.order-card__sub {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text-muted);
}

.order-card__hint {
    margin-top: 1rem;
    padding: .75rem .875rem;
    border-radius: .5rem;
    background: var(--color-tint);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.order-card__hint--plain {
    padding: 0;
    background: none;
    color: var(--color-text-muted);
}

.order-card__bank {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-tint);
}

.order-card__bank-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
}

.order-card__bank-no {
    margin-top: .25rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.order-card__bank-holder {
    margin-top: .25rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 카드가 셋이라 2열로 나누면 한 장이 혼자 남는다. 시안대로 768px 에서 바로 3열로 간다. */
@media (min-width: 768px) {
    .orders {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 주 카드는 [단계 설명 | 버튼] 두 칸. 버튼 칸은 18rem 으로 고정해
       단계 글이 길어져도 버튼 폭이 흔들리지 않게 한다(아래 3열 카드와 같은 안정감). */
    .order-lead {
        grid-template-columns: 1fr 18rem;
        gap: var(--space-8);
        padding: var(--space-8);
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
   5. 농원 이야기
   -------------------------------------------------------------------------- */
.story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.story > * {
    min-width: 0;
}

.story__body {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.75rem;
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-muted);
}

.story__body strong {
    font-weight: 600;
    color: var(--color-text);
}

.story__gap {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-light);
}

.story__gap img {
    display: block;
    height: 2.25rem;
    width: auto;
}

.story__gap-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text);
}

.story__gap-no {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 사진 두 장. 오른쪽 장을 아래로 내려 어긋나게 둔다(시안). */
.story__photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.story__photos img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-tint);
}

.story__photo--offset {
    margin-top: 2rem;
}

@media (min-width: 1024px) {
    .story {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   6. 농원 소식 (시안에 없는 우리 섹션 — 시안과 같은 시각 언어로 맞춘다)
   -------------------------------------------------------------------------- */
.news {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.news__col {
    min-width: 0;
}

.news__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

.news__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ★ 24px 과녁이었다. 제목 줄 높이를 밀지 않도록 음수 여백으로 되돌린다. */
.news__more {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin-block: calc((var(--tap-min) - 1.5em) / -2);
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.news__more:hover,
.news__more:focus-visible {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/*
  ★ 줄은 55px 인데 <누를 수 있는 곳은 27px> 이었다.
    글자 높이가 곧 과녁이어서, 줄 위아래 여백을 누르면 아무 일도 안 일어났다.
    보이는 것이 누를 수 있는 것보다 크면 "눌렀는데 안 눌린다" 가 된다 —
    어르신은 이걸 고장이 아니라 <내가 잘못 눌렀다> 로 받아들이신다.

    줄의 세로 여백을 링크 쪽으로 옮겨, 줄 전체가 과녁이 되게 한다.
*/
.news__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .25rem;
    border-bottom: 1px solid var(--color-border);
}

.news__item:last-child {
    border-bottom: 0;
}

.news__link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    color: var(--color-text);
}

.news__link:hover,
.news__link:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.news__date {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.news__gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

.news__gallery > li {
    min-width: 0;
}

.news__thumb {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.news__thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .75rem;
    background: var(--color-tint);
}

.news__thumb-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}

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

@media (min-width: 640px) {
    .news__gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .news {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   7. 자주 묻는 질문

   JS 를 쓰지 않는다. <details>/<summary> 가 열림 상태를 스스로 들고 있고,
   ＋ 기호는 details[open] 에서 45도 돌아 ×(닫기)처럼 보인다.
   -------------------------------------------------------------------------- */
.faq {
    /* 시안 max-w-3xl(768px) + 좌우 여백. .wrap 의 1152px 을 이 섹션에서만 좁힌다. */
    max-width: calc(48rem + var(--container-pad) * 2);
}

.faq__list {
    margin-top: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
}

.faq__item + .faq__item {
    border-top: 1px solid var(--color-border);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;   /* Firefox 의 삼각형 마커 제거 */
}

.faq__q::-webkit-details-marker {
    display: none;      /* Safari/구 Chrome 마커 제거 */
}

/* ★ stone-400 은 흰 바탕 2.52:1 — 펼칠 수 있다는 유일한 신호가 안 보였다. 5.41:1 로 올린다. */
.faq__mark {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform var(--transition);
}

.faq__item[open] .faq__mark {
    transform: rotate(45deg);
}

/*
  FAQ 답변.
  ★ 실측 14px 에 한 줄 109자였다. "궁금해서 읽으러 온" 글인데 이 페이지에서 가장 읽기 어려웠다.
    본문 크기로 올리고 폭을 제한한다. 색도 한 단계 진하게 — 회색 위 회색이 아니라 읽을 글이다.
*/
.faq__a {
    padding: 0 1.5rem 1.5rem;
    max-width: var(--measure);
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   8. 오시는 길
   -------------------------------------------------------------------------- */
.visit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.visit > * {
    min-width: 0;
}

.visit__address {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-muted);
}

.visit__actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.75rem;
}

.visit__note {
    margin-top: 1.5rem;
    font-size: var(--font-size-xs);
    line-height: 1.75;
    color: var(--color-text-muted);
}

.visit__photo {
    display: block;
    width: 100%;
    height: 18rem;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-tint);
}

@media (min-width: 640px) {
    .visit__actions {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .visit {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .visit__photo {
        height: 24rem;
    }
}

/* ==========================================================================
   소식 슬라이더 (배너 + 사진 있는 공지)

   ★ 넘기는 일을 CSS 가 한다. scroll-snap 이라 스크립트가 없어도 손가락으로 밀면 넘어가고,
     키보드로도 track 에 포커스를 줘서 좌우키로 넘길 수 있다.
     JS 는 <화살표와 현재 위치>만 얹는다 — 없으면 손잡이가 하나 줄 뿐 기능은 그대로다.
   ★★ 자동 전환이 없다. 천천히 읽는 분에게 자동 전환은 읽던 것을 빼앗는 동작이다.
   ========================================================================== */
.slider__frame {
    position: relative;
}

.slider__track {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* 가로 스크롤바가 판 아래에 굵게 깔리면 "고장 난 것" 처럼 보인다. 손가락과 화살표로 넘긴다. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}
.slider__track::-webkit-scrollbar { display: none; }

.slider__track:focus-visible {
    outline: 3px solid var(--color-focus, #1F5FA9);
    outline-offset: 3px;
}

.slider__item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    position: relative;
}

.slider__link {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.slider__img {
    display: block;
    width: 100%;
    height: auto;
    /* 관리자가 아무 크기나 올린다. 비율을 고정하고 가운데를 기준으로 채운다. */
    aspect-ratio: 12 / 5;
    object-fit: cover;
    background: var(--color-tint);
}

.slider__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-dark);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

/* 화살표. 48px 은 이 프로젝트의 최소 터치타깃이고, 어르신 손가락이 닿는 크기다. */
.slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--color-text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.slider__nav:hover { background: #fff; }
.slider__nav:focus-visible {
    outline: 3px solid var(--color-focus, #1F5FA9);
    outline-offset: 2px;
}
.slider__nav--prev { left: var(--space-2); }
.slider__nav--next { right: var(--space-2); }

.slider__count {
    margin: var(--space-2) 0 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
}

/* 움직임을 줄여 달라고 한 분에게는 부드러운 스크롤을 쓰지 않는다. */
@media (prefers-reduced-motion: reduce) {
    .slider__track { scroll-behavior: auto; }
}

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

   목업 120~156 히어로 · 165~187 상품 격자 · 230~256 믿음 띠의 모양을 입힌다.
   ★ 글씨 크기는 목업을 따르지 않는다(어르신 기준 토큰 그대로 — 농원주 결정).
   ========================================================================== */

/*
  ---- 히어로: 농원 실제 사진 + 유리 카드 ---------------------------------------
  ★ 처음에는 목업처럼 빨강→호박 그라데이션을 깔았는데, 농원주가 "빨간색은 지우고 실제사진으로만" 을
    골랐다(2026-09-24). 사진을 그대로 온 화면에 깐다.
  ★★ 사진 위에 흰 글씨를 얹으려면 어둡게 누르는 막이 한 겹은 있어야 한다(아래 ::before).
    색이 아니라 <무채색 그늘>이다 — 사진의 빨간 사과 색은 그대로 보인다.
    그늘은 글씨가 있는 왼쪽이 짙고 오른쪽으로 갈수록 옅다.
*/
.hero--mock {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: #1f2937;                        /* 사진이 오기 전 · 못 받았을 때의 바탕 */
}

.hero--mock::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .42) 55%, rgb(0 0 0 / .18) 100%);
}

/* 농원 사진은 그라데이션 밑에 옅게 깐다 — 색은 목업, 결은 이 밭이다. */
.hero--mock .hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

/* 목업의 점무늬는 빨강 바탕용이었다. 사진 위에서는 먼지처럼 보여 끈다. */
.hero--mock .hero__pattern {
    display: none;
}

.hero__grid {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-12) calc(var(--space-16) + var(--space-4));
}

@media (min-width: 900px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: var(--space-12);
    }
}

.hero--mock .hero__say {
    padding: 0;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.hero--mock .hero__title {
    margin-top: var(--space-4);
    font-size: clamp(2.125rem, 5vw, 3.25rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 2px 16px rgb(0 0 0 / .45);
}

.hero--mock .hero__lead {
    margin-top: var(--space-4);
    color: #fff;
    text-shadow: 0 1px 8px rgb(0 0 0 / .5);
    font-weight: 500;
}

.hero--mock .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.btn--hero {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
}

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

.btn--hero .icon,
.btn--hero-ghost .icon {
    width: 1.1em;
    height: 1.1em;
}

.btn--hero-ghost {
    background: rgb(17 24 39 / .55);
    border-color: rgb(255 255 255 / .4);
    color: #fff;
}

.btn--hero-ghost .icon {
    color: #fcd34d;
}

.btn--hero-ghost:hover,
.btn--hero-ghost:focus-visible {
    background: rgb(17 24 39 / .8);
    border-color: rgb(255 255 255 / .6);
    color: #fff;
}

/* 오른쪽 유리 카드 */
.hero__card {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    padding: var(--space-6);
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: var(--radius-lg);
    background: rgb(17 24 39 / .38);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-align: center;
}

.hero__card-mark {
    display: grid;
    place-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.hero__card-mark img {
    display: block;
    height: 2.5rem;
    width: auto;
}

.hero__card-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hero__card-text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: #fff;
}

.hero__card-text strong {
    display: block;
    margin-top: 2px;
    color: #fde68a;
}

.hero__card-bank {
    display: grid;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    background: rgb(0 0 0 / .22);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: #fef3c7;
    font-variant-numeric: tabular-nums;
}

.hero__card-holder {
    font-weight: 500;
    color: #fff;
}

.hero__card-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid rgb(255 255 255 / .45);
    border-radius: var(--radius-pill);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
}

.hero__card-copy:hover,
.hero__card-copy:focus-visible {
    background: rgb(255 255 255 / .16);
}

/* ---- 인증 카드: 히어로 아래에 걸쳐 뜬 흰 카드 넷 ------------------------ */
.certs {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--space-12) * -1);
    background: transparent;
    border: 0;
}

.certs__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: 0;
}

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

@media (min-width: 1024px) {
    .certs__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

.certs__cell,
.certs__cell + .certs__cell {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.certs__cell .icon {
    grid-row: 1 / span 2;
    width: 2.75rem;
    height: 2.75rem;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.certs__term {
    min-width: 0;
    line-height: 1.4;
}

.certs__value {
    line-height: 1.4;
}

/* ---- 상품 카드: 정사각 사진 + 산지직송 딱지 + 빨강 값 --------------------- */
.home .section__label {
    color: var(--color-primary-dark);
}

.products .product-card {
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.products .product-card .card__media {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .3s ease;
}

.products .product-card:hover .card__media {
    transform: scale(1.04);
}

.product-card__link {
    position: relative;
    display: block;
    overflow: hidden;
}

.product-card__origin {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.products .product-card__price {
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .products .product-card .card__media {
        transition: none;
    }

    .products .product-card:hover .card__media {
        transform: none;
    }
}

/* ---- 믿음 띠: 호박색 옅은 바탕에 흰 카드 넷 ------------------------------ */
.trust {
    padding-block: var(--space-12);
    background: #fffbeb;
    border-block: 1px solid #fde68a;
}

.trust__grid {
    display: grid;
    gap: var(--space-4);
    margin: 0 auto;
    padding-inline: var(--container-pad);
    list-style: none;
}

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

@media (min-width: 1024px) {
    .trust__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.trust__item {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border: 1px solid #fde68a;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.trust__item .icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
}

.trust__item:nth-child(2) .icon {
    color: #d97706;
}

.trust__item:nth-child(3) .icon {
    color: #15803d;
}

.trust__item:nth-child(4) .icon {
    color: #1d4ed8;
}

.trust__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
}

.trust__text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.trust__text a {
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* ==========================================================================
   홈 — 짧은 히어로 · 할인쿠폰 줄 · 바로 보이는 상품 (2026-09-24)

   농원주 요청: "메인히어로 레이아웃은 줄이고 간략하게 바로 상품리스트가 보이고 할인쿠폰도 보이도록".
   ★ 히어로 높이를 반쯤으로 줄인다. 첫 화면 아래쪽에 쿠폰(있으면)과 상품 머리가 걸려 보여야 한다.
   ★★ 휴대폰에서는 오른쪽 안내 카드를 접는다 — 계좌 · 배송 안내는 바닥과 주문서에 그대로 있다.
   ★★★ 쿠폰 카드: 목업의 주황 그라데이션을 따르되 흰 글씨가 읽히는 짙은 주황(#c2410c → #9a3412)으로 둔다.
       목업 색(#f59e0b)에 흰 글씨는 대비가 2:1 남짓이라 어르신 눈에 안 읽힌다. 흰 글씨 대비 5.2:1 이상.
   ========================================================================== */

.hero__grid {
    gap: var(--space-6);
    padding-block: var(--space-8) var(--space-10);
}

.hero--mock .hero__title {
    margin-top: var(--space-3);
    font-size: clamp(1.875rem, 4vw, 2.625rem);
}

.hero--mock .hero__lead {
    margin-top: var(--space-3);
}

.hero--mock .hero__actions {
    margin-top: var(--space-5);
}

.hero__card {
    gap: var(--space-2);
    padding: var(--space-5);
}

@media (max-width: 899px) {
    .hero__grid {
        padding-block: var(--space-6) var(--space-8);
    }

    .hero__card {
        display: none;
    }
}

/* ── 할인쿠폰 줄 ─────────────────────────────────────────────────────── */
.home-coupons {
    padding-block: var(--space-6) 0;
}

.home-coupons__list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .home-coupons__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, #c2410c 0%, #9a3412 100%);
    color: #fff;
    box-shadow: var(--shadow);
}

.home-coupon__body {
    min-width: 0;
}

.home-coupon__tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: rgb(0 0 0 / .25);
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: .02em;
}

.home-coupon__name {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.4;
}

.home-coupon__name strong {
    margin-left: 4px;
    font-weight: 800;
}

.home-coupon__cond {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: #ffedd5;                             /* #9a3412 위 대비 7.9:1 */
}

.home-coupon__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    background: #fff;
    color: #9a3412;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.home-coupon__btn:hover,
.home-coupon__btn:focus-visible {
    background: #ffedd5;
}

.home-coupons__note {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
}

.home-coupons__note a {
    margin-left: 6px;
    font-weight: 700;
}

/* ── 상품 머리: 제목 한 줄 + 분류 알약 ──────────────────────────────── */
.section--compact {
    padding-top: var(--space-8);
}

.home-products__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.home-products__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.home-products__title .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--color-primary);
}

.home-products__lead {
    margin: 4px 0 0;
    color: var(--color-text-muted);
}

.home-products__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.home-products__pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

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

.home-products__pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* 첫 화면(노트북 1280×800)에 상품 머리와 카드 윗부분이 걸리도록 한 번 더 조인다. */
.hero__grid {
    padding-block: var(--space-6) var(--space-6);
}

.hero--mock .hero__title {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
}

.hero--mock .hero__eyebrow {
    padding: 4px 12px;
}

.hero__card {
    padding: var(--space-4);
}

.home-coupons {
    padding-top: var(--space-4);
}

.home-coupon {
    padding: var(--space-3) var(--space-5);
}

.home-coupon__name {
    margin-top: 4px;
}

.section--compact {
    padding-top: var(--space-6);
}

.home-products__head {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
}

/* 휴대폰: 쿠폰을 세로로 쌓으면 상품이 첫 화면 밖으로 밀린다(두 장이면 400px 넘게).
   옆으로 밀어 보는 한 줄로 두고, 다음 장이 살짝 보이게 해 "옆에 더 있다" 를 알린다. */
@media (max-width: 767px) {
    .home-coupons__list {
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2);
    }

    .home-coupon {
        scroll-snap-align: start;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .home-coupon__btn {
        justify-content: center;
    }

    .home-coupon--teaser {
        flex-direction: row;
        align-items: center;
    }
}

/* ── [쿠폰 받기] (2026-09-24) ─────────────────────────────────────────
   농원주 요청: "쿠폰 받기 버튼도 추가해줘". 누구나 받기가 켜진 쿠폰 카드에 붙는다.
   받은 쿠폰은 단추 대신 '받은 쿠폰' 표시(누를 것이 없다) — 카드를 흐리게 해 "이미 받았다" 를 알린다. */
.home-coupon__form {
    flex: 0 0 auto;
    margin: 0;
}

.home-coupon__form .home-coupon__btn {
    gap: 6px;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.home-coupon__btn .icon {
    width: 1.1em;
    height: 1.1em;
}

.home-coupon__btn--done {
    gap: 6px;
    background: rgb(255 255 255 / .2);
    color: #fff;
    cursor: default;
}

.home-coupon--owned {
    background: linear-gradient(120deg, #9a3412 0%, #7c2d12 100%);
}

.home-coupons__message {
    margin: 0 0 var(--space-3);
    font-weight: 700;
}

@media (max-width: 767px) {
    .home-coupon__form .home-coupon__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   홈 첫 화면 사진 슬라이드 (2026-09-24, site.js initHeroSlider · 관리자 [메인 사진])

   ★ 사진만 서서히 겹쳐 바뀐다. 글 · 단추 · 오른쪽 카드는 그대로다.
   ★★ 조작 줄은 히어로 아래 가운데. 단추는 모두 44px 이상(손이 떨리는 분도 누르게).
     사진 위라 반투명 어두운 판 위에 흰 아이콘을 둔다(어느 사진 위에서도 읽힌다).
   ★★★ 움직임 줄이기를 켠 손님에게는 겹쳐 바뀌는 움직임도 끈다.
   ========================================================================== */
.hero__slides {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #1f2937;
}

.hero__slides .hero__slide {
    opacity: 0;
    transition: opacity .9s ease;
}

.hero__slides .hero__slide.is-active {
    opacity: 1;
}

/* 조작 줄이 글 · 단추를 덮지 않게 아래를 비운다(두 장 이상일 때만). */
.hero--slides .hero__grid {
    padding-bottom: calc(var(--space-6) + 64px);
}

.hero__controls {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: var(--radius-pill);
    background: rgb(17 24 39 / .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translateX(-50%);
}

.hero__controls[hidden] {
    display: none;
}

.hero__ctl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / .14);
    color: #fff;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
}

.hero__ctl[hidden] {
    display: none;
}

.hero__ctl:hover {
    background: rgb(255 255 255 / .28);
}

.hero__ctl:focus-visible,
.hero__dot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.hero__ctl .icon {
    width: 22px;
    height: 22px;
}

.hero__ctl-icon {
    display: inline-flex;
}

.hero__ctl-icon--play,
.hero__ctl.is-paused .hero__ctl-icon--pause {
    display: none;
}

.hero__ctl.is-paused .hero__ctl-icon--play {
    display: inline-flex;
}

.hero__dots {
    display: flex;
    align-items: center;
}

/* 점 자체는 작아도 누르는 자리는 44px 높이 · 32px 폭이다(26 → 32, 2026-09-25 — 옆 점과 헷갈리지 않게). */
.hero__dot {
    position: relative;
    width: 32px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hero__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / .55);
    transform: translate(-50%, -50%);
    transition: width .25s ease, background .25s ease;
}

.hero__dot:hover::before {
    background: rgb(255 255 255 / .85);
}

.hero__dot.is-active::before {
    width: 22px;
    background: #fff;
}

/* "3 / 7" — 휴대폰에서만 보인다(아래). */
.hero__count {
    display: none;
    min-width: 64px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--font-size-base);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    /* ★ 점 일곱 개를 한 줄에 넣으면 하나가 22px 였다 — WCAG 최소 누름 자리(24px)에도 못 미쳤다.
         휴대폰에서는 점을 걷고 [이전] "3 / 7" [다음] 으로 넘긴다. 누르는 것은 44px 단추 둘뿐이다. */
    .hero__dots {
        display: none;
    }

    .hero__count {
        display: inline-flex;
    }

    /* 좁은 화면에서는 [멈춤] 글자를 숨기고 아이콘만 — 글자는 화면낭독기에 그대로 남는다. */
    .hero__ctl--pause [data-hero-pause-label] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__slides .hero__slide,
    .hero__dot::before {
        transition: none;
    }
}

/* 농원 이야기 쪽(/about/story) — 홈에서 옮겨 온 .story 구획을 쪽 틀 안에 둔다. 쪽 틀이 이미 여백을 주므로 겹치지 않게. */
.story-page {
    padding-top: 0;
}

.story-page .wrap {
    max-width: none;
    padding-inline: 0;
}

@media (min-width: 1024px) {
    .hero__grid {
        column-gap: clamp(48px, 5vw, 80px);
    }

    .products,
    .orders {
        gap: 32px;
    }

    .certs__grid,
    .home-coupons__list {
        gap: 24px;
    }

    .story,
    .news {
        column-gap: clamp(48px, 4vw, 64px);
    }
}
/* 메인 사진과 쿠폰·상품 사이에 독립된 이미지 영역을 둔다. */
.home-event {
    padding-block: var(--space-8);
    border-block: 1px solid var(--color-border);
    background: var(--color-surface);
    scroll-margin-top: calc(var(--header-stack) + var(--space-4));
}
.home-event__frame { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.home-event__viewport { touch-action: pan-y; }
.home-event__slide[hidden], .home-event__controls[hidden] { display: none; }
.home-event__link { display: block; color: inherit; text-decoration: none; }
.home-event__image { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: contain; background: #fff; }
.home-event__controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px; border-top: 1px solid var(--color-border); }
.home-event__paging, .home-event__dots { display: flex; align-items: center; gap: 4px; }
.home-event__button, .home-event__dot { min-width: var(--tap-min); min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; }
.home-event__button { padding: 8px; font: inherit; font-size: var(--font-size-sm); white-space: nowrap; }
.home-event__button svg { width: 22px; height: 22px; }
.home-event__button:hover, .home-event__dot:hover { background: var(--color-bg); }
.home-event__button:disabled { color: var(--color-text-muted); cursor: default; }
.home-event__pause-icon, .home-event__play-icon { display: inline-flex; }
.home-event__play-icon, .home-event__pause[aria-pressed='true'] .home-event__pause-icon { display: none; }
.home-event__pause[aria-pressed='true'] .home-event__play-icon { display: inline-flex; }
.home-event__dot::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); }
.home-event__dot[aria-current='true']::before { width: 22px; border-radius: 8px; border-color: var(--color-primary); background: var(--color-primary); }
.home-event :focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
@media (max-width: 479px) {
    .home-event__controls { flex-wrap: wrap; gap: 0; padding-inline: 8px; }
    .home-event__dot { min-width: 36px; }
}