/* ═══════════════════════════════════════════
   PIA Privacy — 공통 스타일 시트
   모든 HTML 파일에서 공유하는 베이스 스타일
   ═══════════════════════════════════════════ */

/* ── 공통 CSS 변수 (다크 테마) ── */
:root {
  --pia-accent:   #00e5ff;
  --pia-accent2:  #7c3aed;
  --pia-green:    #10b981;
  --pia-red:      #ef4444;
  --pia-amber:    #f59e0b;
  --pia-bg:       #0a0e1a;
  --pia-surface:  #111827;
  --pia-border:   rgba(0, 229, 255, 0.12);
  --pia-text:     #e2e8f0;
  --pia-muted:    #64748b;
  --pia-radius:   10px;
  --pia-shadow:   0 0 0 1px rgba(0,229,255,.15), 0 8px 32px rgba(0,0,0,.5);
  --pia-transition: all .22s cubic-bezier(.22,1,.36,1);
}

/* ── 격자 배경 패턴 (전 페이지 공통) ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── 공통 상단 네비 ── */
.pia-topnav {
  height: 60px;
  background: rgba(10,14,26,.97);
  border-bottom: 1px solid rgba(0,229,255,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
}
.pia-topnav a { text-decoration: none; }
.pia-topnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
@keyframes pia-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.pia-topnav-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 8px #00e5ff, 0 0 16px #00e5ff;
  animation: pia-dot-pulse 2s infinite;
  flex-shrink: 0;
}
.pia-topnav-brand {
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 1px;
}
.pia-topnav-brand span { color: #00e5ff; }
.pia-topnav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pia-topnav-link {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #64748b;
  padding: 5px 10px;
  transition: color .2s;
}
.pia-topnav-link:hover { color: #00e5ff; }
.pia-topnav-link.active { color: #00e5ff; }
.pia-topnav-sep { color: #243048; font-size: 12px; }

/* ── 기본 리셋 보완 ── */
html { scroll-behavior: smooth; }

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── 텍스트 선택 색상 ── */
::selection {
  background: rgba(0, 229, 255, 0.2);
  color: #e2e8f0;
}

/* ── 포커스 스타일 (키보드 접근성) ── */
*:focus-visible {
  outline: 2px solid var(--pia-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 모바일 탭 하이라이트 제거 ── */
* { -webkit-tap-highlight-color: transparent; }

/* ── 터치 타겟 최소 크기 (접근성) ── */
@media (max-width: 768px) {
  button,
  [role="button"],
  a.btn,
  .btn-start,
  .btn-next,
  .btn-main,
  .btn-ghost,
  .send-btn,
  .gen-btn,
  .hub-trigger,
  .wchip,
  .qbtn {
    min-height: 44px;
  }

  .mtab { min-height: 52px; }

  /* 입력 필드 모바일 최적화 */
  input, textarea, select {
    font-size: 16px !important; /* iOS 줌 방지 */
  }
}

/* ── 스크롤바 공통 스타일 ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.2);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.4);
}

/* ── 이미지/미디어 반응형 ── */
img, video, canvas, svg { max-width: 100%; display: block; }

/* ── 공통 로딩 스피너 ── */
@keyframes pia-spin {
  to { transform: rotate(360deg); }
}
.pia-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(0,229,255,.2);
  border-top-color: var(--pia-accent);
  border-radius: 50%;
  animation: pia-spin .7s linear infinite;
}

/* ── 공통 카드 패턴 ── */
.pia-card {
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid var(--pia-border);
  border-radius: var(--pia-radius);
  padding: 20px;
  transition: var(--pia-transition);
}
.pia-card:hover {
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── 에러/성공 상태 ── */
.pia-error {
  color: var(--pia-red);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}
.pia-success {
  color: var(--pia-green);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}

/* ── 동작 감소 모드 (접근성) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 고대비 모드 ── */
@media (forced-colors: active) {
  :root {
    --pia-accent: ButtonText;
    --pia-border: ButtonText;
  }
}

/* ══════════════════════════
   모바일 반응형 개선
══════════════════════════ */

/* 소형 화면 패딩 */
@media (max-width: 480px) {
  #main,
  .container,
  .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 메트릭 카드 2열 → 1열 */
  .intro-metrics {
    grid-template-columns: 1fr !important;
  }

  /* 서비스 카드 1열 */
  .svc-main-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hub 패널 전체 너비 */
  .hub-panel { width: 100vw !important; }
}

/* 태블릿 */
@media (max-width: 768px) {
  /* 상단 네비 숨김 시 여백 */
  .tb-nav, .header-nav { display: none !important; }

  /* CTA 버튼 스택 */
  .cta-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-btns .btn-main,
  .cta-btns .btn-ghost {
    text-align: center;
  }
}

/* ══════════════════════════
   인쇄 스타일
══════════════════════════ */
@media print {
  #topbar,
  header,
  nav,
  .hub-panel,
  .hub-overlay,
  .mobile-tabs,
  .sidebar,
  .input-area,
  .tb-cta,
  .btn-start,
  canvas,
  #canvas-bg,
  #noise,
  #vignette,
  #scanlines,
  .hud-corner {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .bbl, .sc-main-card, .log-panel {
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
  }

  @page { margin: 2cm; }
}