/* 전 페이지의 오래된 색상·표면 규칙을 덮는 현대형 디자인 토큰과 공통 UI입니다. */
:root {
  --ui-bg: #f3f6fb;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7f9fc;
  --ui-ink: #142033;
  --ui-muted: #69778c;
  --ui-border: #e3e9f2;
  --ui-blue: #2864f0;
  --ui-blue-dark: #1d4ed8;
  --ui-teal: #0f9488;
  --ui-gold: #f2a93b;
  --ui-danger: #dc4b55;
  --ui-shadow-card: 0 8px 24px rgba(25, 42, 70, 0.055), 0 1px 2px rgba(25, 42, 70, 0.045);
  --ui-shadow-float: 0 18px 48px rgba(25, 42, 70, 0.13);
  --retro-paper: #f7f9fc;
  --retro-paper-light: #ffffff;
  --retro-paper-deep: #e8eef8;
  --retro-ink: #142033;
  --retro-navy: #203450;
  --retro-red: #2864f0;
  --retro-red-deep: #1d4ed8;
  --retro-gold: #f2a93b;
  --retro-mint: #0f9488;
  --retro-line: #e3e9f2;
  --retro-shadow: var(--ui-shadow-card);
}

/* 복권공 그림은 화면 가장자리에서만 은은하게 보여 카드와 정보의 집중도를 지킵니다. */
html {
  background: var(--ui-bg) !important;
  color-scheme: light;
}

body {
  min-height: 100vh;
  color: var(--ui-ink) !important;
  font-family: "Pretendard", "Inter", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(40, 100, 240, 0.055), transparent 34%),
    radial-gradient(ellipse at 94% 12%, rgba(15, 148, 136, 0.045), transparent 30%),
    url("assets/images/lotto-page-background.svg") center top / 900px 800px repeat,
    var(--ui-bg) !important;
  line-height: 1.6;
}

body :is(h1, h2, h3, h4, h5, h6, .card-title, .section-title, .premium-title) {
  color: var(--ui-ink) !important;
  font-family: inherit !important;
  letter-spacing: -0.035em;
  text-shadow: none !important;
}

body :is(p, small, .text-muted, .muted) {
  text-shadow: none !important;
}

::selection {
  color: #ffffff;
  background: var(--ui-blue);
}

:focus-visible {
  outline: 3px solid rgba(40, 100, 240, 0.34) !important;
  outline-offset: 2px;
}

/* 공통 바깥 폭을 맞춰 헤더·본문·하단 안내가 가지런히 정렬되게 합니다. */
:is(.container, .main-container, .admin-container, .board-page-wrapper, .details-container) {
  width: min(100% - 36px, 1240px);
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}

/* 헤더는 밝은 유리 표면과 짧은 메뉴 상태색으로 본문과 자연스럽게 이어집니다. */
.luxury-midnight-header {
  padding: 10px 0 14px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(243, 246, 251, 0.96), rgba(243, 246, 251, 0.72)) !important;
  box-shadow: none !important;
}

.luxury-midnight-header.scrolled {
  background: rgba(243, 246, 251, 0.88) !important;
  box-shadow: none !important;
}

