/* 노마드 코너스톤 사이트 전역 스타일 — 웜 페이퍼 + 오렌지 강조 토큰과 점진적 공개 인덱스 레이아웃 */

/* 구조는 docs/tasks/screen-uiux-20260729-progressive-index.md 의 D1~D4 · R1~R8 을 따른다.
   분기점 2개 — 900px 에서 상세가 우측 stage 로(2열), 1024px 에서 부제목이 컬럼 2 로(3열).
   CSS 분기점과 스크립트의 matchMedia 값은 항상 같아야 한다. */

/* ── 토큰 ─────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --bg:            #f2f1ed;
  --bg-rgb:        242, 241, 237;
  --fg:            #16160f;
  --fg-muted:      #57554c;
  --fg-subtle:     #6a6860;
  --border:        #dad9d5;
  --border-strong: #c6c5c1;
  --hover-wash:    rgba(22, 22, 15, 0.05);

  /* 원색 #ff6501 은 종이 배경 대비 2.61:1 이라 글자·상태 표시에 쓰지 않는다.
     글자·아이콘은 --accent-text(3.21:1), 배경으로 쓸 때만 원색 + 검정 글자(7.11:1) */
  --accent:      #ff6501;
  --accent-text: #de5a02;
  --accent-fg:   #000000;
  --accent-hover: #e85d04;
  /* R4-2 — 본문 크기 글자용 강조색. --accent-text(#de5a02) 는 종이 대비 3.34:1 로
     "대형 텍스트" 기준이라 15px 제목·18px 연락처에 쓸 수 없다. #b34700 은 4.87:1 로
     본문 크기 AA(4.5:1) 를 통과한다 */
  --accent-text-sm: #b34700;

  --solid-bg:       var(--fg);
  --solid-fg:       var(--bg);
  --solid-bg-hover: #33322a;

  --header-bg: rgba(242, 241, 237, 0.92);

  --font-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Pretendard Variable', monospace;

  --fs-h1:        clamp(2.125rem, 6.4vw, 5.125rem);
  --fs-statement: clamp(1.375rem, 2.8vw, 2.125rem);
  --fs-h3:        clamp(1.3125rem, 2.4vw, 1.6875rem);
  --fs-lead:      clamp(1rem, 1.5vw, 1.125rem);
  --fs-body:      1rem;
  --fs-small:     0.9375rem;
  --fs-mono:      0.6875rem;

  --max-width: 1240px;
  --gutter:    clamp(18px, 4vw, 44px);

  --header-h: 66px;
  --header-offset: calc(var(--header-h) + 12px);

  --r-btn: 7px;

  /* 여백 위계 — 이 네 값만 쓴다. 컴포넌트 내부(라벨↔값)의 붙은 간격은 별개.
     --sp-section 이 "섹션 경계" 와 "섹션 안 큰 덩어리" 를 겸하면 3단이 실질 2단으로 눌려
     섹션이 어디서 끊기는지 여백만으로 구분되지 않는다 → 중간 단(--sp-group)을 따로 둔다 */
  --sp-section: clamp(60px, 9vw, 116px);
  --sp-group:   clamp(40px, 5vw, 68px);
  --sp-block:   clamp(26px, 3.4vw, 40px);
  --sp-el:      14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #16160f;
    --bg-rgb:        22, 22, 15;
    --fg:            #f2f1ed;
    --fg-muted:      #aba99f;
    --fg-subtle:     #918f86;
    --border:        #2e2e25;
    --border-strong: #3d3c33;
    --hover-wash:    rgba(242, 241, 237, 0.07);

    /* 어두운 배경에서는 원색이 6.15:1 이라 글자에도 그대로 쓴다.
       본문 크기(--accent-text-sm)도 6.16:1 이라 같은 값으로 둔다 */
    --accent-text: #ff6501;
    --accent-text-sm: #ff6501;

    --solid-bg-hover: #ffffff;

    --header-bg: rgba(22, 22, 15, 0.92);
  }
}

/* ── 리셋 ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; }

ul, ol { list-style: none; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection { background: var(--border-strong); }

main, section[id] { scroll-margin-top: var(--header-offset); }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dim    { color: var(--fg-subtle); }
.accent { color: var(--accent-text); font-weight: 600; }
.hl     { color: var(--fg); font-weight: 500; }
.nowrap { white-space: nowrap; }

/* ── 스크롤 진입 모션 ───────────────────────────────────── */

/* 인덱스에는 걸지 않는다 — transform 이 남으면 스티키 컨테이닝 블록이 흔들릴 수 있다 */
[data-reveal] {
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.is-hidden { opacity: 0; transform: translateY(14px); }

/* ── skip link ──────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 70;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  transform: translateY(-150%);
}

.skip-link:focus-visible { transform: translateY(10px); }

/* ── 헤더 ───────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 20px);
  height: var(--header-h);
}

.brand { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }

.brand__latin {
  display: none;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__ko {
  font-size: 0.90625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 30px); flex-shrink: 0; }

.nav__link,
.nav__cta {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: var(--fs-small);
  white-space: nowrap;
}

.nav__link { color: var(--fg-muted); }

/* 호버 규칙은 전부 @media (hover: hover) 안에 둔다 — 터치에서는 탭 뒤에 호버 색이 남아
   "선택됨" 처럼 읽힌다. 각 규칙을 원래 자리에서 감싸 cascade 순서를 바꾸지 않는다 */
@media (hover: hover) {
  .nav__link:hover { color: var(--fg); }
}

.nav__cta {
  height: 36px;
  padding-inline: 18px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 500;
}

@media (hover: hover) {
  .nav__cta:hover { background: var(--accent-hover); }
}

.nav__more { display: none; }

@media (min-width: 720px) {
  .brand__latin { display: inline; }
  .nav__more { display: inline; }
  .brand__ko { font-size: 0.96875rem; font-weight: 500; color: var(--fg-subtle); }
}

/* ── 공통 요소 ──────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* uppercase 를 걸지 않는다 — "iOS" 가 "IOS" 로 뭉개진다 */
.eyebrow--plain { text-transform: none; letter-spacing: 0.08em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 18px;
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}

.btn--solid { background: var(--solid-bg); color: var(--solid-fg); }

.btn--outline { border: 1px solid var(--border-strong); background: var(--bg); }

@media (hover: hover) {
  .btn--solid:hover { background: var(--solid-bg-hover); }
  .btn--outline:hover { background: var(--hover-wash); }
}

/* 링크가 아닌 상태 표기 — "Android 준비 중" */
.note {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
}

/* ch 는 한글 폭을 과소평가한다 — 한글 문단의 max-width 는 전부 em */
.statement {
  max-width: 22em;
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

/* ── 히어로 ─────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 12vw, 168px) clamp(40px, 6vw, 76px);
}

.hero__deco,
.hero__veil { position: absolute; pointer-events: none; }

.hero__deco {
  display: none;
  top: 50%;
  right: calc(0.4 * max(var(--gutter), (100% - var(--max-width)) / 2));
  width: min(680px, 50vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--fg-subtle);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, rgba(0, 0, 0, 0.5) 68%, transparent 88%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, rgba(0, 0, 0, 0.5) 68%, transparent 88%);
}

.hero__deco svg { display: block; }

.hero__deco .nd { fill: var(--accent); }

.hero__deco .rg { fill: none; stroke: var(--accent); stroke-width: 1.2; }

.hero__deco .lk { stroke: var(--accent); stroke-width: 1.4; }

.hero__veil {
  inset: 0;
  background: linear-gradient(96deg,
    rgb(var(--bg-rgb)) 0%,
    rgb(var(--bg-rgb)) 42%,
    rgba(var(--bg-rgb), 0.72) 56%,
    rgba(var(--bg-rgb), 0.28) 70%,
    rgba(var(--bg-rgb), 0.04) 84%,
    rgba(var(--bg-rgb), 0) 100%);
}

.hero .container { position: relative; }

.hero__title {
  max-width: 16em;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

/* CTA 를 걷어내 리드 문장만 남았다 — grid 2열이 필요 없어져 단순 블록으로 되돌렸다 */
.hero__foot { margin-top: clamp(34px, 5vw, 60px); }

.hero__lead {
  max-width: 26em;
  color: var(--fg-muted);
  font-size: var(--fs-lead);
  text-wrap: pretty;
}

.hero .eyebrow { margin-bottom: clamp(28px, 4vw, 44px); }

@media (min-width: 720px) {
  .hero__deco { display: block; }
}
/* ══ 점진적 공개 인덱스 ═══════════════════════════════════ */

/* R3 — 섹션 사이 구분선 제거. 경계는 --sp-section 여백만으로 만든다 */
/* 믿음 문장을 01 의 기본 상세로 옮기면서 위쪽 여백을 한 단 줄였다 — 목차를 위로 올리기 위함이다.
   아래쪽은 푸터와의 경계라 --sp-section 을 유지한다 */
.index-section {
  padding-block: var(--sp-group) var(--sp-section);
}

/* 상세 패널 안의 믿음 문장. 히어로 h1 다음으로 큰 --fs-statement(22~34px) 는 패널 폭에서
   과하므로 한 단 낮춘다. 한글 문단이라 max-width 는 ch 가 아니라 em 으로 잡는다 */
.statement--panel {
  max-width: 21em;
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.idx { display: grid; grid-template-columns: minmax(0, 1fr); }

/* ── 인덱스 목록 — 기본 상태는 목차처럼 작고 단순한 텍스트만 ── */

/* 단일 열(899 이하)에서 목록이 화면 폭만큼 늘어나면 라벨과 우측 표시가 멀어져 표처럼 벌어진다.
   상세 패널과 같은 34em 으로 묶어 두 덩어리의 오른쪽 끝을 맞춘다.
   2분할에서는 좌측 열이 이미 34em 보다 좁아(900 에서 251px) 이 값이 걸리지 않는다 */
/* R3 — 머리 구분선 제거. 항목 사이 경계는 row-gap 하나로만 만든다 (여백 위계의 최하단)
   R4-1 — 줄 간격을 --sp-el(14px) → 8px 로 더 줄였다. 구분선이 없으므로 간격이 넓으면
   목차처럼 벌어져 보이고, 좁혀야 "위에서 아래로 적힌 텍스트" 로 읽힌다.
   --sp-el 자체는 패널 내부에서도 쓰이므로 건드리지 않고 이 목록만 좁힌다 */
.idx__list {
  display: grid;
  row-gap: 8px;
  max-width: 34em;
}

/* R3 — 항목 간 가로 구분선 제거 */
.item {
  scroll-margin-top: var(--header-offset);
}

/* 제목 위계는 h3 로 두고 버튼을 안에 넣는다 (아코디언 표준 패턴) */
.item__h { font-size: inherit; font-weight: inherit; }

/* min-height 는 터치 타깃(44px) 때문이다. 3컬럼(마우스·키보드 전용)에서는 풀어 줄 간격을 좁힌다 */
.item__btn {
  display: grid;
  grid-template-columns: 1em minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 4px 2px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* R3 — 01·02 번호를 대시로 바꿨다. 숫자가 아니므로 mono·자간을 걷어내고
   본문과 같은 서체·크기로 둔다 (번호표가 아니라 문장 앞 대시로 읽히게) */
.item__num {
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--fg-subtle);
}

/* R3 — 1.0625rem → 0.9375rem. 목록·버튼이 아니라 본문 흐름의 한 줄로 보이게 */
.item__label {
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  color: var(--fg-muted);
  transition: color 0.2s ease;
}

/* R4-2 — 선택된 섹션은 대시와 제목 둘 다 포인트색으로 바뀐다. 15px 글자라
   --accent-text(3.34:1) 가 아니라 본문 크기용 --accent-text-sm(4.87:1) 을 쓴다 */
.item.is-open .item__label,
.item.is-open .item__num { color: var(--accent-text-sm); }

/* :not(.is-open) 으로 한정한다 — 이 규칙이 R4-2 뒤에 있고 특이도가 같아서,
   한정하지 않으면 마우스가 제목 위에 있는 동안 포인트색이 잉크색으로 덮인다
   (열려 있는데도 선택 표시가 안 보인다) */
@media (hover: hover) {
  .item:not(.is-open) .item__btn:hover .item__label { color: var(--fg); }
}

.item__chev {
  color: var(--fg-subtle);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease;
}

/* 상태 표시 아이콘이라 원색(2.61:1) 대신 --accent-text(3.21:1) 를 쓴다 */
.item.is-open .item__chev { transform: rotate(180deg); color: var(--accent-text); }

/* ── 부제목 — 좁은 화면은 항목 아래 인라인, 3컬럼에서는 컬럼 2 로 뜬다 ── */

/* 기본(JS 없음)은 열린 상태. 접기는 전부 html.js 아래에만 있다 */
.subs { display: grid; grid-template-rows: 1fr; }

html.js .subs {
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  /* 접힌 뒤에 visibility 를 끊어야 접히는 동안 내용이 보인다. hidden 이면 탭 순서에서도 빠진다 */
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 0.3s;
}

html.js .item.is-open .subs {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

/* 0fr 로 접히려면 자식이 min-height:0 이어야 한다.
   세로 패딩은 이 요소에 두면 안 된다 — min-height:0 은 콘텐츠 박스만 0 으로 만들고
   패딩은 남아 접힌 상태에서도 그만큼 자리를 차지한다. 그래서 안쪽 .subs__list 로 내렸다 */
/* padding-right 는 열린 .subs 의 overflow:hidden 경계 안쪽에 포커스 링 자리를 만든다.
   .sub 이 width:100% 라 우측 여유가 0 이면 링이 잘린다 (필요 여유 = 2px 굵기 + 4px offset) */
/* 들여쓰기는 .item__label 이 시작하는 위치와 같다 (대시 칸 1em + gap 8px) */
.subs__inner {
  min-height: 0;
  padding-left: calc(1em + 8px);
  padding-right: 8px;
}

/* 상단도 같은 이유로 2px → 8px. overflow 를 visible 로 바꾸면 접히는 0.3s 동안 내용이 흘러나온다 */
.subs__list { padding-block: 8px var(--sp-block); }


.sub {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 4px 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  text-align: left;
  cursor: pointer;
}

/* ::before 를 격자 첫 칸으로 쓴다 — 마커용 span 을 따로 두지 않는다.
   margin-top 은 첫 줄 중앙에 맞춘 값이라 여러 줄이 되어도 어긋나지 않는다 */
.sub::before {
  content: '';
  width: 13px;
  height: 1px;
  margin-top: 0.78em;
  background: var(--border-strong);
  transition: background-color 0.2s ease;
}

/* aria-current 규칙보다 앞에 둔다 — 뒤로 옮기면 선택된 부제목을 호버할 때
   강조색 점이 회색으로 덮인다 */
@media (hover: hover) {
  .sub:hover { color: var(--fg); }
  .sub:hover::before { background: var(--fg-subtle); }
}

.sub[aria-current="true"] { color: var(--fg); }

.sub[aria-current="true"]::before {
  width: 7px;
  height: 7px;
  margin-top: 0.55em;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--accent-text);
}

.sub__value {
  display: block;
  font-size: 0.8125rem;
  color: var(--fg-subtle);
  letter-spacing: -0.01em;
}

/* ── 상세 패널 ──────────────────────────────────────────── */

/* 모바일·JS 없음 = 부제목 묶음 아래 인라인. 들여쓰기를 부제목과 맞춘다.
   max-width 는 한글 문단 기준 em (ch 는 한글 폭을 과소평가한다) */
.panel {
  max-width: 34em;
  padding: 0 0 var(--sp-block) calc(1em + 8px);
}

html.js .panel { display: none; }

html.js .panel.is-open {
  display: block;
  animation: panel-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 닫힌 항목의 상세는 접는다 (인라인 전개 구간에서만 — 2분할·3컬럼에서는 .details 가
   stage 로 옮겨져 이 선택자에 걸리지 않는다. 의도된 분기).

   앞 버전은 `.item:not(.is-pinned)` 였다. 그때는 is-open 이 포인터 호버로 항목 사이를
   옮겨 다녀서, is-open 으로 걸면 마우스를 다른 항목에 올리는 순간 고정해 둔 상세가
   display:none 이 되고 그 안의 포커스가 body 로 날아갔다. 대신 부작용이 남았다 —
   고정된 항목의 부제목이 접혀도(셰브론은 아래를 향함) 그 아래 상세는 펼쳐진 채였다.

   이제 포인터 호버 미리보기를 3컬럼(1024+)에서만 켠다. 인라인 전개 구간에서 is-open 을
   바꾸는 것은 클릭과 키보드 포커스뿐이고, 키보드 포커스는 상세 안에 있으면 그 항목의
   li 안이라 접히지 않는다. 그래서 같은 보호가 is-open 으로 성립하고, 셰브론과 상세의
   방향이 어긋나는 부작용도 함께 사라진다 */
html.js .item:not(.is-open) .details { display: none; }

.panel:focus-visible { outline: 2px solid var(--fg); outline-offset: 8px; }

.panel__title {
  margin-top: 6px;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.panel__desc {
  max-width: 26em;
  margin-top: var(--sp-el);
  color: var(--fg-muted);
  font-size: var(--fs-lead);
  text-wrap: pretty;
}

/* 02 사업 영역의 종목은 한 줄뿐이라 이 크기로 무게를 준다 */
.panel__term {
  max-width: 26em;
  margin-top: var(--sp-el);
  color: var(--fg-muted);
  font-size: var(--fs-lead);
}

.feats {
  display: grid;
  gap: 10px;
  max-width: 30em;
  margin-top: var(--sp-block);
}

.feats li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.feats__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  padding-top: 3px;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-block);
}

.channel__value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-el);
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
}

/* 18px 은 "대형 텍스트"(24px, 굵으면 18.66px) 가 아니라 본문 크기다 —
   --accent-text(3.34:1) 는 AA 4.5:1 미달이라 --accent-text-sm(4.87:1) 을 쓴다 */
@media (hover: hover) {
  .channel__value:hover { color: var(--accent-text-sm); border-bottom-color: currentColor; }
}

.channel__note {
  max-width: 24em;
  margin-top: var(--sp-el);
  color: var(--fg-subtle);
  font-size: var(--fs-small);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ── 추상 그래픽 (D3) ───────────────────────────────────── */

/* 점 격자는 CSS 배경으로 깐다 — SVG pattern 을 <use> 그림자 트리에서 참조하는 위험을 피한다.
   모티프만 SVG 이고, 강조 표시(.fg-mark)는 라이트 DOM 에 둬서 문서 CSS 로 칠한다 */
/* 앞 간격만 --sp-block 보다 크게 벌린다 — desc·feats·actions 가 전부 같은 값이면
   "텍스트 덩어리 / 그래픽" 두 층이 아니라 네 덩어리의 동일 무게 나열로 읽힌다 */
.fig {
  position: relative;
  height: clamp(128px, 19vw, 172px);
  margin-top: calc(var(--sp-block) * 1.6);
  color: var(--fg-subtle);
}

.fig::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(currentColor 0.9px, transparent 1px);
  background-size: 12px 12px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 74% 88% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.45) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 88% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.45) 74%, transparent 100%);
}

