/*
 * shell.css — 하위 페이지 공통 셸(헤더·계정 영역·CTA). 값은 home-ko.html 헤더에서 옮겼다.
 * 실행계획서: docs/plans/ssabari/user-account-ui-plan.md U0
 */
:root {
  --ssb-p: #1B64DA;
  --ssb-p-dark: #154DB0;
  --ssb-p-tint: #EAF1FE;
  --ssb-fg: #191F28;
  --ssb-fg-2: #4E5968;
  --ssb-fg-3: #8B95A1;
  --ssb-line: #E5E8EB;
  --ssb-bg-2: #F4F6F8;
}

.ssb-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ssb-line);
  letter-spacing: -0.01em;
}
.ssb-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 76px;
  display: flex; align-items: center; gap: 12px;
}
.ssb-logo { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; flex: none; }
.ssb-logo svg { flex: none; }
.ssb-logo__text { display: flex; flex-direction: column; gap: 2px; }
.ssb-logo__name { font-family: 'Black Han Sans', 'Pretendard Variable', Pretendard, sans-serif; font-size: 23px; font-weight: 400; color: var(--ssb-fg); line-height: 1; letter-spacing: .01em; }
.ssb-logo__name span { color: var(--ssb-p); }
.ssb-logo__tag { font-size: 9.5px; font-weight: 700; color: var(--ssb-fg-3); letter-spacing: .15em; }

.ssb-nav { display: flex; gap: 4px; margin-left: 36px; }
.ssb-nav a {
  padding: 9px 14px; border-radius: 10px; font-size: 15px; font-weight: 600;
  color: var(--ssb-fg-2); white-space: nowrap; text-decoration: none;
}
.ssb-nav a:hover { background: var(--ssb-bg-2); color: var(--ssb-fg); }
.ssb-nav a.is-active { font-weight: 800; color: var(--ssb-p); background: var(--ssb-p-tint); }

.ssb-header__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ssb-header__sep { width: 1px; height: 18px; background: var(--ssb-line); }

/* 계정 영역 — 홈 mu-plugin 주입분과 같은 모양 */
.ssb-account { display: inline-flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 700; }
.ssb-account a { color: var(--ssb-fg); text-decoration: none; white-space: nowrap; }
.ssb-account a.ssb-account__muted { color: var(--ssb-fg-3); font-weight: 600; }
.ssb-account a:hover { color: var(--ssb-p); }
.ssb-account__user { display: inline-flex; align-items: center; gap: 6px; }
.ssb-account__badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #FFF8E6; color: #7A5C00; border: 1px solid #FFE9B0; white-space: nowrap;
}
.ssb-account__badge--ok { background: #E8F5EC; color: #0a6e2a; border-color: #cfe9d6; }

.ssb-contact { display: flex; align-items: center; gap: 9px; }
.ssb-contact__dot { width: 8px; height: 8px; border-radius: 999px; background: #0BA55D; }
.ssb-contact__txt { display: flex; flex-direction: column; gap: 1px; }
.ssb-contact__hint { font-size: 11px; font-weight: 600; color: var(--ssb-fg-3); line-height: 1; white-space: nowrap; }
.ssb-contact__tel { font-size: 16px; font-weight: 800; color: var(--ssb-fg); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }

.ssb-cta {
  padding: 12px 20px; border-radius: 12px; background: var(--ssb-p); color: #fff !important;
  font-size: 15px; font-weight: 800; white-space: nowrap; text-decoration: none;
}
.ssb-cta:hover { background: var(--ssb-p-dark); }

/* 햄버거 — 데스크톱에선 숨김 */
.ssb-nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--ssb-line); border-radius: 10px; background: #fff; cursor: pointer; padding: 9px; }
.ssb-nav-toggle span { display: block; height: 2px; background: var(--ssb-fg); border-radius: 2px; margin: 4px 0; }

@media (max-width: 1100px) {
  .ssb-contact { display: none; }
  .ssb-nav { margin-left: 16px; }
  .ssb-nav a { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 860px) {
  .ssb-header__inner { padding: 0 16px; height: 64px; flex-wrap: wrap; }
  .ssb-nav-toggle { display: block; order: 3; margin-left: auto; }
  .ssb-header__right { order: 2; margin-left: auto; gap: 10px; }
  .ssb-header__sep { display: none; }
  .ssb-cta { padding: 10px 14px; font-size: 14px; }
  .ssb-nav { order: 4; display: none; width: 100%; flex-direction: column; margin: 0; padding: 8px 0 12px; border-top: 1px solid var(--ssb-line); }
  .ssb-nav.is-open { display: flex; }
  .ssb-header.is-open .ssb-header__inner { height: auto; }
  .ssb-logo__tag { display: none; }
}
@media (max-width: 480px) {
  .ssb-account a.ssb-account__muted { display: none; }
  .ssb-cta { display: none; }
}

/* 페이지 본문 기본 — page.php·woocommerce.php 인라인 여백과 맞춤 */
.site-main { min-height: 60vh; }
