/* ============================================================
   MASPANALO.COM — WELCOME PASS 모달
   ------------------------------------------------------------
   ★ 이 파일은 손으로 쓰지 않았다. 시안에서 기계로 뽑았다.
       원본 : _LANDING/PESO77-v2/peso77-welcome-pass.html
       생성 : tools/welcomepass_build.py
     시안이 바뀌면 그 스크립트를 다시 돌린다.

   ★ 선택자를 전부 #p77WelcomePass 안에 가뒀다.
     시안은 .line · .more · .act · .foot · .chip 처럼 흔한 이름을 전역에
     뿌린다 — 그대로 두면 styles.css 와 부딪힌다.

   ★ 시안의 @container (max-width:700px) 를 뷰포트 미디어쿼리로 바꿨다.
     컨테이너 쿼리를 모르는 브라우저에서는 모바일 규칙이 통째로 죽어
     PC 레이아웃(padding-left:424px)이 휴대폰에 그대로 나온다.
     시안 프레임 폭이 1040 이었으므로 컨테이너 700 ≒ 뷰포트 760 이다.

   ★ 높이는 dvh 를 쓰되 vh 를 먼저 적어 폴백을 남긴다
     (모바일 주소창이 접힐 때 잘리지 않게).
   ============================================================ */

#p77WelcomePass{

  --paper:    #F4EFE2;   /* 패스 본지 */
  --paper-2:  #EBE4D3;   /* 접힌 면 */
  --ink:      #0B1026;   /* 잉크 그린(거의 검정) */
  --ink-2:    #2A3561;
  --muted:    #727A9C;
  --rule:     rgba(11,16,38,.22);
  --gold:     #9A7628;   /* 종이 위 금박 — 밝은 골드는 흰 바탕에서 안 읽힌다 */
  --gold-2:   #C9A24C;
  --green:    #2B4BD8;   /* 도장·버튼 */
  --green-lt: #FFC83D;   /* 사이트 액션 그린 — 상태 표시 전용 */
  --stage:    #0B1026;

  --f-disp: "Fraunces", Georgia, "Times New Roman", serif;
  --f-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  position: fixed;
  inset: 0;
  z-index: 99990;          /* 독·기존 오버레이 위, 연령 확인(999999) 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(6,8,20,.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* hidden 속성이 display:flex 에 지면 안 된다 (bootstrap 의 [hidden] 과 같은 사고) */
#p77WelcomePass[hidden]{ display: none !important; }

#p77WelcomePass *{ box-sizing: border-box; }

#p77WelcomePass .p77wp__frame{
  width: min(1040px, 100%);
  max-height: 96vh;
  max-height: 96dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: none;
}

/* 모달이 떠 있는 동안 뒤쪽이 스크롤되지 않게 */
body.p77wp-open{ overflow: hidden; }

/* ============================================================
   MASPANALO — WELCOME PASS
   컨셉 : 카지노 플로어 실사 + 종이 VIP 패스(티켓).
   앞선 시안들과 정반대 — 어두운 패널/글로우 골드 대신
   아이보리 종이, 잉크 그린, 절취선, 일련번호.
   ============================================================ */

/* 시트 헤더 */

#p77WelcomePass .ctl[aria-pressed="true"] { background:var(--paper); border-color:var(--paper); color:var(--ink); }
#p77WelcomePass .px:focus-visible, #p77WelcomePass .cta:focus-visible {
  outline:2px solid var(--green-lt); outline-offset:2px;
}

/* 스테이지 */

/* ============================================================
   팝업 = 한 장의 패스
   ============================================================ */
#p77WelcomePass .pass {
  position:relative; display:block; padding-left:424px;   /* 사진 자리 확보 — 패널은 absolute */
  background:var(--paper);
  border-radius:3px;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.92), 0 0 0 1px rgba(0,0,0,.4);
  overflow:hidden;
}