.fig svg { position: relative; display: block; width: 100%; height: 100%; }

.fg-mark { fill: var(--accent); }

.fg-mark--ring { fill: none; stroke: var(--accent); stroke-width: 1.6; }

/* 아무것도 선택되지 않은 기본 상태 — 옅은 점 격자만 둔다 (문구 없음) */
.fig--idle { height: clamp(220px, 26vw, 320px); margin-top: 0; }

.fig--idle::before { opacity: 0.3; }

.idx__stage[data-idle="false"] .fig--idle { display: none; }

/* 2분할에서 상세는 DOM 상 목록 전체 뒤에 있다. 부제목 클릭으로 패널에 포커스가 옮겨진 뒤
   Tab 을 계속 누르면 남은 항목(예: 04)을 건너뛰고 푸터로 나가며, 돌아오는 길이 Escape 뿐인데
   화면에 안내가 없다. 되돌아가는 경로를 탭 순서 안에 두고, 포커스를 받을 때만 보이게 한다
   (skip-link 와 같은 방식 — 마우스 사용자에게는 없는 것과 같다) */
.stage__back {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.stage__back:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: var(--sp-block) 0 0;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
}

/* 열린 상세가 없으면 돌아갈 곳도 없다 */
.idx__stage[data-idle="true"] .stage__back { display: none; }

