/* =========================================================================
   KNGS Components — v1.0
   1. Buttons        2. Chips/Badges     3. Product card    4. Bento
   5. Section head   6. Tabs             7. Accordion       8. Table
   9. Sheet/Overlay  10. Toast           11. Skeleton       12. Search field
   13. Stepper       14. Empty state     15. Breadcrumb     16. Hero
   17. Sticky CTA    18. Carousel        19. Forms          20. Callout
   21. Card / spec list / price / misc
   22. Site chrome (layout.js 주입): header, GNB, tabbar, FAB, search overlay,
       quote sheet, footer
   ========================================================================= */

/* ---------- 1. Buttons ---------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: transparent;
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--sp-5);
  border-radius: var(--r-md); border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.1;
  letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), filter var(--dur-2);
  user-select: none; -webkit-user-select: none;
  position: relative; isolation: isolate; overflow: hidden;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active:not(:disabled) { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; }
/* 샤인 스윕 — primary/secondary/naver 위에서 hover 시 한 번 지나감 */
.btn::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.38) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  opacity: 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:is(.btn--primary, .btn--secondary, .btn--naver, .btn--kakao):hover::after { opacity: 1; animation: kngs-shine 900ms var(--ease-out) 1; }
}
@keyframes kngs-shine { from { background-position: -150% 0; } to { background-position: 150% 0; } }
.btn--primary {
  --btn-fg: var(--on-grad-accent); --btn-bd: rgb(255 180 120 / 0.55);
  background: var(--grad-accent); color: var(--btn-fg);
  box-shadow: var(--glow-accent), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.btn--primary:hover { box-shadow: var(--glow-accent-lg), inset 0 1px 0 rgb(255 255 255 / 0.4); filter: saturate(1.08) brightness(1.04); }
.btn--secondary { --btn-bg: var(--brand); --btn-fg: var(--text-on-brand); --btn-bd: rgb(150 180 230 / 0.22); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); }
.btn--secondary:hover { --btn-bg: var(--brand-2); --btn-bd: rgb(150 180 230 / 0.4); }
:root[data-theme="light"] .btn--secondary { --btn-bd: transparent; }
.btn--outline { --btn-bg: rgb(255 255 255 / 0.03); --btn-bd: var(--line-strong); --btn-fg: var(--text); box-shadow: var(--glass-hi); }
.btn--outline:hover { --btn-bd: var(--panel-bd-hover); --btn-bg: rgb(255 138 66 / 0.06); }
:root[data-theme="light"] .btn--outline { --btn-bg: var(--surface); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); }
.btn--ghost:hover { --btn-bg: var(--surface-2); }
.btn--soft { --btn-bg: var(--accent-soft); --btn-fg: var(--accent-text); }
.btn--soft:hover { --btn-bg: var(--accent-soft-2); }
.btn--kakao { --btn-bg: var(--kakao); --btn-fg: var(--kakao-ink); }
.btn--kakao:hover { filter: brightness(0.96); }
.btn--naver { --btn-bg: var(--naver-strong); --btn-fg: #fff; }
.btn--naver:hover { filter: brightness(1.08); }
.btn--on-dark { --btn-bg: rgb(10 18 32 / 0.55); --btn-fg: #fff; --btn-bd: rgb(255 255 255 / 0.24); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1); }
.btn--on-dark:hover { --btn-bg: rgb(255 255 255 / 0.16); --btn-bd: rgb(255 255 255 / 0.4); }
.btn--sm { --btn-h: 38px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--sm svg { width: 18px; height: 18px; }
.btn--lg { --btn-h: 56px; padding: 0 var(--sp-6); font-size: 1.0625rem; border-radius: var(--r-lg); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: var(--btn-h); }
.btn--round { border-radius: var(--r-pill); }
.btn-group { display: flex; gap: var(--sp-2); }
.btn-group > .btn { flex: 1 1 0; min-width: 0; }

/* Icon button (헤더 등) */
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap); border-radius: var(--r-pill);
  color: var(--text); transition: background-color var(--dur-2);
}
.icon-btn:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--glass-bd); }
.icon-btn svg { width: 24px; height: 24px; }
.count-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--grad-accent); color: #1a0b00; font-size: 11px; font-weight: var(--fw-black);
  line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg), 0 0 12px rgb(255 122 46 / 0.7);
}
.count-badge:empty, .count-badge[data-count="0"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .count-badge.is-bump { animation: kngs-bump var(--dur-3) var(--ease-spring); }
}
@keyframes kngs-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- 2. Chips / Badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgb(255 255 255 / 0.025); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
  box-shadow: var(--glass-hi);
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-3);
}
:root[data-theme="light"] .chip:not([aria-pressed="true"], [aria-selected="true"], .is-active) { background: var(--surface); }
.chip svg { width: 16px; height: 16px; }
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-active {
  background: var(--selected-bg); border-color: var(--selected-bd); color: var(--selected-fg);
  box-shadow: 0 0 0 1px rgb(255 138 66 / 0.15), 0 0 18px -4px rgb(255 122 46 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.08);
}
:root[data-theme="light"] .chip:is([aria-pressed="true"], [aria-selected="true"], .is-active) { box-shadow: 0 4px 14px -6px rgb(14 28 48 / 0.5); }
.chip--accent[aria-pressed="true"], .chip--accent.is-active { background: var(--grad-accent); border-color: transparent; color: var(--on-grad-accent); }
.chip__count { font-size: var(--fs-2xs); opacity: 0.7; font-variant-numeric: tabular-nums; }
.chip__x { margin-right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.chip--sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
/* 필터칩 줄: 모바일 가로 스크롤 */
.chip-row {
  display: flex; gap: var(--sp-2); overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-block: 2px;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row--wrap { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
@media (min-width: 1024px) { .chip-row { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 5px;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  background: var(--surface-2); color: var(--text-2); white-space: nowrap;
  border: 1px solid transparent;
}
.badge--best { background: var(--grad-accent); color: var(--on-grad-accent); box-shadow: 0 0 14px -2px rgb(255 122 46 / 0.6); }
.badge--new { background: rgb(124 199 255 / 0.14); color: var(--ice-text); border-color: rgb(124 199 255 / 0.4); }
:root[data-theme="light"] .badge--new { background: var(--navy-900); color: #fff; border-color: transparent; }
.badge--sale { background: var(--danger); color: #fff; }
.badge--cejn, .badge--dnp { background: transparent; border-color: currentColor; }
.badge--cejn::before, .badge--dnp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge--cejn { color: var(--cejn-text); }
.badge--dnp { color: var(--dnp-text); }
.badge--success { background: var(--success-soft); color: var(--success-text); }
.badge--warning { background: var(--warning-soft); color: var(--warning-text); }
.badge--danger { background: var(--danger-soft); color: var(--danger-text); }
.badge--info { background: var(--info-soft); color: var(--info-text); }
.badge--outline { background: transparent; border: 1px solid var(--line-strong); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- 3. Product card ---------- */
.pcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  color: var(--text);
  padding: 7px 7px 10px; border-radius: calc(var(--r-lg) + 4px);
  border: 1px solid transparent;
  background: var(--panel-bg) padding-box, var(--border-grad) border-box;
  box-shadow: var(--panel-shadow);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), background var(--dur-3);
}
.pcard::before { /* 호버 시 그라디언트 보더 발광 */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--border-grad-hot);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: hover) {
  .pcard:hover { --lift: -3px; box-shadow: var(--panel-shadow), 0 22px 44px -22px rgb(242 106 27 / 0.55); }
  .pcard:hover::before, .pcard:focus-within::before { opacity: 1; }
}
.pcard.is-tilting { transition: transform 80ms linear, box-shadow var(--dur-3) var(--ease-out); }
.pcard__media {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--well); box-shadow: var(--well-ring);
  display: grid; place-items: center; isolation: isolate;
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 9%;
  mix-blend-mode: multiply;   /* 흰 배경 제품 사진이 스포트라이트 웰에 자연스럽게 녹음 */
  transition: transform var(--dur-4) var(--ease-out);
}
.pcard__media.is-broken img, .is-broken > img { display: none; }
.pcard__media.is-broken::after, .media-fallback {
  content: ""; width: 34%; aspect-ratio: 1; opacity: 0.35;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.5-3.5L9 20'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.5-3.5L9 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) { .pcard:hover .pcard__media img { transform: scale(1.05); } }
.pcard__badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 1; }
.pcard__body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) 5px 0; flex: 1; }
.pcard__brand { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-3); letter-spacing: var(--ls-mono); text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.pcard__brand::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.pcard__brand[data-brand="CEJN"] { color: var(--cejn-text); }
.pcard__brand[data-brand="DNP"] { color: var(--dnp-text); }
.pcard__name {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.8em; /* 2줄 고정 → 가격/버튼 정렬 */
}
.pcard--row .pcard__name { min-height: 0; }
.pcard__name a { color: inherit; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: calc(var(--r-lg) + 4px); } /* stretched link */
.pcard__name a:focus-visible { outline: none; }
.pcard__name a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.pcard__price { margin-top: 2px; font-size: 1.0625rem; font-weight: var(--fw-black); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pcard__price small { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-3); margin-left: 2px; }
.pcard__price--ask { font-size: var(--fs-sm); color: var(--accent-text); font-weight: var(--fw-bold); }
.pcard__meta { font-size: var(--fs-xs); color: var(--text-3); }
.pcard__actions { position: relative; z-index: 3; margin-top: var(--sp-2); padding-inline: 2px; }
.pcard__quote { width: 100%; }
/* 미디어 위 아이콘 견적담기 (compact) */
.pcard__fab {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); color: var(--text); box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
}
.pcard__fab svg { width: 20px; height: 20px; }
.pcard__fab:hover { background: var(--accent); color: var(--on-accent); }
/* 가로형 (리스트/검색결과) */
.pcard--row { flex-direction: row; gap: var(--sp-3); align-items: center; padding: 7px; }
.pcard--row .pcard__media { width: 84px; flex: none; border-radius: var(--r-md); }
.pcard--row .pcard__body { padding: 0 4px 0 0; }
.pcard:is([aria-hidden="true"], .pcard--skel) { transform: none; }

