/* ═══════════════════════════════════════════════════════════════
   김의영 — Components
   ───────────────────────────────────────────────────────────────
   이 파일은 배치 · 색 · 여백만 다룬다.

   ★ font-size / line-height / letter-spacing / font-weight 를
     여기에 새로 쓰지 말 것. 전부 type.css 의 텍스트 스타일이 담당한다.
     새 크기가 필요하면 type.css 의 셀렉터 목록에 얹는다.

   ★ PRIMITIVE(--n-*, --b-*, --r-*) 직접 참조 금지. SEMANTIC 만 쓴다.
     그 순간 다크 모드에서 깨진다.

   로드 순서:  type.css → tokens.css → components.css
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────── base ─────────── */
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-nav) + var(--sp-5));
}
/* 서브내비(.jump)가 있는 페이지는 앵커가 그 아래로 숨지 않게 두 배 확보 */
:root:has(.jump){scroll-padding-top:calc(var(--h-nav) * 2 + var(--sp-5))}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--fg);
  word-break:keep-all;
}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul{padding:0;list-style:none}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ────────────────────────────────────────── 유틸 ────────────── */
.label{color:var(--fg-muted)}
.label--accent{color:var(--accent)}
.meta{color:var(--fg-muted)}
.meta--accent{color:var(--accent)}
.measure{max-width:var(--measure-narrow)}
.wrap{max-width:var(--w-page);margin-inline:auto;padding-inline:var(--sp-gutter)}

h2{text-wrap:balance;margin-bottom:var(--sp-3);color:var(--fg-strong)}
.lede{color:var(--fg);max-width:var(--measure)}
.lede b{color:var(--fg-strong)}

/* ── 반전 표면 ────────────────────────────────────────────────
   어두운 면 위에서는 글/선 토큰 자체를 반전본으로 바꾼다.
   그래야 .def / .kv / .tradeoff 같은 컴포넌트를 수정 없이 얹을 수 있다.
   ★ 새 다크 블록을 만들면 반드시 이 목록에 추가할 것.
     (컴포넌트마다 오버라이드를 붙이면 하나 빠뜨리는 순간 대비가 1.2:1 로 떨어진다) */
.band,
.cols--inverse > .col,
.split__b,
.footer{
  background:var(--bg-inverse);
  color:var(--fg-body-on-inverse);
  --fg-strong:     var(--fg-on-inverse);
  --fg:            var(--fg-body-on-inverse);
  --fg-muted:      var(--fg-muted-on-inverse);
  --border:        var(--border-on-inverse);
  --border-subtle: var(--border-on-inverse);
  --accent:        var(--accent-on-inverse);
}

