/* ============================================================
   Semin Jin — seminjin.com
   ============================================================ */

:root{
  --ink:#141414;
  --ink-2:#4a4a4a;
  --ink-3:#8a8a8a;
  --line:#e4e2de;
  --bg:#fbfaf8;
  --bg-2:#ffffff;
  --accent:#7a002b;
  --accent-soft:#f6ebee;

  --sp-xs:.5rem; --sp-s:1rem; --sp-m:2rem; --sp-l:4rem; --sp-xl:7rem;
  --maxw:1180px;

  --sans:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",sans-serif;
  --serif:"Newsreader","Iowan Old Style","Times New Roman",serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#f0eeea; --ink-2:#b4b0aa; --ink-3:#7e7a75;
    --line:#2b2926; --bg:#111110; --bg-2:#191817;
    --accent:#ef8fa5; --accent-soft:#2a1c1f;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-m)}

/* ---------- 탭 네비게이션 ---------- */
.tabs{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.tabs-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-m);
  display:flex; gap:var(--sp-m); align-items:center;
  overflow-x:auto; scrollbar-width:none;
}
.tabs-inner::-webkit-scrollbar{display:none}
.tab{
  appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.72rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
  padding:1.15rem 0; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .18s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}

/* ---------- 논문 리스트 ---------- */
.panel{padding:var(--sp-l) 0 var(--sp-xl)}
.pub{
  display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr);
  gap:var(--sp-l); padding:3.75rem 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.pub:first-child{padding-top:0}
@media (max-width:860px){
  .pub{grid-template-columns:1fr; gap:var(--sp-m); padding:2.5rem 0}
}
.pub-media{margin:0; position:relative; overflow:hidden; border-radius:3px}
.pub-thumb{
  border:1px solid var(--line); background:var(--bg-2); border-radius:3px;
  width:100%; height:auto; display:block;      /* 원본 비율 그대로 — 잘리지 않게 */
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.pub-media:hover .pub-thumb{transform:scale(1.02)}
.pub-thumb.empty{
  display:grid; place-content:center; color:var(--ink-3);
  font-size:.6rem; letter-spacing:.14em; aspect-ratio:16/10;
}
.pub-tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.8rem}
.tag{
  font-size:.57rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--point); border:1px solid color-mix(in srgb, var(--point) 32%, transparent);
  background:color-mix(in srgb, var(--point) 7%, transparent);
  padding:.24rem .5rem; border-radius:999px; line-height:1;
}
.pub-title{font-size:1.22rem; font-weight:600; line-height:1.32; margin:0 0 .5rem; letter-spacing:-.012em}
.pub-venue{font-family:var(--serif); font-style:italic; color:var(--ink-2); font-size:.96rem; margin:0 0 .8rem}
.pub-authors{color:var(--ink-2); font-size:.84rem; margin:0 0 1rem; max-width:56ch}
.pub-authors b{color:var(--ink)}
.pub-links{font-size:.8rem; color:var(--ink-3)}
.pub-links a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft)}
.pub-links a:hover{border-bottom-color:var(--accent)}
.pub-meta{
  margin-top:1.3rem; padding-top:.9rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .8rem;
  font-size:.68rem; color:var(--ink-3);
}
.badge{
  display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.06em;
  border:1px solid var(--accent); color:var(--accent);
  padding:.18rem .45rem; border-radius:2px;
}
.award{color:var(--accent); font-weight:600; font-size:.68rem}

/* ---------- 특허 ---------- */
.patent{padding:var(--sp-m) 0; border-bottom:1px solid var(--line)}
.patent:first-child{padding-top:0}
.patent-ko{font-size:.9rem; font-weight:600; line-height:1.5; margin:0 0 .25rem}
.patent-en{color:var(--ink-2); font-size:.82rem; font-style:italic; margin:0 0 .7rem}
.patent-authors{font-size:.8rem; color:var(--ink-2); margin:0 0 .3rem}
.patent-no{font-size:.75rem; color:var(--ink-3)}

/* ---------- 디자인 워크 ---------- */
.work{padding:var(--sp-m) 0; border-bottom:1px solid var(--line)}
.work:first-child{padding-top:0}
.work-title{font-family:var(--serif); font-size:1.35rem; font-weight:500; margin:0 0 .4rem}
.work-meta{font-size:.76rem; color:var(--ink-3); margin:0 0 .3rem; white-space:pre-line}
.work-desc{color:var(--ink-2); font-size:.85rem; max-width:62ch; margin:.8rem 0 0}
.work-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.6rem; margin-top:var(--sp-s)}
.work-gallery img{border-radius:2px; border:1px solid var(--line)}

