/* study · 주원이 영어 읽기 · 태블릿 먼저(가로·세로) · 글씨·단추 크게
   색: 앱 고유 이름표(--c-*) — 따뜻한 종이색 바탕 · 파랑(누르는 것) · 노랑(지금 읽는 곳) · 초록(다 함) · 밝은/어두운 화면 둘 다.
   theme.css(공통 테마2)는 글꼴 이름표(--t-font)만 씀 */
:root{
  --c-bg:#FFF6E9;--c-bg2:#FDEBD3;--c-surface:#fff;--c-soft:#FFF3E0;--c-line:#F0DFC6;--c-text:#2A2833;--c-muted:#6F6A7D;
  --c-primary:#3B5BDB;--c-primary-d:#2B45B0;--c-on-primary:#fff;--c-primary-soft:#E8EDFF;
  --c-sun:#FFD43B;--c-hl:#FFF0A8;--c-coral:#FF7A59;--c-ok:#2F9E6B;--c-ok-soft:#E3F6EC;--c-bad:#E03E3E;--c-bad-soft:#FDE8E8;
  --c-amber:#C27C0E;--c-amber-soft:#FFF1D6;--c-ok-ink:#1B6E47;--c-amber-ink:#8A5300;--c-bad-ink:#B42318;--c-paper:#FFFDF8;--c-ink:#24222B;
  --c-shadow:0 1px 2px rgba(80,50,10,.06),0 6px 20px rgba(80,50,10,.08);--c-lift:0 2px 4px rgba(80,50,10,.08),0 14px 34px rgba(80,50,10,.14);
  --read:clamp(24px,3.2vw,34px);--ui-h:52px;--r:18px;
}
@media (prefers-color-scheme:dark){:root{
  --c-bg:#16151C;--c-bg2:#1E1C27;--c-surface:#22212B;--c-soft:#2A2834;--c-line:#3A3747;--c-text:#F1EFF7;--c-muted:#A9A4B9;
  --c-primary:#8EA2FF;--c-primary-d:#6F86F0;--c-on-primary:#111228;--c-primary-soft:#2C3156;
  --c-sun:#E8C22E;--c-hl:#4D4418;--c-coral:#FF9478;--c-ok:#6FD3A0;--c-ok-soft:#1D3A2D;--c-bad:#FF7A7A;--c-bad-soft:#3E2226;
  --c-amber:#F2B451;--c-amber-soft:#3B2F17;--c-ok-ink:#8BE3B5;--c-amber-ink:#F7C873;--c-bad-ink:#FF9C9C;--c-paper:#1F1E27;--c-ink:#F1EFF7;
  --c-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);--c-lift:0 2px 4px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.35);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--c-bg)}
body{margin:0;min-height:100vh;color:var(--c-text);font:18px/1.6 var(--t-font,system-ui),system-ui,sans-serif;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 500px at 110% -10%,var(--c-bg2),transparent 60%),radial-gradient(900px 400px at -10% 110%,var(--c-bg2),transparent 60%),var(--c-bg);background-attachment:fixed}
a{color:var(--c-primary)}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:8px}
h1,h2,h3{margin:0;line-height:1.3}
h1{font-size:clamp(24px,2.8vw,32px);font-weight:800;letter-spacing:-.01em}
h2{font-size:20px}
h3{font-size:15px;color:var(--c-muted);margin-top:4px}
p{margin:0}

/* 머리 줄 */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;min-height:66px;padding:8px max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--c-bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand img{width:42px;height:42px;border-radius:12px;box-shadow:var(--c-shadow)}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-size:20px}
.brand small{font-size:12.5px;color:var(--c-muted);font-weight:600}
.sp{flex:1}
.tabs{display:flex;gap:4px;padding:4px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:999px;box-shadow:var(--c-shadow)}
.tabs a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;color:var(--c-text);text-decoration:none;font-weight:700;font-size:16px}
[data-view=shelf] .tabs a[data-tab=shelf],[data-view=stars] .tabs a[data-tab=stars]{background:var(--c-primary);color:var(--c-on-primary)}
[data-view=login] .tabs{display:none}
.awake{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:700;background:var(--c-amber-soft);color:var(--c-amber-ink)}
.wrap{max-width:1100px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-left)) calc(var(--dock-h,0px) + 60px)}
@media (max-width:640px){.tabs a span,.awake span,.brand small{display:none}.tabs a{padding:0 14px;font-size:20px}}