/* ─────────────────────────────────────────────── nav ────────── */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:var(--bg-nav);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:var(--bw) solid var(--border);
}
.nav__inner{
  display:flex;align-items:center;gap:var(--sp-2) var(--sp-6);
  height:var(--h-nav);flex-wrap:wrap;
}
.nav__brand{
  color:var(--fg-strong);
  text-decoration:none;margin-right:auto;
}
.nav__link{
  color:var(--fg-muted);text-decoration:none;
  padding:var(--sp-1) 0;border-bottom:1.5px solid transparent;
}
.nav__link:hover{color:var(--fg-strong)}
.nav__link[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ──────────────────────────────── layout: 레일 + 세로 괘선 ──── */
/* 세로 괘선이 이 디자인의 서명. "경계"를 시각화한다. */
.row{
  display:grid;grid-template-columns:var(--w-rail) minmax(0,1fr);
  gap:0 var(--w-gap);align-items:start;
}
.row__rail{padding-top:var(--sp-1);display:flex;flex-direction:column;gap:var(--sp-1)}
.row__body{
  border-left:var(--bw) solid var(--border);
  padding-left:var(--w-gap);margin-left:calc(var(--w-gap) * -1);min-width:0;
}
@media (max-width:880px){
  .row{grid-template-columns:1fr}
  .row__rail{
    padding-bottom:var(--sp-3);flex-direction:row;
    align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  }
  .row__body{border-left:0;padding-left:0;margin-left:0}
}
.section{padding-block:var(--sp-section);border-top:var(--bw) solid var(--border)}

/* 본문 끝과 푸터(어두운 면) 사이 여백.
   .section 을 쓰는 페이지는 마지막 섹션의 padding-block 이 이 몫을 하지만,
   경험 페이지는 main 이 직접 콘텐츠를 담아(main.wrap) 그 여백이 없었다.
   → 페이저 테두리가 푸터에 그대로 붙었다. 같은 값으로 맞춘다. */
main.wrap{padding-bottom:var(--sp-section)}

/* ─────────────────────────────────────── 개조식 리스트 ──────── */
/* 불릿형 — 한 항목이 한 줄로 끝날 때.
   머리표(짧은 괘선)를 달았다가 뺐다. 각 항목이 굵은 키워드로 시작하고
   줄 간격이 이미 항목을 가르므로, 머리표는 잡음만 더했다. */
.kv > li{margin-bottom:var(--sp-2)}
.kv > li:last-child{margin-bottom:0}
.kv > li b{color:var(--fg-strong)}
.kv > li span{color:var(--fg-muted)}

/* 좌우 2단형 — 왼쪽 키워드 열만 훑어도 읽힌다. 개조식의 기본형. */
.def{display:grid;grid-template-columns:minmax(112px,auto) minmax(0,1fr);gap:11px var(--sp-5)}
/* 경험 페이지의 seg 안에서는 키워드 열을 고정한다.
   auto 로 두면 목록마다 최장 키워드에 맞춰져 섹션끼리 설명 시작점이 어긋난다.
   한 페이지가 하나의 세로 정렬선을 갖게 하는 게 이 디자인의 뼈대다. */
.seg .def{grid-template-columns:176px minmax(0,1fr)}
@media (max-width:620px){.seg .def{grid-template-columns:1fr}}
.def dt{color:var(--fg-strong)}
.def dd{margin:0;color:var(--fg-muted)}
/* 기간이 붙는 3단 변형 — 키워드 | 기간 | 설명 */
.def--dated{grid-template-columns:minmax(112px,auto) auto minmax(0,1fr)}
.def--dated .when{color:var(--fg-muted);white-space:nowrap}
@media (max-width:620px){
  .def{grid-template-columns:1fr;gap:2px}
  .def dt{margin-top:var(--sp-1)}
  .def dd{margin-bottom:11px}
  .def--dated{grid-template-columns:1fr}
  .def--dated .when{margin-bottom:1px}
}

/* 산출물 링크 — 경험 하단 */
.links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:baseline}
.links a{
  color:var(--accent);text-decoration:none;
  border-bottom:var(--bw) solid transparent;
}
.links a:hover{border-bottom-color:var(--accent)}
.links a::after{content:" ↗";opacity:.55}
.links .none{color:var(--fg-muted)}

/* ───────────────────────────── 섹션 내부 라벨 그리드 ────────── */
.seg{
  display:grid;grid-template-columns:74px minmax(0,1fr);gap:0 var(--sp-6);
  padding-block:var(--sp-5);border-top:var(--bw) solid var(--border-subtle);
  align-items:start;
}
/* 첫 seg 는 위 괘선을 지운다 — 바로 위 .spec 목록이 이미 경계를 만든다.
   위쪽 구조(.spec)가 사라지면 이 규칙도 같이 손봐야 한다. */
.seg:first-of-type{border-top:0;padding-top:var(--sp-4)}
.seg__lb{color:var(--accent);padding-top:5px}
@media (max-width:620px){
  .seg{grid-template-columns:1fr;gap:var(--sp-2)}
  .seg__lb{padding-top:0}
}

