/* ① Client Layer — ANN Verify Main Stylesheet
   TailwindCSS 보조 커스텀 스타일
   ─────────────────────────────────────────── */

:root {
  --primary: #0995ec;
  --emerald: #10B981;
  --amber:   #F59E0B;
  --red:     #EF4444;
  --sidebar-w: 336px;
  /* ★ v1.18: 모바일 topbar 높이 변수화 (매직 넘버 제거) */
  --topbar-h: 56px;
}

:lang(hi) *:not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-icons) {
  font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
  line-height: 1.8;
}

body {
  font-family:'Inter',sans-serif;
  overflow-x: hidden;
  /* ★ v1.18: iOS safe-area 대응 — 좌우 노치 영역 보호 */
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
h1,h2,h3,.font-display { font-family:'Space Grotesk',sans-serif; }

/* ── 콘텐츠 영역 상단 패딩 ── */
#main-content {
  padding-top: 48px;
  overflow-x: clip; /* sticky 위치 영향 없이 가로 오버플로우 차단 */
  min-width: 0;
}

/* ★ v1.18: Legal 페이지 — viewport 높이 - topbar 빼서 iframe이 화면 안에 정확히 들어맞게 */
.legal-page-h {
  height: calc(100vh - 48px); /* 데스크톱 — main-content padding-top */
}
@media (max-width: 639px) {
  .legal-page-h {
    height: calc(100vh - var(--topbar-h)); /* 모바일 — topbar 56px */
  }
}

/* ── 페이지 너비 보장 ── */
.page.active {
  width: 100%;
  max-width: 100%;
}

/* ── 로고 아이콘 크기 ── */
.logo-icon-box {
  width: 48px;
  height: 48px;
  transition: transform 0.3s ease, border-radius 0.3s ease;
  transform-origin: center center;
}
.logo-icon-symbol {
  font-size: 24px;
}
#sidebar.collapsed .logo-icon-box {
  transform: scale(0.667);
  transform-origin: center center;
  border-radius: 0.75rem;
}
#sidebar.collapsed .logo-icon-symbol {
  font-size: 30px;
}

/* ── 사이드바 아코디언 ── */
#sidebar .sb-text {
  transition: opacity 0.2s ease, max-width 0.3s ease;
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
}
#sidebar.collapsed .sb-text {
  opacity: 0;
  max-width: 0;
}
/* 사이드바 하단 버튼 영역 — 가로 배치 고정 */
#sidebar-bottom-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  overflow: visible;
}
/* 축소 시 다크모드 버튼 — 사이드바 전체폭(86px) 중앙 정렬 */
#sidebar.collapsed #sidebar-bottom-btns {
  padding-left: 0;
  padding-right: 0;
}
#sidebar.collapsed #sidebar-bottom-btns > button {
  flex: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  gap: 0;
}

/* 축소 시 언어 버튼 숨김 (아이콘 없으므로 전체 숨김) */
#sidebar.collapsed #lang-selector-wrap {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
}
/* 언어 드롭다운은 overflow 클리핑 금지 */
#lang-selector-wrap {
  overflow: visible !important;
}
#sidebar.collapsed {
  width: 86px !important;
}
.sidebar-toggle-arrow {
  transition: transform 0.3s ease;
}
#sidebar.collapsed .sidebar-toggle-arrow {
  transform: scaleX(-1);
}
#sidebar nav a,
#sidebar nav button,
#sidebar > div > button {
  transition: gap 0.3s ease, padding 0.3s ease;
}
/*
 * 축소 시 아이콘 중앙 정렬 규칙
 * ─ 컨테이너 패딩 0 → 버튼이 사이드바 전체폭(86px) 차지
 * ─ justify-content:center → 아이콘이 86px 정중앙(43px)에 고정
 * ─ expanded 시 pl-[19px]+px-3+12px = 43px 동일 → 아이콘 위치 불변
 */

/* 컨테이너 패딩 완전 제거 */
#sidebar.collapsed > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* nav · 드롭다운 인라인 padding 제거 */
#sidebar.collapsed nav,
#sidebar.collapsed #profile-dropdown > div {
  padding-right: 0 !important;
}

