/* ══════════════════════════════════════════════════════════════
   제주 기후 교육 협의체 (jcec.kr) — 공용 디자인 시스템 v2 (bold)
   ────────────────────────────────────────────────────────────
   색 토큰 규칙 (대비 검증 완료, 임의 변경 금지)
   · --ink   #0F1117 : 본문·제목. 종이(--bg #F4F3EE) 위 17:1
   · --peri  #4F48EF : 브랜드 바이올렛(협의체 로고색). 흰/종이 위 5.9 / 5.3:1 → 텍스트·면 모두 가능
   · --lime  #D0F040 : 라임(로고의 호). 면 전용, 그 위 글자는 --ink (14:1). 바이올렛 면 위 큰 제목(24px+) 강조에만 글자색으로 허용(4.6:1)
   · --mute  #5F6572 : 보조 텍스트 (종이 위 5.3:1) · --mute-2 #646A78 12px 이하 하한
   · 재난 테마 면(--th-*)과 그 위 글자색(--th-*-tx)은 짝으로만 쓴다:
       heat #FF5A36/ink 6.1 · drought #F2B134/ink 10 · rain #0E75A3/white 5.0(물빛 청록)
       typhoon #2C3E8C/white 9.6(폭풍 남색) · snow #BFEBFF/ink 14.9 · cold #1B2A5B/white 13.7
   · 차트 마크에는 브랜드색을 쓰지 않는다 (기온 차트는 RdBu 계열)
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F4F3EE;
  --card:#FFFFFF;
  --ink:#0F1117;
  --ink-2:#262A33;
  --mute:#5F6572;
  --mute-2:#646A78;
  --line:#E6E4DC;
  --peri:#4F48EF;
  --peri-tx:#4F48EF;
  --peri-2:#8E88FF;
  --peri-3:#ECEBFF;
  --peri-d:#2E29B4;
  --lime:#D0F040;
  --lime-2:#EEF9B3;
  --grass:#2E9E52;
  --grass-2:#1E7A3E;
  --warn:#B33A3A;
  --th-heat:#FF5A36;   --th-heat-tx:#0F1117;
  --th-drought:#F2B134;--th-drought-tx:#0F1117;
  --th-rain:#0E75A3;   --th-rain-tx:#FFFFFF;
  --th-typhoon:#2C3E8C;--th-typhoon-tx:#FFFFFF;
  --th-snow:#BFEBFF;   --th-snow-tx:#0F1117;
  --th-cold:#1B2A5B;   --th-cold-tx:#FFFFFF;
  --th-guide:#4F48EF;  --th-guide-tx:#FFFFFF;
  --fs-display:clamp(40px,5.6vw,84px);
  --fs-h1:clamp(36px,5vw,72px);
  --fs-h2:clamp(26px,3vw,42px);
  --fs-h3:clamp(19px,1.8vw,25px);
  --fs-body:clamp(16.5px,1.2vw,18.5px);
  --r-xl:26px; --r-lg:18px; --r-md:13px; --r-sm:10px;
  --sh:none;   /* v6: 번지는 그림자 없이 평면·선으로 */
  --sh-lg:none;
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.7,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',
    'Noto Sans KR','Malgun Gothic',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:'tnum';line-height:1.5;font-size:var(--fs-body)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--peri-tx);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 14px 14px;font-weight:800;font-size:15px;transition:top .2s}
.skip:focus{top:0}

/* ══ 모션 ══ */
.rv{opacity:0;transform:translateY(38px) scale(.985);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
[data-motion="reduced"] .rv{transform:none!important;transition:opacity .2s linear}
[data-motion="off"] .rv{opacity:1!important;transform:none!important;transition:none!important}
[data-motion="off"] *{animation:none!important;transition:none!important}
[data-motion="reduced"] .float,[data-motion="off"] .float{animation:none!important}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float{animation:flt 5.5s ease-in-out infinite}

/* ══ 레이아웃 셸 ══ */
.shell{max-width:1560px;margin:0 auto;padding:0 clamp(14px,2vw,30px)}
.plate{background:var(--card);border-radius:var(--r-xl);padding:clamp(16px,2vw,26px) clamp(16px,2.4vw,34px);
  margin-top:14px}

/* ══ NAV ══ */
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px);padding:6px 0}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo .mk{width:42px;height:38px;position:relative;flex:0 0 auto;line-height:0}
.logo .mk img{width:100%;height:100%;object-fit:contain;display:block}
.logo .mk i{position:absolute;border-radius:5px;display:block}
.logo .mk i:nth-child(1){left:0;top:0;width:16px;height:16px;background:var(--peri)}
.logo .mk i:nth-child(2){right:0;top:0;width:20px;height:20px;background:var(--lime);border-radius:5px 9px 5px 5px}
.logo .mk i:nth-child(3){left:0;bottom:0;width:20px;height:18px;background:var(--peri-2)}
.logo .mk i:nth-child(4){right:2px;bottom:0;width:15px;height:15px;background:var(--ink)}
.logo b{font-size:16.5px;font-weight:800;letter-spacing:-.8px;line-height:1.15;display:block;white-space:nowrap}
.logo em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--mute);letter-spacing:-.2px}
.logo>span{min-width:0}
.nav menu{display:flex;gap:clamp(10px,1.6vw,30px);list-style:none;margin:0 auto;font-size:16px;font-weight:700}
.nav menu a{padding:8px 4px;color:var(--ink-2);transition:color .3s var(--e);display:block;white-space:nowrap}
.nav menu a:hover,.nav menu a[aria-current]{color:var(--peri-tx)}
.nav .rt{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.search{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:100px;padding:11px 16px;
  width:min(230px,20vw)}
.search input{border:0;background:none;outline:none;font:inherit;font-size:14px;width:100%;color:var(--ink);
  min-height:24px;padding:1px 0}
.search input::placeholder{color:var(--mute-2)}
.btn-dark{background:var(--ink);color:#fff;border-radius:100px;padding:13px 26px;font-size:15px;font-weight:700;
  transition:transform .3s var(--e),background .3s var(--e);display:inline-block}
.btn-dark:hover{background:var(--ink-2)}
.ham{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
.ham s{display:block;width:16px;height:1.8px;background:var(--ink);text-decoration:none;
  box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}

/* 독립 내비 링크는 WCAG 2.2 2.5.8(24×24) 충족을 위해 최소 높이 확보 */
.crumb a,.crumb span,.sech .all,.fnav a,.klass .kh .more,.card .meta a,.sitelist a{
  display:inline-flex;align-items:center;min-height:24px;min-width:24px;justify-content:flex-start}
.sitelist a{padding:5px 0}

/* ══ 브레드크럼 · 페이지 헤더 ══ */
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;
  color:var(--mute);padding:20px 0 0}
.crumb a:hover{color:var(--peri-tx)}
.crumb s{text-decoration:none;color:var(--mute-2)}
.crumb [aria-current]{color:var(--ink)}
.phead{padding:clamp(20px,3vw,42px) 0 clamp(18px,2.4vw,30px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center}
.phead .lb{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:800;letter-spacing:.16em;
  color:var(--peri-tx);margin-bottom:18px;max-width:none;line-height:1.4}
.phead .lb s{flex:0 0 auto}
.phead .lb s{width:28px;height:4px;background:var(--lime);border-radius:100px;text-decoration:none;display:block}
.phead h1{font-size:var(--fs-h1);font-weight:900;letter-spacing:-.045em;line-height:1.06;word-break:keep-all}
.phead h1 .g{color:var(--peri)}
.phead p{margin-top:22px;font-size:clamp(17px,1.35vw,21px);color:var(--ink-2);line-height:1.6;
  font-weight:600;max-width:34ch;word-break:keep-all}
.pstats{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:560px){.pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pstats div:last-child:nth-child(odd){grid-column:1/-1}}
.pstats div{background:var(--bg);border-radius:var(--r-lg);padding:18px 24px;text-align:left;min-width:0;flex:1 1 auto}
.pstats b{font-size:clamp(30px,3.2vw,48px);font-weight:900;letter-spacing:-.04em;display:block;
  line-height:1;white-space:nowrap}
.pstats div>span{font-size:13px;font-weight:700;color:var(--mute);margin-top:8px;display:block}
.pstats b span{font:inherit;color:inherit;display:inline;margin:0}   /* 숫자 안의 id 스팬(마이페이지)이 라벨 규칙을 물려받지 않게 */
@media(max-width:760px){.phead{grid-template-columns:minmax(0,1fr)}}

/* ══ 섹션 ══ */
.sech{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sech h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.04em;line-height:1.05;word-break:keep-all}
.sech s{width:16px;height:16px;border-radius:5px;background:var(--lime);text-decoration:none;display:block;flex:0 0 auto;transform:rotate(12deg)}
.sech .all{margin-left:auto;font-size:14px;font-weight:800;color:var(--ink);border:1.5px solid var(--line);border-radius:100px;padding:8px 16px;transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e)}
.sech .all:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sec{margin-top:clamp(34px,4.4vw,64px)}

/* ══ 공용 버튼 ══ */
.pill{display:inline-flex;align-items:center;gap:11px;border-radius:100px;padding:19px 34px;font-size:17px;
  font-weight:800;transition:transform .35s var(--e),box-shadow .35s var(--e),background .35s var(--e),color .35s var(--e)}
.pill.k{background:var(--ink);color:#fff}
.pill.k:hover{background:var(--lime);color:var(--ink);transform:translateY(-3px)}
.pill.w{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.pill.w:hover{box-shadow:inset 0 0 0 1.5px var(--peri)}
.pill svg{width:18px;height:18px}
.tb{background:var(--card);border-radius:100px;padding:11px 20px;font-size:14px;font-weight:800;
  box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s var(--e),color .3s var(--e);min-height:44px}
.tb:hover,.tb[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ══ 태그 · 배지 ══ */
.tag{display:inline-block;font-size:13px;font-weight:700;background:var(--bg);border-radius:100px;padding:8px 15px}
.std{font-size:11px;font-weight:800;background:var(--peri-3);color:#3F38D0;border-radius:6px;padding:4px 8px;
  display:inline-block}
.ex{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--mute);background:var(--bg);
  border-radius:6px;padding:4px 8px;flex:0 0 auto}
.new{font-size:10.5px;font-weight:800;background:var(--lime);color:var(--ink);border-radius:100px;padding:4px 10px}

/* ══ 카드 그리드 (범용) ══ */
.grid{display:grid;gap:clamp(12px,1.4vw,18px)}
.g2{grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr))}
/* 커뮤니티: 좌 카드 / 우 전체표 — 표 쪽에 폭을 더 준다 */
.g-comm{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
@media(max-width:980px){.g-comm{grid-template-columns:minmax(0,1fr)}}
.card .tbl th,.card .tbl td{padding:13px 12px}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.g2f{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.gpart .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.gpart .grid{grid-template-columns:minmax(0,1fr)}}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.card{background:var(--card);border-radius:var(--r-lg);padding:clamp(20px,2vw,28px);border:1px solid var(--line);
  transition:transform .4s var(--e),box-shadow .4s var(--e);position:relative;display:block}
a.card:hover{border-color:var(--peri);transform:translateY(-6px)}
.card h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.035em;line-height:1.25;word-break:keep-all}
.card p{margin-top:12px;font-size:15.5px;color:var(--mute);line-height:1.65;font-weight:500;word-break:keep-all}
.card .no{position:absolute;right:16px;top:2px;font-size:78px;font-weight:800;color:var(--bg);
  letter-spacing:-4px;line-height:1;pointer-events:none}
.card .cno{position:relative;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--peri-tx)}
.card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.card .meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;font-size:13px;
  font-weight:700;color:var(--ink-2)}
.card .pb{height:5px;background:var(--bg);border-radius:100px;overflow:hidden;margin-top:18px}
.card .pb i{display:block;height:100%;background:linear-gradient(90deg,var(--peri),var(--peri-2));border-radius:100px}
.card .pb i.done{background:var(--lime)}
.card .pt{font-size:12px;font-weight:700;color:var(--mute-2);margin-top:7px}


/* ══ 히어로 (홈) ══ */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,46px);
  align-items:center;padding:clamp(34px,4.6vw,72px) clamp(22px,3.4vw,56px);margin-top:14px;
  background:var(--ink);color:#fff;border-radius:var(--r-xl);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(81,70,245,.55),rgba(81,70,245,0));pointer-events:none}
@media(max-width:940px){.hero{grid-template-columns:1fr}.art{min-height:300px;order:-1}}
.eyeb{display:flex;align-items:center;gap:13px;font-size:15px;font-weight:800;color:var(--lime);letter-spacing:.02em}
.eyeb s{width:34px;height:5px;background:var(--lime);border-radius:100px;text-decoration:none;display:block}
.h1{margin-top:26px;font-size:var(--fs-display);font-weight:900;letter-spacing:-.05em;
  line-height:1.0;word-break:keep-all}
.h1 .g{color:var(--lime)}
.ln{display:block;overflow:hidden;padding:.14em 0 .18em;margin:-.14em 0 -.18em}   /* 글리프 위아래가 잘리지 않게 여유를 두고 음수 마진으로 상쇄 */
.ln>span{display:block;transform:translateY(135%);animation:ln-rise 1s var(--e) forwards}
.ln:nth-child(2)>span{animation-delay:.12s}.ln:nth-child(3)>span{animation-delay:.24s}
@keyframes ln-rise{to{transform:none}}
[data-motion="reduced"] .ln>span,[data-motion="off"] .ln>span{animation:none;transform:none}
.hp{margin-top:26px;font-size:clamp(17px,1.4vw,22px);color:#C9CCD6;line-height:1.55;font-weight:600;
  word-break:keep-all;max-width:30ch}
.hb{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.hero .pill.k{background:var(--lime);color:var(--ink)}
.hero .pill.k:hover{background:#fff}
.hero .pill.w{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.hero .pill.w:hover{box-shadow:inset 0 0 0 1.5px #fff;transform:translateY(-3px)}

.art{position:relative;min-height:clamp(300px,34vw,440px)}
.blobwrap{position:absolute;inset:0}
.blobwrap svg{width:100%;height:100%;overflow:visible}
.glass{position:absolute;left:0;bottom:6%;background:var(--lime);
  border-radius:var(--r-lg);padding:18px 22px;text-align:left;box-shadow:var(--sh-lg);
  display:grid;gap:2px;max-width:240px;color:var(--ink);transform:rotate(-3deg)}
.glass .ic{display:none}
.glass .lb{font-size:13px;font-weight:800}
.glass .vl{font-size:clamp(34px,3.4vw,52px);font-weight:900;letter-spacing:-.05em;line-height:1}
.glass .sm{font-size:14px;font-weight:700;margin-top:4px}

/* ══ 벤토 (홈) ══ */
.bento{display:grid;grid-template-columns:1.2fr 1.08fr 1.3fr;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(14px,1.6vw,22px)}
@media(max-width:1120px){.bento{grid-template-columns:1fr}}
.bcard{background:var(--card);border-radius:var(--r-lg);padding:clamp(20px,2vw,28px);box-shadow:var(--sh);
  position:relative;overflow:hidden}
.bcard h3{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.9px}
.bcard>p{margin-top:12px;font-size:14.5px;color:var(--mute);line-height:1.75;font-weight:500;word-break:keep-all}
.bcard.earth{background:var(--peri-3);display:flex;align-items:center;gap:10px;min-height:230px}
.bcard.earth>p{color:var(--mute)}
.bcard.earth .lf{position:relative;z-index:2;flex:1 1 auto;min-width:0}
.bcard.earth .globe{position:absolute;right:-14%;top:50%;transform:translateY(-50%);
  width:min(62%,260px);z-index:1;pointer-events:none}
.lm{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  border-radius:100px;padding:14px 26px;font-size:15px;font-weight:800;margin-top:26px;
  transition:transform .3s var(--e)}
.lm:hover{background:var(--ink-2)}
.dl{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
.dlbtn{display:inline-flex;align-items:center;gap:10px;background:var(--bg);border-radius:100px;
  padding:13px 22px;font-size:14.5px;font-weight:800;margin-top:20px;
  transition:background .3s var(--e),color .3s var(--e)}
.dlbtn:hover{background:var(--ink);color:#fff}
.books{width:clamp(84px,7.6vw,110px);flex:0 0 auto}

/* ══ 재난 스트립 ══ */
.strip{display:flex;align-items:center;background:var(--card);border-radius:100px;padding:8px;box-shadow:var(--sh);
  margin-top:8px;overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip a{flex:1;min-width:132px;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 10px;font-size:15.5px;font-weight:700;border-radius:100px;position:relative;white-space:nowrap;
  transition:background .3s var(--e),color .3s var(--e)}
.strip a+a::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--line)}
.strip a:hover{background:var(--bg)}
.strip a:hover::before,.strip a:hover+a::before{opacity:0}
.strip a[aria-current]{background:var(--lime);color:var(--ink)}
.strip a[aria-current]::before,.strip a[aria-current]+a::before{opacity:0}
.strip svg{width:22px;height:22px;color:var(--ink-2);flex:0 0 auto}
.strip a:hover svg{color:var(--peri)}
.strip a[aria-current] svg{color:var(--ink)}

/* ══ 학습 영상 카드 ══ */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:14px;overflow-x:auto;padding-top:10px;
  scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.railwrap{position:relative}
.railwrap::after{content:"";position:absolute;right:-1px;top:0;bottom:6px;width:38px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--card) 86%);border-radius:0 var(--r-lg) var(--r-lg) 0}
@media(max-width:1120px){.railwrap::after{display:none}}
.vcard{scroll-snap-align:start;position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/6.4;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--sh);
  transition:transform .4s var(--e),box-shadow .4s var(--e)}
.vcard:hover{box-shadow:var(--sh-lg);transform:translateY(-8px) rotate(-1.2deg)}
.vcard .bgv{position:absolute;inset:0;z-index:0}
.vcard .bgv svg{width:100%;height:100%}
.vcard .vshade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,12,16,.10) 0%,rgba(10,12,16,.30) 38%,rgba(10,12,16,.72) 62%,rgba(10,12,16,.90) 100%)}
.vcard .play{position:absolute;right:14px;top:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;
  transition:transform .35s var(--e),background .35s var(--e)}
.vcard:hover .play{background:var(--lime)}
.vcard .vc{position:relative;z-index:2;padding:16px 16px 14px}
.vchip{display:inline-block;font-size:11.5px;font-weight:800;background:rgba(10,12,16,.55);
  backdrop-filter:blur(6px);border-radius:7px;padding:5px 10px;margin-bottom:11px}
.vcard h3{font-size:clamp(18px,1.4vw,20px);font-weight:900;letter-spacing:-.035em;line-height:1.24;word-break:keep-all}
.vmeta{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;margin-top:11px;color:#F1F2F5}
.vmeta s{width:1px;height:11px;background:rgba(255,255,255,.5);text-decoration:none;display:block}
.vprog{position:relative;z-index:2;height:4px;background:rgba(255,255,255,.28);margin:0 16px 16px;
  border-radius:100px;overflow:hidden}
.vprog i{display:block;height:100%;background:var(--lime);border-radius:100px}

/* ══ 랭킹 · 도넛 ══ */
.rank{list-style:none;margin:0;padding:0}
.rank li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;font-weight:700}
.rank li:last-child{border-bottom:0}
.rank li em{margin-left:auto;font-style:normal;font-weight:800;font-feature-settings:'tnum'}
.rank li b{width:22px;height:22px;border-radius:7px;background:var(--bg);font-size:11.5px;font-weight:800;
  display:grid;place-items:center;flex:0 0 auto}
.rank li.me{color:var(--peri-tx)}
.rank li.me b{background:var(--lime);color:var(--ink)}
.rank li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up{display:inline-block;font-size:11px;font-weight:800;color:var(--peri-tx);background:var(--peri-3);
  border-radius:5px;padding:2px 6px;flex:0 0 auto;margin-left:6px;vertical-align:middle}
.rank li .up{margin-left:0}
tbody tr .up{background:#fff}
.donut{width:clamp(104px,10vw,130px);position:relative;flex:0 0 auto}
.donut .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut .c span{font-size:11.5px;font-weight:700;color:var(--mute);display:block;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut .c b{font-size:clamp(22px,2vw,27px);font-weight:800;letter-spacing:-1px}
.klass .kh{display:flex;align-items:center;gap:9px}
.klass .kh .more{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--mute)}
.klass .body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin-top:18px}
.ksub{font-size:13.5px;font-weight:500;color:var(--mute);margin-top:10px;line-height:1.6}
.ksub b{color:var(--ink);font-weight:800}

/* ══ 본문 리더 ══ */
.reader{background:var(--card);border-radius:var(--r-xl);padding:clamp(24px,3vw,46px);box-shadow:var(--sh);
  margin-top:clamp(14px,1.6vw,22px);display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:start}
.pnav{position:sticky;top:24px}
.pnav h3,.pnav .nh{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:var(--peri-tx);margin-bottom:14px}
.pnav a{display:block;padding:12px 14px;border-radius:var(--r-sm);font-size:15.5px;font-weight:700;color:var(--mute);
  transition:background .3s var(--e),color .3s var(--e)}
.pnav a:hover{background:var(--bg);color:var(--ink)}
.pnav a[aria-current]{background:var(--ink);color:#fff}
.pnav a.sub{font-size:14px;padding-left:22px}
@media(max-width:920px){
  .reader{grid-template-columns:minmax(0,1fr)}
  .pnav{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin:0 -4px;scrollbar-width:none}
  .pnav::-webkit-scrollbar{display:none}
  .pnav h3,.pnav .nh{display:none}
  .pnav a,.pnav a.sub{flex:0 0 auto;white-space:nowrap;font-size:13.5px;padding:9px 13px;background:var(--bg);min-height:36px;display:flex;align-items:center;gap:5px}
  .pnav a .t{max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .pnav a[aria-current]{background:var(--ink)}
  .pnav .readmark{display:none}
}
.ptx{min-width:0}
.ptx h1,.ptx h2{font-size:clamp(30px,3.6vw,54px);font-weight:900;letter-spacing:-.045em;line-height:1.06}
.ptx h1 small,.ptx h2 small{display:block;font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--peri-tx);margin-bottom:14px}
.ptx>p,.ptx article>p{font-size:clamp(18px,1.45vw,21px);line-height:1.85;color:var(--ink-2);margin-top:22px;font-weight:500;
  word-break:keep-all}
.ptx article>h2:first-of-type+p{font-size:clamp(20px,1.7vw,24px);line-height:1.7;color:var(--ink);font-weight:600}
.ptx p b{font-weight:800;color:var(--ink)}
.ptx p mark{background:var(--lime);border-radius:4px;padding:1px 3px;color:var(--ink)}
.ptx h3{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.9px;margin-top:34px}

/* ══ 그림 상자 · 기후 스트라이프 ══ */
.figbox{margin-top:28px;background:var(--bg);border-radius:var(--r-lg);padding:22px}
.figbox .cp{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--mute);margin-bottom:14px}
.stripes{display:flex;gap:1px;height:clamp(110px,12vw,150px);border-radius:10px;overflow:hidden}
.stripes span{flex:1;transition:transform .25s var(--e)}
.ax{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--ink-2);margin-top:10px}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px;font-size:12px;
  color:var(--mute);font-weight:500}
.dt{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.dt th,.dt td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:right;font-weight:700}
.dt th:first-child,.dt td:first-child{text-align:left}
.dt thead th{font-size:12.5px;font-weight:800;color:var(--mute)}


/* ══ 가이드북 · 목차 ══ */
.gpart{margin-top:clamp(26px,3vw,40px)}
.gpart .ph{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
/* 부·단원 숫자 배지 — 로마자 대신 숫자. .pno 큰 사각 배지(목차 파트 머리) · .nb 작은 인라인 배지(머리글·리더 소제목) */
.pno{display:grid;place-items:center;width:clamp(58px,6vw,78px);height:clamp(58px,6vw,78px);border-radius:24px;background:var(--peri);color:#fff;
  font-size:clamp(30px,3.3vw,44px);font-weight:900;letter-spacing:-.05em;line-height:1;flex:0 0 auto;font-variant-numeric:tabular-nums;
  box-shadow:0 10px 24px -12px rgba(63,66,240,.55)}
.gpart .ph .pt{min-width:0}
.gpart .ph .pk{font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--peri-tx);margin-bottom:5px}
.nb{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--peri);color:#fff;
  font-size:12px;font-weight:900;letter-spacing:0;line-height:1;margin-right:3px;vertical-align:-5px;font-variant-numeric:tabular-nums}
.phead .lb .nb{background:var(--th-tx,#fff);color:var(--th,var(--peri))}
.phead .lb span{display:inline-flex;align-items:center;gap:2px}
.gpart .ph h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.04em;line-height:1.05}
.gpart .ph .pm{font-size:13.5px;color:var(--mute);font-weight:600;width:100%}
.ucard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.ucard .uno{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center;
  font-size:15px;font-weight:800;color:var(--peri-tx)}
.ucard.done .uno{background:var(--lime);color:var(--ink)}
.ucard .ut h3{font-size:clamp(19px,1.8vw,25px)}
.ucard .ut .us{display:none}
.flat .ucard .ut .us{display:block;font-size:12px;font-weight:800;color:var(--peri-tx);letter-spacing:.04em;margin:0 0 6px}   /* 파트 구분 없이 한 줄로 늘어놓을 때(마이페이지)만 파트 표시 */
.ucard .uno{width:52px;height:52px;font-size:18px;font-weight:900}
.ucard .ur{text-align:right;flex:0 0 auto}
.ucard .ur b{font-size:20px;font-weight:800;letter-spacing:-.6px;display:block;line-height:1}
.ucard .ur span{font-size:11.5px;color:var(--mute);font-weight:700}
.ucard .pb{grid-column:1/-1;margin-top:4px}
.ucard .meta{margin-top:0!important}
@media(max-width:560px){.ucard{grid-template-columns:auto minmax(0,1fr)}.ucard .ur{grid-column:2;text-align:left}}
.ring{width:96px;height:96px;position:relative;flex:0 0 auto}
.ring svg{width:100%;height:100%}
.ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .c b{font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1}
.ring .c span{font-size:10.5px;color:var(--mute);font-weight:700;display:block;margin-top:3px}
.ovw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;background:var(--card);
  border-radius:var(--r-lg);padding:22px 26px;box-shadow:var(--sh);margin-top:20px}
.ovw .ot h2{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.7px}
.ovw .ot p{font-size:14px;color:var(--mute);margin-top:6px;font-weight:500;word-break:keep-all}
.ovw .ok{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.ovw .ok div b{font-size:19px;font-weight:800;letter-spacing:-.5px;display:block;line-height:1.1}
.ovw .ok div span{font-size:11.5px;color:var(--mute);font-weight:700}
@media(max-width:560px){.ovw{grid-template-columns:1fr;justify-items:center;text-align:center}.ovw .ok{justify-content:center}}

/* ══ 가이드북 · 단원 ══ */
.goals{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.goals li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(17px,1.4vw,21px);font-weight:700;line-height:1.5;word-break:keep-all}
.goals li::before{content:"✓";flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--lime);
  display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--ink);margin-top:1px}
.lvl{display:inline-flex;background:var(--bg);border-radius:100px;padding:3px}
.lvl button{font-size:13px;font-weight:700;padding:7px 15px;border-radius:100px;color:var(--mute);min-height:32px}
.lvl button[aria-pressed="true"]{background:var(--ink);color:#fff}
.stds{display:flex;flex-wrap:wrap;gap:7px}
.stds .std{font-size:12px;padding:6px 10px}
.stdlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.stdlist li{font-size:13.5px;color:var(--ink-2);line-height:1.6;display:flex;gap:9px;word-break:keep-all}
.stdlist li .std{flex:0 0 auto;align-self:flex-start}
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.tl div{background:var(--bg);border-radius:var(--r-md);padding:14px 16px}
.tl div b{font-size:clamp(26px,2.6vw,38px);font-weight:900;display:block;line-height:1;letter-spacing:-.04em}
.tl div span{font-size:12.5px;color:var(--mute);font-weight:700}
.tl div p{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.55;word-break:keep-all}
@media(max-width:560px){.tl{grid-template-columns:1fr}}
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.flow s{text-decoration:none;color:var(--mute-2)}
.scard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.scard .sn{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--peri-tx);width:52px}
.scard h3{font-size:clamp(18px,1.6vw,22px)}
.scard .sm{font-size:15px;color:var(--mute);font-weight:600;margin-top:6px}
.scard .st{font-size:12px;font-weight:800;border-radius:100px;padding:6px 11px;background:var(--bg);color:var(--mute);flex:0 0 auto}
.scard.done .st{background:var(--lime);color:var(--ink)}
.alist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alist li{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);padding:13px 16px;
  box-shadow:var(--sh);font-size:14.5px;font-weight:600;word-break:keep-all}
.alist li .k{font-size:11.5px;font-weight:800;color:var(--peri-tx);background:var(--peri-3);border-radius:6px;padding:4px 8px;flex:0 0 auto}
.alist li .d{margin-left:auto;font-size:12px;font-weight:800;color:var(--mute);flex:0 0 auto}
.alist li.done .d{color:var(--ink);background:var(--lime);border-radius:100px;padding:4px 9px}

