/* 공용 머리글 — 모든 페이지가 layout/header.html 하나를 쓰고, 모양은 이 파일에서만 정한다 */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;height:96px;background:#fff;border-bottom:1px solid #d5dcd6}
.site-header>.wrap{box-sizing:border-box;width:100%;max-width:1240px;margin:0 auto;padding:0 44px}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.site-header .brand{display:inline-flex;align-items:center;flex:none}
.site-header .brand img{display:block;width:160px;height:auto}
.site-header nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:700}
.site-header nav a{color:#18394b;text-decoration:none}
.site-header nav a:not(.nav-cta):hover{text-decoration:underline}
.site-header .nav-cta{background:#df7138;color:#fff;padding:11px 20px;border-radius:40px;font-weight:800;font-size:13px;letter-spacing:.5px;white-space:nowrap}
.site-header .nav-cta:hover{background:#c9622c}
@media(max-width:760px){.site-header{height:80px}.site-header>.wrap{padding:0 22px}.site-header .brand img{width:132px}}

/* 공용 모바일 내비 — v2 (오른쪽에서 열림) */
.menu-toggle{display:none;width:42px;height:42px;border:1.5px solid #18394b;border-radius:50%;background:#fff;padding:0;cursor:pointer;align-items:center;justify-content:center;flex:none;margin-left:12px}
.menu-toggle span{display:block;width:18px;height:2px;background:#18394b;position:relative;transition:transform .2s,background .2s}
.menu-toggle span::before,.menu-toggle span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:#18394b;transition:transform .2s,top .2s}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.menu-backdrop{position:fixed;inset:0;z-index:39;background:#18394b80;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.menu-backdrop.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);container-type:inline-size;z-index:41;background:#fff;border-left:1.5px solid #18394b;box-shadow:-14px 0 30px #18394b1f;padding:0;font-family:'Zen Kaku Gothic New','Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:#18394b;transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility .28s;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;gap:0}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu .menu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 12px 22px;border-bottom:1px solid #d5dcd6}
.mobile-menu .menu-logo img{display:block;width:120px;height:auto}
.mobile-menu .menu-close{width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;color:#18394b;display:flex;align-items:center;justify-content:center;border-radius:8px}
.mobile-menu .menu-close svg{width:22px;height:22px}.mobile-menu .menu-close:hover{background:#f3eadb}
.mobile-menu .menu-list{padding:8px 0}
.mobile-menu .menu-list a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:16px 22px;border-bottom:1px solid #d5dcd6;text-decoration:none;color:#18394b;background:transparent;border-left:4px solid transparent}
.mobile-menu .menu-list a .menu-en{grid-column:1;font-family:'Inter','Helvetica Neue',sans-serif;font-size:10px;letter-spacing:2px;font-weight:700;color:#4e6b4e}
.mobile-menu .menu-list a .menu-ko{grid-column:1;font-size:18px;font-weight:900;letter-spacing:.5px;margin-top:2px}
.mobile-menu .menu-list a .menu-arrow{grid-column:2;grid-row:1/3;width:26px;height:26px;border-radius:50%;background:#dde9e3;position:relative}
.mobile-menu .menu-list a .menu-arrow::after{content:'';position:absolute;left:8px;top:9px;width:7px;height:7px;border-top:2px solid #18394b;border-right:2px solid #18394b;transform:rotate(45deg)}
.mobile-menu .menu-list a.current{background:#fbf6ea;border-left-color:#df7138}
.mobile-menu .menu-list a.current .menu-ko{color:#df7138}
.mobile-menu .mobile-cta{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 22px 0;padding:16px 20px;border-radius:8px;background:#df7138;color:#fff;font-weight:800;font-size:16px;text-decoration:none;border:0;letter-spacing:.5px}
.mobile-menu .menu-cta-ar{width:22px;height:22px;border-radius:50%;background:#fff;position:relative;flex:none}
.mobile-menu .menu-cta-ar::after{content:'';position:absolute;left:6px;top:7px;width:7px;height:7px;border-top:2px solid #df7138;border-right:2px solid #df7138;transform:rotate(45deg)}
.mobile-menu .menu-foot{margin-top:auto;padding:28px 22px 24px;background:#d9e6ec;overflow:hidden}
.mobile-menu .menu-giant{display:block;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:900;font-size:10.4cqi;letter-spacing:-.04em;line-height:.9;color:#18394b;white-space:nowrap}
.mobile-menu .menu-note{display:block;margin-top:12px;font-size:12px;color:#58696c}
@media(prefers-reduced-motion:reduce){.mobile-menu,.menu-backdrop{transition:none}}
body.menu-open{overflow:hidden}
:target{scroll-margin-top:110px}@media(max-width:760px){:target{scroll-margin-top:90px}}
@media(max-width:760px){.menu-toggle{display:inline-flex}.site-header nav>a{display:none!important}}

/* CTA가 있는 페이지의 모바일 하단 고정 자가진단 버튼과 전체 화면 진단 모달 */
.mobile-sticky-diagnosis,.mobile-diagnosis-modal{display:none}
@media(max-width:760px){
  body.has-mobile-sticky-diagnosis{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .mobile-sticky-diagnosis{box-sizing:border-box;position:fixed;z-index:35;left:0;right:0;bottom:0;display:block;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #d5dcd6;box-shadow:0 -8px 24px rgba(24,57,75,.13);backdrop-filter:blur(10px)}
  .mobile-sticky-diagnosis-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;border:1.5px solid #18394b;border-radius:8px;background:#df7138;color:#fff;font:800 16px/1.2 'Zen Kaku Gothic New','Apple SD Gothic Neo','Noto Sans KR',sans-serif;letter-spacing:.2px;cursor:pointer;box-shadow:3px 3px 0 #18394b}
  .mobile-sticky-diagnosis-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #18394b}
  .mobile-sticky-diagnosis-btn:focus-visible,.mobile-diagnosis-close:focus-visible{outline:3px solid #f7c9ad;outline-offset:2px}
  body.diagnosis-modal-open{overflow:hidden;padding-bottom:0}
  body.diagnosis-modal-open .mobile-sticky-diagnosis{display:none}
  .mobile-diagnosis-modal{box-sizing:border-box;position:fixed;z-index:100;inset:0;display:none;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#fff;overflow:hidden}
  .mobile-diagnosis-modal[open]{display:block}
  .mobile-diagnosis-modal::backdrop{background:#fff}
  .mobile-diagnosis-frame{display:block;width:100%;height:100%;border:0;background:#fff}
  .mobile-diagnosis-close{position:absolute;z-index:3;top:calc(9px + env(safe-area-inset-top));right:10px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #d5dcd6;border-radius:50%;background:#fff;color:#18394b;font:400 26px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 12px rgba(24,57,75,.12)}
}