/* 모든 항목 중앙 정렬 */
#sidebar.collapsed nav a,
#sidebar.collapsed nav button,
#sidebar.collapsed > div > button,
#sidebar.collapsed #user-guest > button,
#sidebar.collapsed #user-loggedin > button,
#sidebar.collapsed #profile-dropdown button {
  justify-content: center;
  gap: 0;
}

/* New Fact Check 버튼 원형 축소 · 중앙 배치 */
#sidebar.collapsed div > button.bg-primary {
  width: auto !important;
  padding: 0.75rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 50% !important;
}

/* ── 페이지 라우팅 ── */
.page { display:none; }
.page.active { display:flex; flex-direction:column; min-height:100vh; }

/* ── 스크롤바 숨김 ── */
.hide-scroll::-webkit-scrollbar { display:none; }
.hide-scroll { -ms-overflow-style:none; scrollbar-width:none; }

/* ── Layer 애니메이션 (7-Layer 진행 표시) ── */
.layer-icon { transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }

.layer-icon.running {
  background: rgba(9,149,236,0.12) !important;
  color: var(--primary) !important;
  animation: glow-pulse 1.2s ease-in-out infinite;
}
.layer-icon.running .material-symbols-outlined {
  animation: icon-spin 1s linear infinite;
}
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(9,149,236,0.35), 0 0 8px rgba(9,149,236,0.15); }
  50%      { box-shadow: 0 0 0 3px rgba(9,149,236,0.6),  0 0 20px rgba(9,149,236,0.35); }
}

.layer-icon.done {
  background: rgba(16,185,129,0.12) !important;
  color: #10B981 !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.3);
  animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pop-in {
  0%   { transform: scale(0.55); opacity: 0.5; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ── Progress bar shimmer (Layer 7 대기 중) ── */
@keyframes bar-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.progress-bar-shimmer {
  background: linear-gradient(90deg, var(--primary) 25%, #60c5f7 50%, var(--primary) 75%) !important;
  background-size: 200% 100% !important;
  animation: bar-shimmer 1.8s linear infinite !important;
}

/* ── Trust Score 링 애니메이션 ── */
.trust-ring { transition: stroke-dashoffset 1.5s ease; }

/* ── Shimmer 스켈레톤 ── */
.skeleton {
  background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

/* ── 등급 색상 ── */
.grade-A { color:#10B981; background:#ECFDF5; border-color:#10B981; }
.grade-B { color:#3B82F6; background:#EFF6FF; border-color:#3B82F6; }
.grade-C { color:#F59E0B; background:#FFFBEB; border-color:#F59E0B; }
.grade-D { color:#F97316; background:#FFF7ED; border-color:#F97316; }
.grade-F { color:#EF4444; background:#FEF2F2; border-color:#EF4444; }

/* ── 뉴스 카드 hover ── */
.news-card { transition: transform 0.2s, box-shadow 0.2s; }
.news-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(9,149,236,0.08); }

/* ── 사이드바 활성 링크 ── */
.nav-link.active { background:rgba(9,149,236,0.1); color:#0995ec; }

/* ── 모바일 반응형 ── */
@media (max-width: 639px) {
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease, width 0.3s ease !important;
    width: 280px !important;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  #main-content {
    margin-left: 0 !important;
    /* ★ v1.18: 매직 넘버 → 변수, safe-area-bottom 추가 */
    padding-top: var(--topbar-h);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* 데스크탑 전용 세로 토글 버튼 숨김 */
  #sidebar-desktop-toggle {
    display: none !important;
  }
  /* 모바일에서 파트너 필터 영역 패딩 */
  .page > header,
  .page > div.sticky {
    scroll-margin-top: var(--topbar-h);
  }
  /* ★ v1.18: 모바일 topbar 자체에도 safe-area 상단 inset 적용 (iPhone notch) */
  #mobile-topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
}

/* ── Partner 필터 드롭다운 SVG 화살표 ── */
/* native select 위에 overlay가 올라가지 않아 background-image 방식 사용 */
select.pf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 1rem 1rem;
  padding-right: 1.75rem; /* 화살표 영역 확보 */
}