/* CENTRAS NS — 여정 마인드맵 (/journey/) · 기획 wiki/design/journey.md
   마크업은 ops/site/build_site.py journey_map()·journey_roles() 가 온톨로지(stage·scene·airole)에서 만든다.
   넓은 화면: 가운데 CENTRAS NS, 둘레에 6단계를 시계 방향(오른쪽 위 → 오른쪽 아래 → 왼쪽 아래 → 왼쪽 위).
   좁은 화면(<1080): 세로 레일 + 장면 펼침. 스크립트가 없으면 모든 장면 설명이 보인다. */

.r-anticipate{--rc:#19b98f;--rk:#067a62;--rt:#e2f6ef}
.r-answer{--rc:#2f8cff;--rk:#0a5fcc;--rt:#e6f0ff}
.r-connect{--rc:#f26b3a;--rk:#b8400f;--rt:#fdece4}
.r-record{--rc:#7c5cf0;--rk:#5b3bd1;--rt:#eee9fe}

.jm{margin-top:56px}
.jm-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--rc,#a1a1a6)}

/* ---------- 범례 (AI의 역할로 보기) ---------- */
.jm-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.jm-lg{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink2);font-size:14px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s,box-shadow .2s}
.jm-lg:hover{box-shadow:inset 0 0 0 1px #b0b0b8;color:var(--ink)}
.jm-lg[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.jm-lg:focus-visible,.jm-sc:focus-visible,.jm-nav:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* ---------- 지도 ---------- */
.jm-map{position:relative;margin-top:40px}
.jm-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;display:none}
.jm-stages{list-style:none}
.jm-st{position:relative;z-index:1;background:#fff;border-radius:24px;padding:22px 24px 24px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -22px rgba(0,0,0,.22);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.jm-st.jm-on{box-shadow:0 0 0 2px var(--g2),0 18px 40px -22px rgba(47,140,255,.45)}
.jm-sh{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no when" "no t" "d d";column-gap:12px;align-items:center}
.jm-no{grid-area:no;align-self:start;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:14px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.jm-st.jm-on .jm-no{background:var(--grad)}
.jm-when{grid-area:when;font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.01em}
.jm-stt{grid-area:t;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.jm-std{grid-area:d;margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--grey)}
.jm-scs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.jm-sc{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--light);color:var(--ink);font-size:14px;font-weight:600;line-height:1.3;cursor:pointer;transition:background .2s,color .2s,opacity .25s,box-shadow .2s}
.jm-sc:hover{background:#e8e8ed}
.jm-sc[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.jm-sc[aria-pressed="true"] .jm-dot{box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.jm[data-jm-filter="anticipate"] .jm-li:not(.r-anticipate) .jm-sc,
.jm[data-jm-filter="answer"] .jm-li:not(.r-answer) .jm-sc,
.jm[data-jm-filter="connect"] .jm-li:not(.r-connect) .jm-sc,
.jm[data-jm-filter="record"] .jm-li:not(.r-record) .jm-sc{opacity:.32}

/* 장면 설명 (스크립트가 없으면 모두 보인다) */
.jm-sd{margin:10px 0 6px;padding:14px 16px;border-radius:16px;background:var(--light)}
.jm-js .jm-sd{display:none}
.jm-row{display:grid;gap:3px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.jm-row+.jm-row{margin-top:12px}
.jm-row b{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--grey)}
.jm-ai b{color:var(--rk)}
.jm-ai span{color:var(--ink);font-weight:600}
.jm-hm b::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink2)}
.jm-hm span{font-weight:600;color:var(--ink)}
.jm-scr{margin-top:12px;font-size:12px;font-weight:600;color:var(--grey)}
.jm-scr span{display:inline-block;margin-left:4px;padding:2px 9px;border-radius:999px;background:#fff;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- 가운데 ---------- */
.jm-hub{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px}
.jm-loop{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--grey);white-space:nowrap}
.jm-loop span{font-weight:700;color:var(--ink2)}
.jm-core{position:relative;width:188px;height:188px;border-radius:50%;background:#000;color:#f5f5f7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;box-shadow:0 0 0 12px rgba(52,209,168,.10),0 0 0 26px rgba(47,140,255,.06),0 24px 48px -20px rgba(0,0,0,.5)}
.jm-core::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(47,140,255,.28);animation:jm-breathe 3.8s ease-in-out infinite;pointer-events:none}
.jm-core b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.jm-tag{font-size:12px;font-weight:600;color:var(--grey2);max-width:140px;line-height:1.35}
.jm-orb{position:relative;width:46px;height:46px;border-radius:50%;margin-bottom:4px;background:conic-gradient(from 0deg,#34d1a8,#2f8cff,#8b6cff,#34d1a8);animation:jm-spin 9s linear infinite;display:flex;align-items:center;justify-content:center}
.jm-orb::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#000}
.jm-orb i{position:relative;font-style:normal;font-size:13px;font-weight:800;letter-spacing:-.02em;animation:jm-spin 9s linear infinite reverse}
@keyframes jm-spin{to{transform:rotate(360deg)}}
@keyframes jm-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:.25}}

.jm-card{display:none;width:100%;background:#fff;border-radius:24px;padding:22px 22px 16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -24px rgba(0,0,0,.3)}
.jm-js .jm-card{display:block}
.jm-cst{font-size:12.5px;font-weight:700;color:var(--accent);min-height:18px}
.jm-ct{margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.25;min-height:26px}
.jm-cb{margin-top:14px;min-height:212px}
.jm-cb .jm-row{font-size:14.5px}
.jm-pick{font-size:14.5px;color:var(--grey);line-height:1.55}
.jm-cb.jm-in{animation:jm-in .45s var(--ease)}
@keyframes jm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.jm-ctl{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid #ececf0}
.jm-pos{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--grey);font-variant-numeric:tabular-nums}
.jm-nav{all:unset;box-sizing:border-box;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--light);color:var(--ink2);cursor:pointer;transition:background .2s}
.jm-nav:hover{background:#e8e8ed}
.jm-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jm-ctl .jm-nav:first-child{order:0}.jm-pos{order:1}.jm-pp{order:2}.jm-ctl [data-jm-step="1"]{order:3}
.jm-pi{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.jm-pp[aria-pressed="true"] .jm-pi{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}

/* 선 (스크립트가 그린다) */
.jm-w{fill:none;stroke:url(#jm-g);stroke-width:1.6;opacity:.55;transition:opacity .3s,stroke-width .3s}
.jm-w.jm-won{opacity:1;stroke-width:2.6}
.jm-wf{fill:none;stroke:#fff;stroke-width:2.6;stroke-dasharray:3 14;stroke-linecap:round;opacity:0;animation:jm-flow 1.2s linear infinite}
.jm-w.jm-won+.jm-wf{opacity:.9}
@keyframes jm-flow{to{stroke-dashoffset:-34}}
.jm-wl{fill:none;stroke:#b8b8c0;stroke-width:1.4;stroke-dasharray:4 6}
.jm-wa{fill:#b8b8c0}

/* ---------- 넓은 화면: 가운데 + 둘레 ---------- */
@media (min-width:1080px){
  .jm-map{display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);grid-template-rows:repeat(3,auto);column-gap:clamp(56px,5.5vw,88px);row-gap:28px;align-items:center}
  .jm-wires{display:block}
  .jm-stages{display:contents}
  .jm-map{padding-top:56px}
  .jm-hub{grid-column:2;grid-row:1/4;align-self:stretch;justify-content:center}
  .jm-loop{position:absolute;top:-50px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--light)}
  .jm-p1{grid-column:3;grid-row:1}.jm-p2{grid-column:3;grid-row:2}.jm-p3{grid-column:3;grid-row:3}
  .jm-p4{grid-column:1;grid-row:3}.jm-p5{grid-column:1;grid-row:2}.jm-p6{grid-column:1;grid-row:1}
}

/* ---------- 좁은 화면: 세로 레일 ---------- */
@media (max-width:1079px){
  .jm-map{max-width:640px;margin-left:auto;margin-right:auto}
  .jm-hub{gap:14px;margin-bottom:28px}
  .jm-core{width:156px;height:156px}
  .jm-card,.jm-js .jm-card,.jm-loop{display:none}
  .jm-stages{position:relative;display:grid;gap:16px;padding-left:0}
  .jm-stages::before{content:"";position:absolute;left:43px;top:-28px;bottom:24px;width:2px;background:linear-gradient(#34d1a8,#2f8cff);opacity:.35;border-radius:2px}
  .jm-st{padding:20px 20px 14px 24px}
  .jm-scs{flex-direction:column;flex-wrap:nowrap;gap:2px;margin:14px -8px 0}
  .jm-sc{display:flex;width:100%;min-height:46px;padding:10px 12px;border-radius:14px;background:transparent;font-size:15px}
  .jm-sc::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid #a1a1a6;border-bottom:2px solid #a1a1a6;transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
  .jm-sc:hover{background:var(--light)}
  .jm-sc[aria-pressed="true"]{background:var(--light);color:var(--ink);box-shadow:none}
  .jm-sc[aria-pressed="true"]::after{transform:rotate(-135deg) translateY(-1px)}
  .jm-js .jm-sc[aria-pressed="true"]+.jm-sd{display:block;margin:4px 8px 10px;background:#fff;box-shadow:inset 0 0 0 1px #ececf0}
}

/* ---------- AI의 네 가지 역할 ---------- */
.jrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px}
.jr{display:flex;flex-direction:column;background:var(--light);border-radius:28px;padding:30px 26px 26px}
.jr-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--rt);color:var(--rk)}
.jr-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jr-t{margin-top:22px;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.jr-d{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.jr-n{margin-top:20px;font-size:12.5px;font-weight:700;color:var(--rk)}
.jr-sc{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.jr-sc li{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:#fff;color:var(--ink2)}
.jr-pr{margin-top:auto;padding-top:22px}
.jr-pr>span{display:block;padding-top:16px;border-top:1px solid #e3e3e8;font-size:12px;font-weight:700;color:var(--grey)}
.jr-pr ul{list-style:none;margin-top:6px}
.jr-pr li{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5}
@media (max-width:1079px){.jrs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.jrs{grid-template-columns:1fr}.jr{padding:26px 22px 22px}}

/* ---------- 동작 줄이기·인쇄 ---------- */
@media (prefers-reduced-motion:reduce){
  .jm-core::after,.jm-orb,.jm-orb i,.jm-wf{animation:none}
  .jm-cb.jm-in{animation:none}
  .jm-st,.jm-sc,.jm-lg,.jm-w{transition:none}
}
@media print{
  .jm-legend,.jm-card,.jm-wires,.jm-loop{display:none!important}
  .jm-js .jm-sd{display:block}
  .jm-map{display:block}.jm-stages{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .jm-st{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .jm-core{box-shadow:none}
}