.header-container {
  width: min(100% - 36px, 1240px) !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 16px !important;
  gap: 12px;
  border: 1px solid rgba(220, 228, 240, 0.92) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 7px 24px rgba(25, 42, 70, 0.065) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.luxury-logo { gap: 10px; }
.logo-ball {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #3c7cff, #2254db) !important;
  box-shadow: 0 7px 16px rgba(40, 100, 240, 0.22) !important;
}
.logo-text .title { color: var(--ui-ink) !important; font-size: 1.2rem !important; letter-spacing: -0.055em !important; }
.logo-text .title span { color: var(--ui-blue) !important; }
.logo-text .subtitle { color: #8591a4 !important; font-size: 0.62rem !important; letter-spacing: 0.12em !important; }

.luxury-nav .nav-pill {
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid #edf0f5 !important;
  border-radius: 13px !important;
  background: #f8f9fc !important;
  box-shadow: none !important;
}

.nav-link {
  min-height: 38px;
  padding: 8px 11px !important;
  border-radius: 9px !important;
  color: #5e6b80 !important;
  font-size: 0.82rem !important;
  font-weight: 720 !important;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.nav-link:hover,
.refresh-btn-link:hover {
  color: var(--ui-blue) !important;
  background: #edf3ff !important;
}

.nav-link.active {
  color: var(--ui-blue-dark) !important;
  background: #eaf1ff !important;
  box-shadow: inset 0 0 0 1px rgba(40, 100, 240, 0.08) !important;
}

.nav-divider { background: #dfe5ee !important; }
.user-trigger {
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}
.user-trigger:hover { border-color: #bfd0f5 !important; background: #f8faff !important; }
.user-name { color: var(--ui-ink) !important; }
.user-role { color: var(--ui-muted) !important; }
.user-avatar-hex { border-radius: 12px !important; background: linear-gradient(145deg, var(--ui-blue), var(--ui-teal)) !important; }

/* 페이지별 카드의 오래된 종이색·점선·강한 그림자를 가볍고 선명한 표면으로 바꿉니다. */
:is(
  .card, .prm-card, .board-card, .admin-card, .dashboard-card, .mypage-card,
  .premium-card, .premium-value-card, .premium-plan, .premium-compare,
  .shop-card, .point-smart-card, .inventory-section, .profile-form-panel,
  .report-panel, .report-sub-card, .report-kpi-card, .purchase-history-card,
  .purchase-register-card, .metric-card, .community-pulse-card, .author-rank-card,
  .board-insight-card, .comment-input-card, .settings-card-premium, .smart-connect-panel,
  .meta-status-card, .playbook-card, .strategy-action-card, .modern-analysis-card,
  .pattern-card-modern, .preference-upgrade-panel, .preset-card, .preset-memory-card,
  .simulation-upgrade-panel, .simulation-insight-card, .admin-panel, .user-admin-card,
  .premium-plan-admin-card, .page-loading-card, .details-card
) {
  border: 1px solid var(--ui-border) !important;
  border-radius: 17px !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-card) !important;
  color: var(--ui-ink) !important;
}

:is(.quick-stat-card, .stat-item-card, .insight-card, .shop-card, .profile-quick-card, .point-smart-card) {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

:is(.quick-stat-card, .profile-quick-card, .shop-card, .point-smart-link):hover {
  border-color: #cad8f4 !important;
  box-shadow: 0 13px 30px rgba(25, 42, 70, 0.09) !important;
  transform: translateY(-2px);
}

:is(.card-title, .section-title, .section-header, .admin-header, .form-section-title, .header-title) {
  color: var(--ui-ink) !important;
  letter-spacing: -0.04em;
}

:is(.card-header, .section-header, .board-card-header, .pattern-card-header) {
  border-color: var(--ui-border) !important;
}

/* 중요한 페이지 제목과 회차 소개에는 깊은 남색과 제한된 청록 포인트를 사용합니다. */
:is(
  .premium-hero, .prm-hero, .point-shop-hero, .purchase-hero,
  .profile-stats-hero, .admin-hero, .home-section-intro, .premium-modal-hero,
  .post-header-luxury
) {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(28, 179, 168, 0.24), transparent 28%),
    radial-gradient(circle at 12% 100%, rgba(59, 130, 246, 0.25), transparent 35%),
    linear-gradient(125deg, #111d32 0%, #172a47 58%, #183c52 100%) !important;
  box-shadow: 0 20px 46px rgba(18, 34, 56, 0.16) !important;
  color: #ffffff !important;
}

:is(
  .premium-hero, .prm-hero, .point-shop-hero, .purchase-hero,
  .profile-stats-hero, .admin-hero, .home-section-intro, .premium-modal-hero,
  .post-header-luxury
) :is(h1, h2, h3, h4, p, span, strong, small, a, i) {
  color: inherit !important;
}

:is(.premium-hero, .prm-hero, .point-shop-hero, .purchase-hero)::before,
:is(.premium-hero, .prm-hero, .point-shop-hero, .purchase-hero)::after {
  opacity: 0.38 !important;
}

:is(.premium-eyebrow, .premium-status, .premium-hero-status, .point-hero-pill, .scoreboard-badge) {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e8f0ff !important;
  letter-spacing: 0 !important;
}

.point-balance-panel {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

/* 메뉴와 탭은 선택 상태를 색과 형태로 분명하게 표시합니다. */
:is(.admin-tabbar, .dashboard-nav, .tabs, .main-tabs, .home-section-tabs, .profile-tab-nav, .mypage-menu, .board-category-strip) {
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 13px !important;
  background: #edf1f7 !important;
  box-shadow: none !important;
}

:is(.admin-menu a, .dashboard-nav a, .mypage-menu a, .profile-tab-nav a, .tabs .tab, .tab, .main-tab-btn, .home-main-tab-btn, .board-category-chip) {
  min-height: 38px;
  padding: 8px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #637086 !important;
  font-weight: 720 !important;
  box-shadow: none !important;
}

:is(.admin-menu a:hover, .dashboard-nav a:hover, .mypage-menu a:hover, .profile-tab-nav a:hover, .tabs .tab:hover, .tab:hover, .main-tab-btn:hover, .home-main-tab-btn:hover, .board-category-chip:hover) {
  color: var(--ui-blue-dark) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

:is(.admin-menu a.active, .dashboard-nav a.active, .mypage-menu a.active, .profile-tab-nav a.active, .tabs .tab.active, .tab.active, .main-tab-btn.active, .home-main-tab-btn.active, .board-category-chip.active) {
  border-color: rgba(40, 100, 240, 0.1) !important;
  background: #ffffff !important;
  color: var(--ui-blue-dark) !important;
  box-shadow: 0 2px 7px rgba(25, 42, 70, 0.08) !important;
}

/* 페이지별 규칙에 남아 있던 어두운 입체 버튼을 평평하고 또렷한 버튼으로 통일합니다. */
button:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled) {
  min-height: 42px;
  border: 1px solid var(--ui-blue) !important;
  border-radius: 11px !important;
  background: var(--ui-blue) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 740;
  box-shadow: 0 4px 11px rgba(40, 100, 240, 0.16) !important;
  text-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

button:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled):hover:not(:disabled) {
  border-color: var(--ui-blue-dark) !important;
  background: var(--ui-blue-dark) !important;
  box-shadow: 0 7px 16px rgba(40, 100, 240, 0.22) !important;
  transform: translateY(-1px);
}

button.btn-secondary:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled),
button.btn-outline:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled),
button.premium-btn-outline:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled) {
  border-color: #d8e0eb !important;
  background: #ffffff !important;
  color: #344258 !important;
  box-shadow: none !important;
}

button.btn-danger:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled),
button.btn-delete:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled) {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger) !important;
  color: #ffffff !important;
}

