/* ══════════════════════════════════════════════════════════════════════
   초록생활 — 식물·가드닝 전문 쇼핑몰
   위쪽 절반은 공통 뼈대 키트(kit.css) — 동작에 딸린 규칙. 손대지 않는다.
   아래쪽이 이 벌의 생김새 — 00-디자인보드.png 의 색·활자·컴포넌트에서 가져왔다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 기본 ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }
img { -webkit-user-drag: none; user-select: none; }

.frame { display: block; }

/* ── 초점 ─────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1rem; background: Canvas; color: CanvasText;
}
.skip-link:focus { left: 0; }

/* ── 터치 영역 ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .site-header a, .site-header button,
  .drawer a, .drawer button,
  .dots button, .pager button, .tab {
    min-width: 44px; min-height: 44px;
  }
  button, a.btn, a[role="button"], .chip, .facet-reset { min-height: 44px; }
}

/* ── 가로 넘침 ─────────────────────────────────────────────────────── */
.scroll-x { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }
.clip { overflow: clip; }

/* ── 무JS 완성본 ───────────────────────────────────────────────────── */
.acc-item .acc-panel { display: block; }
.js .acc-item .acc-panel { display: none; }
.js .acc-item.open .acc-panel { display: block; }

.js [role="tabpanel"][hidden] { display: none; }
[role="tabpanel"][hidden] { display: block; }

.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

.js-only { display: none; }
.js .js-only { display: revert; }

/* ── 모션 끔 ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .grow-stem, .grow-stem { stroke-dashoffset: 0 !important; }
  .js .grow-leaf, .grow-leaf { opacity: 1 !important; transform: none !important; }
}

/* ── 모바일 서랍 ───────────────────────────────────────────────────── */
.menu-btn { display: none; }
@media (max-width: 767px) { .menu-btn { display: inline-flex; } }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 60; overflow-y: auto;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(26 32 22 / .45);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) { .drawer, .scrim { display: none; } }

/* ── 토스트 ───────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0;
  z-index: 80; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, translate .25s ease;
}
.toast.show { opacity: 1; translate: -50% -6px; }

/* ── 폼 기계장치 ───────────────────────────────────────────────────── */
.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agree input:focus-visible + label .box { outline: 2px solid currentColor; outline-offset: 2px; }

.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: kit-spin .7s linear infinite;
}
@keyframes kit-spin { to { rotate: 360deg; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.section { padding-block: calc(var(--section, 96px) / 2); }
.section-lead { padding-top: var(--section, 96px); }
.section-last { padding-bottom: var(--section, 96px); }

/* ══════════════════════════════════════════════════════════════════════
   여기부터 초록생활의 생김새
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* 00-디자인보드.png COLOR 6종 */
  --moss:   #5A6B4F;   /* 이끼 그린 */
  --leaf:   #7FA264;   /* 잎사귀 그린 */
  --terra:  #C86A4A;   /* 테라코타 */
  --cream:  #F6F4EF;   /* 크림 */
  --sprout: #E9EFDF;   /* 새싹 */
  --soil:   #6B4F3B;   /* 흙 */

  /* 위 6종에서 파생한 명도 단계 */
  --moss-d: #46543D;
  --moss-x: #2E3527;
  --sprout-d: #D7E2C6;
  --terra-l: #F7E7DF;

  --paper: #FFFFFF;
  --ink:   #242B1F;
  --ink-2: #5E6654;
  --ink-3: #8C9382;
  --line:  #E4E1D7;
  --line-2:#EFEDE5;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --sh-1: 0 1px 2px rgb(40 50 35 / .05);
  --sh-2: 0 2px 4px rgb(40 50 35 / .04), 0 14px 34px -22px rgb(40 50 35 / .45);
  --sh-3: 0 4px 10px rgb(40 50 35 / .06), 0 26px 56px -30px rgb(40 50 35 / .5);

  --section: 104px;
  --hd: 68px;
}

@media (max-width: 767px) { :root { --section: 64px; --hd: 60px; } }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 16px); }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.72;
  font-weight: 400;
  letter-spacing: -.01em;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.28; letter-spacing: -.028em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
@media (max-width: 767px) { .wrap { width: min(1180px, 100% - 32px); } }

.ico { width: 20px; height: 20px; display: inline-block; fill: none; stroke: currentColor;
       stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 26px; height: 26px; }
