/* 새 셸 프로젝트 작업실 — 여정 보드(개요). DESIGN.md(Framer) 준수 · body.shell-v2 스코프
 * 원칙: 파란 accent 는 링크·포커스·선택에만. 상태는 색이 아니라 모양(체크·숫자 고리·자물쇠·점선) + 글자. 카드는 테두리가 아니라 표면 단차.
 * 구조: 다음 한 걸음(.board-next · 화면의 유일한 흰 알약) → 공통 구간 레일(.board-rail 3걸음 · 실선) → 갈림(.board-split · 점선) → 선택 구간(.board-fork 2갈래).
 *   실선 = 모두가 거치는 길, 점선 = 골라 가는 길 — 오디오·영상은 어떤 진행률 분모에도 들어가지 않는다(오너 전제 2026-09-18).
 * ⚠️ **1컬럼 스택**이다(2026-09-21 오너: *"그냥 1컬럼으로 위에서부터 아래로 스택된 블럭으로 하고 각각을 좀 더 넓게 영역을 써서"*).
 *    그전에는 공통 구간이 3열·선택 구간이 2열 그리드였고, 열끼리 높이를 맞추느라 **기획안 카드 아래가 텅 비고**
 *    아이디어 의도문은 320px 칸에서 20줄로 흘렀다. 이제 블록 하나가 한 줄을 다 쓰고, 그 안에서 머리 칸(고정) +
 *    본문 칸(남는 폭)으로 갈린다 — 세로 길이는 내용이 정한다.
 *    되돌릴 생각이면 먼저 이 두 증상이 왜 안 돌아오는지부터 설명할 것. */

body.shell-v2 .board-wrap { max-width: 1440px; gap: var(--sp-sm); padding-block: var(--sp-xl) var(--sp-xxl); padding-inline: var(--page-gutter); }
/* 블록 안의 머리 칸 폭 — 세 걸음·두 갈래가 같은 값을 읽어 제목 줄이 세로로 맞는다(각자 적으면 어긋난다). */
body.shell-v2 .board-wrap { --board-head-w: 248px; }
body.shell-v2 .board-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-xs); margin-top: var(--sp-md); }
body.shell-v2 .board-sec-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
body.shell-v2 .board-sec-sub { font-size: var(--fs-caption); color: var(--ink-48); }

/* ── 다음 한 걸음 ── */
body.shell-v2 .board-next { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); padding: 28px var(--sp-xl); background: var(--surface-1); border-radius: var(--r-xl); }
body.shell-v2 .board-next-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.shell-v2 .board-eyebrow { font-size: var(--fs-fine); font-weight: 500; color: var(--ink-48); }
body.shell-v2 .board-next-title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-title-1); font-weight: 600; line-height: 1.2; letter-spacing: -0.6px; color: var(--ink); word-break: keep-all; font-variant-numeric: tabular-nums; }
body.shell-v2 .board-next-sub { margin: 0; max-width: 60ch; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-48); word-break: keep-all; }
body.shell-v2 .board-next-act { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 6px; }
body.shell-v2 .board-next-act .btn { min-height: 44px; padding-inline: 22px; }
body.shell-v2 .board-note { font-size: var(--fs-fine); color: var(--ink-48); font-variant-numeric: tabular-nums; }

