/* =====================================================================
   story.css — 🌱 이서톡 이야기
   ---------------------------------------------------------------------
   index.html 의 <style> 은 이미 176KB 라 더 키우지 않는다(erp.css·family.css 와 같은 규칙).
   선택자는 전부 `#story-` / `.story-` 안에 갇혀 있다 — 기존 화면에 새는 규칙이 없다.
   색·모서리·그림자는 이서톡 디자인 토큰(--surface·--line·--muted…)만 쓴다.
   ===================================================================== */

/* ── 설정 하단 진입점 ── */
#set-version.story-entry{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s}
#set-version.story-entry:active{opacity:.55}
#story-entry-hint{text-align:center;margin-top:6px;padding:8px 12px 2px;cursor:pointer;
  font-size:calc(11px * var(--fz,1));font-weight:700;color:var(--muted);opacity:.85;
  -webkit-tap-highlight-color:transparent}
#story-entry-hint:active{opacity:.5}

/* 「직접 해보기」로 도착한 자리를 잠깐 비춘다 */
.story-spot{animation:story-spot 2.2s ease-out 1}
@keyframes story-spot{
  0%,100%{box-shadow:none}
  15%,60%{box-shadow:0 0 0 3px rgba(255,140,170,.55) inset}
}

/* ── 전체화면 (gallery-overlay 와 같은 구조 · z 는 그보다 아래) ── */
#story-overlay{position:fixed;inset:0;z-index:126;background:var(--bg);display:none;flex-direction:column}
#story-overlay.on{display:flex}
/* [판배치 2026-08-31 · 마커 `이야기판배치`] 다판에서는 `StoryView._fit()` 이 네 변을 판 영역으로
   좁힌다(값은 `LayoutSvc` 가 그린 좌표에서 읽는다 — 여기에 breakpoint 를 적지 않는다).
   3판에서 왼쪽 채팅판과 맞닿는 그 자리에만 경계선이 필요하다 — `.view.pane-b` 와 같은 선이다. */
#story-overlay.paned{border-left:1px solid var(--line)}

#story-head{flex:none;display:flex;align-items:center;gap:10px;
  padding:calc(var(--sat) + 10px) 14px 10px;background:var(--surface);
  border-bottom:1px solid var(--line)}
#story-head b{font-size:calc(15px * var(--fz,1));line-height:1.35}
#story-head .story-sub{display:block;font-size:calc(11px * var(--fz,1));font-weight:600;color:var(--muted);margin-top:2px}

#story-tabs{flex:none;display:flex;gap:8px;padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--line)}
#story-tabs button{flex:1;padding:9px 10px;border-radius:999px;background:var(--surface2);
  color:var(--muted);font-size:calc(13px * var(--fz,1));font-weight:800;transition:all .18s}
#story-tabs button.on{background:var(--grad);color:#fff}

#story-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 14px calc(20px + var(--sab));
  -webkit-overflow-scrolling:touch}

.story-loading,.story-empty{padding:40px 16px;text-align:center;color:var(--muted);
  font-size:calc(13px * var(--fz,1));line-height:1.7}

/* ── 새소식 ── */
.story-day{margin:18px 2px 10px;font-size:calc(13px * var(--fz,1));font-weight:900;color:var(--muted)}
.story-day:first-child{margin-top:2px}

.story-card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 14px 12px;margin-bottom:10px}
.story-card.story-new::after{content:'NEW';position:absolute;top:-6px;right:10px;
  background:var(--danger);color:#fff;font-size:calc(9px * var(--fz,1));font-weight:900;
  padding:2px 7px;border-radius:999px;letter-spacing:.4px}