/* 심볼 보관용 — display:none 이면 <use> 참조가 깨지므로 크기 0 으로 숨긴다 */
.motif-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 2분할 (900px 이상, JS 있을 때만) ───────────────────── */

.idx__stage { display: none; }

@media (min-width: 900px) {
  /* 좌측 인덱스는 작은 텍스트가 들어갈 만큼만. 우측 상세가 더 넓다 */
  html.js .idx {
    grid-template-columns: minmax(240px, 36fr) minmax(0, 64fr);
    column-gap: clamp(40px, 5vw, 88px);
  }

  html.js .idx__list {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
  }

  /* R3 로 머리 구분선이 사라졌으므로 padding-top 도 뺀다 — 두 열이 같은 첫 줄에서 시작한다.
     min-height 는 빈 격자(.fig--idle) 높이와 같은 값이다. 없으면 호버로 상세가 바뀔 때마다
     stage 높이가 320px ↔ 문장 70px 사이를 오가며 문서 높이가 250px 씩 줄었다 늘어 화면이 튄다
     (실측으로 재현했다 — 호버하는 순간 목록이 눈에 띄게 위로 밀렸다) */
  html.js .idx__stage {
    display: block;
    align-self: start;
    min-height: clamp(220px, 26vw, 320px);
  }

  /* max-width 도 함께 푼다 — 34em 캡이 남으면 우측 열의 21%(1440 에서 147px)가 죽고
     idle→open 에서 그래픽이 691px → 544px 로 줄어 우측 끝이 들쭉날쭉해진다.
     읽기 폭은 안쪽 요소가 이미 잡는다 (desc·term 26em, feats 30em, note 24em) */
  html.js .panel { padding: 0; max-width: none; }

  /* 고정된 항목의 상세를 띄운 채 다른 항목을 호버하면 좌우가 서로 다른 항목을 가리킨다.
     상세를 지우면 마우스가 목록을 지날 때마다 깜빡인다. 그렇다고 패널 전체를 흐리게 하면
     본문 글자 대비가 1.9:1 로 떨어져 AA 미달이므로, 장식 그래픽만 낮춰
     "지금 보고 있는 부제목의 것이 아니다" 를 드러낸다 */
  html.js .idx__stage.is-detached .fig { opacity: 0.4; }

  html.js .idx__stage .fig { transition: opacity 0.25s ease; }
}