/* ---------- 강의/서비스 ---------- */
.section-h{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin:0 0 var(--sp-s);
}
.list-row{display:grid; grid-template-columns:120px 1fr; gap:var(--sp-s);
  padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.85rem}
.list-row .y{color:var(--ink-3); font-variant-numeric:tabular-nums}
.plain li{list-style:none; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.85rem}
.plain{margin:0; padding:0}

.panel{display:none}
.panel.is-active{display:block; animation:fade .35s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.btn{
  display:inline-block; text-decoration:none; font-size:.78rem; font-weight:600;
  letter-spacing:.04em; border:1px solid var(--accent); color:var(--accent);
  padding:.6rem 1.1rem; border-radius:2px; transition:background .18s,color .18s;
}
.btn:hover{background:var(--accent); color:var(--bg)}


/* ============================================================
   프로젝트 슬라이더 + CV 뷰어
   ============================================================ */
.slider{margin:var(--sp-s) 0 var(--sp-m); outline:none}
.slider:focus-visible .stage{outline:2px solid var(--accent); outline-offset:3px}

.stage{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:2px; overflow:hidden; aspect-ratio:16/10;
}
.slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .3s}
.slide.on{opacity:1; visibility:visible}
.slide img{width:100%; height:100%; object-fit:contain}
.slide iframe{width:100%; height:100%; border:0; display:block}

.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  appearance:none; cursor:pointer; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:color-mix(in srgb,#fff 88%,transparent);
  color:var(--ink); font-size:1.1rem; line-height:1;
  display:grid; place-content:center; transition:.16s; opacity:0;
}
.stage:hover .nav, .slider:focus-within .nav{opacity:1}
.nav:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.nav.prev{left:10px} .nav.next{right:10px}
@media (hover:none){.nav{opacity:1}}

.counter{
  position:absolute; right:10px; bottom:10px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  background:color-mix(in srgb,#fff 88%,transparent); color:var(--ink-2);
  padding:.2rem .5rem; border-radius:2px; border:1px solid var(--line);
}

.thumbs{display:flex; gap:.4rem; margin-top:.5rem; flex-wrap:wrap}
.thumb{
  appearance:none; cursor:pointer; padding:0; width:68px; height:44px;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:#fff; opacity:.55; transition:.16s;
}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb:hover{opacity:.85}
.thumb.on{opacity:1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.thumb-play{color:var(--accent); font-size:.9rem}

/* CV */
.cv-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-s); flex-wrap:wrap; margin-bottom:var(--sp-s);
}
.cv-note{color:var(--ink-2); font-size:.82rem; max-width:44ch}
.cv-view{
  width:100%; height:min(78vh,900px); border:1px solid var(--line);
  border-radius:2px; background:#fff; display:block;
}
@media (max-width:760px){
  .cv-view{height:60vh}
  .thumb{width:56px; height:38px}
}
.cv-fallback{font-size:.78rem; color:var(--ink-3); margin:.7rem 0 0; text-align:center}
.cv-fallback a{color:var(--accent)}

[hidden]{display:none !important}

/* 슬라이드 캡션 */
.caps{position:relative; margin-top:.9rem; min-height:5.5rem}
.cap{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .28s}
.cap.on{opacity:1; visibility:visible; position:relative}
.cap-title{
  font-size:.82rem; font-weight:700; letter-spacing:.01em;
  color:var(--accent); margin:0 0 .35rem;
}
.cap-text{font-size:.82rem; line-height:1.6; color:var(--ink-2); max-width:64ch; margin:0}
@media (max-width:760px){.caps{min-height:9rem}}

/* 논문 썸네일 — 호버하면 움직임 */
/* ============================================================
   HERO — Research Turntable
   ============================================================ */
:root{
  --navy:#232a63;
  --point:#7a002b;
  --floor:#aeb8d6;
  --floor-line:#96a1c6;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#aab4ee; --point:#ef8fa5;
    --floor:#252b45; --floor-line:#3f4870;
  }
}

/* ============================================================
   히어로 — 한 화면. 가운데 수직선이 축, 노드는 모듈러 비례.
   ============================================================ */
:root{ --gap-in:.4rem; --rail-w:88px; }