/* ────────────────────────────────────────────── hero ────────── */
.hero{padding-block:clamp(40px,6vw,72px) clamp(32px,4.4vw,52px)}
.hero__name{margin-bottom:var(--sp-4);color:var(--fg-strong)}
.hero__role{
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5);align-items:baseline;
  color:var(--fg);margin-bottom:clamp(32px,4.4vw,52px);
}
.hero__role .dim{color:var(--fg-muted)}
/* 표어가 아니다. 사실 진술 하나. 강조색을 쓰지 않는다. */
.hero__line{
  color:var(--fg-strong);text-wrap:balance;max-width:26em;
  border-left:var(--bw-accent) solid var(--accent);
  padding-left:clamp(18px,2.4vw,28px);
}
.hero__runtimes{margin-top:var(--sp-6);padding-left:clamp(21px,2.4vw,31px);max-width:44em}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(28px,3.6vw,42px)}
.chip{
  border:var(--bw) solid var(--border);border-radius:2px;padding:6px 12px;
  color:var(--fg);background:var(--bg-raise);
}
/* 칩은 히어로의 목차다 — 눌러서 해당 위치로 간다 */
a.chip{text-decoration:none}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
a.chip::after{content:" ↓";color:var(--fg-muted)}
a.chip[href^="work"]::after{content:" →"}
a.chip:hover::after{color:var(--accent)}
/* 앵커 대상이 헤더에 가리지 않게 */
#boundary,#legacy{scroll-margin-top:calc(var(--h-nav) + var(--sp-8))}

/* ─────────────────────────────── 기능 — 영역마다 접기 ─────── */
/* 접힌 상태의 요약 줄이 그대로 전체 범위 목록이 된다.
   JS 없이 <details> 로. 세부가 없는 영역은 토글 없이 한 줄(--plain). */
.feat{display:grid}
/* 인접 형제로 경계를 만든다 — :first-child 보정을 쓰지 않으므로
   위쪽 구조가 바뀌어도 깨지지 않는다 */
.feat__row + .feat__row{
  margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:var(--bw) solid var(--border-subtle);
}
.feat__row > summary,
.feat__row--plain{
  display:grid;grid-template-columns:13px minmax(104px,auto) minmax(0,1fr);
  gap:0 var(--sp-4);align-items:baseline;list-style:none;
}
.feat__row > summary{cursor:pointer}
.feat__row > summary::-webkit-details-marker{display:none}
.feat__row > summary::before{
  content:"▸";color:var(--accent);
  display:inline-block;transition:transform .15s;
}
.feat__row[open] > summary::before{transform:rotate(90deg)}
.feat__row--plain::before{content:""}       /* 토글 자리를 비워 열을 맞춘다 */
@media (prefers-reduced-motion:reduce){.feat__row > summary::before{transition:none}}
.feat__row b{color:var(--fg-strong)}
.feat__row > summary > span,
.feat__row--plain > span{color:var(--fg-muted)}
.feat__row > summary:hover b{color:var(--accent)}
.feat__body{margin:var(--sp-3) 0 var(--sp-1) calc(13px + var(--sp-4))}
.feat__body > li{margin-bottom:var(--sp-2)}
@media (max-width:620px){
  .feat__row > summary,
  .feat__row--plain{grid-template-columns:13px minmax(0,1fr);gap:2px var(--sp-3)}
  .feat__row > summary > span,
  .feat__row--plain > span{grid-column:2}
}
/* 인쇄에서는 접힌 내용도 나와야 한다 */
@media print{
  .feat__row > summary::before{content:""}
  .feat__row > *:not(summary){display:block!important}
}

/* ─────────────────────────────────────── 결정 한 벌 ────────── */
/* 대안 → 근거 → 득실 은 하나의 논증이다. seg 셋으로 나란히 두면
   독립된 세 항목으로 읽힌다. 안쪽 괘선을 지워 한 덩어리로 만든다.
   레일 폭은 건드리지 않는다 — 다른 seg 와 라벨 열이 어긋나면 안 된다.
   (:first-child 가 아니라 .dec 안쪽만 다루므로 바깥 맥락에 안 흔들린다) */
