/* 사전예약 페이지(2026-10-23 새로 만듦, 접두사 po-). rl.css(RookissLibrary 에서 가져온 글꼴 · 토큰 · 폼 부품 au-) 위에 얹는다.
   틀(2026-10-23 사용자 "푸터랑 상단바 빼주시고 … 제목 크게 하나 가운데 정렬해서 하고, 그 아래에 예약 카드 … 카드도 겉 테두리가 빨간색 빛으로 살짝 빛나게끔 하되, 움직이지는 않게"):
   한 단 가운데 정렬 — 왕관 · 큰 제목(RookissAI X KDC 흰 글 + 사전예약 레드) · 한 줄 설명 · 예약 폼(640, 카드 판 없이 바탕 위) · 그 아래 혜택 세 칸
   (2026-10-24 사용자 스케치 · "카드를 없애보자" — 처음엔 폭 480 세로 카드, 그다음 넓은 920 카드).
   꼴(2026-10-24 사용자가 고른 참고 "Coming soon! · Join our waitlist" — "색감이랑 폰트는 살리되, 이런 느낌으로"): 검은 바탕 위 붉은 빛 리본 그림, 알약 꼬리표, 금속빛 큰 제목,
   제목 아랫단을 덮는 유리 판(설명 · 영상 판 | 폼), 그 아래 혜택 세 칸, 바닥에 잘린 큰 글.
   움직이는 것은 보내는 중 고리 · 모달 열림뿐이고 모두 prefers-reduced-motion: no-preference 안이다.
   중단점은 사이트와 같은 759 하나만 쓴다 */

