/* ─────────────────────────────────────────────────────────────
   동화풍 접속화면 + 인트로 (storybook-intro.js와 함께 사용)
   기존 화면 스타일보다 우선하도록 #gate.sb-gate 범위로 덮어씁니다.
   ───────────────────────────────────────────────────────────── */

/* ── 접속화면: 한 장의 그림책 페이지 ── */
body.sb-theme #gate.sb-gate {
  --scene-h: clamp(120px, 22vh, 220px);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0; gap: 0;
  padding: 48px 16px calc(var(--scene-h) + 24px); overflow: hidden;
}
body.sb-theme #gate.sb-gate.hidden { display: none; }
/* 인트로의 로고 복제본(#sbIntro .sb-lockup)도 접속화면 로고와 똑같이 그려야 위치·크기가 맞습니다. */
body.sb-theme #gate.sb-gate .sb-brand, #sbIntro .sb-lockup { position: relative; display: flex; flex-direction: column; align-items: center; width: min(440px, 78vw); margin: 0; gap: 0; text-align: center; }
body.sb-theme #gate.sb-gate .sb-logo, #sbIntro .sb-lockup .sb-logo { display: block; width: clamp(72px, 12vh, 108px); height: auto; margin: 0 0 6px; rotate: -6deg; filter: drop-shadow(0 4px 5px rgba(90, 70, 40, .18)); }
body.sb-theme #gate.sb-gate .sb-school, #sbIntro .sb-lockup .sb-school { width: 50%; margin: 0 0 2%; font-size: 0; }
body.sb-theme #gate.sb-gate .sb-title, #sbIntro .sb-lockup .sb-title { position: relative; width: 100%; margin: 0; font-size: 0; }
body.sb-theme #gate.sb-gate .sb-uline-wrap { position: absolute; left: 0; top: 100%; width: 100%; aspect-ratio: 440 / 40; margin-top: -2px; pointer-events: none; }
body.sb-theme #gate.sb-gate .sb-uline { display: block; width: 100%; height: 100%; overflow: visible; }
body.sb-theme #gate.sb-gate .sb-uline path { fill: none; stroke: #e0533d; stroke-width: 3; stroke-linecap: round; }
body.sb-theme #gate.sb-gate .sb-needle { position: absolute; left: 106.8%; top: -25%; width: 18px; height: 47px; margin: -46px 0 0 -9px; transform-origin: 50% 100%; }
body.sb-theme #gate.sb-gate .sb-needle svg { display: block; width: 100%; height: 100%; overflow: visible; }
body.sb-theme #gate.sb-gate .sb-needle.idle { animation: sbNeedleRock 3.2s ease-in-out infinite; }
@keyframes sbNeedleRock { 0%, 100% { rotate: 0deg; } 50% { rotate: 10deg; } }

/* 종이 카드 + 연필 테두리 + 마스킹테이프 */
body.sb-theme #gate.sb-gate .gate-card {
  position: relative; width: 100%; max-width: 540px; margin: 46px 0 0; padding: 28px 30px;
  background: #fffdf8; border: 0; border-radius: 4px; rotate: -.6deg; animation: none;
  box-shadow: 0 14px 34px rgba(90, 70, 40, .10), 0 2px 0 rgba(90, 70, 40, .04);
}
body.sb-theme #gate.sb-gate .sb-card-sketch { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; overflow: visible; }
body.sb-theme #gate.sb-gate .sb-tape { position: absolute; top: -14px; width: 96px; height: 26px; pointer-events: none; clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%); }
body.sb-theme #gate.sb-gate .sb-tape-1 { left: 24px; background: rgba(242, 184, 75, .6); rotate: -7deg; }
body.sb-theme #gate.sb-gate .sb-tape-2 { right: 24px; background: rgba(79, 179, 169, .48); rotate: 6deg; }
body.sb-theme #gate.sb-gate .sb-lead { margin: 0 0 14px; font-weight: 800; font-size: calc(19px * var(--reading-scale, 1)); letter-spacing: -.03em; color: #3a3f62; }

/* 학생·교사 버튼: 손그림 테두리 */
body.sb-theme #gate.sb-gate .mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
body.sb-theme #gate.sb-gate .mode-btn {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-height: 68px; padding: 12px;
  text-align: left; font: inherit; color: #252943 !important; background: #fff !important;
  border: 2px solid #3a3f62 !important; border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; box-shadow: none;
  cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
