@charset "UTF-8";
/* =====================================================================
 * 제주 감귤농장 — 사이트 전체 디자인 (css/style.css, 한 파일)
 * 페이지 ID: JEJU-GYUL-CSS · 2026-10-27 · 담당: 디자인
 * 배치: 모바일 우선 앱 칸(최대 640px) 하나 → 641px부터 칸 가운데 정렬(양옆 회색)
 *       → 1100px부터 왼쪽 패널 · 앱 칸 · 오른쪽 패널 3단(양쪽 패널은 화면 위쪽에 고정).
 * 테마: body[data-theme] = gyul(기본) · dolham · hallasan · bada — 2절에서 토큰만 바꿔 덮는다.
 * 규칙: gy- 클래스만 쓴다. 전역 리셋 없음(요소 선택자는 :where(.gy-root) 아래 = 우선순위 0이라
 *       부품 클래스가 항상 이긴다). 색은 전부 토큰. 밝은 화면 하나(다크 모드 없음).
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * 1. 디자인 토큰 — 기본 테마 'gyul'(감귤)
 * ------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* 색 · 기본 7색 */
  --gy-page: #eef1eb;          /* 페이지 바탕: 초록 기운 도는 옅은 회색 */
  --gy-paper: #ffffff;         /* 앱 칸 바탕 */
  --gy-ink: #24292d;           /* 현무암 글자 (흰 바탕 14:1) */
  --gy-ink-soft: #5d646a;      /* 보조 글자 (흰 바탕 6:1) */
  --gy-accent: #ea6f0c;        /* 감귤 면색: 달력 막대·별점·표시 점 (흰 바탕 3.1:1 — 글자에는 쓰지 않는다) */
  --gy-accent-ink: #c24500;    /* 짙은 감귤: 할인율·강조 글자 (흰 바탕 5.1:1) */
  --gy-brand: #2e6b3e;         /* 귤잎: 배지·칩·안내 띠 (흰 바탕 6.4:1) */

  /* 색 · 위 색의 옅은 단계와 역할 색 */
  --gy-line: #e3e7e0;          /* 구분선 */
  --gy-line-strong: #c9cfc5;   /* 입력칸·테두리 단추 */
  --gy-fog: #f4f6f2;           /* 회색 상자 */
  --gy-accent-soft: #fff3e8;   /* 감귤 옅은 바탕 */
  --gy-brand-soft: #e9f2e7;    /* 귤잎 옅은 바탕 */
  --gy-on-brand: #ffffff;
  --gy-action: #c24500;        /* 구매하기 등 주 단추 바탕 */
  --gy-on-action: #ffffff;     /* 주 단추 글자 (5.1:1) */
  --gy-focus: #c24500;         /* 포커스 테두리 */
  --gy-on-photo: #ffffff;      /* 사진 위 글자 */
  --gy-kakao: #fee500;         /* 카카오톡 상담 단추 */
  --gy-kakao-ink: #191600;
  --gy-sw-gyul: #ea6f0c;       /* 테마 바꿔보기 단추의 색 점 */
  --gy-sw-dolham: #2b2e30;
  --gy-sw-hallasan: #1f5a3a;
  --gy-sw-bada: #0d5c63;

  /* 반투명·그림자 (역할이 있는 곳에만 쓴다) */
  --gy-scrim: rgba(20, 24, 22, 0.5);             /* 서랍·옵션 창 뒤 */
  --gy-ai-bg: rgba(16, 20, 18, 0.62);            /* AI 표시 알약 */
  --gy-hover: rgba(36, 41, 45, 0.06);
  --gy-top-hover: rgba(36, 41, 45, 0.06);
  --gy-action-hover: brightness(0.9);
  --gy-shadow-app: 0 0 0 1px rgba(36, 41, 45, 0.04), 0 6px 28px rgba(36, 41, 45, 0.07);
  --gy-shadow-float: 0 3px 12px rgba(36, 41, 45, 0.18);
  --gy-shadow-sheet: 0 -8px 30px rgba(36, 41, 45, 0.18);
  --gy-photo-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  /* 프로모 배너: 왼쪽 0~40% 거의 불투명한 흰색 → 66% 무렵 투명 (모든 테마에서 밝게) */
  --gy-promo-fade: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 40%, rgba(255, 255, 255, 0.55) 54%, rgba(255, 255, 255, 0) 66%);
  --gy-promo-dots-bg: rgba(255, 255, 255, 0.8);
  --gy-promo-halo: 0 0 14px rgba(255, 255, 255, 0.85);   /* 그라데이션이 옅어지는 쪽에서도 글자가 또렷하게 */
  /* PC 제주 배경 위 가독성 막(16-3)·유리 카드·그림자 */
  --gy-bg-film: linear-gradient(180deg, rgba(251, 250, 244, 0.42) 0%, rgba(240, 243, 236, 0.6) 100%);
  --gy-glass: rgba(255, 255, 255, 0.74);
  --gy-glass-line: rgba(255, 255, 255, 0.72);
  --gy-shadow-glass: 0 8px 28px rgba(28, 38, 30, 0.12);
  --gy-shadow-app-bg: 0 0 0 1px rgba(36, 41, 45, 0.06), 0 20px 56px rgba(24, 34, 28, 0.22);
  --gy-shadow-card: 0 1px 2px rgba(36, 41, 45, 0.06);
  --gy-shadow-card-hover: 0 12px 26px rgba(36, 41, 45, 0.14);
  --gy-shadow-face: 0 14px 30px rgba(28, 34, 30, 0.18);
  --gy-img-edge: rgba(36, 41, 45, 0.07);   /* 흰 바탕 사진 가장자리 가는 선 */
  /* 홈페이지 제작문의 띠(16-2) */
  --gy-inquiry-bg: #22272b;
  --gy-inquiry-ink: #f6f7f5;
  --gy-inquiry-soft: #c3c8cb;
  --gy-reel-pill: rgba(18, 22, 20, 0.62);   /* 레시피 영상 "▶ 레시피" 알약(16-9) */

  /* 글꼴 (구글 폰트: partials/fonts.html) */
  --gy-font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --gy-font-display: "Do Hyeon", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --gy-display-weight: 700;    /* 제목 글꼴이 한 굵기뿐이면 가짜 굵게는 끄고(font-synthesis) 대체 글꼴만 굵게 */
  --gy-display-tracking: 0;
  --gy-h-scale: 1;             /* 제목 크기 배율 */
  --gy-eyebrow-tracking: 0.02em;

  /* 간격·칸 */
  --gy-app: 640px;             /* 가운데 앱 칸 */
  --gy-side: 300px;            /* PC 양옆 패널 */
  --gy-gutter: 16px;           /* 칸 안쪽 좌우 여백 */
  --gy-top-h: 60px;            /* 상단 바 */
  --gy-tabs-h: 44px;           /* 탭 줄 */
  --gy-buybar-h: 64px;         /* 하단 고정 바 */

  /* 모서리 */
  --gy-radius: 12px;           /* 상자·카드 */
  --gy-radius-sm: 8px;         /* 작은 사진·입력칸 */
  --gy-radius-btn: 10px;       /* 단추 */
  --gy-radius-chip: 999px;     /* 칩·배지 */
  --gy-radius-face: 50%;       /* 농부 얼굴·아이콘 바탕·떠 있는 단추 */
  --gy-bar-radius: 6px;        /* 출하 달력 막대 끝 */

  /* 테마 성격 */
  --gy-hero-v: flex-end;       /* 배너 문구 세로 위치: flex-start 위 · center 가운데 · flex-end 아래 */
  --gy-hero-h: flex-start;     /* 배너 문구 가로 위치 */
  --gy-hero-align: left;
  --gy-hero-size: 30px;
  --gy-hero-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.26) 40%, rgba(0, 0, 0, 0) 64%);
  --gy-hero-ai-top: 12px;      /* 배너의 AI 표시 자리 — 문구와 겹치지 않는 쪽 */
  --gy-hero-ai-bottom: auto;
  --gy-hero-dots: center;      /* 배너 점 위치 */
  --gy-head-border: 0 solid transparent;  /* 구역 머리 밑줄 */
  --gy-head-pad: 0px;
  --gy-head-line: none;        /* 제목 옆으로 이어지는 가는 선: none | block */
  --gy-title-mark: none;       /* 제목 앞 작은 네모: none | inline-block */
  --gy-title-deco: none;       /* 제목 밑 물결선: none | underline */
  --gy-tab-mark-w: 2px;        /* 선택된 탭 밑줄 굵기 */
}

/* 다른 토큰을 참조하는 토큰은 테마를 바꾸면 다시 계산되도록 body(.gy-root)에 둔다 */
.gy-root {
  --gy-pad-l: max(var(--gy-gutter), env(safe-area-inset-left, 0px));
  --gy-pad-r: max(var(--gy-gutter), env(safe-area-inset-right, 0px));
  --gy-eyebrow: var(--gy-brand);
  --gy-tab-mark: var(--gy-ink);
  --gy-logo-mark: var(--gy-brand);
  --gy-top-bg: var(--gy-paper);
  --gy-top-ink: var(--gy-ink);
  --gy-top-line: var(--gy-line);
  --gy-top-focus: var(--gy-focus);
  --gy-sample-bg: var(--gy-brand);
  --gy-sample-ink: var(--gy-on-brand);
  --gy-foot-bg: var(--gy-fog);
  --gy-foot-ink: var(--gy-ink);
  --gy-foot-soft: var(--gy-ink-soft);
  --gy-foot-line: var(--gy-line);
  --gy-foot-focus: var(--gy-focus);
  --gy-farmer-bg: var(--gy-accent-soft);
  --gy-farmer-ink: var(--gy-ink);
  --gy-farmer-soft: var(--gy-ink-soft);
  --gy-farmer-eyebrow: var(--gy-brand);
  --gy-farmer-focus: var(--gy-focus);
  /* 프로모 배너의 배지·할인율·훅 강조색 = 할인율 행동색(모든 테마에서 짙은 주황 계열, 흰 글자 5:1 이상).
     테마의 단추색을 쓰고 싶으면 이 한 줄만 var(--gy-action)으로 바꾼다. */
  --gy-promo-hot: var(--gy-accent-ink);
}


/* ---------------------------------------------------------------------
 * 2. 테마 — 같은 HTML, 토큰만 덮어쓴다 (data-theme 없으면 위 gyul)
 * ------------------------------------------------------------------- */

/* 돌담: 현무암 회흑 + 주황 · 각진 모서리 · 아주 굵은 제목 · 배너 문구 가운데 · 구역 머리 굵은 밑줄 */
.gy-root[data-theme="dolham"] {
  --gy-page: #e2e4e1;
  --gy-ink: #1d1f21;
  --gy-ink-soft: #565b5f;
  --gy-accent: #e8650f;
  --gy-accent-ink: #b84300;
  --gy-brand: #34383b;
  --gy-line: #dcdedb;
  --gy-line-strong: #b9bdb8;
  --gy-fog: #f0f1ef;
  --gy-accent-soft: #fdeee4;
  --gy-brand-soft: #eceeed;
  --gy-action: #26292b;
  --gy-focus: #b84300;
  --gy-top-hover: rgba(255, 255, 255, 0.12);
  --gy-action-hover: brightness(1.45);
  --gy-font-display: "Black Han Sans", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --gy-display-tracking: 0.01em;
  --gy-h-scale: 0.94;
  --gy-eyebrow-tracking: 0.1em;
  --gy-radius: 2px;
  --gy-radius-sm: 2px;
  --gy-radius-btn: 2px;
  --gy-radius-chip: 2px;
  --gy-radius-face: 6px;
  --gy-bar-radius: 0px;
  --gy-hero-v: center;
  --gy-hero-h: center;
  --gy-hero-align: center;
  --gy-hero-size: 34px;
  --gy-hero-scrim: linear-gradient(rgba(20, 21, 22, 0.44), rgba(20, 21, 22, 0.44));
  --gy-head-border: 3px solid var(--gy-ink);
  --gy-head-pad: 10px;
  --gy-title-mark: inline-block;
  --gy-tab-mark-w: 3px;
  /* 파생 토큰 */
  --gy-eyebrow: var(--gy-accent-ink);
  --gy-tab-mark: var(--gy-accent);
  --gy-logo-mark: var(--gy-accent);
  --gy-top-bg: #232527;
  --gy-top-ink: #f4f5f4;
  --gy-top-line: #232527;
  --gy-top-focus: var(--gy-accent);
  --gy-sample-bg: var(--gy-accent-ink);
  --gy-foot-bg: #232527;
  --gy-foot-ink: #f1f2f1;
  --gy-foot-soft: #b9bdbf;
  --gy-foot-line: #3a3e41;
  --gy-foot-focus: var(--gy-accent);
  --gy-farmer-bg: #2a2d2f;
  --gy-farmer-ink: #f4f5f4;
  --gy-farmer-soft: #c3c7c9;
  --gy-farmer-eyebrow: #f0843a;
  --gy-farmer-focus: var(--gy-accent);
  --gy-bg-film: linear-gradient(180deg, rgba(236, 237, 235, 0.5) 0%, rgba(222, 224, 221, 0.66) 100%);
  --gy-inquiry-bg: #1b1d1f;
}

