/* ── 토큰 ─────────────────────────────────────────────── */
: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:50px;
}
@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;white-space:pre-line;line-height:1.5}
.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) + 18px + env(safe-area-inset-bottom))}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;
  grid-template-columns:repeat(6,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:2px;color:var(--text-3);font-size:9px;font-weight:600;
  min-width:0;padding:0;letter-spacing:-.6px;white-space:nowrap;overflow:hidden}
.tab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* 말풍선 안의 점 세 개는 채워서 문자 아이콘처럼 보이게 */
.tab[data-tab="talk"] svg circle{fill:currentColor;stroke:none}
.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))}
/* 아래쪽에 눌러야 할 것이 있는 화면에서는 안내 배너를 내린다 */
body.nobanner .a2hs{display:none!important}
/* 아이폰 안내: 문구 안의 공유 아이콘 + 아래를 가리키는 화살표 */
.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}

/* ── 관리자 대리 보기 띠 ─────────────────────────────── */
.impbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  gap:8px;padding:calc(7px + env(safe-area-inset-top)) 14px 7px;
  background:#7a3b12;color:#fff;font-size:12.5px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.imp-dot{width:7px;height:7px;border-radius:50%;background:#ffb454;flex:none;
  animation:imp-pulse 1.6s ease-in-out infinite}
