/* hearing-test/hearing.css — hearing age test UI + article (EN /hearing-test/ and KO /ko/hearing-test/).
   Loaded after tailwind + /css/easytest.css + /css/clean-test.css. The test stage borrows the Short's
   look: near-black stage, warm yellow accent, big kHz number, glowing wave, level dots, "HEAR IT?" pill.
   Rules are prefixed with body.test-page where easytest.css styles the same element more specifically. */

.hearing-page {
  --ht-bg: #100F16;
  --ht-bg-center: #24202F;
  --ht-fg: #F6F4F0;
  --ht-dim: #9692A0;
  --ht-accent: #FFD65C;
  --ht-accent-ink: #18161C;
  --ht-bad: #FF7A7A;
  --ht-track: #423E4E;
}
html[lang="ko"] body.test-page.hearing-page { font-family: 'Plus Jakarta Sans', 'Noto Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- top bar + header ---------- */
/* easytest.css pads #app by 96px to clear its fixed home button; this page's top bar is in the flow. */
body.test-page.hearing-page #app.container { padding-top: 8px !important; }
.ht-topnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 56rem; margin: 0 auto; padding: 16px 16px 0; }
body.test-page .ht-lang { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--et-purple, #8257E6); background: #fff; border: 1px solid #E7E0F5; text-decoration: none; }
body.test-page .ht-lang:hover { background: var(--et-purple-soft, #F3EFFB); }
.ht-kicker { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--et-purple-dark, #6C3FD4); background: var(--et-purple-soft, #F3EFFB); border-radius: 999px; padding: 5px 12px; margin-bottom: 6px; }
html[lang="ko"] .ht-kicker { letter-spacing: .02em; }
.ht-yt { margin: 10px 0 0; font-size: .98rem; font-weight: 700; }
.ht-yt a { color: var(--et-purple-dark, #6C3FD4); text-decoration: underline; text-underline-offset: 3px; }
.ht-yt span { color: var(--et-mute, #6B6480); margin: 0 6px; }

/* ---------- intro ---------- */
.ht-warning { background: #FFF1EF; border: 1px solid #FFD3CD; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; color: #3D3550; }
.ht-warning p { margin: 0 0 .45rem; line-height: 1.55; }
.ht-warning p:last-child { margin-bottom: 0; }
.ht-warning strong { color: #1F1733; }
.ht-steps { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; }
body.test-page .ht-steps li { color: #3D3550; margin-bottom: .4rem; line-height: 1.55; }
.ht-fun { font-size: .9rem; color: var(--et-mute, #6B6480); margin: 0 0 14px; }
.ht-support { font-size: .92rem; color: #B4362A; font-weight: 700; margin: 10px 0 0; }

/* ---------- buttons ---------- */
body.test-page .ht-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 14px; font-weight: 800; font-size: 1rem; line-height: 1.2; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.test-page .ht-btn:focus-visible { outline: 3px solid #A98BF0; outline-offset: 2px; }
body.test-page .ht-btn:disabled { opacity: .45; cursor: default; }
body.test-page .ht-btn-primary { background: var(--et-purple, #8257E6); color: #fff; }
body.test-page .ht-btn-primary:hover:not(:disabled) { background: var(--et-purple-dark, #6C3FD4); }
body.test-page .ht-btn-ghost { background: #fff; color: var(--et-purple, #8257E6); border-color: #E7E0F5; }
body.test-page .ht-btn-ghost:hover { background: var(--et-purple-soft, #F3EFFB); }
/* on the dark stage */
body.test-page .ht-btn-yes { background: var(--ht-accent); color: var(--ht-accent-ink); }
body.test-page .ht-btn-yes:hover:not(:disabled) { background: #FFE38F; }
body.test-page .ht-btn-no { background: transparent; color: var(--ht-fg); border-color: rgba(246, 244, 240, .45); }
body.test-page .ht-btn-no:hover:not(:disabled) { background: rgba(246, 244, 240, .08); }
body.test-page .ht-btn-dim { min-height: 40px; padding: 6px 14px; font-size: .92rem; font-weight: 700; background: transparent; color: var(--ht-dim); border-color: transparent; }
body.test-page .ht-btn-dim:hover:not(:disabled) { color: var(--ht-fg); }
.ht-stage .ht-btn:focus-visible { outline-color: var(--ht-accent); }

/* ---------- the stage (volume check + ladder) ---------- */
.ht-stage {
  position: relative; overflow: hidden; text-align: center; color: var(--ht-fg);
  border-radius: 24px; padding: 22px 18px 18px;
  background: radial-gradient(120% 85% at 50% 32%, var(--ht-bg-center) 0%, var(--ht-bg) 72%);
  box-shadow: 0 24px 50px rgba(16, 15, 22, .28);
}
body.test-page .ht-stage h2, .ht-step { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ht-dim); font-variant-numeric: tabular-nums; }
html[lang="ko"] body.test-page .ht-stage h2, html[lang="ko"] .ht-step { letter-spacing: .04em; }
.ht-mosquito { display: inline-block; margin: 10px 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ht-accent-ink); background: #FF9F6B; border-radius: 999px; padding: 4px 11px; }
.ht-number { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.ht-num { display: inline-block; font-size: clamp(5.5rem, 27vw, 10rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; text-shadow: 0 6px 0 rgba(0, 0, 0, .45); transform-origin: 50% 70%; min-width: 2ch; }
.ht-unit { margin-top: 2px; font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 700; color: var(--ht-dim); }
.ht-wave { display: block; width: 100%; height: clamp(110px, 28vw, 170px); margin: 6px 0 10px; }
.ht-pill {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .1em .5em; max-width: 100%;
  margin: 0; padding: 12px 24px; border-radius: 999px; font-weight: 800; font-size: clamp(1.02rem, 3.8vw, 1.3rem); line-height: 1.25;
  text-transform: uppercase; letter-spacing: .02em; background: #3A3746; color: var(--ht-fg);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .55); transition: background .2s ease, color .2s ease;
}
html[lang="ko"] .ht-pill { text-transform: none; letter-spacing: 0; }
.ht-pill[data-on="1"] { background: var(--ht-accent); color: var(--ht-accent-ink); }
.ht-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 4px; padding: 0; list-style: none; }
.ht-dots li { width: 12px; height: 12px; border-radius: 50%; background: var(--ht-track); transition: transform .2s ease, background .2s ease; }
.ht-dots li.is-done { background: var(--ht-accent); }
.ht-dots li.is-current { background: var(--ht-accent); transform: scale(1.45); }
.ht-note { min-height: 1.5em; max-width: 42ch; margin: 12px auto 0; font-size: .98rem; line-height: 1.5; color: var(--ht-fg); }
.ht-note:empty { min-height: 1.5em; }
.ht-check-copy { max-width: 40ch; margin: 14px auto 0; font-size: 1.02rem; line-height: 1.5; color: var(--ht-fg); }
.ht-check-small { max-width: 46ch; margin: 8px auto 0; font-size: .88rem; line-height: 1.5; color: var(--ht-dim); }
.ht-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 30rem; margin: 16px auto 0; }
.ht-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 8px; }

/* ---------- result ---------- */
.ht-result-hero { color: var(--ht-fg); text-align: center; border-radius: 20px; padding: 22px 16px 20px; margin-bottom: 18px; background: radial-gradient(120% 85% at 50% 32%, var(--ht-bg-center) 0%, var(--ht-bg) 72%); }
body.test-page .ht-result-hero h2 { margin: 0; font-size: .9rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ht-dim); outline: none; }
html[lang="ko"] body.test-page .ht-result-hero h2 { letter-spacing: .04em; }
.ht-result-band { margin: 8px 0 4px; font-size: clamp(2.1rem, 8.5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--ht-accent); }
.ht-result-hz { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ht-fg); }
.ht-recap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.ht-recap li { font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 999px; border: 1.5px solid transparent; }
.ht-recap li.is-heard { background: var(--ht-accent); color: var(--ht-accent-ink); }
.ht-recap li.is-silent { color: var(--ht-bad); border-color: var(--ht-bad); text-decoration: line-through; }
.ht-recap li.is-untested { color: var(--ht-dim); background: rgba(246, 244, 240, .06); }
.ht-recap li.is-skipped { color: var(--ht-dim); border: 1.5px dashed var(--ht-track); }
.ht-fun-pill { display: inline-block; margin: 16px 0 0; padding: 5px 13px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ht-dim); border: 1px solid rgba(246, 244, 240, .2); }
.ht-result-note, .ht-result-catch { color: #3D3550; line-height: 1.6; margin: 0 0 .8rem; }
.ht-result-catch { background: var(--et-purple-soft, #F3EFFB); border-radius: 12px; padding: 10px 14px; }
.ht-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ht-copy-status { min-height: 1.3em; margin: 8px 0 0; font-size: .9rem; color: var(--et-mute, #6B6480); }

/* ---------- article ---------- */
.ht-article h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 .75rem; }
.ht-article h3 { font-size: 1.1rem; font-weight: 800; margin: 1.25rem 0 .4rem; }
.ht-article p, body.test-page .ht-article li { color: #3D3550; line-height: 1.65; }
.ht-article p { margin-bottom: .8rem; }
.ht-article ul, .ht-article ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.ht-article ul { list-style: disc; }
.ht-article ol { list-style: decimal; }
.ht-article li { margin-bottom: .4rem; }
.ht-article a, .ht-result a { color: var(--et-purple-dark, #6C3FD4); text-decoration: underline; overflow-wrap: anywhere; }
.ht-article code { font-size: .88em; background: #F3EFFB; padding: 1px 5px; border-radius: 6px; overflow-wrap: anywhere; }
.ht-table-wrap { overflow-x: auto; margin: .5rem 0 1rem; }
.ht-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ht-table th, .ht-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #EEE8FA; vertical-align: top; font-variant-numeric: tabular-nums; }
.ht-faq dt { font-weight: 800; color: var(--et-ink, #1F1733); margin-top: 1rem; }
.ht-faq dd { margin: .25rem 0 0; color: #3D3550; line-height: 1.6; }
.ht-sources li { overflow-wrap: anywhere; font-size: .92rem; }
.ht-more { font-size: .92rem; color: var(--et-mute, #6B6480); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

@media (max-width: 560px) {
  .ht-stage { padding: 18px 14px 14px; border-radius: 20px; }
  .ht-answers { gap: 8px; }
  body.test-page .ht-btn { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-pill, .ht-dots li { transition: none; }
}