/* 한라산: 짙은 초록 + 귤색 · 둥근 모서리 · 바탕체 제목 · 배너 문구 위 · 구역 머리 옆으로 가는 선 */
.gy-root[data-theme="hallasan"] {
  --gy-page: #e7eee8;
  --gy-ink: #1f2a24;
  --gy-ink-soft: #526158;
  --gy-accent: #e2741a;
  --gy-accent-ink: #b04a00;
  --gy-brand: #1f5a3a;
  --gy-line: #dde7df;
  --gy-line-strong: #c2d0c5;
  --gy-fog: #f1f6f1;
  --gy-accent-soft: #fdf1e4;
  --gy-brand-soft: #e3efe6;
  --gy-action: #1f5a3a;
  --gy-focus: #b04a00;
  --gy-font-display: "Gowun Batang", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --gy-display-tracking: -0.01em;
  --gy-h-scale: 0.96;
  --gy-radius: 20px;
  --gy-radius-sm: 14px;
  --gy-radius-btn: 14px;
  --gy-radius-chip: 10px;
  --gy-radius-face: 30%;
  --gy-bar-radius: 999px;
  --gy-hero-v: flex-start;
  --gy-hero-h: flex-start;
  --gy-hero-align: left;
  --gy-hero-scrim: linear-gradient(to bottom, rgba(8, 28, 18, 0.72) 0%, rgba(8, 28, 18, 0.46) 46%, rgba(8, 28, 18, 0) 74%);
  --gy-hero-ai-top: auto;
  --gy-hero-ai-bottom: 12px;
  --gy-hero-dots: flex-end;
  --gy-head-line: block;
  /* 파생 토큰 */
  --gy-tab-mark: var(--gy-brand);
  --gy-foot-bg: #17382a;
  --gy-foot-ink: #eef3ee;
  --gy-foot-soft: #b5c7ba;
  --gy-foot-line: #2b4d3c;
  --gy-foot-focus: var(--gy-accent);
  --gy-farmer-bg: var(--gy-brand-soft);
  --gy-bg-film: linear-gradient(180deg, rgba(243, 248, 243, 0.42) 0%, rgba(228, 237, 230, 0.6) 100%);
  --gy-inquiry-bg: #17382a;
}

/* 바다: 짙은 청록 + 귤색 · 알약 단추 · 아주 굵은 고딕 제목에 귤색 물결 밑줄 · 배너 문구 아래 가운데 */
.gy-root[data-theme="bada"] {
  --gy-page: #e4eef0;
  --gy-ink: #1b2a2f;
  --gy-ink-soft: #4f6268;
  --gy-accent: #e2741a;
  --gy-accent-ink: #b04a00;
  --gy-brand: #0d5c63;
  --gy-line: #d9e6e8;
  --gy-line-strong: #bccfd2;
  --gy-fog: #eef5f6;
  --gy-accent-soft: #fdf1e4;
  --gy-brand-soft: #ddeff0;
  --gy-action: #0d5c63;
  --gy-focus: #b04a00;
  --gy-font-display: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --gy-display-weight: 800;
  --gy-display-tracking: -0.03em;
  --gy-h-scale: 0.94;
  --gy-radius: 16px;
  --gy-radius-sm: 12px;
  --gy-radius-btn: 999px;
  --gy-radius-chip: 999px;
  --gy-radius-face: 50%;
  --gy-bar-radius: 999px;
  --gy-hero-v: flex-end;
  --gy-hero-h: center;
  --gy-hero-align: center;
  --gy-hero-size: 28px;
  --gy-hero-scrim: linear-gradient(to top, rgba(4, 38, 44, 0.72) 0%, rgba(4, 38, 44, 0.3) 42%, rgba(4, 38, 44, 0) 66%);
  --gy-title-deco: underline;
  /* 파생 토큰 */
  --gy-tab-mark: var(--gy-brand);
  --gy-foot-bg: #0e3439;
  --gy-foot-ink: #eef6f7;
  --gy-foot-soft: #b0c8cc;
  --gy-foot-line: #22494f;
  --gy-foot-focus: var(--gy-accent);
  --gy-farmer-bg: var(--gy-brand-soft);
  --gy-bg-film: linear-gradient(180deg, rgba(242, 249, 252, 0.4) 0%, rgba(226, 238, 241, 0.6) 100%);
  --gy-inquiry-bg: #0e3439;
}


/* ---------------------------------------------------------------------
 * 3. 바탕
 * ------------------------------------------------------------------- */
:root { scrollbar-gutter: stable; }   /* 창을 열어 스크롤을 잠가도 화면이 옆으로 밀리지 않게 */

.gy-root {                           /* = body */
  margin: 0;
  min-height: 100vh;
  background: var(--gy-page);
  color: var(--gy-ink);
  font-family: var(--gy-font);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* 아이폰 노치 위 상태 표시줄 자리 칠하기 — 스크롤해도 글이 비치지 않게 */
.gy-root::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: env(safe-area-inset-top, 0px);
  background: var(--gy-top-bg);
  pointer-events: none;
}

/* 요소 기본값 (우선순위 0) */
:where(.gy-root) :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(.gy-root) :where(h1, h2, h3, h4) { font-size: inherit; font-weight: 700; line-height: 1.35; }
:where(.gy-root) :where(img, video) { display: block; max-width: 100%; height: auto; }
:where(.gy-root) a { color: inherit; text-decoration: none; }
:where(.gy-root) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.gy-root) :where(button, summary) { cursor: pointer; }
:where(.gy-root) table { border-collapse: collapse; }
:where(.gy-root) :where(b, strong) { font-weight: 700; }
:where(.gy-root) del { color: var(--gy-ink-soft); }
:where(.gy-root) time { font-variant-numeric: tabular-nums; }

/* hidden 속성은 어떤 부품 스타일보다 앞선다 */
.gy-root [hidden] { display: none !important; }

/* 고정된 상단 바·탭 줄 밑으로 제목이 숨지 않게 */
.gy-root [id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--gy-top-h) + var(--gy-tabs-h) + 12px); }

/* 포커스: 짙은 감귤 테두리 */
.gy-root :focus-visible { outline: 3px solid var(--gy-focus); outline-offset: 2px; }

/* 읽기 프로그램에만 */
.gy-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 본문 바로가기 — 키보드로 처음 누를 때만 보인다 */
.gy-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-ink);
  color: var(--gy-paper);
  font-size: 15px;
  font-weight: 700;
  transform: translateY(-160%);
}
.gy-skip:focus,
.gy-skip:focus-visible { transform: none; }

/* 아이콘 */
.gy-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gy-ico { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; }


/* ---------------------------------------------------------------------
 * 4. 뼈대 — 앱 칸과 PC 양옆 패널
 * ------------------------------------------------------------------- */
.gy-shell { min-height: 100vh; }

.gy-app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--gy-paper);
  overflow-x: clip;                  /* 안쪽 실수로 생긴 가로 넘침을 칸 안에서 자른다(고정·sticky에는 영향 없음) */
}
.gy-main { flex: 1 0 auto; min-width: 0; }
.gy-side { display: none; }

/* 641px~ : 앱 칸만 640px 가운데, 양옆은 페이지 바탕 */
@media (min-width: 641px) {
  .gy-app {
    width: 100%;
    max-width: var(--gy-app);
    margin-inline: auto;
    box-shadow: var(--gy-shadow-app);
  }
}

/* 1100px~ : 왼쪽 300 · 가운데 640 · 오른쪽 300 (좁으면 양옆이 160까지 줄어든다) */
@media (min-width: 1100px) {
  .gy-shell {
    display: grid;
    grid-template-columns: minmax(160px, var(--gy-side)) var(--gy-app) minmax(160px, var(--gy-side));
    column-gap: 24px;
    justify-content: center;
    align-items: start;
    padding-inline: 16px;
  }
  .gy-app { grid-column: 2; grid-row: 1; width: auto; max-width: none; margin: 0; }
  .gy-side {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
    align-content: start;
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - 48px);
    margin-block: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gy-line-strong) transparent;
  }
  .gy-side--left { grid-column: 1; grid-row: 1; }
  .gy-side--right {
    grid-column: 3;
    grid-row: 1;
    gap: 0;
    padding: 20px;
    border-radius: var(--gy-radius);
    background: var(--gy-paper);
  }
}


/* ---------------------------------------------------------------------
 * 4-1. PC 제주 배경 (16-3) — 641px 이상: 화면에 고정된 제주 풍경 + 옅은 막(테마별 색).
 *      앱 칸은 흰색 그대로(그림자만 조금 더), 양옆 패널 카드는 반투명 흰 유리.
 *      그림 images/bg/jeju-bg.jpg 가 아직 없으면 막 색 + 페이지 바탕색만 보인다.
 *      body의 background-attachment:fixed 대신 고정 겹(::after)을 써서, 그 속성을 무시하는
 *      아이패드 사파리에서도 그림이 문서 전체가 아니라 화면 크기로 깔린다.
 * ------------------------------------------------------------------- */
@media (min-width: 641px) {
  .gy-root::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--gy-bg-film), url("../images/bg/jeju-bg.jpg") center / cover no-repeat, var(--gy-page);
    pointer-events: none;
  }
  .gy-app { box-shadow: var(--gy-shadow-app-bg); }
}
@media (min-width: 1100px) {
  .gy-side .gy-side__card,
  .gy-side.gy-side--right {
    border: 1px solid var(--gy-glass-line);
    box-shadow: var(--gy-shadow-glass);
  }
  .gy-side .gy-side__search { box-shadow: var(--gy-shadow-glass); }
}
/* 흐림이 되는 브라우저만 반투명 유리, 안 되면 위의 불투명 흰 카드 그대로 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (min-width: 1100px) {
    .gy-side .gy-side__card,
    .gy-side.gy-side--right,
    .gy-side .gy-side__search {
      background: var(--gy-glass);
      -webkit-backdrop-filter: blur(16px) saturate(1.15);
      backdrop-filter: blur(16px) saturate(1.15);
    }
  }
}


/* ---------------------------------------------------------------------
 * 5. 샘플 띠 + 테마 바꿔보기
 * ------------------------------------------------------------------- */
.gy-samplebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: 6px var(--gy-pad-r) 6px var(--gy-pad-l);
  background: var(--gy-sample-bg);
  color: var(--gy-sample-ink);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.gy-samplebar a { text-decoration: underline; text-underline-offset: 2px; }
.gy-samplebar__msg { font-weight: 500; letter-spacing: 0.01em; }
.gy-samplebar :focus-visible { outline-color: var(--gy-sample-ink); }

.gy-themebar { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.gy-themebar__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px 0 8px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: var(--gy-radius-chip);
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.gy-themebar__btn::before {          /* 테마 색 점 */
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gy-sw, currentColor);
  box-shadow: 0 0 0 1.5px var(--gy-sample-ink);
}
.gy-themebar__btn::after {           /* 보이는 크기는 작게, 누르는 범위는 44px */
  content: "";
  position: absolute;
  inset: -8px -2px;
}
.gy-themebar__btn[data-gy-theme="gyul"] { --gy-sw: var(--gy-sw-gyul); }
.gy-themebar__btn[data-gy-theme="dolham"] { --gy-sw: var(--gy-sw-dolham); }
.gy-themebar__btn[data-gy-theme="hallasan"] { --gy-sw: var(--gy-sw-hallasan); }
.gy-themebar__btn[data-gy-theme="bada"] { --gy-sw: var(--gy-sw-bada); }
.gy-themebar__btn[aria-pressed="true"] {
  background: var(--gy-sample-ink);
  color: var(--gy-sample-bg);
  font-weight: 700;
}


/* ---------------------------------------------------------------------
 * 6. 상단 바 (60px, 위에 붙음)
 * ------------------------------------------------------------------- */
.gy-top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--gy-top-h);
  box-sizing: border-box;
  padding: 0 max(4px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--gy-top-line);
  background: var(--gy-top-bg);
  color: var(--gy-top-ink);
}
.gy-top > :first-child { justify-self: start; }
.gy-top > :nth-child(2) { justify-self: center; min-width: 0; }
.gy-top__right { display: flex; justify-self: end; }
.gy-top :focus-visible { outline-color: var(--gy-top-focus); }

/* 아이콘 단추 — 상단 바·서랍·옵션 창 닫기에 함께 쓴다 */
.gy-top__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--gy-radius-btn);
  background: transparent;
  color: inherit;
}

.gy-top__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: inherit;
  font-size: calc(20px * var(--gy-h-scale));
  line-height: 1;
  white-space: nowrap;
}
.gy-ico--logo { width: 26px; height: 26px; color: var(--gy-logo-mark); }
.gy-top__title { font-size: 17px; font-weight: 700; line-height: 1.3; white-space: nowrap; }

/* 제목 글꼴을 쓰는 곳 — 테마마다 글꼴·굵기·자간이 바뀐다 */
.gy-top__logo,
.gy-side__logo,
.gy-hero__title,
.gy-promo__title,
.gy-pd__hook,
.gy-reasons__title,
.gy-ship__title,
.gy-intro__title,
.gy-sec__title,
.gy-story__title,
.gy-story-img__cap b,
.gy-detail__text h2,
.gy-article__title,
.gy-article__sec > h2,
.gy-farmer__name,
.gy-today__title {
  font-family: var(--gy-font-display);
  font-weight: var(--gy-display-weight);
  font-synthesis: none;
  letter-spacing: var(--gy-display-tracking);
}


/* ---------------------------------------------------------------------
 * 7. 바로가기 탭 줄 (메인·shop) — 상단 바 바로 밑에 붙음, 좁으면 가로로 넘김
 * ------------------------------------------------------------------- */
