:root{
  --primary:#0f45c8;
  --primary-dark:#143a83;
  --primary-soft:#edf4ff;
  --line:#e5e9f1;
  --text:#121826;
  --muted:#667085;
  --bg:#f7f9fc;
  --white:#fff;
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:16px;
  --shadow:0 10px 30px rgba(20,42,86,.06);
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.5;
}
body.menu-open{overflow:hidden}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 22px; border-radius:999px;
  border:1px solid var(--primary); font-weight:800;
}
.btn.primary{background:var(--primary); color:#fff}
.btn.secondary{background:#fff; color:var(--primary)}

.badge{
  font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px;
  color:#e31b23; border:1px solid #ffb7ba; background:#fff5f5;
}
.date{color:#98a2b3; white-space:nowrap}

/* Header */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(229,233,241,.8);
  transition:background .3s, border-color .3s;
}
header.is-scrolled{
  background:linear-gradient(135deg,#153a7b,#0d2b60);
  border-bottom-color:transparent;
}
.header-inner{
  height:84px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:250px}
.brand-mark{
  width:44px; height:52px; border:2px solid var(--primary);
  border-radius:12px 12px 16px 16px;
  display:grid; place-items:center;
  font-weight:800; color:var(--primary);
  background:linear-gradient(180deg,#fff,#eef4ff);
}
.brand-text small{display:block; font-size:13px; color:#344054; transition:color .25s}
.brand-text strong{font-size:20px; letter-spacing:-.03em; transition:color .25s}
header.is-scrolled .brand-text small{color:rgba(255,255,255,.75)}
header.is-scrolled .brand-text strong{color:#fff}
nav{display:flex; gap:42px; font-weight:700}
.nav-item{position:relative}
.nav-link{position:relative; transition:color .25s}
.nav-link:after{
  content:""; position:absolute; left:0; right:0; bottom:-10px;
  height:2px; transform:scaleX(0); background:var(--primary);
  transition:.2s;
}
.nav-link:hover:after{transform:scaleX(1)}
.nav-link.active{color:var(--primary)}
.nav-link.active:after{transform:scaleX(1)}
header.is-scrolled .nav-link{color:#fff}
header.is-scrolled .nav-link.active{color:#fff}
header.is-scrolled .nav-link:after{background:#fff}
.nav-dropdown{
  position:absolute; top:100%; left:50%; margin-top:14px;
  transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:10px; min-width:168px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transition:.18s; z-index:25;
}
.nav-item:hover .nav-dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-dropdown a{padding:9px 14px; border-radius:8px; font-size:14px; font-weight:600; color:#465166; white-space:nowrap}
.nav-dropdown a:hover{background:var(--primary-soft); color:var(--primary)}
.header-actions{display:flex; gap:10px}
.icon-btn{
  width:42px; height:42px; border:1px solid var(--line);
  border-radius:50%; background:#fff; display:grid; place-items:center;
  cursor:pointer;
}
.icon-btn[aria-expanded="true"]{border-color:var(--primary); color:var(--primary); background:var(--primary-soft)}

/* Search & mobile menu */
.search-layer, .menu-drawer, .drawer-backdrop{display:none}
.search-layer.is-open{display:block}
.search-layer{
  position:fixed; inset:84px 0 auto 0; z-index:60;
  background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 16px 40px rgba(17,24,39,.12); padding:22px 0;
}
.search-form{display:flex; gap:10px}
.search-form input{
  flex:1; min-width:0; height:52px; border:1px solid #cfd7e5; border-radius:14px;
  padding:0 18px; font-size:16px; outline:none;
}
.search-form input:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(15,69,200,.1)}
.search-form button{border:0; border-radius:14px; padding:0 24px; background:var(--primary); color:#fff; font-weight:800}
.drawer-backdrop.is-open{display:block; position:fixed; inset:84px 0 0 0; z-index:70; background:rgba(11,18,32,.42)}
.menu-drawer{
  display:block; position:fixed; top:84px; right:0; bottom:0; z-index:80; width:min(420px,88vw);
  background:#fff; transform:translateX(105%); transition:transform .25s ease;
  box-shadow:-24px 0 60px rgba(17,24,39,.18); padding:24px; overflow:auto;
}
.menu-drawer.is-open{transform:translateX(0)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line)}
.drawer-head strong{font-size:20px}
.drawer-close{width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer}
.drawer-menu{display:block; margin-top:4px}
.drawer-group{padding:10px 4px; border-bottom:1px solid var(--line)}
.drawer-group:last-child{border-bottom:0}
.drawer-group-title{
  padding:0 10px 6px; font-weight:800; font-size:15px; color:var(--text);
}
.drawer-sublist{display:grid; gap:0; padding:0 4px}
.drawer-sublist a{
  padding:7px 14px 7px 22px; border-radius:10px; font-size:14px; font-weight:600; color:#465166;
  position:relative;
}
.drawer-sublist a:before{
  content:"—"; position:absolute; left:6px; color:#c3cbdb; font-size:12px;
}
.drawer-sublist a:hover{background:var(--primary-soft); color:var(--primary)}

/* Footer */
footer{
  background:linear-gradient(135deg,#f7faff,#edf4ff);
  border-top:1px solid #dfe9fb;
  color:var(--text); padding:32px 0;
}
.footer-grid{
  display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:28px;
  align-items:start;
}
.footer-brand{font-size:19px; font-weight:800}
.footer-info{font-size:13px; color:var(--muted); line-height:1.8}
.footer-links{display:flex; flex-wrap:wrap; gap:14px; font-size:13px; justify-content:flex-end}
.family{
  position:relative;
  margin-top:16px; border:1px solid #dfe9fb;
  border-radius:10px; padding:11px 14px; color:var(--text);
}
.family-toggle{
  display:flex; align-items:center; gap:6px; width:100%;
  background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer;
}
.family-dropdown{
  position:absolute; bottom:100%; left:0; right:0; margin-bottom:8px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:6px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s;
}
.family:hover .family-dropdown, .family:focus-within .family-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.family-dropdown a{padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; color:#465166; white-space:nowrap}
.family-dropdown a:hover{background:var(--primary-soft); color:var(--primary)}

@media (max-width:1000px){
  nav{display:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}

@media (max-width:640px){
  .wrap{width:min(100% - 24px, var(--max))}
  .header-inner{height:70px}
  .brand{min-width:0}
  .brand-text strong{font-size:16px}
  .header-actions .icon-btn:first-child{display:none}
  .search-layer{inset:70px 0 auto 0}
  .drawer-backdrop.is-open{inset:70px 0 0 0}
  .menu-drawer{top:70px}
}