/* ============================================================
   TITAN VPN — 2026 리디자인 (aws14 프리뷰)
   [2026-08-24] TITAN-REDESIGN-2026

   설계 원칙:
   - 이 파일은 style.css / bootstrap.min.css 뒤에 로드되는 '덮어쓰기' 시트다.
     기존 마크업과 JS(id·onclick·클래스)를 하나도 건드리지 않고 외형만 바꾼다.
     결제 페이지(price.html)의 1,900줄짜리 결제 로직을 안전하게 두기 위한 선택.
   - 색/타입/간격은 아래 토큰만 쓴다. 하드코딩 금지.
   ============================================================ */

:root {
  /* 배경 계층 */
  --t-bg:        #0e1020;
  --t-surface:   #171a2e;
  --t-surface-2: #1a2038;
  --t-surface-3: #1c2038;
  --t-line:      rgba(255, 255, 255, 0.07);
  --t-line-2:    rgba(255, 255, 255, 0.14);

  /* 텍스트 — 전부 본문 대비(AA) 통과하는 값만 둔다 */
  --t-fg:        #f4f6ff;
  --t-fg-2:      #a7adc4;
  --t-fg-3:      #9aa2bb;
  --t-fg-4:      #8b91a8;

  /* 액센트 */
  --t-accent:      #5aa9ff;
  --t-accent-ink:  #08101c;
  --t-accent-tint: rgba(90, 169, 255, 0.14);
  --t-accent-soft: rgba(90, 169, 255, 0.08);
  --t-accent-line: rgba(90, 169, 255, 0.26);

  --t-ok:      #4ade9b;
  --t-warn:    #ffb37a;
  --t-warn-bg: rgba(255, 159, 90, 0.1);
  --t-warn-ln: rgba(255, 159, 90, 0.26);
  --t-danger:  #ff7a8a;

  /* 라운드 / 간격 */
  --t-r-sm: 6px;
  --t-r:    9px;
  --t-r-lg: 14px;
  --t-r-xl: 18px;

  --t-font: 'IBM Plex Sans KR', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --t-display: 'Space Grotesk', var(--t-font);
}

/* ── 기본 ───────────────────────────────────────────── */
body {
  background: var(--t-bg) !important;
  color: var(--t-fg) !important;
  font-family: var(--t-font) !important;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--t-display);
  color: var(--t-fg);
  letter-spacing: -0.02em;
  font-weight: 700;
}

p, span, div, li, td, th, label { color: inherit; }

a { color: #7fd3ff; }
a:hover, a:focus { color: #a5e3ff; text-decoration: none; }

hr { border-color: var(--t-line) !important; }

.t-num {
  font-family: var(--t-display);
  font-variant-numeric: tabular-nums;
}

/* 밝은 배경 유틸을 전부 어둡게 뒤집는다 */
.white-bg, .bg-white, .card, .modal-content {
  background: var(--t-surface) !important;
  color: var(--t-fg) !important;
  border-color: var(--t-line) !important;
}
.gray-light-bg, .bg-light { background: var(--t-surface-2) !important; }
.shadow-sm, .shadow { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; }
.rounded { border-radius: var(--t-r-lg) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--t-line) !important; }
.text-dark, .text-black { color: var(--t-fg) !important; }
.text-muted, .text-secondary { color: var(--t-fg-3) !important; }

/* ── 헤더 ───────────────────────────────────────────── */
.t26-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(14, 16, 32, 0.92);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--t-line);
}
.t26-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.t26-brand { display: flex; align-items: center; gap: 12px; }
.t26-brand-name {
  font-family: var(--t-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--t-fg);
}
.t26-nav { display: flex; align-items: center; gap: 24px; }
.t26-nav a { font-size: 14px; color: var(--t-fg-2); font-weight: 400; }
.t26-nav a:hover { color: var(--t-fg); }
.t26-nav a.is-active { color: var(--t-fg); font-weight: 500; }

