:root {
  --bg: #FFF9F3;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.75);
  --ink: #3D2B21;
  --muted: #756052;
  --line: #EFDDCF;
  --primary: #BB4D12;
  --primary-dark: #91390D;
  --primary-soft: #FFF0E2;
  --secondary: #F29954;
  --secondary-soft: #FFF2E6;
  --accent: #FFD3A4;
  --danger: #FF6B6B;
  --radius: 24px;
  --shadow: 0 10px 40px rgba(187, 77, 18, 0.1), 0 16px 50px rgba(187, 77, 18, 0.05);
  --shadow-sm: 0 4px 14px rgba(187, 77, 18, 0.08);
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
}

html.native-app,
html.native-app body,
html.native-app #root {
  min-height: 100%;
  overscroll-behavior-y: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: var(--primary-dark);
}

.skip-link {
  position: fixed;
  z-index: 100000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #2b3a55;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #ffce61;
  outline-offset: 2px;
}

/* ---------- Layout ---------- */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(253, 250, 246, 0.7);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(232, 222, 209, 0.5);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}
.brand-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.brand-button:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 5px;
  border-radius: 8px;
}
.app-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
}
.logo {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-icon {
  font-size: 28px;
}
.brand-text {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand-text small {
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
}

.nav {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 12px;
}
.app-nav {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.15s;
}
.nav-btn:hover {
  color: var(--ink);
}
.nav-btn.active {
  background: var(--bg);
  color: var(--primary);
}

.auth-section {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.account-menu { position: relative; }
.account-avatar-mark {
  display: none;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  font-size: 14px;
}
.account-menu-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  max-width: min(420px, 40vw);
  padding: 6px 10px 6px 14px;
  border: 1px solid rgba(255, 142, 158, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.account-menu-trigger:hover,
.account-menu-trigger:focus-visible {
  border-color: var(--primary);
  background: #fff;
  outline: none;
}
.account-menu-trigger:focus-visible { box-shadow: 0 0 0 3px var(--primary-soft); }
.account-identity {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.account-chevron { flex: 0 0 auto; color: var(--muted); font-size: 16px; line-height: 1; }
.account-menu-popover {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdfd;
  box-shadow: 0 18px 50px rgba(74, 64, 67, 0.18);
}
.account-menu-summary { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); }
.account-menu-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-menu-summary-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.account-menu-summary .plan-badge { display: inline-flex; margin: 0; font-size: 10px; }
.account-menu-email { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account-menu-popover > button {
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 14px;
  font-weight: 650;
}
.account-menu-popover > button:hover,
.account-menu-popover > button:focus-visible { background: var(--primary-soft); outline: none; }
.account-menu-divider { height: 1px; margin: 5px 8px; background: var(--line); }
.account-menu-popover > .account-menu-logout { color: var(--danger); }
.guest-auth-actions { display: flex; align-items: center; gap: 6px; }
.auth-checking { color: var(--muted); font-size: 12px; white-space: nowrap; }

.plan-badge {
  flex: 0 0 auto;
  background: #fff3cd;
  color: #856404;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid #ffeeba;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.plan-badge.free {
  background: #e9ecef;
  color: #495057;
  border-color: #dee2e6;
}

.settings-modal {
  max-width: 500px;
}

.mobile-save-guide {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mobile-save-guide-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--primary-soft);
  font-size: 19px;
}
.mobile-save-guide .notice-text {
  margin: 5px 0 0;
  line-height: 1.65;
}

.settings-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.settings-section:last-child {
  border-bottom: none;
}
.settings-section h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--primary);
}
.section-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
}

.plan-info-card, .save-settings-card {
  background: #f8f9fa;
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 12px;
}
.plan-name { margin-bottom: 8px; font-size: 15px; }
.plan-usage { font-size: 14px; margin-bottom: 12px; }
.plan-notice, .notice-text { font-size: 12px; color: #888; }
.nav-ic {
  font-size: 15px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.school-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.school-btn:hover {
  background: var(--secondary-soft);
  border-color: var(--secondary);
}

.content {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.content:focus {
  outline: none;
}

.sync-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 10px 12px;
  border: 1px solid #f2c36b;
  border-radius: 12px;
  background: #fff8e8;
  color: #7a4b00;
}
.sync-notice p { flex: 1; margin: 0; font-size: 13px; }

/* 홈 설정 배너 */
.setup-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: linear-gradient(100deg, var(--secondary-soft), var(--primary-soft));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  transition: transform 0.15s;
}
.setup-banner:hover {
  transform: translateY(-1px);
}
.setup-emoji {
  font-size: 30px;
}
.setup-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.setup-text strong {
  font-size: 15px;
}
.setup-text span {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.setup-cta {
  font-weight: 800;
  color: var(--secondary);
  white-space: nowrap;
}

/* 우리 지역 교과서 배지 */
.local-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--secondary);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 안내 노트 */
.info-note {
  background: var(--secondary-soft);
  border: 1px solid #cfe6df;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: #33574d;
  line-height: 1.6;
  margin-bottom: 18px;
}

.local-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
}
.local-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--secondary);
}

