/* Layout - Header, Nav, Aside, Footer */

/* === Top notice strip === */
.topbar{
  background:var(--gray-900);color:rgba(255,255,255,.85);
  font-size:var(--fs-xs);padding:8px 0;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar .notice{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.85)}
.topbar .notice .badge{background:var(--brand-500);color:#fff;font-size:10px;padding:2px 8px;border-radius:var(--r-pill);font-weight:var(--fw-semibold)}
.topbar .links{display:flex;gap:18px}
.topbar .links a{color:rgba(255,255,255,.7);transition:color var(--transition)}
.topbar .links a:hover{color:#fff}

/* === Header === */
#header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease,background .25s ease;
}
#header.scrolled{box-shadow:0 4px 20px rgba(17,24,39,.06);background:rgba(255,255,255,.96)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:36px;width:auto}
.brand-name{font-weight:var(--fw-bold);font-size:var(--fs-lg);color:var(--text);letter-spacing:-0.02em;display:none}

/* PC nav */
.gnb{display:flex;gap:4px;flex:1;justify-content:center}
.gnb > li{position:relative}
.gnb > li > a{
  display:flex;align-items:center;height:var(--header-h);
  padding:0 18px;
  font-size:var(--fs-md);font-weight:var(--fw-semibold);
  color:var(--text);letter-spacing:-0.01em;
  border-bottom:2px solid transparent;
  transition:color var(--transition),border-color var(--transition);
}
.gnb > li:hover > a,
.gnb > li:focus-within > a,
.gnb > li.active > a{color:var(--brand-600);border-bottom-color:var(--brand-500)}

/* Submenu — always rendered; opacity+visibility for animation; close delay for hover-bridge UX */
.gnb-sub{
  position:absolute;top:100%;left:50%;
  min-width:220px;padding:10px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);
  display:flex;flex-direction:column;gap:2px;
  margin-top:12px;
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-8px);
  /* Closing has 300ms grace period so user can travel from menu to submenu */
  transition:opacity .22s ease .25s,
             transform .25s cubic-bezier(.2,.8,.2,1) .25s,
             visibility 0s linear .47s;
}
/* Bridge — invisible hover area that connects parent <a> to submenu */
.gnb-sub::before{
  content:'';position:absolute;
  top:-16px;left:-12px;right:-12px;height:16px;
  background:transparent;
}
/* Decorative arrow pointing to the parent menu item */
.gnb-sub::after{
  content:'';position:absolute;
  top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:var(--surface);
  border-left:1px solid var(--border);border-top:1px solid var(--border);
  border-radius:2px 0 0 0;
}
.gnb > li:hover .gnb-sub,
.gnb > li:focus-within .gnb-sub{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  /* Opening is fast; no delay */
  transition:opacity .18s ease,
             transform .25s cubic-bezier(.2,.8,.2,1),
             visibility 0s;
}
.gnb-sub a{
  padding:10px 14px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text-sub);font-weight:var(--fw-medium);
  white-space:nowrap;
  transition:background var(--transition),color var(--transition),padding-left var(--transition);
  position:relative;
}
.gnb-sub a:hover,
.gnb-sub a:focus-visible{background:var(--brand-50);color:var(--brand-700);padding-left:18px}
.gnb-sub a:focus-visible{outline:2px solid var(--brand-300);outline-offset:-2px}

/* Header right */
.header-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-md)}
.menu-btn:hover{background:var(--gray-100)}
.menu-btn svg{width:24px;height:24px;color:var(--text)}

/* === Mobile drawer === */
.mb-drawer{
  position:fixed;top:0;right:-100%;height:100vh;width:min(360px,90vw);
  background:var(--surface);z-index:200;
  display:flex;flex-direction:column;
  transition:right .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:-12px 0 40px rgba(0,0,0,.1);
}
.mb-drawer.active{right:0}
.mb-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.mb-drawer-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md)}
.mb-drawer-close:hover{background:var(--gray-100)}
.mb-drawer-body{padding:12px 12px 24px;overflow-y:auto;flex:1}
.mb-nav > li{border-bottom:1px solid var(--border)}
.mb-nav > li:last-child{border-bottom:none}
.mb-nav > li > a{display:flex;justify-content:space-between;align-items:center;padding:16px 12px;font-weight:var(--fw-semibold);font-size:var(--fs-md);color:var(--text)}
.mb-nav > li > a::after{content:'＋';color:var(--text-mute);font-weight:var(--fw-regular);transition:transform var(--transition)}
.mb-nav > li.open > a::after{content:'－'}
.mb-nav > li > ul{display:none;padding:4px 12px 12px}
.mb-nav > li.open > ul{display:block}
.mb-nav > li > ul > li > a{display:block;padding:10px 16px;font-size:var(--fs-sm);color:var(--text-sub);border-radius:var(--r-sm)}
.mb-nav > li > ul > li > a:hover{background:var(--brand-50);color:var(--brand-700)}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;opacity:0;pointer-events:none;transition:opacity var(--transition)}
.scrim.active{opacity:1;pointer-events:auto}

