/* 아르노젠 마이크로사이트 스타일 */
/* ===== 토큰 ===== */
:root{
  --navy:#003894; --navy-deep:#00245F; --sky:#5AA9F0;
  --ink:#111318; --text:#3A3F48; --muted:#7A818D;
  --line:#E3E7EE; --bg-soft:#F4F6FA; --white:#fff;
  --font:"Pretendard","Pretendard Variable",-apple-system,sans-serif;
  --w:1280px; --gutter:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
.site{container-type:inline-size;container-name:site;position:relative;width:100%;margin:0 auto;background:var(--white)}
html{scroll-behavior:auto}
body{font-family:var(--font);color:var(--text);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.inner{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}

/* ===== 공통 타이포 ===== */
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.sec-title{font-size:42px;font-weight:700;line-height:1.3;color:var(--ink);margin-top:16px;letter-spacing:-.01em}
.sec-desc{font-size:18px;line-height:1.75;color:var(--text);margin-top:20px;max-width:760px}
.sec-note{font-size:14px;color:var(--muted);margin-top:12px}
section{padding:140px 0}

/* ===== 헤더 ===== */
.header{position:sticky;top:0;left:0;right:0;z-index:100;background:var(--white);border-bottom:1px solid var(--line)}
/* 앵커 이동 시 고정 헤더에 가려지지 않게 */
section{scroll-margin-top:88px}
.header .inner{height:88px;display:flex;align-items:center;justify-content:space-between}
.logo img{height:30px;width:auto}
.gnb{display:flex;gap:44px;position:relative}
.gnb a{font-size:17px;font-weight:600;color:var(--ink);padding:8px 0;transition:color .25s}
.gnb a.on{color:var(--navy)}
/* 활성 메뉴 밑줄: 하나의 바가 좌우로 이동 */
.gnb .bar{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--navy);transition:left .3s ease,width .3s ease}
/* PC: 유틸 영역 없음 → 로고 왼쪽·메뉴 오른쪽 끝 정렬(피그마 2026-10-29) */
.util{display:none;align-items:center;gap:20px;font-size:14px;font-weight:600;color:var(--muted)}
.burger{display:none;width:28px;height:20px;flex-direction:column;justify-content:space-between;background:none;border:0;padding:0;cursor:pointer}
.burger i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
/* 열림 상태: X 모양 */
.header.open .burger i:nth-child(1){transform:translateY(9px) rotate(45deg)}
.header.open .burger i:nth-child(2){opacity:0}
.header.open .burger i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ===== 1 메인 비주얼 ===== */
.hero{position:relative;height:800px;padding:0;overflow:hidden;background:var(--navy-deep)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,60,.15) 0%,rgba(0,20,60,.45) 60%,rgba(0,20,60,.75) 100%)}
.hero .inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:120px;color:var(--white)}
.hero .kicker{font-size:18px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.hero h1{font-size:64px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin-top:20px;max-width:900px}
.hero p{font-size:20px;line-height:1.7;margin-top:24px;max-width:680px;opacity:.9}
.hero .tag{margin-top:40px;font-size:16px;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;gap:16px}
.hero .tag i{display:block;width:48px;height:1px;background:var(--white);opacity:.7}
.hero .scroll{position:absolute;right:var(--gutter);bottom:48px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;color:var(--white);opacity:.8}
.hero .scroll i{display:block;width:1px;height:48px;background:var(--white)}
/* SCROLL 표시: 1.6초마다 아래로 12px 내려갔다 튀어 오름(공 튀는 곡선). 움직임 줄이기 설정이면 정지 */
.hero .scroll{animation:scroll-bounce 1.6s cubic-bezier(.28,.84,.42,1) infinite}
@keyframes scroll-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.hero .scroll{animation:none}}
.capture .hero .scroll{animation:none}