.t26-lang {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--t-line-2);
  border-radius: var(--t-r-sm);
  padding: 3px;
  font-size: 12px; font-weight: 500;
}
.t26-lang a { padding: 4px 10px; border-radius: var(--t-r-sm); color: var(--t-fg-3); }
.t26-lang a.is-active { background: rgba(255, 255, 255, 0.1); color: var(--t-fg); }

/* ── 버튼 ───────────────────────────────────────────── */
.t26-btn,
.btn.solid-btn,
.btn-primary,
.btn-brand {
  background: var(--t-accent) !important;
  border: none !important;
  color: var(--t-accent-ink) !important;
  font-weight: 600;
  border-radius: var(--t-r) !important;
  padding: 14px 28px;
  font-size: 15px;
  transition: filter 0.15s ease;
  box-shadow: none !important;
}
.t26-btn:hover,
.btn.solid-btn:hover,
.btn-primary:hover { filter: brightness(1.08); color: var(--t-accent-ink) !important; }

.t26-btn-ghost,
.btn-outline-brand,
.btn-outline-primary,
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--t-line-2) !important;
  color: var(--t-fg) !important;
  font-weight: 500;
  border-radius: var(--t-r) !important;
  padding: 13px 26px;
}
.t26-btn-ghost:hover,
.btn-outline-brand:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--t-fg) !important; }

.btn-block { display: block; width: 100%; }

/* ── 폼 ─────────────────────────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--t-line-2) !important;
  color: var(--t-fg) !important;
  border-radius: var(--t-r) !important;
  padding: 12px 15px;
  height: auto;
  font-size: 14px;
}
.form-control:focus, select:focus, input:focus, textarea:focus {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 3px var(--t-accent-soft) !important;
  color: var(--t-fg) !important;
  outline: none;
}
.form-control::placeholder { color: var(--t-fg-4) !important; }
select.form-control option { background: var(--t-surface-3); color: var(--t-fg); }
select.form-control optgroup { background: var(--t-surface-3); color: var(--t-fg-3); font-weight: 600; }
label { color: var(--t-fg-2); font-weight: 400; }

/* ── 뱃지 ───────────────────────────────────────────── */
.badge {
  border-radius: var(--t-r-sm) !important;
  font-weight: 600;
  letter-spacing: 0;
  padding: 5px 10px;
}
.badge-success, .badge-pill.badge-success {
  background: var(--t-accent) !important;
  color: var(--t-accent-ink) !important;
}
.badge-primary { background: var(--t-accent) !important; color: var(--t-accent-ink) !important; }
.badge-warning { background: var(--t-warn) !important; color: var(--t-accent-ink) !important; }
.badge-danger  { background: var(--t-danger) !important; color: var(--t-accent-ink) !important; }

/* 요금표에서 쓰는 커스텀 뱃지 */
.p-bad {
  display: inline-block;
  border-radius: var(--t-r-sm);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: var(--t-fg-2);
  margin-left: 8px;
}
.p-bad-blue  { background: var(--t-accent-tint); color: #9fd0ff; }
.p-bad-green { background: rgba(74, 222, 155, 0.16); color: var(--t-ok); }
.p-bad-pub   { background: rgba(255, 255, 255, 0.08); color: var(--t-fg-2); }

/* ── 카드 / 선택 타일 (price.html · index.html 공용) ── */
.testimonial-quote-wrap,
.single-promo-card,
.pricing-header,
.card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r-lg) !important;
  color: var(--t-fg) !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.testimonial-quote-wrap.hacky:hover,
.testimonial-quote-wrap.hackx:hover,
.single-promo-hover:hover {
  border-color: var(--t-accent) !important;
  background: var(--t-surface-2) !important;
  cursor: pointer;
}
/* 기존 JS 가 선택 시 붙이는 상태 클래스 */
.testimonial-quote-wrap.active,
.testimonial-quote-wrap.on,
.testimonial-quote-wrap.selected {
  border-color: var(--t-accent) !important;
  background: var(--t-accent-tint) !important;
}
.author-info h5, .media-body h5 { color: var(--t-fg) !important; font-size: 16px; }
.ref-img, .rounded-circle { background: rgba(255, 255, 255, 0.06); }