/* ── 왼쪽 : 카지노 플로어 실사 ── */
#p77WelcomePass .shot {
  position:absolute; top:0; bottom:0; left:0; width:540px; z-index:1;
  overflow:hidden; background:#0A0F24;   /* 오른쪽 164px 는 종이가 덮는다 */
}
#p77WelcomePass .shot .mo { display:none; }   /* 모바일 전용 컷 */
#p77WelcomePass .shot img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:46% 26%; display:block;
  animation:slowZoom 16s ease-in-out infinite alternate;
}
@keyframes slowZoom{ from{ transform:scale(1); } to{ transform:scale(1.055); } }
#p77WelcomePass .shot::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(190deg, rgba(8,12,34,.42) 0%, rgba(8,12,34,0) 34%, rgba(8,12,34,.72) 100%);
}
#p77WelcomePass .shot-tag {
  position:absolute; left:22px; bottom:20px; z-index:3;
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-cond); font-size:13px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper);
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
#p77WelcomePass .livedot {
  width:7px; height:7px; border-radius:50%; background:var(--green-lt); flex:none;
  box-shadow:0 0 0 0 rgba(255,200,61,.7); animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(255,200,61,.6); }
  70%{ box-shadow:0 0 0 9px rgba(255,200,61,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,200,61,0); }
}

/* ── 절취선 : 사진과 종이가 만나는 자리 ── */
#p77WelcomePass .perf {
  position:absolute; top:0; bottom:0; left:424px; width:16px; z-index:6; will-change:transform;
  transform:translateX(-8px); pointer-events:none;
  background-image:radial-gradient(circle 5px at 50% 50%, var(--paper) 97%, rgba(244,239,226,0) 100%);
  background-size:16px 16px; background-repeat:repeat-y; background-position:0 6px;
}
#p77WelcomePass .perf::after {
  content:""; position:absolute; left:50%; top:10px; bottom:10px; width:0;
  border-left:1.5px dashed rgba(11,16,38,.22);
}

/* ── 종이가 도착하기 전, 빈 면을 채우는 워터마크 ── */
#p77WelcomePass .plate {
  position:absolute; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  left:552px; right:0; top:0; bottom:0;
}
#p77WelcomePass .plate svg { width:136px; height:auto; display:block; opacity:.5; }
#p77WelcomePass .plate span {
  font-family:var(--f-cond); font-size:14px; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold); opacity:.72;
}

/* ── 오른쪽 : 종이 ── */
#p77WelcomePass .stub {
  position:relative; z-index:5; will-change:transform; padding:26px 30px 22px;
  display:flex; flex-direction:column; color:var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(11,16,38,.018) 0 1px, rgba(0,0,0,0) 1px 4px),
    var(--paper);
}
#p77WelcomePass .px {
  position:absolute; top:16px; right:16px; z-index:10;
  width:30px; height:30px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(11,16,38,.25); border-radius:50%;
  color:var(--ink-2); cursor:pointer; transition:background .18s, color .18s, transform .22s;
}
#p77WelcomePass .px:hover { background:var(--ink); color:var(--paper); transform:rotate(90deg); }

#p77WelcomePass .pass-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
#p77WelcomePass .pass-head svg { width:118px; height:auto; display:block; }
#p77WelcomePass .kicker {
  font-family:var(--f-cond); font-size:13px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  margin-top:7px;
}
#p77WelcomePass .serial {
  font-family:var(--f-mono); font-size:10.5px; color:var(--muted);
  text-align:right; line-height:1.5; padding-right:38px;
}
#p77WelcomePass .serial b { display:block; color:var(--ink-2); font-weight:700; letter-spacing:.04em; }

/* ── 승인된 금액 ── */
#p77WelcomePass .amount { margin:20px 0 4px; position:relative; }
#p77WelcomePass .amount-lbl {
  font-family:var(--f-cond); font-size:14px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
#p77WelcomePass .amount-row { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:2px; }
#p77WelcomePass .figure {
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(44px, 7.2cqi, 78px); line-height:1;
  letter-spacing:-.028em; color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:lining-nums;
}
#p77WelcomePass .figure .plus { color:var(--gold); }
#p77WelcomePass .figure i { font-style:normal; }
#p77WelcomePass .more {
  font-family:var(--f-disp); font-weight:600; font-size:26px;
  color:var(--gold); font-style:italic;
}
#p77WelcomePass .claimable { font-size:14.5px; color:var(--ink-2); margin:6px 0 0; }
#p77WelcomePass .claimable b { font-weight:700; color:var(--ink); }
/* 금박이 한 번 스치고 지나간다 */
#p77WelcomePass .foil {
  position:absolute; left:0; top:0; width:120px; height:100%;
  pointer-events:none; mix-blend-mode:overlay;
  background:linear-gradient(105deg, rgba(255,255,255,0), rgba(255,236,170,.95), rgba(255,255,255,0));
  transform:skewX(-14deg);
}

/* ── 절취 규칙선 ── */
#p77WelcomePass .tear {
  height:0; border-top:1.5px dashed var(--rule);
  margin:18px 0 0; position:relative;
}
#p77WelcomePass .tear span {
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  background:var(--paper); padding:0 12px;
  font-family:var(--f-cond); font-size:12px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}

/* ── 리워드 원장 ── */
#p77WelcomePass .ledger { margin-top:6px; }
#p77WelcomePass .line {
  display:grid; grid-template-columns:26px 1fr auto;
  align-items:baseline; gap:0 14px;
  padding:11px 0 10px;
  border-bottom:1px solid rgba(11,16,38,.10);
}
#p77WelcomePass .line:last-child { border-bottom:0; }
#p77WelcomePass .no {
  font-family:var(--f-mono); font-size:11px; font-weight:700; color:var(--gold);
  letter-spacing:.02em;
}
#p77WelcomePass .line h3 {
  margin:0; font-family:var(--f-body); font-size:15.5px; font-weight:700;
  color:var(--ink); letter-spacing:-.005em;
}
#p77WelcomePass .line .when {
  display:inline-block; margin-left:8px; vertical-align:1px;
  font-family:var(--f-cond); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  border:1px solid rgba(43,75,216,.35); border-radius:2px; padding:1px 6px;
}
#p77WelcomePass .line p { margin:2px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45; }
#p77WelcomePass .line .amt {
  font-family:var(--f-disp); font-weight:700; font-size:22px; line-height:1;
  color:var(--ink); white-space:nowrap; text-align:right;
}
#p77WelcomePass .line .amt small {
  display:block; margin-top:4px;
  font-family:var(--f-cond); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* ── 사용처 ── */
#p77WelcomePass .usable {
  margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--f-cond); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
#p77WelcomePass .usable .u-lbl { color:var(--muted); letter-spacing:.24em; }
#p77WelcomePass .usable i {
  width:4px; height:4px; border-radius:50%; background:var(--gold); display:inline-block;
}

/* ── CTA ── */
#p77WelcomePass .act { margin-top:16px; }
#p77WelcomePass .cta {
  position:relative; overflow:hidden; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--f-cond); font-size:22px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); background:var(--ink);
  padding:17px 24px; border:0; border-radius:2px; cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(11,16,38,.8), inset 0 0 0 1px rgba(154,118,40,.55);
  transition:transform .18s cubic-bezier(.22,1,.36,1), background .18s;
}
#p77WelcomePass .cta:hover { transform:translateY(-2px); background:#16204A; }
#p77WelcomePass .cta:active { transform:translateY(0); }
#p77WelcomePass .cta .glide {
  position:absolute; top:0; bottom:0; width:74px; left:-110px;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,236,170,.42), rgba(255,255,255,0));
  transform:skewX(-16deg);
  animation:glide 4.6s ease-in-out 1.7s infinite;
}
@keyframes glide{ 0%{ left:-110px; } 22%{ left:118%; } 100%{ left:118%; } }
#p77WelcomePass .steps {
  margin-top:11px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
#p77WelcomePass .stp { display:flex; align-items:baseline; gap:8px; padding-right:12px; }
#p77WelcomePass .stp + .stp { padding-left:12px; border-left:1px solid rgba(11,16,38,.14); }
#p77WelcomePass .stp em {
  font-style:normal; font-family:var(--f-mono); font-size:10px; font-weight:700;
  color:var(--gold); flex:none;
}
#p77WelcomePass .stp span { font-size:12px; color:var(--muted); line-height:1.35; }
#p77WelcomePass .stp b { color:var(--ink); font-weight:700; }

