:root,.on-photo,.top:not(.solid){
  /* 밤(블랙) — 기본값. 사진 위 글자와 투명 헤더는 테마와 상관없이 이 값을 쓴다 */
  --night:#0d0d14; --navy:#17172b; --paper:#f4efe8; --mute:#bdb9c8; --dim:#8f8b9c;
  --hair:rgba(244,239,232,.18); --action:#7DB6FF; --link-inv:#0A5BD3;
  --tint:244,239,232; --bgrgb:13,13,20; --mixbase:#17172b;
  color-scheme:dark;
}
:root{--latin:Montserrat,Pretendard,sans-serif;--pad:clamp(20px,3.4vw,48px)}
/* 낮(화이트) — 06:00–18:00. 같은 이름의 토큰을 밝은 값으로 바꾼다 */
:root[data-theme=light]{
  --night:#f7f4ef; --navy:#ece6dc; --paper:#15151f; --mute:#55515e; --dim:#6f6b78;
  --hair:rgba(21,21,31,.14); --action:#0A5BD3; --link-inv:#7DB6FF;
  --tint:21,21,31; --bgrgb:247,244,239; --mixbase:#000;
  color-scheme:light;
}
/* 강의 강조색 글자: 어두운 바탕에선 밝은 톤(--on-dark), 밝은 바탕에선 원색(--accent) */
*{--ac:var(--on-dark)}
:root[data-theme=light] *{--ac:var(--accent)}
:root[data-theme=light] .on-photo,:root[data-theme=light] .on-photo *,:root[data-theme=light] .top:not(.solid) *{--ac:var(--on-dark)}
.on-photo{color:var(--paper)}
/* 사진 위 투명 헤더: 토큰만 밤 값이고 글자색은 body(낮엔 먹색)를 물려받아 메뉴가 검게 보였다 → 글자색도 밤 값으로(2026-10-19) */
.top:not(.solid){color:var(--paper)}
body{transition:background-color .6s,color .6s}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Pretendard,system-ui,sans-serif;background:var(--night);color:var(--paper);-webkit-font-smoothing:antialiased;word-break:keep-all;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--paper);color:var(--night);padding:8px 12px}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.wrap{max-width:1344px;margin:0 auto;padding:0 var(--pad)}

/* 누르면 살짝 눌렸다가 돌아온다 */
.press{transition:transform .18s cubic-bezier(.3,1.6,.5,1),background-color .2s,color .2s}
.press:active{transform:scale(.97)}

/* 헤더 */
.top{position:fixed;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--pad);font-size:14px;transition:background-color .3s,padding .3s}
.top.solid{background:rgba(var(--bgrgb),.92);backdrop-filter:blur(10px);padding-block:14px;border-bottom:1px solid var(--hair)}
.top .home{color:var(--mute)}
.top .mark{font-family:var(--latin);font-weight:800;font-size:13px;letter-spacing:.14em;opacity:0;transition:opacity .3s}
.top .mark span{font-weight:600;color:var(--mute);margin-left:6px}
.top.solid .mark,.course .top .mark{opacity:1}
.top nav{justify-self:end;display:flex;gap:28px;font-weight:500}
.top .apply{justify-self:end;font-weight:700;background:var(--paper);color:var(--night);padding:10px 16px;border-radius:2px}