/* ===== 2 서비스 ===== */
.services .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.card{background:var(--white);border:1px solid var(--line);padding:40px 36px 44px;position:relative;min-height:320px;display:flex;flex-direction:column}
.card .num{font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.1em}
.card h3{font-size:26px;font-weight:700;color:var(--ink);line-height:1.35;margin-top:20px}
.card .en{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-top:6px}
.card p{font-size:16px;line-height:1.7;margin-top:22px;color:var(--text)}
.card .bar{position:absolute;left:0;top:0;width:56px;height:4px;background:var(--navy)}

/* ===== 3 강점 ===== */
.strengths{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.strengths img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.strengths .inner{position:relative}
.strengths .eyebrow{color:var(--sky)}
.strengths .sec-title{color:var(--white)}
.strengths .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:72px;border-top:1px solid rgba(255,255,255,.25)}
.st{padding:48px 36px 56px 0;border-right:1px solid rgba(255,255,255,.25)}
.st:last-child{border-right:0}
.st+.st{padding-left:36px}
.st .num{font-size:40px;font-weight:300;color:var(--sky);line-height:1}
.st .en{font-size:13px;font-weight:700;letter-spacing:.14em;margin-top:28px;opacity:.75}
.st h3{font-size:26px;font-weight:700;line-height:1.35;margin-top:10px}
.st p{font-size:16px;line-height:1.75;margin-top:18px;opacity:.9}

/* ===== 4 비전·미션 ===== */
.vision .vm{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
.vm-card{background:var(--bg-soft);padding:56px 48px;min-height:300px;display:flex;flex-direction:column;justify-content:center;border-top:3px solid var(--navy)}
.vm-card .en{font-size:14px;font-weight:700;letter-spacing:.2em;color:var(--navy)}
.vm-card h3{font-size:22px;font-weight:600;color:var(--ink);margin-top:12px}
.vm-card p{font-size:28px;font-weight:700;line-height:1.45;color:var(--ink);margin-top:24px;letter-spacing:-.01em}
.values{margin-top:24px;border:1px solid var(--line);padding:48px}
.values .label{font-size:14px;font-weight:700;letter-spacing:.2em;color:var(--navy)}
.values h3{font-size:22px;font-weight:600;color:var(--ink);margin-top:8px}
.values .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.val{border-left:2px solid var(--navy);padding-left:20px}
.val svg{display:block;width:32px;height:32px;color:var(--navy);margin-bottom:16px}
.val .en{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.val b{display:block;font-size:22px;font-weight:700;color:var(--ink);margin-top:6px}

/* ===== 5 위치·연락 ===== */
.location{background:var(--bg-soft);position:relative;overflow:hidden}
.location img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;opacity:.2;mix-blend-mode:multiply}
.location .inner{position:relative}
.location .row{display:grid;grid-template-columns:1fr 454px;gap:64px;align-items:start}
.location .box{margin-top:64px}
.location .box p{font-size:18px;line-height:1.8}
.location .box p+p{margin-top:20px}
.contact{background:var(--white);border:1px solid var(--line);padding:48px}
.contact .label{font-size:14px;font-weight:700;letter-spacing:.2em;color:var(--navy)}
.contact .tel{display:block;font-size:40px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin-top:12px;line-height:1.2}
.contact .addr{font-size:16px;line-height:1.7;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);color:var(--text)}
.contact .addr b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}

