/* ==========================================================================
   INTOWN — site.css
   공통 디자인 시스템: 토큰 · 베이스 · 레이아웃 · 컴포넌트
   모든 페이지가 공유합니다. 페이지 전용 스타일은 assets/css/pages/*.css 에 둡니다.
   ========================================================================== */

/* ---------- Fonts ---------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  /* 공백(U+0020·U+00A0)은 제외 — 한글 라벨의 띄어쓰기가 고정폭으로 벌어지지 않도록 Pretendard 공백을 씁니다 */
  unicode-range: U+0021-007E, U+00A1-024F, U+2010-205E, U+20AC, U+2122, U+2190-21FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0021-007E, U+00A1-024F, U+2010-205E, U+20AC, U+2122, U+2190-21FF;
}

/* ---------- Tokens --------------------------------------------------------- */
:root {
  /* Brand — 로고에서 추출 (green #78B850 → blue #2848A8) */
  --c-green: #78b850;
  --c-teal: #3e9a86;
  --c-blue: #2848a8;
  --c-green-hi: #a0d970;
  --c-teal-hi: #4fc4ad;
  --c-blue-hi: #7497ff;
  --grad-brand: linear-gradient(100deg, #6aab45 0%, #2f8f7d 46%, #2a55c4 100%);
  --grad-brand-hi: linear-gradient(100deg, #a3dc74 0%, #52c6ae 46%, #7a9bff 100%);

  /* Neutrals — light */
  --paper: #f3f3ef;
  --paper-2: #e9e9e3;
  --white: #ffffff;
  --ink: #0a0d13;
  --ink-2: #3a404b;
  --ink-3: #5f6673;
  --line: rgba(10, 13, 19, 0.11);
  --line-strong: rgba(10, 13, 19, 0.2);

  /* Neutrals — dark */
  --night: #05070c;
  --night-2: #090d15;
  --night-3: #0f1420;
  --night-4: #171e2c;
  --fog: #eceef2;
  --fog-2: #a4acba;
  --fog-3: #7d8697;
  --line-d: rgba(255, 255, 255, 0.09);
  --line-d-strong: rgba(255, 255, 255, 0.18);

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "Pretendard Variable", Pretendard, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.875rem, 1.1rem + 6.3vw, 7.25rem);
  --fs-h1: clamp(2.5rem, 1.35rem + 4.1vw, 5.25rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.7vw, 3.875rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.15vw, 2.25rem);
  --fs-h4: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-mono: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.32;
  --lh-body: 1.72;

  /* Space & shape */
  --gutter: clamp(20px, 4.4vw, 76px);
  --container: 1400px;
  --section-y: clamp(96px, 11vw, 176px);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.9s;

  --header-h: 76px;
}

/* 섹션 테마 — 컴포넌트는 아래 문맥 변수만 사용합니다 */
:root,
[data-theme="light"] {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line-c: var(--line);
  --line-c2: var(--line-strong);
  --card: var(--white);
  --accent: var(--c-blue);
  --accent-2: var(--c-green);
  --grad: var(--grad-brand);
  --shadow-frame: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 40px 80px -40px rgba(10, 20, 40, 0.35),
    0 12px 24px -12px rgba(10, 20, 40, 0.18);
}
[data-theme="dark"] {
  --bg: var(--night);
  --bg-2: var(--night-2);
  --fg: var(--fog);
  --fg-2: var(--fog-2);
  --fg-3: var(--fog-3);
  --line-c: var(--line-d);
  --line-c2: var(--line-d-strong);
  --card: var(--night-3);
  --accent: var(--c-blue-hi);
  --accent-2: var(--c-green-hi);
  --grad: var(--grad-brand-hi);
  --shadow-frame: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}
/* 테마가 지정된 요소는 자기 문맥의 글자색을 가집니다 (상속된 색이 섞이지 않도록) */
[data-theme] { color: var(--fg); }
main > [data-theme]:not(.site-header) { background-color: var(--bg); }

/* ---------- Reset / base --------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.011em;
  font-feature-settings: "ss06", "tnum" 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]), .list-reset { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.032em; line-height: var(--lh-tight); text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 650; }
::selection { background: rgba(116, 151, 255, 0.28); }
:focus-visible { outline: 2px solid var(--c-blue-hi); outline-offset: 3px; border-radius: 4px; }
[data-theme="light"] :focus-visible { outline-color: var(--c-blue); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  padding: 10px 16px; border-radius: 999px; background: var(--fog); color: var(--ink);
  font-weight: 600; transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ---------- Layout --------------------------------------------------------- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - var(--gutter) * 2, 1040px); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--fg); }
.section--tight { padding-block: clamp(72px, 8vw, 120px); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.rule { height: 1px; background: var(--line-c); border: 0; margin: 0; }

/* ---------- Type helpers --------------------------------------------------- */
.t-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.045em; font-weight: 650; }
.t-h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.04em; font-weight: 650; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.036em; font-weight: 650; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.03em; font-weight: 620; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.38; letter-spacing: -0.022em; font-weight: 620; }
.t-lead { font-size: var(--fs-lead); line-height: 1.66; color: var(--fg-2); letter-spacing: -0.016em; }
.t-body { font-size: var(--fs-body); color: var(--fg-2); }
.t-sm { font-size: var(--fs-sm); line-height: 1.65; color: var(--fg-2); }
.t-xs { font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-3); }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.t-muted { color: var(--fg-3); }
.t-fg { color: var(--fg); }
.t-grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* Eyebrow — 섹션 라벨 (모노 · 대문자 · 인덱스) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3);
  line-height: 1.4;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 1.5px;
  background: var(--grad);
}
.eyebrow--plain::before { display: none; }
.eyebrow__index { color: var(--fg-2); }
.eyebrow__sep { width: 18px; height: 1px; background: var(--line-c2); }

