@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* 택슈런스 V5 공통 스타일 — 두 개의 문(대표관·자녀관) 하나의 브랜드 시스템 */
/* 토큰 근거: 로고 픽셀 실측 + designlang 실측(하나·카뱅·인카 3:0) — 선별노트 §8 */

:root{
  /* 색 — 8색 이내 (하나 8색 / 카뱅 6색 실측 근거) */
  --navy:#1A2B3B;        /* 로고 실측 네이비 82.4% — 주 포인트색 */
  --navy-2:#2E4459;      /* 밝은 네이비 (보조) */
  --gold:#C1A677;        /* 로고 실측 골드 16.7% — 액센트, 소량만 */
  --gold-soft:#F3ECDF;   /* 골드 틴트 — 고지·주의 박스 전용 (인카 실물 근거) */
  --ink:#17241F;         /* 본문 (순수 검정 금지 — 스킬 §9.A) */
  --muted:#5C6B64;       /* 보조 텍스트 */
  --line:#E3E7EA;        /* 1px 보더 (그림자 대신 이걸로 분리) */
  --bg:#FFFFFF;          /* 캔버스 — 순백 확정 (하나·카뱅·인카 3:0) */

  /* 프리미엄 그라디언트 및 그림자 토큰 */
  --navy-gradient: linear-gradient(135deg, #1A2B3B 0%, #0D1620 100%);
  --gold-gradient: linear-gradient(135deg, #E2CBA0 0%, #C1A677 100%);
  --glass-bg: rgba(255, 255, 255, 0.70);
  --glass-border: rgba(255, 255, 255, 0.50);
  --shadow-soft: 0 4px 20px rgba(26, 43, 59, 0.03), 0 1px 3px rgba(26, 43, 59, 0.02);
  --shadow-premium: 0 12px 36px rgba(26, 43, 59, 0.06), 0 2px 8px rgba(26, 43, 59, 0.04);
  --shadow-gold: 0 8px 24px rgba(193, 166, 119, 0.15);

  /* 형태 — SHAPE CONSISTENCY LOCK (스킬 §4.4): 이 셋 외 금지 */
  --r-pill:50px;         /* 버튼 */
  --r-card:20px;         /* 카드·이미지 (임팩트를 위해 라운딩 살짝 강조) */
  --r-input:8px;         /* 입력 */

  --font:'Pretendard','Pretendard Variable',-apple-system,'Malgun Gothic',sans-serif;
  --font-eng:'Outfit', sans-serif;
  --wrap:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.75;-webkit-font-smoothing:antialiased;word-break:keep-all;
  position:relative;
  overflow-x:hidden;
}
h1,h2,h3{word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
p,li{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}

/* ── 프리미엄 비주얼 데코레이션 (오브 광원 효과) ── */
.orb-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.45;
  mix-blend-mode: multiply;
  animation: floatOrb 12s ease-in-out infinite alternate;
}
.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(193,166,119,0.3) 0%, rgba(243,236,223,0) 70%);
  top: 15%;
  right: -10%;
}
.orb-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(46,68,89,0.2) 0%, rgba(26,43,59,0) 70%);
  top: 45%;
  left: -15%;
  animation-duration: 16s;
  animation-delay: -2s;
}
.orb-3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(193,166,119,0.25) 0%, rgba(255,255,255,0) 70%);
  bottom: 10%;
  right: -5%;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.1); }
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── 헤더 (72px, 데스크톱 1줄, 글래스모피즘 업그레이드) ── */
.hd{
  position:sticky;top:0;z-index:50;height:72px;
  background:rgba(255,255,255,0.75);
  border-bottom:1px solid rgba(26, 43, 59, 0.06);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
  transition: background 0.3s, border 0.3s;
}
.hd .wrap{height:100%;display:flex;align-items:center;gap:28px}
.logo{
  font-family:var(--font-eng);
  font-weight:900;
  font-size:23px;
  color:var(--navy);
  letter-spacing:-.03em;
  flex:0 0 auto;
  transition: transform 0.2s;
}
.logo:hover {
  transform: scale(1.03);
}
.logo b{color:var(--gold)}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{
  font-size:15px;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
  transition:color .25s, transform 0.2s;
  padding:6px 4px;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy)}
.nav a[aria-current="page"] {
  font-weight: 800;
  border-bottom: 2px solid var(--navy);
}
.nav .cross{
  font-size:13px;
  color:var(--gold);
  font-weight:700;
  border: 1px solid rgba(193, 166, 119, 0.4);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(193, 166, 119, 0.05);
}
.nav .cross:hover {
  background: var(--gold-soft);
  color: #7A6633;
}
.hd .btn{margin-left:8px;padding:9px 18px;font-size:14px}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:24px;color:var(--navy);cursor:pointer}