.ico-sm { width: 16px; height: 16px; stroke-width: 1.8; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 활자 유틸 ────────────────────────────────────────────────────── */
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--leaf);
}
.lead { font-size: clamp(1rem, 1.6vw, 1.09rem); color: var(--ink-2); }
.muted { color: var(--ink-3); font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.sec-head p { margin-top: 10px; color: var(--ink-2); max-width: 54ch; }
.sec-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .93rem; color: var(--moss); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.sec-more:hover { border-color: var(--moss); }

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 600; font-size: .96rem; cursor: pointer; background: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--moss); color: #fff; }
.btn-primary:hover { background: var(--moss-d); }
.btn-line { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn-line:hover { border-color: var(--moss); color: var(--moss); }
.btn-terra { background: var(--terra); color: #fff; }
.btn-terra:hover { background: #b25c3f; }
.btn-sm { padding: 9px 16px; font-size: .875rem; }
.btn-full { width: 100%; }
.btn[aria-disabled="true"] { opacity: .7; pointer-events: none; }
.btn-primary .ico { stroke-width: 1.9; }

/* ── 칩 ───────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; font-size: .82rem; font-weight: 500;
  background: var(--sprout); color: var(--moss-d); border: 1px solid transparent;
}
.chip-line { background: var(--paper); border-color: var(--line); color: var(--ink-2); }
.chip-warn { background: var(--terra-l); color: #9c4a2f; }
.chip-out { background: #EDEBE3; color: var(--ink-3); }

/* ── 상태 표시(색만으로 전달하지 않는다 — 글자·아이콘 병기) ────────── */
.state { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; }
.state .ico { width: 15px; height: 15px; }
.state-ok { color: var(--moss); }
.state-warn { color: #A9522F; }
.state-off { color: var(--ink-3); }

/* ── 헤더 ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgb(246 244 239 / .93);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 24px -22px rgb(40 50 35 / .8); }
.header-inner {
  width: min(1180px, 100% - 40px); margin-inline: auto;
  min-height: var(--hd); display: flex; align-items: center; gap: 26px;
}
@media (max-width: 767px) { .header-inner { width: min(1180px, 100% - 20px); gap: 8px; } }

.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.12rem; letter-spacing: -.03em; color: var(--moss-d); }
.brand .ico { width: 24px; height: 24px; color: var(--leaf); }

.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 9px 13px; border-radius: var(--r-sm); font-size: .93rem; font-weight: 500; color: var(--ink-2);
}
.nav a:hover { background: var(--sprout); color: var(--moss-d); }
.nav a[aria-current="page"] { color: var(--moss-d); font-weight: 700; background: var(--sprout); }
@media (max-width: 1023px) { .nav { display: none; } }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--ink-2);
}
.icon-link:hover { background: var(--sprout); color: var(--moss-d); }
.icon-link .badge {
  position: absolute; margin: -18px 0 0 16px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--terra); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center;
}
.header-cta { display: inline-flex; }
@media (max-width: 1023px) { .header-cta { display: none; } }

.menu-btn {
  align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; background: none; border-radius: var(--r-sm); color: var(--ink);
}

/* ── 서랍 ─────────────────────────────────────────────────────────── */
.drawer { background: var(--cream); padding: 18px 20px 32px; box-shadow: -20px 0 50px -30px rgb(40 50 35 / .8); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.drawer-close { border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); }
.drawer-nav { display: grid; padding: 10px 0; }
.drawer-nav a { display: flex; align-items: center; padding: 13px 4px; font-size: 1.02rem; font-weight: 600; border-bottom: 1px solid var(--line-2); }
.drawer-nav a[aria-current="page"] { color: var(--moss); }
.drawer-cta { margin-top: 16px; }
.drawer-sub { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 4px; font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.drawer-tel { margin-top: 6px; font-size: .9rem; color: var(--ink-3); }
.drawer-tel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--moss); }

/* ── 토스트 겉모습 ─────────────────────────────────────────────────── */
.toast {
  max-width: min(92vw, 460px);
  padding: 13px 20px; border-radius: 999px;
  background: var(--moss-x); color: #F2F5EC;
  font-size: .9rem; font-weight: 500; box-shadow: var(--sh-3);
}

/* ── 히어로 ───────────────────────────────────────────────────────── */
.hero { background: linear-gradient(180deg, var(--sprout) 0%, var(--cream) 78%); padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 78px); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 899px) { .hero-inner { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.5rem); line-height: 1.2; margin: 16px 0 18px; }
.hero p { max-width: 30ch; font-size: clamp(1rem, 1.7vw, 1.12rem); color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-media { position: relative; }
.hero-media img { width: 100%; aspect-ratio: 736 / 490; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.hero-tag {
  position: absolute; left: -14px; bottom: 22px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px; background: var(--paper);
  box-shadow: var(--sh-2); font-size: .87rem; font-weight: 600;
}
.hero-tag .ico { color: var(--leaf); }
@media (max-width: 899px) { .hero-tag { left: 12px; bottom: 12px; } }

/* ── 3단계 띠 ─────────────────────────────────────────────────────── */
.steps { border-block: 1px solid var(--line); background: var(--paper); }
.steps ol { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .steps ol { grid-template-columns: 1fr; } }
.steps li + li { border-left: 1px solid var(--line-2); }
@media (max-width: 767px) { .steps li + li { border-left: 0; border-top: 1px solid var(--line-2); } }
.steps a { display: flex; align-items: center; gap: 16px; padding: 26px 22px; }
.steps a:hover .step-ring { background: var(--sprout); border-color: var(--sprout-d); }
.step-ring {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--moss);
  transition: background-color .18s ease, border-color .18s ease;
}
.step-t { display: block; font-weight: 700; font-size: .98rem; }
.step-d { display: block; font-size: .855rem; color: var(--ink-3); margin-top: 2px; }

/* ── 퀴즈 ─────────────────────────────────────────────────────────── */
.quiz-card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: clamp(22px, 3.4vw, 38px); }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.quiz-top h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
.quiz-count { font-size: .84rem; font-weight: 600; color: var(--ink-3); }
.quiz-bar { display: flex; gap: 6px; margin: 18px 0 26px; }
.quiz-bar span { height: 6px; flex: 1; border-radius: 999px; background: var(--sprout); }
.quiz-bar span.on { background: var(--moss); }

.q-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.js .q-step[hidden] { display: none; }
.q-step[hidden] { display: block; }
.q-step + .q-step { margin-top: 30px; }
.js .q-step + .q-step { margin-top: 0; }
.q-legend { padding: 0; font-weight: 700; font-size: 1.02rem; margin-bottom: 14px; }
.js .q-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 899px) { .opts { grid-template-columns: repeat(2, 1fr); } }
.opts-text { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .opts-text { grid-template-columns: 1fr; } }

.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label {
  display: block; cursor: pointer; border-radius: var(--r-md); overflow: clip;
  border: 2px solid var(--line-2); background: var(--cream);
  transition: border-color .16s ease, box-shadow .16s ease;
  min-height: 44px;
}
.opt label:hover { border-color: var(--sprout-d); }
.opt input:checked + label { border-color: var(--moss); box-shadow: 0 0 0 3px var(--sprout); }
.opt input:focus-visible + label { outline: 2px solid var(--moss); outline-offset: 2px; }
.opt img { width: 100%; aspect-ratio: 156 / 168; object-fit: cover; display: block; }
.opt .opt-t { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; font-size: .85rem; font-weight: 600; text-align: center; }
.opt input:checked + label .opt-t { color: var(--moss-d); }
.opt-text label { padding: 16px 18px; display: flex; align-items: center; gap: 10px; background: var(--paper); }
.opt-text .ico { color: var(--leaf); flex: none; }

.quiz-nav { display: flex; gap: 12px; margin-top: 28px; }
.quiz-nav .btn { flex: 1; }
@media (min-width: 768px) { .quiz-nav { justify-content: flex-end; } .quiz-nav .btn { flex: none; min-width: 168px; } }

.quiz-result {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--sprout); color: var(--moss-d); font-weight: 600; font-size: .95rem;
  display: flex; align-items: flex-start; gap: 10px;
}
.quiz-result .ico { flex: none; margin-top: 3px; }