.gy-tabsnav {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--gy-top-h));
  z-index: 30;
  border-bottom: 1px solid var(--gy-line);
  background: var(--gy-paper);
}
.gy-tabsnav ul {
  display: flex;
  margin: 0;
  padding: 0 calc(var(--gy-pad-r) - 10px) 0 calc(var(--gy-pad-l) - 10px);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gy-tabsnav ul::-webkit-scrollbar { display: none; }
.gy-tabsnav li { flex: none; }
.gy-tabsnav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--gy-tabs-h);
  padding: 0 10px;
  color: var(--gy-ink-soft);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: inset 0 calc(-1 * var(--gy-tab-mark-w)) 0 transparent;
}
.gy-tabsnav a[aria-current="page"] {
  color: var(--gy-ink);
  font-weight: 700;
  box-shadow: inset 0 calc(-1 * var(--gy-tab-mark-w)) 0 var(--gy-tab-mark);
}
.gy-tabsnav a:focus-visible { outline-offset: -3px; }
@media (min-width: 560px) {
  .gy-tabsnav li { flex: 1 0 auto; }
}


/* ---------------------------------------------------------------------
 * 8. 전체 메뉴 서랍 — 왼쪽에서 나옴(넓은 화면에서는 앱 칸 왼쪽 끝에서)
 * ------------------------------------------------------------------- */
.gy-drawer { position: fixed; inset: 0; z-index: 80; }
.gy-drawer__backdrop { position: absolute; inset: 0; background: var(--gy-scrim); }
.gy-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100% - var(--gy-app)) / 2));
  z-index: 1;
  width: min(320px, 86%);
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) 0 calc(24px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--gy-paper);
  color: var(--gy-ink);
  box-shadow: var(--gy-shadow-float);
}
.gy-drawer__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--gy-top-h);
  box-sizing: border-box;
  padding: 0 6px 0 20px;
  border-bottom: 1px solid var(--gy-line);
  background: var(--gy-paper);
}
.gy-drawer__head b { font-size: 17px; }
.gy-drawer__label {
  margin: 22px 20px 6px;
  color: var(--gy-eyebrow);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: var(--gy-eyebrow-tracking);
}
.gy-drawer__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0 8px;
  list-style: none;
}
.gy-drawer__list a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-sm);
  color: var(--gy-ink);
  font-size: 15px;
  line-height: 1.35;
}
.gy-drawer__list a[aria-current="page"] { color: var(--gy-accent-ink); font-weight: 700; }
.gy-drawer__list a:focus-visible { outline-offset: -3px; }


/* ---------------------------------------------------------------------
 * 9. 사진·영상 틀 + AI 표시 + 배지
 * ------------------------------------------------------------------- */
.gy-media {
  position: relative;
  display: block;                    /* span.gy-media(레시피 영상 칸)도 비율 칸이 되게 */
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--gy-fog);
}
.gy-media--square { aspect-ratio: 1 / 1; }
.gy-media--43 { aspect-ratio: 4 / 3; }
.gy-media img,
.gy-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.gy-loop { background: var(--gy-fog); }   /* 반복 영상: 포스터가 뜨기 전 빈칸 색 */

/* AI 생성 참고 이미지 표시: 사진 왼쪽 아래 작은 반투명 알약 */
.gy-ai {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gy-ai-bg);
  color: var(--gy-on-photo);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 상품 사진 위 배지(무료배송 등) */
.gy-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-brand);
  color: var(--gy-on-brand);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}


/* ---------------------------------------------------------------------
 * 10. 메인 배너 슬라이드 (1:1, 손가락으로 넘김 · JS는 scrollTo로 움직인다)
 * ------------------------------------------------------------------- */
.gy-hero { position: relative; background: var(--gy-fog); }
.gy-hero__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gy-hero__track::-webkit-scrollbar { display: none; }
.gy-hero__track:focus-visible { outline-offset: -3px; }
.gy-hero__slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  color: var(--gy-on-photo);
}
/* 배너 포커스는 사진 위 글 층에 감귤 + 흰 이중 테두리로(어떤 사진 위에서도 보이게) */
.gy-hero__slide:focus-visible { outline: none; }
.gy-hero__slide:focus-visible .gy-hero__copy {
  outline: 3px solid var(--gy-focus);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--gy-on-photo);
}
.gy-hero__copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: var(--gy-hero-v);
  align-items: var(--gy-hero-h);
  gap: 6px;
  padding: 28px var(--gy-pad-r) 56px var(--gy-pad-l);
  background: var(--gy-hero-scrim);
  color: var(--gy-on-photo);
  text-align: var(--gy-hero-align);
  text-shadow: var(--gy-photo-shadow);
}
.gy-hero__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: var(--gy-eyebrow-tracking); }
.gy-hero__title { font-size: calc(var(--gy-hero-size) * var(--gy-h-scale)); line-height: 1.25; }
.gy-hero .gy-ai { top: var(--gy-hero-ai-top); bottom: var(--gy-hero-ai-bottom); }
.gy-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  z-index: 3;
  display: flex;
  justify-content: var(--gy-hero-dots);
  padding: 0 calc(var(--gy-pad-r) - 8px) 0 calc(var(--gy-pad-l) - 8px);
  pointer-events: none;
}
.gy-hero__dot {
  position: relative;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
.gy-hero__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 999px;
  background: var(--gy-on-photo);
  opacity: 0.55;
  box-shadow: var(--gy-photo-shadow);
}
.gy-hero__dot[aria-current="true"]::before { width: 20px; margin-left: -10px; opacity: 1; }
.gy-hero__dot:focus-visible { outline-offset: -6px; outline-color: var(--gy-on-photo); }
@media (min-width: 560px) {
  .gy-hero__copy { padding-top: 36px; padding-bottom: 60px; }
  .gy-hero__title { font-size: calc((var(--gy-hero-size) + 8px) * var(--gy-h-scale)); }
}


/* ---------------------------------------------------------------------
 * 10-1. 메인 프로모 배너 (판매 훅 카피형 · INTERFACE 15절)
 *  4:3 칸 = 사진 전체(상품은 오른쪽 절반) + 왼쪽→오른쪽 흰 그라데이션 + 왼쪽 58% 폭 글자.
 *  글이 길어 4:3에 안 들어가면 칸이 아래로 늘어난다(aspect-ratio 자동 최소 높이) — 글자가 잘리지 않고,
 *  글자 폭은 58%를 넘지 않아 오른쪽 상품을 덮지 않는다. 모든 테마에서 밝은 배너.
 *  배지·할인율·훅 강조색 = --gy-promo-hot. 제목 = 테마 제목 글꼴.
 * ------------------------------------------------------------------- */
.gy-hero--promo { background: var(--gy-paper); }
.gy-promo {
  display: flex;
  align-items: center;
  aspect-ratio: 4 / 3;
  color: var(--gy-ink);
}
.gy-promo__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  background: var(--gy-paper);
}
.gy-promo__media img { object-position: right center; }   /* 칸이 늘어나 잘려도 오른쪽 상품은 남게 */
.gy-promo__media::after {            /* 글자 쪽을 흰색으로 부드럽게 바래기 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gy-promo-fade);
  pointer-events: none;
}
.gy-promo__media .gy-ai { top: 10px; right: 10px; bottom: auto; left: auto; }   /* 왼쪽은 글자 자리 → AI 표시는 오른쪽 위 */
.gy-promo:focus-visible .gy-promo__media::after { box-shadow: inset 0 0 0 3px var(--gy-focus), inset 0 0 0 6px var(--gy-paper); }

.gy-promo__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 1 58%;
  flex-direction: column;
  align-items: flex-start;
  max-width: 58%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 8px 30px var(--gy-pad-l);
}
.gy-promo__badge {                   /* 왼쪽 위 알약: "제철 한정 특가" */
  margin: 0 0 8px;
  padding: 4px 11px;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-promo-hot);
  color: var(--gy-on-action);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.gy-promo__hook { margin: 0; font-size: clamp(14px, 4.3vw, 19px); font-weight: 700; line-height: 1.4; }
.gy-promo__hook em { font-style: normal; color: var(--gy-promo-hot); }
.gy-promo__title {                   /* 아주 굵은 2줄: 375px 약 30px · 500px 이상 40px */
  margin: 4px 0 0;
  font-size: calc(clamp(24px, 8vw, 40px) * var(--gy-h-scale));
  line-height: 1.18;
}
.gy-promo__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin: 10px 0 0;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.gy-promo__orig {                    /* 정가: 회색 취소선, 한 줄 위에 */
  flex-basis: 100%;
  margin-bottom: 2px;
  color: var(--gy-ink-soft);
  font-size: clamp(12px, 3.4vw, 15px);
  text-decoration: line-through;
}
.gy-promo__sale { color: var(--gy-ink); font-size: clamp(22px, 7vw, 34px); font-weight: 800; letter-spacing: -0.02em; }
.gy-promo__rate {                    /* 판매가 옆 할인율 알약 */
  align-self: center;
  padding: 3px 9px;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-promo-hot);
  color: var(--gy-on-action);
  font-size: clamp(13px, 3.8vw, 17px);
  font-weight: 800;
  line-height: 1.25;
}
.gy-promo__note { margin: 8px 0 0; color: var(--gy-ink-soft); font-size: 11.5px; line-height: 1.45; }

/* 점 단추: 짙은 점 + 반투명 흰 알약 바탕, 아래 가운데 (테마의 배너 점 위치와 무관) */
.gy-hero--promo .gy-hero__dots {
  left: 50%;
  right: auto;
  bottom: 2px;
  justify-content: center;
  padding: 0 6px;
  transform: translateX(-50%);
}
.gy-hero--promo .gy-hero__dots::before {
  content: "";
  position: absolute;
  inset: 12px 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--gy-promo-dots-bg);
}
.gy-hero--promo .gy-hero__dots:empty { display: none; }
.gy-hero--promo .gy-hero__dot { width: 22px; }
.gy-hero--promo .gy-hero__dot::before { background: var(--gy-ink); opacity: 0.3; box-shadow: none; }
.gy-hero--promo .gy-hero__dot[aria-current="true"]::before { opacity: 0.9; }
.gy-hero--promo .gy-hero__dot:focus-visible { outline-color: var(--gy-focus); }

@media (min-width: 560px) {
  .gy-promo__copy { padding: 28px 12px 44px calc(var(--gy-pad-l) + 8px); }
  .gy-promo__badge { margin-bottom: 12px; padding: 5px 13px; font-size: 13px; }
  .gy-promo__title { margin-top: 6px; }
  .gy-promo__price { margin-top: 16px; }
  .gy-promo__note { margin-top: 12px; font-size: 12px; }
}
/* 그라데이션이 옅어지는 54~58% 구간에서도 글자가 사진에 묻히지 않게 흰 후광 */
.gy-promo__hook,
.gy-promo__title,
.gy-promo__price { text-shadow: var(--gy-promo-halo); }


/* ---------------------------------------------------------------------
 * 10-2. 홈페이지 제작문의 띠 (16-2) — 배너 바로 아래. 진한 바탕 + 전화번호 강조, 누르면 전화.
 *       위쪽 감귤색 가는 선으로 배너와 나뉘고, 오른쪽 감귤 동그라미 꺾쇠가 '누를 수 있음'을 알린다.
 *       높이 54px 이상(터치 44px 이상). 테마별 바탕: 현무암 · 더 짙은 흑 · 숲 초록 · 깊은 바다.
 * ------------------------------------------------------------------- */
.gy-inquiry {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 10px var(--gy-pad-r) 10px var(--gy-pad-l);
  background: var(--gy-inquiry-bg);
  color: var(--gy-inquiry-ink);
  font-size: clamp(12.5px, 3.7vw, 14px);
  line-height: 1.4;
  text-align: center;
}
.gy-inquiry::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gy-accent);
}
.gy-inquiry__label { color: var(--gy-inquiry-soft); font-weight: 500; letter-spacing: 0.02em; }
.gy-inquiry__sep { color: var(--gy-inquiry-soft); }
.gy-inquiry__tel {
  color: var(--gy-inquiry-ink);
  font-size: clamp(15px, 4.6vw, 18px);
  font-weight: 800;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.gy-inquiry__go {
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--gy-accent);
  color: var(--gy-inquiry-bg);
}
.gy-inquiry:focus-visible { outline-color: var(--gy-accent); outline-offset: -4px; }
.gy-inquiry:active { filter: brightness(1.18); }


/* ---------------------------------------------------------------------
 * 11. 메인 첫 문단 (H1 + 직답 + 약속)
 * ------------------------------------------------------------------- */
.gy-intro { padding: 30px var(--gy-pad-r) 28px var(--gy-pad-l); }
.gy-intro__title { font-size: calc(26px * var(--gy-h-scale)); line-height: 1.3; text-wrap: balance; }
.gy-intro__answer { margin-top: 12px; color: var(--gy-ink-soft); font-size: 15.5px; line-height: 1.75; }
/* 약속 3가지 — 휴대폰은 가는 선으로 나뉜 목록 상자, 넓으면 3칸 띠 */
.gy-intro__facts {
  display: grid;
  margin: 20px 0 0;
  padding: 2px 16px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  list-style: none;
}
.gy-intro__facts li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.gy-intro__facts li + li { border-top: 1px solid var(--gy-line); }
.gy-intro__facts .gy-ico {
  width: 34px;
  height: 34px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-face);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
}
@media (min-width: 560px) {
  .gy-intro { padding-top: 36px; padding-bottom: 32px; }
  .gy-intro__title { font-size: calc(30px * var(--gy-h-scale)); }
  .gy-intro__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 0; }
  .gy-intro__facts li { flex-direction: column; gap: 8px; padding: 2px 14px; font-size: 14px; text-align: center; }
  .gy-intro__facts li + li { border-top: 0; border-left: 1px solid var(--gy-line); }
}


/* ---------------------------------------------------------------------
 * 12. 귤 종류 아이콘 줄 — 휴대폰은 가로로 넘기고, 넓으면 7칸 격자
 * ------------------------------------------------------------------- */
