/* 공유 디자인 토큰 + 폰트(Pretendard Variable · IBM Plex Mono) — 목록 페이지와 단일 소스 */
@import url('tokens.css');
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.narrow{max-width:840px; margin:0 auto}
.mono{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--muted); text-transform:uppercase}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--accent-deep); border-radius:2px}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform}
.reveal.pop{transform:translateY(26px) scale(.98)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1 !important; transform:none !important; transition:none} }

/* ═══ NAV (랜딩 참고) ═══ */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 24px; background:transparent; border-bottom:1px solid transparent; transition:background .24s cubic-bezier(.2,0,0,1), border-color .24s cubic-bezier(.2,0,0,1)}
.nav.scrolled{background:rgba(250,249,246,.86); backdrop-filter:saturate(1.2) blur(14px); border-bottom:1px solid var(--hairline)}
.nav .row{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.nav .logo{display:flex; align-items:center; gap:10px}
.jmark{display:inline-flex; align-items:center; gap:7px}
.jmark .jicon{height:34px; width:auto; display:block; flex-shrink:0}
.jmark .jwd{font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.045em; color:#3f3934; line-height:1; white-space:nowrap}
.nav .logo .lab{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6f6f7c; border-left:1px solid var(--hairline-2); padding-left:10px}
.nav.on-photo:not(.scrolled) .jmark .jwd{color:#fff}
.nav.on-photo:not(.scrolled) .logo .lab{color:rgba(255,255,255,.74); border-color:rgba(255,255,255,.28)}
.nav.on-photo:not(.scrolled) .nlinks a:not(.cta){color:rgba(255,255,255,.88)}
.nlinks{display:flex; gap:24px; align-items:center}
.nlinks a{font-size:14px; font-weight:600; color:var(--ink-2)}
/* CTA 는 제외한다. CTA 글자색은 --on-accent 가 정하는데, 여기서 --ink 로 덮으면
   어두운 강조색 위에 검정 글씨가 얹혀 hover 순간 안 보인다. */
.nlinks a:not(.cta):hover{color:var(--ink)}
.nlinks .cta{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent-deep); padding:9px 18px; border-radius:var(--r-md); font-weight:700; font-size:14px; box-shadow:var(--shadow-s)}
.nlinks .cta:hover{background:var(--accent-deep)}
@media (max-width:720px){ .nlinks a:not(.cta){display:none} }

/* ═══ HERO (풀블리드 배경 사진) ═══ */
.hero{position:relative; min-height:660px; display:flex; align-items:center; color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; will-change:transform}
.hero-bg img{width:100%; height:118%; object-fit:cover; object-position:center 38%}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(96deg, rgba(12,12,16,.92) 0%, rgba(12,12,16,.8) 40%, rgba(12,12,16,.5) 72%, rgba(12,12,16,.32) 100%)}
.hero-blueprint{position:absolute; inset:0; z-index:1; opacity:.16; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(110% 100% at 0% 50%,#000,transparent 68%); mask-image:radial-gradient(110% 100% at 0% 50%,#000,transparent 68%)}
.hero .wrap{position:relative; z-index:2; padding:120px 26px 64px; width:100%}
.hero-copy{max-width:660px}
.filed{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:7px 14px; border-radius:100px; margin-bottom:24px; backdrop-filter:blur(4px)}
.filed .rec{width:8px;height:8px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,206,43,.25)}
.hero h1{font-family:var(--font-display); font-size:clamp(34px,5.4vw,62px); line-height:1.08; letter-spacing:-.035em; font-weight:800; margin:0 0 22px}
.hero h1 .hl{position:relative; white-space:nowrap; color:#fff}
.hero h1 .hl::after{content:""; position:absolute; left:-3px; right:-3px; bottom:.05em; height:.34em; background:var(--accent); z-index:-1; border-radius:3px; transform:scaleX(0); transform-origin:left; transition:transform .75s .45s var(--ease)}
.hero.lit h1 .hl::after{transform:scaleX(1)}
.hero h1 .hl.ink{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .hero h1 .hl::after{transform:scaleX(1)} }
.hero .lede{font-size:clamp(15.5px,1.75vw,18.5px); color:rgba(255,255,255,.86); max-width:52ch; margin-bottom:26px}
.hook{display:inline-flex; gap:12px; align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,206,43,.55); border-radius:14px; padding:14px 20px; backdrop-filter:blur(6px)}
.hook .ic{font-size:19px}
.hook p{font-size:15.5px; font-weight:600; color:#fff}
.hook b{color:var(--accent-on-dark)}

/* ═══ DOSSIER (케이스 파일) ═══ */
.dossier{background:var(--canvas); border-bottom:1px solid var(--hairline)}
.dgrid{display:grid; grid-template-columns:repeat(5,1fr)}
.dschool{width:100%; max-width:200px; height:auto; display:block; margin:2px 0 4px}
.dcell{padding:26px 24px; border-right:1px solid var(--hairline)}
.dcell:last-child{border-right:none}
.dcell .k{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin-bottom:10px}
.dcell .v{font-family:var(--font-display); font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--ink)}
.dcell .v .u{font-size:.62em; color:var(--accent-deep); margin-left:2px}
.dcell .v small{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-top:5px; letter-spacing:0; font-family:var(--font-body)}
.dcell.hl{background:var(--accent-wash)}
.dcell.hl .v{color:var(--safety-deep)}

/* 앵커 이동 시 고정 나브에 안 가리게 */
[id]{scroll-margin-top:74px}

/* ═══ CURRICULUM ═══ */
.curric{background:var(--paper)}
.theme-tag{display:inline-flex; align-items:center; gap:8px; background:var(--accent-wash); border:1px solid var(--accent-soft); color:var(--safety-deep); font-weight:700; font-size:13px; padding:7px 15px; border-radius:100px; margin:14px 0 4px}
.rail{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
/* 연결선: 행이 나뉘어도 각 행마다 이어지도록 스텝 단위로 그린다 (다음 노드까지) */
.tstep::after{content:""; position:absolute; top:13px; left:50%; width:calc(100% + 20px); height:2px; background:var(--hairline); z-index:0}
.tstep:nth-child(4n)::after, .tstep:last-child::after{display:none}
.tstep{position:relative; z-index:1; text-align:center; padding:0 6px}
.tstep .node{width:52px;height:52px;border-radius:50%; background:var(--canvas); border:2px solid var(--accent); display:grid; place-items:center; margin:0 auto 16px; font-size:22px; box-shadow:var(--shadow-s)}
.tstep.lunch .node{border-color:var(--hairline-2); background:var(--paper-2)}
.tstep .time{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--safety-deep); letter-spacing:.02em; margin-bottom:6px}
.tstep.lunch .time{color:var(--muted)}
.tstep h4{font-size:16px; font-weight:800; letter-spacing:-.01em; margin-bottom:5px}
.tstep p{font-size:12.5px; color:var(--ink-3); line-height:1.5}
.curric-meta{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-top:46px}
.mcard{background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 28px; box-shadow:var(--shadow-s)}
.mcard .lb{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.mcard h4{font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.015em; line-height:1.4; margin-bottom:16px}
.goals{display:flex; flex-wrap:wrap; gap:8px}
.goals span{font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--hairline); padding:6px 12px; border-radius:100px}
.mcard.staff{display:flex; flex-direction:column; justify-content:center; text-align:center; background:var(--ink); color:#fff; border-color:var(--ink)}
.mcard.staff .lb{color:#9a9aa6}
.mcard.staff .big{font-family:var(--font-display); font-size:46px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--accent-on-dark); margin-bottom:8px}
.mcard.staff .dl{font-size:14.5px; font-weight:700}
.mcard.staff .nt{font-size:12px; color:#9a9aa6; margin-top:12px; line-height:1.5}
@media(max-width:820px){ .rail{grid-template-columns:1fr 1fr; gap:30px 20px} .tstep:nth-child(2n)::after{display:none} .curric-meta{grid-template-columns:1fr} }
@media(max-width:520px){ .rail{grid-template-columns:1fr} .tstep::after{display:none} }

/* ═══ generic section ═══ */
section{padding:88px 0}
.sec-head{max-width:62ch; margin-bottom:40px}
.sec-head.ctr{margin-left:auto; margin-right:auto; text-align:center}
.sec-head h2{font-family:var(--font-display); font-size:clamp(26px,3.6vw,42px); letter-spacing:-.03em; font-weight:800; margin:16px 0 12px; line-height:1.14}
.sec-head h2 .hl{background:linear-gradient(transparent 60%,var(--accent-soft) 60%); padding:0 2px}
.sec-head p{color:var(--ink-3); font-size:16px}

/* ═══ STAR WORK ═══ */
.star{background:linear-gradient(180deg,var(--coral-soft) 0%, #fff5f1 28%, var(--paper) 100%); border-top:1px solid var(--hairline)}
.star-grid{display:grid; grid-template-columns:.96fr 1.04fr; gap:54px; align-items:center}
.star-copy .win-badge{display:inline-flex; align-items:center; gap:8px; background:var(--canvas); border:1px solid var(--safety-soft); color:var(--safety-deep); font-weight:800; font-size:13px; padding:6px 14px; border-radius:100px; box-shadow:var(--shadow-s)}
.star-copy h2{font-family:var(--font-display); font-size:clamp(28px,3.6vw,44px); letter-spacing:-.03em; font-weight:800; line-height:1.12; margin:16px 0 10px}
.star-copy .name{font-size:18px; font-weight:800; color:var(--safety-deep); margin-bottom:6px}
.star-copy .team{font-size:14px; color:var(--ink-3); font-weight:600; margin-bottom:20px}
.star-copy .team b{color:var(--ink); font-family:var(--font-mono); letter-spacing:.04em; font-weight:600}
.star-copy p.body{font-size:16px; color:var(--ink-2); margin-bottom:22px}
.feat{display:flex; flex-direction:column; gap:11px; margin-bottom:22px; list-style:none}
.feat li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2)}
.feat li .ic{flex:none; width:30px;height:30px;border-radius:var(--r-sm); background:var(--canvas); border:1px solid var(--coral-soft); color:var(--safety-deep); display:grid; place-items:center; font-size:15px; box-shadow:var(--shadow-s)}
.feat li b{color:var(--ink)}
.tech-note{font-size:13px; color:var(--ink-2); background:var(--canvas); border:1px solid var(--hairline); border-radius:14px; padding:15px 17px; line-height:1.6; box-shadow:var(--shadow-s)}
.tech-note .h{display:flex; align-items:center; gap:7px; font-weight:800; color:var(--ink); margin-bottom:5px; font-size:13.5px}
.tech-note .muted{color:var(--muted)}
.mock{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hairline); box-shadow:var(--shadow-m); background:var(--canvas); will-change:transform}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){ .float{animation:none} }
.mock .bar{display:flex; align-items:center; gap:8px; padding:12px 15px; background:var(--paper-2); border-bottom:1px solid var(--hairline)}
.mock .bar .dots{display:flex; gap:6px}
.mock .bar .dots i{width:11px;height:11px;border-radius:50%; display:block}
.mock .bar .url{flex:1; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-sm); text-align:center; font-size:12px; color:var(--ink-3); padding:5px; font-family:var(--font-mono)}
.mock .app{padding:22px; background:linear-gradient(180deg,var(--coral-soft),var(--canvas) 62%)}
.mock .approw{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px}
.mock .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px}
.mock .logo .lm{width:30px;height:30px;border-radius:var(--r-sm); background:var(--coral); color:#fff; display:grid; place-items:center; font-size:15px; box-shadow:var(--shadow-s)}
.mock .tabs{display:flex; gap:6px; flex-wrap:wrap}
.mock .tabs span{font-size:11.5px; font-weight:700; padding:6px 11px; border-radius:100px; background:var(--canvas); border:1px solid var(--hairline); color:var(--ink-3)}
.mock .tabs span.on{background:var(--coral); color:#fff; border-color:var(--coral)}
.mock .apptitle{font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.24; margin-bottom:9px}
.mock .apptitle em{color:var(--safety-deep); font-style:normal}
.mock .appsub{font-size:13px; color:var(--ink-3); margin-bottom:16px; line-height:1.5}
.mock .chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px}
.mock .chips b{font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:100px; background:var(--canvas); border:1px solid var(--hairline); color:var(--ink-2)}
.mock .chips b .cd{display:inline-block;width:6px;height:6px;border-radius:50%; margin-right:6px; vertical-align:middle}
.mock .cta{background:var(--coral); color:#fff; text-align:center; font-weight:800; font-size:14px; padding:13px; border-radius:var(--r-md); box-shadow:var(--shadow-s)}

/* ═══ GALLERY ═══ */
.gallery{position:relative; background:var(--paper-2); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.gallery::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px); background-size:34px 34px; opacity:.55}
.gallery .wrap{position:relative}
.work-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px}
.work{background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px; position:relative; transition:transform .2s var(--ease), box-shadow .2s var(--ease); box-shadow:var(--shadow-s)}
.work:hover{transform:translateY(-5px); box-shadow:var(--shadow-m)}
.work .thumb{aspect-ratio:16/10; border-radius:10px; margin-bottom:13px; overflow:hidden; background:var(--paper-2); border:1px solid var(--hairline)}
.work .thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.work .cat{position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--hairline); padding:3px 8px; border-radius:100px}
.work h4{font-size:15px; font-weight:800; line-height:1.32; margin-bottom:7px}
.work .desc{font-size:13px; color:var(--ink-3); line-height:1.5; min-height:38px}
.work .foot{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:12.5px; color:var(--muted); font-weight:600; font-family:var(--font-mono)}
.work .foot .like{color:var(--safety); font-family:var(--font-body)}
.work.win{border-color:var(--accent-deep); box-shadow:0 0 0 1px var(--accent-deep), var(--shadow-s)}
.ribbon{position:absolute; top:-10px; right:14px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:800; padding:4px 10px; border-radius:100px; box-shadow:var(--shadow-s)}

