/* URL.KR v2 - 기본 규칙·공통 컴포넌트
   페이지 골격(.hv2-page)·리셋·유틸·아이콘·타이포·버튼·배지. 모든 v2 프런트 화면이 공유한다.
   토큰은 tokens.css, 헤더·푸터·퀵메뉴는 layout.css, 메인 전용은 home.css. */

.hv2-page {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}
.hv2-page *, .hv2-page *::before, .hv2-page *::after { box-sizing: border-box; }
.hv2-page [hidden] { display: none !important; }
.hv2-page :where(h1, h2, h3, h4, p, ul, ol, dl) { margin: 0; }
.hv2-page :where(ul, ol) { padding: 0; list-style: none; }
/* 리셋은 :where() 로 특이도 0 을 유지한다 - 안 그러면 요소 이름이 붙은 리셋이
   단일 클래스 컴포넌트 규칙을 이겨서 버튼·링크 색이 통째로 무시된다. */
:where(.hv2-page) :where(a) { color: inherit; text-decoration: none; text-underline-offset: 3px; }
:where(.hv2-page) :where(button, input) { font: inherit; color: inherit; }
:where(.hv2-page) :where(button) { cursor: pointer; }
.hv2-page button:disabled { cursor: not-allowed; }
:where(.hv2-page) :where(img) { max-width: 100%; height: auto; }
.hv2-page ::selection { background: var(--accent-soft); color: var(--heading); }
.hv2-page :where(a, button, input, summary) { -webkit-tap-highlight-color: rgb(209 69 21 / 12%); }
.hv2-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hv2-page :where(a, button) { transition: color var(--dur), background-color var(--dur), border-color var(--dur), box-shadow var(--dur), transform var(--dur); }

.hv2-wrap { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.hv2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hv2-skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 18px; font-weight: 700; color: var(--heading); }
.hv2-skip:focus { top: 12px; }

/* ── 아이콘 ───────────────────────────────────────────── */
@font-face {
    font-family: hv2-icons;
    /* 이 파일은 css/v2/ 에 있으므로 두 단계 올라간다. ../fonts/ 로 쓰면 css/fonts/ 를 찾아 아이콘이 전부 사라진다(2026-09-18 실제 발생). */
    src: url('../../fonts/bootstrap-icons.woff2') format('woff2');
    font-display: block;
}

.hv2-icon { display: inline-block; width: 1em; height: 1em; flex: none; font-family: hv2-icons; font-size: 1em; font-style: normal; font-weight: 400; line-height: 1; vertical-align: -.125em; }
.hv2-i-bolt::before { content: '\f46c'; }
.hv2-i-link::before { content: '\f470'; }
.hv2-i-arrow::before { content: '\f138'; }
.hv2-i-out::before { content: '\f144'; }
.hv2-i-check::before { content: '\f272'; }
.hv2-i-done::before { content: '\f26a'; }
.hv2-i-copy::before { content: '\f290'; }
.hv2-i-close::before { content: '\f659'; }
.hv2-i-menu::before { content: '\f479'; }
.hv2-i-shield::before { content: '\f52f'; }
.hv2-i-graph::before { content: '\f673'; }
.hv2-i-send::before { content: '\f6b9'; }
.hv2-i-cut::before { content: '\f528'; }
.hv2-i-qr::before { content: '\f6ae'; }
.hv2-i-dice::before { content: '\f2fb'; }
.hv2-i-truck::before { content: '\f5ea'; }
.hv2-i-ask::before { content: '\f504'; }
.hv2-i-chat::before { content: '\f249'; }
.hv2-i-clock::before { content: '\f292'; }
.hv2-i-patch::before { content: '\f4b5'; }
.hv2-i-type::before { content: '\f5f7'; }
.hv2-i-image::before { content: '\f36d'; }
.hv2-i-asterisk::before { content: '\f151'; }
.hv2-i-key::before { content: '\f44f'; }
.hv2-i-globe::before { content: '\f3ee'; }
.hv2-i-question::before { content: '\f505'; }
.hv2-i-robot::before { content: '\f6b1'; }
.hv2-i-headset::before { content: '\f414'; }
.hv2-i-up::before { content: '\f286'; }
.hv2-i-eye::before { content: '\f341'; }
.hv2-i-eye-off::before { content: '\f340'; }

