@charset "UTF-8";
@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("assets/fonts/PretendardVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard JP Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("assets/fonts/PretendardJPVariable.woff2") format("woff2");
}

/* ───────── Tokens ───────── */
:root {
  --obsidian: #060d1d;
  --night: #0a1630;
  --cobalt: #0f214d;
  --brand: #1d3283;
  --brand-mid: #0f6db4;
  --brand-light: #27a5de;
  --signal: #139cd8;
  --sky: #38bdf8;
  --warn: #f5b544;
  --paper: #f4f5f7;
  --paper-2: #eceff3;
  --white: #ffffff;
  --ink: #0b1220;
  --muted: #4d586c;
  --muted-dark: #9fb0cb;
  --hair: rgba(11, 18, 32, 0.12);
  --hair-strong: rgba(11, 18, 32, 0.26);
  --hair-dark: rgba(160, 190, 240, 0.16);
  --hair-dark-strong: rgba(160, 190, 240, 0.3);
  --edge: clamp(20px, 4vw, 64px);
  --shell: min(1280px, calc(100% - 2 * var(--edge)));
  --section-space: clamp(88px, 10vw, 152px);
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", "Pretendard Variable", monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
html[lang="ja"] {
  font-family: "Pretendard JP Variable", "Pretendard JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; overflow-x: clip; }
main { padding-top: 72px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
p { line-height: 1.75; }
/* Korean breaks between words only; a single over-long token may still wrap instead of overflowing. */
:is(h1, h2, h3, h4, p, li, dt, dd, th, td, figcaption, label, summary, address) { word-break: keep-all; overflow-wrap: break-word; }
h2, h3 { text-wrap: balance; }
small { font-size: 12px; }
sup { font-size: 0.55em; line-height: 0; }
sup a { color: inherit; opacity: 0.7; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); letter-spacing: 0.06em; }
.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;
}
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: 24px; z-index: 60; background: var(--white); padding: 14px 18px; font-weight: 700; }
.skip-link:focus { top: 8px; }

/* ───────── Shared atoms ───────── */
.index-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.index-label > span:first-child { color: var(--brand); font-weight: 700; }
.index-label > span + span::before {
  content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 14px;
  vertical-align: middle; background: currentColor; opacity: 0.4;
}
.section { padding-block: var(--section-space); border-top: 1px solid var(--hair); position: relative; }
.section-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px; row-gap: 28px; align-items: end;
  padding-bottom: clamp(40px, 5vw, 72px);
}
.section-head .index-label { grid-column: 1 / -1; }
.section-head h2 {
  grid-column: 1 / span 7;
  font-size: clamp(36px, 4.6vw, 68px); font-weight: 700; line-height: 1.06; letter-spacing: -0.04em;
}
.section-head .lead { grid-column: 9 / -1; }
.lead { font-size: clamp(16px, 1.25vw, 18px); color: var(--muted); line-height: 1.75; }
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 52px; padding: 0 22px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--ease);
}
.button:hover { transform: translateY(-1px); }
.button--light { background: var(--white); color: var(--ink); }
.button--light:hover { background: #dff3ff; }
.button--dark { background: var(--ink); color: var(--white); }
.button--dark:hover { background: var(--brand); }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; }
.text-link--light { color: var(--white); }
.text-link span:last-child, .button span:last-child, .line-cta span:last-child, .tile-link span:last-child { transition: transform 200ms var(--ease); }
.text-link:hover span:last-child, .button:hover span:last-child, .line-cta:hover span:last-child, .tile-link:hover span:last-child { transform: translateX(4px); }