.gy-cats { padding: 4px 0 20px; }
.gy-cats__list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px calc(var(--gy-pad-r) - 6px) 4px calc(var(--gy-pad-l) - 6px);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: calc(var(--gy-pad-l) - 6px);
}
.gy-cats__list > li { flex: none; }
.gy-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  padding: 4px 0;
  color: var(--gy-ink);
}
.gy-cat:focus-visible { outline-offset: -3px; }
.gy-cat__img {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: var(--gy-radius-face);
  background: var(--gy-fog);
  box-shadow: 0 0 0 1px var(--gy-line);
}
.gy-cat__img::after {                 /* 흰 바탕 사진 가장자리 가는 선 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--gy-img-edge);
}
.gy-cat__img img { width: 100%; height: 100%; object-fit: cover; }
.gy-cat__name { font-size: 12.5px; font-weight: 500; line-height: 1.3; text-align: center; }
/* 넓으면 한 줄 5칸씩 가운데 정렬 (10종이면 5+5, 남는 줄도 가운데) */
@media (min-width: 560px) {
  .gy-cats { padding-top: 10px; }
  .gy-cats__list { flex-wrap: wrap; justify-content: center; gap: 14px 0; overflow: visible; }
  .gy-cats__list > li { display: flex; flex: 0 0 20%; justify-content: center; }
  .gy-cat { width: 92px; }
  .gy-cat__img { width: 68px; height: 68px; }
}


/* ---------------------------------------------------------------------
 * 13. 구역과 구역 머리 — 구역 사이는 8px 회색 띠로 나눈다
 * ------------------------------------------------------------------- */
.gy-sec { padding: 32px var(--gy-pad-r) 34px var(--gy-pad-l); }
.gy-sec--tint { background: var(--gy-fog); }
.gy-sec + .gy-sec,
.gy-pane + .gy-pane,
.gy-pane + .gy-sec,
.gy-related + .gy-sec { border-top: 8px solid var(--gy-fog); }
.gy-sec--tint + .gy-sec--tint { border-top: 1px solid var(--gy-line); }   /* 회색 구역이 이어지면 가는 선만 */
.gy-box + .gy-sec { margin-top: 24px; border-top: 8px solid var(--gy-fog); }
@media (min-width: 560px) {
  .gy-sec { padding-top: 40px; padding-bottom: 44px; }
}

.gy-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: var(--gy-head-pad);
  border-bottom: var(--gy-head-border);
}
.gy-sec__head::after {               /* 한라산 테마: 제목 옆으로 이어지는 가는 선 */
  content: "";
  display: var(--gy-head-line);
  order: 1;
  flex: 1 1 0px;
  height: 1px;
  background: var(--gy-line-strong);
}
.gy-sec__title {
  order: 0;
  min-width: 0;
  font-size: calc(21px * var(--gy-h-scale));
  line-height: 1.3;
  text-decoration-line: var(--gy-title-deco);
  text-decoration-style: wavy;
  text-decoration-color: var(--gy-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
}
.gy-sec__title::before {             /* 돌담 테마: 제목 앞 감귤 네모 */
  content: "";
  display: var(--gy-title-mark);
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.4em;
  background: var(--gy-accent);
  vertical-align: 0.12em;
}
.gy-sec__more {
  order: 2;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  color: var(--gy-ink-soft);
  font-size: 13.5px;
  white-space: nowrap;
}
.gy-sec__more .gy-ico { width: 15px; height: 15px; }
@media (min-width: 560px) {
  .gy-sec__title { font-size: calc(25px * var(--gy-h-scale)); }
}


/* ---------------------------------------------------------------------
 * 14. 가격 — 정가(취소선) 한 줄, 그 아래 할인율 + 판매가
 * ------------------------------------------------------------------- */
.gy-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  margin: 0;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.gy-price__orig { flex-basis: 100%; color: var(--gy-ink-soft); font-size: 12.5px; text-decoration: line-through; }
.gy-price__rate { color: var(--gy-accent-ink); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.gy-price__sale { color: var(--gy-ink); font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
.gy-price--lg { margin-top: 14px; }
.gy-price--lg .gy-price__orig { font-size: 15px; }
.gy-price--lg .gy-price__rate,
.gy-price--lg .gy-price__sale { font-size: 24px; }


/* ---------------------------------------------------------------------
 * 15. 상품 카드 · 가로 레일 · 2단 격자
 * ------------------------------------------------------------------- */
.gy-card { min-width: 0; }
.gy-card__link { display: block; color: var(--gy-ink); }
.gy-card .gy-media { border-radius: var(--gy-radius-sm); box-shadow: var(--gy-shadow-card); }
.gy-card .gy-media::after {           /* 흰 바탕 사진 가장자리 가는 선 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--gy-img-edge);
  pointer-events: none;
}
.gy-card__link:active .gy-media { filter: brightness(0.95); }   /* 눌림 */
.gy-card__name {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gy-card .gy-price { margin-top: 4px; }
.gy-card__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-size: 12px; line-height: 1.4; }
.gy-season {
  display: inline-block;
  padding: 2px 6px;
  border-radius: calc(var(--gy-radius-sm) / 2);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
  font-weight: 700;
}
.gy-sample {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--gy-line-strong);
  border-radius: calc(var(--gy-radius-sm) / 2);
  color: var(--gy-ink-soft);
}

/* 가로로 넘기는 줄 — 칸 끝까지 닿게(부모 .gy-sec 여백만큼 바깥으로) */
.gy-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(140px, 36%, 196px);
  gap: 12px;
  margin: 0 calc(-1 * var(--gy-pad-r)) 0 calc(-1 * var(--gy-pad-l));
  padding: 4px var(--gy-pad-r) 8px var(--gy-pad-l);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gy-pad-l) var(--gy-pad-r);
}
.gy-rail > * { min-width: 0; scroll-snap-align: start; }
.gy-rail--wide { grid-auto-columns: clamp(248px, 80%, 320px); }
.gy-rail a:focus-visible { outline-offset: -3px; }

.gy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 560px) {
  .gy-grid { gap: 28px 16px; }
}


/* ---------------------------------------------------------------------
 * 16. 출하 달력 — 품종 열은 왼쪽에 붙고, 막대는 이어진다. 이번 달 열은 옅은 감귤
 * ------------------------------------------------------------------- */
.gy-cal {
  overflow-x: auto;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-card);
}
.gy-cal__table {
  width: 100%;
  min-width: 540px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.gy-cal__table th,
.gy-cal__table td {
  height: 38px;
  padding: 0;
  border-bottom: 1px solid var(--gy-line);
  text-align: center;
}
.gy-cal__table tbody tr:last-child > * { border-bottom: 0; }
.gy-cal__table thead th {
  height: 34px;
  background: var(--gy-fog);
  color: var(--gy-ink-soft);
  font-size: 12px;
  font-weight: 500;
}
.gy-cal__table thead th:first-child,
.gy-cal__table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 76px;
  padding: 0 10px;
  border-right: 1px solid var(--gy-line);
  text-align: left;
  white-space: nowrap;
}
.gy-cal__table th[scope="row"] { background: var(--gy-paper); font-weight: 500; }
.gy-cal__table th[scope="row"] a { display: block; padding: 9px 0; color: var(--gy-ink); }
.gy-cal__table th[scope="row"] a:focus-visible { outline-offset: -3px; }
.gy-cal__table td.is-on::before {
  content: "";
  display: block;
  height: 10px;
  background: var(--gy-accent);
}
.gy-cal__table th + td.is-on::before,
.gy-cal__table td:not(.is-on) + td.is-on::before {
  margin-left: 4px;
  border-top-left-radius: var(--gy-bar-radius);
  border-bottom-left-radius: var(--gy-bar-radius);
}
.gy-cal__table td.is-on:last-child::before {
  margin-right: 4px;
  border-top-right-radius: var(--gy-bar-radius);
  border-bottom-right-radius: var(--gy-bar-radius);
}
.gy-cal__table td.is-on:has(+ td:not(.is-on))::before {
  margin-right: 4px;
  border-top-right-radius: var(--gy-bar-radius);
  border-bottom-right-radius: var(--gy-bar-radius);
}
.gy-cal__table .is-now { background: var(--gy-accent-soft); }
.gy-cal__table thead th.is-now {
  background: var(--gy-accent-soft);
  color: var(--gy-accent-ink);
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--gy-accent);   /* 이번 달 머리 위 감귤 선 */
}
.gy-cal__note { margin-top: 10px; color: var(--gy-ink-soft); font-size: 13px; line-height: 1.6; }


/* ---------------------------------------------------------------------
 * 17. 스토리 (영상 + 글)
 * ------------------------------------------------------------------- */
.gy-story { background: var(--gy-fog); }
.gy-story__text { padding: 26px var(--gy-pad-r) 34px var(--gy-pad-l); }
.gy-story__title { margin-top: 8px; font-size: calc(24px * var(--gy-h-scale)); line-height: 1.3; text-wrap: balance; }
.gy-story__text > p:not([class]) { max-width: 34em; margin-top: 10px; color: var(--gy-ink-soft); font-size: 15px; line-height: 1.8; }
.gy-story__text .gy-btn { margin-top: 20px; }
/* 이야기 구역 머리글 앞 짧은 선 — 잡지 표지 같은 작은 표시 */
.gy-story .gy-eyebrow::before,
.gy-farmer .gy-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 8px;
  background: currentColor;
  vertical-align: middle;
}
@media (min-width: 560px) {
  .gy-story__text { padding-top: 32px; padding-bottom: 40px; }
  .gy-story__title { font-size: calc(28px * var(--gy-h-scale)); }
}


/* ---------------------------------------------------------------------
 * 18. 가이드 카드 목록 · 게시판 줄
 * ------------------------------------------------------------------- */
