/* 온빛 — 시험작 01 (2026-10-22 다시 짬: 사진으로 · 붙잡기 0 · 머리 늘 고정 · 상품 페이지) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; margin: 0; font-weight: inherit; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

:root {
  --bg: #0C0B09; --surface: #15130F; --surface-2: #1C1914; --ink: #F1EADC; --ink-soft: #A89F90;
  --line: rgb(241 234 220 / .12); --accent: #E7B470;
  --font-display: 'Hahmlet', serif; --font-body: 'IBM Plex Sans KR', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: min(1200px, calc(100% - 2 * clamp(16px, 4vw, 48px)));
  --top-h: 72px;
  --light-on: 1; --light-level: .85; --light-rgb: 255 177 110; --lit: calc(var(--light-on) * var(--light-level));
}
.wrap { width: var(--wrap); margin: 0 auto; }
.eyebrow { font-size: .8125rem; letter-spacing: .14em; color: var(--accent); font-weight: 500; }
.h2 { margin-top: 12px; font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 300; }
.h3 { font-size: 1.375rem; font-weight: 500; }

/* ── 머리: 늘 위에 고정 · 내려가면 바탕 깔림 ── */
.top { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--top-h); display: flex; align-items: center; gap: 12px;
  padding: 0 max(clamp(16px, 4vw, 48px), calc((100% - 1200px) / 2)); transition: background-color .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent; }
.top.is-solid { background: rgb(12 11 9 / .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; }
.mark small { font-family: var(--font-body); font-size: .6875rem; letter-spacing: .2em; color: var(--ink-soft); }
.mark-dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklab, rgb(var(--light-rgb)) calc(100% * var(--lit)), #3a352d); box-shadow: 0 0 calc(16px * var(--lit)) rgb(var(--light-rgb) / .8); }
.top-nav { display: flex; align-items: center; gap: 4px; font-size: .9375rem; }
.top-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; text-decoration: none; color: var(--ink-soft); border-radius: 999px; transition: color .3s var(--ease); }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--ink); }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; font-size: .875rem; white-space: nowrap; }
.top .wk-hbtn { font-size: .875rem; }

/* ── 1. 첫 화면 — 사진 속 방 ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-photo, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo img { filter: brightness(calc(.22 + .78 * var(--lit))) saturate(calc(.5 + .5 * var(--light-on))); transition: filter .6s var(--ease); }
/* 빛 색(색온도) 덧칠 + 글 쪽 그늘 */
.hero-tint { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 62% 30%, rgb(var(--light-rgb) / calc(.28 * var(--lit))), transparent 70%), linear-gradient(90deg, rgb(12 11 9 / .82), rgb(12 11 9 / .35) 55%, rgb(12 11 9 / 0)), linear-gradient(0deg, rgb(12 11 9 / .9), rgb(12 11 9 / 0) 45%);
  mix-blend-mode: normal; }
.hero-in { position: relative; z-index: 2; display: grid; gap: 32px; padding: calc(var(--top-h) + 48px) 0 clamp(28px, 6vh, 56px); }
.hero h1 { margin-top: 16px; font-size: clamp(2.75rem, min(7vw, 11vh), 6.5rem); font-weight: 300; line-height: 1.06; letter-spacing: -.035em; }
.hero h1 span { display: block; }
.hero h1 span:last-child { font-weight: 500; }
.lede { margin-top: 20px; max-width: 26em; font-size: 1.0625rem; color: #D9D1C3; }
.dock { display: flex; align-items: center; gap: 28px; width: fit-content; max-width: 100%; padding: 12px 24px 12px 12px; border-radius: 24px;
  background: rgb(21 19 15 / .78); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.switch { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 12px 0 4px; border: 0; border-radius: 999px; background: transparent; }
.switch-plate { position: relative; width: 40px; height: 56px; border-radius: 12px; background: #1d1a15; border: 1px solid var(--line); box-shadow: inset 0 2px 6px rgb(0 0 0 / .5); }
.switch-knob { position: absolute; left: 6px; right: 6px; top: 28px; height: 20px; border-radius: 7px; background: #3b362e; transition: top .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.switch[aria-pressed="true"] .switch-knob { top: 6px; background: var(--accent); box-shadow: 0 0 16px rgb(var(--light-rgb) / .7); }
.switch-label { font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.switch .when-on, .switch[aria-pressed="true"] .when-off { display: none; }
.switch[aria-pressed="true"] .when-on { display: inline; }
.dials { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: clamp(260px, 30vw, 420px); transition: opacity .5s var(--ease); }
.dials.is-off { opacity: .35; }
.dial { display: grid; gap: 2px; font-size: .8125rem; color: var(--ink-soft); }
.dial-head { display: flex; justify-content: space-between; align-items: baseline; }
.dial-head output { color: var(--ink); font-size: .875rem; }
.dial input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
.dial input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--track, var(--line)); }
.dial input::-moz-range-track { height: 4px; border-radius: 4px; background: var(--track, var(--line)); }
.dial input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }
.dial input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); }
#level { --track: linear-gradient(90deg, #3a352d, rgb(var(--light-rgb))); }

