.rv-map-side-eye { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.2em; color: var(--pba-gold); }
  .rv-map-side-name { font-size: 18px; color: #fff; font-weight: 700; line-height: 1.2; }
  .rv-map-side-zone { align-self: flex-start; font-family: var(--pba-font-pixel); font-size: 7.5px; letter-spacing: 0.2em; padding: 5px 9px; border-radius: 3px; color: var(--pba-fg-2); background: #141414; border: 1px solid var(--pba-border); }
  .rv-map-side-zone.z-market-leader { color: var(--pba-gold); background: var(--pba-gold-bg); border-color: var(--pba-gold-border); }
  .rv-map-side-zone.z-niche-player { color: var(--pba-fg-1); }
  .rv-map-side-zone.z-challenger { color: var(--pba-fg-1); }
  .rv-map-side-zone.z-invisible { color: #FF8080; background: #1a0505; border-color: #3a1010; }
  .rv-map-side-stats { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--pba-border-faint); }
  .rv-map-side-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .rv-map-side-stats .lbl { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.16em; color: var(--pba-fg-5); }
  .rv-map-side-stats .val { font-family: var(--pba-font-mono); font-size: 13px; color: #fff; font-weight: 600; }

  @media (max-width: 1080px) {
    .rv-engines-grid { grid-template-columns: 1fr; }
    .rv-map-wrap { grid-template-columns: 1fr; }
  }
  @media (max-width: 880px) {
    .rv-explainer-grid { grid-template-columns: 1fr; gap: 14px; }
    .rv-explainer-glyph { width: 56px; height: 56px; }
    .rv-explainer-glyph svg { width: 36px; height: 36px; }
    .rv-row { grid-template-columns: 28px 16px 1fr; grid-template-areas: "rank tier main" "rank tier engines" "rank tier metrics"; row-gap: 8px; }
    .rv-rank { grid-area: rank; }
    .rv-tier-mark { grid-area: tier; }
    .rv-row-main { grid-area: main; }
    .rv-engines { grid-area: engines; justify-self: start; }
    .rv-row-mentions { grid-area: metrics; flex-direction: row; align-items: baseline; gap: 6px; justify-self: start; }
    .rv-row-mentions .num { font-size: 18px; }
    .rv-roster-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
    .rv-roster-head { flex-direction: column; align-items: flex-start; }
  }

  /* ============ JOURNEY PANE — Claude Design 2026-04-29 ============ */
  .t-invisible { color: #FF6B6B; }
  .t-emerging  { color: #FFA94D; }
  .t-strong    { color: #FFD93D; }
  .t-perfect   { color: #6BE08F; }

  .jr-hero { position: relative; overflow: hidden; padding: 28px 32px 30px; }
  .jr-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 88% 28%, rgba(255,215,0,0.08), transparent 45%), radial-gradient(circle at 8% 88%, rgba(255,215,0,0.04), transparent 40%); pointer-events: none; }
  .jr-hero-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle 1px at 12% 22%, #FFD700 50%, transparent 51%), radial-gradient(circle 1px at 82% 14%, #FFD700 50%, transparent 51%), radial-gradient(circle 1px at 92% 64%, #FFD700 50%, transparent 51%), radial-gradient(circle 1px at 4% 72%, #FFD700 50%, transparent 51%), radial-gradient(circle 1px at 60% 88%, #FFD700 50%, transparent 51%), radial-gradient(circle 1px at 38% 6%, #FFD700 50%, transparent 51%); opacity: 0.3; pointer-events: none; }
  .jr-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 180px; gap: 32px; align-items: center; }
  .jr-hero-eye { font-family: var(--pba-font-pixel); font-size: 8px; letter-spacing: 0.22em; color: var(--pba-gold); margin-bottom: 16px; }
  .jr-hero-h { font-family: var(--pba-font-body); font-weight: 800; font-size: 32px; line-height: 1.22; letter-spacing: -0.6px; color: #fff; margin: 0 0 22px; max-width: 720px; }
  .jr-hero-h em { font-style: normal; }
  .jr-hero-h em:not(.t-invisible):not(.t-emerging):not(.t-strong):not(.t-perfect) { color: var(--pba-gold); }
  .jr-hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--pba-border-faint); padding-top: 16px; }
  .jr-hero-meta-cell { display: flex; flex-direction: column; gap: 4px; padding-right: 16px; border-right: 1px solid var(--pba-border-faint); }
  .jr-hero-meta-cell:last-child { border-right: none; padding-right: 0; }
  .jr-hero-meta-cell .lbl { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.18em; color: var(--pba-fg-5); }
  .jr-hero-meta-cell .val { font-size: 14px; color: #fff; font-weight: 600; }
  .jr-hero-meta-cell .val.mono { font-family: var(--pba-font-mono); font-size: 18px; letter-spacing: -0.3px; }
  .jr-hero-meta-cell .val.tier-pill { align-self: flex-start; font-family: var(--pba-font-pixel); font-size: 8.5px; letter-spacing: 0.2em; color: var(--pba-gold); background: var(--pba-gold-bg); border: 1px solid var(--pba-gold-border); padding: 5px 9px; border-radius: 3px; }
  .jr-hero-medal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px 14px; background: #0a0800; border: 2px solid var(--pba-gold); border-radius: 8px; box-shadow: 3px 3px 0 #b39700; }
  .jr-hero-medal svg { width: 96px; height: 96px; }
  .jr-hero-medal-tier { font-family: var(--pba-font-pixel); font-size: 8px; letter-spacing: 0.2em; color: var(--pba-gold); }

  /* 2026-04-30 Hero's Arc — CEO 재지적 "아이콘이 내려와야 위에 공간 생긴다":
     이전 fix (absolute, bottom:100%)는 marker를 stage box 바깥 위쪽으로 띄워 헤더와 가까워짐.
     fix: marker를 normal flow로 복귀 + flag와 hero 영역 같은 height(28px) 통일 + jr-arc-card padding-top으로 헤더↔marker space 확보. */
  .jr-arc-card { padding: 56px 32px 40px; }
  .jr-arc { display: grid; grid-template-columns: 1fr 88px 1fr 88px 1fr 88px 1fr; align-items: stretch; margin-bottom: 36px; gap: 0; }
  .jr-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
  /* flag/hero normal flow + 같은 height 28px 통일 → 모든 stage의 카드 정렬 일치
     2026-04-30 CEO 재지적: marker ↔ card gap 14→20px (★+YOU가 카드와 너무 붙음) */
  .jr-stage-flag { position: relative; width: 22px; height: 28px; margin-bottom: 20px; display: grid; place-items: center; }
  .jr-stage-flag svg { width: 18px; height: 24px; }
  .jr-stage-flag.locked-flag svg { width: 18px; height: 24px; }
  .jr-stage.passed .jr-stage-flag::after { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 12px; height: 2px; background: var(--pba-gold); }
  /* hero 영역 height 28px (flag와 동일) — glyph 작게 + label 작게 + bottom 정렬 */
  .jr-stage-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; margin-bottom: 20px; min-height: 28px; }
  .jr-stage-hero-glyph { font-family: var(--pba-font-pixel); font-size: 14px; color: var(--pba-gold); text-shadow: 2px 2px 0 #b39700; animation: jrBob 1.6s ease-in-out infinite; line-height: 1; }
  @keyframes jrBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  .jr-stage-hero-label { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.2em; color: var(--pba-gold); background: var(--pba-gold-bg); border: 1px solid var(--pba-gold-border); padding: 2px 5px; border-radius: 3px; line-height: 1; }
  /* card padding 12/8/10 → 16/12/14 (breathing room). gap 5→8 (관련 그룹 spacing) */
  .jr-stage-card { width: 100%; background: #0d0d0d; border: 1px solid var(--pba-border); border-radius: 6px; padding: 16px 12px 14px; text-align: center; display: flex; flex-direction: column; gap: 8px; transition: transform 0.18s ease; }
  .jr-stage.passed .jr-stage-card { background: #0a0800; border-color: var(--pba-gold-border); box-shadow: 2px 2px 0 rgba(179, 151, 0, 0.6); }
  /* current = primary element. SIZE(padding 큼) + WEIGHT(border 2px + transform Y -14) + COLOR(골드 배경) + DEPTH(pixel + atmosphere) */
  .jr-stage.current .jr-stage-card { background: var(--pba-gold-bg); border: 2px solid var(--pba-gold); box-shadow: 4px 4px 0 #b39700, 0 14px 36px rgba(255, 215, 0, 0.18); transform: translate(-2px, -14px); padding: 18px 14px 16px; }
  .jr-stage.locked .jr-stage-card { background: transparent; border-style: dashed; border-color: var(--pba-border-faint); opacity: 0.55; }
  .jr-stage-idx { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.2em; color: var(--pba-fg-5); }
  .jr-stage.current .jr-stage-idx { color: var(--pba-gold); }
  .jr-stage-name { font-family: var(--pba-font-pixel); font-size: 10px; letter-spacing: 0.16em; line-height: 1.2; }
  .jr-stage-range { font-family: var(--pba-font-mono); font-size: 12px; color: var(--pba-fg-3); }
  .jr-stage.current .jr-stage-range { color: var(--pba-gold); font-weight: 600; }
  .jr-stage.locked .jr-stage-range { color: var(--pba-fg-5); }
  /* 2026-04-30 반응형 fix (CEO 재지적): 단어 단위 nowrap + flex-wrap → 좁은 viewport에서 자연 분리 */
  .jr-stage-status { font-family: var(--pba-font-pixel); font-size: 7.5px; letter-spacing: 0.14em; padding: 4px 6px; border-radius: 3px; margin: 4px 0 2px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px 5px; max-width: 100%; }
  .jr-stage-status > span { white-space: nowrap; }
  .jr-stage.passed .jr-stage-status { color: var(--pba-gold); background: var(--pba-gold-bg); border: 1px solid var(--pba-gold-border); }
  .jr-stage-status.active { color: #fff; background: var(--pba-gold); border: 1px solid var(--pba-gold); }
  .jr-stage-status.locked { color: var(--pba-fg-5); background: transparent; border: 1px solid var(--pba-border-faint); }
  .jr-stage-meta { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.16em; color: var(--pba-fg-5); }

  .jr-bridge { position: relative; align-self: center; width: 100%; padding: 0 6px; margin-top: 70px; }
  .jr-bridge-track { width: 100%; height: 6px; background: #050505; border: 1px solid var(--pba-border-faint); border-radius: 999px; overflow: hidden; }
  .jr-bridge-fill { height: 100%; background: var(--pba-gold); border-radius: 999px; }
  .jr-bridge.partial .jr-bridge-fill { background: repeating-linear-gradient(45deg, var(--pba-gold) 0 6px, #b39700 6px 12px); animation: jrShift 1.2s linear infinite; }
  @keyframes jrShift { 0% { background-position: 0 0; } 100% { background-position: 12px 0; } }
  .jr-bridge-label { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--pba-font-pixel); font-size: 6px; letter-spacing: 0.14em; color: var(--pba-fg-4); white-space: nowrap; background: var(--pba-bg); padding: 0 4px; pointer-events: none; }
  .jr-bridge.filled .jr-bridge-label { color: var(--pba-gold); }
  .jr-bridge.partial .jr-bridge-label { color: var(--pba-gold); }

  .jr-arc-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--pba-border-faint); gap: 16px; flex-wrap: wrap; }
  .jr-arc-next { display: flex; flex-direction: column; gap: 4px; }
  .jr-arc-next-eye { font-family: var(--pba-font-pixel); font-size: 7.5px; letter-spacing: 0.2em; color: var(--pba-gold); }
  .jr-arc-next-h { font-size: 14px; color: var(--pba-fg-2); }
  .jr-arc-next-h b { color: #fff; font-weight: 600; }
  .jr-arc-next-est { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.16em; color: var(--pba-fg-5); }

  .jr-timeline-card { padding: 22px 26px 24px; }
  .jr-timeline { list-style: none; margin: 0; padding: 0; }
  .jr-ev { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 14px 0; position: relative; }
  .jr-ev:not(:last-child) { border-bottom: 1px solid var(--pba-border-faint); }
  .jr-ev-rail { position: relative; display: flex; justify-content: center; }
  .jr-ev-rail::before { content: ''; position: absolute; top: 0; bottom: -28px; left: 50%; width: 2px; background: var(--pba-border-faint); transform: translateX(-50%); }
  .jr-ev:last-child .jr-ev-rail::before { display: none; }
  .jr-ev-dot { width: 12px; height: 12px; background: var(--pba-fg-5); border: 2px solid var(--pba-bg); border-radius: 999px; position: relative; z-index: 2; margin-top: 4px; }
  .jr-ev.up .jr-ev-dot, .jr-ev.first .jr-ev-dot { background: var(--pba-gold); box-shadow: 0 0 0 2px var(--pba-gold-border); }
  .jr-ev.down .jr-ev-dot { background: #FF6B6B; }
  .jr-ev.progress .jr-ev-dot { background: var(--pba-fg-2); }
  .jr-ev-body { display: flex; flex-direction: column; gap: 6px; }
  .jr-ev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .jr-ev-badge { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.18em; padding: 4px 7px; border-radius: 3px; }
  .jr-ev-badge.up { color: var(--pba-gold); background: var(--pba-gold-bg); border: 1px solid var(--pba-gold-border); }
  .jr-ev-badge.first { color: #fff; background: var(--pba-gold); border: 1px solid var(--pba-gold); }
  .jr-ev-badge.down { color: #FF8080; background: #1a0505; border: 1px solid #3a1010; }
  .jr-ev-badge.progress { color: var(--pba-fg-1); background: #141414; border: 1px solid var(--pba-border); }
  .jr-ev-badge.milestone { color: var(--pba-fg-2); background: transparent; border: 1px solid var(--pba-border); }
  .jr-ev-date { font-family: var(--pba-font-mono); font-size: 11.5px; color: var(--pba-fg-3); }
  .jr-ev-day { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.16em; color: var(--pba-fg-5); }
  .jr-ev-line { font-size: 14px; color: #fff; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .jr-ev-from, .jr-ev-to { font-family: var(--pba-font-pixel); font-size: 10px; letter-spacing: 0.16em; }
  .jr-ev-arrow { color: var(--pba-fg-4); font-family: var(--pba-font-mono); }
  .jr-ev-note { color: var(--pba-fg-2); font-size: 13px; }
  .jr-ev-foot { display: inline-flex; align-items: baseline; gap: 8px; }
  .jr-ev-foot .lbl { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.18em; color: var(--pba-fg-5); }
  .jr-ev-foot .val { font-family: var(--pba-font-mono); font-size: 13px; color: #fff; font-weight: 600; }

  .jr-trophy-card { padding: 24px 26px 22px; }
  .jr-trophy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .jr-tr { background: #0d0d0d; border: 1px solid var(--pba-border-faint); border-radius: 8px; padding: 18px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: transform .15s, border-color .15s; }
  .jr-tr.unlocked { border-color: var(--pba-gold-border); background: #0a0800; }
  .jr-tr.unlocked:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 #b39700; }
  .jr-tr.locked { border-style: dashed; opacity: 0.6; }
  .jr-tr-medal { position: relative; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 4px; }
  .jr-tr-medal-bg { position: absolute; inset: 0; background: var(--pba-gold-bg); border: 2px solid var(--pba-gold); border-radius: 50%; }
  .jr-tr.locked .jr-tr-medal-bg { background: #0a0a0a; border: 2px dashed var(--pba-border); }
  .jr-tr.unlocked .jr-tr-medal-bg::before, .jr-tr.unlocked .jr-tr-medal-bg::after { content: ''; position: absolute; background: var(--pba-gold); }
  .jr-tr.unlocked .jr-tr-medal-bg::before { top: -4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; }
  .jr-tr.unlocked .jr-tr-medal-bg::after { bottom: -4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; }
  .jr-tr-icon { position: relative; z-index: 2; font-family: var(--pba-font-pixel); font-size: 22px; color: var(--pba-gold); text-shadow: 2px 2px 0 #b39700; line-height: 1; }
  .jr-tr.locked .jr-tr-icon { color: var(--pba-fg-5); text-shadow: none; }
  .jr-tr-name { font-family: var(--pba-font-pixel); font-size: 9px; letter-spacing: 0.18em; color: #fff; }
  .jr-tr.locked .jr-tr-name { color: var(--pba-fg-3); }
  .jr-tr-desc { font-size: 11.5px; color: var(--pba-fg-3); line-height: 1.4; min-height: 32px; }
  .jr-tr-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--pba-border-faint); width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
  .jr-tr.unlocked .jr-tr-foot { border-top-color: var(--pba-gold-border); }
  .jr-tr-foot .lbl { font-family: var(--pba-font-pixel); font-size: 6px; letter-spacing: 0.18em; color: var(--pba-fg-5); }
  .jr-tr.unlocked .jr-tr-foot .lbl { color: var(--pba-gold); }