/* =========================================================================
   벤처시장연구원 (Korea Venture Market Institute, KVMI)
   우주 테마 하우스 스타일 — Deep Space Navy + Gold #C9A227
   기존 KVMI 우주페이지 정체성 계승 (cosmic canvas · nebula · starfield)
   순수 정적 CSS · Pretendard CDN만 · 다크 테마 · WCAG AA 대비 확보
   ========================================================================= */

/* ---------- 0. Design Tokens ---------- */
:root {
  --space-0:   #05070f;   /* 최심부 */
  --space-1:   #080c1a;   /* 본문 배경 */
  --space-2:   #0c1228;   /* 살짝 밝은 띠 */
  --navy:      #1F3864;
  --navy-soft: #2c4a7c;
  --gold:      #C9A227;
  --gold-soft: #e0c45c;
  --gold-deep: #a8861d;

  --text:      #e9edf6;       /* 본문 텍스트 (대비 ~13:1) */
  --text-muted:#a9b4c9;       /* 보조 (대비 ~7:1) */
  --text-dim:  #7e8aa3;
  --heading:   #ffffff;

  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --card-bg:   rgba(18,28,54,.55);
  --card-bg-2: rgba(14,22,44,.42);
  --glass:     rgba(10,16,34,.62);

  --maxw: 1160px;
  --gut: 24px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow:    0 10px 34px rgba(0,0,0,.34);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.46);
  --glow-gold: 0 0 28px rgba(201,162,39,.30);

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Apple SD Gothic Neo", sans-serif;

  --t-fast: .18s ease;
  --t: .3s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  font-family: var(--sans);
  color: var(--text);
  background-color: var(--space-1);
  /* 우주 실사 사진 배경 복구 + 강한 암막(multiply ~0.69·텍스트 품격) — 박사 "딥네이비 평면 아님·복구". 캔버스 별 점 클러터는 OFF 유지 (3자 토론 vmi_bg_restore A) */
  background-image:
    radial-gradient(1180px 760px at 38% 44%, rgba(3,5,12,.64), rgba(5,7,14,0) 60%),
    linear-gradient(95deg, rgba(4,6,13,.88) 0%, rgba(5,7,14,.46) 46%, rgba(5,7,14,.12) 100%),
    linear-gradient(180deg, rgba(5,7,14,.50), rgba(5,7,14,.10) 34%, rgba(4,6,13,.80)),
    radial-gradient(1500px 1040px at 80% 30%, rgba(46,18,78,.42), rgba(46,18,78,0) 62%),
    radial-gradient(1250px 940px at 16% 80%, rgba(12,44,60,.40), rgba(12,44,60,0) 60%),
    linear-gradient(rgba(176,178,188,1), rgba(176,178,188,1)),
    url("../assets/cosmos-bg.jpg");
  background-blend-mode: normal, normal, normal, screen, screen, multiply, normal;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.72;
  font-size: 16px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { color: var(--heading); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
:focus-visible { outline: 2.5px solid var(--gold-soft); outline-offset: 3px; border-radius: 3px; }

/* ---------- 1b. Cosmic background layers ---------- */
/* 우주 캔버스·nebula·모션토글 전면 비활성 (박사 "별·흰점·동그라미 모두 거슬림" → 정적 네이비 배경 전환·vmi_bg_redesign B′) */
#cosmicCanvas { display: none; }
.cosmic-nebula { display: none; }
.fx-toggle { display: none !important; }
/* 본문 가독성 비네팅 — 좌·중앙(히어로 텍스트) 뒤를 어둡게 (edge비네팅 폐기·3자 토론 R2 정정) */
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 38% 46%, rgba(3,5,12,.68), rgba(5,7,14,0) 64%),
    linear-gradient(90deg, rgba(3,5,12,.42) 0%, rgba(3,5,12,.16) 44%, rgba(3,5,12,0) 100%); }