/* ---------- 4. Bento grid ---------- */
.bento {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
}
.bento__item {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3);
  min-height: 150px; padding: var(--sp-5); border-radius: var(--r-xl);
  background: var(--panel-bg); border: 1px solid var(--panel-bd); color: var(--text); box-shadow: var(--panel-shadow);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3), border-color var(--dur-3);
}
a.bento__item:hover { transform: translateY(-3px); border-color: var(--panel-bd-hover); box-shadow: var(--panel-shadow), 0 20px 40px -20px rgb(242 106 27 / 0.5); }
.bento__item--wide { grid-column: span 2; }
.bento__item--tall { grid-row: span 2; min-height: 316px; }
.bento__item--brand { background: radial-gradient(70% 80% at 100% 0%, rgb(242 106 27 / 0.22), transparent 60%), linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(160deg, var(--navy-800), var(--navy-950)); border-color: rgb(150 180 230 / 0.16); color: #fff; }
.bento__item--brand .bento__desc { color: rgb(255 255 255 / 0.75); }
.bento__item--accent { background: var(--grad-accent); border-color: transparent; color: var(--on-grad-accent); box-shadow: var(--glow-accent); }
.bento__item--accent .bento__desc { color: inherit; opacity: 0.85; }
.bento__item--soft { background: var(--accent-soft); border-color: transparent; }
.bento__item--tint { background: var(--brand-soft); border-color: transparent; }
.bento__kicker { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-mono); text-transform: uppercase; opacity: 0.85; }
.bento__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: -0.015em; color: inherit; }
.bento__item--wide .bento__title, .bento__item--tall .bento__title { font-size: var(--fs-h3); }
.bento__desc { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.bento__icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--glass-bd), var(--glass-hi); }
.bento__item--brand .bento__icon { background: rgb(255 255 255 / 0.12); color: var(--accent-bright); }
.bento__icon svg { width: 24px; height: 24px; }
.bento__media { position: absolute; inset: auto -8% -10% auto; width: 62%; z-index: -1; opacity: 0.95; pointer-events: none; }
.bento__arrow { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgb(127 127 127 / 0.12); }
.bento__arrow svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
  .bento__item { min-height: 200px; padding: var(--sp-6); }
  .bento__item--tall { min-height: 416px; }
  .bento__item--xl { grid-column: span 2; grid-row: span 2; }
}

/* ---------- 5. Section header ---------- */
main { counter-reset: kngs-sec; }
.section-head {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-6); padding-top: var(--sp-5);
  counter-increment: kngs-sec;
}
.section-head::before { /* 정밀 라인 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline-left); pointer-events: none;
}
.section-head::after { /* + 코너 마커 */
  content: ""; position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; pointer-events: none;
  background: linear-gradient(var(--marker), var(--marker)) center / 1px 100% no-repeat, linear-gradient(var(--marker), var(--marker)) center / 100% 1px no-repeat;
}
.section-head--center::before { background: var(--hairline); }
.section-head--center::after { left: 50%; margin-left: -5px; }
.section-head__text { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.section-head .eyebrow::after { /* 섹션 인덱스 좌표 라벨 */
  content: "/ " counter(kngs-sec, decimal-leading-zero);
  content: "/ " counter(kngs-sec, decimal-leading-zero) / "";
  color: var(--label); font-weight: var(--fw-medium);
}
.section-head__title { font-size: var(--fs-h2); letter-spacing: -0.035em; font-weight: var(--fw-black); }
.section-head__desc { color: var(--text-2); font-size: var(--fs-body); max-width: 56ch; }
.section-head__more { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding-inline: 2px; }
.section-head__more:hover { color: var(--accent-text); }
.section-head__more svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.section-head__more:hover svg { transform: translateX(3px); }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .section-head__text { align-items: center; }

/* ---------- 6. Tabs ---------- */
.tabs { display: flex; flex-direction: column; }
.tabs__list {
  display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); position: relative;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative; flex: none; min-height: 48px; padding: 0 var(--sp-4);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-3); white-space: nowrap;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--text); font-weight: var(--fw-bold); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad-accent-h); box-shadow: 0 0 12px 1px rgb(255 122 46 / 0.6); }