.dec{
  border-top:var(--bw) solid var(--border-subtle);
  padding-bottom:var(--sp-4);
}
.dec > .seg{border-top:0}
.dec > .seg + .seg{padding-top:0}

/* ────────────────────────────────────── 다크 배너 ───────────── */
/* 판단·근거를 담는 면. 페이지에서 유일하게 반전된 표면. */
.band{padding:var(--sp-6);border-left:var(--bw-accent) solid var(--accent)}
.band__lb{color:var(--accent);display:block;margin-bottom:var(--sp-3)}
.band__hl{color:var(--fg-strong);margin-bottom:var(--sp-3)}

/* ──────────────────────────────────── 3열 카드 ──────────────── */
.cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:0;
  border-top:var(--bw) solid var(--border);
}
.cols--boxed{border-bottom:var(--bw) solid var(--border)}
.cols > .col{
  padding:var(--sp-5) var(--sp-6) var(--sp-6) 0;
  border-right:var(--bw) solid var(--border-subtle);
}
.cols > .col:last-child{border-right:0}
.cols > .col:not(:first-child){padding-left:var(--sp-6)}
.col h3{margin:var(--sp-2) 0 var(--sp-3);color:var(--fg-strong)}
.col li{color:var(--fg)}
@media (max-width:760px){
  .cols > .col{
    border-right:0;border-bottom:var(--bw) solid var(--border-subtle);
    padding-left:0!important;
  }
  .cols > .col:last-child{border-bottom:0}
}
/* 반전 3열 — 문제 정의용 */
.cols--inverse{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:var(--bw);background:var(--border);border-top:0;
}
.cols--inverse > .col{padding:var(--sp-5) var(--sp-6) var(--sp-6);border-right:0}
.cols--inverse > .col:not(:first-child){padding-left:var(--sp-6)}
.cols--inverse .label{color:var(--accent)}

/* ─────────────────────────────────── 경험 카드 (index) ──────── */
.cards{border-top:var(--bw) solid var(--border)}
.card{
  display:block;text-decoration:none;color:inherit;
  padding:var(--sp-6) 0;border-bottom:var(--bw) solid var(--border-subtle);
}
.card:hover{
  background:var(--bg-raise);
  box-shadow:-16px 0 0 var(--bg-raise), 16px 0 0 var(--bg-raise);
}
.card:hover .card__title{color:var(--accent)}
.card__top{
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:baseline;
  justify-content:space-between;margin-bottom:var(--sp-1);
}
.card__title{margin-bottom:var(--sp-3);text-wrap:balance;color:var(--fg-strong)}
.card__more{color:var(--accent);margin-top:var(--sp-3)}
.card__more::after{content:" →"}

/* ─────────────────────────────────── 경험 목차 (홈) ─────────── */
/* 홈은 목차만. 상세는 work.html 로 보낸다. */
.idx{border-top:var(--bw) solid var(--border)}
/* 목차 카테고리 머리글 — 역할 축. 히어로의 경력 4줄과 같은 순서 */
.idx__cat{
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-7) 0 var(--sp-2);
  border-bottom:1px solid var(--border);
}
/* 첫 묶음은 위에 앞선 묶음이 없으니 간격을 조금 줄인다. 다만 0 은 안 된다 —
   컨테이너 위쪽 괘선에 글자가 붙는다. (한때 0 이었는데, 그건 위에 리드 문장이
   있던 시절의 보정이었다. 리드를 지우면서 보정만 남아 좁아 보였다.) */
.idx__cat:first-child{padding-top:var(--sp-4)}
.idx__catname{color:var(--fg-strong)}
.idx__catmeta{margin-left:auto}

