/* KR_EQK 소개 — 발표 타임라인이 곧 구조. 모니터의 팔레트를 절제해서 계승. */
:root {
  --bg: #0b0e14;
  --panel: #12161f;
  --line: #242c3b;
  --text: #dde5f0;
  --muted: #8a97ad;
  --crit: #e01e5a;
  --p-wave: #37c8ff;
  --s-wave: #ff4b3a;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'NanumSquare', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 16px; line-height: 1.75;
  word-break: keep-all; overflow-wrap: anywhere;
}
img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #fff; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ── 헤더: 한 줄 ── */
.head {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  padding-top: 26px; padding-bottom: 0;
  font-size: 14px;
}

/* 언어 선택 */
#lang { display: flex; gap: 2px; }
#lang button {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: #6f7a8c;
  padding: 4px 8px; border-radius: 3px;
}
#lang button:hover { color: var(--text); }
#lang button.on { color: var(--text); background: rgba(255,255,255,.07); font-weight: 800; }
@media (max-width: 460px) {
  #lang button { padding: 4px 6px; font-size: 11.5px; }
}
.head .mark { color: var(--crit); font-weight: 900; font-size: 16px; }
.head .name { font-weight: 800; letter-spacing: .04em; }
.head .sep { color: var(--muted); }
.head a { color: var(--muted); text-decoration: none; }
.head a:hover { color: var(--text); text-decoration: underline; }

/* ── 도입 ── */
.open { padding: 84px 24px 40px; }
.statement {
  font-size: clamp(23px, 4vw, 33px); font-weight: 800; line-height: 1.55;
  letter-spacing: -.01em;
}
.follow { color: var(--muted); margin-top: 22px; max-width: 36em; }

/* ── 그림 공통 ── */
figure { margin: 0; }
figure img { border: 1px solid var(--line); border-radius: 4px; }
figcaption {
  color: var(--muted); font-size: 13px; line-height: 1.6;
  margin-top: 9px;
}
figcaption b { color: var(--text); }
.full { padding-bottom: 8px; }

/* ── 사례 절 ── */
.case { padding: 72px 24px 0; }
.case h2 { font-size: 21px; font-weight: 800; margin-bottom: 14px; }
.case > p { color: var(--muted); max-width: 40em; margin-bottom: 26px; }
.case > figure { margin-top: 4px; }
.pw { color: var(--p-wave); font-weight: 700; }
.sw { color: var(--s-wave); font-weight: 700; }
.mj { color: #e37ce3; font-weight: 700; }
.wn { color: #ff6a5b; font-weight: 700; }
.wt { color: #e3dc55; font-weight: 700; }

/* 국내: 2장 나란히 */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── 타임라인 ── */
.timeline { list-style: none; margin-top: 34px; }
.timeline li {
  display: grid; grid-template-columns: 96px 1fr; gap: 22px;
  position: relative; padding-bottom: 46px;
}
.timeline li::before {          /* 세로 괘선 */
  content: ''; position: absolute; left: 110px; top: 6px; bottom: -2px;
  width: 1px; background: var(--line);
}
.timeline li:last-child::before { bottom: 46px; }
.timeline time {
  font-family: var(--mono); font-size: 13.5px; color: var(--muted);
  text-align: right; padding-top: 2px; position: relative;
}
.timeline time::after {         /* 눈금점 */
  content: ''; position: absolute; right: -18.5px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--crit);
}
.timeline .ev h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 7px; }
.timeline .ev > p { color: var(--muted); font-size: 14.5px; max-width: 38em; }
.timeline .ev figure { margin-top: 18px; }

/* ── 세부 명세 ── */
.specs { margin-top: 6px; border-top: 1px solid var(--line); }
.specs > div {
  display: grid; grid-template-columns: 118px 1fr; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.specs dt { font-weight: 800; font-size: 14.5px; }
.specs dd { color: var(--muted); font-size: 14.5px; }

/* ── 맺음 ── */
.close { padding: 88px 24px 96px; }
.close p { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.close .close-note {
  font-size: 14.5px; font-weight: 400; color: var(--muted);
  max-width: 34em; margin: 0 0 18px;
}
.golink { font-family: var(--mono); font-size: 15px; color: var(--crit); }
.golink:hover { color: #ff5c8d; }

/* 오픈 준비 중 */
.soon-sub { font-size: 14.5px; color: var(--muted); font-weight: 400; margin-top: 14px; }

/* ── 푸터 ── */
footer { border-top: 1px solid var(--line); }
footer .wrap { padding: 30px 24px 42px; }
.warn-line { font-size: 13px; color: #c7ab66; max-width: 52em; }
.src { color: #5d6880; font-size: 12.5px; margin-top: 12px; line-height: 1.8; }

/* ── 반응형 ── */
@media (max-width: 700px) {
  .open { padding-top: 56px; }
  .pair { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; padding-bottom: 40px; }
  .timeline li::before { display: none; }
  .timeline time { text-align: left; }
  .timeline time::after { display: none; }
  .specs > div { grid-template-columns: 1fr; gap: 4px; }
}