.tabs__panel { padding-top: var(--sp-6); }
.tabs--fill .tabs__tab { flex: 1 1 0; }
/* Segmented (pill) 변형 */
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented > * { flex: none; min-height: 38px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-3); }
.segmented > [aria-selected="true"], .segmented > [aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-fg); box-shadow: inset 0 0 0 1px var(--selected-bd), 0 0 16px -4px rgb(255 122 46 / 0.5); }
:root[data-theme="light"] .segmented > :is([aria-selected="true"], [aria-pressed="true"]) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- 7. Accordion (<details>) ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__item > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 60px; padding: var(--sp-4) 0; font-weight: var(--fw-semibold); font-size: var(--fs-body);
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary::after {
  content: ""; flex: none; width: 22px; height: 22px; background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.accordion__item[open] > summary::after { transform: rotate(180deg); }
.accordion__item > summary:hover { color: var(--accent-text); }
.accordion__q { display: flex; gap: var(--sp-3); align-items: baseline; }
.accordion__q::before { content: "Q"; font-family: var(--font-mono); color: var(--accent-text); font-weight: var(--fw-bold); }
.accordion__body { padding: 0 0 var(--sp-5); color: var(--text-2); }
.accordion__body > * + * { margin-top: 0.75em; }
.accordion--card { border: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.accordion--card .accordion__item { border: 1px solid var(--panel-bd); border-radius: var(--r-lg); background: var(--panel-bg); box-shadow: var(--panel-shadow); padding-inline: var(--sp-5); transition: border-color var(--dur-2); }
.accordion--card .accordion__item[open] { border-color: rgb(255 138 66 / 0.35); }
@media (prefers-reduced-motion: no-preference) {
  .accordion__item[open] .accordion__body { animation: kngs-fade-down var(--dur-3) var(--ease-out); }
}
@keyframes kngs-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 8. Table ---------- */
.table-wrap {
  position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--panel-bd); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--panel-shadow);
  overscroll-behavior-x: contain;
}
.table-wrap:focus-visible { outline-offset: 2px; }
.table { width: 100%; min-width: 520px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: 0.02em; white-space: nowrap; border-bottom-color: var(--line); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table th:first-child, .table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: var(--fw-semibold); }
.table thead th:first-child { background: var(--surface-2); z-index: 2; }
.table tbody tr:hover td:first-child { background: var(--surface-2); }
.table--compact th, .table--compact td { padding: 8px 10px; }
.table-hint { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }
.table-hint svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .table-hint { display: none; } }

/* ---------- 9. Bottom sheet / Overlay ---------- */
.sheet {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: flex; align-items: flex-end; justify-content: center;
  visibility: hidden; pointer-events: none;
}
.sheet.is-open { visibility: visible; pointer-events: auto; }
.sheet__backdrop {
  position: absolute; inset: 0; background: var(--overlay); opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet__panel {
  position: relative; width: 100%; max-width: 560px; max-height: min(88dvh, 88vh);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 120px), var(--surface); color: var(--text);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 0.08);
  border: 1px solid var(--glass-bd); border-bottom: 0;
  padding-bottom: var(--safe-bottom);
  transform: translateY(100%); transition: transform 520ms var(--ease-sheet);
}
.sheet__panel::before { /* 상단 발광 헤어라인 */
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: var(--hairline); pointer-events: none;
}
.sheet__panel::after { /* 스프링 오버슈트 시 하단 틈 메움 */
  content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: 48px; background: var(--surface); pointer-events: none;
}
.sheet:not(.is-open) .sheet__panel { transition-timing-function: var(--ease-in-out); transition-duration: var(--dur-3); }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__handle { width: 40px; height: 4px; border-radius: 3px; background: var(--line-strong); margin: 10px auto 2px; flex: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-5); flex: none; }
.sheet__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-5) var(--sp-5); }
.sheet__foot { flex: none; padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-2); }
/* 데스크톱: 우측 드로어 */
@media (min-width: 1024px) {
  .sheet { justify-content: flex-end; align-items: stretch; }
  .sheet__panel { max-width: 440px; max-height: none; height: 100%; border-radius: var(--r-xl) 0 0 var(--r-xl); transform: translateX(100%); padding-bottom: 0; border: 1px solid var(--glass-bd); border-right: 0; transition-timing-function: var(--ease-out); }
  .sheet__panel::after { display: none; }
  .sheet__panel::before { left: -1px; right: auto; top: 10%; bottom: 10%; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgb(255 138 66 / 0.5), transparent); }
  .sheet__handle { display: none; }
  .sheet__head { padding-top: var(--sp-5); }
  .sheet--center { justify-content: center; align-items: center; }
  .sheet--center .sheet__panel { height: auto; max-height: 80vh; border-radius: var(--r-xl); transform: translateY(24px) scale(0.98); opacity: 0; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2); }
  .sheet--center.is-open .sheet__panel { opacity: 1; }
}

/* ---------- 10. Toast ---------- */
.toast-region {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  bottom: calc(var(--bottom-ui) + var(--sp-4));
  width: min(calc(100% - var(--gutter) * 2), 420px);
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px var(--sp-4); border-radius: var(--r-md);
  background: rgb(14 24 42 / 0.94); color: #fff; box-shadow: var(--shadow-lg), 0 0 0 1px rgb(170 196 240 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.08);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); pointer-events: auto;
  animation: kngs-toast-in var(--dur-4) var(--ease-spring);
}
.toast svg { width: 20px; height: 20px; flex: none; color: var(--accent-bright); }
.toast__action { margin-left: auto; font-weight: var(--fw-bold); color: #ffa266; padding: 4px 6px; white-space: nowrap; min-height: 36px; }
.toast.is-leaving { animation: kngs-toast-out var(--dur-2) var(--ease-in-out) forwards; }
@keyframes kngs-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes kngs-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- 11. Skeleton ---------- */
.skeleton {
  display: block; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 50%, var(--skeleton-a) 100%) 0 0 / 200% 100%;
  animation: kngs-shimmer 1.4s linear infinite;
  color: transparent !important;
}
.skeleton--text { height: 0.9em; margin-block: 0.3em; }
.skeleton--title { height: 1.4em; width: 60%; }
.skeleton--media { aspect-ratio: 1; border-radius: var(--r-lg); }
.skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
@keyframes kngs-shimmer { to { background-position: -200% 0; } }

