/* ───────────────────────────────────────
   투닝 교안 — Design System v2
   ─────────────────────────────────────── */

/* ── Tokens ── */
:root {
  --bg: #F8F9FC;
  --bg-warm: #FAFAF8;
  --ink: #17171C;
  --ink-soft: #2D2D35;
  --muted: #6B6B76;
  --muted-light: #9D9DAA;
  --line: rgba(20, 20, 30, .07);
  --line-strong: rgba(20, 20, 30, .12);

  /* ── 브랜드 팔레트 (참고 컨셉 inbox/20260629-030138 에서 컬러 피커로 추출) ── */
  --c-green: #83BA63;  --c-green-d: #4F9A4F;  --c-green-soft: rgba(131,186,99,.14);
  --c-orange: #F5B959; --c-orange-d: #E0942A; --c-orange-soft: rgba(245,185,89,.16);
  --c-pink: #F394C4;   --c-pink-d: #E366A6;   --c-pink-soft: rgba(243,148,196,.15);
  --c-cream: #FFF3CD;

  /* 주 accent = 브랜드 그린 (다채로운 보조색은 위 팔레트 토큰으로 분배) */
  --accent: #4FA45A;
  --accent-hover: #3C8C48;
  --accent-light: rgba(131, 186, 99, .14);
  --accent-glow: rgba(131, 186, 99, .30);
  --success: #4F9A4F;
  --success-light: rgba(131, 186, 99, .14);
  --warning: #F5B959;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 2px 8px rgba(20, 20, 40, .04);
  --shadow: 0 8px 30px rgba(20, 20, 40, .06);
  --shadow-lg: 0 16px 48px rgba(20, 20, 40, .08);
  --shadow-hover: 0 20px 60px rgba(20, 20, 40, .10);
  --transition: .22s cubic-bezier(.4, 0, .2, 1);
  --transition-bounce: .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-size: 15px;
}

/* ── Animated Background Blobs ── */
.bg-blobs {
  position: fixed; inset: 0; overflow: hidden; z-index: -1;
  filter: blur(80px); opacity: .45;
}
.blob {
  position: absolute;
  border-radius: 50%;
  animation: blobFloat 18s ease-in-out infinite alternate;
}
.blob-a {
  width: 50vw; height: 50vw;
  background: linear-gradient(135deg, #C9EBB0 0%, var(--c-green) 100%);
  top: -14vw; left: -10vw;
  animation-delay: 0s;
}
.blob-b {
  width: 44vw; height: 44vw;
  background: linear-gradient(135deg, #FFE6B0 0%, var(--c-orange) 100%);
  top: 8vw; right: -14vw;
  animation-delay: -6s;
}
.blob-c {
  width: 48vw; height: 48vw;
  background: linear-gradient(135deg, #FFD3EA 0%, var(--c-pink) 100%);
  bottom: -18vw; left: 22vw;
  animation-delay: -12s;
}
@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3vw, -2vw) scale(1.05); }
  66%  { transform: translate(-2vw, 3vw) scale(.97); }
  100% { transform: translate(1vw, -1vw) scale(1.02); }
}

/* ── Glass Effect ── */
.glass {
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* ── Layout ── */
.section {
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 32px;
}

/* ── Top Bar ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.btn:active {
  transform: translateY(0) scale(.98);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 8px 24px var(--accent-glow);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(20, 20, 40, .04);
  box-shadow: none;
}
/* 뒤로가기 등 — 평상시에도 또렷이 보이는 라운드 버튼 */
.btn-back {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  padding-left: 14px;
}
.btn-back:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow);
}

/* ── Cards ── */
.card {
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition);
  background: linear-gradient(135deg, var(--accent-light), transparent 60%);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.card:hover::before {
  opacity: 1;
}

/* ── Grid ── */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ── Tags & Pills ── */
.tag {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  transition: var(--transition);
}
.tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.tag-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.tag-active:hover {
  background: var(--ink-soft);
  color: #fff;
  border-color: var(--ink-soft);
}

