:root{
  --bg:#f7f6f3; --panel:#fff; --ink:#2f2d2a; --muted:#7a766f; --line:#e6e3dd;
  --accent:#d9730d; --accent-soft:#fbecdd; --ok:#2e8b57; --ok-soft:#e3f3ea;
  --warn:#c4302b; --warn-soft:#fbe4e3; --info:#2f6fb0; --info-soft:#e3eef9;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 12px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{border-color:transparent;background:transparent}
button.small{padding:2px 8px;font-size:13px}
button.danger{color:var(--warn)}
input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--panel);width:100%}
textarea{resize:vertical;min-height:60px}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}

.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700}
.topnav{display:flex;gap:4px}
.topnav a{padding:4px 10px;border-radius:8px;color:var(--muted)}
.topnav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.topright{margin-left:auto;display:flex;gap:6px;align-items:center;position:relative}
.topright select{width:auto}
.menu{position:absolute;right:0;top:40px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 20px #0002;display:flex;flex-direction:column;min-width:190px;padding:4px}
.menu button,.menuitem{border:0;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;background:transparent}
.menu button:hover,.menuitem:hover{background:var(--bg)}

main{max-width:1100px;margin:0 auto;padding:20px 16px 80px}
h1{font-size:26px;margin:4px 0 4px}
h2{font-size:18px;margin:0 0 10px}
h3{font-size:15px;margin:0 0 6px}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}

.scard{display:block;border-left:5px solid var(--c,var(--accent))}
.scard:hover{box-shadow:0 4px 14px #0001}
.stat{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);font-size:14px}
.stat:last-child{border:0}

.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600;background:var(--bg);color:var(--muted)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.acc{background:var(--accent-soft);color:var(--accent)}

.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin:14px 0 16px}
.tabs a{padding:8px 14px;white-space:nowrap;color:var(--muted);border-bottom:2px solid transparent}
.tabs a.on{color:var(--ink);border-color:var(--accent);font-weight:600}

table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;padding:6px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:4px;border-bottom:1px solid var(--line);vertical-align:top}
.t td input,.t td select,.t td textarea{border-color:transparent;background:transparent;padding:4px 6px}
.t td input:focus,.t td select:focus,.t td textarea:focus{border-color:var(--accent);background:var(--panel)}
.t td textarea{min-height:34px}
.t tr.late td{background:var(--warn-soft)}
.t tr.done td{background:var(--ok-soft)}
.tablewrap{overflow-x:auto}

.hw th,.hw td{text-align:center}
.hw td:first-child,.hw th:first-child{text-align:left}
.hw .today{background:var(--accent-soft)}