.hero-plate{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:visible}
.pl-rule{stroke:var(--line); stroke-width:.9; opacity:.9}
.pl-vert{stroke:var(--line); stroke-width:.9; opacity:.6}
.pl-cross{stroke:var(--ink-3); stroke-width:1; opacity:.5; fill:none}
.pl-arc{fill:none; stroke:var(--point); stroke-width:.8; opacity:.16}

.hero-grid{position:absolute; inset:0; pointer-events:none; z-index:0}
.hero-figure{position:absolute; pointer-events:none; z-index:0; opacity:.5}
.hero-figure .pose{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  display:block; opacity:0; transition:opacity .5s ease;
}
.hero-figure .pose.on{opacity:1}
.hero-figure svg{display:block; overflow:visible}
@media (max-width:980px){.hero-figure{display:none}}
.grid-line{position:absolute; height:1px; background:var(--line); opacity:.4}
.grid-line.major{opacity:.8}
.hero > *:not(.hero-grid):not(.hero-figure):not(.hero-plate){position:relative; z-index:1}

.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail-w) minmax(0,1fr);
  column-gap:clamp(1.4rem,3vw,2.8rem);
  align-items:center;                       /* 늘이지 않고 가운데 정렬 */
  max-width:1400px; margin:0 auto; padding:clamp(1.2rem,2.4vh,2rem) var(--sp-m) clamp(1rem,2vh,1.6rem);
  min-height:calc(100svh - 5.4rem);
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr; min-height:0; row-gap:var(--sp-m); padding:var(--sp-m)}
}

/* ---------- 왼쪽 : 촘촘하게 ---------- */
.hero-text{display:flex; flex-direction:column; gap:1.9rem}
.id-block{display:grid; gap:1rem}
.hero-eyebrow{
  margin:0; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--point); line-height:1.7;
}
@media (max-width:720px){.hero-eyebrow{font-size:.58rem; letter-spacing:.13em}}
.hero-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem,6.4vw,5.2rem); line-height:.9;
  letter-spacing:-.03em; margin:0; color:var(--navy);
}
.hero-name em{font-style:italic; color:var(--point)}

.who-block{display:grid; gap:.7rem}
.hero-bio{
  font-family:var(--serif); font-size:1.08rem; line-height:1.55;
  color:var(--ink-2); margin:0; max-width:44ch;
}
.hero-bio b{color:var(--ink); font-weight:500}
.hero-bio a{color:var(--point); text-decoration:none; border-bottom:1px solid var(--accent-soft)}
.hero-bio a:hover{border-bottom-color:var(--point)}
.hero-statement{
  margin:0; font-size:.86rem; line-height:1.62; color:var(--ink-3);
  max-width:46ch; padding-left:.85rem; border-left:1px solid var(--line);
}
.hero-contact{display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; font-size:.82rem}
.hero-contact a{
  color:var(--ink-3); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .18s,border-color .18s;
}
.hero-contact a:hover{color:var(--point); border-bottom-color:var(--point)}

