/* ============================================================
   편입로그 — design system
   Type    : Pretendard Variable (self-hosted) → Apple SD Gothic Neo
   Accent  : cobalt #2B5BE3 (단일 액센트, 그라데이션 없음)
   Radius  : card 20 / tile 14 / input 12 / chip pill / sheet 26
   Hero    : ink 서페이스는 화면당 1개 (홈 D-day, 학습 헤더)
   ============================================================ */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root{
  /* 브라우저·안드로이드 WebView에 "이 사이트는 라이트/다크를 직접 처리한다"고 알림.
     없으면 OS 다크 모드일 때 WebView 강제 다크(force-dark)가 페이지를 덧칠해서
     테마 토글이 안 먹고, 다크는 더 어두워지고, 아이콘/모서리가 뭉개짐. */
  color-scheme: light dark;
  --bg:#F4F5F9;
  --bg2:#EAECF2;
  --card:#FFFFFF;
  --card2:#F1F2F7;
  --ink:#131722;
  --sub:#69707F;
  --sub2:#9AA1B0;
  --line:rgba(19,23,40,.08);
  --line2:rgba(19,23,40,.05);
  --tint:#2B5BE3;
  --tint-deep:#1E46C0;
  --tint-soft:rgba(43,91,227,.08);
  --tint-soft2:rgba(43,91,227,.14);
  --hero-ink:#14161F;
  --red:#E5484D; --red-soft:rgba(229,72,77,.09);
  --orange:#EE7A19; --orange-soft:rgba(238,122,25,.10);
  --green:#1FA05C; --green-soft:rgba(31,160,92,.09);
  --gold:#C98A08; --gold-soft:rgba(201,138,8,.11);
  --violet:#7A4DD8; --violet-soft:rgba(122,77,216,.10);
  --purple:#7A4DD8; --purple-soft:rgba(122,77,216,.10);
  --blue:#2B5BE3; --blue-soft:rgba(43,91,227,.09);
  --mint:#12A5A0;
  --shadow-1:0 1px 2px rgba(18,27,64,.04),0 4px 16px rgba(18,27,64,.04);
  --shadow-2:0 2px 8px rgba(18,27,64,.07),0 16px 40px rgba(18,27,64,.10);
  --r-card:20px; --r-tile:14px; --r-input:12px; --r-sheet:26px;
  --tabbar-h:80px;
  --ease:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1015; --bg2:#151821;
    --card:#161921; --card2:#1F232D;
    --ink:#ECEEF4; --sub:#8D94A4; --sub2:#5D6474;
    --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.05);
    --tint:#6889FF; --tint-deep:#4D6FEA;
    --tint-soft:rgba(104,137,255,.12); --tint-soft2:rgba(104,137,255,.2);
    --blue:#6889FF; --blue-soft:rgba(104,137,255,.12);
    --purple:#9D7BF0; --purple-soft:rgba(157,123,240,.13);
    --hero-ink:#181B26;
    --shadow-1:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    --shadow-2:0 2px 8px rgba(0,0,0,.4),0 16px 44px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0E1015; --bg2:#151821; --card:#161921; --card2:#1F232D;
  --ink:#ECEEF4; --sub:#8D94A4; --sub2:#5D6474;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.05);
  --tint:#6889FF; --tint-deep:#4D6FEA;
  --tint-soft:rgba(104,137,255,.12); --tint-soft2:rgba(104,137,255,.2);
  --blue:#6889FF; --blue-soft:rgba(104,137,255,.12);
  --purple:#9D7BF0; --purple-soft:rgba(157,123,240,.13);
  --hero-ink:#181B26;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --shadow-2:0 2px 8px rgba(0,0,0,.4),0 16px 44px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F4F5F9; --bg2:#EAECF2; --card:#FFFFFF; --card2:#F1F2F7;
  --ink:#131722; --sub:#69707F; --sub2:#9AA1B0;
  --line:rgba(19,23,40,.08); --line2:rgba(19,23,40,.05);
  --tint:#2B5BE3; --tint-deep:#1E46C0;
  --tint-soft:rgba(43,91,227,.08); --tint-soft2:rgba(43,91,227,.14);
  --blue:#2B5BE3; --blue-soft:rgba(43,91,227,.09);
  --purple:#7A4DD8; --purple-soft:rgba(122,77,216,.10);
  --hero-ink:#14161F;
  --shadow-1:0 1px 2px rgba(18,27,64,.04),0 4px 16px rgba(18,27,64,.04);
  --shadow-2:0 2px 8px rgba(18,27,64,.07),0 16px 40px rgba(18,27,64,.10);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:16px; line-height:1.5; letter-spacing:-.012em;
  min-height:100dvh; overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none}
svg{display:block}
img{max-width:100%}
b,strong{font-weight:700}
.pi{display:inline-flex;flex-shrink:0;vertical-align:-3px}
.pi svg{width:100%;height:100%}
.bmark{display:inline-flex;flex-shrink:0;filter:drop-shadow(0 3px 8px rgba(43,91,227,.28))}
.bmark svg{width:100%;height:100%}

#app{max-width:520px;margin:0 auto;min-height:100dvh;position:relative}
#view{padding:0 20px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);animation:viewIn .16s var(--ease)}
#view.no-tab{padding-bottom:32px}
/* 화면 이동 시에만, 슬라이드 없이 가벼운 페이드만(페이지 새로고침 같은 느낌 제거) */
@keyframes viewIn{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media (min-width:560px){
  body{background:var(--bg2)}
  #app{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(10,14,35,.14);min-height:100vh}
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 10px;margin:0 -20px 8px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.topbar .tb-title{font-size:16.5px;font-weight:700;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}
.topbar .tb-side{display:flex;align-items:center;gap:4px;min-width:42px}
.topbar .tb-side.right{justify-content:flex-end}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);position:relative;transition:transform .15s var(--ease),background .15s;
}
.icon-btn:active{transform:scale(.88);background:var(--line2)}
.icon-btn .dot{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.brand-word{font-size:20px;font-weight:900;letter-spacing:-.045em;color:var(--ink)}
.avatar{width:31px;height:31px;border-radius:50%;background:var(--tint-soft2);color:var(--tint);display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* 프로필 편집: 아바타 선택 */
.pf-avatar-row{display:flex;flex-direction:column;align-items:center;gap:11px;margin:6px 0 18px}
.pf-av{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--card2);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
.pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-av-btns{display:flex;gap:8px}
.btn.ghost.sm{width:auto;padding:8px 14px;font-size:13px}
.btn.danger-soft{background:var(--red-soft);color:var(--red)}
.btn[hidden]{display:none}

.big-title{font-size:26px;font-weight:900;letter-spacing:-.04em;margin:8px 0 18px}
.big-title small{display:block;font-size:14px;font-weight:500;color:var(--sub);letter-spacing:-.01em;margin-top:4px}

/* ---------- section head (카드 밖 헤더) ---------- */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:24px 2px 10px}
.sec-head h3{font-size:16.5px;font-weight:800;letter-spacing:-.025em;display:flex;align-items:center;gap:6px}
.sec-head .more{font-size:13px;font-weight:600;color:var(--sub);display:inline-flex;align-items:center;gap:1px}
.sec-head .more:active{opacity:.5}
.sec-head .sec-side{font-size:12.5px;color:var(--sub2);font-weight:600}
.sec-label{font-size:16.5px;font-weight:800;letter-spacing:-.025em;margin:24px 2px 10px;display:flex;align-items:center;gap:6px}

/* ---------- tab bar (iOS 리퀴드 글래스 · 플로팅) ---------- */
#tabbar{
  position:fixed;
  bottom:calc(env(safe-area-inset-bottom) + 12px);
  left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:428px;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:8px 8px;border-radius:28px;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(200%) blur(28px);backdrop-filter:saturate(200%) blur(28px);
  border:.5px solid var(--glass-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -0.5px 0 rgba(255,255,255,.06) inset,
    0 12px 34px rgba(12,16,34,.20),
    0 2px 8px rgba(12,16,34,.10);
}
:root{ --glass:color-mix(in srgb,var(--card) 62%,transparent); --glass-edge:rgba(255,255,255,.5); }
@media (prefers-color-scheme:dark){ :root{ --glass:color-mix(in srgb,#20242F 55%,transparent); --glass-edge:rgba(255,255,255,.12); } }
:root[data-theme="light"]{ --glass:color-mix(in srgb,var(--card) 62%,transparent); --glass-edge:rgba(255,255,255,.5); }
:root[data-theme="dark"]{ --glass:color-mix(in srgb,#20242F 55%,transparent); --glass-edge:rgba(255,255,255,.12); }
#tabbar.hidden{display:none}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border-radius:20px;color:var(--sub2);font-size:10px;font-weight:600;transition:transform .2s var(--spring),color .2s;z-index:1}
.tab:active{transform:scale(.88)}
.tab.on{color:var(--tint);font-weight:700}
.tab.on::before{content:"";position:absolute;inset:2px;border-radius:18px;background:var(--tint-soft);z-index:-1;animation:tabGlow .4s var(--spring)}
@keyframes tabGlow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.tab.on::after{display:none}
.tab .ti-f{display:none}
.tab.on .ti-f{display:inline-flex}
.tab.on .ti-r{display:none}

/* ---------- surfaces ---------- */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:20px;margin-bottom:12px;border:.5px solid var(--line2)}
.card.flat{box-shadow:none}
.card.list-card{padding:6px 18px}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-h h3{font-size:16px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.card-h .more{font-size:13px;font-weight:600;color:var(--sub);display:flex;align-items:center;gap:1px}
.hero-ink{background:var(--hero-ink);color:#fff;border:.5px solid rgba(255,255,255,.06);box-shadow:var(--shadow-2)}
.hero-ink p{color:rgba(255,255,255,.62)}

.cell{display:flex;align-items:center;gap:13px;padding:14px 2px;border-bottom:.5px solid var(--line2);transition:opacity .15s}
.cell:last-child{border-bottom:0}
.cell:active{opacity:.55}
.cell .c-icon{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cell .c-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cell .c-title{font-size:15px;font-weight:700;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .c-sub{font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .c-right{display:flex;align-items:center;gap:6px;color:var(--sub2);font-size:13px;flex-shrink:0}

.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:100px;font-size:13px;font-weight:600;background:var(--card);color:var(--sub);border:.5px solid var(--line);transition:all .16s var(--ease)}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--ink);color:var(--bg);border-color:transparent;font-weight:700}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2.5px 7px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:-.005em}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.blue{background:var(--tint-soft);color:var(--tint)}
.badge.tint{background:var(--tint-soft);color:var(--tint)}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.orange{background:var(--orange-soft);color:var(--orange)}
.badge.purple{background:var(--violet-soft);color:var(--violet)}
.badge.gray{background:var(--card2);color:var(--sub)}
.badge.track{background:var(--gold-soft);color:var(--gold)}
.badge.bsm{font-size:9.5px;padding:1.5px 5px;gap:2px;vertical-align:middle}
.badge.track .pi,.badge.green .pi,.badge.blue .pi{color:inherit}
.sched-track-note{font-size:12px;line-height:1.6;font-weight:600;color:var(--gold);background:var(--gold-soft);border-radius:11px;padding:9px 12px;margin:2px 0 13px}
.sched-track-note.ok{color:var(--green);background:var(--green-soft)}
.sched-track-note.ann{color:var(--tint);background:var(--tint-soft)}
.est-note{font-size:11.5px;line-height:1.6;font-weight:600;color:var(--sub);background:var(--card2);border-radius:10px;padding:8px 12px;margin:0 0 12px}
.est-note b{font-weight:800;color:var(--ink)}
/* ===== 토스 결제창 모달: SDK가 650px 고정폭 인라인 스타일로 삽입해 좁은 화면에서
   좌우가 잘리던 문제 보정(max-width가 인라인 width를 이기고, inset+margin:auto로 재중앙) ===== */
#__tosspayments_payment-gateway_iframe__{max-width:100vw !important; max-height:100dvh !important; inset:0 !important; margin:auto !important;}

/* ===== PLUS 배지 (프로필) ===== */
.plus-badge{display:inline-flex;align-items:center;gap:3px;vertical-align:2px;padding:3px 8px;border-radius:100px;
  font-size:10.5px;font-weight:900;letter-spacing:.02em;color:#7A5A00;
  background:linear-gradient(135deg,#FFE9A8,#FFC94D);box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 4px rgba(255,178,36,.35)}
.plus-badge .pi{color:inherit}

/* ===== 결제 확인 스피너 ===== */
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--tint);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.6s}}

/* ===== 사용자 프로필 ===== */
.prof-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0 20px}
.prof-av{margin-bottom:12px}
.prof-nick{font-size:20px;font-weight:900;letter-spacing:-.03em;display:flex;align-items:center;gap:6px}
.prof-lock{color:var(--sub2);display:inline-flex}
.prof-handle{font-size:13px;color:var(--sub2);font-weight:600;margin-top:3px}
.prof-bio{font-size:14px;color:var(--sub);font-weight:500;margin-top:9px;max-width:290px;line-height:1.5}
.prof-stats{display:flex;gap:28px;margin-top:16px}
.prof-stats>div{display:flex;flex-direction:column;align-items:center}
.prof-stats b{font-size:19px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prof-stats span{font-size:11.5px;color:var(--sub);font-weight:600;margin-top:2px}
.prof-actions{display:flex;gap:9px;margin-top:16px;width:100%;max-width:320px}
.prof-actions .btn{flex:1;margin-top:0}
.prof-follow.bump{animation:doneBump .4s var(--spring)}
.prof-private{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:40px 24px;color:var(--sub)}
.prof-private b{font-size:15.5px;color:var(--ink);font-weight:800;margin-top:6px}
.prof-private span{font-size:13px}

.sched-track-note b{font-weight:800}
.sched-track-note a{color:inherit;text-decoration:underline;font-weight:800}
.sched-track-note .pi{vertical-align:-2px;margin-right:4px;color:inherit}
.ex-tag{font-size:10.5px;font-weight:600;color:var(--sub2)}

/* ---------- buttons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px;border-radius:15px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  background:var(--tint);color:#fff;box-shadow:0 4px 14px rgba(43,91,227,.24);
  transition:transform .15s var(--ease),filter .15s,opacity .2s,box-shadow .2s;
}
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(.94);box-shadow:0 2px 8px rgba(43,91,227,.2)}
.btn:disabled{opacity:.35;box-shadow:none}
.btn.ghost{background:var(--card2);color:var(--ink);box-shadow:none}
.btn.soft{background:var(--tint-soft);color:var(--tint);box-shadow:none}
.btn.danger-soft{background:var(--red-soft);color:var(--red);box-shadow:none}
.btn.sm{padding:11px 15px;font-size:14px;border-radius:12px;width:auto}
.btn.kakao{background:#FEE500;color:#191600;box-shadow:none}
.btn.google{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}

.fab{
  position:fixed;right:max(20px,calc(50% - 240px));bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);z-index:45;
  height:50px;padding:0 20px;border-radius:100px;background:var(--tint);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:7px;font-size:14.5px;font-weight:700;
  box-shadow:0 8px 22px rgba(43,91,227,.38);transition:transform .18s var(--ease);
}
.fab:active{transform:scale(.93)}

/* ---------- forms ---------- */
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin:0 4px 6px}
.input,textarea.input,select.input{
  width:100%;padding:14px 16px;border-radius:var(--r-input);border:1.5px solid transparent;
  background:var(--card2);font-size:15.5px;font-weight:500;outline:none;transition:border .18s,background .18s;
  -webkit-appearance:none;appearance:none;
}
.input:focus{border-color:var(--tint);background:var(--card)}
/* 커스텀 자동완성(네이티브 datalist 팝업이 웹뷰에서 위치가 어긋나는 문제 대체) */
.ac-wrap{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;margin-top:5px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);max-height:216px;overflow-y:auto;padding:4px}
.ac-list[hidden]{display:none}
.ac-item{display:block;width:100%;text-align:left;padding:11px 12px;font-size:14.5px;
  font-weight:600;color:var(--ink);border-radius:8px;background:transparent}
.ac-item:hover,.ac-item:active{background:var(--card2)}
.input::placeholder{color:var(--sub2);font-weight:400}
textarea.input{min-height:130px;resize:vertical;line-height:1.6}
.input-row{display:flex;gap:10px}
.input-row>*{flex:1}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2369707F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

.seg{display:flex;background:var(--bg2);border-radius:12px;padding:3px;gap:2px}
.seg button{flex:1;padding:9px 4px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--sub);transition:all .2s var(--ease)}
.seg button.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(15,20,45,.1)}

.switch{position:relative;width:48px;height:29px;border-radius:15px;background:var(--bg2);transition:background .2s;flex-shrink:0}
.switch.on{background:var(--green)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .22s var(--ease)}
.switch.on::after{transform:translateX(19px)}

/* ---------- sheet / toast ---------- */
#sheet-root .backdrop{position:fixed;inset:0;background:rgba(8,11,22,.46);z-index:90;animation:fadeIn .22s}
@keyframes fadeIn{from{opacity:0}}
.sheet{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:95;
  background:var(--card);border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding:8px 22px calc(env(safe-area-inset-bottom) + 22px);
  animation:sheetUp .34s var(--ease);max-height:86dvh;overflow-y:auto;
}
@keyframes sheetUp{from{transform:translate(-50%,60%);opacity:.5}to{transform:translate(-50%,0)}}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 16px}
.sheet h3{font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.sheet .s-sub{font-size:13.5px;color:var(--sub);margin-bottom:16px;line-height:1.55}
#toast-root{position:fixed;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:88vw}
.toast{background:rgba(20,23,33,.94);color:#fff;padding:12px 20px;border-radius:100px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.28);animation:toastIn .3s var(--ease);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.92)}}
.toast.out{opacity:0;transform:translateY(8px);transition:all .3s}

/* ---------- 홈: 스트릭 ---------- */
.streak-strip{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-tile);
  background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);margin-bottom:10px;
}
.streak-strip .flame{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--orange);
  background:linear-gradient(158deg,color-mix(in srgb,var(--orange) 17%,transparent),color-mix(in srgb,var(--orange) 8%,transparent));
  box-shadow:0 3px 13px rgba(238,122,25,.2),inset 0 1px 0 rgba(255,255,255,.1);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.streak-strip.lit .flame{
  background:linear-gradient(158deg,color-mix(in srgb,var(--orange) 30%,transparent),color-mix(in srgb,var(--orange) 13%,transparent));
  box-shadow:0 4px 18px rgba(238,122,25,.4),inset 0 1px 0 rgba(255,255,255,.16)}
.streak-strip .pi{color:inherit}
.streak-strip b{font-size:14.5px;display:block;letter-spacing:-.02em}
.streak-strip span{font-size:12px;color:var(--sub);display:block;margin-top:3px}
.streak-strip .go{margin-left:auto;color:var(--tint);font-size:13px;font-weight:700;display:flex;align-items:center;flex-shrink:0}

