/* CAU STAGE — 무대 톤 (전략문서 v9 디자인 언어 이식)
   암전 블랙 + 스포트라이트 앰버(#e8a33d), 모노 타이포 액센트.
   다크 전용: "쇼" 정체성이 우선 (수업 중 암전 환경 기준). */
:root {
  --bg: #0f1113;
  --surface: #17191c;
  --surface-2: #1d2024;
  --line: #2a2e33;
  --line-2: #383d44;
  --text: #e9e7e2;
  --dim: #a8a49b;
  --faint: #73706a;
  --spot: #e8a33d;
  --spot-dim: #8a6524;
  --spot-ink: #1a1408;
  --green: #4ade80;
  --red: #e2564a;
  --blue: #6aa5d8;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden; /* 로그인 스포트라이트(::before)가 뷰포트를 넘지 않게 */
}

a { color: var(--spot); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 상단바: 무대 네임플레이트 ─────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono);
  font-size: 15px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--spot);
}
.brand .sub {
  font-family: var(--font);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0; color: var(--faint);
}
.topbar .who { font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 12px; }

.container { max-width: 760px; margin: 0 auto; padding: 26px 16px 64px; }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; text-wrap: balance; }
h2 { font-size: 16px; font-weight: 600; margin: 32px 0 12px; }
h2::before { content: "— "; color: var(--spot-dim); }

.muted { color: var(--faint); font-size: 13px; }
.sub { color: var(--dim); font-size: 13px; margin: 3px 0 0; }

/* ── 카드 ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s;
}
.card:hover { border-color: var(--line-2); }
.card.locked { opacity: .42; filter: saturate(.2); }
.card.locked:hover { border-color: var(--line); }
.topnav { display: flex; gap: 14px; font-size: 13px; }
.topnav a { color: var(--dim); text-decoration: none; }
.topnav a:hover { color: var(--text); }
.topnav a { position: relative; padding: 4px 0; }
.topnav a.on { color: var(--spot, #e8a33d); }
.topnav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--spot, #e8a33d); border-radius: 2px;
}
@media (max-width: 560px) { .topnav { gap: 10px; font-size: 12px; flex-wrap: wrap; } }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row .right { display: flex; align-items: center; gap: 10px; }

/* ── 배너/공지 ─────────────────────────────────────────── */
.banner {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--radius); padding: 12px 16px; margin: 14px 0;
  border: 1px solid var(--line);
  background: var(--surface);
}
.banner p { margin: 0; font-size: 14px; color: var(--dim); }
.banner .title { font-weight: 600; }
.banner.accent {
  border-color: rgba(232, 163, 61, .3);
  background: linear-gradient(180deg, rgba(232, 163, 61, .08), rgba(232, 163, 61, .02));
}
.banner.accent .title, .banner.accent p { color: var(--spot); }
.banner.danger { border-color: rgba(226, 86, 74, .35); }
.banner.danger, .banner.danger p { color: var(--red); }
.banner.warning { border-color: rgba(232, 163, 61, .35); }
.banner.warning, .banner.warning p { color: var(--spot); }
.banner.success { border-color: rgba(74, 222, 128, .3); }
.banner.success, .banner.success p { color: var(--green); }

/* ── 상태 배지: 티켓 필 ────────────────────────────────── */
.badge {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em;
  padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--line-2);
  white-space: nowrap; color: var(--dim);
}
.badge.ontime { color: var(--green); border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .06); }
.badge.late { color: var(--red); border-color: rgba(226, 86, 74, .4); background: rgba(226, 86, 74, .06); }
.badge.missing { color: var(--spot); border-color: rgba(232, 163, 61, .4); background: rgba(232, 163, 61, .06); }

/* ── 버튼 ──────────────────────────────────────────────── */
.btn {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 8px 14px; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--faint); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.primary {
  background: var(--spot); border-color: var(--spot);
  color: var(--spot-ink); font-weight: 700;
}
.btn.primary:hover { background: #f0b355; border-color: #f0b355; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
a.btn { display: inline-block; }
a.btn:hover { text-decoration: none; }

/* ── 폼 ────────────────────────────────────────────────── */
label { display: block; font-size: 13px; color: var(--dim); margin: 16px 0 6px; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], select, textarea {
  width: 100%; font: inherit; font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface-2); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--spot); outline-offset: -1px; border-color: var(--spot);
}
.check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; }
.check input { width: auto; accent-color: var(--spot); }
input[type=radio], input[type=checkbox] { accent-color: var(--spot); }

/* ── 지표 카드 ─────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; }
.metric .label { font-size: 12px; color: var(--faint); }
.metric .value { font-family: var(--mono); font-size: 24px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.metric .value.s { color: var(--green); }
.metric .value.d { color: var(--red); }
.metric .value.w { color: var(--spot); }

.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(232, 163, 61, .12); color: var(--spot);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* ── 업로드 존 ─────────────────────────────────────────── */
.dropzone {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; background: var(--surface); margin-top: 10px;
  transition: border-color .15s;
}
.dropzone:hover { border-color: var(--spot-dim); }
.dropzone .big { font-weight: 600; margin: 8px 0 2px; }
.upload-block { margin-bottom: 12px; }
.upload-block > label { font-weight: 600; color: var(--text); }

.thumb {
  width: 46px; height: 46px; border-radius: var(--radius);
  object-fit: cover; background: var(--surface-2); flex-shrink: 0;
}
.thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: var(--faint);
  border: 1px solid var(--line);
}

/* ── 로그인: 시네마틱 히어로 (배경은 추후 영상/작품 사진으로 교체 가능) ── */
/* 배경 영상: ffmpeg 자체 생성(저작권 無, 220KB 팔린드롬 루프). 교체 = login.mp4/포스터만 갈아끼우면 됨 */
.login-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -3; opacity: .75;
}
.login-bg-shade {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(10, 11, 13, .78) 100%),
    linear-gradient(rgba(15, 17, 19, .12), rgba(15, 17, 19, .5));
}
@media (prefers-reduced-motion: reduce) {
  .login-bg { display: none; }
}

