/*
 * Header morph v5
 * Geometry is controlled continuously by common.js according to scroll progress.
 * Do not add CSS transitions to top/left/right/height/radius here: they would fight
 * the scroll-linked interpolation and recreate the 'snap' feeling.
 */
.site-header {
    position:fixed; z-index:1000; top:20px; left:24px; right:24px;
    will-change:top,left,right;
}
.site-header__inner {
    height:96px; padding:0 26px; display:grid; grid-template-columns:270px minmax(0,1fr) auto; column-gap:24px; align-items:center;
    background:rgba(255,255,255,.96); border:1px solid rgba(0,0,0,.07); border-radius:999px;
    box-shadow:0 10px 28px rgba(0,0,0,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    transform:translateZ(0); will-change:height,border-radius,padding,box-shadow,background-color;
}
.site-logo { width:270px; display:flex; align-items:center; gap:11px; transform-origin:left center; will-change:width; overflow:visible; }
.site-logo img { display:block; width:100%; height:auto; object-fit:contain; object-position:left center; }
.desktop-nav { justify-self:center; display:flex; height:100%; align-items:center; gap:clamp(18px,1.7vw,32px); margin:0; padding:0; }
.nav-item { position:relative; height:100%; display:flex; align-items:center; }
.nav-item>a { font-size:18px !important; font-weight:750; letter-spacing:-.01em; position:relative; display:flex; align-items:center; height:100%; }
.nav-item>a::after { content:""; position:absolute; left:50%; right:50%; bottom:13px; height:2px; background:var(--accent); transition:left .3s var(--ease),right .3s var(--ease); }
.nav-item:hover>a::after,.nav-item:focus-within>a::after { left:0; right:0; }
.nav-dropdown { position:absolute; top:calc(100% - 4px); left:50%; min-width:184px; padding:14px; background:#fff; border:1px solid #DDE6ED; border-radius:10px; box-shadow:0 16px 34px rgba(0,0,0,.08); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-5px); transition:none; }
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition:opacity .14s var(--ease), transform .14s var(--ease); }

/* v38: 마우스를 다른 상위 메뉴로 빠르게 옮길 때 이전 dropdown을 즉시 닫음 */
@media (hover:hover) and (pointer:fine) {
    .desktop-nav:hover .nav-item:not(:hover) .nav-dropdown {
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translate(-50%,-5px) !important;
        transition:none !important;
    }
}
.nav-dropdown a { display:block; padding:9px 11px; border-radius:6px; color:#566878; font-size:17px !important; transition:background .25s,color .25s; }
.nav-dropdown a:hover,.nav-dropdown a:focus { background:#EEF2F6; color:var(--accent); outline:none; }
.header-contact { justify-self:end; display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:850; letter-spacing:.08em; }
.header-contact span { width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--navy); border-radius:50%; transition:background .3s, transform .3s var(--ease); }
.header-contact:hover span { background:var(--accent); transform:rotate(45deg); }
.menu-toggle { display:none; border:0; background:none; width:44px; height:44px; padding:10px; cursor:pointer; }
.menu-toggle span:not(.sr-only) { display:block; height:1px; background:var(--navy); margin:7px 0; }
.mobile-menu,.mobile-menu-backdrop { display:none; }

@media (max-width:1280px) {
    .site-header { top:14px; left:16px; right:16px; }
    .site-header__inner { grid-template-columns:1fr auto; height:80px; padding:0 18px 0 20px; column-gap:16px; }
    .site-logo { width:200px; gap:0; }
    .site-logo img { width:100%; height:auto; }
    .desktop-nav,.header-contact { display:none; }
    .menu-toggle { display:block; width:44px; height:44px; padding:10px; }
    .mobile-menu-backdrop { display:block; position:fixed; z-index:1200; inset:0; background:rgba(0,0,0,.48); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
    .mobile-menu-backdrop.is-open { opacity:1; visibility:visible; }
    .mobile-menu { display:flex; flex-direction:column; position:fixed; z-index:1300; top:0; right:0; width:min(92vw,480px); height:100dvh; padding:28px; background:#fff; transform:translateX(101%); transition:transform .55s var(--ease); }
    .mobile-menu.is-open { transform:translateX(0); }
    .mobile-menu__top { display:flex; justify-content:space-between; align-items:center; padding-bottom:48px; }
    .mobile-brand { display:block; width:220px; max-width:62vw; }
    .mobile-brand img { display:block; width:100%; height:auto; object-fit:contain; object-position:left center; }
    .mobile-menu__close { width:44px; height:44px; font-size:30px; font-weight:200; background:none; border:0; cursor:pointer; }
    .mobile-menu nav { border-top:1px solid #ddd; }
    .mobile-menu nav a { display:flex; justify-content:space-between; align-items:center; padding:18px 2px; border-bottom:1px solid #DDE6ED; font-size:20px; font-weight:650; }
    .mobile-menu nav a span { color:#9a9a9a; font-size:11px; letter-spacing:.1em; }
    .mobile-menu>p { margin:auto 0 0; color:#777; font-size:12px; letter-spacing:.05em; }
}

.header-contact span { background:var(--brand-deep); }


/* =========================================================
   v25 — Subpage RNS LOGIN / LOGOUT circle icon exact center
   index.php 정상 스타일과 동일한 SVG 중앙정렬
   ========================================================= */
.header-contact .header-contact__icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    padding:0 !important;
    margin:0 !important;
    line-height:0 !important;
    box-sizing:border-box !important;
    overflow:hidden;
    border-radius:50%;
}

.header-contact .header-contact__icon svg{
    display:block !important;
    width:13px !important;
    height:13px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:none;
}

/* 기존 generic span 규칙보다 정확한 중앙정렬 우선 */
.header-contact:hover .header-contact__icon svg{
    transform:none;
}


/* =========================================================
   v41 — INDEX / SUBPAGE HEADER FONT SIZE LOCK
   메인과 서브페이지 모두 동일한 큰 메뉴 글씨를 유지
   ========================================================= */
@media (min-width:1281px){
    .site-header .desktop-nav .nav-item > a{
        font-size:18px !important;
    }

    .site-header .desktop-nav .nav-dropdown a{
        font-size:17px !important;
    }
}

/* =========================================================
   v43 — PUBLIC HEADER LOGO EMPHASIS
   메인과 모든 공개 서브페이지에서 회사 로고 크기를 동일하게 유지
   모바일/태블릿은 기존 크기 유지
   ========================================================= */
@media (min-width:1281px){
    .site-header .site-logo{
        width:270px;
    }
}

/* =========================================================
   2026-09-14 — 사업소개 3개 메뉴 개편 대응
   긴 서브메뉴명이 두 줄로 꺾이지 않도록 표시
   ========================================================= */
@media (min-width:1281px){
    .site-header .desktop-nav .nav-dropdown a{
        white-space:nowrap;
    }
}

/* 2026-09-15: readable navigation, with room for the larger logo. */
.site-header .desktop-nav .nav-item > a { white-space:nowrap; }
.mobile-menu { overflow-y:auto; }
.mobile-menu__close { flex-shrink:0; }
@media (min-width:1600px) {
  .site-header .desktop-nav .nav-item > a { font-size:20px !important; }
}
@media (max-width:370px) {
  .site-header .site-logo { width:176px; }
  .mobile-menu { padding:22px; }
  .mobile-brand { max-width:calc(100% - 52px); }
}