/* ── 토큰 ─────────────────────────────────────────────── */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f0f3f7;
  --text:#12161c; --text-2:#5b6675; --text-3:#8a95a5;
  --line:#e3e8ef; --line-2:#eef1f6;
  --brand:#0f1f38; --brand-soft:#e7ebf1; --brand-ink:#996633;
  --ok:#0f9d58; --ok-soft:#e5f5ec;
  --warn:#e8890c; --warn-soft:#fdf0dd;
  --bad:#d93a3a; --bad-soft:#fdebeb;
  --info:#6b52d8; --info-soft:#efebfd;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px -8px rgba(16,24,40,.14);
  --tab-h:58px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --surface:#161b22; --surface-2:#1c232c;
    --text:#e7edf5; --text-2:#9fadbf; --text-3:#6e7d90;
    --line:#242c37; --line-2:#1e252e;
    --brand:#9db8dd; --brand-soft:#161e2c; --brand-ink:#c79a5f;
    --ok:#3fbe7c; --ok-soft:#132a1f;
    --warn:#f0a742; --warn-soft:#2c2214;
    --bad:#f06a6a; --bad-soft:#2e1919;
    --info:#a08ff5; --info-soft:#211d38;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px -10px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,
    BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none !important}

/* ── 로그인 ───────────────────────────────────────────── */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(170deg,var(--brand-soft),var(--bg) 46%)}
.login-box{width:100%;max-width:360px}
.brand{text-align:center;margin-bottom:26px}
/* 흰 배경을 이미지 안에 넣어, 브라우저의 강제 다크모드에도 로고가 뒤집히지 않게 한다 */
.brand-mark{width:76px;height:76px;margin:0 auto 14px;display:grid;place-items:center}
.brand-mark img{width:76px;height:76px;display:block;border-radius:20px;
  box-shadow:0 8px 22px -10px rgba(15,31,56,.55)}
.brand h1{margin:0;font-size:23px;letter-spacing:-.4px}
.brand p{margin:4px 0 0;color:var(--text-2);font-size:13.5px}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:6px;font-weight:600}
.field input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:16px}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.btn-primary{width:100%;padding:14px;border-radius:var(--radius-sm);background:var(--brand);
  color:#fff;font-weight:700;font-size:15.5px;margin-top:6px}
.btn-primary:active{transform:translateY(1px)}
.error{color:var(--bad);font-size:13px;margin:8px 0 0}
.login-hint{text-align:center;color:var(--text-3);font-size:12.5px;margin-top:18px}

/* ── 앱 셸 ────────────────────────────────────────────── */
.appbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.appbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;max-width:640px;margin:0 auto}
.appbar-title{font-size:18px;font-weight:700;letter-spacing:-.3px}
.appbar-sub{font-size:12px;color:var(--text-2);margin-top:1px}
.icon-btn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--text-2)}
.icon-btn:active{background:var(--surface-2)}

main{max-width:640px;margin:0 auto;padding:14px 14px calc(var(--tab-h) + 26px + env(safe-area-inset-bottom))}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;
  grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tab{height:var(--tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--text-3);font-size:10.5px;font-weight:600}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tab[data-tab="more"] svg{fill:currentColor;stroke:none}
.tab.on{color:var(--brand)}

