@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@import url("mobile-app-shell.css");

:root{
  /* 상단 GNB 실제 높이(.gnb-inner height)와 동기화 — 스티키 탭 등에서 top: var(--gnb-h) */
  --gnb-h:80px;
  --blue:#0080FF;--blue-bright:#1EC0FF;--blue-dim:#0D4A9E;
  --navy:#181842;--dark:#181842;--darker:#00070F;
  --light-blue:#EAF4FF;--gray:#F7F9FC;
  --text:#1A2030;--text-muted:#6B7A99;--border:#E2E8F5;--white:#fff;
  --green:#8FC31F;--cyan:#1EC0FF;
  --fs-hero:clamp(36px,3.2vw,64px);
  --fs-h1:clamp(30px,3vw,48px);
  --fs-h2:clamp(26px,2.4vw,40px);
  --fs-h3:clamp(20px,1.7vw,28px);
  --fs-body-lg:20px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --lh-tight:1.3;
  --lh-body:1.75;
  /* 서브페이지 타이틀 배너 공통(비즈니스·PR/미디어·문의·회사소개) — 동일 높이 */
  --subpage-hero-h:39vh;
  --subpage-hero-min-h:260px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Pretendard','Noto Sans KR',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden}
/* 페이지 진입 시 페이드인 생략 → 전환 시 배너·배경 깜빡임 완화 (나갈 때만 짧게 페이드) */
body.page-transition{
  opacity:1;
}
body.page-transition.is-leaving{
  opacity:0;
  transition:opacity .1s ease;
}
.gsap-word{display:inline-block;will-change:transform,opacity}

/* ── TYPOGRAPHY SYSTEM ── */
.txt-h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.6px;font-weight:900}
.txt-h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.4px;font-weight:800}
.txt-h3{font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:-.2px;font-weight:700}
.txt-lead{font-size:var(--fs-body-lg);line-height:1.5;color:var(--text);font-weight:700}
.txt-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-muted)}
.txt-body-sm{font-size:var(--fs-body-sm);line-height:1.7;color:var(--text-muted)}
.txt-accent{color:var(--blue);font-weight:700}

/* Section commons */
.sec{padding:140px 0}
.wrap{max-width:1920px;margin:0 auto;padding:0 80px}
.sec-label{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--blue);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.sec-label::before{content:'';width:20px;height:1px;background:var(--blue)}
.sec-title{font-size:var(--fs-h1);font-weight:900;color:var(--dark);line-height:1.25;letter-spacing:-.8px;margin-bottom:16px}
.sec-title em{font-style:normal;color:var(--blue)}
.sec-body{font-size:var(--fs-body);color:var(--text-muted);line-height:var(--lh-body)}

/* ── Subpage Header System ── */
/* 기본은 어두운 단색만 — 이미지 히어로 로드 전 파란 그라데이션이 비치지 않게 함 */
.page-header{
  position:relative;
  width:100%;
  height:var(--subpage-hero-h);
  min-height:var(--subpage-hero-min-h);
  overflow:hidden;
  background-color:#152238;
  background-image:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* 배경 이미지 없는 스토리만 기존 그라데이션 */
.sub-hero.page-header:not(.biz-page-hero):not(.press-page-hero):not(.contact-page-hero){
  background-image:linear-gradient(135deg,#1EC0FF 0%,#0080FF 35%,#181842 72%,#10102E 100%);
}
.page-header::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 60%);
}
.page-header-content{
  position:absolute;
  left:50%;
  bottom:clamp(1.75rem,4vw,3rem);
  transform:translateX(-50%);
  width:100%;
  max-width:1400px;
  padding:0 48px;
  z-index:1;
}
.page-breadcrumb{font-size:1.3rem;color:rgba(255,255,255,.72);margin-bottom:1.2rem}
.page-breadcrumb span{margin:0 .6rem;color:rgba(255,255,255,.4)}
.page-title{font-size:clamp(36px,5vw,68px);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.1}

