/* ========================================
   휴 - 따뜻한 라이트 테마
   보이스피싱 예방 훈련 플랫폼
   "휴, 다행이다" - 안도, 따뜻함, 안심
   ======================================== */

:root {
  /* 색상 - 휴 따뜻한 팔레트 */
  --color-primary:      #2D9F93;  /* 따뜻한 틸 */
  --color-primary-dark:  #258578;
  --color-primary-light: #E6F5F3;
  --color-secondary:    #3B8EA5;
  --color-secondary-dark:#2F7589;
  --color-accent:       #E8813A;  /* 따뜻한 오렌지 */

  /* 배경/서피스 - 따뜻한 크림 */
  --color-bg:           #FAF8F5;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F2EFEA;

  /* 텍스트 */
  --color-text:         #2C2C2C;
  --color-text-sub:     #5A5A5A;
  --color-text-hint:    #8C8C8C;
  --color-text-on-primary: #FFFFFF;

  /* 피드백/상태 */
  --color-star:         #FFB800;
  --color-encourage:    #E8813A;
  --color-correct:      #2D9F93;
  --color-error:        #D94F4F;
  --color-warning:      #E8813A;
  --color-border:       #E0DCD6;

  /* 그림자 */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 4px 20px rgba(0, 0, 0, 0.1);

  /* 휴 전용 변수 */
  --hue-gradient:       linear-gradient(135deg, #E8813A, #2D9F93);
  --hue-card-bg:        #FFFFFF;
  --hue-card-border:    #E8E4DE;
  --hue-card-hover:     #F5F2ED;

  /* 다크 게임 화면 전용 */
  --game-dark-bg:       #1A1D2E;
  --game-dark-surface:  #252840;
  --game-dark-text:     #F0F2F8;
  --game-dark-sub:      #A0A8C8;
}

body {
  background: var(--color-bg) !important;
  color: var(--color-text);
}

/* === 공통 네비게이션 === */
.hue-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hue-nav-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
}
.hue-nav-logo {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 26px;
  font-weight: 700;
  background: var(--hue-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  letter-spacing: -0.5px;
}
.hue-nav-items {
  display: flex;
  gap: 2px;
}
.hue-nav-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 22px;
  text-decoration: none;
  color: var(--color-text-hint);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.hue-nav-item:hover {
  color: var(--color-text-sub);
  background: var(--color-surface-alt);
}
.hue-nav-active {
  background: var(--color-primary);
  color: #fff;
}
.hue-nav-active:hover {
  background: var(--color-primary-dark);
  color: #fff;
}
.hue-nav-icon {
  font-size: 15px;
}
/* 모바일 네비 간격 조정 */
@media (max-width: 400px) {
  .hue-nav-label { display: none; }
  .hue-nav-item { padding: 7px 10px; }
  .hue-nav-icon { font-size: 18px; }
}

/* === 휴 시작 화면 === */
.hue-hub {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 인사 영역 */
.hue-header {
  text-align: center;
  padding: 18px 0 18px;
}

.hue-intro-line {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.hue-tagline {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 15px;
  color: #888;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .hue-header { padding: 14px 4px 14px; }
  .hue-intro-line {
    font-size: 15.5px;
    letter-spacing: -0.4px;
  }
  .hue-intro-part { display: block; }
  .hue-tagline { font-size: 14px; }
}

/* === 피해 통계 대시보드 === */
.hue-stats-dashboard {
  background: linear-gradient(135deg, #1B2838, #243447);
  border-radius: 20px;
  padding: 22px 18px;
  margin-bottom: 16px;
  color: white;
  position: relative;
  overflow: hidden;
}
.hue-stats-dashboard::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(123,198,126,0.15), transparent 70%);
  pointer-events: none;
}
.hue-stats-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.hue-stats-label {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
}
.hue-stats-date {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
  padding: 3px 8px;
  border-radius: 10px;
}
.hue-stats-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.hue-stats-number {
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(90deg, #7BC67E, #5EC4B8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.hue-stats-unit {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
}
.hue-stats-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
}
/* 12분마다 1명 강조 */
.hue-stats-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hue-highlight-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF6B6B;
  flex-shrink: 0;
  animation: hlPulse 2s ease-in-out infinite;
}
@keyframes hlPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(255,107,107,0); }
}
.hue-highlight-text {
  font-size: 17px;
  color: rgba(255,255,255,0.8);
  transition: opacity 0.4s ease;
}
.hue-highlight-text strong {
  color: #FF6B6B;
  font-weight: 800;
}
/* 피해자 수 바 */
.hue-stats-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hue-bar-year {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
  width: 34px;
}
.hue-bar-track {
  flex: 1;
  height: 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
}
.hue-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hue-bar-val {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  white-space: nowrap;
}
.hue-bar-val strong {
  color: #FF6B6B;
  font-weight: 800;
  font-size: 16px;
}
.hue-stats-chips {
  display: flex;
  gap: 8px;
}
.hue-stats-chip {
  padding: 6px 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
.hue-stats-chip strong {
  color: #7BC67E;
  font-weight: 700;
}

/* === 뉴스 섹션 === */
.hue-news-section {
  margin-bottom: 16px;
}
.hue-news-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  font-size: 20px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.hue-news-arrow.left { left: 6px; }
.hue-news-arrow.right { right: 6px; }
.hue-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hue-news-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hue-news-badge {
  background: #EF4444;
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.hue-news-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.hue-news-cards::-webkit-scrollbar { display: none; }
.hue-news-card {
  flex-shrink: 0;
  width: 270px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--hue-card-border);
  border-radius: 14px;
  padding: 16px;
  scroll-snap-align: start;
  box-shadow: var(--shadow-sm);
}
.hue-news-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.hue-news-tag.alert { background: #FEE2E2; color: #DC2626; }
.hue-news-tag.warn { background: #FEF3C7; color: #B45309; }
.hue-news-tag.tip { background: #E6F5F3; color: #2D9F93; }
.hue-news-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hue-news-card-meta {
  font-size: 14px;
  color: var(--color-text-hint);
  margin-bottom: 10px;
}
.hue-news-card-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--color-surface-alt);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.hue-news-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.hue-news-card-tip-label {
  font-size: 14px;
  color: var(--color-text-sub);
  font-weight: 500;
}
.hue-news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--color-text-hint);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.hue-news-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.hue-news-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hue-card-border, #ddd);
  transition: background 0.2s, transform 0.2s;
}
.hue-news-dot.active {
  background: var(--color-primary);
  transform: scale(1.3);
}

/* 전체 훈련 바 */
.hue-train-bar {
  margin-bottom: 20px;
}
.hue-train-meta {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px 0;
  font-size: 15px;
  color: var(--color-text-hint);
}

/* 레벨 바 (홈) */
.hue-level-bar {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.hue-level-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hue-level-icon { font-size: 24px; }
.hue-level-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
}
.hue-level-xp {
  font-size: 15px;
  color: var(--color-text-sub);
  font-weight: 600;
}
.hue-xp-track {
  height: 8px;
  background: #E8E4DF;
  border-radius: 4px;
  overflow: hidden;
}
.hue-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #66BB6A, #43A047);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.hue-level-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface-alt, #F1ECE6);
  color: var(--color-text-hint);
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
}
.hue-level-hint {
  font-size: 12px;
  color: var(--color-text-hint);
  margin-top: 6px;
  letter-spacing: -0.2px;
}