/* ── 하단 ── */
#p77WelcomePass .foot {
  margin-top:16px; padding-top:13px; border-top:1.5px dashed var(--rule);
  display:grid; grid-template-columns:1fr; gap:11px;
}
#p77WelcomePass .pays { display:flex; align-items:center; gap:12px; min-width:0; }
#p77WelcomePass .pays-lbl {
  flex:none; font-family:var(--f-cond); font-size:12.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
#p77WelcomePass .pays-lbl b { color:var(--ink-2); font-weight:700; }
/* 자동으로 흐르지 않는다 — 흐르면 어느 순간엔 크립토가 앞자리를 차지한다.
   현금 수단이 항상 먼저 보이고, 크립토는 옆으로 밀어서 본다. */
#p77WelcomePass .marquee {
  position:relative; flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
#p77WelcomePass .marquee::-webkit-scrollbar { display:none; }
#p77WelcomePass .track { display:flex; gap:7px; width:max-content; align-items:center; }
#p77WelcomePass .crypto-sep {
  flex:none; align-self:stretch; width:0; margin:0 5px;
  border-left:1.5px dashed rgba(11,16,38,.25);
}
#p77WelcomePass .track .crypto { width:54px; height:27px; opacity:.72; }
#p77WelcomePass .track .crypto img { filter:grayscale(.15); }
#p77WelcomePass .chip {
  width:62px; height:30px; flex:none; border-radius:3px; background:#fff;
  border:1px solid rgba(11,16,38,.14);
  display:flex; align-items:center; justify-content:center; padding:4px 6px; overflow:hidden;
}
#p77WelcomePass .chip img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
#p77WelcomePass .foot-r { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; }
#p77WelcomePass .hide-today { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); cursor:pointer; }
#p77WelcomePass .hide-today input {
  appearance:none; width:15px; height:15px; margin:0; flex:none;
  border:1.5px solid rgba(11,16,38,.35); border-radius:2px; background:transparent;
  display:grid; place-items:center; cursor:pointer;
}
#p77WelcomePass .hide-today input:checked { background:var(--green); border-color:var(--green); }
#p77WelcomePass .hide-today input:checked::after {
  content:""; width:8px; height:4px; border:2px solid var(--paper); border-top:0; border-right:0;
  transform:translateY(-1px) rotate(-45deg);
}
#p77WelcomePass .legal {
  font-family:var(--f-cond); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

/* ============================================================
   인트로
   ============================================================ */

/* transform 하나만 움직인다 — 레이아웃·페인트가 매 프레임 다시 돌지 않는다 */
@keyframes cardInRight{ from{ transform:translateX(616px); } to{ transform:none; } }
@keyframes plateOut{ from{ opacity:1; } to{ opacity:0; } }

@keyframes passIn{
  from{ opacity:0; transform:translateY(22px) rotate(-.5deg) scale(.985); }
  to{ opacity:1; transform:none; }
}
@keyframes shotIn{ from{ opacity:0; transform:scale(1.14); } to{ opacity:1; transform:scale(1); } }
@keyframes inkIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes foil{
  0%{ left:-25%; opacity:0; }
  25%{ opacity:1; }
  100%{ left:105%; opacity:0; }
}

/* ============================================================
   모바일
   ============================================================ */