.idx__row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--sp-5);
  padding:var(--sp-4) 0;border-bottom:var(--bw) solid var(--border-subtle);
  text-decoration:none;color:inherit;align-items:baseline;
}
.idx__row:hover{
  background:var(--bg-raise);
  box-shadow:-16px 0 0 var(--bg-raise), 16px 0 0 var(--bg-raise);
}
.idx__row:hover .idx__t{color:var(--accent)}
.idx__n{color:var(--accent)}
.idx__t{display:block;color:var(--fg-strong);margin-bottom:3px}
.idx__d{display:block;color:var(--fg-muted)}
/* 상세 페이지의 프로젝트 블록 */
.projs{display:grid;gap:var(--sp-5)}
.proj{display:grid;gap:3px;justify-items:start}
.proj__n{color:var(--fg-strong)}
.proj__meta{color:var(--fg-muted)}
.proj > span:not([class]){color:var(--fg-muted)}
.proj .tags{margin-top:4px}
.proj .links{margin-top:2px}

/* 스택 태그 — 한 줄 텍스트는 스캔이 안 된다. 데이터라서 mono. */
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{
  border:var(--bw) solid var(--border);border-radius:2px;
  padding:2px 7px;color:var(--fg-muted);background:var(--bg-raise);
  white-space:nowrap;
}
.tag--more{border-color:transparent;background:none;padding-inline:2px}
/* 라이브 도메인 — 스택이 아니라 결과물이라 강조색 */
.tag--url{color:var(--accent);border-color:var(--accent)}
.idx__tags{margin-top:var(--sp-3)}

/* 묶음 경험의 프로젝트 목록 — 제목만으로는 무엇을 했는지 안 읽힌다 */
.idx__projs{display:grid;gap:5px;margin-top:var(--sp-3)}
.idx__proj{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  gap:3px var(--sp-3);align-items:baseline;
  padding-left:var(--sp-3);border-left:var(--bw) solid var(--border);
}
.idx__proj b{color:var(--fg-strong)}
.idx__proj > span{color:var(--fg-muted);min-width:0}
.idx__proj i{color:var(--fg-muted);font-style:normal;white-space:nowrap}
/* 스택은 프로젝트마다 다르다 — 이름 줄 아래 한 줄을 통째로 쓴다 */
.idx__ptags{grid-column:1 / -1;margin-top:1px;margin-bottom:var(--sp-2)}
@media (max-width:620px){
  .idx__proj{grid-template-columns:1fr;gap:1px}
  .idx__proj i{margin-bottom:2px}
}

/* ───────────────────────────────── 페이지 이동 (홈) ─────────── */
.pages{border-top:var(--bw) solid var(--border)}
.pages__row{
  display:block;padding:var(--sp-5) 0;
  border-bottom:var(--bw) solid var(--border-subtle);
  text-decoration:none;color:inherit;
}
.pages__row:hover{
  background:var(--bg-raise);
  box-shadow:-16px 0 0 var(--bg-raise), 16px 0 0 var(--bg-raise);
}
.pages__row:hover .pages__t{color:var(--accent)}
.pages__t{display:block;color:var(--fg-strong);margin-bottom:4px}
.pages__t::after{content:" →";color:var(--accent)}
.pages__d{display:block;color:var(--fg-muted);max-width:var(--measure-wide)}

/* ────────────────────────────────────── 결정 장부 ───────────── */
/* 채택된 한 줄만 색이 붙는다. 나머지는 버린 것이므로 조용하다. */
.ledger{border-top:var(--bw) solid var(--border)}
.opt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:2px var(--sp-5);padding:11px 0;
  border-bottom:var(--bw) solid var(--border-subtle);align-items:baseline;
}
.opt__nm{color:var(--fg-muted)}
.opt__note{color:var(--fg-muted)}
.opt--take{
  background:var(--accent-surface);margin-inline:calc(var(--sp-4) * -1);
  padding-inline:var(--sp-4);border-bottom-color:transparent;
}
.opt--take .opt__nm{color:var(--accent)}
.opt--take .opt__note{color:var(--accent)}
@media (max-width:620px){
  .opt{grid-template-columns:minmax(0,1fr)}
  .opt__note{grid-column:2}
}