.pill {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  background: rgba(20, 20, 40, .04);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.pill-accent {
  background: var(--accent-light);
  color: var(--accent);
}
.pill-success {
  background: var(--success-light);
  color: #16a34a;
}

/* ── Form Fields ── */
.field {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-strong);
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
  transition: var(--transition);
  outline: none;
}
.field::placeholder {
  color: var(--muted-light);
}
.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
textarea.field {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* ── Hero ── */
.hero {
  text-align: center;
  padding: 40px 32px;
  position: relative;
  min-height: calc(100svh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.14;
  margin: 0 0 32px;
  word-break: keep-all;
  background: linear-gradient(115deg, var(--c-green-d) 0%, var(--c-orange-d) 50%, var(--c-pink-d) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--muted);
  margin: 0 auto 36px;
  max-width: 600px;
  line-height: 1.7;
}
.hero .pill {
  margin-bottom: 20px;
  font-size: 13px;
  background: var(--accent-light);
  color: var(--accent);
  padding: 6px 16px;
}

/* ── Page Titles ── */
.page-title {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 8px;
  line-height: 1.2;
}
.page-subtitle {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 32px;
  line-height: 1.6;
}

/* ── Section Headings ── */
.section-heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 36px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.section-heading::before {
  content: '';
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Management Row ── */
.mgmt-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Drawer ── */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(360px, 85vw);
  transform: translateX(100%);
  transition: transform var(--transition-bounce);
  z-index: 30;
  padding: 32px;
  border-left: 1px solid var(--line);
}
.drawer.open { transform: none; }

/* ── Stats Cards ── */
.stat-card {
  text-align: center;
  padding: 32px 24px;
}
.stat-card .stat-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1.2;
}
.stat-card .stat-label {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}

/* ── Review Card ── */
.review-card {
  position: relative;
  padding-left: 20px;
}
.review-card::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-green) 0%, var(--c-pink) 100%);
}

/* ── Status Badge ── */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.status-badge--reviewed {
  background: var(--success-light);
  color: #16a34a;
}
.status-badge--pending {
  background: rgba(245, 158, 11, .1);
  color: #d97706;
}

/* ── Onboarding Checklist ── */
.checklist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink-soft);
}
.checklist-item + .checklist-item {
  border-top: 1px solid var(--line);
}
.check-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.check-icon--done {
  background: var(--success);
  color: #fff;
}
.check-icon--todo {
  background: var(--line);
  color: var(--muted-light);
}

/* ── Library: search + filter ── */
.lib-top { display: flex; gap: 12px; margin-bottom: 24px; align-items: stretch; }
.lib-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 14px;
}
.lib-search input { flex: 1; min-width: 0; width: 100%; border: none; outline: none; background: none; font: inherit; padding: 14px 0; color: var(--ink); }
.filter-toggle { display: none; gap: 8px; white-space: nowrap; }
.filter-badge {
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.lib-body { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.filter-sidebar { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; }
.filter-sidebar::-webkit-scrollbar { width: 8px; }
.filter-sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }
.filter-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.filter-reset {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none;
  cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 700; padding: 4px;
}
.filter-group { margin-bottom: 22px; }
.filter-group .field { padding: 11px 12px; }
.filter-label { font-size: 13px; font-weight: 800; color: var(--ink); margin: 0 0 10px; letter-spacing: -.01em; }
.filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-radius: 8px; cursor: pointer; transition: background .15s;
}
.filter-opt:hover { background: var(--accent-light); }
.filter-box {
  width: 18px; height: 18px; border: 2px solid var(--line-strong); border-radius: 5px;
  flex-shrink: 0; transition: .15s; position: relative;
}
.filter-opt.on .filter-box { background: var(--accent); border-color: var(--accent); }
.filter-opt.on .filter-box::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.filter-name { flex: 1; font-size: 14px; color: var(--ink-soft); }
.filter-opt.on .filter-name { color: var(--ink); font-weight: 600; }
.filter-count { font-size: 13px; color: var(--muted-light); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .lib-body { grid-template-columns: 1fr; gap: 0; }
  .filter-toggle { display: inline-flex; }
  .filter-sidebar { position: static; display: none; margin-bottom: 20px; max-height: none; overflow: visible; }
  .filter-sidebar.open { display: block; }
}

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: .5;
}
.empty-state-text {
  font-size: 15px;
  line-height: 1.6;
}

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