/* ── 제안 카드 ─────────────────────────────────────────────────────── */
.match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1023px) { .match-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.match-card { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-md); overflow: clip; box-shadow: var(--sh-1); transition: box-shadow .2s ease, transform .2s ease; }
.match-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.match-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.match-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.match-eyebrow { font-size: .78rem; font-weight: 700; color: var(--leaf); letter-spacing: .02em; }
.match-name { font-size: 1.03rem; font-weight: 700; }
.match-desc { font-size: .855rem; color: var(--ink-2); }
.match-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.match-card, .match-body, .match-foot > * { min-width: 0; }
.price { font-weight: 700; font-size: 1.02rem; }
.price small { font-weight: 500; font-size: .78rem; color: var(--ink-3); margin-left: 3px; }
.price-was { color: var(--ink-3); font-weight: 500; text-decoration: line-through; font-size: .84rem; margin-right: 6px; }

/* ── 케어 타임라인(시그니처 스크롤 연출) ────────────────────────────── */
.care-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 899px) { .care-wrap { grid-template-columns: 1fr; } }

.grow { position: relative; }
.grow svg { width: 100%; max-width: 190px; height: auto; display: block; margin-inline: auto; }
.grow-stem { fill: none; stroke: var(--leaf); stroke-width: 3.4; stroke-linecap: round;
             stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .grow-stem { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.js .grow.in .grow-stem { stroke-dashoffset: 0; }
.grow-leaf { fill: var(--moss); opacity: 1; transform-box: fill-box; transform-origin: 0 50%; }
.js .grow-leaf { opacity: 0; transform: scale(.4); transition: opacity .5s ease, transform .5s ease; }
.js .grow.in .grow-leaf { opacity: 1; transform: none; }
.js .grow.in .grow-leaf:nth-of-type(2) { transition-delay: .35s; }
.js .grow.in .grow-leaf:nth-of-type(3) { transition-delay: .7s; }
.js .grow.in .grow-leaf:nth-of-type(4) { transition-delay: 1.05s; }
.grow-pot { fill: var(--sprout-d); }

/* 스크롤 진행에 묶는다 — 지원 브라우저에서만. 조상에 overflow:hidden 이 없어야 한다(§4-C 13). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .grow-stem { transition: none; animation: stem-draw linear both; animation-timeline: view(); animation-range: entry 26% cover 62%; }
    .js .grow.in .grow-stem { stroke-dashoffset: 1; }
  }
}
@keyframes stem-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.tl { display: grid; gap: 14px; }
.tl-item { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; align-items: start;
           background: var(--paper); border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--sh-1); }
@media (max-width: 479px) { .tl-item { grid-template-columns: 1fr; gap: 8px; } }
.tl-week { font-weight: 700; color: var(--moss); font-size: .92rem; }
.tl-item h3 { font-size: 1rem; margin-bottom: 5px; }
.tl-item p { font-size: .9rem; color: var(--ink-2); }

/* ── 약속 띠(진초록) ───────────────────────────────────────────────── */
.promise { background: var(--moss); color: #EEF2E6; }
.promise ul { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .promise ul { grid-template-columns: 1fr; } }
.promise li { display: flex; align-items: center; gap: 16px; padding: 30px 26px; }
.promise li + li { border-left: 1px solid rgb(255 255 255 / .16); }
@media (max-width: 767px) { .promise li + li { border-left: 0; border-top: 1px solid rgb(255 255 255 / .16); } }
.promise .ico { width: 30px; height: 30px; flex: none; opacity: .95; }
.promise b { display: block; font-size: .98rem; font-weight: 700; }
.promise span { font-size: .845rem; color: rgb(238 242 230 / .78); }

/* ── 면 머리 ───────────────────────────────────────────────────────── */
.page-head { background: var(--sprout); padding-block: clamp(26px, 4vw, 46px) clamp(28px, 4vw, 48px); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-3); margin-bottom: 12px; }
.crumb a:hover { color: var(--moss); }
.crumb .ico { width: 13px; height: 13px; }
.page-head h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.page-head p { margin-top: 12px; max-width: 58ch; color: var(--ink-2); }

/* ── 검색 ─────────────────────────────────────────────────────────── */
.search-box { position: relative; max-width: 560px; }
.search-field { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 18px; }
.search-field:focus-within { border-color: var(--moss); box-shadow: 0 0 0 3px var(--sprout); }
.search-field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; padding: 10px 0; outline: none; }
.search-field .btn { padding: 11px 20px; }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px);
           background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 6px; }