@media (max-width: 760px) {
  /* ★ 사진 밴드를 레이아웃에서 빼고(absolute) 그 자리를 padding 으로 확보한다.
     이렇게 해야 인트로에서 밴드가 520px 로 열려도 팝업 전체 높이가 안 변한다.
     (예전엔 520 + 종이 527 = 1,047px 로 화면을 넘겼다) */
  #p77WelcomePass .pass { display:block; padding-top:160px; padding-left:0; }
  #p77WelcomePass .shot {
    position:absolute; top:0; left:0; right:0; bottom:auto;
    width:auto; min-height:0; height:160px; z-index:1;
  }
  #p77WelcomePass .plate { left:0; right:0; top:auto; bottom:0; height:180px; }
  #p77WelcomePass .plate svg { width:112px; }
  #p77WelcomePass .plate span { font-size:12.5px; letter-spacing:.3em; }
  
  #p77WelcomePass .stub { z-index:5; }

  /* 열리는 순간 : 사진이 520px 로 먼저 다 보인다 → 종이가 그 위로 올라오며 160px 로 접힌다 */
  
  
  
  @keyframes bandOpen{ from{ height:520px; } to{ height:160px; } }
  @keyframes perfOpen{ from{ top:520px; } to{ top:160px; } }
  @keyframes paperUp{
    from{ opacity:0; transform:translateY(58px); }
    to{ opacity:1; transform:none; }
  }
  /* 종이가 올라온 다음에 글자가 찍힌다 */
  
  
  
  
  
  
  
  
     /* 밴드가 접힌 뒤 얹힌다 */
  #p77WelcomePass .shot > img:not(.mo) { display:none; }
  #p77WelcomePass .shot .mo { display:block; object-position:50% 6%; }   /* 520px 에서 무릎까지, 160px 에서 얼굴+브랜드월 */
  #p77WelcomePass .shot::after {
    background:linear-gradient(180deg, rgba(8,12,34,.28) 0%, rgba(8,12,34,0) 44%, rgba(8,12,34,.72) 100%);
  }
  #p77WelcomePass .shot-tag { left:14px; bottom:11px; font-size:11px; letter-spacing:.16em; }

  /* 절취선이 가로로 눕는다 */
  #p77WelcomePass .perf {
    left:0; right:0; width:auto; top:160px; bottom:auto; height:16px;
    transform:translateY(-8px);
    background-image:radial-gradient(circle 5px at 50% 50%, var(--paper) 97%, rgba(244,239,226,0) 100%);
    background-size:16px 16px; background-repeat:repeat-x; background-position:6px 0;
  }
  #p77WelcomePass .perf::after { left:10px; right:10px; top:50%; bottom:auto; width:auto; height:0;
    border-left:0; border-top:1.5px dashed rgba(11,16,38,.22); }

  #p77WelcomePass .stub { position:relative; padding:13px 14px 13px; }
  /* 헤더를 사진 위로 올려 종이 쪽 높이를 되찾는다 */
  /* .stub 의 위쪽 바깥(= 사진 밴드 안)으로 끌어올린다.
     밴드 160px 기준 : -149px → 팝업 상단에서 11px */
  /* 사진 안에 이미 PESO77 월이 있다 — 로고와 WELCOME PASS 를 겹쳐 놓지 않는다 */
  #p77WelcomePass .pass-head {
    position:absolute; top:-149px; left:14px; right:44px; z-index:8;
    align-items:flex-start; justify-content:flex-end; gap:10px;
  }
  #p77WelcomePass .pass-head > div:first-child { display:none; }   /* 로고 + WELCOME PASS */
  #p77WelcomePass .serial { font-size:9px; padding-right:0; white-space:nowrap; color:rgba(244,239,226,.75);
    text-shadow:0 1px 6px rgba(0,0,0,.8); }
  #p77WelcomePass .serial b { color:#F4EFE2; }
  #p77WelcomePass .serial .long { display:none; }
  #p77WelcomePass .px { top:-151px; right:9px; width:26px; height:26px; z-index:9;
    border-color:rgba(244,239,226,.5); color:#F4EFE2; background:rgba(8,12,34,.35); }
  #p77WelcomePass .px:hover { background:var(--paper); color:var(--ink); }

  #p77WelcomePass .amount { margin:2px 0 2px; }
  #p77WelcomePass .amount-lbl { font-size:11.5px; letter-spacing:.2em; }
  #p77WelcomePass .amount-row { gap:10px; }
  #p77WelcomePass .figure { font-size:clamp(28px, 10.6cqi, 40px); }
  #p77WelcomePass .more { font-size:17px; }
  #p77WelcomePass .claimable { font-size:11px; margin-top:3px; line-height:1.35; }

  #p77WelcomePass .tear { margin-top:8px; }
  #p77WelcomePass .tear span { font-size:10.5px; letter-spacing:.2em; padding:0 9px; }

  #p77WelcomePass .line { grid-template-columns:20px 1fr auto; gap:0 9px; padding:7px 0 6px; align-items:center; }
  #p77WelcomePass .no { font-size:10px; }
  #p77WelcomePass .line h3 { font-size:13px; line-height:1.28; }
  #p77WelcomePass .line .when { font-size:8.5px; margin-left:5px; padding:0 4px; letter-spacing:.05em; }
  #p77WelcomePass .line p { display:none; }                /* 핵심은 금액 아래 한 줄이 받는다 */
  #p77WelcomePass .line .amt { font-size:19px; }
  #p77WelcomePass .line .amt small { margin-top:1px; font-size:9px; letter-spacing:.06em; }

  #p77WelcomePass .usable { font-size:11px; gap:6px; letter-spacing:.1em; margin-top:8px; }
  #p77WelcomePass .usable .u-lbl { letter-spacing:.18em; }

  #p77WelcomePass .act { margin-top:9px; }
  #p77WelcomePass .cta { font-size:17px; padding:12px 14px; letter-spacing:.1em; }
  #p77WelcomePass .steps { grid-template-columns:1fr; gap:2px; margin-top:8px; }
  #p77WelcomePass .stp { padding-right:0; }
  #p77WelcomePass .stp + .stp { padding-left:0; border-left:0; }
  #p77WelcomePass .stp span { font-size:10.5px; line-height:1.3; }

  #p77WelcomePass .foot { gap:7px; margin-top:8px; padding-top:8px; }
  #p77WelcomePass .pays-lbl { font-size:10.5px; letter-spacing:.12em; }
  #p77WelcomePass .chip { width:54px; height:27px; }
  #p77WelcomePass .hide-today { font-size:11.5px; }
  #p77WelcomePass .legal { font-size:10.5px; letter-spacing:.1em; }
}