/* ───────── Header ───────── */
.header {
  position: fixed; inset: 0 0 auto; z-index: 40; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--edge);
  background: rgba(247, 248, 250, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { width: 220px; height: 44px; object-fit: contain; }
#navigation { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); margin-left: auto; }
#navigation > a { font-size: 14.5px; font-weight: 600; position: relative; padding-block: 6px; }
#navigation > a:not(.nav-contact)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease);
}
#navigation > a:not(.nav-contact):hover::after { transform: scaleX(1); }
.nav-contact { display: inline-flex; gap: 12px; align-items: center; background: var(--ink); color: var(--white); padding: 10px 16px !important; }
.nav-contact:hover { background: var(--brand); }
.header-tools { display: flex; align-items: center; gap: 12px; }
.language { display: flex; border: 1px solid var(--hair-strong); }
.language button { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; padding: 8px 10px; color: var(--muted); white-space: nowrap; }
.language button + button { border-left: 1px solid var(--hair); }
.language button.active { background: var(--ink); color: var(--white); }
.menu-button { display: none; width: 44px; height: 44px; position: relative; }
.menu-button span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform 220ms ease; }
.menu-button span:first-child { top: 17px; }
.menu-button span:last-child { top: 26px; }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ───────── Hero: catalog cover — sharp official mark + MOOJIN MATERIAL over diagonal steel bands ───────── */
.hero {
  --hero-shift: 0; --hero-vel: 0; --hero-speed: 0; --slant: -26.57deg;
  position: relative; isolation: isolate; overflow: clip;
  display: flex; align-items: center;
  min-height: clamp(520px, 78svh, 760px); padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 8vw, 104px);
  color: var(--white); background: linear-gradient(158deg, #071126 0%, #0b1a3f 52%, #122759 100%);
}
.hero-inner { position: relative; width: var(--shell); }
/* One left-aligned stack: eyebrow → lockup → copy → actions. Nothing floats on its own. */
.hero-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; translate: 0 calc(var(--hero-shift) * 56px); opacity: calc(1 - var(--hero-shift) * .55); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; text-wrap: balance; font-size: 12px; color: #a9c7e6; letter-spacing: .08em; }
.hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--sky); flex-shrink: 0; }
/* Lockup mirrors the catalog cover: mark spans both lines, MOOJIN / MATERIAL stacked beside it. */
.hero-title {
  --title: clamp(34px, 9.4vw, 112px);
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: .2em;
  margin-block: 4px; font-size: var(--title); font-weight: 800; line-height: .92; letter-spacing: -.035em;
}
.hero-mark-svg { grid-row: 1 / 3; grid-column: 1; align-self: center; display: block; height: 1.6em; width: auto; overflow: visible; }
.hero-word { grid-column: 2; grid-row: 1; display: block; white-space: nowrap; padding-bottom: .04em; }
.hero-word--accent { grid-row: 2; }
.hero-copy { max-width: 36em; color: #c6d7e9; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.motion-toggle { padding: 7px 10px; border: 1px solid var(--hair-dark-strong); font-size: 11px; color: #b8cce4; border-radius: 4px; }
.hero > .motion-toggle { position: absolute; right: var(--edge); bottom: 20px; z-index: 2; background: rgba(7, 17, 38, .55); }

/* Backdrop layer (Studio slot): steel bands by default, or a darkened photo when one is chosen. */
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-art > .studio-motion { position: absolute; inset: 0; }
.hero-art > .studio-image { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.hero-art[data-mode="image"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #071126 20%, rgba(7, 17, 38, .4)); }
.hero-art > .studio-pending { position: absolute; right: var(--edge); top: 20px; min-height: 0; height: auto; padding: 6px 10px; font-size: 11px; background: rgba(16, 35, 59, .8); }
/* Diagonal bands share the mark's slant; each sits on its own parallax depth (--depth). */
.hero-bands { position: absolute; inset: 0; }
.hero-band {
  position: absolute; top: -30%; height: 160%; left: var(--x); width: var(--w);
  transform: skewX(var(--slant)); transform-origin: 0 100%; background: var(--band); opacity: var(--o, 1);
  translate: 0 calc(var(--hero-shift) * var(--depth));
}
.hero-band::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .55) 48%, rgba(56, 189, 248, .5) 52%, transparent 70%) 0 0 / 100% 40% no-repeat;
}
.hero-band--navy { --x: 56%; --w: clamp(90px, 13vw, 220px); --depth: -40px; --band: linear-gradient(180deg, rgba(26, 46, 133, .0), rgba(26, 46, 133, .75) 45%, rgba(26, 46, 133, .9)); }
.hero-band--cobalt { --x: 70%; --w: clamp(60px, 8vw, 130px); --depth: -80px; --band: linear-gradient(180deg, rgba(15, 109, 180, .0), rgba(15, 109, 180, .55) 40%, rgba(15, 109, 180, .7)); }
.hero-band--sky { --x: 80%; --w: clamp(70px, 10vw, 170px); --depth: -120px; --band: linear-gradient(180deg, rgba(39, 165, 222, .0), rgba(39, 165, 222, .42) 35%, rgba(39, 165, 222, .55)); }
.hero-band--hair { --x: 66%; --w: 2px; --depth: -100px; --band: linear-gradient(180deg, transparent, rgba(186, 230, 253, .55) 50%, transparent); }
.hero-band--wide { --x: 88%; --w: clamp(120px, 22vw, 360px); --depth: -60px; --band: linear-gradient(180deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, .14)); }
.hero-band--fine { --x: 49%; --w: 1px; --depth: -30px; --band: linear-gradient(180deg, transparent, rgba(255, 255, 255, .28) 60%, transparent); }
@media (max-width: 768px) {
  .hero { align-items: flex-start; min-height: 0; padding: 56px 0 84px; }
  /* Bands move left so the diagonal light runs behind the stack instead of off-screen. */
  .hero-bands { opacity: .7; }
  .hero-band--navy { --x: 34%; } .hero-band--cobalt { --x: 52%; } .hero-band--sky { --x: 64%; }
  .hero-band--hair { --x: 46%; } .hero-band--wide { --x: 76%; } .hero-band--fine { --x: 22%; }
  .hero-actions { gap: 12px 20px; }
  .hero > .motion-toggle { bottom: 16px; }
}

/* ───────── Facts ───────── */
.facts { background: var(--white); border-bottom: 1px solid var(--hair); }
.facts-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; border-inline: 1px solid var(--hair); }
.fact { padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--hair); }
.fact:last-child { border-right: 0; }
.fact-code { font-size: 10.5px; color: var(--brand); text-transform: uppercase; }
/* Number stays on one line; unit and footnote mark wrap together beneath it when the column is narrow. */
.fact strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: clamp(38px, 4.2vw, 64px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.fact strong small { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); }
.fact strong small sup { margin-left: 2px; font-size: 13px; color: var(--ink); }
.fact > span:last-child { color: var(--muted); font-size: 14px; }
.fact sup, .tolerance-value sup { font-size: 15px; vertical-align: top; position: relative; top: 0.2em; margin-left: 4px; color: var(--muted); font-weight: 500; }
.facts-grid > .fact { min-width: 0; }