/* ── 카드 / 공통 ──────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.card-title{font-size:14px;font-weight:700;letter-spacing:-.2px}
.card-more{font-size:12px;color:var(--brand);font-weight:600}
.muted{color:var(--text-2)}
.tiny{font-size:12px}
.empty{text-align:center;color:var(--text-3);font-size:13px;padding:26px 0}

.hero{background:linear-gradient(135deg,#0f1f38,#223c63);color:#fff;border:0;
  box-shadow:0 10px 24px -14px var(--brand)}
.hero .h-name{font-size:20px;font-weight:700;letter-spacing:-.3px}
.hero .h-meta{font-size:12.5px;opacity:.85;margin-top:2px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.hero-stat{background:rgba(255,255,255,.16);border-radius:12px;padding:10px 8px;text-align:center}
.hero-stat b{display:block;font-size:19px;font-weight:700;line-height:1.2}
.hero-stat span{font-size:11px;opacity:.85}

.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row:first-child{padding-top:0}
.row-main{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:12px;color:var(--text-2);margin-top:2px}

.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-bad{background:var(--bad-soft);color:var(--bad)}
.b-info{background:var(--info-soft);color:var(--info)}
.b-mute{background:var(--surface-2);color:var(--text-2)}

.bar{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--brand)}

.seg{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:12px;margin-bottom:12px}
.seg button{flex:1;padding:8px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-2)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* ── 출결 캘린더 ──────────────────────────────────────── */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-head b{font-size:16px}
.cal-nav{width:34px;height:34px;border-radius:10px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--text-2);font-size:16px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{text-align:center;font-size:11px;color:var(--text-3);font-weight:700;padding-bottom:4px}
.cal .dow.sun{color:var(--bad)}
.cell{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:12.5px;color:var(--text-2)}
.cell.pad{visibility:hidden}
.cell.today{outline:2px solid var(--brand);outline-offset:-2px}
.cell .dot{width:6px;height:6px;border-radius:50%}
.c-present{background:var(--ok-soft);color:var(--ok);font-weight:700}
.c-late{background:var(--warn-soft);color:var(--warn);font-weight:700}
.c-absent{background:var(--bad-soft);color:var(--bad);font-weight:700}
.c-makeup{background:var(--info-soft);color:var(--info);font-weight:700}
.c-excused{background:var(--surface-2);color:var(--text-2);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.legend span{font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ── 성적 차트 ────────────────────────────────────────── */
.chart{width:100%;height:150px;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .line{fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--brand);opacity:.09}
.chart .pt{fill:var(--surface);stroke:var(--brand);stroke-width:2.2}
.chart .lbl{fill:var(--text-3);font-size:10px}

.score-big{display:flex;align-items:flex-end;gap:8px}
.score-big b{font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1}
.score-big span{font-size:14px;color:var(--text-2);padding-bottom:4px}

/* ── 바텀시트 / 토스트 ────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:50}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:20px 20px 0 0;padding:8px 12px calc(14px + env(safe-area-inset-bottom));
  animation:up .22s ease}
@keyframes up{from{transform:translateY(100%)}}
.sheet-grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 10px}
.sheet-item{width:100%;padding:15px;border-radius:12px;font-size:15px;font-weight:600;text-align:center}
.sheet-item:active{background:var(--surface-2)}
.sheet-item.danger{color:var(--bad)}
.sheet-item.ghost{color:var(--text-2)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 20px);
  z-index:60;background:#111820;color:#fff;padding:11px 18px;border-radius:12px;
  font-size:13.5px;box-shadow:var(--shadow);max-width:86vw;text-align:center}

.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));
  background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:8px;height:14px}
@keyframes sk{to{background-position:-200% 0}}

/* ── 자녀 선택 ────────────────────────────────────────── */
.picker-list{display:flex;flex-direction:column;gap:8px}
.picker-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.picker-item:active{background:var(--surface-2)}
.picker-face{width:44px;height:44px;border-radius:50%;flex:none;display:grid;
  place-items:center;color:#fff;font-size:18px;font-weight:700}
.picker-main{flex:1;min-width:0}
.picker-name{font-size:16px;font-weight:600}
.picker-sub{font-size:12.5px;color:var(--text-2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-arrow{color:var(--text-3);font-size:18px}
.picker-out{width:100%;padding:13px;margin-top:16px;border-radius:var(--radius-sm);
  color:var(--text-2);font-size:14px;font-weight:600}
.picker-out:active{background:var(--surface-2)}
.appbar-sub.switch{color:var(--brand);font-weight:600}

.refresh-chip{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand-soft);color:var(--brand);border-radius:999px;
  padding:8px 14px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.refresh-chip::before{content:"";width:12px;height:12px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.refresh-chip::before{animation:none}}

/* ── 시험: 수업 선택 ──────────────────────────────────── */
.lesson-seg{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:12px;
  -webkit-overflow-scrolling:touch}
.lesson-seg::-webkit-scrollbar{display:none}
.lesson-seg button{flex:none;padding:8px 14px;border-radius:999px;font-size:13px;
  font-weight:600;color:var(--text-2);background:var(--surface-2);white-space:nowrap;
  border:1px solid transparent}
.lesson-seg button.on{background:var(--brand);color:#fff}
.lesson-seg button .n{opacity:.7;margin-left:5px;font-size:11.5px}

/* ── 홈 화면 바로가기 안내 ───────────────────────────── */
.a2hs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:60;display:flex;align-items:center;gap:12px;padding:13px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.22);animation:a2hs-in .28s ease-out}
@keyframes a2hs-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.a2hs-ico{width:42px;height:42px;border-radius:10px;flex:none}
.a2hs-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a2hs-txt b{font-size:14px;line-height:1.35}
.a2hs-txt span{font-size:12px;color:var(--ink-3);line-height:1.4}
.a2hs-btns{display:flex;align-items:center;gap:6px;flex:none}
.a2hs-go{padding:9px 14px;border-radius:10px;background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:700}
.a2hs-ghost{padding:9px 10px;border-radius:10px;background:none;color:var(--ink-3);
  font-size:13px}
.a2hs.wide{flex-wrap:wrap}
.a2hs.wide .a2hs-btns{width:100%;justify-content:flex-end}
/* 로그인한 뒤에는 아래 탭바를 가리지 않도록 한 칸 올린다 */
#app:not(.hidden) ~ .a2hs{bottom:calc(72px + env(safe-area-inset-bottom))}
/* 아이폰 안내: 문구 안의 공유 아이콘 + 아래를 가리키는 화살표 */
.a2hs-glyph{vertical-align:-4px;margin:0 1px;color:var(--brand)}
.a2hs.point::after{content:"";position:absolute;left:50%;bottom:-19px;width:14px;height:14px;
  margin-left:-7px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg);opacity:.85;animation:a2hs-bob 1.1s ease-in-out infinite}
@keyframes a2hs-bob{0%,100%{transform:rotate(45deg) translate(0,0)}
  50%{transform:rotate(45deg) translate(3px,3px)}}
.a2hs{position:fixed}

/* ── 같은 시험 평균 비교 ─────────────────────────────── */
.avg{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.avg-line{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13.5px;padding:3px 0}
.avg-line span{color:var(--ink-3)}
.avg-line b{font-size:15px;font-variant-numeric:tabular-nums}
.avg-bar{position:relative;height:7px;border-radius:99px;background:var(--surface-2);
  margin-top:9px;overflow:visible}
.avg-bar i{display:block;height:100%;border-radius:99px;background:var(--line);
  min-width:2px}
.avg-bar u{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--brand);border:2px solid var(--surface);transform:translate(-50%,-50%)}

/* ── 학원 소식 (블로그) — 사진과 제목만 ─────────────── */
.post{display:flex;gap:12px;align-items:center;padding:10px 0;
  border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.post:last-child{border-bottom:0;padding-bottom:2px}
.post:active{opacity:.6}
.post-thumb{width:64px;height:64px;border-radius:11px;object-fit:cover;flex:none;
  background:var(--surface-2)}
.post-title{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.42;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rankline{display:flex;align-items:baseline;justify-content:space-between;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line)}
.rank-l{font-size:13.5px;color:var(--ink-3)}
.rank-p{font-size:16px;font-weight:700;color:var(--brand-ink)}

/* ── 홈 상단: 로고 + 학원 이름 ───────────────────────── */
.appbar-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.appbar-logo{width:34px;height:34px;border-radius:10px;flex:none;
  box-shadow:0 1px 5px rgba(0,0,0,.16)}
.appbar-txt{min-width:0}
.appbar-title.named{font-size:17.5px;letter-spacing:-.4px}

/* 히어로 카드 상단 날짜 */
.hero .h-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:9px}
.hero .h-date{font-size:11.5px;font-weight:600;letter-spacing:.2px;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.13);
  padding:4px 10px;border-radius:99px}