/* ===== 푸터 ===== */
.footer{background:var(--ink);color:#B9BEC8;padding:56px 0}
.footer .inner{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.footer .name{font-size:16px;font-weight:700;color:var(--white)}
.footer .info{font-size:14px;line-height:1.8;margin-top:12px}
.footer .info span{margin:0 10px;color:#4A505B}
.footer .copy{font-size:13px;margin-top:16px;color:#8A9099}
.footer .links{display:flex;gap:24px;font-size:14px;font-weight:600;color:var(--white);white-space:nowrap}

/* ===== 스크롤 등장 액션 =====
   data-reveal 요소는 처음에 아래로 40px 내려간 채 투명. 화면에 들어오면 JS가 .in 을 붙여 제자리로 떠오름.
   --d 는 요소별 지연 시간(그룹 안 순번 × 간격). 움직임 줄이기 설정이면 액션 없이 바로 표시 */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{transition:none;opacity:1;transform:none}}

/* ===== 와이드 PC(1920): 높이·글자 크기는 1440과 동일, 콘텐츠 폭만 확장 ===== */
@container site (min-width:1800px){
  .site{--w:1560px;--gutter:60px}
  .hero h1{max-width:1000px}
  .sec-desc{max-width:860px}
}
/* ===== 태블릿 ===== */
@container site (max-width:1024px){
  .site{--gutter:32px}
  section{padding:96px 0}
  .header .inner{height:72px}
  .logo img{height:26px}
  .util{display:flex}
  .burger{display:flex}
  /* 드롭다운 메뉴: 헤더 바로 아래 흰 패널 */
  .gnb{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,20,60,.08);padding:8px 0 12px}
  .header.open .gnb{display:flex}
  .gnb a{font-size:18px;padding:16px var(--gutter);border-bottom:1px solid var(--line)}
  .gnb a:last-of-type{border-bottom:0}
  .gnb a.on{color:var(--navy);box-shadow:inset 3px 0 0 var(--navy)}
  .gnb .bar{display:none}
  .hero{height:640px}
  section{scroll-margin-top:72px}
  .hero .inner{padding-bottom:96px}
  .hero h1{font-size:48px}
  .hero p{font-size:18px}
  .sec-title{font-size:34px}
  .sec-desc{font-size:17px}
  .services .grid{grid-template-columns:1fr 1fr;gap:20px}
  .card{min-height:0;padding:32px 28px 36px}
  .card h3{font-size:22px}
  .strengths .grid{grid-template-columns:1fr;border-top:0}
  .st,.st+.st{padding:36px 0;border-right:0;border-top:1px solid rgba(255,255,255,.25);padding-left:0}
  .st .num{font-size:32px}
  .st .en{margin-top:16px}
  .vision .vm{grid-template-columns:1fr;gap:20px}
  .vm-card{padding:40px 36px;min-height:0}
  .vm-card p{font-size:24px}
  .values{padding:36px}
  .values .grid{grid-template-columns:1fr 1fr;gap:28px 24px}
  .location .row{grid-template-columns:1fr;gap:32px}
  .contact{padding:36px}
  .contact .tel{font-size:34px}
}
/* ===== 모바일 ===== */
@container site (max-width:640px){
  .site{--gutter:20px}
  section{padding:72px 0}
  .header .inner{height:60px}
  .logo img{height:22px}
  .hero{height:560px}
  section{scroll-margin-top:60px}
  .hero .inner{padding-bottom:72px}
  .hero .kicker{font-size:13px}
  .hero h1{font-size:34px;line-height:1.3}
  .hero p{font-size:16px;margin-top:16px}
  .br-pc{display:none}
  .hero .tag{font-size:14px;margin-top:28px;letter-spacing:.02em}
  .hero .tag i{width:28px;flex:none}
  .hero .scroll{display:none}
  .eyebrow{font-size:13px}
  .sec-title{font-size:28px;margin-top:12px}
  .sec-desc{font-size:16px;margin-top:16px}
  .services .grid{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .card{padding:28px 24px 32px}
  .card h3{font-size:21px}
  .card p{font-size:15px}
  .strengths .grid{margin-top:40px}
  .st h3{font-size:22px}
  .vision .vm{margin-top:40px}
  .vm-card{padding:32px 24px}
  .vm-card p{font-size:22px}
  .values{padding:28px 24px}
  .values .grid{grid-template-columns:1fr;gap:20px;margin-top:24px}
  .val b{font-size:20px}
  .location .box{margin-top:40px}
  .location .box p{font-size:16px}
  .contact{padding:28px 24px}
  .contact .tel{font-size:30px}
  .footer{padding:40px 0}
  .footer .inner{flex-direction:column;gap:24px}
  .footer .info{font-size:13px}
  .footer .info span{display:block;height:0;margin:0}
}