/* 원색. 이름의 숫자는 OKLCH 밝기(L x 100). site/tokens.json과 값이 같아야 한다(site/check.py가 대조). */
:root {
  --neutral-99: oklch(0.99 0 0);
  --neutral-95: oklch(0.955 0.004 250);
  --neutral-88: oklch(0.88 0.004 250);
  --neutral-74: oklch(0.74 0.004 250);
  --neutral-48: oklch(0.48 0.004 250);
  --neutral-15: oklch(0.15 0.004 250);
  --blue-47: oklch(0.47 0.26 267);

  --font-gothic: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: "Noto Serif KR", "Noto Serif CJK KR", AppleMyungjo, Batang, serif;

  /* 글자 단계: 360px에서 18px 비율 1.2, 1440px에서 20px 비율 1.25. 큰 제목 둘은 화면 폭 따라 더 크게 */
  --step-m1: clamp(0.938rem, 0.917rem + 0.093vw, 1rem);
  --step-0: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.279rem + 0.315vw, 1.562rem);
  --step-2: clamp(1.62rem, 1.5rem + 0.556vw, 1.953rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);
  --step-5: clamp(2.799rem, 2.461rem + 1.504vw, 3.815rem);
  --step-6: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);

  /* 간격: 0.25rem 단위 + 큰 간격 셋 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-section: clamp(4rem, 2.667rem + 5.926vw, 8rem);
  --space-block: clamp(2rem, 1.667rem + 1.481vw, 3rem);
  --space-gutter: clamp(1.25rem, 0.833rem + 1.852vw, 2.5rem);
}

/* 의미 */
:root {
  color-scheme: light;
  --color-bg: var(--neutral-99);
  --color-surface: var(--neutral-95);
  --color-text: var(--neutral-15);
  --color-text-muted: var(--neutral-48);
  --color-line: var(--neutral-88);
  --color-inverse-bg: var(--neutral-15);
  --color-inverse-text: var(--neutral-99);
  --color-inverse-muted: var(--neutral-74);
  --color-inverse-line: var(--neutral-48);
  --color-accent: var(--blue-47);
  --color-on-accent: var(--neutral-99);
  --color-focus: var(--color-accent);
}

/* 부품 */
:root {
  --text-display: 350 var(--step-6) / 1.12 var(--font-gothic);
  --text-list: 300 var(--step-5) / 1.15 var(--font-gothic);
  --text-section: 400 var(--step-3) / 1.25 var(--font-gothic);
  --text-lead: 400 var(--step-1) / 1.55 var(--font-gothic);
  --text-heading: 600 var(--step-1) / 1.3 var(--font-gothic);
  --text-label: 600 var(--step-m1) / 1.4 var(--font-gothic);
  --text-body: 400 var(--step-0) / 1.75 var(--font-serif);
  --text-plain: 400 var(--step-0) / 1.75 var(--font-gothic);
  --text-small: 400 var(--step-m1) / 1.6 var(--font-gothic);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-plain);
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, figure, table { margin: 0; }
ul { padding: 0; list-style: none; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
.keep { white-space: nowrap; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.wrap {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.label {
  font: var(--text-label);
  color: var(--color-text-muted);
}

/* 맨 위 막대: 사진 위에 얹는다 */
.site-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  color: var(--color-inverse-text);
  background: linear-gradient(to bottom, color-mix(in oklch, var(--neutral-15) 60%, transparent), transparent);
  --color-focus: var(--color-inverse-text);
}
.site-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.wordmark {
  padding-block: var(--space-1);
  font: 600 var(--step-0) / 1.2 var(--font-gothic);
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}
.site-nav a {
  display: inline-block;
  padding-block: var(--space-1);
  font: var(--text-small);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

/* 버튼 */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: 999px;
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  font: 600 var(--step-m1) / 1.2 var(--font-gothic);
  text-decoration: none;
}
.button::after {
  content: "\2192";
  content: "\2192" / "";
}
.button:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* 사진 전면 머리 */
.hero-photo {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(32rem, 86vh, 58rem);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  overflow: hidden;
}
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--neutral-15) 85%, transparent) 0%,
    color-mix(in oklch, var(--neutral-15) 35%, transparent) 50%,
    color-mix(in oklch, var(--neutral-15) 10%, transparent) 100%
  );
}
.hero-photo .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-section) var(--space-block);
}
.hero-photo h1 {
  font: var(--text-display);
  letter-spacing: -0.025em;
  max-width: 15em;
  text-wrap: balance;
}
.hero-sub { font: var(--text-lead); color: var(--color-inverse-text); }

/* 밝은 칸: 인사 + 글 두 단 */
.intro { background: var(--color-surface); }
.intro .wrap {
  display: grid;
  gap: var(--space-block);
  padding-block: var(--space-section);
}
.intro h2 { font: var(--text-section); letter-spacing: -0.015em; max-width: 22em; text-wrap: balance; }
.intro-cols { display: grid; gap: var(--space-6); }
.intro-cols > div { display: grid; gap: var(--space-6); align-content: start; }
.intro-cols p { max-width: 32em; }
.intro .lead-main { font: var(--text-lead); }
.as-of { font: var(--text-small); color: var(--color-text-muted); }

/* 사진 띠 */
.photo-strip img {
  width: 100%;
  height: clamp(16rem, 42vw, 34rem);
  object-fit: cover;
}

/* 검정 칸: 하는 일 */
.offer {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  --color-focus: var(--color-inverse-text);
}
.offer .wrap {
  display: grid;
  gap: var(--space-block);
  padding-block: var(--space-section);
}
.offer .label { color: var(--color-inverse-muted); }
.offer-list { display: grid; gap: var(--space-6); }
.offer-list h3 { font: var(--text-list); letter-spacing: -0.02em; }
.offer-list p { margin-top: var(--space-2); color: var(--color-inverse-muted); }
.offer-note {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-inverse-line);
  font: var(--text-lead);
}