/* ── 타이포 ───────────────────────────────────────────── */
.hv2-h1 { font-size: clamp(34px, 6.4vw, 66px); font-weight: 800; line-height: 1.08; letter-spacing: -.022em; color: var(--heading); }
.hv2-h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1.18; letter-spacing: -.022em; color: var(--heading); }
.hv2-h3 { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; color: var(--heading); }
.hv2-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--muted); }
.hv2-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); }
/* 형광펜 강조 - 밑줄보다 부드럽고 핵심 검색어를 눈에 띄게 한다. 메인 히어로와 서브페이지 머리가 같이 쓴다. */
.hv2-hl { background-image: linear-gradient(rgb(209 69 21 / 18%), rgb(209 69 21 / 18%)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% .34em; }

/* ── 버튼 ─────────────────────────────────────────────── */
.hv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--r-md); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.hv2-btn--primary { background: var(--accent); color: #fff; }
.hv2-btn--primary:hover { background: var(--accent-deep); }
.hv2-btn--ink { background: var(--heading); color: #fff; }
.hv2-btn--ink:hover { background: #1c3132; }
.hv2-btn--outline { background: transparent; color: var(--heading); border-color: var(--heading); }
.hv2-btn--outline:hover { background: var(--heading); color: #fff; }
.hv2-btn--quiet { background: var(--surface); color: var(--heading); border-color: var(--border); }
.hv2-btn--quiet:hover { border-color: var(--heading); }
.hv2-btn--onband { background: transparent; color: #fff; border-color: var(--border-invert); }
.hv2-btn--onband:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 40%); }
.hv2-btn[aria-busy='true'] { background: var(--accent-deep); }
.hv2-btn:disabled { opacity: .72; }

.hv2-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.hv2-textlink:hover { text-decoration: underline; }
.hv2-textlink .hv2-icon { font-size: .95em; transition: transform var(--dur); }
.hv2-textlink:hover .hv2-icon { transform: translateX(2px); }

.hv2-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--r-pill); padding: 5px 13px; font-size: 13px; font-weight: 700; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .hv2-wrap { width: min(1140px, calc(100% - 40px)); }
}
@media (max-width: 600px) {
    .hv2-wrap { width: min(1140px, calc(100% - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
    .hv2-page *, .hv2-page *::before, .hv2-page *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media (forced-colors: active) {
    .hv2-icon { forced-color-adjust: auto; }
}

/* ── 플랜 카드(메인 회원 안내 · 요금안내가 같이 쓴다) ──────────── */
.hv2-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 44px auto 0; }
.hv2-plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 28px; }
/* 추천 카드는 테두리가 1px 두꺼우므로 padding 에서 1px 빼 두 카드의 내용 폭을 맞춘다. */
.hv2-plan--pick { border: 2px solid var(--accent); padding: 29px 27px; }
.hv2-plan-badge { position: absolute; top: -13px; left: 27px; padding: 5px 12px; background: var(--accent); color: #fff; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1.5; }
.hv2-plan-name { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--heading); }
.hv2-plan-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.hv2-plan--pick .hv2-plan-sub { color: var(--accent-ink); font-weight: 700; }
/* 아래 여백은 CTA 와의 최소 간격이다. CTA 가 없는 카드(비회원)에서는 군더더기라 뺀다. */
.hv2-plan-list { display: grid; gap: 12px; margin: 20px 0 24px; }
.hv2-plan-list:last-child { margin-bottom: 0; }
.hv2-plan-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.hv2-plan-list .hv2-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; }
.hv2-plan-list b { font-weight: 700; color: var(--heading); }
/* 제공되지 않는 항목 - 비교표의 '–' 자리. 숨기지 않고 낮춰서 보여 준다. */
.hv2-plan-no { color: var(--muted); }
.hv2-plan-no .hv2-icon { background: var(--border-soft); color: var(--faint); }
.hv2-plan-cta { width: 100%; margin-top: auto; }
@media (max-width: 991px) {
    /* 상품 카드는 3열로 좁히면 문구가 뭉개진다. 태블릿부터 한 줄에 하나씩 쌓는다. 배지가 카드 위로 13px 올라오므로 세로 간격도 함께 벌린다. */
    .hv2-plans { grid-template-columns: 1fr; gap: 30px; margin-top: 38px; }
}
@media (forced-colors: active) {
    .hv2-plan { border: 1px solid CanvasText; }
}

/* ── 섹션 머리(가운데 정렬 눈썹·제목·리드 - 메인·요금안내 공용) ───── */
.hv2-section-head { max-width: 640px; margin-inline: auto; text-align: center; }
.hv2-section-head .hv2-h2 { margin-top: 14px; }
.hv2-section-head .hv2-lead { margin-top: 14px; font-size: 17px; }

/* ── 광고 틀(메인·안내 페이지 공용 - 랜덤 배너를 담는다) ──────── */
.hv2-ads { padding: 32px 0; }
.hv2-ad { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 18px 20px; }
.hv2-ad + .hv2-ad { margin-top: 16px; }
.hv2-ad-label { position: absolute; top: -9px; left: 18px; background: var(--surface); padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.hv2-ad-slot { min-width: 0; }
.hv2-ad-sample { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--muted); }
.hv2-ad-sample b { color: var(--heading); }
.hv2-ad-sample--image { min-height: 128px; background: var(--alt); border-radius: var(--r-md); padding: 22px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }