@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   TONE COFFEE SUPPLY — 홈카페 원두·기구 숍
   토큰 정본: 05-data/design-tokens.json · 레이아웃 정본: 01-reference-screens/hq
   그리드: 1440 / content 1328 / margin 56 / 12col / gutter 24
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #171513;
  --oat: #f3efe7;
  --paper: #fcfaf5;
  --rust: #b65b3d;
  --moss: #6e7860;
  --sand: #d8c8b2;
  --line: #d8d1c5;
  --muted: #6f6a63;

  --f-sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-disp: "Source Serif 4", "Noto Serif KR", Georgia, "Times New Roman", serif;

  --wrap: 1328px;
  --gut: 24px;
  --an-h: 42px;
  --hd-h: 90px;
  --r-c: 2px;
  --r-k: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-size: 16px; line-height: 1.65;
  letter-spacing: -.01em; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip:focus { left: 12px; top: 12px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rust); outline-offset: 2px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 공지 바 · 헤더 ─────────────────────────────────────────────────── */
.announce { height: var(--an-h); background: var(--ink); color: #fff; }
.an-in { height: 100%; display: flex; align-items: center; }
.announce p { font-size: 11px; letter-spacing: .09em; }
.announce i { font-style: normal; margin: 0 8px; opacity: .6; }
.an-r { margin-left: auto; opacity: .78; }

.hd { height: var(--hd-h); background: var(--paper); border-bottom: 1px solid var(--line); }
.hd-in { height: 100%; display: flex; align-items: center; }
.logo { display: inline-flex; align-items: baseline; gap: 2px; }
.logo b { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.logo em { font-style: normal; font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.hd-nav { display: flex; gap: 70px; margin-left: 219px; margin-right: auto; }
.hd-nav a { font-size: 12.5px; letter-spacing: .09em; }
.hd-nav a[aria-current="page"] { color: var(--rust); }
.hd-end { display: flex; align-items: center; gap: 22px; font-size: 11.5px; letter-spacing: .08em; }
.hd-bag i { font-style: normal; margin-left: 5px; }

/* ── 공통 조각 ───────────────────────────────────────────────────────── */
.disp { font-family: var(--f-disp); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.eyebrow { font-size: 11.5px; letter-spacing: .09em; color: var(--rust); }
.eyebrow.m { color: var(--muted); }
.sec-h { font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.lbl { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
.dim { color: var(--muted); }
.link { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .08em; color: var(--rust); }
.ar { font-style: normal; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-c);
  font-size: 12.5px; font-weight: 500; letter-spacing: .08em; white-space: nowrap;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { background: rgba(23,21,19,.05); }
.btn-soft { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-soft:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.btn-rust { background: var(--rust); color: #fff; }
.btn-rust:hover { background: #a04f34; }
.btn-full { width: 100%; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 11.5px; }
.btn-lg { height: 60px; }

.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gut); }
.ph { display: block; overflow: hidden; background: var(--oat); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* 상품 카드 */
.pc .ph { aspect-ratio: 428 / 330; }
.pc h3 { margin-top: 16px; font-size: 14px; font-weight: 500; }
.pc .notes { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pc .price { margin-top: 10px; font-size: 12.5px; letter-spacing: .04em; }
.pc .row { display: flex; align-items: baseline; margin-top: 14px; }
.pc .row .price { margin-top: 0; margin-left: auto; }

/* ── 푸터 ────────────────────────────────────────────────────────────── */
.ft { background: var(--ink); color: rgba(255,255,255,.72); padding: 50px 0 0; }
.ft-in { display: grid; grid-template-columns: 632px repeat(3, 196px); gap: 24px; }
.ft-brand { padding-top: 6px; }
.wordmark { font-size: 42px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.ft-tag { margin-top: 12px; font-size: 13.5px; color: rgba(255,255,255,.66); }
.ft h2 { font-size: 11px; letter-spacing: .09em; color: rgba(255,255,255,.5); font-weight: 400; }
.ft ul { margin-top: 10px; }
.ft li { font-size: 13.5px; line-height: 1.4; padding: 2px 0; }
.ft li a { color: rgba(255,255,255,.86); }
.ft li a:hover { color: #fff; }
.ft-legal { margin-top: 33px; padding-bottom: 18px; font-size: 11.5px; color: rgba(255,255,255,.42); }

/* ── 반응형 (공용) ───────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .wrap { width: calc(100% - 64px); }
  .hd-nav { gap: 30px; margin-left: auto; }
  .sec-h { font-size: 34px; }
  .ft-in { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .hd-nav { display: none; }
  .hd { height: 66px; }
  :root { --hd-h: 66px; }
  .logo b { font-size: 26px; }
  .hd-end { margin-left: auto; gap: 16px; }
}
@media (max-width: 767px) {
  .wrap { width: calc(100% - 40px); }
  .an-r { display: none; }
  .g3, .g4 { grid-template-columns: 1fr; }
  .sec-h { font-size: 28px; }
  .ft-in { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   01 홈
   ══════════════════════════════════════════════════════════════════════ */
.hero { display: grid; grid-template-columns: 721px 1fr; height: 720px; background: var(--oat); }
.hero-t { display: flex; align-items: flex-start; padding-top: 94px; }
.hero-in { width: 100%; padding-left: max(56px, calc((100vw - var(--wrap)) / 2)); padding-right: 40px; }
.hero h1 { margin-top: 46px; margin-right: -40px; font-size: 74px; line-height: .946; white-space: nowrap; }
.hero-d { margin-top: 57px; font-size: 16.5px; line-height: 1.62; color: #3b3733; }
.hero-b { display: flex; align-items: center; gap: 32px; margin-top: 71px; }
.hero-b .btn { height: 56px; padding: 0 30px; }
.hero-ph { overflow: hidden; }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; }

.sec { padding: 70px 0 0; }
.sec .sec-h { margin-top: 27px; }
.brew, .fresh { margin-top: 25px; }
.sec-brew { padding-bottom: 44px; }
.brew .ph { aspect-ratio: 428 / 300; }
.brew-r { display: flex; align-items: baseline; margin-top: 25px; }
.brew-r b { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.brew-r .link { margin-left: auto; }

.fresh .ph { aspect-ratio: 428 / 330; }
.sec-fresh { padding-top: 54px; padding-bottom: 26px; }
.sec-fresh .fresh { margin-top: 18px; }

@media (max-width: 1199px) {
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero-t { padding-top: 0; }
  .hero-in { padding: 56px 32px 62px; }
  .hero h1 { font-size: 46px; margin-right: 0; white-space: normal; }
  .hero-ph { height: 380px; }
  .sec { padding-top: 56px; }
}
@media (max-width: 767px) {
  .hero-in { padding: 40px 20px 46px; }
  .hero h1 { font-size: 34px; }
  .hero-b { flex-wrap: wrap; gap: 18px; }
  .hero-ph { height: 260px; }
  .brew, .fresh { margin-top: 30px; gap: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════
   페이지 머리 · 목록 (02 커피 · 03 기구 · 08 검색 · 14 위시)
   ══════════════════════════════════════════════════════════════════════ */
.phead { padding-top: 64px; }
.phead h1 { margin-top: 40px; }
.disp.big { font-size: 58px; letter-spacing: -.01em; line-height: 1; }
.phead-d { margin-top: 19px; font-size: 16px; line-height: 1.44; color: #3b3733; }
.listrule { margin-top: 62px; }

.filt { display: flex; align-items: center; margin-top: 23px; }
.chips { display: flex; gap: 16px; }
.chip {
  width: 140px; height: 47px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; font-size: 11.5px; letter-spacing: .09em;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sortb { margin-left: auto; border: 0; background: transparent; font-size: 11.5px; letter-spacing: .08em; }
.sortb i { font-style: normal; margin-left: 8px; }

.plist { margin-top: 39px; row-gap: 16px; }
.pc-tag { margin-top: 28px; font-size: 11px; letter-spacing: .09em; color: var(--rust); }
.plist .pc .row { margin-top: 5px; }
.plist .pc h3 { margin-top: 0; font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.plist .pc .notes { margin-top: 3px; font-size: 13px; }
.sec-list { padding-bottom: 80px; }

/* 768–1279: 3칸 plist에서 긴 제품명만 2줄로 접혀 .notes y가 카드마다 어긋남
   — 제목을 2줄 상자(1.35lh × 2)로 고정해 아래 흐름을 같은 y에 앉힌다. */
@media (min-width: 768px) and (max-width: 1279px) {
  .plist .pc h3 { min-height: 2.7em; }
}

@media (max-width: 1199px) {
  .phead { padding-top: 48px; }
  .disp.big { font-size: 46px; }
  .filt { flex-wrap: wrap; gap: 14px; }
  .chips { flex-wrap: wrap; }
  .chip { width: auto; padding: 0 22px; }
}
@media (max-width: 767px) {
  .disp.big { font-size: 34px; }
  .phead h1 { margin-top: 24px; }
  .phead-d { margin-top: 20px; }
  .sortb { margin-left: 0; }
  .plist { margin-top: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   04 저널
   ══════════════════════════════════════════════════════════════════════ */
.jhero { display: grid; grid-template-columns: 655px 1fr; height: 700px; margin-top: 48px; background: var(--ink); }
.jhero-t { padding: 64px 48px 0; color: #fff; }
.eyebrow.m2 { color: rgba(255,255,255,.62); }
.eyebrow.w { color: rgba(255,255,255,.72); }
.jhero-h { margin-top: 45px; font-size: 63px; line-height: .92; color: #fff; }
.jhero-d { margin-top: 51px; font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,.78); }
.jhero-b { margin-top: 122px; }
.btn-w { background: #fff; color: var(--ink); height: 55px; width: 179px; padding: 0; }
.btn-w:hover { background: var(--oat); }
.jhero-ph { position: relative; overflow: hidden; }
.jhero-ph img { position: absolute; left: 50%; top: 50%; width: 212%; height: auto; max-width: none; transform: translate(-76%, -42%); }

.sec-stories { padding-top: 98px; padding-bottom: 97px; }
.stories { margin-top: 33px; }
.stories .ph { aspect-ratio: 428 / 300; }
.stories h2 { margin-top: 34px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.st-d { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }

.news { background: var(--moss); color: #fff; padding-top: 68px; padding-bottom: 166px; }
.news-in { display: grid; grid-template-columns: 794px 479px; }
.news-h { margin-top: 46px; font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.news-d { margin-top: 26px; font-size: 16px; line-height: 1.44; color: rgba(255,255,255,.88); }
.news-f { align-self: start; margin-top: 72px; display: flex; align-items: center; height: 61px; background: #fff; padding: 6px; }
.news-f input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 20px; font-size: 13px; letter-spacing: .06em; }
.news-f input::placeholder { color: var(--muted); letter-spacing: .08em; }
.news-f .btn { height: 49px; width: 157px; padding: 0; }

@media (max-width: 1199px) {
  .jhero { grid-template-columns: 1fr; height: auto; }
  .jhero-t { padding: 48px 32px 56px; }
  .jhero-h { font-size: 42px; margin-top: 28px; }
  .jhero-d { margin-top: 26px; }
  .jhero-b { margin-top: 36px; }
  .jhero-ph { height: 360px; }
  .sec-stories { padding-top: 56px; padding-bottom: 56px; }
  .news { padding-top: 56px; padding-bottom: 60px; }
  .news-in { grid-template-columns: minmax(0, 1fr); }
  .news-h { font-size: 34px; white-space: normal; }
  .news-f { margin-top: 32px; width: 100%; max-width: 479px; }
}
@media (max-width: 767px) {
  .jhero-h { font-size: 32px; }
  .news-h { font-size: 26px; }
  .news-f .btn { width: 120px; font-size: 10.5px; }
  .news-h br, .news-d br, .jhero-d br, .st-d br { display: none; }
  .stories h2 { margin-top: 20px; font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   05 톤 파인더
   ══════════════════════════════════════════════════════════════════════ */
.fi { text-align: center; }
.fi-crumb { padding-top: 69px; font-size: 11.5px; letter-spacing: .09em; }
.fi-crumb b { font-weight: 400; color: var(--rust); }
.fi-crumb i { font-style: normal; margin: 0 6px; color: var(--muted); }
.fi-q { margin-top: 48px; font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.fi-s { margin-top: 24px; font-size: 16px; color: var(--muted); }
.fi-bar { width: 840px; height: 6px; margin: 38px auto 0; background: var(--line); }
.fi-bar span { display: block; height: 100%; background: var(--rust); }
.fi-opts { width: 921px; margin: 91px auto 0; display: grid; gap: 63px; }
.fi-o {
  display: flex; align-items: center; gap: 46px; width: 100%; height: 187px;
  padding: 0 50px 0 44px; border: 1px solid var(--sand); border-radius: var(--r-k);
  background: transparent; text-align: left;
}
.fi-o:hover { border-color: var(--ink); background: #fff; }
.fi-dot { flex: 0 0 auto; width: 79px; height: 79px; border-radius: 50%; }
.fi-dot.rust { background: var(--rust); }
.fi-dot.moss { background: var(--moss); }
.fi-dot.ink { background: #2b2724; }
.fi-tx { flex: 1; min-width: 0; }
.fi-tx b { display: block; font-size: 29px; font-weight: 400; letter-spacing: .01em; line-height: 1.1; }
.fi-tx em { display: block; margin-top: 22px; font-style: normal; font-size: 15px; color: var(--muted); }
.fi-ar { width: 32px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.fi-why { margin-top: 153px; padding-bottom: 503px; }
.fi-why p:last-child { width: 433px; margin: 28px auto 0; text-align: left; font-size: 16px; line-height: 1.44; color: var(--muted); }

@media (max-width: 1199px) {
  .fi-bar, .fi-opts { width: 100%; }
  .fi-q { font-size: 34px; }
  .fi-crumb { padding-top: 44px; }
  .fi-opts { gap: 24px; }
  .fi-o { height: auto; padding: 32px; gap: 26px; }
  .fi-why { margin-top: 64px; padding-bottom: 80px; }
}
@media (max-width: 767px) {
  .fi-q { font-size: 26px; margin-top: 28px; }
  .fi-o { flex-wrap: wrap; }
  .fi-dot { width: 52px; height: 52px; }
  .fi-tx b { font-size: 20px; }
  .fi-tx em { margin-top: 10px; }
  .fi-why p:last-child { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   06·07 상품 상세
   ══════════════════════════════════════════════════════════════════════ */
.pdp { display: grid; grid-template-columns: 700px 1fr; gap: 64px; margin-top: 48px; }
.pdp-ph { height: 780px; overflow: hidden; background: var(--oat); }
.pdp-ph img { width: 100%; height: 100%; object-fit: cover; }
.pdp-in { padding-top: 14px; }
.pdp-head { min-height: 344px; }
.eyebrow i, .pdp-notes i, .pdp-trust i { font-style: normal; margin: 0 6px; opacity: .7; }
.pdp-h { margin-top: 38px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.pdp-price { margin-top: 14px; font-size: 20px; letter-spacing: -.01em; }
.pdp-rule { margin-top: 27px; }
.pdp-notes { margin-top: 20px; font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.pdp-d { margin-top: 22px; font-size: 16px; line-height: 1.44; color: #3b3733; }
.opt + .opt { margin-top: 40px; }
.opts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; }
.obx {
  height: 49px; padding: 0 16px; min-width: 134px; border: 1px solid var(--line);
  background: transparent; font-size: 14px; text-align: left;
}
.obx:hover { border-color: var(--ink); }
.obx.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pdp-add { margin-top: 45px; height: 63px; font-size: 14px; }
.pdp-trust { margin-top: 34px; font-size: 13px; color: var(--muted); }

.why { padding-top: 61px; }
.why-h { margin-top: 30px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.why-l { margin-top: 26px; }
.why-l li { border-top: 1px solid var(--line); padding-top: 33px; }
.why-n { font-size: 11.5px; letter-spacing: .09em; color: var(--rust); }
.why-l h3 { margin-top: 31px; font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: .01em; }
.why-d { margin-top: 12px; font-size: 14px; color: var(--muted); }
.rel { padding-top: 111px; padding-bottom: 77px; }
.rel .plist { margin-top: 0; }

@media (max-width: 1199px) {
  .pdp { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .pdp-ph { height: 460px; }
  .pdp-in { padding-top: 0; }
  .pdp-head { min-height: 0; }
  .pdp-h { font-size: 32px; }
  .why { padding-top: 56px; }
  .why-h { font-size: 30px; }
  .rel { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 767px) {
  .pdp-ph { height: 340px; }
  .pdp-h { font-size: 26px; }
  .pdp-d br, .why-h br { display: none; }
  .why-h { font-size: 24px; }
  .why-l li + li { margin-top: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   08 검색
   ══════════════════════════════════════════════════════════════════════ */
.page-search .phead h1 { margin-top: 40px; }
.sbox { display: flex; align-items: center; height: 79px; margin-top: 78px; border: 1px solid var(--ink); background: #fff; }
.sbox input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 32px; font-size: 20px; }
.sbox input::-webkit-search-cancel-button { display: none; }
.sbox input::placeholder { color: var(--muted); }
.sbox-x { display: grid; place-items: center; width: 60px; height: 100%; border: 0; background: transparent; }
.sbox-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.sec-res { padding-top: 59px; padding-bottom: 40px; }
.sec-res .plist { margin-top: 42px; }

@media (max-width: 1199px) {
  .sbox { margin-top: 40px; height: 62px; }
  .sbox input { font-size: 16px; padding: 0 20px; }
  .sec-res { padding-top: 36px; padding-bottom: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════
   09 장바구니 · 10·11 결제 (공용 라인/요약)
   ══════════════════════════════════════════════════════════════════════ */
.cart { display: grid; grid-template-columns: 1fr 401px; gap: 52px; align-items: start; margin-top: 105px; }
.cline { display: grid; grid-template-columns: 180px 1fr auto; column-gap: 34px; align-items: start; }
.cline + .cline { margin-top: 31px; }
.clines .cline { padding-bottom: 29px; border-bottom: 1px solid var(--line); }
.cline-ph { display: block; width: 180px; height: 180px; overflow: hidden; background: var(--oat); }
.cline-ph img { width: 100%; height: 100%; object-fit: cover; }
.cline-b h2 { margin-top: 18px; font-size: 24px; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.cline-o { margin-top: 10px; font-size: 15px; color: var(--muted); }
.qty { display: inline-flex; align-items: center; height: 45px; margin-top: 31px; border: 1px solid var(--line); }
.qty button { width: 36px; height: 100%; border: 0; background: transparent; font-size: 15px; }
.qty b { min-width: 34px; text-align: center; font-weight: 400; font-size: 15px; }
.cline-e { display: flex; flex-direction: column; align-items: flex-end; }
.cline-p { margin-top: 18px; font-size: 15px; letter-spacing: .01em; white-space: nowrap; }
.cline-r { margin-top: 78px; }
.lnkb { border: 0; background: transparent; font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
.lnkb:hover { color: var(--ink); text-decoration: underline; }

.osum { background: var(--oat); padding: 33px 31px 31px 30px; }
.osum h2 { font-size: 12px; letter-spacing: .09em; font-weight: 400; }
.osum-l { margin-top: 34px; }
.osum-l div { display: flex; align-items: baseline; justify-content: space-between; }
.osum-l div + div { margin-top: 21px; }
.osum-l dt { font-size: 15px; color: #4b4741; }
.osum-l dd { margin: 0; font-size: 14px; letter-spacing: .01em; }
.osum-l .free { color: var(--moss); font-size: 12px; letter-spacing: .08em; }
.osum .rule { margin-top: 28px; border-color: #ddd6c8; }
.osum-t { display: flex; align-items: baseline; justify-content: space-between; margin-top: 20px; }
.osum-t span { font-size: 15px; letter-spacing: .01em; }
.osum-t b { font-size: 23px; font-weight: 400; letter-spacing: -.01em; }
.osum-b { margin-top: 36px; height: 61px; font-size: 14px; }

.xsell { background: var(--moss); color: #fff; padding: 58px 0 161px; margin-top: 240px; margin-bottom: 445px; }
.xsell-in { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.xsell-h { margin-top: 32px; font-size: 26px; font-weight: 400; letter-spacing: -.01em; }
.xsell-h i { font-style: normal; opacity: .7; margin: 0 6px; }
.xsell-d { margin-top: 25px; font-size: 16px; color: rgba(255,255,255,.86); }
.xsell-b { margin-top: 33px; }
.btn-w2 { background: #fff; color: var(--ink); width: 241px; height: 60px; padding: 0; }
.btn-w2 i { font-style: normal; margin-left: 8px; }
.btn-w2:hover { background: var(--oat); }

@media (max-width: 1199px) {
  .cart { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .cline { grid-template-columns: 120px 1fr; column-gap: 20px; }
  .cline-ph { width: 120px; height: 120px; }
  .cline-b h2 { margin-top: 0; font-size: 19px; }
  .cline-e { grid-column: 2; flex-direction: row; align-items: center; gap: 18px; justify-content: flex-start; }
  .cline-p { margin-top: 14px; }
  .cline-r { margin-top: 14px; }
  .xsell { padding: 40px 0 44px; margin-top: 56px; margin-bottom: 0; }
  .xsell-in { grid-template-columns: 1fr; }
  .xsell-b { margin-top: 24px; }
}
@media (max-width: 767px) {
  .xsell-h { font-size: 20px; }
  .btn-w2 { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   10·11 결제
   ══════════════════════════════════════════════════════════════════════ */
.steps-w { padding-top: 56px; }
.steps { display: flex; align-items: center; justify-content: center; gap: 36px; font-size: 12px; letter-spacing: .06em; }
.steps li { color: var(--muted); }
.steps b { font-weight: 400; color: var(--rust); }
.steps a:hover { color: var(--ink); }
.steps i { display: block; width: 118px; height: 1px; background: var(--line); }

.ckhead { padding-top: 70px; }
.ck-h { font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ck-d { margin-top: 11px; font-size: 16px; color: var(--muted); }

.cko { display: grid; grid-template-columns: 805px 401px; gap: 122px; align-items: start; margin-top: 66px; }
.fld + .fld { margin-top: 26px; }
.fld .lbl { display: block; }
.fld input { display: block; width: 100%; height: 61px; margin-top: 11px; padding: 0 24px; border: 1px solid var(--line); background: #fff; font-size: 16px; }
.fld input::placeholder { color: #9b958c; }
.fld input:focus { border-color: var(--ink); outline: none; }

.pays { border: 0; padding: 0; margin: 11px 0 0; }
.pay {
  display: flex; align-items: center; gap: 29px; height: 87px; padding: 0 30px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.pay + .pay { margin-top: 17px; }
.pay input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-r { flex: 0 0 auto; width: 25px; height: 25px; border: 1.6px solid var(--ink); border-radius: 50%; }
.pay-t { font-size: 17px; }
.pay:has(input:checked), .pay.on { border-color: var(--ink); background: var(--oat); }
.pay:has(input:checked) .pay-r, .pay.on .pay-r { box-shadow: inset 0 0 0 5px var(--oat), inset 0 0 0 12px var(--ink); }
.pay:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }

.agree { display: flex; align-items: center; gap: 12px; height: 91px; margin-top: 66px; padding: 0 32px; background: var(--oat); font-size: 16px; cursor: pointer; }
.agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.agree-b { color: var(--muted); }
.agree:has(input:checked) .agree-b { color: var(--ink); }

.osum-ck { padding: 35px 31px 11px 30px; }
.osum-ck .rule { margin-top: 36px; }
.osum-ck .osum-l { margin-top: 32px; }
.osum-ck .osum-b { height: 49px; margin-top: 18px; }
.page-checkout-delivery main { padding-bottom: 855px; }
.page-checkout-payment main { padding-bottom: 860px; }

/* 1200–1367: wrap(1328) 전제로 고정폭 짜인 결제 2열·푸터 열이 좁아진 wrap을 넘침 — 비율 유지로 연성화 */
@media (min-width: 1200px) and (max-width: 1367px) {
  .cko { grid-template-columns: minmax(0, 805fr) minmax(0, 401fr); }
  .ft-in { grid-template-columns: minmax(0, 1fr) repeat(3, 196px); }
  .news-in { grid-template-columns: minmax(0, 794fr) minmax(0, 479fr); }
}

@media (max-width: 1199px) {
  .steps-w { padding-top: 32px; }
  .steps { gap: 14px; flex-wrap: wrap; }
  .steps i { width: 40px; }
  .ckhead { padding-top: 36px; }
  .ck-h { font-size: 32px; }
  .cko { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .page-checkout-delivery main, .page-checkout-payment main { padding-bottom: 64px; }
  .pays { margin-top: 0; }
}
@media (max-width: 767px) {
  .ck-h { font-size: 26px; }
  .pay { height: 70px; padding: 0 18px; gap: 18px; }
  .agree { height: auto; padding: 20px; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════
   12 주문 완료
   ══════════════════════════════════════════════════════════════════════ */
.done { display: grid; grid-template-columns: 110px 1fr; column-gap: 33px; margin-top: 77px; }
.done-tick { width: 110px; height: 110px; border-radius: 50%; background: var(--moss); color: #fff; display: grid; place-items: center; font-size: 38px; line-height: 1; }
.done-t { padding-top: 17px; }
.done-h { margin-top: 26px; font-size: 24px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.donecard { width: 805px; margin-top: 58px; padding: 43px 32px 33px; background: var(--oat); }
.donecard .lbl { font-weight: 400; }
.donecard-h { margin-top: 26px; font-size: 18px; }
.donecard-d { margin-top: 19px; font-size: 15px; color: var(--muted); }
.page-order-complete main { padding-bottom: 1158px; }

/* ══════════════════════════════════════════════════════════════════════
   13 로그인
   ══════════════════════════════════════════════════════════════════════ */
.lgw { display: grid; grid-template-columns: 720px 1fr; }
.lg-ph { overflow: hidden; background: var(--oat); }
.lg-ph img { width: 100%; height: 100%; object-fit: cover; }
.lg-p { background: var(--oat); padding: 0 80px; }
.lg-in { max-width: 560px; padding-top: 146px; }
.lg-h { margin-top: 47px; font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.lg-d { margin-top: 15px; font-size: 16px; color: var(--muted); }
.lg-f { margin-top: 74px; }
.lg-f .fld + .fld { margin-top: 26px; }
.lg-f input { height: 65px; background: #fff; }
.lg-b { margin-top: 53px; height: 65px; font-size: 13px; }
.lg-b2 { margin-top: 29px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.lg-b2:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.lg-b3 { margin-top: 19px; background: #ffe600; color: #191600; }
.lg-b3:hover { background: #f5dd00; }
.lg-new { margin-top: 66px; padding-bottom: 204px; font-size: 12.5px; letter-spacing: .06em; color: var(--muted); }
.lg-new a { color: var(--rust); }
.lg-new a:hover { text-decoration: underline; }

@media (max-width: 1199px) {
  .done { margin-top: 48px; }
  .donecard { width: 100%; }
  .page-order-complete main { padding-bottom: 80px; }
  .lgw { grid-template-columns: 1fr; }
  .lg-ph { height: 320px; }
  .lg-p { padding: 0 32px; }
  .lg-in { padding-top: 48px; max-width: none; }
  .lg-h { font-size: 34px; margin-top: 24px; }
  .lg-f { margin-top: 40px; }
  .lg-b { margin-top: 32px; }
  .lg-new { margin-top: 40px; padding-bottom: 56px; }
}
@media (max-width: 767px) {
  .done { grid-template-columns: 1fr; row-gap: 20px; }
  .done-t { padding-top: 0; }
  .done-h { font-size: 20px; }
  .lg-h { font-size: 28px; }
  .lg-p { padding: 0 20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   14·15 계정 (마이 톤)
   ══════════════════════════════════════════════════════════════════════ */
.acct { display: grid; grid-template-columns: 194px 1fr; column-gap: 60px; margin-top: 56px; margin-bottom: 208px; align-items: start; }
.acct-nav { min-height: 1564px; border-right: 1px solid var(--line); padding-right: 16px; }
.acct-m { padding-top: 24px; font-size: 41px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.acct-nav ul { margin-top: 44px; }
.acct-nav li { font-size: 12.5px; line-height: 1.6; }
.acct-nav li + li { margin-top: 38px; }
.acct-nav a { font-size: 12.5px; letter-spacing: .08em; color: var(--muted); }
.acct-nav a:hover { color: var(--ink); }
.acct-nav a[aria-current="page"] { color: var(--rust); }
.acct-h { padding-top: 24px; font-size: 50px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.wl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; row-gap: 37px; margin-top: 48px; }
.wl .ph { aspect-ratio: 524 / 330; }
.wl .pc-tag { margin-top: 26px; }
.wl .row { display: flex; align-items: baseline; margin-top: 8px; }
.wl h2 { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.wl .price { margin-left: auto; font-size: 12.5px; letter-spacing: .04em; }
.wl .notes { margin-top: 3px; font-size: 13px; color: var(--muted); }

.hello { margin-top: 53px; background: var(--oat); padding: 33px 32px 36px; }
.hello-h { margin-top: 27px; font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.hello-h i, .ocard-h i, .ocard-d i { font-style: normal; opacity: .7; margin: 0 4px; }
.hello-d { margin-top: 7px; font-size: 14px; color: var(--muted); }
.acct-sec { margin-top: 59px; }
.acct-sec2 { margin-top: 108px; }
.ocard { position: relative; margin-top: 22px; border: 1px solid var(--line); background: #fff; padding: 37px 32px 35px; }
.ocard-n { font-size: 13px; color: var(--muted); }
.ocard-h { margin-top: 25px; font-size: 20px; }
.ocard-d { margin-top: 15px; font-size: 14px; color: var(--muted); }
.ocard-a { position: absolute; right: 32px; top: 73px; }
.rcp { display: grid; grid-template-columns: 460px 1fr; column-gap: 38px; margin-top: 22px; align-items: start; }
.rcp-ph { display: block; overflow: hidden; background: var(--oat); aspect-ratio: 460 / 330; }
.rcp-ph img { width: 100%; height: 100%; object-fit: cover; }
.rcp-t { padding-top: 29px; }
.rcp-t h3 { font-size: 25px; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.rcp-t p { margin-top: 16px; font-size: 16px; line-height: 1.44; color: var(--muted); }

@media (max-width: 1199px) {
  .acct { grid-template-columns: 1fr; row-gap: 28px; margin-top: 32px; margin-bottom: 56px; }
  .acct-nav { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 24px; }
  .acct-m { padding-top: 0; font-size: 30px; }
  .acct-nav ul { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
  .acct-nav li + li { margin-top: 0; }
  .acct-h { padding-top: 0; font-size: 34px; }
  .wl { margin-top: 32px; row-gap: 30px; }
  .hello { margin-top: 32px; }
  .acct-sec, .acct-sec2 { margin-top: 48px; }
  .rcp { grid-template-columns: 1fr; row-gap: 20px; }
  .rcp-t { padding-top: 0; }
}
@media (max-width: 767px) {
  .wl { grid-template-columns: 1fr; }
  .acct-h { font-size: 26px; }
  .hello-h { font-size: 19px; }
  .ocard-a { position: static; margin-top: 22px; }
  .rcp-t p br { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   16 구독
   ══════════════════════════════════════════════════════════════════════ */
.shero { display: grid; grid-template-columns: 720px 1fr; height: 690px; background: var(--moss); color: #fff; }
.shero-t { padding: 84px 56px 0; }
.shero-h { margin-top: 41px; font-size: 63px; line-height: .92; color: #fff; }
.shero-d { margin-top: 44px; font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,.88); }
.shero-b { margin-top: 99px; }
.btn-w3 { background: #fff; color: var(--ink); width: 214px; height: 59px; padding: 0; }
.btn-w3:hover { background: var(--oat); }
.shero-ph { overflow: hidden; }
.shero-ph img { width: 100%; height: 100%; object-fit: cover; }

.how { padding-top: 96px; }
.how-l { margin-top: 39px; }
.how-n { font-size: 20px; letter-spacing: .04em; color: var(--rust); }
.how-l h3 { margin-top: 22px; font-size: 25px; font-weight: 400; letter-spacing: .01em; line-height: 1.1; }
.how-d { margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }

.plans { margin-top: 99px; margin-bottom: 230px; background: var(--oat); padding: 70px 0 90px; }
.plan-l { margin-top: 54px; align-items: start; }
.plan-l li { background: var(--paper); border: 1px solid var(--line); padding: 39px 28px 26px; }
.plan-l h3 { font-size: 25px; font-weight: 400; letter-spacing: .01em; line-height: 1.1; }
.plan-s { margin-top: 17px; font-size: 14px; letter-spacing: .04em; color: var(--muted); }
.plan-p { margin-top: 45px; font-size: 22px; letter-spacing: -.01em; }
.plan-b { margin-top: 20px; height: 53px; font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════════════
   17 레시피
   ══════════════════════════════════════════════════════════════════════ */
.rhero { display: grid; grid-template-columns: 602px 1fr; height: 690px; background: var(--oat); }
.rhero-t { padding: 80px 56px 0; }
.rhero-h { margin-top: 41px; font-size: 63px; line-height: .92; }
.rhero-s { margin-top: 55px; font-size: 15px; color: var(--muted); }
.rhero-s i, .rhero-t .eyebrow i { font-style: normal; margin: 0 8px; opacity: .7; }
.rhero-d { margin-top: 34px; font-size: 16.5px; line-height: 1.5; color: #3b3733; }
.rhero-ph { overflow: hidden; }
.rhero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

.tl { padding-top: 96px; }
.tl-in { position: relative; }
.tl-l { margin-top: 36px; }
.tl-l li { display: grid; grid-template-columns: 107px 157px 329px 171px; align-items: center; height: 40px; }
.tl-l li + li { margin-top: 70px; }
.tl-t { font-size: 17px; letter-spacing: .02em; color: var(--rust); }
.tl-r { display: block; width: 118px; height: 1px; background: var(--line); }
.tl-n { font-size: 20px; font-weight: 400; letter-spacing: .01em; }
.tl-d { font-size: 15px; color: var(--muted); }
.tl-ph { position: absolute; right: 0; top: 41px; width: 564px; height: 440px; overflow: hidden; background: var(--oat); }
.tl-ph img { width: 100%; height: 100%; object-fit: cover; }

.tools { padding-top: 196px; padding-bottom: 31px; }
.tools-l { margin-top: 42px; }
.tools-l .ph { aspect-ratio: 428 / 330; }

/* ══════════════════════════════════════════════════════════════════════
   18 소개
   ══════════════════════════════════════════════════════════════════════ */
.ahero { display: grid; grid-template-columns: 571px 1fr; height: 782px; background: var(--ink); color: #fff; }
.ahero-t { padding: 86px 56px 0; }
.ahero-h { margin-top: 41px; margin-right: -52px; font-size: 63px; line-height: .92; white-space: nowrap; color: #fff; }
.ahero-d { margin-top: 52px; font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,.78); }
.ahero-t .eyebrow i { font-style: normal; margin: 0 6px; opacity: .7; }
.ahero-ph { overflow: hidden; }
.ahero-ph img { width: 100%; height: 100%; object-fit: cover; }

.std { padding-top: 104px; }
.std-h { margin-top: 31px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.std-l { margin-top: 52px; }
.std-l h3 { margin-top: 26px; }
.std-l .why-d { margin-top: 11px; }

.visit { margin-top: 128px; margin-bottom: 148px; background: var(--rust); color: #fff; padding: 64px 0 154px; }
.visit-in { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.visit-h { margin-top: 41px; font-size: 38px; color: #fff; }
.visit-d { margin-top: 20px; font-size: 16px; color: rgba(255,255,255,.9); }
.visit-d i { font-style: normal; margin: 0 8px; opacity: .8; }
.visit-b { margin-top: 48px; }
.btn-w4 { background: #fff; color: var(--ink); width: 252px; height: 64px; padding: 0; }
.btn-w4:hover { background: var(--oat); }

@media (max-width: 1199px) {
  .shero, .rhero, .ahero { grid-template-columns: 1fr; height: auto; }
  .shero-t, .rhero-t, .ahero-t { padding: 48px 32px 56px; }
  .shero-h, .rhero-h, .ahero-h { font-size: 40px; margin-top: 26px; margin-right: 0; white-space: normal; }
  .shero-d, .rhero-d, .ahero-d { margin-top: 24px; }
  .shero-b { margin-top: 34px; }
  .shero-ph, .rhero-ph, .ahero-ph { height: 380px; }
  .how { padding-top: 56px; }
  .plans { margin: 56px 0 0; padding: 48px 0 56px; }
  .tl { padding-top: 56px; }
  .tl-in { position: static; }
  .tl-l li { grid-template-columns: 80px 1fr; row-gap: 6px; height: auto; }
  .tl-r { display: none; }
  .tl-n { grid-column: 2; }
  .tl-d { grid-column: 2; }
  .tl-l li + li { margin-top: 28px; }
  .tl-ph { position: static; width: 100%; height: 300px; margin-top: 40px; }
  .tools { padding-top: 56px; padding-bottom: 56px; }
  .std { padding-top: 56px; }
  .std-h { font-size: 30px; }
  .visit { margin: 56px 0 0; padding: 44px 0 48px; }
  .visit-in { grid-template-columns: 1fr; }
  .visit-h { font-size: 32px; margin-top: 24px; }
  .visit-b { margin-top: 28px; }
}
@media (max-width: 767px) {
  .shero-h, .rhero-h, .ahero-h { font-size: 30px; }
  .shero-d br, .rhero-d br, .ahero-d br, .how-d br, .why-d br { display: none; }
  .btn-w3, .btn-w4 { width: 100%; }
  .visit-h { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════
   정책 · 주문 상세 (시안 밖 — 링크 무결성용, 같은 문법)
   ══════════════════════════════════════════════════════════════════════ */
.pol { display: grid; grid-template-columns: 260px 1fr; column-gap: 92px; margin-top: 62px; padding-bottom: 120px; align-items: start; }
.pol-nav { position: sticky; top: 24px; }
.pol-nav li + li { margin-top: 14px; }
.pol-nav a { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
.pol-nav a:hover { color: var(--rust); }
.pol-sec + .pol-sec { margin-top: 72px; }
.pol-sec h2 { font-size: 12px; letter-spacing: .09em; font-weight: 400; color: var(--rust); }
.pol-row { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.pol-row h3 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.pol-row p { margin-top: 12px; font-size: 15px; line-height: 1.62; color: #4b4741; max-width: 760px; }

.trk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 26px; }
.trk li { border-top: 2px solid var(--line); padding-top: 18px; color: var(--muted); }
.trk li.on { border-top-color: var(--moss); color: var(--ink); }
.trk b { display: block; font-size: 11.5px; font-weight: 400; letter-spacing: .09em; }
.trk span { display: block; margin-top: 10px; font-size: 15px; }
.odlines { margin-top: 26px; }
.odlines h3 { margin-top: 18px; font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.odsum { max-width: 460px; padding: 30px 32px; }
.odsum .osum-l { margin-top: 0; }

@media (max-width: 1199px) {
  .pol { grid-template-columns: 1fr; row-gap: 32px; margin-top: 36px; padding-bottom: 64px; }
  .pol-nav { position: static; }
  .pol-nav ul { display: flex; flex-wrap: wrap; gap: 14px; }
  .pol-nav li + li { margin-top: 0; }
  .pol-sec + .pol-sec { margin-top: 48px; }
  .trk { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .trk { grid-template-columns: 1fr; gap: 14px; }
}