/* 시안 세션이 덧댄 것 — RookissLibrary landing-v5 원본과 다른 점만 여기에 둔다(tools/port-landing.py 를 다시 돌려도 남고, 두 페이지가 맨 끝에 불러온다) */

/* 참여 방법 모달(#l5-jm, join.js)을 크게(2026-10-26 사용자 "이거 모달 창 크기 자체를 훨씬 더 키워줘야 할 것 같아" — 원본은 폭 680, 캡처 단계 900):
   넓은 화면(760px 이상)은 폭 = 화면의 66%(780 이상, 화면 - 48px 까지), 캡처가 있는 단계(.is-wide)는 높이도 화면 - 64px 로 꽉. 1200px 이상은 글 · 여백 · 캡처를 한 단계 키운다.
   모바일(~759)은 원본 그대로 아래에서 올라오는 판 */
@media (min-width:760px){
.l5-jm,.l5-jm.is-wide{width:min(max(780px,66vw),calc(100vw - 48px));max-height:calc(100dvh - 64px)}
.l5-jm.is-wide{height:calc(100dvh - 64px)}
}
@media (min-width:1200px){
.l5-jm-x{top:20px;right:20px;width:44px;height:44px}
.l5-jm-x svg{width:20px;height:20px}
.l5-jm-no{padding:34px 44px 0;font-size:14px}
.l5-jm-t{padding:0 84px 0 44px;font-size:clamp(28px,2.2vw,36px)}
.l5-jm-body{margin-top:18px;padding:0 44px 8px}
.l5-jm-intro{font-size:17px}
.l5-jm-list{gap:10px;margin-top:22px}
.l5-jm-list li{padding:16px 20px 16px 56px}
.l5-jm-list li::before{left:18px;top:17px;width:24px;height:24px;font-size:12.5px}
.l5-jm-list b{font-size:17px}
.l5-jm-list li>span{font-size:15.5px}
.l5-jm-note{margin-top:18px;font-size:14.5px}
.l5-jm-guide{gap:40px;margin-top:28px}
.l5-jm-guide h4{gap:12px;font-size:20px}
.l5-jm-guide h4::before{width:36px;height:28px;font-size:13px}
.l5-jm-guide>li>p{margin:10px 0 0 48px;font-size:16px}
.l5-jm-shot,.l5-jm-apps{margin-left:48px}
.l5-jm-shot{margin-top:18px;border-radius:14px}
.l5-jm-shot.is-tall{max-width:520px}
.l5-jm-apps{gap:14px}
.l5-jm-apps figcaption{font-size:13.5px}
.l5-jm-cap{margin-left:48px;font-size:13.5px}
.l5-jm-foot{padding:20px 44px 28px}
.l5-jm-nav{font-size:15px}
.l5-jm-ext{min-height:50px;padding:0 24px;font-size:15px}
}

/* KDC 설명의 「KDC를 수료한」 크레파스 동그라미 → 문장 위로 넘어가는 크레파스 화살표 → 오른쪽 작은 카드 「KDC가 뭔지 궁금하다면 ?」(2026-10-27 사용자, 문구는 문구 세션).
   거쳐 간 꼴: 밑줄 + 밑줄 끝에서 카드까지 이음선 → 사용자 "밑줄이 그냥 모든 멘트에 다 쳐져있는 것 같아서 별로" → 크레파스 밑줄만 → 사용자
   "카드 위치는 오른쪽에 그대로 있어야 돼. KDC를 수료한에 동그라미 치고 오른쪽으로 화살표를 해서 넘겨줘". 화살표는 「여러분께 초대코드를 드립니다.」 위로 둥글게 넘어간다(글 아래를 지나면 다시 밑줄처럼 보인다).
   결은 아래 과정 카드를 두른 동그라미 · 별(prereq.css .l5-pre-mark, SVG 필터 #l5-crayon)과 같은 필터 단계 · 색 · 둥근 끝 · 굵기. 필터 영역은 그림 전체 크기(userSpaceOnUse, local.js 가 정함).
   그림(.l5-kq-draw)은 머리(.l5-hd) 크기 그대로 겹친 SVG 이고 동그라미 · 화살표 길은 js/local.js 가 낱말 · 카드 자리를 재서 그린다.
   옆 자리가 넉넉하면 머리에 .is-kq-side — 카드는 오른쪽, 화살표가 카드 머리글 줄 왼쪽에 닿는다. 아니면(좁은 화면 · 모바일) 카드는 설명 아래 가운데, 동그라미만.
   등장: 형광펜 → 화살표 → 화살촉 → 카드(한 번만, l5.js) */