/* 오늘의 도전 카드 */
.hue-daily-card {
  background: linear-gradient(135deg, #E6F5F3, #EFF8F6);
  border: 1px solid #C8E6E0;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.hue-daily-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(45, 159, 147, 0.06), transparent 70%);
  pointer-events: none;
}

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

.hue-daily-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(45, 159, 147, 0.12);
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.hue-daily-best {
  font-size: 16px;
  color: var(--color-text-hint);
}

.hue-daily-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.hue-daily-desc {
  font-size: 18px;
  color: var(--color-text-sub);
  margin-bottom: 16px;
  line-height: 1.6;
}

.hue-daily-icons {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.hue-daily-icon-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: rgba(45, 159, 147, 0.08);
  border-radius: 12px;
  font-size: 16px;
  color: var(--color-text-sub);
}

.hue-daily-btn {
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: 14px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 3px 12px rgba(45, 159, 147, 0.25);
}

.hue-daily-btn:active {
  transform: scale(0.97);
}

/* 3채널 카드 */
.hue-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.hue-channel-card {
  background: var(--hue-card-bg);
  border: 2px solid var(--hue-card-border);
  border-radius: 16px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  box-shadow: var(--shadow-sm);
}

.hue-channel-card:active {
  transform: scale(0.96);
}

.hue-channel-card.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.hue-channel-icon {
  font-size: 36px;
  margin-bottom: 8px;
  display: block;
}

.hue-channel-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.hue-channel-count {
  font-size: 15px;
  color: var(--color-text-hint);
}

/* 그룹 헤더 (전체 모드에서 채널 구분) */
.hue-group-header {
  grid-column: 1 / -1;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-sub);
  padding: 14px 4px 6px;
  border-bottom: 1px solid var(--hue-card-border);
  margin-bottom: 2px;
}