.photos{display:flex;gap:10px;flex-wrap:wrap}
.photo{position:relative;width:140px}
.photo img{width:140px;height:140px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.photo .ts{font-size:12px;color:var(--muted)}
.photo button{position:absolute;top:4px;right:4px}

.field{margin-bottom:10px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:3px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent);color:#fff}

.doc{white-space:pre-wrap}
/* 시간표 */
.ttwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:900px){.ttwrap{grid-template-columns:1fr}.tted{order:-1}}
.ttgrid{display:grid;grid-template-columns:40px repeat(7,minmax(74px,1fr));overflow:auto;max-height:75vh;border:1px solid var(--line);border-radius:8px}
.tthead{position:sticky;top:0;z-index:2;background:var(--panel);text-align:center;font-weight:700;font-size:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.tthead small{display:block;font-weight:500;font-size:11px;color:var(--ok)}
.tthead.today{color:var(--accent)}
.tthours{position:relative;border-right:1px solid var(--line)}
.tthours span{position:absolute;right:4px;font-size:11px;color:var(--muted);transform:translateY(-1px)}
.ttcol{position:relative;border-right:1px solid var(--line);cursor:copy}
.ttcol.today{background:#fdf6ee}
.ttcol.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.ttcol .hline{position:absolute;left:0;right:0;border-top:1px solid #eeece8}
.blk{position:absolute;left:2px;right:2px;border-radius:5px;padding:1px 4px;font-size:11px;line-height:1.25;overflow:hidden;cursor:pointer;border:1px solid #0001}
.blk b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk span{color:#555;font-size:10px}
.blk:hover{outline:2px solid var(--accent);z-index:1}
.tted textarea{font-family:ui-monospace,Consolas,"Malgun Gothic",monospace;font-size:13px;line-height:1.7}
.plan{display:grid;gap:6px;margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pitem{display:flex;gap:8px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-left:5px solid #ccc;border-radius:8px;cursor:pointer}
.pitem.on{background:var(--ok-soft)}
.pitem.on .ptext{text-decoration:line-through;color:var(--muted)}
.pitem.run{box-shadow:0 0 0 2px var(--warn)}
.ptext{flex:1}
.tbtn{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:99px;width:30px;height:30px;padding:0}
.timer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.timer.run{background:var(--warn-soft);border-radius:10px;padding:12px 14px}
.tlabel{font-weight:700;font-size:17px}
.tclock{font-size:38px;font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto;color:var(--warn)}
.tstart,.tstop{font-size:17px;padding:10px 20px}
button.tstop{background:var(--warn);border-color:var(--warn)}
.slist{margin-top:10px}
/* 과목·내신 */
.lbtn{display:inline-block;background:var(--info-soft);color:var(--info);border-radius:6px;padding:2px 8px;font-size:13px;font-weight:600;white-space:nowrap}
.subj{border-top:1px solid var(--line);padding:10px 0}
.subj h3{color:var(--accent)}
.method{margin:4px 0;padding:8px 10px;border-radius:8px;background:var(--bg)}
.method summary{cursor:pointer}
.method .doc{margin-top:6px;font-size:14px}
.method.mine{background:var(--accent-soft)}
button.chip{border-radius:99px}
button.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* 암기 퀴즈 */
.qstart{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}
button.big{font-size:17px;padding:12px 22px;border-radius:10px}
.addcards{margin-top:10px;border:1px dashed var(--line);border-radius:8px;padding:8px 12px}
.addcards summary{cursor:pointer}
.dots{color:var(--ok);letter-spacing:2px}
.quiz{max-width:640px;margin:0 auto 14px;padding:22px}
.qbar{height:6px;background:var(--bg);border-radius:9px;margin:10px 0 0;overflow:hidden}
.qbar span{display:block;height:100%;background:var(--accent)}
.qask{font-size:34px;font-weight:700;text-align:center;margin:36px 0 28px;word-break:keep-all}
.qans{font-size:22px;text-align:center;margin:0 0 22px;color:var(--info);font-weight:600}
.qyes{background:var(--ok);border-color:var(--ok);color:#fff}
.qno{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.opts{display:grid;gap:8px}
.opt{font-size:17px;padding:14px;text-align:left;border-radius:10px}
.opt.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);font-weight:700}
.opt.wrong{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.qdone{font-size:56px;text-align:center}
/* 숙제 인증 */
.hwitem{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.hwitem.on{background:var(--ok-soft);border-color:#bfe3cc}
.upbtn{background:var(--accent);color:#fff;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}
.mthumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mthumb{position:relative;width:96px;height:96px;border-radius:8px;overflow:hidden;cursor:zoom-in;background:#222}
.mthumb img,.mthumb video{width:100%;height:100%;object-fit:cover;display:block}
.mthumb .ts{position:absolute;left:0;right:0;bottom:0;background:#0009;color:#fff;font-size:11px;text-align:center;padding:1px 0}
.mthumb .vbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);color:#fff;font-size:22px;text-shadow:0 1px 6px #000}
.mthumb .mdel{position:absolute;top:3px;right:3px;padding:0 5px;background:#fffd;border:0}
.mthumb.gone{opacity:.35}
.clip{display:block;font-size:11px;color:var(--ok)}
.viewer{position:fixed;inset:0;z-index:50;background:#000d;display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:16px}
.viewer img,.viewer video{max-width:100%;max-height:100%;border-radius:8px;cursor:default}
.banner{position:sticky;top:53px;z-index:4;background:var(--warn);color:#fff;padding:10px 16px;text-align:center;font-size:15px}
.bbtn{display:inline-block;margin-left:8px;background:#fff;color:var(--warn);padding:3px 12px;border-radius:99px;font-weight:700}
.ptime{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;min-width:84px}
.vgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media (max-width:420px){.vgrid{grid-template-columns:1fr}}
.yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;cursor:pointer}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.yt .playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:12px;background:#e00;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px #0006}
.yt:hover .playbtn{background:#f00}
.yt.empty{display:flex;align-items:center;justify-content:center;color:#bbb;font-size:13px;cursor:default;background:var(--bg)}
.donebox{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:600}
.donebox.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.schedule{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
@media (max-width:720px){.schedule{grid-template-columns:repeat(2,1fr)}}
.schedule .day{background:var(--bg);border-radius:8px;padding:6px}
.schedule .day b{display:block;font-size:13px}
.schedule textarea{min-height:56px;font-size:13px;background:var(--panel)}
.empty{color:var(--muted);text-align:center;padding:18px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:8px;font-size:14px}
/* 로그인 · 동기화 */
.auth{max-width:420px;margin:40px auto}
.auth h1{text-align:center}
.authtabs{display:flex;margin:12px 0}
.authtabs button{flex:1}
.authmsg{background:var(--accent-soft);border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.sync{font-size:12px;color:var(--muted);white-space:nowrap}
.sync.ok{color:var(--ok)}
.sync.bad{color:var(--warn);font-weight:700}
.menuwho{padding:8px 10px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}
.menuwho:empty{display:none}
@media (max-width:520px){.sync{display:none}.topnav a{padding:4px 6px}}