.map-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.course-summary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 20px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.footer a {
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  border: none;
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.btn:active {
  transform: translateY(0);
}
.btn-lg {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 18px;
}
.btn-sm {
  padding: 7px 13px;
  font-size: 13px;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(226, 112, 58, 0.3);
}
.btn-primary:hover {
  background: var(--primary-dark);
}
.btn-secondary {
  background: var(--secondary);
  color: #fff;
}
.btn-secondary:hover {
  filter: brightness(0.95);
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  background: var(--surface-2);
}
.btn-outline {
  background: transparent;
  color: var(--primary-dark);
  border: 1.5px solid var(--primary);
}
.btn-outline:hover {
  background: var(--primary-soft);
}
.link-btn {
  border: none;
  background: none;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.page-head {
  margin-bottom: 20px;
}
.page-head h1 {
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.page-sub {
  margin: 0;
  color: var(--muted);
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* ---------- Home ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: 18px;
  overflow: hidden;
  min-height: 570px;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.82) 0 12%, transparent 38%),
    linear-gradient(135deg, #fff8ec 0%, #fff0ed 48%, #e9f4ec 100%);
  border-radius: 32px;
  padding: 54px 28px 48px 50px;
  margin-bottom: 40px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 24px 70px rgba(120, 82, 74, 0.11);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 22px;
  pointer-events: none;
}
.hero-text {
  position: relative;
  z-index: 3;
  padding: 12px 0;
}
.hero-text h1 {
  max-width: 590px;
  font-size: clamp(36px, 4.3vw, 56px);
  line-height: 1.12;
  margin: 0 0 20px;
  color: #423a3b;
  letter-spacing: -0.055em;
  text-wrap: balance;
  word-break: keep-all;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 13px;
  border: 1px solid rgba(226, 114, 130, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #c96171;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(136, 87, 88, 0.07);
}
.hero-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 142, 158, 0.16);
}
.hero-proof {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 25px;
}
.hero-proof span {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(104, 129, 107, 0.12);
  background: rgba(255, 255, 255, 0.66);
  color: #5d685e;
  font-size: 12px;
  font-weight: 700;
}
.hero-visual {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 455px;
}
.journey-scene {
  position: absolute;
  inset: -12px -34px -18px -22px;
  cursor: grab;
  touch-action: none;
}
.journey-scene[data-dragging='true'] { cursor: grabbing; }
.journey-scene[data-hovering='true'] { cursor: pointer; }
.journey-scene[data-grabbing-animal='true'] { cursor: grabbing; }
.journey-scene::after {
  content: '✦';
  position: absolute;
  z-index: 8;
  left: var(--mouse-x, -100px);
  top: var(--mouse-y, -100px);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 22%, rgba(255,201,95,.38) 23% 45%, transparent 68%);
  color: #f09a62;
  font-size: 15px;
  text-shadow: 10px -8px 0 #ff9eaa, -10px 7px 0 #6fb2ca;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6) rotate(0deg);
  transition: opacity .15s ease, transform .18s ease;
  pointer-events: none;
}
.journey-scene[data-pointer-active='true']::after {
  opacity: .92;
  transform: translate(-50%, -50%) scale(1) rotate(18deg);
}
.journey-scene[data-animal-hover='true']::after {
  content: '♥';
  background: radial-gradient(circle, rgba(255,255,255,.96) 0 24%, rgba(255,158,170,.38) 25% 53%, transparent 72%);
  color: #ef6f82;
  text-shadow: 9px -8px 0 #ffc95f, -10px 8px 0 #ff9eaa;
  transform: translate(-50%, -62%) scale(1.18) rotate(-8deg);
}
.journey-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  filter: drop-shadow(0 28px 22px rgba(84, 91, 70, 0.15));
}
.journey-scene-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #66746a;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(75,90,74,.09);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.journey-scene-label {
  position: absolute;
  right: 46px;
  top: 46px;
  display: flex;
  flex-direction: column;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 32px rgba(71, 84, 68, .09);
  backdrop-filter: blur(12px);
  color: #69756a;
  font-size: 10px;
  letter-spacing: .02em;
  pointer-events: none;
}
.journey-scene-label strong {
  color: #3e5144;
  font-size: 13px;
  letter-spacing: -.02em;
}
.hero-route-steps {
  position: relative;
  z-index: 5;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 19px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 12px 30px rgba(88, 77, 67, .08);
  backdrop-filter: blur(14px);
}
.hero-route-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 11px;
  padding: 12px 18px;
  min-width: 0;
}
.hero-route-step + .hero-route-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 1px;
  background: rgba(110, 105, 91, .12);
}
.hero-route-step span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff4ed, #ffe6e6);
  color: #df7068;
  font-size: 10px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
}
.hero-route-step strong {
  color: #504849;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.hero-route-step small {
  overflow: hidden;
  color: #8a8182;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-membership {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 40px 0 60px;
  padding: 24px;
  background: linear-gradient(135deg, #fff, var(--primary-soft));
}
.native-membership-icon { font-size: 36px; }
.native-membership .eyebrow { margin: 0 0 4px; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.native-membership h2 { margin: 0 0 4px; font-size: 20px; }
.native-membership p:last-child { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- 자매 서비스 배너 (유스소풍) ----------
   유스소풍 쪽 배너와 대칭 구조. 색은 유스소풍 브랜드 팔레트(민트)를 따른다.
   --mint #2dbb9f · --mint-dark #139078 · --mint-pale #dff6ef · --navy #172d33 */
.sibling-service {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 1120px;
  min-height: 150px;
  margin: 0 auto 36px;
  padding: 28px 32px;
  overflow: hidden;
  border: 1px solid #b9e8dc;
  border-radius: 22px;
  background: linear-gradient(125deg, #e6f8f2 0%, #f2fbf8 56%, #eaf7f1 100%);
  color: #23383c;
  text-align: left;
  box-shadow: 0 18px 44px rgba(19, 144, 120, 0.08);
}
.sibling-service::before {
  content: '';
  position: absolute;
  top: -76px;
  right: 76px;
  z-index: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 66px 92px 0 -51px rgba(45, 187, 159, 0.13);
}
.sibling-service::after {
  content: '✦';
  position: absolute;
  top: 19px;
  right: 24px;
  z-index: 0;
  color: rgba(45, 187, 159, 0.22);
  font-size: 34px;
  transform: rotate(8deg);
  pointer-events: none;
}
.sibling-service > * { position: relative; z-index: 1; }
.sibling-service-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 7px;
  border: 1px solid rgba(45, 187, 159, 0.14);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(19, 144, 120, 0.13);
}
.sibling-service-mark {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #2dbb9f;
  color: #fff;
  transform: rotate(-3deg);
}
.sibling-service-mark svg { width: 72%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sibling-service-copy { min-width: 0; }
.sibling-service-copy > span {
  color: #139078;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sibling-service-copy h2 {
  margin: 4px 0 0;
  color: #172d33;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -0.035em;
}
.sibling-service-copy h2 em { color: #139078; font-style: normal; }
.sibling-service-copy p {
  max-width: 660px;
  margin: 7px 0 0;
  color: #667b7f;
  font-size: 13px;
  line-height: 1.65;
}
.sibling-service-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 19px;
  border-radius: 12px;
  background: #2dbb9f;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(19, 144, 120, 0.2);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sibling-service-button:hover {
  background: #139078;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(19, 144, 120, 0.28);
}
.sibling-service-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-text p {
  font-size: 16px;
  color: #686061;
  max-width: 570px;
  margin: 0 0 25px;
  line-height: 1.78;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-actions .btn-primary {
  background: #ee7b74;
  box-shadow: 0 12px 26px rgba(226, 112, 101, .22);
}

.demo-section {
  text-align: center;
  margin: clamp(56px, 7vw, 80px) 0 clamp(64px, 8vw, 92px);
}
.demo-section h2 {
  font-size: clamp(26px, 2.7vw, 34px);
  color: var(--primary);
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.035em;
}
.demo-video-wrapper {
  width: min(100%, 1040px);
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
  box-shadow:
    0 26px 64px rgba(91, 64, 71, 0.16),
    0 6px 18px rgba(91, 64, 71, 0.08);
  border: 6px solid rgba(255, 255, 255, 0.96);
  background: #151515;
}
.demo-video-wrapper video,
.demo-video-wrapper img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  background: #151515;
}

@media (max-width: 640px) {
  .demo-section {
    margin: 48px 0 58px;
  }
  .demo-section h2 {
    margin-bottom: 18px;
  }
  .demo-video-wrapper {
    border-width: 3px;
    border-radius: 19px;
    box-shadow:
      0 18px 40px rgba(91, 64, 71, 0.14),
      0 4px 12px rgba(91, 64, 71, 0.07);
  }
}

.pricing-section {
  text-align: center;
  background: var(--surface);
  padding: 48px 24px;
  border-radius: 24px;
  margin: 40px 0 60px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.payment-review-overlay {
  z-index: 10000;
  align-items: center;
  padding: 24px;
  background: rgba(24, 32, 51, 0.68);
  backdrop-filter: blur(7px);
}
.payment-review {
  width: min(940px, 100%);
  max-height: min(calc(100dvh - 32px), 860px);
  overflow: auto;
  text-align: left;
  color: #172033;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(13, 26, 54, 0.28);
}
.payment-review-head,
.payment-review-brand,
.payment-section-title,
.payment-summary > div,
.payment-renew-note,
.payment-result,
.payment-result-actions {
  display: flex;
  align-items: center;
}
.payment-review-head {
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid #e8edf5;
}
.payment-review-brand { gap: 14px; }
.payment-brand-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  font-size: 22px;
  background: #eff6ff;
  border-radius: 16px;
}
.payment-kicker {
  color: #3182f6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.payment-review-head h2 {
  margin: 2px 0 3px;
  color: #172033;
  font-size: 22px;
  line-height: 1.3;
}
.payment-review-head p {
  margin: 0;
  color: #748097;
  font-size: 13px;
}
.payment-review-close {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #667085;
  font-size: 16px;
  background: #f4f6f9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.payment-review-close:hover { color: #172033; background: #e8edf5; }
.payment-review-close:disabled { cursor: not-allowed; opacity: 0.5; }
.payment-review-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  min-height: 0;
}
.payment-product-panel {
  display: flex;
  padding: 28px 30px;
  flex-direction: column;
  background:
    radial-gradient(circle at 18% 10%, rgba(49, 130, 246, 0.16), transparent 34%),
    linear-gradient(150deg, #f6faff 0%, #edf5ff 100%);
  border-right: 1px solid #e3edfb;
}
.payment-plan-chip {
  width: fit-content;
  padding: 6px 10px;
  color: #1b64da;
  font-size: 12px;
  font-weight: 800;
  background: #fff;
  border: 1px solid #d8e8ff;
  border-radius: 999px;
}
.payment-product-panel h3 {
  margin: 20px 0 15px;
  color: #172033;
  font-size: 24px;
  line-height: 1.35;
  word-break: keep-all;
}
.payment-price-block { display: flex; flex-direction: column; }
.payment-price-block strong {
  color: #172033;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.payment-price-block strong small { margin-left: 2px; font-size: 17px; letter-spacing: normal; }
.payment-price-block span { margin-top: 4px; color: #748097; font-size: 12px; }
.payment-benefit-list {
  display: grid;
  gap: 12px;
  padding: 22px 0 0;
  margin: 22px 0;
  list-style: none;
  border-top: 1px solid #d9e6f6;
}
.payment-benefit-list li {
  position: relative;
  padding-left: 25px;
  color: #344054;
  font-size: 14px;
  line-height: 1.5;
}
.payment-benefit-list li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  color: #3182f6;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  content: '✓';
  background: #fff;
  border-radius: 50%;
}
.payment-renew-note {
  gap: 10px;
  padding: 13px;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid #dce9f9;
  border-radius: 14px;
}
.payment-renew-note > span {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #16885f;
  font-weight: 900;
  background: #e8fbf4;
  border-radius: 50%;
}
.payment-renew-note div { display: flex; flex-direction: column; gap: 2px; }
.payment-renew-note strong { color: #344054; font-size: 13px; }
.payment-renew-note small { color: #748097; font-size: 11px; line-height: 1.45; }
.payment-confirm-panel { padding: 23px 32px 21px; }
.payment-section-title { gap: 11px; }
.payment-section-title > span {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: #3182f6;
  border-radius: 9px;
}
.payment-section-title h3 { margin: 0; color: #172033; font-size: 16px; }
.payment-section-title p { margin: 2px 0 0; color: #8892a5; font-size: 11px; }
.payment-summary { margin: 15px 0 0; padding: 15px 17px; border: 1px solid #e8edf5; border-radius: 15px; background: #fbfcfe; }
.payment-summary > div { justify-content: space-between; gap: 16px; min-height: 28px; }
.payment-summary > div + div { margin-top: 6px; padding-top: 6px; border-top: 1px solid #edf0f5; }
.payment-summary dt { color: #748097; font-size: 13px; }
.payment-summary dd { margin: 0; color: #344054; font-size: 13px; font-weight: 700; text-align: right; }
.payment-summary .payment-summary-total { margin-top: 10px; padding-top: 12px; }
.payment-summary-total dt { color: #172033; font-weight: 700; }
.payment-summary-total dd { color: #1b64da; font-size: 19px; }
.payment-tax-note { margin: 8px 3px 0; color: #8892a5; font-size: 10.5px; line-height: 1.55; }
.payment-consent-heading { margin-top: 18px; }
.payment-consent-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  margin-top: 14px;
  color: #172033;
  font-size: 13px;
  font-weight: 800;
  background: #f4f8ff;
  border: 1px solid #dce9fb;
  border-radius: 13px;
  cursor: pointer;
}
.payment-consent-list { padding: 3px 5px 0; }
.payment-consent { display: flex; align-items: flex-start; gap: 9px; margin: 11px 0; color: #667085; font-size: 11.5px; line-height: 1.5; cursor: pointer; }
.payment-consent input, .payment-consent-all input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: #3182f6; }
.payment-consent b { color: #3182f6; font-size: 10px; }
.payment-consent a { color: #4c70a8; text-underline-offset: 2px; }
.payment-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 7px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  background: #3182f6;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 9px 20px rgba(49, 130, 246, 0.2);
  cursor: pointer;
}
.payment-submit:hover:not(:disabled) { background: #1b64da; transform: translateY(-1px); }
.payment-submit:disabled { color: #98a2b3; background: #e8ecf2; box-shadow: none; cursor: not-allowed; }
.payment-safe-note { margin: 12px 0 0; color: #748097; font-size: 10.5px; line-height: 1.55; text-align: center; }
.payment-error-note { margin: 12px 0 0; color: #b42318; font-size: 13px; line-height: 1.55; }
.payment-result { margin: 12px auto 20px; max-width: 1160px; padding: 16px 18px; border: 1px solid; border-radius: 16px; }
.payment-result p { margin: 4px 0; }
.payment-result-success { background: #ecfdf3; border-color: #86efac; }
.payment-result-error { background: #fff7ed; border-color: #fdba74; }
.payment-result-pending { background: #eff6ff; border-color: #93c5fd; }

.billing-test-panel {
  width: min(100%, 1040px);
  padding: 28px;
  margin: 38px auto 0;
  color: #172033;
  text-align: left;
  background:
    radial-gradient(circle at 94% 0%, rgba(49, 130, 246, 0.13), transparent 34%),
    linear-gradient(145deg, #f8fbff 0%, #fff 68%);
  border: 1px solid #dce9fb;
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(36, 85, 150, 0.1);
}
.billing-test-intro,
.billing-test-footer,
.billing-test-login,
.billing-manage-head,
.billing-manage-actions,
.billing-review-head {
  display: flex;
  align-items: center;
}
.billing-test-intro { justify-content: space-between; gap: 24px; }
.billing-test-panel h2 { margin: 8px 0 5px; color: #172033; font-size: 24px; }
.pricing-section .billing-test-panel p,
.billing-test-panel p { margin: 0; color: #65738b; font-size: 13px; line-height: 1.65; }
.billing-test-badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  color: #1b64da;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: #eaf3ff;
  border: 1px solid #cfe3ff;
  border-radius: 999px;
}
.billing-test-safety {
  display: grid;
  flex: 0 0 210px;
  gap: 5px;
  padding: 15px 17px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #dce9fb;
  border-radius: 16px;
}
.billing-test-safety strong { color: #16885f; font-size: 12px; }
.billing-test-safety span { color: #53627a; font-size: 11px; }
.billing-test-safety span::before { margin-right: 6px; color: #19a974; content: '✓'; font-weight: 900; }
.billing-test-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.billing-test-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 16px;
  cursor: pointer;
  transition: 0.16s ease;
}
.billing-test-product:hover { border-color: #9fc6fb; transform: translateY(-1px); }
.billing-test-product.selected { border-color: #3182f6; box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1); }
.billing-test-product input { width: 18px; height: 18px; margin: 0; accent-color: #3182f6; }
.billing-test-product > span { display: flex; min-width: 0; flex-direction: column; }
.billing-test-product strong { color: #25334b; font-size: 14px; }
.billing-test-product small { color: #7b879b; font-size: 11px; font-weight: 500; }
.billing-test-product > b { color: #1b64da; font-size: 17px; white-space: nowrap; }
.billing-test-product > b small { font-size: 11px; }
.billing-test-footer { justify-content: space-between; gap: 18px; margin-top: 22px; }
.billing-test-footer .btn { flex: 0 0 auto; }
.billing-current-line { padding-top: 16px; margin-top: 18px !important; border-top: 1px solid #e5edf7; }
.billing-test-login { justify-content: space-between; gap: 24px; }

.billing-review-overlay {
  z-index: 11000;
  align-items: center;
  padding: 24px;
  background: rgba(18, 29, 49, 0.72);
  backdrop-filter: blur(8px);
}
.billing-review-modal {
  width: min(920px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  color: #172033;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  box-shadow: 0 30px 100px rgba(8, 20, 44, 0.3);
}
.billing-review-head { justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid #e8edf5; }
.billing-review-head h2 { margin: 7px 0 2px; font-size: 22px; }
.billing-review-head p { margin: 0; color: #748097; font-size: 12px; }
.billing-review-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.billing-review-summary {
  padding: 30px;
  background: linear-gradient(150deg, #eef6ff 0%, #f8fbff 100%);
  border-right: 1px solid #dce9fb;
}
.billing-review-summary > span { color: #1b64da; font-size: 11px; font-weight: 900; }
.billing-review-summary h3 { margin: 12px 0 10px; font-size: 21px; line-height: 1.4; }
.billing-review-summary > strong { color: #172033; font-size: 30px; }
.billing-review-summary > strong small { color: #65738b; font-size: 13px; }
.billing-review-summary ul { display: grid; gap: 11px; padding: 20px 0 0; margin: 22px 0 0; list-style: none; border-top: 1px solid #d6e5f7; }
.billing-review-summary li { position: relative; padding-left: 22px; color: #4f5f76; font-size: 12px; line-height: 1.55; }
.billing-review-summary li::before { position: absolute; left: 0; color: #3182f6; content: '✓'; font-weight: 900; }
.billing-review-consent { padding: 30px; }
.billing-review-consent h3 { margin: 0 0 18px; font-size: 17px; }
.billing-review-consent > label { display: flex; align-items: flex-start; gap: 10px; margin: 15px 0; color: #59677c; font-size: 12px; line-height: 1.6; cursor: pointer; }
.billing-review-consent input { flex: 0 0 auto; width: 19px; height: 19px; margin: 0; accent-color: #3182f6; }
.billing-review-consent b { color: #3182f6; font-size: 10px; }
.billing-test-warning { display: flex; gap: 3px; padding: 13px 14px; margin-top: 20px; flex-direction: column; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 13px; }
.billing-test-warning strong { color: #9a3412; font-size: 12px; }
.billing-test-warning span { color: #9a5a3d; font-size: 10.5px; }

.billing-manage-card { padding: 16px; margin-top: 14px; color: #334155; background: #f5f9ff; border: 1px solid #dce9fb; border-radius: 14px; }
.billing-manage-head { gap: 9px; margin-bottom: 13px; }
.billing-manage-head strong { font-size: 13px; }
.billing-manage-details { display: grid; gap: 7px; margin: 0; }
.billing-manage-details > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; font-size: 11.5px; }
.billing-manage-details dt { color: #7b879b; }
.billing-manage-details dd { margin: 0; color: #334155; font-weight: 700; overflow-wrap: anywhere; }
.billing-manage-actions { flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.billing-isolation-note { padding-top: 11px; margin-top: 12px !important; color: #65738b !important; font-size: 10.5px !important; border-top: 1px solid #dce6f3; }

@media (max-width: 760px) {
  .payment-review-overlay { align-items: flex-start; padding: 12px; }
  .payment-review { max-height: calc(100dvh - 24px); border-radius: 22px; }
  .payment-review-head { align-items: flex-start; padding: 20px; }
  .payment-brand-icon { width: 40px; height: 40px; border-radius: 13px; }
  .payment-review-head h2 { font-size: 18px; }
  .payment-review-head p { display: none; }
  .payment-review-body { grid-template-columns: 1fr; min-height: 0; }
  .payment-product-panel { padding: 24px 22px; border-right: 0; border-bottom: 1px solid #e3edfb; }
  .payment-product-panel h3 { margin: 15px 0 10px; font-size: 21px; }
  .payment-price-block strong { font-size: 32px; }
  .payment-benefit-list { grid-template-columns: 1fr 1fr; gap: 8px 14px; padding-top: 16px; margin: 16px 0; }
  .payment-benefit-list li { font-size: 12px; }
  .payment-renew-note { margin-top: 2px; }
  .payment-confirm-panel { padding: 24px 22px; }
  .payment-result, .payment-result-actions { align-items: stretch; flex-direction: column; }
  .payment-result-actions .btn { width: 100%; }
  .billing-test-panel { padding: 21px 18px; border-radius: 20px; }
  .billing-test-intro, .billing-test-footer, .billing-test-login { align-items: stretch; flex-direction: column; }
  .billing-test-safety { flex-basis: auto; }
  .billing-test-products { grid-template-columns: 1fr; }
  .billing-test-footer .btn { width: 100%; }
  .billing-review-overlay { align-items: flex-start; padding: 12px; }
  .billing-review-modal { max-height: calc(100dvh - 24px); border-radius: 22px; }
  .billing-review-head { align-items: flex-start; padding: 19px; }
  .billing-review-head p { display: none; }
  .billing-review-body { grid-template-columns: 1fr; }
  .billing-review-summary { padding: 23px 20px; border-right: 0; border-bottom: 1px solid #dce9fb; }
  .billing-review-consent { padding: 23px 20px 26px; }
}

@media (max-width: 480px) {
  .payment-review-brand { gap: 10px; }
  .payment-review-close { width: 34px; height: 34px; }
  .payment-product-panel { padding: 20px 18px; }
  .payment-benefit-list { grid-template-columns: 1fr; }
  .payment-confirm-panel { padding: 22px 18px 24px; }
  .payment-summary dd { max-width: 58%; }
}
.pricing-section h2 {
  font-size: 28px;
  color: var(--primary);
  margin-bottom: 12px;
}
.pricing-section p {
  color: var(--muted);
  margin-bottom: 24px;
}
.pricing-section.premium-active {
  background: linear-gradient(135deg, var(--secondary-soft), #fff);
  border-color: var(--secondary);
}
.sales-readiness {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(100%, 940px);
  margin: 18px auto 36px;
  padding: 16px 18px;
  border: 1px solid #f1dfca;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffaf3 0%, #fff 72%);
  box-shadow: 0 10px 28px rgba(117, 86, 50, 0.07);
  text-align: left;
}
.sales-readiness-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffb36b, #ff8e7d);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  box-shadow: 0 7px 16px rgba(229, 132, 102, 0.2);
}
.sales-readiness-copy { min-width: 0; flex: 1; }
.sales-readiness-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 0 4px;
}
.sales-readiness-heading strong {
  color: #4f4038;
  font-size: 15px;
  letter-spacing: -0.015em;
}
.sales-readiness-heading span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff0e6;
  color: #ad614e;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.pricing-section .sales-readiness p {
  margin: 0;
  color: #766a63;
  font-size: 13px;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .sales-readiness {
    gap: 11px;
    margin: 16px auto 32px;
    padding: 14px;
    border-radius: 16px;
  }
  .sales-readiness-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 18px; }
  .sales-readiness-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}
.pricing-cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
.pricing-card {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  flex: 1;
  width: 100%;
  min-width: 250px;
  max-width: 340px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(43, 58, 85, 0.12);
  border-color: var(--primary);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}
.billing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.billing-toggle .active {
  color: var(--primary);
}
.billing-toggle .badge {
  background: var(--accent);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 4px;
}
.toggle-switch {
  width: 50px;
  height: 26px;
  background: var(--line);
  border-radius: 13px;
  border: none;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
.toggle-switch.on {
  background: var(--primary);
}
.toggle-switch .toggle-knob {
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch.on .toggle-knob {
  transform: translateX(24px);
}
.pricing-card h3 {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 16px;
  word-break: keep-all;
}
.pricing-card .price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}
.pricing-card .original-price {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
  margin-bottom: 4px;
}
.pricing-card .price {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  margin: 0;
}
.pricing-card .price .period {
  font-size: 16px;
  color: var(--muted);
  font-weight: 500;
}
.pricing-card .features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  flex: 1;
}
.pricing-card .features li {
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* "이전 플랜 혜택 전부 포함" 안내줄 */
.pricing-card .features li.tier-base {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
  padding-bottom: 8px;
}

.btn-toss {
  background: #3182f6;
  color: #fff;
  width: 100%;
  font-weight: 600;
}
.btn-toss:hover {
  background: #1b64da;
}
.btn-toss.loading {
  opacity: 0.7;
  pointer-events: none;
}

.steps {
  margin-bottom: 44px;
}
.steps h2,
.featured h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  margin-bottom: 12px;
}
.step-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}
.step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  transition: all 0.15s;
}
.mini-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.mini-icon {
  font-size: 26px;
}
.mini-name {
  font-weight: 700;
  font-size: 15px;
}
.mini-region {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Fields ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 700;
  color: #4a453f;
}
.field label small {
  font-weight: 500;
  color: var(--muted);
}
.field input,
.field select,
.field textarea,
.search {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ---------- Course planner ---------- */
.planner-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  padding: 22px;
  align-items: end;
}
.planner-primary-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(90px, .6fr) minmax(0, 2.7fr);
  gap: 16px;
  align-items: end;
}
.planner-primary-fields .field {
  min-width: 0;
  margin: 0;
}
.planner-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}
.planner-date-control {
  min-width: 0;
}
.planner-date-control > span {
  display: block;
  margin: 0 0 4px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.planner-date-control input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.planner-date-separator {
  padding-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
}
.field-wide {
  grid-column: 1 / -1;
}
.segmented {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.segmented button {
  flex: 1;
  border: none;
  background: var(--surface);
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.segmented button.on {
  background: var(--primary);
  color: #fff;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.chip.on {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}
.generate {
  grid-column: 1 / -1;
  justify-self: start;
}

.course-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin: 24px 0 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.day-block {
  margin-bottom: 28px;
}
.day-title {
  font-size: 18px;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 4px solid var(--primary);
}
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.timeline-item {
  display: flex;
  gap: 16px;
  padding: 18px;
}
.tl-time {
  flex-shrink: 0;
  width: 66px;
  font-weight: 800;
  font-size: 15px;
  color: var(--primary-dark);
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.tl-time span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.tl-body {
  flex: 1;
  min-width: 0;
}
.tl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tl-icon {
  font-size: 22px;
}
.tl-head h3 {
  margin: 0;
  font-size: 17px;
}
.tl-era {
  font-size: 12px;
  background: var(--secondary-soft);
  color: var(--secondary);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.tl-summary {
  margin: 6px 0;
  color: #4a453f;
  font-size: 14px;
}
.tl-meta,
.tl-curr {
  margin: 3px 0;
  font-size: 12.5px;
  color: var(--muted);
}
.tl-curr {
  color: var(--secondary);
  font-weight: 600;
}
.tl-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.tl-points strong {
  font-size: 12.5px;
  color: var(--ink);
}
.tl-points ul {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 13px;
  color: #4a453f;
}
.tl-points li {
  margin-bottom: 3px;
}
.tl-tip {
  font-size: 12.5px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 8px 0 0;
}
.tl-actions {
  margin-top: 12px;
}
.empty {
  padding: 30px;
  text-align: center;
  color: var(--muted);
  margin-top: 20px;
}

/* ---------- Sites browser ---------- */
.sites-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  padding: 30px 34px;
  margin-bottom: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 5%, rgba(255, 215, 128, 0.28), transparent 31%),
    linear-gradient(135deg, #273b64 0%, #3a5b88 57%, #4d7195 100%);
  border-radius: 26px;
  box-shadow: 0 18px 45px rgba(35, 53, 84, 0.16);
}
.sites-hero::after {
  position: absolute;
  right: -45px;
  bottom: -75px;
  width: 210px;
  height: 210px;
  content: '';
  border: 38px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.sites-hero > * { position: relative; z-index: 1; }
.sites-hero-kicker {
  display: block;
  margin-bottom: 7px;
  color: #ffd886;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.sites-hero h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.25; }
.sites-hero p { max-width: 670px; margin: 10px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.65; }
.sites-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
}
.sites-hero-stats > div {
  display: flex;
  min-width: 88px;
  padding: 14px 12px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.sites-hero-stats strong { color: #fff; font-size: 23px; line-height: 1.1; }
.sites-hero-stats span { margin-top: 5px; color: rgba(255, 255, 255, 0.72); font-size: 10px; font-weight: 700; }
.filters {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-color: #e4e9f0;
  box-shadow: 0 8px 24px rgba(35, 53, 84, 0.06);
}
.filters .search {
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  background: #fbfcfe;
  border-color: #dfe5ed;
}
.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-row select {
  flex: 1;
  min-width: 120px;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.sites-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 2px 11px;
}
.result-count {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  font-weight: 600;
}
.result-count strong { margin-right: 2px; color: var(--primary); font-size: 18px; }
.sites-result-actions { display: flex; align-items: center; gap: 7px; }
.sites-result-actions select,
.sites-result-actions button {
  min-height: 35px;
  padding: 7px 10px;
  color: #667085;
  font: 600 12px/1.2 inherit;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 10px;
}
.sites-result-actions button { color: #b24d62; cursor: pointer; }
.sites-result-actions button:hover { background: #fff5f6; border-color: #f2bdc7; }
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.site-empty {
  margin-top: 18px;
  padding: 28px;
  text-align: center;
}
.site-card {
  text-align: left;
  overflow: hidden;
  padding: 19px;
  border-color: #e5e8ee;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.blocking-status {
  z-index: 99999;
  background: rgba(255, 255, 255, 0.86);
}
.blocking-status-card {
  padding: 40px;
  border: none;
  background: transparent;
  box-shadow: none;
}
.blocking-status-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid var(--spinner-color, #2b3a55);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.blocking-status-card h2 {
  margin-top: 20px;
  color: #2b3a55;
  font-size: 18px;
}
.site-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(43, 58, 85, 0.12);
}
.site-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.site-icon {
  font-size: 30px;
}
.site-eras {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.era-tag {
  font-size: 11px;
  background: var(--secondary-soft);
  color: var(--secondary);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.site-card h3 {
  margin: 4px 0 2px;
  color: #27344b;
  font-size: 18px;
}
.site-card-badges { display: flex; min-height: 20px; align-items: center; gap: 5px; flex-wrap: wrap; }
.site-new-badge {
  width: fit-content;
  padding: 3px 8px;
  color: #9a4b09;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  background: #fff3d9;
  border: 1px solid #ffd38a;
  border-radius: 999px;
  white-space: nowrap;
}
.site-verified-badge {
  width: fit-content;
  padding: 3px 7px;
  color: #16805c;
  font-size: 10px;
  font-weight: 800;
  background: #eaf9f3;
  border: 1px solid #ccefe2;
  border-radius: 999px;
}
.site-loc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}
.site-summary {
  font-size: 13.5px;
  color: #4a453f;
  margin: 7px 0 10px;
  flex: 1;
  line-height: 1.55;
}
.site-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  color: #68748a;
  font-size: 11px;
  font-weight: 700;
  border-top: 1px solid #edf0f4;
}
.site-detail-modal { max-width: 680px; }
.site-visit-info {
  padding: 16px;
  margin-bottom: 16px;
  background: linear-gradient(145deg, #f5f9ff, #fbfdff);
  border: 1px solid #dce8f7;
  border-radius: 14px;
}
.site-visit-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e9f3;
}
.site-visit-info-head span { color: #3970ad; font-size: 10px; font-weight: 800; }
.site-visit-info-head h3 { margin: 2px 0 0; color: #27344b; font-size: 16px; }
.site-visit-info-head small { padding: 4px 7px; color: #16805c; font-size: 10px; font-weight: 800; background: #e9f8f2; border-radius: 999px; }
.site-visit-info dl { margin: 10px 0; }
.site-visit-info dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.site-visit-info dt { color: #667085; font-size: 12px; font-weight: 700; }
.site-visit-info dd { margin: 0; color: #344054; font-size: 12px; line-height: 1.5; }
.site-visit-info-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  color: #7d8798;
  font-size: 10px;
  line-height: 1.45;
  border-top: 1px solid #e1e9f3;
}
.site-visit-info-foot a { flex: 0 0 auto; color: #2868b2; font-size: 11px; font-weight: 800; }
.site-visit-info-pending { display: flex; align-items: flex-start; gap: 11px; background: #fffaf1; border-color: #f2dfb9; }
.site-visit-info-pending > span { font-size: 21px; }
.site-visit-info-pending strong { color: #6f5930; font-size: 13px; }
.site-visit-info-pending p { margin: 3px 0 0; color: #8b7855; font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  .sites-hero { grid-template-columns: 1fr; gap: 20px; padding: 25px 22px; }
  .sites-hero-stats { width: 100%; }
  .sites-hero-stats > div { padding: 12px 8px; }
  .sites-result-bar { align-items: flex-start; }
}

@media (max-width: 520px) {
  .sites-hero h1 { font-size: 26px; }
  .sites-hero p { font-size: 13px; }
  .sites-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sites-hero-stats strong { font-size: 20px; }
  .filters { padding: 15px; }
  .filter-row { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-row select:last-child { grid-column: 1 / -1; }
  .sites-result-bar { flex-direction: column; gap: 8px; }
  .sites-result-actions { width: 100%; }
  .sites-result-actions select { flex: 1; }
  .site-grid { grid-template-columns: 1fr; }
  .site-visit-info-head { flex-direction: column; gap: 7px; }
  .site-visit-info dl > div { grid-template-columns: 1fr; gap: 2px; }
  .site-visit-info-foot { align-items: flex-start; flex-direction: column; }
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 20, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 60;
  overflow-y: auto;
}
.modal {
  max-width: 560px;
  width: 100%;
  padding: 28px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: var(--surface-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--muted);
}
.modal-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.modal-icon {
  font-size: 40px;
}
.modal-head h2 {
  margin: 0 0 2px;
  font-size: 22px;
}
.modal-summary {
  color: #4a453f;
  margin: 0 0 14px;
}
.modal-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dur-tag {
  font-size: 12px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.modal-section {
  margin-bottom: 16px;
}
.modal-section h4 {
  margin: 0 0 6px;
  font-size: 14px;
}
.modal-section ul {
  margin: 0;
  padding-left: 18px;
  color: #4a453f;
  font-size: 14px;
}
.modal-section li {
  margin-bottom: 4px;
}
.modal-section p {
  margin: 0;
  color: #4a453f;
  font-size: 14px;
}
.tip-box {
  background: var(--primary-soft);
  padding: 12px 14px;
  border-radius: 10px;
}
.tip-box h4 {
  color: var(--primary-dark);
}
.learn-link {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  margin-right: 12px;
}
.modal-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- Result sheet ---------- */
.sheet-view {
  --sheet-rose: #bb4d12;
  --sheet-rose-dark: #91390d;
  --sheet-cream: #fffaf6;
  --sheet-border: #fbe7d9;
}
.sheet-page-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 26px 28px;
  border: 1px solid rgba(213, 181, 158, 0.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 15%, rgba(255, 206, 97, 0.2), transparent 27%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(253, 246, 241, 0.86));
  box-shadow: 0 16px 44px rgba(188, 136, 98, 0.08);
}
.sheet-page-head::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -85px;
  width: 190px;
  height: 190px;
  border: 32px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  pointer-events: none;
}
.sheet-head-copy,
.sheet-head-steps {
  position: relative;
  z-index: 1;
}
.sheet-head-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(213, 181, 158, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--sheet-rose-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sheet-page-head h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-size: 28px;
}
.sheet-page-head .page-sub {
  max-width: 470px;
  font-size: 14px;
  line-height: 1.65;
}
.sheet-head-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sheet-head-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 12px 11px;
  border: 1px solid rgba(213, 181, 158, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 6px 20px rgba(188, 136, 98, 0.05);
  overflow: hidden;
}
.sheet-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  background: linear-gradient(145deg, #ce601f, #bb4d12);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(213, 181, 158, 0.24);
}
.sheet-head-steps li > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.sheet-head-steps strong {
  color: #674f3e;
  font-size: 12px;
  white-space: nowrap;
}
.sheet-head-steps small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: 30px;
  align-items: start;
}
.sheet-layout > *,
.sheet-form,
.sheet-head-copy,
.sheet-head-steps,
.sheet-editor-section,
.sheet-section-fields,
.template-note,
.sheet-editor-section-head > div {
  min-width: 0;
}
.sheet-course-card {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(213, 181, 158, 0.12);
  border-radius: 22px;
}
.sheet-course-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sheet-course-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff0e8, #ffe3d3);
  color: #d37647;
  font-size: 20px;
  font-weight: 900;
}
.sheet-course-head h2 {
  margin: 0 0 2px;
  color: #564234;
  font-size: 15px;
}
.sheet-course-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.sheet-course-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sheet-course-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #fae2d0;
  border-radius: 13px;
  background: #fffafa;
  color: #7e604b;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.sheet-course-chip:hover {
  border-color: var(--sheet-rose);
  background: #fef7f2;
  transform: translateY(-1px);
}
.sheet-course-chip strong,
.sheet-course-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-course-chip strong { font-size: 11px; }
.sheet-course-chip small { color: var(--muted); font-size: 10px; }
.form-card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sheet-editor-card {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(213, 181, 158, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
}
.sheet-editor-section {
  padding: 24px;
  border-bottom: 1px solid var(--sheet-border);
}
.sheet-format-section {
  background: linear-gradient(145deg, rgba(255, 250, 246, 0.82), rgba(254, 249, 245, 0.64));
}
.sheet-editor-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.sheet-section-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #fdf6f2;
  color: var(--sheet-rose-dark);
  font-size: 13px;
  font-weight: 900;
}
.sheet-section-mark.is-setting {
  background: #fff1df;
  color: #c4742d;
}
.sheet-editor-section-head h2 {
  margin: 0 0 2px;
  color: #564234;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.sheet-editor-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.sheet-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #756052;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.sheet-live-badge i,
.sheet-preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #46bd78;
  box-shadow: 0 0 0 4px rgba(70, 189, 120, 0.12);
}
.sheet-section-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.selector-row {
  align-items: start;
  gap: 14px 16px;
}
.selector-row .field {
  min-width: 0;
}
.selector-row .theme-dropdown {
  height: 48px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid rgba(213, 181, 158, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
}
.sheet-editor-card .field label {
  color: #68503e;
  font-size: 12px;
}
.sheet-editor-card .field input,
.sheet-editor-card .field select,
.sheet-editor-card .field textarea {
  border-color: #fae4d5;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(101, 78, 61, 0.025);
}
.sheet-editor-card .field input,
.sheet-editor-card .field select {
  min-height: 46px;
}
.sheet-editor-card .field textarea {
  line-height: 1.65;
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sheet-editor-card .field-label-row small {
  padding: 2px 7px;
  border-radius: 999px;
  background: #fdf4ee;
  color: #756052;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
}
.photo-add {
  aspect-ratio: 1;
  min-height: 92px;
  border: 1.5px dashed #f8d6be;
  background: #fefcfb;
  border-radius: 14px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.photo-add:hover {
  border-color: var(--sheet-rose);
  background: #fef8f3;
}
.photo-add b {
  color: var(--sheet-rose-dark);
  font-size: 24px;
  line-height: 1;
}
.photo-add span {
  margin-top: 5px;
  color: #856650;
  font-size: 11px;
  font-weight: 800;
}
.photo-add small {
  margin-top: 1px;
  color: #756052;
  font-size: 8px;
}
.photo-add:disabled {
  cursor: progress;
  opacity: 0.65;
}
.photo-message {
  min-height: 1.4em;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 16px;
}
.sheet-editor-footer {
  padding: 22px 24px 24px;
  background: linear-gradient(145deg, #fffafa, #fff6f0);
}
.sheet-finish-copy {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.sheet-finish-copy strong {
  color: #624b3b;
  font-size: 14px;
}
.sheet-finish-copy span {
  color: var(--muted);
  font-size: 11px;
}
.sheet-editor-footer .form-actions {
  margin: 0;
  padding: 0;
  border: 0;
}
.sheet-editor-footer .btn {
  min-height: 42px;
  border-radius: 13px;
}
.sheet-editor-footer .btn-primary {
  box-shadow: 0 8px 20px rgba(213, 181, 158, 0.2);
}
.save-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(213, 181, 158, 0.1);
  line-height: 1.6;
}
.template-help {
  flex: 1;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
  margin: 0;
}
.template-help strong { color: #80624d; }
.template-source-link {
  flex: 0 0 auto;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
  text-decoration: none;
  white-space: nowrap;
}
.template-source-link:hover {
  text-decoration: underline;
}
.saved-list {
  padding: 18px;
  margin-top: 18px;
}
.saved-list h3 {
  margin: 0 0 12px;
  font-size: 15px;
}
.saved-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saved-list li {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.saved-item {
  flex: 1;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}
.saved-item strong {
  font-size: 14px;
}
.saved-item span {
  font-size: 12px;
  color: var(--muted);
}
.saved-del {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 0 12px;
}

.sheet-preview-wrap {
  position: sticky;
  top: 84px;
}
.sheet-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 4px;
}
.sheet-preview-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sheet-preview-title > span:last-child {
  display: flex;
  flex-direction: column;
}
.sheet-preview-title strong {
  color: #6a513f;
  font-size: 13px;
}
.sheet-preview-title small {
  color: var(--muted);
  font-size: 10px;
}
.sheet-preview-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  border: 1px solid #f9dfcd;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #756052;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.sheet-preview-paginator {
  position: relative;
  width: 100%;
}
.sheet-preview-page {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
}
.sheet-preview-page-columns {
  height: 100%;
  column-count: auto;
  column-fill: auto;
  column-gap: 72px;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.sheet-preview-page-columns > .paper-header,
.sheet-preview-page-columns > .paper-section,
.sheet-preview-page-columns > .paper-photos,
.sheet-preview-page-columns > .paper-confirm {
  break-inside: avoid-column;
}
.sheet-preview-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(197, 152, 119, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-sm);
}
.sheet-page-arrow,
.sheet-page-number {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #fae2d0;
  border-radius: 10px;
  background: #fff;
  color: #97745b;
  font-size: 13px;
  font-weight: 800;
}
.sheet-page-arrow {
  font-size: 22px;
  line-height: 1;
}
.sheet-page-number.active {
  border-color: #bb4d12;
  background: #bb4d12;
  color: #fff;
  box-shadow: 0 4px 12px rgba(221, 195, 176, 0.25);
}
.sheet-page-arrow:disabled {
  cursor: default;
  opacity: 0.35;
}
.sheet-page-arrow:focus-visible,
.sheet-page-number:focus-visible {
  outline: 3px solid rgba(221, 195, 176, 0.28);
  outline-offset: 2px;
}
.sheet-page-ellipsis {
  min-width: 16px;
  color: var(--muted);
  text-align: center;
}
.sheet-page-status {
  margin-left: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.print-only {
  display: none;
}
.preview-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 8px;
}

/* ---------- Printable paper ---------- */
.sheet-paper {
  background: #fffdf8;
  border: 1px solid #e8ded1;
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: var(--shadow);
  color: #5c5042;
  font-size: 13px;
  background-image: repeating-linear-gradient(transparent 0px, transparent 27px, rgba(209, 107, 125, 0.1) 28px);
  background-attachment: local;
}
.paper-header {
  display: flow-root;
}
.paper-title {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.1em;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px dashed #d16b7d;
  font-weight: 800;
  color: #d16b7d;
}
.paper-template-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(209, 107, 125, 0.12);
  color: #b85266;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.paper-info {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.paper-info th,
.paper-info td {
  border: 1px solid rgba(209, 107, 125, 0.2);
  padding: 10px 12px;
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}
.paper-info th {
  background: #ffeef1;
  color: #d16b7d;
  font-weight: 700;
  width: 84px;
  white-space: nowrap;
}
.paper-section {
  margin-bottom: 16px;
}
.paper-section-label {
  background: #ffcf70;
  color: #5c5042;
  font-weight: 800;
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 12px 12px 0 0;
  display: inline-block;
  border: 1px solid rgba(209, 107, 125, 0.2);
  border-bottom: none;
}
.paper-section-body {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(209, 107, 125, 0.2);
  border-radius: 0 12px 12px 12px;
  padding: 14px 16px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.paper-section-body.is-empty {
  background-color: rgba(255, 255, 255, 0.78);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 25px,
    rgba(92, 80, 66, 0.13) 26px
  );
  background-origin: content-box;
}
.paper-section-body p {
  margin: 0;
}
.paper-placeholder {
  display: block;
}
.paper-photos {
  margin-bottom: 12px;
}
.paper-photo-grid {
  display: grid;
  gap: 8px;
  border: 1px solid #cbb99f;
  border-radius: 0 6px 6px 6px;
  padding: 10px;
}
.paper-photo-grid.count-1 {
  grid-template-columns: 1fr;
}
.paper-photo-grid.count-2 {
  grid-template-columns: 1fr 1fr;
}
.paper-photo-grid.count-3,
.paper-photo-grid.count-4 {
  grid-template-columns: 1fr 1fr;
}
.paper-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #e0d5c2;
}
.paper-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paper-confirm th {
  width: 84px;
}
.paper-confirm td {
  height: 40px;
}

/* ---------- Responsive ---------- */
@media (min-width: 861px) and (max-width: 1120px) {
  .topbar {
    gap: 10px;
    padding-inline: 16px;
    flex-wrap: nowrap;
  }
  .slogan { display: none; }
  .topbar-right {
    margin-left: auto;
    flex-wrap: nowrap;
  }
  .auth-section { margin-left: 0; }
  .account-menu-trigger { max-width: 210px; }
  .account-identity { max-width: 120px; }
}

@media (max-width: 860px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topbar {
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    flex-wrap: nowrap;
  }
  .topbar-right { margin-left: auto; flex-wrap: nowrap; }
  .slogan { display: none; }
  .auth-section { margin-left: 0; }
  .account-menu-trigger { max-width: min(58vw, 330px); padding-left: 10px; }
  .account-identity { max-width: 150px; font-size: 12px; }
  .content { padding: 20px 16px 36px; }
  .setup-cta { display: none; }
  .hero-actions .btn { flex: 1 1 100%; width: 100%; }
  .sheet-layout {
    grid-template-columns: 1fr;
  }
  .sheet-preview-wrap {
    position: static;
  }
  .sheet-page-head {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .sheet-page-head .page-sub { max-width: none; }
  .sheet-course-list { grid-template-columns: 1fr; }
  .sheet-editor-section { padding: 22px; }
  .sheet-preview-toolbar { margin-top: 26px; }
  .planner-form,
  .form-row,
  .step-grid,
  .mini-grid {
    grid-template-columns: 1fr;
  }
  .planner-form {
    gap: 16px;
    padding: 20px;
  }
  .planner-primary-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }
  .planner-dates-field { grid-column: 1 / -1; }
  .generate {
    width: 100%;
    justify-content: center;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 42px 28px 24px;
  }
  .hero-text { padding: 0; }
  .hero-visual { min-height: 390px; margin: 0 -12px -8px; }
  .journey-scene { inset: -20px -36px -28px; }
  .journey-scene-label { top: 46px; right: 30px; }
  .journey-scene-hint { bottom: 22px; }
  .hero-route-steps { margin: 10px -4px 2px; }
  .hero-route-step { padding: 10px 8px; column-gap: 7px; }
  .hero-route-step span { width: 30px; height: 30px; }
  .pricing-cards {
    flex-direction: column;
    align-items: center;
  }
  .pricing-card {
    width: min(100%, 340px);
    min-width: 0;
  }
  .pricing-card.pro-card {
    transform: translateY(0);
  }
  .hero-text h1 {
    max-width: 650px;
    font-size: clamp(34px, 7vw, 48px);
  }
  .tl-points {
    grid-template-columns: 1fr;
  }
  .nav {
    position: fixed;
    z-index: 80;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    top: auto;
    transform: none;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    justify-content: space-around;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 36px rgba(74, 64, 67, 0.16);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
  }
  .nav-btn {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    padding: 6px 4px;
    font-size: 10px;
    border-radius: 15px;
  }
  .nav-btn.active { background: var(--primary-soft); }
  .nav-ic { font-size: 18px; line-height: 1.2; }
  .footer { padding-bottom: 24px !important; }
  .native-membership {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .native-membership .btn { grid-column: 1 / -1; width: 100%; }
  .sibling-service {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 22px;
  }
  .sibling-service-icon { width: 54px; height: 54px; padding: 5px; border-radius: 16px; }
  .sibling-service-mark { border-radius: 12px; }
  .sibling-service-copy h2 { font-size: 17px; }
  .sibling-service-copy p { font-size: 12px; }
  .sibling-service-button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 560px) {
  .sheet-page-head {
    padding: 19px;
    border-radius: 22px;
  }
  .sheet-page-head h1 { font-size: 23px; }
  .sheet-head-steps { gap: 6px; }
  .sheet-head-steps li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 8px;
  }
  .sheet-head-steps small { display: none; }
  .sheet-course-card { padding: 16px; }
  .sheet-course-chip { grid-template-columns: auto minmax(0, 1fr); }
  .sheet-course-chip small { display: none; }
  .sheet-editor-section { padding: 19px 17px; }
  .sheet-editor-section-head { grid-template-columns: auto minmax(0, 1fr); }
  .sheet-live-badge {
    grid-column: 2;
    justify-self: start;
  }
  .template-note { flex-direction: column; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .sheet-editor-footer { padding: 20px 17px; }
  .sheet-editor-footer .form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .sheet-editor-footer .btn { width: 100%; }
}

@media (max-width: 420px) {
  .app-brand-icon { width: 34px; height: 34px; }
  .logo { font-size: 17px; }
  .account-menu-trigger { max-width: none; gap: 6px; padding: 5px 8px 5px 6px; }
  .account-avatar-mark { display: grid; }
  .account-identity { display: none; }
  .account-menu-trigger .plan-badge { flex: 0 0 auto; }
  .account-menu-popover { position: fixed; top: calc(58px + env(safe-area-inset-top)); right: 10px; width: min(260px, calc(100vw - 20px)); }
  .planner-form { padding: 18px; }
  .planner-date-range {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .planner-date-separator { display: none; }
  .planner-date-control input { min-height: 44px; }
  .planner-form .chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .planner-form .chip {
    width: 100%;
    padding: 8px 4px;
    text-align: center;
  }
  .guest-auth-actions { gap: 2px; }
  .guest-auth-actions .btn { padding: 7px 8px; font-size: 12px; }
  .hero { padding: 32px 20px 14px; border-radius: 24px; }
  .hero::before { inset: 10px; border-radius: 17px; }
  .hero-text h1 { font-size: 33px; }
  .hero-text p { font-size: 14px; line-height: 1.72; }
  .hero-visual { min-height: 315px; margin: -2px -18px -4px; }
  .journey-scene { inset: -20px -44px -28px; }
  .journey-scene-label { top: 35px; right: 62px; }
  .journey-scene-hint { bottom: 18px; font-size: 9px; }
  .hero-route-steps { margin: 8px -8px 4px; border-radius: 16px; }
  .hero-route-step { display: flex; justify-content: center; gap: 6px; padding: 9px 4px; }
  .hero-route-step span { flex: 0 0 auto; width: 26px; height: 26px; font-size: 9px; }
  .hero-route-step strong { font-size: 10px; white-space: nowrap; }
  .hero-route-step small { display: none; }
  .hero-proof { gap: 6px; }
  .hero-proof span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print / PDF ---------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 14mm 14mm;
  }
  html,
  body {
    background: #fff;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  .app {
    padding: 0;
  }
  .no-print {
    display: none !important;
  }
  .view.sheet-view {
    padding: 0;
  }
  .sheet-layout {
    display: block;
    gap: 0;
  }
  .sheet-preview-wrap {
    width: auto;
    margin: 0;
    overflow: visible;
  }
  .sheet-paper {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    background: #fff !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: 10pt;
    line-height: 1.6;
  }
  .paper-template-tag,
  .paper-title {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  .paper-info,
  .paper-info tr,
  .paper-header,
  .paper-section,
  .paper-photos,
  .paper-photo-grid,
  .paper-photo {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }
  .paper-section {
    margin-bottom: 5mm;
  }
  .paper-section-label {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  .paper-section-body {
    orphans: 4;
    widows: 4;
  }
  .paper-section-body.is-empty {
    background-color: #fff !important;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 7mm,
      rgba(92, 80, 66, 0.18) 7.2mm
    ) !important;
    background-origin: content-box !important;
  }
  .paper-confirm {
    margin-top: 1mm;
    margin-bottom: 0;
  }
  .print-only {
    display: block;
  }
  .theme-modern, .theme-vintage, .theme-nature, .theme-popart, .theme-space, .theme-kids, .theme-traditional, .theme-luxury, .theme-report {
    box-shadow: none !important;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Theme Dropdown */
.theme-dropdown {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px top 50%;
  background-size: 12px auto;
}
.theme-dropdown:focus {
  border-color: var(--primary);
  outline: none;
}

/* New Themes */
.theme-nature {
  background: #f0fdf4;
  color: #14532d;
  border: 2px solid #bbf7d0;
  font-family: 'Inter', sans-serif;
  background-image: none;
}
.theme-nature .paper-title { color: #166534; border-bottom: 2px dashed #86efac; }
.theme-nature .paper-info th, .theme-nature .paper-section-label { background: #dcfce7; color: #166534; border: none; }
.theme-nature .paper-info td { border-bottom: 1px solid #bbf7d0; }
.theme-nature .paper-section { border-bottom: 1px solid #bbf7d0; }

.theme-popart {
  background: #fff;
  color: #000;
  border: 4px solid #000;
  box-shadow: 8px 8px 0 #fbbf24;
  font-family: 'Inter', sans-serif;
  background-image: none;
}
.theme-popart .paper-title { color: #e11d48; text-shadow: 2px 2px 0 #000; border-bottom: 4px solid #000; font-weight: 900; }
.theme-popart .paper-info th, .theme-popart .paper-section-label { background: #fde047; border: 2px solid #000; color: #000; font-weight: 800; }
.theme-popart .paper-info td, .theme-popart .paper-section { border: 2px solid #000; }

.theme-space {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  font-family: 'Inter', sans-serif;
  background-image: none;
}
.theme-space .paper-title { color: #c084fc; border-bottom: 2px solid #3b82f6; text-shadow: 0 0 10px rgba(192,132,252,0.5); }
.theme-space .paper-info th, .theme-space .paper-section-label { background: #1e293b; color: #60a5fa; border: 1px solid #334155; }
.theme-space .paper-info td, .theme-space .paper-section { border: 1px solid #334155; }
.theme-space .paper-template-tag { background: #1e293b; color: #93c5fd; }
.theme-space .paper-placeholder { background: rgba(255,255,255,0.1); }

.theme-kids {
  background: #fffbeb;
  color: #92400e;
  border: 4px dotted #fcd34d;
  border-radius: 32px;
  font-family: 'Inter', sans-serif;
  background-image: none;
}
.theme-kids .paper-title { color: #b45309; border-bottom: 4px dotted #fcd34d; }
.theme-kids .paper-info th, .theme-kids .paper-section-label { background: #fef3c7; color: #b45309; border: none; border-radius: 12px; }
.theme-kids .paper-info td, .theme-kids .paper-section { border-bottom: 1px dashed #fde68a; }

.theme-traditional {
  background: #faf8f5;
  color: #333;
  border: 2px double #8b4513;
  font-family: serif;
  background-image: none;
}
.theme-traditional .paper-title { color: #000; border-bottom: 1px solid #000; font-weight: normal; text-align: center; }
.theme-traditional .paper-info th, .theme-traditional .paper-section-label { border-bottom: 1px solid #ccc; color: #000; font-weight: bold; background: none;}
.theme-traditional .paper-info td, .theme-traditional .paper-section { border: none; }
.theme-traditional .paper-template-tag { background: #efe7dc; color: #5f3b1f; }

.theme-luxury {
  background: linear-gradient(135deg, #18181b, #27272a);
  color: #d4d4d8;
  border: 2px solid #fbbf24;
  font-family: 'Inter', sans-serif;
  background-image: none;
}
.theme-luxury .paper-title { color: #fcd34d; border-bottom: 1px solid #fbbf24; text-transform: uppercase; letter-spacing: 2px; }
.theme-luxury .paper-info th, .theme-luxury .paper-section-label { color: #fbbf24; background: rgba(251,191,36,0.1); border-left: 3px solid #fbbf24; border-bottom: none; }
.theme-luxury .paper-info td, .theme-luxury .paper-section { border-bottom: 1px solid #3f3f46; }
.theme-luxury .paper-template-tag { background: rgba(251,191,36,0.16); color: #fcd34d; }

.theme-report {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  background-image: none;
}
.theme-report .paper-title { color: #000; border-bottom: 3px solid #000; text-align: left; letter-spacing: 0; margin-bottom: 12px; padding-bottom: 8px;}
.theme-report .paper-info, .theme-report .paper-info th, .theme-report .paper-info td { border: 1px solid #000; }
.theme-report .paper-info th { background: #f4f4f5; color: #000; }
.theme-report .paper-section { border: 1px solid #000; margin-bottom: -1px; }
.theme-report .paper-section-label { background: #f4f4f5; color: #000; border-bottom: 1px solid #000; }
.theme-report .paper-template-tag { background: #f4f4f5; color: #000; border: 1px solid #000; border-radius: 0; }

@keyframes bounce-walk {
  0% { transform: translateY(0) rotate(-3deg); }
  100% { transform: translateY(-4px) rotate(3deg); }
}

@keyframes running-bear {
  0% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
  100% { transform: translateY(0) rotate(-10deg); }
}

.bear-idle {
  animation: bounce-walk 1s infinite alternate;
}

.bear-running {
  animation: running-bear 0.25s infinite;
}
/* EduSopung orange edition — shared visual system, with print styles kept separate. */
:root { --bg:#fff9f3; --surface:#fff; --surface-2:#fff2e6; --ink:#3d2b21; --muted:#756052; --line:#efddcf; --primary:#bb4d12; --primary-dark:#91390d; --primary-soft:#fff0e2; --secondary:#c97c4e; --secondary-soft:#fbf0e5; --accent:#ffd3a4; --radius:18px; --shadow:0 14px 45px #3d2b2109; --shadow-sm:0 4px 18px #3d2b2108; }
html { scroll-behavior:smooth; scroll-padding-top:140px; }
body { background:var(--bg); }
button,input,select,textarea { font:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #ba7641; outline-offset:4px; }
button:disabled { cursor:not-allowed; }
.topbar { position:sticky; top:0; height:76px; padding:12px max(28px, calc((100vw - 1320px)/2)); background:#fff9f3ed; border-bottom:1px solid var(--line); flex-wrap:nowrap; }
.brand-button { border:0; background:none; padding:0; }
.logo { color:var(--primary); font-size:25px; letter-spacing:-1px; }
.slogan { font-size:11px; color:var(--muted); }
.app-brand-icon { width:35px; height:35px; border-radius:10px; }
.app-nav { position:sticky; top:76px; left:auto; transform:none; z-index:35; justify-content:center; align-self:stretch; border-radius:0; gap:9px; padding:0 24px; min-height:54px; border-bottom:1px solid var(--line); background:#fff9f3ed; backdrop-filter:blur(16px); }
.nav-btn { color:var(--muted); padding:16px 15px 13px; border-radius:0; border-bottom:3px solid transparent; font-size:13px; white-space:nowrap; }
.nav-btn.active { color:var(--primary); border-bottom-color:var(--primary); background:none; }
.nav.app-nav { left:auto; right:auto; bottom:auto; width:100%; max-width:none; box-shadow:none; }
.app-nav .nav-btn { flex:0 0 auto; flex-direction:row; min-width:max-content; }
.nav-ic { display:flex; font-size:18px; }
.content { max-width:1384px; width:100%; margin:0 auto; padding:24px 32px 60px; }
.view { animation:page-arrive .35s ease-out; }
.btn { border-radius:9px; min-height:43px; font-weight:650; box-shadow:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.btn-primary { background:var(--primary); color:#fff; border:1px solid var(--primary); box-shadow:0 5px 12px #bb4d1214; }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-1px); }
.btn-secondary { color:var(--primary); background:var(--primary-soft); }
.btn-outline { border:1px solid #e2b99b; color:var(--primary); background:#fff; }
.btn-ghost { color:var(--ink); background:transparent; }
.btn-lg { padding:15px 22px; font-size:14px; min-height:50px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:10px; font-weight:700; letter-spacing:1.7px; color:#826753; text-transform:uppercase; }
.text-action,.home-overline button,.icon-button { border:0; background:none; color:var(--primary); display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:13px; padding:10px 0; }
.text-action:hover { color:#bd693b; }
.home-overline { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--muted); padding:0 2px 17px; }
.home-overline button { font-size:11px; padding:0; }
.discovery-hero { position:relative; min-height:540px; border:1px solid #e9e5d7; background:#f4eddf; border-radius:20px; overflow:hidden; isolation:isolate; }
.discovery-hero::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#f7f0e4 0%,#f7f0e4e0 29%,#f7f0e400 59%); pointer-events:none; }
.discovery-world { position:absolute; z-index:-2; right:-35px; top:-60px; width:1040px; height:694px; max-width:none; object-fit:cover; transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(1.015); transition:transform .35s ease-out; }
.discovery-copy { position:relative; padding:68px 0 85px 52px; width:57%; }
.status-dot { height:6px; width:6px; border-radius:50%; background:#c47843; }
.discovery-copy h1 { color:#413023; font-size:clamp(39px,4.1vw,58px); font-weight:800; letter-spacing:-2.6px; line-height:1.22; margin:22px 0; word-break:keep-all; }
.discovery-copy h1 em { color:#bb4d12; font-style:normal; }
.discovery-copy>p { color:#7f6552; font-size:15px; line-height:1.85; margin-bottom:29px; }
.discovery-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-trust { display:flex; align-items:center; gap:16px; margin-top:25px; font-size:11px; color:#7d6350; flex-wrap:wrap; }
.hero-trust>span { display:flex; align-items:center; gap:4px; }
.world-caption { display:flex; position:absolute; align-items:center; gap:11px; border:1px solid #ffffffc7; border-radius:13px; padding:12px 16px; background:#fffffff0; box-shadow:0 12px 25px #353b3d13; animation:caption-float 7s ease-in-out infinite; }
.world-caption small { display:block; color:#997962; font-size:9px; margin-bottom:3px; }
.world-caption strong { display:block; color:#4f3f33; font-size:12px; }
.caption-science { top:75px; right:41px; }
.caption-history { bottom:64px; left:55%; animation-delay:-3s; }
.caption-icon { display:grid; place-items:center; height:33px; width:33px; border-radius:50%; color:#8d6549; background:#fceadd; }
.caption-arrow { color:#b47347; font-size:22px; margin-left:8px; }
.hero-edition { position:absolute; left:52px; bottom:25px; color:#977761; letter-spacing:2px; font-size:8px; }
.motion-control { position:absolute; bottom:20px; right:21px; border:1px solid #ffffff88; border-radius:30px; background:#fff9; padding:6px 10px; font-size:10px; color:#624e3f; }
.motion-paused .world-caption { animation-play-state:paused; }
.discovery-finder { display:grid; grid-template-columns:1.3fr 1fr 1.1fr 1.1fr auto; align-items:center; gap:24px; position:relative; z-index:2; margin:-1px 20px 0; padding:24px 26px; background:white; border:1px solid var(--line); border-top:none; border-radius:0 0 14px 14px; box-shadow:0 10px 20px #432d1e05; }
.finder-intro { display:flex; align-items:center; gap:13px; color:var(--primary); }
.finder-intro strong { display:block; font-size:12px; }
.finder-intro small { display:block; margin-top:5px; font-size:10px; color:var(--muted); }
.discovery-finder>label { border-left:1px solid var(--line); padding-left:20px; font-size:10px; color:#977760; font-weight:600; }
.discovery-finder select { display:block; width:100%; padding:5px 14px 3px 0; border:0; background:white; color:var(--ink); font-size:12px; min-height:28px; }
.discovery-finder .btn { font-size:12px; padding:12px 17px; }
.discovery-stats { display:grid; grid-template-columns:repeat(4,1fr); padding:29px 12px 32px; border-bottom:1px solid var(--line); }
.discovery-stats>div { display:flex; justify-content:center; align-items:center; gap:13px; border-right:1px solid var(--line); }
.discovery-stats>div:last-child { border:0; }
.discovery-stats strong { font-size:25px; letter-spacing:-1px; font-weight:700; }
.discovery-stats strong span { font-size:12px; margin-left:4px; }
.discovery-stats>div>span { font-size:11px; color:var(--muted); }
.home-discovery-section { padding-top:52px; }
.travel-topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.travel-topic-grid>button { display:flex; align-items:center; gap:16px; padding:24px; text-align:left; border:1px solid var(--line); border-radius:14px; background:white; color:var(--primary); }
.travel-topic-grid>button>svg { flex-shrink:0; }
.travel-topic-grid>button>svg:last-child { margin-left:auto; width:16px; }
.travel-topic-grid strong { display:block; color:var(--ink); font-size:15px; word-break:keep-all; }
.travel-topic-grid small { display:block; margin-top:9px; color:var(--muted); font-size:12px; line-height:1.7; word-break:keep-all; }
.travel-place-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.travel-place-card { display:flex; flex-direction:column; align-items:flex-start; padding:26px; border:1px solid var(--line); border-radius:15px; background:white; text-align:left; color:var(--ink); }
.travel-place-card:hover,.travel-topic-grid>button:hover { border-color:#d08e5f; box-shadow:var(--shadow); }
.travel-place-icon { display:grid; place-items:center; width:64px; height:64px; background:linear-gradient(140deg,#fcece0,#fbe1cf); border-radius:18px; font-size:32px; margin-bottom:22px; }
.travel-place-card h3 { margin:14px 0 9px; font-size:19px; line-height:1.5; word-break:keep-all; }
.travel-place-card p { font-size:13px; line-height:1.8; color:var(--muted); margin:0 0 22px; word-break:keep-all; }
.travel-place-card .text-action { margin-top:auto; font-size:12px; }
@media(max-width:1000px) { .travel-topic-grid { grid-template-columns:1fr; }.travel-place-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .travel-place-grid { grid-template-columns:1fr; gap:12px; }.travel-place-card { padding:22px; }.travel-place-icon { margin-bottom:14px; }.travel-topic-grid>button { padding:20px; }.discovery-hero .discovery-copy h1 { font-size:clamp(28px,7.6vw,41px); letter-spacing:-1.4px; }.youth-service-guide .btn { white-space:normal; word-break:keep-all; } }
.discovery-section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.discovery-section-head h2 { color:var(--ink); font-size:27px; font-weight:750; letter-spacing:-1px; margin:10px 0 0; }
.discovery-section-head p { font-size:13px; color:var(--muted); margin:11px 0 0; }
.learning-story { display:grid; grid-template-columns:1fr 1.08fr; gap:60px; padding:48px 50px; margin-top:62px; background:#fce9dc; border:1px solid #f1ddcf; border-radius:17px; }
.learning-story h2 { font-size:31px; letter-spacing:-1px; line-height:1.5; margin:18px 0; color:var(--ink); }
.learning-story h2 em { font-style:normal; color:#94603a; }.learning-story-copy>p { color:var(--muted); font-size:13px; line-height:1.9; }
.learning-story-steps { display:flex; flex-direction:column; justify-content:center; }
.learning-story-steps article { display:flex; gap:21px; align-items:center; padding:21px 0; border-bottom:1px solid #edd4c2; }.learning-story-steps article:last-child { border:0; }
.learning-story-steps article>span { align-self:start; color:#cc834f; font-family:Georgia,serif; font-size:24px; }.learning-story-steps article>svg { margin-left:auto; flex-shrink:0; color:#876a56; }
.learning-story-steps small { color:#977760; font-size:8px; letter-spacing:1px; }.learning-story-steps h3 { color:var(--ink); font-size:16px; margin:5px 0; }.learning-story-steps p { color:#8f715c; font-size:11px; margin:0; line-height:1.7; }
.home-editorial-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px; }.home-editorial-grid article { border-radius:15px; padding:35px; overflow:hidden; position:relative; }.home-editorial-grid h2 { font-size:25px; line-height:1.45; letter-spacing:-.8px; margin:17px 0; }.home-editorial-grid p { font-size:12px; line-height:1.8; color:var(--muted); }.home-editorial-grid .btn { margin-top:12px; font-size:12px; }
.editorial-trip { background:#efeae0; }.editorial-club { background:#fce6d7; }.editorial-club>svg { position:absolute; right:16px; bottom:20px; color:#e3bb9f; transform:rotate(-20deg); pointer-events:none; opacity:.5; }.editorial-club .text-action { position:relative; z-index:1; }
.profile-nudge { display:flex; align-items:center; gap:16px; width:100%; padding:24px; margin-top:32px; background:transparent; border:1px solid var(--line); border-radius:12px; text-align:left; color:var(--primary); }.profile-nudge strong { display:block; font-size:13px; }.profile-nudge small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }.profile-nudge>span:last-child { margin-left:auto; font-size:11px; flex-shrink:0; }
.pricing-section { margin:64px 0 10px; }.pricing-section>h2 { font-size:28px; color:var(--ink); }.pricing-section>p { color:var(--muted); font-size:13px; }.pricing-card { border:1px solid var(--line); border-radius:15px; box-shadow:none; }.pricing-card.pro-card { border:2px solid #d26725; transform:none; }.popular-badge { background:#a84110; }.pricing-card .price { color:var(--primary); }.pricing-card h3 { color:var(--ink); }.toggle-switch.on { background:var(--primary); }
.page-heading { padding:26px 0 24px; }.page-heading h1 { color:var(--ink); font-size:36px; letter-spacing:-1.5px; margin:14px 0; line-height:1.3; }.page-heading p { font-size:14px; color:var(--muted); }.curriculum-tabs button { background:#fff; border:1px solid var(--line); color:#806552; border-radius:8px; padding:9px 13px; display:flex; gap:6px; align-items:center; font-size:12px; }.curriculum-tabs button.selected { color:white; background:var(--primary); border-color:var(--primary); }
.journal-disclosure { margin-top:35px; color:var(--muted); font-size:11px; line-height:1.8; }.inline-error { padding:13px; color:#9c352b; background:#fff0eb; border-radius:8px; font-size:12px; }.icon-button { padding:8px; color:var(--ink); }
.subject-tags { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0; }.subject-tags>span,.pill { color:#765d4c; background:#fceadd; padding:5px 9px; border-radius:5px; font-size:10px; display:inline-block; }.pill-orange { color:#99613c; background:#fcf0df; }
.journal-fields { display:flex; flex-direction:column; gap:18px; }.journal-fields label { font-size:12px; color:var(--ink); font-weight:650; }.journal-fields label>span { font-size:10px; color:var(--muted); font-weight:400; }.journal-fields textarea,.journal-fields input { width:100%; border:1px solid var(--line); background:#fff; border-radius:8px; padding:12px; margin-top:8px; color:var(--ink); font-size:12px; }.journal-fields textarea { min-height:80px; resize:vertical; }
.parent-prompt { border-left:3px solid #d4986d; padding:2px 18px; margin:25px 0; }.parent-prompt strong { font-size:11px; color:#816653; }.parent-prompt p { font-size:14px; color:var(--ink); line-height:1.8; }
.reading-link { display:flex; gap:15px; align-items:center; width:100%; border:1px solid #f0dccd; background:#fdeee3; padding:17px; border-radius:10px; text-align:left; color:#634632; }.reading-link span { flex:1; font-size:13px; font-weight:700; }.reading-link small { display:block; font-size:10px; font-weight:400; margin-top:4px; }
.source-note { margin-top:30px; border-top:1px solid var(--line); padding-top:20px; font-size:11px; color:var(--muted); line-height:1.85; }.source-note a { display:block; width:fit-content; margin-top:5px; }.source-note summary { cursor:pointer; }.source-note strong { color:var(--ink); }.source-note p { margin:8px 0; }.delete-record { margin-top:20px; color:#846856; font-size:10px; }
.curriculum-tabs { display:flex; gap:8px; margin:12px 0 22px; }.curriculum-tabs button { min-width:110px; justify-content:center; }.curriculum-detail { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; padding:40px; background:white; border:1px solid var(--line); border-radius:15px; }.curriculum-detail h2 { font-size:27px; color:var(--ink); letter-spacing:-1px; }.curriculum-detail p { font-size:14px; line-height:1.9; color:var(--muted); }.curriculum-detail .btn { margin-top:15px; font-size:12px; }.learning-receipt { background:#fdece0; padding:26px; border-radius:12px; }.learning-receipt h3 { font-size:18px; }.learning-receipt dt { font-size:11px; color:#987862; margin-top:18px; }.learning-receipt dd { margin:6px 0 0; font-size:13px; }.curriculum-timeline { margin-top:40px; }.curriculum-timeline>h2 { font-size:24px; }.policy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.policy-grid article { background:white; padding:25px; border:1px solid var(--line); border-radius:12px; }.policy-grid h3 { font-size:18px; }.policy-grid p { color:var(--muted); font-size:12px; line-height:1.9; }
.bookclub-intro { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; padding:35px; background:#fce8d9; border-radius:15px; margin:10px 0 25px; }.bookclub-intro h2 { font-size:26px; margin:12px 0; letter-spacing:-1px; }.bookclub-intro p { font-size:13px; color:var(--muted); line-height:1.9; }.bookclub-intro ol { margin:0; padding-left:23px; font-size:13px; line-height:2.2; }.club-controls { display:flex; flex-wrap:wrap; align-items:end; gap:20px; padding:25px; border:1px solid var(--line); background:white; border-radius:12px; }.club-controls label { display:flex; flex-direction:column; gap:8px; font-size:11px; flex:1; min-width:140px; }.club-controls select,.club-controls input { border:1px solid var(--line); border-radius:8px; padding:11px; color:var(--ink); background:#fff; min-width:0; }.club-plan { margin-top:30px; }.club-week-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.club-week-grid article { padding:24px; border:1px solid var(--line); border-radius:12px; background:white; }.club-week-grid h3 { font-size:18px; margin:13px 0; }.club-week-grid p,.club-week-grid li { color:var(--muted); font-size:12px; line-height:1.85; }.club-week-grid ul { padding-left:18px; }.club-week-grid time { display:block; font-size:11px; color:#89674e; margin-top:8px; }
.book-card { background:white; display:flex; gap:20px; align-items:center; padding:25px; border:1px solid var(--line); border-radius:12px; margin:20px 0; }.book-object { width:83px; height:113px; flex-shrink:0; background:linear-gradient(90deg,#3f2512 0 5%,#81634d 7% 9%,#4e321e 11%); color:#f0ebd8; padding:15px 12px; box-shadow:5px 5px 0 #ebe9e0,8px 8px 15px #3c2a1d17; transform:rotate(-5deg); border-radius:1px 4px 4px 1px; font-size:12px; font-weight:600; line-height:1.8; }.book-card h3 { font-size:18px; margin:0 0 6px; }.book-card p { color:var(--muted); font-size:12px; margin:6px 0; }.book-card a { font-size:12px; }.book-card small { font-size:10px; color:var(--muted); }
.depth-panel { border:1px solid #f0daca; border-radius:11px; margin-top:18px; background:#fdf3ec; }.depth-panel>summary { padding:16px; color:#685140; font-size:13px; font-weight:700; cursor:pointer; }.depth-content { padding:0 20px 20px; }.depth-content h4 { font-size:14px; color:var(--ink); margin:19px 0 7px; }.depth-content p,.depth-content li { font-size:12px; color:#826753; line-height:1.9; }.depth-content a { font-size:11px; }.depth-content .book-card { padding:15px; margin:15px 0; }.depth-content .book-object { width:60px; height:85px; font-size:10px; padding:8px; }.depth-content .book-card h3 { font-size:14px; }
.route-quality { padding:24px; border:1px solid #efd8c7; border-radius:12px; background:#fdece0; margin:16px 0; }.route-quality h3 { margin:0 0 12px; font-size:16px; }.route-quality ul { padding-left:20px; color:var(--muted); font-size:12px; line-height:1.9; margin-bottom:0; }.route-quality .subject-tags { margin:0; }.route-break { padding:10px 17px; border-left:2px solid #dba781; margin:8px 0; font-size:12px; color:#8f715c; }.planner-quality-controls { display:flex; gap:20px; margin:15px 0 20px; }.planner-quality-controls label { flex:1; display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--ink); }.planner-quality-controls select { border:1px solid var(--line); border-radius:8px; background:white; padding:11px; color:var(--ink); }.sample-course-banner { background:#fce8d9; border:1px solid #eed6c4; border-radius:11px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; margin:12px 0 22px; }.sample-course-banner p { font-size:12px; color:var(--muted); margin:6px 0 0; }.sample-course-banner strong { font-size:14px; }
.card { border-color:var(--line); box-shadow:var(--shadow-sm); }.page-sub { color:var(--muted); }.planner-hero,.sites-hero,.sheet-head { background:#fcece0; border-color:var(--line); }.sheet-head { --sheet-rose:#9c7356; --sheet-rose-dark:#674c39; --sheet-border:#fbddc7; }.footer { border-top:1px solid var(--line); background:#fcece0; }.footer>p { font-size:10px; }.footer a { color:#7c624f; }.footer .sibling-service { max-width:1256px; margin:0 auto 30px; box-shadow:none; border-color:var(--line); }
@keyframes caption-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(1deg); } }
@keyframes page-arrive { from { opacity:.5; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1500px) { .discovery-world { width:1120px; height:747px; top:-75px; }.discovery-copy { width:53%; } }
@media(max-width:1100px) { .slogan { display:none; }.discovery-copy { padding-left:35px; width:60%; }.discovery-copy h1 { font-size:46px; }.discovery-world { right:-150px; }.caption-history { left:64%; }.discovery-finder { gap:15px; padding:22px; grid-template-columns:repeat(3,1fr) auto; margin:0 10px; }.finder-intro { display:none; }.discovery-finder>label:first-of-type { border:0; padding:0; }.learning-story { padding:35px; gap:35px; }.nav-btn { padding:15px 10px 12px; font-size:12px; }.app-nav { gap:2px; }.learning-story h2 { font-size:27px; }.world-caption { padding:10px; }.discovery-stats { padding-left:0; padding-right:0; }.discovery-stats>div { gap:7px; }.discovery-stats>div>span { font-size:10px; } }
@media(max-width:760px) { html { scroll-padding-top:123px; }.topbar { height:66px; padding:12px 20px; }.logo { font-size:22px; }.guest-auth-actions .btn { min-height:35px; font-size:11px; padding:7px 10px; }.app-nav { top:66px; justify-content:flex-start; overflow-x:auto; min-height:50px; padding:0 15px; width:100%; scrollbar-width:none; }.nav-btn { flex-shrink:0; padding:13px 11px 11px; font-size:11px; gap:5px; }.nav-ic svg { width:16px; height:16px; }.content { padding:18px 18px 35px; }.home-overline>span { font-size:9px; }.home-overline button { font-size:9px; gap:4px; }.discovery-hero { min-height:670px; border-radius:15px; }.discovery-copy { width:100%; padding:31px 25px 0; }.discovery-copy h1 { font-size:41px; letter-spacing:-1.8px; margin:18px 0 13px; }.discovery-copy>p { font-size:13px; margin:0 0 17px; line-height:1.7; }.discovery-actions .btn { padding:11px 14px; min-height:42px; font-size:11px; }.hero-trust { margin-top:16px; gap:10px; font-size:9px; }.discovery-world { width:680px; height:454px; right:-51px; top:auto; bottom:-7px; }.discovery-hero::after { background:linear-gradient(180deg,#f7f0e4 0%,#f7f0e4 34%,#f7f0e480 47%,#f7f0e400 60%); }.caption-science { top:auto; bottom:205px; right:16px; }.caption-history { left:20px; bottom:64px; }.world-caption strong { font-size:10px; }.world-caption small { font-size:8px; }.hero-edition { left:22px; bottom:21px; font-size:7px; letter-spacing:1px; }.motion-control { font-size:9px; right:14px; bottom:16px; }.discovery-finder { grid-template-columns:1fr 1fr; margin:0; padding:20px 17px; gap:20px 15px; }.discovery-finder>label { padding-left:10px; }.discovery-finder>label:nth-of-type(3) { padding:0; border:0; }.discovery-finder .btn { padding:10px; font-size:12px; }.discovery-finder select { font-size:11px; }.discovery-stats { grid-template-columns:1fr 1fr; row-gap:22px; padding:26px 0; }.discovery-stats>div:nth-child(2) { border:0; }.discovery-stats strong { font-size:23px; }.discovery-stats>div>span { font-size:10px; }.home-discovery-section { padding-top:35px; }.discovery-section-head { align-items:start; gap:12px; }.discovery-section-head h2 { font-size:23px; letter-spacing:-1px; }.discovery-section-head p { font-size:11px; line-height:1.8; }.eyebrow { font-size:8px; letter-spacing:1.3px; }.discovery-section-head .text-action { font-size:10px; flex-shrink:0; margin-top:20px; gap:5px; }.learning-story { grid-template-columns:1fr; gap:18px; padding:28px 24px; margin-top:36px; }.learning-story h2 { font-size:26px; }.learning-story-copy>p { font-size:12px; }.learning-story-steps article { gap:15px; }.learning-story-steps h3 { font-size:15px; }.home-editorial-grid { grid-template-columns:1fr; gap:16px; margin-top:18px; }.home-editorial-grid article { padding:27px; }.home-editorial-grid h2 { font-size:24px; }.profile-nudge { gap:12px; padding:17px; }.profile-nudge small { font-size:10px; }.profile-nudge>span:last-child { font-size:9px; }.profile-nudge>svg { display:none; }.pricing-section { margin-top:38px; }.pricing-section>h2 { font-size:25px; }.page-heading { padding-top:18px; }.page-heading h1 { font-size:28px; }.page-heading p { font-size:12px; line-height:1.8; }.curriculum-detail { grid-template-columns:1fr; gap:25px; padding:25px; }.curriculum-detail h2 { font-size:23px; }.curriculum-detail p { font-size:12px; }.curriculum-tabs button { min-width:0; flex:1; font-size:12px; }.policy-grid { grid-template-columns:1fr; }.bookclub-intro { grid-template-columns:1fr; gap:18px; padding:25px; }.bookclub-intro h2 { font-size:23px; }.club-week-grid { grid-template-columns:1fr 1fr; }.club-week-grid article { padding:18px; }.book-card { padding:20px; gap:20px; }.book-card h3 { font-size:16px; }.book-card p { font-size:11px; }.sample-course-banner { align-items:start; flex-direction:column; }.planner-quality-controls { gap:12px; }.planner-quality-controls select { font-size:11px; width:100%; }.planner-quality-controls label { min-width:0; }.account-menu-trigger { max-width:200px; }.auth-section { margin:0; } }
@media(max-width:370px) { .content { padding-left:12px; padding-right:12px; }.home-overline>span { display:none; }.home-overline { justify-content:flex-end; }.discovery-copy { padding-left:20px; }.discovery-copy h1 { font-size:35px; }.discovery-actions { gap:5px; }.hero-trust { gap:6px; }.club-week-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .view,.world-caption { animation:none !important; }.discovery-world { transition:none; transform:none !important; }.motion-control { display:none; } }
@media print { html,body,.app,.content,.view { background:#fff!important; } .skip-link { display:none!important; } .page-heading { padding:0 0 12px; } .page-heading h1 { font-size:24px; } .book-card { break-inside:avoid; } }
@media print { .topbar,.app-nav,.footer,.club-controls,.bookclub-intro,.source-note,.sample-course-banner,.planner-quality-controls { display:none!important; }.content { max-width:none; width:100%; padding:0; }.club-week-grid { display:block; }.club-week-grid article { break-inside:avoid; margin:10px 0; }.view { animation:none; }.depth-content,.route-quality { break-inside:avoid; }.depth-panel:not([open]) { display:none; } }

/* Pricing: whole-word Korean wrapping and explicit, readable benefit rows. */
.pricing-section { padding:40px clamp(16px,3vw,36px); word-break:keep-all; overflow-wrap:break-word; }
.pricing-section h2 { text-wrap:balance; line-height:1.45; }
.pricing-section p { text-wrap:pretty; line-height:1.75; }
.pricing-section .pricing-intro { max-width:650px; margin:0 auto 28px; font-size:14px; }
.pricing-included { margin:26px 0 30px; padding:24px; border:1px solid #efd9ca; border-radius:16px; background:#fdf1e9; text-align:left; }
.pricing-included-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pricing-included-heading h3 { margin:0; font-size:18px; }
.pricing-included ul { list-style:none; padding:0; margin:22px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; }
.pricing-included li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:11px; align-items:start; }
.pricing-included li>svg { color:var(--primary); margin-top:2px; }
.pricing-included li strong { display:block; font-size:14px; line-height:1.65; }
.pricing-included li small { display:block; color:#6d5645; font-size:12px; line-height:1.7; margin-top:3px; }
.pricing-included-footer { border-top:1px solid #efd9ca; padding-top:15px; display:flex; align-items:center; gap:24px; }
.pricing-included-footer p { margin:0; color:#6d5645; font-size:12px; flex:1; }
.pricing-included-footer button { font-size:12px; flex-shrink:0; }
.pricing-section .billing-toggle { margin:0 0 12px; gap:12px; font-size:14px; flex-wrap:wrap; }
.pricing-section .billing-toggle>span,.pricing-section .toggle-switch { white-space:nowrap; flex-shrink:0; }
.pricing-section .billing-period-note { max-width:720px; margin:0 auto 24px; font-size:12px; color:#6d5645; }
.pricing-section .sales-readiness { max-width:none; margin-bottom:34px; box-shadow:none; }
.pricing-section .sales-readiness-heading { flex-wrap:wrap; }
.pricing-section .pricing-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.pricing-section .pricing-card { width:100%; min-width:0; max-width:none; padding:28px clamp(18px,2vw,28px) 24px; text-align:left; cursor:default; }
.pricing-section .pricing-card:hover { transform:none; box-shadow:var(--shadow-sm); }
.pricing-section .plan-heading { min-height:104px; }
.pricing-section .plan-use { font-size:12px; font-weight:650; color:#6e5747; line-height:1.7; }
.pricing-section .pricing-card h3 { margin:8px 0 7px; font-size:22px; line-height:1.3; white-space:nowrap; }
.pricing-section .plan-heading p { margin:0; font-size:13px; color:#7b614e; }
.pricing-section .popular-badge { width:max-content; max-width:calc(100% - 28px); white-space:nowrap; padding:6px 14px; line-height:1.4; top:-15px; font-size:12px; }
.pricing-section .price-wrap { margin:21px 0 23px; gap:5px; min-height:69px; justify-content:flex-end; }
.pricing-section .pricing-card .price { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 7px; margin:0; font-size:30px; line-height:1.25; text-wrap:initial; }
.pricing-section .price>span { white-space:nowrap; }
.pricing-section .pricing-card .price .period { font-size:13px; color:#7b614e; }
.pricing-section .price-caption { font-size:11px; color:#7b614e; }
.pricing-section .original-price { margin:0; font-size:12px; }
.pricing-section .pricing-card .features { display:flex; flex-direction:column; gap:17px; margin:0 0 22px; }
.pricing-section .pricing-card .features li { display:grid; grid-template-columns:17px minmax(0,1fr); gap:9px; margin:0; word-break:keep-all; overflow-wrap:break-word; line-height:1.65; }
.pricing-section .features li>svg { color:var(--primary); margin-top:3px; }
.pricing-section .features strong { display:block; font-size:14px; font-weight:550; text-wrap:pretty; }
.pricing-section .features small { display:block; font-size:12px; color:#7b614e; line-height:1.7; margin-top:4px; text-wrap:pretty; }
.pricing-section .pricing-card .plan-limit { margin:0 0 17px; border-top:1px solid var(--line); padding-top:13px; min-height:56px; font-size:12px; color:#7b614e; }
.pricing-terms { margin:22px auto 0; max-width:900px; }
.pricing-section .pricing-terms p { margin:5px 0; color:#7b614e; font-size:12px; }
.school-plan { background:#fef4ed; border:1px solid var(--line); border-radius:16px; padding:24px; text-align:left; margin-top:28px; }
.school-plan-heading { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.school-plan-heading h3 { font-size:18px; margin:0; flex:1; }
.school-plan-heading .pill { flex-shrink:0; }
.pricing-section .school-plan p { margin:7px 0 0; font-size:13px; color:#6d5645; }
/* Match text and stat contrast to the lighter discovery backgrounds. */
.sites-hero { color:#3d2b21; box-shadow:var(--shadow-sm); }
.sites-hero h1 { color:#3d2b21; word-break:keep-all; text-wrap:balance; }
.sites-hero-kicker { color:#6c4e38; line-height:1.6; }
.sites-hero p { color:#6d5645; word-break:keep-all; text-wrap:pretty; }
.sites-hero-stats>div { background:#fff; border-color:#ecd2bf; min-width:0; }
.sites-hero-stats strong { color:#bb4d12; }
.sites-hero-stats span { color:#6d5645; font-size:11px; line-height:1.5; word-break:keep-all; }
.sites-hero::after { border-color:#f0dccd; }
/* Canvas PDF exporters do not apply the browser's native closed-details layout. */
.depth-panel:not([open]) > .depth-content { display:none; }
@media(max-width:1050px) {
  .pricing-section .pricing-cards { grid-template-columns:1fr; gap:30px; }
  .pricing-section .pricing-card { max-width:560px; margin:0 auto; padding:28px; }
  .pricing-section .plan-heading { min-height:0; }
  .pricing-section .price-wrap { min-height:0; }
  .pricing-section .pricing-card .plan-limit { min-height:0; }
}
@media(max-width:600px) {
  .pricing-section { padding:30px 16px; }
  .pricing-section .pricing-intro { font-size:13px; }
  .pricing-included { padding:18px; }
  .pricing-included ul { grid-template-columns:1fr; gap:18px; }
  .pricing-included-heading h3 { font-size:16px; }
  .pricing-included-footer { align-items:flex-start; flex-direction:column; gap:12px; }
  .pricing-section .pricing-card { padding:26px 20px 20px; }
  .pricing-section .pricing-card .price { font-size:28px; }
  .pricing-section .billing-toggle { gap:10px; font-size:12px; }
  .school-plan { padding:19px; }
  .school-plan-heading { align-items:flex-start; }
  .school-plan-heading h3 { flex-basis:calc(100% - 38px); font-size:17px; line-height:1.55; }
}
/* Tactile navy travel cover, archival paper, and guardian-issued ink stamps. */
.travel-passport .page-heading {max-width:770px;margin-bottom:26px;word-break:keep-all;overflow-wrap:anywhere}
.travel-passport .page-heading h1 {font-size:clamp(26px,3.1vw,42px);letter-spacing:-.05em;line-height:1.3;margin:12px 0}
.travel-passport .page-heading p {color:#6f5847;line-height:1.8}
.passport-toolbar,.passport-toolbar>div {display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.passport-toolbar {margin:24px 0;color:#725a49;font-size:14px}
.passport-notice {padding:14px 18px;background:#fce9db;color:#54341d;border:1px solid #e4bda1;border-radius:10px}
.passport-desk {display:grid;grid-template-columns:minmax(245px,.72fr) minmax(0,1.6fr);gap:40px;padding:46px 32px;background:radial-gradient(ellipse at 50% 0,#fceade,#f1ddcf);border-radius:24px;perspective:1300px;align-items:center;box-shadow:inset 0 1px 0 #fff;border:1px solid #edd4c3}
.passport-cover {position:relative;isolation:isolate;border:1px solid #283d59;border-radius:6px 17px 17px 6px;color:#dec58b;background:repeating-radial-gradient(ellipse at 30% 20%,#ffffff05 0 .5px,transparent 1px 3px),linear-gradient(100deg,#091a31,#162c49 15%,#0c203a 90%,#1f3552);padding:36px 25px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:125/176;min-width:0;width:100%;box-shadow:inset 6px 0 10px #0009,inset 0 0 0 5px #11253f,inset 0 0 0 6px #dfc89730,9px 13px 0 -9px #d5c9b2,12px 17px 0 -11px #aca18d,15px 25px 30px #102c3945;transform:rotate(-6deg) rotateY(8deg);transition:transform .65s ease,box-shadow .65s ease;text-shadow:0 1px 1px #000;cursor:pointer;font-family:inherit}
.passport-cover:after {content:'';position:absolute;inset:12px;border:1px solid #d6bc7938;border-radius:3px 9px 9px 3px;pointer-events:none}
.passport-cover:hover,.is-open .passport-cover {transform:rotate(-3deg) rotateY(-12deg) translateY(-6px)}
.passport-country {font-size:27px;font-weight:650;letter-spacing:.22em;margin-left:.22em}
.passport-country-en {font-size:8px;letter-spacing:.18em;margin-top:9px;text-align:center}
.passport-emblem {display:block;width:46%;margin:28px auto 20px;filter:drop-shadow(0 1px 1px #000)}
.passport-emblem svg {width:100%;display:block}
.passport-cover strong {font-size:30px;letter-spacing:.13em}
.passport-english {font-size:9px;letter-spacing:.13em;margin-top:7px}
.passport-cover-line {width:32px;height:1px;background:#d0b06b;margin:19px 0 14px}
.passport-family {font-size:12px;word-break:keep-all;overflow-wrap:anywhere;text-align:center;max-width:100%}
.passport-publisher {font-size:9px;letter-spacing:.23em;margin-top:19px}
.passport-cover small {font-size:8px;color:#c1b79e;margin-top:10px}
.passport-open-book {min-width:0;position:relative;background:radial-gradient(ellipse at 45% 60%,transparent 10%,#8f997416 10.2%,transparent 10.6%,transparent 22%,#8f997412 22.2%,transparent 22.8%),repeating-linear-gradient(35deg,#c2b49009 0 1px,transparent 1px 7px),#faf7ed;padding:26px 28px 20px;border:1px solid #d0c8b6;border-radius:3px 12px 12px 3px;box-shadow:inset 12px 0 18px -12px #72634555,3px 4px 0 -1px #e9e1cc,6px 8px 0 -3px #b7ad97,0 18px 30px #263c3420;transform:rotate(1deg)}
.passport-page-head,.passport-page-foot {display:flex;justify-content:space-between;gap:10px;color:#746d55;line-height:1.6;font-size:10px;border-bottom:1px solid #b9ad8760;padding-bottom:12px}
.passport-page-head>span:first-child {font-weight:700;letter-spacing:.08em;font-size:13px}
.passport-page-head small {display:block;font-size:8px;letter-spacing:.12em;font-weight:500}
.passport-traveler {display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0;color:#736d5f;font-size:11px}
.passport-traveler label {display:flex;align-items:center;gap:9px}
.passport-traveler select {width:auto;max-width:190px;background:#fff8;border:1px solid #c6bda8;color:#4e554b;border-radius:5px;padding:6px;font-size:12px}
.passport-stamp-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px;min-height:284px;align-content:center;padding:10px 0 20px}
.travel-stamp {--stamp-ink:#356f68;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;aspect-ratio:1;transform:rotate(var(--stamp-angle));border:2px solid var(--stamp-ink);outline:1px solid var(--stamp-ink);outline-offset:-7px;background:transparent;color:var(--stamp-ink);border-radius:50%;font-family:inherit;cursor:pointer;mix-blend-mode:multiply;transition:transform .2s;min-width:0}
.travel-stamp:hover,.travel-stamp:focus-visible {transform:rotate(0) scale(1.05)}
.travel-stamp.stamp-1 {--stamp-ink:#435d84;border-radius:6px;aspect-ratio:1.1}
.travel-stamp.stamp-2 {--stamp-ink:#984f3e}
.stamp-arc {font-size:7px;letter-spacing:.025em}
.travel-stamp strong {font-size:13px;line-height:1.35;max-width:100%;word-break:keep-all;overflow-wrap:anywhere}
.travel-stamp time {font-family:monospace;font-size:13px;font-weight:700;border-block:1px solid;padding:2px 0}
.travel-stamp>span:last-child {font-size:9px;overflow-wrap:anywhere}
.passport-stamp-slot {min-width:0;aspect-ratio:1;border:1px dashed #9e9c8288;border-radius:50%;background:transparent;color:#817f66;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10px;cursor:pointer}
.passport-stamp-slot span {font-size:24px;font-weight:200}
.passport-empty {grid-column:1/-1;text-align:center;color:#6d7663;padding:35px 10px}
.passport-empty>svg {opacity:.6}
.passport-empty h2 {font-size:19px;color:#495e51;word-break:keep-all;line-height:1.5;margin:15px 0 8px}
.passport-empty p {font-size:13px;line-height:1.8;margin-bottom:18px}
.passport-empty .text-action {margin:auto}
.passport-page-foot {border-bottom:0;border-top:1px solid #b9ad8760;padding:14px 0 0;align-items:center}
.passport-page-foot>div {display:flex;gap:13px;align-items:center}
.passport-page-foot button {border:0;background:transparent;color:#4f6555;font-size:18px;padding:4px;cursor:pointer}
.passport-page-foot button:disabled {opacity:.3;cursor:default}
.passport-counts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:24px 0;margin:20px 0 32px;border-bottom:1px solid #eed6c4;gap:16px}
.passport-counts>div {display:flex;align-items:center;gap:14px;justify-content:center;color:#725a49;font-size:13px}
.passport-counts strong {font-size:30px;color:#553721;font-weight:650}
.passport-how h2 {font-size:22px;margin-bottom:22px}
.passport-how ol {list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0}
.passport-how li {border-top:2px solid #e4bda1;padding-top:16px;line-height:1.8;font-size:14px;word-break:keep-all}
.passport-how li strong {color:#5b412e}
.passport-how li p {color:#836854;margin-top:7px}
.passport-disclosure {font-size:12px;line-height:1.8;color:#866955;word-break:keep-all;overflow-wrap:anywhere}
.passport-how>.passport-disclosure {background:#fce9db;padding:16px 20px;border-radius:10px;margin:24px 0 20px}
.visit-form-modal,.visit-detail {width:min(640px,calc(100vw - 32px));max-width:640px;word-break:keep-all;overflow-wrap:anywhere}
.visit-form-modal>h2,.visit-detail>h2 {padding-right:25px;font-size:24px;line-height:1.4;margin:12px 0}
.visit-form-modal>p,.visit-detail>p {line-height:1.8;font-size:14px}
.visit-form fieldset {border:0;padding:0;margin:20px 0 0;min-width:0}
.visit-form label {display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;margin:16px 0;color:#554337;min-width:0}
.visit-form .form-row {gap:16px}
.visit-form .form-row>label {flex:1}
.visit-kind {display:flex;gap:8px}
.visit-kind button {flex:1;padding:12px;border:1px solid #e4bca0;background:#fdf4ec;color:#6d5646;border-radius:8px;font-size:14px;cursor:pointer}
.visit-kind button[aria-pressed=true] {background:#bb4d12;color:white;border-color:#bb4d12}
.visit-kind button:disabled {opacity:.45;cursor:default}
.visit-form .visit-check,.visit-check {display:flex;flex-direction:row;gap:10px;align-items:flex-start;line-height:1.65;font-size:13px;font-weight:500;cursor:pointer}
.visit-check input {width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:#315b48}
.visit-photo-upload {padding:16px;border:1px dashed #b9c6b7;border-radius:8px;background:#f7f8f2}
.visit-photo-upload input {padding:8px 0;font-size:12px;max-width:100%}
.visit-photo-upload small {font-weight:400;color:#69796f}
.visit-photo-thumb {width:100%;max-height:220px;object-fit:contain;border-radius:8px;background:#eef1e7}
.visit-photo {width:100%;max-height:380px;object-fit:contain;border-radius:10px;background:#f1f2ed;margin:15px 0}
.visit-note {white-space:pre-wrap;overflow-wrap:anywhere}
.visit-delete {border-top:1px solid #dee4d9;margin-top:22px;padding-top:18px}
.visit-delete .text-action {margin-top:12px}
.visit-stops {padding:12px;background:#f0f4eb;font-size:13px;line-height:1.7;border-radius:8px}
@media(max-width:1000px) {.passport-desk{gap:28px;padding:34px 24px}.passport-stamp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.passport-cover{padding:32px 22px}.passport-open-book{padding:22px}.passport-counts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px) {.passport-desk{grid-template-columns:1fr;padding:32px 20px;gap:36px}.passport-cover{max-width:245px;justify-self:center}.passport-open-book{transform:none;padding:22px 17px}.passport-stamp-grid{gap:22px 15px}.passport-traveler{align-items:flex-start;flex-direction:column}.passport-how ol{grid-template-columns:1fr}.passport-counts>div{justify-content:flex-start;font-size:12px}.passport-page-head>span:last-child{max-width:90px;text-align:right}.passport-toolbar>button{width:100%}.visit-form .form-row{display:block}.visit-form-modal,.visit-detail{padding:24px 20px}.passport-how h2{font-size:20px}}
@media(prefers-reduced-motion:reduce) {.passport-cover,.travel-stamp{transition:none}}

/* A4 school form: clean black rules, real fields, handwritten signatures, photo annex. */
.school-extra-fields {display:grid;gap:16px;padding-top:20px;border-top:1px solid #dce4d7}
.school-extra-fields .field-help {font-size:12px;line-height:1.8;color:#687669}
.school-report.sheet-paper {background:#fff;color:#111;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;border-radius:0;font-size:10pt;line-height:1.6}
.school-heading {display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;break-inside:avoid}
.school-heading h2 {flex:1;margin:0;text-align:center;font-size:19pt;letter-spacing:-.035em;line-height:1.45;color:#111;word-break:keep-all}
.school-approval {border-collapse:collapse;width:120px;text-align:center;font-size:10pt;flex-shrink:0}
.school-approval th,.school-approval td {border:1px solid #333;width:50%;padding:5px}
.school-approval td {height:42px}
.school-info {border-collapse:collapse;width:100%;table-layout:fixed;margin-bottom:0;break-inside:avoid}
.school-info th,.school-info td {border:1px solid #333;padding:7px 10px;color:#111;font-size:10pt;line-height:1.55;overflow-wrap:anywhere;word-break:keep-all}
.school-info th {width:14%;font-weight:600;background:#f8f8f8;text-align:center}
.school-info td {width:36%}
.school-type-options span {display:inline-block;margin-right:14px;white-space:nowrap}
.school-report .paper-section {border:1px solid #333;border-top:0;margin:0;break-inside:auto;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.school-report .paper-section-label {background:#f8f8f8;color:#111;border:0;border-radius:0;padding:6px 10px;font-size:10pt;letter-spacing:0;break-after:avoid;font-weight:650}
.school-report .paper-section-body {background:none;border:0;border-radius:0;padding:9px 12px;font-size:10pt;line-height:1.8}
.school-report .paper-section-body.is-empty {background:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,#eee 27px,#eee 28px);background-origin:content-box}
.school-report .paper-section-body p {margin:0;white-space:pre-wrap;overflow-wrap:anywhere;orphans:3;widows:3}
.school-signatures {border:1px solid #333;border-top:0;padding:16px 20px;break-inside:avoid;text-align:center;font-size:10pt;line-height:1.7}
.school-signatures p {margin:0 0 9px}
.school-signatures>div {display:flex;justify-content:flex-end;gap:28px;margin:5px 0}
.school-signatures strong {display:block;text-align:left;font-size:13pt;margin-top:12px}
.school-attachment {break-before:column;padding-top:0}
.school-attachment h2 {text-align:center;font-size:18pt;line-height:1.5;margin:0 0 12px;color:#111;break-after:avoid}
.attachment-identity {font-size:10pt;border-bottom:1px solid #333;padding-bottom:12px;margin:0 0 18px;line-height:1.7;break-after:avoid}
.sheet-paper .paper-photo {margin:0;aspect-ratio:auto;overflow:visible;background:transparent;border-radius:0;break-inside:avoid}
.sheet-paper .paper-photo img {width:100%;aspect-ratio:4/3;object-fit:contain;background:#f7f7f4;border:1px solid #d5d7d0;display:block;border-radius:3px}
.sheet-paper .paper-photo figcaption {font-size:9pt;line-height:1.6;padding:7px 0;overflow-wrap:anywhere;color:inherit}
.school-report .paper-photo-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.school-report .paper-photo-grid.count-1 {grid-template-columns:1fr}
.school-report .paper-photo-grid.count-1 img {max-height:540px;aspect-ratio:auto;height:480px}
.school-report .paper-photos {margin:0;break-inside:auto}
.school-report .paper-photos>.paper-section-label {padding:0 0 10px;background:none}
.journal-report .paper-header {padding-bottom:14px;border-bottom:2px solid currentColor;margin-bottom:18px}
.journal-report .paper-title {font-size:24px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.journal-report .paper-template-tag {text-transform:uppercase;font-size:10px;letter-spacing:.12em;margin-bottom:9px}
.journal-report .paper-section {break-inside:auto}
.journal-report .paper-section-label {break-after:avoid}
.journal-report .paper-section-body p {orphans:3;widows:3;overflow-wrap:anywhere}
.journal-lower-diary .paper-section-body {font-size:15px;line-height:2}
.diary-drawing {height:260px;border:2px dashed #b4b8a0;border-radius:10px;margin:18px 0;padding:22px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#73826d;break-inside:avoid}
.diary-drawing strong {font-size:15px}
.diary-drawing span {font-size:11px}
.journal-inquiry {counter-reset:inquiry}
.journal-inquiry .paper-section-label:before {counter-increment:inquiry;content:'0' counter(inquiry) ' / ';font-family:monospace;opacity:.7}
.journal-inquiry .paper-section {border-left:2px solid currentColor;padding-left:10px}
.journal-inquiry .paper-section-body {background:transparent}
@media print {.school-report.sheet-paper{padding:0}.school-attachment{break-before:page;page-break-before:always}.school-report .paper-section,.school-report .paper-photos,.school-report .paper-photo-grid{break-inside:auto;page-break-inside:auto}.school-report .paper-photo{break-inside:avoid;page-break-inside:avoid}.school-report .paper-section-label{break-after:avoid}.school-report .school-signatures{break-inside:avoid;page-break-inside:avoid}.school-report .paper-section{margin:0}.journal-report .paper-section{break-inside:auto;page-break-inside:auto}}
/* Fixed physical A4 dimensions keep preview pagination stable on phones and desktop. */
.sheet-preview-canvas {position:relative;width:100%;aspect-ratio:210/297;overflow:hidden;background:#fff;box-shadow:0 8px 30px #213d3215}
.sheet-preview-canvas .sheet-preview-page {position:absolute;inset:0;width:794px!important;height:1123px!important;min-height:0;max-width:none;aspect-ratio:auto;padding:45px 53px 53px;box-shadow:none;font-size:10pt}
.sheet-preview-page-columns>.paper-section {break-inside:auto}
.sheet-preview-page-columns>.school-signatures {break-inside:avoid}
.school-report .school-info th,.school-report .school-info td {padding:5px 9px}
.school-signatures {padding:12px 18px}
.school-signatures p {margin-bottom:6px}
.school-report .paper-photo-grid {background:none;border:0;padding:0;box-shadow:none}
.school-report .paper-photo {border:0;padding:0;box-shadow:none}
.school-report .school-info th,.school-report .school-info td {width:auto}
.school-report .paper-section-label {display:block}
/* Original free-form layouts; premium themes remain selectable. */
.theme-diary.journal-report {--journal-ink:#2b5445;--journal-line:#c7d3c6;--journal-tint:#f4f7ef;color:#35483e;background:#fdfdf8}
.theme-diary.journal-report .paper-title {color:var(--journal-ink);border:0;margin:10px 0 20px;padding:0;text-align:left;font-size:25px;letter-spacing:-.045em}
.theme-diary.journal-report .paper-header {border:0;margin-bottom:22px;padding-bottom:0}
.theme-diary.journal-report .paper-template-tag {color:var(--journal-ink);background:var(--journal-tint);border-radius:3px;font-size:11px;padding:6px 10px;letter-spacing:.06em}
.theme-diary.journal-report .paper-info th {background:var(--journal-tint);color:var(--journal-ink);border-color:var(--journal-line);font-size:12px}
.theme-diary.journal-report .paper-info td {border-color:var(--journal-line);color:#35483e;font-size:12px}
.theme-diary.journal-report .paper-section-label {background:transparent;border:0;padding:5px 0;color:var(--journal-ink);font-size:13px;display:block;letter-spacing:0}
.theme-diary.journal-report .paper-section-body {border:1px solid var(--journal-line);border-radius:5px;background:transparent;padding:10px 12px}
.theme-diary.journal-report .paper-photo-grid {padding:0;border:0;background:transparent}
.journal-report .paper-photo-grid.count-1 img {height:260px;aspect-ratio:auto;object-fit:contain}
.journal-report .paper-photo {border:0;padding:0}
.theme-diary.journal-lower-diary {--journal-ink:#346077;--journal-line:#bfced3;--journal-tint:#edf5f8}
.theme-diary.journal-lower-diary .paper-title {font-size:28px;line-height:1.6}
.theme-diary.journal-lower-diary .paper-section-label {font-size:15px}
.theme-diary.journal-lower-diary .paper-section-body {border-radius:0;border-width:0 0 1px;font-size:15px;line-height:2}
.theme-diary.journal-lower-diary .paper-photo-grid {border:2px solid #bfced3;border-radius:12px;padding:10px 12px}
.theme-diary.journal-inquiry {--journal-ink:#314863;--journal-line:#bec9d5;--journal-tint:#eff3f8}
.theme-diary.journal-inquiry .paper-template-tag {font-family:monospace;letter-spacing:.14em}
.theme-diary.journal-inquiry .paper-section {border-left:2px solid #8094a9;padding-left:12px}
.theme-diary.journal-inquiry .paper-section-body {border:0;border-bottom:1px solid #bec9d5;border-radius:0}
.theme-diary.journal-inquiry .paper-section-label:before {font-weight:400;letter-spacing:.06em}
.sheet-paper .paper-section.keep-together,.sheet-preview-page-columns>.paper-section.keep-together {break-inside:avoid;page-break-inside:avoid}
/* Let captions participate in grid row sizing; inherited height:100% hid the last row. */
.sheet-paper .paper-photo img {height:auto}
.catalog-categories { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
/* Pagination bounds rendering; real card heights prevent button movement. */
.site-grid .site-card { content-visibility:visible; contain-intrinsic-size:none; }
.catalog-categories button { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #e9cbb5; border-radius:100px; background:#fff; color:#523723; font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; min-height:42px; }
.catalog-categories button span { font-size:.72rem; font-variant-numeric:tabular-nums; opacity:.85; }
.catalog-categories button[aria-pressed=true] { background:#bb4d12; border-color:#bb4d12; color:#fff; }
.catalog-categories button:hover { border-color:#bb4d12; box-shadow:0 2px 8px #bb4d1217; }
.catalog-categories button:focus-visible,.catalog-load-more button:focus-visible { outline:3px solid #b15d2e; outline-offset:3px; }
.catalog-filter-note,.catalog-learning-note { color:#6e5746; font-size:.8rem; line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; margin:14px 0 0; }
.sites-result-bar .result-count small { font-size:.8rem; font-weight:400; color:#6e5746; white-space:nowrap; }
.catalog-load-more { display:grid; justify-items:center; gap:12px; padding:32px 12px; color:#6e5746; }
.catalog-load-more p { margin:0; font-size:.85rem; }
.catalog-load-more button { min-width:220px; }
.catalog-status-badge { background:#fff0da; color:#784209; border:1px solid #ebd1a8; padding:4px 8px; border-radius:6px; font-size:.72rem; font-weight:700; }
.catalog-source { display:grid; gap:8px; padding:18px; border:1px solid #ecd0bc; background:#fef5ee; border-radius:14px; margin:16px 0; color:#594231; font-size:.85rem; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.catalog-source a { color:#5e3619; text-decoration:underline; text-underline-offset:3px; }
.catalog-source p { margin:0; }
.catalog-source small { color:#705847; font-size:.78rem; }
.catalog-appointment-note { padding:14px 16px; border-radius:10px; background:#fff5e7; border:1px solid #ecd6b3; color:#714711; font-size:.85rem; line-height:1.7; word-break:keep-all; overflow-wrap:anywhere; }
.site-visit-info-pending a { color:#5e3619; text-decoration:underline; text-underline-offset:3px; }
.filters .filter-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.filters .filter-row select { width:100%; min-width:0; }
@media(max-width:700px) {
  .filters .filter-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-categories { gap:6px; }
  .catalog-categories button { padding:8px 10px; font-size:.78rem; }
  .catalog-categories button span { font-size:.68rem; }
  .sites-result-bar { align-items:flex-start; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .catalog-categories button { transition:none; } }
/* Grade guides keep Korean phrases intact while allowing long venue names to wrap. */
.grade-guide-page { --guide-brand:#8e3b13; --guide-muted:#785e4c; word-break:keep-all; overflow-wrap:anywhere; }
.grade-guide-page p { line-height:1.85; }
.grade-guide-page .btn { min-height:44px; }
.grade-guide-hero { display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:center; background:linear-gradient(120deg,#fcece0,#f9f4e9); border:1px solid #efd8c8; border-radius:22px; padding:36px 40px 40px; position:relative; overflow:hidden; }
.grade-guide-hero .eyebrow { color:#6c5443; font-size:10px; }
.grade-guide-hero h1 { font-size:17px; margin:14px 0 22px; color:#8e3b13; letter-spacing:-.4px; }
.grade-guide-hero .grade-guide-lead { color:#433022; font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.27; letter-spacing:-1.6px; margin:0 0 20px; }
.grade-guide-lead em { font-style:normal; color:#b84d14; }
.grade-guide-hero p { color:#6a5343; font-size:14px; }
.grade-guide-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.grade-guide-badges span { color:#574436; background:#ffffffa8; border:1px solid #ecd2bf; border-radius:30px; padding:7px 11px; font-size:11px; }
.guide-paper-scene { position:relative; width:245px; height:275px; margin:auto; perspective:1000px; }
.guide-paper-back { position:absolute; inset:12px 4px -6px; background:#c77840; border:1px solid #8d694f; border-radius:9px; transform:rotate(9deg); box-shadow:0 24px 32px #45332624; }
.guide-paper { position:absolute; inset:0; background:linear-gradient(120deg,#fffef8,#f6efd9); border:1px solid #d8d1b9; border-radius:8px; padding:24px; transform:rotate(-6deg) rotateY(-9deg); box-shadow:8px 16px 26px #46372c25,inset 1px 1px 0 #fff; color:#584130; display:flex; flex-direction:column; align-items:flex-start; }
.guide-paper-label { font-size:10px; border-bottom:1px solid #e7c5ac; padding-bottom:12px; margin-bottom:14px; width:100%; letter-spacing:1px; }
.guide-paper-route { display:flex; align-items:center; gap:7px; width:100%; margin:14px 0 16px; font-size:9px; white-space:nowrap; }
.guide-paper-route i { flex:1; border-top:1px dashed #cb814d; }
.guide-paper strong { font-size:22px; line-height:1.4; letter-spacing:-.5px; }
.guide-paper-seal { font-size:9px; border:1px solid #ce8856; border-radius:4px; padding:5px 8px; position:absolute; bottom:24px; right:16px; transform:rotate(12deg); display:flex; gap:4px; align-items:center; background:#f4f1dd; }
.guide-section-heading { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:16px; }
.guide-section-heading h2 { font-size:24px; margin:8px 0 0; letter-spacing:-.8px; line-height:1.4; color:#433022; }
.guide-step-label { color:#7d583d; font-size:11px; font-weight:700; letter-spacing:.4px; }
.guide-picker,.guide-topic-section,.guide-recommendations { margin-top:40px; }
.guide-subtle { font-size:12px; color:var(--guide-muted); line-height:1.8; }
.grade-guide-page .curriculum-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:18px 0; }
.grade-guide-page .curriculum-tabs button { min-width:0; min-height:60px; font-size:13px; color:#685242; border-color:#edd2bf; gap:5px; }
.grade-guide-page .curriculum-tabs button span { font-size:24px; font-weight:750; }
.grade-guide-page .curriculum-tabs button.selected { color:#fff; background:#bb4d12; border-color:#bb4d12; box-shadow:0 4px 10px #53341e20; }
.grade-guide-page .curriculum-detail { gap:30px; padding:28px; grid-template-columns:1.45fr 1fr; }
.grade-guide-page .curriculum-detail h2 { margin:12px 0; font-size:24px; }
.grade-guide-page .curriculum-detail p { color:#715948; }
.grade-guide-page .subject-tags { flex-wrap:wrap; }
.grade-guide-page .learning-receipt { padding:22px; background:#fdede2; }
.grade-guide-page .learning-receipt h3 { font-size:16px; line-height:1.5; }
.grade-guide-page .learning-receipt dt { color:#755c4b; font-size:11px; }
.grade-guide-page .learning-receipt dd { color:#533d2e; font-size:13px; line-height:1.7; }
.learning-receipt dd small { display:block; color:#785e4c; margin-top:4px; font-size:11px; }
.guide-topic-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.guide-topic-options button { min-width:0; background:#fff; border:1px solid #edd4c2; border-radius:12px; color:#695343; padding:18px; display:flex; gap:12px; align-items:center; text-align:left; cursor:pointer; }
.guide-topic-options button[aria-pressed=true] { background:#fbe4d4; border-color:#8e6243; box-shadow:inset 0 0 0 1px #8e6243; color:#513a2a; }
.guide-topic-options button>svg { flex-shrink:0; }
.guide-topic-options button>svg:last-child { margin-left:auto; }
.guide-topic-options small { display:block; color:#725a49; font-size:11px; margin-bottom:6px; }
.guide-topic-options strong { font-size:15px; line-height:1.5; }
.guide-topic-detail { border:1px solid #eed6c5; border-radius:18px; overflow:hidden; background:#fff; margin-top:22px; }
.guide-topic-intro { padding:28px 28px 24px; }
.guide-topic-intro h2 { font-size:27px; color:#52341e; margin:14px 0 10px; letter-spacing:-.9px; }
.guide-topic-intro p { font-size:15px; color:#5d4a3c; margin:0 0 12px; }
.guide-connection { font-size:12px; color:#775e4c; line-height:1.7; display:block; }
.guide-journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 18px; }
.guide-journey article { min-width:0; background:#fdf0e6; padding:22px 18px; border-radius:12px; position:relative; color:#6d5645; }
.guide-step-number { position:absolute; right:18px; top:18px; font-size:28px; color:#eacbb5; font-weight:700; }
.guide-journey h3 { color:#523723; font-size:17px; margin:15px 0 8px; line-height:1.5; }
.guide-tool { font-size:10px; font-weight:600; color:#795f4d; }
.guide-journey p,.guide-journey li { font-size:13px; line-height:1.85; color:#6b5545; }
.guide-journey ul { padding-left:18px; margin:14px 0 0; }
.guide-journey li+li { margin-top:12px; }
.guide-journey article.guide-field { background:#8f3e19; color:#fbe4d4; }
.guide-field h3,.guide-field li { color:#fff; }.guide-field .guide-tool { color:#ecd1be; }.guide-field .guide-step-number { color:#c7773d; }
.guide-journey .guide-passport-tip { font-size:11px; color:#7a604e; border-top:1px solid #edd4c2; margin-top:16px; padding-top:12px; }
.guide-takeaway { display:flex; gap:15px; align-items:center; padding:24px 28px 12px; color:#684e3b; }.guide-takeaway>svg { flex-shrink:0; }
.guide-takeaway span { display:block; color:#785f4d; font-size:11px; margin-bottom:5px; }.guide-takeaway strong { font-size:17px; line-height:1.6; }
.guide-parent-tip { font-size:12px; color:#765d4b; padding:0 28px 24px; margin:8px 0 0; }.guide-parent-tip strong { color:#5a4739; margin-right:7px; }
.guide-region-label { display:flex; flex-direction:column; gap:8px; font-size:11px; color:#685243; min-width:200px; }
.guide-region-label select { background:#fff; color:#513623; border:1px solid #e2b99c; border-radius:8px; min-height:46px; padding:9px 12px; max-width:100%; font-size:13px; }
.guide-route-status { font-size:12px; color:#62432d; margin:18px 0 12px; }
.guide-route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.guide-route-card { background:#fff; border:1px solid #edd2bf; border-radius:14px; padding:22px; display:flex; flex-direction:column; min-width:0; box-shadow:0 5px 16px #42312505; }
.guide-route-top { display:flex; align-items:center; gap:10px; color:#7d5940; font-size:11px; }.guide-route-top>svg { margin-left:auto; }.guide-route-number { font-size:24px; font-weight:700; color:#c97d47; }
.guide-route-card h3 { font-size:19px; line-height:1.5; margin:15px 0 12px; color:#513623; letter-spacing:-.6px; }
.guide-route-meta { display:flex; flex-wrap:wrap; gap:10px; color:#785e4c; font-size:11px; }.guide-route-meta span { display:flex; gap:4px; align-items:center; }
.guide-route-card ol { padding-left:20px; margin:22px 0 10px; color:#825e45; }.guide-route-card li { padding-left:2px; }.guide-route-card li+li { margin-top:5px; }
.guide-place-link { background:none; border:0; color:#553721; padding:5px 0 10px; font-weight:650; font-size:14px; text-align:left; line-height:1.6; cursor:pointer; min-height:44px; }
.guide-place-link span { font-size:10px; color:#7e6451; display:block; margin-top:5px; font-weight:400; }.guide-place-link:hover { text-decoration:underline; }
.guide-route-reason { font-size:12px; color:#755c4a; border-top:1px solid #f1ddce; padding-top:15px; margin:auto 0 20px; }.guide-route-reason strong { display:block; color:#674c39; font-size:11px; margin-bottom:5px; }
.guide-open-course { width:100%; min-height:46px; font-size:12px; gap:6px; white-space:normal; }
.guide-route-note { margin-top:18px; }
.guide-empty { background:#fcece0; border:1px dashed #e2b799; text-align:center; border-radius:14px; padding:32px 24px; color:#654f3f; }.guide-empty h3 { font-size:19px; }.guide-empty p { font-size:13px; }.guide-empty .btn { margin:6px; white-space:normal; }
.guide-book { display:flex; align-items:center; gap:22px; padding:28px; background:#efeedf; border:1px solid #ebcfbb; border-radius:15px; margin-top:30px; color:#715541; }.guide-book>svg { flex-shrink:0; }.guide-book>div { flex:1; }.guide-book h2 { font-size:22px; margin:8px 0; color:#5d4635; }.guide-book p { font-size:12px; margin:7px 0; }.guide-book a { font-size:12px; color:#67452c; text-underline-offset:4px; }.guide-book .btn { max-width:205px; white-space:normal; line-height:1.6; font-size:12px; }
.grade-guide-page .source-note { color:#765d4b; }.grade-guide-page .policy-grid p { color:#6d5645; }
.course-learning-guide { background:#fcece0; color:#58402f; padding:26px; margin:22px 0; border:1px solid #ebceba; border-radius:14px; word-break:keep-all; overflow-wrap:anywhere; }.course-learning-guide h3 { font-size:23px; margin:10px 0; }.course-learning-guide>p { font-size:14px; line-height:1.8; }.course-learning-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:22px 0; }.course-learning-grid h4 { font-size:14px; margin:0 0 10px; }.course-learning-grid p,.course-learning-grid li { font-size:12px; line-height:1.9; }.course-learning-grid ul { margin:0; padding-left:18px; }.course-learning-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }.course-learning-actions .btn { white-space:normal; font-size:12px; }
@media (max-width:1000px) {
  .grade-guide-hero { padding:30px; }.guide-paper-scene { transform:scale(.84); width:220px; }.guide-route-card { padding:18px; }.guide-route-grid { gap:12px; }.guide-route-card h3 { font-size:17px; }.guide-journey h3 { font-size:15px; }.guide-journey article { padding:20px 14px; }
}
@media (max-width:760px) {
  .grade-guide-hero { grid-template-columns:1fr; padding:28px 24px; gap:0; }.grade-guide-hero h1 { font-size:16px; }.grade-guide-hero .grade-guide-lead { font-size:35px; }.guide-paper-scene { display:none; }.grade-guide-hero p { font-size:13px; }.grade-guide-badges { gap:6px; }.grade-guide-badges span { font-size:10px; }
  .guide-picker,.guide-topic-section,.guide-recommendations { margin-top:30px; }.guide-section-heading { flex-wrap:wrap; gap:10px; }.guide-section-heading h2 { font-size:22px; }.guide-section-heading>.guide-subtle { font-size:10px; }
  .grade-guide-page .curriculum-detail { grid-template-columns:1fr; padding:22px; gap:18px; }.grade-guide-page .curriculum-detail h2 { font-size:22px; }.grade-guide-page .learning-receipt { padding:20px; }.grade-guide-page .learning-receipt dl { margin-bottom:0; }
  .guide-topic-options { gap:10px; }.guide-topic-options button { padding:14px; gap:10px; }.guide-topic-options button>svg:first-child { display:none; }.guide-topic-options strong { font-size:13px; }.guide-topic-options small { font-size:10px; }
  .guide-journey { grid-template-columns:1fr; padding:0 16px; }.guide-journey article { padding:20px; }.guide-journey h3 { font-size:17px; }.guide-journey p { margin-bottom:0; }.guide-tool { font-size:11px; }
  .guide-topic-intro { padding:24px 22px; }.guide-topic-intro h2 { font-size:23px; }.guide-topic-intro p { font-size:14px; }.guide-takeaway { padding:22px 22px 10px; }.guide-takeaway strong { font-size:16px; }.guide-parent-tip { padding:0 22px 24px; }
  .guide-region-label { width:100%; margin-top:10px; }.guide-region-label select { font-size:16px; }.guide-route-grid { grid-template-columns:1fr; }.guide-route-card { padding:22px; }.guide-route-card h3 { font-size:21px; }.guide-route-card ol { margin-top:16px; }.guide-route-reason { margin-top:8px; }.guide-open-course { font-size:13px; }.guide-place-link { font-size:15px; }
  .guide-book { flex-wrap:wrap; padding:24px; gap:14px; }.guide-book>svg { display:none; }.guide-book>div { flex-basis:100%; }.guide-book .btn { max-width:none; width:100%; }
  .course-learning-guide { padding:22px; }.course-learning-grid { grid-template-columns:1fr; gap:12px; }.course-learning-guide h3 { font-size:21px; }
}
@media (max-width:480px) {
  .grade-guide-page .curriculum-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.grade-guide-page .curriculum-tabs button { min-height:52px; }.grade-guide-page .curriculum-tabs button span { font-size:22px; }
  .guide-topic-options { grid-template-columns:1fr; }.guide-topic-options button { min-height:76px; padding:14px 17px; }.guide-topic-options button>svg:first-child { display:block; }.guide-topic-options strong { font-size:14px; }.guide-topic-options small { font-size:11px; }
}
@media print {
  .course-learning-guide { break-inside:avoid; border:1px solid #aaa; background:white; color:#222; }.course-learning-guide .no-print { display:none!important; }.course-learning-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.guide-young-notice { color:#5e493a; font-size:13px; line-height:1.8; padding:16px; background:#fcece0; border-radius:10px; margin-top:16px; }.guide-young-notice .btn { font-size:12px; }
.guide-mode-switch{display:flex;gap:8px;max-width:1384px;margin:4px auto 24px;padding:6px;background:#fce7d8;border:1px solid #edd4c3;border-radius:18px;width:fit-content}
.guide-mode-switch button,.assistant-mode button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:0;border-radius:12px;background:transparent;color:#544134;font:inherit;font-weight:700;min-height:46px;word-break:keep-all}
.guide-mode-switch button[aria-pressed=true],.assistant-mode button[aria-pressed=true]{background:#fff;color:#55341d;box-shadow:0 3px 9px #412e2010}
.interest-entry,.course-club-cta{display:flex;align-items:center;gap:22px;background:#fce9db;border:1px solid #e9cbb5;border-radius:22px;padding:26px 30px;margin:24px 0 34px;color:#523723}
.interest-entry>div,.course-club-cta>div{flex:1}.interest-entry h2{font-size:22px;margin:0 0 8px}.interest-entry p,.course-club-cta p{margin:4px 0 0;line-height:1.65}.interest-entry>svg,.course-club-cta>svg{flex-shrink:0}
.interest-page{max-width:1384px;margin:auto;word-break:keep-all;overflow-wrap:anywhere}.interest-page h2:focus{outline:none}.interest-page p{line-height:1.8}.interest-page .eyebrow{color:#7a5134}
.interest-hero{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;padding:54px 64px;background:radial-gradient(ellipse at 82% 32%,#f1e5bd 0,transparent 45%),linear-gradient(130deg,#fce9dc,#f7f3e8);border:1px solid #f0daca;border-radius:32px;overflow:hidden;color:#412e21;min-height:390px}
.interest-hero h1{font-size:19px;margin:16px 0}.interest-hero .interest-lead{font-size:clamp(30px,3.5vw,48px);font-weight:800;line-height:1.35;letter-spacing:-1.6px;margin:18px 0}.interest-lead em{font-style:normal;color:#b84d14}.interest-hero>div>p:last-of-type{color:#624d3e;font-size:16px}
.interest-orbit{position:relative;min-height:300px;max-width:370px;width:100%;justify-self:center;perspective:700px}.interest-orbit:before{content:'';position:absolute;inset:26px 0;border:1px solid #ddae8c;border-radius:50%;transform:rotate(-27deg) rotateX(35deg)}.interest-orbit-core{position:absolute;inset:48px 58px 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;color:#fff7ed;background:radial-gradient(circle at 28% 20%,#ffb16d,#dd671f 55%,#a63c10);box-shadow:inset -10px -15px 30px #3d200c60,8px 30px 30px #4b311e25;transform:rotate(-9deg)}.interest-orbit-core strong{text-align:center;font-size:20px;line-height:1.55}.interest-orb{position:absolute;z-index:1;display:grid;place-items:center;width:86px;height:86px;border-radius:24px;background:linear-gradient(135deg,#fff,#ebceba);box-shadow:inset -5px -5px 10px #e0b393,8px 16px 24px #5a3f2b25;color:#654e3e}.orb-leaf{top:5px;left:24px;transform:rotate(-14deg)}.orb-book{bottom:-4px;right:6px;transform:rotate(14deg);background:linear-gradient(135deg,#ffecc9,#c49e67);color:#634721}.orb-build{right:8px;top:26px;width:67px;height:67px;transform:rotate(19deg)}
.interest-intro{margin:28px 0;padding:24px 30px;border-left:4px solid #cf8a59;background:#fdf0e7;border-radius:0 16px 16px 0}.interest-intro strong{font-size:19px}.interest-intro p{margin:10px 0 0}.interest-filters{display:flex;gap:18px;margin:24px 0}.interest-filters label{display:grid;gap:9px;font-weight:700;min-width:180px}.interest-filters select{min-height:48px;border:1px solid #e9cbb5;border-radius:12px;padding:10px 14px;background:#fff;font:inherit;color:#4b3424}
.interest-quiz{max-width:820px;margin:24px auto 54px;background:#fff;padding:36px 42px 30px;border:1px solid #efd8c7;border-radius:26px;box-shadow:0 18px 44px #4b3a2d0a}.interest-progress{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#7a5235;font-weight:700}.interest-quiz progress{appearance:none;height:6px;width:100%;border:0;border-radius:10px;margin:14px 0 28px;overflow:hidden;background:#fbe2d1}.interest-quiz progress::-webkit-progress-bar{background:#fbe2d1}.interest-quiz progress::-webkit-progress-value{background:#8d6040;border-radius:10px}.interest-quiz h2{font-size:27px;line-height:1.5;margin:0 0 12px;letter-spacing:-.6px}.interest-quiz>p{color:#785e4c;margin:0 0 24px}.interest-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.interest-choices button{display:flex;text-align:left;align-items:center;gap:13px;min-height:94px;border:1px solid #edd4c2;border-radius:16px;padding:18px;color:#503a2b;background:#fffcf9;font:inherit;word-break:keep-all}.interest-choices button[aria-pressed=true]{background:#fce7d8;border:2px solid #8b5e3e;padding:17px}.interest-choices strong{display:block;font-size:16px}.interest-choices small{display:block;color:#7c624f;margin-top:6px;font-size:13px;line-height:1.5}.choice-indicator{display:grid;place-items:center;border:1px solid #e0b393;border-radius:50%;width:24px;height:24px;flex-shrink:0}.interest-choices button[aria-pressed=true] .choice-indicator{background:#b64910;border-color:#b64910;color:white}.interest-quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.interest-results{padding:32px 0}.interest-results>h2,.interest-recommendations h2,.interest-parent-guide h2{font-size:28px;letter-spacing:-.8px;line-height:1.5}.interest-area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px;margin:24px 0}.interest-area-grid article{background:#fdece0;border:1px solid #ecd0bc;border-radius:20px;padding:24px}.interest-area-grid h3{font-size:20px;margin:14px 0 10px}.interest-area-grid p{font-size:14px}.interest-observe strong{display:block;margin-bottom:6px}.interest-observe{background:#fdf1e8;border-radius:12px;padding:14px;font-size:14px;color:#5f4b3d;line-height:1.75}.interest-area-grid .interest-observe{background:#ffffff80}.interest-route>h3{line-height:1.55}.interest-route>ol{line-height:1.8}.interest-route>p{font-size:14px}.interest-route>.btn{width:100%;white-space:normal}.interest-route .interest-open-course{margin-top:auto}.interest-open-club,.guide-course-club{margin-top:10px;white-space:normal}.interest-parent-guide{margin:52px 0 28px}.interest-parent-guide .guide-journey{border:1px solid #efd9c9;border-radius:22px;overflow:hidden}.interest-prompts{padding:22px 24px;border:1px solid #efd9c9;border-radius:18px;margin-top:20px;background:#fff}.interest-prompts summary{font-weight:700;cursor:pointer;line-height:1.6}.interest-prompts dl{display:grid;grid-template-columns:1fr 1fr;gap:18px}.interest-prompts dt{font-weight:700;font-size:14px;color:#7a5235}.interest-prompts dd{margin:7px 0 0;line-height:1.7}
.club-course-context,.club-custom-book{border:1px solid #ebd0bc;border-radius:20px;padding:24px 28px;margin:24px 0;background:#fdeee3;word-break:keep-all;overflow-wrap:anywhere}.club-course-context h2{font-size:23px;line-height:1.5}.club-course-context p,.club-custom-book p{line-height:1.8}.club-custom-book label{display:grid;gap:10px;font-weight:700}.club-custom-book input{width:100%;max-width:600px;font:inherit;min-height:48px;border:1px solid #e3bca0;border-radius:10px;padding:10px 12px;background:white}.club-controls{flex-wrap:wrap}.club-controls label{min-width:0}.club-controls select{max-width:100%;text-overflow:ellipsis}.course-club-cta{padding:22px;word-break:keep-all;overflow-wrap:anywhere}
.assistant-launcher{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));right:24px;z-index:50;display:flex;align-items:center;gap:9px;min-height:48px;border-radius:30px;border:1px solid #695140;padding:12px 19px;color:#fff;background:#bb4d12;box-shadow:0 6px 24px #38221333;font:inherit;font-weight:700;font-size:14px}.assistant-overlay{justify-content:flex-end;align-items:flex-end;padding:20px;background:#3222163d}.sopung-assistant.modal.card{display:flex;flex-direction:column;gap:0;width:460px;max-width:100%;max-height:calc(100dvh - 40px);height:790px;border-radius:24px;padding:22px;background:#fef9f6;color:#4b3424;overflow:hidden;box-shadow:0 20px 80px #122c3040;word-break:keep-all;overflow-wrap:anywhere}.assistant-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.assistant-header h2{font-size:25px;margin:5px 0}.assistant-header .eyebrow{font-size:10px;color:#895f41;letter-spacing:1px}.assistant-header .icon-btn{display:grid;place-items:center;min-width:44px;min-height:44px;background:#fceade;border-radius:50%;border:0;color:#5f4430}.assistant-description{font-size:13px;line-height:1.65;margin:10px 0 14px;flex-shrink:0}.assistant-mode{display:flex;padding:4px;border-radius:12px;background:#fce5d5;flex-shrink:0}.assistant-mode button{flex:1;min-height:40px;padding:8px;font-size:14px}.assistant-notice{font-size:12px;line-height:1.7;color:#6d5645;background:#fcebdf;border-radius:12px;padding:10px 12px;margin:10px 0;flex-shrink:0}.assistant-notice{max-height:190px;overflow-y:auto;flex-shrink:1;min-height:36px}.assistant-notice p{margin:0 0 6px}.assistant-notice p:last-child{margin:0}.assistant-notice .btn{font-size:13px;min-height:40px;padding:8px 12px;margin:6px 0}.assistant-consent{display:flex;align-items:flex-start;gap:8px;font-weight:700;line-height:1.6;margin:8px 0}.assistant-consent input{margin:3px 0;width:16px;height:16px;flex-shrink:0;accent-color:#6e4e38}.assistant-notice small{display:block;margin:5px 0}.assistant-messages{flex:1;min-height:60px;overflow-y:auto;overscroll-behavior:contain;padding:6px 3px 12px;scrollbar-width:thin}.assistant-welcome{display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;padding:22px 6px;color:#7a5134}.assistant-welcome p{font-size:13px;margin:0}.assistant-message{margin:10px 0;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #efd8c8;max-width:97%}.assistant-message.user{margin-left:auto;background:#fbe4d3;border-color:#edd2bf}.assistant-message>span{font-size:11px;color:#775d4a;font-weight:700}.assistant-message p{white-space:pre-wrap;font-size:14px;line-height:1.85;margin:8px 0 2px}.assistant-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.assistant-actions button{display:flex;align-items:center;gap:6px;border-radius:9px;border:1px solid #e2ba9d;color:#5b412f;background:#fdf0e6;font:inherit;font-size:12px;min-height:36px;padding:7px 10px;white-space:normal;word-break:keep-all}.assistant-suggestions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 12px;flex-shrink:0}.assistant-suggestions button{font:inherit;text-align:left;font-size:12px;line-height:1.55;padding:10px;border:1px solid #ecd2bf;background:#fff;border-radius:10px;color:#604837;min-height:44px;word-break:keep-all}.assistant-form{border-top:1px solid #efd9ca;padding-top:12px;flex-shrink:0}.assistant-form>label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:7px}.assistant-form small{font-weight:400;color:#826753}.assistant-form>div{display:flex;gap:8px;align-items:stretch}.assistant-form textarea{resize:none;flex:1;min-width:0;min-height:66px;max-height:120px;border-radius:12px;border:1px solid #e2b89a;padding:10px;font:inherit;font-size:13px;line-height:1.65;color:#4b3424;background:#fff}.assistant-form .btn{font-size:13px;padding:10px 13px;min-width:52px}.assistant-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;flex-shrink:0;color:#806552}.assistant-footer small{font-size:11px}.assistant-footer button{font-size:12px;padding:5px}.sopung-assistant .inline-error{font-size:12px;max-height:80px;overflow:auto;margin:8px 0;flex-shrink:0}.assistant-launcher:focus-visible,.interest-page button:focus-visible,.guide-mode-switch button:focus-visible,.sopung-assistant button:focus-visible{outline:3px solid #bd7a39;outline-offset:3px}
@media(max-width:1000px){.interest-hero{padding:36px}.interest-entry,.course-club-cta{flex-wrap:wrap}.interest-entry>.btn,.course-club-cta>.btn{margin-left:auto}.interest-orbit{max-width:300px;min-height:270px}.interest-orbit-core{inset:45px 38px 25px}.interest-orb{width:70px;height:70px}}
@media(max-width:760px){.guide-mode-switch{width:100%;gap:3px;margin-bottom:18px;border-radius:14px}.guide-mode-switch button{flex:1;gap:5px;padding:10px 8px;font-size:13px}.guide-mode-switch svg{display:none}.interest-entry{padding:22px;gap:14px;border-radius:18px}.interest-entry>svg{display:none}.interest-entry h2{font-size:19px}.interest-entry>.btn{width:100%;margin:0}.interest-hero{grid-template-columns:1fr;padding:30px 24px;min-height:0;border-radius:24px}.interest-hero .interest-lead{font-size:32px}.interest-orbit{min-height:210px;max-width:260px;margin-top:12px}.interest-orbit-core{inset:26px 45px 0}.interest-orbit-core>svg{width:43px;height:43px}.interest-orbit-core strong{font-size:17px}.interest-orbit-core{gap:10px}.orb-build{width:56px;height:56px;right:10px}.orb-leaf{top:0;left:14px}.orb-book{bottom:-7px}.interest-intro{padding:18px 20px}.interest-intro strong{font-size:17px}.interest-intro p{font-size:14px}.interest-filters{gap:12px}.interest-filters label{flex:1;min-width:0;font-size:14px}.interest-filters select{width:100%;min-width:0}.interest-quiz{padding:24px 20px;border-radius:20px}.interest-quiz h2{font-size:23px}.interest-choices{grid-template-columns:1fr;gap:9px}.interest-choices button{min-height:76px;padding:14px}.interest-choices button[aria-pressed=true]{padding:13px}.interest-quiz-nav .btn{font-size:13px;padding:11px 12px;white-space:normal}.interest-results>h2,.interest-recommendations h2,.interest-parent-guide h2{font-size:24px}.interest-area-grid{grid-template-columns:1fr}.interest-prompts dl{grid-template-columns:1fr}.interest-parent-guide .guide-section-heading{align-items:flex-start;gap:16px}.club-course-context,.club-custom-book{padding:20px}.club-course-context h2{font-size:20px}.course-club-cta>svg{display:none}.course-club-cta>.btn{width:100%}.assistant-launcher{right:14px;bottom:max(16px,env(safe-area-inset-bottom));padding:10px 14px;font-size:12px;min-height:44px}.assistant-overlay{padding:8px}.sopung-assistant.modal.card{max-height:calc(100dvh - 16px);height:850px;padding:16px;border-radius:19px}.assistant-description{font-size:12px;margin:5px 0 10px}.assistant-notice{font-size:11px;padding:8px 10px}.assistant-form textarea{font-size:16px}.assistant-message{padding:12px}.assistant-suggestions{gap:5px}.assistant-suggestions button{font-size:11px}.assistant-header h2{font-size:23px}.assistant-footer small{font-size:10px}}
@media(max-height:650px){.assistant-description,.assistant-welcome,.assistant-suggestions{display:none}.assistant-notice{max-height:130px;overflow-y:auto}.sopung-assistant.modal.card{height:calc(100dvh - 16px);overflow-y:auto}}
@media print{.assistant-launcher,.assistant-overlay,.guide-mode-switch{display:none!important}.club-course-context{break-inside:avoid}.interest-hero{background:#fff}.interest-orbit{display:none}}