/* 상상으로 새로운 학교 공간 만들기 — 크롬북(약 1280×800)과 데스크탑 기준
   학교 색: 청(참) · 홍(굳) · 황(아) */

:root {
  --blue: #6c74df;      /* 청 */
  --blue-soft: #e6e8fb;
  --red: #ed727d;       /* 홍 */
  --red-soft: #fde4e6;
  --yellow: #f2c31f;    /* 황 */
  --yellow-soft: #fff4cc;
  --green: #008738;     /* 교표 초록 */
  --green-soft: #ddf2e4;
  --navy: #1f1a5e;      /* 제목 글자 */

  --bg: #fdf7e7;
  --paper: #ffffff;
  --ink: #2a2848;
  --muted: #6d6a85;
  --line: #ece4cf;
  --space: var(--blue);
  --space-soft: var(--blue-soft);
  --radius: 18px;
  --tap: 48px;
  --font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 제목: 영어·숫자는 Poppins, 한글은 Pretendard (참고 사이트와 같은 조합) */
  --font-head: "Poppins", "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  font-family: var(--font);
  color: var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; }
h1, h2, .display { font-family: var(--font-head); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.loading { padding: 40px; text-align: center; font-size: 1.4rem; }

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 0 #c9505c; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #c9505c; }
.btn-ghost { background: var(--paper); border-color: var(--line); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: 0.95rem; }
.btn-big { min-height: 64px; padding: 0 44px; font-size: 1.5rem; font-family: var(--font-head); font-weight: 800; }

/* ---------- 첫 화면 ---------- */

.home-page { position: relative; overflow-x: hidden; }

/* 브로슈어처럼 둥근 색 모양 배경 */
.home-page::before,
.home-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.home-page::before {
  width: 46vmax;
  height: 46vmax;
  top: -24vmax;
  right: -14vmax;
  background: var(--blue);
  opacity: 0.9;
}
.home-page::after {
  width: 34vmax;
  height: 34vmax;
  bottom: -20vmax;
  left: -12vmax;
  background: var(--yellow);
}
.dot {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.dot-red { width: 9vmax; height: 9vmax; right: 6vw; bottom: 8vh; background: var(--red); }
.dot-small { width: 3.4vmax; height: 3.4vmax; left: 44vw; bottom: 2vh; background: var(--blue); }

.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-school { display: block; font-size: 0.95rem; font-weight: 700; color: var(--muted); }
.brand h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; }
.brand h1 .c-blue { color: var(--blue); }
.brand h1 .c-red { color: var(--red); }
.brand h1 .c-yellow { color: #d9a800; }

.who { display: flex; align-items: center; gap: 10px; }
.who-number {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.25rem;
}

/* 안내 말풍선 */
.speech {
  position: relative;
  align-self: flex-start;
  margin: 0;
  padding: 12px 22px;
  border-radius: 22px 22px 22px 6px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.4;
}

/* 번호 고르기 */
.number-stage {
  flex: 1;
  display: grid;
  place-items: center;
}
.number-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: var(--paper);
  border-radius: 28px;
  box-shadow: 0 8px 24px rgb(31 26 94 / 0.12);
}
.number-box h2 { font-size: 2.1rem; }
.number-box .speech { align-self: center; }
.number-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: min(100%, 600px);
}
.number {
  aspect-ratio: 1.35;
  min-height: 60px;
  border: 3px solid var(--c, var(--blue));
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-head); font-weight: 800;
  font-size: 2rem;
}
.number:nth-child(3n+1) { --c: var(--blue); }
.number:nth-child(3n+2) { --c: var(--red); }
.number:nth-child(3n) { --c: var(--yellow); }
.number[aria-pressed="true"] { background: var(--c); color: #fff; transform: scale(1.06); }

/* 공간 카드 */
.space-stage { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.space-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.space-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: var(--card);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.12);
}
.space-card:active { transform: translateY(3px); box-shadow: 0 3px 0 rgb(0 0 0 / 0.12); }
.space-photo {
  flex: 1;
  min-height: 110px;
  margin: 10px 10px 0;
  border-radius: 18px;
  background: #fff center / cover no-repeat;
}
.space-name {
  padding: 12px 22px 14px;
  font-family: var(--font-head); font-weight: 800;
  font-size: 2rem;
  color: var(--card-ink, #fff);
}
.space-card.mine { box-shadow: 0 0 0 6px var(--navy), 0 6px 0 rgb(0 0 0 / 0.12); }
.space-card.closed { filter: grayscale(0.85); opacity: 0.45; }
.space-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
}