.gy-guides { margin: 0; padding: 0; list-style: none; }
.gy-guides > li + li { border-top: 1px solid var(--gy-line); }
.gy-guide {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 10px;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  color: var(--gy-ink);
}
.gy-guide::after {                    /* 오른쪽 끝 꺾쇠 — 읽으러 가는 줄임을 알린다 */
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--gy-ink-soft);
  border-right: 1.5px solid var(--gy-ink-soft);
  transform: rotate(45deg);
}
.gy-guide__img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-fog);
  box-shadow: var(--gy-shadow-card);
}
.gy-guide__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gy-guide__body { display: grid; gap: 4px; min-width: 0; }
.gy-guide__title { font-size: 16px; font-weight: 700; line-height: 1.45; }
.gy-guide__desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--gy-ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gy-board { margin: 0; padding: 0; border-top: 1px solid var(--gy-ink); list-style: none; }
.gy-board > li { border-bottom: 1px solid var(--gy-line); }
.gy-board a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; color: var(--gy-ink); }
.gy-board__tag {
  flex: none;
  min-width: 42px;
  box-sizing: border-box;
  text-align: center;
  padding: 2px 8px;
  border-radius: calc(var(--gy-radius-sm) / 2);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
  font-size: 12px;
  font-weight: 700;
}
.gy-board__title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.gy-board__date { flex: none; color: var(--gy-ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* 작은 사진 칸 안의 AI 표시는 더 작게 */
.gy-cat__img .gy-ai,
.gy-best__img .gy-ai,
.gy-guide__img .gy-ai {
  left: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 0 5px;
  font-size: 10px;
}
.gy-cat__img .gy-ai { left: 50%; transform: translateX(-50%); }


/* ---------------------------------------------------------------------
 * 18-1. 1분 귤 레시피 영상 칸 (16-9) — 2열 격자(휴대폰도 2열), 테마 모서리 영상,
 *       왼쪽 위 "▶ 레시피" 알약, 제목 15px 굵게 + 설명 회색. 누르면 살짝 눌리고 PC에선 살짝 뜬다.
 *       영상은 .gy-media 공통 규칙으로 칸을 꽉 채운다(object-fit: cover).
 * ------------------------------------------------------------------- */
.gy-reels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gy-reels > li { min-width: 0; }
.gy-reel { position: relative; display: block; color: var(--gy-ink); }
.gy-reel::before {                   /* "▶ 레시피" 알약 — 영상 왼쪽 위 */
  content: "▶ 레시피";
  content: "▶ 레시피" / "";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 3px 9px 3px 8px;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-reel-pill);
  color: var(--gy-on-photo);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.gy-reel__media {
  margin: 0 0 10px;
  border-radius: var(--gy-radius);
  box-shadow: var(--gy-shadow-card);
}
.gy-reel__media::after {             /* 영상 가장자리 가는 선 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--gy-img-edge);
  pointer-events: none;
}
.gy-reel__body { display: grid; gap: 3px; min-width: 0; }
.gy-reel__title { font-size: 15px; font-weight: 700; line-height: 1.4; }
.gy-reel__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--gy-ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gy-reel:active .gy-reel__media { filter: brightness(0.95); }   /* 눌림(움직임 없이) */
.gy-reel:focus-visible { outline-offset: 3px; }


/* ---------------------------------------------------------------------
 * 19. FAQ 펼치기
 * ------------------------------------------------------------------- */
.gy-faq { border-top: 1px solid var(--gy-line); }
.gy-faq__group { margin: 28px 0 8px; color: var(--gy-eyebrow); font-size: 14px; font-weight: 700; letter-spacing: var(--gy-eyebrow-tracking); }
.gy-faq__group:first-child { margin-top: 0; }
.gy-faq__item { border-bottom: 1px solid var(--gy-line); }
.gy-faq__q {
  position: relative;
  display: block;
  min-height: 52px;
  box-sizing: border-box;
  padding: 14px 36px 14px 26px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  list-style: none;
}
.gy-faq__q::-webkit-details-marker { display: none; }
.gy-faq__q::before {
  content: "Q";
  content: "Q" / "";
  position: absolute;
  top: 14px;
  left: 2px;
  color: var(--gy-accent-ink);
  font-family: var(--gy-font-display);
  font-size: 16px;
  font-weight: var(--gy-display-weight);
  font-synthesis: none;
  line-height: 1.45;
}
.gy-faq__q::after {                  /* 펼침 꺾쇠 */
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--gy-ink-soft);
  border-bottom: 2px solid var(--gy-ink-soft);
  transform: rotate(45deg);
}
.gy-faq__item[open] > .gy-faq__q { font-weight: 700; }
.gy-faq__item[open] > .gy-faq__q::after { margin-top: -2px; transform: rotate(-135deg); }
.gy-faq__a {
  position: relative;
  margin: 0 0 14px;
  padding: 14px 16px 14px 40px;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-fog);
  font-size: 14.5px;
  line-height: 1.75;
}
.gy-faq__a::before {                  /* 답 표시 A (질문의 Q와 짝) */
  content: "A";
  content: "A" / "";
  position: absolute;
  top: 14px;
  left: 16px;
  color: var(--gy-brand);
  font-family: var(--gy-font-display);
  font-size: 16px;
  font-weight: var(--gy-display-weight);
  font-synthesis: none;
  line-height: 1.6;
}
.gy-faq__a p,
.gy-faq__a ul,
.gy-faq__a ol { margin: 0 0 8px; }
.gy-faq__a ul,
.gy-faq__a ol { padding-left: 1.2em; }
.gy-faq__a > :last-child { margin-bottom: 0; }
.gy-faq__a a { color: var(--gy-brand); text-decoration: underline; text-underline-offset: 3px; }


/* ---------------------------------------------------------------------
 * 20. 공통 부품 — 상자·목록·단추·빈 상태·칩·안내/주의/팁·작은 글
 * ------------------------------------------------------------------- */
.gy-box {
  margin: 0 var(--gy-pad-r) 12px var(--gy-pad-l);
  padding: 18px 18px 16px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
}
.gy-box--gray { border-color: var(--gy-fog); background: var(--gy-fog); }
.gy-box__title { margin-bottom: 10px; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.gy-box .gy-dots { font-size: 14.5px; }
.gy-box .gy-sec__more { min-height: 40px; margin-top: 6px; }
.gy-box .gy-sec__more:not(:has(.gy-ico))::after {   /* 아이콘 없는 '자세히' 링크에 꺾쇠 */
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.gy-sec .gy-box,
.gy-pane .gy-box,
.gy-article__sec .gy-box,
.gy-related .gy-box,
.gy-sec .gy-points,
.gy-pane .gy-points,
.gy-article__sec .gy-points { margin-left: 0; margin-right: 0; }

/* 점 목록 */
.gy-dots { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gy-dots > li { position: relative; padding-left: 14px; line-height: 1.65; }
.gy-dots > li::before {
  content: "";
  position: absolute;
  top: calc(0.825em - 2.5px);
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gy-brand);
}

/* 번호 목록 */
.gy-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: gy-step; }
.gy-steps > li { position: relative; min-height: 24px; padding-left: 34px; line-height: 1.65; counter-increment: gy-step; }
.gy-steps > li::before {
  content: counter(gy-step);
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--gy-radius-face);
  background: var(--gy-brand);
  color: var(--gy-on-brand);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

/* 단추 */
.gy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--gy-radius-btn);
  background: transparent;
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.gy-btn .gy-ico { width: 20px; height: 20px; }
.gy-btn--main { border-color: var(--gy-action); background: var(--gy-action); color: var(--gy-on-action); }
.gy-btn--line { border-color: var(--gy-line-strong); background: var(--gy-paper); color: var(--gy-ink); }
.gy-btn--block { display: flex; width: 100%; }
.gy-btn:disabled,
.gy-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* 빈 상태 (아이콘 + 두 줄) */
.gy-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 28px 16px;
  border: 1px dashed var(--gy-line-strong);
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
  color: var(--gy-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.gy-empty .gy-ico { width: 36px; height: 36px; margin-bottom: 6px; color: var(--gy-brand); }
.gy-empty > b,
.gy-empty > strong,
.gy-empty > p:first-of-type { color: var(--gy-ink); font-size: 15px; font-weight: 700; }
.gy-empty .gy-btn { margin-top: 12px; }

/* 칩 */
.gy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.gy-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gy-chips .gy-chip { min-height: 36px; padding: 0 14px; }

/* 안내(초록 왼쪽 띠) · 주의(감귤 상자) · 팁 */
.gy-note {
  padding: 14px 16px;
  border-left: 3px solid var(--gy-brand);
  border-radius: 0 var(--gy-radius-sm) var(--gy-radius-sm) 0;
  background: var(--gy-brand-soft);
  font-size: 14.5px;
  line-height: 1.7;
}
.gy-warn {
  padding: 14px 16px;
  border: 1px solid var(--gy-accent);
  border-radius: var(--gy-radius-sm);
  background: var(--gy-accent-soft);
  color: var(--gy-ink);
  font-size: 14.5px;
  line-height: 1.7;
}
.gy-tip {
  padding: 14px 16px;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-fog);
  font-size: 14.5px;
  line-height: 1.7;
}
.gy-tip::before {
  content: "TIP";
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-brand);
  color: var(--gy-on-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.gy-note > :last-child,
.gy-warn > :last-child,
.gy-tip > :last-child { margin-bottom: 0; }
.gy-note a,
.gy-warn a,
.gy-tip a { text-decoration: underline; text-underline-offset: 3px; }

/* 작은 글 */
.gy-eyebrow {
  color: var(--gy-eyebrow);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--gy-eyebrow-tracking);
}
.gy-answer { color: var(--gy-ink); font-size: 16.5px; font-weight: 500; line-height: 1.75; }
.gy-answer b,
.gy-answer strong { color: var(--gy-accent-ink); }
.gy-dated { color: var(--gy-ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------------
 * 21. PC 양옆 패널 내용
 * ------------------------------------------------------------------- */
.gy-side__card { padding: 20px; border-radius: var(--gy-radius); background: var(--gy-paper); }
.gy-side__brand { display: grid; gap: 8px; }
.gy-side__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gy-ink);
  font-size: calc(22px * var(--gy-h-scale));
  line-height: 1.2;
}
.gy-side__logo .gy-ico { width: 28px; height: 28px; color: var(--gy-logo-mark); }
.gy-side__brand p { color: var(--gy-ink-soft); font-size: 14px; line-height: 1.6; }
.gy-side__brand .gy-side__tel { color: var(--gy-ink-soft); font-size: 13px; }
.gy-side__tel b { display: block; color: var(--gy-ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.gy-side__label { margin-bottom: 12px; color: var(--gy-ink-soft); font-size: 13px; font-weight: 700; letter-spacing: var(--gy-eyebrow-tracking); }

/* (선택) 검색창 모양 링크 */
.gy-side__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border: 1.5px solid var(--gy-ink);
  border-radius: var(--gy-radius-btn);
  background: var(--gy-paper);
  color: var(--gy-ink-soft);
  font-size: 14px;
}
.gy-side__search .gy-ico { order: 2; width: 20px; height: 20px; margin-left: auto; color: var(--gy-ink); }

.gy-side__season { margin: 0; padding: 0; list-style: none; }
.gy-side__season li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  border-top: 1px solid var(--gy-line);
  font-size: 14px;
}
.gy-side__season li:first-child { border-top: 0; }
.gy-side__season a { flex: 1 1 auto; min-width: 0; padding: 8px 0; color: var(--gy-ink); }
.gy-side__season span { flex: none; color: var(--gy-ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gy-side__season li.is-now a { font-weight: 700; }
.gy-side__season li.is-now a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gy-accent);
  vertical-align: middle;
}
.gy-side__season li.is-now span { color: var(--gy-accent-ink); font-weight: 700; }

/* 이번 주 인기 상품 (순위 번호는 CSS가 붙인다) */
.gy-best { margin: 0; padding: 0; list-style: none; counter-reset: gy-best; }
.gy-best > li { counter-increment: gy-best; }
.gy-best > li + li { border-top: 1px solid var(--gy-line); }
.gy-best__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  color: var(--gy-ink);
}
.gy-best__item::before {
  content: counter(gy-best);
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 3;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-sm) 0 var(--gy-radius-sm) 0;
  background: var(--gy-ink);
  color: var(--gy-paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.gy-best__item:focus-visible { outline-offset: -2px; }
.gy-best__img {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-fog);
}
.gy-best__img img { width: 100%; height: 100%; object-fit: cover; }
.gy-best__body { display: grid; gap: 2px; min-width: 0; }
.gy-best__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gy-best .gy-price__orig { font-size: 12px; }
/* 인기 목록 안 '예시 가격' 표시는 글자 폭만큼만 (칸 전체로 늘어나 입력칸처럼 보이지 않게) */
.gy-best__body .gy-sample { justify-self: start; padding: 0 5px; font-size: 11px; }
.gy-best .gy-price__rate,
.gy-best .gy-price__sale { font-size: 14px; }


/* ---------------------------------------------------------------------
 * 22. 떠 있는 단추 (카카오 TALK · 맨 위로) — 넓은 화면에서도 앱 칸 오른쪽 안쪽
 * ------------------------------------------------------------------- */
.gy-float {
  position: fixed;
  right: max(12px, calc((100% - var(--gy-app)) / 2 + 12px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: grid;
  gap: 10px;
}
.gy-root[data-page="product"] .gy-float { bottom: calc(var(--gy-buybar-h) + 12px + env(safe-area-inset-bottom, 0px)); }
.gy-float__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius-face);
  background: var(--gy-paper);
  color: var(--gy-ink);
  box-shadow: var(--gy-shadow-float);
}
.gy-float__btn .gy-ico { width: 22px; height: 22px; }
.gy-float__btn--talk { border-color: var(--gy-kakao); background: var(--gy-kakao); color: var(--gy-kakao-ink); }
.gy-float__btn--talk .gy-ico { width: 19px; height: 19px; }
.gy-float__btn--talk::after {
  content: "TALK";
  margin-top: 1px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}


/* ---------------------------------------------------------------------
 * 23. 꼬리말
 * ------------------------------------------------------------------- */
.gy-foot {
  display: grid;
  gap: 10px;
  padding: 32px var(--gy-pad-r) 36px var(--gy-pad-l);
  background: var(--gy-foot-bg);
  color: var(--gy-foot-soft);
  font-size: 13px;
  line-height: 1.65;
}
.gy-foot :focus-visible { outline-color: var(--gy-foot-focus); }
.gy-foot__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.gy-foot__row b { min-width: 6.5em; color: var(--gy-foot-ink); }   /* 이름표 폭을 맞춰 줄 정렬 */
.gy-foot__tel { color: var(--gy-foot-ink); font-size: 19px; font-weight: 800; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.gy-foot__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 6px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--gy-foot-line);
  list-style: none;
}
.gy-foot__menu a { display: inline-flex; align-items: center; min-height: 40px; color: var(--gy-foot-soft); }
.gy-foot__menu b { color: var(--gy-foot-ink); }
.gy-foot__legal { display: grid; gap: 2px; margin: 0; font-size: 12px; }
.gy-foot__legal > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.gy-foot__legal dt { color: var(--gy-foot-ink); font-weight: 500; }
.gy-foot__legal dd { margin: 0; }
.gy-foot__ai { margin-top: 4px; font-size: 11.5px; line-height: 1.6; }   /* AI 사진 안내 한 줄(16-1) — 상자 없이 작은 글로 */
.gy-foot__copy { font-size: 12px; letter-spacing: 0.02em; }
.gy-foot__credit {                    /* 맨 아래 홈페이지 제작문의 한 줄 (16-2) */
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--gy-foot-line);
  color: var(--gy-foot-soft);
  font-size: 12px;
  letter-spacing: 0.02em;
}


/* ---------------------------------------------------------------------
 * 24. 상품 상세
 * ------------------------------------------------------------------- */
.gy-pd__img { margin: 0; border-radius: 0; }   /* 첫 사진은 칸 폭 꽉 찬 1:1 (PC 640×640) */
.gy-pd__info { padding: 20px var(--gy-pad-r) 24px var(--gy-pad-l); }
.gy-pd__eyebrow { color: var(--gy-ink-soft); font-size: 14px; line-height: 1.5; }
.gy-pd__name { margin-top: 4px; font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.gy-pd__sample { margin-top: 8px; color: var(--gy-brand); font-size: 12.5px; line-height: 1.5; }
.gy-pd__answer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--gy-line);
  font-size: 15px;
  font-weight: 400;
}
.gy-pd__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }

/* 상세 훅 (16-4) — 정보 칸 맨 위: 배지 + 한 줄 훅(강조 부분은 em) */
.gy-pd__badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-promo-hot);
  color: var(--gy-on-action);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.gy-pd__hook { margin: 0 0 10px; color: var(--gy-ink); font-size: calc(22px * var(--gy-h-scale)); line-height: 1.32; text-wrap: balance; }
.gy-pd__info:has(.gy-pd__hook) .gy-pd__name { font-size: 20px; }   /* 훅이 큰 제목 역할을 하면 상품명은 한 단계 작게 */
@media (min-width: 560px) {
  .gy-pd__hook { font-size: calc(25px * var(--gy-h-scale)); }
}
.gy-pd__hook em { font-style: normal; color: var(--gy-promo-hot); }