/* ── Fade-in Animation ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeInUp .45s cubic-bezier(.4, 0, .2, 1) both;
}
.fade-in-delay-1 { animation-delay: .08s; }
.fade-in-delay-2 { animation-delay: .16s; }
.fade-in-delay-3 { animation-delay: .24s; }

/* ── QR Code ── */
.qr-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  display: inline-block;
  background: #fff;
  padding: 8px;
}
.qr-wrapper img {
  display: block;
  border-radius: var(--radius-sm);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .section {
    padding: 48px 20px;
  }
  .hero {
    padding: 32px 20px;
    min-height: calc(100svh - 60px);
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .topbar {
    padding: 10px 16px;
  }
  .mgmt-row {
    flex-direction: column;
    align-items: stretch;
  }
  .mgmt-row .btn {
    justify-content: center;
  }
  /* 정보 칩은 가로로 너무 늘어나지 않게 내용에 맞춰 감싸기 */
  .mgmt-row.chip-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .mgmt-row.chip-row .pill {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .card {
    padding: 22px;
  }
  .stat-card {
    padding: 24px 20px;
  }
  .stat-card .stat-value {
    font-size: 28px;
  }
  .page-title {
    font-size: 26px;
  }
  .section-heading {
    font-size: 18px;
    margin: 28px 0 12px;
  }
}
@media (max-width: 640px) {
  .topbar nav {
    gap: 2px !important;
  }
  .topbar .btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════
   Pricing Page
   ══════════════════════════════════════ */
.pricing-section {
  padding-top: 80px;
}
.pricing-header {
  text-align: center;
  margin-bottom: 48px;
}
.pricing-title {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.25;
  margin: 20px 0 0;
  color: var(--ink);
}
.pricing-highlight {
  background: linear-gradient(135deg, var(--c-green-d) 0%, var(--c-pink-d) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 3px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}
.pricing-card {
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.pricing-card--free {
  border: 1.5px solid var(--line-strong);
}
.pricing-card--basic {
  border: 2px solid #22C55E;
  box-shadow: 0 0 0 4px rgba(34,197,94,.08);
}
.pricing-card__head {
  padding: 32px 28px 24px;
}
.pricing-card__body {
  padding: 0 28px 32px;
  flex: 1;
}
.pricing-plan-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.pricing-price {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 8px 0;
  color: var(--ink);
}
.pricing-price--accent {
  color: #22C55E;
}
.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0;
}
.pricing-price-unit {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.pricing-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 4px 0 16px;
}
.pricing-features-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 20px;
}
.pricing-features-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 12px;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.pricing-badge-coming {
  font-size: 11px;
  font-weight: 700;
  background: #FEE2E2;
  color: #DC2626;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 4px;
}
.pricing-btn-buy {
  background: #22C55E !important;
  border-color: #22C55E !important;
  box-shadow: 0 4px 14px rgba(34,197,94,.2) !important;
}
.pricing-btn-buy:hover {
  background: #16A34A !important;
  border-color: #16A34A !important;
}
.pricing-footnote {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 36px;
}
@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════
   Library Page
   ══════════════════════════════════════ */
.lib-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lib-breadcrumb {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.lib-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 6px;
  line-height: 1.3;
}
.lib-title-hl {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 3px;
}
.lib-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}
.lib-search-wrap {
  position: relative;
  max-width: 420px;
  margin-bottom: 24px;
}
.lib-search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-light);
  pointer-events: none;
}
.lib-search-wrap .field {
  padding-left: 40px;
}
.lib-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  align-items: start;
}
.lib-sidebar {
  position: sticky;
  top: 80px;
  padding: 24px !important;
}
.lib-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.lib-sidebar-head b {
  font-size: 15px;
}
.lib-sidebar-head button {
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font-weight: 600;
  font-family: inherit;
}
.lib-sidebar-head button:hover {
  text-decoration: underline;
}
.lib-filter-section {
  margin-bottom: 20px;
}
.lib-filter-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.lib-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
  transition: var(--transition);
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.lib-filter-item:hover {
  color: var(--accent);
}
.lib-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  background: #fff;
}
.lib-filter-item.active .lib-check {
  background: var(--accent);
  border-color: var(--accent);
}
.lib-filter-name {
  flex: 1;
}
.lib-filter-cnt {
  font-size: 12px;
  color: var(--muted-light);
  font-weight: 500;
}
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
/* Library Card */
.lib-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.lib-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}
.lib-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.lib-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.lib-card-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.lib-card-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.lib-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 6px 0 12px;
  letter-spacing: -.01em;
}
.lib-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.lib-card-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-weight: 500;
  background: #fff;
}
.lib-card-tag--type {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.lib-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lib-card-actions .btn {
  flex: 1;
  justify-content: center;
  padding: 10px 0;
  font-size: 13px;
}
@media (max-width: 768px) {
  .lib-layout {
    grid-template-columns: 1fr;
  }
  .lib-sidebar {
    position: static;
  }
  .lib-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════
   Modal / Popup
   ══════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn .2s ease;
}
.modal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  animation: modalSlideUp .3s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
  border-radius: 8px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.modal-close:hover {
  background: rgba(0,0,0,.05);
  color: var(--ink);
}
.modal-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.modal-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.modal-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== 교안 디테일: 세부보기 / 투닝 연계 ===== */
.detail-box {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(20,20,40,.015);
}
.detail-box > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  user-select: none;
}
.detail-box > summary::-webkit-details-marker { display: none; }
.detail-box > summary::before { content: '+'; font-size: 15px; font-weight: 700; width: 12px; }
.detail-box[open] > summary::before { content: '\2212'; }
.detail-box > summary:hover { background: var(--accent-light); }
.detail-box > div { padding: 2px 14px 14px; }

