/* Solution Hub — shared page chrome (header + footer) for every Hub page: public pages and the workspace.
   One header, one footer, one set of tokens. Design basis: Renew_Design/Solution Hub/V2/DESIGN.md.
   Loaded after the page stylesheet, so its rules are scoped to .site-top / .site-foot and win over generic ones. */
@font-face{font-family:'Noto Sans KR';src:url('/fonts/noto-sans-kr.woff?v=20261018') format('woff');font-weight:100 900;font-display:swap}
:root{
  --canvas:#f2f5f5;--paper:#fff;--ink:#14232a;--ink-2:#43545b;--muted:#56676e;--line:#d9e1e3;--line-2:#e8eef0;
  --brand:#135666;--brand-hover:#0e4552;--brand-tint:#e2eef0;
  --bad:#b42318;--bad-tint:#fcebe9;--warn:#94570a;--warn-tint:#fdf2dc;--ok:#1d7347;--ok-tint:#e3f3ea;
  --r:8px;--r-panel:12px;
  --font:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif;
  --site-top:60px;--site-gutter:32px;
}

/* ---- Header ---- */
.site-top{position:sticky;top:0;z-index:40;height:var(--site-top);background:var(--paper);border-bottom:1px solid var(--line);font-family:var(--font)}
.site-top-in{height:100%;display:flex;align-items:center;gap:28px;padding:0 var(--site-gutter)}
.site-top .site-brand{display:inline-flex;align-items:center;gap:10px;flex:none;color:var(--ink);font-size:17px;font-weight:750;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.site-top .site-brand img{width:30px;height:30px;border-radius:7px}
.site-top .site-nav{display:flex;align-items:center;gap:4px;min-width:0}
.site-top .site-nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:var(--r);color:var(--ink-2);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.site-top .site-nav a:hover{background:var(--canvas);color:var(--ink)}
.site-top .site-nav a[aria-current="page"]{color:var(--brand);background:var(--brand-tint)}
.site-top .site-account{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.site-top .site-account[data-state="loading"]{visibility:hidden}
.site-top .site-email{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14px;margin-right:4px}
.site-top a.site-link,.site-top button.site-link{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:0;border-radius:var(--r);background:transparent;color:var(--ink);font:600 15px/1.2 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer}
.site-top a.site-link:hover,.site-top button.site-link:hover{background:var(--canvas)}
.site-top a.site-btn,.site-top button.site-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:600 15px/1.2 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer}
.site-top a.site-btn:hover,.site-top button.site-btn:hover{background:var(--canvas);border-color:#c6d1d4}
.site-top a.site-btn.primary,.site-top button.site-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.site-top a.site-btn.primary:hover,.site-top button.site-btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.site-top button.site-btn:disabled{opacity:.6;cursor:wait}
.site-top button.site-menu{display:none;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:600 15px/1.2 var(--font);cursor:pointer}
.site-top a:focus-visible,.site-top button:focus-visible,.site-foot a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.site-top .site-nav .site-nav-account{display:none}

/* ---- Footer ---- */
footer.site-foot{display:block;margin-top:auto;padding:0;border-top:1px solid var(--line);background:var(--paper);color:var(--muted);font:400 14px/1.5 var(--font)}
.site-foot-in{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:22px var(--site-gutter)}
.site-foot-brand{display:flex;align-items:center;gap:12px}
.site-foot-brand b{color:var(--ink);font-weight:700}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.site-foot a{color:var(--ink-2);text-decoration:none;padding:6px 0}
.site-foot a:hover{color:var(--ink);text-decoration:underline}

/* ---- Narrow: nav moves into a menu panel ---- */
@media (max-width:1000px){
  .site-top-in{gap:12px}
  .site-top button.site-menu{display:inline-flex;align-items:center;order:3}
  .site-top .site-account{order:2}
  .site-top .site-email{display:none}
  .site-top .site-nav{display:none;position:absolute;left:0;right:0;top:var(--site-top);flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 14px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(20,35,42,.10)}
  .site-top.menu-open .site-nav{display:flex}
  .site-top .site-nav a{min-height:46px;font-size:16px}
}
@media (max-width:760px){
  :root{--site-gutter:16px}
  .site-top .site-brand span{font-size:16px}
  .site-top .site-account [data-wide]{display:none}
  .site-top .site-nav .site-nav-account{display:inline-flex}
  .site-top a.site-link,.site-top button.site-link,.site-top a.site-btn,.site-top button.site-btn{padding:0 10px;font-size:14px}
}
@media (max-width:420px){
  .site-top .site-brand span{display:none}
}
@media (max-width:1280px){.site-top .site-email{display:none}}
/* phones: header controls are 44px touch targets (UI audit 2026-10-18) */
@media (max-width:760px){
  .site-top a.site-link,.site-top button.site-link,.site-top a.site-btn,.site-top button.site-btn,.site-top button.site-menu{min-height:44px}
  .site-top-in{gap:6px}
}