/* 900~1023(2열 구간 전체) 은 좌측 열을 더 좁혀 우측 상세가 눌리지 않게 한다
   (900 에서 좌 251 / 우 532). 이 구간은 부제목이 아직 제목 아래 인라인이라 좌측 열이 넓을 필요가 없다 */
@media (min-width: 900px) and (max-width: 1023.98px) {
  html.js .idx {
    grid-template-columns: minmax(200px, 32fr) minmax(0, 68fr);
  }
}

/* ── 3컬럼 캐스케이딩 (R1 · 1024px 이상, JS 있을 때만) ──────
   컬럼 1 제목 / 컬럼 2 부제목 / 컬럼 3 상세(앞 두 열 합보다 넓다).
   부제목은 DOM 을 옮기지 않고 absolute 로 컬럼 2 자리에 띄운다 — 목록이 밀려나지 않아
   호버 중 커서 아래가 움직이지 않고, 탭 순서는 제목 → 그 항목의 부제목 으로 이어진다.

   분기점 1024 의 근거 — 이 폭이 아래 트랙 식이 성립하는 하한이다. 컬럼 2 는 clamp 의
   하한 216px 로 고정되고, 남는 폭을 0.7 : 2.4 로 나눈 컬럼 1 이 minmax 의 하한 150px 에
   닿는 지점이 W = 1023.6px 다 (컨테이너 0.92W · 열 간격 0.06W → 0.2258 × (0.86W − 216) ≥ 150).
   1024 에서 실측 — 컬럼 150 / 216 / 515 · 가장 긴 부제목 "전문, 과학 및 기술서비스업" 한 줄
   유지 · 가로 오버플로 0.

   앞 버전은 1080 이었고 근거를 "1024 로 내리면 컬럼 2 가 200px 로 줄어든다" 로 적었으나
   틀렸다 — clamp 하한이 216px 이라 폭에 무관하게 216px 이다. 그 오류 때문에 1024~1079 의
   55px 구간이 이유 없이 2열로 떨어져 캐스케이딩과 호버를 함께 잃고 있었다 */
