@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap");

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f2f4f8;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 900;
  pointer-events: none;
}

:root {
  --top-panel-left: 12px;
  --top-panel-width: 700px;
  --rank-left: 292px;
  --hub-nav-left: 230px;
  --hub-nav-right: clamp(460px, 34vw, 760px);
  --hub-col-width: 168px;
  --hub-col-gap: 18px;
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:active {
  transform: none !important;
}

#map {
  width: 100%;
  height: 100%;
}

.brandLogo {
  position: fixed;
  top: 0px;
  left: 12px;
  z-index: 1200;
  pointer-events: auto;
  cursor: pointer;
}

.brandLogo img {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

.hubNav {
  position: fixed;
  top: 0;
  left: var(--hub-nav-left);
  right: var(--hub-nav-right);
  height: 50px;
  z-index: 1085;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, var(--hub-col-width)));
  column-gap: var(--hub-col-gap);
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  background: transparent;
}

.hubPrimaryBtn {
  height: 50px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1a2438;
  font-size: 15px;
  font-weight: 800;
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  letter-spacing: -0.02em;
  width: 100%;
  text-align: center;
  transition: color 0.15s ease;
}

.hubPrimaryBtn:hover {
  color: #1e3a8a;
}

.hubPrimaryBtn.active {
  color: #1e3a8a;
}

.hubPrimaryBtn.active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: #1e3a8a;
}

.hubMega {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 2px solid #cbd5e1;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  padding: 14px 0 18px;
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
}

.hubMega.hidden {
  display: none;
}

.hubMegaGrid {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, var(--hub-col-width)));
  column-gap: var(--hub-col-gap);
  row-gap: 8px;
  padding-left: var(--hub-nav-left);
  padding-right: var(--hub-nav-right);
  align-items: start;
}

.hubMegaCol {
  min-height: auto;
  padding: 0 4px;
}

.hubMegaItems {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hubSecondaryBtn {
  border: 0;
  background: transparent;
  color: #334155;
  border-radius: 6px;
  min-height: 28px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  text-align: center;
  padding: 5px 8px;
  cursor: pointer;
  display: block;
  width: 100%;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.hubSecondaryBtn:hover {
  color: #1e3a8a;
  background: #f1f5f9;
  font-weight: 700;
  text-decoration: none;
}

@keyframes hubModalCenterFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.hubPanel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  width: min(660px, calc(100vw - 28px));
  height: 580px;
  max-height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  animation: hubModalCenterFadeIn 0.18s ease-out;
}

.hubPanel.hidden {
  display: none;
}

.hubModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

.hubModalBackdrop.hidden {
  display: none;
}

.introBackdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

.introBackdrop.hidden {
  display: none;
}

.introPopup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  width: min(840px, calc(100vw - 28px));
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  animation: hubModalCenterFadeIn 0.18s ease-out;
}

.introPopup.hidden {
  display: none;
}

.introPopupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.introPopupHead h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.introCloseBtn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.introCloseBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.introPopupBody {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 740px) {
  .introPopupBody {
    grid-template-columns: 1fr;
  }
}

.introRoleCard {
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}

.introRoleCard.military {
  background: #f8fbff;
  border: 1.5px solid #bfdbfe;
}

.introRoleCard.merchant {
  background: #f9fdfa;
  border: 1.5px solid #bbf7d0;
}

.introRoleCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.introRoleBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.introRoleBanner.military {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #ffffff;
}

.introRoleBanner.merchant {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
}

