/* 내신만점.kr 연구소 공통 정적 스타일시트
 * 소비자: ../research.html(연구소 메인 통제판) · research/*.html(전용 연구소 9면)
 * 프레임워크·빌드·추적·외부 호출 없음. 색 토큰은 research/operator.html 계열을 승계한다.
 *
 * 클래스 계약(페이지가 쓰는 이름):
 *   메인 — .topbar/.topbar__id/.topbar__links · .masthead/.eyebrow/.readout
 *          .grid-head · .institutes > .card(.card__top/__no/__role/__name/__purpose/__q/__flag/__foot/__open)
 *          .chip(.chip--hold/.chip--integration) · .card--integration · .ledger · .footer
 *   상세 — .back · .detail-head(.bound/.badges) · .panel(.panel-kicker/.lede/.note)
 *          .qbox · .rows(span.hold) · .surface-link · .footer
 */

:root {
  --paper: oklch(98.5% 0.004 250);
  --paper-2: oklch(96.8% 0.008 252);
  --paper-3: oklch(94.2% 0.012 252);
  --ink: oklch(24% 0.02 258);
  --ink-2: oklch(34% 0.018 257);
  --muted: oklch(46% 0.018 257);
  --rule: oklch(88% 0.014 252);
  --rule-2: oklch(76% 0.02 252);
  --accent: oklch(45% 0.17 256);
  --focus: oklch(16% 0.03 258);
  --hold: oklch(46% 0.13 62);
  --integration: oklch(44% 0.13 300);

  --font-display: "Space Grotesk", "Pretendard", "Noto Sans KR", sans-serif;
  --font-body: "Inter", "Pretendard", "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --xs: 0.25rem;
  --sm: 0.5rem;
  --md: 0.75rem;
  --lg: 1rem;
  --xl: 1.5rem;
  --xxl: 2rem;
  --xxxl: 3rem;
  --x4l: 4.5rem;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.3rem;
  --t-2xl: clamp(1.6rem, 2.4vw, 2.3rem);

  --radius: 8px;
  --hair: 1px;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
code { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }

h1, h2, h3 {
  margin-top: 0;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { margin-bottom: var(--lg); font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.04; }
h2 { margin-bottom: var(--md); font-size: var(--t-2xl); line-height: 1.12; }
h3 { margin-bottom: var(--sm); font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.02em; }
p { margin: 0 0 var(--lg); overflow-wrap: anywhere; }
p:last-child { margin-bottom: 0; }

.shell { width: min(1240px, calc(100% - 2rem)); margin-inline: auto; }

/* ── 상단 바 (메인·상세 공용) ───────────────────────── */
.topbar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sm) var(--lg);
  padding-block: var(--md);
  border-bottom: var(--hair) solid var(--rule);
}
.topbar__id { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sm) var(--md); min-width: 0; }
.topbar__id b { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); letter-spacing: -0.025em; }
.topbar__id span { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .05em; color: var(--muted); }
.topbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm) var(--lg); min-width: 0; }
.topbar__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── 공통 라벨 ───────────────────────────────────────── */
.eyebrow {
  margin: 0 0 var(--md);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.lede { max-width: 72ch; color: var(--ink-2); }
.note { max-width: 72ch; color: var(--muted); font-size: var(--t-sm); }

/* ── 메인: 머리 ──────────────────────────────────────── */
.masthead { padding-block: var(--xxxl) var(--xl); }
.masthead h1 { max-width: 30ch; }
.masthead p { max-width: 74ch; color: var(--muted); }
.masthead p strong { color: var(--ink-2); font-weight: 600; }

.readout {
  margin: var(--xxl) 0 0;
  display: grid;
  border: var(--hair) solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}
.readout > div { display: grid; gap: var(--xs); padding: var(--lg); border-bottom: var(--hair) solid var(--rule); min-width: 0; }
.readout > div:last-child { border-bottom: 0; }
.readout dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted);
  text-transform: uppercase;
}
.readout dd { margin: 0; color: var(--ink); font-weight: 600; font-size: var(--t-sm); }