@media (min-width: 1024px) {
  html.js .idx {
    /* 컬럼 2 는 그리드 아이템이 없는 빈 트랙이다. absolute 로 띄운 .subs 가 그 자리를 쓰므로
       폭·간격을 변수로 꺼내 CSS 만으로 좌표를 맞춘다 (fr 로 두면 JS 없이 좌표를 알 수 없다) */
    --rail-w: clamp(216px, 17vw, 264px);
    --col-gap: clamp(28px, 3vw, 52px);

    /* 컬럼 1 을 fr 로 두되 좁게 잡는다 — 제목 중 가장 긴 "운영 서비스" 가 67px 이라
       네 등분(1440 에서 264px)을 주면 절반이 빈다. 진단 §2 의 "좌측 1/4 가 라벨 몇 글자만
       담고 내려간다" 를 다시 만들지 않으려고 남는 폭은 상세로 보낸다 */
    grid-template-columns: minmax(150px, 0.7fr) var(--rail-w) minmax(0, 2.4fr);
    column-gap: var(--col-gap);
  }

  html.js .idx__list { grid-column: 1; }
  html.js .idx__stage { grid-column: 3; }

  /* R4-3 — 컬럼 1·2 사이 수직 구분선. 열린 항목이 있을 때만 나타난다 (닫힌 상태는 선 0).
     :has() 로 상태를 CSS 에서 직접 읽어 JS 를 늘리지 않는다. 미지원 브라우저는 선만
     안 보이고 기능은 그대로다. .idx__list 가 sticky(=positioned) 라 이것이 좌표 기준이다.
     gap 의 중앙에 두어 두 컬럼 어느 쪽에도 붙지 않게 한다 */
  html.js .idx__list:has(.item.is-open)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + var(--col-gap) / 2);
    width: 1px;
    background: var(--border);
  }

  /* R4-1 — 줄 간격을 2px 까지 좁히고 셰브론을 숨긴다. 부제목이 옆 컬럼에 뜨므로
     아래를 향하는 셰브론은 방향이 틀리고, R3 의 "그냥 텍스트처럼" 에도 맞는다.
     단 이 세 가지는 마우스·키보드 전용이다 — 1024px 이상 터치 기기(태블릿)도 이 3컬럼을
     받으므로, 그쪽은 44px 타깃과 셰브론을 그대로 남겨 "만질 수 있다" 는 단서를 지킨다 */
  @media (hover: hover) and (pointer: fine) {
    html.js .item__chev { display: none; }

    /* 히트 영역을 글자에 붙인다. 줄 간격을 2px 로 좁히면 버튼 높이 30px 이 글자 15px 의
       2배라 글자 사이 빈 공간이 거의 전부 어느 항목엔가 속해 버린다 — 글자에서 벗어난
       곳에서도 색이 변해 "호버 지점이 제목보다 아래" 로 느껴진다 (Enko님 지적).
       line-height 를 조여 버튼 높이를 글자에 맞추고, 줄어든 만큼 row-gap 으로 되돌려
       줄 피치(32px)는 그대로 둔다. 그러면 항목 사이 빈 공간은 어느 항목에도 속하지 않는다 */
    html.js .idx__list { row-gap: 13px; }
    html.js .item__btn {
      grid-template-columns: 1em minmax(0, 1fr);
      min-height: 0;
      padding-block: 0;
    }
    html.js .item__label { line-height: 1.3; }

    /* 컬럼 1·2 의 줄을 같은 피치로 맞춘다. 두 열의 글자 크기가 같은데 제목이 32px,
       부제목이 44px(터치 타깃)이면 네 번째 줄에서 35px 벌어져 두 열이 어긋난 표처럼 보인다.
       .subs__list 의 상단 8px 은 인라인 구간에서 overflow:hidden 에 포커스 링이 잘리지 않게
       둔 값이고, 이 구간은 overflow:visible 이라 필요 없다 — 0 이어야 첫 줄이 제목 첫 줄과 맞는다 */
    html.js .subs__list {
      display: grid;
      row-gap: 13px;
      padding-top: 0;
    }
    html.js .sub { min-height: 0; padding-block: 0; line-height: 1.3; }
    /* 마커의 margin-top 은 line-height 기준으로 첫 줄 중앙에 맞춘 값이라 함께 조인다 */
    html.js .sub::before { margin-top: 0.58em; }
  }

  /* .idx__list 가 sticky(=positioned) 라 그것이 좌표 기준이다 */
  html.js .subs {
    position: absolute;
    top: 0;
    left: calc(100% + var(--col-gap));
    width: var(--rail-w);
  }

  /* 컬럼 2 에서는 높이 애니메이션을 쓰지 않는다. 이유 둘 —
     ① absolute 라 아래로 밀려나는 내용이 없다. 높이를 0 에서 늘려 보일 대상이 애초에 없고,
        인라인 전개에서 쓰던 grid-template-rows 트릭은 여기서는 목적 없는 클립일 뿐이다
     ② overflow 를 풀 수 있어 포커스 링이 잘릴 여지가 사라진다 (인라인에서는 접히는 0.3s 동안
        내용이 흘러나오지 않게 hidden 이 필요해 padding 으로 링 자리를 만들어야 했다)
     높이는 즉시 확정하고 등장만 페이드로 처리한다 */
  /* 네 개의 .subs 가 컬럼 2 자리에 겹쳐 쌓인다. 닫힌 것은 사라지는 0.22s 동안 아직
     visibility:visible(투명)이라 그 자리의 클릭을 가로챈다 — 실측으로 재현했다
     (섹션을 바꾼 직후 다른 섹션의 안 보이는 부제목이 클릭을 먹었다).
     pointer-events 는 전환 없이 즉시 꺼지므로 이 틈을 없앤다 */
  html.js .subs {
    grid-template-rows: 1fr;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
  }

  html.js .item.is-open .subs {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0s;
  }

  /* 컬럼 2 는 그 자체가 한 단 들여쓴 층이다 — 인라인용 들여쓰기를 걷어낸다 */
  html.js .subs__inner { padding-left: 0; }
}