.suggest[hidden] { display: none; }
.suggest li button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 11px 14px; border-radius: var(--r-sm); font-size: .92rem; cursor: pointer; }
.suggest li button:hover, .suggest li button:focus-visible { background: var(--sprout); }
.suggest .ico { color: var(--ink-3); flex: none; }
.hot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.hot .muted { margin-right: 2px; }
.hot button { border: 0; cursor: pointer; }

/* ── 탐색 배치(사이드 필터 + 결과) ─────────────────────────────────── */
.explore { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 1023px) { .explore { grid-template-columns: 1fr; } }

.facets { background: var(--paper); border-radius: var(--r-md); padding: 22px; box-shadow: var(--sh-1); position: sticky; top: calc(var(--hd) + 18px); }
@media (max-width: 1023px) { .facets { position: static; } }
.facet + .facet { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.facet h3 { font-size: .9rem; margin-bottom: 10px; }
.facet-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; min-height: 34px; }
.facet-row input { width: 18px; height: 18px; accent-color: var(--moss); flex: none; }
.facet-row label { font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.facet-reset { margin-top: 20px; width: 100%; }

.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.result-count { font-size: .92rem; font-weight: 600; }
.result-count b { color: var(--moss); }
.sort { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-3); }
select {
  font: inherit; font-size: .9rem; padding: 9px 34px 9px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6654' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  color: var(--ink); appearance: none; min-height: 44px;
}

.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.cat-tabs button { cursor: pointer; }
.cat-tabs .chip[aria-pressed="true"] { background: var(--moss); color: #fff; }

/* 추천 3장 — 큰 카드 */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 899px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 519px) { .feature-grid { grid-template-columns: 1fr; } }

.pcard { container-type: inline-size; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-md); overflow: clip; box-shadow: var(--sh-1); transition: box-shadow .2s ease, transform .2s ease; }
.pcard:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.pcard .pcard-media { display: block; background: var(--cream); }
.pcard img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; display: block; }
.pcard-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pcard-name { font-size: 1.02rem; font-weight: 700; }
.pcard-sub { font-size: .84rem; color: var(--ink-3); }
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@container (min-width: 330px) { .pcard-body { padding: 20px 22px 24px; } .pcard-name { font-size: 1.1rem; } }

/* 목록 행 */
.plist { display: grid; gap: 12px; margin-top: 22px; }
.prow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center;
        background: var(--paper); border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--sh-1); }
@media (max-width: 639px) { .prow { grid-template-columns: 80px minmax(0, 1fr); } .prow-foot { grid-column: 1 / -1; justify-content: space-between; } }
.prow img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); background: var(--cream); }
@media (max-width: 639px) { .prow img { width: 80px; height: 80px; } }
.prow-name { font-weight: 700; font-size: 1rem; }
.prow-desc { font-size: .845rem; color: var(--ink-2); margin: 3px 0 7px; }
.prow-foot { display: flex; align-items: center; gap: 14px; }
.prow.is-out .prow-name { color: var(--ink-3); }