/* 자녀관 → 대표관 고정 다리: 스크롤바 가까이에서 항상 따라오는 사이드 탭 */
.floating-cross{
  position:fixed;
  top:50%;
  right:16px;
  z-index:44;
  display:flex;
  width:58px;
  min-height:184px;
  padding:15px 9px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.16);
  border-right:0;
  border-radius:16px 0 0 16px;
  background:var(--navy-gradient);
  color:#fff;
  box-shadow:0 12px 32px rgba(26,43,59,.18);
  transform:translateY(-50%);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.floating-cross span{
  color:var(--gold);
  font:600 10px/1 var(--font-eng);
  letter-spacing:.08em;
  writing-mode:vertical-rl;
}
.floating-cross strong{
  font-size:13.5px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.04em;
  word-break:keep-all;
  writing-mode:vertical-rl;
}
.floating-cross svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.floating-cross:hover{background:var(--navy-2);box-shadow:0 16px 36px rgba(26,43,59,.24);transform:translate(-4px,-50%)}
.floating-cross:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ── 버튼 (글래스모피즘 & 그라디언트 입체감 추가) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 32px;border-radius:var(--r-pill);font-weight:700;font-size:16px;
  border:1.5px solid transparent;cursor:pointer;transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space:normal;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;text-align:center;line-height:1.4;
  box-shadow: var(--shadow-soft);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active{transform:translateY(1px)}

.btn-primary{
  background: var(--navy-gradient);
  color:#fff;
  border-color: rgba(255, 255, 255, 0.1);
}
.btn-primary:hover{
  background: var(--navy-2);
  box-shadow: 0 8px 24px rgba(26, 43, 59, 0.18);
}
.btn-gold{
  background: var(--gold-gradient);
  color:#231A08;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{
  filter: brightness(1.08);
  box-shadow: 0 10px 28px rgba(193, 166, 119, 0.3);
}
.btn-ghost{
  background: var(--glass-bg);
  color:var(--navy);
  border-color:var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover{
  border-color:var(--navy);
  background: #fff;
  box-shadow: var(--shadow-premium);
}
.btn[disabled],.btn.off{
  background:#F1F3F4;
  color:#98A2A8;
  border-color:var(--line);
  cursor:not-allowed;
  box-shadow: none;
}
.btn.off:hover {
  transform: none;
}

/* ── 히어로 (풀블리드 정적 사진 — 고급 스크림 및 마이크로 스케일 적용) ── */
.hero{
  position:relative;
  min-height:clamp(500px,68vh,680px);
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition: transform 8s ease-out;
}
.hero:hover .hero-img {
  transform: scale(1.04);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,16,23,0.92) 0%,rgba(10,16,23,0.80) 45%,rgba(10,16,23,0.2) 85%);
  z-index: 1;
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-in{max-width:640px;padding:64px 0}
.eyebrow{
  display:inline-block;font-size:14px;font-weight:700;letter-spacing:.08em;
  color:var(--gold);margin-bottom:16px;
  background: rgba(193, 166, 119, 0.12);
  padding: 4px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(193, 166, 119, 0.2);
}
.hero h1{
  font-size:clamp(32px,4.8vw,56px);line-height:1.24;font-weight:800;color:#fff;
  letter-spacing:-.03em;margin-bottom:20px;
}
.hero p{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);margin-bottom:32px;max-width:34em;line-height:1.7}
/* 자녀관 히어로 = 우측 여백 사진 → 좌측 스크림 반전 */
.hero.right::after{
  background:linear-gradient(270deg,rgba(10,16,23,0.92) 0%,rgba(10,16,23,0.80) 45%,rgba(10,16,23,0.2) 85%);
}
.hero.right .wrap{display:flex;justify-content:flex-end}
.hero.right .hero-in{text-align:left}