/* ─────────────────────────────────── 얻은 것 / 포기한 것 ────── */
.tradeoff{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border:var(--bw) solid var(--border);
}
.tradeoff > div{padding:var(--sp-4) var(--sp-5)}
.tradeoff > div:first-child{border-right:var(--bw) solid var(--border)}
.tradeoff h4{margin-bottom:var(--sp-2)}
.tradeoff .kept h4{color:var(--accent)}
.tradeoff .lost h4{color:var(--danger)}
.tradeoff p{color:var(--fg)}
.tradeoff .lost p{color:var(--fg-muted)}
@media (max-width:600px){
  .tradeoff > div:first-child{border-right:0;border-bottom:var(--bw) solid var(--border)}
}

/* ──────────────────────────────────────── 2열 대비 ──────────── */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--bw);
  background:var(--border);border:var(--bw) solid var(--border);
}
.split > div{padding:var(--sp-6)}
.split__a{background:var(--bg-raise)}
.split h3{margin-bottom:var(--sp-4);color:var(--accent)}
.split__a li{color:var(--fg)}

/* ────────────────────────────────────────── 콜아웃 ──────────── */
.callout{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);
  margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:var(--bw) solid var(--border-subtle);
}
.callout__k{color:var(--accent);white-space:nowrap;padding-top:var(--sp-1)}
.callout p{color:var(--fg);max-width:var(--measure)}
@media (max-width:620px){.callout{grid-template-columns:1fr;gap:var(--sp-1)}}

/* ────────────────────────────────────── 일하는 방식 ─────────── */
.ways{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;
  border-top:var(--bw) solid var(--border);
}
.way{
  padding:var(--sp-6) var(--sp-8) var(--sp-6) 0;
  border-bottom:var(--bw) solid var(--border-subtle);
  border-right:var(--bw) solid var(--border-subtle);
}
.way:nth-child(2n){border-right:0;padding-left:var(--sp-8)}
.way h3{margin-bottom:var(--sp-3);text-wrap:balance;color:var(--fg-strong)}
.way li{color:var(--fg)}
@media (max-width:780px){.way{border-right:0;padding-left:0!important;padding-right:0}}

/* ────────────────────────────────────────── 경력 ────────────── */
.job{padding:var(--sp-5) 0;border-bottom:var(--bw) solid var(--border-subtle)}
.job:last-child{border-bottom:0}
.job--now{
  background:var(--bg-raise);margin-inline:calc(var(--sp-5) * -1);
  padding-inline:var(--sp-5);border-bottom:0;
  border-left:2px solid var(--accent);
}
.job__head{
  display:flex;flex-wrap:wrap;gap:2px var(--sp-3);align-items:baseline;
  justify-content:space-between;margin-bottom:2px;
}
.job__head strong{color:var(--fg-strong)}
.job__who{color:var(--fg)}
.job__desc{color:var(--fg-muted);margin-bottom:var(--sp-3)}

/* ────────────────────────────────────────── 스택 ────────────── */
.stack{border-top:var(--bw) solid var(--border)}
.stack__grp{padding:var(--sp-4) 0;border-bottom:var(--bw) solid var(--border-subtle)}
.stack__grp:last-child{border-bottom:0}
.stack__gh{color:var(--accent);margin-bottom:var(--sp-3)}
.stack dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:7px var(--sp-5)}
.stack dt{color:var(--fg-muted)}
.stack dd{margin:0;color:var(--fg)}
@media (max-width:620px){
  .stack dl{grid-template-columns:1fr;gap:1px 0}
  .stack dd{margin-bottom:11px}
}