/* ---------- 확인 창, 알림 ---------- */

dialog.confirm {
  border: 0;
  border-radius: 28px;
  padding: 28px 32px;
  max-width: min(90vw, 480px);
  text-align: center;
  border-top: 10px solid var(--yellow);
}
dialog.confirm::backdrop { background: rgb(31 26 94 / 0.45); }
dialog.confirm p {
  margin: 0 0 22px;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--navy);
  white-space: pre-line;
}
.confirm-buttons { display: flex; gap: 12px; justify-content: center; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 40px);
  max-width: 90vw;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 30;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 활동 화면 ---------- */

.space-page { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--space);
  color: var(--space-ink, #fff);
}
.topbar h1 {
  flex: 1;
  font-size: 1.45rem;
  color: var(--space-ink, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .btn-ghost { border-color: transparent; color: var(--navy); }
.save-state { font-size: 0.95rem; color: var(--space-ink, #fff); }

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "materials ideas board"
    "view view board";
  gap: 10px;
  padding: 10px;
}

.panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 3px 10px rgb(31 26 94 / 0.08);
  overflow: hidden;
}
.panel h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 6px; }
.panel h2::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot, var(--blue));
  flex: none;
}
.panel-body { min-height: 0; overflow-y: auto; }
.panel-materials { grid-area: materials; --dot: var(--yellow); }
.panel-ideas { grid-area: ideas; --dot: var(--red); }
.panel-view { grid-area: view; --dot: var(--blue); }
.panel-board { grid-area: board; --dot: var(--green); }
.panel-materials > * { flex: none; }
.panel-materials > #materials { flex: 1 1 0; }
.panel-ideas > * { flex: none; }
.panel.panel-ideas { overflow-y: auto; }
.panel-ideas > #people { flex: none; }

/* 탭 */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tabs.tabs-3 { grid-template-columns: repeat(3, 1fr); }
.tab {
  min-height: 40px;
  padding: 2px 4px;
  border: 2px solid var(--blue-soft);
  border-radius: 12px;
  background: var(--paper);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
  word-break: keep-all;
  color: var(--navy);
}
.tab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 재료·사람 칩 */
.chip-group { margin-bottom: 8px; }
.chip-group h3 { font-size: 0.9rem; color: var(--muted); margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 1rem;
}
.chip[aria-pressed="true"] { background: var(--yellow-soft); border-color: var(--yellow); font-weight: 800; color: var(--navy); }
.chip-main { font-weight: 800; }

/* 상상 방법 */
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 2px 4px;
  border: 2px solid var(--red-soft);
  border-radius: 14px;
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  word-break: keep-all;
  color: var(--navy);
}
.method[aria-pressed="true"] { background: var(--red-soft); border-color: var(--red); }
.method-emoji { font-size: 1.2rem; }
.method-icon { width: 34px; height: 34px; object-fit: contain; }

.bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--yellow-soft);
  border-left: 6px solid var(--yellow);
  font-size: 0.95rem;
  color: var(--navy);
}
.bubble[hidden] { display: none; }