/* ---------- 홈: 오늘의 학습 현황(목표 링 + 하트 + 출석) ---------- */
.today-study{
  display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:var(--r-tile);
  background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);margin-bottom:10px;
}
.ts-ring-wrap{position:relative;width:58px;height:58px;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer}
.ts-ring{width:58px;height:58px;display:block;transform:rotate(-90deg)}
.ts-ring .tr-bg{fill:none;stroke:var(--line2);stroke-width:6}
.ts-ring .tr-fg{fill:none;stroke:var(--tint);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s var(--spring)}
.ts-ring .tr-fg.met{stroke:var(--green)}
.ts-ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;pointer-events:none}
.ts-ctr b{font-size:15px;font-weight:800;letter-spacing:-.03em}
.ts-ctr span{font-size:10px;color:var(--sub2);margin-top:1px}
.ts-ctr .tsc-done{color:var(--green);display:flex}
.ts-body{flex:1;min-width:0}
.ts-title{font-size:14px;font-weight:800;letter-spacing:-.02em}
.ts-sub{font-size:12px;color:var(--sub);margin-top:2px;line-height:1.35}
.ts-chips{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.ts-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--tint-soft);color:var(--tint);border:none;cursor:pointer;line-height:1}
.ts-chip .tsc-t{font-weight:600;opacity:.85}
.ts-chip.cta{background:var(--orange-soft);color:var(--orange)}
.ts-chip.done{background:var(--green-soft);color:var(--green)}