/* Section head — 제목(좌) + 설명(우) */
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px; align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.section-head__title { grid-column: 1 / span 7; display: grid; gap: 24px; }
.section-head__desc { grid-column: 9 / span 4; display: grid; gap: 20px; }
.section-head--stack .section-head__title { grid-column: 1 / span 9; }
.section-head--stack .section-head__desc { grid-column: 1 / span 7; }
@media (max-width: 960px) {
  .section-head__title, .section-head__desc,
  .section-head--stack .section-head__title, .section-head--stack .section-head__desc { grid-column: 1 / -1; }
}

/* ---------- Buttons & links ------------------------------------------------ */
.btn {
  --btn-bg: var(--fg); --btn-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 54px; padding: 0 10px 0 24px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.5s var(--ease-out);
  isolation: isolate; overflow: hidden;
}
.btn__icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--btn-fg); color: var(--btn-bg);
}
.btn__icon svg { width: 16px; height: 16px; transition: transform 0.5s var(--ease-out); }
.btn:hover .btn__icon svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); box-shadow: inset 0 0 0 1px var(--line-c2); }
.btn--ghost .btn__icon { background: var(--fg); color: var(--bg); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fg-3); }
.btn--noicon { padding: 0 26px; }
.btn--sm { height: 42px; padding: 0 18px; font-size: 0.9375rem; gap: 10px; }
.btn--sm.btn--withicon { padding: 0 6px 0 18px; }
.btn--sm .btn__icon { width: 30px; height: 30px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: var(--fs-sm); color: var(--fg);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size 0.5s var(--ease-out);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.5s var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Tags & chips --------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 999px; border: 1px solid var(--line-c2); color: var(--fg-2);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
}
.tag--mono { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tag--solid { border-color: transparent; background: var(--bg-2); color: var(--fg); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

.badge-soon {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px 0 9px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent);
  border: 1px solid var(--line-c2);
}
.badge-soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-green-hi);
  box-shadow: 0 0 0 0 rgba(160, 217, 112, 0.6); animation: pulse 2.2s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(160, 217, 112, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(160, 217, 112, 0); } 100% { box-shadow: 0 0 0 0 rgba(160, 217, 112, 0); } }

/* ---------- Cards & frames ------------------------------------------------- */
.card {
  position: relative; background: var(--card); border: 1px solid var(--line-c);
  border-radius: var(--radius-l); padding: clamp(22px, 2.4vw, 34px);
}
.card--flat { background: transparent; }

