/* ══════════════════════════════════════════════════════════════
   축제 3쪽 전용 리디자인 · 2026-09-03
   적용: judges.html · festival.html · contest.html
   되돌리려면 세 쪽에서 이 파일 <link> 한 줄만 지우면 원래대로 돌아옵니다.
   (v3.css · v4.css 는 건드리지 않았습니다 — 다른 쪽에 영향 없음)

   고친 것 네 가지
     1. 글자 크기 대비 — H1을 낮추고, H1과 본문 사이에 없던 '중간 위계'를 만듦
     2. 검은 테두리 상자 남발 — 상자를 걷어내고 괘선과 여백으로 나눔
     3. 상자 3중 중첩 — 사진에만 선을 남기고 나머지 테두리 제거
     4. 노란 빈 칸·네 번 반복되던 역할 라벨 — 왼쪽 기둥에 한 번만
   ══════════════════════════════════════════════════════════════ */


/* ── 1. 타이포 위계 ─────────────────────────────────────────── */
@media(min-width:768px){
  /* 화면을 다 먹던 H1을 한 단 낮춥니다 (기존 clamp 상한 6rem → 4rem) */
  .tlhead .h-display{font-size:clamp(2.1rem,5.4vw,4rem)!important;line-height:1.04;letter-spacing:-.035em}

  /* ★ 없던 중간 위계 — H1과 작은 본문 사이의 다리 */
  .tlhead .sub2{margin-top:22px;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.62;
    font-weight:600;color:var(--ink);max-width:56ch;word-break:keep-all;overflow-wrap:normal}

  /* 섹션 제목도 한 단 낮춰 H1과 겨루지 않게 */
  .shopwrap .sechead h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
  .shopwrap .secnote{font-size:.95rem;line-height:1.66;max-width:62ch;margin-top:10px}
}
.tlhead .sub2 b{font-weight:800}
.tlhead .jdeadline{margin-top:14px;font-size:.88rem;font-weight:700;color:var(--deep);
  font-family:'IBM Plex Mono','Pretendard',monospace;letter-spacing:-.01em}
.tlhead .phases2{margin-top:30px}


/* ── 2·3. 예선 심사위원 명부 ─────────────────────────────────
   기존과 같은 가로형(사진 왼쪽 · 글 오른쪽) · 사진 폭도 기존 크기(104px)
   판형은 세로 3:4 — 증명사진(채다혜)의 머리가 잘리지 않는 최소 비율이고,
   네 장 모두 같은 판형이라 얼굴 크기도 나란히 맞습니다
   촌스러움의 원인만 걷어냅니다
     · 상자 3중 중첩(카드 테두리 + 사진 테두리 + 라벨 테두리) → 사진에만 선
     · 같은 역할명이 네 번 반복 → 왼쪽 기둥에 한 번만
     · 노란 빈 칸 → 어린이는 사진 칸 없이 이름 줄로
   ─────────────────────────────────────────────────────────── */
.jroll{margin-top:24px;border-top:1.5px solid var(--ink)}

/* 한 줄 = 역할 기둥(왼쪽) + 사람들(오른쪽) */
.jgrp{display:grid;grid-template-columns:minmax(92px,124px) minmax(0,1fr);
  gap:0 clamp(16px,3vw,34px);padding:22px 0;border-bottom:1.5px solid var(--line)}
.jgrp:last-child{border-bottom:1.5px solid var(--ink)}
.jgrp .g-role{margin:0;padding-top:3px;font-family:'IBM Plex Mono','Pretendard',monospace;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--deep);word-break:keep-all}
.jgrp .g-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)}

/* 사람 하나 — 사진 왼쪽, 글 오른쪽 (기존 배치 그대로) */
.jp3{display:grid;grid-template-columns:104px minmax(0,1fr);gap:15px;align-items:start;min-width:0}
.jp3 img{width:104px;height:140px;object-fit:cover;display:block;
  border:1.5px solid var(--ink);background:#F4EEE8;
  filter:grayscale(1) contrast(1.04);transition:filter .35s ease}
