/* Sections (홈·공용 구역) */

/* ---------- Hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--bar-h)); display: flex; overflow: hidden; isolation: isolate; }
.hero--dark { background: var(--night); color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { object-position: 62% 50%; }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(6 10 19 / 0.88) 0%, rgb(6 10 19 / 0.55) 38%, rgb(6 10 19 / 0.05) 70%),
  linear-gradient(0deg, rgb(6 10 19 / 0.85) 0%, transparent 32%),
  linear-gradient(180deg, rgb(6 10 19 / 0.6) 0%, transparent 22%); }
.hero__inner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--bar-h)); padding-top: calc(var(--header-h) + 32px); padding-bottom: 32px; width: 100%; }
.hero__copy { max-width: 960px; display: grid; gap: clamp(16px, 3vh, 28px); margin-top: auto; }
.hero__title { font-size: clamp(2.6rem, min(1.2rem + 5vw, 11.5vh), 6.75rem); }
:lang(ja) .hero__title { font-size: clamp(2.4rem, min(1.2rem + 4.6vw, 10.5vh), 6rem); }
:lang(ja) .statement__text { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.6rem); }
.hero__title em { font-style: normal; }
.hero__lead { max-width: 540px; margin: 0; color: rgb(255 255 255 / 0.74); }
.hero__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: auto; padding-top: clamp(24px, 5vh, 56px); }
.hero__temp { display: grid; gap: 8px; min-width: 240px; }
.hero__temp-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.hero__temp-range { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.03em; }
.hero__temp-range small { font-size: 0.55em; font-weight: 500; color: rgb(255 255 255 / 0.6); margin-left: 2px; }
.hero__temp-bar { height: 4px; border-radius: 4px; background: var(--temp-gradient); transform-origin: left; animation: bar-grow 1.6s 1.2s var(--ease-out) both; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.hero__scroll { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 1.5px solid rgb(255 255 255 / 0.35); display: none; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: #fff; animation: scroll-cue 2s var(--ease-in-out) infinite; }
@keyframes scroll-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }
@media (min-width: 900px) { .hero__scroll { display: block; } }
@media (max-width: 720px) {
  .hero__shade { background: linear-gradient(0deg, rgb(6 10 19 / 0.95) 0%, rgb(6 10 19 / 0.6) 50%, rgb(6 10 19 / 0.3) 100%); }
  .hero__video { object-position: 70% 50%; }
  .hero__copy { gap: 20px; }
  .hero__temp { min-width: 0; width: 100%; }
}

/* Light hero (sub pages) */
.phero { position: relative; padding-top: calc(var(--header-h) + clamp(56px, 8vw, 120px)); padding-bottom: clamp(56px, 7vw, 110px); overflow: hidden; }
.phero__inner { display: grid; gap: 28px; }
.phero__title { max-width: 14ch; }
:lang(en) .phero__title { max-width: 16ch; }
.phero .t-lead { max-width: 640px; margin: 0; }
.phero--dark { background: var(--night); color: #fff; }
.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 10 19 / 0.9), rgb(6 10 19 / 0.45) 55%, rgb(6 10 19 / 0.2)), linear-gradient(0deg, var(--night), transparent 35%); }
.phero--dark .phero__inner { position: relative; z-index: 1; min-height: min(70svh, 720px); align-content: end; }
.phero__crumb { font-size: 0.875rem; color: var(--subtle); display: flex; gap: 8px; align-items: center; }
.phero--dark .phero__crumb { color: rgb(255 255 255 / 0.55); }