/* ── 구역 공통 ── */
.sec { padding: clamp(72px, 11vw, 136px) 0; border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-note { color: var(--ink-soft); font-size: .9375rem; }
.rise { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ── 2. 세 가지 저녁 ── */
.ev-in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ev-tabs { display: flex; gap: 8px; margin-top: 28px; }
.ev-tab { flex: 1; display: grid; gap: 2px; justify-items: start; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line); text-align: left; font-size: .875rem; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.ev-tab .num { font-family: var(--font-display); font-size: 1.375rem; color: var(--ink); line-height: 1.2; }
.ev-tab[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ev-panel { margin-top: 20px; min-height: 5.6em; color: #D9D1C3; }
.ev-k { font-size: .8125rem; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px; }
.ev-photo { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; }
.ev-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(.35 + .65 * var(--ev-l, .9))); transition: filter .8s var(--ease); }
.ev-tint { position: absolute; inset: 0; background: rgb(var(--ev-rgb, 255 200 150) / .22); mix-blend-mode: color; transition: background-color .8s var(--ease); }

/* ── 3. 등 카드(누르면 상품 페이지) ── */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: grid; height: 100%; text-decoration: none; border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover, .card:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgb(var(--c-rgb) / .5), 0 30px 60px -30px rgb(var(--c-rgb) / .45); }
.card-photo { aspect-ratio: 960 / 812; overflow: hidden; background: #0c0b09; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .6s var(--ease); filter: brightness(.82); }
.card:hover .card-photo img, .card:focus-visible .card-photo img { transform: scale(1.04); filter: brightness(1); }
.card-body { display: grid; gap: 4px; padding: 16px 18px 20px; }
.card-place { font-size: .75rem; letter-spacing: .12em; color: var(--accent); }
.card-name { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; }
.card-spec { font-size: .8125rem; color: var(--ink-soft); }
.card-price { margin-top: 6px; font-size: 1rem; font-weight: 600; }

/* ── 4. 빛 읽는 법 ── */
.kbar { position: relative; margin: 0 0 56px; height: 44px; }
.kbar-line { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgb(255 166 87), rgb(255 206 166) 34%, rgb(255 249 253)); }
.kbar-tick { position: absolute; top: 18px; left: var(--x); transform: translateX(-50%); white-space: nowrap; font-size: .75rem; letter-spacing: .1em; color: var(--ink-soft); }
.kbar-line + .kbar-tick { transform: none; } .kbar-tick:last-child { transform: translateX(-100%); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: 0; }
.fact dt { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; margin-bottom: 12px; }
.fact dt .num { font-family: var(--font-body); font-size: .875rem; letter-spacing: .12em; color: var(--accent); min-width: 2em; }
.fact dd { margin: 0; color: var(--ink-soft); }

/* ── 5. 쇼룸 예약 ── */
.visit-in { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.visit-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 11; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }
.visit-lede { margin-top: 16px; color: #D9D1C3; }
.visit-info { display: grid; margin: 20px 0 0; }
.visit-info div { display: grid; grid-template-columns: 5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.visit-info dt { color: var(--ink-soft); font-size: .875rem; }
.visit-info dd { margin: 0; }
.rv { margin-top: 20px; display: grid; gap: 12px; }
.rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fld { display: grid; gap: 4px; }
.fld label { font-size: .8125rem; color: var(--ink-soft); }
.fld input { width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 400 16px/1.4 var(--font-body); color-scheme: dark; }
.fld input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.fld input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #E2715A; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; min-width: 64px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: .9375rem; transition: background-color .3s var(--ease), color .3s var(--ease); }
.chip[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.rv-err { min-height: 1.4em; font-size: .8125rem; font-weight: 600; color: #F08A72; }
.cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 8px 8px 8px 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 1rem; transition: transform .3s var(--ease); }
.cta:active { transform: scale(.98); }
.cta-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(12 11 9 / .1); transition: transform .4s var(--ease); }
.cta:hover .cta-icon { transform: translateX(3px); }

/* ── 꼬리말 ── */
.foot { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: .8125rem; color: var(--ink-soft); }
.foot-in { display: grid; gap: 6px; }
.foot-brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin-bottom: 8px; }
.foot-brand span { font-family: var(--font-body); font-size: .6875rem; letter-spacing: .2em; color: var(--ink-soft); margin-left: 8px; }

/* ── 상품 페이지 ── */
.pd { padding: calc(var(--top-h) + 24px) 0 clamp(64px, 9vw, 112px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: .8125rem; color: var(--ink-soft); }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.pd-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 8px; }
.pd-main { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-tint { position: absolute; inset: 0; background: rgb(var(--pd-rgb, 255 200 150) / .18); mix-blend-mode: color; transition: background-color .6s var(--ease); pointer-events: none; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pd-thumbs button { width: 96px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: none; box-shadow: inset 0 0 0 1px var(--line); opacity: .6; transition: opacity .3s var(--ease), box-shadow .3s var(--ease); }
.pd-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.pd-info { position: sticky; top: calc(var(--top-h) + 16px); display: grid; gap: 0; }
.pd-name { margin-top: 10px; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 500; }
.pd-lead { margin-top: 12px; color: #D9D1C3; }
.pd-price { margin-top: 18px; font-size: 1.75rem; font-weight: 600; }
.pd-opt { margin-top: 20px; }
.pd-label { margin-bottom: 8px; font-size: .8125rem; color: var(--ink-soft); }
.pd-buy { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.pd-buy .cta { flex: 1; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.qty button { width: 48px; height: 52px; border: 0; background: none; font-size: 1.125rem; }
.qty output { min-width: 2ch; text-align: center; }
.pd-try { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--accent); text-decoration: none; font-size: .9375rem; }
.pd-ship { margin-top: 6px; font-size: .8125rem; color: var(--ink-soft); }
.pd-sec { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.pd-body { margin-top: 14px; max-width: 42em; color: #D9D1C3; font-size: 1.0625rem; }
.pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.pd-specs { margin: 16px 0 0; display: grid; }
.pd-specs div { display: grid; grid-template-columns: 6em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pd-specs dt { color: var(--ink-soft); font-size: .875rem; }
.pd-specs dd { margin: 0; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-of-type { margin-top: 16px; }
.qa summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none; font-weight: 500; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.25rem; color: var(--ink-soft); transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 0 16px; color: var(--ink-soft); }
.pd-sec .cards { margin-top: 20px; }

/* ── 태블릿 ── */
@media (max-width: 1023px) {
  .top-nav { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-in, .visit-in, .pd-grid { grid-template-columns: 1fr; }
  .pd-info { position: static; }
}
/* ── 폰 ── */
@media (max-width: 767px) {
  :root { --top-h: 60px; }
  .mark small { display: none; }
  .nav-cta { padding: 0 14px; }
  .hero-in { gap: 20px; }
  .hero-photo img { object-position: 78% 50%; }
  .lede { font-size: 1rem; }
  .dock { flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 8px 16px 4px 8px; }
  .dials { width: 100%; gap: 14px; }
  .ev-tabs { gap: 6px; }
  .ev-tab { padding: 8px 10px; font-size: .8125rem; }
  .ev-tab .num { font-size: 1.125rem; }
  .ev-photo { order: -1; }
  .cards, .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-body { padding: 12px 12px 14px; }
  .card-name { font-size: 1rem; }
  .card-spec { font-size: .75rem; }
  .facts { grid-template-columns: 1fr; }
  .rv-row { grid-template-columns: 1fr; }
  .pd-thumbs button { width: calc((100% - 20px) / 3); }
  .pd-cols { grid-template-columns: 1fr; }
  .pd-buy { flex-wrap: wrap; }
}

/* ── 완성 부품(기반/부품/완성.js) — 로그인·회원가입·소식·고객센터·약관 ── */
:root{--wk-bg:#0C0B09;--wk-fg:#F4F1EC;--wk-soft:#978E7F;--wk-accent:#E7B470;--wk-line:rgb(255 255 255 / .14);--wk-paper:#15130F;--wk-ink:#F4F1EC;--wk-ink-soft:#9F9D98;--wk-p-accent:#E7B470;--wk-pline:rgb(255 255 255 / .14);--wk-btn:#E7B470;--wk-font:'IBM Plex Sans KR', sans-serif;--wk-font-d:'Hahmlet', serif}
[hidden]{display:none!important}
.wk-hbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.875rem;cursor:pointer;box-shadow:inset 0 0 0 1px currentColor;opacity:.9;white-space:nowrap;max-width:10em;overflow:hidden;text-overflow:ellipsis}
.wk-hbtn:hover{opacity:1}
.wk-burger{display:none;padding:0;width:44px;position:relative}
.wk-burger span,.wk-burger span::before,.wk-burger span::after{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;border-radius:2px}
.wk-burger span{top:21px}.wk-burger span::before,.wk-burger span::after{content:"";left:0;right:0}.wk-burger span::before{top:-6px}.wk-burger span::after{top:6px}
.wk-nav{display:flex;gap:4px;margin:0 auto;font-size:.875rem}
.wk-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:inherit;text-decoration:none;opacity:.85}
.wk-nav a:hover{opacity:1}
header :is(a,button,p,span,small){white-space:nowrap}
@media (max-width:1180px){.wk-nav{display:none}.wk-burger{display:inline-flex}}
@media (max-width:899px){.wk-login{display:none}}
.wk-sec{background:var(--wk-bg);color:var(--wk-fg);font-family:var(--wk-font);padding:clamp(64px,10vw,128px) 0;border-top:1px solid var(--wk-line)}
.wk-wrap{width:var(--wrap);margin:0 auto}
.wk-head{display:block;max-width:40rem}
.wk-eyebrow{margin:0;font-size:.75rem;letter-spacing:.18em;color:var(--wk-accent);font-weight:600}
.wk-h{margin:10px 0 0;font-family:var(--wk-font-d);font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.2;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.wk-ntcs{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--wk-line)}
.wk-ntc{width:100%;display:grid;grid-template-columns:7.5em 1fr auto;align-items:baseline;gap:16px;min-height:56px;padding:16px 4px;border:0;border-bottom:1px solid var(--wk-line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .3s}
.wk-ntc:hover{background:color-mix(in srgb,var(--wk-fg) 5%,transparent)}
.wk-ntc-date{font-size:.875rem;color:var(--wk-soft);font-variant-numeric:tabular-nums}
.wk-ntc-title{font-size:1rem;line-height:1.5}
.wk-ntc-title em{font-style:normal;font-size:.75rem;font-weight:600;color:var(--wk-accent);margin-right:6px}
.wk-ntc-go{color:var(--wk-soft);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wk-ntc:hover .wk-ntc-go{transform:translateX(4px)}
.wk-help-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start}
.wk-facts{margin:24px 0 0;display:grid}
.wk-facts div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--wk-line)}
.wk-facts dt{color:var(--wk-soft);font-size:.875rem}.wk-facts dd{margin:0}
.wk-link{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--wk-accent);text-decoration:none}
.wk-form{padding:clamp(20px,3vw,32px);border-radius:16px;background:var(--wk-paper);color:var(--wk-ink);border:1px solid var(--wk-pline)}
.wk-form-h{margin:0 0 4px;font-family:var(--wk-font-d);font-weight:600;font-size:1.125rem}
.wk-fld{display:grid;gap:4px;margin-top:12px;min-width:0}
.wk-fld label{font-size:.8125rem;color:var(--wk-ink-soft)}
.wk-fld input,.wk-fld select,.wk-fld textarea{width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:color-mix(in srgb,var(--wk-ink) 5%,var(--wk-paper));box-shadow:inset 0 0 0 1px var(--wk-pline);color:var(--wk-ink);font:400 16px/1.45 var(--wk-font)}
.wk-fld textarea{resize:vertical;min-height:96px}
.wk-fld input:focus,.wk-fld select:focus,.wk-fld textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--wk-ink)}
.wk-fld [aria-invalid="true"]{box-shadow:inset 0 0 0 2px #C0392B}
.wk-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wk-err{min-height:1.4em;margin:8px 0 0;font-size:.8125rem;font-weight:600;color:#B03A2E}
.wk-hint{margin:4px 0 0;font-size:.75rem;color:var(--wk-ink-soft)}
.wk-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:8px;border:0;border-radius:999px;background:var(--wk-ink);color:var(--wk-paper);font:600 1rem var(--wk-font);cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wk-btn:active{transform:scale(.98)}
.wk-text{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--wk-p-accent);font:inherit;font-size:.8125rem;cursor:pointer}
.wk-foot-links button{display:inline-block;padding:13px 2px;margin:-13px 0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wk-foot-links a{display:inline-block;min-width:44px;text-align:center;padding:13px 2px;margin:-13px 0;color:inherit}
.wk-foot-links button{min-width:44px}
/* 창 */
.wk-sheet{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;font-family:var(--wk-font)}
.wk-back{position:absolute;inset:0;background:rgb(8 8 8 / .62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wk-in{position:relative;width:min(440px,100%);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;padding:34px 28px 26px;border-radius:14px;background:var(--wk-paper);color:var(--wk-ink);box-shadow:0 30px 80px -30px rgb(0 0 0 / .8);line-height:1.65}
.wk-doc{width:min(560px,100%)}
.wk-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.wk-x span,.wk-x span::after{position:absolute;left:13px;right:13px;top:21px;height:1.5px;background:var(--wk-ink);transform:rotate(45deg)}
.wk-x span::after{content:"";left:0;right:0;top:0;transform:rotate(90deg)}
.wk-tabs{display:grid;grid-template-columns:1fr 1fr;margin:-6px 40px 6px 0;border-bottom:1px solid var(--wk-pline)}
.wk-tabs button{min-height:48px;border:0;background:none;font:600 1.0625rem var(--wk-font-d);color:var(--wk-ink-soft);box-shadow:inset 0 -2px 0 transparent;cursor:pointer}
.wk-tabs button[aria-selected="true"]{color:var(--wk-ink);box-shadow:inset 0 -2px 0 var(--wk-ink)}
.wk-aux{margin:4px 0 0;text-align:center}
.wk-or{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:.75rem;color:var(--wk-ink-soft)}
.wk-or::before,.wk-or::after{content:"";flex:1;border-top:1px solid var(--wk-pline)}
.wk-snss{display:grid;gap:8px}
.wk-sns{min-height:48px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px var(--wk-pline);color:var(--wk-ink);font:inherit;font-size:.9375rem;cursor:pointer}
.wk-sns:hover{background:color-mix(in srgb,var(--wk-ink) 5%,transparent)}
.wk-agrees{margin-top:14px;padding:4px 12px;border-radius:8px;background:color-mix(in srgb,var(--wk-ink) 5%,var(--wk-paper));display:grid;grid-template-columns:1fr auto;align-items:center}
.wk-chk{grid-column:1;display:flex;align-items:center;gap:10px;min-height:44px;font-size:.875rem;cursor:pointer}
.wk-chk.wk-all{grid-column:1 / -1;border-bottom:1px solid var(--wk-pline);font-weight:600}
.wk-chk input{width:20px;height:20px;accent-color:var(--wk-ink)}
.wk-see{grid-column:2;justify-self:end}
.wk-done{text-align:center;padding-top:20px}
.wk-seal{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--wk-p-accent),inset 0 0 0 6px var(--wk-paper),inset 0 0 0 7px var(--wk-p-accent);color:var(--wk-p-accent);font:700 .8125rem var(--wk-font-d);transform:rotate(-12deg)}
.wk-doc-h{margin:6px 0 0;font-family:var(--wk-font-d);font-weight:600;font-size:1.5rem;line-height:1.3}
.wk-doc-h3{margin:20px 0 0;font-size:1rem;font-weight:600}
.wk-doc-p{margin:10px 0 0;font-size:.9688rem}
.wk-doc-note{margin:8px 0 0;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--wk-ink) 6%,var(--wk-paper));font-size:.8125rem;color:var(--wk-ink-soft)}
.wk-doc .wk-eyebrow,.wk-menu-in .wk-eyebrow{color:var(--wk-p-accent)}
.wk-menu-list{list-style:none;margin:12px 0 12px;padding:0}
.wk-menu-list a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--wk-pline);color:var(--wk-ink);text-decoration:none;font:600 1.125rem var(--wk-font-d)}
.wk-flash{position:fixed;left:50%;bottom:24px;z-index:260;max-width:calc(100vw - 32px);margin:0;padding:12px 18px;border-radius:999px;background:var(--wk-ink);color:var(--wk-paper);font:600 .875rem var(--wk-font);transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.wk-flash.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:767px){
  .wk-help-in{grid-template-columns:1fr}
  .wk-ntc{grid-template-columns:1fr auto;gap:4px 12px}
  .wk-ntc-date{grid-column:1}.wk-ntc-title{grid-column:1}.wk-ntc-go{grid-column:2;grid-row:1 / span 2;align-self:center}
  .wk-row2{grid-template-columns:1fr}
}