/* ── 공통 구간 레일 ── */
body.shell-v2 .board-rail { display: flex; flex-direction: column; gap: var(--sp-sm); margin: 0; padding: 0; list-style: none; }
body.shell-v2 :is(.board-step, .board-lane) {
  position: relative; display: grid; min-width: 0;
  grid-template-columns: var(--board-head-w) minmax(0, 1fr);
  grid-template-areas: 'hd bd' 'hd act';
  align-items: start; column-gap: var(--sp-xl); row-gap: 12px;
  padding: var(--sp-lg) var(--sp-xl); background: var(--surface-1); border-radius: var(--r-xl);
}
/* 본문이 없는 블록(잠긴 에피소드·응답 전 레인)에서도 머리 칸이 폭을 그대로 쥔다 — 줄이 흔들리지 않는다. */
body.shell-v2 :is(.board-step-hd, .board-lane-hd) { grid-area: hd; }
body.shell-v2 :is(.board-step-bd, .board-lane-bd) { grid-area: bd; }
body.shell-v2 :is(.board-step, .board-lane) > .board-actions { grid-area: act; margin-top: 0; }
/* 걸음과 걸음을 잇는 실선 — 스택이므로 카드 아래 가운데에서 다음 카드로 내려간다(머리 칸의 노드 축을 따른다). */
body.shell-v2 .board-step:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--sp-xl) + 12px); bottom: calc(-1 * var(--sp-sm)); width: 1px; height: var(--sp-sm); background: var(--divider-soft); }
body.shell-v2 .board-step-hd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); min-width: 0; }
body.shell-v2 .board-step-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-title-3); font-weight: 600; letter-spacing: -0.2px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .board-node { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-48); font-variant-numeric: tabular-nums; }
body.shell-v2 .board-step--done .board-node { background: var(--surface-3); color: var(--ink-80); }
body.shell-v2 .board-step--current .board-node { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
body.shell-v2 .board-step--locked { opacity: 0.5; }
body.shell-v2 .board-step-bd { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
/* ⚠️ **말줄임 없음**(오너 2026-09-21) — 사용자가 쓴 의도문이 여기 선다. 3줄 clamp 였는데 카드 아래가
 *    비어 있는데도 잘려 있었다. 줄바꿈은 살리고(pre-wrap) 긴 낱말만 강제로 꺾는다. */
body.shell-v2 .board-line { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-48); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
/* 아이디어 의도문 — 블록이 한 줄을 다 쓰므로 그대로 두면 한 줄이 1,000px 를 넘어 읽기 어렵다.
   단 폭을 46ch 로 잡아 **긴 글만 스스로 2~3단**이 된다(짧으면 한 단 그대로 — 빈 단을 만들지 않는다).
   ⚠️ 여기서 잘라내기(line-clamp)를 다시 넣지 말 것 — 오너 2026-09-21 *"생략하지말고 전부 보여줘"*. */
body.shell-v2 .board-step--idea .board-line { column-width: 46ch; column-gap: var(--sp-xxl); font-size: var(--fs-body); line-height: 1.6; color: var(--ink-80); }
body.shell-v2 .board-actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: auto; }
body.shell-v2 .board-actions:empty { display: none; }
/* ⚠️ 블록의 CTA 는 **다섯 블록이 같은 모양**이다(2026-09-21 오너: *"공통 구간의 CTA … 선택 구간의 CTA … 디자인이 달라서 이상해"*).
   공통 구간이 ghost(배경 없는 글자), 선택 구간이 secondary(알약)라 같은 자리의 같은 동작이 다른 것처럼 보였다.
   전부 secondary 로 맞췄다 — 알약 쪽을 택한 것은 글자만 있는 버튼이 본문 줄과 구분되지 않아서다(흰 알약은 여전히 '다음 한 걸음' 하나뿐). */
body.shell-v2 .board-pill { flex: 0 0 auto; padding: 2px 8px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-fine); font-weight: 500; color: var(--ink-80); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.shell-v2 .board-step--done .board-pill { color: var(--ink-48); }
body.shell-v2 .board-pill:empty { display: none; } /* 상태를 모르면(조회 실패) 라벨로 때우지 않고 칩을 비운다 */

/* 기획안 7단계 레일 — 채움 = 지난 단계 · 고리 = 지금 · 점 아래 단계 이름(넓어진 블록이 이름 자리를 만들었다).
   ⚠️ 이름은 장식이다(레일 전체가 role="img" + aria-label 한 문장) — 스크린리더가 일곱 번 읽지 않게. */
body.shell-v2 .board-dots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-xs) 0; }
body.shell-v2 .board-stage { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; text-align: center; }
/* 점과 점을 잇는 실선 — 칸 한가운데(점)에서 다음 칸 한가운데까지. 마지막 칸은 잇지 않는다. */
body.shell-v2 .board-stage:not(:last-child)::after { content: ''; position: absolute; top: 5px; left: calc(50% + 9px); right: calc(-50% + 9px); height: 1px; background: var(--surface-3); }
body.shell-v2 .board-stage.is-done:not(:last-child)::after { background: var(--ink-48); }
body.shell-v2 .board-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
body.shell-v2 .board-stage.is-done .board-dot { background: var(--ink-80); }
body.shell-v2 .board-stage.is-current .board-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
body.shell-v2 .board-stage-name { font-size: var(--fs-fine); line-height: 1.3; color: var(--ink-48); word-break: keep-all; }
body.shell-v2 .board-stage.is-current .board-stage-name { color: var(--ink); font-weight: 500; }

/* 회차 셀 — 채움 = 만든 회차 · 점선 = 아직 없는 회차. 누르면 그 회차로 간다 */
body.shell-v2 .board-cells { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: var(--sp-xs); }
body.shell-v2 .board-cell { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px dashed var(--divider-soft); border-radius: var(--r-md); background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--ink-48); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; touch-action: manipulation; }
body.shell-v2 .board-cell.is-made { border-style: solid; border-color: transparent; background: var(--surface-3); color: var(--ink); }
body.shell-v2 .board-cell:hover { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .board-cell.is-made:hover { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--ink-48); } /* 표면 단이 3 에서 끝난다 — 원시 색을 하나 더 짓지 않고 고리로 말한다 */
body.shell-v2 .board-cell:active { transform: scale(0.94); }
body.shell-v2 .board-cell:focus-visible, body.shell-v2 .board-cell.is-made:focus-visible { outline: none; box-shadow: var(--ring-focus); } /* 둘째 선택자: 위 .is-made:hover 의 고리(특이도가 더 높다)가 포커스 링을 덮지 않게 */
/* 오디오 레인의 셀 — 만든 회차만 서고, 상태가 모양을 가른다(글자는 title·aria-label 이 말한다) */
body.shell-v2 .board-cell.is-none { border: 1px dashed var(--divider-soft); background: transparent; color: var(--ink-48); }
body.shell-v2 .board-cell.is-done { border-color: transparent; background: var(--ink-80); color: var(--canvas); }
body.shell-v2 .board-cell.is-done:hover { background: var(--ink); }
body.shell-v2 .board-cell.is-rendering { border: 1px solid var(--ink-48); background: transparent; color: var(--ink); animation: board-cell-pulse 1.6s ease-in-out infinite; }
body.shell-v2 .board-cell.is-failed { border: 1px dashed var(--danger); background: transparent; color: var(--danger); }
@keyframes board-cell-pulse { 50% { opacity: 0.45; } }