.story-card-head{display:flex;align-items:flex-start;gap:8px}
.story-card-ic{flex:none;font-size:calc(17px * var(--fz,1));line-height:1.3}
.story-card-head b{flex:1;font-size:calc(14px * var(--fz,1));font-weight:800;line-height:1.45}
.story-kind{flex:none;align-self:center;font-size:calc(10px * var(--fz,1));font-weight:800;
  padding:3px 8px;border-radius:999px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.story-kind-new{background:rgba(120,200,150,.20)}
.story-kind-fix{background:rgba(255,180,120,.20)}
/* 🔴 본문 글자색은 `--muted` 가 아니라 `--ink` 다. 새소식은 **읽으라고 쓴 글**인데
   muted 로 두면 다 만들어진 기능도 disabled 처럼 흐려 보인다(실기 신고).
   ⚠ `white-space:pre-line` 은 남겨 둔다 — 구조가 없는 평범한 본문은 채팅과 똑같이
     인라인 경로(`\n` 을 <br> 로 바꾸지 않는다)로 오므로 이 규칙이 줄바꿈을 살린다.
     블록 경로(`mdBlock`)의 출력에는 개행 문자가 없어 서로 부딪히지 않는다. */
.story-card-body{margin-top:7px;padding-left:calc(17px * var(--fz,1) + 8px);
  font-size:calc(12.5px * var(--fz,1));line-height:1.65;color:var(--ink);white-space:pre-line;
  min-width:0;overflow-wrap:anywhere}
/* 서식이 카드 폭을 깨지 않게 — 표·코드블록은 자기 안에서만 가로로 민다(채팅과 같은 규칙). */
.story-card-body .md-tw{max-width:100%}
.story-card-body .md-pre{max-width:100%}
.story-card-body>:first-child{margin-top:0}
.story-card-body>:last-child{margin-bottom:0}
.story-try{margin:12px 0 0 calc(17px * var(--fz,1) + 8px);padding:8px 16px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:calc(12px * var(--fz,1));font-weight:800;
  transition:transform .12s}
.story-try:active{transform:scale(.96)}

/* ── 성장지도 (§19: canvas·확대축소·drag 없음. 읽기 쉬운 정적 배치) ── */
.story-root{text-align:center;font-size:calc(15px * var(--fz,1));font-weight:900;
  padding:6px 0 4px;position:relative}
.story-root::after{content:'';display:block;width:1px;height:14px;margin:6px auto 0;background:var(--line)}

.story-map{display:grid;grid-template-columns:repeat(4,minmax(74px,1fr));gap:8px;
  padding-top:4px;border-top:1px solid var(--line)}
/* align-self:start — 열마다 카드 수가 달라서, grid 기본값(stretch)이면 짧은 열의 가지가
   마지막 카드 아래로 한참 더 뻗어 「여기서 뭔가 더 자라다 만 것」처럼 보인다. */
.story-col{position:relative;align-self:start;display:flex;flex-direction:column;align-items:stretch;
  min-width:0;padding-left:9px}
/* 분야 하나 = 옆으로 선 가지 하나. 위쪽 가로선(.story-map 의 border-top)에서 내려온다. */
.story-col::before{content:'';position:absolute;left:1px;top:0;bottom:8px;width:1px;background:var(--line)}
.story-col-head{text-align:center;font-size:calc(11.5px * var(--fz,1));font-weight:900;
  padding:10px 2px 8px;line-height:1.4;word-break:keep-all}

/* [가지의미 2026-09-07 · 마커 `이야기가지`] 카드를 **직렬로 잇지 않는다.**
   예전 `.story-link` 는 노드 사이마다 세로선을 끼워 카드 중심을 위아래로 관통했고,
   그래서 같은 분야의 **형제** 기능이 앞→뒤 성장 관계처럼 읽혔다(실제 관계는 graph 다).
   → 분야마다 옆으로 선 가지 하나(`::before`)에 카드가 잔가지로 달린 형제 잎이 된다.
   진짜 dependency 는 상세 sheet 의 `이 기능이 딛고 선 것` chip 이 계속 담당한다. */
.story-col-body{display:flex;flex-direction:column;align-items:center;gap:8px}

.story-node{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  transition:transform .12s}
.story-node::before{content:'';position:absolute;left:-8px;top:50%;width:8px;height:1px;
  background:var(--line)}
.story-node:active{transform:scale(.95)}
.story-node-name{font-size:calc(11px * var(--fz,1));font-weight:800;line-height:1.35;
  word-break:keep-all;text-align:center}
.story-node-st{font-size:calc(11px * var(--fz,1));line-height:1}
/* ── 상태 = 시각 의미 (실기 마감 2026-09-07) ──────────────────────────────
   ✅ available : 흐리지 않다. 테두리 색으로만 구분한다 — 다 만들어 쓸 수 있는 기능이
                  disabled 처럼 보이면 그 자체가 틀린 정보다.
   🛠 building  : 점선 + 주황 테두리(진행 중이라는 뜻은 선이 말한다).
   🌱 planned   : 점선 + 흐림. **여기만 흐리다.**
   🗑 gone      : 흐림 + 취소선(실제로 없어진 것).
   🚫 종류(새 기능/좋아졌어요/고쳤어요)를 opacity 로 구분하지 않는다. 그건 아이콘 몫이다. */
.story-node-available{border-color:rgba(120,200,150,.55)}
.story-node-building{border-color:rgba(255,180,120,.65);border-style:dashed}
.story-node-planned{opacity:.62;border-style:dashed}
.story-node-gone{opacity:.4;text-decoration:line-through}

.story-legend{margin-top:16px;text-align:center;font-size:calc(10.5px * var(--fz,1));
  color:var(--muted);line-height:1.8}
.story-mapnote{margin-top:4px;text-align:center;font-size:calc(10.5px * var(--fz,1));color:var(--muted);opacity:.8}

/* ── 노드 설명 카드 (v1 은 여기까지 · 별도 페이지는 v2) ── */
#story-sheet{position:absolute;inset:0;z-index:2;background:rgba(35,22,28,.42);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s}
#story-sheet.on{opacity:1;pointer-events:auto}
#story-sheet-card{width:100%;max-width:520px;max-height:78%;overflow-y:auto;
  background:var(--surface);border-radius:26px 26px 0 0;
  padding:16px 18px calc(20px + var(--sab));transform:translateY(6%);transition:transform .26s}