button.draw-history-nav-btn.is-next:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled) {
  border-color: var(--ui-teal) !important;
  background: var(--ui-teal) !important;
  color: #ffffff !important;
}

/* 당첨금 강조는 누런 배경 대신 차분한 파랑 표식으로 시선을 모읍니다. */
.draw-meta-item {
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: #f8fafd !important;
  box-shadow: none !important;
}

.draw-meta-item.highlight {
  border-color: #d5e2ff !important;
  background: #f0f5ff !important;
}

.draw-meta-item.next-draw {
  border-color: #cbe9e5 !important;
  background: #effaf8 !important;
}

/* 주요 행동은 선명한 파랑, 보조 행동은 흰색, 위험 행동은 빨강으로 구분합니다. */
:is(.btn, .button, .premium-btn-solid, .home-quick-button, .form-submit, .action-btn, .check-btn, .attendance-btn, .auth-btn, .prm-btn-primary, .request-submit) {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--ui-blue) !important;
  border-radius: 11px !important;
  background: var(--ui-blue) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.9rem;
  font-weight: 760 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 5px 13px rgba(40, 100, 240, 0.18) !important;
  text-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

:is(.btn, .button, .premium-btn-solid, .home-quick-button, .form-submit, .action-btn, .check-btn, .attendance-btn, .auth-btn, .prm-btn-primary, .request-submit):hover {
  border-color: var(--ui-blue-dark) !important;
  background: var(--ui-blue-dark) !important;
  box-shadow: 0 8px 18px rgba(40, 100, 240, 0.23) !important;
  transform: translateY(-1px);
}