/* ───────── §01 Equipment ───────── */
.pipeline-visual { position: relative; }
.pipeline-track { display: block; width: 100%; height: 3px; color: var(--ink); }
.process-flow { display: grid; grid-template-columns: repeat(3, 1fr); }
.process-flow li {
  display: flex; align-items: baseline; gap: 12px; padding: 16px 16px 0 0;
  font-size: 15px; font-weight: 600; color: var(--muted); transition: color 300ms ease;
}
.process-flow li small { color: var(--brand); font-size: 11.5px; }
.process-flow li.is-active { color: var(--ink); }
.process-flow li.is-active small { color: var(--signal); }
.line-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px; border-top: 1px solid var(--hair-strong); border-left: 1px solid var(--hair);
}
.line {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.line::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--sky));
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease);
}
.line.is-current::before { transform: scaleX(1); }
.line-body { display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 2vw, 30px); flex: 1; min-width: 0; }
.line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.line-index { font-size: clamp(56px, 5vw, 76px); font-weight: 160; line-height: 0.78; letter-spacing: -0.07em; color: var(--brand); }
.line-code { font-size: 10.5px; color: var(--muted); text-align: right; max-width: 22ch; text-transform: uppercase; line-height: 1.5; }
.line h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.line-desc { color: var(--muted); font-size: 15.5px; max-width: 40em; }
.metric-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 48px; }
.metric { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.metric-value { font-size: clamp(40px, 4vw, 64px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.88; white-space: nowrap; }
.metric--secondary .metric-value { color: var(--signal); }
.metric-unit { font-family: var(--mono); font-size: 13px; font-weight: 600; border: 1px solid var(--ink); padding: 3px 7px; margin-bottom: 0.4em; }
.metric-label { flex-basis: 100%; font-size: 10.5px; color: var(--muted); text-transform: uppercase; }
.readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair-strong); }
.readouts > div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); }
.readouts > div:nth-child(odd) { padding-right: 16px; }
.readouts dt { font-size: 12.5px; color: var(--muted); }
.readouts dd { font-size: 17px; font-weight: 650; margin-top: 2px; white-space: nowrap; }
.scales { display: grid; gap: 14px; }
.scale-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.scale-label .mono { font-size: 10.5px; }
.scale-track {
  display: block; position: relative; height: 6px; background-color: var(--paper-2);
  background-image: linear-gradient(to right, transparent calc(25% - 1px), var(--hair-strong) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), var(--hair-strong) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), var(--hair-strong) 75%, transparent calc(75% + 1px));
}
.scale-track i {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--from) * 100%); width: max(3px, calc((var(--to) - var(--from)) * 100%));
  background: linear-gradient(90deg, var(--brand), var(--signal));
}
.line-cta, .tile-link {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 18px; border-top: 1px solid var(--hair); font-weight: 700; font-size: 15px; color: var(--brand);
}
.line-photo { position: relative; overflow: hidden; background: var(--night); aspect-ratio: 16 / 10; }
.line-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.development {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; align-items: end; gap: 20px 48px;
  padding: clamp(28px, 3vw, 44px); background: var(--paper-2);
  border: 1px solid var(--hair); border-top: 0;
}
.development .index-label { grid-column: 1 / -1; }
.development h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; line-height: 1.3; }
.development p { color: var(--muted); font-size: 15px; }

