/* =========================================================
   ADMIRACLE — About
   ========================================================= */
:root {
  --navy-900: #020b1c;
  --navy-800: #04142e;
  --navy-700: #0a2347;
  --navy-500: #2a4a73;
  --white: #fff;
  --on: #fff; --on-rgb: 255, 255, 255;
  --dim: rgba(var(--on-rgb), 0.32);
  --mute: rgba(var(--on-rgb), 0.6);
  --line: rgba(var(--on-rgb), 0.12);
  --accent: #6ea8ff;
  --ink: #191f28;
  --ink-2: #4e5968;
  --ink-3: #8b95a1;
  --paper: #f7f8fa;
  --gnb-h: 64px;
  --sub-h: 0px;
  --gutter: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 테마 색(블루). 같은 값이 src/components/adm/adm.css 와
     public/b2b/index.html 에도 있다 — 바꾸면 같이 바꾼다. */
  --hero-1: #010814; --hero-2: #03142f; --hero-3: #0c2b55;
  --accent-rgb: 110, 168, 255;
  --blue: #3182f6; --blue-hover: #1b6fe0; --blue-rgb: 49, 130, 246;
  --glass: rgba(2, 11, 28, 0.72);
  --shadow-rgb: 0, 27, 55;
  --footer-base: #1d2a4a; --footer-blob1: #7d86a8; --footer-blob2: #a99aae; --footer-blob3: #8d7f9e; --footer-blob4: #243f6b;
  --logo-filter: none;
  /* 남색 ↔ 밝은 섹션 전환. OKLab 에서 양끝이 평평한 S 곡선으로 나눈 13단계라 띠가 보이지 않는다. */
  --blend-n2p: linear-gradient(180deg, #020b1c 0%, #040e1f 8.3%, #0b1829 16.7%, #1c2738 25%, #323d4d 33.3%, #4e5866 41.7%, #6e7783 50%, #8f96a0 58.3%, #b0b5bd 66.7%, #cdd0d6 75%, #e4e6e9 83.3%, #f2f3f6 91.7%, #f7f8fa 100%);
  --blend-p2n: linear-gradient(180deg, #f7f8fa 0%, #f2f3f6 8.3%, #e4e6e9 16.7%, #cdd0d6 25%, #b0b5bd 33.3%, #8f96a0 41.7%, #6e7783 50%, #4e5866 58.3%, #323d4d 66.7%, #1c2738 75%, #0b1829 83.3%, #040e1f 91.7%, #020b1c 100%);
  --belief-bg: linear-gradient(180deg, #2a4a73 0vh, #28476f 10vh, #234065 20vh, #1b3556 30vh, #132945 40vh, #0b1d35 50vh, #051327 60vh, #030d1f 70vh, #020b1c 80vh);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: var(--navy-900);
  color: var(--on);
  letter-spacing: -0.02em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
strong { font-weight: 700; }
em { font-style: normal; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
br.pc { display: inline; }
@media (max-width: 768px) { br.pc { display: none; } }

/* ---------- GNB ---------- */
.gnb {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--glass);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  transition: transform 0.4s var(--ease);
}
/* 맨 위에서는 헤더 바탕을 비워 첫 화면과 이어 보이게 하고, 내릴수록 반투명 바탕이 차오른다.
   스크롤 연동 애니메이션을 모르는 브라우저는 예전처럼 처음부터 바탕이 있다. */
@supports (animation-timeline: scroll()) {
  .gnb, .subnav--page { animation: gnb-fill linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
}
@keyframes gnb-fill { from { background-color: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.gnb__inner {
  height: var(--gnb-h);
  max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.logo { display: inline-flex; align-items: center; justify-self: start; transition: opacity 0.2s; }
.logo:hover { opacity: 0.8; }
.logo img { display: block; height: 26px; width: auto; filter: var(--logo-filter); }
@media (max-width: 768px) { .logo img { height: 22px; } }
.gnb__menu { display: flex; gap: 40px; font-size: 16px; font-weight: 600; }
.gnb__menu a { opacity: 0.85; transition: opacity 0.2s; }
.gnb__menu a:hover, .gnb__menu a.is-active { opacity: 1; }
.gnb__right { justify-self: end; display: flex; align-items: center; gap: 20px; font-size: 15px; font-weight: 600; }
.btn-pill { padding: 10px 16px; border-radius: 10px; background: rgba(var(--on-rgb), 0.1); transition: background 0.2s; }
.btn-pill:hover { background: rgba(var(--on-rgb), 0.18); }

/* 하위 탭(About · Our Business) */
.subnav {
  height: var(--sub-h);
  display: flex; justify-content: center; align-items: center; gap: 6px;
  border-top: 1px solid var(--line);
}
.subnav__tab {
  position: relative; padding: 8px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--mute);
  transition: color 0.25s, background 0.25s;
}
.subnav__tab:hover { color: var(--on); }
.subnav__tab.is-active { color: var(--navy-900); background: var(--on); }

/* 모바일: 메뉴를 두 번째 줄로 내려 계속 보이게 한다 */
@media (max-width: 900px) {
  :root { --gnb-h: 104px; }
  .gnb__inner { grid-template-columns: 1fr auto; grid-template-rows: 64px 40px; }
  .gnb__menu { grid-column: 1 / -1; grid-row: 2; gap: 24px; font-size: 14px; align-items: center; overflow-x: auto; }
  .lang { display: none; }
}


/* ---------- 공통 타이포 ---------- */
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 24px; }
.eyebrow--dark { color: var(--blue); }
.display { font-size: clamp(34px, 5.2vw, 68px); line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; }
.display em { color: var(--dim); }
.display--dark { color: var(--ink); }
.lead { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.65; color: var(--mute); font-weight: 500; margin-bottom: 40px; }
/* 한글 줄바꿈 — 제목은 줄 길이를 고르게, 문단은 마지막 줄에 단어 하나만 남지 않게(지원 브라우저에서).
   한 글자 낱말(그·더)은 HTML 에서   로 뒷말에 붙여 줄 끝에 홀로 남지 않게 한다. */
h1, h2, h3, .chain__row p, .problem__list p { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }


/* ---------- 01 HERO ---------- */
.hero {
  position: relative; height: 100vh; min-height: 640px; overflow: hidden;
  background: linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 45%, var(--hero-3) 80%, var(--navy-500) 100%);
}
/* 아래 20%에서 서서히 사라진다 — 스크롤해 지구본이 떠오를 때 히어로 끝에서 수평으로 잘려 보이지 않게 */
#globe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, rgba(0, 0, 0, 0.8) 88%, rgba(0, 0, 0, 0.42) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, rgba(0, 0, 0, 0.8) 88%, rgba(0, 0, 0, 0.42) 94%, transparent 100%);
}
.hero__copy {
  position: absolute; left: 0; right: 0; top: calc(var(--gnb-h) + var(--sub-h) + 10vh);
  text-align: center; padding: 0 var(--gutter);
}
.hero__title { font-size: clamp(30px, 5.6vw, 76px); line-height: 1.28; font-weight: 700; letter-spacing: -0.04em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); animation: rise 1.2s var(--ease) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.14s; }
.hero .eyebrow { opacity: 0; animation: fade 1s 0.5s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }

/* ---------- 02 BELIEF (스크롤 스크럽) ---------- */
/* 히어로 맨 아래 색(--navy-500)에서 이어 받아 어두워진다 — 경계선이 생기지 않게 */
.belief { height: 260vh; background: var(--belief-bg); }
.belief__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
}
.scrub { font-size: clamp(34px, 5.4vw, 76px); line-height: 1.32; font-weight: 700; letter-spacing: -0.04em; }
.scrub .w { color: rgba(var(--on-rgb), 0.14); transition: color 0.35s; }
.scrub .w.on { color: var(--on); }
.scrub--center { text-align: center; }

/* ---------- 03 PROBLEM ---------- */
/* 장면(.scene · .scene__pin)의 모양은 site.css. 장면 안 큰 제목은 화면 높이에도 맞춘다(홈 · About 공용) */
.scene .display { font-size: clamp(30px, min(4.2vw, 6.2vh), 58px); }
.problem { background: var(--navy-900); }
.problem .lead { font-size: clamp(16px, min(1.5vw, 2.3vh), 21px); margin-bottom: clamp(12px, 2.4vh, 24px); }
.problem__list {
  margin-top: clamp(24px, 5vh, 60px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.problem__list li {
  overflow: hidden; border-radius: 24px;
  background: linear-gradient(160deg, rgba(var(--on-rgb), 0.07), rgba(var(--on-rgb), 0.02));
  border: 1px solid var(--line);
}
.problem__img { position: relative; height: clamp(130px, 23vh, 250px); overflow: hidden; }
.problem__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.85) brightness(0.82);
  transition: transform 1.2s var(--ease), filter 0.6s;
}
/* 사진 아래쪽이 카드 배경으로 자연스럽게 스며들도록 */
.problem__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 11, 28, 0) 45%, rgba(10, 18, 34, 0.85) 100%);
}
.problem__list li:hover .problem__img img { transform: scale(1.06); filter: saturate(1) brightness(0.95); }
.problem__body { padding: 4px 26px clamp(20px, 3vh, 30px); }
.problem__list .num { display: block; font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.problem__list p { font-size: clamp(15px, min(1.3vw, 2vh), 18px); line-height: 1.6; color: var(--mute); }
.problem__list strong { color: var(--on); }
.problem__close { margin-top: clamp(24px, 5vh, 60px); font-size: clamp(18px, min(2vw, 3.1vh), 28px); line-height: 1.55; font-weight: 600; color: var(--mute); }
.problem__close strong { color: var(--on); }
/* 휴대폰·태블릿: 사진을 왼쪽 썸네일로 줄인 가로 카드 — 세 장이 한 화면(멈춘 장면)에 들어온다 */
@media (max-width: 900px) {
  .problem__list { grid-template-columns: 1fr; gap: 10px; }
  .problem__list li { display: grid; grid-template-columns: 30% 1fr; border-radius: 18px; }
  .problem__img { height: auto; }
  .problem__img img { position: absolute; inset: 0; }
  .problem__img::after { background: linear-gradient(90deg, rgba(2, 11, 28, 0) 45%, rgba(10, 18, 34, 0.85) 100%); }
  .problem__body { padding: 14px 16px; align-self: center; }
  .problem__list .num { font-size: 12px; margin-bottom: 4px; }
  .problem__list p { font-size: 14px; line-height: 1.55; }
}
@media (max-width: 600px) {
  .scene .display { font-size: 26px; }
  .problem .lead { font-size: 15px; }
  .problem__close { font-size: 16px; }
}

/* ---------- 04 VERBS (스티키) ---------- */
.verbs { height: 420vh; background: linear-gradient(180deg, var(--navy-900), var(--navy-800) 30%, var(--navy-800) 70%, var(--navy-900)); }
.verbs__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.verbs__inner {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: calc(var(--gnb-h) + var(--sub-h)) var(--gutter) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center;
}
.verbs__list li {
  font-size: clamp(40px, min(6.6vw, 10.4vh), 96px); line-height: 1.18; font-weight: 800; letter-spacing: -0.045em;
  color: rgba(var(--on-rgb), 0.13); transition: color 0.6s var(--ease), transform 0.6s var(--ease);
  transform-origin: left center;
}
.verbs__list li.is-active { color: var(--on); }
.verbs__list li.is-done { color: rgba(var(--on-rgb), 0.36); }
.verbs__progress { margin-top: 40px; width: 200px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.verbs__progress span { display: block; height: 100%; width: 0; background: var(--accent); }

.verbs__right { position: relative; height: min(520px, 62vh); }
/* 바탕(남색·연보라)과 확실히 구분되는 흰 카드. 카드마다 구름 색(--c)이 달라 넘길 때 바뀐 게 보인다. */
.vcard {
  position: absolute; inset: 0; overflow: hidden;
  padding: 44px 44px 48px; border-radius: 32px;
  background: #fff; color: var(--ink);
  box-shadow: 0 40px 90px -40px rgba(var(--shadow-rgb), 0.55);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(60px) scale(0.97); pointer-events: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.vcard.is-active { opacity: 1; transform: none; pointer-events: auto; }
.vcard.is-past { transform: translateY(-60px) scale(0.97); }
.vcard:nth-child(1) { --c: 49, 130, 246; }
.vcard:nth-child(2) { --c: 168, 85, 247; }
.vcard:nth-child(3) { --c: 16, 185, 150; }
.vcard:nth-child(4) { --c: 249, 140, 40; }
.vcard__head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); position: relative; }
.vcard__no { color: rgb(var(--c)); }
.vcard h3 { margin-top: auto; font-size: clamp(24px, min(2.6vw, 4vh), 36px); font-weight: 700; letter-spacing: -0.035em; position: relative; }
.vcard .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; position: relative; }
.vcard .tags span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #f2f4f6; color: var(--ink-2); }
.vcard p { font-size: clamp(15px, min(1.2vw, 1.9vh), 17px); line-height: 1.7; color: var(--ink-2); position: relative; }
.vcard p + p { margin-top: 10px; }
.vcard p.hl { color: var(--ink); font-weight: 600; }
.vcard__orb {
  position: absolute; width: 360px; height: 360px; right: -90px; top: -110px; border-radius: 50%;
  opacity: 0.55; animation: orb 9s ease-in-out infinite alternate; will-change: transform;
}
.orb--1 { background: radial-gradient(circle closest-side, var(--accent), transparent); }
.orb--2 { background: radial-gradient(circle closest-side, #b08cff, transparent); }
.orb--3 { background: radial-gradient(circle closest-side, #4fe3c1, transparent); }
.orb--4 { background: radial-gradient(circle closest-side, #ffd18a, transparent); }
/* 흰 카드 위 구름 — 진한 가운데에서 옅게 번진다. (Our Business 카드의 orb 는 위 색 그대로) */
.vcard .vcard__orb { opacity: 1; background: radial-gradient(circle closest-side, rgba(var(--c), 0.5), rgba(var(--c), 0.18) 55%, rgba(var(--c), 0)); }
@keyframes orb { to { transform: translate(-40px, 50px) scale(1.15); } }

@media (max-width: 900px) {
  .verbs__inner { grid-template-columns: 1fr; gap: 28px; }
  .verbs__list { display: flex; flex-wrap: wrap; column-gap: 10px; }
  .verbs__list li { font-size: 36px; }
  .verbs__progress { display: none; }
  .verbs__right { height: 400px; }
  .vcard { padding: 28px 26px 32px; }
  .vcard p { font-size: 15px; }
}

/* ---------- 05 DIFFERENTIATION (라이트) ---------- */
.diff { background: var(--paper); color: var(--ink); }
/* 남색 ↔ 밝은 섹션 사이를 끊지 않고 잇는다. OKLab 에서 양끝이 평평한 S 곡선으로 나눈 색이라
   중간에 튀는 띠가 생기지 않는다(예전엔 #0a2347 · #8fa3bf 를 거쳐 파란 띠가 보였다). */
.blend { height: 50vh; }
/* 홈은 섹션마다 위아래 여유가 있어 띠를 줄여도 이어져 보인다 — 50vh 면 빈 화면처럼 보였다 */
#panel-about .blend { height: 28vh; }
.blend--n2p { background: var(--blend-n2p); }
.blend--p2n { background: var(--blend-p2n); }
.diff__intro { display: grid; grid-template-columns: 1fr auto; gap: 6vw; align-items: center; }
/* 사진은 세로 4:5 그대로, 높이를 화면에 맞춘다 */
.diff__img {
  height: clamp(240px, 42vh, 460px); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(var(--shadow-rgb), 0.35);
}
.diff__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.diff__img:hover img { transform: scale(1.04); }
/* 태블릿(601~900)은 데스크톱처럼 글·사진 두 칸, 휴대폰만 세로로 쌓는다 */
@media (max-width: 600px) {
  .diff__intro { grid-template-columns: 1fr; gap: 24px; }
  .diff__img { height: auto; aspect-ratio: 2 / 1; border-radius: 20px; }
}
.diff__desc { margin-top: clamp(16px, 3vh, 32px); font-size: clamp(16px, min(1.5vw, 2.3vh), 21px); line-height: 1.7; color: var(--ink-2); }
.diff__desc strong { color: var(--ink); }

/* 연결 과정 — 섹션에 멈춘 뒤 스크롤할 때마다 점이 하나씩 차고 선이 그 점까지 자란다(main.js 가 --fill 과 li.on 을 정한다) */
.flow {
  position: relative; margin-top: clamp(32px, 6vh, 72px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.flow::before, .flow::after {
  content: ""; position: absolute; left: 10px; top: 9px; height: 2px; border-radius: 2px;
}
.flow::before { right: 10px; background: #e5e8eb; }
.flow::after { width: var(--fill, 0px); background: linear-gradient(90deg, var(--blue), var(--accent)); transition: width 0.5s var(--ease), height 0.5s var(--ease); }
.flow li { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 40px; }
.flow__dot {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid #d1d6db; z-index: 1;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.flow li.on .flow__dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 6px rgba(var(--blue-rgb), 0.15); transform: scale(1.08); }
.flow b { font-size: clamp(16px, min(1.4vw, 2.2vh), 20px); font-weight: 700; letter-spacing: -0.03em; }
.flow small { font-size: 14px; color: var(--ink-3); font-weight: 500; }
/* 점과 선(큰 틀)은 처음부터 있고, 점이 찰 때 그 아래 글이 함께 올라온다 */
.flow b, .flow small { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.flow small { transition-delay: 0.08s; }
.flow li.on b, .flow li.on small { opacity: 1; transform: none; }

.message {
  margin-top: clamp(28px, 5vh, 60px); padding: clamp(24px, 4vh, 44px) clamp(26px, 3.4vw, 48px); border-radius: 32px; background: #fff;
  box-shadow: 0 30px 80px -40px rgba(var(--shadow-rgb), 0.25);
}
.message .eyebrow { margin-bottom: clamp(10px, 1.8vh, 18px); }
.message p:last-child { font-size: clamp(17px, min(1.75vw, 2.7vh), 26px); line-height: 1.6; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); }
.message strong { color: var(--blue); }

/* 휴대폰: 세로 흐름. 단계 이름과 설명을 한 줄에 놓아 짧게 */
@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; gap: 14px; padding-left: 40px; }
  .flow li { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
  .flow b { font-size: 15px; }
  .flow small { font-size: 13px; }
  .message p:last-child { font-size: 16px; }
  .flow::before, .flow::after { left: 9px; top: 10px; width: 2px; }
  .flow::before { right: auto; bottom: 10px; height: auto; }
  .flow::after { height: var(--fill, 0px); }
  .flow li { padding-top: 0; }
  .flow__dot { left: -40px; }
  .message { padding: 32px 26px 36px; }
}

/* ---------- 06 GROWTH ---------- */
.growth { background: var(--navy-900); }
.chain { margin-top: clamp(28px, 5.5vh, 64px); border-top: 1px solid var(--line); }
.chain__row {
  display: grid; grid-template-columns: 180px 1fr; align-items: baseline; gap: 24px;
  padding: clamp(14px, 2.6vh, 30px) 0; border-bottom: 1px solid var(--line);
}
.chain__k { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.chain__row p { font-size: clamp(20px, min(2.5vw, 3.8vh), 36px); line-height: 1.45; font-weight: 600; letter-spacing: -0.035em; color: var(--mute); }
.chain__row strong { color: var(--on); }
.chain__row--wide p { font-size: clamp(18px, min(2vw, 3vh), 28px); }
@media (max-width: 768px) { .chain__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } }

/* ---------- 07 MISSION ---------- */
.mission { background: var(--navy-900); text-align: center; }
.mission .scrub { font-size: clamp(28px, min(3.9vw, 6.2vh), 56px); }
.mission__sub { margin-top: clamp(24px, 4.5vh, 52px); font-size: clamp(18px, min(2.2vw, 3.2vh), 28px); color: var(--mute); font-weight: 500; }
.mission__sub strong { color: var(--on); }
/* About 의 브랜드 필름으로 가는 작은 링크(마지막 줄과 함께 나타난다) */
.mission__film { display: inline-block; margin-top: clamp(18px, 3.2vh, 36px); padding-bottom: 3px; font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--line); transition: color 0.2s, border-color 0.2s; }
.mission__film:hover { color: var(--on); border-color: var(--on); }
.btn-ghost {
  padding: 16px 26px; border-radius: 14px; font-size: 16px; font-weight: 600;
  background: rgba(var(--on-rgb), 0.08); border: 1px solid rgba(var(--on-rgb), 0.16);
  transition: background 0.25s, transform 0.25s var(--ease);
}
.btn-ghost:hover { background: rgba(var(--on-rgb), 0.16); transform: translateY(-2px); }
.btn-ghost span { display: inline-block; transition: transform 0.25s var(--ease); }
.btn-ghost:hover span { transform: translateX(4px); }




@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}