/* 3 국비 훈련 KDC(design/landing-v5 #kdc, 2026-10-22 사용자 정정): ChatGPT Work · Claude Cowork 카드와 내일배움카드 신청 단추를 뺐다.
   사용자 스케치대로 [기울여 겹친 KDC 과정 두 장] + [추가 커리큘럼 「실제 AI 게임 개발」]. 과정 카드는 화면 캡처처럼 살짝 기울여 겹치고, 올리면 바로 선다.
   카드 생김새(.l5-cr)는 kdc.html 과 같이 쓰는 l5.css 그대로이고, 여기서는 #kdc 안의 배치만 바꾼다(kdc.html 은 「KDC페이지」 세션 소유). */
#kdc .l5-hd{max-width:none}
/* 2026-10-23 사용자 "AI 선수 지식 섹션은 전체적으로 다 크기를 키워주시고": 제목 · 리드 · 과정 카드(속 글까지) · 크레파스 표시 · 십자 · 추가 커리큘럼 글을 모두 키웠다.
   세로 여유가 적은 1440×900 에 맞추려고 크레파스 타원이 카드 위아래로 넘치는 폭(21% → 15%)과 카드 위 여백을 줄였다 */
#kdc .l5-h2{font-size:clamp(36px,min(4.8vw,7.6vh),84px);line-height:1.16}
#kdc .l5-lead{margin-top:clamp(12px,2vh,22px);font-size:clamp(16px,1.4vw,22px)}
#kdc .l5-in{max-width:1480px}
#kdc .l5-h2 em{white-space:nowrap}

.l5-pre{--cw:clamp(210px,min(18.8vw,30vh),330px);display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:clamp(56px,7vw,124px);margin-top:clamp(36px,6.4vh,72px)}
.l5-pre-side{display:flex;flex-direction:column;align-items:center}
.l5-pre-crs{display:flex;align-items:flex-start;margin:0;padding:14px 10px 6px;list-style:none}
.l5-pre-crs .l5-cr{flex:none;width:var(--cw);box-shadow:0 30px 56px -26px rgba(0,0,0,.95);transition:transform .35s var(--ease),rotate .45s var(--ease),border-color .35s,box-shadow .35s}
.l5-pre-crs .l5-cr:nth-child(1){rotate:-7deg}
.l5-pre-crs .l5-cr:nth-child(2){z-index:2;margin:20px 0 0 calc(var(--cw) * -.1);rotate:6deg}
/* 모작 과정 카드만 빨간 테두리(2026-10-23 사용자 "여기에 빨간색 테두리로 이 강의만 강조") */
.l5-pre-crs .l5-cr.is-pick,.l5-pre-crs .l5-cr.is-pick:hover{border:2px solid var(--ac);box-shadow:0 0 0 5px rgba(255,65,85,.13),0 0 44px -6px rgba(255,65,85,.45),0 30px 56px -26px rgba(0,0,0,.95)}
/* 뒤 카드의 글은 앞 카드에 덮이는 오른쪽을 비워 일찍 줄을 바꾼다(제목 끝이 가려지지 않게) */
.l5-pre-crs .l5-cr:nth-child(1) .l5-cr-b{padding-right:24%}
/* 카드 속 글도 카드 폭(--cw)을 따라 키운다(l5.css 의 .l5-cr 는 kdc.html 과 같이 써서 여기서만 덮는다) */
.l5-pre-crs .l5-cr-b{padding-top:calc(var(--cw) * .07);padding-inline:calc(var(--cw) * .075);padding-bottom:calc(var(--cw) * .08)}
.l5-pre-crs .l5-cr-k{font-size:max(12.5px,calc(var(--cw) * .052))}
.l5-pre-crs .l5-cr-t{font-size:max(15px,calc(var(--cw) * .069))}
.l5-pre-crs .l5-cr-g{gap:.45em}
.l5-pre-crs .l5-cr-g span{padding:.25em .75em;font-size:max(12px,calc(var(--cw) * .05))}
/* 빨간 크레파스 표시(2026-10-23 사용자 "이 두개에 빨간색 크레파스느낌으로 동그라미 슥슥 치고 별표하는 느낌"): 두 카드를 두 바퀴 가까이 두른 손그림 타원과 왼쪽 위 한붓 별.
   크레파스 결은 SVG 필터(#l5-crayon: 가장자리 흔들림 + 밀랍 틈), 카드가 다 떠오른 뒤 타원 → 별 순서로 그려진다. 카드 위에 덧그린 듯 맨 위에 둔다 */
