:root { --ink:#172331; --muted:#6e7783; --paper:#fffdf8; --cream:#f6efe4; --coral:#ef785e; --blue:#3d718f; --line:#e6ded2; --selected:#fff1dd; }
* { box-sizing:border-box; }
body { margin:0; background:#f8f4ed; color:var(--ink); font-family:"Microsoft YaHei", "Noto Sans KR", system-ui, sans-serif; }
.app { max-width:1120px; margin:auto; padding:46px 26px 30px; }
header, .section-heading, .challenge-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
header { margin-bottom:28px; } .eyebrow,.section-label { margin:0 0 5px; color:var(--coral); font-size:.75rem; letter-spacing:.12em; font-weight:800; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(2rem,5vw,3.3rem); margin-bottom:8px; letter-spacing:-.05em; } h2 { margin-bottom:0; font-size:1.25rem; } .subtitle,.section-heading>p { color:var(--muted); margin-bottom:0; }
button { border:0; border-radius:12px; padding:12px 18px; font:inherit; font-weight:700; cursor:pointer; transition:.18s transform,.18s background; } button:hover { transform:translateY(-2px); } .primary { background:var(--ink); color:#fff; } .outline { background:transparent; color:var(--ink); border:1px solid var(--line); } .outline[aria-pressed="false"] { color:var(--muted); } .small { padding:8px 12px; font-size:.85rem; }
.hero { display:grid; grid-template-columns:1fr 1.1fr; border-radius:22px; overflow:hidden; box-shadow:0 12px 32px #5c4d3920; margin-bottom:25px; } .builder { background:#f2d7a7; padding:30px; text-align:center; } .guide { background:var(--ink); color:#fff; padding:30px; } .guide .section-label { color:#f2d7a7; } .guide ol { padding-left:22px; line-height:1.9; margin:8px 0 16px; } .tip { color:#c5d1da; font-size:.87rem; line-height:1.55; margin:0; }
.syllable { font-family:"Malgun Gothic", sans-serif; font-size:7rem; line-height:1; font-weight:700; } .romanization { height:22px; color:#7d522e; font-weight:700; } .actions { display:flex; justify-content:center; gap:10px; }
.practice,.letters,.keyboard-panel { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px; margin-top:20px; } .challenge-row { justify-content:flex-start; margin-top:18px; } .challenge { font-family:"Malgun Gothic"; font-size:2.3rem; min-width:50px; text-align:center; font-weight:700; } input { flex:1; max-width:460px; border:1px solid var(--line); background:#fff; border-radius:10px; font:1rem "Malgun Gothic","Microsoft YaHei",sans-serif; padding:13px 15px; outline-color:var(--blue); } .result { font-size:.9rem; font-weight:700; color:var(--blue); min-width:70px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; margin-top:18px; } .letter-card { position:relative; min-height:102px; padding:10px; border:1px solid var(--line); background:#fff; text-align:left; } .letter-card.selected { background:var(--selected); border-color:#d99255; box-shadow:inset 0 0 0 1px #d99255; } .hangul { display:block; font-family:"Malgun Gothic"; font-size:2rem; line-height:1.1; } .sound { display:block; font-size:.78rem; color:var(--muted); margin-top:4px; } .key { position:absolute; right:9px; bottom:8px; border-radius:5px; background:#e9edf0; color:#44505e; padding:3px 6px; font-size:.72rem; font-family:monospace; }
.keyboard { display:flex; flex-direction:column; gap:7px; margin-top:18px; overflow:auto; padding-bottom:4px; } .key-row { display:flex; gap:6px; min-width:680px; } .keyboard-key { width:58px; height:53px; border:1px solid var(--line); border-radius:8px; padding:5px; background:#fff; text-align:center; } .keyboard-key b { display:block; font-size:.72rem; color:var(--muted); } .keyboard-key span { display:block; font-family:"Malgun Gothic"; font-size:1.15rem; margin-top:3px; } .keyboard-key.empty { background:#f8f5f0; } footer { text-align:center; color:var(--muted); font-size:.85rem; padding:24px 0 5px; }
@media (max-width:650px) { .app { padding:25px 15px; } header { align-items:flex-start; flex-direction:column; gap:12px; } .hero { grid-template-columns:1fr; } .builder,.guide { padding:24px; } .challenge-row { align-items:stretch; flex-wrap:wrap; gap:10px; } input { min-width:100%; order:2; } .card-grid { grid-template-columns:repeat(4,1fr); } .letter-card { min-height:89px; } }