/* ─────────────────────────────────────────────
   영화로 떠나는 진로여행 · 「행복을 찾아서」 — 학생 단말기 (자율 진행)
   학생이 각자 속도로 스토리를 넘긴다. 교사는 구간을 열고닫을 뿐.
   ───────────────────────────────────────────── */
:root{
  --ink:#f6f0e3;--ink-dim:#b9c0d6;--gold:#f4c95d;--amber:#e8944a;--navy:#0a1628;
  --card:rgba(255,255,255,.055);--card-line:rgba(246,240,227,.14);
  --sky-top:#0a1628;--sky-mid:#101f3a;--sky-low:#16264a;--sun-y:118%;--sun-glow:0;
  /* §4-2 유동 타이포 토큰(고정px 금지·폰~태블릿 대응) — 상한=11/18 theme-card 본문(잘 읽히는 레퍼런스) 수준 */
  --fs-title:clamp(1.5rem,4.5vw,2.6rem);--fs-body:clamp(1.0625rem,4.4vw,1.3125rem);--fs-sub:clamp(.9375rem,1.9vw,1.06rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:var(--ink);background:var(--navy);overflow:hidden;-webkit-font-smoothing:antialiased}
.serif{font-family:'Noto Serif KR','Nanum Myeongjo',serif}
#sky{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-low) 100%);transition:background 1.2s ease}
#sun{position:fixed;left:50%;top:var(--sun-y);z-index:0;width:min(46vw,340px);height:min(46vw,340px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffe9b0 0%,var(--gold) 38%,var(--amber) 72%,transparent 74%);opacity:min(var(--sun-glow),.5);filter:blur(2px);transition:top 1.4s cubic-bezier(.4,0,.2,1),opacity 1.4s ease;pointer-events:none}   /* 글로우 상한 0.5 — 본문 강조 가독성(2026-07-29) */
#stars{position:fixed;inset:0;z-index:0;opacity:1;transition:opacity 1.4s ease;pointer-events:none}
#stars.faded{opacity:0}
#stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#e9edff;opacity:.7;animation:tw 3.4s infinite ease-in-out}
@keyframes tw{50%{opacity:.15}}

#stage{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
/* justify-content: safe center — 내용이 화면보다 길면(다칸 fields 등) 중앙정렬 대신 위 정렬로 폴백해
   제목·발문이 상단 밖으로 잘리는 것 방지(짧은 슬라이드는 그대로 중앙). margin:0 auto = 가로만 중앙(세로 auto-margin 클립 제거) */
.slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:28px 22px 108px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease,visibility .55s;overflow-y:auto}
.slide.on{opacity:1;visibility:visible;transform:translateY(0)}
.wrap{width:100%;max-width:680px;text-align:center;margin:0 auto}
/* eyebrow: 일출(금빛 하늘)에서 금색 텍스트 판독 위해 어두운 반투명 배경+섀도 보강(활동 패널 안에서도 무해) */
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.24em;color:var(--gold);background:rgba(9,18,35,.42);border:1px solid rgba(244,201,93,.4);padding:6px 14px;border-radius:999px;margin-bottom:22px;backdrop-filter:blur(6px);text-shadow:0 1px 4px rgba(0,0,0,.5)}
/* 제목: 패널 없이 배경 위 유지(디자인) — phase6 판독 위해 강한 텍스트 섀도 보강 */
h1,h2{text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 22px rgba(0,0,0,.35)}
h1{font-size:clamp(30px,7vw,52px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
h2{font-size:clamp(22px,5.4vw,34px);font-weight:600;line-height:1.4;letter-spacing:-.01em}
.story-text{font-size:var(--fs-body);line-height:1.85;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
/* ★배경 직접 노출 텍스트를 어두운 반투명 패널 위로(board 원칙) — .wrap 직속 요소만(카드/패널 내부는 이미 처리, 이중 패널 방지) */
.wrap>.story-text{background:rgba(9,18,35,.55);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:14px;padding:clamp(15px,2.2vw,22px) clamp(16px,2.2vw,24px);box-shadow:0 8px 26px rgba(0,0,0,.28)}
.wrap>.sub{background:rgba(9,18,35,.5);backdrop-filter:blur(9px);border-radius:12px;padding:clamp(9px,1.4vw,13px) clamp(13px,1.8vw,18px);color:#eef2f6}
.wrap>.hint{display:inline-block;background:rgba(9,18,35,.5);backdrop-filter:blur(6px);border-radius:999px;padding:7px 16px}
.story-text b{color:var(--gold);font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.45)}   /* 태양 글로우 위 가독성(색토큰 불변·그림자만) */
.sub{font-size:var(--fs-sub);line-height:1.7;color:var(--ink-dim);word-break:keep-all;overflow-wrap:break-word}
.scene{width:min(82vw,440px);margin:0 auto 24px;display:block;border-radius:16px;overflow:hidden}
.scene svg{display:none;width:100%;height:auto}
.scene img,.scene video{width:100%;height:auto;max-height:40vh;object-fit:contain;display:block;border-radius:16px;border:1px solid rgba(246,240,227,.12);box-shadow:0 10px 40px rgba(0,0,0,.4);background:#0a1628}
.scene.imgfail img,.scene.imgfail video{display:none}
.scene.imgfail svg{display:block}
/* ── Ken Burns (정지 이미지·SVG 폴백만 · video 제외) · CSS 전용 ──
   활성 슬라이드만 재생(GPU/배터리), 인덱스%4로 4종 순환, 이동 ≤8%.
   prefers-reduced-motion 은 아래 미디어 쿼리의 *{animation:none} 로 자동 비활성 */
@keyframes kb-zoomin{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes kb-zoomout{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes kb-panlr{from{transform:scale(1.06) translateX(-3%)}to{transform:scale(1.06) translateX(3%)}}
@keyframes kb-panrl{from{transform:scale(1.06) translateX(3%)}to{transform:scale(1.06) translateX(-3%)}}
.scene img,.scene svg{will-change:transform;animation-duration:20s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused}
.slide.on .scene img,.slide.on .scene svg{animation-play-state:running}
.slide:nth-child(4n+1) .scene img,.slide:nth-child(4n+1) .scene svg{animation-name:kb-zoomin;animation-duration:20s}
.slide:nth-child(4n+2) .scene img,.slide:nth-child(4n+2) .scene svg{animation-name:kb-zoomout;animation-duration:22s}
.slide:nth-child(4n+3) .scene img,.slide:nth-child(4n+3) .scene svg{animation-name:kb-panlr;animation-duration:24s}
.slide:nth-child(4n)   .scene img,.slide:nth-child(4n)   .scene svg{animation-name:kb-panrl;animation-duration:18s}
.sil{fill:#060d1b}.sil-line{stroke:#060d1b;stroke-linecap:round}
.hint{margin-top:26px;font-size:13px;color:var(--ink-dim);letter-spacing:.06em;animation:pulse 2.2s infinite ease-in-out}
@keyframes pulse{50%{opacity:.35}}
.card{background:rgba(9,18,35,.6);border:1px solid var(--card-line);border-top:1px solid rgba(255,255,255,.13);border-radius:18px;padding:clamp(20px,3vw,30px) clamp(18px,2.6vw,26px);backdrop-filter:blur(9px);box-shadow:0 10px 32px rgba(0,0,0,.32)}
/* 선택지 버튼: 밝은 var(--card) → 어두운 패널(일출 소멸 방지)·본문 밝은 글자 */
.btn{appearance:none;border:1px solid var(--card-line);background:rgba(9,18,35,.55);backdrop-filter:blur(9px);color:#eef2f6;border-radius:14px;padding:15px 18px;min-height:44px;font-size:var(--fs-body);font-family:inherit;cursor:pointer;width:100%;text-align:left;line-height:1.55;transition:border-color .2s,background .2s;word-break:keep-all;overflow-wrap:break-word}
.btn:hover{border-color:rgba(244,201,93,.55)}
.btn.picked{border-color:var(--gold);background:rgba(40,32,10,.62);color:var(--gold)}
.btn-row{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.gold-btn{appearance:none;border:none;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;font-weight:700;font-size:16px;padding:15px 34px;border-radius:999px;margin-top:24px;transition:transform .15s,box-shadow .2s}
.gold-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,148,74,.35)}
/* 비활성: 채도 낮춘 금색 대신 어두운 패널+흐린 글자(배경과 겹침 방지) */
.gold-btn:disabled{background:rgba(9,18,35,.55);backdrop-filter:blur(9px);color:rgba(246,240,227,.5);opacity:1;cursor:default;transform:none;box-shadow:none}
.reveal{margin-top:20px;text-align:left;font-size:clamp(.98rem,1.5vw,1.28rem);line-height:1.75;color:#eef2f6;background:rgba(9,18,35,.6);border:1px solid var(--card-line);border-left:4px solid var(--gold);border-radius:12px;padding:clamp(13px,1.8vw,20px) clamp(15px,2vw,22px);backdrop-filter:blur(9px);box-shadow:0 8px 26px rgba(0,0,0,.3);word-break:keep-all;display:none}
.reveal b{color:var(--gold)}
.reveal.show{display:block;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 감정/판단 버튼: 데스크톱=옵션 수 무관 한 줄 균등, 모바일=균형 줄바꿈(5→3+2·4→2+2·3→3열, 4+1 고아 방지). 콘텐츠 무수정·엔진 CSS만·라벨 문안 불변 */
.emoji-row{display:flex;flex-wrap:nowrap;gap:clamp(6px,1vw,12px);justify-content:center;margin-top:22px}
.emoji-btn{appearance:none;cursor:pointer;font-family:inherit;background:rgba(9,18,35,.55);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:16px;padding:clamp(12px,1.6vw,18px) clamp(8px,1.2vw,16px);font-size:clamp(.8rem,1.35vw,1.02rem);line-height:1.25;color:#eef2f6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1vw,10px);flex:1 1 0;min-width:0;min-height:clamp(88px,13vw,132px);word-break:keep-all;text-align:center;transition:border-color .2s,background .2s}
.emoji-btn span.e{font-size:clamp(34px,5.2vw,50px);line-height:1}   /* §4-1 이모지 확대(한 줄 균등 대응 소폭 조정) */
.emoji-btn.picked{border-color:var(--gold);background:rgba(40,32,10,.62);color:var(--gold)}
@media(max-width:759px){                                    /* 모바일: 균형 줄바꿈(고아 4+1/3+1 방지)·:has 미지원 시 2열 폴백 */
  .emoji-row{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
  .emoji-btn{flex:initial;min-width:0}
  .emoji-row:has(> .emoji-btn:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}                 /* 3옵션 → 3열 한 줄 */
  .emoji-row:has(> .emoji-btn:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}                 /* 5옵션 → 3+2 */
  .emoji-row:has(> .emoji-btn:nth-child(5):last-child) > .emoji-btn{grid-column:span 2}
  .emoji-row:has(> .emoji-btn:nth-child(5):last-child) > .emoji-btn:nth-child(n+4){grid-column:span 3}
}
.chart{margin-top:24px;text-align:left;display:none}
.chart.show{display:block;animation:fadeUp .5s ease;background:rgba(9,18,35,.5);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:14px;padding:clamp(14px,2vw,20px)}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.bar-row .lab{width:118px;color:var(--ink-dim);flex:none;text-align:right}
.bar-track{flex:1;height:14px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bar-fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--gold));transition:width 1s cubic-bezier(.3,0,.2,1)}
.bar-row .val{width:44px;flex:none;color:var(--gold);font-weight:600;font-size:13px;text-align:right}
.chart-note{margin-top:10px;font-size:12.5px;color:var(--ink-dim);line-height:1.6}
.ox-row{display:flex;gap:14px;justify-content:center;margin-top:24px;max-width:min(92vw,360px);margin-left:auto;margin-right:auto}
.ox{appearance:none;cursor:pointer;font-family:'Noto Serif KR',serif;flex:1 1 0;min-width:0;min-height:112px;padding:10px 12px;box-sizing:border-box;border-radius:24px;font-size:44px;font-weight:700;background:rgba(9,18,35,.55);backdrop-filter:blur(9px);border:1px solid var(--card-line);color:#eef2f6;transition:border-color .2s,background .2s,transform .15s}
.ox:hover{transform:translateY(-3px);border-color:rgba(244,201,93,.55)}
.ox.picked{border-color:var(--gold);background:rgba(40,32,10,.62);color:var(--gold)}
.ox small{display:block;font-family:'Pretendard',sans-serif;font-size:13px;font-weight:400;margin-top:6px;color:var(--ink-dim);white-space:normal;word-break:keep-all;line-height:1.35;padding:0 4px}
/* predict 3옵션 이상(코코 등 N지선다): 고정폭 대신 그리드 균등 — 데스크톱 한 줄·모바일 2열(3+1 고아 방지). 2옵션은 기존 고정폭 유지 */
.ox-row:has(> .ox:nth-child(3)){display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:min(92vw,420px);margin-left:auto;margin-right:auto}
.ox-row:has(> .ox:nth-child(3)) .ox{width:auto}
@media(min-width:760px){ .ox-row:has(> .ox:nth-child(3)){grid-template-columns:repeat(4,1fr);max-width:min(92vw,560px)} }
.sc-opts{display:flex;flex-direction:column;gap:11px;margin-top:20px;text-align:left}
.sc-opt{appearance:none;cursor:pointer;font-family:inherit;font-size:var(--fs-body);line-height:1.5;text-align:left;background:var(--card);border:1px solid var(--card-line);color:var(--ink);border-radius:14px;padding:14px 18px;min-height:44px;transition:border-color .2s,background .2s,transform .12s;word-break:keep-all;overflow-wrap:break-word}
.sc-opt:hover{transform:translateY(-2px);border-color:rgba(244,201,93,.5)}
.sc-opt.picked{border-color:var(--gold);background:rgba(244,201,93,.14);color:var(--gold);font-weight:600}
.sc-reason{width:100%;min-height:84px;margin-top:14px;font-family:inherit;font-size:15px;line-height:1.6;color:var(--ink);background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:13px 16px;resize:vertical}
/* scale(자가진단 척도) — predict O/X와 시각적으로 구분(작은 알약형 버튼·좌측 문항 텍스트) */
.scale-prog{position:sticky;top:6px;z-index:2;margin:14px auto 6px;display:inline-block;background:rgba(9,18,35,.72);backdrop-filter:blur(4px);border:1px solid var(--card-line);border-radius:999px;padding:6px 16px;font-size:clamp(13px,1.5vw,15px);color:var(--ink-dim)}
.scale-prog .sp-done{color:var(--gold);font-weight:700}
.scale-items{margin-top:8px;text-align:left;display:flex;flex-direction:column;gap:10px}
.scale-item{background:rgba(6,13,27,.34);border:1px solid var(--card-line);border-radius:12px;padding:12px 14px}
.scale-item.answered{border-color:rgba(244,201,93,.34)}
.scale-item .si-text{font-size:clamp(14px,1.6vw,16px);line-height:1.5;margin-bottom:9px;word-break:keep-all}
.scale-item .si-text b{color:var(--gold);margin-right:4px}
.scale-opts{display:flex;gap:8px;flex-wrap:wrap}
.scale-opts.stack{flex-direction:column;align-items:stretch}
.sc-scale-opt{appearance:none;cursor:pointer;font-family:inherit;font-size:clamp(13px,1.5vw,15px);font-weight:600;background:var(--card);border:1px solid var(--card-line);color:var(--ink-dim);border-radius:999px;padding:8px 16px;min-width:64px;transition:border-color .18s,background .18s,color .18s,transform .12s}
.scale-opts.stack .sc-scale-opt{border-radius:12px;text-align:left;min-width:0}
.sc-scale-opt:hover{transform:translateY(-1px);border-color:rgba(244,201,93,.5)}
.sc-scale-opt.picked{border-color:var(--gold);background:rgba(244,201,93,.16);color:var(--gold)}
.scale-submit{margin-top:16px}
.scale-result{margin-top:8px}
.scale-result .scale-card{margin-top:16px;text-align:left}
.scale-result .scale-card h3{color:var(--gold);font-size:clamp(16px,1.9vw,19px);margin-bottom:6px}
/* profile 모드 — 영역별 점수 행 + 최저 영역 강조 */
.scale-profile .sp-row{display:grid;grid-template-columns:6.5em 1fr auto;align-items:center;gap:clamp(8px,1.2vw,14px);padding:clamp(5px,.8vh,9px) 0}
.scale-profile .sp-row+.sp-row{border-top:1px solid rgba(246,240,227,.1)}
.scale-profile .sp-name{font-size:clamp(13px,1.5vw,15px);font-weight:600}
.scale-profile .sp-track{height:.62em;border-radius:999px;background:rgba(246,240,227,.12);overflow:hidden}
.scale-profile .sp-fill{display:block;height:100%;border-radius:999px;background:rgba(246,240,227,.45)}
.scale-profile .sp-band{font-size:clamp(11.5px,1.3vw,13px);color:var(--ink-dim);white-space:nowrap}
.scale-profile .sp-row.is-low .sp-name{color:var(--gold)}
.scale-profile .sp-row.is-low .sp-fill{background:linear-gradient(90deg,var(--gold),var(--amber))}
.scale-profile .sp-row.is-low .sp-band{color:var(--gold);font-weight:600}
.scale-profile .sp-low{margin-top:clamp(9px,1.4vh,14px);padding-top:clamp(8px,1.2vh,12px);border-top:1px solid rgba(244,201,93,.3);font-size:clamp(13px,1.5vw,15px)}
.scale-profile .sp-low b{color:var(--gold)}
.slide.scale-done .scale-items{opacity:.72}
/* peer_ask(친구에게 물어보기) */
/* ★구조적 가독성: 활동 렌더(peer_ask·글쓰기·객관식·척도) 전체를 감싸는 단일 패널.
   이후 어떤 요소가 추가돼도 반드시 이 컨테이너 안에 렌더되므로 "패널 없는 텍스트" 재발 불가(요소 열거 패치 대체). */
.peer-panel,.activity-panel{background:rgba(9,18,35,.58);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:16px;color:#eef2f6;padding:clamp(18px,3vw,30px) clamp(15px,2.4vw,26px);text-align:center}
.peer-panel .eyebrow,.activity-panel .eyebrow{margin-bottom:16px}
.activity-panel .sub{color:#eef2f6}
.activity-panel .sub b{color:#ffe0a3}
.activity-panel .saved-msg{color:#cfe8d6}
.pa-mine{margin-top:14px;text-align:left;display:flex;flex-direction:column;gap:10px}
.pa-myfield-row{display:flex;flex-direction:column;gap:5px}
.pa-mylabel{font-size:13px;color:var(--gold);font-weight:600}
.pa-myfield{width:100%;min-height:56px;font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:11px 14px;resize:vertical}
.pa-notice{margin-top:16px;font-size:clamp(.82rem,1.5vw,1rem);color:#c6f5da;background:rgba(9,18,35,.62);border:1px solid rgba(62,203,122,.5);border-radius:10px;padding:clamp(9px,1.4vw,13px) clamp(13px,1.8vw,18px);backdrop-filter:blur(9px);line-height:1.5;word-break:keep-all}   /* 일출 워시아웃 방지: 어두운 반투명 패널+blur(board 규격) */
/* .sub(안내문) 강조 — 패널 안이라 배경 band-aid 불필요, 색만 유지 */
.peer-panel .sub{color:#eef2f6}
.peer-panel .sub b{color:#ffe0a3}
.pa-ask{margin-top:12px}
.pa-status{margin-top:10px;font-size:clamp(.8rem,1.4vw,.98rem);color:#eef2f6;line-height:1.5;word-break:keep-all}
.pa-inbox{margin-top:8px;text-align:left}
.pa-inbox-title,.pa-req-title{font-size:14px;font-weight:700;color:var(--gold);margin:18px 0 8px}
.pa-req-title small{font-weight:400;color:var(--ink-dim);font-size:.82em}
.pa-empty{margin-top:16px;font-size:14px;color:#eef2f6;text-align:center;background:rgba(9,18,35,.5);border:1px solid var(--card-line);border-radius:12px;padding:14px}
/* 답 카드: 연녹 반투명 → 어두운 패널 톤(일출 판독)·이름=금색 강조 규약·본문=밝은 회백 */
.pa-card{background:rgba(9,18,35,.58);backdrop-filter:blur(9px);border:1px solid rgba(62,203,122,.35);border-radius:14px;padding:12px 15px;margin-bottom:10px;animation:fadeUp .4s ease}
.pa-card.picked{border-color:var(--gold);background:rgba(30,26,12,.6)}
.pa-au{font-size:12.5px;color:#ffd97a;font-weight:700;margin-bottom:5px}
.pa-card.picked .pa-au{color:var(--gold)}
.pa-txt{font-size:15px;line-height:1.6;color:#eef2f6;word-break:keep-all}
.pa-pick{appearance:none;cursor:pointer;margin-top:9px;font-family:inherit;font-size:12.5px;font-weight:600;background:transparent;border:1px solid var(--card-line);color:var(--ink-dim);border-radius:999px;padding:5px 13px}
.pa-pick.on{border-color:var(--gold);background:rgba(244,201,93,.16);color:var(--gold)}
.pa-requests{margin-top:8px;text-align:left}
.pa-req{background:rgba(9,18,35,.5);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:14px;padding:13px 15px;margin-bottom:10px}
.pa-req-q{font-size:14.5px;line-height:1.5;margin-bottom:8px;word-break:keep-all}
.pa-req-mine{font-size:13px;color:var(--ink-dim);line-height:1.6;background:rgba(9,18,35,.4);border-radius:8px;padding:8px 11px;margin-bottom:9px}
.pa-req-ta{width:100%;min-height:52px;font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:10px 13px;resize:vertical}
.pa-req-send{appearance:none;cursor:pointer;margin-top:8px;font-family:inherit;font-size:13px;font-weight:600;background:rgba(244,201,93,.14);border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:6px 18px}
.pa-req-hint{font-size:12.5px;color:#e0a890;margin-top:6px}
.pa-req-done{font-size:14px;color:#8fe0b0;font-weight:600;text-align:center;padding:8px}
.bar-row.sc-correct .lab{color:#7fe0a4;font-weight:700}
.bar-row.sc-correct .bar-fill{background:linear-gradient(90deg,#3ecb7a,#7fe0a4)}
/* ── 주제 브릿지 · 관련 직업 카드(theme-grid) — 시각 위계 강화 (27편 공통) ──
   콘텐츠 무수정(CASE A): student.html CSS만 개선. 브릿지 슬라이드는 wrap 폭을 넓혀
   카드 3장이 넓은 화면을 채우고, 본문은 거의 흰색 + 어두운 반투명 패널로 판독성 확보. */
.wrap:has(> .theme-grid){max-width:min(96vw,1240px)}
.wrap:has(> .theme-grid) h2{font-size:clamp(24px,4.8vw,44px)}
.theme-grid{position:relative;z-index:0;display:grid;grid-template-columns:1fr;gap:clamp(12px,1.6vw,22px);margin-top:clamp(14px,2vh,22px);text-align:left}
.theme-grid::before{content:"";position:absolute;inset:-5vh -4vw;z-index:-1;background:radial-gradient(ellipse 72% 62% at 50% 45%,rgba(6,13,27,.32),transparent 76%);border-radius:28px;pointer-events:none}
@media(min-width:560px){.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.theme-card{position:relative;background:rgba(9,18,35,.66);border:1px solid var(--card-line);border-top:1px solid rgba(255,255,255,.14);border-radius:18px;padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,32px) clamp(20px,2.4vw,34px) clamp(24px,2.8vw,38px);backdrop-filter:blur(9px);box-shadow:0 12px 36px rgba(0,0,0,.36)}
.theme-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 99px 99px 0;background:linear-gradient(180deg,var(--gold),var(--amber));opacity:.92}
.theme-card .t-ico{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:clamp(8px,1.2vw,15px);line-height:1}
.theme-card h3{font-size:clamp(1.15rem,2.2vw,1.9rem);margin-bottom:clamp(8px,1vw,14px);color:#ffd97a;font-weight:700;word-break:keep-all;line-height:1.25}
.theme-card p{font-size:clamp(.98rem,1.5vw,1.35rem);line-height:1.78;color:#eef2f6;word-break:keep-all}
@media(prefers-reduced-motion:no-preference){
  .slide.on .theme-card{animation:cardIn .5s ease both}
  .slide.on .theme-card:nth-child(1){animation-delay:.05s}
  .slide.on .theme-card:nth-child(2){animation-delay:.17s}
  .slide.on .theme-card:nth-child(3){animation-delay:.29s}
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.starter-row{display:flex;flex-direction:column;gap:8px;margin-top:18px;text-align:left}
/* 스타터: 금색 반투명(일출 소멸) → 어두운 패널 배경 + 금색 텍스트 반전 */
.starter{appearance:none;cursor:pointer;font-family:inherit;background:rgba(9,18,35,.55);backdrop-filter:blur(9px);border:1px dashed rgba(244,201,93,.5);color:var(--gold);border-radius:12px;padding:11px 14px;font-size:14px;text-align:left;word-break:keep-all}
.starter:hover{background:rgba(30,26,12,.66);border-color:rgba(244,201,93,.75)}
/* 누적(append) 모드: 이어 채우는 안내 + 사용된 버튼 체크·흐림 */
.starter-hint{margin-top:16px;margin-bottom:-6px;font-size:clamp(.8rem,1.2vw,.92rem);color:#eef2f6;opacity:.82;text-align:left;word-break:keep-all}
.starter.used{opacity:.5;border-style:solid;border-color:rgba(62,203,122,.55);color:#a9e6c2}
.starter.used::before{content:"✓ ";font-weight:800;color:#3ecb7a}
textarea{width:100%;min-height:140px;margin-top:18px;resize:vertical;background:rgba(6,13,27,.5);border:1px solid var(--card-line);border-radius:14px;color:var(--ink);font-family:inherit;font-size:15.5px;line-height:1.75;padding:16px}
textarea:focus{outline:2px solid rgba(244,201,93,.6);border-color:transparent}
/* ══ STT ══ 음성 입력(Web Speech API). 미지원 기기(C군)는 버튼을 만들지 않는다(규약 1 · CSS 숨김 아님) */
.stt-wrap{position:relative}
.stt-wrap>textarea{padding-right:58px}                     /* 버튼과 글자가 겹치지 않게 */
.stt-btn{position:absolute;right:9px;bottom:11px;width:44px;height:44px;border-radius:50%;padding:0;z-index:2;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:19px;line-height:1;
  border:1px solid var(--card-line);background:rgba(6,13,27,.86);color:var(--ink);-webkit-tap-highlight-color:transparent}
.stt-btn:disabled{opacity:.4;cursor:not-allowed}
.stt-btn.on{background:linear-gradient(135deg,#d7443b,#b2322b);border-color:transparent;color:#fff;
  animation:sttPulse 1.1s ease-in-out infinite}
@keyframes sttPulse{0%,100%{box-shadow:0 0 0 0 rgba(215,68,59,.5)}50%{box-shadow:0 0 0 9px rgba(215,68,59,0)}}
.stt-live{position:absolute;right:60px;bottom:20px;z-index:2;font-size:13px;font-weight:700;color:#ff9d8a;
  white-space:nowrap;pointer-events:none;max-width:calc(100% - 76px);overflow:hidden;text-overflow:ellipsis}
.stt-note{margin-top:8px;font-size:13.5px;line-height:1.55;color:#ffb87a;word-break:keep-all}
@media (prefers-reduced-motion:reduce){.stt-btn.on{animation:none}}
/* 첫 사용 고지 */
#sttGate{position:fixed;inset:0;z-index:32;display:none;align-items:center;justify-content:center;
  background:rgba(6,12,24,.8);backdrop-filter:blur(6px);padding:22px}
.sg2-box{width:100%;max-width:400px;background:rgba(12,22,40,.98);border:1px solid var(--card-line);
  border-radius:18px;padding:26px 22px;text-align:center}
.sg2-box h3{font-size:19px;margin:0 0 12px;color:#ffd97a}
.sg2-box p{font-size:14.5px;line-height:1.7;color:#cdd6e4;margin:0;word-break:keep-all;text-align:left}
.sg2-box p+p{margin-top:10px}
.sg2-warn{color:#ffb87a}
.sg2-row{display:flex;gap:10px;margin-top:20px}
.sg2-btn{flex:1;padding:14px 12px;border-radius:12px;border:1px solid var(--card-line);
  background:rgba(255,255,255,.06);color:#eef2f6;font-size:15px;font-family:inherit;cursor:pointer}
.sg2-btn.primary{background:linear-gradient(135deg,#e8b84a,#d99a2b);color:#1a1205;border:none;font-weight:700}
/* 칸 분리 입력(fields) — sl.fields 있을 때만. 고교판 활동 양식(보기+라벨 칸) */
.w-ref{margin-top:14px;text-align:left;background:rgba(9,18,35,.5);border:1px solid var(--card-line);border-left:3px solid var(--gold);border-radius:10px;padding:clamp(12px,1.6vw,16px) clamp(13px,1.8vw,18px);font-size:clamp(.9rem,1.35vw,1.1rem);line-height:1.7;color:#eef2f6;backdrop-filter:blur(6px)}
.w-ref b{color:var(--gold)}
.w-fields{display:flex;flex-direction:column;gap:14px;margin-top:16px;text-align:left}
.w-fieldwrap{display:flex;flex-direction:column;gap:6px}
.w-flabel{font-size:clamp(.86rem,1.2vw,1.05rem);color:var(--gold);font-weight:600}
/* 그룹 구분 헤더(반복 라벨 세트) — 금색 가로선 + 서수 태그(어두운 패널). 그룹 사이 상단 여백 2배. sticky 아님 */
.w-groupdiv{display:flex;align-items:center;gap:clamp(8px,1.4vw,12px);margin-top:14px}
.w-groupdiv::before,.w-groupdiv::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(244,201,93,.5),transparent)}
.w-gtag{flex:none;color:var(--gold);font-weight:700;font-size:clamp(.82rem,1.25vw,1rem);white-space:nowrap;background:rgba(9,18,35,.55);backdrop-filter:blur(4px);border:1px solid rgba(244,201,93,.4);border-radius:999px;padding:4px clamp(11px,1.6vw,15px)}
/* 「필요한 역량」 참고 카드 — 발문 아래·입력 위. 어두운 패널(밝은 phase 소멸 방지)·기본 접힘. 항목 클릭 삽입 없음(변환 활동) */
/* 접힘 버튼: '눌러서 예시를 본다'는 신호를 분명히 — 금색 테두리 카드 + 우측 「예시 보기 ▾」 pill + 은은한 주목 펄스 */
.comp-card{margin-top:14px;text-align:left;background:rgba(9,18,35,.58);backdrop-filter:blur(9px);border:1px solid rgba(244,201,93,.42);border-radius:12px;overflow:hidden}
.comp-card[open]{border-color:var(--card-line)}
.comp-card>summary{cursor:pointer;list-style:none;padding:clamp(11px,1.6vw,15px) clamp(13px,1.8vw,18px);display:flex;align-items:center;gap:10px;justify-content:space-between}
.comp-card>summary::-webkit-details-marker{display:none}
.comp-ttl{display:flex;align-items:center;gap:8px;color:#eef2f6;font-weight:600;font-size:clamp(.9rem,1.5vw,1.05rem);word-break:keep-all}
.comp-open{flex:none;font-size:clamp(.76rem,1.15vw,.92rem);font-weight:700;color:var(--gold);border:1px solid rgba(244,201,93,.6);border-radius:999px;padding:5px 13px;white-space:nowrap}
.comp-open::after{content:"예시 보기 ▾"}
.comp-card[open] .comp-open::after{content:"접기 ▴"}
.comp-card>summary:hover .comp-open{background:rgba(244,201,93,.14)}
@media(prefers-reduced-motion:no-preference){.comp-card:not([open]) .comp-open{animation:compPulse 2.4s ease-in-out infinite}}
@keyframes compPulse{0%,100%{opacity:1}50%{opacity:.5}}
.comp-body{padding:2px clamp(14px,1.8vw,18px) clamp(13px,1.6vw,16px)}
.comp-group{margin-top:12px}
.comp-gtitle{color:var(--gold);font-weight:700;font-size:clamp(.86rem,1.3vw,1rem);margin-bottom:4px}
.comp-items{color:#eef2f6;font-size:clamp(.86rem,1.35vw,1.02rem);line-height:1.7;word-break:keep-all}
.comp-hint{margin-top:15px;color:#eef2f6;opacity:.8;font-size:clamp(.82rem,1.25vw,.96rem);word-break:keep-all}
/* 최초 1회 힌트: 접힘 유지한 채 본문 상단 슬라이버만 잠깐 내려왔다 올라감(눌러 볼 게 있음 신호). 손대면 JS가 즉시 취소·reduced-motion 시 미실행 */
.comp-card.comp-peek>.comp-body{display:block;max-height:0;overflow:hidden;animation:compPeek 1.6s ease}
@keyframes compPeek{0%{max-height:0}16%{max-height:58px}72%{max-height:58px}100%{max-height:0}}
/* 「예시답 보기」 — starters 아래·입력칸 위. 완성 예시 2개(읽기 전용·복사/삽입 없음 · 펼쳐 둔 채로 입력 가능). 어두운 패널 */
.ex-card{margin-top:12px;text-align:left;background:rgba(9,18,35,.58);backdrop-filter:blur(9px);border:1px solid rgba(244,201,93,.4);border-radius:12px;overflow:hidden}
.ex-card[open]{border-color:var(--card-line)}
.ex-card>summary{cursor:pointer;list-style:none;padding:clamp(11px,1.6vw,15px) clamp(13px,1.8vw,18px);display:flex;align-items:center;gap:10px;justify-content:space-between}
.ex-card>summary::-webkit-details-marker{display:none}
.ex-ttl{display:flex;align-items:center;gap:8px;color:#eef2f6;font-weight:600;font-size:clamp(.9rem,1.5vw,1.05rem)}
.ex-open{flex:none;font-size:clamp(.76rem,1.15vw,.92rem);font-weight:700;color:var(--gold);border:1px solid rgba(244,201,93,.6);border-radius:999px;padding:5px 13px;white-space:nowrap}
.ex-open::after{content:"예시 보기 ▾"}
.ex-card[open] .ex-open::after{content:"접기 ▴"}
.ex-body{padding:2px clamp(14px,1.8vw,18px) clamp(13px,1.6vw,16px)}
.ex-grid{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.5vw,14px);margin-top:8px}
@media(min-width:760px){.ex-grid{grid-template-columns:1fr 1fr}}   /* 760px↑ 좌우 병렬, 미만 세로 */
.ex-item{background:rgba(6,13,27,.42);backdrop-filter:blur(6px);border:1px solid var(--card-line);border-radius:10px;padding:clamp(10px,1.4vw,14px);user-select:none;-webkit-user-select:none}   /* 베끼기 방지: 선택 차단 */
.ex-view{color:#ffd97a;font-weight:700;font-size:clamp(.82rem,1.3vw,.98rem);margin-bottom:6px}
.ex-text{color:#eef2f6;font-size:clamp(.88rem,1.4vw,1.02rem);line-height:1.7;word-break:keep-all;white-space:pre-wrap}
.ex-note{margin-top:14px;color:#eef2f6;opacity:.8;font-size:clamp(.82rem,1.25vw,.96rem);word-break:keep-all}
.w-field{min-height:88px;margin-top:0}
/* 드롭다운 필드(type:'select') — 어두운 패널·금색 커스텀 화살표·터치 44px */
.w-select{min-height:44px;box-sizing:border-box;margin-top:0;background:rgba(6,13,27,.5);border:1px solid var(--card-line);border-radius:10px;color:var(--ink);font-family:inherit;font-size:15.5px;padding:10px 40px 10px 14px;line-height:1.4;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f4c95d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:13px;cursor:pointer}
.w-select:focus{outline:2px solid rgba(244,201,93,.6);border-color:transparent}
.w-select option{background:#0b1526;color:var(--ink)}
/* 총점 합계 카운터(totalMax) */
.w-total{margin-top:12px;text-align:right;font-size:clamp(.86rem,1.3vw,1rem);color:#eef2f6;font-weight:600}
.w-total .w-tsum{color:var(--gold);font-weight:800}
.w-total .w-tover{display:none;color:#ff9b9b;font-weight:700}
.w-total.over{color:#ff9b9b}
.w-total.over .w-tsum{color:#ff9b9b}
.w-total.over .w-tover{display:inline}
.count.count-off{display:none}
.count{font-size:12.5px;color:var(--ink-dim);text-align:right;margin-top:8px}
.emo-count{display:none}          /* 감정 이유 카운터: 평소 숨김, 상한 근접(340자↑)에만 표시 */
.emo-count.show{display:block}
.saved-msg{display:none;margin-top:14px;color:var(--gold);font-size:14px;font-weight:600}
.saved-msg.show{display:block;animation:fadeUp .4s ease}
/* ═══ 인생그래프(lifegraph) — 점 찍기·드래그 감정곡선. SVG 선 + HTML 점 오버레이(반응형·터치·무왜곡). 전 요소 어두운 패널 규약 ═══ */
.lg-wrap{position:relative;margin-top:16px;background:rgba(9,18,35,.55);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:14px;padding:clamp(12px,2vw,18px) clamp(10px,1.6vw,16px) clamp(8px,1.4vw,12px)}
.lg-plot{position:relative;width:100%;height:clamp(240px,40vh,380px);touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair}
.lg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lg-zero{stroke:rgba(238,242,246,.5);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.lg-line{fill:none;stroke:var(--gold);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.lg-yax{position:absolute;left:6px;top:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:1}
.lg-yax span{font-size:clamp(.66rem,1.05vw,.82rem);color:#dfe6ee;background:rgba(6,13,27,.55);border-radius:6px;padding:1px 6px;white-space:nowrap}
.lg-pt{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:grab;touch-action:none;z-index:3}
.lg-pt::after{content:"";width:16px;height:16px;border-radius:50%;background:#eef2f6;border:2px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.lg-pt.lg-low::after{background:var(--gold);border-color:#fff;width:21px;height:21px}
.lg-pt.lg-drag{cursor:grabbing;z-index:6}
.lg-ptlabel{position:absolute;transform:translate(-50%,-50%);z-index:2;max-width:104px;font-size:clamp(.68rem,1.05vw,.82rem);color:#eef2f6;background:rgba(6,13,27,.66);border:1px solid var(--card-line);border-radius:7px;padding:2px 7px;text-align:center;word-break:keep-all;pointer-events:none;line-height:1.3}
.lg-xax{display:flex;justify-content:space-between;margin-top:8px;font-size:clamp(.72rem,1.15vw,.9rem);color:#dfe6ee}
.lg-count{margin-top:10px;font-size:clamp(.82rem,1.3vw,1rem);color:#eef2f6;text-align:center}
.lg-count b{color:var(--gold);font-weight:800}
.lg-hint{margin-top:8px;text-align:center;font-size:clamp(.78rem,1.2vw,.94rem);color:#eef2f6;opacity:.78;word-break:keep-all}
.lg-pop{position:absolute;z-index:20;min-width:190px;max-width:min(260px,86vw);background:rgba(9,18,35,.97);backdrop-filter:blur(10px);border:1px solid rgba(244,201,93,.5);border-radius:12px;padding:12px;box-shadow:0 10px 34px rgba(0,0,0,.55)}
.lg-pop-score{color:var(--gold);font-weight:800;font-size:1.02rem;margin-bottom:8px}
.lg-pop input{width:100%;box-sizing:border-box;background:rgba(6,13,27,.6);border:1px solid var(--card-line);border-radius:9px;color:var(--ink);font-family:inherit;font-size:15px;padding:9px 11px}
.lg-pop input:focus{outline:2px solid rgba(244,201,93,.6);border-color:transparent}
.lg-pop-row{display:flex;gap:8px;margin-top:10px}
.lg-pop-ok{flex:1;border:none;border-radius:9px;padding:9px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;background:var(--gold);color:#1a1205}
.lg-pop-del{border:1px solid rgba(220,80,80,.45);border-radius:9px;padding:9px 12px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;background:rgba(220,80,80,.2);color:#ffb3b3}
.lg-lowest{margin-top:16px;text-align:left;background:rgba(9,18,35,.6);backdrop-filter:blur(9px);border:1px solid rgba(244,201,93,.4);border-left:3px solid var(--gold);border-radius:12px;padding:14px 16px;display:none}
.lg-lowest.show{display:block;animation:fadeUp .4s ease}
.lg-lowest-q{color:var(--gold);font-weight:700;font-size:clamp(.92rem,1.4vw,1.08rem);margin-bottom:10px;word-break:keep-all}
.lg-lowest textarea{margin-top:0;min-height:72px}
/* 짝 교환(pair_exchange) — 짝이 보내온 이야기 패널 */
.w-peer{margin-top:18px;text-align:left;background:rgba(9,18,35,.58);backdrop-filter:blur(9px);border:1px solid rgba(62,203,122,.35);border-radius:14px;padding:14px 16px;display:none}
.w-peer.show{display:block;animation:fadeUp .45s ease}
.w-peer .pl{font-size:12.5px;color:#ffd97a;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.w-peer .pt{font-size:15px;line-height:1.7;color:#eef2f6;word-break:keep-all}
.w-peer.wait{background:rgba(255,255,255,.04);border-color:var(--card-line)}
.w-peer.wait .pl{color:var(--ink-dim)}
.w-peer.wait .pt{color:var(--ink-dim);font-size:14px}

/* 공감 피드 카드 */
.feed{margin-top:20px;display:flex;flex-direction:column;gap:12px;text-align:left}
.feed-empty{text-align:center;color:#eef2f6;font-size:15px;padding:18px 20px;background:rgba(9,18,35,.5);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:12px}
.feed-card{background:rgba(9,18,35,.55);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:14px;padding:15px 16px;animation:fadeUp .4s ease}
.feed-card .who{font-size:12.5px;color:#ffd97a;margin-bottom:8px}
.feed-card .txt{font-size:15px;line-height:1.65;color:#eef2f6;word-break:keep-all}
.react-row{display:flex;gap:8px;margin-top:12px}
.react{appearance:none;cursor:pointer;font-family:inherit;background:rgba(9,18,35,.55);backdrop-filter:blur(9px);border:1px solid var(--card-line);border-radius:999px;padding:6px 12px;font-size:14px;color:#eef2f6;transition:border-color .2s,background .2s}
.react:hover{border-color:rgba(244,201,93,.55)}
.react.on{border-color:var(--gold);background:rgba(40,32,10,.62)}
.react b{font-weight:700;color:var(--gold);margin-left:4px}
/* 공감 배지: 맨글자 → 어두운 인라인 패널 */
.react-badge{display:inline-block;margin-top:14px;font-size:13px;color:#eef2f6;background:rgba(9,18,35,.5);backdrop-filter:blur(6px);border-radius:999px;padding:6px 14px}
.react-badge.done{color:var(--gold);font-weight:600}

/* 하단 내비 (학생이 직접 넘김) */
#nav{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:14px 18px calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,transparent,rgba(6,13,27,.6) 40%)}
.nav-btn{appearance:none;cursor:pointer;font-family:inherit;background:rgba(9,18,35,.6);backdrop-filter:blur(9px);border:1px solid var(--card-line);color:#eef2f6;border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:600;transition:background .2s,opacity .2s;white-space:nowrap}
.nav-btn:hover{background:rgba(30,42,66,.72)}
.nav-btn:disabled{opacity:.28;cursor:default}
#next{background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;border:none}
#horizon{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
#horizon i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--gold));border-radius:99px;transition:width .5s ease}
#pageno{font-size:12px;color:var(--ink-dim);letter-spacing:.06em;min-width:44px;text-align:center}

/* 상단 소집 배너 */
#gatherBar{position:fixed;top:0;left:0;right:0;z-index:25;background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;font-weight:700;text-align:center;padding:14px calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left));font-size:15px;transform:translateY(-100%);transition:transform .4s ease}
#gatherBar.show{transform:translateY(0)}
/* 번호 중복 안내 배너 (일시 표시) */
#noticeBar{position:fixed;top:0;left:0;right:0;z-index:26;background:linear-gradient(135deg,#e8944a,#d0693f);color:#fff;font-weight:700;text-align:center;padding:14px 18px;font-size:14.5px;line-height:1.45;transform:translateY(-100%);transition:transform .4s ease;word-break:keep-all}
#noticeBar.show{transform:translateY(0)}
/* 교사 발문 배너 (focusQuestion) */
#focusBanner{position:fixed;top:0;left:0;right:0;z-index:24;background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;font-weight:700;text-align:center;padding:16px 18px;font-size:16px;line-height:1.4;transform:translateY(-100%);transition:transform .4s ease;word-break:keep-all}
#focusBanner.show{transform:translateY(0)}

/* 오버레이 */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:28px 22px;background:linear-gradient(180deg,#0a1628,#101f3a 60%,#16264a);overflow-y:auto}
.overlay.hidden{display:none}
/* 출석번호 중복 확인창 — 오타로 한 학생 기록이 둘로 갈라지는 것을 막는다 */
#dupGate{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(6,12,24,.8);backdrop-filter:blur(6px);padding:22px}
.dg-box{width:100%;max-width:400px;background:rgba(12,22,40,.98);border:1px solid var(--card-line);border-radius:18px;padding:26px 22px;text-align:center}
.dg-box h3{font-size:19px;margin:0 0 12px;color:#ffd97a}
.dg-box p{font-size:15px;line-height:1.65;color:#cdd6e4;margin:0;word-break:keep-all}
.dg-me{margin:16px 0;padding:13px;border-radius:12px;background:rgba(255,255,255,.06);font-size:17px;font-weight:700;color:#eef2f6}
.dg-row{display:flex;gap:10px;margin-top:20px}
.dg-btn{flex:1;padding:14px 12px;border-radius:12px;border:1px solid var(--card-line);background:rgba(255,255,255,.06);color:#eef2f6;font-size:15px;font-family:inherit;cursor:pointer}
.dg-btn.primary{background:linear-gradient(135deg,#e8b84a,#d99a2b);color:#1a1205;border:none;font-weight:700}
.join-card{width:100%;max-width:380px;text-align:center;margin:auto}
.join-card h1{font-size:clamp(26px,7vw,38px);margin-bottom:6px}
.field{text-align:left;margin-top:16px}
.field label{display:block;font-size:13px;color:var(--ink-dim);margin-bottom:8px}
.field input{width:100%;background:rgba(6,13,27,.5);border:1px solid var(--card-line);border-radius:14px;color:var(--ink);font-family:inherit;font-size:18px;padding:15px 16px}
.field input#code{letter-spacing:.42em;text-align:center;font-size:26px;font-weight:600}
.field input:focus{outline:2px solid rgba(244,201,93,.6);border-color:transparent}
.join-err{display:none;margin-top:16px;color:#ff9d8a;font-size:14px;font-weight:600}
.join-err.show{display:block}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim);margin-top:22px}
.dot{width:9px;height:9px;border-radius:50%;background:#3ecb7a;box-shadow:0 0 0 4px rgba(62,203,122,.18)}
.lobby-emoji{font-size:52px;margin-bottom:16px;animation:pulse 2.2s infinite ease-in-out}
.end-emoji{font-size:56px;margin-bottom:18px}
/* 도움 요청 · 정체 힌트 */
#helpFrame{position:fixed;inset:0;z-index:18;pointer-events:none;border:0 solid transparent}
body.help-on #helpFrame{border:6px solid var(--gold);animation:helpPulse 1.3s infinite}
@keyframes helpPulse{50%{border-color:rgba(244,201,93,.35)}}
#helpAff{position:fixed;left:14px;bottom:76px;z-index:19;max-width:270px;background:rgba(6,13,27,.92);border:1px solid var(--card-line);border-radius:14px;padding:12px 14px;display:none;box-shadow:0 8px 30px rgba(0,0,0,.5)}
body.joined #helpAff{display:block;animation:fadeUp .4s ease}   /* 입장하면 항상 표시 */
#helpAff.stall{border-color:var(--gold);animation:helpPulse 1.3s infinite}
#helpAff .ht{display:none;font-size:13px;color:var(--ink-dim);line-height:1.6;margin-bottom:10px;word-break:keep-all}
#helpAff.stall .ht{display:block}
#helpBtn{appearance:none;cursor:pointer;font-family:inherit;width:100%;background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;font-weight:700;font-size:14px;border:none;padding:10px;border-radius:10px}
body.help-on #helpBtn{background:rgba(255,255,255,.12);color:var(--gold)}
/* [B] 모바일(<560px): 도움 버튼을 우하단 소형 FAB(아이콘만)로 축소 — 좁은 화면 본문 가림 방지. 기능·노란 테두리·색 연출 불변 */
@media(max-width:559px){
  #helpAff{left:auto;right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));max-width:none;background:transparent;border:none;box-shadow:none;padding:0}
  #helpAff .ht{display:none!important}
  #helpBtn{width:clamp(52px,14vw,60px);height:clamp(52px,14vw,60px);padding:0;border-radius:50%;font-size:0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
  #helpBtn::before{content:"🙋";font-size:clamp(22px,6vw,26px);line-height:1}
  body.help-on #helpBtn::before{content:"✋"}
}
@media(prefers-reduced-motion:reduce){*,#sun,#sky{transition:none!important;animation:none!important}}