/* ──────────────────────────────────────── work.html ─────────── */
.workhead{padding-block:clamp(32px,4.2vw,52px) clamp(20px,2.4vw,30px)}
.workhead h1{margin-bottom:var(--sp-3);color:var(--fg-strong)}
.jump{
  position:sticky;top:var(--h-nav);z-index:var(--z-jump);
  background:var(--bg-nav);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-top:var(--bw) solid var(--border);
  border-bottom:var(--bw) solid var(--border);
}
.jump__inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:thin}
.jump a{
  flex:1 0 auto;padding:11px var(--sp-4);text-decoration:none;
  border-right:var(--bw) solid var(--border-subtle);white-space:nowrap;
}
.jump a:last-child{border-right:0}
.jump a:hover{background:var(--bg-raise)}
.jump__n{display:block;color:var(--accent)}
.jump__t{display:block;color:var(--fg);margin-top:1px}
.jump a:hover .jump__t{color:var(--fg-strong)}

.exp{padding-block:var(--sp-section);border-top:var(--bw) solid var(--border)}
.exp h2{margin-bottom:var(--sp-4)}
.spec{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-5);
  color:var(--fg-muted);
  padding-bottom:var(--sp-5);border-bottom:var(--bw) solid var(--border);
}
.spec dt{opacity:.78;white-space:nowrap}
.spec dd{margin:0;color:var(--fg)}
.retro-p{color:var(--fg);max-width:var(--measure-wide)}
.retro-p b{color:var(--fg-strong)}
.toplink{
  display:inline-block;margin-top:var(--sp-2);
  color:var(--accent);text-decoration:none;
}
.toplink:hover{text-decoration:underline}

/* ─────────────────────────────── 경험 페이지 부속 ──────────── */
.backlink{color:var(--fg-muted);text-decoration:none}
.backlink:hover{color:var(--accent)}
/* 결정이 둘 이상인 경험에서 각 결정의 제목 */
.seg__h{color:var(--fg-strong);margin-bottom:var(--sp-3)}

.pager{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);
  margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:var(--bw) solid var(--border);
}
.pager a{
  display:block;text-decoration:none;color:inherit;
  padding:var(--sp-4) var(--sp-5);border:var(--bw) solid var(--border);
}
.pager a:hover{border-color:var(--accent);background:var(--bg-raise)}
.pager a:hover .pager__t{color:var(--accent)}
.pager__next{text-align:right}
.pager__lb{display:block;color:var(--fg-muted);margin-bottom:3px}
.pager__t{display:block;color:var(--fg-strong)}
@media (max-width:600px){.pager{grid-template-columns:1fr}.pager__next{text-align:left}}

/* ───────────────────────────────────────── footer ───────────── */
.footer{padding-block:clamp(48px,6vw,74px)}
.footer__line{text-wrap:balance;max-width:26em;color:var(--fg-strong)}
.footer__rt{margin-top:var(--sp-7);max-width:44em}
.footer__meta{
  margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:var(--bw) solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-7);
  align-items:baseline;
}
.footer__meta strong{color:var(--fg-strong)}
.footer a{color:var(--fg);text-decoration:none;border-bottom:var(--bw) solid var(--border)}
.footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ────────────────────────────────────────── print ───────────── */
@media print{
  body{background:#fff;color:#000;font-size:10.5pt}
  .nav,.jump,.card__more,.toplink,.chips{display:none}
  .exp{break-before:page;page-break-before:always}
  .exp:first-of-type{break-before:auto;page-break-before:auto}
  .seg,.tradeoff,.band,.card{break-inside:avoid;page-break-inside:avoid}
  .band,.cols--inverse > .col,.split__b,.footer{
    background:#fff!important;color:#000!important;border:1px solid #999
  }
  .band__lb,.band__hl,.split h3,.cols--inverse h3,.footer__line,
  .band .kv > li b,.band .def dt,.split__b .kv > li b,
  .footer__meta strong{color:#000!important}
  .band .kv > li span,.band .def dd,.footer__rt dd,
  .split__b .kv > li span{color:#444!important}
  .footer a{color:#000!important}
}