/* 대한항공 항공우주사업본부 · 공통 디자인 시스템 — 모든 쪽: fonts.css → site.css → css/<쪽>.css(막는 <link>) · 안내 docs/design-system.md
   목차 1 토큰 · 2 기본 · 3 기본 부품 · 4 구역 틀 · 5 카드 · 6 머리글 · 7 모바일 메뉴 · 8 화면 전환 · 9 다음 하위 메뉴 · 10 바닥글
        11 쪽 히어로 · 12 2D 패턴 · 13 ≤900 모음 · 14 움직임(Lenis · data-rv · .scue) · 15 메인 전용 · 16 사업 상세 공통(맨 끝)
   중단점 너비 600 · 900|901(주 경계) · 1080(영문 메인) · 1100(목록 칸 수) · 1180(무인기) · 374(규칙 없음) / 높이 520 · 680 · 720 · 390(검사용, 규칙 없음)
        JS 사본(함께 바꿈): 900|901(site.js KA.MQ · a3d.js) · 680(KA.MQ.stack) · 600 · 900(history.js 무대 폭). 범위 문법은 안 씀
   순서 주의(같은 명시도 · 속성 → 뒤가 이김): 11 .ph → 13 .ph · 11 .ph.pv 비율 → 그 ≤900 · 13은 1~12 뒤 · 16은 맨 끝 */

/* ═══ 1. 토큰 ═══ */
:root{
  color-scheme:dark;
  /* 팔레트(브랜드 가이드) */
  --night:#25282A;--cblue:#4D5055;--cream:#C0B7AB;--cream80:#A19A91;--rose:#6C6463;--smoke:#716C6C;--gold:#83735B;
  --ink80:#444544;
  /* 투명도용 채널: rgb(var(--night-rgb) / .72)는 rgba(37,40,42,.72)와 계산값이 같음 */
  --night-rgb:37 40 42;--cblue-rgb:77 80 85;--cream-rgb:192 183 171;--gold-rgb:131 115 91;
  /* 팔레트 밖 예외: 금색 강조(3D) · 사진 · 영상 위 어둠(글자 그림자 --shade · 가림막 --shade2) · 도면 종이 · 드롭 그림자 */
  --gold-hi:#B5A27F;--gold-hi-rgb:181 162 127;--shade-rgb:20 21 22;--shade2-rgb:29 31 33;--paper-rgb:250 247 242;--drop:rgba(0,0,0,.28);
  /* 선: 어두운 면 --line(옅음) · --line2 / 밝은 면 --lineK */
  --line:rgb(var(--cream-rgb) / .16);--line2:rgb(var(--cream-rgb) / .28);--lineK:rgb(var(--night-rgb) / .3);
  /* 글 역할(같은 값 · 같은 역할일 때만): 라벨 · 구역 제목 · 큰 제목 자간 · 큰 숫자 자간 */
  --fs-lbl:12px;--ls-lbl:.14em;--fs-h2:clamp(34px,4.2vw,60px);--lh-h2:1.12;--ls-h2:-.035em;--ls-h1:-.045em;--ls-num:-.05em;
  /* 틀: 좌우 여백 · 머리글 높이 · 격자 칸 사이 · 히어로 틀 비율 / 겹 순서 */
  --m:48px;--hh:76px;--gut:24px;--hero-ar:4 / 1;
  --z-header:30;--z-menu:40;--z-pt:80;
  /* 앱 뷰어·노치 기기의 안전 영역: 헤더는 상단 여백만큼 키우고, 문서는 그만큼 내려서 시작 */
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--hdr:calc(var(--hh) + var(--sat));
  padding-top:var(--sat);padding-bottom:var(--sab);
  /* 움직임: 곡선 · 자주 쓰는 길이+곡선 짝(--t-*). 곡선 없는 전환(기본 ease)은 그대로 둠 */
  --ease-std:cubic-bezier(.4,0,.2,1);--ease-roll:cubic-bezier(.33,1,.68,1);--ease-line:cubic-bezier(.62,.05,.01,.99);--ease-img:cubic-bezier(.16,1,.3,1);
  --rv-ease:cubic-bezier(.22,1,.36,1);
  --t-ui:.3s var(--ease-std);--t-line:.5s var(--ease-line);--t-roll:.45s var(--ease-roll);--t-img:1s var(--ease-img);--t-rv:1.1s var(--rv-ease);
}