/* ── 페이지 헤더 (하위 페이지용) ── */
.ph{
  padding:80px 0 56px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%);
  position: relative;
}
.ph::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.01) 0%, transparent 100%);
}
.ph .crumb{
  font-size:13px;
  color:var(--muted);
  margin-bottom:16px;
  font-family: var(--font-eng);
  font-weight: 500;
}
.ph .crumb a:hover{color:var(--navy)}
.ph h1{font-size:clamp(28px,3.8vw,44px);line-height:1.25;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.ph p{margin-top:16px;color:var(--muted);font-size:18px;max-width:52em;line-height:1.7}

/* ── 섹션 ── */
.sec{padding:clamp(64px,8vw,100px) 0; position: relative;}
.sec.tint{
  background: linear-gradient(180deg, #FAFBFB 0%, #F5F7F8 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sec h2{font-size:clamp(24px,3.1vw,36px);line-height:1.32;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:18px}
.sec h3{font-size:21px;font-weight:700;color:var(--navy);margin-bottom:12px}
.sec .lead{font-size:18px;color:var(--muted);max-width:56em;margin-bottom:44px}
.sec p{margin-bottom:16px}
.hl{color:var(--gold);font-weight:800}          /* 강조는 색만 (밑줄·형광펜 금지) */
.hl-navy{color:var(--navy);font-weight:800}

/* ── 인용 헤드라인 (하나 리빙트러스트 장치) ── */
.quote{padding:clamp(64px,8vw,100px) 0;text-align:center;position:relative}
.quote q{
  display:block;max-width:24em;margin:0 auto;quotes:'“' '”';
  font-size:clamp(23px,3.2vw,36px);line-height:1.55;font-weight:700;color:var(--navy);letter-spacing:-.02em;
}
.quote q::before,.quote q::after{color:var(--gold);font-weight:800}
.quote .by{margin-top:20px;font-size:14px;color:var(--muted);font-family: var(--font-eng);font-weight: 500}

/* ── 관계 도식 (인물+화살표+역할 라벨) ── */
.flow{display:flex;align-items:flex-start;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px 0}
.flow .node{
  flex:0 0 auto;
  width:180px;
  text-align:center;
  padding: 20px 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.flow .node:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium);
}
.flow .disc{
  width:88px;height:88px;margin:0 auto 16px;border-radius:50%;
  border:1.8px solid var(--navy);display:flex;align-items:center;justify-content:center;
  background: #fff;
  transition: background 0.3s, border-color 0.3s;
}
.flow .node.acc .disc{border-color:var(--gold);background:var(--gold-soft)}
.flow .disc svg{width:36px;height:36px;stroke:var(--navy);fill:none;stroke-width:1.6}
.flow .node.acc .disc svg{stroke:var(--gold)}
.flow .nm{font-weight:800;color:var(--navy);font-size:17px;margin-bottom:6px}
.flow .de{font-size:13.5px;color:var(--muted);line-height:1.6}
.flow .arw{flex:0 0 auto;align-self:center;margin-top:-18px;color:var(--line)}
.flow .arw svg{width:44px;height:14px;stroke:#B9C2C8;stroke-width:1.4;fill:none}

/* ── 카드 (글래스모피즘 및 프리미엄 그림자 적용) ── */
.cards{display:grid;gap:24px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  padding:36px 32px;
  background:var(--glass-bg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s, border-color 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-premium);
  border-color: rgba(193, 166, 119, 0.3);
}
.card .num{
  font-family: var(--font-eng);
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:20px;
  box-shadow: 0 4px 10px rgba(26, 43, 59, 0.15);
}
.card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--navy);
  font-weight: 800;
}
.card p{color:var(--muted);font-size:15.5px;margin:0;line-height:1.65}

/* ── 등식 카드 (A+B+C — '+' 있음) ── */
.eq{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap}
.eq .card{flex:1 1 240px;max-width:320px}
.eq .plus{
  flex:0 0 auto;align-self:center;padding:0 20px;
  font-size:36px;font-weight:300;color:var(--gold);line-height:1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ── 3열 비교 (hairline 및 글래스모피즘 기둥화) ── */
.cmp{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.cmp .col{padding:36px 32px; transition: background 0.3s;}
.cmp .col:hover {
  background: rgba(255, 255, 255, 0.4);
}
.cmp .col + .col{border-left:1px solid rgba(26, 43, 59, 0.06)}
.cmp .col h3{font-size:18px;margin-bottom:20px;font-weight:800}
.cmp .col.on {
  background: rgba(193, 166, 119, 0.05);
}
.cmp .col.on h3{color:#7A6633}
.cmp ul{list-style:none}
.cmp li{position:relative;padding-left:18px;margin-bottom:12px;font-size:15px;color:var(--muted)}
.cmp li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--line)}
.cmp .col.on li::before{background:var(--gold)}

/* ── 미디어 (이미지 좌우 배치, 비율 유지 cover) ── */
.media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.media.rev .mtx{order:2}
.media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-card);
  box-shadow: var(--shadow-premium);
  transition: transform 0.4s;
}
.media img:hover {
  transform: scale(1.02);
}
.media img.wide{aspect-ratio:16/10}
.media .mtx h2{margin-bottom:18px}
.media .mtx p{color:var(--muted); font-size: 16px;}

.figure{width:100%;border-radius:var(--r-card);overflow:hidden;box-shadow: var(--shadow-premium)}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.figure .cap{margin-top:14px;font-size:14px;color:var(--muted);padding:0 8px}