/* ── 갈림: 공통 구간 끝에서 점선 두 갈래로 ── */
/* ⚠️ 두 갈래 아치(::after)는 걷었다 — 1컬럼 스택에서는 갈라질 가로 자리가 없어 선이 허공을 가리켰다.
   갈림의 의미는 점선(골라 가는 길)과 레인마다 붙는 '선택' 태그가 계속 말한다. */
body.shell-v2 .board-split { position: relative; height: 28px; margin-top: 4px; }
body.shell-v2 .board-split::before { content: ''; position: absolute; left: calc(var(--sp-xl) + 12px); top: 0; height: 28px; border-left: 1px dashed var(--divider-soft); }
/* ⚠️ 가운데 정렬을 걷었다 — 2열 갈림에서는 두 갈래 사이를 가리켰지만, 1컬럼 스택에서는 왼쪽 점선과 어긋나 떠 보인다.
   공통 구간 머리와 같은 왼쪽 축에 세운다. */
body.shell-v2 .board-split + .board-sec { margin-top: 0; }

/* ── 선택 구간 ── */
body.shell-v2 .board-fork { display: flex; flex-direction: column; gap: var(--sp-sm); }
/* .board-lane 의 격자·여백은 .board-step 과 한 규칙에서 함께 난다(위) — 두 벌로 적으면 줄이 어긋난다. */
body.shell-v2 .board-lane--dim { opacity: 0.5; }
body.shell-v2 .board-lane-hd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); min-width: 0; }
body.shell-v2 .board-lane-icon { display: inline-flex; flex: 0 0 auto; color: var(--ink-80); }
body.shell-v2 .board-lane-title { font-size: var(--fs-title-3); font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
body.shell-v2 .board-tag { padding: 1px 7px; border: 1px dashed var(--divider-soft); border-radius: var(--r-pill); font-size: 12px; color: var(--ink-48); }
body.shell-v2 .board-lane-bd { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
body.shell-v2 .board-lane-extra:empty { display: none; }
body.shell-v2 .board-lane .board-line { font-size: var(--fs-body); color: var(--ink-80); }
body.shell-v2 :is(.board-step, .board-lane) .btn--secondary { background: var(--surface-2); }
body.shell-v2 :is(.board-step, .board-lane) .btn--secondary:hover { background: var(--surface-3); }

/* 머리 칸을 세울 자리가 없으면(≤1099) 한 칸으로 접는다 — 머리 → 본문 → 버튼 순서는 DOM 그대로다. */
@media (max-width: 1099px) {
  body.shell-v2 :is(.board-step, .board-lane) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'hd' 'bd' 'act'; padding: var(--sp-md) var(--sp-lg); }
  body.shell-v2 .board-step:not(:last-child)::after { left: calc(var(--sp-lg) + 12px); }
  body.shell-v2 .board-split::before { left: calc(var(--sp-lg) + 12px); }
  body.shell-v2 .board-step--idea .board-line { column-width: 40ch; column-gap: var(--sp-xl); }
}
@media (max-width: 810px) {
  body.shell-v2 .board-wrap { padding-block: var(--sp-lg) var(--sp-xl); padding-inline: var(--sp-md); } /* 좁은 폭은 홈·라이브러리와 같은 15 */
  body.shell-v2 .board-next { flex-direction: column; align-items: stretch; gap: var(--sp-md); padding: var(--sp-lg); }
  body.shell-v2 .board-next-title { font-size: var(--fs-title-2); }
  body.shell-v2 .board-next-act { align-items: stretch; }
  body.shell-v2 :is(.board-step, .board-lane) { padding: var(--sp-md); }
  body.shell-v2 .board-step::after { content: none !important; }
  body.shell-v2 .board-split::before { left: 50%; }
  body.shell-v2 .board-step--idea .board-line { column-width: auto; font-size: var(--fs-caption); } /* 한 단으로 되돌린다 — 390px 에 두 단은 서지 않는다 */
  body.shell-v2 .board-stage-name { display: none; } /* 이름을 숨겨도 점은 남는다(aria-label 이 계속 말한다) */
  body.shell-v2 .board-stage { min-width: 0; }
  body.shell-v2 .board-cells { grid-template-columns: repeat(auto-fill, 44px); }
  body.shell-v2 .board-cell { width: 44px; height: 44px; font-size: 13px; }
  body.shell-v2 .board-wrap .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .board-cell { transition: none; }
  body.shell-v2 .board-cell.is-rendering { animation: none; }
}