@keyframes imp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.imp-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-txt b{font-weight:700}
.imp-out{flex:none;padding:5px 11px;border-radius:8px;background:rgba(255,255,255,.18);
  color:#fff;font-size:12px;font-weight:600}
.imp-out:active{background:rgba(255,255,255,.3)}
body.imp .appbar{top:var(--imp-h,42px)}
body.imp #app{padding-top:var(--imp-h,42px)}
.hw-note{margin-top:5px;font-size:12.5px;color:var(--brand-ink);background:var(--brand-soft);
  padding:6px 9px;border-radius:8px;line-height:1.45}
.sheet-item.alarm{display:flex;align-items:center;justify-content:space-between;gap:10px}
.alarm-state{font-size:12.5px;color:var(--brand);font-weight:700}
.alarm-why{font-size:12.5px;color:var(--ink-3);line-height:1.5;padding:2px 6px 8px}
.hw-short{margin-top:5px;font-size:13px;color:var(--bad);font-weight:600}
.hw-short b{font-size:15px;font-weight:800}

/* ── 홈 화면 알림 안내 카드 ──────────────────────────── */
.pushcard{border:1px solid var(--brand-soft);background:linear-gradient(180deg,
  color-mix(in srgb,var(--brand-soft) 55%,var(--surface)),var(--surface))}
.pc-top{display:flex;gap:12px;align-items:flex-start}
.pc-ico{font-size:24px;line-height:1.1;flex:none}
.pc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pc-txt b{font-size:15px}
.pc-txt span{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.pc-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.pc-later{padding:9px 12px;border-radius:10px;background:none;color:var(--ink-3);font-size:13px}
.pc-go{padding:9px 16px;border-radius:10px;background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:700}
.pc-go:disabled{opacity:.5}
.pushcard.done{display:flex;gap:12px;align-items:center}

/* ── 일정 변경 요청 ──────────────────────────────────── */
.row.tappable{cursor:pointer}
.row.tappable:active{background:var(--surface-2);border-radius:10px}
.ask-hint{margin-top:5px;font-size:11.5px;color:var(--brand);font-weight:600}
.ask-title{font-size:17px;font-weight:700;margin:2px 0 4px}
.ask-sub{font-size:13px;color:var(--ink-3);margin-bottom:14px}
.ask-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin:10px 0 5px}
.ask-date,.ask-reason{width:100%;padding:12px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-size:15px;font-family:inherit}
.ask-reason{resize:none;line-height:1.5}
.ask-btns{display:flex;gap:8px;margin-top:16px}
.ask-cancel{flex:1;padding:14px;border-radius:12px;background:var(--surface-2);color:var(--ink-3);
  font-size:15px;font-weight:600}
.ask-send{flex:2;padding:14px;border-radius:12px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:700}
.ask-send:disabled{opacity:.5}
.req-cancel{margin-top:7px;padding:6px 12px;border-radius:9px;background:var(--surface-2);
  color:var(--ink-3);font-size:12.5px;font-weight:600}
.req-cancel:active{background:var(--bad-soft);color:var(--bad)}
.req-cancel:disabled{opacity:.5}

/* ── 담당 선생님과의 대화 (문자 화면처럼) ──────────── */
/* 높이를 계산하지 않는다. 아이폰은 주소창·키보드 때문에 화면 높이가
   계속 바뀌어서, 계산해 두면 어긋난다. 그냥 페이지가 흐르게 두고
   입력칸만 탭바 위에 붙여 둔다. */
.sms{display:flex;flex-direction:column}
body.talking-fit main{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
.sms-top{display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:10px}
.sms-face{width:38px;height:38px;border-radius:50%;background:var(--brand-soft);
  display:grid;place-items:center;font-size:19px;flex:0 0 auto}
.sms-face.sm{width:27px;height:27px;font-size:14px;align-self:flex-end}
.sms-name{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.sms-sub{font-size:12px;color:var(--text-2)}

/* 높이는 화면을 실제로 재서 JS 가 --sms-h 에 넣어 준다.
   어림수를 쓰면 기기마다 헤더 높이가 달라 위아래로 길쭉해진다. */
/* 높이를 재서 --sms-h 에 넣고, 그 높이로 못 박는다.
   재는 값이 조금 어긋나도 페이지가 한 화면을 넘지 않는다.
   목록이 길면 이 안에서만 스크롤된다 (문자 앱과 같은 방식). */
.sms-log{display:flex;flex-direction:column;gap:9px;padding:2px 2px 12px;
  justify-content:flex-end;
  height:var(--sms-h, 42vh);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sms-day{text-align:center;margin:6px 0 2px}
.sms-day span{background:var(--surface-2);color:var(--text-2);font-size:11px;
  padding:3px 11px;border-radius:999px}

.sms-line{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.sms-line.me{justify-content:flex-end}
.sms-line .sms-b{max-width:72%;min-width:0}
.sms-who{font-size:11px;color:var(--text-2);margin:0 0 3px 4px}
.sms-bub{padding:9px 13px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;
  word-break:break-word}
.sms-line.you .sms-bub{background:var(--surface-2);color:var(--text);
  border-radius:16px 16px 16px 4px}
.sms-line.me .sms-bub{background:var(--brand);color:#fff;
  border-radius:16px 16px 4px 16px}
.sms-line time{font-size:10px;color:var(--text-3);flex:0 0 auto;padding-bottom:2px}
.sms-line.me time{order:-1}

.sms-none{text-align:center;color:var(--text-3);padding:40px 16px}
.sms-none-face{font-size:34px;margin-bottom:8px}
.sms-none p{margin:2px 0;font-size:13.5px}

/* 입력칸은 늘 탭바 바로 위에 붙어 있다 */
.sms-bar{position:sticky;z-index:15;
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
  margin:0 -14px;padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line)}
.sms-emo{display:flex;gap:6px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none}
.sms-emo::-webkit-scrollbar{display:none}
.sms-emo button{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--surface-2);font-size:17px;line-height:1;cursor:pointer;padding:0}
.sms-emo button:active{transform:scale(.92)}
.sms-input{display:flex;align-items:flex-end;gap:7px}
.sms-input textarea{flex:1;font:inherit;font-size:16px;padding:10px 14px;resize:none;
  border:1px solid var(--line);border-radius:19px;background:var(--surface);
  color:var(--text);max-height:108px;line-height:1.45}
.sms-input textarea:focus{outline:none;border-color:var(--brand)}
.sms-input button{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--brand);display:grid;place-items:center;cursor:pointer;padding:0}
.sms-input button svg{width:19px;height:19px;fill:#fff;stroke:none}
.sms-input button:disabled{opacity:.45}

/* 안 읽은 답이 있으면 문의 탭에 빨간 점 */
.tab.hasnew{position:relative}
.tab.hasnew::after{content:"";position:absolute;top:7px;right:calc(50% - 13px);
  width:7px;height:7px;border-radius:50%;background:var(--bad);
  box-shadow:0 0 0 2px var(--surface)}

/* 선생님이 새로 정해 준 날짜 */
.row-sub .was{opacity:.6;text-decoration:line-through;margin-left:4px}

/* "홈 화면에 추가" 배너가 떠 있는 동안에는 본문 아래를 그만큼 비워 둔다.
   그러지 않으면 배너가 마지막 버튼(로그아웃 등)을 덮어 눌리지 않는다. */
body.a2hs-on:not(.nobanner) main{padding-bottom:calc(var(--tab-h) + 18px
  + var(--a2hs-h, 120px) + env(safe-area-inset-bottom))}
.chart .tick{fill:var(--text-3);font-size:9px;text-anchor:end}

/* 밀린 숙제 — 다 해 올 때까지 남는다 */
.hw-late{margin-top:5px;font-size:12.5px;color:var(--warn);
  background:var(--warn-soft);border-radius:8px;padding:5px 9px;display:inline-block}
.hw-late b{font-weight:800}
.hw-late span{display:block;color:var(--text-2);font-size:11.5px;margin-top:2px}

/* 담당 선생님이 두 분일 때 고르는 줄 */
.sms-pick{display:flex;gap:7px;overflow-x:auto;padding:0 0 9px;scrollbar-width:none}
.sms-pick::-webkit-scrollbar{display:none}
.sms-pick button{position:relative;flex:0 0 auto;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.sms-pick button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.sms-pick .dot{position:absolute;top:5px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--bad);display:block}
.sms-pick button.on .dot{background:#fff}

/* 숙제 마감일 */
.hw-due{color:var(--text-2)}
.hw-due-over{color:var(--warn);font-weight:700}