/* ---------- 홈: D-day 히어로 (ink) ---------- */
.dday-card{
  position:relative;overflow:hidden;border-radius:var(--r-card);padding:22px 20px 18px;margin-bottom:4px;color:#fff;
  background:var(--hero-ink);
  border:.5px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-2);
  isolation:isolate;
}
/* 애니메이션 오로라 블러 그라데이션 */
.dday-card::before,.dday-card::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(38px);opacity:.55;
  will-change:transform;
}
.dday-card::before{
  width:230px;height:230px;top:-90px;right:-60px;
  background:radial-gradient(circle at 30% 30%, #5B76FF, #3A4BD8 60%, transparent 72%);
  animation:auroraA 14s ease-in-out infinite;
}
.dday-card::after{
  width:200px;height:200px;bottom:-90px;left:-50px;
  background:radial-gradient(circle at 60% 40%, #7C5CFF, #4A5CF0 55%, transparent 72%);
  animation:auroraB 18s ease-in-out infinite;
}
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-38px,26px) scale(1.15)}66%{transform:translate(20px,-16px) scale(.92)}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(40px,-22px) scale(1.12)}70%{transform:translate(-16px,18px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.dday-card::before,.dday-card::after{animation:none}}
.dday-card .dc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dday-card .dc-school{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}
.dday-card .dc-school .sw{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.dday-card .dc-change{font-size:12px;font-weight:600;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:1px}
.dday-card .dc-main{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dday-card .dc-d{font-size:46px;font-weight:900;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.dday-card .dc-date{font-size:12.5px;color:rgba(255,255,255,.55);font-weight:500;margin-top:9px}
/* D-day 우측 학교 로고: 어두운 카드 위에 흰 링 + 은은한 글로우로 목표를 시각화 */
.dday-card .dc-logo{flex-shrink:0;display:inline-flex;padding:6px;border-radius:22px;background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 18px rgba(0,0,0,.3);align-self:center}
.dday-card .dc-logo .slogo{box-shadow:none}
.dday-card .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:16px;overflow:hidden}
.dday-card .bar i{display:block;height:100%;border-radius:3px;background:#8AA4FF;transition:width .8s var(--ease)}
.dday-card .pct{font-size:11px;color:rgba(255,255,255,.42);margin-top:8px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 홈: 목표 학교 카드 ---------- */
.hscroll{display:flex;gap:9px;overflow-x:auto;padding:2px 20px 8px;margin:0 -20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-left:20px}
.hscroll::-webkit-scrollbar{display:none}
.school-mini{
  min-width:150px;background:var(--card);border-radius:var(--r-tile)+2px;border-radius:16px;padding:15px 14px 13px;border:.5px solid var(--line2);
  box-shadow:var(--shadow-1);flex-shrink:0;transition:transform .16s var(--ease);text-align:left;
}
.school-mini:active{transform:scale(.96)}
.school-mini .sm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.school-mini .slogo{display:inline-flex}   /* .school-mini span{display:block}가 로고를 block으로 덮어써 이미지가 좌상단으로 쏠리던 문제 방지 */
.school-mini .sm-logo{width:34px;height:34px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
.school-mini .sm-comp{font-size:10.5px;font-weight:600;color:var(--sub2);font-variant-numeric:tabular-nums}
.school-mini b{font-size:15px;display:block;letter-spacing:-.025em}
.school-mini span{font-size:11.5px;color:var(--sub);display:block;margin-top:1px}
.school-mini .sm-d{font-size:11.5px;font-weight:700;color:var(--tint);margin-top:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.school-mini .sm-d span{display:inline;margin:0;font-size:inherit;color:var(--sub2)}
.school-mini.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--sub2);font-size:12.5px;font-weight:600;border:1.5px dashed var(--line);box-shadow:none;background:transparent;min-height:112px}

/* ---------- 홈: 퀵메뉴 (토스식 베어 아이콘) ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:18px 0 2px}
.quick{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 4px;border-radius:var(--r-tile);font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.02em;transition:transform .16s var(--ease),background .16s}
.quick:active{transform:scale(.93);background:var(--line2)}
.quick .q-ic{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center}

/* ---------- 글 목록 ---------- */
.post-row{display:block;padding:14px 2px;border-bottom:.5px solid var(--line2)}
.post-row:last-child{border-bottom:0}
.post-row:active{opacity:.55}
.post-row .p-title{font-size:14.5px;font-weight:700;letter-spacing:-.015em;display:flex;gap:6px;align-items:center;min-width:0}
.post-row .p-title .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-row .p-body{font-size:13px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-row .p-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sub2);margin-top:7px;font-weight:500}
.post-row .p-meta .cnt{display:flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.post-row .p-meta .cnt.like{color:var(--red)}
.post-row .p-meta .cnt.cmt{color:var(--tint)}

/* ---------- 학교 ---------- */
.search-bar{display:flex;align-items:center;gap:9px;background:var(--card2);border-radius:var(--r-input);padding:12px 14px;margin-bottom:12px;border:1.5px solid transparent;transition:border .2s}
.search-bar:focus-within{border-color:var(--tint);background:var(--card)}
.search-bar .pi{color:var(--sub2)}
.search-bar input{flex:1;border:0;background:none;outline:none;font-size:15px;font-weight:500;min-width:0}
.school-row{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:.5px solid var(--line2)}
.school-row:last-child{border-bottom:0}
.school-row:active .sr-name{opacity:.55}
.school-row .sr-logo{color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)}
.school-row .sr-body{flex:1;min-width:0}
.school-row .sr-name{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.025em;word-break:keep-all}
.school-row .sr-region{font-size:12px;font-weight:600;color:var(--sub2);white-space:nowrap}
.school-row .sr-sub{display:block;font-size:12.5px;color:var(--sub);margin-top:4px;word-break:keep-all}
.sc-more-btn{width:calc(100% + 32px);margin:2px -16px 0;padding:14px 0;border:0;border-top:.5px solid var(--line2);background:none;color:var(--tint);font-size:13.5px;font-weight:800;letter-spacing:-.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px}
.sc-more-btn .pi{color:var(--tint);transition:transform .2s}
.sc-more-btn:active{background:var(--tint-soft)}
.sc-more-btn:active .pi{transform:translateY(2px)}
.sc-filters{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sc-regions{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.sc-regions::-webkit-scrollbar{display:none}
.sc-regions .chip{flex-shrink:0;padding:6px 12px;font-size:12.5px}
.sc-sort-dd{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:100px;background:var(--card2);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.sc-sort-dd:active{background:var(--line2)}
.sort-opts{display:flex;flex-direction:column;gap:2px;margin:6px 0 8px}
.sort-opt{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-radius:var(--r-tile);font-size:15px;font-weight:600;text-align:left;color:var(--ink)}
.sort-opt.on{color:var(--tint);font-weight:800;background:var(--tint-soft)}
.sort-opt>span{color:var(--tint);display:inline-flex}
/* 약관 및 정책 문서 */
.legal-doc{padding:0 2px}
.legal-doc h4{font-size:14px;font-weight:800;letter-spacing:-.02em;margin:18px 0 7px;color:var(--ink)}
.legal-doc h4:first-child{margin-top:2px}
.legal-doc p{font-size:13px;line-height:1.78;color:var(--sub);margin-bottom:4px}
.legal-doc .lg-lead{font-size:13.5px;color:var(--ink);font-weight:500;margin-bottom:10px;line-height:1.7}
.legal-doc b{color:var(--ink);font-weight:700}
/* 첫 방문 데이터 수집 고지 */
.privacy-notice{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:200;background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);box-shadow:0 10px 30px -8px rgba(0,0,0,.35);padding:13px 15px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;animation:nbIn .4s var(--spring,cubic-bezier(.34,1.4,.64,1))}
.privacy-notice span{flex:1;min-width:140px;font-size:12.5px;line-height:1.5;color:var(--sub);font-weight:500}
.privacy-notice a{font-size:12.5px;font-weight:700;color:var(--tint);text-decoration:underline}
.privacy-notice button{flex-shrink:0;padding:8px 16px;border-radius:100px;background:var(--tint);color:#fff;font-weight:800;font-size:13px}
/* 동의 배너가 떠 있을 때 로그인/온보딩 화면 하단 CTA(둘러보기 등)가 가려지지 않도록 여백 확보 */
body:has(.privacy-notice) .onb-wrap{padding-bottom:calc(env(safe-area-inset-bottom) + 100px)}
.heart-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--sub2);flex-shrink:0;transition:transform .18s var(--ease)}
.heart-btn:active{transform:scale(1.22)}
.heart-btn.on{color:var(--red);animation:pop .3s var(--ease)}
@keyframes pop{40%{transform:scale(1.3)}}

.school-hero{border-radius:var(--r-card);padding:24px 20px;color:#fff;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:var(--shadow-2)}
.school-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 150% at 92% -20%,rgba(255,255,255,.16),transparent 55%)}
.school-hero h2{font-size:23px;font-weight:900;letter-spacing:-.035em;position:relative;z-index:1}
.school-hero .sh-sub{font-size:13px;opacity:.85;font-weight:500;margin-top:4px;position:relative;z-index:1}
.stat4{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat{background:var(--card);border-radius:var(--r-tile);padding:14px 16px;border:.5px solid var(--line2);box-shadow:var(--shadow-1)}
.stat .st-k{font-size:12px;color:var(--sub);font-weight:600}
.stat .st-v{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.stat .st-v small{font-size:12px;font-weight:600;color:var(--sub)}
.stat .st-n{font-size:11px;color:var(--sub2);margin-top:2px;font-weight:500}

.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;border-radius:1px;background:var(--line)}
.tl-item{position:relative;padding:9px 0}
.tl-item::before{content:"";position:absolute;left:-20px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--card);border:2.5px solid var(--sub2)}
.tl-item.hot::before{border-color:var(--tint);background:var(--tint)}
.tl-item .tl-t{font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.tl-item .tl-d{font-size:12.5px;color:var(--sub);font-weight:500;margin-top:2px;display:flex;align-items:center;gap:6px}

.bars{display:flex;align-items:flex-end;gap:16px;height:118px;padding:6px 8px 0}
.bar-g{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar-g .bg-v{font-size:12px;font-weight:700;color:var(--tint);font-variant-numeric:tabular-nums}
.bar-g .bg-b{width:100%;max-width:42px;border-radius:7px 7px 3px 3px;background:var(--tint);opacity:.85;min-height:8px}
.bar-g:last-child .bg-b{opacity:1}
.bar-g .bg-y{font-size:11.5px;color:var(--sub);font-weight:600}

table.mini{width:100%;border-collapse:collapse;font-size:13px}
table.mini th{font-size:11.5px;color:var(--sub);font-weight:700;padding:7px 6px;border-bottom:1px solid var(--line);text-align:center}
table.mini td{padding:9px 6px;text-align:center;border-bottom:.5px solid var(--line2);font-weight:500;font-variant-numeric:tabular-nums}
table.mini td:first-child,table.mini th:first-child{text-align:left;font-weight:700}
table.mini tr:last-child td{border-bottom:0}
table.mini tr.mini-tot td{border-top:1.5px solid var(--line);border-bottom:0;font-weight:800;color:var(--ink)}
.quote{background:var(--tint-soft);border-radius:var(--r-tile);padding:15px 17px;font-size:14px;font-weight:500;color:var(--ink);line-height:1.65}
.quote p{position:relative}

/* ---------- 게시판 ---------- */
.board-tabs{display:flex;gap:7px;overflow-x:auto;margin:0 -20px 12px;padding:2px 20px 6px;scrollbar-width:none}
.board-tabs::-webkit-scrollbar{display:none}
.board-tabs .chip{flex-shrink:0}
.cmt{display:flex;gap:10px;padding:13px 0;border-bottom:.5px solid var(--line2)}
.cmt:last-child{border-bottom:0}
.cmt .cm-av{width:30px;height:30px;border-radius:50%;background:var(--card2);color:var(--sub);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.cmt .cm-b{flex:1;min-width:0}
.cmt .cm-n{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.cmt .cm-t{font-size:14px;margin-top:2px;line-height:1.6;word-break:break-word;font-weight:400}
.cmt .cm-m{font-size:11px;color:var(--sub2);margin-top:5px;display:flex;gap:10px;font-weight:500}
.cmt.accepted{background:var(--green-soft);border-radius:var(--r-input);padding:13px;border-bottom:0;margin-bottom:6px}
.cmt .cm-m button{background:none;border:none;color:var(--sub);font-weight:700;font-size:11px;cursor:pointer;padding:0}
.cmt .cm-m button:active{opacity:.55}
.cmt .cm-n .cm-op{padding:1px 6px;font-size:10px}
/* 대댓글(1단계 들여쓰기 + L 커넥터) */
.cmt.reply{margin-left:34px;padding:11px 0;position:relative;border-bottom:0}
.cmt.reply::before{content:"";position:absolute;left:-18px;top:18px;width:11px;height:11px;border-left:1.6px solid var(--line);border-bottom:1.6px solid var(--line);border-bottom-left-radius:6px}
.cmt.reply .cm-av{width:26px;height:26px;font-size:11px}
/* 댓글 입력 도크 + 답글 대상 바 */
.cmt-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:60;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:.5px solid var(--line)}
.reply-bar{display:flex;align-items:center;gap:8px;padding:9px 18px 0;font-size:12px;color:var(--tint);font-weight:700}
.reply-bar[hidden]{display:none}
.reply-bar-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-x{width:22px;height:22px;border-radius:50%;background:var(--card2);color:var(--sub);display:flex;align-items:center;justify-content:center;border:none;flex-shrink:0;cursor:pointer}
.cmt-input{display:flex;gap:8px;align-items:flex-end;padding:10px 16px calc(env(safe-area-inset-bottom) + 10px)}
.cmt-input input{flex:1;padding:12px 16px;border-radius:100px;border:0;background:var(--card2);outline:none;font-size:14.5px;font-weight:500;color:var(--ink)}
.cmt-input .send{width:41px;height:41px;border-radius:50%;background:var(--tint);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmt-input .send:active{transform:scale(.9)}
.cmt-input .anon-t{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--sub);flex-shrink:0;padding:0 2px 12px}
.cmt-input .anon-t.on{color:var(--tint);font-weight:700}
/* 게시글 투표(보기) */
.poll{background:var(--card2);border-radius:16px;padding:14px;margin:15px 0 4px}
.poll-h{font-size:12.5px;font-weight:800;color:var(--sub);display:flex;align-items:center;gap:5px;margin-bottom:11px}
.poll-opt{display:block;width:100%;text-align:left;padding:13px 15px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:8px;cursor:pointer;transition:transform .1s,border-color .12s}
.poll-opt:last-of-type{margin-bottom:0}
.poll-opt:active{transform:scale(.98);border-color:var(--tint)}
.poll-res{position:relative;padding:12px 15px;border-radius:12px;overflow:hidden;margin-bottom:8px;background:var(--card);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600}
.poll-res:last-of-type{margin-bottom:0}
.poll-res-bar{position:absolute;left:0;top:0;bottom:0;background:var(--tint-soft2);border-radius:12px;z-index:0;transition:width .5s var(--spring,cubic-bezier(.34,1.4,.64,1))}
.poll-res.mine{outline:1.5px solid var(--tint)}
.poll-res-t{position:relative;z-index:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poll-res-p{position:relative;z-index:1;font-weight:800;color:var(--tint);flex-shrink:0;margin-left:10px}
.poll-total{font-size:11.5px;color:var(--sub2);font-weight:600;text-align:right;margin-top:9px}
/* 글쓰기 투표 작성 */
.wpoll{margin:2px 0 14px}
.wpoll-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--tint);background:var(--tint-soft);border:none;border-radius:100px;padding:9px 15px;cursor:pointer}
.wpoll-toggle.on{background:var(--tint);color:#fff}
.wpoll-body{margin-top:12px;background:var(--card2);border-radius:14px;padding:14px}
.wpoll-opt{margin-bottom:8px}
.wpoll-add{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--sub);background:none;border:none;cursor:pointer;padding:2px}
/* 학점 계산기 */
.gpa-result{text-align:center;padding:24px 16px;background:var(--hero-ink);color:#fff;border:none}
.gpa-big{font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1}
.gpa-big small{font-size:18px;font-weight:700;opacity:.55;margin-left:6px}
.gpa-sub{font-size:13px;opacity:.82;margin-top:9px;font-weight:600}
.gpa-sub b{color:#fff}
.gpa-scale{margin:12px 0 16px}
.gpa-head{display:grid;grid-template-columns:78px 1fr 40px;gap:8px;padding:0 4px 7px;font-size:12px;color:var(--sub2);font-weight:700}
.gpa-row{display:grid;grid-template-columns:78px 1fr 40px;gap:8px;align-items:center;margin-bottom:8px}
.gpa-cr,.gpa-gr{padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:15px;font-weight:600;outline:none;width:100%}
.gpa-cr{text-align:center}
.gpa-cr:focus,.gpa-gr:focus{border-color:var(--tint)}
.gpa-del{width:40px;height:40px;border-radius:12px;background:var(--card2);color:var(--sub2);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.gpa-del:active{color:var(--red)}
/* 스트릭 프리즈 */
.freeze-dots{display:flex;justify-content:center;gap:12px;margin:16px 0 8px}
.fz-dot{font-size:34px;filter:grayscale(1);opacity:.35;transition:filter .2s,opacity .2s}
.fz-dot.on{filter:none;opacity:1}
.freeze-count{text-align:center;font-size:30px;font-weight:900;letter-spacing:-.03em;margin-bottom:14px}
.freeze-count small{font-size:15px;font-weight:600;color:var(--sub2)}
/* 게시판 구독 / HOT / 키워드 알림 */
.board-sub{background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0}
.board-sub:active{transform:scale(.85)}
.sub-tag{padding:0 6px!important;font-size:10px}
.hot-row{display:flex;align-items:center;gap:12px}
.hot-rank{width:22px;text-align:center;font-size:16px;font-weight:900;color:var(--sub2);flex-shrink:0;font-variant-numeric:tabular-nums}
.hot-rank.top{color:var(--orange)}
.kw-add-row{display:flex;gap:8px;margin:14px 0 12px}
.kw-add-row input{flex:1;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:14.5px;outline:none}
.kw-add-row input:focus{border-color:var(--tint)}
.kw-add-row .btn{width:auto;padding:0 18px;flex-shrink:0}
.kw-list{display:flex;flex-wrap:wrap;gap:8px;min-height:20px}
.kw-chip{display:inline-flex;align-items:center;gap:6px;background:var(--tint-soft);color:var(--tint);font-size:13px;font-weight:700;padding:7px 8px 7px 13px;border-radius:100px}
.kw-chip button{background:color-mix(in srgb,var(--tint) 22%,transparent);border:none;color:inherit;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
/* 학원·강사 평가 */
.aca-ic{width:42px;height:42px;border-radius:13px;background:var(--tint-soft);color:var(--tint);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;flex-shrink:0}
.aca-ic.big{width:54px;height:54px;font-size:24px;border-radius:16px}
.aca-rate{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.aca-rate b{font-size:16px;font-weight:900;letter-spacing:-.02em}
.aca-rate span{font-size:11px;color:var(--sub2);font-weight:600}
.stars{display:inline-flex;align-items:center;gap:1px;color:var(--gold)}
.aca-hero{display:flex;align-items:center;gap:14px}
.aca-hero-name{font-size:18px;font-weight:900;letter-spacing:-.02em}
.aca-hero-tag{font-size:12.5px;color:var(--sub);font-weight:600;margin-top:2px}
.aca-hero-rate{display:flex;align-items:center;gap:8px;margin-top:8px}
.aca-hero-rate b{font-size:22px;font-weight:900;letter-spacing:-.03em}
.aca-hero-rate span{font-size:12px;color:var(--sub2);font-weight:600}
.aca-rev{padding:13px 0;border-bottom:.5px solid var(--line2)}
.aca-rev:last-child{border-bottom:0}
.aca-rev-top{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--sub2);font-weight:600;flex-wrap:wrap}
.aca-rev-subj{background:var(--tint-soft);color:var(--tint);padding:2px 8px;border-radius:100px;font-weight:700}
.aca-rev-nick{margin-left:auto}
.aca-rev-body{font-size:14px;line-height:1.6;margin-top:7px;word-break:break-word}
.aca-star-pick{display:flex;justify-content:center;gap:6px;margin:8px 0 16px}
.aca-star-pick button{background:none;border:none;color:var(--gold);cursor:pointer;padding:2px}
.aca-star-pick button:not(.on){color:var(--line)}
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:12px 0}
.spec .sp{background:var(--card2);border-radius:var(--r-input);padding:11px 13px}
.spec .sp b{font-size:15px;display:block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.spec .sp span{font-size:11px;color:var(--sub);font-weight:600}

/* ---------- 학습 ---------- */
.learn-head{
  border-radius:var(--r-card);color:#fff;padding:22px 20px;margin-bottom:8px;position:relative;overflow:hidden;
  background:
    radial-gradient(110% 150% at 88% -20%, rgba(255,255,255,.15), transparent 50%),
    linear-gradient(160deg, var(--tint) 0%, var(--tint-deep) 100%);
  box-shadow:0 10px 28px rgba(43,91,227,.3);
}
.learn-head .lh-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.learn-head .lh-stat{text-align:center}
.learn-head .lh-stat b{font-size:23px;font-weight:900;display:block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.learn-head .lh-stat span{font-size:11px;opacity:.75;font-weight:600}
.ring{position:relative;width:74px;height:74px}
.ring svg{transform:rotate(-90deg)}
.ring .ring-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.ring .ring-t small{font-size:9px;opacity:.7;font-weight:600}
.week-dots{display:flex;justify-content:space-between;margin:18px 2px 0;position:relative;z-index:1}
.week-dots .wd{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;font-weight:600;opacity:.85}
.week-dots .wd i{width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.week-dots .wd.done i{background:#fff;color:var(--tint)}

.path{position:relative;padding:6px 0 14px}
.unit{display:flex;align-items:center;gap:15px;padding:11px 4px;position:relative;width:100%;text-align:left}
.unit .u-bub{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-weight:800;position:relative;transition:transform .16s var(--ease);
}
.unit:active .u-bub{transform:translateY(2px)}
.unit.done .u-bub{background:var(--green);color:#fff;box-shadow:0 3.5px 0 #17804A}
.unit.now .u-bub{background:var(--tint);color:#fff;box-shadow:0 3.5px 0 var(--tint-deep),0 0 0 5px var(--tint-soft)}
.unit.lock .u-bub{background:var(--card2);color:var(--sub2);box-shadow:0 3.5px 0 var(--bg2)}
.unit .u-body{flex:1;min-width:0}
.unit .u-body b{font-size:15px;display:block;letter-spacing:-.02em}
.unit .u-body span{font-size:12px;color:var(--sub);font-weight:500}
.unit .u-line{position:absolute;left:32px;top:66px;width:3px;height:20px;border-radius:2px;background:var(--line)}
.unit.done .u-line{background:var(--green);opacity:.4}
.unit:last-child .u-line{display:none}

.quiz-top{display:flex;align-items:center;gap:12px;padding:16px 0 10px}
.quiz-top .qx{color:var(--sub);width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.pbar{flex:1;height:9px;border-radius:5px;background:var(--bg2);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:5px;background:var(--green);transition:width .4s var(--ease)}
.q-word{font-size:33px;font-weight:900;letter-spacing:-.02em;text-align:center;margin:10px 0 4px}
.q-hint{text-align:center;color:var(--sub);font-size:13.5px;font-weight:500;margin-bottom:22px}
.choices{display:flex;flex-direction:column;gap:9px}
.choice{
  padding:16px;border-radius:var(--r-tile);background:var(--card);border:1.5px solid var(--line);
  font-size:15.5px;font-weight:600;text-align:center;letter-spacing:-.01em;
  box-shadow:0 2.5px 0 var(--line);transition:all .14s var(--ease);
}
.choice:active{transform:translateY(2px);box-shadow:0 .5px 0 var(--line)}
.choice.ok{background:var(--green-soft);border-color:var(--green);color:var(--green);box-shadow:0 2.5px 0 rgba(31,160,92,.35)}
.choice.no{background:var(--red-soft);border-color:var(--red);color:var(--red);box-shadow:0 2.5px 0 rgba(229,72,77,.3);animation:shake .4s}
.choice.dim{opacity:.4}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.flash{
  background:var(--card);border-radius:var(--r-card);border:.5px solid var(--line2);box-shadow:var(--shadow-2);
  padding:44px 24px;text-align:center;margin-bottom:16px;min-height:250px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;width:100%;
}
.flash .f-w{font-size:34px;font-weight:900;letter-spacing:-.02em}
.flash .f-m{font-size:19px;font-weight:700;color:var(--tint)}
.flash .f-ex{font-size:13.5px;color:var(--sub);font-style:italic;line-height:1.6;font-weight:400}
.flash .f-tap{font-size:12px;color:var(--sub2);font-weight:600;margin-top:8px}
.result-hero{text-align:center;padding:36px 0 8px}
.result-hero .rh-emo{font-size:52px}
.result-hero h2{font-size:25px;font-weight:900;letter-spacing:-.035em;margin-top:12px}
.result-hero p{color:var(--sub);font-size:14.5px;font-weight:500;margin-top:5px}
.xp-pills{display:flex;gap:8px;justify-content:center;margin:22px 0}
.xp-pill{background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);border-radius:var(--r-tile);padding:13px 18px;text-align:center;min-width:90px}
.xp-pill b{font-size:20px;font-weight:800;display:block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.xp-pill span{font-size:11px;color:var(--sub);font-weight:600}
.xp-pill .pi{color:inherit}

/* ---------- 연습 모드 (하트 무제한) ---------- */
.prac-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.prac-card{background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);border-radius:var(--r-tile);padding:15px 14px;text-align:left;display:flex;flex-direction:column;gap:3px;transition:transform .14s var(--ease),box-shadow .14s}
.prac-card:active{transform:scale(.97)}
.prac-card .prac-ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--pc) 15%,transparent);color:var(--pc);display:flex;align-items:center;justify-content:center;margin-bottom:7px}
.prac-card b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.prac-card>span:last-child{font-size:11.5px;color:var(--sub);font-weight:500;line-height:1.4}

/* 스펠링(철자) 퀴즈 */
.spell-form{display:flex;flex-direction:column}
/* 실전 테스트 */
#test-in{width:100%;font-size:19px;font-weight:700;text-align:center;padding:15px 14px;border:1.6px solid var(--line);border-radius:var(--r-input);background:var(--card);color:var(--ink);transition:border-color .15s}
#test-in:focus{outline:none;border-color:var(--tint)}
.choice.sel{border-color:var(--tint);background:var(--tint-soft);color:var(--tint);box-shadow:0 2.5px 0 color-mix(in srgb,var(--tint) 30%,transparent)}
.test-rev{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;border-bottom:.5px solid var(--line2)}
.test-rev:last-child{border-bottom:0}
.test-rev .tr-ic{flex-shrink:0;line-height:0;margin-top:1px}
.test-rev.ok .tr-ic{color:var(--green)}
.test-rev.no .tr-ic{color:var(--red)}
.test-rev .tr-body{flex:1;min-width:0}
.test-rev .tr-q{font-size:14px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.test-rev .tr-tag{font-size:9.5px;font-weight:800;color:var(--sub);background:var(--card2);padding:2px 6px;border-radius:100px;flex-shrink:0}
.test-rev .tr-a{font-size:12.5px;color:var(--sub);font-weight:600;margin-top:3px}
.test-rev .tr-a b{color:var(--ink);font-weight:800}
.test-rev .tr-a s{color:var(--red);opacity:.85}

/* 문법(어법) 퀴즈 */
.gram-hero{padding:24px 2px 16px}
.gram-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--purple);background:var(--purple-soft,rgba(124,92,255,.15));padding:6px 12px;border-radius:999px}
.gram-q{font-size:20px;font-weight:700;line-height:1.6;margin-top:16px;letter-spacing:-.01em;word-break:keep-all}
/* 밑줄 글자(______)는 폭 확보용이므로 감추고, 선은 border-bottom 하나만 남긴다 */
.gram-blank{color:transparent;font-weight:900;border-bottom:2px solid var(--tint);padding:0 3px;margin:0 1px}
.gram-hint{font-size:13px;color:var(--sub2);margin-top:12px;font-weight:600}
.gram-choice{font-weight:700}
.gram-exp{background:var(--card2,var(--tint-soft));border-radius:14px;padding:14px 16px;margin-top:14px;display:flex;flex-direction:column;gap:5px;animation:nbIn .3s var(--spring,cubic-bezier(.34,1.4,.64,1))}
.gram-exp b{font-size:14.5px}
.gram-exp .ge-ok{color:var(--green)}
.gram-exp .ge-no{color:var(--red)}
.gram-exp span{font-size:13.5px;color:var(--sub);line-height:1.65}
/* 해설 본문: 정답 근거 문단 + 오답별 항목 */
.exp-fmt{display:flex;flex-direction:column;gap:10px}
.exp-lead{font-size:13.5px;color:var(--ink);line-height:1.8;font-weight:500;word-break:keep-all}
.exp-items{display:flex;flex-direction:column;gap:9px}
.exp-item{padding:0 0 0 11px;border-left:2px solid var(--line,rgba(127,127,127,.18))}
.exp-item p{font-size:13px;color:var(--sub);line-height:1.7;font-weight:400;margin-top:3px;word-break:keep-all}
.exp-head{display:block;font-size:12.5px;font-weight:700;color:var(--sub2);line-height:1.55;word-break:break-word}
.exp-head.q{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--tint);letter-spacing:-.02em}
.ex-q{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--tint-soft,rgba(60,110,255,.1));color:var(--tint);padding:1px 5px;border-radius:5px;word-break:break-word;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ex-q.ko{font-family:inherit;font-size:1em;font-weight:600;background:transparent;color:var(--ink);padding:0;border-radius:0}
.ex-q.ko::before,.ex-q.ko::after{content:'\2019';opacity:.5}
.ex-q.ko::before{content:'\2018'}
.ex-fix{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;vertical-align:baseline}
.ex-fix s{color:var(--sub2);text-decoration-color:var(--red);opacity:.8}
.ex-fix i{font-style:normal;color:var(--sub2);font-size:.9em}
.ex-fix b{color:var(--green);font-size:1em;font-weight:700}
/* 독해·논리완성 */
.read-passage{background:var(--card);border:.5px solid var(--line2);border-radius:14px;padding:16px 17px;font-size:14.5px;line-height:1.75;margin:18px 0 14px;color:var(--ink);white-space:pre-line}
.read-qhead{margin-bottom:9px}
.read-qt{font-size:16px;font-weight:800;line-height:1.5;margin-bottom:12px;letter-spacing:-.01em;word-break:keep-all}
.read-choice{font-weight:600;text-align:left;line-height:1.5}
/* 마커형 선택지(무관한문장·문장삽입): 번호 칩 + 또렷한 발췌 */
.read-choice .ro{display:flex;gap:11px;align-items:flex-start;width:100%}
.read-choice .ro-mark{flex-shrink:0;width:27px;height:27px;border-radius:50%;background:var(--tint-soft,rgba(43,91,227,.12));color:var(--tint);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-top:1px}
.read-choice .ro-txt{flex:1;min-width:0;color:inherit;font-weight:600;font-size:13.5px;line-height:1.55;word-break:keep-all}
.read-choice.ok .ro-mark{background:var(--green);color:#fff}
.read-choice.no .ro-mark{background:var(--red);color:#fff}

/* 쪽지(DM) */
.dm-btn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--tint);background:var(--tint-soft);border:none;border-radius:999px;padding:7px 12px;cursor:pointer}
.dm-btn:active{transform:scale(.96)}
/* ===== 쪽지 채팅 (Instagram/KakaoTalk식) ===== */
/* 대화 목록 */
.chat-list{display:flex;flex-direction:column}
.chat-li{display:flex;align-items:center;gap:13px;padding:12px 6px;border-bottom:.5px solid var(--line2)}
.chat-li:last-of-type{border-bottom:0}
.chat-li:active{background:var(--card2);border-radius:12px}
.cl-av{flex-shrink:0}
.cl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-top{display:flex;align-items:baseline;gap:8px}
.cl-top b{font-size:15px;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-time{font-size:11.5px;color:var(--sub2);flex-shrink:0;font-weight:500}
.cl-bot{display:flex;align-items:center;gap:8px}
.cl-prev{flex:1;min-width:0;font-size:13px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-li.unread .cl-prev{color:var(--ink);font-weight:600}
.chat-li.unread .cl-top b{font-weight:800}
.cl-badge{flex-shrink:0;min-width:19px;height:19px;padding:0 6px;border-radius:10px;background:var(--tint);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* 채팅 화면 (전체화면 고정) */
.chat-screen{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--bg)}
.chat-head{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) 8px 8px;background:var(--card);border-bottom:.5px solid var(--line);flex-shrink:0}
.ch-av{flex-shrink:0}
.ch-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ch-id b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-id span{font-size:11.5px;color:var(--sub);display:flex;align-items:center;gap:4px}
.ch-id .on{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}

.chat-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 8px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.chat-ctx{font-size:12px;color:var(--sub);background:var(--card);border:.5px solid var(--line2);border-radius:12px;padding:8px 12px;margin:0 auto 12px;text-align:center;max-width:90%}
.chat-ctx a{color:var(--tint);font-weight:700}
.chat-day{display:flex;justify-content:center;margin:12px 0 6px}
.chat-day span{font-size:11px;color:var(--sub2);background:var(--card2);border-radius:100px;padding:4px 12px;font-weight:600}

.chat-msg{display:flex;align-items:flex-end;gap:7px;margin-top:2px;max-width:100%}
.chat-msg.gs{margin-top:11px}
.chat-msg.me{flex-direction:row-reverse}
.chat-msg .cm-av{width:30px;flex-shrink:0;align-self:flex-start}
.chat-msg .cm-av.sp{visibility:hidden}
.cm-col{display:flex;flex-direction:column;max-width:76%;min-width:0}
.chat-msg.me .cm-col{align-items:flex-end}
.cm-name{font-size:11.5px;color:var(--sub);font-weight:600;margin:0 0 3px 4px}
.cm-reply{font-size:11.5px;color:var(--sub);background:var(--card2);border-left:2.5px solid var(--line);border-radius:8px;padding:4px 9px;margin-bottom:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-reply b{color:var(--sub2);margin-right:5px}
.cm-line{display:flex;align-items:flex-end;gap:5px;max-width:100%}
.cm-bubble{font-size:14.5px;line-height:1.45;padding:9px 13px;border-radius:18px;white-space:pre-wrap;word-break:break-word;text-align:left;max-width:100%;border:none;cursor:pointer;transition:transform .1s var(--ease)}
.cm-bubble:active{transform:scale(.97)}
.chat-msg.them .cm-bubble{background:var(--card);color:var(--ink);border:.5px solid var(--line2)}
.chat-msg.them.ge .cm-bubble{border-bottom-left-radius:5px}
.chat-msg.me .cm-bubble{background:var(--tint);color:#fff}
.chat-msg.me.ge .cm-bubble{border-bottom-right-radius:5px}
.cm-bubble.del{background:var(--card2)!important;color:var(--sub2)!important;border:.5px dashed var(--line)!important;font-style:italic;font-size:13px}
.cm-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:10px;color:var(--sub2);flex-shrink:0;line-height:1.2;padding-bottom:2px}
.chat-msg.them .cm-meta{align-items:flex-start}
.cm-unread{color:var(--gold);font-weight:800;font-size:11px}
.cm-read{color:var(--sub2);font-size:10px}
.cm-rx{display:flex;gap:3px;margin:3px 3px 0;flex-wrap:wrap}
.chat-msg.me .cm-rx{justify-content:flex-end}
.cm-rx button{background:var(--card);border:.5px solid var(--line);border-radius:100px;padding:1px 7px;font-size:12px;box-shadow:var(--shadow-1);line-height:1.5}

.chat-typing{display:flex;align-items:flex-end;gap:7px;margin-top:9px}
.chat-typing[hidden]{display:none}
.ct-bub{background:var(--card);border:.5px solid var(--line2);border-radius:16px;border-bottom-left-radius:5px;padding:12px 15px;display:flex;gap:4px}
.ct-bub i{width:7px;height:7px;border-radius:50%;background:var(--sub2);animation:ctBounce 1.2s infinite}
.ct-bub i:nth-child(2){animation-delay:.15s}
.ct-bub i:nth-child(3){animation-delay:.3s}
@keyframes ctBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

.chat-input{flex-shrink:0;background:var(--card);border-top:.5px solid var(--line);padding:8px 10px calc(env(safe-area-inset-bottom) + 8px)}
.ci-reply{display:flex;align-items:center;gap:8px;background:var(--card2);border-radius:10px;padding:7px 11px;margin-bottom:7px;font-size:12.5px}
.ci-reply[hidden]{display:none}
.cir-txt{flex:1;min-width:0;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cir-txt b{color:var(--tint);margin-right:5px}
.cir-x{flex-shrink:0;color:var(--sub2);display:flex;padding:2px}
.ci-row{display:flex;align-items:flex-end;gap:8px}
.ci-emoji{flex-shrink:0;width:38px;height:38px;font-size:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:none;line-height:1}
.ci-emoji:active{transform:scale(.88)}
.ci-row textarea{flex:1;min-width:0;resize:none;border:none;background:var(--card2);border-radius:20px;padding:9px 15px;font:inherit;font-size:14.5px;line-height:1.4;color:var(--ink);max-height:120px}
.ci-row textarea:focus{outline:1.5px solid var(--tint-soft2)}
.ci-send{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--tint);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px -3px var(--tint)}
.ci-send:active{transform:scale(.88)}

.react-bar{display:flex;justify-content:space-around;gap:4px;background:var(--card2);border-radius:100px;padding:7px;margin-bottom:10px}
.react-bar button{font-size:26px;line-height:1;padding:4px;border-radius:50%;transition:transform .12s var(--spring)}
.react-bar button:active{transform:scale(1.3)}
.react-bar button.on{background:var(--tint-soft)}
.sheet-act{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 8px;font-size:15px;font-weight:600;color:var(--ink);border-radius:10px}
.sheet-act:active{background:var(--card2)}
.sheet-act.danger{color:var(--red)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:6px}
.emoji-grid button{font-size:27px;padding:8px 4px;border-radius:12px;line-height:1}
.emoji-grid button:active{background:var(--card2)}

/* 단어 상세 시트 */
.ws-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:2px}
.ws-w{font-size:26px;font-weight:900;letter-spacing:-.02em;word-break:break-word;line-height:1.2}
.ws-sub{font-size:12px;color:var(--sub);margin-top:5px;font-weight:600}
.ws-head .spk{margin-left:auto;flex-shrink:0;width:46px;height:46px;border-radius:15px;background:var(--tint-soft);color:var(--tint);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.ws-head .spk.on{transform:scale(.92)}
.ws-m{font-size:17px;font-weight:700;margin-top:16px;line-height:1.45}
.ws-ex{font-size:14.5px;color:var(--sub);line-height:1.6;font-style:italic;background:var(--card2,var(--tint-soft));border-radius:12px;padding:12px 14px;margin-top:12px}
.ws-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.ws-tags-l{font-size:12px;color:var(--sub2);font-weight:700;margin-right:2px}
.ws-tag{border:none;cursor:pointer}
.wf-chips{display:flex;gap:7px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.wf-chips::-webkit-scrollbar{display:none}
.wf-chips .chip{flex-shrink:0}
.wrow{transition:background .12s}
.wrow:active{background:var(--line2)}

/* 짝맞추기 게임 */
.match-info{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--sub)}
.match-info b{color:var(--tint)}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.match-tile{min-height:66px;border-radius:var(--r-tile);border:1.5px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);padding:10px 11px;font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.3;display:flex;align-items:center;justify-content:center;text-align:center;word-break:keep-all;transition:transform .12s var(--ease),background .15s,border-color .15s}
.match-tile.w{font-size:16px;font-weight:800}
.match-tile.m{font-size:13px;color:var(--sub)}
.match-tile:active{transform:scale(.96)}
.match-tile.sel{border-color:var(--tint);background:var(--tint-soft);color:var(--tint);box-shadow:0 0 0 3px var(--tint-soft)}
.match-tile.bad{border-color:var(--red);background:var(--red-soft);color:var(--red);animation:matchShake .32s}
.match-tile.gone{visibility:hidden;pointer-events:none}
@keyframes matchShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* 플래시카드 3D */
.fcard-scene{perspective:1400px}
.fcard{position:relative;width:100%;min-height:236px;transform-style:preserve-3d;transition:transform .5s var(--spring,cubic-bezier(.34,1.56,.64,1));background:transparent;border:0;padding:0}
.fcard.flipped{transform:rotateY(180deg)}
.fcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:32px 22px;border-radius:var(--r-card);border:.5px solid var(--line2);box-shadow:var(--shadow-2);background:var(--card)}
.fcard-back{transform:rotateY(180deg);background:var(--tint-soft);border-color:transparent}
.fcard .fc-w{font-size:36px;font-weight:900;letter-spacing:-.03em}
.fcard .fc-tap{font-size:12px;color:var(--sub2);font-weight:600}
.fcard .fc-m{font-size:24px;font-weight:800;color:var(--tint);letter-spacing:-.02em;text-align:center;line-height:1.35}
.fcard .fc-ex{font-size:14px;color:var(--sub);font-style:italic;line-height:1.6;font-weight:400;text-align:center}

/* ---------- 학습 통계 ---------- */
.stats-hero{padding:20px}
.sh-lv{display:flex;align-items:center;gap:14px}
.sh-lvnum{font-size:30px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sh-lvmeta{display:flex;flex-direction:column;gap:1px}
.sh-lvmeta b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.sh-lvmeta span{font-size:12.5px;opacity:.75;font-weight:600}
.sh-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden;margin:15px 0 8px}
.sh-bar i{display:block;height:100%;border-radius:6px;background:#fff;transition:width .9s var(--ease)}
.sh-next{font-size:12px;opacity:.8;font-weight:600}
.stat-bars-card{padding:16px 12px 12px}
.stat-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:5px;height:118px}
.sb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.sb-v{font-size:9.5px;font-weight:800;color:var(--sub);font-variant-numeric:tabular-nums;min-height:12px}
.sb-bar{width:60%;max-width:26px;min-height:3px;border-radius:6px 6px 3px 3px;background:var(--bg2);transition:height .8s var(--spring,cubic-bezier(.34,1.4,.64,1))}
.sb.has .sb-bar{background:linear-gradient(180deg,var(--tint),color-mix(in srgb,var(--tint) 62%,transparent))}
.sb.today .sb-bar{background:linear-gradient(180deg,var(--tint),var(--tint));box-shadow:0 0 0 3px var(--tint-soft)}
.sb.today .sb-l{color:var(--tint);font-weight:800}
.sb-l{font-size:11px;font-weight:700;color:var(--sub2)}
.pace-card{padding:16px}
.pace-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pace-school{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;letter-spacing:-.02em}
.pace-school .sw{width:9px;height:9px;border-radius:50%}
.pace-dday{font-size:16px;font-weight:900;color:var(--tint);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pace-body{display:flex;align-items:center;gap:8px}
.pace-stat{flex:1;text-align:center}
.pace-stat b{font-size:19px;font-weight:800;display:block;letter-spacing:-.02em}
.pace-stat span{font-size:11px;color:var(--sub);font-weight:600;line-height:1.4;display:block;margin-top:2px}
.pace-arrow{color:var(--sub2);flex-shrink:0}
.pace-note{margin-top:14px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:12px}
.pace-note.ok{background:var(--green-soft);color:var(--green)}
.pace-note.push{background:var(--orange-soft,rgba(255,159,10,.13));color:var(--orange)}
.weak-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:.5px solid var(--line2)}
.weak-row:last-child{border-bottom:0}
.weak-w{font-size:15px;font-weight:800;letter-spacing:-.01em;min-width:96px}
.weak-m{font-size:13px;color:var(--sub);font-weight:500;line-height:1.4}

/* ---------- 운영자 공지 배너 ---------- */
.notice-banner{display:flex;align-items:center;gap:9px;background:var(--tint);color:#fff;border-radius:var(--r-tile);padding:11px 12px;margin-bottom:12px;box-shadow:0 6px 18px -8px var(--tint);animation:nbIn .4s var(--spring,cubic-bezier(.34,1.4,.64,1))}
@keyframes nbIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.notice-banner .nb-ic{flex-shrink:0;opacity:.95}
.notice-banner .nb-t{flex:1;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:-.01em}
.notice-banner .nb-x{flex-shrink:0;color:#fff;opacity:.8;padding:2px;display:flex}

/* ---------- 게시판 내 활동 바로가기(3분할) ---------- */
.my-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.msc{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 6px 13px;background:var(--card);border:.5px solid var(--line2);border-radius:var(--r-tile);box-shadow:var(--shadow-1);text-align:center;transition:transform .16s var(--ease)}
.msc:active{transform:scale(.96)}
.msc .msc-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mc) 13%,transparent);color:var(--mc)}
.msc b{font-size:12.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.msc .msc-n{position:absolute;top:9px;right:10px;font-size:11px;font-weight:800;color:var(--sub2);font-variant-numeric:tabular-nums}
.msc .msc-n:empty{display:none}

/* ---------- 관리자 콘솔 ---------- */
.admin-lock{max-width:340px;margin:40px auto 0;text-align:center;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.admin-lock .al-ic{width:64px;height:64px;border-radius:20px;background:var(--tint-soft);color:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.admin-lock h2{font-size:22px;font-weight:900;letter-spacing:-.03em}
.admin-lock p{font-size:13.5px;color:var(--sub);font-weight:500;line-height:1.5}
.admin-lock input{width:100%;margin:12px 0 4px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-input);background:var(--card);color:var(--ink);font:inherit;font-size:16px;text-align:center;letter-spacing:.2em}
.admin-lock input:focus{border-color:var(--tint);outline:none}
.admin-lock .btn{width:100%}
.adm-skel{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.adm-skel .sk-card{height:78px;border-radius:var(--r-tile);background:linear-gradient(100deg,var(--card2) 30%,var(--line2) 50%,var(--card2) 70%);background-size:200% 100%;animation:skel 1.2s infinite}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
.adm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:2px}
.adm-kpi{background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);border-radius:var(--r-tile);padding:13px 10px;text-align:center}
.adm-kpi b{font-size:19px;font-weight:800;display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.adm-kpi span{font-size:10.5px;color:var(--sub);font-weight:600}
.adm-kpi.big b{font-size:24px}
.adm-2col{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.adm-legend{display:flex;gap:14px;margin-bottom:10px;font-size:11px;font-weight:700;color:var(--sub)}
.adm-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-1px}
.adm-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:3px;height:104px}
.adm-bars .ab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px;min-width:0}
.adm-bars .ab-stack{position:relative;width:70%;max-width:16px;height:100%;display:flex;align-items:flex-end;justify-content:center}
.adm-bars .ab-p{position:absolute;bottom:0;width:100%;border-radius:4px;background:var(--sub2);opacity:.4;transition:height .8s var(--ease)}
.adm-bars .ab-v{position:absolute;bottom:0;width:100%;border-radius:4px;background:var(--tint);transition:height .8s var(--spring,cubic-bezier(.34,1.4,.64,1))}
.adm-bars .ab-l{font-size:8px;color:var(--sub2);font-weight:600;white-space:nowrap;transform:scale(.92)}
.adm-mini{padding:13px 14px}
.adm-mini .am-h{font-size:12px;font-weight:800;color:var(--sub);margin-bottom:7px;letter-spacing:-.01em}
.am-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:12.5px;font-weight:600;gap:8px}
.am-row span{color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-row b{font-variant-numeric:tabular-nums;flex-shrink:0}
.am-empty{font-size:12px;color:var(--sub2);font-weight:500;padding:4px 0}
.adm-proj{margin-top:4px}
.adm-proj .ap-h{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.adm-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--bg2);outline:none}
.adm-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--tint);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);border:3px solid #fff}
.adm-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--tint);cursor:pointer;border:3px solid #fff}
.adm-proj .ap-note{font-size:11.5px;color:var(--sub);font-weight:500;line-height:1.55;margin-top:11px}
.adm-chips{display:flex;flex-wrap:wrap;gap:7px}
.ac-chip{font-size:12px;font-weight:700;padding:6px 11px;border-radius:100px;border:1.5px solid var(--line);background:var(--card2)}
.ac-chip b{color:var(--tint);font-variant-numeric:tabular-nums;margin-left:2px}

/* ---------- 관리자: imweb식 대시보드 ---------- */
.adm-live{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--sub);margin:2px 0 12px}
.adm-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);animation:admPulse 1.9s infinite}
.adm-live-dot.off{background:var(--sub2);animation:none;box-shadow:none}
.adm-live-sep{opacity:.5}
@keyframes admPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.adm-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adm-hero-card{position:relative;background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);border-radius:var(--r-tile);padding:14px 15px;overflow:hidden;min-height:92px;animation:heroIn .5s var(--spring) backwards}
.adm-hero-card:nth-child(2){animation-delay:.05s}.adm-hero-card:nth-child(3){animation-delay:.1s}.adm-hero-card:nth-child(4){animation-delay:.15s}
@keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.adm-hero-card.accent{background:linear-gradient(135deg,var(--tint-soft),var(--card) 65%)}
.adm-hero-card.accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tint)}
.ahc-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ahc-label{font-size:11.5px;font-weight:700;color:var(--sub)}
.ahc-val{display:block;font-size:26px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px;line-height:1}
.ahc-foot{margin-top:8px;height:22px;display:flex;align-items:flex-end}
.kd{font-size:11px;font-weight:800;padding:2px 6px;border-radius:100px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kd.up{color:var(--green);background:var(--green-soft)}
.kd.down{color:var(--red);background:var(--red-soft)}
.adm-spark{width:64px;height:22px;overflow:visible}
.adm-hero-card.sk{background:linear-gradient(100deg,var(--card2) 30%,var(--line2) 50%,var(--card2) 70%);background-size:200% 100%;animation:skel 1.2s infinite;border:0}
.adm-tabs{display:flex;gap:4px;background:var(--card2);border-radius:14px;padding:4px;margin:16px 0 14px;position:sticky;top:calc(env(safe-area-inset-top) + 52px);z-index:5}
.adm-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 4px;border:0;background:none;color:var(--sub);font-size:12.5px;font-weight:700;border-radius:10px;cursor:pointer;transition:color .2s;letter-spacing:-.01em}
.adm-tab .pi{color:var(--sub)}
.adm-tab.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}
.adm-tab.on .pi{color:var(--tint)}
.adm-tab-body{animation:fadeIn .3s}
.adm-chart-card{padding:16px 12px 8px}
.acc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 4px 8px}
.acc-title{font-size:14px;font-weight:800;letter-spacing:-.02em}
.acc-sub{font-size:11.5px;color:var(--sub);font-weight:600;margin-top:2px}
.adm-segs{display:flex;gap:3px;background:var(--bg2);border-radius:9px;padding:3px;flex-shrink:0}
.adm-seg{border:0;background:none;color:var(--sub);font-size:11px;font-weight:700;padding:5px 9px;border-radius:7px;cursor:pointer}
.adm-seg.on{background:var(--card);color:var(--tint);box-shadow:var(--shadow-1)}
.adm-area{width:100%;height:auto;display:block}
.adm-area .aa-x{fill:var(--sub2);font-size:11px;font-weight:600;text-anchor:middle}
.adm-area .aa-dot-ring{transform-origin:center;transform-box:fill-box;animation:admDot 1.8s ease-out infinite}
@keyframes admDot{0%{opacity:.9;r:4.5}70%{opacity:0;r:12}100%{opacity:0;r:12}}
.am-rank{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:6px;background:var(--tint-soft);color:var(--tint);font-size:10.5px;font-weight:800;margin-right:7px;flex-shrink:0}

