:root{--bg:#f8f7f3;--card:#fff;--accent:#ff7aa2;--muted:#666}
*{box-sizing:border-box;font-family:Inter, Noto Sans KR, system-ui, Arial}
body{margin:0;background:var(--bg);color:#111;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.app{width:100%;max-width:920px;background:var(--card);border-radius:14px;box-shadow:0 6px 30px rgba(0,0,0,0.08);padding:20px}
header{display:flex;gap:12px;align-items:center}
header h1{margin:0;font-size:20px}
.row{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}

.board{flex:1;min-width:260px}
.word-info{background:#f2f6fb;border-radius:10px;padding:14px;position:relative;}
.english{font-size:22px;margin:0}
.hangul-target{font-size:48px;font-weight:700;margin:6px 0}
.slots{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.slot{width:65px;height:65px;border-radius:10px;border:2px dashed #ddd;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.slot.filled{border-style:solid}

.tiles{margin-top:14px;background:#fff;border-radius:10px;padding:12px;display:flex;flex-wrap:wrap;gap:10px}
.tile{min-width:55px;height:55px;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfbfb);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px;border:1px solid #e6e6e6;cursor:pointer;user-select:none}
.tile.locked{opacity:0.4;cursor:default}
.tile-roman{font-size:12px; color: #888; margin-top: 2px;}

.controls{width:300px;min-width:220px}
.list{background:#f9f9f9;padding:10px;border-radius:10px}
.list button{width:100%;text-align:left;padding:8px;border:none;background:transparent;cursor:pointer}

.actions{display:flex;gap:8px;margin-top:12px}
button.primary{background:var(--accent);color:#fff;border:none;padding:10px 12px;border-radius:8px;cursor:pointer}
button.ghost{background:#fff;border:1px solid #ddd;padding:10px 12px;border-radius:8px;cursor:pointer}
.audio-btn{position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;padding:5px;}
.audio-btn svg{width:24px;height:24px;fill:var(--accent)}

.feedback{margin-top:12px;font-weight:600;color:var(--muted)}

@media (max-width:820px){.row{flex-direction:column}.controls{width:100%}}