/* 제품 화면 프레임 — 상단 계기판 바 + 실제 스크린샷 */
.frame {
  position: relative; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: #0c111b; box-shadow: var(--shadow-frame);
  border: 1px solid var(--line-c);
}
.frame__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 34px; padding: 0 14px; background: #0c111b; color: rgba(236, 238, 242, 0.62);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.frame__bar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green-hi); box-shadow: 0 0 10px rgba(160, 217, 112, 0.8); flex: none; }
.frame__media { position: relative; background: #0c111b; }
.frame__media img { width: 100%; height: 100%; object-fit: cover; }
.frame--light, .frame--light .frame__bar, .frame--light .frame__media { background: #fbfbf9; }
.frame--light .frame__bar { color: var(--ink-3); border-bottom-color: var(--line); }

.media-cap { margin-top: 12px; font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.55; }

/* ---------- Stats ---------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-c); }
.stat { padding: clamp(24px, 2.6vw, 40px) clamp(0px, 1.4vw, 24px) clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line-c); display: grid; gap: 14px; align-content: start; }
.stat + .stat { padding-left: clamp(16px, 1.8vw, 28px); border-left: 1px solid var(--line-c); }
.stat-grid > .stat:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.stat__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.stat__value { display: flex; align-items: baseline; gap: 6px; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem); line-height: 0.95; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat__unit { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3125rem); font-weight: 600; letter-spacing: -0.02em; color: var(--fg-2); }
.stat__note { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; }
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid > .stat:nth-child(4n + 1) { border-left: 1px solid var(--line-c); padding-left: clamp(16px, 1.8vw, 28px); }
  .stat-grid > .stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

/* ---------- Key-value list (사양 · 개요 표) ----------------------------------- */
.kv { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; border-top: 1px solid var(--line-c); }
.kv > dt, .kv > dd { padding: 16px 0; border-bottom: 1px solid var(--line-c); }
.kv > dt { font-size: var(--fs-sm); color: var(--fg-3); padding-right: 16px; }
.kv > dd { font-size: var(--fs-sm); color: var(--fg); font-weight: 500; }

/* ---------- Data table ----------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--line-c); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
.table th, .table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line-c); vertical-align: top; }
.table thead th { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); background: color-mix(in oklab, var(--fg) 3%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td { color: var(--fg-2); }
.table td:first-child { color: var(--fg); font-weight: 600; }

/* ---------- Bullets -------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 22px; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.6; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 8px; height: 1.5px; background: var(--grad); }

/* ---------- Header --------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  color: var(--fg); transition: transform 0.6s var(--ease-out), background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.site-header[data-theme] { background: transparent; }
.site-header.is-scrolled { background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--line-c); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.menu-open { transform: none; }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.site-logo { position: relative; display: block; width: 136px; height: 46px; flex: none; }
.site-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: opacity 0.35s; }
.site-logo__on-light { opacity: 0; }
[data-theme="light"] .site-logo__on-dark,
.site-header[data-theme="light"] .site-logo__on-dark { opacity: 0; }
[data-theme="light"] .site-logo__on-light,
.site-header[data-theme="light"] .site-logo__on-light { opacity: 1; }
.site-nav { margin-left: auto; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 550; letter-spacing: -0.01em; color: var(--fg);
  transition: background-color 0.25s, color 0.25s; opacity: 0.86;
}
.site-nav__link:hover, .site-nav__item.is-open > .site-nav__link { opacity: 1; background: color-mix(in oklab, var(--fg) 8%, transparent); }
.site-nav__link[aria-current="page"] { opacity: 1; }
.site-nav__link[aria-current="page"]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grad); margin-left: 2px; }
.site-nav__link svg { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.3s; }
.site-nav__item.is-open > .site-nav__link svg { transform: rotate(180deg); }

/* Mega panel */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; width: min(720px, 90vw);
  transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.3s;
  background: var(--night-3); color: var(--fog); border: 1px solid var(--line-d-strong); border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55); padding: 10px;
  --fg: var(--fog); --fg-2: var(--fog-2); --fg-3: var(--fog-3); --line-c: var(--line-d);
}
.site-nav__item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s; }
.mega::before { content: ""; position: absolute; inset: -14px 0 auto 0; height: 14px; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega__link { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; transition: background-color 0.2s; }
.mega__link:hover, .mega__link:focus-visible { background: rgba(255, 255, 255, 0.06); }
.mega__title { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--fog); letter-spacing: -0.015em; }
.mega__desc { font-size: 0.8125rem; line-height: 1.5; color: var(--fog-2); }
.mega__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 14px 16px 6px; border-top: 1px solid var(--line-d); font-size: 0.8125rem; color: var(--fog-2); }