.l5-pre-pick{position:relative}
.l5-pre-mark{position:absolute;z-index:4;overflow:visible;pointer-events:none}
.l5-pre-mark path{fill:none;stroke:var(--ac);stroke-linecap:round;stroke-linejoin:round;filter:url(#l5-crayon)}
.l5-pre-oval{left:-15%;top:-15%;width:130%;height:130%}
/* 함정(2026-10-23 사용자 "동그라미 표시가 처음에 살짝 우측 하단이 그려져 있어서 이상하다"): vector-effect:non-scaling-stroke 를 쓰면 Chrome 이 점선을 화면 길이로 재어
   pathLength="1" 과 어긋나 그리기 전부터 끝(오른쪽 아래) 조각이 보였다. 늘어나는 상자(preserveAspectRatio=none)라도 두께 차이가 작아 non-scaling-stroke 를 빼고 굵기를 맞췄다 */
.l5-pre-oval path{stroke-width:5.5}
.l5-pre-star{left:-19%;top:-20%;width:clamp(50px,5.4vw,86px);aspect-ratio:1;rotate:-10deg}
.l5-pre-star path{stroke-width:6.5}
.l5-pre-cap{margin-top:clamp(36px,6.4vh,64px);color:var(--t4);font-size:clamp(13.5px,1.08vw,16px);font-weight:600;letter-spacing:-.01em;text-align:center}

/* + : 가는 십자 */
.l5-pre-plus{position:relative;width:clamp(44px,4.4vw,68px);aspect-ratio:1}
.l5-pre-plus::before,.l5-pre-plus::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;border-radius:2px;background:var(--t2);translate:-50% -50%}
.l5-pre-plus::after{rotate:90deg}

/* 추가 커리큘럼: 글씨만(스케치의 「게임 개발 추가」) */
.l5-pre-add-k{color:var(--t3);font-size:clamp(14px,1.3vw,20px);font-weight:700;letter-spacing:.02em}
.l5-pre-add-t{white-space:nowrap;margin-top:12px;color:var(--ac);font-size:clamp(44px,5.6vw,88px);font-weight:850;line-height:1.08;letter-spacing:-.045em;text-shadow:0 0 .4em rgba(255,65,85,.22)}
.l5-pre-add-s{margin-top:20px;color:var(--t3);font-size:clamp(15px,1.25vw,19px);font-weight:600}

@media (hover:hover){
  /* 2026-10-23 사용자 "뒤 카드를 호버링 하면 앞 카드를 뚫고 튀어 나오는데 그렇게 하지말고 그냥 그대로 살짝만 ux 반응": 겹친 차례 · 기울기는 그대로 두고 살짝 떠오르기만 한다(테두리 · 그림 확대는 l5.css 공용 반응) */
  .l5-pre-crs .l5-cr:hover{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:no-preference){
  .l5-js .l5-pre-mark path{stroke-dasharray:1 2;stroke-dashoffset:1}
  .l5-js .is-on .l5-pre-oval path{animation:l5-pre-draw 1s cubic-bezier(.5,.1,.35,1) 1.3s forwards}
  .l5-js .is-on .l5-pre-star path{animation:l5-pre-draw .5s cubic-bezier(.45,0,.35,1) 2.3s forwards}
  @keyframes l5-pre-draw{to{stroke-dashoffset:0}}
}
/* 1000 넘는 높이(1920×1080 등): 키운 크기에 맞춰 위아래 여백을 조금 줄인다 */
@media (min-width:1000px) and (min-height:961px){
  #kdc{padding-block:clamp(24px,3vh,64px)}
}
/* 900 안팎 높이(1440×900 · 1536×864 · 1600×900): 키운 크기 그대로면 넘쳐 위아래 여백과 카드 폭만 조금 줄인다 */
@media (min-width:1000px) and (min-height:801px) and (max-height:960px){
  #kdc{padding-block:clamp(14px,2vh,24px)}
  #kdc .l5-h2{font-size:clamp(36px,min(4.8vw,7.2vh),84px)}
  .l5-pre{--cw:clamp(210px,min(18.8vw,28vh),330px);margin-top:clamp(36px,6vh,72px)}
  .l5-pre-cap{margin-top:clamp(36px,6vh,64px)}
}
@media (min-width:1000px) and (max-height:800px){
  #kdc .l5-h2{font-size:clamp(36px,min(4.4vw,6.8vh),64px)}
  #kdc .l5-lead{font-size:17px}
  .l5-pre{--cw:clamp(180px,min(15.6vw,29vh),230px);margin-top:clamp(36px,6.4vh,48px)}
  .l5-pre-oval{top:-13%;height:126%}
  .l5-pre-star{top:-19%}
  .l5-pre-cap{margin-top:clamp(32px,5.6vh,44px)}
}
@media (max-width:999px){
  .l5-pre{grid-template-columns:minmax(0,1fr);justify-items:center;gap:24px}
  .l5-pre-add{text-align:center}
}
@media (max-width:759px){
  /* 리드는 두 문장이라 모바일에서도 문장마다 줄을 바꾼다(줄바꿈을 숨기면 「다음」이 앞 줄 끝에 홀로 남았다) */
  #kdc .l5-lead{text-wrap:pretty}
  .l5-pre{--cw:min(42vw,200px);margin-top:52px}
  .l5-pre-oval{left:-6%;top:-15%;width:112%;height:130%}
  .l5-pre-star{left:-5%;top:-24%;width:44px}
  .l5-pre-oval path{stroke-width:8.5}
  .l5-pre-cap{margin-top:44px}
  .l5-pre-crs .l5-cr-g{display:none}
  .l5-pre-crs .l5-cr-t{font-size:14px}
  .l5-pre-add-t{font-size:clamp(36px,11vw,48px)}
}