/* ---------- 12. Search field ---------- */
.search-field {
  position: relative; display: flex; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-2) 0 var(--sp-4); border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--glass-hi);
  transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-3);
}
.search-field:focus-within { border-color: rgb(255 138 66 / 0.7); background: var(--surface); box-shadow: 0 0 0 4px rgb(255 122 46 / 0.14), 0 0 24px -6px rgb(255 122 46 / 0.5); }
.search-field > svg { width: 22px; height: 22px; color: var(--text-3); flex: none; }
.search-field input {
  flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; outline: none;
  font-size: 1.0625rem; font-weight: var(--fw-medium);
}
.search-field input::placeholder { color: var(--text-3); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field__clear { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
.search-field__clear svg { width: 18px; height: 18px; }
.search-field--outline { background: var(--surface); border-color: var(--line); }
/* 히어로용 가짜 검색 버튼 (탭 시 오버레이 열기) */
.search-launch { width: 100%; font-size: 1rem; justify-content: flex-start; color: var(--text-3); font-weight: var(--fw-medium); cursor: text; text-align: left; box-shadow: var(--panel-shadow); background: var(--panel-bg); border-color: var(--panel-bd); }
.search-launch:hover { border-color: var(--panel-bd-hover); }

/* ---------- 13. Stepper (수량) ---------- */
.stepper {
  display: inline-flex; align-items: center; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface-2); overflow: hidden; box-shadow: var(--glass-hi);
}
.stepper button { width: 40px; height: 100%; display: grid; place-items: center; color: var(--text-2); }
.stepper button:hover:not(:disabled) { background: var(--surface-3); color: var(--accent-text); }
.stepper button:disabled { opacity: 0.35; }
.stepper button svg { width: 18px; height: 18px; }
.stepper input {
  width: 44px; height: 100%; border: 0; background: transparent; text-align: center;
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper--lg { height: 48px; }
.stepper--lg button { width: 48px; }

/* ---------- 14. Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-4); color: var(--text-2); }
.empty__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--surface-3), var(--surface-2)); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--glass-bd), 0 0 0 8px rgb(255 138 66 / 0.05), 0 0 0 16px rgb(255 138 66 / 0.03); }
.empty__icon svg { width: 32px; height: 32px; }
.empty__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text); }
.empty__desc { font-size: var(--fs-sm); max-width: 32ch; }
.empty .btn { margin-top: var(--sp-2); }

/* ---------- 15. Breadcrumb ---------- */
.breadcrumb { font-size: var(--fs-xs); color: var(--text-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 2px; }
.breadcrumb li + li::before { content: ""; width: 14px; height: 14px; background: currentColor; opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.breadcrumb a { color: var(--text-3); padding: 6px 2px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text-2); font-weight: var(--fw-semibold); }

/* ---------- 16. Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--navy-900), var(--ink-950)); color: #fff;
  padding-block: var(--sp-10) var(--sp-12);
}
.hero::before { /* 블루프린트 그리드 + 오렌지 글로우 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 85% 10%, rgb(242 106 27 / 0.28), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(61 106 163 / 0.35), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 32px 32px;
}
.hero__inner { display: grid; gap: var(--sp-8); align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero .eyebrow { color: var(--orange-400); }
.hero__title { font-size: var(--fs-display); font-weight: var(--fw-black); line-height: 1.08; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.hero__title em { font-style: normal; background: var(--grad-accent-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: var(--fs-lead); color: rgb(255 255 255 / 0.78); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.hero__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: rgb(255 255 255 / 0.06); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.hero__stat { padding-top: var(--sp-3); border-top: 1px solid rgb(255 255 255 / 0.18); }
.hero__stat b { display: block; font-size: var(--fs-h3); font-weight: var(--fw-black); color: #fff; }
.hero__stat span { font-size: var(--fs-xs); color: rgb(255 255 255 / 0.66); }
.hero--compact { padding-block: var(--sp-8); }
.hero--compact .hero__title { font-size: var(--fs-h1); }
.hero--light { background: var(--surface); color: var(--text); }
.hero--light::before { background: radial-gradient(60% 60% at 90% 0%, var(--accent-soft-2), transparent 70%); }
.hero--light .hero__title { color: var(--text); }
.hero--light .hero__lead { color: var(--text-2); }
.hero--light .eyebrow { color: var(--accent-text); }
@media (min-width: 1024px) {
  .hero { padding-block: var(--sp-20) var(--sp-24); }
  .hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--sp-16); }
  .hero--compact { padding-block: var(--sp-12); }
}

/* ---------- 17. Sticky bottom CTA bar ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; z-index: var(--z-sticky-cta);
  bottom: var(--bottom-ui);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) max(var(--gutter), var(--safe-left)) var(--sp-3) max(var(--gutter), var(--safe-right));
  background: var(--glass); border-top: 1px solid var(--glass-bd);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: var(--shadow-up), var(--glass-hi);
}
.sticky-cta .btn { flex: 1 1 0; min-width: 0; }
.sticky-cta .btn--icon { flex: none; }
.sticky-cta__price { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; flex: none; }
.sticky-cta__price b { font-size: 1.125rem; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sticky-cta__price span { font-size: var(--fs-2xs); color: var(--text-3); }
body:has(.sticky-cta) { padding-bottom: calc(var(--bottom-ui) + 72px); }
@media (min-width: 1024px) {
  /* 데스크톱: 하단 고정 해제하고 문서 흐름 안에서 노출 (또는 .sticky-cta--desktop 으로 유지) */
  .sticky-cta:not(.sticky-cta--desktop) { position: static; background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body:has(.sticky-cta:not(.sticky-cta--desktop)) { padding-bottom: 0; }
}

/* ---------- 18. Carousel (scroll-snap) ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--item-w, 42%);
  gap: var(--sp-3); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter); padding-block: 6px var(--sp-3);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; min-width: 0; }
.carousel--wide { --item-w: 84%; }
.carousel--cards { --item-w: 70%; }
.carousel__nav { display: none; gap: var(--sp-2); }
.carousel__btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); box-shadow: var(--glass-hi); transition: border-color var(--dur-2), box-shadow var(--dur-3), color var(--dur-2); }
.carousel__btn:hover:not(:disabled) { border-color: var(--panel-bd-hover); color: var(--accent-text); box-shadow: var(--glass-hi), 0 0 16px -4px rgb(255 122 46 / 0.5); }
.carousel__btn:disabled { opacity: 0.35; }
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--sp-3); }
.carousel__dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width var(--dur-2), background-color var(--dur-2); }
.carousel__dots span.is-active { width: 18px; background: var(--grad-accent-h); box-shadow: 0 0 8px rgb(255 122 46 / 0.6); }
@media (min-width: 768px) { .carousel__track { --item-w: 30%; } .carousel--wide .carousel__track, .carousel--wide { --item-w: 48%; } }
@media (min-width: 1024px) {
  .carousel__track { --item-w: calc((100% - var(--sp-5) * 3) / 4); gap: var(--sp-5); margin-inline: -8px; padding-inline: 8px; scroll-padding-inline: 8px; padding-block: 8px 16px; }
  .carousel--wide .carousel__track { --item-w: calc((100% - var(--sp-5)) / 2); }
  .carousel--cards .carousel__track { --item-w: calc((100% - var(--sp-5) * 2) / 3); }
  .carousel__nav { display: flex; }
}

/* ---------- 19. Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.label .req { color: var(--danger-text); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font-size: 1rem; transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
}
:root[data-theme="light"] :is(.input, .select, .textarea) { background-color: var(--surface); box-shadow: none; }
.textarea { padding: var(--sp-3) var(--sp-4); min-height: 132px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9cb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring); background-color: var(--surface); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled { background: var(--surface-2); color: var(--text-3); }
.help { font-size: var(--fs-xs); color: var(--text-3); }
.error-msg { font-size: var(--fs-xs); color: var(--danger-text); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 4px; }
.input-group { display: flex; gap: var(--sp-2); }
.input-group > .input { flex: 1; }
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }

.check, .radio { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding-block: 10px; cursor: pointer; font-size: var(--fs-body); }
.check input, .radio input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.check input { border-radius: 6px; }
.radio input { border-radius: 50%; }
.check input:checked, .radio input:checked { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px -2px rgb(255 122 46 / 0.6); }
.check input:checked::after { content: ""; width: 12px; height: 12px; background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.radio input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); }
.check input:focus-visible, .radio input:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; min-height: var(--tap); }
.switch input { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 14px; background: var(--line-strong); position: relative; transition: background-color var(--dur-2); flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-2) var(--ease-spring); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(20px); }
.switch input:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* 선택 카드 (문의 유형 등) */
.choice { position: relative; display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-bg); cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-3); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px rgb(255 138 66 / 0.3), 0 0 22px -8px rgb(255 122 46 / 0.6); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* ---------- 20. Callout ---------- */
.callout {
  --c-bg: var(--info-soft); --c-fg: var(--info-text); --c-bd: var(--info);
  position: relative; overflow: hidden;
  display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 3px); border-radius: var(--r-md);
  background: var(--c-bg); color: var(--text); border: 1px solid color-mix(in srgb, var(--c-bd) 28%, transparent);
  font-size: var(--fs-sm); line-height: 1.55;
}
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-bd); box-shadow: 0 0 12px var(--c-bd); }
.callout > svg { width: 22px; height: 22px; flex: none; color: var(--c-fg); margin-top: 1px; }
.callout__title { font-weight: var(--fw-bold); color: var(--c-fg); margin-bottom: 2px; font-size: var(--fs-body); }
.callout--success { --c-bg: var(--success-soft); --c-fg: var(--success-text); --c-bd: var(--success); }
.callout--warning { --c-bg: var(--warning-soft); --c-fg: var(--warning-text); --c-bd: var(--warning); }
.callout--danger  { --c-bg: var(--danger-soft);  --c-fg: var(--danger-text);  --c-bd: var(--danger); }
.callout--accent  { --c-bg: var(--accent-soft);  --c-fg: var(--accent-text);  --c-bd: var(--accent-bright); }