/* ══ 가이드북 · 리더 ══ */
.rprog{position:sticky;top:0;z-index:20;background:var(--card);margin:0 -2px 6px;padding:8px 0 10px}
.rprog .bar{height:5px;background:var(--bg);border-radius:100px;overflow:hidden}
.rprog .bar i{display:block;height:100%;background:var(--peri);border-radius:100px;width:0;transition:width .2s linear}
.rprog .rl{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;color:var(--mute);margin-top:7px}
.rprog .rl span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rprog .rl span:last-child{flex:0 0 auto}
.ptx h2{font-size:clamp(22px,2.1vw,30px);font-weight:900;letter-spacing:-.035em;margin-top:44px;line-height:1.2}
.ptx h2:first-of-type{margin-top:26px}
.ptx .term{border-bottom:2px solid var(--lime);cursor:help;font-weight:800}
.terms{margin-top:22px;display:grid;gap:8px}
.terms div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;background:var(--bg);border-radius:var(--r-md);padding:13px 16px;font-size:14px;line-height:1.65;word-break:keep-all}
.terms b{font-weight:800;white-space:nowrap}
.terms span{color:var(--ink-2);font-weight:500}
.ibox{margin-top:26px;background:var(--lime-2);border-radius:var(--r-lg);padding:22px 24px;font-size:15px;line-height:1.8;color:var(--ink-2);font-weight:500;word-break:keep-all}
.ibox b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:8px}
.deep{margin-top:26px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.deep summary{padding:18px 22px;font-size:15.5px;font-weight:800;cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:56px}
.deep summary::-webkit-details-marker{display:none}
.deep summary .lv{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--peri-tx);background:var(--peri-3);border-radius:6px;padding:4px 8px;white-space:nowrap;flex:0 0 auto}
.deep summary{word-break:keep-all}
.deep summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2.4px solid var(--mute);border-bottom:2.4px solid var(--mute);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--e)}
.deep[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.deep .db{padding:0 22px 22px;display:grid;gap:14px}
.deep .db div{font-size:15px;line-height:1.8;color:var(--ink-2);font-weight:500;word-break:keep-all}
.deep .db div b{display:block;font-weight:800;color:var(--ink);margin-bottom:4px}
.alert{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.alert>div{background:var(--bg);border-radius:var(--r-lg);padding:18px 20px}
.alert .al{font-size:12px;font-weight:800;letter-spacing:.14em;display:inline-block;border-radius:6px;padding:4px 9px;margin-bottom:10px}
.alert .w1 .al{background:#FFF1C9;color:#6B4B00}
.alert .w2 .al{background:#FBE0DC;color:#7A1F14}
.alert p{font-size:14.5px;line-height:1.7;font-weight:600;color:var(--ink-2);word-break:keep-all}
.alert .ah{grid-column:1/-1;font-size:13px;font-weight:800;color:var(--mute);letter-spacing:.06em}
.alert.onpg>div{background:var(--card);border:1.5px solid var(--line)}
.alert.onpg .ah{margin-bottom:-2px}
@media(max-width:560px){.alert{grid-template-columns:1fr}}
.ck{margin-top:26px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.ck h3{font-size:15.5px;font-weight:800;margin:0 0 12px}
.ck h4{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--peri-tx);margin:14px 0 8px}
.ck ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ck li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.6;font-weight:500;color:var(--ink-2);word-break:keep-all}
.ck li::before{content:"";flex:0 0 auto;width:18px;height:18px;border:1.8px solid var(--mute-2);border-radius:5px;margin-top:2px}
.figbox .cp small{font-size:11px;font-weight:600;letter-spacing:0;color:var(--mute);margin-left:8px}
@media(max-width:560px){.figbox .cp small{display:block;margin:4px 0 0}}

/* 제주 기온 표 → 막대 */
.jt{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;align-items:end;height:150px;margin-top:8px}
.jt div{min-width:0}
@media(max-width:480px){.jt{gap:3px}.jt div{font-size:9.5px}.jt i::after{font-size:9.5px;letter-spacing:-.3px}}
.jt div{display:grid;grid-template-rows:1fr auto;height:100%;text-align:center;font-size:11px;font-weight:700;color:var(--mute)}
.jt i{align-self:end;display:block;background:var(--peri);border-radius:5px 5px 2px 2px;position:relative}
.jt i::after{content:attr(data-v);position:absolute;top:-18px;left:0;right:0;font-size:11px;font-weight:800;color:var(--ink);font-style:normal}
.jt span{margin-top:6px}
@media(max-width:560px){.jt{grid-template-columns:repeat(9,1fr);gap:3px}.jt i::after{font-size:9.5px}}

/* ══ 학습활동 ══ */
.acts{margin-top:34px}
.acts>h2{font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.8px;display:flex;align-items:center;gap:12px}
.acts>h2 s{width:11px;height:11px;border-radius:50%;background:var(--lime);text-decoration:none;display:block}
.act{margin-top:16px;background:linear-gradient(140deg,var(--peri-3),#F8F8FF);border-radius:var(--r-lg);padding:22px 24px}
.act.locked{background:var(--card);border:1.5px solid var(--line)}
.ahd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ano{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--peri-tx)}
.akind{font-size:11.5px;font-weight:800;background:var(--card);border-radius:6px;padding:4px 8px;color:var(--mute)}
.qdone{font-size:11.5px;font-weight:800;background:var(--lime);color:var(--ink);border-radius:6px;padding:4px 8px}
.aq{font-size:clamp(16px,1.4vw,19px);font-weight:800;letter-spacing:-.5px;margin-top:10px;line-height:1.5;word-break:keep-all}
.ahint{font-size:13.5px;color:var(--mute);margin-top:8px;line-height:1.65;font-weight:500;word-break:keep-all}
.bank{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bank .tag{background:var(--card);font-size:13px}
.fills,.matches,.oxs,.choices,.orders{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.fills li,.matches li,.oxs li,.choices li,.orders li{min-width:0}
.fills li,.matches li{background:var(--card);border-radius:var(--r-md);padding:14px 16px;font-size:15.5px;line-height:1.9;font-weight:600;word-break:keep-all}
.matches li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:12px;align-items:center}
@media(max-width:560px){.matches li{grid-template-columns:minmax(0,1fr)}.msel{width:100%;margin:0}}
.fsel,.msel{font:inherit;font-size:14.5px;font-weight:800;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:9px;padding:6px 10px;min-height:36px;max-width:100%;min-width:0;vertical-align:middle;margin:0 3px}
.fsel.ok,.msel.ok{border-color:#3E8E41;background:#EAF6E8}
.fsel.no,.msel.no{border-color:var(--warn);background:#FBEAEA}
.oxs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--card);border-radius:var(--r-md);padding:12px 16px}
.oxq{font-size:15px;font-weight:600;line-height:1.6;word-break:keep-all}
.oxb{display:flex;gap:6px}
.ox{width:44px;height:40px;border-radius:10px;background:var(--bg);font-weight:800;font-size:16px;color:var(--mute)}
.ox[aria-pressed="true"]{background:var(--ink);color:#fff}
.ox.ok{background:#3E8E41;color:#fff}
.ox.no{background:var(--warn);color:#fff}
.choices li{background:var(--card);border-radius:var(--r-md);padding:14px 16px}
.cq{font-size:15px;font-weight:600;line-height:1.6;word-break:keep-all}
.copts{display:grid;gap:7px;margin-top:10px}
.copts .opt{margin:0;background:var(--bg);padding:12px 14px;font-size:15px;min-height:48px}
.copts .opt[data-s="p"]{outline:2px solid var(--ink)}
.orders li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--card);border-radius:var(--r-md);padding:11px 14px}
.orders .on{width:28px;height:28px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:800}
.orders .ot{font-size:15px;font-weight:600;line-height:1.55;word-break:keep-all}
.orders .ob{display:flex;gap:4px}
.orders .ob button{width:34px;height:34px;border-radius:8px;background:var(--bg);font-weight:800}
.orders li.ok .on{background:var(--lime)}
.orders li.no .on{background:#FBE0DC;color:var(--warn)}
.ck td,.ck th{text-align:center}
.ck th[scope=row]{text-align:left;font-weight:600}
.ck input[type=radio]{width:24px;height:24px;accent-color:var(--ink)}
.ckres{margin-top:12px;font-size:16px;font-weight:700}
.ckres .grade{color:var(--peri-tx);font-weight:800}
.writes{display:grid;gap:10px;margin-top:14px}
.wf{display:grid;gap:6px}
.wf span{font-size:12.5px;font-weight:800;color:var(--peri-tx);letter-spacing:.06em}
.wf textarea{font:inherit;font-size:15px;line-height:1.7;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card);resize:vertical;min-height:52px;color:var(--ink)}
.wf textarea:focus{outline:none;border-color:var(--peri)}
.pl{font-size:13px;color:var(--mute);margin-top:10px;font-weight:600;word-break:keep-all}
.act .chk{margin-top:14px;background:var(--ink);color:#fff;box-shadow:none}
.act .chk:disabled{opacity:.45;cursor:default}
.ansbox.ok{border-left:4px solid #3E8E41}
.ansbox.no{border-left:4px solid var(--warn)}
.akey{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.akey span{font-size:12px;font-weight:800;color:var(--mute);margin-right:4px}
.akey i{font-style:normal;font-size:13px;font-weight:700;background:var(--bg);border-radius:6px;padding:4px 9px}
.act .fsel:disabled,.act .msel:disabled,.act .ox:disabled,.act .opt:disabled,.act .ob button:disabled{opacity:.85}
.readmark{margin-top:30px;background:var(--bg);border-radius:var(--r-md);padding:14px 18px;font-size:14px;font-weight:700;color:var(--mute);display:flex;align-items:center;gap:10px}
.readmark.on{background:var(--lime-2);color:var(--ink)}

/* ══ 퀴즈 ══ */
.quiz{margin-top:28px;background:linear-gradient(140deg,var(--peri-3),#F8F8FF);border-radius:var(--r-lg);padding:26px}
.quiz .lb{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--peri-tx)}
.quiz .q{font-size:clamp(18px,1.7vw,23px);font-weight:800;letter-spacing:-1px;margin-top:10px;word-break:keep-all}
.qsch{margin:18px 0 20px;padding:16px 18px;background:rgba(255,255,255,.78);border-radius:var(--r-md);
  border:1px solid rgba(123,127,232,.2)}
.qsch label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--peri-tx);margin-bottom:9px}
.selwrap{position:relative}
.selwrap svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  color:var(--mute);pointer-events:none}
.qsch select{width:100%;appearance:none;font:inherit;font-size:16px;font-weight:700;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 44px 14px 15px;
  min-height:48px;cursor:pointer;transition:border-color .25s var(--e)}
.qsch select:hover,.qsch select:focus{border-color:var(--peri)}
.ptx .qnote,.qnote{font-size:13px;font-weight:500;color:var(--mute);margin-top:11px;line-height:1.65}
.qnote b{color:var(--peri-tx);font-weight:800}
.qsch.need select{border-color:var(--warn)}
.qsch.need .qnote{color:var(--warn);font-weight:700}
.opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--card);
  border-radius:var(--r-md);padding:17px 20px;margin-top:11px;font-size:16.5px;font-weight:700;
  min-height:56px;transition:background .3s var(--e),transform .3s var(--e)}
.opt:hover{background:var(--peri-3)}
.opt .k{width:32px;height:32px;border-radius:10px;background:var(--bg);display:grid;place-items:center;
  font-size:13.5px;font-weight:800;flex:0 0 auto}
.opt[data-s="y"]{background:var(--lime)}
.opt[data-s="y"] .k{background:var(--ink);color:#fff}
.opt[data-s="n"]{background:#FBE9E9}
.ansbox{background:var(--card);border-radius:var(--r-md);padding:20px;margin-top:16px;font-size:16.5px;
  font-weight:500;line-height:1.8;color:var(--ink-2);word-break:keep-all}
.ansbox b{font-weight:800;color:var(--ink)}

/* ══ 페이저 ══ */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.pager.one{grid-template-columns:1fr}
.pager a{background:var(--bg);border-radius:var(--r-lg);padding:22px 26px;transition:background .3s var(--e)}
.pager a:hover{background:var(--peri-3)}
.pager a:last-child{text-align:right}
.pager .d{font-size:13px;font-weight:700;color:var(--mute)}
.pager .t{font-size:17px;font-weight:800;letter-spacing:-.6px;margin-top:6px;word-break:keep-all}
@media(max-width:620px){.pager{grid-template-columns:1fr}.pager a:last-child{text-align:left}}

/* ══ 다크 섹션 (선생님 · CTA) ══ */
.dark{background:var(--peri);color:#fff;border-radius:var(--r-xl);padding:clamp(28px,3.8vw,56px);
  margin-top:clamp(34px,4.4vw,64px)}
.dark h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.04em;line-height:1.05;word-break:keep-all}
.dark h2 .g{color:var(--lime)}
.dark>p{margin-top:16px;font-size:clamp(16px,1.3vw,20px);color:#E2E0FF;line-height:1.6;
  font-weight:600;max-width:40ch;word-break:keep-all}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
  gap:12px;margin-top:clamp(22px,2.4vw,32px)}
.tc{background:rgba(255,255,255,.1);border-radius:var(--r-lg);padding:24px;color:#fff;transition:background .3s var(--e),transform .3s var(--e)}
.tc:hover{background:var(--lime);color:var(--ink);transform:translateY(-6px)}
.tc .n{font-size:clamp(30px,3vw,44px);font-weight:900;letter-spacing:-.05em;line-height:1}
.tc h3,.tc h2{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.03em;margin-top:14px;word-break:keep-all;line-height:1.2}
.tc p{font-size:14.5px;line-height:1.6;margin-top:8px;font-weight:600;word-break:keep-all;opacity:1}
.tc p b{font-weight:800}

/* ══ 표 · 목록형 ══ */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.tbl caption{text-align:left;font-size:13px;font-weight:700;color:var(--mute);padding:0 0 12px}
.tbl th,.tbl td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;font-weight:500;
  vertical-align:top;word-break:keep-all}
.tbl thead th{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--mute);background:var(--bg)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td b{font-weight:800}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ══ 아코디언 (FAQ · 방침) ══ */
.acc{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.acc details+details{border-top:1px solid var(--line)}
.acc summary{padding:20px 24px;font-size:16.5px;font-weight:800;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:14px;min-height:56px;word-break:keep-all}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";margin-left:auto;width:11px;height:11px;flex:0 0 auto;
  border-right:2.4px solid var(--mute);border-bottom:2.4px solid var(--mute);transform:rotate(45deg) translateY(-3px);
  transition:transform .3s var(--e)}
.acc details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.acc summary:hover{background:var(--bg)}
.acc .bd{padding:0 24px 24px;font-size:15.5px;line-height:1.85;color:var(--ink-2);font-weight:500;word-break:keep-all}
.acc .bd p+p{margin-top:12px}
.acc .bd ul{margin:12px 0 0 20px}
.acc .bd li{margin-top:7px}

/* ══ 마이페이지 도구 줄 (학교 · 초기화) ══ */
.mybar{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 22px;margin-top:clamp(28px,3.4vw,48px)}
.mybar .lb{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--peri-tx);margin-bottom:3px}
.mybar .msch b{font-size:18px;font-weight:800;letter-spacing:-.4px;word-break:keep-all}
.mybar .mact{display:flex;gap:8px;flex-wrap:wrap}
.mybar .tb{background:var(--bg);display:inline-flex;align-items:center}
.mybar .tb:hover{background:var(--ink)}
.mybar .tb[disabled]{opacity:.55;pointer-events:none}

/* ══ 출처 한 줄 ══ */
.srcline{margin-top:clamp(28px,3.4vw,48px);font-size:13.5px;font-weight:600;color:var(--mute);line-height:1.7;word-break:keep-all}
.srcline b{font-weight:800;color:var(--ink-2);margin-right:6px}

/* ══ 안내 박스 ══ */
.note{background:var(--peri-3);border-radius:var(--r-lg);padding:22px 26px;margin-top:clamp(28px,3.4vw,48px);
  font-size:15px;line-height:1.8;color:var(--ink-2);font-weight:500;word-break:keep-all}
.note b{font-weight:800;color:var(--peri-tx)}
.note.lime{background:var(--lime-2)}
.note.lime b{color:var(--ink)}

/* ══ 빈 상태 ══ */
.empty{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:clamp(40px,6vw,80px) 24px;
  text-align:center}
.empty h2{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-1px}
.empty p{margin-top:12px;font-size:15.5px;color:var(--mute);line-height:1.8;font-weight:500}
.empty .pill{margin-top:26px}

/* ══ 푸터 — 다크 면 위 큰 워드마크 (모든 페이지 공통)
   대비: #C9CCD6 / #0F1117 12.9:1 · #A2A7B4 7.8:1 · 라임 16:1 ══ */
footer{margin-top:clamp(26px,3vw,44px);background:var(--peri-d);color:#DDDBFF;border-radius:var(--r-xl);
  padding:clamp(30px,3.6vw,52px) clamp(22px,3vw,44px) 22px;overflow:hidden}
.ftop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fwm{font-size:clamp(56px,9vw,136px);font-weight:900;letter-spacing:-.06em;line-height:.95;color:#fff;word-break:keep-all}
.fwm i{font-style:normal;color:var(--lime)}
.fup{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.18em;color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:12px 18px;min-height:44px;
  transition:background .3s var(--e),color .3s var(--e)}
.fup s{text-decoration:none;font-size:16px}
.fup:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.fnav{display:flex;flex-wrap:wrap;gap:10px 26px;padding:clamp(26px,3vw,40px) 0 22px;font-size:15px;font-weight:700;color:#EEEDFF;
  border-bottom:1px solid rgba(255,255,255,.12)}
.fnav a:hover{color:var(--lime)}
.fnav a.em{color:var(--lime);font-weight:800}
.forg{padding-top:22px}
.flb{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:var(--lime);margin-bottom:12px}
.orgs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0}
.orgs li{font-size:13.5px;font-weight:700;color:#EEEDFF;background:rgba(255,255,255,.1);border-radius:100px;padding:8px 15px}
footer .in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0 4px;
  border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:#DDDBFF;font-weight:500}
footer .in b{color:#fff;font-weight:800}

/* ══ 모션 토글 ══ */
.mctl{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mctl>span{font-size:13px;color:#DDDBFF;margin-right:4px}
.mctl button{font-size:13px;font-weight:700;padding:5px 12px;border-radius:100px;color:#EEEDFF;
  min-height:26px;border:1px solid rgba(255,255,255,.3)}
.mctl button[aria-pressed="true"]{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.dis{font-size:12.5px;color:#DDDBFF;padding:12px 0 4px}

/* ══ 좁은 화면 (기본 규칙보다 뒤에 와야 함) ══ */
/* 헤더는 좁아지면 메뉴 → 전체 메뉴(햄버거), 검색 → 검색 페이지로 위임 */
@media(max-width:1140px){.nav menu{display:none}}
@media(max-width:720px){.search{display:none}}
@media(max-width:480px){
  .nav{gap:8px}
  .logo{flex:1 1 auto;min-width:0}
  .logo>span{min-width:0;flex:1 1 auto}
  .logo b{white-space:normal;word-break:keep-all;font-size:14.5px;letter-spacing:-1px}
  .logo em{display:none}
  .logo .mk{width:32px;height:32px}
  .btn-dark{padding:11px 15px;font-size:14px}
  .ham{width:38px;height:38px}
  .nav .rt{gap:7px}
}
/* 320px 리플로우 (KWCAG 2.2 / WCAG 1.4.10) — 가로 스크롤 금지 */
@media(max-width:400px){
  .shell{padding:0 10px}
  .plate{padding:14px 12px;border-radius:22px}
  .klass .body{grid-template-columns:minmax(0,1fr);gap:18px}
  .klass .body .donut{margin:0 auto}
  .pstats{width:100%}
}

/* ══ 인쇄 ══ */
@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#fff!important}
  .nav,.dock,.mctl,.strip,.skip,.play,.ham,.search,.btn-dark,.tools .tb,.pager{display:none!important}
  .plate{padding:0!important;box-shadow:none!important;border-radius:0!important}
  .rv{opacity:1!important;transform:none!important}
  *{animation:none!important;transition:none!important;box-shadow:none!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card,.tc,.vcard,.reader,.acc details{break-inside:avoid;page-break-inside:avoid}
  #tbl[hidden]{display:table!important}
  .sim .simtrack,.sim .simscale,.sim .simbadge{display:none!important}
  .jt i{transform:none!important}.jt i::after{opacity:1!important}
  .act .chk,.qsch{display:none!important}
  .pnav{display:none!important}
  footer{background:none!important;color:var(--ink)!important;padding:10mm 0 0!important}
  .fwm,.fup,.dots,.intro,.cue,.bands .pin,.cb{display:none!important}
  .fnav,footer .in,.orgs li,.flb,.dis,.mctl>span{color:var(--ink)!important;background:none!important}
  .hs,.band{min-height:0!important;padding:8mm 0!important}
}

/* ══ 인터랙션 — 기후재난 정보를 움직임으로 (모션 '켬'에서만 살아나고, '줄임'·'끔'은 정지) ══ */
/* 씬 애니메이션: 레일 카드 배경 SVG */
@keyframes an-sun{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.09);opacity:1}}
@keyframes an-rain{0%{transform:translateY(-22px);opacity:0}18%{opacity:.6}100%{transform:translateY(34px);opacity:0}}
@keyframes an-wind{0%{transform:translateX(-9px);opacity:.35}50%{opacity:.62}100%{transform:translateX(9px);opacity:.35}}
@keyframes an-sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
@keyframes an-snow{0%{transform:translateY(-36px);opacity:0}18%{opacity:.95}100%{transform:translateY(80px);opacity:0}}
@keyframes an-flicker{0%,90%,100%{opacity:.9}93%{opacity:.45}96%{opacity:.9}}
@keyframes an-glint{0%,100%{opacity:.92}50%{opacity:.55}}
@keyframes an-wave{0%{transform:translateX(0)}100%{transform:translateX(-14px)}}
.an-sun{transform-box:fill-box;transform-origin:center;animation:an-sun 4.2s ease-in-out infinite}
.an-rain{animation:an-rain 1.5s linear infinite}.an-rain.b{animation-delay:-.75s}
.an-wind{animation:an-wind 3.4s ease-in-out infinite alternate}.an-wind.b{animation-delay:-1.7s}
.an-sway{transform-box:fill-box;transform-origin:50% 100%;animation:an-sway 3.8s ease-in-out infinite}
.an-snow{animation:an-snow 5.2s linear infinite}.an-snow.b{animation-delay:-2.6s}
.an-flicker{animation:an-flicker 7s steps(1) infinite}
.an-glint{animation:an-glint 3s ease-in-out infinite}
.an-wave{animation:an-wave 4s linear infinite alternate}
@keyframes an-cloud{0%{transform:translateX(-16px)}100%{transform:translateX(16px)}}
.an-cloud{animation:an-cloud 14s ease-in-out infinite alternate}.an-cloud.b{animation-delay:-7s;animation-duration:18s}
.vcard:not(.in) [class*="an-"]{animation-play-state:paused}
[data-motion="reduced"] [class*="an-"]{animation:none!important}
.vcard .bgv svg{transition:transform 1.2s var(--e)}
.vcard:hover .bgv svg,.vcard:focus-visible .bgv svg{transform:scale(1.05)}
[data-motion="reduced"] .vcard .bgv svg,[data-motion="off"] .vcard .bgv svg{transform:none!important}
/* 카드 호버 시 특보 기준 한 줄 */
.vhint{font-size:12px;font-weight:700;color:#F1F2F5;margin-top:8px;display:flex;align-items:center;gap:7px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--e),opacity .45s var(--e),margin .45s var(--e);margin-top:0}
.vhint::before{content:"";width:8px;height:8px;border-radius:50%;background:#FFD98A;flex:0 0 auto}
.vcard:hover .vhint,.vcard:focus-visible .vhint,.vcard:focus-within .vhint{max-height:40px;opacity:1;margin-top:8px}
@media(hover:none){.vhint{max-height:40px;opacity:1;margin-top:8px}}

/* 수치 카운트업 대상은 표 숫자 폭 고정 */
.pstats b,.glass .vl{font-variant-numeric:tabular-nums}

/* 진도 막대·링 */
.card .pb i,.ucard .pb i,.vprog i{transition:width .8s var(--e)}
.ring circle:last-of-type{transition:stroke-dashoffset 1s var(--e)}
.rprog .bar i{transition:width .2s linear}

/* 리더 차트: 보일 때 막대가 자라남 */
.jt i{transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s var(--e);transition-delay:calc(var(--i,0)*28ms)}
.jt i::after{opacity:0;transition:opacity .5s var(--e);transition-delay:calc(var(--i,0)*28ms + .5s)}
.figbox.in .jt i{transform:none}.figbox.in .jt i::after{opacity:1}
[data-motion="reduced"] .jt i,[data-motion="off"] .jt i{transform:none;transition:none}
[data-motion="reduced"] .jt i::after,[data-motion="off"] .jt i::after{opacity:1;transition:none}

/* 활동 피드백 */
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes popin{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:none;opacity:1}}
.ansbox{animation:pop .4s var(--e)}
.qdone{animation:popin .45s var(--e)}
#readEnd>span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--card);color:var(--mute);font-size:12px;flex:0 0 auto}
#readEnd.on>span{background:var(--ink);color:#fff;animation:popin .5s var(--e)}
.fsel.ok,.msel.ok,.ox.ok,.orders li.ok{animation:popin .35s var(--e)}
.act{transition:background .4s var(--e),border-color .4s var(--e)}

/* ══ 특보 시뮬레이터 ══ */
.sim{margin-top:18px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 20px;
  transition:background .5s var(--e),border-color .5s var(--e)}
.sim[data-l="1"]{background:#FFF9E8;border-color:#F6DE9C}
.sim[data-l="2"]{background:#FFF1EE;border-color:#F3B9B0}
.sim .lb{margin:0 0 8px}
.sim h3{font-size:clamp(17px,1.5vw,20px);font-weight:800;letter-spacing:-.6px;line-height:1.4;word-break:keep-all;margin:0}
.sim h3 em{font-style:normal;color:var(--peri-tx)}
.sim .simv{display:inline-block;font-size:1.35em;letter-spacing:-1px;font-variant-numeric:tabular-nums;min-width:2.6em;color:var(--ink)}
.sim .simv small{font-size:.6em;font-weight:700;margin-left:1px;color:var(--mute)}
.simbadge{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.simlv{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;border-radius:100px;padding:8px 14px;background:var(--bg);color:var(--mute);transition:background .35s var(--e),color .35s var(--e)}
.simlv::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.7}
.simlv.l1{background:#FFE9A8;color:#6B4B00}.simlv.l2{background:#F8C9C2;color:#7A1F14}
.simlv.pop{animation:popin .4s var(--e)}
.simtrack{position:relative;height:46px;margin-top:8px}
.simzones{position:absolute;left:0;right:0;top:50%;height:12px;transform:translateY(-50%);border-radius:100px;overflow:hidden;display:flex}
.simzones i{display:block;height:100%;flex:0 0 auto}
.simzones .z0{background:#DDE1EC}.simzones .z1{background:#FFD98A}.simzones .z2{background:#F4A69B}
.simtrack input{position:absolute;inset:0;width:100%;height:46px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:grab;border-radius:100px}
.simtrack input:active{cursor:grabbing}
.simtrack input::-webkit-slider-runnable-track{height:46px;background:transparent}
.simtrack input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--ink);border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.28);margin-top:8px;transition:transform .2s var(--e)}
.simtrack input:hover::-webkit-slider-thumb,.simtrack input:active::-webkit-slider-thumb{transform:scale(1.1)}
.simtrack input::-moz-range-track{height:46px;background:transparent}
.simtrack input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.simtrack input:focus-visible{outline:3px solid var(--peri-tx);outline-offset:2px}
.simscale{position:relative;height:58px;font-size:11px;font-weight:700;color:var(--mute)}
.simscale span{position:absolute;top:2px;white-space:nowrap}
.simscale .lo{left:0}.simscale .hi{right:0}
.simscale .mk{transform:translateX(-50%);padding:3px 7px;border-radius:6px;top:0}
.simscale .mk.e{top:26px}
.simscale .mk.w{background:#FFF1C9;color:#6B4B00}.simscale .mk.e{background:#FBE0DC;color:#7A1F14}
.simscale .mk::before{content:"";position:absolute;left:50%;top:-9px;width:2px;height:8px;background:currentColor;opacity:.5}
.simscale .mk.e::before{top:-35px;height:34px;opacity:.28}
.simtip{margin-top:6px;font-size:15px;font-weight:600;line-height:1.7;color:var(--ink);word-break:keep-all;min-height:3.2em}
.simtip:empty{display:none}
.simcond{margin-top:10px;font-size:12.5px;color:var(--mute);font-weight:600;line-height:1.6;word-break:keep-all}
.ptx .simtip,.ptx .simcond{margin-top:6px}
@media(max-width:480px){.simscale .mk{font-size:11px;padding:2px 5px}.sim{padding:18px 16px 16px}}

/* ══ 교육용 플래시(HTML5) ══ */
.fl{margin-top:16px}
.fl .lb{margin-bottom:8px}
.fstage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#DDEBF7;aspect-ratio:16/9;outline-offset:3px}
.fstage svg{width:100%;height:100%;display:block}
.fbig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;background:var(--ink);color:#fff;border:0;border-radius:100px;padding:14px 26px 14px 18px;font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:var(--sh-lg);transition:transform .3s var(--e),background .3s var(--e)}
.fbig:hover{transform:translate(-50%,-50%) scale(1.05);background:var(--peri-tx)}
.fbig[hidden]{display:none}
.fprog{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.45)}
.fprog i{display:block;height:100%;width:0;background:var(--ink)}
.fcap{margin-top:14px;min-height:5.2em}
.fcap .fk,.fk{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--peri-tx)}
.fcap h3{font-size:clamp(17px,1.6vw,21px);font-weight:800;letter-spacing:-.5px;margin:4px 0 6px;word-break:keep-all}
.fcap p{font-size:15.5px;line-height:1.75;color:var(--ink-2);font-weight:500;margin:0;word-break:keep-all}
.fcap p:empty{display:none}
.fctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.fb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;min-width:42px;padding:9px 16px;border-radius:100px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;text-decoration:none;transition:background .3s var(--e),transform .3s var(--e)}
.fb:hover{background:var(--bg)}
.fb.k{background:var(--ink);color:#fff;border-color:var(--ink)}
.fb.k:hover{background:var(--peri-tx);border-color:var(--peri-tx)}
.fb:disabled{opacity:.35;cursor:default}
.fdots{display:flex;gap:2px;margin-left:auto}
.fdots button{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.fdots button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);transition:transform .3s var(--e),background .3s var(--e)}
.fdots button[aria-selected="true"]::before{background:var(--ink);transform:scale(1.35)}
.fdone{margin-top:12px;background:var(--lime-2);border-radius:var(--r-md);padding:12px 16px;font-size:14.5px;font-weight:600;line-height:1.6;animation:pop .4s var(--e)}
.fnote{margin-top:10px;font-size:13px;color:var(--mute);font-weight:600;line-height:1.6}
.fnote a{text-decoration:underline;color:var(--peri-tx)}
.fchip{display:inline-block;font-size:12px;font-weight:800;background:var(--ink);color:#fff;border-radius:100px;padding:5px 11px}
.fscore{margin-left:auto;font-size:13px;font-weight:800;color:var(--mute)}
.fhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fans{margin-top:12px;background:var(--card);border-radius:var(--r-md);padding:16px 18px;font-size:15.5px;line-height:1.7;font-weight:500;color:var(--ink-2);word-break:keep-all;animation:pop .4s var(--e);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fans b{color:var(--ink);font-weight:800}
.fans.ok{border-left:4px solid #3E8E41}.fans.no{border-left:4px solid var(--warn)}
.fans .fb{margin-left:auto}
.fopts{display:grid;gap:8px;margin-top:12px}
.fopt{display:flex;gap:10px;align-items:flex-start;text-align:left;font:inherit;font-size:15.5px;font-weight:600;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 16px;cursor:pointer;line-height:1.55;word-break:keep-all;color:var(--ink);transition:border-color .25s var(--e),background .25s var(--e),transform .25s var(--e)}
.fopt:hover:not(:disabled){border-color:var(--ink);transform:translateX(3px)}
.fopt .k{flex:0 0 auto;font-weight:800;color:var(--peri-tx)}
.fopt[data-s="y"]{border-color:#3E8E41;background:#EAF6E8}
.fopt[data-s="n"]{border-color:var(--warn);background:#FBEAEA}
.fopt:disabled{cursor:default}
[data-motion="reduced"] .fl [class]{animation:none!important}

/* 1. 태풍 — 무대는 flashart.typhoon_scene() 이 일러스트 부품으로 조립. 단계(data-step 0~5)별로 켜고 끄는 규칙만 여기 */
.tstage [class^="ty-"]{transition:opacity .7s var(--e),transform .9s var(--e)}
.tstage .ty-sun,.tstage .ty-storm,.tstage .ty-cloud,.tstage .ty-spin{transform-box:fill-box;transform-origin:50% 50%}
.tstage .ty-heat,.tstage .ty-vapor,.tstage .ty-arrows,.tstage .ty-cloud,.tstage .ty-heatmark,.tstage .ty-spin,.tstage .ty-storm,.tstage .ty-rain,.tstage .ty-splash,.tstage .ty-wind{opacity:0}
.tstage .ty-cloud{transform:scale(.4)}
.tstage .ty-storm{transform:scale(.6)}
.tstage .ty-warm-sky{transition:opacity 1.2s var(--e)}
.tstage .ty-sky{transition:fill 1.2s var(--e)}
.fstage[data-step="3"] .ty-sky{fill:#D5E5F6}
.fstage[data-step="4"] .ty-sky{fill:#C3D8EE}
.tstage .merc{transform-box:fill-box;transform-origin:50% 100%;transition:transform 1s var(--e)}
.tstage .ty-hw,.tstage .ty-vp,.tstage .v-arrow,.tstage .v-rain,.tstage .v-splash,.tstage .v-eeye,.tstage .v-storm{transform-box:fill-box;transform-origin:50% 50%}
@keyframes t-rise{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-120px);opacity:0}}
@keyframes t-heat{0%{transform:translateY(10px);opacity:0}30%{opacity:.9}100%{transform:translateY(-70px);opacity:0}}
@keyframes t-spin{to{transform:rotate(360deg)}}
@keyframes t-spinr{to{transform:rotate(-360deg)}}
@keyframes t-rain{0%{transform:translateY(-10px);opacity:0}25%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@keyframes t-wave{50%{transform:translateX(-14px)}}
@keyframes t-drift{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
@keyframes t-bob{50%{transform:translateY(-6px)}}
@keyframes t-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes t-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.tstage .ty-sun{animation:t-spin 48s linear infinite}
.tstage .ty-earth{animation:t-bob 3.4s ease-in-out infinite}
.tstage .v-eeye{animation:t-blink 4.6s ease-in-out infinite}
.fl.playing .tstage .ty-sea{animation:t-wave 4s ease-in-out infinite}
/* 0 따뜻한 바다 */
.fstage[data-step="0"] .ty-heat{opacity:1}
.fstage[data-step="0"] .ty-hw,.fstage[data-step="1"] .ty-hw{animation:t-heat 2.4s ease-in-out infinite}
/* 1 수증기 상승 */
.fstage[data-step="1"] .ty-heat,.fstage[data-step="1"] .ty-vapor,.fstage[data-step="1"] .ty-arrows,.fstage[data-step="2"] .ty-vapor,.fstage[data-step="2"] .ty-arrows{opacity:1}
.fstage[data-step="1"] .ty-vp,.fstage[data-step="2"] .ty-vp{animation:t-rise 2.6s linear infinite}
.fstage[data-step="1"] .v-arrow,.fstage[data-step="2"] .v-arrow{animation:t-rise 2.6s ease-in-out infinite}
.fstage[data-step="1"] .v-arrow1,.fstage[data-step="2"] .v-arrow1{animation-delay:-.9s}.fstage[data-step="1"] .v-arrow2,.fstage[data-step="2"] .v-arrow2{animation-delay:-1.8s}
/* 2 응결 · 열 방출 */
.fstage[data-step="2"] .ty-cloud{opacity:1;transform:scale(.7)}
.fstage[data-step="2"] .ty-heatmark{opacity:1}
/* 3 회전 상승기류 */
.fstage[data-step="3"] .ty-cloud{opacity:1;transform:scale(1)}
.fstage[data-step="3"] .ty-spin{opacity:1;animation:t-spin 5s linear infinite}
/* 4 태풍 · 5 더 강해지는 태풍 */
.fstage[data-step="4"] .ty-storm,.fstage[data-step="5"] .ty-storm{opacity:1;transform:scale(1)}
.fstage[data-step="5"] .ty-storm{transform:scale(1.15)}
.tstage .ty-swirl{transform-box:fill-box;transform-origin:50% 50%}
.fstage[data-step="4"] .ty-swirl{animation:t-spinr 11s linear infinite}   /* 대칭 태풍 기호 — 북반구 태풍처럼 반시계로 */
.fstage[data-step="5"] .ty-swirl{animation:t-spinr 6s linear infinite}    /* 바다가 따뜻할수록 더 세게 */
.fstage[data-step="4"] .ty-rain,.fstage[data-step="5"] .ty-rain,.fstage[data-step="4"] .ty-splash,.fstage[data-step="5"] .ty-splash,.fstage[data-step="4"] .ty-wind,.fstage[data-step="5"] .ty-wind{opacity:1}
.fstage[data-step="4"] .v-rain,.fstage[data-step="5"] .v-rain{animation:t-rain 1.4s linear infinite}
.fstage[data-step="4"] .v-splash,.fstage[data-step="5"] .v-splash{animation:t-pop 2.2s ease-in-out infinite}
.fstage[data-step="5"] .ty-warm-sky{opacity:1}
.fstage[data-step="5"] .ty-sun{transform:scale(1.2)}
.fstage[data-step="5"] .ty-sun{animation:t-spin 48s linear infinite}
[data-motion="reduced"] .fstage[data-step="1"] .ty-vp,[data-motion="off"] .fstage[data-step="1"] .ty-vp,[data-motion="reduced"] .fstage[data-step="2"] .ty-vp,[data-motion="off"] .fstage[data-step="2"] .ty-vp{opacity:.8;transform:translateY(-60px)}
[data-motion="reduced"] .tstage *,[data-motion="off"] .tstage *{animation:none!important}

/* 2. 훈련 게임 */
.fmenu h3{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.8px;margin:0}
.fsub{margin-top:6px;font-size:14.5px;color:var(--mute);font-weight:600;line-height:1.6;word-break:keep-all}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:12px;margin-top:16px}
.fcard{position:relative;aspect-ratio:5/4;border-radius:var(--r-md);overflow:hidden;border:0;padding:0;text-align:left;color:#fff;cursor:pointer;background:#222;font:inherit;box-shadow:var(--sh);transition:transform .35s var(--e),box-shadow .35s var(--e)}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.fcard .bg{position:absolute;inset:0}.fcard .bg svg{width:100%;height:100%;display:block}
.fcard .tx{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;background:linear-gradient(transparent,rgba(10,12,16,.85));display:block}
.fcard .tx b{display:block;font-size:17px;font-weight:800;letter-spacing:-.4px}
.fcard .tx small{display:block;font-size:12px;font-weight:600;color:#E6E8F0;margin-top:3px}
.fcard.done::after{content:"✓";position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:14px}
.fscene{border-radius:var(--r-lg);overflow:hidden;margin-top:12px;color:#fff;background:var(--ink);display:grid;grid-template-columns:190px minmax(0,1fr)}
.fscene .bg{aspect-ratio:5/6.4;max-height:240px;overflow:hidden}.fscene .bg svg{width:100%;height:100%;display:block}
.fscene .fq{padding:24px 28px;margin:0;display:flex;align-items:center;font-size:clamp(17px,1.7vw,22px);font-weight:800;line-height:1.5;word-break:keep-all;letter-spacing:-.3px}
@media(max-width:600px){.fscene{grid-template-columns:1fr}.fscene .bg{aspect-ratio:16/7;max-height:none}.fscene .bg svg{object-fit:cover}.fscene .fq{padding:18px 20px}}
.fres h3{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-1.5px;margin:4px 0 8px}
.fres h3 small{display:block;font-size:16px;letter-spacing:-.3px;color:var(--ink-2);font-weight:700;margin-top:6px;word-break:keep-all}

/* 3. 폭염의 하루 */
.hstage{aspect-ratio:16/7.5;background:#1E2446}
.hstage.hit{animation:h-hit .5s var(--e)}
@keyframes h-hit{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.hud{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;pointer-events:none}
.hclock,.htemp,.hhp{background:rgba(255,255,255,.92);border-radius:12px;padding:8px 12px;font-size:11.5px;font-weight:700;color:var(--mute);box-shadow:var(--sh)}
.hclock b,.htemp b{display:block;font-size:20px;color:var(--ink);font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.1}
.htemp b small{font-size:12px;margin-left:1px}
.hlv{display:block;margin-top:3px}
.hlv[data-l="1"]{color:#6B4B00}.hlv[data-l="2"]{color:#7A1F14}.hlv[data-l="n"]{color:#3D4A8A}
.hhp i{display:block;width:90px;height:8px;background:var(--bg);border-radius:100px;overflow:hidden;margin-top:6px}
.hhp i b{display:block;height:100%;background:#3E8E41;transition:width .5s var(--e)}
.hhp em{font-style:normal;color:var(--ink);font-weight:800;margin-left:6px}
.hstage[data-l="2"] .htemp b{color:#7A1F14}
.htl{position:relative;height:14px;margin:14px 0 26px;background:var(--bg);border-radius:100px}
.htl .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#FFD98A,#F4A69B);border-radius:100px}
.htl span{position:absolute;top:100%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--mute);margin-top:6px;white-space:nowrap}
.htl span:first-of-type{transform:none}.htl span:last-of-type{transform:translateX(-100%)}
.htl u{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);border:2px solid #fff;text-decoration:none}
.fq2{margin-top:6px}
.fq2 .fq{font-size:clamp(17px,1.6vw,20px);font-weight:800;line-height:1.5;word-break:keep-all;margin:0}
@media(max-width:600px){.hud{gap:6px}.hclock,.htemp,.hhp{padding:6px 9px}.hclock b,.htemp b{font-size:16px}.hhp i{width:60px}.htl span:nth-child(even){display:none}}

/* 4. 탄소 카드 */
.cboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin-top:14px;align-items:stretch}
.czone{border-radius:var(--r-lg);padding:14px;min-height:270px;border:2px dashed var(--line);transition:border-color .25s var(--e),transform .25s var(--e)}
.czone.less{background:#F1FBD9}.czone.more{background:#FFF1EE}
.czone b{display:block;font-size:16px;font-weight:800}
.czone small{display:block;font-size:12px;color:var(--mute);font-weight:600;margin-top:2px}
.czone ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px;font-weight:600}
.czone ul li{background:#fff;border-radius:8px;padding:5px 9px;animation:pop .35s var(--e);word-break:keep-all}
.czone ul li.miss{border-left:3px solid var(--warn)}
.cboard[data-over="less"] .czone.less,.cboard[data-over="more"] .czone.more{border-color:var(--ink);transform:scale(1.02)}
.czone.pulse{animation:popin .4s var(--e)}
.cdeck{display:grid;place-items:center;min-height:270px}
.ccard{width:min(100%,250px);aspect-ratio:4/5;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;position:relative;transition:box-shadow .3s var(--e)}
.ccard:focus-visible{outline:3px solid var(--peri-tx);outline-offset:3px}
.ccard p{font-size:clamp(18px,1.8vw,22px);font-weight:800;line-height:1.45;word-break:keep-all;margin:0;letter-spacing:-.5px}
.ccard .cn{position:absolute;top:12px;left:16px;font-size:12px;font-weight:800;color:var(--mute)}
.ccard .hint{position:absolute;bottom:14px;left:0;right:0;font-size:11.5px;font-weight:700;color:var(--mute-2)}
.ccard.drag{cursor:grabbing;box-shadow:0 30px 60px rgba(22,24,29,.25)}
.ccard.in{animation:pop .4s var(--e)}
.ccard.fly-less{transition:transform .6s var(--e),opacity .6s var(--e);transform:translateX(-160%) rotate(-14deg)!important;opacity:0}
.ccard.fly-more{transition:transform .6s var(--e),opacity .6s var(--e);transform:translateX(160%) rotate(14deg)!important;opacity:0}
@keyframes c-shake{0%,100%{transform:none}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.ccard.shake{animation:c-shake .5s var(--e)}
.cboard[data-flash="ok"]{--fl:#EAF6E8}.cboard[data-flash="no"]{--fl:#FBEAEA}
.cbtn{justify-content:center}
.cend{text-align:center}.cend b{display:block;font-size:40px;font-weight:800;letter-spacing:-1.5px}.cend span{display:block;font-size:15px;font-weight:700;color:var(--ink-2);margin-top:6px;word-break:keep-all}
@media(max-width:700px){.cboard{grid-template-columns:1fr 1fr}.cdeck{grid-column:1/-1;order:-1;min-height:230px}.czone{min-height:120px}.ccard{width:min(100%,220px)}}
@media(max-width:400px){.cboard{grid-template-columns:1fr}}

/* 체험 콘텐츠 카드 */
.fx .fxh{display:flex;align-items:center;gap:8px}
.fkind{font-size:12.5px;font-weight:800;letter-spacing:.06em;background:var(--lime);color:var(--ink);border-radius:6px;padding:4px 8px}
.fmin{font-size:13.5px;font-weight:700;color:var(--mute)}
.fx h3{margin-top:12px}
.figbox .fl{margin-top:4px}
.figbox .fstage{background:#CFE3F5}


/* ══ v2 bold — 새 컴포넌트 ══ */
/* 마키(재난 6종 띠) */
.marq{overflow:hidden;background:var(--lime);color:var(--ink);border-radius:100px;margin-top:14px;
  padding:14px 0;white-space:nowrap;font-size:clamp(16px,1.5vw,22px);font-weight:900;letter-spacing:-.02em}
.marq .mq{display:inline-block;animation:mq 26s linear infinite}
.marq .mq span{display:inline-block;padding:0 22px}
.marq .mq i{font-style:normal;opacity:.55}
@keyframes mq{to{transform:translateX(-50%)}}
[data-motion="reduced"] .marq .mq,[data-motion="off"] .marq .mq{animation:none}

/* 테마 페이지 헤더 (재난·단원) */
.phead.th{background:var(--th);color:var(--th-tx);border-radius:var(--r-xl);padding:clamp(28px,3.6vw,56px);
  margin-top:14px;position:relative;overflow:hidden;align-items:center;gap:clamp(18px,3vw,44px) clamp(18px,3vw,40px);
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tx art" "st art"}
.phead.th>div:first-child{grid-area:tx}
.phead.th .pstats{grid-area:st;justify-self:start;align-self:end}
.phead.th .lb{color:var(--th-tx)}
.phead.th .lb s{background:currentColor}
.phead.th h1{font-size:var(--fs-display)}
.phead.th p{color:var(--th-tx);font-weight:600}
.phead.th h1 .g{color:var(--lime)}
.phead.th.light h1 .g{color:inherit;text-decoration:underline;text-decoration-color:rgba(15,17,23,.35);text-decoration-thickness:.07em;text-underline-offset:.1em}
.phead.th .pstats{gap:8px}
.phead.th .pstats div{background:rgba(255,255,255,.14);color:var(--th-tx);backdrop-filter:blur(4px)}
.phead.th.light .pstats div{background:rgba(15,17,23,.08)}
.phead.th .pstats div>span{color:var(--th-tx)}
.phead.th .thart{grid-area:art;width:clamp(150px,21vw,290px);align-self:center;justify-self:end;
  aspect-ratio:5/6.4;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);pointer-events:none;
  transform:rotate(4deg);margin-right:clamp(0px,1vw,12px)}
.phead.th .thart svg{width:100%;height:100%;display:block}
.phead.th>div:first-child{position:relative;z-index:1}
.phead.th .pstats{position:relative;z-index:1}
@media(max-width:1040px){.phead.th .thart{display:none}.phead.th{grid-template-columns:minmax(0,1fr);grid-template-areas:"tx" "st"}}
.phead.th .pill{margin-top:22px}
.phead.th .pill.k{background:var(--th-tx);color:var(--th)}
.phead.th .pill.k:hover{background:var(--lime);color:var(--ink)}
.th-heat{--th:var(--th-heat);--th-tx:var(--th-heat-tx)}
.th-drought{--th:var(--th-drought);--th-tx:var(--th-drought-tx)}
.th-rain{--th:var(--th-rain);--th-tx:var(--th-rain-tx)}
.th-typhoon{--th:var(--th-typhoon);--th-tx:var(--th-typhoon-tx)}
.th-snow{--th:var(--th-snow);--th-tx:var(--th-snow-tx)}
.th-cold{--th:var(--th-cold);--th-tx:var(--th-cold-tx)}
.th-guide{--th:var(--th-guide);--th-tx:var(--th-guide-tx)}
.th-ink{--th:var(--ink);--th-tx:#fff}

/* 홈 파트 블록 */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
@media(max-width:900px){.parts{grid-template-columns:minmax(0,1fr)}}
.part{background:var(--card);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,32px);box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px}
.part .pn{font-size:clamp(56px,6vw,96px);font-weight:900;letter-spacing:-.06em;line-height:.85;color:var(--peri)}
.part h3{font-size:clamp(22px,2vw,30px);font-weight:900;letter-spacing:-.04em;line-height:1.1;word-break:keep-all}
.part .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.part .pn small{font-size:.32em;font-weight:900;letter-spacing:0;margin-left:.1em;vertical-align:baseline;color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border-radius:100px;padding:10px 14px;font-size:14px;font-weight:800;
  min-height:40px;transition:background .3s var(--e),color .3s var(--e),transform .3s var(--e);word-break:keep-all}
.chip b{font-weight:900;color:var(--peri-tx)}
.chip:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.chip:hover b{color:var(--lime)}
.chip.done{background:var(--lime);color:var(--ink)}
.chip.done b{color:var(--ink)}
.chip .pb{display:none}

/* 페이지 전환 (지원 브라우저만, 모션 끔이면 즉시) */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root){animation:vt-out .22s var(--e2) both}
::view-transition-new(root){animation:vt-in .34s var(--e) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
:root[data-motion="off"]::view-transition-old(root),:root[data-motion="off"]::view-transition-new(root),
:root[data-motion="reduced"]::view-transition-old(root),:root[data-motion="reduced"]::view-transition-new(root){animation-duration:0s}

/* 큰 숫자 강조 (리더 특보 상자) */
.alert .al{font-size:13px}
.alert p{font-size:clamp(16px,1.3vw,19px);font-weight:700;color:var(--ink)}
.alert p b{font-size:1.25em;font-weight:900;color:var(--peri-tx)}
.terms>div b{font-size:16px}
.ibox b{font-size:18px}

/* 스트립 크게 */
.strip a{font-size:16.5px;font-weight:800;padding:17px 12px}

/* 학습 카드(레일) 칩 */
.vchip{font-size:12.5px;font-weight:900;background:var(--lime);color:var(--ink);backdrop-filter:none}

/* 리더 페이지 진도 바 대비 */
.rprog .bar i{background:var(--peri)}

/* 좁은 화면 */
@media(max-width:560px){
  .hero{padding:28px 20px 26px}
  .glass{transform:none;max-width:200px;padding:14px 16px}
  .phead.th{padding:26px 20px}
  .pstats div{padding:14px 16px}
}

/* 카드 안 섹션 제목은 한 단계 작게 */
.card .sech h2,.ovw .ot h2{font-size:clamp(20px,1.9vw,26px)}
.card .sech s{width:12px;height:12px}
/* 성취기준 접기 */
.stdd{margin-top:10px}
.stdd summary{cursor:pointer;font-size:14px;font-weight:800;color:var(--peri-tx);list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:32px}
.stdd summary::-webkit-details-marker{display:none}
.stdd summary::after{content:"";width:8px;height:8px;border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--e)}
.stdd[open] summary::after{transform:rotate(225deg) translateY(-2px)}
/* 리더 핵심 목차 칩 */
.keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.keys a{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border-radius:100px;padding:9px 14px;font-size:13.5px;font-weight:800;min-height:36px;transition:background .3s var(--e),color .3s var(--e)}
.keys a b{color:var(--peri-tx);font-weight:900}
.keys a:hover{background:var(--ink);color:#fff}.keys a:hover b{color:var(--lime)}
.ptx h2[id]{scroll-margin-top:80px}

/* 차시 흐름 접기 (교사용) */
.tdet summary{list-style:none}
.tdet summary::-webkit-details-marker{display:none}
.tdet summary .all::after{content:" ▾";font-size:12px}
.tdet[open] summary .all::after{content:" ▴"}
.tdet[open] summary{margin-bottom:14px}
/* 학습 목록 카드 아이콘 크게 */
.learn-ic svg{width:44px;height:44px}

/* 학습하기 목록: 재난색 블록 카드 */
.card.lc{background:var(--th);color:var(--th-tx);min-height:250px;display:flex;flex-direction:column;gap:6px}
.card.lc .learn-ic{display:block;margin-bottom:auto}
.card.lc h3{font-size:clamp(26px,2.4vw,34px);font-weight:900;letter-spacing:-.045em;margin-top:22px;line-height:1.1}
.card.lc p{color:var(--th-tx);font-weight:600;font-size:15px;margin-top:4px}
.card.lc .pb{background:rgba(255,255,255,.35);margin-top:16px}
.th-snow.card.lc .pb,.th-heat.card.lc .pb,.th-drought.card.lc .pb{background:rgba(15,17,23,.15)}
.card.lc .pb i{background:var(--th-tx)}
.card.lc:hover{transform:translateY(-8px) rotate(-1deg)}
.vchip.th{background:var(--th);color:var(--th-tx)}

/* 가이드북 형태로 단순화 */
.ucard{grid-template-columns:auto minmax(0,1fr) auto;padding:clamp(22px,2.2vw,30px)}
.ucard .uar,.scard .uar{font-size:26px;font-weight:900;color:var(--peri-tx);transition:transform .3s var(--e)}
a.card:hover .uar{transform:translateX(6px)}
.ucard.done .uar,.scard.done .uar{color:var(--ink)}
.ucard.done .uno{background:var(--lime)}
.goals.big li{font-size:clamp(20px,2vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.35}
.goals.big li::before{width:30px;height:30px;border-radius:9px;font-size:15px;margin-top:4px}
.teach summary .all{margin-left:auto}
.teach[open] summary .all::after{content:" ▴"}

/* ══════════════════════════════════════════════════════════════
   홈 v3 — 풀스크린 집중형 (한 화면에 한 메시지 · 오른쪽 도트 내비 · 가운데 고정 오브젝트)
   ══════════════════════════════════════════════════════════════ */
/* 플레이트 없이 화면을 꽉 채운다 */
body.wide .shell{max-width:none;padding:0}
body.wide .plate{background:transparent;border-radius:0;padding:0;margin:0;box-shadow:none}
body.wide .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);padding:10px clamp(16px,2.4vw,40px);border-bottom:1px solid rgba(15,17,23,.06)}
body.wide footer{margin-top:0;border-radius:0;padding-left:clamp(16px,4vw,64px);padding-right:clamp(16px,4vw,64px)}
html.introing{overflow:hidden}

/* 공용 풀스크린 섹션 */
.hs{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:clamp(72px,11vh,120px) clamp(16px,4vw,64px) clamp(56px,8vh,96px);overflow:hidden}
.hs .bl,.band .bl{font-size:clamp(12.5px,1vw,15px);font-weight:800;letter-spacing:.22em}
.ph2 h2{font-size:clamp(34px,4.8vw,72px);font-weight:900;letter-spacing:-.05em;line-height:1.06;margin-top:12px;word-break:keep-all}
.ph2 h2 .g{color:var(--lime)}

/* 도트 내비 (데스크톱) */
.dots{position:fixed;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:55;display:none;
  flex-direction:column;gap:14px;align-items:flex-end}
@media(min-width:1024px){.dots{display:flex}}
.dots a{display:flex;align-items:center;gap:10px;min-height:24px;padding:4px 0 4px 8px;color:var(--dot,#0F1117)}
.dots a::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;background:transparent;
  transition:background .3s var(--e),transform .3s var(--e);flex:0 0 auto}
.dots a span{font-size:12.5px;font-weight:800;letter-spacing:.06em;opacity:0;transform:translateX(6px);
  transition:opacity .3s var(--e),transform .3s var(--e);background:rgba(255,255,255,.9);color:var(--ink);border-radius:100px;padding:5px 10px}
.dots a:hover span,.dots a:focus-visible span,.dots a[aria-current] span{opacity:1;transform:none}
.dots a[aria-current]::after{background:currentColor;transform:scale(1.25)}
.dots.on-dark{--dot:#fff}

/* 인트로 — 협의체 소개 (약 5초 · 세션당 1회 · 모션 「켬」에서만 · 누르거나 Esc/Enter 로 건너뛰기)
   ① 색 띠 4장이 올라오며 이름: 제주 / 기후위기 / 재난 대응 / 교육 협의체
   ② 띠 색이 한 칸씩 돌며 메시지: 기후위기, / 우리 / 모두의 / 이야기(라임 — 홈 히어로 문구와 같은 강조)
   ③ 맨 아래 바이올렛 띠가 화면을 채우며 로고 + 협의체 이름 → 위로 걷힘 */
.intro{position:fixed;inset:0;z-index:120;cursor:pointer;background:var(--ink);transition:opacity 1.6s cubic-bezier(.45,0,.25,1)}
.intro.out{opacity:0;pointer-events:none}
.intro.out.fast{transition-duration:.5s}
.intro .ibs{position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr 1fr 1fr;transition:grid-template-rows .85s var(--e2)}
.intro.s3 .ibs{grid-template-rows:0fr 0fr 0fr 1fr}
.intro .ib{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0;overflow:hidden;background:var(--th);color:var(--th-tx);
  transform:translateY(100%);animation:ib-up .7s var(--e) forwards;animation-delay:calc(var(--k) * 90ms);
  transition:background-color .6s var(--e),color .6s var(--e)}
.intro .ib.lime{--th:var(--lime);--th-tx:var(--ink)}
.intro.s2 .ib:nth-child(1){--th:var(--th-heat);--th-tx:var(--th-heat-tx)}
.intro.s2 .ib:nth-child(2){--th:var(--th-rain);--th-tx:var(--th-rain-tx)}
.intro.s2 .ib:nth-child(3){--th:var(--lime);--th-tx:var(--ink)}
.intro.s2 .ib:nth-child(4){--th:var(--th-guide);--th-tx:var(--th-guide-tx)}
.intro .w{grid-area:1/1;font-size:clamp(42px,12vw,160px);font-weight:900;letter-spacing:-.06em;line-height:1;white-space:nowrap;
  transform:translateY(75%);opacity:0;transition:transform .6s var(--e),opacity .45s var(--e);
  transition-delay:calc(var(--k) * 80ms + var(--b, 0ms))}
.intro.s1 .w1{transform:none;opacity:1;--b:280ms}
.intro.s2 .w1{transform:translateY(-75%);opacity:0;--b:0ms}
.intro.s2 .w2{transform:none;opacity:1;--b:140ms}
.intro .w2.hl{color:var(--lime)}
.intro.s3 .w2{transform:translateY(-75%);opacity:0;--b:0ms;transition-duration:.45s,.25s}
.intro .w3{white-space:normal;font-size:1rem;letter-spacing:0;--b:0ms}
.intro.s3 .w3{transform:none;opacity:1;transition-delay:.38s}
.intro .ifin{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vh,22px);text-align:center;padding:0 16px}
.intro .ifin img{width:clamp(84px,11vw,150px);height:auto;transform:scale(.6) rotate(-8deg);transition:transform .8s var(--e) .45s}
.intro.s3 .ifin img{transform:none}
.intro .ifin b{display:block;font-size:clamp(30px,8.2vw,100px);font-weight:900;letter-spacing:-.05em;line-height:1.08;word-break:keep-all}
.intro .ifin .bar{display:block;width:clamp(64px,8vw,120px);height:7px;border-radius:7px;background:var(--lime);
  transform:scaleX(0);transition:transform .6s var(--e) .75s}
.intro.s3 .ifin .bar{transform:none}
.intro .ifin i{font-style:normal;font-size:clamp(16px,1.7vw,24px);font-weight:700;letter-spacing:-.01em;opacity:.92}
.intro .iskip{position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,3vh,32px);z-index:2;min-height:44px;padding:0 20px;
  border:0;border-radius:100px;background:rgba(15,17,23,.72);color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;
  opacity:0;animation:ib-fade .4s var(--e) .9s forwards}
.intro .iskip:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes ib-up{to{transform:none}}
@keyframes ib-fade{to{opacity:1}}

/* 1. 히어로 — 하늘·한라산 풀블리드, 초대형 제목 */
.hero2{min-height:calc(100svh - 70px);background:#DCEDF8;color:var(--ink);justify-content:flex-start;
  padding-top:clamp(40px,7vh,80px);padding-bottom:clamp(180px,30vh,300px)}
.hero2 .hbg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero2 .hc{position:relative;z-index:2;max-width:1200px}
.hero2 .hc::before{content:"";position:absolute;inset:-12% -8%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));z-index:-1;pointer-events:none}
.eyeb2{display:inline-flex;align-items:center;gap:12px;font-size:clamp(12.5px,1vw,15px);font-weight:800;letter-spacing:.08em;
  color:var(--peri-tx);background:rgba(255,255,255,.92);border-radius:100px;padding:9px 16px}
.eyeb2 s{width:22px;height:4px;background:var(--lime);border-radius:100px;text-decoration:none;display:block}
.hx{margin-top:22px;font-size:clamp(42px,7.6vw,120px);font-weight:900;letter-spacing:-.05em;line-height:1.08;word-break:keep-all}
.hx em{font-style:normal;color:var(--peri)}
.hero2 .hb{justify-content:center;margin-top:32px}
.hero2 .pill.w{background:rgba(255,255,255,.88);box-shadow:none}
.hero2 .pill.w:hover{background:#fff}
.hcard{position:absolute;z-index:3;left:clamp(16px,5vw,80px);bottom:clamp(90px,14vh,150px);background:var(--lime);color:var(--ink);
  border-radius:var(--r-lg);padding:18px 22px;display:grid;gap:2px;text-align:left;box-shadow:var(--sh-lg);rotate:-3deg;
  transition:background .3s var(--e)}
.hcard:hover{background:#fff}
.hcard .lb{font-size:13px;font-weight:800}
.hcard .vl{font-size:clamp(36px,3.8vw,60px);font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.hcard .sm{font-size:14px;font-weight:700}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;width:2px;height:54px;
  background:rgba(15,17,23,.18);overflow:hidden;border-radius:2px}
.cue i{position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--ink);animation:cue 1.8s var(--e2) infinite}
@keyframes cue{to{top:110%}}
@media(max-width:760px){
  .hero2{padding-bottom:clamp(150px,26vh,240px)}
  .hcard{left:16px;bottom:auto;top:auto;position:relative;margin-top:26px;justify-self:start;align-self:flex-start;rotate:-2deg;padding:14px 16px}
}

/* 2. 재난 6밴드 — 가운데 고정 제주 섬 뒤로 색 면이 흐른다 */
.bands{position:relative}
.bands .pinw{position:absolute;inset:0;z-index:2;pointer-events:none}
.bands .pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 16px}
[data-dot]{scroll-margin-top:70px}
@media(min-width:1024px){.hs{padding-left:clamp(72px,8vw,128px);padding-right:clamp(72px,8vw,128px)}}
.dots.hide{opacity:0;pointer-events:none}
.dots{transition:opacity .3s var(--e)}
.bands .pin{color:#fff;transition:color .7s var(--e)}   /* 밝은 면=흰 섬 · 어두운 면=잉크 섬 (JS가 밴드마다 바꿈) */
.bands .pin .isl{width:min(82vw,940px);filter:drop-shadow(0 30px 60px rgba(15,17,23,.16));animation:flt 7s ease-in-out infinite}
.band{position:relative;min-height:100svh;background:var(--th);color:var(--th-tx);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(80px,12vh,120px) clamp(16px,4vw,64px);overflow:hidden}
.band .bin{position:relative;z-index:3;max-width:1240px;width:100%}
.band .bhit{display:block;color:inherit;outline-offset:8px}
.band .bw{font-size:clamp(72px,21vw,280px);font-weight:900;letter-spacing:-.06em;line-height:1.02;margin-top:10px;word-break:keep-all}
.band .more{display:inline-flex;align-items:center;gap:8px;margin-top:28px;border:2px solid currentColor;border-radius:100px;
  padding:14px 28px;font-size:16px;font-weight:800;min-height:48px;transition:background .3s var(--e),color .3s var(--e),transform .3s var(--e)}
.band .more i{font-style:normal;font-size:20px;line-height:1}
.band .bhit:hover .more,.band .bhit:focus-visible .more{background:var(--th-tx);color:var(--th);transform:translateY(-3px)}
.band .bs{margin-top:26px;font-size:clamp(17px,1.5vw,24px);font-weight:700;word-break:keep-all;line-height:1.5}
.band .bk{margin-top:10px;font-size:clamp(14px,1.1vw,17px);font-weight:600;opacity:.88}
.band .bk b{font-weight:900;font-size:1.3em;letter-spacing:-.03em}
.band .pb{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.22);z-index:3}
.band.light .pb{background:rgba(15,17,23,.12)}
.band .pb i{display:block;height:100%;width:0;background:var(--th-tx);transition:width .8s var(--e)}
.band.done .bl::after{content:" · 완료"}
/* 밴드 글자는 보일 때 자간이 조여지며 들어온다 */
.band .bw .ln>span{animation:none;transform:translateY(135%);letter-spacing:.06em;transition:transform 1s var(--e),letter-spacing 1.2s var(--e)}
.band.in .bw .ln>span{transform:none;letter-spacing:inherit}
[data-motion="reduced"] .band .bw .ln>span,[data-motion="off"] .band .bw .ln>span{transform:none;letter-spacing:inherit;transition:none}
[data-motion="reduced"] .bands .pin .isl,[data-motion="off"] .bands .pin .isl{animation:none}

/* 3. 제주 기온 — 다크 면, 초대형 숫자, 뒤에 30년 막대 */
.sx-data{background:var(--card);color:var(--ink)}
.sx-data .dc{position:relative;z-index:2;max-width:1040px;width:100%}
.sx-data .bl{color:var(--peri-tx)}
.sx-data .big{margin:18px 0 6px;font-size:clamp(80px,15vw,200px);font-weight:900;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;color:var(--peri)}
.sx-data .big small{font-size:.32em;font-weight:900;letter-spacing:-.03em;vertical-align:top;margin-left:.06em;color:var(--ink)}
.sx-data .bs{margin-top:20px;font-size:clamp(18px,1.7vw,26px);font-weight:700;color:var(--ink);word-break:keep-all}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px;text-align:left}
@media(max-width:640px){.trio{grid-template-columns:1fr}}
.trio div{background:var(--bg);border-radius:var(--r-lg);padding:20px 22px;border:1px solid var(--line)}
.trio b{display:block;font-size:clamp(34px,3.6vw,56px);font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.trio b small{font-size:.45em;font-weight:800;margin-left:.1em;color:var(--peri-tx);letter-spacing:0}
.trio span{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--mute);line-height:1.45}
.sx-data .pill.w{margin-top:30px;background:var(--ink);color:#fff;box-shadow:none}
.sx-data .pill.w:hover{background:var(--peri);transform:translateY(-3px)}
.sx-data .bgwrap{position:relative;width:100%;max-width:1040px;height:clamp(150px,24vh,240px);margin-top:clamp(26px,4vh,44px);
  opacity:.9;z-index:1;padding:0}
.sx-data .bgwrap .figbox{margin:0;padding:0;background:none;border-radius:0;height:100%}
.sx-data .bgwrap .cp,.sx-data .bgwrap .tools{display:none}
.sx-data .bgwrap .jt{height:100%;margin:0;gap:clamp(6px,1vw,16px)}
.sx-data .bgwrap .jt div{color:var(--ink);font-size:12px}
.sx-data .bgwrap .jt i::after{display:block;font-size:12px}

/* 4. 체험학습 — 브랜드 바이올렛 면, 큰 카드 캐러셀 */
.sx-play{background:var(--peri);color:#fff}
.sx-play .bl{color:#fff}
/* 캐러셀은 섹션 좌우 여백을 무시하고 화면 끝까지 — 카드가 양쪽 가장자리에서 흘러 들어오고 나간다 */
.sx-play{padding-left:0;padding-right:0}
.sx-play .ph2{padding:0 clamp(16px,4vw,64px)}
.carw{position:relative;width:100%;max-width:none;margin-top:clamp(28px,4vh,48px);display:block}
.carw .cb{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:var(--peri)}
.carw .cb.prev{left:clamp(12px,2vw,28px)}.carw .cb.next{right:clamp(12px,2vw,28px)}
.car{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,24vw,460px);gap:16px;overflow-x:auto;
  padding:8px clamp(16px,4vw,80px) 12px;scroll-padding-inline:clamp(16px,4vw,80px);
  scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.car.grab{cursor:grabbing;scroll-behavior:auto}
.car::-webkit-scrollbar{display:none}
.tc.big{scroll-snap-align:start;text-align:left;min-height:clamp(260px,32vh,340px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.2vw,30px);background:rgba(255,255,255,.12)}
.tc.big .n{font-size:clamp(44px,5vw,76px);letter-spacing:-.06em;margin-bottom:auto;opacity:.9}
.tc.big h3,.tc.big h2{font-size:clamp(22px,2vw,30px);letter-spacing:-.04em;line-height:1.15}
.tc.big p:last-child{font-size:14.5px;opacity:.95}
.cb{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-size:20px;font-weight:800;
  display:grid;place-items:center;transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e)}
.cb:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
@media(max-width:700px){.cb{display:none}.car{grid-auto-columns:min(76vw,320px);padding-left:16px;padding-right:16px;scroll-padding-inline:16px}}
@media(min-width:1024px){.sx-play{padding-left:0;padding-right:0}}

/* 5. 가이드북 — 종이색 면, 큰 숫자 4개 + 파트 블록 */
.sx-book{background:var(--bg);color:var(--ink);min-height:100svh;justify-content:center}
.sx-book .bl{color:var(--peri-tx)}
.sx-book .ph2 h2 .g{color:var(--peri)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;max-width:1100px;margin-top:clamp(26px,4vh,40px)}
@media(max-width:640px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nums div{background:var(--card);border-radius:var(--r-lg);padding:18px 16px 16px;box-shadow:var(--sh)}
.nums b{display:block;font-size:clamp(40px,5vw,76px);font-weight:900;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.nums span{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--mute)}
.sx-book .parts{width:100%;max-width:1320px;margin-top:clamp(22px,3vh,32px);text-align:left}
.bcta{margin-top:clamp(26px,4vh,40px)}

/* 내부 페이지 머리 — 한 화면 집중형 (홈 밴드와 같은 비례) */
@media(min-width:761px){
  .phead.th h1{font-size:clamp(44px,6.8vw,104px);line-height:1.05}
  .phead.th .thart{width:clamp(180px,24vw,330px)}
}
/* 일러스트가 있는 머리(재난 페이지)만 한 화면 높이에 가깝게 — 글자만 있는 머리는 내용만큼만 */
@media(min-width:1041px){.phead.th:has(.thart){min-height:min(68svh,600px)}}

/* 1′. 히어로 v4 — 체험학습 섹션과 같은 컨셉: 브랜드 바이올렛 면 · 흰 초대형 제목(라임 강조) · 반투명 카드 4장 */
.hero3{min-height:calc(100svh - 70px);background:var(--peri);color:#fff;justify-content:center;
  padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(72px,10vh,120px)}
.hero3 .hh{max-width:1200px}
.hero3 .bl{color:var(--lime)}
.hero3 .hx{margin-top:14px;color:#fff;font-size:clamp(42px,7.2vw,112px)}
.hero3 .hx em{color:var(--lime)}
.hcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:1320px;margin-top:clamp(30px,5vh,56px);text-align:left}
.hcards .tc.big{min-height:clamp(220px,30vh,320px)}
.hcards .tc.big>p:last-child{font-size:15px;font-weight:600;line-height:1.5;margin-top:8px}
.hcards .tc.big h2{font-size:clamp(24px,2.1vw,32px)}
.tc.big.lime{background:var(--lime);color:var(--ink)}
.tc.big.lime .n{opacity:1;font-variant-numeric:tabular-nums}
.tc.big.lime .n b{font-weight:900}
.tc.big.lime:hover{background:#fff;color:var(--ink)}
.hero3 .cue{background:rgba(255,255,255,.25)}
.hero3 .cue i{background:#fff}
@media(max-width:1000px){.hcards{grid-template-columns:repeat(2,minmax(0,1fr))}.hcards .tc.big{min-height:clamp(170px,24vh,240px)}}
@media(max-width:520px){.hcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hcards .tc.big{min-height:0;padding:16px 16px 14px;border-radius:14px}
  .hcards .tc.big .n{font-size:26px;margin-bottom:14px}.hcards .tc.big h2{font-size:19px}.hcards .tc.big>p:last-child{font-size:12.5px;margin-top:5px}}

/* ══════════════════════════════════════════════════════════════
   v5 — 일러스트 컨셉 통일 (지구·나무 캐릭터 그림)
   ══════════════════════════════════════════════════════════════ */
/* 일러스트 패널: 색 면 위에 얹는 둥근 종이 카드. dark 는 검정 그림(발광) 전용 */
.pic{background:#FBFAF6;border-radius:var(--r-xl);padding:clamp(10px,1.4vw,18px);
  rotate:-2deg;transition:rotate .5s var(--e),transform .5s var(--e);line-height:0}
.pic img{width:100%;height:auto;display:block;border-radius:calc(var(--r-xl) - 8px)}
.pic.pic-dark{background:#000;padding:0;overflow:hidden}
.pic.pic-dark img{border-radius:var(--r-xl)}
a:hover .pic,.band:hover .pic{rotate:0deg;transform:translateY(-4px)}
[data-motion="off"] .pic{rotate:0deg}

/* 1. 히어로 v5 — 검정 면 + 메인 그래픽(발광 배경이 그림에 포함) */
.hero5{min-height:calc(100svh - 70px);background:var(--peri);color:#fff;justify-content:center;
  padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(64px,9vh,110px);text-align:left}
.h5g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,48px);align-items:center;width:100%;max-width:1320px}
.h5t{position:relative;z-index:2}
.hero5 .bl{color:#fff;opacity:.9}
.hero5 .hx{margin-top:14px;font-size:clamp(36px,4.8vw,72px);line-height:1.08}
.hero5 .hx em{color:var(--lime)}
.hs5{margin-top:20px;font-size:clamp(16px,1.35vw,21px);color:#ECEBFF;font-weight:600;word-break:keep-all;max-width:40ch}
.hero5 .hb{margin-top:28px}
.hero5 .pill.k{background:var(--lime);color:var(--ink)}
.hero5 .pill.k:hover{background:#fff}
.hero5 .pill.w{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.hero5 .pill.w:hover{background:#fff;color:var(--peri);box-shadow:inset 0 0 0 1.5px #fff;transform:translateY(-3px)}
.h5a{position:relative;line-height:0}
.h5a img{width:100%;height:auto;display:block;animation:flt 7s ease-in-out infinite;filter:none}
[data-motion="reduced"] .h5a img,[data-motion="off"] .h5a img{animation:none}
.hero5 .hcards{margin-top:clamp(26px,4vh,44px)}
.hero5 .tc.big{background:rgba(255,255,255,.12);min-height:clamp(150px,20vh,200px)}
.hero5 .tc.big .n{font-size:clamp(30px,3vw,44px)}
.hero5 .tc.big h2{font-size:clamp(20px,1.8vw,26px)}
.hero5 .tc.big:hover{background:var(--lime);color:var(--ink)}
.hero5 .tc.big.lime{background:var(--lime);color:var(--ink)}
.hero5 .tc.big.lime:hover{background:#fff}
.hero5 .cue{background:rgba(255,255,255,.3)}
.hero5 .cue i{background:#fff}
@media(max-width:940px){
  .h5g{grid-template-columns:1fr;text-align:center}
  .hs5{margin-left:auto;margin-right:auto}
  .hero5 .hb{justify-content:center}
  .h5a{order:-1;max-width:520px;margin:0 auto}
  .hero5{padding-top:24px}
}
@media(max-width:520px){.hero5 .tc.big{min-height:0}.hero5 .tc.big .n{font-size:24px;margin-bottom:10px}}

/* 2. 밴드 — 텍스트 | 일러스트 패널 (고정 섬 제거) */
.band .bin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;text-align:left}
.band .btx{min-width:0}
.band .bw{font-size:clamp(56px,8.4vw,128px);line-height:1.02}
.band .pic{justify-self:end;width:min(100%,640px)}
.band:nth-child(even) .bin{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.band:nth-child(even) .btx{order:2}
.band:nth-child(even) .pic{order:1;justify-self:start;rotate:2deg}
@media(max-width:900px){
  .band .bin,.band:nth-child(even) .bin{grid-template-columns:1fr;text-align:center;gap:22px}
  .band .btx,.band:nth-child(even) .btx{order:2}
  .band .pic,.band:nth-child(even) .pic{order:1;justify-self:center;width:min(100%,460px);rotate:-1.5deg}
  .band .bw{font-size:clamp(48px,13vw,96px)}
  .band{padding-top:clamp(64px,9vh,100px);padding-bottom:clamp(72px,10vh,110px)}
}

/* 3. 체험 카드 썸네일 */
.tc.big.th{padding-top:clamp(14px,1.4vw,18px)}
.tc .thumb{display:block;background:#FBFAF6;border-radius:var(--r-md);padding:8px;line-height:0;margin-bottom:14px;aspect-ratio:3/2;overflow:hidden}
.tc .thumb img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
.tc.big.th .n{margin-bottom:8px;font-size:clamp(26px,2.4vw,36px)}
.tc:hover .thumb{background:#fff}

/* 4. 테마 머리의 일러스트 — 기존 세로 SVG 카드 대신 가로 패널 */
.phead.th .thart{aspect-ratio:auto;width:clamp(240px,34vw,560px);transform:none;rotate:-2deg;box-shadow:none;overflow:visible;border-radius:0;margin-right:0}
.phead.th .thart .pic{width:100%}
.phead.th .thart.thart-dark{rotate:0deg}
@media(max-width:1040px){.phead.th .thart{display:block;width:min(100%,420px);justify-self:center;margin-top:8px}
  .phead.th{grid-template-areas:"tx" "art" "st"}}
@media(max-width:760px){.phead.th .thart{width:min(100%,360px)}}
/* 검정 그림용 머리: 잉크 면 */


/* 그림 있는 머리(색 없는 종이 면) · 학습하기 카드 썸네일 · 체험 목록 썸네일 */
.th-paper{--th:var(--bg);--th-tx:var(--ink)}
.phead.th.th-paper .lb{color:var(--peri-tx)}
.phead.th.th-paper .lb s{background:var(--lime)}
.phead.th.th-paper h1 .g{color:var(--peri)}
.phead.th.th-paper .pstats div{background:var(--card)}
.phead.th.th-paper .pstats span{color:var(--mute)}
.phead.th.th-paper .pill.k{background:var(--ink);color:#fff}
.card.lc .lpic{display:block;background:#FBFAF6;border-radius:var(--r-md);padding:8px;line-height:0;margin-bottom:auto;aspect-ratio:3/2;overflow:hidden}
.card.lc .lpic img{width:100%;height:100%;object-fit:contain;display:block}
.card.lc h3{margin-top:18px}
.fx .thumb{display:block;background:var(--bg);border-radius:var(--r-md);padding:8px;line-height:0;margin-bottom:16px;aspect-ratio:3/2;overflow:hidden}
.fx .thumb img{width:100%;height:100%;object-fit:contain;display:block}

/* 푸터 로고(흰 심볼) */
.ftop .flogo{width:64px;height:58px;line-height:0;margin-bottom:14px}
.ftop .flogo img{width:100%;height:100%;object-fit:contain}

/* ── 가이드북 100쪽 — 쪽 단위 리더 ─────────────────────────────────── */
.rmeta{margin-top:12px;font-size:15.5px;color:var(--mute);font-weight:600}
.pnav .pr{display:block;font-size:12px;font-weight:700;color:var(--mute);margin-top:3px;letter-spacing:.02em}
.pnav a[aria-current] .pr{color:rgba(255,255,255,.7)}
.pglist{margin:6px 0 14px;padding:4px 0 4px 10px;border-left:2px solid var(--line);display:grid;gap:2px}
.pglist a{display:block;padding:6px 10px;font-size:14px;font-weight:600;color:var(--mute);border-radius:8px}
.pglist a b{font-size:12px;font-weight:800;color:var(--peri-tx);letter-spacing:.02em}
.pglist a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pglist a.on{background:var(--peri-3);color:var(--ink)}
.book .pg{position:relative;margin-top:28px;padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px) 18px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);scroll-margin-top:72px}
.book .pg:first-child{margin-top:22px}
.book .pgh{display:flex;gap:12px;align-items:center;margin-bottom:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.book .pgh::before{content:"";width:14px;height:14px;border-radius:5px;background:var(--lime);transform:rotate(12deg);flex:0 0 auto}
.book .pgn{font-size:clamp(28px,3vw,40px);font-weight:900;letter-spacing:-.04em;color:var(--peri);line-height:1;font-variant-numeric:tabular-nums}
.book .pgh h2{margin:0;font-size:clamp(20px,2vw,28px);line-height:1.2;word-break:keep-all}
.book .pg>p:first-of-type{margin-top:18px}
.book .pg>p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.85}
.book .pg h3{margin-top:26px;font-size:clamp(17px,1.5vw,20px)}
.book .pg h3+p{margin-top:10px}
.book .pgf{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.02em}
.book .pgf span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book ul.bul,.book ol.bnum{margin-top:16px;padding-left:22px;display:grid;gap:8px;font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:var(--ink-2);font-weight:500;word-break:keep-all}
.book ol.bnum{padding-left:26px}.book ul.bul li::marker{color:var(--peri)}.book ol.bnum li::marker{font-weight:800;color:var(--peri)}
.book .terms{margin-top:18px}
.book .more{margin-top:22px;background:var(--bg);border-radius:var(--r-lg);padding:20px 22px;word-break:keep-all}
.book .more .mh{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--peri-tx)}
.book .more b{display:block;font-size:16px;font-weight:800;color:var(--ink)}
.book .more p{margin-top:8px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.book .tipbox{margin-top:22px;background:var(--lime-2);border-radius:var(--r-lg);padding:20px 22px;word-break:keep-all}
.book .tipbox b{display:block;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:6px}
.book .tipbox ul{padding-left:20px;display:grid;gap:6px;font-size:15px;line-height:1.7;color:var(--ink-2);font-weight:500}
.book .tipbox li::marker{color:var(--grass)}
.book .tblwrap{margin-top:20px}.book .tbl{box-shadow:none;font-size:14.5px}
.book .kv{margin-top:18px;display:grid;gap:8px}
.book .kv div{display:grid;grid-template-columns:minmax(90px,34%) minmax(0,1fr);gap:12px;background:var(--bg);border-radius:var(--r-md);padding:12px 16px;font-size:14.5px;line-height:1.65;word-break:keep-all}
.book .kv dt{font-weight:800;overflow-wrap:anywhere}.book .kv dd{margin:0;color:var(--ink-2);font-weight:500}
.book .bq{margin:22px 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--lime)}
.book .bq p{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:var(--ink-2)}
.book .bq cite{display:block;margin-top:8px;font-size:12.5px;font-style:normal;font-weight:700;color:var(--mute)}
.book .figbox,.book .alert,.book .sim,.book .ck{margin-top:22px}
.book .bfig{margin:22px 0 0}
.book .bfig .pic{background:var(--bg);padding:clamp(12px,1.6vw,22px);rotate:0}
.book .bfig .pic img{max-width:640px;margin:0 auto}
.book .bfig figcaption{margin-top:10px;font-size:13.5px;line-height:1.6;font-weight:600;color:var(--mute);text-align:center;word-break:keep-all;padding:0 8px}
.book .bfig+p{margin-top:18px}
.book .act{margin-top:24px}
.pgnav{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:60;display:flex;align-items:center;gap:2px;background:var(--ink);color:#fff;border-radius:999px;padding:4px;box-shadow:none}
.pgnav a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;font-size:22px;font-weight:800;line-height:1;text-decoration:none}
.pgnav a:hover{background:rgba(255,255,255,.14)}
.pgnav a[aria-disabled]{opacity:.3;pointer-events:none}
.pgnav .cur{padding:0 8px;font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;max-width:min(46vw,260px);overflow:hidden;text-overflow:ellipsis}
.pgnav .cur b{font-size:16px;color:#fff;font-weight:900}
@media(max-width:700px){.pgnav{right:12px;bottom:12px}.book .pg{padding:18px 16px 14px;border-radius:var(--r-lg)}}
@media print{.pgnav,.rprog,.pnav,.pager,.acts{display:none!important}.book .pg{break-after:page;border:0;padding:0;margin-top:0}.book .pgf{position:fixed;bottom:0;left:0;right:0}}

.ucard .upg{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--mute);letter-spacing:.01em}
@media(max-width:920px){.pnav .pr,.pnav .pglist{display:none}}
@media(max-width:560px){.book .kv div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ══ 기후퀴즈 ══ */
.card.qcard{background:var(--th);color:var(--th-tx);min-height:210px;display:flex;flex-direction:column;gap:4px}
.card.qcard .qn{font-size:clamp(28px,2.6vw,36px);font-weight:900;letter-spacing:-.05em;line-height:1;opacity:.55;margin-bottom:auto;font-variant-numeric:tabular-nums}
.card.qcard .qk{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--th-tx);opacity:.8;margin-top:18px}
.card.qcard h3{font-size:clamp(24px,2.2vw,32px);font-weight:900;letter-spacing:-.045em;line-height:1.1;margin-top:4px}
.card.qcard .qm{font-size:15.5px;font-weight:600;color:var(--th-tx);margin-top:4px}
.card.qcard .qp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:14px}
.card.qcard .qd{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.card.qcard .pb{margin-top:0;background:rgba(255,255,255,.35)}
.th-snow.card.qcard .pb,.th-heat.card.qcard .pb,.th-drought.card.qcard .pb,.th-guide.card.qcard .pb{background:rgba(15,17,23,.15)}
.th-guide.card.qcard{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.th-guide.card.qcard .qk,.th-guide.card.qcard .qm{color:var(--mute);opacity:1}
.th-guide.card.qcard .qn{color:var(--peri);opacity:1}
.card.qcard .pb i{background:var(--th-tx)}
.th-guide.card.qcard .pb i{background:var(--peri)}
.card.qcard.done .qn{opacity:1}
.card.qcard.done::after{content:"완료";position:absolute;top:18px;right:18px;font-size:12px;font-weight:800;background:var(--lime);color:var(--ink);border-radius:100px;padding:5px 10px}
.acts.qz{display:grid;gap:18px;margin-top:0}
.acts.qz .act{margin-top:0;min-width:0}

/* ══ 기관 소개 — 사진 위, 아래쪽에 글 (오버레이 타일) ══ */
.orghero,.orgtile{position:relative;width:100%;border-radius:var(--r-xl);overflow:hidden;background:var(--ink);color:#fff;display:block;isolation:isolate}
.orghero{aspect-ratio:16/8;min-height:440px}
.orgtile{aspect-ratio:4/3;min-height:240px;border-radius:var(--r-lg);transition:transform .4s var(--e),box-shadow .4s var(--e)}
a.orgtile:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.ophoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s var(--e)}
a.orgtile:hover .ophoto{transform:scale(1.04)}
.ophoto.ph{display:grid;place-items:center;color:rgba(255,255,255,.35)}
.ophoto.ph svg{width:clamp(56px,8vw,96px);height:auto}
.ophoto.ph0{background:radial-gradient(120% 90% at 20% 10%,#6E72FF 0%,#3F42F0 40%,#141637 100%)}
.ophoto.ph1{background:radial-gradient(120% 90% at 80% 10%,#8C90FF 0%,#4F48EF 45%,#1B1D4A 100%)}
.ophoto.ph2{background:radial-gradient(120% 90% at 20% 90%,#5AA9FF 0%,#2F6FD9 45%,#12234A 100%)}
.ophoto.ph3{background:radial-gradient(120% 90% at 80% 90%,#7CC5D9 0%,#2B7F95 45%,#0F2E38 100%)}
.orghero::after,.orgtile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,24,.88) 0%,rgba(8,9,24,.55) 38%,rgba(8,9,24,.08) 68%,transparent 100%)}
.orgtile::after{background:linear-gradient(to top,rgba(8,9,24,.86) 0%,rgba(8,9,24,.4) 45%,transparent 80%)}
.obadge{position:absolute;top:16px;right:16px;z-index:2;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:6px 11px}
.otext{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,3vw,40px)}
.okick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--lime);margin-bottom:10px}
.okick .ex{letter-spacing:0;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25)}
.orghero h3{font-size:clamp(26px,3.4vw,46px);font-weight:900;letter-spacing:-.045em;line-height:1.08;word-break:keep-all;color:#fff;max-width:20ch}
.orgtile h3{font-size:clamp(18px,1.7vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.2;word-break:keep-all;color:#fff}
.oen{margin-top:8px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.01em}
.orgtile .oline{margin-top:6px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.75);word-break:keep-all;overflow-wrap:anywhere}
.ochips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ochip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:100px;font-size:14px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);word-break:keep-all;overflow-wrap:anywhere;transition:background .3s var(--e)}
.ochip svg{width:16px;height:16px;flex:0 0 auto;opacity:.9}
.ochip:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.obtn{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.obtn .pill{padding:14px 24px;font-size:15px}
.pill.l{background:var(--lime);color:var(--ink)}.pill.l:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.pill.g{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}.pill.g:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.ointro{margin-top:16px}
.oabout p{margin-top:12px;font-size:16px;line-height:1.75;color:var(--ink-2);font-weight:500;word-break:keep-all}
.soon{color:var(--mute);font-weight:600}
.oabout p.soon{background:var(--bg);border-radius:var(--r-md);padding:12px 14px;font-size:14.5px}
.owork{margin-top:12px}
.owork li{font-size:clamp(15px,1.2vw,17px)}
@media(max-width:700px){
  .orghero{aspect-ratio:auto;min-height:0}
  .orghero .otext{position:static;padding:clamp(18px,4vw,26px)}
  .orghero .ophoto{position:relative;height:260px;display:block}
  .orghero .ophoto.ph{display:grid}
  .orghero::after{content:none}
  .orghero .obadge{top:14px;right:14px}
  .orgtile{min-height:200px}
}
/* 리더의 고정 쪽 이동 알약이 좁은 화면에서 푸터의 모션 버튼을 가리지 않게 */
@media(max-width:700px){main:has(.pgnav)~footer .in{padding-bottom:64px}}

/* ══ 학습하기(리더) v2 — 메인처럼 크고 평평하게: 색 면 머리 + 왼쪽 큰 목차 + 카드 없는 본문 ══ */
.phead.th.rd{padding:clamp(26px,3.2vw,48px) clamp(24px,3.4vw,52px)}
.phead.th.rd h1{font-size:var(--fs-h1)}
.phead.th.rd .lb{flex-wrap:wrap;gap:10px 14px;font-size:14.5px}
.phead.th.rd .lb .sk{background:var(--th-tx);color:var(--th);border-radius:8px;padding:4px 10px;font-size:13px;letter-spacing:.08em}
.phead.th.rd .pstats div{padding:14px 20px}
.phead.th.rd .pstats b{font-size:clamp(24px,2.4vw,36px)}
.phead.th.rd .pstats div>span{font-size:14px;margin-top:5px}
.phead.th.rd{min-height:0}
.phead.th.rd .thart{width:clamp(160px,19vw,260px)}
@media(max-width:1040px){.phead.th.rd .thart{display:none}.phead.th.rd{grid-template-areas:"tx" "st"}}
.reader{background:none;box-shadow:none;padding:0;margin-top:clamp(22px,3vw,44px);grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.pnav{top:22px}
.pnav .nh{font-size:13.5px;letter-spacing:.06em;margin-bottom:12px;line-height:1.5;word-break:keep-all}
.pnav .nh a{color:inherit}
.pnav .nh a:hover{color:var(--ink)}
.pnav>a{font-size:16px;padding:13px 16px;border-radius:var(--r-md);margin-top:4px}
.pnav>a .k{color:var(--peri-tx);font-weight:900;margin-right:2px}
.pnav>a[aria-current] .k{color:var(--lime)}
.pglist{margin:14px 0 0;padding:0;border-left:0;gap:3px}
.pglist a{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:baseline;gap:6px;padding:9px 12px;font-size:15.5px;font-weight:700;color:var(--mute);border-radius:var(--r-sm);line-height:1.4}
.pglist a b{font-size:13px;font-variant-numeric:tabular-nums}
.pglist a span{white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all}
.pglist a:hover{background:var(--bg);color:var(--ink)}
.pglist a.on{background:var(--peri-3);color:var(--ink)}
.pglist a.on b{color:var(--peri)}
.ptx{max-width:860px}
.book .pg{margin-top:clamp(44px,5vw,72px);padding:0;border:0;border-radius:0;background:none;scroll-margin-top:84px}
.book .pg:first-child{margin-top:0}
.book .pgh{gap:14px;margin-bottom:6px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.book .pgh::before{width:16px;height:16px;border-radius:6px}
.book .pgh h2{font-size:clamp(26px,2.7vw,38px);letter-spacing:-.04em;line-height:1.15}
.book .pg>p:first-of-type{margin-top:22px}
.book .pg>p{font-size:clamp(18px,1.45vw,20.5px);line-height:1.9;margin-top:22px;color:var(--ink-2)}
.book .pg h3{margin-top:34px;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.6px}
.book .pg h3+p{margin-top:12px}
.book ul.bul,.book ol.bnum{margin-top:18px;gap:10px;font-size:clamp(17px,1.35vw,19.5px);line-height:1.8}
.book .terms{margin-top:22px;gap:10px}
.terms div{padding:16px 20px;font-size:16px;line-height:1.7;gap:14px}
.terms>div b{font-size:17px}
.book .more{margin-top:26px;padding:24px 26px;border-radius:var(--r-lg)}
.book .more .mh{font-size:13px;margin-bottom:8px}
.book .more b{font-size:18.5px;letter-spacing:-.3px}
.book .more p{margin-top:10px;font-size:16.5px;line-height:1.8}
.book .tipbox{margin-top:26px;padding:24px 26px}
.book .tipbox b{font-size:18.5px;margin-bottom:10px}
.book .tipbox ul{gap:8px;font-size:16.5px;line-height:1.75}
.book .tblwrap{margin-top:24px}.book .tbl{font-size:16px}
.book .tbl th,.book .tbl td{padding:15px 18px}
.book .tbl thead th{font-size:13.5px}
.book .kv{margin-top:22px;gap:10px}
.book .kv div{padding:14px 18px;font-size:16px;line-height:1.7}
.book .bq{margin-top:26px;padding-left:22px}
.book .bq p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.8}
.book .bq cite{font-size:14px;margin-top:10px}
.book .figbox,.book .alert,.book .sim,.book .ck{margin-top:26px}
.book .bfig{margin-top:26px}
.book .bfig figcaption{font-size:15.5px;margin-top:12px}
.figbox .cp{font-size:13.5px}
.figbox .cp small{font-size:12.5px}
.alert .ah{font-size:16.5px;color:var(--ink);letter-spacing:-.2px;margin-bottom:2px}
.alert .al{font-size:13.5px;padding:5px 10px}
.book .act{margin-top:28px;padding:26px 28px}
.ano{font-size:13px}
.akind{font-size:13px;padding:5px 9px}
.aq{font-size:clamp(17px,1.5vw,20px);margin-top:12px}
.akey span{font-size:13.5px}.akey i{font-size:14px;padding:5px 10px}
.fsel,.msel{font-size:15.5px;min-height:40px}
.sim .lb{font-size:13.5px}
.simlv{font-size:14.5px;padding:9px 16px}
.simscale{font-size:12.5px}
.simtip{font-size:16px;line-height:1.75}
.ck h3{font-size:17px}.ck h4{font-size:13px}.ck li{font-size:16px}
.acts{margin-top:clamp(44px,5vw,72px)}
.acts>h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.035em}
.acts>h2 s{width:16px;height:16px;border-radius:6px;transform:rotate(12deg)}
.ptx .sec{margin-top:clamp(44px,5vw,72px)}
.ptx .sec .sech h2{font-size:clamp(24px,2.4vw,32px)}
.ptx .pager{margin-top:clamp(44px,5vw,72px)}
.pager .d{font-size:14px}
.pager .t{font-size:clamp(17px,1.5vw,20px)}
.pgnav .cur{font-size:14.5px;max-width:min(50vw,300px)}
.pgnav a{width:44px;height:44px}
.crumb{font-size:14px}
@media(max-width:920px){
  .reader{grid-template-columns:minmax(0,1fr);gap:18px}
  .phead.th.rd .pstats{flex-wrap:nowrap;width:100%}
  .phead.th.rd .pstats div{flex:1 1 0;padding:12px 14px}
  .phead.th.rd .pstats b{font-size:22px}
  .phead.th.rd .pstats div>span{font-size:13px}
  .pnav .nh{display:none}
  .pnav>a,.pnav>a.sub{font-size:14.5px;padding:10px 15px;min-height:40px;border-radius:100px}
  .pnav>a .t{max-width:190px}
  .book .pg{margin-top:clamp(40px,8vw,56px)}
  .book .pgh h2{font-size:clamp(24px,6.2vw,30px)}
  .book .pg>p{font-size:17.5px;line-height:1.85}
  .book ul.bul,.book ol.bnum{font-size:16.5px}
  .book .more,.book .tipbox,.book .act{padding:20px 20px}
}
@media(max-width:920px){.pnav .pr,.pnav .pglist{display:none}}
.book .jt{height:170px}
.book .jt div{font-size:13px}
.book .jt i::after{font-size:13px;top:-21px}
@media(max-width:560px){.book .jt div{font-size:11px}.book .jt i::after{font-size:11px;top:-18px}}
@media(max-width:560px){.phead.th.rd .pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.phead.th.rd .pstats div:last-child:nth-child(odd){grid-column:auto}}

/* ══ 학습활동 v2 — 문제 한 개씩 큰 카드 (메인과 같은 비례) ══ */
.act.qz2{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,36px) clamp(20px,2.8vw,40px)}
.act.qz2.locked{background:var(--card)}
.act.qz2 .ahd{gap:10px}
.act.qz2 .ano{font-size:14px;letter-spacing:.14em;background:var(--peri-3);color:var(--peri-tx);border-radius:100px;padding:6px 12px}
.act.qz2 .akind{font-size:13px;background:var(--peri-3);color:var(--peri-tx);border-radius:100px;padding:6px 12px}
.act.qz2 .aq{font-size:clamp(18px,1.6vw,22px);line-height:1.5;margin-top:14px}
.act.qz2 .ahint{font-size:15px;margin-top:10px;line-height:1.7}
.qbody{margin-top:clamp(18px,2vw,26px)}
.qtop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.qcount{font-size:15px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.qcount b{font-size:22px;font-weight:900;color:var(--ink);margin-right:2px}
.qdots{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.qdots i{width:22px;height:6px;border-radius:100px;background:var(--bg);display:block}
.qdots i.ok{background:var(--lime)}
.qdots i.on{background:var(--ink)}
.qcard{background:var(--bg);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,32px)}
.qcard .qt{font-size:clamp(19px,1.8vw,24px);font-weight:800;line-height:1.55;letter-spacing:-.4px;color:var(--ink);word-break:keep-all}
.qcard .qt .slot{display:inline-block;min-width:3.2em;padding:0 .35em;margin:0 .08em;border-bottom:3px solid var(--peri);color:var(--peri-tx);line-height:1.3;vertical-align:baseline}
.qcard .qt .slot.on{background:var(--peri-3);border-radius:8px;border-bottom-color:transparent;padding:.06em .45em}
.qcard .qt .arrow{color:var(--mute);font-weight:600;margin:0 .1em}
.qsofar{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px;counter-reset:so}
.qsofar li{counter-increment:so;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;font-size:15.5px;font-weight:600;color:var(--ink-2);line-height:1.5;word-break:keep-all}
.qsofar li::before{content:counter(so);width:28px;height:28px;border-radius:9px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:13.5px;font-weight:900}
.qopts{display:grid;gap:10px;margin-top:22px}
.qo{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px;min-height:58px;font:inherit;font-size:clamp(16px,1.35vw,18.5px);font-weight:700;color:var(--ink);line-height:1.5;word-break:keep-all;cursor:pointer;
  transition:background .25s var(--e),border-color .25s var(--e),transform .25s var(--e)}
.qo .k{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-size:15px;font-weight:900;color:var(--mute)}
.qo .l{min-width:0}
.qo:hover{border-color:var(--peri);background:var(--peri-3)}
.qo[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.qo[aria-pressed="true"] .k{background:var(--lime);color:var(--ink)}
.qopts.ox2{grid-template-columns:1fr 1fr;gap:14px}
.qopts.ox2 .qo{justify-content:center;min-height:96px;font-size:clamp(34px,4vw,48px);font-weight:900;letter-spacing:-.02em;border-radius:var(--r-lg)}
.qopts.ox2 .qo.o{color:#2C7A2F}.qopts.ox2 .qo.x{color:var(--warn)}
.qopts.ox2 .qo[aria-pressed="true"]{color:#fff}
.qopts.sc{grid-template-columns:repeat(3,minmax(0,1fr))}
.qopts.sc .qo{justify-content:center;text-align:center;min-height:64px}
.qopts.sc .qo .k{display:none}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.qb{font:inherit;font-size:15.5px;font-weight:800;border-radius:100px;padding:13px 22px;min-height:48px;background:var(--card);border:1.5px solid var(--line);color:var(--ink);cursor:pointer;transition:background .25s var(--e),color .25s var(--e)}
.qb:hover{background:var(--bg)}
.qb.k{background:var(--ink);color:#fff;border-color:var(--ink);margin-left:auto}
.qb.k:hover{background:var(--peri-tx);border-color:var(--peri-tx)}
.qb:disabled{opacity:.35;cursor:default}
.qz2 .writes{margin-top:0;gap:14px}
.qz2 .wf span{font-size:14px}
.qz2 .wf textarea{font-size:16.5px;min-height:64px;padding:14px 16px}
.qz2 .pl{font-size:15px;margin-top:12px}
.qres{display:grid;gap:18px}
.qscore{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--bg);border-radius:var(--r-lg);padding:20px 26px}
.qscore b{font-size:clamp(40px,4.6vw,64px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.qscore span{font-size:clamp(18px,1.8vw,24px);font-weight:800;color:var(--mute)}
.qscore em{font-style:normal;margin-left:auto;font-size:15px;font-weight:800;background:var(--lime);color:var(--ink);border-radius:100px;padding:8px 14px}
.qrev{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.qrev li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;background:var(--bg);border-radius:var(--r-md);padding:16px 18px}
.qrev .n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:900;background:var(--card);color:var(--mute)}
.qrev li.ok .n{background:var(--lime);color:var(--ink)}
.qrev li.no .n{background:#FBE0DC;color:var(--warn)}
.qrev .qt{font-size:clamp(16px,1.35vw,18px);font-weight:700;line-height:1.55;color:var(--ink);word-break:keep-all;margin:0}
.qrev .qt .slot{display:inline;border:0;padding:0 .15em;color:var(--peri-tx);font-weight:900;background:none}
.qrev .qt .slot.on{background:var(--peri-3);border-radius:6px;padding:.05em .4em}
.qrev .mine,.qrev .key{margin:8px 0 0;font-size:15px;font-weight:700;line-height:1.5;word-break:keep-all}
.qrev .mine.ok{color:#2C7A2F}
.qrev .mine.no{color:var(--warn);text-decoration:line-through;text-decoration-thickness:1.5px}
.qrev .key{color:var(--ink)}
.qrev .key::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-right:8px;vertical-align:middle}
.qz2 .ansbox{margin-top:16px;border-radius:var(--r-md)}
.qz2 .qdone{font-size:13px;border-radius:100px;padding:6px 12px}
@media(max-width:560px){
  .act.qz2{padding:18px 16px;border-radius:var(--r-lg)}
  .qcard{padding:18px 16px}
  .qcard .qt{font-size:18px}
  .qo{padding:13px 14px;min-height:52px;font-size:15.5px;gap:10px}
  .qo .k{width:30px;height:30px;font-size:13.5px}
  .qopts.sc{grid-template-columns:1fr}
  .qopts.ox2 .qo{min-height:80px;font-size:36px}
  .qnav{flex-wrap:wrap}
  .qb{padding:12px 18px;font-size:15px}
  .qscore{padding:16px 18px}
  .qscore em{margin-left:0;width:100%}
  .qrev li{grid-template-columns:28px minmax(0,1fr);padding:14px}
  .qrev .n{width:28px;height:28px;font-size:13px}
}
@media print{.qnav{display:none!important}}

/* 플래시 무대가 그려지기 전에도 자리를 잡아 두어 앵커 이동 뒤 밀림을 줄임 */
.book [data-flash]{min-height:clamp(260px,44vw,520px)}

/* ══ 글자 크기 v3 — 눈에 확 들어오게: 보조 글자 최소 14px, 본문·목록 17px 이상 ══ */
/* 헤더·푸터 */
.nav menu{font-size:17px}
.btn-dark{font-size:16px}
.logo b{font-size:18px}
.crumb{font-size:15.5px}
.fnav{font-size:16.5px}
.orgs li{font-size:15px;padding:9px 16px}
.forg .flb{font-size:13px}
footer .in>span{font-size:14.5px}
.mctl>span,.mctl button{font-size:14.5px}
.mctl button{padding:6px 14px}
.ftop .fup{font-size:14.5px}
/* 페이지 머리 · 섹션 머리 */
.phead .lb{font-size:15.5px}
.phead.th.rd .lb{font-size:15.5px}
.pstats div>span{font-size:15px;margin-top:8px}
.sech .all,.sech span.all{font-size:16px}
.sech .tb,.tb{font-size:15.5px}
.pager .d{font-size:15.5px}
.pager .t{font-size:clamp(18px,1.6vw,22px)}
/* 카드 · 목록 */
.card>p,.grid a.card>p,.grid a.card>div>p{font-size:17px;line-height:1.7}
.scard .sn,.sn{font-size:14px}
.qcard .qk{font-size:14px}
.qcard .qd{font-size:14.5px}
.qcard .qm{font-size:16.5px}
.scard .sm,.ucard .upg{font-size:16.5px}
.fx .fmin{font-size:15px}
.tc p{font-size:16px}
.chip{font-size:15.5px;padding:10px 16px}
.trio div span{font-size:15.5px}
.nums span{font-size:15px}
p.bl,.btx .bl,.h5t .bl,.dc .bl,.ph2 .bl{font-size:14px}
.btx .bk{font-size:15.5px}
.gpart .pk{font-size:15px}
.ucard .us{font-size:14px}
.ucard .ur span{font-size:13.5px}
.card .cno{font-size:14px}
.card .meta{font-size:15px}
.mybar .lb{font-size:13.5px}
.mybar .msch b{font-size:20px}
.alist li a{font-size:17px}
.alist li .k{font-size:13.5px;padding:5px 10px}
.alist li .d{font-size:13.5px}
.goals li{font-size:clamp(17px,1.4vw,21px)}
.owork li{font-size:17px}
.acc summary{font-size:18px}
.acc .bd{font-size:17px}
.sitelist li,.sitelist li a{font-size:17px}
.tbl{font-size:16px}
.tbl thead th{font-size:14px}
.stdlist li{font-size:15.5px}
.stdlist li .std,.std{font-size:12.5px}
.stdd p{font-size:15px}
.stdd summary{font-size:15.5px}
.tl div span{font-size:14px}
.tl div p{font-size:15px}
.flow{font-size:15px}
.lvl button{font-size:15px;padding:8px 16px;min-height:36px}
.sech h2 span{font-size:15px}
/* 본문 요소 */
.terms div{font-size:17px}
.terms>div b{font-size:18px}
.book .kv div{font-size:17px}
.book .tipbox ul{font-size:17.5px}
.book .more p{font-size:17.5px}
.book .more .mh{font-size:14px}
.book .bfig figcaption{font-size:16.5px}
.figbox .cp{font-size:15px}
.figbox .cp small{font-size:14px}
.alert .al{font-size:15px}
.alert p{font-size:clamp(17px,1.4vw,19.5px)}
.srcline{font-size:14.5px}
.book .jt div{font-size:13.5px}
.jt div{font-size:13.5px}
.jt i::after{font-size:13.5px;top:-21px}
.sim .lb{font-size:14.5px}
.simscale{font-size:14px}
.simlv{font-size:16px;padding:10px 18px}
.simtip{font-size:17px}
/* 리더 */
.pglist a{font-size:16.5px}
.pglist a b{font-size:14px}
.pnav>a{font-size:17px}
.pgnav .cur{font-size:16px}
.pgnav a{width:46px;height:46px;font-size:24px}
/* 학습활동 */
.act.qz2 .ano{font-size:15px}
.act.qz2 .ahint{font-size:16px}
.qz2 .wf span{font-size:15.5px}
.qz2 .wf textarea{font-size:17px}
.qcount{font-size:16px}
.qo .k{font-size:16px;width:36px;height:36px}
.qb{font-size:16.5px}
.qz2 .pl{font-size:16px}
.qrev .mine,.qrev .key{font-size:16px}
.qscore em{font-size:16px}
.qz2 .qdone{font-size:14px}
.ansbox{font-size:17.5px}
/* 체험학습(플래시) */
.fcap .fk,.fk{font-size:14px}
.fcap p{font-size:17.5px}
.fhead .fk,.fhead .fscore{font-size:14.5px}
.fb{font-size:16px;min-height:46px;padding:10px 18px}
.fbig span{font-size:18px}
.fsub{font-size:16px}
.fcard .tx b{font-size:18px}
.fcard .tx small{font-size:14px}
.fopt{font-size:17px}
.fans{font-size:17px}
.hclock,.htemp,.hhp{font-size:13.5px}
.hclock b,.htemp b{font-size:22px}
.htl span{font-size:12.5px}
.czone b{font-size:18px}
.czone ul{font-size:14.5px}
.ccard .cn{font-size:14px}
.cend span{font-size:17px}
/* 커뮤니티 · 마이페이지 · 기관 */
.rank li{font-size:16.5px}
.rank li b{width:26px;height:26px;font-size:13.5px}
.klass .kh .more{font-size:15px}
.donut .c span{font-size:13px}
.ex{font-size:12.5px}
.qsch label{font-size:13px}
.ksub{font-size:16.5px}
.okick{font-size:14px}
.oen{font-size:15px}
.orgtile .oline{font-size:15px}
.ochip{font-size:15.5px}
.obadge{font-size:13px}
.soon,.oabout p.soon{font-size:16px}
.oabout p{font-size:17px}
.note{font-size:16.5px}
.dots span{font-size:13.5px}
.empty p.lb{font-size:13.5px}
@media(max-width:560px){
  .nav menu{font-size:16px}
  .logo b{font-size:15px}
  .crumb{font-size:14px}
  .card>p,.grid a.card>p{font-size:16px}
  .alist li a{font-size:16px}
  .acc .bd{font-size:16px}
  .tbl{font-size:15px}
  .pglist a{font-size:16px}
  .fcap p{font-size:16.5px}
  .rank li{font-size:15.5px}
}
.pstats b small{font-size:.5em;font-weight:800;color:var(--mute);margin-left:4px;letter-spacing:0}

/* ══ 리더(학습하기) 글자 v3 — 교재처럼 크게 · 절마다 요점 색 ══ */
.ptx{max-width:920px}
.book .pg{--acc:#4F48EF;--acc-tx:#3D37D9;--acc-bg:#ECEBFF}
.book .pg:nth-of-type(5n+2){--acc:#E8603C;--acc-tx:#B5401F;--acc-bg:#FFE9E1}
.book .pg:nth-of-type(5n+3){--acc:#0E75A3;--acc-tx:#0B5F85;--acc-bg:#E1F1F9}
.book .pg:nth-of-type(5n+4){--acc:#E39B0B;--acc-tx:#8A5A00;--acc-bg:#FFF1CC}
.book .pg:nth-of-type(5n+5){--acc:#2E9E52;--acc-tx:#1E7A3E;--acc-bg:#E3F5E8}
.book .pgh{border-bottom:3px solid var(--acc-bg);padding-bottom:20px;gap:16px}
.book .pgh::before{width:20px;height:20px;border-radius:7px;background:var(--acc)}
.book .pgh h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em;line-height:1.15}
.book .pg>p{font-size:clamp(19px,1.55vw,22px);line-height:1.9;margin-top:24px;color:var(--ink)}
.book .pg h3{margin-top:40px;font-size:clamp(21px,2vw,26px);color:var(--acc-tx);padding-left:14px;border-left:5px solid var(--acc);line-height:1.3}
.book .pg h3+p{margin-top:14px}
/* 요점 숫자 */
.book mark.kf{background:var(--acc-bg);color:var(--ink);font-weight:800;border-radius:6px;padding:.02em .2em;margin:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* 목록 — 절 색으로 큰 점·번호 */
.book ul.bul{list-style:none;padding-left:0;margin-top:20px;gap:12px;font-size:clamp(18px,1.45vw,20.5px);line-height:1.8;color:var(--ink)}
.book ul.bul li{position:relative;padding-left:30px}
.book ul.bul li::before{content:"";position:absolute;left:2px;top:.62em;width:13px;height:13px;border-radius:4px;background:var(--acc);transform:rotate(12deg)}
.book ol.bnum{list-style:none;padding-left:0;margin-top:20px;gap:12px;font-size:clamp(18px,1.45vw,20.5px);line-height:1.8;color:var(--ink);counter-reset:bn}
.book ol.bnum li{position:relative;padding-left:44px;counter-increment:bn}
.book ol.bnum li::before{content:counter(bn);position:absolute;left:0;top:.12em;width:32px;height:32px;border-radius:10px;background:var(--acc-bg);color:var(--acc-tx);display:grid;place-items:center;font-size:16px;font-weight:900}
/* 용어 */
.book .terms{gap:12px}
.book .terms div{padding:18px 22px;font-size:18px;line-height:1.75;border-left:5px solid var(--acc);border-radius:0 var(--r-md) var(--r-md) 0}
.book .terms>div b{font-size:19px;color:var(--acc-tx)}
/* 더 알아보기 — 절 색 */
.book .more{background:var(--acc-bg);padding:26px 28px}
.book .more .mh{color:var(--acc-tx);font-size:14.5px;letter-spacing:.16em}
.book .more b{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.4px}
.book .more p{font-size:clamp(17.5px,1.4vw,19.5px);line-height:1.8;color:var(--ink)}
/* 안전 행동요령 — 항상 초록 */
.book .tipbox{background:var(--lime-2);padding:26px 28px;border-left:6px solid var(--grass)}
.book .tipbox b{font-size:clamp(19px,1.6vw,22px);color:var(--grass-2)}
.book .tipbox ul{font-size:clamp(17.5px,1.4vw,19.5px);line-height:1.8;color:var(--ink);gap:10px}
/* 표 · 항목 · 인용 · 캡션 */
.book .tbl{font-size:17px}
.book .tbl th,.book .tbl td{padding:16px 18px}
.book .tbl thead th{font-size:14.5px;color:var(--acc-tx);background:var(--acc-bg)}
.book .kv div{font-size:17.5px;line-height:1.75;padding:16px 20px}
.book .kv dt{color:var(--acc-tx)}
.book .bq{border-left:5px solid var(--acc);padding-left:24px}
.book .bq p{font-size:clamp(18.5px,1.5vw,21px);line-height:1.8;color:var(--ink)}
.book .bq cite{font-size:15px}
.book .bfig figcaption{font-size:17px;color:var(--ink-2)}
.book .figbox .cp{font-size:15.5px;color:var(--acc-tx)}
.book .alert .ah{font-size:18px}
.book .alert p{font-size:clamp(18px,1.5vw,21px)}
.book .alert .al{font-size:16px;padding:6px 12px}
.book .sim h3{font-size:clamp(20px,1.9vw,25px)}
.book .simtip{font-size:18px;line-height:1.75}
.book .simlv{font-size:17px}
.book .sim .lb{font-size:15px}
/* 왼쪽 목차 */
.pnav .nh{font-size:14.5px}
.pnav>a{font-size:18px;padding:14px 18px}
.pglist a{font-size:17.5px;padding:10px 14px}
.pglist a b{font-size:14.5px}
.pgnav .cur{font-size:17px}
/* 학습활동 v3 — 더 크게 */
.act.qz2 .ano{font-size:16px;padding:7px 14px}
.act.qz2 .aq{font-size:clamp(21px,1.9vw,25px);line-height:1.5}
.act.qz2 .ahint{font-size:17px;line-height:1.75}
.qcount{font-size:17px}
.qcount b{font-size:26px}
.qdots i{width:26px;height:7px}
.qcard{padding:clamp(24px,2.8vw,38px) clamp(22px,2.8vw,36px)}
.qcard .qt{font-size:clamp(21px,2vw,27px);line-height:1.55}
.qcard .qt .slot{min-width:3.4em}
.qsofar li{font-size:17px}
.qsofar li::before{width:30px;height:30px;font-size:14.5px}
.qopts{gap:12px;margin-top:24px}
.qo{font-size:clamp(17.5px,1.5vw,20px);padding:17px 20px;min-height:64px;gap:16px}
.qo .k{width:38px;height:38px;font-size:17px;border-radius:11px}
.qopts.ox2 .qo{min-height:108px;font-size:clamp(40px,4.4vw,54px)}
.qopts.sc .qo{min-height:70px}
.qb{font-size:17px;padding:14px 24px;min-height:52px}
.qz2 .wf span{font-size:16.5px}
.qz2 .wf textarea{font-size:18px;line-height:1.75;min-height:72px}
.qz2 .pl{font-size:17px}
.qscore b{font-size:clamp(44px,5vw,70px)}
.qscore span{font-size:clamp(20px,2vw,26px)}
.qscore em{font-size:17px;padding:9px 16px}
.qrev li{padding:18px 20px;gap:14px}
.qrev .n{width:36px;height:36px;font-size:15px}
.qrev .qt{font-size:clamp(17.5px,1.45vw,19.5px)}
.qrev .mine,.qrev .key{font-size:17px}
.qz2 .ansbox{font-size:18px;padding:20px 22px}
.qz2 .qdone{font-size:15px;padding:7px 14px}
.acts>h2{font-size:clamp(26px,2.6vw,36px)}
/* 단원 페이지 목록 */
.alist li a{font-size:18px}
.alist li .k{font-size:14.5px;padding:6px 11px}
.scard .sm,.ucard .upg{font-size:17px}
@media(max-width:560px){
  .book .pgh h2{font-size:clamp(25px,6.4vw,30px)}
  .book .pg>p{font-size:18.5px;line-height:1.85}
  .book ul.bul,.book ol.bnum{font-size:17.5px}
  .book .pg h3{font-size:20px}
  .book .terms div{font-size:17px;padding:14px 16px}
  .book .more p,.book .tipbox ul{font-size:17px}
  .book .more,.book .tipbox{padding:20px 18px}
  .act.qz2 .aq{font-size:19.5px}
  .qcard .qt{font-size:20px}
  .qo{font-size:17px;padding:14px 16px;min-height:56px}
  .qopts.ox2 .qo{min-height:88px;font-size:40px}
  .qb{font-size:16px;padding:13px 20px}
  .alist li a{font-size:17px}
  .pnav>a,.pnav>a.sub{font-size:15.5px}
}
@media(min-width:921px){.reader{grid-template-columns:284px minmax(0,1fr)}}
.pnav>a{font-size:17px}
@media(max-width:560px){.jt div,.book .jt div{font-size:11px;letter-spacing:-.02em}.jt i::after,.book .jt i::after{font-size:11px;top:-17px}}

/* ══ 번호·교재 말 없애기 — 카드 격자와 목차 점 ══ */
.ucard,.scard{grid-template-columns:minmax(0,1fr) auto}
.pglist a{grid-template-columns:14px minmax(0,1fr);align-items:center;gap:10px}
.pglist a i{width:9px;height:9px;border-radius:3px;background:var(--line);display:block;transform:rotate(12deg)}
.pglist a.on i{background:var(--peri)}
.pnav>a .t{display:block}
.part h3{font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.03em}
.tc.big h2{margin-top:0}

/* ══ 우리 학교 버튼(헤더) · 학교 고르기 대화상자 · 검색 목록 ══ */
.schbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:100px;border:1.5px solid var(--line);background:var(--card);font:inherit;font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .25s var(--e),border-color .25s var(--e)}
.schbtn i{width:10px;height:10px;border-radius:3px;background:var(--mute-2);transform:rotate(12deg);flex:0 0 auto}
.schbtn.on{border-color:var(--peri);background:var(--peri-3);color:var(--peri-tx)}
.schbtn.on i{background:var(--peri)}
.schbtn:hover{border-color:var(--ink)}
.schdlg{position:fixed;inset:0;margin:auto;border:0;border-radius:var(--r-xl);padding:0;width:min(560px,calc(100vw - 32px));max-height:min(86vh,760px);background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(15,17,23,.28)}
.schdlg::backdrop{background:rgba(15,17,23,.45);backdrop-filter:blur(3px)}
.schdlg-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px 12px}
.schdlg-hd h2{font-size:clamp(20px,2vw,24px);font-weight:900;letter-spacing:-.5px;margin:0}
.schdlg-x{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);font:inherit;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.schdlg-x:hover{background:var(--bg)}
.schdlg-body{padding:0 24px 24px}
.spk-top{display:grid;gap:12px;position:sticky;top:0;background:var(--card);padding-bottom:12px;z-index:1}
.spk-q{width:100%;font:inherit;font-size:17px;font-weight:700;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px 16px;min-height:52px}
.spk-q:focus{outline:none;border-color:var(--peri);background:var(--card)}
.spk-tabs{display:flex;gap:6px;background:var(--bg);border-radius:100px;padding:4px;width:max-content}
.spk-tabs button{font:inherit;font-size:15.5px;font-weight:800;padding:9px 18px;border-radius:100px;border:0;background:transparent;color:var(--mute);cursor:pointer;min-height:40px}
.spk-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.spk-list{display:grid;gap:6px;max-height:min(52vh,440px);overflow:auto;padding:2px}
.spk-it{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;font:inherit;font-size:17px;font-weight:700;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 16px;min-height:52px;cursor:pointer;transition:background .2s var(--e),border-color .2s var(--e)}
.spk-it:hover{border-color:var(--peri);background:var(--peri-3)}
.spk-it.on{background:var(--ink);border-color:var(--ink);color:#fff}
.spk-it .rg{font-size:14px;font-weight:700;color:var(--mute);flex:0 0 auto}
.spk-it.on .rg{color:rgba(255,255,255,.7)}
.spk-none{font-size:16px;font-weight:700;color:var(--mute);padding:20px 6px}
@media(max-width:720px){.schbtn span{max-width:96px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:480px){.schbtn{padding:0 12px 0 10px;font-size:14px;min-height:38px}.schbtn span{max-width:72px}}
@media(max-width:400px){.schbtn{font-size:13.5px;padding:0 10px 0 9px;gap:6px}.schbtn span{max-width:64px}}

/* ══ 모바일 메뉴 (≡ 펼침) ══ */
.ham{background:var(--card);cursor:pointer;font:inherit;position:relative}
.ham s{position:relative;transition:background .2s var(--e),box-shadow .2s var(--e)}
.ham s::before,.ham s::after{content:"";position:absolute;left:0;top:0;width:16px;height:1.8px;background:var(--ink);opacity:0;transition:transform .25s var(--e),opacity .25s var(--e)}
.ham.on s{background:transparent;box-shadow:none}
.ham.on s::before{opacity:1;transform:rotate(45deg)}
.ham.on s::after{opacity:1;transform:rotate(-45deg)}
.mmenu{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:14px;margin:6px 0 10px}
.mmenu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.mmenu li a{display:block;padding:15px 18px;border-radius:var(--r-md);font-size:18px;font-weight:800;color:var(--ink);background:var(--bg)}
.mmenu li a[aria-current]{background:var(--ink);color:#fff}
.mmenu .mm-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mmenu .mm-row .pill{padding:12px 20px;font-size:15.5px}
@media(min-width:1141px){.ham,.mmenu{display:none!important}}
@media(max-width:1140px){.nav .btn-dark{display:none}}
@media(max-width:1140px) and (min-width:481px){.nav .btn-dark{display:inline-flex}}
.schdlg[open]{display:flex;flex-direction:column}
.schdlg .schdlg-body{overflow:auto;min-height:0}

/* ══ 커뮤니티 — 학교 랭킹 v2 ══ */
.pickcard{padding:clamp(22px,2.6vw,34px)}
.pickcard h3{font-size:clamp(22px,2.2vw,28px);font-weight:900;letter-spacing:-.5px;margin-bottom:16px}
.pickcard .spk-list{max-height:420px}
.mycard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:end;background:var(--th);color:var(--th-tx);border-radius:var(--r-xl);padding:clamp(24px,3vw,44px)}
.mycard .lb{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:800;letter-spacing:.14em;color:var(--th-tx)}
.mycard .lb s{width:28px;height:4px;background:currentColor;border-radius:100px;display:block;text-decoration:none}
.mycard h3{font-size:clamp(30px,4vw,56px);font-weight:900;letter-spacing:-.045em;line-height:1.05;margin-top:12px;word-break:keep-all}
.mc-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.mc-stats div{background:rgba(255,255,255,.14);border-radius:var(--r-lg);padding:14px 20px;min-width:118px}
.mc-stats b{display:block;font-size:clamp(26px,2.6vw,38px);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.mc-stats b small{font-size:.5em;font-weight:800;margin-left:2px}
.mc-stats span{display:block;margin-top:6px;font-size:14px;font-weight:700;opacity:.85}
.mc-gap,.mc-mine{margin-top:14px;font-size:16px;font-weight:700;opacity:.92}
.mc-mine{margin-top:6px}
.mc-gap b,.mc-mine b{font-weight:900;color:var(--lime)}
.mc-r{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.mc-r .pill{justify-content:center;font-size:16px;padding:15px 24px}
.mc-r .pill.g{font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.rtabs{display:flex;gap:4px;background:var(--bg);border-radius:100px;padding:4px}
.rtabs button{font:inherit;font-size:15.5px;font-weight:800;padding:9px 18px;border-radius:100px;border:0;background:transparent;color:var(--mute);cursor:pointer;min-height:40px}
.rtabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.pd{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px 20px;text-align:center}
.pd.p1{order:2;background:var(--lime-2);border-color:transparent}
.pd.p2{order:1}.pd.p3{order:3}
.pd .md{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin:0 auto 12px;font-style:normal;font-size:18px;font-weight:900;color:var(--ink)}
.pd .md.g{background:var(--lime)}.pd .md.s{background:#E6E4DC}.pd .md.b{background:#F3D9C4}
.pd h3{font-size:clamp(17px,1.5vw,20px);font-weight:900;letter-spacing:-.4px;line-height:1.3;word-break:keep-all;min-height:2.6em;display:grid;place-items:center}
.pd .pt{margin-top:8px;font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pd .dn{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--mute)}
.pd .up,.rlist .up{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:800;background:var(--peri);color:#fff;border-radius:100px;padding:4px 10px;font-style:normal}
.pd.me{outline:3px solid var(--peri);outline-offset:-3px}
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rlist li{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px;font-size:17px;font-weight:700}
.rlist li.me{background:var(--peri-3);border-color:var(--peri)}
.rlist li.gap{display:block;text-align:center;color:var(--mute);border:0;background:none;padding:2px;letter-spacing:.3em}
.rlist .rk{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
.rlist li.me .rk{background:var(--peri);color:#fff}
.rlist .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlist .nm .up{margin:0 0 0 8px;vertical-align:middle}
.rlist .rg{font-size:14px;font-weight:700;color:var(--mute)}
.rlist .pt{font-weight:900;font-variant-numeric:tabular-nums;min-width:5.5ch;text-align:right}
.rmore{display:flex;justify-content:center;margin-top:16px}
.towho{display:inline-block;margin-left:6px;font-size:14px;font-weight:800;background:var(--peri-3);color:var(--peri-tx);border-radius:100px;padding:4px 10px;vertical-align:middle}
.ansbox .pickb{margin-left:8px;vertical-align:middle;font-size:14px;padding:8px 14px;min-height:36px}
@media(max-width:820px){
  .mycard{grid-template-columns:minmax(0,1fr)}
  .mc-r{flex-direction:row;flex-wrap:wrap}
  .podium{grid-template-columns:1fr;gap:8px}
  .pd{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:14px 16px}
  .pd .md{margin:0}.pd h3{min-height:0;display:block}.pd .pt{margin:0}.pd .dn{grid-column:2;margin:0}
  .pd.p1,.pd.p2,.pd.p3{order:initial}
  .rlist li{grid-template-columns:36px minmax(0,1fr) auto;font-size:16px}
  .rlist .rg{display:none}
  .rtabs{width:100%}.rtabs button{flex:1 1 0;padding:9px 8px}
  .sech:has(.rtabs){flex-wrap:wrap}
}

/* ══ 퀴즈 허브 — 우리 학교 줄 ══ */
.qrank{display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 24px;margin-top:clamp(20px,2.6vw,36px)}
.qrank .qr-l .lb{display:block;font-size:13.5px;font-weight:800;letter-spacing:.14em;color:var(--peri-tx);margin-bottom:4px}
.qrank .qr-l b{font-size:clamp(20px,2vw,26px);font-weight:900;letter-spacing:-.4px}
.qrank .qr-m{display:flex;gap:10px;margin-left:auto}
.qrank .qr-m div{background:var(--bg);border-radius:var(--r-md);padding:10px 16px;min-width:96px}
.qrank .qr-m b{display:block;font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1}
.qrank .qr-m b small{font-size:.55em;margin-left:2px}
.qrank .qr-m span{display:block;margin-top:4px;font-size:13.5px;font-weight:700;color:var(--mute)}
.qrank .pill{padding:13px 22px;font-size:15.5px}
.qrank .pill.k{margin-left:auto;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer}
@media(max-width:640px){.qrank .qr-m{margin-left:0;width:100%}.qrank .qr-m div{flex:1 1 0}.qrank .pill{width:100%;justify-content:center}}

/* ══ 글자 바닥값 v4 — 보조 글자 14.5px 이상 ══ */
.ex,.std,.stdlist li .std{font-size:13.5px}
.obadge,.forg .flb,.empty p.lb,.dots span,.mybar .lb,.ucard .ur span{font-size:14.5px}
.tl div span,.card .cno,.ucard .us,.okick,.mc-stats span,.pd .dn,.rlist .rg,.spk-it .rg,.towho,.fcap .fk,.fk,.fcard .tx small,.ccard .cn,.book .more .mh,.qrank .qr-m span{font-size:14.5px}
p.bl,.btx .bl,.h5t .bl,.dc .bl,.ph2 .bl{font-size:14.5px}
.hclock,.htemp,.hhp{font-size:14px}
.htl span{font-size:13px}
.stdd p{font-size:15.5px}
.alist li .k{font-size:15px}
/* 바닥값 v4 — 더 구체적인 예전 규칙을 이기도록 */
.flat .ucard .ut .us{font-size:14.5px}
.card.qcard .qk{font-size:14.5px;opacity:.9}
.card.qcard .qd{font-size:14.5px}
.phead.th.rd .lb .sk{font-size:14.5px}
.phead.th.rd .pstats div>span{font-size:15px}
.sech h2 span,.sech summary h2 span,summary.sech h2 span{font-size:15px!important}
.jt div,.jt div span{font-size:13.5px}
.htemp b small{font-size:13px}
.main .empty p.lb,.empty p.lb{font-size:14.5px}
nav.dots a span{font-size:14px}
.qsch label{font-size:14.5px}
.figbox .cp small{font-size:14.5px}
.simscale,.simscale span{font-size:14.5px}
.hclock,.htemp,.hhp,.hhp em,.hlv{font-size:14.5px}
.htl span{font-size:13.5px}
.tbl thead th,.book .tbl thead th{font-size:15px}
.stdd p{font-size:15.5px}
.qrank .qr-l .lb{font-size:14.5px}
.ex{font-size:13.5px}
@media(max-width:560px){.jt div,.jt div span,.book .jt div{font-size:11px}}

/* ── 그림 카드: 온실가스 · 탄소 카드 그림 줄 · 카드 게임 그림 (픽토그램은 흰 카드 위 — vec.py hole #FFFFFF) ──
   그림 칸은 높이를 px 로 고정하고 그림은 max-width/max-height 로 맞춘다(세로로 긴 그림이 칸을 늘리지 않게) */
.book .gases{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.book .gases li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px}
.book .gases .gim{display:flex;align-items:center;justify-content:center;height:124px;margin-bottom:4px}
.book .gases .gim img{max-width:100%;max-height:100%;width:auto;height:auto}
.book .gases .gf{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;background:var(--acc-bg,#ECEBFF);color:var(--acc-tx,#3D37D9);font-size:32px;font-weight:900;letter-spacing:-.02em}
.book .gases b{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:20px;font-weight:900;letter-spacing:-.4px;color:var(--ink);word-break:keep-all}
.book .gases .gfm{font-size:14.5px;font-weight:800;letter-spacing:0;padding:3px 10px;border-radius:100px;background:var(--acc-bg,#ECEBFF);color:var(--acc-tx,#3D37D9)}
.book .gases p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2);font-weight:500;word-break:keep-all}
.book .pics{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,172px));justify-content:center;gap:12px}
.book .pics li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 10px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.book .pics .pim{display:flex;align-items:center;justify-content:center;width:100%;height:124px}
.book .pics .pim img{max-width:100%;max-height:100%;width:auto;height:auto}
.book .pics .ptag{font-size:14.5px;font-weight:800;padding:3px 11px;border-radius:100px;background:#E3F5E8;color:#1E7A3E;margin-top:2px}
.book .pics .no .ptag{background:#FFE9E1;color:#B5401F}
.book .pics b{font-size:17px;font-weight:800;line-height:1.4;letter-spacing:-.3px;word-break:keep-all;color:var(--ink)}
@media(max-width:760px){.book .gases{grid-template-columns:repeat(2,minmax(0,1fr))}.book .pics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.book .gases .gim,.book .pics .pim{height:104px}.book .gases .gf{width:92px;height:92px;font-size:26px}
  .book .gases b{font-size:18px}.book .gases p{font-size:16px}.book .gases li{padding:14px 12px 16px}}
.ccard .cimg{display:none}
.ccard.hasimg{justify-content:flex-start;padding:36px 16px 16px;gap:12px}
.ccard.hasimg .cimg{display:flex;align-items:center;justify-content:center;height:clamp(120px,15vw,160px);flex:0 0 auto}
.ccard.hasimg .cimg img{max-width:100%;max-height:100%;width:auto;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none}
.ccard.hasimg p{font-size:clamp(17px,1.55vw,20px);line-height:1.4;margin:auto 0}
@media(max-width:700px){.ccard.hasimg .cimg{height:118px}}

/* 푸터 도메인 표기 — 로고 옆 보조 표기라 작게 */
.fwm{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.04em;line-height:1}

/* 우리 학교 카드 — 버튼 없이 한 칸 (학교는 머리의 학교 버튼으로 바꾼다) */
.mycard{grid-template-columns:minmax(0,1fr)}

/* ── 특보 화면 전환 (시뮬레이터에서 주의보·경보에 들어설 때) — 글자는 카드 위·아래 중 넓은 칸(--h)에 맞춘다 ── */
.alertfx{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:0;transition:opacity .35s var(--e),background-color .35s var(--e);overflow:hidden}
.alertfx.in{opacity:1}
.alertfx.l1{background:#FFC83D;color:#1A1400}
.alertfx.l2{background:#E8452B;color:#fff}
.alertfx .afx-in{position:absolute;left:16px;right:16px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(4px,1vh,12px)}
.alertfx .afx-art{height:calc(var(--h) * .34);max-height:240px;aspect-ratio:3/2}
.alertfx .afx-art img{width:100%;height:100%;object-fit:contain;display:block;border-radius:24px;background:#FBFAF6;padding:8px}
.alertfx .afx-nm{margin:0;font-size:min(14vw,150px,calc(var(--h) * .3));font-weight:900;letter-spacing:-.06em;line-height:1;word-break:keep-all}
.alertfx .afx-v{margin:0;font-size:min(5vw,56px,calc(var(--h) * .13));font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.alertfx .afx-tip{margin:0;font-size:clamp(16px,1.8vw,24px);font-weight:800;line-height:1.45;max-width:760px;word-break:keep-all}
.alertfx[data-fit="m"] .afx-tip{display:none}
.alertfx[data-fit="s"] .afx-tip,.alertfx[data-fit="s"] .afx-art{display:none}
.alertfx[data-fit="s"] .afx-nm{font-size:min(11vw,calc(var(--h) * .5))}
.alertfx[data-fit="s"] .afx-v{font-size:min(6vw,calc(var(--h) * .22))}
.alertfx .afx-rings{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1}
.alertfx .afx-rings i{position:absolute;left:-40vmax;top:-40vmax;width:80vmax;height:80vmax;border-radius:50%;border:clamp(10px,2vw,24px) solid rgba(255,255,255,.22);transform:scale(.1);opacity:0}
.alertfx.in:not(.still) .afx-rings i{animation:afx-ring 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.alertfx.in:not(.still) .afx-rings i:nth-child(2){animation-delay:.8s}
.alertfx.in:not(.still) .afx-rings i:nth-child(3){animation-delay:1.6s}
.alertfx.in:not(.still) .afx-nm{animation:afx-pop .5s var(--e)}
.alertfx.in:not(.still) .afx-art{animation:afx-pop .6s var(--e)}
.alertfx.l2.in:not(.still){animation:afx-flash 1s steps(1) 2}
@keyframes afx-ring{0%{transform:scale(.1);opacity:.9}100%{transform:scale(1);opacity:0}}
@keyframes afx-pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes afx-flash{50%{background:#B8281A}}
.sim.afx-top{position:relative;z-index:115;box-shadow:0 24px 60px rgba(0,0,0,.28)}
@media(prefers-reduced-motion:reduce){.alertfx .afx-rings i,.alertfx .afx-nm,.alertfx .afx-art{animation:none!important}}

/* ── 3. 폭염의 하루 v2 — 하늘 배경 + 가이드북 벡터 그림 카드 + 열기 ── */
.hstage{aspect-ratio:16/9;background:#1E2446;isolation:isolate}
.hstage .hbg{position:absolute;inset:0;z-index:0;transition:background .3s linear}
.hstage .hheat{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 110%,rgba(255,90,54,.85),rgba(255,90,54,.35) 45%,rgba(255,90,54,0) 75%),linear-gradient(0deg,rgba(255,120,60,.35),rgba(255,120,60,0) 60%)}
.hstage[data-l="2"] .hheat{background:radial-gradient(120% 95% at 50% 110%,rgba(232,69,43,.95),rgba(232,69,43,.5) 50%,rgba(232,69,43,.1) 80%),linear-gradient(0deg,rgba(232,69,43,.45),rgba(232,69,43,.05) 70%)}
.hstage .hsky{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hstage .hsun,.hstage .hmoon{position:absolute;z-index:1;width:clamp(56px,9%,110px);height:auto;transform:translate(-50%,-50%) scale(var(--s,1));transition:transform .4s var(--e)}
.hstage .hmoon{top:18%;width:clamp(40px,6%,72px);opacity:0}
.hstage .hsun g{transform-origin:center;animation:h-sunspin 40s linear infinite}
@keyframes h-sunspin{to{transform:rotate(360deg)}}
.hstage .hart{position:absolute;left:50%;bottom:5%;width:min(58%,640px);aspect-ratio:3/2;transform:translateX(-50%);z-index:2}
.hstage .ha{position:absolute;inset:0;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .6s var(--e),transform .6s var(--e);
  background:#FBFAF6;border-radius:clamp(16px,2.4vw,28px);padding:clamp(6px,1.2vw,14px);box-shadow:0 18px 40px rgba(15,17,23,.22)}
.hstage .ha.on{opacity:1;transform:none}
.hstage .ha img{width:100%;height:100%;object-fit:contain;display:block}
.hstage.night .ha{filter:brightness(.72) saturate(.85)}
.hstage .hwaves{position:absolute;inset:auto 0 0 0;height:60%;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s}
.hstage[data-l="1"] .hwaves,.hstage[data-l="2"] .hwaves{opacity:1}
.hstage .hwaves i{position:absolute;bottom:6%;width:14px;height:60px;border-radius:8px;border:3px solid rgba(255,190,120,.9);border-top:0;border-bottom:0;
  animation:h-wave 2.4s ease-in infinite}
.hstage .hwaves i:nth-child(1){left:8%}.hstage .hwaves i:nth-child(2){left:20%;animation-delay:.5s}.hstage .hwaves i:nth-child(3){left:78%;animation-delay:1s}
.hstage .hwaves i:nth-child(4){left:90%;animation-delay:1.5s}.hstage .hwaves i:nth-child(5){left:14%;animation-delay:1.9s}
@keyframes h-wave{0%{transform:translateY(0) scaleY(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-160%) scaleY(1.1);opacity:0}}
.hstage .hbig{position:absolute;left:0;right:0;top:6%;z-index:6;margin:0;text-align:center;font-size:clamp(40px,7vw,96px);font-weight:900;letter-spacing:-.06em;
  color:#fff;text-shadow:0 4px 0 rgba(122,31,20,.55);opacity:0;pointer-events:none}
.hstage .hbig.go{animation:h-big 1.8s var(--e) forwards}
@keyframes h-big{0%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1.08)}30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.02)}}
.hstage .hud{z-index:5}
@media(max-width:600px){.hstage{aspect-ratio:4/5}.hstage .hart{width:88%;bottom:3%}.hstage .hsun{width:60px}.hstage .hbig{top:35%;font-size:clamp(36px,12vw,60px)}.hstage .hmoon{top:42%}}
@media(prefers-reduced-motion:reduce){.hstage .hsun g,.hstage .hwaves i{animation:none}}
[data-motion="reduced"] .hstage .hsun g,[data-motion="off"] .hstage .hsun g,[data-motion="reduced"] .hstage .hwaves i,[data-motion="off"] .hstage .hwaves i{animation:none}

/* 폭염의 하루 — 왼쪽 위 정보 한 장 (.hdcard — 홈의 .hcard 와 이름이 겹치지 않게): 시각·특보 / 체감온도 게이지 / 컨디션 게이지 */
.hstage .hud{left:clamp(10px,1.4vw,18px);top:clamp(10px,1.4vw,18px);right:auto;display:block}
.hstage .hdcard{width:clamp(240px,26vw,300px);background:rgba(255,255,255,.94);border-radius:16px;padding:12px 14px;box-shadow:0 10px 26px rgba(15,17,23,.16);display:grid;gap:8px}
.hstage .hrow{display:grid;grid-template-columns:62px minmax(0,1fr) 58px;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--ink-2)}
.hstage .hrow.htop{grid-template-columns:auto 1fr;gap:10px}
.hstage .hrow .ht{font-size:22px;font-weight:900;letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.hstage .hrow .hlv{justify-self:end;margin:0;font-size:14px;font-weight:800;padding:4px 10px;border-radius:100px;background:var(--bg);color:var(--mute)}
.hstage .hlv[data-l="1"]{background:#FFE9A8;color:#6B4B00}.hstage .hlv[data-l="2"]{background:#F8C9C2;color:#7A1F14}.hstage .hlv[data-l="n"]{background:#DDE1F4;color:#2F3A7A}
.hstage .hk{font-size:14px;font-weight:800;color:var(--mute);white-space:nowrap}
.hstage .hg{display:block;height:10px;background:#ECEAE2;border-radius:100px;overflow:hidden;width:auto;margin:0}
.hstage .hg b{display:block;height:100%;border-radius:100px;transition:width .4s var(--e)}
.hstage .htemp .hg b{background:linear-gradient(90deg,#FFD24A,#FF8A3D 60%,#E8452B)}
.hstage .hhp .hg b{background:#3E8E41}
.hstage .hrow .hv{justify-self:end;font-size:18px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.4px;line-height:1}
.hstage .hrow .hv small{font-size:12px;margin-left:1px}
.hstage .hrow em{justify-self:end;font-style:normal;font-size:18px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;margin:0}
.hstage[data-l="2"] .hrow .hv{color:#B5401F}
@media(max-width:600px){.hstage .hdcard{width:auto;min-width:0;padding:10px 12px}.hstage .hud{right:clamp(10px,1.4vw,18px)}}

/* 태풍 만들기 — 재생·다시 보기 버튼을 무대 속 지구 친구의 말풍선으로 */
.fl-typhoon .fbig{left:13.5%;top:auto;bottom:44%;transform:none;transform-origin:0 100%;gap:9px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:20px;padding:10px 20px 10px 11px;box-shadow:0 5px 0 rgba(15,17,23,.14);font-size:clamp(15px,1.9vw,21px);transition:scale .25s var(--e)}
.fl-typhoon .fbig::after{content:"";position:absolute;left:22px;bottom:-10px;width:15px;height:15px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);border-bottom-right-radius:3px;transform:rotate(45deg)}
.fl-typhoon .fbig svg{flex:none;width:1.65em;height:1.65em;padding:.36em .3em .36em .42em;border-radius:50%;background:var(--lime);color:var(--ink);animation:ty-say 2s ease-out infinite}
.fl-typhoon .fbig span{font-size:inherit;letter-spacing:-.02em}
.fl-typhoon .fbig:hover{transform:none;background:#fff;scale:1.06}
.fl-typhoon .fbig:focus-visible{outline:3px solid var(--peri);outline-offset:3px}
@keyframes ty-say{0%{box-shadow:0 0 0 0 rgba(208,240,64,.9)}70%,100%{box-shadow:0 0 0 9px rgba(208,240,64,0)}}   /* 아이콘만 고동 — 버튼 자리는 그대로(누르기 쉽게) */
@media(max-width:600px){.fl-typhoon .fbig{left:12%;bottom:43%;border-width:2px;padding:6px 12px 6px 7px;font-size:13px;border-radius:15px}.fl-typhoon .fbig::after{left:16px;bottom:-8px;width:11px;height:11px;border-width:0 2px 2px 0}}
@media(prefers-reduced-motion:reduce){.fl-typhoon .fbig svg{animation:none}}
[data-motion="reduced"] .fl-typhoon .fbig svg,[data-motion="off"] .fl-typhoon .fbig svg{animation:none}

/* ── 특보 시뮬레이터 — 단순하게: 무엇을 재는지 · 큰 숫자와 특보 · 굵은 막대 하나 · 기준 한 줄 ── */
.sim{padding:22px 24px}
.simhd{display:flex;align-items:flex-end;justify-content:flex-start;gap:12px 22px;flex-wrap:wrap}
.simq{margin:0 0 2px;font-size:15px;font-weight:700;color:var(--mute);word-break:keep-all}
.sim .simv{display:block;min-width:0;font-size:clamp(44px,6vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.sim .simv small{font-size:.42em;font-weight:800;margin-left:3px;color:var(--mute);letter-spacing:0}
.sim .simlv{font-size:15px;padding:9px 16px}
.simtrack{height:52px;margin-top:14px}
.simzones{height:16px}
.simtrack input,.simtrack input::-webkit-slider-runnable-track,.simtrack input::-moz-range-track{height:52px}
.simtrack input::-webkit-slider-thumb{width:34px;height:34px;margin-top:9px;border-width:5px}
.simtrack input::-moz-range-thumb{width:24px;height:24px;border-width:5px}
.simtrack input:focus{outline:none}
.simtrack input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--peri-tx),0 2px 10px rgba(0,0,0,.28)}
.simtrack input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--peri-tx),0 2px 10px rgba(0,0,0,.28)}
.simref{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 0;font-size:14px;font-weight:700;color:var(--mute)}
.simref span{display:inline-flex;align-items:center;gap:7px}
.simref span::before{content:"";width:10px;height:10px;border-radius:50%}
.simref .w::before{background:#FFC83D}.simref .e::before{background:#E8452B}
.sim .simtip{margin-top:10px;min-height:0}
.book .simq{font-size:16px}.book .simref{font-size:15px}
@media(max-width:480px){.sim{padding:18px 16px}.sim .simv{font-size:44px}}
@media print{.sim .simtrack{display:none!important}}

/* ── 스크롤 효과 없음 — 카드·제목·차트·숫자는 스크롤과 상관없이 처음부터 그대로 보인다 ── */
.rv,.rv.in{opacity:1!important;transform:none!important;transition:none!important}
.band .bw .ln>span{transform:none;letter-spacing:inherit;transition:none}
.jt i{transform:none;transition:none}.jt i::after{opacity:1;transition:none}

/* ── 탄소 카드 퀴즈 — 양쪽 칸 머리가 곧 버튼 (가운데 아래 작은 ←·→ 버튼과 카드 번호·맞힌 수는 없앰) ── */
.czone{display:flex;flex-direction:column;gap:10px;border:2px solid transparent;cursor:pointer;padding:12px}
.czone>b{display:none}
.czhd{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:10px 14px;border:0;border-radius:14px;font:inherit;font-size:clamp(16px,1.5vw,19px);font-weight:900;letter-spacing:-.3px;color:var(--ink);cursor:pointer;word-break:keep-all;transition:transform .2s var(--e),filter .2s var(--e),opacity .2s var(--e)}
.czhd i{font-style:normal;font-size:1.3em;line-height:1}
.czone.less .czhd{background:var(--lime)}
.czone.more .czhd{background:#F7B3A8}
.czone:hover .czhd:not(:disabled){filter:brightness(.95);transform:translateY(-1px)}
.czhd:disabled{opacity:.5;cursor:default}
.czhd:focus-visible{outline:3px solid var(--peri-tx);outline-offset:3px}
.czone ul{margin:0}
.cboard[data-over="less"] .czone.less,.cboard[data-over="more"] .czone.more{border-color:var(--ink);transform:scale(1.02)}
.cbtn[hidden]{display:none!important}
.fl-carbon .cbtn{margin-top:14px}
@media(max-width:700px){.czone{min-height:0}.czhd{min-height:54px;font-size:15px;gap:6px}}

/* 칸에 쌓이는 카드 — 원래 카드 모양 그대로 작게, 겹쳐 쌓기 */
.czone ul{list-style:none;margin:0;padding:0 0 calc((var(--n,1) - 1) * 16px);display:grid;justify-items:center;gap:0;font-size:inherit}
.czone ul li.cmini{grid-area:1/1;width:min(100%,150px);aspect-ratio:4/5;background:#fff;border:0;border-radius:14px;padding:10px 8px 12px;
  display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 6px 16px rgba(15,17,23,.13);
  transform:translateY(calc(var(--k,0) * 16px)) rotate(var(--r,0deg));animation:none}
.cmini .cmimg{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.cmini .cmimg img{max-width:100%;max-height:100%;width:auto;height:auto;pointer-events:none}
.cmini p{margin:0;font-size:12.5px;font-weight:800;line-height:1.35;text-align:center;word-break:keep-all;letter-spacing:-.3px}
.cmini.miss{box-shadow:0 0 0 2.5px var(--warn),0 6px 16px rgba(15,17,23,.13)}
.cmini.new{animation:cm-in .45s var(--e)}
@keyframes cm-in{from{opacity:0;transform:translateY(calc(var(--k,0) * 16px - 34px)) rotate(var(--r,0deg)) scale(.92)}}
[data-motion="reduced"] .cmini.new,[data-motion="off"] .cmini.new{animation:none}
@media(max-width:700px){.czone ul li.cmini{width:min(100%,132px)}.czone ul{padding-bottom:calc((var(--n,1) - 1) * 12px)}.czone ul li.cmini{transform:translateY(calc(var(--k,0) * 12px)) rotate(var(--r,0deg))}}

.czone ul li.cmini{align-self:start;height:auto;min-height:0;overflow:hidden}   /* 그림이 커도 카드 크기는 모두 같게 */
.cmini .cmimg{flex:none;height:64%}
.cmini p{margin-top:auto}
.cmini.noimg{justify-content:center}.cmini.noimg p{margin:0;font-size:14px}
@media(max-width:700px){.fl-carbon .cboard{grid-template-columns:1fr 1fr;gap:10px}.fl-carbon .czone{padding:10px}.fl-carbon .czhd{min-height:52px;font-size:14.5px;padding:8px 6px}}

/* 탄소 카드 퀴즈 결과 — 점수와 칭호를 크게 */
.cend b{font-size:clamp(56px,7vw,88px);font-weight:900;letter-spacing:-.04em;line-height:1}
.cend .ctitle{display:inline-block;margin-top:14px;padding:10px 20px;border-radius:100px;background:var(--lime);color:var(--ink);font-size:clamp(22px,2.6vw,32px);font-weight:900;letter-spacing:-.04em;line-height:1.2;word-break:keep-all}
.cend span{display:none}

/* ══ 체험학습 신청서 (experience/apply) ══ */
.phead.aph{padding-block:clamp(28px,3.2vw,48px)}
.apf{margin-top:clamp(14px,1.8vw,22px)}
.apf fieldset{border:0;margin:0;padding:0;min-width:0}
.apg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(12px,1.6vw,20px);align-items:start}
@media(max-width:900px){.apg{grid-template-columns:minmax(0,1fr)}}
.apc{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,36px)}
.apl{display:flex;flex-direction:column;gap:clamp(24px,2.6vw,34px)}
.apf legend{float:left;width:100%}
.apf legend+*{clear:both}
.apfld>label,.apf legend{display:block;font-size:clamp(19px,1.6vw,23px);font-weight:900;letter-spacing:-.03em;margin-bottom:12px;padding:0}
#ap-org{display:block;width:100%;font:inherit;font-size:clamp(18px,1.5vw,21px);font-weight:700;color:var(--ink);background:var(--bg);
  border:0;border-radius:var(--r-md);padding:16px 18px;min-height:62px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,background .2s}
#ap-org:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2.5px var(--th-guide)}
.apnum{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:var(--r-md);padding:8px;transition:box-shadow .2s}
.apnum:focus-within{box-shadow:inset 0 0 0 2.5px var(--th-guide)}
.apstep{flex:0 0 auto;width:54px;height:54px;border-radius:12px;border:0;background:#fff;color:var(--ink);font:inherit;font-size:28px;font-weight:800;
  line-height:1;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s,transform .2s}
.apstep:hover{background:var(--lime)}
.apstep:active{transform:scale(.94)}
.apstep:disabled{opacity:.35;cursor:default;background:#fff;transform:none}
.apmid{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:4px}
#ap-num{width:3.1ch;min-width:0;text-align:right;font:inherit;font-size:clamp(30px,2.8vw,40px);font-weight:900;letter-spacing:-.03em;color:var(--ink);
  border:0;background:transparent;padding:0;min-height:54px}
#ap-num:focus{outline:none}
#ap-num::placeholder{color:#8D919B}
.apunit{font-size:20px;font-weight:800}
.calh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.calh b{font-size:clamp(20px,1.8vw,26px);font-weight:900;letter-spacing:-.03em}
.calnav{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:24px;
  font-weight:800;line-height:1;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.calnav:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.calnav:disabled{opacity:.3;cursor:default;background:#fff;color:var(--ink);border-color:var(--line)}
.calw,.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calw span{text-align:center;font-size:14.5px;font-weight:800;color:var(--mute);padding:4px 0 8px}
.calw span:first-child{color:#B42318}.calw span:last-child{color:#2457B8}
.cd{height:clamp(44px,4.2vw,56px);border-radius:14px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:clamp(16px,1.3vw,19px);
  font-weight:800;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.cd:hover{background:var(--bg)}
.cd:active{transform:scale(.94)}
.cd:disabled{color:#A9ACB4;cursor:default;background:transparent;transform:none;font-weight:600}
.cd[aria-pressed="true"]{background:var(--th-guide);color:#fff}
.apslot{margin-top:clamp(20px,2.2vw,28px)!important;padding-top:clamp(20px,2.2vw,28px)!important;border-top:1.5px dashed var(--line)!important}
.apslot:not([hidden]){animation:ap-in .35s var(--e)}
@keyframes ap-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.slot{position:relative;display:block;cursor:pointer}
.slot input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.slot span{display:flex;align-items:center;justify-content:center;min-height:70px;border-radius:var(--r-md);background:var(--bg);
  font-size:clamp(18px,1.6vw,22px);font-weight:900;letter-spacing:-.02em;box-shadow:inset 0 0 0 2px transparent;transition:background .2s,box-shadow .2s}
.slot:hover span{box-shadow:inset 0 0 0 2px var(--ink)}
.slot input:checked+span{background:var(--lime);box-shadow:inset 0 0 0 2.5px var(--ink)}
.slot input:focus-visible+span{outline:3px solid var(--peri-tx);outline-offset:3px}
.aperr{margin-top:10px;font-size:15.5px;font-weight:800;color:#B42318}
.apfld.bad #ap-org,.apfld.bad .apnum{box-shadow:inset 0 0 0 2.5px #B42318}
.apgo{display:flex;justify-content:flex-end;margin-top:clamp(14px,1.8vw,22px)}
.apbtn{border:0;font:inherit;font-size:19px;font-weight:800;cursor:pointer;justify-content:center;min-width:min(100%,280px);padding:22px 40px}
.apbtn.done,.apbtn.done:hover{background:var(--lime);color:var(--ink);transform:none;cursor:default}
@media(max-width:900px){.apbtn{width:100%}}

/* 폭염의 하루 — 무대 가운데 「시작」 버튼 (아래 조작 줄은 끝날 때만) */
.hstage .hgo{position:absolute;left:50%;top:50%;z-index:7;transform:translate(-50%,-50%);width:clamp(104px,13vw,150px);aspect-ratio:1/1;border-radius:50%;
  border:3px solid var(--ink);background:var(--lime);color:var(--ink);font:inherit;font-size:clamp(24px,2.5vw,32px);font-weight:900;letter-spacing:-.03em;
  cursor:pointer;animation:hgo-pulse 1.8s ease-out infinite;transition:transform .2s var(--e)}
.hstage .hgo:hover{transform:translate(-50%,-50%) scale(1.06)}
.hstage .hgo:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hstage .hgo[hidden]{display:none}
@keyframes hgo-pulse{0%{box-shadow:0 0 0 0 rgba(208,240,64,.65)}100%{box-shadow:0 0 0 24px rgba(208,240,64,0)}}
@media (prefers-reduced-motion:reduce){.hstage .hgo{animation:none}}
.fctl:empty{display:none}
[data-motion="reduced"] .hstage .hgo{animation:none}

/* 폭염의 하루 — 틀릴 때마다 무대가 나빠짐 (data-hurt 1~4, 쌓인 만큼 유지) */
.hstage .hhurt{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .8s var(--e);
  background:radial-gradient(ellipse 75% 70% at 50% 55%,rgba(160,24,12,0) 35%,rgba(160,24,12,.6) 100%)}
.hstage[data-hurt="1"] .hhurt{opacity:.5}
.hstage[data-hurt="2"] .hhurt{opacity:.75}
.hstage[data-hurt="3"] .hhurt{opacity:.9;animation:h-beat3 1.2s ease-in-out infinite}
.hstage[data-hurt="4"] .hhurt{opacity:1;animation:h-beat4 .85s ease-in-out infinite;
  background:radial-gradient(ellipse 70% 65% at 50% 55%,rgba(120,12,6,.18) 20%,rgba(120,12,6,.8) 100%)}
@keyframes h-beat3{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes h-beat4{0%,100%{opacity:.85}50%{opacity:1}}
.hstage[data-hurt="2"] .hwaves,.hstage[data-hurt="3"] .hwaves,.hstage[data-hurt="4"] .hwaves{opacity:1}
.hstage[data-hurt="2"] .hart{filter:blur(.6px) saturate(1.2)}
.hstage[data-hurt="3"] .hart{filter:blur(1.2px) saturate(1.3);animation:h-dizzy 3s ease-in-out infinite}
.hstage[data-hurt="4"] .hart{filter:blur(2px) saturate(1.4) brightness(.88);animation:h-dizzy 2s ease-in-out infinite}
@keyframes h-dizzy{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-1.3deg)}75%{transform:translateX(-50%) rotate(1.3deg)}}
.hstage .hbig.bad{color:#FFE1DA;text-shadow:0 4px 0 rgba(122,20,12,.75)}
.fl-heat .fq2.past .fq,.fl-heat .fq2.past .fopts{opacity:.55}
[data-motion="reduced"] .hstage .hhurt,[data-motion="reduced"] .hstage .hart{animation:none}
@media (prefers-reduced-motion:reduce){.hstage .hhurt,.hstage .hart{animation:none}}

/* ══ 현장 견학 프로그램 (experience/tour) ══ */
.tplist{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.tpc{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,2.6vw,36px);scroll-margin-top:90px}
.tph{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,1.8vw,22px)}
.tph h3{font-size:clamp(22px,2.2vw,32px);font-weight:900;letter-spacing:-.04em;line-height:1.25;word-break:keep-all}
.tpart{flex:0 0 auto;width:clamp(88px,10vw,140px);aspect-ratio:3/2;border-radius:var(--r-md);background:var(--bg);overflow:hidden;display:grid;place-items:center}
.tpart img{width:100%;height:100%;object-fit:contain;display:block}
.tpinfo{display:grid;gap:8px;margin:0}
.tpinfo>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:baseline}
.tpinfo dt{font-size:15px;font-weight:800;color:var(--ink);background:var(--lime);border-radius:100px;padding:5px 0;text-align:center}
.tpinfo dd{margin:0;font-size:clamp(16px,1.25vw,18px);font-weight:600;line-height:1.6;word-break:keep-all;color:var(--ink-2)}
.tpinfo dd a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.tpsteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(16px,2vw,24px)}
.tpsteps.one{grid-template-columns:minmax(0,1fr)}
.tps{background:var(--bg);border-radius:var(--r-lg);padding:clamp(16px,1.8vw,24px)}
.tps>b{display:inline-block;font-size:14.5px;font-weight:800;color:#fff;background:var(--th-guide);border-radius:100px;padding:5px 12px}
.tps h4{margin-top:12px;font-size:clamp(17px,1.4vw,20px);font-weight:900;letter-spacing:-.03em;line-height:1.4;word-break:keep-all}
.tps ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.tps li{position:relative;padding-left:16px;font-size:16px;font-weight:600;line-height:1.55;word-break:keep-all}
.tps li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--th-guide)}
.tpask{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,2.6vw,36px)}
.tpnote{margin-top:16px;font-size:15.5px;font-weight:700;color:var(--mute)}
.tpgo{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
@media(max-width:760px){
  .tpsteps{grid-template-columns:minmax(0,1fr)}
  .tpinfo>div{grid-template-columns:minmax(0,1fr);gap:6px}
  .tpinfo dt{justify-self:start;padding:4px 14px}
  .tph{align-items:flex-start}
}
.tpinfo dd a{display:inline-flex;align-items:center;min-height:32px}

/* 현장 견학 — 프로그램 카드 2개씩 한 줄 · 카드마다 오른쪽 아래 「신청하기」 */
.tplist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);align-items:stretch}
.tpc{display:flex;flex-direction:column}
.tph h3{font-size:clamp(20px,1.8vw,27px)}
.tpc .tpsteps{grid-template-columns:minmax(0,1fr)}
.tpact{margin-top:auto;padding-top:clamp(18px,2vw,24px);display:flex;justify-content:flex-end}
.tpbtn{padding:15px 28px;font-size:16.5px}
@media(max-width:900px){.tplist{grid-template-columns:minmax(0,1fr)}}
/* 신청서 — 프로그램 고르기 */
.progs{display:grid;gap:8px}
.prog{position:relative;display:block;cursor:pointer}
.prog input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.prog span{display:flex;align-items:center;min-height:52px;padding:10px 16px;border-radius:var(--r-md);background:var(--bg);
  font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.35;word-break:keep-all;box-shadow:inset 0 0 0 2px transparent;transition:background .2s,box-shadow .2s}
.prog:hover span{box-shadow:inset 0 0 0 2px var(--ink)}
.prog input:checked+span{background:var(--lime);box-shadow:inset 0 0 0 2.5px var(--ink)}
.prog input:focus-visible+span{outline:3px solid var(--peri-tx);outline-offset:3px}
.approg.bad .progs{border-radius:var(--r-md);box-shadow:0 0 0 2.5px #B42318}

/* 훈련 상황 배경이 그림 파일일 때 */
.fcard .bg img,.fscene .bg img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* 2차 그래픽 — 훈련 상황 그림, 원칙 카드 그림, 랭킹 메달 */
.fscene.fpic{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fscene.fpic .bg{aspect-ratio:3/2;max-height:none;background:var(--bg);padding:12px}
.fscene.fpic .bg img{object-fit:contain;object-position:center}
@media(max-width:600px){.fscene.fpic{grid-template-columns:1fr}}
.card .cim{display:flex;align-items:center;justify-content:center;height:140px;margin:0 0 16px}
.card .cim img{max-width:100%;max-height:100%;width:auto;height:auto}
.qo.hasim .l{display:flex;align-items:center;gap:14px}
.qo .oim{flex:none;display:flex;align-items:center;justify-content:center;width:88px;height:70px;background:#fff;border-radius:10px;padding:4px}
.qo .oim img{max-width:100%;max-height:100%;width:auto;height:auto}
.pd .md.mi{position:relative;width:64px;height:auto;background:none;border-radius:0;display:block}
.pd .md.mi img{display:block;width:100%;height:auto}
.pd .md.mi b{position:absolute;left:0;right:0;top:72.8%;transform:translateY(-50%);text-align:center;font-size:19px;font-weight:900;line-height:1;color:var(--ink)}
@media(max-width:600px){.pd .md.mi{width:40px}.pd .md.mi b{font-size:15px}}

/* 움직임 점검 — 폭염의 하루 해는 제자리에서 돌고, 태풍 만들기 5단계 해는 커진 채로 돈다 */
.hstage .hsun g{transform-box:view-box;transform-origin:0 0}
@keyframes t-spin12{from{transform:scale(1.2)}to{transform:scale(1.2) rotate(360deg)}}
.fstage[data-step="5"] .ty-sun{animation:t-spin12 48s linear infinite}

/* UX 정리 — 헤더 넘침(로고 두 줄), 누르는 영역, 참여기관 링크, 퀴즈 세트 색, 초기화 확인, 견학 신청 접수 */
.nav .logo b .l2{display:inline}
@media (max-width:1360px){.nav .logo b{line-height:1.22}.nav .logo b .l2{display:block}}
@media (min-width:1141px) and (max-width:1260px){.nav .search{width:min(230px,15vw)}}
.fnav a{display:inline-flex;align-items:center;min-height:40px}
.crumb a{display:inline-flex;align-items:center;min-height:32px}
.fdots button{width:36px;height:36px}
.orgs li a{color:inherit;text-decoration:none}
.orgs li:has(a):hover{background:rgba(255,255,255,.2)}
.qcard.th-guide:nth-child(1){background:var(--peri);color:#fff;border-color:transparent}
.qcard.th-guide:nth-child(2){background:var(--lime);color:var(--ink);border-color:transparent}
.tb.warn{background:#FFE9E1;color:#B5401F;box-shadow:inset 0 0 0 1.5px #F3B9A6}
.phead .xtour{margin-left:8px}
.apgo{flex-wrap:wrap}
.apfail{flex:0 0 100%;margin:12px 0 0;text-align:right;word-break:keep-all}
@media (max-width:900px){.apfail{text-align:left}}
.apdone{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);margin-top:12px}
.apdone h2{font-size:clamp(24px,2.6vw,34px);font-weight:900;letter-spacing:-.04em;outline:none}
.apdone dl{display:grid;gap:10px;margin:22px 0 0}
.apdone dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.apdone dt{font-weight:700;color:var(--mute)}
.apdone dd{margin:0;font-weight:800;word-break:keep-all}
.apdone .apgo{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;margin-top:24px}
.podium[hidden]{display:none}
@media (min-width:821px){.podium[data-n="1"]{grid-template-columns:minmax(0,1fr)}.podium[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* UX 2차 — 누르는 영역·작은 글자, 퀴즈 바로 확인, 더 알아보기 접기, 휴대폰 홈 재난 2열·머리 낮추기, 견학 요약, 선생님 */
@media (min-width:921px){.pgnav{display:none}}
.crumb a{min-height:40px;min-width:24px;justify-content:center}
.lvl button{min-height:44px}
.stdd summary{min-height:44px}
.stdlist .std{font-size:14px!important}
.alist li a{display:inline-flex;align-items:center;min-height:40px}
.pglist a,.pglist a span{font-size:14px}
@media (max-width:480px){.nav .logo{min-height:44px}.schbtn{min-height:44px}.ham{width:44px;height:44px}}
@media (max-width:400px){.schbtn{font-size:14px}}
@media (max-width:540px){.nav .btn-dark{display:none}}   /* 「나의 학습」은 휴대폰 메뉴에 있음 — 좁은 폭 헤더 넘침 방지 */
.jt div,.jt div span,.book .jt div{font-size:12.5px;letter-spacing:-.02em}
.jt i::after,.book .jt i::after{font-size:12px;top:-18px}
@media (max-width:560px){.jt div,.jt div span,.book .jt div{font-size:12px}.jt i::after,.book .jt i::after{font-size:11.5px}}
.hstage .hrow .hv small{font-size:14px}
@media (max-width:720px){.fl-typhoon .fbig{font-size:15px}}
#stdSubj{font-size:14.5px!important}
.tdet .sech h2 span{font-size:14.5px!important}
.schips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:640px}
.schips button{font:inherit;font-size:15px;font-weight:800;min-height:44px;padding:0 16px;border-radius:100px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.schips button:hover{border-color:var(--ink)}
/* 퀴즈: 고르면 바로 정답 확인 */
.qcard.fixed .qo{pointer-events:none;cursor:default;color:var(--ink)}
.qcard.fixed .qo:not(.right):not(.wrong){opacity:.45}
.qopts .qo.right,.qopts .qo.right[aria-pressed="true"]{background:#E5F6D5;border-color:#4C9A12;color:var(--ink)}
.qopts .qo.right .k{background:#4C9A12;color:#fff}
.qopts .qo.wrong,.qopts .qo.wrong[aria-pressed="true"]{background:#FFE7E1;border-color:#D9472B;color:var(--ink)}
.qopts .qo.wrong .k{background:#D9472B;color:#fff}
.qopts.ox2 .qo.right,.qopts.ox2 .qo.wrong{color:var(--ink)}
.qfb{margin-top:14px;padding:12px 16px;border-radius:var(--r-sm);font-size:16.5px;font-weight:700;line-height:1.5;word-break:keep-all}
.qfb b{font-weight:900;margin-right:4px}
.qfb.ok{background:#E5F6D5;color:#2E5B0A}
.qfb.no{background:#FFE7E1;color:#9C3520}
.qdots i.no{background:#D9472B}
.qnav.qrn{justify-content:flex-start;margin-top:4px}
.qnav.qrn .qb.k{margin-left:0}
/* 더 알아보기 — 접어 두기 */
.book details.more{padding:0}
.book details.more>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;column-gap:12px;padding:18px 22px;min-height:56px}
.book details.more>summary::-webkit-details-marker{display:none}
.book details.more>summary .mh{display:block;grid-column:1}
.book details.more>summary b{grid-column:1}
.book details.more>summary::after{content:"";grid-column:2;grid-row:1/span 2;justify-self:center;width:10px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--e)}
.book details.more[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.book details.more>:not(summary){margin-left:22px;margin-right:22px}
.book details.more>:last-child{margin-bottom:20px}
.book details.more>summary:focus-visible{outline:3px solid var(--peri-tx);outline-offset:-3px;border-radius:var(--r-lg)}
/* 휴대폰 홈 — 재난 6종 2열 카드 */
@media (max-width:720px){
  .bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 12px}
  .band{min-height:0;border-radius:var(--r-lg);padding:12px 12px 16px;align-items:stretch;text-align:left}
  .band .bin,.band:nth-child(even) .bin{grid-template-columns:minmax(0,1fr);gap:10px;text-align:left}
  .band .pic,.band:nth-child(even) .pic{order:1;width:100%;rotate:0deg;justify-self:stretch}
  .band .btx,.band:nth-child(even) .btx{order:2}
  .band .bw{font-size:clamp(26px,8vw,34px);margin-top:0}
  .band .more{margin-top:8px;padding:6px 12px;min-height:40px;font-size:14px;gap:4px;border-width:1.5px}
  .band .more i{font-size:15px}
  .band .bs{margin-top:8px;font-size:14px;line-height:1.45}
  .band .bk{display:none}
  .band .pb{height:4px}
  .hs,.sx-book,.hero5{min-height:0}
  .hs{padding-top:56px;padding-bottom:56px}
  .hero5{padding-top:28px;padding-bottom:36px}
}
/* 할 일이 있는 페이지 — 휴대폰에서 머리 낮게 */
@media (max-width:760px){
  .phead.th.ptask{grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"tx art" "st st";padding:22px 18px;gap:12px 14px;min-height:0}
  .phead.th.ptask:not(:has(.thart)){grid-template-columns:minmax(0,1fr);grid-template-areas:"tx" "st"}
  .phead.th.ptask .thart{width:104px;margin:0;justify-self:end;align-self:center;rotate:-3deg}
  .phead.th.ptask h1{font-size:clamp(26px,7.4vw,34px);line-height:1.15}
  .phead.th.ptask .lb{margin-bottom:10px}
  .phead.th.ptask .pill{margin-top:14px;padding:12px 18px;font-size:15px;white-space:nowrap}
  .phead.th.ptask .lb{letter-spacing:.06em;font-size:14px}
}
@media (max-width:720px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fcard .tx{padding:22px 10px 10px}.fcard .tx b{font-size:15.5px}.fcard .tx small{font-size:13.5px}}
/* 견학 프로그램 — 요약 + 자세히 */
.tpmore{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.tpmore>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15.5px;font-weight:800;color:var(--peri-tx)}
.tpmore>summary::-webkit-details-marker{display:none}
.tpmore>summary::after{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--e)}
.tpmore[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.tpmore>.tpinfo{margin-top:6px}
@media (max-width:760px){.tpinfo>div{grid-template-columns:82px minmax(0,1fr);gap:10px}.tpinfo dt{justify-self:stretch;padding:4px 0;font-size:14px}}
/* 활동 카드 (단원 페이지) */
.alist2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:12px}
.alist2 .acard{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:16px;height:100%;min-height:96px;
  padding:18px 20px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);color:var(--ink);
  transition:border-color .25s var(--e),transform .25s var(--e)}
.alist2 .acard:hover{border-color:var(--peri);transform:translateY(-2px)}
.alist2 .aic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--peri-3);color:var(--peri-tx);position:relative}
.alist2 .aic svg{width:26px;height:26px}
.alist2 .atx{min-width:0;display:grid;gap:6px}
.alist2 .am{font-size:14.5px;font-weight:800;color:var(--peri-tx);letter-spacing:-.01em}
.alist2 .am:empty{display:none}
.alist2 .aqt{font-size:17px;font-weight:700;line-height:1.5;word-break:keep-all;letter-spacing:-.02em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.alist2 .d:empty{display:none}
.alist2 .d{font-size:14px;font-weight:800;background:var(--lime);color:var(--ink);border-radius:100px;padding:6px 12px;white-space:nowrap}
.alist2 .uar{font-size:24px;font-weight:900;color:var(--peri-tx);transition:transform .25s var(--e)}
.alist2 .acard:hover .uar{transform:translateX(3px)}
.alist2 li.done .acard{background:var(--lime-2);border-color:transparent}
.alist2 li.done .aic{background:var(--lime);color:var(--ink)}
.alist2 li.done .aic svg{display:none}
.alist2 li.done .aic::after{content:"";width:18px;height:10px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.alist2 li.done .uar{color:var(--ink)}
@media (max-width:560px){
  .alist2 .acard{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:16px 14px;min-height:0}
  .alist2 .aic{width:44px;height:44px;border-radius:13px}
  .alist2 .aic svg{width:23px;height:23px}
  .alist2 .aqt{font-size:16px}
  .alist2 .am{font-size:13.5px}
  .alist2 .uar{display:none}
}
/* 선생님 */
.scard.tlink{background:var(--bg);border-color:transparent}
.intro.out{transition-duration:.6s}
.intro.s3 .w1{transform:translateY(-75%);opacity:0;--b:0ms;transition-duration:.35s,.2s}
.intro.out .w,.intro.out .ifin{opacity:0!important;transition:opacity .2s var(--e)!important;transition-delay:0s!important}
.intro.out{transition:opacity .45s var(--e) .2s}
.intro.out.fast{transition:opacity .35s var(--e) .15s}
.intro.out .iskip{visibility:hidden}

/* UX 3차 — 정답·오답은 O/X 와 짧은 설명만 가운데에 크게, 주제별 진도는 큰 % 숫자만 */
.fans,.qfb{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;text-align:center;background:none;border:0;border-radius:0;padding:22px 8px 6px;margin-top:6px;animation:pop .4s var(--e)}
.fans.ok,.fans.no{border-left:0}
.qfb.ok,.qfb.no{background:none}
.fans .oxm,.qfb .oxm{display:block;width:54px;height:54px;flex:0 0 auto}
.fans.ok .oxm,.qfb.ok .oxm{color:var(--peri)}
.fans.no .oxm,.qfb.no .oxm{color:var(--warn)}
.fans p{margin:0;max-width:28em;font-size:clamp(19px,1.8vw,23px);font-weight:700;line-height:1.5;letter-spacing:-.01em;color:var(--ink);word-break:keep-all;text-wrap:balance}
.fans.pts b{font-size:clamp(30px,3vw,38px);font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.qfb{padding:18px 0 2px}
.ucard .ur{grid-column:auto;align-self:center;text-align:right}
.ucard .ur b{display:block;font-size:clamp(34px,3.4vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ucard .ur b small{font-size:.5em;font-weight:800;letter-spacing:0;margin-left:.08em}
.ucard.done .ur b{color:var(--peri-tx)}
.carr{display:inline-block;flex:0 0 auto;width:1.15em;height:1.15em;vertical-align:-.2em;margin-left:.12em}
.book .pics .ptag{display:inline-flex;align-items:center;font-size:15.5px;padding:4px 12px 4px 13px}
.book .pics .ptag .carr{vertical-align:0}
.cdir{display:inline-flex;align-items:center;font-size:16px;font-weight:900;letter-spacing:0}
.cdir.cdn{color:#1E7A3E}
.cdir.cup{color:#B5401F}
.czhd{gap:0}
.czhd .carr{width:1.2em;height:1.2em}
.fl-carbon .czhd{font-size:clamp(17px,1.7vw,21px)}

/* 학교 활동 · 관리자 */
.fdbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.fdbar:not(:has(:not([hidden]))){display:none}
.fdmine{font:inherit;font-size:15px;font-weight:800;padding:8px 18px;min-height:42px;border-radius:100px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.fdmine[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.fdchip{display:inline-flex;align-items:center;gap:2px;padding:2px 2px 2px 16px;border-radius:100px;background:var(--peri-3);color:var(--peri-tx);font-size:15px;font-weight:800;min-height:42px}
.fdchip[hidden]{display:none}
.fdchip button{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:inherit;font:inherit;font-size:21px;line-height:1;cursor:pointer}
.feed>li{margin:0}
.feed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.fdc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;word-break:keep-all;min-width:0}
.fdc.mine{border-color:var(--peri)}
.fdh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fdsch{font:inherit;font-size:16.5px;font-weight:900;letter-spacing:-.2px;color:var(--ink);background:none;border:0;padding:6px 0;min-height:40px;cursor:pointer;text-align:left}
.fdsch:hover{color:var(--peri-tx)}
.fdh time{font-size:14.5px;font-weight:700;color:var(--mute);flex:none}
.fdk{margin:0;align-self:flex-start;font-size:14.5px;font-weight:800;padding:3px 12px;border-radius:100px}
.fd-news .fdk{background:var(--peri-3);color:var(--peri-tx)}
.fd-slogan .fdk{background:#FFE7DF;color:#A3311A}
.fd-map .fdk{background:#E1F3E7;color:var(--grass-2)}
.fd-vow .fdk{background:var(--lime-2);color:#3B5A0A}
.fd-record .fdk{background:#E2F0F7;color:#0B5A7E}
.fdtx{margin:0;font-size:16.5px;font-weight:500;line-height:1.65;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fdq{margin:0;padding:26px 20px;background:#FFF1EB;border-radius:var(--r-md);text-align:center}
.fdq p{margin:0;font-size:clamp(21px,1.8vw,24px);font-weight:900;letter-spacing:-.03em;line-height:1.45;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.mm{display:flex;flex-direction:column;align-items:flex-start}
.mmc{background:var(--grass-2);color:#fff;font-size:16.5px;font-weight:900;padding:7px 16px;border-radius:100px}
.mmb{list-style:none;margin:0 0 0 24px;padding:6px 0 0;display:block}
.mmb li{position:relative;padding:5px 0 5px 22px}
.mmb li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px solid #A7D8B5}
.mmb li:last-child::before{bottom:auto;height:16px}
.mmb li::after{content:"";position:absolute;left:0;top:15px;width:14px;border-top:2px solid #A7D8B5}
.mmb b{display:block;font-size:14px;font-weight:800;line-height:1.5;color:var(--grass-2)}
.mmb span{display:block;font-size:16.5px;font-weight:700;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.fdkv{margin:0;display:grid;gap:10px}
.fdkv dt{margin:0 0 2px;font-size:14px;font-weight:800;color:var(--mute)}
.fdkv dd{margin:0;font-size:17px;font-weight:700;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.fdv{margin:0;font-size:19px;font-weight:800;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
/* 기후 뉴스 화면 */
.nws{position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;border-radius:var(--r-md);color:#fff;background:linear-gradient(155deg,#9A94FF 0%,#4F48EF 52%,#2E29B4 100%)}
.nwbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.nws::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,13,20,.84) 0%,rgba(11,13,20,.4) 40%,rgba(11,13,20,0) 66%)}
.nw-art::before{background:linear-gradient(to top,rgba(24,20,92,.6) 0%,rgba(24,20,92,0) 55%)}
.nwpic{position:absolute;right:5%;top:6%;width:36%;height:auto;z-index:-2}
.nwlogo{position:absolute;left:4.5cqw;top:4.5cqw;display:inline-flex;align-items:center;gap:.45em;background:var(--ink);color:#fff;font-size:clamp(11px,2.2cqw,20px);font-weight:900;letter-spacing:-.02em;line-height:1;padding:.42em .8em;border-radius:.45em}
.nwlogo::before{content:"";width:.6em;height:.6em;border-radius:.16em;background:var(--lime);transform:rotate(12deg)}
.nwlow{position:absolute;left:4.5cqw;right:4.5cqw;bottom:4.5cqw;display:flex;flex-direction:column;align-items:flex-start}
.nwsch{background:var(--lime);color:var(--ink);font-size:clamp(11px,2.2cqw,19px);font-weight:900;line-height:1.15;padding:.38em .8em;border-radius:.4em .4em 0 0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwh{margin:0;max-width:100%;background:#fff;color:var(--ink);font-size:clamp(15px,4.3cqw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.28;padding:.4em .62em;border-radius:0 .3em .3em .3em;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nwlow>.nwh:first-child{border-radius:.3em}
.nwb{margin:.5em 0 0;max-width:100%;background:rgba(11,13,20,.8);color:#fff;font-size:clamp(12px,2.25cqw,21px);font-weight:600;line-height:1.5;padding:.45em .8em;border-radius:.3em;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nws.mini .nwlogo{font-size:clamp(10px,3.3cqw,14px)}
.nws.mini .nwh{font-size:clamp(15px,5.4cqw,23px)}
.nwprev{margin-top:14px;max-width:720px}
.qz2 .wf textarea[rows="1"]{min-height:0;resize:none}
.tv{position:relative;max-width:1040px;margin:0 auto;padding:clamp(8px,1.1vw,14px) clamp(8px,1.1vw,14px) clamp(18px,2vw,26px);background:#16181F;border-radius:clamp(16px,2vw,28px)}
.tv::after{content:"";position:absolute;right:clamp(16px,2.2vw,30px);bottom:clamp(7px,.8vw,10px);width:6px;height:6px;border-radius:50%;background:var(--lime)}
.tvst{display:block;width:clamp(96px,16%,170px);height:clamp(10px,1.1vw,15px);margin:0 auto;background:#16181F;clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.tvs{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(8px,1vw,14px);background:#0B0D14;touch-action:pan-y}
.nwslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s var(--e),visibility 0s linear .8s}
.nwslide.on{opacity:1;visibility:visible;transition:opacity .8s var(--e)}
.nwslide .nws{height:100%;aspect-ratio:auto;border-radius:0}
.tvctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;max-width:1040px;margin:16px auto 0}
.tvbtns{display:flex;gap:8px}
.tvbtns[hidden]{display:none}
.tvb{width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);cursor:pointer;transition:background .2s var(--e),color .2s var(--e)}
.tvb:hover{background:var(--ink);color:#fff}
.tvb:focus-visible{outline:3px solid var(--peri-tx);outline-offset:2px}
.tvb svg{width:20px;height:20px;pointer-events:none}
.pill.tvgo{margin:0;width:auto}
@media (prefers-reduced-motion:reduce){.nwslide,.nwslide.on{transition:none}}
.fdl{margin:0;padding-left:22px;display:grid;gap:6px;font-size:17.5px;font-weight:700;line-height:1.55;color:var(--ink)}
.fdl li::marker{font-weight:800;color:var(--mute)}
.fdg{margin:0;font-size:16px;font-weight:700;color:var(--ink-2)}
.fdsc{margin:0;display:flex;align-items:baseline;gap:8px}
.fdsc b{font-size:clamp(42px,4vw,54px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fdsc span{font-size:18px;font-weight:800;color:var(--mute)}
.fdempty{text-align:center;padding:44px 16px;background:var(--bg);border-radius:var(--r-lg)}
.fdempty p{margin:0 0 16px;font-size:18px;font-weight:800;color:var(--ink-2)}
.fdgo{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.shr{display:inline-block;margin-left:6px;font-weight:800;color:var(--peri-tx)}
.shr.no{color:var(--warn);font-weight:700}
.recp{display:inline-flex;align-items:center;margin-top:12px;padding:7px 16px;min-height:40px;border-radius:100px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:800;text-decoration:none}
.cend .recp{margin-top:10px}
.flogo{position:relative}
.fleaf{position:absolute;left:21px;top:0;width:30px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fleaf:focus-visible{outline:3px solid var(--lime);outline-offset:1px}
.admrow{margin-top:28px}
.admrow[hidden]{display:none}
.admbtn{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;font:inherit;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;font-size:17px;color:var(--ink-2);cursor:pointer}
.admbtn b{font-weight:800}
.admbtn:hover{background:var(--card)}
.admbtn .uar{font-size:20px;font-weight:900;color:var(--mute)}
.admic{width:40px;height:40px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--ink-2)}
.admic svg{width:20px;height:20px}
.admdlg{width:min(440px,calc(100vw - 32px))}
.admf{display:grid;gap:12px}
.admf input[type=password],.admf input[type=tel],.admf input[inputmode=numeric]{font:inherit;font-size:18px;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);min-height:54px;width:100%;transition:border-color .15s,box-shadow .15s}
.admf input:focus,.admf input:focus-visible{outline:none;border-color:var(--peri-tx);box-shadow:0 0 0 3px var(--peri-3)}
.admf .pill,.algo .pill{justify-content:center;min-height:52px}
.admf>.pill{width:100%}
.algo>.pill{flex:1 1 0}
.altabs button{flex:1 1 0}
.admdlg .schdlg-body{padding:6px 24px 24px;overflow:visible}
.admedit input:focus-visible,.admedit textarea:focus-visible,.admq input:focus-visible,.admnum:focus-visible,.admsel:focus-visible{outline:3px solid var(--peri-tx);outline-offset:2px}
.admerr{margin:0;color:var(--warn);font-weight:700;font-size:15.5px}
.admlogin{max-width:460px}
.admbox{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.admbox[hidden],.admerr[hidden],.admf[hidden]{display:none}
.admdlg .schdlg-body{display:grid;gap:12px}
.algo{display:flex;flex-wrap:wrap;gap:8px}
.alcap:empty{display:none}
.admme{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.admphone{max-width:460px;margin:0 0 18px}
.admbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.rtabs.admtabs{width:auto;flex-wrap:wrap}
.rtabs.admtabs button{white-space:nowrap}
.admtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.admchips{display:flex;flex-wrap:wrap;gap:6px;margin-right:auto}
.admchip{font:inherit;font-size:15px;font-weight:800;padding:7px 14px;min-height:42px;border-radius:100px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer}
.admchip b{margin-left:3px;color:var(--mute)}
.admchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.admchip[aria-pressed="true"] b{color:var(--lime)}
.admq input{font:inherit;font-size:16px;padding:9px 16px;min-height:42px;border:1.5px solid var(--line);border-radius:100px;width:min(260px,62vw);background:var(--card);color:var(--ink)}
.admtbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.admtbl table{width:100%;border-collapse:collapse;font-size:15.5px}
.admtbl th{text-align:left;font-size:14px;font-weight:800;color:var(--mute);background:var(--bg);padding:12px 14px;white-space:nowrap}
.admtbl td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:middle}
.admtbl td b{font-weight:800}
.admtbl td small{display:block;font-size:14px;color:var(--mute);font-weight:600}
.admsel{font:inherit;font-size:15px;font-weight:800;padding:7px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);min-height:42px}
.admsel.st-new{border-color:var(--peri);color:var(--peri-tx)}
.admsel.st-ok{border-color:#3E8E41;color:#2E6B30}
.admsel.st-cancel{color:var(--mute)}
.admnum{font:inherit;font-size:16px;font-weight:700;width:110px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;min-height:42px;background:var(--card);color:var(--ink)}
.admact{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tb.sm{font-size:14.5px;padding:6px 14px;min-height:42px}
.tb.k{background:var(--ink);color:#fff}
.admnone{padding:28px 16px;text-align:center;color:var(--mute);font-weight:700;background:var(--bg);border-radius:var(--r-lg);margin:0}
.admprogs,.admposts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.admprogs li,.admposts li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.admprogs li.off{background:var(--bg)}
.apm{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 260px;word-break:keep-all}
.apm b{font-size:17px;font-weight:900}
.apm span{font-size:14.5px;color:var(--mute);font-weight:600}
.apm ol{margin:4px 0 0;padding-left:20px;font-size:15.5px}
.apm p{margin:4px 0 0}
.admkv{margin:4px 0 0;display:grid;gap:4px;font-size:15.5px}
.admkv div{display:flex;flex-wrap:wrap;gap:2px 10px}
.admkv dt{font-weight:800;color:var(--mute);font-size:14px}
.admkv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.admtags em{font-style:normal;font-size:14px;font-weight:800;background:var(--bg);color:var(--ink-2);padding:2px 9px;border-radius:100px;margin-right:4px}
.admedit{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.admedit h2{grid-column:1/-1;margin:0;font-size:22px;font-weight:900}
.admedit .w{grid-column:1/-1}
.admedit label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:800;color:var(--ink-2)}
.admedit input[type=text],.admedit textarea{font:inherit;font-size:16px;font-weight:500;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%}
.admedit label.chk{flex-direction:row;align-items:center;gap:8px;min-height:44px}
.admedit label.chk input{width:20px;height:20px;accent-color:var(--ink)}
.admlb{margin:0 0 8px;font-size:15px;font-weight:800;color:var(--ink-2)}
.admstepbox{display:grid;gap:10px;margin-bottom:10px}
.admstep{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--bg)}
.admstep .w{grid-column:1/-1}
.admstep .tb{justify-self:start}
.admgo{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){
  .rtabs.fdtabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-radius:24px}
  .tvs{aspect-ratio:4/3}
  .tvs .nwb{-webkit-line-clamp:3}
  .rtabs.admtabs{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:24px}
  .admedit,.admstep{grid-template-columns:1fr}
  .admtbl{border:0;background:none;overflow:visible}
  .admtbl table,.admtbl tbody,.admtbl tr,.admtbl td{display:block;width:100%}
  .admtbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .admtbl tr{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 14px;margin-bottom:10px}
  .admtbl td{border:0;padding:6px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:right}
  .admtbl td[data-l]::before{content:attr(data-l);font-size:14px;font-weight:800;color:var(--mute);flex:none;text-align:left}
  .admtbl td:last-child{justify-content:flex-end}
  .admtbl td small{display:inline;margin-left:6px}
}

/* UX 4차 — 인트로 마지막 장면: 원래 색 로고 + 흰 바탕 */
.intro.s3 .ib:nth-child(4){--th:#FFFFFF;--th-tx:var(--ink)}
.intro .ifin .bar{background:var(--peri)}
/* 용어 풀이 · 항목 풀이: 「더 알아보기」와 같은 카드(쪽마다 테마 색 옅은 바탕) */
.terms,.book .terms,.kv,.book .kv{display:grid;gap:12px;margin-top:22px}
.terms>div,.book .terms>div,.kv>div,.book .kv>div{display:block;background:var(--acc-bg,var(--peri-3));border:0;border-radius:var(--r-lg);padding:22px 26px;word-break:keep-all}
.terms>div>b,.book .terms>div>b,.kv dt,.book .kv dt{display:block;margin:0 0 6px;font-size:clamp(19px,1.6vw,22px);font-weight:800;letter-spacing:-.4px;line-height:1.4;color:var(--ink);white-space:normal}
.terms>div>span,.book .terms>div>span,.kv dd,.book .kv dd{display:block;margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.8;font-weight:500;color:var(--ink)}
@media (max-width:640px){.terms>div,.book .terms>div,.kv>div,.book .kv>div{padding:20px 18px}}
/* 활동 카드: 짧은 제목 하나 */
.alist2{gap:10px}
.alist2 .acard{grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:18px 20px;min-height:84px;border-radius:var(--r-lg)}
.alist2 .aic{width:48px;height:48px;border-radius:50%}
.alist2 .aic svg{width:22px;height:22px}
.alist2 .atx{gap:2px}
.alist2 .am{font-size:13.5px;font-weight:800;color:var(--peri-tx)}
.alist2 .aqt{font-size:clamp(17.5px,1.5vw,20px);font-weight:800;letter-spacing:-.4px;line-height:1.35;color:var(--ink)}
.alist2 .uar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:18px;color:var(--ink);transition:background-color .2s var(--e),color .2s var(--e)}
.alist2 .acard:hover .uar{background:var(--ink);color:#fff;transform:none}
.alist2 li.done .uar{background:var(--card)}
@media (max-width:640px){.alist2 .acard{grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;padding:14px 14px 14px 16px;min-height:72px}.alist2 .aic{width:44px;height:44px}.alist2 .aqt{font-size:17px}.alist2 .uar{width:34px;height:34px;font-size:16px}}

/* 메뉴 정리 — 가이드북의 체험 카드 */
.ucard.xcard{grid-template-columns:68px minmax(0,1fr) auto;padding-top:clamp(14px,1.4vw,18px);padding-bottom:clamp(14px,1.4vw,18px)}
.xth{width:68px;height:52px;border-radius:12px;background:var(--bg);display:grid;place-items:center;overflow:hidden}
.xth img{width:100%;height:100%;object-fit:contain;padding:3px}
@media (max-width:640px){.ucard.xcard{grid-template-columns:56px minmax(0,1fr) auto;gap:14px}.xth{width:56px;height:44px;border-radius:10px}}

/* 체험 틀 — 태풍 만들기 · 재난 대응 훈련 · 폭염의 하루 · 탄소 카드 퀴즈 공통 */
.xsec{margin-top:clamp(6px,1vw,14px)}
.gm{--gm-r:clamp(18px,2vw,26px);position:relative;margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--gm-r);padding:clamp(10px,1.1vw,14px);display:grid;gap:clamp(10px,1.1vw,14px)}
.gm-top{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px}
.gm-back{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);display:grid;place-items:center;color:var(--ink);cursor:pointer}
.gm-back[hidden]{display:none}
.gm-back svg{width:18px;height:18px}
.gm-t{min-width:0;font-size:clamp(17px,1.5vw,20px);font-weight:900;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-prog{flex:1 1 auto;display:flex;gap:5px;min-width:48px;max-width:360px;margin-left:auto}
.gm-prog[hidden]{display:none}
.gm-prog i{flex:1;height:8px;border-radius:100px;background:var(--bg);transition:background .35s var(--e)}
.gm-prog i.ok{background:var(--peri)}
.gm-prog i.on{background:var(--ink)}
.gm-prog.bar{display:block;height:8px;border-radius:100px;background:var(--bg);overflow:hidden}
.gm-prog.bar i{display:block;height:100%;width:0;background:var(--peri);border-radius:100px;transition:width .45s var(--e)}
.gm-stat{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:4px 14px;border-radius:100px;background:var(--bg);white-space:nowrap}
.gm-stat[hidden]{display:none}
.gm-stat small{font-size:13.5px;font-weight:800;color:var(--mute)}
.gm-stat b{font-size:20px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.gm-stat b.low{color:#C2410C}
.gm-stat em{margin-left:4px;font-style:normal;font-size:13px;font-weight:900;padding:3px 9px;border-radius:100px;background:var(--ink);color:var(--lime)}
.gm-stat em.x{background:#D92D20;color:#fff}
.gm-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:calc(var(--gm-r) - 6px);background:#11131A}
.gm-dock{display:grid;gap:12px;padding:2px 6px 6px}
.gm-dock[hidden],.gm-dock:empty{display:none}
/* 표지 */
.gm-cover{position:absolute;inset:0;z-index:20;display:grid;place-items:center start;padding:20px 20px 20px 6%;background:linear-gradient(90deg,rgba(12,14,20,.45),rgba(12,14,20,.08) 60%,rgba(12,14,20,0))}
.gm-cover[hidden]{display:none}
.gm-cv{display:grid;justify-items:start;gap:10px;max-width:min(420px,88%);padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px);border-radius:26px;background:rgba(255,255,255,.96);text-align:left;box-shadow:0 22px 54px rgba(12,14,20,.28);animation:gm-in .5s var(--e)}
.gm-cv h2{margin:0;font-size:clamp(28px,3.2vw,42px);font-weight:900;letter-spacing:-.055em;line-height:1.08}
.gm-cv p{margin:0;font-size:clamp(15.5px,1.3vw,17.5px);font-weight:600;line-height:1.55;color:var(--ink-2);word-break:keep-all}
.gm-go{margin-top:10px;display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:64px;padding:10px 44px;border:0;border-radius:100px;background:var(--lime);color:var(--ink);font:inherit;font-size:clamp(21px,1.9vw,25px);font-weight:900;letter-spacing:.12em;cursor:pointer;transition:transform .25s var(--e),box-shadow .25s var(--e);box-shadow:0 10px 26px rgba(15,17,23,.22)}
.gm-go:hover{transform:translateY(-2px) scale(1.02)}
/* 큰 글자 */
.gm-shout{position:absolute;left:0;right:0;top:40%;z-index:15;margin:0;text-align:center;font-size:clamp(34px,6vw,84px);font-weight:900;letter-spacing:-.06em;line-height:1;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none}
.gm-shout.go{animation:gm-shout 1.7s var(--e) forwards}
.gm-shout.bad{color:#FFE3DC}
/* 결과 */
.gm-end{position:absolute;inset:0;z-index:21;display:grid;place-items:center;padding:16px;background:rgba(12,14,20,.55);animation:gm-in .35s var(--e)}
.gm-end[hidden]{display:none}
.gm.is-end .gm-dock{display:none}
.gm-ec{display:grid;justify-items:center;gap:8px;width:min(500px,100%);max-height:100%;overflow:auto;padding:clamp(22px,3vw,34px);border-radius:26px;background:var(--card);text-align:center;box-shadow:0 26px 60px rgba(0,0,0,.32)}
.gm-kick{margin:0;font-size:14.5px;font-weight:800;color:var(--peri-tx)}
.gm-big{margin:0;display:flex;align-items:baseline;justify-content:center;gap:8px}
.gm-big b{font-size:clamp(54px,7vw,88px);font-weight:900;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.gm-big span{font-size:clamp(18px,1.8vw,22px);font-weight:800;color:var(--mute)}
.gm-ec h2{margin:2px 0 0;font-size:clamp(19px,1.8vw,23px);font-weight:900;letter-spacing:-.03em;line-height:1.35;word-break:keep-all}
.gm-etx{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);word-break:keep-all}
.gm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gm-chip{padding:6px 12px;border-radius:100px;background:var(--bg);color:var(--ink);font-size:14px;font-weight:800;text-decoration:none}
.gm-chip.pt{background:var(--peri-3);color:var(--peri-tx)}
.gm-chip.rec{background:var(--lime)}
.gm-ec .gm-acts{margin-top:10px;justify-content:center}
.gm-more{margin-top:4px;font-size:15px;font-weight:800;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
/* 버튼 */
.gm-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.gm-acts[hidden]{display:none}
.gm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:12px 24px;border:0;border-radius:100px;background:var(--lime);color:var(--ink);font:inherit;font-size:17px;font-weight:900;letter-spacing:-.02em;text-decoration:none;cursor:pointer;transition:transform .2s var(--e),background .2s var(--e)}
.gm-btn svg{width:20px;height:20px;flex:none}
.gm-btn:hover{transform:translateY(-1px)}
.gm-btn.w{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line)}
.gm-btn:disabled{opacity:.45;cursor:default;transform:none}
.gm-ib{width:54px;height:54px;padding:0;border:0;border-radius:50%;background:var(--bg);display:grid;place-items:center;color:var(--ink);cursor:pointer}
.gm-ib svg{width:20px;height:20px}
.gm-ib:disabled{opacity:.35;cursor:default}
.gm-go:focus-visible,.gm-btn:focus-visible,.gm-ib:focus-visible,.gm-opt:focus-visible,.gm-back:focus-visible,.dr-tile:focus-visible{outline:3px solid var(--peri-tx);outline-offset:3px}
/* 설명 · 질문 · 보기 · 정답 표시 */
.gm-cap h2{margin:0 0 4px;font-size:clamp(18px,1.6vw,22px);font-weight:900;letter-spacing:-.03em}
.gm-cap p{margin:0;font-size:clamp(15.5px,1.25vw,17px);line-height:1.6;color:var(--ink-2);word-break:keep-all}
.gm-q{display:grid;gap:10px}
.gm-q[hidden]{display:none}
.gm-qt{margin:0;font-size:clamp(18px,1.6vw,21px);font-weight:900;letter-spacing:-.03em;line-height:1.45;word-break:keep-all}
.gm-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:8px}
.gm-opt{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font:inherit;font-size:16.5px;font-weight:700;line-height:1.45;text-align:left;word-break:keep-all;cursor:pointer;transition:border-color .2s var(--e),background .2s var(--e),transform .2s var(--e),opacity .2s}
.gm-opt .k{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:15px;font-weight:900}
.gm-opt:hover:not(:disabled){border-color:var(--ink);transform:translateY(-1px)}
.gm-opt:disabled{cursor:default}
.gm-opts.lock .gm-opt:not([data-s]){opacity:.5}
.gm-opt[data-s="y"]{border-color:#2E9E52;background:#EAF7EE}
.gm-opt[data-s="y"] .k{background:#2E9E52;color:#fff}
.gm-opt[data-s="n"]{border-color:#D92D20;background:#FDEDEB}
.gm-opt[data-s="n"] .k{background:#D92D20;color:#fff}
.gm-fb{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--bg);animation:gm-in .3s var(--e)}
.gm-fb[hidden]{display:none}
.gm-fb .oxm{flex:none;width:34px;height:34px}
.gm-fb.ok .oxm{color:#2E9E52}
.gm-fb.no .oxm{color:#D92D20}
.gm-fb p{margin:0;font-size:16px;font-weight:600;line-height:1.55;word-break:keep-all}
.gm-q.past .gm-qt,.gm-q.past .gm-opts{opacity:.5}
/* 태풍 만들기 */
.gm-typhoon .gm-stage{background:#0C3D69}
.ty-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.gm-typhoon .gm-dock{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px}
.gm-typhoon .gm-act{min-width:210px}
/* 재난 대응 훈련 */
.gm-drill .gm-stage{background:#1B2340}
.dr-view,.dr-scene{position:absolute;inset:0}
.dr-mosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.dr-mosaic span{position:relative;overflow:hidden}
.dr-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dr-menu{position:absolute;inset:0;padding:clamp(10px,1.4vw,18px);background:#E9EDF6}
.dr-grid{height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:clamp(8px,1.1vw,14px)}
.dr-tile{position:relative;min-height:0;padding:0;border:0;border-radius:18px;overflow:hidden;background:#222;color:#fff;font:inherit;cursor:pointer}
.dr-tile .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e)}
.dr-tile:hover .bg img{transform:scale(1.05)}
.dr-tile .tx{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:30px 16px 14px;background:linear-gradient(180deg,rgba(10,12,20,0),rgba(10,12,20,.72))}
.dr-tile b{font-size:clamp(19px,1.9vw,26px);font-weight:900;letter-spacing:-.03em}
.dr-tile em{font-style:normal;font-size:14px;font-weight:900;padding:3px 10px;border-radius:100px;background:var(--lime);color:var(--ink)}
.dr-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.dr-art{position:absolute;left:50%;top:50%;width:min(60%,600px);aspect-ratio:3/2;transform:translate(-50%,-50%);padding:clamp(8px,1.3vw,16px);border-radius:24px;background:rgba(255,253,248,.97);box-shadow:0 18px 44px rgba(0,0,0,.25);animation:gm-in .45s var(--e)}
.dr-art img{display:block;width:100%;height:100%;object-fit:contain}
.gm-drill.is-end .dr-art,.gm-drill.is-end .gm-shout{display:none}
/* 폭염의 하루 */
.gm-heatday .gm-stage{background:#1E2446}
.gm-heatday .hstage{position:absolute;inset:0;aspect-ratio:auto}
.gm-heatday .hstage .hdcard{min-width:220px}
/* 탄소 카드 퀴즈 */
.gm-carbon .gm-stage{aspect-ratio:auto;min-height:clamp(420px,44vw,560px);padding:clamp(12px,1.6vw,22px);background:linear-gradient(180deg,#F4F8E6,#EDF1F8)}
.gm-carbon .cboard{margin:0;min-height:100%}
.gm-carbon.is-cover .cboard{filter:blur(2px)}
@keyframes gm-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gm-shout{0%{opacity:0;transform:scale(.72)}14%{opacity:1;transform:scale(1.06)}24%{transform:scale(1)}72%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
@media (max-width:640px){
  .gm{padding:8px;gap:10px;border-radius:20px}
  .gm-top{gap:8px;padding:0 2px}
  .gm-t{font-size:16px}
  .gm-prog{min-width:36px}
  .gm-stat{padding:4px 10px;min-height:34px}
  .gm-stat b{font-size:17px}
  .gm-stat small{font-size:12.5px}
  .gm-stage{aspect-ratio:4/5;border-radius:14px}
  .gm-cover{place-items:end stretch;padding:12px;background:linear-gradient(180deg,rgba(12,14,20,0) 40%,rgba(12,14,20,.5))}
  .gm-cv{max-width:none;padding:20px 20px 18px;border-radius:20px}
  .gm-go{width:100%}
  .gm-typhoon .gm-dock{grid-template-columns:1fr}
  .gm-typhoon .gm-acts{justify-content:stretch}
  .gm-typhoon .gm-act{flex:1;min-width:0}
  .dr-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  .dr-mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  .dr-art{width:88%}
  .gm-ec .gm-acts{flex-direction:column;align-items:stretch;width:100%}
  .gm-carbon .gm-stage{min-height:0}
}
@media (prefers-reduced-motion:reduce){.gm-cv,.gm-end,.gm-fb,.dr-art{animation:none}.gm-shout.go{animation:none}}

/* 학생 학습 흐름 — 메인 학습 시작 카드 · 학교 고르기 · 학습하기 읽기 막대 */
.hero5 .hstart.hs-card{margin-top:28px;width:min(460px,100%);background:#fff;color:var(--ink);border-radius:26px;padding:18px;display:grid;gap:12px;box-shadow:0 20px 50px rgba(20,16,90,.25)}
.hs-sch,.hs-step{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 6px 6px 14px;border-radius:16px;background:var(--bg)}
.hs-sch b,.hs-step b{flex:1;min-width:0;font-size:16.5px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-dot{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #fff inset,0 0 0 1.5px var(--line);flex:none}
.hs-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:14.5px;font-weight:900}
.hs-chg,.hs-pick{flex:none;font:inherit;font-size:15px;font-weight:900;border:0;border-radius:100px;min-height:40px;padding:8px 16px;cursor:pointer}
.hs-chg{background:transparent;color:var(--mute)}
.hs-pick{background:var(--peri);color:#fff}
.hs-main{display:grid;gap:4px;padding:8px 6px 2px}
.hs-two .hs-step{margin:0 -6px 8px;background:transparent;padding-left:8px}
.hs-k{margin:0;font-size:14.5px;font-weight:800;color:var(--peri-tx)}
.hs-t{margin:0;font-size:clamp(22px,2vw,27px);font-weight:900;letter-spacing:-.04em;line-height:1.25;word-break:keep-all}
.hs-u{margin:0;font-size:15px;font-weight:700;color:var(--mute)}
.hs-bar{height:10px;border-radius:100px;background:var(--bg);overflow:hidden;margin:10px 0 2px}
.hs-bar i{display:block;height:100%;border-radius:100px;background:var(--peri)}
.hs-go{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;border-radius:100px;background:var(--lime);color:var(--ink);font-size:18px;font-weight:900;letter-spacing:-.02em;text-decoration:none;transition:transform .2s var(--e)}
.hs-go svg{width:20px;height:20px}
.hs-go:hover{transform:translateY(-2px)}
.hs-go:focus-visible,.hs-chg:focus-visible,.hs-pick:focus-visible{outline:3px solid var(--peri-tx);outline-offset:3px}
.spk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.spk-rg{display:flex;gap:6px}
.spk-rg button{font:inherit;font-size:15px;font-weight:800;min-height:40px;padding:8px 14px;border-radius:100px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer}
.spk-rg button[aria-pressed="true"]{border-color:var(--peri);background:var(--peri-3);color:var(--peri-tx)}
.spk-ck{width:22px;height:22px;color:var(--lime)}
.spk-ok{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:12px;background:rgba(255,255,255,.96);border-radius:inherit;animation:gm-in .3s var(--e)}
.spk-ok svg{width:64px;height:64px;padding:12px;border-radius:50%;background:var(--lime);color:var(--ink)}
.spk-ok b{font-size:22px;font-weight:900;letter-spacing:-.03em}
.schdlg{position:relative}
.phead.th.rd{min-height:0;padding:clamp(18px,2vw,26px) clamp(22px,2.6vw,36px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.phead.th.rd h1{font-size:clamp(26px,2.8vw,38px);line-height:1.15}
.phead.th.rd .thart{width:clamp(72px,8vw,108px);margin:-6px 0}
.rdbar{position:fixed;left:0;right:0;top:0;height:5px;z-index:60;background:transparent;opacity:0;transition:opacity .3s;pointer-events:none}
.rdbar.on{opacity:1}
.rdbar i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:640px){
  .hero5 .hstart.hs-card{margin:22px auto 0;padding:14px;border-radius:22px;text-align:left}
  .hs-t{font-size:21px}
  .phead.th.rd{padding:16px 18px}
  .phead.th.rd .thart{display:none}
}

/* 퀴즈 화면 · 캐릭터 */
.mas{display:inline-block;line-height:0;animation:m-in .45s var(--e)}
.mas svg{display:block;width:100%;height:100%;overflow:visible}
.mas[data-face="idle"] .m-eyes,.mas[data-face="think"] .m-eyes,.mas[data-face="oops"] .m-eyes{transform-box:view-box;transform-origin:765px 376px;animation:m-blink 4.6s infinite}
.mas[data-face="think"] .m-q{transform-box:view-box;transform-origin:958px 250px;animation:m-bob 1.8s ease-in-out infinite}
.mas[data-face="happy"] .m-b{transform-box:view-box;transform-origin:781px 690px;animation:m-hop .62s var(--e) 2}
.mas[data-face="happy"] .m-spark path{transform-box:fill-box;transform-origin:center;animation:m-tw 1.3s ease-in-out infinite}
.mas[data-face="happy"] .m-spark path:nth-child(2){animation-delay:.3s}
.mas[data-face="happy"] .m-spark path:nth-child(3){animation-delay:.6s}
.mas[data-face="oops"] .m-b{transform-box:view-box;transform-origin:781px 690px;animation:m-shake .55s var(--e)}
.mas[data-face="oops"] .m-drop{transform-box:fill-box;transform-origin:center;animation:m-drop 1.8s ease-in infinite}
@keyframes m-in{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes m-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes m-hop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-56px) scale(.96,1.04)}60%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
@keyframes m-tw{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.15);opacity:1}}
@keyframes m-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}
@keyframes m-drop{0%{transform:translateY(-10px);opacity:0}25%{opacity:1}100%{transform:translateY(34px);opacity:0}}
/* 고르는 문제: 색 화면 + 화면 안 보기 창 */
.qz2 .qcard{position:relative;overflow:visible;background:linear-gradient(160deg,#5C55F3 0%,#4139D9 100%);color:#fff;border-radius:24px;padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,34px) clamp(16px,1.8vw,22px)}
.qz2 .qcard .qt{color:#fff;font-size:clamp(21px,2.1vw,28px);font-weight:900;line-height:1.5;letter-spacing:-.03em}
.qz2 .qcard .qt .slot{color:var(--lime);border-bottom-color:var(--lime)}
.qz2 .qcard .qt .slot.on{background:rgba(255,255,255,.18);color:#fff}
.qz2 .qcard .qt .arrow{color:rgba(255,255,255,.7)}
.qz2 .qcard .qsofar{color:rgba(255,255,255,.88)}
.qpanel{position:relative;margin-top:clamp(18px,2.4vw,28px);padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) clamp(118px,12vw,150px);background:#fff;border-radius:22px;color:var(--ink);box-shadow:0 16px 40px rgba(20,16,96,.3);min-height:clamp(120px,12vw,150px)}
.qpanel>.mas{position:absolute;left:clamp(8px,1vw,14px);bottom:clamp(6px,.8vw,12px);width:clamp(100px,10.5vw,130px);height:clamp(100px,10.5vw,130px)}
.qz2 .qpanel .qopts{margin-top:0;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.qz2 .qpanel .qo{min-height:clamp(64px,5.4vw,74px);font-size:clamp(18.5px,1.65vw,22px);font-weight:800;border-radius:16px;padding:12px 18px;gap:14px}
.qz2 .qpanel .qo .k{width:38px;height:38px;border-radius:50%;font-size:17px}
.qz2 .qpanel .qopts.ox2{grid-template-columns:1fr 1fr}
.qz2 .qpanel .qopts.ox2 .qo{min-height:clamp(96px,9vw,120px);font-size:clamp(46px,5vw,64px);border-radius:20px}
.qz2 .qpanel .qopts.sc{grid-template-columns:repeat(3,minmax(0,1fr))}
.qz2 .qpanel .qfb{margin-top:12px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:10px 14px;border-radius:14px;background:var(--bg);text-align:left;min-height:0}
.qz2 .qpanel .qfb .oxm{width:32px;height:32px;flex:none;margin:0}
.qz2 .qpanel .qfb b{font-size:clamp(17px,1.5vw,19px);font-weight:900;letter-spacing:-.02em}
.qz2 .qpanel .qfb.ok b{color:#1E7A3E}
.qz2 .qpanel .qfb.no b{color:#B33A3A}
.qz2 .qscore{position:relative}
.qz2 .qscore>.mas{width:92px;height:92px;margin-right:6px;vertical-align:middle}
/* 체험 질문 창(무대 안) */
.gm-ov{position:absolute;left:0;right:0;bottom:0;z-index:12;padding:clamp(10px,1.4vw,18px);pointer-events:none}
.gm-ov[hidden]{display:none}
.gm-pan{position:relative;pointer-events:auto;display:grid;gap:10px;padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) clamp(118px,12vw,150px);min-height:clamp(120px,12vw,150px);border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 18px 44px rgba(10,12,20,.32);animation:gm-up .4s var(--e)}
.gm-pan>.mas{position:absolute;left:clamp(8px,1vw,14px);bottom:clamp(6px,.8vw,12px);width:clamp(100px,10.5vw,130px);height:clamp(100px,10.5vw,130px)}
.gm-pan .gm-qt{font-size:clamp(19px,1.8vw,24px)}
.gm-pan .gm-opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.gm-pan .gm-opt{min-height:clamp(64px,5.4vw,74px);font-size:clamp(17.5px,1.55vw,20px);font-weight:800}
.gm-pan .gm-opt .k{width:36px;height:36px;font-size:16px}
.gm-pan .gm-acts{justify-content:flex-end}
.gm-toast{position:absolute;left:clamp(10px,1.4vw,18px);right:clamp(10px,1.4vw,18px);bottom:clamp(10px,1.4vw,18px);z-index:12;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 14px 36px rgba(10,12,20,.25);animation:gm-up .35s var(--e)}
.gm-toast[hidden]{display:none}
.gm-toast>.mas{flex:none;width:76px;height:76px}
.gm-toast .gm-fb{flex:1;background:transparent;padding:0}
.gm-drill.is-q .dr-art{top:31%;width:min(40%,420px)}
.gm-heatday.is-q .hstage .hart{bottom:auto;top:10%;width:min(34%,380px)}
@keyframes gm-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .qpanel{padding:46px 14px 14px;margin-top:58px;min-height:0}
  .qpanel>.mas{left:12px;top:-62px;bottom:auto;width:96px;height:96px}
  .qz2 .qpanel .qopts.sc{grid-template-columns:1fr}
  .gm.is-q .gm-stage{aspect-ratio:auto;padding-top:62vw}
  .gm.is-q .gm-ov{position:relative;padding:10px}
  .gm-pan{padding:46px 14px 14px;min-height:0;margin-top:30px}
  .gm-pan>.mas{left:10px;top:-58px;bottom:auto;width:92px;height:92px}
  .gm-drill.is-q .dr-art{top:31vw;width:78%}
  .gm-heatday.is-q .hstage .hart{top:24vw;width:58%}
  .gm-toast>.mas{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){.mas,.mas *,.gm-pan,.gm-toast{animation:none!important}}

/* 3D 무대 */
/* 훈련: 재난 배경 위에 그림을 카드 없이 세운다 */
.dr-bg img{filter:none}
.dr-scene::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,24,0) 52%,rgba(10,14,24,.2))}
.dr-art{z-index:2;left:50%;top:auto;bottom:1%;width:min(64%,720px);aspect-ratio:3/2;transform:none;translate:-50% 0;padding:0;border-radius:0;background:none;box-shadow:none;animation:st-in .5s var(--e);transition:left .5s var(--e),width .5s var(--e),translate .5s var(--e)}
.dr-art img{object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 16px 18px rgba(8,12,24,.34))}
.dr-art::after,.hstage .hart::after{content:'';position:absolute;left:16%;right:16%;bottom:-1.5%;height:7%;z-index:-1;background:radial-gradient(closest-side,rgba(8,12,24,.36),rgba(8,12,24,0))}
@keyframes st-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* 폭염의 하루: 하늘 → 해 · 달 → 거리 → 하늘빛 → 밤 불빛 → 그림 */
.hstage .hheat{z-index:2}
.hstage .hsun{width:clamp(64px,10%,130px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,#FFF7DA 27%,rgba(255,230,160,.6) 38%,rgba(255,214,130,0) 70%)}
.hstage .htown,.hstage .htown-lit{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;transition:filter .3s linear}
.hstage .htown-lit{opacity:0;transition:opacity .4s linear}
.hstage .hshade{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.16;transition:background .3s linear}
.hstage .hart{z-index:3;transition:left .5s var(--e),width .5s var(--e),translate .5s var(--e),transform .5s var(--e)}
.hstage .ha{background:none;padding:0;border-radius:0;box-shadow:none}
.hstage .ha img{object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 16px 18px rgba(8,12,24,.32))}
.hstage .hwaves{z-index:3}
.hstage .hwaves i{border-color:rgba(255,246,232,.6);filter:blur(1.5px)}
/* 넓은 화면: 질문 창은 오른쪽, 그림은 왼쪽 바닥 */
@media (min-width:761px){
  .gm-drill.is-q .dr-art{left:1.5%;top:auto;bottom:1%;width:51%;translate:0 0}
  .gm-heatday.is-q .hstage .hart{left:1.5%;top:auto;bottom:3%;width:49%;transform:none}
  .gm-drill.is-q .gm-ov,.gm-heatday.is-q .gm-ov{left:auto;right:0;top:0;bottom:0;width:min(47%,580px);display:flex;align-items:center;padding:clamp(12px,1.5vw,20px)}
  .gm-drill.is-q .gm-pan,.gm-heatday.is-q .gm-pan{width:100%;max-height:100%;overflow:auto;grid-template-columns:72px minmax(0,1fr);column-gap:12px;row-gap:10px;align-content:start;padding:16px 18px;min-height:0}
  .gm-drill.is-q .gm-pan>.mas,.gm-heatday.is-q .gm-pan>.mas{position:static;grid-column:1;grid-row:1;width:72px;height:72px;align-self:center}
  .gm-drill.is-q .gm-pan .gm-qt,.gm-heatday.is-q .gm-pan .gm-qt{grid-column:2;grid-row:1;align-self:center;font-size:clamp(17px,1.45vw,20px)}
  .gm-drill.is-q .gm-pan .gm-opts,.gm-heatday.is-q .gm-pan .gm-opts,.gm-drill.is-q .gm-pan .gm-fb,.gm-heatday.is-q .gm-pan .gm-fb,.gm-drill.is-q .gm-pan .gm-acts,.gm-heatday.is-q .gm-pan .gm-acts{grid-column:1/-1}
  .gm-drill.is-q .gm-pan .gm-opts,.gm-heatday.is-q .gm-pan .gm-opts{grid-template-columns:1fr;gap:8px}
  .gm-drill.is-q .gm-pan .gm-opt,.gm-heatday.is-q .gm-pan .gm-opt{min-height:56px;font-size:clamp(16px,1.3vw,18px)}
  .gm-drill.is-q .gm-shout,.gm-heatday.is-q .gm-shout{right:auto;width:53%}
}
/* 좁은 화면: 그림은 위쪽 무대 안, 질문은 아래 */
@media (max-width:760px){
  .gm-drill.is-q .dr-art{top:3vw;bottom:auto;width:90%;translate:-50% 0}
  .gm-heatday.is-q .hstage .hart{top:25vw;bottom:auto;width:60%}
  .gm-drill.is-q .gm-shout,.gm-heatday.is-q .gm-shout{top:22vw}
  .hstage .htown,.hstage .htown-lit{left:-30%;width:160%}
}
/* 탄소 카드: 납작하고 깔끔한 카드 · 칸 아래에 큰 「탄소」 + 움직이는 꺾쇠 화살표 */
.gm-carbon .gm-stage{background:#F4F3EE}
.gm-carbon .cboard{perspective:none}
.gm-carbon .czone{display:flex;flex-direction:column;gap:12px;border:2px solid transparent;border-radius:22px;box-shadow:none;transform:none;padding:14px 14px 10px;transition:border-color .2s var(--e),background-color .2s var(--e)}
.gm-carbon .czone.less{background:#EAF6CF}
.gm-carbon .czone.more{background:#FFE6DF}
.gm-carbon .cboard[data-over="less"] .czone.less,.gm-carbon .cboard[data-over="more"] .czone.more{transform:none;box-shadow:none;border-color:var(--ink)}
.gm-carbon .czone ul{flex:1 1 auto}
.gm-carbon .czhd{order:2;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:0;padding:16px 8px 8px;background:none!important;border:0;border-top:2px solid rgba(15,17,23,.14);border-radius:0;box-shadow:none;filter:none!important;transform:none!important;font-size:clamp(26px,2.7vw,38px);font-weight:900;letter-spacing:-.045em;line-height:1.1;color:var(--ink);white-space:nowrap}
.gm-carbon .czhd:disabled{opacity:1;cursor:default}
.cz{display:inline-flex;align-items:center;gap:.22em;font-weight:900;letter-spacing:-.05em;line-height:1}
.cz-less{color:#2F8A22}
.cz-more{color:#D63A21}
.cchev{width:1em;height:1em;flex:0 0 auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round}
.cchev path{animation:chev-dn 1.3s ease-in-out infinite}
.cchev path:nth-child(2){animation-delay:.18s}
.cchev.cv-up path{animation-name:chev-up}
.cchev.cv-up path:nth-child(1){animation-delay:.18s}
.cchev.cv-up path:nth-child(2){animation-delay:0s}
@keyframes chev-dn{0%{opacity:.35;transform:translateY(-2.5px)}45%{opacity:1}100%{opacity:.35;transform:translateY(2.5px)}}
@keyframes chev-up{0%{opacity:.35;transform:translateY(2.5px)}45%{opacity:1}100%{opacity:.35;transform:translateY(-2.5px)}}
.gm-carbon .czhd{font-size:clamp(34px,3.6vw,50px)}
.gm-toast .cans{display:inline-flex;align-items:center;gap:4px;margin-right:6px;white-space:nowrap}
.gm-toast .cans b{display:inline-flex}
.gm-toast .cz{font-size:1.12em}
.gm-carbon .cdeck{perspective:none}
.gm-carbon .ccard{background:#fff;rotate:none;border:2px solid var(--ink);box-shadow:none;transition:box-shadow .2s var(--e)}
.gm-carbon .ccard::before{display:none}
.gm-carbon .ccard:hover{rotate:none;box-shadow:none}
.gm-carbon .ccard.drag{rotate:none;box-shadow:0 22px 44px rgba(15,17,23,.18)}
.gm-carbon .czone ul li{box-shadow:none;border:1.5px solid var(--ink)}
.gm-carbon .czone ul li.miss{border:2px dashed #E5432A;box-shadow:none}
/* 설명 창은 카드 바로 아래 칸에 끼워 넣는다(칸 아래 큰 이름을 가리지 않게) */
.gm-carbon .cdeck{grid-column:2;grid-row:1}
.gm-carbon .czone{grid-row:1/span 2}
.gm-carbon .cboard>.gm-toast{position:static;grid-column:2;grid-row:2;align-self:end;margin:0;padding:8px 14px 8px 8px;border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:none}
.gm-carbon .cboard>.gm-toast>.mas{width:56px;height:56px}
.gm-carbon .cboard>.gm-toast .gm-fb{font-size:15.5px;line-height:1.5}
/* 틀리면: 맞는 칸이 깜빡이고, 카드를 그 칸으로 옮겨야 다음 카드로 */
.gm-carbon .czone.want{border-color:var(--ink);animation:cz-want 1.1s var(--e) infinite}
.gm-carbon .czone.nope{animation:c-shake .45s var(--e)}
@keyframes cz-want{0%,100%{box-shadow:0 0 0 0 rgba(15,17,23,0)}50%{box-shadow:0 0 0 7px rgba(15,17,23,.13)}}
@media (max-width:700px){
  .gm-carbon .cboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gm-carbon .cdeck{grid-column:1/-1;grid-row:1;order:0}
  .gm-carbon .cboard>.gm-toast{grid-column:1/-1;grid-row:2;align-self:auto}
  .gm-carbon .czone{grid-row:3}
  .gm-carbon .czhd{font-size:clamp(26px,8vw,34px);gap:8px;padding:12px 4px 6px}
}
@media (prefers-reduced-motion:reduce){.gm-carbon .czone.want,.gm-carbon .czone.nope,.cchev path{animation:none}}
[data-motion="reduced"] .gm-carbon .czone.want,[data-motion="off"] .gm-carbon .czone.want,[data-motion="reduced"] .cchev path,[data-motion="off"] .cchev path{animation:none}
.dr-art.hurt img,.hstage .ha.hurt img{animation:st-hurt .6s var(--e)}
@keyframes st-hurt{0%,100%{transform:none}18%{transform:translateX(-9px) rotate(-1.5deg)}38%{transform:translateX(8px) rotate(1.2deg)}58%{transform:translateX(-5px)}78%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.dr-art,.hstage .hart,.dr-art.hurt img,.hstage .ha.hurt img{animation:none;transition:none}}

/* 화면 정리 (guide_fix) */
.hcards.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.hcards.n3{grid-template-columns:repeat(2,minmax(0,1fr))}.hcards.n3 .tc:last-child{grid-column:1/-1}}
.dsrc{margin-top:clamp(28px,4vw,48px);font-size:13px;font-weight:600;line-height:1.6;color:var(--mute);word-break:keep-all}
.hs-go.hs-start{letter-spacing:.12em;font-weight:900}
/* 견학 신청: 오류 문장은 화면에 띄우지 않고(읽기 프로그램에만) 칸을 빨간 테두리로 */
.aperr:not(.apfail){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.apcal.bad .calg,.apslot.bad .slots{border-radius:var(--r-md);box-shadow:0 0 0 2.5px #B42318}
/* 학교 검색 칸: 안내 문구 대신 돋보기 */
.spk-q,.spk-q:focus{padding-left:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F6B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l4.5 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px 50%;background-size:20px}
/* 쓰기 활동: 보라 칸 위 입력 이름은 흰 글자로(보라 위 보라 글자라 안 보였음) */
.qcard .wf span{color:#fff;opacity:.95}
/* 큰 머리 카드: 숫자 칸이 없으면 글 묶음을 그림과 세로 가운데에 */
@media(min-width:1041px){
  .phead.th:not(.rd):is(:not(:has(.pstats)),.hasrank)>div:not(.hdots):not(.thart):not(.rstage):not(.pstats){grid-row:1 / span 2;grid-column:1;align-self:center}
  .phead.th:not(.rd) .thart{align-self:center}
}

/* ── 제주 기온 · 입체 제주도 ── */
.j3sec .j3d{position:relative;z-index:2;width:100%;max-width:1180px;aspect-ratio:2/1;border-radius:clamp(22px,2.4vw,32px);overflow:hidden;background:#1B5E97;color:#fff;text-align:left;isolation:isolate}
.j3v{position:absolute;inset:0;z-index:0}
.j3v .j3c,.j3v picture,.j3v .j3img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.j3d.live .j3v picture{display:none}
.j3h{position:absolute;z-index:2;left:clamp(22px,3.6vw,52px);top:clamp(22px,3.4vw,48px);max-width:44%}
.j3sec .j3h .bl{margin:0;font-size:clamp(20px,2vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff}
.j3sec .j3h .big{margin:12px 0 0;font-size:clamp(64px,8.6vw,132px);color:#fff;text-shadow:0 2px 24px rgba(8,30,60,.25)}
.j3sec .j3h .big small{color:rgba(255,255,255,.78)}
.j3sec .j3h .pill{margin-top:clamp(14px,2vw,24px);background:#fff;color:var(--ink);box-shadow:none}
.j3sec .j3h .pill:hover{background:var(--lime);transform:translateY(-3px)}
.j3yr{position:absolute;z-index:2;right:clamp(22px,3.6vw,52px);top:clamp(18px,3vw,40px);margin:0;display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 18px rgba(8,30,60,.3)}
.j3yr b{font-size:clamp(30px,3.4vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1}
.j3yr span{margin-top:clamp(6px,.7vw,10px);font-size:clamp(17px,1.75vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1;color:rgba(255,255,255,.9)}
.j3yr span small{font-size:.62em;font-weight:700;margin-left:.08em;opacity:.85}
.j3s{position:absolute;z-index:2;left:0;right:0;bottom:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  padding:clamp(40px,5vw,72px) clamp(22px,3.6vw,52px) clamp(20px,2.8vw,36px);background:linear-gradient(to top,rgba(9,34,66,.62),rgba(9,34,66,.34) 55%,rgba(9,34,66,0))}
.j3s li{min-width:0;padding:0 clamp(14px,2vw,28px);border-left:1px solid rgba(255,255,255,.24)}
.j3s li:first-child{padding-left:0;border-left:0}
.j3s b{display:block;font-size:clamp(26px,2.7vw,42px);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.j3s b small{font-size:.5em;font-weight:800;margin-left:.12em;letter-spacing:0;opacity:.82}
.j3s span{display:block;margin-top:8px;font-size:clamp(12px,1vw,14px);font-weight:600;line-height:1.4;color:rgba(255,255,255,.8);word-break:keep-all}
.j3s span i{font-style:normal;white-space:nowrap}
@media(min-width:1024px){.j3sec .j3d{max-width:min(1180px,calc(100vw - 280px))}}   /* 오른쪽 도트 내비와 겹치지 않게 */
@media(max-width:1023px){
  .j3sec .j3d{aspect-ratio:4/3}
  .j3h{max-width:none;right:clamp(22px,3.6vw,52px)}
}
@media(max-width:639px){
  .j3sec .j3d{aspect-ratio:3/4.4}
  .j3sec .j3h .bl{font-size:20px}
  .j3sec .j3h .big{font-size:clamp(56px,17vw,76px);margin-top:8px}
  .j3sec .j3h .pill{margin-top:12px;padding:11px 18px;font-size:15px}
  .j3s{padding:44px 16px 18px}
  .j3yr{top:22px}
  .j3yr b{font-size:24px}
  .j3yr span{font-size:16px;margin-top:5px}
  .j3s li{padding:0 10px}
  .j3s b{font-size:clamp(20px,6.2vw,26px)}
  .j3s span{font-size:11.5px;margin-top:6px;font-size:0}
  .j3s span i{display:block;font-size:11.5px;line-height:1.4}
}
/* ── 제주 기온 · 입체 제주도 끝 ── */

/* ── 기후 스쿨 · 글자 지구 ── */
.globesec{display:flex;justify-content:center;margin:clamp(20px,3vw,36px) 0 clamp(8px,1.6vw,20px)}
.globesec[hidden]{display:none}
.globe{width:min(560px,100%);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.globe canvas{display:block;border-radius:50%;filter:drop-shadow(0 18px 40px rgba(27,94,151,.18))}
.fdempty{display:none!important}
/* ── 기후 스쿨 · 글자 지구 끝 ── */

/* ── 태풍 만들기 · 손으로 하는 단계 ── */
.ty-cap{position:absolute;z-index:3;left:clamp(10px,1.6vw,18px);top:clamp(10px,1.6vw,18px);max-width:min(560px,calc(100% - 20px));margin:0;padding:12px 16px 13px;border-radius:16px;background:rgba(8,24,44,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;pointer-events:none}
.ty-cap h2{margin:0;font-size:clamp(16px,1.6vw,20px);font-weight:900;letter-spacing:-.03em;color:#fff}
.ty-cap p{margin:6px 0 0;font-size:clamp(13px,1.15vw,15.5px);font-weight:600;line-height:1.5;color:rgba(255,255,255,.92);word-break:keep-all}
.ty-do{position:absolute;z-index:3;left:50%;bottom:clamp(12px,2vw,22px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font:inherit;font-size:clamp(15px,1.5vw,18px);font-weight:900;letter-spacing:-.02em;box-shadow:0 10px 26px -10px rgba(0,0,0,.5);cursor:pointer;white-space:nowrap}
.ty-do[hidden]{display:none}
.ty-do .ty-ic{width:26px;height:26px;flex:0 0 auto;background:center/contain no-repeat}
.ty-bar{position:relative;width:64px;height:8px;border-radius:99px;background:rgba(15,17,23,.12);overflow:hidden}
.ty-bar s{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#FFB13D,#FF5A2A)}
.ty-do.end{background:var(--lime)}
.ty-do.end .ty-bar{display:none}
.gm-typhoon[data-mode=heat] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.5c1.6 4.8 7 7.4 7 14.2A7 7 0 0 1 16 23.8a7 7 0 0 1-7-7.1c0-3.2 1.7-5 3-6.4.4 2.3 1.7 3.6 3.1 3.9C14.3 10.4 14.6 6.4 16 2.5z' fill='%23FF7A2F' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M13.4 18.6c0-1.6 1-2.6 2.6-4.2 1.6 1.6 2.6 2.6 2.6 4.2a2.6 2.6 0 0 1-5.2 0z' fill='%23FFD25A'/%3E%3Cpath d='M7.5 28.5h17' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M7.5 28.5h17' stroke='%23FF7A2F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,crosshair}
.gm-typhoon[data-mode=lift] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,n-resize}
.gm-typhoon[data-mode=spin] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%236E56E8' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%236E56E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,grab}
.gm-typhoon[data-mode=heat] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.5c1.6 4.8 7 7.4 7 14.2A7 7 0 0 1 16 23.8a7 7 0 0 1-7-7.1c0-3.2 1.7-5 3-6.4.4 2.3 1.7 3.6 3.1 3.9C14.3 10.4 14.6 6.4 16 2.5z' fill='%23FF7A2F' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M13.4 18.6c0-1.6 1-2.6 2.6-4.2 1.6 1.6 2.6 2.6 2.6 4.2a2.6 2.6 0 0 1-5.2 0z' fill='%23FFD25A'/%3E%3Cpath d='M7.5 28.5h17' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M7.5 28.5h17' stroke='%23FF7A2F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.gm-typhoon[data-mode=lift] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-typhoon[data-mode=spin] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%236E56E8' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%236E56E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-typhoon[data-mode=done] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230F1117' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-typhoon[data-mode=lift] .ty-bar s{background:linear-gradient(90deg,#9FD3FF,#2A78C8)}
.gm-typhoon[data-mode=spin] .ty-bar s{background:linear-gradient(90deg,#B9A8FF,#6E56E8)}
.gm-typhoon .ty-cv{touch-action:none}
@media(max-width:640px){.ty-cap{padding:10px 12px}.ty-cap p{font-size:12.5px;line-height:1.45}.ty-do{font-size:15px;padding:9px 14px 9px 10px}.ty-bar{width:48px}}
/* 재난 대응 훈련 · 폭염의 하루: 보기 카드를 그림 속 아이에게 끌어다 놓기 */
.gm-drill.is-q .gm-opt,.gm-heatday.is-q .gm-opt{touch-action:none;cursor:grab;position:relative}
.gm-drill.is-q .gm-opt::after,.gm-heatday.is-q .gm-opt::after{content:"";margin-left:auto;flex:none;width:12px;height:20px;opacity:.35;background:radial-gradient(circle,currentColor 1.6px,transparent 2px) 0 0/6px 6.6px}
.gm-opt.drag{z-index:30;cursor:grabbing;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);transition:none!important}
.gm-drill.is-drag .gm-ov,.gm-heatday.is-drag .gm-ov{z-index:20}
.gm-drill.is-drag .gm-pan,.gm-heatday.is-drag .gm-pan{overflow:visible}
.gm-drill.is-q .gm-stage::after,.gm-heatday.is-q .gm-stage::after{content:"";position:absolute;z-index:8;left:4%;top:9%;width:44%;height:82%;border:3px dashed rgba(255,255,255,.95);border-radius:28px;background:rgba(255,255,255,.14);opacity:0;transform:scale(.97);transition:opacity .2s,transform .2s,background .2s,border-color .2s;pointer-events:none}
.gm-drill.is-drag .gm-stage::after,.gm-heatday.is-drag .gm-stage::after{opacity:1;transform:none}
.gm-drill.drop-on .gm-stage::after,.gm-heatday.drop-on .gm-stage::after{background:rgba(198,242,77,.32);border-color:#C6F24D}
@media(max-width:640px){.gm-drill.is-q .gm-stage::after,.gm-heatday.is-q .gm-stage::after{left:4%;top:8px;width:92%;height:calc(62vw - 16px)}}
/* 눈 만들기: 같은 무대 · 같은 자막 · 같은 알약, 손 모양만 다르게 */
.gm-snow .gm-stage{background:#9CC6EC}
.gm-snow .ty-cv{touch-action:none}
.gm-snow[data-mode=heat] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23FFB000' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='6.6' fill='%23FFD23F' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 16 16,crosshair}
.gm-snow[data-mode=heat] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23FFB000' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='6.6' fill='%23FFD23F' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E")}
.gm-snow[data-mode=lift] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,n-resize}
.gm-snow[data-mode=lift] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-snow[data-mode=cool] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4v24M5.6 10l20.8 12M5.6 22l20.8-12' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M16 4v24M5.6 10l20.8 12M5.6 22l20.8-12' fill='none' stroke='%233D9BEA' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M12.4 6.6 16 9.2l3.6-2.6M12.4 25.4 16 22.8l3.6 2.6' fill='none' stroke='%233D9BEA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,crosshair}
.gm-snow[data-mode=cool] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4v24M5.6 10l20.8 12M5.6 22l20.8-12' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M16 4v24M5.6 10l20.8 12M5.6 22l20.8-12' fill='none' stroke='%233D9BEA' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M12.4 6.6 16 9.2l3.6-2.6M12.4 25.4 16 22.8l3.6 2.6' fill='none' stroke='%233D9BEA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-snow[data-mode=grow] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%232A9BD8' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%232A9BD8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,grab}
.gm-snow[data-mode=grow] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M7 16a9 9 0 1 0 3.2-6.9' fill='none' stroke='%232A9BD8' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6 3.8l.6 5.3-5.3.6' fill='none' stroke='%232A9BD8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-snow[data-mode=drop] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4v22M8 18.5l8 8 8-8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 4v22M8 18.5l8 8 8-8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,s-resize}
.gm-snow[data-mode=drop] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4v22M8 18.5l8 8 8-8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 4v22M8 18.5l8 8 8-8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-snow[data-mode=done] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230F1117' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-snow[data-mode=heat] .ty-bar s{background:linear-gradient(90deg,#FFD23F,#FF9A1F)}
.gm-snow[data-mode=lift] .ty-bar s,.gm-snow[data-mode=drop] .ty-bar s{background:linear-gradient(90deg,#9FD3FF,#2A78C8)}
.gm-snow[data-mode=cool] .ty-bar s,.gm-snow[data-mode=grow] .ty-bar s{background:linear-gradient(90deg,#CBEAFF,#3D9BEA)}
/* 체험 이름이 두 번 보이지 않게: 표지 · 결과 카드에 이름이 크게 나올 때는 위 막대의 이름을 숨긴다 */
.gm.is-cover .gm-t,.gm.is-end .gm-t{visibility:hidden}
/* 비 내리기: 같은 무대 · 같은 자막 · 같은 알약, 손 모양만 다르게 */
.gm-rain .gm-stage{background:#C9B98E}
.gm-rain .ty-cv{touch-action:none}
.gm-rain[data-mode=heat] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23FFB000' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='6.6' fill='%23FFD23F' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 16 16,crosshair}
.gm-rain[data-mode=heat] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8' stroke='%23FFB000' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='6.6' fill='%23FFD23F' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E")}
.gm-rain[data-mode=wind] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 12h17a4 4 0 1 0-4-4M4 20h21a4 4 0 1 1-4 4' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12h17a4 4 0 1 0-4-4M4 20h21a4 4 0 1 1-4 4' fill='none' stroke='%232AA7A0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,e-resize}
.gm-rain[data-mode=wind] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 12h17a4 4 0 1 0-4-4M4 20h21a4 4 0 1 1-4 4' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12h17a4 4 0 1 0-4-4M4 20h21a4 4 0 1 1-4 4' fill='none' stroke='%232AA7A0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-rain[data-mode=lift] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,n-resize}
.gm-rain[data-mode=lift] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 28V6M8 13.5 16 5.5l8 8' fill='none' stroke='%232A78C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-rain[data-mode=rain] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3.5C12.2 9.6 7.5 14.2 7.5 19.6a8.5 8.5 0 0 0 17 0c0-5.4-4.7-10-8.5-16.1z' fill='%233D9BEA' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M12 20a4 4 0 0 0 3 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,crosshair}
.gm-rain[data-mode=rain] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3.5C12.2 9.6 7.5 14.2 7.5 19.6a8.5 8.5 0 0 0 17 0c0-5.4-4.7-10-8.5-16.1z' fill='%233D9BEA' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M12 20a4 4 0 0 0 3 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.gm-rain[data-mode=grow] .ty-cv{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 26C6 14.5 13.5 6.5 26.5 5.5 26.5 18 18.5 26 6 26z' fill='%234FB35A' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M6 26 19 13' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,crosshair}
.gm-rain[data-mode=grow] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 26C6 14.5 13.5 6.5 26.5 5.5 26.5 18 18.5 26 6 26z' fill='%234FB35A' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M6 26 19 13' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.gm-rain[data-mode=done] .ty-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230F1117' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gm-rain[data-mode=heat] .ty-bar s{background:linear-gradient(90deg,#FFD23F,#FF9A1F)}
.gm-rain[data-mode=wind] .ty-bar s{background:linear-gradient(90deg,#B6F0E8,#2AA7A0)}
.gm-rain[data-mode=lift] .ty-bar s,.gm-rain[data-mode=rain] .ty-bar s{background:linear-gradient(90deg,#9FD3FF,#2A78C8)}
.gm-rain[data-mode=grow] .ty-bar s{background:linear-gradient(90deg,#C8F0A0,#3FA34D)}
/* 기후 꾸러기: 다섯 장 — 만들기 두 장은 크게(위), 나머지 세 장(아래) */
@media (min-width:901px){.gpart .grid.xgrid.x5{grid-template-columns:repeat(6,minmax(0,1fr))}.gpart .grid.xgrid.x5>.xcard{grid-column:span 2}.gpart .grid.xgrid.x5>.xcard:nth-child(-n+2){grid-column:span 3}}
/* 기후 꾸러기: 여섯 장 — 만들기 세 장(태풍 · 눈 · 비), 나머지 세 장 */
@media (min-width:901px){.gpart .grid.xgrid.x6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:601px) and (max-width:900px){.gpart .grid.xgrid.x5>.xcard:last-child{grid-column:1/-1}}
/* 기후 OX 대회: 위 큰 문제 · 아래 왼쪽 O 오른쪽 X · 지구 바둑알 */
.gm-ox .gm-stage{aspect-ratio:16/10;background:linear-gradient(180deg,#EAF3FD,#D3E6F8)}
.gm-ox .ox-q{position:absolute;z-index:4;left:50%;top:4%;transform:translateX(-50%);width:min(92%,980px);margin:0;padding:clamp(14px,2vw,26px) clamp(18px,2.6vw,36px) clamp(22px,2.4vw,30px);border-radius:clamp(18px,2vw,28px);background:#fff;box-shadow:0 14px 34px -14px rgba(20,40,80,.35);text-align:center}
.gm-ox .ox-t{margin:0;min-height:2.7em;display:flex;align-items:center;justify-content:center;font-size:clamp(19px,2.5vw,34px);font-weight:900;letter-spacing:-.035em;line-height:1.35;color:var(--ink);word-break:keep-all}
.gm-ox .ox-tm{position:absolute;left:clamp(18px,2.6vw,36px);right:clamp(18px,2.6vw,36px);bottom:10px;height:6px;border-radius:99px;background:rgba(15,17,23,.08);overflow:hidden}
.gm-ox .ox-tm i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#FFB13D,#FF5A2A)}
.gm-ox .ox-field{position:absolute;left:0;right:0;bottom:0;top:31%;display:grid;grid-template-columns:1fr 1fr;touch-action:none}
.gm-ox .ox-side{position:relative;border:0;margin:0;padding:0;cursor:pointer;font:inherit;display:flex;align-items:center;justify-content:center;transition:background .25s,filter .25s}
.gm-ox .ox-side.o{background:linear-gradient(180deg,rgba(43,120,214,.08),rgba(43,120,214,.22))}
.gm-ox .ox-side.x{background:linear-gradient(180deg,rgba(232,69,43,.07),rgba(232,69,43,.2));border-left:3px dashed rgba(255,255,255,.95)}
.gm-ox .ox-side b{font-size:clamp(120px,21vw,290px);font-weight:900;line-height:1;letter-spacing:0;opacity:.2;transition:opacity .3s,transform .3s}
.gm-ox .ox-side.o b{color:#2B78D6}
.gm-ox .ox-side.x b{color:#E8452B}
.gm-ox .ox-side:hover b,.gm-ox .ox-side[aria-pressed=true] b{opacity:.32}
.gm-ox .ox-side.win b{opacity:.95;transform:scale(1.05)}
.gm-ox .ox-side.lose{filter:grayscale(.75) brightness(.92)}
.gm-ox .ox-side[aria-disabled=true]{cursor:default}
.gm-ox .ox-side:focus-visible{outline:3px solid rgba(255,255,255,.95);outline-offset:-10px}
.gm-ox.is-cover .ox-q{visibility:hidden}
.gm-ox .ox-stones{position:absolute;inset:0;pointer-events:none}
.gm-ox .oxs{position:absolute;width:clamp(40px,5.2vw,68px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 5px 0 #C3D2E2,0 12px 18px -6px rgba(20,40,80,.42);transition-property:left,top,opacity,transform;transition-timing-function:cubic-bezier(.45,.05,.3,1)}
.gm-ox .oxs img{position:absolute;left:7%;top:7%;width:86%;height:86%;border-radius:50%;pointer-events:none}
.gm-ox .oxs.me{z-index:3;box-shadow:0 0 0 4px var(--lime),0 5px 0 4px #93AE42,0 12px 18px -6px rgba(20,40,80,.45);pointer-events:auto;cursor:grab}   /* 다른 지구와 같은 크기, 연두 테두리로 구분 */
.gm-ox .oxs.drag{transition:none!important;cursor:grabbing}
.gm-ox .oxs.out{opacity:0;transform:translate(-50%,20%) scale(.5);transition-duration:.7s!important}
.gm-ox .oxs.hurt{animation:ox-hurt .5s}
@keyframes ox-hurt{20%,60%{margin-left:-8px}40%,80%{margin-left:8px}}
@media(max-width:640px){.gm-ox .gm-stage{aspect-ratio:3/4}.gm-ox .ox-q{top:3%;width:94%}.gm-ox .ox-t{font-size:18px;min-height:4em}.gm-ox .ox-field{top:36%}.gm-ox .ox-side b{font-size:40vw}}
@media(prefers-reduced-motion:reduce){.gm-ox .oxs{transition-duration:0s!important}.gm-ox .oxs.hurt{animation:none}}
/* 머리글: 메뉴가 접히는 폭에서는 검색 · 학교 버튼 · 메뉴 버튼을 오른쪽 끝에 */
@media(max-width:1240px){.nav menu{display:none}.nav .rt{margin-left:auto}}   /* 메뉴가 여섯 개라 1240 이하에선 메뉴 버튼으로 */
@media(min-width:1241px) and (max-width:1500px){.nav .search{width:min(160px,11vw)}.nav menu{gap:clamp(12px,1.35vw,22px)}}
/* 관리 · 실시간 OX 대회 */
.oxa-sch .oxa-at{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--mute)}
.oxa-sch .oxa-at input{font:inherit;font-weight:700;color:var(--ink);padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.orgedit h2{grid-column:1/-1;margin:10px 0 0;font-size:19px}
.orgimg{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.orgimg .oimg{width:132px;aspect-ratio:4/3;border-radius:12px;border:1.5px dashed var(--line);background:var(--bg) center/cover no-repeat}
.orgimg .oimg.on{border-style:solid}
.orgimg .oimg-pick{cursor:pointer;position:relative}
.orgimg .oimg-pick:focus-within{outline:3px solid var(--peri-tx);outline-offset:2px}
.ophoto.oimg{background:#fff}
.admedit input[type=url]{font:inherit;font-size:16px;font-weight:500;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%}
.oxa{display:grid;gap:12px}
#pane-ox .tb[disabled]{opacity:1;background:var(--bg);color:#9AA0AB;border-color:var(--line)}
.oxa-st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.oxa-st div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.oxa-st dt{font-size:13.5px;font-weight:700;color:var(--mute)}
.oxa-st dd{margin:4px 0 0;font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.oxa-now{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.oxa-q{margin:0;font-size:clamp(18px,1.9vw,24px);font-weight:800;line-height:1.4;letter-spacing:-.02em}
.oxa-ox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.oxa-ox span{border-radius:100px;padding:7px 16px;font-weight:800;background:var(--bg);font-variant-numeric:tabular-nums}
.oxa-ox .o{color:#2B78D6}.oxa-ox .x{color:#E8452B}
.oxa-ox span.on{background:var(--ink);color:#fff}
.oxa-ox .oxa-tm{margin-left:auto;background:none;color:var(--ink);font-size:20px}
.oxa-win{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.oxa-win span{background:var(--lime-2);border-radius:100px;padding:6px 14px;font-weight:700}
.oxa-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.oxa-list li{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;line-height:1.5}
.oxa-list li.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.oxa-list li.done{background:var(--bg);color:var(--mute)}
.oxa-list b{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px}
.oxa-list b.o{background:#2B78D6}.oxa-list b.x{background:#E8452B}
@media(max-width:640px){.oxa-st{grid-template-columns:1fr 1fr}}
/* OX 대회 · 틀린 쪽에 닥치는 재난(판마다 하나)과 사라지는 지구 */
.gm-ox .ox-dz{position:absolute;top:0;bottom:0;width:50%;z-index:5;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden}
.gm-ox .ox-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s}
.gm-ox .ox-fx.on{opacity:1}.gm-ox .ox-fx.back{z-index:1}.gm-ox .ox-fx.front{z-index:4}.gm-ox .ox-stones{z-index:2}
.gm-ox.nudge .ox-side{animation:ox-nudge .7s ease-in-out infinite alternate}
.gm-ox.nudge .ox-side.x{animation-delay:.35s}
@keyframes ox-nudge{to{filter:brightness(1.12) saturate(1.3);box-shadow:inset 0 0 0 4px rgba(255,255,255,.85)}}
.gm-ox .ox-dz.on{opacity:1;visibility:visible;transition:opacity .45s}
.gm-ox .ox-dz.at-o{left:0}.gm-ox .ox-dz.at-x{left:50%}
.gm-ox .ox-dz b{position:absolute;left:50%;top:46%;translate:-50% -50%;font-size:clamp(30px,4.6vw,64px);font-weight:900;letter-spacing:-.03em;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.32);white-space:nowrap;animation:dz-word 3.4s ease forwards}
@keyframes dz-word{0%{opacity:0;scale:.6}14%{opacity:1;scale:1.08}24%{scale:1}78%{opacity:1}100%{opacity:0}}
.gm-ox .oxs.gone{animation:1.5s var(--dl,0s) cubic-bezier(.45,.05,.55,1) forwards;pointer-events:none}
.gm-ox .oxs.gd-heat{animation-name:gd-heat}.gm-ox .oxs.gd-typhoon{animation-name:gd-typhoon}.gm-ox .oxs.gd-rain{animation-name:gd-rain}
.gm-ox .oxs.gd-snow{animation-name:gd-snow}.gm-ox .oxs.gd-drought{animation-name:gd-drought}.gm-ox .oxs.gd-cold{animation-name:gd-cold}
@keyframes gd-heat{30%{filter:sepia(1) saturate(5) hue-rotate(-35deg) brightness(1.05);scale:1.06 .94}100%{filter:sepia(1) saturate(6) hue-rotate(-40deg) blur(2px);scale:1.6 .04;translate:0 40%;opacity:0}}
@keyframes gd-typhoon{18%{rotate:-50deg;translate:0 -8px}100%{rotate:1080deg;translate:calc(var(--dx,0) * 180px) -280px;scale:.2;opacity:0}}
@keyframes gd-rain{22%{translate:0 -8px}100%{translate:calc(var(--dx,0) * 70px) 190px;rotate:calc(var(--dx,0) * 220deg);filter:brightness(.6) saturate(.5);opacity:0}}
@keyframes gd-snow{45%{filter:brightness(1.7) saturate(.15);scale:1.08}100%{filter:brightness(2.3) saturate(0) blur(3px);scale:1.25 .35;translate:0 45%;opacity:0}}
@keyframes gd-drought{40%{filter:sepia(1) saturate(.7) brightness(.85) contrast(1.15);scale:.94}100%{filter:sepia(1) saturate(.4) brightness(.65) blur(3px);scale:.15;translate:0 22px;opacity:0}}
@keyframes gd-cold{45%{filter:saturate(.25) brightness(1.35) hue-rotate(160deg) drop-shadow(0 0 8px #CFEFFF);scale:1}62%{scale:1.14}100%{filter:saturate(0) brightness(2.2) blur(5px);scale:1.7;opacity:0}}
@media(prefers-reduced-motion:reduce){.gm-ox .oxs.gone{animation:none;opacity:0}.gm-ox .ox-dz *{animation:none!important}.gm-ox.nudge .ox-side{animation:none}}
@media(max-width:640px){.gm-ox .ox-dz b{font-size:34px}}
/* 기후 스쿨 · 큰 카드의 3D 워드 클라우드(돌아간다 · 마우스 쪽으로 · 끌어서 돌리기) */
.phead .thart.sglobe{display:flex;align-items:center;justify-content:center;aspect-ratio:1;max-height:520px}
.phead .thart.sglobe .sgw{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.phead .thart.sglobe canvas{display:block;max-width:100%}
/* 실시간 OX 결과: 우승(폭죽) · 다음 기회에(탈락한 재난이 뒤에서 살짝) — 보조 문구 없이 큰 글자와 내 지구만 */
.gm-ox.res-win .gm-end{background:radial-gradient(120% 90% at 50% 40%,rgba(40,30,110,.82),rgba(10,8,34,.9))}
.gm-ox.res-lose .gm-end{background:rgba(12,16,30,.5)}
.gm-ox .ox-party{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.gm-ox .gm-ec.res{position:relative;z-index:1;background:none;box-shadow:none;gap:clamp(8px,1.4vw,16px)}
.gm-ox .gm-ec.res{width:auto;max-width:100%}
.gm-ox .gm-ec.res .gm-big b{font-size:clamp(44px,7.6vw,108px);white-space:nowrap;color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.35)}
.gm-ox .gm-ec.res.win .gm-big b{background:linear-gradient(180deg,#FFF7C2 0%,#FFD63F 50%,#FF9B2B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 22px rgba(255,190,60,.55));animation:res-pop .7s cubic-bezier(.2,1.4,.4,1) both}
.gm-ox .gm-ec.res.lose .gm-big b{animation:res-in .8s ease both}
.gm-ox .ox-res-earth{display:block;width:clamp(96px,13vw,156px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 10px 0 #C3D2E2,0 24px 40px -10px rgba(0,0,0,.5)}
.gm-ox .ox-res-earth img{display:block;width:100%;height:100%;padding:7%;box-sizing:border-box}
.gm-ox .ox-res-earth.win{box-shadow:0 0 0 6px #FFD63F,0 10px 0 6px #E0A21F,0 30px 50px -10px rgba(0,0,0,.55);animation:res-jump .55s cubic-bezier(.3,.7,.4,1) infinite alternate}
.gm-ox .ox-res-earth.lose{opacity:.92;animation:res-sad 2.6s ease-in-out infinite}
.gm-ox .ox-res-earth.dz-heat img{filter:sepia(.5) saturate(2.4) hue-rotate(-28deg)}
.gm-ox .ox-res-earth.dz-heat{animation:res-melt 2s ease-in-out infinite}
.gm-ox .ox-res-earth.dz-snow img{filter:brightness(1.2) saturate(.45)}
.gm-ox .ox-res-earth.dz-snow{box-shadow:inset 0 14px 0 -4px #fff,0 10px 0 #C3D2E2,0 24px 40px -10px rgba(0,0,0,.5)}
.gm-ox .ox-res-earth.dz-rain img{filter:saturate(.8) brightness(.92) hue-rotate(8deg)}
.gm-ox .ox-res-earth.dz-rain{animation:res-float 2.4s ease-in-out infinite}
.gm-ox .ox-res-earth.dz-cold img{filter:hue-rotate(150deg) saturate(.45) brightness(1.25)}
.gm-ox .ox-res-earth.dz-cold{box-shadow:0 0 0 5px rgba(200,236,255,.9),0 10px 0 5px #9CC8E8,0 24px 40px -10px rgba(0,0,0,.5);animation:res-shiver .18s linear infinite}
.gm-ox .ox-res-earth.dz-drought img{filter:sepia(.75) saturate(.75) brightness(.92)}
.gm-ox .ox-res-earth.dz-typhoon{animation:res-spin 3s ease-in-out infinite}
@keyframes res-pop{0%{opacity:0;scale:.4}100%{opacity:1;scale:1}}
@keyframes res-in{0%{opacity:0;translate:0 18px}100%{opacity:1;translate:0 0}}
@keyframes res-jump{from{translate:0 0;scale:1.04 .96}to{translate:0 -18px;scale:1}}
@keyframes res-sad{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 6px;rotate:4deg}}
@keyframes res-melt{0%,100%{scale:1 1}50%{scale:1.06 .9;translate:0 6px}}
@keyframes res-float{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -10px;rotate:6deg}}
@keyframes res-shiver{0%,100%{translate:-2px 0}50%{translate:2px 0}}
@keyframes res-spin{0%,100%{rotate:-18deg}50%{rotate:18deg}}
@media(prefers-reduced-motion:reduce){.gm-ox .ox-res-earth,.gm-ox .gm-ec.res .gm-big b{animation:none!important}}
/* ── 태풍 만들기 · 손으로 하는 단계 끝 ── */
/* ══ 관리 화면 · 바이올렛 ══ */
main.adm{--a-line:#DCD9FF;--a-soft:#F6F5FF;--a-tint:var(--peri-3)}
main.adm>.sec{margin-top:0;padding-top:clamp(18px,2vw,26px)}
main.adm>#admWait{margin-top:clamp(18px,2vw,26px)}
/* 메뉴 · 오른쪽 버튼 */
main.adm .rtabs{background:var(--a-tint)}
main.adm .rtabs button{color:var(--peri-d)}
main.adm .rtabs button:hover{background:rgba(79,72,239,.1)}
main.adm .rtabs button[aria-selected="true"],main.adm .rtabs button[aria-selected="true"]:hover{background:var(--peri);color:#fff;box-shadow:0 4px 12px rgba(79,72,239,.28)}
main.adm .tb{background:var(--card);color:var(--peri-d);box-shadow:inset 0 0 0 1.5px var(--a-line);border-color:var(--a-line)}
main.adm .tb:hover,main.adm .tb[aria-pressed="true"]{background:var(--a-tint);color:var(--peri-d)}
main.adm .tb.k{background:var(--peri);color:#fff;box-shadow:none}
main.adm .tb.k:hover{background:var(--peri-d);color:#fff}
main.adm .tb.warn{background:#FFE9E1;color:#B5401F;box-shadow:inset 0 0 0 1.5px #F3B9A6}
main.adm #pane-ox .tb[disabled]{background:var(--a-soft);color:#A3A0CC;box-shadow:inset 0 0 0 1.5px #ECEAFB}
main.adm .tb:focus-visible,main.adm .admchip:focus-visible,main.adm .rtabs button:focus-visible{outline:3px solid var(--peri-tx);outline-offset:2px}
/* 거르기 · 찾기 */
main.adm .admchip{border-color:var(--a-line);color:var(--ink-2)}
main.adm .admchip:hover{background:var(--a-soft)}
main.adm .admchip b{color:var(--peri-tx)}
main.adm .admchip[aria-pressed="true"]{background:var(--peri);border-color:var(--peri);color:#fff}
main.adm .admchip[aria-pressed="true"] b{color:var(--lime)}
main.adm .admq input,main.adm .oxa-sch .oxa-at input,main.adm .admsel.st-cancel,main.adm .admnum{border-color:var(--a-line)}
main.adm .admq input:focus,main.adm .oxa-sch .oxa-at input:focus{outline:none;border-color:var(--peri);box-shadow:0 0 0 3px var(--a-tint)}
/* 표 · 목록 */
main.adm .admtbl{border-color:var(--a-line)}
main.adm .admtbl th{background:var(--a-tint);color:var(--peri-d)}
main.adm .admtbl td{border-top-color:#EEECFF}
main.adm .admtbl tbody tr:hover td{background:var(--a-soft)}
main.adm .admnone{background:var(--a-soft);color:var(--peri-d);box-shadow:inset 0 0 0 1px #ECEAFB}
main.adm .admprogs li,main.adm .admposts li{border-color:var(--a-line)}
main.adm .admprogs li.off{background:var(--a-soft)}
main.adm .admtags em{background:var(--a-tint);color:var(--peri-d)}
main.adm .admkv dt{color:var(--peri-tx)}
/* 입력 화면 */
main.adm .admbox,main.adm .admedit{border-color:var(--a-line)}
main.adm .admedit h2{color:var(--peri-d)}
main.adm .admedit input[type=text],main.adm .admedit input[type=url],main.adm .admedit textarea{border-color:var(--a-line)}
main.adm .admedit input:focus,main.adm .admedit textarea:focus{outline:none;border-color:var(--peri);box-shadow:0 0 0 3px var(--a-tint)}
main.adm .admedit label.chk input{accent-color:var(--peri)}
main.adm .admstep{background:var(--a-soft);border-color:var(--a-line)}
main.adm .orgimg .oimg{border-color:var(--a-line);background-color:var(--a-soft)}
/* 로그인 · 휴대폰 연결 */
main.adm .admlogin .admbox,main.adm .admphone{box-shadow:0 18px 40px -24px rgba(46,41,180,.35)}
main.adm .admf input{border-color:var(--a-line)}
main.adm .admf input:focus{border-color:var(--peri);box-shadow:0 0 0 3px var(--a-tint)}
main.adm .pill.k{background:var(--peri);color:#fff}
main.adm .pill.k:hover{background:var(--peri-d);color:#fff;transform:none}
/* 실시간 OX 대회 */
main.adm .oxa-st{grid-template-columns:repeat(5,minmax(0,1fr))}
main.adm .oxa-st div{border-color:var(--a-line)}
main.adm .oxa-st div:first-child{background:var(--peri);border-color:var(--peri);color:#fff}
main.adm .oxa-st div:first-child dt{color:rgba(255,255,255,.78)}
main.adm .oxa-st dt{color:var(--peri-tx)}
main.adm .oxa-now{border-color:var(--a-line)}
main.adm .oxa-ox span{background:var(--a-soft)}
main.adm .oxa-ox span.on{background:var(--peri);color:#fff}
main.adm .oxa-list li{border-color:var(--a-line)}
main.adm .oxa-list li.on{border-color:var(--peri);box-shadow:inset 0 0 0 1px var(--peri)}
main.adm .oxa-list li.done{background:var(--a-soft)}
@media(max-width:900px){main.adm .oxa-st{grid-template-columns:repeat(2,minmax(0,1fr))}main.adm .oxa-st div:first-child{grid-column:1/-1}}
/* 견학 신청: 확정된 시간 */
.apslot .slot.off,.apslot .slot.off input{cursor:not-allowed}
.apslot .slot.off span,.apslot .slot.off:hover span{background:transparent;color:#A9ACB4;box-shadow:none;outline:1.5px dashed #D3D5DB;outline-offset:-1.5px;text-decoration:line-through;text-decoration-thickness:2px}
/* 관리 · OX 문제(그룹별) */
.oxqedit{display:grid;gap:16px}
.oxgs{display:grid;gap:16px}
.oxg{margin:0;min-width:0;display:grid;gap:14px;background:var(--card);border:1px solid #DCD9FF;border-radius:var(--r-lg);padding:18px 20px}
.oxg.off{background:#F6F5FF}
.oxg.off .oxg-qs{opacity:.6}
.oxg-hd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.oxg-hd label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:800;color:var(--ink-2)}
.oxg-hd .oxg-name{flex:1 1 240px}
.oxg-hd input[type=text]{font:inherit;font-size:18px;font-weight:800;padding:10px 12px;border:1.5px solid #DCD9FF;border-radius:10px;background:var(--card);color:var(--ink);width:100%;min-height:46px}
.oxg-hd .admsel{min-height:46px}
.oxg-hd label.chk{flex-direction:row;align-items:center;gap:8px;min-height:46px}
.oxg-hd label.chk input{width:20px;height:20px;accent-color:var(--peri)}
.oxg-hd .admact{margin-left:auto}
.oxg-qs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oxq-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.oxq-row textarea{display:block;font:inherit;font-size:16px;font-weight:600;line-height:1.5;padding:10px 12px;border:1.5px solid #DCD9FF;border-radius:10px;background:var(--card);color:var(--ink);width:100%;min-height:48px;resize:none;overflow:hidden}
.oxg-hd input[type=text]:focus,.oxq-row textarea:focus{outline:none;border-color:var(--peri);box-shadow:0 0 0 3px var(--peri-3)}
.oxq-a{display:flex;gap:4px}
.oxq-a label{position:relative;display:block}
.oxq-a input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.oxq-a span{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;border:1.5px solid #DCD9FF;background:var(--card);font-size:20px;font-weight:900}
.oxq-a .o span{color:#2B78D6}.oxq-a .x span{color:#E8452B}
.oxq-a .o input:checked+span{background:#2B78D6;border-color:#2B78D6;color:#fff}
.oxq-a .x input:checked+span{background:#E8452B;border-color:#E8452B;color:#fff}
.oxq-a input:focus-visible+span{outline:3px solid var(--peri-tx);outline-offset:2px}
@media(max-width:640px){.oxg{padding:14px}.oxq-row{grid-template-columns:auto minmax(0,1fr);row-gap:6px;padding-bottom:10px;border-bottom:1px dashed #E6E4FF}.oxq-row:last-child{border-bottom:0;padding-bottom:0}.oxq-row .oxq-t{grid-column:1/-1}.oxg-hd .admact{margin-left:0;width:100%}}
/* 기후 OX 대회: 게임은 화면 가득(START 부터) · × 로 작게 */
html.gm-lock,html.gm-lock body{overflow:hidden}
.gm-ox .gm-x{display:none}
.gm-ox.is-full{position:fixed;inset:0;z-index:1000;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;gap:8px;background:var(--card);
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.gm-ox.is-full .gm-stage{flex:1 1 auto;min-height:0;aspect-ratio:auto;height:auto}
.gm-ox.is-full .gm-dock{display:none}
.gm-ox.is-full .gm-x{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:2px;padding:0;border:0;border-radius:50%;background:var(--bg);color:var(--ink);font:inherit;font-size:28px;font-weight:500;line-height:1;cursor:pointer}
.gm-ox.is-full .gm-x:hover{background:var(--peri-3);color:var(--peri-d)}
.gm-ox.is-full .gm-x:focus-visible{outline:3px solid var(--peri-tx);outline-offset:2px}
@media(min-width:641px){.gm-ox.is-full .ox-field{top:26%}}
/* 실시간 대회 5분 전 알림 */
.ox-pop{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 32px);overflow:auto;border:0;padding:clamp(26px,4vw,40px) clamp(22px,4vw,44px) clamp(22px,3vw,30px);border-radius:28px;width:min(420px,calc(100vw - 32px));text-align:center;background:#fff;color:var(--ink);box-shadow:0 30px 70px -20px rgba(20,24,60,.5)}
.ox-pop::backdrop{background:rgba(22,20,70,.55);backdrop-filter:blur(3px)}
.ox-pop img{width:84px;height:84px;border-radius:50%;display:block;margin:0 auto 14px;box-shadow:0 0 0 5px var(--lime)}
.ox-pop p{margin:0 0 22px;font-size:clamp(21px,2.6vw,26px);font-weight:900;letter-spacing:-.035em;line-height:1.35;word-break:keep-all}
.ox-pop-ok{font:inherit;font-size:17px;font-weight:800;min-height:52px;width:100%;border:0;border-radius:100px;background:var(--peri);color:#fff;cursor:pointer}
/* 실시간 대회 안내의 접속 QR(남은 초 표지 · 곧 시작 창 · 참가 표지) */
.gm-ox .ox-soon{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,2.6vw,34px)}
.ox-qr{margin:0;display:grid;justify-items:center;gap:8px}
.ox-qr[hidden]{display:none}
.ox-qr-c{display:block;width:clamp(128px,14vw,184px);aspect-ratio:1;padding:6px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px rgba(15,17,23,.08),0 10px 24px rgba(20,24,40,.12)}
.ox-qr-c svg{display:block;width:100%;height:100%;border-radius:10px}
.ox-qr figcaption{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink-2);word-break:break-all;text-align:center}
.gm-ox .gm-cv>.ox-qr{margin:4px 0 18px}
.gm-ox.cv-live .gm-cover{place-items:center;padding:16px;background:rgba(12,14,20,.42)}
.gm-ox.cv-live .gm-cv{justify-items:center;text-align:center;max-width:min(460px,94%);margin:0 auto}
.gm-ox.cv-live .ox-soon{flex-direction:column;justify-content:center;gap:16px}
.gm-ox.cv-live .gm-cnt{justify-content:center}
.ox-pop .ox-qr{justify-items:center;margin:0 auto 22px}
.oxa-qr{margin:18px auto;display:grid;justify-items:center;gap:10px}
.oxa-qr .ox-qr-c{width:min(280px,70vw)}
.oxa-qr figcaption{font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.ox-pop .ox-qr{margin:0 0 22px}
.ox-pop .ox-qr-c{width:min(210px,58vw)}
.ox-pop-ok:hover{background:var(--peri-d)}
.ox-pop-ok:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@media(max-width:640px){.gm-ox.is-full .ox-field{top:28%}}
/* OX: 실시간 대회 5분 전 — START 대신 남은 초 */
.gm-ox .gm-cnt{margin:2px 0 0;display:flex;align-items:baseline;gap:6px;color:var(--ink)}
.gm-ox .gm-cnt b{font-size:clamp(64px,8vw,112px);font-weight:900;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;color:var(--peri)}
.gm-ox .gm-cnt span{font-size:clamp(20px,2vw,28px);font-weight:900;color:var(--ink-2)}
/* OX 결과(다음 기회에 · 우승): 마당의 바둑알은 걷어서 글씨와 겹치지 않게 */
.gm-ox.res-lose .ox-stones,.gm-ox.res-win .ox-stones{opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
/* 메뉴 숨기기(관리 화면 「메뉴」 · site.js 가 html[data-hide] 를 붙인다) */
html[data-hide~="guide"] .fnav a[href$="guide/"],
html[data-hide~="guide"] a.tc[href$="guide/"],
html[data-hide~="guide"] a.pill[href$="guide/"],
html[data-hide~="play"] .fnav a[href$="play/"],
html[data-hide~="play"] a.tc[href$="play/"],
html[data-hide~="play"] a.pill[href$="play/"],
html[data-hide~="library"] .fnav a[href$="library/"],
html[data-hide~="library"] a.tc[href$="library/"],
html[data-hide~="library"] a.pill[href$="library/"],
html[data-hide~="ox"] .fnav a[href$="ox/"],
html[data-hide~="ox"] a.tc[href$="ox/"],
html[data-hide~="ox"] a.pill[href$="ox/"],
html[data-hide~="community"] .fnav a[href$="community/"],
html[data-hide~="community"] a.tc[href$="community/"],
html[data-hide~="community"] a.pill[href$="community/"],
html[data-hide~="experience"] .fnav a[href$="experience/"],
html[data-hide~="experience"] a.tc[href$="experience/"],
html[data-hide~="experience"] a.pill[href$="experience/"],
html[data-hide~="experience"] a.pill[href$="experience/apply"],
html[data-hide~="notice"] .fnav a[href$="notice/"],
html[data-hide~="notice"] a.tc[href$="notice/"],
html[data-hide~="notice"] a.pill[href$="notice/"],
html[data-hide~="notice"] a.hnotice{display:none!important}
html[data-hide~="guide"] li:has(> a[href$="guide/"]),
html[data-hide~="guide"] .card:has(> h3 > a[href$="guide/"]),
html[data-hide~="play"] li:has(> a[href$="play/"]),
html[data-hide~="play"] .card:has(> h3 > a[href$="play/"]),
html[data-hide~="library"] li:has(> a[href$="library/"]),
html[data-hide~="library"] .card:has(> h3 > a[href$="library/"]),
html[data-hide~="ox"] li:has(> a[href$="ox/"]),
html[data-hide~="ox"] .card:has(> h3 > a[href$="ox/"]),
html[data-hide~="community"] li:has(> a[href$="community/"]),
html[data-hide~="community"] .card:has(> h3 > a[href$="community/"]),
html[data-hide~="experience"] li:has(> a[href$="experience/"]),
html[data-hide~="experience"] .card:has(> h3 > a[href$="experience/"]),
html[data-hide~="experience"] li:has(> a[href$="experience/apply"]),
html[data-hide~="notice"] li:has(> a[href$="notice/"]),
html[data-hide~="notice"] .card:has(> h3 > a[href$="notice/"]){display:none!important}
/* 메인 화면 팝업(관리 화면 「팝업」) */
.spop{border:0;padding:0;margin:auto;background:transparent;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:visible}
.spop::backdrop{background:rgba(22,20,70,.55);backdrop-filter:blur(3px)}
.spop-card{background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(20,18,60,.32)}
.spop-pic a,.spop-pic img{display:block}
.spop-pic img{width:auto;height:auto;max-width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 116px);margin:0 auto}
.spop-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 10px 8px;border-top:1px solid var(--line)}
.spop-ft button{font:inherit;font-size:15px;font-weight:700;min-height:44px;padding:0 14px;border:0;border-radius:100px;background:none;color:var(--mute);cursor:pointer;letter-spacing:-.02em}
.spop-ft .spop-x{background:var(--ink);color:#fff;padding:0 24px}
.spop-ft .spop-day:hover{color:var(--ink)}
.spop-ft .spop-x:hover{background:var(--peri-d)}
.spop-ft button:focus-visible{outline:3px solid var(--peri-tx);outline-offset:2px}
/* 공지사항 */
.ntc{min-height:220px}
.ntc-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ntc-list li{border-bottom:1px solid var(--line)}
.ntc-list a{display:flex;align-items:center;gap:20px;padding:22px 12px;color:inherit;text-decoration:none;border-radius:12px}
.ntc-list .ntc-t{flex:1;min-width:0;font-size:clamp(17px,1.4vw,19px);font-weight:700;letter-spacing:-.025em;line-height:1.45;word-break:keep-all}
.ntc-list time{flex:none;font-size:15px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.ntc-list li.pin a{background:#F6F5FF}
.ntc-list li.pin .ntc-t{font-weight:900;color:var(--peri-d)}
.ntc-list a:hover .ntc-t{color:var(--peri-d);text-decoration:underline;text-underline-offset:4px}
.ntc-list a:focus-visible{outline:3px solid var(--peri-tx);outline-offset:-3px}
.ntc-none{margin:0;padding:56px 0;text-align:center;font-size:18px;font-weight:700;color:var(--mute);border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.ntc-doc{border-top:2px solid var(--ink)}
.ntc-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;padding:26px 4px 22px;border-bottom:1px solid var(--line)}
.ntc-hd h2{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.035em;line-height:1.35;word-break:keep-all}
.ntc-hd time{font-size:15px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.ntc-img{display:block;max-width:100%;height:auto;margin:28px auto 0;border-radius:var(--r-lg)}
.ntc-body{padding:26px 4px 8px;font-size:var(--fs-body);line-height:1.8;color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
.ntc-body p{margin:0 0 1.1em}
.ntc-body a{color:var(--peri-tx);text-decoration:underline;text-underline-offset:3px}
.ntc-back{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line);text-align:center}
@media(max-width:640px){.ntc-list a{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 6px}.ntc-hd{padding:20px 2px 18px}.ntc-body{padding:20px 2px 4px}}
/* 관리 · 공지사항 · 팝업 · 메뉴 */
.admedit input[type=date]{font:inherit;font-size:16px;font-weight:500;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%;min-height:46px}
main.adm .admedit input[type=date]{border-color:var(--a-line)}
main.adm .admedit input[type=date]:focus{outline:none;border-color:var(--peri);box-shadow:0 0 0 3px var(--a-tint)}
.popedit .poprow .orgimg .oimg{aspect-ratio:3/4;width:120px;background-size:contain}
.admmenus{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.admmenus li{background:var(--card);border:1px solid var(--a-line,#DCD9FF);border-radius:12px;padding:6px 14px}
.admmenus label.chk{min-height:44px}
.admmenus label.chk span{font-size:17px;font-weight:800}
.admmenus li:has(input:not(:checked)){background:var(--a-soft,#F6F5FF)}
.admmenus li:has(input:not(:checked)) span{color:var(--mute);text-decoration:line-through;text-decoration-thickness:2px}
/* 공지사항: 머리글 오른쪽 작은 메뉴(큰 메뉴가 보일 때만 — 좁은 화면은 휴대폰 메뉴 아래 줄) · 바닥글 줄 나눔 */
.nav .hnotice{display:none;align-items:center;min-height:44px;padding:0 6px;font-size:15px;font-weight:700;color:var(--ink-2);white-space:nowrap;text-decoration:none;letter-spacing:-.02em}
.nav .hnotice:hover{color:var(--peri-tx)}
.nav .hnotice[aria-current]{color:var(--peri-tx)}
.nav .hnotice:focus-visible{outline:3px solid var(--peri-tx);outline-offset:2px;border-radius:8px}
@media(min-width:1241px){.nav .hnotice{display:inline-flex}}
.mm-row a[aria-current]{background:var(--peri-3);color:var(--peri-d);border-color:var(--peri-3)}
.fnav .fbr{flex-basis:100%;height:0}
/* admkr — 푸터 jcec.kr: 로고 · 글자 → 홈, 메인의 .kr → 관리자 로그인 · 아이디 칸 */
.ftop .flogo a{display:block;width:100%;height:100%}
.fwm a.fhome{color:inherit;text-decoration:none}
.fwm .fkr{all:unset;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fwm a.fhome:focus-visible,.fwm .fkr:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:8px}
.admf input[type=email]{font:inherit;font-size:18px;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);min-height:54px;width:100%}
@media print{.fwm .fkr{display:none}}
/* /admkr */