/* 단추·입력 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-h);padding:0 20px;border-radius:16px;border:1.5px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font:inherit;font-weight:700;font-size:18px;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:0 3px 0 var(--c-line);transition:transform .08s,box-shadow .08s,background .15s;user-select:none;-webkit-user-select:none}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--c-line)}
.btn.primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary);box-shadow:0 4px 0 var(--c-primary-d)}
.btn.primary:active{box-shadow:0 1px 0 var(--c-primary-d)}
.btn.big{min-height:68px;font-size:22px;padding:0 28px;border-radius:20px}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.warn{color:var(--c-bad-ink)}
.btn.on{background:var(--c-hl);border-color:var(--c-sun);box-shadow:0 3px 0 var(--c-sun)}
.btn.round{width:var(--ui-h);padding:0;border-radius:50%}
.btn:disabled{opacity:.45;cursor:default;transform:none}
input,textarea,select{font:inherit;color:var(--c-text);background:var(--c-surface);border:1.5px solid var(--c-line);border-radius:12px;padding:10px 12px;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--c-primary);outline:none;box-shadow:0 0 0 3px var(--c-primary-soft)}
select{min-height:var(--ui-h);font-weight:700;appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-muted) 50%),linear-gradient(135deg,var(--c-muted) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
textarea{min-height:64px;resize:vertical}
label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:var(--c-muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.two>*{flex:1 1 220px}
.stack{display:flex;flex-direction:column;gap:14px}
.muted{color:var(--c-muted);font-size:15px}
.msg{margin:0;color:var(--c-bad-ink);min-height:1.2em}
.msg.ok{color:var(--c-ok-ink)}
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:18px;box-shadow:var(--c-shadow)}
.empty{padding:48px 16px;text-align:center;color:var(--c-muted);font-size:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.big-emoji{font-size:64px;line-height:1}
.hero{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hero .muted{margin-top:2px}

/* 로그인 */
.login{max-width:420px;margin:48px auto;text-align:center;align-items:center;padding:32px 26px}
.login input{font-size:32px;letter-spacing:.4em;text-align:center}
.login .btn{width:100%}

