/*
  플레로마 홈페이지 비공개 시안 v1 - 스타일
  디자인 근거는 DESIGN.md 참고. 글꼴 @font-face 블록은 build.mjs가 아래 표시 사이를 자동으로 다시 씁니다.
  참고 기준: Anthropic frontend-design, Impeccable typeset/harden (Apache-2.0, README.md 출처 표기).
*/

/* @fonts:start */
/* 자동 생성: 사용한 글자가 속한 Noto Serif KR 조각만 포함(OFL-1.1, assets/fonts/LICENSE-OFL-1.1.txt) */
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-111-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-111-wght-normal.woff2) format('woff2');
  unicode-range: U+e7,U+2022,U+203b,U+25c0,U+2605,U+2661,U+3147,U+318d,U+672c,U+8a9e,U+acaa,U+acbc,U+ad1c,U+ae4a,U+ae5c,U+b044,U+b054,U+b0c8-b0c9,U+b2a6,U+b2d0,U+b35c,U+b364,U+b428,U+b454,U+b465,U+b4b7,U+b4e3,U+b51c,U+b5a1,U+b784,U+b790,U+b7ab,U+b7f4,U+b82c,U+b835,U+b8e9,U+b8f8,U+b9d8,U+b9f9,U+ba5c,U+ba64,U+babd,U+bb18,U+bb3b,U+bbff,U+bc0d,U+bc45,U+bc97,U+bcbc,U+be45,U+be75,U+be7c,U+bfcc,U+c0b6,U+c0f7,U+c14b,U+c2b4,U+c30d,U+c4f8,U+c5bb,U+c5d1,U+c5e0,U+c5ee,U+c5fd,U+c606,U+c6c5,U+c6e0,U+c708,U+c81d,U+c820,U+c824,U+c878,U+c918,U+c96c,U+c9e4,U+c9f1,U+cc2e,U+cd09,U+cea1,U+cef5,U+cef7,U+cf64,U+cf69,U+cfe8,U+d035,U+d0ac,U+d230,U+d234,U+d2f4,U+d31d,U+d575,U+d578,U+d608,U+d614,U+d718,U+d751,U+d761,U+d78c,U+d790;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-113-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-113-wght-normal.woff2) format('woff2');
  unicode-range: U+5e,U+25b2,U+25b6,U+314e,U+ac24,U+ace1,U+ace4,U+ae68,U+af2d,U+b0d0,U+b0e5,U+b150,U+b155,U+b193,U+b2c9,U+b2dd,U+b3c8,U+b3fc,U+b410,U+b458,U+b4dd,U+b5a0,U+b5a4,U+b5bb,U+b7b5,U+b838,U+b840,U+b86f,U+b8f9,U+b960,U+b9e5,U+bab8,U+bb50,U+bc1d,U+bc24-bc25,U+bca8,U+bcbd,U+bd04,U+bd10,U+bd24,U+be48,U+be5b,U+be68,U+c05c,U+c12c,U+c140,U+c15c,U+c168,U+c194,U+c219,U+c27d,U+c2a8,U+c2f1,U+c2f8,U+c368,U+c554-c555,U+c559,U+c564,U+c5d8,U+c5fc,U+c625,U+c65c,U+c6b1,U+c728,U+c794,U+c84c,U+c88c,U+c8e0,U+c8fd,U+c998,U+c9dd,U+cc0d,U+cc30,U+ceec,U+cf13,U+cf1c,U+cf5c,U+d050,U+d07c,U+d0a8,U+d134,U+d138,U+d154,U+d1f4,U+d2bc,U+d329,U+d32c,U+d3d0,U+d3f4,U+d3fc,U+d56b,U+d5cc,U+d600-d601,U+d639,U+d6c8,U+d754,U+d765;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-114-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-114-wght-normal.woff2) format('woff2');
  unicode-range: U+3c-3d,U+2026,U+24d2,U+314b,U+ac11,U+acf3,U+ad74,U+ad81,U+adf9,U+ae34,U+af43,U+afb8,U+b05d,U+b07c,U+b110,U+b118,U+b17c,U+b180,U+b18d,U+b192,U+b2cc,U+b355,U+b378,U+b4a4,U+b4ef,U+b78d,U+b799,U+b7a9,U+b7fd,U+b807,U+b80c,U+b839,U+b9b4,U+b9db,U+ba3c,U+bab0,U+bba4,U+bc94,U+be4c,U+c154,U+c1c4,U+c26c,U+c2ac,U+c2ed,U+c4f4,U+c55e,U+c561,U+c571,U+c5b5,U+c5c4,U+c654-c655,U+c695,U+c6e8,U+c6f9,U+c724,U+c751,U+c775,U+c7a0,U+c7c1,U+c874,U+c880,U+c9d5,U+c9f8,U+cabd,U+cc29,U+cc2c,U+cca8,U+ccab,U+ccd0,U+ce21,U+ce35,U+ce7c,U+ce90,U+cee8,U+cef4,U+cfe0,U+d070,U+d0b9,U+d0c1,U+d0c4,U+d0c8,U+d15c,U+d1a1,U+d2c0,U+d300,U+d314,U+d3ed,U+d478,U+d480,U+d48d,U+d508,U+d53d,U+d5e4,U+d611,U+d61c,U+d68d,U+d6a8,U+d798;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-115-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-115-wght-normal.woff2) format('woff2');
  unicode-range: U+23,U+25,U+5f,U+a9,U+ac08,U+ac78,U+aca8,U+acac,U+ace8,U+ad70,U+adc0,U+addc,U+b137,U+b140,U+b208,U+b290,U+b2f5,U+b3c5,U+b3cc,U+b420,U+b429,U+b529,U+b530,U+b77d,U+b79c,U+b7a8,U+b7c9,U+b7f0,U+b7fc,U+b828,U+b860,U+b9ad,U+b9c1,U+b9c9,U+b9dd-b9de,U+b9e8,U+ba38-ba39,U+babb,U+bc00,U+bc8c,U+bca0,U+bca4,U+bcd1,U+bcfc,U+bd09,U+bdf0,U+be60,U+c0ad,U+c0b4,U+c0bc,U+c190,U+c1fc,U+c220,U+c288,U+c2b9,U+c2f6,U+c528,U+c545,U+c558,U+c5bc,U+c5d4,U+c600,U+c644,U+c6c0,U+c6c3,U+c721,U+c798,U+c7a1,U+c811,U+c838,U+c871,U+c904,U+c990,U+c9dc,U+cc38,U+cc44,U+cca0,U+cd1d,U+cd95,U+cda9,U+ce5c,U+cf00,U+cf58,U+d150,U+d22c,U+d305,U+d328,U+d37c,U+d3f0,U+d551,U+d5a5,U+d5c8,U+d5d8,U+d63c,U+d64d,U+d669,U+d734,U+d76c;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-116-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-116-wght-normal.woff2) format('woff2');
  unicode-range: U+26,U+2b,U+3e,U+40,U+7e,U+ac01,U+ac19,U+ac1d,U+aca0,U+aca9,U+acb0,U+ad8c,U+ae09,U+ae38,U+ae40,U+aed8,U+b09c,U+b0a0,U+b108,U+b204,U+b298,U+b2d8,U+b2eb-b2ec,U+b2f4,U+b313,U+b358,U+b450,U+b4e0,U+b54c,U+b610,U+b780,U+b78c,U+b791,U+b8e8,U+b958,U+b974,U+b984,U+b9b0,U+b9bc-b9bd,U+b9ce,U+ba70,U+bbfc,U+bc0f,U+bc15,U+bc1b,U+bc31,U+bc95,U+bcc0,U+bcc4,U+bd81,U+bd88,U+c0c8,U+c11d,U+c13c,U+c158,U+c18d,U+c1a1,U+c21c,U+c4f0,U+c54a,U+c560,U+c5b8,U+c5c8,U+c5f4,U+c628,U+c62c,U+c678,U+c6cc,U+c808,U+c810,U+c885,U+c88b,U+c900,U+c988,U+c99d,U+c9c8,U+cc3d-cc3e,U+cc45,U+cd08,U+ce20,U+cee4,U+d074,U+d0a4,U+d0dd,U+d2b9,U+d3b8,U+d3c9,U+d488,U+d544,U+d559,U+d56d,U+d588,U+d615,U+d648,U+d655,U+d658,U+d65c;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-117-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-117-wght-normal.woff2) format('woff2');
  unicode-range: U+d,U+48,U+7c,U+ac10,U+ac15,U+ac74,U+ac80,U+ac83,U+acc4,U+ad11,U+ad50,U+ad6d,U+adfc,U+ae00,U+ae08,U+ae4c,U+b0a8,U+b124,U+b144,U+b178,U+b274,U+b2a5,U+b2e8,U+b2f9,U+b354,U+b370,U+b418,U+b41c,U+b4f1,U+b514,U+b798,U+b808,U+b824-b825,U+b8cc,U+b978,U+b9d0,U+b9e4,U+baa9,U+bb3c,U+bc18,U+bc1c,U+bc30,U+bc84,U+bcf5,U+bcf8,U+bd84,U+be0c,U+be14,U+c0b0,U+c0c9,U+c0dd,U+c124,U+c2dd,U+c2e4,U+c2ec,U+c54c,U+c57c-c57d,U+c591,U+c5c5-c5c6,U+c5ed,U+c608,U+c640,U+c6b8,U+c6d4,U+c784,U+c7ac,U+c800-c801,U+c9c1,U+c9d1,U+cc28,U+cc98,U+cc9c,U+ccad,U+cd5c,U+cd94,U+cd9c,U+cde8,U+ce68,U+cf54,U+d0dc,U+d14c,U+d1a0,U+d1b5,U+d2f0,U+d30c,U+d310,U+d398,U+d45c,U+d50c,U+d53c,U+d560,U+d568,U+d589,U+d604,U+d6c4,U+d788;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-118-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-118-wght-normal.woff2) format('woff2');
  unicode-range: U+39,U+49,U+4d-4e,U+a0,U+ac04,U+ac1c,U+ac70,U+ac8c,U+acbd,U+acf5,U+acfc,U+ad00,U+ad6c,U+adf8,U+b098,U+b0b4,U+b294,U+b2c8,U+b300,U+b3c4,U+b3d9,U+b4dc,U+b4e4,U+b77c,U+b7ec,U+b85d,U+b97c,U+b9c8,U+b9cc,U+ba54,U+ba74,U+ba85,U+baa8,U+bb34,U+bb38,U+bbf8,U+bc14,U+bc29,U+bc88,U+bcf4,U+bd80,U+be44,U+c0c1,U+c11c,U+c120,U+c131,U+c138,U+c18c,U+c218,U+c2b5,U+c2e0,U+c544,U+c548,U+c5b4,U+c5d0,U+c5ec,U+c5f0,U+c601,U+c624,U+c694,U+c6a9,U+c6b0,U+c6b4,U+c6d0,U+c704,U+c720,U+c73c,U+c740,U+c744,U+c74c,U+c758,U+c77c,U+c785,U+c788,U+c790-c791,U+c7a5,U+c804,U+c815,U+c81c,U+c870,U+c8fc,U+c911,U+c9c4,U+ccb4,U+ce58,U+ce74,U+d06c,U+d0c0,U+d130,U+d2b8,U+d3ec,U+d504,U+d55c,U+d569,U+d574,U+d638,U+d654,U+d68c;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-119-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-119-wght-normal.woff2) format('woff2');
  unicode-range: U+20-22,U+27-2a,U+2c-38,U+3a-3b,U+3f,U+41-47,U+4a-4c,U+4f-5d,U+61-7b,U+7d,U+a1,U+ab,U+ae,U+b7,U+bb,U+bf,U+2013-2014,U+201c-201d,U+2122,U+ac00,U+ace0,U+ae30,U+b2e4,U+b85c,U+b9ac,U+c0ac,U+c2a4,U+c2dc,U+c774,U+c778,U+c9c0,U+d558;
}
@font-face {
  font-family: 'Noto Serif KR Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(assets/fonts/noto-serif-kr-latin-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/noto-serif-kr-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* @fonts:end */

:root {
  /* 색 6개 */
  --tea-900: #16251d;   /* 짙은 차 녹색: 첫 화면·구매 영역 바탕, 본문 글자 */
  --tea-700: #2d4a39;   /* 밝은 바탕 위 버튼·링크 */
  --sage-300: #b7c5ae;  /* 어두운 바탕 위 보조 글자·선 */
  --sage-100: #e5eadc;  /* 구성과 가격 영역 바탕 */
  --paper: #f7f8f2;     /* 기본 종이 바탕 */
  --glow: #e0a352;      /* 사진의 따뜻한 빛: 구매 버튼과 이번 달 표시에만 사용 */

  --muted: #4a594f;     /* tea-900을 밝힌 보조 글자색 */
  --line: rgba(22, 37, 29, 0.2);
  --line-on-dark: rgba(183, 197, 174, 0.32);
  --focus: var(--tea-700);

  --serif: "Noto Serif KR Variable", "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --sans: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Nanum Gothic", system-ui, sans-serif;

  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 8vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--tea-900);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
p, dd, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

.wrap {
  width: min(78rem, calc(100% - 2 * var(--pad)));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-header, .hero, .purchase, .site-footer { --focus: var(--glow); }

.skip-link {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: -4rem;
  z-index: 20;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  background: var(--paper);
  color: var(--tea-900);
  font-weight: 700;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- 시안 안내 (소비자 화면 아님) ---------- */
.preview-bar {
  padding: 0 var(--pad);
  background: var(--sage-100);
  color: var(--tea-900);
  font-size: 0.9375rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.preview-bar__full { display: none; }
.preview-compact summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}
.preview-compact summary::-webkit-details-marker { display: none; }
.preview-compact summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.preview-compact[open] summary::after { transform: rotate(-135deg); }
.preview-compact p { padding-bottom: 0.625rem; }
@media (min-width: 62rem) {
  .preview-bar__full {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding-block: 0.5rem;
  }
  .preview-compact { display: none; }
}
.preview-bar__badge {
  padding: 0 0.5rem;
  border: 1px solid currentColor;
  font-weight: 700;
  white-space: nowrap;
}
.preview-note {
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 700 1.0625rem/1.35 var(--sans);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--glow); color: var(--tea-900); }
.btn--primary:hover { background: #ebb468; }
.btn--ghost { border-color: var(--sage-300); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(247, 248, 242, 0.08); }
.btn--solid { background: var(--tea-700); color: var(--paper); }
.btn--solid:hover { background: var(--tea-900); }
.btn--small { min-height: 2.75rem; padding: 0.25rem 1.125rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
  text-underline-offset: 0.25em;
}

/* ---------- 머리글 ---------- */
.site-header {
  position: relative;
  background: var(--tea-900);
  color: var(--paper);
}
.site-header__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  padding-block: 0.375rem;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 2.75rem;
  align-self: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.75rem;
  text-decoration: none;
}
.brand__latin {
  display: none;
  font-family: var(--serif);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--sage-300);
}
.site-nav, .site-header__cta { display: none; }
.site-nav ul { display: flex; flex-wrap: wrap; column-gap: 0.25rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  color: var(--sage-300);
  text-decoration: none;
}
.site-nav a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 0.3em; }

