:root{
  --bg:#0b0f16; --bg2:#121826; --card:#161e2e; --line:#243044;
  --fg:#e8eefc; --fg2:#93a4c4; --fg3:#5f7292;
  --n5:#4ade80; --n4:#60a5fa; --n3:#fbbf24; --n2:#f472b6; --n1:#a78bfa;
  --accent:var(--n5);
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;
  overscroll-behavior-y:none;
}
#app{display:flex;flex-direction:column;height:100dvh;max-width:640px;margin:0 auto;position:relative}

.topbar{padding:calc(var(--safe-t) + 10px) 14px 8px;background:rgba(11,15,22,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.brand{font-weight:800;font-size:17px;letter-spacing:-.4px}
.brand span{color:var(--fg3);font-weight:600;margin-left:5px;font-size:14px}
.acct{background:var(--bg2);border:1px solid var(--line);color:var(--fg2);border-radius:999px;
  padding:5px 11px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;max-width:46vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct.on{color:#08101c;background:var(--accent);border-color:transparent}
.levels{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.levels::-webkit-scrollbar{display:none}
.lv{flex:0 0 auto;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--fg2);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.lv.on{color:#0b0f16;border-color:transparent}
.lv[data-l="n5"].on{background:var(--n5)}
.lv[data-l="n4"].on{background:var(--n4)}
.lv[data-l="n3"].on{background:var(--n3)}
.lv[data-l="n2"].on{background:var(--n2)}
.lv[data-l="n1"].on{background:var(--n1)}

main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(66px + var(--safe-b))}
.view{padding:14px}
.hidden{display:none !important}

.progress-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ps-item{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:9px 6px;text-align:center}
.ps-item b{display:block;font-size:19px;line-height:1.15}
.ps-item span{font-size:11px;color:var(--fg3)}

.deck{perspective:1400px;margin-bottom:12px}
.card{position:relative;min-height:min(52vh,400px);border-radius:20px;background:var(--card);
  border:1px solid var(--line);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 40px rgba(0,0,0,.42)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent);opacity:.85}
.card-inner{width:100%;padding:22px 20px;text-align:center}
.face{display:none}
.card.flipped .front{display:none}
.card:not(.flipped) .front{display:block}
.card.flipped .back{display:block}
.word{font-size:clamp(34px,11vw,58px);font-weight:800;letter-spacing:-1px;line-height:1.2;word-break:keep-all}
.word.small{font-size:clamp(22px,6.4vw,30px);color:var(--fg3);font-weight:700}
.reading{font-size:clamp(19px,5.4vw,24px);color:var(--accent);font-weight:700;margin-top:6px}
.romaji{color:var(--fg3);font-size:13px;margin-top:3px}
.meanings{margin-top:14px;font-size:clamp(17px,4.9vw,21px);font-weight:700;line-height:1.5;word-break:keep-all}
.meanings .ko{display:block}
.meanings .num{color:var(--fg3);font-size:15px;margin-right:5px}
.pos{margin-top:9px;color:var(--fg3);font-size:12px}
.ex{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);text-align:left;font-size:14px;color:var(--fg2);line-height:1.6}
.ex .en{color:var(--fg3);font-size:12.5px}
.state{margin-top:12px;font-size:11.5px;color:var(--fg3)}
.hint{color:var(--fg3);font-size:13px;margin-top:18px}
.front-reading{margin-top:10px;font-size:clamp(17px,5vw,22px);color:var(--fg2);font-weight:600}
.front-reading.small{font-size:15px;margin-top:6px}

.controls.reveal .show-answer{display:none}
.btn{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
  gap:8px;text-decoration:none}
.btn.primary{background:var(--accent);color:#08101c;border-color:transparent}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:rgba(239,68,68,.4)}
.btn.big{padding:16px;font-size:16px;margin-top:16px}
.btn:active{transform:scale(.985)}
kbd{font-family:inherit;font-size:11px;opacity:.5;border:1px solid currentColor;border-radius:5px;padding:1px 5px}
.grades{display:none;grid-template-columns:repeat(4,1fr);gap:7px}
.controls.reveal .grades{display:grid}
.g{padding:14px 4px;border-radius:13px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);
   font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px}
.g.again{border-color:rgba(239,68,68,.5);color:#fca5a5}
.g.hard{border-color:rgba(245,158,11,.5);color:#fcd34d}
.g.good{border-color:rgba(34,197,94,.5);color:#86efac}
.g.easy{border-color:rgba(96,165,250,.5);color:#93c5fd}
.g:active{transform:scale(.96)}
.deckmeta{display:flex;align-items:center;gap:8px;margin-top:10px;justify-content:center;color:var(--fg3);font-size:12px}
.mini{background:none;border:none;color:var(--fg3);font-size:12.5px;font-family:inherit;cursor:pointer;padding:5px 8px}

.done-panel{display:none;text-align:center;padding:26px 8px}
.done-panel.on{display:block}
.done-emoji{font-size:44px}
.done-panel h2{margin:8px 0 6px;font-size:21px}
.done-panel p{color:var(--fg2);font-size:14px;line-height:1.6}
.done-actions{display:grid;gap:9px;margin-top:20px}

/* 세그먼트 / 칩 / 모드 */
.seg{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px}
.seg button{flex:1;padding:9px 4px;border:none;background:none;color:var(--fg3);font-weight:700;font-size:13.5px;
  font-family:inherit;border-radius:9px;cursor:pointer}
.seg button.on{background:var(--accent);color:#08101c}
.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mode{padding:14px 8px;border-radius:13px;border:1px solid var(--line);background:var(--bg2);color:var(--fg2);
  font-weight:700;font-size:14px;font-family:inherit;cursor:pointer}
.mode.on{background:var(--accent);color:#08101c;border-color:transparent}
.chips-row{display:flex;gap:6px}
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--fg2);font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer}
.chip.on{background:var(--accent);color:#08101c;border-color:transparent}
.exam-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;padding:14px}
.exam-card b{font-size:15px}
.exam-card p{margin:4px 0 0}
.exam-card .btn{width:auto;padding:11px 18px;flex:0 0 auto}

/* 검색 / 목록 */
#search,#ksearch,#gsearch{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);font-size:15px;font-family:inherit;outline:none;margin-bottom:10px}
#search:focus,#ksearch:focus,#gsearch:focus{border-color:var(--accent)}
.list{display:grid;gap:7px;margin-top:10px}
.item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:var(--bg2);
      border:1px solid var(--line);cursor:pointer}
.item .w{font-size:17px;font-weight:700;flex:0 0 auto;min-width:70px}
.item .m{flex:1;min-width:0}
.item .r{color:var(--accent);font-size:12.5px}
.item .k{color:var(--fg2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--fg3)}
.dot.learning{background:var(--warn)}
.dot.known{background:var(--ok)}
.list-more{text-align:center;color:var(--fg3);font-size:12.5px;padding:16px}

.grid-k{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.kcell{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer}
.kcell .ch{font-size:27px;font-weight:700;line-height:1.2}
.kcell .mn{font-size:11px;color:var(--fg3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcell .rd{font-size:12.5px;color:var(--accent);margin-top:2px;font-weight:700}
.k-hira{font-size:20px;font-weight:800;color:var(--accent);margin-bottom:8px}
.kcell .st{font-size:10px;color:var(--accent)}
.gram{display:grid;gap:8px}
.gcard{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:14px}
.gcard .p{font-size:17px;font-weight:800;color:var(--accent)}
.gcard .ko{font-size:14.5px;font-weight:700;margin-top:5px;line-height:1.5}
.gcard .form{font-size:12.5px;color:var(--fg3);margin-top:5px}
.gcard .note{font-size:13px;color:var(--fg2);margin-top:8px;line-height:1.6}
.gcard .ex{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:13.5px;line-height:1.6}

/* 퀴즈 */
.q-top{display:flex;justify-content:space-between;font-size:13px;color:var(--fg3);font-weight:700;margin-bottom:8px}
.bar{height:9px;border-radius:999px;background:var(--bg2);overflow:hidden;border:1px solid var(--line)}
.bar.thin{height:5px;margin-bottom:16px}
.bar i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .25s}
.q-body{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 16px;text-align:center;margin-bottom:12px}
.q-prompt{font-size:clamp(24px,7.5vw,40px);font-weight:800;line-height:1.3;word-break:keep-all}
.q-prompt.small{font-size:clamp(16px,4.6vw,20px);font-weight:700;line-height:1.6}
.q-prompt .sub{display:block;font-size:13px;color:var(--fg3);font-weight:600;margin-bottom:8px}
.options{display:grid;gap:8px;margin-top:18px}
.opt{padding:14px;border-radius:13px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);
  font-size:15px;font-weight:700;font-family:inherit;text-align:left;cursor:pointer;line-height:1.45}
.opt.right{background:rgba(34,197,94,.18);border-color:var(--ok);color:#bbf7d0}
.opt.wrong{background:rgba(239,68,68,.16);border-color:var(--bad);color:#fecaca}
.opt:disabled{cursor:default}
.listen{margin-top:12px;font-size:14px;color:var(--accent)}
.score-big{font-size:44px;font-weight:800;margin:10px 0 4px}
.missed{display:grid;gap:6px;margin-top:18px;text-align:left}
.missed .mrow{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13.5px}
.missed .mrow b{color:var(--bad)}
#quiz-result{text-align:center}

/* 통계 / 랭킹 */
.stat-hero{text-align:center;padding:10px 0 4px}
.streak{font-size:46px;font-weight:800;line-height:1;color:var(--accent)}
.streak-label{color:var(--fg3);font-size:13px;margin-top:6px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}
.st{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:13px}
.st b{display:block;font-size:22px;line-height:1.2}
.st span{color:var(--fg3);font-size:11.5px}
.sec{font-size:13px;color:var(--fg3);margin:22px 0 10px;font-weight:700}
.sec.first{margin-top:0}
.rank{display:grid;gap:6px;margin-top:10px}
.rrow{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.rrow.me{border-color:var(--accent)}
.rrow .n{color:var(--fg3);font-weight:800;font-size:13px}
.rrow .nk{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .v{color:var(--accent);font-weight:800;font-size:14px}
.rrow .s{font-size:11px;color:var(--fg3);font-weight:600}
.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:34px 1fr 46px;align-items:center;gap:9px;font-size:12px}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.heat .d{aspect-ratio:1;border-radius:7px;background:var(--bg2);border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:10px;color:var(--fg3)}
.heat .d.h1{background:rgba(74,222,128,.28);color:var(--fg)}
.heat .d.h2{background:rgba(74,222,128,.6);color:#08101c}
.heat .d.h3{background:var(--n5);color:#08101c;font-weight:800}
.danger-zone{margin-top:30px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.row input[type=number]{width:80px;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);
  color:var(--fg);font-family:inherit;font-size:15px;text-align:center}
.row input[type=checkbox]{width:22px;height:22px;accent-color:var(--n5)}
.howto{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:14px}
.howto p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--fg2)}
.howto p:last-of-type{margin-bottom:14px}
.k{display:inline-block;padding:1px 7px;border:1px solid var(--line);border-radius:6px;color:var(--fg);font-size:12px}
.muted{color:var(--fg3)}
.small{font-size:12.5px;line-height:1.65}

.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(11,15,22,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b);z-index:30}
.tabbar button{background:none;border:none;color:var(--fg3);font-family:inherit;font-size:10.5px;font-weight:700;
  padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.tabbar button i{font-style:normal;font-size:17px;filter:grayscale(1) opacity(.55)}
.tabbar button.on{color:var(--fg)}
.tabbar button.on i{filter:none}

.sheet{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:flex-end;z-index:80}
.sheet.on{display:flex}
.sheet-panel{background:var(--bg);width:100%;max-width:640px;margin:0 auto;border-radius:20px 20px 0 0;
  padding:20px 16px calc(20px + var(--safe-b));max-height:88vh;overflow:auto;border:1px solid var(--line);border-bottom:none}
.sheet-panel .row{padding:10px 2px}
.sheet-panel input[type=text],.sheet-panel input[type=password],.sheet-panel input[type=tel]{
  width:100%;padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);
  font-size:16px;font-family:inherit;outline:none;margin-bottom:9px}
.sheet-actions{display:grid;gap:9px;margin-top:6px}

.stroke-note{color:var(--fg3);font-size:12px}
.strokes{display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.ksvg{width:min(42vw,150px);height:min(42vw,150px)}
.ksvg path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4}
.ksvg .ghost path{stroke:var(--fg3);opacity:.22}
.ksvg .ink path{stroke:var(--accent)}
.mini.replay{color:var(--accent);font-size:13px;margin-top:4px}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translate(-50%,14px);
  background:#e8eefc;color:#0b0f16;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700;
  opacity:0;pointer-events:none;transition:.22s;z-index:90;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 학습 카드: 엄지용 큰 버튼 ---------- */
.deckmeta.above{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--fg3);font-size:12px;min-height:26px}
.deckmeta.above #deck-count{margin-left:auto}
.card-inner{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.g b{font-size:14px;font-weight:800;font-style:normal}
.g i{font-size:10.5px;font-style:normal;opacity:.75;font-weight:600}
.swipe-hint{display:none;text-align:center;color:var(--fg3);font-size:11.5px;margin-top:9px}
.swipe-hint b{color:var(--fg2)}
.ex .ko{color:var(--fg);font-size:13px}

#app.onehand .progress-strip{margin-bottom:8px}
#app.onehand .ps-item{padding:6px 4px}
#app.onehand .ps-item b{font-size:16px}
#app.onehand main{padding-bottom:calc(232px + var(--safe-b))}
#app.onehand .card{height:calc(100dvh - 510px);min-height:118px;max-height:430px}
#app.onehand .word{font-size:clamp(40px,14vw,64px)}
#app.onehand .front-reading{font-size:clamp(20px,6vw,26px)}
#app.onehand .controls{position:fixed;left:0;right:0;bottom:calc(68px + var(--safe-b));max-width:640px;margin:0 auto;
  padding:12px 14px 14px;z-index:24;
  background:linear-gradient(180deg,rgba(11,15,22,0) 0%,rgba(11,15,22,.9) 22%,rgba(11,15,22,.97) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#app.onehand .controls .btn.show-answer{padding:22px;font-size:18px;border-radius:16px}
#app.onehand .grades{grid-template-columns:repeat(2,1fr);gap:10px}
#app.onehand .g{padding:19px 8px;font-size:16px;border-radius:16px;gap:5px}
#app.onehand .g b{font-size:17px}
#app.onehand .g i{font-size:11.5px}
#app.onehand .swipe-hint{display:block}
/* 설정에 남은 리셋 버튼이 바닥 바와 겹치지 않게 */
#app.onehand #done-panel.on{padding-bottom:40px}

/* 비밀번호 입력 + 보기 토글 */
.pin-wrap{position:relative}
.pin-wrap input{margin-bottom:9px;padding-right:52px}
.pin-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  font-size:18px;cursor:pointer;padding:6px 8px;color:var(--fg3)}