/* 로딩 뼈대 */
.skeleton { display: none; gap: 12px; }
.is-loading .skeleton { display: grid; }
.is-loading .feature-grid, .is-loading .plist, .is-loading .empty { display: none; }
.sk-row { height: 92px; border-radius: var(--r-md); background: linear-gradient(90deg, #EFEDE5 25%, #F7F5EF 37%, #EFEDE5 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: 0 0; } }

.empty { display: none; text-align: center; padding: 56px 24px; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.empty.on { display: block; }
.empty .ico { width: 34px; height: 34px; color: var(--ink-3); }
.empty h3 { margin: 12px 0 8px; font-size: 1.06rem; }
.empty p { color: var(--ink-2); font-size: .92rem; margin-bottom: 18px; }

/* 부자재 3종(카드 그리드를 반복하지 않는 다른 배치) */
.supply { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--paper); border-radius: var(--r-md); overflow: clip; box-shadow: var(--sh-1); }
@media (max-width: 767px) { .supply { grid-template-columns: 1fr; } }
.supply li { padding: 26px 24px; display: flex; gap: 15px; align-items: flex-start; }
.supply li + li { border-left: 1px solid var(--line-2); }
@media (max-width: 767px) { .supply li + li { border-left: 0; border-top: 1px solid var(--line-2); } }
.supply .ico { color: var(--leaf); flex: none; margin-top: 2px; }
.supply b { display: block; font-size: .97rem; }
.supply span { font-size: .85rem; color: var(--ink-2); }
.supply em { display: block; font-style: normal; font-weight: 700; font-size: .9rem; margin-top: 7px; }

/* ── 상품 상세 ─────────────────────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 899px) { .pdp { grid-template-columns: 1fr; } }

.gallery { position: sticky; top: calc(var(--hd) + 20px); }
@media (max-width: 899px) { .gallery { position: static; } }
.gal-main { background: var(--paper); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 40px); display: grid; place-items: center; box-shadow: var(--sh-1); }
.gal-main img { width: min(300px, 100%); height: auto; border-radius: var(--r-md); }
.gal-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gal-thumbs button { padding: 0; border: 2px solid var(--line-2); background: var(--paper); border-radius: var(--r-sm); overflow: clip; cursor: pointer; line-height: 0; }
.gal-thumbs button[aria-pressed="true"] { border-color: var(--moss); }
.gal-thumbs img { width: 72px; height: 72px; object-fit: cover; }

.pdp-name { font-size: clamp(1.55rem, 3.4vw, 2.15rem); }
.pdp-sub { margin-top: 10px; color: var(--ink-2); }
.pdp-price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 6px; }
.pdp-price strong { font-size: 1.85rem; font-weight: 700; }
.pdp-price span { font-size: .85rem; color: var(--ink-3); }

.warnbox { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--terra-l); border-left: 4px solid var(--terra); margin: 20px 0 24px; }
.warnbox .ico { color: var(--terra); flex: none; margin-top: 3px; }
.warnbox b { display: block; font-size: .93rem; color: #9c4a2f; }
.warnbox p { font-size: .862rem; color: #7a4530; margin-top: 4px; }

.spec { border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line-2); font-size: .91rem; }
.spec dt { color: var(--ink-3); font-weight: 600; }
.spec dd { margin: 0; }

.opt-group { margin-top: 26px; }
.opt-group > h2, .opt-group > h3 { font-size: .95rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pot { position: relative; }
.pot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pot label { display: flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border: 2px solid var(--line-2); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: .875rem; font-weight: 500; min-height: 44px; }
.pot input:checked + label { border-color: var(--moss); background: var(--sprout); color: var(--moss-d); font-weight: 700; }
.pot input:focus-visible + label { outline: 2px solid var(--moss); outline-offset: 2px; }
.pot .sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .1); flex: none; }
.sw-white { background: #F1EFE9; }
.sw-terra { background: var(--terra); }
.sw-moss { background: var(--moss); }
.sw-soil { background: var(--soil); }

.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 419px) { .sizes { grid-template-columns: 1fr; } }
.size { position: relative; }
.size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.size label { display: block; padding: 12px 14px; border: 2px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; text-align: center; min-height: 44px; }
.size input:checked + label { border-color: var(--moss); background: var(--sprout); }
.size input:focus-visible + label { outline: 2px solid var(--moss); outline-offset: 2px; }
.size b { display: block; font-size: .9rem; }
.size span { font-size: .78rem; color: var(--ink-3); }

.opt-error { display: none; align-items: center; gap: 7px; margin-top: 10px; font-size: .86rem; font-weight: 600; color: #A9522F; }
.opt-error.on { display: flex; }

.buildbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
            margin-top: 22px; padding: 16px 18px; border-radius: var(--r-md); background: var(--sprout); }
.buildbar .bb-label { font-size: .85rem; color: var(--moss-d); font-weight: 600; }
.buildbar .bb-sum { font-size: 1.28rem; font-weight: 700; color: var(--moss-d); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); overflow: clip; }
.qty button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--ink-2); }
.qty button:hover { background: var(--sprout); }
.qty input { width: 52px; height: 44px; border: 0; border-inline: 1px solid var(--line-2); text-align: center; font: inherit; font-weight: 600; background: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-row { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 150px; }

.buy-dock { position: sticky; bottom: 0; z-index: 30; margin-top: 26px;
            display: none; align-items: center; gap: 12px;
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
            background: rgb(255 255 255 / .96); backdrop-filter: blur(8px);
            border-top: 1px solid var(--line); margin-inline: -16px; }
@media (max-width: 899px) { .buy-dock { display: flex; } }
.buy-dock .dock-price { font-weight: 700; font-size: 1.02rem; flex: none; }
.buy-dock .btn { flex: 1; }

.ship-note { margin-top: 24px; display: grid; gap: 9px; }
.ship-note li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--ink-2); }
.ship-note .ico { color: var(--leaf); flex: none; margin-top: 3px; }

/* ── 아코디언 ─────────────────────────────────────────────────────── */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
               padding: 19px 4px; border: 0; background: none; text-align: left; cursor: pointer;
               font-weight: 600; font-size: .97rem; min-height: 44px; }
.acc-trigger:hover { color: var(--moss); }
.acc-trigger .ico { flex: none; color: var(--ink-3); transition: transform .22s ease; }
.acc-item.open .acc-trigger .ico { transform: rotate(180deg); color: var(--moss); }
.acc-panel { padding: 0 4px 22px; color: var(--ink-2); font-size: .91rem; }
.acc-panel p + p, .acc-panel p + ul, .acc-panel ul + p { margin-top: 9px; }
.acc-panel li { display: flex; gap: 9px; }
.acc-panel li::before { content: "·"; color: var(--leaf); font-weight: 700; }

/* ── 비교표 ───────────────────────────────────────────────────────── */
.cmp { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: clamp(20px, 3vw, 32px); }
.cmp-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.cmp-top h2 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.cmp table { border-collapse: collapse; width: 100%; min-width: 560px; }
.cmp caption { text-align: left; font-size: .85rem; color: var(--ink-3); padding-bottom: 12px; }
.cmp th, .cmp td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; font-size: .9rem; }
.cmp thead th { border-bottom: 1px solid var(--line); vertical-align: bottom; }
.cmp tbody th { color: var(--ink-3); font-weight: 600; width: 116px; }
.cmp-head { display: grid; justify-items: center; gap: 8px; text-align: center;
            border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 16px; background: var(--cream); }
