/* 스킨 「무대」 — 토큰 이름은 그대로 두고 값만 갈았다.
그래야 토큰을 쓰는 자리가 한 번에 바뀐다. 설계서 = _design/MIGRATION_STAGE.md */
:root {
--paper: #f6f8f7;
--card: #ffffff;
--ink: #101815;
--muted: #64726c;
--line: #e3e8e4;
--primary: #0e7a5f;
--primary-d: #0b6349;
--primary-soft: #e6f2ed;
--coral: #ff7a59;
--coral-soft: #fdece7;
--coral-ink: #a8412a;
--gold: #f4b429;
--gold-2: #f59e0b;
--gold-soft: #fbf1d9;
--gold-ink: #8a6a12;
--field: #fafbfa;
--shadow: 0 14px 40px rgba(16, 24, 21, 0.10);
--shadow-s: 0 5px 16px rgba(16, 24, 21, 0.07);
--radius: 14px;
--radius-s: 10px;
/* 재는 값(방 코드·인원·채운 칸·배점·시각)은 읽는 글과 눈으로 갈린다. 폰트 CDN 은 안 쓴다. */
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "D2Coding", monospace;
/* 학생 무대. ★어두운 판은 그대로 둔다 — 선생님 화면이 떠야 할 자리라 바탕이 물러서야 한다.
⚠️다만 파랑 회색으로 갈았더니 제품 전체가 다른 물건처럼 읽혔다. 초록 기운으로 되돌린다. */
--stage: #0b100e;
--stage-card: #151d19;
--stage-line: #253029; /* 칸을 가르는 실선. 보이지 않아도 되는 자리 */
--stage-edge: #4f7d6a; /* ★보여야 하는 테두리(입력칸·고른 칸). 무대 세 바탕에서 최저 대비 3.66 */
--stage-ink: #dfe9e4;
--stage-muted: #8aa298;
--stage-dim: #5d7a6e;
--stage-accent: #3ddca5;
--stage-raised: #1b2620; /* 입력칸·떠 있는 면. 스킨 「방송」에서 새로 생긴 자리 */
--stage-soft: #12352a;
--stage-on-accent: #07211a; /* 무대 강조색 위에 얹는 글자 */
/* 스킨 「방송」에서 새로 */
--on-primary: #fff; /* --primary 위 글자. 어두운 판에선 진한 글자로 뒤집힌다 */
--live: #e5343f; /* 수업 중 표시에만 */
--live-ink: #ffffff;
--raised-2: #ffffff;
--focus: #0f8f6c;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #0f1512; --card: #161e1a; --ink: #e6efe9; --muted: #93a49c; --line: #262f2a;
--primary: #3ddca5; --primary-d: #2fbf8c; --primary-soft: #12352a;
--coral: #ff8a6b; --coral-soft: #2c1712; --coral-ink: #ff9c81;
--gold: #f6c24b; --gold-2: #f2ab2b; --gold-soft: #2e2510; --gold-ink: #f6c24b;
--field: #121a16; --shadow: 0 16px 44px rgba(0,0,0,.5); --shadow-s: 0 6px 18px rgba(0,0,0,.4);
}
}
:root[data-theme="dark"] {
/* 스킨 「방송」 교사 스튜디오 — 목업 _design/live/Broadcast.dc.html :root 값 그대로 */
--paper: #0b0f14; --card: #121922; --field: #1b2430; --raised-2: #232e3c; --line: #263140;
--ink: #eef2f6; --muted: #a3afbd;
--primary: #3ddca5; --primary-d: #2fbf8c; --primary-soft: rgba(61,220,165,.14); --on-primary: #042a1d;
--coral: #ff8a6b; --coral-soft: rgba(255,138,107,.14); --coral-ink: #ff8a6b;
--gold: #f2c14e; --gold-2: #f2c14e; --gold-soft: rgba(242,193,78,.14); --gold-ink: #f2c14e;
--shadow: 0 16px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --shadow-s: 0 6px 18px rgba(0,0,0,.4);
--focus: #6f9bff;
}
/* 빔(밝은 판) — 목업 [data-theme="light"] 값. 요소에 달면 그 안에서만 밝아진다.
초점 링만 목업(#6f9bff, 밝은 판 대비 2.17)을 버리고 3:1 을 넘는 #0f8f6c(3.29)를 쓴다 — 브리프 하드 제약. */
[data-theme="light"] {
--paper: #e9e7e1; --card: #f4f3ef; --field: #ffffff; --raised-2: #ffffff; --line: #cbc6bb;
--ink: #15191e; --muted: #4a525c;
--primary: #0d7f5b; --primary-d: #0b6349; --primary-soft: rgba(13,127,91,.12); --on-primary: #ffffff;
--gold: #8a6300; --gold-ink: #8a6300; --coral: #b8452a; --coral-ink: #b8452a;
--shadow: 0 12px 30px rgba(40,34,20,.16);
--focus: #0f8f6c;
/* 빔 안에서 무대 토큰을 쓰는 규칙들(담벼락 쪽지·채팅)도 밝은 판을 따른다 */
--stage: #e9e7e1; --stage-card: #f4f3ef; --stage-raised: #ffffff; --stage-line: #cbc6bb; --stage-edge: #8a8478;
--stage-ink: #15191e; --stage-muted: #4a525c; --stage-dim: #5b636e;
--stage-accent: #0d7f5b; --stage-soft: #dfe8e2; --stage-on-accent: #ffffff;
}
* { box-sizing: border-box; }
/* hidden 속성은 브라우저 기본 display:none 일 뿐이라, display 를 준 요소에 지고 만다.
그러면 감췄다고 믿은 판이 그대로 보인다(속성은 참이라 검사도 통과한다). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
"Malgun Gothic", sans-serif;
color: var(--ink);
line-height: 1.55;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
/* 스킨 「무대」 — 바탕은 평평하게. 위계는 면·선·여백·타이포로만 만든다.
옛 코럴·그린 그라데이션 두 겹은 걷었다(빔에 띄우면 특히 드러났다). */
background: var(--paper);
overflow-x: hidden;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 20px 16px 72px; }
img, .qr { max-width: 100%; }
/* ---- header ---- */
header.top { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0 12px; }
header.top .logo {
display: inline-flex; align-items: center; gap: 9px;
font-size: 24px; font-weight: 900; letter-spacing: -0.6px;
}
/* 표는 학급 투표 시절 것이었다. 지금 파는 것은 화면을 나눠 보는 도구라 마크도 화면이다.
글자(✓)가 아니라 색면으로 그린다 — 글리프는 기기에 따라 컬러 이모지로 튀어 오른다. */
header.top .logo::before {
content: ""; width: 30px; height: 30px; border-radius: 9px; flex: none;
background:
linear-gradient(#fff, #fff) center 12px / 17px 11px no-repeat,
linear-gradient(#fff, #fff) center 25px / 7px 2px no-repeat,
linear-gradient(150deg, var(--primary), var(--primary-d));
box-shadow: var(--shadow-s);
}
header.top .logo .dot { display: none; }
/* 학급 도구는 수업방과 다른 제품이라 마크도 다르다 — 화면이 아니라 투표함이다.
같은 규칙을 따른다: 글리프(✓)가 아니라 색면으로 그린다. */
header.top .logo.tools::before {
background:
linear-gradient(#0c8e6d, #0c8e6d) center 15px / 9px 3px no-repeat,
linear-gradient(#fff, #fff) center 11px / 19px 13px no-repeat,
linear-gradient(150deg, var(--primary), var(--primary-d));
}
a.logo { text-decoration: none; color: inherit; cursor: pointer; }
.opt { color: var(--muted); font-weight: 600; font-size: 12px; }
/* ★이 화면이 누구 손에 있는 화면인가. 교사 화면을 학생 폰으로 띄우는 사고가 제일 비싸다 —
점수와 남의 글이 통째로 보인다. 그래서 머리글에 늘 붙여 둔다. */
header.top .who {
display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 999px;
font-size: 11.5px; font-weight: 800; letter-spacing: -0.2px; vertical-align: 1px;
}
header.top .who:first-child { margin-left: 0; }
header.top .who.tea { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-d); }
header.top .who.stu { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--muted); }
header.top .sub {
max-width: 100%;
color: var(--primary-d); font-size: 13px; font-weight: 700;
background: var(--card); padding: 6px 15px; border-radius: 999px;
box-shadow: var(--shadow-s);
}
/* ---- hub (홈 도구 허브) ---- */
.hub-intro { text-align: center; padding: 10px 0 2px; }
.hub-intro h1 { font-size: 22px; }
.tool-tile {
display: flex; align-items: center; gap: 14px;
background: var(--card); border: 1px solid var(--line); border-radius: 18px;
box-shadow: var(--shadow-s); padding: 18px; margin-top: 13px;
text-decoration: none; color: var(--ink);
transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.tool-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.tool-tile:active { transform: translateY(0) scale(.99); }
/* 허브 타일 아이콘 — 이모지 대신 선 SVG. 색면은 그대로 두어 타일끼리 구별된다. */
.tt-emoji, .tt-ico {
width: 48px; height: 48px; border-radius: 13px; flex: none;
display: grid; place-items: center; font-size: 25px; background: var(--primary-soft);
color: var(--primary-d);
}
.tt-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tool-tile:nth-of-type(2) :is(.tt-emoji, .tt-ico) { background: var(--coral-soft); color: var(--coral-ink); }
.tool-tile:nth-of-type(3) :is(.tt-emoji, .tt-ico) { background: var(--gold-soft); color: var(--gold-ink); }
.tool-tile:nth-of-type(4) :is(.tt-emoji, .tt-ico) { background: color-mix(in srgb, var(--ink) 12%, var(--card)); color: var(--ink); }
.tt-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tt-name { font-weight: 900; font-size: 17px; letter-spacing: -0.3px; }
.tt-desc { color: var(--muted); font-size: 12.5px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.tt-arrow { color: var(--muted); font-size: 20px; font-weight: 700; flex: none; }
.tool-tile:hover .tt-arrow { color: var(--primary); }
/* 타일 아래에 붙는 학생용 진입로. 타일과 한 덩이로 보이게 위 여백을 좁히고 아래 모서리만 둥글린다. */
.tile-sub { display: flex; justify-content: flex-end; padding: 0 8px; }
.tile-sub a {
font-size: 12.5px; font-weight: 800; line-height: 1.3; text-decoration: none;
color: var(--primary-d); background: var(--primary-soft);
border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
border-top: none; border-radius: 0 0 13px 13px; padding: 9px 14px;
word-break: keep-all;
}
.tile-sub a:hover { background: color-mix(in srgb, var(--primary) 18%, var(--card)); }
/* 교사용 시작 화면에 학생이 들어왔을 때의 길. 교사 단추와 섞이지 않게 조용히 둔다. */
.start-join {
display: block; text-align: center; margin-top: 14px; padding: 8px;
font-size: 13px; font-weight: 800; color: var(--primary-d);
text-decoration: none; word-break: keep-all;
}
.start-join:hover { text-decoration: underline; }
/* ---- card ---- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-s);
padding: 22px;
margin-top: 16px;
}
h1 { font-size: 22px; margin: 4px 0 5px; letter-spacing: -0.5px; font-weight: 900; }
h2 { font-size: 17px; margin: 0 0 12px; letter-spacing: -0.3px; font-weight: 800; }
.hint { color: var(--muted); font-size: 13.5px; margin: 0 0 15px; }
/* ---- inputs ---- */
label { display: block; font-size: 13px; font-weight: 800; margin: 15px 0 7px; }
/* ⚠️`input[type=text]` 는 type 을 안 적은 칸을 통째로 비켜 간다 —
그런 칸은 브라우저 기본 크기로 떨어져 글자와 테두리가 딱 붙는다.
새 칸을 넣을 때마다 되풀이될 자리라 선택자를 넓혀 둔다(type 없는 input 의 기본값이 text 다).
★number·tel 도 같은 함정이었다. 과정평가의 「인원」과 문항 수 칸이 브라우저 기본 크기로 떨어져
같은 화면의 다른 칸들보다 눈에 띄게 작았다. 한 줄짜리 글칸은 전부 여기로 들인다. */
input[type=text], input[type=number], input[type=tel], input[type=search],
input[type=email], input[type=url], input:not([type]) {
width: 100%; font-size: 16px; padding: 13px 14px;
border: 1.5px solid var(--line); border-radius: 12px;
background: var(--field); color: var(--ink); outline: none;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--muted); opacity: .8; }
input[type=text]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=search]:focus,
input[type=email]:focus, input[type=url]:focus, input:not([type]):focus {
border-color: var(--primary); background: var(--card);
box-shadow: 0 0 0 3px var(--primary-soft);
}
/* ---- buttons ---- */
button {
font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
border: none; border-radius: 12px; padding: 14px 18px;
transition: transform .08s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
button:active { transform: translateY(1px) scale(.99); }
/* 스킨 「무대」 — 평평한 한 색. 그라데이션과 색 그림자는 걷었다.
강조색은 「지금 할 단 하나의 행동」이라는 뜻이고, 그 뜻은 색 하나로 충분하다. */
.btn-primary {
background: var(--primary);
color: var(--on-primary); width: 100%;
box-shadow: none;
}
.btn-primary:hover { background: var(--primary-d); }
.btn-primary:disabled { opacity: .5; box-shadow: none; cursor: default; }
.btn-ghost { background: var(--primary-soft); color: var(--primary-d); }
.btn-line { background: var(--card); border: 1.5px solid var(--line); color: var(--ink); }
.btn-line:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.btn-warn { background: var(--card); border: 1.5px solid var(--line); color: var(--coral-ink); }
.btn-good { background: var(--primary-soft); color: var(--primary-d); }
.btn-sm { font-size: 13.5px; padding: 10px 13px; border-radius: 11px; }
/* ---- poll builder ---- */
.poll-block { border: 1.5px solid var(--line); border-radius: 14px; padding: 0; margin-top: 14px; background: var(--card); overflow: hidden; }
/* 항목 헤더 띠 — 후보 목록과 위계를 분리 */
.poll-block .poll-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
background: var(--primary-soft);
border-bottom: 1.5px solid color-mix(in srgb, var(--primary) 22%, var(--line));
padding: 12px 13px;
}
.poll-block .poll-head::before {
content: "🗳 투표 항목"; flex-basis: 100%;
font-size: 10.5px; font-weight: 900; letter-spacing: .8px;
color: var(--primary-d);
}
.poll-block .poll-head .ptitle {
flex: 1; font-weight: 800; font-size: 16px;
background: var(--card); color: var(--ink);
border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}
.poll-block .poll-head .icon-btn { background: var(--card); }
.poll-block .poll-head .icon-btn:hover { background: var(--coral-soft); color: var(--coral-ink); }
.poll-block .cands { padding: 13px 13px 0; }
.poll-block .row-actions { padding: 0 13px 14px; margin-top: 11px; }
.cand-row { display: flex; gap: 8px; margin-top: 8px; }
.cand-row input { flex: 1; background: var(--field); font-size: 15px; }
.icon-btn {
background: color-mix(in srgb, var(--line) 60%, var(--card)); color: var(--muted);
border-radius: 10px; padding: 0 14px; font-size: 18px; line-height: 46px; font-weight: 700;
}
.icon-btn:hover { background: var(--coral-soft); color: var(--coral-ink); }
.row-actions { margin-top: 12px; }
.tip { font-size: 12px; color: var(--muted); margin: 10px 2px 0; display: flex; align-items: center; gap: 6px; justify-content: center; }
.tip b { color: var(--primary-d); }
/* ---- code / qr ---- */
.code-box {
text-align: center; padding: 16px 10px 14px; margin-top: 8px;
background: linear-gradient(150deg, var(--primary-soft), color-mix(in srgb, var(--coral-soft) 55%, var(--card)));
border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, var(--line));
}
.code-box .code-label { color: var(--primary-d); font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.code-box .code {
font-size: 42px; font-weight: 900; letter-spacing: 8px;
color: var(--ink); font-variant-numeric: tabular-nums;
}
.qr { display: block; margin: 15px auto; width: 200px; height: 200px; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 8px; }
.share-link { word-break: break-all; font-size: 12.5px; color: var(--muted); text-align: center; }
.save-note {
display: flex; gap: 9px; align-items: flex-start; margin-top: 12px;
background: var(--coral-soft); border-radius: 12px; padding: 11px 12px;
color: var(--coral-ink); font-size: 12.5px; font-weight: 600; line-height: 1.45;
}
.save-note .ic { flex: none; font-size: 14px; line-height: 1.3; }
/* ---- done view: 단계 안내 ---- */
.done-top { text-align: center; padding: 10px 0 2px; }
.done-top .done-badge { font-size: 42px; animation: pop .4s cubic-bezier(.22,1.5,.36,1); }
.done-top h1 { margin: 6px 0 4px; }
.card.step { margin-top: 14px; }
.step-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 5px; }
.step-num { width: 25px; height: 25px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: var(--on-primary); background: linear-gradient(150deg, var(--primary), var(--primary-d)); box-shadow: var(--shadow-s); }
.stack { width: 100%; margin-top: 9px; }
/* ---- status pill ---- */
.status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 900; padding: 5px 13px; border-radius: 999px; }
.status-open { background: var(--primary-soft); color: var(--primary-d); }
.status-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.status-closed { background: color-mix(in srgb, var(--line) 55%, var(--card)); color: var(--muted); }
.status-closed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
/* ---- results / bars ---- */
.result-poll { margin-top: 20px; }
.result-poll h2 { display: flex; justify-content: space-between; align-items: baseline; }
.result-poll h2 .vt { font-size: 12px; color: var(--muted); font-weight: 700; }
.bar-row { margin: 9px 0; padding: 10px 12px; border-radius: 13px; background: var(--field); border: 1.5px solid transparent; }
.bar-top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 7px; }
.bar-top .nm { font-weight: 800; }
.bar-top .vt { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.bar-track { background: color-mix(in srgb, var(--line) 70%, var(--card)); border-radius: 999px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 62%, var(--primary-d))); border-radius: 999px; transition: width .5s cubic-bezier(.22,1,.36,1); }
.bar-row.lead { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.bar-row.lead .bar-fill { background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.bar-row.lead .nm::after { content: " 👑"; }
.tie-badge { display: inline-block; font-size: 10.5px; font-weight: 900; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 6px; padding: 1px 7px; margin-left: 7px; vertical-align: 1px; }
.tally-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 12px; border: 1.5px dashed var(--line); border-radius: 13px; margin-top: 16px; }
.tally-empty .em { font-size: 30px; display: block; margin-bottom: 8px; }
/* ---- vote choices + progress ---- */
.vote-progress { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.vote-progress .pbar { flex: 1; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.vote-progress .pbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-d)); transition: width .35s cubic-bezier(.22,1,.36,1); }
.vote-progress .pcount { font-size: 12.5px; font-weight: 800; color: var(--primary-d); font-variant-numeric: tabular-nums; }
.choice {
display: flex; align-items: center; gap: 12px;
border: 2px solid var(--line); border-radius: 14px;
padding: 15px; margin-top: 9px; cursor: pointer; background: var(--card);
font-size: 16px; font-weight: 600;
transition: transform .1s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.choice:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.choice.selected {
border-color: var(--primary);
background: var(--primary-soft);
font-weight: 800;
box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 20%, transparent);
}
.choice .radio { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.choice.selected .radio { border-color: var(--primary); background: var(--primary); }
.choice.selected .radio::after { content: "✓"; color: var(--on-primary); font-size: 13px; font-weight: 900; line-height: 1; }
/* ---- confirm sheet ---- */
.sheet-scrim { position: fixed; inset: 0; background: rgba(15,25,20,.4); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.sheet-scrim.show { opacity: 1; pointer-events: auto; }
.vote-sheet {
position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
width: 100%; max-width: 640px; background: var(--card);
border-radius: 22px 22px 0 0; box-shadow: 0 -14px 44px rgba(23,42,34,.22);
border-top: 1px solid var(--line); padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
transition: transform .28s cubic-bezier(.22,1,.36,1); z-index: 61;
}
.vote-sheet.show { transform: translate(-50%, 0); }
.vote-sheet .grip { width: 40px; height: 4px; border-radius: 9px; background: var(--line); margin: 0 auto 14px; }
.vote-sheet h2 { margin: 0 0 4px; }
.vote-sheet .warn { color: var(--coral-ink); font-size: 12.5px; font-weight: 700; margin: 0 0 14px; }
.review-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-radius: 12px; background: var(--field); font-size: 15px; margin-top: 8px; }
.review-row .rk { color: var(--muted); font-weight: 700; font-size: 13px; }
.review-row .rv { font-weight: 800; }
/* ---- present (projector) overlay ---- */
.present-overlay {
position: fixed; inset: 0; z-index: 80; display: none;
background: radial-gradient(130% 90% at 50% 0%, #14312a, #08150f);
color: var(--stage-ink); padding: 30px 20px;
flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center;
}
.present-overlay.show { display: flex; }
.present-overlay .plabel { font-size: 13px; font-weight: 800; letter-spacing: 3px; color: var(--stage-accent); text-transform: uppercase; }
.present-overlay .pttl { font-size: clamp(18px, 4vw, 28px); font-weight: 800; color: var(--stage-ink); }
.present-overlay .pcode { font-size: clamp(56px, 15vw, 128px); font-weight: 900; letter-spacing: .12em; font-variant-numeric: tabular-nums; line-height: 1; }
.present-overlay .pqr { width: clamp(180px, 40vw, 300px); height: auto; border-radius: 16px; background: #fff; padding: 12px; }
.present-overlay .pfoot { font-size: 14px; color: #8fc5b6; font-weight: 600; }
.present-overlay .pclose { position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,.12); color: var(--stage-ink); width: 44px; height: 44px; border-radius: 50%; font-size: 20px; padding: 0; }
/* ---- big message ---- */
.big-msg { text-align: center; padding: 34px 12px; }
.big-msg .emoji { font-size: 54px; animation: pop .4s cubic-bezier(.22,1.5,.36,1); }
@keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.big-msg h1 { margin-top: 12px; }
/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px); background: var(--ink); color: var(--card); padding: 13px 20px; border-radius: 13px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---- misc ---- */
footer.site { text-align: center; color: var(--muted); font-size: 12px; margin-top: 28px; }
footer.site a { color: var(--muted); }
.divider { height: 0; margin: 18px 0; border: 0; border-top: 1.5px dashed var(--line); }
.spread { display: flex; gap: 10px; }
.spread > * { flex: 1; }
/* ---- 사다리 타기 ---- */
.count-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.count-lab { font-weight: 800; font-size: 13px; }
.stepper { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-d); font-size: 20px; font-weight: 900; padding: 0; }
.count-num { font-size: 18px; font-weight: 900; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.ll-cols { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 8px; margin-top: 16px; font-size: 11px; font-weight: 900; letter-spacing: .5px; color: var(--muted); }
.ll-cols span:last-child { text-align: right; }
.pair-row { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 8px; align-items: center; margin-top: 8px; }
.pair-row input { width: 100%; font-size: 15px; }
.pair-arrow { text-align: center; color: var(--muted); font-weight: 800; }
.ll-top, .ll-bottom { display: grid; gap: 5px; }
.ll-top { margin-bottom: 6px; }
.ll-bottom { margin-top: 6px; }
.ll-name, .ll-result { border: 2px solid var(--line); border-radius: 10px; padding: 9px 4px; font-size: 12.5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--field); }
.ll-name { font-weight: 800; color: var(--ink); cursor: pointer; }
.ll-name.on { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.ll-result { font-weight: 700; }
.ll-result.hit { border-color: var(--c); color: var(--c); font-weight: 900; background: color-mix(in srgb, var(--c) 14%, var(--card)); }
.ll-svg { margin: 2px 0; }
/* ---- 랜덤 뽑기 ---- */
.rng-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-top: 10px; }
.rng-field .k { display: block; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.rng-tilde { font-size: 20px; font-weight: 900; color: var(--muted); padding-bottom: 12px; }
.num-input { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.switch-row input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.pick-stage { text-align: center; }
.pick-display { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; min-height: 116px; padding: 8px 0 18px; }
.pick-num { font-size: 60px; font-weight: 900; color: var(--primary-d); font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; }
.pick-num.settle { animation: pop .35s cubic-bezier(.22,1.5,.36,1); }
.pick-chip { font-size: 32px; font-weight: 900; color: var(--primary-d); background: var(--primary-soft); border-radius: 14px; padding: 8px 16px; font-variant-numeric: tabular-nums; }
.pick-chip.settle { animation: pop .35s cubic-bezier(.22,1.5,.36,1); }
.pick-ph { font-size: 46px; font-weight: 900; color: var(--line); }
.drawn-wrap { margin-top: 16px; text-align: left; }
.drawn-head { font-size: 12.5px; font-weight: 800; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.linkbtn { background: none; color: var(--coral-ink); font-size: 12px; font-weight: 800; padding: 2px 6px; margin-left: auto; }
.drawn-list { display: flex; flex-wrap: wrap; gap: 6px; }
.drawn-chip { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 4px 11px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
/* ---- 결과 발표(개표쇼) ---- */
.btn-celebrate {
width: 100%; margin-top: 10px; color: #7a4d00;
background: linear-gradient(150deg, var(--gold), var(--gold-2));
box-shadow: 0 8px 18px color-mix(in srgb, var(--gold) 45%, transparent);
}
.btn-celebrate:hover { filter: brightness(1.04); }
.reveal-overlay {
position: fixed; inset: 0; z-index: 85; display: none;
flex-direction: column; align-items: center; justify-content: center;
padding: 28px 20px; color: var(--stage-ink); overflow: hidden;
background: radial-gradient(130% 90% at 50% 0%, #163a30, #08130f);
}
.reveal-overlay.show { display: flex; }
.rv-inner { width: 100%; max-width: 560px; text-align: center; z-index: 2; }
.rv-poll-idx { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--stage-accent); min-height: 16px; }
.rv-title { font-size: clamp(22px, 5vw, 34px); font-weight: 900; margin: 4px 0 2px; }
.rv-count { font-size: 14px; font-weight: 800; color: #9fd8c6; font-variant-numeric: tabular-nums; margin-bottom: 20px; }
.rv-bars { display: flex; flex-direction: column; gap: 13px; }
.rv-bar { text-align: left; }
.rv-bar .rvt { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(15px, 3.6vw, 19px); font-weight: 800; margin-bottom: 6px; }
.rv-bar .rvv { font-variant-numeric: tabular-nums; color: #bfe9dc; }
.rv-track { height: 22px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.rv-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2fd0a6, var(--stage-accent)); transition: width .16s linear; }
.rv-bar.lead .rv-fill { background: linear-gradient(90deg, #f5b833, #f59e0b); }
.rv-bar.lead .rvn::after { content: " 👑"; }
.rv-bar.win .rv-fill { background: linear-gradient(90deg, #ffd76b, #f59e0b); box-shadow: 0 0 20px rgba(245,180,51,.6); }
.rv-winner { margin-top: 22px; font-size: clamp(20px, 4.6vw, 30px); font-weight: 900; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s cubic-bezier(.22,1.5,.36,1); }
.rv-winner.show { opacity: 1; transform: scale(1); }
.rv-winner .who { color: #ffd76b; }
.rv-controls { position: absolute; bottom: 24px; display: flex; gap: 12px; z-index: 2; }
.rv-controls .btn-line, .rv-controls .btn-primary { width: auto; white-space: nowrap; padding: 13px 24px; }
.rv-controls .btn-line { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: var(--stage-ink); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti i { position: absolute; top: -24px; width: 9px; height: 15px; border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(112vh) rotate(560deg); opacity: .85; } }
/* ---- 답변 모으기 (보드) ---- */
.wrap.wide { max-width: 980px; }
textarea.ta {
width: 100%; font-family: inherit; font-size: 16px; line-height: 1.5; padding: 13px 14px;
border: 1.5px solid var(--line); border-radius: 12px;
background: var(--field); color: var(--ink); outline: none; resize: vertical;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
textarea.ta::placeholder { color: var(--muted); opacity: .8; }
textarea.ta:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft); }
.ta-count { text-align: right; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
/* 보드 조작 버튼 — 좁은 화면에서 어절이 잘리지 않게 두 칸씩 접는다 */
.ctrl-row { flex-wrap: wrap; }
.ctrl-row > button { word-break: keep-all; }
@media (max-width: 560px) { .ctrl-row > button { flex: 1 1 44%; } }
/* 질문 띠 (투표의 항목 헤더와 같은 결) */
.q-band {
background: var(--primary-soft); color: var(--primary-d);
border-radius: 13px; padding: 13px 15px; margin-bottom: 14px;
font-size: 17px; font-weight: 900; letter-spacing: -0.3px;
word-break: keep-all; overflow-wrap: anywhere;
}
.ans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; align-items: start; }
.ans-card {
background: var(--field); border: 1.5px solid var(--line); border-radius: 14px;
padding: 11px 12px 12px;
}
.ans-card.in { animation: ans-in .34s cubic-bezier(.22,1,.36,1); }
@keyframes ans-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.ac-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.ac-name { font-size: 11.5px; font-weight: 900; color: var(--primary-d); letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-hide {
background: transparent; color: var(--muted); padding: 0; width: 22px; height: 22px; flex: none;
border-radius: 7px; font-size: 15px; line-height: 1; opacity: .45;
}
.ac-hide:hover { background: var(--coral-soft); color: var(--coral-ink); opacity: 1; }
.ac-text { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.hidden-box { margin-top: 14px; }
.hidden-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--field); margin-top: 8px; }
.hidden-row .hr-name { font-size: 12px; font-weight: 900; color: var(--muted); flex: none; }
.hidden-row .hr-text { flex: 1; font-size: 13.5px; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.hidden-row button { flex: none; }
.mine-box { margin-top: 4px; padding: 13px 14px; border-radius: 13px; background: var(--field); border: 1.5px solid var(--line); }
.mine-label { font-size: 11.5px; font-weight: 900; color: var(--primary-d); letter-spacing: .2px; margin-bottom: 5px; }
.mine-text { font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ---- 그림 맞히기 ---- */
.code-input {
text-align: center; letter-spacing: 6px; font-weight: 900; font-size: 22px;
text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.dr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-chip {
flex: 1 1 auto; min-width: 84px; padding: 10px 12px; border-radius: 13px;
background: var(--field); border: 1.5px solid var(--line); color: var(--ink);
font-size: 14px; font-weight: 800; line-height: 1.25; text-align: center; cursor: pointer;
}
.dr-chip span { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-top: 3px; }
.dr-chip.on {
background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.dr-chip.on span { color: var(--primary-d); }
/* 내 이름 — 들어간 뒤에도 바꿀 수 있어야 한다(별명을 잘못 적고 시작하는 일이 흔하다) */
.dr-me { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dr-me[hidden] { display: none; }
.dr-me-lab { font-size: 12px; font-weight: 900; color: var(--muted); flex: none; }
.dr-me-name { flex: 1; font-size: 15px; font-weight: 900; word-break: keep-all; }
.dr-me input { flex: 1; min-width: 0; margin: 0; }
.dr-me button { flex: none; width: auto; }
.dr-me-note { font-size: 12px; color: var(--muted); flex: none; }
.dr-lobby-head {
display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px;
padding-top: 14px; border-top: 1.5px dashed var(--line);
}
.dr-lobby-head b { font-size: 15px; font-weight: 900; }
.dr-lobby-head span { font-size: 12.5px; color: var(--muted); word-break: keep-all; }
.dr-lobby-players { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-lp {
padding: 8px 13px; border-radius: 999px; background: var(--primary-soft);
color: var(--primary-d); font-size: 13.5px; font-weight: 800; word-break: keep-all;
}
.dr-lp.off { background: var(--field); color: var(--muted); opacity: .6; }
.dr-bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--card); border: 1.5px solid var(--line); border-bottom: none;
border-radius: 16px 16px 0 0; padding: 11px 15px;
}
.dr-round { font-size: 12.5px; font-weight: 900; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.dr-word {
flex: 1; text-align: center; font-size: 20px; font-weight: 900; letter-spacing: 2px;
color: var(--ink); word-break: keep-all; overflow-wrap: anywhere;
}
.dr-word.mine { color: var(--primary-d); letter-spacing: 1px; }
.dr-wordlen { font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: 0; margin-left: 7px; }
/* 선생님 노트북은 대개 TV에 비친다. 그리는 사람이 선생님일 때만 낱말을 덮는다. */
.as-teacher .dr-word.mine, .as-teacher .dr-picks, .as-teacher .dr-own-row input {
filter: blur(10px); user-select: none;
}
.as-teacher.peek .dr-word.mine, .as-teacher.peek .dr-picks, .as-teacher.peek .dr-own-row input { filter: none; }
.dr-peek {
flex: none; width: auto; padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 900;
background: var(--gold-soft); color: var(--gold-ink); border: 1.5px solid var(--gold);
}
.dr-time { flex: none; font-size: 15px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.dr-timebar { height: 6px; background: var(--line); overflow: hidden; }
.dr-timebar i { display: block; height: 100%; background: var(--primary); transition: width .2s linear; }
.dr-timebar i.hot { background: var(--coral); }
/* 눈치 띠 — 시간 막대 바로 아래. 노릴 순번은 그리는 내내 보여야 한다. */
.dr-nunchi {
background: var(--gold-soft); color: var(--gold-ink); border: 1.5px solid var(--gold); border-top: none;
padding: 6px 13px; font-size: 13px; font-weight: 800; text-align: center;
word-break: keep-all; overflow-wrap: anywhere;
}
.dr-nunchi b { font-weight: 900; font-size: 15px; }
.dr-nunchi.taken { background: var(--field); color: var(--muted); border-color: var(--line); }
.dr-panel .dr-nunchi { border-radius: 11px; border-top: 1.5px solid var(--gold); margin-bottom: 10px; flex: none; }
.dr-panel .dr-nunchi.taken { border-top-color: var(--line); }
/* 두 배 판 띠 — 눈치 띠와 같은 자리, 색만 다르게(둘 다 켜지면 위아래로 붙는다). */
.dr-double {
background: var(--coral-soft); color: var(--coral-ink); border: 1.5px solid var(--coral); border-top: none;
padding: 6px 13px; font-size: 13px; font-weight: 900; text-align: center;
word-break: keep-all; overflow-wrap: anywhere;
}
.dr-panel .dr-double { border-radius: 11px; border-top: 1.5px solid var(--coral); margin-bottom: 10px; flex: none; }
/* 두 배 판 알람 — 판이 열릴 때만 잠깐. 캔버스를 덮되 누를 것은 없다. */
.dr-flash {
position: fixed; inset: 0; display: grid; place-items: center; z-index: 95;
opacity: 0; pointer-events: none; transition: opacity .18s;
background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.dr-flash.show { opacity: 1; }
.dr-flash-card {
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: var(--card); border: 3px solid var(--coral); border-radius: 20px;
padding: 22px 34px; box-shadow: var(--shadow); text-align: center;
transform: scale(.85); transition: transform .22s cubic-bezier(.2, 1.5, .4, 1);
}
.dr-flash.show .dr-flash-card { transform: scale(1); }
.dr-flash-card span { font-size: 34px; line-height: 1; }
.dr-flash-card b { font-size: 26px; font-weight: 900; color: var(--coral-ink); }
.dr-flash-card small { font-size: 13px; font-weight: 700; color: var(--muted); word-break: keep-all; }
@media (prefers-reduced-motion: reduce) {
.dr-flash-card { transition: none; transform: none; }
.dr-flash.show .dr-flash-card { transform: none; }
}
.dr-stage { display: flex; flex-direction: column; gap: 12px; }
.dr-canvas-wrap {
position: relative; display: grid; place-items: center;
background: var(--field); border: 1.5px solid var(--line); border-top: none;
border-radius: 0 0 16px 16px; overflow: hidden;
}
.dr-canvas-wrap canvas { box-shadow: 0 0 0 1px var(--line); }
/* 크기는 fitCanvas 가 px 로 정한다. 남는 높이에 4:3 을 맞추는 계산은 CSS 로는 안 선다
(aspect-ratio 와 max-height 를 같이 주면 둘 중 하나가 찌그러진다). */
.dr-canvas-wrap canvas { display: block; touch-action: none; cursor: crosshair; background: #fff; }
.dr-veil {
position: absolute; inset: 0; display: none; place-items: center; text-align: center;
background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(2px);
font-size: 15px; font-weight: 800; color: var(--muted); padding: 20px; word-break: keep-all;
}
.dr-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
/* 한 반이 다 들어오면 이름표가 세로를 다 먹는다(28명에서 373px = 폰 화면의 44%).
옆으로 밀어 보는 한 줄로 두고, 세로는 그림과 정답칸에 준다. */
.dr-scores { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; flex: none; padding-bottom: 2px; }
.dr-sc {
display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 11px;
background: var(--field); border: 1.5px solid transparent; font-size: 13px; font-weight: 800;
flex: none; white-space: nowrap;
}
/* 이름표를 다 훑지 않아도 판이 어디까지 왔는지 보이게 */
.dr-sc-sum {
flex: none; display: flex; align-items: center; padding: 7px 11px; border-radius: 11px;
background: var(--primary-soft); color: var(--primary-d); font-size: 13px; font-weight: 900;
white-space: nowrap; position: sticky; left: 0;
}
.dr-sc.drawing { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.dr-sc.ok { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
.dr-sc.off { opacity: .45; }
.dr-sc-name { word-break: keep-all; }
.dr-sc-pt { font-variant-numeric: tabular-nums; opacity: .8; }
.dr-kick {
background: transparent; color: var(--muted); padding: 0; width: 18px; height: 18px;
border-radius: 6px; font-size: 13px; line-height: 1; opacity: .4;
}
.dr-kick:hover { background: var(--coral-soft); color: var(--coral-ink); opacity: 1; }
.dr-chat {
flex: 1; min-height: 180px; max-height: 320px; overflow-y: auto;
background: var(--field); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px;
}
.dr-msg { font-size: 13.5px; line-height: 1.5; margin: 3px 0; word-break: keep-all; overflow-wrap: anywhere; }
.dr-msg b { color: var(--primary-d); }
.dr-msg.sys { color: var(--muted); font-size: 12.5px; }
.dr-msg.correct { color: var(--primary-d); font-weight: 900; }
.dr-msg.close { color: var(--gold-ink); font-weight: 800; }
.dr-msg.nunchi { color: var(--gold-ink); font-weight: 900; }
.dr-msg.double { color: var(--coral-ink); font-weight: 900; }
.dr-msg.me { color: var(--muted); font-style: normal; }
.dr-say { display: flex; gap: 8px; }
/* 이 앱의 기본 버튼은 폭 100%다. flex 줄 안에서는 되돌려야 입력칸이 안 짓눌린다. */
.dr-say input, .dr-own-row input { flex: 1; min-width: 0; margin: 0; }
.dr-say button, .dr-own-row button { flex: none; width: auto; padding-left: 20px; padding-right: 20px; }
.dr-tools {
display: flex; flex-direction: column; gap: 7px; margin-top: 10px;
background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 9px 11px;
}
.dr-tool-row { display: flex; align-items: center; gap: 7px; overflow-x: auto; }
/* 채우기가 늘어 아랫줄 단추가 다섯이다. 옆으로 밀면 [이 판 넘기기]가 화면 밖에 숨는다 —
폰에서는 밀지 말고 접어 내린다(윗줄 색·굵기는 그대로 밀리는 편이 낫다). */
.dr-tool-row + .dr-tool-row { flex-wrap: wrap; overflow-x: visible; }
.dr-tool-row > * { flex: none; }
.dr-tools .btn-sm { padding: 8px 11px; font-size: 12.5px; white-space: nowrap; }
.dr-tools .dr-sep { width: 1.5px; align-self: stretch; background: var(--line); margin: 0 2px; }
.dr-colors, .dr-widths { display: flex; gap: 5px; }
.dr-color {
width: 26px; height: 26px; border-radius: 8px; padding: 0; border: 2px solid transparent;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); cursor: pointer;
}
.dr-color.on { border-color: var(--ink); transform: scale(1.08); }
.dr-width {
width: 28px; height: 26px; border-radius: 8px; padding: 0; display: grid; place-items: center;
background: var(--field); border: 1.5px solid var(--line);
}
.dr-width i { display: block; border-radius: 50%; background: var(--ink); }
.dr-width.on { border-color: var(--primary); background: var(--primary-soft); }
#eraserBtn.on, #fillBtn.on, #wantBtn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
/* ★가운데 정렬만으로는 판이 화면보다 커졌을 때 위가 잘린다 — 순위판에서 1등이 사라졌다.
흘러넘칠 때도 위를 안 자르는 건 margin:auto 뿐이다(가운데 정렬은 브라우저마다 다르게 자른다). */
.dr-overlay {
position: fixed; inset: 0; z-index: 60; display: none; padding: 20px; overflow-y: auto;
background: rgba(12, 20, 17, .55); backdrop-filter: blur(3px);
}
.dr-overlay.show { display: flex; }
.dr-panel {
width: 100%; max-width: 420px; margin: auto; background: var(--card); border-radius: 20px;
padding: 24px 22px; box-shadow: var(--shadow); text-align: center;
max-height: calc(100dvh - 40px); display: flex; flex-direction: column;
animation: dr-pop .25s cubic-bezier(.22,1,.36,1);
}
/* 판 안에서는 목록만 줄어든다 — 제목과 아래 단추가 눌리면 안 된다. */
.dr-panel > * { flex: none; }
.dr-panel .dr-rank, .dr-panel .dr-gains, .dr-panel .dr-picks { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
@keyframes dr-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.dr-panel h2 { margin: 4px 0 14px; font-size: 21px; word-break: keep-all; }
.dr-panel-eyebrow { font-size: 11.5px; font-weight: 900; letter-spacing: 1px; color: var(--primary-d); }
.dr-picks { display: flex; flex-direction: column; gap: 8px; }
.dr-pick {
padding: 15px; border-radius: 14px; background: var(--field); border: 1.5px solid var(--line);
color: var(--ink); font-size: 18px; font-weight: 900; cursor: pointer; word-break: keep-all;
}
.dr-pick:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-d); }
.dr-own { margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--line); text-align: left; }
.dr-own label { display: block; font-size: 12px; font-weight: 900; color: var(--muted); margin-bottom: 6px; }
.dr-own-row { display: flex; gap: 8px; }
.dr-answer { font-size: 32px; letter-spacing: 2px; color: var(--primary-d); }
.dr-gains { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.dr-gain {
display: flex; justify-content: space-between; padding: 9px 13px; border-radius: 11px;
background: var(--primary-soft); color: var(--primary-d); font-size: 14px; font-weight: 800;
}
/* 한 반이 다 들어오면 28줄이다. 목록만 밀어 보고 1등과 아래 단추는 늘 자리에 있게 한다. */
.dr-rank { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; min-height: 0; overflow-y: auto; }
.dr-rank-row {
display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
background: var(--field); font-size: 15px; font-weight: 800;
}
/* 이름을 win 으로 둔다 — top 은 이 앱에서 머리말(header.top)이 이미 쓰는 이름이다. */
.dr-rank-row.win { background: var(--gold-soft); color: var(--gold-ink); }
.dr-rank-row.me { outline: 2px solid var(--primary); outline-offset: -2px; }
.dr-rank-me { flex: none; font-size: 11px; font-weight: 900; color: var(--primary-d); }
.dr-rank-i { flex: none; width: 24px; font-size: 17px; }
.dr-rank-n { flex: 1; text-align: left; word-break: keep-all; }
/* 폭만 보면 폰 가로(844x390)가 세로 배치로 떨어져 그림이 띠처럼 눌린다.
누운 화면이면 폭이 좁아도 두 열로 세운다. */
@media (min-width: 860px), (min-aspect-ratio: 3/2) {
.dr-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 28%, 300px); }
.dr-canvas-wrap { border-radius: 0 0 16px 16px; }
.dr-chat { max-height: none; }
/* 넓은 화면에서는 이름표를 접어 보여도 세로가 남는다. 대신 절반을 넘지 않게. */
.dr-scores { flex-wrap: wrap; overflow-x: visible; overflow-y: auto; max-height: 42%; }
.dr-sc-sum { position: static; }
}
/* ---- 놀이판은 한 화면에 든다 ----
★그림과 정답칸이 같이 보여야 맞히기가 성립한다. 예전엔 폭만 보고 캔버스를 키워서,
노트북(1440x900)에서도 폰(390x844)에서도 정답 입력칸이 처음부터 화면 밖에 있었다. */
body.dr-playing { overflow: hidden; }
/* 놀이 중에는 폭 상한을 푼다 — 980px 로 묶어 두면 남는 세로가 있는데도 그림이 못 큰다. */
body.dr-playing .wrap {
/* 키보드가 뜨면 보이는 높이가 줄어든다. 그 값을 JS 가 --vv-h 로 넣어 준다. */
height: var(--vv-h, 100dvh); max-width: none;
transform: translateY(var(--vv-top, 0px));
display: flex; flex-direction: column; padding-bottom: 6px;
}
body.dr-playing header.top { flex: none; }
body.dr-playing footer.site { display: none; }
body.dr-playing #playView { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.dr-playing .dr-bar, body.dr-playing .dr-timebar, body.dr-playing .dr-tools,
body.dr-playing .dr-nunchi, body.dr-playing .dr-double { flex: none; }
body.dr-playing .dr-stage { flex: 1; min-height: 0; }
body.dr-playing .dr-canvas-wrap { flex: 1; min-height: 0; }
/* ★max-height 로 두면 말이 쌓일 때마다 칸이 자라 그림이 위로 밀린다(늘어나는 것처럼 보인다).
자리를 처음부터 잡아 두면 0줄이든 60줄이든 판이 안 움직이고 안쪽만 스크롤된다. */
body.dr-playing .dr-side { flex: none; height: 46%; }
body.dr-playing .dr-chat { flex: 1; min-height: 0; max-height: none; }
body.dr-playing .dr-say { flex: none; }
/* 그리는 사람에게 필요한 건 도구다. 남의 오답은 곁눈으로 보는 정도로 줄인다. */
body.dr-playing.dr-drawer .dr-side { height: 28%; }
/* 정답을 치는 동안은 그림보다 방금 친 말이 중요하다. 남는 자리를 채팅에 더 준다. */
body.dr-playing.typing .dr-side { height: 64%; }
@media (min-width: 860px), (min-aspect-ratio: 3/2) {
/* ⚠️격자에서는 flex:1 이 안 먹는다. 줄 높이를 안 묶으면 줄이 내용(캔버스)만큼 커지고,
캔버스는 다시 그 줄에서 크기를 받아 화면 밖으로 자란다. */
body.dr-playing .dr-stage { grid-template-rows: minmax(0, 1fr); }
.dr-tools { flex-direction: row; align-items: center; overflow-x: auto; }
.dr-tools .dr-tool-row { overflow: visible; }
body.dr-playing .dr-side { height: 100%; }
body.dr-playing.dr-drawer .dr-side, body.dr-playing.typing .dr-side { height: 100%; }
}
/* ---- 화면 공유 (교사 쪽) ---- */
.sc-warn {
display: flex; gap: 9px; margin-top: 14px; padding: 12px 14px;
background: var(--coral-soft); border-radius: 13px;
font-size: 12.5px; line-height: 1.5; color: var(--coral-ink);
word-break: keep-all; overflow-wrap: anywhere;
}
.sc-warn .ic { flex: none; }
.sc-warn b { font-weight: 900; }
.sc-live { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.sc-dot {
width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--coral);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 60%, transparent);
animation: sc-pulse 1.6s ease-out infinite;
}
@keyframes sc-pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sc-live-txt { font-size: 15px; font-weight: 900; color: var(--coral-ink); word-break: keep-all; }
.sc-modepill {
margin-left: auto; flex: none; font-size: 11px; font-weight: 900; padding: 3px 10px;
border-radius: 999px; background: var(--primary-soft); color: var(--primary-d);
}
.sc-modepill.slow { background: var(--gold-soft); color: var(--gold-ink); }
.sc-stats { display: flex; gap: 8px; }
.sc-stat {
flex: 1; text-align: center; padding: 10px 6px; border-radius: 13px; background: var(--field);
}
.sc-stat b { display: block; font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sc-stat span { font-size: 11px; font-weight: 800; color: var(--muted); }
.sc-preview {
position: relative; margin-top: 12px; border-radius: 13px; overflow: hidden;
background: var(--stage); border: 1.5px solid var(--line); min-height: 120px;
touch-action: none; /* 영역을 끌 때 페이지가 같이 스크롤되면 못 고른다 */
}
.sc-preview img { width: 100%; height: auto; display: block; }
.sc-preview.picking { cursor: crosshair; }
/* 고른 칸 바깥을 덮어, 무엇이 빠지는지 바로 보이게 한다 */
.sc-crop {
position: absolute; pointer-events: none;
border: 2px solid var(--primary);
background: color-mix(in srgb, var(--primary) 10%, transparent);
box-shadow: 0 0 0 9999px rgba(6, 20, 16, .55);
}
.sc-pvtip {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
background: rgba(6, 20, 16, .82); color: var(--stage-ink); border-radius: 999px;
padding: 8px 16px; font-size: 13px; font-weight: 800; pointer-events: none; white-space: nowrap;
}
#cropBtn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
.sc-qlabel { display: block; font-size: 13px; font-weight: 800; margin: 16px 0 7px; }
/* ---- 화면 공유 (학생 쪽) ---- */
body.watching { background: var(--stage); overflow: hidden; overscroll-behavior: none; }
/* 세로 폰이면 화면 아래에, 가로로 넓으면 오른쪽에 채팅을 세운다.
어느 쪽이든 채팅이 화면을 덮지 않는 게 규칙이다. */
/* 키보드가 뜨면 보이는 영역이 줄어든다. 그 높이를 JS가 --vv-h 로 넣어 준다.
inset:0 으로 두면 판이 키보드 뒤로 들어가 화면이 통째로 밀린다. */
.sc-view {
position: fixed; left: 0; right: 0; top: 0;
height: var(--vv-h, 100vh);
transform: translateY(var(--vv-top, 0px));
display: flex; flex-direction: column;
}
/* 세로 폰: 화면은 그림 높이만큼만 차지하고, 남는 자리는 전부 채팅에 준다.
화면을 세로 가운데 두면 위아래로 죽은 검은 띠가 생겨 폰에서 손해가 크다. */
.sc-main { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* 55vh 로 두면 키보드가 떠도 안 줄어서 입력줄이 화면 밖으로 밀린다. 보이는 높이를 기준으로 잡는다. */
.sc-stage {
flex: 1; min-height: 0; max-height: calc(var(--vv-h, 100vh) * 0.45); position: relative;
display: grid; place-items: center; overflow: hidden; background: var(--stage);
}
body.chat-off .sc-main { flex: 1; min-height: 0; }
body.chat-off .sc-stage { max-height: none; }
/* 돌려 보기: 판을 90도 돌리고 가로 배치로 세운다.
폭과 높이가 뒤바뀌므로 화면 비율로 거는 미디어쿼리가 안 걸린다. 배치를 여기서 직접 준다. */
body.mode-rot .sc-view {
width: var(--vv-h, 100vh);
height: 100vw;
transform-origin: top left;
transform: translateY(var(--vv-top, 0px)) rotate(90deg) translateY(-100%);
flex-direction: row;
}
body.mode-rot .sc-main { flex: 1; min-width: 0; min-height: 0; }
body.mode-rot .sc-stage { max-height: none; }
body.mode-rot .sc-stage #frame { width: auto; height: auto; max-width: 100%; max-height: 100%; }
body.mode-rot .sc-chat {
flex: none; width: clamp(190px, 30%, 300px); height: auto; min-height: 0;
border-top: 0; border-left: 1px solid var(--stage-line);
}
.sc-stage #frame { width: 100%; height: auto; max-height: calc(var(--vv-h, 100vh) * 0.45); object-fit: contain; display: block; }
body.chat-off .sc-stage #frame { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* 크게: 가로 두 배로 늘려 훑어본다. 가운데 정렬로 두면 왼쪽으로 넘친 부분에 스크롤이 안 닿는다. */
.sc-stage.zoom { overflow: auto; place-items: start start; }
.sc-stage.zoom #frame { width: 200%; height: auto; max-width: none; max-height: none; }
/* 가로: 그림만 돌리면 글씨가 누워서 못 읽는다. 판을 통째로 돌려, 폰을 눕히면
영상 왼쪽·채팅 오른쪽으로 바로 서게 한다(회전 잠금을 켜 둔 폰에서도 된다). */
.sc-msg { display: grid; gap: 10px; text-align: center; padding: 28px 22px; color: var(--stage-muted); }
.sc-msg .em { font-size: 46px; }
.sc-msg .tx { font-size: 15px; font-weight: 700; word-break: keep-all; line-height: 1.5; }
/* ⚠️단추가 늘면서(수행평가까지 여섯) 폰 390px 에서 서로를 짓눌렀다 —
「크 게」 「가 로」 「수행평 가」로 글자가 세로로 쪼개진다.
눌리는 대신 옆으로 흐르게 둔다. 손가락으로 밀어 쓰는 줄이다. */
.sc-bar {
flex: none; height: 54px;
display: flex; align-items: center; justify-content: flex-start; gap: 8px;
padding: 0 12px; background: var(--stage-card); border-top: 1px solid var(--stage-line);
overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.sc-bar::-webkit-scrollbar { display: none; }
.sc-bar button {
flex: none; white-space: nowrap;
padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 800;
background: rgba(255, 255, 255, .1); color: var(--stage-ink);
}
/* 넓으면 가운데로 모은다. 좁을 때만 왼쪽부터 흐른다. */
@media (min-width: 560px) { .sc-bar { justify-content: center; } }
.sc-bar .sc-mode.on { background: var(--stage-accent); color: var(--stage-on-accent); }
.sc-bar .sc-full { padding: 9px 14px; font-size: 16px; }
.sc-chatbtn { position: relative; }
.sc-bar .sc-chatbtn.on { background: var(--stage-accent); color: var(--stage-on-accent); }
.sc-badge {
position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: var(--coral); color: #3a1206;
font-size: 11px; font-weight: 900; font-style: normal; line-height: 18px; text-align: center;
}
/* ---- 수업 채팅 (학생 쪽) ---- */
.sc-chat {
flex: 1 1 auto; min-height: 130px; position: relative; container-type: inline-size;
display: flex; flex-direction: column;
background: var(--stage); border-top: 1px solid var(--stage-line);
}
body.chat-off .sc-chat { display: none; }
/* 가로가 넉넉하면 방송 화면처럼 오른쪽에 세운다 */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
.sc-view { flex-direction: row; }
.sc-main { flex: 1; min-width: 0; }
.sc-stage { max-height: none; }
.sc-stage #frame { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.sc-chat {
flex: none; height: auto; width: clamp(230px, 25vw, 330px);
border-top: 0; border-left: 1px solid var(--stage-line);
}
}
.sc-chat-head {
flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
border-bottom: 1px solid var(--stage-line); color: var(--stage-ink); font-size: 13px;
}
.sc-chat-head b { font-weight: 900; }
.sc-here { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--stage-muted); font-variant-numeric: tabular-nums; }
.sc-lockpill { font-size: 11px; font-weight: 900; color: #ffb59d; background: #3a1a12; border-radius: 999px; padding: 2px 9px; }
/* 방 전체가 몰려서 서버가 천천히 받는 중. 잠긴 것과는 다른 색으로 구분한다. */
.sc-rushpill { font-size: 11px; font-weight: 900; color: #f6d98a; background: #3a3116; border-radius: 999px; padding: 2px 9px; }
/* 한 줄에 이름과 말이 이어지는 촘촘한 흐름. 방송 채팅처럼 아래에서 쌓여 올라간다.
(justify-content:flex-end 로 하면 넘칠 때 위쪽으로 스크롤이 안 닿는다. 안쪽 상자를 밀어 올린다.) */
.sc-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; overscroll-behavior: contain; display: flex; flex-direction: column; }
.sc-msgs-in { margin-top: auto; }
.sc-msgs .sc-m {
font-size: 13.5px; line-height: 1.42; padding: 2px 0;
color: var(--stage-ink); word-break: keep-all; overflow-wrap: anywhere;
}
.sc-msgs .sc-m .tx { white-space: pre-wrap; }
.sc-msgs .sc-m .nm { font-weight: 900; }
.sc-msgs .sc-m .cl { color: var(--stage-dim); margin-right: 4px; }
.sc-msgs .sc-m.ask { background: rgba(246, 194, 75, .09); border-radius: 6px; padding: 3px 6px; margin: 2px -6px; }
.sc-msgs .sc-m.tea { background: rgba(255, 156, 129, .1); border-radius: 6px; padding: 3px 6px; margin: 2px -6px; }
.sc-msgs .sc-m.pin { box-shadow: inset 2px 0 0 #f6c24b; padding-left: 8px; }
/* 같은 사람이 이어서 하는 말. 이름을 안 적는 대신 안쪽으로 들여 한 덩이로 보인다. */
.sc-msgs .sc-m.cont { padding-left: 10px; }
.sc-msgs .sc-m .rep { font-style: normal; font-size: 11px; font-weight: 900; color: var(--stage-muted); margin-left: 5px; }
.sc-empty { color: var(--stage-dim); font-size: 12.5px; text-align: center; padding: 20px 10px; line-height: 1.7; }
.sc-newpill {
position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 3;
background: var(--stage-accent); color: var(--stage-on-accent); font-size: 12px; font-weight: 900;
padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
/* ---- 질문 모드 (학생 쪽) ---- */
.sc-tabbtn {
background: rgba(255, 255, 255, .1); color: var(--stage-ink);
font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px;
}
.sc-act { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.sc-q {
background: var(--stage-soft); color: var(--stage-ink); border-radius: 11px; padding: 11px 13px;
font-size: 14.5px; font-weight: 800; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere;
}
.sc-mine {
display: flex; gap: 8px; background: var(--stage-card); border: 1px solid var(--stage-edge);
border-radius: 10px; padding: 9px 11px; font-size: 13.5px; line-height: 1.45;
}
.sc-mine .k { color: var(--stage-accent); font-weight: 900; flex: none; }
.sc-mine .v { color: var(--stage-ink); word-break: keep-all; overflow-wrap: anywhere; }
.sc-mine .sc-fix {
flex: none; width: auto; align-self: flex-start; margin-left: auto;
background: var(--stage); border: 1px solid var(--stage-edge); color: var(--stage-accent);
border-radius: 9px; padding: 9px 13px; font-size: 12.5px; font-weight: 800;
}
.sc-act .sc-answers { display: flex; flex-direction: column; gap: 6px; }
.sc-act .sc-ans { background: var(--stage); border-radius: 9px; padding: 8px 11px; font-size: 13px; line-height: 1.45; }
.sc-act .sc-ans .nm { color: var(--stage-accent); font-weight: 900; margin-right: 7px; }
.sc-act .sc-ans .tx { color: var(--stage-ink); word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.sc-act-note { color: var(--stage-dim); font-size: 12px; text-align: center; padding: 2px 0 6px; word-break: keep-all; }
/* ── 담벼락 (무대) ─────────────────────────────────────────
무대 위에 얹는다. 영상 캔버스의 display 는 안 건드린다 — 만지면 전송 경로가 조용히 어긋난다. */
.sc-stage.wallon { flex: none; height: calc(var(--vv-h, 100vh) * 0.58); max-height: none; }
.sc-board {
position: absolute; inset: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain;
background: var(--stage); display: flex; flex-direction: column; text-align: left;
}
.sc-board-head {
position: sticky; top: 0; z-index: 1; background: var(--stage);
padding: 10px 12px 8px; border-bottom: 1px solid var(--stage-line);
display: flex; flex-direction: column; gap: 7px;
}
.sc-board-q { font-size: 15px; font-weight: 900; color: var(--stage-ink); line-height: 1.4; word-break: keep-all; }
.sc-board-sub { display: flex; gap: 8px; font-size: 11.5px; color: var(--stage-muted); }
.sc-board-sub span + span::before { content: "·"; margin-right: 8px; }
.sc-board-post { display: flex; gap: 6px; }
/* 붙이기 칸은 여러 줄이다 — 열 고개처럼 줄로 나눈 글을 붙여넣는다. 높이는 스크립트가 내용만큼 늘린다. */
.sc-board-post textarea {
flex: 1; min-width: 0; font: inherit; font-size: 16px; line-height: 1.45; color: var(--stage-ink);
background: var(--stage-card); border: 1.5px solid var(--stage-edge); border-radius: 10px; padding: 9px 11px;
resize: none; overflow-y: auto; max-height: 132px;
}
.sc-board-post textarea:disabled { opacity: .55; }
.sc-board-post button {
font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap;
background: var(--stage-accent); color: var(--stage-on-accent); border: 0; border-radius: 10px; padding: 9px 15px; cursor: pointer;
}
.sc-board-post button:disabled { opacity: .45; cursor: not-allowed; }
.sc-board-grid {
flex: none; padding: 10px 12px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px;
/* 쪽지 길이가 제각각이다. start 가 없으면 짧은 쪽지가 옆의 긴 쪽지 높이까지 늘어나 빈 상자로 보인다. */
align-content: start; align-items: start;
}
.sc-card {
background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px; padding: 10px 11px;
box-shadow: 0 1px 2px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 6px;
}
.sc-card.mine { border-color: var(--stage-accent); background: var(--stage-soft); }
.sc-card .hd { display: flex; align-items: center; gap: 6px; }
.sc-card .av {
width: 20px; height: 20px; border-radius: 50%; flex: none;
display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--stage-on-accent);
}
.sc-card .nm { font-size: 11.5px; font-weight: 800; color: var(--stage-muted); }
.sc-card .me { font-size: 10.5px; font-weight: 800; color: var(--stage-accent); margin-left: auto; }
.sc-card .tx { font-size: 13.5px; line-height: 1.5; color: var(--stage-ink); word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.sc-board-empty { grid-column: 1 / -1; text-align: center; color: var(--stage-dim); font-size: 12.5px; padding: 20px 0; }
.sc-board-note { padding: 0 12px 12px; color: var(--stage-dim); font-size: 11.5px; line-height: 1.5; word-break: keep-all; }
/* 교사 활동 카드의 담벼락 — 학생이 보는 것과 같은 모양. 다른 것은 가리기 단추뿐이다. */
.sc-tans.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; align-items: start; }
.sc-tans.board .sc-card .hd { align-items: center; }
.sc-tans.board .sc-card .sc-m-btn { margin-left: auto; }
.sc-tans.board .sc-card.hid { opacity: .45; }
/* 빔에 쏘는 담벼락 */
.present-overlay.wall-only .pqr,
.present-overlay.wall-only .pjoin { display: none; }
/* 쪽지가 늘면 아래로 자라야 한다. 가운데 맞추면 한 장 붙을 때마다 판 전체가 위로 움직인다. */
.present-overlay.wall-only { align-items: flex-start; justify-content: flex-start; padding: 5vh 4vw; }
/* 빔 판. 머리(주제)는 고정하고 아래 두 칸이 각자 스크롤한다 — 쪽지가 길어져도 채팅이 안 밀린다. */
.present-overlay .pwall { width: 100%; height: 88vh; display: flex; flex-direction: column; text-align: left; }
.present-overlay .pwall-body { flex: 1; min-height: 0; display: flex; gap: 24px; margin-top: 4px; }
.present-overlay .pwall-chat {
flex: none; width: clamp(240px, 24vw, 400px); min-height: 0;
display: flex; flex-direction: column;
border-left: 1px solid rgba(127, 233, 200, .18); padding-left: 20px;
}
.present-overlay .pwall-chat-h {
flex: none; font-size: clamp(13px, 1.3vw, 16px); font-weight: 900; letter-spacing: 2px;
color: var(--stage-accent); text-transform: uppercase; padding-bottom: 8px;
}
.present-overlay .pwall-chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.present-overlay .pwc {
font-size: clamp(14px, 1.4vw, 19px); line-height: 1.45; color: var(--stage-ink);
word-break: keep-all; overflow-wrap: anywhere;
}
/* ⚠️pre-wrap 은 글자 칸에만 건다. 칸 전체에 걸면 마크업의 줄바꿈·들여쓰기가 그대로 찍혀
여러 줄짜리 말의 첫 줄이 밀려 보인다. */
.present-overlay .pwc .tx { white-space: pre-wrap; }
/* 이름을 한 줄 위에 둔다. 여러 줄짜리 말이 오면 첫 줄만 이름만큼 들여써져 삐뚤어 보인다. */
.present-overlay .pwc .nm { display: block; font-weight: 900; font-size: clamp(12px, 1.2vw, 15px); margin-bottom: 2px; }
.present-overlay .pwc.ask { background: rgba(246, 194, 75, .1); border-radius: 8px; padding: 4px 8px; }
.present-overlay .pwc.tea { background: rgba(255, 156, 129, .1); border-radius: 8px; padding: 4px 8px; }
.present-overlay .pwc-empty { color: #6f8b80; font-size: clamp(13px, 1.2vw, 16px); }
.present-overlay .pwall-q { font-size: clamp(22px, 3.2vw, 38px); font-weight: 900; color: var(--stage-ink); line-height: 1.35; word-break: keep-all; }
.present-overlay .pwall-sub { margin-top: 6px; font-size: clamp(13px, 1.4vw, 17px); color: #8fc5b6; }
.present-overlay .pwall-grid {
flex: 1; min-width: 0; overflow-y: auto; padding-top: 14px;
display: grid; gap: 12px; align-content: start; align-items: start;
grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 22vw, 320px), 1fr));
}
.present-overlay .pwall-grid .sc-card { padding: 14px 16px; border-radius: 14px; gap: 8px; }
.present-overlay .pwall-grid .sc-card .av { width: 26px; height: 26px; font-size: 13px; }
.present-overlay .pwall-grid .sc-card .nm { font-size: clamp(12px, 1.2vw, 15px); }
.present-overlay .pwall-grid .sc-card .tx { font-size: clamp(15px, 1.6vw, 21px); line-height: 1.5; }
/* 투표 선택지 */
.sc-opts { display: flex; flex-direction: column; gap: 7px; }
.sc-opt {
width: 100%; text-align: left; font-size: 14.5px; font-weight: 800; line-height: 1.4;
padding: 12px 14px; border-radius: 11px;
background: var(--stage-card); border: 1.5px solid var(--stage-edge); color: var(--stage-ink);
word-break: keep-all; overflow-wrap: anywhere;
}
.sc-opt:disabled { opacity: .75; cursor: default; }
.sc-opt.mine { border-color: var(--stage-accent); background: var(--stage-soft); color: var(--stage-ink); }
.sc-opt.mine::after { content: " ✓"; color: var(--stage-accent); font-weight: 900; }
.sc-opt.res { display: block; opacity: 1; }
.sc-opt-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.sc-opt-top b { flex: none; color: var(--stage-accent); font-variant-numeric: tabular-nums; }
.sc-opt.res .bar-track { background: rgba(255, 255, 255, .1); height: 10px; }
/* .bar-fill 은 원래 div 로 쓰던 규칙이라 display 가 없다. i 로 쓰면 인라인이라 폭이 안 먹는다. */
.sc-opt.res .bar-fill, .sc-tres .bar-fill { display: block; }
.sc-opt.res .bar-fill { background: var(--stage-accent); }
.sc-opt.res.mine::after { display: none; }
.sc-opt.res.mine .sc-opt-top span::before { content: "✓ "; color: var(--stage-accent); font-weight: 900; }
.sc-opt.res.top .bar-fill { background: linear-gradient(90deg, #ffd76b, #f5b833); }
.sc-opt.res.top .sc-opt-top b { color: #f6c24b; }
/* ---- 질문 모드 (교사 쪽) ---- */
.sc-actbar { display: flex; gap: 8px; }
.sc-actbar input { flex: 1; min-width: 0; }
.sc-actbar button { flex: none; width: auto; padding: 13px 18px; }
.sc-actstat { font-size: 13px; font-weight: 800; color: var(--primary-d); margin: 10px 0; }
.sc-tans {
display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto;
background: var(--field); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 12px;
}
.sc-tans .sc-ans {
flex: none;
display: flex; align-items: baseline; gap: 8px; background: var(--card);
border-radius: 10px; padding: 8px 11px; font-size: 14px; line-height: 1.45;
}
.sc-tans .sc-ans.hid { opacity: .45; }
.sc-tans .sc-ans.hid .tx { text-decoration: line-through; }
.sc-tans .sc-ans .nm { flex: none; font-size: 12.5px; font-weight: 900; color: var(--primary-d); }
.sc-tans .sc-ans .tx { flex: 1; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.sc-missing {
margin-top: 10px; font-size: 12.5px; color: var(--coral-ink); line-height: 1.5;
word-break: keep-all; overflow-wrap: anywhere;
}
#qReveal.on, #inkAllowBtn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
/* 몰입 보기: 아이폰 사파리에는 전체화면 API 가 없다. 브라우저를 못 숨기니 우리 판이라도 비운다. */
body.immersive .sc-bar, body.immersive .sc-chat { display: none; }
body.immersive .sc-main { flex: 1; min-height: 0; }
body.immersive .sc-stage { max-height: none; }
body.immersive .sc-stage #frame { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* 밑줄 긋기 — 손가락으로 그을 때 화면이 같이 스크롤되면 못 긋는다 */
.sc-stage.inking #frame { touch-action: none; cursor: crosshair; }
.sc-seatrow { flex: none; display: flex; gap: 6px; padding: 8px 12px 0; }
.sc-seatrow input {
font-size: 16px; padding: 9px 12px;
/* ⚠️여기 테두리는 보여야 한다 — 이름을 넣는 칸이 어디인지가 이것 하나로 갈린다.
verify-screen 56 이 채팅판 바탕과의 대비 3:1 을 잰다. */
background: var(--stage-card); border-color: var(--stage-edge); color: var(--stage-ink);
}
.sc-seatrow #seatNo { width: 68px; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.sc-seatrow #seatName { flex: 1; min-width: 0; }
.sc-seatrow button { flex: none; width: auto; padding: 10px 14px; font-size: 13.5px; background: var(--stage-soft); color: var(--stage-accent); }
.sc-mechip {
flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 0;
font-size: 12px; font-weight: 800; color: var(--stage-accent);
}
.sc-mechip button { background: transparent; color: var(--stage-muted); font-size: 11.5px; font-weight: 800; padding: 2px 6px; }
.sc-say { display: flex; gap: 6px; align-items: flex-end; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
.sc-say :is(input, textarea) { flex: 1; min-width: 0; }
.sc-say button { flex: none; width: auto; padding: 11px 13px; }
/* 채팅칸도 여러 줄이다(Shift+Enter). ⚠️textarea 는 기본 글꼴이 고정폭이라 물려받게 못 박는다.
높이는 스크립트가 내용만큼 늘린다(네 줄까지). */
.sc-say textarea {
width: 100%; font: inherit; font-size: 16px; line-height: 1.45; padding: 13px 14px;
border: 1.5px solid var(--line); border-radius: 12px;
background: var(--field); color: var(--ink); outline: none;
resize: none; overflow-y: auto; max-height: 96px;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sc-chat .sc-say :is(input, textarea) {
font-size: 16px; padding: 10px 12px;
background: var(--stage-card); border-color: var(--stage-edge); color: var(--stage-ink);
}
/* 힌트 글씨가 테마 변수(--muted)를 따라가고 있었다. 학생 판은 늘 어두운데 그 변수는 기기 테마를
따라가서, 라이트 모드 폰에서는 어두운 회색이 검은 칸에 얹혀 3.02:1 이 됐다. 여기서 못 박는다. */
.sc-chat :is(input, textarea)::placeholder,
.sc-seatrow input::placeholder { color: var(--stage-muted); opacity: 1; }
.sc-chat :is(input, textarea):focus,
.sc-seatrow input:focus {
border-color: var(--stage-accent); background: var(--stage-raised);
box-shadow: 0 0 0 3px rgba(127, 233, 200, .18);
}
.sc-chat .sc-say :is(input, textarea):disabled { opacity: .5; }
.sc-chat .sc-say button:disabled { opacity: .5; }
.sc-chat .sc-say #askBtn { background: var(--coral-soft); color: var(--coral); font-size: 16px; }
.sc-chat .sc-say .sc-send { background: var(--stage-accent); color: var(--stage-on-accent); font-size: 13.5px; }
/* 폰을 눕히면 채팅 칸이 좁아진다. 그때는 입력칸을 한 줄 통째로 준다. */
@container (max-width: 300px) {
.sc-chat .sc-say { flex-wrap: wrap; }
.sc-chat .sc-say :is(input, textarea) { flex: 1 1 100%; }
.sc-chat .sc-say button { flex: 1 1 auto; }
}
/* 화면 아래 도구 줄 — 성격이 다른 버튼이 한 줄에 섞이면 무엇이 상태고 무엇이 동작인지 안 보인다.
보낼 곳 / 밑줄 / 중지로 묶고, 크기를 낮춰 미리보기가 주인공이 되게 한다. */
.tool-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 10px;
}
.tool-group {
display: flex; align-items: center; gap: 6px;
background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; padding: 5px 8px;
}
.tool-label { font-size: 11.5px; font-weight: 900; color: var(--muted); letter-spacing: .2px; }
.tool-btn {
padding: 7px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 800;
background: var(--card); border: 1.5px solid transparent; color: var(--ink);
white-space: nowrap;
}
.tool-btn:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.tool-btn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
.tool-btn.warn { color: var(--coral-ink); }
.tool-btn.warn:hover { border-color: var(--coral); background: var(--coral-soft); }
.tool-btn.strong { background: var(--coral-soft); border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
.tool-btn.ico { padding: 7px 10px; font-size: 15px; line-height: 1; }
.tool-gap { flex: 1; }
.tool-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tool-meta b { color: var(--ink); }
/* 화질은 세 갈래 중 하나라 세그먼트로 붙여 둔다 */
.seg { display: flex; background: var(--field); border: 1.5px solid var(--line); border-radius: 11px; padding: 3px; gap: 3px; }
.seg .dr-chip {
flex: none; min-width: 0; padding: 6px 12px; border-radius: 8px; font-size: 12.5px;
background: transparent; border: 0; color: var(--muted);
}
.seg .dr-chip.on { background: var(--card); color: var(--primary-d); box-shadow: var(--shadow-s); }
/* 접히는 카드 머리 */
.card-fold {
width: 100%; display: flex; align-items: center; gap: 10px;
background: none; padding: 0 0 4px; text-align: left; color: inherit;
}
.card-fold h2 { margin: 0; flex: none; }
.fold-note { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--primary-d); }
.fold-i { flex: none; color: var(--muted); font-size: 13px; transition: transform .15s ease; }
.card-fold.folded .fold-i { transform: rotate(-90deg); }
.card-fold:hover .fold-i { color: var(--primary); }
.card-body { padding-top: 8px; }
/* ---- 수업 중 대시보드 (교사 노트북) ---- */
/* 세로로 쭉 쌓으면 수업 중에 채팅과 활동을 보려고 스크롤을 해야 한다.
준비(코드·QR)는 한 번뿐이니 위 띠로 접고, 상시로 보는 것만 두 열에 편다. */
.dash { max-width: 1240px; margin: 0 auto; padding: 12px 16px 40px; }
/* 상단 띠 — 왼쪽은 「지금 누구와 어느 방에서」, 오른쪽은 행동.
★방 코드는 이 화면에서 가장 큰 모노다. 학생 서른 명이 그것만 보고 들어온다. */
.dash-top {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 9px 14px; margin-bottom: 14px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.dash-name { font-weight: 700; font-size: 13.5px; color: var(--muted); letter-spacing: -0.2px; }
.dash-code {
font-family: var(--mono); font-weight: 700; font-size: 21px; letter-spacing: .13em;
color: var(--primary-d); background: none; border-radius: 0; padding: 0;
}
.dash-stat { font-size: 13px; font-weight: 600; color: var(--muted); }
.dash-stat b { font-family: var(--mono); font-weight: 700; color: var(--ink); margin-right: 3px; }
.dash-stat.quiet b { color: var(--ink); }
.dash-top .sc-modepill { margin-left: 0; }
.dash-gap { flex: 1; }
.dash-top button { width: auto; }
#pairToggle.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
.dash-panel {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px; margin-bottom: 12px;
}
.dash-pairbox { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.dash-pairside { flex: 1; min-width: 240px; }
/* 무대가 주인공이다. 반반으로 나누면 「지금 반 전체에 나가는 것」이 옆칸과 같은 무게가 된다. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.dash-card { margin-top: 0; padding: 18px; }
.dash-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dash-meta {
display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
margin-top: 10px; font-size: 12.5px; color: var(--muted);
}
.dash-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-meta #modeNote { flex: 1; min-width: 160px; }
/* 채팅은 남는 높이를 먹어 가장 길게 */
.card.dash-card.grow { display: flex; flex-direction: column; }
/* 접이 머리 밑에 몸통이 하나 더 끼었다. 그 몸통이 늘어나지 않으면 말 칸이 남는 높이를 못 먹는다. */
.card.dash-card.grow > .card-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.card.dash-card.grow > .card-body[hidden] { display: none; }
.sc-tmsgs.grow { max-height: min(44vh, 440px); min-height: 220px; flex: 1; }
/* 창이 좁으면 한 줄로 쌓는다 */
@media (max-width: 900px) {
.dash-grid { grid-template-columns: 1fr; }
.dash-top { position: static; }
}
/* ---- 폰 리모컨 붙이기 ---- */
.sc-pair { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-pair-help { flex: 1; min-width: 180px; font-size: 12px; color: var(--muted); word-break: keep-all; }
.sc-pair-on { text-align: center; padding: 6px 0 2px; }
.sc-pin {
font-size: clamp(38px, 10vw, 54px); font-weight: 900; letter-spacing: .18em;
color: var(--primary-d); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.sc-pin-note { font-size: 12.5px; color: var(--muted); font-weight: 700; }
/* 투표 만들기 */
.sc-optrow { display: flex; gap: 8px; margin-top: 8px; }
.sc-optrow input { flex: 1; min-width: 0; font-size: 15px; }
.sc-optrow button { flex: none; width: auto; padding: 10px 13px; background: var(--field); color: var(--muted); }
.sc-tres { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sc-tres .row { font-size: 14px; }
.sc-tres .top { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 5px; }
.sc-tres .top b { color: var(--primary-d); font-variant-numeric: tabular-nums; }
/* 폰 리모컨 화면 */
.sc-rc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sc-rc-top .sc-here { margin-left: auto; color: var(--muted); }
/* ---- 들어온 학생(출석) ---- */
.sc-seats {
display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto;
background: var(--field); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px;
}
/* 「새 말」 알림을 목록 위에 띄우려면 기준 상자가 있어야 한다. */
.sc-tmsgs-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sc-newpill.t {
bottom: 12px; background: var(--primary); color: var(--stage-on-accent);
box-shadow: 0 6px 16px rgba(0, 0, 0, .25); cursor: pointer; border: 0;
}
.sc-seat-head { font-size: 12px; font-weight: 900; color: var(--primary-d); }
.sc-seat {
flex: none;
display: flex; align-items: center; gap: 10px; padding: 7px 10px;
border-radius: 10px; background: var(--card); border: 1.5px solid transparent;
}
.sc-seat.off { opacity: .45; }
.sc-seat.muted { background: var(--coral-soft); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.sc-seat-no {
width: 30px; flex: none; text-align: center; font-size: 12.5px; font-weight: 900;
color: var(--muted); font-variant-numeric: tabular-nums;
}
.sc-seat-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; word-break: keep-all; }
/* ---- 수업 채팅 (교사 쪽) ---- */
.sc-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.sc-tools button { flex: 1; }
#lockBtn.on { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-ink); }
.sc-tmsgs {
max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
background: var(--field); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px;
}
.sc-tmsgs .sc-m { flex: none; border-radius: 12px; padding: 9px 11px; background: var(--card); border: 1.5px solid transparent; }
.sc-tmsgs .sc-m.ask { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.sc-tmsgs .sc-m.tea { background: var(--primary-soft); }
.sc-tmsgs .sc-m.pin { border-color: var(--gold); }
.sc-tmsgs .sc-m.hid { opacity: .45; }
.sc-tmsgs .sc-m.cont { margin-top: -4px; }
/* 이어지는 말은 이름을 흐리게 — 눈은 건너뛰되, 누가 한 말인지는 끝까지 남는다 */
.sc-tmsgs .sc-m.cont .sc-m-name { color: var(--muted); font-weight: 800; }
.sc-m-rep { font-size: 11px; font-weight: 900; color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; padding: 1px 7px; }
/* 자동 감속 중이라는 띠. 교사가 채팅 카드를 보고 있으면 바로 눈에 든다. */
.sc-rushbar {
font-size: 12.5px; font-weight: 800; line-height: 1.5; color: var(--gold-ink);
background: var(--gold-soft); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
word-break: keep-all;
}
.sc-tmsgs .sc-m.hid .sc-m-text { text-decoration: line-through; }
.sc-m-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sc-m-top .sc-m-name { font-size: 12.5px; font-weight: 900; color: var(--primary-d); }
.sc-m-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-m-btn {
background: transparent; color: var(--muted); padding: 2px 7px; border-radius: 7px;
font-size: 12px; font-weight: 800; line-height: 1.4;
}
.sc-m-btn[data-act="pin"] { margin-left: auto; font-size: 15px; color: var(--gold-ink); }
/* 되돌릴 수 없는 것 하나가 흔한 것 셋과 같은 무게로 서 있으면 손이 잘못 간다.
좌석 지우기는 그 학생이 이름을 다시 등록해야 한다. 색으로 갈라 둔다. */
.sc-m-btn[data-act="drop"] { color: var(--coral-ink); opacity: .75; }
.sc-m-btn[data-act="drop"]:hover { opacity: 1; }
.sc-m-btn:hover { background: var(--coral-soft); color: var(--coral-ink); }
.sc-tmsgs .sc-m-text { font-size: 14.5px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.sc-tmsgs .sc-empty { color: var(--muted); }
.card .sc-say { padding: 10px 0 0; }
/* 아래는 버튼과 입력칸으로 꽉 차 있다. 안내는 비어 있는 위쪽에 띄운다. */
body.watching .toast { top: calc(14px + env(safe-area-inset-top, 0px)); bottom: auto; }
/* 가로로 보는 중에는 판이 돌아가 있다. 안내만 똑바로 서 있으면 눕힌 폰에서 못 읽는다. */
body.mode-rot .toast,
body.mode-rot .toast.show {
top: 50%; left: 50%; bottom: auto;
transform: translate(-50%, -50%) rotate(90deg);
max-width: 70vh;
}
/* ---- 지난 수업 기록 (records.html) ---- */
.rec-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rec-row {
display: grid; grid-template-columns: minmax(150px, auto) 1fr auto;
grid-template-areas: "when title num" "when act act";
gap: 4px 14px; align-items: center;
background: var(--field); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.rec-when { grid-area: when; display: flex; flex-direction: column; gap: 2px; }
.rec-when b { font-size: 14px; font-weight: 900; }
.rec-when span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.rec-title { grid-area: title; font-size: 15px; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
.rec-num { grid-area: num; font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.rec-act { grid-area: act; display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 620px) {
.rec-row { grid-template-columns: 1fr; grid-template-areas: "when" "title" "num" "act"; }
.rec-act { justify-content: flex-start; }
}
.rec-detail-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rec-detail-top h2 { margin: 0; flex: 1; word-break: keep-all; }
.rec-detail-top button { flex: none; width: auto; }
.rec-act-box {
background: var(--field); border: 1.5px solid var(--line); border-radius: 14px;
padding: 14px; margin: 12px 0;
}
.rec-act-box .q-band { margin-bottom: 12px; }
.rec-act-box .sc-ans {
display: flex; gap: 8px; background: var(--card); border-radius: 10px;
padding: 8px 11px; margin-top: 6px; font-size: 14px; line-height: 1.45;
}
.rec-act-box .sc-ans .nm { flex: none; font-size: 12.5px; font-weight: 900; color: var(--primary-d); }
.rec-act-box .sc-ans .tx { flex: 1; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.rec-act-box .sc-ans.hid { opacity: .45; }
.rec-bar { margin-top: 10px; font-size: 14px; }
.rec-bar .top { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 5px; }
.rec-bar .top b { color: var(--primary-d); font-variant-numeric: tabular-nums; }
.rec-bar .bar-fill { display: block; }
.dash-link { display: inline-flex; align-items: center; text-decoration: none; }
/* ---- 수업방 시작 화면 ---- */
.start-card { padding: 26px 22px; }
/* a 로 만든 보조 버튼도 버튼처럼 서게 한다(패딩·가운데정렬·밑줄 없음이 안 따라온다) */
a.btn-line, a.btn-primary, a.btn-warn, a.btn-ghost {
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none; font-family: inherit; font-size: 15px; font-weight: 800;
padding: 14px 18px; border-radius: 12px; cursor: pointer;
}
a.btn-line.btn-sm { font-size: 13.5px; padding: 10px 13px; border-radius: 11px; }
a.stack { display: flex; }
/* 무엇이 되나. ⚠️이모지를 아이콘으로 쓰지 않는다 — 기기마다 다르게 그려진다. */
.start-what {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px;
margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line);
}
.start-what svg { width: 20px; height: 20px; display: block; }
.start-what h3 { font-size: 14px; font-weight: 700; margin: 10px 0 0; }
.start-what p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 5px 0 0; }
/* ⚠️허브는 소개가 다섯 줄이라 네 칸에 딱 안 맞는다. 칸 폭을 정해 두고 줄 수는 내용에 맡긴다. */
@media (min-width: 760px) {
.start-what { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
/* ---- 발표 화면 ---- */
.present-overlay .pcode { font-size: clamp(44px, 12vw, 104px); }
.present-overlay .pqr { width: clamp(110px, 20vw, 170px); }
/* ── 빔 화면 (스킨 「무대」 6단계) ─────────────────────────────
교실 뒤 3m 에서 읽히는 것이 이 화면의 유일한 일이다. 사는 것은 코드와 QR 둘뿐.
⚠️찍을 카메라가 없는 교실이 있어서(노트북 교실·저학년 폰 없는 반) 손으로 치는 길을 같이 둔다. */
.present-overlay.qr-only { padding: 0; gap: 0; background: var(--stage); align-items: stretch; }
.pbeam {
flex: 1; min-height: 0; display: flex; flex-direction: column;
padding: min(4vmin, 52px) min(5vmin, 64px); text-align: left; gap: min(3vmin, 32px);
}
/* ⚠️닫기 단추(.pclose)가 오른쪽 위 44px 를 차지한다. 비켜 주지 않으면 인원 글자를 덮는다. */
.pbeam-top { flex: none; display: flex; align-items: baseline; gap: 12px;
font-size: clamp(13px, 1.6vmin, 17px); padding-right: 56px; }
.pbeam-brand { font-weight: 800; color: var(--stage-accent); }
.pbeam-class { flex: 1; min-width: 0; color: var(--stage-muted); font-weight: 650; }
.pbeam-here { font-family: var(--mono); color: var(--stage-muted); }
.pbeam-mid {
flex: 1; min-height: 0; display: flex; align-items: center; gap: min(6vmin, 72px);
}
.present-overlay.qr-only .pjoin {
flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.pstep { margin: 0; font-size: clamp(14px, 2vmin, 22px); font-weight: 650; color: var(--stage-muted); }
.pstep + .pcode, .pstep + .purl { margin-top: min(1.4vmin, 14px); }
.present-overlay.qr-only .purl {
font-family: var(--mono); font-size: clamp(16px, 3vmin, 32px); font-weight: 600;
color: var(--stage-ink); overflow-wrap: anywhere; line-height: 1.2;
margin-bottom: min(4vmin, 40px);
}
/* 이 화면에서 가장 큰 글자. 학생 서른 명이 이것만 보고 들어온다. */
.present-overlay.qr-only .pcode {
font-family: var(--mono); font-size: clamp(56px, 13vmin, 132px); font-weight: 800;
letter-spacing: .09em; line-height: 1; color: var(--stage-accent);
}
.pnote { margin: min(3vmin, 30px) 0 0; font-size: clamp(12px, 1.7vmin, 18px); color: var(--stage-dim); }
.pqr-box { flex: none; text-align: center; }
/* ★QR 은 화면 짧은 변의 절반을 넘어야 한다 — 교실 뒤에서 폰 카메라로 찍히는 크기다.
verify-screen 1-b 가 그 비율을 잰다. 두 칸으로 나누면서 깎였던 자리라 값으로 되돌렸다.
⚠️거의 정사각인 화면에서 vw 쪽이 먼저 걸리므로 52vw 로 여유를 준다. */
.present-overlay.qr-only .pqr {
width: min(52vw, 54vh); height: min(52vw, 54vh); max-width: none;
padding: min(2vmin, 18px); border-radius: 18px; background: #fff; display: block;
}
.pqr-box .pnote { margin-top: min(1.6vmin, 14px); }
.pbeam-foot {
flex: none; display: flex; align-items: center; gap: 16px;
border-top: 1px solid var(--stage-line); padding-top: min(2.4vmin, 22px);
font-size: clamp(12px, 1.7vmin, 18px); color: var(--stage-muted);
}
.pbeam-foot #presentMissing { flex: 1; min-width: 0; word-break: keep-all; }
.pbeam-close-hint { color: var(--stage-dim); }
/* 세로로 선 화면(태블릿을 세워 둔 교실)에서는 위아래로 쌓는다.
⚠️여기서도 QR 은 짧은 변(= 가로)의 절반을 넘어야 한다. 쌓으면 세로가 빠듯해지므로
여백과 코드 크기를 같이 줄여 자리를 만든다 — QR 을 깎아서 맞추면 안 된다. */
@media (max-aspect-ratio: 1/1) {
.pbeam { padding: min(3vmin, 32px) min(4vmin, 40px); gap: min(2.4vmin, 24px); }
.pbeam-mid { flex-direction: column; align-items: flex-start; gap: min(2.4vmin, 24px); }
.present-overlay.qr-only .pcode { font-size: clamp(48px, 11vmin, 104px); }
.present-overlay.qr-only .purl { margin-bottom: min(2.4vmin, 24px); }
.pnote { margin-top: min(1.8vmin, 18px); }
.present-overlay.qr-only .pqr { width: min(68vw, 48vh); height: min(68vw, 48vh); }
}
/* ---- 수업방 안에 끼워 열기(?embed=1) ----
곁들여 쓰는 도구는 수업방을 나가지 않고 대시보드 안에서 연다.
그 자리에서는 머리말·바닥글이 두 번 나오므로 접는다. 도구 페이지 자체는 그대로 둔다. */
/* ⚠️요소를 안 적고 .top 만 쓰면 이름이 겹치는 칸이 통째로 사라진다.
순위판 1등 줄(.dr-rank-row.top)이 수업방 안에서만 안 보이던 것이 여기서 왔다. */
.embed header.top, .embed footer.site { display: none; }
.embed .wrap { padding: 2px 2px 8px; max-width: none; }
/* 수업방이 태워 보낸 놀이판은 이미 그 방 학생만 들어와 있다.
또 다른 코드·QR 을 보여 주면 수업방 코드와 헷갈린다. */
.embed #lobbyJoinArea, .embed #lobbyDiv { display: none; }
/* 수업방 안에서 허브로 나가면 판이 통째로 사라진다. 나가는 길은 위 띠의 "수업 화면으로" 하나다. */
.embed #homeBtn { display: none; }
.dash-mini { display: flex; flex-direction: column; gap: 10px; }
.dash-mini iframe {
width: 100%; height: 420px; border: 1.5px solid var(--line); border-radius: 12px;
background: var(--stage); display: block;
}
/* ---- 공유 중 미리보기 ----
미리보기는 확인용이다. 교사가 대시보드를 보는 시간의 대부분은 채팅·활동을 보려는 것인데
그 자리를 미리보기가 먹고 있었다. 기본은 작게, 자르기·밑줄 때만 크게. */
.sc-preview.tiny { max-width: 420px; }
/* 한 열로 접히는 폭에서는 공유 중일 때 화면 카드를 아래로 내린다.
반쪽으로 놓고 자료를 보는 배치에서, 위에 와야 하는 것은 채팅과 활동이다. */
@media (max-width: 900px) {
.dash.sharing .dash-col:first-child { order: 2; }
}
/* ---- 수업방 안의 그림 맞히기 ----
판은 화면을 덮는다. 폰에서 손가락으로 그리려면 이만한 넓이가 필요하다.
숨길 때는 display 만 끈다 — 지우면 소켓이 끊겨 점수와 차례가 날아간다. */
/* ★키보드가 뜨면 iOS 는 창은 그대로 두고 보이는 영역만 줄인다. inset:0 으로 두면
놀이판이 키보드 뒤로 들어가 정답칸이 안 보인다 — 학생 화면(.sc-view)과 같은 처방을 쓴다. */
.sc-game {
position: fixed; left: 0; right: 0; top: 0; height: var(--vv-h, 100dvh);
transform: translateY(var(--vv-top, 0px));
z-index: 70; background: var(--stage); display: flex; flex-direction: column;
}
.sc-game[hidden] { display: none; }
.sc-game-bar {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
background: var(--card); border-bottom: 1.5px solid var(--line);
padding-top: max(8px, env(safe-area-inset-top));
}
.sc-game-note { color: var(--muted); font-size: 12.5px; margin-right: auto; }
.sc-game iframe { flex: 1; width: 100%; border: 0; display: block; }
/* ---- 학생 발표 ----
남의 화면이 반 전체로 나가는 중이다. 띠는 눈에 띄어야 하고, 거두는 단추는 늘 같은 자리에 있어야 한다. */
.dash-present {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 12px; padding: 11px 14px; border-radius: 13px;
background: var(--coral-soft); border: 1.5px solid color-mix(in srgb, var(--coral-ink) 35%, var(--line));
color: var(--coral-ink); font-size: 13.5px; font-weight: 700;
}
.dash-present[hidden] { display: none; }
.dash-present .btn-warn { margin-left: auto; }
.dp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral-ink); flex: none; }
#presentPanel[hidden] { display: none; }
#presentPanel[hidden] { display: none; }
#presentFrame { width: 100%; height: 420px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--stage); display: block; margin-top: 12px; }
/* 발표 손님(학생) 기기에서는 교사 칸을 그리지 않는다. 권한은 서버가 막고, 화면은 여기서 막는다. */
.guest-only .dash-drawer, .guest-only #actCard, .guest-only #chatCard,
.guest-only .stage-seg, .guest-only #presentBtn, .guest-only #endBtn,
.guest-only #pairToggle, .guest-only .dash-link, .guest-only #doneLink,
.guest-only #copyLink, .guest-only .dash-present, .guest-only #presentPanel {
/* JS 가 style.display 를 직접 넣는 카드가 있다. 인라인은 클래스를 이기므로 여기서는 !important 가 필요하다. */
display: none !important;
}
.guest-only .dash-grid { grid-template-columns: 1fr; }
/* 발표를 보러 들어온 교사 화면(?look=1): 화면만 남긴다. */
.look .sc-chat, .look .sc-chatbtn, .look .sc-bar { display: none !important; }
.look .sc-view, .look .sc-main, .look .sc-stage { height: 100%; max-height: none; }
.look .sc-stage { background: var(--stage); }
/* ---- 무대 ----
지금 반 전체에 나가는 것은 하나뿐이다. 내 화면이든 학생이 보내는 것이든 자리는 하나여야
교사가 "지금 뭐가 나가고 있지"를 두 군데서 확인하지 않는다. */
.stage-seg { margin-bottom: 12px; }
.stage-seg .dr-chip { display: flex; align-items: center; gap: 5px; }
#presentBar { margin: 0 0 12px; }
/* ---- 서랍 ----
늘 보고 있을 것이 아니라 필요할 때 꺼내는 것들. 탭이 곧 접기 단추다. */
.dash-drawer {
margin-top: 14px; background: var(--card); border: 1px solid var(--line);
border-radius: 16px; box-shadow: var(--shadow-s); overflow: hidden;
}
.drawer-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1.5px solid var(--line); }
.drawer-tabs .card-fold {
flex: 1 1 auto; width: auto; padding: 14px 16px; border-radius: 0;
border-right: 1.5px solid var(--line); background: var(--field);
}
.drawer-tabs .card-fold:last-child { border-right: 0; }
.drawer-tabs .card-fold:not(.folded) { background: var(--card); box-shadow: inset 0 -3px 0 var(--primary); }
.drawer-tabs .card-fold h2 { font-size: 15px; }
.dash-drawer > .card-body { padding: 18px; }
.dash-drawer > .card-body[hidden] { display: none; }
@media (max-width: 620px) {
.drawer-tabs { flex-direction: column; }
.drawer-tabs .card-fold { border-right: 0; border-bottom: 1.5px solid var(--line); }
.drawer-tabs .card-fold:not(.folded) { box-shadow: inset 3px 0 0 var(--primary); }
}
/* 조용히 중에 바꾼 이름의 자취. 목록엔 새 이름, 채팅엔 옛 이름이 남아 끊기던 연결을 잇는다. */
.sc-seat-was { display: inline-block; margin-left: 6px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--coral-ink); }
/* 사용법 접기. 첫 시간에는 펴서 읽고, 그 뒤로는 자리만 차지하지 않게. */
.tip-fold {
margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted);
word-break: keep-all; overflow-wrap: anywhere;
}
.tip-fold > summary {
cursor: pointer; list-style: none; font-weight: 800; color: var(--primary-d);
padding: 2px 0; width: fit-content;
}
.tip-fold > summary::-webkit-details-marker { display: none; }
.tip-fold > summary::after { content: " ▾"; font-size: 11px; }
.tip-fold[open] > summary::after { content: " ▴"; }
.tip-fold[open] > summary { margin-bottom: 4px; }
/* ── 키보드 초점 ──────────────────────────────────────────
:focus-visible 이라 마우스로 누를 때는 안 뜨고 탭으로 왔을 때만 뜬다.
★팔레트를 갈면 이 값도 다시 재야 한다. 스킨 「무대」의 여섯 바탕
(종이 #f6f8f7 · 흰 카드 · 학생 무대 #0b100e · 학생 카드 #151d19 ·
다크 종이 #0f1512 · 빔 오버레이) 으로 후보 여덟을 재서 #0f8f6c 를 골랐다 —
최저 대비 3.81 로 후보 중 가장 높다(옛 #0b7d5f 는 새 바탕에서 3.37 까지 떨어진다).
⚠️ input 은 위에서 outline:none 을 받아 두어(0-1-1), 같은 특이도로 뒤에 와야 이긴다. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 3px;
}
/* ---- 정기 수업 · 수행평가 ------------------------------------------------
서랍 한 칸이고, 하는 일은 차시를 넘겨 이어 붙이는 것뿐이다.
색과 모서리는 이미 있는 토큰을 그대로 쓴다. */
/* ── 시작 화면 (스킨 「무대」 1단계) ─────────────────────────────
⚠️ .wrap 은 640px 이고 다른 화면 아홉 곳이 함께 쓴다. 여기만 넓힌다 —
안 그러면 두 갈래가 640px 안에서 짓눌린다(입력칸이 10px 로 눌리던 그 자리). */
.wrap-wide { max-width: 900px; }
.start-head { text-align: left; padding: 8px 4px 4px; }
.start-head h1 { font-size: 32px; line-height: 1.18; letter-spacing: -.028em; font-weight: 800; margin: 0; }
.start-head .hint { margin-top: 12px; font-size: 15px; line-height: 1.65; max-width: 560px; }
.start-ways { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0; text-align: left; }
.start-way {
border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; background: var(--card);
display: flex; flex-direction: column;
}
/* 두 칸의 높이가 다르면 단추가 서로 다른 줄에 선다. 마지막 단추를 바닥으로 내려 줄을 맞춘다. */
.start-way > :last-child { margin-top: auto; }
.start-way h2 {
display: flex; align-items: center; gap: 9px;
font-size: 17px; margin: 0; font-weight: 750; letter-spacing: -.015em;
}
.start-way h2 svg { width: 18px; height: 18px; flex: none; }
.start-way .hint { margin: 9px 0 16px; font-size: 13.5px; line-height: 1.62; }
/* ⚠️한 줄 안에 있는 단추까지 100% 로 늘리면 옆의 입력칸을 0 으로 짓눌러 버린다.
칸을 통째로 차지하는 단추만 늘린다. */
.start-way > .btn-primary, .start-way > .btn-line { width: 100%; border-radius: var(--radius-s); }
/* 새 반 만들기 — 단추가 있던 자리에 그대로 선다.
⚠️상자를 두르지 않는다. 흰 카드 안에 테두리 상자를 또 넣으면 겹이 셋이 된다 —
구분은 여백으로 하고, 위에 실선 하나만 그어 앞 내용과 가른다.
⚠️입력칸과 단추를 한 줄에 두지 않는다. 좁은 폭에서 칸이 눌린다(옛 판에서 10px 까지 눌렸다). */
.start-key { max-width: 420px; margin: 0 auto 18px; }
.start-key input { width: 100%; font-size: 17px; padding: 15px 16px; border-radius: var(--radius-s); }
.start-new { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.start-new-lab { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.start-new input { width: 100%; font-size: 17px; padding: 15px 16px; border-radius: var(--radius-s); }
.start-new-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.start-new-act { display: flex; align-items: center; gap: 4px; margin-top: 14px; }
.start-new-act .btn-primary { width: auto; flex: 1; white-space: nowrap; border-radius: var(--radius-s); }
.start-new-act .linkbtn { margin-left: 0; color: var(--muted); font-size: 13.5px; font-weight: 650; padding: 12px 14px; }
.start-new-act .linkbtn:hover { color: var(--ink); }
.start-none { margin: 0 0 10px; font-size: 13px; }
@media (min-width: 760px) { .start-ways { flex-direction: row; } .start-way { flex: 1; min-width: 0; } }
/* 저장해 둔 반. 코드는 모노 — 재는 값과 읽는 글을 눈으로 가른다. */
.start-class {
display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-s);
padding: 13px 15px; margin-bottom: 8px; color: var(--ink); font: inherit;
}
.start-class:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); }
.start-class .sc-n { flex: 1; min-width: 0; }
.start-class .sc-n b { display: block; font-size: 14.5px; font-weight: 700; }
.start-class .sc-n span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.start-class .sc-c {
flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700;
letter-spacing: .1em; color: var(--primary-d);
}
/* ── 평가 안내 한 장 ─────────────────────────────────────────
★학생 화면과 교사 화면이 같은 것을 본다. 결이 갈리면 교사는 학생이 실제로 무엇을
보고 있는지 모른 채 「보이는 줄 알았다」로 한 학기를 간다. */
/* 가로 스크롤은 표에만 준다. 화면 전체가 흔들리면 폰에서 글을 읽을 수 없다. */
.pg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-tb { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.pg-tb th, .pg-tb td { text-align: left; vertical-align: top; padding: 9px 10px;
border-bottom: 1px solid var(--line); word-break: keep-all; overflow-wrap: anywhere; }
.pg-tb thead th { font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 6px 10px;
border-bottom: 1.5px solid var(--line); white-space: nowrap; }
/* 첫 칸은 「무엇을」이고 마지막 칸은 「어떻게」다. 첫 칸이 눌리면 표가 안 읽힌다. */
.pg-tb tbody th { font-weight: 750; min-width: 104px; }
.pg-tb .pg-s { font-family: var(--mono); font-variant-numeric: tabular-nums;
text-align: right; white-space: nowrap; width: 1%; color: var(--primary-d); font-weight: 800; }
.pg-tb tbody th { font-size: 13.5px; }
.pg-tb tfoot th, .pg-tb tfoot td { border-bottom: none; padding-top: 11px; font-weight: 800; }
/* 칸은 낱개로 선다. 「·」로 이어 붙이면 어디서 끊기는지가 안 보인다. */
.pg-its { display: flex; flex-wrap: wrap; gap: 5px; }
.pg-it { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink);
background: var(--field); border-radius: 8px; padding: 3px 8px; }
.pg-it i { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--primary-d); }
/* ⚠️폰에서는 열 넷이 서로를 누른다. 칸 이름이 두 줄씩 접히면 표가 두 배로 길어진다.
좁은 폭에서는 글자와 여백을 조여 한 줄에 들어가게 한다. */
@media (max-width: 460px) {
.pg-tb th, .pg-tb td { padding: 8px 6px; }
.pg-tb tbody th { min-width: 62px; font-size: 12.5px; }
.pg-it { font-size: 11.5px; padding: 2px 6px; gap: 3px; }
.pg-its { gap: 4px; }
.pg-tb thead th { font-size: 10.5px; }
}
.pg-foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.pg-foot b { color: var(--ink); }
/* 본보기 — 「무엇을 적나」가 아니라 <이렇게 적은 것>이다. 실제로 낸 글처럼 보여야 한다. */
.pg-exg { margin-top: 18px; }
.pg-exg:first-child { margin-top: 0; }
.pg-exg h4 { margin: 0 0 9px; font-size: 13px; font-weight: 800; color: var(--muted); }
.pg-ex { border-left: 2px solid var(--line); padding: 0 0 0 12px; margin: 0 0 14px; }
.pg-ex b { display: block; font-size: 13.5px; font-weight: 750; }
.pg-ex b i { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 800;
color: var(--primary-d); margin-left: 6px; }
.pg-ex p { margin: 5px 0 0; font-size: 13px; line-height: 1.65; white-space: pre-wrap;
word-break: keep-all; overflow-wrap: anywhere; }
.pg-none { color: var(--line); }
.pg-sub { margin: 0; padding: 0; list-style: none; }
.pg-sub li { line-height: 1.5; padding-left: 2px; }
/* 카드 안의 곁문 — 단추(주 행동)보다 조용하고, 밖 선반보다 작다.
⚠️단추 아래에 두지 않는다. 카드의 마지막 칸은 바닥에 붙어 옆 카드 단추와 줄을 맞추는 자리라,
여기에 링크가 오면 단추가 카드 한가운데에 뜬다. */
.way-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; padding: 0 2px; }
.way-links a { font-size: 13px; font-weight: 650; color: var(--muted); text-decoration: none; }
.way-links a:hover { color: var(--primary-d); }
.start-links { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 0 4px; }
.start-links a { font-size: 13.5px; font-weight: 650; color: var(--ink); text-decoration: none; }
.start-links a:hover { color: var(--primary-d); }
.start-links .start-join { margin-left: auto; color: var(--primary-d); }
/* 파일을 끌어다 놓는 동안만 테두리를 바꾼다. 놓을 수 있는 자리인지 손이 알아야 한다. */
.card.drop-on { border-color: var(--primary); background: var(--primary-soft); }
.start-note {
margin: 26px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted);
border-left: 2px solid var(--line); padding-left: 14px;
}
/* 선 아이콘 일습. 색과 굵기를 한 곳에서 정한다.
⚠️`#startView` 안에만 걸어 뒀더니 같은 마크업을 쓰는 허브(index.html)에서 검은 덩어리로 찍혔다 —
fill:none 이 안 닿아 면이 통째로 칠해진 것이다. 클래스로도 걸어 둔다. */
#startView svg, .start-ways svg, .start-what svg {
fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
#startView .start-ways .start-way:last-child h2 svg { stroke: var(--muted); }
.perf-row { display: flex; gap: 8px; align-items: center; }
.perf-row input { flex: 1; min-width: 0; }
/* 결은 textarea.ta 가 진다. 여기서는 여백만. */
#perfSteps { margin: 8px 0; }
.perf-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
/* 과제가 서면 이 칸의 주인공은 반이 아니라 과제다. */
.perf-class { flex: 1; min-width: 0; }
.perf-class b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.perf-class span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.perf-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; }
/* 걷기가 이 칸에서 할 단 하나의 행동이다. 나머지는 오른쪽으로 민다. */
.perf-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 16px;
padding-top: 14px; border-top: 1px solid var(--line); }
.perf-act .btn-primary { width: auto; border-radius: var(--radius-s); }
.perf-act .btn-line { width: auto; border-radius: var(--radius-s); }
.perf-act-note { flex: 1; min-width: 140px; font-size: 12.5px; color: var(--muted); }
/* 격자와 한 학생 보고서. 보고서를 닫으면 격자가 폭을 되찾는다. */
.perf-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.perf-split.open { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) { .perf-split.open { grid-template-columns: minmax(0, 1fr); } }
.perf-gridcol { min-width: 0; }
.perf-sum-line { margin: 10px 0 0; font-size: 12.5px; }
.perf-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.perf-step {
cursor: pointer; font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
background: var(--card); border: 1px solid var(--line); color: var(--ink); white-space: nowrap;
}
.perf-step:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.perf-step span { font-family: var(--mono); font-weight: 700; }
.perf-step.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); font-weight: 700; }
.perf-step span { margin-left: 5px; color: var(--muted); }
.perf-step.on span { color: var(--primary-d); }
/* 단계가 여덟이면 폰에서는 표가 넘친다. 눌리는 대신 안에서 옆으로 흐르게 둔다. */
.perf-grid-wrap { overflow-x: auto; max-height: 46vh; overflow-y: auto;
border: 1px solid var(--line); border-radius: var(--radius-s); }
.perf-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.perf-grid th, .perf-grid td { border-bottom: 1px solid var(--line); padding: 9px 10px; white-space: nowrap; }
.perf-grid tbody tr:last-child th, .perf-grid tbody tr:last-child td { border-bottom: 0; }
.perf-grid thead th { position: sticky; top: 0; background: var(--field); color: var(--muted);
font-size: 11.5px; font-weight: 700; z-index: 1; }
.perf-grid th.perf-who { text-align: left; font-weight: 650; padding-left: 14px; }
/* 지금 읽고 있는 줄. 색만으로 짚지 않고 왼쪽에 선을 하나 더 준다(색맹). */
.perf-grid tbody tr.on { background: var(--primary-soft); }
.perf-grid tbody tr.on th.perf-who { box-shadow: inset 3px 0 0 var(--primary); font-weight: 800; }
.perf-grid td { text-align: center; cursor: pointer; }
.perf-grid tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.perf-grid td.perf-sum { color: var(--muted); font-variant-numeric: tabular-nums; }
.perf-grid td.perf-empty { color: var(--muted); cursor: default; font-size: 12px; padding: 14px; }
/* 칸 하나 = 점 하나. 열아홉 칸을 네 열 안에서 다 보이게 하는 방법이다. */
.pdot {
display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px;
border: 1px solid var(--line); background: transparent;
}
.pdot.on { background: var(--primary); border-color: var(--primary); }
/* 칸 칩은 영역별로 묶는다. 열아홉을 한 줄로 늘어놓으면 지금 어느 영역인지 사라진다. */
.perf-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.perf-grpname { font-size: 11.5px; color: var(--muted); font-weight: 750; width: 116px; flex: none; }
@media (max-width: 720px) { .perf-grpname { width: 100%; } }
.perf-tpl { display: flex; flex-direction: column; gap: 8px; }
.perf-tplbtn {
text-align: left; cursor: pointer; font: inherit; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px;
}
.perf-tplbtn:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.perf-tplbtn b { display: block; font-size: 14px; }
.perf-tplbtn span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 내가 만든 틀만 지울 수 있다. ⚠️위 규칙이 span 을 블록으로 만들어서, 여기서 되돌리지 않으면
「지우기」가 제 줄을 차지하고 단추가 두 배로 커진다. */
.perf-tplbtn { position: relative; }
.perf-tplbtn .perf-tpldrop {
position: absolute; top: 9px; right: 9px; margin-top: 0; font-size: 11.5px; font-weight: 700;
color: var(--coral-ink); padding: 3px 7px; border-radius: 8px; cursor: pointer;
}
.perf-tplbtn:has(.perf-tpldrop) b { padding-right: 58px; }
.perf-tplbtn .perf-tpldrop:hover { background: var(--coral-soft); }
/* 붙여 넣은 채점표가 어떻게 읽혔는지. 총점이 평가계획과 다르면 여기서 잡는다. */
.perf-planprev { margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.perf-planprev.warn { color: var(--coral-ink); font-weight: 700; }
/* 한 학생의 보고서 — 빈 칸을 감추지 않는다. 무엇이 남았는지가 이 표를 보는 이유다. */
.perf-one { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px 16px;
min-width: 0; max-height: 60vh; overflow-y: auto; }
.rep-grp { margin-bottom: 10px; }
.rep-grp h4 { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.rep-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.rep-item .rep-name { flex: 0 0 130px; font-weight: 600; }
.rep-item .rep-tx { flex: 1; min-width: 0; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.rep-item.empty .rep-tx { color: var(--muted); }
/* 수행평가 판 머리 — 이 판에서 가장 큰 글자가 「채운 칸」이다. */
.plan-head { flex: none; padding: 16px 16px 14px; border-bottom: 1px solid var(--stage-line); }
.plan-score { display: flex; align-items: baseline; gap: 9px; }
.plan-k { font-size: 12px; color: var(--stage-muted); font-weight: 700; }
.plan-n b { font-family: var(--mono); font-size: 30px; font-weight: 800; line-height: 1;
color: var(--stage-accent); }
.plan-n span { font-family: var(--mono); font-size: 14px; color: var(--stage-muted); margin-left: 3px; }
/* 영역마다 한 토막. 폭은 배점, 칠한 만큼이 채운 칸. */
.plan-bar { display: flex; gap: 3px; margin-top: 12px; }
.plan-seg { display: block; height: 5px; border-radius: 999px; background: var(--stage-line); overflow: hidden; }
.plan-seg > i { display: block; height: 100%; background: var(--stage-accent); border-radius: 999px; }
.plan-down { margin-top: 14px; width: 100%; min-height: 44px; }
/* 학생 화면의 수행평가 판 — 학생 무대와 같은 어두운 색을 쓴다.
⚠️ .sc-game 의 `background: var(--stage)` 는 없는 토큰이라 실제로는 투명이다.
그림 맞히기·문항 풀기는 iframe 이 칸을 채워서 안 드러났고, 글로 채우는 이 판에서 처음 드러났다.
여기서는 내 판에만 바탕을 준다(다른 오버레이는 안 건드린다). */
#planWrap { background: var(--stage); color: var(--stage-ink); }
.plan-body { overflow-y: auto; padding: 14px 16px 24px; }
.plan-note { margin: 0 0 10px; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.plan-note.dim { color: var(--stage-muted); font-size: 12px; }
.plan-grp { margin-bottom: 16px; }
.plan-grp h4 { font-size: 13px; margin: 0 0 8px; color: var(--stage-accent); }
.plan-item {
background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px;
padding: 10px 12px; margin-bottom: 8px;
}
.plan-item.done { border-color: var(--stage-edge); }
.plan-item.now { border-color: var(--stage-accent); box-shadow: 0 0 0 1px var(--stage-accent) inset; }
.plan-name { display: block; font-weight: 800; font-size: 13.5px; color: var(--stage-ink); }
.plan-name b { font-weight: 600; font-size: 11px; color: var(--stage-muted); margin-left: 6px; }
.plan-name em { font-style: normal; font-size: 11px; margin-left: 6px; color: var(--stage-accent); font-weight: 800; }
.plan-hint { display: block; font-size: 11.5px; color: var(--stage-muted); margin-top: 4px; line-height: 1.5;
word-break: keep-all; overflow-wrap: anywhere; }
.plan-tx { display: block; font-size: 13px; margin-top: 7px; white-space: pre-wrap; color: var(--stage-ink);
word-break: keep-all; overflow-wrap: anywhere; }
.plan-item:not(.done) .plan-tx { color: var(--stage-dim); }
#planWrap .sc-game-bar { background: var(--stage-card); border-bottom-color: var(--stage-line); }
#planWrap .sc-game-bar b { color: var(--stage-ink); }
#planWrap .sc-game-note { color: var(--stage-muted); }
/* ── 수업 중 대시보드 (스킨 「무대」 2단계) ──────────────────────────
카드 겹을 줄이고 그림자를 뺐다. 구분은 테두리보다 바탕 톤과 여백으로. */
.dash .card.dash-card {
border-radius: var(--radius); border: 1px solid var(--line); box-shadow: none; padding: 0;
}
/* 카드 머리는 아래 선으로 몸통과 갈린다. 접기 단추 노릇은 그대로다. */
.dash .card.dash-card > .card-fold {
padding: 13px 16px; border-bottom: 1px solid var(--line); margin: 0;
}
.dash .card.dash-card > .card-fold.folded { border-bottom: 0; }
.dash .card.dash-card > .card-fold h2 { font-size: 14px; font-weight: 750; letter-spacing: -.015em; }
.dash .card.dash-card > .card-body { padding: 14px 16px 16px; }
.fold-note { font-size: 12.5px; font-weight: 650; color: var(--muted); }
/* 띠와 단추 안의 선 아이콘 */
.dash svg.ic, .sc-bar svg.ic { width: 15px; height: 15px; flex: none; fill: none;
stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dash .btn-primary svg.ic, .dash .btn-line svg.ic { margin-right: 7px; vertical-align: -2px; }
.dash .dr-chip svg.ic { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.dash .btn-primary.stack svg.ic, .dash .btn-line.stack svg.ic { margin-right: 8px; }
/* 미리보기는 무대다. 밝은 판 위에 어두운 칸 하나로 선다. */
.dash #pvWrap { background: var(--stage); border-radius: var(--radius-s); overflow: hidden; }
/* 서랍 탭 — 활성은 밑줄 하나로. 색면을 쓰면 탭 줄이 무거워진다. */
.dash-drawer { border-radius: var(--radius); box-shadow: none; }
.drawer-tabs { border-bottom: 1px solid var(--line); }
.drawer-tabs .card-fold { padding: 13px 16px; border-right: 0; }
.drawer-tabs .card-fold h2 { font-size: 13.5px; font-weight: 650; color: var(--muted); }
.drawer-tabs .card-fold:not(.folded) { background: none; box-shadow: inset 0 -2px 0 var(--primary); }
.drawer-tabs .card-fold:not(.folded) h2 { color: var(--ink); font-weight: 750; }
/* ── 학생 무대 (스킨 「무대」 4단계) ─────────────────────────────
영상이 주인공이라 나머지는 조용히 물러난다.
⚠️영상 칸의 비율 계산은 안 건드린다 — 높이를 값으로 못 박으면 몰입 보기·가로 회전이 깨진다. */
.sc-msg .em { color: var(--stage-dim); }
.sc-msg .em svg { width: 34px; height: 34px; fill: none; stroke: currentColor;
stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* 도구 줄 — 지금 켠 것만 칠하고 나머지는 테두리 없이 조용히. */
.sc-bar button { border-radius: var(--radius-s); }
.sc-bar .sc-full svg { width: 15px; height: 15px; display: block; fill: none;
stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sc-bar .sc-mode.on, .sc-bar .sc-chatbtn.on { font-weight: 800; }
/* 채팅 머리의 인원은 재는 값이다. */
.sc-here { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* 걷는 물음 — 배점과 쓰는 법이 물음과 같이 선다. */
.sc-q .q-now {
display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
color: var(--stage-on-accent); background: var(--stage-accent);
border-radius: 999px; padding: 2px 9px; margin-bottom: 7px;
}
.sc-q .q-name { display: block; font-size: 15px; font-weight: 800; line-height: 1.35; }
.sc-q .q-name b { font-size: 11.5px; font-weight: 700; color: var(--stage-muted); margin-left: 7px; }
.sc-q .q-hint {
display: block; font-size: 11.5px; line-height: 1.5; color: var(--stage-muted); margin-top: 5px;
word-break: keep-all; overflow-wrap: anywhere;
}
/* ── 아이콘 (스킨 「무대」 7단계) ─────────────────────────────
⚠️이모지를 아이콘으로 쓰지 않는다. 기기마다 다르게 그려지고,
iOS 는 일부 글리프를 컬러 이모지로 바꿔 버린다. */
svg.ic-hand, svg.ic-top {
width: 1em; height: 1em; vertical-align: -.14em; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
svg.ic-top { stroke-width: 1.5; }
/* 손들기 단추는 무대에서 눈에 띄어야 한다 — 코럴은 이 화면에서 「지금 말하고 싶다」의 색이다. */
#askBtn svg.ic-hand { width: 18px; height: 18px; vertical-align: 0; }
.sc-m-name svg.ic-hand, .nm svg.ic-hand { margin-right: 3px; }
.seg .dr-chip svg.ic { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 보조 도구의 발표 단추도 같은 선 아이콘을 쓴다 — 같은 일을 하는 단추는 같게 생겨야 한다. */
.btn-primary svg.ic, .btn-ghost svg.ic, .btn-line svg.ic {
width: 15px; height: 15px; vertical-align: -2px; margin-right: 7px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ic-wrap { display: inline-flex; align-items: center; color: var(--primary-d); }
.ic-wrap svg.ic { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
/* ── 반 명단에서 고르기 (학생) ─────────────────────────────
★이미 앉은 자리는 잠근다. 목록에서 남의 이름이 다 보이므로 사칭이 쉬워지는 자리다. */
.sc-pick { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--stage-line); }
.sc-pick-h { font-size: 12.5px; font-weight: 700; color: var(--stage-muted); margin-bottom: 9px; }
.sc-pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 34vh; overflow-y: auto; }
.sc-pick-b {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
background: var(--stage-card); border: 1px solid var(--stage-edge); border-radius: var(--radius-s);
color: var(--stage-ink); font: inherit; font-size: 14px; font-weight: 650; padding: 9px 13px; cursor: pointer;
}
.sc-pick-b .n { font-family: var(--mono); font-size: 12px; color: var(--stage-muted); }
.sc-pick-b:hover { border-color: var(--stage-accent); }
/* 색만으로 잠금을 말하지 않는다 — 「들어옴」이라고 적어 준다. */
.sc-pick-b.off { opacity: .45; cursor: default; border-color: var(--stage-line); }
.sc-pick-b em { font-style: normal; font-size: 11px; color: var(--stage-dim); }
.sc-pick-free {
display: block; width: 100%; margin-top: 10px; min-height: 44px;
background: none; border: 0; color: var(--stage-muted); font: inherit; font-size: 13px;
font-weight: 650; text-decoration: underline; cursor: pointer;
}
.sc-pick-free:hover { color: var(--stage-ink); }
/* 교사 쪽 명단 붙여넣기 */
.perf-list { margin-bottom: 14px; }
.perf-list textarea { width: 100%; font: inherit; font-size: 14px; }
/* 명단에 없는 학생(전학생·보결)은 격자에서 표시해 둔다 */
.perf-grid tbody tr.unlisted th.perf-who::after {
content: "명단 밖"; margin-left: 7px; font-size: 10.5px; font-weight: 700;
color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; padding: 2px 7px;
}
/* 붙은 주소에 색을 안 주면 브라우저 기본 파랑(#0000EE)이라 어두운 판 위에서 대비가 2:1 = 안 보인다.
★바탕이 두 벌이다 — 학생 무대·쪽지·빔은 늘 어둡고(--stage-*), 교사 콘솔은 --card 라 밝기가 뒤집힌다.
그래서 색을 하나로 쓰면 한쪽이 반드시 안 보인다. 교사 쪽은 테마를 따라 도는 토큰을 쓴다. */
.sc-card .tx a,
.sc-msgs .sc-m .tx a,
.sc-act .sc-ans .tx a,
.present-overlay .pwc .tx a { color: #7fe0c0; text-decoration: underline; text-underline-offset: 2px; }
.sc-card .tx a:hover,
.sc-msgs .sc-m .tx a:hover,
.sc-act .sc-ans .tx a:hover,
.present-overlay .pwc .tx a:hover { color: #a8f0d8; }
.sc-tans .sc-ans .tx a,
.sc-tmsgs .sc-m-text a { color: var(--primary-d); text-decoration: underline; text-underline-offset: 2px; }
.sc-tans .sc-ans .tx a:hover,
.sc-tmsgs .sc-m-text a:hover { color: var(--primary); }
/* ── 수행평가 과정 기록(record.html) ─────────────────────────────
왼쪽은 번호순 학생 줄, 오른쪽은 그 학생의 칸. 칸 바로 아래에 걷힌 글이 붙는다 —
⚠️글을 다른 화면으로 옮겨 놓으면 교사는 결국 안 보고 찍는다. */
.gr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
flex-wrap: wrap; padding: 22px 0 12px; }
.gr-head-main b { display: block; font-size: 19px; }
.gr-head-main span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px;
font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gr-lay { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .gr-lay { grid-template-columns: 1fr; } }
.gr-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 6px; max-height: 72vh; overflow-y: auto; }
@media (max-width: 820px) { .gr-list { max-height: 40vh; } }
.gr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; width: 100%;
text-align: left; font: inherit; color: var(--ink); cursor: pointer;
background: none; border: 1px solid transparent; border-radius: var(--radius-s); padding: 8px 10px; }
.gr-row:hover { background: var(--field); }
/* 고른 줄은 배경만으로 알리지 않는다 — 실선이 없으면 두 줄이 붙어 있을 때 어디가 고른 줄인지 흐리다. */
.gr-row.on { background: var(--primary-soft); border-color: var(--primary); }
.gr-name { font-size: 14px; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.gr-num { font-family: var(--mono); font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gr-of { font-weight: 500; color: var(--muted); }
.gr-yet { color: var(--muted); font-weight: 600; }
.gr-left { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.gr-grp { margin-bottom: 18px; }
.gr-grp h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.gr-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 12px 14px; margin-bottom: 8px; }
.gr-item.done { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); }
.gr-itop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gr-iname { font-size: 14.5px; font-weight: 750; word-break: keep-all; overflow-wrap: anywhere; }
.gr-iscore { font-family: var(--mono); font-size: 14px; font-weight: 800; flex: none;
font-variant-numeric: tabular-nums; }
.gr-scale { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
/* 순회 중에는 엄지 하나다. 높이 38px 아래로 내리지 않는다. */
.gr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px;
font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
background: var(--field); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
word-break: keep-all; }
.gr-chip:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.gr-chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); font-weight: 800; }
.gr-circ { font-family: var(--mono); color: var(--muted); }
.gr-chip.on .gr-circ { color: var(--primary-d); }
.gr-step { min-width: 46px; justify-content: center; font-family: var(--mono); font-weight: 700; }
.gr-undo { margin-left: auto; align-self: center; font: inherit; font-size: 12px; font-weight: 700;
color: var(--muted); background: none; border: none; cursor: pointer; padding: 6px 4px; }
.gr-undo:hover { color: var(--coral-ink); }
/* 걷힌 글. ⚠️칸 전체를 pre-wrap 으로 두지 않으면 학생이 줄 나눠 쓴 계획서가 한 줄로 뭉친다. */
.gr-got { margin: 10px 0 0; padding: 9px 11px; background: var(--field); border-radius: var(--radius-s);
font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-wrap;
word-break: keep-all; overflow-wrap: anywhere; }
.gr-gotday { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px;
font-family: var(--mono); }
/* ⚠️안 낸 칸을 낸 글과 같은 무게로 그리면, 넉 칸 낸 학생 화면에서 빈 칸 열다섯이 같은 크기로
자리를 차지한다. 낸 것을 보러 온 눈이 빈 칸 사이를 헤맨다. 남기되 무게를 낮춘다. */
.gr-got.gr-empty { color: var(--muted); background: none; border: 1px dashed var(--line);
font-size: 12px; padding: 5px 9px; margin-top: 8px; }
/* ★여러 번 낸 칸에서 본체는 「무엇이 달라졌나」다. 마지막 것이 눈에 먼저 들어와야 한다. */
.gr-got.last { background: var(--primary-soft); }
.gr-gotday b { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 99px;
font-family: var(--font); font-size: 10px; font-weight: 800;
background: var(--primary); color: var(--on-primary); }
/* 낸 칸만 펴 두기. 안 낸 칸은 화면에서만 접히고 자료에는 그대로 있다. */
.gr-only { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
font-size: 13px; font-weight: 700; color: var(--muted); }
.gr-only input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.gr-only:hover { color: var(--primary-d); }
.only-got .gr-item.none { display: none; }
/* 영역이 통째로 비면 제목만 남아 떠 있다. 그 영역도 같이 접는다. */
.only-got .gr-grp:not(:has(.gr-item.got)) { display: none; }
/* 한 칸에 여러 번 낸 것이 날짜별로 쌓인다. 날짜가 앞에 서야 몇 번 고쳐 왔는지가 먼저 보인다. */
.plan-tx .plan-day { display: inline-block; margin-right: 7px; font-style: normal;
font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--stage-dim); }
/* 낸 것이 여러 번이면 날짜별로 편다. 겹쳐 보이게 두면 몇 번 고쳐 왔는지가 안 보인다. */
.gr-log { display: flex; flex-direction: column; gap: 6px; }
.gr-log .gr-got { margin: 0; }
.gr-log .gr-got + .gr-got { margin-top: 0; }
/* 점수 옆 메모. 점수만 남으면 학기말에 왜 그 점수였는지 못 댄다. */
.gr-memo { margin-top: 8px; }
.gr-memoadd, .gr-memotx { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
border-radius: var(--radius-s); padding: 8px 11px; }
.gr-memoadd { font-size: 12.5px; font-weight: 700; color: var(--muted);
background: none; border: 1px dashed var(--line); }
.gr-memoadd:hover { color: var(--primary-d); border-color: var(--primary); }
.gr-memotx { font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-wrap;
word-break: keep-all; overflow-wrap: anywhere;
background: var(--gold-soft); border: 1px solid transparent; border-left: 3px solid var(--gold); }
.gr-memotx:hover { border-color: var(--gold); }
.gr-memoin { width: 100%; font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink);
background: var(--field); border: 1px solid var(--primary); border-radius: var(--radius-s);
padding: 8px 11px; resize: vertical; }
/* 교사가 펴 보는 한 학생 보고서에도 날짜별로 선다. */
.rep-item .rep-day { display: inline-block; margin-right: 7px; font-style: normal;
font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); }
.rep-name .rep-n { margin-left: 6px; font-style: normal; font-family: var(--mono);
font-size: 11px; font-weight: 700; color: var(--primary-d); }
/* ── 시작 화면 (스킨 「방송」 1-b) ─────────────────────────────
목업 _design/live/Broadcast.dc.html 01 의 값을 그대로 옮긴다(1280 폭, 두 칸 1.55 : 1, 칸 사이 48).
바탕 겹: 반 줄·오른쪽 상자 = --card(목업 surface) · 맨 위 반 = --field(목업 raised).
⚠️.wrap-studio 는 share.html 시작 화면에만 붙는다. 옛 「무대」 규칙(.start-way 카드 등)을 여기서 덮는다. */
.wrap-studio { max-width: 1280px; padding: 0 32px 48px; }
header.top.top-bar {
flex-direction: row; align-items: center; justify-content: space-between;
height: 72px; padding: 0; gap: 16px;
}
header.top.top-bar .logo { gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: 0; color: var(--ink); text-decoration: none; }
header.top.top-bar .logo::before { content: none; }
header.top.top-bar .logo-mark { width: 28px; height: 28px; color: var(--primary); flex: none; }
.top-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.top-nav a {
display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 10px;
color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.top-nav a:hover { background: var(--card); color: var(--ink); }
.top-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.start-grid {
display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px;
margin: 0; padding: 24px 0 32px; text-align: left;
}
.wrap-studio .start-way { border: 0; background: none; padding: 0; border-radius: 0; flex: none; }
.wrap-studio .start-way > :last-child { margin-top: 0; }
.start-main { display: flex; flex-direction: column; }
.start-eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); }
.start-main h1 { margin: 6px 0 0; font-size: 40px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; }
#startClassList { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
#startClassList .start-none { margin: 0; font-size: 15px; line-height: 1.6; }
.wrap-studio .start-class {
display: flex; align-items: center; gap: 24px; margin: 0; border: 0; cursor: pointer;
background: var(--card); border-radius: 14px; padding: 16px 24px; color: var(--ink);
}
.wrap-studio .start-class:hover { background: var(--field); }
.wrap-studio .start-class.first { background: var(--field); padding: 24px; }
.wrap-studio .start-class .sc-n b { font-size: 18px; font-weight: 650; }
.wrap-studio .start-class.first .sc-n b { font-size: 22px; font-weight: 700; }
.wrap-studio .start-class .sc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--muted); }
.wrap-studio .start-class.first .sc-meta { margin-top: 8px; font-size: 14px; }
.wrap-studio .start-class .sc-meta span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.sc-go {
flex: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
height: 48px; padding: 0 24px; border: 1px solid var(--line); border-radius: 10px;
font-size: 15px; font-weight: 650; color: var(--ink);
}
.start-class.first .sc-go {
height: 56px; padding: 0 28px; border: 0; background: var(--primary); color: var(--on-primary);
font-size: 17px; font-weight: 750;
}
.start-class.first:hover .sc-go { filter: brightness(1.08); }
#startView .sc-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.start-add {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: auto;
height: 48px; margin-top: 8px; padding: 0 12px; border: 0; border-radius: 10px;
background: none; color: var(--muted); font-size: 15px; font-weight: 600;
}
.start-add:hover { color: var(--ink); }
#startView .start-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.start-side { display: flex; flex-direction: column; gap: 32px; padding-top: 34px; }
.wrap-studio .start-box {
display: flex; flex-direction: column; gap: 12px;
background: var(--card); border-radius: 14px; padding: 24px;
}
.wrap-studio .start-box + .start-box { margin-top: -20px; } /* 두 상자는 한 묶음(12), 지난 수업과는 32 */
.start-box h2 { margin: 0; font-size: 19px; font-weight: 700; }
.wrap-studio .start-box .hint { margin: 0; font-size: 15px; line-height: 1.6; }
.wrap-studio .start-box .start-none { font-size: 13px; }
.wrap-studio .start-box .way-links { margin: 0; }
.wrap-studio .start-box > .btn-line, .wrap-studio .start-box > .btn-primary {
width: auto; align-self: flex-start; margin-top: 4px; height: 48px; padding: 0 24px;
border-radius: 10px; font-size: 15px; font-weight: 650;
}
.wrap-studio .start-box > .btn-line { background: transparent; border: 1px solid var(--line); }
.wrap-studio .start-box > .btn-line:hover { background: var(--field); }
.start-past { display: flex; flex-direction: column; gap: 8px; }
.start-past-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 4px; }
.start-past-head span { font-size: 16px; font-weight: 700; }
.start-past-head a { font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; }
.start-past-head a:hover { text-decoration: underline; }
.start-past-row {
display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center;
padding: 12px 4px; border-radius: 10px; color: var(--ink); text-decoration: none;
}
.start-past-row:hover { background: var(--card); }
.sp-d { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); }
.sp-t { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-m { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.start-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.wrap-studio .start-note { margin: 0; border: 0; padding: 0; }
.wrap-studio .start-join { margin: 0; padding: 8px 0; color: var(--primary); }
/* ⚠️위 두 svg 규칙에 #startView 를 붙였다 — `#startView svg` 선 아이콘 일습(stroke: --primary)이 id 특이도로 이겨
「수업 열기」 화살표가 강조색 바탕 위에서 같은 색으로 사라졌다. */
/* 창을 반쪽에 놓고 쓰는 배치 — 한 줄로 접는다. */
@media (max-width: 900px) {
.wrap-studio { padding: 0 16px 40px; }
.start-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.start-side { padding-top: 0; }
.start-main h1 { font-size: 30px; }
.top-nav a { padding: 0 10px; }
}
@media (max-width: 560px) {
header.top.top-bar { height: auto; padding: 12px 0; flex-wrap: wrap; }
.top-nav { justify-content: flex-start; }
.wrap-studio .start-class { flex-wrap: wrap; gap: 12px; }
}
/* ── 수업 중 머리 (스킨 「방송」 2단계) ─────────────────────────
목업 02 머리 값 그대로: 바탕 surface(--card), 높이 64 이상, 안쪽 10/24, 사이 12/24. 단추 높이 44. */
.dash-top {
min-height: 64px; padding: 10px 24px; gap: 12px 24px;
background: var(--card); border: 0; border-radius: 14px;
}
.dash-live {
display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 6px;
border: 1.5px dashed var(--muted); color: var(--muted); font-size: 14px; font-weight: 650; white-space: nowrap;
}
.dash-live .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.dash-live.on { background: var(--live); color: var(--live-ink); border: 0; font-weight: 750; }
.dash-live.on .dot { background: #fff; border: 0; }
.dash-name { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.dash-codewrap { display: flex; align-items: baseline; gap: 8px; }
.dash-codelab { font-size: 13px; font-weight: 500; color: var(--muted); }
.dash-code { font-size: 24px; font-weight: 750; letter-spacing: .06em; color: var(--ink); }
.dash-stat { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.dash-stat b { font-weight: 600; margin: 0; }
.dash-stat.quiet { color: var(--muted); }
.dash-stat.quiet b { color: var(--muted); }
.dash-stat svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dash-top .dash-btn {
display: flex; align-items: center; gap: 7px; width: auto; height: 44px; padding: 0 14px;
border: 0; border-radius: 10px; background: var(--field); color: var(--ink);
font-size: 14px; font-weight: 650; white-space: nowrap;
}
.dash-top .dash-btn:hover { background: var(--raised-2); }
.dash-top .dash-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin: 0; }
.dash-top .dash-end { background: transparent; border: 1.5px solid var(--line); }
.dash-top .dash-end:hover { background: transparent; border-color: var(--live); color: #ff9aa1; }
/* 「한 번 더 누르면 끝나요」 무장 상태 — 라이브 빨강으로 경고한다 */
.dash-top .dash-end.btn-warn { border-color: var(--live); color: #ff9aa1; }
.dash-top #pairToggle.on { background: var(--primary-soft); color: var(--primary); }
/* ── 학생 플레이어 위 「수업 중」·인원 (스킨 「방송」 2단계) ──
목업 04: 플레이어 왼쪽 위 12px, 빨간 알약 + 어두운 반투명 알약. 화면을 가리는 넓이를 최소로. */
.sc-onair { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; pointer-events: none; }
.sc-livepill, .sc-viewpill {
display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px;
font-size: 12px; font-weight: 750; white-space: nowrap;
}
.sc-livepill { background: var(--live); color: var(--live-ink); }
.sc-livepill .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.sc-viewpill { background: rgba(11, 15, 20, .72); color: var(--stage-ink); font-family: var(--mono); }
.sc-viewpill b { font-weight: 600; }
.sc-viewpill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ── 학생 화면 (스킨 「방송」 3단계) — 목업 04 ─────────────────
⚠️배치는 옮기지 않았다: 도구 줄은 플레이어 바로 아래 그대로, 활동 판은 채팅과 번갈아 선다
(답 받는 중 잡담 차단·「채팅 보기」 전환이 이 자리에 묶여 있다). 모양만 목업 값으로. */
/* 도구 줄 = 목업 아래 내비: 아이콘 위, 글자 아래, 고른 것만 강조색 글자. */
.sc-bar { height: 60px; gap: 2px; padding: 0 6px; background: var(--stage); }
.sc-bar button {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-width: 56px; height: 56px; padding: 0 8px; border-radius: 10px;
background: transparent; color: var(--stage-muted); font-size: 12px; font-weight: 600;
}
.sc-bar .sc-full { padding: 0 8px; font-size: 12px; }
.sc-bar .sc-mode.on, .sc-bar .sc-chatbtn.on, .sc-bar .sc-full.on { background: transparent; color: var(--stage-accent); }
.sc-bar .tb-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-bar .sc-badge { top: 4px; right: 8px; }
/* 활동 카드 = 목업 「채팅 위 고정 공지」: 떠 있는 면(raised) 한 장. */
.sc-act { flex: 0 1 auto; margin: 8px 12px 0; padding: 14px; gap: 10px; background: var(--stage-raised); border-radius: 14px; }
.sc-act-kick { font-size: 12px; font-weight: 700; color: var(--gold); }
.sc-act-kick:empty { display: none; }
.sc-q { background: none; padding: 0; border-radius: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
/* 표를 받는 동안은 두 칸 격자. 결과가 나오면 한 줄씩 막대로. */
.sc-opts:not(:has(.res)) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-opts:not(:has(.res)) .sc-opt {
display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px;
border-radius: 10px; border: 1.5px solid var(--stage-line); background: var(--stage-card);
text-align: center; font-size: 15px; font-weight: 650;
}
.sc-opts:not(:has(.res)) .sc-opt.mine { border-color: var(--stage-accent); background: var(--stage-soft); }
.sc-opt.res { border-radius: 6px; border: 0; background: var(--stage-card); padding: 8px 10px; }
.sc-opt.res .sc-opt-top { margin-bottom: 6px; font-size: 14px; font-weight: 650; }
.sc-opt.res .sc-opt-top b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--stage-ink); }
.sc-opt.res.top .sc-opt-top b { color: var(--stage-accent); }
.sc-opt.res.top .bar-fill { background: var(--stage-accent); }
.sc-opt.res:not(.top) .bar-fill { background: var(--stage-edge); }
/* 채팅 = 목업 줄 단위: 이름 칸(고정 폭, 목업 52 → 「7번 지우」+손 아이콘이 들어가게 80) + 본문. 이어진 말은 이름 칸을 비운다. */
.sc-msgs { padding: 10px 16px 0; }
.sc-msgs .sc-m { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.45; padding: 2px 0; }
.sc-msgs .sc-m .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-msgs .sc-m .cl { display: none; }
.sc-msgs .sc-m.cont { padding-left: 0; }
.sc-msgs .sc-m.cont .tx { grid-column: 2; }
.sc-msgs .sc-m .rep { grid-column: 3; margin: 0; } /* 같은 말 ×n 은 줄 끝에 */
.sc-msgs .sc-m.ask, .sc-msgs .sc-m.tea { margin: 2px -6px; padding: 3px 6px; }
/* 입력 줄 = 알약 입력칸 + 코럴 테두리 손들기. */
.sc-chat .sc-say { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.sc-chat .sc-say :is(input, textarea) { border-radius: 24px; border: 0; background: var(--stage-card); padding: 12px 16px; font-size: 16px; } /* 목업 15px — 16 미만이면 iOS 가 확대한다 */
.sc-chat .sc-say #askBtn { height: 48px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--coral); background: transparent; color: var(--coral); }
.sc-chat .sc-say .sc-send { height: 48px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; }
/* ── 교사 무대 위 (스킨 「방송」 4단계) — 목업 02 ─────────────
⚠️pointer-events: none — 미리보기 위 드래그(영역 자르기)를 막으면 안 된다. */
.pv-act {
position: absolute; top: 16px; right: 16px; z-index: 4; width: min(300px, calc(100% - 32px));
display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px;
background: rgba(18, 25, 34, .94); color: #eef2f6; box-shadow: var(--shadow); pointer-events: none;
}
.pv-act-top { display: flex; justify-content: space-between; align-items: center; }
.pv-act-top .k { font-size: 12px; font-weight: 700; color: #f2c14e; }
.pv-act-top .n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #a3afbd; }
.pv-act .q { font-size: 16px; font-weight: 700; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.pv-opts { display: flex; flex-direction: column; gap: 6px; }
.pv-opts:empty { display: none; }
.pv-opt { display: grid; grid-template-columns: minmax(40px, auto) minmax(0, 1fr) 36px; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.pv-opt .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pv-opt .b { display: block; height: 8px; border-radius: 4px; background: #232e3c; overflow: hidden; }
.pv-opt .b i { display: block; height: 100%; border-radius: 4px; background: #3ddca5; }
.pv-opt .v { font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: right; color: #a3afbd; }
.pv-toasts {
position: absolute; left: 16px; bottom: 16px; z-index: 4;
display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none;
}
.pv-toast { display: flex; align-items: center; gap: 8px; border-radius: 999px; white-space: nowrap; animation: pv-in .2s ease-out; }
.pv-toast.hand {
height: 48px; padding: 0 16px; background: #2a1a17; color: #ffd2c5; border: 1.5px solid var(--coral);
box-shadow: var(--shadow); font-size: 15px; font-weight: 650;
}
.pv-toast.join { height: 34px; padding: 0 14px; background: rgba(18, 25, 34, .9); color: #cdd5de; font-size: 13px; font-weight: 500; }
.pv-toast.join::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3ddca5; }
@keyframes pv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pv-toast { animation: none; } }
/* ── 빔 밝은 판 (스킨 「방송」 5단계) — 목업 06 ─────────────────
⚠️배치는 그대로: QR 은 짧은 변의 절반 이상(verify-screen 1-b), 담벼락을 띄우면 QR 은 가린다(verify-wall 4-b).
목업은 QR 168px·담벼락 옆 코드 칸이었지만 두 규칙이 교실에서 정한 것이라 따랐다. 톤·글자만 목업 값으로. */
.present-overlay[data-theme="light"] { background: var(--paper); color: var(--ink); }
.present-overlay[data-theme="light"].qr-only { background: var(--paper); }
.present-overlay[data-theme="light"] .pclose { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.present-overlay[data-theme="light"] .pbeam-brand { color: var(--ink); font-size: 20px; }
.present-overlay[data-theme="light"] .pbeam-class { color: var(--muted); }
.present-overlay[data-theme="light"] .pbeam-here { color: var(--primary-d); font-weight: 700; }
.present-overlay[data-theme="light"] .pstep { color: var(--muted); font-weight: 650; }
.present-overlay[data-theme="light"].qr-only .purl { color: var(--ink); }
/* 코드 = 목업 --t-code 급 모노 800, 글자색은 강조색이 아니라 본문색(목업 그대로). */
.present-overlay[data-theme="light"].qr-only .pcode { color: var(--ink); font-weight: 800; letter-spacing: .02em; }
.present-overlay[data-theme="light"] .pnote { color: var(--muted); }
.present-overlay[data-theme="light"].qr-only .pqr { border: 1px solid var(--line); border-radius: 10px; }
.present-overlay[data-theme="light"] .pbeam-foot { color: var(--muted); border-top-color: var(--line); }
.present-overlay[data-theme="light"] .pbeam-close-hint { color: var(--muted); }
/* 담벼락 판 — 목업 가운데 칸: 주제 머리 + 두 칸 쪽지(떠 있는 흰 면). 오른쪽 채팅. */
.present-overlay[data-theme="light"].wall-only { background: var(--paper); }
.present-overlay[data-theme="light"] .pwall-q { color: var(--ink); font-weight: 750; letter-spacing: -.01em; }
.present-overlay[data-theme="light"] .pwall-sub { color: var(--muted); font-weight: 650; }
.present-overlay[data-theme="light"] .pwall-grid .sc-card { background: var(--field); border: 0; border-radius: 10px; }
.present-overlay[data-theme="light"] .pwall-grid .sc-card .av { color: #fff; }
.present-overlay[data-theme="light"] .pwall-grid .sc-card .tx { color: var(--ink); font-weight: 500; }
.present-overlay[data-theme="light"] .pwall-chat { border-left: 1px solid var(--line); }
.present-overlay[data-theme="light"] .pwall-chat-h { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 650; }
.present-overlay[data-theme="light"] .pwc { color: var(--ink); font-weight: 500; }
.present-overlay[data-theme="light"] .pwc .nm { font-weight: 750; }
.present-overlay[data-theme="light"] .pwc.ask { background: rgba(138, 99, 0, .08); }
.present-overlay[data-theme="light"] .pwc.tea { background: rgba(184, 69, 42, .08); }
.present-overlay[data-theme="light"] .pwc-empty { color: var(--muted); }
.present-overlay[data-theme="light"] .pwc .tx a { color: var(--primary-d); } /* --primary 는 밝은 바탕 4.04 — 링크는 4.5 넘게 */
.present-overlay[data-theme="light"] .pwc .tx a:hover { color: var(--ink); }
.pbeam-brand { display: inline-flex; align-items: center; gap: 10px; }
.pbeam-brand .logo-mark { width: 28px; height: 28px; color: var(--primary); flex: none; }
/* ── 지난 수업 (스킨 「방송」 6단계) — 목업 07 「다시보기」 ─────────
왼쪽 440 목록(바탕 --paper) · 오른쪽 고른 수업(바탕 --card). 활동 카드 = --field. */
.rec-app { display: grid; grid-template-columns: 440px minmax(0, 1fr); min-height: 100vh; }
.rec-side { display: flex; flex-direction: column; gap: 16px; padding: 28px 20px 20px 28px; min-width: 0; }
.rec-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--muted); font-size: 14px; font-weight: 650; text-decoration: none; }
.rec-back:hover { color: var(--ink); }
.rec-back .logo-mark { width: 22px; height: 22px; color: var(--primary); }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rec-head h1 { margin: 0; font-size: 24px; font-weight: 750; }
.rec-head select {
height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink);
font: inherit; font-size: 14px; font-weight: 600; max-width: 220px;
}
.rec-app .rec-list { display: flex; flex-direction: column; gap: 4px; }
.rec-app .rec-row {
position: relative; display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 10px;
background: none; border: 0; margin: 0;
}
.rec-app .rec-row:hover { background: var(--card); }
.rec-app .rec-row.on { background: var(--field); }
.rec-open { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.rec-open:focus-visible { outline-offset: -3px; }
/* 썸네일 자리 — 화면을 저장하지 않으니 칠판 모양 그림만. 길이는 모노 알약. */
.rec-tile {
position: relative; flex: none; width: 120px; height: 68px; border-radius: 8px; background: #f5f3ee;
display: flex; flex-direction: column; gap: 5px; padding: 12px 10px;
}
.rec-tile i { display: block; height: 5px; border-radius: 3px; background: #d6d2c8; }
.rec-tile i:first-child { width: 70%; background: #1a1d21; height: 6px; }
.rec-tile i:nth-child(2) { width: 52%; }
.rec-tile i:nth-child(3) { width: 60%; }
.rec-tile b {
position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px;
background: rgba(11, 15, 20, .86); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.rec-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-txt b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-txt .d, .rec-txt .c { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.rec-note { margin: auto 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.rec-tools { display: flex; gap: 16px; }
.rec-tools .linkbtn, .rec-dact .linkbtn { margin: 0; padding: 6px 0; font-size: 13px; font-weight: 650; color: var(--muted); background: none; border: 0; width: auto; }
.rec-tools .linkbtn:hover, .rec-dact .linkbtn:hover { color: var(--ink); }
.rec-tools .linkbtn.warn:hover, .rec-dact .linkbtn.warn:hover { color: var(--coral); }
.rec-main { background: var(--card); padding: 28px 32px; min-width: 0; text-align: left; } /* 공용 규칙이 머리를 가운데로 민다 */
.rec-side { text-align: left; }
.rec-none { color: var(--muted); font-size: 15px; padding: 40px 0; }
.rec-app .rec-detail-top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 24px; } /* 옛 규칙 align-items:center 를 덮는다 */
.rec-meta { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); }
.rec-app #dTitle { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -.01em; }
.rec-dact { display: flex; gap: 16px; flex-wrap: wrap; }
.rec-only-narrow { display: none; }
.rec-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rec-acts { display: flex; flex-direction: column; gap: 16px; }
.rec-app .rec-act-box { position: relative; background: var(--field); border-radius: 14px; padding: 16px; border: 0; margin: 0; }
.rec-app .q-band {
background: none; padding: 0 64px 0 0; margin: 0 0 12px; border-radius: 0;
color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.4;
}
.rec-act-n { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); }
.rec-app .rec-act-box .sc-ans { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; background: none; padding: 5px 0; font-size: 14.5px; }
.rec-app .rec-act-box .sc-ans .nm { font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-app .rec-bar { display: grid; grid-template-columns: minmax(48px, auto) minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 14px; font-weight: 650; }
.rec-app .rec-bar .bar-track { height: 8px; border-radius: 4px; background: var(--raised-2); overflow: hidden; }
.rec-app .rec-bar .bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--stage-edge); }
.rec-app .rec-bar.top .bar-fill { background: var(--primary); }
.rec-app .rec-bar b { font-family: var(--mono); font-size: 13px; font-weight: 600; text-align: right; color: var(--muted); }
.rec-act-foot { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.rec-chat { min-width: 0; }
.rec-chat-h { display: flex; justify-content: space-between; padding-bottom: 8px; font-size: 12px; font-weight: 650; color: var(--muted); }
.rec-chat-h .n { font-family: var(--mono); }
.rec-lines .sc-m { display: grid; grid-template-columns: 44px 72px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.45; background: none; border: 0; }
.rec-lines .sc-m .t { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 1px; }
.rec-lines .sc-m .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-lines .sc-m .x { color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.rec-lines .sc-m .x .ic-hand { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.rec-lines .sc-m.hid .x { text-decoration: line-through; color: var(--muted); }
.rec-lines .sc-m .pinmark { font-style: normal; color: var(--gold); }
/* 창을 반쪽에 놓거나 폰이면 한 줄 — 목록이 먼저, 고르면 상세가 목록을 대신한다. */
@media (max-width: 900px) {
.rec-app { grid-template-columns: minmax(0, 1fr); }
.rec-side { padding: 20px 16px; }
.rec-main { padding: 20px 16px; }
.rec-none { display: none; }
body.rec-open-on .rec-side { display: none; }
body:not(.rec-open-on) .rec-main { display: none; }
.rec-only-narrow { display: inline; }
.rec-body { grid-template-columns: minmax(0, 1fr); }
}
/* ── 수행평가 서랍 (스킨 「방송」 6단계) — 목업 03 ──
⚠️칸 칩은 영역별 묶음 그대로(한 줄로 늘어놓으면 지금 어느 영역인지 사라진다는 앞선 판단). 큰 숫자만 더한다. */
.perf-big { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; font-family: var(--mono); }
.perf-big .k { font-family: var(--font, inherit); font-size: 12px; font-weight: 600; color: var(--muted); }
.perf-big b { font-size: 28px; font-weight: 750; color: var(--ink); }
.perf-big .of { font-size: 20px; font-weight: 600; color: var(--muted); }
/* 고른 학생 줄 = 목업 03 떠 있는 면(raised). 초록은 「지금 이 칸」 한 곳에만 쓴다. */
[data-theme="dark"] .perf-grid tbody tr.on { background: var(--field); }
/* 리모컨 머리 — 옛 색면 마크 대신 스킨 「방송」 로고 마크(목업 01 과 같은 것). */
header.top.top-mark .logo::before { content: none; }
header.top.top-mark .logo-mark { width: 30px; height: 30px; color: var(--primary); flex: none; }
/* ── 서랍 (스킨 「방송」 2-b) — 목업 02 아래 줄 ─────────────────
탭 = 아이콘 + 이름 + 모노 숫자, 높이 48, 둥근 10. 연 탭만 떠 있는 면(--card). 펼친 판은 탭 줄 위에 선다.
⚠️탭 모음은 목업(질문·투표·담벼락·수행평가·학생)과 다르다 — 질문·투표·담벼락은 이미 「활동」 칸에 있어서
이 앱의 서랍 다섯을 그대로 두고 모양만 옮겼다. */
.dash-drawer { display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.dash-drawer .drawer-tabs { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 0 12px; border: 0; }
.dash-drawer .drawer-tabs .card-fold {
flex: none; width: auto; display: flex; align-items: center; gap: 8px;
height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--muted);
}
.dash-drawer .drawer-tabs .card-fold:hover { background: var(--card); }
.dash-drawer .drawer-tabs .card-fold:not(.folded) { background: var(--card); box-shadow: none; }
.dash-drawer .drawer-tabs .card-fold h2 { font-size: 15px; font-weight: 650; color: var(--ink); }
.dash-drawer .drawer-tabs .card-fold:not(.folded) h2 { font-weight: 700; }
.dash-drawer .drawer-tabs .fold-note {
flex: none; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--muted);
}
.dash-drawer .drawer-tabs .fold-i { display: none; }
.dash-drawer .dt-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dash-drawer .drawer-tabs .card-fold:not(.folded) .dt-ic { color: var(--primary); }
.drawer-hint { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
/* 펼친 판 = 목업 서랍 판: 떠 있는 면 한 장, 안쪽 16/20. */
.dash-drawer > .card-body { order: 1; background: var(--card); border-radius: 14px; padding: 16px 20px; }
/* 판 안의 선 단추는 폭을 다 차지하지 않는다(목업 「서랍 닫기」 크기: 높이 40, 좌우 14). */
.dash-drawer > .card-body .sc-tools .btn-line, .dash-drawer > .card-body .sc-tools .btn-primary {
width: auto; height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 650;
}
.dash-drawer > .card-body .btn-line { border-width: 1.5px; background: transparent; }
@media (max-width: 900px) {
.dash-drawer .drawer-tabs { flex-direction: row; }
.dash-drawer .drawer-tabs .card-fold { border: 0; }
.dash-drawer .drawer-tabs .card-fold:not(.folded) { box-shadow: none; }
.drawer-hint { display: none; }
}
.dash-drawer > .card-body .sc-tools button { flex: none; } /* 옛 규칙 flex:1 이 폭을 다 채우게 했다 */
/* 판 안에 또 상자를 두르지 않는다(겹 2까지) — 목록은 줄만. */
.dash-drawer > .card-body .sc-seats { background: none; border: 0; padding: 0; }
/* 판 안 단추는 글자만큼(목업 서랍 판). ⚠️.btn-primary 의 width:100% 가 한 줄에 선 입력칸을 0 으로 눌렀다(반 이름 칸). */
.dash-drawer > .card-body :is(button, a).btn-primary, .dash-drawer > .card-body :is(button, a).btn-line { width: auto; }
.perf-row button { flex: none; width: auto; }
.dash-drawer > .card-body a.btn-line { display: inline-flex; }
/* ── 수업 중 몸통 (스킨 「방송」 2-c) — 목업 02 ───────────────────
목업: 칸 테두리 없음 · 왼쪽 무대 / 오른쪽 한 판(활동 카드 + 채팅 줄) · 머리는 작은 이름표.
⚠️접기는 남긴다(하네스 53-a, 교사가 쓰는 기능). 머리를 작은 이름표로 낮춰 목업 모양에 맞춘다.
⚠️미리보기는 기본 작게 그대로 — 공유 중엔 교사 대시보드가 비친 그림이라 볼 것이 없다는 앞선 판단. */
.dash { max-width: 1400px; padding: 16px 24px 40px; }
@media (min-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; } }
.dash .card.dash-card { border: 0; background: none; border-radius: 14px; }
.dash .card.dash-card > .card-fold { padding: 4px 4px 8px; border: 0; background: none; }
.dash .card.dash-card > .card-fold h2 { font-size: 13px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.dash .card.dash-card > .card-fold .fold-i { font-size: 10px; }
.dash .card.dash-card > .card-body { padding: 0; }
/* 오른쪽 열 = 목업의 한 판: 떠 있는 면(--card) 한 장씩, 안쪽 16. */
.dash .dash-col:last-child .card.dash-card { background: var(--card); padding: 12px 16px 16px; }
.dash .dash-col:last-child .card.dash-card > .card-fold { padding: 0 0 8px; }
/* 무대 = 검은 판 위의 미리보기, 둥근 14. */
.dash .sc-preview { margin-top: 0; border: 0; border-radius: 14px; background: #000; }
/* 활동이 열려 있을 때 = 목업 「지금 열린 활동」 떠 있는 카드. */
.dash #actOn { background: var(--field); border-radius: 14px; padding: 14px; }
/* 채팅 = 목업 줄 단위: 이름 · 본문 · (올리면) 시각과 손. 가리기·조용히·기록 담기는 그대로 둔다. */
.dash .sc-tmsgs { gap: 2px; background: none; border: 0; padding: 0; }
.dash .sc-tmsgs .sc-m {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 6px; margin: 0;
background: none; border: 0; border-radius: 8px;
}
.dash .sc-tmsgs .sc-m:hover, .dash .sc-tmsgs .sc-m:focus-within { background: var(--field); }
.dash .sc-tmsgs .sc-m-top { display: contents; }
.dash .sc-tmsgs .sc-m-name { order: 1; flex: none; width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.dash .sc-tmsgs .sc-m.cont .sc-m-name { visibility: hidden; }
.dash .sc-tmsgs .sc-m-text { order: 2; flex: 1; min-width: 0; font-size: 14px; }
.dash .sc-tmsgs .sc-m-rep { order: 3; }
.dash .sc-tmsgs .sc-m-time { order: 4; flex: none; font-family: var(--mono); font-size: 11px; }
/* 손(기록 담기·가리기·조용히)은 평소엔 자리를 차지하지 않는다 — 투명하게만 두면 본문 칸이 눌린다.
올리거나 초점이 오면 아래 줄 오른쪽에 선다. */
.dash .sc-tmsgs .sc-m-btn { order: 6; flex: none; display: none; }
.dash .sc-tmsgs .sc-m-time { margin-right: 0; }
.dash .sc-tmsgs .sc-m:hover .sc-m-btn, .dash .sc-tmsgs .sc-m:focus-within .sc-m-btn { display: inline-flex; }
.dash .sc-tmsgs .sc-m:hover .sc-m-btn[data-act="pin"], .dash .sc-tmsgs .sc-m:focus-within .sc-m-btn[data-act="pin"] { margin-left: auto; }
.dash .sc-tmsgs .sc-m:hover::after, .dash .sc-tmsgs .sc-m:focus-within::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
.dash .sc-tmsgs .sc-m.ask { background: rgba(242, 193, 78, .08); }
.dash .sc-tmsgs .sc-m.tea { background: var(--primary-soft); }
.dash .sc-tmsgs .sc-m.pin { box-shadow: inset 2px 0 0 var(--gold); }
@media (hover: none) { .dash .sc-tmsgs .sc-m-btn { display: inline-flex; } .dash .sc-tmsgs .sc-m-btn[data-act="pin"] { margin-left: auto; } }