: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}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--green),#2f8f4f);color:#fff;font-size:20px;font-weight:800;box-shadow:0 2px 6px #4cb36459}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-text h1{font-size:19px;margin:0;letter-spacing:-.01em;font-weight:800}.brand-sub{color:var(--muted);font-size:12px;margin-top:2px}.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:start}.jamo-slot{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}.color-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.color-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1.5px solid var(--border);border-radius:4px;height:16px;padding:0;cursor:pointer;background:var(--card);transition:transform .1s,box-shadow .1s,border-color .1s}.color-btn.gray{background:var(--gray);border-color:var(--gray)}.color-btn.yellow{background:var(--yellow);border-color:var(--yellow)}.color-btn.green{background:var(--green);border-color:var(--green)}.color-btn:hover:not(:disabled){transform:translateY(-1px)}.color-btn.active{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--fg)}.color-btn:disabled{opacity:.35;cursor:not-allowed}.jamo-cell{width:100%;min-width:0;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:auto 1fr auto;gap:12px;background:var(--bg);border-radius:6px;padding:10px 14px;font-size:15px;align-items:center}.recommend-item .rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--card);color:var(--muted);font-size:12px;font-weight:600}.recommend-item .word{font-weight:700;font-size:16px}.recommend-item .badge{background:var(--green);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}.answer-input{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.answer-input input[type=date],.answer-input input[type=text]{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;outline:none;background:var(--card);color:var(--fg);font-family:inherit}.answer-input input[type=text]{flex:1;min-width:120px}.answer-input input:focus{border-color:var(--primary)}.answer-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.answer-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--bg);border-radius:6px;padding:8px 12px;font-size:14px}.answer-date{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.answer-word{font-weight:700;font-size:15px}.answer-del{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:4px}.answer-del:hover{color:#b91c1c;background:#0000000a}.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)}