/* URL.KR v2 - 메인(첫 페이지) 전용
   히어로·단축 폼·결과 카드·딥틸 밴드·3단계·웹도구·광고·정의 밴드·나만의 링크·자체 서비스·회원 안내·FAQ.
   다른 화면에서도 쓰게 되는 규칙이 생기면 base.css(컴포넌트)나 layout.css 로 옮긴다.
   토큰은 tokens.css. */

/* ── 히어로 ───────────────────────────────────────────── */
/* 히어로 세로 리듬은 벤치마크(t.ly) 실측값에 맞춘다 - 상하 42px, 눈썹→h1 10px,
   h1→리드 16px, 리드→입력 35px. 수치를 바꾸면 벤치마크와 어긋난다. */
.hv2-hero { background: linear-gradient(180deg, #fdf3ee 0%, #fff9f6 36%, #fff 78%); padding: 42px 0; text-align: center; }
.hv2-hero-in { max-width: 760px; margin-inline: auto; }
.hv2-hero .hv2-h1 { margin: 10px 0 0; }
/* 히어로 눈썹만 벤치마크의 알약 배지 형태를 쓴다 (흰 반투명 면 + 옅은 딥틸 테두리). */
.hv2-hero .hv2-eyebrow { padding: 7px 11px; font-size: 12px; line-height: 1.58; letter-spacing: .031em; color: var(--heading); background: rgb(255 255 255 / 76%); border: 1px solid rgb(40 66 67 / 14%); border-radius: var(--r-pill); }
.hv2-hero .hv2-eyebrow .hv2-i-bolt { color: var(--accent-ink); }
/* ⛔ 제목을 더 굵게 하려고 -webkit-text-stroke 를 쓰지 말 것.
   크롬이 외곽선을 그리는 방식 때문에 ㅅ·ㅊ 같은 대각획 가장자리에 밝은 잔상이 남는다.
   1배율에서만 보이고 확대하면 사라져 놓치기 쉽다(2026-09-17 실측으로 확인).
   paint-order·font-smoothing 으로도 없어지지 않는다. 진짜 굵기가 필요하면
   서브셋한 ExtraBold 파일을 webworks 폰트 서버에 올려 쓰는 것이 유일한 해법이다. */
.hv2-hero .hv2-lead { margin: 16px auto 0; max-width: 640px; }

.hv2-form { margin-top: 35px; text-align: left; }
.hv2-field { display: flex; min-height: 68px; }
.hv2-field-box { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--r-field) 0 0 var(--r-field); }
.hv2-field-box:focus-within { border-color: var(--heading); box-shadow: var(--shadow-float); }
.hv2-field-box > .hv2-icon { margin-left: 16px; font-size: 18px; color: var(--muted); }
.hv2-field input { flex: 1; align-self: stretch; min-width: 0; padding: 16px 12px; background: none; border: 0; font-size: 16px; }
.hv2-field input:focus { outline: 0; }
.hv2-field input::placeholder { color: var(--muted); }
.hv2-field input[aria-invalid='true'] { color: var(--danger); }
.hv2-field-box[data-invalid='1'] { border-color: var(--danger); }
.hv2-clear { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 5px; background: none; border: 0; border-radius: var(--r-pill); font-size: 14px; color: var(--muted); }
.hv2-clear:hover { background: var(--alt); color: var(--heading); }
.hv2-submit { flex: none; min-height: 68px; padding: 16px 30px; background: var(--heading); color: #fff; border: 0; border-radius: 0 var(--r-field) var(--r-field) 0; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; }
.hv2-submit:hover { background: #1c3132; }
.hv2-submit[aria-busy='true'] { background: #1c3132; }
/* 약관·보안 확인 전에는 잠긴다. 같은 딥틸로 두면 눌러도 반응이 없는 이유가 안 보인다.
   테두리는 border 대신 inset 그림자로 넣는다 - border 를 켜면 버튼 폭이 2px 늘어 활성/비활성 전환 때
   글자가 밀린다. 색은 입력창과 같은 --border-strong 이라 필드 전체가 한 덩어리로 보인다. */
.hv2-submit:disabled, .hv2-submit:disabled:hover { background: var(--border-soft); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
.hv2-submit[aria-busy='true']:disabled { background: #1c3132; color: #fff; box-shadow: none; }

/* 체크 줄·안내문은 벤치마크(t.ly) 실측값에 맞춘 수치다. */
.hv2-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 15px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hv2-checks li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; line-height: 20px; }
.hv2-checks .hv2-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgb(209 69 21 / 14%); color: var(--accent-ink); font-size: 11px; }
.hv2-fineprint { margin-top: 9px; font-size: 12px; line-height: 1.55; color: var(--muted); text-align: center; }
/* 벤치마크는 11px 이지만 영문 기준이다. 한글은 같은 크기에서 확연히 작아 보여 12px + 줄높이 1.55 로 둔다. */
/* 음수 margin 이 padding 을 상쇄해 호버 면을 넓혀도 줄 길이는 그대로다(고아 줄 방지). */
.hv2-fineprint a { color: var(--accent-ink); text-decoration: none; margin-inline: -4px; padding-inline: 4px; border-radius: var(--r-sm); }
.hv2-fineprint a:hover { background: var(--accent-ink); color: #fff; }

/* 동의·보안 확인 - 입력창을 누르면 열린다 */
.hv2-consent { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; }
.hv2-consent-row { display: flex; align-items: center; gap: 12px; }
.hv2-agree { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--heading); cursor: pointer; }
.hv2-agree input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.hv2-agree input[aria-invalid='true'] { outline: 2px solid var(--danger); outline-offset: 2px; }
.hv2-agree-view { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 700; color: var(--muted); }
.hv2-agree-view:hover { color: var(--heading); background: var(--alt); }
.hv2-terms { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.hv2-terms span { display: inline-flex; align-items: center; gap: 6px; }
.hv2-terms .hv2-icon { color: var(--muted); font-size: 14px; }
.hv2-terms b { color: var(--heading); font-weight: 700; }
.hv2-captcha { margin-top: 14px; }

.hv2-status { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--success); min-height: 1px; }
.hv2-status:empty { margin: 0; }
.hv2-status[data-error='1'] { color: var(--danger); }
.hv2-status a { color: inherit; text-decoration: underline; }
.hv2-noscript { margin-top: 12px; font-size: 14px; color: var(--danger); }

/* 결과 카드 */
.hv2-result { margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; text-align: left; }
.hv2-result-head { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; color: var(--heading); }
.hv2-result-head .hv2-icon { color: var(--success); font-size: 20px; }
.hv2-result-field { display: flex; margin-top: 16px; }
.hv2-result-field input { flex: 1; min-width: 0; padding: 13px 15px; background: var(--alt); border: 1px solid var(--border); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); font-size: 16px; font-weight: 700; color: var(--heading); }
.hv2-copy { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 13px 20px; background: var(--accent); color: #fff; border: 0; border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 15px; font-weight: 700; }
.hv2-copy:hover { background: var(--accent-deep); }
.hv2-copy[data-copied='true'] { background: var(--success); }
.hv2-result-body { display: flex; gap: 20px; align-items: center; margin-top: 18px; }
.hv2-qr { flex: none; width: 116px; height: 116px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; }
.hv2-result-links { display: flex; flex-wrap: wrap; gap: 8px; }
.hv2-result-links a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; font-weight: 700; color: var(--heading); }
.hv2-result-links a:hover { border-color: var(--heading); background: var(--alt); }
.hv2-copy-status { margin-top: 12px; font-size: 14px; color: var(--success); font-weight: 700; }
.hv2-copy-status[data-error='1'] { color: var(--danger); }
.hv2-reset { margin-top: 14px; padding: 0; background: none; border: 0; font-size: 15px; font-weight: 700; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; }
.hv2-reset:hover { text-decoration: underline; }

/* ── 딥틸 밴드 (히어로 바로 다음 · DS12 §5-4) ─────────── */
.hv2-band { background: var(--band); color: #fff; padding: 22px 0; }
.hv2-band-label { text-align: center; font-size: 14px; line-height: 19px; font-weight: 600; letter-spacing: normal; color: rgb(255 255 255 / 68%); }
.hv2-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.hv2-stats li { text-align: center; padding: 0 20px; }
.hv2-stats li + li { border-left: 1px solid var(--border-invert); }
.hv2-stats b { display: block; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 40px; letter-spacing: normal; color: #fff; }
.hv2-stats b i { font-style: normal; font-size: .52em; line-height: 1; margin-left: 3px; color: var(--accent-on-band); }   /* 줄높이를 물려받으면 작은 글씨가 기준선 아래로 넘쳐 줄 상자가 7px 커진다 */
.hv2-stats span { display: block; margin-top: 5px; font-size: 13px; line-height: 19px; letter-spacing: .03em; color: rgb(255 255 255 / 76%); }

/* 기간 연장 안내 - 통계 띠 아래 */
.hv2-extend { display: flex; align-items: center; gap: 16px 22px; margin-top: 28px; padding: 20px 24px; background: var(--alt); border: 1px solid var(--border); border-radius: var(--r-lg); }
.hv2-extend > .hv2-icon { font-size: 30px; color: var(--accent); }
.hv2-extend-text { flex: 1; min-width: 0; }
.hv2-extend-title { font-size: 18px; line-height: 1.4; color: var(--heading); }
.hv2-extend-text p { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.hv2-extend-text b { color: var(--heading); }
.hv2-extend-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 섹션 ─────────────────────────────────────────────── */
.hv2-section { padding: var(--gap) 0; }
.hv2-section--alt { background: var(--alt); }

/* 3단계 카드 */
.hv2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.hv2-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; }
.hv2-step:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.hv2-step-top { display: flex; align-items: center; justify-content: space-between; }
.hv2-step-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--r-md); font-size: 20px; }
.hv2-step-no { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.hv2-step .hv2-h3 { margin-top: 18px; }
.hv2-step p { margin-top: 10px; font-size: 15px; color: var(--muted); }

/* 웹도구 분할 패널 */
.hv2-split { display: grid; grid-template-columns: 5fr 7fr; gap: 44px; align-items: center; }
.hv2-split-copy .hv2-h2 { margin-top: 14px; }
/* 요소 선택자(.hv2-split-copy p)를 쓰면 특이도 0,1,1 이 .hv2-eyebrow 0,1,0 을 이겨
   눈썹 문구까지 16px 회색으로 덮어쓴다. 설명 문단만 클래스로 집는다. */
.hv2-split-copy .hv2-split-desc { margin-top: 16px; font-size: 16px; color: var(--muted); }
.hv2-split-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hv2-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hv2-tool { display: flex; align-items: flex-start; gap: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.hv2-tool:hover { border-color: var(--heading); box-shadow: var(--shadow-hover); }
.hv2-tool-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--alt); color: var(--heading); border-radius: var(--r-md); font-size: 18px; }
.hv2-section--alt .hv2-tool-mark { background: var(--border-soft); color: var(--heading); }
.hv2-tool-text { min-width: 0; }
.hv2-tool-text b { display: block; font-size: 15px; font-weight: 700; color: var(--heading); }
.hv2-tool-text span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }


/* 정의 밴드 */
.hv2-define { background: var(--band); color: #fff; padding: 54px 0; }
.hv2-define-in { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
.hv2-define .hv2-eyebrow { color: var(--accent-on-band); }
.hv2-define h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.2; letter-spacing: -.022em; color: #fff; }
.hv2-define p { font-size: 16px; line-height: 1.8; color: rgb(255 255 255 / 80%); }
.hv2-define p + p { margin-top: 12px; }
.hv2-define p strong { color: #fff; font-weight: 700; }
.hv2-define p .hv2-mark { color: var(--accent-on-band); font-weight: 700; }
.hv2-define-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hv2-define-actions .hv2-btn--primary:hover { background: var(--accent-deep); }

/* FAQ */
.hv2-faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; background: var(--alt); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 28px; }
.hv2-faq-head .hv2-h2 { margin-top: 10px; }
.hv2-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
/* ── 나만의 링크(딥틸 밴드) ───────────────────────────── */
/* 3단계(흰)와 웹도구(회색) 사이라 같은 면이 붙지 않게 밴드로 둔다. 수익 기능이라 강조도 겸한다. */
.hv2-mylink { background: var(--band); color: #fff; }
.hv2-mylink .hv2-eyebrow { color: var(--accent-on-band); }
.hv2-mylink .hv2-h2 { color: #fff; }
.hv2-mylink .hv2-lead { color: rgb(255 255 255 / 80%); }
.hv2-mylink .hv2-lead b { color: #fff; font-weight: 700; }
/* 기본 주소(흰색)와 구분해 원하는 단어로 만든 주소를 강조한다. 밴드 위 #ff9e7a 는 5.34:1. */
.hv2-mylink .hv2-lead .hv2-mark { color: var(--accent-on-band); font-weight: 700; }
.hv2-mylinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
/* 면을 4% 보다 밝히면 그 위의 --accent-on-band 링크가 4.5:1 에 못 미친다(6% 에서 4.47:1 실측). */
.hv2-mylink-card { min-width: 0; display: flex; flex-direction: column; background: rgb(255 255 255 / 4%); border: 1px solid var(--border-invert); border-radius: var(--r-lg); padding: 26px 24px; }
.hv2-mylink-tag { align-self: flex-start; padding: 4px 10px; border: 1px solid rgb(255 255 255 / 28%); border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1.5; color: #fff; }
.hv2-mylink-tag--free { background: var(--accent); border-color: var(--accent); }
.hv2-mylink-card h3 { margin-top: 14px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: #fff; }
/* 제목 옆 영문 부제. 흰색 65% 는 카드 면(rgb(49 74 75)) 위에서 5.13:1 이라 작은 글자 기준도 넘는다. */
.hv2-mylink-card h3 .hv2-mylink-en { margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / 65%); white-space: nowrap; }
/* 요소 이름(p)으로 잡으면 특이도 (0,1,1) 이 되어 .hv2-mylink-tag (0,1,0) 를 이긴다.
   그러면 배지 글자색·크기가 통째로 무시된다(실측 3.46:1). 클래스로만 잡는다. */
.hv2-mylink-desc { margin-top: 10px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.68; color: rgb(255 255 255 / 80%); }
.hv2-mylink-go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; min-height: 44px; font-size: 14.5px; font-weight: 700; color: var(--accent-on-band); }
.hv2-mylink-go:hover { color: #fff; }

/* ── 자체 서비스 ──────────────────────────────────────── */
.hv2-owns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 44px auto 0; }
.hv2-own-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; }
.hv2-own-card:hover { border-color: var(--heading); box-shadow: var(--shadow-hover); }
.hv2-own-head { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--heading); }
.hv2-own-head .hv2-icon { font-size: 14px; color: var(--accent-ink); }
.hv2-own-desc { margin-top: 10px; margin-bottom: 18px; font-size: 14.5px; line-height: 1.68; color: var(--text); }
.hv2-own-url { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--accent-ink); }


.hv2-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.hv2-faq-item:hover { box-shadow: var(--shadow-hover); }
.hv2-faq-q { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--heading); }
.hv2-faq-q .hv2-icon { flex: none; margin-top: 2px; font-size: 17px; color: var(--accent-ink); }
.hv2-faq-a { margin-top: 10px; padding-left: 28px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
/* 안내 확인일. 본문을 방해하지 않게 작고 옅게 두되, --muted 는 흰 면에서 5.9:1 이라 기준을 넘는다. */
.hv2-faq-updated { margin-top: 16px; font-size: 13.5px; color: var(--muted); text-align: right; }
.hv2-faq-more { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; background: var(--alt); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 26px; }
.hv2-faq-more b { display: block; font-size: 16px; color: var(--heading); }
.hv2-faq-more p { margin-top: 5px; font-size: 14px; color: var(--muted); }
.hv2-faq-more div { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .hv2-hero { padding: 32px 0; }
    .hv2-field { flex-direction: column; }
    .hv2-field-box { border-right: 1px solid var(--border-strong); border-radius: var(--r-field); }
    .hv2-submit { width: 100%; margin-top: 10px; border-radius: var(--r-field); justify-content: center; }
    .hv2-steps { grid-template-columns: repeat(2, 1fr); }
    .hv2-mylinks, .hv2-owns { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
    .hv2-split, .hv2-define-in { grid-template-columns: 1fr; gap: 28px; }
    .hv2-faq-grid { grid-template-columns: 1fr; }
    .hv2-faq-head, .hv2-faq-more { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 767px) {
    .hv2-extend { flex-direction: column; align-items: flex-start; padding: 18px; }
    .hv2-extend-actions { width: 100%; }
    .hv2-extend-actions .hv2-btn { flex: 1; }
}
@media (max-width: 600px) {
    .hv2-section { padding: 42px 0; }
    .hv2-band { padding: 19px 0; }
    .hv2-stats { grid-template-columns: 1fr; gap: 0; }
    .hv2-stats li { padding: 16px 0; }
    .hv2-stats li + li { border-left: 0; border-top: 1px solid var(--border-invert); }
    .hv2-steps, .hv2-tools { grid-template-columns: 1fr; }
    .hv2-consent { padding: 16px; }
    .hv2-consent-row { flex-wrap: wrap; }
    .hv2-result { padding: 20px; }
    .hv2-result-field { flex-direction: column; }
    .hv2-result-field input { border-right: 1px solid var(--border); border-radius: var(--r-md); }
    .hv2-copy { margin-top: 8px; border-radius: var(--r-md); justify-content: center; }
    .hv2-result-body { flex-direction: column; align-items: flex-start; }
    .hv2-faq-a { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hv2-step:hover { transform: none; }
}
@media (forced-colors: active) {
    .hv2-step, .hv2-tool, .hv2-faq-item, .hv2-result, .hv2-consent, .hv2-ad,
    .hv2-mylink-card, .hv2-own-card { border: 1px solid CanvasText; }
}
@media print {
    .hv2-ads, .hv2-consent, .hv2-submit, .hv2-join { display: none !important; }
    .hv2-band, .hv2-define, .hv2-mylink { background: #fff !important; color: #000 !important; }
    .hv2-band *, .hv2-define *, .hv2-mylink * { color: #000 !important; }
}