/* One header component. Names are isolated from page-specific legacy rules. */
.site-header {
  --header-ink: #25364c; --header-muted: #536176; --header-blue: #175ac0; --header-line: #e0e5ec;
  position: relative; z-index: 50; width: 100%; margin: 0; padding: 0;
  background: #fff; color: var(--header-ink); border: 0; border-bottom: 1px solid var(--header-line);
  font-family: Pretendard, 'Noto Sans KR', system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5;
  letter-spacing: normal; box-shadow: none;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a { color: inherit; text-decoration: none; }
.site-header button, .site-header summary { font: inherit; letter-spacing: inherit; cursor: pointer; }
.site-header :is(a,button,summary):focus-visible { outline: 3px solid #739fee; outline-offset: 3px; }
.site-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; width: min(1200px, calc(100% - 48px)); height: 72px; margin: 0 auto; }
.site-header-brand { display: flex; justify-self: start; align-items: center; gap: 8px; min-width: 0; }
.site-header-brand img { display: block; width: 36px; height: 32px; object-fit: contain; margin: 0; }
.site-header-brand strong { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -.8px; white-space: nowrap; }
.site-header-nav { display: flex; align-self: stretch; align-items: stretch; justify-content: center; gap: 24px; }
.site-header-nav a { display: flex; align-items: center; position: relative; margin: 0; padding: 0; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--header-muted); }
.site-header-nav a[aria-current="page"] { color: var(--header-blue); font-weight: 800; }
.site-header-nav a[aria-current="page"]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--header-blue); border-radius: 3px 3px 0 0; }
.site-header-actions { display: flex; justify-self: end; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.site-header :is(.site-header-bell, .site-header-user, .site-header-login) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 44px; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--header-line); border-radius: 8px; background: #fff; color: var(--header-ink); box-shadow: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.site-header .site-header-bell { position: relative; width: 44px; padding: 10px; flex-shrink: 0; }
.site-header-bell svg { width: 22px; height: 22px; }
.site-header-login svg { width: 18px; height: 18px; }
.site-header #notificationUnreadCount { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #175ac0; color: white; font-size: 10px; line-height: 17px; text-align: center; }
.site-header-auth { position: relative; }
.site-header-user { max-width: 180px; }
.site-header-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #edf3fd; color: var(--header-blue); font-size: 13px; }
.site-header-user-name { overflow: hidden; text-overflow: ellipsis; max-width: 88px; font-size: 13px; }
/* Match the plan classes set by server rendering and core/auth.js on every page. */
.site-header .site-header-user.has-plan-indicator { --header-plan-accent: #94a3b8; --header-plan-weight: 500; border-color: var(--header-plan-accent); font-weight: var(--header-plan-weight); }
.site-header .site-header-user:is(.is-premium, .is-trial) { --header-plan-accent: #2f73d9; --header-plan-weight: 700; }
.site-header .site-header-user:is(.is-business, .is-master) { --header-plan-accent: #c49a3b; --header-plan-weight: 800; }
.site-header .site-header-user.has-plan-indicator .site-header-user-name { font-weight: var(--header-plan-weight); }
/* Keep the pre-existing admin identification independent of the subscription. */
.site-header .site-header-user.is-admin { border-color: #dc2626; }
.site-header-chevron { flex: 0 0 12px; width: 12px; height: 12px; }
.site-header-plan-dot { display: none; }
.site-header-account-menu { position: absolute; z-index: 100; right: 0; top: calc(100% + 10px); width: 240px; max-width: calc(100vw - 24px); padding: 8px; border: 1px solid var(--header-line); border-radius: 10px; background: white; box-shadow: 0 8px 24px #25364c14; }
.site-header-account-summary { display: grid; gap: 3px; padding: 10px; border-bottom: 1px solid var(--header-line); margin-bottom: 6px; }
.site-header-account-summary strong { font-size: 15px; overflow-wrap: anywhere; }
.site-header-account-summary span { font-size: 12px; color: var(--header-muted); }
.site-header .site-header-account-item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px; margin: 0; border: 0; border-radius: 6px; background: white; color: var(--header-ink); font: inherit; text-align: left; }
.site-header .site-header-account-item:hover { background: #f1f5fb; }
.site-header .site-header-mobile { display: none; }
.app-skip-link { position: fixed; top: -80px; left: 16px; z-index: 100000; padding: 10px 16px; background: #25364c; color: white; border-radius: 8px; }
.app-skip-link:focus { top: 12px; }
@media (max-width: 1000px) {
  .site-header-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; width: calc(100% - 32px); height: 64px; }
  .site-header-nav { display: none; }
  .site-header .site-header-mobile { display: block; position: relative; justify-self: end; }
  .site-header-mobile > summary { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 8px; list-style: none; border: 1px solid var(--header-line); border-radius: 8px; background: white; color: var(--header-muted); }
  .site-header-mobile > summary::-webkit-details-marker { display: none; }
  .site-header-mobile nav { display: grid; position: absolute; right: 0; top: calc(100% + 10px); width: 220px; padding: 8px; border: 1px solid var(--header-line); border-radius: 10px; background: white; box-shadow: 0 8px 24px #25364c14; }
  .site-header-mobile nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; font-size: 15px; }
  .site-header-mobile nav a[aria-current="page"] { background: #edf3fd; color: var(--header-blue); font-weight: 800; }
  .site-header-user-name, .site-header-chevron { display: none; }
  .site-header .site-header-user { width: 44px; padding: 7px; }
}
@media (max-width: 420px) {
  .site-header-brand strong { font-size: 18px; }
  .site-header-brand img { width: 30px; height: 28px; }
  .site-header .site-header-login { padding: 8px 10px; }
  .site-header-login svg { display: none; }
}

.site-header [hidden] { display: none; }