.tooning-link {
  margin: 12px 0;
  border: 1px solid rgba(79,90,229,.25);
  background: linear-gradient(135deg, rgba(79,90,229,.06), rgba(79,90,229,.02));
  border-radius: 12px;
  padding: 14px 16px;
}
.tooning-link__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tooning-badge {
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--accent); padding: 3px 9px; border-radius: 999px;
}

/* ===== 헤더: 데스크톱 인라인 / 모바일 드로어 + 원형 프로필 ===== */
.brand { font-weight: 800; font-size: 17px; letter-spacing: -.02em; gap: 6px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-links { display: flex; gap: 4px; align-items: center; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; padding: 0; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: linear-gradient(135deg, var(--c-green), var(--c-orange));
  box-shadow: var(--shadow-sm); transition: var(--transition);
}
.avatar:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.avatar .ava-img { width: 100%; height: 100%; }
.ava-img { border-radius: 50%; display: block; flex-shrink: 0; background: #eef0f6; }

/* ── Set card: 제목 위로 + 정보 칩(텍스트에 맞게) ── */
.set-card { display: flex; flex-direction: column; }
.set-card-std {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-light); padding: 3px 10px; border-radius: 999px;
  margin-bottom: 10px; letter-spacing: -.01em;
}
.set-card-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.set-card-sum {
  margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chips .pill { white-space: nowrap; }
.set-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted-light); font-size: 13px;
}
.set-card-author { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.set-card-author .ava-img { width: 28px; height: 28px; }
.set-card-meta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.hamburger {
  display: none; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px; border: 1px solid var(--line-strong); background: #fff;
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
  transition: var(--transition);
}
.hamburger:hover { background: var(--bg); }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 29;
  background: rgba(15,23,42,.35); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { background: #fff; display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.drawer-head .hamburger { display: inline-flex; width: 38px; height: 38px; }
.drawer-nav { display: flex; flex-direction: column; gap: 8px; }
.drawer-nav .btn { width: 100%; justify-content: flex-start; padding: 13px 16px; font-size: 15px; }
@media (max-width: 768px) {
  .topbar-links { display: none; }
  .hamburger { display: inline-flex; }
}

/* ══════════════════════════════════════
   브랜드 컨셉 일러스트 (3D 캐릭터/오브젝트, 배경 투명)
   참고: inbox/20260629-030138-826319.jpg
   ══════════════════════════════════════ */

/* 둥실둥실 떠다니는 마스코트 */
@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-12px) rotate(var(--rot, 0deg)); }
}

