/* 게시판(Flask) 화면의 포털 머리·꼬리. auth/templates/_site_header.html · _site_footer.html 짝.

   ★ 포털(portal-web/)의 style.css · reference.css · white-panels.css · light-theme.css 를
     차례로 겹친 **최종 계산값**을 손으로 옮긴 것이다(2026-10-23, 브라우저 getComputedStyle
     로 1280·900·360px 에서 뽑아 맞췄다). 포털 CSS 를 통째로 물리지 않는 까닭은
     plan §8 — :root 토큰·body 규칙·!important 수십 개가 게시판 에디터를 깨뜨린다.
   ★ 색은 리터럴로 적는다. --line/--page/--text 같은 이름은 /static/style.css 에 다른
     값으로 이미 있다. 토큰이 필요하면 --glh-* 만 쓴다.
   ★ 클래스 site-header·header-inner·brand·primary-nav·global-search·login-link·menu-button
     은 /static/*.css 에 한 번도 안 나온다(충돌 0 확인). 꼬리는 bare footer 대신
     .site-footer 로 좁혔다 — 게시판 안의 다른 footer 를 건드리지 않게. */
@font-face{font-family:GmarketSans;src:url("/portal/assets/fonts/GmarketSansMedium.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:GmarketSans;src:url("/portal/assets/fonts/GmarketSansBold.woff2") format("woff2");font-weight:700;font-display:swap}

.site-header{position:relative;z-index:30;background:#fff;color:#272a2e;border-bottom:1px solid #dfe3e8;box-shadow:0 2px 10px #18202a0d;font-family:GmarketSans,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:14px;line-height:1.55}
.site-header *{box-sizing:border-box}
.header-inner{max-width:1180px;height:80px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:27px;background:#fff}
.site-header .brand{display:flex;align-items:center;gap:8px;color:#272a2e;text-decoration:none;font-size:12px;font-weight:500;line-height:1;letter-spacing:-.55px;white-space:nowrap}
.site-header .brand img{display:block;width:37px;height:37px;object-fit:contain}
.site-header .brand>b{font-family:GmarketSans,"Malgun Gothic",sans-serif;font-size:21px;font-weight:500;color:#272a2e}
.site-header .brand>b span{color:#272a2e}
.primary-nav{display:flex;align-self:stretch;gap:27px}
.primary-nav a{display:flex;align-items:center;border-bottom:3px solid transparent;color:#272a2e;text-decoration:none;font-size:16px;font-weight:700;line-height:18px}
.primary-nav a.active,.primary-nav a:hover{border-color:#272a2e;color:#111}
.primary-nav a:hover{background:#f1f3f5}
.global-search{margin-left:auto;width:238px;max-width:100%;height:42px;display:flex;overflow:hidden;border-radius:0;background:#f2f4f6}
.global-search input{min-width:0;flex:1;border:0;padding:0 15px;outline:0;background:transparent;color:#272a2e;font:inherit;font-size:13px}
.global-search input::placeholder{color:#7b8490;opacity:1}
.global-search button{width:43px;border:0;background:transparent;color:#272a2e;font:inherit;font-size:18px;cursor:pointer}
.global-search button:hover{background:#f1f3f5}
.global-search:focus-within{outline:2px solid #272a2e;outline-offset:2px}
.login-link{min-height:44px;display:flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:#272a2e;text-decoration:none;font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.login-link:hover{background:#f1f3f5;color:#111}
/* app.js 가 로그인 뒤 #acct-btn 에 아바타(.member__avatar)를 붙인다 — 머리 높이에 맞춰 작게 */
.login-link .member__avatar{width:26px;height:26px;flex:none;font-size:12px}
.login-link.is-in .login-link__txt--out{display:none}
.login-link__nick{max-width:9em;overflow:hidden;text-overflow:ellipsis}
/* 비로그인 단추 — 디스코드 전용 로그인. 아이콘만 디스코드 색, 글자는 머리 글자색.
   좁은 폭(≤400px)에서는 「디스코드」를 떼고 아이콘+「로그인」(aria-label 은 그대로). */
.login-link--dc{padding:0 8px}.login-link__txt--out{display:inline-flex;align-items:center;gap:5px}
.login-link--dc{gap:5px}.login-link__dc{flex:none;width:16px;height:16px;color:#5865F2}
@media(max-width:400px){.login-link__pre{display:none}}
.menu-button{display:none;font:inherit;cursor:pointer}
.site-header a:focus-visible,.site-header button:focus-visible,.site-header input:focus-visible{outline:2px solid #272a2e;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media(min-width:761px) and (max-width:1050px){
  .header-inner{gap:15px}.primary-nav{gap:16px}.primary-nav a{font-size:14px}
  .site-header .brand>b{font-size:18px}.global-search{width:180px}
}
@media(max-width:760px){
  .site-header{font-size:13px}
  .header-inner{height:auto;min-height:65px;padding:8px 12px;gap:9px;flex-wrap:wrap}
  .site-header .brand{margin-right:auto}
  .site-header .brand img{width:34px;height:34px}
  .site-header .brand>b{font-size:20px}
  /* 좁은 화면의 메뉴 단추는 포털처럼 nav 를 펼치지 않고 #side 드로어를 연다(app.js).
     드로어 안에 같은 네 링크가 있다. */
  .menu-button{display:block;min-width:44px;min-height:44px;padding:1px 6px;border:1px solid #d2d8df;border-radius:0;background:#f2f4f6;color:#272a2e}
  .primary-nav{display:none}
  .global-search{order:6;width:100%;max-width:none;height:44px;margin:0 0 2px}
  .login-link{min-width:44px;justify-content:center}
}

/* ── 꼬리 ── 포털 footer 의 최종값 + 게시판의 법적 링크 */
.site-footer{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;min-height:80px;padding:15px max(20px,calc((100% - 1140px)/2));background:#f5f6f7;border-top:1px solid #dfe3e8;color:#272a2e;font-family:GmarketSans,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:12px;line-height:1.55}
.site-footer a{min-height:44px;display:inline-flex;align-items:center;color:#4d5965;text-decoration:none}
.site-footer a:hover{color:#111}
.site-footer__note{flex-basis:100%;color:#68727d}
@media(max-width:760px){.site-footer{padding:15px 14px;gap:0 14px}}