* { box-sizing: border-box; } :root { --accent: #1a237e; --accent-soft: #e8eaf6; --line: #e0e6ed; } body { margin: 0; padding: 0.6rem 1rem 0; background-color: #f4f7f6; font-family: 'Malgun Gothic', sans-serif; color: #263238; } /* ===== 상단 바 ===== */ /* ⚠️ **`flex-wrap: wrap` 을 빼지 않는다.** 없으면 좁은 창에서 이 바가 여덟 칸을 한 줄에 밀어 넣으려 하고, 칸들이 글자 폭 아래로 찌부러져 **제목과 단추 글자가 세로로 한 글자씩 쪼개진다.** 2026-09-22 실측: **로그인 상태에서 창 폭 701px** 이면 이미 「자리 배치」가 자/리/배/치 로 접히고, 오른쪽 칸들은 화면 밖으로 밀려 **가로로 스크롤해야** 닿았다. 내용의 최소 폭이 로그인 시 ~670px · 무로그인 시 ~560px 라 그렇다 — 폰만의 이야기가 아니라 **노트북에서 창을 반으로 줄여도** 걸린다. ⚠️ 바가 두 줄이 되어도 좌석 크기 계산은 안 깨진다 — `seat.js` 의 `fitSeats` 가 `stage.getBoundingClientRect().top` 으로 **실제로 재기** 때문이다. 바가 높아진 만큼 좌석이 그만큼 작아질 뿐이다. */ .appbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; row-gap: 0.5rem; background: white; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); padding: 0.55rem 1.1rem; margin-bottom: 0.6rem; } .class-tag { background-color: var(--accent); color: white; padding: 0.5rem 1.2rem; border-radius: 50px; font-size: 1.3rem; font-weight: bold; cursor: pointer; white-space: nowrap; text-decoration: none; } .class-tag:hover { background-color: #283593; } /* `white-space: nowrap` 이 글자가 세로로 쪼개지는 것을 막는다. `flex: 1` 은 밑변(flex-basis)이 0 이라, 이것이 없으면 제목이 한 글자 폭까지 찌부러진다. */ .appbar h1 { flex: 1; margin: 0; font-size: 1.5rem; color: var(--accent); white-space: nowrap; } /* 🔴 **저장 상태는 이 글자에만 나온다** (2026-09-22). 예전에는 `#save-btn` 도 같이 물들었는데, 그 단추가 하는 일은 자동 저장이 아니라 **배치를 목록에 보관하는 것**이라(`📌 이 배치 보관`) 주황이 「보관이 안 됐다」로 읽혔다. 단추 색을 잃은 만큼 글자를 굵게 해서 메운다. */ /* ⚠️ `min-width` — 「저장됨 ✓」이 4초 뒤 사라져도(2026-09-23, [D114]) **칸은 남는다.** 안 그러면 글자가 생기고 없어질 때마다 옆 단추 셋이 좌우로 밀린다. */ .save-state { font-size: 0.92rem; font-weight: bold; color: #90a4ae; white-space: nowrap; min-width: 4.8em; } .save-state.dirty { color: #ef6c00; } .save-state.saved { color: #2e7d32; } /* ===== 본문 레이아웃 ===== 왼쪽(넓게): 학생용 칠판+좌석표 — 화면 위쪽부터 크게, 아래는 여백(뒷자리 학생 배려) 오른쪽 패널(.side): 교사용 정보 — 배정 상태 / '아직 자리 없는 번호' / 안내 아래 고정 막대(.toolbar): 교사용 버튼 — 칠판 앞 교사 손에 닿게 설정은 ⚙️ 설정 버튼을 누르면 뜨는 팝업(dialog) 안에 있음 */ .wrap { display: flex; gap: 1rem; align-items: flex-start; } .col-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .side { width: 270px; flex: none; position: sticky; top: 0.5rem; height: calc(100vh - 8.5rem); /* 하단 고정 버튼 막대 자리 확보 */ display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; overflow-y: auto; } /* 🔴 **세로로 설 때는 `align-items: stretch` 로 되돌린다** (2026-09-24, UI 점검 11). 위의 `flex-start` 가 세로 방향에서는 「폭을 채우지 마라」가 되어, 자리표 칸이 화면 폭이 아니라 **좌석 폭만큼** 늘었다. 휴대폰(390)에서는 그 폭(496px)에 맞춰 브라우저가 화면 전체를 넓혀 가로 스크롤이 생겼고, `fitSeats` 는 넓어진 폭을 재서 좌석을 다시 크게 만들었다 — 스스로를 굳히는 고리였다. */ @media (max-width: 900px) { .wrap { flex-direction: column; align-items: stretch; } .side { width: auto; position: static; height: auto; justify-content: flex-start; } } /* ===== 설정 · 출력 팝업 ===== */ #settings-dialog, #output-dialog, #pick-dialog, #ask-dialog { width: min(560px, 94vw); max-height: 88vh; border: none; border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.25); } #settings-dialog[open], #output-dialog[open], #pick-dialog[open], #ask-dialog[open] { display: flex; flex-direction: column; } #settings-dialog::backdrop, #output-dialog::backdrop, #pick-dialog::backdrop, #ask-dialog::backdrop { background: rgba(0,0,0,0.45); } .dialog-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem 0.7rem; background: #fff; border-bottom: 1px solid var(--line); } .dialog-head strong { font-size: 1.2rem; color: var(--accent); } .panel { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.2rem 1.2rem; } .panel .sect { border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.9rem; margin-bottom: 0.7rem; } .panel .sect > summary { cursor: pointer; font-weight: bold; font-size: 1.02rem; color: var(--accent); list-style: none; padding: 0.2rem 0; } .panel .sect > summary::-webkit-details-marker { display: none; } .panel .sect > summary::before { content: "▸ "; color: #90a4ae; } .panel .sect[open] > summary::before { content: "▾ "; } .panel .sect[open] > summary { margin-bottom: 0.5rem; border-bottom: 1px solid var(--accent-soft); } .panel label { display: block; font-size: 0.9rem; margin: 0.5rem 0 0.2rem; color: #546e7a; } .panel input[type=number], .panel input[type=text], .panel select, .panel textarea { width: 100%; padding: 0.45rem 0.6rem; font-size: 1rem; border: 1px solid #cfd8dc; border-radius: 8px; font-family: inherit; } .panel textarea { resize: vertical; line-height: 1.5; } .row-inline { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .row-inline input[type=text], .row-inline input[type=number] { flex: 1; } /* 보관한 배치 목록 */ .snap-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.35rem; } .snap-row .snap-meta { flex: 1; min-width: 0; } .snap-row .snap-name { font-weight: bold; font-size: 0.92rem; color: #37474f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .snap-row .snap-time { font-size: 0.78rem; color: #90a4ae; } .snap-row .btn { padding: 0.3rem 0.6rem; font-size: 0.85rem; } .snap-row .btn.del { color: #c62828; border-color: #ef9a9a; } .hint { font-size: 0.8rem; color: #90a4ae; margin-top: 0.3rem; line-height: 1.4; } .summary { margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: #f1f8e9; font-size: 0.88rem; line-height: 1.5; } .summary.warn { background: #fff3e0; } .summary.error { background: #ffebee; color: #c62828; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.5rem 0.9rem; font-size: 0.95rem; font-weight: bold; border: 1px solid #cfd8dc; background: #fff; color: #37474f; border-radius: 8px; cursor: pointer; font-family: inherit; } .btn:hover { background: #eceff1; } .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn.primary:hover { background: #283593; } .btn.active { background: #ffd600; border-color: #f9a825; color: #000; } .btn.wide { width: 100%; margin-top: 0.4rem; } .btn:disabled { opacity: 0.45; cursor: default; } /* 맨 위 띠의 홈 · 로그인/로그아웃 (`partials/topbar-buttons.blade.php`). 바로 위 `.btn` 들과 나란히 서므로 크기를 그쪽에 맞춘다. */ .appbar .app-topbar__btn { padding: 0.5rem 0.9rem; font-size: 0.95rem; border-radius: 8px; } .appbar .app-topbar__logout { margin-left: 0.3rem; } /* 아주 좁은 화면(폰)에서는 제목을 아예 뺀다. 반 이름표(`1학년 3반`)가 이미 어느 화면인지 말해 주므로, 한 줄을 통째로 아끼는 편이 낫다. */ @media (max-width: 600px) { .appbar h1 { display: none; } } .rule-line { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; font-size: 0.9rem; } .rule-line input { width: 3.2rem; padding: 0.3rem; text-align: center; border: 1px solid #cfd8dc; border-radius: 6px; } .rule-line .btn { padding: 0.25rem 0.5rem; } .check-line { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0; font-size: 0.9rem; } details > summary { cursor: pointer; font-weight: bold; color: #546e7a; margin-bottom: 0.5rem; } /* ===== 번호 고르기 격자 (2026-09-22) ===== 🔴 **칠판 앞에서 손가락으로 누르는 단추다.** 높이를 3.5rem 로 잡는다 — 이보다 작으면 터치가 옆 번호로 빗나간다. 좌석 칸(`.seat`)과 달리 여기는 화면 크기에 안 맞춘다. 목록이 길어지면 창이 스크롤되면 그만이다. */ .pick-grid { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); } .pick-num { min-height: 3.5rem; padding: 0.3rem 0.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #cfd8dc; background: #fff; color: #263238; border-radius: 10px; cursor: pointer; font-family: inherit; } .pick-num:hover { background: #eceff1; } .pick-num .pick-n { font-size: 1.35rem; font-weight: 800; line-height: 1.1; } .pick-num .pick-name { font-size: 0.72rem; font-weight: 700; color: #607d8b; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 이미 어딘가 앉아 있는 번호. ⚠️ **막지 않는다** — 누르면 원래 자리에서 옮겨 온다. 점선은 "이미 어딘가 있다" 를 알리는 표시이지 금지 표시가 아니다. 🔴 **글자를 흐리게 하지 않는다.** 2026-09-22 실측: 랜덤 배치를 하고 나면 명단이 전원 배치돼 있어 **스무 칸이 전부 이 상태**가 된다. 색을 빼면 창 전체가 「눌리지 않는 것」처럼 보여서, 표시가 정보가 아니라 방해가 된다. 테두리만으로 말한다. */ .pick-num.seated { background: #fafafa; border-style: dashed; border-color: #b0bec5; } .pick-num.current { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* ⚠️ `.btn` 이 `display: inline-flex` 라 `[hidden]` 을 이긴다. 이 줄이 없으면 「이 자리 비우기」가 고정 모드에서도 보인다. */ #pick-clear[hidden] { display: none; } /* ===== 확인창 ===== */ .ask-body { font-size: 1rem; line-height: 1.6; white-space: pre-line; } .ask-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; } .ask-actions .btn { min-width: 5.5rem; } .btn.danger { background: #c62828; border-color: #c62828; color: #fff; } .btn.danger:hover { background: #b71c1c; } /* ===== 도구 막대 — 화면 하단 고정, 스크롤해도 항상 보임 ===== */ .toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; background: rgba(255,255,255,0.97); border-top: 1px solid var(--line); box-shadow: 0 -3px 14px rgba(0,0,0,0.08); padding: 0.6rem 0.9rem; } .toolbar .btn { flex: none; } .toolbar .sep { width: 1px; height: 1.7rem; align-self: center; background: var(--line); margin: 0 0.2rem; } /* ===== 휴대폰 (600px 이하) — 진님 결정 2026-09-24, UI 점검 11 ===== 🔴 **여기 규칙은 전부 600px 아래에서만 먹는다.** 칠판·교사 PC·태블릿은 그대로다. ① 도구 막대 — 🎲 랜덤 배치 · ↩️ 되돌리기 · ⋯ 더보기 셋만. 나머지(`tb-extra`)는 더보기를 누르면 펼쳐진다(`.toolbar.is-open`). 예전에는 네 줄(152px)이었다. ② 자리표 칸 안쪽 여백을 줄여 좌석에 폭을 돌려준다. 좌석 최소 크기는 `seat.js` 의 `fitSeats` 가 이 폭에서만 40 → 26px 로 낮춘다(`PHONE_MQ` — 이 숫자 600 과 짝). ⚠️ `#btn-more` 는 넓은 화면에서 아예 안 보인다. `.btn` 이 `display` 를 갖고 있어 `[hidden]` 대신 여기서 끈다. */ #btn-more { display: none; } @media (max-width: 600px) { body { padding: 0.5rem 0.5rem 0; } #btn-more { display: inline-flex; } .toolbar { gap: 0.4rem; padding: 0.5rem; } .toolbar:not(.is-open) .tb-extra { display: none; } .toolbar .sep { display: none; } /* 펼치면 여러 줄이라 가름선이 줄 끝에 홀로 남는다 */ .board-stage { padding: 0.7rem; } } /* ===== 화면 보기 팝오버 (버튼 위로 목록이 뜸) ===== */ .pop-wrap { position: relative; display: inline-flex; } .pop { position: absolute; right: 0; bottom: calc(100% + 0.6rem); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,0.20); padding: 0.35rem; min-width: 15rem; max-width: 92vw; z-index: 40; display: flex; flex-direction: column; gap: 0.15rem; } .pop[hidden] { display: none; } .pop::after { content: ""; position: absolute; top: 100%; right: 1.2rem; border: 8px solid transparent; border-top-color: #fff; filter: drop-shadow(0 1px 0 var(--line)); } .pop-item { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.6rem 0.7rem; border: none; background: none; border-radius: 8px; font: inherit; font-weight: bold; color: #37474f; cursor: pointer; text-align: left; } .pop-item:hover { background: #eceff1; } .pop-item small { display: block; font-weight: normal; font-size: 0.8rem; color: #78909c; } .pop-item .tick { color: var(--accent); font-weight: 900; visibility: hidden; } .pop-item.on { background: #e8eaf6; } .pop-item.on .tick { visibility: visible; } .mode-hint { font-size: 0.95rem; font-weight: bold; color: #ef6c00; line-height: 1.4; background: #fff3e0; border-radius: 10px; padding: 0.5rem 0.7rem; } .mode-hint:empty { display: none; } /* ===== 좌석 무대 ===== */ .board-stage { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; overflow-x: auto; } .board-stage.flip-v { flex-direction: column-reverse; } .board { background: #263238; color: #fff; text-align: center; padding: 0.6rem; border-radius: 8px; font-weight: bold; letter-spacing: 0.3em; min-width: 12rem; align-self: center; width: 60%; } .grid { display: flex; flex-direction: column; gap: 0.7rem; align-items: center; /* --seat 등은 JS(fitSeats)가 화면 폭에 맞춰 덮어씀. 아래는 기본값. */ --seat: 3.3rem; --seat-gap: 3px; --aisle: 1.6rem; } /* 분단(-로 구분한 묶음)을 세로로 줄 맞춤: 각 줄이 같은 분단 열 구조를 갖는다 */ .seat-row { display: grid; grid-auto-flow: column; gap: var(--aisle); } .seat-bundle { display: grid; gap: var(--seat-gap); } .seat, .seat-spacer { width: var(--seat); height: var(--seat); } .seat-spacer { visibility: hidden; } /* 🔴 **좌석은 `
` 가 아니라 진짜 `