/* 판매 포인트 띠 (16-4) — 아이콘 + 짧은 제목 + 한 줄 설명, 칸 사이 가는 세로선. 개수만큼 같은 폭 */
.gy-points {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 var(--gy-pad-r) 14px var(--gy-pad-l);
  padding: 16px 0;
  border-top: 1px solid var(--gy-line);
  border-bottom: 1px solid var(--gy-line);
  list-style: none;
}
.gy-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
  text-align: center;
}
.gy-point + .gy-point { border-left: 1px solid var(--gy-line); }
.gy-point > .gy-ico {
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-face);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
}
.gy-point__body { display: grid; gap: 2px; }
.gy-point__title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.gy-point__text { color: var(--gy-ink-soft); font-size: 12px; line-height: 1.5; }

/* 상품 탭 4개 — 상단 바 바로 밑에 붙음 */
.gy-pd > .gy-sec:has(+ .gy-ptabs) { border-bottom: 8px solid var(--gy-fog); }
.gy-ptabs {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--gy-top-h));
  z-index: 20;
  border-bottom: 1px solid var(--gy-line);
  background: var(--gy-paper);
}
.gy-ptabs ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.gy-ptabs ul::-webkit-scrollbar { display: none; }
.gy-ptabs li { flex: 1 0 auto; }
.gy-ptabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--gy-tabs-h);
  padding: 0 12px;
  color: var(--gy-ink-soft);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: inset 0 calc(-1 * var(--gy-tab-mark-w)) 0 transparent;
}
.gy-ptabs a.is-on,
.gy-ptabs a[aria-current="true"] {
  color: var(--gy-ink);
  font-weight: 700;
  box-shadow: inset 0 calc(-1 * var(--gy-tab-mark-w)) 0 var(--gy-tab-mark);
}
.gy-ptabs a:focus-visible { outline-offset: -3px; }
.gy-ptabs__n { color: var(--gy-ink-soft); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }

.gy-pane { padding: 28px var(--gy-pad-r) 32px var(--gy-pad-l); }
.gy-pane__h { margin: 24px 0 10px; font-size: 16px; font-weight: 700; }
.gy-pane__h:first-child { margin-top: 0; }
.gy-pane > .gy-btn--block { margin-bottom: 16px; }

/* 상세 스토리 사진(칸 끝까지) + 가운데 캡션 */
.gy-pane,
.gy-article { counter-reset: gy-story; }
.gy-story-img { margin: 0 0 32px; counter-increment: gy-story; }
.gy-pane > .gy-story-img,
.gy-article__sec > .gy-story-img { margin-left: calc(-1 * var(--gy-pad-l)); margin-right: calc(-1 * var(--gy-pad-r)); }
.gy-story-img > .gy-media { margin: 0; border-radius: 0; }
.gy-story-img__cap { display: grid; gap: 6px; padding: 18px var(--gy-pad-r) 0 var(--gy-pad-l); text-align: center; }
.gy-story-img__cap b { font-size: calc(20px * var(--gy-h-scale)); line-height: 1.35; }
.gy-story-img__cap span { color: var(--gy-ink-soft); font-size: 15px; line-height: 1.8; }
.gy-story-img__cap::before {          /* 챕터 표시 "STORY 01" — CSS 카운터, 마크업 변경 없음 (16-4) */
  content: "STORY " counter(gy-story, decimal-leading-zero);
  content: "STORY " counter(gy-story, decimal-leading-zero) / "";
  justify-self: center;
  margin-bottom: 4px;
  padding: 0 0 6px 0.22em;
  border-bottom: 2px solid var(--gy-accent);
  color: var(--gy-accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
}

.gy-detail__text { margin: 0 0 28px; }
.gy-detail__text h2 { margin-bottom: 10px; font-size: calc(20px * var(--gy-h-scale)); line-height: 1.35; }
.gy-detail__text p { font-size: 15.5px; line-height: 1.8; }
.gy-detail__text .gy-steps { font-size: 15px; }
.gy-pane > .gy-warn { margin-bottom: 24px; }

/* ---- 쿠팡식 신뢰 블록 (16-8): 맛있는 이유 → 출하 과정 → 받으면 확인할 것 ---- */
.gy-reasons,
.gy-ship { margin: 8px 0 40px; }
.gy-reasons__title,
.gy-ship__title {
  margin-bottom: 16px;
  font-size: calc(21px * var(--gy-h-scale));
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.gy-reasons__title::before,
.gy-ship__title::before {            /* 제목 위 짧은 감귤 선 */
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  margin: 0 auto 10px;
  border-radius: 2px;
  background: var(--gy-accent);
}

/* 맛있는 이유 — 휴대폰: 아이콘 왼쪽 가로형 1열 / 560px 이상: 3열 세로형 */
.gy-reasons__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gy-reason {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-card);
}
.gy-reason > .gy-ico {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-face);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
}
.gy-reason__title { grid-column: 2; align-self: end; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.gy-reason__text { grid-column: 2; align-self: start; color: var(--gy-ink-soft); font-size: 13.5px; line-height: 1.6; }
@media (min-width: 560px) {
  .gy-reasons__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .gy-reason { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; row-gap: 6px; padding: 22px 14px 18px; text-align: center; }
  .gy-reason > .gy-ico { grid-column: auto; grid-row: auto; margin-bottom: 4px; }
  .gy-reason__title,
  .gy-reason__text { grid-column: auto; align-self: auto; }
}

/* 출하 과정 — 번호 01~04(CSS 카운터) + 단계 사이 꺾쇠, 둥근 정사각 사진. 휴대폰 2×2 / 560px 이상 4열 */
.gy-ship__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gy-ship;
}
.gy-ship__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  text-align: center;
  counter-increment: gy-ship;
}
.gy-ship__step > .gy-media {
  width: 100%;
  margin: 0 0 8px;
  border-radius: var(--gy-radius);
  box-shadow: var(--gy-shadow-card);
}
.gy-ship__step::before {             /* 단계 번호 — 사진 왼쪽 위 알약 */
  content: counter(gy-ship, decimal-leading-zero);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-promo-hot);
  color: var(--gy-on-action);
  font-size: 12px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.gy-ship__step::after {              /* 다음 단계 꺾쇠 — 사진 세로 가운데(여백 %는 폭 기준), 칸 사이 틈 */
  content: "";
  position: absolute;
  top: 0;
  right: -13px;
  z-index: 3;
  width: 8px;
  height: 8px;
  margin-top: calc(50% - 5px);
  border-top: 2px solid var(--gy-accent);
  border-right: 2px solid var(--gy-accent);
  transform: rotate(45deg);
}
.gy-ship__step:nth-child(2n)::after,
.gy-ship__step:last-child::after { display: none; }   /* 휴대폰 2×2: 줄 끝과 마지막에는 꺾쇠 없음 */
.gy-ship__name { font-size: 15px; font-weight: 700; line-height: 1.4; }
.gy-ship__text { color: var(--gy-ink-soft); font-size: 13px; line-height: 1.55; }
@media (min-width: 560px) {
  .gy-ship__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gy-ship__step:nth-child(2n)::after { display: block; }
  .gy-ship__step:last-child::after { display: none; }
}

/* 받으면 확인할 것 — 옅은 테마색 상자 + 체크 표시 목록 */
.gy-check {
  margin: 4px 0 28px;
  padding: 20px 18px 18px;
  border-radius: var(--gy-radius);
  background: var(--gy-brand-soft);
}
.gy-check__title { margin-bottom: 12px; color: var(--gy-ink); font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.gy-check__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gy-check__list > li { position: relative; min-height: 20px; padding-left: 30px; font-size: 14.5px; line-height: 1.65; }
.gy-check__list > li::before {       /* 체크 동그라미 */
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gy-brand);
}
.gy-check__list > li::after {        /* 체크 표시 */
  content: "";
  position: absolute;
  top: calc(0.2em + 4px);
  left: 7px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--gy-on-brand);
  border-bottom: 2px solid var(--gy-on-brand);
  transform: rotate(45deg);
}

/* 상품정보제공고시 */
.gy-spec { margin-top: 28px; border-top: 2px solid var(--gy-ink); }
.gy-spec__sum {
  position: relative;
  display: block;
  min-height: 52px;
  box-sizing: border-box;
  padding: 14px 32px 14px 0;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.gy-spec__sum::-webkit-details-marker { display: none; }
.gy-spec__sum::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--gy-ink-soft);
  border-bottom: 2px solid var(--gy-ink-soft);
  transform: rotate(45deg);
}
.gy-spec[open] > .gy-spec__sum::after { margin-top: -2px; transform: rotate(-135deg); }
.gy-spec__list { margin: 0 0 8px; border-top: 1px solid var(--gy-line); font-size: 13px; line-height: 1.55; }
.gy-spec__list > div { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); border-bottom: 1px solid var(--gy-line); }
.gy-spec__list dt { padding: 10px 12px; background: var(--gy-fog); color: var(--gy-ink-soft); font-weight: 500; }
.gy-spec__list dd { margin: 0; padding: 10px 12px; color: var(--gy-ink); }

/* 후기 요약 */
.gy-review-sum {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-bottom: 16px;
  padding: 18px 0 16px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-card);
  text-align: center;
}
.gy-review-sum > span:not(.gy-sample) { display: block; padding: 0 8px; color: var(--gy-ink-soft); font-size: 13px; line-height: 1.5; }   /* "총 후기 6개"처럼 한 줄로 */
.gy-review-sum > span:not(.gy-sample) + span:not(.gy-sample) { border-left: 1px solid var(--gy-line); }
.gy-review-sum b { margin: 0 2px; color: var(--gy-ink); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.gy-review-sum > .gy-sample { position: absolute; top: 8px; right: 10px; font-size: 11px; }

/* 후기 카드 (16-5) — 별점 · 글 · 이름·날짜 · 사진(있으면 오른쪽 위 작은 정사각형) */
.gy-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: 76px;
  align-content: start;
  gap: 8px 14px;
  padding: 16px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-card);
}
.gy-review > :not(.gy-review__photo) { grid-column: 1; }
.gy-review__photo {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 76px;
  height: 76px;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-fog);
  object-fit: cover;
}
.gy-review__stars { color: var(--gy-accent); font-size: 14px; line-height: 1; letter-spacing: 0.1em; }
.gy-review__stars .gy-ico { width: 14px; height: 14px; }
.gy-review__text { color: var(--gy-ink); font-size: 14.5px; line-height: 1.65; }
.gy-rail .gy-review__text {           /* 가로 미리보기에서는 4줄까지만 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.gy-review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--gy-ink-soft); font-size: 12px; }
.gy-review__meta .gy-sample { padding: 0 5px; font-size: 11px; }
.gy-review .gy-media { border-radius: var(--gy-radius-sm); }
:not(.gy-rail) > .gy-review + .gy-review { margin-top: 10px; }   /* 구매후기 탭의 세로 목록 */
.gy-sec__head + .gy-sample-note { margin: 0 0 12px; }            /* 후기 미리보기 위 '예시' 안내 */
.gy-sample-note + .gy-review { margin-top: 12px; }


/* ---------------------------------------------------------------------
 * 25. 하단 고정 바 (찜 + 구매하기)
 * ------------------------------------------------------------------- */
.gy-buybar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--gy-buybar-h);
  box-sizing: border-box;
  padding: 8px var(--gy-pad-r) calc(8px + env(safe-area-inset-bottom, 0px)) var(--gy-pad-l);
  border-top: 1px solid var(--gy-line);
  background: var(--gy-paper);
}
.gy-buybar__wish {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-radius-btn);
  background: var(--gy-paper);
  color: var(--gy-ink);
}
.gy-buybar__wish[aria-pressed="true"] { border-color: var(--gy-accent-ink); color: var(--gy-accent-ink); }
.gy-buybar__buy { flex: 1 1 auto; min-height: 48px; font-size: 17px; }


/* ---------------------------------------------------------------------
 * 26. 옵션 창 — 아래에서 올라옴(넓은 화면은 640px 가운데)
 * ------------------------------------------------------------------- */
.gy-sheet { position: fixed; inset: 0; z-index: 90; }
.gy-sheet__backdrop { position: absolute; inset: 0; background: var(--gy-scrim); }
.gy-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  max-width: var(--gy-app);
  max-height: 88vh;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 10px var(--gy-pad-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gy-pad-l);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--gy-radius) var(--gy-radius) 0 0;
  background: var(--gy-paper);
  color: var(--gy-ink);
  box-shadow: var(--gy-shadow-sheet);
}
.gy-sheet__panel::before {           /* 손잡이 */
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: var(--gy-line-strong);
}
.gy-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-bottom: 8px; }
.gy-sheet__head b { min-width: 0; font-size: 16px; line-height: 1.4; }
.gy-sheet__head .gy-top__btn { margin-right: -10px; }

.gy-field { display: grid; gap: 6px; }
.gy-field__label { color: var(--gy-ink-soft); font-size: 13px; font-weight: 700; }
.gy-select {
  display: block;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 40px 0 14px;
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-radius-sm);
  background: var(--gy-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d646a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
  color: var(--gy-ink);
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}
.gy-select:focus-visible { outline-offset: 1px; }

