/* ============================================================
merba-common.css
메르바 환경 공통 상단 메뉴(gnb) · 하단 푸터(footer) 스타일
모든 페이지가 이 파일 하나를 공유합니다.
→ 상단/하단을 바꾸려면 이 파일만 수정하면 전 페이지 동시 반영.
※ 값은 index.html 원본과 글자 하나까지 동일.
[적용법] 각 페이지 에:
상단/하단은 각 페이지의 기존 gnb/footer CSS를 제거하고
이 파일만 쓰도록 통일했습니다.
============================================================ */
/* --- 폰트 로딩 출렁임(FOUT) 방지용 폴백 ---
Noto Sans KR 로딩 전, 시스템 폰트를 Noto와 같은 크기로 맞춰
상단/하단 글자 폭이 로딩 전후로 변하지 않게 고정. --- */
@font-face{
font-family:'NotoKR-fallback';
src:local('Apple SD Gothic Neo'), local('AppleSDGothicNeo-Regular'), local('Malgun Gothic');
size-adjust:98.6%;
ascent-override:88%;
descent-override:22%;
line-gap-override:0%;
}
/* --- 공통 변수 (index.html :root 그대로) --- */
:root{
--bg:#fff;--bg2:#f5f5f7;--bg3:#e8e8ed;
--black:#1d1d1f;--gray:#6e6e73;--gray2:#a1a1a6;--gray3:#d2d2d7;
--accent:#1D513B;--accent-light:rgba(29,81,59,0.08);--border:rgba(0,0,0,0.1);
}
/* --- 상단/하단 타이포 격리 (index.html body와 동일 값) ---
어떤 페이지에 붙여도 본문 스타일이 새어들지 않도록 고정. --- */
.gnb, .gnb *, footer, footer *{
font-family:'Noto Sans KR','NotoKR-fallback',sans-serif;
line-height:1.5;
letter-spacing:normal;
font-weight:400;
-webkit-font-smoothing:antialiased;
}
.gnb a, footer a{text-decoration:none;color:inherit;}
/* --- 상단 메뉴 (NAV) : index.html 원본 그대로 --- */
.gnb{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border-bottom:.5px solid var(--border);position:sticky;top:0;z-index:300}
.gnb-logo{display:flex;align-items:center;cursor:pointer;user-select:none;height:32px}
.gnb-logo-svg{height:20px;width:auto;display:block}
.gnb-dot{display:none}
.gnb-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.gnb-links{display:flex;gap:2rem;list-style:none}
.gnb-links a{font-size:.8rem;color:var(--gray);transition:color .2s}
.gnb-links a:hover{color:var(--black)}
.gnb-links a.active{color:var(--accent);font-weight:600}
.gnb-right{display:flex;align-items:center;gap:.5rem}
.gnb-icon-btn{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .2s;flex-shrink:0;text-decoration:none}
.gnb-icon-btn:hover{transform:scale(1.1);opacity:.85}
/* --- 하단 푸터 (FOOTER) : index.html 원본 그대로 --- */
footer{border-top:.5px solid var(--border);padding:1.2rem 3rem;background:var(--bg2)}
.footer-links-row{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;padding:.8rem 0;border-bottom:.5px solid var(--border);margin-bottom:.8rem}
.footer-links-row a{font-size:.72rem;color:var(--gray);transition:color .2s}
.footer-links-row a:hover{color:var(--black)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}
.footer-bottom p{font-size:.68rem;color:var(--gray2)}
/* --- 모바일 (index.html @media 900px 그대로) --- */
@media(max-width:900px){
.gnb{padding:0 1.5rem}
.gnb-links{display:none}
}