/* === Quick category strip below header (PC) === */
.quickbar{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 0}
.quickbar-row{display:flex;gap:8px;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
.quickbar-row::-webkit-scrollbar{display:none}

/* === Body wrap === */
main{min-height:60vh}
.page{display:grid;grid-template-columns:240px 1fr;gap:40px;padding:var(--s-9) 0 var(--s-12)}
@media(max-width:900px){.page{grid-template-columns:1fr;gap:24px;padding:var(--s-7) 0 var(--s-9)}}

/* Aside */
.aside{position:sticky;top:calc(var(--header-h) + 16px);align-self:start}
.aside-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.aside-title{
  padding:20px 22px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-lg);letter-spacing:-0.02em;
}
.aside-nav li a{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--border);
  color:var(--text-sub);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  transition:all var(--transition);
}
.aside-nav li:last-child a{border-bottom:none}
.aside-nav li a:hover{background:var(--brand-50);color:var(--brand-700)}
.aside-nav li.active a{background:var(--brand-50);color:var(--brand-700);font-weight:var(--fw-bold)}
.aside-nav li.active a::after{content:'→';font-size:var(--fs-md)}
.aside-banner{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.aside-banner img{width:100%;border-radius:var(--r-md);transition:transform var(--transition)}
.aside-banner a:hover img{transform:scale(1.02)}

@media(max-width:900px){
  .aside{position:static}
  .aside-nav{display:flex;overflow-x:auto;border-bottom:1px solid var(--border)}
  .aside-nav li{flex-shrink:0}
  .aside-nav li a{padding:12px 18px;border-bottom:none;border-right:1px solid var(--border)}
  .aside-nav li a::after{display:none}
  .aside-banner{display:none}
}

/* Content */
.content{min-width:0}
.breadcrumb{display:flex;gap:8px;font-size:var(--fs-sm);color:var(--text-mute);margin-bottom:12px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--brand-600)}
.breadcrumb .sep{color:var(--gray-300)}
.page-title{font-size:var(--fs-4xl);font-weight:var(--fw-black);letter-spacing:-0.025em;margin-bottom:8px}
.page-sub{font-size:var(--fs-md);color:var(--text-mute);margin-bottom:32px;line-height:var(--lh-relaxed)}
.content-divider{height:1px;background:var(--border);margin:24px 0 32px}

/* === Footer === */
#footer{
  background:var(--gray-900);color:rgba(255,255,255,.7);
  padding:var(--s-10) 0 var(--s-9);margin-top:var(--s-12);
  font-size:var(--fs-sm);
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-brand img{height:36px;width:auto;display:block;margin-bottom:18px;background:#fff;padding:8px 14px;border-radius:var(--r-md)}
.footer-brand p{color:rgba(255,255,255,.55);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.footer h5{color:#fff;font-size:var(--fs-md);font-weight:var(--fw-bold);margin-bottom:16px}
.footer-list li{margin-bottom:10px}
.footer-list a{color:rgba(255,255,255,.65);transition:color var(--transition)}
.footer-list a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.footer-bottom .info{color:rgba(255,255,255,.5);line-height:var(--lh-relaxed);font-size:var(--fs-xs)}
.footer-bottom .info strong{color:#fff;font-size:var(--fs-sm);display:block;margin-bottom:4px;font-weight:var(--fw-semibold)}
.footer-bottom .info span{margin:0 6px;color:rgba(255,255,255,.25)}

@media(max-width:768px){
  .topbar .links{display:none}
  .topbar .notice{font-size:11px}
  .gnb{display:none}
  .menu-btn{display:flex}
  .quickbar{display:none}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  #footer{padding:var(--s-8) 0 var(--s-7);margin-top:var(--s-8)}
}