/* 사진 보기 */
.view-wrap { flex: 1; min-height: 0; display: flex; gap: 10px; }
.picker {
  width: 168px;
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  gap: 6px;
  overflow-y: auto;
}
.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3px;
  border: 3px solid var(--blue-soft);
  border-radius: 12px;
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}
.pick-360 { grid-column: 1 / -1; }
.pick-groups {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 4px;
}
.pick-group {
  padding: 6px 2px;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 800;
}
.pick-group[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pick[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.pick-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: #ddd center / cover no-repeat;
  font-size: 1.6rem;
}
.pick-blank .pick-thumb { background: #fff; border: 1px dashed var(--line); }
.pick-360 .pick-thumb { aspect-ratio: 2 / 1; }
.pick-label { padding-top: 2px; }
.pick-done {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 0.85rem;
}

.viewer {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #eee;
}
.pano, .flat { width: 100%; height: 100%; }
.flat { object-fit: contain; display: block; background: #f3f3f3; }
.pano[hidden], .flat[hidden] { display: none; }
.blank-note {
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.6rem;
  color: var(--muted);
  background: #fff;
}
.blank-note[hidden] { display: none; }
.capture {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;
}
.capture:active { transform: translate(-50%, 2px); }
.capture[hidden] { display: none; }

/* 상상 공간 바꾸기 */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zoom { flex: none; border-color: var(--green); color: var(--green); }

.idea-table { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; font-size: 0.9rem; }
.idea-table th {
  padding: 4px;
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
}
.idea-table th:nth-child(1) { background: #d9a800; }
.idea-table th:nth-child(2) { background: var(--red); }
.idea-table th:nth-child(3) { background: var(--blue); }
.idea-table td {
  vertical-align: top;
  padding: 4px;
  height: 60px;
  border-radius: 10px;
  background: var(--bg);
}
.idea-table td > * { margin: 2px; }
.picked {
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: 0.9rem;
}
.empty { color: #aaa; font-size: 0.85rem; }

.board { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.board-canvas {
  position: relative;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 10;
  border: 3px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
@supports (width: 1cqw) {
  .board { container-type: size; }
  .board-canvas { width: min(100cqw, 160cqh); }
}
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer-ink { touch-action: none; cursor: crosshair; }
.layer-ink.off { pointer-events: none; }
.board-hint {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--muted);
  background: rgb(255 255 255 / 0.88);
  border-radius: 14px;
}
.board-hint[hidden] { display: none; }

.tools { display: flex; flex-direction: column; gap: 6px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: var(--c);
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy); }
.size {
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.size span { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink); }
.size[aria-pressed="true"], .tool[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.tool {
  min-height: 40px;
  padding: 0 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---------- 그리기 판 크게 보기 ---------- */

.board-full .panel-board {
  position: fixed;
  inset: 0;
  z-index: 20;
  padding: 14px 20px;
  border-radius: 0;
}
.board-full .panel-board h2 { font-size: 1.5rem; }
.board-full .zoom { min-height: var(--tap); font-size: 1.1rem; background: var(--red); color: #fff; border-color: var(--red); }
.board-full .tools { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
.board-full .swatch { width: 48px; height: 48px; }
.board-full .size, .board-full .tool { min-height: var(--tap); }

/* ---------- 세로 화면·좁은 화면 (태블릿 모드) ---------- */

@media (max-width: 900px), (orientation: portrait) {
  .space-page { height: auto; overflow: visible; }
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "view" "board" "materials" "ideas";
  }
  .panel-view { height: 50vh; }
  .panel-board { min-height: 70vh; }
  .panel { overflow: visible; }
  .panel-ideas > #people, .panel-materials > #materials { flex: none; overflow: visible; }
  .space-grid { grid-template-columns: 1fr; }
}

/* ---------- 직접 써봐요 ---------- */

.write-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 14px;
  border: 2px dashed var(--yellow);
  border-radius: 14px;
  background: var(--yellow-soft);
  color: var(--navy);
  font-weight: 800;
  font-size: 1.05rem;
  text-align: left;
}
.write-open span { font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.my-words[hidden] { display: none; }
.chip-mine { background: var(--yellow-soft); border-color: var(--yellow); font-weight: 800; color: var(--navy); }

.write-dialog {
  width: min(94vw, 860px);
  max-height: 96dvh;
  overflow-y: auto;
  border: 0;
  border-radius: 28px;
  padding: 22px 26px;
  border-top: 10px solid var(--yellow);
  color: var(--ink);
}
.write-dialog::backdrop { background: rgb(31 26 94 / 0.5); }
.write-dialog[open] { display: flex; flex-direction: column; gap: 10px; }
.write-head { display: flex; align-items: center; justify-content: space-between; }
.write-head h2 { font-size: 1.9rem; }
.write-help, .pen-help { margin: 0; color: var(--muted); font-size: 1.05rem; }
.write-tabs { grid-template-columns: repeat(2, 1fr); }
.write-tabs .tab { min-height: var(--tap); font-size: 1.05rem; }
.write-tabs .tab[hidden], .write-tabs[hidden], .pen-help[hidden] { display: none; }
.write-input {
  width: 100%;
  min-height: 84px;
  padding: 0 22px;
  border: 3px solid var(--blue);
  border-radius: 20px;
  font: inherit;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--navy);
  background: #fff;
}
.write-input:focus { outline: 4px solid var(--blue-soft); }
.pen-area { display: flex; flex-direction: column; gap: 8px; }
.pen-area[hidden] { display: none; }
.pen-canvas {
  width: 100%;
  height: min(24dvh, 220px);
  border: 3px dashed var(--blue);
  border-radius: 20px;
  background:
    linear-gradient(transparent calc(50% - 1px), var(--blue-soft) calc(50% - 1px), var(--blue-soft) calc(50% + 1px), transparent calc(50% + 1px)),
    #fff;
  touch-action: none;
}
.pen-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.candidates { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.candidate { min-height: var(--tap); font-size: 1.4rem; font-weight: 800; padding: 0 20px; }
.write-actions { display: flex; justify-content: center; }

/* 상상한 물건이나 공간 제목 */
.title-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 4px 14px;
  border: 2px solid var(--green);
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--navy);
  text-align: left;
}
.title-label { flex: none; font-weight: 800; font-size: 0.95rem; }
.title-text { flex: 1; min-width: 0; font-weight: 800; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-text.empty { font-weight: 400; font-size: 0.95rem; color: var(--muted); }
.board-full .title-field { min-height: 56px; }
.board-full .title-text { font-size: 1.4rem; }

/* ---------- 선생님 모아보기 ---------- */

.muted { color: var(--muted); }
.small { font-size: 0.9rem; margin: 0; }

.teacher { max-width: 1600px; margin: 0 auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 14px; }

.login-box {
  max-width: 440px;
  margin: 12vh auto 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper);
  border-radius: 28px;
  border-top: 10px solid var(--blue);
  box-shadow: 0 8px 24px rgb(31 26 94 / 0.12);
  text-align: center;
}
.login-box h1 { font-size: 2rem; }
.login-input {
  min-height: 56px;
  padding: 0 18px;
  border: 3px solid var(--blue-soft);
  border-radius: 16px;
  font: inherit;
  font-size: 1.3rem;
}
.login-input:focus { outline: none; border-color: var(--blue); }
.login-error { margin: 0; color: #c9505c; font-weight: 700; }

.teacher-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.teacher-top h1 { font-size: 2rem; }
.live { color: var(--green); font-weight: 800; }
.live.off { color: #c9505c; }
.teacher-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); cursor: pointer; }
.switch input { width: 22px; height: 22px; accent-color: var(--blue); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  min-height: 40px;
  padding: 0 16px;
  border: 2px solid var(--c, var(--navy));
  border-radius: 999px;
  background: var(--paper);
  font-weight: 800;
  color: var(--navy);
}
.filter[aria-pressed="true"] { background: var(--c, var(--navy)); color: #fff; }

.student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.student-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border-radius: var(--radius);
  border-top: 8px solid var(--c, var(--line));
  box-shadow: 0 3px 10px rgb(31 26 94 / 0.08);
}
.student-card.fresh { box-shadow: 0 0 0 4px var(--yellow), 0 3px 10px rgb(31 26 94 / 0.08); }
.student-card header { display: flex; align-items: center; gap: 8px; }
.student-card .num { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--navy); }
.student-card .tag { padding: 2px 10px; border-radius: 999px; background: var(--c); color: #fff; font-weight: 800; font-size: 0.85rem; }
.student-card .tag-none { background: var(--line); color: var(--muted); }
.fresh-badge { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--yellow); color: var(--navy); font-weight: 800; font-size: 0.8rem; }
.works { display: grid; grid-template-columns: 1fr; gap: 6px; }
.work-thumb {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  text-align: left;
}
.work-thumb img, .no-thumb { width: 100%; aspect-ratio: 486 / 150; object-fit: cover; display: grid; place-items: center; background: #fff; color: var(--muted); font-size: 0.8rem; }
.work-title { padding: 4px 8px 6px; font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.work-dialog {
  width: min(97vw, 1500px);
  max-height: 97dvh;
  border: 0;
  border-radius: 24px;
  padding: 22px 28px;
  overflow-y: auto;
  font-size: 1.15rem;
}
.work-dialog::backdrop { background: rgb(31 26 94 / 0.55); }
.work-dialog:fullscreen, .work-dialog.max { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.work-dialog:fullscreen .pair-item img, .work-dialog:fullscreen .paper { max-height: 62dvh; }
.work-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.work-head h2 { font-size: 2.4rem; }
.work-meta { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; color: var(--muted); }
.work-head-actions { display: flex; gap: 8px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair-item { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pair-item figcaption { font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.pair-item img, .paper, .pair-empty {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #fff;
}
.paper { position: relative; }
.paper img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.pair-empty { display: grid; place-items: center; color: var(--muted); }
.work-info { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; margin-top: 16px; }
.ref-box { display: flex; gap: 10px; }
.ref-box[hidden], .ref-item[hidden] { display: none; }
.ref-item { margin: 0; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.ref-imgs { display: flex; gap: 4px; }
.ref-imgs img { display: block; height: 150px; border-radius: 10px; background: #fff; }
.detail-list h3 { font-size: 1.35rem; margin-bottom: 8px; }
.detail-list.c-yellow h3 { color: #b38a00; }
.detail-list.c-red h3 { color: #c9505c; }
.detail-list.c-blue h3 { color: var(--blue); }
.detail-list .chip { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.2rem; padding: 0 16px; }
.ai-section { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--blue-soft); display: flex; flex-direction: column; gap: 10px; }
.ai-section h3 { font-size: 1.4rem; color: var(--navy); }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-result { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ai-result img { width: 100%; max-height: 70dvh; object-fit: contain; border-radius: 14px; background: #fff; }
.prompt-box summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.prompt-box pre { white-space: pre-wrap; font-family: var(--font); font-size: 1rem; background: #fff; padding: 12px; border-radius: 12px; }
.work-foot { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.danger { color: #c9505c; border-color: var(--red-soft); }

/* ---------- 친구 작품 보기 ---------- */

.gallery-page { min-height: 100dvh; }
.gallery-page .topbar { background: var(--blue); }
.gallery { max-width: 1400px; margin: 0 auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 18px; }
.gallery-closed { align-self: center; margin-top: 10vh; font-size: 1.6rem; }
.gallery-section h2 { font-size: 1.6rem; margin-bottom: 10px; color: var(--navy); }
.gallery-section h2::after { content: ""; display: block; width: 60px; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--c); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gallery-item { margin: 0; background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: 0 3px 10px rgb(31 26 94 / 0.08); }
.gallery-item img { width: 100%; height: auto; display: block; }
.gallery-item figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; color: var(--navy); }

@media (max-width: 900px) {
  .pair, .work-info { grid-template-columns: 1fr; }
}

/* 내가 고른 공간 (작게) + 제목 */
.scene-row { display: flex; gap: 8px; align-items: stretch; }
.scene-row .title-field { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; }
.scene-row .title-text { width: 100%; }
.scene-mini {
  flex: none;
  width: 104px;
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--blue);
  background: var(--blue-soft);
  display: grid;
  place-items: center;
}
.scene-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-mini img[hidden], .scene-mini figcaption[hidden] { display: none; }
.scene-mini figcaption { font-size: 0.72rem; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.3; }
.board-full .scene-mini { width: 140px; }

/* 제출하기 */
.board-foot { position: relative; }
.submit { position: absolute; right: 0; bottom: 0; min-height: 46px; padding: 0 20px; font-size: 1.15rem; border-radius: 14px; }
.board-full .board-foot { display: flex; align-items: center; gap: 14px; justify-content: center; }
.board-full .submit { position: static; min-height: 56px; font-size: 1.3rem; }
.submit.done { background: var(--green); box-shadow: 0 4px 0 #005c26; }

/* ---------- 크게 그리기: 그리기 판이 화면을 꽉 채우게 ----------
   위: 제목 줄 / 왼쪽: 고른 공간·작품 제목 + 그리기 판 / 오른쪽: 색·도구·제출 */
.board-full .panel-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px 14px;
  padding: 10px 14px;
}
.board-full .panel-head { grid-column: 1 / -1; }
.board-full .panel-board h2 { font-size: 1.3rem; }
.board-full .idea-table,
.board-full .bubble { display: none; }
.board-full .scene-row { grid-column: 1; grid-row: 2; }
.board-full .scene-mini { width: 88px; }
.board-full .title-field { min-height: 0; padding-top: 6px; padding-bottom: 6px; }
.board-full .title-text { font-size: 1.15rem; }
.board-full .board { grid-column: 1; grid-row: 3; }
.board-full .board-foot {
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  padding: 6px;
  overflow-y: auto;
}
.board-full .tools { flex-direction: column; gap: 14px; }
.board-full .tool-row { justify-content: flex-start; gap: 8px; }
.board-full .swatch { width: 44px; height: 44px; }
.board-full .tool { flex: 1 1 100%; min-height: 48px; font-size: 1rem; }
.board-full .submit { position: static; width: 100%; min-height: 60px; font-size: 1.3rem; }

.ai-steps { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: var(--navy); }

/* ---------- 공간 조성 ---------- */
.group-dialog h3 { margin: 16px 0 8px; font-size: 1.15rem; color: var(--navy); }
.group-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.group-pick { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 700; }
.group-pick input { width: 20px; height: 20px; }
.group-warn { margin: 6px 0 0; color: #c9505c; font-weight: 700; }
.group-warn:empty { display: none; }
.group-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.group-photo { padding: 3px; border: 3px solid var(--line); border-radius: 10px; background: #fff; }
.group-photo[aria-pressed="true"] { border-color: var(--blue); }
.group-photo img { display: block; width: 140px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.group-capture { padding: 12px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.group-capture .ref-box { justify-content: flex-end; }
.group-board { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }
.group-cell { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.group-cell figcaption { font-size: 1.1rem; font-weight: 800; color: var(--navy); }
.group-cell > img, .group-cell .paper { width: 100%; aspect-ratio: 16 / 10; border: 2px solid var(--line); border-radius: 10px; object-fit: cover; background: #fff; }
.group-base figcaption { color: var(--blue); }
.group-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.group-tags .chips { display: contents; }
.group-tags .chip { font-size: 0.85rem; padding: 2px 8px; min-height: 0; }
.group-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.group-step h3 { margin-right: 6px; }
.group-pick.other { border-style: dashed; }
.group-pick-place { padding: 1px 8px; border-radius: 999px; background: var(--blue-soft); font-size: 0.8rem; color: var(--navy); }
.group-photo { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.8rem; font-weight: 700; color: var(--navy); }
.group-pano { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.group-pano[hidden] { display: none; }
.group-pano-view { width: min(100%, 960px); aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.group-base { grid-column: span 2; }
.group-base-wrap { position: relative; }
.group-base-wrap img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid var(--line); border-radius: 10px; }
.group-base-wrap.placing { cursor: crosshair; outline: 4px dashed var(--red); outline-offset: 2px; border-radius: 10px; }
.group-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
  pointer-events: none;
}
.group-hint { margin: 4px 0 0; color: var(--red); font-weight: 800; }
.group-hint:empty { display: none; }
.note-box { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; font-weight: 800; color: var(--navy); }
.note-box input { padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; font: inherit; font-weight: 500; }
.note-box input:focus { outline: none; border-color: var(--blue); }
.group-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 12px; }