.login-wrap {
  max-width: 380px; margin: 0 auto; padding: 0 16px;
  min-height: 88vh; display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
/* 떠다니는 무대 조명 두 개 — 순수 CSS, 가볍게 */
.login-wrap::before, .login-wrap::after {
  content: ""; position: fixed; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: -1;
}
.login-wrap::before {
  width: 55vw; height: 55vw; max-width: 720px; max-height: 720px;
  left: 8vw; top: -18vh;
  background: radial-gradient(circle, rgba(232, 163, 61, .12), transparent 62%);
  animation: drift-a 21s ease-in-out infinite alternate;
}
.login-wrap::after {
  width: 48vw; height: 48vw; max-width: 620px; max-height: 620px;
  right: 4vw; bottom: -22vh;
  background: radial-gradient(circle, rgba(106, 165, 216, .07), transparent 60%);
  animation: drift-b 29s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(14vw, 9vh) scale(1.15); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-11vw, -8vh) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .login-wrap::before, .login-wrap::after { animation: none; }
}
.login-card { position: relative; padding: 0; }
.login-card h1 {
  font-size: clamp(58px, 13vw, 92px); font-weight: 200;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); margin: 6px 0 0; line-height: 1.05;
}
.login-card h1 .dot { color: var(--spot); font-weight: 300; }
.login-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.login-card form { margin-top: 34px; }
.center { text-align: center; }
.lock { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 12px; }

/* ── 표 (온보딩 등) ────────────────────────────────────── */
.onboard-table {
  width: 100%; border-collapse: collapse; margin: 10px 0 20px;
  font-size: 13px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.onboard-table th, .onboard-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.onboard-table th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; background: var(--surface-2);
}
.onboard-table tr:last-child td { border-bottom: none; }
.onboard-table code { font-family: var(--mono); font-size: 13px; color: var(--spot); }

/* ── 설문 O/△/X ───────────────────────────────────────── */
.survey-item { margin-bottom: 18px; }
.survey-item .q-text { font-size: 14px; margin: 0 0 8px; }
.oax-group { display: flex; gap: 10px; }
.oax-group label {
  display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 8px 16px; border: 1px solid var(--line-2); border-radius: var(--radius);
  font-size: 14px; color: var(--text); cursor: pointer; transition: border-color .12s;
}
.oax-group label:hover { border-color: var(--spot-dim); }
.oax-group input { width: auto; margin: 0; }

/* ── 모바일 ────────────────────────────────────────────── */
@media (max-width: 560px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 20px 14px 56px; }
  .topbar { padding: 12px 16px; }
  .brand .sub { display: none; }
  .row { flex-wrap: wrap; }
}

/* ===== P3 GRADING ===== */
/* 루브릭 채점 그리드 — 학점입력기 DNA(다크+그린) 계승: 최종점수·저장 확인은
   앰버가 아니라 --green 을 써서 "채점 확정" 계열임을 시각적으로 구분한다. */
.grading-wrap { max-width: 1180px; }

.grading-scroll { overflow-x: auto; margin-top: 14px; }

.grading-table {
  border-collapse: collapse; width: 100%; min-width: 640px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.grading-table th, .grading-table td {
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 10px; vertical-align: top; text-align: left;
}
.grading-table th:last-child, .grading-table td:last-child { border-right: none; }
.grading-table tr:last-child td { border-bottom: none; }
.grading-table th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--dim); font-weight: 500; background: var(--surface-2);
  white-space: nowrap;
}
.grading-namecol { min-width: 130px; white-space: nowrap; }
.grading-namecol .badge { margin-top: 6px; }

.grading-cell { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.grading-final {
  font-family: var(--mono); font-size: 18px; font-weight: 700;
  color: var(--green); font-variant-numeric: tabular-nums;
}
.grading-row {
  display: flex; align-items: center; gap: 4px; margin: 0;
}
.grading-row input[type=number] {
  width: 64px; padding: 5px 7px; font-size: 12px; margin: 0;
}
.grading-row .btn { padding: 5px 9px; font-size: 12px; }
.grading-sublabel {
  font-size: 10px; color: var(--faint); margin: 0; min-width: 34px; flex-shrink: 0;
}
.grading-row.rs .grading-final,
.grading-row .grading-sublabel { color: var(--faint); }

@media (max-width: 560px) {
  .grading-row input[type=number] { width: 54px; }
}
/* [P3 RSNOTICE 작업 중 발견·수정] 위 @media 블록이 닫히지 않아 이후 전체
   (P3 GALLERY 포함)가 그 안에 갇혀 있었다 — 즉 갤러리 스타일이 지금까지 560px 이하
   화면에서만 적용되고 있었을 가능성이 있다(브라우저의 무효 규칙 처리 방식에 따라 다름).
   여기서 닫는 중괄호 1개만 추가해 원래 규칙들의 중첩 구조는 그대로 두었다. */

/* ===== P3 GALLERY =====
   갤러리는 시스템 UI — 쇼 화면의 스포트라이트 앰버(--spot)는 쓰지 않는다.
   기본 강조색은 --green, 사용자가 고른 액센트는 인라인 --sw/--accent 변수로 얹는다. */

/* ── CSS만으로 동작하는 탭(편집/방명록) ─────────────────── */
.gallery-tabs input[type=radio] { display: none; }
.gallery-tabbar {
  display: flex; gap: 6px; margin: 16px 0 18px;
  border-bottom: 1px solid var(--line);
}
.gallery-tabbar label {
  font-size: 13px; font-weight: 500; color: var(--faint);
  padding: 8px 4px 10px; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
#gtab-edit:checked ~ .gallery-tabbar label[for=gtab-edit],
#gtab-guestbook:checked ~ .gallery-tabbar label[for=gtab-guestbook] {
  color: var(--green); border-bottom-color: var(--green);
}
.gallery-panel { display: none; }
#gtab-edit:checked ~ .panel-edit { display: block; }
#gtab-guestbook:checked ~ .panel-guestbook { display: block; }

/* ── 공개 설정 라디오 카드 ──────────────────────────────── */
.gallery-vis-options { display: flex; flex-direction: column; gap: 10px; }
.gallery-vis-opt {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.gallery-vis-opt input { width: auto; margin: 0; accent-color: var(--green); }
.gallery-vis-opt .sub { margin: 0; }

/* ── 액센트 컬러 스와치 ─────────────────────────────────── */
.gallery-accent-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-accent-swatch {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: var(--sw); border: 2px solid transparent; display: inline-block;
  transition: border-color .12s, transform .12s;
}
.gallery-accent-swatch:has(input:checked) { border-color: var(--text); transform: scale(1.12); }
.gallery-accent-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ── 파일 그리드(자동 누적 + 커버·대표작 선택) ──────────── */
.gallery-file-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin: 10px 0;
}
.gallery-file-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px;
}
.gallery-file-card.no-thumb { opacity: .7; }
.gallery-file-thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  background: var(--surface-2); display: block;
}
.gallery-file-noimg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: uppercase;
}
.gallery-file-controls { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.gallery-order-input {
  width: 100%; font-size: 12px; padding: 4px 8px; margin-top: 2px;
}

/* ── 버튼: 갤러리 전용 강조(그린) ───────────────────────── */
.btn.gallery-primary {
  background: var(--green); border-color: var(--green); color: #062112;
}
.btn.gallery-primary:hover { background: #6be89a; border-color: #6be89a; }

/* ── 방명록 ─────────────────────────────────────────────── */
.gallery-guest-line {
  font-size: 14px; color: var(--dim); margin: 6px 0; padding-left: 10px;
  border-left: 2px solid var(--line-2);
}

/* ── 쿠도스 스탬프(내 갤러리 — 보유 여부만) ─────────────── */
.gallery-stamp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px; margin: 10px 0;
}
.gallery-stamp {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; font-size: 13px; color: var(--faint);
}
.gallery-stamp.owned { color: var(--text); border-color: rgba(74, 222, 128, .3); }

/* ── 방문자 화면(class/link 공개) ───────────────────────── */
.gallery-public-head { text-align: center; margin-bottom: 24px; }
.gallery-cover {
  width: 100%; max-width: 420px; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 14px; border: 2px solid var(--accent, var(--green));
  margin: 0 auto 16px; display: block;
}
.gallery-public-head h1 { text-align: center; }
.gallery-statement {
  color: var(--dim); font-size: 14px; max-width: 480px; margin: 8px auto 0;
}
.gallery-featured-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin: 10px 0 20px;
}
.gallery-featured-img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
  background: var(--surface-2);
}
.gallery-stamp-send-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.gallery-stamp-btn.sent { color: var(--green); border-color: rgba(74, 222, 128, .4); }

