@font-face{font-family:"ChosunGu";src:url("/fonts/ChosunGu.woff") format("woff");font-display:swap}

/* 한 줄 세로 배치: 오늘의 단어 / TEST / 칭찬. 나머지 화면은 시트로 덮어요. */
:root{
  --bg:#fbf8f3; --paper:#ffffff; --ink:#5b3b22; --ink-soft:#9a7b62; --line:#e9dfd3;
  --pink:#e9c6d1; --sky:#cfe1ec; --green:#a9b98c; --cream:#f5efdc; --brown:#6e4a2f; --on-brown:#f6f1e6; --heart:#d99aae; --line-strong:#cdbba8; --warn-bg:#f3d9a6; --warn-ink:#5b3b22; --warn-soft:#fbf1dc;
  --font:"ChosunGu","조선굴림체","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#231a14; --paper:#2d221a; --ink:#f1e6d6; --ink-soft:#bba58f; --line:#45362a;
  --pink:#7d5562; --sky:#4c6573; --green:#66734f; --cream:#4a4030; --brown:#e9d9c3; --on-brown:#2d221a; --heart:#e3a3b7; --line-strong:#6b5848; --warn-bg:#8a6a35; --warn-ink:#fbeed3; --warn-soft:#3a2f22;
  color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-text-size-adjust:100%;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:460px;margin:0 auto;padding-block:28px 48px;display:flex;flex-direction:column;gap:22px}

