/* 포트폴리오 그래프 — 잉크 다크 테마 */
:root {
  --bg: #0b0d13;
  --bg-soft: #10131c;
  --panel: #131722;
  --line: #242b3d;
  --text: #e9ebf2;
  --muted: #8b92a6;
  --dim: #565e73;
  --accent: #d8e05e;
  --c-project: #f0a860;
  --c-course: #6aa5d8;
  --c-extra: #56c8a5;
  --c-contest: #e86e78;
  --c-work: #b48ee0;
  --c-attr: #dfe4f2;
  --c-question: #d8e05e;
  --c-company: #f2557e;
  --node-label: #c0c6d6;
  --tint1: rgba(255,255,255,.05);
  --tint2: rgba(255,255,255,.035);
  --hairline: rgba(255,255,255,.04);
  --glass: rgba(11,13,19,.85);
  --glass-solid: rgba(11,13,19,.95);
  --wk-body: #b0b7c9;
}
body.light {
  --bg: #f3efe6;
  --bg-soft: #faf7f0;
  --panel: #faf7f0;
  --line: #ddd6c6;
  --text: #23262f;
  --muted: #6b7180;
  --dim: #9aa0ad;
  --node-label: #3c4352;
  --tint1: rgba(0,0,0,.055);
  --tint2: rgba(0,0,0,.04);
  --hairline: rgba(0,0,0,.08);
  --glass: rgba(243,239,230,.88);
  --glass-solid: rgba(243,239,230,.96);
  --wk-body: #454c5d;
  background: var(--bg);
}
body.light #search, body.light .chip, body.light #viewswitch,
body.light .btn.ghost, body.light #legend { background: #ffffffb8; }
body.light .btn { background: #ffffff; }
body.light .btn.primary { background: var(--accent); }
body.light .chip.on { background: #fffef8; }
body.light .view-btn.on { background: #eae4d4; }
body.light #panel { background: #faf7f0f2; }
body.light .link-row, body.light #toast { background: #ffffff; }
body.light #modal input[type=text], body.light #modal input[type=date], body.light #modal select,
body.light #modal textarea, body.light #modal pre.raw { background: #ffffff; }
body.light .edge { opacity: .22; }
body.light .edge.dimmed { opacity: .05; }
body.light .domain-label { opacity: .75; }
body.light .hex-cell { fill-opacity: .07; stroke-opacity: .5; }
body.light .wk-chip { color: #5a6172; border-color: #cfc7b6; }
body.light .wk-nav a em { color: #a39c8d; }
body.light .link-row input[type=range] { accent-color: #8a9425; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background:
    radial-gradient(1000px 700px at 76% 18%, rgba(96, 66, 190, .09) 0%, transparent 62%),
    radial-gradient(800px 600px at 12% 78%, rgba(42, 128, 168, .07) 0%, transparent 60%),
    radial-gradient(1200px 800px at 60% 40%, #12162177 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--app-font, "Pretendard Variable", Pretendard, "Malgun Gothic", "Segoe UI", sans-serif);
  word-break: keep-all;
  font-size: calc(14px * var(--fs, 1));
}
/* ── 우주 배경 (다크 전용) ── */
#space { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#space i {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  border-radius: 50%; background: transparent;
}
/* 반짝임 애니메이션 제거 — backdrop-filter 요소들의 상시 재계산(성능 이슈) 유발원.
   가장 밝은 3층만 아주 느리게 깜빡여 분위기 유지, GPU 합성 힌트 부여 */
#space i { will-change: opacity; }
#space i:nth-child(3) { animation: twinkle 14s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
body.light #space { display: none; }
@media (prefers-reduced-motion: reduce) { #space i { animation: none; } }
/* 이동 중 무거운 렌더 오프 — 멈추면 복귀.
   별(#space)은 블러 제거 후 자체 레이어 opacity 애니메이션뿐이라 켜둬도 됨 —
   매 프레임 다시 칠해지는 육각 패턴만 숨긴다 */
body.moving .hex-pat { visibility: hidden; }
body.drag-cells .edge { display: none; }
/* 🔗 간선 숨김 모드 — 렌즈(.lit)·호버(.hov) 간선만 예외로 표시 */
body.edges-off .edge { visibility: hidden; }
body.edges-off .edge.lit,
body.edges-off .edge.hov { visibility: visible; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; cursor: grab; }
#stage.panning { cursor: grabbing; }

/* ── 상단바 ── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px 10px;
  flex-wrap: wrap;                 /* 좁은 창에서 두 줄로 */
  padding: 8px 14px;
  pointer-events: none;
}
#topbar .btn, #viewswitch, .view-btn, #brand { flex: none; white-space: nowrap; }
#topbar > * { pointer-events: auto; }
#brand { display: flex; align-items: center; gap: 10px; }
#brand .logo { font-size: calc(22px * var(--fs, 1)); color: var(--accent); }
#brand h1 { font-size: calc(15px * var(--fs, 1)); font-weight: 700; letter-spacing: -0.2px; }
#brand p { font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
#search {
  width: 150px; min-width: 110px; flex: 0 1 180px; padding: 7px 12px;
  background: #131722e6; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: calc(13px * var(--fs, 1)); outline: none;
}
#search:focus { border-color: #3b465f; }
#filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 5px 11px; border-radius: 20px; font-size: calc(12px * var(--fs, 1));
  background: #131722e6; border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; user-select: none;
}
.chip.on { color: var(--text); border-color: #4a5470; background: #1c2233cc; }
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
/* ── 👥 그룹(참여 팀/프로그램) 필터 — 도메인 칩과 구분되는 점선 칩 ── */
#group-filters { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.gchip-ico { font-size: calc(13px * var(--fs, 1)); opacity: .75; cursor: default; }
.gchip {
  padding: 4px 10px; border-radius: 20px; font-size: calc(11.5px * var(--fs, 1));
  background: #131722e6; border: 1px dashed var(--line); color: var(--muted);
  cursor: pointer; user-select: none;
}
.gchip.on { color: var(--text); border: 1px solid var(--accent); background: #1c2233cc; }
body.light .gchip { background: #ffffffb8; }
body.light .gchip.on { background: #fffef8; }
.grow { flex: 1; }
.btn {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: #1c2233; color: var(--text); font-size: calc(13px * var(--fs, 1)); cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: #4a5470; }
.btn.ghost { background: #131722cc; color: var(--muted); }
.btn.primary { background: var(--accent); color: #14170a; border-color: var(--accent); font-weight: 700; }
.btn.danger { color: #ff8899; }

/* ── 사이드패널 ── */
#panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px;
  background: #10131cfa; border-left: 1px solid var(--line);
  padding: 16px 18px; overflow-y: auto;
  transition: transform .22s ease;
  z-index: 20;
}
#panel.hidden { transform: translateX(100%); }
#panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.badge {
  font-size: calc(11px * var(--fs, 1)); padding: 3px 9px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--muted);
}
#panel h2 { font-size: calc(18px * var(--fs, 1)); line-height: 1.3; margin-bottom: 4px; letter-spacing: -0.3px; }
#panel-meta { font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin-bottom: 12px; }
#panel-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#panel-body {
  font-size: calc(13px * var(--fs, 1)); line-height: 1.65; color: var(--wk-body);
  border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 16px;
  white-space: pre-wrap;
}
#panel-body strong { color: var(--text); }
#panel-links h3 {
  font-size: calc(12px * var(--fs, 1)); color: var(--muted); font-weight: 600;
  margin: 14px 0 8px; text-transform: none;
}
.link-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; margin-bottom: 5px;
  background: #161b28; border: 1px solid var(--line); border-radius: 8px;
  font-size: calc(12.5px * var(--fs, 1));
}
.link-row .rel { font-size: calc(10.5px * var(--fs, 1)); color: var(--dim); min-width: 44px; }
.link-row .name { flex: 1; cursor: pointer; color: var(--text); }
.link-row .name:hover { color: var(--accent); }
.link-row input[type=range] { width: 64px; accent-color: var(--accent); }
.link-row .w { font-size: calc(11px * var(--fs, 1)); color: var(--muted); width: 28px; text-align: right; }
.link-row .del { cursor: pointer; color: var(--dim); font-size: calc(13px * var(--fs, 1)); padding: 0 3px; }
.link-row .del:hover { color: #ff8899; }
#panel-hint { font-size: calc(11px * var(--fs, 1)); color: var(--dim); margin-top: 16px; line-height: 1.6; }

/* ── 뷰별 상단 UI — 필터·갭 컨트롤은 그래프 뷰 전용 (위키·카드는 자체 탭 보유) ── */
body:not([data-view="graph"]) #filters,
body:not([data-view="graph"]) #gap-ctrl { display: none !important; }

/* ── 카드 뷰 (탭 + 좌우 스와이프) ── */
#cards {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: 110px 84px 0 150px;
}
#cards.hidden { display: none; }
.cd-tabs {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 56px 100px 10px 160px;
  background: var(--glass-solid, #0b0d13f2);
  border-bottom: 1px solid var(--line);
}
.cd-tab {
  padding: 7px 14px; border-radius: 20px; font-size: calc(12.5px * var(--fs, 1));
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-family: inherit;
  transition: color .2s, border-color .2s;
}
/* 별 위 유리효과는 큰 바 2곳(위키 목차·카드 탭)과 패널에만 유지 */
.cd-tab em { font-style: normal; margin-left: 5px; color: var(--dim); font-size: calc(11px * var(--fs, 1)); }
.cd-tab:hover { color: var(--text); }
.cd-tab.on { color: var(--c); border-color: var(--c); font-weight: 700; }
body.light .cd-tab { background: #ffffffb8; }
.cd-stage { flex: 1; display: flex; overflow: hidden; }
.cd-page {
  flex: 1; overflow-y: auto; padding: 4px 24px 60px;
  opacity: 1; transform: none;
  transition: opacity .17s ease-out, transform .17s ease-out;
}
.cd-page.cd-fade { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .cd-page { transition: none; } }
.cd-page h2 { font-size: calc(22px * var(--fs, 1)); font-weight: 800; letter-spacing: -0.02em; margin: 4px auto 14px; max-width: 640px; }
.cd-page h2 small { font-size: calc(12px * var(--fs, 1)); font-weight: 400; color: var(--dim); margin-left: 8px; }
.cd-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.cd-card {
  background: #141a28d9; border: 1px solid var(--line); border-radius: 18px;
  padding: 15px 18px; cursor: pointer; backdrop-filter: blur(6px);
  transition: transform .12s ease-out, border-color .2s;
}
.cd-card:hover { border-color: #3b465f; }
.cd-card:active { transform: scale(.985); }
.cd-card.starred { border-left: 3px solid #ffd700; }
body.light .cd-card { background: #fffdf6e0; }
.cd-head { display: flex; align-items: baseline; gap: 8px; font-size: calc(15px * var(--fs, 1)); }
.cd-head b { flex: 1; letter-spacing: -0.01em; }
.cd-meta {
  font-family: Consolas, "D2Coding", monospace; font-size: calc(11px * var(--fs, 1));
  color: var(--dim); margin: 3px 0 6px;
}
.cd-card p { font-size: calc(13px * var(--fs, 1)); line-height: 1.65; color: var(--wk-body); margin-top: 4px; }
.cd-hint { text-align: center; font-size: calc(11px * var(--fs, 1)); color: var(--dim); padding: 8px 0 12px; }

/* ── 🧹 정렬 모드: 육각형이 클릭 대상이 됨 ── */
body.align-mode .hex-cell { pointer-events: all; cursor: pointer; }
body.align-mode .hex-cell:hover { filter: brightness(1.5); }

/* ── 📅 캘린더 뷰 ── */
#calendar {
  position: fixed; inset: 0; overflow-y: auto;
  padding: 84px 100px 60px 190px;
}
#calendar.hidden { display: none; }
.cal-wrap { display: flex; gap: 26px; max-width: 1200px; margin: 0 auto; align-items: flex-start; }
.cal-main { flex: 1; min-width: 0; }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-head h2 { font-size: calc(20px * var(--fs, 1)); letter-spacing: -0.01em; }
.cal-legend { margin-left: auto; font-size: calc(11px * var(--fs, 1)); color: var(--dim); display: flex; gap: 10px; align-items: center; }
.cal-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }
.cal-legend i.hot { background: #ff8899; }
.cal-legend i.warm { background: #e8a54b; }
.cal-legend i.past { background: var(--dim); }
/* minmax(0,1fr) — 1fr만 쓰면 일정 칩의 최소폭 때문에 열 폭이 제각각이 됨 (요일 헤더와 어긋남) */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { margin-bottom: 6px; font-size: calc(11px * var(--fs, 1)); color: var(--dim); text-align: center; }
.cal-dow > div:first-child { color: #ff8899aa; }
.cal-cell {
  min-height: 86px; border-radius: 10px; padding: 6px 7px;
  background: var(--glass-solid); border: 1px solid var(--line);
}
.cal-cell[data-date] { cursor: pointer; }
.cal-cell[data-date]:hover { border-color: #3b465f; }
.cal-cell.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 12px rgba(216, 224, 94, .18); }
.cal-d { font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
.cal-cell.today .cal-d { color: var(--accent); font-weight: 800; }
.cal-ev {
  margin-top: 4px; padding: 3px 6px; border-radius: 6px; cursor: pointer;
  font-size: calc(11px * var(--fs, 1)); line-height: 1.35;
  background: rgba(216, 224, 94, .13); border: 1px solid rgba(216, 224, 94, .3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-ev b { margin-right: 5px; font-size: calc(10px * var(--fs, 1)); }
.cal-ev.hot { background: rgba(255, 136, 153, .14); border-color: rgba(255, 136, 153, .45); }
.cal-ev.hot b { color: #ff8899; }
.cal-ev.warm { background: rgba(232, 165, 75, .13); border-color: rgba(232, 165, 75, .4); }
.cal-ev.warm b { color: #e8a54b; }
.cal-ev.past { opacity: .45; text-decoration: line-through; }
.cal-ev.meet { background: rgba(106, 165, 216, .14); border-color: rgba(106, 165, 216, .45); }
.cal-ev.meet b { color: #6aa5d8; }
.cal-ev.misc { border-style: dashed; }
.cal-ev.misc:hover { border-color: #ff8899; }
.cal-ev:hover { filter: brightness(1.25); }
.cal-note { margin-top: 12px; font-size: calc(11px * var(--fs, 1)); color: var(--dim); }
.cal-side { width: 300px; flex: none; }
.cal-side h3 { font-size: calc(13px * var(--fs, 1)); color: var(--muted); margin: 4px 0 8px; }
.cal-side h3 + .cal-row { margin-top: 0; }
.cal-side h3 small { color: var(--dim); }
.cal-side h3:not(:first-child) { margin-top: 20px; }
.cal-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 10px; margin-top: 5px; border-radius: 9px;
  background: var(--glass-solid); border: 1px solid var(--line);
  font-size: calc(12px * var(--fs, 1));
}
.cal-row:hover { border-color: var(--accent); }
.cal-row b { flex: none; color: var(--muted); }
.cal-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-row em { flex: none; font-style: normal; font-weight: 800; font-size: calc(11px * var(--fs, 1)); }
.cal-row.hot em { color: #ff8899; }
.cal-row.warm em { color: #e8a54b; }
.cal-row.dim { opacity: .6; }
.cal-dim { font-size: calc(11px * var(--fs, 1)); color: var(--dim); margin: 6px 0; }

/* ── 🌊 흐름 뷰 (Sankey) ── */
#flow {
  position: fixed; inset: 0; overflow-y: auto;
  padding: 84px 90px 60px 180px;
}
#flow.hidden { display: none; }
.fl-wrap { max-width: 1280px; margin: 0 auto; }
.fl-hint { font-size: calc(12px * var(--fs, 1)); color: var(--dim); margin-bottom: 10px; }
.fl-svg { width: 100%; display: block; }
.fl-title { fill: var(--muted); font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.fl-rib { opacity: .3; transition: opacity .15s; }
.fl-bar { cursor: pointer; transition: opacity .15s; }
.fl-lb {
  fill: var(--text); font-size: 12.5px; cursor: pointer; transition: opacity .15s;
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round;
}
.fl-lb.star { font-weight: 800; }
.fl-svg.focusing .fl-rib { opacity: .05; }
.fl-svg.focusing .fl-rib.on { opacity: .68; }
.fl-svg.focusing .fl-bar:not(.on), .fl-svg.focusing .fl-lb:not(.on) { opacity: .18; }

/* ── 설정 모달 표시 섹션 ── */
.set-sec {
  margin: 14px 0 8px; font-size: calc(12px * var(--fs, 1));
  color: var(--muted); letter-spacing: .4px;
}
.set-note { font-weight: 400; color: var(--dim); font-size: calc(11px * var(--fs, 1)); }
.set-line {
  display: flex; align-items: center; gap: 10px; margin: 8px 0;
  font-size: calc(13px * var(--fs, 1));
}
.set-line > span { width: 72px; color: var(--muted); flex: none; }
.set-line select {
  flex: 1; padding: 6px 8px; font-family: inherit;
  font-size: calc(13px * var(--fs, 1));
  background: var(--glass-solid); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
}
.set-line input[type=range] { flex: 1; accent-color: var(--accent); }
.set-line b { width: 44px; text-align: right; font-size: calc(12px * var(--fs, 1)); }

/* ── 좌측 세로 메뉴 (게임 스타일) ── */
#sidenav {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 15;
  user-select: none;
  /* 불투명 패널 — 뒤의 벌집을 가린다 */
  background: var(--glass-solid);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 18px 14px 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  zoom: var(--uiz, 1);
}
body.light #sidenav { box-shadow: 0 6px 20px rgba(0, 0, 0, .10); }
.sn-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; font-size: calc(15px * var(--fs, 1)); letter-spacing: .5px;
  color: var(--muted); cursor: pointer;
  transition: color .2s, transform .2s, font-size .2s;
  white-space: nowrap;
}
.sn-item i {
  font-style: normal; font-size: calc(10px * var(--fs, 1)); color: var(--accent);
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s;
}
.sn-item:hover { color: var(--text); transform: translateX(5px); }
.sn-item:hover i { opacity: .7; transform: none; }
.sn-item.on {
  color: #fff; font-weight: 800; font-size: calc(17px * var(--fs, 1));
  text-shadow: 0 0 14px rgba(216, 224, 94, .35);
}
.sn-item.on i { opacity: 1; transform: none; }
body.light .sn-item.on { color: #23262f; text-shadow: none; }
.sn-sep { height: 1px; background: var(--line); margin: 10px 6px; }

/* ── 우측 원형 도구 레일 ── */
#toolrail {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 15;
  transition: right .22s ease;
  /* 불투명 알약 패널 — 뒤의 벌집을 가린다 */
  background: var(--glass-solid);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 12px 9px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  zoom: var(--uiz, 1);
}
body.light #toolrail { box-shadow: 0 6px 20px rgba(0, 0, 0, .10); }
#topbar, #legend { zoom: var(--uiz, 1); }
body.panel-open #toolrail { right: 396px; }
#toolrail .btn {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  font-size: calc(18px * var(--fs, 1)); display: flex; align-items: center; justify-content: center;
  background: #131722ee; border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
#toolrail .btn:hover { border-color: var(--accent); box-shadow: 0 0 14px rgba(216, 224, 94, .3); transform: scale(1.07); }
#toolrail .btn.primary { background: var(--accent); color: #14170a; }
#toolrail .btn.danger-on {
  border-color: #ff8899; box-shadow: 0 0 14px rgba(255, 136, 153, .35);
  background: rgba(255, 136, 153, .12);
}
.tr-restore, .tr-purge { padding: 4px 9px; font-size: calc(12px * var(--fs, 1)); flex: none; }
body.light #toolrail .btn { background: #ffffffd8; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
body.light #toolrail .btn.primary { background: var(--accent); }

/* ── 위키 뷰 ── */
#wiki {
  position: fixed; inset: 0; overflow-y: auto;
  padding: 72px 100px 80px 160px; /* 좌측 메뉴·우측 레일 회피 */
  scroll-behavior: smooth;
}
@media (max-width: 1100px) { #wiki { padding: 72px 80px 80px 130px; } }
#wiki.hidden { display: none; }
.wk-inner { max-width: 700px; margin: 0 auto; }

/* 등장 리빌 (블러 해제) */
.rv { opacity: 0; transform: translateY(14px); filter: blur(6px);
  transition: opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1), filter .55s cubic-bezier(.2,.6,.2,1); }
.rv.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .rv { transition: none; opacity: 1; transform: none; filter: none; } }

/* 히어로 */
.wk-notice {
  text-align: center; font-size: calc(13.5px * var(--fs, 1)); color: var(--wk-body);
  background: var(--tint1); border-radius: 12px; padding: 10px 16px;
  margin-bottom: 26px;
}
.wk-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.wk-hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 6px;
}
.wk-role { font-size: calc(14px * var(--fs, 1)); color: var(--muted); letter-spacing: -0.01em; }
.wk-hexart { width: 104px; height: 104px; flex: none; }
.wk-hexart .hx { fill-opacity: .10; stroke-opacity: .75; stroke-width: 2; transform-origin: center; }
.wk-hexart .hx1 { animation: hxfloat 5.2s ease-in-out infinite; }
.wk-hexart .hx2 { animation: hxfloat 6.1s ease-in-out .6s infinite; }
.wk-hexart .hx3 { animation: hxfloat 5.7s ease-in-out 1.1s infinite; }
.wk-hexart .hx4 { animation: hxfloat 4.6s ease-in-out .3s infinite; }
@keyframes hxfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.wk-intro {
  font-size: calc(14px * var(--fs, 1)); line-height: 1.8; color: var(--wk-body);
  margin: 14px 0 30px;
}
.wk-intro strong, .wk-notice strong { color: var(--text); }

/* 상단 고정 목차 (글래스 바 — 위로는 콘텐츠가 비치지 않음) + scroll-spy */
.wk-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 56px 100px 10px 160px;
  background: var(--glass-solid, #0b0d13f2);
  border-bottom: 1px solid var(--line);
}
.wk-nav a {
  font-size: calc(12px * var(--fs, 1)); color: var(--muted); text-decoration: none;
  padding: 5px 10px; border-radius: 14px; transition: color .2s, background .2s;
}
.wk-nav a em { font-style: normal; color: var(--dim); margin-left: 4px; font-size: calc(10.5px * var(--fs, 1)); }
.wk-nav a:hover { color: var(--text); }
.wk-nav a.on { color: var(--text); background: var(--tint1); font-weight: 600; }

/* 섹션: craftzdog식 밑줄 헤딩 */
.wk-inner section { margin-bottom: 44px; scroll-margin-top: 56px; }
.wk-inner h2 {
  display: inline-block; font-size: calc(19px * var(--fs, 1)); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 14px;
  border-bottom: 3px solid; padding-bottom: 3px;
}

/* 카드: 플랫 + 헤어라인 구분 */
.wk-card {
  padding: 13px 12px; margin: 0 -12px; border-radius: 10px; cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  transition: background .2s ease-out;
}
.wk-card:last-child { border-bottom: none; }
.wk-card:hover { background: var(--tint2); }
.wk-card h3 { font-size: calc(15px * var(--fs, 1)); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 5px; display: flex; align-items: baseline; }
.wk-folder {
  margin-left: auto; flex: none;
  background: transparent; border: none; cursor: pointer;
  font-size: calc(14px * var(--fs, 1)); opacity: .45; transition: opacity .15s;
  padding: 0 2px; font-family: inherit;
}
.wk-card:hover .wk-folder { opacity: .85; }
.wk-folder:hover { opacity: 1 !important; }
.wk-period {
  display: inline-block; margin-right: 10px;
  font-family: Consolas, "D2Coding", monospace; font-size: calc(11px * var(--fs, 1)); font-weight: 400;
  color: var(--dim); letter-spacing: 0;
}
.wk-card p { font-size: calc(13.5px * var(--fs, 1)); line-height: 1.75; color: var(--wk-body); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.wk-chip {
  font-size: calc(10.5px * var(--fs, 1)); padding: 2px 8px; border-radius: 11px;
  background: transparent; border: 1px solid #2a3247; color: #8b92a6;
}
.wk-chip em { font-style: normal; color: var(--dim); margin-left: 4px; }

/* ── 범례 ── */
#legend {
  position: fixed; left: 16px; bottom: 14px;
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: calc(11.5px * var(--fs, 1)); color: var(--muted);
  background: #10131cd9; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line);
}
#legend span { display: flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sw.diamond { background: var(--c-attr); border-radius: 2px; transform: rotate(45deg) scale(.9); }
.sw.hex { border-radius: 3px; }
.sw.square { border-radius: 3px; }

/* ── SVG ── */
.edge { fill: none; stroke: #3a4462; opacity: .13; transition: opacity .18s; }
.edge.rel-answers { stroke: #8d9a3f; }
.edge.rel-requires { stroke: #a34a63; stroke-dasharray: 6 4; }
.edge.rel-evolved { stroke: #e8a54b; stroke-dasharray: 2 4; marker-end: url(#arrow-evolved); }
.edge.rel-related { stroke: #333c55; stroke-dasharray: 1 5; }
.edge.rel-posts { stroke: #f08fb0; }
.edge.rel-matches { stroke: #c9a35c; stroke-dasharray: 3 3; }
.edge.hov { opacity: .8; }
.edge.dimmed { opacity: .03; }
.edge.lit { opacity: 1; }
.domain-label {
  font-size: calc(17px * var(--fs, 1)); font-weight: 800; letter-spacing: 3px;
  opacity: .55; user-select: none;
  pointer-events: auto; cursor: grab;
}
.domain-label:hover { opacity: .95; }
.domain-sub {
  font-size: calc(13px * var(--fs, 1)); font-weight: 700; letter-spacing: 2px;
  opacity: .4; user-select: none; pointer-events: auto; cursor: grab;
}
.domain-sub:hover { opacity: .8; }
.domain-handle {
  fill: transparent; pointer-events: auto; cursor: grab;
}
.domain-handle:hover { fill: rgba(255,255,255,.03); }
.hex-cell.lifting { fill-opacity: .12; stroke-opacity: .6; }
.hex-cell {
  fill-opacity: .055; stroke-opacity: .28; stroke-width: 1.5;
  pointer-events: none;
}
.hex-pat { pointer-events: none; }
.hex-base { fill: var(--bg); opacity: .78; stroke: none; pointer-events: none; }
.hexpat-g path {
  fill: none; stroke: currentColor; stroke-width: 1;
  stroke-dasharray: 2 5; opacity: .55;
}
#hexpat { color: #3a4462; }
body.light #hexpat { color: #b8b0a0; }
.sw.hexsw { border-radius: 3px; transform: rotate(15deg); }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.set-row { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--fs, 1)); }
.set-row input[type=color] {
  width: 34px; height: 26px; border: 1px solid var(--line); border-radius: 6px;
  background: #0e1119; padding: 2px; cursor: pointer;
}

/* ── 갭 모드 컨트롤 ── */
#gap-ctrl {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 8px; font-size: calc(11.5px * var(--fs, 1)); color: var(--muted);
  background: #131722e6; border: 1px solid var(--line);
}
body.light #gap-ctrl { background: #ffffffb8; }
#gap-ctrl input[type=range] { width: 90px; accent-color: #ffc94d; }
#gap-ctrl .btn { padding: 4px 9px; font-size: calc(12px * var(--fs, 1)); }

/* ── 인테이크 폼 ── */
.intake-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.intake-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.intake-item h4 { font-size: calc(13px * var(--fs, 1)); margin-bottom: 5px; }
.intake-item h4 small { color: var(--dim); font-weight: 400; font-size: calc(11px * var(--fs, 1)); }
.intake-item ul { margin: 0 0 7px 16px; font-size: calc(11.5px * var(--fs, 1)); color: var(--muted); line-height: 1.6; }
.intake-item textarea { width: 100%; min-height: 54px; }

/* ── 게임식 화면 가이드 오버레이 ── */
#guide-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(5, 6, 10, .68); cursor: pointer;
  animation: gfade .25s ease-out;
}
@keyframes gfade { from { opacity: 0; } to { opacity: 1; } }
.g-ring {
  position: absolute; border: 2px solid var(--accent); border-radius: 10px;
  box-shadow: 0 0 12px rgba(216, 224, 94, .35);
}
.g-num {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #14170a; font-size: calc(11px * var(--fs, 1)); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px rgba(216, 224, 94, .5);
}
.g-cards {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  max-width: 96vw; max-height: 72vh; overflow-y: auto;
}
.g-card {
  background: #131722f2; border: 1px solid #4a5470; border-radius: 14px;
  padding: 14px 18px; width: 340px; max-width: 92vw;
  font-size: calc(12.5px * var(--fs, 1)); line-height: 1.5; color: #c6cbd9;
}
body.light .g-card { background: #faf7f0f5; color: #454c5d; }
.g-card h3 { font-size: calc(13.5px * var(--fs, 1)); margin-bottom: 8px; color: var(--text); }
.g-card > div { display: flex; align-items: baseline; gap: 8px; padding: 2.5px 0; }
.g-card i {
  font-style: normal; flex: none; width: 20px; height: 18px; text-align: center;
  font-size: calc(11px * var(--fs, 1)); font-weight: 800;
}
.g-card div > i:first-child:not(:empty) { color: var(--accent); }
.g-close {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: calc(11.5px * var(--fs, 1)); color: var(--dim);
}

/* ── 사용 가이드 ── */
.hp-body { max-height: 62vh; overflow-y: auto; font-size: calc(12.5px * var(--fs, 1)); }
.hp-body h4 {
  font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin: 14px 0 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.hp-body h4:first-child { margin-top: 0; }
.hp-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3.5px 0; line-height: 1.55;
}
.hp-ico { width: 24px; text-align: center; flex: none; }
.hp-row b { flex: none; min-width: 84px; color: var(--text); }
.hp-row span:last-child { color: var(--wk-body); }
.hp-foot { margin-top: 12px; color: var(--dim); font-size: calc(11.5px * var(--fs, 1)); }

/* ── 스타트업 가이드 경로 행 ── */
.sg-path {
  display: grid; grid-template-columns: 92px 1fr; gap: 2px 10px;
  padding: 6px 0; border-bottom: 1px solid var(--hairline);
  font-size: calc(12px * var(--fs, 1));
}
.sg-path b { color: var(--text); }
.sg-path code {
  font-family: Consolas, "D2Coding", monospace; font-size: calc(11px * var(--fs, 1));
  color: var(--muted); word-break: break-all;
}
.sg-path span { grid-column: 2; color: var(--dim); font-size: calc(11.5px * var(--fs, 1)); }

/* ── 📅 일정 (PM — 마감·미팅) ── */
#panel-sched { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 16px; }
#panel-sched h3 { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); font-weight: 600; margin-bottom: 8px; }
#panel-sched h3 small { font-weight: 400; color: var(--dim); font-size: calc(10.5px * var(--fs, 1)); margin-left: 4px; }
.sched-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; margin-bottom: 5px;
  border: 1px solid var(--line); border-radius: 8px; background: #131722cc;
  font-size: calc(12px * var(--fs, 1));
}
.sched-row b { white-space: nowrap; font-weight: 700; }
.sched-row span { flex: 1; color: var(--text); min-width: 0; }
.sched-row em { font-style: normal; color: var(--muted); font-size: calc(11px * var(--fs, 1)); white-space: nowrap; }
.sched-row.hot em { color: #ff8899; font-weight: 700; }
.sched-row.past { opacity: .5; }
.sched-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 4px; font-size: calc(11px * var(--fs, 1)); }
.sched-del:hover { color: #ff8899; }
.sched-row.err { border-color: rgba(255, 136, 153, .5); }
.sched-row.err span { color: #ff8899; font-family: Consolas, monospace; font-size: calc(11.5px * var(--fs, 1)); }
.sched-row.err em { color: #ff8899; }
.cal-row.err { border-color: rgba(255, 136, 153, .4); }
.cal-row.err code { background: rgba(255, 136, 153, .12); padding: 0 4px; border-radius: 4px; font-size: calc(10.5px * var(--fs, 1)); }
body.light .sched-row { background: #ffffffb8; }

/* ── 배움 기록 (단방향 사용자 전용) ── */
#panel-learn {
  border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 16px;
}
#panel-learn h3 { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); font-weight: 600; margin-bottom: 8px; }
#panel-learn h3 small { font-weight: 400; color: var(--dim); font-size: calc(10.5px * var(--fs, 1)); margin-left: 4px; }
#panel-learn .learn-text {
  font-size: calc(13px * var(--fs, 1)); line-height: 1.7; color: var(--wk-body);
  background: rgba(86, 200, 165, .06); border-left: 3px solid #56c8a5;
  border-radius: 0 8px 8px 0; padding: 9px 12px; margin-bottom: 8px;
  white-space: pre-wrap;
}
#panel-learn .learn-empty { font-size: calc(12px * var(--fs, 1)); color: var(--dim); margin-bottom: 8px; }
#panel-learn .btn { padding: 4px 10px; font-size: calc(12px * var(--fs, 1)); }
.wk-learn {
  font-size: calc(13px * var(--fs, 1)); line-height: 1.7; color: var(--wk-body);
  border-left: 3px solid #56c8a5; background: rgba(86, 200, 165, .05);
  padding: 8px 12px; margin-top: 8px; border-radius: 0 8px 8px 0;
  white-space: pre-wrap;
}

/* ── 갭 진단 패널 블록 ── */
#panel-gap {
  background: rgba(255, 201, 77, .07); border: 1px solid rgba(255, 201, 77, .3);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: calc(12.5px * var(--fs, 1));
}
#panel-gap .gap-head { color: var(--text); margin-bottom: 6px; }
#panel-gap .gap-flag {
  font-size: calc(10.5px * var(--fs, 1)); padding: 2px 8px; border-radius: 10px; margin-left: 6px;
  background: rgba(255, 201, 77, .18); color: #e8b86a;
}
#panel-gap .gap-pass {
  font-size: calc(10.5px * var(--fs, 1)); padding: 2px 8px; border-radius: 10px; margin-left: 6px;
  background: rgba(86, 200, 165, .15); color: #56c8a5;
}
#panel-gap ul { margin: 0 0 8px 16px; line-height: 1.65; color: var(--wk-body); }
#panel-gap .gap-ok { color: var(--muted); }
#panel-gap .btn { padding: 5px 10px; font-size: calc(12px * var(--fs, 1)); }

/* ── 기업·직무 탐색 ── */
.cs-sizes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.cs-chk {
  display: flex; align-items: center; gap: 5px; font-size: calc(12.5px * var(--fs, 1));
  color: var(--muted); cursor: pointer;
}
.cs-chk input { accent-color: var(--accent); }

/* ── 진행중 현황 ── */
.prog-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: calc(13px * var(--fs, 1)); cursor: pointer;
}
.prog-row:hover { border-color: #4a5470; }
.prog-status {
  font-size: calc(10.5px * var(--fs, 1)); padding: 2px 8px; border-radius: 10px;
  background: rgba(255, 201, 77, .13); color: #e8b86a; flex: none;
}
.prog-label { flex: 1; }
.prog-period { font-size: calc(11px * var(--fs, 1)); color: var(--dim); }
g.node { cursor: pointer; }
g.node .shape { transition: opacity .18s; }
g.node text {
  font-size: calc(11px * var(--fs, 1)); fill: var(--node-label);
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px;
  pointer-events: none; user-select: none;
}
g.node.dimmed { opacity: .13; }
g.node.selected .shape { stroke: #fff; stroke-width: 2.5px; }
body.light g.node.selected .shape { stroke: #23262f; }
g.node.star .shape {
  stroke: #ffd700; stroke-width: 2.5px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, .45));
}
g.node.star text { fill: var(--text); font-weight: 700; }
.wk-card.starred { border-left: 3px solid #ffd700; padding-left: 12px; margin-left: -15px; }
g.node.gap .shape {
  stroke: #ffc94d; stroke-width: 3px;
  filter: drop-shadow(0 0 7px rgba(255, 201, 77, .55));
}
g.node.gap text { fill: var(--text); }
g.node:hover text { fill: #fff; }
/* ── 🏁 완료 표시 — ✓ 배지 상시 + dim-done 토글 시 흐리게 ── */
.done-badge circle { fill: #2fae6e; stroke: var(--bg); stroke-width: 1.6px; }
.done-badge path { fill: none; stroke: #fff; stroke-width: 1.9px; stroke-linecap: round; stroke-linejoin: round; }
body.light .done-badge circle { fill: #1e8f57; }
body.dim-done g.node.done { opacity: .35; filter: saturate(.4); }
body.dim-done g.node.done.selected, body.dim-done g.node.done:hover { opacity: 1; filter: none; }
body.dim-done g.node.done.dimmed { opacity: .1; }
.wk-card.done-card h3::after, .cd-card.done-card b::after {
  content: " ✓"; color: #2fae6e; font-weight: 800;
}
#ghost line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }

/* ── 읽기 전용(정적 배포) 모드 — 편집 UI 전면 숨김 ── */
body.readonly #btn-add, body.readonly #btn-update, body.readonly #btn-trash,
body.readonly #btn-mark, body.readonly #btn-gap, body.readonly #btn-cosearch,
body.readonly #btn-align, body.readonly #btn-progress, body.readonly #btn-export,
body.readonly #btn-help, body.readonly #gap-ctrl, body.readonly #panel-hint,
body.readonly #btn-sched-add, body.readonly .sched-del,
body.readonly #panel-learn .btn, body.readonly #cal-add { display: none !important; }
body.readonly .link-row input[type=range] { pointer-events: none; opacity: .45; }
body.readonly .cal-cell[data-date] { cursor: default; }

/* ── 📚 주간 시간표 (캘린더 뷰 하단, 소행성 무드) ── */
#cal-tt { margin-top: 26px; }
#cal-tt h3 {
  font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); margin-bottom: 12px; font-weight: 600;
  letter-spacing: .5px;
}
#cal-tt h3 b { color: var(--accent); text-shadow: 0 0 12px rgba(216, 224, 94, .5); }
.ctt-cols { display: flex; gap: 8px; }
.ctt-time { flex: none; width: 30px; padding-top: 26px; }
.ctt-time div { font-size: calc(10px * var(--fs, 1)); color: var(--dim); text-align: right; padding-right: 4px; }
.ctt-day { flex: 1; min-width: 0; }
.ctt-dow { text-align: center; font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin-bottom: 5px; height: 21px; }
.ctt-day.today .ctt-dow { color: var(--accent); font-weight: 800; text-shadow: 0 0 10px rgba(216, 224, 94, .6); }
.ctt-col {
  position: relative; border: 1px solid rgba(74, 84, 112, .4); border-radius: 10px;
  background: linear-gradient(180deg, rgba(19, 23, 34, .5), rgba(14, 17, 25, .7));
  /* 시간별 점선 격자 (34px = 1시간) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='34'%3E%3Cline x1='0' y1='33.5' x2='8' y2='33.5' stroke='%234a5470' stroke-opacity='0.45' stroke-width='1' stroke-dasharray='3 5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(19, 23, 34, .5), rgba(14, 17, 25, .7));
  background-size: 8px 34px, auto;
}
.ctt-day.today .ctt-col {
  border-color: rgba(216, 224, 94, .45);
  box-shadow: 0 0 18px rgba(216, 224, 94, .12), inset 0 0 24px rgba(216, 224, 94, .04);
}
.ctt-blk {
  position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 4px 8px; overflow: hidden;
  border: 1px solid; line-height: 1.4; backdrop-filter: none;
  box-shadow: 0 0 12px -2px currentColor, inset 0 0 14px rgba(255, 255, 255, .04);
  animation: ctt-glow 3.2s ease-in-out infinite alternate;
}
.ctt-blk b { display: block; font-size: calc(11.5px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ctt-blk small { color: var(--muted); font-size: calc(10px * var(--fs, 1)); }
.ctt-blk::before {
  content: "✦"; position: absolute; top: 3px; right: 6px; font-size: 9px; opacity: .8;
  animation: ctt-twinkle 2.1s ease-in-out infinite alternate;
}
@keyframes ctt-glow { from { box-shadow: 0 0 8px -3px currentColor, inset 0 0 14px rgba(255,255,255,.03); }
  to { box-shadow: 0 0 16px -1px currentColor, inset 0 0 14px rgba(255,255,255,.06); } }
@keyframes ctt-twinkle { from { opacity: .25; } to { opacity: .95; } }
body.light .ctt-col { background: #ffffffa8; }
body.light .ctt-blk { box-shadow: none; animation: none; }

/* ── 모달 ── */
#modal-wrap {
  position: fixed; inset: 0; background: #05060acc;
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
#modal-wrap.hidden { display: none; }
#modal {
  width: 400px; max-width: 92vw;
  background: var(--panel); border: 1px solid #333c55; border-radius: 14px;
  padding: 20px;
}
#modal h3 { font-size: calc(15px * var(--fs, 1)); margin-bottom: 14px; }
#modal label { display: block; font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin: 10px 0 4px; }
#modal input[type=text], #modal input[type=date], #modal select, #modal textarea {
  width: 100%; padding: 8px 10px; font-size: calc(13px * var(--fs, 1)); font-family: inherit;
  background: #0e1119; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); outline: none;
}
#modal textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
#modal input[type=range] { width: 100%; accent-color: var(--accent); }
#modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
#modal.wide { width: 580px; }
#modal pre.raw {
  max-height: 60vh; overflow: auto;
  background: #0e1119; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-size: calc(12px * var(--fs, 1)); line-height: 1.55;
  font-family: Consolas, "D2Coding", monospace;
  white-space: pre-wrap; word-break: break-all; color: #c6cbd9;
}

#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #1c2233; border: 1px solid #4a5470; color: var(--text);
  padding: 10px 18px; border-radius: 10px; font-size: calc(13px * var(--fs, 1)); z-index: 60;
  transition: opacity .3s;
}
#toast.hidden { opacity: 0; pointer-events: none; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #2c3450; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }