/* 사전예약 페이지(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 옆 여백만큼 밖으로),
   리본 그림 · 룩은 이 띠 안에서 잘린다. 바닥은 가운데가 옅게 붉은 빛 + 가운데가 진한 1px 선으로 끝나 아래 혜택과 갈린다 */
.po-pre{position:relative;isolation:isolate;overflow:hidden;overflow:clip;align-self:stretch;display:flex;flex-direction:column;align-items:center;margin:0 -24px;padding:clamp(56px,11vh,120px) 24px clamp(72px,11vh,120px);
  background:radial-gradient(ellipse 60% 42% at 50% 100%,rgba(255,65,85,.08),transparent 72%)}
.po-pre::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,65,85,.45) 50%,transparent)}

/* 머리: 빛나는 왕관 · 큰 제목 · 한 줄 설명 */
.po-hero{max-width:1040px;text-align:center}
.po-hero{position:relative;z-index:0}
/* 빛나는 왕관(알약 꼬리표 "Pre-registration"은 2026-10-24 사용자 "없애줘도 될 것 같아"로 뺐다) */
.po-hero::before{content:'';display:block;width:34px;height:13px;margin:0 auto 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,.po-lead 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}
.po-lead{color:var(--t2);font-size:15px;line-height:1.7;text-align:center}
.po-lead span:first-child{display:block;margin-bottom:4px;color:var(--t1);font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em}

/* 바탕 그림: 붉은 빛 리본(2912×1632 webp — Midjourney 원본 1456×816 을 2배 업스케일, 처음 1600px 은 넓은 화면 · 고해상도에서 흐려 보였다). 머리(.po-hero) 안에서 리본 가운데(그림 높이 55%)가 제목 아래 끝 = 유리 판 윗단에 오게. 가장자리는 타원으로 바탕에 녹인다. 움직이지 않는다 */
.po-art{position:absolute;left:50%;top:100%;z-index:-1;width:max(1760px,130vw);aspect-ratio:2912/1632;translate:-50% -55%;pointer-events:none;
  background:url(../img/bg-ribbon.webp) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 52% 46% at 50% 55%,#000 42%,transparent 80%);mask-image:radial-gradient(ellipse 52% 46% at 50% 55%,#000 42%,transparent 80%)}

/* 왕관 쓴 검은 룩(2026-10-24 사용자 "배경이미지 느낌에다가 우리의 시그니처 왕관을 쓴 검은색 룩이 추가적으로"): Midjourney(리본 그림을 --sref) 네 장 중 사용자가 고른 3번을 2배 업스케일해 룩 둘레만 잘라 1344×1224 webp(assets/img/rook.webp).
   리본 위 · 제목 아래 층(머리 안, .po-art 다음). 유리 판 오른쪽 바깥에 선다 — 룩 왼쪽 끝(그림 폭 28%)을 판 오른끝 + 24px 에, 왕관 끝(그림 높이 7%)을 판 윗단 언저리에. 가장자리는 타원으로 녹인다.
   판 옆 자리가 룩 폭(그림 폭 40%)보다 넓은 1400px 이상에서만 보인다. 움직이지 않는다 */
.po-rook{--rw:clamp(680px,50vw,1000px);position:absolute;left:calc(50% + 404px - .28 * var(--rw));top:100%;z-index:-1;width:var(--rw);aspect-ratio:1344/1224;margin-top:calc(40px - .064 * var(--rw));pointer-events:none;
  background:url(../img/rook.webp) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 36% 52% at 48% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 36% 52% at 48% 50%,#000 50%,transparent 100%)}
@media (max-width:1399px){.po-rook{display:none}}

/* 유리 판(무대): 제목 아래 떨어져 놓인다(처음엔 참고 그림처럼 제목 아랫단을 덮었으나 2026-10-24 사용자 "제목이 이 카드에 묻혀 있는데"로 띄웠다). 짙은 회색 바탕 85%(2026-10-24 사용자 "투명도를 좀 더 낮춰서 더 불투명하게" → 88~92% 는 "너무 높였어 … 85%정도로" — 처음엔 흰 7.5~2.5%) + 흐림 + 왼쪽 위가 밝은 1px 그라디언트 테(::before 마스크).
   안: 머리(설명) / 예약 폼(왼쪽 게임 영상 판은 사용자 "이거 빼볼래 ?"로 빼서 한 단, 폭 760) */
.po-stage{position:relative;z-index:1;width:100%;max-width:760px;margin-top:clamp(32px,5vh,52px);padding:clamp(28px,3.6vw,48px);border-radius:28px;
  background:linear-gradient(180deg,rgba(34,34,38,.85),rgba(20,20,23,.85));-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 120px -30px rgba(0,0,0,.85)}
.po-stage::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-stage-hd{padding-bottom:clamp(24px,3vw,36px);margin-bottom:clamp(24px,3vw,36px);border-bottom:1px solid rgba(255,255,255,.08)}
.po-stage-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:start}
.po-card{min-width:0}
/* 유리 판 안의 칸 · 판은 반투명 검정(바탕 그림이 비쳐도 글이 읽히게), 입력 칸은 알약 */
.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)}
.po .au-checks{background:rgba(0,0,0,.28)}
.po .po-slide-g{background:rgba(255,255,255,.05)}
.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}
/* 게임 관심 두 칸(선택): 라벨 옆 회색 "선택"(.au-f small), 장르 예시 칩(누르면 칸에 넣고 다시 누르면 뺀다 — 눌린 칩은 옅은 레드), 칸 아래 회색 도움말 */
.po-chips{display:flex;flex-wrap:wrap;gap:6px}
.po-chip{height:30px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px #3A3A42;color:var(--t2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s,background-color .15s,box-shadow .15s}
.po-chip:hover{color:var(--t1);box-shadow:inset 0 0 0 1px #52525B}
.po-chip[aria-pressed=true]{background:rgba(255,65,85,.12);box-shadow:inset 0 0 0 1px rgba(255,65,85,.55);color:#FF7A88}
.po-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.po-help{color:var(--t3);font-size:12.5px;line-height:1.5}
/* 게임 관심 칸을 적고 (선택) 동의를 안 했을 때만 보이는 알림(오류가 아니라 회색) */
.po-interest-note{margin-top:8px;color:var(--t2);font-size:13px;line-height:1.55}
.po-interest-note:empty{display:none}
.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}
/* 라벨 속 강조 낱말(카드 "뒷번호") */
.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-ic{flex:none;width:20px;height:20px;color:var(--t2)}
.po-how-t{flex:1;display:grid;font-size:14px;font-weight:650;line-height:1.35}
.po-how-t small{color:var(--t2);font-size:12px;font-weight:500}
.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{margin-bottom:-8px;line-height:1.55}
.po-form .au-go{width:100%;margin-top:4px}
.po-noscript{margin-bottom:16px;color:var(--t2);font-size:13px}

/* 게임 영상 판(2026-10-24 사용자 "사전 등록 아래에 … 넘겨서 볼 수 있게끔 슬라이드해서"): 혜택 아래, 폭 960. 장 폭 --sw(넓은 화면 .47 → 두 장 남짓, 모바일 .86 → 한 장 남짓).
   옆으로 밀기(scroll-snap) · 좌우 단추(판 양끝, 높이는 영상 가운데 = 판 폭(cqw) × 장 폭 × 9/16 의 반). 세로 게임은 영상을 통째로(contain) + 흐린 포스터 바탕 */
.po-show{width:100%;max-width:960px;margin-top:clamp(64px,10vh,112px);padding:0 clamp(4px,1vw,16px)}
.po-show-k{color:var(--red);font-size:12px;font-weight:800;letter-spacing:.08em}
.po-show-h{margin-top:6px;color:var(--t1);font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.po-show-l{margin-top:6px;color:var(--t2);font-size:14px;line-height:1.6}
.po-reel-w{--sw:.47;position:relative;margin-top:18px;container-type:inline-size}
.po-reel{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;list-style:none;border-radius:14px}
.po-reel::-webkit-scrollbar{display:none}
.po-reel:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.po-slide{flex:0 0 calc(var(--sw) * 100%);min-width:0;scroll-snap-align:start}
.po-slide-m{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#151517}
.po-slide-m::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.po-slide-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.is-tall .po-slide-m video{object-fit:contain}
.po-slide-bd{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(18px) brightness(.45)}
.po-slide-c{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:14px}
.po-slide-t{margin-right:4px;color:var(--t1);font-size:16px;font-weight:750;letter-spacing:-.01em}
.po-slide-d{color:var(--red);font-size:12.5px;font-weight:700}
.po-slide-s{display:inline-flex;align-items:center;gap:3px;color:var(--red);font-size:12.5px;font-weight:700}
.po-slide-s svg{width:12px;height:12px}
.po-slide-g{padding:2px 8px;border-radius:999px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ln);color:var(--t2);font-size:11.5px;line-height:1.5}
.po-reel-b{position:absolute;top:calc(100cqw * var(--sw) * 9 / 32);z-index:1;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;translate:0 -50%;
  background:rgba(15,15,15,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:var(--t1);cursor:pointer;transition:background-color .15s}
.po-reel-b:hover{background:rgba(15,15,15,.85)}
.po-reel-b:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.po-reel-b svg{width:18px;height:18px}
.po-reel-prev{left:12px}
.po-reel-next{right:12px}
.po-reel-n{position:absolute;top:12px;right:12px;z-index:1;padding:3px 10px;border-radius:999px;background:rgba(15,15,15,.62);color:var(--t2);font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none}
.po-reel-n b{color:var(--t1);font-weight:700}

/* 혜택 세 칸(2026-10-24 사용자 스케치): 폼 아래 가는 줄로 나누고 한 줄에 셋. 작은 레드 머리글 + 흰 굵은 본문. 카드 판 없이 바탕 위에 바로(같은 날 사용자 "카드를 없애보자") */
.po-perks{width:100%;max-width:960px;margin-top:clamp(56px,9vh,96px);padding:0 clamp(4px,1vw,16px)}
.po-perk-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none}
.po-perk{display:flex;flex-direction:column}
.po-perk-ic{display:grid;place-items:center;width:38px;height:38px;margin-bottom:18px;border-radius:11px;background:rgba(255,65,85,.1);box-shadow:inset 0 0 0 1px rgba(255,65,85,.28);color:var(--red)}
.po-perk-ic svg{width:20px;height:20px}
.po-perk-k{color:var(--red);font-size:13px;font-weight:700;letter-spacing:-.01em}
.po-perk-v{margin-top:8px;color:var(--t1);font-size:18px;font-weight:750;line-height:1.4;letter-spacing:-.02em}
.po-perk-v span{display:inline-block} /* 구절이 중간에서 끊기지 않게("추가 / 강의 커리큘럼") */
.po-price{display:flex;flex-direction:column;align-items:flex-start;margin-top:auto;padding-top:14px}
/* 65,000원은 왼쪽 크게, 그 오른쪽 아래(대각)에 할인율 · 취소선 정가. 칸이 좁으면 들여쓰기를 줄인다 */
.po-price b{color:var(--red);font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.po-price-was{display:flex;align-items:center;gap:6px;margin:2px 0 0 clamp(0px,calc(100% - 160px),72px);white-space:nowrap}
.po-price-was em{padding:2px 7px;border-radius:6px;background:rgba(255,65,85,.14);color:#FF5C6E;font-size:12px;font-style:normal;font-weight:800;line-height:1.4}
.po-price s{color:var(--t3);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}

/* 바닥 큰 글(참고 그림의 잘린 "Waitlist"): Pretendard 채움만 — 위에서 아래로 사라지는 옅은 흰 빛, 아래 1/4 쯤이 화면 끝에서 잘린다.
   테(-webkit-text-stroke)는 쓰지 않는다: 가변 글꼴은 획이 겹친 도형이라 테를 그리면 R · k · A 안 이음선이 다 보인다(2026-10-24 사용자 "획들이 따로따로 … 구려보여") */
.po-mark{margin:clamp(56px,9vh,96px) 0 -.2em;color:transparent;font-family:Pretendard,system-ui,sans-serif;font-size:clamp(72px,19vw,300px);font-weight:800;line-height:.9;letter-spacing:-.03em;white-space:nowrap;pointer-events:none;user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 80%);-webkit-background-clip:text;background-clip:text}

/* 보내는 중: 단추는 잠그고(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}
@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(720px,calc(100vw - 32px));max-width:none;max-height:min(880px,calc(100dvh - 48px));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}
@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}}
}

/* ~999: 무대는 영상 판 → 폼 위아래, 폭 640 */
@media (max-width:999px){
.po-stage{max-width:680px}
.po-stage-in{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* 모바일 ~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:28px;padding:22px 16px 26px;border-radius:22px}
.po-stage-in{gap:32px}
.po-art{width:max(900px,260vw)}
.po-reel-w{--sw:.86}
.po-show{margin-top:56px;padding:0 4px}
.po-reel{gap:12px}
.po-reel-b{width:36px;height:36px}
.po-show-h{font-size:20px}
.po-perks{margin-top:48px;padding-top:4px}
.po-perk-list{grid-template-columns:minmax(0,1fr);gap:0}
.po-perk{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;align-content:start;padding:20px 0}
.po-perk+.po-perk{border-top:1px solid var(--ln)}
.po-perk>:not(.po-perk-ic){grid-column:2}
.po-perk-ic{grid-row:1 / span 3;margin-bottom:0}
.po-perk-v{margin-top:4px}
.po-perk-v{font-size:16.5px}
/* 모달: 화면 가장자리 12px, 신한카드 앱 그림은 옆으로 넘긴다 */
.po-dlg{width:calc(100vw - 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}
}