:root{color-scheme:light dark;
  --brand:#213252;--orange:#fc780d;
  --navy:#213252;--orange-t:#b85208;--ink:#1a1a1a;--sub:#6b7280;--line:#e6e8ec;--bg:#f2f3f6;--surface:#fff;--page:#f2f3f6;--card:#fff;--sel:#d6dcea;
  --ok:#1f7a4d;--late:#9a5c00;--no:#c0392b;--ok-bg:#e9f5ef;--late-bg:#fbf1e2;--no-bg:#fbeceb;
  --hl:#213252;--on-hl:#fff;--note:#fff6ee;--toast:#1a1a1a;
  /* 강좌 색: 흰 바탕에서 모두 4.8:1 이상, 초록은 출결 전용이라 뺐다 */
  --c1:#213252;--c2:#b85208;--c3:#0f7c8c;--c4:#7b4fb8;--c5:#8a6d3b}
/* 휴대폰이 다크 모드면 자동으로 어둡게. --navy·--orange-t 는 글자색이라 밝게 바꾸고, 헤더·버튼 면은 --brand 그대로 */
@media (prefers-color-scheme:dark){:root{
  --navy:#9db4e0;--orange-t:#fc780d;--ink:#e8eaf0;--sub:#9aa3b2;--line:#2a3344;--bg:#232b3a;--surface:#12161d;--page:#12161d;--card:#1b2230;--sel:#34456a;
  --ok:#4cc38a;--late:#f0b43c;--no:#f07167;--ok-bg:#16352a;--late-bg:#3a2e14;--no-bg:#3d1f1f;
  --hl:#9db4e0;--on-hl:#12161d;--note:#2d2216;--toast:#2e3748;
  --c1:#9db4e0;--c2:#fc780d;--c3:#3fb5c4;--c4:#b39ae8;--c5:#c9a46a}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* 오른쪽 스크롤 막대를 숨긴다 (스크롤은 그대로 된다) */
html{scrollbar-width:none}
/* 가로로는 페이지가 밀리지 않게 (쓸어서 뒤로 가기는 앱이 직접 처리) */
html,body{overflow-x:hidden}
body{touch-action:pan-y}
::-webkit-scrollbar{display:none;width:0;height:0}
/* Netlify가 넣는 배지(무료 요금제)가 하단 탭을 가려서 숨긴다. 선생님 요청 */
body{font-variant-numeric:tabular-nums;font-family:"Noto Sans KR",sans-serif;color:var(--ink);background:var(--surface);max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh}  /* 아이폰 Safari는 100vh가 보이는 화면보다 커서 dvh로 맞춘다 */
.t{font-weight:700;font-size:14px}
.d{font-size:13px;color:var(--sub);line-height:1.5}
.big{font-size:17px;color:var(--navy)}
.ok{color:var(--ok)}.late{color:var(--late)}.no{color:var(--no)}.or{color:var(--orange-t)}
.dim{opacity:.45}

::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.top{position:sticky;top:0;z-index:5;background:var(--brand);color:#fff;padding:14px 16px 12px;padding-top:max(14px,calc(env(safe-area-inset-top) + 12px));display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.logo{height:16px;display:block;margin-bottom:6px}
.top b{font-size:17px}
#menu{position:relative}
.menu{width:44px;height:44px;margin:-10px -10px 0 0;border:0;background:none;color:#fff;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.menu svg{width:22px;height:22px;fill:currentColor}
.drop{position:absolute;right:-6px;top:38px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:6px;min-width:160px}
.drop button{display:block;width:100%;min-height:44px;text-align:left;padding:0 12px;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);border-radius:8px;cursor:pointer}
.drop button:active{background:var(--bg)}

/* 홈 화면 앱(아이폰)은 시계 아래 약 34px까지 시스템이 흐리게 덮는다. 로고·제목이 그 아래로 오게 내린다 */
@media (display-mode:standalone){
  .top{padding-top:calc(env(safe-area-inset-top) + 34px)}
  #login .hero{padding-top:calc(env(safe-area-inset-top) + 52px)}
  #ptr{top:calc(env(safe-area-inset-top) + 120px)}
}
body.out .top,body.out main{display:none}  /* 로그인 화면에서는 빈 main 여백(110px) 때문에 스크롤이 생기지 않게 */
/* 최신 iOS Safari는 화면 맨 위(시계 줄)를 위쪽에 붙은 고정 요소나 페이지 바탕색으로 칠한다.
   남색 띠를 맨 위에 고정해 두어 흰색이 비쳐 뿌옇게 보이지 않게 한다 */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:max(1px,env(safe-area-inset-top));background:var(--brand);z-index:20;pointer-events:none}
html:has(body.out),body.out{background:var(--brand)}
/* 앱 안에서도 페이지 바탕색을 헤더색으로 둬서 Safari가 맨 위를 흰색으로 칠하지 않게 한다. 보이는 바탕은 그 아래 흰 면이 덮는다 */
body:not(.out){background:var(--brand) linear-gradient(var(--brand) 0 50px,var(--page) 50px);min-height:100lvh}  /* 처음 열 때 아이폰이 화면 높이를 작게 잡아 아래에 바탕이 비치지 않게 */
#login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#login .hero{background:var(--brand);color:#fff;padding:44px 24px 32px;padding-top:max(44px,calc(env(safe-area-inset-top) + 28px))}
#login .hero img{height:22px;display:block}
#login .hero b{display:block;font-size:22px;margin-top:12px}
#login .hero span{font-size:13px;opacity:.75}
#login .form{flex:1;background:var(--surface);padding:24px 20px 40px}
#login .btn{margin-top:16px}
main{padding:14px 16px 96px}

/* ---------- 움직임: 상태를 알려 주는 데만 짧게 ---------- */
:root{--ease:cubic-bezier(.16,1,.3,1)}
button,.go{-webkit-tap-highlight-color:transparent;transition:transform .1s ease-out,background-color .15s,border-color .15s,color .15s,opacity .15s}
button:active,.card.go:active{transform:scale(.97)}
.card.go:active{background:var(--bg)}
.btn:active{filter:brightness(.88)}
main.nav-fwd{animation:fwd .3s var(--ease)}
main.nav-back{animation:bwd .3s var(--ease)}
main.nav-fade{animation:fade .2s ease-out}
@keyframes fwd{from{opacity:0;transform:translateX(24px)}}
@keyframes bwd{from{opacity:0;transform:translateX(-24px)}}
@keyframes fade{from{opacity:0}}
.drop,.acts,.info{transform-origin:top right;animation:pop .2s var(--ease)}
.drop.out{animation:out .12s ease-in forwards}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(-4px)}}
@keyframes out{to{opacity:0;transform:scale(.96) translateY(-4px)}}
#toast{animation:up .28s var(--ease)}
#toast.out{animation:down .18s ease-in forwards}
@keyframes up{from{opacity:0;transform:translateY(16px)}}
@keyframes down{to{opacity:0;transform:translateY(12px)}}
.cnt{display:inline-block}
.cnt.bump{animation:bump .3s var(--ease)}
@keyframes bump{40%{transform:scale(1.2);color:var(--navy)}}
.sk{border-radius:8px;background:linear-gradient(90deg,var(--line) 0,var(--bg) 40%,var(--line) 80%);background-size:300% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{from{background-position:100% 0}to{background-position:-50% 0}}
/* 동작 줄이기: 움직임은 빼고 나타나고 사라지는 것만 남긴다 */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01s!important}
  button:active,.card.go:active{transform:none}
  main.nav-fwd,main.nav-back,main.nav-fade,.drop,.acts,.info,#toast,.cnt.bump{animation:fade .15s ease-out!important}
  .drop.out,#toast.out{animation:none!important;opacity:0}
  .sk{animation:none}
}

