/* ═══════════════════════════════════════════
   dcpay-theme.css — 디씨페이 브랜드 공통 오버라이드
   서브 페이지 (faq / how / notices / reviews) 공유
════════════════════════════════════════════ */

/* ── DCPay 오버플로 방어 가드 ── */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
body { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

/* dc-header-inner: flex 자식 min-width 가드 (인라인 스타일 보완) */
.dc-header-inner > * { min-width: 0; }

/* ── 색상 변수 ── */
:root {
  --color-primary:       #3b4890;
  --color-primary-dark:  #29367c;
  --color-primary-light: #5a68b0;
  --color-cta:           #3b4890;
  --color-cta-dark:      #29367c;
  --color-cta-glow:      rgba(59,72,144,0.22);
  --color-trust:         #29367c;
  --color-trust-bg:      rgba(59,72,144,0.10);
  --color-accent:        #3b4890;
  --bg-base:             #EEF0F8;
  --bg-elevated:         #D6DBEF;
}

/* ── hpay 초록 하드코딩 override ── */
.nav-actions .btn-primary,
.nav-actions .btn-primary:hover {
  background: #3b4890 !important;
  border-color: #3b4890 !important;
}
.nav-live-dot {
  background: #3b4890 !important;
  box-shadow: 0 0 0 3px rgba(59,72,144,0.3) !important;
}
.nav-live-text {
  color: #3b4890 !important;
}
.nav-live-badge {
  border-color: rgba(59,72,144,0.25) !important;
  background: rgba(59,72,144,0.06) !important;
}
.nav-cred-tag--n {
  background: #eef0f9 !important;
  color: #3b4890 !important;
}
.nav-cred-tag--n svg path {
  fill: #3b4890 !important;
}
.notice-item-title::before {
  background: #3b4890;
}
.notice-acc-header[aria-expanded="true"] .notice-item-title {
  color: #3b4890;
}
.notice-acc-chevron.is-open {
  color: #3b4890;
}
.notice-item-pin {
  color: #3b4890;
  background: rgba(59,72,144,0.10);
  border-color: rgba(59,72,144,0.3);
}
.notice-acc-header[aria-expanded="true"] {
  background: #EEF0F8;
}
@media (max-width: 767px) { .nav-live-badge--brand { display: none !important; } }

/* ── DCPay 챗봇 골드 테마 ── */
.chat-fab { background: #FFD600 !important; box-shadow: 0 4px 16px rgba(255,214,0,0.35) !important; color: #1a1f3a !important; }
.chat-fab:hover { background: #FFC400 !important; box-shadow: 0 6px 20px rgba(255,214,0,0.45) !important; }
.bottom-bar-chat { background: #FFD600 !important; color: #1a1f3a !important; }
.chatbot-popup { background: #1a1f3a !important; border: 1px solid rgba(255,214,0,0.18) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,214,0,0.06) !important; }
.chatbot-popup::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #3b4890 0%, #FFD600 50%, #3b4890 100%); border-radius: 16px 16px 0 0; pointer-events: none; z-index: 10; }
.chatbot-header { background: linear-gradient(135deg, #252b4a 0%, #1d2340 100%) !important; border-bottom: 1px solid rgba(255,214,0,0.15) !important; }
.chatbot-name { color: #FFD600 !important; font-weight: 700 !important; }
.chatbot-status { color: rgba(232,234,246,0.65) !important; }
.chatbot-online-dot { background: #22ff88 !important; box-shadow: 0 0 0 2px rgba(34,255,136,0.3) !important; }
.chatbot-tabs { background: #252b4a !important; border-bottom: 1px solid rgba(255,214,0,0.1) !important; }
.chatbot-tab { background: transparent !important; color: rgba(232,234,246,0.45) !important; border-radius: 8px !important; }
.chatbot-tab:hover { background: rgba(255,255,255,0.05) !important; color: rgba(232,234,246,0.75) !important; }
.chatbot-tab.active { background: rgba(255,214,0,0.12) !important; border: 1px solid rgba(255,214,0,0.3) !important; color: #FFD600 !important; }
.chatbot-messages { background: #1a1f3a !important; }
.chatbot-input-area { background: #252b4a !important; border-top: 1px solid rgba(255,214,0,0.12) !important; }
.chatbot-input { background: #1a1f3a !important; color: #e8eaf6 !important; border: 1.5px solid rgba(59,72,144,0.5) !important; border-radius: 999px !important; }
.chatbot-input::placeholder { color: rgba(139,157,195,0.6) !important; }
.chatbot-input:focus { border-color: #FFD600 !important; box-shadow: 0 0 0 3px rgba(255,214,0,0.12) !important; }
.chatbot-send { background: #FFD600 !important; color: #1a1f3a !important; box-shadow: 0 2px 8px rgba(255,214,0,0.3) !important; }
.chatbot-send:hover { background: #fff200 !important; }
.chatbot-send:disabled { background: rgba(255,214,0,0.25) !important; box-shadow: none !important; }
.msg-row.bot .msg-bubble, .msg-bubble:not(.user) { background: #252b4a !important; color: #e8eaf6 !important; border: 1px solid rgba(59,72,144,0.5) !important; }
.msg-row.user .msg-bubble, .msg-bubble.user, .msg-user .msg-bubble { background: linear-gradient(135deg, #3b4890 0%, #29367c 100%) !important; color: #e8eaf6 !important; border: 1px solid rgba(91,104,176,0.6) !important; }
.choice-btn { background: rgba(255,214,0,0.08) !important; border: 1.5px solid rgba(255,214,0,0.35) !important; color: #FFD600 !important; border-radius: 999px !important; }
.choice-btn:hover { background: rgba(255,214,0,0.18) !important; border-color: rgba(255,214,0,0.6) !important; }
.typing-dots { background: #252b4a !important; border: 1px solid rgba(59,72,144,0.5) !important; }
.typing-dot { background: #FFD600 !important; }
.chatbot-history { background: #1a1f3a !important; }
.history-item { background: #252b4a !important; border: 1px solid rgba(59,72,144,0.4) !important; color: #e8eaf6 !important; }
.history-item:hover { border-color: rgba(255,214,0,0.35) !important; background: rgba(255,214,0,0.04) !important; }
.chatbot-close { color: rgba(232,234,246,0.5) !important; background: transparent !important; }
.chatbot-close:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
@media (max-width: 767px) { .chatbot-popup::before { border-radius: 0 !important; } }

/* ── Mobile Bottom CTA Bar ── */
.dc-bottom-bar {
  display: none;
}
@media (max-width: 900px) {
  .dc-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .dc-bottom-bar__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dc-bottom-bar__btn--phone {
    background: #f0f2ff;
    color: #3b4890;
    border: 1.5px solid #c7ccee;
  }
  .dc-bottom-bar__btn--chat {
    background: #3b4890;
    color: #fff;
  }
  /* 하단 바가 있는 페이지의 footer 하단 여백 확보 */
  body:has(.dc-bottom-bar) footer,
  body:has(.dc-bottom-bar) .footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* F-03 fix: FAB loading spinner — dcpay */
.chat-fab.loading {
  pointer-events: none !important;
  opacity: 0.85 !important;
  cursor: wait !important;
}
.chat-fab.loading::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  border: 2.5px solid rgba(255,214,0,0.2);
  border-top-color: #FFD600;
  animation: _fab-spin 0.75s linear infinite;
  pointer-events: none;
}
@keyframes _fab-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════
   CLS / resize_overflow 방어 가드
   (2026-05-26 defensive-fixes)
══════════════════════════════════════ */

/* dc-slider-track resize overflow 가드 — resize 시 트랙 가로 초과 방지 */
.dc-slider-track {
  overflow-x: clip;
  max-width: 100%;
}

/* dc-ticker-track overflow 가드 */
.dc-ticker-track {
  overflow-x: clip;
}