.price, .fcb { color: var(--t-fg) !important; font-family: var(--t-display); }
.card-header { background: transparent !important; border-bottom: 1px solid var(--t-line) !important; }

/* ── 결제 페이지 대납 UI ─────────────────────────────── */
#proxy_lookup_box {
  background: var(--t-accent-soft) !important;
  border: 1px solid var(--t-accent-line) !important;
  border-radius: var(--t-r-lg) !important;
}
#proxy_pg_notice {
  background: var(--t-warn-bg) !important;
  border: 1px solid var(--t-warn-ln) !important;
  border-radius: var(--t-r) !important;
  color: var(--t-warn) !important;
}
#proxy_pg_notice b, #proxy_pg_notice strong { color: var(--t-warn) !important; }
#ext_account_status { color: var(--t-accent) !important; }
#proxy_lookup_result { color: var(--t-fg-2); }

/* ── 푸터 ───────────────────────────────────────────── */
.t26-footer {
  border-top: 1px solid var(--t-line);
  background: var(--t-bg);
  margin-top: 72px;
}
.t26-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.t26-footer a, .t26-footer span { font-size: 13px; color: var(--t-fg-3); }
.t26-footer a:hover { color: var(--t-fg); }
.t26-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

/* ── 페이지 셸 ──────────────────────────────────────── */
.t26-page { max-width: 1440px; margin: 0 auto; padding: 48px 40px 0; }
.t26-page-title { font-size: 34px; margin: 0 0 8px; }
.t26-page-sub { font-size: 14px; color: var(--t-fg-3); margin: 0 0 32px; }

.t26-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--t-accent); margin-bottom: 12px;
}

/* 기존 섹션 여백 정리 */
section, .section-padding, .py-5 { background: transparent !important; }

/* SweetAlert2 를 다크에 맞춤 */
.swal2-popup { background: var(--t-surface) !important; color: var(--t-fg) !important; border-radius: var(--t-r-lg) !important; }
.swal2-title, .swal2-html-container, .swal2-content { color: var(--t-fg) !important; }
.swal2-styled.swal2-confirm { background: var(--t-accent) !important; color: var(--t-accent-ink) !important; border-radius: var(--t-r) !important; }
.swal2-styled.swal2-cancel { background: rgba(255,255,255,0.1) !important; color: var(--t-fg) !important; border-radius: var(--t-r) !important; }