/* ---------- Statement ---------- */
.statement .container { display: grid; gap: 40px; }
.statement__text { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 4.5rem); line-height: 1.22; letter-spacing: -0.035em; font-weight: 700; max-width: 22ch; text-wrap: pretty; }
:lang(en) .statement__text { max-width: 24ch; }
.statement__text em { font-style: normal; }
.statement__text .w { color: rgb(11 18 32 / 0.14); transition: color 0.4s linear; }
.statement__text .w.on { color: var(--ink); }
.statement__text .w.hl.on { background: var(--temp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.no-js .statement__text em { font-style: normal; }
.statement__text .w { color: var(--ink); }
.statement__cols { display: grid; gap: 20px; max-width: 620px; margin-left: auto; }
@media (max-width: 959px) { .statement__cols { margin-left: 0; } }
.statement__cols .t-lead { margin: 0; }

/* ---------- Temperature dial ---------- */
.dial { --t: 0.714; overflow: hidden; isolation: isolate; color: var(--ink); }
.dial__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 70% at 28% 55%, color-mix(in srgb, var(--cool) calc((1 - var(--t)) * 46%), transparent), transparent 70%),
  radial-gradient(60% 70% at 28% 55%, color-mix(in srgb, var(--warm) calc(var(--t) * 40%), transparent), transparent 72%),
  linear-gradient(180deg, var(--paper), #fff 50%, var(--paper)); transition: background 0.3s; }
.dial__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1040px) { .dial__grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; } }
.dial__stage { position: relative; display: grid; place-items: center; min-height: clamp(420px, 70vh, 640px); }
.dial__halo { position: absolute; width: min(520px, 90%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cool) calc((1 - var(--t)) * 60%), color-mix(in srgb, var(--warm) calc(var(--t) * 70%), #fff)) 0%, transparent 66%);
  filter: blur(12px); opacity: 0.75; animation: halo 6s var(--ease-in-out) infinite alternate; }
@keyframes halo { to { transform: scale(1.06); opacity: 0.95; } }
.dial__product { position: relative; width: min(320px, 58vw, 42vh); aspect-ratio: 1024 / 1536; filter: drop-shadow(0 40px 50px rgb(11 18 32 / 0.25)); }
.dial__img { width: 100%; height: 100%; }
.dial__led { position: absolute; left: 46.8%; top: 81.6%; translate: -50% -50%; font-size: clamp(16px, 2.2vw, 24px); line-height: 1; --seg-color: #59a8ff; }
.dial__basefx { position: absolute; left: 14%; right: 14%; bottom: 1.2%; height: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--warm) calc(var(--t) * 100%), var(--cool)), transparent);
  filter: blur(10px); opacity: 0.85; }