body{background:var(--bk);color:#F4F4F5}

:where(.po),:where(.po) *{box-sizing:border-box;margin:0;padding:0}
.po{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:0 24px;font:14px/1.5 Pretendard,system-ui,sans-serif;word-break:keep-all}
.po :is(p,dd,li){text-wrap:pretty}
.po [tabindex="-1"]:focus{outline:0}
.po [hidden]{display:none}

/* 사전예약 섹션(2026-10-26 사용자 "사전 예약쪽이 하나의 섹션이 되게 해줘"): 머리(왕관 · 제목) + 유리 판을 한 띠로. 화면 폭을 꽉 채우고(.po 옆 여백만큼 밖으로),
   하늘 · 큰 숫자는 이 띠 안에서 잘린다. 바닥은 하늘이 바탕 검정으로 녹아 아래 혜택과 이어진다.
   꼴(같은 날 사용자 "디자인을 완전히 바꿔보자" → 스케치 "일몰 사진은 없애고 … 숫자는 검은색인데, 바닥에서 빨간색 LED 조명이 들어오는 듯한"):
   검은 벽 · 남은 자리 큰 숫자(검은 글, 앞면 아래가 붉게 비친다) · 바닥선 붉은 LED 띠 · 가운데 카드. 리본 그림 · 룩 · 원형 카운트다운 · 새벽 하늘 그림은 뺐다 */
.po-pre{position:relative;isolation:isolate;overflow:hidden;overflow:clip;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;margin:0 -24px;padding:clamp(32px,5vh,72px) 24px clamp(56px,8vh,104px);
  background:linear-gradient(180deg,#060607,#050506 90%,var(--bk))}
/* 한 화면 한 섹션(2026-10-26 사용자 "이게 하나의 섹션이 되어야 되고, 아래에 부분들이 안보였으면"): 섹션 높이를 화면 높이 이상으로 — 혜택 등 아래 섹션은 첫 화면에 비치지 않는다. 내용은 세로 가운데 */

/* 머리: 빛나는 왕관 · 큰 제목 · 한 줄 설명 */
.po-hero{position:relative;z-index:0;max-width:1040px;text-align:center}
/* 남은 자리 큰 숫자(2026-10-26 사용자 스케치 — 화면 양끝에서 끝까지, 위에서 신청 단추 아래까지): 글 크기 = 96vw ÷ 글 폭 --w(em, preorder.js 가 자릿수로 넣는다 — 고정폭 숫자 .668em, 쉼표 없이 "1000", 최대 1300px).
   줄 높이 .727 = 숫자 높이(Pretendard 800: 기준선 위 .719em) 라 상자 아래 끝 = 숫자 밑. 바닥선(--fy, 섹션 위에서 px)에 밑을 대고 세로로 --sy 배(1~1.8, 모바일 2.4) 늘인다.
   검은 글: 앞면은 아래(바닥 LED 쪽)가 밝은 레드 → 위로 갈수록 어두워지고, 윗부분은 짙은 회색(#2B2B31)이라 더 검은 벽(#060607) 위에서 모양이 보인다(2026-10-26 사용자 "숫자 윗부분이 너~무 안보여" — 처음엔 위가 벽보다 검은 #040405). 위 테에 옅은 빛 한 줄 */
.po-big{position:absolute;left:50%;top:var(--fy,calc(100% - 100px));z-index:-1;translate:-50% -100%;scale:1 var(--sy,1.4);transform-origin:50% 100%;
  font-size:min(calc(96vw / var(--w,2.592)),1300px);font-weight:800;line-height:.727;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;user-select:none;
  color:transparent;background:linear-gradient(0deg,#FF4A5C 0%,#E0203A 4%,#A8132A 11%,#5C0C18 24%,#2C0F15 40%,#1E1619 56%,#222227 76%,#2B2B31);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.16))}
/* 바닥 LED 띠: 바닥선에 가는 붉은 빛줄(가운데가 가장 밝고 양끝으로 사라진다) + 퍼지는 빛(위로 숫자 앞면 · 벽을 비추는 부채꼴, 아래로 바닥에 번진 빛) */
.po-led{position:absolute;left:0;right:0;top:var(--fy,calc(100% - 100px));z-index:-1;height:0;pointer-events:none}
.po-led::before{content:'';position:absolute;left:4vw;right:4vw;top:-1.5px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#FF4155 12%,#FFB3BB 50%,#FF4155 88%,transparent);box-shadow:0 0 10px 1px rgba(255,65,85,.9),0 0 36px 6px rgba(255,45,70,.45)}
.po-led::after{content:'';position:absolute;left:0;right:0;top:calc(-1 * var(--lh,420px));height:calc(var(--lh,420px) + 140px);mix-blend-mode:screen;
  background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(255,40,64,.30),rgba(255,40,64,.09) 50%,transparent 82%) top/100% var(--lh,420px) no-repeat,
    radial-gradient(ellipse 42% 100% at 50% 0,rgba(255,40,64,.22),transparent) bottom/100% 140px no-repeat}
/* 빛나는 왕관(알약 꼬리표 "Pre-registration"은 2026-10-24 사용자 "없애줘도 될 것 같아"로 뺐다) */
.po-hero::before{content:'';display:block;width:34px;height:13px;margin:0 auto clamp(14px,2vh,26px);background:url(../img/crown.svg) center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(255,65,85,.65))}
/* 금속빛 제목: 글자에 위→아래 그라디언트(흰 → 회색, 레드 → 짙은 레드). 글자가 비치므로 text-shadow 대신 drop-shadow */
.po-title{--tfs:clamp(40px,10.5vw,92px);color:var(--t1);font-size:var(--tfs);font-weight:800;line-height:1.08;letter-spacing:-.045em;filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
.po-title span{display:inline-block}
.po-t1{background:linear-gradient(180deg,#FFFFFF 30%,#B4B4BC 78%,#7A7A84);-webkit-background-clip:text;background-clip:text;color:transparent}
.po-t2{background:linear-gradient(180deg,#FF8592 5%,#FF4155 52%,#B3182C);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 선착순 알약(한 줄 설명 아래): "선착순 1,000명 한정 | 남은 자리 N" — 유리 알약, 앞 글은 레드. 100 이하는 숫자 레드, 0 이면 "마감" 레드 */
.po-cap{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:clamp(14px,2.2vh,30px);padding:8px 18px;border-radius:999px;
  background:rgba(12,14,22,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:13.5px;line-height:1.4;white-space:nowrap}
.po-cap-k{color:var(--red);font-weight:800}
.po-cap-l{display:flex;align-items:baseline;gap:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.16);color:var(--t2);font-weight:600}
.po-cap-l b{color:var(--t1);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.po-cap:is(.is-low,.is-full) .po-cap-l b,.po-cap.is-full #po-cap-s{color:var(--red)}
.po-cap.is-full .po-cap-l b{display:none}

/* 유리 판(2026-10-26 사용자 "가운데에는 카드가 있고"): 가운데 한 단 입력 칸 + 판 아래 가운데 신청 단추. 판 폭 = 화면의 46%(680~880).
   유리(짙은 남색 62% + 흐림 + 왼쪽 위가 밝은 1px 그라디언트 테)는 첫 줄에 깔린 .po-stage-bg 가 그린다(단추 줄은 유리 밖) — 뒤의 큰 숫자 · 하늘이 흐리게 비친다.
   (처음엔 짙은 회색 85% — 2026-10-24 사용자 "투명도 한 85%정도로". 새벽 하늘로 바꾸며 숫자가 비치게 낮췄다) */
.po-stage{--pad:clamp(28px,3.4vw,48px);position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"card";width:100%;max-width:clamp(680px,46vw,880px);margin-top:clamp(14px,1.8vh,26px)}
.po-stage-bg{grid-area:card;position:relative;z-index:-1;border-radius:28px;
  background:linear-gradient(180deg,rgba(26,30,42,.62),rgba(14,16,24,.7));-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 120px -30px rgba(0,0,0,.85)}
.po-stage-bg::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 38%,rgba(255,255,255,.04) 70%,rgba(255,65,85,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.po-card{grid-area:card;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:var(--pad)}
/* 한 화면 맞춤 묶음: 섹션 안 가운데 세로 한 단. 넓은 화면에서 화면 높이를 넘으면 preorder.js 가 zoom 을 넣는다(0.55 까지, 그보다 낮은 화면은 스크롤) */
.po-fit{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
.po-fit.is-measure .au-msg{display:none} /* 잴 때만: 오류 글 빼고(줄이는 비율용 — 오류로 늘어난 높이는 섹션 여백 · 조금 더 줄이기로 받는다) */
/* 사전예약 혜택 세 칸(2026-10-27 사용자 "과정 자세히 보기 버튼 대신 아래에 3개의 카드로"): 판 아래 가로 세 칸, 판보다 넓게(1240 — vw 가 아닌 고정 폭이라 한 화면 맞춤 zoom 이 줄어도 칸이 좁아지지 않는다) · 「혜택 N」 표는 제목 앞에.
   크기 · 테두리(같은 날 사용자 "이 카드들 크기를 좀 더 키워줘도 돼 … 이런 느낌의 테두리 디자인으로 가줘. 글래스는 유지"): 랜딩 참여 방법 카드(landing/ .l5-join-step)의 빛 테두리 —
   1.5px 고리에 [왼쪽 위에서 비추는 옅은 빛] + [왼쪽 위 모서리의 짧은 붉은 · 흰 빛줄기(원뿔 그라디언트 302~335°, 멈춰 있음)] 두 겹, 바깥에 옅은 붉은 빛. 바탕은 판과 같은 유리 그대로.
   셋째(가격) 칸은 랜딩 「다음 단계」 카드처럼 테가 붉은 쪽. 유리 불투명도는 판(.62~.7)보다 높게 .86~.92(같은 날 사용자 "불투명도가 좀 더 높아야" — 뒤의 붉은 숫자가 덜 비친다). 가격은 정가 레드 취소선 → 90% 할인 알약 → 큰 흰 숫자 */
.po-perks{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:1240px;margin-top:clamp(16px,2.2vh,26px);list-style:none;text-align:left}
.po-perk{--rim:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 38%,rgba(255,255,255,.03) 70%,rgba(255,65,85,.2));
  position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 26px 24px;border-radius:20px;
  background:linear-gradient(180deg,rgba(24,27,38,.86),rgba(12,14,20,.92));-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 24px 44px -28px rgba(0,0,0,.9),0 0 34px -14px rgba(255,65,85,.3)}
.po-perk::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(transparent 0 70%,rgba(255,65,85,.7) 84%,#FFF 89.5%,rgba(255,65,85,0) 93%,transparent 93% 100%),var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.po-perk--price{--rim:linear-gradient(150deg,rgba(255,170,180,.42),rgba(255,65,85,.16) 40%,rgba(255,65,85,.08) 70%,rgba(255,65,85,.3));
  background:linear-gradient(180deg,rgba(255,65,85,.09),rgba(255,65,85,.02) 60%,transparent),linear-gradient(180deg,rgba(24,27,38,.86),rgba(12,14,20,.92))}
.po-perk-k{flex:none;padding:4px 9px;border-radius:8px;background:rgba(255,65,85,.14);color:var(--red);font-size:13px;font-weight:800;line-height:1.3;letter-spacing:0}
.po-perk-h{display:flex;align-items:center;gap:10px;color:var(--t1);font-size:23px;font-weight:800;line-height:1.3;letter-spacing:-.035em}
.po-perk-tx{margin-top:10px;color:var(--t2);font-size:16px;line-height:1.6;letter-spacing:-.02em}
/* 혜택 1(추가 과정 수강 초대) 칸 아래 「과정 자세히 보기」(landing/): 칸 바닥에 붙은 작은 유리 알약 — 셋째 칸 가격 줄과 같은 높이에 온다. 화살표는 올리면 오른쪽으로 2px */
.po-perk-go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:40px;margin-top:auto;padding:0 14px 0 18px;border-radius:999px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:var(--t1);font-size:14.5px;font-weight:700;text-decoration:none;transition:background-color .15s,box-shadow .15s}
.po-perk-tx:has(+.po-perk-go){padding-bottom:14px}
.po-perk-note{position:relative;margin-top:8px;padding-left:16px;color:var(--t3);font-size:13.5px;line-height:1.5} /* 추가 과정 안내 작은 글: 앞에 ※ */
.po-perk-note::before{content:'※';position:absolute;left:0;top:0}
.po-perk-note:has(+.po-perk-go){padding-bottom:14px} /* 설명과 단추 사이 최소 간격(단추는 margin-top:auto 로 바닥에) */
.po-perk-go:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
.po-perk-go:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.po-perk-go svg{width:15px;height:15px;transition:translate .15s}
@media (hover:hover){.po-perk-go:hover svg{translate:2px 0}}
/* 가격 줄: 왼쪽에 정가(취소선) 위 · 「90% 할인」 알약 아래로 쌓고, 오른쪽에 큰 68,000원(2026-10-27 사용자 "90% 할인 태그를 680,000 아래 두는게 맞을 것 같아" — 처음엔 한 줄에 셋) */
.po-perk-price{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"was now" "off now";justify-items:start;align-items:center;gap:6px 14px;margin-top:auto;padding-top:12px;line-height:1.2}
.po-perk-price s{grid-area:was}
.po-perk-off{grid-area:off}
.po-perk-price b{grid-area:now}
.po-perk-price s{color:var(--t3);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;text-decoration:line-through 2px rgba(255,65,85,.9)}
.po-perk-off{padding:3px 10px;border-radius:999px;background:rgba(255,65,85,.16);box-shadow:inset 0 0 0 1px rgba(255,65,85,.35);color:#FF6B7A;font-size:14px;font-weight:800}
.po-perk-price b{color:var(--t1);font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* 신청 단추: 판 안 폼 맨 아래, 폭은 칸과 같이 꽉(2026-10-26 사용자 "사전예약 신청버튼 카드 안으로") */
.po-go-w{display:grid;gap:10px;margin-top:4px}
.po-go-w .au-go{width:100%}
/* 유리 판 안의 칸 · 판은 반투명 검정(바탕 그림이 비쳐도 글이 읽히게), 입력 칸은 알약 */
.po .au-in{border-radius:999px;padding:0 20px;background:rgba(0,0,0,.34)}
.po .au-in:hover,.po .au-in:focus{background:rgba(0,0,0,.5)}
/* 게임 두 칸은 여러 줄(2026-10-26 사용자 "많이 적을 수 있도록 입력 칸을 좀 더 키워줘") — 알약 대신 둥근 상자, 높이는 아래로 늘릴 수 있다 */
.po .au-in.po-ta{display:block;height:auto;min-height:74px;padding:13px 20px;border-radius:20px;line-height:1.6;resize:vertical} /* 기본 높이: 자리표시 두 줄만(2026-10-27 사용자 "이 textbox 기본 칸 자체를 줄여" — 처음엔 네 줄 124px). 더 쓰면 손잡이로 늘린다 */
.po .au-checks{background:rgba(0,0,0,.28)}
.po-form{display:grid;gap:20px}
.po-f{display:grid;gap:8px;align-content:start}
/* 이름 · 휴대폰 · 카드 세 칸은 위아래로 하나씩(2026-10-24 사용자 "이것들이 세로로 정렬" — 처음엔 넓은 화면에서 한 줄에 셋).
   그 아래 강조 판 · 발급 방법 단추도 위아래로(같은 날 사용자 "이것도 세로로 정렬" — 처음엔 넓은 화면에서 한 줄에 나란히) */
.po-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.po-note{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:-12px}
.po-note .po-how{margin-top:0}
.po-in-num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* 휴대폰 본인인증(KCB): 인증 전에는 칸 폭 꽉 찬 테두리 알약 단추(올리면 밝게, 창을 여는 동안 고리), 인증 뒤에는 옅은 판 안에 「본인인증 완료」 + 이름 · 번호(고칠 수 없음) + 「다시 인증」.
   녹색은 쓰지 않는다(완료 화면과 같은 흰 체크) */
.po-kcb-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:0;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
  color:var(--t1);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.po-kcb-go:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.po-kcb-go:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.po-kcb-go[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--red)}
.po-kcb-go>svg{flex:none;width:20px;height:20px}
.po-kcb-go[data-busy]{cursor:progress;opacity:.8}
.po-kcb-go .po-spin{border-top-color:var(--t1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.po-kcb-go[data-busy] .po-spin{display:block}
/* 막힘(마감 · 보안 확인 전): 흐리게, 올려도 그대로. 보내는 중(data-busy)은 위 모양 */
.po-kcb-go[aria-disabled=true]:not([data-busy]),.po-kcb-go[aria-disabled=true]:not([data-busy]):hover{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--t3);cursor:not-allowed}
/* 보안 확인(Turnstile): 대개 비어 보인다 — 칸 사이 간격(8px)을 먹지 않게 당기고, 상자가 뜰 때만 그만큼 띄운다. 인증을 마치면 숨긴다 */
.po-ts{display:flex;justify-content:center;margin-top:-8px}
.po-ts>div{display:flex;margin-top:8px}
.po-kcb-ok:not([hidden])~.po-ts{display:none}
.po-kcb-ok{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 20px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.po-kcb-badge{display:flex;align-items:center;gap:8px;color:var(--t1);font-size:13.5px;font-weight:800}
.po-kcb-badge svg{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--t1);color:var(--bk)}
/* 본인인증 모드의 이름 · 휴대폰 칸: 고칠 수 없다(readonly). 인증 전엔 비어 있고 인증하면 KCB 결과가 채워진다 */
.po-form.is-kcb .au-in[readonly],.po-form.is-kcb .au-in[readonly]:hover{background:rgba(255,255,255,.025);cursor:default}
.po-form.is-kcb .au-in[readonly]:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* 라벨 속 강조 낱말(카드 "뒷번호") */
.po-key{color:var(--red);font-weight:750}
/* 카드 번호 한 줄: [앞 6자리] •• •••• [뒷번호 4자리] — 칸 폭은 자릿수대로(6 : 4), 숫자는 가운데 */
.po-cardno{display:grid;grid-template-columns:minmax(0,6fr) auto minmax(0,4fr);align-items:center;gap:10px}
.po .po-cardno .au-in{padding:0 12px;text-align:center;letter-spacing:.14em}
.po-cardno-mid{color:var(--t3);font-size:15px;letter-spacing:.14em;white-space:nowrap;user-select:none}
/* 내일배움카드만 된다는 강조: 옅은 레드 판 + 레드 테 + 레드 글(오류 글과 구별되게 판에 담고 느낌표 아이콘) */
.po-only{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:rgba(255,65,85,.08);box-shadow:inset 0 0 0 1px rgba(255,65,85,.42);color:#FF5C6E;font-size:13px;font-weight:600;line-height:1.5}
.po-only svg{flex:none;width:16px;height:16px;margin-top:1.5px}
.po-only b{font-weight:800}
/* 내일배움카드 발급 방법(모달을 여는 줄 단추) */
.po-how{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin-top:4px;padding:8px 14px;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1px #3A3A42;color:var(--t1);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.po-how:hover{background:var(--s1);box-shadow:inset 0 0 0 1px #52525B}
.po-how:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.po-how-th{flex:none;width:68px;height:44px;border-radius:8px;object-fit:cover;object-position:left top;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.po-how-t{flex:1;display:grid;font-size:14px;font-weight:650;line-height:1.35}
.po-how-t small{color:#FF5C6E;font-size:12px;font-weight:700}
.po-how-go{flex:none;width:16px;height:16px;color:var(--t2);transition:translate .15s}
@media (hover:hover){.po-how:hover .po-how-go{translate:2px 0}}
.po-form .au-agree{margin-top:0}
.po-form .au-agree .au-f{display:block}
.po-form .au-checks{margin-top:8px}
/* 칸과 상관없는 오류(중복 · 서버 · 연결)는 신청 단추 바로 위 */
.po-form-msg{line-height:1.55;text-align:center}
.po-noscript{margin-bottom:16px;color:var(--t2);font-size:13px}

/* 보내는 중: 단추는 잠그고(aria-disabled — 포커스는 남긴다) 글을 바꾸고 돌아가는 고리를 단다 */
.au-go[aria-disabled=true],.au-go[aria-disabled=true]:hover{background:#D4D4D8;cursor:progress}
.po-go{display:flex;align-items:center;justify-content:center;gap:10px}
.po-spin{display:none;flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(15,15,15,.22);border:2px solid transparent;border-top-color:var(--bk)}
.au-go[aria-disabled=true] .po-spin{display:block}
/* 마감(data-full): 고리 없이 막힌 단추 */
.au-go[data-full],.au-go[data-full]:hover{cursor:not-allowed}
.au-go[data-full] .po-spin{display:none}
@media (prefers-reduced-motion:no-preference){
.po-spin{animation:po-turn .8s linear infinite}
@keyframes po-turn{to{rotate:1turn}}
}

/* 완료: 가운데 정렬 — 흰 체크 원 · 제목 · 안내 글(녹색을 쓰지 않는다) */
.po-done{display:grid;justify-items:center;padding:8px 0 4px;text-align:center}
.po-done-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--t1);color:var(--bk);box-shadow:0 0 0 6px rgba(255,255,255,.06)}
.po-done-ic svg{width:24px;height:24px}
.po-done-h{margin-top:22px;color:var(--t1);font-size:24px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.po-done-tx{margin-top:10px;color:var(--t2);font-size:14.5px;line-height:1.7}
.po-done-tx b{color:var(--t1);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 완료 아래 한 줄(2026-10-23 사용자 "빨간색으로 작게") */
.po-done-tag{margin-top:20px;color:var(--red);font-size:13px;font-weight:600;line-height:1.6;letter-spacing:-.01em}

/* ── 내일배움카드 발급 방법 모달(dialog) — 머리(제목 · 닫기) | 스크롤되는 본문(네 단계 · 캡처) | 바닥(고용24 흰 알약) ── */
html:has(.po-dlg[open]){overflow:hidden}
:where(.po-dlg),:where(.po-dlg) *{box-sizing:border-box;margin:0;padding:0}
:where(.po-dlg) :is(ol,ul){list-style:none}
.po-dlg{width:min(max(720px,62vw),calc(100vw - 48px));max-width:none;height:calc(100dvh - 64px);max-height:calc(100dvh - 64px);margin:auto;border:0;border-radius:16px;background:#121215;color:var(--t2);font:14px/1.5 Pretendard,system-ui,sans-serif;word-break:keep-all;
  box-shadow:0 0 0 1px #2A2A30,0 40px 120px -20px rgba(0,0,0,.9);overflow:hidden}
.po-dlg[open]{display:flex;flex-direction:column}
.po-dlg::backdrop{background:rgba(6,6,7,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.po-dlg-in{display:flex;flex-direction:column;flex:1;min-height:0}
.po-dlg-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 14px 14px 24px;border-bottom:1px solid #2A2A30}
.po-dlg-hd h2{color:var(--t1);font-size:18px;font-weight:800;letter-spacing:-.02em}
.po-dlg-hd h2:focus{outline:0}
.po-dlg-x{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--t2);cursor:pointer;transition:background-color .15s,color .15s}
.po-dlg-x:hover{background:var(--s1);color:var(--t1)}
.po-dlg-x svg{width:22px;height:22px}
.po-dlg-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 28px;scrollbar-width:thin;scrollbar-color:#3A3A42 transparent}
.po-dlg-lead{color:var(--t2);font-size:14px;line-height:1.65;text-wrap:pretty}
.po-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:24px}
.po-step{min-width:0}
.po-step h3{display:flex;align-items:center;gap:10px;color:var(--t1);font-size:16px;font-weight:750;line-height:1.4;letter-spacing:-.01em}
.po-step h3 span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:rgba(255,65,85,.08);box-shadow:inset 0 0 0 1px rgba(255,65,85,.45);color:var(--red);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.po-step p{margin:6px 0 0 38px;color:var(--t2);font-size:14px;line-height:1.65;text-wrap:pretty}
.po-step p b{color:#E4E4E7;font-weight:650}
.po-shot{display:block;margin-top:12px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #34343B;cursor:zoom-in}
.po-shot :is(picture,img){display:block;width:100%;height:auto}
/* 원본 캡처가 글 줄 가운데에서 끊긴 그림(03 알림톡 · 문자): 아래를 흰 바탕으로 흐려 이어지는 글로 읽히게(2026-10-23 사용자 "가이드 사진이 잘린다") */
.po-shot--fade{position:relative}
.po-shot--fade::after{content:'';position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(rgba(255,255,255,0),#fff 85%);pointer-events:none}
.po-apps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.po-apps li{min-width:0;border-radius:10px;overflow:hidden;background:#17171B;box-shadow:inset 0 0 0 1px #2A2A30}
.po-apps img{display:block;width:100%;height:auto;background:#fff}
.po-apps figcaption{position:relative;padding:10px 8px 12px 26px;color:var(--t2);font-size:12px;font-weight:600;line-height:1.45}
.po-apps figcaption b{position:absolute;left:10px;top:10px;color:var(--red);font-size:12.5px;font-weight:800}
.po-dlg-ft{padding:14px 24px 18px;border-top:1px solid #2A2A30}
.po-dlg-go{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:24px;background:var(--t1);color:var(--bk);font-size:15px;font-weight:700;transition:background-color .15s}
.po-dlg-go:hover{background:#E4E4E7}
.po-dlg-go svg{width:16px;height:16px}
.po-dlg :is(.po-dlg-x,.po-shot,.po-apps,.po-dlg-go):focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* 넓은 화면의 모달(2026-10-26 사용자 "이 모달도 너무 작아. 전체화면을 기준으로 더 커져야해 가로든 세로든"): 폭은 화면의 62%(720 이상), 높이는 화면 - 64px 로 늘렸고, 글도 한 단계 키운다 */
@media (min-width:1200px){
.po-dlg-hd{padding:20px 18px 18px 32px}
.po-dlg-hd h2{font-size:21px}
.po-dlg-body{padding:26px 32px 36px}
.po-dlg-lead{font-size:15.5px}
.po-steps{gap:44px;margin-top:30px}
.po-step h3{gap:12px;font-size:18.5px}
.po-step h3 span{width:32px;height:32px;font-size:13.5px}
.po-step p{margin:8px 0 0 44px;font-size:15.5px}
.po-shot{margin-top:16px;border-radius:12px}
.po-apps figcaption{font-size:13px}
.po-dlg-ft{padding:16px 32px 20px}
.po-dlg-go{height:54px;font-size:16px}
}

@media (prefers-reduced-motion:no-preference){
.po-dlg[open]{animation:po-pop .24s cubic-bezier(.2,.8,.2,1)}
.po-dlg[open]::backdrop{animation:po-fade .24s ease}
@keyframes po-pop{from{opacity:0;translate:0 12px;scale:.98}}
@keyframes po-fade{from{opacity:0}}
}

/* 첫 화면에 다 보이게(2026-10-26 사용자 "안내려도 보이게 수정해"): 위아래 여백은 화면 높이(vh)로 준다. 판 안 칸을 두 개씩 나란히 두던 것은 사용자 "카드 정렬은 바꿀 필요 없는데. 카드는 원복"으로 걷었다 */

/* 모바일 ~759 */
@media (max-width:759px){
.po{justify-content:flex-start;padding:0 12px}
.po-pre{margin:0 -12px;padding:48px 12px 56px}
.po-hero::before{width:28px;height:11px;margin-bottom:20px}

.po-stage{margin-top:24px}
.po-stage-bg{border-radius:22px}
.po-card{padding:22px 16px 26px}
.po .au-in.po-ta{min-height:98px} /* 모바일은 「만들고 싶은 게임」 자리표시가 세 줄로 접혀 세 줄 높이(380px 이하는 네 줄 — 아래) */
.po-perks{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
.po-perk{padding:18px 20px 20px;border-radius:18px}
.po-perk-h{font-size:19px}
.po-perk-tx{margin-top:8px;font-size:14.5px}
.po-perk-price s{font-size:15px}
.po-perk-price b{font-size:25px}
.po-cap{gap:10px;padding:7px 14px;font-size:12.5px}
.po-cap-l{padding-left:10px}
.po-cap-l b{font-size:15px}
/* 모달: 화면 가장자리 12px, 신한카드 앱 그림은 옆으로 넘긴다 */
.po-dlg{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);border-radius:14px}
.po-dlg-hd{padding:12px 8px 12px 18px}
.po-dlg-hd h2{font-size:17px}
.po-dlg-body{padding:16px 18px 24px}
.po-steps{gap:28px;margin-top:20px}
.po-step h3{font-size:15.5px}
.po-step p{margin-left:0;font-size:13.5px}
/* 신한카드 앱 그림: 옆으로 넘기면 셋째 칸이 화면 끝에서 잘려 보여(2026-10-23 사용자) 두 칸 격자로 다 보인다. 홀수 마지막 칸은 가운데 */
.po-apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.po-apps li:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 5px)}
.po-dlg-ft{padding:12px 18px 14px}
}
@media (max-width:380px){.po .au-in.po-ta{min-height:122px}} /* 360 폭: 「만들고 싶은 게임」 자리표시가 네 줄 */