/* ---------- 수업 진행 상태 ---------- */
.state{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);margin-bottom:4px}
.state i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.state.live{color:var(--orange-t);font-weight:700}
.state.live i{width:8px;height:8px;background:var(--orange)}
.card.done{opacity:.6}
.next{background:var(--brand);color:#fff;border-radius:18px;padding:16px;margin-bottom:4px}
.next small{font-size:12px;opacity:.8}
.next .big{color:#fff;font-size:26px;font-weight:700;margin:4px 0 2px}
.next .when{font-size:13px;color:#ffd2ad;font-weight:500}
.emptybox{text-align:center;padding:24px 10px}
.emptybox svg{width:40px;height:40px;fill:none;stroke:var(--sub);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.emptybox .t{margin-top:8px}
.tabs{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;background:var(--surface);display:flex;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
/* 아이폰에서 탭 아래에 바탕색(남색)이 비치는 틈을 흰 면으로 막는다 */
.tabs::after{content:"";position:absolute;left:0;right:0;top:100%;height:120px;background:var(--surface)}
/* 당겨서 새로고침 표시 */
/* 당기는 만큼 주황 고리가 차오르고, 다 차면 놓아서 새로고침. 불러오는 동안은 짧은 호가 돈다 */
#ptr{position:fixed;left:50%;top:max(84px,calc(env(safe-area-inset-top) + 84px));z-index:6;width:38px;height:38px;margin-left:-19px;border-radius:50%;background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.14);display:grid;place-items:center;opacity:0;transform:translateY(-44px) scale(.8);pointer-events:none}
#ptr svg{width:26px;height:26px;transform:rotate(-90deg);fill:none;stroke-width:3;stroke-linecap:round}
#ptr .trk{stroke:var(--line)}
#ptr .arc{stroke:var(--orange);stroke-dasharray:100;stroke-dashoffset:100}
#ptr.ready{animation:ready .25s var(--ease)}
@keyframes ready{50%{scale:1.12}}
/* 불러오는 동안은 테두리 원을 돌린다. SVG 대신 HTML 요소를 돌려야 아이폰에서 끊기지 않는다 */
#ptr .spinner{position:absolute;width:24px;height:24px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--orange);opacity:0;will-change:transform}
#ptr.spin svg{opacity:0}
#ptr.spin .spinner{opacity:1;animation:spin .75s linear infinite}
#ptr.out{transition:opacity .2s,transform .2s;opacity:0!important;transform:translateY(12px) scale(.6)!important}
@keyframes spin{to{transform:rotate(360deg)}}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:7px 0 5px;border:0;background:none;font:inherit;font-size:11px;color:var(--sub);cursor:pointer}
.tabs svg{width:24px;height:24px;fill:currentColor}
.tabs button.on{color:var(--navy);font-weight:700}
#toast{position:fixed;left:16px;right:16px;bottom:calc(64px + env(safe-area-inset-bottom));max-width:488px;margin:0 auto;background:var(--toast);color:#fff;font-size:13px;padding:10px 14px;border-radius:10px;z-index:9}

.sec{font-size:12px;color:var(--sub);margin:18px 0 8px}
main>.sec:first-child{margin-top:0}
.card{border:0;box-shadow:0 1px 2px rgba(20,30,50,.06),0 2px 8px rgba(20,30,50,.05);border-radius:16px;padding:12px 14px;margin-bottom:8px;background:var(--card)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.list .card{display:flex;justify-content:space-between;align-items:center;gap:8px}
.list .card.stu{display:block}
.go{cursor:pointer}
.pill{font-size:13px;color:var(--navy);font-weight:700;white-space:nowrap}
.pill.todo{color:var(--orange-t)}
.tag{font-size:12px;padding:2px 8px;border-radius:99px;white-space:nowrap;border:1px solid currentColor;color:var(--sub)}
.tag.ok{color:var(--ok)}.tag.late{color:var(--late)}.tag.no{color:var(--no)}.tag.or{color:var(--orange-t)}.tag.plan{color:var(--navy)}

.les .cls{font-size:12px;color:var(--navy);font-weight:700;margin-bottom:4px}
.les .ln{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-top:6px;line-height:1.4;white-space:pre-line}
.les .ln>span:first-child{flex:none;width:30px;color:var(--sub);font-size:12px}
.les .ln em{font-style:normal;color:var(--orange-t);font-weight:500;font-size:12px;margin-left:auto;white-space:nowrap}
.les .ln a{color:var(--navy);font-weight:700;cursor:pointer}
.player iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px;margin-top:8px;display:block}
.empty{color:var(--orange-t)}

.btn{display:block;width:100%;padding:12px;border:0;border-radius:12px;background:var(--brand);color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;margin-top:10px}
.btn.line{background:none;color:var(--navy);border:1px solid var(--navy)}
.btn.danger{background:none;color:var(--no);border:1px solid var(--no);margin-top:24px}
.btn:disabled,.mini:disabled{opacity:.5}
.mini{min-height:40px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:0 12px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink);white-space:nowrap}
.back{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0 0 -6px;padding:0 6px;border:0;background:none;font:inherit;font-size:14px;color:var(--navy);cursor:pointer}
input,textarea,select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px;margin-top:4px;background:var(--card);color:var(--ink)}
textarea{resize:vertical}
input:not([type=checkbox]):not([type=file]),select{height:46px}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-width:0;display:block;text-align:left}
input::-webkit-date-and-time-value{text-align:left}
label{display:block;font-size:12px;color:var(--sub);margin-top:10px}
label.sec{margin:18px 0 8px}
label.keep,label.chk{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:13px;margin-top:12px}
label.keep input,label.chk input{width:auto;margin:0}
.two{display:flex;gap:8px;align-items:flex-end}.two>*{flex:1;min-width:0}.two>.mini{flex:none;margin-bottom:2px}

.att{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.att button{min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:12px;font:inherit;font-size:14px;cursor:pointer;color:var(--sub)}
.att button.on.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:700}
.att button.on.late{border-color:var(--late);background:var(--late-bg);color:var(--late);font-weight:700}
.att button.on.no{border-color:var(--no);background:var(--no-bg);color:var(--no);font-weight:700}
.all{min-height:40px;padding:0 12px;border:1px solid var(--navy);background:var(--card);color:var(--navy);border-radius:12px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}

.days{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.days button{border:1px solid var(--line);background:var(--card);border-radius:99px;width:40px;height:40px;font:inherit;font-size:13px;cursor:pointer;color:var(--sub)}
.days button.on{border-color:var(--hl);background:var(--hl);color:var(--on-hl)}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal b{font-size:11px;color:var(--sub);font-weight:400;padding:4px 0}
.cal button{border:0;background:none;font:inherit;font-size:13px;padding:6px 0 4px;border-radius:8px;cursor:pointer;min-height:44px;color:var(--ink)}
.cal button.today span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--hl);color:var(--on-hl);font-weight:700}
.cal button.sel{background:var(--bg)}
.cal button u{display:flex;gap:2px;justify-content:center;margin-top:3px;text-decoration:none}
.cal i,.legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.cal button s.abs{color:var(--no);font-weight:700}
.cal button s{display:block;font-size:11px;color:var(--sub);text-decoration:none;margin-top:2px}
.calhead{margin-bottom:8px}
.calhead .nav{width:44px;height:44px;border:0;background:none;font-size:22px;color:var(--navy);cursor:pointer;border-radius:10px}
.legend{display:flex;gap:12px;font-size:11px;color:var(--sub);margin-top:8px;flex-wrap:wrap}
.legend i{margin-right:4px}