/* ── 고지 박스 (웜 베이지 = 고지 전용 배역) ── */
.note{
  background:var(--gold-soft);
  border-radius:var(--r-card);
  padding:32px 36px;
  border: 1px solid rgba(193, 166, 119, 0.35);
  box-shadow: var(--shadow-soft);
}
.note b{display:block;color:var(--navy);font-size:16px;margin-bottom:12px;font-weight:800}
.note ul{list-style:none}
.note li{position:relative;padding-left:16px;font-size:14.5px;color:#6B6152;margin-bottom:9px;line-height:1.7}
.note li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.note li:last-child{margin-bottom:0}

/* ── CTA 밴드 (프리미엄 다크 그라디언트 + 광원 장치) ── */
.cta{
  background: var(--navy-gradient);
  padding:clamp(72px,9vw,110px) 0;
  text-align:center;
  position: relative;
  overflow: hidden;
  border-top: 1.5px solid rgba(255, 255, 255, 0.05);
}
.cta::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 166, 119, 0.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(80px);
  pointer-events: none;
}
.cta h2{font-size:clamp(25px,3.2vw,38px);font-weight:800;color:#fff;margin-bottom:18px;letter-spacing:-.02em}
.cta p{color:rgba(255,255,255,0.80);margin-bottom:36px;font-size:17px;max-width:34em;margin-left:auto;margin-right:auto}
.cta .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}

/* ── 다음 페이지 안내 ── */
.next{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--navy);
  font-weight:800;
  font-size:16px;
  margin-top:12px;
  transition: gap 0.25s, color 0.25s;
}
.next::after{
  content:"→";
  color:var(--gold);
  transition: transform 0.25s;
}
.next:hover{color:var(--gold); gap: 12px;}
.next:hover::after{
  transform: translateX(4px);
}

/* ── 푸터 ── */
.ft{border-top:1px solid var(--line);padding:56px 0 64px;background:#FAFBFB;position: relative;}
.ft .top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:32px}
.ft .fl{display:flex;gap:28px;flex-wrap:wrap}
.ft .fl a{font-size:14px;color:var(--muted);font-weight:600;transition: color 0.2s;}
.ft .fl a:hover{color:var(--navy)}
.ft .biz{font-size:13.5px;color:#8A959B;line-height:2.0}
.ft .biz strong{color:var(--navy);font-weight:700}
.ft .cp{font-size:13px;color:#A6AFB4;margin-top:24px;line-height:1.7}
.ver{font-family: var(--font-eng);font-size:12px;color:#B7BFC4;margin-top:10px;font-weight:600}

/* ── 반응형 (모바일 명시 — 스킬 §4.7) ── */
@media (max-width:860px){
  .nav{
    display:none;position:absolute;top:72px;left:0;right:0;background:rgba(255, 255, 255, 0.98);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:12px 24px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid rgba(26, 43, 59, 0.05);font-size:16px}
  .nav a[aria-current="page"] {
    border-bottom: none;
    font-weight: 800;
    color: var(--navy);
  }
  .hd .btn{width:100%;margin:16px 0 0}
  .burger{display:block}
  .cards.c2,.cards.c3{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr}
  .cmp .col + .col{border-left:0;border-top:1px solid rgba(26, 43, 59, 0.06)}
  .media{grid-template-columns:1fr; gap: 32px;}
  .media.rev .mtx{order:0}
  .eq .plus{padding:8px 0;width:100%;text-align:center}
  .eq .card{max-width:none;flex-basis:100%}
  .flow .arw{display:none}
  .flow{gap:20px}
  .flow .node{width:100%;max-width:none}
  .hero.right .wrap{justify-content:flex-start}
  .hero::after,.hero.right::after{background:linear-gradient(180deg,rgba(12,20,28,.48) 0%,rgba(12,20,28,.84) 100%)}
  .orb {
    filter: blur(80px);
    opacity: 0.3;
  }
  .orb-1 { width: 300px; height: 300px; }
  .orb-2 { width: 350px; height: 350px; }
  .floating-cross{
    top:auto;
    right:14px;
    bottom:max(18px,env(safe-area-inset-bottom));
    width:auto;
    min-height:50px;
    padding:0 16px;
    flex-direction:row;
    gap:9px;
    border-right:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-pill);
    transform:none;
  }
  .floating-cross span{display:none}
  .floating-cross strong{font-size:13.5px;writing-mode:horizontal-tb}
  .floating-cross:hover{transform:translateY(-2px)}
  body:has(.nav.open) .floating-cross{opacity:0;pointer-events:none}
}

/* ── 스크롤 애니메이션 지원 ── */
.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fade-in-up.reveal-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
  }
}