/* ── 푸터 (전자상거래법 사업자 정보 — 접지 않는다) ───────── */

/* R3 의 "경계는 여백만으로" 를 푸터에도 적용한다 — 앞 버전은 법적 표시 덩어리의 경계로
   보고 이 선만 남겼으나, 인덱스 섹션 끝과 푸터 사이가 이미 196px 이라 선이 없어도 끊긴다.
   이제 문서 전체에 가로 구분선이 0개다 (컬럼 사이 세로선은 경계가 아니라 상태 표시다) */
.site-footer {
  padding-block: clamp(44px, 7vw, 80px) 26px;
}

.site-footer__grid { display: grid; gap: clamp(28px, 4vw, 64px); }

.site-footer__name {
  margin-bottom: 14px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.site-footer__name .eyebrow { margin-left: 6px; letter-spacing: 0.08em; }

/* R3 — 사업자 정보는 법적 의무 표시이지 읽히려고 있는 문단이 아니다.
   0.875rem/1.75 → 0.8125rem/1.5, 행 간격 4px → 1px 로 한 덩어리로 눌러 둔다 */
/* 0.8125rem(13px) → 0.75rem(12px). 실기 확인에서 아직 크다는 판단 (2026-07-29 Enko님).
   12px 는 §7 접근성이 허용하는 하한이라 더 줄이지 않는다 */
.legal { font-size: 0.75rem; line-height: 1.5; }

.legal__row { padding-block: 1px; }
.legal__row dt { color: var(--fg-subtle); }
.legal__row dd { color: var(--fg-muted); }

/* 사업자 정보의 전화·이메일에서 밑줄을 걷었다 (2026-07-29 Enko님). 법적 표시는 읽히려고
   있는 문단이 아니라 한 덩어리로 눌러 두는 것이 목적인데, 밑줄 두 줄이 그 덩어리를 흐트러뜨린다.
   다만 링크라는 단서를 완전히 없애지는 않는다 — 호버에서 잉크색과 밑줄이 함께 나타나고,
   키보드 포커스는 전역 포커스 링이 잡는다. 두 값은 문의 상세에도 있어 이곳이 유일한 경로도 아니다 */
.legal__row a { text-underline-offset: 3px; }

@media (hover: hover) {
  .legal__row a:hover { color: var(--fg); text-decoration: underline; }
}

.legal__en { display: block; color: var(--fg-subtle); line-height: 1.45; }

.site-footer__nav {
  display: grid;
  gap: 6px;
  align-content: start;
  font-size: var(--fs-small);
}

.site-footer__nav a {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--fg-muted);
}