/* ═══ INTERVIEW ═══ */
.iv-hero{position:relative; overflow:hidden; color:#fff; text-align:center}
.iv-hero .bg{position:absolute; inset:0; z-index:0}
.iv-hero .bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%}
.iv-hero .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,12,16,.72),rgba(12,12,16,.88))}
.iv-hero .wrap{position:relative; z-index:1; padding:92px 26px 84px}
.iv-hero .eyebrow{color:rgba(255,255,255,.7); justify-content:center}
.iv-hero h2{font-family:var(--font-display); font-size:clamp(26px,3.6vw,42px); letter-spacing:-.03em; font-weight:800; line-height:1.16; margin:16px 0 14px}
.iv-hero p{color:rgba(255,255,255,.8); font-size:16px; max-width:52ch; margin:0 auto 34px}
.iv-cast{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.spk{display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:8px 20px 8px 8px; backdrop-filter:blur(6px)}
.spk .av{width:44px;height:44px;border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#fff; font-size:16px}
.spk.t .av{background:var(--teach)} .spk.h .av{background:var(--head)}
.spk .r{font-size:14px; font-weight:800; line-height:1.25; text-align:left; color:#fff}
.spk .r small{display:block; font-size:12px; color:rgba(255,255,255,.66); font-weight:600; margin-top:2px}
.iv-body{background:var(--paper); padding:64px 0 88px}
.iv-flow{display:flex; flex-direction:column; gap:34px}
.qa .q{font-family:var(--font-display); font-size:clamp(17px,2vw,21px); font-weight:800; letter-spacing:-.01em; color:var(--ink); margin-bottom:16px; display:flex; gap:11px; align-items:baseline}
.qa .q .qm{flex:none; font-family:var(--font-mono); font-weight:700; color:var(--on-accent); font-size:12px; background:var(--accent); padding:3px 8px; border-radius:6px; position:relative; top:-2px}
.ans{display:flex; gap:15px; align-items:flex-start}
.ans .av{flex:none; width:42px;height:42px;border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#fff; font-size:15px; margin-top:3px; box-shadow:var(--shadow-s)}
.ans.t .av{background:var(--teach)} .ans.h .av{background:var(--head)}
.ans .bub{flex:1; border:1px solid var(--hairline); border-radius:var(--r-lg); border-top-left-radius:5px; padding:18px 22px; font-size:16.5px; color:var(--ink-2); box-shadow:var(--shadow-s); line-height:1.65}
.ans.t .bub{background:var(--teach-soft)} .ans.h .bub{background:var(--head-soft)}
.ans .bub .who{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-bottom:8px}
.ans.t .bub .who{color:var(--teach)} .ans.h .bub .who{color:var(--head)}
.ans .bub b{color:var(--ink); font-weight:800}
.pull{margin:8px -26px; padding:54px 26px; background:var(--ink); color:#fff; text-align:center; position:relative; overflow:hidden}
.pull::before{content:"“"; position:absolute; top:-6px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-size:120px; color:var(--accent-on-dark); opacity:.26; font-weight:800; line-height:1}
.pull .q2{position:relative; font-family:var(--font-display); font-size:clamp(23px,3.3vw,38px); font-weight:800; letter-spacing:-.022em; line-height:1.34; max-width:24ch; margin:0 auto}
.pull .q2 em{font-style:normal; color:var(--accent-on-dark)}
.pull .attr{position:relative; margin-top:22px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.pull .attr .dotc{display:inline-block; width:9px;height:9px;border-radius:50%; margin-right:8px; vertical-align:middle}

/* ═══ PLATFORM 장점 (경쟁 아님) ═══ */
.platform{text-align:center; background:var(--paper)}
.platform .lead{font-family:var(--font-display); font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.22; max-width:22ch; margin:0 auto 14px}
.platform .lead .hl{color:var(--safety-deep)}
.platform .sub{font-size:16px; color:var(--ink-3); max-width:52ch; margin:0 auto 46px}
.platform .sub b{color:var(--ink); font-weight:700}
.pcards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:left}
.pcard{background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--shadow-s); transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.pcard .ic{width:44px;height:44px;border-radius:var(--r-md); background:var(--accent-wash); border:1px solid var(--accent-soft); display:grid; place-items:center; font-size:21px; margin-bottom:16px}
.pcard h4{font-family:var(--font-display); font-size:16.5px; font-weight:800; letter-spacing:-.01em; margin-bottom:7px}
.pcard p{font-size:13.5px; color:var(--ink-3); line-height:1.55}

/* ═══ DAY ═══ */
.day{background:var(--paper-2); border-top:1px solid var(--hairline)}
.strip{display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:1fr; gap:14px}
.ph{position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hairline); box-shadow:var(--shadow-s); background:var(--canvas)}
.ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.ph:hover img{transform:scale(1.04)}
.ph.big{grid-row:span 2}
.ph.big img{aspect-ratio:4/5}
.ph.sm img{aspect-ratio:4/3}
.ph .lab{position:absolute; left:11px; bottom:11px; background:rgba(20,20,25,.82); color:#fff; font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--r-sm); backdrop-filter:blur(2px)}

/* ═══ CTA ═══ */
.cta-sec{padding:0 0 88px}
.cta-card{position:relative; overflow:hidden; background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:66px 44px; text-align:center; box-shadow:var(--shadow-m)}
.cta-card::before{content:""; position:absolute; inset:0; opacity:.13; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(80% 130% at 50% 0,#000,transparent 70%); mask-image:radial-gradient(80% 130% at 50% 0,#000,transparent 70%)}
.cta-card .in-c{position:relative}
.cta-card h2{font-family:var(--font-display); font-size:clamp(26px,3.6vw,42px); letter-spacing:-.03em; font-weight:800; margin-bottom:14px; line-height:1.16}
.cta-card h2 .hl{color:var(--accent-on-dark)}
.cta-card p{color:#c3c3cc; font-size:16px; max-width:50ch; margin:0 auto 30px}
.cta-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:15.5px; padding:15px 28px; border-radius:var(--r-md); transition:transform .16s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent); color:var(--on-accent); box-shadow:0 2px 6px rgba(0,0,0,.22)}
.btn.ghost{background:transparent; color:#fff; border:1px solid #43434f}

/* ═══ FOOTER ═══ */
footer{border-top:1px solid var(--hairline); padding:36px 0 48px; color:var(--ink-3)}
.foot-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-brand{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--ink)}
.foot-brand .mark{width:22px;height:22px;border-radius:6px;background:var(--accent); display:grid; place-items:center; font-size:13px; box-shadow:inset 0 0 0 1.3px var(--accent-deep)}
footer .disc{font-size:11.5px; color:var(--muted); margin-top:16px; max-width:78ch; line-height:1.55}

/* ═══ responsive ═══ */
@media (max-width:900px){
  .hero{min-height:600px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(12,12,16,.72),rgba(12,12,16,.9))}
  .star-grid{grid-template-columns:1fr; gap:38px}
  .dgrid{grid-template-columns:repeat(3,1fr)}
  .dcell:nth-child(3n){border-right:none}
  .dcell{border-bottom:1px solid var(--hairline)}
  .pcards{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:1fr 1fr}
  .ph.big{grid-column:span 2; grid-row:auto}
  .ph.big img{aspect-ratio:16/9}
  .pull{margin-left:-26px; margin-right:-26px}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  section{padding:60px 0}
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .dcell:nth-child(3n){border-right:1px solid var(--hairline)}
  .dcell:nth-child(2n){border-right:none}
  .pcards{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .ph.big{grid-column:auto}
  .pull{margin-left:-18px; margin-right:-18px; padding:42px 20px}
  .ans .bub{font-size:15.5px}
}
/* ── 로고 얼굴(다크 배경 흰색) ── */
.jface{fill:#3f3934}
.nav.on-photo:not(.scrolled) .jface{fill:#fff}
/* ── 타임라인 노드: 아이콘 대신 점 ── */
.tstep .node{position:relative; z-index:1; width:18px; height:18px; border:none; background:var(--accent); box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--accent-deep); margin:5px auto 24px; font-size:0}
.tstep.lunch .node{background:var(--hairline-2); box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--hairline-2)}
/* ── feat 불릿(아이콘 대신 점) ── */
.feat li .dot{flex:none; width:7px; height:7px; border-radius:50%; background:var(--safety); margin-top:9px}
/* ── 히어로 학교 로고 배지(확장형: 로고 + 행사·날짜) ── */
.hero-badge{display:flex; width:max-content; max-width:100%; align-items:center; gap:14px; background:#fff; border-radius:12px; padding:10px 18px; margin-bottom:20px; box-shadow:var(--shadow-m)}
.hero-badge .sch{height:25px; width:auto; display:block; flex:none}
.hero-badge .hb-div{width:1px; height:24px; background:var(--hairline-2); flex:none}
.hero-badge .hb-meta{font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--ink-3); white-space:nowrap}
@media(max-width:520px){
  .hero-badge{flex-wrap:wrap; gap:8px 12px; width:auto}
  .hero-badge .hb-div{display:none}
  .hero-badge .hb-meta{white-space:normal; font-size:11px}
}
/* ── 인터뷰 아바타 이미지 ── */
.spk .av, .ans .av{overflow:hidden; padding:0}
.spk .av img, .ans .av img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; border-radius:50%}
.spk.t .av, .ans.t .av{background:var(--teach-soft); box-shadow:0 0 0 2px var(--teach)}
.spk.h .av, .ans.h .av{background:var(--head-soft); box-shadow:0 0 0 2px var(--head)}
/* ── 주제(SDGs) 확장 블록 ── */
.theme-block{position:relative; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(30px,4vw,48px); box-shadow:var(--shadow-s); margin-top:clamp(44px,6vw,68px)}
.theme-kicker{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--on-accent); font-weight:800; font-size:12.5px; letter-spacing:.02em; padding:7px 15px; border-radius:100px; margin-bottom:18px; box-shadow:var(--shadow-s)}
.theme-title{font-family:var(--font-display); font-size:clamp(27px,3.7vw,46px); font-weight:800; letter-spacing:-.032em; line-height:1.14; margin-bottom:18px; color:var(--ink)}
.theme-title .q{color:var(--accent-deep)}
.theme-block .lb{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.theme-block .desc{font-size:16.5px; color:var(--ink-2); max-width:66ch; line-height:1.7; margin-bottom:30px}
.theme-block .desc b{color:var(--ink); font-weight:700}
.sdg-map{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px}
.sdg{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px 18px}
.sdg .n{display:block; font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:-.01em; margin-bottom:8px}
.sdg .d{font-size:12.5px; color:var(--ink-3); line-height:1.55}
.sdg .d em{font-style:normal; color:var(--safety-deep); font-weight:700}
.tb-goals{border-top:1px solid var(--hairline); padding-top:22px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px}
.tb-goals .lb{margin-bottom:0}
.tb-goals .g{font-size:15px; font-weight:700; color:var(--ink)}
.tb-goals .g b{color:var(--safety-deep); font-weight:800}
@media(max-width:760px){ .sdg-map{grid-template-columns:1fr 1fr} }
@media(max-width:460px){ .sdg-map{grid-template-columns:1fr} }
/* ── 문의 폼 ── */
.contact{padding-bottom:92px}
.cform{display:grid; grid-template-columns:1fr 1fr; gap:16px; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(24px,3.5vw,40px); box-shadow:var(--shadow-m); margin-top:10px}
.cform label{display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; color:var(--ink-2)}
.cform label.full{grid-column:1 / -1}
.cform input, .cform select, .cform textarea{font-family:var(--font-body); font-size:15px; padding:12px 14px; border:1px solid var(--hairline-2); border-radius:var(--r-md); background:var(--paper); color:var(--ink); font-weight:500; width:100%}
.cform input::placeholder, .cform textarea::placeholder{color:var(--muted)}
.cform input:focus, .cform select:focus, .cform textarea:focus{outline:none; border-color:var(--accent-deep); box-shadow:0 0 0 3px var(--accent-soft)}
.cform textarea{resize:vertical; min-height:104px}
.cbtn{grid-column:1 / -1; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent-deep); border-radius:var(--r-md); padding:15px; font-family:var(--font-body); font-weight:800; font-size:16px; cursor:pointer; box-shadow:var(--shadow-s); transition:background .2s var(--ease)}
.cbtn:hover{background:var(--accent-deep)}
.cnote{grid-column:1 / -1; font-size:12px; color:var(--muted); text-align:center; margin-top:-4px}
.csent{text-align:center; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:60px 30px; box-shadow:var(--shadow-m); margin-top:10px}
.csent .chk{width:54px; height:54px; border-radius:50%; background:var(--accent); display:grid; place-items:center; margin:0 auto 18px; color:var(--on-accent); font-weight:800; font-size:26px}
.csent h3{font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.02em; margin-bottom:10px}
.csent p{color:var(--ink-3); font-size:15px}
.contact .alt{text-align:center; margin-top:22px; font-size:14px; font-weight:600; color:var(--ink-3)}
.contact .alt a{color:var(--safety-deep); border-bottom:1px solid var(--accent)}
@media(max-width:560px){ .cform{grid-template-columns:1fr} }
/* ── 줄바꿈: 문장 단위 + 어색한 중간 줄바꿈 방지 ── */
p, .bub, .pull .q2, .voice-lead, .lede, .desc{text-wrap:pretty}
br.wbr{display:inline}
@media(max-width:700px){ br.wbr{display:none} }
/* ── 짓다 포스트잇 컴포넌트 (갤러리 작품 · 수상작 메모) ── */
:root{
  --postit-shadow-rest:0 1px 1px rgba(20,19,15,.04),0 6px 14px rgba(20,19,15,.06);
  --postit-shadow-lift:0 4px 8px rgba(20,19,15,.08),0 14px 28px rgba(20,19,15,.1);
  --postit-tape:rgba(20,19,15,.1);
}
.work{transform-origin:50% 0%; transform:rotate(var(--rot,0deg)); box-shadow:var(--postit-shadow-rest); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.work::before{content:""; position:absolute; left:50%; top:-5px; width:46px; height:9px; transform:translateX(-50%) rotate(-2deg); background:var(--postit-tape); border-radius:1px; opacity:.85; pointer-events:none}
.work:hover{transform:rotate(0deg) translateY(-2px); box-shadow:var(--postit-shadow-lift); z-index:3}
.work-grid .work:nth-child(4n+1){--rot:-1.4deg}
.work-grid .work:nth-child(4n+2){--rot:-.6deg}
.work-grid .work:nth-child(4n+3){--rot:.6deg}
.work-grid .work:nth-child(4n){--rot:1.4deg}
.work.win{--rot:-1deg}
.tech-note{position:relative; transform:rotate(-1.1deg); transform-origin:50% 0%; background:var(--accent-wash); border-color:var(--accent-soft); box-shadow:var(--postit-shadow-rest)}
.tech-note::before{content:""; position:absolute; left:50%; top:-5px; width:54px; height:9px; transform:translateX(-50%) rotate(-2deg); background:var(--postit-tape); border-radius:1px; opacity:.85}
/* ── 주제 블록 2열(우측 공간 활용) ── */
.theme-block{display:block; padding:clamp(30px,4vw,50px)}
.theme-block .tb-left{margin-bottom:22px}
.theme-block .theme-title{font-size:clamp(21px,2.95vw,37px); line-height:1.18; margin-bottom:0}
.theme-block .desc{max-width:none; font-size:16px; line-height:1.75; margin-bottom:22px}
.theme-block .tb-goals{flex-direction:column; align-items:flex-start; gap:8px}
/* ── 주제 트랙 분리(중등/고등 등 대상별로 주제가 다른 행사) ── */
.theme-tracks{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ttrack{background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-md); padding:20px 22px}
.tt-label{display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--ink-3); background:var(--paper); border:1px solid var(--hairline); padding:4px 11px; border-radius:100px; margin-bottom:12px}
.tt-title{font-family:var(--font-display); font-size:clamp(19px,2.1vw,27px); font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--accent-deep)}
.tt-desc{font-size:14.5px; line-height:1.7; color:var(--ink-2); margin-top:10px}
@media(max-width:700px){ .theme-tracks{grid-template-columns:1fr; gap:12px} }
/* 참여 인원 단위를 강조색 대신 본문색으로(옵션: dossier.countUnitPlain) */
.dcell .v .u.plain{color:inherit}
/* ── 문장 한 줄(컨테이너 폭 확보) ── */
.sec-head{max-width:880px}
.hero .lede{max-width:660px}
.platform .sub{max-width:700px}
/* ── 인터뷰→플랫폼 사이 공백 축소 ── */
.iv-body{padding-bottom:32px}
.platform{padding-top:48px}
/* ── 작품 뷰어(메인 + 슬라이딩 캐러셀) ── */
.pv-main{display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center; min-height:352px}
.pv-info{min-width:0}
.pv-tags{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.pv-win{display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent-deep); font-weight:800; font-size:12.5px; padding:5px 12px; border-radius:100px; box-shadow:var(--shadow-s)}
.pv-cat{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--hairline); padding:4px 10px; border-radius:100px}
.pv-like{font-size:13px; font-weight:700; color:var(--safety)}
.pv-info h3{font-family:var(--font-display); font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.12; margin-bottom:6px}
.pv-info .pv-sub{font-size:16px; font-weight:700; color:var(--safety-deep); margin-bottom:8px}
.pv-info .pv-team{font-size:13.5px; color:var(--ink-3); font-weight:600; margin-bottom:18px}
.pv-info .pv-team b{color:var(--ink)}
.pv-info .pv-desc{font-size:16px; color:var(--ink-2); line-height:1.7; margin-bottom:18px}
.pv-note{font-size:13px; color:var(--ink-2); background:var(--accent-wash); border:1px solid var(--accent-soft); border-radius:14px; padding:14px 16px; line-height:1.6; position:relative}
.pv-note b{color:var(--ink)}
.pv-shot{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hairline); box-shadow:var(--shadow-m); background:var(--canvas)}
.pv-shot .bar{display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--paper-2); border-bottom:1px solid var(--hairline)}
.pv-shot .bar i{width:11px; height:11px; border-radius:50%; display:block}
.pv-shot .bar .url{flex:1; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-sm); text-align:center; font-size:11.5px; color:var(--ink-3); padding:5px; font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-shot img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover; object-position:top center}
.pv-fade{animation:pvfade .35s var(--ease)}
@keyframes pvfade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* 캐러셀 레일(풀블리드, 자동 슬라이딩) */
.pv-rail{margin-top:38px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.pv-rail::-webkit-scrollbar{display:none}
.pv-track{display:flex; gap:16px; width:max-content; padding:6px 26px 10px}
.ccard{flex:none; width:208px; cursor:pointer; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-s); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.ccard:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.ccard.active{border-color:var(--accent-deep); box-shadow:0 0 0 2px var(--accent-deep), var(--shadow-s)}
.ccard .cc-thumb{aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); position:relative}
.ccard .cc-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.ccard .cc-win{position:absolute; top:8px; left:8px; background:var(--accent); color:var(--on-accent); font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:100px}
.ccard .cc-body{padding:11px 13px}
.ccard .cc-name{font-size:13.5px; font-weight:800; letter-spacing:-.01em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ccard .cc-meta{display:flex; justify-content:space-between; margin-top:6px; font-size:11.5px; color:var(--muted); font-family:var(--font-mono)}
.ccard .cc-meta .l{color:var(--safety); font-family:var(--font-body)}
@media(max-width:820px){ .pv-main{grid-template-columns:1fr; gap:28px} .pv-main .pv-shot{order:-1} }
/* ── 이미지 갤러리: 좌우 슬라이드 + 스크롤(원본 비율, 호버 시 확대) ── */
.strip{display:flex !important; flex-wrap:nowrap; gap:14px; height:clamp(200px,23vw,300px); overflow-x:auto; scrollbar-width:none; width:100vw; margin-left:calc(50% - 50vw); padding:8px 26px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.strip::-webkit-scrollbar{display:none}
.strip .ph{flex:0 0 auto !important; width:auto !important; height:100%; grid-row:auto !important; grid-column:auto !important; transform-origin:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.strip .ph:hover{transform:scale(1.06) !important; box-shadow:var(--shadow-m); z-index:2}
.strip .ph img, .strip .ph.big img, .strip .ph.sm img{width:auto !important; height:100% !important; object-fit:contain !important; aspect-ratio:auto !important; transform:none !important}
@media(max-width:640px){ .strip{height:168px} }
/* ── 뷰어 라이브 앱 프레임(선명) ── */
.pv-shot .pv-frame{position:relative; aspect-ratio:16/10; background-size:cover; background-position:top center; overflow:hidden}
.pv-shot .pv-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:transparent}

/* ── 강조색(accent) 테마 — 팔레트 내에서만 ── */
/* --on-accent = var(--accent) 를 배경으로 깔았을 때 그 위 글자색.
   밝은 강조색(노랑·주황)은 검정, 어두운 강조색(파랑·네이비)은 흰색이라야 읽힌다.
   테마마다 여기 한 줄만 정하면 강조색 배경을 쓰는 모든 컴포넌트에 일괄 적용된다. */
:root{ --accent:var(--helmet); --accent-deep:var(--helmet-deep); --accent-soft:var(--helmet-soft); --accent-wash:var(--helmet-wash); --on-accent:var(--ink); --accent-on-dark:var(--accent); }
body.accent-yellow{ --accent:var(--helmet); --accent-deep:var(--helmet-deep); --accent-soft:var(--helmet-soft); --accent-wash:var(--helmet-wash); --on-accent:var(--ink); --accent-on-dark:var(--accent); }
body.accent-orange{ --accent:var(--safety); --accent-deep:var(--safety-deep); --accent-soft:var(--safety-soft); --accent-wash:var(--safety-soft); --on-accent:var(--ink); --accent-on-dark:var(--accent); }
body.accent-blue{ --accent:var(--head); --accent-deep:var(--sky-ink); --accent-soft:var(--head-soft); --accent-wash:var(--sky); --on-accent:#fff; --accent-on-dark:#8fa8f0; }
/* 한양대학교 ERICA — 한양블루(#1D2475) 단일 브랜드 컬러. 따뜻한 액센트까지 네이비로 통일 */
body.accent-hanyang{
  --accent:#1d2475; --accent-deep:#141a57; --accent-soft:#e7e9f5; --accent-wash:#f2f3fa; --on-accent:#fff; --accent-on-dark:#8f9ade;
  --safety:#1d2475; --safety-deep:#1d2475; --safety-soft:#e7e9f5;
  --coral:#2a3a9e; --coral-soft:#eef0f9;
  --sky:#f2f3fa; --sky-ink:#141a57;
  --head:#1d2475; --head-soft:#e7e9f5;
  --teach:#5566b8; --teach-soft:#eef0f9;
}
/* 전북특별자치도교육청 — 교육청 심벌 4색에서 추출.
   남색 #023064 이 워드마크 전체를 이루는 주색이라 강조색으로 쓴다.
   심벌의 주황 #eb5d47 · 황색 #fecd20 은 짓다 기본 코랄·헬멧과 사실상 같은 자리라 덮지 않는다. */
body.accent-jeonbuk{
  --accent:#023064; --accent-deep:#011f42; --accent-soft:#d9e3ef; --accent-wash:#f1f5fa; --on-accent:#fff; --accent-on-dark:#8fb4e0;
  --sky:#f1f5fa; --sky-ink:#023064;
  --head:#023064; --head-soft:#d9e3ef;
}
/* 작품 섹션 배경도 쿨톤으로 */
.accent-hanyang .star{ background:linear-gradient(180deg,#eef0f9 0%,#f5f7fc 28%,var(--paper) 100%); }
/* 인터뷰 아바타(초성)는 남색 원 + 흰 글씨 — 두 화자를 명도로 구분 */
.accent-hanyang .spk.t .av, .accent-hanyang .ans.t .av{ background:#5566b8; box-shadow:none; }
.accent-hanyang .spk.h .av, .accent-hanyang .ans.h .av{ background:#1d2475; box-shadow:none; }