/* ============================================================
   구로·영등포 권역 변신 지도 — 디자인 시스템
   컨셉: 산업유산(철·콘크리트) × 재생(밝은 생명력)
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
  /* ---- 베이스: 잉크 / 차콜 / 산업용지 ---- */
  --ink:        #1b1f26;   /* 거의 검정에 가까운 차콜 (텍스트/딥 배경) */
  --ink-2:      #2b313b;   /* 한 단계 밝은 차콜 (카드/패널 딥) */
  --ink-3:      #3c4350;   /* 보더/디바이더 on dark */
  --slate:      #5b6473;   /* 보조 텍스트 */
  --slate-2:    #767d8b;   /* 더 흐린 보조 (가독성 위해 기존 #8b93a1보다 darken) */
  --paper:      #f3f1ec;   /* 따뜻한 오프화이트 (앱 배경) */
  --paper-2:    #e9e6df;   /* 한 단계 진한 용지 */
  --surface:    #ffffff;   /* 카드 */
  --line:       #ddd8cf;   /* 라이트 보더 */
  --line-2:     #cbc5b9;

  /* ---- 변동유형 5색 (색 = 유형) ---- */
  --t1: #3f6fa8;  --t1-soft: #e6edf6;  --t1-ink: #25456b;  /* ① 산업구조 전환 — 인더스트리얼 블루그레이 */
  --t2: #e8633c;  --t2-soft: #fdeae2;  --t2-ink: #9c3b1d;  /* ② 문화·예술 재생 — 비비드 코럴 */
  --t3: #e0a426;  --t3-soft: #fbf0d6;  --t3-ink: #8f6306;  /* ③ 다문화 변동 — 따뜻한 옐로우 */
  --t4: #2f9b6b;  --t4-soft: #ddf2e8;  --t4-ink: #1a6043;  /* ④ 녹지·인프라 재생 — 프레시 그린 */
  --t5: #9a55ad;  --t5-soft: #f1e4f4;  --t5-ink: #642d75;  /* ⑤ 상업·소비 전환 — 퍼플/마젠타 */

  /* ---- 라운드 / 그림자 ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(27,31,38,.06), 0 2px 8px rgba(27,31,38,.06);
  --sh-2: 0 4px 14px rgba(27,31,38,.10), 0 2px 6px rgba(27,31,38,.06);
  --sh-3: 0 18px 50px rgba(27,31,38,.22), 0 8px 20px rgba(27,31,38,.14);
  --sh-pin: 0 4px 10px rgba(27,31,38,.28);

  --maxw: 480px;          /* 학생 모바일 폭 */
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
#root { height: 100%; display: flex; flex-direction: column; }

/* ============================================================
   유형 컬러 매핑 유틸
   ============================================================ */
.t1{ --c: var(--t1); --c-soft: var(--t1-soft); --c-ink: var(--t1-ink); }
.t2{ --c: var(--t2); --c-soft: var(--t2-soft); --c-ink: var(--t2-ink); }
.t3{ --c: var(--t3); --c-soft: var(--t3-soft); --c-ink: var(--t3-ink); }
.t4{ --c: var(--t4); --c-soft: var(--t4-soft); --c-ink: var(--t4-ink); }
.t5{ --c: var(--t5); --c-soft: var(--t5-soft); --c-ink: var(--t5-ink); }

/* ============================================================
   공통 버튼
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  padding: 14px 22px; border-radius: var(--r-pill);
  transition: transform .12s var(--ease), background .15s, box-shadow .15s, opacity .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: #000; }
.btn-accent { background: var(--c, var(--t2)); color: #fff; box-shadow: var(--sh-1); }
.btn-ghost { background: var(--paper-2); color: var(--ink); }
.btn-ghost:hover { background: var(--line); }
.btn-lg { font-size: 18px; padding: 17px 28px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn-disabled { background: var(--paper-2); color: var(--slate-2); cursor: not-allowed; }

/* ============================================================
   변동유형 색 뱃지
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 8px; border-radius: var(--r-pill);
  background: var(--c-soft); color: var(--c-ink);
  font-weight: 700; font-size: 13px; line-height: 1; white-space: nowrap;
}
.badge .badge-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c); color: #fff; font-size: 11px; font-weight: 800;
}
.badge-lg { font-size: 15px; padding: 7px 15px 7px 9px; }
.badge-lg .badge-no { width: 22px; height: 22px; font-size: 13px; }

/* ============================================================
   진행 게이지 ○/5
   ============================================================ */
.gauge { display: flex; align-items: center; gap: 10px; }
.gauge-track { display: flex; gap: 6px; }
.gauge-dot {
  width: 26px; height: 8px; border-radius: var(--r-pill);
  background: var(--line-2); transition: background .3s var(--ease), transform .3s var(--ease);
}
.gauge-dot.on { background: var(--ink); transform: scaleY(1.05); }
.gauge-label { font-size: 13px; font-weight: 700; color: var(--slate); white-space: nowrap; }
.gauge-label b { color: var(--ink); }

/* ============================================================
   모둠 칩
   ============================================================ */