.site-header__cta { flex: none; }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; flex: none; margin-left: auto; }
.menu-toggle__bars, .menu-toggle__bars::before { position: absolute; left: 12px; width: 20px; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out); }
.menu-toggle__bars { top: 18px; }
.menu-toggle__bars::before { content: ""; left: 0; top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { top: 21.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(-90deg); }

@media (max-width: 1080px) {
  .site-nav, .site-header__cta { display: none; }
  .menu-toggle { display: block; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--night); color: var(--fog);
  display: flex; flex-direction: column; padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-out), visibility 0.4s; overflow-y: auto;
  --fg: var(--fog); --fg-2: var(--fog-2); --fg-3: var(--fog-3); --line-c: var(--line-d); --bg: var(--night);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.mobile-menu__list > li { border-bottom: 1px solid var(--line-d); }
.mobile-menu__link { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 0; font-size: clamp(1.625rem, 6vw, 2.25rem); font-weight: 600; letter-spacing: -0.035em; }
.mobile-menu__link small { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--fog-3); font-weight: 400; }
.mobile-menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--fog-2); }
.mobile-menu__foot a { color: var(--fog); }

/* ---------- Page hero (서브 페이지 공통) -------------------------------------- */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(72px, 10vw, 150px)) 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.page-hero__inner { position: relative; z-index: 2; display: grid; gap: clamp(24px, 3vw, 40px); }
.page-hero__title { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.042em; font-weight: 650; max-width: 15em; }
.page-hero__lead { max-width: 58ch; font-size: var(--fs-lead); line-height: 1.66; color: var(--fg-2); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 28px; border-top: 1px solid var(--line-c); }
.page-hero__meta dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.page-hero__meta dd { margin: 4px 0 0; font-weight: 600; }
.page-hero__glow { position: absolute; inset: auto -10% -40% auto; width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; border-radius: 50%; background: radial-gradient(closest-side, rgba(82, 198, 174, 0.16), rgba(122, 155, 255, 0.08) 45%, transparent 70%); pointer-events: none; z-index: 1; }
.page-hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--line-c) 1px, transparent 1px), linear-gradient(90deg, var(--line-c) 1px, transparent 1px);
  background-size: 88px 88px; mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 65%); }

/* 서브 페이지 섹션 내비 (스티키) */
.subnav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-c); transition: top 0.6s var(--ease-out); }
.subnav.is-under-header { top: var(--header-h); }
.subnav { transition: top 0.6s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.4s; }
.subnav.is-past { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.subnav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
@media (max-width: 800px) { .subnav__list { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); padding-right: 28px; } }
.subnav__link { display: inline-flex; align-items: center; height: 54px; padding: 0 14px; white-space: nowrap; font-size: 0.875rem; font-weight: 550; color: var(--fg-3); border-bottom: 2px solid transparent; transition: color 0.25s, border-color 0.25s; }
.subnav__link:hover { color: var(--fg); }
.subnav__link.is-active { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------- Marquee -------------------------------------------------------- */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: var(--marquee-gap, 56px); animation: marquee var(--marquee-dur, 60s) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: var(--marquee-gap, 56px); flex: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--marquee-gap, 56px) / 2)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Tabs ----------------------------------------------------------- */
.tabs__list { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs__tab { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-c2); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.tabs__panel[hidden] { display: none; }

/* ---------- Accordion ------------------------------------------------------ */
.accordion { border-top: 1px solid var(--line-c); }
.accordion__item { border-bottom: 1px solid var(--line-c); }
.accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; text-align: left; font-size: var(--fs-h4); font-weight: 620; letter-spacing: -0.022em; }
.accordion__icon { position: relative; width: 14px; height: 14px; flex: none; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease-out); }
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out); }
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__body { padding: 0 0 28px; }

/* ---------- CTA band ------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; padding-block: clamp(96px, 12vw, 180px); background: var(--bg); color: var(--fg); }
.cta-band__inner { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: end; }
.cta-band__title { grid-column: 1 / span 8; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.042em; font-weight: 650; }
.cta-band__side { grid-column: 9 / span 4; display: grid; gap: 28px; }
.cta-band__contact { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--fg-2); }
.cta-band__contact a { color: var(--fg); font-weight: 600; display: inline-block; padding: 4px 0; margin: -4px 0; }
.cta-band__glow { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 78%); mask-image: linear-gradient(180deg, #000 45%, transparent 78%); position: absolute; left: 50%; bottom: -60%; width: 120vw; height: 90vw; max-height: 1200px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(79, 196, 173, 0.22), rgba(116, 151, 255, 0.12) 40%, transparent 72%); pointer-events: none; }
@media (max-width: 900px) { .cta-band__title, .cta-band__side { grid-column: 1 / -1; } }

/* ---------- Footer --------------------------------------------------------- */
.site-footer { position: relative; background: var(--night); color: var(--fog); padding: clamp(72px, 8vw, 112px) 0 32px; overflow: hidden;
  --bg: var(--night); --fg: var(--fog); --fg-2: var(--fog-2); --fg-3: var(--fog-3); --line-c: var(--line-d); --line-c2: var(--line-d-strong); }