/* ---------- 21. Card / spec list / price / misc ---------- */
.card { background: var(--panel-bg); border: 1px solid var(--panel-bd); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--panel-shadow); }
.card--flat { border: 0; background: var(--surface-2); box-shadow: none; }
.card--hover { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3), border-color var(--dur-3); }
.card--hover:hover { transform: translateY(-2px); border-color: var(--panel-bd-hover); box-shadow: var(--panel-shadow), 0 18px 36px -20px rgb(242 106 27 / 0.5); }
.card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }

.spec-list { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.spec-list dt, .spec-list dd { padding: 12px 0; border-bottom: 1px solid var(--line-2); margin: 0; }
.spec-list dt { color: var(--text-3); font-weight: var(--fw-semibold); padding-right: var(--sp-4); }
.spec-list dt::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 2px 0; background: var(--accent-bright); border-radius: 1px; vertical-align: middle; }
.spec-list dd { color: var(--text); font-variant-numeric: tabular-nums; }

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; }
.price__now { font-size: var(--fs-h2); font-weight: var(--fw-black); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.price__now small { font-size: 0.5em; font-weight: var(--fw-bold); margin-left: 2px; }
.price__note { font-size: var(--fs-xs); color: var(--text-3); }

.divider { height: 1px; background: var(--hairline); border: 0; margin: var(--sp-4) 0; }
.kbd-hint { font-size: var(--fs-2xs); color: var(--text-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }

/* 채널 바로가기 (구매처 버튼) */
.channel-btn { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 0 var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--panel-bd); background: var(--panel-bg); box-shadow: var(--panel-shadow); font-weight: var(--fw-bold); transition: border-color var(--dur-2), box-shadow var(--dur-3), transform var(--dur-2) var(--ease-out); }
.channel-btn:hover { border-color: var(--panel-bd-hover); box-shadow: var(--panel-shadow), 0 12px 28px -16px rgb(242 106 27 / 0.55); transform: translateY(-1px); }
.channel-btn__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.channel-btn__icon svg { width: 18px; height: 18px; }
.channel-btn__sub { display: block; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); }
.channel-btn > svg:last-child { margin-left: auto; width: 18px; height: 18px; color: var(--text-3); }

/* =========================================================================
   22. Site chrome — layout.js 가 주입하는 요소
   ========================================================================= */

