/* ===== base.css ===== */
/* Global reset + shared defaults */

:root {
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --brand-blue: #2563eb;

  --border: rgba(0, 0, 0, 0.10);
  --text: rgba(0, 0, 0, 0.88);
  --muted: rgba(0, 0, 0, 0.60);
  --bg: #fafafa;
  --card: #ffffff;

  --shadow-sm: 0 1px 10px rgba(0, 0, 0, 0.04);
}

html {
  -webkit-text-size-adjust: 100%;
  /* Off-canvas fixed navigation must never widen the root scrolling area.
     Nested carousels and route panels retain their own overflow behavior. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Anchor scroll-target offset — .topbar is position:fixed at top with
     height 75px. Without scroll-padding-top, jumping to <a id="..."> via
     #anchor lands the target UNDER the fixed topbar. The 90px value =
     75px topbar + 15px breathing room so the heading text is clearly
     visible below the bar. Affects ALL same-page anchor jumps site-wide. */
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding-top: 75px;
  /* Space for fixed header */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

main {
  flex: 1;
  width: 100%;
  /* Ensure it spans full width */
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  transition: opacity .15s ease, transform .05s ease, background-color .15s ease;
}

button:active {
  transform: translateY(1px);
}

button:disabled,
button[disabled] {
  cursor: not-allowed !important;
  opacity: 0.55;
  filter: grayscale(15%);
  pointer-events: none;
}

/* Touch target (mobile) */
button,
.chip,
.home-icon {
  min-height: 44px;
}

/* Shared container */
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px;
}

/* Mobile: padding + input font-size */
@media (max-width: 640px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  input {
    font-size: 16px;
  }
}

/* Header & Navigation */
/* Header & Navigation */
.topbar {
  display: flex;
  align-items: center;
  /* vertical centering */
  justify-content: space-between;
  height: 75px;
  /* increased height */
  background: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.topbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Hide back button when basket mode is active */
.basket-mode .topbar #backStepBtn {
  display: none;
}

.title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.topbar h2,
.topbar .topbar-brand {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-blue);
  /* Brand Blue */
  margin: 0;
  flex: 1;
  text-align: center;
  line-height: 1.2;
}

.topbar .topbar-brand {
  display: block;
  color: var(--brand-blue) !important;
  text-decoration: none;
}

/* Icons */
.home-icon,
.menu-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #333;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.home-icon {
  left: 0;
}

.menu-icon {
  right: 0;
  z-index: 20;
  /* Ensure it stays on top */
}

/* Fix: SVG causing click issues */
.menu-icon svg {
  pointer-events: none;
}

/* Sidebar Overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  backdrop-filter: none;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Sidebar Drawer */
.sidebar-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: #fff;
  z-index: 1000;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.3s;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.sidebar-drawer.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sidebar-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
}

