:root{--bg:#fafafa;--fg:#0a0a0a;--card:#ffffff;--muted:#6b7280;--border:#e5e7eb;--accent:#111827}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--fg);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:inherit;text-decoration:none}
.page{min-height:100dvh;padding:24px 16px}
.container{max-width:900px;margin:0 auto;width:80vw;min-width:320px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.title{font-size:20px;font-weight:700}
.sub{font-size:14px;color:var(--muted)}
.card{border:1px solid var(--border);background:var(--card);border-radius:24px;padding:18px}
.btn{border-radius:14px;padding:10px 14px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:14px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{opacity:.6;cursor:not-allowed}
.input,select,textarea{border:1px solid var(--border);border-radius:14px;padding:10px 12px;font-size:14px;outline:none;background:#fff;color:var(--fg);width:100%}
.input:focus,select:focus,textarea:focus{border-color:#9ca3af}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.muted{color:var(--muted)}
.space{height:16px}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;background:#f9fafb;color:#374151}
.study-wrap{max-width:900px;margin:0 auto;width:80vw;min-width:320px}
.study-card{min-height:50vh;display:flex;flex-direction:column;justify-content:space-between;padding:44px 32px}
.word{font-size:46px;font-weight:800;letter-spacing:-.02em;text-align:center}
.phonetic{margin-top:10px;font-size:14px;color:var(--muted);text-align:center}
.divider{margin-top:22px;border-top:1px solid #f3f4f6;padding-top:18px}
.hint{text-align:center;color:var(--muted);font-size:14px}
.meaning{font-size:16px}
.example{font-size:14px;color:#374151}
.example-tr{font-size:14px;color:var(--muted)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-big{padding:18px 14px;font-size:18px;border-radius:18px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{border-radius:14px;padding:10px 12px;border:1px solid var(--border);background:#fff;font-size:14px;cursor:pointer}
.chip-active{background:var(--accent);border-color:var(--accent);color:#fff}
.notice{border:1px solid var(--border);border-radius:18px;background:#fff;padding:16px;text-align:center;font-size:14px}