#kdc .l5-hd{position:relative}
.l5-kq{position:relative;isolation:isolate;padding-inline:.12em;color:var(--t1);font-weight:650} /* isolation: 형광펜(z-index -1)이 이 칸 안에서 글 뒤에 깔린다 */
/* 같은 형광펜을 참여 순서 01 카드 제목 「사전예약」에도(2026-10-27 사용자 "사전예약에 형광펜 그어주시고"). 필터 #l5-kq-marker 는 KDC 낱말의 SVG 에 있는 것을 같이 쓴다 */
.l5-mk{position:relative;isolation:isolate;padding-inline:.1em;margin-inline:-.1em}
.l5-kq-hl{position:absolute;z-index:-1;left:-.06em;top:0;width:calc(100% + .16em);height:100%;overflow:visible;pointer-events:none}
.l5-kq-hl path{fill:var(--ac);fill-opacity:.62;filter:url(#l5-kq-marker)}
.l5-kq-draw{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
.l5-kq-draw path{fill:none;stroke:var(--ac);stroke-linecap:round;stroke-linejoin:round;filter:url(#l5-kq-crayon)}
.l5-kq-a,.l5-kq-h{stroke-width:4}
.l5-hd:not(.is-kq-side) :is(.l5-kq-a,.l5-kq-h){display:none}
.l5-kq-card{position:relative;width:min(300px,100%);margin:18px auto 0;padding:16px 18px;border:1px solid rgba(255,65,85,.3);border-radius:14px;background:linear-gradient(180deg,#18181B,#131315);box-shadow:0 18px 40px -24px rgba(0,0,0,.9),0 0 30px -14px rgba(255,65,85,.35);text-align:left}
.is-kq-side .l5-kq-card{position:absolute;z-index:2;width:288px;margin:0}
.l5-kq-k{margin:0;color:var(--ac2);font-size:15px;line-height:1.4;font-weight:800;letter-spacing:-.02em}
.l5-kq-d{margin:6px 0 0;color:var(--t3);font-size:13.5px;line-height:1.6;letter-spacing:-.02em;word-break:keep-all}
.l5-kq-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 12px 8px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.02em;cursor:pointer;transition:background .2s,box-shadow .2s}
.l5-kq-go svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.l5-kq-go:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
@media (hover:hover){
  .l5-kq-go:hover{background:rgba(255,65,85,.16);box-shadow:inset 0 0 0 1px rgba(255,65,85,.45)}
  .l5-kq-go:hover svg{transform:translateX(3px)}
}
@media (min-width:1600px){
  .is-kq-side .l5-kq-card{width:320px;padding:18px 20px}
  .l5-kq-k{font-size:16.5px}
  .l5-kq-d,.l5-kq-go{font-size:14.5px}
}
@media (prefers-reduced-motion:no-preference){
  .l5-js .l5-kq-draw path{stroke-dasharray:1 2;stroke-dashoffset:1}
  .l5-js .l5-kq-card{opacity:0}
  .l5-js .l5-kq-hl{clip-path:inset(-40% 100% -40% -10%)}
  .l5-js .is-on .l5-kq-hl{animation:l5-kq-hl .5s cubic-bezier(.45,0,.35,1) .85s forwards}
  .l5-js .is-on .l5-mk .l5-kq-hl{animation-delay:1.3s} /* 01 카드가 떠오른 뒤 */
  @keyframes l5-kq-hl{to{clip-path:inset(-40% -10% -40% -10%)}}
  .l5-js .is-on .l5-kq-a{animation:l5-pre-draw .5s cubic-bezier(.45,0,.35,1) 1.55s forwards}
  .l5-js .is-on .l5-kq-h{animation:l5-pre-draw .22s ease-out 2.02s forwards}
  .l5-js .is-on .l5-kq-card{animation:l5-kq-c .6s var(--ease) 2.1s forwards}
  .l5-js .is-on .l5-hd:not(.is-kq-side) .l5-kq-card{animation-delay:1.5s}
  @keyframes l5-kq-c{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
}

/* 참여 순서: 카드 셋을 두 묶음으로(2026-10-27 사용자 "1번과 2번을 묶어서 현재 해야되는 것, 3번은 추후 오픈 시 로 따로 구분"):
   「지금 해야 할 일」(1 내일배움카드 발급 · 2 사전예약 — 레드 테두리 묶음, 머리표에 깜빡이는 레드 점) | 「추후 오픈 시」(3 KDC 과정 수강 — 점선 묶음, 카드 조금 흐림 · 「11월 11일 오픈」 알약).
   2번 카드 단추 = 사전예약 신청하기(레드, 사전예약 페이지로). 묶음 사이에 꺾쇠. 1000px 이상 두 묶음 가로(2 : 1), 760~999 세로로 쌓고(위 묶음 두 칸, 아래 묶음 한 칸 가운데), 759 이하 한 칸.
   카드 크기(2026-10-27 사용자 "각 카드들의 크기를 키우고 …"): 1200 이상은 번호 · 그림 · 글 · 단추를 화면 폭(vw)을 따라 키우고, 그림 높이는 화면 높이(vh)로도 묶어 한 화면에 들게 */
.l5-join-groups{--gap:clamp(18px,2.1vw,34px);--gg:calc(var(--gap) * 1.7);display:grid;gap:var(--gg)}
.l5-join-grp{position:relative;padding:clamp(30px,3.6vh,40px) clamp(14px,1.4vw,26px) clamp(14px,1.6vh,22px);border-radius:clamp(22px,1.6vw,30px)}
.l5-join-grp.is-now{border:1px solid rgba(255,65,85,.42);background:linear-gradient(180deg,rgba(255,65,85,.07),rgba(255,65,85,.015) 55%,transparent);box-shadow:0 0 50px -24px rgba(255,65,85,.55)}
.l5-join-grp.is-later{border:1.5px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.012)}
.l5-join-gk{position:absolute;top:0;left:clamp(18px,1.8vw,30px);translate:0 -50%;display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border-radius:999px;font-size:clamp(13px,.95vw,16px);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.is-now>.l5-join-gk{background:var(--ac);color:#fff;box-shadow:0 6px 18px -6px rgba(255,65,85,.8)}
.is-now>.l5-join-gk i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.is-later>.l5-join-gk{background:#1C1C20;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);color:var(--t2)}
.l5-join-grp .l5-join-path{height:100%;grid-template-columns:minmax(0,1fr)}
.l5-join-grp.is-now .l5-join-path{grid-template-columns:repeat(2,minmax(0,1fr))}
.l5-join-grp.is-later .l5-join-step{opacity:.82}
/* 묶음 사이 꺾쇠(카드 사이 꺾쇠와 같은 꼴) */
.l5-join-grp.is-now::after{content:"";position:absolute;z-index:1;top:50%;right:calc(var(--gg) / -2 - 7px);width:14px;height:14px;border-top:2px solid var(--t4);border-right:2px solid var(--t4);rotate:45deg;translate:-3px -50%}
.l5-join-open{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0!important;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--t1)!important;font-size:clamp(13px,1vw,16px)!important;font-weight:750;line-height:1.4!important}
.l5-join-open::before{content:"";width:13px;height:13px;border-radius:3px;border:1.6px solid currentColor;border-top-width:3px;opacity:.8}
.l5-join-open+p{margin-top:10px}
/* 2번 카드 사전예약 신청하기(레드) */
.l5-join-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:auto;padding:clamp(12px,1.7vh,15px) 16px;border-radius:12px;background:var(--ac);color:#fff;font-size:clamp(14.5px,1.15vw,16.5px);font-weight:800;letter-spacing:-.02em;text-decoration:none;box-shadow:0 10px 26px -12px rgba(255,65,85,.9);transition:background .2s,translate .2s var(--ease)}
.l5-join-cta svg{width:18px;height:18px;transition:translate .2s var(--ease)}
.l5-join-cta:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
@media (hover:hover){.l5-join-cta:hover{background:#FF5C6E}.l5-join-cta:hover svg{translate:2px -2px}}
@media (prefers-reduced-motion:no-preference){
  .l5-js .is-on .is-now>.l5-join-gk i{animation:l5-join-now 1.6s ease-in-out infinite}
  @keyframes l5-join-now{50%{box-shadow:0 0 0 6px rgba(255,255,255,0);opacity:.55}}
}
@media (min-width:1000px){
  .l5-join-groups{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch}
  .l5-join-groups{grid-template-columns:calc((100% - var(--gg)) * 2 / 3 + var(--gg) / 3) minmax(0,1fr)} /* 카드 셋 폭이 같게(왼쪽 묶음은 카드 둘 + 그 사이) */
}
@media (min-width:1200px){
  #join-steps .l5-in{max-width:2200px;padding-inline:clamp(24px,calc(6vw - 24px),110px)} /* 오른쪽 섹션 눈금과 떨어지게 */
  .l5-join-groups{max-width:1680px;margin-inline:auto;--gap:clamp(28px,calc(3.4vw - 16px),70px)}
  .l5-join-step{padding-inline:clamp(22px,1.8vw,40px);border-radius:clamp(18px,1.2vw,24px)}
  .l5-join-art{height:clamp(80px,min(7vw,11vh),150px)}
  .l5-join-no{font-size:clamp(56px,4.2vw,100px)}
  .l5-join-copy h3{font-size:clamp(21px,1.6vw,33px)}
  .l5-join-copy p{font-size:clamp(15px,1.1vw,21px)}
  .l5-join-more,.l5-join-cta{gap:6px;padding-block:clamp(12px,1.6vh,18px);padding-inline:8px;border-radius:clamp(12px,.8vw,16px);font-size:clamp(14px,1.1vw,19px);white-space:nowrap}
  .l5-join-more svg,.l5-join-cta svg{width:clamp(16px,1vw,20px);height:clamp(16px,1vw,20px)}
}
@media (min-width:760px) and (max-width:1199px){
  .l5-join-groups{--gap:clamp(24px,3.2vw,40px)}
}
@media (max-width:999px){
  .l5-join-grp.is-now::after{top:auto;right:auto;left:50%;bottom:calc(var(--gg) / -2 - 4px);rotate:135deg;translate:-50% 0}
}
@media (min-width:760px) and (max-width:999px){
  .l5-join-grp.is-later{justify-self:center;width:calc(50% + var(--gap) / 2 + clamp(14px,1.4vw,26px))}
}
@media (max-width:759px){
  .l5-join-grp{padding:30px 12px 12px}
  .l5-join-grp.is-now .l5-join-path{grid-template-columns:minmax(0,1fr)}
  .l5-join-cta{font-size:15.5px;padding:14px 16px}
}

/* 내일배움카드 발급 대상 자가점검(.l5-elig — KDC 안내 「지원대상」 탭). 판단 · 넘김은 js/local.js.
   꼴(2026-10-27 사용자 "글이 많고 선택하는 느낌으로 직관적이지 않거든 ? … 디자인좀 바꿔볼래"): 한 번에 한 문항 — 위에 「n / 전체」와 진행 막대, 큰 문항 글,
   그림이 있는 큰 칸(상황 여덟 · 네 O · 아니요 X · 잘 모르겠어요 ?, 숫자 구간은 글만 크게)을 누르면 고른 표시(레드 테두리 + 오른쪽 위 체크) 뒤 다음 문항으로 넘어간다.
   긴 도움말은 「도움말」로 접고, 해당 항목 목록은 작은 알약으로. 결과는 둥근 표시(초록 체크 · 노랑 ! · 레드 X) + 한 줄 + 이유 */
.l5-elig{margin-top:18px;padding:24px 22px 18px;border:1.5px solid rgba(255,65,85,.6);border-radius:18px;background:linear-gradient(180deg,#361b21 0%,#27272d 44%,#232328 100%);box-shadow:0 0 0 5px rgba(255,65,85,.08),0 24px 50px -26px rgba(255,65,85,.55)} /* 2026-10-28 사용자 "배경이 검은색이라 잘 안보여": 모달 바탕보다 밝은 판 + 레드 테 */
.l5-elig-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.l5-elig-t{margin:0;color:#fff;font-size:clamp(21px,2vw,26px);font-weight:900;line-height:1.3;letter-spacing:-.035em} /* 같은 날 "자가점검 문구를 크게" */
.l5-elig-step{flex-shrink:0;margin:0;color:var(--t4);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.l5-elig-step b{margin-right:4px;color:#fff;font-size:16px}
.l5-elig-q{margin:18px 0 0;padding:0;border:0;min-width:0}
.l5-elig-q[hidden]{display:none}
.l5-elig-q legend{padding:0;color:#fff;font-size:19px;font-weight:800;line-height:1.35;letter-spacing:-.03em}
.l5-elig-help{margin:6px 0 0;color:var(--t4);font-size:13px;line-height:1.55;word-break:keep-all}
.l5-elig-tip{margin-top:6px;color:var(--t4);font-size:13px}
.l5-elig-tip summary{display:inline-flex;align-items:center;gap:6px;color:var(--t3);font-weight:700;list-style:none;cursor:pointer}
.l5-elig-tip summary::-webkit-details-marker{display:none}
.l5-elig-tip summary::before{content:'?';display:grid;place-items:center;width:17px;height:17px;border:1.5px solid currentColor;border-radius:50%;font-size:10.5px;font-weight:800}
.l5-elig-tip summary:focus-visible{outline:2px solid var(--ac2);outline-offset:2px;border-radius:4px}
.l5-elig-tip p{margin:6px 0 0;line-height:1.6;word-break:keep-all}
/* 「아래 항목에 해당하나요?」 항목(2026-10-28 사용자 "항목들이 잘 눈에 안띄긴 한다 좀 더 키워줄래"): 13px 흐린 글 → 16px 흰 글 + 레드 점, 칸도 밝게 */
.l5-elig-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.l5-elig-list li{display:flex;align-items:center;gap:9px;padding:10px 15px 10px 13px;border-radius:10px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;font-size:16px;font-weight:650;line-height:1.4;letter-spacing:-.02em;text-wrap:balance}
.l5-elig-list li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px rgba(255,65,85,.8)}
@media (max-width:759px){.l5-elig-list li{padding:9px 13px 9px 12px;font-size:15px}}
.l5-elig-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.l5-elig-ops.is-8{grid-template-columns:repeat(4,minmax(0,1fr))}
.l5-elig-op{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.l5-elig-op input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.l5-elig-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:98px;padding:16px 10px 14px;border-radius:14px;background:rgba(255,255,255,.075);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;text-align:center;transition:background .2s,box-shadow .2s,color .2s,translate .2s var(--ease)}
.l5-elig-op.is-txt .l5-elig-tile{min-height:76px}
.l5-elig-ic{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#FF6B7B;transition:color .2s,scale .3s var(--hop)}
.l5-elig-l{font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.l5-elig-op.is-txt .l5-elig-l{font-size:17px;font-weight:800}
/* 고른 칸: 레드 테두리 · 옅은 레드 바탕 · 오른쪽 위 체크 동그라미 */
.l5-elig-tile::before{content:'';position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:#fff;scale:0;transition:scale .25s var(--hop)}
.l5-elig-tile::after{content:'';position:absolute;top:14.5px;right:14px;width:9px;height:5px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);rotate:-45deg;scale:0;transition:scale .25s var(--hop) .04s}
.l5-elig-op input:checked+.l5-elig-tile{background:var(--ac);box-shadow:inset 0 0 0 1.5px #FF8A96,0 12px 28px -12px rgba(255,65,85,.9);color:#fff}
.l5-elig-op input:checked+.l5-elig-tile .l5-elig-ic{color:#fff;scale:1.1}
.l5-elig-op input:checked+.l5-elig-tile::before,.l5-elig-op input:checked+.l5-elig-tile::after{scale:1}
.l5-elig-op input:focus-visible+.l5-elig-tile{outline:2px solid var(--ac2);outline-offset:2px}
@media (hover:hover){
  .l5-elig-op:hover .l5-elig-tile{background:rgba(255,65,85,.16);box-shadow:inset 0 0 0 1.5px rgba(255,65,85,.85),0 10px 24px -14px rgba(255,65,85,.8);translate:0 -2px}
  .l5-elig-op:hover input:checked+.l5-elig-tile{background:#FF5468;box-shadow:inset 0 0 0 1.5px #FF8A96,0 12px 28px -12px rgba(255,65,85,.9)}
}
.l5-elig-reset:focus-visible,.l5-elig-link:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
/* 결과 */
.l5-elig-out{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;margin-top:18px;padding:22px 22px 20px;border:1px solid;border-radius:14px}
.l5-elig-out[hidden]{display:none}
.l5-elig-out.is-clear{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.07)}
.l5-elig-out.is-review{border-color:rgba(251,191,36,.42);background:rgba(251,191,36,.07)}
.l5-elig-out.is-ex{border-color:rgba(255,65,85,.5);background:rgba(255,65,85,.09)}
.l5-elig-ri{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%}
.is-clear .l5-elig-ri{background:rgba(52,211,153,.16);box-shadow:inset 0 0 0 2px #34D399}
.is-clear .l5-elig-ri::before{content:'';width:18px;height:9px;border-left:3px solid #6EE7B7;border-bottom:3px solid #6EE7B7;rotate:-45deg;translate:0 -3px}
.is-review .l5-elig-ri{background:rgba(251,191,36,.15);box-shadow:inset 0 0 0 2px #FBBF24}
.is-review .l5-elig-ri::before{content:'!';color:#FCD34D;font-size:26px;font-weight:900;line-height:1}
.is-ex .l5-elig-ri{background:rgba(255,65,85,.16);box-shadow:inset 0 0 0 2px #FF4155}
.is-ex .l5-elig-ri::before,.is-ex .l5-elig-ri::after{content:'';position:absolute;width:24px;height:3px;border-radius:2px;background:#FF8A97;rotate:45deg}
.is-ex .l5-elig-ri::after{rotate:-45deg}
.l5-elig-r{margin:0;outline:none}
.l5-elig-r b{display:block;font-size:clamp(24px,2.3vw,30px);font-weight:900;line-height:1.25;letter-spacing:-.04em} /* 2026-10-28 사용자 "지원 대상입니다. 지원 대상이 아닙니다. 이렇게 딱": 결과를 크게 */
.is-clear .l5-elig-r b{color:#6EE7B7}
.is-review .l5-elig-r b{color:#FCD34D}
.is-ex .l5-elig-r b{color:#FF8A97}
.l5-elig-r span{display:block;margin-top:6px;color:var(--t2);font-size:14.5px;line-height:1.6}
.l5-elig-r span:empty{display:none}
.l5-elig-note,.l5-elig-acts{grid-column:1 / -1}
.l5-elig-note{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);color:#fff;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.02em;word-break:keep-all}
.l5-elig-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.l5-elig-link,.l5-elig-reset{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:750;cursor:pointer}
.l5-elig-link{background:var(--ac);color:#fff;box-shadow:0 10px 22px -10px rgba(255,65,85,.85)}
.l5-elig-reset{border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--t2)}
.l5-elig-priv{margin:14px 0 0;color:var(--t4);font-size:12px;line-height:1.55}
.l5-elig-src{margin:2px 0 0;color:var(--t5);font-size:11.5px}
@media (prefers-reduced-motion:no-preference){
  .l5-elig-q:not([hidden]){animation:l5-elig-in .35s var(--ease)}
  .l5-elig-q[data-dir="b"]:not([hidden]){animation-name:l5-elig-back}
  .l5-elig-out:not([hidden]){animation:l5-elig-res .45s var(--hop)}
  @keyframes l5-elig-in{from{opacity:0;translate:26px 0}}
  @keyframes l5-elig-back{from{opacity:0;translate:-26px 0}}
  @keyframes l5-elig-res{from{opacity:0;scale:.96}}
}
@media (min-width:1200px){
  .l5-elig{padding:26px 30px 22px}
  .l5-elig-q legend{font-size:21px}
  .l5-elig-tile{min-height:108px}
  .l5-elig-l{font-size:15px}
  .l5-elig-op.is-txt .l5-elig-l{font-size:18px}
}
@media (max-width:759px){
  .l5-elig{padding:18px 16px 16px}
  .l5-elig-q legend{font-size:18px}
  .l5-elig-ops{gap:8px}
  .l5-elig-ops.is-8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l5-elig-ops.is-long{grid-template-columns:minmax(0,1fr)}
  .l5-elig-tile{min-height:88px;padding:14px 8px 12px;gap:8px}
  .l5-elig-op.is-txt .l5-elig-tile{min-height:68px}
  .l5-elig-ic{width:26px;height:26px}
  .l5-elig-l{font-size:13.5px}
  .l5-elig-op.is-txt .l5-elig-l{font-size:15px}
  .l5-elig-ops.is-long .l5-elig-tile{min-height:56px}
  .l5-elig-out{padding:16px}
  .l5-elig-ri{width:46px;height:46px}
  .l5-elig-r b{font-size:22px}
  .l5-elig-note{font-size:14px}
}
/* 고용24 화면 녹화(2026-10-27 사용자 "직접 하는걸 영상으로") */
.l5-jm-vid{margin:22px auto 0}
/* 안내 영상 플레이어(.l5-vp, 2026-10-27 사용자 "한 스크롤에 다 보일 수 있도록 크기를 조금 작게 … 한가운데에 재생 표시 … 커스텀 ui"). 단추는 template#l5-vp-tpl, 움직임은 js/local.js.
   막대는 영상 바닥에 얇게 겹친다(녹화에 새긴 자막과 덜 겹치게) — 재생 중엔 마우스가 멈추면 숨는다.
   크기: 넓은 화면은 모달 본문 높이(컨테이너 단위 cqh)에서 위 글 · 아래 설명 · 아래 흐림(40px) 몫을 뺀 높이에 16:10 으로 맞춘 폭까지만(가운데). 02 처럼 바로 위에 소개 글이 있으면 그 두 줄 몫을 더 뺀다 */
.l5-vp{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;background:#000;isolation:isolate}
.l5-vp video{display:block;width:100%;height:auto;cursor:pointer}
@media (min-width:760px){
  .l5-jm.is-wide .l5-jm-body:has(.l5-vp){container-type:size}
  .l5-jm-vid{max-width:max(360px,calc((100cqh - var(--vp-r,92px)) * 1.6))}
  .l5-jm-intro+.l5-jm-vid{--vp-r:142px}
}
@media (min-width:760px) and (max-width:1259px){.l5-jm-intro+.l5-jm-vid{--vp-r:172px}} /* 소개 글이 두 줄 */
.l5-vp-big{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:84px;height:84px;padding:0;border:0;border-radius:50%;background:rgba(10,10,12,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 14px 34px -10px rgba(0,0,0,.8);color:#fff;cursor:pointer;translate:-50% -50%;transition:background-color .2s,box-shadow .2s,scale .2s,opacity .2s,visibility .2s}
.l5-vp-big svg{width:36px;height:36px;fill:currentColor}
.l5-vp-big:focus-visible{background:rgba(255,65,85,.82);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),0 0 0 8px rgba(255,65,85,.16),0 0 46px rgba(255,65,85,.6);scale:1.06}
.l5-vp-big:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (hover:hover){ /* 올림(레드 빛 · 굵은 진행 막대)은 마우스에서만 — 터치는 누른 자리에 올림이 남는다 */
  .l5-vp:hover .l5-vp-big{background:rgba(255,65,85,.82);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),0 0 0 8px rgba(255,65,85,.16),0 0 46px rgba(255,65,85,.6);scale:1.06}
  .l5-vp-pp:hover,.l5-vp-fs:hover{background:rgba(255,255,255,.14)}
  .l5-vp-seek:hover .l5-vp-track{height:6px}
  .l5-vp-seek:hover .l5-vp-knob{scale:1}
}
.l5-vp.is-on .l5-vp-big{opacity:0;visibility:hidden;scale:.9}
.l5-vp-bar{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;gap:8px;padding:16px 10px 4px;background:linear-gradient(transparent,rgba(0,0,0,.72));transition:opacity .25s,visibility 0s}
.l5-vp:not(.is-started) .l5-vp-bar,.l5-vp.is-idle .l5-vp-bar{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s} /* 나올 땐 바로 보이게(포커스를 받을 수 있게), 숨을 땐 흐려진 뒤 */
.l5-vp.is-idle:has(:focus-visible) .l5-vp-bar{opacity:1;visibility:visible}
.l5-vp.is-idle,.l5-vp.is-idle video{cursor:none}
.l5-vp-pp,.l5-vp-fs{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s}
.l5-vp-pp:focus-visible,.l5-vp-fs:focus-visible{outline:2px solid var(--ac2);outline-offset:1px}
.l5-vp-pp svg{width:20px;height:20px;fill:currentColor}
.l5-vp-fs svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.l5-vp-pp .is-pause,.l5-vp.is-on .l5-vp-pp .is-play,.l5-vp-fs .is-out,.l5-vp.is-fs .l5-vp-fs .is-in{display:none}
.l5-vp.is-on .l5-vp-pp .is-pause,.l5-vp.is-fs .l5-vp-fs .is-out{display:block}
.l5-vp-seek{display:flex;flex:1;align-items:center;min-width:0;height:30px;border-radius:6px;cursor:pointer;touch-action:none}
.l5-vp-seek:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
.l5-vp-track{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.24);transition:height .15s}
.l5-vp-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#C81E35,var(--ac));transform:scaleX(var(--p,0));transform-origin:left}
.l5-vp-knob{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,65,85,.4),0 0 14px rgba(255,65,85,.7);scale:0;transition:scale .15s}
.l5-vp-seek:focus-visible .l5-vp-track,.l5-vp-seek.is-drag .l5-vp-track{height:6px}
.l5-vp-seek:focus-visible .l5-vp-knob,.l5-vp-seek.is-drag .l5-vp-knob{scale:1}
.l5-vp:fullscreen{display:flex;align-items:center;border:0;border-radius:0}
.l5-vp:fullscreen video{width:100%;height:100%;object-fit:contain}
.l5-vp.is-fs .l5-vp-bar{gap:14px;padding:40px 28px 18px}
.l5-vp.is-fs .l5-vp-pp,.l5-vp.is-fs .l5-vp-fs{width:46px;height:46px}
.l5-vp.is-fs .l5-vp-pp svg{width:26px;height:26px}
.l5-vp.is-fs .l5-vp-fs svg{width:24px;height:24px}
@media (max-width:759px){.l5-vp-big{width:64px;height:64px}.l5-vp-big svg{width:28px;height:28px}.l5-vp-bar{gap:4px;padding:14px 6px 2px}}
.l5-jm-vid figcaption{margin-top:8px;color:var(--t4);font-size:12.5px;line-height:1.55;word-break:keep-all}
/* RookissAI 수강신청방법 모달: 캡처 단계 대신 영상(2026-10-27) — 단계 번호 들여쓰기가 없어졌으므로 설명 · 수료 인증 안내를 왼쪽에 붙인다 */
.l5-jm-vid+.l5-jm-cap{margin:12px 0 0}
.l5-jm-after{margin-top:16px;color:var(--t3);font-size:15px;line-height:1.7;word-break:keep-all}
/* FAQ 질문이 일곱 개가 되며(2026-10-27 다른 카드 결제 · 마감 후 정가 수강 추가) 마지막 「출시 지원」의 나타남 지연 — 앞 항목들과 같은 .06s 간격 */
.l5-faq-d7{--d:.58s}

/* KDC 안내 모달(template#l5-jm-kdc — 2026-10-27 사용자 "rookiss.ai … 지원대상, 지원 절차, 지원내용, 제도 소개 … 이거대로 모달"): 네 탭 + 탭마다 글 판.
   탭 줄은 모달 본문 위에 붙어 있다(sticky) — 긴 탭(지원절차 · 제도소개)을 내려 읽다가도 바로 바꾼다. 고른 탭은 레드 알약(rookiss.ai 의 파란 알약 자리), 탭 전환은 js/local.js */
.l5-kt{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:10px 0 12px;background:#141416;box-shadow:0 10px 12px -10px #141416}
.l5-kt [role=tab]{height:38px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--t3);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.l5-kt [role=tab]:hover{color:#fff;background:rgba(255,255,255,.1)}
.l5-kt [role=tab][aria-selected=true]{background:var(--ac);box-shadow:none;color:#fff}
.l5-kt [role=tab]:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
.l5-kt-p{padding-top:4px}
.l5-kt-p:focus-visible{outline:none}
.l5-kt-p h4:not(.l5-elig *){margin:0;color:#fff;font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.l5-kt-p p:not(.l5-elig *),.l5-kt-p li:not(.l5-elig *){color:var(--t3);font-size:14.5px;line-height:1.7;word-break:keep-all}
.l5-kt-lead{margin:6px 0 0;color:var(--t2)!important;font-size:16px!important;font-weight:600}
.l5-kt-card{margin-top:12px;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.l5-kt-card>p{margin:6px 0 0}
.l5-kt-card.is-x{background:rgba(255,65,85,.04);box-shadow:inset 0 0 0 1px rgba(255,65,85,.22)}
.l5-kt-card.is-ac{box-shadow:inset 0 0 0 1px rgba(255,65,85,.22)}
/* 지원 제외 대상 바로 아래에 발급 대상 자가점검(template#l5-elig-tpl)이 붙는다(2026-10-27 사용자). 위 .l5-kt-p p · li · h4 는 그 안에 닿지 않게 했다. 「내 상황으로 확인해 보기」 머리글은 2026-10-28 사용자 "없애"로 뺐다 */
.l5-kt-p .l5-elig{margin-top:12px}
/* 지원내용 = 훈련비 판 하나(2026-10-27 사용자 "훈련비쪽만 좀 더 키워서 … 얼마를 지원해주는건지 정확히 알 수 있도록 색깔 표시"): 크레딧 50만원을 크게(레드), 90 대 10 막대 — 레드 = 크레딧에서 차감, 흰색 = 본인 부담. 글 속 같은 말도 같은 색 */
@media (min-width:1200px){
.l5-kt [role=tab]{height:42px;padding:0 20px;font-size:15.5px}
.l5-kt-p h4:not(.l5-elig *){font-size:18px}
.l5-kt-p p:not(.l5-elig *),.l5-kt-p li:not(.l5-elig *){font-size:15.5px}
.l5-kt-lead{font-size:17px!important}
.l5-kt-card{padding:20px 24px}
}
@media (max-width:759px){
.l5-kt{gap:6px}
.l5-kt [role=tab]{height:36px;padding:0 14px;font-size:14px}
.l5-kt-card{padding:16px}
}

/* 「100% AI」로 모이는 분야 낱말 여섯(ai.js, .l5-ai-fields — 원본 ai.css 는 모두 회색 #D4D4DA)을 낱말마다 다른 색 + 같은 색 빛으로(2026-10-27 사용자 "100%로 모일때 기획, 아트, 개발, qa, 사운드, 출시와 같은 문구들이 각각 개성있는 색깔들로").
   AI 의 레드와 겹치지 않게 레드는 쓰지 않았다. 날아가며 흐려지는 것(blur · 투명)은 ai.js 그대로 */
.l5-ai-fields li{color:var(--c);text-shadow:0 0 .42em color-mix(in srgb,var(--c) 45%,transparent)}
.l5-ai-fields li:nth-child(1){--c:#FFC24B} /* 기획 — 금빛 */
.l5-ai-fields li:nth-child(2){--c:#FF7AC6} /* 아트 — 분홍 */
.l5-ai-fields li:nth-child(3){--c:#4CC9FF} /* 개발 — 하늘 */
.l5-ai-fields li:nth-child(4){--c:#A98BFF} /* 사운드 — 보라 */
.l5-ai-fields li:nth-child(5){--c:#4ADE80} /* QA — 초록 */
.l5-ai-fields li:nth-child(6){--c:#FF9A4D} /* 출시 — 주황 */
/* 「추가 커리큘럼」 작은 글을 빼며(2026-10-27) 큰 글 위 간격(원본 margin-top 12px — 작은 글 아래 간격)도 없앤다 */
#kdc .l5-pre-add-t:first-child{margin-top:0}

/* #release 제목 앞말 주석 + 돼지꼬리 선(2026-10-27 사용자 "제목 윗부분에 '수료 이후 이어지는 실전 AI 게임 개발 코칭에서는' 이라는 말을 약간 돼지꼬리 처럼"):
   제목보다 훨씬 작은 글을 제목 왼쪽 위에 살짝 기울여 두고, 글 끝에서 빨간 크레파스 선이 오른쪽으로 나가 위로 한 바퀴 꼬불 돈 뒤 제목 첫 줄 「출시 지원부터,」 끝으로 내려와 화살촉으로 닿는다.
   글 끝과 첫 줄 끝 사이가 좁거나 오른쪽 자리가 없으면(.is-tail-down — 좁은 화면) 글 아래에서 짧게 한 바퀴 꼬불 돌아 제목 위로 내려온다. 길은 js/local.js, 결은 #kdc 화살표와 같은 필터 단계 · 굵기 · 둥근 끝. 등장: 글 → 선 → 화살촉(한 번만) */
.l5-rel-hd{position:relative}
.l5-rel-pre{display:inline-block;margin:0 0 30px;color:var(--t2);font-size:clamp(15px,1.45vw,21px);font-weight:650;line-height:1.45;letter-spacing:-.02em;rotate:-2.5deg;transform-origin:0 100%;--d:0s}
.l5-rel-pre b{color:var(--ac2);font-weight:800}
.l5-rel-hd.is-tail-down .l5-rel-pre{margin-bottom:56px}
.l5-rel-tail{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
.l5-rel-tail path{fill:none;stroke:var(--ac);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#l5-rel-crayon)}
@media (prefers-reduced-motion:no-preference){
  .l5-js .l5-rel-tail path{stroke-dasharray:1 2;stroke-dashoffset:1}
  .l5-js .is-on .l5-rel-tail-a{animation:l5-pre-draw .85s cubic-bezier(.45,0,.35,1) .7s forwards}
  .l5-js .is-on .l5-rel-tail-h{animation:l5-pre-draw .22s ease-out 1.55s forwards}
}

/* 줄바꿈으로 갈라지면 안 되는 말 묶음(2026-10-27 #kdc 설명 둘째 줄 「실전 AI 게임 개발을」 — 카드 옆에서 좁아진 설명이 「실전 AI 게임 / 개발을」로 갈라졌다) */
.l5-nw{white-space:nowrap}

/* #kdc 설명: 카드 옆에서 폭이 줄어 마지막 줄에 「소통합니다.」 한 낱말만 떨어지지 않게(2026-10-27 첫 줄 「KDC를 수료한 수강생들에게는 초대코드를 드립니다.」로 바뀐 뒤 1440 에서 생김) */
#kdc .l5-lead{text-wrap:pretty}

/* #kdc 과정 카드 아래 가격 · 별표 옆 「선착순 1,000명 한정」(2026-10-27 사용자 "밑에 680,000원 짜리 과정을 68,000원에 들을 수 있다는 가격만 적어놓고", "별표 쪽에는 선착순 1000명 한정 이렇게 적어놔 그리고 밑줄 찍찍 긋고") */
.l5-pre-price{display:flex;align-items:baseline;justify-content:center;gap:.55em;color:var(--t3)}
.l5-pre-was{position:relative;text-decoration:none;color:var(--t4);font-size:clamp(17px,1.4vw,22px);font-weight:700;letter-spacing:-.01em}
.l5-pre-x{position:absolute;left:-7%;top:50%;width:114%;height:.9em;translate:0 -50%;overflow:visible;pointer-events:none}
.l5-pre-x path,.l5-pre-ul path{fill:none;stroke:var(--ac);stroke-linecap:round;filter:url(#l5-hand)}
.l5-pre-x path{stroke-width:3.4}
.l5-pre-to{color:var(--t4);font-size:clamp(15px,1.2vw,19px);font-weight:600}
.l5-pre-now{color:var(--ac);font-size:clamp(28px,2.6vw,42px);font-weight:850;line-height:1;letter-spacing:-.03em;text-shadow:0 0 .5em rgba(255,65,85,.3)}
/* 할인율(2026-10-28 사용자 "여기에 90% 할인율 들어가야 되고" → "알약으로 하지말고 그냥 글씨로만" → 화살표 아래를 동그라미 친 그림과 "여기에 90% 할인이라고 적어줄래"):
   화살표 바로 아래 레드 손글씨(「선착순 1,000명 한정」처럼 살짝 기울임), 줄 긋기 뒤에 나타난다. 줄 높이에는 끼지 않는다(absolute) */
.l5-pre-mid{position:relative;display:inline-flex}
.l5-pre-off{position:absolute;left:50%;top:100%;translate:-50% .35em;rotate:-6deg;color:var(--ac);font-size:clamp(15px,1.25vw,20px);font-weight:850;line-height:1;letter-spacing:-.02em;white-space:nowrap;pointer-events:none}
.l5-pre-tag{position:absolute;z-index:5;left:calc(-19% + clamp(50px,5.4vw,86px) + 2px);top:-22%;margin:0;rotate:-7deg;transform-origin:0 100%;color:var(--ac);font-size:clamp(17px,1.5vw,24px);font-weight:850;letter-spacing:-.02em;white-space:nowrap;pointer-events:none;--d:2.65s}
.l5-pre-tag span{position:relative;z-index:1;text-shadow:0 0 .6em rgba(255,65,85,.3)}
.l5-pre-ul{position:absolute;left:-4%;top:86%;width:108%;height:.8em;overflow:visible}
.l5-pre-ul path{stroke-width:5}
@media (prefers-reduced-motion:no-preference){
  .l5-js .l5-pre-ul path,.l5-js .l5-pre-x path{stroke-dasharray:1 2;stroke-dashoffset:1}
  .l5-js .is-on .l5-pre-x path{animation:l5-pre-draw .4s cubic-bezier(.45,0,.35,1) 1.1s forwards}
  .l5-js .l5-sec:not(.is-on) .l5-pre-off{opacity:0}
  .l5-js .is-on .l5-pre-off{animation:l5-pre-off .45s var(--hop) 1.5s both}
  @keyframes l5-pre-off{from{opacity:0;scale:.3}}
  .l5-js .is-on .l5-pre-ul path:nth-of-type(1){animation:l5-pre-draw .35s cubic-bezier(.45,0,.35,1) 3.05s forwards}
  .l5-js .is-on .l5-pre-ul path:nth-of-type(2){animation:l5-pre-draw .3s cubic-bezier(.45,0,.35,1) 3.4s forwards}
}
@media (min-width:1000px) and (max-height:800px){
  .l5-pre-tag{top:-21%}
}
@media (max-width:759px){
  .l5-pre-tag{left:calc(-5% + 48px);top:-15%;font-size:15px}
  .l5-pre-now{font-size:30px}
  .l5-pre-price{flex-wrap:wrap;row-gap:.4em}
  .l5-pre-off{font-size:15px}
}
/* ── 탑(#tower, 2026-10-27 사용자 "룩으로 생긴 탑 … 일단 탑 디자인만 해봐 웅장하게"): 그림은 tools/rook-tower/build.mjs 가 만든 SVG(2026-10-28 사용자 "룩 모양 말고 다른 탑으로"로 흑요석 첨탑을 해 봤다가 "이전게 더 괜찮은데 룩으로 돌리고 룩 크기를 좀 더 키워줘"로 룩으로 되돌리고 키웠다), 층 글 자리는 아래 tower:pos(같은 스크립트가 쓴다).
   이야기(사용자 "RookissAI가 공대장 느낌이라 1~3층을 공략하고 4~5층을 공략하고 있는 느낌이고 여러분은 1층부터 공략해야되는 느낌"): 왼쪽 레드 길 = RookissAI(1~3층 CLEAR, 4~5층 공략 중), 오른쪽 흰 점 = 여러분(1층 START → 2층 화살표) ── */
.l5-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* tower:pos */.l5-tw{--tw-k:0.616}.l5-tw-f5{top:16.06%}.l5-tw-f4{top:37.13%}.l5-tw-f3{top:54.92%}.l5-tw-f2{top:72.06%}.l5-tw-f1{top:87.44%}.l5-tw-f5{--sx:44.51cqw;--ex:29.5cqw}.l5-tw-f4{--sx:40.87cqw;--ex:26.42cqw}.l5-tw-f3{--sx:44.1cqw;--ex:29.39cqw}.l5-tw-f2{--sx:48.55cqw;--ex:33.65cqw}.l5-tw-f1{--sx:58.51cqw;--ex:41.08cqw}.l5-tw-clouds{top:45.88%}.l5-tw-beam{height:calc(7.01% + 30cqh)}.l5-tw-sparks{top:2.44%}.l5-tw-ring{top:11.97%}/* /tower:pos */
.l5-tw.l5-sec{padding-block:clamp(4px,.75vh,8px);overflow:hidden;isolation:isolate;background:radial-gradient(120% 70% at 50% 8%,#1c0609 0%,#0b0507 38%,#060506 70%)}
.l5-tw{--tw-h:min(calc(100vh - var(--head) - clamp(8px,1.5vh,16px)),1300px,calc((100vw - 40px) / var(--tw-k)))} /* 2026-10-28 사용자 "룩 크기를 좀 더 키워줘": 위아래 여백 20~48 → 8~16px, 최대 1180 → 1300 */
.l5-tw-box{position:relative;justify-self:center;width:calc(var(--tw-h) * var(--tw-k));height:var(--tw-h);container-type:size;z-index:1}
.l5-tw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 하늘: 탑 꼭대기 뒤 레드 빛 · 위에서 내리꽂는 빛줄기 · 바닥 안개 · 지평선 */
.l5-tw-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.l5-tw-sky>span{position:absolute}
.l5-tw-rays{left:50%;top:-12%;width:180vmax;height:140%;translate:-50% 0;background:conic-gradient(from 180deg at 50% 0,transparent 0deg 158deg,rgba(255,70,90,.1) 161deg,transparent 164deg 170deg,rgba(255,90,110,.12) 173deg,transparent 176deg 178deg,rgba(255,110,125,.15) 180deg,transparent 182deg 185deg,rgba(255,90,110,.11) 188deg,transparent 191deg 196deg,rgba(255,70,90,.1) 199deg,transparent 202deg);-webkit-mask:radial-gradient(60% 75% at 50% 0,#000 30%,transparent 80%);mask:radial-gradient(60% 75% at 50% 0,#000 30%,transparent 80%)}
.l5-tw-floor{left:0;right:0;bottom:0;height:22%;background:radial-gradient(48% 60% at 50% 18%,rgba(255,52,72,.22),transparent 70%),linear-gradient(to bottom,transparent,rgba(0,0,0,.55))}
.l5-tw-floor::before{content:'';position:absolute;left:8%;right:8%;top:18%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,80,100,.55) 30%,rgba(255,140,150,.8) 50%,rgba(255,80,100,.55) 70%,transparent)}
.l5-tw-fog{left:-10%;right:-10%;bottom:4%;height:26%;background:radial-gradient(40% 50% at 30% 60%,rgba(120,40,50,.22),transparent 70%),radial-gradient(36% 46% at 72% 54%,rgba(140,60,70,.18),transparent 70%);filter:blur(18px)}
.l5-tw-fog.is-b{bottom:-4%;height:20%;background:radial-gradient(50% 50% at 55% 50%,rgba(40,20,24,.9),transparent 70%)}
/* 탑 몸: 반으로 가른 단면 — 검은 속(뒤쪽 안벽) 위에 층 글. 자른 면은 회색 + 바깥 레드 선, 4 · 5층 방만 안에 레드 기운(공략 중) */
.l5-tw-tint{fill:url(#l5-tw-ai-g);mix-blend-mode:screen;opacity:.75} /* 2026-10-28 사용자 "공략중도 그냥 다 공략된거로": 모든 층에 레드 빛(전엔 4 · 5층만) */
.l5-tw-cut{fill:url(#l5-tw-cut-g)}
.l5-tw-cut-lip{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5}
.l5-tw-edge{fill:none;stroke:#ff4155;stroke-width:2.5;opacity:.75}
.l5-tw-edge.is-r{stroke:#ff6b7b;opacity:1}
.l5-tw-ceil{fill:url(#l5-tw-ceil-g)}
.l5-tw-ceil-e{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1.5}
.l5-tw-floor1{fill:#131317}
.l5-tw-inner{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5}
.l5-tw-cren{fill:none;stroke:#ff4155;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 5px #ff4155) drop-shadow(0 0 14px rgba(255,65,85,.7))}
.l5-tw-mtop{fill:none;stroke:#ff8a96;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px #ff4155) drop-shadow(0 0 10px rgba(255,65,85,.8))} /* 성가퀴 칸 윗변 빛(2026-10-28 사용자 "룩의 외형을 좀 더 멋있게") */
.l5-tw-sheen{pointer-events:none}
.l5-tw-slab-glow{fill:none;stroke:#ff4155;stroke-width:2;opacity:.55;filter:drop-shadow(0 0 6px #ff4155)}
.l5-tw-halo{fill:none;stroke:#ff4155;stroke-width:9;opacity:.75;filter:url(#l5-tw-bloom)}
.l5-tw-halo.is-l{opacity:.4}
.l5-tw-refl{opacity:.9}
/* 층 글: 검은 속 가운데 — 층 번호 · 장르(CLEAR · 공략 중 알약은 2026-10-27 사용자 "clear랑 공략중 태그는 없어도 될 것 같아"로 뺐다) */
.l5-tw-fl{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.l5-tw-fl{z-index:3}
.l5-tw-f{position:absolute;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5cqh;text-align:center;white-space:nowrap}
.l5-tw-n{font-size:1.45cqh;font-weight:800;letter-spacing:.22em;color:#8a8a93}
.l5-tw-f b{font-size:3.3cqh;font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#f4f4f6;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.l5-tw-f b.is-two{display:flex;flex-direction:column;align-items:center;font-size:2.7cqh}
.l5-tw-f .l5-tw-n{color:#ff6b7b}
.l5-tw-f b{color:#fff;text-shadow:0 0 22px rgba(255,65,85,.75),0 2px 14px rgba(0,0,0,.8)}
.l5-tw-f1 b{font-size:3.6cqh}
/* 층 옆 게임 화면(2026-10-28 사용자 "아이콘으로 말고, 그냥 우리의 영상중에 캡처 이미지로 가자 … 옆에 살짝 띄워줘"): 탑 옆선에서 --sx(tower:pos) 만큼 띄워 번갈아 좌우, 살짝 기울여 둥둥 */
.l5-tw-shot{position:absolute;top:50%;height:12.5cqh;width:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1.1cqh;translate:0 -50%;background:#0b0b0d;box-shadow:0 0 0 1.5px rgba(255,107,123,.6),0 1.6cqh 3.4cqh rgba(0,0,0,.75),0 0 2.8cqh rgba(255,65,85,.38)}
.l5-tw-shot.is-tall{height:18cqh;aspect-ratio:9/16}
.l5-tw-shot.is-r{left:calc(50% + var(--sx,30cqw))}
.l5-tw-shot.is-l{right:calc(50% + var(--sx,30cqw))}
/* 층 ↔ 캡처를 잇는 레드 크레파스 선(2026-10-28 사용자 "옆에 둥둥 띄우지 말고 옆에 크레파스로 해서 이어주면"): 탑 바깥선(--ex) ~ 캡처(--sx), 둘 다 build.mjs 가 층마다 계산.
   가로세로 비 5:1 로 viewBox(100×20)와 같게 해 선 굵기 · 점이 찌그러지지 않는다. 크레파스 결은 #l5-hand(가격 줄 손글씨 svg 안 필터) */
.l5-tw-link{position:absolute;top:50%;width:calc(var(--sx,30cqw) - var(--ex,20cqw));aspect-ratio:5;translate:0 -50%;overflow:visible;pointer-events:none}
.l5-tw-link.is-r{left:calc(50% + var(--ex,20cqw))}
.l5-tw-link.is-l{right:calc(50% + var(--ex,20cqw));scale:-1 1}
.l5-tw-link path{fill:none;stroke:var(--ac);stroke-width:7.5;stroke-linecap:round;filter:url(#l5-hand)}
.l5-tw-link circle{fill:var(--ac);filter:url(#l5-hand)}
/* 성가퀴에서 하늘로 솟는 레드 빛기둥(RookissAI 층) */
.l5-tw-beam{position:absolute;left:50%;top:-30cqh;width:34%;translate:-50% 0;pointer-events:none;background:linear-gradient(to top,rgba(255,70,90,.5),rgba(255,60,80,.16) 45%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);filter:blur(10px);mix-blend-mode:screen}
.l5-tw-beam::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:16%;translate:-50% 0;background:linear-gradient(to top,rgba(255,180,190,.75),rgba(255,90,110,.25) 50%,transparent);filter:blur(4px)}
/* 3층 · 4층 사이를 지나는 구름 띠(RookissAI 가 공략 중인 층은 구름 위) */
.l5-tw-clouds{position:absolute;left:-70%;right:-70%;height:9cqh;translate:0 -50%;z-index:2;pointer-events:none}
.l5-tw-clouds span{position:absolute;top:0;height:100%;border-radius:50%;background:radial-gradient(closest-side at 50% 42%,rgba(176,112,122,.42),rgba(110,52,62,.3) 45%,rgba(40,18,24,.2) 70%,transparent);filter:blur(9px)}
.l5-tw-clouds span:nth-child(1){left:0;width:34%;top:-10%}
.l5-tw-clouds span:nth-child(2){left:22%;width:26%;top:18%;opacity:.8}
.l5-tw-clouds span:nth-child(3){left:40%;width:22%;top:-4%;opacity:.55}
.l5-tw-clouds span:nth-child(4){left:56%;width:28%;top:20%;opacity:.85}
.l5-tw-clouds span:nth-child(5){left:72%;width:28%;top:-8%}
/* 성가퀴 둘레로 떠오르는 불티 */
.l5-tw-sparks{position:absolute;left:30%;right:30%;height:30cqh;pointer-events:none;z-index:2}
.l5-tw-sparks i{position:absolute;bottom:60%;width:3px;height:3px;border-radius:50%;background:#ff7a88;box-shadow:0 0 6px #ff4155;opacity:0}
.l5-tw-sparks i:nth-child(1){left:8%}.l5-tw-sparks i:nth-child(2){left:22%;bottom:52%}.l5-tw-sparks i:nth-child(3){left:35%;bottom:66%}.l5-tw-sparks i:nth-child(4){left:47%}.l5-tw-sparks i:nth-child(5){left:58%;bottom:56%}
.l5-tw-sparks i:nth-child(6){left:68%;bottom:64%}.l5-tw-sparks i:nth-child(7){left:80%}.l5-tw-sparks i:nth-child(8){left:92%;bottom:54%}.l5-tw-sparks i:nth-child(9){left:15%;bottom:70%}.l5-tw-sparks i:nth-child(10){left:74%;bottom:72%}
/* 꼭대기 뒤 큰 고리(일식처럼) */
.l5-tw-ring{position:absolute;left:50%;width:66cqh;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;border:1px solid rgba(255,96,112,.42);box-shadow:0 0 40px rgba(255,65,85,.25),inset 0 0 60px rgba(255,65,85,.16);background:radial-gradient(closest-side,rgba(255,40,60,.1),rgba(255,40,60,.03) 70%,transparent)}
.l5-tw-ring::before{content:'';position:absolute;inset:-7%;border-radius:50%;border:1px dashed rgba(255,96,112,.16)}
/* 등장(움직임 허용 · ?still 아님): 탑이 떠오름 → 1층부터 5층까지 층 글 · 크레파스 선 · 옆 게임 화면 · 레드 빛 → 성가퀴 · 빛기둥 · 고리 */
@media (prefers-reduced-motion:no-preference){
  .l5-js .l5-tw .l5-tw-svg,.l5-js .l5-tw .l5-tw-ring,.l5-js .l5-tw .l5-tw-beam,.l5-js .l5-tw .l5-tw-tint,.l5-js .l5-tw .l5-tw-cren,.l5-js .l5-tw .l5-tw-beacon,.l5-js .l5-tw .l5-tw-f,.l5-js .l5-tw .l5-tw-clouds,.l5-js .l5-tw .l5-tw-mtop,.l5-js .l5-tw .l5-tw-shot{opacity:0}
  .l5-js .l5-tw.is-on .l5-tw-svg{animation:l5-tw-rise 1.6s var(--ease) both}
  .l5-js .l5-tw.is-on .l5-tw-clouds{animation:l5-tw-fade 2s ease .4s both}
  .l5-tw-t1,.l5-tw-f1{--d:.85s}.l5-tw-t2,.l5-tw-f2{--d:1.2s}.l5-tw-t3,.l5-tw-f3{--d:1.55s}.l5-tw-t4,.l5-tw-f4{--d:1.9s}.l5-tw-t5,.l5-tw-f5{--d:2.25s}
  .l5-js .l5-tw.is-on .l5-tw-f{animation:l5-up .9s var(--ease) var(--d,1s) both}
  .l5-js .l5-tw .l5-tw-link path{stroke-dasharray:1 2;stroke-dashoffset:1}
  .l5-js .l5-tw .l5-tw-link circle{opacity:0}
  .l5-js .l5-tw.is-on .l5-tw-link circle{animation:l5-tw-fade .2s ease calc(var(--d,1s) + .3s) both}
  .l5-js .l5-tw.is-on .l5-tw-link path{animation:l5-tw-draw .45s cubic-bezier(.45,0,.35,1) calc(var(--d,1s) + .35s) forwards}
  .l5-js .l5-tw.is-on .l5-tw-shot{animation:l5-tw-shot .6s var(--ease) calc(var(--d,1s) + .72s) both}
  @keyframes l5-tw-shot{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
  @keyframes l5-tw-draw{to{stroke-dashoffset:0}}
  .l5-js .l5-tw.is-on .l5-tw-tint{animation:l5-tw-lit .9s steps(1) var(--d,2s) both}
  .l5-js .l5-tw.is-on .l5-tw-cren,.l5-js .l5-tw.is-on .l5-tw-mtop,.l5-js .l5-tw.is-on .l5-tw-beacon{animation:l5-tw-fade 1.2s ease 2.3s both}
  .l5-js .l5-tw.is-on .l5-tw-beam{animation:l5-tw-beam 1.6s var(--ease) 2.4s both}
  .l5-js .l5-tw.is-on .l5-tw-ring{animation:l5-tw-ring 2s var(--ease) 2.3s both}
  @keyframes l5-tw-rise{from{opacity:0;translate:0 5cqh;filter:blur(8px) brightness(.4)}to{opacity:1}}
  @keyframes l5-tw-fade{from{opacity:0}to{opacity:1}}
  @keyframes l5-tw-pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
  @keyframes l5-tw-lit{0%{opacity:0}18%{opacity:1}30%{opacity:.25}46%{opacity:1}58%{opacity:.6}70%,100%{opacity:1}}
  @keyframes l5-tw-beam{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0)}}
  @keyframes l5-tw-ring{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
  /* 켜진 뒤 계속: 꼭대기 빛 숨쉬기 · 구름 흐름 · 불티 · 바깥 점선 고리 회전 */
  .l5-js .l5-tw.is-on .l5-tw-beacon{animation:l5-tw-fade 1.2s ease 2.3s both,l5-tw-breathe 5s ease-in-out 3.5s infinite}
  .l5-js .l5-tw.is-on .l5-tw-clouds span{animation:l5-tw-drift 26s ease-in-out infinite alternate}
  .l5-js .l5-tw.is-on .l5-tw-clouds span:nth-child(even){animation-duration:34s;animation-direction:alternate-reverse}
  .l5-js .l5-tw.is-on .l5-tw-ring::before{animation:l5-tw-spin 90s linear infinite}
  .l5-js .l5-tw.is-on .l5-tw-sparks i{animation:l5-tw-spark 4.8s ease-out 2.8s infinite}
  .l5-js .l5-tw.is-on .l5-tw-sparks i:nth-child(2n){animation-delay:3.4s}.l5-js .l5-tw.is-on .l5-tw-sparks i:nth-child(3n){animation-delay:4.6s}.l5-js .l5-tw.is-on .l5-tw-sparks i:nth-child(5n){animation-delay:5.5s;animation-duration:6s}
  @keyframes l5-tw-breathe{50%{opacity:.62}}
  @keyframes l5-tw-drift{from{translate:-4% 0}to{translate:4% 0}}
  @keyframes l5-tw-spin{to{rotate:360deg}}
  @keyframes l5-tw-spark{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:6px -16cqh}}
}
/* 좁은 화면: 탑을 폭에 맞춰 키운다 */
@media (max-width:759px){
  .l5-tw{--tw-h:min(calc(100vh - var(--head) - 40px),calc((100vw - 40px) / var(--tw-k)))}
  .l5-tw-f{gap:.3cqh}
  .l5-tw-shot{height:8.5cqh}
  .l5-tw-shot.is-tall{height:12.5cqh}
  .l5-tw-shot.is-r{left:calc(50% + var(--sx,30cqw) * .62)}
  .l5-tw-shot.is-l{right:calc(50% + var(--sx,30cqw) * .62)}
}
/* 세로 화면(모바일 · 세로 태블릿)은 캡처가 탑에 겹치거나 화면 끝이라 크레파스 선을 숨긴다 */
@media (max-width:759px),(max-aspect-ratio:4/5){.l5-tw .l5-tw-f .l5-tw-link{display:none}}
/* 세로 태블릿: 룩을 키워 상자가 넓어지자 탑 옆 거리(--sx)의 캡처가 화면 밖으로 나갔다 — 조금 줄이고 화면 양 끝에 붙인다(층 글 li 가 화면 가운데라 50% − 50vw = 화면 끝) */
@media (min-width:760px) and (max-aspect-ratio:4/5){
  .l5-tw-shot{height:9cqh}
  .l5-tw-shot.is-tall{height:13cqh}
  .l5-tw-shot.is-r{left:auto;right:calc(50% - 50vw + 12px)}
  .l5-tw-shot.is-l{right:auto;left:calc(50% - 50vw + 12px)}
}
/* 상단바를 뺐으므로 섹션 높이에서 상단바 몫(--head 64 · 56px)을 빼지 않는다 — 빼면 섹션마다 아래에 다음 섹션이 64px 씩 보였다(2026-10-27 사용자 "아래에 섹션 보이거든 ? 이것도 수정해 모든 섹션이 지금 다 아래에 살짝 보인다") */
.l5,.l5 .c4{--head:0px}

/* KDC 안내 「지원대상」 탭 — 지원 제외 대상(2026-10-28 사용자 "문구를 크게 적고 …", 같은 날 "세로로 정렬하고, 알약을 없애고 그냥 x에다가 글씨만"): 제목을 키우고 넷을 레드 ✕ + 글로 한 줄씩 세로로 */
.l5-kt-card.is-x{padding:22px 22px 20px}
.l5-kt-card.is-x h4{display:flex;align-items:center;gap:10px;font-size:clamp(21px,2vw,26px)!important;font-weight:900!important;line-height:1.3;letter-spacing:-.035em!important}
.l5-kt-card.is-x h4::before{content:'';flex:none;width:6px;height:1em;border-radius:3px;background:var(--ac)}
.l5-kt-x{display:flex;flex-direction:column;gap:16px;margin:18px 0 0;padding:0;list-style:none}
.l5-kt-card.is-x .l5-kt-x li{position:relative;display:flex;flex-direction:column;padding:0 0 0 40px;color:#fff;line-height:1.35}
.l5-kt-x li::before{content:'';position:absolute;left:2px;top:0;width:24px;height:24px;background:linear-gradient(45deg,transparent 40%,var(--ac) 40% 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,var(--ac) 40% 60%,transparent 60%);filter:drop-shadow(0 0 6px rgba(255,65,85,.55))}
.l5-kt-x b{color:#fff;font-size:17.5px;font-weight:800;letter-spacing:-.03em}
.l5-kt-x span{margin-top:3px;color:#FFB3BC;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
@media (min-width:1200px){.l5-kt-x b{font-size:18.5px}.l5-kt-x span{font-size:14px}}
@media (max-width:759px){
  .l5-kt-card.is-x{padding:18px 16px 16px}
  .l5-kt-x{gap:14px}
  .l5-kt-card.is-x .l5-kt-x li{padding-left:34px}
  .l5-kt-x li::before{left:0;width:22px;height:22px}
  .l5-kt-x b{font-size:16px}
}

/* KDC 안내 「지원내용」 탭 — 훈련비(2026-10-28 사용자 "글 없이 그림으로만 … KDC 크레딧 50만원 추가 지원 … 막대 그래프로 내가 부담하는 금액은 10% … 국가가 지원해주는건 90%"): 큰 한 줄 + 세로 막대 둘. 막대 높이는 --v(비율), 값 · 이름은 막대 위 · 아래에 바로 적는다(색만으로 구분하지 않게). 탭을 열 때마다 막대가 바닥에서 자란다 */
.l5-kt-card.l5-kt-fee{padding:26px 24px 22px;text-align:center}
.l5-kt-fee-ch{--h:200px;--w:132px;--g:clamp(40px,7vw,84px);--top:52px;position:relative;display:grid;grid-template-columns:repeat(2,var(--w));column-gap:var(--g);justify-content:center;margin:0;padding:0}
.l5-kt-fee-ch::after{content:'';position:absolute;left:50%;top:calc(var(--top) + 30px + var(--h));width:calc(var(--w) * 2 + var(--g) + 72px);height:1.5px;border-radius:1px;background:rgba(255,255,255,.22);translate:-50% 0}
.l5-kt-fee-cap{grid-column:1 / -1;height:30px;color:var(--t3);font-size:14px;font-weight:700;letter-spacing:-.01em}
.l5-kt-fee-col{display:grid;grid-template-rows:calc(var(--top) + var(--h)) auto;justify-items:center}
.l5-kt-fee-col>b{grid-area:1 / 1;align-self:end;margin-bottom:calc(var(--h) * var(--v) + 10px);color:#fff;font-size:40px;font-weight:900;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.l5-kt-fee-col>i{grid-area:1 / 1;align-self:end;width:100%;height:calc(var(--h) * var(--v));border-radius:10px 10px 0 0;transform-origin:50% 100%}
.l5-kt-fee-col>span{grid-area:2 / 1;margin-top:12px;color:var(--t2);font-size:16px;font-weight:750;letter-spacing:-.02em}
.l5-kt-fee-col.is-gov{--v:.9}
/* 2026-10-28 사용자 "KDC 크레딧 50만원 추가 지원 이거 없애고 그냥 90% 막대기에 90% 국가 지원이라고 막대기에 대각선으로 빨간색 글씨로": 제목을 빼고, 레드 글씨가 보이도록 90% 막대를 검붉은 유리 + 레드 테두리 빛으로 */
.l5-kt-fee-col.is-gov>i{position:relative;overflow:hidden;background:linear-gradient(180deg,#2c0d14,#14070a);box-shadow:inset 0 0 0 2px #FF4155,inset 0 0 30px rgba(255,65,85,.32),0 0 34px -6px rgba(255,65,85,.6)}
.l5-kt-fee-col.is-gov>i em{position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-54deg;color:#FF4155;font-size:24px;font-style:normal;font-weight:900;line-height:1;letter-spacing:-.03em;white-space:nowrap;text-shadow:0 0 .5em rgba(255,65,85,.6)}
.l5-kt-fee-col.is-gov>i em b{font-size:1.32em}
.l5-kt-fee-col.is-me{--v:.1}
.l5-kt-fee-col.is-me>i{background:#D4D4D8}
/* 막대 아래 한 줄(2026-10-28 사용자 "… 멘트를 아래에다가 추가해줘", 글은 문구 세션): 큰 글 + 적용 조건 작은 줄 */
.l5-kt-fee-say{display:grid;justify-items:center;gap:6px;margin:38px 0 0}
.l5-kt-fee-say b{color:#fff;font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.035em;text-wrap:balance}
.l5-kt-fee-say span{color:var(--t3);font-size:14px;font-weight:600;letter-spacing:-.01em}
@media (prefers-reduced-motion:no-preference){
  .l5-kt-fee-col>i{animation:l5-fee-grow .9s var(--ease) both}
  .l5-kt-fee-col.is-me>i{animation-delay:.18s}
  .l5-kt-fee-col>b{animation:l5-fee-num .5s var(--ease) .55s both}
  .l5-kt-fee-col.is-me>b{animation-delay:.7s}
  .l5-kt-fee-col.is-gov>i em{animation:l5-fee-num .5s var(--ease) .6s both}
  .l5-kt-fee-say{animation:l5-fee-num .5s var(--ease) .85s both}
  @keyframes l5-fee-grow{from{scale:1 0}}
  @keyframes l5-fee-num{from{opacity:0;translate:0 8px}}
}
@media (min-width:1200px){.l5-kt-fee-ch{--h:215px;--w:150px}.l5-kt-fee-col>b{font-size:46px}.l5-kt-fee-col>span{font-size:17px}.l5-kt-fee-col.is-gov>i em{font-size:26px}.l5-kt-fee-say b{font-size:24px}}
@media (max-width:759px){
  .l5-kt-card.l5-kt-fee{padding:24px 14px 20px}
  .l5-kt-fee-ch{--h:190px;--w:104px;--g:40px;--top:44px}
  .l5-kt-fee-col>b{font-size:34px}
  .l5-kt-fee-col>span{font-size:15px}
  .l5-kt-fee-say{margin-top:30px}.l5-kt-fee-say b{font-size:19px}.l5-kt-fee-say span{font-size:13px}
  .l5-kt-fee-col.is-gov>i em{font-size:18px;rotate:-58deg}
}