/**
 * 팔자연구소 — 공통 상단 탑바·프로그램 내비
 * 페이지 :root 변수와 충돌하지 않도록 --tb-* 스코프 변수만 사용합니다.
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.site-top {
  --tb-cream: #f5f0e8;
  --tb-border: rgba(139, 111, 71, 0.15);
  --tb-muted: #9a8570;
  --tb-deep-brown: #4a3520;
  --tb-warm-brown: #8b6f47;
  --tb-ink: #2c1f0e;
  --tb-accent: #c8a96e;
  --tb-accent-lt: #e8d5b0;
  --tb-teal: #2e8b7a;
  --tb-teal-lt: rgba(46, 139, 122, 0.12);
  --tb-parchment: #ede5d4;
  --tb-font-serif: 'Noto Serif KR', serif;
  --tb-content-max: 1140px;

  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 240, 232, 0.98);
  box-shadow: 0 6px 18px rgba(45, 38, 28, 0.06);
}

.site-top .topbar {
  min-height: 52px;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tb-border);
  padding: 10px 32px;
}

.site-top .topbar-inner {
  max-width: var(--tb-content-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-top .program-nav {
  border-bottom: 1px solid var(--tb-border);
  background: rgba(255, 255, 255, 0.55);
  padding: 0 32px;
}

.site-top .program-nav-inner {
  max-width: var(--tb-content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 7px 0 9px;
  font-size: 12px;
}

.site-top .program-nav-inner a {
  color: var(--tb-muted);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.15s;
  white-space: nowrap;
}

.site-top .program-nav-inner a:hover {
  color: var(--tb-deep-brown);
}

.site-top .program-nav-current {
  color: var(--tb-deep-brown);
  font-weight: 700;
  white-space: nowrap;
}

.site-top .topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 1 1 auto;
}

.site-top .topbar-logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--tb-deep-brown);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-top a.topbar-logo .topbar-logo-mark {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 9px;
  background: linear-gradient(160deg, #5a402d 0%, #3d2b1f 65%, #2d1f16 100%);
  color: var(--tb-cream);
  font-family: 'Noto Serif KR', serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 240, 232, 0.22);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}

.site-top a.topbar-logo .topbar-logo-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}

.site-top a.topbar-logo .topbar-logo-mark::after {
  content: '八';
  position: absolute;
  right: 2px;
  top: 0;
  font-family: 'Noto Serif KR', serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
  pointer-events: none;
}

.site-top .topbar-sep {
  width: 1px;
  height: 16px;
  background: var(--tb-border);
  flex-shrink: 0;
}

.site-top .topbar-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tb-deep-brown);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-top .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.site-top .topbar-export-cluster {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-top .topbar-export-cluster.is-visible,
.site-top .topbar-export-cluster.is-always {
  display: flex;
}

.site-top .topbar-export-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-top .plan-badge {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--tb-border);
  color: var(--tb-muted);
  font-weight: 700;
}

.site-top .plan-badge.free {
  border-color: rgba(139, 111, 71, 0.35);
  color: var(--tb-warm-brown);
  background: rgba(232, 213, 176, 0.35);
}

.site-top .plan-badge.basic {
  border-color: var(--tb-accent);
  color: var(--tb-warm-brown);
  background: var(--tb-accent-lt);
}

.site-top .plan-badge.pro {
  border-color: var(--tb-teal);
  color: var(--tb-teal);
  background: var(--tb-teal-lt);
}

.site-top .plan-badge.professional {
  border-color: var(--tb-deep-brown);
  color: var(--tb-deep-brown);
  background: var(--tb-parchment);
}

.site-top .back-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tb-deep-brown);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
  white-space: nowrap;
  border: none;
  background: none;
  padding: 0;
}

.site-top .back-btn:hover {
  color: var(--tb-ink);
}

.site-top .topbar-auth-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--tb-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.site-top .topbar-auth-link:hover {
  color: var(--tb-deep-brown);
}

.site-top .topbar-auth-dot {
  color: var(--tb-border);
  font-weight: 400;
  user-select: none;
  font-size: 12px;
}

.site-top .topbar-auth-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.site-top .topbar-auth-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin: 0;
}

.site-top .counselor-bar-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--tb-border);
  background: #fff;
  color: var(--tb-deep-brown);
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.site-top .counselor-bar-btn:hover {
  background: var(--tb-parchment);
  border-color: var(--tb-warm-brown);
  color: var(--tb-ink);
}