.news-h{
  margin:0 0 .6rem; color:var(--point);
  font-family:var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.news-block ul{margin:0; padding:0; display:grid; gap:.2rem}
.news-block li{
  list-style:none; display:grid; grid-template-columns:4.6rem 1fr; gap:.65rem;
  color:var(--ink-2); font-size:.8rem; line-height:1.45;
}
.news-block .d{color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:.73rem}
.news-block .t{display:block}
.news-block b{color:var(--ink); font-weight:600}

/* ---------- 가운데 레일 : 짧게, 미디어에 맞춰 ---------- */
.lens-rail{position:relative; width:var(--rail-w); height:clamp(300px,46svh,440px)}
@media (max-width:980px){
  .lens-rail{width:100%; height:56px; max-width:320px; margin:0 auto}
}
.rail-arcs{position:absolute; top:0; overflow:visible; pointer-events:none; color:var(--ink-3)}
.band{color:var(--ink-3); opacity:.16}
.arc-big{fill:none; stroke:var(--navy); stroke-width:.9; opacity:.2}
.leaf .half{
  stroke:var(--ink-3); stroke-width:.55; stroke-opacity:.35;
  transition:fill .5s, stroke .5s, stroke-opacity .5s;
}
.leaf .half.l{fill:color-mix(in srgb, var(--navy) 7%, transparent)}
.leaf .half.r{fill:color-mix(in srgb, var(--ink-3) 6%, transparent)}
.leaf.on .half{stroke:var(--point); stroke-opacity:.5}
.leaf.on .half.l{fill:color-mix(in srgb, var(--navy) 22%, transparent)}
.leaf.on .half.r{fill:color-mix(in srgb, var(--point) 30%, transparent)}
.hatch{stroke:none; opacity:.45; color:var(--ink-3); transition:opacity .5s}
.leaf.on .hatch{opacity:0}

.rail-line{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:var(--line); transform:translateX(-50%); overflow:hidden;
}
.rail-fill{
  display:block; width:100%; height:100%; background:var(--point);
  transform-origin:top center; transform:scaleY(0);
  transition:transform .68s cubic-bezier(.22,1,.28,1);
}
.lens-node{
  appearance:none; border:0; background:none; padding:0; cursor:pointer;
  position:absolute; left:50%; width:20px; height:20px;
  transform:translate(-50%,-50%); display:grid; place-items:center;
}
.node-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--bg); border:1px solid var(--ink-3);
  transition:background .3s, border-color .3s, transform .3s;
}
.lens-node:hover .node-dot{border-color:var(--point); transform:scale(1.25)}
.lens-node[aria-selected="true"] .node-dot{
  background:var(--point); border-color:var(--point); transform:scale(1.4);
}
.lens-node[aria-selected="true"]::after{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--point); opacity:.3;
}
/* 모듈러 비례 눈금 */
.node-tick{
  position:absolute; right:calc(100% + .5rem); top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); opacity:.5;
  white-space:nowrap; pointer-events:none; transition:color .3s, opacity .3s;
}
.lens-node[aria-selected="true"] .node-tick{color:var(--point); opacity:1}
@media (max-width:980px){.node-tick{display:none}}

/* ---------- 오른쪽 ---------- */
.hero-right{display:flex; flex-direction:column; gap:.9rem}
.lens-stage{position:relative; display:grid}
.lens-panel{
  grid-area:1/1; display:flex; flex-direction:column; gap:.8rem; justify-content:center;
  transition:transform .62s cubic-bezier(.22,1,.28,1), opacity .2s ease;
  will-change:transform,opacity;
}
.lens-panel.on{
  transform:none; opacity:1; z-index:2; pointer-events:auto;
  transition:transform .62s cubic-bezier(.22,1,.28,1), opacity .3s ease .22s;
}
.lens-panel.before{transform:translateY(-3%); opacity:0; z-index:1; pointer-events:none}
.lens-panel.after {transform:translateY(3%);  opacity:0; z-index:1; pointer-events:none}

/* 미디어는 이미지에 딱 맞게 — 흰 여백 없음 */
.lens-media{
  margin:0; border-radius:2px; overflow:hidden; align-self:start;
  border:1px solid var(--line); background:var(--bg-2);
}
.lens-media img{display:block; width:100%; height:auto}
.lens-panel.is-cutout .lens-media{border:0; background:none; overflow:visible}
.lens-panel.is-cutout .lens-media img{filter:drop-shadow(0 14px 26px rgba(20,20,30,.14))}

.lens-info{display:grid; gap:.2rem}
.lens-key{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--point);
}
.lens-link{
  font-size:1.02rem; font-weight:600; color:var(--ink); text-decoration:none;
  justify-self:start; border-bottom:1px solid transparent; line-height:1.35;
}
.lens-link:hover{border-bottom-color:var(--point)}
.lens-venue{font-family:var(--mono); font-size:.66rem; color:var(--ink-3); letter-spacing:.05em}

.axis-strip{
  margin:0; padding:.85rem 0 0; list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem;
  border-top:1px solid var(--line);
}
@media (max-width:620px){.axis-strip{grid-template-columns:1fr; gap:.6rem}}
.axis{cursor:pointer; display:grid; gap:.25rem; padding-top:.5rem;
  border-top:2px solid transparent; transition:border-color .3s}
.axis.on{border-top-color:var(--point)}
.axis-name{
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); transition:color .3s;
}
.axis.on .axis-name{color:var(--point)}
.axis-desc{font-size:.78rem; line-height:1.5; color:var(--ink-3); transition:color .3s}
.axis.on .axis-desc{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .lens-panel{transition:opacity .3s}
  .lens-panel.before,.lens-panel.after{transform:none}
  .rail-fill,.hatch{transition:none}
}

/* ============================================================
   푸터 — 히어로의 격자 어휘를 아주 옅게 반복
   ============================================================ */
