/* 심야학교 — 불 꺼진 학교 UI. 포차와 같은 타이포·버튼 토큰을 쓰되 화면만 밤색으로 뒤집는다. */
.school-body {
  margin: 0;
  background: #05070b;
  color: #e8e5dd;
  --sg-bg: #05070b;
  --sg-panel: rgba(9, 13, 19, .82);
  --sg-panel-solid: #0c1119;
  --sg-line: rgba(150, 180, 210, .16);
  --sg-line-strong: rgba(170, 200, 230, .3);
  --sg-text: #e8e5dd;
  --sg-dim: #93a0ad;
  --sg-red: #e9564f;
  --sg-warm: #ffd8a8;
  --sg-glow: rgba(190, 220, 255, .18);
  overflow-x: hidden;
}
.school-body ::selection { background: rgba(233, 86, 79, .35); }
[hidden] { display: none !important; }

/* ---------- 입장 화면 ---------- */
.school-landing {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(120% 90% at 50% 8%, #101826 0%, #070a11 52%, #04060a 100%);
}
.school-hall-art { position: absolute; inset: 0; overflow: hidden; opacity: .8; }
.hall-floor {
  position: absolute; left: 50%; bottom: -4%; width: 88%; height: 58%; transform: translateX(-50%) perspective(420px) rotateX(58deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(160, 190, 220, .16) 50%, transparent 50.3%),
    repeating-linear-gradient(90deg, rgba(150, 180, 210, .08) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(150, 180, 210, .06) 0 1px, transparent 1px 44px),
    linear-gradient(#151d29, #070a10);
  box-shadow: inset 0 0 120px 20px #03050a;
}
.hall-wall {
  position: absolute; top: 0; width: 42%; height: 78%;
  background:
    repeating-linear-gradient(0deg, rgba(120, 150, 180, .055) 0 1px, transparent 1px 96px),
    linear-gradient(90deg, #0a0f17, #141d2a);
  filter: brightness(.85);
}
.hall-wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 45%, rgba(0,0,0,.75)); }
.hall-wall.left { left: 0; clip-path: polygon(0 0, 100% 18%, 100% 88%, 0 100%); }
.hall-wall.right { right: 0; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 88%); }
.hall-vanish {
  position: absolute; left: 50%; top: 30%; width: 16%; height: 42%; transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 55%, rgba(50, 70, 95, .5), transparent 70%);
  filter: blur(6px);
}
.hall-door { position: absolute; background: #03060b; border: 1px solid rgba(130, 160, 190, .14); }
.hall-door::after { content: ''; position: absolute; left: 12%; top: 12%; width: 30%; height: 34%; background: rgba(120, 160, 200, .08); }
.hall-door.d1 { left: 8%; top: 38%; width: 11%; height: 26%; transform: skewY(7deg); }
.hall-door.d2 { right: 9%; top: 35%; width: 10%; height: 27%; transform: skewY(-7deg); }
.hall-door.d3 { left: 45%; top: 43%; width: 7%; height: 20%; }
.hall-light {
  position: absolute; left: 50%; width: 22%; height: 4px; transform: translateX(-50%);
  background: #cfe2ff; border-radius: 50%; opacity: .5;
  box-shadow: 0 0 60px 18px rgba(140, 180, 230, .14);
  animation: sg-light-flicker 7s linear infinite;
}
.hall-light.l1 { top: 30%; }
.hall-light.l2 { top: 44%; width: 14%; opacity: .32; animation-delay: -2.6s; }
@keyframes sg-light-flicker { 0%, 91%, 100% { opacity: .5; } 92% { opacity: .12; } 93% { opacity: .45; } 94% { opacity: .05; } 95% { opacity: .4; } }
.hall-figure {
  position: absolute; left: 50%; top: 44%; width: 16px; height: 52px; transform: translateX(-50%);
  background: #010205; border-radius: 50% 50% 20% 20%; opacity: .55;
  filter: blur(1px);
}
.school-fog {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 62%, transparent 0%, rgba(4, 6, 10, .2) 60%, rgba(4, 6, 10, .88) 100%),
    linear-gradient(180deg, rgba(4, 6, 10, .55), transparent 25%, transparent 62%, rgba(4, 6, 10, .92));
}
.school-nav {
  position: relative; z-index: 3; width: 100%; max-width: 1080px;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(20px, env(safe-area-inset-top)) 24px 0;
}
.school-logo { display: inline-flex; align-items: center; gap: 8px; color: #e8e5dd; font-weight: 500; font-size: 17px; }
.school-back { font-size: 13px; color: var(--sg-dim); padding: 8px 0; }
.school-back:hover { color: #e8e5dd; }
.school-hero {
  position: relative; z-index: 2; width: min(680px, 100%); margin: auto; padding: 7vh 24px 40px;
  text-align: center;
}
.school-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); box-shadow: rgba(255, 255, 255, .1) 0 0 0 1px inset;
  font-size: 11.5px; letter-spacing: .08em; color: #c9d2dc;
}
.school-title {
  margin: 18px 0 12px; font-size: clamp(46px, 10vw, 84px); font-weight: 300;
  letter-spacing: -.075em; line-height: .98; color: #f1eee6;
  text-shadow: 0 0 60px rgba(150, 190, 240, .18);
}
.school-lead { margin: 0 auto; max-width: 29em; font-size: 16px; line-height: 1.7; color: #aab4c0; }
.school-warn {
  display: inline-block; margin: 20px auto 0; padding: 9px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; color: #f0c98c;
  background: rgba(240, 180, 90, .08); box-shadow: rgba(240, 180, 90, .22) 0 0 0 1px inset;
}
.school-enter { display: flex; gap: 8px; justify-content: center; align-items: stretch; margin: 26px auto 0; max-width: 420px; }
.school-field { flex: 1; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.school-field span { font-size: 11px; letter-spacing: .08em; color: var(--sg-dim); padding-left: 4px; }
.school-field input {
  width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .07); color: #f1eee6; font-size: 16px;
  box-shadow: rgba(255, 255, 255, .12) 0 0 0 1px inset; outline: none;
}
.school-field input:focus { box-shadow: rgba(190, 220, 255, .5) 0 0 0 1px inset; background: rgba(255, 255, 255, .1); }
.school-field input::placeholder { color: #6f7a86; }
.school-btn {
  height: 52px; margin-top: 16px; padding: 0 22px; border: 0; border-radius: 14px;
  background: #ece7dc; color: #10151c; font-size: 15px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .18s ease, background-color .18s ease;
}
.school-btn:hover { background: #fffdf6; transform: translateY(-1px); }
.school-btn:disabled { opacity: .5; cursor: wait; transform: none; }
.school-live { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12.5px; color: var(--sg-dim); }
.school-rules {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  list-style: none; padding: 0; margin: 26px auto 0; max-width: 520px; text-align: left;
}
.school-rules li { font-size: 12.5px; color: #8d99a6; padding-left: 14px; position: relative; }
.school-rules li::before { content: '·'; position: absolute; left: 2px; color: #566372; }
.school-rules b { color: #cbd4de; font-weight: 500; }
.school-foot {
  position: relative; z-index: 2; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 0 24px max(22px, env(safe-area-inset-bottom)); font-size: 12px; color: #5f6a76;
}
.school-foot a:hover { color: #aab4c0; }
.school-foot span { margin-right: auto; }

/* ---------- 게임 ---------- */
.school-game { position: fixed; inset: 0; overflow: hidden; background: #03050a; touch-action: none; }
#schoolStage { position: absolute; inset: 0; }
#schoolStage canvas { display: block; width: 100%; height: 100%; }
.sg-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sg-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(75% 70% at 50% 48%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  mix-blend-mode: multiply;
}
.sg-flash { position: absolute; inset: 0; background: #dfeaff; opacity: 0; pointer-events: none; transition: opacity .5s ease; mix-blend-mode: screen; }
.sg-crosshair {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(230, 240, 255, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.sg-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 12px 0; gap: 8px; pointer-events: none;
}
.sg-top-left, .sg-top-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; pointer-events: auto; }
.sg-top-right { justify-content: flex-end; }
.sg-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px;
  border: 0; border-radius: 999px; font-size: 12px; color: #d7dee6;
  background: var(--sg-panel); box-shadow: var(--sg-line) 0 0 0 1px inset; backdrop-filter: blur(8px);
}
.sg-brand { color: #f1eee6; font-weight: 500; }
.sg-icon { width: 34px; padding: 0; justify-content: center; font-size: 15px; cursor: pointer; }
.sg-icon[aria-pressed="false"] { color: #6f7a86; }
.sg-players { font-variant-numeric: tabular-nums; }

.sg-target {
  position: absolute; left: 12px; top: calc(max(12px, env(safe-area-inset-top)) + 42px);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 1px 10px;
  min-width: 196px; max-width: min(330px, calc(100vw - 24px)); padding: 11px 13px;
  border-radius: 14px; background: var(--sg-panel); box-shadow: var(--sg-line) 0 0 0 1px inset;
  backdrop-filter: blur(8px); pointer-events: none;
}
.sg-target-cap { grid-column: 1 / -1; font-size: 10px; letter-spacing: .12em; color: #7d8a97; }
.sg-target-icon { grid-row: 2 / 4; align-self: center; font-size: 26px; line-height: 1; }
.sg-target-icon img {
  display: block; width: 38px; height: 38px; object-fit: contain; border-radius: 10px;
  background: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 62%, transparent 74%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.sg-target-name { font-size: 15px; font-weight: 500; color: #f2efe8; line-height: 1.25; }
.sg-target-hint { font-size: 11px; color: #8b97a4; line-height: 1.35; }
.sg-target.is-found { box-shadow: rgba(140, 220, 170, .4) 0 0 0 1px inset; }
.sg-target.is-hint { box-shadow: rgba(226, 203, 138, .45) 0 0 0 1px inset; }
.sg-target.is-hint .sg-target-hint { color: #e9d9a6; animation: sg-hint-in .45s ease; }
@keyframes sg-hint-in { from { opacity: .2; } to { opacity: 1; } }

.sg-prompt {
  position: absolute; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: rgba(8, 12, 18, .86); box-shadow: var(--sg-line-strong) 0 0 0 1px inset;
  font-size: 13px; color: #e9e6de; backdrop-filter: blur(6px); pointer-events: none; white-space: nowrap;
}
.sg-prompt kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  border-radius: 6px; background: rgba(255, 255, 255, .12); font: 600 11px/1 var(--font-sans); color: #f2efe8;
}
.sg-search {
  position: absolute; left: 50%; bottom: calc(156px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(260px, 70vw); text-align: center; pointer-events: none;
}
.sg-search-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sg-search-bar i { display: block; height: 100%; width: 0; background: #dfe8f4; transition: width .08s linear; }
.sg-search span { display: inline-block; margin-top: 7px; font-size: 11.5px; color: #aab4c0; text-shadow: 0 1px 4px #000; }
.sg-toast {
  position: absolute; left: 50%; bottom: calc(196px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: min(420px, 86vw); padding: 10px 15px; border-radius: 12px;
  background: rgba(10, 14, 20, .92); box-shadow: var(--sg-line) 0 0 0 1px inset;
  font-size: 12.5px; line-height: 1.45; color: #e6e3db; text-align: center; backdrop-filter: blur(6px);
  animation: sg-toast-in .22s ease; pointer-events: none;
}
@keyframes sg-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 조작 */
.sg-joystick {
  position: absolute; left: 18px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 112px; height: 112px; border-radius: 50%; touch-action: none;
  background: rgba(255, 255, 255, .05); box-shadow: rgba(255, 255, 255, .14) 0 0 0 1px inset;
  display: none;
}
.sg-knob {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(230, 238, 248, .22); box-shadow: rgba(255, 255, 255, .3) 0 0 0 1px inset;
  transition: transform .06s linear;
}
.sg-action {
  position: absolute; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom));
  width: 84px; height: 84px; border-radius: 50%; border: 0;
  background: rgba(232, 239, 248, .92); color: #0c1119; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); display: none; touch-action: manipulation;
}
.sg-action:active { transform: scale(.96); }
.sg-action.is-hot { background: #fff5df; box-shadow: 0 0 0 3px rgba(255, 220, 160, .35), 0 10px 30px rgba(0, 0, 0, .45); }

/* 채팅 */
.sg-chat { position: absolute; right: 12px; bottom: calc(120px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sg-chat-toggle {
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; font-size: 12px;
  background: var(--sg-panel); color: #d7dee6; box-shadow: var(--sg-line) 0 0 0 1px inset; backdrop-filter: blur(8px);
}
.sg-chat-panel { width: min(320px, calc(100vw - 24px)); border-radius: 14px; overflow: hidden; background: rgba(8, 12, 18, .9); box-shadow: var(--sg-line) 0 0 0 1px inset; backdrop-filter: blur(10px); }
.sg-chat-log { max-height: 150px; overflow-y: auto; padding: 10px 12px 4px; font-size: 12px; line-height: 1.5; color: #cfd7df; }
.sg-chat-log p { margin: 0 0 4px; word-break: break-word; }
.sg-chat-log b { color: #f2efe8; font-weight: 500; }
.sg-chat-log .sys { color: #8d99a6; }
.sg-chat-panel input {
  width: 100%; height: 42px; border: 0; border-top: 1px solid var(--sg-line); padding: 0 12px;
  background: rgba(255, 255, 255, .04); color: #f2efe8; font-size: 16px; outline: none;
}
.sg-chat-panel input::placeholder { color: #6f7a86; font-size: 12px; }

/* 마주침 */
.sg-startle {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(120, 10, 10, .28), rgba(0, 0, 0, .55));
  animation: sg-startle-shake .5s cubic-bezier(.36, .07, .19, .97);
}
.sg-startle-bang { font-size: clamp(90px, 22vw, 170px); font-weight: 700; line-height: 1; color: #f4e9df; text-shadow: 0 0 40px rgba(255, 80, 60, .8); }
.sg-startle p { margin: 0; font-size: 14px; color: #ffd9d2; text-shadow: 0 2px 12px #000; }
@keyframes sg-startle-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0); }
  40%, 60% { transform: translate3d(7px, 0, 0); }
}

/* 이름표·말풍선 */
.sg-name {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  font-size: 11.5px; color: #dbe6f2; text-shadow: 0 1px 5px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .8);
  pointer-events: none; padding: 2px 6px; border-radius: 999px; background: rgba(4, 7, 12, .45);
}
.sg-name .sg-npc { color: #8f9caa; }
.sg-bubble {
  position: absolute; transform: translate(-50%, -100%); max-width: 180px;
  padding: 6px 10px; border-radius: 12px; background: rgba(240, 244, 250, .94); color: #121821;
  font-size: 12px; line-height: 1.4; word-break: break-word; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4); pointer-events: none;
}

/* 모달 */
.sg-modal-root { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 4, 8, .72); backdrop-filter: blur(5px); z-index: 20; }
.sg-modal-root.is-open { display: flex; }
.sg-modal {
  width: min(440px, 100%); max-height: 82vh; overflow-y: auto; padding: 22px;
  border-radius: 18px; background: #0c1119; box-shadow: rgba(170, 200, 230, .2) 0 0 0 1px inset;
  animation: sg-modal-in .2s ease;
}
@keyframes sg-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sg-modal h2 { margin: 0 0 10px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: #f2efe8; }
.sg-modal p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: #aab4c0; }
.sg-modal .sg-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.sg-modal button {
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; font-size: 13px;
  background: rgba(255, 255, 255, .08); color: #e8e5dd; cursor: pointer;
}
.sg-modal button.primary { background: #ece7dc; color: #10151c; font-weight: 500; }
.sg-modal button.danger { background: rgba(233, 86, 79, .16); color: #ffb4ad; }
.sg-help-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 14px 0 0; font-size: 13px; color: #aab4c0; }
.sg-help-grid kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px;
  border-radius: 6px; background: rgba(255, 255, 255, .1); color: #e9e6de; font: 600 11px/1 var(--font-sans);
}
.sg-lang { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #8d99a6; }
.sg-guide-item {
  display: flex; gap: 13px; align-items: center; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 12px; background: rgba(255, 224, 168, .05);
  box-shadow: rgba(255, 224, 168, .18) 0 0 0 1px inset;
}
.sg-guide-item .ic {
  flex: none; width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(255, 255, 255, .06); color: #ffdca8;
  font-size: 28px; line-height: 1;
}
.sg-guide-item .ic svg { width: 32px; height: 32px; }
.sg-guide-item .ic img {
  display: block; width: 42px; height: 42px; object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5));
}
.sg-guide-item .tx { min-width: 0; }
.sg-guide-item .k { display: block; font-size: 11px; letter-spacing: .04em; color: #8b97a4; }
.sg-guide-item b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: #f2efe8; }
.sg-guide-item .s { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #aab4c0; }
.sg-modal p.sg-guide-tip { margin: 12px 0 0; font-size: 12px; color: #ffe0a8; }

/* ---------- 폰 ---------- */
@media (max-width: 720px) {
  .school-nav { padding-top: max(16px, env(safe-area-inset-top)); }
  .school-hero { padding-top: 5vh; }
  .school-title { font-size: 52px; }
  .school-lead { font-size: 14.5px; }
  .school-warn { font-size: 11.5px; }
  .school-enter { flex-direction: column; max-width: 340px; }
  .school-btn { margin-top: 2px; width: 100%; }
  .school-rules { grid-template-columns: 1fr; gap: 5px; max-width: 300px; }
  .school-foot { justify-content: center; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .school-foot span { width: 100%; margin: 0 0 4px; text-align: center; }
  .sg-joystick { display: block; }
  .sg-action { display: block; }
  .sg-top-left, .sg-top-right { flex-wrap: nowrap; }
  .sg-brand { width: 34px; padding: 0; justify-content: center; gap: 0; }
  .sg-brand-text { display: none; }
  #sgRoom { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .sg-target { top: calc(max(12px, env(safe-area-inset-top)) + 46px); min-width: 0; max-width: calc(100vw - 24px); }
  .sg-chat { bottom: calc(122px + env(safe-area-inset-bottom)); }
  .sg-prompt { bottom: calc(134px + env(safe-area-inset-bottom)); }
  .sg-prompt kbd { display: none; }
  .sg-search { bottom: calc(152px + env(safe-area-inset-bottom)); }
  .sg-toast { bottom: calc(192px + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) {
  .sg-chat { bottom: 24px; }
  .sg-chat-toggle { display: none; }
  .sg-chat-panel { display: block !important; }
}