/* =========================================================
   Support 페이지와 디자인 맞춤 (10/15)
   - 색 · 헤더 · 상단 밴드 · 선택 상태를 Support(assets/support.css)와 같게
   - 화면에만 적용 : 인쇄(PDF) 문서는 기존 디자인 유지
   ========================================================= */
@media screen {
  :root {
    --accent: #1a56db; --accent-strong: #1646b8; --accent-soft: #eaf1fe; --accent-softer: #f4f8ff; --accent-line: #c9dafc;
    --text: #1e293b; --text-sub: #5b6475; --text-mute: #8b94a6; --heading: #0f172a;
    --bg: #f5f7fb; --border: #e5e9f1; --border-soft: #eef1f6; --telta-navy: #0f172a;
  }
  /* 헤더 : 흰 바탕 + 심볼 잠금형 */
  /* 폭 · 여백을 Support 메인 · Interview Pro 온보딩과 같게 (콘텐츠 1152px + 좌우 여백 최대 64px) → 로고 · 본문 시작 위치가 일치 */
  :root { --wrap: 1152px; --gutter: clamp(16px, 5vw, 64px); }
  .wrap, .hero.v3 .wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); }
  .site-header { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--border); height: 65px;
    padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
  .hero.v3 { padding-bottom: clamp(44px, 6vw, 64px); }
  .brand { gap: 10px; }
  .logo-mark { width: 32px; height: 32px; display: block; }
  .logo-txt { display: flex; flex-direction: column; line-height: 1.1; }
  .logo-txt b { font-size: 17px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; }
  .logo-txt small { margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--text-sub); }
  .htool { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; color: var(--text); background: none; border: 1px solid transparent; }
  .htool:hover { background: var(--bg); border-color: transparent; color: var(--accent); }
  .htool.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .htool.primary:hover { background: var(--accent-strong); color: #fff; }
  @media (max-width: 760px){ .htool:not(.primary) { display: none; } .htool.primary { width: auto; padding: 0 12px; } .htool.primary .ht-label { position: static; width: auto; height: auto; clip: auto; } }

  /* 상단 밴드 : Support 와 같은 남색-파랑 + 옅은 격자 */
  .hero.v3 { background: radial-gradient(70% 120% at 85% 0%, rgba(80,130,255,.45), transparent 60%), linear-gradient(135deg, #0c1f4d 0%, #12307a 100%); }
  .hero.v3::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
  .hero.v3 .crumb { margin-bottom: 18px; font-size: 14px; color: rgba(255,255,255,.6); }
  .hero.v3 .crumb a:hover { color: #fff; }
  .hero.v3 .crumb span { margin: 0 6px; }
  .hn-kicker { color: #8fb2ff; }
  .hero.v3 .search input { border-radius: 14px; }
  .hero.v3 .search input:focus { box-shadow: 0 0 0 4px rgba(143,178,255,.45), 0 10px 30px rgba(0,0,0,.18); }
  .hero.v3 .faq-chip, .hero.v3 .faq-chip:hover { border-radius: 999px; border-color: transparent; }   /* 검색창 아래 칩 : 테두리 없이 */

  /* 본문 : 둥근 패널 대신 Support 처럼 평평하게 이어짐 */
  .panel { margin-top: 0; border-radius: 0; padding-top: clamp(32px, 4vw, 48px); }
  .eyebrow { color: var(--accent); letter-spacing: .06em; }

  /* 유형 탭 · 단계 카드 : Support 의 제품 선택과 같은 선택 표시 */
  .type-tab { border-radius: 14px; }
  .type-tab[aria-selected="true"] { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(15,23,42,.08); }
  .type-tab[aria-selected="true"] b { color: var(--accent); }
  .type-tab[aria-selected="true"] small { color: var(--text-sub); }
  .flow-card { border-radius: 16px; }
  .stage-card { border-radius: 18px; }
  .stage-wrap { background: #e8edf6; }
  .pop { background: #0f172a; }
  .pop-kicker { color: #8fb2ff; }
  .btn { border-radius: 10px; }
  .faq-item { border-radius: 14px; border-color: #dfe7f7; box-shadow: none; }
  .faq-item.open { border-color: #c7d6f5; }
  .contact-card { border-radius: 16px; }

  .site-footer { border-top: 0; }
  .site-footer .brand-mini img { width: 18px; height: 18px; opacity: .55; }
}