/* 허브 첫 화면 */
.stage{position:relative;height:100vh;min-height:720px;overflow:hidden;background:var(--night)}
.title{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:clamp(72px,10vh,104px);font-family:var(--latin);font-weight:900;text-transform:uppercase;line-height:.9;pointer-events:none}
.title > span{display:block;overflow:hidden}
.title > span > span{display:block}
.title .l1{font-size:clamp(14px,2.1vw,30px);letter-spacing:.32em;font-weight:600;margin-bottom:clamp(8px,1.4vw,18px)}
.title .l2{font-size:clamp(44px,9.2vw,132px);letter-spacing:-.01em}
.title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--paper)}
.verse{position:absolute;z-index:3;left:calc(var(--pad) + 4px);top:clamp(200px,33vh,300px);font-size:clamp(17px,1.6vw,22px);font-weight:700;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.panels{position:absolute;inset:0;display:flex;gap:0;transform-origin:50% 100%}
.panel{position:relative;flex:1;overflow:hidden;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1)}
.panel + .panel{border-left:1px solid var(--hair)}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,20,.84) 0%,rgba(13,13,20,.16) 34%,rgba(13,13,20,.28) 55%,rgba(13,13,20,.95) 86%)}
.panels:hover .panel{flex-grow:.85}
.panels .panel:hover{flex-grow:1.3}
.panel:hover img{transform:scale(1.03)}
.info{position:absolute;z-index:2;left:clamp(20px,2.8vw,40px);right:clamp(20px,2.8vw,40px);bottom:clamp(24px,5vh,44px)}
.tag{display:inline-block;font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.16em;padding:6px 10px;color:#fff;background:var(--accent)}
.info h2{font-family:var(--latin);font-weight:900;font-size:clamp(30px,3.1vw,44px);line-height:1.05;margin:14px 0 6px;white-space:nowrap}
.info .who{font-size:16px;font-weight:600}
.info .when{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(var(--tint),.3);font-size:14px}
.info .when b{font-family:var(--latin);font-weight:800;font-size:clamp(17px,1.5vw,22px);white-space:nowrap}
.state{margin-top:12px;font-size:14px;color:var(--mute)}
/* 패널 다섯 장(2026-10-15 세컨건반 추가): 한 장이 좁아져 이름은 두 줄까지, 일시는 날짜 아래로 */
@media (min-width:900px){
  .panels .info{left:clamp(16px,1.8vw,28px);right:clamp(16px,1.8vw,28px)}
  .panels .info h2{font-size:clamp(26px,2.3vw,36px);white-space:normal;line-height:1}
  .panels .info .when{flex-direction:column;align-items:flex-start;gap:2px}
}
.state strong{color:var(--ac);font-weight:700}
.scroll-cue{position:absolute;z-index:3;right:var(--pad);top:clamp(200px,33vh,300px);font-size:13px;color:var(--mute)}

/* 섹션 공통 */
.h2{font-size:clamp(34px,4.6vw,64px);line-height:1.12;letter-spacing:-.035em;font-weight:800}
.sec-lede{margin-top:20px;max-width:34em;font-size:17px;color:var(--mute)}

/* 일정 */
.schedule{padding:clamp(96px,14vh,160px) 0 clamp(80px,12vh,140px);background:var(--night)}
.rows{--line:1;list-style:none;margin-top:56px;position:relative}
.rows::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--paper);transform:scaleX(var(--line));transform-origin:0 50%}
.row{display:grid;grid-template-columns:minmax(200px,1.1fr) 2fr minmax(160px,1fr) auto;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--hair)}
.r-date{font-family:var(--latin);font-weight:800;font-size:clamp(22px,2.2vw,30px);color:var(--ac);white-space:nowrap}
.r-what{font-size:16px;color:var(--mute)}
.r-what b{display:block;font-size:22px;font-weight:700;color:var(--paper);letter-spacing:-.02em}
.r-state{font-size:14px;color:var(--mute);display:flex;flex-direction:column}
.r-state strong{font-size:17px;color:var(--paper)}
.r-go{font-weight:700;font-size:15px;padding:13px 18px;border:1px solid var(--hair);border-radius:2px;white-space:nowrap}
.r-go:hover{background:var(--paper);color:var(--night)}

/* 소개 */
.about{padding:clamp(96px,16vh,180px) 0;background:var(--navy)}
.manifesto{font-size:clamp(24px,3vw,42px);line-height:1.45;font-weight:700;letter-spacing:-.025em;max-width:24em}
.manifesto .w{color:rgba(var(--tint),.4)}
.parts{margin-top:clamp(56px,9vh,96px);font-family:var(--latin);font-weight:900;text-transform:uppercase;font-size:clamp(40px,8vw,120px);line-height:.95;overflow:hidden}
.parts span{display:inline-block}
.parts span + span{color:transparent;-webkit-text-stroke:2px var(--paper)}

/* 문의 */
.contact{padding:clamp(96px,14vh,160px) 0}
.mail{display:inline-flex;gap:16px;margin-top:40px;font-family:var(--latin);font-weight:800;font-size:clamp(22px,3vw,40px);border-bottom:2px solid var(--paper);padding-bottom:8px}
.mail:hover{color:var(--action);border-color:var(--action)}
.reach{display:flex;flex-wrap:wrap;gap:0 clamp(28px,4vw,64px)}
.foot{display:flex;justify-content:space-between;align-items:center;padding:28px var(--pad);border-top:1px solid var(--hair);font-size:13px;color:var(--mute)}
.foot .mark{font-family:var(--latin);font-weight:800;letter-spacing:.14em;color:var(--paper)}

@media (max-width:899px){
  .top{grid-template-columns:1fr auto}
  .top .mark{display:none}
  .top nav{gap:18px}
  .stage{height:auto;min-height:0;padding-top:120px}
  .title{position:relative;left:0;top:0;padding:0 var(--pad)}
  .verse{position:relative;left:0;top:0;padding:16px var(--pad) 28px}
  .scroll-cue{display:none}
  .panels{position:relative;flex-direction:column}
  .panel{height:72vh;min-height:500px;flex:none}
  .panel::after{background:linear-gradient(180deg,rgba(13,13,20,.5) 0%,rgba(13,13,20,0) 25%,rgba(13,13,20,.2) 50%,rgba(13,13,20,.95) 88%)}
  .panel + .panel{border-left:0;border-top:1px solid var(--hair)}
  .row{grid-template-columns:1fr auto;gap:8px 16px}
  .r-what{grid-column:1 / -1;order:-1}
  .r-date{font-size:22px}
  .r-go{grid-column:1 / -1;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .panel,.panel img,.press{transition:none}
  .manifesto .w{color:var(--paper)}
}