/* =========================================================
   WASSUP 파트너 — 레이아웃 (상단 바 · 좌측 메뉴 · 본문 · 반응형)
   기준 폭 1440 · 1023px 이하 좌측 메뉴는 드로어 · 759px 이하 휴대폰
   ========================================================= */
html.wa, .wa body { margin: 0; min-height: 100%; background: var(--bg); }
.wa body { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- 상단 바 (@include topbar) ---------- */
.wa .topbar { position: relative; z-index: 20; flex: none; }
.wa .logo-plate { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--logo-plate); flex: none; }
.wa .logo-plate img { height: 22px; width: auto; display: block; }
.wa .tb-gap { flex: 1 1 auto; }
.wa .tb-tools { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wa .tb-tools::-webkit-scrollbar { display: none; }
.wa .tb-menu { display: none; flex: none; }
.wa .theme-switch { padding: 2px; flex: none; }
.wa .theme-switch .tab { height: 28px; }
.wa .me-box { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; white-space: nowrap; flex: none; }
.wa .me-box b { font-weight: 600; }
.wa .me-box a, .wa .me-box button { color: var(--ink-3); text-decoration: none; background: none; border: 0; padding: 0; font-size: 12px; cursor: pointer; }
.wa .me-box a:hover, .wa .me-box button:hover { color: var(--ink); }
.wa .tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex: none; }

/* ---------- 본문 틀 ---------- */
.wa .shell { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.wa .shell > .nav { flex: 0 0 240px; width: 240px; }
.wa .nav-help { margin-top: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.wa .nav-help b { font-size: 12px; }
.wa .nav-head { display: none; }
.wa .nav-scrim { display: none; }
.wa .main { flex: 1 1 auto; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.wa .main.roomy { gap: 28px; }
.wa .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wa .page-head .caption { margin-top: 2px; }

/* ---------- 1023px 이하: 좌측 메뉴 → 드로어 ---------- */
@media (max-width: 1023px) {
  .wa .tb-menu { display: inline-flex; }
  .wa .shell > .nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 280px; overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s; box-shadow: var(--shadow-pop); }
  .wa body.nav-open .shell > .nav { transform: none; visibility: visible; }
  .wa .nav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 4px 4px; }
  .wa body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .wa body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .wa .shell > .nav { transition: none; } }

/* ---------- 759px 이하: 휴대폰 ---------- */
@media (max-width: 759px) {
  .wa .tb1 { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; }
  .wa .tb-tools { order: 5; flex: 1 0 100%; padding-bottom: 2px; }
  .wa .tb2 { padding: 0 12px; }
  .wa .main { padding: 16px; }
  .wa .modal, .wa .modal.pt140 { padding: 24px 12px; }
  .wa .modal-card { padding: 16px; }
}