/* 모바일 메뉴(기본 details, JS 없이 동작) */
.menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--sage-300);
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: rgba(247, 248, 242, 0.1); }
.menu__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 10;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 0.75rem var(--pad) 1.25rem;
  background: var(--tea-900);
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  box-shadow: 0 1.5rem 2rem -1rem rgba(0, 0, 0, 0.45);
}
.menu__panel a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--paper);
  text-decoration: none;
}
.menu__panel a:not(.btn):hover { text-decoration: underline; text-underline-offset: 0.3em; }
.menu .btn { margin-top: 0.5rem; }

@media (min-width: 30rem) {
  .brand__latin { display: inline; }
}
@media (min-width: 62rem) {
  .site-header__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 2.5rem;
    padding-block: 0.875rem;
  }
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-nav ul { justify-content: flex-end; }
  .menu { display: none; }
}

/* ---------- 첫 화면 ---------- */
.hero {
  background: var(--tea-900);
  color: var(--paper);
}
.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.75rem, 6vw, 5rem);
}
.hero__lead {
  margin-bottom: 1.25rem;
  color: var(--sage-300);
  font-weight: 600;
}
.display {
  font-size: clamp(2.25rem, 0.5rem + 4.2vw, 4.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.display__line { display: block; }
.hero__desc {
  max-width: 34rem;
  margin-top: 1.75rem;
  color: #e4e9dc;
}
.hero__price {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.45;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.hero__note {
  max-width: 34rem;
  margin-top: 1rem;
  color: var(--sage-300);
}
.hero__figure { max-width: 38rem; }
.hero__figure img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 2.5rem 5rem -2rem rgba(224, 163, 82, 0.35);
}
.hero__figure figcaption {
  margin-top: 0.875rem;
  color: var(--sage-300);
}
/* 모바일·태블릿: 제목 → 가격 → 주 구매 버튼 → 사진 → 설명 → 보조 */
@media (max-width: 61.99rem) {
  .hero__copy, .hero__actions { display: contents; }
  .hero__inner { gap: 0; padding-block: 1.25rem 2.25rem; }
  .hero__lead { order: 1; margin-bottom: 0.625rem; }
  .display { order: 2; }
  .hero__price { order: 3; margin-top: 0.875rem; }
  .hero__buy { order: 4; margin-top: 1rem; justify-self: start; min-width: min(100%, 18rem); }
  .hero__figure { order: 5; margin-top: 1.25rem; width: 100%; }
  .hero__desc { order: 6; margin-top: 1.5rem; }
  .hero__note { order: 7; }
  .hero__more { order: 8; margin-top: 1.25rem; justify-self: start; min-width: min(100%, 18rem); }
}
@media (max-width: 30rem) {
  .hero__buy, .hero__more { justify-self: stretch; }
}
@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
  .hero__figure { justify-self: end; width: 100%; }
}

/* ---------- 가격 요약과 신뢰 정보 ---------- */
.glance { padding-block: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--line); }
.glance__inner { display: grid; gap: 1.75rem; }
.season-notice { color: var(--muted); }
.season-notice .text-link { margin-left: 0.5rem; color: var(--tea-700); }
.trust { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
.trust li { padding: 0.8rem 0; border-top: 1px solid var(--line); font-weight: 600; }
@media (min-width: 36rem) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .glance__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

/* ---------- 공통 구역 ---------- */
.section { padding-block: var(--section); scroll-margin-top: 1rem; }
.section--tint { background: var(--sage-100); }
.split { display: grid; gap: 2.5rem; }
.section__lead { margin-top: 1.25rem; max-width: 30rem; color: var(--muted); }
.kicker { margin-bottom: 0.75rem; color: var(--tea-700); font-weight: 700; }
@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
}