body.sb-theme #gate.sb-gate .mode-btn .sb-ico { grid-row: 1 / 3; width: 30px; height: 30px; fill: none; stroke: #3a3f62; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.sb-theme #gate.sb-gate .mode-btn b { font-size: calc(18px * var(--reading-scale, 1)); font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: #2c3150; white-space: nowrap; }
body.sb-theme #gate.sb-gate .mode-btn span { margin: 2px 0 0; font-size: calc(12.5px * var(--reading-scale, 1)); line-height: 1.4; font-weight: 600; color: #6b6f86 !important; -webkit-text-fill-color: currentColor; white-space: nowrap; }
body.sb-theme #gate.sb-gate .mode-btn:hover { transform: translate(-1px, -2px) rotate(-.6deg); box-shadow: 3px 4px 0 #3a3f62 !important; }
body.sb-theme #gate.sb-gate .mode-btn.active { background: repeating-linear-gradient(-45deg, rgba(242, 184, 75, .32) 0 3px, transparent 3px 8px), #fff !important; border-color: #e0533d !important; box-shadow: 3px 4px 0 #e0533d !important; }

/* 인증 칸: 공책 밑줄 */
body.sb-theme #gate.sb-gate .auth-box { margin: 22px 0 0; padding: 0; border: 0; }
body.sb-theme #gate.sb-gate .auth-box h2 { margin: 0 0 10px; font-size: calc(20px * var(--reading-scale, 1)); font-weight: 800; letter-spacing: -.03em; color: #2c3150; }
body.sb-theme #gate.sb-gate .field-grid { display: grid; gap: 14px; }
body.sb-theme #gate.sb-gate .field-grid.two { grid-template-columns: 1fr 1fr; }
body.sb-theme #gate.sb-gate .auth-box label { display: block; margin: 0 0 2px; font-size: calc(14px * var(--reading-scale, 1)); font-weight: 700; color: #3a3f62; }
body.sb-theme #gate.sb-gate .auth-box input { width: 100%; min-height: 44px; padding: 10px 4px; color: #252943; background: transparent; border: 0; border-bottom: 2px solid #3a3f62; border-radius: 0; box-shadow: none; }
body.sb-theme #gate.sb-gate .auth-box input::placeholder { color: #a3a6b8; }
body.sb-theme #gate.sb-gate .auth-box input:focus { outline: none; border-bottom-color: #e0533d; box-shadow: 0 2px 0 #e0533d; }
body.sb-theme #gate.sb-gate .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
body.sb-theme #gate.sb-gate .gate-status { margin-top: 16px; padding: 10px 14px; line-height: 1.55; color: #6b4e16; background: #fff6d6; border: 2px dashed #e0b85c; border-radius: 10px; }
body.sb-theme #gate.sb-gate .gate-status.error { color: #9a2e1e; background: #fff0eb; border-color: #e88b7a; }
body.sb-theme #gate.sb-gate .gate-status:empty { display: none; }
body.sb-theme #gate.sb-gate .env-note:empty { display: none; }
body.sb-theme #gate.sb-gate .gate-help { margin: 22px 0 0; padding: 0; border: 0; font-size: calc(14px * var(--reading-scale, 1)); font-weight: 600; color: #6f6a80; text-align: center; word-break: keep-all; }

/* 아래쪽 풍경 + 작은 캐릭터 */
body.sb-theme #gate.sb-gate .sb-scene { position: absolute; left: 0; right: 0; bottom: 0; height: var(--scene-h); pointer-events: none; }
body.sb-theme #gate.sb-gate .sb-scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.sb-theme #gate.sb-gate .sb-scene-svg text { font-family: Gaegu, cursive; letter-spacing: -.035em; font-weight: 700; }
body.sb-theme #gate.sb-gate .sb-mini-runner { position: absolute; left: 0; top: 0; }
body.sb-theme #gate.sb-gate .sb-mini-runner.idle { animation: sbBob 1.5s ease-in-out infinite; }
@keyframes sbBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
body.sb-theme #gate.sb-gate .sb-replay {
  position: absolute; right: 18px; top: 16px; z-index: 2; min-height: 40px; padding: 4px 14px;
  font-size: 14px; font-weight: 700; color: #3a3f62; background: #fffdf8;
  border: 2px solid #3a3f62; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; cursor: pointer;
}
body.sb-theme #gate.sb-gate .sb-replay:hover { box-shadow: 2px 3px 0 #3a3f62; }
body.sb-theme #gate.sb-gate :is(.mode-btn, .btn, .sb-replay):focus-visible { outline: 3px dashed #7d6bc7; outline-offset: 4px; }
body.sb-theme #gate.sb-gate .gate-card:focus { outline: none; }