.dial__vapor { position: absolute; left: 50%; top: 6%; width: 120px; height: 140px; translate: -50% 0; pointer-events: none; }
.dial__vapor i { position: absolute; bottom: 0; left: 50%; width: 22px; height: 70px; border-radius: 50%; background: rgb(255 255 255 / 0.9); filter: blur(10px); opacity: 0; }
.dial__vapor--warm { opacity: clamp(0, calc((var(--t) - 0.55) * 3), 1); }
.dial__vapor--warm i { animation: steam 3.4s ease-in infinite; }
.dial__vapor--warm i:nth-child(2) { margin-left: -24px; animation-delay: 1.1s; }
.dial__vapor--warm i:nth-child(3) { margin-left: 18px; animation-delay: 2.2s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(20px) scaleX(0.6); } 30% { opacity: 0.55; } 100% { opacity: 0; transform: translateY(-90px) scaleX(1.6) rotate(8deg); } }
.dial__vapor--cool { top: auto; bottom: 4%; width: 300px; height: 80px; opacity: clamp(0, calc((0.35 - var(--t)) * 4), 1); }
.dial__vapor--cool i { width: 60px; height: 26px; background: rgb(220 235 255 / 0.95); animation: frost 4s ease-in-out infinite; }
.dial__vapor--cool i:nth-child(1) { margin-left: -130px; } .dial__vapor--cool i:nth-child(2) { margin-left: -70px; animation-delay: .8s; } .dial__vapor--cool i:nth-child(3) { margin-left: 0; animation-delay: 1.6s; } .dial__vapor--cool i:nth-child(4) { margin-left: 50px; animation-delay: 2.4s; } .dial__vapor--cool i:nth-child(5) { margin-left: 100px; animation-delay: 3.2s; }
@keyframes frost { 0% { opacity: 0; transform: translateX(0) scale(0.7); } 40% { opacity: 0.7; } 100% { opacity: 0; transform: translateX(30px) scale(1.5); } }
.dial__panel { display: grid; gap: 22px; }
.dial__panel .t-lead { margin: 0; max-width: 520px; }
.dial__control { display: grid; gap: 28px; align-items: center; margin-top: 12px; }
@media (min-width: 640px) { .dial__control { grid-template-columns: auto 1fr; gap: 36px; } }
.knob { position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin-inline: auto; touch-action: pan-y; user-select: none; }
@media (hover: hover) and (pointer: fine) { .knob { touch-action: none; } }
.knob__svg { width: 100%; height: 100%; overflow: visible; }
.knob__track { fill: none; stroke: rgb(11 18 32 / 0.08); stroke-width: 26; stroke-linecap: round; }
.knob__fill { fill: none; stroke-width: 26; stroke-linecap: round; }
.knob__ticks line { stroke: rgb(11 18 32 / 0.22); stroke-width: 2; stroke-linecap: round; }
.knob__ticks line.major { stroke: rgb(11 18 32 / 0.45); stroke-width: 2.5; }
.knob__ticks text { font-size: 15px; fill: var(--subtle); font-weight: 600; text-anchor: middle; dominant-baseline: middle; font-family: var(--font-sans); }
.knob__handle { cursor: grab; outline: none; }
.knob__handle:active { cursor: grabbing; }
.knob__handle-ring { fill: #fff; stroke: rgb(11 18 32 / 0.08); stroke-width: 1; filter: drop-shadow(0 6px 10px rgb(11 18 32 / 0.25)); transition: r var(--dur-2) var(--ease-spring); }
.knob__handle:hover .knob__handle-ring, .knob__handle:focus-visible .knob__handle-ring { r: 25; }
.knob__handle:focus-visible .knob__handle-ring { stroke: var(--brand-bright); stroke-width: 3; }
.knob__handle-dot { fill: var(--knob-color, var(--warm)); }
.knob__center { position: absolute; inset: 22%; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 50px -24px rgb(11 18 32 / 0.25); pointer-events: none; }
.knob__mode { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--knob-color, var(--warm)); display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.knob__value { font-size: clamp(3rem, 2rem + 3vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.knob__value small { font-size: 0.4em; font-weight: 600; letter-spacing: 0; vertical-align: top; margin-left: 2px; color: var(--muted); }
.knob__sub { font-size: 0.875rem; color: var(--subtle); }
.dial__side { display: grid; gap: 16px; }
.dial__units { justify-self: start; }
.dial__presets-label { margin: 4px 0 0; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.presets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.preset { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgb(255 255 255 / 0.7); text-align: left; font-size: 0.9688rem; font-weight: 550; transition: all var(--dur-2) var(--ease-out); }
.preset:hover { border-color: var(--line-strong); background: #fff; transform: translateX(3px); }
.preset.is-active { border-color: var(--ink); background: #fff; box-shadow: var(--shadow-1); }
.preset b { font-weight: 650; color: var(--muted); }
.preset__dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--warm) calc(var(--pt) * 100%), var(--cool)); }
.dial__note { margin: 0; }

/* ---------- Features / Bento ---------- */
.bento { display: grid; gap: 20px; margin-top: 64px; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(260px, auto); } }
.bento__card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--night); color: #fff; min-height: 440px; display: flex; isolation: isolate; }
.bento__media { position: absolute; inset: -8% 0; z-index: -2; }
.bento__media img { width: 100%; height: 100%; object-fit: cover; }
.bento__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(6 10 19 / 0.82) 0%, rgb(6 10 19 / 0.25) 45%, transparent 70%); }
.bento__body { margin-top: auto; padding: clamp(24px, 3vw, 40px); display: grid; gap: 10px; max-width: 520px; }
.bento__body p { margin: 0; color: rgb(255 255 255 / 0.75); }
.bento__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.14); backdrop-filter: blur(10px); margin-bottom: 6px; }
.bento__icon svg { width: 22px; height: 22px; }
.bento__card--heat .bento__icon { color: #ffb184; }
.bento__card--cool .bento__icon { color: #9ec6ff; }
@media (min-width: 900px) {
  .bento__card--heat { grid-column: span 7; min-height: 560px; }
  .bento__card--cool { grid-column: span 5; min-height: 560px; }
  .bento__card--sense { grid-column: span 5; }
  .bento__card--touch { grid-column: span 7; }
}
.minis { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .minis { grid-template-columns: repeat(5, 1fr); } }
.mini { display: grid; gap: 6px; align-content: start; padding: 28px 20px 8px 0; }
@media (min-width: 900px) { .mini { padding: 32px 24px 8px; } .mini:first-child { padding-left: 0; } .mini + .mini { border-left: 1px solid var(--line); } }
.mini img { width: 48px; height: 48px; margin-bottom: 10px; }
.mini strong { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.mini span { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }

/* ---------- Scenes (horizontal) ---------- */
.scenes { position: relative; background: var(--surface); padding-block: var(--section-sm); overflow: hidden; }
.scenes__pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; width: 100%; }
.scenes__head { display: grid; gap: 20px; }
.scenes__head .t-lead { max-width: 560px; margin: 0; }
.scenes__track { display: flex; gap: 20px; padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scenes__track::-webkit-scrollbar { display: none; }
.scene { flex: none; width: min(82vw, 560px); margin: 0; scroll-snap-align: start; display: grid; gap: 16px; }
.scene__media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.scene__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.scene:hover .scene__media img { transform: scale(1.04); }
.scene figcaption { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline; padding-inline: 4px; }
.scene figcaption strong { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; }
.scene__time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--subtle); font-weight: 500; }
.scene__temp { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.scenes__progress { height: 2px; }
.scenes__progress::before { content: ""; display: block; height: 2px; background: var(--line); }
.scenes__progress span { display: block; height: 2px; margin-top: -2px; background: var(--ink); transform-origin: left; transform: scaleX(0.1); }
@media (min-width: 900px) {
  .scenes.is-pinned { padding-block: 0; }
  .scenes.is-pinned .scenes__pin { min-height: 100vh; align-content: center; padding-block: 72px; }
  .scenes.is-pinned .scenes__track { overflow: visible; scroll-snap-type: none; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); will-change: transform; }
  .scene { width: clamp(420px, 36vw, 600px); }
  .scenes.is-pinned .scenes__head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 64px; }
  .scenes.is-pinned .scenes__head .eyebrow { grid-column: 1 / -1; }
}