/* ---------- 제품 안내 ---------- */
.facts__title { margin-bottom: 1rem; }
.facts dl > div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--line);
}
.facts dl > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 700; color: var(--tea-700); }
.facts dd { max-width: 40rem; }
@media (min-width: 36rem) {
  .facts dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* ---------- 구성과 가격 ---------- */
.prices { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.price__name { font-size: 1.5rem; }
.price__volume { color: var(--muted); }
.price__amount {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.price__note { margin-top: 0.75rem; max-width: 24rem; }
.price__saving { margin-top: 0.5rem; color: var(--tea-700); font-weight: 700; }
.price-foot { margin-top: 1.75rem; color: var(--muted); }
.prices > div + div { padding-top: 2.5rem; border-top: 1px solid var(--line); }
@media (min-width: 40rem) {
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .prices > div + div { padding-top: 0; border-top: 0; padding-left: 3rem; border-left: 1px solid var(--line); }
}
.care {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.care p { margin-top: 0.75rem; max-width: 34rem; }
@media (min-width: 48rem) {
  .care { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

/* ---------- 발송 일정 ---------- */
.schedule__list { margin-top: 2rem; }
.season {
  padding: 1.125rem 0 1.125rem 1.25rem;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.season:last-child { border-bottom: 1px solid var(--line); }
.season__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.4;
}
.season__months { display: block; font-variant-numeric: lining-nums tabular-nums; }
.season__note { margin-top: 0.25rem; color: var(--muted); }
.season.is-current { border-left-color: var(--glow); background: rgba(224, 163, 82, 0.16); }
.badge {
  display: inline-block;
  padding: 0 0.625rem;
  background: var(--tea-900);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  border-radius: 3px;
}
.schedule__note { margin-top: 1.5rem; color: var(--muted); }
.schedule__figure img { width: 100%; border-radius: 2px; }
.schedule__figure figcaption { margin-top: 0.875rem; color: var(--muted); }
.schedule__figure figcaption p + p { margin-top: 0.375rem; }
.schedule__figure { order: 2; }
@media (min-width: 56rem) {
  .schedule__figure { order: 0; position: sticky; top: 1.5rem; }
}

/* ---------- 자주 묻는 질문 ---------- */
.faq__list > div { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.faq__list > div:last-child { border-bottom: 1px solid var(--line); }
.faq__list dt { font-family: var(--serif); font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); font-weight: 600; line-height: 1.5; }
.faq__list dd { margin-top: 0.625rem; max-width: 40rem; color: var(--muted); }

/* ---------- 구매 방법 ---------- */
.purchase { background: var(--tea-900); color: var(--paper); padding-block: var(--section); scroll-margin-top: 1rem; }
.purchase__note { margin-top: 1.25rem; max-width: 30rem; color: var(--sage-300); }
.steps { counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--line-on-dark);
}
.steps li::before {
  content: counter(step);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--glow);
}
.steps + .btn { margin-top: 2rem; }

/* ---------- 바닥글 ---------- */
.site-footer {
  background: var(--tea-900);
  color: var(--sage-300);
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line-on-dark);
}
.site-footer__brand { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; color: var(--paper); }
.site-footer__product { margin-top: 0.25rem; }
.site-footer__note { margin-top: 1rem; }
.preview-panel {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px dashed var(--sage-300);
}
.preview-panel p + p { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 후기: ui/ux를 마스터한 최고의 그래픽 디자이너 라는 걸 보여주는 시안. 원문과 가독성 우선. */
.reviews__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}.reviews__heading .section__lead{margin-top:1rem}.reviews__heading .text-link{flex-shrink:0}.reviews__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.review-card{min-width:0;padding:1.75rem;border:1px solid #c9d0c4;border-radius:4px;background:#f7f8f2}.review-card__rating{font-weight:700;color:#2d4a39;margin-bottom:1rem}.review-card blockquote{margin:0;font-size:1.125rem;line-height:1.8;overflow-wrap:anywhere}.review-card footer{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;font-size:1rem;color:#4a594f}.review-card__excerpt{margin-top:.75rem;font-size:1rem;color:#4a594f}@media(max-width:44rem){.reviews__grid{grid-template-columns:minmax(0,1fr)}.review-card{padding:1.25rem}.reviews__heading{gap:1rem}.review-card blockquote{font-size:1.0625rem}}

.review-card{display:flex;flex-direction:column}.review-card blockquote{flex:1}

.reviews__heading .text-link{flex-shrink:1;min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}

/* ---------- 직접 후기: 기존 조판과 구매 동선을 보존 ---------- */
.native-reviews { background: var(--paper); }
.native-reviews__heading { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:clamp(2rem,4vw,3rem); }
.native-reviews__heading .section__lead { max-width:42rem; }
.native-reviews__badge { flex-shrink:0; padding:.6rem .9rem; border:1px solid var(--line); font-size:1rem; line-height:1.5; color:var(--tea-700); }
.native-reviews__layout { display:grid; gap:2rem; align-items:start; }
.native-reviews__guide > p { margin-top:1rem; max-width:32rem; color:var(--muted); }
.native-reviews__steps { display:grid; gap:1.25rem; margin-top:2rem; }
.native-reviews__steps li { display:flex; align-items:flex-start; gap:1rem; }
.native-reviews__steps li > span { flex:0 0 2.25rem; padding-top:.1rem; color:var(--tea-700); font-family:var(--serif); font-size:1.25rem; line-height:1.4; }
.native-reviews__steps strong { font-weight:700; }
.native-reviews__steps p { color:var(--muted); margin-top:.15rem; }
.native-reviews__policy { margin-top:2rem; border-block:1px solid var(--line); }
.native-reviews__policy summary { padding:1rem 0; min-height:44px; cursor:pointer; font-weight:700; }
.native-reviews__policy > div { padding:0 0 1rem; color:var(--muted); font-size:1rem; }
.native-reviews__policy p + p { margin-top:.8rem; }
.review-form { padding:clamp(1rem,3vw,2.25rem); border:1px solid var(--line); background:#fff; min-width:0; }
.review-form__required { margin-top:.4rem; color:var(--muted); font-size:1rem; }
.review-rating { border:0; padding:0; margin:1.5rem 0; min-width:0; }
.review-rating legend,.review-form__field > label { font-weight:700; padding:0; margin-bottom:.5rem; display:block; }
.review-rating__choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,max(44px,2.5rem)),1fr)); gap:.4rem; }
.review-rating__option { position:relative; cursor:pointer; display:block; min-width:0; }
.review-rating__option input { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.review-rating__option span { display:flex; align-items:center; justify-content:center; min-height:48px; border:1px solid var(--line); background:var(--paper); color:var(--tea-900); font-size:1rem; font-weight:700; }
.review-rating__option input:checked + span { background:var(--tea-700); color:#fff; border-color:var(--tea-700); }
.review-rating__option input:focus-visible + span { outline:3px solid var(--focus); outline-offset:3px; }
.review-form__field { margin-top:1.25rem; }
.review-form__field > label span { color:var(--muted); font-weight:400; }
.review-form input[type="text"],.review-form textarea { width:100%; min-width:0; min-height:48px; padding:.7rem .85rem; border:1px solid #78877b; border-radius:0; background:var(--paper); color:var(--tea-900); font:inherit; line-height:1.6; }
.review-form textarea { display:block; resize:vertical; min-height:9.5rem; }
.review-form textarea::placeholder { color:#5c675e; opacity:1; }
.review-form [aria-invalid="true"] { border-color:#8d2d24; }
.review-form__hint,.review-form__meta { font-size:1rem; line-height:1.6; color:var(--muted); }
.review-form__hint { margin-top:.45rem; }
.review-form__meta { display:flex; gap:.4rem 1rem; justify-content:space-between; align-items:flex-start; margin-top:.45rem; }
.review-form__meta .review-form__hint { margin:0; max-width:24rem; }
#review-body-counter { white-space:nowrap; font-variant-numeric:tabular-nums; }
.review-form__error { color:#8d2d24; font-size:1rem; margin-top:.4rem; font-weight:700; }
.review-form__consent { display:flex; gap:.65rem; align-items:flex-start; padding:.85rem 0; margin-top:1rem; cursor:pointer; min-height:48px; font-size:1rem; line-height:1.7; }
.review-form__consent input { flex:0 0 20px; width:20px; height:20px; margin:.25rem 0 0; accent-color:var(--tea-700); }
.review-form__submit { width:100%; min-height:52px; padding:.8rem 1rem; margin-top:.65rem; border:1px solid var(--tea-700); background:var(--tea-700); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.review-form__submit:hover:not(:disabled) { background:var(--tea-900); }
.review-form__submit:disabled { cursor:not-allowed; background:#e5eadc; color:#4a594f; border-color:var(--line); }
.review-form__status { margin-top:1rem; padding:.8rem 1rem; color:var(--tea-700); background:var(--paper); font-size:1rem; line-height:1.7; overflow-wrap:anywhere; }
.review-form__status--error { color:#8d2d24; background:#fff3ef; }
.native-reviews__published { margin-top:clamp(2.5rem,6vw,4.5rem); padding-top:2rem; border-top:1px solid var(--line); }
.native-reviews__list { margin-top:1.5rem; display:grid; gap:1.25rem; }
.native-reviews__empty { padding:1.5rem 0; color:var(--muted); border-block:1px solid var(--line); }
.native-review { padding:1.5rem; border:1px solid var(--line); background:#fff; overflow-wrap:anywhere; }
.native-review p { white-space:pre-wrap; }
.native-review__rating { font-weight:700; color:var(--tea-700); }
.native-review__body { margin-top:.65rem; }
.native-review footer { margin-top:1rem; display:flex; gap:1rem; justify-content:space-between; font-size:1rem; color:var(--muted); }
@media (min-width:56rem) { .native-reviews__layout { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,6vw,6rem); } }
@media (max-width:40rem) { .native-reviews__heading { display:block; } .native-reviews__badge { display:inline-block; margin-top:1.25rem; } .review-form__meta { flex-direction:column; } .review-rating__choices { gap:.3rem; } }

/* 기존 생성본 맞춤 크롭: source의 모바일 종횡비를 그대로 사용 */
.hero__figure picture { display:block; }
.hero__figure picture img { display:block; height:auto; }

/* 병수와 가격이 서로 다른 줄로 나뉘지 않게 묶음. 문구/가격은 변경하지 않음 */
.hero__price .price-unit { white-space:nowrap; }
.hero__figure figcaption { font-size:1rem; line-height:1.6; }

/* 큰 글씨·좁은 화면: 내용을 숨기지 않고 grid의 최소 폭과 줄바꿈 보완 */
body { overflow-wrap:anywhere; }
.split > *, .prices > *, .care > *, .hero__inner > * { min-inline-size:0; }
.btn { min-inline-size:0; max-inline-size:100%; overflow-wrap:anywhere; }
.prices > div { container-type:inline-size; }
.price__amount { font-size:min(clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem), 21cqi); }
.hero__price .price-unit { display:inline-block; max-inline-size:100%; white-space:normal; overflow-wrap:anywhere; vertical-align:top; }
.menu__panel { min-inline-size:0; inline-size:min(22rem, calc(100vw - 2.5rem)); max-inline-size:calc(100vw - 2.5rem); }