/* fctzen 공통 헤더 — 헤더 스타일은 이 파일에만 있다. 마크업·동작은 js/core/header.js
   (tools/build_site.py 가 만든 파일. 고칠 때는 원본 CSS 를 고치고 다시 빌드) */
html{scrollbar-gutter:stable}
body{font-weight:450}
#site-header{--green:#111111;--ink:#242424;--line:#e9e9e9;--muted:#808080;--soft:#f5f5f5;color:#333;font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:14px;font-weight:450;line-height:1.65;letter-spacing:-.025em;text-align:start;text-size-adjust:auto;-webkit-text-size-adjust:auto;-webkit-font-smoothing:antialiased}
#site-header button{color:#000}
@media(max-width:760px){#site-header{font-size:13px}}
#site-header *, #site-header{box-sizing:border-box}
#site-header button, #site-header input, #site-header textarea{font:inherit}
#site-header button, #site-header a{-webkit-tap-highlight-color:transparent}
#site-header button{cursor:pointer}
#site-header button:focus-visible, #site-header a:focus-visible{outline:2px solid var(--green);outline-offset:4px}
#site-header{border-bottom:1px solid var(--line)}
#site-header .header{max-width:1024px;margin:auto;height:88px;display:flex;align-items:center;gap:60px;padding:0 36px}
#site-header .logo{font-size:29px;font-weight:850;letter-spacing:-1.8px;color:var(--green);text-decoration:none}
#site-header .logo span{font-weight:450}
#site-header nav{display:flex;gap:30px;flex:1;height:100%;align-items:center}
#site-header nav button{height:100%;border:0;background:none;color:#697067;position:relative;font-size:13px;font-weight:600}
#site-header nav button.active{color:var(--green)}
#site-header nav button.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--green)}
#site-header .account{display:flex;align-items:center;gap:10px;font-size:12px}
#site-header .avatar{height:32px;width:32px;border-radius:50%;background:#eeeeee;display:grid;place-items:center;color:var(--green);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:19px}
#site-header .account small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
#site-header [hidden]{display:none!important}
@media(max-width:1280px){
#site-header .header{gap:35px}
#site-header nav{gap:22px}
}
@media(max-width:760px){
#site-header .header{height:auto;padding:21px 20px 0;gap:20px;flex-wrap:wrap}
#site-header .logo{font-size:26px}
#site-header .account{margin-left:auto}
#site-header nav{order:3;width:100%;overflow:auto;gap:25px;flex-basis:100%;height:49px;white-space:nowrap}
}
#site-header .header{gap:28px}
#site-header nav{gap:18px}
#site-header .nav-group{position:relative;display:flex;align-items:center;height:100%}
#site-header .nav-toggle{padding:0 5px!important;font-size:11px!important}
#site-header .nav-dropdown{position:absolute;top:100%;left:-12px;z-index:10;min-width:155px;padding:8px;background:white;border:1px solid var(--line);border-radius:5px;box-shadow:0 8px 24px #00000012}
#site-header .nav-dropdown a{display:block;padding:12px;color:var(--ink);text-decoration:none;font-size:12px}
#site-header .nav-dropdown a:hover{background:var(--soft);color:var(--green)}
@media(max-width:760px){
#site-header nav{overflow:visible;flex-wrap:wrap;height:auto;gap:5px 18px;padding-bottom:8px}
#site-header nav>button, #site-header .nav-group{height:40px}
#site-header .nav-dropdown{left:auto;right:0}
}
#site-header #mobile-menu-toggle{display:none}
@media(min-width:761px){
#site-header .nav-group:hover>.nav-dropdown, #site-header .nav-group:focus-within>.nav-dropdown{display:block!important}
}
@media(max-width:760px){
#site-header .header{position:relative;padding-bottom:16px}
#site-header #mobile-menu-toggle{display:block;background:none;border:1px solid var(--line);border-radius:5px;padding:8px 12px;font-size:19px;color:var(--green);margin-left:auto}
#site-header .account{margin-left:0}
#site-header #main-nav{display:none;width:100%;flex-basis:100%;padding:8px 0 0;gap:0;white-space:normal}
#site-header #main-nav.mobile-open{display:flex;flex-direction:column;align-items:stretch}
#site-header #main-nav>button{text-align:left;min-height:44px;padding:12px;border-bottom:1px solid var(--line)}
#site-header #main-nav .nav-group{height:auto;display:grid;grid-template-columns:1fr 44px;border-bottom:1px solid var(--line)}
#site-header #main-nav .nav-group>[data-go]{text-align:left;padding:14px 12px;min-height:44px}
#site-header #main-nav .nav-toggle{min-height:44px}
#site-header #main-nav .nav-dropdown{position:static;grid-column:1 / -1;box-shadow:none;border:0;border-radius:0;padding:0 12px 10px 24px;background:var(--soft)}
#site-header #main-nav .nav-dropdown a{min-height:44px}
#site-header #main-nav button.active:after{display:none}
}
#site-header button, #site-header a, #site-header input, #site-header textarea{transition:background-color .16s,color .16s,border-color .16s}
#site-header .header{max-width:1024px;height:80px;padding:0 24px;gap:30px}
#site-header .logo{font-size:30px;letter-spacing:-1.6px;font-weight:800;color:var(--ink)}
#site-header .logo span{color:var(--green);font-weight:800}
#site-header #main-nav{gap:22px}
#site-header #main-nav button{font-size:13px;font-weight:600;color:#626963}
#site-header #main-nav button:hover, #site-header #main-nav button.active{color:var(--green)}
#site-header .avatar{font-family:inherit;font-weight:700;background:#eeeeee;font-size:16px;width:34px;height:34px}
#site-header .nav-dropdown{padding:7px;border-radius:10px;border:1px solid #e9eee5;box-shadow:0 12px 32px #00000012;min-width:164px}
#site-header .nav-dropdown a{padding:11px 12px;border-radius:6px}
@media(max-width:760px){
#site-header .header{height:auto;padding:16px 16px 12px;gap:14px}
#site-header .logo{font-size:28px}
#site-header .account{font-size:11px}
#site-header .avatar{width:30px;height:30px}
#site-header #mobile-menu-toggle{border:0;border-radius:8px;background:#f3f5f1;font-size:18px;min-height:40px;min-width:40px}
#site-header #main-nav{gap:0}
#site-header #main-nav>button, #site-header #main-nav .nav-group>[data-go]{font-size:14px;padding:14px 12px}
#site-header #main-nav .nav-dropdown{background:#f5f5f5;border-radius:8px;margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
#site-header button, #site-header a, #site-header input, #site-header textarea{transition:none}
}
#site-header .header{width:100%;max-width:1024px;height:76px;border-bottom:0;padding:0 24px;gap:42px}
#site-header{border-bottom:1px solid #ededed}
#site-header .logo{font-size:26px;text-transform:uppercase;letter-spacing:.12em;color:#181818}
#site-header .logo span{color:#999}
#site-header #main-nav{gap:25px}
#site-header #main-nav button{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#777}
#site-header #main-nav button.active{color:#111}
#site-header #main-nav button.active:after{background:#111;height:1px}
#site-header .account{font-size:11px}
#site-header .profile-button{font-size:11px}
#site-header .avatar{background:#f0f0f0;color:#222}
#site-header .nav-dropdown{border-radius:0;box-shadow:0 10px 24px #0000000c;border-color:#e5e5e5}
#site-header .nav-dropdown a{font-size:11px;border-radius:0}
@media(max-width:760px){
#site-header .header{height:auto;padding:14px 16px 10px}
#site-header .logo{font-size:23px}
#site-header #main-nav button{font-size:12px}
}
#site-header .account{gap:14px;flex-shrink:0}
#site-header .profile-wrap, #site-header .notification-wrap{position:relative}
#site-header .profile-button{display:flex;align-items:center;gap:9px;border:0;background:none;color:var(--ink);font-size:12px;padding:10px 0;text-align:left}
#site-header .notification-button{background:none;border:0;width:36px;height:40px;display:grid;place-items:center;color:#555555}
#site-header .member-popover{position:absolute;right:0;top:100%;min-width:180px;background:white;border:1px solid var(--line);border-radius:10px;padding:7px;box-shadow:0 12px 30px #00000014;z-index:30}
#site-header .member-popover a, #site-header .member-popover button{display:block;width:100%;text-align:left;padding:12px;border:0;background:none;text-decoration:none;color:var(--ink);font-size:12px;border-radius:6px}
#site-header .member-popover a:hover, #site-header .member-popover button:hover{background:var(--soft)}
#site-header #profile-menu{display:none}
#site-header .profile-wrap.open #profile-menu, #site-header .profile-wrap:focus-within #profile-menu{display:block}
#site-header #logout{border-top:1px solid var(--line);border-radius:0;color:#827568}
#site-header .member-popover strong{display:block;padding:12px;font-size:13px}
#site-header .member-popover p{padding:12px;color:var(--muted);font-size:12px}
#site-header .signup-link, #site-header .login-link{text-decoration:none;font-size:12px;color:var(--ink)}
#site-header .login-link{background:#555;color:white;padding:10px 14px;border-radius:8px}
@media(hover:hover) and (pointer:fine){
#site-header .profile-wrap:hover #profile-menu{display:block}
}
@media(max-width:760px){
#site-header .profile-button{font-size:11px}
#site-header .account{gap:6px}
#site-header .profile-button .avatar{width:28px;height:28px}
}
#site-header .signup-link, #site-header .login-link{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:0;padding:0 12px}
#site-header .member-popover{border-radius:0}
#site-header .member-popover a, #site-header .member-popover button{border-radius:0}
#site-header .profile-menu .profile-points{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:11px 12px 4px;font-size:12px;color:#888}
#site-header .profile-menu .profile-points b{font-size:14px;font-weight:600;color:#222;letter-spacing:0}
#site-header .profile-button .avatar{overflow:hidden}
#site-header .profile-button .avatar img{display:block;width:100%;height:100%;object-fit:cover}
#site-header .profile-button .avatar svg{display:block;width:62%;height:62%;color:#a5a5a5}
#site-header .profile-menu a.profile-zenz{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;padding:4px 12px 12px;border-bottom:1px solid #eee;font-size:12px;color:#888}
#site-header .profile-menu a.profile-zenz:hover{background:none;color:#222}
#site-header .profile-menu .profile-zenz span{font-weight:600;letter-spacing:.06em;color:#222}
#site-header .profile-menu .profile-zenz b{margin-left:auto;font-size:13px;font-weight:600;color:#222;letter-spacing:0}
#site-header .profile-menu .profile-zenz i{font-style:normal;color:#aaa;transition:transform .15s}
#site-header .profile-menu .profile-zenz:hover i{transform:translateX(3px);color:#222}
#site-header #profile-menu .profile-points, #site-header #profile-menu a.profile-zenz{box-sizing:border-box;min-height:34px;margin:0;padding:8px 12px;line-height:18px;align-items:center}
#site-header #profile-menu .profile-points{padding-top:10px}
#site-header #profile-menu a.profile-zenz{margin-bottom:4px;padding-bottom:10px;font-size:12px}
#site-header #profile-menu .profile-zenz b{font-size:12px;font-weight:450;color:#aaa}
#site-header #profile-menu .profile-zenz span{font-size:12px;font-weight:450;letter-spacing:-.35px;color:#888}
#site-header #profile-menu .profile-zenz b{font-size:14px;font-weight:600;color:#222;letter-spacing:0}
#site-header #profile-menu a.profile-admin{display:flex;align-items:center;gap:7px}
#site-header #profile-menu .profile-admin .menu-icon{flex:none;color:#888}
#site-header #profile-menu a.profile-admin:hover .menu-icon{color:#222}
#site-header .account .login-link{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 12px;border:1px solid #ddd;border-radius:0;background:#fff;color:#666;font-size:12px;line-height:1;text-decoration:none}
#site-header .account .login-link:hover{border-color:#bbb;background:#f7f7f7;color:#222}
#site-header #profile-menu button.profile-logout{display:flex;align-items:center;gap:7px}
#site-header #profile-menu .profile-logout .menu-icon{flex:none;color:#888}
#site-header #profile-menu button.profile-logout:hover .menu-icon{color:#222}
#site-header #profile-menu a.profile-admin{color:#888}
#site-header #profile-menu a.profile-admin:hover{color:#222}
#site-header #profile-menu button.profile-logout{color:#888}
#site-header #profile-menu button.profile-logout:hover{color:#222}
#site-header #profile-menu a.profile-points{display:flex;gap:8px;text-decoration:none;color:#888}
#site-header #profile-menu a.profile-points:hover{background:none;color:#222}
#site-header #profile-menu .profile-points b{margin-left:auto}
#site-header #profile-menu .profile-points i{font-style:normal;color:#aaa;transition:transform .15s}
#site-header #profile-menu .profile-points:hover i{transform:translateX(3px);color:#222}
#site-header #profile-menu a.profile-zenz{margin-bottom:0;padding-top:10px;padding-bottom:8px;border-bottom:0}
#site-header #profile-menu a.profile-points{margin-bottom:4px;padding-top:8px;padding-bottom:10px;border-bottom:1px solid #eee}
#site-header #profile-menu a.profile-zenz, #site-header #profile-menu a.profile-points{box-sizing:border-box;height:40px;min-height:40px;padding-top:11px;padding-bottom:11px;line-height:18px}
#site-header #profile-menu a.profile-points{padding-bottom:10px}
#site-header #profile-menu a.profile-points{height:44px;min-height:44px;margin-bottom:4px;padding-bottom:14px}
#site-header #profile-menu button.profile-logout{position:relative;margin-top:8px;padding-top:11px;border-top:0}
#site-header #profile-menu button.profile-logout::before{content:"";position:absolute;left:0;right:0;top:-5px;height:1px;background:#e9e9e9}
#site-header .avatar{background:#f0f0f0;color:var(--green)}
#site-header .nav-dropdown, #site-header .member-popover{background:#fff;border-color:#e6e6e6;box-shadow:0 12px 30px #0000000d}
#site-header .nav-dropdown a:hover, #site-header .member-popover a:hover, #site-header .member-popover button:hover{background:#f4f4f4}
@media(max-width:760px){
#site-header #mobile-menu-toggle, #site-header #main-nav .nav-dropdown{background:#f5f5f5}
}
#site-header .logo{font-size:29px}
#site-header #main-nav button{font-size:14px;font-weight:500;color:#444}
#site-header #main-nav button:hover, #site-header #main-nav button.active{color:#222;font-weight:600}
#site-header .nav-toggle::before{content:"";display:block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
#site-header .nav-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(225deg)}
#site-header .nav-dropdown a{font-size:13px;font-weight:450;color:#555}
#site-header .nav-dropdown a:hover{color:#333;font-weight:500}
#site-header .profile-button, #site-header .signup-link, #site-header .login-link, #site-header .member-popover a, #site-header .member-popover button{font-size:13px}
#site-header .profile-button{height:40px;border:1px solid #ddd;border-radius:0;background:#fff;padding:4px 10px 4px 4px;gap:8px;white-space:nowrap}
#site-header .profile-button .avatar{width:30px;height:30px;border-radius:0;background:#ededed;color:#333;font-size:12px}
#site-header #profile-menu, #site-header #notification-panel{top:calc(100% + 18px);right:0;min-width:164px;padding:7px;border:1px solid #e5e5e5;border-radius:0;background:#fff;box-shadow:0 10px 24px #0000000c}
#site-header #profile-menu::before, #site-header #notification-panel::before{content:"";position:absolute;left:0;right:0;top:-19px;height:19px}
#site-header #profile-menu a, #site-header #profile-menu button{padding:11px 12px;border-radius:0;font-size:13px}
#site-header #notification-panel strong, #site-header #notification-panel p{padding:11px 12px;font-size:13px}
@media(max-width:760px){
#site-header .header{position:relative;z-index:30}
#site-header #mobile-menu-toggle{order:-1;margin-left:0;border-radius:0}
#site-header .header>.logo{order:0}
#site-header .header>.account{margin-left:auto}
#site-header #main-nav.mobile-open{position:absolute;top:100%;left:0;right:0;z-index:50;width:100%;height:auto;max-height:calc(100vh - 64px);display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-content:stretch;overflow-x:hidden;overflow-y:auto;padding:24px 16px 20px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 12px 24px #00000012}
#site-header #main-nav>button, #site-header #main-nav .nav-group, #site-header #main-nav .nav-group>[data-go], #site-header #main-nav .nav-toggle, #site-header #main-nav .nav-dropdown, #site-header #main-nav .nav-dropdown a{border-radius:0}
#site-header #main-nav .nav-dropdown{padding:10px 12px 10px 24px;background:#f5f5f5}
#site-header #main-nav>button, #site-header #main-nav .nav-group>[data-go], #site-header #main-nav .nav-dropdown a{display:flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0;line-height:1.4}
#site-header #main-nav .nav-toggle{display:flex;align-items:center;justify-content:center;min-height:44px}
#site-header .logo{font-size:26px}
#site-header #main-nav button{font-size:14px}
#site-header .nav-dropdown a{font-size:14px}
#site-header .profile-button{font-size:12px}
#site-header #profile-menu, #site-header #notification-panel{top:calc(100% + 10px)}
#site-header #profile-menu::before, #site-header #notification-panel::before{top:-11px;height:11px}
}
@media(max-width:760px){
body.chat-route>#site-header{min-height:0;flex:none}
}
#site-header{box-sizing:border-box;border-bottom:1px solid #ededed;background:#fff}
#site-header .header{box-sizing:border-box;display:flex;align-items:center;width:100%;max-width:1024px;height:76px;margin:0 auto;padding:0 24px;gap:42px}
#site-header .logo{box-sizing:border-box;display:inline-flex;align-items:center;flex:0 0 auto;color:#181818;text-decoration:none;font:850 26px/1 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;letter-spacing:.12em;text-transform:uppercase}
#site-header .logo span{color:#999;font:inherit}
#site-header #main-nav{height:100%;gap:25px}
#site-header #main-nav>button, #site-header #main-nav .nav-group>[data-go]{box-sizing:border-box;display:flex;align-items:center;height:100%;padding:0 5px;border:0;border-radius:0;background:none;color:#444;font:500 14px/1.4 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer}
#site-header .nav-group{position:relative;display:flex;align-items:center;height:100%}
#site-header .nav-toggle{box-sizing:border-box;width:24px;height:100%;padding:0!important;border:0;background:none;color:#555;display:grid;place-items:center}
#site-header .nav-toggle::before{content:"";display:block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
#site-header .nav-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(225deg)}
#site-header .nav-dropdown{position:absolute;z-index:100;top:100%;left:-12px;min-width:164px;padding:7px;border:1px solid #e5e5e5;border-radius:0;background:#fff;box-shadow:0 10px 24px #0000000c}
#site-header .nav-group:hover>.nav-dropdown, #site-header .nav-group:focus-within>.nav-dropdown{display:block!important}
#site-header .nav-dropdown a{box-sizing:border-box;display:block;width:100%;padding:11px 12px;border-radius:0;color:#555;font:450 13px/1.65 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;text-decoration:none;white-space:nowrap}
#site-header .nav-dropdown a:hover{background:#f5f5f5;color:#111}
#site-header .account{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto;border:0;padding:0;font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
#site-header .notification-wrap, #site-header .profile-wrap{position:relative}
#site-header .notification-button{display:grid;place-items:center;width:36px;height:40px;padding:0;border:0;background:none;color:#555;cursor:pointer}
#site-header .profile-button{box-sizing:border-box;display:flex;align-items:center;gap:8px;height:40px;padding:4px 10px 4px 4px;border:1px solid #ddd;border-radius:0;background:#fff;color:#222;font:500 13px/1.4 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer}
#site-header .profile-button .avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:0;background:#ededed;color:#333;font:700 12px/1 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;letter-spacing:0}
#site-header .member-popover{position:absolute;right:0;top:100%;z-index:300;min-width:180px;padding:7px;border:1px solid #e5e5e5;border-radius:0;background:#fff;box-shadow:0 12px 30px #00000014}
#site-header .member-popover a, #site-header .member-popover button{display:block;box-sizing:border-box;width:100%;padding:12px;border:0;border-radius:0;background:none;color:#333;text-align:left;text-decoration:none;font:450 13px/1.4 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;letter-spacing:0}
#site-header .member-popover a:hover, #site-header .member-popover button:hover{background:#f5f5f5}
#site-header .member-popover strong{display:block;padding:12px;font-size:13px}
#site-header .member-popover p{margin:0;padding:12px;color:#888;font-size:12px}
#site-header .profile-menu{display:none}
#site-header .profile-wrap.open .profile-menu, #site-header .profile-wrap:focus-within .profile-menu{display:block}
@media(max-width:760px){
#site-header .header{height:64px;padding:0 16px;gap:14px}
#site-header .logo{font-size:23px}
#site-header #main-nav{height:auto;gap:0}
#site-header #main-nav>button, #site-header #main-nav .nav-group>[data-go], #site-header #main-nav .nav-dropdown a{box-sizing:border-box;min-height:44px;font-size:14px}
#site-header #main-nav>button{width:100%;padding:12px;text-align:left;border-bottom:1px solid #eee}
#site-header #main-nav .nav-group{height:auto;display:grid;grid-template-columns:1fr 44px;border-bottom:1px solid #eee}
#site-header #main-nav .nav-group>[data-go]{width:100%;padding:12px;text-align:left}
#site-header #main-nav .nav-toggle{width:44px;min-height:44px}
#site-header .nav-dropdown{position:static;grid-column:1/-1;width:100%;border:0;background:#f5f5f5;box-shadow:none}
#site-header .nav-group:hover>.nav-dropdown{display:none!important}
#site-header .nav-group .nav-toggle[aria-expanded="true"]+.nav-dropdown{display:block!important}
#site-header .account{gap:6px}
#site-header .profile-button{padding-right:6px;font-size:12px}
#site-header .notification-button{width:32px}
#site-header .profile-button .avatar{width:28px;height:28px}
}
[data-role]:not([data-role="admin"]) #site-header .admin-only{display:none!important}
/* 알림 — 안 읽은 개수 · 목록 (tools/site-src/header-extra.css, 빌드 때 header.css 뒤에 붙는다) */
#site-header .notification-button{position:relative}
#site-header .notice-badge{position:absolute;top:6px;right:0;min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;background:#222;color:#fff;font-size:9px;font-weight:600;line-height:15px;text-align:center;font-variant-numeric:tabular-nums}
#site-header .notification-panel{width:300px;padding:0}
#site-header .notice-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eee}
#site-header .notice-head strong{padding:0;font-size:13px}
#site-header .member-popover .notice-readall{display:inline;width:auto;padding:0;border:0;background:none;color:#999;font-size:11px;cursor:pointer}
#site-header .member-popover .notice-readall:hover{background:none;color:#222}
#site-header .notice-list{max-height:360px;margin:0;padding:0;overflow-y:auto;list-style:none}
#site-header .notice-list li+li{border-top:1px solid #f2f2f2}
#site-header .member-popover .notice-list a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;color:#888;font-size:12px;line-height:1.5;white-space:normal}
#site-header .notice-list li.unread a{color:#333;background:#fafafa}
#site-header .notice-list li.unread a::before{content:"";float:left;width:5px;height:5px;margin:7px 6px 0 0;background:#222}
#site-header .notice-text b{font-weight:600;color:inherit}
#site-header .notice-excerpt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#999;font-size:11px}
#site-header .notice-list time{font-size:10px;color:#aaa}
#site-header .notification-panel>p{margin:0;padding:18px 14px;text-align:center}
@media(max-width:760px){#site-header .notification-panel{width:min(300px,calc(100vw - 24px))}}
/* 안 읽음 점은 이름 앞에 한 줄로, 제목 '알림' 여백은 머리 줄 기준 */
#site-header .notice-list li.unread a::before{content:none}
#site-header .notice-list li.unread .notice-text::before{content:"";display:inline-block;width:5px;height:5px;margin:0 6px 2px 0;vertical-align:middle;background:#222}
#site-header .member-popover .notice-head strong{display:inline;padding:0}
#site-header #notification-panel .notice-head strong{display:inline;padding:0}
/* 알림 머리 줄 — 조금 낮게 */
#site-header .notice-head{padding:8px 14px}
#site-header #notification-panel .notice-head strong{font-size:12px}
/* 알림 머리 줄 세로 가운데 — 창 위 여백(7px)을 없애고 글자 줄 높이를 1로 */
#site-header #notification-panel{padding:0}
#site-header .notice-head{padding:11px 14px}
#site-header #notification-panel .notice-head strong,#site-header .member-popover .notice-readall{line-height:1}
#site-header .notice-head{padding:11.5px 14px 10.5px}

/* PC — 드롭다운은 그대로, 목록만 길게 */
#site-header .notice-list{max-height:min(70vh,600px)}
#site-header .member-popover .notice-close{display:none}
/* 모바일 — 화면 맨 위부터 전체를 덮으며 위에서 아래로 떨어진다. 닫기(✕) 로 닫는다 */
@media(max-width:760px){
 #site-header #notification-panel{position:fixed;inset:0;z-index:100;width:auto;max-width:none;height:100vh;height:100dvh;display:flex;flex-direction:column;border:0;box-shadow:none;animation:notice-drop .22s ease-out}
 #site-header #notification-panel[hidden]{display:none}
 #site-header #notification-panel::before{display:none}
 #site-header .notice-head{flex:none;padding:18px 16px 17px;gap:16px}
 #site-header #notification-panel .notice-head strong{margin-right:auto;font-size:15px}
 #site-header .member-popover .notice-readall{font-size:12px}
 #site-header .member-popover .notice-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px -6px -6px 0;padding:0;border:0;background:none;color:#555;font-size:16px;line-height:1;cursor:pointer}
 #site-header .notice-list{flex:1;max-height:none}
 #site-header .member-popover .notice-list a{padding:14px 16px;font-size:13px}
 html:has(#notification-panel:not([hidden])){overflow:hidden}
}
@keyframes notice-drop{from{transform:translateY(-100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){#site-header #notification-panel{animation:none}}
/* PC — 알림창 오른쪽 선을 프로필 드롭다운과 같게 (종 대신 계정 영역 오른쪽 끝 기준) */
@media(min-width:761px){#site-header .account{position:relative}#site-header .notification-wrap{position:static}#site-header #notification-panel{right:0}}
/* 알림(종) 아이콘 — 마우스 올림·열림 때 옅은 배경 */
#site-header .notification-button:hover,#site-header .notification-button[aria-expanded="true"]{background:#f4f4f4;color:#222}
/* 안 읽은 알림 — 숫자 대신 종 안을 채움 */
#site-header .notice-badge{display:none}
#site-header .notification-button.has-unread svg path{fill:currentColor}
#site-header .notification-button.has-unread{color:#222}

/* 로고 — 글자 대신 도형(svg). 높이는 예전 글자의 대문자 높이(.72em)에 맞추고, 색은 글자색 그대로. 뒤의 온점은 예전 그대로 */
#site-header .logo{align-items:baseline;letter-spacing:0}
#site-header .logo .logo-mark{display:block;flex:none;width:auto;height:.72em;fill:currentColor}
#site-header .logo span{margin-left:.07em}

/* 모바일 프로필 드롭다운은 헤더 하단을 기준으로 배치 */
@media(max-width:760px){
 #site-header .account,#site-header .profile-wrap{position:static}
 #site-header #profile-menu{top:100%;right:16px;margin-top:0;transform:none}
}


/* 알림 창 [읽은 알림 삭제] — [모두 읽음] 옆 */
#site-header .member-popover .notice-clearread{margin-left:10px}

/* 알림 창 — 위 줄 오른쪽 [모두 읽음](늘 보임), 아래 줄: 왼쪽 '이 기기에서 알림 받기' · 오른쪽 [읽은 알림 삭제] */
#site-header .member-popover .notice-readall:disabled{color:#ccc;cursor:default}
#site-header .notice-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid #eee;font-size:12px}
#site-header .notice-foot .notice-push,#site-header .notice-foot .notice-clearread{display:inline;width:auto;min-width:0;margin:0;padding:0;border:0;background:none;font:inherit;font-size:12px;line-height:1.4;cursor:pointer}
#site-header .notice-foot .notice-push{color:#222;text-decoration:underline;text-underline-offset:2px;text-align:left}
#site-header .notice-foot .notice-push.is-denied{color:#999;text-decoration:none;cursor:default}
#site-header .notice-foot .notice-clearread{flex:none;margin-left:auto;color:#999}
#site-header .notice-foot .notice-clearread:hover:not(:disabled){color:#222;background:none}
#site-header .notice-foot .notice-clearread:disabled{color:#ccc;cursor:default}