/* 링크형 보조 버튼도 단추형 버튼과 같은 중립색을 유지합니다. */
:is(a.btn-secondary, a.btn-outline, a.premium-btn-outline, a.luxury-btn.ghost) {
  border: 1px solid #d8e0eb !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #344258 !important;
  box-shadow: none !important;
}

:is(a.btn-secondary, a.btn-outline, a.premium-btn-outline, a.luxury-btn.ghost):hover {
  border-color: #b9c9e6 !important;
  background: #f7f9fd !important;
  color: var(--ui-blue-dark) !important;
}

:is(a.btn-danger, a.btn-delete) {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger) !important;
  color: #ffffff !important;
}

button.btn-success:not(.luxury-toggle):not(.m-close):not(.auth-close):not(.close-modal):not(.nav-link):not(.swal2-styled) {
  border-color: var(--ui-teal) !important;
  background: var(--ui-teal) !important;
  color: #ffffff !important;
}

:is(.btn-secondary, .btn-outline, .premium-btn-outline, .luxury-btn.ghost, .m-btn, .m-close) {
  border: 1px solid #d8e0eb !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #344258 !important;
  box-shadow: none !important;
}

:is(.btn-secondary, .btn-outline, .premium-btn-outline, .luxury-btn.ghost, .m-btn, .m-close):hover {
  border-color: #b9c9e6 !important;
  background: #f7f9fd !important;
  color: var(--ui-blue-dark) !important;
}

:is(.btn-danger, .btn-delete, .action-delete) {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger) !important;
  color: #ffffff !important;
}

button:disabled,
button[disabled],
input:disabled,
select:disabled {
  cursor: not-allowed !important;
  filter: saturate(0.55);
  opacity: 0.58;
  transform: none !important;
}

/* 입력 요소는 높이와 포커스 표현을 통일해 작은 화면에서도 조작하기 쉽게 만듭니다. */
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .form-input, .prm-input) {
  min-height: 44px;
  border: 1px solid #d7dfeb !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: var(--ui-ink) !important;
  font-family: inherit !important;
  box-shadow: inset 0 1px 2px rgba(25, 42, 70, 0.025) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .form-input, .prm-input):focus {
  border-color: #83a7fb !important;
  box-shadow: 0 0 0 4px rgba(40, 100, 240, 0.11) !important;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-blue); }
textarea { line-height: 1.6; }