.hue-group-header:first-child {
  padding-top: 0;
}

/* 유형별 연습 그리드 */
.hue-practice-section {
  margin-bottom: 24px;
}

.hue-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-sub);
  margin-bottom: 12px;
  padding-left: 4px;
}

.hue-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.hue-type-grid .type-card {
  background: var(--hue-card-bg) !important;
  border: 1px solid var(--hue-card-border) !important;
  border-radius: 14px !important;
  padding: 16px 12px !important;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}

.hue-type-grid .type-card:active {
  transform: scale(0.96);
}

.hue-type-grid .type-card:hover {
  background: var(--hue-card-hover) !important;
}

.hue-type-grid .type-card-icon {
  font-size: 32px;
}

.hue-type-grid .type-card-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}

.hue-type-grid .type-card-desc {
  font-size: 14px;
  color: var(--color-text-hint);
  line-height: 1.3;
}

.hue-type-grid .type-card-count {
  font-size: 15px;
  color: var(--color-primary);
  font-weight: 600;
}

/* 하단 액션 */
.hue-bottom-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.hue-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--hue-card-bg);
  border: 1px solid var(--hue-card-border);
  border-radius: 14px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
  box-shadow: var(--shadow-sm);
}

.hue-action-btn:active {
  transform: scale(0.97);
}

.hue-action-btn:hover {
  background: var(--hue-card-hover);
}

.hue-tts-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--color-text-hint);
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.hue-tts-toggle:hover {
  color: var(--color-text-sub);
}

/* 가족 공유 배너 */
.hue-share-banner {
  background: #FFF5EE;
  border: 1px solid #F0D5C0;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: background 0.15s;
}

.hue-share-banner:active {
  background: #FDEEE2;
}

.hue-share-emoji {
  font-size: 36px;
  flex-shrink: 0;
}

.hue-share-text {
  flex: 1;
}

.hue-share-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.hue-share-desc {
  font-size: 16px;
  color: var(--color-text-sub);
  line-height: 1.4;
}

.hue-share-arrow {
  color: var(--color-text-hint);
  font-size: 20px;
}

/* 푸터 */
.hue-footer {
  text-align: center;
  padding: 16px 0 8px;
  font-size: 14px;
  color: var(--color-text-hint);
  border-top: 1px solid var(--hue-card-border);
  line-height: 1.6;
}
.hue-footer-tagline {
  margin-bottom: 8px;
}
.hue-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.hue-footer-link {
  color: var(--color-text-sub);
  text-decoration: none;
  opacity: 0.85;
}
.hue-footer-link:hover {
  color: var(--color-primary);
  opacity: 1;
}
.hue-footer-sep {
  color: var(--color-text-hint);
  opacity: 0.5;
}

/* ============================================
   게임 내 화면 스타일
   전화 수신/통화 = 다크 (실제 폰 느낌)
   그 외 = 라이트 (학습하기 편하게)
   ============================================ */

/* --- 전화 수신 화면: 다크 유지 (원래 다크) --- */

/* --- 통화 화면: 다크 유지 --- */
.call-statusbar {
  background: var(--game-dark-surface) !important;
  color: var(--game-dark-text) !important;
}

.call-topbar {
  background: var(--game-dark-bg) !important;
  color: var(--game-dark-text) !important;
}

.call-caller-name,
.call-timer,
.call-status-dot {
  color: var(--game-dark-text) !important;
}

.call-progress,
.call-score {
  color: var(--game-dark-sub) !important;
}