@media (hover: hover) {
  .site-footer__nav a:hover { color: var(--fg); }
}

.site-footer__copy {
  margin-top: clamp(52px, 7vw, 76px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

@media (min-width: 560px) {
  .legal__row { display: grid; grid-template-columns: 10.5em 1fr; gap: 0 12px; }
}

/* 560px 미만에서는 dt/dd 가 세로로 쌓여 행 내부 줄 간격(19.5px)이 행 간격(2px)보다 커진다
   → 12줄이 한 문단으로 붙어 어디까지가 한 항목인지 안 보인다. 이 구간만 행 사이를 벌린다.
   R3 로 푸터를 축소한 뒤 실물 캡처에서 실제로 드러난 문제다 */
@media (max-width: 559.98px) {
  .legal__row + .legal__row { margin-top: 7px; }
}

@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }

  /* 마크업은 모바일 순서(운영 서비스 → 사업자 정보)다. 넓은 화면에서는 좌우를 되돌려
     사업자 정보를 넓은 좌측 열에 둔다. 이 구간에서는 Tab 이 우측 열을 먼저 잡는다 —
     세로 배치에서 아래→위로 튀는 것보다 좌우 배치에서 우→좌인 편이 덜 어긋난다고 판단했다 */
  .site-footer__legal { grid-area: 1 / 1; }
  .site-footer__nav   { grid-area: 1 / 2; }
}

/* ── 모션 축소 ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal] { transition: none; }
  .is-hidden { opacity: 1; transform: none; }

  .item__label,
  .item__chev,
  .sub::before { transition: none; }

  html.js .subs,
  html.js .item.is-open .subs { transition: none; }

  html.js .panel.is-open { animation: none; }

  html.js .idx__stage .fig { transition: none; }
}