/* ── 인트로가 도는 동안 접속화면 감추기 ── */
html.sb-intro-pending body.sb-theme #gate.sb-gate :is(.sb-brand, .gate-card, .gate-help, .sb-scene, .sb-replay) { visibility: hidden; animation: sbRevealFailsafe .001s step-end 4s forwards !important; }
html.sb-intro-pending body.sb-theme .site-footer { visibility: hidden; animation: sbRevealFailsafe .001s step-end 4s forwards !important; }
@keyframes sbRevealFailsafe { to { visibility: visible; } }
body.sb-theme.sb-intro-on { overflow: hidden; }
body.sb-theme.sb-intro-on #gate.sb-gate .sb-brand { visibility: hidden; }
body.sb-theme.sb-intro-on #gate.sb-gate :is(.gate-card, .gate-help, .sb-replay, .sb-scene) { opacity: 0; }
body.sb-theme.sb-intro-on .site-footer { opacity: 0; }

/* ── 인트로 레이어 ── */
#sbIntro { position: fixed; inset: 0; z-index: 10000; overflow: hidden; background: #f7f3e9; }
#sbIntro .sb-stage { position: absolute; inset: 0; }
#sbIntro .sb-paper { position: absolute; inset: 0; background: #f7f3e9; }
#sbIntro .sb-grain, #sbIntro .sb-pageback {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .42  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
#sbIntro .sb-grain { position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: multiply; }
#sbIntro .sb-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 100, 70, .12)); }
#sbIntro svg.sb-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#sbIntro svg.sb-layer text { font-family: Gaegu, "Nanum Pen Script", cursive; font-weight: 700; }
#sbIntro .sb-soil { position: absolute; left: 0; right: 0; top: 76%; bottom: 0; opacity: 0; background: linear-gradient(#ece2c8, #f1ead8 45%, rgba(247, 246, 242, 0)); }
#sbIntro .sb-tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
#sbIntro .sb-tint.dusk { background: linear-gradient(#f3a17e, #f8cfa4 55%, #f6dcc0); }
#sbIntro .sb-tint.night { background: linear-gradient(#1a2050, #2c3473 60%, #3b4380); }
#sbIntro canvas.sb-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#sbIntro :is(.sb-runner, .sb-flyer, .sb-star) { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
#sbIntro .sb-runner canvas { display: block; width: 100%; height: 100%; }
#sbIntro .sb-flyer svg { display: block; width: 100%; height: 100%; overflow: visible; }
#sbIntro .sb-star { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 30%, var(--sc, #ffe7a3) 45%, transparent 72%);
  box-shadow: 0 0 18px 6px var(--sg, rgba(255, 214, 120, .7)), 0 0 48px 14px var(--sg2, rgba(255, 180, 90, .35)); }
#sbIntro .sb-lockup.sb-lockup { position: fixed; left: 0; top: 0; margin: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
#sbIntro .sb-lockup .brand-wordmark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
#sbIntro .sb-lockup .sb-logo { opacity: 0; }
#sbIntro .sb-lockup .sb-uline-wrap { display: none; }
#sbIntro .sb-doodle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#sbIntro .sb-doodle path { fill: none; stroke: #e0533d; stroke-width: 4; stroke-linecap: round; }
#sbIntro .sb-pageback { position: absolute; inset: 0; display: none; z-index: 20; background-color: #f1ede2; }
#sbIntro.flip > :not(.sb-pageback) { visibility: hidden; }
#sbIntro.flip .sb-pageback { display: block; }
#sbIntro .sb-pageshade { position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(60, 45, 20, .35), rgba(60, 45, 20, .05) 40%, rgba(255, 255, 255, .25) 85%, rgba(60, 45, 20, .18)); }
.sb-spine { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(60, 45, 20, .42), rgba(60, 45, 20, .12) 30%, transparent 65%); }
canvas.sb-fx-top { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10001; pointer-events: none; }
#sbIntro .sb-skip {
  position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 5;
  min-height: 42px; padding: 8px 16px; font: inherit; font-size: 13px; color: #70617f;
  background: rgba(255, 255, 255, .6); border: 1px solid #dcd5e4; border-radius: 999px; cursor: pointer; backdrop-filter: blur(4px);
}
#sbIntro .sb-skip:hover { background: #fff; color: #493b68; }
#sbIntro .sb-skip:focus-visible { outline: 3px dashed #7d6bc7; outline-offset: 4px; }

@media (max-width: 560px) {
  body.sb-theme #gate.sb-gate { --scene-h: clamp(110px, 19vh, 170px); padding-top: 64px; }
  body.sb-theme #gate.sb-gate .gate-card { padding: 24px 20px; }
  body.sb-theme #gate.sb-gate :is(.mode-row, .field-grid.two) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #sbIntro, .sb-spine, canvas.sb-fx-top { display: none !important; }
  body.sb-theme #gate.sb-gate :is(.sb-needle.idle, .sb-mini-runner.idle) { animation: none !important; }
}