/* ============================================================
   STEP 0 · 부기(bookie) 웹앱 — 기초 셋업
   ------------------------------------------------------------
   디자인 토큰은 bookie-design-system.html의 :root 블록을 그대로 이식.
   새 색·그림자·둥글기 값을 직접 만들지 않는다.
   ============================================================ */
:root{
  /* --- Surface & Ink --- */
  --bg-1:#eef0fb; --bg-2:#f8eef6;
  --surface:#ffffff;
  --surface-soft:#f6f6fb;
  --ink:#2b2d42;          /* 제목 네이비 */
  --ink-soft:#5b5f78;     /* 본문 */
  --muted:#9aa0b8;        /* 보조 텍스트 */
  --line:#e8e9f3;         /* 경계선 */

  /* --- Brand Gradients --- */
  --grad-primary:linear-gradient(135deg,#5b8def 0%,#9b6dff 100%); /* 메인 액션 */
  --grad-sun:linear-gradient(135deg,#ffc83d 0%,#ff7a45 100%);     /* 보조 액션 */

  /* --- Solid Brand --- */
  --green:#2ecc5b;        /* 가입/완료 */
  --black:#1c1c2e;        /* 강조/로그인 */
  --yellow:#ffd83d;       /* CTA 알약 버튼 */
  --sky:#2dd4ef;          /* 서재 화면 배경 */

  /* --- Accents --- */
  --c-pink:#ec4899; --c-purple:#8b5cf6; --c-blue:#3b82f6;
  --c-green:#22c55e; --c-orange:#f59e0b;

  /* --- Highlight (형광펜) --- */
  --hl-green:#d9f99d; --hl-pink:#fbcfe8; --hl-yellow:#fef08a;

  /* --- Radius --- */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* --- Shadow --- */
  --sh-sm:0 2px 8px rgba(40,40,80,.06);
  --sh-md:0 10px 28px rgba(40,40,80,.10);
  --sh-lg:0 20px 48px rgba(40,40,80,.16);

  --font:'Pretendard','Pretendard Variable',-apple-system,sans-serif;
}

/* --- Reset --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg-1) 0%,var(--bg-2) 100%);
  background-attachment:fixed;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:var(--font)}
img{display:block;max-width:100%}

/* ============================================================
   공용 컴포넌트 스타일 (SHARED) — STEP 진행하며 확장
   디자인 시스템의 .btn / .card / .modal 패턴을 그대로 따른다.
   ============================================================ */
.btn{
  font-family:var(--font);font-size:15px;font-weight:800;
  border:none;cursor:pointer;border-radius:var(--r-md);
  padding:13px 26px;transition:transform .14s,box-shadow .14s,filter .14s;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 8px 20px rgba(110,100,240,.34)}
.btn-sun{background:var(--grad-sun);color:#fff;box-shadow:0 8px 20px rgba(255,140,60,.34)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(46,204,91,.32)}
.btn-black{background:var(--black);color:#fff;box-shadow:var(--sh-sm)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.btn-cta{background:var(--yellow);color:var(--ink);border-radius:var(--r-pill);padding:14px 30px;box-shadow:0 8px 20px rgba(255,200,40,.4)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-lg{padding:16px 34px;font-size:17px}

/* 브랜드 로고 */
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px}
.brand .heart{
  width:30px;height:30px;border-radius:9px;
  background:var(--grad-sun);
  display:grid;place-items:center;font-size:15px;
  box-shadow:var(--sh-sm);
}

/* 앱 루트 */
#app{min-height:100vh}

/* --- 첫 진입: 역할 선택 화면 --- */
.entry{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:32px;text-align:center;
}
.entry .entry-mascot{margin-bottom:24px}
.entry h1{font-size:40px;font-weight:800;letter-spacing:-.02em}
.entry h1 .pop{
  background:var(--grad-primary);-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.entry .tagline{
  margin-top:12px;color:var(--ink-soft);font-size:16px;font-weight:500;
}
.entry .role-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin-top:40px;width:100%;max-width:560px;
}
.role-card{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:34px 26px;cursor:pointer;
  transition:transform .2s,box-shadow .2s;border:1.5px solid var(--line);
}
.role-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.role-card .ic{
  width:62px;height:62px;border-radius:18px;margin:0 auto 16px;
  display:grid;place-items:center;font-size:32px;
}
.role-card.teacher .ic{background:linear-gradient(135deg,#c7d2fe,#a5b4fc)}
.role-card.student .ic{background:linear-gradient(135deg,#fde68a,#fca5a5)}
.role-card h3{font-size:20px;font-weight:800}
.role-card p{font-size:13.5px;color:var(--muted);margin-top:7px;font-weight:500}
.role-card .role-tour{
  display:inline-block;margin-top:11px;
  font-size:11.5px;font-weight:800;color:var(--c-purple);
  background:#f5f3ff;padding:5px 11px;border-radius:var(--r-pill);
}
.entry .foot{margin-top:34px;color:var(--muted);font-size:12.5px}

/* --- 화면 플레이스홀더 (아직 미구현 화면) --- */
.placeholder{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  padding:40px;text-align:center;
}
.placeholder .pic{
  width:84px;height:84px;border-radius:24px;
  background:var(--surface);box-shadow:var(--sh-md);
  display:grid;place-items:center;font-size:40px;
}
.placeholder h2{font-size:24px;font-weight:800}
.placeholder .route{
  font-family:'SF Mono',Consolas,monospace;font-size:13px;
  color:var(--muted);background:var(--surface-soft);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 16px;
}
.placeholder p{color:var(--ink-soft);font-size:14px;max-width:380px}
.placeholder .step-tag{
  font-size:12px;font-weight:800;color:#fff;
  background:var(--grad-primary);padding:5px 13px;border-radius:var(--r-pill);
}

/* --- 토스트 --- */
#toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--black);color:#fff;font-size:14px;font-weight:600;
  padding:13px 22px;border-radius:var(--r-pill);box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   부기 마스코트 캐릭터
   ------------------------------------------------------------
   bookie-screen-examples.html의 .mascot 정의를 그대로 이식.
   이모지가 아니라 CSS로 그린 캐릭터 — 주황 그라데이션 몸 +
   까만 눈(하이라이트) + 분홍 볼 + 입. 기본형은 둥실 떠오르는 애니메이션.
   사용: buoy()  → 큰 캐릭터 / buoy('sm') → 작은 캐릭터
   ============================================================ */
.mascot{
  flex:0 0 auto;width:122px;height:122px;border-radius:42px;
  background:var(--grad-sun);position:relative;
  box-shadow:0 14px 30px rgba(255,140,60,.42);
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-7px)}}
.mascot.sm{width:60px;height:60px;border-radius:22px;animation:none}
.mascot.md{width:88px;height:88px;border-radius:30px}
.m-eye{position:absolute;top:46px;width:19px;height:23px;background:#2b2d42;border-radius:50%}
.m-eye.l{left:33px}.m-eye.r{right:33px}
.m-eye::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;background:#fff;border-radius:50%}
.mascot.sm .m-eye{top:22px;width:10px;height:12px}
.mascot.sm .m-eye.l{left:16px}.mascot.sm .m-eye.r{right:16px}
.mascot.md .m-eye{top:33px;width:14px;height:17px}
.mascot.md .m-eye.l{left:24px}.mascot.md .m-eye.r{right:24px}
.m-cheek{position:absolute;top:73px;width:17px;height:10px;background:#f9a8d4;border-radius:50%;opacity:.85}
.m-cheek.l{left:22px}.m-cheek.r{right:22px}
.mascot.sm .m-cheek{top:37px;width:9px;height:6px}
.mascot.sm .m-cheek.l{left:11px}.mascot.sm .m-cheek.r{right:11px}
.mascot.md .m-cheek{top:53px;width:12px;height:7px}
.mascot.md .m-cheek.l{left:16px}.mascot.md .m-cheek.r{right:16px}
.m-mouth{position:absolute;top:75px;left:50%;transform:translateX(-50%);width:24px;height:12px;border:3px solid #2b2d42;border-top:none;border-radius:0 0 24px 24px}
.mascot.sm .m-mouth{top:38px;width:13px;height:7px;border-width:2.5px}
.mascot.md .m-mouth{top:54px;width:17px;height:9px;border-width:3px}
/* 부기 NPC 진화 단계 장식 */
.m-glasses{
  position:absolute;top:42px;left:50%;transform:translateX(-50%);
  width:62px;height:26px;
  border:3px solid #2b2d42;border-radius:14px;
  background:rgba(255,255,255,.12);pointer-events:none;
}
.mascot.sm .m-glasses{top:20px;width:32px;height:13px;border-width:2px;border-radius:7px}
.mascot.md .m-glasses{top:30px;width:46px;height:19px;border-width:2.5px;border-radius:10px}
.m-crown{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:26px;color:#ffd83d;text-shadow:0 2px 4px rgba(0,0,0,.2);
}
.mascot.sm .m-crown{top:-9px;font-size:13px}
.mascot.md .m-crown{top:-13px;font-size:19px}
.m-sprout{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:18px;
}
.mascot.sm .m-sprout{top:-7px;font-size:10px}
.mascot.md .m-sprout{top:-10px;font-size:13px}

/* ============================================================
   교사 앱 (TEACHER)
   ------------------------------------------------------------
   톤: 기능·효율 중심. 같은 토큰을 쓰되 채도를 낮춰 차분하게.
   그라데이션은 주요 액션 버튼에만. 데스크톱 폭 기준.
   ============================================================ */

/* --- 인증 화면 (로그인 / 회원가입 공용) --- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px;
}
.auth-card{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);width:100%;max-width:400px;
  padding:34px 32px 28px;
}
.auth-card .auth-mascot{display:flex;justify-content:center;margin-bottom:14px}
.auth-card h2{font-size:23px;font-weight:800;text-align:center}
.auth-card .auth-sub{
  font-size:13.5px;color:var(--muted);text-align:center;
  margin:7px 0 22px;font-weight:500;
}
.auth-card .field{margin-bottom:15px}
.auth-card label{font-size:13.5px;font-weight:700;display:block;margin-bottom:7px}
.auth-card .input-wrap{
  display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:12px 17px;transition:.18s;
}
.auth-card .input-wrap:focus-within{
  border-color:var(--c-purple);box-shadow:0 0 0 4px rgba(139,92,246,.12);
}
.auth-card .input-wrap .ic{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:var(--surface-soft);display:grid;place-items:center;
  font-size:12px;color:var(--muted);
}
.auth-card .input-wrap input{
  border:none;outline:none;flex:1;font-family:var(--font);
  font-size:15px;background:transparent;color:var(--ink);
}
.auth-card .input-wrap input::placeholder{color:var(--muted)}
.auth-card .btn{width:100%;margin-top:8px}
.auth-card .auth-switch{
  text-align:center;font-size:13.5px;color:var(--muted);
  margin-top:18px;
}
.auth-card .auth-switch b{color:var(--c-blue);cursor:pointer;font-weight:800}

/* 둘러보기 — 로그인 화면 */
.tour-divider{
  display:flex;align-items:center;gap:12px;
  margin:18px 0 14px;color:var(--muted);font-size:12px;font-weight:700;
}
.tour-divider::before,.tour-divider::after{
  content:"";flex:1;height:1px;background:var(--line);
}
.btn.tour-btn{
  width:100%;justify-content:center;
  border:1.5px solid var(--c-purple);color:var(--c-purple);
  background:#fff3e6;
}
.btn.tour-btn:hover{background:#ffe9d2}
.tour-hint{
  text-align:center;font-size:11.5px;color:var(--muted);
  font-weight:600;margin-top:9px;
}
/* 둘러보기 모드 상단 배너 */
.tour-banner{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(135deg,#8b5cf6,#6366f1);
  color:#fff;padding:9px 16px;
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;
}
.tour-banner .tb-ic{font-size:15px}
.tour-banner .tb-txt{flex:1;min-width:0}
.tour-banner .tb-exit{
  border:none;cursor:pointer;flex:0 0 auto;
  background:rgba(255,255,255,.22);color:#fff;
  font-family:var(--font);font-size:11.5px;font-weight:800;
  padding:6px 13px;border-radius:var(--r-pill);
}
.tour-banner .tb-exit:hover{background:rgba(255,255,255,.32)}
.auth-card .auth-err{
  font-size:13px;color:#dc2626;text-align:center;
  margin-top:10px;min-height:18px;font-weight:600;
}
.auth-back{
  position:absolute;top:24px;left:24px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;
}

/* --- 교사 앱 셸: 사이드바 + 본문 --- */
.tea-shell{display:flex;min-height:100vh}
.tea-side{
  flex:0 0 220px;background:var(--surface);
  border-right:1px solid var(--line);
  padding:20px 16px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.tea-side .brand{font-size:18px;padding:4px 8px 18px}
.tea-side .heart{width:27px;height:27px;font-size:13px}
.snav a{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:var(--ink-soft);
  padding:11px 13px;border-radius:var(--r-md);margin-bottom:3px;
  transition:.14s;
}
.snav a:hover{background:var(--surface-soft)}
.snav a.on{background:#f1ecfe;color:var(--c-purple)}
.snav a .si{width:20px;height:20px;display:grid;place-items:center}
.snav a .si .ti{width:19px;height:19px}
.ti{display:block}
.side-foot{margin-top:auto;padding-top:16px}
.class-pick{
  background:var(--surface-soft);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 14px;cursor:pointer;
}
.class-pick .cl-k{font-size:11px;font-weight:700;color:var(--muted)}
.class-pick .cl-v{font-size:14px;font-weight:800;margin-top:2px}
.side-foot .logout{
  display:block;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--muted);margin-top:12px;cursor:pointer;
}
.tea-main{flex:1;padding:34px 40px;max-width:920px}

/* --- 교사 홈 --- */
.tm-head h3{font-size:25px;font-weight:800}
.tm-head h3 .ti{display:inline-block;width:26px;height:26px;color:#f0991e;vertical-align:-4px;margin-left:8px;stroke-width:2}
.tm-sub{font-size:14.5px;color:var(--ink-soft);margin-top:4px}
.tm-label{
  font-size:13px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin:30px 0 12px;
}
.quickstart{
  margin-top:24px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:22px 24px;
  display:flex;align-items:center;gap:18px;
}
.quickstart .qs-ic{
  width:52px;height:52px;flex:0 0 52px;border-radius:16px;
  background:linear-gradient(135deg,#ffe1bf,#ffcf9a);color:#d9700f;
  display:grid;place-items:center;
}
.quickstart .qs-ic .ti{width:27px;height:27px;stroke-width:2.1}
.quickstart .qs-t{font-size:17px;font-weight:800}
.quickstart .qs-d{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
.quickstart .btn{margin-left:auto;flex:0 0 auto;white-space:nowrap}
.panel{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:8px 20px;
}
.bookrow{
  display:flex;align-items:center;gap:16px;padding:16px 0;
}
.bookrow .bcov{
  width:50px;height:62px;flex:0 0 50px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;font-size:26px;box-shadow:var(--sh-sm);
}
.bookrow .bcov img{width:100%;height:100%;object-fit:cover;display:block}
.bookrow .bmeta{flex:1;min-width:0}
.bookrow .bmeta b{font-size:15px;font-weight:800;display:block}
.bookrow .bmeta span{font-size:12.5px;color:var(--muted)}
.pb{
  height:7px;background:var(--line);border-radius:var(--r-pill);
  margin-top:8px;overflow:hidden;
}
.pb i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--grad-primary);
}
.btn-mini{
  font-family:var(--font);font-size:13px;font-weight:800;
  border:none;cursor:pointer;border-radius:var(--r-md);
  padding:9px 17px;transition:transform .14s;white-space:nowrap;
}
.btn-mini:hover{transform:translateY(-2px)}
.btn-mini.go{background:var(--grad-primary);color:#fff;box-shadow:var(--sh-sm)}
.btn-mini.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.alert-row{
  display:flex;align-items:center;gap:13px;padding:14px 0;
  border-bottom:1px dashed var(--line);
}
.alert-row:last-child{border-bottom:none}
.alert-ic{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:grid;place-items:center;
}
.alert-ic .ti{width:20px;height:20px}
.alert-tx{flex:1;font-size:13.5px;color:var(--ink-soft)}
.alert-tx b{color:var(--ink);font-weight:800}
.alert-time{
  font-size:12px;font-weight:800;color:var(--muted);
  background:var(--surface-soft);padding:4px 10px;border-radius:var(--r-pill);
}
.empty-note{
  text-align:center;color:var(--muted);font-size:13.5px;
  font-weight:600;padding:26px 0;
}

/* --- 학급 만들기 (교사) --- */
.class-empty{
  text-align:center;padding:36px 24px;
}
.class-empty .ce-emoji{font-size:48px}
.class-empty .ce-t{font-size:17px;font-weight:800;margin-top:12px}
.class-empty .ce-d{font-size:13px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.6}
.class-empty .btn-deploy{margin-top:18px;display:inline-block}
.cc-field{margin-bottom:16px}
.cc-field label{font-size:13px;font-weight:800;display:block;margin-bottom:7px}
.cc-field input{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;font-family:var(--font);font-size:14px;
  outline:none;color:var(--ink);
}
.cc-field input:focus{border-color:var(--c-blue)}
.cc-grade{display:flex;gap:7px;flex-wrap:wrap}
.cc-gchip{
  font-size:13px;font-weight:700;padding:8px 14px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.cc-gchip.on{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
/* 학급 코드 발급 카드 */
.code-card{
  background:linear-gradient(135deg,#5b8def,#9b6dff);
  border-radius:var(--r-lg);padding:24px 22px;text-align:center;color:#fff;
  margin-bottom:18px;
}
.code-card .cc-k{font-size:12px;font-weight:700;opacity:.9}
.code-card .cc-code{
  font-size:34px;font-weight:800;letter-spacing:.08em;margin:8px 0 4px;
  font-family:'SF Mono',Consolas,monospace;
}
.code-card .cc-hint{font-size:12px;opacity:.85;line-height:1.5}
.code-card .cc-copy{
  margin-top:14px;background:rgba(255,255,255,.22);border:none;cursor:pointer;
  color:#fff;font-family:var(--font);font-size:13px;font-weight:800;
  padding:10px 22px;border-radius:var(--r-pill);
}
.code-card .cc-copy:active{transform:scale(.96)}

/* --- 우리 반 함께 읽기 목표 --- */
.goal-card{
  background:linear-gradient(135deg,#fff7ed,#fef3c7);
  border:1.5px solid #fcd34d;border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:18px;
}
.goal-card .gc-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.goal-card .gc-emoji{font-size:26px}
.goal-card .gc-title{font-size:17px;font-weight:800;color:var(--ink)}
.goal-card .gc-deadline{
  font-size:11px;font-weight:700;color:#a16207;
  background:#fff;padding:4px 10px;border-radius:var(--r-pill);margin-left:auto;
}
.goal-card .gc-bar{
  height:18px;background:#fff;border-radius:var(--r-pill);
  overflow:hidden;margin:12px 0 8px;border:1px solid #fcd34d;
}
.goal-card .gc-fill{
  height:100%;background:linear-gradient(90deg,#fbbf24,#f97316);
  border-radius:var(--r-pill);transition:width .5s;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:8px;color:#fff;font-size:10px;font-weight:800;
}
.goal-card .gc-stat{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--ink-soft);font-weight:700;
}
.goal-card .gc-stat b{font-size:20px;color:#ea580c}
.goal-card .gc-reward{
  margin-top:10px;font-size:12px;font-weight:700;color:#92700a;
  background:#fff;border-radius:var(--r-md);padding:9px 12px;
}
/* 학생 앱 — 함께 읽기 목표 (작은 배너) */
.stu-goal{
  margin:12px 22px 0;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border:1.5px solid #fcd34d;padding:14px 16px;
}
.stu-goal .sg-k{font-size:11px;font-weight:800;color:#a16207;display:flex;align-items:center;gap:5px}
.stu-goal .sg-k .ti{width:15px;height:15px}
.stu-goal .sg-t{font-size:14px;font-weight:800;margin:3px 0 9px}
.stu-goal .sg-bar{
  height:14px;background:#fff;border-radius:var(--r-pill);
  overflow:hidden;border:1px solid #fcd34d;
}
.stu-goal .sg-fill{
  height:100%;background:linear-gradient(90deg,#fbbf24,#f97316);
  border-radius:var(--r-pill);
}
.stu-goal .sg-stat{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-top:7px}
.stu-goal .sg-stat b{color:#ea580c}

/* --- 독서 성장 리포트 --- */
.report-card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);border:1px solid var(--line);
  padding:18px 20px;margin-bottom:14px;
}
.report-card h4{
  font-size:14px;font-weight:800;margin-bottom:14px;
  display:flex;align-items:center;gap:7px;
}
.rp-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rp-stat{
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:14px 8px;text-align:center;
}
.rp-stat b{font-size:23px;font-weight:800;color:var(--c-blue);display:block}
.rp-stat span{font-size:11px;color:var(--muted);font-weight:700}
/* 막대 차트 (장르 분포) */
.rp-bars{display:flex;flex-direction:column;gap:9px}
.rp-bar-row{display:flex;align-items:center;gap:10px}
.rp-bar-label{font-size:12px;font-weight:700;color:var(--ink-soft);width:74px;flex:0 0 74px}
.rp-bar-track{
  flex:1;height:16px;background:var(--surface-soft);
  border-radius:var(--r-pill);overflow:hidden;
}
.rp-bar-fill{
  height:100%;border-radius:var(--r-pill);transition:width .5s;
}
.rp-bar-val{font-size:11.5px;font-weight:800;color:var(--ink-soft);width:34px;text-align:right}
/* 추이 꺾은선 (간단 막대형) */
.rp-trend{display:flex;align-items:flex-end;gap:8px;height:96px;padding-top:8px}
.rp-trend-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.rp-trend-bar{
  width:100%;max-width:34px;border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#93c5fd,#3b82f6);transition:height .5s;
}
.rp-trend-label{font-size:10.5px;font-weight:700;color:var(--muted)}
.rp-trend-val{font-size:10.5px;font-weight:800;color:var(--c-blue)}
/* 학생별 리포트 행 */
.rp-student{
  display:flex;align-items:center;gap:12px;
  padding:11px 4px;border-bottom:1px dashed var(--line);
}
.rp-student:last-child{border-bottom:none}
.rp-stu-ava{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;
}
.rp-stu-info{flex:1;min-width:0}
.rp-stu-name{font-size:13.5px;font-weight:800}
.rp-stu-sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}
.rp-stu-mini{
  font-size:11px;font-weight:800;color:var(--c-green);
  background:#f0fdf4;padding:5px 10px;border-radius:var(--r-pill);
}
.rp-note{
  font-size:11.5px;font-weight:600;color:var(--ink-soft);
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:11px 14px;line-height:1.55;
}

/* --- 독서 마음 일기 (학생) --- */
.diary-write{
  margin:12px 22px 0;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fff4e2,#ffe9d2);
  border:1.5px solid #f3dcb6;padding:16px 18px;
}
.diary-write .dw-k{font-size:11px;font-weight:800;color:var(--c-blue)}
.diary-write .dw-t{font-size:14.5px;font-weight:800;margin:4px 0 12px}
.mood-row{display:flex;gap:8px;justify-content:space-between}
.mood-opt{
  flex:1;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:10px 2px;text-align:center;
  cursor:pointer;transition:.14s;
}
.mood-opt:active{transform:scale(.94)}
.mood-opt.on{border-color:var(--c-purple);background:#fff3e6}
.mood-opt .mo-face{font-size:24px}
.mood-opt .mo-lb{font-size:10px;font-weight:800;color:var(--ink-soft);margin-top:2px}
.diary-write textarea{
  width:100%;margin-top:11px;border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:11px 13px;
  font-family:var(--font);font-size:13px;color:var(--ink);
  resize:none;outline:none;
}
.diary-write textarea:focus{border-color:var(--c-purple)}
/* 마음 달력 */
.mood-cal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
  margin:4px 0 6px;
}
.mc-cell{
  aspect-ratio:1;border-radius:8px;background:var(--surface-soft);
  display:grid;place-items:center;font-size:15px;
}
.mc-cell.has{background:#fff3e6;border:1px solid #f3dcb6}
.mc-cell .mc-d{font-size:8.5px;color:var(--muted);font-weight:700}
/* 마음 통계 막대 */
.mood-bars{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.mood-bar-row{display:flex;align-items:center;gap:9px}
.mood-bar-face{font-size:18px;width:24px;text-align:center;flex:0 0 24px}
.mood-bar-track{flex:1;height:14px;background:var(--surface-soft);border-radius:var(--r-pill);overflow:hidden}
.mood-bar-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#fbbf6b,#f08a24)}
.mood-bar-val{font-size:11px;font-weight:800;color:var(--ink-soft);width:30px;text-align:right}
/* 일기 목록 */
.diary-item{
  display:flex;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);padding:12px 14px;margin-top:9px;
}
.diary-item .di-face{font-size:24px;flex:0 0 28px}
.diary-item .di-b{flex:1;min-width:0}
.diary-item .di-date{font-size:10.5px;font-weight:700;color:var(--muted)}
.diary-item .di-note{font-size:13px;color:var(--ink-soft);font-weight:500;margin-top:3px;line-height:1.5}
.diary-item .di-book{
  font-size:10.5px;font-weight:700;color:var(--c-purple);
  background:#fff3e6;padding:3px 8px;border-radius:var(--r-pill);
  display:inline-block;margin-top:6px;
}

/* --- 교사 관찰 노트 --- */
.obs-add{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:16px 18px;margin-bottom:14px;
}
.obs-add .oa-k{font-size:13px;font-weight:800;margin-bottom:10px}
.obs-pick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.obs-tag-chip{
  font-size:11.5px;font-weight:700;padding:6px 12px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.obs-tag-chip.on{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.obs-add textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:11px 13px;font-family:var(--font);font-size:13px;
  color:var(--ink);resize:none;outline:none;
}
.obs-add textarea:focus{border-color:var(--c-blue)}
.obs-add select{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;font-family:var(--font);font-size:13px;
  color:var(--ink);outline:none;margin-bottom:10px;background:var(--surface);
}
/* 관찰 노트 항목 */
.obs-item{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:12px 14px;margin-bottom:9px;
}
.obs-item .oi-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.obs-item .oi-stu{font-size:13px;font-weight:800}
.obs-item .oi-tag{
  font-size:10px;font-weight:800;color:#fff;background:var(--c-blue);
  padding:3px 9px;border-radius:var(--r-pill);
}
.obs-item .oi-date{font-size:10.5px;font-weight:700;color:var(--muted);margin-left:auto}
.obs-item .oi-text{font-size:12.5px;color:var(--ink-soft);font-weight:500;line-height:1.55}
.obs-item .oi-del{
  font-size:10.5px;font-weight:700;color:#dc2626;cursor:pointer;
  margin-top:6px;display:inline-block;
}

/* --- 도서 고르기 (T2) --- */
.lib-search{
  display:flex;align-items:center;gap:10px;
  margin:22px 0 8px;flex-wrap:wrap;
}
.lib-input{
  flex:1;min-width:220px;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:11px 17px;transition:.18s;
}
.lib-input:focus-within{
  border-color:var(--c-blue);box-shadow:0 0 0 4px rgba(59,130,246,.1);
}
.lib-input input{
  border:none;outline:none;flex:1;font-family:var(--font);
  font-size:14px;background:transparent;color:var(--ink);
}
.lib-input input::placeholder{color:var(--muted);font-weight:500}
.fchip{
  font-size:12.5px;font-weight:700;padding:8px 15px;
  border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.fchip:hover{border-color:var(--c-blue);color:var(--c-blue)}
.fchip.on{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.fchip-group{display:flex;gap:8px;flex-wrap:wrap}
.lib-count{
  font-size:13px;color:var(--muted);font-weight:600;margin:14px 0 12px;
}
.lib-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.libbook{
  background:var(--surface);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);border:1px solid var(--line);
  overflow:hidden;cursor:pointer;
  transition:transform .18s,box-shadow .18s;
  display:flex;flex-direction:column;
}
.libbook:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.libbook .lb-cov{
  aspect-ratio:3/3.2;display:flex;flex-direction:column;
  justify-content:flex-end;padding:12px;position:relative;
}
.libbook .lb-era{
  position:absolute;top:10px;left:10px;
  font-size:10.5px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.28);padding:3px 9px;border-radius:var(--r-pill);
  backdrop-filter:blur(2px);
}
.libbook .lbe{font-size:32px}
.libbook .lbt{
  font-size:13px;font-weight:800;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.3);line-height:1.3;margin-top:6px;
}
.libbook .lb-meta{padding:11px 13px 13px;display:flex;flex-direction:column;flex:1}
.libbook .lb-meta .au{font-size:11.5px;color:var(--muted);font-weight:700}
.libbook .lb-meta .genre{
  font-size:10.5px;font-weight:700;color:var(--ink-soft);
  background:var(--surface-soft);align-self:flex-start;
  padding:2px 8px;border-radius:var(--r-pill);margin-top:5px;
}
.libbook .lb-meta .smry{
  font-size:11.5px;color:var(--ink-soft);line-height:1.5;
  margin-top:8px;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.libbook .lb-meta .mk{
  font-size:12px;font-weight:800;color:var(--c-blue);
  margin-top:10px;display:flex;align-items:center;gap:4px;
}
.lib-empty{
  grid-column:1/-1;text-align:center;color:var(--muted);
  font-size:14px;font-weight:600;padding:48px 0;
}

/* --- 수업 만들기 (T3) --- */
.steps{display:flex;gap:8px;margin:22px 0 18px;flex-wrap:wrap}
.step{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);
  padding:8px 14px;border-radius:var(--r-pill);
}
.step .sc{
  width:19px;height:19px;border-radius:50%;
  background:#e3e4f1;color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:800;
}
.step.done{color:var(--c-green)}
.step.done .sc{background:var(--c-green)}
.step.cur{color:var(--c-purple);border-color:#d8c9fb;background:#f6f1ff}
.step.cur .sc{background:var(--c-purple)}
.panel-k{
  font-size:11.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
}
.lesson-panel{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:18px 20px;margin-bottom:14px;
}
.grade-pick{display:flex;gap:8px;flex-wrap:wrap}
.gchip{
  font-size:13px;font-weight:700;padding:8px 15px;
  border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.gchip:hover{border-color:var(--c-blue);color:var(--c-blue)}
.gchip.on{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.grade-badge{
  font-size:12px;font-weight:800;color:#fff;background:var(--c-blue);
  padding:2px 9px;border-radius:var(--r-pill);vertical-align:middle;
  margin-left:6px;
}
.opt-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.ochip{
  font-size:13px;font-weight:700;padding:9px 16px;
  border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.ochip:hover{border-color:var(--c-purple);color:var(--c-purple)}
.ochip.on{
  background:var(--c-purple);border-color:var(--c-purple);color:#fff;
  box-shadow:0 6px 14px rgba(139,92,246,.3);
}
.depth-row{display:flex;gap:10px;flex-wrap:wrap}
.depth{
  flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px;
  border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:13px 16px;
  font-size:13.5px;font-weight:800;color:var(--ink-soft);
  cursor:pointer;transition:.14s;
}
.depth:hover{border-color:var(--c-purple)}
.depth small{font-size:11px;font-weight:600;color:var(--muted)}
.depth.on{border-color:var(--c-purple);background:#f6f1ff;color:var(--c-purple)}
.depth.on small{color:var(--c-purple)}
.auto-note{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;color:#3b6f3f;
  background:#eafaf0;border:1px solid #c9eed4;
  border-radius:var(--r-md);padding:11px 14px;margin-bottom:12px;
}
.lesson{
  display:flex;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;margin-bottom:8px;
  transition:box-shadow .14s;
}
.lesson:hover{box-shadow:var(--sh-sm)}
.lesson.removed{opacity:.35;filter:grayscale(.6)}
.l-grip{color:#c9cbe0;font-size:15px;cursor:grab;flex:0 0 auto}
.l-num{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:var(--grad-primary);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;
}
.lesson.removed .l-num{background:var(--muted)}
.l-body{flex:1;min-width:0;cursor:pointer}
.l-body h5{font-size:13.5px;font-weight:800}
.l-body p{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
.l-assets{display:flex;gap:5px;flex-wrap:wrap}
.asset{
  font-size:10px;font-weight:800;padding:3px 8px;border-radius:var(--r-pill);
  cursor:pointer;transition:transform .12s,filter .12s;
}
.asset:hover{transform:translateY(-1px);filter:brightness(.95)}
.asset.ppt{background:#e0e7ff;color:#4f46e5}
.asset.act{background:#dcfce7;color:#15803d}
.asset.gd{background:#fef9c3;color:#a16207}
.asset.ev{background:#fee2e2;color:#b91c1c}
.l-hint{
  display:inline-block;margin-top:6px;
  font-size:10.5px;font-weight:700;color:var(--c-blue);
}

/* --- 학년군별 추천 도서 --- */
.rec-band-wrap{margin:18px 0 8px}
.rec-band-title{font-size:15px;font-weight:800;margin-bottom:12px}
.rec-band{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:14px 16px;margin-bottom:12px;
}
.rec-band-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rec-band-head .rb-emoji{
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-md);
  background:var(--surface-soft);display:grid;place-items:center;font-size:20px;
}
.rec-band-head .rb-name{font-size:14px;font-weight:800}
.rec-band-head .rb-desc{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
.rec-band-head .rb-count{
  margin-left:auto;font-size:11px;font-weight:800;color:var(--c-blue);
  background:#eff6ff;padding:4px 11px;border-radius:var(--r-pill);
}
.rec-band-books{
  display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;
}
.rec-band-book{
  flex:0 0 auto;width:152px;display:flex;gap:9px;align-items:center;
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:9px 10px;cursor:pointer;transition:.14s;
}
.rec-band-book:hover{background:#eff6ff}
.rbb-cov{
  width:34px;height:44px;flex:0 0 34px;border-radius:6px;
  display:grid;place-items:center;font-size:17px;
}
.rbb-info{flex:1;min-width:0}
.rbb-title{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbb-sub{font-size:10px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.l-x{
  flex:0 0 auto;width:27px;height:27px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:12px;cursor:pointer;
  display:grid;place-items:center;transition:.14s;
}
.l-x:hover{border-color:#f87171;color:#dc2626}
.l-x.undo{border-color:var(--c-green);color:var(--c-green)}
.deploy-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;gap:12px;flex-wrap:wrap;
}
.deploy-row .deploy-summary{font-size:13px;color:var(--ink-soft);font-weight:600}
.btn-deploy{
  border:none;cursor:pointer;font-family:var(--font);
  font-size:14px;font-weight:800;color:#fff;background:var(--green);
  padding:13px 26px;border-radius:var(--r-pill);
  box-shadow:0 8px 20px rgba(46,204,91,.34);transition:transform .14s;
}
.btn-deploy:hover{transform:translateY(-2px)}
.btn-deploy:disabled{background:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.lesson-cta{
  display:flex;justify-content:flex-end;margin-top:4px;
}

/* --- 수업 설계 강화 --- */
/* 차시 순서 이동 버튼 */
.l-order{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.l-ord-btn{
  width:22px;height:18px;border:1px solid var(--line);
  background:var(--surface);border-radius:5px;cursor:pointer;
  font-size:9px;color:var(--muted);display:grid;place-items:center;transition:.12s;
}
.l-ord-btn:hover{border-color:var(--c-blue);color:var(--c-blue)}
.l-ord-btn:disabled{opacity:.3;cursor:not-allowed}
/* 차시 추가 버튼 */
.add-session{
  width:100%;border:1.5px dashed var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:13px;cursor:pointer;
  font-family:var(--font);font-size:13.5px;font-weight:800;color:var(--c-blue);
  transition:.14s;margin-top:6px;
}
.add-session:hover{border-color:var(--c-blue);background:#eff6ff}
/* 차시 활동 미리보기 (수업 만들기 차시 행) */
.l-flow{
  display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;
}
.l-flow-chip{
  font-size:10px;font-weight:700;color:var(--ink-soft);
  background:var(--surface-soft);border-radius:var(--r-pill);
  padding:3px 8px;
}
.l-flow-more{font-size:10px;font-weight:700;color:var(--muted);padding:3px 4px}

/* 차시 편집 시트 */
.edit-sheet-bg{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:24px;
}
.edit-sheet{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);width:100%;max-width:560px;
  max-height:86vh;overflow-y:auto;padding:24px;
}
.edit-sheet h3{font-size:18px;font-weight:800;margin-bottom:4px}
.edit-sheet .es-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:18px}
.es-field{margin-bottom:16px}
.es-field label{font-size:13px;font-weight:800;display:block;margin-bottom:7px}
.es-field input, .es-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:11px 13px;font-family:var(--font);font-size:13.5px;
  color:var(--ink);outline:none;resize:none;
}
.es-field input:focus, .es-field textarea:focus{border-color:var(--c-blue)}
/* 성취기준 선택 */
.std-pick{display:flex;flex-direction:column;gap:7px}
.std-opt{
  display:flex;gap:9px;align-items:flex-start;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;cursor:pointer;transition:.12s;
}
.std-opt:hover{border-color:var(--c-blue)}
.std-opt.on{border-color:var(--c-blue);background:#eff6ff}
.std-check{
  width:18px;height:18px;flex:0 0 18px;border-radius:5px;
  border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:11px;color:#fff;margin-top:1px;
}
.std-opt.on .std-check{background:var(--c-blue);border-color:var(--c-blue)}
.std-txt{flex:1;min-width:0}
.std-code{font-size:11px;font-weight:800;color:var(--c-blue)}
.std-desc{font-size:12px;color:var(--ink-soft);font-weight:500;margin-top:2px;line-height:1.45}
/* 활동 블록 라이브러리 */
.act-lib-phase{
  font-size:11.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;margin:14px 0 8px;
}
.act-lib-grid{display:flex;flex-direction:column;gap:7px}
.act-lib-item{
  display:flex;gap:10px;align-items:center;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:9px 12px;cursor:pointer;transition:.12s;
}
.act-lib-item:hover{border-color:var(--c-purple)}
.act-lib-item.on{border-color:var(--c-purple);background:#fff3e6}
.act-lib-ic{font-size:20px;flex:0 0 24px;text-align:center}
.act-lib-b{flex:1;min-width:0}
.act-lib-name{font-size:12.5px;font-weight:800}
.act-lib-desc{font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}
.act-lib-min{font-size:10.5px;font-weight:800;color:var(--c-purple);white-space:nowrap}
.act-lib-add{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:var(--surface-soft);display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--muted);
}
.act-lib-item.on .act-lib-add{background:var(--c-purple);color:#fff}
/* 차시에 담긴 활동 (편집 시트 안) */
.es-flow{display:flex;flex-direction:column;gap:7px}
.es-flow-item{
  display:flex;gap:9px;align-items:center;
  background:var(--surface-soft);border-radius:var(--r-md);padding:9px 11px;
}
.es-flow-ph{
  font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:var(--r-pill);
  flex:0 0 auto;
}
.es-flow-ph.도입{background:#dbeafe;color:#1d4ed8}
.es-flow-ph.전개{background:#dcfce7;color:#15803d}
.es-flow-ph.정리{background:#fef3c7;color:#a16207}
.es-flow-name{flex:1;font-size:12px;font-weight:700;min-width:0}
.es-flow-min{font-size:10.5px;font-weight:700;color:var(--muted)}
.es-flow-x{
  width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;
  background:#fee2e2;color:#dc2626;font-size:11px;font-weight:800;
  display:grid;place-items:center;flex:0 0 20px;
}
.es-total-min{
  font-size:11.5px;font-weight:800;color:var(--c-blue);
  text-align:right;margin-top:8px;
}
.es-empty-flow{
  font-size:12px;color:var(--muted);font-weight:600;
  text-align:center;padding:14px;background:var(--surface-soft);
  border-radius:var(--r-md);
}
/* 편집 시트 탭 */
.es-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1.5px solid var(--line)}
.es-tab{
  font-size:12.5px;font-weight:800;padding:9px 12px;cursor:pointer;
  color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;
}
.es-tab.on{color:var(--c-blue);border-bottom-color:var(--c-blue)}
.es-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
.es-btn{
  font-family:var(--font);font-size:13.5px;font-weight:800;
  border:none;cursor:pointer;border-radius:var(--r-md);padding:11px 22px;
}
.es-btn.ghost{background:var(--surface-soft);color:var(--ink-soft)}
.es-btn.prime{background:var(--c-blue);color:#fff}
/* 평가 계획 */
.eval-plan-row{
  display:flex;gap:9px;align-items:center;margin-bottom:9px;
}
.eval-plan-row select, .eval-plan-row input{
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:9px 11px;font-family:var(--font);font-size:12.5px;
  color:var(--ink);outline:none;background:var(--surface);
}
.eval-method-chip{
  font-size:11.5px;font-weight:700;padding:7px 13px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:.12s;
}
.eval-method-chip.on{background:#b91c1c;border-color:#b91c1c;color:#fff}

/* --- 수업 설계 프리셋 --- */
.preset-grid{display:flex;flex-direction:column;gap:10px}
.preset-card{
  display:flex;gap:13px;align-items:flex-start;
  border:1.5px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:15px 16px;cursor:pointer;transition:.14s;
}
.preset-card:hover{border-color:var(--c-blue);box-shadow:var(--sh-sm)}
.preset-card.on{border-color:var(--c-blue);background:#eff6ff;box-shadow:var(--sh-sm)}
.preset-emoji{
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-md);
  background:var(--surface-soft);display:grid;place-items:center;font-size:22px;
}
.preset-card.on .preset-emoji{background:#dbeafe}
.preset-b{flex:1;min-width:0}
.preset-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.preset-name{font-size:14.5px;font-weight:800}
.preset-tag{
  font-size:10.5px;font-weight:800;color:var(--c-blue);
  background:#dbeafe;padding:3px 9px;border-radius:var(--r-pill);
}
.preset-desc{font-size:12px;color:var(--ink-soft);font-weight:500;margin-top:4px;line-height:1.5}
.preset-meta{font-size:11px;color:var(--muted);font-weight:700;margin-top:6px}
.preset-check{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:13px;color:#fff;
}
.preset-card.on .preset-check{background:var(--c-blue);border-color:var(--c-blue)}

/* --- 책별 미션팩 (학생) --- */
.pack-card{
  margin:12px 22px 0;border-radius:var(--r-lg);
  background:var(--surface);border:1.5px solid var(--line);
  box-shadow:var(--sh-sm);overflow:hidden;
}
.pack-head{
  padding:15px 17px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#fff4e2,#ffe9d2);
}
.pack-cover{
  width:42px;height:54px;flex:0 0 42px;border-radius:7px;overflow:hidden;
  display:grid;place-items:center;font-size:21px;box-shadow:var(--sh-sm);
}
.pack-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pack-hb{flex:1;min-width:0}
.pack-name{font-size:14px;font-weight:800}
.pack-sub{font-size:11px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.pack-ring{
  flex:0 0 auto;font-size:11px;font-weight:800;color:var(--c-purple);
  background:#fff;padding:5px 11px;border-radius:var(--r-pill);
}
.pack-body{padding:13px 17px}
/* 미션팩 진행 바 */
.pack-bar{
  height:9px;background:var(--surface-soft);border-radius:var(--r-pill);
  overflow:hidden;margin-bottom:12px;
}
.pack-fill{height:100%;background:linear-gradient(90deg,#fbbf6b,#f08a24);border-radius:var(--r-pill);transition:width .5s}
/* 미션팩 미션 항목 */
.pack-mission{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px dashed var(--line);
}
.pack-mission:last-of-type{border-bottom:none}
.pm-check{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  border:2px solid var(--line);display:grid;place-items:center;
  font-size:12px;color:#fff;cursor:pointer;transition:.14s;
}
.pack-mission.done .pm-check{background:var(--c-green);border-color:var(--c-green)}
.pm-info{flex:1;min-width:0}
.pm-title{font-size:13px;font-weight:700}
.pack-mission.done .pm-title{color:var(--muted);text-decoration:line-through}
.pm-type{font-size:10.5px;font-weight:700;color:var(--muted)}
.pm-pt{font-size:10.5px;font-weight:800;color:#a16207;background:var(--hl-yellow);padding:3px 8px;border-radius:var(--r-pill)}
/* 미션팩 보상 미리보기 */
.pack-reward{
  margin-top:12px;border-radius:var(--r-md);padding:12px 14px;
  background:linear-gradient(135deg,#fff7ed,#fef3c7);border:1.5px dashed #fcd34d;
}
.pack-reward.unlocked{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-style:solid;border-color:#86efac}
.pack-reward .pr-k{font-size:11px;font-weight:800;color:#a16207;margin-bottom:7px}
.pack-reward.unlocked .pr-k{color:#15803d}
.pr-items{display:flex;gap:9px;flex-wrap:wrap}
.pr-item{
  display:flex;align-items:center;gap:7px;
  background:#fff;border-radius:var(--r-md);padding:7px 11px;
}
.pr-item .pri-emoji{font-size:20px}
.pr-item .pri-name{font-size:11.5px;font-weight:800}
.pr-item .pri-lock{font-size:13px}
/* 기념 소품 획득 오버레이 */
.reward-pop{
  position:fixed;inset:0;background:rgba(40,40,80,.62);
  display:flex;align-items:center;justify-content:center;z-index:70;padding:24px;
}
.reward-pop-card{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);max-width:340px;width:100%;
  padding:30px 26px;text-align:center;
}
.reward-pop-card .rpc-burst{font-size:14px;font-weight:800;color:var(--c-orange);letter-spacing:.1em}
.reward-pop-card h3{font-size:20px;font-weight:800;margin:8px 0 4px}
.reward-pop-card .rpc-sub{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-bottom:18px}
.rpc-item{
  background:linear-gradient(160deg,#fef3c7,#fde68a);
  border-radius:var(--r-lg);padding:18px;margin-bottom:10px;
}
.rpc-item .rpi-emoji{font-size:46px}
.rpc-item .rpi-name{font-size:15px;font-weight:800;margin-top:6px}
.rpc-item .rpi-desc{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:4px;line-height:1.5}
/* 꾸미기 화면의 기념 소품 배지 */
.di-book-tag{
  position:absolute;top:6px;left:6px;
  font-size:8.5px;font-weight:800;color:#fff;
  background:var(--c-purple);padding:2px 7px;border-radius:var(--r-pill);
}

/* --- 독서록 교사 피드백 --- */
.fb-record{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:13px 15px;margin-bottom:10px;
}
.fb-rec-top{display:flex;gap:11px;align-items:center;margin-bottom:8px}
.fb-rec-cover{
  width:34px;height:44px;flex:0 0 34px;border-radius:6px;
  display:grid;place-items:center;font-size:17px;
}
.fb-rec-info{flex:1;min-width:0}
.fb-rec-book{font-size:13px;font-weight:800}
.fb-rec-stu{font-size:11px;color:var(--muted);font-weight:700}
.fb-rec-quote{
  font-size:12.5px;color:var(--ink-soft);font-weight:500;
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:10px 12px;line-height:1.55;
}
.fb-given{
  margin-top:9px;border-radius:var(--r-md);padding:10px 12px;
  background:#eff6ff;border:1px solid #bfdbfe;
  display:flex;gap:9px;align-items:flex-start;
}
.fb-given .fbg-stamp{font-size:22px;flex:0 0 auto}
.fb-given .fbg-text{font-size:12px;color:#1d4ed8;font-weight:600;line-height:1.5}
.fb-write{margin-top:9px}
.fb-stamp-row{display:flex;gap:7px;margin-bottom:9px}
.fb-stamp{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--surface);font-size:19px;cursor:pointer;transition:.12s;
}
.fb-stamp.on{border-color:var(--c-blue);background:#eff6ff;transform:scale(1.08)}
.fb-write textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;font-family:var(--font);font-size:12.5px;
  color:var(--ink);resize:none;outline:none;
}
.fb-write textarea:focus{border-color:var(--c-blue)}

/* --- 학생: 받은 피드백 카드 --- */
.my-fb{
  border-radius:var(--r-lg);padding:14px 16px;margin:12px 22px 0;
  background:linear-gradient(135deg,#dbeafe,#e0e7ff);border:1.5px solid #bfdbfe;
}
.my-fb .mf-k{font-size:11px;font-weight:800;color:#1d4ed8}
.my-fb .mf-row{display:flex;gap:11px;align-items:center;margin-top:7px}
.my-fb .mf-stamp{font-size:32px}
.my-fb .mf-b{flex:1;min-width:0}
.my-fb .mf-book{font-size:12px;font-weight:800}
.my-fb .mf-text{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:2px;line-height:1.5}

/* --- 친구 책 추천 카드 --- */
.rec-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:13px 15px;margin-bottom:10px;display:flex;gap:12px;
}
.rec-cover{
  width:40px;height:52px;flex:0 0 40px;border-radius:7px;
  display:grid;place-items:center;font-size:19px;box-shadow:var(--sh-sm);
}
.rec-b{flex:1;min-width:0}
.rec-from{font-size:11px;font-weight:800;color:var(--c-pink)}
.rec-book{font-size:13.5px;font-weight:800;margin:2px 0 4px}
.rec-msg{
  font-size:12px;color:var(--ink-soft);font-weight:500;line-height:1.5;
  background:var(--surface-soft);border-radius:var(--r-md);padding:9px 11px;
}
.rec-date{font-size:10.5px;color:var(--muted);font-weight:700;margin-top:6px}
/* 추천 보내기 폼 */
.rec-send{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:16px 17px;margin:12px 22px 0;
}
.rec-send .rs-k{font-size:13px;font-weight:800;margin-bottom:11px}
.rec-send select, .rec-send textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;font-family:var(--font);font-size:12.5px;
  color:var(--ink);outline:none;margin-bottom:9px;background:var(--surface);
}
.rec-send textarea{resize:none}
.rec-send textarea:focus, .rec-send select:focus{border-color:var(--c-pink)}

/* --- 독서 포트폴리오 --- */
.pf-hero{
  border-radius:var(--r-lg);padding:20px;margin:12px 22px 0;
  background:linear-gradient(140deg,#fef3c7,#fde68a);text-align:center;
}
.pf-hero .pf-name{font-size:18px;font-weight:800}
.pf-hero .pf-sub{font-size:12px;color:#a16207;font-weight:700;margin-top:3px}
.pf-hero .pf-year{
  font-size:11px;font-weight:800;color:#fff;background:#f59e0b;
  display:inline-block;padding:4px 12px;border-radius:var(--r-pill);margin-top:8px;
}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 22px 0}
.pf-stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 6px;text-align:center;box-shadow:var(--sh-sm);
}
.pf-stat b{font-size:21px;font-weight:800;color:var(--c-orange);display:block}
.pf-stat span{font-size:10.5px;color:var(--muted);font-weight:700}
.pf-sec{font-size:13px;font-weight:800;margin:18px 22px 8px;display:flex;align-items:center;gap:6px}
/* 월별 독서 타임라인 */
.pf-timeline{margin:0 22px;display:flex;flex-direction:column;gap:3px}
.pf-month{
  display:flex;gap:11px;padding:9px 0;
}
.pf-mon-label{
  font-size:11px;font-weight:800;color:var(--c-orange);
  width:48px;flex:0 0 48px;padding-top:2px;
}
.pf-mon-books{flex:1;display:flex;flex-wrap:wrap;gap:5px}
.pf-mon-book{
  width:26px;height:34px;border-radius:4px;overflow:hidden;
  display:grid;place-items:center;font-size:13px;
}
.pf-mon-book img{width:100%;height:100%;object-fit:cover;display:block}
.pf-mon-empty{font-size:11px;color:var(--muted);font-weight:600;padding-top:3px}
/* 베스트 책 */
.pf-best{
  display:flex;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);padding:12px 14px;margin:0 22px 9px;
}
.pf-best-cover{
  width:40px;height:52px;flex:0 0 40px;border-radius:7px;
  display:grid;place-items:center;font-size:19px;
}
.pf-best-b{flex:1;min-width:0}
.pf-best-title{font-size:13px;font-weight:800}
.pf-best-q{font-size:11.5px;color:var(--ink-soft);font-weight:500;margin-top:3px;line-height:1.5}

/* --- 독서 골든벨 --- */
.gb-banner{
  border-radius:var(--r-lg);padding:18px;margin:12px 22px 0;
  background:linear-gradient(135deg,#fde68a,#fca5a5);position:relative;overflow:hidden;
}
.gb-banner .gbb-k{font-size:11px;font-weight:800;color:#b91c1c}
.gb-banner .gbb-t{font-size:17px;font-weight:800;margin:4px 0 3px}
.gb-banner .gbb-d{font-size:12px;color:var(--ink-soft);font-weight:600}
.gb-banner .gbb-go{
  margin-top:12px;width:100%;border:none;cursor:pointer;
  background:#b91c1c;color:#fff;font-family:var(--font);
  font-size:14px;font-weight:800;border-radius:var(--r-md);padding:12px;
}
/* 골든벨 진행 화면 */
.gb-stage{
  margin:14px 22px 0;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:22px 20px;text-align:center;
}
.gb-qnum{font-size:12px;font-weight:800;color:#b91c1c;letter-spacing:.08em}
.gb-qtext{font-size:16px;font-weight:800;margin:10px 0 18px;line-height:1.5}
.gb-choices{display:flex;flex-direction:column;gap:9px}
.gb-choice{
  border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:13px 15px;cursor:pointer;
  font-family:var(--font);font-size:13.5px;font-weight:700;
  color:var(--ink);text-align:left;transition:.12s;
}
.gb-choice:hover{border-color:#b91c1c}
.gb-choice.correct{background:#dcfce7;border-color:#22c55e;color:#15803d}
.gb-choice.wrong{background:#fee2e2;border-color:#ef4444;color:#b91c1c}
/* 골든벨 순위 */
.gb-rank-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 0;border-bottom:1px dashed var(--line);
}
.gb-rank-row:last-child{border-bottom:none}
.gb-rank-no{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  background:var(--surface-soft);color:var(--ink-soft);
}
.gb-rank-no.top{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}
.gb-rank-name{flex:1;font-size:13px;font-weight:800}
.gb-rank-score{font-size:12px;font-weight:800;color:#b91c1c}

/* --- 독서 토론방 --- */
.disc-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  overflow:hidden;margin-bottom:12px;
}
.disc-head{
  padding:15px 17px;
  background:linear-gradient(135deg,#dbeafe,#e0e7ff);
}
.disc-book-tag{
  font-size:10.5px;font-weight:800;color:#1d4ed8;
  background:#fff;display:inline-block;padding:3px 10px;
  border-radius:var(--r-pill);margin-bottom:7px;
}
.disc-topic{font-size:15px;font-weight:800;line-height:1.4}
.disc-prompt{font-size:12px;color:var(--ink-soft);font-weight:500;margin-top:6px;line-height:1.55}
.disc-meta{font-size:11px;color:var(--muted);font-weight:700;margin-top:8px}
.disc-body{padding:14px 17px}
/* 의견 글 */
.disc-post{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:10px;background:var(--surface);
}
.disc-post-top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.disc-ava{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
}
.disc-name{font-size:12.5px;font-weight:800}
.disc-date{font-size:10.5px;color:var(--muted);font-weight:700;margin-left:auto}
.disc-text{font-size:13px;color:var(--ink-soft);font-weight:500;line-height:1.55}
/* 댓글 */
.disc-replies{margin-top:9px;padding-left:12px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:7px}
.disc-reply{display:flex;gap:7px;align-items:flex-start}
.disc-reply-name{font-size:11.5px;font-weight:800;color:var(--c-purple);flex:0 0 auto}
.disc-reply-text{font-size:11.5px;color:var(--ink-soft);font-weight:500;line-height:1.5}
.disc-reply-form{display:flex;gap:7px;margin-top:9px}
.disc-reply-form input{
  flex:1;border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:8px 13px;font-family:var(--font);font-size:12px;color:var(--ink);outline:none;
}
.disc-reply-form input:focus{border-color:var(--c-purple)}
.disc-reply-form button{
  border:none;background:var(--c-purple);color:#fff;cursor:pointer;
  border-radius:var(--r-pill);padding:8px 14px;font-family:var(--font);
  font-size:11.5px;font-weight:800;
}
/* 의견 작성 */
.disc-write{
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:12px 14px;margin-top:4px;
}
.disc-write textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;font-family:var(--font);font-size:12.5px;
  color:var(--ink);resize:none;outline:none;
}
.disc-write textarea:focus{border-color:var(--c-blue)}
/* 교사 토론 개설 폼 */
.disc-create select,.disc-create input,.disc-create textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;font-family:var(--font);font-size:13px;
  color:var(--ink);outline:none;margin-bottom:10px;background:var(--surface);resize:none;
}

/* --- 학교 관리자 화면 --- */
.adm-hero{
  border-radius:var(--r-lg);padding:20px;margin-bottom:16px;
  background:linear-gradient(140deg,#1e3a8a,#3730a3);color:#fff;
}
.adm-hero .ah-k{font-size:11px;font-weight:800;opacity:.8;letter-spacing:.1em}
.adm-hero .ah-school{font-size:21px;font-weight:800;margin:5px 0 3px}
.adm-hero .ah-sub{font-size:12.5px;opacity:.85;font-weight:600}
.adm-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.adm-kpi .ak{
  background:rgba(255,255,255,.12);border-radius:var(--r-md);
  padding:12px 8px;text-align:center;
}
.adm-kpi .ak b{font-size:20px;font-weight:800;display:block}
.adm-kpi .ak span{font-size:10px;opacity:.85;font-weight:700}
/* 학급 카드 (관리자) */
.adm-class{
  display:flex;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:14px 16px;margin-bottom:10px;
}
.adm-cls-badge{
  width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-md);
  display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;
}
.adm-cls-info{flex:1;min-width:0}
.adm-cls-name{font-size:14px;font-weight:800}
.adm-cls-teacher{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:1px}
.adm-cls-stat{display:flex;gap:14px;margin-top:6px}
.adm-cls-stat span{font-size:11px;color:var(--ink-soft);font-weight:700}
.adm-cls-stat b{color:var(--c-blue)}
.adm-cls-prog{
  flex:0 0 56px;text-align:center;
}
.adm-cls-prog .acp-num{font-size:19px;font-weight:800;color:var(--c-green)}
.adm-cls-prog .acp-lb{font-size:9.5px;color:var(--muted);font-weight:700}
/* 학교 순위 막대 */
.adm-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.adm-bar-label{font-size:12px;font-weight:700;width:90px;flex:0 0 90px}
.adm-bar-track{flex:1;height:15px;background:var(--surface-soft);border-radius:var(--r-pill);overflow:hidden}
.adm-bar-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#60a5fa,#3b82f6)}
.adm-bar-val{font-size:11px;font-weight:800;color:var(--ink-soft);width:42px;text-align:right}

/* --- 온보딩 튜토리얼 --- */
.onb-bg{
  position:fixed;inset:0;z-index:80;
  background:rgba(40,40,80,.72);
  display:flex;align-items:center;justify-content:center;padding:26px;
}
.onb-card{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);max-width:360px;width:100%;
  padding:30px 26px 24px;text-align:center;
}
.onb-illu{
  width:96px;height:96px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;font-size:46px;
}
.onb-step{font-size:11px;font-weight:800;color:var(--c-purple);letter-spacing:.1em}
.onb-card h3{font-size:19px;font-weight:800;margin:8px 0 8px}
.onb-card p{font-size:13px;color:var(--ink-soft);font-weight:500;line-height:1.6}
.onb-dots{display:flex;gap:6px;justify-content:center;margin:18px 0}
.onb-dot{width:7px;height:7px;border-radius:50%;background:var(--line)}
.onb-dot.on{background:var(--c-purple);width:20px;border-radius:var(--r-pill)}
.onb-actions{display:flex;gap:9px;margin-top:6px}
.onb-btn{
  flex:1;border:none;cursor:pointer;border-radius:var(--r-md);
  font-family:var(--font);font-size:13.5px;font-weight:800;padding:12px;
}
.onb-btn.skip{background:var(--surface-soft);color:var(--muted);flex:0 0 88px}
.onb-btn.next{background:var(--grad-primary);color:#fff}

/* --- 데일리 독서 루틴 --- */
.routine-card{
  margin:12px 22px 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--sh-sm);
}
.routine-top{
  padding:16px 18px;
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);
  display:flex;align-items:center;gap:13px;
}
.routine-flame{
  width:50px;height:50px;flex:0 0 50px;border-radius:50%;
  background:#fff;display:grid;place-items:center;font-size:25px;
  box-shadow:var(--sh-sm);
}
.routine-tb{flex:1;min-width:0}
.routine-streak{font-size:19px;font-weight:800}
.routine-streak b{color:#ea580c}
.routine-sub{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:1px}
.routine-body{padding:14px 18px}
/* 주간 7칸 */
.routine-week{display:flex;gap:6px;margin-bottom:13px}
.rw-day{flex:1;text-align:center}
.rw-dot{
  width:30px;height:30px;margin:0 auto 4px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;
  background:var(--surface-soft);border:1.5px solid var(--line);
}
.rw-dot.done{background:linear-gradient(135deg,#86efac,#22c55e);border-color:#22c55e;color:#fff}
.rw-dot.today{border-color:var(--c-orange);border-width:2px}
.rw-lb{font-size:9.5px;font-weight:700;color:var(--muted)}
/* 오늘 목표 진행 */
.routine-goal{
  border-radius:var(--r-md);padding:13px 14px;
  background:var(--surface-soft);
}
.routine-goal.done{background:#f0fdf4;border:1px solid #bbf7d0}
.rg-k{font-size:12px;font-weight:800;margin-bottom:8px}
.rg-bar{height:12px;background:#fff;border-radius:var(--r-pill);overflow:hidden;border:1px solid var(--line)}
.rg-fill{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e);border-radius:var(--r-pill);transition:width .5s}
.rg-stat{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-top:7px}
.rg-btn{
  width:100%;margin-top:11px;border:none;cursor:pointer;
  background:var(--green);color:#fff;border-radius:var(--r-md);
  font-family:var(--font);font-size:13.5px;font-weight:800;padding:11px;
}
.rg-btn.done-btn{background:var(--surface-soft);color:var(--muted);cursor:default}

/* --- 차시-진도 연동 (교사) --- */
.prep-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 4px;border-bottom:1px dashed var(--line);
}
.prep-row:last-child{border-bottom:none}
.prep-ava{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
}
.prep-name{flex:1;font-size:13px;font-weight:800}
.prep-badge{
  font-size:11px;font-weight:800;padding:5px 11px;border-radius:var(--r-pill);
}
.prep-badge.ready{background:#dcfce7;color:#15803d}
.prep-badge.behind{background:#fef3c7;color:#a16207}
.prep-badge.notyet{background:#fee2e2;color:#b91c1c}
.prep-summary{
  display:flex;gap:9px;margin:4px 0 14px;
}
.prep-sum-card{
  flex:1;border-radius:var(--r-md);padding:12px 8px;text-align:center;
}
.prep-sum-card.ready{background:#dcfce7}
.prep-sum-card.behind{background:#fef3c7}
.prep-sum-card.notyet{background:#fee2e2}
.prep-sum-card b{font-size:21px;font-weight:800;display:block}
.prep-sum-card.ready b{color:#15803d}
.prep-sum-card.behind b{color:#a16207}
.prep-sum-card.notyet b{color:#b91c1c}
.prep-sum-card span{font-size:10.5px;font-weight:700;color:var(--ink-soft)}
/* 차시 진도 안내 (차시 행) */
.l-readby{
  font-size:10.5px;font-weight:700;color:var(--c-blue);
  background:#eff6ff;padding:3px 9px;border-radius:var(--r-pill);
  display:inline-block;margin-top:5px;
}

/* --- 읽기 점검 (이해 확인) --- */
.check-stage{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);margin:14px 22px 0;padding:22px 20px;text-align:center;
}
.check-k{font-size:12px;font-weight:800;color:var(--c-purple);letter-spacing:.06em}
.check-q{font-size:16px;font-weight:800;margin:10px 0 18px;line-height:1.5}
.check-opts{display:flex;flex-direction:column;gap:9px}
.check-opt{
  border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:13px 15px;cursor:pointer;
  font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--ink);
  text-align:left;transition:.12s;
}
.check-opt:hover{border-color:var(--c-purple)}
.check-opt.correct{background:#dcfce7;border-color:#22c55e;color:#15803d}
.check-opt.wrong{background:#fee2e2;border-color:#ef4444;color:#b91c1c}
.check-progress{
  font-size:11.5px;font-weight:700;color:var(--muted);margin-top:14px;
}

/* --- 수업 자료실 (교사) — 책별 자료 --- */
.res-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.res-fchip{
  font-size:12px;font-weight:700;padding:7px 14px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:.12s;
}
.res-fchip.on{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
/* 책별 자료 카드 */
.resbook-grid{display:flex;flex-direction:column;gap:10px}
.resbook-card{
  display:flex;gap:13px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:14px 16px;cursor:pointer;transition:.14s;
}
.resbook-card:hover{border-color:var(--c-blue);box-shadow:var(--sh-md)}
.resbook-cov{
  width:46px;height:58px;flex:0 0 46px;border-radius:7px;overflow:hidden;
  display:grid;place-items:center;font-size:23px;box-shadow:var(--sh-sm);
}
.resbook-cov img{width:100%;height:100%;object-fit:cover;display:block}
.resbook-b{flex:1;min-width:0}
.resbook-title{font-size:14.5px;font-weight:800}
.resbook-sub{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:2px}
.resbook-mats{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.rbm{font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:var(--r-pill)}
.rbm.ppt{background:#e0e7ff;color:#4f46e5}
.rbm.act{background:#dcfce7;color:#15803d}
.rbm.gd{background:#fef9c3;color:#a16207}
.rbm.ev{background:#fee2e2;color:#b91c1c}
.resbook-go{
  flex:0 0 auto;font-size:11px;font-weight:800;color:var(--c-blue);
  text-align:center;line-height:1.4;
}
/* 선택한 책 — 헤더 */
.resbook-hero{
  display:flex;gap:14px;align-items:center;
  background:linear-gradient(135deg,#eff6ff,#e0e7ff);
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:16px;
}
.rbh-cov{
  width:52px;height:66px;flex:0 0 52px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;font-size:26px;box-shadow:var(--sh-sm);
}
.rbh-cov img{width:100%;height:100%;object-fit:cover;display:block}
.rbh-b{flex:1;min-width:0}
.rbh-title{font-size:16px;font-weight:800}
.rbh-sum{font-size:12px;color:var(--ink-soft);font-weight:500;margin-top:4px;line-height:1.5}
/* 차시별 자료 행 */
.resmat-row{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:14px 16px;margin-bottom:10px;
}
.resmat-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.resmat-no{
  width:28px;height:28px;flex:0 0 28px;border-radius:8px;
  background:var(--grad-primary);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.resmat-info{flex:1;min-width:0}
.resmat-title{font-size:13.5px;font-weight:800}
.resmat-goal{font-size:11.5px;color:var(--ink-soft);font-weight:500;margin-top:2px;line-height:1.45}
.resmat-btns{display:flex;gap:7px;flex-wrap:wrap}
.resmat-btn{
  border:1.5px solid var(--line);background:var(--surface);
  font-family:var(--font);font-size:11.5px;font-weight:800;
  padding:8px 13px;border-radius:var(--r-pill);cursor:pointer;transition:.12s;
}
.resmat-btn.ppt{color:#4f46e5}.resmat-btn.ppt:hover{background:#e0e7ff;border-color:#a5b4fc}
.resmat-btn.act{color:#15803d}.resmat-btn.act:hover{background:#dcfce7;border-color:#86efac}
.resmat-btn.gd{color:#a16207}.resmat-btn.gd:hover{background:#fef9c3;border-color:#fde047}
.resmat-btn.ev{color:#b91c1c}.resmat-btn.ev:hover{background:#fee2e2;border-color:#fca5a5}
/* 외부 참고 사이트 — 보조 목록 */
.res-site-list{display:flex;flex-direction:column;gap:8px}
.res-site{
  display:flex;gap:11px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 13px;
}
.res-site-ic{
  width:36px;height:36px;flex:0 0 36px;border-radius:8px;
  background:var(--surface-soft);display:grid;place-items:center;font-size:17px;
}
.res-site-b{flex:1;min-width:0}
.res-site-name{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.res-site-cat{
  font-size:9px;font-weight:800;color:var(--c-blue);
  background:#eff6ff;padding:2px 7px;border-radius:var(--r-pill);
}
.res-site-desc{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.45}
.res-site-link{
  flex:0 0 auto;border:none;cursor:pointer;font-size:14px;
  background:#eff6ff;border-radius:8px;width:34px;height:34px;
}
.res-site-link:hover{background:#dbeafe}

/* --- 차시 상세 (T4) --- */
.session-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:800;color:var(--ink-soft);
  cursor:pointer;margin-bottom:14px;
}
.ctabs{display:flex;gap:8px;margin:18px 0 16px;flex-wrap:wrap}
.ctab{
  font-size:13px;font-weight:800;padding:9px 18px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--muted);
  cursor:pointer;transition:.14s;
}
.ctab:hover{border-color:var(--c-blue);color:var(--c-blue)}
.ctab.on{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
/* PPT 미리보기 슬라이드 */
.slide-prev{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  overflow:hidden;margin-bottom:13px;
}
.slide-canvas{
  aspect-ratio:16/8.4;
  background:linear-gradient(150deg,#eef2fe,#f7eef7);
  padding:34px 40px;display:flex;flex-direction:column;justify-content:center;
}
.slide-eyebrow{
  font-size:13px;font-weight:800;color:var(--c-purple);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;
}
.slide-title{font-size:30px;font-weight:800;color:var(--ink);line-height:1.25}
.slide-title .hl{background:var(--hl-yellow);padding:1px 7px;border-radius:7px}
.slide-row{display:flex;align-items:center;gap:18px;margin-top:20px}
.slide-bookart{
  width:78px;height:100px;flex:0 0 78px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;font-size:34px;
  box-shadow:0 8px 18px rgba(40,40,80,.18);
}
.slide-bookart img{width:100%;height:100%;object-fit:cover;display:block}
.slide-goal{font-size:14px;font-weight:600;color:var(--ink-soft);line-height:1.7}
.slide-goal b{color:var(--ink);font-weight:800}
.slide-body{font-size:14.5px;color:var(--ink-soft);line-height:1.8}
.slide-strip{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.sthumb{
  flex:1;min-width:48px;aspect-ratio:16/10;border-radius:8px;
  background:var(--surface);border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:13px;font-weight:800;
  color:var(--muted);cursor:pointer;transition:.14s;
}
.sthumb:hover{border-color:var(--c-blue);color:var(--c-blue)}
.sthumb.on{
  border-color:var(--c-blue);color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
/* 자료 카드형 미리보기 (활동지·지도안·평가) */
.doc-prev{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:26px 30px;margin-bottom:16px;
}
.doc-prev .doc-tag{
  display:inline-block;font-size:11.5px;font-weight:800;
  padding:4px 11px;border-radius:var(--r-pill);margin-bottom:12px;
}
.doc-prev h4{font-size:18px;font-weight:800;margin-bottom:14px}
.doc-list{display:flex;flex-direction:column;gap:11px}
.doc-item{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;color:var(--ink-soft);line-height:1.55;
}
.doc-item .di-no{
  flex:0 0 22px;width:22px;height:22px;border-radius:7px;
  background:var(--surface-soft);color:var(--ink-soft);
  display:grid;place-items:center;font-size:11px;font-weight:800;
}
.doc-item b{color:var(--ink);font-weight:800}
.doc-q{
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:13px 16px;font-size:13.5px;color:var(--ink-soft);
}
.doc-q b{color:var(--ink);display:block;margin-bottom:4px}

/* --- 실제 학습지(워크시트) 모양 --- */
.worksheet-paper{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-md);
  padding:30px 32px;margin-bottom:14px;
}
.ws-head{
  text-align:center;border-bottom:2.5px solid var(--ink);
  padding-bottom:14px;margin-bottom:8px;
}
.ws-title{font-size:20px;font-weight:800;letter-spacing:-.01em}
.ws-sub{font-size:12px;color:var(--muted);font-weight:700;margin-top:5px}
.ws-info{
  display:flex;gap:0;border-bottom:1.5px solid var(--line);
  margin-bottom:20px;
}
.ws-info-cell{
  flex:1;display:flex;align-items:center;
  font-size:12px;font-weight:700;padding:9px 4px;
}
.ws-info-cell + .ws-info-cell{border-left:1px solid var(--line)}
.ws-info-cell .wic-k{color:var(--ink-soft);flex:0 0 auto;margin-right:6px}
.ws-info-cell .wic-line{flex:1;border-bottom:1px dotted var(--muted);height:14px}
.ws-q{margin-bottom:20px}
.ws-q-head{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px}
.ws-q-no{
  flex:0 0 24px;width:24px;height:24px;border-radius:6px;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:800;
}
.ws-q-text{flex:1;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.5;padding-top:2px}
.ws-answer-lines{display:flex;flex-direction:column;gap:13px;padding-left:33px}
.ws-line{border-bottom:1.5px solid #d4d6e4;height:1px}
.ws-answer-box{
  margin-left:33px;border:1.5px dashed #c4c7d8;border-radius:8px;
  height:74px;display:grid;place-items:center;
  color:var(--muted);font-size:11.5px;font-weight:600;
}
.ws-foot{
  margin-top:8px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:11px;color:var(--muted);font-weight:600;text-align:center;
}

/* --- 지도안 표 모양 --- */
.guide-table{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:14px;
}
.gt-row{display:flex;border-bottom:1px solid var(--line)}
.gt-row:last-child{border-bottom:none}
.gt-k{
  flex:0 0 96px;background:var(--surface-soft);
  font-size:12px;font-weight:800;color:var(--ink);
  padding:13px 12px;display:flex;align-items:center;
  border-right:1px solid var(--line);
}
.gt-v{flex:1;font-size:12.5px;color:var(--ink-soft);font-weight:500;
  padding:13px 14px;line-height:1.55}

/* --- 평가 루브릭 표 --- */
.rubric-table{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:14px;
}
.rt-row{display:flex;border-bottom:1px solid var(--line)}
.rt-row:last-child{border-bottom:none}
.rt-lv{
  flex:0 0 80px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;padding:13px 8px;
}
.rt-lv.lv0{background:#22c55e}
.rt-lv.lv1{background:#f59e0b}
.rt-lv.lv2{background:#ef4444}
.rt-desc{flex:1;font-size:12.5px;color:var(--ink-soft);font-weight:500;
  padding:13px 14px;line-height:1.5}
.eval-item-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);padding:13px 15px;margin-bottom:9px;
  display:flex;gap:10px;align-items:flex-start;
}
.eval-item-card .eic-ic{font-size:16px;flex:0 0 auto}
.eval-item-card .eic-t{font-size:12.5px;color:var(--ink-soft);font-weight:600;line-height:1.5}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn-out{
  border:1.5px solid var(--line);background:var(--surface);
  font-family:var(--font);font-size:13.5px;font-weight:800;
  color:var(--ink-soft);padding:12px 22px;border-radius:var(--r-pill);
  cursor:pointer;transition:.14s;
}
.btn-out:hover{border-color:var(--c-blue);color:var(--c-blue)}
.btn-fill{
  border:none;font-family:var(--font);font-size:13.5px;font-weight:800;
  color:#fff;background:var(--grad-primary);
  padding:12px 24px;border-radius:var(--r-pill);cursor:pointer;
  box-shadow:0 8px 18px rgba(110,100,240,.32);transition:transform .14s;
}
.btn-fill:hover{transform:translateY(-2px)}
.session-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin:18px 0 4px;
}
.session-nav .sn-btn{
  font-size:13px;font-weight:800;color:var(--ink-soft);
  cursor:pointer;padding:8px 14px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--surface);transition:.14s;
}
.session-nav .sn-btn:hover{border-color:var(--c-purple);color:var(--c-purple)}
.session-nav .sn-btn.disabled{opacity:.4;pointer-events:none}
.session-nav .sn-now{font-size:13px;font-weight:700;color:var(--muted)}

/* --- 미션 발행 (T5) --- */
.field-row{display:flex;gap:14px;flex-wrap:wrap}
.fld{flex:1;min-width:180px}
.fld .fk{font-size:12px;font-weight:800;color:var(--ink-soft);margin-bottom:6px}
.fld .fv{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:10px 14px;
  font-size:14px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.fld .fv input,.fld .fv select{
  border:none;outline:none;flex:1;font-family:var(--font);
  font-size:14px;font-weight:700;background:transparent;color:var(--ink);
}
.mt-hint{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:8px}
.stu-pick{
  margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;
}
.stu-pick .spbtn{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;padding:7px 12px;
  border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.stu-pick .spbtn .sp-ava{
  width:20px;height:20px;border-radius:50%;color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:800;
}
.stu-pick .spbtn.on{
  border-color:var(--c-purple);background:#f6f1ff;color:var(--c-purple);
}
.preview-box{
  background:linear-gradient(160deg,#eef2fe,#fbeef6);
  border:1px dashed #c9cbe0;border-radius:var(--r-lg);padding:16px;
}
.preview-box .pv-k{
  font-size:11.5px;font-weight:800;color:var(--muted);margin-bottom:10px;
}
.mini-mission{
  background:var(--surface);border-radius:var(--r-md);
  border:1.5px solid #ffe3a8;box-shadow:var(--sh-sm);
  padding:13px 15px;display:flex;align-items:center;gap:12px;
}
.mini-mission .mm-ic{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#fde68a,#fca5a5);
  display:grid;place-items:center;font-size:20px;
}
.mini-mission .mm-ic img{width:100%;height:100%;object-fit:cover;display:block}
.mini-mission .mm-t{font-size:13.5px;font-weight:800}
.mini-mission .mm-s{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
.mini-mission .mm-rew{
  margin-left:auto;font-size:11.5px;font-weight:800;color:#a16207;
  background:var(--hl-yellow);padding:5px 10px;border-radius:var(--r-pill);
}
.reward-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rchip{
  font-size:13px;font-weight:800;padding:8px 16px;
  border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.rchip:hover{border-color:var(--c-orange);color:var(--c-orange)}
.rchip.on{background:var(--c-orange);border-color:var(--c-orange);color:#fff}

/* --- 학급 현황 (T6) --- */
.kpi-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 16px;
}
.kpi{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);border:1px solid var(--line);padding:16px;
}
.kpi .kk{font-size:11.5px;font-weight:700;color:var(--muted)}
.kpi .kv{font-size:26px;font-weight:800;margin-top:3px}
.kpi .kv small{font-size:13px;font-weight:700;color:var(--muted)}
.kpi:nth-child(1) .kv{color:var(--c-blue)}
.kpi:nth-child(2) .kv{color:var(--c-orange)}
.kpi:nth-child(3) .kv{color:var(--c-green)}
.kpi:nth-child(4) .kv{color:var(--c-purple)}
.mrow{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1.5px solid #ffe3a8;
  border-radius:var(--r-lg);padding:15px 18px;margin-bottom:16px;
}
.mrow .mr-ic{
  width:48px;height:48px;flex:0 0 48px;border-radius:var(--r-md);
  background:linear-gradient(135deg,#fde68a,#fca5a5);
  display:grid;place-items:center;font-size:23px;
}
.mrow .mr-b{flex:1;min-width:0}
.mrow .mr-k{font-size:11px;font-weight:800;color:var(--c-orange)}
.mrow .mr-t{font-size:14.5px;font-weight:800;margin:1px 0 2px}
.mrow .mr-s{font-size:12px;color:var(--muted);font-weight:600}
.btn-mission2{
  flex:0 0 auto;border:none;cursor:pointer;font-family:var(--font);
  font-size:13px;font-weight:800;color:var(--ink);background:var(--yellow);
  padding:11px 18px;border-radius:var(--r-pill);
  box-shadow:0 6px 16px rgba(255,200,40,.4);transition:transform .14s;
}
.btn-mission2:hover{transform:translateY(-2px)}
.srow{
  display:flex;align-items:center;gap:13px;
  padding:11px 4px;border-bottom:1px dashed var(--line);
}
.srow:last-child{border-bottom:none}
.s-ava{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;color:#fff;font-weight:800;
}
.s-name{flex:0 0 96px;font-size:13.5px;font-weight:700;color:var(--ink)}
.s-pb{flex:1;height:9px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.s-pb i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad-primary)}
.s-stat{
  flex:0 0 auto;font-size:11.5px;font-weight:800;
  padding:4px 10px;border-radius:var(--r-pill);
}
.s-stat.done{background:#dcfce7;color:#15803d}
.s-stat.go{background:#e0e7ff;color:#4f46e5}
.s-stat.slow{background:#fee2e2;color:#b91c1c}
.panel-link{
  display:flex;justify-content:space-between;align-items:center;
}
.panel-link .pl-more{
  font-size:12.5px;font-weight:800;color:var(--c-blue);cursor:pointer;
}

/* --- 학급 관리 (T6) --- */
.code-card{
  background:var(--grad-primary);border-radius:var(--r-lg);
  padding:22px 24px;color:#fff;margin:22px 0 16px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.code-card .cc-k{font-size:12.5px;font-weight:700;opacity:.85}
.code-card .cc-code{
  font-size:30px;font-weight:800;letter-spacing:.04em;
  font-family:'SF Mono',Consolas,monospace;margin-top:2px;
}
.code-card .cc-desc{font-size:12.5px;opacity:.9;margin-top:6px;line-height:1.5}
.code-card .cc-copy{
  margin-left:auto;border:none;cursor:pointer;font-family:var(--font);
  font-size:13px;font-weight:800;color:var(--c-purple);background:#fff;
  padding:10px 18px;border-radius:var(--r-pill);transition:transform .14s;
}
.code-card .cc-copy:hover{transform:translateY(-2px)}
.cm-add{
  display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.cm-add .input-wrap{
  flex:1;min-width:200px;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:11px 16px;
}
.cm-add .input-wrap input{
  border:none;outline:none;flex:1;font-family:var(--font);
  font-size:14px;background:transparent;color:var(--ink);
}
.stu-list{display:flex;flex-direction:column}
.stu-li{
  display:flex;align-items:center;gap:12px;
  padding:11px 4px;border-bottom:1px dashed var(--line);
}
.stu-li:last-child{border-bottom:none}
.stu-li .sl-name{flex:1;font-size:13.5px;font-weight:700}
.stu-li .sl-meta{font-size:12px;color:var(--muted);font-weight:600}
.stu-li .sl-del{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:12px;display:grid;place-items:center;transition:.14s;
}
.stu-li .sl-del:hover{border-color:#f87171;color:#dc2626}
.book-sync{
  display:flex;align-items:center;gap:14px;
}
.book-sync .bs-cur{
  flex:1;font-size:13.5px;color:var(--ink-soft);font-weight:600;
}
.book-sync .bs-cur b{color:var(--ink);font-weight:800}

/* ============================================================
   학생 앱 (STUDENT)
   ------------------------------------------------------------
   톤: 재미·캐릭터 중심, 따뜻하고 둥근 파스텔. 모바일 폭 기준.
   하단 탭바(홈·서고·미션·전시장) 상시 노출.
   ============================================================ */

/* --- 학생 앱 셸: 모바일 폭 프레임 --- */
.stu-app{
  max-width:430px;margin:0 auto;min-height:100vh;
  background:linear-gradient(165deg,#fff7ea,#fdeede);
  display:flex;flex-direction:column;
  box-shadow:0 0 60px rgba(40,40,80,.1);position:relative;
}
.stu-body{flex:1;padding-bottom:74px}
/* 앱바 */
.app-bar{
  display:flex;align-items:center;gap:10px;padding:14px 20px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.app-bar .brand{font-size:18px}
.app-bar .heart{width:27px;height:27px;font-size:13px}
.app-spacer{margin-left:auto}
.pt-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;color:var(--ink);
  background:var(--yellow);padding:7px 13px;border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(255,200,40,.4);cursor:pointer;
}
.bell{font-size:18px;cursor:pointer;color:var(--ink-soft);display:inline-flex}
.bell .ti{width:21px;height:21px}
.pt-pill .ti{width:15px;height:15px}
.mini-ava{
  width:32px;height:32px;border-radius:50%;
  background:var(--grad-primary);display:grid;place-items:center;
  font-size:15px;cursor:pointer;
}
/* 하단 탭바 */
.app-nav{
  display:flex;background:var(--surface);
  border-top:1px solid var(--line);
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:30;
}
.app-nav a{
  flex:1;text-align:center;padding:10px 0 11px;
  font-size:11.5px;font-weight:700;color:var(--muted);transition:.14s;
}
.app-nav a .ni{display:block;font-size:20px;margin-bottom:2px}
.app-nav a .ni .ti{width:23px;height:23px;margin:0 auto}
.app-nav a.on{color:var(--c-purple)}
.app-nav a:active{transform:scale(.95)}

/* 섹션 헤더 */
.app-sec{
  font-size:13px;font-weight:800;color:var(--ink);
  padding:14px 22px 0;display:flex;align-items:center;gap:7px;
}
.app-sec .em{font-size:15px;display:inline-flex;align-items:center}
.app-sec .em .ti{width:17px;height:17px;color:#f0991e}
/* 학생 화면 헤더(h3)·작품유형 인라인 라인 아이콘 */
h3 .ti{display:inline-block;width:19px;height:19px;color:#f0991e;vertical-align:-3px;margin:0 2px}
.up-type .ut-emoji .ti{width:22px;height:22px;color:#d9700f;vertical-align:-4px}
/* 서고·미션·전시장 탭 라인 아이콘 */
.shelf-stat .ti{width:15px;height:15px;color:#f0991e;flex:0 0 15px}
.btn-stu .ti{display:inline-block;width:17px;height:17px;vertical-align:-3px;margin-right:5px}
.shelf-foot .ti{display:inline-block;width:15px;height:15px;color:#6fae3d;vertical-align:-3px;margin-left:2px}
.mb-ic{background:linear-gradient(135deg,#ffe1bf,#ffcf9a)}
.mb-ic .ti{width:24px;height:24px;color:#d9700f}
.mb-sub .ti{display:inline-block;width:16px;height:16px;color:#f0991e;vertical-align:-3px;margin-right:4px}
.quest-card .qc-k .ti{width:15px;height:15px;color:#f0991e}
.quest-card .qc-rew .ti{display:inline-block;width:14px;height:14px;color:#a16207;vertical-align:-2px;margin-right:3px}
.pack-reward .pr-k .ti{display:inline-block;width:15px;height:15px;color:#a16207;vertical-align:-3px;margin-right:4px}
.pack-reward.unlocked .pr-k .ti{color:#15803d}
.gal-upload-btn .gu-ic .ti{width:22px;height:22px;color:#fff}
.gal-sort .ti{width:14px;height:14px;color:#f0991e}
.pad{padding:10px 22px 22px}

/* --- 부기 홈: 캐릭터 인사 (정서적 진입점) --- */
.stu-hero{
  display:flex;align-items:flex-start;gap:16px;padding:24px 22px 18px;
}
.stu-greet{flex:1;min-width:0}
.stu-greet .bubble{
  display:inline-block;background:var(--surface);
  border-radius:18px 18px 18px 6px;padding:11px 15px;
  box-shadow:var(--sh-sm);font-size:14px;font-weight:700;
  color:var(--ink);margin-bottom:11px;line-height:1.45;
}
.stu-greet .bubble .ti{display:inline-block;width:17px;height:17px;color:#f0991e;vertical-align:-3px;margin-left:3px}
.lv-row{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.lv-tag{
  font-size:12px;font-weight:800;color:#fff;
  background:var(--c-purple);padding:4px 11px;border-radius:var(--r-pill);
}
.lv-txt{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.lv-bar{height:9px;background:#e3e4f1;border-radius:var(--r-pill);overflow:hidden}
.lv-bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad-primary)}

/* --- 오늘의 미션 카드 (행동 진입점) --- */
.mission-card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:16px 18px;
  display:flex;align-items:center;gap:14px;border:1.5px solid #ffe3a8;
}
.mc-ico{
  flex:0 0 54px;width:54px;height:54px;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(135deg,#fde68a,#fca5a5);
  display:grid;place-items:center;font-size:26px;
}
.mc-ico img{width:100%;height:100%;object-fit:cover;display:block}
.mc-body{flex:1;min-width:0}
.mc-kicker{font-size:11.5px;font-weight:800;color:var(--c-orange)}
.mc-title{font-size:15px;font-weight:800;margin:2px 0 8px}
.mc-title b{background:var(--hl-yellow);padding:1px 5px;border-radius:5px}
.mc-prog{display:flex;align-items:center;gap:9px}
.mc-prog .pb{
  flex:1;height:8px;background:var(--line);
  border-radius:var(--r-pill);overflow:hidden;
}
.mc-prog .pb i{display:block;height:100%;background:var(--green);border-radius:var(--r-pill)}
.mc-prog span{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.btn-go{
  flex:0 0 auto;border:none;cursor:pointer;font-family:var(--font);
  font-size:13px;font-weight:800;color:#fff;background:var(--grad-primary);
  padding:11px 16px;border-radius:var(--r-pill);
  box-shadow:0 8px 18px rgba(110,100,240,.34);transition:transform .14s;
}
.btn-go:hover{transform:translateY(-2px)}
.mc-empty{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:22px;text-align:center;
  font-size:13px;color:var(--muted);font-weight:600;
}

/* --- 내 공간 3카드 --- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.t-card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:16px 10px;text-align:center;
  border:1px solid var(--line);cursor:pointer;transition:transform .16s;
}
.t-card:hover{transform:translateY(-4px)}
.t-emoji{
  width:46px;height:46px;border-radius:var(--r-md);margin:0 auto 9px;
  display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,#ffe1bf,#ffcf9a);color:#d9700f;
}
.t-emoji .ti{width:25px;height:25px;stroke-width:2.1}
.t-card h4{font-size:13px;font-weight:800}
.t-card p{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}

/* --- 학생 가입 화면 --- */
.join-wrap{
  max-width:430px;margin:0 auto;min-height:100vh;
  background:linear-gradient(165deg,#eef2fe,#fbeef6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 26px;text-align:center;position:relative;
  box-shadow:0 0 60px rgba(40,40,80,.1);
}
.join-wrap .join-mascot{margin-bottom:18px}
.join-wrap h2{font-size:24px;font-weight:800}
.join-wrap .join-sub{
  font-size:14px;color:var(--ink-soft);margin:8px 0 28px;font-weight:500;line-height:1.5;
}
.join-card{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:24px 22px;width:100%;
  cursor:pointer;transition:transform .18s,box-shadow .18s;
  border:1.5px solid var(--line);margin-bottom:14px;text-align:left;
  display:flex;align-items:center;gap:15px;
}
.join-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.join-card .jc-ic{
  width:52px;height:52px;flex:0 0 52px;border-radius:16px;
  display:grid;place-items:center;font-size:26px;
}
.join-card.code .jc-ic{background:linear-gradient(135deg,#c7d2fe,#a5b4fc)}
.join-card.solo .jc-ic{background:linear-gradient(135deg,#bbf7d0,#86efac)}
.join-card h3{font-size:16px;font-weight:800}
.join-card p{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500;line-height:1.4}
.join-back{
  position:absolute;top:22px;left:22px;
  font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;
}
/* 학급 코드 입력 */
.code-input-wrap{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:26px 24px;width:100%;
}
.code-input-wrap .ci-label{font-size:13.5px;font-weight:800;margin-bottom:10px;text-align:left}
.code-input-wrap input{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;font-family:var(--font);font-size:18px;font-weight:800;
  text-align:center;letter-spacing:.06em;outline:none;color:var(--ink);
  transition:.18s;
}
.code-input-wrap input:focus{
  border-color:var(--c-purple);box-shadow:0 0 0 4px rgba(139,92,246,.12);
}
.code-input-wrap input::placeholder{color:var(--muted);font-weight:600;letter-spacing:normal}
.code-input-wrap .btn{width:100%;margin-top:14px}
.code-input-wrap .ci-err{
  font-size:12.5px;color:#dc2626;font-weight:600;
  margin-top:10px;min-height:16px;
}
/* 학생 선택 리스트 */
.pick-list{
  width:100%;display:flex;flex-direction:column;gap:9px;
  max-height:60vh;overflow-y:auto;
}
.pick-student{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:13px 15px;cursor:pointer;transition:transform .14s,border-color .14s;
}
.pick-student:active{transform:scale(.98)}
.pick-student:hover{border-color:var(--c-purple)}
.pick-student .ps-ava{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800;
}
.pick-student .ps-name{flex:1;font-size:14.5px;font-weight:800;text-align:left}
.pick-student .ps-tag{
  font-size:11px;font-weight:800;color:var(--c-purple);
  background:#f5f3ff;padding:5px 11px;border-radius:var(--r-pill);
}
.btn-stu{
  font-family:var(--font);font-size:15px;font-weight:800;
  border:none;cursor:pointer;border-radius:var(--r-md);
  padding:13px 24px;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;transition:transform .14s;
}
.btn-stu:hover{transform:translateY(-2px)}
.btn-stu.primary{background:var(--grad-primary);color:#fff;box-shadow:0 8px 20px rgba(110,100,240,.34)}
.btn-stu.green{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(46,204,91,.32)}

/* --- 책 읽기 / 리더 (S2) — PRD 5.1 몰입 화면 --- */
.reader{
  max-width:430px;margin:0 auto;min-height:100vh;
  background:linear-gradient(165deg,#fdf6ec,#fbeede);
  box-shadow:0 0 60px rgba(40,40,80,.1);
  display:flex;flex-direction:column;
}
.rd-top{
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
}
.rd-back{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13.5px;font-weight:800;color:var(--ink-soft);cursor:pointer;
}
.rd-title{font-size:14px;font-weight:800}
.rd-prog{margin-left:auto;display:flex;align-items:center;gap:8px}
.rd-prog .pb{
  width:90px;height:7px;background:#eadfce;
  border-radius:var(--r-pill);overflow:hidden;
}
.rd-prog .pb i{display:block;height:100%;background:var(--c-orange);border-radius:var(--r-pill)}
.rd-prog span{font-size:11.5px;font-weight:700;color:#a07a3e;white-space:nowrap}
.rd-scroll{flex:1;padding-bottom:20px}
.rd-page{
  background:#fffdf8;margin:24px 22px 34px;border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:30px 28px 26px;position:relative;
}
.rd-ch{
  font-size:12.5px;font-weight:800;color:var(--c-orange);
  letter-spacing:.04em;margin-bottom:14px;
}
.rd-page p{
  color:#3a3326;line-height:2;margin-bottom:14px;
}
.rd-page p .talk{color:#7c4a1e;font-weight:700}
.rd-pgno{
  text-align:center;font-size:12px;font-weight:700;
  color:var(--muted);margin-top:10px;
}
.rd-bubble{
  position:absolute;right:18px;bottom:-22px;
  display:flex;align-items:center;gap:8px;
}
.rd-bubble .sb{
  background:var(--surface);border:1.5px solid #ffe3a8;
  border-radius:14px 14px 4px 14px;padding:8px 12px;
  font-size:11.5px;font-weight:800;color:#a06a1e;box-shadow:var(--sh-sm);
}
.rd-controls{
  display:flex;gap:8px;justify-content:center;
  padding:16px 18px;flex-wrap:wrap;
  background:rgba(255,255,255,.82);border-top:1px solid var(--line);
  position:sticky;bottom:0;
}
.rd-ctrl{
  display:flex;align-items:center;gap:6px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:10px 15px;
  font-size:12.5px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;transition:.14s;
}
.rd-ctrl:active{transform:scale(.96)}
.rd-ctrl.on{border-color:var(--c-orange);color:var(--c-orange)}
.rd-ctrl.prime{
  background:var(--grad-sun);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(255,140,60,.34);
}
.rd-ctrl.disabled{opacity:.4;pointer-events:none}
/* 적정 읽기 시간 동안 잠긴 다음 버튼 */
.rd-ctrl.prime.reading-lock{
  background:var(--surface-soft);color:var(--muted);
  box-shadow:none;border:1.5px solid var(--line);
}
/* 글자 크기: 본문 단계 */
.rd-page.fs-s p{font-size:14.5px}
.rd-page.fs-m p{font-size:16px}
.rd-page.fs-l p{font-size:18.5px}
/* 줄 간격 단계 */
.rd-page.ls-s p{line-height:1.7}
.rd-page.ls-m p{line-height:2}
.rd-page.ls-l p{line-height:2.5}
/* 본문 단락: 누르면 읽어주기 (커서 표시) */
.rd-page p{cursor:pointer;border-radius:8px;transition:background .2s;padding:2px 4px;margin:0 -4px 14px}
.rd-page p:active{background:#fdf2e3}
/* 읽어주는 중인 단락 강조 */
.rd-page p.tts-on{
  background:#fff3d6;box-shadow:0 0 0 2px #ffd98a;
}
/* 고대비 모드 — 저시력 배려 */
.reader.rd-hc{background:#000}
.reader.rd-hc .rd-top{background:#000;border-color:#444}
.reader.rd-hc .rd-back,.reader.rd-hc .rd-title{color:#fff}
.reader.rd-hc .rd-page{background:#000;border:2px solid #fff;box-shadow:none}
.reader.rd-hc .rd-page p{color:#fff}
.reader.rd-hc .rd-page p .talk{color:#ffe14d}
.reader.rd-hc .rd-ch{color:#ffe14d}
.reader.rd-hc .rd-pgno{color:#bbb}
.reader.rd-hc .rd-page p.tts-on{background:#333;box-shadow:0 0 0 2px #ffe14d}
.reader.rd-hc .rd-controls{background:#000;border-color:#444}
.reader.rd-hc .rd-ctrl{background:#1a1a1a;border-color:#555;color:#fff}
.reader.rd-hc .rd-ctrl.on{border-color:#ffe14d;color:#ffe14d}
/* 보기 설정 시트 */
.rd-access{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:flex-end;justify-content:center;z-index:55;
}
.rd-access-sheet{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:22px 22px 26px;max-width:430px;width:100%;
}
.rd-access-sheet h4{font-size:17px;font-weight:800}
.rd-access-sheet .ra-sub{font-size:12px;color:var(--muted);font-weight:600;margin:3px 0 16px}
.ra-row{margin-bottom:15px}
.ra-row .ra-label{font-size:13px;font-weight:800;margin-bottom:8px}
.ra-opts{display:flex;gap:8px}
.ra-opt{
  flex:1;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:11px 4px;
  font-family:var(--font);font-size:13px;font-weight:800;
  color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.ra-opt.on{background:var(--c-purple);border-color:var(--c-purple);color:#fff}
.rd-access-sheet .ra-hint{
  font-size:11.5px;font-weight:700;color:#9a6a1e;
  background:#fff5e6;border:1px solid #ffe3a8;
  border-radius:var(--r-md);padding:10px 12px;margin-top:6px;text-align:center;
}
/* 완독 축하 오버레이 */
.rd-done{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:center;justify-content:center;
  z-index:50;padding:30px;
}
.rd-done-card{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);padding:30px 26px;text-align:center;
  max-width:330px;width:100%;
}
.rd-done-card .dc-mascot{display:flex;justify-content:center;margin-bottom:14px}
.rd-done-card h3{font-size:20px;font-weight:800}
.rd-done-card p{font-size:13.5px;color:var(--ink-soft);margin:8px 0 18px;line-height:1.6}
.rd-done-card .dc-reward{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;color:#a16207;
  background:var(--hl-yellow);padding:7px 14px;
  border-radius:var(--r-pill);margin-bottom:18px;
}
.rd-done-card .btn-stu{width:100%}
.rd-done-card .dc-sub{
  font-size:12.5px;font-weight:700;color:var(--c-blue);
  cursor:pointer;margin-top:12px;display:block;
}
/* 메모 입력 시트 */
.rd-memo{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;
}
.rd-memo-sheet{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:22px 22px 26px;max-width:430px;width:100%;
}
.rd-memo-sheet h4{font-size:16px;font-weight:800;margin-bottom:12px}
.rd-memo-sheet textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;font-family:var(--font);font-size:14px;
  resize:none;outline:none;color:var(--ink);
}
.rd-memo-sheet textarea:focus{border-color:var(--c-orange)}
.rd-memo-sheet .ms-row{display:flex;gap:9px;margin-top:12px}
.rd-memo-sheet .ms-row .btn-stu{flex:1}

/* --- 독후 활동 (S3) — PRD 5.8 --- */
.act-head{padding:22px 22px 4px}
.act-head h3{font-size:19px;font-weight:800}
.act-head h3 b{background:var(--hl-pink);padding:1px 6px;border-radius:6px}
.act-tabs{display:flex;gap:8px;padding:12px 22px 0;flex-wrap:wrap}
.act-tab{
  font-size:13px;font-weight:800;padding:9px 15px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--muted);
  cursor:pointer;transition:.14s;
}
.act-tab.on{background:var(--c-purple);border-color:var(--c-purple);color:#fff}
/* 퀴즈 */
.qz-prog{display:flex;align-items:center;gap:9px;padding:16px 22px 4px}
.qz-prog .pb{
  flex:1;height:8px;background:#e3e4f1;
  border-radius:var(--r-pill);overflow:hidden;
}
.qz-prog .pb i{display:block;height:100%;background:var(--c-purple);border-radius:var(--r-pill)}
.qz-prog span{font-size:12px;font-weight:800;color:var(--c-purple);white-space:nowrap}
.qz-card{
  margin:12px 22px 0;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:22px;
}
.qz-q{font-size:16px;font-weight:800;color:var(--ink);line-height:1.5}
.qz-q .qn{color:var(--c-purple)}
.qz-opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.qz-opt{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;font-size:14px;font-weight:700;
  color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.qz-opt .rad{
  width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  border:2px solid #d3d5e4;
}
.qz-opt.on{border-color:var(--c-green);background:#f0fdf4;color:var(--ink)}
.qz-opt.on .rad{border-color:var(--c-green);background:var(--c-green);box-shadow:inset 0 0 0 3px #fff}
.qz-opt.correct{border-color:var(--c-green);background:#f0fdf4}
.qz-opt.wrong{border-color:#f87171;background:#fef2f2}
.qz-opt.locked{pointer-events:none}
.qz-feedback{
  margin:14px 22px 0;font-size:13px;font-weight:700;
  padding:12px 15px;border-radius:var(--r-md);
}
.qz-feedback.ok{background:#f0fdf4;color:#15803d}
.qz-feedback.no{background:#fef2f2;color:#dc2626}
.qz-foot{display:flex;justify-content:flex-end;padding:16px 22px 26px}
/* 퀴즈 완료 */
.qz-result{
  margin:24px 22px;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);
  padding:28px 22px;text-align:center;
}
.qz-result .qr-mascot{display:flex;justify-content:center;margin-bottom:12px}
.qz-result h3{font-size:20px;font-weight:800}
.qz-result .qr-score{
  font-size:32px;font-weight:800;color:var(--c-purple);margin:10px 0;
}
.qz-result p{font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.qz-result .dc-reward{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;color:#a16207;
  background:var(--hl-yellow);padding:7px 14px;
  border-radius:var(--r-pill);margin-bottom:16px;
}
/* 독후감 */
.review-area{padding:16px 22px 26px}
.review-field{margin-bottom:14px}
.review-field label{font-size:13px;font-weight:800;display:block;margin-bottom:7px}
.review-field input,.review-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;font-family:var(--font);font-size:14px;
  outline:none;color:var(--ink);resize:none;
}
.review-field input:focus,.review-field textarea:focus{border-color:var(--c-purple)}
.review-area .btn-stu{width:100%}
.review-hint{
  font-size:12px;color:var(--muted);font-weight:600;
  margin-top:6px;line-height:1.5;
}
/* 토론 */
.disc-area{padding:16px 22px 26px}
.disc-topic{
  background:linear-gradient(135deg,#eef2fe,#fbeef6);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;margin-bottom:16px;
}
.disc-topic .dt-k{font-size:11px;font-weight:800;color:var(--c-purple)}
.disc-topic .dt-q{font-size:14.5px;font-weight:800;margin-top:4px;line-height:1.5}
.disc-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.disc-item{
  background:var(--surface);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);padding:12px 14px;
  display:flex;gap:10px;align-items:flex-start;
}
.disc-item .di-ava{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;color:#fff;font-weight:800;
}
.disc-item .di-name{font-size:12.5px;font-weight:800}
.disc-item .di-text{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:2px}
.disc-input{display:flex;gap:9px}
.disc-input input{
  flex:1;border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:11px 16px;font-family:var(--font);font-size:13.5px;
  outline:none;color:var(--ink);
}
.disc-input input:focus{border-color:var(--c-purple)}
.disc-input button{
  border:none;cursor:pointer;font-family:var(--font);font-size:18px;
  background:var(--grad-primary);color:#fff;
  width:44px;border-radius:50%;flex:0 0 44px;
}

/* --- 부기와의 AI 대화 (S4) — PRD 5.5 --- */
.chat-screen{
  max-width:430px;margin:0 auto;min-height:100vh;
  background:linear-gradient(165deg,#eef2fe,#fbeef6);
  box-shadow:0 0 60px rgba(40,40,80,.1);
  display:flex;flex-direction:column;
}
.chat-top{
  display:flex;align-items:center;gap:11px;padding:12px 18px;
  background:rgba(255,255,255,.84);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
}
.chat-top .ct-back{
  font-size:13.5px;font-weight:800;color:var(--ink-soft);cursor:pointer;
}
.chat-top .ct-book{font-size:11px;font-weight:700;color:var(--muted)}
.chat-top .ct-name{font-size:14px;font-weight:800}
.chat-body{
  flex:1;padding:18px;display:flex;flex-direction:column;gap:13px;
  overflow-y:auto;
}
.msg{display:flex;gap:9px;max-width:84%}
.msg.bk{align-self:flex-start}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg .ava{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
}
.msg.bk .ava{background:var(--grad-sun)}
.msg.me .ava{
  background:var(--grad-primary);color:#fff;
  font-size:14px;font-weight:800;
}
.msg .bub{
  font-size:13.5px;font-weight:600;line-height:1.6;
  padding:11px 14px;border-radius:16px;
}
.msg.bk .bub{
  background:var(--surface);color:var(--ink);
  border-radius:4px 16px 16px 16px;box-shadow:var(--sh-sm);
}
.msg.me .bub{
  background:var(--c-purple);color:#fff;
  border-radius:16px 4px 16px 16px;
}
/* 부기 캐릭터를 아바타 안에 작게 */
.msg .ava .mascot{
  width:34px;height:34px;border-radius:50%;animation:none;box-shadow:none;
}
.msg .ava .mascot .m-eye{top:12px;width:6px;height:8px}
.msg .ava .mascot .m-eye.l{left:9px}
.msg .ava .mascot .m-eye.r{right:9px}
.msg .ava .mascot .m-cheek{top:21px;width:6px;height:4px}
.msg .ava .mascot .m-cheek.l{left:6px}
.msg .ava .mascot .m-cheek.r{right:6px}
.msg .ava .mascot .m-mouth{top:21px;width:9px;height:5px;border-width:2px}
/* 부기가 생각 중 */
.msg.typing .bub{
  display:flex;gap:4px;align-items:center;
}
.msg.typing .bub i{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:typedot 1s infinite;
}
.msg.typing .bub i:nth-child(2){animation-delay:.2s}
.msg.typing .bub i:nth-child(3){animation-delay:.4s}
@keyframes typedot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-save{
  margin:2px 18px 10px;display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;color:#3b6f3f;
  background:#eafaf0;border:1px solid #c9eed4;
  border-radius:var(--r-pill);padding:8px 13px;align-self:center;
}
.chat-input{
  display:flex;align-items:center;gap:10px;
  margin:0 18px 18px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:9px 10px 9px 16px;position:sticky;bottom:0;
}
.chat-input input{
  flex:1;border:none;outline:none;font-family:var(--font);
  font-size:13.5px;background:transparent;color:var(--ink);
}
.chat-input input::placeholder{color:var(--muted)}
.chat-input .send{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  background:var(--grad-primary);border:none;cursor:pointer;
  display:grid;place-items:center;font-size:16px;color:#fff;
}
.chat-input .send:disabled{opacity:.4;cursor:default}

/* --- 미션 & 퀘스트 (S5) --- */
.mb-head{padding:22px 22px 2px}
.mb-head h3{font-size:20px;font-weight:800}
.mb-sub{
  font-size:12.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;padding:16px 22px 8px;
}
.mb-list{padding:0 22px}
.mb-card{
  display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:14px 16px;margin-bottom:11px;
  cursor:pointer;transition:transform .14s;
}
.mb-card:active{transform:scale(.98)}
.mb-card.live{border:1.5px solid #ffe3a8}
.mb-card.done{opacity:.72;cursor:default}
.mb-ic{
  width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-md);
  display:grid;place-items:center;font-size:22px;
}
.mb-b{flex:1;min-width:0}
.mb-t{font-size:14px;font-weight:800;line-height:1.35}
.mb-meta{display:flex;align-items:center;gap:8px;margin-top:5px}
.mb-meta .pb{
  width:110px;height:7px;background:#e3e4f1;
  border-radius:var(--r-pill);overflow:hidden;
}
.mb-meta .pb i{display:block;height:100%;background:var(--green);border-radius:var(--r-pill)}
.mb-meta small{font-size:11px;font-weight:700;color:var(--muted)}
.mb-rew{
  flex:0 0 auto;font-size:11.5px;font-weight:800;color:#a16207;
  background:var(--hl-yellow);padding:6px 10px;border-radius:var(--r-pill);
}
.mb-rew.ok{color:#15803d;background:#dcfce7}
.dday{
  font-size:10.5px;font-weight:800;color:#b91c1c;
  background:#fee2e2;padding:3px 8px;border-radius:var(--r-pill);
}
.mb-empty{
  margin:0 22px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:20px;text-align:center;
  font-size:13px;color:var(--muted);font-weight:600;
}
/* 질문 퀘스트 (v0.3 5.8) — 데일리 카드 */
.quest-card{
  margin:12px 22px 4px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fff4e2,#ffe9d2);
  border:1.5px solid #f3dcb6;padding:16px 18px;
}
.quest-card .qc-k{
  font-size:11px;font-weight:800;color:var(--c-purple);
  display:flex;align-items:center;gap:6px;
}
.quest-card .qc-t{font-size:14.5px;font-weight:800;margin:6px 0 4px;line-height:1.4}
.quest-card .qc-d{font-size:12px;color:var(--ink-soft);font-weight:600;line-height:1.5}
.quest-card .qc-row{
  display:flex;align-items:center;gap:10px;margin-top:12px;
}
.quest-card .qc-rew{
  font-size:11px;font-weight:800;color:#a16207;
  background:var(--hl-yellow);padding:5px 10px;border-radius:var(--r-pill);
}
.quest-card .btn-go{margin-left:auto}
.quest-card.done{
  background:#f0fdf4;border-color:#bbf7d0;
}
.quest-card.done .qc-k{color:#15803d}

/* --- 깜짝 퀴즈 --- */
.quiz-card{
  margin:12px 22px 0;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border:1.5px solid #fcd34d;padding:16px 18px;
}
.quiz-card .qz-k{
  font-size:11px;font-weight:800;color:#a16207;
  display:flex;align-items:center;gap:6px;
}
.quiz-card .qz-t{font-size:14.5px;font-weight:800;margin:6px 0 4px;line-height:1.4}
.quiz-card .qz-d{font-size:12px;color:var(--ink-soft);font-weight:600;line-height:1.5}
.quiz-card .qz-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.quiz-card .qz-rew{
  font-size:11px;font-weight:800;color:#a16207;
  background:#fff;padding:5px 10px;border-radius:var(--r-pill);
}
.quiz-card.done{background:#f0fdf4;border-color:#bbf7d0}
.quiz-card.done .qz-k{color:#15803d}
/* 퀴즈 풀이 화면 */
.quiz-wrap{padding:22px}
.quiz-stage{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:24px 22px;
}
.quiz-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:800;color:#fff;
  background:var(--c-orange);padding:5px 12px;border-radius:var(--r-pill);
}
.quiz-q{
  font-size:18px;font-weight:800;line-height:1.5;
  margin:16px 0 20px;color:var(--ink);
}
.quiz-opts{display:flex;flex-direction:column;gap:10px}
.quiz-opt{
  border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:14px 16px;
  font-family:var(--font);font-size:14px;font-weight:700;
  color:var(--ink);cursor:pointer;text-align:left;transition:.14s;
  display:flex;align-items:center;gap:10px;
}
.quiz-opt:active{transform:scale(.98)}
.quiz-opt .qo-no{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:var(--surface-soft);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--muted);
}
.quiz-opt.correct{border-color:var(--c-green);background:#f0fdf4}
.quiz-opt.correct .qo-no{background:var(--c-green);color:#fff}
.quiz-opt.wrong{border-color:#f87171;background:#fef2f2}
.quiz-opt.wrong .qo-no{background:#f87171;color:#fff}
.quiz-opt.dim{opacity:.5}
.quiz-result{
  margin-top:18px;border-radius:var(--r-md);padding:16px;
  text-align:center;
}
.quiz-result.ok{background:#f0fdf4;border:1.5px solid #bbf7d0}
.quiz-result.no{background:#fff7ed;border:1.5px solid #fed7aa}
.quiz-result .qr-emoji{font-size:34px}
.quiz-result .qr-msg{font-size:15px;font-weight:800;margin:6px 0 4px}
.quiz-result .qr-explain{font-size:12.5px;color:var(--ink-soft);font-weight:600;line-height:1.55}
.quiz-result .qr-reward{
  display:inline-block;margin-top:10px;font-size:12px;font-weight:800;
  color:#a16207;background:var(--hl-yellow);padding:6px 14px;border-radius:var(--r-pill);
}

/* --- 기분 기반 책 추천 --- */
.mood-card{
  margin:12px 22px 0;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fff4e2,#ffe9d2);
  border:1.5px solid #f3dcb6;padding:16px 18px;
}
.mood-card .mc-k{font-size:11px;font-weight:800;color:var(--c-blue)}
.mood-card .mc-t{font-size:14.5px;font-weight:800;margin:6px 0 12px}
.mood-picks{display:flex;gap:8px;flex-wrap:wrap}
.mood-pick{
  flex:1;min-width:64px;border:1.5px solid var(--line);
  background:var(--surface);border-radius:var(--r-md);
  padding:12px 4px;text-align:center;cursor:pointer;transition:.14s;
}
.mood-pick:active{transform:scale(.95)}
.mood-pick.on{border-color:var(--c-purple);background:#fff3e6}
.mood-pick .mp-emoji{font-size:24px}
.mood-pick .mp-name{font-size:10.5px;font-weight:800;color:var(--ink-soft);margin-top:3px}
.mood-result{margin-top:14px}
.mood-rec-book{
  display:flex;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:12px 14px;margin-top:9px;cursor:pointer;transition:transform .14s;
}
.mood-rec-book:active{transform:scale(.98)}
.mood-rec-book .mrb-cov{
  width:42px;height:54px;flex:0 0 42px;border-radius:7px;overflow:hidden;
  display:grid;place-items:center;font-size:21px;box-shadow:var(--sh-sm);
}
.mood-rec-book .mrb-cov img{width:100%;height:100%;object-fit:cover;display:block}
.mood-rec-book .mrb-b{flex:1;min-width:0}
.mood-rec-book .mrb-t{font-size:13.5px;font-weight:800}
.mood-rec-book .mrb-why{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.mood-rec-book .mrb-go{
  font-size:11px;font-weight:800;color:var(--c-purple);
  background:#fff3e6;padding:6px 11px;border-radius:var(--r-pill);white-space:nowrap;
}

/* --- 독서 랭킹 --- */
.rank-head{padding:20px 22px 4px}
.rank-head h3{font-size:19px;font-weight:800;display:flex;align-items:center;gap:7px}
.rank-head p{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:3px}
.rank-tabs{display:flex;gap:8px;padding:12px 22px 0}
.rank-tab{
  flex:1;text-align:center;font-size:12.5px;font-weight:800;
  padding:9px 6px;border-radius:var(--r-pill);
  background:var(--surface);border:1.5px solid var(--line);
  color:var(--muted);cursor:pointer;transition:.14s;
}
.rank-tab.on{background:var(--c-orange);border-color:var(--c-orange);color:#fff}
/* 시상대 (상위 3위) */
.podium{
  display:flex;align-items:flex-end;justify-content:center;gap:8px;
  padding:20px 22px 6px;
}
.podium-col{
  flex:1;max-width:104px;display:flex;flex-direction:column;align-items:center;
}
.podium-col .pc-medal{font-size:24px}
.podium-col .pc-name{
  font-size:12px;font-weight:800;margin-top:3px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.podium-col .pc-score{font-size:11px;font-weight:800;color:var(--c-orange);margin-top:1px}
.podium-col .pc-bar{
  width:100%;border-radius:8px 8px 0 0;margin-top:8px;
  display:grid;place-items:center;color:#fff;font-size:18px;font-weight:800;
}
.podium-col.p1 .pc-bar{height:78px;background:linear-gradient(180deg,#fcd34d,#f59e0b)}
.podium-col.p2 .pc-bar{height:58px;background:linear-gradient(180deg,#cbd5e1,#94a3b8)}
.podium-col.p3 .pc-bar{height:44px;background:linear-gradient(180deg,#fdba74,#f97316)}
/* 랭킹 리스트 */
.rank-list{padding:10px 22px 24px}
.rank-row{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:12px 14px;margin-bottom:9px;
}
.rank-row.me{border:2px solid var(--c-purple);background:#faf9ff}
.rank-row.mine-school{border-color:#fdba74;background:#fff8f0}
.rank-num{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;
  background:var(--surface-soft);color:var(--ink-soft);
}
.rank-num.top{background:var(--grad-sun);color:#fff}
.rank-info{flex:1;min-width:0}
.rank-name{font-size:13.5px;font-weight:800}
.rank-name .me-tag{
  font-size:9.5px;font-weight:800;color:#fff;background:var(--c-purple);
  padding:2px 7px;border-radius:var(--r-pill);margin-left:6px;
}
.rank-name .me-tag.school{background:var(--c-orange)}
.rank-sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}
.rank-score{
  font-size:13px;font-weight:800;color:var(--c-orange);
  display:flex;align-items:center;gap:3px;
}
.rank-mybox{
  margin:6px 22px 0;background:var(--grad-primary);
  border-radius:var(--r-lg);padding:14px 18px;color:#fff;
  display:flex;align-items:center;gap:12px;
}
.rank-mybox .rmb-rank{font-size:24px;font-weight:800}
.rank-mybox .rmb-txt{flex:1;min-width:0}
.rank-mybox .rmb-t{font-size:13px;font-weight:800}
.rank-mybox .rmb-d{font-size:11.5px;opacity:.9;margin-top:1px}
.rank-note{
  margin:12px 22px 0;font-size:11.5px;font-weight:600;
  color:var(--ink-soft);background:var(--surface-soft);
  border-radius:var(--r-md);padding:11px 14px;line-height:1.5;text-align:center;
}

/* --- 내 서고 (S6) --- */
.shelf-head{padding:22px 22px 6px;display:flex;align-items:center;gap:14px}
.shelf-head .sh-txt{flex:1;min-width:0}
.shelf-head h3{font-size:19px;font-weight:800}
.shelf-head h3 .nm{color:var(--c-purple)}
.shelf-head p{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.shelf-stats{display:flex;gap:7px;padding:10px 22px 4px;flex-wrap:wrap}
.shelf-stat{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);
  padding:6px 11px;border-radius:var(--r-pill);
}
/* 부기 NPC 진화 카드 */
.buoy-evo{
  margin:12px 22px 4px;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  border:1px solid var(--line);padding:16px 18px;
  display:flex;align-items:center;gap:16px;
}
.buoy-evo .be-txt{flex:1;min-width:0}
.buoy-evo .be-stage{font-size:14px;font-weight:800;color:var(--c-orange)}
.buoy-evo .be-desc{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.buoy-evo .be-bar{
  height:7px;background:#e3e4f1;border-radius:var(--r-pill);
  overflow:hidden;margin-top:8px;
}
.buoy-evo .be-bar i{display:block;height:100%;background:var(--grad-sun);border-radius:var(--r-pill)}
.buoy-evo .be-next{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:5px}
/* 책장 */
.shelf-wrap{padding:14px 22px 20px}
.shelf-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.book-spine{
  aspect-ratio:5/13;border-radius:3px 5px 5px 3px;
  display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;padding:8px 3px;cursor:pointer;
  box-shadow:2px 3px 7px rgba(40,40,80,.18);
  transition:transform .14s;
  position:relative;overflow:hidden;
}
.book-spine:hover{transform:translateY(-4px)}
.book-spine .bs-emoji{font-size:15px}
/* 표지 삽화가 있으면 책등 배경으로 채우고, 어두운 스크림 위에 세로 제목 */
.book-spine .bs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.book-spine.has-cov{justify-content:flex-end}
.book-spine.has-cov::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,30,.1) 38%,rgba(20,16,30,.66))}
.book-spine .bs-emoji,.book-spine .bs-title{position:relative;z-index:2}
.book-spine .bs-title{
  font-size:8.5px;font-weight:800;color:#fff;
  writing-mode:vertical-rl;text-orientation:mixed;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  max-height:78px;overflow:hidden;letter-spacing:-.02em;
}
.book-spine.empty{
  background:var(--surface);border:1.5px dashed var(--line);
  box-shadow:none;display:grid;place-items:center;cursor:default;
}
.book-spine.empty span{font-size:16px;color:var(--muted)}
.shelf-line{
  height:9px;background:linear-gradient(180deg,#e7d3b6,#d8bd95);
  border-radius:3px;margin:6px 0 18px;
  box-shadow:0 4px 8px rgba(40,40,80,.1);
}
.shelf-foot{
  font-size:12px;font-weight:700;color:var(--ink-soft);
  background:var(--surface-soft);border:1px dashed var(--line);
  border-radius:var(--r-md);padding:11px 14px;text-align:center;
}
/* 책 상세 시트 */
.book-sheet{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;
}
.book-sheet-in{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:22px 22px 26px;max-width:430px;width:100%;max-height:80vh;overflow-y:auto;
}
.book-sheet-in .bsh-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.book-sheet-in .bsh-cov{
  width:48px;height:60px;flex:0 0 48px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;font-size:24px;box-shadow:var(--sh-sm);
}
.book-sheet-in .bsh-cov img{width:100%;height:100%;object-fit:cover;display:block}
.book-sheet-in .bsh-t{font-size:16px;font-weight:800}
.book-sheet-in .bsh-a{font-size:12px;color:var(--muted);font-weight:600}
.book-sheet-in .bsh-x{margin-left:auto;font-size:20px;color:var(--muted);cursor:pointer}
.bsh-block{margin-top:12px}
.bsh-block .bb-k{
  font-size:11px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.bsh-block .bb-v{
  font-size:13px;color:var(--ink-soft);line-height:1.6;
  background:var(--surface-soft);border-radius:var(--r-md);padding:11px 14px;
}
.bsh-chat{display:flex;flex-direction:column;gap:6px}
.bsh-chat .bc{font-size:12px;line-height:1.5;padding:7px 11px;border-radius:10px;max-width:85%}
.bsh-chat .bc.bk{background:#fff5e6;color:#7c4a1e;align-self:flex-start}
.bsh-chat .bc.me{background:#fff3e6;color:var(--c-purple);align-self:flex-end}

/* --- 독서 스코어 & 배지 (S6) --- */
.sc-hero{display:flex;align-items:center;gap:18px;padding:24px 22px 16px}
.score-ring{
  flex:0 0 auto;width:108px;height:108px;border-radius:50%;
  display:grid;place-items:center;
}
.score-ring .in{
  width:82px;height:82px;border-radius:50%;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.score-ring .in b{font-size:23px;font-weight:800;color:var(--c-purple);line-height:1}
.score-ring .in span{font-size:10px;font-weight:700;color:var(--muted);margin-top:2px}
.sc-hero .sc-info{flex:1;min-width:0}
.sc-hero .sc-name{font-size:16px;font-weight:800}
.sc-hero .sc-name b{color:var(--c-purple)}
.sc-lv{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:800;color:#fff;background:var(--c-purple);
  padding:4px 11px;border-radius:var(--r-pill);margin-top:6px;
}
.sc-next{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:7px}
.sc-stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 22px 4px}
.sc-st{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:13px 8px;text-align:center;
}
.sc-st b{font-size:19px;font-weight:800;color:var(--ink)}
.sc-st span{font-size:10.5px;font-weight:700;color:var(--muted);display:block;margin-top:2px}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:12px 22px 24px}
.bdg{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:13px 6px;text-align:center;
}
.bdg .bi{
  width:46px;height:46px;border-radius:50%;margin:0 auto 7px;
  display:grid;place-items:center;font-size:22px;
}
.bdg .bn{font-size:10.5px;font-weight:800;color:var(--ink);line-height:1.3}
.bdg.lock{opacity:.5}
.bdg.lock .bi{filter:grayscale(1)}

/* --- 나의 아바타 꾸미기 (S7a) --- */
.du-head{padding:20px 22px 2px}
.du-head h3{font-size:19px;font-weight:800}
.du-head p{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.du-stage{
  margin:14px 22px 0;border-radius:var(--r-lg);
  background:linear-gradient(160deg,#ede9fe,#fce7f3);
  border:1px solid #ddd6fe;padding:22px 18px;
  text-align:center;position:relative;overflow:hidden;
}
.du-stage .sparkle{position:absolute;font-size:15px;opacity:.7}
.du-mascot-wrap{
  display:inline-block;position:relative;
  transform:scale(1.2);margin:14px 0 22px;
}
/* 아바타: 부기 마스코트 위에 착용 아이템을 겹쳐 표현 */
.av-item-layer{
  position:absolute;font-size:22px;pointer-events:none;
}
.av-item-layer.모자{top:-20px;left:50%;transform:translateX(-50%)}
.av-item-layer.안경{top:38px;left:50%;transform:translateX(-50%);font-size:20px}
.av-item-layer.소품{bottom:-6px;right:-14px;font-size:20px}
.av-item-layer.의상{bottom:-12px;left:50%;transform:translateX(-50%);font-size:20px}
.du-podium{
  width:120px;height:14px;border-radius:50%;
  background:rgba(139,92,246,.18);margin:0 auto;
}
.du-name{font-size:13px;font-weight:800;color:var(--c-purple);margin-top:10px}
.du-bg-label{
  font-size:11px;font-weight:700;color:var(--muted);margin-top:3px;
}
.du-tabs{display:flex;gap:7px;padding:16px 22px 0;flex-wrap:wrap}
.du-tab{
  font-size:12.5px;font-weight:800;padding:8px 14px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--muted);cursor:pointer;
}
.du-tab.on{background:var(--c-purple);border-color:var(--c-purple);color:#fff}
.du-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:14px 22px 8px}
.du-item{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:14px 6px;text-align:center;cursor:pointer;transition:transform .14s;
}
.du-item:active{transform:scale(.96)}
.du-item .di-emoji{font-size:30px;line-height:1}
.du-item .di-name{font-size:10.5px;font-weight:800;color:var(--ink);margin-top:7px}
.du-item .di-state{
  font-size:9.5px;font-weight:800;margin-top:6px;
  padding:3px 8px;border-radius:var(--r-pill);display:inline-block;
}
.di-state.worn{background:#ede9fe;color:var(--c-purple)}
.di-state.have{background:#dcfce7;color:#15803d}
.di-state.lock{background:var(--surface-soft);color:var(--muted)}
.du-item.worn{border-color:var(--c-purple);box-shadow:0 0 0 3px rgba(139,92,246,.13)}
.du-item.locked{opacity:.6}
.du-item.locked .di-emoji{filter:grayscale(.7)}

/* --- 서고 꾸미기 (책방 꾸미기) — PRD v0.3 5.5 --- */
.decor-stage{
  margin:14px 22px 0;border-radius:var(--r-lg);
  padding:20px 18px 16px;position:relative;overflow:hidden;
  min-height:200px;
  background:linear-gradient(170deg,#fdf6ec,#f4e6d0);
  border:1px solid #e6d6b8;
}
/* 책방 안: 책장 + 꾸민 소품들 */
.decor-room{
  position:relative;height:172px;
}
.decor-shelf{
  position:absolute;left:0;right:0;bottom:30px;height:74px;
  background:linear-gradient(180deg,#c89b6a,#a87a4c);
  border-radius:6px;
  box-shadow:0 6px 14px rgba(80,55,20,.25);
  display:flex;align-items:center;gap:5px;padding:0 10px;
}
.decor-shelf .ds-book{
  width:13px;border-radius:2px;
}
.decor-floor{
  position:absolute;left:0;right:0;bottom:0;height:30px;
  background:linear-gradient(180deg,#d8bd95,#c4a578);
  border-radius:0 0 6px 6px;
}
/* 꾸민 소품 슬롯별 위치 */
.decor-slot{
  position:absolute;font-size:30px;
  filter:drop-shadow(0 3px 4px rgba(80,55,20,.25));
}
.decor-slot.식물  {bottom:30px;right:18px;font-size:30px}
.decor-slot.조명  {top:8px;right:24px;font-size:28px}
.decor-slot.가구  {bottom:30px;left:18px;font-size:32px}
.decor-slot.벽장식{top:10px;left:22px;font-size:28px}
.decor-empty-hint{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  font-size:11.5px;font-weight:700;color:#a98855;white-space:nowrap;
}
.decor-theme-label{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:800;color:#fff;
  background:rgba(120,90,40,.6);padding:3px 10px;border-radius:var(--r-pill);
}

/* --- 포인트 상점 (S7a) --- */
.shop-head{padding:20px 22px 2px}
.shop-head h3{font-size:19px;font-weight:800;display:flex;align-items:center;gap:7px}
.shop-head p{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:3px}
.shop-bal{
  margin:12px 22px 0;background:var(--grad-sun);
  border-radius:var(--r-lg);padding:15px 18px;color:#fff;
  display:flex;align-items:center;gap:10px;
}
.shop-bal .sb-k{font-size:12px;font-weight:700;opacity:.9}
.shop-bal .sb-v{font-size:24px;font-weight:800;margin-left:auto}
.shop-cat{
  font-size:13px;font-weight:800;color:var(--ink);
  padding:18px 22px 4px;display:flex;align-items:center;gap:7px;
}
.shop-cat .sc-tag{
  font-size:10px;font-weight:700;color:var(--muted);
  background:var(--surface-soft);padding:2px 8px;border-radius:var(--r-pill);
}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 22px}
.shop-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  overflow:hidden;cursor:pointer;transition:transform .14s;
}
.shop-card:active{transform:scale(.97)}
.shop-card .sc-thumb{
  height:62px;display:grid;place-items:center;font-size:28px;
}
.shop-card .sc-body{padding:8px 8px 10px;text-align:center}
.shop-card .sc-name{font-size:10.5px;font-weight:800;line-height:1.3}
.shop-card .sc-price{
  font-size:10px;font-weight:800;color:#a16207;margin-top:5px;
}
.shop-card .sc-price.owned{color:#15803d}
.shop-card.locked{opacity:.62}
.shop-real-note{
  margin:10px 22px 22px;font-size:11.5px;font-weight:700;
  color:#9a3412;background:#ffedd5;border:1px solid #fed7aa;
  border-radius:var(--r-md);padding:11px 14px;text-align:center;line-height:1.5;
}

/* --- 명언 책방 (S7b) — PRD v0.3 5.6 --- */
.quote-head{padding:20px 22px 2px}
.quote-head h3{font-size:19px;font-weight:800;display:flex;align-items:center;gap:7px}
.quote-head p{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:3px;line-height:1.5}
/* 책방 벽 — 액자를 거는 공간 */
.quote-wall{
  margin:14px 22px 0;border-radius:var(--r-lg);
  background:
    repeating-linear-gradient(90deg,#e8dcc8 0 2px,transparent 2px 46px),
    linear-gradient(180deg,#f3e9d7,#e9dcc4);
  border:1px solid #ddcdb0;padding:20px 16px 16px;
  box-shadow:inset 0 6px 18px rgba(120,90,40,.12);
}
.quote-wall .qw-rail{
  height:7px;background:linear-gradient(180deg,#c9a978,#a98855);
  border-radius:3px;margin-bottom:16px;
  box-shadow:0 3px 6px rgba(80,55,20,.22);
}
.qw-frames{display:flex;flex-direction:column;gap:13px}
/* 걸린 명언 액자 */
.qframe{
  background:#fffdf6;border:5px solid #c9a978;
  border-radius:5px;padding:16px 16px 13px;position:relative;
  box-shadow:0 6px 14px rgba(80,55,20,.22);
}
.qframe::before{
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:2px;height:9px;background:#9c7b4a;
}
.qframe::after{
  content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;
  background:#b9954f;border:1.5px solid #9c7b4a;
}
.qframe .qf-mark{font-size:20px;color:#c9a978;line-height:.6}
.qframe .qf-text{
  font-size:14px;font-weight:800;color:#4a3a22;
  line-height:1.6;margin:6px 0 8px;font-family:var(--font);
}
.qframe .qf-src{font-size:11.5px;font-weight:700;color:#9c7b4a;text-align:right}
.qframe.reward-frame{border-color:#d4af37;background:#fffbea}
.qframe.reward-frame .qf-mark{color:#d4af37}
.qw-empty{
  text-align:center;font-size:12.5px;font-weight:600;
  color:#9c7b4a;padding:18px 8px;
}
/* 명언 상점 목록 */
.quote-shop{padding:18px 22px 8px}
.quote-shop .qs-cat{
  font-size:13px;font-weight:800;color:var(--ink);
  margin-bottom:10px;display:flex;align-items:center;gap:7px;
}
.qrow{
  display:flex;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:13px 15px;margin-bottom:10px;
}
.qrow .qr-ic{
  width:42px;height:42px;flex:0 0 42px;border-radius:var(--r-md);
  background:linear-gradient(135deg,#ddd6fe,#c4b5fd);
  display:grid;place-items:center;font-size:20px;
}
.qrow .qr-b{flex:1;min-width:0}
.qrow .qr-t{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.45}
.qrow .qr-s{font-size:11px;color:var(--muted);font-weight:700;margin-top:3px}
.qrow .qr-btn{
  flex:0 0 auto;border:none;cursor:pointer;font-family:var(--font);
  font-size:11.5px;font-weight:800;padding:9px 13px;border-radius:var(--r-pill);
  white-space:nowrap;transition:transform .14s;
}
.qrow .qr-btn:active{transform:scale(.95)}
.qr-btn.buy{background:var(--grad-primary);color:#fff}
.qr-btn.owned{background:#dcfce7;color:#15803d;cursor:default}
.qr-btn.locked{background:var(--surface-soft);color:var(--muted);cursor:default}
.qr-btn.poor{background:var(--surface-soft);color:var(--muted)}
.quote-detox{
  margin:6px 22px 22px;font-size:11.5px;font-weight:600;
  color:#5b4a8a;background:#ede9fe;border:1px solid #ddd6fe;
  border-radius:var(--r-md);padding:11px 14px;line-height:1.55;text-align:center;
}

/* --- 전시장 (S7b) — PRD v0.3 5.11 --- */
.gal-head{padding:20px 22px 4px}
.gal-head h3{font-size:19px;font-weight:800;display:flex;align-items:center;gap:7px}
.gal-head p{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:3px}
.gal-tabs{display:flex;gap:8px;padding:12px 22px 0}
.gal-tab{
  font-size:12.5px;font-weight:800;padding:8px 15px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--muted);cursor:pointer;
}
.gal-tab.on{background:var(--c-pink);border-color:var(--c-pink);color:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;padding:14px 22px 24px}
.gal-card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);overflow:hidden;border:1px solid var(--line);
  cursor:pointer;transition:transform .16s;
}
.gal-card:active{transform:scale(.97)}
.gal-card.mine{border:2px solid var(--c-purple)}
.gal-thumb{height:92px;display:grid;place-items:center;font-size:34px;position:relative}
.gal-mine-tag{
  position:absolute;top:8px;left:8px;font-size:9.5px;font-weight:800;
  color:#fff;background:var(--c-purple);padding:3px 9px;border-radius:var(--r-pill);
}
.gal-type-tag{
  position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:800;
  color:#fff;background:rgba(0,0,0,.3);padding:3px 8px;border-radius:var(--r-pill);
  backdrop-filter:blur(2px);
}
.gal-body{padding:11px 13px 13px}
.gal-body h5{font-size:13px;font-weight:800;line-height:1.35}
.gal-body .who{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.gal-heart{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:800;color:var(--c-pink);margin-top:8px;cursor:pointer;
}
.gal-empty{
  grid-column:1/-1;text-align:center;color:var(--muted);
  font-size:13px;font-weight:600;padding:40px 0;
}
/* 작품 상세 시트 */
.work-sheet{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;
}
.work-sheet-in{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:0 0 24px;max-width:430px;width:100%;max-height:84vh;overflow-y:auto;
}
.work-sheet-in .ws-banner{
  height:140px;display:grid;place-items:center;font-size:54px;position:relative;
}
.work-sheet-in .ws-x{
  position:absolute;top:14px;right:16px;font-size:20px;color:#fff;
  cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.work-sheet-in .ws-body{padding:18px 22px}
.work-sheet-in .ws-t{font-size:18px;font-weight:800}
.work-sheet-in .ws-meta{font-size:12px;color:var(--muted);font-weight:600;margin-top:4px}
.work-sheet-in .ws-text{
  font-size:13.5px;color:var(--ink-soft);line-height:1.75;margin-top:14px;
  background:var(--surface-soft);border-radius:var(--r-md);padding:14px 16px;
  white-space:pre-wrap;
}
.work-sheet-in .ws-heart{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:16px;font-size:14px;font-weight:800;color:var(--c-pink);
  background:#fff4e3;border:1.5px solid #f3dcb6;border-radius:var(--r-pill);
  padding:11px;cursor:pointer;
}

/* --- 자유 독서 (STEP X) — PRD v0.3 5.7 --- */
.free-head{padding:20px 22px 2px}
.free-head h3{font-size:19px;font-weight:800;display:flex;align-items:center;gap:7px}
.free-head p{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:3px;line-height:1.5}
.free-note{
  margin:12px 22px 4px;font-size:11.5px;font-weight:700;
  color:#3b6f3f;background:#eafaf0;border:1px solid #c9eed4;
  border-radius:var(--r-md);padding:11px 14px;line-height:1.55;
}
.free-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:11px;padding:14px 22px 24px;
}
.free-book{
  cursor:pointer;transition:transform .16s;
}
.free-book:active{transform:scale(.96)}
.free-book .fb-cov{
  aspect-ratio:3/4;border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:9px;box-shadow:var(--sh-sm);position:relative;
}
.free-book .fb-cov-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.free-book .fb-cov::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));pointer-events:none}
.free-book .fb-cov .fb-done,.free-book .fb-cov .fb-title{position:relative;z-index:2}
.free-book .fb-done{
  position:absolute;top:6px;right:6px;font-size:9.5px;font-weight:800;
  color:#fff;background:var(--c-green);padding:2px 7px;border-radius:var(--r-pill);
}
.free-book .fb-emoji{font-size:24px}
.free-book .fb-title{
  font-size:10px;font-weight:800;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.4);margin-top:4px;line-height:1.3;
}
.free-book .fb-author{
  font-size:10px;color:var(--muted);font-weight:700;
  margin-top:5px;text-align:center;
}

/* 응답 필터 코칭 말풍선 */
.filter-coach{
  margin-top:10px;display:flex;gap:9px;align-items:flex-start;
  background:#fff5e6;border:1.5px solid #ffe3a8;
  border-radius:12px;padding:11px 13px;
}
.filter-coach .fc-ava{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  overflow:hidden;
}
.filter-coach .fc-ava .mascot{width:30px;height:30px;border-radius:50%;animation:none;box-shadow:none}
.filter-coach .fc-ava .mascot .m-eye{top:10px;width:5px;height:7px}
.filter-coach .fc-ava .mascot .m-eye.l{left:8px}
.filter-coach .fc-ava .mascot .m-eye.r{right:8px}
.filter-coach .fc-ava .mascot .m-mouth{top:18px;width:8px;height:4px;border-width:2px}
.filter-coach .fc-ava .mascot .m-cheek{display:none}
.filter-coach .fc-text{
  font-size:12px;font-weight:700;color:#9a6a1e;line-height:1.5;
}

/* --- 구매 확인 시트 (S7a) --- */
.confirm-sheet{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:flex-end;justify-content:center;z-index:60;
}
.confirm-in{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:24px 22px 26px;max-width:430px;width:100%;text-align:center;
}
.confirm-in .cf-ic{
  width:64px;height:64px;border-radius:20px;margin:0 auto 14px;
  display:grid;place-items:center;font-size:32px;
}
.confirm-in h4{font-size:17px;font-weight:800}
.confirm-in .cf-item{
  font-size:14px;font-weight:800;color:var(--c-purple);margin-top:4px;
}
.confirm-in .cf-desc{
  font-size:12.5px;color:var(--ink-soft);font-weight:600;
  margin-top:8px;line-height:1.55;
}
.confirm-in .cf-price{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:16px 0;padding:12px;background:var(--surface-soft);
  border-radius:var(--r-md);font-size:13px;font-weight:700;color:var(--ink-soft);
}
.confirm-in .cf-price b{color:#a16207}
.confirm-in .cf-price .arrow{color:var(--muted)}
.confirm-in .cf-row{display:flex;gap:9px;margin-top:6px}
.confirm-in .cf-row .btn-stu{flex:1}
.confirm-in .cf-cancel{
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink-soft);
}

/* --- 내 작품 올리기 (전시장) --- */
.gal-upload-btn{
  margin:14px 22px 0;display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,#ffc83d,#ff7a45);
  border:none;cursor:pointer;width:calc(100% - 44px);
  border-radius:var(--r-lg);padding:15px 18px;color:#fff;
  box-shadow:0 8px 20px rgba(245,124,40,.32);transition:transform .14s;
  font-family:var(--font);
}
.gal-upload-btn:active{transform:scale(.98)}
.gal-upload-btn .gu-ic{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:20px;
}
.gal-upload-btn .gu-t{font-size:14.5px;font-weight:800;text-align:left}
.gal-upload-btn .gu-d{font-size:11px;font-weight:600;opacity:.9;text-align:left;margin-top:1px}
/* 작품 올리기 시트 */
.upload-sheet{
  position:fixed;inset:0;background:rgba(40,40,80,.5);
  display:flex;align-items:flex-end;justify-content:center;z-index:60;
}
.upload-in{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:22px 22px 26px;max-width:430px;width:100%;max-height:88vh;overflow-y:auto;
}
.upload-in h4{font-size:17px;font-weight:800;margin-bottom:3px}
.upload-in .up-sub{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:16px}
/* 사진 업로드 영역 */
.up-photo{
  border:2px dashed #f3c48f;border-radius:var(--r-lg);
  background:#fff4e3;min-height:160px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;cursor:pointer;overflow:hidden;position:relative;
}
.up-photo .up-ph-ic{font-size:38px}
.up-photo .up-ph-t{font-size:13px;font-weight:800;color:var(--c-pink)}
.up-photo .up-ph-d{font-size:11px;font-weight:600;color:var(--muted)}
.up-photo img{width:100%;height:100%;max-height:240px;object-fit:cover;display:block}
.up-photo .up-ph-change{
  position:absolute;bottom:8px;right:8px;
  font-size:11px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.45);padding:5px 11px;border-radius:var(--r-pill);
}
.up-field{margin-top:14px}
.up-field label{font-size:12.5px;font-weight:800;display:block;margin-bottom:6px}
.up-field input,.up-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:11px 13px;font-family:var(--font);font-size:13.5px;
  outline:none;color:var(--ink);resize:none;
}
.up-field input:focus,.up-field textarea:focus{border-color:var(--c-pink)}
/* 작품 종류 선택 */
.up-types{display:flex;gap:8px}
.up-type{
  flex:1;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:10px 4px;text-align:center;
  cursor:pointer;transition:.14s;
}
.up-type .ut-emoji{font-size:20px}
.up-type .ut-name{font-size:11px;font-weight:800;color:var(--ink-soft);margin-top:3px}
.up-type.on{border-color:var(--c-pink);background:#fff4e3}
.up-type.on .ut-name{color:var(--c-pink)}
.upload-in .up-actions{display:flex;gap:9px;margin-top:18px}
.upload-in .up-actions .btn-stu{flex:1}
.up-actions .up-cancel{
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink-soft);
}
/* 작품 상세 시트에 사진 표시 */
.work-sheet-in .ws-photo{width:100%;display:block;max-height:300px;object-fit:cover}

/* 전시장 필터·정렬 바 */
.gal-filter{
  display:flex;align-items:center;gap:6px;
  padding:10px 22px 0;flex-wrap:wrap;
}
.gal-fchip{
  font-size:11.5px;font-weight:800;padding:6px 12px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--line);color:var(--muted);cursor:pointer;transition:.14s;
}
.gal-fchip.on{background:var(--c-pink);border-color:var(--c-pink);color:#fff}
.gal-sort{
  margin-left:auto;font-size:11.5px;font-weight:800;
  color:var(--c-purple);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
}
.gal-count{
  font-size:11.5px;font-weight:700;color:var(--muted);
  padding:8px 22px 0;
}


/* ============================================================
   부기 테마 오버라이드 — 메인 부기 페이지와 톤 통일
   (원본 토큰은 보라/핑크 계열, 부기는 크림/주황 계열)
   ============================================================ */
:root{
  --bg-1:#fdf6e8; --bg-2:#fbeed5;                                   /* 배경: 크림 */
  --grad-primary:linear-gradient(135deg,#ffc83d 0%,#ff7a45 100%);  /* 메인 액션: 주황 선셋 */
  --line:#f0e5d8;                                                   /* 경계선: 부기와 동일 */
  --surface-soft:#fff8ef;
  --c-blue:#f08a24;                                                 /* 파랑 강조 → 부기 주황 */
  --c-purple:#f08a24;                                               /* 보라 강조 → 부기 주황 */
  --c-pink:#f08a24;                                                 /* 핑크 강조 → 부기 주황 (전시장 탭·칩·하트 등) */
}
body{ background:linear-gradient(160deg,var(--bg-1) 0%,var(--bg-2) 100%); }

/* 둘러보기 배너: 보라 그라데 → 부기 선셋 */
.tour-banner{ background:linear-gradient(135deg,#ffc83d,#ff7a45) !important; }
/* 활성 사이드바 메뉴: 연보라 → 따뜻한 크림+주황 */
.snav a.on{ background:#fdebcf !important; color:#d9760a !important; }
/* 진입 교사 카드 아이콘: 라벤더 그라데 → 따뜻한 주황 */
.role-card.teacher .ic{ background:linear-gradient(135deg,#ffe2b0,#ffc27a) !important; }
/* 둘러보기 버튼 hover: 라벤더 → 크림 */
.btn.tour-btn:hover{ background:#fff3df !important; }
/* 수업 만들기 단계 인디케이터(현재 단계): 라벤더 칩 → 크림+주황 (글자·번호원은 토큰이라 이미 주황) */
.step.cur{ border-color:#f3d29a !important; background:#fff4e3 !important; }
/* 프리셋 배지/선택 이모지: 연파랑 배경 → 크림 (글자는 토큰이라 이미 주황) */
.preset-tag{ background:#fff0d8 !important; }
.preset-card.on .preset-emoji{ background:#ffe9c9 !important; }

/* 부기 서재로 돌아가는 링크 (왼쪽 위) */
.back-to-bookie{
  position:fixed; top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left));
  z-index:9000; display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:800;
  color:#7a5a18; background:rgba(255,255,255,.85); border:2px solid #f0e3c4;
  box-shadow:0 6px 18px rgba(120,90,30,.14); backdrop-filter:blur(6px);
  transition:transform .12s, box-shadow .15s;
}
.back-to-bookie:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(120,90,30,.2); }

/* 진입 화면: 단일 카드 가운데 + 둘러보기 버튼 */
.role-grid.solo{ grid-template-columns:minmax(0,420px); justify-content:center; }
.entry-tour{
  margin-top:22px; font-size:15px; font-weight:800; padding:14px 26px;
  border-radius:999px; border:2px solid #f0e3c4; background:#fff; color:#7a5a18;
  box-shadow:0 6px 18px rgba(120,90,30,.12); cursor:pointer; transition:transform .12s,box-shadow .15s;
}
.entry-tour:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(120,90,30,.2); }
.entry-tours{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.entry-tours .entry-tour{ margin-top:0; }
.entry-tour-hint{ margin-top:10px; font-size:13px; font-weight:600; color:var(--muted); }
/* 진입 마스코트: 실제 부기 캐릭터 이미지 크기 */
.entry .entry-mascot img{ width:140px; height:auto; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(120,90,40,.18)); }
/* 마스코트 전면 통일: 교사앱 도형 마스코트(.mascot = buoy/buoyMini/buoyChatAva 공통)를
   실제 부기 캐릭터 이미지로 치환. 함수 미수정 — background로 덮고 내부 span 숨김.
   (.mascot의 width/height/bob 애니메이션은 유지되어 위치·크기·움직임 보존) */
.mascot{ background:url(../assets/mascot.png) center/contain no-repeat !important; box-shadow:none !important; border-radius:0 !important; }
.mascot > span{ display:none !important; }
/* 사이드바/헤더 브랜드 로고: 주황 사각+📖 → 부기 캐릭터 */
.brand .heart{ background:url(../assets/mascot.png) center/contain no-repeat !important; border-radius:0 !important; box-shadow:none !important; font-size:0 !important; }
/* 기본 버튼 그림자: 보라끼 → 부기 주황 */
.btn-primary{ box-shadow:0 8px 20px rgba(245,124,40,.32) !important; }
/* 사이드바 브랜드(부기 캐릭터 로고)가 좌상단 '← 부기 서재' 고정 버튼에 가리지 않도록 아래로 */
.tea-side .brand{ margin-top:46px; }
/* 진입 '교사로 시작하기' 카드: 흰색 → 더 진한 따뜻한 크림 (배경과 확실히 구분) */
.entry .role-card{ background:#f6e7c9 !important; border:1.5px solid #e7d3a8 !important; box-shadow:0 18px 42px rgba(150,110,40,.20) !important; }
/* 카드 안 캐릭터: 라벤더 박스 제거하고 V사인 부기 이미지를 그대로 노출 */
.entry .role-card .ic{ background:none !important; width:auto !important; height:auto !important; border-radius:0 !important; margin:0 auto 14px !important; }
.entry .role-card .ic img{ width:118px; height:auto; display:block; margin:0 auto; filter:drop-shadow(0 5px 12px rgba(120,90,40,.16)); }
/* 도서 탭 책 표지: 단색+이모지 → 부기 실제 삽화 이미지 */
.lb-cov{ position:relative; overflow:hidden; }
.lb-cov-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.lb-cov .lb-era, .lb-cov .lbt{ position:relative; z-index:2; }
.lb-cov .lbt{ text-shadow:0 1px 4px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); }
.lb-cov::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events:none; }
.rbb-cov{ overflow:hidden; }
.rbb-cov-img{ width:100%; height:100%; object-fit:cover; display:block; }


/* ───────────────────────── 모바일 (≤768px) ───────────────────────── */
@media (max-width:768px){
  /* 좌상단 '← 부기 서재' 핀: 더 작게 */
  .back-to-bookie{ padding:7px 13px; font-size:12px; }

  /* ── 교사 셸: 세로 사이드바 → 상단 가로 스크롤 탭바 ── */
  .tea-shell{ display:block; }
  .tea-side{
    flex:none; width:100%; height:auto;
    position:sticky; top:0; z-index:35;
    flex-direction:row; align-items:center; gap:8px;
    border-right:none; border-bottom:1px solid var(--line);
    padding:8px 10px;
    /* 좌상단 고정 '← 부기 서재' 핀이 첫 탭을 가리지 않도록 핀 너비만큼 비움 */
    padding-left:142px;
  }
  .tea-side .brand{ display:none; margin-top:0; }   /* back-to-bookie 핀과 공간 충돌 + 가로폭 절약 */
  .snav{
    display:flex; flex-direction:row; gap:4px;
    flex:1 1 auto; min-width:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .snav::-webkit-scrollbar{ display:none; }
  .snav a{
    flex:0 0 auto; flex-direction:column; gap:3px;
    margin-bottom:0; padding:6px 9px;
    font-size:10.5px; font-weight:700; white-space:nowrap; text-align:center;
  }
  .snav a .si{ width:20px; height:20px; }
  /* 학급 선택·로그아웃은 스크롤되는 nav 밖, 우측에 고정 */
  .side-foot{
    margin-top:0; padding-top:0; flex:0 0 auto;
    display:flex; align-items:center; gap:8px;
  }
  .side-foot .class-pick{ padding:6px 10px; }
  .side-foot .class-pick .cl-k{ display:none; }     /* '현재 학급' 라벨 생략, 학급명만 노출 */
  .side-foot .class-pick .cl-v{ font-size:12px; }
  .side-foot .logout{ margin-top:0; font-size:11.5px; white-space:nowrap; }
  /* 둘러보기 모드에선 배너에 '둘러보기 종료'가 이미 있으니 상단 탭바의 것은 중복 → 숨김.
     (일반 로그인 교사에겐 이 자리가 '로그아웃'이라, 배너가 있을 때만 :has로 한정해 숨김) */
  .tea-shell:has(.tour-banner) .side-foot .logout{ display:none; }

  /* 본문: 데스크톱 max-width/큰 패딩 해제 */
  .tea-main{ padding:18px 14px; max-width:none; }
  .tm-head h3{ font-size:22px; }

  /* ── 교사용 통계/도서 그리드: 4칸 → 2칸 ── */
  .kpi-grid, .rp-stat-grid, .adm-kpi, .lib-grid{ grid-template-columns:repeat(2,1fr); }

  /* ── 빠른 시작 카드: 가로 → 세로 스택 ── */
  .quickstart{ flex-wrap:wrap; }
  .quickstart .btn{ margin-left:0; width:100%; }
}

/* ───────────────────────── 아주 좁은 화면 (≤430px) ───────────────────────── */
@media (max-width:430px){
  .tea-main{ padding:16px 12px; }
}