.cmp-head img { border-radius: var(--r-sm); }
.cmp-head b { font-size: 1rem; }
.cmp-vs { width: 40px; text-align: center; color: var(--ink-3); font-weight: 700; font-size: .82rem; }
.dots { display: inline-flex; gap: 4px; vertical-align: -1px; margin-right: 9px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sprout-d); display: block; }
.dots i.on { background: var(--moss); }
.cmp-add { width: 100%; border: 2px dashed var(--line); background: none; border-radius: var(--r-md); padding: 18px; cursor: pointer; color: var(--ink-2); font-weight: 600; min-height: 44px; }
.cmp-add:hover { border-color: var(--leaf); color: var(--moss); }
.cmp-note { margin-top: 14px; font-size: .8rem; color: var(--ink-3); }

/* ── 반려동물 안전 표 ──────────────────────────────────────────────── */
.pettable { width: 100%; border-collapse: collapse; min-width: 540px; background: var(--paper); }
.pettable caption { text-align: left; font-size: .85rem; color: var(--ink-3); padding: 0 0 12px; }
.pettable th, .pettable td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: .89rem; }
.pettable thead th { background: var(--sprout); color: var(--moss-d); font-size: .84rem; border-bottom: 0; }
.pettable tbody th { font-weight: 700; width: 168px; }
.pettable tbody tr:hover { background: var(--cream); }
.pet-legal { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--ink-2); }
.pet-legal .ico { color: var(--terra); flex: none; margin-top: 3px; }

/* ── 탭(케어 타임라인) ─────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.tab { border: 0; background: none; padding: 13px 18px; cursor: pointer; font-weight: 600; font-size: .93rem;
       color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; }
.tab[aria-selected="true"] { color: var(--moss-d); border-bottom-color: var(--moss); }
.care-panel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (max-width: 767px) { .care-panel { grid-template-columns: 1fr; } }
.care-photo { border-radius: var(--r-md); background: var(--cream); }
.care-rows { display: grid; gap: 10px; }
.care-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center;
            background: var(--paper); border-radius: var(--r-sm); padding: 14px 18px; }
@media (max-width: 479px) { .care-row { grid-template-columns: 1fr; gap: 4px; } }
.care-row b { display: flex; align-items: center; gap: 9px; font-size: .9rem; }
.care-row b .ico { color: var(--leaf); }
.care-row span { font-size: .9rem; color: var(--ink-2); }
.tipbox { display: flex; gap: 12px; margin-top: 16px; padding: 18px 20px; border-radius: var(--r-md); background: var(--sprout); }
.tipbox .ico { color: var(--moss); flex: none; margin-top: 2px; }
.tipbox b { display: block; font-size: .9rem; color: var(--moss-d); }
.tipbox p { font-size: .87rem; color: var(--ink-2); margin-top: 4px; }

/* ── 물주기 주기 SVG ───────────────────────────────────────────────── */
.cycle { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 767px) { .cycle { grid-template-columns: 1fr; } }
.cycle svg { width: 100%; max-width: 240px; height: auto; display: block; margin-inline: auto; }
.cycle-list { display: grid; gap: 12px; }
.cycle-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.cycle-no { width: 26px; height: 26px; border-radius: 50%; background: var(--moss); color: #fff;
            display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.cycle-list b { font-size: .95rem; }
.cycle-list p { font-size: .87rem; color: var(--ink-2); }

/* ── 폼 ───────────────────────────────────────────────────────────── */
.formcard { background: var(--paper); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 38px); box-shadow: var(--sh-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field.col-2 { grid-column: 1 / -1; }
.field label { font-size: .87rem; font-weight: 600; }
.field .req { color: var(--terra); margin-left: 3px; }
.control {
  font: inherit; font-size: .95rem; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--cream); color: var(--ink); width: 100%; min-height: 46px;
}
.control:focus { outline: none; border-color: var(--moss); background: var(--paper); box-shadow: 0 0 0 3px var(--sprout); }
textarea.control { resize: vertical; min-height: 104px; line-height: 1.6; }
select.control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6654' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; }
.err { display: none; font-size: .8rem; color: #A9522F; font-weight: 600; }
.field.invalid .control { border-color: var(--terra); background: var(--terra-l); }
.field.invalid .err { display: block; }
.counter { font-size: .78rem; color: var(--ink-3); text-align: right; }
.agree { position: relative; margin-top: 18px; }
.agree label { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--ink-2); cursor: pointer; padding: 6px 0; }
.agree .box { width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 5px; background: var(--cream); flex: none; margin-top: 2px; position: relative; }
.agree input:checked + label .box { background: var(--moss); border-color: var(--moss); }
.agree input:checked + label .box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(42deg); }
.agree.invalid .box { border-color: var(--terra); background: var(--terra-l); }
.agree.invalid .err { display: block; margin-left: 30px; }
.form-submit { margin-top: 22px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
               padding: 15px 26px; border: 0; border-radius: var(--r-sm); background: var(--moss); color: #fff;
               font-weight: 700; font-size: 1rem; cursor: pointer; min-height: 52px; }