/* ── 봉인 캡슐 ───────────────────────────────────────────── */
.gallery-capsule-sealed {
  font-family: var(--mono); font-size: 15px; letter-spacing: .08em; color: var(--faint);
  margin: 0;
}

/* ── 모바일 ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .gallery-file-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .gallery-featured-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ===== P3 GROUPING ===== */
.grouping-class-picker {
  margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.grouping-stats .row { align-items: flex-start; }
.grouping-existing-row {
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.grouping-existing-row:last-child { border-bottom: none; }
.grouping-reasons { border-left: 2px solid var(--green); }
.grouping-proposal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin: 10px 0;
}
.grouping-group-card { border-color: rgba(74, 222, 128, .25); }
.grouping-confirm-card { border-left: 2px solid var(--green); }
/* ===== P3 ARCHIVE =====
   자료실·레퍼런스 피드·공지·품앗이 보드 — 시스템 UI 톤(--green), 쇼 화면과 분리. */

.archive-nav { margin: 4px 0 18px; }
.archive-nav a { color: var(--dim); }
.archive-nav a:hover { color: var(--green); }

.archive-tabs { display: flex; align-items: center; gap: 8px; margin: 16px 0 18px; flex-wrap: wrap; }

/* ── 공지: 중요 배지 ────────────────────────────────────── */
.badge.accent-badge {
  color: var(--spot); border-color: rgba(232, 163, 61, .4); background: rgba(232, 163, 61, .08);
  margin-right: 6px;
}
.archive-notice-row { text-decoration: none; display: flex; }
.archive-notice-row:hover { text-decoration: none; }
.archive-notice-body { white-space: pre-wrap; }
.archive-notice-history { border-style: dashed; opacity: .85; }

/* ── 레퍼런스 피드 ──────────────────────────────────────── */
.archive-ref-card { padding: 12px; }
.archive-ref-img {
  width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius);
  background: var(--surface-2); display: block;
}
.archive-react-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.archive-react-btn { font-size: 12px; padding: 6px 10px; }
.archive-react-btn.on { color: var(--green); border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .08); }
.archive-react-count { color: var(--faint); font-family: var(--mono); margin-left: 4px; }
.archive-react-btn.on .archive-react-count { color: var(--green); }

/* ── 모바일 ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .archive-ref-img { max-height: 240px; }
}

/* ===== P3 RSNOTICE ===== */
/* RS(재제출) 공지 자동화 + 미제출 대시보드. 기존 --red(지연/late) 계열을 그대로 재사용해
   "주의가 필요한 상태"라는 시각 언어를 통일한다(새 색을 만들지 않음). */

