:root{--bg:#f6f8f7;--surface:#fff;--muted-surface:#edf2ef;--ink:#18222f;--soft-ink:#7a8793;--muted:#52606d;--line:#dbe3e1;--line-strong:#c8d3d0;--teal:#0f766e;--known:#0f7a55;--unknown:#bd4b39;--caution:#9b5b10;--soft-shadow:0 12px 30px #18222f14;--card-shadow:0 22px 50px #18222f29;--body-font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--jp-font:"Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;color:var(--ink);background:var(--bg);font-family:var(--body-font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5}*{box-sizing:border-box}html{background:var(--bg);overscroll-behavior-x:none;min-width:320px;overflow-x:hidden}body{overscroll-behavior-x:none;background:linear-gradient(#f6f8f7fa,#eef4f2fa);min-width:320px;min-height:100svh;margin:0;overflow-x:hidden}button,input,textarea,select{font:inherit}button{-webkit-tap-highlight-color:transparent}#root{min-height:100svh;overflow-x:hidden}.app-shell,.study-shell{width:min(100%,520px);min-height:100svh;color:var(--ink);margin:0 auto}.app-shell{padding:max(22px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom))}.app-shell--center{place-content:center;justify-items:center;gap:14px;display:grid}.home-panel{padding:12px 2px 22px}.home-kicker{color:var(--muted);text-transform:uppercase;align-items:center;gap:7px;font-size:.82rem;font-weight:700;display:inline-flex}.home-panel h1{letter-spacing:0;margin:16px 0 10px;font-size:2.65rem;line-height:1.03}.brand-title{width:min(100%,360px)}.brand-title img{width:100%;height:auto;display:block}.home-copy{max-width:28rem;color:var(--muted);margin:0;font-size:1rem;line-height:1.62}.group-list{gap:12px;display:grid}.group-card{border:1px solid var(--line);width:100%;min-height:158px;color:inherit;background:var(--surface);box-shadow:var(--soft-shadow);text-align:left;cursor:pointer;border-radius:8px;padding:18px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid}.group-card:active{transform:scale(.985)}.group-card:focus-visible,.icon-button:focus-visible,.mode-switch button:focus-visible,.review-button:focus-visible,.plain-button:focus-visible{outline:3px solid color-mix(in srgb, var(--teal) 32%, transparent);outline-offset:3px}.group-card__meta{color:var(--teal);letter-spacing:0;text-transform:uppercase;font-size:.82rem;font-weight:800}.group-card__title{margin-top:16px;font-size:1.55rem;font-weight:850;line-height:1.1}.group-card__description{color:var(--muted);margin-top:8px;font-size:.98rem;line-height:1.5}.group-card__footer{color:var(--soft-ink);justify-content:space-between;align-items:center;gap:12px;margin-top:20px;font-size:.9rem;font-weight:700;display:flex}.study-shell{height:100dvh;max-height:100dvh;padding:max(12px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));overscroll-behavior:none;touch-action:none;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;display:grid;overflow:hidden}.study-header{grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;display:grid}.study-title{text-align:center;min-width:0}.study-title p{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1rem;font-weight:850;line-height:1.2;overflow:hidden}.study-title span{color:var(--muted);margin-top:3px;font-size:.78rem;font-weight:750;display:block}.icon-button{border:1px solid var(--line);width:44px;height:44px;color:var(--ink);background:var(--surface);cursor:pointer;border-radius:8px;place-items:center;display:inline-grid}.icon-button--spacer{visibility:hidden}.mode-switch{border:1px solid var(--line);background:var(--muted-surface);border-radius:8px;grid-template-columns:1fr 1fr;gap:6px;padding:5px;display:grid}.mode-switch button{min-height:38px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;gap:7px;font-size:.92rem;font-weight:800;display:inline-flex}.mode-switch button.is-selected{color:var(--ink);background:var(--surface);box-shadow:0 8px 20px #151c2414}.card-stage{overscroll-behavior:none;perspective:1300px;touch-action:none;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.study-card-shell{width:min(88vw,390px);height:min(60svh,520px);min-height:360px;max-height:560px;color:inherit;cursor:grab;touch-action:none;transform:translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--drag-rotate));-webkit-user-select:none;user-select:none;will-change:transform;background:0 0;border:0;border-radius:8px;padding:0;transition:transform .38s cubic-bezier(.2,.84,.24,1);animation:.18s cubic-bezier(.2,.84,.24,1) card-enter;position:relative}.study-card-shell[data-dragging=true]{cursor:grabbing;transition:none;animation:none}.study-card-shell[data-exit=left]{animation:none;transform:translate(-116vw,-12px)rotate(-17deg)}.study-card-shell[data-exit=right]{animation:none;transform:translate(116vw,-12px)rotate(17deg)}@keyframes card-enter{0%{opacity:0;transform:translateY(22px)scale(.985)}to{opacity:1;transform:translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--drag-rotate)) scale(1)}}.study-card{transform-style:preserve-3d;border-radius:8px;transition:transform .42s cubic-bezier(.2,.78,.2,1);display:block;position:absolute;inset:0}.study-card-shell[data-flipped=true] .study-card{transform:rotateY(180deg)}.study-card__face{border:1px solid var(--line-strong);background:linear-gradient(180deg, #ffffffeb, #ffffffb8), var(--surface);box-shadow:var(--card-shadow);backface-visibility:hidden;border-radius:8px;place-items:center;padding:28px;display:grid;position:absolute;inset:0;overflow:hidden}.study-card__front:before,.study-card__back:before{border:1px solid color-mix(in srgb, var(--line) 76%, transparent);content:"";pointer-events:none;border-radius:6px;position:absolute;inset:16px}.study-card__back{align-content:center;justify-items:center;gap:14px;transform:rotateY(180deg)}.front-text{max-width:100%;color:var(--ink);font-family:var(--jp-font);letter-spacing:0;overflow-wrap:anywhere;text-align:center;font-weight:750;line-height:1.08;display:block}.front-text--symbol{font-size:6rem}.front-text--word{font-size:3.4rem}.front-text--phrase{font-size:2.1rem;line-height:1.22}.front-text--sentence{font-size:1.45rem;line-height:1.38}.reading-text{color:var(--ink);overflow-wrap:anywhere;text-align:center;font-size:3.6rem;font-weight:850;line-height:1.05}.romaji-text{color:var(--teal);overflow-wrap:anywhere;text-align:center;font-size:1.25rem;font-weight:850;line-height:1}.meaning-text{max-width:17rem;color:var(--muted);overflow-wrap:anywhere;text-align:center;font-size:1.08rem;font-weight:700;line-height:1.5}.swipe-label{z-index:2;opacity:0;pointer-events:none;border-radius:8px;align-items:center;gap:6px;padding:8px 11px;font-size:.88rem;font-weight:850;display:inline-flex;position:absolute;top:22px}.swipe-label--known{color:var(--known);background:color-mix(in srgb, var(--known) 12%, white);opacity:var(--known-opacity,0);left:12px}.swipe-label--unknown{color:var(--unknown);background:color-mix(in srgb, var(--unknown) 12%, white);opacity:var(--unknown-opacity,0);right:12px}.review-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.review-button{border:1px solid var(--line);background:var(--surface);min-height:50px;font:inherit;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:7px;font-size:.98rem;font-weight:850;display:inline-flex}.review-button--known{color:var(--known)}.review-button--unknown{color:var(--unknown)}.loading-mark{border:1px solid var(--line);width:58px;height:58px;color:var(--teal);background:var(--surface);box-shadow:var(--soft-shadow);border-radius:8px;place-items:center;display:grid}.loading-copy,.empty-copy{color:var(--muted);margin:0;font-weight:750}.plain-button{border:1px solid var(--line);min-height:42px;color:var(--ink);background:var(--surface);font:inherit;border-radius:8px;padding:0 14px;font-weight:800}@media (width<=380px){.front-text--symbol{font-size:5.2rem}.front-text--word{font-size:3rem}.reading-text{font-size:3.15rem}.romaji-text{font-size:1.12rem}.review-button{font-size:.92rem}}@media (width>=760px){.app-shell,.study-shell{width:min(100%,680px)}.group-list{grid-template-columns:1fr 1fr}}