/* 테이블 */
table { color: var(--t-fg) !important; }
.table thead th { border-bottom: 1px solid var(--t-line) !important; color: var(--t-fg-3) !important; font-weight: 600; }
.table td, .table th { border-top: 1px solid var(--t-line) !important; }

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .t26-header-inner { padding: 14px 20px; flex-wrap: wrap; }
  .t26-nav { gap: 16px; order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .t26-page { padding: 32px 20px 0; }
  .t26-page-title { font-size: 26px; }
  .t26-footer-inner { padding: 24px 20px; }
}
@media (max-width: 575px) {
  .t26-nav a { font-size: 13px; }
  .t26-btn, .btn.solid-btn { padding: 13px 20px; font-size: 14px; }
  /* 모바일 터치 타깃 최소 44px 보장 */
  .t26-nav a, .t26-lang a, .btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   세부 페이지 (sub pages) — 2026-08-24 2차 패스
   1차에서는 상속만 바꿔 '어둡게 칠한 옛 페이지'가 됐다.
   여기서 배너·테이블·아코디언·폼을 실제로 다시 그린다.
   마크업은 건드리지 않고 CSS 로만 처리한다(결제 로직 보호).
   ============================================================ */

/* ── ① 보라색 히어로 배너 제거 → 담백한 페이지 헤더 ──────────
   .hero-section 은 인라인 style 로 배경이미지가 박혀 있어 !important 가 필요하다. */
.hero-section.background-img,
.hero-section.ptb-100 {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.hero-section.background-img::before,
.hero-section.background-img::after { display: none !important; }

.hero-section .page-header-content {
  text-align: left !important;
  padding: 56px 0 28px !important;
  border-bottom: 1px solid var(--t-line);
  margin-bottom: 8px;
}
.hero-section .page-header-content h1,
.hero-section h1.text-white {
  color: var(--t-fg) !important;
  font-family: var(--t-display);
  font-size: 38px !important;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 !important;
  text-align: left !important;
}
.hero-section .page-header-content p,
.hero-section .page-header-content .lead {
  color: var(--t-fg-3) !important;
  font-size: 15px;
  margin: 10px 0 0 !important;
  text-align: left !important;
}
/* 헤더 컬럼이 가운데 정렬로 좁아져 있던 것을 폭 전체로 */
.hero-section .row.justify-content-center,
.hero-section .row.align-items-center { justify-content: flex-start !important; }
.hero-section [class*="col-"] { max-width: 100% !important; flex: 0 0 100% !important; }

/* ── ② 본문 섹션 여백·배경 정리 ───────────────────────── */
.ptb-100 { padding-top: 40px !important; padding-bottom: 64px !important; }
.ptb-50  { padding-top: 32px !important; padding-bottom: 48px !important; }
.gray-light-bg, .contact-us, .faq-section, .customer-review-section, .testimonial-section {
  background: transparent !important;
}
.container { max-width: 1200px !important; padding-left: 40px; padding-right: 40px; }
.main > section:first-child .container { padding-bottom: 0; }

/* 테이블이 .row 안에 col 없이 들어있어 flex 로 찌그러지는 것 방지 */
.contact-us .row { display: block !important; }

/* ── ③ 표 — 실제로 다시 그린다 ──────────────────────────
   기존: table-bordered 로 모든 칸에 테두리 → 격자무늬. 숫자 정렬도 없음. */
.table, .see-table, .ss-table {
  width: 100%;
  margin: 0 0 40px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r-lg) !important;
  overflow: hidden;
  font-size: 14px;
}
.table th, .table td,
.see-table th, .see-table td,
.ss-table th, .ss-table td {
  border: none !important;
  border-bottom: 1px solid var(--t-line) !important;
  padding: 15px 20px !important;
  vertical-align: middle;
  color: var(--t-fg-2);
}
.table thead th, .see-table thead th, .ss-table thead th,
.table .thead-light th, .thead-light th {
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--t-fg-4) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--t-line-2) !important;
  white-space: nowrap;
}
.table tbody tr:last-child td,
.see-table tbody tr:last-child td,
.ss-table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr, .see-table tbody tr, .ss-table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover, .see-table tbody tr:hover, .ss-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}
.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }

/* 첫 칸은 라벨, 나머지는 숫자 → 숫자는 오른쪽 정렬 + 고정폭 숫자 */
.see-table td:first-child, .see-table th:first-child { color: var(--t-fg) !important; font-weight: 500; }
.see-table td:not(:first-child), .see-table th:not(:first-child) {
  text-align: right !important;
  font-family: var(--t-display);
  font-variant-numeric: tabular-nums;
  color: var(--t-fg) !important;
}
/* 괄호 안 부연(무통장입금 등)은 한 단계 약하게 */
.see-table td:not(:first-child) { font-size: 14px; }

/* ── ④ 표 위의 알약 뱃지 → 섹션 제목으로 격상 ───────────
   기존: 작은 파란 알약이 표 위에 떠 있어 제목처럼 안 읽혔다. */
.contact-us .badge-pill,
.contact-us .badge.badge-success {
  display: block !important;
  background: transparent !important;
  color: var(--t-fg) !important;
  font-family: var(--t-display);
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  padding: 0 0 0 14px !important;
  margin: 8px 0 16px !important;
  border-left: 3px solid var(--t-accent);
  border-radius: 0 !important;
  text-align: left;
  line-height: 1.4;
}