#call-screen {
  background: var(--game-dark-bg) !important;
}

.call-messages {
  background: var(--game-dark-bg) !important;
}

.message-bubble.caller {
  background: var(--game-dark-surface) !important;
  color: var(--game-dark-text) !important;
}

.call-judgment {
  background: var(--game-dark-bg) !important;
}

/* 통화 내 판별 버튼 - 다크 배경용 */
#call-screen .safe-btn {
  background: rgba(45, 159, 147, 0.15) !important;
  border-color: #2D9F93 !important;
  color: #5EC4B8 !important;
}

#call-screen .scam-btn {
  background: rgba(232, 129, 58, 0.15) !important;
  border-color: #E8813A !important;
  color: #F0A06A !important;
}

/* 통화 내 시뮬 선택지 - 다크 */
.sim-choice-btn {
  background: var(--game-dark-surface) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--game-dark-text) !important;
}

.sim-choice-btn:hover,
.sim-choice-btn:active {
  border-color: #2D9F93 !important;
}

.call-choices .sim-choice-btn {
  background: var(--game-dark-surface) !important;
}

/* 끊기 */
.hangup-btn {
  background: var(--color-error) !important;
  color: white !important;
}

/* 통화 홈 버튼 */
#call-screen .vp-home-btn,
#incoming-call-screen .vp-home-btn {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* --- SMS 화면: 라이트 (실제 문자 느낌) --- */
/* common.css의 기본 밝은 스타일 사용. 추가 조정만 */

/* --- 카톡 화면: 라이트 --- */
/* common.css 기본 스타일 사용 */

/* --- 레드플래그 화면: 라이트 --- */
/* redflag-msg는 기본 밝은 스타일 (#E8E8EC) 유지 - 잘 보임 */

/* --- 대처법 화면: 라이트 --- */
/* 기본 스타일 유지 */

/* --- 해설 화면: 라이트 --- */
/* 기본 밝은 카드 스타일 유지 */

/* --- 결과 화면: 라이트 --- */
/* 기본 스타일 유지 */

/* --- 통계 화면: 라이트 --- */
/* 기본 스타일 유지 */

/* === 공통 버튼 오버라이드 === */
.btn-primary {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
}

.btn-outline {
  background: var(--color-surface) !important;
  border-color: var(--hue-card-border) !important;
  color: var(--color-text) !important;
}

/* 판별 버튼 (라이트 화면용) */
.safe-btn {
  background: #E6F5F3 !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-dark) !important;
}

.scam-btn {
  background: #FFF3E0 !important;
  border-color: var(--color-warning) !important;
  color: #C06A20 !important;
}

/* 뒤로 버튼 */
.back-btn {
  color: var(--color-text-sub) !important;
  background: none !important;
  border: none !important;
}

/* 공유 버튼 */
.share-btn {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--hue-card-border) !important;
}

/* URL 경고 팝업 */
.url-warning-card {
  background: #FFFFFF !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* 카톡 경고 배너 */
.kakao-chat-warning-banner {
  background: #FFF8F0 !important;
  color: var(--color-warning) !important;
}

/* ===== 예방 가이드 섹션 ===== */
.hue-guide-section {
  margin-top: 24px;
}
.hue-guide-card {
  background: var(--color-surface);
  border: 1px solid var(--hue-card-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.hue-guide-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 18px;
}
.hue-guide-icon {
  font-size: 24px;
}
.hue-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hue-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
}
.hue-guide-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.hue-guide-tip {
  margin-top: 10px;
  padding: 8px 12px;
  background: #FEF3C7;
  border-radius: 8px;
  font-size: 15px;
  color: #92400E;
}

/* 긴급 연락처 */
.hue-guide-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hue-contact-item {
  display: block;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--hue-card-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.hue-contact-item:active {
  background: var(--color-surface-alt);
}
.hue-contact-item.urgent {
  border-left: 3px solid #DC2626;
}
.hue-contact-name {
  font-size: 17px;
  margin-bottom: 2px;
}
.hue-contact-name strong {
  color: var(--color-primary);
  font-size: 19px;
}
.hue-contact-desc {
  font-size: 15px;
  color: var(--color-text-sub);
}
.hue-contact-hours {
  font-size: 13px;
  color: var(--color-text-hint);
  margin-top: 2px;
}