/* 랜딩 시안 5(design/landing-v5, 2026-10-22): 국비 훈련 KDC → 자부담 → 완강 특전 세미나 → 1인 개발 → 출시 지원 → 채용 연계.
   사이트 app.css(상단바 · 꼬리말 · 글꼴) 위에 얹는다. 토큰은 /landing(.c4, challenge.css:13~18)과 같은 값을 쓰고 접두사는 l5-.
   움직임은 모두 prefers-reduced-motion: no-preference 안, 숨겼다 켜는 장면은 html.l5-js(l5.js 가 붙인다)에만 묶는다(스크립트가 없으면 처음부터 다 보인다).
   모티프: 경로(01~06, 점선은 협의 · 판단에 따른 단계) · 왕관(지금 위치) · 판(체스판 바닥) · 문(채용 연계). */

/* 바탕 · 본문 틀: /landing 과 같다(challenge.css 첫 묶음) */
body:has(.l5){background:#0F0F0F}
body:has(.l5) #main{max-width:none;padding:0}
body:has(.l5) .t-bar :is(.t-search,.t-menu){display:none}
@media (min-width:760px){
  body:has(.l5) .t-bar .t-row{max-width:2000px;padding-inline:clamp(24px,50vw - 620px,32px)}
}
@media (max-width:759px){
  body:has(.l5) .t-bar .t-row{gap:6px}
  body:has(.l5) .t-bar .t-nav{display:flex;margin-left:2px}
  body:has(.l5) .t-bar .t-nav a{padding:0 10px}
  body:has(.l5) .t-bar .t-acc{display:flex}
  body:has(.l5) .t-bar .t-sp{display:block}
  body:has(.l5) .t-bar .t-link{padding:0 10px}
  body:has(.l5) .t-bar .t-acc .t-link:last-child{margin-right:0}
}

:where(.l5),:where(.l5) *{box-sizing:border-box;margin:0;padding:0}
:where(.l5) a{color:inherit;text-decoration:none}
:where(.l5) :is(ol,ul){list-style:none}
.l5{
  --ac:#FF4155;--ac2:#FF6B7B;--k:#0F0F0F;--k1:#141416;--k2:#1A1A1D;--ln:#26262A;--ln2:#34343B;
  --t1:#FFFFFF;--t2:#E4E4E7;--t3:#A1A1AA;--fine:#8A8A93;--t4:#71717A;--t5:#52525B;--head:64px;
  --ease:cubic-bezier(.2,.8,.2,1);--hop:cubic-bezier(.3,1.5,.5,1);
  display:block;overflow-x:clip;word-break:keep-all;overflow-wrap:break-word;background:var(--k);color:var(--t3);
  font:16px/1.6 Pretendard,system-ui,sans-serif;
}
.l5 :is(img,video,svg){display:block;max-width:none}
.l5 a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.l5 .u{display:inline-block}
.l5-in{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:759px){
  .l5{--head:56px}
  .l5-in{padding:0 20px}
}

/* 자리 표시(아직 정해지지 않은 사실) */
.l5-ph{display:inline-block;padding:.04em .45em;border:1px dashed rgba(255,107,123,.6);border-radius:4px;background:rgba(255,65,85,.07);color:#FF8C99;font-weight:600;font-size:.94em;line-height:1.4;letter-spacing:0;vertical-align:baseline}
.l5-ph--s{font-size:13px}

/* 단추: 랜딩 레드 사각 56(반경 6) + 빛 스침 */
.l5-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:6px;background:var(--ac);color:#fff;font-size:16px;font-weight:750;letter-spacing:-.01em;box-shadow:0 10px 28px -10px rgba(255,65,85,.75);overflow:hidden;transition:background-color .2s,transform .25s var(--ease)}
@media (hover:hover){.l5-btn:hover{background:#FF5C6E;transform:translateY(-1px)}}
.l5-link{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 4px;color:var(--t2);font-size:15px;font-weight:650}
.l5-link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
@media (hover:hover){.l5-link:hover{color:#fff}.l5-link:hover svg{transform:translateY(3px)}}
.l5-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}

/* 히어로 제목(2026-10-23 사용자 "글씨 더 크게하고 가운데에 위치할 수 있도록 위치를 살짝만 내리자"): challenge.css 의 .c4-title(72px · 위 여백 88px)보다
   크게, 떠 있는 게임 칸 사이 빈 하늘의 가운데쯤으로 내린다. 낮은 화면은 키 아트의 왕관과 겹치지 않을 만큼만 */
.l5 .c4-hero-in{padding-top:clamp(120px,18vh,180px)}
/* 2026-10-26 사용자 "둘 다 크기를 조금만 줄여보자": 두 줄이 같은 크기가 되며 커져서 약 12% 줄임(100 · 78 · 44px 이 상한이었다).
   이어서 "굵기도 조금 줄여봐": challenge.css 의 800 → 700 */
.l5 .c4-title{font-size:clamp(44px,5.8vw,88px);font-weight:700}
/* 2026-10-23 사용자 "RookissAI 들여쓰기 x 들여쓰기 KDC": 세 줄로 쌓고, 가운데 ×는 작게 빨강으로 이음표처럼 */
.l5 .c4-title{line-height:1.02}
.l5 .c4-title span{display:block}
.l5 .c4-title span:nth-child(2){margin:.06em 0 .02em;color:var(--ac);font-size:.5em;line-height:1;font-weight:700}
/* 2026-10-26 사용자 "RookissAI랑 굵기를 맞추자" · "글자 크기도 맞춰봐": 크기는 RookissAI 와 같게(.76em 이었다).
   이어서 "K-디지털만 굵기를 50만 더 올려": 제목 700 보다 50 굵게 */
.l5 .c4-title .l5-t-kdc{margin-top:.06em;font-weight:750;letter-spacing:-.045em;word-break:keep-all}
@media (max-height:800px) and (min-width:900px){
  .l5 .c4-hero-in{padding-top:clamp(72px,13vh,104px)}
  .l5 .c4-title{font-size:clamp(40px,4.9vw,68px)}
}
@media (max-width:759px){
  .l5 .c4-hero-in{padding-top:104px}
  .l5 .c4-title{font-size:clamp(32px,9.6vw,38px)}
}

/* 끝 제목 「판」 위 왕관(워드마크 왕관 R 과 같은 모양 · 비율). 히어로는 시안 4 그대로라 challenge.css 의 .c4-hero 를 쓴다 */
.l5-pan{position:relative;display:inline-block}
.l5-pan .l5-crown{position:absolute;left:50%;top:-.025em;width:.5em;height:auto;fill:var(--ac);transform:translateX(-50%)}

/* ── 구획 공통 ── */
/* 섹션 하나 = 화면 한 장(/landing .c4-sec 와 같은 규칙: 상단바 아래 높이, 내용은 세로 가운데) */
.l5-sec,.l5-end{scroll-margin-top:var(--head)}
.l5-sec{position:relative;display:grid;align-content:center;min-height:calc(100vh - var(--head));padding-block:clamp(48px,7vh,112px)}
.l5-hd{max-width:860px}
.l5-h2{margin:0;color:#fff;font-size:clamp(32px,3.9vw,56px);font-weight:800;line-height:1.22;letter-spacing:-.04em}
.l5-h2 em{font-style:normal;color:var(--ac)}
.l5-lead{margin-top:clamp(14px,2.4vh,26px);max-width:600px;color:var(--t3);font-size:clamp(16px,1.25vw,18px);line-height:1.75}
.l5-fine{margin-top:clamp(18px,3vh,32px);max-width:780px;color:var(--fine);font-size:13px;line-height:1.75}
.l5-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(48px,7vw,112px);align-items:center}

/* ── 1 국비 훈련 KDC ── */
#kdc{padding-block:clamp(32px,5vh,64px)}
.l5-kdc-top{text-align:center}
.l5-kdc-top .l5-hd{margin-inline:auto}
/* 리드가 세 줄(수료 → 초대코드 → 라이브, 2026-10-22)이라 제목은 화면 높이도 따른다(1440×900 에서 한 화면) */
.l5-kdc-top .l5-h2{font-size:clamp(40px,min(5.6vw,8.2vh),88px);line-height:1.12;text-wrap:balance}
.l5-kdc-top .l5-lead{max-width:800px;margin-inline:auto;line-height:1.65}
.l5-kdc-go{width:min(100%,800px);margin:clamp(22px,3vh,32px) auto 0;text-align:center}
.l5-kdc-go .l5-btn{max-width:100%}
.l5-kdc-go p{margin-top:10px;color:var(--fine);font-size:13px;line-height:1.65}
/* 과정 네 장: 썸네일(인프런 표지 1200×780) + 분야 · 이름 · 꼬리표. 안내 단추는 네 카드 아래 가운데에 둔다. */
.l5-crs{--gap:clamp(14px,1.4vw,22px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin:clamp(22px,3vh,32px) auto 0;list-style:none;padding:0}
.l5-cr{display:flex;flex-direction:column;min-width:0;border:1px solid var(--ln2);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#18181B,#141416)}
.l5-cr-m{position:relative;aspect-ratio:1200/780;background:#1C1C20;border-bottom:1px solid var(--ln)}
.l5-cr-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.l5-cr-b{display:flex;flex-direction:column;flex:1;padding:clamp(12px,1.8vh,18px) clamp(14px,1.2vw,18px) clamp(14px,2vh,20px)}
.l5-cr-k{color:var(--ac2);font-size:12.5px;font-weight:700;line-height:1.4}
.l5-cr-t{margin-top:6px;color:#fff;font-size:clamp(15px,1.15vw,17.5px);font-weight:750;line-height:1.4;letter-spacing:-.02em;word-break:keep-all}
.l5-cr-g{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.l5-cr-g span{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--t3);font-size:12px;font-weight:600;line-height:1.5}
/* 호버: 카드가 살짝 뜨고 테두리 · 그림자가 밝아지며 썸네일이 조금 커진다(transform 은 등장 움직임 l5-up 의 translate 와 따로 놀아 겹치지 않는다) */
.l5-cr{transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.l5-cr{position:relative}
.l5-cr-a{color:inherit;text-decoration:none}
.l5-cr-a::after{content:'';position:absolute;inset:0;z-index:1;border-radius:14px}
.l5-cr:has(.l5-cr-a:focus-visible){outline:2px solid var(--ac2);outline-offset:3px}
.l5-cr-a:focus-visible{outline:none}
.l5-cr-m{overflow:hidden}
.l5-cr-m img{transition:transform .5s var(--ease)}
@media (hover:hover){
  .l5-cr:hover{transform:translateY(-8px);border-color:#4A4A52;box-shadow:0 22px 40px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,65,85,.18)}
  .l5-cr:hover .l5-cr-m img{transform:scale(1.035)}
}
/* 높이가 짧은 데스크톱에서도 제목 · 카드 · 안내 단추를 한 화면에 둔다. */
@media (min-width:1000px) and (max-height:800px){
  #kdc{padding-block:14px}
  .l5-kdc-top .l5-h2{font-size:clamp(40px,min(5.2vw,7.4vh),72px)}
  .l5-kdc-top .l5-lead{margin-top:8px;font-size:16px;line-height:1.5}
  .l5-crs{max-width:1024px;margin-top:14px}
  #kdc .l5-crs{margin-top:10px}
  .l5-kdc-go{margin-top:12px}
  .l5-kdc-go p{margin-top:8px;font-size:12.5px}
}

/* ── 2 훈련비: 막대 길이가 곧 금액(정가 100 · 자부담 1) ── */
.l5-price{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px clamp(40px,6vw,96px);align-items:end;margin-top:clamp(32px,6vh,80px)}
.l5-pr-rows{display:grid;gap:40px}
.l5-pr-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 24px}
.l5-pr-k{color:var(--t3);font-size:15px;font-weight:650}
.l5-pr-v{color:#fff;font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.l5-pr-row.is-list .l5-pr-v{color:var(--t4);text-decoration:line-through;text-decoration-thickness:2px}
.l5-pr-bar{grid-column:1/-1;height:12px;border-radius:3px;background:#18181B;overflow:hidden}
.l5-pr-bar i{display:block;height:100%;border-radius:3px}
.l5-pr-row.is-list .l5-pr-bar i{width:100%;background:var(--ln2)}
.l5-pr-row.is-pay .l5-pr-bar{overflow:visible}
.l5-pr-row.is-pay .l5-pr-bar i{width:1%;min-width:6px;background:var(--ac);box-shadow:0 0 18px rgba(255,65,85,.65)}
.l5-pr-off{color:#fff;font-size:clamp(88px,13vw,200px);font-weight:900;line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.l5-pr-off small{margin-left:.04em;color:var(--ac);font-size:.5em;letter-spacing:-.02em}

/* ── 3 완강 특전: 진도 100% 가 되면 초대장이 켜진다 ── */
.l5-sem{margin-top:clamp(20px,3.6vh,40px);border-top:1px solid var(--ln)}
.l5-sem li{padding:clamp(12px,2vh,22px) 0;border-bottom:1px solid var(--ln)}
.l5-sem b{display:block;color:#fff;font-size:19px;font-weight:750;letter-spacing:-.02em}
.l5-sem span{display:block;margin-top:6px;font-size:15px}
.l5-must{display:flex;align-items:flex-start;gap:10px;margin-top:clamp(16px,2.6vh,28px);color:var(--t2);font-size:16px;font-weight:650;line-height:1.55}
.l5-must svg{flex:none;width:19px;height:19px;margin-top:2px;color:var(--ac)}
.l5-prog{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-bottom:24px}
.l5-prog-k{color:var(--t3);font-size:14px;font-weight:650}
.l5-prog-v{color:#fff;font-size:28px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.l5-prog-v b{font-weight:inherit}
.l5-prog-bar{grid-column:1/-1;height:6px;border-radius:3px;background:#1F1F23;overflow:hidden}
.l5-prog-bar i{display:block;width:100%;height:100%;border-radius:3px;background:#fff;transform-origin:left}
.l5-tk{--cut:118px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--cut);min-height:268px;border-radius:16px;background:linear-gradient(135deg,#1E1E22 0%,#161618 70%);
  -webkit-mask:radial-gradient(circle 13px at calc(100% - var(--cut)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at calc(100% - var(--cut)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 13px at calc(100% - var(--cut)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at calc(100% - var(--cut)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.l5-tk-main{padding:30px 30px 28px}
.l5-tk-k{color:var(--t4);font-size:13px;font-weight:700;letter-spacing:.06em}
.l5-tk-t{margin-top:12px;color:#fff;font-size:28px;font-weight:800;line-height:1.25;letter-spacing:-.03em}
.l5-tk-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.l5-tk-l li{padding:6px 12px;border:1px solid var(--ln2);border-radius:999px;color:var(--t2);font-size:13.5px;font-weight:600}
.l5-tk-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:18px 0;border-left:2px dashed #34343B;color:#fff}
.l5-tk-crown{width:42px;height:auto;margin-bottom:10px;fill:var(--ac)}
.l5-tk-stub span{font-size:17px;font-weight:800;letter-spacing:-.02em}
.l5-tk-stub small{color:var(--t3);font-size:13px;font-weight:600}

/* ── 4 내일배움카드 발급: 카드 그림 | 다섯 단계 ── */
.l5-two--rev{grid-template-columns:minmax(0,460px) minmax(0,1fr)}
.l5-cdv{position:relative;perspective:1200px}
.l5-cd{position:relative;aspect-ratio:1.586;padding:clamp(22px,2.4vw,30px);border-radius:20px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,65,85,.34),rgba(255,65,85,0) 55%),linear-gradient(135deg,#2A2A30 0%,#17171A 62%,#101012 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.9),0 24px 60px -30px rgba(255,65,85,.4);transform:rotateY(-14deg) rotateX(8deg) rotateZ(-2deg)}
.l5-cd::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 60%);transform:translateX(-110%)}
.l5-cd-k{font-size:clamp(15px,1.25vw,18px);font-weight:800;letter-spacing:-.01em}
.l5-cd-chip{position:absolute;left:clamp(22px,2.4vw,30px);top:38%;width:50px;height:38px;border-radius:8px;background:linear-gradient(135deg,#E9E9EE,#9C9CA6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.l5-cd-chip::before{content:'';position:absolute;inset:9px 0;border-block:1px solid rgba(0,0,0,.28)}
.l5-cd-no{position:absolute;left:clamp(22px,2.4vw,30px);right:clamp(22px,2.4vw,30px);top:63%;display:flex;gap:14px;color:rgba(255,255,255,.78);font-size:clamp(16px,1.5vw,21px);font-weight:700;letter-spacing:.14em}
.l5-cd-v{position:absolute;left:clamp(22px,2.4vw,30px);bottom:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:2px}
.l5-cd-v small{color:var(--t3);font-size:12px;font-weight:600}
.l5-cd-v b{font-size:14px;font-weight:750}
.l5-cd-ok{position:absolute;right:-6px;bottom:-18px;display:inline-flex;align-items:center;gap:6px;padding:9px 16px 9px 12px;border-radius:999px;background:#fff;color:#111;font-size:14.5px;font-weight:800;box-shadow:0 14px 30px -10px rgba(0,0,0,.7)}
.l5-cd-ok svg{width:18px;height:18px;color:var(--ac)}
/* 단계: 번호 동그라미를 세로 줄로 잇는다. 마지막(과정 신청)은 빨간 동그라미 */
.l5-steps{position:relative;margin-top:clamp(20px,3.6vh,40px);list-style:none;padding:0}
.l5-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:18px;padding-bottom:clamp(10px,1.9vh,20px)}
.l5-steps li:last-child{padding-bottom:0}
.l5-steps li:not(:last-child)::before{content:'';position:absolute;left:17.5px;top:38px;bottom:2px;width:1px;background:var(--ln2)}
.l5-steps i{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--k2);box-shadow:inset 0 0 0 1px var(--ln2);color:#fff;font-size:14px;font-weight:800;font-style:normal;font-variant-numeric:tabular-nums}
.l5-steps .is-go i{background:var(--ac);box-shadow:0 8px 22px -8px rgba(255,65,85,.8)}
.l5-steps i svg{width:18px;height:18px}
.l5-steps b{padding-top:6px;color:#fff;font-size:clamp(16px,1.25vw,18px);font-weight:750;line-height:1.35;letter-spacing:-.02em}
.l5-steps span{margin-top:3px;color:var(--t3);font-size:14.5px;line-height:1.55}
/* ── 5 출시 지원: 허브 → 검토(왕관이 고른 칸) → 협의 후 출시 지원 ── */
.l5-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,48px);margin-top:clamp(28px,5vh,72px)}
.l5-fr{position:relative}
.l5-fr-v{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border:1px solid var(--ln);border-radius:14px;background:#131315}
/* 칸 사이 잇는 선: 검토까지는 실선, 출시 지원으로 가는 선은 점선(협의) */
.l5-fr+.l5-fr .l5-fr-v::before{content:"";position:absolute;top:calc(50% - 1px);right:calc(100% + 1px);width:clamp(24px,3.4vw,48px);height:2px;background:var(--t5)}
.l5-fr.is-cond .l5-fr-v::before{background:repeating-linear-gradient(90deg,var(--t4) 0 6px,transparent 6px 12px)}
.l5-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:66%}
.l5-hub i{position:relative;aspect-ratio:16/10;border-radius:6px;background:linear-gradient(160deg,#232328,#18181B)}
.l5-hub i::after{content:"";position:absolute;left:10%;bottom:14%;width:46%;height:5px;border-radius:2px;background:#34343B}
.l5-hub.is-pick i{opacity:.32}
.l5-hub.is-pick i:has(svg){opacity:1;box-shadow:0 0 0 2px var(--ac),0 10px 30px -8px rgba(255,65,85,.55)}
.l5-hub-crown{position:absolute;left:50%;top:-14px;width:24px;height:auto;fill:var(--ac);transform:translateX(-50%)}
.l5-pub{display:flex;flex-direction:column;align-items:center;gap:14px;width:44%}
.l5-pub i{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:8px;background:linear-gradient(160deg,#2A2A30,#1A1A1D);box-shadow:0 0 0 2px var(--ac),0 18px 40px -12px rgba(255,65,85,.5)}
.l5-pub i::after{content:"";position:absolute;left:9%;bottom:13%;width:44%;height:6px;border-radius:3px;background:#3A3A42}
.l5-pub span{padding:6px 14px;border:1px dashed rgba(255,107,123,.7);border-radius:999px;color:#fff;font-size:13px;font-weight:700}
.l5-fr-no{margin-top:clamp(14px,2.2vh,24px);color:var(--t4);font-size:13px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.l5-fr-t{margin-top:6px;color:#fff;font-size:20px;font-weight:750;letter-spacing:-.02em}
.l5-fr-d{margin-top:6px;font-size:15px;line-height:1.6}

/* ── 6 채용 연계: 안쪽으로 조금 열린 문, 틈으로 빛이 바닥에 번진다 ── */
.l5-two--door{align-items:end}
.l5-door{position:relative;justify-self:end;height:min(440px,calc(100vh - var(--head) - 26vh));aspect-ratio:10/16;margin-right:48px}
.l5-door-way{position:absolute;inset:0;overflow:hidden;border:1px solid var(--ln2);border-bottom:0;border-radius:3px 3px 0 0;perspective:1100px;
  background:radial-gradient(130% 75% at 70% 100%,#FF8C99 0%,#FF4155 30%,#8E1526 68%,#2A0C12 100%)}
.l5-door-leaf{position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(30deg);background:linear-gradient(90deg,#1D1D21,#161619);box-shadow:inset 0 0 0 1px #2A2A30;transition:transform 1.8s var(--ease)}
.l5-door-leaf::before{content:"";position:absolute;inset:14px;border:1px solid #232328;border-radius:2px}
.l5-door-leaf::after{content:"";position:absolute;right:16px;top:52%;width:4px;height:36px;border-radius:2px;background:#3A3A42}
.l5-door-spill{position:absolute;left:0;right:-60%;top:100%;height:120px;pointer-events:none;clip-path:polygon(51.5% 0,62.5% 0,100% 100%,34% 100%);
  background:linear-gradient(to bottom,rgba(255,65,85,.5),rgba(255,65,85,.12) 55%,transparent);transition:opacity 1.6s var(--ease)}
.l5-door::after{content:"";position:absolute;left:-60%;right:-80%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--ln2) 25%,var(--ln2) 75%,transparent)}

/* ── 끝: 판이 한 칸씩 뒤집힌다 ── */
.l5-end{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--head));padding:clamp(48px,7vh,112px) 0 clamp(150px,24vh,260px);text-align:center;isolation:isolate;overflow:hidden}
.l5-end .l5-h2{font-size:clamp(34px,5vw,76px);font-weight:900;line-height:1.26;letter-spacing:-.05em}
.l5-end .l5-lead{margin-inline:auto;color:var(--t2)}
.l5-end .l5-cta{justify-content:center;margin-top:40px}
.l5-board{position:absolute;left:50%;bottom:0;z-index:-1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr);width:max(1500px,120%);aspect-ratio:2/1;
  transform:translateX(-50%) perspective(800px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask:linear-gradient(to top,transparent 0,#000 18%,transparent 85%);mask:linear-gradient(to top,transparent 0,#000 18%,transparent 85%)}
.l5-board i{--a:#0F0F0F;--b:#1B1B1F;background:var(--a)}
.l5-board i.is-b{--a:#1B1B1F;--b:#0F0F0F}

/* ── 넓은 화면 아님(≤999) ── */
@media (max-width:999px){
  .l5-two{grid-template-columns:minmax(0,1fr)}
  .l5-two--rev{grid-template-columns:minmax(0,1fr)}
  .l5-two--rev .l5-cdv{order:2;width:min(100%,420px);margin-top:12px}
  .l5-crs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .l5-tkv{max-width:520px}
  .l5-door{justify-self:start;height:360px;margin:0 0 0 8px}
}
/* ── 모바일(≤759) ── */
@media (max-width:759px){
  #kdc{padding-block:72px}
  .l5-kdc-go{width:100%;margin-top:28px}
  .l5-kdc-go .l5-btn{width:100%;padding-inline:14px}
  .l5-sec{padding-block:72px}
  .l5-h2{line-height:1.26}
  .l5-lead{margin-top:20px;font-size:15.5px}
  .l5-price{grid-template-columns:minmax(0,1fr)}
  .l5-pr-off{order:-1;font-size:clamp(88px,30vw,128px)}
  .l5-pr-rows{gap:30px}
  .l5-tk{--cut:92px;min-height:230px}
  .l5-tk-main{padding:24px 20px}
  .l5-tk-t{font-size:23px}
  .l5-tk-crown{width:34px}
  .l5-flow{grid-template-columns:minmax(0,1fr);gap:44px}
  .l5-fr+.l5-fr .l5-fr-v::before{display:none}
  .l5-fr-v{aspect-ratio:16/9}
  .l5-hub{width:62%}
  .l5-pub{width:44%;gap:14px}
  .l5-end{padding:64px 0 200px}
  .l5-board{width:900px}
}

/* ── 낮은 화면(1280×720 · 1366×768 등): 섹션이 한 화면에 들게 ── */
@media (max-height:800px) and (min-width:1000px){
  .l5-h2{font-size:clamp(30px,3.3vw,46px)}
  .l5-lead{font-size:16px;line-height:1.7}
  .l5-sec{padding-block:36px}
  .l5-fr-v{aspect-ratio:2/1}
  .l5-sem span{font-size:14px}
  .l5-pr-off{font-size:clamp(88px,11vw,170px)}
  .l5-tk{min-height:236px}
}

/* 오른쪽 섹션 눈금(/landing .c4-rail 과 같은 모양 · 규칙, l5.js 가 body 끝에 붙인다) */
:where(.l5-rail),:where(.l5-rail) *{box-sizing:border-box;margin:0;padding:0}
.l5-rail{position:fixed;z-index:30;top:calc(50% + 32px);right:clamp(6px,1.4vw,24px);display:grid;justify-items:end;translate:0 -50%}
.l5-rail button{position:relative;display:grid;align-items:center;justify-items:end;width:40px;height:18px;margin:0;padding:0;border:0;background:none;cursor:pointer}
.l5-rail button::before{content:"";width:12px;height:2px;border-radius:1px;background:#52525B;box-shadow:0 0 0 1px rgba(15,15,15,.55)}
.l5-rail button:hover::before{width:20px;background:#E4E4E7}
.l5-rail button[aria-current]::before{width:28px;background:#FF4155}
.l5-rail button::after{content:attr(aria-label);position:absolute;right:48px;padding:5px 10px;border-radius:6px;background:#1C1C21;box-shadow:inset 0 0 0 1px #2A2A30;color:#E4E4E7;font:600 12.5px/1.4 Pretendard,system-ui,sans-serif;white-space:nowrap;opacity:0;pointer-events:none}
.l5-rail button:is(:hover,:focus-visible)::after{opacity:1}
.l5-rail button:focus-visible{outline:0}
.l5-rail button:focus-visible::before{outline:2px solid #FFFFFF;outline-offset:3px}
@media (max-width:759px){.l5-rail{display:none}}

/* ── 움직임 ── */
@media (prefers-reduced-motion:no-preference){
  .l5-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);transform:translateX(-120%);animation:l5-sweep 4.5s var(--ease) 1.8s infinite;pointer-events:none}
  @keyframes l5-sweep{0%{transform:translateX(-120%)}32%,100%{transform:translateX(120%)}}

  /* 등장: 아래 26px · 흐림 6px 에서 1s(랜딩 .c4-rv 와 같은 값) */
  /* 섹션이 들어오면(.is-on) 차례로 떠오르고, 나갔다 다시 들어오면 처음부터(/landing c4-up 과 같은 값) */
  .l5-js .l5-rv{opacity:0}
  .l5-js .is-on .l5-rv{animation:l5-up 1s var(--ease) var(--d,0s) both}
  @keyframes l5-up{from{opacity:0;translate:0 26px;filter:blur(6px)}to{opacity:1}}

  /* 끝 제목: 왕관이 「판」 위로 내려앉는다(로고 왕관 t-drop 과 같은 곡선) */
  .l5-js .l5-pan .l5-crown{opacity:0}
  .l5-js .is-on .l5-pan .l5-crown{animation:l5-drop .62s var(--hop) 1.05s both}
  @keyframes l5-drop{from{opacity:0;transform:translate(-50%,-.6em)}to{opacity:1;transform:translate(-50%,0)}}

  /* 훈련비: 자부담 막대가 정가 길이에서 1% 로 줄어든다 */
  .l5-js .l5-pr-row.is-pay .l5-pr-bar i{width:100%;transition:width 1.7s cubic-bezier(.65,0,.2,1) .9s}
  .l5-js .is-on .l5-pr-row.is-pay .l5-pr-bar i{width:1%}

  /* 완강 특전: 진도 0 → 100%(l5.js 가 숫자를 센다), 그다음 초대장이 켜지고 왕관이 앉는다 */
  .l5-js .l5-prog-bar i{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.33,1,.68,1) .6s}
  .l5-js .is-on .l5-prog-bar i{transform:none}
  .l5-js .l5-tk{filter:grayscale(1) brightness(.55);transition:filter .8s var(--ease) 2s}
  .l5-js .is-on .l5-tk{filter:none}
  .l5-js .l5-tk-crown{opacity:0}
  .l5-js .is-on .l5-tk-crown{animation:l5-hop .6s var(--hop) 2.25s both}
  @keyframes l5-hop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

  /* 내일배움카드: 다섯 단계가 차례로 켜지고, 마지막 단계에서 카드가 켜지며 빛이 지나가고 「발급 완료」가 앉는다 */
  .l5-js .l5-steps li{opacity:.38;transition:opacity .5s var(--ease) calc(.7s + var(--i) * .38s)}
  .l5-js .is-on .l5-steps li{opacity:1}
  .l5-js .l5-steps li:not(:last-child)::before{transform-origin:top;transform:scaleY(0);transition:transform .38s linear calc(.85s + var(--i) * .38s)}
  .l5-js .is-on .l5-steps li:not(:last-child)::before{transform:none;background:var(--t4)}
  .l5-js .l5-cd{filter:grayscale(1) brightness(.5);transition:filter .8s var(--ease) 2.5s}
  .l5-js .is-on .l5-cd{filter:none}
  .l5-js .is-on .l5-cd::after{animation:l5-glint 1.1s var(--ease) 2.8s both}
  @keyframes l5-glint{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
  .l5-js .l5-cd-ok{opacity:0}
  .l5-js .is-on .l5-cd-ok{animation:l5-hop .6s var(--hop) 3.1s both}

  /* 출시 지원: 검토 칸에서 고른 칸만 밝아지고 왕관이 앉는다 */
  .l5-js .l5-hub.is-pick i{opacity:1;transition:opacity .6s var(--ease) 1.1s,box-shadow .6s var(--ease) 1.1s}
  .l5-js .is-on .l5-hub.is-pick i{opacity:.32}
  .l5-js .l5-hub.is-pick i:has(svg){opacity:1;box-shadow:0 0 0 0 transparent}
  .l5-js .is-on .l5-hub.is-pick i:has(svg){opacity:1;box-shadow:0 0 0 2px var(--ac),0 10px 30px -8px rgba(255,65,85,.55)}
  .l5-js .l5-hub-crown{opacity:0}
  .l5-js .is-on .l5-hub.is-pick .l5-hub-crown{animation:l5-hop2 .6s var(--hop) 1.4s both}
  .l5-js .is-on .l5-pub .l5-hub-crown{animation:l5-hop2 .6s var(--hop) 1.8s both}
  @keyframes l5-hop2{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}

  /* 채용 연계: 닫힌 문이 안쪽으로 조금 열리고 빛이 바닥에 번진다 */
  .l5-js .l5-door-leaf{transform:rotateY(0)}
  .l5-js .is-on .l5-door-leaf{transform:rotateY(30deg);transition-delay:.8s}
  .l5-js .l5-door-spill{opacity:0;transition-delay:1.2s}
  .l5-js .is-on .l5-door-spill{opacity:1}
  .l5-js .is-on .l5-end .l5-pan .l5-crown{animation-delay:2.3s}

  /* 끝: 판의 칸이 왼쪽 앞에서부터 차례로 뒤집혀 흑백이 바뀐다 */
  .l5-js .is-on .l5-board i{animation:l5-flip .9s cubic-bezier(.5,0,.3,1) calc(.5s + var(--i) * .09s) both}
  @keyframes l5-flip{0%{transform:rotateX(0);background:var(--a)}49.9%{background:var(--a)}50%{background:var(--b)}100%{transform:rotateX(180deg);background:var(--b)}}
}