.site-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--line-d); }
.site-footer__brand { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; }
.site-footer__brand img { width: 168px; height: auto; }
.site-footer__brand p { font-size: var(--fs-sm); color: var(--fog-2); line-height: 1.6; max-width: 32ch; }
.site-footer__nav { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.site-footer__col h2 { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fog-3); margin-bottom: 16px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__col a { font-size: 0.875rem; color: var(--fog-2); transition: color 0.2s; }
.site-footer__col a:hover { color: var(--fog); }
.site-footer__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line-d); }
.site-footer__office h3 { font-size: 0.875rem; font-weight: 600; color: var(--fog); margin-bottom: 8px; letter-spacing: -0.01em; }
.site-footer__office p { font-size: 0.8125rem; line-height: 1.7; color: var(--fog-2); }
.site-footer__office a { color: var(--fog-2); display: inline-block; padding: 4px 0; margin: -4px 0; }
.site-footer__office a:hover { color: var(--fog); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 28px; font-size: 0.75rem; color: var(--fog-3); }
.site-footer__sig { margin-top: clamp(48px, 7vw, 96px); font-size: clamp(2rem, 7.3vw, 6.9rem); line-height: 0.92; letter-spacing: -0.055em; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, rgba(236, 238, 242, 0.14), rgba(236, 238, 242, 0.02)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; user-select: none; }
@media (max-width: 960px) {
  .site-footer__brand, .site-footer__nav { grid-column: 1 / -1; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__offices { grid-template-columns: 1fr; }
}

/* ---------- Reveal (JS 활성 시에만 숨김) ------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + var(--d, 0ms)); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.965); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Utilities ------------------------------------------------------ */
.mt-0 { margin-top: 0 !important; }
.stack-8 > * + * { margin-top: 8px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-40 > * + * { margin-top: 40px; }
.divider-label { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3); }
.divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line-c); }
.source-note { font-size: 0.75rem; line-height: 1.6; color: var(--fg-3); }
.source-note strong { color: var(--fg-2); font-weight: 600; }

/* ==========================================================================
   Sub-page components (회사소개 · AI 플랫폼 · 산업 솔루션 · 사업실적 · 문의 공통)
   ========================================================================== */

/* ---------- Layout helpers ------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.split__a { grid-column: 1 / span 5; }
.split__b { grid-column: 7 / span 6; }
.split--even .split__a { grid-column: 1 / span 6; }
.split--even .split__b { grid-column: 7 / span 6; }
.split--wide-a .split__a { grid-column: 1 / span 7; }
.split--wide-a .split__b { grid-column: 9 / span 4; }
.split--center { align-items: center; }
@media (max-width: 960px) { .split__a, .split__b, .split--even .split__a, .split--even .split__b, .split--wide-a .split__a, .split--wide-a .split__b { grid-column: 1 / -1; } }
.sticky-col { position: sticky; top: calc(var(--header-h) + 72px); }
@media (max-width: 960px) { .sticky-col { position: static; } }

/* ---------- Product / solution section ------------------------------------ */
.prod { scroll-margin-top: calc(var(--header-h) + 54px); }
.prod + .prod { border-top: 1px solid var(--line-c); }
.prod__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.prod__title { grid-column: 1 / span 7; display: grid; gap: 22px; }
.prod__name { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem); line-height: 1.04; letter-spacing: -0.045em; font-weight: 650; }
.prod__aside { grid-column: 9 / span 4; display: grid; gap: 20px; }
.prod__media { margin-bottom: clamp(40px, 5vw, 72px); }
.prod__body { display: grid; gap: clamp(48px, 6vw, 88px); }
.prod__block { display: grid; gap: 28px; }
.prod__block-title { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.024em; }
@media (max-width: 960px) { .prod__title, .prod__aside { grid-column: 1 / -1; } }