.form-submit:hover { background: var(--moss-d); }
.form-foot { margin-top: 12px; font-size: .8rem; color: var(--ink-3); text-align: center; }

/* ── 장바구니 ─────────────────────────────────────────────────────── */
.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.stepper li { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--ink-3); font-weight: 600; }
.stepper li::after { content: ""; width: 26px; height: 1px; background: var(--line); margin-left: 4px; }
.stepper li:last-child::after { display: none; }
.stepper .sn { width: 24px; height: 24px; border-radius: 50%; background: var(--line-2); color: var(--ink-3); display: grid; place-items: center; font-size: .74rem; }
.stepper li.on { color: var(--moss-d); }
.stepper li.on .sn { background: var(--moss); color: #fff; }

.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (max-width: 1023px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-list { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: clip; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 20px; align-items: start; }
.cart-item + .cart-item { border-top: 1px solid var(--line-2); }
@media (max-width: 639px) { .cart-item { grid-template-columns: 80px minmax(0, 1fr); } .cart-item .ci-right { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; } }
.cart-item img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); background: var(--cream); }
@media (max-width: 639px) { .cart-item img { width: 80px; height: 80px; } }
.ci-name { font-weight: 700; font-size: 1rem; }
.ci-opt { font-size: .84rem; color: var(--ink-3); margin: 3px 0 10px; }
.ci-right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.ci-price { font-weight: 700; }
.ci-del { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: .82rem; text-decoration: underline; min-height: 44px; padding: 0 4px; }
.ci-del:hover { color: var(--terra); }

.coupon { margin-top: 16px; background: var(--paper); border-radius: var(--r-md); padding: 20px; box-shadow: var(--sh-1); }
.coupon h2 { font-size: .95rem; margin-bottom: 12px; }
.coupon-row { display: flex; gap: 10px; flex-wrap: wrap; }
.coupon-row input { flex: 1; min-width: 160px; }
.coupon-msg { display: none; margin-top: 10px; font-size: .85rem; font-weight: 600; align-items: center; gap: 7px; }
.coupon-msg.on { display: flex; }
.coupon-msg.bad { color: #A9522F; }
.coupon-msg.good { color: var(--moss); }
.coupon-hint { margin-top: 10px; font-size: .8rem; color: var(--ink-3); }

.summary { background: var(--paper); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-2); position: sticky; top: calc(var(--hd) + 18px); }
@media (max-width: 1023px) { .summary { position: static; } }
.summary h2 { font-size: 1rem; margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .91rem; color: var(--ink-2); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.sum-total b { font-size: 1rem; }
.sum-total strong { font-size: 1.5rem; }
.sum-note { margin-top: 12px; font-size: .8rem; color: var(--ink-3); }

.cross { margin-top: 16px; background: var(--sprout); border-radius: var(--r-md); padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.cross img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--paper); flex: none; }
.cross b { display: block; font-size: .93rem; }
.cross span { font-size: .82rem; color: var(--ink-2); }

.order-done { display: none; margin-top: 22px; padding: 22px 24px; border-radius: var(--r-md); background: var(--sprout); }
.order-done.on { display: block; }
.order-done b { display: flex; align-items: center; gap: 9px; font-size: 1rem; color: var(--moss-d); }
.order-done dl { margin: 14px 0 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 7px 14px; font-size: .89rem; }
.order-done dt { color: var(--ink-3); font-weight: 600; }
.order-done dd { margin: 0; font-weight: 600; }