.gy-qty {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-radius-sm);
}
.gy-qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--gy-paper);
  color: var(--gy-ink);
}
.gy-qty button:disabled { color: var(--gy-line-strong); cursor: not-allowed; }
.gy-qty button:focus-visible { outline-offset: -3px; }
.gy-qty button .gy-ico { width: 20px; height: 20px; }
.gy-qty__val {
  min-width: 48px;
  border-left: 1px solid var(--gy-line);
  border-right: 1px solid var(--gy-line);
  font-size: 16px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gy-sum { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid var(--gy-line); }
.gy-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; }
.gy-sum dt { color: var(--gy-ink-soft); font-size: 14px; }
.gy-sum dd { margin: 0; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.gy-sum > .gy-sum__total { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--gy-line-strong); }
.gy-sum__total dt { color: var(--gy-ink); font-size: 15px; font-weight: 700; }
.gy-sum__total dd { color: var(--gy-accent-ink); font-size: 22px; font-weight: 700; }

.gy-sheet__msg {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
  font-size: 13px;
  line-height: 1.6;
}
.gy-sheet__msg:empty { display: none; }
.gy-sheet__actions { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 8px; margin-top: 14px; }
.gy-sheet__actions .gy-btn { min-width: 0; padding: 0 8px; font-size: 15px; }


/* ---------------------------------------------------------------------
 * 27. 가이드 글 (빵부스러기 · 글 머리 · 목차 · 본문 · 표 · 레시피 · 관련 글)
 * ------------------------------------------------------------------- */
.gy-crumb { padding: 14px var(--gy-pad-r) 0 var(--gy-pad-l); color: var(--gy-ink-soft); font-size: 13px; }
.gy-crumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.gy-crumb li { display: inline-flex; align-items: center; }
.gy-crumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 9px 0 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.gy-crumb a { padding: 6px 0; color: inherit; }
.gy-crumb [aria-current="page"] { color: var(--gy-ink); font-weight: 500; }

.gy-article__head { padding: 16px var(--gy-pad-r) 24px var(--gy-pad-l); }
.gy-article__head .gy-eyebrow { margin-bottom: 6px; }
.gy-article__title { font-size: calc(28px * var(--gy-h-scale)); line-height: 1.3; }
.gy-article__head .gy-answer { margin-top: 14px; }
.gy-article__head .gy-dated { margin-top: 12px; }

.gy-toc { margin: 20px var(--gy-pad-r) 0 var(--gy-pad-l); padding: 16px 18px; border-radius: var(--gy-radius); background: var(--gy-fog); }
.gy-toc::before {
  content: "목차";
  content: "목차" / "";
  display: block;
  margin-bottom: 4px;
  color: var(--gy-ink-soft);
  font-size: 13px;
  font-weight: 700;
}
.gy-toc ul { margin: 0; padding: 0; list-style: none; counter-reset: gy-toc; }
.gy-toc li { counter-increment: gy-toc; }
.gy-toc a { display: flex; align-items: baseline; gap: 10px; min-height: 36px; padding: 7px 0; box-sizing: border-box; color: var(--gy-ink); font-size: 15px; line-height: 1.45; }
.gy-toc a::before {
  content: counter(gy-toc, decimal-leading-zero);
  flex: none;
  color: var(--gy-brand);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 본문 조각 (content/guides 폴더의 html 조각) */
.gy-article > .gy-media,
.gy-article > figure.gy-media { margin: 0; }
.gy-article__sec { padding: 32px var(--gy-pad-r) 4px var(--gy-pad-l); font-size: 16px; line-height: 1.8; }
.gy-article__sec > h2 { margin-bottom: 14px; font-size: calc(23px * var(--gy-h-scale)); line-height: 1.35; }
.gy-article__sec :where(h3:not([class])) { margin: 26px 0 8px; font-size: 17.5px; line-height: 1.45; }
.gy-article__sec :where(h4:not([class])) { margin: 18px 0 6px; font-size: 16px; line-height: 1.45; }
.gy-article__sec :where(p:not([class])) { margin: 0 0 14px; }
.gy-article__sec :where(ul:not([class]), ol:not([class])) { margin: 0 0 16px; padding-left: 1.3em; }
.gy-article__sec :where(ul:not([class]), ol:not([class])) > li + li { margin-top: 6px; }
.gy-article__sec :where(ul:not([class])) > li::marker { color: var(--gy-brand); }
.gy-article__sec :where(a:not([class])) { color: var(--gy-brand); text-decoration: underline; text-underline-offset: 3px; }
.gy-article__sec > :where(.gy-dots, .gy-steps, .gy-note, .gy-warn, .gy-tip, .gy-table-wrap, .gy-recipe, .gy-faq, .gy-day, .gy-today, .gy-principles, .gy-cert, .gy-empty, .gy-box) { margin-bottom: 18px; }
.gy-article__sec > .gy-media { margin: 18px 0; border-radius: var(--gy-radius-sm); }
.gy-article__sec > :last-child { margin-bottom: 0; }

/* 표 */
.gy-table-wrap { overflow-x: auto; border: 1px solid var(--gy-line); border-radius: var(--gy-radius-sm); }
.gy-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.gy-table caption { padding: 10px 12px; color: var(--gy-ink-soft); font-size: 13px; text-align: left; caption-side: top; }
.gy-table th,
.gy-table td { padding: 10px 12px; border-bottom: 1px solid var(--gy-line); text-align: left; vertical-align: top; }
.gy-table thead th { background: var(--gy-fog); font-size: 13.5px; white-space: nowrap; }
.gy-table tbody th { font-weight: 700; white-space: nowrap; }
.gy-table tbody tr:last-child > * { border-bottom: 0; }

/* 레시피 상자 */
.gy-recipe { overflow: hidden; border: 1px solid var(--gy-line); border-radius: var(--gy-radius); background: var(--gy-paper); }
.gy-recipe > .gy-media { margin: 0; border-radius: 0; }
.gy-recipe__head { padding: 16px 18px 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.gy-recipe__head :where(h3, h4) { margin: 0; font-size: 18px; }
.gy-recipe__head p { margin: 4px 0 0; color: var(--gy-ink-soft); font-size: 14.5px; font-weight: 400; line-height: 1.6; }
.gy-recipe__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 18px 0; list-style: none; }
.gy-recipe__meta > :not(.gy-chip) {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--gy-radius-chip);
  background: var(--gy-fog);
  color: var(--gy-ink-soft);
  font-size: 12.5px;
  line-height: 1.3;
}
.gy-recipe__cols { display: grid; gap: 16px; padding: 16px 18px 18px; font-size: 15px; line-height: 1.7; }
.gy-recipe__cols :where(h3, h4, b, strong):first-child { display: block; margin: 0 0 6px; color: var(--gy-brand); font-size: 14px; font-weight: 700; }
.gy-recipe__cols :where(ul, ol) { margin: 0; }
@media (min-width: 560px) {
  .gy-recipe__cols { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; }
}

/* 관련 글 */
.gy-related { margin-top: 32px; padding: 24px var(--gy-pad-r) 8px var(--gy-pad-l); border-top: 8px solid var(--gy-fog); }
.gy-related__title { margin-bottom: 4px; font-size: 18px; font-weight: 700; }


/* ---------------------------------------------------------------------
 * 28. 농부 이야기 — 농부 카드(사이트의 얼굴) · 하루 일과 · 오늘의 이야기 · 원칙 · 인증 · 한마디
 * ------------------------------------------------------------------- */
.gy-farmer__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 30px 20px 24px;
  border-radius: var(--gy-radius);
  background: var(--gy-farmer-bg);
  color: var(--gy-farmer-ink);
  text-align: center;
}
.gy-farmer__card :focus-visible { outline-color: var(--gy-farmer-focus); }
.gy-article > .gy-farmer__card { margin: 4px var(--gy-pad-r) 8px var(--gy-pad-l); }
.gy-farmer__face {
  position: relative;
  width: 136px;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--gy-radius-face);
  background: var(--gy-paper);
  box-shadow: 0 0 0 4px var(--gy-paper), 0 0 0 7px var(--gy-accent), var(--gy-shadow-face);
}
.gy-farmer__face img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gy-farmer__face .gy-ai { left: 50%; bottom: 12px; max-width: calc(100% - 24px); padding: 1px 7px; font-size: 10px; transform: translateX(-50%); }
.gy-farmer__body { display: grid; justify-items: center; gap: 4px; width: 100%; min-width: 0; }
.gy-farmer__body .gy-eyebrow { color: var(--gy-farmer-eyebrow); }
.gy-farmer__name { font-size: calc(28px * var(--gy-h-scale)); line-height: 1.25; }
.gy-farmer__role { color: var(--gy-farmer-soft); font-size: 13.5px; line-height: 1.5; }
.gy-farmer__greet {                  /* 말풍선 */
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
  color: var(--gy-ink);
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
  box-shadow: var(--gy-shadow-card);
}
.gy-farmer__greet::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: inherit;
  transform: rotate(45deg);
}
.gy-farmer__body .gy-btn { margin-top: 14px; }
@media (min-width: 560px) {
  .gy-farmer__card {
    grid-template-columns: 168px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 28px;
    padding: 32px 28px;
    text-align: left;
  }
  .gy-farmer__face { width: 168px; justify-self: center; }
  .gy-farmer__body { justify-items: start; }
  .gy-farmer__greet::before { top: 20px; left: -7px; margin-left: 0; }
}

/* 메인 farmer 구역: 칸 폭 전체를 농부 색 띠로 칠해 사이트의 '얼굴'로 세운다(카드는 띠에 녹아든다) */
.gy-farmer { background: var(--gy-farmer-bg); color: var(--gy-farmer-ink); }
.gy-farmer .gy-farmer__card { padding: 4px 0 0; border-radius: 0; background: transparent; }
.gy-farmer .gy-farmer__face { width: 156px; }
.gy-farmer .gy-sample-note { margin-top: 22px; border-color: var(--gy-farmer-soft); color: var(--gy-farmer-soft); }
@media (min-width: 560px) {
  .gy-farmer .gy-farmer__card { grid-template-columns: 184px minmax(0, 1fr); padding: 4px 0 0; }
  .gy-farmer .gy-farmer__face { width: 184px; }
  .gy-farmer__name { font-size: calc(32px * var(--gy-h-scale)); }
}

.gy-sample-note {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--gy-line-strong);
  border-radius: var(--gy-radius-sm);
  color: var(--gy-ink-soft);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}
.gy-article > .gy-sample-note { margin: 16px var(--gy-pad-r) 0 var(--gy-pad-l); }

/* 하루 일과 — 시간 · 점 · 글이 세로 선으로 이어진다 */
.gy-day { margin: 0; padding: 0; list-style: none; }
.gy-day__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 28px;
  padding-bottom: 22px;
}
.gy-day__item::before {              /* 다음 점까지 이어지는 선 */
  content: "";
  position: absolute;
  top: 12px;
  bottom: -12px;
  left: 65px;
  width: 2px;
  background: var(--gy-line-strong);
}
.gy-day__item::after {               /* 시간 점 */
  content: "";
  position: absolute;
  top: 6px;
  left: 60px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 3px solid var(--gy-accent);
  border-radius: 50%;
  background: var(--gy-paper);
}
.gy-day__item:last-child { padding-bottom: 0; }
.gy-day__item:last-child::before { display: none; }
.gy-day__time {
  padding-top: 1px;
  color: var(--gy-accent-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gy-day__body { min-width: 0; }
.gy-day__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; }
.gy-day__body p { margin: 4px 0 0; color: var(--gy-ink-soft); font-size: 15px; line-height: 1.75; }

/* 상세용 축약 */
.gy-day--mini { padding: 18px 16px; border-radius: var(--gy-radius); background: var(--gy-fog); }
.gy-day--mini .gy-day__item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 22px; padding-bottom: 14px; }
.gy-day--mini .gy-day__item:last-child { padding-bottom: 0; }
.gy-day--mini .gy-day__item::before { top: 11px; bottom: -11px; left: 54px; }
.gy-day--mini .gy-day__item::after { top: 5px; left: 49px; }
.gy-day--mini .gy-day__time { font-size: 13.5px; }
.gy-day--mini .gy-day__title { font-size: 14.5px; }
.gy-day--mini .gy-day__body p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 오늘의 농장 이야기 */
.gy-today { overflow: hidden; border: 1px solid var(--gy-line); border-radius: var(--gy-radius); background: var(--gy-paper); }
.gy-today > .gy-media { margin: 0; border-radius: 0; }
.gy-today__body { padding: 16px 18px 20px; }
.gy-today .gy-dated { color: var(--gy-accent-ink); font-size: 13px; font-weight: 700; }
.gy-today .gy-today__title { margin: 4px 0 8px; font-size: calc(20px * var(--gy-h-scale)); line-height: 1.4; }
.gy-today__body p:not([class]) { margin: 0; font-size: 15px; line-height: 1.8; }

/* 재배 원칙 */
.gy-principles { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gy-principle {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 16px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  background: var(--gy-paper);
}
.gy-principle > .gy-ico {
  width: 44px;
  height: 44px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: var(--gy-radius-face);
  background: var(--gy-brand-soft);
  color: var(--gy-brand);
}
.gy-principle__body { min-width: 0; }
.gy-principle__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; }
.gy-principle__body p { margin: 4px 0 0; font-size: 15px; line-height: 1.75; }
.gy-principle__body .gy-principle__proof {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--gy-line-strong);
  color: var(--gy-ink-soft);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 인증 정보 (정의 목록 표) */
.gy-cert { margin: 0; border-top: 2px solid var(--gy-ink); font-size: 14px; line-height: 1.55; }
.gy-cert > div { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); border-bottom: 1px solid var(--gy-line); }
.gy-cert dt { padding: 12px; background: var(--gy-fog); font-weight: 700; }
.gy-cert dd { margin: 0; padding: 12px; font-variant-numeric: tabular-nums; }