/* 책장 · 챕터 */
.chapter{background:color-mix(in srgb,var(--c-surface) 55%,transparent);border:1px solid var(--c-line);border-radius:24px;padding:14px;margin-bottom:16px}
.chapter.loose{background:transparent;border-style:dashed}
.chapter.loose:only-of-type{border:0;padding:0}
.chead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctoggle{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-height:56px;padding:4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:14px}
.ctoggle:disabled{cursor:default}
.cnum{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c-primary);color:var(--c-on-primary);font-weight:800;font-size:20px;box-shadow:0 3px 0 var(--c-primary-d)}
.loose .cnum{background:var(--c-soft);color:var(--c-muted);box-shadow:none}
.cname{display:flex;flex-direction:column;line-height:1.3}
.cname b{font-size:21px}
.cname small{font-size:14px;color:var(--c-muted);font-weight:600}
.caret{margin-left:auto;font-size:22px;color:var(--c-muted);transition:transform .2s;transform:rotate(-90deg)}
.chapter.open .caret{transform:none}
.chead .meter{flex:0 1 160px}
.chead .add{font-size:16px}
.tools .btn{min-height:44px;padding:0 14px;font-size:16px}
.none{padding:10px 6px 4px}
.tip{margin:-6px 0 14px}
.tip p{flex:1 1 300px}
.newch{margin-bottom:10px}
.newch input{flex:1 1 260px}
.newch .msg{flex-basis:100%}
.meter{height:10px;border-radius:999px;background:var(--c-soft);overflow:hidden;border:1px solid var(--c-line)}
.meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--c-ok),color-mix(in srgb,var(--c-ok) 60%,var(--c-sun)));transition:width .4s}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:12px}
.book{position:relative;display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:20px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:var(--c-shadow);transition:transform .15s,box-shadow .15s}
a.book:hover{transform:translateY(-3px);box-shadow:var(--c-lift)}
a.book:active{transform:translateY(0) scale(.99)}
.book .thumb{position:relative}
.book img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--c-soft)}
.book .pg{position:absolute;left:10px;top:10px;padding:2px 10px;border-radius:999px;background:var(--c-surface);font-weight:800;font-size:14px;box-shadow:var(--c-shadow)}
.book .ok{position:absolute;right:10px;top:10px;padding:2px 10px;border-radius:999px;background:#1B6E47;color:#fff;font-weight:800;font-size:13px}
.book .t{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.book b{font-size:19px;line-height:1.35}
.book .en{font-size:14px;color:var(--c-muted);font-family:Georgia,serif}
.book .st{font-size:14px;color:var(--c-muted);white-space:pre-wrap}
.book .btn{margin-top:6px}
.book .order{gap:6px}
.book .order .btn{flex:1;min-height:44px;padding:0 8px;font-size:15px}
.book select{margin-top:6px;font-size:15px;min-height:44px}
.book.s-done{border-top:5px solid var(--c-ok)}
.book.s-check{border-top:5px solid var(--c-primary)}
.book.s-wait{border-top:5px solid var(--c-amber)}
.book.s-wait img{filter:saturate(.4) opacity(.8)}
.book.s-bad{border-top:5px solid var(--c-bad)}
.badge{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;font-size:13.5px;font-weight:800;background:var(--c-soft)}
.badge.wait{color:var(--c-amber-ink);background:var(--c-amber-soft)}
.badge.check{color:var(--c-primary);background:var(--c-primary-soft)}
.badge.bad{color:var(--c-bad-ink);background:var(--c-bad-soft)}
.badge.done{color:var(--c-ok-ink);background:var(--c-ok-soft)}

/* 찍어 올리기 */
.addcard{max-width:720px;margin:0 auto}
.tips{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:4px}
.uplist{display:flex;flex-direction:column;gap:8px}
.up{padding:10px 14px;border-radius:12px;background:var(--c-soft);font-size:16px}
.up.good{background:var(--c-ok-soft);color:var(--c-ok-ink)}
.up.bad{background:var(--c-bad-soft);color:var(--c-bad-ink)}

/* 확인(부모) */
.check{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start}
.check .pic{position:sticky;top:84px;display:flex;flex-direction:column;gap:10px}
.check .pic img{width:100%;border-radius:var(--r);border:1px solid var(--c-line);box-shadow:var(--c-shadow);background:var(--c-soft)}
.check .turn{align-self:flex-start}
.gem{padding:12px 16px;border-radius:14px;background:var(--c-primary-soft);color:var(--c-text);font-weight:700}
.gem.on{background:var(--c-hl)}
.srow.fixed{background:var(--c-hl);border-radius:12px;padding:10px;border-bottom:0;margin:4px 0}
.fixnote{font-size:14px;color:var(--c-text)}
.fixnote span{font-family:Georgia,serif;text-decoration:line-through;color:var(--c-muted)}
.srow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid var(--c-line)}
.srow:last-child{border-bottom:0}
.srow textarea{min-height:48px;font-family:Georgia,serif}
.wrow{display:grid;grid-template-columns:110px 1fr 1fr auto;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--c-line)}
.wrow input{min-height:44px;padding:6px 10px;font-size:15px}
.wk{font-family:Georgia,serif;font-size:18px;display:flex;flex-direction:column}
.wk small{font-family:var(--t-font,system-ui);font-size:11px;color:var(--c-muted);font-weight:600}
label.inline{flex-direction:row;align-items:center;gap:10px;min-height:44px;color:var(--c-text);cursor:pointer}
label.inline input{width:26px;height:26px}
.savebar{position:sticky;bottom:0;z-index:5;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--c-bg) 30%)}
.wrow input:nth-of-type(3),.wrow input:nth-of-type(4){grid-column:2/4}
.wrow .wk{grid-row:span 3;align-self:start}
.srow>.btn{align-self:start}
.wrow>.btn{grid-column:4;grid-row:1}
@media (max-width:820px){.check{grid-template-columns:1fr}.check .pic{position:static}}