@media(hover:hover){ .jp3:hover img{filter:none} }
.jp3 .p-name{margin:0;font-size:1.06rem;font-weight:900;letter-spacing:-.025em;line-height:1.25}
.jp3 .p-note{margin:6px 0 0;font-size:.78rem;font-weight:600;color:var(--muted);
  line-height:1.6;word-break:keep-all;overflow-wrap:normal}

/* 어린이 — 사진 칸을 비워 두지 않고, 이름 줄로 */
.jgrp.is-kids .g-list{grid-template-columns:1fr;gap:0}
.jgrp .k-line{margin:0;font-size:clamp(1.3rem,2.8vw,1.72rem);font-weight:900;
  letter-spacing:-.035em;line-height:1.2;word-break:keep-all}
.jgrp .k-line i{font-style:normal;color:var(--deep);padding:0 .16em}
.jgrp .k-note{margin:9px 0 0;font-size:.83rem;font-weight:600;color:var(--muted);
  line-height:1.62;max-width:62ch;word-break:keep-all;overflow-wrap:normal}
.jgrp .k-note b{color:var(--ink);font-weight:800}

html[data-mode="clear"] .jp3 img{filter:none;border:2px solid #000}
html[data-mode="clear"] .jgrp{border-bottom:2px solid #000}
html[data-mode="clear"] .jroll{border-top:2px solid #000}


/* ── 4. 축제 프로그램 여섯 — 상자를 걷어내고 괘선으로 ────────── */
.fprogs{display:grid;grid-template-columns:1fr;gap:0 clamp(20px,3vw,36px);margin-top:22px}
@media(min-width:600px){ .fprogs{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .fprogs{grid-template-columns:repeat(3,1fr)} }
.fprog{border:0;border-top:1.5px solid var(--ink);border-radius:0;background:transparent;
  padding:16px 0 28px}
.fprog .fpkind{display:inline-block;border:0;padding:0;margin:0 0 9px;
  font-family:'IBM Plex Mono','Pretendard',monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.09em;color:var(--deep)}
.fprog h3{font-size:1.14rem;font-weight:900;letter-spacing:-.02em;margin:0 0 8px;word-break:keep-all}
.fprog p{font-size:.85rem;color:var(--muted);font-weight:600;margin:0;line-height:1.62;
  word-break:keep-all;overflow-wrap:normal}
html[data-mode="clear"] .fprog{border-top:2px solid #000}

.shopwrap .secnote{word-break:keep-all;overflow-wrap:normal}

/* ── 5. 건너가기 띠 — 상자 무게 덜기 ─────────────────────────── */
.crossbanner{border-radius:2px;background:#fff}
html[data-mode="clear"] .crossbanner{border:2px solid #000}


/* ── 6. 모바일 ───────────────────────────────────────────────── */
@media(max-width:767px){
  /* 좁은 화면 — 역할 기둥을 위로 올리고 사람은 한 줄에 하나 */
  .jgrp{grid-template-columns:1fr;gap:12px 0;padding:18px 0}
  .jgrp .g-role{padding-top:0}
  .jgrp .g-list{grid-template-columns:1fr;gap:16px}
  .jp3{grid-template-columns:84px minmax(0,1fr);gap:13px}
  .jp3 img{width:84px;height:113px}
  .jp3 .p-name{font-size:1rem}
  .jp3 .p-note{font-size:.75rem}
  .fprog{padding:14px 0 20px}
}
@media(max-width:380px){
  .jp3{grid-template-columns:72px minmax(0,1fr);gap:11px}
  .jp3 img{width:72px;height:97px}
}

/* ── 7. 축제 3형제 칩 — 본문 기둥(1100px)에 정렬 ─────────────── */
.sibnav{max-width:1100px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px;box-sizing:border-box}
@media(max-width:767px){ .sibnav{padding-left:20px;padding-right:20px} }