#story-sheet.on #story-sheet-card{transform:translateY(0)}
#story-sheet-close{float:right;font-size:calc(18px * var(--fz,1));color:var(--muted);
  padding:0 4px;line-height:1}

.story-sheet-title{font-size:calc(16px * var(--fz,1));font-weight:900;line-height:1.4}
.story-sheet-st{font-size:calc(11px * var(--fz,1));font-weight:800;color:var(--muted);margin-left:6px}
/* 설명은 이 창을 연 이유다 — 쓸 수 있는 기능이면 흐리게 두지 않는다(`--ink`). */
.story-sheet-desc{margin-top:8px;font-size:calc(13px * var(--fz,1));line-height:1.7;color:var(--ink)}
.story-sheet-sub{margin:18px 0 8px;font-size:calc(11px * var(--fz,1));font-weight:900;color:var(--muted)}
.story-chips{display:flex;flex-wrap:wrap;gap:6px}
.story-chip{padding:5px 11px;border-radius:999px;background:var(--surface2);
  font-size:calc(11px * var(--fz,1));font-weight:800}

.story-hist{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-top:1px solid var(--line)}
.story-hist-d{flex:none;width:calc(52px * var(--fz,1));font-size:calc(10.5px * var(--fz,1));
  font-weight:800;color:var(--muted)}
.story-hist-t{flex:1;font-size:calc(12px * var(--fz,1));line-height:1.55}
.story-hist-k{flex:none;font-size:calc(11px * var(--fz,1))}
/* 🔴 흐림은 **없어진 기록**에만 쓴다(없앴어요 · 속 작업). 지금도 살아 있는
   고침·개선은 정상 명암이고 종류는 아이콘(🩹 ✨)이 말한다 — 명암으로 죽이지 않는다.
   ⓘ 옛 이름 `.story-hist-int` 는 `visibility` 기준이라 멀쩡한 기능의 성장사까지 흐렸다. */
.story-hist-dim{opacity:.5}
.story-hist-none{color:var(--muted);font-size:calc(12px * var(--fz,1));border-top:1px solid var(--line)}

/* 넓은 화면(PC·태블릿)에서는 가운데로 모은다 */
@media (min-width:720px){
  #story-body{padding-left:calc(50% - 300px);padding-right:calc(50% - 300px)}
  .story-map{grid-template-columns:repeat(4,minmax(110px,1fr));gap:14px}
}