/* ============================================================
   coden — 입구·앱·오픈소스·인생샷·문서 페이지가 함께 쓰는 바탕(버튼·타이포·구획).
   헤더·앱 메뉴 막대·푸터와 색 토큰의 실제 값은 chrome.css 에 있다(예전 스타일을 쓰는
   제품 페이지에도 똑같이 들어가야 해서 따로 뒀다). 여기의 --bg, --ink 같은 이름은 그 값의 별칭이다.
   페이지별 모양은 gateway.css, apps.css 처럼 따로 둔다.
   글꼴(@font-face)은 생성 파일 fonts.css 에 있다.

   테마·글자 크기·대비는 기존 사이트와 같은 장치를 쓴다.
   /assets/shared/display-bootstrap.js 가 <html> 에 data-resolved-theme,
   data-text-size, data-contrast 를 먼저 달고, 이 파일은 그 값만 본다.
   ============================================================ */

/* ------------------------------------------------------------ 토큰
   값은 chrome.css 의 --cd-* 가 정한다(밝은·어두운·고대비 모두). 여기서는 짧은 이름만 붙인다. */
:root {
  --bg: var(--cd-bg);
  --surface: var(--cd-surface);
  --surface-2: var(--cd-surface-2);
  --ink: var(--cd-ink);
  --ink-2: var(--cd-ink-2);
  --ink-3: var(--cd-ink-3);
  --line: var(--cd-line);
  --line-strong: var(--cd-line-strong);
  --signal: var(--cd-signal);
  --signal-text: var(--cd-signal-text);
  --on-signal: var(--cd-on-signal);
  --night: var(--cd-night);
  --night-2: var(--cd-night-2);
  --on-night: var(--cd-on-night);
  --on-night-2: var(--cd-on-night-2);
  --focus: var(--cd-focus);
  --shadow-lift: var(--cd-shadow-lift);
  --font-sans: var(--cd-font-sans);
  --font-mono: var(--cd-font-mono);
  --wrap: var(--cd-wrap);
  --gutter: var(--cd-gutter);
  --header-height: var(--cd-header-height);
  color-scheme: light;
}
html[data-resolved-theme="dark"],
html[data-contrast="high"] { color-scheme: dark; }
html[data-text-size="large"] { font-size: 112.5%; }

/* ------------------------------------------------------------ 바탕 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: -0.006em;
  word-break: keep-all;          /* 한국어 어절이 중간에서 잘리지 않게 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--signal); color: var(--on-signal); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
main:focus { outline: none; }

/* ------------------------------------------------------------ 타이포 단계
   한 화면에 굵기 대비를 크게 두고, 큰 글자일수록 자간을 좁힌다. */
.display {
  font-size: clamp(3rem, 8.4vw, 7.25rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 0;
  text-wrap: balance;
}
.h1 {
  font-size: clamp(2.375rem, 5.4vw, 4.5rem);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -0.048em;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}
.h3 { font-size: 1.375rem; font-weight: 750; line-height: 1.3; letter-spacing: -0.025em; margin: 0; }
.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 38em;
  margin: 0;
  text-wrap: pretty;
}
.line { display: block; }
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 버튼 */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 750; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s, border-color 0.15s;
}
.button:active { transform: translateY(1px); }
.button-ink { background: var(--ink); color: var(--bg); }
.button-ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--signal)); }
.button-signal { background: var(--signal); color: var(--on-signal); }
.button-signal:hover { background: color-mix(in srgb, var(--signal) 88%, #ffffff); }
.button-line { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.button-line:hover { border-color: var(--ink); }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html[data-contrast="high"] .button { border-color: var(--line-strong); }
/* 해태(haetae-robotics) 버튼: 해태 브랜드의 청록 바탕에 그래파이트 글자(대비 10:1) */
.button-haetae { background: #66d5d0; color: #0b1214; }
.button-haetae:hover { background: #8ae2de; }

/* 글자 링크: 밑줄은 얇게, 마우스를 올리면 신호색으로 */
.text-link {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em; text-decoration-color: var(--line-strong);
}
.text-link:hover { text-decoration-color: var(--signal); }

/* ------------------------------------------------------------ 구획 */
.section { padding-block: clamp(64px, 9vw, 128px); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 52rem; }

/* ------------------------------------------------------------ 움직임 버튼
   늘 어두운 히어로 캔버스(Graph Family 군무, 해태)의 오른쪽 아래 정지·다시 보기 버튼. */
.motion-controls { position: absolute; right: var(--gutter); bottom: 18px; z-index: 2; display: flex; gap: 8px; }
.motion-button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 14, 24, 0.55); color: var(--on-night); font-weight: 650; font-size: 0.8125rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.motion-button:hover { background: rgba(10, 14, 24, 0.8); border-color: rgba(255, 255, 255, 0.4); }
.motion-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ 언어 색
   Graph Family 에서 그 언어를 맡은 새의 색. 오픈소스 목록과 입구의 횃대가 같이 쓴다. */
.lang-python { --c: #ffd43b; }
.lang-typescript { --c: #3178c6; }
.lang-swift { --c: #e8603c; }
.lang-rust { --c: #c1502e; }
.lang-kotlin { --c: #6e4bd8; }
.lang-go { --c: #1fa6c9; }
.lang-dart { --c: #9a3838; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}