/* 미세 필름 그레인/디더 — JPG 밴딩 완화 + 실사 질감 (절차 SVG noise·정적·저비용) */
html::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px; }
/* 모바일: fixed 배경 jank 방지 (3자 토론 합의) */
@media (max-width: 768px) { body { background-attachment: scroll; } html::before { display: none; } }
/* 온사이트 문의 폼 (Netlify Forms) */
.contact-form { display: grid; gap: 16px; }
.contact-form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .01em; }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px;
  background: rgba(9,14,30,.65); border: 1px solid var(--line-soft); border-radius: 10px;
  color: #fff; font-family: inherit; font-size: 16px; transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-dim); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(201,162,39,.15); }
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.contact-form .cf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .contact-form .cf-2 { grid-template-columns: 1fr; } }
body > main, body > header, body > footer { position: relative; z-index: 2; }
/* 우주 효과 토글 버튼 (접근성 비상구·기본 ON) */
.fx-toggle {
  position: fixed; right: 16px; top: 16px; z-index: 130;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F3DC7E, #C9A227); color: #0B1426;
  border: 1.5px solid rgba(255,247,220,.7); backdrop-filter: blur(6px);
  font-size: 16px; line-height: 1; opacity: 1; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 16px rgba(201,162,39,.5), 0 0 16px rgba(232,201,90,.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fx-toggle:hover, .fx-toggle:focus-visible { transform: scale(1.1); box-shadow: 0 6px 24px rgba(201,162,39,.75), 0 0 22px rgba(232,201,90,.6); }
@media (max-width: 600px) { .fx-toggle { width: 36px; height: 36px; right: 12px; top: 70px; } }
/* 떠다니는 우주선 (미니멀 탐사선 실루엣·상단 가장자리 느린 드리프트·토글 OFF 시 숨김) */
.spaceship {
  position: fixed; top: 6vh; left: 0; z-index: 1; pointer-events: none;
  width: clamp(56px, 2.8vw, 108px); color: #C9D7E8; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(201,215,232,.4));
  animation: shipDrift 58s linear infinite; will-change: transform, opacity;
}
.spaceship svg { width: 100%; height: auto; display: block; }
@keyframes shipDrift {
  0%   { transform: translate(-14vw, 0) rotate(-2deg); opacity: 0; }
  9%   { opacity: .22; }
  91%  { opacity: .22; }
  100% { transform: translate(114vw, 34px) rotate(-2deg); opacity: 0; }
}
.fx-off .spaceship { display: none; }
@media (max-width: 600px) { .spaceship { opacity: 0; animation-duration: 74s; } .spaceship { --shipMax: .15; } }

/* ---------- 2. Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: 96px 0; position: relative; }
.section--alt { background: rgba(10,16,34,.45); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(4px); }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--space-0); padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-soft);
}
.eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1.5px;
  background: var(--gold-soft); vertical-align: middle; margin-right: 10px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 14px 0 0; }
.section-head p { color: var(--text-muted); margin-top: 16px; font-size: 17px; }

/* ---------- 3. Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,11,24,.66); backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.site-header.scrolled { background: rgba(7,11,24,.86); border-color: var(--line); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* KVMI 럭셔리 — 딥네이비 가로 pill + 메탈릭 골드 세리프 KVMI (박사님 선택 L2 Navy Pill · 럭셔리 디자인) */
.brand__mark {
  position: relative; align-self: stretch; border-radius: 6px; flex: 0 0 auto;
  background: radial-gradient(135% 180% at 18% 8%, #2E5290 0%, #14233F 58%, #0B1426 100%);
  display: flex; align-items: center; justify-content: center; padding: 0 9px;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.5), inset 0 1px 0 rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.35), 0 0 12px rgba(201,162,39,.14);
}
.brand__mark b {
  font-family: 'Space Grotesk', 'Pretendard Variable', sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1;
  letter-spacing: .08em; padding-left: .08em; text-transform: uppercase;
  background: linear-gradient(150deg, #FFF7DC 0%, #ECD06A 34%, #D8B94E 58%, #B98F28 82%, #9A7420 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 3px rgba(232,201,90,.45));
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.brand__en { font-size: 10.5px; font-weight: 600; color: var(--text-dim); letter-spacing: .03em; text-transform: uppercase; }

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; padding: 10px 13px; font-size: 15px; font-weight: 600; white-space: nowrap;
  color: var(--text-muted); border-radius: 8px; transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__link.active { color: #fff; }
.nav__link.active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
  background: var(--gold); border-radius: 2px; box-shadow: 0 0 8px rgba(201,162,39,.6);
}
.nav__cta {
  margin-left: 8px; padding: 10px 20px; background: var(--gold); color: var(--space-0) !important;
  border-radius: 8px; font-size: 15px; font-weight: 700; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.nav__cta:hover { background: var(--gold-soft); transform: translateY(-1px); box-shadow: var(--glow-gold); }
/* 데이터·인사이트 하위 4개 — 데스크톱 가로 내비에서는 숨긴다.
   드롭다운을 도입하지 않는 이유(페이블 IA 판정 J1): 터치 하이브리드(iPad 가로 ≥1100px)에서
   hover 드롭다운은 쓸 수 없어 결국 click-open 버튼이 되고, 그러면 부모 항목이 링크가 아니게 되어
   허브 페이지가 어차피 필요해진다. 허브가 필요하다면 드롭다운은 순증 비용이다.
   또한 aria-expanded·ESC·포커스트랩·외부클릭 닫기라는 신규 결함면이 열린다(7/22에 내비 결함을 겨우 닫았다). */
.nav__sub { display: none; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 8px; color: #fff; }
.nav__toggle svg { width: 26px; height: 26px; margin: 0 auto; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px;
  border-radius: 9px; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--gold); color: var(--space-0); box-shadow: 0 6px 20px rgba(201,162,39,.34); }
.btn--primary:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,162,39,.44); }
.btn--ghost { background: rgba(255,255,255,.04); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34); }
.btn--ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.btn--navy:hover { background: var(--navy-soft); transform: translateY(-2px); }
/* 3번째 히어로 버튼 — 위계 차등용(페이블 IA 판정 J3). 동급 3개 병렬은 기각되었다.
   primary(골드) → ghost(테두리) → quiet(텍스트형) 순으로 시각 하중을 낮춘다. */
.btn--quiet { background: transparent; color: rgba(255,255,255,.82); box-shadow: none; }
.btn--quiet:hover { color: #fff; background: rgba(255,255,255,.06); }
.btn--lg { padding: 16px 34px; font-size: 17px; }

/* ---------- 5. Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero__inner { position: relative; z-index: 2; padding: 124px 0 130px; max-width: 840px; }
.hero__eyebrow { color: var(--gold-soft); font-size: 13.5px; letter-spacing: .19em; }
.hero__eyebrow::before { width: 36px; height: 2px; background: linear-gradient(90deg, rgba(201,162,39,0), var(--gold)); margin-right: 13px; border-radius: 2px; }
.hero h1 {
  color: #fff; font-size: clamp(36px, 5.8vw, 66px); line-height: 1.12; margin: 24px 0 0;
  letter-spacing: -.035em; font-weight: 800; text-shadow: 0 2px 40px rgba(0,0,0,.45);
  word-break: keep-all; /* 한국어 조사가 홀로 줄바꿈되는 현상 방지(예: "교차점을"의 "을" 고립)·2026-07-10 */
}
.hero h1 .accent {
  color: var(--gold-soft); /* 폴백 */
  background: linear-gradient(118deg, #F3DE86 0%, #D8B646 40%, #C9A227 66%, #EAD277 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 26px rgba(201,162,39,.34));
}
/* 히어로 진입 애니메이션 (staggered fade-up · reduced-motion 안전) */
@keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero__eyebrow { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; }
.hero h1 { animation: heroRise .85s .07s cubic-bezier(.22,.61,.36,1) both; }
.hero__lead { animation: heroRise .85s .16s cubic-bezier(.22,.61,.36,1) both; }
.hero__actions { animation: heroRise .85s .25s cubic-bezier(.22,.61,.36,1) both; }
.hero__meta { animation: heroRise .85s .34s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero h1, .hero__lead, .hero__actions, .hero__meta { animation: none; }
}
.hero__lead { font-size: clamp(17px, 2.1vw, 21px); color: rgba(233,237,246,.86); margin: 26px 0 0; max-width: 660px; line-height: 1.7; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 58px; padding-top: 34px; border-top: 1px solid var(--line); }
.hero__meta-item .n { display: block; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em; line-height: 1.35; }
.hero__meta-item .l { display: block; font-size: 13px; color: var(--text-dim); margin-top: 5px; }

/* ---------- 6. Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; backdrop-filter: blur(6px);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(201,162,39,.45); background: rgba(22,34,64,.62); }
.card__icon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(201,162,39,.12); color: var(--gold-soft); margin-bottom: 20px;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.22);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 19px; margin-bottom: 10px; color: #fff; }
.card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.7; }
.card__num { font-size: 13px; font-weight: 800; color: var(--gold-soft); letter-spacing: .08em; }

/* Vision / Mission */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vm-card { padding: 40px; border-radius: var(--radius-lg); border: 1px solid var(--line); position: relative; overflow: hidden; background: var(--card-bg); backdrop-filter: blur(6px); }
.vm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--gold), var(--gold-deep)); box-shadow: 0 0 14px rgba(201,162,39,.5); }
.vm-card__label { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
.vm-card h3 { font-size: 22px; margin: 12px 0 14px; color: #fff; }
.vm-card p { color: var(--text-muted); font-size: 16px; }

/* ---------- 7. Leadership ---------- */
.leader { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.leader__card {
  background: linear-gradient(160deg, rgba(31,56,100,.7), rgba(8,12,26,.85)); color: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center;
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.leader__avatar {
  position: relative; overflow: hidden;
  width: 110px; height: 110px; margin: 0 auto 20px; border-radius: 50%;
  background: rgba(201,162,39,.08); display: grid; place-items: center;
  font-size: 40px; font-weight: 800; color: var(--gold-soft);
  box-shadow: inset 0 0 0 2px rgba(201,162,39,.5), 0 0 24px rgba(201,162,39,.18);
}
/* 대표 사진 자동 표시 — assets/leader.jpg 존재 시 사진, 없으면 onerror로 제거되어 '배' 모노그램 노출 */
.leader__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leader__name { color: #fff; font-size: 22px; }
.leader__name span { font-size: 15px; color: var(--gold-soft); font-weight: 600; }
.leader__role { color: var(--text-muted); font-size: 14.5px; margin-top: 6px; }
.leader__bio { font-size: 16.5px; color: var(--text); line-height: 1.8; }
.leader__sub { margin: 28px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); }
.career-list { display: grid; gap: 12px; }
.career-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text); }
.career-list li::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 9px; border-radius: 2px;
  background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 8px rgba(201,162,39,.6);
}

/* ---------- 8. Timeline ---------- */
.timeline { max-width: 760px; margin: 0 auto; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 30px 44px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 4px; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--space-1); border: 3px solid var(--navy-soft);
}
.tl-item--origin::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 14px rgba(201,162,39,.7); }
.tl-year { font-size: 15px; font-weight: 800; color: var(--gold-soft); }
.tl-desc { color: var(--text-muted); font-size: 15.5px; margin-top: 4px; }

