:root{--bg:#f8fafc;--surface:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--primary:#2563eb;--primary-text:#fff;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}input,select{font:inherit}.app{height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex}.sentence-bar{background:var(--surface);border-bottom:1px solid var(--border);gap:8px;padding:8px;display:flex}.speak-area{border:2px solid var(--primary);text-align:left;background:#eff6ff;border-radius:14px;flex:1;align-items:center;gap:8px;min-height:112px;padding:6px 10px;display:flex;overflow:hidden}.sentence-placeholder{color:var(--muted);flex:1;font-size:22px}.sentence-items{flex:1;gap:6px;display:flex;overflow-x:auto}.chip{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;flex:none;align-items:center;min-width:56px;padding:4px;font-size:30px;line-height:1.1;display:flex}.chip img{object-fit:contain;border-radius:6px;width:64px;height:64px}.chip small{white-space:nowrap;font-size:16px}.speak-icon{font-size:44px}.sentence-actions{flex-direction:column;gap:6px;display:flex}.sentence-actions button{border:1px solid var(--border);background:var(--surface);border-radius:14px;flex:1;width:76px;font-size:30px}.tabs{background:var(--surface);border-bottom:1px solid var(--border);scrollbar-width:none;gap:6px;padding:8px;display:flex;overflow-x:auto}.tab{background:var(--tab-color);border:3px solid #0000;border-radius:999px;flex:none;align-items:center;gap:4px;padding:10px 20px;font-size:20px;font-weight:600;display:flex}.tab.active{border-color:var(--text)}.tab-emoji{font-size:28px}.grid{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));background:color-mix(in srgb, var(--cat-color) 35%, var(--bg));flex:1;grid-auto-rows:min-content;gap:14px;padding:14px;display:grid;overflow-y:auto}.card-wrap{position:relative;container-type:inline-size}.card{aspect-ratio:1;border:1px solid var(--border);background:var(--surface);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;padding:6px;transition:transform 80ms;display:flex;box-shadow:0 1px 3px #00000014}.card:active{background:#eff6ff;transform:scale(.95)}.card-emoji{font-size:clamp(32px,45cqi,160px);line-height:1}.card-image{aspect-ratio:1;object-fit:contain;border-radius:10px;width:78%}.card-label{text-align:center;word-break:keep-all;font-size:clamp(15px,17cqi,44px);font-weight:700;line-height:1.2}.add-card{color:var(--muted);background:0 0;border-style:dashed}.card-delete{color:#fff;background:#ef4444;border:none;border-radius:50%;width:30px;height:30px;font-weight:700;position:absolute;top:-6px;right:-6px}.sheet-backdrop{z-index:10;background:#0006;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:560px;max-height:90%;padding:20px 16px calc(16px + env(safe-area-inset-bottom));background:var(--surface);-webkit-user-select:text;user-select:text;border-radius:20px 20px 0 0;overflow-y:auto}.sheet h2{margin:0 0 12px;font-size:20px}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field span{font-size:15px;font-weight:600}.field input:not([type=range]):not([type=file]),.field select{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:10px 12px}.toggle{align-items:center;gap:10px;padding:8px 0;font-weight:600;display:flex}.toggle input{width:22px;height:22px}.sheet-actions{gap:8px;margin-top:16px;display:flex}.sheet-actions button{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex:1;padding:12px;font-weight:600}.sheet-actions .primary{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}.preview{aspect-ratio:1;border:1px solid var(--border);--cols:3;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:120px;margin:0 auto 16px;display:flex}.preview img{aspect-ratio:1;object-fit:cover;border-radius:10px;width:70%}.search-row{gap:6px;display:flex}.search-row input{border:1px solid var(--border);border-radius:10px;flex:1;min-width:0;padding:10px 12px}.search-row button{background:var(--primary);color:var(--primary-text);border:none;border-radius:10px;padding:0 16px;font-weight:600}.search-results{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:260px;display:grid;overflow-y:auto}.search-results button{border:1px solid var(--border);background:#fff;border-radius:10px;flex-direction:column;align-items:center;padding:4px;display:flex}.search-results img{aspect-ratio:1;object-fit:contain;width:100%}.search-results small{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:11px;overflow:hidden}.error{color:#dc2626}.credit{color:var(--muted);margin:16px 0 0;font-size:12px;line-height:1.5}.card-image{object-fit:contain;background:#fff}.empty-hint{text-align:center;color:var(--muted);grid-column:1/-1;margin:24px 8px;line-height:1.6}.level-options{flex-direction:column;gap:6px;display:flex}.level-option{border:2px solid var(--border);background:var(--surface);text-align:left;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;display:flex}.level-option.on{border-color:var(--primary);background:#eff6ff}.level-option small{color:var(--muted)}.level-option .count{color:var(--primary);margin-left:auto;font-weight:700}.tabs-row{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;display:flex}.tabs-row .tabs{border-bottom:none;flex:1;min-width:0}.gate{flex:none;padding:0 6px;position:relative}.gate-button{color:#cbd5e1;background:0 0;border:none;border-radius:50%;width:44px;height:44px;font-size:26px}.gate-hint{z-index:5;color:#fff;white-space:nowrap;background:#334155;border-radius:999px;padding:2px 8px;font-size:12px;position:absolute;top:100%;right:4px}.edit-banner{background:#fef3c7;border-bottom:1px solid #fcd34d;align-items:center;gap:8px;padding:8px 10px;font-size:14px;display:flex}.edit-banner span{flex:1}.edit-banner button{background:var(--primary);color:var(--primary-text);border:none;border-radius:10px;padding:8px 14px;font-weight:700}.manage-actions{gap:6px;margin-bottom:16px;display:grid}.manage-actions button{border:1px solid var(--border);background:var(--surface);text-align:left;border-radius:12px;padding:12px;font-weight:600}.sheet{max-width:680px;font-size:18px}.sheet h2{font-size:26px}.field span,.toggle{font-size:18px}.sheet-actions button,.manage-actions button{padding:14px;font-size:18px}.level-option b{font-size:20px}.level-option small{font-size:15px}.edit-banner{padding:10px 14px;font-size:18px}.edit-banner button{padding:10px 18px;font-size:18px}.empty-hint{font-size:22px}.gate-hint{font-size:15px}@media (width<=600px){.speak-area{min-height:84px}.sentence-placeholder{font-size:16px}.chip img{width:40px;height:40px}.chip small{font-size:12px}.speak-icon{font-size:32px}.sentence-actions button{width:56px;font-size:22px}.tab{border-width:2px;padding:8px 14px;font-size:16px}.tab-emoji{font-size:20px}.grid{gap:10px;padding:10px}.gate-button{width:32px;height:32px;font-size:18px}.sheet,.field span,.toggle,.sheet-actions button,.manage-actions button,.edit-banner,.edit-banner button{font-size:15px}.sheet h2{font-size:20px}.level-option b{font-size:16px}.level-option small{font-size:13px}.empty-hint{font-size:16px}}