/* ── 메인: 그리드 머리글 ─────────────────────────────── */
.grid-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--xs) var(--lg);
  margin-block: var(--xxl) var(--xl);
  padding-bottom: var(--md);
  border-bottom: 2px solid var(--ink);
}
.grid-head h2 { margin: 0; }
.grid-head span { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .04em; color: var(--muted); }

/* ── 메인: 연구소 카드 3×3 ──────────────────────────── */
.institutes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lg);
  margin: 0;
  padding: 0 0 var(--x4l);
  list-style: none;
}
.institutes > li { display: grid; min-width: 0; }

.card {
  --card-accent: var(--accent);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--md);
  min-width: 0;
  padding: var(--lg);
  border: var(--hair) solid var(--rule-2);
  border-block-start: 3px solid var(--card-accent);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.card:active { transform: translateY(1px); }

.card__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--xs) var(--md); min-width: 0; }
.card__no { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; color: var(--card-accent); }
.card__role { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .04em; color: var(--muted); overflow-wrap: anywhere; }
.card__name { margin: 0; font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.2; color: var(--ink); letter-spacing: -0.025em; }
.card__name small { display: block; margin-top: var(--xs); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: .03em; color: var(--muted); }
.card__purpose { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.card__q { margin: 0; padding-inline-start: var(--lg); border-inline-start: 3px solid var(--rule-2); font-size: var(--t-sm); color: var(--ink-2); }
.card__q b {
  display: block;
  margin-bottom: var(--xs);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted);
  text-transform: uppercase;
}
.card__flag {
  margin: 0;
  padding: var(--md);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--card-accent) 10%, var(--paper));
  color: color-mix(in oklch, var(--card-accent) 80%, var(--ink));
  font-size: var(--t-sm);
  font-weight: 600;
}
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm) var(--md);
  padding-top: var(--md);
  border-top: var(--hair) solid var(--rule);
  min-width: 0;
}
.card__open { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em; color: var(--card-accent); white-space: nowrap; }

/* 상태 칩 — 기본값은 '미확인' 톤 */
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sm);
  min-width: 0;
  padding: var(--xs) var(--md);
  border: var(--hair) solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .03em;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.chip i {
  flex: none;
  width: .45rem;
  height: .45rem;
  margin-top: .45em;
  border-radius: 50%;
  border: var(--hair) solid var(--rule-2);
  background: var(--paper-3);
}
.chip--hold { border-color: color-mix(in oklch, var(--hold) 45%, var(--rule-2)); color: var(--hold); }
.chip--hold i { border-color: var(--hold); background: var(--hold); }
.chip--integration { border-color: color-mix(in oklch, var(--integration) 45%, var(--rule-2)); color: var(--integration); }
.chip--integration i { border-color: var(--integration); background: var(--integration); }

/* ALT42 — 통합 연구 목적지 카드 */
.card--integration { --card-accent: var(--integration); background: var(--paper-2); }

/* ── 메인: 정본 참조 원장 ───────────────────────────── */
.ledger { padding-bottom: var(--x4l); }
.ledger h2 { padding-bottom: var(--md); border-bottom: 2px solid var(--ink); }
.ledger ul { list-style: none; margin: var(--xl) 0 0; padding: 0; display: grid; gap: var(--lg); }
.ledger li { display: grid; gap: var(--xs); padding-bottom: var(--lg); border-bottom: var(--hair) solid var(--rule); min-width: 0; }
.ledger li b {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--accent);
  text-transform: uppercase;
}
.ledger li span { font-size: var(--t-sm); color: var(--muted); }