/* ═══ 2. 기본 ═══ */
*{box-sizing:border-box}
html{background:var(--night);scroll-padding-top:calc(var(--hdr) + 24px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:"HanjinGroupSans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}
img{max-width:100%}
h1,h2,h3{text-wrap:balance;font-weight:300;margin:0}
p{text-wrap:pretty;margin:0}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}

/* ═══ 3. 기본 부품 ═══ */
/* 라벨 · 금색 대시 표지 */
.lbl{font-size:var(--fs-lbl);font-weight:700;letter-spacing:var(--ls-lbl);text-transform:uppercase;line-height:1}
.mk{display:inline-flex;align-items:center;gap:14px}
.mk::before{content:"";width:24px;height:1px;background:var(--gold)}
/* 밑줄: .ul(머리글 · 언어 — 금색 선이 걷혔다 그어짐, .on은 늘 그어짐) · .tl(글 밑줄 — 바닥글) */
.ul{position:relative}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform var(--t-line)}
.ul:hover::after,.ul.on::after{transform:scaleX(1);transform-origin:left}
.tl{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--t-line)}
.tl:hover{background-size:100% 1px}
/* 버튼 .btn: 글자 굴림(.roll>span) · 화살표(.arw). 색 — 어두운 면 .b-cream · .b-line / 밝은 면 .b-ink · .b-inkline */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;height:52px;padding:0 20px 0 24px;font-size:15px;font-weight:700;border:0;cursor:pointer;transition:background-color var(--t-ui),color var(--t-ui),box-shadow var(--t-ui)}
.roll{display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden}
.roll>span{display:block;transition:transform var(--t-roll)}
.btn:hover .roll>span{transform:translateY(-100%)}
.arw{display:inline-block;transition:transform var(--t-roll)}
.btn:hover .arw,.row:hover .arw,.card:hover .arw{transform:translateX(6px)}
.b-cream{background:var(--cream);color:var(--night);box-shadow:inset 0 0 0 1px var(--cream)}
.b-cream:hover{background:transparent;color:var(--cream)}
.b-line{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px rgb(var(--cream-rgb) / .4)}
.b-line:hover{box-shadow:inset 0 0 0 1px var(--cream)}
.b-ink{background:var(--night);color:var(--cream);box-shadow:inset 0 0 0 1px var(--night)}
.b-ink:hover{background:transparent;color:var(--night)}
.b-inkline{background:transparent;color:var(--night);box-shadow:inset 0 0 0 1px rgb(var(--night-rgb) / .4)}
.b-inkline:hover{box-shadow:inset 0 0 0 1px var(--night)}

/* ═══ 4. 구역 틀 ═══ */
/* .sec: 12칸 격자 구역(어두움 기본 · .light 크림 면). 구역 색 토큰(.sec 안에서만): --fg 글 · --sub 보조 글 · --ln 윗선 · --ln0 옅은 선 · --acc 강조 · --pan 옅은 판
   — 두 면에서 값만 바뀌는 색은 .light 덮어쓰기 대신 이것으로 */
.sec{padding:160px var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);
  --fg:var(--cream);--sub:var(--cream80);--ln:var(--line2);--ln0:var(--line);--acc:var(--gold);--pan:rgb(var(--cream-rgb) / .06)}
.sec.light{background:var(--cream);color:var(--night);
  --fg:var(--night);--sub:var(--ink80);--ln:var(--lineK);--ln0:rgb(var(--night-rgb) / .12);--pan:rgb(var(--night-rgb) / .05)}
.sec .side{grid-column:1/span 4;align-self:start;padding-top:16px;color:var(--sub)}
.sec .main{grid-column:5/span 8}
.sec .full{grid-column:1/-1}
/* 구역 머리글(.gside)을 왼쪽 칸에 위아래로: 영문 라벨 → 한글 제목(→ 부제). data-own-title 탭은 히어로 글자를 숨김(site.js의 .bare)
   .wide: 오른쪽 칸 없이 제목만 있는 구역은 머리글을 넓게(긴 제목이 좁은 칸에서 여러 줄로 꺾이지 않게) */
.gside{display:flex;flex-direction:column}
.gside :is(h1,h2){margin-top:28px;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--fg)}
.gside p{margin-top:16px;max-width:440px;font-size:15px;line-height:1.6}
.sec .gside.wide{grid-column:1/span 9}
.sec .gside.wide+.main{margin-top:32px}   /* 넓은 머리글 뒤의 설명은 한 줄 아래 오른쪽 칸에 */
@media (max-width:900px){.gside :is(h1,h2){margin-top:20px}.sec .gside.wide{grid-column:1/-1}.sec .gside.wide+.main{margin-top:24px}}
/* 글 크기: 구역 제목 · 도입 · 본문 */
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.lead{font-size:clamp(20px,2vw,30px);line-height:1.5;letter-spacing:-.02em}
.body{font-size:17px;line-height:1.8;color:var(--sub)}