/* 상세 맨 앞 농부 한마디 — 작은 얼굴 + 말풍선 */
.gy-farmer-note { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0 0 28px; }
.gy-farmer-note__face {
  position: relative;
  display: block;
  flex: none;
  width: 52px;
  height: 52px;
  margin: 4px 0 0 4px;
  overflow: hidden;
  border-radius: var(--gy-radius-face);
  background: var(--gy-fog);
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--gy-paper), 0 0 0 4px var(--gy-accent);
}
.gy-farmer-note__face img { width: 100%; height: 100%; object-fit: cover; }
.gy-farmer-note__body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px 14px;
  border-radius: var(--gy-radius);
  background: var(--gy-farmer-bg);
  color: var(--gy-farmer-ink);
}
.gy-farmer-note__body::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}
.gy-farmer-note__name { display: block; color: var(--gy-farmer-eyebrow); font-size: 13px; font-weight: 700; }
.gy-farmer-note__body p { margin-top: 4px; font-size: 15px; line-height: 1.7; }
.gy-farmer-note__face .gy-ai { left: 50%; bottom: 3px; padding: 0 4px; font-size: 9px; transform: translateX(-50%); }


/* ---------------------------------------------------------------------
 * 29. 모르는 페이지 대비 — 본문 칸에 바로 놓인 글·목록이 칸 끝에 붙지 않게
 * ------------------------------------------------------------------- */
.gy-main > :where(h1, h2, h3, p, ul, ol, dl, .gy-faq, .gy-empty, .gy-note, .gy-warn, .gy-tip, .gy-dots, .gy-steps, .gy-grid, .gy-board, .gy-guides, .gy-btn, .gy-sample-note),
.gy-article > :where(p, ul, ol, dl, .gy-faq, .gy-empty, .gy-note, .gy-warn, .gy-tip, .gy-dots, .gy-steps, .gy-grid, .gy-board, .gy-guides, .gy-day, .gy-principles, .gy-cert, .gy-today) {
  margin-left: var(--gy-pad-l);
  margin-right: var(--gy-pad-r);
}
.gy-main > :where(.gy-empty) { margin-top: 32px; margin-bottom: 32px; }


/* ---------------------------------------------------------------------
 * 30. 서랍·옵션 창이 열리면 뒤 페이지 스크롤 잠금 (:has 지원 브라우저)
 * ------------------------------------------------------------------- */
.gy-root:has(> .gy-drawer:not([hidden])),
.gy-root:has(> .gy-sheet:not([hidden])) { overflow: hidden; }


/* ---------------------------------------------------------------------
 * 31. 마우스·터치별 — 손가락 화면은 스크롤 막대 숨김, 마우스 화면은 얇게 보임 · 마우스 올림 효과
 * ------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .gy-rail,
  .gy-cats__list { scrollbar-width: none; }
  .gy-rail::-webkit-scrollbar,
  .gy-cats__list::-webkit-scrollbar { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .gy-rail,
  .gy-cats__list { padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--gy-line-strong) transparent; }
}
@media (hover: hover) {
  .gy-top .gy-top__btn:hover { background: var(--gy-top-hover); }
  .gy-drawer .gy-top__btn:hover,
  .gy-sheet .gy-top__btn:hover,
  .gy-drawer__list a:hover,
  .gy-qty button:hover:not(:disabled) { background: var(--gy-hover); }
  .gy-btn--main:hover { filter: var(--gy-action-hover); }
  .gy-btn--line:hover,
  .gy-buybar__wish:hover { border-color: var(--gy-ink); }
  .gy-chips .gy-chip:hover { background: var(--gy-brand); color: var(--gy-on-brand); }
  .gy-card__link:hover .gy-card__name,
  .gy-guide:hover .gy-guide__title,
  .gy-board a:hover .gy-board__title,
  .gy-best__item:hover .gy-best__name,
  .gy-side__season a:hover,
  .gy-crumb a:hover,
  .gy-foot__menu a:hover,
  .gy-cal__table th[scope="row"] a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .gy-tabsnav a:hover,
  .gy-ptabs a:hover,
  .gy-sec__more:hover { color: var(--gy-ink); }
  .gy-float__btn:not(.gy-float__btn--talk):hover { background: var(--gy-fog); }
  .gy-cat:hover .gy-cat__img { box-shadow: 0 0 0 2px var(--gy-accent); }
  .gy-card__link:hover .gy-media { box-shadow: var(--gy-shadow-card-hover); }
  .gy-inquiry:hover .gy-inquiry__tel { text-decoration: underline; text-decoration-color: var(--gy-accent); text-underline-offset: 4px; }
  .gy-faq__q:hover { color: var(--gy-accent-ink); }
  .gy-reel:hover .gy-reel__media { box-shadow: var(--gy-shadow-card-hover); }
  .gy-reel:hover .gy-reel__title { text-decoration: underline; text-underline-offset: 3px; }
  .gy-themebar__btn:not([aria-pressed="true"]):hover { background: var(--gy-top-hover); }
}


/* ---------------------------------------------------------------------
 * 32. 움직임 — '움직임 줄이기'를 켠 사람에게는 처음부터 아무것도 움직이지 않는다
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
  .gy-hero__track { scroll-behavior: smooth; }
  .gy-sheet:not([hidden]) .gy-sheet__panel { animation: gy-sheet-up 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .gy-drawer:not([hidden]) .gy-drawer__panel { animation: gy-drawer-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .gy-sheet:not([hidden]) .gy-sheet__backdrop,
  .gy-drawer:not([hidden]) .gy-drawer__backdrop { animation: gy-fade 0.2s ease-out; }
  .gy-btn,
  .gy-top__btn,
  .gy-chip,
  .gy-themebar__btn,
  .gy-float__btn,
  .gy-buybar__wish,
  .gy-drawer__list a { transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s; }
  .gy-card .gy-media img,
  .gy-guide__img img { transition: transform 0.35s ease; }
  .gy-card .gy-media { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .gy-cat__img { transition: box-shadow 0.2s; }
  .gy-inquiry { transition: filter 0.15s; }
  .gy-reel__media { transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.15s; }
  .gy-reel:active .gy-reel__media { transform: scale(0.98); }
  .gy-faq__q::after,
  .gy-spec__sum::after { transition: transform 0.2s; }
  .gy-hero__dot::before { transition: width 0.2s, margin 0.2s, opacity 0.2s; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .gy-card__link:hover .gy-media { transform: translateY(-2px); }
  .gy-card__link:hover .gy-media img { transform: scale(1.04); }
  .gy-guide:hover .gy-guide__img img { transform: scale(1.05); }
  .gy-reel:hover .gy-reel__media { transform: translateY(-3px); }
  .gy-reel:active .gy-reel__media { transform: translateY(-1px) scale(0.98); }   /* 마우스로 누를 때도 눌림이 이기게 */
}
@keyframes gy-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gy-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes gy-fade { from { opacity: 0; } to { opacity: 1; } }


/* ---------------------------------------------------------------------
 * 33. 오래된 브라우저 대비 — aspect-ratio가 없으면 위 여백으로 비율 유지
 * ------------------------------------------------------------------- */
@supports not (aspect-ratio: 1 / 1) {
  .gy-media::before,
  .gy-guide__img::before,
  .gy-farmer__face::before { content: ""; display: block; padding-top: 75%; }
  .gy-media--square::before,
  .gy-farmer__face::before { padding-top: 100%; }
  .gy-promo { min-height: min(75vw, 480px); }
}


/* ---------------------------------------------------------------------
 * 34. 온라인 결제 (테스트 모드 · INTERFACE 19절) — 옵션 창 안 '받는 분 정보' 단계 · 결제 결과 페이지
 * ------------------------------------------------------------------- */
.gy-pay { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gy-line); }
.gy-pay__badge {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px dashed var(--gy-accent);
  border-radius: var(--gy-radius-sm);
  background: var(--gy-accent-soft);
  color: var(--gy-accent-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.gy-pay__fields { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gy-pay__title { margin-bottom: 2px; padding: 0; color: var(--gy-ink); font-size: 16px; font-weight: 700; }
.gy-input {
  display: block;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-radius-sm);
  background: var(--gy-paper);
  color: var(--gy-ink);
  font: inherit;
  font-size: 16px;                    /* 16px 이상이어야 아이폰이 입력할 때 화면을 확대하지 않는다 */
}
.gy-input::placeholder { color: var(--gy-ink-soft); opacity: 0.75; }
.gy-input:focus-visible { outline-offset: 1px; }
.gy-pay__note { margin: 12px 0 0; color: var(--gy-ink-soft); font-size: 12.5px; line-height: 1.6; }
.gy-pay__note a { color: inherit; text-decoration: underline; }
.gy-pay__agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--gy-radius-sm);
  background: var(--gy-fog);
  color: var(--gy-ink);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.gy-pay__agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gy-action); }
.gy-pay__go { margin-top: 14px; }
.gy-pay__go[aria-busy="true"] { cursor: progress; }
.gy-pay__msg { margin: 10px 0 0; color: var(--gy-ink); font-size: 13.5px; line-height: 1.6; }
.gy-pay__msg:empty { display: none; }

/* 결제 결과 페이지 — 기다림(wait) · 완료(done) · 미완료(fail) */
.gy-payres__sum { margin-top: 0; margin-bottom: 18px; padding: 6px 16px; border: 1px solid var(--gy-line); border-radius: var(--gy-radius-sm); background: var(--gy-paper); }
.gy-payres__sum > div + div { border-top: 1px solid var(--gy-line); }
.gy-payres__sum dt { flex: none; }
.gy-payres__sum dd { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.gy-payres__sum a { color: var(--gy-brand); text-decoration: underline; }
.gy-payres__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.gy-payres[data-state="done"] .gy-article__title { color: var(--gy-brand); }
.gy-payres[data-state="fail"] .gy-article__title { color: var(--gy-accent-ink); }
.gy-payres .gy-article__head .gy-warn { margin-top: 14px; }

/* ---------------------------------------------------------------------
 * 35. 품절 표시 (INTERFACE 18-2 · 사장님 관리 화면이 켜고 끈다) — 4 테마 모두 같은 회색
 * ------------------------------------------------------------------- */
.gy-card.is-soldout .gy-media img { filter: grayscale(1); opacity: 0.55; }
.gy-card.is-soldout .gy-card__name,
.gy-card.is-soldout .gy-price,
.gy-card.is-soldout .gy-price__rate,
.gy-card.is-soldout .gy-price__sale { color: var(--gy-ink-soft); }
.gy-badge--soldout { background: #4a4f53; color: #ffffff; }   /* 흰 글자 8:1 */
.gy-best__soldout { justify-self: start; padding: 0 5px; border-radius: var(--gy-radius-chip); background: #4a4f53; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1.6; }
.gy-pd__soldout { margin-top: 10px; padding: 10px 12px; border-radius: var(--gy-radius-sm); background: var(--gy-fog); color: var(--gy-ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.gy-buybar__buy:disabled,
.gy-buybar__buy:disabled:hover,
.gy-buybar__buy:disabled:active { border-color: #6b7176; background: #6b7176; color: #ffffff; opacity: 1; cursor: not-allowed; filter: none; transform: none; }   /* 흰 글자 4.9:1 · 공통 disabled 흐림(0.45) 대신 또렷하게 */

/* ---------------------------------------------------------------------
 * 36. 스마트스토어 연결 (INTERFACE 20절) — 옵션 창 초록 단추 · 작은 바로가기 링크.
 *     네이버 상표 그림(로고)은 쓰지 않고 글자만. 4 테마 공통 (어두운 꼬리말만 밝은 초록 글자)
 * ------------------------------------------------------------------- */
:root {
  --gy-naver: #03753a;         /* 짙은 네이버 초록(원래 #03c75a 는 흰 글자 2.3:1 이라 못 씀): 흰 글자 5.8:1 · 흰 바탕 글자 5.8:1 · 옅은 회색 꼬리말 5.3:1 */
  --gy-on-naver: #ffffff;
  --gy-foot-naver: var(--gy-naver);
}
.gy-root[data-theme="dolham"],
.gy-root[data-theme="hallasan"],
.gy-root[data-theme="bada"] { --gy-foot-naver: #8fdcae; }   /* 어두운 꼬리말 바탕(#232527 · #17382a · #0e3439)에서 8.0:1 이상 */

.gy-btn--naver { border-color: var(--gy-naver); background: var(--gy-naver); color: var(--gy-on-naver); }
.gy-buybar__buy.gy-btn--naver { padding-inline: 12px; font-size: 16px; }   /* '스마트스토어로만' 하단 바: 샘플 '(예시 연결)'까지 360px 폭에서 한 줄 */
.gy-ss { display: grid; gap: 6px; margin-top: 10px; }
.gy-ss__note { margin: 0; color: var(--gy-ink-soft); font-size: 12.5px; line-height: 1.55; text-align: center; text-wrap: balance; }   /* 두 줄이 되면 줄 길이를 고르게 */
.gy-pd__ss { margin-top: 8px; text-align: left; }   /* '스마트스토어로만': 상세 가격 아래 */
.gy-ss-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;                /* 칸(grid) 안에서 글자 폭만큼만 눌리게 */
  gap: 6px;
  min-height: 32px;
  color: var(--gy-naver);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.gy-ss-link::after {                  /* 바깥으로 나가는 화살표 느낌(↗): 오른쪽 위 꺾쇠 + 빗금 */
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  background: linear-gradient(to bottom right, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px));   /* 왼쪽 아래 → 오른쪽 위 빗금 */
}
.gy-foot .gy-ss-link { color: var(--gy-foot-naver); }
@media (hover: hover) {
  .gy-btn--naver:hover { filter: brightness(0.9); }
  .gy-ss-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}