/* 여러 화면 배치 */
.media-grid { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.media-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-grid--hero { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
.media-grid--hero > :first-child { grid-row: span 2; }
.media-grid figure { margin: 0; }
@media (max-width: 760px) { .media-grid--2, .media-grid--3, .media-grid--hero { grid-template-columns: 1fr; } .media-grid--hero > :first-child { grid-row: auto; } }
.figure-cap { margin-top: 10px; font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.5; }

/* ---------- Feature grid --------------------------------------------------- */
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-c); }
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature { display: grid; align-content: start; gap: 12px; padding: 26px clamp(16px, 2vw, 28px) 30px 0; border-bottom: 1px solid var(--line-c); }
.feature + .feature { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line-c); }
.feature-grid--2 > .feature:nth-child(2n + 1), .feature-grid--3 > .feature:nth-child(3n + 1), .feature-grid--4 > .feature:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.feature__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--accent-2); }
.feature__title { font-size: 1.1875rem; line-height: 1.4; font-weight: 650; letter-spacing: -0.024em; }
.feature__desc { font-size: var(--fs-sm); line-height: 1.66; color: var(--fg-2); }
@media (max-width: 1080px) { .feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid--4 > .feature:nth-child(4n + 1) { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line-c); } .feature-grid--4 > .feature:nth-child(2n + 1) { padding-left: 0; border-left: 0; } }
@media (max-width: 760px) { .feature-grid--2, .feature-grid--3, .feature-grid--4 { grid-template-columns: 1fr; } .feature-grid > .feature { padding-left: 0 !important; border-left: 0 !important; } }

/* ---------- Flow (단계) ----------------------------------------------------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.flow__step { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 22px 24px; border-radius: var(--radius-m); background: color-mix(in oklab, var(--fg) 4%, transparent); border: 1px solid var(--line-c); }
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -9px; width: 6px; height: 6px; border-top: 1.5px solid var(--fg-3); border-right: 1.5px solid var(--fg-3); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.flow__idx { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--fg-3); }
.flow__step strong { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.022em; line-height: 1.4; }
.flow__step span:not(.flow__idx) { font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.flow__step--accent { background: color-mix(in oklab, var(--accent) 12%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
@media (max-width: 900px) { .flow { grid-auto-flow: row; } .flow__step:not(:last-child)::after { top: auto; bottom: -9px; right: auto; left: 28px; transform: rotate(135deg); } }

/* ---------- Metric row (핵심 지표) ------------------------------------------- */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0; border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); }
.metric { padding: 20px 20px 22px 0; }
.metric + .metric { padding-left: 20px; border-left: 1px solid var(--line-c); }
.metric dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.metric dd { margin: 10px 0 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1; font-weight: 650; letter-spacing: -0.045em; }
.metric dd small { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-2); margin-left: 3px; }
.metric__note { display: block; margin-top: 8px; font-size: 0.8125rem; color: var(--fg-2); line-height: 1.45; }

/* ---------- Callout / quote ------------------------------------------------ */
.callout { margin: 0; position: relative; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-l); border: 1px solid var(--line-c2); background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 55%), var(--card); }
.callout p { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 650; letter-spacing: -0.032em; line-height: 1.38; }
.callout footer { margin-top: 12px; font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.6; }

/* ---------- Compare (문제 → 해법) --------------------------------------------- */
.compare { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-c); }
.compare li { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-c); }
.compare__from { color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.5; }
.compare__to { color: var(--fg); font-weight: 600; font-size: 1rem; line-height: 1.5; letter-spacing: -0.015em; }
.compare__arrow { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-c2); color: var(--accent); }
.compare__arrow svg { width: 14px; height: 14px; }
.compare__head { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 640px) { .compare li { grid-template-columns: 1fr; gap: 6px; } .compare__arrow { transform: rotate(90deg); width: 26px; height: 26px; } }

/* ---------- Spec list (사양) ----------------------------------------------- */
.spec { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; margin: 0; border-top: 1px solid var(--line-c); font-size: var(--fs-sm); }
.spec dt, .spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line-c); line-height: 1.5; }
.spec dt { color: var(--fg-3); padding-right: 12px; }
.spec dd { color: var(--fg); font-weight: 500; }

/* ---------- Program attribution (지원사업 · 과제 표기) ------------------------ */
.program { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 16px 20px; border-radius: var(--radius-m); background: color-mix(in oklab, var(--fg) 4%, transparent); border: 1px solid var(--line-c); font-size: 0.8125rem; line-height: 1.55; color: var(--fg-2); }
.program span { display: inline-flex; gap: 8px; }
.program b { font-weight: 600; color: var(--fg); }