/* layout.js 가 #site-header 래퍼 안에 헤더를 주입 → 래퍼를 contents 로 풀어야 sticky 가 body 기준으로 동작 */
#site-header { display: contents; }
/* Header — 상단: 풀폭 글래스 / 스크롤: 플로팅 글래스 바 (전체 높이는 --header-h-compact 유지) */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  padding-top: var(--safe-top);
  transition: padding var(--dur-4) var(--ease-out);
}
.site-header::before { /* 상단(비스크롤) 풀폭 글래스 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass); border-bottom: 1px solid var(--line-2);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  transition: opacity var(--dur-3) var(--ease-out);
}
.site-header.is-scrolled { padding-top: calc(var(--safe-top) + var(--header-float-gap)); }
.site-header.is-scrolled::before { opacity: 0; visibility: hidden; transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.site-header__bar {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--header-h);
  transition: height var(--dur-4) var(--ease-out), max-width var(--dur-4) var(--ease-out), border-radius var(--dur-4), background-color var(--dur-3), box-shadow var(--dur-3), border-color var(--dur-3);
  border: 1px solid transparent; border-radius: 0;
}
.site-header.is-scrolled .site-header__bar {
  height: calc(var(--header-h-compact) - var(--header-float-gap));
  width: calc(100% - 16px); max-width: calc(var(--container) + var(--gutter) * 2 - 16px);
  padding-inline: 12px 6px; border-radius: 16px;
  background: var(--glass-strong); border-color: var(--glass-bd);
  box-shadow: var(--shadow-md), var(--glass-hi);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.site-header.is-scrolled .site-header__bar::after { /* 하단 발광 헤어라인 */
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 1px; background: var(--hairline); pointer-events: none;
}
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 2px; margin-right: -8px; }
.site-header.is-scrolled .site-header__actions { margin-right: 0; }
.site-header.is-scrolled .icon-btn { width: 40px; height: 40px; }

/* Logo lockup — KN 엠블럼(원본) + KNGS 워드 + 모노 태그라인 */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); min-height: var(--tap); flex: none; }
.logo__emblem { height: 26px; width: auto; flex: none; transition: height var(--dur-3) var(--ease-out); }
.logo__text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.logo__word { font-size: 1.1875rem; font-weight: var(--fw-black); letter-spacing: -0.01em; line-height: 1; color: var(--text); }
.logo__tag {
  display: none;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); line-height: 1; white-space: nowrap;
  max-height: 12px; overflow: hidden; transition: opacity var(--dur-2), max-height var(--dur-3);
}
/* 엠블럼은 원본 컬러 그대로(라이트·다크 공통). 다크 배경 위에서도 파랑·빨강 판독 확인 → 플레이트/재채색 없음 */
.logo__plate { display: inline-grid; place-items: center; flex: none; }
.site-header.is-scrolled .logo__emblem { height: 22px; }
.site-header.is-scrolled .logo__tag { opacity: 0; max-height: 0; }
.site-header.is-scrolled .logo__text { gap: 0; }
@media (min-width: 1024px) {
  .logo__emblem { height: 28px; }
  .logo__word { font-size: 1.3125rem; }
  .logo__tag { display: block; }
  .site-header.is-scrolled .logo__emblem { height: 24px; }
}
/* 레거시 SVG 워드마크 (styleguide 등) */
.logo__mark { height: 22px; width: auto; }

.gnb { display: none; }
@media (min-width: 1024px) {
  .gnb { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-10); }
  .gnb a { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4); font-weight: var(--fw-semibold); color: var(--text-2); border-radius: var(--r-pill); transition: color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-3); }
  .gnb a:hover { color: var(--text); background: var(--surface-2); }
  .gnb a[aria-current="page"] { color: var(--text); font-weight: var(--fw-bold); }
  .gnb a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--grad-accent-h); box-shadow: 0 0 10px 1px rgb(255 122 46 / 0.75); }
  .gnb .gnb__cta { margin-left: var(--sp-2); color: var(--accent-text); box-shadow: inset 0 0 0 1px rgb(255 138 66 / 0.45); background: rgb(255 122 46 / 0.08); }
  .gnb .gnb__cta:hover { background: rgb(255 122 46 / 0.16); color: var(--accent-text); box-shadow: inset 0 0 0 1px rgb(255 138 66 / 0.7), 0 0 18px -4px rgb(255 122 46 / 0.6); }
  .gnb .gnb__cta[aria-current="page"]::after { display: none; }
  :root[data-theme="light"] .gnb .gnb__cta { background: var(--accent-soft); }
}
.site-header .theme-btn { display: none; }
@media (min-width: 1024px) { .site-header .theme-btn { display: inline-grid; } .site-header .menu-btn { display: none; } }
.theme-btn .i-sun { display: none; }
:root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
:root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }

/* Mobile tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--bottom-ui); padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--glass-strong); border-top: 1px solid var(--glass-bd);
  box-shadow: var(--shadow-up), var(--glass-hi);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--hairline); opacity: 0.7; pointer-events: none; }
.tabbar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabbar-h); color: var(--text-3); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: -0.01em;
  transition: color var(--dur-2);
}
.tabbar__item svg { width: 24px; height: 24px; transition: transform var(--dur-2) var(--ease-spring); }
.tabbar__item[aria-current="page"] { color: var(--text); font-weight: var(--fw-bold); }
.tabbar__item[aria-current="page"] svg { color: var(--accent-bright); filter: drop-shadow(0 0 6px rgb(255 122 46 / 0.65)); }
.tabbar__item::before { /* 활성 탭 글로우 인디케이터 */
  content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 2px; margin-left: -14px; border-radius: 0 0 3px 3px;
  background: var(--grad-accent-h); box-shadow: 0 0 12px 2px rgb(255 122 46 / 0.6), 0 6px 18px 2px rgb(255 122 46 / 0.25);
  transform: scaleX(0); opacity: 0; transition: transform var(--dur-4) var(--ease-spring), opacity var(--dur-2);
}
.tabbar__item[aria-current="page"]::before { transform: scaleX(1); opacity: 1; }
:root[data-theme="light"] .tabbar__item[aria-current="page"] svg { color: var(--orange-600); filter: none; }
.tabbar__item:active svg { transform: scale(0.88); }
.tabbar__icon { position: relative; }
.tabbar .count-badge { top: -5px; right: -11px; }
@media (min-width: 1024px) { .tabbar { display: none; } }

/* Floating consult (FAB) */
.fab {
  position: fixed; z-index: var(--z-fab);
  right: max(var(--sp-4), var(--safe-right));
  bottom: calc(var(--bottom-ui) + var(--sp-4));
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2);
}
body:has(.sticky-cta) .fab { bottom: calc(var(--bottom-ui) + 72px + var(--sp-3)); }
@media (min-width: 1024px) {
  .fab { bottom: var(--sp-6); right: var(--sp-6); }
  body:has(.sticky-cta) .fab { bottom: var(--sp-6); }
  body:has(.sticky-cta--desktop) .fab { bottom: calc(72px + var(--sp-6)); }
}
.fab__toggle {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-accent); color: var(--on-grad-accent); box-shadow: var(--shadow-lg), var(--glow-accent), inset 0 1px 0 rgb(255 255 255 / 0.35);
  transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3);
}
.fab__toggle:hover { box-shadow: var(--shadow-lg), var(--glow-accent-lg), inset 0 1px 0 rgb(255 255 255 / 0.4); }
.fab__toggle svg { width: 26px; height: 26px; transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2); grid-area: 1 / 1; }
.fab__toggle .i-close { opacity: 0; transform: rotate(-90deg); }
.fab.is-open .fab__toggle .i-chat { opacity: 0; transform: rotate(90deg); }
.fab.is-open .fab__toggle .i-close { opacity: 1; transform: none; }
.fab__toggle:active { transform: scale(0.94); }
.fab__menu { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); visibility: hidden; }
.fab.is-open .fab__menu { visibility: visible; }
.fab__action {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-4) 0 var(--sp-2);
  border-radius: var(--r-pill); background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow-md), var(--glass-hi);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.fab.is-open .fab__action { opacity: 1; transform: none; }