/* 읽기 */
.rhead{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.rhead>.btn{min-width:var(--ui-h);padding:0 14px;font-size:20px}
.rtitle{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 0}
.rtitle h1{font-size:clamp(22px,2.6vw,30px)}
.rtitle .en{font-size:16px;color:var(--c-muted);font-family:Georgia,serif}
.chip{align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--c-primary-soft);color:var(--c-primary);font-size:14px;font-weight:800}
.rhead .sp{flex:0 0 0}
.text{position:relative;background:var(--c-paper);border:1px solid var(--c-line);border-radius:26px;padding:clamp(20px,3.4vw,44px);font-family:Georgia,'Times New Roman',serif;font-size:var(--read);line-height:1.9;color:var(--c-ink);box-shadow:var(--c-shadow)}
.text p{margin:0 0 .9em}
.text p:last-child{margin-bottom:0}
.sent{border-radius:8px;padding:3px 0;transition:background .25s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sent.now{background:var(--c-hl)}
.w{border-radius:7px;padding:0 2px;transition:background .12s,color .12s}
.w.now{background:var(--c-primary);color:var(--c-on-primary)}
.study .w{position:relative;cursor:pointer;text-decoration:underline dotted color-mix(in srgb,var(--c-primary) 55%,transparent);text-decoration-thickness:2px;text-underline-offset:7px}
.study .w::after{content:"";position:absolute;left:50%;top:50%;width:max(calc(100% + 4px),44px);height:max(calc(100% + 8px),44px);transform:translate(-50%,-50%)}   /* 짧은 단어(a·I)도 누르는 자리 44px */
.study .w:hover,.w.picked{background:var(--c-primary-soft)}
.w.picked{outline:2px solid var(--c-primary)}
.w.star{box-shadow:inset 0 -.22em 0 var(--c-sun)}
.ko{display:block;font-family:var(--t-font,system-ui),sans-serif;font-size:.6em;line-height:1.5;color:var(--c-primary);margin:.25em 0 .55em;padding-left:.6em;border-left:3px solid var(--c-primary-soft)}
.dock{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(980px,calc(100% - 24px));z-index:20;background:color-mix(in srgb,var(--c-surface) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--c-line);border-radius:26px;box-shadow:var(--c-lift);padding:12px 16px 14px}
.dock .row{justify-content:center}
.dock .meter.read{height:8px;margin:0 6px 12px}
.dock .meter.read i{background:linear-gradient(90deg,var(--c-primary),var(--c-coral))}
.hint{font-size:16px;font-weight:700;color:var(--c-muted)}
.hint.bad{color:var(--c-bad-ink)}
.choice{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.choice b{font-size:20px}
.choice .row{justify-content:center}

/* 단어 카드 */
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(860px,100%);z-index:30;background:var(--c-surface);border:1px solid var(--c-line);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.2);padding:10px 24px calc(24px + env(safe-area-inset-bottom));max-height:72vh;overflow:auto;animation:up .22s ease-out;display:flex;flex-direction:column;gap:14px}
@keyframes up{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.btn.voice{flex-direction:column;align-items:flex-start;justify-content:center;min-height:64px;padding:8px 16px;white-space:normal;text-align:left}
.btn.voice small{font-size:13px;font-weight:600;color:var(--c-muted)}
.stitle{font-size:22px}
.grip{align-self:center;width:48px;height:5px;border-radius:999px;background:var(--c-line)}
.sheet .word{font-family:Georgia,serif;font-size:46px;font-weight:700;line-height:1.1}
.sheet .say{font-size:22px;color:var(--c-primary);font-weight:800}
.sheet .ipa{font-size:18px;color:var(--c-muted)}
.sheet .mean2,.wcard .mean2{font-size:16px;font-weight:600;color:var(--c-muted);margin:4px 2px 2px}
.wcard .mean2.hide{color:transparent;background:var(--c-soft);border-radius:8px;cursor:pointer}
.sheet .mean{font-size:28px;font-weight:800;margin:2px 0;padding:6px 14px;border-radius:14px;background:var(--c-hl);display:inline-block}
.sheet .ex{display:flex;align-items:flex-start;gap:6px;font-size:20px;background:var(--c-soft);border-radius:16px;padding:10px 14px 12px 6px;font-family:Georgia,serif}
.sheet .ex i{display:block;font-style:normal;color:var(--c-muted);font-size:16px;font-family:var(--t-font,system-ui),sans-serif}
.sheet .top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sheet .close{font-size:24px}

/* 내 단어장 */
.stars{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.wcard{display:flex;flex-direction:column;gap:6px;border-top:5px solid var(--c-sun)}
.wcard .wd{font-family:Georgia,serif;font-size:32px;font-weight:700;line-height:1.2}
.wcard .say{color:var(--c-primary);font-weight:800}
.wcard .mean{font-size:20px;font-weight:800;padding:6px 10px;border-radius:12px;background:var(--c-hl);transition:color .2s,background .2s}
.wcard .mean.hide{color:transparent;background:repeating-linear-gradient(45deg,var(--c-soft) 0 10px,var(--c-line) 10px 20px);cursor:pointer}
.wcard .from{font-size:14px;color:var(--c-muted)}