/* ---------- Placeholder (자료 보완 예정 영역) ----------------------------------- */
.placeholder { position: relative; border-radius: var(--radius-l); border: 1px dashed var(--line-c2); padding: clamp(24px, 3vw, 40px); background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--fg) 2%, transparent) 0 2px, transparent 2px 14px); }
.placeholder__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }

/* ---------- Timeline (연혁) ------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline__row { display: grid; grid-template-columns: minmax(96px, 180px) 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line-c); }
.timeline__year { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.timeline__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline__items li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); }
.timeline__items time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-3); padding-top: 2px; }
.timeline__items strong { color: var(--fg); font-weight: 600; }

/* ---------- Certificate gallery ------------------------------------------- */
.cert-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.cert { display: grid; gap: 12px; align-content: start; }
.cert__thumb { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--line-c); box-shadow: 0 16px 30px -22px rgba(10, 20, 40, 0.5); }
.cert__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cert__name { font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.cert__meta { font-size: 0.75rem; color: var(--fg-3); line-height: 1.4; }

/* ---------- Charts (dataviz 규칙: 얇은 마크 · 2px 간격 · 범례 · 표 보기) ---------- */
/* 범주형 팔레트 — validate_palette.js 검증 통과 순서: 현대 · 한화 · 삼성 · 공공 (+ 기타 회색) */
:root, [data-theme="light"] {
  --viz-hyundai: #1e5bd8; --viz-hanwha: #e0700f; --viz-samsung: #0f9ac2; --viz-public: #1b8a58; --viz-other: #a3a9b3;
  --viz-seq: #2a55c4; --viz-grid: rgba(10, 13, 19, 0.08); --viz-axis: rgba(10, 13, 19, 0.24);
}
[data-theme="dark"] {
  --viz-hyundai: #4f86f0; --viz-hanwha: #d96f22; --viz-samsung: #1c9cc2; --viz-public: #4a9f3a; --viz-other: #5b6577;
  --viz-seq: #7497ff; --viz-grid: rgba(255, 255, 255, 0.07); --viz-axis: rgba(255, 255, 255, 0.22);
}
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.8125rem; color: var(--fg-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--viz-seq)); }
.viz-tip { position: fixed; z-index: 300; pointer-events: none; padding: 10px 12px; border-radius: 10px; background: var(--night-3); color: var(--fog); border: 1px solid var(--line-d-strong); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6); font-size: 0.8125rem; line-height: 1.45; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; }
.viz-tip.is-on { opacity: 1; transform: none; }
.viz-tip strong { display: block; font-size: 1rem; font-weight: 650; }
.viz-table-toggle { font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }


/* ---------- JS 미동작 시 ---------------------------------------------------- */
html:not(.js) .site-header { position: absolute; }
html:not(.js) .menu-toggle { display: none; }

/* ---------- Print ---------------------------------------------------------- */
@media print {
  .site-header, .mobile-menu, .subnav, .skip-link, .hero__visual, .page-hero__glow, .page-hero__grid, .cta-band__glow, .site-footer__sig, .rail__progress, .viz-tip { display: none !important; }
  .js [data-reveal], [data-reveal] { opacity: 1 !important; transform: none !important; }
  .split-line, .split-line-mask > * { transform: none !important; }
  body, [data-theme], .site-footer { background: #fff !important; color: #0a0d13 !important; --bg: #fff; --fg: #0a0d13; --fg-2: #3a404b; --fg-3: #5f6673; --line-c: rgba(0, 0, 0, 0.15); --line-c2: rgba(0, 0, 0, 0.25); --card: #fff; }
  .rail__track, .marquee__track { transform: none !important; animation: none !important; flex-wrap: wrap; width: auto !important; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .frame, .case, .card { break-inside: avoid; box-shadow: none !important; }
  a { text-decoration: none; }
}


/* ---------- 복사 · 이미지 저장 제한 (site.js 와 함께 동작) ---------------------- */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }

/* ---------- Logo marquee (고객 · 파트너 로고 흐름) ------------------------------
   <div class="marquee logo-marquee" data-marquee style="--marquee-dur: 60s">
     <div class="marquee__track"><ul class="marquee__group" role="list">
       <li><img src="assets/img/logos/samsung.svg" alt="삼성" width="…" height="…"></li> …
     </ul></div></div>
   로고 원본 비율 그대로, 높이만 맞춥니다. 기본은 회색조, 마우스를 올리면 원래 색. */
.logo-marquee { --marquee-gap: 0px; }
.logo-marquee .marquee__group { list-style: none; margin: 0; padding: 0; align-items: center; }
.logo-marquee li { display: flex; align-items: center; justify-content: center; height: clamp(76px, 7vw, 104px); padding: 0 clamp(26px, 3.4vw, 52px); }
.logo-marquee img { display: block; width: auto; height: var(--lh, 34px); max-width: 190px; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: filter 0.3s, opacity 0.3s; }
.logo-marquee li:hover img { filter: none; opacity: 1; }
.logo-marquee .logo-name { font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); font-weight: 650; letter-spacing: -0.03em; color: var(--fg-3); white-space: nowrap; }
.logo-marquee img[data-h="s"] { --lh: 22px; }
.logo-marquee img[data-h="m"] { --lh: 28px; }
.logo-marquee img[data-h="l"] { --lh: 40px; }
[data-theme="dark"] .logo-marquee img { filter: grayscale(1) invert(1) brightness(1.4); opacity: 0.55; }
[data-theme="dark"] .logo-marquee li:hover img { filter: none; opacity: 1; }

