:root{--bg: #f7f7f8;--fg: #1a1a1a;--muted: #6b7280;--border: #e5e7eb;--gray: #9ca3af;--yellow: #f5b945;--green: #4cb364;--primary: #2563eb;--card: #ffffff}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,Apple SD Gothic Neo,Malgun Gothic,sans-serif}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.app{max-width:720px;margin:0 auto;padding:24px 16px 64px}header.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}header.topbar h1{font-size:18px;margin:0}header.topbar nav a{margin-left:16px;color:var(--muted);font-weight:500}header.topbar nav a.active{color:var(--fg)}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}.row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.row-header h2{margin:0;font-size:15px;font-weight:600}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--card);border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn:hover{opacity:.9}.btn[disabled]{opacity:.5;cursor:not-allowed}.jamo-grid{display:flex;flex-direction:column;gap:8px}.quick-input{display:flex;gap:8px;margin-bottom:4px}.quick-input input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;outline:none;background:var(--card);color:var(--fg)}.quick-input input:focus{border-color:var(--primary)}.jamo-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:6px;align-items:center}.jamo-cell{width:100%;min-width:0;max-width:72px;aspect-ratio:1;padding:0;border:2px solid var(--border);border-radius:8px;background:var(--card);font-size:22px;font-weight:700;text-align:center;outline:none;cursor:pointer;transition:all .12s;color:var(--fg)}.jamo-cell:focus{border-color:var(--primary)}.jamo-cell.gray{background:var(--gray);color:#fff;border-color:var(--gray)}.jamo-cell.yellow{background:var(--yellow);color:#fff;border-color:var(--yellow)}.jamo-cell.green{background:var(--green);color:#fff;border-color:var(--green)}.row-actions{display:flex;gap:4px}.row-actions button{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:18px}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.result-list{display:flex;flex-wrap:wrap;gap:6px;max-height:320px;overflow-y:auto}.result-item{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:14px}.result-item .pos{color:var(--muted);font-size:11px;margin-left:4px}.recommend-list{display:flex;flex-direction:column;gap:6px}.recommend-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;background:var(--bg);border-radius:6px;padding:8px 12px;font-size:14px;align-items:center}.recommend-item .word{font-weight:700}.recommend-item .meta{color:var(--muted);font-size:12px}.muted{color:var(--muted);font-size:13px}.error{color:#b91c1c;font-size:13px}.center{text-align:center;padding:24px;color:var(--muted)}.tab-row{display:flex;gap:4px;margin-bottom:12px}.tab-row button{border:none;background:transparent;padding:6px 12px;cursor:pointer;border-radius:6px;color:var(--muted);font-size:14px}.tab-row button.active{background:var(--card);color:var(--fg);border:1px solid var(--border)}