header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.date{font-size:26px;letter-spacing:.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.day{font-size:17px;color:var(--ink-soft)}
.count{text-align:right;font-size:13px;color:var(--ink-soft);line-height:1.3}
.count b{display:block;font-size:24px;color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}

.box{background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:20px}
.label{font-size:13px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:10px}
.word{font-size:34px;line-height:1.2;word-break:break-word}
.mean{font-size:18px;margin-top:6px}
.sent{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.sent .en{font-size:17px}
.sent .ko{font-size:14px;color:var(--ink-soft);margin-top:4px}
.hide{filter:blur(6px);user-select:none;-webkit-user-select:none;transition:filter .2s}
.tap{background:none;border:0;padding:0;text-align:left;width:100%}
.many{display:flex;flex-direction:column}
.many .tap{padding-block:14px;border-top:1px dashed var(--line)}
.many .tap:first-child{border-top:0;padding-top:0}
.many .word{font-size:26px}
.many .mean{font-size:16px;margin-top:2px}
.many .sent{margin-top:8px;padding-top:0;border-top:0}
.hint{font-size:12px;color:var(--ink-soft);margin:10px 0 0}
.empty{color:var(--ink-soft);font-size:15px;margin:0}

.test-btn{display:block;width:100%;background:var(--brown);color:var(--on-brown);border:0;border-radius:14px;padding:22px;font-size:26px;letter-spacing:.2em}
.test-sub{display:flex;gap:10px;margin-top:10px}
.chip{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:10px;font-size:14px;text-align:center}
.chip b{display:block;font-size:20px;font-weight:400;font-variant-numeric:tabular-nums}

.praise{background:var(--cream);border-color:transparent;text-align:center}
.praise .msg{font-size:20px}
.stamps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px;min-height:18px}
.stamps svg{display:block}
.vs{display:flex;gap:10px;margin-top:16px}
.vs div{flex:1;background:var(--paper);border-radius:12px;padding:10px 8px;min-width:0}
.vs .n{font-size:22px;font-variant-numeric:tabular-nums}
.vs .who{font-size:13px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs .lead{background:var(--pink)}
.party{background:var(--pink);border-color:transparent;text-align:center;font-size:18px}

.foot{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.link{background:none;border:0;border-bottom:1px solid var(--ink-soft);padding:2px 0;color:var(--ink-soft);font-size:14px}

.sheet{position:fixed;inset:0;background:var(--bg);overflow-y:auto;z-index:5;-webkit-overflow-scrolling:touch;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.center{min-height:100%;justify-content:center;text-align:center}
.big{font-size:30px;font-weight:400;margin:0}
.who-pick{display:flex;gap:12px}
.who-pick button{flex:1;border:1.5px solid var(--ink);background:var(--paper);border-radius:14px;padding:26px 10px;font-size:22px}
.who-pick button:nth-child(2){background:var(--pink);border-color:transparent}
.top{display:flex;justify-content:space-between;align-items:center}
.top h2{font-size:22px;font-weight:400;margin:0}
.x{background:none;border:0;font-size:15px;color:var(--ink-soft);padding:8px 0}
.tabs{display:flex;gap:8px}
.tabs button{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px}
.tabs button[aria-pressed="true"]{border-color:var(--ink);background:var(--sky)}
.card{background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:32px 20px;text-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.card .word{font-size:36px}
.card .ex{color:var(--ink-soft);font-size:14px}
.prog{font-size:13px;color:var(--ink-soft);text-align:center;font-variant-numeric:tabular-nums}
.ox{display:flex;gap:10px}
.ox button{flex:1;border:0;border-radius:14px;padding:18px;font-size:18px;color:var(--ink)}
.o{background:var(--green)}
.xx{background:var(--pink)}
.reveal{background:var(--brown);color:var(--on-brown);border:0;border-radius:14px;padding:18px;font-size:18px;width:100%}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px}
.list .w{font-size:17px;min-width:0;word-break:break-word}
.list .m{color:var(--ink-soft);font-size:14px;text-align:right;min-width:0}
.list .d{font-size:12px;color:var(--ink-soft);display:block;font-variant-numeric:tabular-nums}
.list button{background:none;border:0;color:var(--ink-soft);font-size:13px;padding:0;text-decoration:underline}
.mt{margin-top:16px}
.mix{font-size:14px;color:var(--ink-soft);text-align:center;margin:0 0 10px}
.tabs button{font-size:14px;padding:12px 4px}

form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}
input,textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px;width:100%}
textarea{resize:vertical;min-height:70px}
.save{background:var(--brown);color:var(--on-brown);border:0;border-radius:14px;padding:16px;font-size:18px}
#cancelEdit{align-self:center}
.note{font-size:13px;color:var(--ink-soft);min-height:1.2em}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 단어장 */
.book-btn{display:block;width:100%;margin-top:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:14px;font-size:18px;letter-spacing:.1em}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.tools button{flex:1;min-width:0;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:10px 4px;font-size:14px;white-space:nowrap}
.tools button[aria-pressed="true"]{border-color:var(--ink);background:var(--sky)}
.dayg{display:flex;flex-direction:column;gap:8px}
#bookBody{display:flex;flex-direction:column;gap:18px}
.dayh{display:flex;align-items:baseline;gap:10px;background:none;border:0;padding:0;text-align:left;width:100%}
.dayh b{font-weight:400;font-size:20px;letter-spacing:.05em}
.dayh span{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dayh i{font-style:normal;margin-left:auto;font-size:13px;color:var(--ink-soft)}
.bl{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.brow{display:grid;grid-template-columns:40px minmax(0,1fr) 34px minmax(0,1fr);border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.brow > button{background:none;border:0;padding:11px 10px;text-align:left;font-size:16px;line-height:1.35;word-break:break-word;min-width:0}
.ck{display:flex;align-items:center;justify-content:center;padding:0!important}
.ck::before{content:"";width:16px;height:16px;border:1.5px solid var(--ink-soft);border-radius:4px;position:absolute}
.ck{position:relative;font-size:14px!important;color:var(--on-brown)}
.brow.on .ck::before{background:var(--brown);border-color:var(--brown)}
.brow.on .ck{z-index:0}
.ck{isolation:isolate}
.ck::before{z-index:-1}
.bm{background:var(--cream)!important;font-size:15px!important}
.brow.on .bw,.brow.on .bm{font-weight:400}
.brow.on{background:color-mix(in srgb,var(--pink) 25%,transparent)}
.xdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-left:6px;vertical-align:middle;outline:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.dtag{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px}

/* 공부 달력 */
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ct{display:flex;align-items:baseline;gap:12px}
#calTitle{font-size:20px}
.sum{font-size:14px;color:var(--ink-soft)}
.sum b{font-weight:400;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.nav{background:none;border:0;font-size:24px;line-height:1;padding:4px 10px;color:var(--ink-soft)}
.nav:disabled{opacity:.25;cursor:default}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px 2px;text-align:center}
.dow{font-size:11px;color:var(--ink-soft);padding-bottom:2px}
.cd{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 0;border-radius:8px}
.cd span{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cd.today{background:var(--cream)}
.cd.today span{color:var(--ink)}
.h{width:22px;height:22px;display:block}
i.h{height:22px}
.legend{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);margin:12px 0 0}
.legend .h{width:14px;height:14px;display:inline-block}

/* 화면 전환 */
.theme{display:block;margin:8px 0 0 auto;background:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ink-soft)}
/* 문제: 한글 → 영어 */
.card .label{margin:0}
.card .word.kq{font-size:28px}
/* 단어장 예문 */
.stag{display:inline-block;font-size:10px;color:var(--ink-soft);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px;vertical-align:middle;letter-spacing:0}
.bx{grid-column:1/-1;padding:4px 12px 12px 50px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bx p{margin:0}
.se{font-size:15px}
.sk{font-size:13px;color:var(--ink-soft)}
.sf{width:100%;gap:8px}
.sf textarea{font-size:15px;min-height:56px}
.sfb{display:flex;gap:16px;align-items:center}
.sbtn{background:var(--brown);color:var(--on-brown);border:0;border-radius:10px;padding:8px 18px;font-size:15px}

/* 품사 */
.field{display:flex;flex-direction:column;gap:8px}
.flabel{font-size:14px;color:var(--ink-soft)}
.posbar{display:flex;gap:6px;flex-wrap:wrap}
.posbar button{background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:15px;min-width:48px}
.posbar button[aria-pressed="true"]{background:var(--brown);color:var(--on-brown);border-color:var(--brown)}
.senseinputs{display:flex;flex-direction:column;gap:8px}
.sv{flex-direction:row;align-items:center;gap:8px}
.sv input{flex:1;min-width:0}
.pos{font-style:normal;display:inline-block;min-width:22px;text-align:center;font-size:11px;line-height:1.5;border:1px solid var(--ink-soft);color:var(--ink-soft);border-radius:4px;padding:0 4px;margin-right:6px;vertical-align:1px}
.sense{display:block}
.senses{display:flex;flex-direction:column;gap:2px;font-size:18px;align-items:center}
.senses.q{font-size:22px}
.bm .sense + .sense{margin-top:3px}
/* 연습 */
.practice{display:block;width:100%;margin-top:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:14px;font-size:16px}
.pracbar{margin:0;text-align:center;font-size:13px;background:var(--sky);border-radius:999px;padding:4px 12px;align-self:center}
.center-t{text-align:center}
.card.small{min-height:0;padding:20px}
.card.small .word{font-size:28px}
.tabs{flex-wrap:wrap}
.tabs button{flex:1 1 calc(50% - 8px)}
#testBody{display:flex;flex-direction:column;gap:12px}
#testBody .practice{margin-top:0}

/* 스펠링 쓰기 */
.spell{margin-top:8px}
.spell input{text-align:center;font-size:22px;padding:12px}
.ok-msg{color:var(--ink);background:var(--green);border-radius:10px;padding:8px 12px;font-size:18px;align-self:center;margin-top:6px}
.no-msg{background:var(--pink);border-radius:10px;padding:8px 12px;font-size:18px;align-self:center;margin-top:6px;word-break:break-word}
.no-msg s{opacity:.7}
.ok-msg b,.no-msg b{font-weight:400;font-size:22px}

/* 5지선다 */
.choices{display:flex;flex-direction:column;gap:10px}
.choice{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;text-align:left;font-size:17px;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.choice:disabled{cursor:default}
.choice.right{background:var(--green);border-color:transparent}
.choice.wrong{background:var(--pink);border-color:transparent}
.choice .mk{font-size:12px;margin-top:4px}
#testBody .card{min-height:150px;padding:22px 20px}
.choice{padding:11px 16px;font-size:16px}
.choices{gap:8px}

.prep{font-style:normal;font-size:11px;background:var(--sky);color:var(--ink);border-radius:999px;padding:1px 8px;align-self:center}

/* 발음 듣기 */
.brow > .spk{display:flex;align-items:center;justify-content:center;padding:0!important;color:var(--ink-soft)}
.spk{background:none;border:0;color:var(--ink-soft);cursor:pointer}
.spk:active{color:var(--ink)}
.spk.in{display:inline-flex;vertical-align:-3px;padding:0 2px}

/* DAY 전체 듣기 */
.pbar{display:flex;gap:6px;flex-wrap:wrap}
.pbar button{background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink)}
.pbar button[aria-pressed="true"]{background:var(--sky);border-color:var(--ink)}
.pbar .pmain{background:var(--brown);color:var(--on-brown);border-color:var(--brown);padding:6px 16px}
.brow.playing{background:color-mix(in srgb,var(--sky) 55%,transparent)}
.brow.playing .bm{background:color-mix(in srgb,var(--sky) 55%,var(--cream))!important}

/* 오타 표시 */
.typo{display:inline-block;font-size:10px;background:var(--warn-bg);color:var(--warn-ink);border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:middle;letter-spacing:0;cursor:pointer}
.tbx{grid-column:1/-1;margin:0 12px 12px 50px;background:var(--warn-soft);border:1px solid var(--warn-bg);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.tbx b{font-weight:400;font-size:16px}
.tbtns{display:flex;gap:8px;flex-wrap:wrap}
.tbtns button{border:0;border-radius:999px;padding:6px 14px;font-size:13px}
.tbtns .fix{background:var(--brown);color:var(--on-brown)}
.tbtns .ok{background:var(--paper);border:1.5px solid var(--line);color:var(--ink)}

.choice.en{font-size:19px}

/* 시험 발음 듣기 */
.qw{display:flex;align-items:center;justify-content:center;gap:8px}
.spk.qs{display:inline-flex;padding:6px}
.spk.qs svg{width:24px;height:24px}
.crow{display:flex;gap:8px;align-items:stretch}
.crow .choice{flex:1;min-width:0}
.spk.cs{flex:0 0 48px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1.5px solid var(--line);border-radius:14px}
.spk.cs svg{width:22px;height:22px}

.exko{font-size:13px;color:var(--ink-soft);margin-top:-4px}

/* TEST 탭 5개: 위 3 · 아래 2 */
.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tabs button{grid-column:span 2;min-width:0}
.tabs button:nth-child(n+4){grid-column:span 3}
/* 연습 오답 */
.pwl li{align-items:center}
.pwck{flex:0 0 22px;width:22px;height:22px;border:1.5px solid var(--ink-soft);border-radius:5px;background:var(--paper);padding:0}
.pwl .w{flex:1}
.undo{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--brown);color:var(--on-brown);border-radius:12px;padding:10px 14px;font-size:14px;margin-top:12px}
.undo button{background:none;border:0;color:var(--on-brown);text-decoration:underline;font-size:14px}

/* TEST 탭 6개: 3 · 3 */
.tabs button,.tabs button:nth-child(n+4){grid-column:span 2}
/* DAY 고르기 */
.daypick{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.daypick button{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:8px 14px;color:var(--ink)}
.daypick button b{font-weight:400;font-size:16px}
.daypick button span{font-size:12px;color:var(--ink-soft)}
.daypick button[aria-pressed="true"]{background:var(--sky);border-color:var(--ink)}

.choice .other{font-size:14px;color:var(--ink-soft);margin-top:2px}
.choice.right .other,.choice.wrong .other{color:var(--ink)}
.choice.en .other{font-size:14px}

/* 뜻 확인 */
.sfb .link{white-space:nowrap}
.mq{border:0;border-radius:999px;padding:3px 12px;font-size:13px;background:var(--sky);color:var(--ink);white-space:nowrap}
.mq[aria-expanded="true"]{outline:1.5px solid var(--ink)}
.mbx{width:100%;background:color-mix(in srgb,var(--sky) 35%,var(--paper));border:1px solid var(--sky);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.mbx .row{display:flex;gap:8px;align-items:baseline}
.mbx .k{font-size:12px;color:var(--ink-soft);flex:0 0 70px}
.mbx b{font-weight:400;font-size:15px;min-width:0;word-break:keep-all}
.okb{align-self:flex-start;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--ink)}

/* 네이버 사전 바로가기 */
.nv{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);border-radius:999px;padding:3px 12px;font-size:13px;background:var(--paper);color:var(--ink);text-decoration:none;white-space:nowrap}
.nv i{font-style:normal;background:#03c75a;color:#fff;border-radius:3px;font-size:10px;line-height:1.5;padding:0 4px;font-weight:700}

/* 로그인 */
.logo{border-radius:22px;align-self:center}
.sub{margin:0;color:var(--ink-soft);font-size:15px}
.age{flex-direction:row;justify-content:center;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
.age input{width:18px;height:18px;accent-color:var(--brown)}
.kakao{display:flex;align-items:center;justify-content:center;gap:8px;background:#FEE500;color:rgba(0,0,0,.85);border:0;border-radius:12px;padding:16px;font-size:17px;width:100%}
.kakao:disabled{opacity:.45;cursor:default}
.kbub{width:18px;height:16px;background:#000;border-radius:50%;position:relative}
.kbub::after{content:"";position:absolute;left:4px;bottom:-4px;border:4px solid transparent;border-top-color:#000;border-left-color:#000}
#claimPick:empty{display:none}

/* 대결방 */
.battle{display:flex;flex-direction:column}
#battle{display:flex;flex-direction:column;gap:12px}
.roombar{display:flex;align-items:center;gap:10px}
.roombar select{flex:1;min-width:0;font:inherit;font-size:17px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:8px 10px}
.rname{font-weight:400;font-size:18px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcount{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rank li{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:12px;padding:10px 12px}
.rank li.mine{background:var(--pink)}
.rank .no{width:20px;text-align:center;font-size:15px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rank li:first-child .no{color:var(--ink)}
.rank .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.rank .sc{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.rank .sc b{font-weight:400;font-size:16px;font-variant-numeric:tabular-nums}
.rank .sc i{font-style:normal;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.roomact{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink);white-space:nowrap}
.pill.ghost{border-color:transparent;background:none;color:var(--ink-soft);margin-left:auto}
.linkline{word-break:break-all;user-select:all;-webkit-user-select:all;margin:0}
.mkroom{display:flex;flex-direction:column;gap:10px}
.mkroom .row{display:flex;gap:16px;align-items:center}
.brownbtn{background:var(--brown)!important;color:var(--on-brown)!important}
.battle .practice{margin-top:0}
.center .link{align-self:center}

/* 단어팩 */
.packbox{background:var(--paper);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.packbox .label{margin:0}
.pk-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pk-peek{flex:1;min-width:0;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-arw{margin-left:auto;font-size:13px;color:var(--ink-soft)}
.packbox .hint,.packbox .note{margin:0}
.pk-list{display:flex;gap:6px;flex-wrap:wrap}
.pk-list .pill[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--on-brown)}
.pk-per{display:flex;align-items:center;gap:8px;font-size:15px}
.pk-per input{width:64px;text-align:center;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:6px}
.pk-sum{margin:0;font-size:14px;color:var(--ink-soft)}
.pk-sum b{color:var(--ink);font-weight:400}
.pk-on{margin:0;font-size:16px;line-height:1.6}
.pk-on b{font-weight:400}
.pk-on span{font-size:14px;color:var(--ink-soft)}
.packbox .practice{margin:0}
.packbox .pill.ghost{margin-left:0;align-self:flex-start;padding-left:0}
.pk-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.pk-bar i{display:block;height:100%;background:var(--brown);border-radius:99px}

/* 탈퇴, 개인정보 링크 */
.foot a.link{text-decoration:none}
.link.small{font-size:12px;align-self:center;text-decoration:none;margin-top:8px}
.kakao.danger{background:#b4533f!important;color:#fff!important}

.booknote{margin:0 0 12px;background:var(--pink);border-radius:12px;padding:10px 14px;font-size:15px;text-align:center;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 헤더 버튼, 연속 학습일 */
.hbtns{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;white-space:nowrap}
header>div:last-child{flex:none}
.hbtns .theme{margin:0}
.streak{font-size:14px;color:var(--ink-soft);margin-top:6px}
.streak b{font-weight:400;color:var(--ink);font-size:16px}
.streak .sh{display:block;font-size:12px}
.streak .sh0{font-size:13px}
.stk{font-style:normal;font-size:12px;color:var(--ink-soft);margin-left:6px}
.statlink{background:none;border:0;padding:0 0 0 6px;font-size:13px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}

/* 설정 */
.sgroup{margin-top:24px}
.sgroup h3{font-weight:400;font-size:13px;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 10px}
.sitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px}
.sitem>span{font-size:16px}
.sitem .hint{margin:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;font-size:14px;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--on-brown)}
.seg button:disabled{opacity:.4}

/* 뜻 후보 */
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 4px}
.sugg .sk{width:100%;font-size:12px;color:var(--ink-soft)}
.sugg button{background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--ink)}
.sugg button i{font-style:normal;font-size:11px;background:var(--sky);border-radius:6px;padding:1px 5px;margin-right:6px;color:var(--ink)}

/* 듣기, 철자 문제 */
.bigspk{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--sky);border:0;border-radius:50%;width:110px;height:110px;justify-content:center;color:var(--ink);font-size:13px}
.bigspk svg{width:40px;height:40px}
.spell{display:flex!important;flex-direction:row!important;gap:8px;align-items:stretch}
.spell input{flex:1;min-width:0;font:inherit;font-size:20px;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;padding:12px 14px}
.spell .sbtn{padding:0 20px;font-size:16px;flex:none}
.spres{text-align:center;margin:0;font-size:16px}
.spres.o{color:var(--ink)}
.spres s{color:var(--ink-soft)}
.center-l{align-self:center;display:block;margin:4px auto 0}

/* 통계 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.tile{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile span{font-size:12px;color:var(--ink-soft)}
.tile b{font-weight:400;font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile em{font-style:normal;font-size:11px;color:var(--ink-soft)}
.chart{display:flex;align-items:flex-end;gap:4px;height:140px;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:12px 10px 8px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.chart .bar{width:100%;max-width:18px;border-radius:4px 4px 2px 2px;background:var(--line-strong)}
.chart .bar.full{background:var(--heart)}
.chart .bar.half{background:var(--pink)}
.chart .bar.none{background:var(--line)}
.chart .col span{font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.chart .col span.on{color:var(--ink)}
.stack{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--line)}
.stack i{display:block;height:100%}
.s-learned{background:var(--brown)}
.s-learning{background:var(--heart)}
.s-wrong{background:var(--warn-bg)}
.s-unseen{background:var(--line)}
.slegend{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.slegend li{display:flex;align-items:center;gap:8px;font-size:14px}
.slegend li i{width:12px;height:12px;border-radius:3px;flex:none}
.slegend b{font-weight:400;font-variant-numeric:tabular-nums}
.slegend span{font-size:12px;color:var(--ink-soft)}

/* 카드 넘기기 */
.cardtop{display:flex;justify-content:space-between;align-items:center;margin:14px 0 10px}
.fcard{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:18px;min-height:300px;padding:36px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer;transition:transform .2s ease}
.fcard .fw{font-size:38px;word-break:break-word}
.fcard .fback{border-top:1px dashed var(--line);padding-top:14px;width:100%;display:flex;flex-direction:column;gap:8px;align-items:center}
.fcard .fback .fw{font-size:28px}
.fcard[data-lean="yes"]{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 40%,transparent)}
.fcard[data-lean="no"]{border-color:var(--heart);box-shadow:0 0 0 3px color-mix(in srgb,var(--heart) 40%,transparent)}
.fcard .ex{font-size:14px;color:var(--ink-soft)}
.spk.fs{position:absolute;top:12px;right:12px}
.fbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.fbtns button{border:1.5px solid var(--ink);border-radius:14px;padding:16px;font-size:17px;color:var(--ink);background:var(--paper)}
.fbtns #cYes{background:var(--brown);color:var(--on-brown);border-color:var(--brown)}
.cardend{margin-top:14px;margin-bottom:12px}

/* 홈: 달력 ↔ 대결방 카드 */
#home{gap:10px;padding-block:12px 24px}
#home .date{font-size:22px}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;padding:10px 14px;min-width:0}
.slide .calhead{margin-bottom:6px}
.slide .cd{padding:0}
.slide .cd span{font-size:11px}
.slide .grid{gap:2px}
.slide .grid .cd .h{width:17px;height:17px}
.slide .legend{font-size:10px;margin:4px 0 0}
.slides{align-items:flex-start}
.slide.battle{height:var(--slide-h,auto);overflow-y:auto}
.pline{font-size:14px;text-align:center;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.pline.party{background:var(--pink);border-radius:10px;border-top:0;padding:6px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:-2px}
.dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--line-strong);transition:width .2s}
.dots button[aria-pressed="true"]{background:var(--ink);width:18px;border-radius:99px}
.acts{display:flex;flex-direction:column;gap:8px}
.acts .test-btn{padding:11px;font-size:22px}
.acts .test-sub{margin:0}
.acts .chip{padding:6px;display:flex;justify-content:center;align-items:baseline;gap:8px}
.acts .chip b{display:inline;font-size:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2 .book-btn{margin:0;padding:10px 6px;font-size:16px}

/* 설정: 계정 */
.acct{flex-direction:row!important;align-items:center;justify-content:space-between}
.acct .who{display:flex;flex-direction:column}
.acct .who b{font-weight:400;font-size:17px}
.acct .who span{font-size:12px;color:var(--ink-soft)}
.srow{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;font-size:16px;color:var(--ink);text-decoration:none;text-align:left}
.srow span{color:var(--ink-soft)}
#delSheet{z-index:7}
.slide.ghost{pointer-events:none}
/* 아이폰 맨 위 시계 줄의 흐림 효과에 날짜가 걸리지 않게, 시계 줄 아래로 여유를 둬요 */
#home{padding-top:32px}
.sheet>.wrap{padding-top:32px}
/* 연습 오답: 발음 버튼, 빼기 버튼(체크 네모와 헷갈리지 않게 ✕) */
.pwl .spk{flex:none;text-decoration:none;color:var(--ink);padding:4px}
.pwl .pwck{border-radius:50%;border-color:var(--line-strong);position:relative;text-decoration:none}
.pwl .pwck::before{content:"✕";font-size:11px;color:var(--ink-soft);position:absolute;inset:0;display:grid;place-items:center}

/* Apple 로그인 버튼 (앱에서만) */
.kakao.apple{background:#000!important;color:#fff!important;margin-top:10px}
.kakao.apple span::before{content:"";font-size:18px;margin-right:8px}
[data-theme="dark"] .kakao.apple{background:#fff!important;color:#000!important}
.acct .who .statlink{padding:0;text-align:left}
input[type="time"]{min-width:130px;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:6px 10px}

/* 아이폰이 입력칸을 누를 때 자동 확대하지 않게 16px 이상, 두 번 탭 확대도 막기 */
.sf textarea,.pk-per input,input[type="time"],.roombar select{font-size:16px}
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}

/* 오늘 시험 뒤 복습할 단어 */
.rvh{display:flex;align-items:center;gap:8px;width:100%;margin:20px 0 8px;padding:6px 2px;background:none;border:0;font:inherit;font-size:14px;color:var(--ink-soft);text-align:left;cursor:pointer}
.rvl li{align-items:center}
.rvl .w{flex:1}
.rvl .spk{flex:none;text-decoration:none;color:var(--ink);padding:4px}
.rvl li.rx .w{color:var(--brown);font-weight:700}
.rvl li.rx .d{font-weight:400}
.rvl li.rk{background:#e5f0e1;border-color:#b9cfae}
.rvl li.rk .d{color:#4f6b45}
:root[data-theme="dark"] .rvl li.rk{background:#33402e;border-color:#56684c}
:root[data-theme="dark"] .rvl li.rk .d{color:#b9d0ad}
.rvl li.ra .d b{color:var(--heart);font-weight:700}