/* ============================================================
   EROM — brand polish layer (shared across all sub-pages)
   Appended AFTER each page's own <style> so it wins on equal
   specificity. Unifies typography, header, buttons, accents and
   motion to match the chosen home (Open Sky · A×D) without
   touching each page's bespoke layout.
   ============================================================ */

:root{
  /* unify display typography with the home (drop Black Han Sans) */
  --font-display:'Space Grotesk','Pretendard',sans-serif;
  --font-display-kr:'Pretendard','Space Grotesk',sans-serif;
  /* canonical brand tokens (already blue site-wide; restated for safety) */
  --erom-brand:#1947BA; --erom-brand-dark:#0F3491; --erom-accent:#FFC01E;
  --erom-line:rgba(20,24,33,0.10);
}

::selection{background:var(--erom-accent);color:#12224A;}

/* kill mobile horizontal scroll from the off-canvas drawer (this page uses its own base, not home-base.css) */
html{overflow-x:clip;}
body{overflow-x:clip;}

/* Korean display headings → Pretendard 800 (matches home rhythm) */
h1,h2,h3,.page-hero h1,.section-intro h2{letter-spacing:-0.02em;}
:lang(ko) .page-hero h1{font-family:var(--font-display-kr);font-weight:800;}

/* ---------- Header: glass + scroll state (matches home) ---------- */
header{
  position:sticky;top:0;z-index:200;
  background:color-mix(in srgb,#fff 82%,transparent)!important;
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent!important;
  transition:border-color .3s ease, box-shadow .3s ease;
}
header.is-scrolled{
  border-bottom-color:var(--erom-line)!important;
  box-shadow:0 6px 24px rgba(15,52,145,0.06);
}
header nav a{position:relative;transition:color .18s;}
header nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-3px;height:2px;
  background:var(--erom-brand);transition:right .3s cubic-bezier(.16,1,.3,1);
}
header nav a:hover{color:var(--erom-brand);}
header nav a:hover::after,header nav a.active::after{right:0;}
header nav a.active{color:var(--erom-brand);}
/* nav: never break labels mid-word; collapse to hamburger earlier & consistently */
header nav a{white-space:nowrap;}
@media (max-width:1040px){
  header .header-inner > nav:not(.mobile-nav){display:none!important;}
  .menu-btn{display:flex!important;}
}

.login-link{border-radius:100px!important;transition:background .18s,transform .18s,box-shadow .18s!important;}
.login-link:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,52,145,0.28);}
.cart-btn{border-radius:100px!important;transition:border-color .18s,transform .18s!important;}
.cart-btn:hover{transform:translateY(-1px);}
.biz-link{transition:color .18s;}

/* ---------- Buttons / CTAs ---------- */
.bottom-cta-btn,.package-caption .btn,.hero-cta{
  border-radius:100px!important;transition:transform .18s,box-shadow .2s,opacity .18s!important;
}
.bottom-cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,0.18);opacity:1;}

/* ---------- Sky brand signature on page tops ---------- */
.page-hero{position:relative;}
.notice-banner{
  background:linear-gradient(90deg,#EAF2FF,#F4F8FF)!important;
  border-bottom:1px solid var(--erom-line)!important;
}

/* ---------- Motion: consistent reveal easing ---------- */
.reveal{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)!important;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---------- Accent hairline used across sections ---------- */
.hero-eyebrow::before{background:var(--erom-brand)!important;}

/* ---------- Biz mobile tap fix ----------
   Without touch-action:manipulation, mobile browsers wait ~300ms after
   touchend before firing click (to detect a double-tap-to-zoom gesture).
   On the biz top bar / tab strips this reads as "the button doesn't
   activate" — the tap is silently swallowed or arrives late enough that
   a second tap lands on the now-shifted UI. Also enlarges the hamburger
   toggle to the 44px minimum touch-target size and gives every top-bar
   control breathing room so adjacent taps don't clip each other. */
.biz-topbar button,
.biz-topbar a,
.biz-sidebar a,
.biz-menu-toggle,
.order-mode-tab,
.order-tab,
.sd-period-tab{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(25,71,186,0.12);
}
@media (max-width:980px){
  .biz-menu-toggle{width:44px!important;height:44px!important;margin:-4px -4px -4px 0;}
  .biz-topbar-right{gap:10px!important;}
  .order-mode-tab{padding-top:15px!important;padding-bottom:15px!important;}
  .order-tab,.sd-period-tab{padding-top:11px!important;padding-bottom:11px!important;}
}

/* ---------- Consumer header: '기업 전용' as a clear pill on mobile ----------
   The consumer sub-pages already keep .biz-link in the top bar at mobile
   widths, but only as faint gray text that reads like a passive label.
   Promote it to a compact outlined pill so it's an obvious tap target and
   matches the home (index.html) top bar. */
@media (max-width:860px){
  /* 'For Biz'를 얇은 테두리 선만 있는 심플한 형태로 노출 (index.html과 통일) */
  .biz-link{
    display:inline-flex!important;align-items:center;flex-shrink:0;white-space:nowrap;
    font-size:12px!important;font-weight:600!important;
    color:#555!important;
    padding:7px 13px!important;border-radius:100px!important;
    background:none!important;
    border:1px solid rgba(20,24,33,0.18)!important;
    touch-action:manipulation;
  }
  .biz-link::before{content:none!important;}
}
/* 햄버거 드로어 하단 안내 문구 (서브페이지 공통) */
.mobile-nav-foot{margin-top:auto;padding:18px 20px 24px;font-size:11.5px;line-height:1.75;color:#9AA3B2;border-top:1px solid rgba(20,24,33,0.10);}
.mobile-nav-foot strong{color:var(--erom-brand);font-weight:800;}
.mobile-nav-foot .mnf-tel{color:#333;font-weight:700;}
/* 초협소 화면(≈400px 이하): 서브페이지 상단바 항목이 많아(기업전용·로그인·쇼핑몰로 이동)
   간격/여백을 추가로 압축한다. 로고는 flex-shrink 기본값을 유지해(축소 허용)
   햄버거 버튼이 화면 밖으로 밀리지 않도록 한다. */
@media (max-width:400px){
  header .header-inner{gap:6px!important;padding-left:10px!important;padding-right:10px!important;}
  header .header-actions{gap:5px!important;}
  .biz-link{font-size:11px!important;padding:6px 8px!important;}
  .login-link{font-size:11px!important;padding:6px 9px!important;}
}