/* Apostille Korea — 공유 GNB 스타일 (index.html 인라인에서 마크업 클래스 기준 추출 · v2 comprehensive) */
.nav {
background: #ffffff;
border-bottom: 1px solid #eef1f6;
padding: 14px 80px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
/* 서브페이지의 sticky 컴팩트 헤더(.ak-compact, z-index:500)보다 낮아 드롭다운이 가려지므로,
메뉴 상호작용 중에만 GNB 를 위로 올린다(스크롤 시 컴팩트 헤더가 GNB 를 덮는 동작은 유지). */
.nav:hover, .nav:focus-within, .nav.open { z-index: 600; }
.logo { display: flex; align-items: center; gap: 10px; }
.menu { display: flex; gap: 44px; align-items: center; }
.menu-item {
font-size: 15px; font-weight: 600; color: #1a2e4a;
display: flex; align-items: center; gap: 5px; padding: 8px 0;
}
.menu-item:hover { color: #1E5BBA; }
.menu-item .caret { font-size: 10px; opacity: 0.6; }
.nav-bi{display:inline-flex;flex-direction:column;line-height:1.15;}
.nav-bi .nav-en{font-size:15px;font-weight:700;}
.nav-bi .nav-ko{font-size:10.5px;font-weight:600;color:#7da3d6;letter-spacing:-.2px;margin-top:4px;}
.nav-sec .nav-en{color:#7c8aa0;}
.nav-sec .nav-ko{color:#9aa6bd;}
.nav-sec:hover .nav-en{color:#5b6a82;}
.menu .bi-col{display:inline-flex;flex-direction:column;line-height:1.18;min-width:0;}
.menu .bi-col>[data-i18n]:first-child{font-weight:700;}
.menu .bi-col .i18n-sub{font-size:.8em;font-weight:600;color:#7da3d6;margin-left:0;margin-top:1px;letter-spacing:-.2px;}
.menu .submenu-link .lbl{align-items:center;}
.menu .submenu-link>.lbl .i18n-sub,.menu .flyout-link .i18n-sub{font-size:.82em;font-weight:600;color:#7da3d6;}
.kosub{display:block;font-size:.8em;opacity:.6;font-weight:600;margin-top:2px;line-height:1.2;}
.menu-item:hover .nav-bi .nav-ko{color:#7da3d6;}
.contact-btn.bi-btn{display:inline-flex;flex-direction:column;align-items:center;line-height:1.12;gap:3px;}
.contact-btn.bi-btn .nav-ko{font-size:10px;font-weight:600;opacity:.85;}
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-btn {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px; border-radius: 8px;
background: #f1f5fb;
font-size: 13px; font-weight: 600; color: #1a2e4a;
}
/* 상담 문의 진입 버튼 — (2026-09-03 /inquiry 폐지, 마이페이지 탭으로 이동) */
.contact-btn {
padding: 10px 20px; border-radius: 8px;
background: #0A3A8C; color: #fff;
font-size: 13px; font-weight: 700;
box-shadow: 0 4px 12px rgba(10,58,140,0.3);
text-decoration: none; cursor: pointer;
}
.sub-panel-title .ico {
width: 24px; height: 24px;
border-radius: 6px;
background: linear-gradient(135deg, #0A3A8C, #1E5BBA);
color: #fff; font-size: 13px;
display: flex; align-items: center; justify-content: center;
}
.trust-item .ico { color: #FFD56B; }
.menu-item.has-sub { position: relative; cursor: pointer; }
.menu-item.has-sub > .caret { transition: transform 0.2s; }
.menu-item.has-sub:hover > .caret { transform: rotate(180deg); }
.submenu {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(8px);
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(26,46,74,0.20);
border: 1px solid #e8edf4;
padding: 10px;
min-width: 210px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 300;
}
.submenu::before { content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
.menu-item.has-sub:hover .submenu {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
}
.submenu-link {
display: flex; align-items: center; gap: 10px;
padding: 11px 14px; border-radius: 10px;
font-size: 14px; font-weight: 600; color: #1a2e4a;
white-space: nowrap; text-decoration: none;
transition: all 0.15s ease;
}
.submenu-link:hover {
background: #f1f5fb; color: #1E5BBA;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(10,58,140,0.12);
}
.submenu-link .ico { font-size: 16px; }
.nations-search{width:100%;box-sizing:border-box;margin:0 0 9px;padding:9px 13px;border:1px solid #e3e9f2;border-radius:9px;font-size:13.5px;color:#1a2238;outline:none;background:#fff;transition:border-color .15s,box-shadow .15s;}
.nations-search::placeholder{color:#9aa6bd;}
.nations-search:focus{border-color:#1E5BBA;box-shadow:0 0 0 3px rgba(30,91,186,.13);}
.nations-grid {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 3px; max-height: 430px; overflow-y: auto; padding-right: 6px;
}
/* 국가 항목 — 병기(영문+한글) 국가명이 셀 폭을 넘으면 말줄임 처리 (site.css 와 동일 세트,
이 파일만 로드하는 페이지에서 옆 칸 겹침 방지) */
.nation-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;
font-size:13px;font-weight:600;color:#1a2e4a;text-decoration:none;white-space:nowrap;
overflow:hidden;transition:all .15s ease;}
.nation-item:hover{background:#eef4fd;}
.nation-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.nation-item .nat-col{display:inline-flex;flex-direction:column;min-width:0;line-height:1.12;overflow:hidden;}
.nation-item .nat-col>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nation-item .nat-ko{font-size:11px;font-weight:600;color:#7da3d6;margin-top:1px;}
.nations-grid .nation-item img{width:22px !important;height:15px !important;max-width:22px !important;object-fit:cover;}
/* 국가 팝업 이동 버튼(초성 / A–Z) + 그룹 머리글 — gnb-nations.js 가 붙인다(2026-10-01, 디자인 원본
ak-lee-gemini css/nations-index.css 이식). 그리드가 offsetParent 여야 버튼 이동 위치가 맞는다. */
.mega-nations .nidx{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px;}
.mega-nations .nidx button{width:30px;height:30px;padding:0;border:1px solid #c9d6ea;border-radius:6px;background:#fff;font:700 13px/1 sans-serif;font-family:inherit;color:#0A2A5E;cursor:pointer;transition:background-color .12s,color .12s;}
.mega-nations .nidx button:not(.on):not(:disabled):hover{background:#eef4fb;}
.mega-nations .nidx button:focus-visible{outline:2px solid #1E5BBA;outline-offset:1px;}
/* 선택(.on)이 호버·포커스보다 위 — 호버 규칙은 :not(.on) 으로 비켜 서고, 선택 규칙은 :hover/:focus 에도 같은 값을 건다. */
.mega-nations .nidx button.on,.mega-nations .nidx button.on:hover,.mega-nations .nidx button.on:focus-visible{background:#0A2A5E;border-color:#0A2A5E;color:#fff;}
.mega-nations .nidx button:disabled{opacity:.3;cursor:default;}
.nations-grid{position:relative;}
.nations-grid .nidx-g{grid-column:1/-1;position:sticky;top:0;z-index:1;background:#fff;padding:7px 9px 5px;font-size:12px;font-weight:800;color:#1E5BBA;border-bottom:1px solid #e3e9f2;}
.lang-btn { transition: all 0.18s ease; }
.lang-btn:hover {
background: linear-gradient(135deg, #7C4DFF, #B14DFF);
color: #fff;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 18px rgba(124,77,255,0.45);
}
.contact-btn { transition: all 0.18s ease; }
.contact-btn:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 12px 26px rgba(10,58,140,0.5);
}
.menu-item.has-sub.pinned > .submenu {
opacity: 1 !important; visibility: visible !important;
transform: translateX(-50%) translateY(0) !important;
}
.submenu-link.has-flyout {
position: relative;
justify-content: space-between;
cursor: pointer;
}
.submenu-link.has-flyout .lbl { display: flex; align-items: center; gap: 10px; }
.submenu-link.has-flyout::after {
content: "\25B8"; font-size: 12px; opacity: 0.5; margin-left: 10px;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.submenu-link.has-flyout.open { background: #eef4fb; color: #0A3A8C; }
.submenu-link.has-flyout.open::after { opacity: 1; transform: translateX(2px); color: #1E5BBA; }
.flyout {
position: absolute;
top: -11px;
left: calc(100% + 12px);
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(26,46,74,0.22);
border: 1px solid #e8edf4;
padding: 10px;
min-width: 234px;
opacity: 0; visibility: hidden;
transform: translateX(8px);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 330;
}
.flyout::before { content:''; position:absolute; left:-14px; top:0; bottom:0; width:14px; }
.flyout { max-height: 76vh; overflow-y: auto; }
.submenu-link.has-flyout.open > .flyout {
opacity: 1; visibility: visible; transform: translateX(0);
}
.flyout-link {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: 10px;
font-size: 13.5px; font-weight: 600; color: #1a2e4a;
white-space: nowrap; text-decoration: none;
transition: all 0.15s ease;
}
.flyout-link:hover {
background: #f1f5fb; color: #1E5BBA;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(10,58,140,0.12);
}
.nations-caption {
margin-top: 12px; padding: 11px 14px;
background: linear-gradient(135deg, #0A2A5E, #143E8E);
color: #fff; border-radius: 8px;
font-size: 13px; font-weight: 700; text-align: center;
letter-spacing: 0.2px;
box-shadow: 0 6px 16px rgba(10,58,140,0.22);
}
.flyout-link.has-subflyout {
position: relative;
justify-content: space-between;
cursor: pointer;
}
.flyout-link.has-subflyout .lbl { display: flex; align-items: center; gap: 8px; }
.flyout-link.has-subflyout::after {
content: "\25B8"; font-size: 11px; opacity: 0.5; margin-left: 10px;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.flyout-link.has-subflyout.open { background: #eef4fb; color: #0A3A8C; }
.flyout-link.has-subflyout.open::after { opacity: 1; transform: translateX(2px); color: #1E5BBA; }
.flyout-link.has-subflyout > .flyout {
top: -11px; left: calc(100% + 12px); min-width: 220px;
max-height: 70vh; overflow-y: auto;
}
.flyout-link.has-subflyout.open > .flyout {
opacity: 1; visibility: visible; transform: translateX(0);
}
.submenu-link.special {
justify-content: space-between;
background: linear-gradient(135deg, #FFF6D6, #FFE99B);
border: 1px solid #FFD56B;
color: #9c6f1f;
font-weight: 800;
margin-top: 4px;
}
.submenu-link.special .lbl { display: flex; align-items: center; gap: 10px; }
.submenu-link.special::after {
content: "SPECIAL";
font-size: 8px; font-weight: 800; letter-spacing: 0.6px;
background: linear-gradient(135deg, #FF8B3D, #FFAA33);
color: #fff; padding: 3px 7px; border-radius: 999px;
margin-left: 8px;
box-shadow: 0 2px 6px rgba(255,139,61,0.4);
}
.submenu-link.special:hover {
background: linear-gradient(135deg, #FFE99B, #FFD56B);
color: #7a560f;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(255,170,51,0.4);
}
.user-menu { position: relative; }
.user-btn {
width: 40px; height: 40px; border-radius: 10px;
background: #f1f5fb; color: #1a2e4a;
display: flex; align-items: center; justify-content: center;
transition: all 0.18s ease;
}
.user-btn:hover {
background: #e8f0fb; color: #0A3A8C;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 18px rgba(10,58,140,0.25);
}
.user-dropdown {
position: absolute; top: calc(100% + 12px); right: 0;
background: #fff; border-radius: 14px; border: 1px solid #e8edf4;
box-shadow: 0 18px 44px rgba(26,46,74,0.20);
padding: 8px; min-width: 168px;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: all 0.2s ease; z-index: 300;
}
.user-dropdown::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-dropdown a {
display: block; padding: 11px 14px; border-radius: 9px;
font-size: 14px; font-weight: 600; color: #1a2e4a;
text-decoration: none; text-align: center;
transition: all 0.15s ease;
}
.user-dropdown a:hover { background: #f1f5fb; color: #1E5BBA; transform: translateY(-2px); }
.user-btn { position: relative; overflow: hidden; }
.user-menu:not(.logged-in) .user-btn {
background: linear-gradient(135deg,#eef2ff 0%,#f6eefe 50%,#eafaff 100%);
color: #3b2a8c;
box-shadow: 0 0 0 1.5px rgba(150,140,255,.40), 0 6px 16px rgba(120,90,220,.20);
animation: holoGlow 2.1s ease-in-out 3;
}
.user-menu:not(.logged-in) .user-btn::after {
content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.92) 42%, rgba(120,200,255,.68) 49%, rgba(225,130,255,.68) 56%, rgba(255,235,150,.55) 62%, transparent 74%);
background-size: 260% 100%; background-position: 210% 0; mix-blend-mode: screen;
animation: holoSheen 2.1s ease-in-out 3;
}
.user-menu.logged-in .user-btn { animation: none; }
.user-menu.logged-in .user-btn::after { display: none; }
.user-dropdown a.my-primary {
background: linear-gradient(135deg,#0A3A8C,#1E5BBA); color:#fff; font-weight:800;
box-shadow: 0 6px 14px rgba(10,58,140,.30); margin-bottom:4px; letter-spacing:-.2px;
}
.user-dropdown a.my-primary:hover {
background: linear-gradient(135deg,#0A3A8C,#2f6fd6); color:#fff;
transform: translateY(-2px); box-shadow: 0 9px 20px rgba(10,58,140,.42);
}
.lang-menu { position: relative; }
.lang-dropdown {
position: absolute; top: calc(100% + 12px); right: 0;
background: #fff; border-radius: 14px; border: 1px solid #e8edf4;
box-shadow: 0 18px 44px rgba(26,46,74,0.20);
padding: 8px; min-width: 184px;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: all 0.2s ease; z-index: 300;
max-height: 70vh; overflow-y: auto;
}
.lang-dropdown::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.lang-menu:hover .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dropdown a {
display: flex; align-items: center; gap: 10px;
padding: 9px 13px; border-radius: 9px;
font-size: 13.5px; font-weight: 600; color: #1a2e4a;
text-decoration: none; white-space: nowrap;
transition: all 0.15s ease;
}
.lang-dropdown a:hover { background: #f1f5fb; color: #1E5BBA; transform: translateY(-2px); }
.lang-dropdown a .flag-em { font-size: 16px; }
.about-icon { position: relative; padding: 0; }
.about-icon .icon-btn {
width: 40px; height: 40px; border-radius: 10px;
background: #f1f5fb; color: #1a2e4a;
display: flex; align-items: center; justify-content: center;
transition: all 0.18s ease;
}
.about-icon .icon-btn:hover {
background: #e8f0fb; color: #0A3A8C;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 18px rgba(10,58,140,0.25);
}
.about-icon > .submenu { left: auto; right: 0; min-width: 190px; transform: translateY(8px); }
.about-icon.has-sub:hover > .submenu,
.about-icon.has-sub.pinned > .submenu {
opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
}
.about-icon .flyout { left: auto; right: calc(100% + 12px); transform: translateX(-8px); }
.about-icon .flyout::before { left: auto; right: -14px; }
.about-icon .submenu-link.has-flyout.open > .flyout { transform: translateX(0); }
.about-icon .submenu-link.has-flyout::after { content: "\25C2"; }
.nav-toggle{display:none;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:#0A2A5E;padding:4px 8px;}
@media (max-width:1024px){
.nav{flex-wrap:wrap;padding:12px 20px;}
.nav-toggle{display:flex;margin-left:auto;order:2;}
.menu,.nav-right{flex-basis:100%;width:100%;display:none;flex-direction:column;order:3;}
.nav-drawer>.menu,.nav-drawer>.nav-right{display:flex;}
.menu{gap:0;margin-top:10px;border-top:1px solid #eef1f6;}
.menu-item{padding:13px 4px;width:100%;border-bottom:1px solid #f3f5fa;}
/* 모바일 아코디언: 하드하이드 대신 흐름배치+토글 (탭으로 2·3뎁스 도달) */
.menu-item .submenu{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 0 4px;min-width:0;width:auto;background:transparent;z-index:auto;}
.menu-item.mobile-open>.submenu{display:block;}
.menu-item.has-sub>.caret{transition:transform .2s;}
.menu-item.mobile-open>.caret{transform:rotate(180deg);}
.submenu-link{white-space:normal;}
.menu-item .submenu .flyout{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;display:none;opacity:1!important;visibility:visible!important;box-shadow:none!important;border:0;width:auto!important;min-width:0!important;max-width:100%!important;max-height:none!important;overflow:visible!important;padding:2px 0 6px 14px;margin:0;}
.submenu-link.has-flyout.open>.flyout{display:block;}
.menu-item .submenu .submenu-link.has-flyout{display:block!important;}
.menu-item .submenu .submenu-link.has-flyout .lbl{width:100%;}
.submenu .flyout.mega,.submenu .flyout.mega-purpose{grid-template-columns:1fr!important;width:auto!important;max-width:100%!important;}
.menu-item .caret{margin-left:auto;}
.nav-right{gap:10px;margin-top:12px;align-items:stretch;}
.nav-right .contact-btn{width:100%;}
/* (2026-10-01 T11) 옛 홈 히어로용 `.hero{padding:40px 24px 50px}`·`.hero-inner{1fr;gap:30px}` 는 걷었다 — 지금 홈(/·국가 홈)에는 `.hero` 가 없고
(홈 히어로는 home-copy.css), `.hero` 를 쓰는 다른 페이지(visit·카테고리·센터·process 등)의 자기 여백을 덮어썼다. */
.stat-bar{flex-wrap:wrap;}
.stat-bar .stat-tile{flex:1 1 calc(25% - 8px);}
}
@media (max-width:720px){
.nav{padding:12px 16px;}
/* `.hero`·`.hero-title` 옛 홈 규칙 걷음 (2026-10-01 T11, 위 설명 참고) */
.stat-bar .stat-tile{flex:1 1 calc(50% - 8px);}
.trust-bar{gap:12px;}
.client-board{margin:32px auto 0;}
.footer-contacts{grid-template-columns:1fr 1fr;}
.footer-inner{padding:22px 18px;}
.cf-stage{height:300px;}
.cf-arrow{width:40px;height:40px;font-size:22px;}
}
.flyout.mega{width:540px;max-width:80vw;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.flyout.mega .mega-col{min-width:0;}
.flyout.mega .mega-h{font-weight:800;font-size:13.5px;border-bottom:2px solid #e6ebf5;padding-bottom:7px;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.flyout.mega .mega-h.personal{color:#1E5BBA;border-color:#dbe7fb;}
.flyout.mega .mega-h.corp{color:#0E7C66;border-color:#cdeee3;}
.flyout.mega .mega-sub{font-size:10px;font-weight:600;color:#9aa3b0;}
.flyout.mega .mega-top{display:flex;gap:6px;margin-bottom:8px;}
.flyout.mega .mega-top a{flex:1;text-align:center;font-size:11.5px;font-weight:800;border-radius:7px;padding:6px 0;text-decoration:none;color:#fff;background:#1E5BBA;}
.flyout.mega .mega-top a.corp{background:#0E7C66;}
.flyout.mega .mega-top a.mt-best{background:#FFE6A1;color:#5a3d05;}
.flyout.mega .mega-col .flyout-link{padding:5.5px 6px;font-size:12.5px;border-radius:6px;}
/* 평면 메뉴 토글(국가별). 2026-10-19 「문서별」 평면 메뉴는 개인별·기업별 드롭다운으로 바뀌어 그 규칙을 걷었다. */
.nav-nations-toggle{display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:start;}
.nav-nations-toggle:focus-visible{outline:2px solid #1E5BBA;outline-offset:5px;border-radius:4px;}
@media(max-width:760px){.flyout.mega{width:auto;max-width:92vw;grid-template-columns:1fr;gap:14px;}}
/* 국가별: 「국가별 민원서류」 중간 플라이아웃 없이 국가 패널을 바로 펼친다 (2026-10-01, 디자인 원본
ak-lee-gemini `.submenu.flat` · 문서별과 같은 구조/스크립트). 패널이 넓어(1080px) 메뉴 항목 기준으로 두면
1280px 화면에서 오른쪽이 잘린다 -> 데스크톱에서는 항목을 static 으로 두어 `.nav`(sticky) 기준
메뉴 바 바로 아래·화면 가운데에 연다(가운데 정렬 transform 은 공용 `.submenu` 값 그대로). */
.nav [data-gnb-menu="nations"]>.nations-submenu{width:1080px;max-width:calc(100vw - 32px);min-width:0;padding:0;border:0;background:transparent;box-shadow:none;}
.nav .nations-submenu>.flyout.mega-nations{position:relative;inset:auto;width:100%;max-width:none;box-sizing:border-box;padding:14px 16px;opacity:1;visibility:inherit;transform:none;max-height:calc(100vh - 110px);overflow-y:auto;}
.nav .nations-submenu>.flyout::before{display:none;}
.nav .nations-submenu .nations-search{margin-bottom:10px;}
.nav .nations-submenu a:focus-visible{outline:2px solid #1E5BBA;outline-offset:2px;}
.nav [data-gnb-menu="nations"]:not(.pinned)>.nations-submenu{opacity:0;visibility:hidden;pointer-events:none;}
.nav [data-gnb-menu="nations"].pinned>.nations-submenu{pointer-events:auto;}
.nav [data-gnb-menu="nations"].pinned>.nav-nations-toggle>.caret{transform:rotate(180deg);}
@media(min-width:1025px){
.nav [data-gnb-menu="nations"]{position:static;}
.nav [data-gnb-menu="nations"]>.nations-submenu{top:100%;}
/* 패널이 메뉴 바 아래(.nav 기준)에 붙어 항목과 패널 사이 틈이 언어마다 다르다(ko 한 줄 라벨 = 32px).
열린 동안만 버튼 아래로 호버 다리를 내려 마우스가 패널로 가는 길에 닫히지 않게 한다. */
.nav [data-gnb-menu="nations"]>.nav-nations-toggle{position:relative;}
.nav [data-gnb-menu="nations"].pinned>.nav-nations-toggle::after{content:'';position:absolute;left:-12px;right:-12px;top:100%;height:32px;}
.nav .nations-submenu .nations-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:min(430px,calc(100vh - 300px));}
}
@media(max-width:1024px){
.nav .nav-nations-toggle{width:100%;justify-content:space-between;min-height:44px;}
.nav [data-gnb-menu="nations"]>.nations-submenu{width:100%;max-width:100%;}
.nav .menu-item .nations-submenu>.flyout.mega-nations{display:block;max-height:none;overflow:visible;}
}
/* 모바일 가독성 (2026-10-01 사용자 지적 「모바일 가독성이 너무 안 좋다」)
- 평면 패널(국가별·문서별)이 회색 카드(.submenu) 안에 흰 카드(.flyout)가 한 번 더 들어가고, 공용 아코디언 값
`padding:2px 0 6px 14px` 때문에 왼쪽만 들여쓰이고 오른쪽은 붙어 잘린 듯 보였다 -> 바깥 카드를 걷고 흰 카드 하나로, 여백은 좌우 같게.
- 보조 줄(국문·영문 병기)의 연하늘(#7da3d6)은 흰 바탕 대비가 약하다 -> 한 단 진하게. 국가명 13 -> 15px.
- 국가 그리드는 300px 안에서 4줄만 보여 페이지 안의 작은 스크롤이 됐다 -> 화면 높이 기준으로 키운다.
- 캡션 「Hover…/마우스를 올리면」은 터치 화면에선 맞지 않는 안내라 모바일에서는 숨긴다(데스크톱은 그대로). */
@media(max-width:1024px){
.nav .menu-item.has-sub>.nations-submenu{padding:0 !important;background:transparent !important;border:0 !important;margin:8px 0 4px !important;}
.nav .menu-item .nations-submenu>.flyout.mega-nations{box-sizing:border-box;padding:12px !important;background:#fff;border:1px solid #e3e9f2 !important;border-radius:12px;}
.nav .nations-submenu .nat-ko{color:#56719a !important;font-size:12.5px;}
.nav .nations-submenu .nations-caption{display:none;}
}
}
.flyout.mega-purpose{width:430px;max-width:84vw;padding:14px 16px;}
@media(max-width:760px){.flyout.mega-purpose{width:auto;max-width:92vw;}}
.flyout.mega.biz{width:560px;grid-template-columns:1fr 1fr;gap:18px 20px;max-height:calc(100vh - 150px);overflow-y:auto;}
.flyout.mega.biz::after{content:'';position:absolute;right:-14px;top:0;bottom:0;width:14px;}
.flyout.mega.personal{width:600px;grid-template-columns:1fr 1fr;gap:16px 20px;max-height:calc(100vh - 150px);overflow-y:auto;}
.flyout.mega.personal::after{content:'';position:absolute;right:-14px;top:0;bottom:0;width:14px;}
.flyout.mega .mega-h.imm{color:#1E5BBA;border-color:#dbe7fb;}
.flyout.mega .mega-h.glb{color:#0E7C66;border-color:#cdeee3;}
.flyout.mega .mega-h.wed{color:#C2185B;border-color:#f3cede;}
.flyout.mega .mega-h.ast{color:#7A4ED6;border-color:#e2d7f7;}
.flyout.mega .mega-top a.imm{background:#e7effc;color:#1E5BBA;border:1px solid #dbe7fb;transition:all .15s ease;}
.flyout.mega .mega-top a.imm:hover{background:#1E5BBA;color:#fff;border-color:#1E5BBA;}
.flyout.mega .mega-top a.glb{background:#e2f4ed;color:#0E7C66;border:1px solid #cdeee3;transition:all .15s ease;}
.flyout.mega .mega-top a.glb:hover{background:#0E7C66;color:#fff;border-color:#0E7C66;}
.flyout.mega .mega-top a.sch{background:#fbeadf;color:#C2410C;border:1px solid #f6d9c6;transition:all .15s ease;}
.flyout.mega .mega-top a.sch:hover{background:#C2410C;color:#fff;border-color:#C2410C;}
.flyout.mega .mega-top a.wed{background:#fbe7f0;color:#C2185B;border:1px solid #f3cede;transition:all .15s ease;}
.flyout.mega .mega-top a.wed:hover{background:#C2185B;color:#fff;border-color:#C2185B;}
.flyout.mega .mega-top a.ast{background:#efe8fb;color:#7A4ED6;border:1px solid #e2d7f7;transition:all .15s ease;}
.flyout.mega .mega-top a.ast:hover{background:#7A4ED6;color:#fff;border-color:#7A4ED6;}
@media(max-width:1100px){.flyout.mega.personal{width:600px;grid-template-columns:1fr 1fr;}}
@media(max-width:760px){.flyout.mega.personal{width:auto;max-width:92vw;grid-template-columns:1fr;gap:14px;}}
body.dl-active .menu-item.has-sub:not(.deeplinked):hover .submenu{opacity:0;visibility:hidden;}
.flyout.mega.compact{grid-template-columns:1fr 1fr !important;}
.submenu-link{position:relative;}
.submenu-link:hover{z-index:30;}
.flyout.mega{z-index:20;}
.flyout.mega .mega-h.ind{color:#C2185B;border-color:#f3cede;}
.flyout.mega .mega-h.sol{color:#0E7C66;border-color:#cdeee3;}
.flyout.mega .mega-h.law{color:#7A4ED6;border-color:#e2d7f7;}
.flyout.mega .mega-h.trd{color:#B7791F;border-color:#f0e0bd;}
.flyout.mega .mega-top a.ind{background:#fbe7f0;color:#C2185B;border:1px solid #f3cede;transition:all .15s ease;}
.flyout.mega .mega-top a.ind:hover{background:#C2185B;color:#fff;border-color:#C2185B;}
.flyout.mega .mega-top a.sol{background:#e2f4ed;color:#0E7C66;border:1px solid #cdeee3;transition:all .15s ease;}
.flyout.mega .mega-top a.sol:hover{background:#0E7C66;color:#fff;border-color:#0E7C66;}
.flyout.mega .mega-top a.law{background:#efe8fb;color:#7A4ED6;border:1px solid #e2d7f7;transition:all .15s ease;}
.flyout.mega .mega-top a.law:hover{background:#7A4ED6;color:#fff;border-color:#7A4ED6;}
.flyout.mega .mega-top a.trd{background:#f9efdb;color:#B7791F;border:1px solid #f0e0bd;transition:all .15s ease;}
.flyout.mega .mega-top a.trd:hover{background:#B7791F;color:#fff;border-color:#B7791F;}
.badge-soon{font-size:9.5px;font-weight:800;color:#a3873d;background:#fff3d6;border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:1px;}
@media(max-width:1100px){.flyout.mega.biz{width:560px;grid-template-columns:1fr 1fr;}}
@media(max-width:760px){.flyout.mega.biz{width:auto;max-width:92vw;grid-template-columns:1fr;gap:14px;}}
.logo.imgok .logo-img{display:block;}
.logo.imgok .logo-mark,.logo.imgok .logo-text{display:none;}
.logo-home:hover .logo-img{transform:translateY(-2px);filter:drop-shadow(0 6px 12px rgba(10,42,94,.25));}
.logo-home:hover .logo-mark{transform:translateY(-2px);box-shadow:0 6px 14px rgba(10,42,94,.35);}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.theme-chip{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#f6f8fc;border:1px solid #e8edf5;border-radius:9px;text-decoration:none;transition:.15s;}
.theme-chip:hover{background:#eaf1fb;border-color:#bcd2f0;transform:translateY(-1px);}
.theme-chip .tc-ic{font-size:17px;line-height:1;}
.theme-chip .tc-tx{display:flex;flex-direction:column;font-size:12px;font-weight:700;color:#0A2A5E;line-height:1.25;}
.theme-chip .tc-tx .i18n-sub{font-size:10px;font-weight:600;color:#7da3d6;margin-top:2px;}
.nav-right .lang-menu{order:99;}
.lang-dropdown{right:0;left:auto;}
.ak-collapse .lbl{ font-size:13px;font-weight:600;color:#6b7e99; }
@keyframes holoGlow {
0%,100% { box-shadow: 0 0 0 1.5px rgba(150,140,255,.40), 0 6px 16px rgba(120,90,220,.20); }
50% { box-shadow: 0 0 0 2.5px rgba(190,130,255,.65), 0 10px 24px rgba(90,170,255,.45); }
}
@keyframes holoSheen { 0% { background-position: 210% 0; } 55%,100% { background-position: -130% 0; } }
/* about.css 범용 .logo(카드)가 GNB 로고에 새는 것 차단 */
.nav a.logo,.nav a.logo-home{background:none;border:0;min-height:0;padding:0;border-radius:0;box-shadow:none;flex-direction:row;align-items:center;gap:10px;}
.nav a.logo:hover{transform:none;box-shadow:none;border:0;}
.nav a.logo img{max-height:none;max-width:none;}
.nav a.logo .cn{margin-top:0;}
/* langpos + GNB가 상단 대체 → 기존 mini topbar 숨김 */
.nav-right .lang-menu{order:99;} .lang-dropdown{right:0;left:auto;}
.ak-topbar{display:none !important;}
/* 2026-09-09: 옛 .topbar 헤더 숨김 규칙을 뺐다 — 이 CSS 를 싣는 페이지 중
`.topbar` 마크업을 가진 것이 하나도 남지 않았다(mypage 가 골격에서 뺀 것이 마지막).
web/404.html 은 자체 CSS 로 자기 .topbar 를 그리고 이 파일을 싣지 않는다. */
/* ── 히어로 동기화 보강 ── */
/* 1) GNB 버튼 테두리 리셋(히어로 전역 button{border:none} 대체, .nav 한정 → 페이지 버튼 불간섭) */
.nav button{ border:none; cursor:pointer; font-family:inherit; }
/* 2) GNB 폰트를 히어로와 동일 강제(페이지 body 폰트 상속으로 인한 이질감 방지) */
/* 헤더 폰트는 .nav 한 곳에만 걸고 상속으로 내린다 — `.nav *` 는 헤더 노드
2,200여 개 전부를 매칭해 스타일 재계산을 늘렸다. 폼 컨트롤만 상속이 안 되므로
따로 inherit 를 준다(button 은 아래 줄에서 이미 준다). */
.nav{ font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif; }
.nav input, .nav select, .nav textarea{ font-family:inherit; }
/* ===== 메가메뉴 호버인텐트(대각선 이동 보호) =====
JS(site-gnb.js initHoverIntent)가 body.mm-aim 추가 + 1depth에 .mm-open 토글.
이때 1depth 서브메뉴는 :hover가 아닌 .mm-open/.pinned로만 표시 → 두 번째 메뉴를 스쳐도 즉시 안 바뀜.
deeplink 모드(dl-active)에서는 기존 동작으로 폴백. */
body.mm-aim:not(.dl-active) .nav .menu > .menu-item.has-sub > .submenu{ opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px); }
body.mm-aim:not(.dl-active) .nav .menu > .menu-item.has-sub.mm-open > .submenu,
body.mm-aim:not(.dl-active) .nav .menu > .menu-item.has-sub.pinned > .submenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
body.mm-aim:not(.dl-active) .nav .menu > .menu-item.has-sub.mm-open > .caret{ transform:rotate(180deg); }
/* ===== GNB 심화 — 3차 플라이아웃·메가 패널·언어 드롭다운 (site.css 동기화, site-gnb.css 만 로드하는 페이지의 신 GNB 지원) ===== */
.menu .submenu-link > .lbl .i18n-sub, .menu .flyout-link .i18n-sub{font-size: .82em; font-weight: 600; color: #7da3d6;}
.nation-item .nat-col > span{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* RTL menus open toward the page interior rather than past its left edge. */
html[dir="rtl"] .mc-gnb .lang-dropdown,html[dir="rtl"] .mc-gnb .ak-dd{left:0;right:auto}
.submenu-link.has-flyout:hover{background: #eef4fb; color: #0A3A8C;}
.submenu-link.has-flyout:hover::after{opacity: 1; transform: translateX(2px); color: #1E5BBA;}
.submenu-link.has-flyout:hover > .flyout{opacity: 1; visibility: visible; transform: translateX(0);}
.about-icon .submenu-link.has-flyout:hover > .flyout{transform: translateX(0);}
.flyout.mega .mega-search{grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 7px;
background: linear-gradient(135deg,#0A3A8C,#1E5BBA); color: #fff; font-weight: 800;
font-size: 12.5px; border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; text-decoration: none;}
/* ============================================================
헤더 호버를 가볍게 (2026-09-08)
증상 — 메뉴에 마우스만 올려도 헤더가 무겁게 반응한다.
원인 — ① `transition: all` 이 여러 곳에 걸려 있다. 국가 그리드 항목(136개)·
용도 칩(10개)까지 포함이라, 호버 한 번에 브라우저가 애니메이션 가능한
모든 속성을 후보로 놓고 재계산한다.
② 목록 행 호버가 `transform: translateY(-2px)` + `box-shadow` 확대를 같이 준다.
`box-shadow` 는 합성(compositing)으로 못 넘겨서 매 프레임 재도색이고,
블러 44px 짜리 패널 위에서 행마다 이러면 비용이 커진다.
조치 — 전이 대상을 실제로 바뀌는 속성(배경·글자색)으로 못박고, 목록 행에서
들어올림·그림자를 뺀다. 패널 열림은 합성만 하는 opacity·transform 만 남긴다.
색·모양·타이밍 값은 그대로라 겉보기는 같고 스침 반응만 가벼워진다.
============================================================ */
/* 1) transition:all → 실제로 바뀌는 속성만 */
.submenu-link,
.flyout-link,
.user-dropdown a,
.lang-dropdown a,
.nation-item,
.theme-chip,
.flyout.mega .mega-top a{ transition: background-color .13s linear, color .13s linear; }
/* 2) 목록 행은 색만 바뀐다 — 들어올림·그림자 제거(프레임당 재도색 제거) */
.submenu-link:hover,
.flyout-link:hover,
.user-dropdown a:hover,
.lang-dropdown a:hover,
.theme-chip:hover{ transform: none; box-shadow: none; }
/* 3) 드롭다운 패널 — 합성 가능한 두 속성만 */
/* ⚠️ `visibility` 를 반드시 같이 전이시킨다 — 빼면 버튼에서 패널로 마우스를 내리는
0.1초 사이에 패널이 즉시 `hidden` 이 되어 **언어·계정 메뉴를 고를 수 없다.**
`visibility` 는 이산 속성이라 닫힐 때 전이 시간만큼 `visible` 로 남아 그 유예를 만든다.
(원래 `transition:all` 이 이 역할을 했다. media-chrome.css 의 `.ak-dd` 도 같은 이유로
`visibility` 를 넣어 뒀다.) 도색 비용은 없다. */
.user-dropdown,
.lang-dropdown{ transition: opacity .16s ease, transform .16s ease, visibility .16s; }
/* 4) 우측 아이콘 버튼 — 가장 자주 스치는 자리. 확대·큰 그림자 대신 배경만 */
.about-icon .icon-btn,
.user-btn,
.lang-btn,
.contact-btn{ transition: background-color .13s linear, color .13s linear, box-shadow .13s linear, transform .13s linear; }
.about-icon .icon-btn:hover,
.user-btn:hover{ transform: none; box-shadow: none; }
.lang-btn:hover{ transform: none; box-shadow: 0 3px 8px rgba(124,77,255,.28); }
.contact-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(10,58,140,.34); }
/* 5) 로고 호버의 drop-shadow 필터 제거 — 필터는 합성이 안 되고 재도색이다 */
.logo-home:hover .logo-img{ filter: none; }
/* ============================================================
헤더 전체 성능 (2026-09-08)
헤더 마크업이 페이지의 62% 다 — 태그 2,208개 · 국기 이미지 137개(64KB/104KB).
`content-visibility:auto` 로 닫힌 국가 패널의 배치를 건너뛰게 해 봤으나
실측(LayoutObjects·LayoutDuration)에서 차이가 없어 되돌렸다 — 이 규모는
마크업 자체를 줄여야 줄고, 그건 생성기 `scripts/build_nations_menu.py` 몫이다.
============================================================ */
/* 열림 애니메이션은 그대로 두고, 큰 블러만 줄인다(블러 44px 는 도색 비용이 크다) */
.submenu, .flyout, .user-dropdown, .lang-dropdown{ box-shadow:0 12px 30px rgba(26,46,74,.18); }
/* 움직임 줄이기 설정을 켠 사용자에겐 헤더 전이·인트로 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce){
.nav *, .nav *::before, .nav *::after{ transition:none !important; animation:none !important; }
}
/* ============================================================
데스크톱(≥1025) 한 줄 맞춤 (2026-09-08)
메인 헤더(`.nav`)가 1440px 에서 메뉴 라벨을 줄바꿈하고 로고 보조문구가 첫
메뉴와 겹쳤다 — 좌우 여백 80px + 메뉴 간격 44px 이 정본 우측 클러스터
(장바구니·상담 CTA·정보·계정·언어)와 같이 들어가지 못해서다.
주문·마이페이지 화면이 쓰던 값(24px / 20px)을 헤더 공용으로 올린다.
헤더는 전 페이지 한 종류라 여기서 한 번만 정한다.
============================================================ */
@media(min-width:1025px){
/* `.mc-bc.nav`(미디어 빵부스러기 바)는 about-bi.js 스킵용으로 nav 를 달고 있을 뿐
헤더가 아니다 — 여백을 건드리지 않게 뺀다. */
/* 넓은 화면(>1440)에선 헤더 콘텐츠(로고~오른쪽 묶음)를 가운데 1440px 안에 둔다(2026-10-19 T17, 사용자 결정 「통일안 2 + 헤더 1440 상한」).
1920 에서 로고가 화면 왼끝(24)·본문 글자선이 421 로 397px 벌어졌던 것을 줄인다(→ 256). 배경·아래 테두리는 .nav 자체라 전폭 그대로.
padding 의 100% = 화면(본문) 폭이라 1440 이하에선 계산값이 24px 보다 작아 기존과 같다. 상한 값은 site-shell.css --ak-header. */
.nav:not(.mc-bc){ padding-inline:max(24px, calc((100% - var(--ak-header, 1440px)) / 2 + 24px)); gap:16px; }
/* 메뉴 간격 — 고정값 대신 **남는 폭을 나눠 준다** (2026-09-09 사용자 지적: 너무 좁다)
한 줄에 맞추려고 44px -> 20px 로 줄였는데, 남는 폭이 트리마다 크게 달라
한쪽 기준으로 고정하면 다른 쪽이 줄바꿈된다. 1440x900 실측 여유 폭:
ko 149px (한글 라벨이 짧다) · en 20px · 루트(영·한 병기) 12px
그래서 `flex:1` + `space-evenly` 로 바꿨다 — 여유가 있으면 저절로 넓어지고
빠듯하면 최소 간격(20px)까지만 좁아진다. 줄바꿈은 어느 폭에서도 생기지 않는다. */
.nav:not(.mc-bc) .logo{ flex-shrink:0; }
.nav:not(.mc-bc) .contact-btn{ white-space:nowrap; }
/* 메뉴 배치 — 고정 간격 대신 **남는 폭 안에서 네 항목을 양끝 맞춤**으로 펼친다(이 블록이 유일한 정본, 2026-10-19 T12a 재작업).
사용자: 「100% 느낌으로, 아래 히어로 문구 '비대면으로 간단하고 안전하게 대행해 드립니다' 줄과 비슷하게」.
실측(1440 /ko/): 그 히어로 둘째 줄 폭 757px → 메뉴 묶음(첫 항목 왼끝~마지막 항목 오른끝) 상한 760px.
- 로고·오른쪽 묶음은 flex:0 0 auto — **절대 줄거나 밀리지 않는다**(1차 시안에서 사용자 화면 1420~1440 에서 로고가 왼쪽 밖으로,
오른쪽 묶음이 오른쪽 밖으로 밀렸다는 보고 → 남는 폭을 다투는 건 메뉴 하나뿐이게).
- 메뉴는 flex:1 1 0 + min-width:0 : 둘 사이 남는 폭만 차지하고, max-width 856px(=760 + 좌우 padding 48×2, border-box) 에서 멈춰
margin-inline:auto 로 그 사이 가운데에 선다. 좁아지면(1025~1366) 비례해서 줄어든다.
- padding-inline 48px : 로고·장바구니와 최소 48px(+헤더 묶음 간격 12~16px). 32px 이던 것을 T12b 로고 「BETA」 배지(로고 바깥 약 40px)가 첫 메뉴와 닿지 않게 늘렸다.
- justify-content:space-between : 항목 길이가 달라도(ko 248px · 루트 병기 359px · vi 425px) 묶음 폭은 같고 사이만 달라진다.
- gap 16px : 항목 사이 최소 간격. 가장 긴 vi 도 1025 에서 한 줄(실측 메뉴 상자 556px − 96 = 460 ≥ 항목 407+48).
옛 근거(「By Individual & Business」 192px 라벨 때문에 20~56px 고정)와 2026-10-19 오전의 단계별 고정 간격(28~140px)은 걷었다.
1025~1599 의 「덜어내기」 규칙(아래 1025~1599·1025~1149·1025~1199 블록)은 글자·버튼만 줄이고 간격은 건드리지 않는다. */
.nav:not(.mc-bc) .logo,.nav:not(.mc-bc) .nav-right{ flex:0 0 auto; }
/* 2026-10-19 사용자 「간격이 조금만 더 좁았으면」 → 묶음 상한 760 → 640px(max-width 736 = 640 + 48×2).
1440 ko 항목 사이 약 166 → 131px. 좁은 폭(≤ 약 1300)은 원래도 상한 아래라 그대로다.
2026-10-20 사용자 「헤더 간격이 더 좁아도 될 것 같아」 → 상한 640 → 520px(max-width 616). ko 사이 약 131 → 91px, vi 도 최소 16px 이상. */
.nav:not(.mc-bc) .menu{ flex:1 1 0; min-width:0; max-width:616px; margin-inline:auto; padding-inline:48px; justify-content:space-between; gap:16px; }
/* 폭 확보 ① 장바구니는 1500px 미만에서 글자를 접고 아이콘+개수만 남긴다.
🛒 와 숫자로 뜻이 통하는데 라벨 하나가 45px 을 먹어 메뉴 간격을 그만큼 좁혔다.
(모바일에선 `cart.css` 가 이미 같은 처리를 한다.) */
@media(max-width:1499px){
.nav .nav-right .cart-pill .ak-cart-label{ display:none; }
}
/* 폭 확보 ② 1439px 이하는 원래 **간격과 무관하게 헤더가 2~3줄로 깨져 있었다**
(실측 1366x768 — 루트 152px · en 120px. 모바일 햄버거는 1024px 이하라
1025~1366 구간이 비어 있었다). 글자 15 -> 14px · 좌우 여백 24 -> 16px ·
묶음 간격 16 -> 12px 으로 약 60px 을 벌어 1366 에서 네 트리 모두 한 줄이 된다. */
@media(max-width:1439px){
.nav:not(.mc-bc){ padding-inline:16px; gap:12px; }
.nav .nav-bi .nav-en{ font-size:14px; }
}
}
/* ============================================================
헤더는 페이지 CSS 에 물들지 않는다 (2026-09-08)
`mc-gnb` 판을 걷어내면서, 예전에 `media-chrome.css` 가 `.mc-gnb …` 로 막아 주던
페이지 CSS 누수가 그대로 드러났다. 실측(ko/about-services vs ko/terms 계산값 비교):
- `about.css .logo img{object-fit:contain}` 이 GNB 로고에 걸린다(고객사 로고 카드용 규칙)
- 상담 CTA 글자색이 페이지 본문색(#1b2540)을 물려받아 남색 배경에 남색 글자가 된다
- 본문 line-height(1.62)가 헤더로 흘러 줄높이가 페이지마다 달라진다
헤더는 전 페이지 한 종류이므로 여기서 못박는다.
============================================================ */
.nav{ line-height:1.7; color:#1d2433; }
.nav a.logo img{ object-fit:initial; }
.nav .contact-btn{ color:#fff; }
/* ============================================================
닫힌 플라이아웃은 배치에서 빼 둔다 (2026-09-08)
`.flyout` 은 `absolute` + `visibility:hidden` 이라 안 보여도 **자리는 차지한다.**
3단 메가패널이 오른쪽으로 삐져나와 페이지에 가로 스크롤 85px 을 만들고,
국가 그리드 136칸도 열기 전부터 배치·스타일 계산에 들어간다.
같은 규칙이 `order-elements.css` · `product-composition.css` 에 `.mc-gnb …` 로 있었다.
`mc-gnb` 판을 걷어내면서 그 두 화면이 보호를 잃었으므로 헤더 공용으로 올린다.
모바일(≤1024)은 아코디언이 `display` 로 여닫으므로 데스크톱만 건다.
대가: 펼칠 때 페이드가 없어진다 — 주문·상품 화면이 이미 그렇게 쓰고 있었고,
스침 반응은 그만큼 가벼워진다.
============================================================ */
@media(min-width:1025px){
.nav .has-flyout:not(:hover):not(.open) > .flyout{ display:none; }
/* ⚠️ 위 `display:none` 과 **반드시 짝**이다.
3단 패널은 부모 줄에서 12px 떨어져 열린다(`left:calc(100% + 12px)`). 그 틈을 잇던
호버 브리지가 `.flyout::before` — **패널 안에** 있었다. `display:none` 이면 패널과 함께
브리지도 사라져서, 마우스가 틈에 들어선 순간 부모가 :hover 를 잃고 패널이 닫힌다
→ 국가별·개인·기업별 메가패널을 아예 누를 수 없었다(2026-09-09 사용자 신고).
그래서 브리지를 **부모 줄**에 둔다 — 패널이 display:none 이어도 남아 있어 틈이 이어진다.
닫힌 상태에서는 부모가 속한 `.submenu` 가 `visibility:hidden` 이라 잡히지 않는다. */
.nav .submenu-link.has-flyout::before,
.nav .flyout-link.has-subflyout::before{
content:''; position:absolute; top:-11px; bottom:-11px; left:100%; width:14px;
}
/* 정보(i) 메뉴는 왼쪽으로 열린다(`right:calc(100% + 12px)`) — 브리지도 왼쪽으로. */
.nav .about-icon .submenu-link.has-flyout::before{ left:auto; right:100%; }
}
/* 메가패널 머리글은 페이지 클래스와 이름이 겹친다 (2026-09-08)
`.mega-h.ind` · `.mega-top a.sol` 처럼 두 글자 수식 클래스를 쓰는데, 페이지도 같은 이름을
자기 카드에 쓴다(예: `industry/index.html` 의 `.ind{background:#fff;overflow:hidden;…}`).
색·테두리는 GNB 쪽이 특이도로 이기지만 **선언하지 않은 속성은 페이지 값이 새어 든다.**
패널 내부는 우리가 정한 모양만 쓰도록 여기서 바닥을 깐다(색 규칙보다 특이도가 낮아
`.mega-h.ind` 같은 정상 규칙은 그대로 이긴다). */
.nav .flyout.mega .mega-h,
.nav .flyout.mega .mega-col,
.nav .flyout.mega .mega-sub{ background:none; border-radius:0; box-shadow:none; overflow:visible; position:static; }
/* ============================================================
계정 드롭다운 — 로그인 상태 (2026-09-08 사용자 신고)
① 로그아웃만 `