.roleBannerIcon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.roleBannerText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roleBannerTitle {
  font-size: 16.5px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.roleBannerSub {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
  line-height: 1.3;
}

.introRoleBanner.military .roleBannerSub {
  color: #eff6ff;
}

.introRoleBanner.merchant .roleBannerSub {
  color: #f0fdf4;
}

.introRoleList {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
}

.introRoleList li b {
  color: #0f172a;
}

.introRoleList a,
.introLink {
  color: #059669;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.introRoleList a:hover,
.introLink:hover {
  color: #047857;
}

.introPopupFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 18px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

.introNeverLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.introNeverLabel input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

.introConfirmBtn {
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
  padding: 10px 22px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
}

.introConfirmBtn:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

/* ============================================================
   TOP AUTH CONTROL & USER BAR
============================================================ */
.headerRightControls {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
}

.headerRightControls .rankPanel {
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.headerRightControls .profileMenuWrap {
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  height: 36px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.authNavWrap {
  display: flex;
  align-items: center;
  height: 36px;
  gap: 8px;
  flex-shrink: 0;
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
}

.authNavBtn {
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: all 0.15s ease;
}

.authNavBtn:hover {
  background: #ffffff;
  border-color: #2563eb;
  color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}

.authNavBtn.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.authNavBtn.primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

.authNavBtn.merchantBtn {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
}

.authNavBtn.merchantBtn:hover {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}

.authUserBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  user-select: none;
}

/* ============================================================
   AUTH MODAL (LOGIN / REGISTER)
============================================================ */
.authBackdrop,
.merchantStatsBackdrop,
.policyBackdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
}

.authBackdrop.hidden,
.merchantStatsBackdrop.hidden,
.policyBackdrop.hidden {
  display: none;
}

.authModal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  width: min(480px, calc(100vw - 28px));
  max-height: min(90vh, 840px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  animation: hubModalCenterFadeIn 0.18s ease-out;
}

.authModal.hidden {
  display: none;
}

.authModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.authTabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}

.authTab {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.authTab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.authCloseBtn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.authCloseBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.authModalBody {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.authModalBody.hidden {
  display: none;
}

.authWelcome h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.authWelcome p {
  margin: 4px 0 12px;
  font-size: 13px;
  color: #64748b;
}

.authForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.authInputGroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.authInputGroup.hidden {
  display: none;
}

.authInputGroup label {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}

.authInputGroup input {
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
}

.authInputGroup input:focus {
  border-color: #2563eb;
}

.authInputWithBtn {
  display: flex;
  gap: 6px;
}

.authInputWithBtn input {
  flex: 1;
}

.authSubBtn {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.authSubBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.authSubBtn.full {
  width: 100%;
}

.authSubBtn.success {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.authHelpText {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 1px;
}

.authHelpText.success {
  color: #16a34a;
}

.authHelpText.error {
  color: #dc2626;
}

.authSubmitBtn {
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
}

.authSubmitBtn:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.authErrorMsg {
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 600;
}

.authErrorMsg.hidden {
  display: none;
}

.authSwitchWrap {
  text-align: center;
  font-size: 12.5px;
  color: #64748b;
  margin-top: 2px;
}

.authLinkBtn {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Role Selector in Register */
.authRoleSelectWrap {
  margin-bottom: 10px;
}

.authRoleLabel {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.authRoleOptions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.authRoleOption input {
  display: none;
}

.authRoleBox {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #f8fafc;
  gap: 3px;
}

.authRoleBox .roleIcon {
  font-size: 22px;
  margin-bottom: 0px;
  line-height: 1;
}

.authRoleBox .roleText {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.authRoleBox strong {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  display: block;
  line-height: 1.2;
}

.authRoleBox small {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  display: block;
  line-height: 1.25;
  white-space: normal;
}

.authRoleOption input:checked + .authRoleBox {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.authRoleOption input:checked + .authRoleBox strong {
  color: #2563eb;
}

/* Merchant Verification Section */
.merchantVerifySection {
  border: 1.5px solid #dcfce7;
  background: #f9fdfa;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.merchantVerifySection.hidden {
  display: none;
}

.merchantVerifyHead h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #166534;
}

.merchantVerifyHead p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #15803d;
}

.storeSearchResults {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  margin-top: 2px;
}

.storeSearchResults.hidden {
  display: none;
}

.storeSearchItem {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s ease;
}

.storeSearchItem:last-child {
  border-bottom: 0;
}

.storeSearchItem:hover {
  background: #f0fdf4;
}

.storeSearchItem strong {
  font-size: 13px;
  color: #0f172a;
  display: block;
}

.storeSearchItem span {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-top: 1px;
}

.selectedStoreCard {
  border: 1px solid #86efac;
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.selectedStoreCard.hidden {
  display: none;
}

.selectedStoreInfo strong {
  font-size: 14px;
  color: #0f172a;
  display: block;
  margin-top: 2px;
}

.selectedStoreAddr {
  font-size: 11.5px;
  color: #64748b;
  display: block;
  margin-top: 1px;
}

.selectedStorePhone {
  font-size: 12px;
  color: #166534;
  margin-top: 2px;
  font-weight: 600;
}

.selectedStoreBadge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 5px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
}

/* Legal Agreements */
.authAgreementsWrap {
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.authAgreeCheck {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
}

.authAgreeCheck input {
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
}

.authAgreeSubList {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.authAgreeSubList a {
  color: #2563eb;
  text-decoration: underline;
}

/* ============================================================
   MERCHANT STATS MODAL
============================================================ */
.merchantStatsModal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  width: min(840px, calc(100vw - 28px));
  height: min(85vh, 760px);
  min-height: min(85vh, 760px);
  max-height: min(85vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  animation: hubModalCenterFadeIn 0.18s ease-out;
}

.merchantStatsModal.hidden {
  display: none;
}

.merchantStatsHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 26px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.merchantBadgeRow {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.merchantStoreTitle {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.merchantStoreAddress {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}

.merchantStatsBody {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.statsKpiGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 600px) {
  .statsKpiGrid {
    grid-template-columns: 1fr;
  }
}

.kpiCard {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpiCard.highlight {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.kpiLabel {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.kpiCard.highlight .kpiLabel {
  color: #2563eb;
}

.kpiValue {
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
}

.kpiCard.highlight .kpiValue {
  color: #1d4ed8;
}

.kpiValue small {
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
  color: #64748b;
}

.kpiSub {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin-top: 2px;
}

.mutualPartnersList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.statsCard {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  background: #ffffff;
}

.statsCardHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.statsCardHead h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.statsCardSub {
  font-size: 12px;
  color: #64748b;
}

.dailyChartContainer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
  padding-top: 18px;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}

.chartBarCol {
  flex: 1;
  min-width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 6px;
}

.chartBarValue {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
}

.chartBarFill {
  width: 100%;
  max-width: 22px;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.chartBarLabel {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.statsTwoColGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 650px) {
  .statsTwoColGrid {
    grid-template-columns: 1fr;
  }
}

.sourceBreakdownList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sourceItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.sourceItem strong {
  font-size: 13px;
  color: #0f172a;
}

.sourceItem span {
  font-size: 14px;
  font-weight: 800;
  color: #2563eb;
}

.actionCard {
  background: #f0fdf4;
  border-color: #bbf7d0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.actionCard h4 {
  color: #166534;
}

.actionCard p {
  margin: 0;
  font-size: 13px;
  color: #15803d;
  line-height: 1.5;
}

.merchantPrintActionBtn {
  border: 0;
  border-radius: 12px;
  background: #16a34a;
  color: #ffffff;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
  transition: all 0.15s ease;
  margin-top: 10px;
}

.merchantPrintActionBtn:hover {
  background: #15803d;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}

/* ============================================================
   POLICY / TERMS MODAL
============================================================ */
.policyModal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10060;
  width: min(600px, calc(100vw - 28px));
  max-height: min(80vh, 650px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  animation: hubModalCenterFadeIn 0.18s ease-out;
}

.policyModal.hidden {
  display: none;
}

.policyModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.policyModalHead h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.policyModalBody {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #334155;
}

.policyModalBody h4 {
  margin: 16px 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.policyModalBody p,
.policyModalBody ul {
  margin: 0 0 10px;
}

.policyModalBody ul {
  padding-left: 18px;
}

/* ============================================================
   ADMIN DASHBOARD MODAL & STYLES
============================================================ */
.authNavBtn.adminBtn {
  background: #fdf4ff;
  border-color: #f0abfc;
  color: #a21caf;
}

.authNavBtn.adminBtn:hover {
  background: #fae8ff;
  border-color: #e879f9;
  color: #86198f;
}

.adminDashboardBackdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.adminDashboardBackdrop.hidden {
  display: none;
}

.adminDashboardModal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  width: min(960px, calc(100vw - 28px));
  height: min(88vh, 820px);
  min-height: min(88vh, 820px);
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  animation: hubModalCenterFadeIn 0.18s ease-out;
}

.adminDashboardModal.hidden {
  display: none;
}

.adminDashboardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 26px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.adminBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  display: inline-block;
  margin-bottom: 4px;
}

.adminDashboardTitle {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
}

.adminDashboardBody {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #f8fafc;
}

.adminKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .adminKpiGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.adminKpiCard {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.adminKpiCard.highlight {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.adminKpiCard.clickable {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.adminKpiCard.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14);
  border-color: #93c5fd;
}

.adminKpiCard.userCard {
  background: #fdf4ff;
  border-color: #f5d0fe;
}

.adminKpiLabel {
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
}

.adminKpiCard.highlight .adminKpiLabel {
  color: #2563eb;
}

.adminKpiCard.userCard .adminKpiLabel {
  color: #a21caf;
}

.adminKpiValue {
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
}

.adminKpiCard.highlight .adminKpiValue {
  color: #1d4ed8;
}

.adminKpiCard.userCard .adminKpiValue {
  color: #86198f;
}

.adminKpiValue small {
  font-size: 13px;
  font-weight: 700;
  margin-left: 4px;
  color: #64748b;
}

.adminKpiSub {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

.adminStatsCard {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.adminStatsCardHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.adminStatsCardHead h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.adminStatsCardSub {
  font-size: 12px;
  color: #64748b;
}

.adminDailyChartContainer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.adminChartBarCol {
  flex: 1;
  min-width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}

.adminChartBarVal {
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
}

.adminChartBarPv {
  width: 100%;
  max-width: 16px;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.adminChartBarCol.today .adminChartBarPv {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.adminChartBarCol.today .adminChartBarVal {
  color: #d97706;
}

.adminChartBarLabel {
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
  text-align: center;
  line-height: 1.2;
}

.adminTwoColGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 650px) {
  .adminTwoColGrid {
    grid-template-columns: 1fr;
  }
}

.adminDeviceBreakdown,
.adminTopPathsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adminPathItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12.5px;
}

.adminPathItem strong {
  color: #1e293b;
  font-family: monospace;
}

.adminPathItem span {
  font-weight: 800;
  color: #2563eb;
}

.adminRecentTableWrap {
  overflow-x: auto;
}

.adminRecentTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.adminRecentTable th {
  padding: 8px 10px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 700;
  border-bottom: 1.5px solid #cbd5e1;
}

.adminRecentTable td {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

.adminRecentTable tr:last-child td {
  border-bottom: 0;
}

/* ============================================================
   ADMIN TAB BAR & MEMBER MANAGEMENT STYLES
============================================================ */
.adminTabBar {
  display: flex;
  background: #ffffff;
  padding: 0 26px;
  border-bottom: 1.5px solid #e2e8f0;
  gap: 16px;
}

.adminTabBtn {
  background: transparent;
  border: 0;
  border-bottom: 2.5px solid transparent;
  padding: 12px 6px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.adminTabBtn:hover {
  color: #1e293b;
}

.adminTabBtn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 800;
}

.adminTabBadge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

.adminTabBtn.active .adminTabBadge {
  background: #eff6ff;
  color: #2563eb;
}

.adminTabContent {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.adminTabContent.hidden {
  display: none !important;
}

/* Member Control Bar */
.adminMemberControlBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.adminRoleFilterBtns {
  display: flex;
  gap: 6px;
}

.adminRoleFilterBtn {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.adminRoleFilterBtn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.adminRoleFilterBtn.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.adminMemberSearchWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 380px;
}

.adminMemberSearchWrap input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
}

.adminMemberSearchWrap input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.adminRefreshBtn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  transition: all 0.15s ease;
}

.adminRefreshBtn:hover {
  background: #f1f5f9;
}

.adminMembersTable th,
.adminMembersTable td {
  vertical-align: middle;
  padding: 10px 12px;
}

.adminMembersTable tr:hover td {
  background: #f8fafc;
}

.adminLocateStoreBtn {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.adminLocateStoreBtn:hover {
  background: #2563eb;
  color: #ffffff;
}

/* ============================================================
   ADMIN STORE-LEVEL STATISTICS STYLES (TAB 3)
============================================================ */
.adminFacControlBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.adminFacFilterGroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.adminFacSelect {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.adminFacSelect:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.adminFacSearchWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 360px;
}

.adminFacSearchWrap input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
}

.adminFacSearchWrap input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.adminFacTable th,
.adminFacTable td {
  vertical-align: middle;
  padding: 8px 10px;
}

.adminFacTable tr:hover td {
  background: #f1f5f9;
}

.facRankBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  background: #f1f5f9;
  color: #475569;
}

.facRankBadge.top1 {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.facRankBadge.top2 {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.facRankBadge.top3 {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.facCategoryBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
}

.facStatValue {
  font-weight: 800;
  color: #0f172a;
}

.facStatValue.highlight {
  color: #2563eb;
}

.facStatValue.qrHighlight {
  color: #7c3aed;
}

.facActionBtns {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.facActionBtn {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.facActionBtn.mapBtn {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}

.facActionBtn.mapBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.facActionBtn.printBtn {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
}

.facActionBtn.printBtn:hover {
  background: #1d4ed8;
  color: #ffffff;
}

.hubPanelClose {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
}

.hubPanelClose:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.hubPanelTop {
  padding: 16px 22px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px 20px 0 0;
}

.hubPanelTitle {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

.hubSubTabs {
  display: flex;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 16px;
  gap: 6px;
  overflow-x: auto;
}

.hubSubTabBtn {
  padding: 11px 16px;
  border: 0;
  background: transparent;
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.hubSubTabBtn:hover {
  color: #1e3a8a;
}

.hubSubTabBtn.active {
  color: #1e3a8a;
  border-bottom-color: #1e3a8a;
  background: #ffffff;
}

.hubPanelBody {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: #ffffff;
}

.hubPanelNotice {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  line-height: 1.5;
  background: #f1f5f9;
  padding: 10px 14px;
  border-radius: 8px;
}

.hubCard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  transition: box-shadow 0.15s ease;
}

.hubCard:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hubCard h4 {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hubCard p {
  margin: 4px 0;
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}

.hubCard ul {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.6;
}

.hubBadge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: #eff6ff;
  color: #2563eb;
  margin-bottom: 6px;
}

.hubBtnLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #1e3a8a;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  margin-top: 10px;
  transition: background 0.15s ease;
}

.hubBtnLink:hover {
  background: #172554;
}

.hubInfoSection {
  margin-top: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hubInfoSection:first-child {
  margin-top: 0;
}

.hubInfoSection h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #1e3a8a;
  padding-left: 8px;
  border-left: 3px solid #1e3a8a;
}

.hubInfoSection p {
  margin: 7px 0 0;
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}

.hubBrief {
  margin-top: 7px;
  color: #475569;
  font-weight: 500;
}

.hubInlineLink {
  color: #2563eb;
  font-size: 12.5px;
  word-break: break-all;
  text-decoration: underline;
}

.hubInlineLink:hover {
  color: #1d4ed8;
}

.hubSourceList {
  list-style: disc;
  margin: 8px 0 0;
  padding-left: 18px;
}

.hubSourceList li {
  margin: 0 0 4px;
  line-height: 1.4;
}

.hubSourceList a {
  color: #1e4fb8;
  font-size: 12px;
  word-break: break-all;
  text-decoration: underline;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: inline;
  padding: 0;
}

.hubSourceList a:hover {
  color: #173f97;
}

.hubTextList {
  margin: 8px 0 0;
  padding-left: 18px;
  list-style: disc;
}

.hubTextList li {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  color: #2a3f64;
  line-height: 1.52;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.reviewBoardSection {
  background: transparent;
}

.reviewBoardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.reviewForm {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.reviewConsentRow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #324d77;
  user-select: none;
}

.reviewConsentRow input {
  width: 14px;
  height: 14px;
}

.reviewInput,
.reviewTextarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #1f3458;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: all 0.15s ease;
}

.reviewInput:focus,
.reviewTextarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.reviewTextarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}

.reviewSubmitBtn {
  justify-self: end;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
  transition: all 0.15s ease;
}

.reviewSubmitBtn:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.reviewListBtn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
}

.reviewListBtn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.reviewBoardList {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.reviewPagination {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.reviewPageNums {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reviewPageBtn,
.reviewPageNav {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reviewPageBtn:hover:not(.active),
.reviewPageNav:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.reviewPageBtn.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.reviewPageNav:disabled {
  opacity: 0.4;
  cursor: default;
}

.reviewBoardEmpty {
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  font-size: 13.5px;
  text-align: center;
  background: #f8fafc;
}

.reviewCard {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
  min-width: 0;
  overflow: hidden;
  transition: all 0.15s ease;
}

.reviewCardClickable {
  cursor: pointer;
}

.reviewCardClickable:hover {
  border-color: #93c5fd;
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.reviewCardHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.reviewCardHead strong {
  font-size: 13px;
  color: #1f3458;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewCardHead span {
  font-size: 11px;
  color: #6a7f9f;
}

.reviewCard p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #2d436a;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.reviewPreview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviewCardActions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

.reviewActionBtn {
  border: 1px solid #c7d6f3;
  background: #f5f8ff;
  color: #234a8d;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  cursor: pointer;
}

.reviewActionBtn.danger {
  border-color: #f1c8d0;
  background: #fff4f6;
  color: #b4233b;
}

.reviewPwOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.reviewPwDialog {
  width: min(420px, calc(100% - 24px));
  background: #ffffff;
  border: 1px solid #d8e3f7;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
}

.reviewPwDialog h5 {
  margin: 0;
  font-size: 15px;
  color: #163565;
}

.reviewPwDialog p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #304b73;
}

.reviewPwInput {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #c6d7f4;
  padding: 8px 10px;
  font-size: 13px;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  outline: none;
}

.reviewPwInput:focus {
  border-color: #2f6ff2;
  box-shadow: 0 0 0 2px rgba(47, 111, 242, 0.14);
}

.reviewPwError {
  margin-top: 6px;
  font-size: 12px;
  color: #b4233b;
}

.reviewPwError.hidden {
  display: none;
}

.reviewPwActions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}


.profileMenuWrap {
  position: fixed;
  top: 7px;
  right: 12px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sourceStatsBox {
  width: 250px;
  height: 36px;
  border: 1px solid #cfdcf5;
  border-radius: 8px;
  background: #2f6ff2;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sourceStatsTitle {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.95;
  white-space: nowrap;
  flex: 0 0 auto;
}

.sourceStatsTicker {
  position: relative;
  height: 16px;
  overflow: hidden;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.sourceStatsTrack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  animation: statsRollUp 6s linear infinite;
}

.sourceStatsLine {
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.sourceStatsLine strong {
  font-size: 13px;
  margin-left: 2px;
  margin-right: 2px;
}

@keyframes statsRollUp {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
  95% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(-32px);
  }
}

.rankPanel {
  position: fixed;
  top: 7px;
  right: 326px;
  left: auto;
  z-index: 1090;
  width: min(430px, calc(100vw - 338px));
  max-width: min(430px, calc(100vw - 338px));
  border: 1px solid #d7deed;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.rankPanel,
.rankPanel * {
  font-weight: 400 !important;
}

.rankHead {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #e7ecf5;
  cursor: pointer;
}

.rankPanel.collapsed .rankTabs,
.rankPanel.collapsed .rankAudienceFilters,
.rankPanel.collapsed .rankList {
  display: none;
}

.liveBadge {
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
}

.rankTopText {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1f2d45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rankTopScore {
  display: none !important;
}

.rankTabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #e7ecf5;
}

.rankTab {
  border: 0;
  background: #fff;
  height: 42px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
  color: #2f3f60;
  cursor: pointer;
}

.rankTab + .rankTab {
  border-left: 1px solid #e7ecf5;
}

.rankTab.active {
  background: #eaf1ff;
  color: #1e40af;
}

.rankAudienceFilters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 8px 6px;
  border-bottom: 1px solid #eef2f8;
}

.rankAudienceBtn {
  border: 1px solid #c8d5ef;
  background: #fff;
  color: #2f3f60;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.rankAudienceBtn.active {
  background: #2f6ff2;
  border-color: #2f6ff2;
  color: #fff;
}

.rankList {
  max-height: 220px;
  overflow: auto;
}

.rankRow {
  width: 100%;
  border: 0;
  border-top: 1px solid #edf1f8;
  background: #fff;
  text-align: left;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
}

.rankNo {
  font-size: 13px;
  font-weight: 800;
  color: #2f6ff2;
}

.rankName {
  font-size: 13px;
  font-weight: 700;
  color: #1f2d45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.rankVal {
  display: none !important;
}

.rankEmpty {
  padding: 16px 10px;
  text-align: center;
  font-size: 13px;
  color: #667a9d;
}

.profileBtn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50% !important;
  background: #2563eb;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.profileBtn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.profileBtn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
}

.profileBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 21px;
  transform: translateX(-50%);
  width: 20px;
  height: 12px;
  border-radius: 10px 10px 0 0;
  background: #ffffff;
}

@keyframes profileDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   USER PROFILE DROPDOWN POPOVER MENU
============================================================ */
.userProfileDropdown {
  position: absolute;
  right: 0;
  top: 42px;
  width: 320px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  z-index: 1200;
  overflow: hidden;
  transform-origin: top right;
  animation: profileDropdownFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.userProfileDropdown.hidden {
  display: none;
}

.profileDropdownHeader {
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.profileUserAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.profileUserAvatar.admin {
  background: #fdf4ff;
  border-color: #f0abfc;
}

.profileUserAvatar.merchant {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.profileUserInfo {
  flex: 1;
  min-width: 0;
}

.profileUserNick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.profileUserNick strong {
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.profileRoleBadge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
  flex-shrink: 0;
}

.profileRoleBadge.admin {
  background: #fdf4ff;
  color: #c026d3;
  border-color: #f0abfc;
}

.profileRoleBadge.merchant {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.profileUserEmail {
  font-size: 11.5px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.profileDropdownDivider {
  height: 1px;
  background: #f1f5f9;
  margin: 0;
}

.profileDropdownSection {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profileDropdownItem {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
  font-family: inherit;
}

.profileDropdownItem:hover {
  background: #f8fafc;
  transform: translateX(2px);
}

.profileDropdownItem .pItemIcon {
  font-size: 17px;
  line-height: 1;
}

.profileDropdownItem .pItemText {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.profileDropdownItem .pItemText strong {
  font-size: 13px;
  color: #1e293b;
  font-weight: 700;
}

.profileDropdownItem .pItemText small {
  font-size: 11px;
  color: #64748b;
}

.profileDropdownItem .pItemArrow {
  font-size: 16px;
  color: #94a3b8;
  font-weight: 600;
}

.profileDropdownFooter {
  padding: 6px;
  background: #fafafa;
}

.profileLogoutBtn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ef4444;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
}

.profileLogoutBtn:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Favorites Sub-panel Back & Close Buttons */
.favBackBtn,
.favCloseBtn {
  border: 0;
  background: #e2e8f0;
  color: #475569;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: all 0.12s ease;
}

.favBackBtn:hover,
.favCloseBtn:hover {
  background: #cbd5e1;
  color: #0f172a;
}

.favoritesPanel {
  position: absolute;
  right: 0;
  top: 42px;
  width: 320px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid #d7deed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  z-index: 1200;
  transform-origin: top right;
  animation: profileDropdownFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.favoritesPanel.hidden {
  display: none;
}

.favoritesHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 800;
  color: #1f2d45;
  border-bottom: 1px solid #e5ebf6;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.favoritesList {
  padding: 8px;
}

.favoriteItem {
  width: 100%;
  text-align: left;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: block;
}

.favoriteItem:hover {
  border-color: #3b82f6;
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.favoriteItem .name {
  font-size: 14px;
  font-weight: 800;
  color: #18305f;
}

.favoriteItem .meta {
  margin-top: 4px;
  font-size: 12px;
  color: #5f7397;
}

.favoriteEmpty {
  padding: 16px 10px;
  font-size: 13px;
  color: #667a9d;
  text-align: center;
}

/* ============================================================
   EDIT PROFILE MODAL STYLES
============================================================ */
.editProfileSummaryCard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.summaryCardRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summaryLabel {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.summaryValue {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.editProfileDivider {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 0;
}

.authCancelBtn {
  flex: 1;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.authCancelBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.legendBar {
  position: fixed;
  top: 56px;
  left: var(--top-panel-left);
  right: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 36px 10px 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dce5f3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  width: min(max-content, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  overflow: hidden;
}

.legendTabRow {
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  z-index: 1;
}

.legendTabBtn {
  border: 1px solid #d4deef;
  background: #fff;
  color: #41547a;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.legendTabBtn.active {
  background: #2f6ff2;
  border-color: #2f6ff2;
  color: #fff;
}

.legendRegionWrap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legendRegionLabel {
  font-size: 11px;
  font-weight: 700;
  color: #4a5f87;
  white-space: nowrap;
}

.legendRegionSelect {
  border: 1px solid #ced9ee;
  background: #fff;
  color: #2a3e64;
  border-radius: 10px;
  padding: 3px 8px;
  height: 28px;
  font-size: 12px;
  min-width: 126px;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.hiddenLegend {
  display: none !important;
}

.categoryLegend,
.audienceLegend {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  overflow-x: auto;
  padding: 8px 0 0;
  border-top: 1px solid #ecf1f8;
  width: 100%;
}

.legendItem {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 46px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  min-height: 46px;
  justify-content: center;
  line-height: 1;
}

.audienceLegend .legendItem {
  min-width: 46px;
}

.legendDot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.legendDot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--dot-color, #6b7280);
}

.legendDot.hasImage::after {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: transparent;
  background-image: var(--dot-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.detailPanel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1300;
  width: min(560px, calc(100vw - 24px));
  border: 1px solid #e5e9f2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  padding: 16px 18px 14px;
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: -0.01em;
}

.detailPanel.detailPanelInWindow {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.detailPanel.detailPanelInWindow::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.detailPanel.hidden {
  display: none;
}

.detailPanel::before,
.detailPanel::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
}

.detailPanel::before {
  bottom: -14px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 14px solid #e5e9f2;
}

.detailPanel::after {
  bottom: -12px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 12px solid rgba(255, 255, 255, 0.98);
}

.detailTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.detailTitleRow {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
}

.detailTitle {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.04;
  color: #15294b;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detailCategory {
  font-size: 0.72em;
  font-weight: 700;
  color: #4f648a;
  margin-left: 6px;
}

.detailSubTitle {
  margin-top: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6c7f9f;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detailCloseBtn {
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #edf2f9;
  color: #5f7394;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
  box-sizing: border-box !important;
  flex-shrink: 0;
  transition: background-color 140ms ease, color 140ms ease;
}

.detailCloseBtn:hover {
  background: #e3ebf7;
  color: #48628e;
}

.detailMeta {
  margin-top: -2px;
  display: grid;
  gap: 3px;
  font-size: 14px;
  color: #243b60;
  font-weight: 500;
  word-break: keep-all;
  line-height: 1.26;
}

.detailMeta a {
  color: #243b60;
  font-weight: 500;
  text-decoration: none;
}

.detailFavRow {
  margin-top: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.detailFavSpacer {
  flex: 1 1 auto;
}

.detailEngagementBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  user-select: none;
}

.detailEngagementBtn:hover {
  transform: none !important;
  border-color: #94a3b8;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.detailEngagementBtn:active {
  transform: none !important;
}

.detailEngagementBtn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
  transition: all 0.16s ease;
}

.detailEngagementBtn.like.active {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #e11d48 !important;
}

.detailEngagementBtn.like.active svg {
  fill: #e11d48 !important;
  stroke: #e11d48 !important;
  transform: scale(1.12);
}

.detailEngagementBtn.like.active .engBtnCount {
  background: #ffe4e6 !important;
  color: #be123c !important;
}

.detailEngagementBtn.fav.active {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #d97706 !important;
}

.detailEngagementBtn.fav.active svg {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
  transform: scale(1.12);
}

.detailEngagementBtn.fav.active .engBtnCount {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

.engBtnLabel {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.engBtnCount {
  font-size: 11px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  line-height: 1;
  transition: all 0.16s ease;
}

.detailEngagementBtn.route {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.detailEngagementBtn.route:hover {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.detailEngagementBtn.route svg {
  stroke: #16a34a;
  stroke-width: 2.2;
}

.detailEngagementBtn.route.active {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.detailEngagementBtn.route.active svg {
  stroke: #ffffff !important;
}

.routeGuideCard {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10005;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
  border: 1.5px solid #e2e8f0;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  animation: routeSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes routeSlideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -15px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.routeGuideMain {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.routeGuideSummary {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.routeGuideDuration {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.routeGuideDistance {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 7px;
  border-radius: 6px;
}

.routeGuideLocations {
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.routeGuideActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.routeGuideNaverBtn {
  background: #03c75a;
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease;
  white-space: nowrap;
}

.routeGuideNaverBtn:hover {
  background: #02b150;
}

.routeGuideCloseBtn {
  background: #f1f5f9;
  color: #64748b;
  border: none;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.routeGuideCloseBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

@media (max-width: 600px) {
  .routeGuideCard {
    top: 50px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  .routeGuideMain {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .routeGuideSummary {
    gap: 6px !important;
  }

  .routeGuideDuration {
    font-size: 15px !important;
  }

  .routeGuideDistance {
    font-size: 11.5px !important;
    padding: 1px 5px !important;
  }

  .routeGuideTag {
    display: none !important;
  }

  .routeGuideLocations {
    font-size: 10.5px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .routeGuideActions {
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .routeGuideNaverBtn {
    padding: 6px 9px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
    gap: 3px !important;
  }

  .routeGuideCloseBtn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
}

.detailIconBtn {
  width: 34px;
  height: 34px;
  border: 1px solid #d9e2f2;
  border-radius: 999px;
  background: #fff;
  color: #8394b2;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  line-height: 1;
  padding: 0;
}

.detailIconBtn .iconGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  transform: none;
}

.detailIconBtn.fav .iconGlyph {
  transform: translateY(-1px);
}

.detailIconBtn:hover {
  border-color: #c6d5ee;
  background: #f2f7ff;
}

.detailIconBtn.like.active {
  border-color: #f3c5d4;
  background: #fff1f6;
  color: #ef476f;
}

.detailIconBtn.fav.active {
  border-color: #c8dbff;
  background: #edf4ff;
  color: #3b82f6;
}

.detailBookBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #ff3b30;
  border-radius: 999px;
  background: #ff3b30;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.detailBookBtn:hover {
  background: #e2342a;
  border-color: #e2342a;
}

.detailFavBtn {
  border: 1px solid #d9e2f2;
  border-radius: 999px;
  background: #f9fbff;
  color: #4e6389;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 14px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.detailFavBtn:hover {
  border-color: #c8d5eb;
  background: #f2f7ff;
}

.detailFavBtn.active {
  border-color: #f0c7d7;
  background: #fff2f7;
  color: #d6336c;
}

.detailRateText {
  font-size: 13px;
  color: #61779b;
  font-weight: 600;
}

.detailRateRow {
  margin-top: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.detailRateRow span {
  font-size: 13px;
  color: #647a9f;
  font-weight: 500;
}

.rateBtn {
  border: 1px solid #d9e2f2;
  border-radius: 10px;
  background: #fbfdff;
  color: #3f5782;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 100ms ease;
}

.rateBtn:hover {
  border-color: #c6d5ee;
  background: #f2f7ff;
}

.rateBtn:active {
  transform: translateY(1px);
}

.detailDivider {
  margin-top: 10px;
  height: 1px;
  background: #cbd5e1;
}

.detailInfoTable {
  width: 100%;
  margin-top: 4px;
  border-collapse: separate;
  border-spacing: 0 3px;
  table-layout: fixed;
  font-size: 14px;
  color: #2b3f63;
  line-height: 1.26;
  font-weight: 400;
}

.detailInfoTable td {
  padding: 0;
  vertical-align: top;
}

.detailLabelCell {
  width: 44px;
  color: #5f7498;
  font-weight: 700;
}

.detailValueCell {
  min-width: 0;
  padding-bottom: 0;
}

.benefitText {
  display: block;
  color: #1d4ed8;
  /* Break lines at word boundaries (Korean default breaks mid-word and looks awkward) */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  line-height: 1.4;
}

.detailAudienceList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
}

.audienceChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.audienceChip img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .detailPanel {
    width: min(390px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    padding: 16px 16px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22) !important;
  }

  .detailPanel::before {
    bottom: -12px;
    border-left-width: 11px;
    border-right-width: 11px;
    border-top-width: 12px;
  }

  .detailPanel::after {
    bottom: -10px;
    border-left-width: 9px;
    border-right-width: 9px;
    border-top-width: 10px;
  }

  .detailTitle {
    font-size: 19px;
  }

  .detailSubTitle {
    font-size: 12px;
  }

  .detailMeta {
    font-size: 13px;
  }

  .detailFavBtn,
  .detailRateText,
  .detailRateRow span,
  .rateBtn,
  .detailSection {
    font-size: 13px;
  }
}

.legendLabel {
  display: block;
  margin-top: 1px;
  min-height: 12px;
  font-size: 11px;
  font-weight: 400;
  color: #374151;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.audienceLegend .legendLabel {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  min-height: 12px;
}

.mapTools {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.toolBtn {
  border: 1px solid #cfd8ea;
  background: #fff;
  color: #1f2d45;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-family: inherit;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

.toolBtn.locate {
  width: 48px;
  height: 48px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.toolBtn.zoom {
  border-radius: 16px;
  font-size: 0;
  line-height: 1;
  font-weight: 400;
  padding: 0;
  position: relative;
}

#btnZoomOut::before,
#btnZoomIn::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 32px;
  font-weight: 500;
  color: #1f2d45;
  transform: translateY(-2px);
  pointer-events: none;
}

#btnZoomOut::before {
  content: "-";
}

#btnZoomIn::before {
  content: "+";
}

.toolBtn.level {
  border-radius: 16px;
  width: 48px;
  height: 48px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.legendItem.active .legendDot {
  border-color: #111827;
  border-width: 2px;
  box-shadow: none;
}

.legendItem.all .legendDot::after {
  width: 14px;
  height: 14px;
  background: conic-gradient(#2f6ff2, #ef6c00, #8e24aa, #2fa66a, #2f6ff2);
}

.newStorePanel {
  position: fixed;
  top: 56px;
  right: 12px;
  z-index: 1085;
  width: 302px;
  height: 100px;
  border: 1px solid #d7deed;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.newStoreHead {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 10px;
  background: #ffffff;
  color: #1f2d45;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid #e8eef8;
}

.newStoreHead strong {
  font-size: 13px;
}

.newStoreRollWrap {
  position: relative;
  height: calc(100% - 34px);
  overflow: hidden;
}

.newStoreRollTrack {
  transform: translateY(0);
}

.newStoreRollItem {
  width: 100%;
  height: 32px;
  border: 0;
  border-top: 1px solid #edf1f8;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  cursor: pointer;
}

.newStoreRollItemName {
  min-width: 0;
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: #1f2d45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.newStoreRollItemMeta {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 400;
  color: #4b628a;
  white-space: nowrap;
}

@media (max-width: 980px) {
  :root {
    --top-panel-left: 12px;
    --top-panel-width: calc(100vw - 24px);
    --rank-left: 12px;
  }

  .profileMenuWrap {
    top: 8px;
    right: 8px;
    gap: 6px;
  }

  .sourceStatsBox {
    width: calc(100vw - 66px);
    max-width: calc(100vw - 66px);
  }

  .rankPanel {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: var(--rank-left);
    right: auto;
    width: var(--top-panel-width);
    max-width: var(--top-panel-width);
  }

  .newStorePanel {
    display: none;
  }

  .brandLogo img {
    width: min(300px, 58vw);
    height: auto;
  }

  .hubNav,
  .hubMega {
    display: none !important;
  }

  .hubPrimaryBtn {
    height: 48px;
    font-size: 12px;
    font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    padding: 0;
  }

  .hubPrimaryBtn.active::after {
    bottom: 6px;
  }

  .hubMega {
    top: 108px;
    padding: 12px 10px 14px;
  }

  .hubMegaGrid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px 18px;
    padding-left: 0;
    padding-right: 0;
  }

  .hubMegaTitle {
    font-size: 13px;
    font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    padding-bottom: 5px;
  }

  .hubSecondaryBtn {
    font-size: 12px;
    min-height: 24px;
  }

  .hubPanel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    min-height: auto;
    border-radius: 16px;
    padding: 14px 12px;
  }

  .hubPanelTitle {
    font-size: 14px;
  }

  .hubPanelNotice {
    font-size: 12px;
    line-height: 1.42;
  }

  .hubInfoSection h4 {
    font-size: 13px;
  }

  .hubInfoSection p,
  .hubSourceList a {
    font-size: 12px;
  }

  .legendBar {
    top: 112px;
    width: var(--top-panel-width);
  }

  .legendRegionLabel {
    display: none;
  }

  .legendRegionSelect {
    min-width: 96px;
    height: 26px;
    font-size: 11px;
    padding: 2px 6px;
  }
}

@media (max-width: 560px) {
  .hubNav {
    gap: 10px;
    padding: 0 4px;
  }

  .hubPrimaryBtn {
    font-size: 11px;
  }

  .legendBar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .mapTools {
    right: 8px;
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: none;
    gap: 6px;
  }

  .toolBtn,
  .toolBtn.locate,
  .toolBtn.level {
    width: 44px;
    height: 44px;
  }

  .toolBtn.locate,
  .toolBtn.level {
    font-size: 9px;
  }
}

@media (max-width: 430px) {
  :root {
    --top-panel-left: 8px;
    --top-panel-width: calc(100vw - 16px);
    --rank-left: 8px;
  }

  .brandLogo {
    top: -22px;
    left: -8px;
  }

  .brandLogo img {
    width: min(170px, 44vw);
  }

  .profileMenuWrap {
    top: 6px;
    right: 6px;
    gap: 4px;
  }

  .sourceStatsBox {
    height: 40px;
    width: calc(100vw - 58px);
    max-width: calc(100vw - 58px);
    padding: 0 8px;
    gap: 8px;
    border-radius: 7px;
  }

  .sourceStatsTitle {
    font-size: 11px;
  }

  .sourceStatsLine {
    font-size: 12px;
  }

  .profileBtn {
    width: 40px;
    height: 40px;
    border-radius: 7px;
  }

  .profileBtn::before {
    left: 11px;
    top: 7px;
    width: 17px;
    height: 17px;
  }

  .profileBtn::after {
    left: 9px;
    top: 22px;
    width: 22px;
    height: 11px;
  }

  .hubNav {
    top: 52px;
    height: 44px;
    gap: 8px;
    padding: 0 3px;
  }

  .hubPrimaryBtn {
    height: 44px;
    font-size: 10px;
  }

  .hubMega {
    top: 100px;
  }

  .legendBar {
    top: 102px;
    padding: 34px 8px 7px;
    border-radius: 12px;
  }

  .legendTabRow {
    left: 8px;
    right: 8px;
    top: 4px;
    gap: 4px;
  }

  .legendTabBtn {
    padding: 3px 8px;
    font-size: 11px;
  }

  .legendRegionSelect {
    min-width: 90px;
    height: 24px;
    font-size: 10px;
  }

  .legendItem {
    min-width: 42px;
    min-height: 42px;
  }

  .audienceLegend .legendItem {
    min-width: 42px;
  }

  .legendDot {
    width: 24px;
    height: 24px;
  }

  .legendLabel,
  .audienceLegend .legendLabel {
    font-size: 10px;
  }

  .rankPanel {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 9px;
  }
}

@media (max-width: 390px) {
  .brandLogo img {
    width: min(152px, 42vw);
  }

  .sourceStatsBox {
    width: calc(100vw - 54px);
    max-width: calc(100vw - 54px);
    height: 38px;
  }

  .sourceStatsTitle {
    font-size: 10px;
  }

  .sourceStatsLine {
    font-size: 11px;
  }

  .hubNav {
    gap: 6px;
  }

  .hubPrimaryBtn {
    font-size: 9px;
  }

  .legendBar {
    top: 100px;
  }

  .legendItem,
  .audienceLegend .legendItem {
    min-width: 40px;
  }

  .mapTools {
    right: 6px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .toolBtn,
  .toolBtn.locate,
  .toolBtn.level {
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   나라사랑가게 맞춤 홍보물 인쇄 모달 & 3종 템플릿 스타일
   ========================================================================== */

.detailPrintBtn,
#detailPrintBtn {
  display: none !important;
}

.printModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.printModalBackdrop.hidden {
  display: none !important;
}

.printModal {
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: #ffffff;
  border-radius: 18px;
  width: 900px;
  max-width: 95vw;
  height: 88vh;
  min-height: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.printModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.printModalTitleWrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.printBadge {
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 6px;
  align-self: flex-start;
}

.printModalTitle {
  margin: 0;
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.printModalCloseBtn {
  background: transparent;
  border: 0;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.printModalCloseBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.printTemplateTabs {
  display: flex;
  background: #f1f5f9;
  padding: 0;
  border-bottom: 2px solid #e2e8f0;
}

.printTabBtn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.2px;
}

.printTabBtn .tabText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.printTabBtn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.printTabBtn.active {
  background: #ffffff;
  color: #1e3a8a;
  border-bottom: 3px solid #1e3a8a;
  box-shadow: none;
}

.printPreviewArea {
  flex: 1;
  overflow: hidden;
  padding: 16px;
  background: #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}

.printTemplateContainer {
  background: transparent;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.printSizeBar {
  padding: 8px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.printModalFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.printHint {
  font-size: 12px;
  color: #64748b;
}

.printActions {
  display: flex;
  gap: 10px;
}

.printBtnSecondary {
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  padding: 8px 18px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}

.printBtnSecondary:hover {
  background: #f1f5f9;
}

.printBtnPrimary {
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  padding: 8px 24px;
  background: #1e3a8a;
  border: 1px solid #172554;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(30, 58, 138, 0.3);
}

.printBtnPrimary:hover {
  background: #172554;
}

/* --------------------------------------------------------------------------
   템플릿 1: A4 포스터 (나라사랑가게 상생 지도 정규 템플릿)
   -------------------------------------------------------------------------- */
.tpl-poster {
  width: 595px;
  min-height: 842px;
  background: #fbfaf8;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 24px 22px;
  box-sizing: border-box;
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: #111827;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tpl-poster-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 12px;
}

.tpl-poster-logo-wrap {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 3px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.tpl-poster-logo-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(#c60c30 0deg 180deg, #003478 180deg 360deg);
  display: inline-block;
}

.tpl-poster-logo-text {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.tpl-poster-main-title {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.03em;
  margin: 0;
}

.tpl-store-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.tpl-store-card-title {
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.tpl-store-card-desc {
  font-size: 11px;
  color: #4b5563;
  line-height: 1.5;
  word-break: keep-all;
  margin-bottom: 4px;
}

.tpl-store-card-audience {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}

.tpl-map-frame {
  position: relative;
  width: 100%;
  height: 270px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #e5e7eb;
}

#posterMapDiv {
  width: 100%;
  height: 100%;
}

.tpl-table-section {
  margin-bottom: 10px;
}

.tpl-table-title {
  font-size: 15px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.tpl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.tpl-table th {
  background: #eae6df;
  color: #1f2937;
  font-weight: 800;
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid #d1d5db;
}

.tpl-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  background: #ffffff;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-table tr:nth-child(even) td {
  background: #faf9f7;
}

.tpl-row-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #64748b;
  color: #ffffff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  margin-right: 6px;
  flex-shrink: 0;
}

.tpl-bottom-qr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
}

.tpl-bottom-qr-text {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.tpl-bottom-qr-subtext {
  font-size: 11px;
  color: #6b7280;
  margin-top: 3px;
}

.tpl-bottom-qr-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px;
  background: #ffffff;
}

.tpl-foot-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   템플릿 2: 미니 테이블 스탠드형
   -------------------------------------------------------------------------- */
.tpl-stand {
  width: 380px;
  min-height: 520px;
  background: #F3F3ED;
  border: 2px solid #1e3a8a;
  border-radius: 6px;
  padding: 22px;
  box-sizing: border-box;
  text-align: center;
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tpl-stand-fold-guide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  border-bottom: 1px dashed #cbd5e1;
  font-size: 9px;
  color: #94a3b8;
  line-height: 14px;
}

.tpl-stand-header {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tpl-stand-title {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  margin: 12px 0 6px 0;
}

.tpl-stand-benefit-badge {
  background: #1e3a8a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
}

.tpl-stand-qr-box {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px;
  background: #ffffff;
}

.tpl-stand-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tpl-stand-scan-text {
  font-size: 13px;
  font-weight: 800;
  color: #1e3a8a;
  margin-top: 10px;
}

.tpl-stand-footer {
  font-size: 10px;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   템플릿 3: 도어행거 / 문고리형
   -------------------------------------------------------------------------- */
.tpl-hanger {
  width: 320px;
  min-height: 580px;
  background: #F3F3ED;
  border: 2px solid #1e3a8a;
  border-radius: 20px 20px 6px 6px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tpl-hanger-hole {
  width: 76px;
  height: 76px;
  border: 2px dashed #94a3b8;
  border-radius: 50%;
  margin: 8px auto 12px auto;
  position: relative;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #64748b;
}

.tpl-hanger-hole::after {
  content: "";
  position: absolute;
  top: 38px;
  left: -20px;
  width: 20px;
  height: 2px;
  border-top: 2px dashed #94a3b8;
}

.tpl-hanger-welcome {
  font-size: 12px;
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 4px;
}

.tpl-hanger-store-name {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}

.tpl-hanger-benefit {
  background: #1e3a8a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.tpl-hanger-qr {
  width: 104px;
  height: 104px;
  margin: 0 auto;
  background: #ffffff;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.tpl-hanger-qr img {
  width: 100%;
  height: 100%;
}

.tpl-hanger-footer {
  font-size: 10px;
  color: #64748b;
  margin-top: 10px;
}


.tpl-foot-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   템플릿 2: 미니 테이블 스탠드형 (아크릴 스탠드용)
   -------------------------------------------------------------------------- */
.tpl-stand {
  width: 380px;
  min-height: 520px;
  background: #F3F3ED;
  border: 3px solid #cbd5e1;
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tpl-stand-fold-guide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  border-bottom: 1px dashed #94a3b8;
  font-size: 9px;
  color: #94a3b8;
  line-height: 14px;
}

.tpl-stand-header {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tpl-stand-title {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  margin: 10px 0 4px 0;
}

.tpl-stand-benefit-badge {
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
}

.tpl-stand-qr-box {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
  background: #ffffff;
}

.tpl-stand-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tpl-stand-scan-text {
  font-size: 12px;
  font-weight: 800;
  color: #1e3a8a;
  margin-top: 8px;
}

.tpl-stand-footer {
  font-size: 10px;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   템플릿 3: 도어행거 / 문고리형
   -------------------------------------------------------------------------- */
.tpl-hanger {
  width: 320px;
  min-height: 580px;
  background: #F3F3ED;
  border: 2px solid #94a3b8;
  border-radius: 24px 24px 12px 12px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tpl-hanger-hole {
  width: 80px;
  height: 80px;
  border: 2px dashed #64748b;
  border-radius: 50%;
  margin: 10px auto 14px auto;
  position: relative;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #64748b;
}

.tpl-hanger-hole::after {
  content: "";
  position: absolute;
  top: 40px;
  left: -20px;
  width: 20px;
  height: 2px;
  border-top: 2px dashed #64748b;
}

.tpl-hanger-welcome {
  font-size: 13px;
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 4px;
}

.tpl-hanger-store-name {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}

.tpl-hanger-benefit {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  padding: 6px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.tpl-hanger-qr {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: #ffffff;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.tpl-hanger-qr img {
  width: 100%;
  height: 100%;
}

.tpl-hanger-footer {
  font-size: 10px;
  color: #64748b;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   인쇄 전용 @media print 스타일
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #ffffff !important;
  }

  body > *:not(#printModalBackdrop) {
    display: none !important;
  }

  .printModalBackdrop {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
  }

  .printModal {
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  .printModalHeader,
  .printTemplateTabs,
  .printModalFooter {
    display: none !important;
  }

  .printPreviewArea {
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
  }

  .printTemplateContainer {
    box-shadow: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  .tpl-poster,
  .tpl-stand,
  .tpl-hanger {
    box-shadow: none !important;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .tpl-poster-img-only,
  .tpl-stand-img-only,
  .tpl-hanger-img-only {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    page-break-inside: avoid;
  }
  .tpl-poster-img-only img,
  .tpl-stand-img-only img,
  .tpl-hanger-img-only img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
}


/* Sidebar and Grid Overrides for Collapsible Sidebar */
.legendBar {
  position: fixed !important;
  top: 50px !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  height: calc(100vh - 50px) !important;
  z-index: 1080 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 20px 16px !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  border-right: 1px solid #dce5f3 !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: 4px 0 12px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: visible !important;
}

.legendBar.collapsed {
  transform: translateX(-320px) !important;
}

.legendTabRow {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  z-index: 1 !important;
}

.legendTabBtn {
  flex: 1 1 calc(50% - 4px) !important;
  text-align: center !important;
  border-radius: 6px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.legendRegionWrap {
  margin-left: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 4px !important;
  gap: 8px !important;
}

.legendRegionLabel {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4a5f87 !important;
}

.legendRegionSelect {
  flex: 1 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Category grid rendering */
.categoryLegend,
.audienceLegend {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px 6px !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  padding: 16px 0 !important;
  border-top: 1px solid #ecf1f8 !important;
  width: 100% !important;
}

.legendItem {
  min-width: 0 !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Collapsible Toggle Button styles */
.sidebarToggleBtn {
  position: absolute !important;
  left: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 56px !important;
  background: #ffffff !important;
  border: 1px solid #dce5f3 !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 4px 0 8px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1001 !important;
  padding: 0 !important;
  color: #4a5f87 !important;
  font-size: 11px !important;
  transition: background-color 0.2s ease !important;
}

.sidebarToggleBtn:hover {
  background: #f8fafc !important;
  color: #2f6ff2 !important;
}


/* Sidebar Search Box styles */
.sidebarSearchWrap {
  width: 100% !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 8px !important;
}

#sidebarSearchInput {
  width: 100% !important;
  height: 36px !important;
  border: 1px solid #ced9ee !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  color: #1a2438 !important;
  background: #fbfdff !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

#sidebarSearchInput:focus {
  border-color: #2f6ff2 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 242, 0.1) !important;
}

/* Move newStorePanel to the bottom of the sidebar */
.legendBar #newStorePanel {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  margin-top: auto !important;
  border: 1px solid #dce5f3 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: auto !important;
}


/* Collapsible Sidebar Title & Grid Refinements */
.sidebarSectionTitle {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  padding: 12px 0 4px 0 !important;
  border-bottom: 2px solid #f1f5f9 !important;
  margin-top: 8px !important;
  letter-spacing: -0.02em !important;
}

.categoryLegend,
.audienceLegend {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px 4px !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding: 10px 0 !important;
  border-top: none !important;
}

.sidebarToggleBtn {
  left: 318px !important;
  top: calc(50% - 28px) !important;
  transform: none !important;
}

.legendBar {
  overflow-y: auto !important;
}


/* Toggle Button Fixed Layout and Transition synchronization */
.sidebarToggleBtn {
  position: fixed !important;
  left: 320px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 56px !important;
  background: #ffffff !important;
  border: 1px solid #dce5f3 !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 4px 0 8px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1090 !important;
  padding: 0 !important;
  color: #4a5f87 !important;
  font-size: 11px !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease !important;
}

.sidebarToggleBtn.collapsed {
  left: 0px !important;
}


/* Prevent toggle button from jumping vertically when clicked (:active state) due to global button:active rules */
.sidebarToggleBtn:active {
  transform: translateY(-50%) !important;
}


/* Align Brand Logo with top: 8px header controls */
.brandLogo {
  top: 8px !important;
  left: 12px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.brandLogo img {
  height: 38px !important;
  margin: 0 !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

/* Tighter row gap for categories/audience lists */
.categoryLegend,
.audienceLegend {
  gap: 6px 2px !important;
  padding: 6px 0 !important;
}

/* Enlarge circular icons and inner images */
.legendDot {
  width: 32px !important;
  height: 32px !important;
}

.legendDot.hasImage::after {
  width: 22px !important;
  height: 22px !important;
}

.legendDot::after {
  width: 14px !important;
  height: 14px !important;
}


/* Align Brand Logo left start to 16px to match search box */
.brandLogo {
  left: 16px !important;
}

/* Tighten sidebar spacing to shrink white space gaps */
.legendBar {
  gap: 6px !important;
  padding: 12px 16px !important;
}

.sidebarSearchWrap {
  margin-bottom: 2px !important;
}

.legendRegionWrap {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}

.sidebarSectionTitle {
  margin-top: 4px !important;
  padding: 4px 0 2px 0 !important;
}

.categoryLegend,
.audienceLegend {
  gap: 4px 2px !important;
  padding: 4px 0 !important;
}

.legendItem {
  min-height: 38px !important;
}

/* Maximize inner icon size inside circles (almost full fit) */
.legendDot.hasImage::after {
  width: 26px !important;
  height: 26px !important;
}


/* Position the Navigation bar dynamically starting after the sidebar */
.hubNav {
  left: 336px !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebarToggleBtn.collapsed ~ .hubNav {
  left: 190px !important;
}

/* Reduce the size of the real-time ranking window by half */
.rankPanel {
  width: 220px !important;
  max-width: 220px !important;
}

/* Data status box in the sidebar */
.legendBar #sourceStatsBox {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 36px !important;
  margin-top: auto !important;
  border: 1px solid #dce5f3 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
}

.legendBar #sourceStatsBox .sourceStatsTitle {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #4a5f87 !important;
}

.legendBar #sourceStatsBox .sourceStatsTicker {
  font-size: 11px !important;
}

/* Force New Store Panel to have exactly 132px height to show 3 items at a time */
.legendBar #newStorePanel {
  position: relative !important;
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
}


/* Keep rankPanel embedded inside headerRightControls cleanly */

/* Swap bottom stack margin-top: auto to newStorePanel */
.legendBar #newStorePanel {
  margin-top: auto !important;
}

.legendBar #sourceStatsBox {
  margin-top: 4px !important;
}

/* Ensure data stats text/counts are fully visible inside sidebar style (dark slate & blue) */
.legendBar #sourceStatsBox .sourceStatsLine {
  color: #475569 !important;
}

.legendBar #sourceStatsBox .sourceStatsLine strong {
  color: #2f6ff2 !important;
}


/* Resize detail popup card (narrower & taller) */
.detailPanel {
  width: min(440px, calc(100vw - 24px)) !important;
  min-height: 220px !important;
  padding: 24px 20px 20px !important;
}

/* Style print button with solid color and no icon margin */
.detailPrintBtn {
  background: #2563eb !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
  padding: 6px 14px !important;
  gap: 0 !important;
}

.detailPrintBtn:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}


/* Synchronize sub-menu columns padding-left with the navigation menu position */
.hubMegaGrid {
  padding-left: 336px !important;
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebarToggleBtn.collapsed ~ .hubMega .hubMegaGrid {
  padding-left: 190px !important;
}


/* Circular Loading Spinner Keyframe Animation */
@keyframes printSpinnerSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Custom Vector SVG Icons style improvements */
.detailIconBtn svg {
  display: block;
  width: 16px;
  height: 16px;
  transition: fill 0.2s, stroke 0.2s;
}

.detailIconBtn.like svg {
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.detailIconBtn.like.active svg {
  fill: #ef4444;
  stroke: #ef4444;
}

.detailIconBtn.fav svg {
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.detailIconBtn.fav.active svg {
  fill: #f59e0b;
  stroke: #f59e0b;
}

/* Close Button SVG Styling */
.detailCloseBtn svg {
  display: block !important;
  margin: 0 !important;
  stroke: #64748b;
  transition: stroke 0.2s;
}

.detailCloseBtn:hover svg {
  stroke: #1e293b;
}

.sidebarToggleBtn span svg {
  display: block;
  stroke: currentColor;
}


/* Enhance loading spinner to align with map double-ring high-tech design */
.print-loading-spinner {
  width: 48px !important;
  height: 48px !important;
  border: 3px solid rgba(47, 111, 242, 0.1) !important;
  border-radius: 50% !important;
  border-top-color: #2f6ff2 !important;
  border-bottom-color: #2f6ff2 !important;
  animation: printSpinnerSpin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}

/* Force print preview area to hide scrollbars and center the template card */
.printPreviewArea {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 16px !important;
  background: #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}


/* Style primary print button inside header */
.printModalHeader .printBtnPrimary {
  padding: 6px 16px !important;
  background: #2f6ff2 !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 4px rgba(47, 111, 242, 0.2) !important;
  transition: background 0.2s, transform 0.1s;
}

.printModalHeader .printBtnPrimary:hover {
  background: #1d4ed8 !important;
}

.printModalHeader .printBtnPrimary:active {
  transform: translateY(1px);
}


/* Remove translation shift from print button hover state */
.detailPrintBtn:hover {
  transform: none !important;
}

.versionBadge {
  position: fixed;
  right: 85px;
  bottom: 4px;
  z-index: 10000;
  font-size: 11px;
  font-family: monospace;
  color: #64748b;
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #cbd5e1;
  pointer-events: none;
  font-weight: bold;
}

/* Hide mobile bottom sheet drag handle on desktop */
.mobileSheetHandle {
  display: none !important;
}

/* ============================================================
   RESPONSIVE MOBILE VIEWPORT & BOTTOM SHEET (< 768px)
============================================================ */
@media (max-width: 768px) {
  /* 1. Header & Controls: Precise Y-Alignment & Centered Person Icon */
  .brandLogo {
    top: 8px !important;
    left: 8px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    z-index: 1200 !important;
  }
  .brandLogo img {
    height: 28px !important;
    width: auto !important;
    margin: 0 !important;
    display: block !important;
  }
  .headerRightControls {
    top: 8px !important;
    right: 8px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 1200 !important;
  }
  .headerRightControls .rankPanel {
    display: none !important; /* Hide long rank ticker to prevent overlap */
  }
  /* Hide Top Hub Menu Navigation on Mobile */
  .hubNav,
  .hubMega {
    display: none !important;
  }
  .authNavBtn {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
  .authNavBtn.admin {
    padding: 0 6px !important;
    font-size: 11px !important;
  }
  .profileBtn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .profileBtn::before {
    left: 50% !important;
    top: 6px !important;
    transform: translateX(-50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
  }
  .profileBtn::after {
    left: 50% !important;
    top: 18px !important;
    transform: translateX(-50%) !important;
    width: 18px !important;
    height: 10px !important;
    border-radius: 9px 9px 0 0 !important;
    background: #ffffff !important;
  }

  /* 2. Hide Desktop Toggle Button on Mobile */
  .sidebarToggleBtn {
    display: none !important;
  }

  /* 3. Mobile Bottom Sheet Mode for .legendBar (Slides Up/Down from Bottom) */
  .legendBar {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -10px 36px rgba(15, 23, 42, 0.22) !important;
    border: 1px solid #dce5f3 !important;
    border-bottom: 0 !important;
    background: #ffffff !important;
    z-index: 10050 !important;
    padding: 8px 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    transform: translateY(calc(100% - 48px)) !important; /* Default: Collapsed down */
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .legendBar.mobile-expanded {
    transform: translateY(0) !important;
  }

  .legendBar.mobile-collapsed {
    transform: translateY(calc(100% - 48px)) !important;
  }

  /* Mobile Sheet Drag Handle */
  .mobileSheetHandle {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 4px 0 8px;
    width: 100%;
    user-select: none;
    touch-action: pan-y;
  }

  .mobileSheetBar {
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: #cbd5e1;
    margin-bottom: 6px;
  }

  .mobileSheetTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    padding: 0 4px;
  }

  .mobileSheetChevron {
    font-size: 12px;
    font-weight: 900;
    color: #2563eb;
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.25s ease;
  }

  .legendBar.mobile-expanded .mobileSheetChevron {
    transform: rotate(180deg);
  }

  /* Hide extra panels in mobile sheet: keep ONLY 1. Search/Region, 2. Store Categories, 3. Audience Categories */
  .legendBar #newStorePanel,
  .legendBar .newStorePanel,
  #newStorePanel,
  .newStorePanel,
  .legendBar #sourceStatsBox,
  .legendBar .sourceStatsBox,
  #sourceStatsBox,
  .sourceStatsBox {
    display: none !important;
  }

  /* 4. Intro Modal on Mobile */
  .introPopup {
    width: min(92vw, 390px) !important;
    max-height: min(74vh, 480px) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28) !important;
  }
  .introPopupHead {
    padding: 9px 14px 7px !important;
  }
  .introPopupHead h2 {
    font-size: 15px !important;
  }
  .introCloseBtn {
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
  }
  .introPopupBody {
    padding: 8px 12px !important;
    gap: 7px !important;
    grid-template-columns: 1fr !important;
  }
  .introRoleCard {
    padding: 7px 10px !important;
    border-radius: 10px !important;
  }
  .introRoleBanner {
    padding: 4px 8px !important;
    gap: 6px !important;
    margin-bottom: 5px !important;
    border-radius: 8px !important;
  }
  .roleBannerIcon {
    font-size: 16px !important;
  }
  .roleBannerTitle {
    font-size: 12.5px !important;
  }
  .roleBannerSub {
    display: none !important;
  }
  .introRoleList {
    font-size: 11px !important;
    gap: 3px !important;
    padding-left: 12px !important;
    line-height: 1.35 !important;
  }
  .introRoleList li {
    margin-bottom: 1px !important;
  }
  .introPopupFoot {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .introNeverLabel {
    font-size: 11px !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }
  .introConfirmBtn {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  /* 5. Auth Modal on Mobile */
  .authModal {
    width: min(92vw, 390px) !important;
    max-height: min(84vh, 580px) !important;
    border-radius: 16px !important;
  }
  .authModalHead {
    padding: 10px 14px !important;
  }
  .authModalBody {
    padding: 10px 14px !important;
  }

  /* 6. Hide Promotional Print Features on Mobile */
  .detailPrintBtn,
  #detailPrintBtn,
  .hubSecondaryBtn[data-key="store_poster_guide"],
  .merchantPrintAction,
  #printTemplateModal,
  .printModalContainer {
    display: none !important;
  }

  /* 7. Map Tools Position - On mobile, show ONLY '내위치' button */
  .mapTools {
    right: 12px !important;
    bottom: 60px !important;
    top: auto !important;
    transform: none !important;
    z-index: 50 !important;
  }

  .mapTools .toolBtn.zoom,
  .mapTools .toolBtn.level,
  #btnZoomOut,
  #btnZoomIn,
  #btnZoomLevel {
    display: none !important;
  }

  .mapTools .toolBtn.locate,
  #btnLocate {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #e2e8f0 !important;
  }

  /* 8. Simulator on Mobile - Attach to LEFT side to prevent overlapping with zoom controls */
  .accountSimulatorWidget {
    right: auto !important;
    left: 10px !important;
    bottom: 58px !important;
    width: 180px !important;
    max-width: calc(100vw - 90px) !important;
    z-index: 10015 !important;
  }
  .simRestoreBtn {
    right: auto !important;
    left: 12px !important;
    bottom: 58px !important;
    z-index: 10015 !important;
  }
  .simTitle {
    font-size: 10.5px !important;
  }
  .simBtn {
    padding: 5px 8px !important;
  }
  .simText strong {
    font-size: 11px !important;
  }
  .simText small {
    font-size: 9.5px !important;
  }

  /* 9. Mobile Detail Card: Hide '좋아요', '즐겨찾기' text, show only icons & counts */
  .detailEngagementBtn.like .engBtnLabel,
  .detailEngagementBtn.fav .engBtnLabel {
    display: none !important;
  }
  .detailEngagementBtn.like,
  .detailEngagementBtn.fav {
    padding: 6px 10px !important;
    gap: 4px !important;
  }

  /* 10. Mobile Detail Card: keep the card's V tail visible (no clipping) and
        scroll only the inner content area, so a tall decorated popup never runs
        off the top. PC is left uncapped so the whole content is shown at once. */
  .detailPanel.detailPanelInWindow {
    max-height: none !important;
    overflow: visible !important;
  }
  .detailPanel.detailPanelInWindow .detailPanelScrollArea {
    /* Keep the whole card (scroll area + card padding) around 42vh tall */
    max-height: calc(42vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .detailPanel.detailPanelInWindow .detailPanelScrollArea::-webkit-scrollbar {
    display: none;
  }
  /* Floating "scroll for more" hint overlaid at the bottom of the card (no layout impact) */
  .detailPanel.detailPanelInWindow .detailScrollHint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 18px 0 10px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 45%, rgba(255, 255, 255, 0));
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    pointer-events: none;
    z-index: 6;
  }
  .detailPanel.detailPanelInWindow .detailScrollHintPill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #1e3a8a);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
    animation: detailScrollHintFloat 1.5s ease-in-out infinite;
  }
  @keyframes detailScrollHintFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
  }
}

/* ============================================================
   ACCOUNT SIMULATOR WIDGET (Bottom Right)
============================================================ */
.accountSimulatorWidget {
  position: fixed;
  right: 14px;
  bottom: 40px;
  z-index: 10020;
  width: 215px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1.5px solid #dce5f3;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  font-family: "NanumSquare", "Nanum Gothic", "Noto Sans KR", sans-serif;
  overflow: hidden;
  transition: all 0.25s ease;
}

.simHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #ffffff;
  user-select: none;
}

.simTitle {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.simHeaderActions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.simToggleBtn {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.simToggleBtn:hover {
  opacity: 1;
  transform: scale(1.15);
}

.simCloseBtn {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.simCloseBtn:hover {
  opacity: 1;
  transform: scale(1.15);
  color: #fca5a5;
}

.accountSimulatorWidget.hidden {
  display: none !important;
}

.simRestoreBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e40af;
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.simRestoreBtn:hover {
  transform: scale(1.1);
  background: #2563eb;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
}

.simRestoreBtn.hidden {
  display: none !important;
}

.simBody {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.accountSimulatorWidget.collapsed .simBody {
  display: none;
}

.simBtn {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
}

.simBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.simBtn.soldier {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.simBtn.soldier:hover {
  background: #dbeafe;
}

.simBtn.merchant {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.simBtn.merchant:hover {
  background: #dcfce7;
}

.simBtn.admin {
  border-color: #f0abfc;
  background: #fdf4ff;
}

.simBtn.admin:hover {
  background: #fae8ff;
}

.simIcon {
  font-size: 18px;
  line-height: 1;
}

.simText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.simText strong {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}

.simText small {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media print {
  body * {
    visibility: hidden;
  }
  #printTemplateContainer,
  #printTemplateContainer * {
    visibility: visible;
  }
  #printTemplateContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .print-sheet {
    box-shadow: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 650px !important;
    page-break-inside: avoid;
  }
}

/* District & Regional Summary Cluster Badge (Zoom <= 11) */
.districtClusterBadge {
  background: #ffffff;
  border: 1.5px solid #2563eb;
  border-radius: 10px;
  padding: 5px 9px;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.2), 0 1px 4px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  white-space: nowrap;
  user-select: none;
}

.districtClusterBadge.provinceLevel {
  border: 2px solid #1d4ed8;
  padding: 6px 11px;
  border-radius: 11px;
  box-shadow: 0 4px 16px rgba(29, 78, 216, 0.28), 0 2px 6px rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.districtClusterBadge.provinceLevel .districtClusterName {
  font-size: 13px;
  font-weight: 800;
  color: #1e3a8a;
}

.districtClusterBadge.provinceLevel .districtClusterTotal {
  background: #1d4ed8;
  font-size: 11px;
  padding: 2px 6px;
}

.districtClusterBadge:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  border-color: #1d4ed8;
  z-index: 10000 !important;
}

.districtClusterHead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.districtClusterName {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
}

.districtClusterTotal {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: #2563eb;
  padding: 1px 6px;
  border-radius: 10px;
}

.districtClusterBody {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.clusterTag {
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.clusterTag.nara {
  background: #eff6ff;
  color: #1d4ed8;
}

.clusterTag.nara b {
  color: #2563eb;
  font-weight: 800;
}

.clusterTag.mmg {
  background: #f0fdf4;
  color: #047857;
}

.clusterTag.mmg b {
  color: #059669;
  font-weight: 800;
}

/* Animated Current Location Marker (GPS Live Beacon) */
.myLocationBeaconWrap {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 99999 !important;
}

.myLocationRipple {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.4);
  animation: myLocRippleAnim 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.myLocationRadarRing {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #3b82f6;
  background: rgba(59, 130, 246, 0.25);
  animation: myLocRadarAnim 2.2s ease-out infinite;
}

.myLocationCoreDot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.9), 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.myLocationPinLabel {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  letter-spacing: -0.2px;
}

@keyframes myLocRippleAnim {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70% {
    transform: scale(2.3);
    opacity: 0;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@keyframes myLocRadarAnim {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* ========================================================
   Store Customization Modal & Toggle Switches (점주 매장 관리)
   ======================================================== */
.storeCustomBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99998;
  transition: opacity 0.25s ease;
}

.storeCustomBackdrop.hidden {
  display: none !important;
}

.storeCustomModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  height: 600px;
  max-height: 88vh;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.storeCustomModal.hidden {
  display: none !important;
}

.storeCustomHead {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #f8fafc;
}

.storeCustomTitle {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 6px 0 2px;
}

.storeCustomSub {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.storeCustomBody {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.customSettingGroup {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.customSettingGroup.disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.72;
}

.customSettingGroup:not(.disabled):focus-within,
.customSettingGroup:not(.disabled):hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

.customSettingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customSettingInfo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.customSettingIcon {
  font-size: 20px;
  line-height: 1;
}

.customSettingInfo strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

.customSettingInfo p {
  font-size: 11.5px;
  color: #64748b;
  margin: 2px 0 0;
}

/* iOS Style Smooth Toggle Switch */
.toggleSwitch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggleSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggleSwitch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}

.toggleSwitch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.toggleSwitch input:checked + .slider {
  background-color: #2563eb;
}

.toggleSwitch input:checked + .slider:before {
  transform: translateX(20px);
}

.customSettingContent {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.customInput, .customTextarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  color: #1e293b;
  font-family: inherit;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.customInput:focus, .customTextarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.presetPhotoChips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.presetChipTitle {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.presetPhotoBtn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.presetPhotoBtn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Modal Tabs */
.storeCustomTabs {
  display: flex;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 16px;
  gap: 4px;
}

.storeCustomTabBtn {
  background: none;
  border: none;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.storeCustomTabBtn:hover {
  color: #0f172a;
}

.storeCustomTabBtn.active {
  color: #2563eb;
  font-weight: 800;
  border-bottom-color: #2563eb;
}

.storeCustomTabPane {
  display: none;
}

.storeCustomTabPane.active {
  display: block;
}

/* Merchant Stats Modal Tabs */
.merchantStatsTabs {
  display: flex;
  background: #f8fafc;
  border-bottom: 1.5px solid #e2e8f0;
  padding: 0 20px;
  gap: 6px;
}

.merchantStatsTabBtn {
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.merchantStatsTabBtn:hover {
  color: #0f172a;
}

.merchantStatsTabBtn.active {
  color: #2563eb;
  font-weight: 800;
  border-bottom-color: #2563eb;
  background: #ffffff;
}

.merchantStatsTabPane {
  display: none;
}

.merchantStatsTabPane.active {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

/* Period Filter Buttons */
.periodBtnGroup {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
}

.periodFilterBtn,
.adminPeriodBtn {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.periodFilterBtn:hover,
.adminPeriodBtn:hover {
  color: #1e293b;
}

.periodFilterBtn.active,
.adminPeriodBtn.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Pagination Row */
.paginationRow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

.pageBtn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pageBtn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.pageBtn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  font-weight: 800;
}

.pageBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Photo Upload & Thumbnails in Modal */
.photoUploadActions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.uploadFileBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #eff6ff;
  border: 1.5px dashed #60a5fa;
  color: #1d4ed8;
  font-size: 12.5px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.uploadFileBtn:hover {
  background: #dbeafe;
  border-color: #2563eb;
}

.uploadTip {
  font-size: 11px;
  color: #64748b;
  text-align: center;
}

.photoThumbListWrap {
  margin-top: 10px;
}

.photoThumbHeader {
  font-size: 11.5px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 6px;
}

.storePhotoThumbGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  padding: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.photoThumbItem {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #1e293b;
}

.photoThumbImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photoThumbDeleteBtn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  border: none;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.photoThumbDeleteBtn:hover {
  background: #ef4444;
}

.storeCustomFooter {
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.storeCustomBtn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.storeCustomBtn.secondary {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.storeCustomBtn.secondary:hover {
  background: #f1f5f9;
}

.storeCustomBtn.primary {
  background: #2563eb;
  border: 1px solid #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.storeCustomBtn.primary:hover {
  background: #1d4ed8;
}

/* ========================================================
   Detail Popup Dynamic Feature Extensions
   ======================================================== */

/* Store Photo Carousel / Banner (Slim 70px Height) */
.storePhotoBanner,
.storePhotoCarousel {
  position: relative !important;
  width: 100% !important;
  height: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  background: #0f172a !important;
}

.storePhotoBanner img {
  width: 100% !important;
  height: 100% !important;
  max-height: 70px !important;
  object-fit: cover !important;
  display: block !important;
}

.carouselTrack {
  width: 100%;
  height: 100%;
  position: relative;
}

.carouselSlide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 70px !important;
  object-fit: cover !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  pointer-events: none !important;
  display: block !important;
}

.carouselSlide.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.carouselBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.15s ease;
}

.carouselBtn:hover {
  background: rgba(15, 23, 42, 0.95);
}

.carouselBtn.prev { left: 6px; }
.carouselBtn.next { right: 6px; }

.carouselCounterBadge {
  position: absolute;
  bottom: 5px;
  right: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  z-index: 2;
}

/* Owner Welcome Greeting Bubble (Subtle & Clean) */
.ownerGreetingBox {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3.5px solid #64748b;
  border-radius: 6px;
  padding: 7px 11px;
  margin-top: 2px;
  margin-bottom: 7px;
  font-size: 11.5px;
  color: #334155;
  line-height: 1.45;
}

/* Today's Promo Alert */
.todayPromoBox {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.promoBadge {
  background: #f59e0b;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.promoText {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
}

/* Operating Hours Row */
.storeHoursRow {
  font-size: 11px;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 5px;
}

/* SNS Link Row */
.storeSnsRow {
  font-size: 11.5px;
  margin-top: 2px;
  margin-bottom: 6px;
  padding-left: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.storeSnsLink {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.storeSnsLink:hover {
  text-decoration: underline;
}

/* Community Buttons Row in Detail Popup */
.detailCommunityBtnRow {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

.detailCommunityBtn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.detailCommunityBtn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.detailCommunityBtn.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

.detailCommunityBtn.active .commentCountChip {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.commentCountChip {
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 5px;
}

/* Right-Side Attached Flyout for Comments & Q/A */
.storeSideFlyout {
  position: absolute !important;
  left: calc(100% + 14px) !important;
  top: 0 !important;
  width: 380px !important;
  height: 100% !important;
  min-height: 480px !important;
  max-height: 560px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22) !important;
  z-index: 1200 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  animation: flyoutSlideRight 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes flyoutSlideRight {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 801px) {
  .storeSideFlyout::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 36px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    z-index: 10;
  }
  .storeSideFlyout::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 36px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #cbd5e1;
    z-index: 9;
  }
}

@media (max-width: 800px) {
  .storeSideFlyout {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    z-index: 1500 !important;
    animation: flyoutFadeIn 0.15s ease !important;
  }
}

@keyframes flyoutFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.storeSideFlyout.hidden {
  display: none !important;
}

.storeSideFlyoutHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.storeSideFlyoutTitle {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.storeSideFlyoutCloseBtn {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}

.storeSideFlyoutCloseBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.storeSideFlyoutBody {
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.storeSideFlyoutFoot {
  padding: 10px 14px 12px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.storeCommentList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  flex: 1;
}

.storeCommentItem {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
}

.storeCommentMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.storeCommentUserWrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.storeCommentAuthor {
  font-weight: 800;
  color: #0f172a;
  font-size: 11.5px;
  white-space: nowrap;
}

.storeCommentDate {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.storeCommentDate:not(:empty)::before {
  content: "·";
  margin-right: 6px;
  color: #cbd5e1;
  font-weight: 700;
}

.storeCommentText {
  color: #334155;
  line-height: 1.35;
}

.storeCommentPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
}

.commentPageBtn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  padding: 2px 8px;
  cursor: pointer;
}

.commentPageBtn:hover:not(:disabled) {
  background: #e2e8f0;
  color: #0f172a;
}

.commentPageBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.commentPageIndicator {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
}

.storeCommentForm {
  display: flex;
  gap: 6px;
}

.storeCommentInput {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 11.5px;
  font-family: inherit;
}

.storeCommentInput:focus {
  outline: none;
  border-color: #2563eb;
}

.storeCommentSubmitBtn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.storeCommentSubmitBtn:hover {
  background: #1d4ed8;
}

.storeQaList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  flex: 1;
}

.storeQaItem {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
}

.storeQaQ {
  color: #0f172a;
  font-weight: 700;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.storeQaQ span.qTag {
  background: #ef4444;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.storeQaA {
  color: #2563eb;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.storeQaA span.aTag {
  background: #3b82f6;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.storeQaForm {
  display: flex;
  gap: 6px;
}

.storeQaInput {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 11.5px;
  font-family: inherit;
}

.storeQaInput:focus {
  outline: none;
  border-color: #2563eb;
}

.storeQaSubmitBtn {
  background: #475569;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.storeQaSubmitBtn:hover {
  background: #334155;
}

/* Store Auth Required Notice Box */
.storeLoginRequiredBox {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  margin-top: 2px;
}

.loginRequiredNotice {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.storeLoginPromptBtn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.storeLoginPromptBtn:hover {
  background: #1d4ed8;
}

/* Author Badge */
.storeAuthorBadge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #475569;
  margin-bottom: 4px;
}

.storeAuthorBadge .badgeDot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
}

/* Secret QA Toggle Row */
.storeQaSecretRow {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.storeQaSecretLabel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #475569;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
}

.storeQaSecretLabel input {
  cursor: pointer;
  accent-color: #2563eb;
}

/* Delete Buttons for Comments and QA */
.commentItemDeleteBtn,
.qaItemDeleteBtn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: auto;
  transition: all 0.15s ease;
}

.commentItemDeleteBtn:hover,
.qaItemDeleteBtn:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* QA Meta Header */
.storeQaMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.storeQaUserWrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.storeQaAuthor {
  font-weight: 800;
  color: #0f172a;
  font-size: 11.5px;
  white-space: nowrap;
}

.storeQaDate {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.storeQaDate:not(:empty)::before {
  content: "·";
  margin-right: 6px;
  color: #cbd5e1;
  font-weight: 700;
}

/* Secret QA Badges & Masking */
.qaSecretBadge {
  background: #fee2e2;
  color: #dc2626;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
}

.qaSecretMaskedText {
  color: #94a3b8 !important;
  font-style: italic;
  font-size: 11px;
}

/* QA Reply Form & Edit */
.qaReplyForm {
  margin-top: 5px;
  padding: 5px 7px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.qaReplyInputWrap {
  display: flex;
  gap: 5px;
}

.qaReplyInput {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
  font-family: inherit;
  min-width: 0;
}

.qaReplyInput:focus {
  border-color: #2563eb;
  outline: none;
}

.qaReplySubmitBtn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.qaReplySubmitBtn:hover {
  background: #334155;
}

.storeQaMerchantTag {
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
}

.qaAnswerEditBtn {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
  padding: 1px 4px;
  border-radius: 3px;
}

.qaAnswerEditBtn:hover {
  text-decoration: underline;
  background: #eff6ff;
}

.storeQaWait {
  font-size: 10.5px;
  color: #94a3b8;
  padding-left: 18px;
}

#mmaToastContainer {
  display: none !important;
}