.foot{
  position:relative; margin-top:var(--sp-xl);
  border-top:1px solid var(--line); background:var(--bg);
  min-height:180px; display:flex; align-items:center;
}
.foot-grid{position:absolute; inset:0; pointer-events:none; overflow:visible}
.fg-rule{stroke:var(--line); stroke-width:.9; opacity:.45}
.fg-vert{stroke:var(--line); stroke-width:.9; opacity:.3}
.fg-cross{stroke:var(--ink-3); stroke-width:1; opacity:.22; fill:none}

.foot-inner{
  position:relative; z-index:1; width:100%;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--sp-m); padding-top:var(--sp-m); padding-bottom:var(--sp-m);
}
@media (max-width:620px){
  .foot-inner{flex-direction:column; align-items:flex-start; gap:.9rem}
}
.foot-id{display:grid; gap:.3rem}
.foot-name{
  font-family:var(--serif); font-size:1.5rem; color:var(--navy); line-height:1;
}
.foot-id a{
  font-size:.78rem; color:var(--ink-3); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
  justify-self:start;
}
.foot-id a:hover{color:var(--point); border-bottom-color:var(--point)}
.foot-meta{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ============================================================
   모바일 — 수직 레일을 가로 스트립으로
   간격은 데스크탑과 같은 2단계: 그룹 안 .4rem / 그룹 사이 1.7rem
   ============================================================ */
@media (max-width:980px){
  .hero{
    padding:var(--sp-m) var(--sp-m) var(--sp-s);
    row-gap:1.7rem;                       /* 텍스트 · 레일 · 미디어 = 세 덩어리 */
  }

  /* ── 왼쪽 덩어리들 ── */
  .hero-text{gap:1.7rem}                  /* 그룹 사이 */
  .id-block{gap:.7rem}                    /* 눈썹 ↔ 이름 : 한 덩어리 */
  .hero-name{font-size:clamp(2.6rem,13vw,3.6rem)}
  .who-block{gap:.75rem}                  /* 소개 ↔ 철학 ↔ 연락처 */
  .hero-statement{font-size:.82rem; padding-left:.7rem}
  .hero-contact{gap:.4rem 1rem; font-size:.78rem}
  .news-block ul{gap:.4rem}
  .news-h{margin-bottom:.55rem}

  /* ── 가운데: 가로 레일 ── */
  .lens-rail{
    width:100%; max-width:none; height:34px; margin:0;
    border-top:1px solid var(--line); padding-top:16px;
  }
  .rail-line{
    top:calc(50% + 8px); bottom:auto; left:0; right:0;
    width:auto; height:1px; transform:none;
  }
  .rail-fill{transform-origin:left center; transform:scaleX(0)}
  .lens-node{transform:translate(-50%,-50%); width:26px; height:26px}
  .lens-node[aria-selected="true"]::after{width:22px; height:22px}
  .node-tick{display:none}
  .hero-figure{display:none}

  /* ── 오른쪽: 미디어 덩어리 ── */
  .hero-right{gap:.75rem}                 /* 미디어 ↔ 설명 : 한 덩어리 */
  .lens-info{gap:.25rem}
  .lens-panel{gap:.75rem}
  .lens-panel.before{transform:translateY(-1.5%)}
  .lens-panel.after {transform:translateY(1.5%)}

  /* 축 스트립은 별개 덩어리 — 위쪽 여백을 크게 */
  .axis-strip{margin-top:.95rem; padding-top:.95rem; gap:.75rem}
  .axis-desc{font-size:.7rem; line-height:1.45}
  .axis-name{font-size:.54rem; letter-spacing:.1em}

  /* ── 히어로와 탭을 확실히 끊는다 ── */
  .tabs{margin-top:1.7rem; border-top:1px solid var(--line)}
  .tabs-inner{gap:1.2rem}
  .tab{font-size:.66rem; padding:.95rem 0}
  .panel{padding:var(--sp-m) 0 var(--sp-l)}
}

@media (max-width:520px){
  .axis-strip{grid-template-columns:1fr; gap:.45rem}
  .axis{
    display:grid; grid-template-columns:5.6rem 1fr; gap:.6rem;
    align-items:baseline; padding-top:.45rem; border-top:1px solid var(--line);
  }
  .axis.on{border-top-color:var(--point)}
  .hero-news li{grid-template-columns:4.2rem 1fr; gap:.5rem}
}