/* ---------- 9. Focus / expertise list ---------- */
.focus-row { display: flex; gap: 20px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--line-soft); }
.focus-row:last-child { border-bottom: none; }
.focus-row__no { font-size: 20px; font-weight: 800; color: var(--gold-soft); flex: 0 0 56px; }
.focus-row__body h3 { font-size: 19px; margin-bottom: 6px; color: #fff; }
.focus-row__body p { color: var(--text-muted); font-size: 15.5px; }

/* ---------- 10. CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, rgba(31,56,100,.65), rgba(8,12,26,.8)); color: #fff;
  border: 1px solid var(--line); border-radius: 20px; padding: 56px; text-align: center;
  position: relative; overflow: hidden; backdrop-filter: blur(8px); box-shadow: var(--shadow-lg);
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 50% -20%, rgba(201,162,39,.26), transparent 60%); }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); }
.cta-band p { color: var(--text-muted); margin: 14px auto 30px; max-width: 560px; font-size: 17px; }

/* ---------- 11. Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-bg); backdrop-filter: blur(6px); }
.contact-item__icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 10px; background: rgba(201,162,39,.12); color: var(--gold-soft); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(201,162,39,.22); }
.contact-item__icon svg { width: 22px; height: 22px; }
.contact-item h2, .contact-item h3 { font-size: 16px; margin-bottom: 4px; color: #fff; }
.contact-item p, .contact-item a { color: var(--text-muted); font-size: 15.5px; word-break: keep-all; }
.contact-item a:hover { color: var(--gold-soft); }

/* ---------- 12. Notice / legal block ---------- */
.notice {
  background: rgba(10,16,34,.5); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 26px 28px; backdrop-filter: blur(6px);
}
.notice h3 { font-size: 16px; color: var(--gold-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.notice h3 svg { width: 19px; height: 19px; color: var(--gold-soft); }
.notice ul { display: grid; gap: 9px; }
.notice li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--text-muted); line-height: 1.65; }
.notice li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- 13. Footer ---------- */
.site-footer { background: rgba(5,7,15,.82); border-top: 1px solid var(--line); color: var(--text-muted); padding: 64px 0 32px; font-size: 14.5px; backdrop-filter: blur(8px); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-soft); }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__en { color: var(--text-dim); }
.footer-brand p { margin-top: 16px; max-width: 320px; line-height: 1.7; color: var(--text-muted); }
.footer-col h3, .footer-col h4 { color: #fff; font-size: 14px; letter-spacing: .04em; margin-bottom: 16px; text-transform: uppercase; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a:hover { color: var(--gold-soft); }
.footer-info { display: grid; gap: 7px; }
.footer-info span strong { color: var(--text); font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; font-size: 13px; color: var(--text-dim); }
.footer-bottom a:hover { color: var(--gold-soft); }

/* ---------- 14. Page hero (sub pages) ---------- */
.page-hero { padding: 100px 0 68px; position: relative; overflow: hidden; }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(31px, 4.6vw, 48px); margin: 16px 0 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.14; text-shadow: 0 2px 34px rgba(0,0,0,.42); position: relative; padding-bottom: 20px; }
.page-hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), rgba(201,162,39,.15)); }
.page-hero p { color: var(--text-muted); margin-top: 18px; font-size: 18px; max-width: 640px; line-height: 1.65; }
.page-hero__inner { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .page-hero__inner { animation: none; } }
.breadcrumb { font-size: 13.5px; color: var(--text-dim); position: relative; z-index: 2; }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb span { color: var(--gold-soft); }

/* ---------- 15. Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* 모션만 정지 — 우주 배경(별필드 정적 1프레임 + 성운)은 그대로 표시. 움직임 없어 어지럼증 무관 */
}

/* ---------- 16. Prose (about detail) ---------- */
.prose p { color: var(--text); font-size: 16.5px; line-height: 1.85; margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.lead-text { font-size: 19px; line-height: 1.8; color: #fff; font-weight: 500; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .vm-grid { grid-template-columns: 1fr; }
  .leader { grid-template-columns: 1fr; gap: 28px; max-width: 520px; margin: 0 auto; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__menu {
    position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch; gap: 2px;
    /* 불투명 배경 — 반투명(.97)+backdrop-filter 조합에서 hero 텍스트가 메뉴를 관통해 가독성을 해치던 문제 수정(2026-07-10) */
    background: #070b18; padding: 16px var(--gut) 24px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-130%); transition: transform var(--t);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav__menu.open { transform: translateY(0); }
  .nav__link { padding: 14px 12px; font-size: 16px; border-radius: 8px; }
  .nav__link.active::after { display: none; }
  .nav__cta { margin: 8px 0 0; text-align: center; }
  .nav__toggle { display: grid; place-items: center; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { padding: 40px 24px; }
  .hero__inner { padding: 92px 0 96px; }
  .hero__meta { flex-direction: column; gap: 18px; align-items: flex-start; }
  .section-head { margin-bottom: 40px; }
}

/* ---------- 17b. 내비 시트 전환점 상향 — 태블릿 세로 파손 교정 (2026-07-22) ----------
   [실측] 가로 내비(.nav__menu)는 white-space:nowrap 8항목+CTA로 폭 715px가 고정 필요.
   브랜드가 259→121px까지 축소되며 흡수하지만 한계에 걸려, 뷰포트 721~861px에서
   메뉴 우측이 화면 밖(right 847~860)으로 나가 잘린다. body{overflow-x:hidden}이라
   가로 스크롤도 불가 → "문의"·"EN"·CTA "연구·자문 문의"에 도달할 방법이 없었다.
   해당 구간 = iPad mini(744)·iPad(768/810)·iPad Air(820)·iPad Pro 11"(834) 세로 전 기종.
   변경 전 백업 CSS도 720px이라 사이트 개설(2026-06) 이래의 기존 결함이다.
   [2차 실측·Gemini Veto 반영] Range API로 실제 렌더 줄 수를 재측정한 결과, 1023px 안은
   불충분했다. 데스크톱 가로 내비가 깨끗한 하한은 **1100px**이며 1080px 이하에서는
   CTA "연구·자문 문의"가 2~3줄로, 영문 기관명이 2줄로 접힌다(1024px에서 CTA 3줄 확인).
   → 전환점을 **1099px**로 확정. 1280·1440은 불변이나 **1024는 의도적으로 변경**된다
     (기존 1024 렌더가 CTA 3줄 파손 상태였으므로 기준선 유지가 아니라 교정이 옳다).
   내비 규칙만 상향하고 레이아웃 1열 전환 등은 720px 그대로 유지한다. */
@media (max-width: 1099px) {
  .nav__menu {
    position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch; gap: 2px;
    background: #070b18; padding: 16px var(--gut) 24px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-130%); transition: transform var(--t);
    max-height: calc(100vh - 72px); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__menu.open { transform: translateY(0); }
  .nav__link { display: flex; align-items: center; min-height: 48px; padding: 12px 12px; font-size: 16px; border-radius: 8px; }
  .nav__link.active::after { display: none; }
  .nav__cta { display: flex; align-items: center; justify-content: center; min-height: 50px; margin: 10px 0 0; }
  .nav__toggle { display: grid; place-items: center; }
  /* 하위 4개는 시트에서 항상 펼쳐 둔다(아코디언 = 신규 JS 결함면). 행높이는 .nav__link 규칙(48px) 그대로. */
  .nav__sub {
    display: flex; padding-left: 28px; font-size: 15px;
    color: var(--ink-2, rgba(255,255,255,.72));
  }
  .nav__sub::before {
    content: ""; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%;
    background: var(--gold-soft, #d8b950); opacity: .55; flex: 0 0 auto;
  }
}

/* ========== MOBILE PRECISION LAYER (2026-07-22) ==========
   스마트폰 정밀 설계 — 3자 토론(Claude·GPT-5.6·Gemini 3.1) R1~R3 수렴 확정 스펙 구현
   FINAL_SPEC: E:/research/reference/3ai_debates/vmi_mobile_design_20260721/FINAL_SPEC.md
   전 규칙이 @media (max-width:768px) 가드 내부 → 데스크톱(≥769px) 렌더링 무변경
   ========================================================== */

/* ===== 모바일 우주 배경 (세로 아트디렉션) — 2026-07-22 ===== */
/* 병합 방법: 이 블록 전체를 css/style.css 맨 끝에 그대로 붙여넣기.
   데스크톱(>768px) 규칙 무변경 — 전 블록이 max-width:768px 가드 내부.
   상대 URL은 css/ 기준(../assets/)이며 style.css 끝에 붙여도 그대로 유효.
   파생본: assets/cosmos-mobile.webp(267KB) / .jpg(폴백·404KB)
   마스터 1320x2860 · 코어 x61%/y64.8% · 은하 장축 118% (원본 cosmos-bg.jpg 세로 재구성) */

@media (max-width: 768px) {
  body { background-image: none; }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #05070f;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* 기본(가로 회전·태블릿 세로 aspect > 3/5): 원본 landscape 유지 */
    background-image:
      linear-gradient(to bottom,
        rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .64) 54%,
        rgba(0, 0, 0, .24) 64%, rgba(0, 0, 0, .24) 76%,
        rgba(0, 0, 0, .06) 84%, rgba(0, 0, 0, .06) 100%),
      url("../assets/cosmos-bg.jpg");
  }
}

/* 폰 세로(aspect <= 3/5): 세로 구도 파생본 — 2단 캐스케이드(구형 브라우저 JPEG 폴백) */
@media (max-width: 768px) and (orientation: portrait) and (max-aspect-ratio: 3/5) {
  body::before {
    background-image:
      linear-gradient(to bottom,
        rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .64) 54%,
        rgba(0, 0, 0, .24) 64%, rgba(0, 0, 0, .24) 76%,
        rgba(0, 0, 0, .06) 84%, rgba(0, 0, 0, .06) 100%),
      url("../assets/cosmos-mobile.jpg");
    background-image:
      linear-gradient(to bottom,
        rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .64) 54%,
        rgba(0, 0, 0, .24) 64%, rgba(0, 0, 0, .24) 76%,
        rgba(0, 0, 0, .06) 84%, rgba(0, 0, 0, .06) 100%),
      image-set(
        url("../assets/cosmos-mobile.webp") type("image/webp"),
        url("../assets/cosmos-mobile.jpg") type("image/jpeg"));
  }
}

/* =========================================================================
   KVMI 모바일 정밀 레이아웃 레이어 — style.css 맨 끝에 append하여 병합
   (2026-07-22 · 3자 토론 FINAL_SPEC §2.5 최상급 7 중 2·4·5·6·7 담당)

   불변 조건:
   - 모든 규칙은 @media (max-width:768px) 계열 내부 → 데스크톱(≥769px) diff 0
   - 배경 레이어(body::before·background-image·스크림)는 별도 담당 — 본 파일 무개입
   - !important 0건 · will-change 0건 · translateZ 0건 · 음수 z-index는
     헤더 자기 스택 내부 dim 레이어 1곳만(전역 음수 계층 아님)
   - dvh는 인터랙티브 UI(나브 시트)에만 사용 (배경 금지 조항과 무관)

   구간 규약(배경 담당자와의 계약·홈 히어로):
   - 헤드라인(h1) 화면 18~52% · CTA(.hero__actions) 58~74% · 상호 교차 0px
   - 은하 코어 y65.5%가 CTA 뒤에서 발광하도록 하단 앵커 + svh 스케일 패딩
   ========================================================================= */

/* ---------- M0. 모바일 공통 토큰·타이포·광학 보정 (≤768px) ---------- */
@media (max-width: 768px) {
  :root {
    /* 다크 OLED에서 1px 헤어라인이 뭉개지는 현상 보정 — 대비 +.02 */
    --line: rgba(255,255,255,.12);
    --line-soft: rgba(255,255,255,.07);
  }
  html { scroll-padding-top: 74px; }

  /* 터치 피드백 — 골드 하이라이트 + 더블탭 줌 지연 제거 */
  a, button { -webkit-tap-highlight-color: rgba(201,162,39,.18); touch-action: manipulation; }

  /* 한국어 조판 — 제목 고아 음절·본문 어색한 줄바꿈 제거 (미지원 브라우저 무시) */
  h1, h2, h3, .section-head h2 { text-wrap: balance; }
  p, .hero__lead, .leader__bio, .notice li { text-wrap: pretty; }

  /* 터치 기기에서 hover 리프트 잔상(sticky hover) 제거 */
  @media (hover: none) {
    .card:hover { transform: none; box-shadow: none; border-color: var(--line); background: var(--card-bg); }
    .btn--primary:hover, .btn--ghost:hover, .btn--navy:hover, .nav__cta:hover { transform: none; }
  }
}

/* ---------- M1. 헤더 압축 + 광학 재질 통일 (≤768px) ---------- */
@media (max-width: 768px) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
    /* 모바일 blur 상한 8px (성능·FINAL_SPEC §2.5-4) */
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
  }
  .nav { height: 60px; }
  .nav .container, .container.nav {
    padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
  }
  .brand { gap: 10px; }
  .brand__mark { border-radius: 5px; padding: 0 8px; }
  .brand__mark b { font-size: 11.5px; }
  .brand__name { font-size: 15.5px; }
  .brand__en { font-size: 9.5px; letter-spacing: .02em; }
}