/* 히어로 마스코트 3종 (참고 컨셉의 공룡·강아지·유니콘) */
.hero-mascots {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 0;
  margin: 8px auto 4px;
  max-width: 760px;
  width: 100%;
  pointer-events: none;
}
.hero-mascots img {
  width: clamp(122px, 27vw, 224px);
  height: auto;
  /* PNG 투명 여백(좌우 ~13~18%)을 음수 마진으로 상쇄해
     '오브젝트 영역' 기준으로 간격을 좁히고 잘림을 방지 */
  margin-inline: clamp(-34px, -4.5vw, -12px);
  filter: drop-shadow(0 18px 24px rgba(80, 70, 40, .14));
  animation: mascotBob 4.5s ease-in-out infinite;
}
.hero-mascots img:nth-child(1) { --rot: -4deg; animation-delay: 0s; }
.hero-mascots img:nth-child(2) { width: clamp(142px, 32vw, 260px); animation-delay: -1.2s; z-index: 1; }
.hero-mascots img:nth-child(3) { --rot: 4deg; animation-delay: -2.4s; }

/* 컬러풀 피처 카드 — 카드마다 다른 브랜드 컬러 + 일러스트 */
.feat-illust {
  width: 84px; height: 84px; object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 8px 12px rgba(80, 70, 40, .12));
}
.card.feat--green  { background: linear-gradient(160deg, var(--c-green-soft), transparent 70%); }
.card.feat--orange { background: linear-gradient(160deg, var(--c-orange-soft), transparent 70%); }
.card.feat--pink   { background: linear-gradient(160deg, var(--c-pink-soft), transparent 70%); }
.card.feat--green::before  { background: linear-gradient(135deg, var(--c-green-soft), transparent 60%); }
.card.feat--orange::before { background: linear-gradient(135deg, var(--c-orange-soft), transparent 60%); }
.card.feat--pink::before   { background: linear-gradient(135deg, var(--c-pink-soft), transparent 60%); }

/* 페이지 헤더 옆 작은 마스코트 */
.head-mascot {
  width: clamp(72px, 14vw, 104px); height: auto;
  filter: drop-shadow(0 10px 16px rgba(80, 70, 40, .12));
  animation: mascotBob 5s ease-in-out infinite;
  flex-shrink: 0;
}

/* 빈 상태 일러스트 */
.empty-state-img {
  width: 120px; height: 120px; object-fit: contain;
  margin: 0 auto 14px;
  display: block;
  opacity: .95;
  filter: drop-shadow(0 10px 14px rgba(80, 70, 40, .10));
}

/* 컬러풀 통계 카드 */
.stat-card.stat--green  .stat-value { color: var(--c-green-d); }
.stat-card.stat--orange .stat-value { color: var(--c-orange-d); }
.stat-card.stat--pink   .stat-value { color: var(--c-pink-d); }
.stat-card.stat--accent .stat-value { color: var(--accent); }

/* ── (베타) 배지 ── */
.beta-badge {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  color: var(--accent); background: var(--accent-light);
  border: 1px solid var(--accent-glow);
  padding: 2px 7px; border-radius: 999px;
  vertical-align: middle; position: relative; top: -1px;
}
.hero-brand .beta-badge { font-size: 12px; padding: 3px 9px; margin-left: 8px; }

