/* ==========================================================================
   엔잡얼라이언스 — 공용 스타일시트
   토큰 · 리셋 · 내비게이션 · 푸터 · 공용 패턴 · 반응형
   ========================================================================== */

@import url("/static/fonts/pretendard-variable.css");

:root{
  --bg:#FAFAF8; --bg-2:#F1F0EB; --ink:#1E1D1C; --ink-2:#3D3B39; --ink-mute:#7C7873;
  --line:#DEDBD3; --line-2:#C8C4B9;
  --amber:#ED8D09; --amber-deep:#C97606; --amber-wash:#FDF2E0;
  --teal:#65B5D6; --teal-deep:#2E7C9E; --teal-wash:#EAF4F9;
  --surface:#FFFFFF;
  --card:#FFFFFF;
  /* literals promoted to tokens */
  --error:#D9472B;
  --tile:#EFEDE6;
  --panel:#F4F2EC;
  --shot:#F7F6F2;
  --placeholder:#A9A5A0;
  --map-base:#E7E5DF;
  --nav-h:74px;
  --pad-x:40px;
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1080px){ :root{ --pad-x:28px; } }
@media (max-width:760px){ :root{ --pad-x:20px; --nav-h:66px; } }

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html,body{background:var(--bg); color:var(--ink);}
body{
  font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo','Noto Sans KR', sans-serif;
  font-feature-settings:"ss10","ss01";
  -webkit-font-smoothing:antialiased;
  font-weight:500; line-height:1.55; letter-spacing:-0.01em;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
ul,ol{list-style:none;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:0;}

.hl{
  background:linear-gradient(180deg,transparent 58%,rgba(237,141,9,.32) 58%);
  padding:0 4px; border-radius:2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hl-teal{
  background:linear-gradient(180deg,transparent 58%,rgba(101,181,214,.38) 58%);
  padding:0 4px; border-radius:2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ---------------------------------------------------------------- nav --- */
nav.top{
  position:sticky; top:0; z-index:800;
  background:rgba(250,250,248,.88);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(30,29,28,.08);
}
nav.top .row{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:24px;}
.logo{display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; letter-spacing:-0.03em; flex:0 0 auto;}
.logo-img{display:block; height:48px; width:auto;}
.logo-mark{
  width:30px; height:30px; border-radius:9px; background:var(--amber);
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:16px; letter-spacing:-0.04em;
}
nav.top .menu{display:flex; gap:30px; font-weight:600; font-size:15px; color:var(--ink-2);}
nav.top .menu a{position:relative; padding:4px 0; transition:color .15s;}
nav.top .menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
nav.top .menu a:hover{color:var(--amber-deep);}
nav.top .menu a:hover::after{transform:scaleX(1);}
nav.top .menu a[aria-current="page"]{color:var(--ink); font-weight:800;}
nav.top .menu a[aria-current="page"]::after{transform:scaleX(1);}

/* 드롭다운(고객센터) */
nav.top .menu .nav-drop{position:relative; display:flex; align-items:center;}
nav.top .menu .nav-drop > .trg{display:inline-flex; align-items:center; gap:5px;}
nav.top .menu .nav-drop .caret{font-size:9.5px; color:var(--ink-mute); transition:transform .22s var(--ease);}
nav.top .menu .nav-drop:hover .caret,
nav.top .menu .nav-drop:focus-within .caret{transform:rotate(180deg); color:var(--amber-deep);}
nav.top .drop{
  position:absolute; top:calc(100% + 16px); right:-14px; z-index:20;
  min-width:262px; padding:8px; border-radius:18px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(30,29,28,.1);
  box-shadow:0 26px 46px -26px rgba(30,29,28,.4);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
nav.top .drop::before{content:""; position:absolute; left:0; right:0; top:-18px; height:18px;}
nav.top .menu .nav-drop:hover .drop,
nav.top .menu .nav-drop:focus-within .drop{opacity:1; transform:none; pointer-events:auto;}
nav.top .drop a{display:flex; flex-direction:column; gap:2px; padding:11px 13px; border-radius:12px;
  transition:background .15s;}
nav.top .drop a::after{display:none;}
nav.top .drop a:hover{background:var(--bg-2);}
nav.top .drop a[aria-current="page"]{background:var(--amber-wash);}
nav.top .drop .lb{font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-0.02em;}
nav.top .drop a[aria-current="page"] .lb{color:var(--amber-deep);}
nav.top .drop .ds{font-size:12.5px; font-weight:500; color:var(--ink-mute);}
.cta-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:999px; font-weight:700; font-size:14.5px; flex:0 0 auto;
  transition:background .18s, transform .18s;
}
.cta-pill:hover{background:var(--amber); transform:translateY(-1px);}
.cta-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(101,181,214,.28);}
.burger{display:none; width:42px; height:42px; border-radius:12px; border:1.5px solid var(--line-2); place-items:center;}
.burger span{display:block; width:17px; height:2px; background:var(--ink); border-radius:2px; position:relative;}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:2px; background:var(--ink); border-radius:2px;}
.burger span::before{top:-5.5px;} .burger span::after{top:5.5px;}

.mnav{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:790;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:12px var(--pad-x) 26px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.mnav.open{opacity:1; transform:none; pointer-events:auto;}
.mnav a{display:flex; justify-content:space-between; align-items:center; padding:16px 0;
  border-bottom:1px solid var(--line); font-size:18px; font-weight:700; letter-spacing:-0.03em;}
.mnav a .ar{color:var(--ink-mute); font-weight:600;}
.mnav a[aria-current="page"]{color:var(--amber-deep);}
.mnav a.sub{padding-left:20px; font-size:15.5px; color:var(--ink-2);}
.mnav a.sub::before{content:"└"; color:var(--line-2); margin-right:9px; font-weight:600;}
.mnav a.sub[aria-current="page"]{color:var(--amber-deep);}
.mnav .mfoot{margin-top:18px; display:flex; gap:10px;}
.mnav .mfoot a{flex:1; justify-content:center; border:none; font-size:15px; padding:15px;
  background:var(--ink); color:#fff; border-radius:13px;}

/* ------------------------------------------------------------ page head -- */
.hdr-rule{height:1px; background:var(--line);}

.crumb{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600;
  color:var(--ink-mute); flex-wrap:wrap;}
.crumb a:hover{color:var(--ink);}
.crumb .sep{color:var(--line-2);}
.crumb .now{color:var(--ink); font-weight:700;}

/* 큰 히어로 */
header.hero{padding:74px 0 0;}
.hero-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:center;}
.hero-grid.wide{grid-template-columns:1fr;}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700;
  color:var(--amber-deep); background:var(--amber-wash); padding:8px 14px; border-radius:999px;}
.eyebrow .sq{width:6px; height:6px; background:var(--amber); border-radius:2px;}
h1.hero-title{margin-top:26px; font-size:80px; line-height:1.07; font-weight:900;
  letter-spacing:-0.048em; word-break:keep-all; text-wrap:balance;}
.hero-lede{margin-top:26px; max-width:640px; font-size:20px; line-height:1.68; color:var(--ink-2);
  word-break:keep-all; text-wrap:pretty;}
.hero-lede b{color:var(--ink); font-weight:700;}
.hero-ctas{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap;}
.hero-media{background:var(--panel); border:1px solid rgba(30,29,28,.06); border-radius:26px; padding:22px;}
.hero-media img{border-radius:14px; width:100%; box-shadow:0 20px 40px -22px rgba(30,29,28,.4);}
.hero-media .cap{margin-top:14px; font-size:12.5px; font-weight:600; color:var(--ink-mute); line-height:1.55;}
.hero-media .cap b{color:var(--ink); font-weight:700;}

/* 컴팩트 페이지 헤더 */
header.pagehead{padding:52px 0 62px; border-bottom:1px solid var(--line);}
header.pagehead .sec-label{margin-top:30px;}
header.pagehead h1{margin-top:16px; font-size:62px; line-height:1.08; font-weight:900;
  letter-spacing:-0.046em; word-break:keep-all; text-wrap:balance;}
header.pagehead .lede{margin-top:20px; max-width:700px; font-size:18.5px; line-height:1.7;
  color:var(--ink-2); word-break:keep-all;}
header.pagehead .lede b{color:var(--ink); font-weight:700;}
header.pagehead .head-foot{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap;}

/* -------------------------------------------------------------- shared --- */
section{padding:112px 0;}
section.tight{padding:88px 0;}
section.flush-top{padding-top:0;}

.sec-label{font-size:13px; font-weight:700; color:var(--amber-deep);
  display:inline-flex; align-items:center; gap:8px;}
.sec-label::before{content:""; width:24px; height:2px; background:var(--amber);}
.sec-title{margin-top:15px; font-size:56px; line-height:1.1; font-weight:800;
  letter-spacing:-0.04em; word-break:keep-all; text-wrap:balance;}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; gap:48px;}
