/* My Korean Name — 파란 결과 칸(--field) + 회색 바탕, 큰 한글 활자가 주인공인 레이아웃.
   1440: 입력 | 결과 두 칸, 그 아래 후보 · 표기 · 광고 세 칸 / 1180 이하: 한 칸 / 640 이하: 모바일 */
:root {
  --bg: #F1F2F4; --bg-2: #E4E6EB; --surface: #FFFFFF;
  --ink: #0D1330; --ink-2: #4B5168; --line: rgba(13, 19, 48, .14);
  --field: #1F3BC4; --field-ink: #FFFFFF; --field-2: #C9D1FF; --field-line: rgba(255, 255, 255, .22);
  --link: #1F3BC4; --focus: #D93A25;
  --ok: #1F3BC4; --rule: #0D1330; --approx: #9A4A00; --approx-bg: #FBEBD9;
  --sans: "Wanted Sans", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --serif: "Noto Serif KR", "Apple SD Gothic Neo", "Hiragino Mincho ProN", serif;
  --gut: 48px;
  /* 공통 간격·글자 단계 — 모든 페이지 종류가 같은 값을 쓴다 */
  --top: 32px;          /* 헤더 아래 → 첫 제목(h1) */
  --sec: 56px;          /* 큰 덩어리 사이(첫 화면 칸 → 본문, 본문 끝 → 푸터) */
  --h1: 40px;           /* 모든 페이지 h1 */
  --art-h: 220px; --art-gap: 48px; /* 본문 줄: 제목 칸 폭 · 제목|본문 간격 (광고 칸도 이 선에 맞춤) */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F24; --bg-2: #1A2142; --surface: #141A36;
    --ink: #E9ECF8; --ink-2: #A9B0CB; --line: rgba(233, 236, 248, .16);
    --field: #2442D4; --field-2: #D3DAFF; --field-line: rgba(255, 255, 255, .24);
    --link: #A3B4FF; --focus: #FF7A66;
    --ok: #A3B4FF; --rule: #E9ECF8; --approx: #FFB867; --approx-bg: #3A2710;
  }
}
html:lang(ja) { --sans: "Wanted Sans", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif; }
html:lang(zh) { --sans: "Wanted Sans", "Noto Sans SC", "PingFang SC", system-ui, sans-serif; }
html:lang(th) { --sans: "Wanted Sans", "Noto Sans Thai", system-ui, sans-serif; }
html:lang(ar) { --sans: "Wanted Sans", "Noto Sans Arabic", system-ui, sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.6 var(--sans); overflow-wrap: anywhere; overflow-x: hidden; }
:lang(ko) { word-break: keep-all; }
:lang(th), :lang(ar) { line-height: 1.8; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }
bdi[lang="ko"] { white-space: nowrap; }
code { font-size: .92em; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; unicode-bidi: isolate; direction: ltr; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.field :focus-visible { outline-color: #fff; }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gut); }
.sm { font-size: 15px; color: var(--ink-2); }

/* ── header ── */
.hdr .wrap { display: flex; align-items: center; gap: 12px 40px; min-height: 64px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.01em; white-space: nowrap; }
.mark { font-weight: 900; font-size: 26px; line-height: 1; color: var(--field); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-weight: 600; font-size: 16px; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.lang { margin-inline-start: auto; position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 6px 0; white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 18px; height: 18px; }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); background: var(--surface); border: 1.5px solid var(--ink); border-radius: 10px; padding: 6px; min-width: 170px; display: grid; z-index: 30; }
.lang-menu a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 600; }
.lang-menu a:hover { background: var(--bg-2); }
.lang-menu a[aria-current] { font-weight: 800; color: var(--link); }