.track { background: var(--paper); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-1); }
.track-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.track-head h2 { font-size: 1.02rem; }
.track-no { font-size: .84rem; color: var(--ink-3); }
.track-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 599px) { .track-steps { grid-template-columns: repeat(2, 1fr); } }
.track-steps li { text-align: center; padding: 14px 8px; border-radius: var(--r-sm); background: var(--cream); font-size: .84rem; font-weight: 600; color: var(--ink-3); }
.track-steps li.done { background: var(--sprout); color: var(--moss-d); }
.track-steps li.now { background: var(--moss); color: #fff; }
.track-steps .ico { display: block; margin: 0 auto 6px; }
.delay { display: flex; gap: 11px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--terra-l); }
.delay .ico { color: var(--terra); flex: none; margin-top: 2px; }
.delay b { display: block; font-size: .89rem; color: #9c4a2f; }
.delay p { font-size: .85rem; color: #7a4530; margin-top: 3px; }

/* ── 푸터 ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--moss-x); color: #DCE2D2; margin-top: 0; }
.footer-inner { width: min(1180px, 100% - 40px); margin-inline: auto; padding: clamp(44px, 5vw, 68px) 0 34px; }
@media (max-width: 767px) { .footer-inner { width: min(1180px, 100% - 32px); } }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 34px; padding-bottom: 30px; border-bottom: 1px solid rgb(220 226 210 / .16); }
@media (max-width: 899px) { .footer-top { grid-template-columns: 1fr; gap: 26px; } }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.1rem; color: #F1F5EA; }
.footer-brand .ico { width: 24px; height: 24px; color: var(--leaf); }
.footer-tag { margin-top: 10px; font-size: .88rem; color: rgb(220 226 210 / .72); max-width: 34ch; }
.footer-col h2 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(220 226 210 / .58); margin-bottom: 12px; }
.footer-nav { display: grid; gap: 4px; }
.footer-nav a { font-size: .9rem; padding: 4px 0; }
.footer-nav a:hover { color: #fff; }
.footer-cs { display: grid; gap: 5px; font-size: .9rem; }
.footer-cs a { font-weight: 700; font-size: 1.16rem; color: #F1F5EA; }
.footer-cs span { color: rgb(220 226 210 / .66); font-size: .84rem; }
.footer-biz { font-style: normal; font-size: .8rem; line-height: 1.85; color: rgb(220 226 210 / .6); margin-top: 26px; }
.footer-biz a { text-decoration: underline; text-underline-offset: 2px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: .82rem; }
.footer-legal a { color: rgb(220 226 210 / .82); }
.footer-legal a:hover { color: #fff; }
.footer-copy { margin-top: 20px; font-size: .8rem; color: rgb(220 226 210 / .5); }

/* ══════════════════════════════════════════════════════════════════════
   마무리 — 감춤 규칙과 무JS 분기 보정
   ══════════════════════════════════════════════════════════════════════ */

/* `.js .js-only { display: revert }` 는 UA 기본값으로 되돌리므로 flex 가 block 이 된다.
   원래 배치가 필요한 것들만 특이도를 한 단계 올려 되살린다. */
.js .quiz-nav.js-only,
.js .gal-thumbs.js-only,
.js .cat-tabs.js-only,
.js .result-bar.js-only { display: flex; }
.js .qty.js-only, .js .btn.js-only { display: inline-flex; }
.js .cmp-add.js-only { display: block; }

/* `.js-only { display:none }` 는 키트 맨 위에 있어, 아래에서 정의한 `.btn`·`.qty` 같은
   display 규칙에 「나중에 온 같은 특이도」로 밀린다 — 무JS 에서 반응 없는 단추가 남는다. */
html:not(.js) .js-only { display: none !important; }

/* [hidden] 이 붙으면 언제나 감춘다 — author 의 display 규칙이 UA 의 display:none 을
   이겨 「감췄는데 보이는」 사고가 난다(카드·행·표 열이 전부 여기에 걸린다). */
[hidden] { display: none !important; }
html:not(.js) .q-step[hidden] { display: block !important; }
html:not(.js) [role="tabpanel"][hidden] { display: block !important; }

.is-loading .empty { display: none !important; }

/* 비교표 세 번째 칸 — 무JS 에서는 처음부터 펼쳐 둔다(완성본 보장) */
.js .cmp:not(.c3-on) .cmp-c3 { display: none; }
.cmp-head img { width: 110px; height: auto; }

/* 헤더 장바구니 배지 */
.icon-link { position: relative; }
.icon-link .badge { position: absolute; top: 3px; right: 1px; margin: 0; }

/* 잔손질 */
.btn:disabled { opacity: .45; cursor: default; }
.warnbox a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.buildbar span { display: inline-block; }
.buildbar .bb-sum { display: inline; }
.buy-dock .btn { min-height: 52px; }
.buy-dock { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.opt-group > h3 { font-weight: 700; }
.opt-group .muted { font-weight: 500; }
.pcard-tags { align-items: center; }
.cross { flex-wrap: wrap; }
.cross div { flex: 1; min-width: 180px; }
.prow .state { white-space: nowrap; }

/* 모바일은 2열이라 설명이 다섯 줄까지 늘어난다 — 세 줄에서 끊어 카드 높이를 맞춘다. */
@media (max-width: 767px) {
  .match-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.sec-head > div { min-width: 0; }