/* ---------- Colors ---------- */
.colors { background: linear-gradient(180deg, var(--paper), var(--paper-2)); overflow: hidden; }
.colors[data-colors-current-value="ivory"] { background: linear-gradient(180deg, var(--paper), #ece6da); }
.colors__stage { position: relative; height: clamp(380px, min(56vw, 62vh), 620px); display: grid; place-items: center; margin-top: 24px; }
.colors__ring { position: absolute; width: clamp(320px, 44vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgb(255 255 255 / 0) 68%); }
.colors__img { position: absolute; height: 100%; width: auto; opacity: 0; transform: translateY(24px) scale(0.97); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); filter: drop-shadow(0 40px 40px rgb(11 18 32 / 0.2)); }
.colors__img.is-active { opacity: 1; transform: none; }
.colors__picker { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.swatch { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 22px 10px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgb(255 255 255 / 0.6); text-align: left; transition: all var(--dur-2) var(--ease-out); }
.swatch[aria-checked="true"] { background: #fff; border-color: var(--ink); box-shadow: var(--shadow-2); }
.swatch__chip { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 -6px 12px rgb(0 0 0 / 0.08), inset 0 0 0 1px rgb(0 0 0 / 0.06); }
.swatch__chip--sky { background: linear-gradient(145deg, #d3e1f6, #a9c0e4); }
.swatch__chip--ivory { background: linear-gradient(145deg, #faf8f3, #e4ded2); }
.swatch__text { display: grid; line-height: 1.35; }
.swatch__text strong { font-size: 1rem; }
.swatch__text small { font-size: 0.8125rem; color: var(--muted); }

/* ---------- Tech teaser ---------- */
.tech-teaser { overflow: hidden; isolation: isolate; }
.tech-teaser__bg { position: absolute; inset: -10% 0; z-index: -1; opacity: 0.85; }
.tech-teaser__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.tech-teaser__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 10 19 / 0.2), rgb(6 10 19 / 0.85) 55%), linear-gradient(0deg, var(--night), transparent 30%, transparent 70%, var(--night)); }
.tech-teaser__inner { display: grid; gap: 64px; }
@media (min-width: 1040px) { .tech-teaser__inner { grid-template-columns: 1fr 1fr; } .tech-teaser__copy { grid-column: 2; } .tech-teaser__steps { grid-column: 2; } }
.tech-teaser__copy { display: grid; gap: 24px; justify-items: start; }
.tech-teaser__copy .t-lead { margin: 0; }
.tech-teaser__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--night-line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 640px) { .tech-teaser__steps { grid-template-columns: repeat(3, 1fr); } }
.tech-teaser__steps li { padding: 24px; background: rgb(6 10 19 / 0.7); backdrop-filter: blur(10px); display: grid; gap: 8px; align-content: start; }
.tech-teaser__steps span { font-family: var(--font-mono); font-size: 0.75rem; color: #8fb6ff; font-weight: 500; }
.tech-teaser__steps strong { font-size: 1.125rem; }
.tech-teaser__steps p { margin: 0; font-size: 0.9375rem; color: rgb(255 255 255 / 0.62); line-height: 1.6; }

/* ---------- Recognition ---------- */
.recog__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 720px) { .recog__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .recog__list { grid-template-columns: repeat(3, 1fr); } }
.recog__item { background: var(--paper); padding: 36px 28px 36px 0; display: grid; gap: 10px; align-content: start; }
@media (min-width: 720px) { .recog__item { padding: 40px 28px; } .recog__item:first-child { padding-left: 0; } }
.recog__k { font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); font-weight: 750; letter-spacing: -0.05em; line-height: 1; margin-bottom: 14px; color: var(--brand); }
.recog__item strong { font-size: 1.125rem; letter-spacing: -0.02em; }
.recog__item p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.recog__ces { margin-top: 56px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px 24px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .recog__ces { grid-template-columns: 150px minmax(0, 600px); gap: 56px; padding: 48px 0; } }
.recog__ces-badge { display: block; }
.recog__ces-badge img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 28px rgb(11 18 32 / 0.22)); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.recog__ces-badge:hover img { transform: translateY(-4px) rotate(-2deg); }
.recog__ces-copy { display: grid; gap: 12px; justify-items: start; }
.recog__ces-copy .t-caption { margin: 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-size: 0.75rem; }
.recog__ces-copy strong { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.03em; line-height: 1.25; }
.recog__ces-copy p { margin: 0; color: var(--muted); line-height: 1.65; }
.ksband__logo { height: 22px; width: auto; }
.recog__partners { margin-top: 72px; display: grid; gap: 24px; }
.recog__partners .t-caption { margin-bottom: 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }

/* ---------- Kickstarter band ---------- */
.ksband { position: relative; color: #fff; background: var(--night); overflow: hidden; isolation: isolate; }
.ksband__media { position: absolute; inset: 0; z-index: -1; }
.ksband__media video { width: 100%; height: 100%; object-fit: cover; }
.ksband__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 10 19 / 0.92) 0%, rgb(6 10 19 / 0.7) 45%, rgb(6 10 19 / 0.3) 100%); }
.ksband__inner { display: grid; gap: 48px; padding-block: var(--section); align-items: end; }
@media (min-width: 1040px) { .ksband__inner { grid-template-columns: 1.2fr 0.8fr; } }
.ksband__copy { display: grid; gap: 24px; max-width: 640px; }
.ksband__copy .eyebrow { color: var(--kickstarter); }
.ksband__copy .t-lead { margin: 0; }
.ksband__side { display: grid; gap: 16px; }
.ksband__offer { display: flex; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--r-md); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); backdrop-filter: blur(14px); }
.ksband__offer strong { font-size: 3.5rem; line-height: 0.9; letter-spacing: -0.05em; color: var(--kickstarter); }
.ksband__offer strong small { font-size: 0.5em; }
.ksband__offer span { color: rgb(255 255 255 / 0.8); line-height: 1.5; }
.ksband__count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ksband__count div { padding: 14px 6px; text-align: center; border-radius: var(--r-sm); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); }
.ksband__count b { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.ksband__count small { font-size: 0.75rem; color: rgb(255 255 255 / 0.55); }

/* ---------- Contact CTA ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: var(--section); }
.cta-band__bg { position: absolute; inset: -12% 0; z-index: -1; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__bg::after { content: ""; position: absolute; inset: 0; background: rgb(246 245 241 / 0.72); }
.cta-band__inner { display: grid; gap: 24px; justify-items: center; }
.cta-band .t-lead { margin: 0; max-width: 560px; color: var(--ink-2); }
.cta-band .t-h1 { max-width: 16ch; }

.heading__aside { display: flex; justify-content: flex-end; }
@media (max-width: 959px) { .heading__aside { justify-content: flex-start; } }

/* 영상 일시정지 버튼 */
.vtoggle { position: absolute; right: var(--gutter); bottom: 26px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.3); background: rgb(6 10 19 / 0.35); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; }
.vtoggle svg { width: 16px; height: 16px; }
.vtoggle .vtoggle__play, .vtoggle.is-paused .vtoggle__pause { display: none; }
.vtoggle.is-paused .vtoggle__play { display: block; }
.vtoggle:hover { background: rgb(6 10 19 / 0.6); }
@media (min-width: 900px) { .hero__foot { padding-right: 56px; } }
@media (max-width: 899px) { .vtoggle { top: calc(var(--header-h) + 16px); bottom: auto; width: 36px; height: 36px; } }

/* 제품 전용 보조 메뉴 (Apple 제품 페이지 방식) */
.subnav { position: sticky; z-index: 40; height: 52px; background: rgb(246 245 241 / 0.86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); margin-bottom: -52px; top: var(--header-h); transition: top var(--dur-3) var(--ease-out); }
body:has(.header.is-hidden) .subnav { top: 0; }
.subnav__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.subnav__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.subnav__links { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a { padding: 6px 12px; border-radius: var(--r-pill); font-size: 0.875rem; color: var(--muted); white-space: nowrap; transition: color var(--dur-2), background-color var(--dur-2); }
.subnav__links a:hover { color: var(--ink); }
.subnav__links a.is-active { color: var(--ink); background: rgb(11 18 32 / 0.06); font-weight: 600; }
@media (max-width: 720px) { .subnav__title { display: none; } .subnav__links { margin-left: 0; flex: 1; } }