:root{
  --bg:#17131f;
  --panel:#211a2d;
  --panel2:#2a2038;
  --text:#f5f1fb;
  --muted:#a99db8;
  --accent:#9b6cff;
  --accent2:#bb9cff;
  --line:rgba(255,255,255,.08);
  --shadow:0 18px 45px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif}
body{overscroll-behavior:none}
button,input{font:inherit}
button{color:inherit}
.hidden{display:none!important}
.app{max-width:680px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 18px}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--accent2);font-weight:800;margin-bottom:6px}
.topbar h1{font-size:27px;margin:0;font-weight:800}
.subtitle{font-size:13px;color:var(--muted);margin-top:5px}
.icon-btn{width:44px;height:44px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:22px}
.progress-wrap{margin:0 2px 17px}
.progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:7px}
.progress-track{height:5px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;transition:width .2s ease}
.sentence-card{position:relative;min-height:285px;background:linear-gradient(180deg,#251d32,#1f182b);border:1px solid var(--line);border-radius:25px;padding:36px 28px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.english{position:relative;z-index:3;font-size:clamp(22px,5.6vw,31px);line-height:1.42;font-weight:760;letter-spacing:-.02em;max-width:100%}
.word{display:inline;cursor:pointer;border-radius:8px;padding:0 .5px;-webkit-tap-highlight-color:transparent}
.word:active{background:rgba(155,108,255,.18)}
.korean{position:relative;z-index:3;margin-top:22px;color:#c8bfd2;font-size:15px;line-height:1.65;min-height:48px;display:flex;align-items:center;justify-content:center;transition:opacity .12s ease}
.korean.pronunciation{color:var(--accent2);font-weight:700;font-size:16px}
.hold-hint{position:absolute;bottom:13px;color:#71677e;font-size:10px;letter-spacing:.01em}
.tap-hint{position:absolute;z-index:1;top:50%;transform:translateY(-50%);font-size:44px;color:rgba(255,255,255,.045);font-weight:300;pointer-events:none}
.tap-hint.left{left:12px}.tap-hint.right{right:12px}
.controls{display:flex;justify-content:center;align-items:center;gap:28px;margin:24px 0 16px}
.control-btn,.play-btn{border:0;display:grid;place-items:center}
.control-btn{width:52px;height:52px;border-radius:50%;background:var(--panel);font-size:35px;font-weight:300}
.play-btn{width:76px;height:76px;border-radius:50%;background:var(--accent);box-shadow:0 10px 30px rgba(155,108,255,.27);padding:0}
.play-btn img{width:34px;height:34px;display:block;object-fit:contain;pointer-events:none}
.utility-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.pill{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 5px;color:#ddd4e8;font-size:12px;font-weight:700}
.pill.active{background:rgba(155,108,255,.17);border-color:rgba(155,108,255,.4);color:#d9c8ff}
.footer-note{text-align:center;color:#6e647a;font-size:10px;margin-top:17px}
.lock-screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at 50% 25%,#2b1e42 0,#17131f 50%,#120f18 100%);padding:24px}
.lock-card{width:min(100%,360px);text-align:center;background:rgba(34,27,45,.86);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:28px;padding:40px 26px;box-shadow:var(--shadow)}
.brand-dot{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--accent),#6843c7);margin:0 auto 18px}
.lock-card h1{margin:0;font-size:31px}.lock-card p{color:var(--muted);margin:8px 0 26px}
.pin-display{height:52px;display:flex;align-items:center;justify-content:center;gap:17px;margin:4px 0 18px;border:1px solid var(--line);border-radius:16px;background:#17131f}
.pin-display span{width:12px;height:12px;border-radius:50%;border:2px solid #6f657b;background:transparent;transition:.12s ease}
.pin-display span.filled{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px rgba(155,108,255,.10)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.lock-card .pin-key{width:100%;height:54px;border:1px solid var(--line);background:#211a2c;border-radius:16px;color:#f8f4ff;font-size:22px;font-weight:750;margin:0;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lock-card .pin-key:active{transform:scale(.96);background:rgba(155,108,255,.22);border-color:rgba(155,108,255,.48)}
.lock-card .pin-key-blank{visibility:hidden;pointer-events:none}
.lock-card .pin-delete{font-size:21px;color:#c9bfd5;background:#1c1724}
.lock-card #installBtn{width:100%;border:0;background:var(--accent);border-radius:14px;padding:14px;margin-top:16px;font-weight:800}
.pin-error{height:20px;color:#ff9da7;font-size:12px;margin-top:9px}
.pin-display.pin-wrong{animation:pinShake .28s linear}
@keyframes pinShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);display:flex;align-items:flex-end}
.sheet-panel{width:100%;max-height:78vh;background:#1d1727;border-radius:26px 26px 0 0;padding:10px 18px calc(24px + env(safe-area-inset-bottom));overflow:auto}
.sheet-handle{width:42px;height:5px;border-radius:999px;background:#5d5368;margin:0 auto 14px}
.sheet-title{font-size:18px;font-weight:800;margin-bottom:14px}
.day-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.day-chip{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:11px 3px;font-size:12px}
.day-chip.current{background:var(--accent);border-color:var(--accent)}
.dict-popup{position:fixed;z-index:40;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 32px),440px);background:#f8f6fb;color:#201a28;border-radius:18px;padding:17px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.dict-head{display:flex;justify-content:space-between;align-items:center;font-size:20px}
.dict-head button{border:0;background:transparent;font-size:26px;color:#6e6577}
.dict-meaning{font-size:14px;font-weight:700;margin-top:8px}
.dict-example{font-size:12px;color:#716978;margin-top:9px;line-height:1.5}
@media (max-width:390px){
  .app{padding-left:14px;padding-right:14px}
  .sentence-card{min-height:270px;padding-left:22px;padding-right:22px}
  .english{font-size:24px}
}


/* v3 full answer mode */
.sentence-card.full-mode{
  min-height:330px;
  max-height:56vh;
  justify-content:flex-start;
  align-items:stretch;
  text-align:left;
  overflow-y:auto;
  padding:24px 22px 26px;
  user-select:text;
  -webkit-user-select:text;
}
.sentence-card.full-mode .tap-hint,
.sentence-card.full-mode .hold-hint{display:none}
.sentence-card.full-mode .english{font-size:17px;line-height:1.58;font-weight:650;letter-spacing:-.01em}
.sentence-card.full-mode .korean{display:block;text-align:left;margin-top:18px;font-size:12px;line-height:1.55;min-height:0}
.full-text{display:flex;flex-direction:column;gap:12px}
.full-line{display:grid;grid-template-columns:21px 1fr;gap:8px;align-items:start}
.full-num{font-size:10px;color:var(--accent2);padding-top:5px;font-weight:800}
.full-en-line{display:block}
.full-ko{display:flex;flex-direction:column;gap:7px;padding-top:14px;border-top:1px solid var(--line)}
.full-ko-line{color:#978da2}

/* compact word meaning bubble */
.dict-popup{
  position:fixed;
  z-index:60;
  width:auto;
  max-width:min(280px,calc(100vw - 16px));
  bottom:auto;
  transform:none;
  background:#f7f4fb;
  color:#201a28;
  border-radius:10px;
  padding:7px 10px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
}
.dict-popup strong{font-size:12px}
.dict-sep{margin:0 4px;color:#9b91a2}
.dict-popup .dict-meaning{font-size:12px;font-weight:500;margin:0}

.hold-hint,.footer-note{display:none!important}

/* Slightly smaller English text */
.english{font-size:clamp(22px,5.6vw,31px)!important}

/* Day picker completion badges */
.day-chip{position:relative;min-height:54px;padding:10px 4px 15px}
.day-label{display:block}
.day-done{
  display:block;
  margin-top:3px;
  font-size:8px;
  line-height:1;
  color:var(--accent2);
  opacity:.9;
}
.day-count{
  position:absolute;
  right:5px;
  bottom:3px;
  font-size:7px;
  line-height:1;
  color:#81758e;
}
.day-chip.current .day-done,
.day-chip.current .day-count{color:#efe8ff}
.day-chip.completed{border-color:rgba(155,108,255,.25)}


/* v7 Day progress UI */
.day-chip{
  position:relative;
  min-height:52px;
  border-radius:12px;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.day-chip.not-done{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.065);
  color:#8d8398;
}
.day-chip.done{
  background:rgba(155,108,255,.10);
  border-color:rgba(155,108,255,.30);
  color:#eee8f7;
}
.day-chip.current{
  background:var(--accent);
  border-color:var(--accent);
  color:white;
}
.day-chip .day-label{
  display:block;
  font-size:12px;
  font-weight:700;
}
.done-dot{
  position:absolute;
  left:6px;
  bottom:5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent2);
  opacity:.95;
}
.day-count{
  position:absolute;
  right:5px;
  bottom:4px;
  min-width:12px;
  text-align:right;
  font-size:7px;
  font-weight:800;
  line-height:1;
  color:var(--accent2);
  opacity:.95;
}
.day-chip.current .day-count,
.day-chip.current .done-dot{
  color:white;
  background:white;
}


/* v8 Day selector — practiced vs untouched */
.day-grid{
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
}
.day-chip{
  position:relative!important;
  min-height:54px!important;
  padding:10px 5px!important;
  overflow:hidden!important;
}
.day-chip.not-done{
  background:#211a2d!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:#776d82!important;
  opacity:.72!important;
}
.day-chip.done{
  background:rgba(155,108,255,.16)!important;
  border:1px solid rgba(155,108,255,.48)!important;
  color:#f2ebff!important;
  opacity:1!important;
}
.day-chip.current{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
  opacity:1!important;
}
.done-mark{
  position:absolute;
  left:5px;
  bottom:3px;
  font-size:7px;
  line-height:1;
  font-weight:900;
  color:var(--accent2);
}
.day-count{
  position:absolute!important;
  right:5px!important;
  bottom:3px!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:900!important;
  color:var(--accent2)!important;
}
.day-chip.current .done-mark,
.day-chip.current .day-count{
  color:#fff!important;
}


/* v9 — enlarge the main sentence touch area and reclaim wasted bottom space */
.player{
  padding-bottom:10px!important;
}

.sentence-card{
  min-height:clamp(330px,48vh,520px)!important;
  padding:28px 24px!important;
  margin-bottom:12px!important;
  justify-content:center!important;
}

/* Keep full-answer view useful without making it excessively tall. */
.sentence-card.full-mode{
  min-height:clamp(360px,52vh,560px)!important;
  max-height:62vh!important;
  padding:24px 22px 26px!important;
  justify-content:flex-start!important;
}

/* Pull controls upward and reduce dead vertical space below the sentence card. */
.controls{
  margin-top:10px!important;
  padding-bottom:4px!important;
}
.utility-row{
  margin-top:10px!important;
  margin-bottom:4px!important;
}
.bottom-nav{
  margin-top:8px!important;
  padding-bottom:4px!important;
}

/* On short phone screens, still prioritize the sentence touch surface. */
@media (max-height:760px){
  .sentence-card{
    min-height:42vh!important;
  }
  .sentence-card.full-mode{
    min-height:46vh!important;
    max-height:56vh!important;
  }
}


/* v10 — use all remaining vertical space for the sentence card */
html, body{
  height:100%;
}

body{
  min-height:100dvh;
}

.app{
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
}

/* Keep top sections at natural height */
.topbar,
.progress-wrap,
.controls,
.utility-row{
  flex:0 0 auto!important;
}

/* Sentence card gets all remaining vertical space */
.sentence-card{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  margin-bottom:10px!important;
  padding:28px 24px!important;
}

/* Full-answer mode also uses remaining space and scrolls internally */
.sentence-card.full-mode{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
}

/* Remove artificial bottom dead space from older layout rules */
.controls{
  margin-top:8px!important;
  margin-bottom:10px!important;
}
.utility-row{
  margin-top:0!important;
  margin-bottom:0!important;
}
.footer-note,
.bottom-nav{
  margin-bottom:0!important;
  padding-bottom:0!important;
}

/* On mobile browsers, prefer dynamic viewport height */
@supports (height:100dvh){
  .app{min-height:100dvh!important}
}


/* v12 — subtle current-sentence learning points */
.insight-box{
  position:absolute;
  left:24px;
  right:24px;
  bottom:16px;
  z-index:2;
  pointer-events:none;
  text-align:left;
  font-size:10px;
  line-height:1.45;
  color:#776f80;
  opacity:.95;
}
.insight-box > div + div{margin-top:2px}
.insight-label{
  display:inline-block;
  min-width:42px;
  margin-right:4px;
  color:#8e8497;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}
.sentence-card.full-mode .insight-box{display:none!important}
@media (max-width:390px){
  .insight-box{left:20px;right:20px;bottom:13px;font-size:9px}
  .insight-label{font-size:8px;min-width:38px}
}


/* v14 — mode toggle is visually distinct from playback settings */
.utility-row{
  grid-template-columns:repeat(4,1fr)!important;
}
#fullBtn{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:#d9d1e2!important;
  font-weight:800!important;
}
#fullBtn.active{
  background:rgba(155,108,255,.18)!important;
  border-color:rgba(155,108,255,.55)!important;
  color:#eee6ff!important;
}
#fullBtn::before{
  content:"";
}

/* Full-answer typography slightly smaller to reduce vertical scrolling */
.sentence-card.full-mode .english{
  font-size:15px!important;
  line-height:1.48!important;
}
.sentence-card.full-mode .korean{
  font-size:11px!important;
  line-height:1.45!important;
  margin-top:14px!important;
}
.full-text{
  gap:9px!important;
}
.full-ko{
  gap:5px!important;
  padding-top:10px!important;
}
.full-line{
  gap:6px!important;
}
.full-num{
  padding-top:3px!important;
}


/* v14b — sentence/full mode toggle is always a distinct mode button */
#fullBtn{
  background:linear-gradient(180deg,rgba(155,108,255,.18),rgba(155,108,255,.08))!important;
  border:1px solid rgba(155,108,255,.42)!important;
  color:#e6dcff!important;
  font-weight:850!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}
#fullBtn.active{
  background:linear-gradient(180deg,rgba(155,108,255,.30),rgba(155,108,255,.16))!important;
  border-color:rgba(187,156,255,.68)!important;
  color:#ffffff!important;
}


/* v14c — restore comfortable full-answer readability */
.sentence-card.full-mode .english{
  font-size:17px!important;
  line-height:1.50!important;
}
.sentence-card.full-mode .korean{
  font-size:12px!important;
  line-height:1.45!important;
  margin-top:12px!important;
}

/* Keep spacing compact enough to reduce unnecessary scrolling */
.full-text{
  gap:8px!important;
}
.full-ko{
  gap:5px!important;
  padding-top:9px!important;
}
.full-line{
  gap:6px!important;
}


/* Android PWA install / standalone support */
.install-btn{
  width:100%;border:1px solid rgba(155,108,255,.45);background:rgba(155,108,255,.10);
  color:#e8ddff;border-radius:14px;padding:12px;margin-top:10px;font-weight:800;
}
.install-hint{margin-top:8px;color:#8f849a;font-size:10px;line-height:1.45}
@media (display-mode:standalone){
  .install-btn,.install-hint{display:none!important}
  body{overscroll-behavior:none}
}
@media (display-mode:fullscreen){
  .install-btn,.install-hint{display:none!important}
}

/* v19 Android edge-to-edge cleanup */
html{
  width:100%;
  min-height:100%;
  min-height:100dvh;
  background:#17131f!important;
  color-scheme:dark;
  overscroll-behavior:none;
}
body{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:#17131f!important;
  overscroll-behavior:none;
}
#lockScreen,
.lock-screen{
  min-height:100vh;
  min-height:100dvh;
  background-color:#17131f;
}
#app,
.app{
  min-height:100vh;
  min-height:100dvh;
  background:#17131f;
}
@supports (height: 100svh){
  html,body,#lockScreen,.lock-screen,#app,.app{min-height:100svh;}
}
@supports (padding: env(safe-area-inset-bottom)){
  .lock-screen{
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .app{
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
}


/* v20 — Android gesture/navigation area color hardening */
:root{--system-bg:#17131f;}
html,body{
  margin:0!important;
  padding:0;
  width:100%;
  height:100%;
  min-height:100%;
  background-color:var(--system-bg)!important;
}
body{
  min-height:100vh!important;
  min-height:100svh!important;
  min-height:100dvh!important;
}
body::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  background:var(--system-bg);
  pointer-events:none;
}
@media (display-mode:standalone), (display-mode:fullscreen){
  html,body,#app,.app,#lockScreen,.lock-screen{
    background-color:var(--system-bg)!important;
  }
  html,body{overflow-x:hidden;}
  .app{
    min-height:100dvh!important;
    padding-bottom:max(24px, env(safe-area-inset-bottom))!important;
  }
}