@charset "utf-8";
/* ===========================================================================
   26 Q4 괌정부관광청 프로모션 — PC 전용 (시안 1920 고정 스테이지)
   좌표는 모두 Figma 260917_GVB_Q4 프로모션_PC_퍼블리싱(1:2) 기준 절대값.
   =========================================================================== */

:root{
  --stage-w: 1920px;
  --stage-h: 6950px;
  --mo-w:     640px;
  --mo-h:    8165px;

  --ink:        #332212;
  --white:      #FFFFFF;
  --cream:      #FFF8EE;
  --notice-bg:  #171A1D;
  --notice-fg:  #DBD7D0;

  --btn-event-bg:     #FF9601;
  --btn-event-line:   #FF6001;
  --btn-travel-bg:    #FFE04F;
  --btn-travel-line:  #FFC60C;

  --apply-from: #FF8A00;
  --apply-to:   #FF7200;

  --cell-a: #F9F8F8;
  --cell-b: #FFFFFF;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* --------------------------------------------------------------------------
   7세그먼트 숫자 폰트 — 시안의 합계 표시용
   DSEG (c) keshikan, SIL Open Font License 1.1 — assets/fonts/DSEG-LICENSE.txt
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"DSEG7 Classic";
  src:url("../fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DSEG7 Classic";
  src:url("../fonts/DSEG7Classic-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }

/* 1920 고정 스테이지가 뷰포트보다 넓어도 가로 스크롤바는 만들지 않는다. */
html,body{ margin:0; padding:0; overflow-x:hidden; }

/* 기기 자동 글자 확대(Android Chrome text autosizing / iOS 회전 시 inflation) 차단.
   이 페이지는 스테이지를 transform:scale 로 줄이는 절대배치라, 브라우저가 글자만
   키워버리면 고정 폭 박스에서 줄바꿈·넘침이 생긴다. 데스크톱에서는 재현되지 않고
   실기기에서만 보이므로 원인을 찾기 어렵다. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  font-family:var(--font);
  background:var(--notice-bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:keep-all;
}

img{ display:block; border:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; white-space:nowrap; clip:rect(0 0 0 0); clip-path:inset(50%);
}

/* --------------------------------------------------------------------------
   스테이지
   -------------------------------------------------------------------------- */
/* 뷰포트가 1920 보다 좁으면 --stage-scale(app.js) 만큼 비율 그대로 축소한다.
   내용을 잘라내지 않으면서 가로 스크롤바를 없애는 방식. 1920 이상이면 배율 1 + 가운데 정렬. */
.stage-fit{
  position:relative;
  width:100%;
  height:calc(var(--sh) * var(--sc, 1));
  /* 기준 폭(1920)보다 좁아지면 스테이지가 좌우로 삐져나온다 — 그걸 잘라 낸다.
     축소 대신 "중앙 본문은 그대로, 좌우 배경만 잘림"이 되는 핵심. */
  overflow:hidden;
}
.stage{
  position:absolute; top:0;
  left:calc((100% - var(--sw) * var(--sc, 1)) / 2);
  width:var(--sw);
  height:var(--sh);
  overflow:hidden;
  background:var(--cream);
  transform:scale(var(--sc, 1));
  transform-origin:0 0;
}

.stage-fit--pc{ --sw:var(--stage-w); --sh:var(--stage-h); --sc:var(--pc-scale, 1); }
.stage-fit--mo{ --sw:var(--mo-w);    --sh:var(--mo-h);    --sc:var(--mo-scale, 1); }

/* 전환점 1060px — config/event.php 의 layout.breakpoint 와 같은 값 (바꾸면 둘 다 고칠 것)
   태블릿(768~1060)도 모바일 스테이지를 쓴다. 이 구간에서 PC 시안은 배율 0.4~0.55 로
   줄어들어 본문이 10~14px 이 되지만, 모바일 스테이지는 1.2~1.66 배로 커져 읽기 좋다. */
@media (max-width:1060px){ .stage-fit--pc{ display:none; } }
@media (min-width:1061px){ .stage-fit--mo{ display:none; } }

/* 레이어 순서 — 시안의 BG 그룹 구조 그대로:
   ① KV 사진 → ② 섹션 배경(EVENT 알파 그라데이션이 KV 위로 덮임) → ③ KV 전경 → ④ 본문 */
.kv-bgs{ position:absolute; left:0; top:0; width:1920px; height:1250px; overflow:hidden; z-index:0; }
.kv__bg{
  position:absolute; top:0; left:0; width:1920px; height:auto;
  opacity:0; transition:opacity var(--kv-fade,1200ms) ease-in-out;
}
.kv__bg.is-on{ opacity:1; }

.bg{ position:absolute; left:0; z-index:1; pointer-events:none; }
.bg--travel     { top:3114px; width:1920px; height:2969px; background:var(--cream); }
/* EVENT 배경은 시안 노드가 x=-208, 폭 2294 (화면 밖까지 확장) */
.bg--event-fade { left:-208px; top:671px;  width:2294px; height:441px; }
/* 페이드와 1px 겹친다 — 정확히 맞닿으면 분수 배율에서 경계에 크림색 선이 비친다
   (KV1 은 높이 1097 이라 y1112 뒤에 아무것도 없다) */
.bg--event-body { left:-208px; top:1111px; width:2294px; height:2004px; }
/* 괌 미리보기 배경 — 크림 위에 얹히는 반투명 그라데이션을 미리 합성(보이는 구간만) */
.bg--preview    { top:4791px; width:1920px; height:1240px; }
.bg--info-band  { left:-32px; top:2597px; width:1985px; height:519px;
                  background:#875E0F; opacity:.32; mix-blend-mode:multiply; }
.bg--player-shell{ left:445px; top:5128px; width:1028px; height:735.1px;
                  background:#FFE7A8; opacity:.5; mix-blend-mode:screen; border-radius:6px;
                  box-shadow:0 2px 4px rgba(255,208,126,.4), inset 0 0 1px rgba(232,214,157,.81); }
.bg--notice     { top:6031px; width:1920px; height:919px; background:var(--notice-bg); }
/* 공유바가 하단 가로형으로 내려오는 구간(≤1470)에서는 어두운 영역이 공유바까지
   올라와 유의사항과 한 덩어리가 된다 — 모바일과 같은 구성.
   여백은 모바일 실측을 PC 원 크기 비율(68/98 = 0.694)로 환산했다.
     · 영상 캡션 아래(5834) → 어두운 영역 시작 : 175 (모바일 환산 75 + 요청 100)
     · 어두운 영역 → 공유 원 위 : 66 (환산 86 − 20)
     · 공유 원 아래 → 유의사항 제목 : 48 (환산 68 − 20)
   공유 원이 내려온 만큼 유의사항 본문도 --notice-dy 로 65px 함께 내린다. */
.stage--pc.has-share-bottom .bg--notice{ top:6009px; height:941px; }
/* 공유 원이 내려온 만큼 유의사항 본문도 함께 내린다(제목 6126 → 6191) */
.stage--pc.has-share-bottom{ --notice-dy:65px; }
/* 좁은 구간에서도 같은 74px — 좌 여백 8 + 74 = 482 로 카드 글 시작(489)에 닿지 않는다 */
.stage--pc.has-share-bottom{ --nav-vis:74px; }

/* 상단 버튼의 스크롤 타깃 */
.anchor{
  position:absolute; left:0; width:1px; height:1px;
  scroll-margin-top:40px;
}
.anchor:focus{ outline:none; }
#section-event { top:1088px; }
#section-travel{ top:3238px; }

/* ==========================================================================
   KEY VISUAL (전경)
   ========================================================================== */
/* z-index 를 주지 않는다 — 주면 스태킹 컨텍스트가 생겨 반짝이(SCREEN)가 KV 사진과 블렌드되지 않는다.
   KV 전경(40~665)과 섹션 배경(671~)은 겹치지 않으므로 순서상 문제 없음. */
.kv{ position:absolute; inset:0 auto auto 0; width:1920px; height:1250px; pointer-events:none; }
.kv__nav{ pointer-events:auto; z-index:2; }   /* 버튼만 섹션 배경 위로 */

.kv__shadow { position:absolute; left:465px; top:40px; width:1028px; height:625px; }
.kv__shadow-img{
  position:absolute; left:0; top:0; width:1028px; height:625px;
  opacity:0; transition:opacity var(--kv-fade,1200ms) ease-in-out;
}
.kv__shadow-img.is-on{ opacity:var(--shadow-opacity,1); }
.kv__logo   { position:absolute; left:1305px; top:60px;  width:165px;  height:49px; }
/* 타이틀·반짝이는 배경과 같은 인덱스로 함께 크로스페이드된다 */
.kv__title  { position:absolute; left:650px; top:170px; width:679px; height:356px; }
.kv__sparkle{ position:absolute; left:643px; top:145px; width:559px; height:310px; }
.kv__title-img, .kv__sparkle-img{
  position:absolute; left:0; top:0;
  opacity:0; transition:opacity var(--kv-fade,1200ms) ease-in-out;
}
.kv__title-img  { width:679px; height:356px; }
.kv__sparkle-img{ width:559px; height:310px; mix-blend-mode:screen; }
.kv__title-img.is-on, .kv__sparkle-img.is-on{ opacity:1; }

/* 상단 버튼 ---------------------------------------------------------------- */
.kv__nav{ position:absolute; left:0; top:0; }
.navbtn{
  position:absolute; top:751px; height:73px;
  display:block; border-radius:12px;
  font-size:22px; line-height:26px; letter-spacing:-.04em; color:var(--ink);
  transition:transform .18s ease, filter .18s ease;
}
.navbtn--event { left:655px; width:299px; background:rgba(255,150,1,.9);  border:1px solid rgba(255,96,1,.5); }
.navbtn--travel{ left:965px; width:300px; background:rgba(255,224,79,.9); border:1px solid rgba(255,198,12,.5); }
.navbtn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.navbtn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

.navbtn__eyebrow{ position:absolute; top:22px; font-weight:700; }
.navbtn__label  { position:absolute; top:23px; font-weight:200; }
.navbtn--event  .navbtn__eyebrow{ left:29px; }
.navbtn--event  .navbtn__label  { left:106px; }
.navbtn--travel .navbtn__eyebrow{ left:29px; }
.navbtn--travel .navbtn__label  { left:122px; }

/* 화살표: 시안의 얇은 > 를 CSS 로 재현 (웹폰트 굵기 편차 회피) */
.navbtn__arrow{
  position:absolute; top:31px; width:11px; height:11px;
  border-top:2px solid var(--ink); border-right:2px solid var(--ink);
  transform:rotate(45deg);
}
.navbtn--event  .navbtn__arrow{ left:261px; }
.navbtn--travel .navbtn__arrow{ left:262px; }

/* ==========================================================================
   공통 섹션 헤드
   ========================================================================== */
.sec-head{ position:absolute; left:0; width:1920px; z-index:3; }
.sec-head__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:22px; font-weight:700; line-height:26px; letter-spacing:-.025em;
  color:var(--white);
}
.sec-head__eyebrow--dark{ color:#565656; }

.deco-flower{
  flex:0 0 auto; width:22px; height:21px;
  background:#FFFDC4; opacity:.5;
  -webkit-mask:url("../img/icon-flower.svg") no-repeat center / 22px 21px;
          mask:url("../img/icon-flower.svg") no-repeat center / 22px 21px;
}
.deco-flower--peach{ background:#FFC4A1; opacity:1; }

.sec-head__title{ display:flex; justify-content:center; }
.sec-head__sub{
  position:relative; text-align:center;
  font-size:20px; font-weight:300; line-height:32px; letter-spacing:-.025em;
  color:var(--white);
}
.sec-head__sub b{ font-weight:700; }
.sec-head__sub--dark{ color:#000; }
/* 시안 1:161(con1) / 1:229(con3) 는 dashPattern [4,2] · 1px 점선이다.
   CSS `border:1px dashed` 는 대시 길이를 지정할 수 없어(브라우저가 알아서 나눔)
   시안의 4/2 와 어긋나므로 반복 그라디언트로 4px 선 + 2px 공백을 그대로 만든다. */
.sec-head__underline{
  position:absolute; height:1px;
  background:repeating-linear-gradient(to right,
              var(--ul-color, #FFF573) 0 4px, transparent 4px 6px);
}
.sec-head__underline--orange{ --ul-color:#FF6000; opacity:.6; }   /* 시안 1:229 노드 opacity 0.6 */

.ico-shell{
  display:inline-block; vertical-align:-4px;
  width:33px; height:27px; margin-right:5px;
  background:#905C36;
  -webkit-mask:url("../img/icon-shell.svg") no-repeat center / 33px 27px;
          mask:url("../img/icon-shell.svg") no-repeat center / 33px 27px;
}

/* ==========================================================================
   CON1 · 만원 여행
   ========================================================================== */
.con1{ position:absolute; left:0; top:0; width:1920px; height:1px; z-index:3; }

.sec-head--con1{ top:1088px; }
.sec-head--con1 .sec-head__title{ position:absolute; left:647px; top:61px; }
.sec-head--con1 .sec-head__title img{ width:627px; height:67px; }
.sec-head--con1 .sec-head__sub{ position:absolute; left:0; top:148px; width:1920px; }
.sec-head--con1 .sec-head__underline{ left:832px; top:34px; width:257px; }  /* 시안 30 + 요청 4px */

/* 지갑 -------------------------------------------------------------------- */
/* 좁은 폭에서 지갑이 좌우로 잘리지 않게 필요한 만큼만 줄이고 가운데로 민다(app.js 계산).
   기준 폭에서는 scale 1 / dx 0 이라 시안 그대로다. 기준점은 지갑 카드의 중심(939,1838). */
.wallet{
  position:absolute; left:0; top:0; width:1920px;
  transform:translateX(var(--wallet-dx, 0px)) scale(var(--wallet-scale, 1));
  transform-origin:939px 1838px;
}
.wallet__deco{ position:absolute; left:199px; top:1258px; width:1358px; height:1109px; }
/* 시안에서 셀보다 위에 그려지는 장식 */
.wallet__over{ position:absolute; z-index:2; pointer-events:none; }
.wallet__over--handle{ left:1413px; top:1821px; width:160px; height:169px; }
/* 야자수는 지갑 오른쪽 모서리에 걸쳐 있어 지갑보다 먼저 잘린다.
   좁은 폭에서만 줄여서 안쪽으로 당긴다 — 밑동(모래)이 뜨지 않게 기준점은 좌하단. */
.wallet__over--palm  { left:1390px; top:2074px; width:296px; height:344px;
  transform:translateX(var(--palm-dx, 0px)) scale(var(--palm-scale, 1));
  transform-origin:left bottom; }

.wallet__grid{ position:absolute; left:0; top:0; }

.cell{ position:absolute; overflow:hidden; }
.cell--c0{ left:588px;  width:290px; }
.cell--c1{ left:875px;  width:291px; }
/* 우측 끝은 총합 박스(시안 1450)와 한 줄로 맞춘다 */
.cell--c2{ left:1163px; width:287px; }
.cell--r0{ top:1532px; height:231px; }
.cell--r1{ top:1761px; height:231px; }
.cell--r2{ top:1988px; height:228.8px; }
.cell--r0.cell--c0{ width:292px; }
.cell--r0.cell--c1,.cell--r0.cell--c2{ height:232px; }
/* 우상단 칸만 바깥 모서리라 둥글다 — 시안 `1:149` 배경 벡터의 호가
   M…L 271.77 0 C 282.39 0 291 8.65 291 19.32 … 로 반지름 19.3 의 정확한 1/4 원이다.
   (나머지 8칸 배경 벡터는 전부 직각. 모바일 시안도 10칸 모두 직각이라 PC 전용)
   셀 이미지가 JPEG 라 둥근 모서리 바깥이 흰색으로 구워져 있었고, 그대로 두면
   노란 카드 위에 흰 쐐기가 얹혀 다른 모서리와 따로 놀았다. 여기서 잘라 낸다. */
.cell--r0.cell--c2{ border-radius:0 19.3px 0 0; }

/* 셀은 카드 배경까지 포함된 통 이미지를 쓴다.
   일러스트만 따로 얹으면 반투명 픽셀이 이중 합성돼 밝은 사각형 패치가 생긴다. */
.cell{ background:var(--cell-b); }

.cell__label{
  position:absolute; inset:0; display:block; cursor:pointer;
  transition:box-shadow .18s ease;
}
.cell__face{ position:absolute; inset:0; display:block; }
.cell__face--active{ opacity:0; transition:opacity .2s ease; }

.cell__img{ position:absolute; inset:0; width:100%; height:100%; }
.cell__caption{
  position:absolute; left:0; right:0; text-align:center;
  font-size:18px; font-weight:300; line-height:25px; letter-spacing:-.025em; color:#000;
}


.cell--r0 .cell__caption{ top:157px; }
.cell--r1 .cell__caption{ top:152px; }
.cell--r2 .cell__caption{ top:157px; }
.cell:nth-child(1) .cell__caption{ top:161px; }

/* 선택 상태 --------------------------------------------------------------- */
.cell__check{
  position:absolute; inset:0; border:0 solid #FF6000; border-radius:2px;
  transition:border-width .15s ease;
  pointer-events:none;
}
/* 선택/호버 오렌지 테두리는 시안에 없어 제거.
   선택 여부는 hover 이미지가 남아 있는 것으로 구분된다.
   키보드 포커스 표시는 접근성상 남긴다. */
.cell__input:focus-visible + .cell__label .cell__check{ border-width:3px; opacity:1; }
.cell__input:checked + .cell__label .cell__face--default{ opacity:0; }
.cell__input:checked + .cell__label .cell__face--active { opacity:1; }
.cell__input:focus-visible + .cell__label .cell__face--default{ opacity:0; }
.cell__input:focus-visible + .cell__label .cell__face--active { opacity:1; }
/* 시안 96:2 의 hover 디자인 — 마우스가 있는 환경에서만.
   터치에서는 :hover 가 탭 후 남아 같은 행에 두 칸이 켜져 보인다. */
@media (hover:hover){
  .cell__label:hover .cell__face--default{ opacity:0; }
  .cell__label:hover .cell__face--active { opacity:1; }
}
/* 선택 이미지가 없는 칸은 기본 일러스트를 유지하고 테두리·톤으로만 표시 */
.cell__input:checked + .cell__label:not(:has(.cell__face--active)) .cell__face--default{ opacity:1; }

.cell__img-active{ position:absolute; inset:0; width:100%; height:100%; }
.cell__title-active{
  /* 시안 96:2 — 셀 상단에서 170px, Pretendard Bold 26px 흰색.
     이미지 하단에 어두운 그라디언트 띠가 구워져 있어 별도 그림자는 약하게만 준다. */
  position:absolute; left:0; right:0; top:170px; text-align:center;
  font-size:26px; font-weight:700; line-height:26px; letter-spacing:-.025em; color:var(--white);
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* 합계 -------------------------------------------------------------------- */
.wallet__total{
  position:absolute; left:860px; top:2247px; width:151px;
  text-align:center;
  white-space:nowrap;   /* DSEG7 이 늦게 붙거나 폴백으로 넘어가도 줄바꿈되지 않게 */
}
.wallet__total-value{
  font-family:"DSEG7 Classic", ui-monospace, monospace;
  font-weight:400;
  font-size:var(--total-size, 27px);
  line-height:29px;
  letter-spacing:var(--total-tracking, -0.4px);
  color:#FFD241;
}
.wallet__total-value.is-over{ color:#FF4A4A; }

/* 응모 버튼 ---------------------------------------------------------------- */
.apply{ position:absolute; left:0; top:2403px; width:1920px; }
.apply__btn{
  position:absolute; left:719px; top:0; width:483px; height:105px;
  display:flex; align-items:center; justify-content:center; gap:19px;
  border-radius:52.5px;
  background:linear-gradient(147.7deg, var(--apply-from) 23%, var(--apply-to) 70%);
  color:var(--white);
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}
.apply__label{ font-size:26px; font-weight:800; line-height:38px; letter-spacing:-.025em; }
.apply__arrow{
  width:14px; height:14px;
  border-top:3px solid currentColor; border-right:3px solid currentColor;
  transform:rotate(45deg) translate(-2px,2px);
}
.apply__btn:not([disabled]):hover{ transform:translateY(-2px); filter:brightness(1.05); }
.apply__btn:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.apply__btn[disabled]{
  cursor:not-allowed; opacity:.45; filter:grayscale(.55);
}
.apply__msg{
  position:absolute; left:719px; top:113px; width:483px;
  text-align:center; font-size:16px; line-height:24px; letter-spacing:-.025em;
  color:#FFE7A8; min-height:24px;            /* 모바일(.mo-apply__msg)과 같은 노랑 */
}
.apply__msg.is-error{ color:#FFE7A8; }

/* 기간 / 발표 / 경품 -------------------------------------------------------- */
.info{ position:absolute; left:0; top:0; width:1920px; }
.info__row{ position:absolute; left:0; top:2665px; width:1920px; }
.info__term{
  position:absolute; top:0; margin:0;
  font-size:20px; font-weight:700; line-height:30px; letter-spacing:-.02em; color:var(--white);
}
.info__desc{
  position:absolute; top:0; margin:0;
  font-size:20px; font-weight:400; line-height:30px; letter-spacing:-.02em; color:var(--white);
}
.info__desc b{ font-weight:700; }
.info__row .info__term{ left:427px; }
.info__row .info__desc{ left:521px; }
.info__row .info__term--announce{ left:977px; }
.info__row .info__desc--announce{ left:1073px; }

.info__prize{ position:absolute; left:0; top:0; width:1920px; }
.info__term--prize{ position:absolute; left:427px; top:2732px; }

.prizes{ position:absolute; left:522px; top:2733px; width:979px; height:303px;
  background:rgba(116,67,31,.49); border-radius:10px; }
.prize{ position:absolute; }
.prize__img{ position:absolute; }
.prize__badge{
  position:absolute; display:flex; align-items:center; justify-content:center;
  height:27px; border-radius:2px;
  font-size:18px; font-weight:700; line-height:24px; letter-spacing:-.02em;
}
.prize__name{
  position:absolute; text-align:center; white-space:nowrap;
  font-size:18px; font-weight:400; line-height:24px; letter-spacing:-.02em; color:var(--white);
}
/* 경품 4종 개별 좌표 (좌표계: .prizes 기준 = 522,2733) */
.prize:nth-child(1) .prize__img  { left:64px;  top:33px;  width:182px; height:169px; }
.prize:nth-child(1) .prize__badge{ left:129px; top:204px; width:49px; }
.prize:nth-child(1) .prize__name { left:106px; top:242px; width:95px; }
.prize:nth-child(2) .prize__img  { left:296px; top:60px;  width:186px; height:136px; }
.prize:nth-child(2) .prize__badge{ left:362px; top:204px; width:50px; }
.prize:nth-child(2) .prize__name { left:340px; top:243px; width:95px; }
.prize:nth-child(3) .prize__img  { left:539px; top:57px;  width:155px; height:139px; }
.prize:nth-child(3) .prize__badge{ left:593px; top:204px; width:49px; }
.prize:nth-child(3) .prize__name { left:549px; top:242px; width:135px; }
.prize:nth-child(4) .prize__img  { left:785px; top:63px;  width:102px; height:126px; }
.prize:nth-child(4) .prize__badge{ left:797px; top:204px; width:60px; }
.prize:nth-child(4) .prize__name { left:750px; top:242px; width:157px; }

/* ==========================================================================
   CON2 · 기내 와이파이
   ========================================================================== */
.con2{ position:absolute; left:0; top:0; width:1920px; height:1px; z-index:3; }
.sec-head--con2{ top:3238px; }
/* 시안의 타이틀은 정중앙이 아니라 4px 왼쪽 — 절대 좌표로 고정 */
.con2__title{ position:absolute; left:638px; top:68px; }
.con2__title img{ width:636px; height:140px; }
.con2__wifi{ position:absolute; left:1227px; top:61px; width:83px; height:65px; }

.banner{ position:absolute; left:0; top:3508px; width:1920px; height:426px; }
/* 시안 1:169: 반경 16px 라운드 + drop shadow(dy5 blur6). 직각이면 우상단이 튄다. */
.banner__bg{ position:absolute; left:445px; top:0; width:1029px; height:390.6px; background:#E2F0F4;
             border-radius:16px; box-shadow:0 5px 6px rgba(61,61,61,.24); }
.banner__panel{ position:absolute; left:445px; top:0; width:628px; height:393px; }
/* 박스 전체 링크 — 배경(.banner__bg)과 같은 자리·같은 반경 */
.banner__link{ position:absolute; left:445px; top:0; width:1029px; height:390.6px;
               display:block; border-radius:16px; z-index:2; }
.banner__link:focus-visible{ outline:3px solid #FF6001; outline-offset:3px; }
.banner__lead{
  position:absolute; left:539px; top:69px; width:300px;
  font-size:26px; font-weight:300; line-height:36px; letter-spacing:-.025em; color:var(--white);
}
.banner__lead b{ font-weight:700; }
/* 둘째 줄은 링크처럼 — 흰색 1px 밑줄 + 응모 버튼(.apply__arrow)과 같은 화살표 */
.banner__cta{ display:inline-flex; align-items:center; gap:12px;
              /* 화살표는 45° 회전이라 보이는 오른쪽 끝이 레이아웃 박스보다 2.9px 더 나간다.
                 밑줄을 아이콘보다 0.4rem 더 빼려면 그만큼 더 준다(.4rem + 2.9px ≒ .6rem) */
              padding-right:.6rem;
              border-bottom:1px solid #FFFFFF; }
.banner__cta-t{ white-space:nowrap; }
.banner__arrow{
  flex:0 0 auto; width:14px; height:14px; margin-left:-.6rem;   /* 글자 쪽으로 당김 */
  border-top:3px solid currentColor; border-right:3px solid currentColor;
  transform:rotate(45deg);
}
.banner__body{
  position:absolute; left:539px; top:158px; width:300px;
  font-size:18px; font-weight:300; line-height:26px; letter-spacing:-.025em; color:var(--white);
}
.banner__logos{ position:absolute; left:539px; top:306px; display:flex; align-items:center; }
.banner__logo-ke{ width:123px; height:18px; }
.banner__logo-div{ width:1px; height:24px; margin:0 19px 0 15px; background:rgba(255,255,255,.3); }
.banner__logo-sl{ width:103px; height:12px; }
.banner__ticket{ position:absolute; left:1072px; top:0; width:438px; height:426px; }

/* ==========================================================================
   CON3 · 여행사 슬라이더
   ========================================================================== */
.con3{ position:absolute; left:0; top:0; width:1920px; height:1px; z-index:3; }
.sec-head--con3{ top:4023px; }
.con3__carrier{ position:absolute; left:660px; top:0; width:120px; height:130px; }
/* 시안 기준 2px 왼쪽 */
.con3__title{ position:absolute; left:763px; top:11px; }
.con3__title img{ width:390px; height:140px; }
.sec-head--con3 .sec-head__sub{ position:absolute; left:0; top:174px; width:1920px; }
.sec-head--con3 .sec-head__underline{ left:804px; top:33px; width:186px; }  /* 시안 29 + 요청 4px */

.slider{ position:absolute; left:0; top:4287px; width:1920px; height:486px; }
.slider__viewport{
  position:absolute; left:447px; top:0; width:1027px; height:486px;
  overflow:hidden;   /* 가로 클리핑은 캐러셀에 필수. 높이만 +9.4px 둬서 카드 하단 그림자를 살린다 */
}
.slider__track{
  display:flex; gap:14px; will-change:transform;
  touch-action:pan-y; user-select:none; cursor:grab;
}
.slider__track.is-dragging{ cursor:grabbing; }

.acard{ flex:0 0 333px; height:476.6px; }
.acard__link{
  position:relative; display:block; width:100%; height:100%;
  border-radius:25px; overflow:hidden; background:var(--white);
  box-shadow:0 3px 6px rgba(61,61,61,.24);   /* 시안 1:187 drop shadow */
}
/* 로고별 미세 위치 보정 훅 (config logo_dy) */
.acard__head img{ position:relative; top:var(--logo-dy, 0px); }
.acard__head{
  position:absolute; left:0; top:0; width:100%; height:107px;
  display:flex; align-items:center; justify-content:center; background:var(--white);
}
.acard__body{
  position:absolute; left:0; top:107px; width:100%; bottom:0;
  display:block; color:var(--white);
}
/* 혜택 목록 — 시안의 헤드라인(top 30)에서 시작해 날짜 바 위까지 쓴다.
   자·크기는 시안 본문(18px / weight 300 / -.03em)을 그대로 따른다. */
/* 로고 파일 수령 전 임시 워드마크 — 로고 밴드(흰 영역) 한가운데 놓는다 */
.acard__wordmark{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.acard__benefits{
  position:absolute; left:42px; top:30px; right:20px; bottom:54px;
  font-size:22px; font-weight:300; line-height:34px; letter-spacing:-.03em;
}
.acard__benefits b{ font-weight:600; }
/* 내용이 많은 카드 — 그룹 제목은 22px 유지, 본문만 한 단계 줄인다 */
.acard__benefits.is-dense{ font-size:20px; line-height:30px; }
.acard__benefits.is-dense .acard__bgroup{ font-size:22px; }
.acard__bitem, .acard__bgroup{ display:block; }
.acard__bgroup{ font-weight:600; }
.acard__bitem + .acard__bitem{ margin-top:5px; }
.acard__bitem + .acard__bgroup{ margin-top:12px; }
.acard__period{
  position:absolute; right:30px; bottom:16px;
  font-size:14px; font-weight:300; line-height:21px; letter-spacing:-.02em;
}
.acard__body::after{  /* 하단 날짜 바 */
  content:""; position:absolute; left:0; right:0; bottom:0; height:49.6px;
  background:rgba(255,255,255,.15);
}
.acard__period{ z-index:1; }

/* 이전/다음 버튼 — 시안 1:225 / 1:222 는 원·1px 테두리·그림자·화살표가 한 벡터다.
   CSS 로 원+border 를 그리고 화살표를 border 트릭으로 만들면 두 가지가 어긋난다:
     · 화살표 끝이 각진다 (시안은 stroke-linecap:round, 5px)
     · 원의 그림자(-2,3 blur10 rgba(61,54,47,.2))가 통째로 빠진다
   MO(.mo-slider__nav) 와 같은 방식으로 SVG 를 깐다.
   -12.5 / -7.5 는 시안 렌더영역(그림자 포함 100px)과 버튼 박스(79px)의 차이. */
.slider__nav{
  position:absolute; top:197px; width:79px; height:79px;
  border-radius:50%; background:transparent; z-index:3;
  transition:transform .18s ease, opacity .18s ease;
}
/* 보이는 원의 지름은 --nav-vis 로 바꾼다(74px).
   시안에서 원의 중심은 버튼(79x79) 중심에서 (-2, +3) 어긋나 있으므로 그 관계를 유지한다:
     left = 39.5 - S/2 - 2 = 37.5 - S/2   ·   top = 39.5 - S/2 + 3 = 42.5 - S/2 */
.slider__nav::before{
  content:""; position:absolute;
  left:calc(37.5px - var(--nav-vis, 74px) / 2);
  top:calc(42.5px - var(--nav-vis, 74px) / 2);
  width:var(--nav-vis, 74px); height:var(--nav-vis, 74px);
  background-repeat:no-repeat; background-size:100% 100%;
  /* 그림자는 CSS 로 뺐다 — SVG 안에 두면 필터 영역(-10~85)이 viewBox(0~75.76) 밖이라 잘린다.
     시안 값 #3D362F 20% · dy3 · blur6 은 SVG 좌표계 기준이므로 (보이는 지름/75.76) 만큼 환산한다. */
  border-radius:50%;
  --nav-u:calc(var(--nav-vis, 74px) / 75.76);
  box-shadow:0 calc(3 * var(--nav-u)) calc(6 * var(--nav-u)) rgba(61, 54, 47, .2);
}
.slider__nav:hover{ transform:scale(1.06); }
.slider__nav:focus-visible{ outline:3px solid #FF6000; outline-offset:3px; }
.slider__nav[disabled]{ opacity:.35; cursor:not-allowed; transform:none; }
/* 좁은 화면에서는 화살표가 잘리지 않게 카드 위로 겹쳐 들어온다(app.js 가 계산).
   시안 폭에서는 계산값이 시안 위치를 넘지 못하게 막아 348 / 1492 그대로다.
   (이전 버튼은 시안 343 에서 5px 오른쪽으로 옮긴 348 이 기준이다) */
.slider__nav--prev{ left:var(--nav-prev-left, 348px); }
.slider__nav--next{ left:var(--nav-next-left, 1492px); }
.slider__nav--prev::before{ background-image:url("../img/slider-prev-pc.svg"); }
.slider__nav--next::before{ background-image:url("../img/slider-next-pc.svg"); }

/* ==========================================================================
   CON4 · 괌 미리보기
   ========================================================================== */
.con4{ position:absolute; left:0; top:0; width:1920px; height:1px; z-index:3; }
.con4__title{ position:absolute; left:748px; top:5010px; }
.con4__title img{ width:421px; height:74px; }

.con4__frond{ position:absolute; }
.con4__frond--1{ left:250px;  top:5540px; width:288px; height:275px; opacity:1; }
.con4__frond--2{ left:291px;  top:5379px; width:265px; height:313px; opacity:.502; }
.con4__frond--3{ left:1434px; top:5542px; width:221px; height:218px; opacity:.6; }

.player{ position:absolute; left:0; top:0; width:1920px; }
.player__account{ position:absolute; left:485px; top:5120px; width:181px; height:109px; }
.player__frame{
  position:absolute; left:445px; top:5213px; width:1028px; height:576.6px;
  display:block; overflow:hidden;
  box-shadow:inset 0 0 2px rgba(99,148,157,.66);
}
.player__thumb{ width:1028px; height:576.6px; object-fit:cover; }
/* 페이지 안 재생 — 박스(1028×576.6 = 1.783:1)가 16:9(1.778:1)보다 아주 조금 넓어서
   유튜브 플레이어가 좌우에 **1px 검은 띠**를 만든다. 그래서 박스는 시안 치수 그대로 두고
   iframe 만 16:9 로 살짝 키워 넣은 뒤 박스의 overflow:hidden 으로 잘라 낸다. */
.player__embed{
  position:absolute; left:-2px; top:calc((576.6px - 580.5px) / 2);
  width:1032px; height:580.5px;        /* 1032 × 9/16 = 580.5 */
  border:0; display:block; background:#000;
}
.player__play{
  position:absolute; left:467px; top:247px; width:94px; height:94px;
  transition:transform .2s ease;
}
.player__frame:hover .player__play{ transform:scale(1.08); }
.player__caption{
  position:absolute; left:0; top:5813px; width:1920px; text-align:center; opacity:.9;
  font-size:18px; font-weight:400; line-height:21px; letter-spacing:-.02em; color:#1F0C00;
}

/* ==========================================================================
   CON5 · 유의사항 / 온드미디어
   ========================================================================== */
.con5{ position:absolute; left:0; top:0; width:1920px; height:1px; z-index:3; }
/* 유의사항 본문은 x=359 로 왼쪽에 치우쳐 있어 좌우를 잘라내면 제일 먼저 잘린다.
   좁아질 때만 통째로 오른쪽으로 민다 — --notice-shift 는 app.js 가 계산(넓으면 0). */
.notice__title{
  position:absolute; left:calc(359px + var(--notice-shift, 0px)); top:calc(6126px + var(--notice-dy, 0px));
  font-size:18px; font-weight:700; line-height:32px; letter-spacing:-.04em; color:var(--notice-fg);
}
.notice__list{
  position:absolute; left:calc(360px + var(--notice-shift, 0px)); top:calc(6161px + var(--notice-dy, 0px)); width:1500px;
  font-size:16px; font-weight:100; line-height:27px; letter-spacing:-.04em; color:var(--notice-fg);
}
/* 시안은 각 항목이 한 줄 — 폰트 폭 차이로도 줄바꿈되지 않도록 고정 */
.notice__list li{ position:relative; padding-left:9px; white-space:nowrap; }
.notice__list li::before{ content:"•"; position:absolute; left:0; top:0; }
.notice__contact{
  position:absolute; left:calc(360px + var(--notice-shift, 0px)); top:calc(6620px + var(--notice-dy, 0px)); width:1500px; white-space:nowrap;
  font-size:16px; font-weight:100; line-height:27px; letter-spacing:-.04em; color:var(--notice-fg);
}

.owned{ position:absolute; left:0; top:0; width:1920px; }
.owned__divider{ position:absolute; left:0; top:6708px; width:1920px; height:4px; background:rgba(255,255,255,.02); }
.owned__label{ position:absolute; left:673px; top:6780px; width:131px; height:19px; }
.owned__list{ position:absolute; left:0; top:0; }
.owned__item{ position:absolute; }
.owned__item a{ display:block; transition:transform .18s ease, opacity .18s ease; }
.owned__item a:hover{ transform:translateY(-2px); opacity:.85; }
.owned__item--home     { left:848px;  top:6766px; }
.owned__item--blog     { left:927px;  top:6768px; }
.owned__item--instagram{ left:999px;  top:6768px; }
.owned__item--facebook { left:1071px; top:6769px; }
.owned__item--kakao    { left:1132px; top:6768px; }
.owned__item--youtube  { left:1203px; top:6771px; }
.owned__headline{
  position:absolute; left:774px; top:6824px;
  font-size:22px; font-weight:600; line-height:36px; letter-spacing:-.03em; color:var(--notice-fg);
}

/* ==========================================================================
   공유 패널
   ========================================================================== */
/* 공유 패널은 시안에서 본문(343~1571) 바깥(1570~1699)에 있어, 좌우를 잘라내면 제일 먼저 잘린다.
   그래서 **보이는 영역의 오른쪽 끝**에 붙인다 — app.js 가 --share-left 를 계산한다.
   1478px 이상에서는 계산값이 1570 을 넘지 못하게 막아 시안 위치 그대로 유지된다. */
/* top 은 스크롤에 따라 app.js 가 --share-top 을 갱신한다(유의사항 영역 직전까지 따라온다) */
.share{ position:absolute; left:var(--share-left, 1570px); top:var(--share-top, 1170px);
        width:129px; height:381px; z-index:4; }
/* 판때기 — **반투명 그라데이션**. 스크롤을 따라 내려가며 여러 배경 위를 지나므로
   불투명하면 뒤 내용이 가려진다(예전 share-panel.png 는 배경이 합성된 불투명 래스터였다).
   색은 시안 원본 래스터(1:271 fill)에서 뽑은 세로 그라데이션 그대로:
     위 #9C4D15 → 아래 #9C6D1D
   캡슐 형상도 원본 실측: 129x381 안에서 x14 / y13 / 101x355, 반지름 50.5.
   투명도는 --panel-a 한 곳에서 조절한다. */
.share__bg{
  --panel-a:.30;
  position:absolute; left:14px; top:13px; width:101px; height:355px;
  border-radius:50.5px;
  /* 시안 캡처에서 역산: 위 #E85D00 → 아래 #FFC912, 둘 다 30%.
     (크림 배경 #FFF8EE 위 합성값이 위 (248,201,167) · 아래 (255,234,172) 와 ±2 일치) */
  background:linear-gradient(180deg,
              rgba(232, 93,  0, var(--panel-a)) 0%,
              rgba(255, 201, 18, var(--panel-a)) 100%);
  box-shadow:inset 0 0 3px rgba(0,0,0,.3);   /* 시안 1:271 INNER_SHADOW r3 */
}
.share__list{ position:absolute; inset:0; }
.share__item{ position:absolute; left:30px; }
.share__item:nth-child(1){ top:43px; }
.share__item:nth-child(2){ top:118px; }
.share__item:nth-child(3){ top:194px; }
.share__item:nth-child(4){ top:269px; }

/* ── 1060~1470 구간: 모바일처럼 **하단 가로형**으로 눕힌다 ─────────────────
   이 폭에서는 세로 패널이 본문 옆에 놓일 자리가 없어 계속 안쪽으로 파고든다.
   그래서 스크롤 추종을 끄고, 유의사항 위 빈 영역에 가로로 눕혀 고정한다.
   치수는 세로형을 그대로 90도 돌린 값(381×129 · 캡슐 355×101 · 반지름 50.5). */
.share--bottom{
  left:769.5px !important;     /* (1920-381)/2 */
  top:6044px !important;       /* 원 상단 6075 = 6044 + item top 30.5 (위 .bg--notice 주석 참고) */
  width:381px; height:129px;
}
/* 모바일과 같은 모양 — 알약 배경 없이 흰 원만 놓고, 바탕은 아래 .bg--notice 가
   위로 늘어나 만들어 준다(모바일도 공유 원이 유의사항 어두운 영역 안에 있다). */
.share--bottom .share__bg{
  display:none;
  left:13px; top:14px; width:355px; height:101px;
  /* 가로로 눕힌 바 — 세로 패널과 같은 색을 좌→우로 흐르게 한다 */
  background:linear-gradient(90deg,
              rgba(232, 93,  0, var(--panel-a)) 0%,
              rgba(255, 201, 18, var(--panel-a)) 100%);
}
.share--bottom .share__item{ top:30.5px; }
.share--bottom .share__item:nth-child(1){ left:43px; }
.share--bottom .share__item:nth-child(2){ left:118.5px; }
.share--bottom .share__item:nth-child(3){ left:194px; }
.share--bottom .share__item:nth-child(4){ left:269.5px; }

.share__btn{
  width:68px; height:68px; border-radius:50%; background:#F6F6F6;
  box-shadow:inset 0 0 3px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, background .18s ease;
}
.share__btn img{ flex:0 0 auto; }
.share__btn:hover{ transform:scale(1.07); background:#fff; }
.share__btn:focus-visible{ outline:3px solid #FF6000; outline-offset:3px; }

/* ==========================================================================
   접근성 · 모션
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ==========================================================================
   모바일 스테이지 — 시안 52:4 (640 × 8165) 절대 좌표계
   정적 아트워크는 mo-base-1..5.jpg 에 구워져 있고, 여기 값들은 그 위에 얹히는
   텍스트·인터랙션의 좌표다. 좌표를 바꾸면 베이스 이미지와 어긋난다.
   라인하이트가 400~750% 인 항목은 시안(PSD) 값을 그대로 써야 글자가 제자리에 온다.
   ========================================================================== */
/* 640 밖으로 나가는 유일한 요소는 CON3 여행사 트랙이다. 배율 상한 구간(>768)에서
   스테이지가 이를 잘라 내면 카드가 허공에서 끊겨 보이므로 클리핑을 .stage-fit 에 맡긴다. */
.stage--mo{ background:#1CB2EF; overflow:visible; }

.mo-base__slice{ position:absolute; left:0; width:640px; display:block; }  /* height 는 마크업에서 (경계 1px 겹침) */

/* KV 배경 전환 — 베이스 1번 슬라이스가 비워 둔 상단 1040px 을 채운다.
   z-index 를 주면 안 된다: 뒤에 오는 로고·버튼·본문은 z-index 가 auto 라
   1 만 줘도 그 위로 올라와 텍스트를 덮는다. DOM 순서(베이스 바로 뒤)로 충분하다. */
.mo-kvbg{ position:absolute; left:0; top:0; width:640px; height:1040px; pointer-events:none; }
.mo-kvbg__img{
  position:absolute; left:0; top:0; width:640px; height:1040px; display:block;
  opacity:0; transition:opacity var(--kv-fade,1200ms) ease-in-out;
}
/* ⚠ 두 장을 동시에 크로스페이드하면 중간에 **둘 다 반투명**이 되어 뒤가 비친다.
   그러면 KV 밴드(0~1040)만 옅어져서 바로 아래 EVENT 영역과 끊겨 보인다.
   바닥 장(0번)을 항상 불투명하게 깔고 위 장만 페이드하면 합성이 늘 불투명해진다.
   (슬라이드 2장 기준. 3장 이상으로 늘리면 z-index 로 순서를 잡아야 한다) */
.mo-kvbg__img[data-kv-slide="0"]{ opacity:1; transition:none; }
.mo-kvbg__img.is-on{ opacity:1; }
/* KV 사진에서 분리한 로고 — 두 슬라이드 공통이라 크로스페이드에 참여하지 않는다 */
.mo-kv__logo{ position:absolute; left:405px; top:80px; width:165px; height:49px; }
/* 타이틀은 KV 사진에 구워진 것(528px)보다 해상도가 높은 PC 원본(679px)을 같은 자리에 덮는다.
   → 모바일 스테이지가 1.2~1.66배로 커져도 글자가 덜 뭉개진다. 정합은 템플릿 매칭 실측값.
   스파클은 PC 와 같은 screen 합성인데, 사진에 이미 한 겹 구워져 있어 30% 만 얹어 겹침을 막는다. */
.mo-kv__title  { position:absolute; left:64px; top:177px; width:528px; height:277px; }
.mo-kv__sparkle{ position:absolute; left:65px; top:165px; width:420px; height:233px;
                 mix-blend-mode:screen; opacity:.3; }
.mo-anchor{ position:absolute; left:0; width:100%; height:1px; }
.mo-kv, .mo-sec{ position:absolute; left:0; top:0; width:100%; height:1px; }

/* ---------- 상단 버튼 ---------- */
.mo-nav__btn{
  position:absolute; display:block; border-radius:16px;
  color:var(--ink); text-decoration:none; letter-spacing:-.04em;
  transition:transform .18s ease, filter .18s ease;
}
.mo-nav__btn--event { left:74px; top:769px; width:493px; height:107px; }
.mo-nav__btn--travel{ left:75px; top:893px; width:493px; height:108px; }  /* 시안 885 + 요청 8px */
.mo-nav__btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.mo-nav__btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.mo-nav__tag, .mo-nav__label{ position:absolute; white-space:nowrap; }
.mo-nav__tag{ font-weight:700; }
.mo-nav__label{ font-weight:200; }
.mo-nav__btn--event  .mo-nav__tag  { left:41px;  top:35px; font-size:30px;   line-height:36px; }
.mo-nav__btn--event  .mo-nav__label{ left:162px; top:35px; font-size:30px;   line-height:36px; }
.mo-nav__btn--travel .mo-nav__tag  { left:40px;  top:36px; font-size:29.4px; line-height:35px; }
.mo-nav__btn--travel .mo-nav__label{ left:161px; top:36px; font-size:29.4px; line-height:35px; }
.mo-nav__arrow{
  position:absolute; left:445px; top:47px; width:14px; height:14px; opacity:.6;
  border-top:3px solid currentColor; border-right:3px solid currentColor;
  transform:rotate(45deg);
}

/* ---------- 섹션 머리말 ---------- */
.mo-eyebrow{
  position:absolute; height:80px; line-height:80px;      /* 시안 lh 400% */
  text-align:center; font-weight:700; font-size:20px; letter-spacing:-.025em; white-space:nowrap;
}
.mo-eyebrow--event { left:287px; top:1094px; width:63px; color:var(--white); }
.mo-eyebrow--travel{ left:284px; top:3715px; width:73px; color:#565656; }

.mo-sub{
  position:absolute; text-align:center; font-size:30px; line-height:44px;
  letter-spacing:-.025em; font-weight:300; white-space:nowrap;
}
.mo-sub b{ font-weight:700; }
.mo-sub--light{ left:133px; top:1369px; width:381px; color:var(--white); }
.mo-sub--dark { left:94px;  top:5124px; width:461px; color:#000; }

/* ---------- 지갑 · 셀 ---------- */
.mo-cell{ position:absolute; overflow:hidden; }   /* 캡션·이미지가 셀 밖으로 나가지 않게 */
.mo-cell__label{ position:absolute; inset:0; display:block; cursor:pointer; }
.mo-cell__face{ position:absolute; inset:0; display:block; }
.mo-cell__img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mo-cell__face--active{ opacity:0; transition:opacity .18s ease; }
.mo-cell__input:checked + .mo-cell__label .mo-cell__face--active{ opacity:1; }
.mo-cell__caption{
  position:absolute; left:0; right:0; text-align:center;
  color:#000; font-weight:300; letter-spacing:-.025em;
}
.mo-cell--r0 .mo-cell__caption{ top:172px; font-size:16px; line-height:22px; }
.mo-cell--r1 .mo-cell__caption{ top:167px; font-size:18px; line-height:25px; }
.mo-cell--r2 .mo-cell__caption{ top:158px; font-size:18px; line-height:25px; }
.mo-cell__title{
  /* 이미지 하단 그라디언트 띠 위에 얹는다. 제목 길이가 제각각이라 하단 기준으로 잡아
     1줄이든 2줄이든 같은 위치에서 위로 쌓이게 한다. */
  position:absolute; left:8px; right:8px; bottom:18px; text-align:center;
  color:var(--white); font-weight:700; font-size:22px; line-height:28px; letter-spacing:-.025em;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.mo-cell__check{ position:absolute; inset:0; border:3px solid transparent; }
.mo-cell__input:focus-visible + .mo-cell__label .mo-cell__check{ outline:3px solid #FF6001; outline-offset:2px; }

/* 총합 — 라벨과 숫자를 **중앙 고정**으로 잡는다(라벨 중앙 220.5, 숫자는 시안 알약
   x249~391 의 중앙 320).
   고정 폭 + text-align:center 로 두면 내용이 폭을 넘는 순간 왼쪽 모서리에서 오른쪽으로만
   흘러넘친다. 숫자 박스가 94px 인데 "15,000" 은 121px 라 만 단위가 되면 중심이
   320 → 334.7 로 14.7px 밀리고(태블릿 배율 1.66 에서 24px) 알약 밖으로 4px 삐져나왔다.
   폭을 없애고 중앙에 고정하면 자릿수가 늘어도 알약 중앙을 유지한다.
   nowrap 은 기기 폰트 메트릭이 조금만 넓어져도 줄바꿈되던 것을 막는다. */
.mo-wallet__total-label{
  position:absolute; left:220.5px; top:2400px; height:25px;
  transform:translateX(-50%); white-space:nowrap; text-align:center;
  font-weight:700; font-size:18px; line-height:25px; letter-spacing:-.025em; color:#000;
}
.mo-wallet__total-value{
  position:absolute; left:320px; top:2396px; height:29px;
  transform:translateX(-50%); white-space:nowrap; text-align:center;
  font-family:"DSEG7 Classic", ui-monospace, monospace; font-weight:400;
  font-size:27.4px; line-height:29px; letter-spacing:-.025em; color:#FFD241;
}
.mo-wallet__total-value.is-over{ color:#FF4A4A; }
/* 시안에서 응모 버튼 위로 겹치는 야자수 */
.mo-wallet__palm{ position:absolute; left:468px; top:2482px; width:145px; height:169px; z-index:2; pointer-events:none; }

/* ---------- 응모 버튼 ---------- */
.mo-apply__btn{
  position:absolute; left:67px; top:2513px; width:483px; height:104px; display:block;
  border-radius:52px;
  background:linear-gradient(147.7deg, var(--apply-from) 23%, var(--apply-to) 70%);
  box-shadow:inset 0 3px 3px rgba(255,225,180,.85);
  color:var(--white);
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}
.mo-apply__btn:hover:not([disabled]){ transform:translateY(-2px); filter:brightness(1.04); }
.mo-apply__btn[disabled]{ opacity:.45; cursor:not-allowed; }
.mo-apply__btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.mo-apply__label{
  position:absolute; left:167px; top:33px; width:158px; text-align:center;
  font-size:30px; font-weight:800; line-height:38px; letter-spacing:-.025em;
}
.mo-apply__arrow{
  position:absolute; left:346px; top:47px; width:14px; height:14px;
  border-top:3px solid currentColor; border-right:3px solid currentColor;
  transform:rotate(45deg);
}
.mo-apply__msg{
  position:absolute; left:67px; top:2630px; width:483px; text-align:center;
  font-size:18px; line-height:26px; color:#FFE7A8; min-height:26px;
}

/* ---------- 기간 / 발표 / 경품 ---------- */
.mo-info__term, .mo-info__desc{
  position:absolute; color:var(--white); font-size:28px; letter-spacing:-.02em; margin:0;
}
.mo-info__term{ font-weight:700; line-height:36px; }
.mo-info__desc{ font-weight:400; }
.mo-info__term--period  { left:90px;  top:2732px; }
.mo-info__desc--period  { left:166px; top:2732px; line-height:36px; white-space:nowrap; }
.mo-info__term--announce{ left:91px;  top:2805px; }
.mo-info__desc--announce{ left:166px; top:2803px; width:398px; line-height:40px; }
.mo-info__term--prize   { left:91px;  top:2971px; }

.mo-prize{ list-style:none; margin:0; padding:0; }
.mo-prize__badge, .mo-prize__name{
  position:absolute; text-align:center; font-size:24px; letter-spacing:-.02em; white-space:pre-line;
}
.mo-prize__badge{ font-weight:700; line-height:36px; }
.mo-prize__name { font-weight:400; color:var(--white); }
.mo-prize__item--0 .mo-prize__badge{ left:183px; top:3171px; width:32px;  color:var(--white); }
.mo-prize__item--0 .mo-prize__name { left:135px; top:3216px; width:127px; line-height:36px; }
.mo-prize__item--1 .mo-prize__badge{ left:444px; top:3172px; width:35px;  color:#2B1B11; }
.mo-prize__item--1 .mo-prize__name { left:398px; top:3222px; width:127px; line-height:26px; }
.mo-prize__item--2 .mo-prize__badge{ left:180px; top:3434px; width:47px;  color:#2B1B11; }
.mo-prize__item--2 .mo-prize__name { left:108px; top:3480px; width:180px; line-height:36px; }
.mo-prize__item--3 .mo-prize__badge{ left:437px; top:3436px; width:51px;  color:#2B1B11; }
.mo-prize__item--3 .mo-prize__name { left:357px; top:3485px; width:209px; line-height:28px; }

/* ---------- CON2 티켓 문구 ---------- */
.mo-ticket__head{
  /* 둘째 줄에 화살표가 붙어 365px 로는 줄이 접힌다 — 파란 박스 안(85~603)에서 여유 있게 넓힌다 */
  position:absolute; left:85px; top:4134px; width:440px; color:var(--white);
  font-size:34px; line-height:48px; letter-spacing:-.025em; font-weight:300;
}
.mo-ticket__head b{ font-weight:700; }
/* 둘째 줄은 링크처럼 — 흰색 1px 밑줄 + 응모 버튼과 같은 모양의 화살표 */
.mo-ticket__cta{ display:inline-flex; align-items:center; gap:14px;
                 padding-right:.6rem;                 /* 밑줄이 아이콘보다 0.4rem 더(회전 보정 포함) */
                 border-bottom:1px solid #FFFFFF; }
.mo-ticket__cta-t{ white-space:nowrap; }
.mo-ticket__arrow{
  flex:0 0 auto; width:14px; height:14px; margin-left:-.8rem;   /* 글자 쪽으로 당김 */
  border-top:3px solid currentColor; border-right:3px solid currentColor;
  transform:rotate(45deg);
}
/* 파란 박스 전체 링크 — 베이스 이미지에 구워진 박스 위에 투명 링크를 덮는다 */
.mo-ticket__link{ position:absolute; left:36px; top:4075px; width:568px; height:375px;
                  display:block; border-radius:24px; z-index:2; }
.mo-ticket__link:focus-visible{ outline:3px solid #FF6001; outline-offset:3px; }
.mo-ticket__desc{
  position:absolute; left:85px; top:4243px; width:329px; color:var(--white); opacity:.7;
  font-size:22px; line-height:31px; letter-spacing:-.025em; font-weight:300;
}

/* ---------- CON3 여행사 슬라이더 ---------- */
.mo-slider{ position:absolute; left:0; top:5228px; width:640px; height:583px; }
.mo-slider__viewport{ position:absolute; inset:0; }
.mo-slider__track{
  position:absolute; left:102px; top:0; display:flex; gap:27px;
  list-style:none; margin:0; padding:0; will-change:transform;
}
.mo-acard{ position:relative; flex:0 0 433px; width:433px; height:583px; border-radius:16px; overflow:hidden; background:var(--white); }
.mo-acard__link{ position:absolute; inset:0; display:block; color:var(--white); text-decoration:none; }
.mo-acard__link:focus-visible{ outline:3px solid #FF6001; outline-offset:-3px; }
.mo-acard__head{ position:absolute; left:0; top:0; width:100%; height:134px; display:flex; align-items:center; justify-content:center; }
.mo-acard__head img{ display:block; position:relative; top:var(--logo-dy, 0px); }
.mo-acard__body{ position:absolute; left:0; top:134px; right:0; bottom:0; display:block; }
.mo-acard__body::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:74px; background:rgba(255,255,255,.102); }
/* 혜택 목록(모바일) — 이름 아래에서 날짜 바 위까지. 시안 본문 20px 계열을 쓴다.
   가장 긴 카드(모두투어: 그룹 2 + 항목 5)가 들어가는 크기로 맞췄다. */
.mo-acard__wordmark{ font-size:34px; font-weight:700; letter-spacing:-.025em; }
/* 본문 이름이 빠진 카드는 혜택 목록이 그 자리부터 시작한다 */
/* 업체명 줄이 없으므로 혜택 목록이 본문 맨 위에서 시작한다 */
.mo-acard__body.is-wordmark .mo-acard__benefits{ top:32px; }
.mo-acard__benefits{
  position:absolute; left:42px; top:96px; right:29px; bottom:80px;
  /* 모바일만 PC 대비 1.3배 (22→28.6 / 20→26) */
  font-size:28.6px; line-height:41.6px; font-weight:400; letter-spacing:-.025em;
}
.mo-acard__benefits b{ font-weight:600; }
.mo-acard__benefits.is-dense{ font-size:26px; line-height:36.4px; }
.mo-acard__benefits.is-dense .mo-acard__bgroup{ font-size:28.6px; }
.mo-acard__bitem, .mo-acard__bgroup{ display:block; }
.mo-acard__bgroup{ font-weight:700; }
.mo-acard__bitem + .mo-acard__bitem{ margin-top:5px; }
.mo-acard__bitem + .mo-acard__bgroup{ margin-top:12px; }
/* 기간은 카드 오른쪽(시안 기준 오른쪽 끝 404 = 안쪽 여백 29px)에 붙인다.
   left+width 로 잡으면 안 된다 — 시안 문구가 "~6/30"(65px)뿐이라 폭이 작게 잡혔는데,
   실제 config 문구는 "2025.2.12 - 2025.3.31"(221px)이라 폭을 넘는 순간
   text-align:right 와 무관하게 왼쪽 모서리에서 오른쪽으로 흘러 카드 밖에서 잘렸다.
   right 기준 + 폭 auto 면 글자가 길어져도 오른쪽 끝이 고정되고 왼쪽으로 늘어난다. (PC 와 동일) */
.mo-acard__period  { position:absolute; right:29px; top:368px; height:93px; line-height:93px; text-align:right; font-size:24px; letter-spacing:-.025em; white-space:nowrap; }
/* 원형 버튼은 시안에서 카드 위에 얹힌다. 베이스 이미지에 구워 두면 좌우 미리보기
   카드가 원을 반쯤 덮어버리므로(버튼이 뒤로 숨는 현상) 베이스에서는 지우고
   여기서 벡터로 다시 그린다. ::before 로 그려야 그림자가 버튼 박스 밖까지 나온다.
   -12.5 / -7.5 는 시안 렌더영역(그림자 포함)과 버튼 박스의 차이. */
.mo-slider__nav{ position:absolute; top:263px; height:79px; border-radius:50%; background:transparent; z-index:3; }
.mo-slider__nav::before{
  content:""; position:absolute; left:-12.5px; top:-7.5px; height:100px;
  background-repeat:no-repeat; background-size:100% 100%;
}
.mo-slider__nav--prev{ left:36px;  width:79px; }
.mo-slider__nav--next{ left:520px; width:78px; }
.mo-slider__nav--prev::before{ width:100px; background-image:url("../img/mo-slider-prev.svg"); }
.mo-slider__nav--next::before{ width:99px;  background-image:url("../img/mo-slider-next.svg"); }
.mo-slider__nav:focus-visible{ outline:3px solid #FF6001; outline-offset:2px; }
.mo-slider__nav[disabled]{ cursor:default; }

/* ---------- CON4 괌 미리보기 ---------- */
.mo-acct__name{
  position:absolute; left:114px; top:6133px; width:90px; height:90px; line-height:90px; /* 시안 lh 562.5% */
  font-size:18px; font-weight:600; letter-spacing:-.025em; color:#1F0C00; opacity:.8; white-space:nowrap;  /* 시안 16 + 요청 2px */
}
.mo-acct__sub{
  position:absolute; left:114px; top:6151px; width:114px; height:90px; line-height:90px; /* 시안 lh 750% */
  font-size:12px; font-weight:200; letter-spacing:-.025em; color:#1F0C00; opacity:.8; white-space:nowrap;
}
.mo-play{ position:absolute; left:278px; top:6322px; width:84px; height:85px; border-radius:50%; display:block; }
/* 페이지 안 재생 — 시안 영상 영역(52:223).
   모바일은 썸네일·재생버튼이 베이스 이미지에 구워져 있어 그 위를 정확히 덮는다 */
.mo-video__frame{
  position:absolute; left:35px; top:6221px; width:569px; height:320px;
  overflow:hidden; z-index:2;
}
/* PC 와 같은 이유로 iframe 만 16:9 로 키워 넣고 잘라 낸다 */
.mo-video__embed{
  position:absolute; left:-2px; top:calc((320px - 322.3px) / 2);
  width:573px; height:322.3px;         /* 573 × 9/16 = 322.3 */
  border:0; display:block; background:#000;
}
.mo-play:focus-visible{ outline:3px solid #FF6001; outline-offset:3px; }
.mo-video__caption{
  /* 22px 로 키우면 기존 고정폭(280)을 넘는다. 고정폭+center 는 넘칠 때 오른쪽으로만
     흘러 중앙이 밀리므로, 원래 중심(183+140=323)에 translateX(-50%) 로 앵커를 건다. */
  position:absolute; left:323px; top:6561px; transform:translateX(-50%); text-align:center;
  font-size:22px; line-height:26px; letter-spacing:-.02em; color:#1F0C00; opacity:.8; white-space:nowrap;
}

/* ---------- CON7 유의사항 ---------- */
.mo-notice{ position:absolute; left:35px; top:6888px; width:570px; }
.mo-notice__title{ margin-left:4px; font-size:26px; line-height:32px; font-weight:700; letter-spacing:-.04em; color:var(--notice-fg); opacity:.7; }
.mo-notice__list{ margin-top:23px; font-size:20px; line-height:30px; font-weight:100; letter-spacing:-.04em; color:var(--white); opacity:.6; }
.mo-notice__list li{ position:relative; padding-left:22px; }
.mo-notice__list li::before{ content:"\2022"; position:absolute; left:2px; top:0; }
.mo-notice__contact{ margin-top:30px; font-size:20px; line-height:30px; font-weight:100; letter-spacing:-.04em; color:var(--white); opacity:.6; }

.mo-share, .mo-owned{ list-style:none; margin:0; padding:0; }
.mo-share__item, .mo-owned__item{ position:absolute; }
.mo-share__btn, .mo-owned__item a{ position:absolute; inset:0; display:block; border-radius:50%; }
/* 베이스(JPEG)에 구워진 아이콘 위에 원본 PNG 를 덮는다 — 태블릿에서 1.2배로 커져도 덜 뭉개진다.
   흰 원도 CSS 로 다시 그려 JPEG 압축 자국을 지운다(PC .share__btn 과 같은 값). */
.mo-share__btn{ background:#F6F6F6; box-shadow:inset 0 0 3px rgba(0,0,0,.3); }
.mo-share__icon{ position:absolute; display:block; }
.mo-owned__icon{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mo-share__btn:focus-visible, .mo-owned__item a:focus-visible{ outline:3px solid #FF6001; outline-offset:3px; }

/* ==========================================================================
   응모 모달 — 시안 126:2 (640 × 2290 절대 좌표계)

   시안이 640폭 한 벌뿐이라 PC·모바일 공통으로 **뷰포트 레벨**에 깔고
   app.js 가 --modal-scale 로 화면 폭에 맞춰 축소한다.
   스테이지(.stage) 안에 넣으면 스테이지 배율까지 곱해져 두 번 줄어든다.
   좌표는 전부 시안 실측값이다.
   ========================================================================== */
/* 토스트 — 모달(z-index 100) 위에 떠야 하고, 스테이지 배율(transform)의 영향을
   받으면 안 되므로 뷰포트 레벨에 fixed 로 둔다. */
.gvb-toast{
  position:fixed; left:50%; bottom:48px; transform:translateX(-50%) translateY(8px);
  z-index:200; max-width:calc(100vw - 40px);
  padding:14px 24px; border-radius:999px;
  background:rgba(23,17,12,.92); color:#fff;
  font-size:16px; line-height:24px; font-weight:400; letter-spacing:-.02em;
  white-space:nowrap; text-align:center; pointer-events:none;
  opacity:0; transition:opacity .18s ease, transform .18s ease;
}
.gvb-toast[hidden]{ display:none; }
.gvb-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce){
  .gvb-toast{ transition:none; transform:translateX(-50%); }
  .gvb-toast.is-on{ transform:translateX(-50%); }
}

/* 경고 팝업 — 모달(100)·토스트(200)보다 위에 떠야 한다 */
.gvb-alert{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; }
.gvb-alert[hidden]{ display:none; }
.gvb-alert__dim{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.gvb-alert__box{
  position:relative; max-width:min(420px, calc(100vw - 48px));
  padding:30px 28px 22px; border-radius:18px;
  background:#fff; color:#1F0C00; text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
}
.gvb-alert__msg{ margin:0 0 20px; font-size:17px; line-height:26px; letter-spacing:-.02em; word-break:keep-all;
                 white-space:pre-line; }   /* 문구의 
 을 줄바꿈으로 */
.gvb-alert__ok{
  min-width:120px; padding:11px 22px; border-radius:999px;
  background:var(--apply-from, #FF8A00); color:#fff;
  font-size:16px; font-weight:700; letter-spacing:-.02em;
}
.gvb-alert__ok:focus-visible{ outline:3px solid #1F0C00; outline-offset:2px; }

.modal{ --mw:640px; --mh:2290px; position:fixed; inset:0; z-index:100; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.66); border:0; padding:0; }
.modal__fit{
  position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; justify-content:center; align-items:flex-start;
  padding:20px 0; overscroll-behavior:contain;
}
/* 배율을 곱한 만큼만 자리를 차지해야 스크롤 길이가 맞는다 (.stage-fit 과 같은 방식) */
.modal__box{
  position:relative; flex:0 0 auto;
  width:calc(var(--mw) * var(--modal-scale, 1));
  height:calc(var(--mh) * var(--modal-scale, 1));
}
.modal__stage{
  position:absolute; left:0; top:0; width:var(--mw); height:var(--mh);
  transform:scale(var(--modal-scale, 1)); transform-origin:0 0;
  background:var(--notice-bg); overflow:hidden;
}

/* 시안에는 닫기 버튼이 없다. 모달은 닫을 수단이 반드시 보여야 해서 추가했다
   (Esc·배경 클릭만으로는 마우스 사용자에게 보이는 단서가 없다). */
.modal__close{
  position:absolute; right:18px; top:18px; width:58px; height:58px; z-index:2;
  border-radius:50%; background:rgba(0,0,0,.42);
}
.modal__close::before, .modal__close::after{
  content:""; position:absolute; left:17px; top:28px; width:24px; height:2px; background:#fff;
}
.modal__close::before{ transform:rotate(45deg); }
.modal__close::after { transform:rotate(-45deg); }
.modal__close:hover{ background:rgba(0,0,0,.62); }
.modal__close:focus-visible{ outline:3px solid #FF6001; outline-offset:2px; }

.modal__hero{ position:absolute; left:0; top:0; width:640px; height:800px; display:block; }

/* ---------- 개인정보 입력 (시안 y800~1394)
   ⚠ 아래 자식 좌표는 **섹션 기준**이다 = 시안 y − 800. 시안값을 그대로 쓰면
      800px 아래로 밀려 다음 섹션에 가려진다. ---------- */
.modal-form{ position:absolute; left:0; top:800px; width:640px; height:594px; background:#FFF590; }
.modal-form__label{
  position:absolute; left:34px; height:38px; line-height:38px;
  font-size:25px; font-weight:600; letter-spacing:-.025em; color:#252525;
}
.modal-form__label--name   { top:94px; }
.modal-form__label--phone  { top:173px; }
.modal-form__label--account{ top:252px; }
.modal-form__input{
  position:absolute; left:114px; width:490px; height:65px; padding:0 20px;
  border:2.37px solid #8F9295; border-radius:11.85px; background:var(--white);
  font-family:inherit; font-size:25px; font-weight:500; letter-spacing:-.025em; color:#1F1F1F;
}
.modal-form__input::placeholder{ color:#8F9295; opacity:1; }
.modal-form__input--name   { top:80px; }
.modal-form__input--phone  { top:159px; }
.modal-form__input--account{ top:238px; }
.modal-form__input:focus-visible{ outline:3px solid #FF6001; outline-offset:2px; }

.modal-form__check{
  position:absolute; left:130px; top:331px; width:33px; height:33px; margin:0;
  -webkit-appearance:none; appearance:none;
  border:3.56px solid #8F9295; border-radius:0; background:var(--white); cursor:pointer;
}
.modal-form__check:checked::after{
  content:""; position:absolute; left:5px; top:0; width:13px; height:20px;
  border-right:4px solid #FF8A00; border-bottom:4px solid #FF8A00; transform:rotate(42deg);
}
.modal-form__check:focus-visible{ outline:3px solid #FF6001; outline-offset:2px; }
.modal-form__consent{
  position:absolute; left:175px; top:331px; height:33px; line-height:33px;
  font-size:21px; font-weight:300; letter-spacing:-.04em; color:#252525; cursor:pointer;
}

.modal-form__submit{
  position:absolute; left:36px; top:404px; width:569px; height:107px;
  display:flex; align-items:center; justify-content:center; gap:24px; padding-left:10px;
  border-radius:53.5px; background:#FF8A00; color:var(--white);
  box-shadow:0 3px 2px rgba(0,0,0,.2);
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}
.modal-form__submit:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.modal-form__submit:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.modal-form__submit[disabled]{ opacity:.45; filter:grayscale(.55); cursor:not-allowed; transform:none; }
.modal-form__submit-label{ font-size:30.59px; font-weight:700; letter-spacing:-.06em; }
.modal-form__submit-arrow{
  width:11px; height:11px; border-top:3px solid currentColor; border-right:3px solid currentColor;
  transform:rotate(45deg) translate(-2px,2px);
}
.modal-form__msg{
  position:absolute; left:36px; top:522px; width:569px; text-align:center;
  font-size:18px; line-height:26px; letter-spacing:-.025em; color:#252525; min-height:26px;
}
.modal-form__msg.is-error{ color:#C62F00; }

/* ---------- 참여방법 (y1394~2017) ---------- */
.modal-steps{ position:absolute; left:0; top:1394px; width:640px; height:623px; background:#744420; }
.modal-steps__title{
  position:absolute; left:0; right:0; top:71px; height:45px; line-height:45px; text-align:center;
  font-size:32px; font-weight:700; letter-spacing:-.04em; color:var(--white);
}
.modal-steps__title i{ font-style:italic; }
.modal-steps__card{
  position:absolute; left:35px; top:143px; width:570px; height:418px;
  background:var(--white); border-radius:23.7px;
}
/* 본문은 흐름 배치 — 문단 간격(12px)이 STEP1↔STEP2, 업로드하기!↔태그 두 곳에만 들어간다 */
.modal-steps__text{
  position:absolute; left:49px; top:40px; width:480px;
  font-size:24px; line-height:33.5px; font-weight:300; letter-spacing:-.04em; color:#2F3030;
}
.modal-steps__list{ list-style:none; margin:0; padding:0; }
.modal-steps__item{ position:relative; padding-left:95px; }
.modal-steps__item + .modal-steps__item{ margin-top:11px; }
.modal-steps__no{ position:absolute; left:0; top:0; font-weight:700; color:#FF8A00; }
.modal-steps__body{ margin:0; }
.modal-steps__body b{ font-weight:700; }
.modal-steps__handle{
  color:#3B93C5; font-weight:500;
  text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px;
}
.modal-steps__tags{ margin:9px 0 0; padding-left:95px; }
.modal-steps__tags em{ font-style:normal; font-weight:600; }

.modal-steps__btn{
  position:absolute; top:316px; width:240px; height:60px; border-radius:5.93px;
  font-size:24px; font-weight:700; letter-spacing:-.06em; color:var(--white);
  transition:filter .18s ease;
}
.modal-steps__btn:hover{ filter:brightness(1.08); }
.modal-steps__btn:focus-visible{ outline:3px solid #FF6001; outline-offset:3px; }
.modal-steps__btn--save{ left:35px;  background:#FF8A01; }
.modal-steps__btn--copy{ left:295px; background:#252525; }

/* ---------- 친구에게 공유하기 (y2017~2290) ---------- */
.modal-share{ position:absolute; left:0; top:2017px; width:640px; height:273px; background:var(--cream); }
.modal-share__title{
  position:absolute; left:0; right:0; top:59px; height:46px; line-height:46px; text-align:center;
  font-size:32px; font-weight:700; letter-spacing:-.04em; color:#2A272E;
}
.modal-share__list{ list-style:none; margin:0; padding:0; }
.modal-share__item{ position:absolute; top:129px; width:83px; height:83px; }
.modal-share__item--0{ left:77px; }
.modal-share__item--1{ left:178px; }
.modal-share__item--2{ left:277px; top:129px; width:84px; height:84px; } /* X 는 원까지 한 장의 이미지 */
.modal-share__item--3{ left:379px; }
.modal-share__item--4{ left:480px; }
.modal-share__btn{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease;
}
.modal-share__btn:hover{ transform:scale(1.06); }
.modal-share__btn:focus-visible{ outline:3px solid #FF6001; outline-offset:3px; }
.modal-share__btn img{ display:block; }
/* 카카오 아이콘만 시안에서 원 중앙보다 2px 아래에 있다 */
.modal-share__item--1 .modal-share__btn img{ transform:translateY(2px); }

/* 모달이 열린 동안 배경 스크롤 잠금 */
body.is-modal-open{ overflow:hidden; }

/* ==========================================================================
   GTM 클릭 타깃 고정
   GTM 의 Click 트리거는 "실제로 눌린 요소(event.target)"만 선택자와 대조한다.
   버튼·링크·라벨 안의 장식 요소가 눌리면 .np_boxN_btn_M 선택자가 어긋나므로
   내부 요소의 포인터 이벤트를 끊어 클릭이 항상 바깥(클래스가 붙은) 요소에서 잡히게 한다.
   부모의 :hover / :focus-visible 은 그대로 동작한다.
   ========================================================================== */
.gtm-t > *{ pointer-events:none; }