/* 학생 화면 — 휴대폰 앱 디자인 */
body.m {
  --brand: #1b3fc4;
  --brand-deep: #0f2580;
  --brand-glow: #4d7cff;
  --accent: #ffd23f;
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  background: #eef1f8;
  min-height: 100dvh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  letter-spacing: -0.2px;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
}
body.m button, body.m label { -webkit-user-select: none; user-select: none; }
body.m .hidden { display: none !important; }

/* 브랜드 글자 */
.brand-mark { font-weight: 900; font-size: 44px; letter-spacing: -2px; color: #fff; line-height: 1; }
.brand-mark.sm { font-size: 24px; letter-spacing: -1px; }
.brand-sub { color: rgba(255, 255, 255, .78); font-weight: 600; margin-top: 8px; letter-spacing: 1px; }

/* ---------- 처음 화면 ---------- */
.join { min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(165deg, var(--brand-glow) 0%, var(--brand) 42%, var(--brand-deep) 100%); }
.join-hero { padding: calc(56px + env(safe-area-inset-top)) 28px 34px; text-align: left; }
.join-lead { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.45; margin: 28px 0 0; }
.join-card { flex: 1; background: #fff; border-radius: 28px 28px 0 0; padding: 26px 22px calc(28px + env(safe-area-inset-bottom)); }
.join-card label { font-weight: 700; color: var(--ink); font-size: 14px; margin: 18px 0 8px; }
.join-card label:first-child { margin-top: 0; }
.join-card input { font-size: 17px; padding: 14px 16px; border-radius: 14px; background: #f5f7fb; border-color: transparent; }
.join-card input:focus { outline: 2px solid var(--brand); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { background: #f2f4f8; color: #475467; border: 1.5px solid transparent; border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 15px; }
.chips button.on { background: #e8eeff; color: var(--brand); border-color: var(--brand); }
.cta { width: 100%; margin-top: 26px; padding: 17px; font-size: 17px; border-radius: 16px; background: var(--brand); box-shadow: 0 10px 24px -10px rgba(27, 63, 196, .7); }
.fine { font-size: 12.5px; color: var(--muted); margin: 12px 2px 0; line-height: 1.5; }

/* ---------- 홈 ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 90% 0%, rgba(120, 160, 255, .55) 0%, transparent 60%), linear-gradient(170deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff; padding: calc(16px + env(safe-area-inset-top)) 22px 34px; border-radius: 0 0 30px 30px;
}
.hero::after { /* 공책 격자 무늬 */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 22px 22px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero > * { position: relative; z-index: 1; }
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.who-chip { background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); }
.hello { font-size: 26px; font-weight: 800; letter-spacing: -1px; margin: 26px 0 4px; line-height: 1.3; }
.hello-sub { margin: 0; color: rgba(255, 255, 255, .8); font-size: 16px; }

.shoot-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 30px; gap: 14px; }
.shutter {
  width: 168px; height: 168px; border-radius: 50%; margin: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: var(--brand); font-size: 17px; font-weight: 800;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .14), 0 0 0 22px rgba(255, 255, 255, .07), 0 18px 40px -12px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.shutter:active { transform: scale(.95); }
.shutter svg { color: var(--brand); }
.album { margin: 0; color: #fff; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); cursor: pointer; }

.sheet { padding: 18px 16px 8px; max-width: 720px; margin: 0 auto; }
.sheet .card { border-radius: 20px; border: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .12); }

.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 18px; }
.tip { background: #fff; border-radius: 16px; padding: 12px 10px; font-size: 13px; line-height: 1.4; color: #475467; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.tip span { display: block; color: var(--brand); font-weight: 800; margin-bottom: 4px; }

.recent-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 8px; }
.recent-head h3 { margin: 0; font-size: 16px; }
button.link { background: none; color: var(--brand); padding: 4px; font-size: 14px; }
.recent { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.recent .ri { flex: 0 0 132px; scroll-snap-align: start; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); cursor: pointer; }
.recent .ri img { width: 100%; height: 92px; object-fit: cover; display: block; background: #f2f4f8; }
.recent .ri div { padding: 8px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.install { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 14px 14px 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); border: 1.5px solid #dbe4ff; }
.install > div { flex: 1; }
.install .fine { margin: 2px 0 0; }
.install .x { background: none; color: var(--muted); padding: 6px; }

/* 풀이 카드 안 */
body.m .photo { border-radius: 14px; border: 0; background: #f2f4f8; }
body.m .sol-answer { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); border-radius: 16px; font-size: 20px; }
body.m .fb button { padding: 15px; border-radius: 14px; }
body.m .notice { border-radius: 14px; }

/* 윗줄(기록·오답노트) */
header.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 20px 12px; background: rgba(238, 241, 248, .9); backdrop-filter: blur(12px); }
header.bar h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.8px; }
body.m .list-item { background: #fff; border-radius: 16px; padding: 10px; margin-bottom: 8px; border: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
body.m .thumb { border-radius: 12px; border: 0; width: 72px; height: 72px; }

/* 아래 고정 메뉴 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px);
  border-top: 1px solid #e4e7ec; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button { background: none; color: #98a2b3; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 6px 0; border-radius: 12px; }
.tabbar button svg { width: 24px; height: 24px; }
.tabbar button.on { color: var(--brand); }

@media (min-width: 760px) {
  .hero { border-radius: 0 0 36px 36px; }
  .hero > * { max-width: 688px; margin-left: auto; margin-right: auto; }
  .join { align-items: center; }
  .join-hero, .join-card { width: 100%; max-width: 480px; }
  .join-card { border-radius: 28px; margin-bottom: 40px; }
}
@media print {
  body.m { background: #fff; padding: 0; }
  .hero, .tabbar, header.bar { display: none !important; }
}

/* 학생 / 선생님 고르기 */
.role { display: grid; grid-template-columns: 1fr 1fr; background: #f2f4f8; border-radius: 14px; padding: 4px; margin-bottom: 22px; }
.role button { background: none; color: #667085; font-size: 16px; font-weight: 700; padding: 12px; border-radius: 11px; }
.role button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
#teacherBox label { margin-top: 0; }

/* ================= 화려하게 (09-28) ================= */
.brand-mark { font-family: "Black Han Sans", "Pretendard Variable", sans-serif; font-weight: 400; letter-spacing: 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #ffe27a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(8, 20, 90, .35)); }
.join .brand-mark { font-size: 64px; }
.brand-mark.sm { font-size: 28px; }
.logo-row { display: flex; align-items: flex-start; gap: 4px; }
.logo-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin-top: 6px; box-shadow: 0 0 0 6px rgba(255, 210, 63, .25), 0 0 18px rgba(255, 210, 63, .9); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.25); box-shadow: 0 0 0 10px rgba(255, 210, 63, .12), 0 0 26px rgba(255, 210, 63, 1); } }

.fx-host { position: relative; overflow: hidden; }
.fx-host > *:not(.mathfx) { position: relative; z-index: 1; }
.mathfx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mathfx span { position: absolute; color: #fff; font-family: "Times New Roman", "KaTeX_Main", serif; font-style: italic; opacity: .16; animation: floaty linear infinite; white-space: nowrap; }
.mathfx span.b { opacity: .28; color: #ffe27a; }
@keyframes floaty { 0% { transform: translateY(20px) rotate(-8deg); } 50% { transform: translateY(-18px) rotate(8deg); } 100% { transform: translateY(20px) rotate(-8deg); } }

.event-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: #3b2a00;
  padding: 8px 14px; border-radius: 999px; margin-bottom: 18px;
  background: linear-gradient(100deg, #ffd23f 0%, #fff1a8 25%, #ffb627 50%, #fff1a8 75%, #ffd23f 100%); background-size: 200% 100%;
  animation: shine 3s linear infinite; box-shadow: 0 6px 18px -6px rgba(255, 180, 20, .8); }
.event-pill.sm { font-size: 13px; padding: 6px 12px; margin: 18px 0 0; }
@keyframes shine { to { background-position: -200% 0; } }
.spark { display: inline-block; animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle { 50% { transform: rotate(14deg) scale(1.2); } }

.hl-sun { color: #ffe27a; font-weight: 800; }
.hl-mark { background: linear-gradient(180deg, transparent 55%, rgba(255, 90, 140, .75) 55%); padding: 0 2px; }
.join-lead { font-size: 23px; }

.cheer { margin-top: 26px; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px -12px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.cheer-stars { color: #ffd23f; letter-spacing: 6px; font-size: 13px; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .35; } }
.cheer-main { font-family: "Jua", "Pretendard Variable", sans-serif; color: #fff; font-size: 21px; line-height: 1.45; margin-top: 6px; }
.cheer-main b { color: #ff7aa8; font-weight: 400; font-size: 1.2em; text-shadow: 0 0 14px rgba(255, 122, 168, .7); }
.cheer-sub { color: rgba(255, 255, 255, .85); font-size: 14px; margin-top: 6px; font-weight: 600; }

.join { background: radial-gradient(90% 60% at 100% 0%, rgba(255, 122, 200, .35) 0%, transparent 60%), radial-gradient(80% 50% at 0% 30%, rgba(90, 220, 255, .28) 0%, transparent 60%), linear-gradient(165deg, var(--brand-glow) 0%, var(--brand) 42%, var(--brand-deep) 100%); }
.hero { background: radial-gradient(90% 70% at 100% 0%, rgba(255, 122, 200, .35) 0%, transparent 60%), radial-gradient(70% 60% at 0% 60%, rgba(90, 220, 255, .25) 0%, transparent 60%), linear-gradient(170deg, var(--brand) 0%, var(--brand-deep) 100%); }
.hero::after { z-index: 0; }
.hello { font-family: "Jua", "Pretendard Variable", sans-serif; font-weight: 400; font-size: 28px; letter-spacing: -0.5px; margin-top: 12px; }
.shutter { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5ff 60%, #dfe8ff 100%); }
.shutter span { font-family: "Jua", sans-serif; font-weight: 400; font-size: 19px; }

@media (prefers-reduced-motion: reduce) {
  .mathfx span, .event-pill, .spark, .logo-dot, .cheer-stars { animation: none !important; }
}

/* ================= 타일 홈 (09-28) ================= */
body.m.home-dark { background: #0b1024; }
.metro-top { display: flex; justify-content: space-between; align-items: flex-start; padding: calc(18px + env(safe-area-inset-top)) 16px 14px; color: #fff; }
.mt-title { font-family: "Pretendard Variable", sans-serif; font-weight: 200; font-size: 58px; letter-spacing: -2px; line-height: 1; }
.mt-hello { font-weight: 300; font-size: 17px; color: rgba(255,255,255,.85); margin-top: 8px; }
.mt-who { background: none; color: rgba(255,255,255,.55); font-size: 13px; padding: 4px 0; font-weight: 500; }
.mt-count { width: 96px; height: 96px; background: #12a150; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 10px; flex: none; }
.mt-count b { font-size: 40px; font-weight: 700; line-height: 1; }
.mt-count span { font-size: 11.5px; font-weight: 700; line-height: 1.25; margin-top: 2px; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 108px; gap: 8px; padding: 0 16px; max-width: 720px; margin: 0 auto; }
.tile { position: relative; overflow: hidden; margin: 0; border: 0; border-radius: 0; color: #fff; cursor: pointer; display: block; padding: 0; text-align: left; font: inherit;
  transition: transform .12s ease; background-size: cover; background-position: center; }
.tile:active { transform: scale(.96); }
.tile.wide { grid-column: span 2; }
.tile.tall { grid-row: span 2; }
.t-label { position: absolute; left: 10px; bottom: 8px; font-size: 16px; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,.35); z-index: 2; }
.t-label.big { font-size: 22px; font-weight: 700; }
.t-label small { font-size: 10.5px; letter-spacing: 2px; opacity: .8; font-weight: 700; }
.t-ico { position: absolute; right: 14px; top: 12px; width: 58px; height: 58px; opacity: .95; z-index: 2; }
.t-ico.sm { width: 36px; height: 36px; right: 10px; top: 10px; }
.t-num { position: absolute; left: 10px; top: 6px; font-size: 54px; font-weight: 200; line-height: 1; }
.t-emoji { position: absolute; right: 10px; top: 8px; font-size: 30px; animation: wiggle 1.4s ease-in-out infinite; }

.t-cam { background: radial-gradient(90% 90% at 100% 0%, rgba(255,122,200,.45) 0%, transparent 60%), linear-gradient(135deg, #3d6bff 0%, #1b3fc4 55%, #0f2580 100%); grid-row: span 2; }
.t-cam .mathfx span { font-size: 18px !important; }
.t-album { background: #e8447d; }
.t-hist { background: #2a3150 linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%); }
.t-hist.has-img { background-image: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.7) 100%), var(--img); }
.t-odap { background: #f2a60d; }
.t-cheer { background: #7a3cff; }
.t-cheer b { color: #ffe27a; }
.t-tip { background: #1d2440; display: flex; align-items: center; padding: 10px 12px; cursor: default; }
.t-tipline { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); }
.t-tipline b { color: #ffd23f; margin: 0 2px 0 6px; }
.t-tipline b:first-child { margin-left: 0; }

body.m.home-dark .sheet { color: var(--ink); }
body.m.home-dark .recent-head h3 { color: #fff; }
body.m.home-dark .install { background: #151b35; border-color: #2a3560; color: #fff; }
body.m.home-dark .install .fine { color: rgba(255,255,255,.6); }
body.m.home-dark #noKey { margin: 0 0 12px; }
@media (min-width: 760px) { .tiles { grid-auto-rows: 150px; } .metro-top { max-width: 720px; margin: 0 auto; } }
.tile.fx-host > .t-ico, .tile.fx-host > .t-label { position: absolute; }
.t-cam .t-ico { right: 16px; top: auto; bottom: 16px; width: 72px; height: 72px; }
.t-cam .t-label.big { left: 12px; top: 12px; bottom: auto; font-size: 26px; }
body.m.home-dark .tabbar { background: rgba(11, 16, 36, .92); border-top-color: #1d2440; }
body.m.home-dark .tabbar button { color: #6b7493; }
body.m.home-dark .tabbar button.on { color: #fff; }

/* ================= 지점·학년 색 구분 (09-28) ================= */
.c-blue   { --c: #1f5eff; --cb: #e7eeff; }
.c-green  { --c: #12a150; --cb: #e3f7ec; }
.c-purple { --c: #7a3cff; --cb: #efe7ff; }
.c-pink   { --c: #e8447d; --cb: #fde8f0; }
.c-orange { --c: #f08a00; --cb: #fff2de; }
.c-teal   { --c: #0e9aa7; --cb: #e0f6f7; }
.chips button[class*="c-"] { background: var(--cb); color: var(--c); border: 1.5px solid transparent; }
.chips button[class*="c-"].on { background: var(--c); color: #fff; border-color: var(--c); box-shadow: 0 6px 14px -6px var(--c); }
.grades { flex-direction: column; gap: 8px; }
.grade-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grade-tag { font-size: 12px; font-weight: 800; color: var(--c); width: 34px; flex: none; }
.grades button { padding: 8px 12px; font-size: 14.5px; min-width: 46px; }
.grades .c-green.lv4, .grades .c-green.lv5, .grades .c-green.lv6 { --cb: #d3f1e0; }
.grades .c-orange.lv3 { --cb: #ffe9c7; }
.grades .c-blue.lv3 { --cb: #d9e4ff; }
#jCodeBox label { margin-top: 18px; }
.grade-row { display: grid; grid-template-columns: 34px repeat(6, 1fr); gap: 5px; }
.grades button { min-width: 0; padding: 8px 0; text-align: center; justify-content: center; font-size: 14px; }

/* ================= 선생님 응원 댓글 (09-28) ================= */
.cheer-feed { margin-top: 14px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); padding: 10px 12px 12px; }
.cf-head { color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.cf-window { height: 132px; overflow: hidden; mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.cf-track { display: flex; flex-direction: column; gap: 8px; animation: cfscroll var(--dur, 20s) linear infinite; }
.cf-track:hover { animation-play-state: paused; }
@keyframes cfscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.cf-item { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); border-radius: 14px 14px 14px 4px; padding: 8px 12px; color: #fff; font-size: 14.5px; line-height: 1.45; align-self: flex-start; max-width: 92%; }
.cf-item b { color: #ffe27a; font-weight: 800; margin-right: 6px; font-size: 13px; }
.cheer-strip { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); color: #fff; max-width: 688px; }
@media (min-width: 760px) { .cheer-strip { margin-left: auto; margin-right: auto; } }
.cs-text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s ease; }
.cs-text b { color: #ffe27a; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .cf-track { animation: none; } }

/* ================= 고수 광장 (09-28) ================= */
.post { background: #fff; border-radius: 20px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(16,24,40,.18); }
.post-head { display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; }
.post-name { font-weight: 800; }
.post-title { display: inline-block; font-size: 11px; font-weight: 800; color: #b54708; background: #fff4e5; border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.post-meta { font-size: 12px; color: var(--muted); }
.post-to { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--brand); background: #e8eeff; border-radius: 999px; padding: 2px 8px; margin-top: 10px; }
.post-text { margin: 8px 0 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; }
.reacts { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.reacts button { background: #f2f4f8; color: #344054; border: 1.5px solid transparent; border-radius: 999px; padding: 6px 11px; font-size: 14px; font-weight: 700; }
.reacts button.on { background: #fff0f5; border-color: #e8447d; color: #c11c5a; }
.reacts button .n { margin-left: 3px; font-variant-numeric: tabular-nums; }
.cf-item .t { display: inline-block; font-size: 10.5px; font-weight: 800; color: #3b2a00; background: #ffd23f; border-radius: 5px; padding: 0 5px; margin-right: 5px; vertical-align: 1px; }

/* ================= 학생 비밀번호 (09-28) ================= */
.pin-step { margin-top: 6px; padding: 14px; border-radius: 16px; background: rgba(47, 123, 255, .08); border: 1px solid rgba(47, 123, 255, .35); }
.pin-step label:first-child { margin-top: 0; }
.pin-input { font-size: 28px !important; letter-spacing: 18px; text-align: center; font-weight: 800; padding: 12px 0 12px 18px !important; }

/* ================= 로고: 처음처럼 굵은 고딕 (09-28 원장님) ================= */
.brand-mark { font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif !important; font-weight: 900 !important; letter-spacing: -2px;
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; -webkit-text-fill-color: #fff; filter: none; }
.join .brand-mark { font-size: 60px; }

/* ================= 홈: 남색→보라 바탕 + 응원 댓글 창 (09-28) ================= */
body.m.home-dark {
  background: radial-gradient(120% 60% at 0% 0%, #243a9e 0%, rgba(36,58,158,0) 55%),
              radial-gradient(90% 55% at 100% 45%, #5b2a9e 0%, rgba(91,42,158,0) 60%),
              radial-gradient(100% 50% at 20% 100%, #0f5f8f 0%, rgba(15,95,143,0) 60%),
              #141b45;
  background-attachment: fixed;
}
body.m.home-dark .tabbar { background: rgba(20, 27, 69, .9); border-top-color: rgba(255,255,255,.1); }
body.m.home-dark .tabbar button { color: #9aa4cc; }
.t-tip { background: rgba(255,255,255,.1); }
.t-hist { background-color: rgba(255,255,255,.12); }
body.m.home-dark .install { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.home-feed { margin: 0 16px 12px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); padding: 10px 12px 12px; max-width: 688px; }
@media (min-width: 760px) { .home-feed { margin-left: auto; margin-right: auto; } }
.cf-window.sm { height: 104px; }

/* ================= 와글와글 (09-28) ================= */
.row-between { display: flex; align-items: center; justify-content: space-between; }
.write-btn { background: rgba(255,255,255,.18); color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
.cf-item.stu { background: rgba(120, 200, 255, .12); border-color: rgba(120, 200, 255, .25); border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.cf-item.stu b { color: #8fd3ff; }
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(5, 8, 25, .55); display: flex; align-items: flex-end; }
.wsheet { width: 100%; background: #fff; border-radius: 22px 22px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }
.wsheet-head { display: flex; justify-content: space-between; align-items: center; font-size: 18px; margin-bottom: 6px; }
.wsheet .x { background: none; color: var(--muted); padding: 4px 8px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.quick button { background: #eef2ff; color: #1b3fc4; border-radius: 999px; padding: 9px 13px; font-size: 14.5px; }
.qrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; }
.qrow select { width: auto; padding: 8px 10px; }
.qrow.free input { flex: 1; }
.qrow button { flex: none; }

button.mt-count { border: 0; text-align: left; cursor: pointer; font: inherit; }
button.mt-count:active { transform: scale(.96); }
.seg { display: flex; background: #e6e9f2; border-radius: 10px; padding: 3px; }
.seg button { background: none; color: #667085; font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.seg button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.1); }

/* ================= 홈 제목 굵게 + 빛나는 핸드폰 (09-28) ================= */
.mt-title { font-weight: 600; }
.metro-top > div:first-child { min-width: 0; }
.mt-right { display: flex; align-items: flex-start; gap: 12px; flex: none; }
.glow-phone { position: relative; width: 58px; height: 108px; border-radius: 15px; padding: 2.5px; margin-top: 2px;
  background: conic-gradient(from 0deg, #ff4fd8, #7a5cff, #2fc6ff, #4dffb5, #ffd23f, #ff7a45, #ff4fd8);
  box-shadow: 0 0 18px rgba(160, 110, 255, .55), 0 0 34px rgba(47, 198, 255, .25);
  animation: phoneglow 4s linear infinite; transform: rotate(8deg); }
@keyframes phoneglow { to { filter: hue-rotate(360deg); } }
.gp-screen { position: relative; width: 100%; height: 100%; border-radius: 12.5px; overflow: hidden;
  background: radial-gradient(80% 60% at 30% 20%, #3a2f5c 0%, #15122b 60%), #0e0c1d; color: #fff; }
.gp-notch { position: absolute; top: 4px; left: 50%; width: 16px; height: 4px; margin-left: -8px; border-radius: 3px; background: #000; }
.gp-q { position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-size: 8.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.2px; }
.gp-q span { font-size: 7px; font-weight: 500; opacity: .75; }
.gp-scan { position: absolute; left: 4px; right: 4px; height: 2px; top: 20px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #4dffb5, transparent); box-shadow: 0 0 8px #4dffb5; animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 0% { top: 18px; opacity: 1; } 45% { top: 50px; opacity: 1; } 55% { opacity: 0; } 100% { top: 50px; opacity: 0; } }
.gp-done { position: absolute; left: 6px; right: 6px; bottom: 12px; text-align: center; font-size: 7.5px; font-weight: 800; color: #4dffb5; line-height: 1.3;
  background: rgba(77, 255, 181, .12); border-radius: 6px; padding: 3px 0; opacity: 0; animation: done 3.2s ease-in-out infinite; }
.gp-done b { color: #fff; font-size: 12px; }
@keyframes done { 0%, 50% { opacity: 0; transform: translateY(4px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 360px) { .glow-phone { display: none; } }
@media (prefers-reduced-motion: reduce) { .glow-phone, .gp-scan, .gp-done { animation: none; } .gp-done { opacity: 1; } }

/* ================= 실물 같은 핸드폰 (09-28) ================= */
.glow-phone { display: none; }
.real-phone { flex: none; transform: rotate(9deg); margin: -4px 2px 0 0; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(120,140,255,.25)); }
.real-phone svg { display: block; }
.rp-scan { animation: rpscan 3.4s ease-in-out infinite; filter: drop-shadow(0 0 4px #4dffb5); }
@keyframes rpscan { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(118px); opacity: 1; } 52%, 100% { transform: translateY(118px); opacity: 0; } }
.rp-focus { animation: rpfocus 3.4s ease-in-out infinite; transform-origin: 75px 123px; }
@keyframes rpfocus { 0% { transform: scale(1.08); opacity: .5; } 12% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.rp-done { opacity: 0; animation: rpdone 3.4s ease-in-out infinite; }
@keyframes rpdone { 0%, 50% { opacity: 0; transform: translateY(6px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.rp-shutter { animation: rpshut 3.4s ease-in-out infinite; transform-origin: 75px 262px; }
@keyframes rpshut { 0%, 4% { transform: scale(1); } 8% { transform: scale(.8); } 14%, 100% { transform: scale(1); } }
@media (max-width: 360px) { .real-phone { display: none; } }
@media (prefers-reduced-motion: reduce) { .rp-scan, .rp-focus, .rp-done, .rp-shutter { animation: none; } .rp-done { opacity: 1; } }

/* ================= 교재 해설 · 고수포인트 (09-28) ================= */
.bank-src { font-size: 13px; font-weight: 800; color: #1b3fc4; background: #e8eeff; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.bank-src span { display: block; font-weight: 600; color: #5b6b9a; font-size: 11.5px; margin-top: 2px; }
.bank-expl { margin-top: 12px; line-height: 1.75; font-size: 15.5px; overflow-x: auto; }
.bank-expl .efig { display: block; max-width: 100%; margin: 10px auto; border-radius: 8px; background: #fff; }
.notthis { display: block; margin: 12px auto 0; font-size: 13.5px; color: #667085; background: none; }
.nopoint { background: linear-gradient(135deg, #fff7e6, #fff0f5); border: 1.5px solid #ffd0a1; border-radius: 16px; padding: 14px; }
.np-t { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.nopoint p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #475467; }
.np-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.np-have { font-weight: 800; color: #b54708; }
.point-chip { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: #3b2a00; background: #ffd23f; border-radius: 999px; padding: 3px 10px; }

/* ================= 홈: 밝은 하늘색 (09-28 원장님) ================= */
body.m.home-dark {
  background: radial-gradient(90% 45% at 100% 0%, rgba(255, 170, 220, .45) 0%, rgba(255,170,220,0) 60%),
              radial-gradient(80% 40% at 0% 8%, rgba(120, 190, 255, .55) 0%, rgba(120,190,255,0) 60%),
              linear-gradient(180deg, #bfe4ff 0%, #dcf0ff 38%, #eef7ff 70%, #f6fbff 100%);
  background-attachment: fixed;
}
body.m.home-dark .metro-top { color: #0d1b3e; }
body.m.home-dark .mt-title { color: #0d1b3e; }
body.m.home-dark .mt-hello { color: #24345e; }
body.m.home-dark .mt-who { color: #5b6b8c; }
body.m.home-dark .mt-count { box-shadow: 0 10px 22px -10px rgba(0, 140, 70, .7); }
body.m.home-dark .home-feed { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.95); box-shadow: 0 10px 30px -18px rgba(30, 60, 140, .45); }
body.m.home-dark .home-feed .cf-head { color: #1b3fc4; }
body.m.home-dark .home-feed .cf-item { background: #fff; color: #1b2238; border-color: #dfe9ff; box-shadow: 0 2px 6px -3px rgba(30,60,140,.25); }
body.m.home-dark .home-feed .cf-item b { color: #e07000; }
body.m.home-dark .home-feed .cf-item.stu { background: #effaff; border-color: #cdeefc; }
body.m.home-dark .home-feed .cf-item.stu b { color: #0b8aa8; }
body.m.home-dark .write-btn { background: #1b3fc4; color: #fff; border-color: #1b3fc4; }
body.m.home-dark .tile { box-shadow: 0 10px 22px -14px rgba(20, 40, 110, .55); }
body.m.home-dark .t-tip { background: #fff; }
body.m.home-dark .t-tipline { color: #344054; }
body.m.home-dark .t-tipline b { color: #f08a00; }
body.m.home-dark .t-hist { background-color: #9fb8e8; }
body.m.home-dark .install { background: #fff; border-color: #d6e4ff; color: #1b2238; }
body.m.home-dark .install .fine { color: #667085; }
body.m.home-dark .install .x { color: #98a2b3; }
body.m.home-dark .recent-head h3 { color: #0d1b3e; }
body.m.home-dark .tabbar { background: rgba(255,255,255,.92); border-top-color: #dbe6f7; }
body.m.home-dark .tabbar button { color: #8a94ad; }
body.m.home-dark .tabbar button.on { color: #1b3fc4; }
body.m.home-dark .real-phone { filter: drop-shadow(0 12px 16px rgba(20, 40, 110, .35)); }

/* ================= 파스텔 하늘색 (09-28 원장님: 밝게) ================= */
body.m.home-dark {
  background: radial-gradient(70% 35% at 100% 0%, rgba(255, 214, 236, .7) 0%, rgba(255,214,236,0) 70%),
              radial-gradient(70% 35% at 0% 0%, rgba(190, 230, 255, .9) 0%, rgba(190,230,255,0) 70%),
              linear-gradient(180deg, #d4eeff 0%, #e6f5ff 45%, #f3faff 100%);
  background-attachment: fixed;
}
/* 첫 화면도 파스텔 */
.join { background: radial-gradient(80% 40% at 100% 0%, rgba(255, 205, 232, .85) 0%, rgba(255,205,232,0) 70%),
                    radial-gradient(70% 40% at 0% 30%, rgba(180, 225, 255, .9) 0%, rgba(180,225,255,0) 70%),
                    linear-gradient(170deg, #cfeaff 0%, #e4f4ff 50%, #f2f9ff 100%) !important; }
.join .brand-mark { color: #0d1b3e !important; -webkit-text-fill-color: #0d1b3e; }
.join .brand-sub { color: #3d5aa8; }
.join-lead { color: #0d1b3e; }
.join .hl-sun { color: #1b3fc4; }
.join .hl-mark { background: linear-gradient(180deg, transparent 55%, rgba(255, 120, 170, .55) 55%); }
.join .mathfx span { color: #2f6bff; opacity: .16; }
.join .mathfx span.b { color: #ff5fa2; opacity: .3; }
.join .cheer { background: rgba(255,255,255,.7); border-color: #fff; box-shadow: 0 12px 30px -18px rgba(30, 60, 140, .45); }
.join .cheer-main { color: #0d1b3e; }
.join .cheer-main b { color: #ff2d78; text-shadow: none; }
.join .cheer-sub { color: #475467; }
.join .cheer-stars { color: #f5a300; }
.join .cheer-feed { background: rgba(255,255,255,.55); border-color: #fff; }
.join .cf-head { color: #1b3fc4; }
.join .cf-item { background: #fff; color: #1b2238; border-color: #dfe9ff; }
.join .cf-item b { color: #e07000; }
.join .logo-dot { background: #ff5fa2; box-shadow: 0 0 0 6px rgba(255, 95, 162, .2), 0 0 18px rgba(255, 95, 162, .6); }
.join-card { box-shadow: 0 -10px 30px -20px rgba(30, 60, 140, .35); }

.logout-btn { margin-left: auto; margin-right: 10px; font-size: 13px; color: #667085; }

/* 모토: 찍풀 바로 밑에 진하게 */
.mt-motto { font-size: 21px; font-weight: 900; letter-spacing: -0.8px; color: #1b3fc4; margin: 4px 0 10px; }
.mt-motto::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; margin-top: 6px; background: linear-gradient(90deg, #ff5fa2, #ffb020); }
.mt-hello { font-size: 14.5px; margin-top: 0; }

/* ================= 타일 입체감 + 움직임 (09-28, 색은 고정) ================= */
.tile { --c1: #5a8dff; --c2: #2459ff; --c3: #0f33b3; border-radius: 14px; isolation: isolate;
  background: linear-gradient(145deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.16), 0 14px 22px -12px var(--c3), 0 4px 8px -4px rgba(10,20,60,.25) !important;
  transition: transform .12s ease, box-shadow .12s ease; }
.tile:active { transform: translateY(3px) scale(.985); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.16), 0 6px 12px -8px var(--c3) !important; }
/* 윗면 광택 + 지나가는 빛줄기 */
.tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 55%); }
.tile::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg);
  animation: sweep 5.5s ease-in-out infinite; }
@keyframes sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.t-cam::after { animation-delay: .2s; } .t-album::after { animation-delay: 1s; } .t-hist::after { animation-delay: 1.8s; }
.t-odap::after { animation-delay: 2.6s; } .t-cheer::after { animation-delay: 3.4s; } .t-tip::after { display: none; }

.t-cam { --c1: #6f9bff; --c2: #2f63ff; --c3: #1233b8; }
.t-album { --c1: #ff7aa8; --c2: #f0457f; --c3: #b8154f; }
.t-hist { --c1: #b9ccf2; --c2: #93aee6; --c3: #6a86c4; }
.t-hist.has-img { background: linear-gradient(180deg, rgba(0,0,0,.02) 35%, rgba(0,0,0,.62) 100%), var(--img) center/cover !important; }
.t-odap { --c1: #ffc64a; --c2: #f7a400; --c3: #c47a00; }
.t-cheer { --c1: #a36bff; --c2: #7c3cff; --c3: #5218c9; }
.t-tip { --c1: #ffffff; --c2: #ffffff; --c3: #dfe8f7; }
.mt-count { border-radius: 14px; background: linear-gradient(145deg, #3ee08a 0%, #12b35a 50%, #078a42 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.16), 0 14px 22px -12px #078a42 !important; }
.mt-count b { display: inline-block; animation: pop 2.8s ease-in-out infinite; }
@keyframes pop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.22) translateY(-3px); } }
.t-label, .t-ico, .t-num, .t-emoji { z-index: 2; }
.t-label { text-shadow: 0 2px 4px rgba(0,0,0,.28); }

/* 문제 찍기: 숨 쉬는 카메라 + 찰칵 플래시 */
.t-cam .t-ico { animation: breathe 2.4s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
@keyframes breathe { 50% { transform: scale(1.1); } }
.t-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 60% at 75% 75%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%); opacity: 0; animation: flash 4.8s ease-out infinite; }
@keyframes flash { 0%, 90% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 0; } }
/* 앨범: 떠다니기 */
.t-album .t-ico { animation: floaty2 3s ease-in-out infinite; }
@keyframes floaty2 { 50% { transform: translateY(-5px) rotate(-6deg); } }
/* 내 기록: 시계 바늘 */
.clock .hand-m { transform-origin: 12px 12px; animation: spin 4s linear infinite; }
.clock .hand-h { transform-origin: 12px 12px; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.t-hist .t-ico { color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
/* 오답노트: 책장 넘기기 */
.t-odap .book { position: absolute; right: 12px; top: auto; bottom: 44px; width: 46px; height: 46px; }
.book .page { transform-origin: 12px 12px; animation: flip 3.2s ease-in-out infinite; }
@keyframes flip { 0%, 60%, 100% { transform: scaleX(1); } 75% { transform: scaleX(-1) translateX(-3px); } }
.t-num { text-shadow: 0 3px 0 rgba(0,0,0,.15); }
/* 기말고사: 불꽃 일렁 + 불씨 */
.t-cheer .t-emoji { animation: flicker 1.3s ease-in-out infinite; font-size: 34px; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.18) rotate(4deg); } }
.spark { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 6px #ffb020; right: 24px; top: 40px; opacity: 0; animation: ember 2.2s ease-out infinite; }
.spark.s2 { right: 34px; animation-delay: .7s; } .spark.s3 { right: 16px; animation-delay: 1.4s; }
@keyframes ember { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .tile::after, .t-flash, .spark, .t-ico, .t-emoji, .mt-count b, .clock *, .book .page { animation: none !important; } }

.mt-hello { white-space: normal; word-break: keep-all; max-width: 190px; line-height: 1.35; }

/* ================= 고수수학 로고 (09-28) ================= */
.mt-titlerow { display: flex; align-items: center; gap: 8px; }
.mt-emblem { width: 44px; height: auto; filter: drop-shadow(0 3px 4px rgba(26, 92, 255, .25)); }
.gosu-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; background: rgba(255,255,255,.72); border: 1px solid #fff; border-radius: 16px; padding: 8px 14px 8px 8px; width: fit-content; box-shadow: 0 8px 20px -14px rgba(26, 60, 140, .5); }
.gosu-brand img { width: 42px; height: auto; }
.gosu-brand b { display: block; color: #1A5CFF; font-size: 15px; font-weight: 900; letter-spacing: -.3px; }
.gosu-brand span { display: block; color: #0B1B45; font-size: 17px; font-weight: 900; letter-spacing: -.6px; }

/* 고수수학 홈페이지 바로가기 타일 */
.t-home { --c1: #ffffff; --c2: #f3f7ff; --c3: #c9d8f5; color: #0B1B45; text-decoration: none; }
.t-home .t-label { color: #1A5CFF; text-shadow: none; font-weight: 800; font-size: 14.5px; }
.t-home .home-emb { width: 40px; height: auto; right: 10px; top: 10px; animation: floaty2 3.4s ease-in-out infinite; }

/* 마크 + 「빠르게 보단 바르게」 (상자 없이, 색 글씨) */
.slogan { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.slogan img { width: 30px; height: auto; }
.slogan span { font-size: 15px; font-weight: 900; letter-spacing: -.5px;
  background: linear-gradient(90deg, #1A5CFF 0%, #7a3cff 55%, #ff4f9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slogan.big { margin-bottom: 16px; }
.slogan.big img { width: 38px; }
.slogan.big span { font-size: 19px; }

/* 홈페이지 타일 = 카톡 미리보기 남색 마크 */
.t-home { background: #0e2266 url(/brand/home_tile.jpg) center 38% / 118% auto no-repeat !important; --c3: #0b1b45; }
.t-home .t-label { color: #fff; font-size: 12.5px; font-weight: 700; bottom: 6px; left: 0; right: 0; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.t-home::before { background: radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%); }
/* 마크 + 문구 한 줄 정렬 */
.slogan { align-items: center; line-height: 1; }
.slogan img { height: 22px; width: auto; display: block; }
.slogan.big img { height: 28px; }
.slogan span { display: block; line-height: 1; padding-top: 1px; }

.t-home { background: #0e2266 url(/brand/home_tile.jpg) center / cover no-repeat !important; }
.t-go { position: absolute; right: 7px; bottom: 5px; z-index: 2; color: #fff; font-size: 15px; font-weight: 900; opacity: .9; }

/* ================= 타일마다 다른 움직임 (09-28) ================= */
.tile::after { display: none !important; animation: none !important; }
.tiles { perspective: 900px; }
/* 공통: 둥실 떠 있는 기울기 (타일마다 박자 다르게) */
.tile { animation: bob 6s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes bob { 0%, 100% { transform: rotateX(0) rotateY(0) translateY(0); } 50% { transform: rotateX(3deg) rotateY(-4deg) translateY(-3px); } }
.t-album { animation-delay: -1.2s; } .t-hist { animation-delay: -2.4s; } .t-odap { animation-delay: -3.1s; } .t-cheer { animation-delay: -4s; } .t-tip { animation: none; }
.tile:active { animation-play-state: paused; }

/* 문제 찍기: 초점 모서리 조여듦 + 찰칵 */
.vf { position: absolute; inset: 18% 14% 16% 14%; z-index: 2; pointer-events: none; animation: vfzoom 4.8s ease-in-out infinite; }
.vf i { position: absolute; width: 18px; height: 18px; border: 3px solid #ffe27a; }
.vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
@keyframes vfzoom { 0% { transform: scale(1.25); opacity: 0; } 20% { opacity: 1; } 55%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.click-txt { position: absolute; left: 50%; top: 42%; z-index: 4; transform: translate(-50%, -50%) scale(.4); color: #fff; font-weight: 900; font-size: 26px; letter-spacing: -1px;
  text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 16px rgba(255,255,255,.8); opacity: 0; animation: clicktxt 4.8s ease-out infinite; pointer-events: none; }
@keyframes clicktxt { 0%, 89% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-8deg); } 92% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-8deg); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1) rotate(-8deg); } }
.t-cam .t-ico { animation: none; }

/* 앨범: 사진 카드 부채꼴 */
.t-album .t-ico { animation: none; }
.fan { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; z-index: 2; }
.fan i { position: absolute; inset: 3px; border-radius: 6px; background: rgba(255,255,255,.85); box-shadow: 0 2px 4px rgba(0,0,0,.2); transform-origin: 50% 110%; }
.fan i:nth-child(1) { animation: fanL 3.2s ease-in-out infinite; background: #ffd6e5; }
.fan i:nth-child(2) { animation: fanR 3.2s ease-in-out infinite; background: #fff0b8; }
@keyframes fanL { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-24deg) translateX(-4px); } }
@keyframes fanR { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(18deg) translateX(3px); } }
.t-album .t-ico { z-index: 3; }

/* 내 기록: 정각마다 째깍 튕김 */
.t-hist .t-ico { animation: tick 4s steps(1) infinite; }
@keyframes tick { 0%, 96% { transform: scale(1); } 98% { transform: scale(1.25) rotate(-8deg); } }

/* 오답노트: ✔ 하나씩 찍힘 */
.checks { position: absolute; left: 12px; top: 64px; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.checks i { font-style: normal; color: #fff; font-weight: 900; font-size: 15px; opacity: 0; text-shadow: 0 2px 3px rgba(0,0,0,.25); animation: chk 4.5s ease-out infinite; }
.checks i:nth-child(2) { animation-delay: .5s; } .checks i:nth-child(3) { animation-delay: 1s; }
@keyframes chk { 0% { opacity: 0; transform: scale(2.2) rotate(-20deg); } 10% { opacity: 1; transform: scale(1) rotate(0); } 75% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* 기말고사: D-DAY 딱지 */
.dday { position: absolute; left: 8px; top: 8px; z-index: 2; font-size: 10.5px; font-weight: 900; letter-spacing: .5px; color: #7c3cff; background: #fff; border-radius: 6px; padding: 2px 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.2); animation: ddwig 2.6s ease-in-out infinite; transform-origin: 20% 0; }
@keyframes ddwig { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-4deg); } }

/* 홈페이지: 동전처럼 한 바퀴 */
.t-home { animation: coin 7s ease-in-out infinite !important; }
@keyframes coin { 0%, 80% { transform: rotateY(0); } 92% { transform: rotateY(180deg) scale(1.04); } 100% { transform: rotateY(360deg); } }

/* 누르면 색종이 */
.confetti { position: fixed; z-index: 90; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: conf .9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes conf { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tile, .vf, .click-txt, .fan i, .checks i, .dday, .t-home { animation: none !important; } .checks i, .vf { opacity: 1; } }

/* 홈 윗부분 정렬 */
.metro-top { align-items: center; gap: 10px; padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: 16px; }
.metro-top > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.mt-title { line-height: .95; margin: 0; }
.mt-motto { margin: 6px 0 8px; }
.mt-hello { margin: 0 0 8px; }
.point-chip { margin-top: 0; width: fit-content; }
.mt-right { align-items: center; }
.real-phone { margin: 0; }

.tile.fx-host > .vf, .tile.fx-host > .click-txt, .tile.fx-host > .t-flash { position: absolute; }
.tile.fx-host > .vf { inset: 22% 16% 18% 16%; }

/* ================= 고수포인트 충전 안내 (09-28) ================= */
button.point-chip { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; }
.point-chip span { font-weight: 600; opacity: .8; }
#chargeBody p { font-size: 14.5px; line-height: 1.65; color: #344054; margin: 8px 0; }
#chargeBody .ch-lead { font-size: 16px; color: #1b3fc4; }
.ch-pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 6px; }
.ch-pk div { background: linear-gradient(160deg, #fff8e1, #ffeef5); border: 1.5px solid #ffd79a; border-radius: 14px; padding: 10px 6px; text-align: center; }
.ch-pk b { display: block; font-size: 16px; color: #b54708; }
.ch-pk span { display: block; font-weight: 800; font-size: 15px; color: #1b2238; margin-top: 2px; }
.ch-pk em { display: block; font-style: normal; font-size: 11px; color: #667085; margin-top: 2px; }
.ch-call { display: flex; justify-content: center; text-decoration: none; margin-top: 12px; font-size: 15px; padding: 14px; }

.ch-call, .ch-call:visited { color: #fff !important; }
button.point-chip { white-space: nowrap; }

/* ================= 홈 아래 이용 안내 (09-28) ================= */
.guide { margin: 18px 0 8px; background: rgba(255,255,255,.75); border: 1px solid #fff; border-radius: 22px; padding: 16px 14px; box-shadow: 0 12px 30px -20px rgba(30,60,140,.45); }
.guide h3 { margin: 0 0 12px; font-size: 17px; color: #0d1b3e; }
.g-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; margin-bottom: 8px; }
.g-item.free { background: linear-gradient(135deg, #e7f0ff, #f3f7ff); }
.g-item.all { background: linear-gradient(135deg, #e9fbf1, #f4fff8); }
.g-item.pt { background: linear-gradient(135deg, #fff5dc, #fff0f5); }
.g-ico { font-size: 26px; line-height: 1; }
.g-item b { display: block; font-size: 15.5px; color: #0d1b3e; letter-spacing: -.3px; }
.g-item p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: #475467; }
.g-item p b { display: inline; font-size: inherit; color: #1b3fc4; }
.desks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.desks a { display: block; text-decoration: none; background: #fff; border: 1.5px solid #dbe6ff; border-radius: 14px; padding: 9px 12px; }
.desks a b { display: block; color: #1b3fc4; font-size: 14px; }
.desks a span { display: block; color: #344054; font-size: 13px; font-weight: 700; margin-top: 1px; }
.desks a::before { content: "📞"; float: right; }
.g-cheer { margin: 10px 0 0; text-align: center; font-weight: 900; color: #ff2d78; font-size: 15px; }

.ch-pk { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ch-pk b { font-size: 14px; }
.ch-pk span { font-size: 13.5px; }

/* ================= 로그인 = 홈 위에 올라오는 창 (09-28) ================= */
.join.as-sheet { position: fixed; inset: 0; z-index: 60; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  background: rgba(13, 27, 62, .38) !important; backdrop-filter: blur(3px); }
.join.as-sheet .join-hero { display: none; }
.join.as-sheet .join-card { flex: none; max-height: 90dvh; overflow-y: auto; border-radius: 26px 26px 0 0; width: 100%; max-width: 560px; margin: 0 auto;
  box-shadow: 0 -18px 40px -20px rgba(13, 27, 62, .5); animation: sheetUp .35s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.jc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 18px; }
.jc-head .x { background: none; color: #98a2b3; font-size: 18px; padding: 4px 8px; }
@media (min-width: 760px) { .join.as-sheet { justify-content: center; } .join.as-sheet .join-card { border-radius: 26px; margin-bottom: auto; margin-top: auto; } }

/* 선생님 화면 바로가기 타일 */
.t-teacher { --c1: #2dd4bf; --c2: #0e9aa7; --c3: #0b6f78; text-decoration: none; grid-column: span 3; height: 100%; }
.t-teacher .t-ico { width: 44px; height: 44px; }
.t-teacher .t-label small { font-size: 11px; letter-spacing: 1px; }

/* 선생님 모드 고르기 */
.mode-sheet { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.mode-btn { width: 100%; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; text-align: left; gap: 2px 12px; padding: 16px; border-radius: 18px; margin-top: 10px; color: #fff; }
.mode-btn span { grid-row: span 2; font-size: 34px; align-self: center; }
.mode-btn b { font-size: 18px; }
.mode-btn em { font-style: normal; font-size: 13.5px; opacity: .9; font-weight: 500; }
.mode-btn.stu { background: linear-gradient(135deg, #3d6bff, #1b3fc4); }
.mode-btn.tea { background: linear-gradient(135deg, #2dd4bf, #0e9aa7); }

/* 오답노트 요청 */
.odreq-box { background: #fff; border-radius: 18px; padding: 14px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.odreq { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; }
.odreq span { color: #667085; font-size: 12.5px; }
.odreq.wait { background: #fff5dc; }
.odreq.done { background: #e7f6ef; }

/* 홈페이지 타일: 로고가 잘리지 않게 작게 */
.t-home { background: #0d2561 url(/brand/home_tile.jpg) center 42% / 78% auto no-repeat !important; }

/* 홈페이지 타일: 화면 크기와 상관없이 로고 전체가 보이게 (09-28) */
.t-home { background: #0d2561 url(/brand/home_tile.jpg) center / contain no-repeat !important; background-origin: content-box !important; padding: 8px 10px 10px !important; }

/* 힌트 먼저 보기 · 쌍둥이 문제 · 연속 기록 */
.hint-top { font-size: 13.5px; color: #475467; background: #f4f7ff; border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; }
.hint-top label { display: inline-flex; gap: 4px; align-items: center; margin: 0; font-size: 12.5px; color: #667085; }
.hint-top input { width: auto; }
.hint-bar { display: flex; gap: 8px; margin: 12px 0; }
.hint-bar .hnext { flex: 1; background: linear-gradient(135deg, #ffb020, #ff8a00); font-size: 16px; }
.hstep + .hstep { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e4e7ec; }
.twins { margin-top: 18px; border-top: 2px dashed #dbe4ff; padding-top: 12px; }
.twins h3 { margin: 0 0 8px; font-size: 16px; color: #1b3fc4; }
.twin { background: #f8faff; border: 1px solid #e1e9ff; border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.tw-src { font-size: 12.5px; font-weight: 800; color: #5b6b9a; margin-bottom: 6px; }
.tw-q { font-size: 15px; line-height: 1.7; margin-bottom: 8px; overflow-x: auto; }
.tw-a { margin-top: 10px; }
.streak-chip { display: inline-block; margin-left: 4px; font-size: 12.5px; font-weight: 800; color: #b42318; background: #ffe4e0; border-radius: 999px; padding: 3px 10px; vertical-align: 1px; }

/* 「고수수학이 만든」 찍풀 */
.mt-by { font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; color: #1A5CFF; margin: 0 0 2px 3px; }

/* 아래 메뉴: 색 아이콘 + 굵은 글씨 + 반짝 효과 (09-28) */
body.m .tabbar, body.m.home-dark .tabbar { background: rgba(255,255,255,.96); border-top: 1px solid #dbe6f7; padding-top: 8px; box-shadow: 0 -6px 20px -12px rgba(27,63,196,.35); }
body.m .tabbar button, body.m.home-dark .tabbar button { color: #667085; gap: 4px; padding: 2px 0 4px; overflow: visible; }
.tb-ic { position: relative; width: 44px; height: 34px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  box-shadow: 0 5px 12px -6px var(--sh), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.12);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), filter .2s; filter: saturate(.75) brightness(1.05); }
.tb-ic svg { width: 21px !important; height: 21px !important; stroke-width: 2.4; }
.tb-ic.c1 { background: linear-gradient(135deg, #4f8bff, #1b3fc4); --sh: #1b3fc4; }
.tb-ic.c2 { background: linear-gradient(135deg, #ff7ab6, #e8356d); --sh: #e8356d; }
.tb-ic.c3 { background: linear-gradient(135deg, #ffc53d, #f08c00); --sh: #f08c00; }
.tb-lb { font-size: 12.5px; font-weight: 900; letter-spacing: -.2px; }
.tb-sp { position: absolute; font-style: normal; pointer-events: none; opacity: 0; transform: scale(.3); transition: opacity .25s, transform .35s cubic-bezier(.3,1.8,.5,1); }
.tb-sp.s1 { top: -7px; left: -8px; font-size: 12px; color: #ffcf33; text-shadow: 0 0 6px rgba(255,200,0,.8); }
.tb-sp.s2 { top: -10px; right: -12px; font-size: 14px; }
body.m .tabbar button.on, body.m.home-dark .tabbar button.on { color: #1b3fc4; }
.tabbar button[data-tab="history"].on .tb-lb { color: #e8356d; }
.tabbar button[data-tab="odap"].on .tb-lb { color: #d97706; }
.tabbar button.on .tb-ic { transform: translateY(-5px) scale(1.1); filter: none; animation: tbFloat 2.6s ease-in-out .3s infinite; }
.tabbar button.on .tb-sp { opacity: 1; transform: scale(1); }
.tabbar button.on .tb-sp.s1 { animation: tbTwinkle 1.4s ease-in-out infinite; }
.tabbar button.on .tb-sp.s2 { animation: tbFlutter 1.8s ease-in-out infinite; }
.tabbar button:active .tb-ic { transform: translateY(-2px) scale(.92); }
.tabbar button.on .tb-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) -60px 0 / 200% 100% no-repeat; animation: tbShine 3.2s ease-in-out infinite; }
@keyframes tbFloat { 0%,100% { transform: translateY(-5px) scale(1.1); } 50% { transform: translateY(-8px) scale(1.1); } }
@keyframes tbTwinkle { 0%,100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.6) rotate(45deg); } }
@keyframes tbFlutter { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(2px,-3px) rotate(10deg); } }
@keyframes tbShine { 0%,60% { background-position: -60px 0; } 100% { background-position: 60px 0; } }
@media (prefers-reduced-motion: reduce) { .tabbar button.on .tb-ic, .tb-sp, .tb-ic::after { animation: none !important; } }

/* 제목 옆 투명 칸: 선생님 응원(2개씩) · 친구들 한마디(1개씩) 번갈아 (09-28) */
.home-feed { display: none !important; }
.mt-talk { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 7px; justify-content: center; margin: 0 2px; }
.tk-box { border-radius: 14px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -14px rgba(30,60,140,.5); padding: 6px 8px 7px; }
.tk-h { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 900; color: #1b3fc4; letter-spacing: -.2px; margin-bottom: 3px; }
.tk-s .tk-h { color: #0b8aa8; }
.tk-write { background: rgba(255,255,255,.8); border: 0; border-radius: 999px; padding: 1px 6px; font-size: 11px; line-height: 1.4; box-shadow: none; min-height: 0; }
.tk-win { position: relative; overflow: hidden; }
.tk-t .tk-win { height: 64px; }
.tk-s .tk-win { height: 32px; }
.tk-page { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3px; animation: tkIn .55s cubic-bezier(.2,.9,.3,1) both; }
.tk-page.out { animation: tkOut .5s ease both; }
.tk-it { font-size: 11.5px; line-height: 1.35; color: #1b2238; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-t .tk-it { -webkit-line-clamp: 2; max-height: 31px; }
.tk-it b { font-weight: 900; color: #e07000; margin-right: 2px; }
.tk-s .tk-it b { color: #0b8aa8; }
@keyframes tkIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tkOut { to { opacity: 0; transform: translateY(-12px); } }
@media (max-width: 340px) { .mt-talk { display: none; } }

/* 제목 옆 칸 자리 만들기: 윗부분을 3칸 격자로, 「오늘 찍은 문제」는 핸드폰 위 동그란 배지로 */
body.m .metro-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
body.m .metro-top > div:first-child { display: contents; }
body.m .mt-title { grid-column: 1; grid-row: 1; }
body.m .mt-motto { grid-column: 1; grid-row: 2; }
body.m .mt-talk { grid-column: 2; grid-row: 1 / span 3; margin: 4px 0 0; }
body.m .mt-hello, body.m .mt-who { grid-column: 1 / span 2; }
body.m .point-chip { grid-column: 1 / span 2; justify-self: start; }
body.m .streak-chip { grid-column: 1 / span 2; justify-self: start; margin: 6px 0 0; }
body.m .mt-right { grid-column: 3; grid-row: 1 / span 6; position: relative; display: block; }
body.m .mt-right .real-phone { width: 92px; }
body.m .mt-right .real-phone svg { width: 100%; height: auto; }
body.m .mt-count { position: absolute; left: -22px; bottom: -8px; width: 66px; height: 66px; min-height: 0; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; z-index: 2; border: 3px solid #fff; }
body.m .mt-count b { font-size: 22px; line-height: 1; }
body.m .mt-count span { font-size: 8.5px; line-height: 1.15; }
body.m .mt-count span br { display: none; }
@media (max-width: 340px) { body.m .mt-right { display: none; } }
body.m .mt-count { width: 70px; height: 70px; }
body.m .mt-count span { font-size: 8px; letter-spacing: -.3px; }
body.m .mt-count span br { display: inline; }
body.m .mt-hello { display: none !important; }

/* 넓은 수식: 잘리지 않게 옆으로 밀어 보기 */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; }

/* 📲 앱 설치 단추 + 안내 창 */
.install-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 900; color: #fff; border: 0;
  background: linear-gradient(135deg, #1a5cff, #7a3cff); box-shadow: 0 6px 16px -6px rgba(90, 60, 255, .7); animation: insPulse 2.4s ease-in-out infinite; min-height: 0; }
body.m .install-chip { grid-column: 1 / span 2; justify-self: start; }
@keyframes insPulse { 0%,100% { transform: scale(1); box-shadow: 0 6px 16px -6px rgba(90,60,255,.7); } 50% { transform: scale(1.05); box-shadow: 0 8px 22px -4px rgba(90,60,255,.85); } }
.ins-back { position: fixed; inset: 0; z-index: 60; background: rgba(13, 27, 62, .45); display: flex; align-items: flex-end; justify-content: center; }
.ins-sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 24px 24px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); text-align: center; animation: insUp .3s cubic-bezier(.2,.9,.3,1); }
@keyframes insUp { from { transform: translateY(100%); } to { transform: none; } }
.ins-icon img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 20px -8px rgba(27,63,196,.5); }
.ins-sheet h3 { margin: 10px 0 4px; font-size: 20px; font-weight: 900; color: #0d1b3e; }
.ins-sub { margin: 0 0 14px; color: #667085; font-size: 14px; }
.ins-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff4e5; color: #b54708; font-weight: 800; font-size: 14px; }
.ins-go { width: 100%; margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 0; font-size: 17px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #1a5cff, #7a3cff); }
.ins-step { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: #f4f7ff; font-size: 15px; color: #1b2238; }
.ins-step > b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1b3fc4; color: #fff; font-size: 14px; }
.ins-ic { display: inline-block; padding: 0 5px; border: 1.5px solid #1b3fc4; border-radius: 6px; color: #1b3fc4; font-size: 12px; }
.ins-sheet .ghost { width: 100%; margin-top: 4px; }

/* 📲 설치 배너 (이벤트 느낌) */
.ins-banner { position: relative; display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: 688px; margin: 2px auto 14px; padding: 12px 14px 12px 12px;
  border: 0; border-radius: 20px; color: #fff; text-align: left; overflow: hidden; min-height: 0;
  background: linear-gradient(120deg, #ff4f9a 0%, #7a3cff 45%, #1a5cff 100%); background-size: 200% 100%;
  box-shadow: 0 12px 26px -12px rgba(122, 60, 255, .8), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.14);
  animation: ibFlow 6s ease-in-out infinite; }
.ins-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%) -150% 0 / 60% 100% no-repeat; animation: ibShine 3.2s ease-in-out infinite; pointer-events: none; }
.ib-phone { flex: none; width: 34px; height: 54px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); animation: ibWiggle 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.ib-phone svg { width: 100%; height: 100%; }
.ib-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ib-txt b { font-size: 18px; font-weight: 900; letter-spacing: -.4px; text-shadow: 0 2px 6px rgba(40,0,90,.35); }
.ib-txt small { font-size: 12.5px; font-weight: 700; opacity: .92; }
.ib-go { flex: none; padding: 8px 13px; border-radius: 999px; background: #fff; color: #5a2de0; font-weight: 900; font-size: 14px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); animation: ibPop 1.6s ease-in-out infinite; }
.ib-new { position: absolute; top: 7px; right: 10px; font-size: 9.5px; font-weight: 900; letter-spacing: 1px; padding: 1px 6px; border-radius: 6px; background: #ffd23f; color: #6b2400; transform: rotate(6deg); }
.ib-st { position: absolute; font-style: normal; color: #ffe066; text-shadow: 0 0 8px rgba(255,220,80,.9); pointer-events: none; animation: ibTwinkle 1.8s ease-in-out infinite; }
.ib-st.s1 { left: 44px; top: 6px; font-size: 13px; }
.ib-st.s2 { left: 38%; bottom: 5px; font-size: 11px; animation-delay: .4s; color: #fff; }
.ib-st.s3 { right: 92px; top: 8px; font-size: 10px; animation-delay: .8s; }
.ib-st.s4 { left: 8px; bottom: 6px; font-size: 12px; animation-delay: 1.1s; color: #fff; }
.ib-st.s5 { right: 22px; bottom: 4px; font-size: 12px; animation-delay: .6s; }
@keyframes ibFlow { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes ibShine { 0%,55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes ibWiggle { 0%,70%,100% { transform: rotate(0); } 76% { transform: rotate(-12deg); } 84% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } }
@keyframes ibPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ibTwinkle { 0%,100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .25; transform: scale(.55) rotate(40deg); } }
.ins-banner:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .ins-banner, .ins-banner::after, .ib-phone, .ib-go, .ib-st { animation: none !important; } }
#install { display: none !important; } /* 아래쪽 옛 설치 줄은 위 배너로 대체 */

/* 풀이 화면: 처음으로 · 다음 문제 */
.sol-top { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 10px; gap: 8px; }
.back-btn { background: #eef3ff; color: #1b3fc4; border: 0; border-radius: 999px; padding: 8px 14px; font-size: 14.5px; font-weight: 900; min-height: 0; }
.mini-cam { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #1a5cff, #7a3cff); box-shadow: 0 5px 12px -6px rgba(90,60,255,.8); }
.sol-end { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.next-cam { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 16px; border-radius: 18px; font-size: 18px; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #1a5cff, #7a3cff); box-shadow: 0 12px 24px -12px rgba(90,60,255,.85), inset 0 -4px 0 rgba(0,0,0,.14); }
.next-cam:active { transform: scale(.98); }
.sol-end .ghost { width: 100%; font-size: 16px; font-weight: 800; }
.jp-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; background: rgba(13,27,62,.92); color: #fff;
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: opacity .4s; }
.jp-toast.out { opacity: 0; }
.pane-back { margin: 4px 0 12px; }

/* 교재 해설 단계 카드 */
.xsteps { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.xs { position: relative; display: flex; gap: 11px; padding: 13px 14px 13px 12px; border-radius: 16px; background: #f7f9ff; border: 1px solid #e3eaff; }
.xs-n { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #4f8bff, #1b3fc4); box-shadow: 0 3px 8px -3px rgba(27,63,196,.6); }
.xs-b { flex: 1; min-width: 0; line-height: 1.8; font-size: 15.5px; color: #1b2238; overflow-x: auto; }
.xs-t { font-weight: 900; color: #1b3fc4; margin-bottom: 2px; }
.xs .efig { display: block; max-width: 100%; margin: 10px auto 2px; border-radius: 10px; background: #fff; }
.xs:nth-child(3n+2) .xs-n { background: linear-gradient(135deg, #b18cff, #7a3cff); }
.xs:nth-child(3n) .xs-n { background: linear-gradient(135deg, #3ed1c1, #0e9aa7); }
.xs-final { background: linear-gradient(135deg, #fff8e6, #fff1d6); border-color: #ffd98a; }
.xs-final .xs-n { background: linear-gradient(135deg, #ffb020, #f08c00) !important; }
.xs-final .xs-b { font-weight: 700; }
.xs.hidden { display: none; }
/* 비밀번호: 글자는 점으로, 아래 화면 숫자 단추판 */
.secret:not(.show) { -webkit-text-security: disc; text-security: disc; }
input[readonly].secret, input[readonly].pin-input { caret-color: transparent; letter-spacing: 6px; font-size: 22px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.numpad button { min-height: 0; height: 52px; border: 0; border-radius: 14px; background: #f1f4fb; color: #182033; font-size: 22px; font-weight: 800; box-shadow: none; touch-action: manipulation; }
.numpad button.hit { background: #dbe4ff; transform: scale(.96); }
.numpad .np-del { background: #fff0f0; color: #d92d20; }
.numpad .np-go { background: #1b3fc4; color: #fff; font-size: 17px; }
.numpad .np-clr { font-size: 14px; color: #667085; }
/* 자판이 올라왔을 때: 로그인·열쇠 창을 보이는 영역 위쪽에 맞춘다 (아이폰 사파리) */
body.kb-open .join.as-sheet, body.kb-open .ins-back { top: var(--vvtop, 0px); bottom: auto; height: var(--vvh, 100dvh); justify-content: flex-start; align-items: stretch; }
body.kb-open .join.as-sheet .join-card { max-height: var(--vvh, 90dvh); border-radius: 0 0 22px 22px; animation: none; }
body.kb-open .ins-back .ins-sheet { max-height: var(--vvh, 90dvh); overflow-y: auto; border-radius: 0 0 22px 22px; animation: none; }