/* ═══ 5. 카드 · 줄 · 칩 ═══ */
/* .card: 사진 틀(.fr) 확대 + 화살표 · .row: 행(.go가 스며 나옴, .row-d 어두운 면 배경) · .chip: 거르개 단추(aria-pressed) */
.card{display:flex;flex-direction:column;cursor:pointer}
.card .fr{overflow:hidden}
.card .fr img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--t-img)}
.card:hover .fr img{transform:scale(1.035)}
.row{transition:background-color var(--t-ui)}
.row .go{opacity:0;transform:translateX(-10px);transition:opacity var(--t-ui),transform var(--t-roll)}
.row:hover .go{opacity:1;transform:none}
.row-d:hover{background:rgb(var(--cblue-rgb) / .32)}
.chip{height:44px;padding:0 18px;border:0;background:transparent;color:var(--cream80);font-size:14px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line2);transition:color .25s var(--ease-std),box-shadow .25s var(--ease-std),background-color .25s}
.chip:hover{color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream)}
.chip[aria-pressed="true"]{background:var(--cream);color:var(--night);box-shadow:inset 0 0 0 1px var(--cream)}

/* ═══ 6. 머리글(.gh — site.js가 그림) ═══ */
.gh{position:fixed;left:0;right:0;top:0;z-index:var(--z-header);height:var(--hdr);padding:var(--sat) var(--m) 0;display:flex;align-items:center;gap:40px;box-shadow:inset 0 -1px 0 var(--line);background:rgb(var(--night-rgb) / .72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gh .logo img{height:30px;width:122px;display:block}
.gh nav{display:flex;gap:44px;font-size:15px;font-weight:700;margin-left:auto;margin-right:auto;align-self:stretch;align-items:stretch}
.gh .util{display:flex;gap:10px;font-size:14px;font-weight:700;letter-spacing:.04em;flex-shrink:0}
.gh .util span{color:var(--rose)}
.gh .menu{display:none;width:44px;height:44px;background:none;border:0;color:var(--cream);align-items:center;justify-content:center;cursor:pointer}
/* 짧은 UI 글자(언어 전환·메뉴·버튼·필터)는 줄바꿈 금지: iOS Safari에서 글자 폭 반올림 차이로 'KO'가 'K/O'로 갈라지는 현상 방지 */
.gh .util,.gh .util a,.gh .gi>.top,.mm .foot a,.mm nav .ms a,.roll,.chip,.more,.hv-lbl>span{white-space:nowrap}
/* 펼침 메뉴 · Beyond Aero 방식: 트리거 아래로 패널이 위→아래로 열리고 항목이 순차로 올라옴(--i: site.js가 항목 순번) */
.gh .gi{position:relative;display:flex;align-items:center}
.gh .gi>.top{display:flex;align-items:center;height:100%}
.gh .gi>.top.ul::after{bottom:calc(50% - 20px)}
.gh .gi.open>.top.ul::after{transform:scaleX(1);transform-origin:left}
.gh .dd{position:absolute;left:-28px;top:100%;min-width:260px;visibility:hidden;pointer-events:none;clip-path:inset(0 0 100% 0);transition:clip-path var(--t-line),visibility 0s linear .5s}
.gh .dd-in{padding:22px 0 18px;background:var(--night);box-shadow:inset 0 0 0 1px var(--line2),0 24px 48px var(--drop);display:flex;flex-direction:column}
.gh .gi.open .dd{visibility:visible;pointer-events:auto;clip-path:inset(0 -60px -60px -60px);transition:clip-path .6s var(--ease-line),visibility 0s}
.gh .dd-h{padding:0 28px 14px;color:var(--cream80);opacity:0;transition:opacity var(--t-ui)}
.gh .dd a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 28px;font-size:15px;font-weight:300;letter-spacing:-.01em;color:var(--cream80);opacity:0;transform:translateY(10px);transition:opacity .25s var(--ease-std),transform var(--t-roll),color var(--t-ui),background-color var(--t-ui)}
.gh .dd a i{display:block;width:0;height:1px;background:var(--gold);transition:width var(--t-line)}
.gh .dd a:hover,.gh .dd a:focus-visible{color:var(--cream);background:rgb(var(--cream-rgb) / .05)}
.gh .dd a:hover i{width:24px}
.gh .dd a.on{color:var(--cream);font-weight:700}
.gh .dd a.on i{width:24px}
.gh .dd a.x{margin-top:8px;padding-top:15px;box-shadow:inset 0 1px 0 var(--line);font-size:13.5px;font-weight:700;justify-content:flex-start;gap:8px}
.gh .gi.open .dd-h{opacity:1;transition-delay:.1s}
.gh .gi.open .dd a{opacity:1;transform:none;transition-delay:calc(.14s + var(--i) * .045s),calc(.14s + var(--i) * .045s),0s,0s}

/* ═══ 7. 모바일 메뉴(.mm — site.js가 그림, ≤900에서 머리글 .menu로 엶) ═══ */
/* 주의: mro.css의 .ms(요약 칸)가 .mm nav .ms에도 걸려 MRO/U 쪽에서만 하위 목록이 세로 · 위 여백 24px — 지금 화면 그대로라 둠 */
.mm{position:fixed;inset:0;z-index:var(--z-menu);background:var(--night);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);opacity:0;visibility:hidden;transition:opacity var(--t-ui),visibility 0s linear .3s;overflow-y:auto}
.mm.open{opacity:1;visibility:visible;transition-delay:0s}
.mm .bar{height:60px;padding:0 8px 0 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 -1px 0 var(--line)}
.mm .bar img{height:24px;width:98px;display:block}
.mm .close{width:44px;height:44px;background:none;border:0;color:var(--cream);display:flex;align-items:center;justify-content:center}
.mm nav{padding:20px 20px 0;display:flex;flex-direction:column}
.mm nav a{display:flex;align-items:baseline;gap:16px;height:68px;box-shadow:inset 0 -1px 0 var(--line);font-size:32px;letter-spacing:-.035em;line-height:68px}
.mm nav a .lbl{color:var(--cream80);width:24px}
.mm .foot{margin-top:auto;padding:0 20px 28px;display:flex;justify-content:space-between;font-size:13px;color:var(--cream80)}
/* 메뉴 묶음: 큰 제목(.mt) + 하위 목록(.ms) */
.mm nav .mg{box-shadow:inset 0 -1px 0 var(--line);padding-bottom:14px}
.mm nav .mt{display:flex;align-items:baseline;gap:16px;height:64px;font-size:30px;letter-spacing:-.035em;line-height:64px;box-shadow:none}
.mm nav .mt .lbl{color:var(--cream80);width:24px}
.mm nav .ms{display:flex;flex-wrap:wrap;gap:4px 18px;padding-left:40px}
.mm nav .ms a{display:inline-block;height:auto;box-shadow:none;font-size:14px;letter-spacing:0;line-height:32px;color:var(--cream80)}