/* ── SCROLL REVEALS ── */
.animate-on-scroll{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .32s ease,transform .32s ease;
  will-change:opacity,transform;
}
.animate-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.45s cubic-bezier(.16,1,.3,1),transform 0.45s cubic-bezier(.16,1,.3,1)}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.45s cubic-bezier(.16,1,.3,1),transform 0.45s cubic-bezier(.16,1,.3,1)}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity 0.45s cubic-bezier(.16,1,.3,1),transform 0.45s cubic-bezier(.16,1,.3,1)}
.reveal-scale{opacity:0;transform:scale(0.92);transition:opacity 0.42s ease,transform 0.42s ease}
.visible{opacity:1!important;transform:none!important}
.d1{transition-delay:.04s}.d2{transition-delay:.08s}.d3{transition-delay:.12s}.d4{transition-delay:.16s}.d5{transition-delay:.2s}

/* ── GNB ── */
.gnb{position:fixed;top:0;left:0;right:0;z-index:1000;transition:transform 0.35s ease,background 0.35s ease,backdrop-filter 0.35s ease,border-color 0.35s ease,box-shadow 0.35s ease}
.gnb.gnb-scroll-hidden{transform:translateY(-100%);pointer-events:none}

/* GNB가 위로 숨겨진 동안(html.gnb-scroll-away ← common-layout.js): 스티키 도메인·PR·문의 탭을 뷰포트 최상단에 맞춤 */
.biz-domain-tabs-wrap,
.press-tabs-wrap,
.contact-progress-wrap,
.company-tabs-wrap,
.au-history-era-nav{
  transition:top 0.35s ease;
}
html.gnb-scroll-away .biz-domain-tabs-wrap,
html.gnb-scroll-away .press-tabs-wrap,
html.gnb-scroll-away .company-tabs-wrap,
html.gnb-scroll-away .contact-progress-wrap{
  top:0;
}
html.gnb-scroll-away .au-history-era-nav{
  top:var(--au-history-era-nav-under-tabs,57px);
}
.gnb.transparent{
  background:linear-gradient(to bottom,rgba(2,8,22,.48) 0%,rgba(2,8,22,.14) 42%,rgba(2,8,22,0) 100%);
}
.gnb.solid{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,0.08);box-shadow:none}
.gnb.solid .nav>.nav-item>a{color:var(--text)}
.gnb.solid .nav>.nav-item>a:hover{color:var(--blue)}
.gnb.solid .gnb-cta{color:var(--blue);border-color:rgba(0,128,255,0.6)}
.gnb.solid .gnb-cta:hover{background:var(--blue);color:#fff;box-shadow:0 0 24px rgba(0,128,255,0.3)}
.gnb.solid .dropdown{background:rgba(255,255,255,0.98);border:1px solid rgba(0,0,0,0.08);box-shadow:0 16px 48px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.04)}
.gnb.solid .dropdown a{color:var(--text-muted)}
.gnb.solid .dropdown a:hover{color:var(--blue);background:rgba(0,128,255,0.06)}
.gnb.solid .dropdown-label{color:rgba(0,0,0,0.35)}
.gnb.solid .dropdown-divider{background:rgba(0,0,0,0.07)}
.gnb.solid .dd-badge.b2b{background:rgba(0,160,200,.1);color:rgba(0,140,180,.9);border-color:rgba(0,160,200,.25)}
.gnb.solid .dd-badge.b2c{background:rgba(33,100,220,.1);color:rgba(33,100,220,.9);border-color:rgba(33,100,220,.25)}
.gnb.solid .hbg-btn{color:#1A2030}
.gnb.solid .hbg-btn:hover{background:rgba(0,0,0,0.06)}
.gnb-inner{max-width:1920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 80px;height:80px;transition:height .3s}
.logo img{height:50px}
.nav{display:flex}
.nav>.nav-item>a{display:block;padding:0 24px;height:72px;line-height:72px;color:rgba(255,255,255,0.9);font-size:16px;font-weight:500;text-decoration:none;letter-spacing:0.5px;transition:color 0.2s;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.nav>.nav-item>a:hover{color:#fff}
.nav>.nav-item{position:relative}
.nav-item:hover .dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}
.dropdown{position:absolute;top:72px;left:0;background:rgba(0,10,28,0.97);backdrop-filter:blur(24px);border:1px solid rgba(0,128,255,0.2);border-radius:12px;padding:10px 0;min-width:220px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all 0.25s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 64px rgba(0,0,0,0.5),0 0 0 1px rgba(0,128,255,0.1)}
.dropdown a{display:block;padding:12px 24px;color:rgba(255,255,255,0.6);font-size:14px;text-decoration:none;transition:all 0.15s}
.dropdown a:hover{color:#fff;background:rgba(0,128,255,0.12);padding-left:28px}
.dropdown-label{padding:10px 24px 4px;font-size:10px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:2px;text-transform:uppercase}
.dropdown-divider{height:1px;background:rgba(0,128,255,0.1);margin:6px 0}
.dropdown-kakao-btn{
  display:block;
  margin:2px 16px 8px;
  padding:10px 14px !important;
  border-radius:8px;
  background:#fee500 !important;
  color:#191919 !important;
  font-size:13px !important;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.dropdown-kakao-btn:hover{
  background:#ffe94d !important;
  color:#191919 !important;
  padding-left:14px !important;
  transform:translateY(-1px);
}
.gnb.solid .dropdown-kakao-btn{background:#fee500 !important;color:#191919 !important}
.gnb.solid .dropdown-kakao-btn:hover{background:#ffe94d !important;color:#191919 !important}
.mnav .dropdown-kakao-btn{
  display:block;
  margin:4px 18px 12px;
  padding:12px 14px !important;
  border-radius:10px;
  background:#fee500 !important;
  color:#191919 !important;
  font-size:15px !important;
  font-weight:700;
  text-align:center;
  border:0 !important;
}
.mnav .dropdown-kakao-btn:hover{
  background:#ffe94d !important;
  color:#191919 !important;
}

/* ── 햄버거 메뉴 ── */
.hbg-btn{display:none;cursor:pointer;width:40px;height:40px;padding:0;border:none;border-radius:8px;background:transparent;margin-left:8px;flex-shrink:0;align-items:center;justify-content:center}
.hbg-btn svg{display:block}
.hbg-btn:hover{background:rgba(255,255,255,.1)}
.mnav{position:fixed;inset:0 0 0 0;top:72px;background:rgba(2,6,20,.98);backdrop-filter:blur(24px);z-index:999;overflow-y:auto;padding:20px 20px 60px;transform:translateX(101%);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.mnav.open{transform:none}
.mn-sec{margin-bottom:20px}
.mn-lbl{font-size:16px;font-weight:700;color:rgba(0,128,255,.7);letter-spacing:1.8px;text-transform:uppercase;padding:6px 0 8px;display:flex;align-items:center;gap:8px}
.mn-lbl::before{content:'';width:12px;height:1px;background:rgba(0,128,255,.5)}
.mn-sec a{display:block;padding:10px 18px;font-size:17px;color:rgba(255,255,255,.62);text-decoration:none;border-radius:7px;transition:all .18s;border:1px solid transparent;line-height:1.45}
.mn-sec a:hover{color:#fff;background:rgba(0,128,255,.1);border-color:rgba(0,128,255,.2)}
.mn-divider{height:1px;background:rgba(255,255,255,.06);margin:8px 0}
.mn-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.mn-btn-p{background:var(--blue);color:#fff;padding:13px;border-radius:8px;font-size:16px;font-weight:700;text-decoration:none;text-align:center;display:block}
.mn-btn-s{border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);padding:12px;border-radius:8px;font-size:16px;text-decoration:none;text-align:center;display:block}

/* Footer */
footer{--ft-bg:#000810;background:var(--ft-bg);padding:64px 0 32px;border-top:1px solid rgba(0,128,255,0.1)}
.ft-inner{max-width:1920px;margin:0 auto;padding:0 80px}
.ft-top{display:grid;grid-template-columns:minmax(580px,auto) 1fr;gap:80px;margin-bottom:48px}
.ft-logo img{height:60px;margin-bottom:14px}
.ft-info p{font-size:13px;color:rgba(255,255,255,0.25);line-height:2;max-width:5000px}
.ft-info-address{display:inline-block;max-width:100%;white-space:nowrap}
.ft-legal{margin-top:4px;line-height:1.75}
.ft-legal a{color:rgba(255,255,255,0.42);text-decoration:none}
.ft-legal a:hover{color:rgba(255,255,255,0.72);text-decoration:underline}
.ft-legal-sep{margin:0 6px;color:rgba(255,255,255,0.22)}
.ft-admin{font-size:13px;color:var(--ft-bg,#000810);letter-spacing:0.02em;text-decoration:none}
.ft-admin:hover{color:var(--ft-bg,#000810);text-decoration:none}
.ft-nav{display:flex;gap:56px;justify-content:flex-end;flex-wrap:wrap}
.ft-col h4{font-size:13px;font-weight:700;color:rgba(255,255,255,0.35);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px}
.ft-col a{display:block;font-size:13px;color:rgba(255,255,255,0.2);text-decoration:none;margin-bottom:10px;transition:color 0.2s}
.ft-col a:hover{color:rgba(255,255,255,0.6)}
.ft-bottom{border-top:1px solid rgba(255,255,255,0.04);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.ft-copy{font-size:13px;color:rgba(255,255,255,0.15)}
.ft-copy a{color:rgba(255,255,255,0.42);text-decoration:none}
.ft-copy a:hover{color:rgba(255,255,255,0.72);text-decoration:underline}

/* 드롭다운 뱃지 */
.dd-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.8px;vertical-align:middle;margin-left:6px;line-height:1.6}
.dd-badge.b2b{background:rgba(0,220,255,.15);color:rgba(0,220,255,.85);border:1px solid rgba(0,220,255,.2)}
.dd-badge.b2c{background:rgba(100,140,255,.15);color:rgba(150,180,255,.9);border:1px solid rgba(100,140,255,.2)}

/* Common responsive layout */
@media(min-width:1101px){
  .gnb-inner,.wrap,.ft-inner{
    max-width:1400px;
    padding-left:56px;
    padding-right:56px;
  }
}

@media(max-width:1440px){
  :root{--gnb-h:72px}
  .gnb-inner,.wrap,.ft-inner{
    max-width:1280px;
    padding-left:48px;
    padding-right:48px;
  }
  .gnb-inner{height:72px}
  .logo img{height:44px}
  .nav>.nav-item>a{font-size:15px;padding:0 20px;height:72px;line-height:72px}
  .dropdown{top:72px}
  .dropdown a{font-size:13px}
  .sec{padding:100px 0}
  .ft-top{gap:60px}
  .ft-nav{gap:40px}
}

@media(max-width:1280px){
  :root{--gnb-h:64px}
  .gnb-inner,.wrap,.ft-inner{
    max-width:1140px;
    padding-left:40px;
    padding-right:40px;
  }
  .gnb-inner{height:64px}
  .logo img{height:38px}
  .nav>.nav-item>a{font-size:14px;padding:0 16px;height:64px;line-height:64px}
  .dropdown{top:64px}
  .dropdown a{font-size:13px}
  .sec{padding:88px 0}
  .ft-top{grid-template-columns:minmax(520px,1fr) 1fr;gap:48px}
  .ft-nav{gap:32px}
}

@media(max-width:1100px){
  .sec{padding:80px 0}
  .ft-top{grid-template-columns:1fr;gap:36px}
  .ft-info-address{white-space:normal}
  .ft-nav{justify-content:flex-start;gap:28px}
}

@media(max-width:860px){
  .gnb-inner{padding:0 24px;flex-wrap:nowrap;justify-content:space-between;align-items:center}
  .wrap,.ft-inner{padding-left:24px;padding-right:24px}
  .nav{display:none}
  .hbg-btn{display:flex}
  /* 스크롤 최상단 — 모든 페이지 공통: 햄버거 흰색 (JS: #gnb.gnb-at-top) */
  #gnb.gnb-at-top .hbg-btn,
  #gnb.transparent .hbg-btn{
    color:#fff;
  }
  #gnb.gnb-at-top .hbg-btn:hover,
  #gnb.transparent .hbg-btn:hover{
    background:rgba(255,255,255,.12);
  }
  #gnb.solid:not(.gnb-at-top) .hbg-btn{
    color:#1A2030;
  }
  #gnb.solid:not(.gnb-at-top) .hbg-btn:hover{
    background:rgba(0,0,0,.06);
  }
  .mnav{top:72px}
}

@media(max-width:480px){
  :root{
    --gnb-h:60px;
    --subpage-hero-h:31vh;
    --subpage-hero-min-h:210px;
  }
  .gnb-inner{padding:0 16px;height:60px}
  .logo img{height:28px}
  .mnav{top:60px}
  .sec{padding:72px 0}
  .wrap,.ft-inner,.gnb-inner{padding:0 18px}
  .sec-title{font-size:clamp(22px,6.5vw,32px)}
  .ft-top{gap:24px}
  .ft-nav{gap:16px}
  .ft-col a{font-size:14px;line-height:1.55}
  .ft-col h4{font-size:13px}
  .ft-info p{font-size:14px;line-height:1.75}
  .ft-copy{font-size:13px}
  .dropdown-label{font-size:11px}
  .dropdown a{font-size:14px;padding:12px 20px}
  .dd-badge{font-size:12px;padding:3px 8px}
  .mn-lbl{font-size:15px}
  .mn-sec a{font-size:16px}
  .ft-bottom{flex-direction:column;gap:6px;text-align:center}
  .page-header-content{padding:0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px))}
  .page-title{font-size:clamp(28px,8vw,42px)}
}

/* 모바일 푸터: 세로 구획 + 링크 2열(가독성) — 하단 앱독과 맞춤 폭 */
@media(max-width:768px){
  footer{
    padding-top:52px;
  }
  .ft-top{
    gap:28px;
    margin-bottom:28px;
  }
  .ft-logo img{
    height:48px;
  }
  .ft-nav{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:0;
    width:100%;
    max-width:100%;
  }
  .ft-col{
    width:100%;
    min-width:0;
    padding:16px 0 18px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .ft-col:last-child{
    border-bottom:0;
    padding-bottom:2px;
  }
  .ft-col h4{
    margin-bottom:10px;
    font-size:11px;
    letter-spacing:.14em;
  }
  .ft-col a{
    overflow-wrap:break-word;
    word-break:keep-all;
  }
  /* ABOUT · BUSINESS · CONTACT: 제목 한 줄 + 링크 2열 */
  .ft-col:nth-child(1),
  .ft-col:nth-child(2),
  .ft-col:nth-child(4){
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:14px;
    row-gap:6px;
    align-content:start;
  }
  .ft-col:nth-child(1) h4,
  .ft-col:nth-child(2) h4,
  .ft-col:nth-child(4) h4{
    grid-column:1/-1;
    margin-bottom:12px;
  }
  .ft-col:nth-child(1) a,
  .ft-col:nth-child(2) a,
  .ft-col:nth-child(4) a{
    margin-bottom:0;
    padding:3px 0;
    font-size:13px;
    line-height:1.45;
  }
  .ft-col:nth-child(3) a{
    margin-bottom:0;
  }
  .ft-bottom{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
    padding-top:18px;
  }
  .ft-copy{
    line-height:1.5;
  }
}

/* 폴드 커버·초소형 폭: 가로 넘침 방지·여백·본문 최소 글자 */
@media(max-width:360px){
  .wrap,.ft-inner,.gnb-inner{padding-left:14px;padding-right:14px}
  .page-header-content{padding-left:14px;padding-right:14px}
  .biz-domain-tabs,
  .press-tabs,
  .contact-progress-inner{padding-left:12px;padding-right:12px}
}
@media(max-width:320px){
  .wrap,.ft-inner,.gnb-inner{padding-left:12px;padding-right:12px}
  .page-header-content{padding-left:12px;padding-right:12px}
  .sec-title{font-size:clamp(20px,6.2vw,28px)}
  .page-title{font-size:clamp(24px,7.5vw,36px)}
}

/* 비즈니스 탭·창업/위탁/제휴 섹션: 모바일에서 과도하게 작은 라벨 보정 */
@media(max-width:480px){
  #startup-platform .s3-tag,
  #startup-platform .s5-step-num,
  #startup-platform .s6-badge,
  #startup-platform .badge,
  #outsourcing .s3-tag,
  #outsourcing .s5-step-num,
  #outsourcing .s6-badge,
  #outsourcing .badge,
  #partnership .s3-tag,
  #partnership .s5-step-num,
  #partnership .s6-badge,
  #partnership .badge{font-size:12px;letter-spacing:.12em}
}

/* 공개 페이지: 우클릭·드래그·선택 제한 (site-guard.js, 관리자 제외) */
html.site-guard-on body {
  -webkit-user-select: none;
  user-select: none;
}
html.site-guard-on input,
html.site-guard-on textarea,
html.site-guard-on select,
html.site-guard-on [contenteditable="true"],
html.site-guard-on [data-allow-interaction],
html.site-guard-on [data-allow-interaction] * {
  -webkit-user-select: text;
  user-select: text;
}
html.site-guard-on img,
html.site-guard-on a {
  -webkit-user-drag: none;
  user-drag: none;
}
html.site-guard-on .press-tabs,
html.site-guard-on .company-tabs,
html.site-guard-on .au-history-era-nav,
html.site-guard-on .biz-domain-tabs,
html.site-guard-on .biz-startup-subtabs {
  -webkit-user-select: none;
  user-select: none;
}