.fab.is-open .fab__action:nth-child(2) { transition-delay: 30ms; }
.fab.is-open .fab__action:nth-child(1) { transition-delay: 60ms; }
.fab__action-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.fab__action-icon svg { width: 18px; height: 18px; }
.fab__action--kakao .fab__action-icon { background: var(--kakao); color: var(--kakao-ink); }
.fab__action--naver .fab__action-icon { background: var(--naver); color: #fff; }
.fab__action--tel .fab__action-icon { background: var(--accent); color: var(--on-accent); }
.fab__action small { display: block; font-size: 11px; font-weight: var(--fw-medium); color: var(--text-3); line-height: 1.2; }
.fab__action span { line-height: 1.2; text-align: left; }
.fab-scrim { position: fixed; inset: 0; z-index: calc(var(--z-fab) - 1); background: rgb(3 7 14 / 0.45); opacity: 0; visibility: hidden; transition: opacity var(--dur-2); }
.fab-scrim.is-open { opacity: 1; visibility: visible; }

/* Search overlay */
.search-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--bg); display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.search-overlay.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.search-overlay__head { position: relative; flex: none; display: flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); background: var(--surface); }
.search-overlay__head .search-field { flex: 1; min-width: 0; }
.search-overlay__close { flex: none; font-weight: var(--fw-semibold); color: var(--text-2); min-height: var(--tap); padding: 0 var(--sp-2); }
.search-overlay__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-block: var(--sp-5) calc(var(--sp-8) + var(--safe-bottom)); }
.search-overlay__label { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-3); letter-spacing: var(--ls-mono); margin-bottom: var(--sp-3); display: flex; justify-content: space-between; align-items: center; }
.search-overlay__label button { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); min-height: 36px; }
.search-overlay__label button { font-weight: var(--fw-semibold); color: var(--text-3); padding: 4px; }
.search-results { display: flex; flex-direction: column; }
.search-result {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); margin-inline: calc(var(--sp-2) * -1);
  border-radius: var(--r-md); color: var(--text);
}
.search-result:hover, .search-result.is-active { background: var(--surface-2); }
.search-result__media { width: 60px; height: 60px; flex: none; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--well-ring); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.search-result__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.search-result__media.is-broken::after { content: ""; width: 24px; height: 24px; border-radius: 4px; background: var(--surface-3); }
.search-result__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.search-result__brand { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-3); }
.search-result__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.search-result__name mark { background: none; color: var(--accent-text); font-weight: var(--fw-bold); }
.search-result__price { font-size: var(--fs-sm); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.search-overlay__more { margin-top: var(--sp-4); }
@media (min-width: 1024px) {
  .search-overlay { background: var(--overlay); padding: 10vh var(--gutter) 0; align-items: center; }
  .search-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .search-overlay__panel { width: 100%; max-width: 720px; max-height: 76vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-bd), 0 0 80px -30px rgb(242 106 27 / 0.45); overflow: hidden; }
  .search-overlay__head { padding-inline: var(--sp-5); }
  .search-overlay__head .container, .search-overlay__body .container { padding-inline: 0; }
  .search-overlay__body { padding: var(--sp-5); }
}
.search-overlay__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-width: 1024px) { .search-overlay__panel { flex: 0 1 auto; } }

/* Quote sheet items */
.quote-list { display: flex; flex-direction: column; }
.quote-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-3); padding-block: var(--sp-4); border-bottom: 1px solid var(--line-2); }
.quote-item:last-child { border-bottom: 0; }
.quote-item__media { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--well-ring); overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.quote-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.quote-item__media.is-broken::after { content: ""; width: 24px; height: 24px; border-radius: 4px; background: var(--surface-3); }
.quote-item__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quote-item__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35; }
.quote-item__name a:hover { color: var(--accent-text); }
.quote-item__opt { font-size: var(--fs-xs); color: var(--text-3); }
.quote-item__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.quote-item__del { font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-semibold); min-height: 40px; padding: 0 var(--sp-2); display: inline-flex; align-items: center; gap: 4px; }
.quote-item__del:hover { color: var(--danger-text); }
.quote-item__del svg { width: 16px; height: 16px; }
.quote-summary { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--text-2); }
.quote-summary b { color: var(--text); }

/* Mobile menu sheet */
.menu-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.menu-nav a { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 0 var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--glass-hi); font-weight: var(--fw-bold); }
.menu-nav a svg { width: 22px; height: 22px; color: var(--brand-text); }
.menu-nav a[aria-current="page"] { background: var(--selected-bg); color: var(--selected-fg); border-color: var(--selected-bd); box-shadow: 0 0 18px -6px rgb(255 122 46 / 0.55); }
.menu-nav a[aria-current="page"] svg { color: var(--accent-text); }
:root[data-theme="light"] .menu-nav a[aria-current="page"] svg { color: var(--orange-400); }
.menu-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line-2); font-weight: var(--fw-semibold); }

/* Footer */
.site-footer {
  position: relative; isolation: isolate;
  background:
    radial-gradient(60% 70% at 100% 0%, rgb(242 106 27 / 0.1), transparent 60%),
    linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--ink-1000);
  color: rgb(255 255 255 / 0.72); font-size: var(--fs-sm); margin-top: var(--section-y);
}
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(148 178 230 / 0.25) 20%, rgb(255 138 66 / 0.6) 50%, rgb(148 178 230 / 0.25) 80%, transparent); }
:root[data-theme="light"] .site-footer { background:
    radial-gradient(60% 70% at 100% 0%, rgb(242 106 27 / 0.14), transparent 60%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--navy-950); }