.gchip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 5px 13px 5px 6px; border-radius: var(--r-pill);
  background: var(--surface); border: 1.5px solid var(--line);
  font-weight: 700; font-size: 13px;
}
.gchip .dot { width: 14px; height: 14px; border-radius: 50%; }

/* ============================================================
   토글 섹션 (해설·교과연결)
   ============================================================ */
.toggle { border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.toggle-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 13px 15px; font-weight: 700; font-size: 14px; text-align: left;
}
.toggle-head .chev { margin-left: auto; transition: transform .25s var(--ease); color: var(--slate); }
.toggle.open .toggle-head .chev { transform: rotate(180deg); }
.toggle-body { padding: 0 15px; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease), padding .3s var(--ease); }
.toggle.open .toggle-body { padding: 0 15px 15px; max-height: 1000px; }

/* ============================================================
   출처 캡션
   ============================================================ */
.src { font-size: 11px; color: var(--slate-2); line-height: 1.4; letter-spacing: -.01em; }

/* ============================================================
   앱 셸 — 16:9 기본 레이아웃
   학생·교사 모두 warm paper 배경, 전체 뷰포트 활용
   ============================================================ */
.stage-student {
  flex: 1; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  min-height: 100dvh;
}
.stage-student::before { display: none; }

/* .phone → layout pass-through (폰 목업 제거) */
.phone {
  flex: 1; display: flex; flex-direction: column;
  background: var(--paper); position: relative;
  width: 100%;
}

/* ============================================================
   16:9 분할 레이아웃 유틸
   ============================================================ */
/* 좌우 패널 래퍼 */
.split {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
/* 왼쪽: 지도/브랜드 패널 */
.split-left {
  flex: none; width: 56%; position: relative;
  overflow: hidden; border-right: 1.5px solid var(--line);
}
/* 왼쪽: 다크 브랜드 패널 (S1 입장) */
.split-left-dark {
  flex: none; width: 48%; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 30% 60%, rgba(232,99,60,.18) 0%, transparent 60%),
    linear-gradient(145deg, #1b1f26 0%, #2b313b 100%);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 56px 52px; gap: 24px;
}
/* 오른쪽: 콘텐츠 패널 */
.split-right {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--surface);
}
/* 오른쪽: 패딩 있는 폼 패널 */
.split-form {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 48px 56px; background: var(--paper);
}
.split-form-card {
  width: 100%; max-width: 440px;
}

/* ============================================================
   교사 셸 (데스크톱 가로)
   ============================================================ */
.stage-teacher { flex: 1; min-height: 100dvh; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }

/* 스크롤바 (다크 패널) */
.scroll-dark::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-dark::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 99px; }
.scroll-dark::-webkit-scrollbar-track { background: transparent; }

/* 공통 애니메이션 */
@keyframes fadeUp { from { transform: translateY(10px); } to { transform: none; } }
@keyframes popIn  { from { transform: scale(.97); } to { transform: none; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes checkPop { 0%{ transform: scale(.6);} 60%{ transform: scale(1.18);} 100%{ transform: scale(1);} }
.fade-up { animation: fadeUp .4s var(--ease); }
.pop-in  { animation: popIn .35s var(--ease); }

/* ============================================================
   목업 지도 + 핀 마커
   ============================================================ */
.map-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e4e1d8; }
.map-mock-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.82); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 700; color: var(--slate);
  border: 1px solid rgba(0,0,0,.05);
}

.pin {
  position: absolute; z-index: 3;
  transform: translate(-50%, -100%); opacity: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform .18s var(--ease), filter .18s;
}
.pin:hover { transform: translate(-50%, -103%) scale(1.06); z-index: 4; filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)); }
.pin:active { transform: translate(-50%, -100%) scale(.97); }
@keyframes pinDrop { from { opacity: 0; transform: translate(-50%, -135%); } to { opacity: 1; transform: translate(-50%, -100%); } }

.pin-head {
  position: relative; width: 34px; height: 34px;
  background: var(--c); border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-pin); border: 2.5px solid #fff;
}
.pin-no, .pin-check { transform: rotate(45deg); color: #fff; font-weight: 800; font-size: 15px; line-height: 1; }
.pin.done .pin-head { background: var(--ink); }
.pin.done .pin-check { animation: checkPop .35s var(--ease); }
.pin-label {
  font-size: 11.5px; font-weight: 800; color: var(--ink); white-space: nowrap;
  background: rgba(255,255,255,.9); padding: 2px 8px; border-radius: var(--r-pill);
  box-shadow: 0 1px 3px rgba(0,0,0,.1); letter-spacing: -.02em;
}
.pin.done .pin-label { color: var(--slate); }

/* 작은 투표 핀 (교사 발표화면 / 학생 투표) */
.vpin {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

/* 우리 학교 마커 */
.school-marker { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.school-pin { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-pin); border: 2px solid #fff; }
.school-label { font-size: 11px; font-weight: 800; color: #fff; background: var(--ink); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); letter-spacing: -.02em; }
.school-marker.compact .school-pin { width: 22px; height: 22px; border-radius: 7px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}