.sec-side{max-width:360px; font-size:15.5px; color:var(--ink-2); line-height:1.7;
  padding-bottom:6px; word-break:keep-all;}
.sec-side b{color:var(--ink); font-weight:700;}

.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 24px; border-radius:13px;
  font-weight:700; font-size:15.5px; transition:transform .15s, background .18s, color .18s;}
.btn:hover{transform:translateY(-1px);}
.btn .arr{transition:transform .2s;}
.btn:hover .arr{transform:translateX(3px);}
.btn-primary{background:var(--ink); color:#fff;}
.btn-amber{background:var(--amber); color:#fff;}
.btn-ghost{border:1.5px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--ink);}
.textlink{display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:700;
  color:var(--amber-deep); border-bottom:1.5px solid transparent; transition:border-color .18s;}
.textlink:hover{border-color:var(--amber);}

.panel{background:var(--surface); border:1px solid rgba(30,29,28,.05); border-radius:24px;}
.dark-band{background:var(--ink); color:#fff;}
.dark-band .sec-title{color:#fff;}
.dark-band .sec-label{color:var(--amber);}
.dark-band .sec-label::before{background:var(--amber);}
.dark-band .sec-side{color:rgba(255,255,255,.7);}
.dark-band .sec-side b{color:var(--amber);}
.dark-band .textlink{color:var(--amber);}

/* 통계 밴드 */
.stats{background:var(--ink); color:#fff; padding:60px 0;}
.stats .grid{display:grid; grid-template-columns:repeat(5,1fr);}
.sb{padding:0 26px; border-right:1px solid rgba(255,255,255,.13);}
.sb:first-child{padding-left:0;}
.sb:last-child{border-right:none;}
.sb .k{font-size:12.5px; font-weight:600; color:rgba(255,255,255,.52);}
.sb .v{margin-top:9px; font-size:42px; font-weight:800; letter-spacing:-0.045em; line-height:1;}
.sb .v small{font-size:16px; font-weight:700; color:rgba(255,255,255,.58); margin-left:3px; letter-spacing:-0.01em;}
.sb .s{margin-top:9px; font-size:12.5px; color:rgba(255,255,255,.4); line-height:1.45; word-break:keep-all;}
.sb .v.amber{color:var(--amber);}

/* CTA */
.cta{padding:132px 0 144px; text-align:center;
  background:radial-gradient(900px 420px at 50% 0%, rgba(237,141,9,.11), transparent 70%), var(--bg);}
.cta .kick{font-size:13.5px; font-weight:700; color:var(--amber-deep);
  display:inline-flex; align-items:center; gap:8px;}
.cta .kick::before,.cta .kick::after{content:""; width:24px; height:2px; background:var(--amber);}
.cta h2{margin-top:22px; font-size:72px; line-height:1.08; font-weight:900;
  letter-spacing:-0.048em; text-wrap:balance;}
.cta p{margin:22px auto 0; max-width:640px; font-size:18px; color:var(--ink-2); line-height:1.68;}
.cta .btns{margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* -------------------------------------------------------------- footer --- */
footer{background:var(--ink); color:rgba(255,255,255,.55); padding:52px 0 52px; font-size:13px;}
footer .g{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.12);}
footer .brand{display:flex; align-items:center; gap:10px; color:#fff; font-size:19px;
  font-weight:800; letter-spacing:-0.03em; margin-bottom:16px;}
footer .brand .logo-mark{background:var(--amber); color:#fff;}
footer .brand .logo-img{height:24.3px;}
footer .info{line-height:1.9; word-break:keep-all;}
footer .info b{color:rgba(255,255,255,.85); font-weight:700;}
footer h5{font-size:12.5px; font-weight:700; color:#fff; margin-bottom:16px; letter-spacing:-0.01em;}
footer ul{display:flex; flex-direction:column; gap:10px;}
footer ul a{transition:color .15s;}
footer ul a:hover{color:var(--amber);}
footer .legal{margin-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
footer .legal a{color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.28); transition:color .15s, border-color .15s;}
footer .legal a:hover{color:var(--amber); border-color:var(--amber);}

/* 패밀리 사이트 --------------------------------------------------------------- */
footer .family{margin-top:34px; padding-top:30px; border-top:1px solid rgba(255,255,255,.12);}
footer .family .fl{font-size:12.5px; font-weight:700; color:#fff; letter-spacing:-0.01em;
  display:inline-flex; align-items:center; gap:8px;}
footer .family .fl::before{content:""; width:18px; height:2px; background:var(--amber);}
footer .fam-row{margin-top:18px; display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(255,255,255,.1);}
footer .fam{display:block; padding:20px 22px 4px 0; border-right:1px solid rgba(255,255,255,.1);
  margin-right:22px; transition:transform .18s var(--ease);}
footer .fam:last-child{border-right:none; margin-right:0; padding-right:0;}
footer .fam:hover{transform:translateY(-2px);}
footer .fam .hd{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
footer .fam .nm{font-size:16.5px; font-weight:800; color:#fff; letter-spacing:-0.03em; word-break:keep-all;}
footer .fam .ar{font-size:13px; color:rgba(255,255,255,.34); transition:color .15s, transform .18s;}
footer .fam:hover .ar{color:var(--amber); transform:translate(2px,-2px);}
footer .fam .dm{margin-top:7px; font-size:12.5px; color:rgba(255,255,255,.48); transition:color .15s;}
footer .fam:hover .dm{color:rgba(255,255,255,.78);}
footer .fam .fg{margin-top:12px; display:inline-block; font-size:11px; font-weight:800;
  color:var(--amber); background:rgba(237,141,9,.14); padding:5px 9px; border-radius:6px;}
footer .fam.primary .nm{color:var(--amber);}

/* -------------------------------------------------------------- motion --- */
/* 기본값은 '보임'. 아래쪽에 있는 요소만 JS가 .armed를 붙여 숨겼다가 페이드인합니다.
   스크립트가 실패하거나 늦어도 콘텐츠는 항상 읽힙니다. */
[data-reveal].armed{opacity:0; transform:translateY(18px);}
[data-reveal].armed.in{opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);}
@media (prefers-reduced-motion:reduce){
  [data-reveal].armed{opacity:1 !important; transform:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1180px){
  h1.hero-title{font-size:64px;}
  header.pagehead h1{font-size:50px;}
  .sec-title{font-size:46px;}
  .cta h2{font-size:58px;}
  .hero-grid{gap:44px;}
}
@media (max-width:1024px){
  nav.top .menu, nav.top .cta-pill{display:none;}
  .burger{display:grid;}
  .hero-grid{grid-template-columns:1fr; gap:38px;}
  .stats .grid{grid-template-columns:repeat(2,1fr); row-gap:34px;}
  .sb{padding:0 20px;}
  .sb:nth-child(2n){border-right:none;}
  .sb:nth-child(2n+1){padding-left:0;}
  footer .g{grid-template-columns:1fr 1fr; gap:32px;}
  footer .fam-row{grid-template-columns:repeat(2,1fr);}
  footer .fam{padding:18px 20px 4px 0; margin-right:20px;}
  footer .fam:nth-child(2n){border-right:none; margin-right:0; padding-right:0;}
  .sec-head{flex-direction:column; align-items:flex-start; gap:22px; margin-bottom:40px;}
  .sec-side{max-width:100%;}
}
@media (max-width:760px){
  section{padding:76px 0;}
  section.tight{padding:60px 0;}
  h1.hero-title{font-size:42px; letter-spacing:-0.04em;}
  header.hero{padding:44px 0 0;}
  header.pagehead{padding:34px 0 44px;}
  header.pagehead h1{font-size:34px;}
  header.pagehead .lede{font-size:16.5px;}
  .hero-lede{font-size:17px;}
  .sec-title{font-size:33px;}
  .cta h2{font-size:38px;}
  .cta{padding:84px 0 92px;}
  .btn{padding:14px 20px; font-size:14.5px;}
  .stats{padding:44px 0;}
  .sb .v{font-size:32px;}
  footer .g{grid-template-columns:1fr; gap:28px;}
  footer .fam-row{grid-template-columns:1fr;}
  footer .fam{border-right:none; margin-right:0; padding:16px 0 16px; border-bottom:1px solid rgba(255,255,255,.1);}
  footer .fam:last-child{border-bottom:none;}
}

/* ---------------------------------------------------------------- toast --- */
.toast{position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); background:var(--ink); color:#fff;
  padding:14px 20px; border-radius:999px; font-size:13.5px; font-weight:700; opacity:0;
  transition:opacity .25s, transform .25s; pointer-events:none; z-index:900;}
.toast.show{opacity:1; transform:translate(-50%,0);}
@media (prefers-reduced-motion:reduce){ .toast{transition:none;} }

/* --------------------------------------------------------------- honeypot --- */
/* Off-screen rather than display:none — some bots skip hidden inputs, but a
   field that is physically rendered yet unreachable still reads as real. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.hp label{display:block; font-size:13px; font-weight:700;}
.hp input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;}

/* --------------------------------------------------------- form feedback --- */
/* Server-side rejection banner shared by the inquiry and apply forms. */
.f-error{display:none; margin:0 0 18px; padding:14px 16px; border-radius:12px;
  background:#FCEFEA; border:1px solid #F2C9BD; color:#8E2F17;
  font-size:13.5px; font-weight:600; line-height:1.6; word-break:keep-all;}
.f-error.show{display:block;}
.f-error a{color:inherit; font-weight:800; text-decoration:underline;}
.submit.busy{opacity:.6; cursor:progress;}
.submit:disabled{cursor:progress;}
.f-error .f-draft{display:inline-block; margin-top:6px; font-weight:800;}