.q .a{margin-top:8px;padding:8px 10px;background:var(--bg);border-radius:8px;font-size:13px;line-height:1.5;white-space:pre-line}
.q img{display:block;width:100%;min-height:120px;object-fit:contain;background:var(--bg);border-radius:8px;margin-top:8px;cursor:zoom-in}
.q img[data-full]{cursor:default}
.q .body{font-size:13px;margin-top:4px;line-height:1.5;white-space:pre-line}
.more{width:44px;height:44px;margin:-8px -8px -8px 0;border:0;background:none;color:var(--sub);border-radius:10px;cursor:pointer;display:grid;place-items:center;flex:none}
.more svg{width:20px;height:20px;fill:currentColor}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.acts button{min-height:44px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--navy);background:var(--card);color:var(--navy)}
.acts button.danger{border-color:var(--no);color:var(--no)}
.acts .wide{grid-column:1/-1}
.acts button.fill{background:var(--brand);border-color:var(--brand);color:#fff}
.info{margin-top:4px}
/* 공지는 주황 띠로 다른 카드와 구분한다 */
.card.notice{background:var(--note);box-shadow:none;border-left:4px solid var(--orange);border-radius:4px 16px 16px 4px}
.notice .row .d{color:var(--orange-t);font-weight:500}
.notice .body{font-size:15px;font-weight:500;margin-top:6px;line-height:1.6;white-space:pre-line}
.pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pick label{display:inline-flex;align-items:center;gap:6px;margin:0;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:99px;font-size:14px;color:var(--ink);cursor:pointer;background:var(--card)}
.pick label:has(input:checked){border-color:var(--navy);background:var(--bg);font-weight:700}
.pick input{width:auto;height:auto;margin:0;accent-color:var(--brand)}
.qdel{display:block;margin:10px 0 0 auto;min-height:36px;padding:0 10px;border:0;background:none;font:inherit;font-size:13px;color:var(--no);cursor:pointer;border-radius:8px}
/* 처리 중: 버튼 글자 대신 도는 원 */
button.busy{position:relative;color:transparent!important;pointer-events:none}
button.busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--navy);animation:spin .7s linear infinite}
.btn.busy::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.att button.busy::after,.qdel.busy::after{width:14px;height:14px;margin:-9px 0 0 -9px}
.pwline{margin-top:10px;padding:10px 12px;background:var(--bg);border-radius:10px;line-height:1.5}
.pwline .newpw{font-size:20px;margin-left:6px}
.pwline .d{margin-top:4px}
.sch{font-size:12px;font-weight:400;color:var(--sub);margin-left:6px}
.newpw{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:2px}