/* v4 셸 — 헤더 · 모바일 메뉴 · 푸터.
랜딩(index-v4.html)과 부속 페이지(blog · notices · support)가 같은 헤더·푸터를 쓰기 위해
index-v4.html 의 인라인 스타일에서 옮겨 온 것이다. 셸 문구·구조는 templates/fragments/shell-v4.html,
동작은 /js/v4-shell.js 가 짝이다 — 세 파일을 함께 고친다.
주의: .v4-grain · .v4-vignette · .v4-dark 의 첫 페인트용 사본이 index-v4.html 의 크리티컬 CSS 에도 있다
(깜빡임 방지 목적의 의도적 중복). 값을 바꾸면 그쪽도 같이 바꾼다. */
/* 부속 페이지: 헤더가 fixed 라 본문이 헤더 아래로 들어간다 — 헤더 높이만큼 띄운다
(랜딩은 히어로가 자체 상단 여백을 가지므로 이 클래스를 쓰지 않는다) */
body.v4-shell-page { padding-top: var(--v4-hdr-h, 64px); }
/* ── 헤더 상태(로고·GNB·인증 버튼 · 다크 히어로 위 hdr-top) ── */
/* head 크리티컬 CSS가 첫 페인트(흰 로고)를 맡고, 여기서 두 상태를 모두 명시적으로 소유한다 */
#header .logo-dark { display:inline-block }
#header .logo-white { display:none }
/* GNB 가입 버튼 — 고스트 스타일: 배경에 따라 두 모드
흰 헤더 위: 블루 테두리·글자 / 다크 히어로 위(hdr-top): 흰 테두리·글자 */
#auth-desktop a[href*="register"] {
background:transparent; color:var(--fp-blue);
border:1.5px solid rgba(30,79,224,0.55);
}
#auth-desktop a[href*="register"]:hover { background:rgba(30,79,224,0.06); border-color:var(--fp-blue); }
#header.hdr-top #auth-desktop a[href*="register"] {
background:transparent; color:#fff;
border-color:rgba(255,255,255,0.5);
}
#header.hdr-top #auth-desktop a[href*="register"]:hover { background:rgba(255,255,255,0.08); border-color:#fff; }
/* 페이지 중간에서 재등장하는 헤더: 본문과 겹치지 않게 반투명 블러 배경 (최상단 hdr-top 은 투명 유지) */
#header:not(.hdr-top) { background:rgba(255,255,255,0.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(15,23,42,0.06); }
#header.hdr-top .logo-dark { display:none }
#header.hdr-top .logo-white { display:inline-block }
#header.hdr-top #gnb > a, #header.hdr-top #gnb .gnb-parent { color:rgba(255,255,255,0.88) }
/* 스크롤스파이 활성 표시 — 굵기 변화 없이 색만 (볼드는 글자 폭이 변해 GNB가 흔들린다) */
#gnb > a.is-active, #gnb .gnb-parent.is-active { color:var(--fp-blue) }
#header.hdr-top #gnb > a.is-active, #header.hdr-top #gnb .gnb-parent.is-active { color:#B9CDF7 }
#header.hdr-top #gnb > a:hover, #header.hdr-top #gnb .gnb-parent:hover { color:#fff }
#header.hdr-top #lang-btn { color:rgba(255,255,255,0.75) }
#header.hdr-top #lang-btn:hover { color:#fff }
#header.hdr-top #auth-desktop a[href*="login"], #header.hdr-top #mobile-auth-section a { color:#fff }
#header.hdr-top #auth-desktop a[href*="login"]:hover, #header.hdr-top #mobile-auth-section a:hover { background:rgba(255,255,255,0.12) }
/* 로그인 후: user-menu.js 가 로그인 링크를 버튼(.user-menu-container > button)으로 갈아끼운다.
그 버튼은 text-gray-700 을 달고 오므로, 다크 히어로 위에서는 아이디가 검은 글씨로 묻힌다 —
로그인 링크와 같은 규칙을 버튼에도 준다 */
#header.hdr-top .user-menu-container > button { color:#fff }
#header.hdr-top .user-menu-container > button:hover { background:rgba(255,255,255,0.12) }
#header.hdr-top #mobile-menu-btn { color:#fff }
/* ── 다크 앵커 배경 · 그레인 · 비네트 (푸터가 v4-dark 를 쓴다) ── */
/* ── 다크 앵커 섹션 ── */
.v4-dark { background:
radial-gradient(ellipse 85% 55% at 18% -5%, rgba(37,99,235,0.34), transparent 62%),
radial-gradient(ellipse 75% 55% at 88% 105%, rgba(56,189,248,0.13), transparent 64%),
linear-gradient(180deg, #060A13 0%, #0B1220 48%, #070C16 100%); }
/* 다크 섹션 중 '카드가 아닌 본문'만 반전 — 카드 내부는 밝은 채로 둬서 대비를 만든다 */
.v4-dark-content .text-gray-900 { color:#F2F6FF }
.v4-dark-content .text-gray-600,
.v4-dark-content .text-gray-500 { color:#93A4C4 }
.v4-dark-content .text-gray-400 { color:#6E7D99 }
.v4-dark-content .text-blue-600 { color:#7CA5FF }
/* ── 질감: 그레인 + 비네트 ── */
.v4-grain { position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.38; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 고해상도(DPR≥2): 노이즈가 기기 픽셀로 너무 고와져 균일한 면으로 보인다 → 타일을 작게 스케일해 입자를 키우고 살짝 진하게 */
@media (min-resolution:2dppx) { .v4-grain { background-size:200px 200px; opacity:0.48; } } /* 타일을 키워 반복 격자(무늬)를 줄이고 농도로 질감 유지 */
.v4-vignette { position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 96% 86% at 46% 40%, transparent 52%, rgba(9,26,86,0.26) 100%); }
/* ── 모바일·태블릿 햄버거 메뉴 오버레이 ── */
/* ── 모바일·태블릿 메뉴(햄버거): 반투명 풀스크린 오버레이. 헤더(로고·X)는 위에 남는다 ── */
#mobile-menu.v4-mmenu { position:fixed; inset:0; z-index:0; display:flex; flex-direction:column;
padding:calc(var(--v4-hdr-h, 64px) + .25rem) 1.5rem 1.75rem; overflow:auto; -webkit-overflow-scrolling:touch;
background:rgba(255,255,255,0.975); -webkit-backdrop-filter:blur(32px) saturate(1.1); backdrop-filter:blur(32px) saturate(1.1);
animation:v4MenuIn .3s cubic-bezier(0.22,1,0.36,1) both; }
#mobile-menu.v4-mmenu.hidden { display:none; }
@keyframes v4MenuIn { from { opacity:0 } to { opacity:1 } }
/* 메뉴 열림: 헤더 줄을 오버레이 위로, 최상단(다크 히어로) 상태여도 로고·아이콘은 어둡게 */
#header > .container > div:first-child { position:relative; z-index:1; } /* 로고·로그인·X 줄을 오버레이 위로 */
body.menu-open #header { background:transparent !important; box-shadow:none !important; }
body.menu-open #header .logo-white { display:none !important; }
body.menu-open #header .logo-dark { display:inline-block !important; }
body.menu-open #header #mobile-menu-btn, body.menu-open #header #mobile-auth-section a:not(.v4-btn-primary) { color:#111827 !important; }
/* 메뉴 오버레이(흰 배경)가 열리면 사용자 메뉴 버튼도 어둡게 — 위 hdr-top 규칙을 되돌린다 */
body.menu-open #header .user-menu-container > button { color:#111827 !important; }
body.menu-open #topBanner { visibility:hidden; }
body.menu-open #cookie-consent { display:none !important; } /* 쿠키바(z 9998)가 오버레이 위에 뜨지 않게 */
body.menu-open #header { top:0 !important; } /* 배너 아래로 밀려 있던 헤더를 맨 위로 — 오버레이 콘텐츠도 그 바로 아래서 시작 */
/* 스크롤 상태의 헤더에 걸리는 backdrop-filter·transform 은 자식 position:fixed 의 기준을 헤더 박스로 바꿔
오버레이가 헤더 높이로 잘린다 → 메뉴 열림 중엔 둘 다 해제 (오버레이가 자체 블러를 가진다) */
.v4-ico-x { display:none; }
body.menu-open .v4-ico-menu { display:none; }
body.menu-open .v4-ico-x { display:block; }
body.menu-open #header { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; transform:none !important; filter:none !important; }
.v4-mmenu-nav { display:flex; flex-direction:column; }
.v4-mmenu-item { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; font-size:1.08rem; font-weight:700; letter-spacing:-0.01em;
color:#111827; opacity:0; transform:translateY(10px); animation:v4MenuItem .45s cubic-bezier(0.22,1,0.36,1) forwards; }
.v4-mmenu-item:nth-child(1) { animation-delay:.04s } .v4-mmenu-item:nth-child(2) { animation-delay:.08s } .v4-mmenu-item:nth-child(3) { animation-delay:.12s }
.v4-mmenu-item:nth-child(4) { animation-delay:.16s } .v4-mmenu-item:nth-child(5) { animation-delay:.20s } .v4-mmenu-item:nth-child(6) { animation-delay:.24s } .v4-mmenu-item:nth-child(7) { animation-delay:.28s }
@keyframes v4MenuItem { to { opacity:1; transform:none } }
.v4-mmenu-item i, .v4-mmenu-item svg { width:16px; height:16px; color:#9CA3AF; }
.v4-mmenu-item.is-current { color:var(--fp-blue); }
.v4-mmenu-item.is-current i, .v4-mmenu-item.is-current svg { color:var(--fp-blue); }
/* 콘텐츠는 위쪽 정렬 — 오버레이만 풀스크린, 메뉴·언어·CTA 는 상단에 모아 둔다 */
.v4-mmenu-foot { margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid rgba(17,24,39,0.08); display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.v4-mmenu-langwrap { position:relative; }
/* 좁은 폰(≤400): 헤더에 로그인+버튼이 못 들어간다 → 로그인만 남기고 버튼 숨김 (버튼은 메뉴 오버레이 하단에 있다) */
@media (max-width:400px) { .v4-hdr-start { display:none; } }
.v4-mmenu-langbtn { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .2rem; font-size:.9rem; font-weight:700; color:#374151; background:none; border:0; cursor:pointer; }
.v4-mmenu-langbtn i, .v4-mmenu-langbtn svg { width:14px; height:14px; transition:transform .2s ease; }
.v4-mmenu-langbtn[aria-expanded="true"] i, .v4-mmenu-langbtn[aria-expanded="true"] svg { transform:rotate(180deg); }
.v4-mmenu-langpop { position:absolute; left:0; bottom:calc(100% + .5rem); min-width:80px; padding:.5rem 0; background:#fff; border-radius:14px;
box-shadow:0 12px 32px -12px rgba(15,23,42,0.28), 0 0 0 1px #EEF2F8; display:flex; flex-direction:column; }
.v4-mmenu-langpop[hidden] { display:none; }
.v4-mmenu-langpop a { padding:.55rem 1.25rem; font-size:.9rem; font-weight:700; color:#9CA3AF; text-align:center; }
.v4-mmenu-langpop a.is-on { color:#111827; }
.v4-mmenu-cta { display:flex; align-items:center; gap:1rem; width:100%; }
.v4-mmenu-primary { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; width:100%; padding:.85rem 1.25rem; border-radius:12px; font-size:.95rem; font-weight:700; }
.v4-mmenu-primary i, .v4-mmenu-primary svg { width:16px; height:16px; }
@media (prefers-reduced-motion: reduce) { #mobile-menu.v4-mmenu, .v4-mmenu-item { animation:none; opacity:1; transform:none } }
/* ── 주 버튼 · 푸터 알림 버튼 ── */
/* 버튼 체계 — 주 버튼: 브랜드 블루(--fp-blue) · rounded-xl · font-bold. Tailwind blue-500/600 혼용 금지 */
.v4-btn-primary { background:var(--fp-blue); color:#fff; transition:background .2s ease, transform .2s ease; }
.v4-btn-primary:hover { background:var(--fp-blue-strong); }
/* 앵커 착지는 html 의 scroll-padding-top:60px(헤더 높이) 하나가 담당한다 — 섹션에 scroll-mt-* 를 두지 않는다 */
/* 푸터 알림 버튼 — push.js 가 bg 클래스를 갈아끼우므로(id 우선순위로 무력화) 상태 무관 라인 버튼 고정 */
#push-subscribe-btn { background:transparent !important; border:1.5px solid rgba(255,255,255,0.35); color:rgba(255,255,255,0.85); }
#push-subscribe-btn:hover { background:rgba(255,255,255,0.07) !important; border-color:rgba(255,255,255,0.7); color:#fff; }
#push-subscribe-btn[data-subscribed="true"] { border-color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.55); }
/* ── 프레임 티어 — 헤더·푸터 컨테이너 폭 ── */
/* 프레임 티어: 헤더·푸터·쿠키바 콘텐츠는 본문(1280)보다 넓은 1440 — 프레임은 넓고 콘텐츠는 정박 */
#header .container, .v4-hero .container, footer .container, #cookie-consent .container { max-width:1440px; }
/* ── 푸터 그리드 ── */
/* 푸터 그리드 — 브랜드 넓게 + 링크 3열 */
.v4-footer-grid { display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:768px) { .v4-footer-grid { grid-template-columns:1fr 1fr; } }
/* 태블릿(768~1023, 아이패드 미니·에어 세로): 회사 정보 한 줄 → 다음 단에 메뉴 3열 */
@media (min-width:768px) and (max-width:1023px) {
.v4-footer-grid { grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem; }
.v4-footer-grid > div:first-child { grid-column:1 / -1; }
}
@media (min-width:1024px) { .v4-footer-grid { grid-template-columns:3.4fr 1fr 1fr 1.1fr; gap:2rem; } }
/* ── 1024~1279 GNB 압축 ── */
/* 1024~1279 GNB 압축: 7개 항목 + 언어 + 로그인 + CTA 가 폭에 안 들어가 줄바꿈되던 구간 —
간격·글자를 줄이고 줄바꿈을 막는다 (1280 이상은 기존 규격) */
@media (min-width:1024px) and (max-width:1279px) {
#gnb { gap:1.1rem; }
#gnb > a, #gnb .gnb-parent, #lang-btn { font-size:.9rem; white-space:nowrap; }
#auth-desktop { gap:.75rem; }
#auth-desktop a { white-space:nowrap; font-size:.9rem; }
#auth-desktop a[href*="register"] { padding-left:.9rem; padding-right:.9rem; }
#header .logo-dark, #header .logo-white { height:1.5rem; }
}
/* ── 768~1023 태블릿은 햄버거로 ── */
/* 태블릿 GNB: 데스크톱 내비(md:flex)는 768~1023 에서 항목이 세로로 깨진다 → 이 구간은 햄버거 메뉴로.
정적 Tailwind 에 lg:hidden 이 없어 v4 CSS 로 전환 (Tailwind 유틸리티 위에 id 특이도로 덮는다) */
@media (min-width:768px) and (max-width:1023px) {
#gnb, #auth-desktop { display:none !important; }
#mobile-auth-section { display:flex !important; }
#mobile-menu-btn { display:inline-flex !important; }
#mobile-menu:not(.hidden) { display:flex !important; }
}
/* ── 모바일 푸터 아코디언 ── */
/* 모바일: 링크 3열을 아코디언으로 — 긴 세로 나열 대신 접힌 목차 */
@media (max-width:767px) {
.v4-footer-grid { gap:0; }
.v4-footer-grid > div:first-child { margin-bottom:1.5rem; }
.v4-foot-col h3 { display:flex; align-items:center; justify-content:space-between; cursor:pointer;
margin:0; padding:0.95rem 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.v4-foot-col h3::after { content:''; width:8px; height:8px; flex-shrink:0;
border-right:1.5px solid rgba(255,255,255,0.5); border-bottom:1.5px solid rgba(255,255,255,0.5);
transform:rotate(45deg); transition:transform .25s ease; margin-right:2px; }
.v4-foot-col.open h3::after { transform:rotate(225deg); }
.v4-foot-col ul { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.v4-foot-col.open ul { max-height:340px; padding:0.75rem 0 1rem; }
}
/* ── 상단 띠 배너 ── */
/* 상단 띠 배너 — 링크 호버 */
#topBanner a:hover { text-decoration:underline !important; text-underline-offset:3px; }
@media (max-width:640px) { #topBanner { font-size:12px !important; padding-left:36px !important; } }