/* ── ⑤ FAQ 아코디언 ───────────────────────────────────── */
.faq-card, .faq-section .card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r-lg) !important;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-card .card-header, .faq-section .card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 18px 22px !important;
  cursor: pointer;
  font-weight: 500;
  color: var(--t-fg) !important;
  font-size: 15px;
  transition: background 0.12s ease;
}
.faq-card .card-header:hover { background: rgba(255, 255, 255, 0.04) !important; }
.faq-card .card-header[aria-expanded="true"] { color: var(--t-accent) !important; }
.faq-card .card-body, .faq-section .card-body {
  padding: 4px 22px 20px !important;
  color: var(--t-fg-3) !important;
  font-size: 14px;
  line-height: 1.75;
  border-top: 1px solid var(--t-line);
  padding-top: 18px !important;
}

/* ── ⑥ 다운로드 / 소개 카드 ──────────────────────────── */
.single-promo-card, .download-card, .about-content-left, .about-content-right {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r-lg) !important;
  padding: 24px !important;
}
.download-btn, .btn-download { border-radius: var(--t-r) !important; }

/* ── ⑦ 서버 현황 ─────────────────────────────────────── */
.ss-section { padding: 0 0 64px !important; }
.ss-section h2 {
  font-family: var(--t-display); font-size: 30px; color: var(--t-fg);
  padding: 40px 0 24px; margin: 0; letter-spacing: -0.02em;
}
.ss-table td:not(:first-child), .ss-table th:not(:first-child) { text-align: right !important; }
.ss-table .ss-ok, .ss-table .ok { color: var(--t-ok) !important; font-weight: 600; }
.ss-table .ss-bad, .ss-table .bad { color: var(--t-danger) !important; font-weight: 600; }

/* ── ⑧ 마이페이지 / 거래이력 등 폼·리스트 ────────────── */
.login-signup-wrap {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r-xl) !important;
  padding: 36px !important;
  max-width: 480px;
  margin: 40px auto !important;
}
.login-signup-wrap h1, .login-signup-wrap h2 { text-align: left !important; font-size: 28px; margin-bottom: 8px; }
.input-group.input-group-merge { position: relative; }
.input-group .input-icon { display: none !important; }  /* 아이콘 겹침 제거 */
.form-text, .small { color: var(--t-fg-3) !important; }

/* 로그인/가입 페이지의 전체화면 히어로도 정리 */
.hero-section.full-screen { min-height: 0 !important; height: auto !important; }
.hero-section.full-screen .bg-cover, .background-img.vh-100 { display: none !important; }

/* ── ⑨ 반응형 ────────────────────────────────────────── */
@media (max-width: 991px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .hero-section .page-header-content { padding: 32px 0 20px !important; }
  .hero-section .page-header-content h1, .hero-section h1.text-white { font-size: 26px !important; }
  .ptb-100 { padding-top: 24px !important; padding-bottom: 40px !important; }
  /* 표는 가로 스크롤 (페이지 자체는 가로로 안 밀리게) */
  .table, .see-table, .ss-table { display: block; overflow-x: auto; white-space: nowrap; }
  .login-signup-wrap { padding: 24px !important; margin: 24px auto !important; }
}

/* ── 페이지 헤더 (보라 배너 대체) ─────────────────────── */
.t26-pagehead { border-bottom: 1px solid var(--t-line); }
.t26-pagehead-in { max-width: 1200px; margin: 0 auto; padding: 56px 40px 28px; }
.t26-pagehead h1 {
  font-family: var(--t-display); font-size: 38px; font-weight: 700;
  letter-spacing: -0.022em; color: var(--t-fg); margin: 0;
}
.t26-pagehead p { font-size: 15px; color: var(--t-fg-3); margin: 10px 0 0; max-width: 620px; line-height: 1.7; }
@media (max-width: 991px) {
  .t26-pagehead-in { padding: 32px 20px 20px; }
  .t26-pagehead h1 { font-size: 27px; }
}