/* ── RS 대상 지정 화면(교사) ─────────────────────────────── */
.rsnotice-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.rsnotice-student-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer;
}
.rsnotice-student-row:hover { border-color: var(--line-2); }
.rsnotice-student-row.active { border-color: rgba(226, 86, 74, .35); }
.rsnotice-student-row input[type=checkbox] { width: auto; margin: 0; }
.rsnotice-student-name { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 14px; }
.rsnotice-student-flags { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rsnotice-reason-preview { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 학생 화면(내 과제·제출폼) — 본인에게만 렌더링됨(서버에서 이미 걸러짐) ── */
.badge.rsnotice-badge { color: var(--red); border-color: rgba(226, 86, 74, .4); background: rgba(226, 86, 74, .06); }
.banner.rsnotice-callout { border-color: rgba(226, 86, 74, .45); }

/* ── 미제출 대시보드 ─────────────────────────────────────── */
.missing-urgent { border-color: rgba(226, 86, 74, .5); background: rgba(226, 86, 74, .05); }
.missing-row { padding: 12px 14px; }
.missing-group-members { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

@media (max-width: 560px) {
  .rsnotice-student-row { align-items: flex-start; }
  .rsnotice-reason-preview { max-width: 140px; }
}

/* ===== GALLERY THEMES =====
   갤러리 개인화(갤러리_개인화_SPEC §5) — 조합형 룩 토큰.
   무드(.gtheme-*)는 CSS 변수(--g-*)만 선언하고, 갤러리 표시 영역(.gwrap) 내부는
   그 변수만 소비한다(앱 전역 변수 --spot 등은 여기서 쓰지 않는다).
   프레임 .gframe-* / 레이아웃 .glayout-* / 타이포 .gtype-* / 그레인 .ggrain.
   웹폰트는 /static/fonts 자체 호스팅(OFL) — 파일이 없거나 서브셋 밖 글자는
   unicode-range 덕에 폴백 스택으로 자연 강등된다(깨지지 않음). */

/* ── 웹폰트(자체 호스팅, 한글 고빈도 슬라이스 + 라틴) ────── */
@font-face {
  font-family: 'Noto Serif KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-serif-kr-0.woff2') format('woff2');
  unicode-range: U+39, U+49, U+4d-4e, U+a0, U+ac04, U+ac1c, U+ac70, U+ac8c, U+acbd, U+acf5, U+acfc, U+ad00, U+ad6c, U+adf8, U+b098, U+b0b4, U+b294, U+b2c8, U+b300, U+b3c4, U+b3d9, U+b4dc, U+b4e4, U+b77c, U+b7ec, U+b85d, U+b97c, U+b9c8, U+b9cc, U+ba54, U+ba74, U+ba85, U+baa8, U+bb34, U+bb38, U+bbf8, U+bc14, U+bc29, U+bc88, U+bcf4, U+bd80, U+be44, U+c0c1, U+c11c, U+c120, U+c131, U+c138, U+c18c, U+c218, U+c2b5, U+c2e0, U+c544, U+c548, U+c5b4, U+c5d0, U+c5ec, U+c5f0, U+c601, U+c624, U+c694, U+c6a9, U+c6b0, U+c6b4, U+c6d0, U+c704, U+c720, U+c73c, U+c740, U+c744, U+c74c, U+c758, U+c77c, U+c785, U+c788, U+c790-c791, U+c7a5, U+c804, U+c815, U+c81c, U+c870, U+c8fc, U+c911, U+c9c4, U+ccb4, U+ce58, U+ce74, U+d06c, U+d0c0, U+d130, U+d2b8, U+d3ec, U+d504, U+d55c, U+d569, U+d574, U+d638, U+d654, U+d68c;
}
@font-face {
  font-family: 'Noto Serif KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-serif-kr-1.woff2') format('woff2');
  unicode-range: U+d, U+48, U+7c, U+ac10, U+ac15, U+ac74, U+ac80, U+ac83, U+acc4, U+ad11, U+ad50, U+ad6d, U+adfc, U+ae00, U+ae08, U+ae4c, U+b0a8, U+b124, U+b144, U+b178, U+b274, U+b2a5, U+b2e8, U+b2f9, U+b354, U+b370, U+b418, U+b41c, U+b4f1, U+b514, U+b798, U+b808, U+b824-b825, U+b8cc, U+b978, U+b9d0, U+b9e4, U+baa9, U+bb3c, U+bc18, U+bc1c, U+bc30, U+bc84, U+bcf5, U+bcf8, U+bd84, U+be0c, U+be14, U+c0b0, U+c0c9, U+c0dd, U+c124, U+c2dd, U+c2e4, U+c2ec, U+c54c, U+c57c-c57d, U+c591, U+c5c5-c5c6, U+c5ed, U+c608, U+c640, U+c6b8, U+c6d4, U+c784, U+c7ac, U+c800-c801, U+c9c1, U+c9d1, U+cc28, U+cc98, U+cc9c, U+ccad, U+cd5c, U+cd94, U+cd9c, U+cde8, U+ce68, U+cf54, U+d0dc, U+d14c, U+d1a0, U+d1b5, U+d2f0, U+d30c, U+d310, U+d398, U+d45c, U+d50c, U+d53c, U+d560, U+d568, U+d589, U+d604, U+d6c4, U+d788;
}
@font-face {
  font-family: 'Noto Serif KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-serif-kr-2.woff2') format('woff2');
  unicode-range: U+26, U+2b, U+3e, U+40, U+7e, U+ac01, U+ac19, U+ac1d, U+aca0, U+aca9, U+acb0, U+ad8c, U+ae09, U+ae38, U+ae40, U+aed8, U+b09c, U+b0a0, U+b108, U+b204, U+b298, U+b2d8, U+b2eb-b2ec, U+b2f4, U+b313, U+b358, U+b450, U+b4e0, U+b54c, U+b610, U+b780, U+b78c, U+b791, U+b8e8, U+b958, U+b974, U+b984, U+b9b0, U+b9bc-b9bd, U+b9ce, U+ba70, U+bbfc, U+bc0f, U+bc15, U+bc1b, U+bc31, U+bc95, U+bcc0, U+bcc4, U+bd81, U+bd88, U+c0c8, U+c11d, U+c13c, U+c158, U+c18d, U+c1a1, U+c21c, U+c4f0, U+c54a, U+c560, U+c5b8, U+c5c8, U+c5f4, U+c628, U+c62c, U+c678, U+c6cc, U+c808, U+c810, U+c885, U+c88b, U+c900, U+c988, U+c99d, U+c9c8, U+cc3d-cc3e, U+cc45, U+cd08, U+ce20, U+cee4, U+d074, U+d0a4, U+d0dd, U+d2b9, U+d3b8, U+d3c9, U+d488, U+d544, U+d559, U+d56d, U+d588, U+d615, U+d648, U+d655, U+d658, U+d65c;
}
@font-face {
  font-family: 'Noto Serif KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-serif-kr-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Black Han Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/black-han-sans-0.woff2') format('woff2');
  unicode-range: U+39, U+49, U+4d-4e, U+a0, U+ac04, U+ac1c, U+ac70, U+ac8c, U+acbd, U+acf5, U+acfc, U+ad00, U+ad6c, U+adf8, U+b098, U+b0b4, U+b294, U+b2c8, U+b300, U+b3c4, U+b3d9, U+b4dc, U+b4e4, U+b77c, U+b7ec, U+b85d, U+b97c, U+b9c8, U+b9cc, U+ba54, U+ba74, U+ba85, U+baa8, U+bb34, U+bb38, U+bbf8, U+bc14, U+bc29, U+bc88, U+bcf4, U+bd80, U+be44, U+c0c1, U+c11c, U+c120, U+c131, U+c138, U+c18c, U+c218, U+c2b5, U+c2e0, U+c544, U+c548, U+c5b4, U+c5d0, U+c5ec, U+c5f0, U+c601, U+c624, U+c694, U+c6a9, U+c6b0, U+c6b4, U+c6d0, U+c704, U+c720, U+c73c, U+c740, U+c744, U+c74c, U+c758, U+c77c, U+c785, U+c788, U+c790-c791, U+c7a5, U+c804, U+c815, U+c81c, U+c870, U+c8fc, U+c911, U+c9c4, U+ccb4, U+ce58, U+ce74, U+d06c, U+d0c0, U+d130, U+d2b8, U+d3ec, U+d504, U+d55c, U+d569, U+d574, U+d638, U+d654, U+d68c;
}
@font-face {
  font-family: 'Black Han Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/black-han-sans-1.woff2') format('woff2');
  unicode-range: U+d, U+48, U+7c, U+ac10, U+ac15, U+ac74, U+ac80, U+ac83, U+acc4, U+ad11, U+ad50, U+ad6d, U+adfc, U+ae00, U+ae08, U+ae4c, U+b0a8, U+b124, U+b144, U+b178, U+b274, U+b2a5, U+b2e8, U+b2f9, U+b354, U+b370, U+b418, U+b41c, U+b4f1, U+b514, U+b798, U+b808, U+b824-b825, U+b8cc, U+b978, U+b9d0, U+b9e4, U+baa9, U+bb3c, U+bc18, U+bc1c, U+bc30, U+bc84, U+bcf5, U+bcf8, U+bd84, U+be0c, U+be14, U+c0b0, U+c0c9, U+c0dd, U+c124, U+c2dd, U+c2e4, U+c2ec, U+c54c, U+c57c-c57d, U+c591, U+c5c5-c5c6, U+c5ed, U+c608, U+c640, U+c6b8, U+c6d4, U+c784, U+c7ac, U+c800-c801, U+c9c1, U+c9d1, U+cc28, U+cc98, U+cc9c, U+ccad, U+cd5c, U+cd94, U+cd9c, U+cde8, U+ce68, U+cf54, U+d0dc, U+d14c, U+d1a0, U+d1b5, U+d2f0, U+d30c, U+d310, U+d398, U+d45c, U+d50c, U+d53c, U+d560, U+d568, U+d589, U+d604, U+d6c4, U+d788;
}
@font-face {
  font-family: 'Black Han Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/black-han-sans-2.woff2') format('woff2');
  unicode-range: U+26, U+2b, U+3e, U+40, U+7e, U+ac01, U+ac19, U+ac1d, U+aca0, U+aca9, U+acb0, U+ad8c, U+ae09, U+ae38, U+ae40, U+aed8, U+b09c, U+b0a0, U+b108, U+b204, U+b298, U+b2d8, U+b2eb-b2ec, U+b2f4, U+b313, U+b358, U+b450, U+b4e0, U+b54c, U+b610, U+b780, U+b78c, U+b791, U+b8e8, U+b958, U+b974, U+b984, U+b9b0, U+b9bc-b9bd, U+b9ce, U+ba70, U+bbfc, U+bc0f, U+bc15, U+bc1b, U+bc31, U+bc95, U+bcc0, U+bcc4, U+bd81, U+bd88, U+c0c8, U+c11d, U+c13c, U+c158, U+c18d, U+c1a1, U+c21c, U+c4f0, U+c54a, U+c560, U+c5b8, U+c5c8, U+c5f4, U+c628, U+c62c, U+c678, U+c6cc, U+c808, U+c810, U+c885, U+c88b, U+c900, U+c988, U+c99d, U+c9c8, U+cc3d-cc3e, U+cc45, U+cd08, U+ce20, U+cee4, U+d074, U+d0a4, U+d0dd, U+d2b9, U+d3b8, U+d3c9, U+d488, U+d544, U+d559, U+d56d, U+d588, U+d615, U+d648, U+d655, U+d658, U+d65c;
}
@font-face {
  font-family: 'Black Han Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/black-han-sans-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/gaegu-0.woff2') format('woff2');
  unicode-range: U+39, U+49, U+4d-4e, U+a0, U+ac04, U+ac1c, U+ac70, U+ac8c, U+acbd, U+acf5, U+acfc, U+ad00, U+ad6c, U+adf8, U+b098, U+b0b4, U+b294, U+b2c8, U+b300, U+b3c4, U+b3d9, U+b4dc, U+b4e4, U+b77c, U+b7ec, U+b85d, U+b97c, U+b9c8, U+b9cc, U+ba54, U+ba74, U+ba85, U+baa8, U+bb34, U+bb38, U+bbf8, U+bc14, U+bc29, U+bc88, U+bcf4, U+bd80, U+be44, U+c0c1, U+c11c, U+c120, U+c131, U+c138, U+c18c, U+c218, U+c2b5, U+c2e0, U+c544, U+c548, U+c5b4, U+c5d0, U+c5ec, U+c5f0, U+c601, U+c624, U+c694, U+c6a9, U+c6b0, U+c6b4, U+c6d0, U+c704, U+c720, U+c73c, U+c740, U+c744, U+c74c, U+c758, U+c77c, U+c785, U+c788, U+c790-c791, U+c7a5, U+c804, U+c815, U+c81c, U+c870, U+c8fc, U+c911, U+c9c4, U+ccb4, U+ce58, U+ce74, U+d06c, U+d0c0, U+d130, U+d2b8, U+d3ec, U+d504, U+d55c, U+d569, U+d574, U+d638, U+d654, U+d68c;
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/gaegu-1.woff2') format('woff2');
  unicode-range: U+d, U+48, U+7c, U+ac10, U+ac15, U+ac74, U+ac80, U+ac83, U+acc4, U+ad11, U+ad50, U+ad6d, U+adfc, U+ae00, U+ae08, U+ae4c, U+b0a8, U+b124, U+b144, U+b178, U+b274, U+b2a5, U+b2e8, U+b2f9, U+b354, U+b370, U+b418, U+b41c, U+b4f1, U+b514, U+b798, U+b808, U+b824-b825, U+b8cc, U+b978, U+b9d0, U+b9e4, U+baa9, U+bb3c, U+bc18, U+bc1c, U+bc30, U+bc84, U+bcf5, U+bcf8, U+bd84, U+be0c, U+be14, U+c0b0, U+c0c9, U+c0dd, U+c124, U+c2dd, U+c2e4, U+c2ec, U+c54c, U+c57c-c57d, U+c591, U+c5c5-c5c6, U+c5ed, U+c608, U+c640, U+c6b8, U+c6d4, U+c784, U+c7ac, U+c800-c801, U+c9c1, U+c9d1, U+cc28, U+cc98, U+cc9c, U+ccad, U+cd5c, U+cd94, U+cd9c, U+cde8, U+ce68, U+cf54, U+d0dc, U+d14c, U+d1a0, U+d1b5, U+d2f0, U+d30c, U+d310, U+d398, U+d45c, U+d50c, U+d53c, U+d560, U+d568, U+d589, U+d604, U+d6c4, U+d788;
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/gaegu-2.woff2') format('woff2');
  unicode-range: U+26, U+2b, U+3e, U+40, U+7e, U+ac01, U+ac19, U+ac1d, U+aca0, U+aca9, U+acb0, U+ad8c, U+ae09, U+ae38, U+ae40, U+aed8, U+b09c, U+b0a0, U+b108, U+b204, U+b298, U+b2d8, U+b2eb-b2ec, U+b2f4, U+b313, U+b358, U+b450, U+b4e0, U+b54c, U+b610, U+b780, U+b78c, U+b791, U+b8e8, U+b958, U+b974, U+b984, U+b9b0, U+b9bc-b9bd, U+b9ce, U+ba70, U+bbfc, U+bc0f, U+bc15, U+bc1b, U+bc31, U+bc95, U+bcc0, U+bcc4, U+bd81, U+bd88, U+c0c8, U+c11d, U+c13c, U+c158, U+c18d, U+c1a1, U+c21c, U+c4f0, U+c54a, U+c560, U+c5b8, U+c5c8, U+c5f4, U+c628, U+c62c, U+c678, U+c6cc, U+c808, U+c810, U+c885, U+c88b, U+c900, U+c988, U+c99d, U+c9c8, U+cc3d-cc3e, U+cc45, U+cd08, U+ce20, U+cee4, U+d074, U+d0a4, U+d0dd, U+d2b9, U+d3b8, U+d3c9, U+d488, U+d544, U+d559, U+d56d, U+d588, U+d615, U+d648, U+d655, U+d658, U+d65c;
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/gaegu-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 무드: .gtheme-* 는 변수 선언만 (SPEC §5 표) ─────────── */
.gtheme-darkroom  { --g-bg:#141210; --g-surface:#1e1b18; --g-text:#e8e2d8; --g-sub:#8a8378; --g-line:#2a2724; --g-mat:#292520; --g-grain-op:.1; }
.gtheme-whitecube { --g-bg:#fcfcfa; --g-surface:#ffffff; --g-text:#1a1a18; --g-sub:#8b8983; --g-line:#e3e1dc; --g-mat:#ffffff; --g-grain-op:.06; }
.gtheme-cream     { --g-bg:#f6f1e7; --g-surface:#fbf8f1; --g-text:#3a342a; --g-sub:#94896f; --g-line:#e5dcc9; --g-mat:#fffdf7; --g-grain-op:.06; }
.gtheme-midnight  { --g-bg:#1c1e22; --g-surface:#24262c; --g-text:#d8dce2; --g-sub:#7c828c; --g-line:#33363c; --g-mat:#2e3138; --g-grain-op:.1; }
.gtheme-newsprint { --g-bg:#efece4; --g-surface:#f5f3ec; --g-text:#232323; --g-sub:#6f6d68; --g-line:#cfccc2; --g-mat:#faf8f2; --g-grain-op:.06; }
.gtheme-brutal    { --g-bg:#ffffff; --g-surface:#ffffff; --g-text:#000000; --g-sub:#555555; --g-line:#000000; --g-mat:#ffffff; --g-grain-op:.06; --g-radius:0; }
.gtheme-cinema    { --g-bg:#101114; --g-surface:#17181c; --g-text:#d6d3cc; --g-sub:#8d8a82; --g-line:#26272c; --g-mat:#202127; --g-grain-op:.1; }
.gtheme-riso      { --g-bg:#f4f1ea; --g-surface:#fdfbf6; --g-text:#1c2f8f; --g-sub:#7a83b8; --g-line:#b9c0e8; --g-mat:#ffffff; --g-grain-op:.06; }
/* print 전용 무드 — 무드 강제 화이트(잉크). 인쇄 뷰는 gtheme-* 저장값과 무관하게 이것만 쓴다. */
.gprint           { --g-bg:#ffffff; --g-surface:#ffffff; --g-text:#111111; --g-sub:#666666; --g-line:#dddddd; --g-mat:#fafafa; --g-radius:4px; }

/* ── 타이포: .gtype-* 는 폰트 변수 선언만 (§5) ───────────── */
.gtype-serif   { --g-font-head: 'Noto Serif KR', Georgia, 'Apple SD Gothic Neo', 'Noto Serif', serif;
                 --g-font-cap:  'Noto Serif KR', Georgia, 'Apple SD Gothic Neo', 'Noto Serif', serif; }
.gtype-gothic  { --g-font-head: var(--font); --g-font-cap: var(--font); }
.gtype-mono    { --g-font-head: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'Apple SD Gothic Neo', monospace;
                 --g-font-cap:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'Apple SD Gothic Neo', monospace; }
.gtype-display { --g-font-head: 'Black Han Sans', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
                 --g-font-cap:  var(--font); } /* 디스플레이는 문패·헤딩만 — 본문은 고딕 */
.gtype-hand    { --g-font-head: 'Gaegu', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
                 --g-font-cap:  'Gaegu', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }

/* ── 래퍼: 갤러리 표시 영역 — --g-* 변수만 소비 ──────────── */
.gwrap {
  position: relative; overflow: hidden;
  background: var(--g-bg); color: var(--g-text);
  border: 1px solid var(--g-line); border-radius: var(--g-radius, 14px);
  padding: 26px 20px 30px; margin: 10px 0 22px;
}
.gwrap h1, .gwrap h2 { color: var(--g-text); font-family: var(--g-font-head, var(--font)); }
.gwrap h2::before { color: var(--g-sub); }
.gwrap .sub, .gwrap .muted { color: var(--g-sub); }
.gwrap a { color: var(--g-text); }
.gwrap .card {
  background: var(--g-surface); border-color: var(--g-line);
  border-radius: var(--g-radius, 12px); color: var(--g-text);
}
.gwrap .btn {
  background: var(--g-surface); color: var(--g-text); border-color: var(--g-line);
  border-radius: var(--g-radius, 10px);
}
.gwrap .btn:hover { background: var(--g-bg); border-color: var(--g-sub); }
.gwrap .badge { color: var(--g-sub); border-color: var(--g-line); }
.gwrap .gallery-statement {
  color: var(--g-sub); font-family: var(--g-font-cap, var(--font)); white-space: pre-wrap;
}
.gwrap .gallery-cover { border-color: var(--accent, var(--g-line)); border-radius: var(--g-radius, 14px); }
.gwrap .gallery-stamp-btn.sent { color: var(--g-text); border-color: var(--g-sub); }

/* 문패 */
.g-nameplate { text-align: center; margin: 2px 0 20px; }
.g-nameplate h1 {
  font-size: 28px; letter-spacing: -.01em; margin: 0;
  font-family: var(--g-font-head, var(--font)); font-weight: 600; text-wrap: balance;
}
.gtype-display .g-nameplate h1, .gtype-hand .g-nameplate h1 { font-weight: 400; font-size: 32px; }
.g-nameplate .g-subtitle { color: var(--g-sub); font-size: 14px; margin: 6px 0 0;
  font-family: var(--g-font-cap, var(--font)); }
.g-nameplate .g-owner { color: var(--g-sub); font-size: 12px; margin: 8px 0 0; letter-spacing: .06em; }
.g-nameplate::after {
  content: ""; display: block; width: 44px; height: 3px;
  background: var(--accent, var(--g-sub)); margin: 14px auto 0; border-radius: 2px;
}
.gtheme-brutal .g-nameplate::after { border-radius: 0; }

/* 사운드트랙 카드 — 문패 아래 (§4) */
.g-soundtrack { margin: 0 auto 22px; max-width: 480px; }
.g-soundtrack .gallery-soundtrack-frame { margin-top: 8px; }
.gallery-soundtrack-frame { width: 100%; border: 0; border-radius: 10px; display: block; height: 80px; }
.g-soundtrack.youtube .gallery-soundtrack-frame,
.gallery-soundtrack-frame.youtube { aspect-ratio: 16 / 9; height: auto; }

/* ── 작품 그리드(.ggrid)와 셀(.gcell) ────────────────────── */
.gwrap .ggrid { display: grid; gap: 14px; margin: 12px 0 24px; counter-reset: gcell; }
.gcell { margin: 0; position: relative; min-width: 0; counter-increment: gcell; }
.gwrap .gcell > img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--g-radius, 8px); background: var(--g-surface);
}
.g-caption {
  font-size: 12px; color: var(--g-sub); margin: 6px 0 0; line-height: 1.5;
  font-family: var(--g-font-cap, var(--font));
}
.g-caption .g-caption-title { color: var(--g-text); font-weight: 600; }

/* 레이아웃 (§5) */
.glayout-grid .ggrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.glayout-magazine .ggrid { grid-template-columns: repeat(3, 1fr); }
.glayout-magazine .ggrid .gcell:first-child { grid-column: span 2; grid-row: span 2; }
.glayout-single .ggrid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; gap: 46px; }
.gwrap.glayout-single .gcell > img { aspect-ratio: auto; }
.glayout-bento .ggrid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.glayout-bento .ggrid .gcell:first-child { grid-column: span 2; grid-row: span 2; }
.glayout-bento .ggrid .gcell:nth-child(2) { grid-column: span 2; }
/* 스팬 셀은 셀 높이를 꽉 채운다(빈 바닥 방지) */
.glayout-magazine .ggrid .gcell:first-child > img,
.glayout-bento .ggrid .gcell:first-child > img,
.glayout-bento .ggrid .gcell:nth-child(2) > img { height: 100%; aspect-ratio: auto; }
.glayout-freewall .ggrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.glayout-freewall .ggrid .gcell:nth-child(odd)  { transform: rotate(-1deg) translate(-4px, 3px); }
.glayout-freewall .ggrid .gcell:nth-child(even) { transform: rotate(1.1deg) translate(4px, -3px); }
.glayout-freewall .ggrid .gcell:nth-child(3n)   { transform: rotate(-.4deg) translate(2px, 6px); }

/* 프레임 (§5 — 작품 셀에) */
.gframe-mat .gcell { background: var(--g-mat, #fff); padding: 8%; }
.gframe-mat .gcell > img { box-shadow: 0 0 0 1px var(--g-line); border-radius: 0; }

.gframe-polaroid .gcell { background: #fff; padding: 4% 4% 13%; border-radius: 2px; }
.gframe-polaroid .gcell > img { border-radius: 0; }
.gframe-polaroid .gcell:nth-child(odd)  { transform: rotate(-1.2deg); }
.gframe-polaroid .gcell:nth-child(even) { transform: rotate(1deg); }
.gframe-polaroid .g-caption { color: #57524a; text-align: center; }
.gframe-polaroid .g-caption .g-caption-title { color: #2c2925; }

.gframe-filmstrip .gcell { background: #0b0b0b; padding: 16px 6px; border-radius: 0; }
.gframe-filmstrip .gcell::before, .gframe-filmstrip .gcell::after {
  content: ""; position: absolute; left: 6px; right: 6px; height: 7px; border-radius: 0;
  background: repeating-linear-gradient(90deg, rgba(245,245,240,.85) 0 8px, transparent 8px 19px);
}
.gframe-filmstrip .gcell::before { top: 4px; }
.gframe-filmstrip .gcell::after { bottom: 4px; }
.gframe-filmstrip .gcell > img { border-radius: 0; }
.gframe-filmstrip .g-caption { padding: 6px 4px 0; color: #b7b3aa; }
.gframe-filmstrip .g-caption .g-caption-title { color: #eae7df; }

.gframe-contact .gcell { background: #111; padding: 7px 7px 0; border-radius: 0; }
.gframe-contact .gcell > img { outline: 1px solid rgba(255,255,255,.75); border-radius: 0; }
.gframe-contact .gcell::after {
  content: "no." counter(gcell, decimal-leading-zero);
  display: block; text-align: center; padding: 4px 0 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: #cfcbc2;
}
.gframe-contact .g-caption { padding: 0 2px 8px; color: #b7b3aa; }
.gframe-contact .g-caption .g-caption-title { color: #eae7df; }

.gframe-scanborder .gcell { border: 10px solid #000; border-radius: 0; background: #000; }
.gframe-scanborder .gcell > img { border-radius: 0; }
.gframe-scanborder .gcell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid #e0492f; z-index: 2;
}

.gframe-tape .gcell { transform: rotate(.6deg); }
.gframe-tape .gcell:nth-child(odd) { transform: rotate(-.8deg); }
.gframe-tape .gcell::before {
  content: ""; position: absolute; top: -9px; left: 10%;
  width: 34%; min-width: 46px; height: 20px;
  background: rgba(255, 255, 240, .5); transform: rotate(-4deg);
  z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.03);
}

/* 무드 소품: 시네마 레터박스 / 브루탈 각 잡기 */
.gtheme-cinema .gcell > img { border-top: 12px solid #000; border-bottom: 12px solid #000; background: #000; }
.gtheme-brutal.gwrap, .gtheme-brutal .card, .gtheme-brutal .btn,
.gtheme-brutal .gcell, .gtheme-brutal .gcell > img,
.gtheme-brutal .gallery-cover, .gtheme-brutal .gallery-soundtrack-frame { border-radius: 0; }
.gtheme-brutal .gcell > img { border: 1px solid #000; }
.gtheme-brutal.gwrap, .gtheme-brutal .card { border: 1px solid #000; }
/* 리소 배지·강조는 리소 레드 권장(§5) */
.gtheme-riso .badge { color: #e0492f; border-color: #e0492f; }

/* 그레인 오버레이 — 배경 레이어(이미지 위 아님), feTurbulence 고정 노이즈 */
.ggrain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  opacity: var(--g-grain-op, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* 숨김 개인작(본인·교수만 보임) — 흐림 + 배지 */
.pw-hidden > img, .pw-hidden .gallery-file-thumb, .gallery-pw-mine.pw-hidden img {
  filter: blur(7px) grayscale(.4); opacity: .55;
}

/* ── 편집 UI: 프리셋 칩 + 주사위 + 축 그룹 + 잠금 + 프리뷰 ── */
.gpreset-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 8px 0 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.gpreset-chip {
  font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
  background: var(--surface-2); color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 99px; padding: 7px 14px;
  transition: border-color .12s, color .12s;
}
.gpreset-chip:hover { border-color: var(--spot); color: var(--text); }
.gpreset-chip.gdice { border-style: dashed; color: var(--spot); }
.gaxis-group { margin: 14px 0 0; }
.gaxis-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.gaxis-head .sub { margin: 0; }
.glock {
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 6px; opacity: .5; transition: opacity .12s;
}
.glock:hover { opacity: .9; }
.glock[aria-pressed="true"] { opacity: 1; border-color: var(--spot-dim); background: rgba(232, 163, 61, .08); }
.gaxis-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.gaxis-opt {
  display: inline-flex; align-items: center; margin: 0; cursor: pointer;
  font-size: 13px; color: var(--dim);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 99px; padding: 6px 12px; transition: border-color .12s, color .12s;
}
.gaxis-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.gaxis-opt:has(input:checked) { color: var(--spot); border-color: var(--spot); background: rgba(232, 163, 61, .07); }
.gpreview-hint { margin: 10px 0 0; }

/* ── 인쇄 뷰(.gprint): 무드 화이트 강제, 프레임·타이포만 (§2) ── */
.gprint h1, .gprint .print-section-title { font-family: var(--g-font-head, var(--font)); }
.gprint .print-work-caption, .gprint .print-statement { font-family: var(--g-font-cap, var(--font)); }
.gprint .print-work-grid { counter-reset: gcell; }
/* 인쇄 셀엔 프레임 장식만 얹는다(썸네일 비율은 print 쪽 규칙 유지) */
.gprint .gcell > img { border-radius: 0; }

/* ── 모바일 (≤560px): 모든 레이아웃이 깨지지 않게 ────────── */
@media (max-width: 560px) {
  .gwrap { padding: 18px 12px 22px; }
  .glayout-grid .ggrid, .glayout-freewall .ggrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .glayout-magazine .ggrid { grid-template-columns: repeat(2, 1fr); }
  .glayout-magazine .ggrid .gcell:first-child { grid-column: span 2; grid-row: span 1; }
  .glayout-bento .ggrid { grid-template-columns: repeat(2, 1fr); }
  .glayout-bento .ggrid .gcell:nth-child(2) { grid-column: span 1; }
  .glayout-single .ggrid { gap: 26px; }
  .g-nameplate h1 { font-size: 23px; }
  .gtype-display .g-nameplate h1, .gtype-hand .g-nameplate h1 { font-size: 26px; }
}