/* 마지막 메뉴(사업실적)의 패널은 오른쪽 정렬해 화면 밖으로 넘치지 않게 */
.site-nav__item:last-child .mega { left: auto; right: 0; transform: translate(0, 8px); }
.site-nav__item:last-child.is-open .mega { transform: translate(0, 0); }
.site-nav__item:last-child .mega::before { left: 0; right: 0; }

/* ==========================================================================
   Portfolio overview (공통) — 산업 솔루션 · AI 플랫폼 페이지 첫 섹션이 같은 구조를 씁니다.
   <ol class="pf"> <li class="pf__row"> 번호 · 묶음 이름(+영문) · 항목 목록(번호 · 이름 · 한 줄 설명 · 화살표)
   ========================================================================== */
.pf { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-c2); }
.pf__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 14px; align-items: start; padding: clamp(24px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--line-c); }
.pf__num { grid-column: 1 / span 1; padding-top: 10px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--fg-3); }
.pf__group { grid-column: 2 / span 4; display: grid; gap: 8px; align-content: start; }
.pf__name { font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.375rem); line-height: 1.12; letter-spacing: -0.038em; font-weight: 650; }
.pf__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
ul.pf__items { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; display: grid; }
.pf__items a { display: grid; grid-template-columns: 52px minmax(0, 1fr) 16px; align-items: center; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-c); transition: padding 0.45s var(--ease-out), border-color 0.25s; }
.pf__items li:first-child a { padding-top: 4px; }
.pf__items li:last-child a { border-bottom-color: transparent; }
.pf__idx { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: var(--fg-3); }
.pf__text { display: grid; gap: 2px; min-width: 0; }
.pf__label { font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; color: var(--fg); line-height: 1.45; }
.pf__desc { font-size: 0.875rem; line-height: 1.5; color: var(--fg-3); }
.pf__items svg { width: 15px; height: 15px; color: var(--fg-3); transition: transform 0.45s var(--ease-out), color 0.25s; }
.pf__items a:hover { padding-left: 6px; border-bottom-color: var(--fg); }
.pf__items li:last-child a:hover { border-bottom-color: var(--fg); }
.pf__items a:hover svg { transform: translateX(3px); color: var(--fg); }
.pf__items a[href$=".html"]:hover svg { transform: translate(2px, -2px); }
.pf__foot { margin-top: clamp(56px, 6vw, 96px); display: grid; gap: 18px; }
.pf__foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 10px; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); font-weight: 600; letter-spacing: -0.02em; }
.pf__foot-list li { display: inline-flex; align-items: center; }
.pf__foot-list li:not(:last-child)::after { content: ""; width: 5px; height: 5px; margin: 0 16px; border-radius: 50%; background: var(--grad); flex: none; }
.pf__foot-list a { border-bottom: 1px solid var(--line-c2); transition: border-color 0.25s; }
.pf__foot-list a:hover { border-bottom-color: var(--fg); }
@media (max-width: 760px) {
  .pf__row { row-gap: 12px; }
  .pf__num { grid-column: 1 / span 2; padding-top: 8px; }
  .pf__group { grid-column: 3 / -1; }
  ul.pf__items { grid-column: 1 / -1; }
  .pf__items li:first-child a { padding-top: 12px; }
  .pf__items a { grid-template-columns: 44px minmax(0, 1fr) 16px; }
  .pf__foot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; font-size: 0.9375rem; }
  .pf__foot-list li:not(:last-child)::after { display: none; }
}