/* 흰 칸: 가운데 정렬 제목 + 카드 */
.centered .wrap {
  display: grid;
  justify-items: center;
  gap: var(--space-block);
  padding-block: var(--space-section);
  text-align: center;
}
.centered h2 { font: var(--text-section); letter-spacing: -0.015em; text-wrap: balance; }
.centered .wrap > p { max-width: 34em; }
.card {
  width: 100%;
  max-width: 48rem;
  padding: var(--space-block) var(--space-gutter);
  background: var(--color-surface);
  text-align: left;
}
.safety-list li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  font: var(--text-lead);
}
.safety-list li:last-child { border-bottom: 0; }
.card-quote { display: grid; gap: var(--space-4); text-align: center; }
.card-quote p:last-child { font: var(--text-section); letter-spacing: -0.015em; text-wrap: balance; }
.centered + .centered .wrap { padding-top: 0; }
.scene-cards { display: grid; gap: var(--space-4); width: 100%; max-width: 64rem; }
.scene-cards .card { max-width: none; display: grid; gap: var(--space-2); align-content: start; }
.scene-cards h3 { font: var(--text-heading); }

/* 긴 글: 그림 카드 */
.flow {
  margin-top: var(--space-section);
  background: var(--color-surface);
  padding: var(--space-gutter);
}
.flow-grid {
  display: grid;
  gap: var(--space-2);
}
.node {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--space-4);
}
.node-wiki { border: 2px solid var(--color-accent); }
.node-name {
  font-family: var(--font-gothic);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.4;
}
.node-desc {
  margin-top: var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--step-m1);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.join, .arrow-cell {
  display: grid;
  place-items: center;
  font-family: var(--font-gothic);
  font-size: var(--step-1);
  line-height: 1;
  color: var(--color-text-muted);
}
.arrow { display: inline-block; transform: rotate(90deg); }
.bracket { display: none; }
.flow figcaption {
  margin-top: var(--space-6);
  font-family: var(--font-serif);
  font-size: var(--step-m1);
  line-height: 1.6;
}

@media (min-width: 45em) {
  .flow-grid {
    --flow-row-gap: var(--space-3);
    grid-template-columns: minmax(0, 1.15fr) 3.5rem minmax(0, 1fr) 3rem minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    column-gap: 0;
    row-gap: var(--flow-row-gap);
    align-items: center;
  }
  .node-ext { grid-area: 1 / 1; align-self: stretch; }
  .node-work { grid-area: 2 / 1; align-self: stretch; }
  .join { grid-area: 1 / 2 / 3 / 3; align-self: stretch; position: relative; }
  .node-search { grid-area: 1 / 3 / 3 / 4; }
  .arrow-cell { grid-area: 1 / 4 / 3 / 5; }
  .node-wiki { grid-area: 1 / 5 / 3 / 6; }
  .arrow { transform: none; }
  .bracket {
    display: block;
    position: absolute;
    left: 0;
    width: 45%;
    top: calc((100% - var(--flow-row-gap)) / 4);
    bottom: calc((100% - var(--flow-row-gap)) / 4);
    border: 1.5px solid currentColor;
    border-left: 0;
  }
  .join .arrow {
    position: absolute;
    left: 45%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
}

/* 긴 글: 본문 절 */
.section {
  margin-top: var(--space-section);
  padding-top: var(--space-block);
  border-top: 1px solid var(--color-text);
  display: grid;
  gap: var(--space-6);
}
.section h2 {
  font: var(--text-heading);
  text-wrap: balance;
}
.body { display: grid; gap: var(--space-6); font: var(--text-body); }
.body p { max-width: 34em; }

.compare {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-serif);
  font-size: var(--step-m1);
  line-height: 1.6;
}
.compare th {
  text-align: left;
  font-family: var(--font-gothic);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 var(--space-6) var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.compare td {
  vertical-align: top;
  width: 50%;
  padding: var(--space-3) var(--space-6) var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

@media (max-width: 39.99em) {
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: auto; }
  .compare tr {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
  }
  .compare td { padding: var(--space-1) 0; border-bottom: 0; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-gothic);
    font-weight: 600;
    color: var(--color-text-muted);
  }
}

/* 바닥 */
.site-footer {
  margin-top: var(--space-section);
  background: var(--color-surface);
}
.home .site-footer { margin-top: 0; }
.site-footer .wrap {
  display: grid;
  gap: var(--space-block);
  padding-block: var(--space-section) var(--space-block);
}
.footer-mark {
  font: 300 var(--step-6) / 1 var(--font-gothic);
  letter-spacing: -0.03em;
}
.footer-cols { display: grid; gap: var(--space-6); font: var(--text-small); }
.footer-cols > div { display: grid; gap: var(--space-2); align-content: start; }
.footer-cols h2 { font: var(--text-label); }
.footer-nav { display: grid; gap: var(--space-2); align-content: start; }
.footer-nav a { color: var(--color-text); }
.footer-name { font-weight: 600; }
.footer-links { display: grid; gap: var(--space-1); }
.footer-links a { color: var(--color-text); overflow-wrap: anywhere; }

@media (min-width: 48em) {
  .intro-cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-gutter); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-gutter); }
}

@media (min-width: 60em) {
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .scene-cards { grid-template-columns: repeat(3, 1fr); }
  .offer .wrap,
  .section {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-gutter);
  }
  .offer .label { grid-column: 1 / span 3; }
  .offer-list, .offer-note { grid-column: 4 / span 9; }
  .section h2 { grid-column: 1 / span 4; }
  .body { grid-column: 5 / span 8; }
}