.sidebar-logo {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  padding: 8px;
  margin-right: -8px;
  color: #666;
  cursor: pointer;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.nav-group-label {
  font-size: 12px;
  font-weight: 600;
  color: #999;
  padding: 0 20px;
  margin-bottom: 8px;
  margin-top: 16px;
}

.nav-group-label:first-child {
  margin-top: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.1s;
}

.nav-item:hover {
  background: #f5f9ff;
  color: #2563eb;
}

.nav-item svg {
  fill: currentColor;
  opacity: 0.7;
}

/* Site Footer */
.site-footer {
  background-color: #eef3ff;
  color: #6b7280;
  padding: 30px 0 10px;
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.6;
}

.site-footer .container {
  max-width: 1080px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr 0.5fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Two-column variant (Services | Legal). Brand block is moved to its own
   centered row below — see .footer-brand-bottom. */
.footer-top-2col {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.footer-brand-bottom {
  text-align: center;
  margin: 28px auto 0;
  max-width: 640px;
}
.footer-brand-bottom h2 {
  display: inline-block;
  margin: 0 0 12px;
}
.footer-brand-bottom p {
  margin: 0 auto;
  max-width: 560px;
}

.footer-brand h2 {
  color: #2563eb;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 10px;
}

.footer-brand p {
  color: #1f2937;
  max-width: 400px;
  font-size: 15px;
}

.footer-col h3 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: #1f2937;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-social-link svg {
  flex-shrink: 0;
}

.footer-divider {
  border-top: 1px solid #d1d9f0;
  margin: 15px 0;
}

.footer-legal-text p {
  margin: 6px 0;
  font-size: 13px;
  color: #6b7280;
}

.footer-legal-text strong {
  color: #6b7280;
}

.footer-bottom {
  text-align: center;
  margin-top: 15px;
  font-size: 13px;
  color: #6b7280;
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Tooltip Z-Index Fix */
.jvm-tooltip {
  z-index: 9999 !important;
}
/* Language Switcher */
.lang-switcher {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  background: #eef4ff;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 999px;
  padding: 2px;
  z-index: 10;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  line-height: 1;
  min-height: 24px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #7b8ba7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.lang-btn.active {
  background: #2563eb;
  color: #fff;
}
.lang-btn:hover:not(.active) {
  color: #2563eb;
}

/* Language dropdown (lang-dropdown.js).
   Used by all pages — the markup lives in templates/_lang_switcher.html.
   When .lang-switcher also has .lang-dropdown, strip the legacy pill so
   only the globe icon shows AND drop the absolute positioning that the
   pill design used (otherwise the dropdown floats away from any flex
   container the page has wrapped it in). */
.lang-switcher.lang-dropdown {
  background: transparent;
  border: 0;
  padding: 0;
  position: static;
  top: auto;
  transform: none;
}
.lang-dropdown { position: relative; display: inline-block; }
.lang-dropdown .lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  line-height: 0;
  transition: opacity .15s, transform .15s, color .15s;
}
.lang-dropdown .lang-trigger:hover { opacity: 0.7; }
.lang-dropdown .lang-trigger:active { transform: scale(0.92); }
.lang-dropdown .lang-trigger[aria-expanded="true"] { color: #1d4ed8; }
.lang-dropdown .lang-globe-icon { width: 22px; height: 22px; display: block; }
.lang-dropdown .lang-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  min-width: 90px;
  z-index: 900;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.lang-dropdown .lang-menu li { margin: 0; padding: 0; }
.lang-dropdown .lang-option {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  line-height: 1.3;
}
.lang-dropdown .lang-option:hover { background: #f3f4f6; }
.lang-dropdown .lang-option.is-active {
  background: #1d4ed8;
  color: #fff;
  font-weight: 600;
}

/* ============================================================================
   User menu dropdown — sits next to .lang-dropdown in the topbar.
   Visual contract mirrors .lang-dropdown so the two icons read as a pair:
     - identical trigger box (4px padding, transparent background)
     - identical icon size (22×22)
     - identical hover/active states
     - identical menu popover (white card, 8px radius, 12px shadow)
   The only structural difference is .user-menu-list opens RIGHT-aligned
   from its trigger (set explicitly below) so the popover doesn't run
   off-screen on narrow viewports (the user icon sits further right than
   the lang globe).
   ============================================================================ */
.user-dropdown { position: relative; display: inline-block; }
.user-dropdown .user-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  line-height: 0;
  transition: opacity .15s, transform .15s, color .15s;
}
.user-dropdown .user-trigger:hover { opacity: 0.7; }
.user-dropdown .user-trigger:active { transform: scale(0.92); }
.user-dropdown .user-trigger[aria-expanded="true"] { color: #1d4ed8; }
.user-dropdown .user-person-icon { width: 22px; height: 22px; display: block; }
.user-dropdown .user-menu-list {
  position: absolute;
  top: 100%;
  /* Left-align by default to match .lang-dropdown. The topbar layouts in
     index.html / plan.html keep the user icon close enough to the lang
     globe that left-alignment fits the same screen budget. */
  left: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  min-width: 120px; /* slightly wider than lang (90px) — labels like "회원가입" / "Sign up" need more room */
  z-index: 900;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.user-dropdown .user-menu-list li { margin: 0; padding: 0; }
.user-dropdown .user-option {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  line-height: 1.3;
}
.user-dropdown .user-option:hover { background: #f3f4f6; }
.user-dropdown .user-option[data-action="logout"] {
  /* Logout gets a subtle visual separation so the user doesn't click it
     by accident when reaching for the item above. */
  color: #b91c1c;
}
.user-dropdown .user-option[data-action="logout"]:hover {
  background: #fee2e2;
}
/* Dual-state visibility — the user-menu template renders BOTH the
   authenticated and the anonymous menu items. These selectors hide the
   wrong set based on data-authenticated on the root. JS flips the
   attribute when auth-state.js detects a state change, so the menu
   updates without a page reload or template re-render. */
.user-dropdown[data-authenticated="1"] [data-auth-only="anonymous"],
.user-dropdown[data-authenticated="0"] [data-auth-only="authenticated"] {
  display: none !important;
}