/* ── 히어로 상단 브랜드 로고 ── */
.hero-brand {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 26px;
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.hero-brand svg { flex-shrink: 0; }
@media (max-width: 768px) { .hero-brand { font-size: 19px; margin-bottom: 20px; } }

/* ===== 교안 지도안 표 (학습목표 구성 + 평가 세부기준) ===== */
.ltable, .rtable {
  width: 100%; border-collapse: collapse; margin: 16px 0 4px;
  font-size: 14px; border: 1.5px solid #C3CAD6;
  border-radius: 14px; overflow: hidden; background: #fff;
}
.ltable th, .ltable td, .rtable th, .rtable td {
  border: 1px solid #D7DCE5; padding: 13px 15px; vertical-align: top; text-align: left;
}
.ltable th {
  width: 96px; background: #4B4F5A; font-weight: 700; color: #fff;
  white-space: nowrap; font-size: 13px;
}
.ltable td { color: var(--ink-soft); line-height: 1.65; background: #fff; }
.lt-obj { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px; }
.lt-obj:last-child { margin-bottom: 0; }
.lt-tag { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; margin-top: 1px; }
.lt-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.lt-std { margin-bottom: 11px; line-height: 1.6; }
.lt-std:last-child { margin-bottom: 0; }
.lt-std-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

.rtable thead th { background: #4B4F5A; text-align: center; font-weight: 800; font-size: 13px; color: #fff; }
.rtable tbody th {
  width: 132px; background: #E7E9F0; font-weight: 700; color: var(--ink);
  vertical-align: middle; line-height: 1.5; font-size: 13px;
}
.rtable td { color: var(--ink-soft); line-height: 1.6; background: #fff; }
.rt-score { text-align: center; width: 56px; font-weight: 800; color: var(--accent); white-space: nowrap; vertical-align: middle; }
.rt-total td { background: #E7E9F0; font-weight: 800; text-align: center; color: var(--ink); }
.rt-note { font-size: 12px; color: var(--muted); margin: 9px 2px 0; line-height: 1.5; }
@media (max-width: 768px) {
  .ltable th, .ltable td, .rtable th, .rtable td { padding: 10px 11px; }
  .ltable th { width: 64px; font-size: 12px; }
  .rtable tbody th { width: 96px; font-size: 12px; }
  .ltable, .rtable { font-size: 13px; }
}

/* ===== 학생 활동 샘플 (활동지) ===== */
.btn-sm { padding: 7px 13px; font-size: 12.5px; font-weight: 600; }
.sample-list { display: flex; flex-direction: column; gap: 18px; }
.sample-item { border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px; background: #fff; }
.sample-meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.sample-meta b { color: var(--ink); }
/* 손글씨 글 */
.sample-paper {
  background:
    linear-gradient(#fff 0 0) padding-box,
    repeating-linear-gradient(#fcfcf7, #fcfcf7 31px, #DCE6F2 31px, #DCE6F2 32px);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px;
}
.handwriting {
  font-family: 'Nanum Pen Script', 'Gaegu', cursive;
  font-size: 23px; line-height: 32px; color: #2b3a67; margin: 0; letter-spacing: .2px;
}
/* 보드 캡처 느낌 (칸반) */
.sample-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sb-col { background: #F4F6FA; border-radius: 12px; padding: 8px; }
.sb-head {
  background: #E2556A; color: #fff; font-weight: 700; font-size: 13px;
  text-align: center; padding: 9px; border-radius: 8px; margin-bottom: 8px;
}
.sb-card { background: #fff; border-radius: 8px; padding: 11px 12px; font-size: 13px; line-height: 1.55; box-shadow: var(--shadow-sm); }
.sb-row { margin-bottom: 6px; color: var(--ink-soft); }
.sb-row:last-child { margin-bottom: 0; }
.sb-row b { color: var(--ink); margin-right: 4px; }
.sb-thumb {
  background: linear-gradient(135deg, #EEF2F8, #E3E9F2); border-radius: 6px;
  padding: 22px 10px; text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 10px;
}
/* 에디터 생성 결과 */
.sample-editor { display: flex; gap: 14px; flex-wrap: wrap; }
.se-thumb {
  flex: 0 0 150px; min-height: 120px; border-radius: 10px;
  background: linear-gradient(135deg, #EAF3FF, #F3EAFF); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 28px; color: var(--muted);
}
.se-thumb span { font-size: 12px; }
.se-info { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.55; display: flex; flex-direction: column; gap: 5px; }
.se-info .btn { margin-top: 6px; align-self: flex-start; }
@media (max-width: 768px) {
  .sample-board { grid-template-columns: 1fr; }
}

/* ── 구글 클래스룸 공유 버튼 (beta) ── */
.btn-classroom { background: #fff; border: 1px solid #C9D6CE; color: #1E8E4E; font-weight: 700; }
.btn-classroom:hover { background: #EAF7EF; border-color: #1E8E4E; color: #1E8E4E; }
.btn-classroom .beta-badge { color: #1E8E4E; background: rgba(30,142,78,.12); border-color: rgba(30,142,78,.30); }