/* MRO/U 쪽 전용(mro.html · mro-en.html 공용): 요약 · 기종별 막대 · 입고 경로 지도 · 장기 계약 간트 · UH-60 전 주기 · 성능개량 카드 · 다음 단계.
   site.css 뒤, 막는 <link>로 둠(scroll-fx.js가 시작할 때 계산된 스타일을 읽음). 색은 구역 색 토큰(--fg · --sub · --ln · --ln0 · --acc · --pan, site.css 4). 예외: 두 면에서 같은 --cream(번호 · 도면 글) · 마스크 #000
   .bz-act는 site.css 16. 지도 육지 모양은 img/mro-land.svg
   주의: .ms는 site.js 모바일 메뉴의 .mm nav .ms에도 걸림(이 쪽에서만 세로 · 위 여백 24px, 메뉴는 .sec 밖이라 --ln 윗선은 없음) — 지금 화면 그대로라 이름을 바꾸지 않음 */
/* ── MRO/U 실적: 창정비는 규모 · 연속성으로, 성능개량은 비포 → 애프터로 ── */
.mx-t{font-size:clamp(20px,1.7vw,26px);line-height:1.3;letter-spacing:-.02em}
/* 요약 */
/* 인사말과 같은 오른쪽 본문 칸에 지표를 두어 왼쪽 패턴과 분리 */
.mx-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
.mx-sum .ms{min-width:0}
.mx-sum .v{flex-wrap:wrap}
.ms{display:flex;flex-direction:column;gap:12px;padding-top:24px;box-shadow:inset 0 1px 0 var(--ln)}
.ms .v{display:flex;align-items:baseline;gap:6px}
.ms .v b{font-weight:300;font-size:clamp(44px,5vw,80px);line-height:1;letter-spacing:var(--ls-num)}
.ms .v span{font-size:17px;color:var(--sub)}
.ms .l{font-size:16px;font-weight:700}
.ms .s{font-size:13px;color:var(--sub)}
/* ① 기종별 막대 */
.mx-blk{grid-column:1/-1;margin-top:96px}
.mx-bars{margin-top:32px;display:flex;flex-direction:column}
.mb{display:grid;grid-template-columns:clamp(96px,10vw,150px) minmax(130px,1.6fr) 7fr minmax(90px,1fr);grid-template-areas:"ph hd tr nv" "ph hd mt mt";column-gap:var(--gut);row-gap:10px;align-items:center;padding:22px 0;box-shadow:inset 0 1px 0 var(--ln)}
.mb .ph0{grid-area:ph;aspect-ratio:3/2;overflow:hidden;align-self:start}
.mb .ph0 img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--t-img)}
.mb:hover .ph0 img{transform:scale(1.05)}
.mb .hd{grid-area:hd;display:flex;flex-direction:column;gap:6px;align-self:start}
.mb .hd b{font-size:clamp(22px,2vw,30px);letter-spacing:-.02em}
.mb .hd span{font-size:13px;color:var(--sub)}
.mb .tr{grid-area:tr;position:relative;height:10px;background:var(--pan);overflow:hidden}
.mb .fill{position:absolute;left:0;top:0;bottom:0;background:var(--fg);transform-origin:0 50%;transition:transform 1.4s var(--rv-ease) calc(var(--d,0s) + .35s)}
.mb .nv{grid-area:nv;justify-self:end;font-size:15px;color:var(--sub);white-space:nowrap}
.mb .nv b{font-weight:300;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.04em;color:var(--fg);margin-right:3px}
.mb .mt{grid-area:mt;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:13.5px;color:var(--sub)}
.mb .st{font-weight:700;color:var(--fg)}
.mb .st.done{color:var(--acc)}
.mx-note{margin-top:16px;font-size:13px;color:var(--sub)}
.mx-oth{margin-top:28px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px}
.mx-oth .lbl{color:var(--sub)}
.mx-oth ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.mx-oth li{padding:7px 12px;font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1px var(--ln)}
/* ② 입고 경로 지도 */
.mx-map{grid-column:1/-1;margin:120px 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.mx-map figcaption{grid-column:1/span 3;align-self:start;display:flex;flex-direction:column;gap:16px}
.mx-map figcaption p{font-size:16px;line-height:1.75;color:var(--sub)}
/* 부산 이름표까지 표시 범위 안에 두고, 글자를 흐리게 하는 지도 전체 마스크는 사용하지 않음. */
.mx-mapsvg{grid-column:4/span 9;width:100%;height:auto;display:block;overflow:visible}
.mx-mapsvg .land{fill:var(--ln0)}
.mx-mapsvg .rt{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--rv-ease) calc(var(--d,0s) + .5s + var(--k) * .16s)}
.mx-mapsvg .bs circle{fill:var(--fg)}
.mx-mapsvg text{fill:var(--fg);font-size:15px;font-weight:700;letter-spacing:-.01em}
.mx-mapsvg .bs{transition:opacity .8s var(--rv-ease) calc(var(--d,0s) + .3s + var(--k) * .16s)}
.mx-mapsvg .hq circle{fill:var(--acc)}
.mx-mapsvg .hq .pl{fill:none;stroke:var(--acc);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:mx-pulse 2.6s var(--rv-ease) infinite}
.mx-mapsvg .hq text{font-size:17px}
.mx-mapsvg.pz .hq .pl{animation-play-state:paused}
@keyframes mx-pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.6);opacity:0}}
/* ③ 장기 계약 간트 */
.mx-gantt{grid-column:1/-1;margin-top:120px;position:relative;--lw:minmax(180px,3fr)}
.mx-gantt .gx,.mx-gantt .gr{display:grid;grid-template-columns:var(--lw) 9fr;column-gap:var(--gut)}
.mx-gantt .gx{margin-top:32px;height:28px}
.mx-gantt .tk{position:relative}
.mx-gantt .tk span{position:absolute;top:0;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--sub);transform:translateX(-50%)}
.mx-gantt .tk span:first-child{transform:none}
.mx-gantt .nl{position:absolute;top:-22px;font-size:12px;font-weight:700;font-style:normal;color:var(--acc);white-space:nowrap;transform:translateX(-50%)}
.mx-gantt .gr{padding:18px 0;box-shadow:inset 0 1px 0 var(--ln);align-items:center}
.mx-gantt .gl{display:flex;flex-direction:column;gap:6px}
.mx-gantt .gl b{font-size:17px}
.mx-gantt .gl span{font-size:13px;color:var(--sub)}
.mx-gantt .gt{position:relative;height:34px;background:repeating-linear-gradient(90deg,var(--ln0) 0 1px,transparent 1px calc(100% / 11))}
.mx-gantt .gbar{position:absolute;top:8px;height:18px;background:var(--fg);transform-origin:0 50%;transition:transform 1.4s var(--rv-ease) calc(var(--d,0s) + .4s)}
.mx-gantt .gvl{position:absolute;top:8px;height:18px;line-height:18px;padding-left:10px;font-size:12.5px;font-weight:700;color:var(--cream);white-space:nowrap;pointer-events:none}
.mx-gantt .nw{position:absolute;top:-18px;bottom:-18px;width:1px;background:var(--acc)}
/* UH-60 전 주기 */
.mx-life{grid-column:1/-1;margin:88px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:20px;counter-reset:lf}
.mx-life li{position:relative;display:flex;flex-direction:column;gap:12px;padding-top:28px;box-shadow:inset 0 1px 0 var(--ln)}
.mx-life li::after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.mx-life .y{font-weight:300;font-size:clamp(28px,2.6vw,42px);line-height:1;letter-spacing:-.04em}
.mx-life b{font-size:16px}
.mx-life .x{font-size:14px;line-height:1.6;color:var(--sub)}
/* 성능개량 카드 */
.mx-ups{grid-column:1/-1;margin-top:88px;display:flex;flex-direction:column}
.mu{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:48px 0;box-shadow:inset 0 1px 0 var(--ln)}
.mu .dw{grid-column:1/span 4;aspect-ratio:1/1;max-height:380px;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--ln0) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--ln0) 1px,transparent 1px) 0 0/28px 28px}
.mu .dw svg{width:88%;height:88%;overflow:visible}
.mu .tx{grid-column:6/span 7;display:flex;flex-direction:column;gap:14px}
.mu .who{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.mu h3{font-size:clamp(28px,2.8vw,44px);line-height:1.12;letter-spacing:-.035em}
.mu .when{font-size:14px;color:var(--sub)}
.mu .its{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
.mu .its li{display:inline-flex;align-items:center;gap:8px}
.mu .its i{width:18px;height:18px;border-radius:50%;background:var(--fg);color:var(--cream);font-style:normal;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.sec.light .mu .its i{color:var(--cream)}
.mu .nt{font-size:14.5px;line-height:1.7;color:var(--sub)}
/* 도면: 항공기체 스트립과 같은 문법 — 기체 윤곽 · 세부선 · 개량 부위(금색) · 번호 */
.dw .ma,.tbd .ma{fill:var(--pan);stroke:var(--sub);stroke-width:.06;stroke-linejoin:round}
.dw .ml,.tbd .ml{fill:none;stroke:var(--ln);stroke-width:.045}
.dw .mk,.tbd .mk{fill:var(--acc);stroke:var(--fg);stroke-width:.03;transition:opacity 1s var(--rv-ease) calc(var(--d,0s) + .6s)}
.dw .mw,.tbd .mw{fill:none;stroke:var(--acc);stroke-width:.1;stroke-dasharray:.35 .18}
.dw .md,.tbd .md{stroke:var(--sub);stroke-width:.04}
.dw .mr,.tbd .mr{fill:none;stroke:var(--ln);stroke-width:.05;stroke-dasharray:.3 .3}
.dw .mb,.tbd .mb{stroke:var(--sub);stroke-width:.3;stroke-linecap:round;opacity:.6}
.dw .mn circle,.tbd .mn circle{fill:var(--fg)}
.dw .mn text,.tbd .mn text{fill:var(--cream);font-weight:700;font-family:inherit;text-anchor:middle;dominant-baseline:central}
.sec.light .tbd .mn text,.sec.light .dw .mn text{fill:var(--cream)}
/* 창정비 기종 사진 */
.mx-gal{grid-column:1/-1;margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:36px}
.gc{margin:0;display:flex;flex-direction:column;gap:14px}
.gc .fr{aspect-ratio:3/2;overflow:hidden}
.gc .fr img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--t-img)}
.gc:hover .fr img{transform:scale(1.04)}
.gc figcaption{display:flex;flex-direction:column;gap:6px}
.gc b{font-size:19px;letter-spacing:-.01em}
.gc span{font-size:13.5px;color:var(--sub)}
.mx-oth{grid-column:1/-1}
/* 성능개량 BEFORE → AFTER 사진 */
.mu .pair{margin-top:10px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:16px;align-items:start}
.mu .pair figure{margin:0;display:flex;flex-direction:column;gap:10px}
.mu .pair .fr{aspect-ratio:3/2;overflow:hidden}
.mu .pair img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity 1s var(--rv-ease) calc(var(--d,0s) + .45s),transform 1.3s var(--rv-ease) calc(var(--d,0s) + .45s)}
.mu .pair .pa2 img{transition-delay:calc(var(--d,0s) + .8s)}
.mu .pair .tbd{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--ln0) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,var(--ln0) 1px,transparent 1px) 0 0/20px 20px,var(--pan)}
.mu .pair .tbd svg{width:78%;height:78%;overflow:visible}
.mu .pb .tbd .mk,.mu .pb .tbd .mw,.mu .pb .tbd .mn,.mu .pb .tbd .md{display:none}
.mu .pair figcaption{display:flex;flex-direction:column;gap:4px}
.mu .pair figcaption b{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--sub)}
.mu .pa2 figcaption b{color:var(--acc)}
.mu .pair figcaption span{font-size:13.5px;line-height:1.5}
.mu .pa{align-self:center;margin-top:-28px;color:var(--acc);font-size:24px}
html.rv .mu:not(.in) .pair img{opacity:0;transform:scale(1.05)}
/* 비포 → 애프터 */
.ba{margin-top:10px;padding:22px 24px;background:var(--pan);display:flex;flex-direction:column;gap:14px}
.ba .bl{font-size:13px;font-weight:700;color:var(--sub)}
.ba .gb{position:relative;height:12px;background:var(--ln0)}
.ba .g0,.ba .g1{position:absolute;top:0;bottom:0}
.ba .g0{left:0;background:var(--sub)}
.ba .g1{background:var(--acc);transform-origin:0 50%;transition:transform 1.3s var(--rv-ease) calc(var(--d,0s) + .7s)}
.ba .gv{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;font-size:15px;color:var(--sub)}
.ba .gv b{font-weight:300;font-size:clamp(30px,3vw,46px);letter-spacing:-.04em;color:var(--sub);margin-right:3px}
.ba .gv .to b{color:var(--fg)}
.ba .ar{color:var(--acc);font-size:22px}
.ba .sm{font-size:14px}
.ba .dots{display:flex;gap:6px}
.ba .dots i{width:16px;height:16px;border-radius:50%;background:var(--acc);transition:transform .6s var(--rv-ease) calc(var(--d,0s) + .6s)}
.ba .dots i:nth-child(2){transition-delay:calc(var(--d,0s) + .66s)}.ba .dots i:nth-child(3){transition-delay:calc(var(--d,0s) + .72s)}.ba .dots i:nth-child(4){transition-delay:calc(var(--d,0s) + .78s)}.ba .dots i:nth-child(5){transition-delay:calc(var(--d,0s) + .84s)}.ba .dots i:nth-child(6){transition-delay:calc(var(--d,0s) + .9s)}.ba .dots i:nth-child(7){transition-delay:calc(var(--d,0s) + .96s)}.ba .dots i:nth-child(8){transition-delay:calc(var(--d,0s) + 1.02s)}.ba .dots i:nth-child(9){transition-delay:calc(var(--d,0s) + 1.08s)}.ba .dots i:nth-child(10){transition-delay:calc(var(--d,0s) + 1.14s)}
.ba .sw{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.ba .sw .fr0{color:var(--sub);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--ln)}
.ba .sw .to{font-weight:700;color:var(--fg)}
/* 다음 단계 */
.mx-next{grid-column:1/-1;margin:72px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut)}
.mx-next li{display:flex;flex-direction:column;gap:12px;padding-top:24px;box-shadow:inset 0 1px 0 var(--ln)}
.mx-next .y{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--acc)}
.mx-next b{font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;font-weight:400}
.mx-next .x{font-size:15px;line-height:1.65;color:var(--sub)}
/* 등장 전 상태(스크립트가 있을 때만): 막대 · 경로 · 게이지가 0에서 자람 */
html.rv .mb:not(.in) .fill,html.rv .mx-gantt:not(.in) .gbar,html.rv .mu:not(.in) .ba .g1{transform:scaleX(0)}
html.rv .mx-map:not(.in) .rt{stroke-dashoffset:var(--len)}
html.rv .mx-map:not(.in) .bs{opacity:0}
html.rv .mu:not(.in) .ba .dots i{transform:scale(0)}
html.rv .mu:not(.in) .dw .mk,html.rv .mu:not(.in) .tbd .mk{opacity:0}
@media (max-width:1100px){.mx-life{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}}
@media (max-width:900px){
  .mx-sum{gap:32px 24px}
  .mx-blk,.mx-map,.mx-gantt{margin-top:72px}
  .mb{grid-template-columns:88px 1fr auto;grid-template-areas:"ph hd nv" "tr tr tr" "mt mt mt"}
  .mx-gal{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:28px;margin-top:36px}.gc b{font-size:16px}
  .mu .pair{column-gap:10px}.mu .pa{font-size:18px}
  .mx-map figcaption,.mx-mapsvg{grid-column:1/-1}.mx-mapsvg{margin-top:24px}
  .mx-gantt{--lw:1fr}.mx-gantt .gr{grid-template-columns:1fr;row-gap:10px}.mx-gantt .gx{display:none}
  .mx-life{grid-template-columns:1fr 1fr;margin-top:56px}
  .mu{padding:36px 0;row-gap:24px}.mu .dw,.mu .tx{grid-column:1/-1}.mu .dw{max-height:300px}
  .mx-next{grid-template-columns:1fr;row-gap:32px;margin-top:48px}
}
@media (max-width:600px){.mx-sum,.mx-life{grid-template-columns:1fr}.ms .v b{font-size:40px}}