/* ==========================================================================
   월드프레임 자사몰 — worldframe.co.kr
   로고 파랑 #1b2fcc · 흰 배경 · 애플 HIG 감각(시스템 폰트, 알약 버튼, 얇은 선)
   ========================================================================== */

:root {
  --wf-primary: #1b2fcc;
  --wf-primary-hover: #1425a3;
  --wf-primary-soft: rgba(27, 47, 204, 0.09);

  --wf-text: #1d1d1f;
  --wf-text-2: #4b4b4f;
  --wf-muted: #86868b;
  --wf-bg: #ffffff;
  --wf-bg-soft: #f5f5f7;
  --wf-line: #d2d2d7;
  --wf-line-soft: #e8e8ed;

  --wf-red: #c1352b;
  --wf-green: #0f7b52;
  --wf-amber: #ff9500;

  --wf-max: 1200px;
  --wf-pill: 980px;
  --wf-radius: 18px;
  --wf-t: 160ms ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wf-bg);
  color: var(--wf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, "Segoe UI", sans-serif;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--wf-primary); text-decoration: none; }
a:hover { color: var(--wf-primary-hover); }
button { font: inherit; letter-spacing: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
input { font: inherit; letter-spacing: inherit; }
svg { display: block; }
h1, h2, h3 { margin: 0; }
img { max-width: 100%; }

.wrap { max-width: var(--wf-max); margin: 0 auto; padding: 0 32px; }
.section { padding-top: 80px; }
.ph { display: grid; place-items: center; color: var(--wf-muted); font-size: 15.6px; background: var(--wf-bg-soft); }
.hide { display: none !important; }

.head-c { text-align: center; }
.head-c h2 { font-size: 40.8px; font-weight: 700; letter-spacing: -0.04em; }
.head-c p { margin: 10px 0 0; font-size: 20.4px; color: var(--wf-muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 15.6px; font-weight: 700; color: var(--wf-primary); }

/* ── 버튼 ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: var(--wf-pill);
  font-size: 20.4px; font-weight: 700; transition: var(--wf-t);
  background: var(--wf-primary); color: #fff;
}
.btn:hover { background: var(--wf-primary-hover); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--wf-line); color: var(--wf-text); font-weight: 500; }
.btn-ghost:hover { background: var(--wf-bg-soft); color: var(--wf-text); }
.btn-dark { background: var(--wf-text); }
.btn-dark:hover { background: #000; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 16.8px; font-weight: 600; }
.btn-line-w { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.42); color: #fff; font-weight: 500; }
.btn-line-w:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ── 유틸 바 · 헤더 ───────────────────────────────────────────── */
.util { background: #fff; }
.util .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 20px; height: 32px; font-size: 14.4px; color: #9a9aa0; }
.util a { color: #9a9aa0; }
.util a:hover { color: var(--wf-text); }

.hd {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.hd .wrap { display: flex; align-items: stretch; height: 58px; }
.hd-logo { display: flex; align-items: center; flex: 0 0 auto; }
.hd-logo img { display: block; height: 21px; width: auto; }
.hd-nav { display: flex; align-items: stretch; margin: 0 auto; }
.hd-nav a, .hd-nav button {
  display: inline-flex; align-items: center; padding: 0 13px;
  font-size: 17.4px; font-weight: 500; color: var(--wf-text); transition: var(--wf-t);
}
.hd-nav button.on { font-weight: 700; box-shadow: inset 0 -2px 0 0 var(--wf-primary); }
.hd-nav .accent { color: var(--wf-primary); }
.hd-sep { align-self: center; width: 1px; height: 14px; margin: 0 10px; background: #e0e0e5; }
.hd-act { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.hd-act button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; position: relative; }
.hd-act button:hover { background: var(--wf-bg-soft); }
.cart-badge {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #ff3b30; color: #fff;
  font-size: 13.2px; font-weight: 800; line-height: 17px; text-align: center;
}
.hd-burger { display: none; }

/* ── 히어로 ───────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; height: 720px; background: #1a1c1f; }
.hero-track { display: flex; height: 100%; transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.hero-panel { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15.6px; color: rgba(255,255,255,0.22); }
.hero-shade-1 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.62) 42%, rgba(0,0,0,0.30) 100%); }
.hero-shade-2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0.42) 100%); }
.hero-inner {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  height: 100%; max-width: var(--wf-max); margin: 0 auto; padding: 0 32px 150px;
}
.hero-eyebrow { font-size: 19.2px; font-weight: 700; color: rgba(255,255,255,0.88); }
.hero-title { margin: 20px 0 0; font-size: 76.8px; line-height: 1.16; font-weight: 800; letter-spacing: -0.05em; color: #fff; white-space: pre-line; text-wrap: pretty; }
.hero-title i { font-style: normal; color: var(--wf-primary); }
.hero-num { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.hero-num b { font-size: 79.2px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: #fff; }
.hero-num span { font-size: 27.6px; font-weight: 700; color: #fff; }
.hero-body { margin: 24px 0 0; font-size: 20.4px; line-height: 1.7; font-weight: 500; color: rgba(255,255,255,0.78); white-space: pre-line; text-wrap: pretty; }
.hero-cta { display: flex; gap: 10px; margin-top: 34px; }
.hero-arrow {
  position: absolute; top: 50%; z-index: 4; display: grid; place-items: center;
  width: 48px; height: 48px; margin-top: -50px; border-radius: 999px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-arrow:hover { background: rgba(255,255,255,0.2); }
.hero-arrow.prev { left: 26px; }
.hero-arrow.next { right: 26px; }
.hero-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
.hero-tabs { display: flex; align-items: center; gap: 44px; height: 66px; border-top: 1px solid rgba(255,255,255,0.24); }
.hero-tabs button { font-size: 19.2px; font-weight: 500; color: rgba(255,255,255,0.45); transition: var(--wf-t); }
.hero-tabs button.on { font-weight: 700; color: #fff; }
.hero-crumb { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 15.6px; color: rgba(255,255,255,0.55); }
.hero-crumb b { font-weight: 500; color: #fff; }
.hero-prog { display: flex; align-items: center; gap: 6px; height: 34px; }
.hero-prog i { height: 3px; width: 16px; border-radius: 999px; background: rgba(255,255,255,0.28); transition: 300ms ease; }
.hero-prog i.on { width: 34px; background: #fff; }

/* ── 안심 밴드 ────────────────────────────────────────────────── */
.trust { border-top: 1px solid var(--wf-line-soft); border-bottom: 1px solid var(--wf-line-soft); }
.trust .wrap { padding-top: 34px; padding-bottom: 34px; }
.trust-head { display: flex; align-items: baseline; gap: 12px; }
.trust-head h2 { font-size: 22.8px; font-weight: 700; letter-spacing: -0.03em; }
.trust-head span { font-size: 16.8px; color: var(--wf-muted); }
.trust-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.trust-item { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--wf-line-soft); border-radius: 14px; }
.trust-ico { flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--wf-primary-soft); }
.trust-item b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.trust-item p { margin: 4px 0 0; font-size: 15.6px; line-height: 1.5; color: var(--wf-muted); text-wrap: pretty; }

/* ── 카드 · 그리드 ────────────────────────────────────────────── */
.grid { display: grid; gap: 24px; margin-top: 36px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { border: 1px solid var(--wf-line); border-radius: var(--wf-radius); overflow: hidden; background: #fff; }
.card .thumb { position: relative; height: 250px; }
.card .body { padding: 20px; }
.card .cat { font-size: 15.6px; color: var(--wf-muted); }
.card .name { margin-top: 6px; font-size: 19.2px; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; text-wrap: pretty; }
.card .price { margin-top: 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.card .price span { font-size: 18px; font-weight: 500; color: var(--wf-text-2); }
.card .meta { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 15.6px; color: var(--wf-muted); }
.tag {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px;
  background: var(--wf-primary); color: #fff; font-size: 13.2px; font-weight: 800; letter-spacing: 0.02em;
}
.tag-dark { background: var(--wf-text); }

/* ── 맞춤 액자 찾기 ───────────────────────────────────────────── */
.wiz-box { padding: 48px; border-radius: 20px; background: var(--wf-bg-soft); }
.wiz-dots { display: flex; align-items: center; justify-content: center; margin-top: 30px; }
.wiz-dots > div { display: flex; align-items: center; }
.wiz-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #e0e0e5; color: var(--wf-muted); font-size: 14.4px; font-weight: 800; transition: var(--wf-t); }
.wiz-dot.now { background: var(--wf-text); color: #fff; }
.wiz-dot.done { background: var(--wf-primary); color: #fff; }
.wiz-line { width: 46px; height: 2px; margin: 0 6px; border-radius: 999px; background: #e0e0e5; }
.wiz-line.done { background: var(--wf-primary); }

.wiz-split { display: flex; gap: 36px; margin-top: 28px; }
.wiz-view { flex: 0 0 452px; display: flex; flex-direction: column; padding: 26px; border-radius: var(--wf-radius); background: #fff; border: 1px solid var(--wf-line); }
.wiz-wall { position: relative; display: grid; place-items: center; min-height: 322px; padding: 26px; border-radius: 14px; background: var(--wf-bg-soft); }
.wiz-frames { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; max-width: 340px; }
.wiz-shelf { position: absolute; left: 30px; right: 30px; bottom: 52px; height: 9px; border-radius: 3px; background: #d8c8b4; }
.wiz-cap { margin-top: 20px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.wiz-cap-sub { margin-top: 5px; font-size: 15.6px; line-height: 1.55; color: var(--wf-muted); text-wrap: pretty; }
.wiz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.wiz-tags span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--wf-pill); background: var(--wf-primary-soft); color: var(--wf-primary); font-size: 15.6px; font-weight: 600; }

.wiz-qs { flex: 1 1 auto; min-width: 0; }
.wiz-q { padding: 22px 24px; margin-bottom: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--wf-line); }
.wiz-q-head { display: flex; align-items: center; gap: 9px; }
.wiz-q-no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--wf-line-soft); color: var(--wf-muted); font-size: 14.4px; font-weight: 800; }
.wiz-q.picked .wiz-q-no { background: var(--wf-primary); color: #fff; }
.wiz-q-title { font-size: 20.4px; font-weight: 700; letter-spacing: -0.03em; }
.wiz-q-edit { margin-left: auto; height: 28px; padding: 0 12px; border-radius: var(--wf-pill); background: var(--wf-bg-soft); font-size: 15.6px; font-weight: 500; color: var(--wf-text-2); }
.wiz-opts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.wiz-opt { display: block; text-align: left; padding: 12px 18px; border-radius: 14px; background: #fff; border: 1.5px solid var(--wf-line); transition: var(--wf-t); }
.wiz-opt:hover { border-color: #b8b8c0; }
.wiz-opt.on { background: var(--wf-primary-soft); border-color: var(--wf-primary); color: var(--wf-primary); }
.wiz-opt b { display: block; font-size: 18px; font-weight: 600; }
.wiz-opt i { display: block; margin-top: 2px; font-size: 14.4px; font-style: normal; color: var(--wf-muted); }
.wiz-opt.on i { color: var(--wf-primary); }

.wiz-think { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 780px; margin: 26px auto 0; padding: 20px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--wf-line); }
.wiz-result { margin-top: 34px; padding-top: 32px; border-top: 1px solid #e0e0e5; }
.wiz-answer { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.wiz-answer-ico { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--wf-primary-soft); }
.wiz-answer p { margin: 0; font-size: 22.8px; line-height: 1.55; font-weight: 600; letter-spacing: -0.03em; text-wrap: pretty; }
.wiz-pick { padding: 22px; border-radius: var(--wf-radius); background: #fff; border: 1px solid var(--wf-line); }
.wiz-pick.first { border: 1.5px solid var(--wf-primary); }
.wiz-rank { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--wf-line-soft); color: var(--wf-text-2); font-size: 14.4px; font-weight: 800; }
.wiz-pick.first .wiz-rank { background: var(--wf-primary); color: #fff; }
.wiz-why { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: 16.8px; line-height: 1.55; color: var(--wf-text-2); text-wrap: pretty; }
.wiz-buy { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wf-line-soft); }

@keyframes blink { 0%, 80%, 100% { opacity: 0.22; } 40% { opacity: 1; } }
.dot3 { display: flex; align-items: center; gap: 5px; }
.dot3 i { width: 6px; height: 6px; border-radius: 999px; background: var(--wf-primary); animation: blink 1.2s infinite; }
.dot3 i:nth-child(2) { animation-delay: 0.18s; }
.dot3 i:nth-child(3) { animation-delay: 0.36s; }

/* ── 규격 계산기 ──────────────────────────────────────────────── */
.calc { display: flex; gap: 48px; margin-top: 36px; padding: 40px; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); }
.calc-view { flex: 0 0 480px; display: grid; place-items: center; height: 430px; border-radius: 12px; background: var(--wf-bg-soft); }
.calc-frame { box-sizing: border-box; width: 290px; height: 362px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: var(--wf-t); }
.calc-frame > div { width: 100%; height: 100%; display: grid; place-items: center; background: #e9e9ed; }
.calc-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.calc-tabs { display: flex; gap: 8px; }
.calc-tab { height: 42px; padding: 0 22px; border-radius: var(--wf-pill); background: #fff; border: 1px solid var(--wf-line); font-size: 19.2px; font-weight: 600; transition: var(--wf-t); }
.calc-tab.on { background: var(--wf-primary); border-color: var(--wf-primary); color: #fff; }
.calc-label { margin-top: 26px; font-size: 16.8px; font-weight: 700; }
.calc-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.calc-size { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 15px; border-radius: 12px; text-align: left; background: #fff; border: 1.5px solid var(--wf-line); transition: var(--wf-t); }
.calc-size.on { background: var(--wf-primary-soft); border-color: var(--wf-primary); color: var(--wf-primary); }
.calc-size b { font-size: 18px; font-weight: 700; }
.calc-size i { font-size: 13.2px; font-style: normal; font-weight: 600; color: var(--wf-muted); }
.calc-size.on i { color: var(--wf-primary); }
.calc-fins { display: flex; gap: 8px; margin-top: 12px; }
.calc-fin { height: 42px; padding: 0 24px; border-radius: 12px; background: #fff; border: 1.5px solid var(--wf-line); font-size: 18px; font-weight: 600; transition: var(--wf-t); }
.calc-fin.on { background: var(--wf-primary-soft); border-color: var(--wf-primary); color: var(--wf-primary); }
.calc-buy { display: flex; align-items: flex-end; gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--wf-line-soft); }
.calc-price { margin-top: 4px; font-size: 45.6px; font-weight: 700; letter-spacing: -0.045em; }
.calc-price span { font-size: 25.2px; font-weight: 500; color: var(--wf-text-2); }

/* ── 크로스셀 · 통계 · 공동구매 ───────────────────────────────── */
.band { display: flex; align-items: center; gap: 56px; padding: 52px 56px; border-radius: 20px; background: var(--wf-bg-soft); }
.band h2 { margin: 10px 0 0; font-size: 38.4px; font-weight: 700; letter-spacing: -0.04em; text-wrap: pretty; }
.band p { margin: 14px 0 0; font-size: 20.4px; line-height: 1.6; color: var(--wf-text-2); max-width: 520px; text-wrap: pretty; }
.band-view { flex: 0 0 420px; display: grid; place-items: center; height: 260px; border-radius: 14px; background: #fff; border: 1px solid var(--wf-line); }

.stats { margin-top: 80px; border-top: 1px solid var(--wf-line-soft); border-bottom: 1px solid var(--wf-line-soft); background: var(--wf-bg-soft); }
.stats .wrap { padding-top: 56px; padding-bottom: 56px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.stat { padding: 26px 22px; border-radius: 16px; background: #fff; text-align: center; }
.stat b { display: block; font-size: 40.8px; font-weight: 800; letter-spacing: -0.045em; }
.stat span { display: block; margin-top: 6px; font-size: 16.8px; font-weight: 600; color: var(--wf-text-2); }
.stat i { display: block; margin-top: 3px; font-size: 14.4px; font-style: normal; color: var(--wf-muted); }

.event { display: flex; align-items: center; gap: 40px; padding: 44px 52px; border-radius: 20px; background: var(--wf-text); }
.event h2 { margin: 10px 0 0; font-size: 34.8px; font-weight: 700; letter-spacing: -0.035em; color: #fff; text-wrap: pretty; }
.event p { margin: 12px 0 0; font-size: 19.2px; line-height: 1.6; color: rgba(255,255,255,0.66); }
.event .eyebrow { color: #9aa7ff; }

/* ── 리뷰 · 가이드 ────────────────────────────────────────────── */
.rv-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.rv-tab { height: 38px; padding: 0 18px; border-radius: var(--wf-pill); background: #fff; border: 1px solid var(--wf-line); font-size: 18px; font-weight: 600; transition: var(--wf-t); }
.rv-tab.on { background: var(--wf-text); border-color: var(--wf-text); color: #fff; }
.rv-card { display: flex; flex-direction: column; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); overflow: hidden; background: #fff; }
.rv-stars { display: flex; gap: 3px; }
.guide { padding: 28px; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); }
.guide-no { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--wf-primary-soft); color: var(--wf-primary); font-size: 19.2px; font-weight: 800; }

/* ── 푸터 ─────────────────────────────────────────────────────── */
.ft { margin-top: 80px; border-top: 1px solid var(--wf-line); }
.ft-top { display: flex; gap: 72px; padding-top: 52px; padding-bottom: 40px; }
.ft-cs { flex: 0 0 320px; }
.ft-tel { margin-top: 8px; font-size: 40.8px; font-weight: 800; letter-spacing: -0.04em; }
.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; flex: 1 1 auto; }
.ft-cols b { font-size: 16.8px; font-weight: 700; }
.ft-cols div div { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ft-cols a { font-size: 16.8px; color: var(--wf-muted); }
.ft-cols a:hover { color: var(--wf-text); }
.ft-legal { border-top: 1px solid var(--wf-line-soft); }
.ft-legal .wrap { padding-top: 22px; padding-bottom: 22px; font-size: 15.6px; line-height: 1.7; color: var(--wf-muted); }

/* ── 상담 봇 ──────────────────────────────────────────────────── */
.bot { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.bot-panel { display: flex; flex-direction: column; width: 372px; height: 560px; border-radius: 20px; background: #fff; border: 1px solid var(--wf-line); box-shadow: 0 18px 48px rgba(0,0,0,0.20); overflow: hidden; }
.bot-head { flex: 0 0 auto; padding: 18px 20px 16px; background: var(--wf-text); }
.bot-head b { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.bot-head span { font-size: 14.4px; color: rgba(255,255,255,0.6); }
.bot-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px; background: var(--wf-bg-soft); }
.bot-msgs { display: flex; flex-direction: column; gap: 10px; }
.bot-row { display: flex; }
.bot-row.me { justify-content: flex-end; }
.bot-bubble { max-width: 262px; padding: 11px 14px; font-size: 16.8px; line-height: 1.55; text-wrap: pretty; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--wf-line-soft); }
.bot-row.me .bot-bubble { border-radius: 14px 14px 4px 14px; background: var(--wf-primary); border-color: var(--wf-primary); color: #fff; font-weight: 500; }
.bot-pick { padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--wf-line-soft); }
.bot-quick { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 16px 16px; background: #fff; border-top: 1px solid var(--wf-line-soft); }
.bot-quick button { height: 36px; padding: 0 14px; border-radius: var(--wf-pill); background: var(--wf-bg-soft); font-size: 15.6px; font-weight: 600; transition: var(--wf-t); }
.bot-quick button:hover { background: #eaeaef; }
.bot-quick button.primary { background: var(--wf-primary); color: #fff; }
.bot-quick button.primary:hover { background: var(--wf-primary-hover); }
.bot-launch { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px; background: var(--wf-primary); box-shadow: 0 10px 30px rgba(0,0,0,0.24); transition: var(--wf-t); }
.bot-launch.open { background: var(--wf-text); }

/* 상담 입력줄 — 손님이 직접 쓰는 자리 */
.bot-input {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px 14px; background: #fff; border-top: 1px solid var(--wf-line-soft);
}
.bot-input textarea {
  flex: 1 1 auto; min-width: 0; height: 40px; max-height: 96px; padding: 10px 14px;
  border: 1px solid var(--wf-line); border-radius: 18px; background: var(--wf-bg-soft);
  font: inherit; font-size: 16.8px; line-height: 1.45; color: var(--wf-text);
  resize: none; overflow-y: auto; transition: var(--wf-t);
}
.bot-input textarea:focus { outline: none; background: #fff; border-color: var(--wf-primary); }
.bot-input textarea::placeholder { color: var(--wf-muted); }
.bot-input button {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; background: var(--wf-primary); transition: var(--wf-t);
}
.bot-input button:hover { background: var(--wf-primary-hover); }
.bot-input button:disabled { background: var(--wf-line); cursor: default; }

/* 대화가 시작되면 시작 버튼줄이 사라진다. 그때 위 테두리는 입력줄만 갖는다 */
.bot-quick.hide + .bot-input { border-top: 1px solid var(--wf-line-soft); }


/* ==========================================================================
   반응형
   1280 · 1100 · 900(태블릿) · 640(폰) · 420(작은 폰) · 가로눕힘
   ========================================================================== */

/* 어느 폭에서도 몸통이 옆으로 밀리지 않는다. clip 이라야 sticky 헤더가 산다 */
html { overflow-x: clip; }

/* 붙박이 헤더에 앵커가 가려지지 않게 */
[id] { scroll-margin-top: 78px; }

/* 옆으로 넘기는 줄들 — 스크롤바는 감추고 관성은 살린다 */
.hd-nav, .hero-tabs, .calc-tabs, .calc-fins {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hd-nav::-webkit-scrollbar, .hero-tabs::-webkit-scrollbar,
.calc-tabs::-webkit-scrollbar, .calc-fins::-webkit-scrollbar { display: none; }

/* 손가락 화면에서는 hover 가 눌린 채로 남는다. 되돌린다 */
@media (hover: none) {
  .btn:hover { background: var(--wf-primary); }
  .btn-ghost:hover { background: #fff; }
  .btn-dark:hover { background: var(--wf-text); }
  .btn-line-w:hover { background: rgba(255,255,255,0.10); }
  .hd-act button:hover, .bot-quick button:hover { background: none; }
  .bot-input button:hover { background: var(--wf-primary); }
  .bot-quick button.primary:hover { background: var(--wf-primary); }
  .wiz-opt:hover { border-color: var(--wf-line); }
  .ft-cols a:hover, .util a:hover { color: var(--wf-muted); }
  a, button { -webkit-tap-highlight-color: rgba(27, 47, 204, 0.10); }
}

@media (max-width: 1280px) {
  .wrap { padding: 0 24px; }
  .hero-inner { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 1100px) {
  .hero { height: 640px; }
  .hero-title { font-size: 60px; }
  .hero-num b { font-size: 64.8px; }
  .hero-tabs { gap: 28px; }
  .wiz-split { gap: 26px; }
  .wiz-view { flex: 0 0 380px; }
  .calc { gap: 32px; padding: 32px; }
  .calc-view { flex: 0 0 380px; height: 380px; }
  .calc-frame { width: 250px; height: 312px; }
  .band { gap: 36px; padding: 44px; }
  .band-view { flex: 0 0 330px; }
  .ft-top { gap: 44px; }
}

@media (max-width: 900px) {
  .util { display: none; }

  /* 헤더: 로고 + 아이콘 한 줄, 카테고리는 그 아래 가로 스크롤 */
  .hd .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 6px; }
  .hd-nav { order: 3; width: 100%; margin: 6px -24px 0; padding: 0 24px; overflow-x: auto; flex-wrap: nowrap; }
  .hd-nav a, .hd-nav button { flex: 0 0 auto; padding: 8px 11px; }
  .hd-act { margin-left: auto; }
  [id] { scroll-margin-top: 108px; }

  .hero { height: 580px; }
  .hero-title { font-size: 48px; }
  .hero-num b { font-size: 55.2px; }
  .hero-inner { padding-bottom: 140px; }
  .hero-tabs { gap: 20px; overflow-x: auto; }
  .hero-tabs button { flex: 0 0 auto; }
  .hero-crumb, .hero-arrow { display: none; }

  .trust-grid, .g4, .g3, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiz-split, .calc, .band, .event, .ft-top { flex-direction: column; gap: 28px; }
  .wiz-view, .calc-view, .band-view, .ft-cs { flex: 1 1 auto; width: 100%; }
  .wiz-box, .band, .event { padding: 30px; }
  .wiz-wall { min-height: 270px; }
  .calc { padding: 28px; }
  .calc-view { height: 340px; }
  .calc-frame { width: 230px; height: 288px; }
  .event .btn { width: 100%; }
  .ft-cols { gap: 24px; }
  .section { padding-top: 56px; }
  .bot-panel { width: 320px; height: 460px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .section { padding-top: 44px; }

  /* 히어로: 주소창이 접혔다 펴져도 잘리지 않게 화면 높이에 맞춘다 */
  .hero { height: 520px; height: min(520px, 82svh); min-height: 440px; }
  .hero-inner { padding: 0 18px 124px; }
  .hero-eyebrow { font-size: 16.8px; }
  .hero-title { font-size: 36px; margin-top: 14px; }
  .hero-num { margin-top: 14px; }
  .hero-num b { font-size: 45.6px; }
  .hero-num span { font-size: 21.6px; }
  .hero-body { margin-top: 16px; font-size: 18px; line-height: 1.6; }
  .hero-cta { flex-direction: column; gap: 8px; margin-top: 22px; }
  .hero-cta .btn { width: 100%; height: 48px; font-size: 19.2px; }
  .hero-tabs { height: 54px; gap: 18px; }
  .hero-tabs button { font-size: 16.8px; }
  .hero-prog { height: 30px; }

  .head-c h2 { font-size: 31.2px; }
  .head-c p { font-size: 18px; }
  .btn { height: 48px; padding: 0 22px; font-size: 19.2px; }

  .trust .wrap { padding-top: 26px; padding-bottom: 26px; }
  .trust-head { flex-wrap: wrap; gap: 4px 10px; }
  .trust-grid, .g3, .ft-cols { grid-template-columns: 1fr; }
  .trust-item { padding: 15px; }

  /* 상품은 폰에서도 두 줄로 본다. 한 장씩 크게 나오면 스크롤만 길어진다 */
  .grid { gap: 14px; margin-top: 24px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card .thumb { height: 168px; }
  .card .body { padding: 14px; }
  .card .cat, .card .meta { font-size: 14.4px; }
  .card .name { font-size: 16.8px; margin-top: 4px; }
  .card .price { font-size: 20.4px; margin-top: 8px; }
  .card .price span { font-size: 15.6px; }
  .tag { top: 10px; left: 10px; }

  .wiz-box { padding: 20px 16px; }
  .wiz-dots { margin-top: 22px; }
  .wiz-line { width: 26px; }
  .wiz-split { margin-top: 22px; gap: 20px; }
  .wiz-view { padding: 16px; }
  .wiz-wall { min-height: 220px; padding: 16px; }
  .wiz-frames { max-width: 100%; gap: 9px; }
  .wiz-q { padding: 18px 16px; }
  .wiz-q-title { font-size: 19.2px; }
  .wiz-opt { padding: 11px 14px; }
  .wiz-think { flex-direction: column; gap: 10px; text-align: center; padding: 18px; }
  .wiz-result { margin-top: 26px; padding-top: 24px; }
  .wiz-answer p { font-size: 20.4px; }
  .wiz-pick { padding: 18px; }
  .wiz-buy { flex-wrap: wrap; }
  .wiz-buy .btn { flex: 1 1 140px; }

  .calc { padding: 20px 16px; gap: 22px; }
  .calc-view { height: 290px; }
  .calc-frame { width: 190px; height: 238px; }
  .calc-tabs { overflow-x: auto; }
  .calc-tab { flex: 0 0 auto; height: 40px; padding: 0 18px; font-size: 18px; }
  .calc-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-fins { overflow-x: auto; }
  .calc-fin { flex: 0 0 auto; }
  .calc-buy { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 24px; }
  .calc-buy .btn { width: 100%; margin-left: 0 !important; }
  .calc-price { font-size: 38.4px; }

  .band, .event { padding: 24px 20px; }
  .band h2 { font-size: 30px; }
  .band p { font-size: 18px; }
  .band-view { height: 190px; }
  .event h2 { font-size: 27.6px; }
  .event p { font-size: 18px; }

  .stats { margin-top: 56px; }
  .stats .wrap { padding-top: 40px; padding-bottom: 40px; }
  .stats-grid { gap: 12px; margin-top: 26px; }
  .stat { padding: 20px 14px; }
  .stat b { font-size: 32.4px; }

  .rv-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 0 18px; scrollbar-width: none; }
  .rv-tabs::-webkit-scrollbar { display: none; }
  .rv-tab { flex: 0 0 auto; }
  .guide { padding: 20px; }
  .guide-no { width: 38px; height: 38px; }

  .ft { margin-top: 56px; }
  .ft-top { gap: 30px; padding-top: 36px; padding-bottom: 28px; }
  .ft-tel { font-size: 33.6px; }
  .ft-cols div div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .ft-legal .wrap { font-size: 14.4px; }

  .bot { right: 16px; bottom: 16px; }
  .bot-panel { width: calc(100vw - 32px); height: 440px; height: min(440px, 72svh); }
  .bot-bubble { max-width: 76vw; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
  .hero-inner { padding-left: 14px; padding-right: 14px; }
  .hd-logo img { height: 19px; }
  .hero-title { font-size: 31.2px; }
  .hero-num b { font-size: 40.8px; }
  .head-c h2 { font-size: 27.6px; }
  .card .thumb { height: 140px; }
  .calc-sizes { grid-template-columns: 1fr; }
  .calc-price { font-size: 33.6px; }
  .ft-tel { font-size: 30px; }
  .bot-launch { width: 52px; height: 52px; }
}

/* 폰을 눕혔을 때 — 히어로가 화면을 다 먹지 않게 */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { height: 420px; min-height: 0; }
  .hero-inner { padding-bottom: 104px; }
  .hero-title { font-size: 33.6px; }
  .hero-body { display: none; }
  .bot-panel { height: min(440px, 84svh); }
}

/* 움직임을 줄이라고 설정한 기기에서는 배너도 조용히 넘어간다 */
@media (prefers-reduced-motion: reduce) {
  .hero-track, .hero-prog i, .btn, .wiz-opt, .calc-tab, .calc-size, .calc-fin, .rv-tab { transition: none; }
  .dot3 i { animation: none; opacity: 0.6; }
}

/* ==========================================================================
   상품 목록 · 상품 상세 · 장바구니 (자사몰 뼈대)
   ========================================================================== */

/* 헤더 아이콘이 버튼이 아니라 링크인 화면도 있다 (새 화면들) */
.hd-act a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; position: relative; }
.hd-act a:hover { background: var(--wf-bg-soft); }

/* 카드가 통째로 링크가 된다 */
a.card { display: block; color: inherit; transition: var(--wf-t); }
a.card:hover { color: inherit; border-color: #b8b8c0; box-shadow: 0 8px 24px rgba(0,0,0,0.07); }
.card .thumb { overflow: hidden; background: var(--wf-bg-soft); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 사진이 아직 없는 자리 — 회색 네모 대신 액자 모양을 그려 둔다.
   "빠뜨린 것"이 아니라 "아직 안 온 것"으로 보이게 하려는 것이다. */
.thumb-draw { position: relative; display: grid; place-items: center; width: 100%; height: 100%; gap: 10px; background: var(--wf-bg-soft); }
.thumb-frame { width: 44%; max-width: 130px; aspect-ratio: 4 / 5; border: 2px solid #c9c9d1; border-radius: 3px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.06); }
.thumb-frame.is-table { aspect-ratio: 5 / 4; width: 50%; border-bottom-width: 6px; }
.thumb-draw span { font-size: 14.4px; color: var(--wf-muted); }
.thumb-draw.big { gap: 18px; }
.thumb-draw.big .thumb-frame { width: 46%; max-width: 260px; border-width: 3px; }
.thumb-draw.big span { font-size: 15.6px; }

/* 상품 목록 */
.plist { padding-top: 42px; padding-bottom: 90px; }
.plist-head h1 { font-size: 40.8px; font-weight: 700; letter-spacing: -0.04em; }
.plist-head p { margin: 9px 0 0; font-size: 19.2px; color: var(--wf-muted); }

.pfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pfilter a { display: inline-flex; align-items: center; height: 38px; padding: 0 17px; border-radius: var(--wf-pill); background: var(--wf-bg-soft); font-size: 16.8px; font-weight: 600; color: var(--wf-text-2); transition: var(--wf-t); }
.pfilter a:hover { background: #eaeaef; color: var(--wf-text); }
.pfilter a.on { background: var(--wf-text); color: #fff; }

.pbar { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--wf-line-soft); }
.pbar-sizes { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pbar-sizes button { height: 32px; padding: 0 13px; border-radius: var(--wf-pill); border: 1px solid var(--wf-line); background: #fff; font-size: 15.6px; font-weight: 500; color: var(--wf-text-2); transition: var(--wf-t); }
.pbar-sizes button:hover { border-color: #b8b8c0; }
.pbar-sizes button.on { background: var(--wf-primary-soft); border-color: var(--wf-primary); color: var(--wf-primary); font-weight: 600; }
.pbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; font-size: 16.8px; color: var(--wf-muted); }
.pbar-right select { height: 34px; padding: 0 10px; border: 1px solid var(--wf-line); border-radius: 9px; background: #fff; font: inherit; font-size: 16.8px; color: var(--wf-text); }

.pempty { display: grid; place-items: center; gap: 14px; padding: 70px 0; text-align: center; }
.pempty p { margin: 0; font-size: 19.2px; color: var(--wf-muted); }

/* 상품 상세 */
.pdetail { padding-top: 26px; padding-bottom: 90px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 15.6px; color: var(--wf-muted); }
.crumb a { color: var(--wf-muted); }
.crumb a:hover { color: var(--wf-text); }
.crumb b { font-weight: 600; color: var(--wf-text-2); }

.pd { display: flex; gap: 48px; margin-top: 24px; }
.pd-view { flex: 1 1 0; min-width: 0; }
.pd-main { height: 540px; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); overflow: hidden; }
.pd-buy { flex: 0 0 420px; }

.pd-cat { font-size: 16.8px; color: var(--wf-muted); }
.pd-name { margin: 8px 0 0; font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: -0.04em; text-wrap: pretty; }
.pd-price { margin-top: 14px; font-size: 36px; font-weight: 800; letter-spacing: -0.04em; }
.pd-desc { margin: 14px 0 0; font-size: 18px; line-height: 1.65; color: var(--wf-text-2); text-wrap: pretty; }

.pd-opt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--wf-line-soft); }
.pd-opt-label { font-size: 16.8px; font-weight: 700; }
.pd-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pd-size { display: block; padding: 11px 12px; border: 1.5px solid var(--wf-line); border-radius: 12px; text-align: center; color: var(--wf-text); transition: var(--wf-t); }
.pd-size:hover { border-color: #b8b8c0; color: var(--wf-text); }
.pd-size.on { background: var(--wf-primary-soft); border-color: var(--wf-primary); color: var(--wf-primary); }
.pd-size b { display: block; font-size: 18px; font-weight: 700; }
.pd-size i { display: block; margin-top: 2px; font-size: 14.4px; font-style: normal; color: var(--wf-muted); }
.pd-size.on i { color: var(--wf-primary); }

.pd-fins { display: flex; gap: 8px; margin-top: 12px; }
.pd-fins button { height: 42px; padding: 0 24px; border: 1.5px solid var(--wf-line); border-radius: 12px; background: #fff; font-size: 18px; font-weight: 600; color: var(--wf-text-2); transition: var(--wf-t); }
.pd-fins button.on { background: var(--wf-primary-soft); border-color: var(--wf-primary); color: var(--wf-primary); }
.pd-hint { margin: 10px 0 0; font-size: 15.6px; color: var(--wf-muted); }

.pd-qty { display: inline-flex; align-items: center; margin-top: 12px; border: 1px solid var(--wf-line); border-radius: 11px; overflow: hidden; }
.pd-qty button { width: 40px; height: 40px; background: #fff; font-size: 20.4px; color: var(--wf-text-2); transition: var(--wf-t); }
.pd-qty button:hover { background: var(--wf-bg-soft); }
.pd-qty span { min-width: 44px; text-align: center; font-size: 18px; font-weight: 700; }

.pd-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--wf-line-soft); }
.pd-total span { font-size: 18px; color: var(--wf-text-2); }
.pd-total b { font-size: 36px; font-weight: 800; letter-spacing: -0.04em; }

.pd-cta { display: flex; gap: 9px; margin-top: 18px; }
.pd-cta .btn { flex: 1 1 0; }

.pd-info { margin: 24px 0 0; padding: 18px 20px; list-style: none; border-radius: 14px; background: var(--wf-bg-soft); }
.pd-info li { position: relative; padding-left: 13px; font-size: 16.2px; line-height: 1.65; color: var(--wf-text-2); text-wrap: pretty; }
.pd-info li + li { margin-top: 7px; }
.pd-info li::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 999px; background: #c0c0c8; }
.pd-info a { color: var(--wf-primary); font-weight: 600; }

.pd-rel { margin-top: 80px; }
.pd-rel h2 { font-size: 28.8px; font-weight: 700; letter-spacing: -0.04em; }

/* 장바구니 */
.cart { padding-top: 42px; padding-bottom: 90px; }
.cart-title { font-size: 38.4px; font-weight: 700; letter-spacing: -0.04em; }
.cart-grid { display: flex; gap: 36px; margin-top: 28px; align-items: flex-start; }
.cart-list { flex: 1 1 0; min-width: 0; border-top: 1px solid var(--wf-line); }
.cart-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--wf-line-soft); }
.cart-thumb { flex: 0 0 86px; width: 86px; height: 86px; border: 1px solid var(--wf-line-soft); border-radius: 12px; overflow: hidden; }
.cart-info { flex: 1 1 auto; min-width: 0; }
.cart-info > a { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--wf-text); text-wrap: pretty; }
.cart-info > a:hover { color: var(--wf-primary); }
.cart-opt { margin-top: 4px; font-size: 15.6px; color: var(--wf-muted); }
.cart-unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 3px; font-size: 15.6px; color: var(--wf-muted); }
.cart-unit .gb-tag { margin-left: 0; }
.cart-qty { flex: 0 0 auto; margin-top: 0; }
.cart-qty button { width: 34px; height: 34px; }
.cart-qty span { min-width: 36px; font-size: 16.8px; }
.cart-sum { flex: 0 0 100px; text-align: right; font-size: 19.2px; font-weight: 700; letter-spacing: -0.03em; }
.cart-del { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; font-size: 22.8px; color: var(--wf-muted); transition: var(--wf-t); }
.cart-del:hover { background: var(--wf-bg-soft); color: var(--wf-text); }

.cart-side { flex: 0 0 320px; padding: 24px; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); background: #fff; }
.cart-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 16.8px; color: var(--wf-text-2); }
.cart-line + .cart-line { margin-top: 11px; }
.cart-line b { font-size: 18px; font-weight: 700; color: var(--wf-text); }
.cart-total { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wf-line-soft); }
.cart-total span { font-size: 18px; font-weight: 600; color: var(--wf-text); }
.cart-total b { font-size: 28.8px; font-weight: 800; letter-spacing: -0.04em; }
.cart-note { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--wf-muted); text-wrap: pretty; }
.cart-note b { font-weight: 700; color: var(--wf-text-2); }
.cart-more { display: block; margin-top: 16px; text-align: center; font-size: 16.8px; color: var(--wf-muted); }
.cart-more:hover { color: var(--wf-text); }

/* 담았을 때 잠깐 뜨는 알림 */
.wf-toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 80;
  padding: 13px 22px; border-radius: var(--wf-pill);
  background: rgba(29,29,31,0.94); color: #fff; font-size: 16.8px; font-weight: 600;
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none; transition: var(--wf-t);
}
.wf-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* 새 화면 — 좁은 폭 */
@media (max-width: 900px) {
  .pd { flex-direction: column; gap: 26px; }
  .pd-buy { flex: 1 1 auto; width: 100%; }
  .pd-main { height: 400px; }
  .cart-grid { flex-direction: column; gap: 24px; }
  .cart-side { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 640px) {
  .plist, .cart { padding-top: 28px; padding-bottom: 60px; }
  .plist-head h1, .cart-title { font-size: 30px; }
  .plist-head p { font-size: 18px; }
  .pfilter { gap: 6px; margin-top: 20px; }
  .pfilter a { height: 34px; padding: 0 14px; font-size: 15.6px; }
  .pbar { flex-wrap: wrap; gap: 10px; }
  .pbar-right { width: 100%; margin-left: 0; justify-content: space-between; }

  .pdetail { padding-bottom: 60px; }
  .pd-main { height: 300px; }
  .pd-name { font-size: 28.8px; }
  .pd-price, .pd-total b { font-size: 30px; }
  .pd-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-cta { flex-direction: column; }
  .pd-rel { margin-top: 52px; }
  .pd-rel h2 { font-size: 24px; }

  .cart-row { flex-wrap: wrap; gap: 12px; padding: 16px 0; }
  .cart-thumb { flex: 0 0 64px; width: 64px; height: 64px; }
  .cart-info { flex: 1 1 60%; }
  .cart-del { order: 3; margin-left: auto; }
  .cart-qty { order: 4; }
  .cart-sum { order: 5; flex: 1 1 auto; }
}

/* 안내 화면 (가이드 · 액자교체 · 공동구매) */
.page { padding-top: 42px; padding-bottom: 90px; max-width: 860px; }
.page-head h1 { font-size: 40.8px; font-weight: 700; letter-spacing: -0.04em; }
.page-head p { margin: 10px 0 0; font-size: 20.4px; line-height: 1.6; color: var(--wf-muted); text-wrap: pretty; }

.panel { margin-top: 34px; padding: 30px 32px; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); background: #fff; }
.panel-hi { background: var(--wf-bg-soft); border-color: transparent; }
.panel h2 { font-size: 25.2px; font-weight: 700; letter-spacing: -0.03em; }
.panel-lead { margin: 12px 0 0; font-size: 18.6px; line-height: 1.7; color: var(--wf-text-2); text-wrap: pretty; }
.panel-note { margin: 16px 0 0; padding: 12px 14px; border-radius: 11px; background: var(--wf-bg-soft); font-size: 15.6px; line-height: 1.65; color: var(--wf-muted); text-wrap: pretty; }
.panel-hi .panel-note { background: #fff; }
.panel-note b { font-weight: 700; color: var(--wf-text-2); }
.panel-cta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: st; }
.steps li { position: relative; padding: 0 0 0 44px; counter-increment: st; }
.steps li + li { margin-top: 18px; }
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: -2px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: var(--wf-primary-soft); color: var(--wf-primary); font-size: 16.8px; font-weight: 800;
}
.steps b { display: block; font-size: 19.2px; font-weight: 700; letter-spacing: -0.03em; }
.steps span { display: block; margin-top: 4px; font-size: 17.4px; line-height: 1.6; color: var(--wf-text-2); text-wrap: pretty; }

.bullets { margin: 16px 0 0; padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 15px; font-size: 18px; line-height: 1.7; color: var(--wf-text-2); text-wrap: pretty; }
.bullets li + li { margin-top: 10px; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 999px; background: #c0c0c8; }
.bullets b { font-weight: 700; color: var(--wf-text); }
.bullets a { color: var(--wf-primary); font-weight: 600; }

.qa { margin-top: 6px; }
.qa > div { padding: 18px 0; border-bottom: 1px solid var(--wf-line-soft); }
.qa > div:last-child { border-bottom: 0; padding-bottom: 0; }
.qa b { font-size: 18.6px; font-weight: 700; letter-spacing: -0.03em; }
.qa p { margin: 7px 0 0; font-size: 17.4px; line-height: 1.7; color: var(--wf-text-2); text-wrap: pretty; }

.sizes-note { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--wf-line-soft); }
.sizes-note b { font-size: 16.8px; font-weight: 700; }
.sizes-note > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.sizes-note span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: var(--wf-pill); background: var(--wf-bg-soft); font-size: 16.8px; font-weight: 600; }
.sizes-note i { font-style: normal; font-size: 14.4px; font-weight: 500; color: var(--wf-muted); }

.gb-now { display: flex; align-items: flex-start; gap: 28px; }
.gb-now > div:first-child { flex: 1 1 auto; min-width: 0; }
.gb-now h2 { font-size: 28.8px; }
.gb-stat { flex: 0 0 auto; display: flex; gap: 10px; }
.gb-stat > div { min-width: 84px; padding: 14px 12px; border-radius: 14px; background: #fff; text-align: center; }
.gb-stat b { display: block; font-size: 26.4px; font-weight: 800; letter-spacing: -0.04em; }
.gb-stat span { display: block; margin-top: 3px; font-size: 14.4px; color: var(--wf-muted); }

@media (max-width: 640px) {
  .page { padding-top: 28px; padding-bottom: 60px; }
  .page-head h1 { font-size: 30px; }
  .page-head p { font-size: 18px; }
  .panel { margin-top: 22px; padding: 22px 20px; }
  .panel h2 { font-size: 21.6px; }
  .panel-cta .btn { width: 100%; }
  .gb-now { flex-direction: column; gap: 20px; }
  .gb-now h2 { font-size: 24px; }
  .gb-stat { width: 100%; }
  .gb-stat > div { flex: 1 1 0; min-width: 0; }
}

/* Shared fictional product photography. */
.pd-main{background:#f2f0ea}.pd-main .concept-product-photo{display:block;width:100%;height:100%;object-fit:contain}
.concept-image-note{font-size:14.4px;line-height:1.7;color:#777;margin:12px 0 0}
.cart-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.guide-concept-photo{display:block;width:100%;max-height:310px;object-fit:cover;border-radius:12px;margin:20px 0}

.hd-nav a.on{color:#1b2fcc;font-weight:700;box-shadow:inset 0 -2px 0 #1b2fcc}.pfilter a.on,.pfilter a.on:hover{background:#e9ecff;color:#1b2fcc;box-shadow:inset 0 0 0 1px #1b2fcc}


/* ── 공동구매 할인 (js/promo.js) ─────────────────────────────────── */
.sum-promo { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: #fff0ee; color: #d63a2f; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: right; }
.gb-was { color: #9a9aa0; font-weight: 400; font-size: .86em; margin-right: 2px; }
.gb-now { color: #d63a2f; }
.gb-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #fff0ee; color: #d63a2f; font-style: normal; font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.gb-bar { background: #0f2fd6; color: #fff; font-size: 13.5px; }
.gb-bar .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.gb-bar b { font-weight: 700; }
.gb-bar-note { color: rgba(255,255,255,.72); font-size: 12px; }
.gb-bar-link { margin-left: auto; color: #fff; text-decoration: underline; font-size: 12.5px; }
@media (max-width: 700px) { .gb-bar .wrap { font-size: 12.5px; } .gb-bar-note { display: none; } }