/* ---------- 중고거래 (당근식 마켓) ---------- */
.mkt-cats{display:flex;gap:6px;overflow-x:auto;margin:2px -20px 10px;padding:0 20px 4px;scrollbar-width:none}
.mkt-cats::-webkit-scrollbar{display:none}
.mkt-cats .chip{flex-shrink:0}
.mkt-list{display:flex;flex-direction:column}
.mkt-card{display:flex;gap:13px;padding:14px 2px;border-bottom:.5px solid var(--line2);align-items:flex-start;transition:opacity .2s}
.mkt-card:last-of-type{border-bottom:0}
.mkt-card:active{background:var(--card2)}
.mkt-card.done{opacity:.5}
.mk-thumb{position:relative;width:94px;height:94px;border-radius:14px;flex-shrink:0;overflow:hidden;background:var(--card2)}
.mk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mk-cover{display:flex;align-items:center;justify-content:center}
.mk-emo{font-size:36px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.mk-imgn{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.62);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:100px}
.mkt-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.mkt-title{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mkt-meta{font-size:12px;color:var(--sub2);font-weight:500}
.mkt-price{display:flex;align-items:center;gap:7px;margin-top:3px}
.mkt-price b{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.mk-st{font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;flex-shrink:0}
.mk-st.done{background:var(--sub2);color:#fff}
.mk-st.resv{background:var(--green);color:#fff}
.mkt-social{display:flex;flex-direction:column;gap:4px;align-self:flex-end;font-size:12px;color:var(--sub2);font-weight:700;flex-shrink:0}
.mkt-social span{display:inline-flex;align-items:center;gap:3px}
/* 상세 갤러리 */
.mkt-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px 14px;scrollbar-width:none;background:var(--card2)}
.mkt-gallery::-webkit-scrollbar{display:none}
.mkt-gallery img,.mkt-gcover{flex:0 0 100%;scroll-snap-align:center;width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.mkt-gcover{display:flex;align-items:center;justify-content:center;font-size:84px}
.mkt-detail{margin:4px 0 12px}
.mkt-d-price{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mkt-d-price b{font-size:25px;font-weight:900;letter-spacing:-.03em}
.mkt-d-price .mk-st{font-size:13px;padding:4px 10px}
.mkt-d-meta{display:flex;flex-wrap:wrap;gap:6px}
.mkt-owner{display:flex;gap:6px;margin-top:14px}
.mkt-owner .chip{flex:1;text-align:center;justify-content:center}
/* 사진 업로드 */
.img-prev{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.img-prev:empty{display:none}
.ip-item{position:relative;width:78px;height:78px;border-radius:12px;overflow:hidden;flex-shrink:0;border:.5px solid var(--line2)}
.ip-item img{width:100%;height:100%;object-fit:cover;display:block}
.ip-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center}
.ip-rep{position:absolute;left:0;right:0;bottom:0;background:var(--tint);color:#fff;font-size:9px;font-weight:800;text-align:center;padding:2px 0;letter-spacing:.02em}
.img-add{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:14px;border:1.5px dashed var(--line);border-radius:var(--r-input);background:var(--card);color:var(--sub);font-weight:700;font-size:13.5px}
.img-add:active{background:var(--card2)}

/* ---------- 친구 챌린지 (함께 도전) ---------- */
.ch-learn-card{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;margin-top:11px}
.ch-learn-card .clc-emo{font-size:26px;flex-shrink:0}
.ch-learn-card b{font-size:14.5px;font-weight:800;letter-spacing:-.02em;display:block}
.ch-learn-card .clc-sub{font-size:12.5px;color:var(--sub);font-weight:500;display:block;margin-top:4px}
.ch-hero{text-align:center;padding:22px 12px 10px}
.ch-hero-emo{font-size:46px}
.ch-hero h2{font-size:22px;font-weight:900;letter-spacing:-.035em;margin-top:10px}
.ch-hero p{font-size:13.5px;color:var(--sub);font-weight:500;line-height:1.6;margin-top:8px}
.ch-or{text-align:center;font-size:12px;color:var(--sub2);font-weight:700;margin:16px 0 12px;position:relative}
.ch-or::before,.ch-or::after{content:"";position:absolute;top:50%;width:38%;height:1px;background:var(--line2)}
.ch-or::before{left:0}.ch-or::after{right:0}
.ch-goalcard{display:flex;align-items:center;justify-content:space-between;background:var(--tint-soft);border-radius:var(--r-tile);padding:15px 18px}
.ch-goalcard span{font-size:13.5px;font-weight:700;color:var(--sub)}
.ch-goalcard b{font-size:20px;font-weight:900;color:var(--tint);letter-spacing:-.02em}
.ch-skel{height:150px;border-radius:var(--r-card);background:linear-gradient(100deg,var(--card2) 30%,var(--line2) 50%,var(--card2) 70%);background-size:200% 100%;animation:skel 1.2s infinite;margin:10px 0}
.ch-ring-wrap{position:relative;width:150px;height:150px;margin:20px auto 6px}
.ch-ring-wrap #ch-ring{transition:stroke-dashoffset 1s var(--spring,cubic-bezier(.34,1.3,.64,1))}
.ch-ring-wrap.done{animation:chPop .5s var(--spring,cubic-bezier(.34,1.5,.64,1))}
@keyframes chPop{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.ch-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ch-ring-c b{font-size:30px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ch-ring-c span{font-size:12px;color:var(--sub);font-weight:700}
.ch-status{text-align:center;font-size:14px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.ch-status.ok{color:var(--green)}
.ch-member{display:flex;align-items:center;gap:11px;padding:11px 12px}
.ch-av{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.ch-m-body{flex:1;min-width:0}
.ch-m-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.ch-m-top b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.ch-m-top span{font-size:12.5px;font-weight:800;color:var(--sub);font-variant-numeric:tabular-nums}
.ch-you{font-size:10px;font-weight:800;background:var(--tint);color:#fff;padding:1px 6px;border-radius:100px;margin-left:4px;vertical-align:1px}
.ch-m-bar{height:7px;border-radius:5px;background:var(--bg2);overflow:hidden}
.ch-m-bar i{display:block;height:100%;border-radius:5px;transition:width .8s var(--ease)}
.ch-invite-code{text-align:center;font-size:30px;font-weight:900;letter-spacing:.22em;padding:16px;background:var(--card2);border-radius:var(--r-tile);margin:10px 0 14px;font-variant-numeric:tabular-nums;color:var(--tint)}

/* ---------- 발음 듣기 (TTS) ---------- */
.spk{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--tint-soft);color:var(--tint);flex-shrink:0;transition:transform .15s,background .15s}
.spk.on,.spk:active{transform:scale(1.12);background:var(--tint);color:#fff}
.spk-row{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:16px;padding:11px;border-radius:var(--r-input);background:var(--card2);color:var(--tint);font-weight:800;font-size:13.5px;border:1px solid var(--line2);transition:all .15s}
.spk-row.on{background:var(--tint);color:#fff;border-color:var(--tint)}

/* ---------- 오늘의 단어 카드 ---------- */
.daily-word{background:linear-gradient(135deg,#243b8f,#3a2d78);color:#fff;border-radius:var(--r-card);padding:18px;margin-bottom:12px;box-shadow:var(--shadow-2)}
.dw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.dw-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.18);padding:4px 10px;border-radius:100px}
.daily-word .spk{background:rgba(255,255,255,.2);color:#fff}
.daily-word .spk.on{background:#fff;color:var(--tint)}
.dw-word{font-size:30px;font-weight:900;letter-spacing:-.03em}
.dw-mean{font-size:16px;font-weight:700;opacity:.97;margin-top:7px}
.dw-ex{font-size:13px;opacity:.72;font-style:italic;line-height:1.55;margin-top:10px}

/* ---------- 3열 연습 + 듣기 퀴즈 ---------- */
.prac-3{grid-template-columns:1fr 1fr 1fr}
.prac-3 .prac-card{padding:13px 7px}
.prac-3 .prac-card .prac-ic{width:36px;height:36px}
.prac-3 .prac-card b{font-size:13px}
.prac-3 .prac-card>span:last-child{font-size:10.5px}
/* ---------- 듀오링고식 단어 진행 바 & 유닛 페이지 ---------- */
.wbar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}
.wbar i{display:block;height:100%;width:0;border-radius:99px;background:var(--gold);transition:width .7s var(--ease)}
.wbar i.full{background:var(--green)}
.wgrow{display:block;width:100%;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.wgrow i{display:block;height:100%;border-radius:99px;background:var(--gold);transition:width .9s var(--ease)}
.wgrow i.full{background:var(--green)}
.wgrow.big{height:11px}
.lw-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:.5px solid var(--line2)}
.lw-row:last-child{border-bottom:0}
.lw-row .lw-w{flex:1;min-width:0;font-size:14px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-row .wgrow{width:96px;flex-shrink:0}
.lw-tag{flex-shrink:0;font-size:11px;font-weight:800;min-width:44px;text-align:right}
.lw-tag.up{color:var(--green)}
.lw-tag.again{color:var(--orange)}
.lw-tag.keep{color:var(--sub2)}
.unit .u-prog{display:block;margin-top:7px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.unit .u-prog i{display:block;height:100%;border-radius:99px;background:var(--gold)}
.unit.done .u-prog i{background:var(--green)}
.u-pct{margin-left:auto;flex-shrink:0;font-size:12px;font-weight:800;color:var(--sub);font-variant-numeric:tabular-nums}
.unit-hero{text-align:center;padding:18px 4px 14px}
.unit-hero>b{font-size:22px;font-weight:900;letter-spacing:-.03em;display:block}
.unit-hero .uh-sub{font-size:12.5px;color:var(--sub);font-weight:600;margin-top:5px}
.unit-hero .uh-bar{height:12px;border-radius:99px;background:var(--line);overflow:hidden;margin:14px 10px 8px}
.unit-hero .uh-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#FF9F0A);transition:width .8s var(--ease)}
.unit-hero .uh-pct{font-size:13px;font-weight:800;color:var(--gold)}
.unit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
/* min-width:0 — 그리드 아이템 기본 min-width:auto 때문에 긴 뜻이 열을 밀어내던 문제 방지 */
.ug-tile{min-width:0;background:var(--card);border:1.5px solid var(--line2);border-radius:16px;padding:13px 13px 11px;text-align:left;box-shadow:var(--shadow-1);transition:transform .14s var(--ease);display:flex;flex-direction:column}
.ug-tile:active{transform:scale(.96)}
.ug-tile b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em;overflow-wrap:anywhere;line-height:1.3}
/* 뜻은 2줄까지만 보여주고 말줄임 — 길이가 달라도 타일 높이가 들쭉날쭉하지 않게 */
.ug-tile>span:not(.wbar){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;color:var(--sub);font-weight:500;margin-top:3px;line-height:1.45;min-height:2.9em;overflow-wrap:anywhere}
.ug-tile .wbar{margin-top:auto}
.ug-tile.full{border-color:color-mix(in srgb, var(--green) 45%, transparent)}
.flash.intro{cursor:default}
/* 해설 게이트(무료 5회 → PLUS) */
.expl-gate{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:10px 14px;border-radius:12px;background:var(--tint-soft);color:var(--tint);font-size:13px;font-weight:700;transition:transform .14s var(--ease)}
.expl-gate:active{transform:scale(.97)}
.expl-gate.plus{background:var(--orange-soft);color:var(--orange)}

/* ---------- 캘린더 ---------- */
/* 캘린더: 목표 학교 D-day 요약 스트립 */
.cal-dday-strip{display:flex;gap:9px;overflow-x:auto;margin:0 -20px 16px;padding:0 20px 4px;scrollbar-width:none}
.cal-dday-strip::-webkit-scrollbar{display:none}
.cdd-chip{flex-shrink:0;min-width:98px;background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);border-radius:var(--r-tile);padding:11px 12px;text-align:left;display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:transform .14s var(--ease)}
.cdd-chip:active{transform:scale(.96)}
.cdd-top{display:flex;align-items:center;gap:6px;min-width:0}
.cdd-top b{font-size:12.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdd-d{font-size:17px;font-weight:900;letter-spacing:-.03em;color:var(--tint)}
.cdd-d.urgent{color:var(--red)}
.cdd-t{font-size:11px;color:var(--sub);font-weight:600}

/* 월 제목이 눌려 줄바꿈되지 않도록 제목 줄과 도구 줄을 분리 */
/* 제목 줄에 [오늘][검색][추가][<][>]를 모두 담는다(좁은 화면에선 자연스럽게 줄바꿈) */
/* 한 줄 고정: 월이 2자리(10·11·12월)가 돼도 컨트롤이 아랫줄로 밀리지 않게 nowrap.
   폭이 정 부족하면 제목만 말줄임(실제 월 문자열은 짧아 거의 안 잘림), 버튼은 유지. */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px;flex-wrap:nowrap}
.cal-head b{font-size:18px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cal-head .cal-nav{display:flex;gap:2px;align-items:center;flex-shrink:0;margin-left:auto}
.cal-head .cal-nav .chip{padding:5px 9px;font-size:12px;white-space:nowrap;flex-shrink:0;margin-right:2px}
.cal-head .cal-nav .icon-btn{width:30px;height:30px}
/* 아주 좁은 화면(≤350px)에서만 '2027년 10월' 대신 '2027.10'으로 축약(월이 잘리지 않게).
   360px(갤럭시 S22 등 일반 폰)에선 전체 형식이 여유 있게 들어가므로 그대로 둔다. */
.cal-head .cm-mini{display:none}
@media (max-width:350px){ .cal-head .cm-full{display:none} .cal-head .cm-mini{display:inline} }
.cal-tools{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cal-tools .ct-left{display:flex;gap:6px;min-width:0;flex-wrap:wrap}
.cal-tools .ct-left .chip{white-space:nowrap;flex-shrink:0}
/* 일정 검색 시트 */
.cs-label{font-size:12px;font-weight:800;color:var(--sub);margin:2px 2px 8px}
.cs-res{max-height:46vh;overflow-y:auto;margin:0 -4px}
.cs-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 6px;border-bottom:.5px solid var(--line2);background:transparent}
.cs-row:last-child{border-bottom:0}
.cs-row:active{background:var(--card2)}
.cs-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cs-body{flex:1;min-width:0}
.cs-body b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-body span{display:block;font-size:11.5px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-d{flex-shrink:0;font-size:12px;font-weight:800;color:var(--sub2);font-variant-numeric:tabular-nums}
.cs-d.urgent{color:var(--red)}
.ev-time{color:var(--tint);font-weight:800;font-variant-numeric:tabular-nums}
.cs-empty{font-size:13px;color:var(--sub);padding:18px 6px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-grid .dow{text-align:center;font-size:11px;font-weight:700;color:var(--sub2);padding:6px 0}
.cal-grid .dow.sun{color:var(--red);opacity:.8}
.cal-cell{min-height:56px;border-radius:10px;padding:4px 2px;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background .15s}
.cal-cell:active{background:var(--line2)}
.cal-cell .dnum{font-size:12px;font-weight:600;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-variant-numeric:tabular-nums}
.cal-cell.dim .dnum{color:var(--sub2);opacity:.4}
.cal-cell.today .dnum{background:var(--tint);color:#fff;font-weight:800}
.cal-cell.sel{background:var(--tint-soft)}
.cal-cell .evs{display:flex;flex-direction:column;gap:1.5px;width:100%;overflow:hidden}
.cal-cell .ev{font-size:8.5px;font-weight:700;border-radius:4px;padding:1.5px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-align:left;line-height:1.4}
.cal-cell .evmore{font-size:9px;color:var(--sub2);font-weight:700;text-align:left;width:100%;padding-left:3px}
.legend{display:flex;flex-wrap:wrap;gap:11px;padding:14px 4px 2px;font-size:11.5px;color:var(--sub);font-weight:600}
.legend i{width:8px;height:8px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-.5px}

/* ---------- 시간표 ---------- */
.tt-wrap{background:var(--card);border-radius:var(--r-card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);overflow:hidden}
.tt-grid{display:grid;grid-template-columns:26px repeat(6,1fr);position:relative}
.tt-grid .tt-h{font-size:11px;font-weight:700;color:var(--sub);text-align:center;padding:10px 0;border-bottom:.5px solid var(--line2)}
.tt-col{position:relative;border-left:.5px solid var(--line2);border-bottom:.5px solid var(--line2)}
.tt-time{font-size:9.5px;color:var(--sub2);text-align:center;font-weight:600;position:relative;top:-6px;font-variant-numeric:tabular-nums}
.tt-block{position:absolute;left:1.5px;right:1.5px;border-radius:7px;padding:5px 5px;color:#fff;overflow:hidden;font-weight:700;z-index:2;text-align:left}
.tt-block b{font-size:10.5px;display:block;line-height:1.25;word-break:keep-all}
.tt-block span{font-size:9px;opacity:.8;font-weight:600}
/* 압축 블록: 짧거나 겹침 분할된 블록은 제목 1줄만 */
.tt-block.one b{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:normal}
.tt-block.sm{padding:2px 4px}
.tt-block.sm b{font-size:9px}
/* 오늘 열 강조 + 일요일 */
.tt-h.today{color:var(--tint)}
.tt-h.sun{color:var(--red)}
.tt-col.today{background:color-mix(in srgb,var(--tint) 5%,transparent)}
/* 심야·새벽 행 틴트 */
.tt-night{background:color-mix(in srgb,var(--sub2) 7%,transparent)}
.tt-col.today.tt-night{background:color-mix(in srgb,var(--tint) 8%,transparent)}
/* 현재 시간선 */
.tt-now{position:absolute;left:26px;right:0;height:2px;background:#F2385A;z-index:3;pointer-events:none}
.tt-now i{position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#F2385A}
/* 추가/수정 시트: 요일 칩·프리셋·겹침 경고 */
.tt-days{display:flex;gap:6px}
.tt-days button{flex:1;height:40px;border-radius:11px;background:var(--card2);font-size:13.5px;font-weight:700;color:var(--sub);border:1.5px solid transparent}
.tt-days button.on{background:var(--tint-soft,rgba(43,91,227,.1));color:var(--tint);border-color:var(--tint)}
.tt-days button.sun{color:var(--red)}
.tt-days button.sun.on{background:var(--red-soft,rgba(229,72,77,.1));border-color:var(--red)}
.tt-presets{display:flex;gap:7px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px;scrollbar-width:none}
.tt-presets .chip{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.tt-presets .chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.tt-warn{font-size:12.5px;font-weight:700;color:var(--red);background:var(--red-soft,rgba(229,72,77,.09));border-radius:10px;padding:9px 12px;margin:2px 0 6px;line-height:1.5}

/* ---------- 예측 ---------- */
.pr-card{background:var(--card);border-radius:var(--r-tile);border:.5px solid var(--line2);box-shadow:var(--shadow-1);padding:17px;margin-bottom:9px}
.pr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.pr-top .pr-name{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.pr-top .pr-name i{width:9px;height:9px;border-radius:50%}
.pr-pct{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pr-bar{height:8px;border-radius:5px;background:var(--bg2);overflow:hidden}
.pr-bar i{display:block;height:100%;border-radius:5px;transition:width .7s var(--ease)}
.pr-note{font-size:12px;color:var(--sub);margin-top:9px;font-weight:500;display:flex;align-items:center;gap:6px}

/* ---------- 기타 ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--sub2)}
.empty .e-ic{width:52px;height:52px;border-radius:50%;background:var(--card2);color:var(--sub2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.empty b{display:block;color:var(--sub);font-size:15px;font-weight:700;margin-bottom:3px;letter-spacing:-.02em}
.empty span{font-size:13px;font-weight:500}
.notice{font-size:11.5px;color:var(--sub2);line-height:1.65;padding:16px 6px 0;font-weight:500}
.onb-wrap{min-height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 20px) 28px calc(env(safe-area-inset-bottom) + 24px)}
.onb-title{font-size:28px;font-weight:900;letter-spacing:-.045em;text-align:center;line-height:1.28}
.onb-sub{font-size:14.5px;color:var(--sub);text-align:center;font-weight:500;margin-top:10px;line-height:1.65}
.school-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:4px 0 88px}
.onb-done-bar{position:sticky;bottom:0;z-index:20;padding:14px 0 calc(env(safe-area-inset-bottom) + 10px);margin:0 -2px;background:var(--bg);box-shadow:0 -12px 20px 8px var(--bg)}
.pick{position:relative;z-index:1}
.pick{display:flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-tile);padding:11px;font-weight:700;font-size:14px;letter-spacing:-.03em;transition:all .15s var(--ease)}
.pick:active{transform:scale(.96)}
.pick.on{border-color:var(--tint);background:var(--tint-soft);color:var(--tint)}
.pick .pk-logo,.pick .slogo{width:28px !important;height:28px !important;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.pk-name{flex:1;text-align:left;min-width:0;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-check{width:14px;min-width:14px;display:flex;align-items:center;justify-content:center;color:var(--tint)}
.pk-check .pi{animation:checkPop .34s var(--spring)}
@keyframes checkPop{0%{transform:scale(0) rotate(-25deg);opacity:0}60%{transform:scale(1.28) rotate(7deg)}100%{transform:scale(1) rotate(0);opacity:1}}

/* 온보딩: 진행 표시 + 스텝 전환 애니메이션 (fluid signup) */
.onb-prog{display:flex;gap:6px;margin-bottom:20px}
.onb-prog span{height:5px;border-radius:3px;flex:1;background:var(--line)}
.onb-prog span.done{background:var(--tint);opacity:.45}
.onb-prog span.on{background:var(--tint);animation:progGrow .55s var(--spring)}
@keyframes progGrow{from{transform:scaleX(.15);transform-origin:left;opacity:.4}to{transform:scaleX(1);opacity:1}}
.onb-step-pick .onb-head{animation:onbUp .5s var(--spring) backwards}
.onb-step-pick .onb-done-bar{animation:onbUp .5s var(--spring) .08s backwards}
@keyframes onbUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.onb-step-pick .school-pick-grid{margin-top:22px}
.onb-step-pick .school-pick-grid .pick{animation:pickPop .42s var(--spring) backwards}
@keyframes pickPop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.onb-step-pick .pick:nth-child(1){animation-delay:.05s}
.onb-step-pick .pick:nth-child(2){animation-delay:.09s}
.onb-step-pick .pick:nth-child(3){animation-delay:.13s}
.onb-step-pick .pick:nth-child(4){animation-delay:.17s}
.onb-step-pick .pick:nth-child(5){animation-delay:.21s}
.onb-step-pick .pick:nth-child(6){animation-delay:.25s}
.onb-step-pick .pick:nth-child(7){animation-delay:.29s}
.onb-step-pick .pick:nth-child(8){animation-delay:.33s}
.onb-step-pick .pick:nth-child(n+9){animation-delay:.37s}
.onb-done-bar .btn.bump{animation:doneBump .42s var(--spring)}
@keyframes doneBump{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
.signup-extra{animation:fieldsDrop .34s var(--ease)}
@keyframes fieldsDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.onb-step-pick .pick,.onb-step-pick .onb-head,.onb-step-pick .onb-done-bar,.onb-prog span.on,.pk-check .pi,.signup-extra,.onb-done-bar .btn.bump{animation:none!important}}
.splash{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.splash.out{opacity:0;transition:opacity .45s;pointer-events:none}
/* 앱 실행 게이트(점검·강제 업데이트) */
.app-gate{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px;animation:fadeIn .3s}
.app-gate .ag-inner{text-align:center;max-width:340px;width:100%}
.app-gate .ag-emoji{font-size:56px;line-height:1;animation:popIn .55s var(--spring) .1s backwards}
.app-gate h2{font-size:23px;font-weight:900;letter-spacing:-.03em;margin-top:16px}
.app-gate p{font-size:14.5px;color:var(--sub);font-weight:500;line-height:1.65;margin-top:10px;white-space:pre-line}
.app-gate .ag-btn{margin:14px auto 0;max-width:260px;width:100%}
::selection{background:var(--tint-soft2)}
.unit.open .u-bub{background:var(--tint-soft);color:var(--tint);box-shadow:0 3.5px 0 var(--tint-soft2)}

/* ---------- 학교 상세 서브탭 / 전형표 / 학과별 경쟁률 / 분석 ---------- */
.subseg{margin:2px 0 14px}
.mth-group{margin-bottom:14px}
.mth-group:last-of-type{margin-bottom:0}
.mth-name{font-size:13px;font-weight:800;color:var(--tint);margin-bottom:6px;letter-spacing:-.01em}
.mth-row{display:flex;gap:12px;padding:9px 2px;border-bottom:.5px solid var(--line2);align-items:baseline}
.mth-group .mth-row:last-child{border-bottom:0}
.mth-stage{font-size:12px;font-weight:700;color:var(--sub);flex-shrink:0;min-width:92px}
.mth-val{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.5}
.mth-note{font-size:11.5px;color:var(--sub2);line-height:1.6;margin-top:12px;font-weight:500}
.src-line{margin-top:7px}
.src-cite{font-size:11px;color:var(--sub2);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:3px;opacity:.9}
a.src-cite{color:var(--tint);opacity:1}
a.src-cite:active{opacity:.6}
.dept-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:.5px solid var(--line2)}
.dept-row:last-of-type{border-bottom:0}
.dept-row b{font-size:14px;display:block;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dept-row .dr-sub{font-size:11.5px;color:var(--sub);display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dept-row .dr-rate{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--sub);flex-shrink:0}
.dept-row .dr-rate.hot{color:var(--red)}
/* 공부인증 타이머 카드 */
.stud-card{border:1.5px solid var(--tint);border-radius:15px;padding:14px 16px;margin:2px 0 12px;background:var(--tint-soft,rgba(43,91,227,.06))}
.stud-card .sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.stud-card .sc-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#fff;background:var(--tint);padding:4px 10px;border-radius:999px}
.stud-card .sc-date{font-size:11.5px;color:var(--sub2);font-weight:700;font-variant-numeric:tabular-nums}
.stud-card .sc-total{font-size:30px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stud-card .sc-sub{font-size:11.5px;color:var(--sub);font-weight:500;margin:2px 0 10px}
.stud-card .sc-row{display:flex;align-items:center;gap:9px;padding:4px 0}
.stud-card .sc-name{width:66px;flex-shrink:0;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stud-card .sc-bar{flex:1;height:8px;border-radius:5px;background:var(--card2);overflow:hidden}
.stud-card .sc-bar i{display:block;height:100%;border-radius:5px;background:var(--tint)}
.stud-card .sc-time{font-size:12px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums;flex-shrink:0}
.w-stud-prev{font-size:12.5px;color:var(--sub);font-weight:600;margin-top:9px}
.stud-days{display:flex;gap:7px;overflow-x:auto;margin-top:11px;padding-bottom:3px;scrollbar-width:none}
.stud-days::-webkit-scrollbar{display:none}
.sd-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.25}
.sd-chip span{font-size:11px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.sd-chip.on{border-color:var(--tint);background:var(--tint-soft);color:var(--tint)}
.sd-chip.on span{color:var(--tint)}
/* 시험 구성(출제분석) */
.xg-head{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.7;margin-bottom:12px}
.xt{border:1px solid var(--line);border-radius:13px;padding:12px 13px 4px;margin-bottom:9px;background:var(--card2)}
.xt-h{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.xt-h b{font-size:14.5px;letter-spacing:-.02em;margin-right:2px}
.xt-who{font-size:12px;color:var(--sub2);font-weight:500;line-height:1.55;margin-top:3px}
.xs{display:flex;gap:10px;padding:9px 0;border-top:.5px solid var(--line2);margin-top:8px}
.xs-n{font-size:13px;font-weight:700;width:76px;flex-shrink:0;line-height:1.45;word-break:keep-all}
.xs-b{flex:1;min-width:0}
.xs-m{font-size:11.5px;font-weight:700;color:var(--tint);line-height:1.5}
.xs-d{font-size:12.5px;color:var(--sub);line-height:1.65;font-weight:400;margin-top:3px}
.xg-warn{display:flex;gap:7px;align-items:flex-start;margin-top:10px;padding:10px 11px;border-radius:11px;background:var(--card2);font-size:12.5px;font-weight:500;color:var(--sub);line-height:1.6}
.xg-warn svg{flex-shrink:0;color:var(--tint);margin-top:1px}
.anal-sec{padding:14px 2px;border-bottom:.5px solid var(--line2)}
.anal-sec:last-child{border-bottom:0}
.anal-sec .as-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.anal-sec .as-h b{font-size:15px;letter-spacing:-.02em}
.anal-sec p{font-size:13.5px;color:var(--sub);line-height:1.75;font-weight:400}
.cmp-table th{padding:8px 4px}
.cmp-table .cmp-th{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700}
.cmp-table td.cmp-v{font-size:12.5px;padding:10px 4px}

/* ---------- 오답노트 / 오늘의 단어 ---------- */
.review-card{display:flex;align-items:center;gap:12px;padding:15px 16px}
.review-card .rv-ic{width:40px;height:40px;border-radius:13px;background:var(--violet-soft);color:var(--violet);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.review-card b{font-size:14.5px;display:block;letter-spacing:-.02em}
.review-card .rv-sub{font-size:12px;color:var(--sub);display:block;margin-top:4px}
.word-card{transition:background .18s}
.word-card .wc-w{font-size:22px;font-weight:900;letter-spacing:-.02em}
.word-card .wc-m{font-size:13.5px;color:var(--sub2);font-weight:600;margin-top:7px;line-height:1.55}
.word-card .wc-def[hidden]{display:none}
.word-card .wc-mean{font-size:15.5px;color:var(--ink);font-weight:700;margin-top:9px;line-height:1.6}
.word-card .wc-ex{font-size:13px;color:var(--sub);font-style:italic;line-height:1.6;margin-top:8px}
.word-card .spk{margin-left:auto}

/* ---------- 모션 ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#view>*{animation:riseIn .42s var(--ease) backwards}
#view>*:nth-child(2){animation-delay:.03s}
#view>*:nth-child(3){animation-delay:.06s}
#view>*:nth-child(4){animation-delay:.09s}
#view>*:nth-child(5){animation-delay:.12s}
#view>*:nth-child(6){animation-delay:.15s}
#view>*:nth-child(7){animation-delay:.18s}
#view>*:nth-child(8){animation-delay:.21s}
#view>*:nth-child(n+9){animation-delay:.24s}
#view>.topbar{animation:none}
@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(5px)}100%{opacity:1;transform:none}}
.dday-card .dc-d{animation:popIn .55s var(--ease) .08s backwards}
.result-hero .rh-emo{display:inline-block;animation:popIn .5s var(--ease) .05s backwards}
@keyframes flamePulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(-4deg)}}
.streak-strip.lit .flame .pi{animation:flamePulse 2.4s ease-in-out infinite}
@keyframes nowPulse{0%,100%{box-shadow:0 3.5px 0 var(--tint-deep),0 0 0 5px var(--tint-soft)}50%{box-shadow:0 3.5px 0 var(--tint-deep),0 0 0 10px rgba(43,91,227,.04)}}
.unit.now .u-bub{animation:nowPulse 2.2s ease-in-out infinite}
.ring svg circle:last-child{transition:stroke-dashoffset .9s var(--ease)}
.dday-card .bar i{transition:width .9s var(--ease)}

/* ---------- 학교 로고 (실제 엠블럼 + 모노그램 폴백) ---------- */
.slogo{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;border:.5px solid var(--line);overflow:hidden}
.slogo img{width:78%;height:78%;object-fit:contain;position:relative;z-index:2}
.slogo b{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#fff;font-weight:800;letter-spacing:-.02em}
.slogo.fb{border:0;background:transparent}
.slogo.fb b{display:flex}

/* ---------- 프로필/계정 ---------- */
.terms-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--sub);padding:2px 2px 14px}
.terms-row input{width:18px;height:18px;accent-color:var(--tint);flex-shrink:0}
.tlink{color:var(--tint);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.wkbars{display:flex;gap:8px;align-items:flex-end;height:96px;padding-top:4px}
.wkb{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.wkb b{font-size:10px;color:var(--sub2);font-weight:600;font-variant-numeric:tabular-nums}
.wkb i{display:block;width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:var(--tint);opacity:.9;min-height:4px}
.wkb span{font-size:10.5px;color:var(--sub);font-weight:600}

/* ---------- 체크리스트 ---------- */
.ck-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 2px;border-bottom:.5px solid var(--line2);font-size:14px;font-weight:600;letter-spacing:-.01em}
.ck-row:last-of-type{border-bottom:0}
.ck-box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:all .15s var(--ease)}
.ck-row.on .ck-box{background:var(--green);border-color:var(--green)}
.ck-row.on .ck-label{color:var(--sub2);text-decoration:line-through}
.ck-label{flex:1;min-width:0}
.ck-del{color:var(--sub2);padding:4px;flex-shrink:0}
/* 단계 구분 헤더 (① 지원할 때 / ② 1차 합격 후 / ③ 최종 합격 후) */
.ck-stage{display:flex;flex-direction:column;gap:2px;margin:14px 0 4px;padding:8px 10px;border-radius:10px;background:var(--card2)}
.ck-stage:first-of-type{margin-top:4px}
.ck-stage-t{font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:var(--sub)}
.ck-stage-n{font-size:11px;font-weight:600;color:var(--sub2);line-height:1.45}
.ck-stage.hot{background:color-mix(in srgb,var(--orange) 10%,var(--card2));border:1px solid color-mix(in srgb,var(--orange) 35%,transparent)}
.ck-stage.hot .ck-stage-t{color:var(--orange)}
.ck-stage.hot .ck-stage-n{color:color-mix(in srgb,var(--orange) 75%,var(--sub))}
.ring{border:0;background:none;cursor:pointer}

/* ============================================================
   토스식 모션 레이어
   ============================================================ */
:root{ --spring:cubic-bezier(.34,1.56,.64,1); --smooth:cubic-bezier(.32,.72,0,1); }

/* 버튼·셀·칩 프레스: 살짝 눌리고 튕겨 돌아옴 */
.btn,.chip,.quick,.school-mini,.cell,.post-row,.choice,.stat,.unit,.ck-row,.pick,.school-row,.icon-btn,.tab{
  transition:transform .13s var(--spring), opacity .15s, background .15s, box-shadow .18s;
  -webkit-user-select:none;user-select:none;
}
.btn:active{transform:scale(.965)}
.quick:active,.school-mini:active,.stat:active{transform:scale(.955)}
.chip:active,.icon-btn:active{transform:scale(.9)}
.cell:active,.post-row:active,.ck-row:active{transform:scale(.99);opacity:.7}

/* 탭바: 활성 아이콘 스프링 팝 */
@keyframes tabPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1.12)}}
.tab.on .pi{animation:tabPop .42s var(--spring)}
.tab.on{position:relative}
.tab.on::after{content:"";position:absolute;top:2px;width:4px;height:4px;border-radius:50%;background:var(--tint);animation:dotIn .3s var(--spring) .1s backwards}
@keyframes dotIn{from{transform:scale(0)}}

/* 시트: 스프링 슬라이드업 + 백드롭 페이드 */
.sheet{animation:sheetSpring .46s var(--spring)}
@keyframes sheetSpring{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}

/* 토스트: 스프링 팝인 */
.toast{animation:toastSpring .44s var(--spring)}
@keyframes toastSpring{0%{opacity:0;transform:translateY(16px) scale(.85)}60%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{transform:translateY(0) scale(1)}}

/* 숫자 롤업 강조 */
[data-num]{font-variant-numeric:tabular-nums;transition:color .3s}

/* 스켈레톤 시머 */
.skel{position:relative;overflow:hidden;background:var(--card2);border-radius:10px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 6%,transparent),transparent);
  animation:shimmer 1.3s var(--smooth) infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* 하트/별표 프레스 스프링 강화 */
.heart-btn:active{transform:scale(1.3)}

/* 카드 진입 스태거 부드럽게 (기존 riseIn 유지, 스프링으로) */
#view>*{animation:riseSpring .5s var(--spring) backwards}
@keyframes riseSpring{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 제자리 갱신(같은 화면 상태 변경)이면 자식 카드 진입 애니메이션 억제 → 클릭 시 전체 재애니메이션 방지 */
#view.noenter>*{animation:none}
/* 정답 선택 시 살짝 튕기는 팝(효과음과 페어) */
@keyframes okPop{0%{transform:scale(1)}42%{transform:scale(1.045)}100%{transform:scale(1)}}
.choice.ok{animation:okPop .4s var(--spring)}

/* 프로그레스바 채움 트랜지션 통일 */
.pr-bar i,.dday-card .bar i,.ck-row+.pr-bar i,.card .pr-bar i{transition:width .8s var(--smooth)}

@media (prefers-reduced-motion: reduce){
  .tab.on .pi,.sheet,.toast,#view>*{animation:none !important}
  .tab.on::after{animation:none}
}

/* ---------- 하트 / 출석 / 업적 ---------- */
.hearts-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:100px;background:var(--red-soft);color:var(--red);font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.hearts-pill:active{transform:scale(.92)}
.ses-hearts{display:inline-flex;align-items:center;gap:3px;color:var(--red);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;transition:transform .25s var(--spring)}
.ses-hearts.lost{animation:heartLost .45s var(--spring)}
@keyframes heartLost{0%{transform:scale(1)}35%{transform:scale(1.4);color:#fff}100%{transform:scale(1)}}
.checkin-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(120deg,var(--gold-soft),var(--orange-soft));border:.5px solid var(--line2);border-radius:var(--r-tile);padding:14px 16px;margin-bottom:12px}
.checkin-card:active{transform:scale(.98)}
.checkin-card .ci-ic{width:42px;height:42px;border-radius:13px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.checkin-card b{font-size:14.5px;display:block;letter-spacing:-.02em}
.checkin-card .ci-sub{font-size:12px;color:var(--sub);display:block;margin-top:4px}
.checkin-done{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:var(--r-tile);padding:12px;margin-bottom:12px}
.ach-mini{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:74px;text-align:center;font-size:10.5px;font-weight:700;color:var(--sub2)}
.ach-mini .ach-ic{width:52px;height:52px;border-radius:50%;background:var(--card2);color:var(--sub2);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line2)}
.ach-mini.on{color:var(--ink)}
.ach-mini.on .ach-ic{background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);border-color:transparent}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px}
.ach-card{position:relative;background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);border-radius:var(--r-tile);padding:16px 14px;text-align:center;opacity:.5;filter:grayscale(1)}
.ach-card.on{opacity:1;filter:none}
.ach-card .ach-badge{width:54px;height:54px;border-radius:50%;background:var(--card2);color:var(--sub2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:9px}
.ach-card.on .ach-badge{background:color-mix(in srgb,var(--ac) 15%,transparent);color:var(--ac)}
.ach-card b{font-size:14px;display:block;letter-spacing:-.02em}
.ach-card span{font-size:11.5px;color:var(--sub);display:block;margin-top:2px}
.ach-card .pi{color:inherit}
.ach-card .ach-check{position:absolute;top:10px;right:10px;color:var(--green)}
.ach-cat-head{display:flex;justify-content:space-between;align-items:baseline;margin:20px 2px 9px}
.ach-cat-head h3{font-size:15px;letter-spacing:-.02em}
.ach-cat-head .ach-cnt{font-size:12px;font-weight:700;color:var(--sub)}
.ach-card .ach-prog{display:block;height:4px;border-radius:2px;background:var(--card2);overflow:hidden;margin-top:8px}
.ach-card .ach-prog i{display:block;height:100%;border-radius:2px;background:var(--tint);opacity:.8}
.ach-card .ach-pt{font-size:10.5px;color:var(--sub2);margin-top:3px}
.ach-near{display:flex;gap:11px;align-items:center;padding:9px 0}
.ach-near+.ach-near{border-top:.5px solid var(--line2)}
.ach-near .an-ic{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}
.ach-near .an-body{flex:1;min-width:0}
.ach-near .an-top{display:flex;justify-content:space-between;align-items:baseline}
.ach-near .an-top b{font-size:13.5px}
.ach-near .an-top span{font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.ach-near .an-bar{height:5px;border-radius:3px;background:var(--card2);overflow:hidden;margin-top:5px}
.ach-near .an-bar i{display:block;height:100%;border-radius:3px;background:var(--tint)}
.ach-pop{text-align:center;padding-bottom:4px}
.ach-pop .ap-halo{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,#D99E00 16%,transparent);color:#D99E00;margin-bottom:10px;animation:achpop .45s cubic-bezier(.34,1.56,.64,1)}
.ach-pop h3{font-size:19px;letter-spacing:-.02em}
.ach-pop .s-sub{margin-top:4px}
.ach-pop .ap-list{margin-top:14px;max-height:46vh;overflow-y:auto;text-align:left}
.ach-pop .ap-item{display:flex;gap:11px;align-items:center;padding:10px 2px}
.ach-pop .ap-item+.ap-item{border-top:.5px solid var(--line2)}
.ach-pop .ap-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 15%,transparent);color:var(--ac)}
.ach-pop .ap-tx{flex:1;min-width:0}
.ach-pop .ap-tx b{font-size:14.5px;display:block;letter-spacing:-.02em}
.ach-pop .ap-tx span{font-size:12px;color:var(--sub);display:block;margin-top:1px}
.ach-pop .ap-check{color:var(--green);flex-shrink:0}
@keyframes achpop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
/* 실전 테스트 룸: 상단 시작 히어로 */
.tr-hero{background:linear-gradient(150deg,#DB2777,#B01E8F);border-radius:22px;color:#fff;padding:18px 18px 15px;overflow:hidden}
.tr-hero .trh-top{display:flex;align-items:center;gap:12px}
.tr-hero .trh-ic{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tr-hero b{font-size:17.5px;letter-spacing:-.02em;display:block}
.tr-hero .trh-sub{font-size:12px;opacity:.85;font-weight:600;margin-top:2px}
.tr-hero .trh-stats{display:flex;gap:14px;margin-top:13px;font-size:12.5px;font-weight:600;opacity:.95}
.tr-hero .trh-stats b{display:inline;font-size:13.5px;font-weight:900}
.tr-hero .trh-btn{margin-top:13px;background:#fff;color:#C2247E;font-weight:800;font-size:15px;border-radius:14px;padding:13px 0;text-align:center;width:100%;border:none;cursor:pointer}
.tr-hero .trh-note{font-size:11px;opacity:.75;font-weight:600;margin-top:9px;text-align:center}
/* 실전 테스트 안내 시트 */
.tri-list{display:flex;flex-direction:column;margin-top:10px}
.tri-item{display:flex;gap:12px;align-items:center;padding:11px 2px}
.tri-item+.tri-item{border-top:.5px solid var(--line2)}
.tri-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}
.tri-tx{flex:1;min-width:0}
.tri-tx b{font-size:14.5px;display:block;letter-spacing:-.02em}
.tri-tx span{font-size:12.5px;color:var(--sub);display:block;margin-top:2px;line-height:1.5}
/* 어휘 학습 벤토 그리드: 단어 레슨(큰 타일) + 연습 3종(작은 타일) */
.vb-grid{display:grid;grid-template-columns:1.22fr 1fr;gap:10px}
.vb-main{grid-row:span 3;background:linear-gradient(160deg,#5B63F5,#6E5AF0);border-radius:20px;color:#fff;padding:15px 14px;display:flex;flex-direction:column;text-align:left;overflow:hidden}
.vb-main .vbm-top{cursor:pointer}
.vb-main .vb-ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:11px;color:#fff}
.vb-main b{font-size:16.5px;letter-spacing:-.02em;display:block}
.vb-main .vb-sub{font-size:11.5px;opacity:.87;font-weight:600;margin-top:3px;line-height:1.55;display:block}
.vb-main .vb-bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin-top:auto;overflow:hidden}
.vb-main .vb-bar i{display:block;height:100%;background:#fff;border-radius:3px}
.vb-main .vb-pct{font-size:10.5px;font-weight:700;opacity:.9;margin-top:5px;display:block}
.vb-main .vb-btn{margin-top:9px;background:#fff;color:#5B63F5;font-weight:800;font-size:13px;border-radius:11px;padding:9px 0;text-align:center;width:100%;border:none;cursor:pointer}
.vb-side{background:var(--card);border-radius:16px;border:.5px solid var(--line2);box-shadow:var(--shadow-1);padding:11px 12px;display:flex;align-items:center;gap:10px;text-align:left;width:100%;min-width:0}
.vb-side .vs-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--pc) 13%,transparent);color:var(--pc)}
.vb-side .vs-tx{min-width:0}
.vb-side .vs-tx b{font-size:13px;letter-spacing:-.02em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-side .vs-tx .vs-d{font-size:10.5px;color:var(--sub);font-weight:600;display:block;margin-top:1px}
/* 하루 학습 목표 */
.goal-strip{display:flex;gap:11px;align-items:center;width:100%;text-align:left;background:var(--card);border:.5px solid var(--line2);box-shadow:var(--shadow-1);border-radius:var(--r-tile);padding:12px 14px;margin-top:10px;position:relative;overflow:hidden}
.goal-strip .gs-ic{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--tint-soft);color:var(--tint)}
.goal-strip.met .gs-ic{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.goal-strip .gs-tx{flex:1;min-width:0}
.goal-strip .gs-tx b{font-size:14px;display:block;letter-spacing:-.02em}
.goal-strip .gs-tx span{font-size:12px;color:var(--sub);display:block;margin-top:1px}
.goal-strip .gs-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--card2)}
.goal-strip .gs-bar i{display:block;height:100%;background:var(--tint)}
.goal-opts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.goal-opt{display:flex;gap:11px;align-items:center;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px}
.goal-opt.on{border-color:var(--tint);background:var(--tint-soft)}
.goal-opt .go-tx{flex:1;min-width:0}
.goal-opt .go-tx b{font-size:14.5px;letter-spacing:-.02em}
.goal-opt .go-rec{display:inline-block;font-style:normal;font-size:10.5px;font-weight:800;color:var(--tint);background:color-mix(in srgb,var(--tint) 12%,transparent);border-radius:20px;padding:2px 7px;margin-left:4px;vertical-align:2px}
.goal-opt .go-tx span{font-size:12px;color:var(--sub);display:block;margin-top:2px}
.goal-opt .go-xp{font-size:15px;font-weight:800;color:var(--tint);font-variant-numeric:tabular-nums;flex-shrink:0}
.goal-custom{display:flex;gap:9px;align-items:center;padding:4px 2px 0}
.goal-custom .gc-btn{width:44px;height:44px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);font-size:21px;font-weight:800;color:var(--ink);flex-shrink:0}
.goal-custom .gc-mid{min-width:74px;text-align:center}
.goal-custom .gc-mid b{font-size:19px;font-variant-numeric:tabular-nums}
.goal-custom .gc-mid span{font-size:11.5px;color:var(--sub);margin-left:2px}

/* ---------- 듀오링고식 정답 피드백 배너 ---------- */
.ses-fb{
  position:fixed;left:50%;transform:translate(-50%,120%);bottom:0;width:100%;max-width:520px;z-index:70;
  padding:20px 20px calc(env(safe-area-inset-bottom) + 20px);
  border-radius:24px 24px 0 0;transition:transform .4s var(--spring);
  box-shadow:0 -8px 30px rgba(12,16,34,.14);
}
.ses-fb.up{transform:translate(-50%,0)}
.ses-fb.ok{background:var(--green-soft)}
.ses-fb.no{background:var(--red-soft)}
.ses-fb .fb-row{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.ses-fb .fb-ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;animation:fbPop .45s var(--spring)}
.ses-fb.ok .fb-ic{background:var(--green)}
.ses-fb.no .fb-ic{background:var(--red)}
@keyframes fbPop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.ses-fb .fb-txt b{font-size:17px;font-weight:800;letter-spacing:-.02em;display:block}
.ses-fb.ok .fb-txt b{color:var(--green)}
.ses-fb.no .fb-txt b{color:var(--red)}
.ses-fb .fb-txt span{font-size:13.5px;font-weight:600;color:var(--sub);display:block;margin-top:2px}
.ses-fb .fb-cont-no{background:var(--red);box-shadow:0 4px 14px rgba(229,72,77,.28)}
.ses-fb .btn{animation:fbBtnIn .4s var(--spring) .06s backwards}
@keyframes fbBtnIn{from{opacity:0;transform:translateY(8px)}}
.choice.ok{animation:choiceOk .5s var(--spring)}
@keyframes choiceOk{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* ---------- 온보딩 완료 축하 ---------- */
.onb-celebrate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:var(--bg);opacity:0;transition:opacity .4s var(--smooth)}
.onb-celebrate.show{opacity:1}
.onb-celebrate.out{opacity:0}
.onb-celebrate .oc-inner{text-align:center;padding:0 32px;transform:translateY(12px) scale(.96);transition:transform .5s var(--spring)}
.onb-celebrate.show .oc-inner{transform:none}
.onb-celebrate .oc-mark{display:inline-block;animation:ocPop .6s var(--spring) .1s backwards}
@keyframes ocPop{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.onb-celebrate h2{font-size:28px;font-weight:900;letter-spacing:-.04em;margin-top:18px;animation:ocRise .5s var(--spring) .25s backwards}
.onb-celebrate p{font-size:15px;color:var(--sub);font-weight:600;margin-top:8px;animation:ocRise .5s var(--spring) .32s backwards}
.onb-celebrate .oc-logos{display:flex;justify-content:center;gap:9px;margin:24px 0 16px}
/* 직계 span(로고 래퍼)만 대상 — 안쪽 .slogo까지 매칭되면 inline-flex 중앙정렬이 깨져 로고가 위로 쏠림 */
.onb-celebrate .oc-logos > span{display:inline-block;animation:ocLogoIn .55s var(--spring) backwards}
@keyframes ocLogoIn{0%{opacity:0;transform:translateY(16px) scale(.5)}100%{opacity:1;transform:none}}
.onb-celebrate .oc-msg{font-size:13px;color:var(--sub2);font-weight:600;animation:ocRise .5s var(--spring) .6s backwards}
@keyframes ocRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.onb-celebrate *{animation:none !important}}

/* ---------- 홈 일정 위젯 ---------- */
.sched-widget{padding:4px 14px}
.sched-row{display:flex;align-items:center;gap:11px;padding:12px 4px;border-bottom:.5px solid var(--line2)}
.sched-row:last-child{border-bottom:0}
.sched-row:active{opacity:.6}
.sched-d{flex-shrink:0;width:52px;text-align:center}
.sched-d b{display:block;font-size:14px;font-weight:800;color:var(--tint);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sched-d span{font-size:10.5px;color:var(--sub2);font-weight:600}
.sched-bar{width:3px;align-self:stretch;border-radius:2px;flex-shrink:0}
.sched-body{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.sched-txt{min-width:0}
.sched-txt b{font-size:14px;font-weight:700;letter-spacing:-.02em;display:block}
.sched-txt span{font-size:12px;color:var(--sub);display:block}

/* ---------- 서류 준비 가이드 ---------- */
.guide-steps{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.gstep{display:flex;gap:12px;align-items:flex-start}
.gstep .gnum{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex-shrink:0;margin-top:1px}
.gstep b{font-size:14px;font-weight:700;color:#fff;display:block;letter-spacing:-.01em}
.gstep span{font-size:12.5px;color:rgba(255,255,255,.66);display:block;margin-top:3px;line-height:1.6}

/* ---------- 공부 기록(열품타식 타이머 + 캘린더) ---------- */
.st-hero{background:linear-gradient(150deg,var(--stc),color-mix(in srgb,var(--stc) 62%,#0A102A));border-radius:22px;padding:28px 20px 22px;color:#fff;text-align:center;margin-bottom:14px;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--stc) 55%,transparent)}
.st-big{font-size:46px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.st-sub{display:flex;justify-content:center;gap:38px;margin-top:12px;font-size:12px;opacity:.92}
.st-sub b{display:block;font-size:16px;margin-top:3px;font-variant-numeric:tabular-nums}
.st-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:.5px solid var(--line2)}
.st-row:last-of-type{border-bottom:0}
.st-play{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--stc) 14%,transparent);color:var(--stc);font-size:13px;font-weight:800;transition:transform .14s var(--ease)}
.st-play:active{transform:scale(.9)}
.st-row.on .st-play{background:var(--stc);color:#fff}
.st-name{font-size:14.5px;font-weight:700;min-width:0}
.st-time{margin-left:auto;font-size:14px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums;flex-shrink:0}
.st-row.on .st-time{color:var(--stc)}
.st-del{color:var(--sub2);padding:6px;flex-shrink:0}
.st-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.st-cal-head b{font-size:15px;letter-spacing:-.02em}
.st-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.st-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--sub2)}
.st-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.st-cell{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;background:var(--card2);color:var(--sub);border:1.5px solid transparent;transition:transform .12s var(--ease)}
.st-cell:active{transform:scale(.92)}
.st-cell.blank{background:transparent;pointer-events:none}
.st-cell.l1{background:color-mix(in srgb,var(--stc) 18%,var(--card2))}
.st-cell.l2{background:color-mix(in srgb,var(--stc) 40%,var(--card2));color:#fff}
.st-cell.l3{background:color-mix(in srgb,var(--stc) 65%,var(--card2));color:#fff}
.st-cell.l4{background:var(--stc);color:#fff;font-weight:800}
.st-cell.sel{border-color:var(--ink)}
.st-cell.today{box-shadow:inset 0 0 0 1.5px var(--stc)}
.st-legend{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:10px;font-size:10.5px;color:var(--sub2)}
.st-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.st-dot{width:40px;height:40px;border-radius:50%;background:var(--c);border:3px solid transparent;transition:transform .14s var(--ease)}
.st-dot.on{border-color:var(--ink);transform:scale(1.1)}
.st-dot:active{transform:scale(.92)}

/* ---------- 모의고사·기출 점수 ---------- */
.ex-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.ex-chip{font-size:12px;font-weight:700;padding:7px 12px;border-radius:99px;border:1.5px solid var(--line2);background:var(--card2);color:var(--sub);letter-spacing:-.01em}
.ex-chip.on{background:color-mix(in srgb,var(--stc) 12%,var(--card));border-color:var(--stc);color:var(--stc)}
.ex-graph{margin:2px 0 10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.ex-unit{display:flex;border:1.5px solid var(--line2);border-radius:12px;overflow:hidden;flex-shrink:0}
.ex-unit button{font-size:13.5px;font-weight:800;padding:0 16px;background:var(--card2);color:var(--sub2);border:0}
.ex-unit button.on{background:var(--tint);color:#fff}

/* ---------- 자소서 마켓 ---------- */
.es-gist{font-size:12px;color:var(--sub);font-weight:600;line-height:1.4;margin:3px 0 2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 수학 공식집 ---------- */
.mx-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.mx-chips .mxc-n{font-size:10px;font-weight:700;opacity:.65;margin-left:5px}
.mx-ch{font-size:12px;font-weight:800;color:var(--sub2);padding:10px 0 4px;letter-spacing:-.01em}
.mx-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 0;border-bottom:.5px solid var(--line2);font-size:14px;font-weight:600;color:var(--ink)}
.mx-row:last-of-type{border-bottom:0}
.mx-row .mx-dot{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;cursor:pointer;position:relative}
/* 터치 영역 확장(시각 크기는 유지) */
.mx-row .mx-dot::after{content:'';position:absolute;inset:-9px}
.mx-row.done .mx-dot{background:var(--green);border-color:var(--green)}
.mx-row.done .mx-t{color:var(--sub2)}
.mx-row .mx-t{flex:1;min-width:0}
.mx-row .mx-n{font-size:11px;color:var(--sub2);font-weight:600;flex-shrink:0}
.mx-crumb{font-size:11.5px;font-weight:700;color:var(--sub2);margin:2px 2px 12px}
.mx-nav{display:flex;justify-content:space-between;gap:8px;margin:14px 0 6px}
.mx-nav .btn{flex:0 1 auto;max-width:48%;white-space:normal;line-height:1.4;padding-top:10px;padding-bottom:10px;text-align:center}
.fx-card{padding:14px 16px}
.fx-n{font-size:12.5px;font-weight:800;color:var(--tint);margin-bottom:8px;letter-spacing:-.01em}
.fx{font-family:Georgia,'Times New Roman','Pretendard Variable',Pretendard,-apple-system,sans-serif;font-size:16.5px;line-height:2.1;letter-spacing:.01em;padding-top:2px}
/* 식 단위 래핑: 짧은 식은 통째로 다음 줄로, 아주 긴 식만 내부 줄바꿈 */
.fx .eq{display:inline-block;max-width:100%;margin-right:.4em;vertical-align:top}
.fx sup,.fx sub{font-size:.62em}
.fx-d{font-size:12px;color:var(--sub);margin-top:7px;font-weight:600;font-family:inherit}
/* 세로 분수 */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 2px;line-height:1.25;font-size:.88em}
.fr>span{display:block;padding:0 3px;white-space:nowrap}
.fr>span:first-child{border-bottom:1.2px solid currentColor}
.fr .fr{font-size:.92em}
/* 근호 윗줄 */
.ov{border-top:1.2px solid currentColor;padding:0 1px;margin-left:-1px}
/* 행렬 */
.mx{display:inline-grid;grid-template-columns:repeat(var(--c,2),auto);gap:1px 10px;vertical-align:middle;margin:0 1px;line-height:1.3;font-size:.9em;text-align:center}
.fx-big{display:inline-block;transform:scaleY(1.9);transform-origin:center;font-weight:300;vertical-align:middle;margin:0 1px}

/* ---------- 수학 공식 학습 시트 · 가리기 모드 ---------- */
.fx-more{float:right;font-size:10.5px;font-weight:700;color:var(--sub2);display:inline-flex;align-items:center;gap:2px}
.fxs-head .fxs-topic{font-size:11px;font-weight:800;color:var(--sub2)}
.fxs-f{font-size:18px;padding:4px 0 8px;border-bottom:1px solid var(--line);margin-bottom:10px}
.fxs-fig{margin:6px 0 10px;border:1px solid var(--line2);border-radius:14px;padding:8px;background:var(--card2)}
.fxs-fig .fig{width:100%;height:auto;display:block}
.fxs-sec{margin:11px 0}
.fxs-l{font-size:11.5px;font-weight:800;color:var(--sub2);display:block;margin-bottom:4px}
.fxs-b{font-size:14px;line-height:1.65;font-weight:500}
.fxs-sec.tip .fxs-b{background:color-mix(in srgb,var(--gold,#f5a623) 10%,var(--card2));border-radius:10px;padding:9px 12px;font-weight:600}
/* 상세 카드 그림(있을 때) */
.fx-card .fig{width:100%;height:auto;display:block;margin-top:6px}
/* 가리고 외우기 */
.mx-tools{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.mx-veil{font-size:12px;font-weight:700;padding:7px 12px;border-radius:99px;border:1.5px solid var(--line2);background:var(--card2);color:var(--sub);display:inline-flex;align-items:center;gap:5px}
.mx-veil.on{border-color:var(--tint);color:var(--tint);background:color-mix(in srgb,var(--tint) 10%,var(--card))}
.fx-card{position:relative}
.fx-card .fx-veil-tag{display:none}
.fx-card.veiled .fx,.fx-card.veiled .fx-d{filter:blur(7px);pointer-events:none;user-select:none}
.fx-card.veiled .fx-veil-tag{display:block;position:absolute;left:0;right:0;top:56%;text-align:center;font-size:12.5px;font-weight:700;color:var(--sub)}

/* ---------- 학점 변환기 ---------- */
.gc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.gc-tile{background:var(--card);border:1.5px solid var(--line2);border-radius:16px;padding:16px 12px;text-align:center;box-shadow:var(--shadow-1)}
.gc-tile b{font-size:25px;font-weight:900;display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gc-tile span{font-size:11.5px;color:var(--sub);font-weight:600;margin-top:4px;display:block}
.gc-tile.src{border-color:var(--tint);background:color-mix(in srgb,var(--tint) 5%,var(--card))}
.gc-tile.src b{color:var(--tint)}
.gc-tile.pct b{color:var(--gold)}

/* 학습 코스 섹션 헤더(단어/숙어/속담) */
.path-sec{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin:18px 2px 6px;padding-top:6px;border-top:.5px solid var(--line2)}
.path-sec:first-child{margin-top:2px;border-top:0;padding-top:0}
.path-sec span{font-size:11px;font-weight:700;color:var(--sub2)}

/* ---------- 학습 코스: 접히는 섹션(하·중·상·숙어속담) ---------- */
.lsec{background:var(--card);border:.5px solid var(--line2);border-radius:18px;box-shadow:var(--shadow-1);margin-bottom:10px;overflow:hidden}
.lsec-h{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;text-align:left}
.lsec-badge{width:36px;height:36px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;letter-spacing:-.02em}
.lsec-badge.s-ha{background:var(--green)}
.lsec-badge.s-jung{background:var(--tint)}
.lsec-badge.s-sang{background:var(--red)}
.lsec-badge.s-extra{background:var(--purple,#7A4DD8);font-size:9px;line-height:1.15;flex-direction:column;text-align:center;letter-spacing:-.04em;padding:2px}
.lsec-t{flex:1;min-width:0}
.lsec-t b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.lsec-t span{display:block;font-size:11.5px;color:var(--sub);font-weight:600;margin-top:2px}
.lsec-pct{font-size:13px;font-weight:800;color:var(--sub);font-variant-numeric:tabular-nums;flex-shrink:0}
.lsec-ar{color:var(--sub2);flex-shrink:0;transition:transform .22s var(--ease);display:flex}
.lsec.open .lsec-ar{transform:rotate(180deg)}
.lsec-body{padding:0 14px 8px}
.lsec-body[hidden]{display:none}

/* ---------- 편입 캘린더: 접수 기간 연속 막대 + 주간 확대(줌) ---------- */
.cal-week{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.cal-week .cal-cell{align-items:stretch;padding:2px 2px 3px}
.cal-week .dnum{margin:0 auto}
.cal-bar{position:absolute;height:14px;border-radius:7px;color:#fff;font-size:8.5px;font-weight:800;
  padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:14px;z-index:3;
  box-shadow:0 1px 3px rgba(0,0,0,.14)}
.cal-bar.cl{border-top-left-radius:2px;border-bottom-left-radius:2px}
.cal-bar.cr{border-top-right-radius:2px;border-bottom-right-radius:2px}
.cal-morep{position:absolute;right:2px;font-size:9px;font-weight:800;color:var(--tint);background:var(--tint-soft);
  border-radius:6px;padding:1px 5px;z-index:4}
/* 주간 확대 */
.zdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:10px}
.zday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:10px}
.zday .zdow{font-size:10.5px;font-weight:700;color:var(--sub2)}
.zday .zdow.sun{color:var(--red);opacity:.85}
.zday .zdnum{font-size:14px;font-weight:700;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-variant-numeric:tabular-nums}
.zday.today .zdnum{background:var(--tint);color:#fff;font-weight:800}
.zday.sel{background:var(--tint-soft)}
.zgantt{position:relative;padding:2px 0}
.zgrid{position:absolute;inset:0;left:96px;display:grid;grid-template-columns:repeat(7,1fr);pointer-events:none}
.zgrid i{border-left:.5px dashed var(--line2)}
.zrow{display:flex;align-items:center;gap:8px;margin-bottom:7px;position:relative;z-index:1}
.zsch{display:flex;align-items:center;gap:6px;width:88px;flex-shrink:0;text-align:left}
.zsch span{font-size:11.5px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ztrack{position:relative;flex:1;height:22px}
.zbar{position:absolute;top:0;height:22px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;
  padding:0 6px;box-shadow:0 1px 4px rgba(0,0,0,.16);min-width:22px}
.zbar span{font-size:9.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zbar.cl{border-top-left-radius:3px;border-bottom-left-radius:3px}
.zbar.cr{border-top-right-radius:3px;border-bottom-right-radius:3px}

/* ---------- 학교 상세: 전형별(일반·학사) 경쟁률 타일 ---------- */
.vsplit{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.vs-tile{background:var(--card2);border-radius:14px;padding:13px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vs-l{font-size:12px;font-weight:700;color:var(--sub)}
.vs-r{font-size:22px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vs-s{font-size:11.5px;font-weight:600;color:var(--sub2)}

/* ---------- 요약: 2025 폴백 경고 ---------- */
.fallback-note{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--orange) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--orange) 30%,transparent);border-radius:14px;padding:12px 14px;margin:12px 0 2px;color:var(--orange)}
.fallback-note b{display:block;font-size:13px;letter-spacing:-.02em;color:var(--orange)}
.fallback-note span{display:block;font-size:12px;font-weight:500;margin-top:3px;color:var(--sub);line-height:1.5}

/* ---------- 홈: 스트릭 히어로(디데이 카드급) ---------- */
.streak-card{display:block;width:100%;text-align:left;border-radius:20px;padding:16px 17px 14px;margin-bottom:12px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#FF9500 0%,#FF6B00 55%,#E8570A 100%);color:#fff;box-shadow:0 6px 20px rgba(255,199,0,.28);cursor:pointer}
.streak-card:not(.lit){background:linear-gradient(135deg,#3A4152 0%,#282E3A 100%);box-shadow:0 6px 18px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.06)}
.streak-card .sk-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.streak-card .sk-label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800;opacity:.95}
.streak-card .sk-go{display:flex;align-items:center;gap:2px;font-size:12px;font-weight:700;opacity:.85}
.streak-card .sk-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.streak-card .sk-num{font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;flex-shrink:0}
.streak-card .sk-num small{font-size:15px;font-weight:800;letter-spacing:-.02em;margin-left:4px}
.streak-card .sk-days{display:flex;justify-content:space-between;gap:4px;margin-top:13px}
.streak-card .sk-d{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.streak-card .sk-d i{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.streak-card .sk-d.done i{background:#fff;color:#FF7A00}
.streak-card .sk-d span{font-size:9px;font-weight:700;opacity:.85}
.streak-card .sk-sub{font-size:12.5px;font-weight:600;opacity:.92;margin-top:9px}
/* 스트릭 3상태 히어로 + 불꽃 티어 + 자정 위험 카운트다운 + 마일스톤 */
.streak-card .sk-main{align-items:center}
.streak-card .sk-flame{display:inline-flex;flex-shrink:0;line-height:0}
.streak-card .sk-numwrap{flex:1;min-width:0}
.streak-card .sk-count{font-size:13px;font-weight:800;margin-top:5px;letter-spacing:-.01em}
.streak-card .sk-cta{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:13px;padding:12px;font-size:14.5px;font-weight:800;background:#fff;color:#E5484D;box-shadow:0 3px 10px rgba(0,0,0,.14)}
.streak-card .sk-freeze{font-size:11.5px;font-weight:600;opacity:.9;margin-top:9px;line-height:1.5}
.streak-card .sk-chips,.streak-card .sk-chip{display:inline-flex;align-items:center;gap:4px}
.streak-card .sk-chip{font-size:11px;font-weight:800;background:rgba(255,255,255,.22);padding:4px 9px;border-radius:999px}
.streak-card .sk-chip.gold{background:rgba(255,255,255,.92);color:#B26A00}
/* 위험 상태: 붉은 손실 경보 */
.streak-card.risk{background:linear-gradient(135deg,#F0464B 0%,#D5363B 100%);box-shadow:0 8px 22px rgba(229,72,77,.34)}
.streak-card.risk.urgent{animation:skPulse 1.6s ease-in-out infinite}
@keyframes skPulse{0%,100%{box-shadow:0 8px 22px rgba(229,72,77,.34)}50%{box-shadow:0 8px 30px rgba(229,72,77,.62)}}
.streak-card.risk.urgent .sk-flame{animation:skShake 1.1s ease-in-out infinite}
@keyframes skShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
/* 시작 상태: 중립 */
.streak-card.start{background:linear-gradient(135deg,#4A5162 0%,#333A48 100%)}
/* 불꽃 티어(연속일수가 커질수록 색·광채 진화) — 어두운 카드 위 흰 불꽃 + 티어별 광채 */
.streak-card .sk-flame{color:#fff}
.streak-card .sk-flame.fl-t0{color:rgba(255,255,255,.45)}
.streak-card .sk-flame.fl-t3{filter:drop-shadow(0 0 7px rgba(255,220,150,.7))}
.streak-card .sk-flame.fl-t4{filter:drop-shadow(0 0 9px rgba(150,190,255,.85))}
.streak-card .sk-flame.fl-t5,.streak-card .sk-flame.fl-t6{filter:drop-shadow(0 0 11px rgba(255,225,120,.95))}
/* 학습 탭 불꽃 스탯: 티어 색상(어두운 헤더 위) + 위험/최고 라벨 */
.lh-flame .sk-flame{margin-bottom:2px}
.lh-flame .fl-t0{color:rgba(255,255,255,.45)}
.lh-flame .fl-t1{color:#FFD9B0}.lh-flame .fl-t2{color:#FFC078}
.lh-flame .fl-t3{color:#FFB86B;filter:drop-shadow(0 0 6px rgba(255,160,60,.55))}
.lh-flame .fl-t4{color:#8FB8FF;filter:drop-shadow(0 0 6px rgba(120,170,255,.6))}
.lh-flame .fl-t5,.lh-flame .fl-t6{color:#FFE06B;filter:drop-shadow(0 0 7px rgba(255,215,90,.7))}
.lh-risk{color:#FFD1D1;font-weight:800}
.learn-head .lh-stat span.lh-best{display:inline-block;font-size:10.5px;font-weight:800;opacity:.9;margin-top:1px}
.lh-best.gold{color:#FFE06B;opacity:1}
/* 학습 탭 위험 경보 카드 */
.risk-alert{display:flex;align-items:center;gap:11px;margin:12px 0;padding:13px 14px;border-radius:15px;background:var(--red-soft,rgba(229,72,77,.12));border:1.5px solid var(--red)}
.risk-alert.urgent{animation:skPulse 1.6s ease-in-out infinite}
.risk-alert .ra-ic{width:38px;height:38px;border-radius:11px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.risk-alert.urgent .ra-ic{animation:skShake 1.1s ease-in-out infinite}
.risk-alert .ra-body{flex:1;min-width:0}
.risk-alert .ra-body b{display:block;font-size:14px;color:var(--red);letter-spacing:-.01em}
.risk-alert .ra-count{display:block;font-size:12.5px;color:var(--sub);font-weight:600;margin-top:2px}
.risk-alert .ra-cta{flex-shrink:0;background:var(--red);color:#fff;font-size:13px;font-weight:800;padding:9px 13px;border-radius:11px}
.safe-line{display:flex;align-items:center;gap:7px;margin:12px 0;padding:11px 14px;border-radius:13px;background:var(--green-soft,rgba(52,199,89,.12));color:var(--green);font-size:13px;font-weight:700}
/* 마일스톤 진행 바 */

/* 문법 W/E: 밑줄 표시 번호 */
.we-mark{color:var(--tint);font-weight:900}
.gram-q .we-mark{margin-right:1px}
/* W/E 문항: 표시 구간에 실제 밑줄 */
/* skip-ink를 끈 만큼 g·y·p 꼬리와 겹치지 않도록 밑줄을 더 내린다 */
.we-seg{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--tint);text-decoration-skip-ink:none;-webkit-text-decoration-skip:none}

/* ---------- 오답노트 허브 ---------- */
.rv-tab{padding:4px 0}
/* 상태 축(진행 중/극복함/보관) */
.seg.rvsub{margin:2px 0 14px;background:var(--card2,rgba(127,127,127,.1))}
.seg.rvsub button i{font-style:normal;margin-left:5px;font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.rv-cleared-head{display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--green-soft,rgba(52,199,89,.14));margin-bottom:12px}
.rv-cleared-head .rvc-ic{width:38px;height:38px;border-radius:11px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rv-cleared-head b{font-size:14px;display:block;letter-spacing:-.01em}
.rv-cleared-head span{font-size:12px;color:var(--sub);line-height:1.5}
.rw-act{font-size:12px;font-weight:700;color:var(--tint);background:transparent;border-radius:8px;padding:5px 8px;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;white-space:nowrap}
.rw-act.ok{color:var(--green)}
.rw-act.sub{color:var(--sub2);font-weight:600}
.rw-foot{display:flex;gap:6px;margin-top:10px}
.vw-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:.5px solid var(--line2)}
.vw-row>div{flex:1;min-width:0}
.vw-row b{font-size:14px;letter-spacing:-.01em}
.vw-row .vw-m{display:block;font-size:12px;color:var(--sub);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 막대·퍼센트·문항수를 고정 폭 3열로 두어 모든 행의 막대 시작점을 맞춘다 */
.acc-wrap{display:grid;grid-template-columns:74px 40px 44px;align-items:center;gap:7px;flex-shrink:0}
.acc-wrap.none{display:block;width:165px;text-align:right;font-size:11.5px;color:var(--sub2)}
.acc-bar{height:7px;border-radius:4px;background:var(--card2,rgba(127,127,127,.18));overflow:hidden}
.acc-bar i{display:block;height:100%;border-radius:4px}
.acc-wrap b{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.acc-n{font-size:11px;color:var(--sub2);text-align:right;font-variant-numeric:tabular-nums}
.acc-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line,rgba(127,127,127,.12))}
.acc-row:last-child{border-bottom:0}
.acc-row.thin .acc-name,.acc-row.thin .acc-n{opacity:.55}
.acc-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;word-break:keep-all}
.rv-topic-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rv-topic-h b{font-size:13px}
.gram-wrong-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line,rgba(127,127,127,.1))}
.gram-wrong-row .rw-q{flex:1;min-width:0;font-size:12.8px;color:var(--sub);line-height:1.45}
.mini-x{flex-shrink:0;width:26px;height:26px;border-radius:8px;border:0;background:var(--card2,rgba(127,127,127,.14));color:var(--sub);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rd-wrong{border:1px solid var(--line,rgba(127,127,127,.14));border-radius:14px;padding:2px 13px;margin-bottom:8px;background:var(--card)}
.rd-wrong summary{display:flex;align-items:center;gap:8px;padding:11px 0;cursor:pointer;list-style:none}
.rd-wrong summary::-webkit-details-marker{display:none}
.rd-wrong summary .rw-q{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.rd-wrong-body{padding-bottom:11px}
.rd-ans{font-size:13px;margin:5px 0}
.rd-ans b{margin-right:6px}

/* ---------- 약점 학습(개념→적용) ---------- */
.gl-flow{display:flex;flex-direction:column;gap:8px}
.gl-badge{font-size:11px;font-weight:800;color:var(--sub2);letter-spacing:.02em;margin:6px 2px 0}
.gl-learn-btn{display:flex;align-items:center;gap:6px;width:100%;margin-top:10px;padding:10px 12px;border:0;border-radius:11px;
  background:var(--purple-soft,rgba(124,92,255,.13));color:var(--purple,#7C5CFF);font-size:13px;font-weight:800;cursor:pointer}
.gl-learn-btn .pi{color:inherit}
.gl-learn-btn .pi:last-child{margin-left:auto}
.gl-detail{margin-top:10px}
.gl-detail summary{font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;list-style:none;padding:2px 0}
.gl-detail summary::-webkit-details-marker{display:none}
.gl-detail summary::before{content:"▸ ";color:var(--sub2)}
.gl-detail[open] summary::before{content:"▾ "}
/* 학습 세션 화면 */
.gl-step{font-size:11.5px;font-weight:800;color:var(--tint);letter-spacing:.02em;margin-bottom:10px}
.gl-learn{background:var(--card);border:1px solid var(--line,rgba(127,127,127,.14));border-radius:16px;padding:18px 16px;margin-bottom:14px}
.gl-learn .gram-tag{display:inline-flex}
.gl-learn .gram-q{font-size:16px;font-weight:700;line-height:1.5;margin:12px 0}
.gl-ans{font-size:14px;margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--green-soft,rgba(52,199,89,.12))}
.gl-ans b{margin-right:7px}
.gl-learn .gram-exp{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--sub)}

/* ---------- 크레딧: 하트 구매 · 오늘 적립 ---------- */
.ls-buy{border:1px solid var(--line,rgba(127,127,127,.16));border-radius:14px;padding:12px}
.ls-buy-h{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--sub);margin-bottom:9px}
.ls-buy-h .pi{color:var(--gold,#C98A08)}
.ls-buy-h span{margin-left:auto;font-weight:700;color:var(--sub2)}
.ls-buy .btn[disabled]{opacity:.45;pointer-events:none}
.cr-earn{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:14px;background:var(--card);border:1px solid var(--line,rgba(127,127,127,.14));margin-top:11px}
.cr-earn .pi{color:var(--gold,#C98A08);flex-shrink:0}
.cr-earn-b{flex:1;min-width:0}
.cr-earn-t{font-size:13.5px;font-weight:800}
.cr-earn-s{display:block;font-size:11.5px;color:var(--sub);margin-top:2px}
.cr-bar{height:6px;border-radius:4px;background:var(--card2,rgba(127,127,127,.18));overflow:hidden;margin-top:6px}
.cr-bar i{display:block;height:100%;border-radius:4px;background:var(--gold,#C98A08)}

/* ---------- 레벨 테스트 ---------- */
.lt-hero{text-align:center;padding:30px 4px 10px}
.lt-hero .lt-emo{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:22px;background:var(--tint-soft);color:var(--tint)}
.lt-hero h2{font-size:23px;font-weight:900;letter-spacing:-.035em;margin-top:14px}
.lt-hero p{color:var(--sub);font-size:14px;font-weight:500;margin-top:7px;line-height:1.55;max-width:34em;margin-left:auto;margin-right:auto}
.lt-facts{padding:6px 16px;margin-top:16px}
.lt-fact{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:.5px solid var(--line2)}
.lt-fact:last-child{border-bottom:0}
.lt-fact .lf-ic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--tint-soft);color:var(--tint);margin-top:1px}
.lt-fact>span:last-child{flex:1;min-width:0}
.lt-fact b{display:block;font-size:14px;font-weight:800;letter-spacing:-.015em}
.lt-fact em{display:block;font-style:normal;font-size:12.5px;color:var(--sub);margin-top:2px;line-height:1.45}
.lt-dunno{color:var(--sub)}
/* 레이아웃·타이포는 .review-card를 그대로 쓰고(다른 배너와 같은 모양) 여기서는 강조만 얹는다 */
.lt-card{border:1px solid var(--tint);background:var(--tint-soft)}
.lt-est{text-align:center;padding:22px 16px 18px}
.lt-est .le-num{display:block;font-size:40px;font-weight:900;letter-spacing:-.04em;color:var(--tint);font-variant-numeric:tabular-nums}
.lt-est .le-lab{display:block;font-size:12.5px;color:var(--sub);font-weight:600;margin-top:4px}
.lt-est .le-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:14px}
.lt-est .le-bar i{display:block;height:100%;border-radius:99px;background:var(--tint);transition:width 1.1s var(--ease)}
.lt-sec{font-style:normal;font-size:11px;font-weight:700;color:var(--sub2);margin-left:4px}
.lt-again{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;padding:12px;border-radius:14px;background:var(--card2);color:var(--sub);font-size:12.5px;font-weight:700}
/* 결과 막대는 HTML에 최종 폭으로 그려 두고, 커지는 연출만 얹는다(값은 항상 정확) */
@keyframes ltGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#lt-wrap .wgrow i,#lt-wrap .le-bar i{transform-origin:left center;animation:ltGrow .9s var(--ease) both}

/* ---------- 시즌 시작일 (D-day 시트) ---------- */
.ss-block{margin-top:16px;padding-top:14px;border-top:.5px solid var(--line2)}
.ss-block>b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em}
.ss-block>p{font-size:12.5px;color:var(--sub);margin-top:4px;line-height:1.5}
.ss-block .input{margin-top:10px}
.ss-reset{display:block;width:100%;margin-top:9px;padding:11px;border-radius:13px;background:var(--card2);color:var(--sub);font-size:12.5px;font-weight:700}