/* =========================================================
   UiPartners Theme — 서브페이지를 메인 톤으로 (2026-10-23)
   - pages.css·home.css 다음에 로드. body.ui-sub(테마 서브페이지)에만 적용
   - 밝은 구역(.ui-section--light)이 쓰던 밝은 색 변수를 어두운 값으로 바꿔 끼우고,
     흰색을 직접 쓴 곳만 따로 덮는다
   ========================================================= */

.ui-sub {
  --ui-light: #070b14;
  --ui-light-2: rgba(255, 255, 255, .04);
  --ui-ink: #ffffff;
  --ui-ink-2: #a9b4c8;
  --ui-ink-3: #7f8aa0;
  --ui-ink-line: rgba(255, 255, 255, .09);
  --ui-brand-dark: #38c4ff;
  --ui-shadow-light: none;
  background: var(--ui-bg);
}

/* ---------- 상단 (메인 히어로 부품을 낮게) ---------- */
.hm-hero--sub {
  min-height: 0;
  /* 메인(여러 색 그라데이션)과 다른 바탕: 기존 청록 빛 */
  background:
    radial-gradient(120% 70% at 50% 120%, rgba(0, 171, 240, .16) 0%, rgba(5, 7, 13, 0) 60%),
    var(--ui-bg);
  padding: calc(var(--ui-header-h) + clamp(56px, 8vw, 110px)) 0 clamp(72px, 9vw, 120px);
}
.hm-hero--sub .hm-hero__inner { padding-bottom: 0; }
.hm-hero--sub .ui-breadcrumb { margin-bottom: 26px; }
.hm-hero__title--sub { max-width: none; font-size: clamp(36px, 5.6vw, 80px); line-height: 1.1; }
.hm-hero__title--sub .ui-grad-text { color: var(--ui-brand-2); }
.hm-hero--sub .hm-hero__sub { max-width: 760px; margin-top: 26px; font-size: clamp(16px, 1.3vw, 19px); }

/* ---------- 구역 · 제목 ---------- */
.ui-sub .ui-section { border-top: 1px solid var(--ui-line); }
.ui-sub .ui-section--light,
.ui-sub .ui-section--deep { background: #070b14; }
.ui-sub .ui-eyebrow { gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.ui-sub .ui-eyebrow::before { width: 28px; }
.ui-sub .ui-h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.16; color: #fff; text-wrap: balance; }
.ui-sub .ui-h3 { letter-spacing: -.025em; }
.ui-sub .ui-grad-text { color: var(--ui-brand-2); }

/* ---------- 카드 ---------- */
.ui-sub .ui-card,
.ui-sub .ui-section--light .ui-card,
.ui-sub .ui-feature,
.ui-sub .ui-aimod,
.ui-sub .ui-glossary > div {
  border: 1px solid var(--ui-line);
  border-radius: 26px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  box-shadow: none;
}
.ui-sub .ui-card:hover,
.ui-sub .ui-feature:hover { border-color: var(--ui-line-2); }
.ui-sub .ui-section--light .ui-iconcard__icon { background: none; color: var(--ui-brand-2); }
.ui-sub .ui-feature__icon,
.ui-sub .ui-section--light .ui-points__icon { background: var(--ui-brand-soft); color: #9fe3ff; }
.ui-sub .ui-feature__quote { background: rgba(56, 196, 255, .06); }
.ui-sub .ui-section--light .ui-badge--gold { color: var(--ui-gold); background: var(--ui-gold-soft); border-color: rgba(217, 180, 108, .35); }

/* 기능 목록 옆 바로가기 */
.ui-sub .ui-toc a:hover,
.ui-sub .ui-toc a.is-active { background: rgba(255, 255, 255, .06); color: #fff; }

/* FAQ */
.ui-sub .ui-faq__item,
.ui-sub .ui-section--light .ui-faq__item { border-color: var(--ui-line); background: rgba(255, 255, 255, .025); }
.ui-sub .ui-section--light .ui-faq__item[open] { border-color: rgba(56, 196, 255, .4); background: rgba(56, 196, 255, .05); }
.ui-sub .ui-faqpage__aside { background: linear-gradient(170deg, rgba(56, 196, 255, .12), rgba(111, 108, 255, .08)); border: 1px solid var(--ui-line-2); }

/* 표 */
.ui-sub .ui-compare { background: rgba(255, 255, 255, .03); border: 1px solid var(--ui-line); }
.ui-sub .ui-prose th { background: rgba(255, 255, 255, .04); }

/* 작은 목록 */
.ui-sub .ui-chainmini li { background: rgba(255, 255, 255, .04); color: var(--ui-text); }
.ui-sub .ui-chainmini span { color: var(--ui-bg); }
.ui-sub .ui-taglist--light li { background: rgba(255, 255, 255, .04); }

/* 테두리 버튼: 밝은 구역 전용 색을 어두운 바탕에 맞춤 */
.ui-sub .ui-btn--outline:hover { background: #fff; color: var(--ui-bg); border-color: #fff; }

/* ---------- 문의 폼 ---------- */
.ui-sub .ui-field input,
.ui-sub .ui-field select,
.ui-sub .ui-field textarea {
  background: rgba(255, 255, 255, .04);
  border-color: var(--ui-line-2);
  color: #fff;
}
.ui-sub .ui-field input::placeholder,
.ui-sub .ui-field textarea::placeholder { color: var(--ui-text-3); }
.ui-sub .ui-field input:focus,
.ui-sub .ui-field select:focus,
.ui-sub .ui-field textarea:focus { background: rgba(255, 255, 255, .06); border-color: var(--ui-brand); }
.ui-sub .ui-field select option { color: #111827; background: #fff; }
.ui-sub .ui-field--captcha #captcha button { background: rgba(255, 255, 255, .06); border-color: var(--ui-line-2); color: var(--ui-text); }
.ui-sub .ui-form {
  background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  border: 1px solid var(--ui-line-2);
  box-shadow: none;
  color: var(--ui-text);
}
.ui-sub .ui-field label span { color: #fb923c; }
.ui-sub .ui-field__error { color: #fca5a5 !important; }
.ui-sub .ui-field--captcha #captcha { border-color: var(--ui-line-2); }
.ui-sub .ui-field--captcha #captcha_key { background: rgba(255, 255, 255, .04); border-color: var(--ui-line-2); color: #fff; }
.ui-sub .ui-field--captcha #captcha_img { background: #fff; }
.ui-sub .ui-compare--cost tr.is-focus th,
.ui-sub .ui-compare--cost tr.is-focus td:not(.is-premium) { background: rgba(56, 196, 255, .08); }