.site-footer a { color: inherit; }
.site-footer a:hover { color: #fff; }
.footer__top { display: grid; gap: var(--sp-8); padding-block: var(--sp-12) var(--sp-8); }
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__brand .logo { color: #fff; }
.footer__brand .logo__word { color: #fff; }
.footer__brand .logo__tag { display: block; color: rgb(255 255 255 / 0.6); }
.footer__brand p { max-width: 36ch; }
.footer__cs { display: flex; flex-direction: column; gap: 6px; }
.footer__cs-title, .footer__col-title { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-mono); color: rgb(255 255 255 / 0.6); text-transform: uppercase; margin-bottom: var(--sp-1); }
.footer__tel { font-size: var(--fs-h2); font-weight: var(--fw-black); color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer__tel svg { width: 26px; height: 26px; color: var(--orange-400); filter: drop-shadow(0 0 8px rgb(255 122 46 / 0.6)); }
.footer__cs-time { line-height: 1.6; }
.footer__channels { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer__channel { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 var(--sp-4) 0 var(--sp-3); border-radius: var(--r-pill); background: rgb(255 255 255 / 0.05); color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); border: 1px solid rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); transition: border-color var(--dur-2), background-color var(--dur-2); }
.footer__channel:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 138 66 / 0.5); }
.footer__channel svg { width: 18px; height: 18px; }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.footer__links ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.footer__links a { display: inline-flex; align-items: center; min-height: 36px; color: rgb(255 255 255 / 0.78); }
.footer__biz { border-top: 1px solid rgb(255 255 255 / 0.1); padding-block: var(--sp-6) var(--sp-8); font-size: var(--fs-xs); line-height: 1.7; color: rgb(255 255 255 / 0.58); }
.footer__biz dl { display: flex; flex-wrap: wrap; column-gap: var(--sp-4); row-gap: 2px; }
.footer__biz dl > div { display: inline-flex; gap: 6px; }
.footer__biz dt { color: rgb(255 255 255 / 0.55); flex: none; white-space: nowrap; }
.footer__biz dd { margin: 0; color: rgb(255 255 255 / 0.7); }
.footer__copy { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.footer__group { color: rgb(255 255 255 / 0.5); }
.footer__theme { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / 0.16); color: rgb(255 255 255 / 0.8); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.footer__theme svg { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: 1.3fr 1fr 1.2fr; gap: var(--sp-12); padding-block: var(--sp-16) var(--sp-10); }
  .footer__links { grid-template-columns: 1fr 1fr; }
}
.quote-item__price { margin-left: auto; font-variant-numeric: tabular-nums; }
.quote-item__ask { margin-left: auto; font-size: .8125rem; color: var(--text-3); }

/* 카테고리 시트 (하단 탭) */
.cat-sheet { display: grid; gap: 2px; }
.cat-sheet__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 4px; border-bottom: 1px solid var(--line-2); color: var(--text); min-height: 48px; align-items: center; }
.cat-sheet__item b { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.cat-sheet__item span { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.cat-sheet__item small { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.cat-sheet__item--all b { color: var(--accent-text); }
.cat-sheet__more { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* v3: 장바구니 배송비·무료배송 진행 */
.quote-ship { display: grid; gap: 6px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-2); font-size: var(--fs-sm); }
.quote-ship[hidden] { display: none; }
.quote-ship__row { display: flex; justify-content: space-between; color: var(--text-2); }
.quote-ship__row b { font-variant-numeric: tabular-nums; color: var(--text); }
.quote-ship__row--total b { font-size: var(--fs-h4); font-weight: var(--fw-black); }
.quote-ship__msg { font-size: var(--fs-xs); color: var(--text-2); margin: 2px 0 0; }
.quote-ship__msg b { color: var(--accent-text); }
.quote-ship__bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.quote-ship__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--dur-3) var(--ease-out); }

/* v3: 상품·주문 화면은 구매에 집중 — 모바일 탭바·상담 버튼 숨김 (하단 구매바만) */
@media (max-width: 1023.98px) {
  body[data-page="product"], body[data-page="checkout"] { --tabbar-h: 0px; }
  body[data-page="product"] .tabbar, body[data-page="checkout"] .tabbar,
  body[data-page="product"] .fab, body[data-page="checkout"] .fab { display: none !important; }
}
@media (max-width: 1023.98px) {
  body[data-page="product"], body[data-page="checkout"] { --bottom-ui: var(--safe-bottom); }
}

/* v3 타이포: 가격 — 숫자 800·자간 -0.01em, 원 0.68em/700, '부터'는 별도 회색 13px */
.price__now { letter-spacing: -0.01em; }
.price__now small { font-size: 0.68em; font-weight: var(--fw-bold); margin-left: 1px; }
.price__from { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); margin-left: 4px; align-self: flex-end; padding-bottom: 0.35em; }
.pcard__price small { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); margin-left: 3px; }
.sticky-cta__price b small { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-3); }
/* 한글 본문 줄바꿈 */
body { word-break: keep-all; overflow-wrap: break-word; text-rendering: auto; }

/* v3 카드: 카드 전체가 링크, 버튼 대신 빠른 담기 아이콘(옵션 없는 상품만) */
.pcard__actions { display: none; }
.pcard__add { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pcard__add::before { content: ""; position: absolute; inset: -4px; }   /* 터치 영역 48px */
.pcard__add svg { width: 18px; height: 18px; }
.pcard__add:hover { border-color: var(--line-strong); }
.pcard__add { top: 10px; bottom: auto; }
/* v3 타이포: 카드 */
.pcard__brand { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: var(--fs-2xs); }
.pcard__brand::before { box-shadow: none; }
.pcard__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: -0.005em; color: var(--text); }
.pcard__price { font-size: 1.125rem; letter-spacing: -0.01em; }

/* v3 장식 절제: 발광·광택 제거, 단색 버튼·플랫 카드 (오렌지는 주 구매 버튼·배지에만) */
.btn--primary { --btn-bd: transparent; box-shadow: none; }
.btn--primary:hover { box-shadow: none; filter: none; background: linear-gradient(var(--accent-hover), var(--accent-hover)); }
.btn:is(.btn--primary, .btn--secondary, .btn--naver, .btn--kakao)::after { display: none; }
.btn { font-weight: var(--fw-bold); letter-spacing: 0; }
.count-badge { color: var(--on-accent); box-shadow: 0 0 0 2px var(--bg); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-active { box-shadow: none; }
.badge--best { box-shadow: none; }
.pcard:hover { --lift: 0px; box-shadow: none; border-color: var(--line-strong); }
.tabs__tab[aria-selected="true"]::after { box-shadow: none; }
.segmented > [aria-selected="true"], .segmented > [aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--selected-bd); }
.carousel__btn:hover:not(:disabled), .carousel__dots span.is-active { box-shadow: none; }
.check input:checked, .radio input:checked { box-shadow: none; }
.choice:has(input:checked) { box-shadow: 0 0 0 1px var(--accent); }
.search-field:focus-within { box-shadow: 0 0 0 3px var(--accent-soft-2); border-color: var(--accent); }
.empty__icon { box-shadow: none; }
.card--hover:hover, a.bento__item:hover, .channel-btn:hover { transform: none; box-shadow: none; }
.accordion--card .accordion__item[open] { border-color: var(--line-strong); }