/* 정보표와 목록은 행 구분을 가볍게 두고 읽기 순서를 선명하게 만듭니다. */
:is(table, .data-table, .prm-data-table, .activity-table-modern, .premium-compare-table, .board-table, .activity-table) {
  border-color: var(--ui-border) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

:is(table th, .data-table th, .prm-data-table th, .activity-table-modern th, .premium-compare-table th, .board-table th, .activity-table th) {
  padding: 12px 14px;
  border-color: var(--ui-border) !important;
  background: #f4f7fb !important;
  color: #58677e !important;
  font-size: 0.8rem;
  font-weight: 760 !important;
  letter-spacing: -0.01em;
}

:is(table td, .data-table td, .prm-data-table td, .activity-table-modern td, .premium-compare-table td, .board-table td, .activity-table td) {
  border-color: #edf0f5 !important;
  background: #ffffff !important;
  color: #334258 !important;
}

:is(tbody tr:hover td, .data-table tbody tr:hover td, .activity-table tbody tr:hover td) {
  background: #f8faff !important;
}

/* 결과 카드에서는 당첨 공의 실제 색을 유지하고 나머지 화면 장식은 절제합니다. */
.latest-draw-info,
.draw-history-lookup,
.history-card,
.purchase-register-card,
.simulation-control-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.draw-history-lookup {
  padding: clamp(16px, 2.4vw, 24px) !important;
}

:is(.modern-section-header, .pattern-header, .admin-header) {
  color: var(--ui-ink) !important;
}

:is(.modern-section-header .header-icon, .card-icon, .section-icon) {
  border-radius: 13px !important;
  background: #edf3ff !important;
  color: var(--ui-blue) !important;
  box-shadow: none !important;
}

.strategy-btn {
  border: 1px solid var(--ui-border) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 15px rgba(25, 42, 70, 0.045) !important;
}

.strategy-btn:hover {
  border-color: #b9cdf6 !important;
  background: #f9fbff !important;
  box-shadow: 0 10px 22px rgba(25, 42, 70, 0.08) !important;
  transform: translateY(-2px);
}

.site-legal-footer {
  border: 1px solid var(--ui-border) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 28px rgba(25, 42, 70, 0.045) !important;
}

/* 입력 모달은 넉넉한 여백과 충분한 최대 높이를 사용해 작은 화면에서 잘리지 않게 합니다. */
.modal,
.auth-modal {
  background: rgba(16, 28, 47, 0.52) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.modal-content,
.auth-modal-content {
  max-height: min(90vh, 880px);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 23px !important;
  background: #ffffff !important;
  box-shadow: var(--ui-shadow-float) !important;
}

.close-modal,
.auth-close {
  border-radius: 11px !important;
  color: #64748b !important;
}

/* 휴대전화에서는 좌우 여백과 제목 크기를 줄이고 내비게이션 영역을 넓게 유지합니다. */
@media (max-width: 768px) {
  :is(.container, .main-container, .admin-container, .board-page-wrapper, .details-container) {
    width: calc(100% - 24px);
  }

  .header-container {
    width: calc(100% - 20px) !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 11px !important;
    border-radius: 15px !important;
  }

  :is(.premium-hero, .prm-hero, .point-shop-hero, .purchase-hero, .profile-stats-hero, .admin-hero, .home-section-intro) {
    border-radius: 19px !important;
  }

  :is(.card, .prm-card, .board-card, .admin-card, .dashboard-card, .mypage-card, .premium-card, .shop-card, .settings-card-premium, .details-card) {
    border-radius: 15px !important;
  }

  :is(.btn, .button, .premium-btn-solid, .home-quick-button, .form-submit, .action-btn, .check-btn, .attendance-btn, .auth-btn, .prm-btn-primary, .request-submit) {
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .luxury-logo { gap: 8px; }
  .logo-ball { width: 34px !important; height: 34px !important; }
  .logo-text .title { font-size: 1.05rem !important; }
  .logo-text .subtitle { font-size: 0.55rem !important; letter-spacing: 0.08em !important; }
  .luxury-actions { gap: 6px !important; }
  :is(.modal-content, .auth-modal-content) { width: calc(100vw - 24px) !important; padding: 22px 18px !important; }

  /* 휴대전화에서는 보너스 공도 본번호와 같은 줄에 유지되도록 공과 간격을 압축합니다. */
  .latest-draw-info .winning-numbers { gap: 5px !important; flex-wrap: nowrap !important; }
  .latest-draw-info .winning-num,
  .latest-draw-info .bonus-num { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; font-size: 0.78rem !important; }
  .latest-draw-info .bonus-label { width: auto !important; flex: 0 0 auto !important; margin: 0 1px !important; }
}

/* 움직임을 줄이도록 설정한 사용자는 카드 이동 효과 없이 같은 상태 변화를 확인합니다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}