/* ── 상세: 되돌아가기 ───────────────────────────────── */
.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--lg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── 상세: 머리 ──────────────────────────────────────── */
.detail-head { padding-block: var(--xl) var(--xxl); border-bottom: 2px solid var(--ink); }
.detail-head h1 { margin-bottom: var(--md); }
.detail-head h1 small {
  display: block;
  margin-top: var(--sm);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--muted);
}
.bound { max-width: 78ch; margin-bottom: var(--xl); color: var(--ink-2); }
.bound strong { color: var(--ink); font-weight: 600; }
.badges { display: flex; flex-wrap: wrap; gap: var(--sm) var(--md); margin: 0; padding: 0; list-style: none; }

/* ── 상세: 패널 ──────────────────────────────────────── */
.panel { padding-block: var(--xxl); border-bottom: var(--hair) solid var(--rule); display: grid; gap: var(--lg); }
.panel:last-of-type { border-bottom: 0; }
.panel > h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -0.02em; }
.panel-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--accent);
  text-transform: uppercase;
}
.panel p { margin: 0; }

.qbox {
  padding: var(--xl);
  border: var(--hair) solid var(--rule-2);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.qbox p { margin: 0; color: var(--ink); font-size: var(--t-lg); font-weight: 600; line-height: 1.45; }
.qbox p + p { margin-top: var(--lg); color: var(--muted); font-size: var(--t-sm); font-weight: 400; }

.rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--hair) solid var(--rule-2); }
.rows li { display: grid; gap: var(--xs); padding-block: var(--lg); border-bottom: var(--hair) solid var(--rule); min-width: 0; }
.rows b {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted);
  text-transform: uppercase;
}
.rows span { font-size: var(--t-sm); color: var(--ink-2); }
.rows span.hold { color: var(--hold); font-weight: 600; }

/* ALT42 상세 — 독립 수익화 BM이 아님을 먼저 읽히게 한다 */
.integration-callout {
  padding: var(--xl);
  border: var(--hair) solid color-mix(in oklch, var(--integration) 45%, var(--rule-2));
  border-inline-start: 4px solid var(--integration);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--integration) 8%, var(--paper));
}
.integration-callout p { margin: 0; color: color-mix(in oklch, var(--integration) 78%, var(--ink)); font-size: var(--t-lg); font-weight: 600; line-height: 1.4; }
.integration-callout p + p { margin-top: var(--lg); color: var(--ink-2); font-size: var(--t-sm); font-weight: 400; }

.surface-link {
  display: inline-flex;
  align-items: center;
  align-self: start;
  min-height: 44px;
  max-width: 100%;
  padding-inline: var(--lg);
  border: var(--hair) solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* ── 바닥 ────────────────────────────────────────────── */
.footer {
  padding-block: var(--xl);
  border-top: var(--hair) solid var(--rule);
  display: grid;
  gap: var(--xs);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--muted);
}
.footer p { margin: 0; overflow-wrap: anywhere; }

/* ── 포인터 있는 환경만 hover ───────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--card-accent); background: var(--paper-2); }
  .topbar__links a:hover, .back:hover { color: var(--accent); }
  .surface-link:hover { border-color: var(--accent); color: var(--accent); }
}

/* ── 반응형: 모바일 1열 · 태블릿 2열 · 데스크톱 3×3 ── */
@media (min-width: 30rem) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout > div { border-inline-end: var(--hair) solid var(--rule); }
  .readout > div:nth-child(2n) { border-inline-end: 0; }
}

@media (min-width: 48rem) {
  .shell { width: min(1240px, calc(100% - 3rem)); }
  .institutes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xl); }
  .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--xxl); }
}

/* 데스크톱 기준폭(1024px)부터 3열 — 오너 요구인 3×3 격자가 보통 노트북에서 보이게 한다 */
@media (min-width: 64rem) {
  .institutes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readout > div:nth-child(2n) { border-inline-end: var(--hair) solid var(--rule); }
  .readout > div:last-child { border-inline-end: 0; }
  .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer { grid-template-columns: 1fr auto; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media print {
  .topbar, .card__open, .back { display: none; }
  body { background: #fff; }
}