/* ---------- M2. 결함 B 교정 + 홈 히어로 재구도 (≤768px) ---------- */
@media (max-width: 768px) {
  /* 결함 B: .hero__inner{padding:124px 0 130px}가 .container 거터를 0으로 덮던 것을
     복합 선택자(0,2,0)로 역전 — 좌우 거터 복원 + 노치 안전영역 */
  .container.hero__inner {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
    /* 헤드라인이 화면 18~52% 구간에 들어오도록 svh 스케일 상단 패딩 */
    padding-top: clamp(44px, calc(20svh - 93px), 96px);
    /* CTA 하단이 74% 이내에 머물도록 svh 스케일 하단 패딩(하단 앵커의 짝) */
    padding-bottom: max(28px, calc(26svh - 164px));
  }
  /* 모바일 전용 fluid 위계 — 데스크톱 clamp 최소값 고정으로 눌린 위계 복원 */
  .hero__eyebrow { font-size: 12.5px; letter-spacing: .16em; }
  .hero__eyebrow::before { width: 26px; }
  .hero h1 {
    font-size: clamp(29px, 8.4vw, 37px);
    line-height: 1.18;
    letter-spacing: -.028em;           /* 소형 사이즈 광학 자간 완화 */
    margin-top: 16px;
    text-shadow: 0 2px 26px rgba(0,0,0,.52);
  }
  .hero h1 .accent { filter: drop-shadow(0 0 16px rgba(201,162,39,.32)); }
  .hero__lead {
    font-size: 16px; line-height: 1.62;
    margin-top: 16px; margin-bottom: 26px;   /* CTA와의 최소 간격(하단 앵커 시 유일한 갭) */
    max-width: 34em;
  }
  /* CTA — 하단 앵커(margin-top:auto)로 58~74% 구간에 정착, 은하 코어(65.5%) 발광 수용 */
  .hero__actions {
    margin-top: auto;
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .hero__actions .btn { justify-content: center; }
  .hero__lead-br { display: none; }
  .hero__actions .btn--lg { padding: 13px 22px; font-size: 16px; }
  .hero__actions .btn--ghost.btn--lg { padding: 11px 20px; font-size: 15.5px; }
  .hero__meta { margin-top: 26px; padding-top: 20px; gap: 12px 28px; border-top-color: rgba(255,255,255,.14); }
  .hero__meta-item .n { font-size: 15.5px; }
  .hero__meta-item .l { font-size: 12px; margin-top: 3px; }

  /* 영문판 — 리드문이 길어(50단어) 동일 규약 유지를 위해 밀도 소폭 압축 */
  html[lang="en"] .hero h1 { font-size: clamp(27px, 7.8vw, 34px); }
  html[lang="en"] .hero__lead { font-size: 14.5px; line-height: 1.58; }
}

/* 짧은 화면(≤700px 높이·iPhone SE/8 계열) — 구간 규약 유지를 위한 압축 밴드 */
@media (max-width: 768px) and (max-height: 700px) {
  .container.hero__inner { padding-top: 40px; padding-bottom: 24px; }
  .hero h1 { font-size: clamp(26px, 7.4vw, 29px); }
  .hero__lead { font-size: 14.5px; line-height: 1.52; margin-top: 12px; margin-bottom: 18px; }
  .hero__actions { gap: 8px; }
  .hero__actions .btn--lg { padding: 11px 20px; font-size: 15px; }
  .hero__actions .btn--ghost.btn--lg { padding: 10px 18px; font-size: 14.5px; }
  .hero__meta { margin-top: 16px; padding-top: 14px; gap: 8px; }
  .hero__meta-item .n { font-size: 14px; }
  .hero__meta-item .l { font-size: 11.5px; margin-top: 2px; }
  html[lang="en"] .hero h1 { font-size: clamp(24px, 6.9vw, 27px); }
  html[lang="en"] .hero__lead { font-size: 13.5px; line-height: 1.5; }
}

/* ---------- M3. 서브페이지 page-hero (≤768px) ---------- */
@media (max-width: 768px) {
  .page-hero { padding: 64px 0 48px; }
  .page-hero h1 { font-size: clamp(27px, 7.6vw, 34px); padding-bottom: 16px; letter-spacing: -.026em; }
  .page-hero p { font-size: 16px; margin-top: 14px; line-height: 1.62; }
  .breadcrumb { font-size: 13px; }
  .breadcrumb a { display: inline-block; padding: 12px 4px; margin: -12px -4px; border-radius: 6px; }
}

/* ---------- M4. 모바일 네비게이션 시트 (≤720px — 기존 토글 브레이크포인트와 동일) ---------- */
@media (max-width: 720px) {
  .nav__menu {
    inset: calc(60px + env(safe-area-inset-top, 0px)) 0 auto;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));  /* 주소창 변동 대응 — 인터랙티브 UI 한정 dvh */
    padding: 12px max(var(--gut), env(safe-area-inset-right, 0px))
             max(20px, env(safe-area-inset-bottom, 0px))
             max(var(--gut), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid rgba(201,162,39,.32);      /* 골드 헤어라인 마감 */
    border-radius: 0 0 18px 18px;
    box-shadow: 0 30px 70px rgba(0,0,0,.6);
    overscroll-behavior: contain;                        /* 스크롤 체이닝 차단 */
  }
  .nav__link {
    display: flex; align-items: center; min-height: 48px;   /* 터치 타깃 ≥48px */
    padding: 11px 14px; font-size: 16.5px;
  }
  .nav__link:active { background: rgba(201,162,39,.12); color: #fff; }
  .nav__cta {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; margin-top: 12px;
  }
  /* 항목 순차 등장 — 28ms 간격(≤120ms 규정 내)·열림 시에만 */
  @keyframes kvmiNavItemIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
  .nav__menu.open > * { animation: kvmiNavItemIn .3s cubic-bezier(.22,.61,.36,1) both; }
  .nav__menu.open > :nth-child(1) { animation-delay: .02s; }
  .nav__menu.open > :nth-child(2) { animation-delay: .048s; }
  .nav__menu.open > :nth-child(3) { animation-delay: .076s; }
  .nav__menu.open > :nth-child(4) { animation-delay: .104s; }
  .nav__menu.open > :nth-child(5) { animation-delay: .132s; }
  .nav__menu.open > :nth-child(6) { animation-delay: .16s; }
  .nav__menu.open > :nth-child(7) { animation-delay: .188s; }
  .nav__menu.open > :nth-child(8) { animation-delay: .216s; }
  .nav__menu.open > :nth-child(9) { animation-delay: .244s; }
  .nav__menu.open > :nth-child(10) { animation-delay: .272s; }
  .nav__menu.open > :nth-child(11) { animation-delay: .3s; }
  .nav__menu.open > :nth-child(12) { animation-delay: .328s; }
  .nav__menu.open > :nth-child(13) { animation-delay: .356s; }

  /* 시트 열림 시 본문 스크롤 락 (:has 지원 브라우저·CSS 단독) */
  body:has(.nav__menu.open) { overflow: hidden; }

  /* 시트 뒤 본문 dim — [메인 교정 2026-07-22·실측]
     .site-header에 backdrop-filter가 걸려 있어 그 자손의 position:fixed는 뷰포트가 아니라
     헤더 박스(실측 393×60)에 갇힌다. 필터 없는 루트 html의 ::after로 이전해 전면을 덮는다.
     z-index 90 = 본문(2) 위·헤더(100) 아래. 딤 탭 시 target=html →
     main.js 외부클릭 핸들러가 closest('#navMenu')·closest('#navToggle') 모두 null이라 시트를 닫는다(JS 무수정). */
  html::after {
    content: ""; position: fixed; inset: 0; z-index: 90;
    background: rgba(3,5,11,.58);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  html:has(.nav__menu.open)::after { opacity: 1; pointer-events: auto; }
}

/* ---------- M5. 섹션 여백·정보 밀도 리듬 (≤768px) ---------- */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: clamp(24px, 6.6vw, 30px); }
  .section-head p { font-size: 15.5px; margin-top: 12px; }
  .eyebrow { font-size: 12px; letter-spacing: .12em; }
  .eyebrow::before { width: 20px; margin-right: 8px; }

  .grid { gap: 14px; }
  .card { padding: 24px 20px; border-radius: 14px; }
  .card__icon { width: 46px; height: 46px; border-radius: 11px; margin-bottom: 16px; }
  .card__icon svg { width: 24px; height: 24px; }
  .card h3 { font-size: 18px; }
  .card p { font-size: 15px; }

  .vm-grid { gap: 14px; }
  .vm-card { padding: 26px 22px; }
  .vm-card h3 { font-size: 20px; }
  .vm-card p { font-size: 15.5px; }

  .leader { gap: 22px; }
  .leader__card { padding: 28px 22px; }
  .leader__bio { font-size: 15.5px; }
  .career-list li { font-size: 15px; }
  .focus-row { padding: 20px 0; gap: 14px; }
  .focus-row__no { flex-basis: 40px; font-size: 17px; }
  .focus-row__body h3 { font-size: 18px; }
  .focus-row__body p { font-size: 15px; }

  .notice { padding: 22px 18px; }
  .contact-item { padding: 18px; gap: 13px; }
  .contact-item__icon { width: 42px; height: 42px; }
  .cta-band { padding: 40px 22px; border-radius: 16px; }
  .cta-band p { font-size: 15.5px; margin: 12px auto 24px; }

  .site-footer {
    padding: 44px 0 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    font-size: 14px;
  }
  .footer-top { gap: 24px; padding-bottom: 28px; }
  .footer-brand p { margin-top: 12px; }
  .footer-col ul { gap: 8px; }
  .footer-bottom { padding-top: 22px; }
}

/* 초소형·좁은 화면 미세 압축 (≤560px) */
@media (max-width: 560px) {
  :root { --gut: 20px; }
  .section { padding: 52px 0; }
  .section-head { margin-bottom: 30px; }
  .card { padding: 22px 18px; }
  .grid { gap: 12px; }
  .cta-band { padding: 34px 20px; }
  .cta-band h2 { font-size: clamp(21px, 6vw, 24px); }
}

/* ---------- M6. 터치 타깃 44×44 — 컴포넌트별 히트영역 확장 (≤768px) ---------- */
/* 시각 밀도는 유지하고 히트박스만 padding+음수마진으로 확장 (일괄 min-height 금지 규정 준수) */
@media (max-width: 768px) {
  .footer-col a,
  .footer-bottom a,
  .footer-brand a {
    display: inline-block;
    padding: 11px 10px; margin: -11px -10px;
    border-radius: 8px;
  }
  .card p a,
  .leader p a,
  .prose a,
  .contact-item a {
    display: inline-block;
    padding: 11px 8px; margin: -11px -8px;
    border-radius: 8px;
  }
  .notice a { display: inline-block; padding: 11px 6px; margin: -11px -6px; }
}

/* ---------- M7. 마이크로 인터랙션 — 절제·무한 애니메이션 0 (≤768px) ---------- */
@media (max-width: 768px) {
  .btn { transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
  .btn:active { transform: scale(.982); }
  .btn--primary:active {
    background: var(--gold-soft);
    box-shadow: 0 3px 12px rgba(201,162,39,.3), 0 0 20px rgba(201,162,39,.26);
  }
  .btn--ghost:active {
    background: rgba(201,162,39,.09);
    box-shadow: inset 0 0 0 1.5px rgba(232,201,90,.55), 0 0 14px rgba(201,162,39,.16);
  }
  .btn--navy:active { background: var(--navy-soft); }
  .card p a:active, .footer-col a:active, .footer-bottom a:active,
  .breadcrumb a:active, .contact-item a:active {
    color: var(--gold-soft); background: rgba(201,162,39,.08);
  }
}

/* ---------- M8. 감소 모션 — 본 레이어의 모든 전환·등장 정지 (≤768px) ---------- */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav__menu { transition: none; }
  .nav__menu.open > * { animation: none; }
  html::after { transition: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- M9. 대비 보정 — 고정 배경(은하) 위 텍스트 실측 기반 (≤768px) ----------
   [메인 심판 2026-07-22 · Playwright 휘도 실측 후 추가]
   배경이 뷰포트 고정이므로 스크롤 시 본문이 은하의 밝은 팔 위를 지나간다.
   전역 스크림을 올리면 은하가 탁해지므로(3자 토론 금지 조항), 국소 보정만 적용한다.
   실측 위반 5건: 고스트 CTA 2.98:1 / 신뢰바 보조 3.01:1 / .eyebrow 3.70:1
                  / 푸터 링크 3.51:1 / about 본문 4.09:1  (기준 4.5:1) */
@media (max-width: 768px) {
  :root {
    --text-muted: #b6c1d4;   /* 0.448 → 0.524 (about 본문 4.09→4.71:1) */
    --text-dim:   #a8b3c8;   /* 0.253 → 0.443 (푸터 링크 3.51→5.72:1·신뢰바 3.01→5.0:1) */
  }

  /* 고스트 CTA — 은하 팔 위에서 라벨이 2.98:1까지 떨어진다.
     서리유리(frosted) 배경으로 국소 차폐: 0.295×(1−.62)≈0.112 → 6.3:1 */
  .hero__actions .btn--ghost {
    background: rgba(6, 10, 22, .68);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .40);
  }
  .hero__actions .btn--ghost:active {
    background: rgba(10, 16, 32, .72);
    box-shadow: inset 0 0 0 1.5px rgba(232, 201, 90, .58), 0 0 14px rgba(201, 162, 39, .16);
  }

  /* 섹션 헤드 — 골드 eyebrow(#e0c45c)는 색을 바꿀 수 없으므로(브랜드) 국소 스크림으로 해결.
     요소 자체 background이므로 z-index 조작 불요·부모 배경 위·자기 텍스트 아래에 정확히 깔린다. */
  .section-head {
    background: radial-gradient(ellipse 94% 86% at 50% 46%,
                rgba(4, 7, 15, .58), rgba(4, 7, 15, 0) 74%);
    padding: 12px 0;
  }

  /* 신뢰바 — 은하 중심부와 겹치는 구간. 색 상향(위 --text-dim)에 더해 광학 보정 */
  .hero__meta-item .n { text-shadow: 0 1px 10px rgba(0, 0, 0, .72); }
  .hero__meta-item .l { text-shadow: 0 1px 8px rgba(0, 0, 0, .66); }

  /* 푸터 — 은하 하단부가 비쳐 링크 대비를 갉아먹던 구간 */
  .site-footer { background: rgba(5, 7, 15, .90); }
}

/* ---------- M10. 본문 구간 스크림 — 히어로는 온전히, 본문은 읽히게 (≤768px) ----------
   [메인 심판 2026-07-22 · 실측 근거]
   배경이 뷰포트 고정이라 스크롤 시 본문이 은하의 밝은 팔 위를 지난다. 본문 텍스트는
   이미 거의 흰색(#e9edf6·L 0.845)이라 색 상향으로는 대비를 더 얻을 수 없다(실측 4.09:1·2.16:1).
   따라서 히어로(.hero·.page-hero)는 스크림 0으로 두어 우주를 온전히 보여주고,
   본문 섹션에만 균일 스크림을 깐다. 섹션이 연속이라 경계선·띠가 생기지 않는다.
   전면 스크림 상향(은하 전체를 탁하게)은 3자 토론 금지 조항이므로 채택하지 않았다. */
@media (max-width: 768px) {
  .section { background-color: rgba(4, 7, 15, .50); }
  .section--alt { background-color: rgba(6, 10, 22, .62); }
}

/* ---------- M11. color-scheme — 모바일 한정 (≤768px) ----------
   [메인 심판 2026-07-22 · 절제 실험 근거]
   <meta name="color-scheme" content="dark">를 전역에 걸면 네이티브 폼 컨트롤·스크롤바가
   다크로 정상화되지만, 데스크톱 텍스트 안티에일리어싱 감마까지 바뀌어 픽셀이 달라진다
   (실측: 1280×800 홈 16,918px 차이 / 이 메타만 제거하면 0px).
   데스크톱 승인 종착점을 훼손하지 않기 위해 CSS 속성으로 모바일에만 적용한다.
   ※ 데스크톱 문의폼의 흰색 체크박스는 이 스코프 밖에 남는다 — 박사님 결재 시 전역 전환. */
@media (max-width: 768px) {
  :root { color-scheme: dark; }
}

/* ---------- M12. 터치 타깃 잔여 교정 — 게이트 실측 기반 (≤768px) ----------
   [메인 심판 2026-07-22] G-TT 실측 잔여: 브랜드 로고(h29) · 본문 인라인 링크(h16)
   · 동의 체크박스(17×17). 인라인 링크는 display 변경 없이 세로 패딩만 주어
   히트박스만 키운다(inline-block은 줄바꿈 불가로 좁은 화면 오버플로 위험). */
@media (max-width: 768px) {
  .brand { min-height: 44px; }

  /* 본문 인라인 링크 — 레이아웃 불변·히트영역만 16px → 44px */
  main p a, main li a, .notice a, .contact-form label a, .focus-row__body a, .prose a {
    padding-top: 14px; padding-bottom: 14px;
  }

  /* 동의 체크박스 — 시각 크기 상향(17→24px). 실제 토글 타깃은 이를 감싼 label(≥44px) */
  .contact-form input[type="checkbox"] { width: 24px; height: 24px; }
  .contact-form label:has(input[type="checkbox"]) { min-height: 44px; align-items: center; }
}

/* ---------- M13. 터치 기기 가로·태블릿 — fixed 배경 의존 제거 (≥769px 중 coarse pointer) ----------
   [메인 심판 2026-07-22 · 배경 담당자 이관 결함 처리]
   폰을 가로로 눕히면 뷰포트 폭이 768px를 넘어 위 모바일 블록이 빠지고, 데스크톱 body 규칙의
   `background-attachment: fixed`로 떨어진다. iOS Safari는 fixed를 scroll로 강등하므로
   위치영역이 다시 문서 전체가 되어 **가로 모드에서 뭉갬이 재발**한다(태블릿 세로도 동일).
   따라서 coarse pointer 기기는 폭과 무관하게 자체 고정 레이어를 쓴다 — fixed 지원에 의존하지 않는다.
   데스크톱(fine pointer)은 이 블록에 걸리지 않으므로 승인 종착점 무변경. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
  body { background-image: none; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-color: #05070f;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    background-image:
      linear-gradient(to bottom,
        rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .58) 46%,
        rgba(0, 0, 0, .26) 62%, rgba(0, 0, 0, .26) 78%,
        rgba(0, 0, 0, .08) 88%, rgba(0, 0, 0, .08) 100%),
      url("../assets/cosmos-bg.jpg");
  }
}

/* ---------- 18. 인쇄(@media print) — 공공기관 담당자의 출력·PDF 첨부 대응 (2026-07-22) ----------
   [근거] 다크 우주 테마를 그대로 인쇄하면 잉크 낭비·본문 판독 저하. 3자 토론 R2 양측 B급 판정.
   화면 디자인은 불변, 인쇄 매체에서만 종이용 대비로 전환한다. */
@media print {
  html::before, html::after, body::before, body::after { display: none !important; }
  body {
    background: #fff !important; color: #111 !important;
    font-size: 11pt; line-height: 1.55;
  }
  .site-header, .nav, .nav__toggle, .nav__menu, .skip-link, .fx-toggle,
  .hero__actions, .cta-band, .contact-form, .site-footer .footer-col,
  #cosmicCanvas, .cosmic-nebula, .spaceship { display: none !important; }
  main, header, footer, .section, .section--alt, .card, .vm-card, .leader__card,
  .notice, .contact-item, .cta-band, .page-hero, .hero {
    background: transparent !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  h1, h2, h3, h4, .hero h1, .page-hero h1, .card h3, .vm-card h3,
  .leader__name, .focus-row__body h3, .section-head h2 { color: #000 !important; }
  p, li, .card p, .hero__lead, .prose p, .notice li, .tl-desc,
  .section-head p, .leader__bio, .career-list li { color: #222 !important; }
  .eyebrow, .hero__eyebrow, .card__num, .tl-year, .vm-card__label,
  .focus-row__no, .leader__name span, .leader__sub { color: #555 !important; }
  a { color: #000 !important; text-decoration: underline; }
  /* 외부 링크는 인쇄물에서 주소를 병기 — 종이로 옮겼을 때 출처 추적 가능 */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
  .card, .vm-card, .notice, .contact-item, .leader__card {
    border: 1px solid #bbb !important; break-inside: avoid; page-break-inside: avoid;
  }
  .section { padding: 14pt 0 !important; border: 0 !important; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  img, svg { max-width: 100% !important; }
}

/* ============================================================
   19. 데이터·인사이트 / 프로젝트 / 연구성과 — 신규 IA 페이지 (2026-07-23)
   기존 .card 시각 언어를 그대로 따르되, 카드 전체가 링크인 형태만 추가한다.
   ※ backdrop-filter 는 쓰지 않는다 — 자손 position:fixed 의 containing block 이
     되어 7/21에 잡은 나브 딤 결함을 재현시킨다(회귀 금지 목록 R-3).
   ============================================================ */
.card-grid { display: grid; gap: 24px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.link-card {
  display: block; background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px; color: inherit; text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.link-card:hover, .link-card:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: rgba(201,162,39,.45); background: rgba(22,34,64,.62);
}
.link-card h2 { font-size: 21px; margin: 14px 0 4px; color: #fff; letter-spacing: -.01em; }
.link-card__sub { color: var(--gold-soft); font-size: 14px; margin: 0 0 10px; font-weight: 600; }
.link-card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.7; margin: 0; }
.link-card__go { display: inline-block; margin-top: 16px; color: var(--gold-soft); font-size: 14.5px; font-weight: 700; }

.link-card__tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
/* 등급 A/B/C — C 는 핵심지표와 같은 비중으로 보이지 않도록 채도를 낮춘다(발주 사양 ⅩⅩ) */
.tag--a { background: rgba(201,162,39,.16); color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(201,162,39,.3); }
.tag--b { background: rgba(120,160,220,.13); color: #a9c4e8; box-shadow: inset 0 0 0 1px rgba(140,175,230,.26); }
.tag--c { background: rgba(255,255,255,.06); color: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

.grade-list { display: grid; gap: 16px; margin-top: 8px; }
.grade-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.grade-item strong { color: #fff; font-size: 16px; }
.grade-item p { color: var(--text-muted); font-size: 15px; margin: 6px 0 0; line-height: 1.65; }

.note-box {
  margin-top: 28px; padding: 26px 26px 22px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: rgba(10,16,34,.5);
}
.note-box h3 { color: #fff; font-size: 17px; margin: 0 0 12px; }
.note-box p { color: var(--text-muted); font-size: 15px; line-height: 1.75; margin: 0 0 10px; }
.note-box ul { margin: 0 0 10px; padding-left: 18px; }
.note-box li { color: var(--text-muted); font-size: 15px; line-height: 1.8; }
.note-box strong { color: #e9eefb; }
.note-box__foot { font-size: 14px !important; color: rgba(255,255,255,.6) !important; margin-bottom: 0 !important; }

.legal-note {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line);
  color: rgba(255,255,255,.58); font-size: 13.5px; line-height: 1.75;
}

@media (max-width: 860px) {
  .card-grid--2 { grid-template-columns: 1fr; }
}

/* 연구성과 목록 (/publications/) */
.pub-card h2 { font-size: 17px; margin: 10px 0 0; color: #fff; }
.pub-list { list-style: none; display: grid; gap: 14px; margin: 16px 0 0; padding: 0; }
.pub-list li { display: grid; gap: 4px; }
.pub__title { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); word-break: keep-all; }
.pub__meta { font-size: 12.5px; color: var(--text-dim); }
@media (min-width: 861px) { .pub-grid { grid-template-columns: repeat(3, 1fr); } }

/* /radar/ — 자동 갱신 메타데이터 · 발의 의안 */
.law-card__meta { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.law-card__fact { font-size: 12px; color: var(--text-dim); }
.law-card__fact b { color: rgba(255,255,255,.62); font-weight: 700; margin-right: 4px; }
.law-card__pending {
  justify-self: start; margin-top: 3px; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  background: rgba(224,163,163,.14); color: #e6b3b3; border: 1px solid rgba(224,163,163,.32);
}
.law-card__checked { font-size: 11.5px; color: rgba(255,255,255,.42); margin-top: 3px; }

.bills__note { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin: 0 0 16px; }
.bills__list { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.bills__item { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-bg); }
.bills__title { font-size: 14.5px; color: #fff; font-weight: 600; line-height: 1.5; word-break: keep-all; text-decoration: none; }
a.bills__title:hover { color: var(--gold-soft); text-decoration: underline; }
.bills__meta { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.bills__foot { font-size: 12px; color: rgba(255,255,255,.45); margin: 16px 0 0; }
.dataset-status { font-size: 12.5px; color: var(--text-dim); margin: 0; }

/* 주주시스템 — 원천징수율 근거 각주 */
.wht-ref { font-size: 10px; color: var(--gold-soft); margin-left: 2px; }
.wht-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; margin: 10px 0 0; }
.wht-note b { color: rgba(255,255,255,.72); }

/* 프로젝트 구분 고지 (주주시스템 등) */
.project-scope-note {
  padding: 20px 24px; border-radius: 14px;
  border: 1px solid rgba(201,162,39,.32); background: rgba(201,162,39,.06);
}
.project-scope-note p { margin: 0 0 8px; font-size: 14px; line-height: 1.75; color: var(--text-muted); }
.project-scope-note p:last-child { margin-bottom: 0; }
.project-scope-note b { color: #fff; }
.project-scope-note a { color: var(--gold-soft); font-weight: 600; }

/* 개인정보 처리방침 — 국외이전 고지표 */
.privacy-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.privacy-table th, .privacy-table td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; line-height: 1.7; }
.privacy-table th { width: 200px; color: #fff; background: rgba(255,255,255,.04); font-weight: 700; white-space: nowrap; }
.privacy-table td { color: var(--text-muted); }
@media (max-width: 640px) {
  .privacy-table th, .privacy-table td { display: block; width: auto; white-space: normal; }
  .privacy-table th { border-bottom: none; }
}