/* ═══ 8. 화면 전환(site.js가 html.ka-leave · ka-jump · ka-swap, 구역에 .ka-in) ═══ */
.pt{position:fixed;inset:0;z-index:var(--z-pt);background:var(--night);pointer-events:none;opacity:0;transition:opacity .55s var(--ease-std)}
html.ka-leave .pt{opacity:1;pointer-events:auto}
/* 같은 페이지 안의 화면 전환: 짧게 가렸다가 목적지에서 다시 보여줌 */
html.ka-jump .pt{opacity:1;pointer-events:auto;transition-duration:.24s}
html.ka-leave main,html.ka-leave .gf{filter:blur(10px);opacity:.5;transition:filter .55s var(--ease-std),opacity .55s var(--ease-std)}
@keyframes ka-enter{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:none}}
@keyframes ka-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ka-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
main>section:first-child{animation:ka-enter .8s var(--ease-std) both}
.ph img{animation:ka-wipe 1.15s var(--ease-line) .1s both}
/* 순차 등장이 켜지면(html.rv) 14가 끔(명시도가 높아 순서와 무관) */
.sec.ka-in>*{animation:ka-rise .85s var(--ease-roll) both}
.sec.ka-in>*:nth-child(2){animation-delay:.06s}.sec.ka-in>*:nth-child(3){animation-delay:.12s}.sec.ka-in>*:nth-child(n+4){animation-delay:.18s}
html.ka-swap main>.sec:not([hidden]),html.ka-swap .subnext{opacity:0;filter:blur(8px);transform:translateY(-12px);transition:opacity .35s var(--ease-std),filter .35s var(--ease-std),transform .35s var(--ease-std)}
@media (prefers-reduced-motion:reduce){main>section:first-child,.ph img,.ph .in>*,.sec.ka-in>*{animation:none!important}.gh .dd,.gh .dd a,.gh .dd-h{transition:none!important}}

/* ═══ 9. 다음 하위 메뉴(.subnext — 회사소개 · 뉴스룸 · 인재채용 탭 아래) ═══ */
.subnext{margin:0 var(--m);padding:40px 0 64px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;box-shadow:inset 0 1px 0 var(--line2)}
.subnext .ct{color:var(--cream80)}
.subnext .nx{display:flex;align-items:baseline;gap:20px;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em}
.subnext .nx .lbl{color:var(--cream80);letter-spacing:var(--ls-lbl)}
.subnext .nx .arw{align-self:center}
.subnext .nx .arw svg{width:28px;height:28px}
.subnext .nx:hover .arw{transform:translateX(8px)}
/* 이름 밑줄은 .tl과 같은 모양이지만 부모(.nx)에 올릴 때 그어짐 */
.subnext .nx .nm{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--t-line)}
.subnext .nx:hover .nm{background-size:100% 1px}
@media (max-width:900px){.subnext{padding:28px 0 44px}.subnext .nx{gap:12px}.subnext .nx .lbl{display:none}}

