/* 소개 페이지 본문 — 조립대 그림, 숫자 줄, 문제, 작동 방식, 설치, 켜기 전에, 지금, 순서, 바닥글.
   styles.css 의 변수와 리셋에 얹힌다. 2026-10-12 Rostore 중심으로 다시 짰다 — 그 전의 세 축·데이터의 길·
   마일스톤 절은 순서(#roadmap) 안으로 들어가고, 뒤에 올 둘은 흐리게 그린다. */

/* ---------- 히어로의 조립대 그림 (SVG) ----------
   색은 전부 토큰이라 라이트 테마에서도 따라 바뀐다. 한/영은 html[lang] 으로 tspan 을 고른다 —
   SVG 안의 글자를 innerHTML 로 갈아 끼우지 않으려고(ui-kit.js 의 data-en 방식은 SVG 에 맞지 않는다).
   좁은 화면에서는 줄이지 않고 옆으로 민다 — 줄이면 이름과 값이 읽히지 않아 그림이 일을 못 한다. */
.hero-visual{ position:relative; margin:0; width:100%; max-width:1040px; }
.hero-visual::before{
  content:''; position:absolute; inset:10% 8%; z-index:-1;
  background:radial-gradient(closest-side, rgba(var(--mint-rgb),0.18), transparent);
  filter:blur(40px);
}
.hero-visual svg{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
.hero-mobile-flow{ display:none; }
@media (max-width:640px){
  .hero-visual{ overflow:hidden; width:100%; padding-bottom:0; }
  .hero-visual svg{ display:none; }
  .hero-mobile-flow{
    display:flex; flex-direction:column; gap:12px; width:100%;
    background:var(--bg-raised); border:1px solid var(--line-strong);
    border-radius:16px; padding:16px; box-sizing:border-box;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
  }
  .hm-header{
    display:flex; align-items:center; gap:12px; padding-bottom:10px;
    border-bottom:1px solid var(--line);
  }
  .hm-dots{ display:flex; gap:5px; }
  .hm-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
  .hm-title{ font-size:13px; font-weight:600; color:var(--ink-faint); }

  .hm-wire-card{
    display:flex; flex-direction:column; gap:8px;
    background:var(--bg); border:1px solid var(--line);
    border-radius:12px; padding:12px;
  }
  .hm-wire-card.ok{ border-left:3px solid var(--mint); }
  .hm-wire-card.bad{ border-left:3px solid var(--bad); }

  .hm-node{ display:flex; flex-direction:column; gap:3px; font-size:12px; }
  .hm-node strong{ font-size:14px; color:var(--ink); }
  .hm-node code{ font-size:11px; color:var(--ink-faint); font-family:var(--mono); }
  .hm-chip{
    font-size:10px; font-weight:700; align-self:flex-start;
    padding:2px 6px; border-radius:4px; background:rgba(var(--bg-rgb),0.6);
  }
  .hm-chip.warm{ color:var(--warm); border:1px solid rgba(255,179,102,0.3); }
  .hm-chip.mint{ color:var(--mint); border:1px solid rgba(var(--mint-rgb),0.3); }

  .hm-port-row{
    display:flex; align-items:center; gap:6px;
    font-size:10px; color:var(--ink-dim); margin-top:4px;
  }
  .hm-port{ width:8px; height:8px; border-radius:50%; }
  .hm-port.out{ background:var(--mint); }
  .hm-port.in{ background:var(--plum); }

  .hm-connector{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 8px;
    padding:6px 10px; border-radius:8px;
    font-size:11px; font-family:var(--mono);
  }
  .hm-connector.ok{ background:rgba(var(--mint-rgb),0.1); color:var(--mint); }
  .hm-connector.bad{ background:rgba(255,107,107,0.1); color:var(--bad); }
  .hm-wire-status{ font-weight:700; font-size:11px; }

  .hm-checks{
    background:var(--bg); border:1px solid var(--line-strong);
    border-radius:12px; padding:12px;
    display:flex; flex-direction:column; gap:8px;
  }
  .hm-check-head{ font-weight:700; font-size:13px; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:6px; }
  .hm-check-row{ display:flex; gap:8px; font-size:12px; }
  .hm-check-icon{ font-weight:800; font-size:14px; }
  .hm-check-row.ok .hm-check-icon{ color:var(--mint); }
  .hm-check-row.bad .hm-check-icon{ color:var(--bad); }
  .hm-check-row p{ margin:2px 0 0; font-size:11px; color:var(--ink-faint); }
}
@media (min-width:641px) and (max-width:780px){
  .hero-visual{ overflow-x:hidden; padding-bottom:6px; max-width:100%; border-radius:14px; }
  .hero-visual svg{ width:100%; max-width:100%; height:auto; }
}
html[lang="ko"] .hero-visual .en, html[lang="en"] .hero-visual .ko{ display:none; }
.g-board{ fill:var(--bg-raised); stroke:var(--line-strong); }
.g-titlebar{ fill:rgba(var(--bg-rgb),0.55); stroke:var(--line); }
.g-win{ fill:var(--line-strong); }
.g-wintitle{ font:600 12.5px var(--sans); fill:var(--ink-faint); }
.g-dot{ fill:var(--line-strong); }
.g-card{ fill:var(--bg); stroke:var(--line-strong); }
.g-accent.mint{ fill:var(--mint); }
.g-accent.warm{ fill:var(--warm); }
.g-chip{ font:600 12px var(--sans); fill:var(--mint); letter-spacing:0.01em; }
.g-chip.warm{ fill:var(--warm); }
.g-title{ font:800 17px var(--sans); fill:var(--ink); letter-spacing:-0.01em; }
.g-sub{ font:500 12px var(--mono); fill:var(--ink-faint); }
.g-title.s{ font-size:11.5px; }
.g-sub.s{ font-size:9.5px; }
.g-key{ font:500 12px var(--mono); fill:var(--ink-faint); }
.g-val{ font:600 12px var(--mono); fill:var(--mint); }
.g-val.dim{ fill:var(--ink-dim); }
.g-val.bad{ fill:var(--bad); }
.g-link{ font:600 12px var(--sans); fill:var(--warm); }
.g-port{ stroke:var(--bg-raised); stroke-width:2.5; }
.g-port.out{ fill:var(--mint); }
.g-port.in{ fill:var(--plum); }
.g-wire{ fill:none; stroke-width:2.6; stroke-linecap:round; }
.g-wire.ok{ stroke:var(--mint); opacity:.5; }
/* 이어진 선 위로만 점이 흐른다 — 끊긴 선(bad)은 멈춰 있다 */
.g-wire.flow{
  stroke:var(--mint); stroke-width:3.4; stroke-dasharray:2 14; opacity:1;
  animation:wire-flow 1.1s linear infinite;
}
@keyframes wire-flow{ to{ stroke-dashoffset:-32; } }
.g-wire.bad{ stroke:var(--bad); stroke-dasharray:6 6; opacity:.9; }
.g-x circle{ fill:var(--bg-raised); stroke:var(--bad); stroke-width:1.8; }
.g-x path{ stroke:var(--bad); stroke-width:2.2; stroke-linecap:round; }
.g-pill rect{ fill:var(--bg-raised); stroke:rgba(var(--mint-rgb),0.5); }
.g-pill text{ font:600 11px var(--mono); fill:var(--mint); text-anchor:middle; }
.g-panel{ fill:var(--bg); stroke:var(--line-strong); }
.g-panel-head{ font:700 12px var(--mono); fill:var(--warm); letter-spacing:0.08em; }
.g-ok-dot{ fill:rgba(var(--mint-rgb),0.16); stroke:var(--mint); }
.g-ok-tick{ fill:none; stroke:var(--mint); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.g-bad-dot{ fill:transparent; stroke:var(--bad); }
.g-bad-x{ stroke:var(--bad); stroke-width:1.8; stroke-linecap:round; }
.g-check{ font:700 13px var(--mono); fill:var(--ink); }
.g-check-sub{ font:500 12px var(--sans); fill:var(--ink-dim); }
.g-sep{ stroke:var(--line); }
.g-file rect{ fill:transparent; stroke:var(--line-strong); }
.g-file text{ font:600 12px var(--mono); fill:var(--ink-dim); }
.g-file.mint rect{ stroke:rgba(var(--mint-rgb),0.5); }
.g-file.mint text{ fill:var(--mint); }
.g-fix rect{ fill:var(--mint); }
.g-fix text{ font:700 12px var(--sans); fill:var(--on-mint); text-anchor:middle; }
@media (prefers-reduced-motion: reduce){ .g-wire.flow{ animation:none; } }

/* ---------- 숫자 줄 (landing.js 가 채운다) ---------- */
.stats{
  margin-top:80px; display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stats[hidden]{ display:none; }
.stats > div{ padding:22px 24px; border-left:1px solid var(--line); }
.stats > div:first-child{ border-left:0; padding-left:0; }
.stats dt{ font-size:12.5px; color:var(--ink-faint); letter-spacing:0.02em; }
.stats dd{ margin-top:6px; font-size:34px; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.stats > div:last-child dd{ color:var(--mint); }
@media (max-width:760px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stats > div{ padding:18px 16px; }
  .stats > div:nth-child(2n+1){ border-left:0; padding-left:0; }
  .stats > div:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ---------- 초보자 3단계 입문 퀘스트 배너 (2026-10-17) ---------- */
.quest-banner{
  margin-top:44px; padding:26px 28px; border-radius:var(--radius);
  background:radial-gradient(ellipse at 10% 0%, rgba(var(--mint-rgb),0.10), transparent 70%), var(--bg-raised);
  border:1px solid rgba(var(--mint-rgb),0.35);
}
.quest-banner-head{ margin-bottom:18px; }
.quest-badge{
  display:inline-block; font:700 11.5px var(--mono); color:var(--mint);
  padding:4px 10px; border-radius:999px; border:1px solid rgba(var(--mint-rgb),0.45);
  background:rgba(var(--mint-rgb),0.1); margin-bottom:8px;
}
.quest-sub{ font-size:14px; color:var(--ink-dim); line-height:1.65; margin:0; }
.quest-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media (max-width:900px){ .quest-grid{ grid-template-columns:1fr; } }
.quest-card{
  display:flex; flex-direction:column; gap:6px; padding:18px 18px 20px;
  border-radius:12px; background:var(--bg); border:1px solid var(--line-strong);
  text-decoration:none; color:var(--ink);
  transition:transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.quest-card:hover{
  transform:translateY(-2px); border-color:rgba(var(--mint-rgb),0.6);
}
.quest-step{ font:700 11px var(--mono); color:var(--warm); letter-spacing:0.06em; }
.quest-card h3{ font-size:16.5px; font-weight:800; margin:0; color:var(--ink); }
.quest-card p{ font-size:13.5px; color:var(--ink-dim); line-height:1.65; margin:0; }

/* ---------- 01. 문제 (Bento Grid & Micro-borders) ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (min-width:901px){
  .pain-grid{ grid-template-columns:1.2fr 1fr 1fr; gap:20px; }
}
@media (max-width:900px){ .pain-grid{ grid-template-columns:1fr; } }
.pain{
  position:relative; padding:28px 26px 30px; border-radius:var(--radius);
  background:var(--bg-raised); border:1px solid var(--line);
  box-shadow:0 8px 24px -12px rgba(0,0,0,0.5);
  transition:transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease);
}
.pain::before{
  content:''; position:absolute; inset:-1px; border-radius:calc(var(--radius) + 1px);
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(var(--warm-rgb),0.25), rgba(var(--mint-rgb),0.1), rgba(255,255,255,0.02));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none; opacity:0.6;
  transition:opacity var(--motion-normal) var(--motion-ease);
}
.pain:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px -12px rgba(0,0,0,0.7), 0 0 20px -4px rgba(var(--warm-rgb),0.2);
}
.pain:hover::before{ opacity:1; }
.pain-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; margin-bottom:22px;
  font:700 13px var(--mono); color:var(--warm);
  border:1px solid var(--warm-dim); background:rgba(var(--bg-rgb),0.5);
}
.pain h3{ font-size:20px; font-weight:800; letter-spacing:-0.02em; margin-bottom:10px; }
.pain p{ font-size:14.5px; color:var(--ink-dim); line-height:1.75; }

/* ---------- 02. 실제 화면 ----------
   조립대의 실제 화면 한 장. 그림(히어로)은 하는 일을 말하고, 이 사진은 그것이 있다는 것을 말한다. */
.screen-section{ background:linear-gradient(180deg, var(--bg), var(--bg-raised) 60%, var(--bg)); }
.screen{
  margin:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-strong); background:#0d0b12;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(var(--mint-rgb),0.05);
}
.screen-bar{
  display:flex; align-items:center; gap:7px; padding:10px 14px;
  background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.06);
}
.screen-bar span{ width:11px; height:11px; border-radius:50%; background:#3b3448; }
.screen-bar span:first-child{ background:#e95420; }
.screen-bar p{ margin-left:10px; font:500 12px var(--mono); color:#8f87a0; }
.screen img{ display:block; width:100%; height:auto; }
.screen figcaption{
  padding:12px 16px 14px; font-size:13px; color:var(--ink-faint); line-height:1.6;
  border-top:1px solid rgba(255,255,255,0.06); background:var(--bg-raised);
}

/* ---------- 03. 작동 방식 ---------- */
.steps{ list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
.step{
  padding:18px 18px 28px; border-radius:var(--radius);
  background:var(--bg-raised); border:1px solid var(--line);
}
.step-art{
  height:176px; border-radius:10px; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 0) 0 0/18px 18px,
    rgba(var(--bg-rgb),0.6);
  border:1px solid var(--line);
}
.step-num{ font:700 13px var(--mono); color:var(--mint); margin:0 8px; }
.step h3{ display:inline; font-size:21px; font-weight:800; letter-spacing:-0.02em; }
.step > p{ margin:12px 8px 0; font-size:14.5px; color:var(--ink-dim); line-height:1.75; }

.mini-card{
  width:200px; padding:14px 16px; border-radius:10px;
  background:var(--bg); border:1px solid var(--line-strong);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.45);
}
.mini-chip{ font-size:10.5px; font-weight:600; color:var(--mint); }
.mini-chip.warm{ color:var(--warm); }
.mini-title{ font-size:14px; font-weight:800; margin:2px 0 8px; }
.mini-row{ display:flex; justify-content:space-between; font:500 11px var(--mono); color:var(--ink-faint); padding:3px 0; border-top:1px solid var(--line); }
.mini-row b{ color:var(--mint); font-weight:600; }
.mini-src{ margin-top:8px; font-size:10px; color:var(--ink-faint); }
.mini-graph{ width:88%; height:auto; overflow:visible; }
.mini-files{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.mini-files span{
  font:600 12px var(--mono); color:var(--ink-dim);
  padding:7px 12px; border-radius:8px; border:1px solid var(--line-strong); background:var(--bg);
}
.mini-files span::before{ content:'▤ '; color:var(--ink-faint); }
.mini-files span.mint{ color:var(--mint); border-color:rgba(var(--mint-rgb),0.45); }

/* ---------- 04. 설치 ---------- */
.install-section{ background:linear-gradient(180deg, var(--bg-raised), var(--bg)); }
.install-grid{ display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:56px; align-items:center; }
@media (max-width:1000px){ .install-grid{ grid-template-columns:1fr; } }
.install-points{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.install-points li{
  font-size:14.5px; color:var(--ink-dim); padding-left:22px; position:relative; line-height:1.7;
}
.install-points li::before{ content:'›'; position:absolute; left:4px; color:var(--mint); font-weight:700; }
.install-points b{ font-family:var(--mono); color:var(--ink); font-weight:600; }
.install-note{ margin-top:22px; font-size:13px; color:var(--warm); }

.terminal{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-strong); background:#0d0b12;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--mint-rgb),0.04);
}
html[data-theme="light"] .terminal{ background:#1c1824; }
.terminal-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.06);
}
.terminal-bar span{ width:11px; height:11px; border-radius:50%; background:#3b3448; }
.terminal-bar span:first-child{ background:#e95420; }   /* Ubuntu 창 단추 색 */
.terminal-bar p{ margin-left:10px; font:500 12px var(--mono); color:#8f87a0; }
.terminal-body{
  margin:0; padding:20px 22px 24px; overflow-x:auto;
  font:500 12.8px/1.75 var(--mono); color:#e9e5f0; white-space:pre;
}
.terminal-body .c{ color:#7d7590; }
.terminal-body .p{ color:#3ff5c8; }
.terminal-body .o{ color:#bdb5cc; }
.cursor{ display:inline-block; width:8px; height:15px; margin-left:4px; vertical-align:-2px; background:#3ff5c8; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- 05. 켜기 전에 ---------- */
.trust-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
@media (max-width:760px){ .trust-grid{ grid-template-columns:1fr; } }
.trust{ padding:26px 26px 28px; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-raised); }
.trust svg{ width:28px; height:28px; fill:none; stroke:var(--mint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:16px; }
.trust h3{ font-size:18px; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
.trust p{ font-size:14.5px; color:var(--ink-dim); line-height:1.75; }

/* ---------- 06. 지금 ---------- */
/* 확인된 것 / 아직 아닌 것 */
.proof-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
@media (max-width:760px){
  .proof-grid{ grid-template-columns:1fr; }
  .proof-col{ padding:20px 18px 24px; }
}
.proof-col{ background:var(--bg); padding:28px 28px 32px; }
.proof-head{
  font:700 12.5px var(--mono); letter-spacing:0.1em; text-transform:uppercase;
  padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--line);
}
.proof-head.done{ color:var(--mint); }
.proof-head.todo{ color:var(--warm); }
.proof-list{ list-style:none; display:flex; flex-direction:column; gap:15px; }
.proof-list li{
  font-size:14.5px; line-height:1.75; color:var(--ink-dim); padding-left:18px; position:relative;
}
.proof-list li::before{
  content:''; position:absolute; left:0; top:10px;
  width:7px; height:7px; border-radius:50%; background:var(--mint);
}
.proof-col:last-child .proof-list li::before{ background:transparent; border:1.5px solid var(--warm); width:6px; height:6px; }
.proof-list b{ color:var(--ink); font-weight:700; }

/* ---------- 07. 순서 (Bento Grid & Micro-borders) ----------
   지금(Rostore)은 또렷하게, 다음(Robotwin)은 흐리게, 그다음(Robotold)은 더 흐리게(사용자 지시, 2026-10-12).
   올려 보면 조금 또렷해진다 — 읽을 수는 있어야 하니까. 순서가 바뀌면 li 의 now/next/later 만 바꾼다. */
.lineup{ list-style:none; display:flex; flex-direction:column; gap:16px; }
@media (min-width:901px){
  .lineup{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .lane.now{ grid-column:1 / -1; }
  .lane:not(.now){ grid-template-columns:1fr; gap:10px; }
  .lane:not(.now) .lane-stage{ padding-top:0; }
}
.lane{
  position:relative; display:grid; grid-template-columns:120px 1fr; gap:28px; align-items:start;
  padding:28px 30px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--bg-raised);
  opacity:var(--fade, 1);
  transition:opacity var(--motion-slow) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease), transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease);
}
.lane::before{
  content:''; position:absolute; inset:-1px; border-radius:calc(var(--radius) + 1px);
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(var(--mint-rgb),0.2), rgba(255,255,255,0.02));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none; opacity:0.5;
  transition:opacity var(--motion-normal) var(--motion-ease);
}
@media (max-width:720px){ .lane{ grid-template-columns:1fr; gap:10px; padding:24px 22px; } }
.lane.now{
  border-color:rgba(var(--mint-rgb),0.5);
  background:radial-gradient(ellipse at 15% 0%, rgba(var(--mint-rgb),0.12), transparent 70%), var(--bg-raised);
  box-shadow:0 20px 60px -30px rgba(var(--mint-rgb),0.35), 0 0 0 1px rgba(var(--mint-rgb),0.2);
}
.lane.now::before{
  background:linear-gradient(135deg, rgba(var(--mint-rgb),0.6), rgba(var(--mint-rgb),0.15), rgba(var(--mint-rgb),0.4));
  opacity:1;
}
.lane:hover{ transform:translateY(-2px); }
.lane.next{ --fade:.55; }
.lane.later{ --fade:.3; }
.lane.next:hover, .lane.later:hover, .lane.next:focus-within, .lane.later:focus-within{ --fade:.85; }
.lane-stage{ font:700 13px var(--mono); letter-spacing:0.08em; color:var(--ink-faint); padding-top:9px; }
.lane.now .lane-stage{ color:var(--mint); }
.lane-body h3{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:26px; font-weight:800; letter-spacing:-0.025em;
}
.lane-body h3 img{ width:40px; height:40px; }
.lane-body h3 .kr{ font-size:14px; font-weight:500; color:var(--ink-faint); letter-spacing:0; }
.lane-body > p{ margin-top:10px; font-size:15px; color:var(--ink-dim); max-width:64ch; line-height:1.75; }
.lane-goals{ list-style:none; margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.lane-goals li{
  font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  border:1px solid var(--warm-dim); color:var(--warm);
}
.lane-goals li::before{ content:'○ '; }
.lane-goals li.done{ border-color:rgba(var(--mint-rgb),0.45); color:var(--mint); }
.lane-goals li.done::before{ content:'✓ '; }
/* 일부만 된 것 — 됐다고도 안 됐다고도 적지 않는다 */
.lane-goals li.part{ border-color:rgba(var(--mint-rgb),0.25); color:var(--ink-dim); }
.lane-goals li.part::before{
  content:''; display:inline-block; width:8px; height:8px; margin-right:6px; vertical-align:0;
  border-radius:50%; border:1.5px solid var(--mint);
  background:linear-gradient(90deg, var(--mint) 50%, transparent 50%);   /* 반쯤 찬 원 — 글꼴에 ◐ 가 없어 그린다 */
}
/* 레인 액션 바 — 순서 섹션에서 각 도구로 바로 가는 길 */
.lane-action{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.lane-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  border-radius:10px;
}
.lane-path{
  font:12px var(--mono, ui-monospace, monospace);
  color:var(--ink-faint);
  letter-spacing:0.02em;
}
.lane.now .lane-btn{
  background:var(--mint);
  color:var(--on-mint);
  border-color:var(--mint);
  box-shadow:0 0 0 1px rgba(var(--mint-rgb),0.2), 0 8px 24px -8px rgba(var(--mint-rgb),0.5);
}
.lane.now .lane-btn:hover{
  background:var(--mint-hover);
  transform:translateY(-1px);
}

/* 7번 순서 안의 m-emo (NAS 전용) */
.lineup-memo{
  margin-top:20px;
  padding:24px 28px;
  border-radius:var(--radius);
  border:1px solid var(--warm-dim);
  background:radial-gradient(ellipse at 15% 0%, rgba(var(--warm-rgb, 255,140,0),0.08), transparent 70%), var(--bg-raised);
  box-shadow:0 12px 40px -20px rgba(var(--warm-rgb, 255,140,0),0.25);
  transition:border-color var(--motion-normal) var(--motion-ease), transform var(--motion-normal) var(--motion-ease);
}
.lineup-memo:hover{
  border-color:var(--warm);
  transform:translateY(-2px);
}
.lineup-memo[hidden]{ display:none; }
.lineup-memo-head{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.lineup-memo-head img{ width:30px; height:30px; flex:none; margin-top:2px; }
.lineup-memo-title h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.lineup-memo-title h3 .kr{
  font-size:13px;
  font-weight:500;
  color:var(--ink-faint);
}
.lineup-memo-title p{
  margin-top:6px;
  font-size:14px;
  color:var(--ink-dim);
  line-height:1.65;
}
.lineup-memo .lane-action{
  margin-top:16px;
  padding-top:14px;
  border-top-color:rgba(var(--warm-rgb, 255,140,0),0.2);
}
.lineup-memo .lane-btn{
  border-color:var(--warm-dim);
  color:var(--warm);
}
.lineup-memo .lane-btn:hover{
  border-color:var(--warm);
  background:rgba(var(--warm-rgb, 255,140,0),0.1);
}

.lineup-core{
  margin-top:22px; display:flex; align-items:center; gap:12px;
  font-size:14px; color:var(--ink-faint);
}
.lineup-core img{ width:22px; height:22px; flex:none; }
.lineup-core b{ color:var(--ink-dim); font-weight:700; }

/* ---------- footer / cta ---------- */
footer{
  padding:120px 0 56px; border-top:1px solid var(--line);
  background:radial-gradient(700px 360px at 20% 0%, rgba(var(--mint-rgb),0.07), transparent 70%);
}
.cta-title{
  font-weight:800; font-size:clamp(30px, 4.4vw, 54px);
  line-height:1.15; letter-spacing:-0.035em;
}
.cta-title span{ color:var(--mint); }
.cta-sub{ margin-top:18px; font-size:17px; color:var(--ink-dim); max-width:48ch; }
.cta-row{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cta-row button.btn{ color:var(--ink); font-family:inherit; cursor:pointer; }
.cta-contact-note{ margin-top:12px; font-size:14px; line-height:1.5; color:var(--ink-dim); }

.foot-mark{ margin-top:84px; display:flex; align-items:center; gap:14px; }
.foot-mark img{ width:40px; height:40px; border-radius:9px; border:1px solid var(--line-strong); }
.foot-motto{ font-size:14px; color:var(--ink-dim); letter-spacing:0.02em; }
.foot-meta{
  margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--ink-faint);
}