/* Layout: one centered column — converter "sheet" on celadon paper, seal stamp beside the result, explainer below */
:root{
  --paper:#E8EEEA; --sheet:#F7F9F6; --ink:#18221E; --muted:#56655E; --line:#C9D5CE;
  --celadon:#4F7D69; --celadon-soft:#D6E4DC; --seal:#B42F27; --seal-ink:#FBF3EF;
  --f-display:"Hahmlet","Nanum Myeongjo","Batang",Georgia,serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-seal:"Song Myung","Hahmlet",serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#101614; --sheet:#18201D; --ink:#E3EBE6; --muted:#93A49C; --line:#2B3833;
  --celadon:#8EC0A8; --celadon-soft:#24332D; --seal:#CF4237; --seal-ink:#FFF4F0; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#101614; --sheet:#18201D; --ink:#E3EBE6; --muted:#93A49C; --line:#2B3833;
  --celadon:#8EC0A8; --celadon-soft:#24332D; --seal:#CF4237; --seal-ink:#FFF4F0; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;padding-inline:16px;padding-block:28px 56px}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
header{display:flex;flex-direction:column;gap:6px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--celadon);font-weight:600}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,6vw,44px);line-height:1.1;margin:0;text-wrap:balance}
h1 .ko{color:var(--seal)}
.lede{color:var(--muted);margin:0;max-width:60ch}

.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:22px}
label.field{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.inputrow{display:flex;gap:10px;flex-wrap:wrap}
#name{flex:1 1 240px;min-width:0;font:500 20px var(--f-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:4px;padding:12px 14px}
#name:focus{outline:none;border-color:var(--celadon);box-shadow:0 0 0 3px var(--celadon-soft)}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--celadon);width:16px;height:16px}
.examples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.chip{font:500 13px var(--f-body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}
.chip:hover{border-color:var(--celadon);color:var(--celadon)}
.chip:focus-visible,button:focus-visible{outline:2px solid var(--celadon);outline-offset:2px}

.result{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border-top:1px solid var(--line);padding-top:22px}
.result-main{min-width:0;display:flex;flex-direction:column;gap:10px}
.status{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.04em;border-radius:999px;padding:3px 10px;background:var(--celadon-soft);color:var(--celadon)}
.status.est{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
#hangul{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,10vw,68px);line-height:1.1;letter-spacing:.02em;margin:0;overflow-wrap:anywhere}
#roman{font-family:var(--f-mono);font-size:15px;color:var(--muted);margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{font:600 14px var(--f-body);border-radius:4px;padding:9px 16px;cursor:pointer;border:1.5px solid var(--ink);background:var(--ink);color:var(--sheet)}
.btn:hover{opacity:.88}
#copied{font-size:13px;color:var(--celadon)}

/* seal stamp */
.seal{--n:3;width:132px;aspect-ratio:1;max-width:100%;background:var(--seal);color:var(--seal-ink);border-radius:10px;padding:10px;display:grid;direction:rtl;grid-auto-flow:column;place-items:center;transform:rotate(-4deg);filter:url(#rough);box-shadow:inset 0 0 0 4px var(--seal),inset 0 0 0 6px var(--seal-ink)}
.seal span{font-family:var(--f-seal);line-height:1;direction:ltr}
.seal-cap{font-size:11px;text-align:center;color:var(--muted);margin-top:10px;letter-spacing:.06em}

.variants{display:flex;flex-direction:column;gap:8px}
.variants h3,.breakdown h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:600}
.var-list{display:flex;flex-wrap:wrap;gap:8px}
.var{display:flex;align-items:baseline;gap:8px;border:1px solid var(--line);border-radius:4px;padding:6px 12px;background:transparent;cursor:pointer;color:var(--ink)}
.var b{font:600 18px var(--f-display)}
.var small{font-size:11px;color:var(--muted)}
.var[aria-pressed="true"]{border-color:var(--celadon);background:var(--celadon-soft)}

.breakdown{display:flex;flex-direction:column;gap:10px}
.blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.block{border:1px solid var(--line);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--paper)}
.block .ch{font:600 34px var(--f-display);line-height:1}
.block .rr{font:500 13px var(--f-mono);color:var(--celadon)}
.jamo{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.jamo span b{font-family:var(--f-display);color:var(--ink);font-weight:600;display:inline-block;width:1.4em}

.ad{border:1px dashed var(--line);border-radius:4px;min-height:90px;display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

article{display:flex;flex-direction:column;gap:14px;max-width:65ch}
article h2{font-family:var(--f-display);font-size:24px;margin:10px 0 0;text-wrap:balance}
article h3{font-size:16px;margin:6px 0 0}
article p{margin:0;color:var(--ink)}
article .ex{font-family:var(--f-display);font-weight:600;color:var(--seal)}
table{border-collapse:collapse;width:100%;font-size:14px}
.tbl{overflow-x:auto}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
td.k{font-family:var(--f-display);font-weight:600;font-size:17px}
footer{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}

@media (max-width:520px){
  .sheet{padding:18px}
  .result{grid-template-columns:1fr}
  .seal-box{justify-self:start}
  .seal{width:112px}
}
@media (prefers-reduced-motion:no-preference){
  .seal.stamp{animation:stamp .35s ease-out}
  @keyframes stamp{0%{transform:rotate(-4deg) scale(1.15);opacity:.4}100%{transform:rotate(-4deg) scale(1);opacity:1}}
}
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
.topbar{max-width:760px;margin:0 auto 8px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--ink);text-decoration:none}
.brand span{color:var(--seal)}
.topbar nav{display:flex;gap:16px;font-size:14px}
a{color:var(--celadon)}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover{color:var(--celadon)}
footer nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.page{max-width:65ch}
.page h1{margin-bottom:8px}
.page h2{font-family:var(--f-display);font-size:22px;margin:24px 0 6px}
.page p,.page li{color:var(--ink)}
.updated{color:var(--muted);font-size:14px}