/* 시트 노트 */

#p77WelcomePass .note { padding:22px 24px; border-right:1px solid rgba(216,210,196,.12); }
#p77WelcomePass .note:last-child { border-right:0; }
#p77WelcomePass .note h4 {
  margin:0 0 12px; font-family:var(--f-cond); font-size:14px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--paper);
}
#p77WelcomePass .note ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
#p77WelcomePass .note li { font-size:13px; color:#B4BAD0; line-height:1.55; position:relative; padding-left:15px; }
#p77WelcomePass .note li::before { content:""; position:absolute; left:0; top:8px; width:4px; height:4px; background:var(--gold); }
#p77WelcomePass .note li b { color:var(--paper); font-weight:700; }
#p77WelcomePass .note code {
  font-family:var(--f-mono); font-size:11.5px;
  color:#E0D9C6; background:rgba(244,239,226,.09); padding:1px 5px; border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  
}
@media (max-width:640px){
  
  
  #p77WelcomePass .note { border-right:0; border-bottom:1px solid rgba(216,210,196,.12); }
  #p77WelcomePass .note:last-child { border-bottom:0; }
}

/* ============================================================
   배포본에서만 달라지는 것 — 여기 한 곳에 모아 둔다
   ============================================================ */

/* ★ 로고를 인라인 <svg> 에서 <img> 로 바꿨다.
     시안은 같은 SVG 를 마크업에 두 번 펼쳐 놨다(문서 4KB 증가 + 고칠 때
     두 곳). 배포본은 파일 하나(pass-logo.svg)를 두 번 참조한다.
     그래서 시안의 `svg` 선택자에 `img` 를 같이 걸어 준다 — 시안 규칙을
     고치지 않고 덮는다. */
#p77WelcomePass .plate img{ width:170px; height:auto; display:block; opacity:.5; }
#p77WelcomePass .pass-head > div > img{ width:156px; height:auto; display:block; }

@media (max-width: 760px){
  #p77WelcomePass .plate img{ width:140px; }
}