/* ═══ 10. 바닥글(.gf — site.js가 그림, 2D 패턴은 12) ═══ */
.gf{padding:72px var(--m) 40px;box-shadow:inset 0 1px 0 var(--line);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:56px;font-size:14px;color:var(--cream80)}
.gf .brand{grid-column:1/-1}
.gf .brand img{height:34px;width:138px;display:block}
.gf .col{grid-column:span 2;display:flex;flex-direction:column;gap:12px}
.gf .col .h{font-size:13px;font-weight:700;color:var(--cream);margin-bottom:6px}
.gf .col a{align-self:flex-start}
.gf .sns{grid-column:1/-1;display:flex;gap:8px}
.gf .sns a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line2);color:var(--cream);transition:box-shadow var(--t-ui)}
.gf .sns a:hover{box-shadow:inset 0 0 0 1px var(--cream)}
.gf .legal{grid-column:1/-1;padding-top:24px;box-shadow:inset 0 1px 0 var(--line);display:flex;flex-direction:column;gap:10px;font-size:12.5px;line-height:1.7}
.gf .legal .r{display:flex;flex-wrap:wrap;gap:4px 16px}
.gf .legal b{color:var(--cream);font-weight:700}

/* ═══ 11. 쪽 히어로(.ph — 하위 페이지 맨 위, 사진 또는 영상 .pv) ═══ */
.ph{position:relative;margin-top:var(--hh);height:clamp(260px,30vw,520px);overflow:hidden;background:var(--night)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--night-rgb) / .88) 0,rgb(var(--night-rgb) / .55) 45%,rgb(var(--night-rgb) / .15) 80%),linear-gradient(0deg,rgb(var(--night-rgb) / .85) 0,rgb(var(--night-rgb) / 0) 60%)}
.ph .in{position:absolute;left:var(--m);right:var(--m);bottom:clamp(28px,3.4vw,56px);z-index:1;display:flex;flex-direction:column;gap:20px}
.ph.bare .in{display:none}
.ph .lbl{color:var(--cream80)}
.ph h1{font-size:clamp(40px,6vw,96px);line-height:1;letter-spacing:var(--ls-h1)}
.ph p{max-width:640px;font-size:17px;line-height:1.7;color:var(--cream80)}
/* 뉴스룸·채용 탭: 같은 좌우 여백, 긴 소개문도 히어로 안에 배치 */
@media (min-width:901px){
  .ph[data-hero-tabs]{height:auto;min-height:clamp(420px,30vw,520px);display:flex;align-items:flex-start}
  .ph[data-hero-tabs] .in{position:relative;left:auto;right:auto;bottom:auto;width:100%;padding:64px var(--m) clamp(28px,3.4vw,56px)}
}
/* 영상 히어로 .pv: MRO/U와 같은 4:1 틀을 비율 유지 확대(cover)로 채움. 5:1 영상도 위아래 여백 없이 표시. */
.ph.pv{height:auto!important;aspect-ratio:var(--hero-ar)}
.ph.pv>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;background:var(--night);animation:ka-wipe 1.15s var(--ease-line) .1s both}
/* .w: 넓은 영상(3:1 이상)은 site.js가 붙임. 항공기체 · MRO/U는 4:1 틀에 맞춰 잘리므로 HTML에 직접 달아 무인기와 같은 크기로 영상 위에 */
.ph.pv.w .in{gap:12px;bottom:clamp(16px,2.2vw,40px)}
/* 4:1로 잘라 쓰는 영상(항공기체 · MRO/U)은 영상 속 자막 · 라벨이 글자 뒤를 지나가므로, 글자 묶음 바로 뒤만 가장자리를 풀어 흐리게 */
@media (min-width:901px){
  .ph.pv.w:not(:has(>video[data-ar="5/1"])) .in{right:auto;max-width:calc(100% - var(--m) * 2)}
  .ph.pv.w:not(:has(>video[data-ar="5/1"])) .in::before{content:"";position:absolute;inset:-18px -36px;z-index:-1;pointer-events:none;background:rgb(var(--night-rgb) / .2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    -webkit-mask:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent),linear-gradient(transparent,#000 18px,#000 calc(100% - 18px),transparent);-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent),linear-gradient(transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-composite:intersect}
}
.ph.pv.w h1{font-size:clamp(28px,3.4vw,60px)}
.ph.pv.w p{font-size:clamp(13px,1vw,16px);line-height:1.6}
/* 소리 켜기 단추(site.js가 data-sound 영상에 붙임) */
.ph .snd{position:absolute;right:var(--m);bottom:clamp(16px,2.2vw,40px);z-index:2;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;background:rgb(var(--night-rgb) / .55);color:var(--cream);border:0;box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;transition:box-shadow var(--t-ui),background-color var(--t-ui)}
.ph .snd:hover{box-shadow:inset 0 0 0 1px var(--cream);background:rgb(var(--night-rgb) / .8)}
@media (max-width:900px){
  .ph.pv{aspect-ratio:auto}
  .ph.pv>video{position:relative;inset:auto;height:auto}
  .ph.pv>video,.ph.pv::after{aspect-ratio:var(--hero-ar)}
  .ph.pv.w h1{font-size:34px}
  .ph .snd{top:12px;bottom:auto;right:12px;height:34px;padding:0 12px}
  .ph .snd span{display:none}
}
/* 영상 확대와 별개로 글자·버튼의 MRO/U 기준 하단 간격을 유지. --band는 폭의 2.5%, 메인 히어로는 15에서 0. */
.ph.pv:has(>video[data-ar="5/1"]),.ph.pv.w{container-type:inline-size;--band:2.5cqw}
@media (min-width:901px){
  .ph.pv:has(>video[data-ar="5/1"]) .in,.ph.pv.w .in{bottom:calc(clamp(16px,2.2vw,40px) + var(--band))}
  .ph.pv.w .in p{min-height:3.2em}   /* 설명이 한 줄인 페이지도 두 줄 자리를 잡아 세 페이지 제목 높이를 맞춤 */
  .ph.pv:has(>video[data-ar="5/1"]) .snd{bottom:calc(clamp(16px,2.2vw,40px) + var(--band))}
}
@media (max-width:900px){
  .ph.pv:has(>video[data-ar="5/1"]) .snd{top:calc(8px + var(--band));height:30px;padding:0 10px}
}

/* ═══ 12. 2D 패턴 · Brand Guidelines 2.5 (Charcoal: 어두운 면 위 톤온톤, 크림 면 위 Beige 톤) ═══
   pattern2d.svg: 원본 타일을 이음매 없이 이어 그린 한 장(tools/pattern/build.py). 고유 크기가 없어 요소 크기 그대로 그림 → 반복 안 함
   크기는 정수 px로(round) — 소수 px이면 Chromium이 두 층 마스크를 1px 늘려 선이 흐려짐. 연혁 카드는 구운 pattern2d-hx.webp(history.css) */
.pat-v,.pat-w,.gf{position:relative;isolation:isolate}
.pat-v::before,.pat-w::before,.gf::before{content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--cblue);opacity:.42;
  -webkit-mask-image:url("../img/pattern2d.svg"),var(--pat-crop);mask-image:url("../img/pattern2d.svg"),var(--pat-crop);
  -webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
.light.pat-v::before,.light.pat-w::before,.light .pat-w::before{background:var(--rose);opacity:.16}
/* straight crop (vertical) — 섹션 좌측 빈 칼럼(여백 + 12칸 격자의 3칸 + 칸 사이 하나: 264px = 칸 사이 24px × 11) */
.pat-v::before{left:0;top:0;width:calc(var(--m) + (100% - 2*var(--m) - 264px)/4 + 24px);height:min(100%,720px);
  width:round(var(--m) + (100% - 2*var(--m) - 264px)/4 + 24px,1px);height:round(min(100%,720px),1px);
  --pat-crop:linear-gradient(180deg,#000 0,#000 45%,transparent 100%)}
/* wave crop (horizontal) — 패턴 자체의 곡선을 따라 잘라낸 하단 띠 */
.pat-w::before,.gf::before{left:0;right:0;bottom:0;height:78%;height:round(78%,1px);
  --pat-crop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 150C170 60 330 40 520 110S880 210 1040 120 1200 60 1200 60V400H0Z'/%3E%3C/svg%3E")}
.gf::before{height:62%;height:round(62%,1px);opacity:.34}
.cta.pat-w::before{height:56%;height:round(56%,1px)}

/* ═══ 13. ≤900 모음(1~12 뒤에 있어야 함) ═══ */
@media (max-width:900px){
  /* 가로로 눕힌 휴대폰: 노치 쪽 안전 영역만큼 좌우 여백 확보 */
  :root{--m:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--hh:60px}
  .pat-v::before{display:none}
  .gh{gap:16px}
  .gh nav{display:none}
  .gh .util{margin-left:auto}
  .gh .menu{display:flex}
  .gh .logo img{height:24px;width:98px}
  .ph{height:auto;min-height:0}
  .ph img{position:relative;height:auto;aspect-ratio:1800/496}
  .ph::after{bottom:auto;height:auto;aspect-ratio:1800/496}
  .ph .in{position:relative;left:auto;right:auto;bottom:auto;padding:28px var(--m) 8px}
  .ph h1{font-size:40px}
  .ph p{font-size:15px}
  .sec{padding:88px var(--m);grid-template-columns:1fr}
  .sec .side,.sec .main,.sec .full{grid-column:1/-1}
  .sec .main{margin-top:24px}
  .body{font-size:15.5px}
  .gf{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .gf .brand{grid-column:1/-1}
  .gf .col{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::after{transition:none!important}}

/* ═══ 14. 움직임 ═══ */
/* Lenis 관성 스크롤(scroll-fx.js · 한화에어로스페이스 참조): 라이브러리가 붙이는 클래스 */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
/* 순차 등장 · Beyond Aero(/one) 참조 — 라벨 → 제목 → 본문 → 그림 → 세부 항목, 흐림에서 또렷하게 (모든 페이지)
   scroll-fx.js가 data-rv(t · fade · img · rule · fl)와 지연 --d를 달고, 기준선을 넘으면 .in, 끝나면 .rv-end(요소 본래의 호버 전환이 그대로 돌아옴) */
html.rv-now [data-rv],html.rv-now [data-rv] *,html.rv-now [data-rv]::before{transition:none!important}
/* 스크립트가 준비되기 전 첫 화면에 본문이 잠깐 비쳤다 숨는 일이 없도록 잠시 가려 둠(스크립트가 없으면 1.2초 뒤 그대로 보임) */
@keyframes rv-hold{0%{opacity:0}}
@media (prefers-reduced-motion:no-preference){html:not(.rv) main>.sec{animation:rv-hold 1.2s steps(1,end) both}}
html.rv [data-rv]:not(.rv-end){transition:opacity var(--t-rv) var(--d,0s),filter var(--t-rv) var(--d,0s),transform 1.2s var(--rv-ease) var(--d,0s)}
html.rv [data-rv="t"]:not(.in){opacity:0;filter:blur(10px);transform:translateY(16px)}
html.rv [data-rv="fade"]:not(.in){opacity:0}
html.rv [data-rv="fade"]:not(.rv-end){transition-duration:1.6s}
/* 그림: 틀(배경)이 먼저 나타나고, 안의 사진 · 영상은 조금 늦게 살짝 당겨지며 */
html.rv [data-rv="img"]:not(.in){opacity:0}
html.rv [data-rv="img"]:not(.rv-end) :is(img,video){transition:opacity 1.2s var(--rv-ease) calc(var(--d,0s) + .22s),transform 1.4s var(--rv-ease) calc(var(--d,0s) + .12s)}
html.rv [data-rv="img"]:not(.in) :is(img,video){opacity:0;transform:scale(1.06)}
/* 선: 윗선이 왼쪽부터 그어지고 글은 그 뒤 (선 색은 원래 윗선 색을 그대로 이어받음 — scroll-fx.js가 --rv-line · --rv-lo) */
html.rv [data-rv="rule"]{position:relative;box-shadow:none!important}
html.rv [data-rv="rule"]::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rv-line,currentColor);opacity:var(--rv-lo,.28);transform-origin:0 50%;transition:transform var(--t-rv) var(--d,0s);pointer-events:none}
html.rv [data-rv="rule"]:not(.in)::before{transform:scaleX(0)}
html.rv [data-rv="rule"]:not(.in){opacity:0;filter:blur(8px)}
html.rv [data-rv="rule"]:not(.rv-end){transition:opacity 1s var(--rv-ease) calc(var(--d,0s) + .25s),filter 1s var(--rv-ease) calc(var(--d,0s) + .25s)}
/* 스트립 카드: 하나씩(복제 카드 포함) */
html.rv [data-rv="fl"]:not(.rv-end) .fl{transition:opacity 1s var(--rv-ease) calc(var(--d,0s) + var(--i,0) * .09s),filter 1s var(--rv-ease) calc(var(--d,0s) + var(--i,0) * .09s),transform var(--t-rv) calc(var(--d,0s) + var(--i,0) * .09s)}
html.rv [data-rv="fl"]:not(.in) .fl{opacity:0;filter:blur(8px);transform:translateY(22px)}
html.rv [data-rv="fl"] .fl:nth-child(8n+2){--i:1}html.rv [data-rv="fl"] .fl:nth-child(8n+3){--i:2}html.rv [data-rv="fl"] .fl:nth-child(8n+4){--i:3}html.rv [data-rv="fl"] .fl:nth-child(8n+5){--i:4}
html.rv [data-rv="fl"] .fl:nth-child(8n+6){--i:5}html.rv [data-rv="fl"] .fl:nth-child(8n+7){--i:6}html.rv [data-rv="fl"] .fl:nth-child(8n){--i:7}
/* 하위 화면 전환 때의 묶음 떠오름은 순차 등장이 대신함 */
html.rv .sec.ka-in>*{animation:none}
/* 하위 페이지 히어로: 영상 · 사진이 먼저 열리고 → 라벨 → 제목 → 설명 → 소리 버튼 순으로, 흐림에서 또렷하게 */
@keyframes rv-rise{from{opacity:0;filter:blur(10px);transform:translateY(16px)}to{opacity:1;filter:none;transform:none}}
.ph .in>*{animation:rv-rise var(--t-rv) both}
.ph .in>*:nth-child(1){animation-delay:.55s}.ph .in>*:nth-child(2){animation-delay:.75s}.ph .in>*:nth-child(3){animation-delay:1.05s}.ph .in>*:nth-child(n+4){animation-delay:1.25s}
.ph .snd{animation:rv-rise var(--t-rv) 1.35s both}
@media (prefers-reduced-motion:reduce){html.rv [data-rv],html.rv [data-rv] *{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}.ph .snd{animation:none!important}}
/* 히어로 맨 아래 스크롤 안내(site.js가 붙임): 세로선을 따라 짧은 빛이 되풀이해 내려감 · 글자가 뜬 뒤 나타나고 조금 내리면 사라짐(.off · 멈춤 .idle) */
.scue{position:absolute;left:0;right:0;bottom:clamp(14px,1.5vw,26px);z-index:3;width:max-content;margin:0 auto;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:var(--cream);font:inherit;cursor:pointer;transition:opacity .5s var(--ease-std)}
.scue>*{animation:rv-rise var(--t-rv) 1.5s both}
.scue>*+*{animation-delay:1.62s}
.scue-t{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;line-height:1;padding-left:.26em;text-shadow:0 0 12px rgb(var(--shade-rgb) / .6)}
.scue-l{position:relative;display:block;width:1px;height:clamp(30px,3vw,48px);overflow:hidden;background:rgb(var(--cream-rgb) / .3)}
.scue-l i{position:absolute;left:0;top:0;width:1px;height:45%;background:var(--cream);animation:scue 1.9s cubic-bezier(.65,0,.35,1) infinite}   /* 곡선은 이 자리만 */
@keyframes scue{0%{transform:translateY(-100%)}70%,100%{transform:translateY(230%)}}
.scue:hover .scue-l{background:rgb(var(--cream-rgb) / .55)}
.scue:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.scue.off{opacity:0;pointer-events:none}.scue.off.idle .scue-l i{animation-play-state:paused}
.ph .scue>*{animation-delay:1.3s}.ph .scue>*+*{animation-delay:1.42s}
/* 히어로 설명은 가운데 스크롤 안내에 닿지 않는 폭까지 */
@media (min-width:901px){.ph .in p{max-width:min(640px,calc(50vw - var(--m) - 60px))}}
@media (max-width:900px){
  /* 폰: 글자가 영상 아래로 내려오므로 맨 아래 한가운데에 작게, 글자와 겹치지 않게 자리를 둠 */
  .scue{bottom:8px;gap:0;padding:4px 10px}.scue-t{display:none}.scue-l{height:24px}
  .ph:not(.bare) .in{padding-bottom:44px}
}
@media (prefers-reduced-motion:reduce){.scue>*,.scue-l i{animation:none}.scue-l i{transform:translateY(60%)}}

/* ═══ 15. 메인 전용(index · index-en — 나머지는 css/index.css) ═══ */
/* 사업 패널 미디어: 패널이 올라오는 동안 좌우 여백 → 화면 가득(scroll-fx.js가 --open) */
@property --open{syntax:'<number>';inherits:false;initial-value:1}   /* 펼침 값은 미디어 자신만 씀 — 안의 카드 · 도면에 물려주지 않음 */
.biz .bp .fleet{clip-path:inset(0 calc((1 - var(--open,1)) * var(--m)))}

/* ═══ 16. 사업 상세 공통 — 파일 맨 끝(site.css의 다른 모든 규칙 뒤, 쪽 CSS 앞) ═══ */
/* 핵심 이력 목록 .bz-pf(항공기체 — 밝은 구역, 색은 구역 토큰) */
.bz-pf{grid-column:1/-1;margin:88px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut)}
.bz-pf li{display:flex;flex-direction:column;gap:18px;padding-top:24px;box-shadow:inset 0 1px 0 var(--ln)}
.bz-pf .y{font-size:clamp(34px,3.6vw,56px);font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--fg)}
.bz-pf .x{font-size:17px;line-height:1.6;color:var(--sub)}
/* 버튼 줄: .bz-act(항공기체 · MRO/U) · .uav-act(무인기) · .cta-act(메인 문의) — ≤900 나란히 늘림, ≤600 위아래로. 마크업을 바꾸게 되면 한 이름(.act)으로 */
.bz-act,.uav-act,.cta-act{margin-top:48px;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:900px){.bz-pf{grid-template-columns:1fr;row-gap:32px;margin-top:48px}.bz-act .btn,.uav-act .btn,.cta-act .btn{flex:1;min-width:0}}
@media (max-width:600px){.bz-act,.uav-act,.cta-act{flex-direction:column}.bz-act .btn,.uav-act .btn,.cta-act .btn{flex:none;width:100%}}