/* ── stage: 입력 | 파란 결과 칸 ── */
.stage { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
.ask { padding-block: var(--top) 40px; padding-inline: var(--gut) 56px; display: flex; flex-direction: column; min-width: 0; }
.hero h1, .doc-head h1 { font-weight: 800; font-size: var(--h1); line-height: 1.14; letter-spacing: -.03em; margin: 0; }
.lead { color: var(--ink-2); margin: 16px 0 0; max-width: 34em; }
:lang(ja) .hero h1, :lang(zh) .hero h1 { letter-spacing: -.01em; }

/* converter form */
.conv { margin-top: 28px; display: grid; gap: 20px; }
.lbl, .lbl-sm { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.lbl { margin-bottom: 8px; }
.name-in { width: 100%; border: 0; border-bottom: 3px solid var(--ink); background: none; font: 800 48px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); padding: 4px 0 10px; border-radius: 0; outline: none; }
.name-in::placeholder { color: var(--ink-2); opacity: .6; font-size: 22px; font-weight: 600; letter-spacing: 0; }
.name-in:focus { border-bottom-color: var(--field); }
.name-in:focus-visible { outline: none; box-shadow: 0 3px 0 var(--focus); }
.src-row, .g-row, .opt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.src-row .lbl-sm, .g-row .lbl-sm, .opt-row .lbl-sm { flex-basis: 100%; }
select { font: 700 17px/1.2 var(--sans); color: var(--ink); background-color: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 6px 26px 6px 0; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237B819A' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; max-width: 100%; }
[dir="rtl"] select { padding: 6px 0 6px 26px; background-position: left 2px center; }
select option { color: #0D1330; background: #fff; }
.detect { font-size: 13px; font-weight: 700; color: var(--link); border: 1.5px solid currentColor; padding: 1px 8px; border-radius: 5px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; border: 1.5px solid var(--ink); border-radius: 10px; padding: 3px; }
.seg button { font: 700 16px/1 var(--sans); border: 0; background: none; color: var(--ink); padding: 10px 14px; border-radius: 7px; cursor: pointer; }
.seg button:hover { background: var(--bg-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.opt-row .yr { font: 700 17px/1.2 var(--sans); width: 150px; padding: 6px 0; border: 0; border-bottom: 1.5px solid var(--ink); background: none; color: var(--ink); border-radius: 0; }
.opt-row.attn select { outline: 3px solid var(--field); outline-offset: 4px; }
.opt-row.attn .lbl-sm { color: var(--link); }
.hint { font-size: 15px; color: var(--approx); background: var(--approx-bg); padding: 8px 12px; border-radius: 6px; margin: 0; }
.examples { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.try { color: var(--ink-2); font-weight: 700; font-size: 14px; }
.chip { font: 600 16px/1.4 var(--sans); color: var(--ink); background: none; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-bottom-color: var(--ink); }
.chip svg { width: 16px; height: 16px; }
.status { color: var(--ink-2); margin: 0; font-size: 15px; white-space: pre-line; }
.status:empty { display: none; }

/* 파란 결과 칸 */
.field { background: var(--field); color: var(--field-ink); padding: 34px 64px; display: flex; flex-direction: column; min-width: 0; }
.field a { color: #fff; }
.rcard { display: flex; flex-direction: column; flex: 1; }
#kMain { display: flex; flex-direction: column; flex: 1; }
.f-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 24px; font-size: 16px; color: var(--field-2); font-weight: 600; }
.rlabel { color: #fff; font-weight: 700; }
.kmeta { font-weight: 700; color: #fff; }
.f-empty { display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 24px; }
.f-mark { font-weight: 900; font-size: clamp(160px, 22vw, 320px); line-height: .9; letter-spacing: -.04em; color: #fff; }
.f-empty p { margin: 0; color: var(--field-2); font-size: 17px; padding-top: 16px; border-top: 1px solid var(--field-line); }

/* 큰 한글: 음절마다 칸 + 자모 */
.specimen { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); container-type: inline-size; margin-top: 20px; direction: ltr; --sp: 22px; }
.k-syl { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--field-line); padding-left: var(--sp); animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.k-syl:first-child { border-left: 0; padding-left: 0; }
.k-syl:nth-child(2) { animation-delay: .06s; } .k-syl:nth-child(3) { animation-delay: .12s; } .k-syl:nth-child(4) { animation-delay: .18s; } .k-syl:nth-child(n+5) { animation-delay: .24s; }
.k-big { display: block; font-weight: 900; line-height: .98; letter-spacing: -.04em; white-space: nowrap;
  font-size: clamp(56px, 12vw, 204px);
  font-size: min(204px, calc((100cqi - (var(--c, 3) - 1) * var(--sp)) / var(--c, 3) * .9)); }
.k-jamo { display: block; margin-top: 14px; color: var(--field-2); font-weight: 700; letter-spacing: .4em; white-space: nowrap; overflow: hidden;
  font-size: 18px;
  font-size: max(12px, min(22px, calc((100cqi - (var(--c, 3) - 1) * var(--sp)) / var(--c, 3) * .1))); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.roman { font-weight: 800; font-size: 40px; letter-spacing: -.01em; margin: 20px 0 0; line-height: 1.1; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .roman { text-align: right; }

/* 한자: 음절 칸에 맞춘 열 */
.hanja { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--field-line); direction: ltr; }
.hj { border-left: 1px solid var(--field-line); padding: 16px 0 0 22px; min-width: 0; }
.hj:first-child { border-left: 0; padding-left: 0; }
.hj-ko { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hj-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; margin-bottom: 10px; }
.hj-ch { font: 700 48px/1 var(--serif); }
.hj-mean { font-size: 16px; color: var(--field-2); line-height: 1.35; }
.hj-none, .hj-native-t { display: block; font-size: 17px; color: var(--field-2); padding-top: 4px; }
.hj-native-t { color: #fff; font-weight: 700; line-height: 1.4; }
.field .sm { color: var(--field-2); margin: 10px 0 0; }
.kmode { font-size: 16px; margin: 16px 0 0; color: #fff; font-weight: 700; }
.ksur { margin: auto 0 0; color: var(--field-2); font-size: 16px; padding-top: 16px; border-top: 1px solid var(--field-line); }
.ksur:empty { display: none; }
#kMain > .ksur { margin-top: auto; }
#kMain > .hanja, #kMain > .kmode { margin-bottom: 18px; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px; }
.btn { display: inline-flex; text-align: center; align-items: center; justify-content: center; gap: 8px; font: 700 16px/1.1 var(--sans); color: #fff; background: none; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 8px; padding: 12px 16px; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn.primary { background: #fff; color: var(--field); border-color: #fff; }
.btn.primary:hover { background: var(--field-2); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* 뜻 모드 안내 (결과 칸 위) */
.kmeans { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--field-line); }
.km-note { font-size: 15px; color: var(--field-2); margin: 0 0 6px; unicode-bidi: plaintext; }
.km-line { font-size: 22px; font-weight: 800; margin: 0; line-height: 1.4; unicode-bidi: plaintext; }
.km-line bdi { color: var(--field-2); }
.km-src { font-size: 14px; color: var(--field-2); margin: 6px 0 0; unicode-bidi: plaintext; }
.km-none p { font-size: 17px; margin: 10px 0 0; }
.km-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── 결과 아래 띠: 다른 후보 | 내 이름 한글 표기 | 광고 ── */
.band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; padding-top: var(--sec); align-items: start; }
.band:has(> #secCand[hidden]) { grid-template-columns: minmax(0, 1fr); }
.home-page .rail-in { padding-top: var(--sec); }
.band h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; line-height: 1.3; }
.cands { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.cands li { border-bottom: 1px solid var(--line); }
.cand { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; align-items: center; text-align: start; font: inherit; color: var(--ink); background: none; border: 0; padding: 16px 0; cursor: pointer; }
.cand b { grid-row: 1 / 3; font-weight: 900; font-size: 56px; letter-spacing: -.04em; line-height: 1; }
.cand-r { font-weight: 800; font-size: 20px; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .cand-r { text-align: right; }
.cand-meta { font-size: 15px; color: var(--ink-2); display: block; }
.cand:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.meter { display: block; width: 180px; max-width: 100%; margin: 8px 0 6px; height: 6px; background: var(--bg-2); border-radius: 9px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink); }
.cands-sec > .sm { margin: 14px 0 0; max-width: 36em; }

.written { display: grid; gap: 26px; min-width: 0; }
.tcard { border-top: 2px solid var(--ink); padding-top: 16px; }
.tcard h2 { margin-bottom: 6px; }
.t-main { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 24px; }
.t-hangul { font-weight: 900; font-size: 132px; line-height: .98; letter-spacing: -.05em; }
.t-hangul.long { font-size: 64px; letter-spacing: -.03em; }
.t-sub { display: flex; flex-direction: column; padding-bottom: 6px; min-width: 0; }
.t-roman { font-weight: 800; font-size: 28px; line-height: 1.1; direction: ltr; unicode-bidi: isolate; }
.t-from { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-top: 6px; unicode-bidi: plaintext; }
.chip.copy { align-self: center; border: 1.5px solid var(--ink); border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: 15px; }
.badge { --bc: var(--ok); display: inline-flex; align-items: center; gap: 7px; font: 800 14px/1.3 var(--sans); color: var(--bc); background: none; border: 0; padding: 0; margin-top: 12px; cursor: pointer; text-align: start; }
.badge::before { content: "✓"; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--bc); color: var(--bg); font-size: 11px; font-weight: 900; flex: none; }
.badge.rule { --bc: var(--rule); }
.badge.rule::before { content: ""; background: none; border: 2px solid var(--bc); width: 15px; height: 15px; }
.badge.approx { --bc: var(--approx); }
.badge.approx::before { content: "~"; }
.field .badge, .field .badge.rule, .field .badge.approx { --bc: #fff; margin: 0; cursor: default; }
.field .badge::before { color: var(--field); }
.field .badge.rule::before { color: transparent; }
.conf-help { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; max-width: 34em; }
.rsec h2 { margin: 0 0 8px; }
.written .rsec:not(.tcard) h2 { font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.words { display: flex; flex-wrap: wrap; gap: 12px; direction: ltr; }
[dir="rtl"] .words { justify-content: flex-end; }
.word { display: flex; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.syl { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 10px 18px; border-left: 1.5px solid var(--ink); }
.syl:first-child { border-left: 0; }
.s-src { font-size: 15px; color: var(--ink-2); font-weight: 700; }
.s-ko { font-size: 36px; font-weight: 900; line-height: 1.15; }
.notes { margin: 0; padding-inline-start: 20px; text-align: start; max-width: 36em; }
.notes li { margin: 4px 0; font-size: 16px; }
.alts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.alt-item { display: inline-flex; flex-direction: column; }
.alt-item b { font-size: 30px; font-weight: 900; line-height: 1.2; }
.alt-item small { color: var(--ink-2); font-size: 15px; direction: ltr; unicode-bidi: isolate; }
.more-name { margin: 0; font-weight: 800; }
.more-name a { color: var(--link); }

/* 광고 칸 — 애드핏이 넣은 칸(.adfit)만 자리를 잡는다. 채워지기 전엔 단위 높이(250)+표시줄을 잡아 흔들림을 막고,
   안 채워지면(.ad-empty) 접어서 큰 빈칸이 남지 않게. 버튼·링크와는 위아래 32px 이상 띄운다 */
.adslot { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.ad-wide { display: none; }
@media (min-width: 1181px) { .ad-wide { display: flex; } .ad-narrow { display: none; } }
.adslot.adfit { min-height: 272px; }
.adslot.adfit::before { content: "Advertisement"; display: block; width: 300px; max-width: 100%; font: 600 12px/14px var(--sans); letter-spacing: .02em; color: var(--ink-2); margin-bottom: 8px; text-align: start; }
:lang(ja) .adslot.adfit::before { content: "広告"; }
:lang(zh) .adslot.adfit::before { content: "广告"; }
:lang(es) .adslot.adfit::before { content: "Publicidad"; }
:lang(th) .adslot.adfit::before { content: "โฆษณา"; }
:lang(ar) .adslot.adfit::before { content: "إعلان"; }
.adslot.ad-empty { min-height: 0; }
.adslot.ad-empty::before { display: none; }
/* 본문 속 칸: 본문 칸 시작선에 맞춘다 */
.page-main .adslot.adfit { align-items: flex-start; padding-inline-start: calc(var(--art-h) + var(--art-gap)); margin-block: 32px; }
.page-main .adslot.ad-empty { margin-block: 0; }
.art-b .adslot.adfit { padding-inline-start: 0; }
.rail { min-width: 0; align-self: stretch; }
.rail-in { position: sticky; top: 24px; display: grid; gap: 32px; justify-items: center; }

.toast { position: fixed; inset-inline: 0; bottom: 24px; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 15px; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; transform: none; }

/* ── 읽을거리: 제목 칸 | 본문 칸 ── */
.reading { padding-top: var(--sec); }
.page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.page-main { min-width: 0; }
.stage + .page { padding-top: var(--sec); }
.stage + .home-page { padding-top: 0; }
.art { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px 56px; padding: 28px 0; border-top: 1px solid var(--line); }
.page .art { grid-template-columns: minmax(0, var(--art-h)) minmax(0, 1fr); gap: 16px var(--art-gap); }
.art > h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 0; }
.page .art > h2 { font-size: 22px; }
.art-pre { border-top: 0; }
.art-pre > .art-b { grid-column: 2; }
.art-b { min-width: 0; }
.art-b > :first-child { margin-top: 0; }
.art-b p, .art-b ul, .art-b ol, .art-b .faq, .art-b dl { max-width: 42em; }
.art-b p { margin: 0 0 14px; }
.art-b h3 { font-size: 19px; font-weight: 800; margin: 26px 0 8px; letter-spacing: -.01em; }
.art-b ul, .art-b ol { padding-inline-start: 22px; }
.art-b li { margin: 4px 0; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; font-size: 18px; line-height: 1.4; padding: 14px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 500; color: var(--ink-2); flex: none; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0 0 16px; color: var(--ink-2); }
.more { margin-top: 22px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.more a { color: var(--link); }
.more-guides { margin-top: 10px; }
.doc-head { padding: var(--top) 0 28px; }
.doc-head h1 { margin: 0; max-width: 18em; }
.updated { margin: 12px 0 0; }

/* tables */
.tbl { overflow-x: auto; margin: 12px 0 18px; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl table { border-collapse: collapse; width: 100%; font-size: 16px; border-top: 2px solid var(--ink); }
.tbl caption { text-align: start; font-weight: 800; padding: 4px 0 8px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.tbl th { color: var(--ink-2); font-size: 14px; font-weight: 700; }
.tbl td b { font-weight: 800; }
.tbl .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td small { color: var(--ink-2); }
.tbl table { overflow-wrap: normal; }
.tbl td:first-child, .tbl th:first-child { white-space: nowrap; }
.tbl2 { display: grid; gap: 0 32px; }
@media (min-width: 640px) { .tbl2 { grid-template-columns: 1fr 1fr; } }
.faq.yr summary { font-size: 20px; font-weight: 800; }

/* ── 한국 나이 ── */
.agecalc { margin-top: 28px; display: grid; gap: 20px; }
.frow { display: grid; gap: 8px; }
.frow label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.frow input { font: 800 26px/1.2 var(--sans); padding: 6px 0 8px; border: 0; border-bottom: 3px solid var(--ink); background: none; color: var(--ink); width: 100%; border-radius: 0; }
.agecalc .btn.primary, .np-cta .btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); justify-self: start; padding: 13px 22px; }
.agecalc .btn.primary:hover, .np-cta .btn.primary:hover { background: var(--field); border-color: var(--field); color: #fff; }
.agecalc .status { color: var(--focus); font-weight: 700; }
.age-field { justify-content: center; }
.ages { display: grid; }
.age-field:has(#ageOut:not([hidden])) .ages-empty { display: none; }
.ages-empty .v { color: var(--field-2); }
.age { padding: 20px 0; border-top: 1px solid var(--field-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; align-items: end; }
.age:first-child { border-top: 0; padding-top: 0; }
.age .k { font-weight: 700; font-size: 17px; }
.age .v { grid-row: 1 / 3; grid-column: 2; font-size: 72px; font-weight: 900; line-height: 1; letter-spacing: -.03em; text-align: end; }
.age.main .v { font-size: 132px; }
.age .h { font-size: 16px; color: var(--field-2); max-width: 30em; }

/* ── 이름별 페이지 · 목록 ── */
.crumbs { font-size: 15px; color: var(--ink-2); margin: 0 0 18px; }
.crumbs a { color: var(--ink-2); }
.np-also { color: var(--ink-2); margin: 18px 0 0; font-size: 16px; max-width: 34em; }
.np-card .specimen { margin-top: 24px; }
.np-card .actions { margin-top: auto; padding-top: 32px; }
.np-card .roman { font-size: 32px; }
.np-body { padding-top: 0; }
.np-sec p { margin: 6px 0; }
.np-src { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.np-ex, .np-list { margin: 6px 0; padding-inline-start: 20px; }
.np-mean { font-size: 30px; font-weight: 900; margin: 0 0 6px; line-height: 1.25; }
.np-mode { border-top: 2px solid var(--ink); padding: 14px 0 18px; }
.np-mode + .np-mode { margin-top: 10px; }
.np-mode h3 { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.np-mline { font-weight: 700; unicode-bidi: plaintext; }
.np-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 28px; margin: 10px 0; }
.np-kc { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.np-kc > b { font-size: 48px; font-weight: 900; line-height: 1.05; letter-spacing: -.04em; }
.np-kc small { color: var(--ink); font-weight: 800; font-size: 18px; }
.np-kc .np-meta { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.np-hj { display: flex; flex-direction: column; gap: 1px; font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.np-hj b { color: var(--ink); }
.np-open { margin: 8px 0; font-weight: 700; }
.np-cta { margin: 20px 0 4px; }
.np-rel, .np-names { list-style: none; padding: 0; margin: 6px 0; }
.np-rel { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.np-rel a { text-decoration: none; color: var(--ink); font-weight: 700; border-bottom: 1.5px solid var(--line); }
.np-rel a:hover { border-bottom-color: var(--ink); }
.np-rel a span { color: var(--ink-2); margin-inline-start: 6px; font-weight: 800; }
.art-b .np-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 24px; max-width: none; padding: 0; }
.np-names li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; }
.np-names a { font-weight: 700; color: var(--ink); text-decoration: none; }
.np-names a:hover { text-decoration: underline; }
.np-names li span { color: var(--ink-2); font-weight: 800; }
.np-az { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 800; font-size: 20px; margin: 18px 0 0; }
.np-az a { color: var(--link); text-decoration: none; }
.np-az a:hover { text-decoration: underline; }
.art > h2[id^="g"] { font-size: 44px; font-weight: 900; line-height: 1; color: var(--field); }
@media (prefers-color-scheme: dark) { .art > h2[id^="g"] { color: var(--link); } }

/* ── 404 ── */
.nf-head { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.big-mark { font-size: 160px; font-weight: 900; line-height: .85; color: var(--field); letter-spacing: -.04em; }
.nf-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.nf { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 6px 32px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.nf b { font-size: 19px; }
.nf span { color: var(--ink-2); }
.nf a { font-weight: 800; white-space: nowrap; }

/* ── footer ── */
.ftr { padding: 0 0 48px; }
.ftr-grid { border-top: 2px solid var(--ink); margin-top: var(--sec); padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; }
.ftr-h { font-size: 15px; font-weight: 800; margin: 0 0 10px; color: var(--ink-2); }
.sib { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 17px; font-weight: 700; }
.sib a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid transparent; }
.sib a:hover { border-bottom-color: var(--ink); }
.sib a[aria-current] { color: var(--link); }
.fl { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; margin-bottom: 10px; }
.fl a { color: var(--ink-2); text-decoration: none; }
.fl a:hover { text-decoration: underline; color: var(--ink); }
.fl a[aria-current] { color: var(--ink); font-weight: 700; }
.fine { color: var(--ink-2); font-size: 15px; margin: 28px 0 0; max-width: 60em; }

/* ── 1180 이하: 한 칸, 옆 광고 칸 숨김(하단 광고만) ── */
@media (max-width: 1180px) {
  :root { --gut: 32px; --top: 28px; --sec: 48px; --art-gap: 32px; }
  .stage { display: flex; flex-direction: column; }
  .stage > .ask { padding: var(--top) var(--gut) 32px; }
  .stage > .field { padding: 32px var(--gut); }
  /* 변환기: 이름 입력 바로 아래에 결과 칸, 나머지 선택지는 그 아래 */
  .stage:has(#conv) > .ask, .conv { display: contents; }
  .stage:has(#conv) .hero, .conv > * { margin-inline: var(--gut); }
  .stage:has(#conv) .hero { order: 0; margin-top: var(--top); }
  .conv > * { order: 4; margin-top: 20px; }
  .conv > .c-name { order: 1; margin-top: 28px; }
  .conv > .status { order: 2; margin-top: 12px; }
  .stage > #field { order: 3; margin-top: 28px; }
  .conv > .examples { margin-bottom: 8px; }
  #field.is-empty { display: none; }
  .band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
  .band:has(> #secCand[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .page { grid-template-columns: minmax(0, 1fr); }
  .art, .page .art { grid-template-columns: minmax(0, var(--art-h)) minmax(0, 1fr); gap: 12px var(--art-gap); }
  .ftr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px 40px; }
}
/* ── 640 이하: 모바일 ── */
@media (max-width: 640px) {
  :root { --gut: 16px; --top: 22px; --sec: 32px; --h1: 31px; }
  .hdr .wrap { gap: 8px 18px; padding-top: 12px; padding-bottom: 10px; }
  .nav { order: 3; width: 100%; gap: 4px 20px; font-size: 15px; }
  .lead { margin-top: 12px; }
  .name-in { font-size: 38px; }
  .name-in::placeholder { font-size: 18px; }
  .seg button { padding: 9px 11px; font-size: 15px; }
  .stage > .field { padding: 28px var(--gut); }
  .f-head { flex-direction: column; gap: 2px; }
  .specimen { --sp: 10px; }
  .k-jamo { letter-spacing: .2em; }
  .roman { font-size: 30px; }
  .hanja { grid-template-columns: minmax(0, 1fr); }
  .hj { grid-column: auto !important; border-left: 0; padding: 14px 0 4px; border-top: 1px solid var(--field-line); }
  .hj:first-child { border-top: 0; }
  .hj-ko { position: static; width: auto; height: auto; clip: auto; display: block; font-size: 14px; color: var(--field-2); font-weight: 700; margin-bottom: 6px; }
  .hj-row { margin-bottom: 6px; }
  .hj-ch { font-size: 44px; }
  .actions .btn { flex: 1 1 auto; }
  .band { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 40px; }
  .cand b { font-size: 44px; }
  .meter { width: 120px; }
  .t-hangul { font-size: 96px; }
  .t-hangul.long { font-size: 48px; }
  .chip.copy { margin-inline-start: 0; }
  .art, .page .art { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .art-pre > .art-b { grid-column: 1; }
  .page-main .adslot.adfit { align-items: center; padding-inline-start: 0; }
  .art > h2 { font-size: 24px; }
  .doc-head { padding-bottom: 16px; }
  .big-mark { font-size: 110px; }
  .nf { grid-template-columns: minmax(0, 1fr); }
  .age .v { font-size: 52px; }
  .age.main .v { font-size: 84px; }
  .np-card .roman { font-size: 26px; }
  .np-kc > b { font-size: 40px; }
  .ftr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}