/* ───────── §02 Manufacturing window ───────── */
.range {
  background: var(--obsidian); color: #e6edf8; border-top: 0;
  background-image: linear-gradient(to bottom, rgba(160, 190, 240, 0.045) 1px, transparent 1px);
  background-size: 100% 96px;
}
.section-head--dark .index-label, .range .index-label, .catalog .index-label { color: var(--muted-dark); }
.section-head--dark .index-label > span:first-child, .range .index-label > span:first-child, .catalog .index-label > span:first-child { color: var(--sky); }
.range .lead, .catalog .lead { color: #b6c4db; }
.window { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border: 1px solid var(--hair-dark-strong); background: rgba(10, 22, 48, 0.55); }
.window-plot { grid-column: 1 / span 8; padding: clamp(16px, 2vw, 28px); border-right: 1px solid var(--hair-dark-strong); min-width: 0; }
.window-svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: visible; }
.plot-bg { fill: rgba(15, 33, 77, 0.45); }
.outside-label { fill: #8fa6c8; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; }
.zone { fill: #139cd8; stroke: rgba(56, 189, 248, 0.45); stroke-width: 1; transition: fill 220ms ease, fill-opacity 220ms ease, opacity 600ms ease; }
.zone[data-zone="0"] { fill-opacity: 0.42; }
.zone[data-zone="1"] { fill-opacity: 0.34; }
.zone[data-zone="2"] { fill-opacity: 0.27; }
.zone[data-zone="3"] { fill-opacity: 0.2; }
.zone[data-zone="4"] { fill-opacity: 0.14; }
.zone.is-active { fill: #38bdf8; fill-opacity: 0.55; stroke: #d6f1ff; }
.window-gridlines path { stroke: rgba(160, 190, 240, 0.16); stroke-width: 1; stroke-dasharray: 2 5; fill: none; }
.window-frontier { fill: none; stroke: #7dd6ff; stroke-width: 2.5; stroke-linejoin: miter; }
.plot-frame { fill: none; stroke: rgba(160, 190, 240, 0.34); }
.zone-labels text { fill: #f1f8ff; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; pointer-events: none; }
.zone-labels .zl-id { fill: #7dd6ff; font-family: var(--mono); font-size: 12px; }
.axis-ticks text { fill: #9fb0cb; font-family: var(--mono); font-size: 12px; }
.axis-title { fill: #c3d0e4; font-size: 12.5px; }
.crosshair { pointer-events: none; }
.crosshair-line { stroke: #ffffff; stroke-opacity: 0.75; stroke-width: 1; stroke-dasharray: 4 4; }
.crosshair-ring { fill: none; stroke: #ffffff; stroke-width: 1.5; }
.crosshair-dot { fill: #ffffff; }
.crosshair rect { fill: #38bdf8; }
.crosshair text { fill: var(--obsidian); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.window-svg.is-outside .crosshair-ring, .window-svg.is-outside .crosshair-dot { stroke: var(--warn); }
.window-svg.is-outside .crosshair-dot { fill: var(--warn); }
.window-svg.is-outside .crosshair rect { fill: var(--warn); }
.window-svg.is-tracking .crosshair-line { stroke-opacity: 1; }
.plot-hit { fill: transparent; cursor: crosshair; pointer-events: all; }
.window-caption { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--muted-dark); }
.window-caption .mono { font-size: 10.5px; color: var(--sky); }
.window-readout { grid-column: 9 / -1; padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.readout-head { display: flex; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; color: var(--muted-dark); }
.readout-head span:last-child { margin-left: auto; color: var(--sky); }
.live-dot { width: 7px; height: 7px; background: var(--sky); border-radius: 50%; box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6); }
.readout-list { border-top: 1px solid var(--hair-dark-strong); }
.readout-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair-dark); }
.readout-list dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted-dark); }
.readout-list dd { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; color: var(--white); text-align: right; }
.readout-status dd { font-size: 14px; padding: 5px 10px; background: rgba(56, 189, 248, 0.16); color: #bfe9ff; border: 1px solid rgba(56, 189, 248, 0.5); }
.readout-status dd[data-state="out"] { background: rgba(245, 181, 68, 0.14); color: #ffd99a; border-color: rgba(245, 181, 68, 0.6); }
.readout-controls { display: grid; gap: 14px; }
.readout-controls label { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted-dark); }
.readout-controls input { width: 100%; accent-color: var(--sky); }
.zone-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--hair-dark-strong); }
.zone-buttons button {
  display: grid; gap: 2px; padding: 9px 6px; text-align: left;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted-dark); letter-spacing: 0.02em;
  border-right: 1px solid var(--hair-dark); transition: background-color 200ms ease, color 200ms ease;
}
.zone-buttons button:last-child { border-right: 0; }
.zone-buttons button b { font-size: 12px; color: var(--sky); }
.zone-buttons button:hover { background: rgba(56, 189, 248, 0.08); }
.zone-buttons button[aria-pressed="true"] { background: rgba(56, 189, 248, 0.2); color: var(--white); }
.readout-hint { font-size: 12.5px; color: var(--muted-dark); line-height: 1.6; }
.tolerance-strip {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 20px 40px; align-items: center;
  padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--hair-dark-strong); border-top: 0;
}
.tolerance-value { font-size: clamp(46px, 5vw, 78px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin-top: 12px; color: var(--white); white-space: nowrap; }
.tolerance-value small { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted-dark); margin-left: 10px; }
.tolerance-comparison { display: grid; gap: 12px; }
.tolerance-bar { display: grid; grid-template-columns: 64px 1fr 66px; align-items: center; gap: 14px; font-size: 13px; color: var(--muted-dark); }
.tolerance-bar > div { height: 6px; background: rgba(255, 255, 255, 0.08); }
.tolerance-bar > div > i { display: block; height: 100%; background: rgba(160, 190, 240, 0.55); }
.tolerance-bar.special > div > i { background: linear-gradient(90deg, var(--signal), var(--sky)); }
.tolerance-bar b { color: var(--white); font-weight: 650; text-align: right; }
.tolerance-note { font-size: 12.5px; color: var(--muted-dark); line-height: 1.65; }

/* ───────── §03 Products bento ───────── */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; border-top: 1px solid var(--hair-strong); border-left: 1px solid var(--hair); }
.tile {
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: clamp(24px, 2.8vw, 42px); background: var(--white);
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}

.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tile-index { font-size: clamp(54px, 5vw, 80px); font-weight: 160; line-height: 0.78; letter-spacing: -0.07em; color: var(--brand); }
.tile-head .mono { font-size: 10.5px; color: var(--muted); text-align: right; text-transform: uppercase; line-height: 1.5; }
.tile h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.tile-intro { color: var(--muted); font-size: 15px; }
.tile-sub { font-size: 13px; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; padding: 5px 11px; border: 1px solid var(--hair-strong); border-radius: 999px; white-space: nowrap; }
.pill--strong { background: var(--ink); border-color: var(--ink); color: var(--white); }
.temper-chart { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hair-strong); }
.temper-chart figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.temper-chart figcaption .mono { font-size: 10.5px; }
.temper-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 76px; align-items: center; gap: 14px; }
.temper-row b { font-size: 12.5px; }
.temper-row > span:last-child { font-size: 12.5px; text-align: right; color: var(--muted); }
.temper-track { position: relative; height: 12px; background: var(--paper); }
.temper-track i {
  position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 100%); width: calc((var(--to) - var(--from)) * 100%);
  background: linear-gradient(90deg, var(--brand), var(--signal));
}
.temper-track i.open { -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }
.carbon { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hair-strong); }
.carbon-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.carbon-label b { color: var(--ink); font-size: 14px; }
.carbon-track { position: relative; height: 12px; background: var(--paper); }
.carbon-track i { position: absolute; top: 0; bottom: 0; left: 20%; width: 60%; background: linear-gradient(90deg, var(--signal), var(--brand)); }
.carbon-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.big-grades { font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tile-foot { font-size: 11.5px; color: var(--muted); }
.strap-bars { display: grid; gap: 9px; }
.strap-bars > div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px; align-items: center; gap: 12px; }
.strap-bars b { font-size: 11px; }
.strap-bars span { height: 6px; background: var(--paper); position: relative; }
.strap-bars i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--brand), var(--signal)); }
.strap-bars em { font-style: normal; font-size: 12px; text-align: right; color: var(--muted); }
/* Secondary automotive product summary */
.weatherstrip-bar { display: flex; align-items: center; gap: 24px; padding: 26px 30px; margin-top: 20px; border: 1px solid var(--hair); background: #e9eef4; }
.weatherstrip-index { color: var(--brand); font-size: 30px; font-weight: 300; }
.weatherstrip-bar h3 { font-size: 19px; line-height: 1.4; }
.weatherstrip-bar p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.weatherstrip-types { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.weatherstrip-types li { padding: 5px 8px; border: 1px solid #bdcbd9; border-radius: 4px; font-size: 11px; }
.weatherstrip-bar .text-link { font-size: 13px; white-space: nowrap; }

/* Appendix drawer */
.appendix-drawer { margin-top: clamp(32px, 4vw, 56px); border: 1px solid var(--hair-strong); background: var(--white); }
.appendix-drawer > summary {
  list-style: none; cursor: pointer; display: grid; align-items: center; gap: 4px 28px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "code title toggle" "code meta toggle";
  padding: clamp(20px, 2.4vw, 30px);
}
.appendix-drawer > summary::-webkit-details-marker { display: none; }
.appendix-code { grid-area: code; font-size: 11px; color: var(--brand); border: 1px solid var(--hair-strong); padding: 8px 10px; text-transform: uppercase; }
.appendix-title { grid-area: title; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.03em; }
.appendix-meta { grid-area: meta; font-size: 13.5px; color: var(--muted); }
.appendix-toggle { grid-area: toggle; width: 48px; height: 48px; border: 1px solid var(--hair-strong); position: relative; transition: background-color 200ms ease; }
.appendix-toggle::before, .appendix-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 260ms var(--ease); }
.appendix-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.appendix-drawer[open] .appendix-toggle { background: var(--ink); }
.appendix-drawer[open] .appendix-toggle::before, .appendix-drawer[open] .appendix-toggle::after { background: var(--white); transform: translate(-50%, -50%) rotate(180deg); }
.appendix-drawer > summary:hover .appendix-toggle { border-color: var(--ink); }
.appendix-body { border-top: 1px solid var(--hair); padding: 0 clamp(16px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px); }
.appendix-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--hair); scrollbar-width: none; }
.appendix-tabs [role="tab"] {
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  padding: 16px 18px 14px; font-size: 14.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.appendix-tabs [role="tab"] small { font-size: 11px; color: var(--brand); }
.appendix-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.appendix-panel { display: grid; gap: 18px; padding-top: 26px; }
.table-scroll { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table caption { text-align: left; font-size: 15px; font-weight: 700; padding-bottom: 10px; letter-spacing: -0.01em; }
.spec-table th, .spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; white-space: nowrap; }
.spec-table thead th { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); background: var(--paper); border-bottom-color: var(--hair-strong); }
.spec-table tbody th { font-weight: 650; }
.spec-table td { color: #1f2a3d; }
.spec-table--dense th, .spec-table--dense td { padding: 9px 10px; font-size: 13px; }
.table-note { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-top: -6px; }

/* ───────── §05 Company ───────── */
.company { background: var(--white); }
.company-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.company-intro { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 28px; }
.company-intro h2 { font-size: clamp(34px, 4vw, 58px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.company-focus { border-left: 2px solid var(--signal); padding-left: 18px; }
.company-focus h3 { font-size: 18px; }
.company-focus p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.company-certs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cert-item {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; background: var(--paper);
  border: 1px solid var(--hair-strong); border-left: 3px solid var(--brand);
  word-break: keep-all; overflow-wrap: break-word;
}
.cert-item--clean { border-left-color: var(--signal); }
.cert-item .cert-code { font-size: 10.5px; font-weight: 700; color: var(--brand); letter-spacing: 0.08em; }
.cert-item--clean .cert-code { color: var(--brand-mid); }
.cert-item strong { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); }
.cert-item > span:last-child { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.signature { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--hair-strong); }
.signature .mono { font-size: 10.5px; color: var(--muted); }
.signature strong { font-size: 20px; letter-spacing: -0.02em; }
.timeline { grid-column: 7 / -1; border-top: 1px solid var(--hair-strong); }
.timeline li { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: 16px 24px; padding: 24px 0; border-bottom: 1px solid var(--hair); position: relative; }
.timeline time { font-size: clamp(34px, 3.4vw, 50px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; color: var(--ink); }
.timeline time small { font-size: 0.42em; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.timeline h3 { font-size: 17.5px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
.timeline p { color: var(--muted); font-size: 14.5px; margin-top: 5px; line-height: 1.65; word-break: keep-all; }

/* ───────── §06 Catalog ───────── */
.catalog {
  color: #e6edf8; border-top: 0;
  background:
    linear-gradient(158deg, var(--obsidian) 0%, #0a1834 46%, var(--cobalt) 78%, var(--brand) 100%);
}
.catalog-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: center; }
.catalog-copy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 26px; }
.catalog-copy h2 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; color: var(--white); }
.toc { border-top: 1px solid var(--hair-dark-strong); }
.toc-title { font-size: 10.5px; color: var(--muted-dark); padding: 12px 0 4px; text-transform: uppercase; }
.toc li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair-dark); font-size: 14.5px; }
.toc li b { font-size: 11px; font-weight: 500; color: var(--muted-dark); }
.catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
#catalog-status { font-size: 11.5px; color: var(--muted-dark); }
.book-stage { grid-column: 8 / -1; position: relative; padding: 20px; background: radial-gradient(70% 60% at 50% 42%, rgba(56, 189, 248, 0.14), transparent 70%); }
.book {
  position: relative; width: min(100%, 360px); margin-inline: auto;
  filter: drop-shadow(28px 36px 34px rgba(0, 0, 0, 0.45));
}
.book-cover { width: 100%; height: auto; aspect-ratio: 566 / 800; }
.book-stage figcaption { display: flex; align-items: center; gap: 10px; margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--hair-dark-strong); font-size: 10.5px; color: var(--muted-dark); }
.book-stage figcaption img { width: 20px; height: auto; }
.book-stage figcaption b { margin-left: auto; color: var(--white); font-weight: 600; white-space: nowrap; }

/* ───────── §07 Contact ───────── */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.contact-info { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; }
.contact-info h2 { font-size: clamp(32px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.12; }
.contact-channels { border-top: 1px solid var(--hair-strong); }
.channel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--hair); text-align: left; }
.channel small { grid-column: 1; font-size: 10.5px; color: var(--muted); }
.channel strong { grid-column: 1; font-size: 22px; letter-spacing: -0.02em; font-weight: 650; }
.channel > span { grid-column: 2; grid-row: 1 / span 2; color: var(--brand); font-weight: 700; }
.channel--phone strong { font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.04em; font-weight: 700; }
.channel--phone:hover strong, .channel--email:hover strong, .channel--kakao:hover strong { color: var(--brand); }
.channel--kakao small { color: #8a6400; font-weight: 700; }
address { font-style: normal; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.spec-example {
  position: relative; display: grid; gap: 12px; padding: 22px 22px 20px;
  border: 1px dashed rgba(29, 50, 131, 0.5);
  background: repeating-linear-gradient(-45deg, rgba(29, 50, 131, 0.035) 0 8px, transparent 8px 16px), var(--white);
}
.example-badge {
  justify-self: start; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  background: #ffd27a; color: #3a2800; padding: 5px 10px; line-height: 1.4;
}
.spec-example h3 { font-size: 17px; letter-spacing: -0.01em; }
.example-guide { font-size: 14px; color: var(--muted); line-height: 1.6; }
.example-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair-strong); }
.example-sheet > div { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.example-sheet dt { font-size: 12px; color: var(--muted); }
.example-sheet dd { font-size: 17px; font-weight: 700; margin-top: 2px; letter-spacing: 0.01em; }
.example-line { font-size: 12px; color: var(--muted); }
.example-note { font-size: 12.5px; color: #6b4b00; line-height: 1.6; }
.channel-note { font-size: 13px; color: var(--muted); }
.inquiry-form { grid-column: 7 / -1; background: var(--white); border: 1px solid var(--hair-strong); padding: clamp(22px, 3vw, 40px); }
.form-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--ink); font-size: 17px; font-weight: 700; }
.form-topline small { font-family: var(--mono); font-weight: 500; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form-grid label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.form-grid .span-two { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: 0;
  background: var(--paper); font-size: 15px; font-weight: 400;
}
.form-grid textarea { padding: 14px; resize: vertical; min-height: 120px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { background: var(--white); }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 18px; line-height: 1.65; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.button--kakao {
  background: #fee500; color: #191919; border-color: #e6cf00; font-weight: 700;
}
.button--kakao:hover { background: #f5dc00; border-color: #191919; }
.copy-button { min-height: 52px; padding: 0 20px; border: 1px solid var(--hair-strong); font-weight: 700; font-size: 15px; }
.copy-button:hover { border-color: var(--ink); }
.inquiry-result {
  margin-top: 16px; padding: 16px 18px;
  border: 1px solid var(--brand); border-left: 4px solid var(--brand);
  background: #f0f6ff; color: var(--ink); font-size: 14px; line-height: 1.65;
}
.inquiry-result strong { display: block; font-size: 15px; color: var(--brand); margin-bottom: 4px; }
#form-status { margin-top: 12px; font-size: 13.5px; color: var(--brand); min-height: 1.4em; }

/* ───────── Footer ───────── */
.footer { background: var(--obsidian); color: #b6c4db; padding-top: clamp(56px, 7vw, 96px); }
.footer-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px 56px; padding-bottom: 48px; }
.footer-identity { display: flex; flex-direction: column; gap: 12px; }
.footer-logo img { width: 240px; height: auto; }
.footer-brand { color: var(--white); font-weight: 700; margin-top: 8px; }
.footer-identity p { font-size: 14px; line-height: 1.7; }
.footer-column { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-column h3 { font-size: 11px; color: var(--sky); text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }
.footer-column a:hover { color: var(--white); }
.company-details { display: grid; gap: 6px; margin-top: 8px; }
.company-details div { display: flex; gap: 10px; }
.company-details dt { color: var(--muted-dark); }
.company-details dd { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 20px; border-top: 1px solid var(--hair-dark); font-size: 13px; }
.footer-bottom a:hover { color: var(--white); }
.footer-footnotes { padding-bottom: 28px; font-size: 12px; color: #8597b4; }

/* ───────── Dialog ───────── */
dialog { border: 1px solid var(--hair-strong); padding: 28px; width: min(560px, calc(100% - 32px)); background: var(--white); color: var(--ink); }
dialog::backdrop { background: rgba(6, 13, 29, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.dialog-head h2 { font-size: 21px; letter-spacing: -0.02em; }
#dialog-close { font-size: 26px; line-height: 1; width: 40px; height: 40px; border: 1px solid var(--hair-strong); }
#dialog-message { color: var(--muted); }
#draft-preview { width: 100%; margin-top: 16px; padding: 14px; border: 1px solid var(--hair-strong); font-size: 13.5px; background: var(--paper); }
#dialog-copy { margin-top: 14px; }
#dialog-status { margin-top: 10px; font-size: 13.5px; color: var(--brand); }
.noscript { padding: 16px var(--edge); background: #ffd27a; }

/* ───────── Responsive ───────── */
@media (max-width: 1180px) {
  .line-grid { grid-template-columns: 1fr; }
  .line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .line-photo { aspect-ratio: auto; min-height: 320px; }
  .window-plot { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--hair-dark-strong); }
  .window-readout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
  .readout-head, .readout-hint { grid-column: 1 / -1; }
  .zone-buttons { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .menu-button { display: block; }
  #navigation {
    position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--edge) 20px; background: rgba(247, 248, 250, 0.98); border-bottom: 1px solid var(--hair);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }
  #navigation.open { transform: none; opacity: 1; visibility: visible; }
  #navigation > a { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
  #navigation > a:not(.nav-contact)::after { display: none; }
  .nav-contact { margin-top: 12px; justify-content: space-between; padding: 14px 16px !important; border-bottom: 0 !important; }
  .section-head h2 { grid-column: 1 / -1; }
  .section-head .lead { grid-column: 1 / span 10; }
  .company-intro, .timeline, .catalog-copy, .book-stage, .contact-info, .inquiry-form { grid-column: 1 / -1; }
  .tolerance-strip { grid-template-columns: 1fr 1fr; }
  .tolerance-note { grid-column: 1 / -1; }
  .development { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .line { display: flex; }
  .line-photo { aspect-ratio: 16 / 10; min-height: 0; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .weatherstrip-bar { align-items: start; flex-wrap: wrap; padding: 22px; gap: 14px; }
  .weatherstrip-bar > div { flex: 1; min-width: 200px; }
  .weatherstrip-types { margin-left: 0; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n + 2) { border-bottom: 1px solid var(--hair); }
  .fact strong { font-size: clamp(28px, 8.2vw, 44px); }
  .process-flow li { font-size: 13px; flex-direction: column; gap: 4px; }
  .company-certs { grid-template-columns: 1fr; gap: 12px; }
  .cert-item { padding: 16px 18px; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .timeline time { font-size: 32px; }
  .window-readout { grid-template-columns: 1fr; }
  .window-plot { overflow-x: auto; }
  .window-svg { min-width: 640px; touch-action: manipulation; }
  .example-sheet { grid-template-columns: 1fr; }
  .zone-buttons { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .tolerance-strip { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .insert-types { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .book-stage { padding: 48px 40px 24px; }
  .appendix-drawer > summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code toggle" "title toggle" "meta meta"; }
  .appendix-code { justify-self: start; }
  .header { gap: 12px; }
  .brand-logo { width: 180px; height: 36px; }
  .language button { padding: 7px 7px; font-size: 10.5px; }
}
@media (max-width: 420px) {
  .brand-logo { width: 144px; height: 29px; }
  .header, .header-tools { gap: 8px; }
  .language button { padding: 7px 6px; font-size: 10px; letter-spacing: 0; }
  .readouts { grid-template-columns: 1fr; }
  .metric-value { font-size: 44px; }
  .temper-row { grid-template-columns: 46px minmax(0, 1fr) 64px; gap: 8px; }
  .strap-bars > div { grid-template-columns: 78px minmax(0, 1fr) 40px; gap: 8px; }
}

/* Japanese has no word spaces: keep-all would make whole sentences unbreakable. */
html[lang="ja"] :is(p, h1, h2, h3, h4, li, dd, dt, th, td, figcaption, label, summary, span, a, address) { word-break: normal; line-break: strict; }

/* Live Studio Wizard */
.studio-pending { display: grid; place-items: center; min-height: 220px; height: 100%; padding: 30px; color: #b7cfdf; background: #10233b; text-align: center; }
.equipment-motion { position: relative; width: 100%; height: 100%; min-height: 220px; background: radial-gradient(ellipse at center, #1a4269, #08172c); }
.equipment-motion svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.equipment-motion > span { position: absolute; bottom: 16px; left: 20px; color: #b5d9ec; font-size: 10px; }
.catalog-motion { display: flex; flex-direction: column; justify-content: space-between; padding: 36px 28px; aspect-ratio: 566 / 800; background: linear-gradient(150deg, #c6eaf8, #f6faff 60%, #2777a7); color: #142f62; }
.catalog-motion > span { font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1.05; }
.catalog-motion > small { letter-spacing: .1em; }
#studio-toggle-btn { position: fixed; right: 22px; bottom: 20px; z-index: 80; padding: 15px 20px; border: 1px solid #6cb7e2; border-radius: 30px; background: #10284b; color: white; box-shadow: 0 8px 30px #06152940; font-size: 13px; font-weight: 650; }
#studio-toggle-btn[aria-pressed="true"] { background: #116b9b; }
#studio-toggle-btn:disabled { opacity: .65; }
#studio-workspace { position: fixed; right: 22px; bottom: 86px; z-index: 79; width: min(350px, calc(100vw - 40px)); max-height: 46vh; overflow-y: auto; padding: 20px; background: #f5faff; color: #10284b; border: 1px solid #9bcbe6; border-radius: 16px; box-shadow: 0 12px 40px #06152938; font-size: 12px; }
.studio-help { font-weight: 650; }
#studio-status { margin: 8px 0 12px; color: #17527a; }
#studio-workspace label { display: block; margin-bottom: 6px; }
.studio-inline { margin: 24px auto 0; padding: 18px; border: 1px dashed #5e9aba; border-radius: 12px; background: #f0f8ff; color: #163656; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; width: 100%; max-width: 1280px; position: relative; z-index: 3; }
.line > .studio-inline { width: calc(100% - 32px); margin: 0 16px 16px; grid-column: 1 / -1; }
.studio-inline > strong { flex: 1 1 160px; }
.studio-inline label { flex-basis: 100%; font-weight: 600; }
.studio-inline textarea, #studio-notes { display: block; width: 100%; resize: vertical; border: 1px solid #b2cbdf; border-radius: 6px; background: white; color: #153653; padding: 10px; min-height: 58px; font-size: 13px; }
.studio-inline > span { font-size: 12px; }
.studio-inline button, #studio-notes-save, .studio-options button, .studio-upload { padding: 9px 12px; border-radius: 6px; border: 1px solid #9fbfd7; background: white; color: #154d78; font-size: 12px; font-weight: 600; cursor: pointer; }
.studio-inline button:hover, .studio-options button:hover { background: #ddefff; }
#studio-notes-save { margin-top: 8px; }
.studio-editing [data-studio-section] { scroll-margin-top: 90px; }
#studio-picker { width: min(1080px, calc(100vw - 28px)); max-height: 88dvh; padding: 24px; border: 1px solid #c4d8e6; border-radius: 18px; background: #f6f9fc; color: #152e4c; }
#studio-picker::backdrop { background: #061327b8; backdrop-filter: blur(5px); }
.studio-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.studio-picker-head .mono { font-size: 10px; color: #417593; }
.studio-picker-head h2 { margin-top: 6px; font-size: 22px; }
#studio-picker-close { font-size: 28px; width: 42px; height: 42px; border: 1px solid #b8ccd9; border-radius: 50%; flex-shrink: 0; }
.studio-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 10px; }
.studio-options [aria-pressed="true"] { background: #153d68; color: white; }
#studio-picker-status { margin-bottom: 18px; font-size: 13px; }
.studio-candidates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.studio-candidate { overflow: hidden; border: 2px solid #d0dee7; border-radius: 10px; background: white; text-align: left; }
.studio-candidate:hover, .studio-candidate[aria-pressed="true"] { border-color: #1386bd; box-shadow: 0 0 0 2px #1386bd24; }
.studio-candidate img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.studio-candidate > span { display: block; padding: 10px; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .studio-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #studio-picker { padding: 16px; }
  #studio-toggle-btn { right: 12px; bottom: 12px; font-size: 11px; padding: 13px 16px; }
  #studio-workspace { right: 12px; bottom: 72px; max-height: 30vh; padding: 14px; }
  .studio-picker-head h2 { font-size: 17px; }
}

.footer .studio-inline { grid-column: 1 / -1; }

/* ───────── B2B Spec & Quote Chatbot ───────── */
.chatbot-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 78;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 20px;
  background: var(--obsidian); color: var(--white);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 14px 34px rgba(6, 13, 29, 0.36);
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  transition: transform 180ms var(--ease), background 180ms ease, border-color 180ms ease;
}
.chatbot-launcher:hover { background: var(--cobalt); border-color: var(--sky); transform: translateY(-2px); }
.chatbot-launcher[aria-expanded="true"] { background: var(--brand); border-color: var(--sky); }
.chatbot-launcher-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sky); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22);
}
.chatbot-panel {
  position: fixed; right: 22px; bottom: 84px; z-index: 79;
  width: min(410px, calc(100vw - 28px)); max-height: min(620px, calc(100dvh - 110px));
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 0 24px 56px rgba(6, 13, 29, 0.34);
}
.chatbot-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 18px; background: var(--obsidian); color: var(--white);
  border-bottom: 1px solid var(--hair-dark-strong);
}
.chatbot-eyebrow { display: block; font-size: 10px; color: var(--sky); letter-spacing: 0.12em; margin-bottom: 3px; }
.chatbot-head h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; }
.chatbot-head p { font-size: 12px; color: var(--muted-dark); margin-top: 2px; line-height: 1.45; }
.chatbot-close {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--hair-dark-strong); color: var(--white);
  font-size: 22px; line-height: 1;
}
.chatbot-close:hover { border-color: var(--sky); color: var(--sky); }
.chatbot-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); max-height: 310px;
}
.chat-msg {
  max-width: 92%; padding: 12px 14px; font-size: 13.5px; line-height: 1.6;
  border: 1px solid var(--hair-strong); background: var(--white);
  word-break: keep-all; overflow-wrap: break-word;
}
.chat-msg--bot { align-self: flex-start; border-left: 3px solid var(--brand); }
.chat-msg--user { align-self: flex-end; background: var(--cobalt); color: var(--white); border-color: var(--cobalt); }
.chat-msg strong { display: block; font-size: 13px; color: var(--brand); margin-bottom: 4px; }
.chat-msg--user strong { color: var(--sky); }
.chat-msg p + p { margin-top: 6px; }
.chat-quick-form { display: grid; gap: 8px; margin-top: 8px; }
.chat-quick-form input, .chat-quick-form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--hair-strong);
  background: var(--paper); font-size: 13px;
}
.chat-quick-form button, .chat-inline-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px; margin-top: 4px;
  background: var(--brand); color: var(--white); font-size: 12.5px; font-weight: 700;
}
.chat-inline-btn--kakao { background: #fee500; color: #191919; }
.chatbot-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; background: var(--white); border-top: 1px solid var(--hair);
}
.chat-chip {
  padding: 6px 10px; border: 1px solid var(--hair-strong);
  background: var(--paper); color: var(--ink);
  font-size: 12px; font-weight: 600; text-align: left;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.chat-chip:hover { border-color: var(--brand); background: #edf4ff; color: var(--brand); }
.chatbot-input-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  border-top: 1px solid var(--hair-strong); background: var(--white);
}
.chatbot-input-bar input {
  min-height: 46px; padding: 0 14px; border: 0; background: transparent; font-size: 14px;
}
.chatbot-input-bar input:focus { outline: none; background: #f8fbff; }
.chatbot-send {
  min-height: 46px; padding: 0 18px;
  background: var(--ink); color: var(--white); font-size: 13.5px; font-weight: 700;
}
.chatbot-send:hover { background: var(--brand); }
@media (max-width: 760px) {
  .chatbot-launcher { right: 14px; bottom: 14px; min-height: 46px; padding: 0 16px; font-size: 13px; }
  .chatbot-panel { right: 12px; bottom: 68px; width: calc(100vw - 24px); max-height: calc(100dvh - 88px); }
}