/* ============ 가챠덕 /test4 — 덕 테마 전면 리디자인 ============ */
:root{
  --ink:#101a42;
  --navy:#2447c5;
  --navy-deep:#2447c5;
  --blue:#2447c5;
  --gold:#f2d12e;
  --gold-soft:#ffe066;
  --cream:#fff6d9;
  --paper:#ffffff;
  --paper-dot:#e9edf6;
  --sky:#8db4f9;
  --shell-pad:max(26px,calc((100% - 1500px)/2 + 26px));
  --line:#2447c5;
  --red:#e2483c;
  --gray:#6a7086;
  --panel-dark:#191b2e;
  --radius:16px;
  --shadow:0 6px 0 #182f86;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper);color:var(--ink);
  background-image:radial-gradient(var(--paper-dot) 1.3px,transparent 1.3px);
  background-size:22px 22px;
  font-size:14px;line-height:1.45;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}

/* ============ 헤더 ============ */
.t4-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:13px;
  padding:12px var(--shell-pad);background:#fff;
}
.t4-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.t4-logo-symbol{width:36px;height:36px;object-fit:contain;flex:0 0 auto}
.t4-logo-wordmark{height:25px;width:auto;object-fit:contain;flex:0 0 auto}
.t4-logo-wordmark--dark{display:none}
[data-theme="dark"] .t4-logo-wordmark--light{display:none}
[data-theme="dark"] .t4-logo-wordmark--dark{display:block}
.t4-search{
  flex:0 1 396px;display:flex;align-items:center;gap:8px;min-width:0;
  border:2.5px solid var(--line);border-radius:899px;padding:11px 18px;background:#fff;
}
.t4-search svg{width:19px;height:19px;flex:0 0 auto;color:var(--ink)}
.t4-search input{border:0;outline:0;flex:1;min-width:0;font:inherit;font-size:14px;background:transparent}
.t4-chips{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto}
.t4-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:2.5px solid var(--line);border-radius:13px;background:#fff;color:var(--navy);
  padding:10px 14px;font-weight:800;font-size:14px;white-space:nowrap;
  box-shadow:0 3px 0 #182f86;
}
.t4-chip--gold{color:var(--ink)}
.t4-chip--user{color:var(--ink)}
.t4-chip svg{width:17px;height:17px}
.t4-chip:active{transform:translateY(3px);box-shadow:none}
.t4-chip--gold{background:var(--gold)}
.t4-chip--navy{background:var(--navy);color:#fff}
.t4-chip--navy em{
  font-style:normal;background:var(--gold);color:var(--ink);
  border-radius:899px;min-width:22px;height:22px;display:inline-grid;place-items:center;
  font-size:13px;font-weight:900;padding:0 5px;
}
.t4-chip--user{background:var(--cream)}
.t4-burger{
  width:45px;height:45px;border:2.5px solid var(--line);border-radius:13px;
  background:var(--ink);color:var(--gold);display:grid;place-items:center;
  box-shadow:0 3px 0 #182f86;
}
.t4-burger svg{width:23px;height:23px}
.t4-menu{
  position:fixed;top:74px;right:13px;z-index:70;
  background:#fff;border:2px solid var(--line);border-radius:13px;overflow:hidden;
  box-shadow:0 6px 0 #182f86;width:228px;
}
.t4-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:11px 14px;font-weight:700;font-size:14px}
.t4-menu button svg{width:17px;height:17px;flex:0 0 auto;color:var(--navy)}
.t4-menu button:hover{background:var(--cream)}
.t4-menu-sec{padding:4px 0}
.t4-menu-sec+.t4-menu-sec{border-top:1.5px solid #eee7cf}
.t4-menu-user{border-bottom:1.5px solid #eee7cf;padding:13px 14px}
.t4-menu-user svg{width:27px;height:27px}
.t4-menu-user b{display:block;font-size:14px;font-weight:900}
.t4-menu-user small{display:block;font-size:11px;color:var(--gray);font-weight:600;margin-top:1px}
.t4-menu-info{padding:8px 14px 3px;font-size:11px;font-weight:900;color:var(--navy)}
.t4-menu-out{color:#c0392b}
.t4-menu-out svg{color:#c0392b}

/* ============ 히어로 배너 캐러셀 ============ */
.t4-hero{padding:18px var(--shell-pad) 0}
.t4-hero-viewport{
  position:relative;aspect-ratio:2172/724;overflow:hidden;
  border:2.5px solid var(--line);border-radius:var(--radius);background:#fff6d9;
  box-shadow:var(--shadow);touch-action:pan-y;
}
.t4-hero-track,.t4-hero-slide{position:absolute;inset:0}
.t4-hero-slide{
  opacity:0;visibility:hidden;transition:opacity .55s ease;pointer-events:none;
}
.t4-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.t4-hero-img{display:block;width:100%;height:100%;object-fit:cover}
.t4-hero-arrow{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:46px;height:46px;border:2px solid #fff;border-radius:50%;
  display:grid;place-items:center;background:rgba(16,26,66,.82);color:#fff;
  box-shadow:0 3px 0 rgba(16,26,66,.35);font-size:34px;font-weight:900;line-height:1;
  opacity:.88;transition:opacity .15s,transform .15s;
}
.t4-hero-arrow:hover{opacity:1}
.t4-hero-arrow:active{transform:translateY(calc(-50% + 2px));box-shadow:none}
.t4-hero-arrow--prev{left:14px}.t4-hero-arrow--next{right:14px}
.t4-hero-controls{
  position:absolute;left:50%;bottom:12px;z-index:4;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:899px;
  background:rgba(16,26,66,.78);backdrop-filter:blur(5px);
}
.t4-hero-dot{width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #fff;opacity:.65}
.t4-hero-dot.is-active{width:27px;border-radius:899px;background:var(--gold);opacity:1}
.t4-hero-toggle{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ink);font-size:10px;font-weight:900;line-height:1}
.t4-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffcf16;outline-offset:3px}

/* ============ 인기 상품 마퀴 ============ */
.t4-ps{padding:14px var(--shell-pad) 0}
.t4-ps-in{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px 16px;overflow:hidden;
}
.t4-ps-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.t4-ps-head b{font-size:16px;font-weight:900}
.t4-ps-badge{background:#e7edff;color:var(--navy);border:1.5px solid var(--navy);border-radius:899px;font-size:11px;font-weight:900;padding:3px 10px}
.t4-ps-viewport{overflow:hidden}
.t4-ps-track{
  --t4-ps-gap:12px;--t4-ps-half-gap:6px;
  display:flex;gap:var(--t4-ps-gap);width:max-content;animation:t4psroll 36s linear infinite
}
.t4-ps-viewport:hover .t4-ps-track{animation-play-state:paused}
@keyframes t4psroll{to{transform:translateX(calc(-50% - var(--t4-ps-half-gap)))}}
.t4-ps-card{
  position:relative;flex:0 0 auto;width:240px;height:140px;border-radius:13px;overflow:hidden;
  border:2px solid var(--line);cursor:pointer;background:#f2f6ff;
}
.t4-ps-card img{width:100%;height:100%;object-fit:cover}
.t4-ps-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(13,18,44,.82))}
.t4-ps-meta{position:absolute;left:10px;right:10px;bottom:9px;z-index:2}
.t4-ps-meta small{display:block;color:#c9d9f8;font-size:10px;font-weight:800}
.t4-ps-meta b{display:block;color:#fff;font-size:13px;font-weight:900;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-ps-price{position:absolute;left:10px;top:9px;z-index:2;background:var(--gold);border:1.5px solid var(--ink);border-radius:899px;font-size:11px;font-weight:900;padding:2px 9px}

/* ============ 메인 그리드 ============ */
.t4-main{
  display:grid;grid-template-columns:212px minmax(0,1fr) 288px;
  gap:18px;align-items:start;
  padding:18px var(--shell-pad) 32px;
}

/* ============ 공통 카드 ============ */
.t4-card{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.t4-side{display:grid;gap:13px;grid-template-columns:minmax(0,1fr);min-width:0}
.t4-side .t4-card{min-width:0}
.t4-side .t4-card{padding:13px}
.t4-card-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px dashed #ecd98a}
.t4-card-title{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:14px}
.t4-card-title svg{width:17px;height:17px}
.t4-card-sub{font-style:normal;font-size:11px;color:var(--gray);font-weight:700}
.t4-mini-chip{
  background:var(--gold);border:2px solid var(--line);border-radius:899px;
  font-size:11px;font-weight:900;padding:4px 11px;box-shadow:0 3px 0 #182f86;
}
.t4-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  border:2px solid var(--line);border-radius:12px;padding:10px 11px;
  font-weight:800;font-size:15px;box-shadow:0 4px 0 #182f86;
}
.t4-btn:active{transform:translateY(4px);box-shadow:none}
.t4-btn svg{width:16px;height:16px}
.t4-btn--gold{background:var(--gold)}
.t4-btn--navy{background:var(--navy);color:#fff}
.t4-note{margin-top:7px;font-size:11px;color:var(--gray);font-weight:600}

/* 보관함 요약 (이미지56: 블루 카드 반전) */
#t4-side-locker{background:var(--navy);border-color:#182f86}
#t4-side-locker .t4-card-title{color:#fff}
#t4-side-locker .t4-card-head{border-bottom-color:rgba(255,255,255,.3)}
#t4-side-locker .t4-tile{background:#182a75;border-color:#101d52}
#t4-side-locker .t4-note{color:#ffe066;font-weight:700}

.t4-locker-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.t4-tile{
  background:var(--navy);border:2px solid var(--line);border-radius:12px;
  padding:10px 11px;color:#fff;
}
.t4-tile b{display:block;font-size:23px;font-weight:900;color:var(--gold);line-height:1.1}
.t4-tile span{font-size:11px;font-weight:700;opacity:.92}

/* 친구 초대 */
.t4-invite-body{display:flex;gap:9px;align-items:center;border:1.5px solid #e2e9fb;border-radius:12px;padding:9px;margin-bottom:10px}
.t4-ticket-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--gold);border:2px solid var(--line);
}
.t4-ticket-ico svg{width:18px;height:18px}
.t4-invite-body b{display:block;font-size:14px;font-weight:900}
.t4-invite-body small{display:block;font-size:11px;color:var(--gray);font-weight:600;margin-top:2px}

/* 뽑기권 게이지 */
.t4-gauge-row{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.t4-gauge-row small{flex:0 0 auto;font-size:11px;font-weight:900;color:var(--navy)}
.t4-gauge{flex:1;height:13px;border:1.5px solid var(--line);border-radius:899px;background:#e7edff;overflow:hidden}
.t4-gauge i{display:block;height:100%;width:0;background:var(--gold);border-radius:899px;transition:width .35s ease}
.t4-gauge-row em{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:900;color:var(--ink);min-width:32px;text-align:right}

/* 최근 획득 */
.t4-empty{
  border:1.5px dashed #e2d38e;border-radius:11px;background:var(--cream);
  font-size:12px;color:var(--gray);font-weight:600;padding:13px 11px;text-align:center;
}
.t4-recent-item{display:flex;align-items:center;gap:8px;padding:6px 2px}
.t4-recent-item+.t4-recent-item{border-top:1.5px solid #e9eefc}
.t4-recent-item img{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1.5px solid var(--line);background:#fff}
.t4-recent-item .t4-r-name{flex:1;min-width:0;font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-recent-item .t4-r-tag{font-size:10px;font-weight:900;border-radius:899px;padding:2px 7px;border:1.5px solid var(--line);background:var(--cream);flex:0 0 auto}
.t4-recent-item .t4-r-tag.is-secret{background:#ff4fd8;color:#fff;border-color:#a3128d}

/* 좌측 사이드바 본문 꾸밈: 두꺼운 글씨 + 컬러 포인트 */
.t4-side .t4-card-sub{color:var(--navy);font-weight:800}
.t4-side .t4-r-name{font-weight:800;color:var(--ink)}
.t4-side .t4-recent-item .t4-r-tag{background:#e7edff;border-color:var(--navy);color:var(--navy)}
.t4-side .t4-recent-item .t4-r-tag.is-secret{background:#ff4fd8;color:#fff;border-color:#a3128d}
.t4-side .t4-lv-name{font-weight:800;color:var(--ink)}
.t4-side .t4-live-item small{font-weight:700;color:#8a93b8}
.t4-side .t4-low-item b{font-weight:800;color:var(--ink)}
.t4-side .t4-low-floor{background:var(--navy)}
.t4-side .t4-note{font-weight:700;color:#8a7a2e}
.t4-side .t4-invite-body small{font-weight:700;color:var(--navy)}

/* 실시간 획득(전체 유저 로그) */
.t4-popular{list-style:none}
.t4-live-item{display:flex;align-items:center;gap:8px;padding:7px 2px}
.t4-live-item+.t4-live-item{border-top:1.5px solid #eee7cf}
.t4-lv-nick{
  flex:0 0 auto;background:var(--navy);color:#fff;border-radius:899px;
  font-size:10px;font-weight:900;padding:3px 8px;white-space:nowrap;
}
.t4-live-item.is-secret .t4-lv-nick{background:#ff4fd8}
.t4-lv-name{flex:1;min-width:0;font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-live-item small{flex:0 0 auto;font-size:10px;color:var(--gray);font-weight:700}

/* 품절 임박 */
.t4-low-item{display:flex;align-items:center;gap:8px;padding:6px 2px}
.t4-low-item+.t4-low-item{border-top:1.5px solid #e9eefc}
.t4-low-floor{
  flex:0 0 auto;width:27px;height:27px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:900;
}
.t4-low-item b{flex:1;min-width:0;font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-low-item em{
  font-style:normal;flex:0 0 auto;background:var(--gold);border:1.5px solid var(--line);
  border-radius:899px;font-size:11px;font-weight:900;padding:2px 9px;
}

/* ============ 중앙 스테이지 ============ */
.t4-stage{padding:13px 14px 16px;overflow:hidden;min-width:0}
.t4-stage-head{display:flex;align-items:center;justify-content:center;gap:11px;padding-bottom:11px;border-bottom:1.5px solid #e6ecfb}
.t4-meme{font-size:15px;font-weight:800;color:var(--ink);text-align:center}
.t4-floor-badge{
  flex:0 0 auto;width:43px;height:43px;border-radius:12px;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;font-size:16px;font-weight:900;border:2px solid var(--line);
}
.t4-stage-titles{flex:1;min-width:0}
.t4-stage-titles h1{font-size:18px;font-weight:900;letter-spacing:-.3px}
.t4-stage-titles p{font-size:12px;color:var(--gray);font-weight:600;margin-top:1px}
.t4-pill{
  flex:0 0 auto;background:var(--navy);color:#fff;border:2px solid var(--line);border-radius:899px;
  font-size:12px;font-weight:800;padding:8px 15px;box-shadow:0 2px 0 #182f86;
}
.t4-pill:active{transform:translateY(1px);box-shadow:none}

/* ============ 상품 뷰(머신 아트 제거, 이미지 최대 노출) ============ */
.t4-machine{
  position:relative;margin:5px auto 0;max-width:640px;
  container-type:inline-size;
  user-select:none;-webkit-user-select:none;
}
/* 상품명 LED 바 */
.t4-marquee{
  display:flex;align-items:center;justify-content:center;
  background:#0b0f26;color:#ffd94e;font-weight:900;font-size:16px;letter-spacing:.1em;
  border:2.5px solid #ffd94e;border-radius:13px;padding:11px 16px;
  text-shadow:0 0 8px rgba(255,217,78,.9),0 0 20px rgba(255,180,40,.5);
  box-shadow:0 0 12px rgba(255,217,78,.55), inset 0 0 12px rgba(255,217,78,.25);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 상품 이미지: 원본 비율 그대로 최대 크기 */
.t4-tv{
  position:relative;margin-top:12px;overflow:hidden;
  border:2.5px solid var(--line);border-radius:var(--radius);
  background:#fff;box-shadow:0 6px 0 #182f86;
}
#t4-tv-img{display:block;width:100%;height:auto;background:#f4f6fb}
.t4-insert-name{display:none}
.t4-insert-meta{display:none}
.t4-tv-static{
  position:absolute;inset:0;z-index:3;
  background:repeating-linear-gradient(0deg,#e9ecf2 0 2px,#ffffff 2px 4px,#e0e4ec 4px 5px);
  animation:t4static .12s steps(2) infinite;opacity:.92;
}
@keyframes t4static{to{background-position:0 5px}}
.t4-tv-term{
  position:absolute;inset:0;z-index:4;overflow-y:auto;
  background:#0b0f26;padding:2.4cqw 2.8cqw 6cqw;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:2.1cqw;font-weight:700;
  color:#7ee787;line-height:2;text-align:left;
}
.t4-term-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:t4termin .12s steps(2) both}
@keyframes t4termin{from{opacity:0}}
.t4-term-line b{color:#ffd94e;font-weight:700}
.t4-term-line i{font-style:normal}
.t4-term-line .is-secret{color:#ff8ae2}
.t4-term-line:last-child::after{content:"▌";color:#7ee787;animation:t4blink .6s steps(1) infinite;margin-left:.4cqw}
.t4-tv-caption{
  position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:5;
  background:#101a42;color:var(--gold);font-weight:900;font-size:2.2cqw;
  letter-spacing:.35em;padding:.8cqw 2.6cqw;border-radius:899px;white-space:nowrap;
  animation:t4blink .5s steps(1) infinite;
}
@keyframes t4blink{50%{opacity:.25}}

/* 컨트롤 바: 가격/잔여 + 투입 버튼 */
.t4-ctrl{display:flex;align-items:stretch;gap:9px;margin:12px auto 0;max-width:640px}
.t4-panel{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#101a42;border:2px solid var(--line);border-radius:12px;padding:8px 10px;
  box-shadow:0 4px 0 #182f86;
}
.t4-panel small{font-size:11px;font-weight:800;color:#c9d5f5;letter-spacing:.08em}
.t4-panel b{font-size:18px;font-weight:900;line-height:1.05}
.t4-panel--price b{color:#ffe066}
.t4-panel--stock b{color:#fff}
.t4-insert-btn{
  flex:1;border:2px solid var(--line);border-radius:12px;
  font-size:14px;font-weight:900;
  display:flex;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 4px 0 #182f86;transition:transform .1s;
  padding:12px 8px;
}
.t4-insert-btn b{font-size:16px}
.t4-insert-btn:active{transform:translateY(4px);box-shadow:none}
.t4-insert--one{background:var(--navy);color:#fff}
.t4-insert--five{background:var(--gold);color:#101a42}
.t4-insert-btn:disabled{filter:grayscale(.55) brightness(.92);cursor:not-allowed}

/* 코인/캡슐 FX */
.t4-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:9}
.t4-coin{
  position:absolute;width:7.5cqw;height:7.5cqw;border-radius:50%;
  background:var(--gold);
  border:.45cqw solid #182f86;z-index:8;
  box-shadow:inset 0 0 0 1cqw #ffe066;
  transition:transform .55s cubic-bezier(.4,-.2,.6,1),opacity .1s .5s;
}
.t4-capsule-drop{
  position:absolute;width:11cqw;height:11cqw;z-index:8;border-radius:50%;
  background:linear-gradient(180deg,var(--capa,#2447c5) 0 50%,#ffffff 50% 100%);
  border:.35cqw solid #182f86;
  animation:t4drop 1.1s cubic-bezier(.45,0,.7,1) both;
}
@keyframes t4drop{
  0%{transform:translate(0,-1cqw) scale(.5) rotate(0);opacity:0}
  12%{transform:translate(-1cqw,1cqw) scale(.85);opacity:1}
  35%{transform:translate(-3cqw,7cqw) scale(1) rotate(-50deg)}
  52%{transform:translate(-7cqw,4.5cqw) rotate(-100deg)}
  68%{transform:translate(-11cqw,7cqw) rotate(-150deg)}
  82%{transform:translate(-13.5cqw,6cqw) rotate(-180deg)}
  100%{transform:translate(-16cqw,7cqw) rotate(-210deg)}
}
.t4-confetti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.t4-confetti i{
  position:absolute;top:-3vh;width:9px;height:13px;border-radius:2px;
  animation:t4conf linear both;
}
@keyframes t4conf{
  to{transform:translateY(106vh) rotate(660deg)}
}

/* ============ 결과 오버레이 — 윈도우(이미지 표시란) 안에서 캡슐 개봉 ============ */
.t4-result{
  position:absolute;inset:0;z-index:12;overflow:hidden;
  background:rgba(13,15,30,.9);
  animation:t4fadein .25s ease-out;
}
@keyframes t4fadein{from{opacity:0}}
.t4-open{position:absolute;inset:0}
.t4-open-cap{
  position:absolute;left:50%;top:40%;width:22cqw;height:22cqw;z-index:2;
  transform:translate(-50%,-50%);
  animation:t4capin .5s cubic-bezier(.25,1.5,.4,1) both,t4capshake .5s ease-in-out .55s;
}
@keyframes t4capin{from{transform:translate(-50%,-300%) scale(.5)}}
@keyframes t4capshake{
  0%,100%{transform:translate(-50%,-50%) rotate(0)}
  20%{transform:translate(-53%,-50%) rotate(-8deg)}
  40%{transform:translate(-47%,-50%) rotate(8deg)}
  60%{transform:translate(-52%,-50%) rotate(-6deg)}
  80%{transform:translate(-48%,-50%) rotate(4deg)}
}
.t4-open-cap i{position:absolute;left:0;width:100%;height:50%}
.t4-oc-top{
  top:0;border-radius:11cqw 11cqw 1.8cqw 1.8cqw;background:var(--capc,#e94f3f);
  border:.4cqw solid #fff;
  animation:t4topfly .55s cubic-bezier(.4,-.2,.7,1) 1.05s both;
}
@keyframes t4topfly{60%{opacity:1}100%{transform:translateY(-18cqw) rotate(-30deg);opacity:0}}
.t4-oc-bot{
  bottom:0;border-radius:1.8cqw 1.8cqw 11cqw 11cqw;background:#ffffff;
  border:.4cqw solid #fff;
  animation:t4botfall .55s cubic-bezier(.4,-.2,.7,1) 1.05s both;
}
@keyframes t4botfall{60%{opacity:1}100%{transform:translateY(12cqw) rotate(16deg);opacity:0}}
.t4-open-burst{
  position:absolute;left:50%;top:40%;width:8cqw;height:8cqw;margin:-4cqw 0 0 -4cqw;
  border-radius:50%;border:1.2cqw solid var(--gold);opacity:0;z-index:1;
  animation:t4burst .55s ease-out 1.05s both;
}
@keyframes t4burst{0%{transform:scale(.4);opacity:1}100%{transform:scale(5);opacity:0;border-width:.2cqw}}
.t4-open-prize{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1cqw;
  padding:2.4cqw;text-align:center;
  animation:t4prize .6s cubic-bezier(.2,1.7,.4,1) 1.2s both;
}
@keyframes t4prize{from{opacity:0;transform:scale(.2) translateY(6cqw)}to{opacity:1}}
.t4-open-prize img{
  width:16cqw;aspect-ratio:1;object-fit:cover;
  border-radius:2cqw;border:.45cqw solid #fff;background:#fff;
}
.t4-open-prize>b{color:#fff;font-size:2.5cqw;font-weight:900;line-height:1.3;max-width:92%}
.t4-result-stamp{
  position:absolute;top:7%;right:6%;z-index:4;transform:rotate(12deg);
  background:var(--gold);color:#101a42;border:.3cqw solid #fff;
  font-weight:900;font-size:2cqw;letter-spacing:.06em;
  border-radius:899px;padding:.7cqw 2cqw;box-shadow:0 .3cqw 0 #182f86;
  animation:t4stamp .4s cubic-bezier(.2,2.4,.4,1) 1.35s both;
}
@keyframes t4stamp{from{transform:rotate(12deg) scale(2.4);opacity:0}}
.t4-result-rank{
  display:inline-block;font-size:1.8cqw;font-weight:900;
  border-radius:899px;padding:.4cqw 1.8cqw;background:#7f4dff;color:#fff;
}
.t4-result-rank.is-secret{background:#ff4fd8;box-shadow:0 0 1.6cqw #ff4fd8}
.t4-result-note{display:block;color:#c9cfe6;font-size:1.6cqw;font-weight:700}
.t4-result-multi{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3cqw;
  padding:2.4cqw;text-align:center;
}
.t4-result-multi>b{color:#fff;font-size:2.2cqw;font-weight:900}
.t4-rm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw;width:100%}
.t4-rm-item{
  position:relative;background:#fff;border-radius:1.4cqw;padding:.7cqw;
  animation:t4pop .45s cubic-bezier(.2,2,.4,1) both;animation-delay:var(--d,0ms);
}
@keyframes t4pop{from{transform:scale(.3) rotate(-10deg);opacity:0}}
.t4-rm-item::after{
  content:"";position:absolute;inset:-6%;border-radius:50%;z-index:2;
  background:linear-gradient(180deg,var(--capc,#e94f3f) 0 50%,#ffffff 50% 100%);
  border:.3cqw solid #fff;
  animation:t4cover .4s cubic-bezier(.55,-.3,.65,1) both;animation-delay:calc(var(--d,0ms) + 380ms);
}
@keyframes t4cover{to{transform:scale(0) rotate(200deg);opacity:0}}
.t4-rm-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:1cqw;background:#f4f6fb}
.t4-rm-item small{display:block;font-size:1.25cqw;font-weight:800;color:#101a42;margin-top:.5cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-rm-item.is-secret{outline:.3cqw solid #ff4fd8;box-shadow:0 0 1.6cqw #ff4fd8}
.t4-result-close{
  position:absolute;right:2cqw;bottom:2cqw;z-index:5;background:#fff;color:#101a42;
  border-radius:899px;font-size:1.7cqw;font-weight:900;padding:.7cqw 2.2cqw;
}

/* ============ 우측 픽커 ============ */
.t4-picker{overflow:hidden;position:sticky;top:83px;display:flex;flex-direction:column;max-height:calc(100vh - 99px);min-width:0}
.t4-picker-head{
  background:var(--navy);color:#fff;padding:13px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  border-bottom:2px solid var(--line);
}
.t4-picker-head small{display:block;color:var(--gold);font-weight:900;font-size:10px;letter-spacing:.25em}
.t4-picker-head h2{font-size:19px;font-weight:900;margin-top:2px}
.t4-picker-badge{
  flex:0 0 auto;border-radius:899px;background:var(--gold);color:var(--ink);
  border:2px solid var(--line);display:grid;place-items:center;font-size:15px;font-weight:900;
  padding:8px 14px;box-shadow:0 3px 0 #182f86;
}
.t4-picker-body{padding:12px 13px;overflow-y:auto;position:relative}
.t4-picker-help{font-size:12px;color:var(--gray);font-weight:600;margin-bottom:10px}
.t4-floor-tabs{display:grid;grid-template-columns:auto 1fr 1fr;gap:7px;margin-bottom:11px}
.t4-maker-drop{
  position:absolute;z-index:30;min-width:176px;max-height:270px;overflow-y:auto;
  background:#fff;border:2px solid var(--line);border-radius:12px;
  box-shadow:0 6px 0 #182f86;padding:4px;
}
.t4-maker-drop button{display:block;width:100%;text-align:left;padding:8px 11px;font-weight:700;font-size:13px;border-radius:8px}
.t4-maker-drop button:hover{background:var(--cream)}
.t4-maker-drop button.is-on{background:var(--navy);color:#fff}
.t4-filter-btn{
  border:2px solid var(--line);border-radius:11px;background:#edf2ff;
  width:40px;display:grid;place-items:center;box-shadow:0 3px 0 #182f86;
}
.t4-filter-btn svg{width:17px;height:17px}
.t4-filter-btn.is-active{background:var(--navy);color:#fff}
.t4-floor-tab{
  border:2px solid var(--line);border-radius:11px;background:#edf2ff;
  box-shadow:0 3px 0 #182f86;
  padding:9px 4px;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;
}
.t4-floor-tab em{
  font-style:normal;font-size:12px;font-weight:900;opacity:.75;
  min-width:24px;height:19px;display:inline-grid;place-items:center;
  border-radius:899px;padding:0 6px;line-height:1;
}
.t4-floor-tab.is-active{background:var(--navy);color:#fff}
.t4-floor-tab.is-active em{background:var(--gold);color:var(--ink);opacity:1}
.t4-product-list{display:grid;gap:8px}
.t4-product{
  position:relative;display:flex;gap:10px;align-items:center;text-align:left;
  border:2px solid #c9d6f2;border-radius:14px;background:#fff;padding:8px;
  transition:border-color .12s, box-shadow .12s;
}
.t4-product:hover{border-color:var(--navy)}
.t4-product.is-selected{border-color:var(--blue);box-shadow:0 0 0 2px rgba(36,71,197,.25)}
.t4-product-thumb{
  flex:0 0 auto;width:74px;height:74px;border-radius:11px;overflow:hidden;
  border:1.5px solid #c9d6f2;background:#f2f6ff;
}
.t4-product-thumb img{width:100%;height:100%;object-fit:cover}
.t4-product-info{flex:1;min-width:0}
.t4-product-info .t4-pf{font-size:10px;font-weight:900;color:var(--red)}
.t4-product-info h3{
  font-size:13px;font-weight:800;line-height:1.3;margin:1px 0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.t4-product-info .t4-pm{font-size:11px;color:var(--gray);font-weight:600}
.t4-product-meta{display:flex;align-items:center;gap:7px;margin-top:5px}
.t4-product-price{
  background:var(--gold);border:1.5px solid var(--line);border-radius:899px;
  font-size:12px;font-weight:900;padding:3px 10px;
}
.t4-product-stock{font-size:11px;font-weight:900;color:var(--red)}
.t4-product-lineup{
  border:1.5px solid var(--navy);border-radius:899px;background:var(--navy);color:#fff;
  font-size:11px;font-weight:900;padding:3px 10px;cursor:pointer;box-shadow:0 2px 0 #182f86;
}
.t4-product-lineup:hover{background:#1b39a4;border-color:#1b39a4}
.t4-product .t4-hot{
  position:absolute;top:8px;right:8px;font-size:9px;font-weight:900;color:#fff;
  background:var(--red);border-radius:899px;padding:2px 6px;
}

/* ============ 푸터 ============ */
.t4-footer{
  border-top:2px solid var(--line);background:var(--navy);
  padding:20px var(--shell-pad) 22px;text-align:center;
}
.t4-footer-logo{display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;text-decoration:none}
.t4-footer-logo-symbol{width:46px;height:46px;object-fit:contain;flex:0 0 auto}
.t4-footer-logo-wordmark{height:29px;width:auto;object-fit:contain;flex:0 0 auto}
.t4-footer p{font-size:12px;color:#e8efff;font-weight:600}
.t4-footer p b{color:var(--gold)}
.t4-footer small{display:block;margin-top:5px;font-size:11px;color:#c9d9f8;font-weight:700}

/* ============ 모달 ============ */
.t4-modal-back{
  position:fixed;inset:0;z-index:100;background:rgba(16,26,66,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:6vh 14px 14px;overflow-y:auto;backdrop-filter:blur(2px);
}
.t4-modal{
  width:100%;max-width:504px;background:var(--paper);
  border:2.5px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 8px 0 #182f86;
  animation:t4modal .22s cubic-bezier(.2,1.4,.4,1);
}
.t4-modal--wide{max-width:774px}
@keyframes t4modal{from{transform:translateY(16px) scale(.97);opacity:0}}
.t4-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  background:var(--navy);color:#fff;padding:13px 16px;border-bottom:2px solid var(--line);
}
.t4-modal-head h2{font-size:15px;font-weight:900;display:flex;align-items:center;gap:7px}
.t4-modal-head h2 small{color:var(--gold);font-size:9px;letter-spacing:.22em;font-weight:900}
.t4-modal-x{
  width:29px;height:29px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;font-size:15px;font-weight:900;border:2px solid var(--line);
}
.t4-modal-body{padding:16px}
.t4-field{margin-bottom:11px}
.t4-field label{display:block;font-size:11px;font-weight:900;margin-bottom:5px}
.t4-field input,.t4-field textarea{
  width:100%;font:inherit;font-weight:600;padding:10px 12px;
  border:2px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);outline:none;
}
.t4-field input:focus,.t4-field textarea:focus{box-shadow:0 0 0 3px rgba(36,71,197,.18)}
.t4-form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.t4-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.t4-auth-tab{border:2px solid var(--line);border-radius:11px;padding:9px;font-weight:900;background:#edf2ff}
.t4-auth-tab.is-active{background:var(--navy);color:#fff}
.t4-auth-msg{
  background:#fff6d8;border:1.5px solid #e8d48a;border-radius:10px;
  font-size:11px;font-weight:700;padding:9px 11px;margin-bottom:13px;
}
.t4-error{color:var(--red);font-size:11px;font-weight:800;margin:7px 0 0;min-height:15px}

/* 충전 */
.t4-charge-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.t4-charge-opt{
  border:2px solid var(--line);border-radius:13px;background:#fff;padding:14px 9px;
  font-weight:900;font-size:14px;box-shadow:0 4px 0 #182f86;
}
.t4-charge-opt small{display:block;font-size:10px;color:var(--gray);font-weight:700;margin-top:3px}
.t4-charge-opt:hover{background:var(--cream)}
.t4-charge-note{margin-top:11px;font-size:10px;color:var(--gray);font-weight:600}

/* 초대 */
.t4-invite-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
.t4-invite-stats .t4-tile b{font-size:18px}
.t4-invite-link{display:flex;gap:7px}
.t4-invite-link input{flex:1;min-width:0;font:inherit;font-weight:700;font-size:11px;padding:9px 11px;border:2px solid var(--line);border-radius:11px;background:#fff}
.t4-invite-link button{flex:0 0 auto}
.t4-invite-copy{background:var(--gold);border:2px solid var(--line);border-radius:11px;font-weight:900;padding:0 14px;box-shadow:0 2px 0 rgba(16,26,66,.18)}

/* ============ 보관함(리뉴얼) ============ */
.t4-locker-tabs{display:flex;gap:7px;margin-bottom:13px}
.t4-locker-tab{border:2px solid var(--line);border-radius:899px;padding:6px 14px;font-weight:900;font-size:12px;background:#edf2ff}
.t4-locker-tab.is-active{background:var(--navy);color:#fff}
.t4-locker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px}
.t4-locker-item{
  position:relative;border:2px solid #c9d6f2;border-radius:14px;background:#fff;
  padding:9px;text-align:center;cursor:pointer;transition:border-color .12s;
}
.t4-locker-item:hover{border-color:var(--navy)}
.t4-locker-item.is-picked{border-color:var(--blue);box-shadow:0 0 0 2px rgba(36,71,197,.25)}
.t4-locker-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#f2f6ff;border:1.5px solid #dce5f8}
.t4-locker-item b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;font-weight:900;margin-top:7px;line-height:1.35;min-height:34px;color:var(--ink);
}
.t4-locker-item small{display:block;font-size:11px;color:var(--gray);font-weight:600;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-locker-item .t4-lk-rank{
  position:absolute;top:13px;left:13px;font-size:9px;font-weight:900;border-radius:899px;
  padding:2px 7px;background:#7f4dff;color:#fff;
}
.t4-locker-item .t4-lk-rank.is-secret{background:#ff4fd8;box-shadow:0 0 7px #ff4fd8}
.t4-locker-item .t4-lk-check{
  position:absolute;top:11px;right:11px;width:20px;height:20px;border-radius:50%;
  background:var(--blue);color:#fff;display:none;place-items:center;font-size:11px;font-weight:900;
}
.t4-locker-item.is-picked .t4-lk-check{display:grid}
.t4-locker-foot{
  position:sticky;bottom:-16px;margin:13px -16px -16px;padding:12px 16px;
  background:#fff;border-top:2px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:11px;
}
.t4-locker-foot b{font-size:12px;font-weight:900}
.t4-locker-foot .t4-btn{width:auto;padding:9px 14px}
.t4-foot-btns{display:flex;gap:8px;flex:0 0 auto}
.t4-ship-row{
  border:1.5px solid #dce5f8;border-radius:12px;background:#fff;padding:10px 12px;margin-bottom:8px;
}
.t4-ship-row .t4-sh-top{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:4px}
.t4-ship-row .t4-sh-top b{font-size:12px;font-weight:900}
.t4-ship-status{font-size:10px;font-weight:900;border-radius:899px;padding:3px 9px;border:1.5px solid var(--line);background:var(--cream)}
.t4-ship-status.is-shipped{background:var(--gold)}
.t4-ship-status.is-done{background:#c9f2cf}
.t4-ship-status.is-cancelled{background:#f2d4d0}
.t4-ship-row small{display:block;font-size:10px;color:var(--gray);font-weight:600}
.t4-ship-items{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.t4-ship-items img{width:31px;height:31px;border-radius:7px;object-fit:cover;border:1.5px solid #dce5f8}
.t4-fee-note{
  background:#fff6d8;border:1.5px solid #e8d48a;border-radius:10px;
  font-size:11px;font-weight:700;padding:8px 11px;margin-bottom:11px;
}

/* 구성(확률표) 모달 — 흰·파랑·노랑 */
.t4-prob-table{width:100%;border-collapse:collapse;font-size:13px}
.t4-prob-table th,.t4-prob-table td{border:1.5px solid #cdd9f5;padding:9px 12px;text-align:left;font-weight:700}
.t4-prob-table th{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:900}
.t4-prob-table td{background:#fff}
.t4-prob-val{
  display:inline-block;background:var(--gold);border:1.5px solid var(--line);
  border-radius:899px;padding:2px 11px;font-weight:900;color:var(--ink);
}
.t4-lineup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.t4-lineup-cell{border:1.5px solid #dce5f8;border-radius:11px;background:#fff;padding:7px;text-align:center;position:relative}
.t4-lineup-cell img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#f2f6ff;transition:transform .18s;cursor:zoom-in}
.t4-lineup-cell img:hover{transform:scale(1.4);position:relative;z-index:6;box-shadow:0 10px 26px rgba(16,26,66,.4)}
.t4-lineup-cell b{display:block;font-size:14px;font-weight:800;margin-top:8px;line-height:1.3}
.t4-lineup-cell em{font-style:normal;display:inline-block;font-size:12px;font-weight:900;border-radius:899px;padding:3px 11px;margin-top:6px;background:#e7edff;color:var(--navy)}
.t4-lineup-cell em.is-secret{background:#ff4fd8;color:#fff}

/* 토스트 */
.t4-toasts{position:fixed;left:50%;bottom:23px;transform:translateX(-50%);z-index:130;display:grid;gap:7px;width:min(378px,92vw)}
.t4-toast{
  background:var(--ink);color:#fff;border:2px solid var(--line);border-radius:13px;
  padding:11px 14px;box-shadow:0 5px 0 #182f86;
  animation:t4toast .25s cubic-bezier(.2,1.4,.4,1);
}
@keyframes t4toast{from{transform:translateY(13px);opacity:0}}
.t4-toast b{display:block;font-size:12px;font-weight:900}
.t4-toast small{display:block;font-size:11px;opacity:.85;font-weight:600;margin-top:2px}
.t4-toast.is-warning{background:#8a3d10}
.t4-toast.is-success{background:#14522c}

/* ============ 반응형 ============ */
@media (max-width:1360px){
  .t4-main{grid-template-columns:206px minmax(0,1fr) 268px}
}
@media (max-width:1180px){
  .t4-main{grid-template-columns:minmax(0,1fr)}
  .t4-side{order:3;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
  .t4-stage{order:1}
  .t4-picker{order:2;position:static;max-height:none}
  .t4-picker-body{max-height:504px}
}
@media (max-width:820px){
  .t4-header{flex-wrap:wrap;gap:7px}
  .t4-search{order:3;flex-basis:100%}
  .t4-chips{margin-left:auto;max-width:100%;gap:5px}
  .t4-chip{padding:5px 8px;font-size:11px}
  #t4-chip-invite,#t4-chip-ticket,#t4-chip-login,#t4-chip-signup,#t4-chip-user{display:none!important}
  .t4-burger{width:40px;height:40px}
  .t4-stage{padding:9px 7px 13px}
  .t4-stage-head{flex-wrap:wrap}
  .t4-pill{order:3;flex-basis:100%;text-align:center}
  .t4-modal-body{padding:13px}
}

/* ============ 이미지 파츠 기반 머신 무대 ============ */
.t4-machine{
  position:relative;margin:5px auto 0;width:min(100%,820px);max-width:none;
  aspect-ratio:1650/1408;overflow:hidden;container-type:inline-size;
  user-select:none;-webkit-user-select:none;
}
.t4-machine-scene{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}
.t4-machine-scene img{display:block;width:100%;height:100%;object-fit:contain}
.t4-machine-image-capsules{position:absolute;inset:0;z-index:4;pointer-events:none}
.t4-image-cap{
  position:absolute;width:5.8%;height:auto;opacity:0;
  filter:drop-shadow(0 .45cqw .35cqw rgba(16,26,66,.24));transform-origin:center;
}
.t4-image-cap--blue{left:28.2%;top:42%}
.t4-image-cap--green{left:66.2%;top:45%}
.t4-image-cap--yellow{left:29.2%;top:50%}
.t4-machine.is-mixing .t4-image-cap{opacity:1;animation:t4ImageCapA .34s ease-in-out infinite alternate}
.t4-machine.is-mixing .t4-image-cap--green{animation-name:t4ImageCapB;animation-duration:.28s;animation-delay:.06s}
.t4-machine.is-mixing .t4-image-cap--yellow{animation-name:t4ImageCapC;animation-duration:.31s;animation-delay:.12s}
@keyframes t4ImageCapA{from{transform:translate(0,0) rotate(-12deg)}to{transform:translate(4cqw,-9cqw) rotate(52deg)}}
@keyframes t4ImageCapB{from{transform:translate(0,0) rotate(8deg)}to{transform:translate(-5cqw,-10cqw) rotate(-58deg)}}
@keyframes t4ImageCapC{from{transform:translate(0,0) rotate(-5deg)}to{transform:translate(-2cqw,-8cqw) rotate(46deg)}}
.t4-machine-knob-part{
  position:absolute;z-index:5;left:46%;top:66.19%;width:10.3%;
  pointer-events:none;transform-origin:50% 50%;will-change:transform;
}
.t4-machine-knob-part img{display:block;width:100%;height:auto}
.t4-machine.is-mixing .t4-machine-knob-part{animation:t4ImageKnob 1.6s cubic-bezier(.45,.05,.35,1) both}
@keyframes t4ImageKnob{to{transform:rotate(1080deg)}}
.t4-machine .t4-tv{
  position:absolute;z-index:3;inset:auto;margin:0;top:18.4%;left:33.55%;width:30%;height:32.2%;
  overflow:hidden;border:0;border-radius:1.45cqw;background:#fff;box-shadow:none;
}
.t4-machine #t4-tv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.t4-machine .t4-result{
  position:absolute;z-index:12;inset:auto;top:18.4%;left:33.55%;width:30%;height:32.2%;
  overflow:hidden;border-radius:1.45cqw;background:rgba(13,15,30,.9);
}
.t4-machine .t4-panel{
  position:absolute;z-index:6;flex:none;padding:0;top:52.35%;width:14.7%;height:8.85%;gap:.1cqw;
  border:.28cqw solid #16339e;border-radius:1.25cqw;background:linear-gradient(180deg,#07172e,#061020);
  box-shadow:inset 0 0 0 .28cqw rgba(185,219,255,.28),0 .35cqw .55cqw rgba(16,26,66,.24);
  pointer-events:none;
}
.t4-machine .t4-panel--price{left:29.4%}.t4-machine .t4-panel--stock{left:52.35%}
.t4-machine .t4-panel small{font-size:1.15cqw;letter-spacing:.06em}.t4-machine .t4-panel b{font-size:2.15cqw}
.t4-machine .t4-insert-btn{
  position:absolute;z-index:8;flex:none;padding:0;top:80.7%;width:6.25%;height:7.2%;
  border-width:.28cqw;border-radius:1.05cqw;font-size:1.22cqw;box-shadow:0 .32cqw 0 #101a42;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.t4-machine .t4-insert-btn b{font-size:1.35cqw}.t4-machine .t4-insert--one{left:30.7%}.t4-machine .t4-insert--five{left:37.6%}
.t4-door-glow{
  position:absolute;z-index:7;top:85.2%;left:44.2%;width:15.4%;height:7.7%;
  border-radius:1.2cqw;opacity:0;pointer-events:none;
  box-shadow:inset 0 0 16px rgba(255,224,102,.6),0 0 20px rgba(255,224,102,.55);
}
.t4-machine.is-dispensing .t4-door-glow{opacity:1;transition:opacity .2s}
.t4-machine .t4-fx{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:visible}
.t4-machine .t4-capsule-drop{
  width:8.5cqw;height:9.2cqw;border:0;border-radius:0;
  background:url('/assets/parts/cap-blue.webp?v=20260718-4') center/contain no-repeat;
  filter:drop-shadow(0 .55cqw .45cqw rgba(16,26,66,.3));
}

@media (min-width:761px){
  .t4-machine .t4-insert-btn{min-width:44px;min-height:44px}
}

@media (max-width:760px){
  .t4-hero{padding:8px 7px 0}
  .t4-hero-viewport{border-radius:12px}
  .t4-hero-arrow{width:38px;height:38px;font-size:28px;opacity:.82}
  .t4-hero-arrow--prev{left:7px}.t4-hero-arrow--next{right:7px}
  .t4-hero-controls{bottom:6px;padding:5px 8px;gap:6px}
  .t4-hero-dot{width:9px;height:9px}.t4-hero-dot.is-active{width:22px}
  .t4-machine{width:100%;aspect-ratio:1170/828}
  .t4-machine-knob-part{left:44.87%;top:69.2%;width:11.11%}
  .t4-machine .t4-tv,.t4-machine .t4-result{top:22.75%;left:30.45%;width:36.9%;height:32.7%;border-radius:1.7cqw}
  .t4-machine .t4-panel{top:55.25%;width:16.3%;height:10%;border-radius:1.3cqw}
  .t4-machine .t4-panel--price{left:27.8%}.t4-machine .t4-panel--stock{left:53.9%}
  .t4-machine .t4-panel small{font-size:1.55cqw}.t4-machine .t4-panel b{font-size:2.7cqw}
  .t4-machine .t4-insert-btn{
    top:75%;width:14.2%;height:20%;font-size:0;color:transparent;
    background:transparent;border:0;border-radius:1.25cqw;box-shadow:none;
  }
  .t4-machine .t4-insert-btn b{font-size:0}.t4-machine .t4-insert-btn:active{transform:none}
  .t4-machine .t4-insert-btn:focus-visible{outline:.65cqw solid #ffcf16;outline-offset:.3cqw}
  .t4-machine .t4-insert--one{left:22%}.t4-machine .t4-insert--five{left:36.6%}
  .t4-door-glow{top:85%;left:40.8%;width:18.5%;height:10.5%}
  .t4-image-cap{width:6.5%}.t4-image-cap--blue{left:25%;top:39%}.t4-image-cap--green{left:68.5%;top:43%}.t4-image-cap--yellow{left:26%;top:49%}
  .t4-machine.is-mixing .t4-tv{top:10%;left:7%;width:86%;height:70%;z-index:11;border:.8cqw solid #16339e;border-radius:2.6cqw;box-shadow:0 2.5cqw 6cqw rgba(16,26,66,.38)}
  .t4-machine.is-mixing .t4-tv-term{font-size:3.4cqw;padding:4cqw;line-height:1.7}
  .t4-machine.is-mixing .t4-tv-caption{font-size:3.6cqw}
  .t4-machine .t4-result{top:9%;left:6%;width:88%;height:72%;border:.8cqw solid #16339e;border-radius:2.8cqw;box-shadow:0 2.5cqw 7cqw rgba(16,26,66,.45)}
  .t4-open-prize img{width:28cqw}.t4-open-prize>b{font-size:4.2cqw}.t4-result-stamp{font-size:3.4cqw}.t4-result-rank{font-size:3cqw}.t4-result-note{font-size:2.7cqw}
  .t4-result-multi>b{font-size:3.8cqw}.t4-rm-item small{font-size:2.1cqw}.t4-result-close{font-size:3cqw;padding:1.3cqw 3.2cqw}
}

@media (max-width:560px){
  #t4-chip-ticket,#t4-chip-invite,#t4-chip-charge,#t4-chip-locker,#t4-chip-login,#t4-chip-signup,#t4-chip-user{display:none!important}
  .t4-chips{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .t4-hero-toggle{display:none}
}

/* ============ 2026-07-18 시그니처 UI 시스템 ============ */
:root{
  --ink:#101a42;
  --navy:#0b4bcb;
  --navy-deep:#073486;
  --blue:#0b4bcb;
  --blue-soft:#eaf1ff;
  --gold:#ffc928;
  --gold-soft:#fff0a8;
  --cream:#fff8e7;
  --paper:#fff;
  --paper-dot:#e7edf7;
  --line:#d8e1f0;
  --red:#f04432;
  --red-soft:#fff0ed;
  --gray:#667085;
  --radius:18px;
  --shadow:none;
  --shadow-card:0 8px 24px rgba(9,21,108,.08),0 1px 3px rgba(9,21,108,.05);
  --shadow-stage:0 18px 48px rgba(9,21,108,.14),0 2px 6px rgba(9,21,108,.06);
  --shadow-modal:0 24px 64px rgba(10,26,66,.22);
  --focus-ring:0 0 0 3px rgba(255,201,40,.48);
}

body{
  background-color:#f8f9fc;
  background-image:
    linear-gradient(rgba(11,75,203,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,75,203,.028) 1px,transparent 1px),
    linear-gradient(180deg,#fffdf7 0,#f7f9fd 42%,#fff9eb 100%);
  background-size:34px 34px,34px 34px,100% 100%;
}
button,a,input{transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
button:focus-visible,a:focus-visible,input:focus-visible{outline:0;box-shadow:var(--focus-ring)}

/* 헤더: 기능별 역할을 명확히 구분 */
.t4-header{
  padding:10px var(--shell-pad);gap:12px;
  background:rgba(255,255,255,.94);border-bottom:1px solid rgba(216,225,240,.9);
  box-shadow:0 7px 24px rgba(9,21,108,.055);backdrop-filter:blur(14px);
}
.t4-logo{min-width:136px}
.t4-logo-symbol{width:38px;height:38px}
.t4-logo-wordmark{height:27px}
.t4-search{
  flex-basis:420px;min-height:44px;padding:9px 15px;
  border:1px solid var(--line);border-radius:12px;background:#f8faff;box-shadow:none;
}
.t4-search:focus-within{background:#fff;border-color:var(--blue);box-shadow:var(--focus-ring)}
.t4-search svg{color:var(--blue);width:18px;height:18px}
.t4-search input::placeholder{color:#98a2b3}
.t4-chips{gap:7px}
.t4-chip{
  min-height:44px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);box-shadow:none;font-size:13px;
}
.t4-chip svg{color:var(--blue)}
.t4-chip:hover{border-color:#b8c8e5;background:var(--blue-soft);transform:translateY(-1px)}
.t4-chip:active{transform:translateY(0);box-shadow:none}
#t4-chip-ticket{background:var(--blue-soft);border-color:#cfdbf4;color:var(--navy-deep)}
#t4-chip-charge{
  background:linear-gradient(180deg,#1761e5 0,var(--blue) 100%);border-color:var(--blue);
  color:#fff;box-shadow:0 5px 14px rgba(11,75,203,.2);
}
#t4-chip-charge svg{color:var(--gold)}
#t4-chip-charge:hover{background:var(--navy-deep);border-color:var(--navy-deep);box-shadow:0 7px 18px rgba(7,52,134,.22)}
#t4-chip-locker{background:#fff;color:var(--navy-deep);border-color:#bfcdea}
#t4-chip-locker svg{color:var(--navy-deep)}
#t4-chip-locker em{background:var(--gold);color:var(--ink);border:0}
#t4-chip-signup{background:var(--gold);border-color:var(--gold);color:var(--ink)}
#t4-chip-signup:hover{background:#f5ba10;border-color:#f5ba10}
.t4-burger{
  width:44px;height:44px;border:1px solid var(--navy-deep);border-radius:12px;
  background:var(--navy-deep);color:#fff;box-shadow:none;
}
.t4-burger:hover{background:var(--blue);border-color:var(--blue)}
.t4-menu{top:70px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-modal)}
.t4-menu-sec+.t4-menu-sec,.t4-menu-user{border-color:var(--line)}
.t4-menu button:hover{background:var(--blue-soft)}

/* 배너와 인기 상품: 큰 표면에만 부드러운 깊이 */
.t4-hero{padding-top:18px}
.t4-hero-viewport{border:1px solid #c7d5ed;border-radius:20px;box-shadow:var(--shadow-stage)}
.t4-hero-arrow{border:1px solid rgba(255,255,255,.7);background:rgba(7,52,134,.88);box-shadow:0 7px 20px rgba(9,21,108,.22)}
.t4-hero-arrow:active{transform:translateY(calc(-50% + 1px));box-shadow:0 3px 10px rgba(9,21,108,.2)}
.t4-hero-controls{gap:2px;padding:4px 7px;background:rgba(7,20,63,.78)}
.t4-hero-dot,.t4-hero-toggle{position:relative;width:34px;height:34px;background:transparent;border:0;opacity:1}
.t4-hero-dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:999px;background:#fff;transform:translate(-50%,-50%);opacity:.65}
.t4-hero-dot.is-active{width:34px;background:transparent}
.t4-hero-dot.is-active::before{width:22px;background:var(--gold);opacity:1}
.t4-hero-toggle{display:grid;place-items:center;color:var(--ink);font-size:10px;font-weight:900}
.t4-hero-toggle::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;z-index:-1}
.t4-ps{padding-top:16px}
.t4-ps-in{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);padding:14px 16px 16px}
.t4-ps-head{margin-bottom:10px}
.t4-ps-head b{color:var(--navy-deep);font-size:15px}
.t4-ps-badge{border:0;background:var(--blue-soft);color:var(--blue);padding:4px 10px}
.t4-ps-card{border:1px solid var(--line);border-radius:14px;box-shadow:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.t4-ps-card:hover{transform:translateY(-2px);border-color:#b9c9e7;box-shadow:0 10px 24px rgba(9,21,108,.14)}
.t4-ps-price,.t4-product-price{
  border:0;background:var(--navy-deep);color:#fff;box-shadow:none;
  font-variant-numeric:tabular-nums;
}
.t4-money-num{font-weight:900;letter-spacing:-.015em}
.t4-money-unit{margin-left:2px;color:var(--gold);font-size:.78em;font-weight:900;letter-spacing:.02em}
#t4-op .t4-money-unit{color:var(--blue);font-size:.8em}

/* 카드/사이드바: 장식보다 정보 위계가 먼저 보이게 */
.t4-main{grid-template-columns:224px minmax(0,1fr) 300px;gap:20px;padding-top:20px}
.t4-card{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card)}
.t4-side{gap:14px}
.t4-side .t4-card{position:relative;overflow:hidden;padding:14px}
.t4-side .t4-card>*:not(.t4-side-art){position:relative;z-index:1}
.t4-card-head{margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid #e8edf5}
.t4-card-title{gap:8px;color:var(--ink)}
.t4-card-title svg{
  box-sizing:border-box;width:28px;height:28px;padding:6px;border-radius:9px;
  background:var(--blue-soft);color:var(--blue);
}
.t4-card-sub{color:#7b8498!important}
.t4-mini-chip{min-height:32px;padding:5px 10px;border:0;border-radius:999px;background:var(--gold);box-shadow:none;color:var(--ink)}
.t4-btn{
  min-height:44px;border:1px solid transparent;border-radius:11px;padding:10px 12px;
  box-shadow:none;font-size:14px;
}
.t4-btn:hover{transform:translateY(-1px)}
.t4-btn:active{transform:translateY(0);box-shadow:none}
.t4-btn--navy{background:linear-gradient(180deg,#1761e5,var(--blue));border-color:var(--blue);color:#fff;box-shadow:0 6px 14px rgba(11,75,203,.18)}
.t4-btn--navy svg{color:var(--gold)}
.t4-btn--navy:hover{background:var(--navy-deep);border-color:var(--navy-deep);box-shadow:0 8px 18px rgba(7,52,134,.2)}
.t4-btn--gold{background:var(--gold);border-color:#e9b31e;color:var(--ink)}
.t4-note{color:#7d8494;font-size:10px;line-height:1.5}
#t4-side-locker{
  background:linear-gradient(145deg,#092c83 0,#0b4bcb 68%,#1761e5 100%);
  border-color:transparent;box-shadow:0 12px 28px rgba(7,52,134,.2);
}
#t4-side-locker .t4-card-head{border-bottom-color:rgba(255,255,255,.18)}
#t4-side-locker .t4-card-title svg{background:rgba(255,255,255,.14);color:var(--gold)}
#t4-side-locker .t4-tile{background:rgba(5,24,77,.36);border:1px solid rgba(255,255,255,.14);box-shadow:none}
#t4-side-locker .t4-btn{background:#fff9e8;border-color:#fff0bc;color:var(--navy-deep);box-shadow:none}
#t4-side-locker .t4-btn svg{color:var(--blue)}
#t4-side-locker .t4-note{color:#fff0a8}
.t4-locker-tiles{gap:8px}
.t4-tile{border:1px solid var(--line);border-radius:12px;box-shadow:none}
.t4-ticket-ico{border:0;background:var(--gold);color:var(--ink)}
.t4-invite-body{border:1px solid var(--line);background:#fbfcff}
.t4-gauge{height:11px;border:0;background:#e5eaf3}
.t4-gauge i{background:linear-gradient(90deg,var(--gold),#ffdf55)}
.t4-empty{border:1px solid #eadba8;background:var(--cream);color:#7b7362}
.t4-recent-item+.t4-recent-item,.t4-live-item+.t4-live-item,.t4-low-item+.t4-low-item{border-top:1px solid #edf0f5}
.t4-recent-item img{border:1px solid var(--line)}
.t4-recent-item .t4-r-tag,.t4-side .t4-recent-item .t4-r-tag{border:0;background:var(--blue-soft);color:var(--blue)}
.t4-recent-item .t4-r-tag.is-secret,.t4-side .t4-recent-item .t4-r-tag.is-secret{background:var(--red-soft);color:var(--red);border:0}
.t4-lv-nick{background:var(--blue-soft);color:var(--navy-deep)}
.t4-live-item.is-secret .t4-lv-nick{background:var(--red-soft);color:var(--red)}
.t4-low-floor{background:var(--navy-deep)}
.t4-low-item em{border:0;background:var(--gold);color:var(--ink)}
.t4-side-art{position:absolute!important;z-index:0!important;pointer-events:none;filter:saturate(.92);transition:opacity .2s ease,transform .2s ease}
.t4-side-art--hoodie{width:82px;right:-12px;bottom:-13px;opacity:.13;transform:rotate(3deg)}
.t4-side-art--tickets{width:112px;right:-30px;bottom:-24px;opacity:.1;transform:rotate(-8deg)}
.t4-side-art--capsules{width:104px;right:-28px;bottom:-28px;opacity:.12;transform:rotate(8deg)}
.t4-side .t4-card:hover .t4-side-art{opacity:.2;transform:rotate(0) scale(1.03)}

/* 중앙 머신: 페이지의 유일한 강한 카드 */
.t4-stage{
  position:sticky;top:84px;isolation:isolate;padding:14px 15px 17px;overflow:hidden;
  border-color:#c8d5ed;box-shadow:var(--shadow-stage);background:linear-gradient(180deg,#fff 0,#fffdf8 100%);
}
.t4-stage-head{position:relative;z-index:4;padding:7px 10px 12px;border-bottom:1px solid var(--line)}
.t4-meme{color:var(--navy-deep);font-size:14px;letter-spacing:-.01em}
.t4-machine-decor{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.t4-machine-decor__sign{position:absolute;left:28%;top:-.8%;width:44%;height:auto;filter:drop-shadow(0 .35cqw .3cqw rgba(9,21,108,.12))}
.t4-machine-decor__gacha-time{position:absolute;left:13%;top:27%;width:11%;height:auto;transform:rotate(-7deg);filter:drop-shadow(0 .5cqw .45cqw rgba(9,21,108,.16));opacity:.9}
.t4-machine-scene{z-index:1}
.t4-machine .t4-tv{border:0;box-shadow:none}
.t4-machine .t4-panel{border-color:#17368f;box-shadow:inset 0 0 0 .2cqw rgba(185,219,255,.26),0 .28cqw .45cqw rgba(16,26,66,.2)}
.t4-machine .t4-panel b{font-variant-numeric:tabular-nums}
.t4-machine .t4-panel--price b{color:#fff}
.t4-machine .t4-panel--price .t4-money-unit{color:var(--gold)}

/* 픽커: 선택 전/후가 한눈에 구분되는 구조 */
.t4-picker{top:84px;border-color:#c8d5ed;box-shadow:var(--shadow-card)}
.t4-picker-head{position:relative;overflow:hidden;padding:15px;background:linear-gradient(135deg,#073486 0,#0b4bcb 78%);border-bottom:0}
.t4-picker-head>div,.t4-picker-badge{position:relative;z-index:2}
.t4-picker-head small{color:var(--gold)}
.t4-picker-head h2{font-size:18px}
.t4-picker-art{position:absolute;z-index:1;width:76px;right:48px;top:-18px;opacity:.2;transform:rotate(8deg);pointer-events:none}
.t4-picker-badge{min-width:48px;min-height:44px;padding:7px 10px;border:0;background:var(--gold);box-shadow:none;color:var(--ink)}
.t4-picker-body{background:#fbfcff;padding:13px}
.t4-picker-help{margin:-1px 0 11px;padding:9px 10px;border-radius:10px;background:var(--cream);color:#746c5b;line-height:1.45}
.t4-floor-tabs{gap:7px}
.t4-filter-btn,.t4-floor-tab{
  min-height:44px;border:1px solid #d2dced;border-radius:10px;background:#f1f5fc;box-shadow:none;color:#536078;
}
.t4-filter-btn{width:44px}
.t4-filter-btn:hover,.t4-floor-tab:hover{border-color:#aebfdf;background:var(--blue-soft);color:var(--navy-deep)}
.t4-filter-btn.is-active,.t4-floor-tab.is-active{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.t4-floor-tab.is-active em{background:var(--gold);color:var(--ink)}
.t4-maker-drop{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-modal)}
.t4-product-list{gap:9px}
.t4-product{border:1px solid var(--line);border-radius:14px;background:#fff;padding:9px;box-shadow:none}
.t4-product:hover{border-color:#9eb3da;box-shadow:0 7px 18px rgba(9,21,108,.08)}
.t4-product.is-selected{border:2px solid var(--blue);background:linear-gradient(135deg,#fff 0,#eef4ff 100%);box-shadow:0 7px 20px rgba(11,75,203,.11);padding:8px}
.t4-product-thumb{border:1px solid var(--line);background:#f7f9fd}
.t4-product-info .t4-pf{color:var(--red)}
.t4-product-info .t4-pm{color:#7a8497}
.t4-product-price{padding:4px 10px}
.t4-product-lineup{border:1px solid #b9c9e7;background:#fff;color:var(--navy-deep);box-shadow:none;padding:3px 10px}
.t4-product-lineup:hover{background:var(--blue-soft);border-color:#9fb4dc;color:var(--navy-deep)}

/* 모달·양식·상태색도 같은 규칙 적용 */
.t4-footer{border-top:0;background:var(--navy-deep);padding-top:22px}
.t4-modal{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-modal)}
.t4-modal-head{border-bottom:0;background:linear-gradient(135deg,var(--navy-deep),var(--blue))}
.t4-modal-x{width:44px;height:44px;border:0;background:rgba(255,255,255,.94);color:var(--navy-deep)}
.t4-field input,.t4-field textarea,.t4-invite-link input{border:1px solid var(--line);border-radius:10px}
.t4-field input:focus,.t4-field textarea:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.t4-auth-tab,.t4-charge-opt,.t4-locker-tab{border:1px solid var(--line);background:#f4f7fc;box-shadow:none}
.t4-auth-tab.is-active,.t4-locker-tab.is-active{border-color:var(--navy-deep);background:var(--navy-deep);color:#fff}
.t4-charge-opt:hover{border-color:#aebfdf;background:var(--cream)}
.t4-invite-copy{min-height:44px;border:0;background:var(--gold);box-shadow:none}
.t4-locker-item{border:1px solid var(--line)}
.t4-locker-item.is-picked{border:2px solid var(--blue);box-shadow:0 5px 15px rgba(11,75,203,.1)}
.t4-locker-item .t4-lk-rank{background:var(--blue-soft);color:var(--navy-deep)}
.t4-locker-item .t4-lk-rank.is-secret{background:var(--red-soft);color:var(--red);box-shadow:none}
.t4-locker-foot{border-top:1px solid var(--line)}
.t4-ship-status,.t4-prob-val{border:0}
.t4-prob-table th,.t4-prob-table td{border:1px solid var(--line)}
.t4-lineup-cell{border:1px solid var(--line)}
.t4-lineup-cell em{background:var(--blue-soft);color:var(--navy-deep)}
.t4-lineup-cell em.is-secret{background:var(--red-soft);color:var(--red)}
.t4-result-rank{background:var(--blue);color:#fff}
.t4-result-rank.is-secret,.t4-rm-item.is-secret{background:var(--red);box-shadow:0 0 1.2cqw rgba(240,68,50,.45)}
.t4-rm-item.is-secret{outline-color:var(--red)}
.t4-term-line .is-secret{color:#ff8b7e}
.t4-tile b .t4-money-num{color:#fff}
.t4-tile b .t4-money-unit{color:var(--gold)}
.t4-toast{border:0;border-radius:12px;box-shadow:0 14px 36px rgba(9,21,108,.24)}

@media (max-width:1360px){
  .t4-main{grid-template-columns:216px minmax(0,1fr) 286px}
}
@media (max-width:1280px){
  #t4-chip-ticket,#t4-chip-invite,#t4-chip-signup{display:none!important}
  .t4-search{flex-basis:360px}
}
@media (max-width:1180px){
  .t4-main{grid-template-columns:minmax(0,1fr) 286px;align-items:start}
  .t4-stage{grid-column:1;grid-row:1;position:static;order:initial}
  .t4-picker{grid-column:2;grid-row:1;position:sticky;top:84px;max-height:calc(100vh - 100px);order:initial}
  .t4-picker-body{max-height:none}
  .t4-side{grid-column:1/-1;grid-row:2;order:initial;grid-template-columns:repeat(6,minmax(0,1fr))}
  .t4-side .t4-card:nth-child(-n+3){grid-column:span 2}
  .t4-side .t4-card:nth-child(n+4){grid-column:span 3}
}
@media (max-width:900px){
  .t4-main{grid-template-columns:minmax(0,1fr)}
  .t4-stage{grid-column:1;grid-row:1}
  .t4-picker{grid-column:1;grid-row:2;position:static;max-height:none}
  .t4-side{grid-column:1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr))}
  .t4-side .t4-card:nth-child(n){grid-column:auto}
  .t4-side .t4-card:last-child{grid-column:1/-1}
  .t4-product-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t4-header{flex-wrap:wrap}
  .t4-search{order:3;flex-basis:100%}
}
@media (max-width:760px){
  :root{--shell-pad:16px}
  .t4-header{padding:9px var(--shell-pad)}
  .t4-logo{min-width:auto;gap:7px}
  .t4-logo-symbol{width:34px;height:34px}
  .t4-logo-wordmark{height:24px}
  .t4-chip{min-height:40px;padding:7px 9px}
  .t4-search{min-height:42px}
  .t4-hero{padding:10px var(--shell-pad) 0}
  .t4-hero-viewport{border-radius:14px;box-shadow:0 10px 28px rgba(9,21,108,.12)}
  .t4-hero-controls{bottom:5px}
  .t4-hero-dot,.t4-hero-toggle{width:30px;height:30px}
  .t4-ps{padding:12px var(--shell-pad) 0}
  .t4-ps-in{padding:12px;box-shadow:none}
  .t4-ps-viewport{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .t4-ps-viewport::-webkit-scrollbar{display:none}
  .t4-ps-track{animation:none;gap:10px}
  .t4-ps-card{width:min(72vw,220px);height:128px;scroll-snap-align:start}
  .t4-main{padding:14px var(--shell-pad) 26px;gap:14px}
  .t4-stage{padding:9px 7px 13px;box-shadow:0 10px 28px rgba(9,21,108,.11)}
  .t4-machine-decor__gacha-time{width:12%;left:12%;top:28%}
  .t4-picker-art{width:66px}
  .t4-picker-body{max-height:none}
  .t4-modal-back{padding-top:3vh}
}
@media (max-width:560px){
  :root{--shell-pad:12px}
  .t4-logo-symbol{width:32px;height:32px}
  .t4-logo-wordmark{height:22px}
  .t4-footer-logo-symbol{width:40px;height:40px}
  .t4-footer-logo-wordmark{height:25px}
  .t4-product-list{grid-template-columns:minmax(0,1fr)}
  .t4-side{grid-template-columns:minmax(0,1fr)}
  .t4-side .t4-card:last-child{grid-column:auto}
  .t4-machine-decor__gacha-time,.t4-side-art--tickets,.t4-side-art--capsules{display:none}
  .t4-side-art--hoodie{opacity:.1}
  .t4-picker-art{opacity:.14}
  .t4-form-row,.t4-invite-stats{grid-template-columns:minmax(0,1fr)}
  .t4-locker-foot{align-items:stretch;flex-direction:column}
  .t4-foot-btns,.t4-locker-foot .t4-btn{width:100%}
  .t4-foot-btns .t4-btn{flex:1}
  .t4-picker{max-height:none}
}
@media (max-width:390px){
  .t4-hero-arrow{display:none}
  .t4-hero-controls{transform:translateX(-50%) scale(.9);transform-origin:bottom center}
  .t4-ps-card{width:min(76vw,210px)}
}

/* 실시간 획득 마퀴(머신 아래) */
.t4-stage .t4-ps{padding:0;margin-top:14px}
.t4-ps-card--live{width:210px;height:130px;text-align:left}
.t4-ps-live-nick{
  position:absolute;left:10px;top:9px;z-index:2;
  background:var(--navy);color:#fff;border-radius:899px;
  font-size:10px;font-weight:900;padding:3px 9px;
}
.t4-ps-card--live.is-secret .t4-ps-live-nick{background:#ff4fd8}
.t4-stage .t4-ps-card--live .t4-ps-meta{
  display:flex;
  left:9px;
  right:9px;
  bottom:8px;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.t4-stage .t4-ps-card--live .t4-ps-meta b{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:11px;
  font-weight:950;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap
}
.t4-stage .t4-ps-card--live .t4-ps-meta small{
  display:block!important;
  flex:0 0 auto;
  color:#dbe8ff;
  font-size:9px;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap
}

/* ============ 서비스 소개 · SEO 섹션 ============ */
.t4-seo{padding:22px var(--shell-pad) 26px}
.t4-seo-in{
  background:#eef2fd;border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 0 #182f86;padding:30px 32px 28px;
}
.t4-seo-head{text-align:center;margin-bottom:22px}
.t4-seo-badge{display:inline-block;background:var(--navy);color:#fff;border-radius:899px;font-size:12px;font-weight:900;padding:6px 14px}
.t4-seo-head h2{font-size:26px;font-weight:900;line-height:1.32;margin-top:12px;letter-spacing:-.5px}
.t4-seo-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 26px;padding:0;margin:0}
.t4-seo-list li{position:relative;padding-left:34px}
.t4-seo-list li::before{
  content:"✓";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center;
}
.t4-seo-list b{display:block;font-size:15px;font-weight:900}
.t4-seo-list p{font-size:13px;color:var(--gray);font-weight:600;margin-top:3px;line-height:1.55}
.t4-seo-cta{width:auto;padding:12px 26px;margin:22px auto 0;display:flex}
@media (max-width:900px){.t4-seo-list{grid-template-columns:1fr}}

/* ============ 다크 푸터 (뽑장 스타일) ============ */
.t4-footer{background:#0d1130;border-top:2px solid #182f86;padding:0 var(--shell-pad);text-align:left}
.t4-f-top{display:flex;gap:24px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.t4-f-top button{color:#fff;font-size:13px;font-weight:800}
.t4-f-top button:hover{color:var(--gold)}
.t4-f-grid{display:grid;grid-template-columns:1.5fr .7fr .8fr 1fr;gap:26px;padding:28px 0}
.t4-footer-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.t4-footer-logo-symbol{width:36px;height:36px}
.t4-footer-logo-wordmark{height:22px;width:auto}
.t4-f-info{margin-top:14px;font-size:12px;color:#9aa6cf;font-weight:600;line-height:1.9}
.t4-f-col b,.t4-f-cs b{display:block;color:#fff;font-size:14px;font-weight:900;margin-bottom:12px}
.t4-f-col button{display:block;color:#c2cbe9;font-size:13px;font-weight:700;padding:5px 0;text-align:left}
.t4-f-col button:hover{color:#fff}
.t4-f-cs-btns{display:flex;flex-wrap:wrap;gap:8px}
.t4-f-cs-btns button{background:#1b2350;color:#fff;border:1px solid #2c3c78;border-radius:899px;font-size:12px;font-weight:800;padding:9px 15px}
.t4-f-cs-btns button:hover{background:var(--navy)}
.t4-f-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0 22px}
.t4-f-bottom p{font-size:12px;color:#8a93b8;font-weight:600;line-height:1.7}
.t4-f-bottom small{display:block;margin-top:8px;font-size:12px;color:#6d78a6;font-weight:700}
@media (max-width:1180px){.t4-f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.t4-f-grid{grid-template-columns:1fr;gap:18px}}

/* ============ 이용방법/정책/문의 모달 ============ */
.t4-policy b{display:block;font-size:13px;font-weight:900;margin:12px 0 3px}
.t4-policy b:first-child{margin-top:0}
.t4-policy p{font-size:12px;color:var(--gray);font-weight:600;line-height:1.65}
.t4-policy-date{margin-top:12px;font-size:11px;color:#9aa3c0;font-weight:700}
.t4-guide-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.t4-guide-step{background:#eef2fd;border:1.5px solid var(--line);border-radius:12px;padding:11px 6px;text-align:center}
.t4-guide-step i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:900}
.t4-guide-step b{display:block;font-size:12px;font-weight:900;margin-top:6px}
.t4-warn{
  background:#fdecec;border:1.5px solid #e2483c;border-radius:11px;
  padding:10px 13px;font-size:12px;font-weight:900;color:#a3271b;margin:8px 0;
}
.t4-field select{
  width:100%;font:inherit;font-weight:600;padding:10px 12px;
  border:2px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);outline:none;
}
.t4-inq-list{margin-top:13px;display:grid;gap:8px}
.t4-inq-row{border:1.5px solid #dce5f8;border-radius:11px;background:#fff;padding:10px 12px}
.t4-inq-row em{font-style:normal;font-size:10px;font-weight:900;border:1.5px solid var(--line);border-radius:899px;padding:2px 8px;background:#e7edff;color:var(--navy)}
.t4-inq-row b{display:block;font-size:13px;font-weight:900;margin-top:5px}
.t4-inq-row p{font-size:12px;color:var(--gray);font-weight:600;margin-top:3px}
.t4-inq-answer{color:var(--navy);font-weight:800}
.t4-inq-empty{font-size:12px;color:var(--gray);font-weight:600;text-align:center;padding:8px}

/* ============ 2026-07-18 팝업스토어 HQ 마감 ============ */
:root{
  --ink:#172650;--navy:#0b4bcb;--navy-deep:#073486;--blue:#0b4bcb;--blue-bright:#1761e5;
  --blue-soft:#eaf1ff;--gold:#ffc928;--gold-soft:#fff0a8;--cream:#fff8e7;--paper:#fff;
  --line:#d8e1f0;--line-strong:#b8c8e5;--gray:#667085;
  --shadow-card:0 10px 28px rgba(7,52,134,.08),0 2px 5px rgba(23,38,80,.04);
  --shadow-stage:0 20px 48px rgba(7,52,134,.13),0 3px 8px rgba(23,38,80,.05);
  --shadow-modal:0 32px 90px rgba(7,25,72,.25);
  --focus-ring:0 0 0 3px rgba(255,201,40,.55),0 0 0 5px rgba(11,75,203,.24);
}
body{color:var(--ink);background-color:#fffdf7;background-image:linear-gradient(rgba(11,75,203,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(11,75,203,.025) 1px,transparent 1px),linear-gradient(180deg,#fffdf8 0,#f7f9ff 48%,#fff9e9 100%);background-size:34px 34px,34px 34px,100% 100%}

/* 헤더 */
.t4-header{position:sticky;border-bottom:0;padding-top:9px;padding-bottom:12px;background:rgba(255,255,255,.97);box-shadow:0 8px 24px rgba(7,52,134,.08)}
.t4-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--gold) 0 36%,var(--blue) 36% 100%)}
.t4-logo-symbol{width:42px;height:42px}.t4-footer-logo-symbol{width:52px;height:52px}
.t4-search{background:var(--cream);border-color:#eadcae}
.t4-search svg,.t4-chip svg,.t4-btn svg,.t4-menu svg{width:20px;height:20px;overflow:visible;color:var(--blue)}
.t4-chip{border-radius:14px;font-weight:850}
#t4-chip-charge{background:var(--gold);border-color:#e6ad00;color:var(--ink);box-shadow:0 3px 0 #d6a600,0 9px 18px rgba(201,151,0,.15)}
#t4-chip-charge svg{color:var(--navy-deep)}
#t4-chip-charge:hover{background:#f3b900;border-color:#dba900;color:var(--ink);box-shadow:0 2px 0 #c79a00,0 8px 16px rgba(201,151,0,.18)}
#t4-chip-locker{background:linear-gradient(180deg,var(--blue-bright),var(--blue));border-color:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(11,75,203,.2)}
#t4-chip-locker svg{color:var(--gold)}#t4-chip-locker em{background:var(--gold);color:var(--ink)}
.t4-burger svg{color:#fff}

/* 카드와 사이드바 */
.t4-card{border:1px solid var(--line);box-shadow:var(--shadow-card);background:#fff}
.t4-card-title svg{width:36px;height:36px;padding:6px;border:1px solid #efcf57;border-radius:11px;background:var(--gold-soft);color:var(--navy-deep)}
.t4-side .t4-card{overflow:hidden}.t4-side-art{display:none!important}
#t4-side-locker{position:relative;background:#fff;border:2px solid var(--blue);box-shadow:var(--shadow-card);padding-top:18px}
#t4-side-locker::before{content:"";position:absolute;z-index:3;left:-2px;right:-2px;top:-2px;height:7px;background:var(--gold);border-radius:18px 18px 0 0}
#t4-side-locker .t4-card-head{border-bottom-color:var(--line)}#t4-side-locker .t4-card-title{color:var(--ink)}
#t4-side-locker .t4-card-title svg{background:var(--gold-soft);color:var(--navy-deep)}
#t4-side-locker .t4-tile{background:var(--blue-soft);border:1px solid #cfdbf3;color:var(--ink)}
#t4-side-locker .t4-tile b{color:var(--blue)}#t4-side-locker .t4-tile span{color:#5d6880}
#t4-side-locker #t4-ship-quick{background:var(--gold);border:1px solid #e6ad00;color:var(--ink);box-shadow:0 3px 0 #d6a600,0 8px 16px rgba(201,151,0,.14)}
#t4-side-locker #t4-ship-quick svg{color:var(--navy-deep)}#t4-side-locker #t4-ship-quick:hover{background:#f3b900;transform:translateY(-1px)}
#t4-side-locker .t4-note{color:#6b7280}
.t4-mini-chip{background:var(--blue);color:#fff;border:0}.t4-mini-chip:hover{background:var(--navy-deep)}
.t4-btn{min-height:46px;border-radius:14px;font-weight:900}
.t4-btn--gold{background:var(--gold);border-color:#e6ad00;color:var(--ink);box-shadow:0 3px 0 #d6a600,0 9px 18px rgba(201,151,0,.14)}
.t4-btn--navy{background:linear-gradient(180deg,var(--blue-bright),var(--blue));border-color:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(11,75,203,.18)}

/* HQ 머신: 빈 shell 위에 코드 UI를 한 번만 합성 */
.t4-stage{background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-stage);padding:14px 15px 18px}
.t4-stage::before{content:none;display:none}
.t4-stage-head{padding-top:10px}.t4-meme{font-weight:900}
.t4-machine{position:relative;width:min(100%,780px);aspect-ratio:1/1;margin:4px auto 0;overflow:hidden;container-type:inline-size}
.t4-machine-scene{position:absolute;inset:0;z-index:1}.t4-machine-scene img{width:100%;height:100%;object-fit:contain;image-rendering:auto}.t4-machine-decor{display:none!important}
.t4-machine-image-capsules{z-index:7}.t4-image-cap{width:5.5%;filter:drop-shadow(0 .4cqw .35cqw rgba(7,25,72,.24))}.t4-image-cap--blue{left:29%;top:38%}.t4-image-cap--green{left:66%;top:40%}.t4-image-cap--yellow{left:31%;top:47%}
.t4-machine .t4-tv,.t4-machine .t4-result{position:absolute;inset:auto;top:15.05%;left:32.93%;width:34.13%;height:30.85%;border-radius:1.55cqw;overflow:hidden;border:0;background:#07172e;box-shadow:inset 0 0 0 .24cqw rgba(255,255,255,.2)}
.t4-machine .t4-tv{z-index:3}.t4-machine .t4-result{z-index:12;background:rgba(7,23,46,.94)}
.t4-machine .t4-tv::after{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 25%,transparent 72%,rgba(8,64,164,.1))}
.t4-machine #t4-tv-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;background:#07172e;transform:scale(1.16)}
.t4-machine .t4-panel{position:absolute;z-index:6;top:48.6%;width:15.95%;height:8.3%;padding:.45cqw;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.1cqw;border:.24cqw solid #1761e5;border-radius:1.1cqw;background:linear-gradient(180deg,#0a2348,#04152d);box-shadow:inset 0 0 0 .18cqw rgba(210,232,255,.26),0 .28cqw .45cqw rgba(7,25,72,.2);pointer-events:none}
.t4-machine .t4-panel--price{left:27.75%}.t4-machine .t4-panel--stock{left:55.42%}
.t4-machine .t4-panel small{font-size:1.05cqw;color:#dce9ff;font-weight:800;letter-spacing:.04em}.t4-machine .t4-panel b{font-size:2.05cqw;color:var(--gold);font-weight:950;font-variant-numeric:tabular-nums}.t4-machine .t4-panel--price b{color:var(--gold)}
.t4-machine .t4-insert-btn{position:absolute;z-index:8;top:77.45%;width:6.45%;height:7.55%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:.23cqw solid #08255f;border-radius:1.05cqw;color:#fff;font-size:1.12cqw;line-height:1.05;box-shadow:inset 0 .25cqw .18cqw rgba(255,255,255,.3),0 .32cqw 0 #071d52}
.t4-machine .t4-insert-btn::after{content:"";position:absolute;inset:-.45cqw -.08cqw}.t4-machine .t4-insert-btn b{font-size:1.25cqw}
.t4-machine .t4-insert--one{left:28.82%;background:linear-gradient(180deg,#1761e5,#0b4bcb)}.t4-machine .t4-insert--five{left:36.3%;background:linear-gradient(180deg,#ffda4a,var(--gold));color:var(--ink);border-color:#8b6800;box-shadow:inset 0 .25cqw .18cqw rgba(255,255,255,.45),0 .32cqw 0 #9f7700}
.t4-machine .t4-insert-btn:active{transform:translateY(.25cqw);box-shadow:inset 0 .18cqw .35cqw rgba(7,25,72,.22)}
.t4-machine-knob-part{position:absolute;z-index:7;left:44.62%;top:59.75%;width:19.25%;aspect-ratio:1;border:.3cqw solid #071d52;border-radius:50%;background:conic-gradient(from -30deg,var(--gold) 0 9deg,var(--blue) 9deg 72deg,var(--gold) 72deg 82deg,var(--blue) 82deg 152deg,var(--gold) 152deg 164deg,var(--blue) 164deg 235deg,var(--gold) 235deg 245deg,var(--blue) 245deg 315deg,var(--gold) 315deg 325deg,var(--blue) 325deg);box-shadow:inset 0 0 0 .75cqw #0b4bcb,inset 0 0 0 1.02cqw #073486,0 .45cqw .55cqw rgba(7,25,72,.28);transform-origin:50% 50%;pointer-events:none}
.t4-machine-knob-part::before{content:"";position:absolute;inset:19%;border:.28cqw solid #8f6800;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fffdf3 0 18%,#fff1b3 46%,#ffd23d 100%);box-shadow:inset 0 0 0 .25cqw #fff8d8}
.t4-machine-knob-part i{position:absolute;z-index:2;left:18%;right:18%;top:42%;height:18%;border:.24cqw solid #7b5a16;border-radius:99px;background:linear-gradient(180deg,#fffdf6,#ffe9a7);box-shadow:0 .35cqw .4cqw rgba(7,25,72,.25)}
.t4-machine.is-mixing .t4-machine-knob-part{animation:t4ImageKnob 1.6s cubic-bezier(.45,.05,.35,1) both}
.t4-door-glow{top:81.05%;left:44.65%;width:18.45%;height:9.7%;border-radius:1.45cqw;box-shadow:inset 0 0 1.5cqw rgba(255,218,70,.8),0 0 2.4cqw rgba(255,201,40,.75)}

/* 픽커 */
.t4-picker{border:1px solid var(--line-strong);box-shadow:var(--shadow-card);overflow:hidden}
.t4-picker-head{padding-top:20px;background:linear-gradient(135deg,var(--navy-deep),var(--blue))}
.t4-picker-head::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--gold)}
.t4-picker-badge{background:var(--gold);border:2px solid #fff;color:var(--ink)}
.t4-product{border:1px solid var(--line);box-shadow:none}.t4-product.is-selected{border:2px solid var(--blue);background:linear-gradient(135deg,#fff,#eef4ff);box-shadow:0 8px 20px rgba(11,75,203,.11)}
.t4-product-price{background:var(--navy-deep)}

/* 충전 및 공통 모달 */
.t4-modal{border:1px solid var(--line-strong);border-radius:28px;box-shadow:var(--shadow-modal);max-width:640px}
.t4-modal--wide{max-width:980px}.t4-modal-head{min-height:72px;padding:14px 22px;background:linear-gradient(135deg,#fff8d8,#fff0a8);color:var(--ink);border-bottom:2px solid var(--gold)}
.t4-modal-head h2{font-size:20px}.t4-modal-head h2 small{order:2;padding:5px 9px;border-radius:99px;background:var(--blue);color:#fff;letter-spacing:.12em}
.t4-modal-x{width:44px;height:44px;border:1px solid var(--line-strong);background:#fff;color:var(--navy-deep);box-shadow:none}
.t4-modal-body{padding:22px}.t4-charge-opt{min-height:112px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:none;font-size:20px}
.t4-charge-opt:hover{border-color:var(--gold);background:var(--gold-soft);transform:translateY(-2px)}
.t4-charge-opt:nth-child(3){position:relative;border:2px solid var(--blue);background:#fffdf4}.t4-charge-opt:nth-child(3)::after{content:"POPULAR";position:absolute;right:10px;top:8px;padding:3px 8px;border-radius:99px;background:var(--gold);color:var(--ink);font-size:9px;letter-spacing:.08em}

/* 서비스 소개: 팝업 매장 안내판 */
.t4-seo-in{position:relative;display:grid;grid-template-columns:.85fr 1.6fr;grid-template-rows:auto auto;gap:18px 24px;overflow:hidden;padding:46px 30px 28px;border:2px solid var(--blue);border-radius:28px;background:#fff;box-shadow:var(--shadow-stage)}
.t4-seo-in::before{content:none;display:none}
.t4-seo-head{grid-column:1;grid-row:1;margin:0;padding:22px;border:1px solid #efd77c;border-radius:20px;background:var(--cream);text-align:left}.t4-seo-badge{background:var(--gold);color:var(--ink)}.t4-seo-head h2{font-size:28px}
.t4-seo-list{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;gap:12px}.t4-seo-list li{min-height:132px;padding:18px 15px 15px 62px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-card)}
.t4-seo-list li::before{left:15px;top:17px;width:34px;height:34px;border-radius:11px;background:var(--gold-soft);color:var(--navy-deep);border:1px solid #efcf57;font-size:0}
.t4-seo-list li:nth-child(1)::before{content:"↻";font-size:22px}.t4-seo-list li:nth-child(2)::before{content:"◎";font-size:22px}.t4-seo-list li:nth-child(3)::before{content:"★";font-size:18px}.t4-seo-list li:nth-child(4)::before{content:"⇢";font-size:22px}.t4-seo-list b{font-size:15px}
.t4-seo-cta{grid-column:1;grid-row:2;align-self:start;width:100%;margin:0;background:var(--gold);border-color:#e6ad00;color:var(--ink);box-shadow:0 3px 0 #d6a600,0 9px 18px rgba(201,151,0,.14)}

/* 푸터 */
.t4-footer{position:relative;padding-top:14px;background:var(--navy-deep);border-top:0;color:#fff}.t4-footer::before{content:none;display:none}
.t4-f-top{padding-top:22px}.t4-f-col b,.t4-f-cs b{color:var(--gold)}.t4-f-col button{color:#d9e4ff}.t4-f-cs-btns button{background:transparent;border-color:#6f92df}.t4-f-cs-btns button:first-child{background:var(--gold);border-color:var(--gold);color:var(--ink)}.t4-f-info{color:#cbd9f6}.t4-f-bottom p{color:#b7c8ed}.t4-f-bottom small{color:#91a9d8}

@media (max-width:900px){
  .t4-seo-in{grid-template-columns:1fr}.t4-seo-head,.t4-seo-list,.t4-seo-cta{grid-column:1;grid-row:auto}.t4-seo-list{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .t4-logo-symbol{width:37px;height:37px}.t4-footer-logo-symbol{width:48px;height:48px}.t4-stage{padding:9px 7px 14px}.t4-machine{width:100%;aspect-ratio:1/1}
  .t4-machine .t4-tv,.t4-machine .t4-result{top:15.05%;left:32.93%;width:34.13%;height:30.85%;border-radius:1.55cqw}.t4-machine .t4-panel{top:48.6%;width:15.95%;height:8.3%;border-radius:1.1cqw}.t4-machine .t4-panel--price{left:27.75%}.t4-machine .t4-panel--stock{left:55.42%}.t4-machine .t4-panel small{font-size:1.55cqw}.t4-machine .t4-panel b{font-size:2.55cqw}
  .t4-machine .t4-insert-btn{top:77.45%;width:6.45%;height:7.55%;font-size:1.45cqw;color:#fff;border:.23cqw solid #08255f;box-shadow:inset 0 .25cqw .18cqw rgba(255,255,255,.3),0 .32cqw 0 #071d52}.t4-machine .t4-insert-btn b{font-size:1.6cqw}.t4-machine .t4-insert--one{left:28.82%}.t4-machine .t4-insert--five{left:36.3%;color:var(--ink)}
  .t4-machine .t4-insert--one::after{inset:-10px 0 -10px -20px}.t4-machine .t4-insert--five::after{inset:-10px -20px -10px 0}
  .t4-machine-knob-part{left:44.62%;top:59.75%;width:19.25%}.t4-door-glow{top:81.05%;left:44.65%;width:18.45%;height:9.7%}
  .t4-machine.is-mixing .t4-tv{top:9%;left:6%;width:88%;height:72%;z-index:11;border:.7cqw solid var(--blue);border-radius:2.8cqw;box-shadow:0 2.5cqw 7cqw rgba(7,25,72,.4)}
  .t4-machine .t4-result{top:9%;left:6%;width:88%;height:72%;border:.7cqw solid var(--blue);border-radius:2.8cqw;box-shadow:0 2.5cqw 7cqw rgba(7,25,72,.4)}
  .t4-seo-in{padding:40px 16px 18px}.t4-seo-list{grid-template-columns:1fr}.t4-seo-list li{min-height:0}.t4-seo-head h2{font-size:23px}
}
@media (max-width:560px){
  .t4-logo-symbol{width:35px;height:35px}.t4-footer-logo-symbol{width:44px;height:44px}.t4-modal-body{padding:14px}
}

/* ========================================================================
   2026-07-18 · 꾸러기 덕 메인 3열/실시간/팝업 리디자인
   ======================================================================== */

/* 3열은 중앙 스테이지 높이를 기준으로 같은 바닥선에 닿고, 긴 상품 목록만 내부 스크롤 */
@media (min-width:1181px){
  .t4-main{align-items:stretch}
  .t4-main>.t4-side{
    align-self:stretch;height:100%;min-height:0;
    grid-template-rows:auto auto auto minmax(0,1fr)
  }
  .t4-main>.t4-stage{
    position:relative;top:auto;align-self:stretch;height:100%;
    display:flex;flex-direction:column
  }
  .t4-main>.t4-picker{
    position:relative;top:auto;align-self:stretch;height:100%;min-height:0;
    max-height:none;contain:size
  }
  .t4-main>.t4-picker>.t4-picker-body{flex:1 1 0;min-height:0;overflow-y:auto}
}

/* 품절 임박 대신: 꾸러기 덕 사고일지 */
#t4-side-mission{
  display:flex;min-height:276px;flex-direction:column;
  border-color:#e5c342;background:linear-gradient(155deg,#fff 0,#fff8d8 72%,#ffef9b 100%)
}
#t4-side-mission::before{
  content:none;display:none
}
#t4-side-mission .t4-card-head{margin-top:4px;border-bottom-color:#efd978}
#t4-side-mission .t4-card-title{min-width:0;font-size:12.5px;line-height:1.2}
#t4-side-mission .t4-card-title svg{background:var(--gold-soft);color:var(--navy-deep)}
.t4-mission-log{
  position:relative;flex:1 1 auto;min-height:224px;overflow:hidden;
  margin:0 -4px -4px;border:1px solid #e7c74f;border-radius:16px;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,201,40,.22) 0 2px,transparent 3px),
    linear-gradient(180deg,#fffdf4,#fff6c9)
}
.t4-mission-duck{position:absolute;left:-7px;bottom:-3px;width:216px;max-width:none;filter:drop-shadow(0 7px 10px rgba(7,52,134,.12))}
.t4-mission-copy{
  position:absolute;z-index:2;left:9px;top:86px;width:106px;min-height:122px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left
}
.t4-mission-copy>span{padding:3px 6px;border-radius:99px;background:var(--blue);color:#fff;font-size:8px;font-weight:950;letter-spacing:.08em}
.t4-mission-copy>b{margin-top:6px;color:var(--ink);font-size:11px;line-height:1.25;letter-spacing:-.02em}
.t4-mission-copy>small{margin-top:4px;color:#776d59;font-size:8.5px;font-weight:750;line-height:1.35}
.t4-mission-progress{width:100%;height:7px;margin-top:7px;overflow:hidden;border-radius:99px;background:#dbe7ff}
.t4-mission-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--blue));transition:width .3s ease}
.t4-mission-copy>em{align-self:flex-end;margin-top:3px;color:var(--navy-deep);font-size:8px;font-style:normal;font-weight:950}
.t4-mission-log.is-done .t4-mission-copy>span{background:var(--gold);color:var(--ink)}

/* 중앙 실시간 제보함: 정보 카드와 캐릭터 톤을 연결 */
.t4-stage .t4-ps{margin-top:auto;padding-top:14px}
.t4-stage .t4-ps-in{
  position:relative;padding:12px 13px 14px;border:1px solid #dfc65a;
  background:linear-gradient(135deg,#fffdf6,#fff8d8 78%,#fff1aa);box-shadow:none
}
.t4-stage .t4-ps-in::before{
  content:"";position:absolute;inset:0 0 auto;height:5px;
  background:linear-gradient(90deg,var(--gold) 0 35%,var(--blue) 35% 100%)
}
.t4-stage .t4-ps-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;margin:1px 0 10px;align-items:center}
.t4-stage .t4-ps-head>img{width:38px;height:38px;padding:4px;border:1px solid var(--navy-deep);border-radius:50%;background:#fff;object-fit:contain}
.t4-stage .t4-ps-head>span{min-width:0}
.t4-stage .t4-ps-head small{display:block;color:var(--blue);font-size:8px;font-weight:950;letter-spacing:.15em}
.t4-stage .t4-ps-head b{display:block;margin-top:1px;color:var(--ink);font-size:14px;line-height:1.15}
.t4-stage .t4-ps-head em{padding:5px 9px;border-radius:99px;background:var(--gold);color:var(--ink);font-size:9px;font-style:normal;font-weight:950;white-space:nowrap}
.t4-stage .t4-ps-card{width:218px;height:130px;border-color:#c8d5ed;background:#fff}
.t4-stage .t4-ps-card::after{background:linear-gradient(180deg,transparent 38%,rgba(7,28,76,.88))}

/* 공통 팝업스토어 쉘 */
.t4-modal{
  width:min(680px,calc(100vw - 24px));max-width:680px;max-height:min(92vh,940px);
  overflow:auto;border:2px solid var(--navy-deep);border-radius:26px;
  background:var(--canvas);box-shadow:0 32px 90px rgba(7,25,72,.30)
}
.t4-modal--wide{width:min(980px,calc(100vw - 24px));max-width:980px}
.t4-modal-head{
  position:relative;min-height:84px;padding:25px 24px 14px;overflow:hidden;
  background:#fff;color:var(--ink);border-bottom:1px solid var(--line)
}
.t4-modal-head::before{
  content:none;display:none
}
.t4-modal-head h2{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:22px;line-height:1.1}
.t4-modal-head h2 small{order:0;padding:0;background:transparent;color:var(--blue);font-size:9px;letter-spacing:.18em}
.t4-modal-x{width:42px;height:42px;border:1px solid var(--line-strong);background:#fff;color:var(--navy-deep);box-shadow:0 4px 0 #d4def0}
.t4-modal-x:hover{background:var(--gold-soft);border-color:#e5bd2a}
.t4-modal-body{padding:22px 24px 24px;background:var(--canvas)}

/* 팝업마다 다른 꾸러기 덕 쇼윈도 */
.t4-popup-duck{
  position:relative;min-height:166px;overflow:hidden;padding:26px 205px 23px 24px;
  border-bottom:1px solid #ead57d;
  background:
    linear-gradient(90deg,rgba(237,207,87,.17) 1px,transparent 1px),
    linear-gradient(rgba(237,207,87,.13) 1px,transparent 1px),
    linear-gradient(135deg,#fff 0,#fff8d8 100%);
  background-size:46px 24px,46px 24px,100% 100%
}
.t4-popup-duck::before{content:"★";position:absolute;left:52%;top:24px;color:var(--gold);font-size:24px;transform:rotate(13deg);text-shadow:0 1px 0 var(--navy-deep)}
.t4-popup-duck::after{content:"";position:absolute;right:126px;bottom:-68px;width:190px;height:190px;border-radius:50%;background:rgba(255,201,40,.28);border:2px dashed rgba(7,52,134,.18)}
.t4-popup-duck__copy{position:relative;z-index:3;min-height:112px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.t4-popup-duck__badge{display:inline-flex;align-items:center;gap:6px;min-height:31px;padding:5px 11px;border:1px solid #e8c544;border-radius:99px;background:#fff;color:var(--navy-deep);font-size:11px;font-weight:950}
.t4-popup-duck__badge svg{width:18px;height:18px;color:var(--blue)}
.t4-popup-duck__copy strong{max-width:420px;margin-top:10px;color:var(--ink);font-size:21px;font-weight:950;line-height:1.32;letter-spacing:-.035em}
.t4-popup-duck__scribble{position:absolute;z-index:4;right:156px;top:20px;padding:4px 9px;border:2px solid var(--navy-deep);border-radius:50%;background:#fff;color:var(--navy-deep);font-size:10px;font-weight:950;transform:rotate(-8deg)}
.t4-popup-duck__art{position:absolute;z-index:2;right:18px;bottom:-20px;width:auto;height:188px;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(7,52,134,.18));pointer-events:none}
.t4-popup-duck--charge{background-size:42px 22px,42px 22px,100% 100%;background-image:linear-gradient(90deg,rgba(237,207,87,.17) 1px,transparent 1px),linear-gradient(rgba(237,207,87,.13) 1px,transparent 1px),linear-gradient(135deg,#fff 0,#fff0a8 100%)}
.t4-popup-duck--charge .t4-popup-duck__art{right:7px;height:198px}
.t4-popup-duck--invite{border-bottom-color:#b7c9ee;background-image:linear-gradient(90deg,rgba(11,75,203,.09) 1px,transparent 1px),linear-gradient(rgba(11,75,203,.07) 1px,transparent 1px),linear-gradient(135deg,#fff 0,#eaf1ff 100%)}
.t4-popup-duck--invite .t4-popup-duck__art{height:192px}
.t4-popup-duck--me{background-image:linear-gradient(90deg,rgba(11,75,203,.08) 1px,transparent 1px),linear-gradient(rgba(11,75,203,.06) 1px,transparent 1px),linear-gradient(135deg,#fff 0,#f6f9ff 72%,#fff0a8 100%)}
.t4-popup-duck--me .t4-popup-duck__art{right:28px;height:183px}

/* 팝업 내부 공통 정보 위계 */
.t4-modal-lead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.t4-modal-lead b{color:var(--navy-deep);font-size:17px}.t4-modal-lead span{color:var(--gray);font-size:11px;font-weight:700}
.t4-modal .t4-invite-stats{gap:10px;margin-bottom:14px}
.t4-modal .t4-invite-stats .t4-tile{
  position:relative;overflow:hidden;min-height:92px;padding:20px 14px 13px;
  border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink)
}
.t4-modal .t4-invite-stats .t4-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--gold) 0 42%,var(--blue) 42% 100%)}
.t4-modal .t4-invite-stats .t4-tile b,.t4-modal .t4-invite-stats .t4-tile .t4-money-num{color:var(--blue);font-size:23px}
.t4-modal .t4-invite-stats .t4-tile .t4-money-unit{color:#a77b00}
.t4-modal .t4-invite-stats .t4-tile span{display:block;margin-top:5px;color:#566178;font-size:11px;font-weight:850}
.t4-modal .t4-field label{margin-bottom:7px;color:var(--navy-deep);font-size:11px}
.t4-modal .t4-field input{min-height:50px;border:1px solid var(--line-strong);border-radius:13px;background:#fff;color:var(--ink);font-size:14px}
.t4-modal .t4-field input[readonly]{background:#f7f9fd}

/* 충전 */
.t4-charge-grid{gap:11px}
.t4-charge-opt{
  position:relative;min-height:104px;padding:19px 12px 13px;overflow:hidden;
  border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:none;color:var(--ink)
}
.t4-charge-opt::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--gold)}
.t4-charge-opt>span{display:block;font-size:21px;font-weight:950}.t4-charge-opt .t4-money-unit{color:#a77b00}
.t4-charge-opt small{margin-top:7px;color:#7b8498;font-size:10px}
.t4-charge-opt:hover{border-color:var(--blue);background:#fffdf0;transform:translateY(-2px);box-shadow:0 9px 20px rgba(7,52,134,.10)}
.t4-charge-opt:nth-child(3){border:2px solid var(--blue);background:#fffdf2}
.t4-charge-opt:nth-child(3)::after{content:"PICK";position:absolute;right:9px;top:9px;padding:3px 7px;border-radius:99px;background:var(--blue);color:#fff;font-size:8px;font-weight:950;letter-spacing:.08em}
.t4-charge-note{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;margin-top:13px;padding:13px 15px;border:1px solid #e5c44b;border-radius:15px;background:var(--gold-soft)}
.t4-charge-note>span{color:var(--navy-deep);font-size:11px;font-weight:900}.t4-charge-note>b{color:var(--blue);font-size:18px}.t4-charge-note>small{text-align:right;color:#776d59;font-size:10px;font-weight:700}

/* 친구 초대 */
.t4-invite-benefit{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center;margin:3px 0 16px;padding:15px 16px;border:1px solid #e4c44c;border-radius:16px;background:var(--cream)}
.t4-invite-benefit>b{color:var(--navy-deep);font-size:13px}.t4-invite-benefit p{color:#5f6677;font-size:11px;font-weight:700;line-height:1.55}.t4-invite-benefit strong{color:var(--blue)}
.t4-invite-code{margin-bottom:0}.t4-invite-link{gap:9px}.t4-invite-copy{min-width:112px;border:1px solid #d7a900;border-radius:13px;background:var(--gold);color:var(--ink);box-shadow:0 3px 0 #d1a000}
.t4-invite-copy:active{transform:translateY(3px);box-shadow:none}

/* 내 정보 */
.t4-profile-fields{display:grid;grid-template-columns:.75fr 1.25fr;gap:10px}.t4-profile-fields .t4-field{margin-bottom:12px}
.t4-btn--danger{min-height:48px;border:1px solid #f2a69d;background:#fff5f3;color:#b52d20;box-shadow:none}
.t4-btn--danger:hover{border-color:var(--red);background:#fff0ed}

/* 이용방법 */
.t4-guide-steps{gap:10px;margin-bottom:15px}
.t4-guide-step{
  position:relative;min-height:138px;padding:18px 10px 13px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:inset 0 6px 0 var(--gold)
}
.t4-guide-step i{position:absolute;left:9px;top:10px;width:24px;height:24px;background:var(--blue);font-size:10px}
.t4-guide-step>svg{width:32px;height:32px;color:var(--navy-deep)}
.t4-guide-step b{margin-top:8px;color:var(--ink);font-size:12px}.t4-guide-step small{margin-top:3px;color:var(--gray);font-size:9px;font-weight:700}
.t4-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t4-guide-grid article{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}
.t4-guide-grid article>span{width:42px;height:42px;display:grid;place-items:center;border:1px solid #efd163;border-radius:12px;background:var(--gold-soft);color:var(--navy-deep)}
.t4-guide-grid article svg{width:23px;height:23px}.t4-guide-grid article b{color:var(--navy-deep);font-size:13px}.t4-guide-grid article p{margin-top:4px;color:#657086;font-size:10.5px;font-weight:700;line-height:1.52}
.t4-guide-alert{margin-top:11px;padding:13px 15px;border:1px solid #f1a397;border-left:6px solid var(--red);border-radius:14px;background:#fff4f1}
.t4-guide-alert b{color:#ad2b20;font-size:12px}.t4-guide-alert p{margin-top:3px;color:#775b58;font-size:10.5px;font-weight:700;line-height:1.5}

@media (min-width:901px) and (max-width:1180px){
  .t4-side #t4-side-mission{grid-column:1/-1;min-height:255px}
  .t4-side #t4-side-mission .t4-mission-duck{left:50%;transform:translateX(-50%)}
  .t4-side #t4-side-mission .t4-mission-copy{left:calc(50% - 98px)}
}
@media (max-width:760px){
  .t4-stage .t4-ps-head{grid-template-columns:36px minmax(0,1fr) auto}.t4-stage .t4-ps-head>img{width:36px;height:36px}
  .t4-stage .t4-ps-head em{font-size:8px;padding:4px 7px}.t4-stage .t4-ps-card{width:min(69vw,210px);height:126px}
  .t4-modal{border-radius:20px}.t4-modal-head{min-height:74px;padding:23px 16px 11px}.t4-modal-head h2{font-size:19px}.t4-modal-x{width:38px;height:38px}
  .t4-popup-duck{min-height:138px;padding:18px 136px 16px 16px}.t4-popup-duck::before{display:none}.t4-popup-duck::after{right:70px;width:145px;height:145px}
  .t4-popup-duck__copy{min-height:103px}.t4-popup-duck__copy strong{margin-top:8px;font-size:17px}.t4-popup-duck__badge{min-height:27px;padding:4px 8px;font-size:9px}
  .t4-popup-duck__scribble{right:102px;top:12px;font-size:8px}.t4-popup-duck__art,.t4-popup-duck--charge .t4-popup-duck__art,.t4-popup-duck--invite .t4-popup-duck__art,.t4-popup-duck--me .t4-popup-duck__art{right:3px;height:150px}
  .t4-guide-steps{grid-template-columns:1fr 1fr}.t4-guide-step{min-height:122px}.t4-guide-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  #t4-side-mission{min-height:274px}.t4-mission-log{min-height:224px}.t4-mission-duck{left:50%;transform:translateX(-50%)}.t4-mission-copy{left:calc(50% - 98px)}
  .t4-modal-body{padding:16px}.t4-modal-lead{display:block}.t4-modal-lead span{display:block;margin-top:3px}
  .t4-popup-duck{min-height:126px;padding:15px 108px 13px 14px}.t4-popup-duck__copy{min-height:96px}.t4-popup-duck__copy strong{font-size:15px}.t4-popup-duck__scribble{display:none}
  .t4-popup-duck__art,.t4-popup-duck--charge .t4-popup-duck__art,.t4-popup-duck--invite .t4-popup-duck__art,.t4-popup-duck--me .t4-popup-duck__art{height:132px}
  .t4-modal .t4-invite-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.t4-modal .t4-invite-stats .t4-tile{min-height:82px;padding:17px 7px 9px}.t4-modal .t4-invite-stats .t4-tile b,.t4-modal .t4-invite-stats .t4-tile .t4-money-num{font-size:17px}.t4-modal .t4-invite-stats .t4-tile span{font-size:9px}
  .t4-charge-opt{min-height:92px;padding:17px 8px 10px}.t4-charge-opt>span{font-size:17px}.t4-charge-note{grid-template-columns:auto auto}.t4-charge-note>small{grid-column:1/-1;text-align:left}
  .t4-invite-benefit{grid-template-columns:1fr;gap:4px;padding:12px}.t4-invite-link{display:grid;grid-template-columns:1fr}.t4-invite-copy{min-height:46px}
  .t4-profile-fields{grid-template-columns:1fr;gap:0}
}

/* ============ 위젯 대비 정돈: white · yellow · blue ============ */
/* 회원 닉네임은 노랑/파랑을 교차해 이미지 위에서도 즉시 구분되게 한다. */
.t4-stage .t4-ps-card--live:nth-child(odd) .t4-ps-live-nick{
  border:1px solid #d6a900;background:var(--gold);color:var(--navy-deep);
  box-shadow:0 0 0 2px #fff,0 3px 8px rgba(7,52,134,.18)
}
.t4-stage .t4-ps-card--live:nth-child(even) .t4-ps-live-nick{
  border:1px solid var(--navy-deep);background:var(--navy-deep);color:var(--gold);
  box-shadow:0 0 0 2px #fff,0 3px 8px rgba(7,52,134,.2)
}

/* 사이드 위젯은 카드별로 배경/문자색의 역할을 교차한다. */
#t4-side-locker .t4-card-title svg,
#t4-side-recent .t4-card-title svg{
  border:1px solid #dfb800;background:var(--gold);color:var(--navy-deep)
}
#t4-side-invite .t4-card-title svg{
  border:1px solid var(--navy-deep);background:var(--navy-deep);color:var(--gold)
}
#t4-side-mission .t4-card-title svg{
  border:1px solid #a9bde5;background:#fff;color:var(--navy-deep)
}
#t4-side-locker .t4-mini-chip{
  border:1px solid var(--navy-deep);background:var(--navy-deep);color:var(--gold)
}
#t4-side-invite .t4-card-sub,
#t4-side-recent .t4-card-sub,
#t4-side-mission .t4-card-sub{
  display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;
  border-radius:999px;font-weight:900;line-height:1
}
#t4-side-invite .t4-card-sub{
  border:1px solid #dfb800;background:var(--gold);color:var(--navy-deep)!important
}
#t4-side-recent .t4-card-sub{
  border:1px solid var(--navy-deep);background:var(--navy-deep);color:var(--gold)!important
}
#t4-side-mission .t4-card-sub{
  border:1px solid #a9bde5;background:#fff;color:var(--navy-deep)!important
}

/* 최근 획득 목록은 연한 노랑/파랑 면을 번갈아 사용해 행 구분을 돕는다. */
#t4-recent-list .t4-recent-item{
  margin:3px 0;padding:7px 8px;border-radius:11px
}
#t4-recent-list .t4-recent-item+.t4-recent-item{border-top:0}
#t4-recent-list .t4-recent-item:nth-child(odd){background:#fff8d7}
#t4-recent-list .t4-recent-item:nth-child(even){background:#edf3ff}
#t4-recent-list .t4-recent-item:nth-child(odd) img{border-color:#dfb800}
#t4-recent-list .t4-recent-item:nth-child(even) img{border-color:#9fb4dc}
#t4-recent-list .t4-r-name{color:var(--navy-deep)}
#t4-recent-list .t4-recent-item:nth-child(odd) .t4-r-tag,
#t4-recent-list .t4-recent-item:nth-child(odd) .t4-r-tag.is-secret{
  border:1px solid var(--navy-deep);background:var(--navy-deep);color:var(--gold)
}
#t4-recent-list .t4-recent-item:nth-child(even) .t4-r-tag,
#t4-recent-list .t4-recent-item:nth-child(even) .t4-r-tag.is-secret{
  border:1px solid #dfb800;background:var(--gold);color:var(--navy-deep)
}

/* 상품 카드: 재고=노랑, 가격=파랑, 구성=흰색으로 정보 위계를 고정한다. */
.t4-product-info .t4-pf{
  display:inline-flex;align-items:center;min-height:23px;margin-bottom:3px;padding:2px 8px;
  border:1px solid #dfb800;border-radius:999px;background:var(--gold);
  color:var(--navy-deep);font-size:10.5px;line-height:1
}
.t4-product .t4-product-price{
  border:1px solid var(--navy-deep);background:var(--navy-deep);color:var(--gold)
}
.t4-product .t4-product-price .t4-money-unit{color:var(--gold)}
.t4-product .t4-product-lineup{
  border:1.5px solid #9fb4dc;background:#fff;color:var(--navy-deep);box-shadow:none
}
.t4-product .t4-product-lineup:hover{
  border-color:#dfb800;background:var(--gold);color:var(--navy-deep)
}

/* 자판기 무대만 카드 좌우 끝까지 확장한다. 헤더와 하단 위젯 여백은 유지한다. */
.t4-stage > .t4-machine{
  width:calc(100% + 30px);max-width:none;margin:4px -15px 0
}
@media (max-width:760px){
  .t4-stage > .t4-machine{
    width:calc(100% + 14px);margin:4px -7px 0
  }
}

/* =========================================================
   2026-07-26 · COLLECTION GALLERY
   검정 금속 프레임, 유리 진열 칸, 따뜻한 전시 조명
   ========================================================= */
.t4-modal.t4-modal--collection{
  width:min(1180px,calc(100vw - 28px));
  max-width:1180px;
  max-height:min(94vh,960px);
  max-height:min(94dvh,960px);
  border:1px solid #454c57;
  border-radius:22px;
  background:#0a0c10;
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.08);
}
.t4-modal--collection .t4-modal-head.t4-collection-fascia{
  grid-template-columns:minmax(0,1fr) auto auto 46px;
  min-height:84px;
  gap:20px;
  padding:12px 18px;
  border-bottom:1px solid #3a414b;
  background:linear-gradient(180deg,#232831 0,#11151b 100%);
  box-shadow:inset 0 -3px 0 #bb8a42,0 8px 22px rgba(0,0,0,.36);
}
.t4-collection-fascia-brand>img{
  width:48px;
  height:48px;
  border:1px solid #deb763;
  background:#f6c648;
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
.t4-collection-fascia-brand small{
  color:#cbb27d;
  font-size:8px;
  letter-spacing:.18em;
}
.t4-collection-fascia-brand b{
  color:#fff;
  font-size:19px;
  letter-spacing:-.03em;
}
.t4-collection-fascia-value{
  padding:7px 0 7px 20px;
  border-left:1px solid #444b55;
}
.t4-collection-fascia-value small{color:#b9bec8}
.t4-collection-fascia-value b{color:#f3d18c}
.t4-collection-fascia-light{color:#d7dbe2}
.t4-collection-fascia-light i{
  width:9px;
  height:9px;
  background:#f4c86b;
  box-shadow:0 0 12px 4px rgba(244,200,107,.42);
}
.t4-modal--collection .t4-collection-fascia .t4-modal-x{
  border-color:#575f6b;
  background:#171c23;
  color:#fff;
  box-shadow:none;
}
.t4-modal--collection .t4-collection-fascia .t4-modal-x:hover{background:#2a3039}
.t4-modal--collection .t4-collection-body{
  padding:0 15px 18px;
  background:
    radial-gradient(circle at 50% -20%,rgba(205,156,79,.12),transparent 44%),
    linear-gradient(180deg,#15191f 0,#080a0d 100%);
  box-shadow:inset 0 18px 34px rgba(0,0,0,.38);
}
.t4-modal--collection .t4-collection-filter{
  position:sticky;
  top:0;
  z-index:12;
  gap:5px;
  margin:0 -15px 14px;
  padding:11px 16px;
  border-bottom:1px solid #333a44;
  background:rgba(14,17,22,.96);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.t4-modal--collection .t4-collection-filter button{
  min-height:34px;
  padding:6px 13px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:#aeb5c0;
  font-size:10px;
}
.t4-modal--collection .t4-collection-filter button:hover{
  border-color:#454c57;
  color:#fff;
}
.t4-modal--collection .t4-collection-filter button.is-active{
  border-color:#bd9352;
  background:#2a2319;
  color:#f4d69d;
}
.t4-modal--collection .t4-collection-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin:0;
  padding:8px;
  border:7px solid #1e232a;
  border-radius:8px;
  background:#080a0d;
  box-shadow:
    inset 0 0 0 1px #3d444e,
    inset 0 0 40px rgba(0,0,0,.78),
    0 16px 34px rgba(0,0,0,.34);
}
.t4-modal--collection .t4-collection-item{
  min-height:312px;
  padding:0 8px 12px;
  overflow:visible;
  border:1px solid #414852;
  border-bottom:12px solid #1a1f26;
  border-radius:1px;
  background:
    radial-gradient(ellipse at 50% -2%,rgba(255,226,171,.34),transparent 46%),
    linear-gradient(180deg,#403629 0,#262521 38%,#14171b 79%,#0d1014 100%);
  color:#fff;
  box-shadow:
    inset 1px 0 rgba(255,255,255,.06),
    inset -1px 0 rgba(255,255,255,.03),
    inset 0 18px 28px rgba(255,211,137,.06),
    inset 0 -18px 30px rgba(0,0,0,.46);
  contain:layout style;
}
.t4-modal--collection .t4-collection-item::before{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(112deg,rgba(255,255,255,.12) 0 7%,transparent 8% 70%,rgba(255,255,255,.045) 71% 77%,transparent 78%),
    linear-gradient(90deg,rgba(255,255,255,.045),transparent 3% 97%,rgba(255,255,255,.03));
}
.t4-modal--collection .t4-collection-item::after{
  left:-2px;
  right:-2px;
  bottom:-14px;
  height:14px;
  border:0;
  border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,#363c45 0,#171b20 44%,#080a0d 100%);
  box-shadow:0 3px 7px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.12);
}
.t4-modal--collection .t4-collection-case{
  aspect-ratio:4/4.35;
  padding:28px 7px 18px;
  border:0;
  border-radius:0;
  background:
    radial-gradient(ellipse at 50% -5%,rgba(255,239,196,.8),rgba(255,211,137,.16) 33%,transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 70%);
  box-shadow:none;
}
.t4-modal--collection .t4-collection-case::before{
  left:4%;
  right:4%;
  top:-32%;
  height:94%;
  opacity:.58;
  background:linear-gradient(105deg,transparent 19%,rgba(255,232,184,.7) 50%,transparent 81%);
}
.t4-modal--collection .t4-collection-case::after{
  background:linear-gradient(116deg,rgba(255,255,255,.11) 0 8%,transparent 9% 69%,rgba(255,255,255,.045) 70% 76%,transparent 77%);
}
.t4-collection-lamp{
  left:10%;
  right:10%;
  top:0;
  width:auto;
  height:3px;
  transform:none;
  border:0;
  border-radius:0 0 5px 5px;
  background:#ffe0a0;
  box-shadow:0 0 9px 3px rgba(255,218,147,.42),0 10px 22px rgba(255,211,133,.28);
}
.t4-modal--collection .t4-collection-case img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 12px 9px rgba(0,0,0,.52));
}
.t4-modal--collection .t4-collection-case>i{
  left:20%;
  right:20%;
  bottom:8px;
  height:8px;
  border:1px solid #707782;
  background:linear-gradient(180deg,#555c66,#15191f);
  box-shadow:0 5px 10px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.25);
}
.t4-modal--collection .t4-collection-item>em{
  left:10px;
  top:10px;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:4px;
  background:rgba(12,15,19,.76);
  color:#ddd4c3;
  font-size:6.5px;
  letter-spacing:.11em;
  box-shadow:none;
  backdrop-filter:blur(5px);
}
.t4-modal--collection .t4-collection-item[data-crank="secret"]>em{
  border-color:#c99b55;
  background:#694021;
  color:#ffe3ac;
  box-shadow:0 0 14px rgba(255,185,78,.18);
}
.t4-modal--collection .t4-collection-qty{
  right:10px;
  top:10px;
  min-width:30px;
  height:22px;
  border:1px solid #c39956;
  background:rgba(15,18,22,.84);
  color:#f4d18f;
  box-shadow:none;
  backdrop-filter:blur(5px);
}
.t4-collection-plaque{
  position:relative;
  z-index:6;
  margin-top:0;
  padding:9px 9px 7px;
  border:1px solid #343b45;
  border-bottom:0;
  border-left:3px solid #b78b48;
  border-radius:2px 2px 0 0;
  background:#10141a;
}
.t4-collection-plaque b{color:#f4f5f7;font-size:10.5px}
.t4-collection-plaque small{color:#9da5b1;font-size:8px}
.t4-modal--collection .t4-collection-plaque--compact{
  padding:9px;border-left:1px solid #343b45
}
.t4-modal--collection .t4-collection-plaque--compact small{
  display:block;overflow:hidden;color:#d8dde5;font-weight:850;line-height:1.35;text-overflow:ellipsis;white-space:nowrap
}
.t4-collection-price{
  position:relative;
  z-index:6;
  padding:6px 9px;
  border:1px solid #343b45;
  border-top-color:#272d35;
  border-radius:0 0 2px 2px;
  background:#171c23;
  color:#dcb873;
}
.t4-collection-price small{color:#969eaa;font-size:7px}
.t4-collection-price strong{font-size:10.5px}
.t4-modal--collection .t4-collection-empty,
.t4-modal--collection .t4-collection-filter-empty{
  min-height:340px;
  color:#fff;
}
.t4-modal--collection .t4-collection-empty i,
.t4-modal--collection .t4-collection-filter-empty i{
  border-color:#7c663c;
  background-color:#d2a34e;
  box-shadow:0 0 32px rgba(218,172,90,.22);
}
.t4-modal--collection .t4-collection-empty p,
.t4-modal--collection .t4-collection-filter-empty p{color:#aeb5c0}

/* '가챠샵이란?' 정의는 본문 SEO 영역에 자연스럽게 읽히도록 배치한다. */
.t4-seo-definition-summary{
  margin-top:12px!important;
  padding:13px 14px;
  border-left:4px solid var(--duck-yellow);
  border-radius:0 12px 12px 0;
  background:#f5f8ff;
  color:var(--duck-blue-dark)!important;
}
.t4-seo-definition-summary strong{font-weight:1000}
html[data-theme="dark"] .t4-seo-definition-summary{
  background:#0b2048;
  color:#eef4ff!important;
}

@media (max-width:900px){
  .t4-modal--collection .t4-collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .t4-modal.t4-modal--collection{
    width:calc(100vw - 10px);
    max-height:95dvh;
    border-width:1px;
    border-radius:16px;
  }
  .t4-modal--collection .t4-modal-head.t4-collection-fascia{
    grid-template-columns:minmax(0,1fr) auto 38px;
    min-height:68px;
    gap:9px;
    padding:9px 10px;
    border-bottom-width:1px;
  }
  .t4-collection-fascia-brand>img{width:38px;height:38px}
  .t4-collection-fascia-brand small{font-size:6.5px}
  .t4-collection-fascia-brand b{font-size:14px}
  .t4-collection-fascia-value{padding-left:10px}
  .t4-collection-fascia-value small{font-size:7px}
  .t4-collection-fascia-value b{font-size:13px}
  .t4-collection-fascia-light{display:none}
  .t4-modal--collection .t4-collection-body{padding:0 8px 10px}
  .t4-modal--collection .t4-collection-filter{margin:0 -8px 8px;padding:8px}
  .t4-modal--collection .t4-collection-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    padding:5px;
    border-width:4px;
  }
  .t4-modal--collection .t4-collection-item{
    min-height:0;
    padding:0 5px 8px;
    border-width:1px;
    border-bottom-width:9px;
  }
  .t4-modal--collection .t4-collection-item::after{bottom:-11px;height:11px}
  .t4-modal--collection .t4-collection-case{aspect-ratio:4/4.45;padding:23px 4px 14px}
  .t4-modal--collection .t4-collection-item>em{left:7px;top:7px;padding:3px 5px;font-size:5.5px}
  .t4-modal--collection .t4-collection-qty{right:7px;top:7px;min-width:24px;height:19px;padding:0 5px;font-size:8px}
  .t4-collection-plaque{padding:7px 7px 6px}
  .t4-modal--collection .t4-collection-plaque--compact{padding:7px}
  .t4-collection-plaque b{font-size:9px}
  .t4-collection-plaque small{font-size:6.8px}
  .t4-collection-price{padding:5px 7px}
  .t4-collection-price small{font-size:6.5px}
  .t4-collection-price strong{font-size:9px}
}
@media (max-width:420px){
  .t4-collection-fascia-brand small{display:none}
  .t4-collection-fascia-brand b{margin-top:0;font-size:12px}
  .t4-collection-fascia-value small{display:none}
  .t4-modal--collection .t4-collection-filter button{padding-inline:10px}
}

/* 2026-07-26 · 실시간 획득판 전체를 실제 최근 상품 → 가챠덕 3로고 잭팟 릴로 통합 */
.t4-live-slot-board{
  --t4-live-cell:clamp(112px,11vw,144px)
}
.t4-stage .t4-live-slot-board .t4-ps-in,
.t4-picker .t4-live-slot-board .t4-ps-in{
  position:relative;
  overflow:hidden!important;
  padding:13px 14px 16px;
  border:3px solid var(--duck-yellow)!important;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% -30%,rgba(35,112,255,.52),transparent 52%),
    linear-gradient(145deg,#0b3478,#041b49 70%)!important;
  box-shadow:
    0 0 0 3px var(--duck-blue-dark),
    0 8px 0 var(--duck-blue-dark),
    0 16px 30px rgba(4,27,73,.22)!important;
  animation:t4-live-board-jackpot 9s ease-in-out infinite
}
.t4-live-slot-board .t4-ps-in::before{
  content:"";
  position:absolute;
  inset:5px;
  height:auto;
  border:1px solid rgba(135,197,255,.35);
  border-radius:17px;
  background:none;
  pointer-events:none
}
.t4-stage .t4-live-slot-board .t4-ps-head,
.t4-picker .t4-live-slot-board .t4-ps-head{
  position:relative;
  z-index:5;
  margin:0 1px 12px
}
.t4-stage .t4-live-slot-board .t4-ps-head>img,
.t4-picker .t4-live-slot-board .t4-ps-head>img{
  border:2px solid var(--duck-yellow);
  background:#fff
}
.t4-stage .t4-live-slot-board .t4-ps-head small,
.t4-picker .t4-live-slot-board .t4-ps-head small{color:#8bc8ff}
.t4-stage .t4-live-slot-board .t4-ps-head b,
.t4-picker .t4-live-slot-board .t4-ps-head b{color:#fff}
.t4-stage .t4-live-slot-board .t4-ps-head em,
.t4-picker .t4-live-slot-board .t4-ps-head em{
  position:relative;
  overflow:hidden;
  border:1px solid #e5ad00;
  background:var(--duck-yellow);
  color:var(--duck-blue-dark)
}
.t4-live-slot-board .t4-ps-head em::after{
  content:"JACKPOT!";
  position:absolute;
  inset:-1px;
  display:grid;
  place-items:center;
  border-radius:inherit;
  background:#fff;
  color:#e32f24;
  opacity:0;
  transform:scale(.78);
  animation:t4-live-jackpot-label 9s ease-in-out infinite
}
.t4-live-slot-board .t4-ps-viewport{
  position:relative;
  z-index:3;
  overflow:hidden!important;
  border-radius:16px
}
.t4-live-slot-board .t4-ps-track.t4-live-reels{
  --t4-ps-gap:0;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px!important;
  width:100%!important;
  animation:none!important;
  transform:none!important
}
.t4-live-reel{
  position:relative;
  height:var(--t4-live-cell);
  min-width:0;
  overflow:hidden;
  border:3px solid var(--duck-yellow);
  border-radius:15px;
  background:#fff;
  box-shadow:
    0 0 0 2px #061f55,
    inset 0 12px 18px rgba(4,27,73,.15),
    inset 0 -12px 18px rgba(4,27,73,.18)
}
.t4-live-reel::before,
.t4-live-reel::after{
  content:"";
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  height:18%;
  pointer-events:none
}
.t4-live-reel::before{top:0;background:linear-gradient(180deg,rgba(3,20,57,.32),transparent)}
.t4-live-reel::after{bottom:0;background:linear-gradient(0deg,rgba(3,20,57,.35),transparent)}
.t4-live-reel-strip{
  display:grid;
  grid-auto-rows:var(--t4-live-cell);
  width:100%;
  will-change:transform,filter,opacity
}
.t4-live-reels.is-spinning .t4-live-reel-strip{
  animation:t4-live-reel-spin 9s cubic-bezier(.2,.72,.2,1) infinite;
  animation-delay:calc(var(--t4-reel-index) * .14s)
}
.t4-live-reel-cell{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:var(--t4-live-cell);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,#fff 0 34%,rgba(255,255,255,.95) 55%,transparent 73%),
    linear-gradient(180deg,#fff,#dce7fb)
}
.t4-live-reel-cell>img{
  display:block;
  width:100%;
  height:100%;
  padding:8px 10px 24px;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 6px rgba(8,35,84,.18))
}
.t4-live-reel-cell.is-secret{
  background:
    radial-gradient(circle at 50% 42%,#fff 0 34%,rgba(255,240,252,.96) 56%,transparent 73%),
    linear-gradient(180deg,#fff,#ffd8f6)
}
.t4-live-reel-meta{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-height:26px;
  padding:5px 8px;
  background:linear-gradient(90deg,rgba(4,27,73,.96),rgba(11,75,203,.9));
  color:#fff
}
.t4-live-reel-meta b,
.t4-live-reel-meta small{
  overflow:hidden;
  font-size:9px;
  font-weight:950;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap
}
.t4-live-reel-meta small{flex:0 0 auto;color:#cfe3ff}
.t4-live-reel-cell.is-jackpot{
  background:
    radial-gradient(circle at 50% 44%,#fff 0 26%,#fff6ba 52%,#ffd429 78%,#f2a900 100%)
}
.t4-live-reel-cell.is-jackpot>img{
  width:min(76%,98px);
  height:min(76%,98px);
  padding:0;
  filter:drop-shadow(0 7px 0 rgba(7,52,134,.2))
}
.t4-live-reel-cell.is-jackpot>strong{
  position:absolute;
  left:50%;
  bottom:7px;
  z-index:5;
  transform:translateX(-50%);
  padding:3px 8px;
  border:1px solid #fff;
  border-radius:99px;
  background:var(--duck-blue);
  color:#fff;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
  white-space:nowrap
}
@keyframes t4-live-reel-spin{
  0%,5%{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
  12%{filter:blur(1.5px);transform:translate3d(0,calc(var(--t4-live-cell) * -1),0)}
  19%{filter:blur(.7px);transform:translate3d(0,calc(var(--t4-live-cell) * -2),0)}
  27%{filter:blur(1.4px);transform:translate3d(0,calc(var(--t4-live-cell) * -3),0)}
  36%{filter:blur(.6px);transform:translate3d(0,calc(var(--t4-live-cell) * -4),0)}
  46%{filter:blur(1.1px);transform:translate3d(0,calc(var(--t4-live-cell) * -5),0)}
  56%,84%{opacity:1;filter:blur(0);transform:translate3d(0,calc(var(--t4-live-cell) * -6),0)}
  89%{opacity:0;filter:blur(0);transform:translate3d(0,calc(var(--t4-live-cell) * -6),0)}
  90%{opacity:0;transform:translate3d(0,0,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes t4-live-board-jackpot{
  0%,53%,92%,100%{filter:none}
  60%,82%{filter:drop-shadow(0 0 13px rgba(255,211,31,.7)) brightness(1.08)}
}
@keyframes t4-live-jackpot-label{
  0%,52%,90%,100%{opacity:0;transform:scale(.78)}
  59%,84%{opacity:1;transform:scale(1)}
}
@media (max-width:820px){
  .t4-live-slot-board{--t4-live-cell:clamp(88px,25vw,116px)}
  .t4-picker .t4-live-slot-board{margin-top:14px}
  .t4-picker .t4-live-slot-board .t4-ps-in{padding:10px 10px 13px;border-radius:18px}
  .t4-live-slot-board .t4-ps-track.t4-live-reels{gap:7px!important}
  .t4-live-reel{border-width:2px;border-radius:11px}
  .t4-live-reel-cell>img{padding:6px 6px 22px}
  .t4-live-reel-cell.is-jackpot>img{width:min(72%,76px);height:min(72%,76px);padding:0}
  .t4-live-reel-meta{min-height:22px;padding:4px 5px}
  .t4-live-reel-meta b,.t4-live-reel-meta small{font-size:7px}
}
@media (max-width:440px){
  .t4-live-slot-board{--t4-live-cell:86px}
  .t4-stage .t4-live-slot-board .t4-ps-head,
  .t4-picker .t4-live-slot-board .t4-ps-head{grid-template-columns:32px minmax(0,1fr) auto;gap:7px}
  .t4-stage .t4-live-slot-board .t4-ps-head>img,
  .t4-picker .t4-live-slot-board .t4-ps-head>img{width:32px;height:32px}
  .t4-stage .t4-live-slot-board .t4-ps-head b,
  .t4-picker .t4-live-slot-board .t4-ps-head b{font-size:12px}
  .t4-stage .t4-live-slot-board .t4-ps-head em,
  .t4-picker .t4-live-slot-board .t4-ps-head em{padding:4px 6px;font-size:7px}
  .t4-live-slot-board .t4-ps-track.t4-live-reels{gap:5px!important}
  .t4-live-reel-cell.is-jackpot>strong{bottom:4px;padding:2px 5px;font-size:6px}
}
@media (prefers-reduced-motion:reduce){
  .t4-live-slot-board .t4-ps-in,
  .t4-live-slot-board .t4-ps-head em::after,
  .t4-live-reels.is-spinning .t4-live-reel-strip{animation-duration:18s}
}

/* 2026-07-26 · 오리배 정방향 역주행 차선 + 3초 주기 움직이는 스프레이 덕 */
.t4-broadcast-route--boat{
  right:-22%;
  left:auto;
  bottom:0;
  animation:t4-broadcast-boat-forward 20s linear -3s infinite
}
.t4-broadcast-route--boat img{transform:scaleX(1)}
.t4-cartoon-runner-route{bottom:19%}
.t4-cartoon-impact{bottom:20%}

.t4-broadcast-sprayer{
  position:absolute;
  z-index:7;
  top:29%;
  left:-27%;
  display:block;
  width:24%;
  opacity:0;
  pointer-events:none;
  transform-origin:42% 88%;
  will-change:transform,opacity;
  animation:t4-broadcast-sprayer-pass 3s ease-in-out infinite
}
.t4-broadcast-sprayer>img{
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 .55cqw .48cqw rgba(4,27,73,.32));
  transform-origin:38% 84%;
  will-change:transform;
  animation:t4-broadcast-sprayer-recoil 3s ease-in-out infinite
}
.t4-broadcast-spray-jet{
  position:absolute;
  z-index:2;
  top:38%;
  left:30%;
  display:block;
  width:165%;
  height:38%;
  opacity:0;
  transform-origin:0 50%;
  animation:t4-broadcast-spray-jet 3s ease-out infinite
}
.t4-broadcast-spray-jet::before,
.t4-broadcast-spray-jet::after{
  content:"";
  position:absolute;
  left:0;
  transform-origin:0 50%
}
.t4-broadcast-spray-jet::before{
  top:29%;
  width:82%;
  height:42%;
  clip-path:polygon(0 42%,100% 0,86% 50%,100% 100%,0 58%);
  background:linear-gradient(90deg,rgba(255,48,39,.92),rgba(240,68,50,.62) 45%,rgba(255,91,60,0));
  filter:blur(.08cqw)
}
.t4-broadcast-spray-jet::after{
  top:45%;
  width:100%;
  height:12%;
  border-radius:999px;
  background:linear-gradient(90deg,#f04432,rgba(255,210,31,.72) 48%,transparent);
  box-shadow:0 0 .7cqw rgba(240,68,50,.55)
}
.t4-broadcast-spray-jet>i{
  --t4-spray-dx:7cqw;
  --t4-spray-dy:-1cqw;
  position:absolute;
  left:11%;
  top:48%;
  display:block;
  width:clamp(3px,.75cqw,9px);
  aspect-ratio:1.7;
  border:.09cqw solid #073486;
  border-radius:58% 42% 62% 38%;
  background:#f04432;
  opacity:0;
  will-change:transform,opacity;
  animation:t4-broadcast-spray-drop 3s linear infinite
}
.t4-broadcast-spray-jet>i:nth-child(1){--t4-spray-dx:7cqw;--t4-spray-dy:-2.8cqw;animation-delay:.02s}
.t4-broadcast-spray-jet>i:nth-child(2){--t4-spray-dx:10cqw;--t4-spray-dy:1.9cqw;animation-delay:.07s}
.t4-broadcast-spray-jet>i:nth-child(3){--t4-spray-dx:13cqw;--t4-spray-dy:-1.1cqw;animation-delay:.11s}
.t4-broadcast-spray-jet>i:nth-child(4){--t4-spray-dx:16cqw;--t4-spray-dy:3.2cqw;animation-delay:.15s}
.t4-broadcast-spray-jet>i:nth-child(5){--t4-spray-dx:19cqw;--t4-spray-dy:-3.6cqw;animation-delay:.19s}
.t4-broadcast-spray-jet>i:nth-child(6){--t4-spray-dx:22cqw;--t4-spray-dy:1.1cqw;animation-delay:.23s}
.t4-broadcast-spray-jet>i:nth-child(7){--t4-spray-dx:25cqw;--t4-spray-dy:-2.2cqw;animation-delay:.27s}
.t4-broadcast-spray-jet>i:nth-child(8){--t4-spray-dx:28cqw;--t4-spray-dy:2.8cqw;animation-delay:.31s}

.t4-broadcast-spray-hit{
  position:absolute;
  z-index:6;
  top:43%;
  left:43%;
  display:block;
  width:8%;
  aspect-ratio:1.25;
  opacity:0;
  pointer-events:none;
  transform:scale(.1) rotate(-16deg);
  animation:t4-broadcast-spray-hit 3s ease-out infinite
}
.t4-broadcast-spray-hit::before,
.t4-broadcast-spray-hit::after,
.t4-broadcast-spray-hit>i{
  position:absolute;
  display:block;
  background:#f04432;
  content:""
}
.t4-broadcast-spray-hit::before{
  inset:14% 8%;
  clip-path:polygon(0 42%,22% 31%,10% 3%,37% 19%,51% 0,61% 23%,91% 9%,80% 38%,100% 52%,77% 65%,88% 96%,57% 79%,43% 100%,34% 76%,4% 91%,18% 62%);
  filter:drop-shadow(0 .18cqw 0 #073486)
}
.t4-broadcast-spray-hit::after{
  right:-18%;
  bottom:0;
  width:18%;
  aspect-ratio:1;
  border:1px solid #073486;
  border-radius:50% 58% 46% 60%;
  transform:rotate(28deg)
}
.t4-broadcast-spray-hit>i{
  left:9%;
  bottom:-17%;
  width:12%;
  aspect-ratio:.65;
  border:1px solid #073486;
  border-radius:48% 52% 66% 34%;
  transform:rotate(8deg)
}

@keyframes t4-broadcast-boat-forward{
  0%{transform:translate3d(0,0,0) rotate(-1deg)}
  25%{transform:translate3d(-165%,.8cqw,0) rotate(1deg)}
  50%{transform:translate3d(-330%,0,0) rotate(-1deg)}
  75%{transform:translate3d(-495%,.8cqw,0) rotate(1deg)}
  100%{transform:translate3d(-660%,0,0) rotate(-1deg)}
}
@keyframes t4-broadcast-sprayer-pass{
  0%,7%{opacity:0;transform:translate3d(0,4%,0) scale(.9) rotate(-4deg)}
  16%{opacity:1;transform:translate3d(112%,0,0) scale(1.03) rotate(1deg)}
  24%,67%{opacity:1;transform:translate3d(112%,0,0) scale(1) rotate(0)}
  76%{opacity:.9;transform:translate3d(112%,-2%,0) scale(.96) rotate(-2deg)}
  88%,100%{opacity:0;transform:translate3d(-18%,4%,0) scale(.88) rotate(-6deg)}
}
@keyframes t4-broadcast-sprayer-recoil{
  0%,19%,72%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  27%,39%,51%,63%{transform:translate3d(-2.4%,1%,0) rotate(-2.2deg) scale(1.025)}
  33%,45%,57%,69%{transform:translate3d(1.4%,-.7%,0) rotate(1.5deg) scale(.99)}
}
@keyframes t4-broadcast-spray-jet{
  0%,21%,72%,100%{opacity:0;transform:scaleX(.08) scaleY(.55)}
  27%{opacity:.96;transform:scaleX(1.08) scaleY(1.06)}
  34%,65%{opacity:.84;transform:scaleX(1) scaleY(.94)}
  69%{opacity:.35;transform:scaleX(.78) scaleY(.7)}
}
@keyframes t4-broadcast-spray-drop{
  0%,25%{opacity:0;transform:translate3d(0,0,0) scale(.25) rotate(0)}
  31%{opacity:.95}
  62%{opacity:.76}
  70%,100%{opacity:0;transform:translate3d(var(--t4-spray-dx),var(--t4-spray-dy),0) scale(1.05) rotate(230deg)}
}
@keyframes t4-broadcast-spray-hit{
  0%,43%{opacity:0;transform:scale(.1) rotate(-16deg)}
  49%{opacity:1;transform:scale(1.2) rotate(-7deg)}
  55%,68%{opacity:.9;transform:scale(1) rotate(-7deg)}
  80%,100%{opacity:0;transform:scale(.86) rotate(-7deg)}
}

@media (max-width:760px){
  .t4-broadcast-route--boat{right:-25%;left:auto;bottom:0;width:22%;animation-duration:18s}
  .t4-cartoon-runner-route{bottom:20%}
  .t4-cartoon-impact{bottom:21%}
  .t4-broadcast-sprayer{top:30%;left:-31%;width:28%}
  .t4-broadcast-spray-hit{top:44%;left:45%;width:9%}
}
@media (prefers-reduced-motion:reduce){
  .t4-broadcast-sprayer,
  .t4-broadcast-sprayer>img,
  .t4-broadcast-spray-jet,
  .t4-broadcast-spray-jet>i,
  .t4-broadcast-spray-hit{animation-duration:6s!important}
}

/* Crawlable desktop navigation links */
a.t4-chip{text-decoration:none}
.t4-f-top a{
  color:#fff;font-size:13px;font-weight:800;text-decoration:none
}
.t4-f-top a:hover{color:var(--gold)}
.t4-f-col a{
  display:block;padding:5px 0;color:#d9e4ff;font-size:13px;font-weight:700;text-align:left;text-decoration:none
}
.t4-f-col a:hover{color:#fff}
.t4-f-cs-btns a{
  padding:9px 15px;border:1px solid #2c3c78;border-radius:899px;background:#1b2350;
  color:#fff;font-size:12px;font-weight:800;text-decoration:none
}
.t4-f-cs-btns a:hover{background:var(--navy)}
.t4-f-cs-btns a:first-child{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.t4-f-seo-nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.t4-f-seo-nav a{color:#fff0a8;font-size:12px;font-weight:850;text-decoration:none}
.t4-f-seo-nav a:hover{color:#fff}
@media (max-width:760px){
  .t4-footer .t4-f-top a{font-size:10.5px;line-height:1.2}
  .t4-footer .t4-f-col a{padding:2px 0;font-size:11px;line-height:1.4}
  .t4-footer .t4-f-cs-btns a{padding:7px 10px;font-size:10px}
  .t4-f-seo-nav{gap:6px 12px;margin-bottom:8px}
  .t4-f-seo-nav a{font-size:10px}
}

/* 2026-07-26 · 방송용 상시 모션 + 자판기 내부 사이버 네온 */
.t4-broadcast-ambient{
  position:absolute;
  z-index:5;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  contain:layout paint style
}
.t4-broadcast-route{
  position:absolute;
  z-index:2;
  display:block;
  pointer-events:none;
  will-change:transform
}
.t4-broadcast-route img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 .55cqw .45cqw rgba(7,25,72,.24))
}
.t4-broadcast-route--hoodie{
  left:2%;
  top:20%;
  width:9.5%;
  animation:t4-broadcast-hoodie 13s ease-in-out infinite
}
.t4-broadcast-route--time{
  right:2%;
  top:39%;
  width:9.5%;
  animation:t4-broadcast-time 16s ease-in-out -5s infinite
}
.t4-broadcast-route--boat{
  z-index:3;
  left:-22%;
  bottom:.6%;
  width:20%;
  animation:t4-broadcast-boat 20s linear -8s infinite
}
.t4-broadcast-bubbles{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none
}
.t4-broadcast-bubbles i{
  --t4-bubble-x:20%;
  --t4-bubble-size:1cqw;
  --t4-bubble-time:11s;
  --t4-bubble-delay:0s;
  --t4-bubble-drift:2cqw;
  position:absolute;
  left:var(--t4-bubble-x);
  bottom:-5%;
  width:var(--t4-bubble-size);
  aspect-ratio:1;
  min-width:1.05cqw;
  border:.17cqw solid rgba(42,151,255,.78);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 27%,#fff 0 13%,transparent 15%),
    radial-gradient(circle at 62% 68%,rgba(95,232,255,.52),rgba(51,121,255,.18) 56%,rgba(255,255,255,.24) 72%);
  box-shadow:inset 0 0 .55cqw rgba(79,197,255,.38),0 0 .55cqw rgba(18,107,255,.34);
  opacity:0;
  animation:t4-broadcast-bubble var(--t4-bubble-time) linear var(--t4-bubble-delay) infinite
}
.t4-broadcast-bubbles i:nth-child(1){--t4-bubble-x:20%;--t4-bubble-size:.9cqw;--t4-bubble-time:9s;--t4-bubble-delay:-2s;--t4-bubble-drift:2.2cqw}
.t4-broadcast-bubbles i:nth-child(2){--t4-bubble-x:24%;--t4-bubble-size:1.4cqw;--t4-bubble-time:13s;--t4-bubble-delay:-8s;--t4-bubble-drift:-1.5cqw}
.t4-broadcast-bubbles i:nth-child(3){--t4-bubble-x:27%;--t4-bubble-size:.7cqw;--t4-bubble-time:10s;--t4-bubble-delay:-5s;--t4-bubble-drift:1.4cqw}
.t4-broadcast-bubbles i:nth-child(4){--t4-bubble-x:21.5%;--t4-bubble-size:1.15cqw;--t4-bubble-time:15s;--t4-bubble-delay:-12s;--t4-bubble-drift:-2cqw}
.t4-broadcast-bubbles i:nth-child(5){--t4-bubble-x:25.5%;--t4-bubble-size:.8cqw;--t4-bubble-time:11s;--t4-bubble-delay:-7s;--t4-bubble-drift:1.8cqw}
.t4-broadcast-bubbles i:nth-child(6){--t4-bubble-x:23%;--t4-bubble-size:1.6cqw;--t4-bubble-time:14s;--t4-bubble-delay:-3s;--t4-bubble-drift:-1.2cqw}
.t4-broadcast-bubbles i:nth-child(7){--t4-bubble-x:73%;--t4-bubble-size:1.25cqw;--t4-bubble-time:12s;--t4-bubble-delay:-10s;--t4-bubble-drift:-1.9cqw}
.t4-broadcast-bubbles i:nth-child(8){--t4-bubble-x:77%;--t4-bubble-size:.72cqw;--t4-bubble-time:9.5s;--t4-bubble-delay:-4s;--t4-bubble-drift:1.6cqw}
.t4-broadcast-bubbles i:nth-child(9){--t4-bubble-x:80%;--t4-bubble-size:1.5cqw;--t4-bubble-time:15s;--t4-bubble-delay:-6s;--t4-bubble-drift:-2.3cqw}
.t4-broadcast-bubbles i:nth-child(10){--t4-bubble-x:75%;--t4-bubble-size:.95cqw;--t4-bubble-time:11s;--t4-bubble-delay:-1s;--t4-bubble-drift:1.5cqw}
.t4-broadcast-bubbles i:nth-child(11){--t4-bubble-x:78.5%;--t4-bubble-size:1.15cqw;--t4-bubble-time:13.5s;--t4-bubble-delay:-9s;--t4-bubble-drift:-1.4cqw}
.t4-broadcast-bubbles i:nth-child(12){--t4-bubble-x:74%;--t4-bubble-size:.68cqw;--t4-bubble-time:10.5s;--t4-bubble-delay:-6.5s;--t4-bubble-drift:1.9cqw}
.t4-broadcast-bubbles i:nth-child(13){--t4-bubble-x:14%;--t4-bubble-size:1.8cqw;--t4-bubble-time:14s;--t4-bubble-delay:-4.5s;--t4-bubble-drift:2.4cqw}
.t4-broadcast-bubbles i:nth-child(14){--t4-bubble-x:30%;--t4-bubble-size:1.3cqw;--t4-bubble-time:9.8s;--t4-bubble-delay:-7.8s;--t4-bubble-drift:-1.6cqw}
.t4-broadcast-bubbles i:nth-child(15){--t4-bubble-x:18%;--t4-bubble-size:2.15cqw;--t4-bubble-time:16s;--t4-bubble-delay:-12.5s;--t4-bubble-drift:1.1cqw}
.t4-broadcast-bubbles i:nth-child(16){--t4-bubble-x:70%;--t4-bubble-size:1.7cqw;--t4-bubble-time:12.8s;--t4-bubble-delay:-3.7s;--t4-bubble-drift:-2.1cqw}
.t4-broadcast-bubbles i:nth-child(17){--t4-bubble-x:86%;--t4-bubble-size:2.05cqw;--t4-bubble-time:15.5s;--t4-bubble-delay:-11s;--t4-bubble-drift:-1.2cqw}
.t4-broadcast-bubbles i:nth-child(18){--t4-bubble-x:82%;--t4-bubble-size:1.25cqw;--t4-bubble-time:10.8s;--t4-bubble-delay:-8.4s;--t4-bubble-drift:1.8cqw}

.t4-cartoon-runner-route{
  position:absolute;
  z-index:4;
  left:-32%;
  bottom:14%;
  width:12%;
  pointer-events:none;
  will-change:transform;
  animation:t4-cartoon-runner-travel 20s linear -8s infinite
}
.t4-cartoon-runner{
  display:block;
  width:100%;
  aspect-ratio:543/724;
  background:url("/assets/ui/gachaduck-run-slip-sprite-20260726.webp?v=1") 0 0/400% 100% no-repeat;
  filter:drop-shadow(0 .5cqw .38cqw rgba(7,25,72,.28));
  animation:t4-cartoon-runner-frames 3.2s linear infinite
}
.t4-cartoon-runner-route::before,
.t4-cartoon-runner-route::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-16%;
  bottom:5%;
  width:34%;
  aspect-ratio:1.8;
  border-radius:50%;
  background:
    radial-gradient(circle at 20% 65%,rgba(255,255,255,.82) 0 13%,transparent 15%),
    radial-gradient(circle at 51% 44%,rgba(175,223,255,.72) 0 18%,transparent 20%),
    radial-gradient(circle at 80% 68%,rgba(255,255,255,.7) 0 12%,transparent 14%);
  opacity:0;
  animation:t4-cartoon-dust .8s ease-out infinite
}
.t4-cartoon-runner-route::after{animation-delay:-.4s;transform:translateX(-34%) scale(.78)}
.t4-cartoon-impact{
  position:absolute;
  z-index:5;
  right:2.5%;
  bottom:15%;
  width:7%;
  aspect-ratio:1;
  opacity:0;
  transform:scale(.15) rotate(-20deg);
  background:#ffdc31;
  clip-path:polygon(50% 0,61% 30%,88% 14%,76% 42%,100% 50%,75% 59%,88% 88%,60% 72%,50% 100%,40% 72%,12% 88%,25% 59%,0 50%,24% 41%,12% 14%,39% 30%);
  filter:drop-shadow(0 0 .55cqw rgba(255,221,49,.9));
  animation:t4-cartoon-impact 20s linear -8s infinite
}
.t4-cartoon-impact i{
  position:absolute;
  inset:27%;
  background:#1453cf;
  clip-path:inherit
}
@keyframes t4-broadcast-hoodie{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  25%{transform:translate3d(4cqw,7cqw,0) rotate(3deg)}
  50%{transform:translate3d(6cqw,18cqw,0) rotate(-2deg)}
  75%{transform:translate3d(2cqw,24cqw,0) rotate(4deg)}
}
@keyframes t4-broadcast-time{
  0%,100%{transform:translate3d(0,0,0) rotate(4deg)}
  28%{transform:translate3d(-4cqw,7cqw,0) rotate(-4deg)}
  58%{transform:translate3d(-6cqw,19cqw,0) rotate(3deg)}
  82%{transform:translate3d(-2cqw,25cqw,0) rotate(-2deg)}
}
@keyframes t4-broadcast-boat{
  0%{transform:translate3d(0,0,0) rotate(-2deg)}
  25%{transform:translate3d(165%,.8cqw,0) rotate(1deg)}
  50%{transform:translate3d(330%,0,0) rotate(-1deg)}
  75%{transform:translate3d(495%,.8cqw,0) rotate(1deg)}
  100%{transform:translate3d(660%,0,0) rotate(-2deg)}
}
@keyframes t4-broadcast-bubble{
  0%{transform:translate3d(0,0,0) scale(.72);opacity:0}
  9%{opacity:.84}
  54%{transform:translate3d(var(--t4-bubble-drift),-55cqw,0) scale(1);opacity:.66}
  100%{transform:translate3d(var(--t4-bubble-drift),-112cqw,0) scale(1.14);opacity:0}
}
@keyframes t4-cartoon-runner-frames{
  0%,24.9%{background-position:0 0}
  25%,49.9%{background-position:33.333% 0}
  50%,74.9%{background-position:66.666% 0}
  75%,100%{background-position:100% 0}
}
@keyframes t4-cartoon-runner-travel{
  0%{transform:translate3d(0,0,0) rotate(-3deg)}
  25%{transform:translate3d(280%,.6cqw,0) rotate(2deg)}
  50%{transform:translate3d(560%,0,0) rotate(-2deg)}
  75%{transform:translate3d(840%,.7cqw,0) rotate(2deg)}
  100%{transform:translate3d(1120%,0,0) rotate(-3deg)}
}
@keyframes t4-cartoon-dust{
  0%{opacity:0;transform:translate3d(25%,0,0) scale(.4)}
  35%{opacity:.75}
  100%{opacity:0;transform:translate3d(-70%,-45%,0) scale(1.35)}
}
@keyframes t4-cartoon-impact{
  0%,84%,94%,100%{opacity:0;transform:scale(.15) rotate(-20deg)}
  87%{opacity:1;transform:scale(1.25) rotate(8deg)}
  90%{opacity:.9;transform:scale(.82) rotate(-6deg)}
}

/* 실시간 획득판 위 여백 · 가챠덕 3릴 슬롯 */
.t4-duck-slot{display:none}
@media (min-width:1181px){
  .t4-stage .t4-ps-in{overflow:visible}
  .t4-duck-slot{
    --t4-slot-cell:58px;
    position:absolute;
    z-index:20;
    left:50%;
    top:-148px;
    width:310px;
    min-height:132px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto 1fr;
    gap:7px 12px;
    align-items:center;
    padding:13px 17px 14px;
    border:3px solid var(--gold);
    border-radius:22px;
    background:
      linear-gradient(90deg,rgba(0,235,255,.11),transparent 28% 72%,rgba(255,73,224,.12)),
      linear-gradient(180deg,#0b4bcb,#073486);
    box-shadow:
      0 0 0 4px #061f55,
      0 9px 0 #041b49,
      0 15px 26px rgba(5,24,68,.3);
    transform:translateX(-50%);
    transform-origin:50% 100%;
    pointer-events:none;
    animation:t4-duck-slot-jackpot 6.8s ease-in-out infinite
  }
  .t4-duck-slot::before{
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid rgba(255,255,255,.27);
    border-radius:15px;
    pointer-events:none
  }
  .t4-duck-slot::after{
    content:"";
    position:absolute;
    left:26px;
    right:26px;
    bottom:-13px;
    height:12px;
    border-radius:0 0 14px 14px;
    background:linear-gradient(180deg,#ffd938,#d69b00);
    box-shadow:0 3px 0 #061f55
  }
  .t4-duck-slot>small{
    grid-column:1;
    color:#9deaff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.17em
  }
  .t4-duck-slot>strong{
    grid-column:2;
    grid-row:1;
    padding:4px 8px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:999px;
    background:var(--gold);
    color:#073486;
    font-size:10px;
    font-weight:1000;
    letter-spacing:.05em;
    animation:t4-duck-slot-label 6.8s ease-in-out infinite
  }
  .t4-duck-slot-reels{
    grid-column:1/-1;
    display:flex;
    justify-content:center;
    gap:9px
  }
  .t4-duck-slot-window{
    position:relative;
    width:68px;
    height:var(--t4-slot-cell);
    overflow:hidden;
    border:3px solid #ffdc31;
    border-radius:12px;
    background:#fffdf2;
    box-shadow:
      inset 0 7px 12px rgba(7,52,134,.15),
      inset 0 -7px 12px rgba(7,52,134,.15),
      0 0 0 2px #061f55;
    font-style:normal
  }
  .t4-duck-slot-window::before,
  .t4-duck-slot-window::after{
    content:"";
    position:absolute;
    z-index:4;
    left:0;
    right:0;
    height:10px;
    pointer-events:none
  }
  .t4-duck-slot-window::before{top:0;background:linear-gradient(180deg,rgba(4,27,73,.24),transparent)}
  .t4-duck-slot-window::after{bottom:0;background:linear-gradient(0deg,rgba(4,27,73,.24),transparent)}
  .t4-duck-slot-strip{
    display:grid;
    grid-auto-rows:var(--t4-slot-cell);
    width:100%;
    font-weight:inherit;
    will-change:transform,filter;
    animation:t4-duck-slot-reel 6.8s cubic-bezier(.22,.68,.28,1) infinite
  }
  .t4-duck-slot-window:nth-child(2) .t4-duck-slot-strip{animation-delay:-.12s}
  .t4-duck-slot-window:nth-child(3) .t4-duck-slot-strip{animation-delay:-.24s}
  .t4-duck-slot-strip>span{
    display:grid;
    place-items:center;
    width:100%;
    height:var(--t4-slot-cell)
  }
  .t4-duck-slot-strip .is-duck img{
    display:block;
    width:50px;
    height:50px;
    object-fit:contain
  }
  .t4-duck-slot-strip em{font-style:normal}
  .t4-duck-slot-strip .is-star em{
    color:#ffca17;
    font-size:42px;
    line-height:1;
    -webkit-text-stroke:2px #073486;
    filter:drop-shadow(0 3px 0 rgba(7,52,134,.18))
  }
  .t4-duck-slot-strip .is-capsule em{
    position:relative;
    display:block;
    width:43px;
    height:43px;
    overflow:hidden;
    border:3px solid #073486;
    border-radius:50%;
    background:linear-gradient(180deg,#fff 0 48%,#ffcf23 49% 100%);
    box-shadow:inset 7px 5px 0 rgba(255,255,255,.42)
  }
  .t4-duck-slot-strip .is-capsule em::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:47%;
    height:3px;
    background:#073486
  }
}
@keyframes t4-duck-slot-reel{
  0%,8%{transform:translateY(0);filter:blur(0)}
  18%{transform:translateY(-29px);filter:blur(1.8px)}
  29%{transform:translateY(-58px);filter:blur(.8px)}
  40%{transform:translateY(-116px);filter:blur(1.5px)}
  51%{transform:translateY(-174px);filter:blur(.8px)}
  60%,100%{transform:translateY(-232px);filter:blur(0)}
}
@keyframes t4-duck-slot-jackpot{
  0%,57%,100%{filter:none;transform:translateX(-50%) scale(1)}
  64%{filter:brightness(1.14);transform:translateX(-50%) scale(1.018)}
  72%,88%{filter:drop-shadow(0 0 12px rgba(255,211,31,.72));transform:translateX(-50%) scale(1)}
}
@keyframes t4-duck-slot-label{
  0%,58%,100%{box-shadow:none;transform:scale(1)}
  66%,82%{box-shadow:0 0 12px 4px rgba(255,219,49,.48);transform:scale(1.08)}
}

.t4-machine .t4-tv,
.t4-machine .t4-panel,
.t4-machine .t4-insert-btn{
  isolation:isolate
}
.t4-machine .t4-tv::before,
.t4-machine .t4-panel::before,
.t4-machine .t4-insert-btn::before{
  content:"";
  position:absolute;
  z-index:9;
  inset:0;
  padding:.24cqw;
  border-radius:inherit;
  pointer-events:none;
  background:conic-gradient(
    from var(--t4-neon-turn),
    #00f5ff 0 8%,
    transparent 15% 25%,
    #4978ff 34%,
    #ad4dff 48%,
    #ff45dd 57%,
    transparent 66% 81%,
    #00f5ff 94% 100%
  );
  filter:drop-shadow(0 0 .27cqw rgba(0,238,255,.72)) drop-shadow(0 0 .38cqw rgba(180,64,255,.34));
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:t4-neon-border-orbit 3.2s linear infinite
}
.t4-machine .t4-panel--price::before{animation-delay:-.5s}
.t4-machine .t4-panel--stock::before{animation-delay:-2s}
.t4-machine .t4-insert--one::before{animation-delay:-1.1s}
.t4-machine .t4-insert--five::before{animation-delay:-2.6s}
.t4-machine .t4-tv::before{animation-duration:4s;animation-delay:-1.7s}

.t4-machine button.t4-machine-knob-part{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  padding:0;
  font:inherit;
  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.t4-machine button.t4-machine-knob-part:hover:not(:disabled){filter:brightness(1.08)}
.t4-machine button.t4-machine-knob-part:active:not(:disabled){transform:rotate(8deg) scale(.98)}
.t4-machine button.t4-machine-knob-part:focus-visible{
  outline:.55cqw solid #00eaff;
  outline-offset:.35cqw
}
.t4-machine button.t4-machine-knob-part:disabled{cursor:wait;filter:saturate(.65)}

.t4-modal.t4-modal--lever{width:min(92vw,510px)}
.t4-lever-confirm{display:grid;gap:16px}
.t4-lever-confirm-product{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:15px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line-strong);
  border-radius:17px;
  background:#f7f9fd
}
.t4-lever-confirm-product img{
  width:92px;
  aspect-ratio:1;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff
}
.t4-lever-confirm-product span{min-width:0;display:grid;gap:4px}
.t4-lever-confirm-product small{color:var(--muted);font-size:11px;font-weight:900}
.t4-lever-confirm-product b{overflow:hidden;color:var(--navy-deep);font-size:16px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.t4-lever-confirm-product em{color:var(--blue);font-size:14px;font-style:normal;font-weight:950}
.t4-lever-confirm>p{margin:0;color:var(--muted);font-size:13px;font-weight:750;text-align:center}
.t4-lever-confirm-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px}
.t4-lever-confirm-actions .t4-btn{width:100%}
html[data-theme="dark"] .t4-lever-confirm-product{border-color:#345387;background:#0e2850}
html[data-theme="dark"] .t4-lever-confirm-product img{border-color:#345387;background:#fff}
html[data-theme="dark"] .t4-lever-confirm-product b{color:#fff}
html[data-theme="dark"] .t4-lever-confirm-product small,
html[data-theme="dark"] .t4-lever-confirm>p{color:#b8c9e6}
html[data-theme="dark"] .t4-lever-confirm-product em{color:#ffda4a}

@media (max-width:760px){
  .t4-broadcast-route--hoodie{width:12%}
  .t4-broadcast-route--time{width:12%}
  .t4-broadcast-route--boat{left:-25%;width:22%;animation-duration:18s}
  .t4-cartoon-runner-route{left:-36%;bottom:15%;width:14%;animation-duration:18s}
  .t4-cartoon-impact{right:2%;bottom:17%;width:8%}
  .t4-broadcast-bubbles i:nth-child(3n){display:none}
  .t4-lever-confirm-product{grid-template-columns:76px minmax(0,1fr);gap:11px}
  .t4-lever-confirm-product img{width:76px}
}
@media (prefers-reduced-motion:reduce){
  .t4-broadcast-route,
  .t4-broadcast-bubbles i,
  .t4-cartoon-runner-route,
  .t4-cartoon-runner,
  .t4-cartoon-impact,
  .t4-duck-slot,
  .t4-duck-slot-strip,
  .t4-duck-slot>strong,
  .t4-machine .t4-tv::before,
  .t4-machine .t4-panel::before,
  .t4-machine .t4-insert-btn::before{animation:none!important}
  .t4-broadcast-route--boat,.t4-broadcast-bubbles,.t4-cartoon-impact{display:none}
}

/* 상단 배너·메인 자판기 · 한 겹 회전 사이버펑크 네온 테두리 */
@property --t4-neon-turn{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg
}
.t4-meme-board,
.t4-machine{
  --t4-neon-width:3px;
  position:relative;
  isolation:isolate
}
.t4-meme-board{--t4-neon-width:2px}
.t4-meme-board::after,
.t4-machine::after{
  content:"";
  position:absolute;
  z-index:6100;
  inset:0;
  padding:var(--t4-neon-width);
  border-radius:inherit;
  background:conic-gradient(
    from var(--t4-neon-turn),
    transparent 0deg 34deg,
    #00f5ff 50deg,
    #3d7cff 82deg,
    transparent 112deg 174deg,
    #e448ff 198deg,
    #7957ff 226deg,
    #00eaff 258deg,
    transparent 292deg 360deg
  );
  filter:drop-shadow(0 0 4px rgba(0,238,255,.88)) drop-shadow(0 0 9px rgba(155,62,255,.54));
  opacity:.96;
  pointer-events:none;
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:t4-neon-border-orbit 4.8s linear infinite
}
.t4-meme-board::after{
  animation-duration:3.8s;
  animation-direction:reverse
}
@keyframes t4-neon-border-orbit{
  to{--t4-neon-turn:360deg}
}
@media (prefers-reduced-motion:reduce){
  .t4-meme-board::after,
  .t4-machine::after{animation:none}
}

/* 실시간 획득 리포트 · 다크 네이비 패널 */
.t4-stage .t4-ps-in,
html[data-theme="dark"] .t4-stage .t4-ps-in{
  background:linear-gradient(135deg,#0b2e65 0%,#081f49 56%,#06152f 100%)!important;
  color:#fff
}
.t4-stage .t4-ps-head b,
html[data-theme="dark"] .t4-stage .t4-ps-head b{color:#fff}
.t4-stage .t4-ps-head small,
html[data-theme="dark"] .t4-stage .t4-ps-head small{color:#82b8ff}

/* MACHINE-STAGE CAPSULE REVEAL
   브라우저 전체가 아니라 중앙 정사각 자판기 안에서만 재생 */
html.t4-result-open,
html.t4-result-open body{
  overflow:auto!important;
  overscroll-behavior:auto
}
.t4-machine>.t4-fullscreen-reveal{
  position:absolute;
  z-index:6200;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  overflow:hidden;
  border-radius:inherit;
  container-type:inline-size;
  background:#020711
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-bg{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-spotlight{
  top:-18%;
  width:78cqw;
  height:92%;
  filter:blur(1.8cqw)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-ring{
  top:48%;
  width:48cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-ring--two{width:61cqw}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-shell{
  top:48%;
  width:37cqw;
  filter:drop-shadow(0 0 4.6cqw rgba(255,210,42,.72))
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-shell-top,
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-shell-bottom{
  border-width:max(2px,.52cqw)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-shell-seam{
  box-shadow:0 0 1.8cqw rgba(255,214,48,.9)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-open:focus-visible:after{
  inset:1.5cqw;
  border-radius:2.2cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt{
  bottom:2.6cqw;
  width:72cqw;
  padding:2.2cqw 3cqw 2cqw;
  border-radius:2.5cqw;
  box-shadow:0 2.4cqw 7cqw rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.14),0 0 4cqw rgba(17,94,224,.18)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt small{
  font-size:1.05cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt h2{
  margin-top:.7cqw;
  font-size:3.25cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt p{
  margin-top:.7cqw;
  font-size:1.35cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-progress{
  width:32cqw;
  height:max(3px,.55cqw);
  margin-top:1.5cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt strong{
  gap:1.2cqw;
  margin-top:1.5cqw;
  padding:1.1cqw 1.9cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt strong span{font-size:.9cqw}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt strong b{font-size:1.45cqw}
.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-particles i,
.t4-machine>.t4-fullscreen-reveal .t4-full-result-particles i{
  width:clamp(3px,.72cqw,9px);
  height:clamp(3px,.72cqw,9px)
}

.t4-machine>.t4-fullscreen-reveal .t4-full-reveal-result{
  overflow:hidden;
  padding:2.4cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-rays{
  top:45%;
  width:120cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel,
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single,
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi{
  width:100%;
  height:100%;
  min-height:0;
  grid-template-rows:auto minmax(0,1fr) auto
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-heading{
  padding-top:0
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-heading>span{
  font-size:.92cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-heading h2{
  margin-top:.45cqw;
  font-size:3.4cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-hero{
  width:74cqw;
  max-width:100%;
  min-height:0;
  margin:1.2cqw 0
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-halo{
  width:58cqw;
  box-shadow:0 0 8cqw rgba(38,121,255,.48),inset 0 0 5cqw rgba(255,211,54,.15)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-image{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:2.3cqw;
  box-shadow:0 3cqw 8cqw rgba(0,0,0,.52),0 0 0 .8cqw rgba(255,255,255,.07),0 0 6.6cqw rgba(45,132,255,.32)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-image img{
  max-width:92%;
  max-height:92%
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-hero figcaption{
  max-width:88cqw;
  gap:1.2cqw;
  padding:1.2cqw 1cqw 0
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-hero figcaption em{
  padding:.55cqw 1cqw;
  font-size:.9cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-hero figcaption b{
  display:-webkit-box;
  max-width:70cqw;
  overflow:hidden;
  font-size:2.2cqw;
  line-height:1.2;
  text-overflow:clip;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-footer{
  width:88cqw;
  max-width:100%;
  gap:1.4cqw;
  padding-top:.45cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-footer>span{
  font-size:1.15cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-cash-symbol{
  width:2cqw;
  height:2cqw;
  margin-right:.5cqw;
  font-size:1cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-close{
  min-height:4.7cqw;
  padding:0 2.3cqw;
  border-radius:999px;
  font-size:1.25cqw
}

.t4-machine>.t4-fullscreen-reveal .t4-full-result-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.15cqw;
  margin:1.4cqw 0;
  overflow:hidden
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-grid li{
  min-height:0;
  padding:.8cqw .8cqw 1cqw;
  border-radius:1.8cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-number{
  top:.8cqw;
  left:.8cqw;
  width:2.7cqw;
  height:2.7cqw;
  font-size:.85cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-grid-image{
  min-height:0;
  border-radius:1.2cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-grid li>em{
  margin-top:.65cqw;
  padding:.35cqw .6cqw;
  font-size:.66cqw
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-grid li>b{
  margin-top:.45cqw;
  font-size:1.1cqw;
  line-height:1.25
}

@container (max-width:520px){
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt{
    bottom:3cqw;
    width:84cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt small{font-size:1.8cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt h2{font-size:4.8cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt p{font-size:2.2cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt strong span{font-size:1.45cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-prompt strong b{font-size:2.3cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-result{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:3cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-heading>span{font-size:1.55cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-heading h2{font-size:5cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-hero{width:82cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-hero figcaption em{font-size:1.45cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-hero figcaption b{
    max-width:68cqw;
    font-size:3.2cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-footer{width:94cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-footer>span{font-size:1.8cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-close{
    min-height:7cqw;
    padding:0 3.2cqw;
    font-size:2cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi{
    height:auto;
    min-height:100%;
    grid-template-rows:auto auto auto
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2cqw;
    overflow:visible
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-grid li{
    min-height:36cqw;
    padding:1.4cqw;
    border-radius:3cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-grid-image{min-height:25cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-number{
    top:1.3cqw;
    left:1.3cqw;
    width:5cqw;
    height:5cqw;
    font-size:1.6cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-grid li>em{font-size:1.25cqw}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-grid li>b{font-size:2cqw}
}

/* 2026-07-26 · 친구 리워드 게이지를 품은 가챠덕 티켓 */
#t4-side-invite{--gd-ticket-cutout:var(--duck-yellow-light)}
#t4-side-invite .t4-gd-ticket{
  position:relative;
  display:grid;
  width:100%;
  min-height:112px;
  grid-template-columns:62px minmax(0,1fr);
  margin:0 0 12px;
  overflow:hidden;
  border:2px solid var(--duck-blue-dark);
  border-radius:15px;
  background:var(--duck-blue);
  box-shadow:0 4px 0 var(--duck-blue-dark),0 8px 16px rgba(7,52,134,.15);
  color:#fff
}
#t4-side-invite .t4-gd-ticket::before,
#t4-side-invite .t4-gd-ticket::after{
  position:absolute;
  z-index:5;
  top:50%;
  width:18px;
  height:18px;
  border:2px solid var(--duck-blue-dark);
  border-radius:50%;
  background:var(--gd-ticket-cutout);
  content:"";
  pointer-events:none;
  transform:translateY(-50%)
}
#t4-side-invite .t4-gd-ticket::before{left:-11px}
#t4-side-invite .t4-gd-ticket::after{right:-11px}
#t4-side-invite .t4-gd-ticket-stub{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:10px 7px;
  border-right:2px dashed rgba(7,52,134,.55);
  background:linear-gradient(155deg,#ffe865 0%,var(--duck-yellow) 58%,#f4b900 100%);
  color:var(--duck-blue-dark)
}
#t4-side-invite .t4-gd-ticket-stub::before,
#t4-side-invite .t4-gd-ticket-stub::after{
  position:absolute;
  right:-6px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gd-ticket-cutout);
  content:""
}
#t4-side-invite .t4-gd-ticket-stub::before{top:-6px}
#t4-side-invite .t4-gd-ticket-stub::after{bottom:-6px}
#t4-side-invite .t4-gd-ticket-stub img{
  display:block;
  width:43px;
  height:43px;
  object-fit:contain;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.65))
}
#t4-side-invite .t4-gd-ticket-stub small{
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
  white-space:nowrap
}
#t4-side-invite .t4-gd-ticket-main{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-direction:column;
  min-width:0;
  padding:10px 13px 11px 12px;
  background:
    radial-gradient(circle at 92% 12%,rgba(255,255,255,.16) 0 3px,transparent 4px),
    linear-gradient(145deg,#1d61df 0%,var(--duck-blue) 56%,#06358e 100%)
}
#t4-side-invite .t4-gd-ticket-summary{
  display:grid;
  min-width:0;
  justify-items:center;
  gap:8px;
  width:100%
}
#t4-side-invite .t4-gd-ticket-summary small{
  max-width:100%;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:999px;
  background:#fff;
  color:var(--duck-blue-dark);
  font-size:7.5px;
  font-weight:1000;
  line-height:1.15;
  white-space:nowrap
}
#t4-side-invite .t4-gd-ticket-summary strong{
  color:#fff;
  font-size:9px;
  font-weight:1000;
  line-height:1.15;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
#t4-side-invite .t4-gd-ticket-kicker,
#t4-side-invite .t4-gd-ticket-title,
#t4-side-invite .t4-gd-ticket-progress{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
#t4-side-invite .t4-gd-ticket-kicker{
  color:#ffe45c;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.1em;
  line-height:1
}
#t4-side-invite .t4-gd-ticket-kicker em{
  color:#d9e7ff;
  font-style:normal;
  letter-spacing:.06em
}
#t4-side-invite .t4-gd-ticket-title{margin-top:6px}
#t4-side-invite .t4-gd-ticket-title b{
  overflow:hidden;
  font-size:17px;
  font-weight:1000;
  letter-spacing:-.045em;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap
}
#t4-side-invite .t4-gd-ticket-title small{
  flex:0 0 auto;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:999px;
  background:#fff;
  color:var(--duck-blue-dark);
  font-size:7.5px;
  font-weight:1000;
  white-space:nowrap
}
#t4-side-invite .t4-gd-ticket-progress{
  margin-top:9px;
  color:#dbe8ff;
  font-size:8px;
  font-weight:850
}
#t4-side-invite .t4-gd-ticket-progress strong{
  color:#fff;
  font-size:8.5px;
  font-weight:1000;
  white-space:nowrap
}
#t4-side-invite .t4-gd-ticket .t4-tier-gauge{
  width:100%;
  height:12px;
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  background:rgba(3,28,81,.72);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3)
}
#t4-side-invite .t4-gd-ticket .t4-tier-gauge>i{
  background:linear-gradient(90deg,#ffbd00 0%,#ffd21f 62%,#fff08a 100%);
  box-shadow:0 0 10px rgba(255,210,31,.58)
}
#t4-side-invite .t4-gd-ticket .t4-tier-gauge::after{
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(255,255,255,.34) calc(10% - 1px),rgba(255,255,255,.34) 10%)
}
html[data-theme="dark"] #t4-side-invite{--gd-ticket-cutout:var(--t4-night-panel)}

@media (max-width:900px){
  #t4-side-invite .t4-gd-ticket{
    min-height:100px;
    grid-template-columns:56px minmax(0,1fr);
    margin-bottom:9px;
    box-shadow:0 3px 0 var(--duck-blue-dark),0 6px 12px rgba(7,52,134,.14)
  }
  #t4-side-invite .t4-gd-ticket-stub{gap:3px;padding:7px 5px}
  #t4-side-invite .t4-gd-ticket-stub img{width:37px;height:37px}
  #t4-side-invite .t4-gd-ticket-main{padding:8px 11px 9px 10px}
  #t4-side-invite .t4-gd-ticket-title{margin-top:5px}
  #t4-side-invite .t4-gd-ticket-title b{font-size:15px}
  #t4-side-invite .t4-gd-ticket-progress{margin-top:7px}
  #t4-side-invite .t4-gd-ticket .t4-tier-gauge{height:10px;margin-top:4px}
}

/* 2026-07-26 · NICEPAY 결제수단 선택 */
.t4-modal--charge-flow .t4-charge-method-section{padding-block:13px}
.t4-charge-method-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}
.t4-charge-method-option{
  position:relative;
  display:flex;
  min-width:0;
  min-height:78px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  padding:10px 7px;
  border:1px solid #cbd5e5;
  border-radius:11px;
  background:#fff;
  color:#26324c;
  font:inherit;
  text-align:center;
  cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease
}
.t4-charge-method-option:hover{
  border-color:#83a3df;
  background:#f7f9ff;
  transform:translateY(-1px)
}
.t4-charge-method-option:focus-visible{
  outline:3px solid rgba(21,83,206,.2);
  outline-offset:2px
}
.t4-charge-method-option.is-on{
  border:2px solid #1553ce;
  background:#edf3ff;
  box-shadow:0 0 0 2px rgba(21,83,206,.08)
}
.t4-charge-method-option:disabled{opacity:.66;cursor:wait;transform:none}
.t4-charge-method-option.is-unavailable{
  opacity:.46;
  cursor:not-allowed;
  filter:saturate(.35)
}
.t4-charge-method-option:not(.t4-charge-method-option--card)::after{
  position:absolute;
  top:7px;
  right:7px;
  display:grid;
  width:17px;
  height:17px;
  place-items:center;
  border-radius:50%;
  background:#1553ce;
  color:#fff;
  content:"✓";
  font-size:9px;
  font-weight:1000;
  opacity:0;
  transform:scale(.7);
  transition:opacity .16s ease,transform .16s ease
}
.t4-charge-method-option:not(.t4-charge-method-option--card).is-on::after{
  opacity:1;
  transform:scale(1)
}
.t4-charge-method-option--card{
  min-height:92px;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  grid-template-areas:
    "icon copy check"
    "chips chips chips";
  justify-content:stretch;
  gap:8px 11px;
  padding:11px 12px;
  text-align:left
}
.t4-charge-method-icon{
  display:grid;
  min-width:38px;
  height:29px;
  place-items:center;
  padding:0 6px;
  border-radius:8px;
  background:#e9eef8;
  color:#34415f;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.04em
}
.t4-charge-method-option--card .t4-charge-method-icon{
  grid-area:icon;
  width:42px;
  height:36px;
  padding:0;
  background:#1553ce;
  color:#fff
}
.t4-payment-glyph{
  display:block;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:21px;
  font-style:normal;
  font-weight:400;
  line-height:1;
  filter:drop-shadow(0 2px 2px rgba(21,44,94,.13))
}
.t4-charge-method-option--card .t4-payment-glyph{font-size:24px}
.t4-charge-method-copy{
  display:flex;
  min-width:0;
  align-items:center;
  flex-direction:column
}
.t4-charge-method-copy>b{
  color:inherit;
  font-size:11.5px;
  font-weight:950;
  line-height:1.2;
  word-break:keep-all
}
.t4-charge-method-copy>small{
  margin-top:3px;
  color:#748097;
  font-size:8.5px;
  font-weight:750;
  line-height:1.25;
  word-break:keep-all
}
.t4-charge-method-option--card .t4-charge-method-copy{
  grid-area:copy;
  align-items:flex-start;
  justify-content:center
}
.t4-charge-method-option--card .t4-charge-method-copy>b{font-size:13px}
.t4-charge-method-check{
  grid-area:check;
  align-self:center;
  padding:4px 8px;
  border-radius:999px;
  background:#dfe6f3;
  color:#66738b;
  font-size:8px;
  font-weight:950
}
.t4-charge-method-option--card.is-on .t4-charge-method-check{
  background:#1553ce;
  color:#fff
}
.t4-charge-easypay-chips{
  grid-area:chips;
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  gap:5px;
  padding-top:8px;
  border-top:1px solid #d9e1ef
}
.t4-charge-easypay-chips i{
  padding:4px 7px;
  border-radius:6px;
  font-size:8px;
  font-style:normal;
  font-weight:950;
  line-height:1
}
.t4-charge-easypay-chips .is-kakao{background:#fee500;color:#191919}
.t4-charge-easypay-chips .is-naver{background:#03c75a;color:#fff}
.t4-charge-easypay-chips .is-samsung{background:#1428a0;color:#fff}
.t4-charge-method-note{
  margin:9px 1px 0;
  padding:8px 10px;
  border-radius:8px;
  background:#f2f5fa;
  color:#66738b;
  font-size:9.5px;
  font-weight:750;
  line-height:1.4
}
.t4-charge-method-note.is-vbank{
  border:1px solid #ecd47c;
  background:#fff8dd;
  color:#735800
}
.t4-vbank-ready__lead{
  margin:0 0 14px;
  color:#34415f;
  font-size:13px;
  font-weight:800;
  line-height:1.5
}
.t4-vbank-ready dl{
  margin:0;
  overflow:hidden;
  border:1px solid #d8e0ef;
  border-radius:12px;
  background:#f8faff
}
.t4-vbank-ready dl>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 14px;
  border-bottom:1px solid #e1e7f2
}
.t4-vbank-ready dl>div:last-child{border-bottom:0}
.t4-vbank-ready dt{color:#6c7890;font-size:11px;font-weight:800}
.t4-vbank-ready dd{
  margin:0;
  color:#102663;
  font-size:12px;
  font-weight:950;
  text-align:right
}
.t4-vbank-ready .is-account dd{font-size:17px;letter-spacing:.02em}
.t4-vbank-ready__note{
  margin:12px 0 16px;
  padding:10px 12px;
  border-radius:9px;
  background:#fff7d7;
  color:#66520b;
  font-size:10px;
  font-weight:750;
  line-height:1.45
}

html[data-theme="dark"] .t4-charge-method-option{
  border-color:var(--t4-night-line);
  background:var(--t4-night-soft);
  color:#fff
}
html[data-theme="dark"] .t4-charge-method-option:hover{border-color:#708fc5;background:#17315c}
html[data-theme="dark"] .t4-charge-method-option.is-on{
  border-color:var(--duck-yellow);
  background:#17315c;
  box-shadow:0 0 0 2px rgba(255,210,31,.1)
}
html[data-theme="dark"] .t4-charge-method-icon{background:#243a62;color:#e7edf8}
html[data-theme="dark"] .t4-charge-method-option--card .t4-charge-method-icon{background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-charge-method-copy>small{color:#b9c5d8}
html[data-theme="dark"] .t4-charge-method-option--card.is-on .t4-charge-method-check{background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-charge-easypay-chips{border-top-color:var(--t4-night-line)}
html[data-theme="dark"] .t4-charge-method-note{background:#111f3c;color:#c6d1e3}
html[data-theme="dark"] .t4-charge-method-note.is-vbank{border-color:#8a7224;background:#29250f;color:#ffe483}
html[data-theme="dark"] .t4-vbank-ready__lead{color:#d9e2f2}
html[data-theme="dark"] .t4-vbank-ready dl{border-color:var(--t4-night-line);background:#111f3c}
html[data-theme="dark"] .t4-vbank-ready dl>div{border-bottom-color:var(--t4-night-line)}
html[data-theme="dark"] .t4-vbank-ready dt{color:#aebad0}
html[data-theme="dark"] .t4-vbank-ready dd{color:#fff}
html[data-theme="dark"] .t4-vbank-ready__note{background:#29250f;color:#ffe483}

@media (max-width:380px){
  .t4-charge-method-options{gap:6px}
  .t4-charge-method-option{min-height:73px;padding-inline:4px}
  .t4-charge-method-copy>b{font-size:10.5px}
  .t4-charge-method-copy>small{font-size:7.5px}
  .t4-charge-method-option--card{padding-inline:10px}
  .t4-charge-easypay-chips i{padding-inline:6px;font-size:7.5px}
}

/* ========================================================================
   2026-07-18 · GACHA DUCK FIGURE HOUSE 컬렉션 장식장
   ======================================================================== */
.t4-modal.t4-modal--collection{
  width:min(1120px,calc(100vw - 24px));max-width:1120px;max-height:min(92vh,940px);max-height:min(92dvh,940px);
  display:flex;overflow:hidden;flex-direction:column;border:9px solid #222936;border-radius:18px;background:#56331f
}
.t4-modal--collection .t4-modal-head.t4-collection-fascia{
  position:relative;z-index:5;display:grid;flex:0 0 auto;grid-template-columns:minmax(0,1fr) auto auto 44px;align-items:center;gap:18px;
  min-height:82px;padding:11px 16px;overflow:visible;border-bottom:8px solid #8b593a;
  box-shadow:inset 0 -3px 0 #ffd21f;color:#fff
}
.t4-collection-fascia-brand{display:flex;min-width:0;align-items:center;gap:10px}
.t4-collection-fascia-brand>img{width:46px;height:46px;flex:0 0 auto;object-fit:contain;border:2px solid #052b73;border-radius:50%;background:#ffd21f}
.t4-collection-fascia-brand>span{display:block;min-width:0}.t4-collection-fascia-brand small,.t4-collection-fascia-brand b{display:block}
.t4-collection-fascia-brand small{color:#ffe46a;font-size:8px;font-weight:1000;letter-spacing:.14em}
.t4-collection-fascia-brand b{margin-top:3px;overflow:hidden;color:#fff;font-size:18px;font-weight:1000;text-overflow:ellipsis;white-space:nowrap}
.t4-collection-fascia-value{display:flex;align-items:baseline;gap:9px;padding-left:18px;border-left:1px solid rgba(255,255,255,.35);text-align:right}
.t4-collection-fascia-value small,.t4-collection-fascia-value b{display:block;white-space:nowrap}
.t4-collection-fascia-value small{color:#ffe46a;font-size:9px;font-weight:1000;letter-spacing:0}
.t4-collection-fascia-value b{color:#fff;font-size:18px;font-weight:1000}
.t4-collection-fascia-light{display:flex;align-items:center;gap:6px;color:#fff;font-size:8px;font-style:normal;font-weight:1000;letter-spacing:.08em;white-space:nowrap}
.t4-collection-fascia-light i{width:8px;height:8px;border-radius:50%;background:#ffe45c;box-shadow:0 0 9px 3px rgba(255,228,92,.72)}
.t4-modal--collection .t4-collection-fascia .t4-modal-x{position:static;width:42px;height:42px;margin:0;justify-self:end}
.t4-modal--collection .t4-collection-body{
  flex:1 1 auto;min-height:0;padding:14px 16px 18px;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.027) 0 1px,transparent 1px 15px),
    linear-gradient(180deg,#946548 0,#73482f 58%,#57331f 100%);box-shadow:inset 0 0 34px rgba(34,13,3,.42)
}

.t4-modal--collection .t4-collection-filter{
  position:relative;z-index:3;display:flex;align-items:center;gap:7px;margin:-14px -16px 16px;padding:9px 16px;
  border-bottom:5px solid #252b35;background:linear-gradient(180deg,#66422c,#4f301e)
}
.t4-modal--collection .t4-collection-filter button{
  min-height:34px;padding:5px 11px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#fff;
  font-size:10px;font-weight:1000
}
.t4-modal--collection .t4-collection-filter button.is-active{
  border-bottom-color:#ffd21f;background:transparent;color:#ffd21f
}

/* 각 상품은 조명, 원목 벽, 어두운 세로 프레임과 선반 턱을 가진다. */
.t4-modal--collection .t4-collection-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:25px 8px;margin:0;padding:12px 10px 25px;
  border:4px solid #252b35;border-radius:2px;background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,#8d5d40,#684029 76%,#54311d);box-shadow:inset 0 0 24px rgba(35,14,4,.42)
}
.t4-modal--collection .t4-collection-item{
  position:relative;min-width:0;padding:9px 8px 12px;overflow:visible;border:4px solid #252b35;border-radius:3px;
  content-visibility:auto;contain:layout paint style;contain-intrinsic-size:320px;
  background:
    radial-gradient(ellipse at 50% 0,rgba(255,240,177,.54),transparent 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 1px,transparent 1px 13px),
    linear-gradient(180deg,#a16f4d 0,#73482f 72%,#5a3520 100%);color:#fff;text-align:left;
  box-shadow:inset 0 0 20px rgba(38,15,4,.36)
}
.t4-modal--collection .t4-collection-item::after{
  content:"";position:absolute;z-index:8;left:-7px;right:-7px;bottom:-14px;height:14px;border:3px solid #252b35;border-radius:2px;
  background:linear-gradient(180deg,#b98159,#684027);box-shadow:0 3px 0 rgba(35,19,10,.48);pointer-events:none
}
.t4-modal--collection .t4-collection-item[hidden]{display:none!important}
.t4-modal--collection .t4-collection-grid[hidden]{display:none!important}
.t4-modal--collection .t4-collection-case{
  position:relative;display:block;aspect-ratio:4/4.55;padding:10px 8px 18px;overflow:hidden;border:1px solid rgba(255,244,218,.7);border-radius:3px;
  background:
    radial-gradient(ellipse at 50% 2%,rgba(255,247,200,.94),rgba(255,239,165,.27) 36%,transparent 67%),
    linear-gradient(180deg,rgba(255,255,255,.94) 0,rgba(255,250,232,.91) 74%,rgba(63,36,20,.22) 75%,rgba(255,211,31,.88) 79%,rgba(143,91,24,.9) 100%);
  box-shadow:inset 0 0 14px rgba(255,255,255,.82),inset 0 -10px 12px rgba(60,32,12,.24)
}
.t4-modal--collection .t4-collection-case::before{
  content:"";position:absolute;z-index:0;left:10%;right:10%;top:-22%;height:72%;opacity:.8;
  background:linear-gradient(105deg,transparent 18%,rgba(255,250,206,.82) 50%,transparent 82%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)
}
.t4-modal--collection .t4-collection-case::after{
  content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(114deg,rgba(255,255,255,.46) 0 8%,transparent 9% 66%,rgba(255,255,255,.17) 67% 75%,transparent 76%)
}
.t4-collection-lamp{position:absolute;z-index:4;left:50%;top:5px;width:25px;height:7px;transform:translateX(-50%);border:2px solid #052b73;border-radius:999px;background:#ffd21f;box-shadow:0 0 12px 5px rgba(255,224,80,.76)}
.t4-modal--collection .t4-collection-case img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 6px rgba(7,32,76,.21))}
.t4-modal--collection .t4-collection-case>i{position:absolute;z-index:1;left:18%;right:18%;bottom:9px;height:12px;border:2px solid #052b73;border-radius:50%;background:linear-gradient(180deg,#fff,#b7c8df);box-shadow:0 3px 0 rgba(5,43,115,.5)}
.t4-modal--collection .t4-collection-item>em{
  position:absolute;z-index:6;left:13px;top:15px;padding:4px 7px;border:2px solid #052b73;border-radius:999px;background:#ffd21f;color:#052b73;font-size:7px;font-style:normal;font-weight:1000;letter-spacing:.05em
}
.t4-modal--collection .t4-collection-item[data-crank="secret"]>em{border-color:#fff;background:#c93424;color:#fff;box-shadow:0 0 12px rgba(201,52,36,.5)}
.t4-modal--collection .t4-collection-qty{
  position:absolute;z-index:7;right:13px;top:15px;display:grid;min-width:30px;height:24px;place-items:center;padding:0 7px;
  border:2px solid #052b73;border-radius:999px;background:#fff;color:#052b73;font-size:10px;font-weight:1000;line-height:1
}
.t4-collection-plaque{display:block;min-width:0;margin-top:9px;padding:7px 8px 6px;border:2px solid #052b73;border-bottom:0;border-left:4px solid #ffd21f;border-radius:3px 3px 0 0;background:#052b73}
.t4-collection-plaque b,.t4-collection-plaque small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-collection-plaque b{color:#fff;font-size:11px;font-weight:1000}.t4-collection-plaque small{margin-top:2px;color:#d9e6ff;font-size:8.5px;font-weight:700}
.t4-collection-price{display:flex;align-items:baseline;justify-content:space-between;gap:7px;margin:0;padding:6px 8px;border:2px solid #052b73;border-radius:0 0 3px 3px;background:#ffd21f;color:#052b73}
.t4-collection-price small{font-size:7.5px;font-weight:900}.t4-collection-price strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:1000}

.t4-modal--collection .t4-collection-empty,.t4-modal--collection .t4-collection-filter-empty{position:relative;z-index:2;display:grid;place-items:center;align-content:center;min-height:310px;color:#fff;text-align:center}
.t4-modal--collection .t4-collection-filter-empty[hidden]{display:none!important}
.t4-modal--collection .t4-collection-empty i,.t4-modal--collection .t4-collection-filter-empty i{
  width:72px;height:72px;margin-bottom:12px;border:3px solid #052b73;border-radius:50%;
  background-color:#ffd21f;background-image:url("/assets/ui/gachaduck-symbol-angry-sharp-v2-20260718.svg?v=4");
  background-position:center;background-repeat:no-repeat;background-size:112%;box-shadow:0 0 26px rgba(255,210,31,.35)
}
.t4-modal--collection .t4-collection-empty b,.t4-modal--collection .t4-collection-filter-empty b{color:#fff;font-size:17px}.t4-modal--collection .t4-collection-empty p,.t4-modal--collection .t4-collection-filter-empty p{margin-top:4px;color:#f4e8db;font-size:12px}
@media (max-width:900px){
  .t4-modal--collection .t4-collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .t4-modal.t4-modal--collection{border-width:7px;border-radius:14px}
  .t4-modal--collection .t4-modal-head.t4-collection-fascia{grid-template-columns:minmax(0,1fr) auto 38px;gap:10px;min-height:70px;padding:9px 11px;border-bottom-width:6px}
  .t4-collection-fascia-brand{gap:8px}.t4-collection-fascia-brand>img{width:40px;height:40px}.t4-collection-fascia-brand small{font-size:7px}.t4-collection-fascia-brand b{font-size:15px}
  .t4-collection-fascia-value{gap:7px;padding-left:10px}.t4-collection-fascia-value small{font-size:8px}.t4-collection-fascia-value b{font-size:15px}.t4-collection-fascia-light{display:none}
  .t4-modal--collection .t4-collection-fascia .t4-modal-x{width:36px;height:36px}
  .t4-modal--collection .t4-collection-body{padding:12px}
  .t4-modal--collection .t4-collection-filter{margin:-12px -12px 13px;padding:8px 12px}
  .t4-modal--collection .t4-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .t4-modal.t4-modal--collection{width:calc(100vw - 10px);border-width:5px}
  .t4-modal--collection .t4-modal-head.t4-collection-fascia{grid-template-columns:minmax(0,1fr) auto 32px;gap:6px;min-height:60px;padding:7px 8px;border-bottom-width:5px}
  .t4-collection-fascia-brand{gap:6px}.t4-collection-fascia-brand>img{width:34px;height:34px}.t4-collection-fascia-brand small{display:none}.t4-collection-fascia-brand b{margin-top:0;font-size:12px}
  .t4-collection-fascia-value{gap:5px;padding-left:7px}.t4-collection-fascia-value small{font-size:7px}.t4-collection-fascia-value b{font-size:12px}
  .t4-modal--collection .t4-collection-fascia .t4-modal-x{width:31px;height:31px;font-size:12px}
  .t4-modal--collection .t4-collection-body{padding:8px}
  .t4-modal--collection .t4-collection-filter{margin:-8px -8px 10px;padding:7px 8px;overflow-x:auto;overflow-y:hidden}.t4-modal--collection .t4-collection-filter button{flex:0 0 auto;white-space:nowrap}
  .t4-modal--collection .t4-collection-grid{gap:22px 5px;padding:8px 5px 19px}.t4-modal--collection .t4-collection-item{padding:5px 5px 8px;border-width:3px;border-radius:2px}
  .t4-modal--collection .t4-collection-item::after{left:-5px;right:-5px;bottom:-11px;height:11px;border-width:2px}
  .t4-modal--collection .t4-collection-case{padding:8px 5px 14px}.t4-collection-lamp{width:20px;height:6px}
  .t4-modal--collection .t4-collection-item>em{left:9px;top:11px;padding:3px 5px;font-size:6px}.t4-modal--collection .t4-collection-qty{right:9px;top:11px;min-width:25px;height:20px;padding:0 5px;font-size:8px}.t4-collection-plaque b{font-size:9px}.t4-collection-plaque small{font-size:7px}
  .t4-collection-price{padding:5px 6px}.t4-collection-price small{font-size:6.5px}.t4-collection-price strong{font-size:9px}
}

/* ============ 가챠덕 밈형 서비스 소개 ============ */
.t4-seo .t4-seo-in{
  display:grid;grid-template-columns:minmax(430px,.9fr) minmax(0,1.25fr);
  grid-template-rows:1fr auto;gap:14px 22px;padding:46px 28px 24px;
  overflow:hidden;background:#fff;border:2px solid var(--blue);border-radius:28px;
  box-shadow:var(--shadow-stage)
}
.t4-seo .t4-seo-in::before{
  content:none;display:none
}
.t4-seo-show{
  position:relative;grid-column:1;grid-row:1/3;min-height:434px;overflow:hidden;
  border:2px solid var(--navy-deep);border-radius:24px;
  background:linear-gradient(145deg,#fff9dd 0 57%,#ffdd54 57% 100%);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.72),0 7px 0 #123b91
}
.t4-seo-show::before{
  content:"";position:absolute;inset:0;opacity:.23;pointer-events:none;
  background-image:linear-gradient(rgba(36,71,197,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(36,71,197,.13) 1px,transparent 1px);
  background-size:24px 24px
}
.t4-seo-duck{
  position:absolute;z-index:2;left:4px;bottom:-22px;width:min(58%,330px);height:auto;
  filter:drop-shadow(0 10px 10px rgba(12,45,116,.23));transform:rotate(-1.5deg)
}
.t4-seo-capsules{
  position:absolute;z-index:1;right:-56px;bottom:-58px;width:230px;height:auto;
  opacity:.32;transform:rotate(-14deg);filter:saturate(1.08)
}
.t4-seo-speech{
  position:absolute;z-index:3;top:27px;right:18px;width:min(51%,274px);padding:20px 18px 18px;
  border:3px solid var(--navy-deep);border-radius:24px 24px 24px 7px;background:#fff;
  box-shadow:7px 8px 0 var(--gold);transform:rotate(1deg)
}
.t4-seo-speech::after{
  content:"";position:absolute;left:-18px;bottom:38px;width:27px;height:27px;
  border-left:3px solid var(--navy-deep);border-bottom:3px solid var(--navy-deep);
  background:#fff;transform:skew(-18deg) rotate(38deg)
}
.t4-seo .t4-seo-badge{
  display:inline-flex;padding:6px 11px;border:1px solid #d7aa00;border-radius:999px;
  background:var(--gold);color:var(--navy-deep);font-size:11px;font-weight:1000;letter-spacing:-.2px
}
.t4-seo-speech h2{
  margin-top:11px;color:var(--navy-deep);font-size:28px;font-weight:1000;line-height:1.08;letter-spacing:-1px
}
.t4-seo-speech h2 em{color:var(--blue);font-style:normal}
.t4-seo-speech p{margin-top:11px;color:#4f5e80;font-size:12px;font-weight:800;line-height:1.55;word-break:keep-all}
.t4-seo-speech>small{
  display:inline-flex;margin-top:12px;padding:6px 9px;border-radius:8px;background:var(--navy-deep);
  color:var(--gold);font-size:10px;font-weight:1000;transform:rotate(-1.5deg)
}
.t4-seo .t4-seo-list{
  grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:stretch;gap:12px;padding:0;margin:0;list-style:none
}
.t4-seo .t4-seo-list li{
  position:relative;display:grid;grid-template-columns:45px minmax(0,1fr);gap:11px;
  min-height:174px;padding:15px 14px;overflow:hidden;border:1.5px solid #b9c8e7;
  border-radius:18px;background:#fff;box-shadow:0 5px 14px rgba(17,56,136,.1)
}
.t4-seo .t4-seo-list li::before{content:none}
.t4-seo .t4-seo-list li:nth-child(odd){background:#fff9df;border-color:#e9c94a}
.t4-seo .t4-seo-list li:nth-child(even){background:#eef4ff;border-color:#aabde4}
.t4-seo-icon{
  display:grid;width:45px;height:45px;place-items:center;border:2px solid var(--navy-deep);
  border-radius:14px;background:var(--navy-deep);color:var(--gold);box-shadow:3px 3px 0 var(--gold)
}
.t4-seo-icon svg{width:23px;height:23px;fill:currentColor}
.t4-seo-kicker{
  display:inline-flex;width:max-content;max-width:100%;padding:3px 7px;border-radius:999px;
  background:var(--gold);color:var(--navy-deep);font-size:9px;font-weight:1000;line-height:1.2
}
.t4-seo .t4-seo-list b{
  display:block;margin-top:7px;color:var(--navy-deep);font-size:15px;font-weight:1000;line-height:1.28;word-break:keep-all
}
.t4-seo .t4-seo-list p{margin-top:5px;color:#5b6780;font-size:10.5px;font-weight:750;line-height:1.45;word-break:keep-all}
.t4-seo .t4-seo-list em{
  display:inline-flex;margin-top:8px;padding:4px 7px;border-radius:7px;background:#fff;
  color:var(--blue);font-size:9.5px;font-style:normal;font-weight:1000;box-shadow:inset 0 0 0 1px #ccd8ee
}
.t4-seo .t4-seo-cta{
  grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:58px;margin:0;padding:11px 20px;border:2px solid var(--navy-deep);
  border-radius:16px;background:var(--navy-deep);color:#fff;font-size:15px;font-weight:1000;
  box-shadow:0 5px 0 #092c70,0 10px 18px rgba(8,42,107,.14)
}
.t4-seo .t4-seo-cta span{padding:5px 8px;border-radius:999px;background:var(--gold);color:var(--navy-deep);font-size:10px}
.t4-seo .t4-seo-cta b{color:var(--gold);font-size:22px;line-height:1}
.t4-seo .t4-seo-cta:hover{transform:translateY(-2px);background:#123f9d}

@media (max-width:900px){
  .t4-seo .t4-seo-in{grid-template-columns:1fr;grid-template-rows:auto;padding:46px 20px 20px}
  .t4-seo-show,.t4-seo .t4-seo-list,.t4-seo .t4-seo-cta{grid-column:1;grid-row:auto}
  .t4-seo-show{min-height:420px}
  .t4-seo .t4-seo-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .t4-seo .t4-seo-in{gap:14px;padding:40px 12px 16px;border-radius:22px}
  .t4-seo-show{min-height:488px;border-radius:20px}
  .t4-seo-speech{top:16px;left:14px;right:14px;width:auto;padding:16px 15px 15px;transform:none}
  .t4-seo-speech::after{left:50%;bottom:-15px;transform:translateX(-50%) skew(-18deg) rotate(-45deg)}
  .t4-seo-speech h2{font-size:25px}.t4-seo-speech p{font-size:11px}.t4-seo-speech>small{margin-top:9px}
  .t4-seo-duck{left:50%;bottom:-12px;width:260px;max-width:84%;transform:translateX(-50%) rotate(-1deg)}
  .t4-seo-capsules{right:-48px;bottom:-40px;width:180px;opacity:.28}
  .t4-seo .t4-seo-list{grid-template-columns:1fr;gap:10px}
  .t4-seo .t4-seo-list li{min-height:0;padding:14px}
  .t4-seo .t4-seo-cta{min-height:56px;padding:10px 12px;font-size:13px}
}
@media (max-width:420px){
  .t4-seo-show{min-height:465px}
  .t4-seo-duck{width:245px}
  .t4-seo-speech h2{font-size:23px}.t4-seo-speech p{line-height:1.45}
  .t4-seo .t4-seo-list li{grid-template-columns:42px minmax(0,1fr);gap:10px}
  .t4-seo-icon{width:42px;height:42px}
}

/* ============ 메인 배너 3종 프로모션 카피 ============ */
.t4-hero-slide::after{
  content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:52%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,249,226,.98) 0%,rgba(255,249,226,.9) 72%,rgba(255,249,226,0) 100%)
}
.t4-hero-copy{
  position:absolute;z-index:2;left:5%;top:49%;width:36%;max-width:620px;
  color:var(--navy-deep);transform:translateY(-50%);word-break:keep-all
}
.t4-hero-eyebrow{
  display:inline-flex;align-items:center;min-height:27px;padding:5px 12px;
  border:1px solid #d7aa00;border-radius:999px;background:var(--gold);color:var(--navy-deep);
  font-size:clamp(10px,.8vw,13px);font-weight:1000;line-height:1;box-shadow:0 3px 0 rgba(173,129,0,.2)
}
.t4-hero-copy .t4-hero-title{
  margin-top:12px;color:var(--navy-deep);font-size:clamp(27px,2.3vw,44px);
  font-weight:1000;line-height:1.08;letter-spacing:-1.5px;text-shadow:0 2px 0 #fff
}
.t4-hero-copy .t4-hero-title em{color:var(--blue);font-style:normal}
.t4-hero-copy p{
  max-width:560px;margin-top:12px;color:#405078;font-size:clamp(11px,.92vw,15px);
  font-weight:800;line-height:1.5;text-shadow:0 1px 0 #fff
}
.t4-hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.t4-hero-tags span{
  display:inline-flex;padding:5px 9px;border:1px solid #afc0e4;border-radius:8px;
  background:rgba(255,255,255,.9);color:var(--navy-deep);font-size:clamp(9px,.7vw,11px);font-weight:1000
}
.t4-hero-copy-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;margin-top:13px;padding:9px 16px;
  border:2px solid var(--navy-deep);border-radius:12px;background:var(--navy-deep);color:#fff;
  box-shadow:0 4px 0 #092c70,0 9px 18px rgba(8,42,107,.16);font-size:clamp(11px,.85vw,14px);font-weight:1000;
  text-decoration:none;transition:transform .15s,background .15s
}
.t4-hero-copy-cta b{color:var(--gold);font-size:18px;line-height:1}
.t4-hero-copy-cta:hover{background:#123f9d;transform:translateY(-2px)}
.t4-hero-copy-cta:active{transform:translateY(1px);box-shadow:0 2px 0 #092c70}

@media (max-width:820px){
  .t4-hero{--t4-hero-mobile-image-h:calc((100vw - 32px)/3)}
  .t4-hero-viewport{height:calc(var(--t4-hero-mobile-image-h) + 230px);aspect-ratio:auto;background:#fff8df}
  .t4-hero-img{position:absolute;left:0;top:0;width:100%;height:var(--t4-hero-mobile-image-h);object-fit:cover;border-bottom:2px solid var(--blue)}
  .t4-hero-slide::after{
    left:0;right:0;top:var(--t4-hero-mobile-image-h);bottom:0;width:auto;
    background:linear-gradient(145deg,#fffdf5 0%,#fff7d8 100%)
  }
  .t4-hero-copy{
    left:0;right:0;top:var(--t4-hero-mobile-image-h);bottom:0;width:auto;max-width:none;
    padding:14px 16px 48px;transform:none
  }
  .t4-hero-eyebrow{min-height:21px;padding:4px 9px;font-size:9px}
  .t4-hero-copy .t4-hero-title{margin-top:7px;font-size:clamp(22px,4.2vw,27px);line-height:1.08;letter-spacing:-1px;text-shadow:none}
  .t4-hero-copy p{max-width:96%;margin-top:7px;font-size:10.5px;line-height:1.42;text-shadow:none}
  .t4-hero-tags{display:none}
  .t4-hero-copy-cta{min-height:34px;margin-top:9px;padding:6px 11px;border-radius:9px;font-size:10.5px;box-shadow:0 3px 0 #092c70}
  .t4-hero-copy-cta b{font-size:15px}
  .t4-hero-arrow{display:none}
  .t4-hero-controls{left:auto;right:8px;bottom:8px;transform:none;padding:3px 5px}
  .t4-hero-dot,.t4-hero-toggle{width:27px;height:27px}
  .t4-hero-dot.is-active{width:27px}
  .t4-hero-dot.is-active::before{width:18px}
}
@media (max-width:560px){
  .t4-hero{--t4-hero-mobile-image-h:calc((100vw - 24px)/3)}
}
@media (max-width:390px){
  .t4-hero-copy{padding-left:14px;padding-right:14px}
  .t4-hero-copy .t4-hero-title{font-size:21px}
  .t4-hero-copy p{font-size:10px}
}

/* ========================================================================
   2026-07-18 · GACHA DUCK 시그니처 옐로/블루 팝업
   반복 어닝을 걷고, 큰 색면·캐릭터·스티커로 브랜드를 통일한다.
   ======================================================================== */
:root{
  --duck-yellow:#ffd21f;
  --duck-yellow-light:#fff1a6;
  --duck-blue:#0b4bcb;
  --duck-blue-dark:#073486;
  --duck-red:#f04432;
  --duck-wall:#f8f1e7;
}

body{
  background:#fff5c9;
  background-image:linear-gradient(180deg,#fff 0 7%,#fff8de 26%,#fff1ac 100%);
  background-size:100% 100%;
}

/* 반복 띠와 가는 헤더 장식은 전부 제거한다. TV 노이즈 효과만 유지한다. */
.t4-header::after,
.t4-stage::before,
#t4-side-locker::before,
.t4-picker-head::before,
#t4-side-mission::before,
.t4-stage .t4-ps-in::before,
.t4-modal-head::before,
.t4-seo-in::before,
.t4-seo .t4-seo-in::before,
.t4-footer::before,
.t4-modal .t4-invite-stats .t4-tile::before,
.t4-charge-opt::before{
  content:none!important;
  display:none!important;
}
/* 헤더: 흰색·노랑·파랑만 사용하고 얇은 띠 대신 독립된 버튼 면으로 구분 */
.t4-header{
  padding-top:9px;padding-bottom:9px;
  border-bottom:1px solid #c7d6ef;
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 22px rgba(7,52,134,.09)
}
.t4-logo{
  padding:4px 9px 4px 5px;border:2px solid var(--duck-blue-dark);border-radius:15px;
  background:var(--duck-yellow);box-shadow:0 3px 0 var(--duck-blue-dark)
}
.t4-search{border:2px solid #cbd9f1;background:#fff}
.t4-chip{border:1.5px solid #c8d6ee;background:#fff;box-shadow:none}
.t4-chip:hover{border-color:var(--duck-blue);background:#f7faff}
#t4-chip-charge{background:var(--duck-yellow);border-color:#c99400;color:var(--duck-blue-dark);box-shadow:0 3px 0 #b98700}
#t4-chip-locker{background:var(--duck-blue);border-color:var(--duck-blue-dark);box-shadow:0 3px 0 var(--duck-blue-dark)}

/* 좌·우 사이드 위젯은 역할마다 큰 색면을 써서 팝업스토어처럼 보이게 한다. */
.t4-card{border:1.5px solid #c7d5ed;background:#fff;box-shadow:0 9px 0 rgba(7,52,134,.06),0 16px 30px rgba(7,52,134,.07)}
#t4-side-locker{
  padding-top:14px;border:2px solid var(--duck-blue-dark);
  background:var(--duck-blue);box-shadow:0 8px 0 var(--duck-blue-dark),0 16px 28px rgba(7,52,134,.16)
}
#t4-side-locker .t4-card-head{border-bottom-color:rgba(255,255,255,.24)}
#t4-side-locker .t4-card-title,#t4-side-locker .t4-note{color:#fff}
#t4-side-locker .t4-card-title svg{border-color:#e4af00;background:var(--duck-yellow);color:var(--duck-blue-dark)}
#t4-side-locker .t4-mini-chip{border:1px solid #fff;background:#fff;color:var(--duck-blue-dark)}
#t4-side-locker .t4-tile{border:1px solid #fff;background:#fff;color:var(--ink)}
#t4-side-locker .t4-tile b{color:var(--duck-blue)}
#t4-side-locker #t4-ship-quick{border-color:#c99400;background:var(--duck-yellow);color:var(--duck-blue-dark);box-shadow:0 3px 0 #b98700}
#t4-side-invite{border:2px solid var(--duck-blue);background:var(--duck-yellow-light)}
#t4-side-recent{border:2px solid var(--duck-blue-dark);background:#fff}
#t4-side-mission{border:2px solid var(--duck-blue-dark);background:var(--duck-yellow);box-shadow:0 8px 0 var(--duck-blue-dark)}
#t4-side-mission .t4-card-head{margin-top:0;border-bottom-color:rgba(7,52,134,.22)}
.t4-mission-log{border-color:var(--duck-blue-dark);background:#fff9d7}
.t4-card-title svg{
  border:1.5px solid var(--duck-blue-dark);background:#fff;color:var(--duck-blue-dark);
  box-shadow:0 2px 0 var(--duck-blue-dark)
}

/* 밈 문구: 가챠덕이 직접 말하는 파란 간판 */
.t4-stage{
  padding:13px 14px 18px;border:3px solid var(--duck-blue-dark);
  background:var(--duck-yellow);box-shadow:0 10px 0 var(--duck-blue-dark),0 25px 48px rgba(7,52,134,.16)
}
.t4-stage-head{padding:2px 2px 12px;border:0;background:transparent}
.t4-meme-board{
  width:100%;min-height:66px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;gap:12px;padding:8px 13px;border:3px solid #fff;border-radius:18px;
  background:var(--duck-blue);box-shadow:0 0 0 3px var(--duck-blue-dark),0 5px 0 var(--duck-blue-dark)
}
.t4-meme-symbol{
  width:46px;height:46px;display:grid;place-items:center;overflow:hidden;
  border:2px solid var(--duck-blue-dark);border-radius:50%;background:var(--duck-yellow)
}
.t4-meme-symbol img{width:47px;height:47px;object-fit:contain;transform:scale(1.08)}
.t4-meme-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.t4-meme-copy small{color:var(--duck-yellow);font-size:8px;font-weight:950;letter-spacing:.19em}
.t4-meme{max-width:100%;color:#fff;font-size:15px;font-weight:950;line-height:1.35;text-align:left;letter-spacing:-.025em}
.t4-meme-stamp{
  min-width:64px;padding:7px 9px;border:2px solid var(--duck-blue-dark);border-radius:999px;
  background:var(--duck-yellow);color:var(--duck-blue-dark);font-size:12px;font-style:normal;font-weight:1000;
  text-align:center;transform:rotate(-5deg);box-shadow:0 3px 0 var(--duck-blue-dark)
}

/* 머신: 메인 벽지색 위에 팻말·빼꼼 덕·스티커를 하나의 진열대로 합성 */
.t4-machine{
  position:relative;aspect-ratio:1/1;margin:5px auto 0;overflow:hidden;
  border:2px solid var(--duck-blue-dark);border-radius:22px;background:var(--duck-wall);
  box-shadow:inset 0 -10px 0 var(--duck-blue),0 9px 0 rgba(7,52,134,.13);container-type:inline-size
}
.t4-machine::before{
  content:"";position:absolute;z-index:0;left:0;right:0;top:70.5%;bottom:0;
  background:linear-gradient(180deg,#ffd72c,#ffc515)
}
.t4-machine-shell{
  position:absolute;z-index:2;left:0;bottom:0;width:100%;aspect-ratio:1/1;
  overflow:visible;container-type:inline-size
}
.t4-machine-shell>.t4-machine-scene{position:absolute;inset:0;z-index:1}
.t4-machine-shell>.t4-machine-scene img{display:block;width:100%;height:100%;object-fit:contain}
.t4-machine-top-sign{
  position:absolute;z-index:9;left:29.5%;top:-2%;width:41%;height:auto;
  filter:drop-shadow(0 .18cqw .16cqw rgba(7,25,72,.24));pointer-events:none
}
.t4-machine-peek{
  position:absolute;z-index:1;left:auto;right:1%;top:29%;width:31%;height:auto;overflow:visible;
  clip-path:none;
  pointer-events:none
}
.t4-machine-peek img{
  display:block;width:100%;max-width:none;height:auto;transform:rotate(1deg);
  filter:drop-shadow(0 .65cqw .5cqw rgba(7,52,134,.25))
}
.t4-machine-wall-decor{position:absolute;z-index:4;inset:0;pointer-events:none}
.t4-wall-sticker,.t4-wall-star{position:absolute;height:auto;filter:drop-shadow(0 .5cqw .38cqw rgba(7,52,134,.18))}
.t4-wall-sticker--duck{left:1.7%;top:21%;width:15%;transform:rotate(-7deg)}
.t4-wall-sticker--got{right:2.2%;top:16.5%;width:10.5%;transform:rotate(8deg)}
.t4-wall-sticker--gacha{left:2.8%;top:43.5%;width:14.5%;transform:rotate(-5deg)}
.t4-wall-sticker--more{right:1.7%;top:59%;width:11.5%;transform:rotate(6deg)}
.t4-wall-star--one{left:17%;top:15.5%;width:3.5%;transform:rotate(-10deg)}
.t4-wall-star--two{right:16.5%;top:16.5%;width:3.2%;transform:rotate(12deg)}
.t4-machine .t4-fx{overflow:visible}

/* 우측 픽커와 실시간 영역 */
.t4-picker{border:2px solid var(--duck-blue-dark);box-shadow:0 8px 0 var(--duck-blue-dark),0 17px 30px rgba(7,52,134,.12)}
.t4-picker-head{padding-top:15px;background:var(--duck-blue)}
.t4-picker-badge{border:2px solid var(--duck-blue-dark);background:var(--duck-yellow);color:var(--duck-blue-dark);box-shadow:0 3px 0 var(--duck-blue-dark)}
.t4-product.is-selected{border:2px solid var(--duck-blue);background:#fff9d7;box-shadow:0 5px 0 var(--duck-yellow)}
.t4-stage .t4-ps-in{border:2px solid var(--duck-blue-dark);background:#fff;box-shadow:0 5px 0 var(--duck-blue-dark)}
.t4-stage .t4-ps-head>img{border:2px solid var(--duck-blue-dark);background:var(--duck-yellow)}
.t4-stage .t4-ps-head em{border:1px solid #c99700;background:var(--duck-yellow);color:var(--duck-blue-dark)}

/* 공통 팝업: 어닝·모눈 대신 파란 헤더와 노란 캐릭터 쇼윈도 */
.t4-modal{border:3px solid var(--duck-blue-dark);background:#fff;box-shadow:0 11px 0 var(--duck-blue-dark),0 34px 90px rgba(7,25,72,.3)}
.t4-modal-head{
  min-height:72px;padding:15px 20px;background:var(--duck-blue);color:#fff;
  border-bottom:3px solid var(--duck-yellow)
}
.t4-modal-head h2 small{padding:4px 8px;border-radius:999px;background:var(--duck-yellow);color:var(--duck-blue-dark)}
.t4-modal-x{border:2px solid var(--duck-blue-dark);background:var(--duck-yellow);color:var(--duck-blue-dark);box-shadow:0 3px 0 var(--duck-blue-dark)}
.t4-modal-body{background:#fff}
.t4-popup-duck,.t4-popup-duck--charge,.t4-popup-duck--invite,.t4-popup-duck--me{
  border-bottom:3px solid var(--duck-blue-dark);background:var(--duck-yellow);background-image:none
}
.t4-popup-duck::after{border:0;background:var(--duck-blue);opacity:.98}
.t4-popup-duck::before{color:#fff;text-shadow:0 2px 0 var(--duck-blue-dark)}
.t4-popup-duck__badge{border:2px solid var(--duck-blue-dark);background:#fff;color:var(--duck-blue-dark)}
.t4-popup-duck__scribble{border-color:var(--duck-blue-dark);background:#fff;color:var(--duck-blue-dark)}
.t4-modal .t4-invite-stats .t4-tile{padding-top:14px;border:2px solid var(--duck-blue);background:#fff}
.t4-charge-opt{padding-top:14px;border:2px solid #c7d5ed;background:#fff}
.t4-charge-opt:hover{border-color:var(--duck-blue);background:var(--duck-yellow-light)}
/* 소개판과 푸터도 시그니처 색면으로 마감 */
.t4-seo .t4-seo-in{
  padding-top:28px;border:3px solid var(--duck-blue-dark);
  background:var(--duck-yellow);box-shadow:0 9px 0 var(--duck-blue-dark),0 20px 38px rgba(7,52,134,.12)
}
.t4-seo-show{background:linear-gradient(145deg,#fff9dd 0 57%,#ffdd54 57% 100%)}
.t4-seo-show::before{content:none;display:none}
.t4-seo .t4-seo-list li{border:2px solid var(--duck-blue-dark);box-shadow:0 4px 0 var(--duck-blue-dark)}
.t4-footer{padding-top:4px;border-top:8px solid var(--duck-yellow);background:var(--duck-blue-dark)}
.t4-f-top{border-bottom-color:rgba(255,255,255,.2)}
.t4-f-col>b,.t4-f-cs>b{color:var(--duck-yellow)}
.t4-f-cs-btns button{border-color:rgba(255,255,255,.45);background:var(--duck-blue);color:#fff}

@media (max-width:760px){
  .t4-stage{padding:10px 7px 15px;border-width:2px;box-shadow:0 7px 0 var(--duck-blue-dark)}
  .t4-meme-board{grid-template-columns:40px minmax(0,1fr);min-height:58px;gap:9px;padding:7px 9px;border-width:2px}
  .t4-meme-symbol{width:38px;height:38px}.t4-meme-symbol img{width:40px;height:40px}
  .t4-meme-copy small{font-size:7px}.t4-meme{font-size:12.5px}.t4-meme-stamp{display:none}
  .t4-machine{border-radius:15px}
  .t4-machine-top-sign{left:29.5%;top:-2%;width:41%}
  .t4-machine-peek{left:auto;right:1%;top:29.5%;width:31%;height:auto}
  .t4-wall-sticker--duck{left:.8%;width:16.5%}.t4-wall-sticker--got{right:1%;top:17%;width:11.8%}
  .t4-wall-sticker--gacha{left:1%;width:15.5%}.t4-wall-sticker--more{right:.6%;width:12.5%}
  .t4-modal-head{min-height:66px;padding:12px 15px}
  .t4-seo .t4-seo-in{padding:20px 16px}
}

@media (max-width:480px){
  .t4-machine-shell{left:0;width:100%}
  .t4-machine-top-sign{left:29.5%;top:-2%;width:41%}
  .t4-machine-peek{left:auto;right:.5%;top:30%;width:31.5%;height:auto}
  .t4-wall-sticker--gacha,.t4-wall-sticker--more{display:none}
  .t4-wall-sticker--duck{top:23%;width:17.5%}.t4-wall-sticker--got{top:18%;width:13%}
  .t4-wall-star--one,.t4-wall-star--two{width:4.2%}
  .t4-popup-duck{background:var(--duck-yellow);background-image:none}
}

/* ========================================================================
   2026-07-18 · GACHA DUCK 전용 캡슐 & 결과 개봉 연출
   ======================================================================== */
.t4-duck-capsule{
  position:absolute;display:block;aspect-ratio:1;border-radius:50%;
  transform-style:preserve-3d;filter:drop-shadow(0 .7cqw .55cqw rgba(4,20,58,.32));
  isolation:isolate
}
.t4-duck-capsule .t4-cap-top,
.t4-duck-capsule .t4-cap-bottom{
  position:absolute;left:0;width:100%;height:53%;overflow:hidden;
  border:.38cqw solid var(--duck-blue-dark);box-sizing:border-box
}
.t4-duck-capsule .t4-cap-top{
  top:0;border-radius:52% 52% 13% 13% / 88% 88% 20% 20%;
  background:
    radial-gradient(circle at 31% 19%,rgba(255,255,255,.98) 0 8%,rgba(255,255,255,0) 9%),
    radial-gradient(circle at 38% 30%,#fff7a9 0 11%,transparent 31%),
    linear-gradient(145deg,#fffbe4 0 10%,#ffe866 36%,#ffd21f 67%,#e9ab00 100%);
  box-shadow:inset -.8cqw -1cqw 1.5cqw rgba(190,123,0,.22),inset .8cqw .7cqw 1.2cqw rgba(255,255,255,.55)
}
.t4-duck-capsule .t4-cap-bottom{
  bottom:0;border-radius:13% 13% 52% 52% / 20% 20% 88% 88%;
  background:
    radial-gradient(circle at 32% 18%,rgba(109,168,255,.78) 0 7%,transparent 25%),
    linear-gradient(145deg,#2d74ef 0 28%,#0b4bcb 61%,#052b7c 100%);
  box-shadow:inset -.9cqw -1.1cqw 1.5cqw rgba(1,20,67,.32),inset .7cqw .6cqw 1.1cqw rgba(126,180,255,.45)
}
.t4-duck-capsule .t4-cap-band{
  position:absolute;z-index:3;left:1%;right:1%;top:43%;height:15%;
  border:.3cqw solid var(--duck-blue-dark);border-radius:999px;
  background:linear-gradient(180deg,#fff,#fff8df 58%,#e9d7a4);box-shadow:0 .2cqw .32cqw rgba(3,22,66,.24)
}
.t4-duck-capsule .t4-cap-badge{
  position:absolute;z-index:5;left:50%;top:50%;width:39%;aspect-ratio:1;
  display:grid;place-items:center;overflow:hidden;transform:translate(-50%,-50%);
  border:.34cqw solid var(--duck-blue-dark);border-radius:50%;background:#fff;
  box-shadow:0 .25cqw .38cqw rgba(3,22,66,.28),inset 0 0 0 .3cqw var(--duck-yellow)
}
.t4-duck-capsule .t4-cap-badge img{display:block;width:112%;max-width:none;height:112%;object-fit:contain;transform:translateY(1%)}
.t4-duck-capsule .t4-cap-shine{
  position:absolute;z-index:6;left:17%;top:12%;width:21%;height:10%;
  border-radius:50%;background:rgba(255,255,255,.88);filter:blur(.05cqw);transform:rotate(-28deg)
}
.t4-duck-capsule.is-secret::before{
  content:"";position:absolute;z-index:-1;inset:-10%;border:.55cqw solid var(--duck-red);border-radius:50%;
  box-shadow:0 0 2.4cqw rgba(240,68,50,.8);animation:t4SecretPulse .58s ease-in-out infinite alternate
}
@keyframes t4SecretPulse{to{transform:scale(1.08);opacity:.55}}

/* 배출구에서 굴러 나오는 캡슐 */
.t4-machine .t4-capsule-drop.t4-duck-capsule{
  width:10.8cqw;height:10.8cqw;border:0;border-radius:50%;background:none;
  animation:t4DuckCapsuleDrop 1.34s cubic-bezier(.2,.72,.28,1) both
}
@keyframes t4DuckCapsuleDrop{
  0%{transform:translate(-50%,-75%) scale(.2) rotate(0);opacity:0}
  12%{transform:translate(-50%,2%) scale(.9) rotate(-28deg);opacity:1}
  28%{transform:translate(-74%,38%) scale(1.04) rotate(-72deg)}
  43%{transform:translate(-104%,-3%) scale(1) rotate(-126deg)}
  62%{transform:translate(-142%,34%) rotate(-218deg)}
  79%{transform:translate(-176%,8%) rotate(-306deg)}
  100%{transform:translate(-214%,31%) rotate(-430deg);opacity:1}
}

/* 결과 화면 자체를 어두운 박스가 아니라 파랑·노랑 쇼 스테이지로 변경 */
.t4-machine .t4-result{
  background:
    radial-gradient(circle at 50% 43%,rgba(255,216,52,.34) 0 11%,rgba(255,216,52,0) 39%),
    linear-gradient(155deg,#0d5be0 0,#073486 52%,#041d55 100%);
  box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.25),inset 0 -2cqw 4cqw rgba(1,14,47,.28)
}
.t4-duck-open{position:absolute;inset:0;overflow:hidden}
.t4-capsule-status{
  position:absolute;z-index:6;left:50%;top:7%;transform:translateX(-50%);
  padding:.55cqw 1.5cqw;border:.25cqw solid var(--duck-blue-dark);border-radius:999px;
  background:var(--duck-yellow);color:var(--duck-blue-dark);
  font-size:clamp(8px,1.25cqw,12px);font-weight:1000;letter-spacing:.12em;white-space:nowrap;
  box-shadow:0 .35cqw 0 rgba(3,25,76,.7);animation:t4CapsuleStatus .45s ease-out both
}
@keyframes t4CapsuleStatus{from{opacity:0;transform:translate(-50%,-130%)}}
.t4-open-rays{
  position:absolute;z-index:0;left:50%;top:43%;width:42cqw;height:42cqw;
  transform:translate(-50%,-50%);border-radius:50%;opacity:.48;
  background:repeating-conic-gradient(from 4deg,var(--duck-yellow) 0 6deg,transparent 6deg 28deg);
  -webkit-mask:radial-gradient(circle,transparent 0 21%,#000 22% 66%,transparent 67%);
  mask:radial-gradient(circle,transparent 0 21%,#000 22% 66%,transparent 67%);
  animation:t4DuckRays 3s linear infinite
}
@keyframes t4DuckRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.t4-open-cap.t4-duck-capsule{
  left:50%;top:43%;width:23cqw;height:23cqw;z-index:3;
  transform:translate(-50%,-50%);
  animation:t4DuckCapIn .52s cubic-bezier(.2,1.55,.35,1) both,t4DuckCapShake .48s ease-in-out .55s forwards
}
@keyframes t4DuckCapIn{from{transform:translate(-50%,-280%) scale(.42) rotate(-120deg);opacity:0}}
@keyframes t4DuckCapShake{
  0%,100%{transform:translate(-50%,-50%) rotate(0)}
  20%{transform:translate(-54%,-50%) rotate(-9deg)}
  40%{transform:translate(-46%,-51%) rotate(10deg)}
  60%{transform:translate(-53%,-49%) rotate(-7deg)}
  80%{transform:translate(-47%,-51%) rotate(5deg)}
}
.t4-duck-open .t4-open-cap .t4-cap-top{transform-origin:50% 100%;animation:t4DuckTopOpen .62s cubic-bezier(.25,.72,.35,1) 1.04s both}
.t4-duck-open .t4-open-cap .t4-cap-bottom{transform-origin:50% 0;animation:t4DuckBottomOpen .62s cubic-bezier(.25,.72,.35,1) 1.04s both}
.t4-duck-open .t4-open-cap .t4-cap-band,
.t4-duck-open .t4-open-cap .t4-cap-badge,
.t4-duck-open .t4-open-cap .t4-cap-shine{animation:t4DuckSealOpen .25s ease-out 1.02s both}
@keyframes t4DuckTopOpen{to{transform:translate(-8cqw,-17cqw) rotate(-42deg);opacity:0}}
@keyframes t4DuckBottomOpen{to{transform:translate(7cqw,13cqw) rotate(28deg);opacity:0}}
@keyframes t4DuckSealOpen{to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
.t4-duck-open .t4-cap-band{transform:none}
.t4-duck-open .t4-cap-shine{transform:rotate(-28deg)}
.t4-duck-open .t4-cap-band{animation-name:t4DuckBandOpen}
.t4-duck-open .t4-cap-shine{animation-name:t4DuckShineOpen}
@keyframes t4DuckBandOpen{to{transform:scale(1.65);opacity:0}}
@keyframes t4DuckShineOpen{to{transform:rotate(-28deg) scale(1.8);opacity:0}}
.t4-duck-open .t4-open-burst{
  left:50%;top:43%;border-color:var(--duck-yellow);box-shadow:0 0 4cqw rgba(255,210,31,.8);
  animation:t4DuckBurstRing .65s ease-out 1.02s both
}
@keyframes t4DuckBurstRing{0%{transform:scale(.25);opacity:1}100%{transform:scale(6);opacity:0;border-width:.12cqw}}
.t4-duck-open .t4-open-prize{animation:t4DuckPrizeReveal .62s cubic-bezier(.16,1.5,.35,1) 1.28s both}
@keyframes t4DuckPrizeReveal{from{opacity:0;transform:translateY(5cqw) scale(.22)}to{opacity:1;transform:none}}
.t4-duck-open .t4-open-prize img{
  width:17.5cqw;border:.5cqw solid #fff;border-radius:2.1cqw;
  object-fit:contain;background:#fff;
  box-shadow:0 0 0 .42cqw var(--duck-yellow),0 1.2cqw 3cqw rgba(1,18,55,.36)
}
.t4-duck-open .t4-open-prize>b{text-shadow:0 .22cqw .35cqw rgba(1,18,55,.6)}
.t4-duck-open .t4-result-stamp{background:var(--duck-yellow);border-color:#fff;color:var(--duck-blue-dark)}
.t4-duck-open.is-secret .t4-open-rays{background:repeating-conic-gradient(from 4deg,#ffef78 0 6deg,transparent 6deg 22deg,var(--duck-red) 22deg 28deg,transparent 28deg 36deg)}

/* 5회 결과도 각 상품 위 가챠덕 미니 캡슐이 순서대로 열리게 한다. */
.t4-result-multi{background:linear-gradient(155deg,#0d5be0,#073486 55%,#041d55)}
.t4-rm-item{overflow:visible;border:.22cqw solid var(--duck-yellow);box-shadow:0 .5cqw 1.2cqw rgba(1,18,55,.3)}
.t4-rm-item::after{content:none!important;display:none!important}
.t4-rm-item>img{object-fit:contain;background:#fff}
.t4-rm-item>img,.t4-rm-item>small{animation:t4RmDuckReveal .42s ease-out calc(var(--d,0ms) + .82s) both}
@keyframes t4RmDuckReveal{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
.t4-rm-capsule.t4-duck-capsule{
  z-index:5;left:-3%;top:-8%;width:106%;height:auto;pointer-events:none;
  animation:t4RmCapsuleGone .12s linear calc(var(--d,0ms) + 1.02s) both
}
.t4-rm-capsule .t4-cap-top{animation:t4RmTopOpen .45s ease-in calc(var(--d,0ms) + .62s) both}
.t4-rm-capsule .t4-cap-bottom{animation:t4RmBottomOpen .45s ease-in calc(var(--d,0ms) + .62s) both}
.t4-rm-capsule .t4-cap-band,.t4-rm-capsule .t4-cap-shine{animation:t4RmSealGone .2s ease-out calc(var(--d,0ms) + .6s) both}
.t4-rm-capsule .t4-cap-badge{animation:t4RmBadgeGone .2s ease-out calc(var(--d,0ms) + .6s) both}
@keyframes t4RmTopOpen{to{transform:translate(-35%,-55%) rotate(-35deg);opacity:0}}
@keyframes t4RmBottomOpen{to{transform:translate(32%,48%) rotate(28deg);opacity:0}}
@keyframes t4RmSealGone{to{opacity:0;transform:scale(1.5)}}
@keyframes t4RmBadgeGone{to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes t4RmCapsuleGone{to{visibility:hidden}}

/* 화면 전체에서 떨어지는 종이 대신 결과창 중심의 별·캡슐 폭발 */
.t4-duck-confetti{position:fixed;inset:0;z-index:140;overflow:hidden;pointer-events:none}
.t4-duck-confetti i{
  position:fixed;left:var(--cx);top:var(--cy);width:10px;height:10px;margin:0;
  animation:t4DuckConfetti 1.55s cubic-bezier(.12,.72,.35,1) both;will-change:transform,opacity
}
.t4-duck-confetti i.is-star{width:14px;height:14px;clip-path:polygon(50% 0,62% 34%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 34%)}
.t4-duck-confetti i.is-capsule{
  width:12px;height:16px;border:1.5px solid var(--duck-blue-dark);border-radius:999px;
  background:linear-gradient(180deg,var(--duck-yellow) 0 48%,#fff 49% 55%,var(--duck-blue) 56% 100%)!important
}
.t4-duck-confetti i.is-dot{border:2px solid #fff;border-radius:50%}
@keyframes t4DuckConfetti{
  0%{transform:translate(-50%,-50%) scale(.12) rotate(0);opacity:0}
  12%{opacity:1}
  62%{transform:translate(calc(-50% + var(--x1)),calc(-50% + var(--y1))) scale(1) rotate(var(--spin));opacity:1}
  100%{transform:translate(calc(-50% + var(--x2)),calc(-50% + var(--y2))) scale(.72) rotate(var(--spin));opacity:0}
}

@media (max-width:760px){
  .t4-open-cap.t4-duck-capsule{width:25cqw;height:25cqw}
  .t4-duck-open .t4-open-prize img{width:28cqw}
  .t4-capsule-status{top:5%;font-size:clamp(8px,2.2cqw,11px)}
}

@media (prefers-reduced-motion:reduce){
  .t4-open-cap.t4-duck-capsule,
  .t4-duck-open .t4-open-cap .t4-cap-top,
  .t4-duck-open .t4-open-cap .t4-cap-bottom,
  .t4-duck-open .t4-open-cap .t4-cap-band,
  .t4-duck-open .t4-open-cap .t4-cap-badge,
  .t4-duck-open .t4-open-cap .t4-cap-shine,
  .t4-duck-open .t4-open-burst,
  .t4-duck-open .t4-open-prize,
  .t4-rm-item>img,.t4-rm-item>small,
  .t4-rm-capsule.t4-duck-capsule,
  .t4-rm-capsule .t4-cap-top,.t4-rm-capsule .t4-cap-bottom,
  .t4-rm-capsule .t4-cap-band,.t4-rm-capsule .t4-cap-badge,.t4-rm-capsule .t4-cap-shine{
    animation-delay:0ms!important
  }
}

/* ========================================================================
   2026-07-18 · 결과 화면 최종 3행 레이아웃
   상단 배지 / 상품 무대 / 안내·닫기를 분리해 작은 TV에서도 겹치지 않는다.
   ======================================================================== */
.t4-machine .t4-result{isolation:isolate}
.t4-machine .t4-result .t4-result-shell{
  position:absolute;inset:0;z-index:7;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;gap:4px;
  min-width:0;min-height:0;padding:4% 4% 3%;box-sizing:border-box;text-align:center
}
.t4-machine .t4-result .t4-result-head{
  position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;
  gap:7px;min-width:0;min-height:25px
}
.t4-machine .t4-result .t4-capsule-status{
  position:static;left:auto;top:auto;flex:0 1 auto;max-width:68%;min-width:0;
  padding:5px 9px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;
  transform:none;border-width:2px;border-radius:999px;white-space:nowrap;
  font-size:clamp(8px,1.2cqw,10px);line-height:1;letter-spacing:.08em;
  box-shadow:0 3px 0 rgba(3,25,76,.72)
}
@keyframes t4CapsuleStatus{
  from{opacity:0;transform:translateY(-120%)}
  to{opacity:1;transform:none}
}
.t4-machine .t4-result .t4-result-stamp{
  position:static;top:auto;right:auto;flex:0 0 auto;max-width:28%;min-width:0;
  padding:5px 9px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;
  transform:rotate(5deg);border-width:2px;white-space:nowrap;
  font-size:clamp(8px,1.25cqw,10px);line-height:1;box-shadow:0 3px 0 var(--duck-blue-dark);
  animation:t4ResultStampSafe .34s ease-out 1.35s both
}
@keyframes t4ResultStampSafe{
  from{opacity:0;transform:translateY(-8px) rotate(5deg)}
  to{opacity:1;transform:rotate(5deg)}
}
.t4-duck-open .t4-open-rays{opacity:.26}

.t4-machine .t4-result .t4-open-prize{
  position:static;inset:auto;z-index:3;display:grid;
  grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;
  width:100%;min-width:0;min-height:0;gap:4px;padding:0;box-sizing:border-box
}
.t4-machine .t4-result .t4-result-art{
  display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden
}
.t4-machine .t4-result .t4-result-art img{
  display:block;width:auto;height:auto;max-width:72%;max-height:100%;aspect-ratio:auto;
  border:.38cqw solid #fff;border-radius:1.55cqw;object-fit:contain;background:#fff;
  box-shadow:0 0 0 .32cqw var(--duck-yellow),0 .7cqw 1.7cqw rgba(1,18,55,.34)
}
.t4-machine .t4-result .t4-result-info{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  max-width:96%;min-width:0;color:#fff
}
.t4-machine .t4-result .t4-result-info>b{
  display:-webkit-box;max-width:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  color:#fff;font-size:clamp(11px,1.7cqw,15px);font-weight:1000;line-height:1.14;
  overflow-wrap:anywhere;word-break:keep-all;text-wrap:balance;text-shadow:0 2px 3px rgba(1,18,55,.62)
}
.t4-machine .t4-result .t4-result-rank{
  flex:0 0 auto;padding:3px 8px;font-size:clamp(8px,1.05cqw,10px);line-height:1
}
.t4-machine .t4-result .t4-result-foot{
  position:relative;z-index:9;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:7px;width:100%;min-width:0;min-height:30px
}
.t4-machine .t4-result .t4-result-note{
  display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  color:#dce8ff;font-size:clamp(8px,1.1cqw,10px);font-weight:800;line-height:1.2;
  text-align:left;white-space:nowrap
}
.t4-machine .t4-result .t4-result-close{
  position:static;left:auto;right:auto;bottom:auto;z-index:auto;min-width:66px;min-height:30px;
  margin:0;padding:6px 11px;transform:none;border:2px solid #fff;border-radius:999px;
  background:#fff;color:var(--duck-blue-dark);font-size:clamp(10px,1.25cqw,12px);
  line-height:1;font-weight:1000;white-space:nowrap;box-shadow:0 3px 0 var(--duck-blue-dark)
}
.t4-machine .t4-result .t4-result-close:hover{background:var(--duck-yellow)}
.t4-machine .t4-result .t4-result-close:focus-visible{outline:3px solid var(--duck-yellow);outline-offset:2px}

/* 5회 결과도 동일한 header / main / footer 구조를 사용한다. */
.t4-machine .t4-result .t4-result-multi{
  align-items:stretch;justify-items:stretch;background:transparent
}
.t4-machine .t4-result .t4-result-multi .t4-result-head{justify-content:center}
.t4-machine .t4-result .t4-result-multi .t4-result-head>b{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#fff;
  font-size:clamp(11px,1.55cqw,14px);font-weight:1000;line-height:1.1;white-space:nowrap
}
.t4-machine .t4-result .t4-rm-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;
  width:100%;min-width:0;min-height:0;gap:clamp(2px,.45cqw,4px)
}
.t4-machine .t4-result .t4-rm-item{
  position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;
  min-width:0;min-height:0;padding:clamp(2px,.35cqw,4px);overflow:hidden;
  border:.2cqw solid var(--duck-yellow);border-radius:7px;background:#fff;
  outline:none;box-shadow:0 .35cqw .8cqw rgba(1,18,55,.26)
}
.t4-machine .t4-result .t4-rm-item.is-secret{
  background:#fff;outline:2px solid var(--duck-red);outline-offset:-2px;
  box-shadow:0 0 1.1cqw rgba(240,68,50,.58)
}
.t4-machine .t4-result .t4-rm-item>img{
  display:block;width:100%;height:100%;min-height:0;aspect-ratio:auto;
  border-radius:5px;object-fit:contain;background:#fff
}
.t4-machine .t4-result .t4-rm-item>small{
  display:-webkit-box;height:2.25em;min-width:0;margin:2px 0 0;overflow:hidden;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--duck-blue-dark);
  font-size:clamp(7px,.82cqw,9px);font-weight:900;line-height:1.12;
  overflow-wrap:anywhere;word-break:keep-all;white-space:normal
}
.t4-machine .t4-result .t4-rm-capsule.t4-duck-capsule{
  left:-3%;top:-4%;width:106%;max-width:none;height:auto
}

@media (max-width:760px){
  .t4-machine.has-result>.t4-machine-top-sign,
  .t4-machine.has-result>.t4-machine-wall-decor,
  .t4-machine.has-result>.t4-machine-peek{opacity:0;visibility:hidden}
  .t4-machine .t4-result .t4-result-shell{gap:5px;padding:3.5% 4% 3%}
  .t4-machine .t4-result .t4-result-head{min-height:28px}
  .t4-machine .t4-result .t4-result-art img{width:auto;max-width:58%;max-height:100%}
  .t4-machine .t4-result .t4-result-info>b{font-size:clamp(12px,2.65cqw,17px)}
  .t4-machine .t4-result .t4-result-note{font-size:clamp(8px,1.8cqw,11px)}
  .t4-machine .t4-result .t4-result-close{min-width:68px;min-height:32px;font-size:clamp(10px,2cqw,13px)}
  .t4-machine .t4-result .t4-rm-item>small{font-size:clamp(7px,1.35cqw,10px)}
}

.t4-machine .t4-result .t4-open-prize{
  animation:t4ResultPrizeSafe .42s ease-out 1.28s both
}
@keyframes t4ResultPrizeSafe{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .t4-machine .t4-result .t4-capsule-status,
  .t4-machine .t4-result .t4-result-stamp,
  .t4-machine .t4-result .t4-open-prize{
    animation-duration:.01ms!important;animation-delay:0ms!important
  }
}

/* ========================================================================
   2026-07-18 · 구성/확률 팝업 컴팩트 리디자인
   확대 커서를 제거하고 한 줄 2개의 작은 캡슐 카드로 고정한다.
   ======================================================================== */
.t4-modal.t4-modal--lineup{
  width:min(820px,calc(100vw - 24px));max-width:820px;border-color:var(--duck-blue-dark)
}
.t4-modal--lineup .t4-modal-head{
  min-height:62px;padding:11px 16px;background:linear-gradient(135deg,var(--duck-blue-dark),var(--duck-blue));
  color:#fff;border-bottom:3px solid var(--duck-yellow)
}
.t4-modal--lineup .t4-modal-head h2{font-size:18px;line-height:1.18}
.t4-modal--lineup .t4-modal-x{width:38px;height:38px;background:var(--duck-yellow)}
.t4-modal--lineup .t4-lineup-body{
  max-height:calc(100vh - 132px);padding:15px 16px 17px;overflow:auto;
  background:linear-gradient(180deg,#fffdf6 0,#fff 46%,#f7faff 100%)
}

/* 확률은 파란 정보판 + 노란 핵심 수치로 브랜드 위계를 맞춘다. */
.t4-modal--lineup .t4-lineup-prob{
  margin-bottom:13px;overflow:hidden;border:2px solid var(--duck-blue-dark);border-radius:14px;background:#fff;
  box-shadow:0 4px 0 var(--duck-blue-dark)
}
.t4-modal--lineup .t4-lineup-prob-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
  background:var(--duck-blue);color:#fff
}
.t4-modal--lineup .t4-lineup-prob-head>span{display:flex;align-items:baseline;gap:8px;min-width:0}
.t4-modal--lineup .t4-lineup-prob-head small{
  color:var(--duck-yellow);font-size:8px;font-weight:1000;letter-spacing:.16em;white-space:nowrap
}
.t4-modal--lineup .t4-lineup-prob-head b{font-size:13px;font-weight:1000}
.t4-modal--lineup .t4-lineup-prob-head>em{
  flex:0 0 auto;padding:4px 9px;border:1px solid #d19f00;border-radius:999px;
  background:var(--duck-yellow);color:var(--duck-blue-dark);font-size:10px;font-style:normal;font-weight:1000
}
.t4-modal--lineup .t4-prob-table{
  width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:11px
}
.t4-modal--lineup .t4-prob-table th,
.t4-modal--lineup .t4-prob-table td{
  padding:7px 10px;border:0;border-right:1px solid #dbe5f7;text-align:left
}
.t4-modal--lineup .t4-prob-table th:last-child,
.t4-modal--lineup .t4-prob-table td:last-child{border-right:0}
.t4-modal--lineup .t4-prob-table th{
  background:#eaf1ff;color:var(--duck-blue-dark);font-size:9px;font-weight:1000;letter-spacing:.04em
}
.t4-modal--lineup .t4-prob-table td{
  border-top:1px solid #dbe5f7;background:#fff;color:var(--duck-blue-dark);font-weight:900
}
.t4-modal--lineup .t4-prob-table tbody tr:nth-child(even) td{background:#fffaf0}
.t4-modal--lineup .t4-prob-rank{display:inline-flex;align-items:center;gap:6px}
.t4-modal--lineup .t4-prob-rank i{
  width:8px;height:8px;flex:0 0 auto;border:2px solid var(--duck-blue-dark);border-radius:50%;background:var(--duck-yellow)
}
.t4-modal--lineup .t4-prob-table tr.is-secret .t4-prob-rank i{background:var(--duck-red)}
.t4-modal--lineup .t4-prob-val{
  display:inline-flex;min-width:58px;justify-content:center;margin:0;padding:4px 9px;
  border:1px solid #d19f00;border-radius:999px;background:var(--duck-yellow);
  color:var(--duck-blue-dark);font-size:11px;font-weight:1000;line-height:1
}
.t4-modal--lineup .t4-prob-count{
  display:inline-flex;padding:4px 8px;border:1px solid #bfd0f1;border-radius:999px;
  background:#edf3ff;color:var(--duck-blue);font-size:10px;font-weight:1000;line-height:1
}

.t4-modal--lineup .t4-lineup-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 2px 8px
}
.t4-modal--lineup .t4-lineup-section-head>span{display:flex;flex-direction:column;gap:1px}
.t4-modal--lineup .t4-lineup-section-head small{
  color:var(--duck-blue);font-size:8px;font-weight:1000;letter-spacing:.15em
}
.t4-modal--lineup .t4-lineup-section-head b{color:var(--duck-blue-dark);font-size:14px;font-weight:1000}
.t4-modal--lineup .t4-lineup-section-head>em{
  padding:4px 9px;border-radius:999px;background:var(--duck-blue-dark);color:var(--duck-yellow);
  font-size:10px;font-style:normal;font-weight:1000
}

/* 한 줄에 2개. 이미지는 고정 썸네일이라 더 이상 확대되거나 돋보기 커서가 나오지 않는다. */
.t4-modal--lineup .t4-lineup-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
}
.t4-modal--lineup .t4-lineup-cell{
  position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:9px;
  min-width:0;min-height:96px;padding:8px;border:1.5px solid #cbd9f2;border-radius:12px;
  background:#fff;text-align:left;box-shadow:0 3px 0 #e1e8f5;transition:border-color .15s,background .15s
}
.t4-modal--lineup .t4-lineup-cell:hover{border-color:var(--duck-blue);background:#fffdf4}
.t4-modal--lineup .t4-lineup-cell.is-secret{border-color:var(--duck-red);box-shadow:0 3px 0 #ffd8d2}
.t4-modal--lineup .t4-lineup-thumb{
  display:grid;place-items:center;width:88px;height:78px;overflow:hidden;
  border:1px solid #d7e2f5;border-radius:9px;background:#fff9de
}
.t4-modal--lineup .t4-lineup-thumb img,
.t4-modal--lineup .t4-lineup-thumb img:hover{
  display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;
  position:static!important;z-index:auto!important;border:0;border-radius:0;background:#fff;
  cursor:default;transform:none!important;
  box-shadow:none!important;transition:none
}
.t4-modal--lineup .t4-lineup-copy{
  display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:4px
}
.t4-modal--lineup .t4-lineup-copy>small{
  color:var(--duck-blue);font-size:7px;font-weight:1000;letter-spacing:.12em
}
.t4-modal--lineup .t4-lineup-copy>b{
  display:-webkit-box;max-width:100%;min-height:2.34em;margin:0;overflow:hidden;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--duck-blue-dark);
  font-size:12px;font-weight:1000;line-height:1.17;overflow-wrap:anywhere;word-break:keep-all
}
.t4-modal--lineup .t4-lineup-copy>em{
  display:flex;max-width:100%;min-width:0;flex-wrap:wrap;align-items:center;gap:2px 6px;
  margin:1px 0 0;padding:4px 7px;border:1px solid #bfd0f1;border-radius:8px;
  background:#edf3ff;color:var(--duck-blue-dark);font-size:9px;font-style:normal;font-weight:900;line-height:1.05
}
.t4-modal--lineup .t4-lineup-copy>em span{color:#637398;font-size:8px}
.t4-modal--lineup .t4-lineup-copy>em strong{font-size:10px;font-weight:1000;white-space:nowrap}
.t4-modal--lineup .t4-lineup-copy>em.is-secret{
  border-color:#ffc4bb;background:#fff0ed;color:var(--duck-red)
}

@media (max-width:640px){
  .t4-modal.t4-modal--lineup{width:min(100%,calc(100vw - 16px))}
  .t4-modal--lineup .t4-modal-head{min-height:56px;padding:9px 11px}
  .t4-modal--lineup .t4-modal-head h2{font-size:15px}
  .t4-modal--lineup .t4-modal-x{width:34px;height:34px}
  .t4-modal--lineup .t4-lineup-body{padding:10px}
  .t4-modal--lineup .t4-lineup-prob-head{padding:8px 9px}
  .t4-modal--lineup .t4-lineup-prob-head>span{align-items:flex-start;flex-direction:column;gap:0}
  .t4-modal--lineup .t4-prob-table th,.t4-modal--lineup .t4-prob-table td{padding:6px 7px}
  .t4-modal--lineup .t4-lineup-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .t4-modal--lineup .t4-lineup-cell{
    display:flex;min-height:0;flex-direction:column;align-items:stretch;gap:6px;padding:6px
  }
  .t4-modal--lineup .t4-lineup-thumb{width:100%;height:78px}
  .t4-modal--lineup .t4-lineup-copy{gap:3px}
  .t4-modal--lineup .t4-lineup-copy>b{min-height:2.3em;font-size:10px;line-height:1.15}
  .t4-modal--lineup .t4-lineup-copy>em{width:100%;justify-content:space-between;padding:4px 5px}
  .t4-modal--lineup .t4-lineup-copy>em span{display:none}
  .t4-modal--lineup .t4-lineup-copy>em strong{font-size:9px}
}

/* 보유 잔액은 포인트 약자 대신 숫자 오른쪽에 원 단위를 붙인다. */
#t4-op{
  display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap;font-variant-numeric:tabular-nums
}
#t4-op .t4-balance-num{font-weight:1000;letter-spacing:-.02em}
#t4-op .t4-balance-unit{
  display:inline;margin:0;color:var(--duck-blue-dark);font-size:.68em;font-weight:1000;line-height:1
}
.t4-modal-body--me .t4-tile b.t4-balance-value{
  display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums
}
.t4-modal-body--me .t4-tile b.t4-balance-value .t4-balance-num{
  display:inline;margin:0;color:var(--duck-blue);font-size:inherit;font-weight:1000;line-height:1
}
.t4-modal-body--me .t4-tile b.t4-balance-value .t4-balance-unit{
  display:inline;margin:0;color:var(--duck-blue-dark);font-size:.5em;font-weight:1000;line-height:1
}

/* 데스크톱 배너: 문구용 밝기 보정은 벽 중앙에만 두고 처마·바닥은 원본 색을 유지한다. */
@media (min-width:821px){
  .t4-hero-slide::after{
    left:0;top:11%;bottom:30%;width:51%;border-radius:0 26px 26px 0;
    background:linear-gradient(90deg,rgba(255,248,219,.7) 0%,rgba(255,248,219,.48) 68%,rgba(255,248,219,0) 100%)
  }
  .t4-hero-img{filter:none;image-rendering:auto}
}

/* ========================================================================
   2026-07-19 · 모바일 규격 통합: 로고 · 슬라이드 · 2열 픽커 · 컴팩트 푸터
   ======================================================================== */

/* 로고 이미지는 원본 캔버스의 투명 여백만큼 간격을 당겨 실제 심볼과 글자가 붙어 보이게 한다. */
.t4-header .t4-logo,
.t4-footer .t4-footer-logo{
  min-width:0;padding:0;border:0;border-radius:0;background:transparent;
  box-shadow:none;gap:0;overflow:visible
}
.t4-header .t4-logo-symbol{width:42px;height:42px}
.t4-header .t4-logo-wordmark{height:27px;margin-left:-15px;margin-right:-11px}
.t4-footer .t4-footer-logo{margin:0 0 8px}
.t4-footer .t4-footer-logo-symbol{width:42px;height:42px}
.t4-footer .t4-footer-logo-wordmark{height:24px;margin-left:-15px;margin-right:-10px}

@keyframes t4HeroEnterRight{
  from{transform:translate3d(100%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes t4HeroExitLeft{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-100%,0,0)}
}
@keyframes t4HeroEnterLeft{
  from{transform:translate3d(-100%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes t4HeroExitRight{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(100%,0,0)}
}

@media (max-width:820px){
  :root{--shell-pad:14px}
  body{overflow-x:hidden}

  /* 헤더는 로고/필수 메뉴 한 줄 + 검색 한 줄로 고정한다. */
  .t4-header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:8px 10px;padding:8px var(--shell-pad) 9px
  }
  .t4-header .t4-logo{grid-column:1;grid-row:1;justify-self:start}
  .t4-header .t4-logo-symbol{width:38px;height:38px}
  .t4-header .t4-logo-wordmark{height:23px;margin-left:-14px;margin-right:-10px}
  .t4-header .t4-chips{
    grid-column:2;grid-row:1;justify-content:flex-end;gap:5px;min-width:0;max-width:none;margin:0
  }
  .t4-header .t4-search{
    grid-column:1/-1;grid-row:2;order:0;width:100%;min-height:42px;
    padding:8px 12px;border-width:1.5px;border-radius:13px
  }
  .t4-header .t4-search input{font-size:13px}
  .t4-header .t4-chip{min-height:36px;padding:6px 8px;gap:4px;border-radius:10px;font-size:11px}
  .t4-header .t4-chip svg{width:16px;height:16px}
  .t4-header .t4-burger{width:38px;height:38px;border-radius:10px;box-shadow:none}
  .t4-header .t4-burger svg{width:19px;height:19px}
  #t4-chip-ticket,#t4-chip-invite,#t4-chip-charge,#t4-chip-locker,
  #t4-chip-login,#t4-chip-signup,#t4-chip-user{display:none!important}
  .t4-menu{top:108px;right:var(--shell-pad);width:min(228px,calc(100vw - var(--shell-pad) - var(--shell-pad)))}

  /* 메인 배너는 페이드 대신 다음 장이 오른쪽에서 들어와 왼쪽으로 지나간다. */
  .t4-hero-slide{transition:none;will-change:transform}
  .t4-hero-slide.is-enter-right,
  .t4-hero-slide.is-enter-left,
  .t4-hero-slide.is-exit-left,
  .t4-hero-slide.is-exit-right{visibility:visible;opacity:1}
  .t4-hero-slide.is-enter-right{z-index:2;animation:t4HeroEnterRight .52s cubic-bezier(.22,.72,.2,1) both}
  .t4-hero-slide.is-exit-left{z-index:1;animation:t4HeroExitLeft .52s cubic-bezier(.22,.72,.2,1) both}
  .t4-hero-slide.is-enter-left{z-index:2;animation:t4HeroEnterLeft .52s cubic-bezier(.22,.72,.2,1) both}
  .t4-hero-slide.is-exit-right{z-index:1;animation:t4HeroExitRight .52s cubic-bezier(.22,.72,.2,1) both}

  /* 실시간 획득도 모바일에서 멈추지 않고 왼쪽으로 흐른다. */
  .t4-stage .t4-ps-viewport{overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
  .t4-stage .t4-ps-track{
    --t4-ps-gap:10px;--t4-ps-half-gap:5px;
    gap:var(--t4-ps-gap);animation:t4psroll 32s linear infinite;will-change:transform
  }
  .t4-stage .t4-ps-viewport:hover .t4-ps-track{animation-play-state:running}
  .t4-stage .t4-ps-card{scroll-snap-align:none}

  /* 상품 선택은 화면 폭과 무관하게 한 줄에 두 장, 카드는 세로형으로 정리한다. */
  .t4-picker .t4-picker-head{padding:12px}
  .t4-picker .t4-picker-head h2{font-size:17px}
  .t4-picker .t4-picker-badge{min-width:44px;min-height:40px;padding:6px 9px;font-size:14px}
  .t4-picker{overflow:visible}
  .t4-picker .t4-picker-head{overflow:hidden;border-radius:15px 15px 0 0}
  .t4-picker .t4-picker-body{padding:10px;overflow:visible;border-radius:0 0 15px 15px}
  .t4-picker .t4-picker-help{margin-bottom:9px;padding:8px 9px;font-size:11px}
  .t4-picker .t4-floor-tabs{gap:6px;margin-bottom:9px}
  .t4-picker .t4-filter-btn,.t4-picker .t4-floor-tab{min-height:40px}
  .t4-picker .t4-filter-btn{width:40px}
  .t4-picker .t4-product-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .t4-picker .t4-product{
    display:flex;min-width:0;width:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:6px;padding:7px;border-width:1.5px;border-radius:12px
  }
  .t4-picker .t4-product.is-selected{padding:7px;border-width:1.5px}
  .t4-picker .t4-product-thumb{
    width:100%;height:clamp(96px,28vw,160px);border-radius:9px;background:#fff9df
  }
  .t4-picker .t4-product-thumb img{object-fit:contain}
  .t4-picker .t4-product-info{display:flex;width:100%;min-width:0;flex:1;flex-direction:column;align-items:stretch}
  .t4-picker .t4-product-info .t4-pf{
    align-self:flex-start;padding:2px 6px;border:1px solid #dfa900;border-radius:999px;
    background:var(--duck-yellow);color:var(--duck-blue-dark);font-size:9px;line-height:1.2
  }
  .t4-picker .t4-product-info h3{
    min-height:2.55em;margin:5px 0 3px;font-size:11px;line-height:1.27;
    overflow-wrap:anywhere;word-break:keep-all
  }
  .t4-picker .t4-product-info .t4-pm{
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px
  }
  .t4-picker .t4-product-meta{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;margin-top:auto;padding-top:6px
  }
  .t4-picker .t4-product-price,
  .t4-picker .t4-product-lineup{
    display:flex;min-width:0;min-height:26px;align-items:center;justify-content:center;
    padding:3px 6px;white-space:nowrap;font-size:9.5px
  }
  .t4-picker .t4-product-list>.t4-empty{grid-column:1/-1}

  /* 푸터는 정보는 유지하되 브랜드/링크/고객센터를 짧은 2열 구조로 배치한다. */
  .t4-footer{padding:0 var(--shell-pad);border-top-width:4px}
  .t4-footer .t4-f-top{gap:7px 14px;padding:10px 0}
  .t4-footer .t4-f-top button{font-size:10.5px;line-height:1.2}
  .t4-footer .t4-f-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding:14px 0
  }
  .t4-footer .t4-f-brand,.t4-footer .t4-f-cs{grid-column:1/-1}
  .t4-footer .t4-footer-logo{margin-bottom:6px}
  .t4-footer .t4-footer-logo-symbol{width:36px;height:36px}
  .t4-footer .t4-footer-logo-wordmark{height:22px;margin-left:-13px;margin-right:-9px}
  .t4-footer .t4-f-info{
    margin-top:0;overflow-wrap:anywhere;color:#d7e4ff;font-size:10.5px;font-weight:650;line-height:1.55
  }
  .t4-footer .t4-f-col b,.t4-footer .t4-f-cs b{margin-bottom:6px;font-size:12px}
  .t4-footer .t4-f-col button{padding:2px 0;font-size:11px;line-height:1.4}
  .t4-footer .t4-f-cs-btns{gap:6px}
  .t4-footer .t4-f-cs-btns button{padding:7px 10px;font-size:10px}
  .t4-footer .t4-f-bottom{padding:10px 0 14px}
  .t4-footer .t4-f-bottom p{font-size:9.5px;line-height:1.55}
  .t4-footer .t4-f-bottom small{margin-top:6px;font-size:9.5px}
}

@media (max-width:440px){
  :root{--shell-pad:10px}
  .t4-header{gap:7px 6px;padding-top:7px;padding-bottom:8px}
  .t4-header .t4-logo-symbol{width:36px;height:36px}
  .t4-header .t4-logo-wordmark{height:22px;margin-left:-13px;margin-right:-9px}
  .t4-header .t4-chip{padding:5px 7px;font-size:10px}
  .t4-header .t4-burger{width:36px;height:36px}
  .t4-menu{top:103px}
  .t4-picker .t4-picker-body{padding:8px}
  .t4-picker .t4-product-list{gap:6px}
  .t4-picker .t4-product,.t4-picker .t4-product.is-selected{gap:5px;padding:6px}
  .t4-picker .t4-product-info h3{font-size:10.5px}
  .t4-picker .t4-product-price,.t4-picker .t4-product-lineup{padding-inline:4px;font-size:9px}
  .t4-footer .t4-f-top{gap:6px 10px}
  .t4-footer .t4-f-grid{gap:11px 14px}
}

@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .t4-stage .t4-ps-track{animation:none}
}

/* ========================================================================
   2026-07-19 · 플랫 UI 정돈: 단순 아이콘 · 큰 글자 · 미션 게이지 보상
   ======================================================================== */
:root{
  --shadow:none;
  --shadow-card:none;
  --shadow-stage:none;
  --shadow-modal:none
}

/* 카드와 버튼의 중첩된 입체 효과를 걷고, 키보드 포커스는 outline으로 유지한다. */
.t4-header,.t4-search,.t4-chip,.t4-burger,.t4-menu,
.t4-hero-viewport,.t4-hero-arrow,.t4-ps-in,.t4-ps-card,
.t4-card,.t4-mini-chip,.t4-btn,.t4-tile,.t4-ticket-ico,
.t4-stage,.t4-meme-board,.t4-meme-stamp,.t4-machine,
.t4-picker,.t4-filter-btn,.t4-floor-tab,.t4-maker-drop,
.t4-product,.t4-modal,.t4-modal-x,
.t4-auth-tab,.t4-charge-opt,.t4-locker-tab,.t4-locker-item,
.t4-invite-copy,.t4-seo .t4-seo-in,
.t4-seo .t4-seo-list li,.t4-toast,
#t4-chip-charge,#t4-chip-locker,#t4-side-locker,#t4-side-mission,
#t4-side-locker #t4-ship-quick,.t4-stage .t4-ps-live-nick{
  box-shadow:none!important
}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:3px solid var(--duck-blue-dark)!important;outline-offset:3px;box-shadow:none!important
}
.t4-chip--navy:focus-visible,.t4-burger:focus-visible,.t4-btn--navy:focus-visible,
.t4-footer button:focus-visible,.t4-footer a:focus-visible{
  outline-color:var(--duck-yellow)!important
}
.t4-search:focus-within,.t4-field input:focus,.t4-field textarea:focus{
  border-color:var(--duck-blue)!important;box-shadow:none!important;outline:2px solid rgba(11,75,203,.18);outline-offset:1px
}
.t4-chip:active,.t4-btn:active,.t4-mini-chip:active,.t4-burger:active{
  transform:none!important;box-shadow:none!important
}

/* 헤더 버튼과 SVG는 단색 라인 아이콘 한 단계만 사용한다. */
.t4-header{padding-top:10px;padding-bottom:10px;border-bottom:1px solid #d9e2f1;background:#fff}
.t4-header::after{content:none;display:none}
.t4-header .t4-search{border:1px solid #cbd7ea;background:#fff}
.t4-header .t4-chip{
  min-height:44px;gap:7px;padding:9px 13px;border:1px solid #c7d4e9;border-radius:12px;
  background:#fff;color:var(--duck-blue-dark);font-size:14px;font-weight:850
}
.t4-header .t4-chip svg,.t4-header .t4-burger svg{
  width:19px;height:19px;padding:0;border:0;border-radius:0;background:transparent;color:currentColor
}
.t4-header .t4-chip:hover{border-color:var(--duck-blue);background:#f7f9fe;transform:none}
#t4-chip-charge{border-color:#d9aa00;background:var(--duck-yellow);color:var(--duck-blue-dark)}
#t4-chip-locker{border-color:var(--duck-blue-dark);background:var(--duck-blue);color:#fff}
#t4-chip-locker svg{color:#fff}
.t4-header .t4-burger{
  width:44px;height:44px;border:1px solid var(--duck-blue-dark);border-radius:12px;
  background:var(--duck-blue-dark);color:#fff
}
.t4-menu{border:1px solid #cbd7ea;border-radius:12px}
.t4-menu button{font-size:14px}

/* 좌측 사이드바: 아이콘 배지와 부제 pill을 없애 정보 위계를 한 번만 준다. */
.t4-side{gap:12px}
.t4-side .t4-card{padding:15px;border:1px solid #cbd7ea;border-radius:15px}
.t4-side .t4-card-head{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #dfe6f2}
.t4-side .t4-card-title{gap:8px;font-size:15px;line-height:1.25;letter-spacing:-.015em}
#t4-side-locker .t4-card-title svg,
#t4-side-invite .t4-card-title svg,
#t4-side-recent .t4-card-title svg,
#t4-side-mission .t4-card-title svg,
.t4-side .t4-card-title svg{
  box-sizing:content-box;width:21px;height:21px;padding:0;border:0;border-radius:0;
  background:transparent!important;color:currentColor!important;box-shadow:none!important
}
.t4-side .t4-card-sub,
#t4-side-invite .t4-card-sub,
#t4-side-recent .t4-card-sub,
#t4-side-mission .t4-card-sub{
  display:inline;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;
  color:#667085!important;font-size:12px;font-weight:800;line-height:1.2
}
#t4-side-locker{border:1px solid var(--duck-blue-dark);background:var(--duck-blue)}
#t4-side-locker .t4-card-title{color:#fff}
#t4-side-locker .t4-mini-chip{border:0;background:#fff;color:var(--duck-blue-dark)}
#t4-side-locker .t4-tile{border:1px solid rgba(255,255,255,.34);background:rgba(7,52,134,.48)}
#t4-side-locker #t4-ship-quick{border:1px solid #d9aa00;background:var(--duck-yellow);color:var(--duck-blue-dark)}
.t4-side .t4-mini-chip{min-height:28px;padding:4px 9px;font-size:12px}
.t4-side .t4-btn{min-height:42px;border-width:1px;font-size:14px}
.t4-side .t4-btn svg{width:18px;height:18px;color:currentColor!important}
.t4-side .t4-note{font-size:11.5px;line-height:1.5}
.t4-side .t4-ticket-ico{width:24px;height:24px;border:0;border-radius:0;background:transparent;color:var(--duck-blue)}
.t4-side .t4-ticket-ico svg{width:22px;height:22px}
.t4-side .t4-invite-body{padding:10px;border:1px solid #dbe3f0;background:#fff}
.t4-side .t4-invite-body b{font-size:14px}
.t4-side .t4-invite-body small{font-size:11.5px;line-height:1.45}
.t4-side .t4-recent-item .t4-r-name{font-size:12.5px}

/* 게이지는 미션 보상이 즉시 보이도록 높이와 대비를 높인다. */
.t4-side .t4-gauge-row{
  gap:8px;margin:0 0 10px;padding:9px 10px;border:1px solid #d6e0ef;border-radius:10px;background:#f7f9fd
}
.t4-side .t4-gauge-row small{font-size:12px;color:var(--duck-blue-dark)}
.t4-side .t4-gauge{height:13px;border:1px solid #c6d4e8;background:#e8edf6}
.t4-side .t4-gauge i{background:var(--duck-yellow);transition:width .35s ease}
.t4-side .t4-gauge-row em{min-width:34px;font-size:12px;color:var(--duck-blue-dark)}

/* 중앙 밈 패널: 이중 테두리와 기울어진 도장을 제거하고 문구를 자동 순환한다. */
.t4-stage{padding:13px 14px 18px;border:1px solid #cbd7ea;background:#fff9df}
.t4-stage-head{padding:0 0 12px}
.t4-meme-board{
  min-height:72px;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;padding:11px 14px;
  border:1px solid var(--duck-blue-dark);border-radius:14px;background:var(--duck-blue)
}
.t4-meme-symbol{width:42px;height:42px;border:0;background:var(--duck-yellow)}
.t4-meme-symbol img{width:43px;height:43px;transform:none}
.t4-meme-copy{gap:3px}
.t4-meme-copy small{font-size:10px;letter-spacing:.14em}
.t4-meme{font-size:clamp(17px,1.3vw,20px);line-height:1.3;letter-spacing:-.025em}
.t4-meme-stamp{
  min-width:72px;padding:7px 10px;border:1px solid var(--duck-blue-dark);border-radius:999px;
  font-size:13px;transform:none
}

/* 미션: 일러스트는 보조로 두고 보상·진행 문구를 독립된 흰 패널에 크게 표시한다. */
#t4-side-mission{min-height:290px;border:1px solid var(--duck-blue-dark);background:var(--duck-yellow)}
#t4-side-mission .t4-card-head{border-bottom-color:rgba(7,52,134,.22)}
#t4-side-mission .t4-card-title{font-size:15px}
.t4-mission-log{
  min-height:232px;margin:0;border:1px solid var(--duck-blue-dark);border-radius:13px;background:#fff8df
}
.t4-mission-duck{
  left:auto;right:-18px;bottom:-2px;width:218px;max-width:none;filter:none;opacity:.94;transform:none
}
.t4-mission-copy{
  left:10px;right:58px;top:auto;bottom:10px;width:auto;min-height:142px;padding:10px;
  justify-content:flex-start;border:1px solid #c9d5e8;border-radius:11px;background:rgba(255,255,255,.96)
}
.t4-mission-copy>span{padding:4px 7px;background:var(--duck-blue);font-size:10px;letter-spacing:.07em}
.t4-mission-copy>b{margin-top:8px;font-size:15px;line-height:1.25}
.t4-mission-copy>small{margin-top:5px;color:#505b73;font-size:11.5px;font-weight:750;line-height:1.42}
.t4-mission-progress{height:9px;margin-top:9px;background:#e5eaf2}
.t4-mission-progress i{background:var(--duck-yellow)}
.t4-mission-copy>em{margin-top:4px;font-size:11px}
.t4-mission-log.is-done .t4-mission-copy{border-color:#d3a900;background:#fffdf3}
.t4-mission-log.is-done .t4-mission-progress i{background:var(--duck-blue)}

/* 머신 패널 숫자도 최소 크기를 보장해 작은 화면에서 뭉개지지 않게 한다. */
.t4-machine .t4-panel small{font-size:clamp(8px,1.35cqw,12px)!important}
.t4-machine .t4-panel b{font-size:clamp(12px,2.2cqw,20px)!important}
.t4-machine .t4-panel{box-shadow:none!important}

@media (min-width:821px) and (max-width:1180px){
  .t4-side #t4-side-mission .t4-mission-duck{left:auto;right:1%;width:55%;transform:none}
  .t4-side #t4-side-mission .t4-mission-copy{left:10px;right:42%;width:auto;transform:none}
}

@media (max-width:820px){
  .t4-header{padding-top:8px;padding-bottom:9px}
  .t4-header .t4-chip{min-height:36px;padding:6px 8px;border-radius:10px;font-size:12px}
  .t4-header .t4-chip svg{width:16px;height:16px}
  .t4-header .t4-burger{width:38px;height:38px;border-radius:10px}
  .t4-header .t4-burger svg{width:19px;height:19px}
  .t4-menu{top:108px}
  .t4-stage{padding:9px 7px 14px;border-width:1px}
  .t4-meme-board{min-height:64px;grid-template-columns:40px minmax(0,1fr);gap:9px;padding:9px 10px;border-width:1px}
  .t4-meme-symbol{width:38px;height:38px}.t4-meme-symbol img{width:39px;height:39px}
  .t4-meme-copy small{font-size:8.5px}.t4-meme{font-size:15.5px;line-height:1.32}
  .t4-meme-stamp{display:none}
  #t4-side-mission{min-height:284px}
  .t4-mission-log{min-height:224px}
  .t4-mission-duck{left:auto;right:1%;bottom:-2px;width:58%;transform:none}
  .t4-mission-copy{left:10px;right:41%;top:auto;bottom:10px;width:auto;transform:none}
}

@media (max-width:440px){
  .t4-header{padding-top:7px;padding-bottom:8px}
  .t4-header .t4-chip{min-height:34px;padding:5px 7px;font-size:11px}
  .t4-header .t4-burger{width:36px;height:36px}
  .t4-menu{top:103px}
  .t4-meme{font-size:14.5px}
  .t4-mission-copy{right:39%;padding:9px}
  .t4-mission-copy>b{font-size:14px}.t4-mission-copy>small{font-size:11px}
}

/* ========================================================================
   2026-07-19 · 30일 출석도장 / 확률 미리보기 / 차분한 충전창
   ======================================================================== */

/* 중앙 컬럼은 콘텐츠를 다시 감싸지 않고 좌우 컬럼과 같은 행 높이를 사용한다. */
.t4-main>.t4-stage{
  padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important
}
.t4-main>.t4-stage>.t4-stage-head{padding:0 0 12px}
.t4-main>.t4-stage>.t4-machine{width:100%!important;max-width:none;margin:4px 0 0!important}
@media (min-width:1181px){
  .t4-main{align-items:stretch}
  .t4-main>.t4-side,.t4-main>.t4-stage,.t4-main>.t4-picker{align-self:stretch;height:100%;min-height:0}
  .t4-main>.t4-stage{display:flex;flex-direction:column}
  .t4-main>.t4-stage>.t4-ps{margin-top:auto}
}

/* 기존 1회성 미션을 30일 연속 출석도장으로 교체 */
#t4-side-mission.t4-side-attendance{
  min-height:350px;border:1px solid var(--duck-blue-dark);background:#fff;
  box-shadow:none
}
#t4-side-mission.t4-side-attendance .t4-card-head{
  margin:0;padding:10px 11px;border-bottom:1px solid var(--duck-blue-dark);
  background:var(--duck-yellow)
}
#t4-side-mission.t4-side-attendance .t4-card-title{font-size:14px;color:var(--duck-blue-dark)}
#t4-side-mission.t4-side-attendance .t4-card-title svg{
  border:0;background:transparent;color:var(--duck-blue-dark);box-shadow:none
}
#t4-side-mission.t4-side-attendance .t4-card-sub{
  padding:3px 7px;border:1px solid var(--duck-blue-dark);border-radius:999px;
  background:#fff!important;color:var(--duck-blue-dark)!important;font-size:8px;letter-spacing:.08em
}
.t4-attendance{
  position:relative;flex:1 1 auto;display:flex;min-height:0;flex-direction:column;gap:9px;padding:11px;
  background:linear-gradient(180deg,#fffdf4 0,#fff8dd 100%)
}
.t4-attendance-summary{display:flex;align-items:center;justify-content:space-between;gap:8px}
.t4-attendance-summary>span{display:flex;flex-direction:column}
.t4-attendance-summary small{color:#6b7487;font-size:9px;font-weight:800}
.t4-attendance-summary b{color:var(--duck-blue-dark);font-size:25px;line-height:1}
.t4-attendance-summary b em{margin-left:2px;font-size:10px;font-style:normal}
.t4-attendance-summary strong{color:var(--duck-blue-dark);font-size:10px;line-height:1.35;text-align:right}
.t4-attendance-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;
  margin:0;padding:0;list-style:none
}
.t4-attendance-day{
  position:relative;display:grid;aspect-ratio:1;place-items:center;overflow:hidden;
  border:1px dashed #b9c7dc;border-radius:50%;background:#fff;color:#7d8798
}
.t4-attendance-day small{position:relative;z-index:1;font-size:8px;font-weight:900}
.t4-attendance-day i{width:4px;height:4px;border-radius:50%;background:#dce3ee}
.t4-attendance-day img{
  position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;
  opacity:.78;transform:rotate(-8deg)
}
.t4-attendance-day.is-stamped{border-style:solid;border-color:var(--duck-blue);background:#fff2a8;color:transparent}
.t4-attendance-day.is-today{outline:2px solid var(--duck-blue-dark);outline-offset:1px;background:var(--duck-yellow)}
.t4-attendance-day.is-today img{opacity:1;animation:t4-stamp-in .32s ease-out both}
@keyframes t4-stamp-in{0%{opacity:0;transform:scale(1.7) rotate(-14deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.t4-attendance-note{min-height:30px;margin:0;color:#59647a;font-size:10px;font-weight:750;line-height:1.4}
.t4-attendance-check{
  width:100%;min-height:38px;margin-top:auto;border:1px solid var(--duck-blue-dark);border-radius:10px;
  background:var(--duck-blue);color:#fff;font-size:11px;font-weight:950;cursor:pointer
}
.t4-attendance-check:hover{background:var(--duck-blue-dark)}
.t4-attendance-check:focus-visible{outline:3px solid var(--duck-blue-dark)!important;outline-offset:2px}
.t4-attendance-check:disabled{border-color:#aeb9ca;background:#d8dee8;color:#6e7889;cursor:default}

/* PC 비회원 출석 카드의 빈 공간에만 노출되는 도장 */
@media (min-width:821px){
  #t4-side-mission .t4-attendance.is-guest::before{
    content:"참 잘\A했어요";
    position:absolute;z-index:0;left:50%;bottom:76px;
    display:grid;width:100px;height:100px;place-items:center;
    border:3px solid rgba(204,54,43,.72);border-radius:50%;
    outline:1px dashed rgba(204,54,43,.62);outline-offset:-8px;
    background:rgba(255,255,255,.18);color:rgba(190,40,32,.78);
    box-shadow:inset 0 0 0 3px rgba(204,54,43,.14);
    font-size:18px;font-weight:950;line-height:1.05;letter-spacing:-.04em;text-align:center;
    white-space:pre;transform:translateX(-50%) rotate(-10deg);
    pointer-events:none
  }
  #t4-side-mission .t4-attendance.is-guest>*{position:relative;z-index:1}
}

/* 우측 라인업 버튼: hover/focus에서 개별 확률을 먼저 확인 */
.t4-product{cursor:pointer}
.t4-product-select{position:absolute;z-index:1;inset:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.t4-product-select:focus-visible{outline:3px solid var(--duck-blue)!important;outline-offset:-3px}
.t4-product-thumb,.t4-product-info{position:relative;z-index:2}
.t4-product .t4-product-lineup{position:relative;z-index:3;cursor:pointer}
.t4-product .t4-product-lineup:focus-visible{outline:2px solid var(--duck-yellow);outline-offset:2px}
.t4-lineup-preview{
  position:fixed;z-index:1000;width:min(350px,calc(100vw - 16px));max-height:min(520px,calc(100vh - 16px));
  overflow:hidden;border:1px solid var(--duck-blue-dark);border-radius:14px;background:#fff;color:var(--duck-blue-dark);pointer-events:auto
}
.t4-lineup-preview[hidden]{display:none!important}
.t4-lineup-preview>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--duck-blue);color:#fff}
.t4-lineup-preview>header span{display:flex;flex-direction:column}.t4-lineup-preview>header small{color:var(--duck-yellow);font-size:8px;font-weight:950;letter-spacing:.12em}
.t4-lineup-preview>header b{font-size:13px}.t4-lineup-preview>header em{font-size:10px;font-style:normal;font-weight:900}
.t4-lineup-preview-list{max-height:410px;overflow:auto;padding:6px}
.t4-lineup-preview-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px;border-bottom:1px solid #e4e9f1}
.t4-lineup-preview-item:last-child{border-bottom:0}.t4-lineup-preview-item img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#f6f7fa}
.t4-lineup-preview-item span{min-width:0;display:flex;flex-direction:column}.t4-lineup-preview-item b{overflow:hidden;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.t4-lineup-preview-item small{color:#7b8494;font-size:8.5px}.t4-lineup-preview-item>em{padding:3px 6px;border-radius:999px;background:#eef3ff;color:var(--duck-blue);font-size:10px;font-style:normal;font-weight:950}
.t4-lineup-preview-item.is-secret>em{background:#fff1be;color:#8a6200}.t4-lineup-preview>p{margin:0;padding:8px 11px;border-top:1px solid #e4e9f1;background:#fff9df;color:#687287;font-size:9px;font-weight:750}

/* 충전창: 과장된 원형 배경과 문구를 덜어내고 결제 선택에 집중 */
.t4-popup-duck--charge{
  min-height:142px;padding:20px 150px 18px 22px;border-bottom:1px solid #d5deec;
  background:#fff9df!important;background-image:none!important
}
.t4-popup-duck--charge::before,.t4-popup-duck--charge::after,.t4-popup-duck--charge .t4-popup-duck__scribble{display:none!important}
.t4-popup-duck--charge .t4-popup-duck__copy{min-height:102px}
.t4-popup-duck--charge .t4-popup-duck__badge{border:1px solid var(--duck-blue-dark);box-shadow:none}
.t4-popup-duck--charge .t4-popup-duck__copy strong{max-width:460px;margin-top:9px;font-size:19px;line-height:1.35}
.t4-popup-duck--charge .t4-popup-duck__art{
  right:30px;bottom:18px;width:92px;height:92px;object-fit:contain;filter:none
}
.t4-modal-body--charge .t4-modal-lead{padding:13px 15px;border:1px solid #d5deec;border-radius:12px;background:#f7f9fd}
.t4-modal-body--charge .t4-modal-lead b{font-size:16px}.t4-modal-body--charge .t4-modal-lead span{font-size:11px}
.t4-modal-body--charge .t4-charge-opt{
  min-height:94px;padding:14px 10px 10px;border:1px solid #cbd6e7;border-radius:12px;background:#fff;box-shadow:none;transform:none
}
.t4-modal-body--charge .t4-charge-opt::before,.t4-modal-body--charge .t4-charge-opt::after{display:none!important}
.t4-modal-body--charge .t4-charge-opt:nth-child(3){border:1px solid #cbd6e7;background:#fff}
.t4-modal-body--charge .t4-charge-opt:hover{border-color:var(--duck-blue);background:#fff9df;box-shadow:none;transform:none}
.t4-modal-body--charge .t4-charge-note{border:1px solid #d5deec;background:#f7f9fd}

@media (min-width:561px) and (max-width:1180px){
  #t4-side-mission.t4-side-attendance{min-height:250px}
  .t4-attendance-grid{grid-template-columns:repeat(10,minmax(0,42px));justify-content:center}
  .t4-attendance-note{text-align:center}.t4-attendance-check{max-width:320px;align-self:center}
}
@media (max-width:820px){
  .t4-main>.t4-stage{padding:0!important}
  .t4-lineup-preview{display:none!important}
  .t4-popup-duck--charge{min-height:124px;padding:16px 112px 14px 15px}
  .t4-popup-duck--charge .t4-popup-duck__copy{min-height:90px}
  .t4-popup-duck--charge .t4-popup-duck__copy strong{font-size:16px}
  .t4-popup-duck--charge .t4-popup-duck__art{right:18px;bottom:18px;width:76px;height:76px}
}
@media (max-width:560px){
  #t4-side-mission.t4-side-attendance{min-height:0}
  .t4-attendance{padding:12px 14px}
  .t4-attendance-grid{grid-template-columns:repeat(6,minmax(0,44px));justify-content:center}
  .t4-attendance-note{text-align:center}.t4-attendance-check{max-width:360px;align-self:center}
}
@media (max-width:440px){
  .t4-attendance{padding:10px}.t4-attendance-grid{grid-template-columns:repeat(6,minmax(0,39px));gap:4px}
  .t4-attendance-summary b{font-size:22px}.t4-attendance-summary strong{font-size:9.5px}
  .t4-popup-duck--charge{padding-right:96px}.t4-popup-duck--charge .t4-popup-duck__art{right:12px;width:66px;height:66px}
}
@media (prefers-reduced-motion:reduce){.t4-attendance-day.is-today img{animation:none}}

/* 실시간 획득 리포트: 콘텐츠는 유지하고 바깥 실선 프레임만 제거 */
.t4-stage .t4-ps-in{
  border:0!important;
  box-shadow:none!important
}

/* 2026-07-19 · 장식용 띠 제거: 굵은 색상 바 대신 필요한 1px 구분선만 유지 */
.t4-guide-step{
  box-shadow:none!important
}
.t4-guide-alert{
  border-left:1px solid #f1a397
}
.t4-modal-head,
.t4-modal--lineup .t4-modal-head{
  border-bottom:1px solid #d5deec
}
.t4-popup-duck,
.t4-popup-duck--charge,
.t4-popup-duck--invite,
.t4-popup-duck--me{
  border-bottom:1px solid #d5deec
}
.t4-footer{
  border-top:1px solid rgba(255,255,255,.16)
}
@media (max-width:820px){
  .t4-hero-img{border-bottom:1px solid #d5deec}
}

/* 실제 제조사 심볼: 제조사 필터와 상품 카드에서 PC·모바일 공통 사용 */
.t4-maker-drop{min-width:220px}
.t4-maker-drop button{
  display:flex;min-height:40px;align-items:center;gap:9px
}
.t4-maker-drop button .t4-maker-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.t4-maker-logo{
  display:block;flex:0 0 auto;width:24px;height:24px;padding:2px;
  border:1px solid #dbe3f0;border-radius:6px;background:#fff;object-fit:contain
}
.t4-maker-drop button.is-on .t4-maker-logo{border-color:rgba(255,255,255,.72)}
.t4-product-info .t4-pm,
.t4-picker .t4-product-info .t4-pm{
  display:flex;min-width:0;align-items:center;gap:5px
}
.t4-product-info .t4-pm .t4-maker-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.t4-product-info .t4-pm .t4-maker-logo{
  width:16px;height:16px;padding:0;border:0;border-radius:3px;background:transparent
}
.t4-maker-logo[src*="ikimon.svg"]{
  border-color:#149ca7;background:#149ca7
}
.t4-product-info .t4-pm .t4-maker-logo[src*="ikimon.svg"]{
  padding:2px;background:#149ca7
}
@media (max-width:820px){
  .t4-maker-drop{min-width:min(230px,calc(100vw - 28px))}
  .t4-maker-drop button{min-height:42px;padding:8px 10px;font-size:13px}
  .t4-maker-logo{width:26px;height:26px}
  .t4-product-info .t4-pm .t4-maker-logo{width:17px;height:17px}
}

/* 오늘 신상 패치: 배경 장식이 아닌 선명한 전면 배지로 노출 */
.t4-picker .t4-picker-art{opacity:1}

/* 보유 뽑기권: 흰 박스 대신 가챠덕 노랑·파랑 한 줄 티켓 */
.t4-side .t4-invite-body{
  position:relative;isolation:isolate;display:flex;min-height:50px;align-items:center;gap:8px;
  margin:0 0 10px;padding:7px 12px;border:0;border-radius:0;
  background:var(--duck-blue-dark);box-shadow:none;
  clip-path:polygon(0 0,100% 0,100% 34%,calc(100% - 6px) 50%,100% 66%,100% 100%,0 100%,0 66%,6px 50%,0 34%)
}
.t4-side .t4-invite-body::before{
  content:"";position:absolute;z-index:0;inset:2px;background:var(--duck-yellow);
  clip-path:polygon(0 0,100% 0,100% 34%,calc(100% - 5px) 50%,100% 66%,100% 100%,0 100%,0 66%,5px 50%,0 34%)
}
.t4-side .t4-invite-body::after{
  content:"";position:absolute;z-index:1;left:49px;top:7px;bottom:7px;
  border-left:1px dashed rgba(7,52,134,.48)
}
.t4-side .t4-invite-body>*{position:relative;z-index:2}
.t4-side .t4-ticket-ico{
  display:grid;flex:0 0 auto;width:32px;height:32px;padding:2px;place-items:center;
  border:2px solid var(--duck-blue-dark);border-radius:50%;background:#fff;box-shadow:none
}
.t4-side .t4-ticket-ico img{display:block;width:100%;height:100%;object-fit:contain}
.t4-side .t4-ticket-copy{
  display:flex;min-width:0;flex:1;align-items:center;gap:4px;white-space:nowrap
}
.t4-side .t4-ticket-copy b{
  display:flex;flex:0 0 auto;align-items:center;gap:4px;color:var(--duck-blue-dark);
  font-size:12px;line-height:1
}
.t4-side .t4-ticket-copy b span{
  padding:3px 6px;border-radius:999px;background:var(--duck-blue-dark);
  color:var(--duck-yellow);font-size:11px;line-height:1
}
.t4-side .t4-ticket-copy small{
  display:block;min-width:0;margin:0;overflow:hidden;color:var(--duck-blue-dark);
  font-size:9.5px;font-weight:900;line-height:1;text-overflow:ellipsis;white-space:nowrap
}
@media (max-width:820px){
  .t4-side .t4-invite-body{min-height:52px;padding:8px 14px}
  .t4-side .t4-ticket-ico{width:34px;height:34px}
  .t4-side .t4-invite-body::after{left:53px}
  .t4-side .t4-ticket-copy b{font-size:13px}
  .t4-side .t4-ticket-copy small{font-size:10.5px}
}

/* 검색창: 입력 요소의 사각 기본 포커스는 없애고 둥근 바깥 테두리만 유지 */
.t4-search input:focus,
.t4-search input:focus-visible{
  outline:0!important;box-shadow:none!important
}

/* 헤더 캐시: 파란 면, 노란 금액, 원형 C 심볼 */
#t4-chip-op{
  border-color:var(--duck-blue-dark);background:var(--duck-blue);color:var(--duck-yellow)
}
#t4-chip-op:hover{
  border-color:var(--duck-blue-dark);background:var(--duck-blue-dark);color:var(--duck-yellow)
}
#t4-chip-op:focus-visible{outline-color:var(--duck-yellow)!important}
#t4-chip-op .t4-cash-symbol{
  display:inline-grid;flex:0 0 auto;width:23px;height:23px;place-items:center;
  border:2px solid var(--duck-yellow);border-radius:50%;background:var(--duck-yellow);
  color:var(--duck-blue-dark);font-size:13px;font-weight:1000;line-height:1
}
#t4-chip-op #t4-op,
#t4-chip-op #t4-op .t4-balance-num,
#t4-chip-op #t4-op .t4-balance-unit{color:var(--duck-yellow)}
@media (max-width:820px){
  #t4-chip-op .t4-cash-symbol{width:20px;height:20px;font-size:11px}
}

/* ========================================================================
   2026-07-19 · 햄버거 다크 모드 — 짙은 네이비 · 화이트 · 가챠덕 옐로
   ======================================================================== */
.t4-menu-theme{position:relative;min-height:58px}
.t4-theme-icon{
  display:grid;flex:0 0 auto;width:32px;height:32px;place-items:center;
  border:1px solid var(--duck-blue-dark);border-radius:50%;background:var(--duck-yellow);
  color:var(--duck-blue-dark);font-size:18px;font-weight:1000;line-height:1
}
.t4-theme-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:1px}
.t4-theme-copy b{font-size:13px;font-weight:950;line-height:1.2}
.t4-theme-copy small{color:#667085;font-size:10px;font-weight:750;line-height:1.25}
.t4-theme-switch{
  position:relative;display:block;flex:0 0 auto;width:40px;height:23px;
  border:1px solid #a9b8d1;border-radius:999px;background:#dce4f1
}
.t4-theme-switch u{
  position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;
  background:#fff;text-decoration:none;transition:transform .18s ease
}
.t4-menu-theme[aria-checked="true"] .t4-theme-switch{border-color:#d5a900;background:var(--duck-yellow)}
.t4-menu-theme[aria-checked="true"] .t4-theme-switch u{background:var(--duck-blue-dark);transform:translateX(17px)}

html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f8faff;
  --navy:#0b4bcb;
  --navy-deep:#030b20;
  --blue:#1761e5;
  --blue-bright:#2f72ed;
  --blue-soft:#102a58;
  --gold:#ffd21f;
  --gold-soft:#4a3b08;
  --cream:#14284a;
  --paper:#030a1b;
  --paper-dot:#183567;
  --line:#2a4a7d;
  --line-strong:#42649b;
  --gray:#b5c2d9;
  --panel-dark:#020715;
  --duck-yellow:#ffd21f;
  --duck-yellow-light:#4a3b08;
  --duck-blue:#0b4bcb;
  --duck-blue-dark:#030b20;
  --duck-wall:#0a1b3a;
  --t4-night:#020715;
  --t4-night-main:#030b20;
  --t4-night-panel:#081a3b;
  --t4-night-soft:#102851;
  --t4-night-line:#2d4f83;
  --t4-night-white:#f8faff;
  --t4-night-muted:#b7c4db;
  scrollbar-color:var(--duck-yellow) var(--t4-night-main)
}
html[data-theme="dark"] body{
  color:var(--t4-night-white);background-color:var(--t4-night);
  background-image:
    linear-gradient(rgba(255,210,31,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,210,31,.035) 1px,transparent 1px),
    linear-gradient(180deg,#020715 0,#06132e 45%,#030918 100%);
  background-size:34px 34px,34px 34px,100% 100%
}
html[data-theme="dark"] ::selection{background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible{outline-color:var(--duck-yellow)!important}

/* 헤더와 햄버거 */
html[data-theme="dark"] .t4-header{
  border-bottom-color:var(--t4-night-line);background:rgba(3,11,32,.97);color:var(--t4-night-white)
}
html[data-theme="dark"] .t4-header .t4-search{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:var(--t4-night-white)
}
html[data-theme="dark"] .t4-search svg{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-search input{color:var(--t4-night-white)}
html[data-theme="dark"] .t4-search input::placeholder{color:#8999b8}
html[data-theme="dark"] .t4-header .t4-chip,
html[data-theme="dark"] #t4-chip-ticket,
html[data-theme="dark"] #t4-chip-guide,
html[data-theme="dark"] #t4-chip-invite,
html[data-theme="dark"] #t4-chip-login,
html[data-theme="dark"] #t4-chip-user{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:var(--t4-night-white)
}
html[data-theme="dark"] .t4-header .t4-chip svg{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-header .t4-chip:hover{
  border-color:var(--duck-yellow);background:var(--t4-night-soft);color:#fff
}
html[data-theme="dark"] #t4-chip-charge{border-color:#c99b00;background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] #t4-chip-charge svg{color:var(--duck-blue-dark)}
html[data-theme="dark"] #t4-chip-locker{border-color:#4777cf;background:var(--duck-blue);color:#fff}
html[data-theme="dark"] #t4-chip-locker svg{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-header .t4-burger{border-color:var(--duck-yellow);background:var(--t4-night-main);color:var(--duck-yellow)}

html[data-theme="dark"] .t4-menu{
  border-color:var(--t4-night-line);background:var(--t4-night-main);color:var(--t4-night-white)
}
html[data-theme="dark"] .t4-menu-sec+.t4-menu-sec,
html[data-theme="dark"] .t4-menu-user{border-color:var(--t4-night-line)}
html[data-theme="dark"] .t4-menu button{color:var(--t4-night-white)}
html[data-theme="dark"] .t4-menu button svg{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-menu button:hover{background:var(--t4-night-soft)}
html[data-theme="dark"] .t4-menu-user small,
html[data-theme="dark"] .t4-theme-copy small{color:var(--t4-night-muted)}
html[data-theme="dark"] .t4-menu-info{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-menu-out,
html[data-theme="dark"] .t4-menu-out svg{color:#ffdb55}
html[data-theme="dark"] .t4-theme-icon{border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-theme-switch{border-color:#44618f;background:#152b51}

/* 배너: 원본 일러스트는 보존하고 카피 영역만 네이비로 전환 */
html[data-theme="dark"] .t4-hero-viewport{border-color:var(--t4-night-line);background:var(--t4-night-main)}
html[data-theme="dark"] .t4-hero-slide::after{
  background:linear-gradient(90deg,rgba(3,11,32,.98) 0%,rgba(5,18,45,.94) 72%,rgba(5,18,45,0) 100%)
}
html[data-theme="dark"] .t4-hero-copy,
html[data-theme="dark"] .t4-hero-copy .t4-hero-title{color:var(--t4-night-white);text-shadow:none}
html[data-theme="dark"] .t4-hero-copy .t4-hero-title em{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-hero-copy p{color:#d5deed;text-shadow:none}
html[data-theme="dark"] .t4-hero-tags span{
  border-color:#385789;background:rgba(10,29,65,.92);color:#fff
}
html[data-theme="dark"] .t4-hero-copy-cta{
  border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)
}
html[data-theme="dark"] .t4-hero-copy-cta b{color:var(--duck-blue-dark)}

/* 좌·중·우 메인 패널 */
html[data-theme="dark"] .t4-card,
html[data-theme="dark"] .t4-side .t4-card,
html[data-theme="dark"] #t4-side-invite,
html[data-theme="dark"] #t4-side-recent,
html[data-theme="dark"] #t4-side-mission.t4-side-attendance,
html[data-theme="dark"] .t4-picker{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:var(--t4-night-white)
}
html[data-theme="dark"] .t4-side .t4-card-head{border-bottom-color:var(--t4-night-line)}
html[data-theme="dark"] .t4-card-title,
html[data-theme="dark"] #t4-side-mission.t4-side-attendance .t4-card-title{color:var(--t4-night-white)}
html[data-theme="dark"] .t4-side .t4-card-sub,
html[data-theme="dark"] #t4-side-invite .t4-card-sub,
html[data-theme="dark"] #t4-side-recent .t4-card-sub,
html[data-theme="dark"] #t4-side-mission .t4-card-sub{color:var(--t4-night-muted)!important}
html[data-theme="dark"] #t4-side-locker{border-color:#315a9d;background:linear-gradient(145deg,#06163a,#0b4bcb)}
html[data-theme="dark"] #t4-side-locker .t4-card-title,
html[data-theme="dark"] #t4-side-locker .t4-note{color:#fff}
html[data-theme="dark"] #t4-side-locker .t4-tile{border-color:#43669b;background:#0a285f;color:#fff}
html[data-theme="dark"] #t4-side-locker .t4-tile b{color:var(--duck-yellow)}
html[data-theme="dark"] #t4-side-locker .t4-tile span{color:#dce6f7}
html[data-theme="dark"] .t4-note,
html[data-theme="dark"] .t4-recent-item small,
html[data-theme="dark"] .t4-empty{color:var(--t4-night-muted)}
html[data-theme="dark"] .t4-empty{border-color:var(--t4-night-line);background:var(--t4-night-soft)}
html[data-theme="dark"] .t4-recent-item+.t4-recent-item{border-top-color:var(--t4-night-line)}
html[data-theme="dark"] .t4-side .t4-gauge-row{
  border-color:var(--t4-night-line);background:var(--t4-night-soft)
}
html[data-theme="dark"] .t4-side .t4-gauge-row small,
html[data-theme="dark"] .t4-side .t4-gauge-row em{color:#fff}
html[data-theme="dark"] .t4-side .t4-gauge{border-color:#3d5b8a;background:#04132e}
html[data-theme="dark"] #t4-side-mission.t4-side-attendance .t4-card-head{
  border-bottom-color:#b99100;background:var(--duck-yellow)
}
html[data-theme="dark"] #t4-side-mission.t4-side-attendance .t4-card-head .t4-card-title{color:var(--duck-blue-dark)}
html[data-theme="dark"] #t4-side-mission.t4-side-attendance .t4-card-sub{
  border-color:var(--duck-blue-dark);background:var(--duck-blue-dark)!important;color:var(--duck-yellow)!important
}
html[data-theme="dark"] .t4-attendance{background:linear-gradient(180deg,#091d43,#06132e)}
html[data-theme="dark"] .t4-attendance-summary small,
html[data-theme="dark"] .t4-attendance-note{color:var(--t4-night-muted)}
html[data-theme="dark"] .t4-attendance-summary b,
html[data-theme="dark"] .t4-attendance-summary strong{color:#fff}
html[data-theme="dark"] .t4-attendance-day{border-color:#49628d;background:#0b214b;color:#aebbd1}
html[data-theme="dark"] .t4-attendance-day.is-stamped{border-color:var(--duck-yellow);background:#3b320d}
html[data-theme="dark"] .t4-attendance-day.is-today{background:var(--duck-yellow)}
html[data-theme="dark"] .t4-attendance-check{border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)}

html[data-theme="dark"] .t4-main>.t4-stage{background:transparent!important}
html[data-theme="dark"] .t4-meme-board{border-color:#44669c;background:#0b4bcb}
html[data-theme="dark"] .t4-machine{border-color:#315687;background:var(--t4-night-panel)}
html[data-theme="dark"] .t4-stage .t4-ps-in{border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff}
html[data-theme="dark"] .t4-stage .t4-ps-head b{color:#fff}
html[data-theme="dark"] .t4-stage .t4-ps-head small{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-stage .t4-ps-card{border-color:#31517f;background:var(--t4-night-soft)}

html[data-theme="dark"] .t4-picker-body{background:var(--t4-night-main)}
html[data-theme="dark"] .t4-picker-help{background:var(--t4-night-soft);color:#d2dced}
html[data-theme="dark"] .t4-filter-btn,
html[data-theme="dark"] .t4-floor-tab{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#dce5f5
}
html[data-theme="dark"] .t4-filter-btn:hover,
html[data-theme="dark"] .t4-floor-tab:hover{border-color:var(--duck-yellow);background:var(--t4-night-soft);color:#fff}
html[data-theme="dark"] .t4-filter-btn.is-active,
html[data-theme="dark"] .t4-floor-tab.is-active{border-color:var(--duck-yellow);background:var(--duck-blue);color:#fff}
html[data-theme="dark"] .t4-maker-drop{border-color:var(--t4-night-line);background:var(--t4-night-main)}
html[data-theme="dark"] .t4-maker-drop button{color:#fff}
html[data-theme="dark"] .t4-product{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff
}
html[data-theme="dark"] .t4-product:hover{border-color:#5274a9;background:var(--t4-night-soft)}
html[data-theme="dark"] .t4-product.is-selected{
  border-color:var(--duck-yellow);background:linear-gradient(135deg,#102a58,#0b2149)
}
html[data-theme="dark"] .t4-product-thumb{border-color:#385889;background:#fff}
html[data-theme="dark"] .t4-product-info h3{color:#fff}
html[data-theme="dark"] .t4-product-info .t4-pm{color:var(--t4-night-muted)}
html[data-theme="dark"] .t4-product-lineup{
  border-color:#46689b;background:var(--t4-night-soft);color:#fff
}
html[data-theme="dark"] .t4-lineup-preview{border-color:var(--duck-yellow);background:var(--t4-night-main);color:#fff}
html[data-theme="dark"] .t4-lineup-preview-item{border-bottom-color:var(--t4-night-line)}
html[data-theme="dark"] .t4-lineup-preview-item small{color:var(--t4-night-muted)}
html[data-theme="dark"] .t4-lineup-preview>p{border-top-color:var(--t4-night-line);background:var(--t4-night-soft);color:#d2dced}

/* 서비스 소개와 푸터 */
html[data-theme="dark"] .t4-seo .t4-seo-in{
  border-color:var(--duck-yellow);background:var(--t4-night-main)
}
html[data-theme="dark"] .t4-seo-show{background:linear-gradient(145deg,#0b214b 0 58%,#0b4bcb 58% 100%)}
html[data-theme="dark"] .t4-seo-speech{border-color:#45699f;background:var(--t4-night-panel)}
html[data-theme="dark"] .t4-seo-speech h2,
html[data-theme="dark"] .t4-seo .t4-seo-list b{color:#fff}
html[data-theme="dark"] .t4-seo-speech h2 em{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-seo-speech p,
html[data-theme="dark"] .t4-seo .t4-seo-list p{color:#c3cee1}
html[data-theme="dark"] .t4-seo-speech>small{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-seo .t4-seo-list li,
html[data-theme="dark"] .t4-seo .t4-seo-list li:nth-child(odd),
html[data-theme="dark"] .t4-seo .t4-seo-list li:nth-child(even){
  border-color:var(--t4-night-line);background:var(--t4-night-panel)
}
html[data-theme="dark"] .t4-seo-icon{border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-seo-kicker{color:var(--duck-yellow)}
html[data-theme="dark"] .t4-seo .t4-seo-cta{border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-seo .t4-seo-cta span{background:var(--duck-blue-dark);color:var(--duck-yellow)}
html[data-theme="dark"] .t4-seo .t4-seo-cta b{color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-footer{border-top-color:var(--duck-yellow);background:#020817}

/* 공통 팝업·입력·상품 목록 */
html[data-theme="dark"] .t4-modal-back{background:rgba(0,3,12,.82)}
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection){
  border-color:#385b91;background:var(--t4-night-main);color:#fff
}
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-modal-head{
  border-bottom-color:var(--duck-yellow);background:#0b4bcb;color:#fff
}
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-modal-body{background:var(--t4-night-main);color:#fff}
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-popup-duck,
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-popup-duck--charge,
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-popup-duck--invite,
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-popup-duck--me{
  border-bottom-color:var(--t4-night-line);background:var(--t4-night-panel)!important
}
html[data-theme="dark"] .t4-popup-duck__copy strong{color:#fff}
html[data-theme="dark"] .t4-popup-duck__badge{border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-field label,
html[data-theme="dark"] .t4-policy,
html[data-theme="dark"] .t4-policy h3,
html[data-theme="dark"] .t4-guide-step b,
html[data-theme="dark"] .t4-guide-grid article b{color:#fff}
html[data-theme="dark"] .t4-field input,
html[data-theme="dark"] .t4-field textarea,
html[data-theme="dark"] .t4-invite-link input{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff
}
html[data-theme="dark"] .t4-auth-tab,
html[data-theme="dark"] .t4-charge-opt,
html[data-theme="dark"] .t4-locker-tab,
html[data-theme="dark"] .t4-locker-item,
html[data-theme="dark"] .t4-ship-row,
html[data-theme="dark"] .t4-inq-row,
html[data-theme="dark"] .t4-guide-step,
html[data-theme="dark"] .t4-guide-grid article,
html[data-theme="dark"] .t4-lineup-cell{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff
}
html[data-theme="dark"] .t4-auth-tab.is-active,
html[data-theme="dark"] .t4-locker-tab.is-active{border-color:var(--duck-yellow);background:var(--duck-blue);color:#fff}
html[data-theme="dark"] .t4-modal-lead,
html[data-theme="dark"] .t4-modal-body--charge .t4-modal-lead,
html[data-theme="dark"] .t4-charge-note,
html[data-theme="dark"] .t4-modal-body--charge .t4-charge-note,
html[data-theme="dark"] .t4-invite-benefit,
html[data-theme="dark"] .t4-fee-note{
  border-color:var(--t4-night-line);background:var(--t4-night-soft);color:#fff
}
html[data-theme="dark"] .t4-modal-body--charge .t4-charge-opt,
html[data-theme="dark"] .t4-modal-body--charge .t4-charge-opt:nth-child(3){
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff
}
html[data-theme="dark"] .t4-modal-body--charge .t4-charge-opt:hover{border-color:var(--duck-yellow);background:#17315c}
html[data-theme="dark"] .t4-charge-opt small,
html[data-theme="dark"] .t4-locker-item small,
html[data-theme="dark"] .t4-ship-row small,
html[data-theme="dark"] .t4-inq-row p,
html[data-theme="dark"] .t4-guide-step small,
html[data-theme="dark"] .t4-guide-grid article p{color:var(--t4-night-muted)}
html[data-theme="dark"] .t4-locker-foot{border-top-color:var(--t4-night-line);background:var(--t4-night-main)}
html[data-theme="dark"] .t4-prob-table th{border-color:#3765b5;background:#0b4bcb;color:#fff}
html[data-theme="dark"] .t4-prob-table td,
html[data-theme="dark"] .t4-modal--lineup .t4-prob-table td,
html[data-theme="dark"] .t4-modal--lineup .t4-prob-table tbody tr:nth-child(even) td{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff
}
html[data-theme="dark"] .t4-modal--lineup .t4-lineup-prob{border-color:var(--t4-night-line);background:var(--t4-night-main)}
html[data-theme="dark"] .t4-modal--lineup .t4-lineup-section-head b{color:#fff}
html[data-theme="dark"] .t4-modal--lineup .t4-lineup-cell:hover{border-color:var(--duck-yellow);background:var(--t4-night-soft)}

@media (max-width:820px){
  html[data-theme="dark"] .t4-hero-viewport{background:var(--t4-night-main)}
  html[data-theme="dark"] .t4-hero-slide::after{
    background:linear-gradient(180deg,var(--t4-night-main),#061431)!important
  }
  html[data-theme="dark"] .t4-hero-img{border-bottom-color:var(--t4-night-line)}
  html[data-theme="dark"] .t4-menu{width:min(244px,calc(100vw - var(--shell-pad) - var(--shell-pad)))}
}

/* ========================================================================
   2026-07-19 · 시그니처 블루 단일화와 출고 센터 정보 대비
   파란색 면은 #0b4bcb 하나만 사용하고, 네이비는 글자·외곽선·다크 배경에만 쓴다.
   ======================================================================== */
:root{
  --t4-brand-blue:#0b4bcb;
  --navy:var(--t4-brand-blue);
  --blue:var(--t4-brand-blue);
  --blue-bright:var(--t4-brand-blue);
  --duck-blue:var(--t4-brand-blue)
}

/* 사용자가 한 화면에서 비교하는 주요 파란 면 */
#t4-chip-op,
#t4-chip-locker,
.t4-header .t4-burger,
#t4-side-locker,
.t4-meme-board,
.t4-picker-head,
.t4-btn--navy,
.t4-btn--navy:hover,
.t4-filter-btn.is-active,
.t4-floor-tab.is-active,
.t4-lineup-preview>header,
.t4-product .t4-product-price,
.t4-modal:not(.t4-modal--collection) .t4-modal-head,
.t4-auth-tab.is-active,
.t4-locker-tab.is-active,
.t4-modal--collection .t4-modal-head.t4-collection-fascia,
.t4-hero-copy-cta,
.t4-hero-copy-cta:hover,
.t4-seo-icon,
.t4-seo .t4-seo-cta,
.t4-seo .t4-seo-cta:hover,
.t4-footer{
  background-color:var(--t4-brand-blue);
  background-image:none
}
#t4-chip-op:hover{background:var(--t4-brand-blue);color:var(--duck-yellow)}

/* 출고 센터: 같은 파란 면 안에서 숫자는 노랑, 설명은 흰색으로 확실히 분리 */
#t4-side-locker .t4-tile{
  border-color:rgba(255,255,255,.55);
  background:rgba(3,11,32,.16);
  color:#fff
}
#t4-side-locker .t4-tile b{
  color:var(--duck-yellow)!important;
  opacity:1
}
#t4-side-locker .t4-tile span{
  color:#fff!important;
  opacity:1
}

/* 다크모드에서도 포인트 블루는 동일하고, 배경 네이비와만 구분한다. */
html[data-theme="dark"]{
  --navy:var(--t4-brand-blue);
  --blue:var(--t4-brand-blue);
  --blue-bright:var(--t4-brand-blue);
  --duck-blue:var(--t4-brand-blue)
}
html[data-theme="dark"] #t4-side-locker{
  border-color:var(--t4-night-line);
  background:var(--t4-brand-blue)
}
html[data-theme="dark"] #t4-side-locker .t4-tile{
  border-color:rgba(255,255,255,.55);
  background:rgba(3,11,32,.22)
}

/* 상품 카드 액션: 체크 배지 없이 가격과 라인업을 같은 규격으로 정렬 */
.t4-product-meta{flex-wrap:nowrap}
.t4-product .t4-product-price,
.t4-product .t4-product-lineup{
  display:inline-flex;flex:0 0 auto;height:28px;min-width:0;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:900;line-height:1;
  white-space:nowrap
}
.t4-product .t4-product-lineup{
  border:1px solid var(--duck-blue-dark);background:var(--duck-blue);color:var(--duck-yellow)
}
.t4-product .t4-product-lineup:hover{
  border-color:var(--duck-blue-dark);background:var(--duck-blue-dark);color:var(--duck-yellow)
}
@media (max-width:820px){
  .t4-picker .t4-product-price,
  .t4-picker .t4-product-lineup{
    height:26px;padding:3px 6px;font-size:9.5px
  }
}
@media (max-width:440px){
  .t4-picker .t4-product-price,
  .t4-picker .t4-product-lineup{padding-inline:4px;font-size:9px}
}

/* 확률 보기: 가챠덕 파랑·노랑으로 통일하고 작은 숫자도 또렷하게 표시한다. */
.t4-lineup-preview{
  width:min(380px,calc(100vw - 16px));border:2px solid var(--duck-blue-dark);
  border-radius:14px;background:#fff;color:var(--duck-blue-dark)
}
.t4-lineup-preview>header{padding:12px 14px;background:var(--duck-blue-dark);color:#fff}
.t4-lineup-preview>header small{color:var(--duck-yellow);font-size:9px}
.t4-lineup-preview>header b{font-size:15px;font-weight:1000}
.t4-lineup-preview>header em{
  padding:4px 9px;border-radius:999px;background:var(--duck-yellow);
  color:var(--duck-blue-dark);font-size:11px
}
.t4-lineup-preview-list{max-height:430px;padding:7px 9px}
.t4-lineup-preview-item{
  grid-template-columns:50px minmax(0,1fr) auto;gap:10px;padding:8px 5px;
  border-bottom:1px solid #cbd9f2
}
.t4-lineup-preview-item img{width:50px;height:50px;border:1px solid #d5e0f3;border-radius:9px}
.t4-lineup-preview-item b{font-size:13px;font-weight:1000}
.t4-lineup-preview-item small{margin-top:2px;color:#64718a;font-size:10px;font-weight:750}
.t4-lineup-preview-item>em{
  min-width:76px;padding:7px 9px;border:1px solid var(--duck-blue-dark);border-radius:999px;
  background:var(--duck-blue);color:var(--duck-yellow);font-size:12.5px;font-weight:1000;text-align:center
}
.t4-lineup-preview-item.is-secret>em{
  border-color:#d29f00;background:var(--duck-yellow);color:var(--duck-blue-dark)
}
.t4-lineup-preview>p{padding:9px 12px;background:#fff8d8;color:var(--duck-blue-dark);font-size:10.5px;font-weight:850}

.t4-modal--lineup .t4-prob-table{font-size:12px}
.t4-modal--lineup .t4-lineup-prob-head b{font-size:15px}
.t4-modal--lineup .t4-prob-table th{font-size:10.5px}
.t4-modal--lineup .t4-prob-val{
  min-width:68px;padding:6px 11px;border-color:var(--duck-blue-dark);
  background:var(--duck-blue);color:var(--duck-yellow);font-size:13px
}
.t4-modal--lineup .t4-prob-count{font-size:11px}
.t4-modal--lineup .t4-lineup-copy>em{
  border-color:var(--duck-blue-dark);background:var(--duck-blue);color:var(--duck-yellow)
}
.t4-modal--lineup .t4-lineup-copy>em span{color:#fff}
.t4-modal--lineup .t4-lineup-copy>em strong{font-size:11px}

@media (max-width:440px){
  .t4-picker .t4-product-lineup{font-size:9.5px}
  .t4-lineup-preview-item{grid-template-columns:46px minmax(0,1fr) auto;gap:8px}
  .t4-lineup-preview-item img{width:46px;height:46px}
  .t4-lineup-preview-item b{font-size:12px}
  .t4-lineup-preview-item>em{min-width:70px;padding:6px 8px;font-size:11.5px}
}

/* ========================================================================
   2026-07-19 · 서비스 소개 위젯 정돈
   네 장의 카드가 하나의 정보 세트로 보이도록 색·아이콘·여백을 통일한다.
   ======================================================================== */
.t4-seo .t4-seo-list{
  grid-template-rows:repeat(2,minmax(0,auto));
  align-content:center;
  gap:12px
}
.t4-seo .t4-seo-list li,
.t4-seo .t4-seo-list li:nth-child(odd),
.t4-seo .t4-seo-list li:nth-child(even){
  grid-template-columns:42px minmax(0,1fr);
  align-content:start;
  min-height:150px;
  gap:10px 12px;
  padding:16px;
  border:1px solid #d4def0;
  border-radius:16px;
  background:#fff;
  box-shadow:none
}
.t4-seo .t4-seo-list li>div{min-width:0}
.t4-seo .t4-seo-icon{
  width:42px;
  height:42px;
  border:1px solid #d7aa00;
  border-radius:50%;
  background:var(--duck-yellow);
  color:var(--t4-brand-blue);
  box-shadow:none
}
.t4-seo .t4-seo-icon svg{width:21px;height:21px}
.t4-seo .t4-seo-kicker{
  padding:3px 8px;
  border:0;
  background:#fff0a6;
  color:var(--duck-blue-dark);
  font-size:9px
}
.t4-seo .t4-seo-list b{
  margin-top:6px;
  color:var(--t4-brand-blue);
  font-size:16px;
  line-height:1.25
}
.t4-seo .t4-seo-list p{
  margin-top:5px;
  color:#59647a;
  font-size:11px;
  line-height:1.48
}
.t4-seo .t4-seo-list em{
  margin-top:7px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--t4-brand-blue);
  font-size:10px;
  box-shadow:none
}

html[data-theme="dark"] .t4-seo .t4-seo-list li,
html[data-theme="dark"] .t4-seo .t4-seo-list li:nth-child(odd),
html[data-theme="dark"] .t4-seo .t4-seo-list li:nth-child(even){
  border-color:var(--t4-night-line);
  background:var(--t4-night-panel)
}
html[data-theme="dark"] .t4-seo .t4-seo-icon{
  border-color:var(--duck-yellow);
  background:var(--duck-yellow);
  color:var(--duck-blue-dark)
}
html[data-theme="dark"] .t4-seo .t4-seo-kicker{
  background:var(--duck-yellow);
  color:var(--duck-blue-dark)
}
html[data-theme="dark"] .t4-seo .t4-seo-list b{color:#fff}
html[data-theme="dark"] .t4-seo .t4-seo-list p{color:#c3cee1}
html[data-theme="dark"] .t4-seo .t4-seo-list em{color:var(--duck-yellow)}

@media (max-width:760px){
  .t4-seo .t4-seo-list{
    grid-template-rows:none;
    align-content:stretch
  }
  .t4-seo .t4-seo-list li,
  .t4-seo .t4-seo-list li:nth-child(odd),
  .t4-seo .t4-seo-list li:nth-child(even){
    min-height:0;
    padding:14px
  }
}

/* ========================================================================
   2026-07-19 · 머신 상품 바로 선택 / 좌우 전환
   ======================================================================== */
.t4-machine-nav{
  position:absolute;z-index:20;top:30.5%;display:grid;
  width:clamp(36px,5.5cqw,44px);height:clamp(36px,5.5cqw,44px);
  place-items:center;padding:0;border:2px solid var(--duck-blue-dark);border-radius:50%;
  background:var(--duck-yellow);color:var(--duck-blue-dark);cursor:pointer;
  transform:translate(-50%,-50%);box-shadow:none
}
.t4-machine-nav::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.t4-machine-nav span{font-size:clamp(24px,4cqw,34px);font-weight:900;line-height:.75;transform:translateY(-1px)}
.t4-machine-nav--prev{left:calc(32.93% - clamp(24px,4.7cqw,38px))}
.t4-machine-nav--next{left:calc(67.06% + clamp(24px,4.7cqw,38px))}
.t4-machine-nav:hover{background:#fff;color:var(--t4-brand-blue)}
.t4-machine-nav:focus-visible{outline:3px solid var(--duck-yellow)!important;outline-offset:3px}
.t4-machine-nav:disabled{opacity:.28;cursor:default}
.t4-machine.is-mixing>.t4-machine-nav,
.t4-machine.has-result>.t4-machine-nav{opacity:0;pointer-events:none}

.t4-machine-picker-shortcut{display:none}

.t4-modal.t4-modal--quick-picker{
  display:flex;max-width:760px;max-height:min(88vh,820px);flex-direction:column
}
.t4-modal--quick-picker .t4-modal-head{flex:0 0 auto}
.t4-quick-picker-body{min-height:0;overflow-y:auto;background:#fff8df}
.t4-quick-picker-help{
  margin:0 0 12px;padding:10px 12px;border:1px solid #d4def0;border-radius:11px;
  background:#fff;color:#59647a;font-size:11px;font-weight:750;line-height:1.45
}
.t4-quick-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.t4-quick-product{
  display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:8px;padding:8px;
  border:1px solid #ccd8ed;border-radius:13px;background:#fff;color:var(--duck-blue-dark);
  text-align:left;cursor:pointer;box-shadow:none
}
.t4-quick-product:hover{border-color:var(--t4-brand-blue);background:#f8faff}
.t4-quick-product.is-selected{border:2px solid var(--t4-brand-blue);background:#fff8d8;padding:7px}
.t4-quick-product-thumb{
  display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid #e0e6f1;
  border-radius:9px;background:#fff
}
.t4-quick-product-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.t4-quick-product-copy{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start}
.t4-quick-product-copy>small{
  padding:2px 6px;border-radius:999px;background:var(--duck-yellow);color:var(--duck-blue-dark);
  font-size:8.5px;font-weight:950
}
.t4-quick-product-copy>b{
  display:-webkit-box;min-height:2.5em;margin-top:5px;overflow:hidden;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;font-size:11px;font-weight:950;line-height:1.25;word-break:keep-all
}
.t4-quick-product-copy>em{
  display:flex;max-width:100%;align-items:center;gap:5px;margin-top:5px;overflow:hidden;
  color:#778298;font-size:9px;font-style:normal;font-weight:750;white-space:nowrap
}
.t4-quick-product-copy>em .t4-maker-logo{width:15px;height:15px;object-fit:contain}
.t4-quick-product-copy>em span{overflow:hidden;text-overflow:ellipsis}
.t4-quick-product-copy>strong{
  display:inline-flex;align-items:center;gap:1px;margin-top:7px;padding:4px 8px;border-radius:999px;
  background:var(--t4-brand-blue);color:#fff;font-size:10px;font-weight:950
}
.t4-quick-product-copy>strong .t4-money-unit{color:var(--duck-yellow)}

html[data-theme="dark"] body{
  background-color:var(--t4-night-panel);
  background-image:none
}
html[data-theme="dark"] .t4-quick-picker-body{background:var(--t4-night-panel)}
html[data-theme="dark"] .t4-quick-picker-help{
  border-color:var(--t4-night-line);background:var(--t4-night-soft);color:#d2dced
}
html[data-theme="dark"] .t4-quick-product{
  border-color:var(--t4-night-line);background:var(--t4-night-main);color:#fff
}
html[data-theme="dark"] .t4-quick-product:hover{border-color:var(--duck-yellow);background:var(--t4-night-soft)}
html[data-theme="dark"] .t4-quick-product.is-selected{
  border-color:var(--duck-yellow);background:var(--t4-night-soft)
}
html[data-theme="dark"] .t4-quick-product-copy>em{color:var(--t4-night-muted)}

@media (max-width:820px){
  .t4-machine-picker-shortcut{
    position:absolute;z-index:21;right:2.4%;top:3.2%;display:flex;align-items:center;gap:5px;
    min-height:36px;padding:6px 9px;border:2px solid var(--duck-blue-dark);border-radius:999px;
    background:var(--duck-yellow);color:var(--duck-blue-dark);font-size:10px;font-weight:950;
    line-height:1;cursor:pointer;box-shadow:none
  }
  .t4-machine-picker-shortcut svg{width:17px;height:17px;fill:currentColor}
  .t4-machine-picker-shortcut:focus-visible{outline:3px solid var(--duck-yellow)!important;outline-offset:3px}
  .t4-machine.is-mixing>.t4-machine-picker-shortcut,
  .t4-machine.has-result>.t4-machine-picker-shortcut{opacity:0;pointer-events:none}
  .t4-modal.t4-modal--quick-picker{width:calc(100vw - 16px);max-height:91vh}
  .t4-modal--quick-picker .t4-modal-head{min-height:58px;padding:10px 12px}
  .t4-modal--quick-picker .t4-modal-head h2{font-size:16px}
  .t4-quick-picker-body{padding:10px}
  .t4-quick-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .t4-quick-product{gap:6px;padding:6px;border-radius:11px}
  .t4-quick-product.is-selected{padding:5px}
  .t4-quick-product-copy>b{font-size:10.5px}
}

@media (max-width:390px){
  .t4-machine-picker-shortcut span{display:none}
  .t4-machine-picker-shortcut{width:36px;padding:0;justify-content:center}
  .t4-quick-product-grid{gap:6px}
}

/* ========================================================================
   2026-07-19 · 모바일 앱형 탐색
   기본은 제조사 바로가기 + 가로 큐레이션, 검색을 열면 2열 결과로 전환한다.
   ======================================================================== */
.t4-search-toggle,
.t4-mobile-brand-strip,
.t4-mobile-benefit,
.t4-mobile-nav,
.t4-mobile-tab-icon{display:none}

@media (max-width:820px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}

  /* 한 줄 앱 헤더. 검색 버튼을 눌렀을 때만 두 번째 행이 열린다. */
  .t4-header{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px 8px!important;padding:7px var(--shell-pad) 8px!important
  }
  .t4-header .t4-logo{min-width:0;gap:5px}
  .t4-header .t4-logo-symbol{width:34px;height:34px}
  .t4-header .t4-logo-wordmark{height:21px;margin-left:-11px;margin-right:-7px}
  .t4-header .t4-chips{gap:5px}
  #t4-chip-guide{display:none!important}
  .t4-header .t4-search{display:none!important}
  .t4-header.is-search-open .t4-search{
    display:flex!important;grid-column:1/-1;grid-row:2;width:100%;min-height:42px;
    padding:8px 12px;border:1px solid #cbd7ea;border-radius:12px;background:#fff
  }
  .t4-search-toggle{
    display:grid;width:38px;height:38px;place-items:center;padding:0;
    border:1px solid #c7d4e9;border-radius:10px;background:#fff;color:var(--duck-blue-dark)
  }
  .t4-search-toggle svg{width:19px;height:19px;fill:currentColor}
  .t4-search-toggle[aria-expanded="true"]{
    border-color:#d0a000;background:var(--duck-yellow);color:var(--duck-blue-dark)
  }
  .t4-search-toggle:focus-visible{outline:3px solid var(--duck-yellow)!important;outline-offset:2px}

  /* 제조사 로고를 한 줄로 넘겨 보는 단축 메뉴 */
  .t4-mobile-brand-strip{
    display:flex;gap:8px;margin:1px -2px 10px;padding:2px 2px 4px;
    overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .t4-mobile-brand-strip::-webkit-scrollbar{display:none}
  .t4-mobile-brand-strip>button{
    display:flex;min-width:0;flex:0 0 68px;flex-direction:column;align-items:center;gap:5px;
    padding:6px 4px;scroll-snap-align:start;border:1px solid #d6dfed;border-radius:13px;
    background:#fff;color:var(--duck-blue-dark)
  }
  .t4-mobile-brand-strip>button.is-active{border:2px solid var(--duck-blue);padding:5px 3px;background:#fff9d9}
  .t4-mobile-brand-icon{
    display:grid;width:44px;height:44px;place-items:center;overflow:hidden;
    border-radius:50%;background:#f7f8fb
  }
  .t4-mobile-brand-icon .t4-maker-logo,
  .t4-mobile-brand-duck{width:34px!important;height:34px!important;object-fit:contain}
  .t4-mobile-brand-strip small{
    display:-webkit-box;width:100%;min-height:2.2em;overflow:hidden;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;font-size:9px;font-weight:850;line-height:1.1;text-align:center;word-break:keep-all
  }

  /* 큐레이션과 검색 결과 사이에 들어가는 재판매 혜택 배너 */
  .t4-mobile-benefit{
    display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;
    margin:12px 0 0;padding:9px 10px;border:1px solid var(--duck-blue-dark);border-radius:13px;
    background:var(--duck-yellow);color:var(--duck-blue-dark);text-align:left
  }
  .t4-mobile-benefit img{width:42px;height:42px;object-fit:contain}
  .t4-mobile-benefit span{display:flex;min-width:0;flex-direction:column}
  .t4-mobile-benefit small{font-size:9px;font-weight:750;line-height:1.2}
  .t4-mobile-benefit b{font-size:13px;font-weight:1000;line-height:1.25;letter-spacing:-.02em}
  .t4-mobile-benefit em{
    padding:5px 7px;border-radius:999px;background:var(--duck-blue);color:#fff;
    font-size:8px;font-style:normal;font-weight:950;white-space:nowrap
  }
  html.t4-mobile-search-open .t4-mobile-benefit{display:none}

  /* 모바일에서만 필터 버튼을 없애고 HOT / NEW 아이콘을 노출한다. */
  .t4-picker .t4-filter-btn{display:none!important}
  .t4-picker .t4-floor-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .t4-picker .t4-floor-tab>span{display:inline-flex;align-items:center;justify-content:center;gap:5px}
  .t4-mobile-tab-icon{display:block;width:17px;height:17px;flex:0 0 auto;fill:currentColor}
  .t4-picker .t4-floor-tab.is-active .t4-mobile-tab-icon{color:var(--duck-yellow)}

  /* 기본 탐색은 한 줄 가로 캐러셀. 검색을 연 경우에만 기존 2열 그리드. */
  .t4-picker .t4-product-list.is-mobile-carousel{
    display:flex!important;grid-template-columns:none!important;gap:9px!important;
    overflow-x:auto!important;overflow-y:visible;overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:1px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }
  .t4-picker .t4-product-list.is-mobile-carousel::-webkit-scrollbar{display:none}
  .t4-picker .t4-product-list.is-mobile-carousel>.t4-product{
    width:min(72vw,260px)!important;flex:0 0 min(72vw,260px)!important;scroll-snap-align:start
  }
  .t4-picker .t4-product-list.is-mobile-carousel>.t4-empty{width:100%;flex:0 0 100%}
  .t4-picker .t4-product-list.is-mobile-search-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;overflow:visible!important
  }

  /* 하단 내비게이션 */
  .t4-mobile-nav{
    position:fixed;z-index:68;left:0;right:0;bottom:0;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));height:calc(62px + env(safe-area-inset-bottom));
    padding:5px max(8px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-right));
    border-top:1px solid #cbd7ea;background:#fff
  }
  .t4-mobile-nav>button{
    display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border-radius:10px;color:#69758b;font-size:9px;font-weight:850;line-height:1
  }
  .t4-mobile-nav>button svg{width:21px;height:21px;fill:currentColor}
  .t4-mobile-nav>button.is-active{background:#fff4b8;color:var(--duck-blue-dark)}
  .t4-mobile-nav>button:focus-visible{outline:2px solid var(--duck-blue)!important;outline-offset:-2px}
}

@media (max-width:390px){
  .t4-header .t4-logo-symbol{width:32px;height:32px}
  .t4-header .t4-logo-wordmark{height:19px;margin-left:-10px;margin-right:-6px}
  .t4-search-toggle{width:36px;height:36px}
  .t4-mobile-benefit{grid-template-columns:38px minmax(0,1fr);gap:8px}
  .t4-mobile-benefit img{width:38px;height:38px}
  .t4-mobile-benefit em{display:none}
  .t4-mobile-brand-strip>button{flex-basis:64px}
}

html[data-theme="dark"] .t4-search-toggle{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:var(--duck-yellow)
}
html[data-theme="dark"] .t4-search-toggle[aria-expanded="true"]{
  border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)
}
html[data-theme="dark"] .t4-mobile-brand-strip>button{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff
}
html[data-theme="dark"] .t4-mobile-brand-strip>button.is-active{
  border-color:var(--duck-yellow);background:var(--t4-night-soft)
}
html[data-theme="dark"] .t4-mobile-brand-icon{background:#fff}
html[data-theme="dark"] .t4-mobile-benefit{border-color:var(--duck-yellow);background:var(--duck-yellow);color:var(--duck-blue-dark)}
html[data-theme="dark"] .t4-mobile-nav{border-color:var(--t4-night-line);background:var(--t4-night-main)}
html[data-theme="dark"] .t4-mobile-nav>button{color:var(--t4-night-muted)}
html[data-theme="dark"] .t4-mobile-nav>button.is-active{background:var(--t4-night-soft);color:var(--duck-yellow)}

/* ========================================================================
   2026-07-19 · 라인업 빠른 확률 3열
   상품을 가로 3개씩 배치하고 각 카드 아래에 개별 확률을 표시한다.
   ======================================================================== */
.t4-lineup-preview{
  width:min(510px,calc(100vw - 16px))
}
.t4-lineup-preview-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  max-height:430px;padding:10px
}
.t4-lineup-preview-item{
  display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:6px;padding:7px;
  border:1px solid #cbd9f2;border-radius:11px;background:#fff
}
.t4-lineup-preview-item:last-child{border-bottom:1px solid #cbd9f2}
.t4-lineup-preview-item img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  border:1px solid #d5e0f3;border-radius:8px;background:#fff
}
.t4-lineup-preview-item span{
  display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:flex-start
}
.t4-lineup-preview-item b{
  display:-webkit-box;min-height:2.4em;overflow:hidden;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;font-size:11px;line-height:1.2;text-align:center;
  text-overflow:clip;white-space:normal;word-break:keep-all;overflow-wrap:anywhere
}
.t4-lineup-preview-item small{display:none}
.t4-lineup-preview-item>em{
  display:flex;width:100%;min-width:0;min-height:31px;align-items:center;justify-content:center;
  padding:6px 5px;border:1px solid var(--duck-blue-dark);border-radius:999px;
  background:var(--duck-blue);color:var(--duck-yellow);font-size:12px;font-weight:1000;text-align:center
}
.t4-lineup-preview-item.is-secret>em{
  border-color:#d19f00;background:var(--duck-yellow);color:var(--duck-blue-dark)
}
html[data-theme="dark"] .t4-lineup-preview-item{
  border-color:var(--t4-night-line);background:var(--t4-night-panel);color:#fff
}
html[data-theme="dark"] .t4-lineup-preview-item:last-child{border-bottom-color:var(--t4-night-line)}

@media (max-width:520px){
  .t4-lineup-preview-list{gap:6px;padding:7px}
  .t4-lineup-preview-item{gap:5px;padding:5px}
  .t4-lineup-preview-item b{font-size:10px}
  .t4-lineup-preview-item>em{min-height:28px;padding:5px 3px;font-size:10.5px}
}

/* ========================================================================
   2026-07-19 · 모바일 상품 카드 플랫 리디자인
   큰 장식 카드 대신 이미지와 상품 정보만 남긴 간결한 쇼핑형 카드로 정리한다.
   ======================================================================== */
@media (max-width:820px){
  .t4-picker .t4-product-list.is-mobile-carousel{gap:14px!important}
  .t4-picker .t4-product-list.is-mobile-carousel>.t4-product{
    width:min(54vw,210px)!important;flex:0 0 min(54vw,210px)!important
  }

  .t4-picker .t4-product,
  .t4-picker .t4-product.is-selected{
    display:flex;width:100%;min-width:0;flex-direction:column;align-items:stretch;gap:0;
    padding:0!important;border:0!important;border-radius:0;background:transparent!important;
    box-shadow:none!important;transform:none
  }
  .t4-picker .t4-product:hover{
    border:0;background:transparent!important;box-shadow:none!important
  }
  .t4-picker .t4-product-select{border-radius:8px}
  .t4-picker .t4-product-select:focus-visible{
    outline:2px solid var(--duck-blue)!important;outline-offset:3px
  }

  .t4-picker .t4-product-thumb{
    display:block;width:100%;height:auto;aspect-ratio:1/1;overflow:hidden;
    border:0!important;border-radius:8px;background:#f3f5f8!important
  }
  .t4-picker .t4-product.is-selected .t4-product-thumb{
    outline:2px solid var(--duck-blue);outline-offset:-2px
  }
  .t4-picker .t4-product-thumb img{
    display:block;width:100%;height:100%;object-fit:contain;background:#fff
  }

  .t4-picker .t4-product-info{
    display:flex;width:100%;min-width:0;flex:1;flex-direction:column;align-items:stretch;
    padding:8px 1px 0
  }
  .t4-picker .t4-product-info .t4-pf{
    order:1;align-self:flex-end;min-height:0;margin:0 0 4px;padding:0;border:0;
    border-radius:0;background:transparent;color:#8a94a5;font-size:9px;font-weight:750;line-height:1.2
  }
  .t4-picker .t4-product-info h3{
    order:2;display:-webkit-box;min-height:2.5em;margin:0 0 5px;overflow:hidden;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--duck-blue-dark);
    font-size:13px;font-weight:900;line-height:1.25;letter-spacing:-.02em;
    overflow-wrap:anywhere;word-break:keep-all
  }
  .t4-picker .t4-product-info .t4-pm{
    order:3;display:flex;min-width:0;align-items:center;gap:5px;overflow:hidden;
    color:#858f9f;font-size:9.5px;font-weight:700;line-height:1.2;white-space:nowrap
  }
  .t4-picker .t4-product-info .t4-pm .t4-maker-logo{width:16px;height:16px}

  .t4-picker .t4-product-meta{
    order:4;display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px;
    margin-top:auto;padding-top:9px
  }
  .t4-picker .t4-product-price,
  .t4-picker .t4-product-lineup{
    width:auto;height:auto;min-width:0;min-height:0;padding:0;border:0!important;
    border-radius:0;background:transparent!important;box-shadow:none!important;
    font-size:11px;font-weight:950;line-height:1.2
  }
  .t4-picker .t4-product-price{
    color:var(--duck-blue-dark);font-size:13px
  }
  .t4-picker .t4-product-price .t4-money-unit{color:inherit}
  .t4-picker .t4-product-lineup{
    position:relative;color:var(--duck-blue)!important;text-decoration:underline;
    text-decoration-thickness:1px;text-underline-offset:3px
  }
  .t4-picker .t4-product-lineup:hover{
    background:transparent!important;color:var(--duck-blue-dark)!important
  }
}

@media (max-width:390px){
  .t4-picker .t4-product-list.is-mobile-carousel>.t4-product{
    width:min(52vw,190px)!important;flex-basis:min(52vw,190px)!important
  }
  .t4-picker .t4-product-info h3{font-size:12px}
  .t4-picker .t4-product-price{font-size:12px}
  .t4-picker .t4-product-lineup{font-size:10px}
}

@media (max-width:820px){
  html[data-theme="dark"] .t4-picker .t4-product,
  html[data-theme="dark"] .t4-picker .t4-product.is-selected{
    border:0!important;background:transparent!important;box-shadow:none!important
  }
  html[data-theme="dark"] .t4-picker .t4-product-thumb{background:#fff!important}
  html[data-theme="dark"] .t4-picker .t4-product-info h3{color:#fff}
  html[data-theme="dark"] .t4-picker .t4-product-info .t4-pf,
  html[data-theme="dark"] .t4-picker .t4-product-info .t4-pm{color:var(--t4-night-muted)}
  html[data-theme="dark"] .t4-picker .t4-product-price{color:var(--duck-yellow)}
  html[data-theme="dark"] .t4-picker .t4-product-lineup{color:#fff!important}
}

/* ========================================================================
   2026-07-19 · 모바일 보조 위젯 가로 레일
   세로로 길게 쌓이던 사이드 카드와 서비스 카드를 짧은 스와이프 행으로 묶는다.
   ======================================================================== */
@media (max-width:820px){
  .t4-main>.t4-side{
    display:flex!important;
    grid-template-columns:none!important;
    width:100%;
    max-width:100%;
    min-width:0;
    align-items:stretch;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 4px;
    scroll-padding-inline:0;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .t4-main>.t4-side::-webkit-scrollbar,
  .t4-seo .t4-seo-list::-webkit-scrollbar{display:none}

  .t4-main>.t4-side>.t4-card{
    box-sizing:border-box;
    display:flex;
    width:auto;
    height:218px;
    min-height:218px!important;
    flex:0 0 clamp(258px,76vw,326px);
    flex-direction:column;
    padding:11px;
    scroll-snap-align:start;
    scroll-snap-stop:always
  }
  .t4-main>.t4-side>.t4-card>.t4-card-head{
    min-height:31px;
    margin:0 0 8px;
    padding:0 0 7px
  }
  .t4-main>.t4-side .t4-card-title{font-size:13px}
  .t4-main>.t4-side .t4-card-title svg{width:18px;height:18px}
  .t4-main>.t4-side .t4-card-sub{font-size:10px!important}
  .t4-main>.t4-side .t4-mini-chip{min-height:25px;padding:3px 8px;font-size:10px}
  .t4-main>.t4-side .t4-btn{min-height:34px;padding:7px 9px;font-size:12px}
  .t4-main>.t4-side .t4-btn svg{width:15px;height:15px}

  #t4-side-locker .t4-locker-tiles{gap:6px;margin-bottom:7px}
  #t4-side-locker .t4-tile{padding:6px 8px;border-radius:9px}
  #t4-side-locker .t4-tile b{font-size:18px}
  #t4-side-locker .t4-tile span{font-size:9px}
  #t4-side-locker .t4-note{
    margin-top:6px;font-size:9px;line-height:1.35;white-space:normal
  }

  #t4-side-invite .t4-invite-body{
    min-height:42px;margin-bottom:7px;padding:6px 10px
  }
  #t4-side-invite .t4-ticket-ico{width:29px;height:29px}
  #t4-side-invite .t4-invite-body::after{left:48px}
  #t4-side-invite .t4-ticket-copy b{font-size:12px}
  #t4-side-invite .t4-ticket-copy small{font-size:9.5px}
  #t4-side-invite .t4-gauge-row{
    min-height:31px;gap:6px;margin:0 0 7px;padding:6px 8px
  }
  #t4-side-invite .t4-gauge-row small,
  #t4-side-invite .t4-gauge-row em{font-size:10px}
  #t4-side-invite .t4-gauge{height:9px}

  #t4-side-recent{overflow:hidden}
  #t4-side-recent #t4-recent-list{
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain
  }
  #t4-side-recent .t4-empty{padding:10px 8px;font-size:10.5px;line-height:1.45}
  #t4-side-recent .t4-recent-item{gap:6px;padding:5px 1px}
  #t4-side-recent .t4-recent-item img{width:30px;height:30px}
  #t4-side-recent .t4-recent-item .t4-r-name{font-size:11px}

  #t4-side-mission.t4-side-attendance{
    width:auto;
    height:218px;
    min-height:218px!important;
    flex-basis:clamp(304px,88vw,360px);
    padding:8px
  }
  #t4-side-mission.t4-side-attendance .t4-card-head{
    min-height:30px;margin:0;padding:5px 7px
  }
  #t4-side-mission.t4-side-attendance .t4-card-title{font-size:12px}
  #t4-side-mission.t4-side-attendance .t4-card-sub{padding:2px 6px;font-size:7px!important}
  #t4-side-mission.t4-side-attendance .t4-attendance{
    gap:4px;padding:6px 7px
  }
  #t4-side-mission.t4-side-attendance .t4-attendance-summary small{font-size:7px}
  #t4-side-mission.t4-side-attendance .t4-attendance-summary b{font-size:18px}
  #t4-side-mission.t4-side-attendance .t4-attendance-summary b em{font-size:8px}
  #t4-side-mission.t4-side-attendance .t4-attendance-summary strong{font-size:8px;line-height:1.25}
  #t4-side-mission.t4-side-attendance .t4-attendance-grid{
    grid-template-columns:repeat(10,20px)!important;
    justify-content:center;
    gap:3px
  }
  #t4-side-mission.t4-side-attendance .t4-attendance-day{
    width:20px;height:20px;aspect-ratio:auto
  }
  #t4-side-mission.t4-side-attendance .t4-attendance-day small{font-size:6.5px}
  #t4-side-mission.t4-side-attendance .t4-attendance-day i{width:3px;height:3px}
  #t4-side-mission.t4-side-attendance .t4-attendance-note{
    min-height:0;margin:0;overflow:hidden;font-size:8px;line-height:1.2;
    text-align:center;text-overflow:ellipsis;white-space:nowrap
  }
  #t4-side-mission.t4-side-attendance .t4-attendance-check{
    min-height:29px;border-radius:8px;font-size:9.5px
  }

  .t4-seo .t4-seo-list{
    display:flex!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    width:100%;
    max-width:100%;
    align-items:stretch;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 4px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .t4-seo .t4-seo-list li,
  .t4-seo .t4-seo-list li:nth-child(odd),
  .t4-seo .t4-seo-list li:nth-child(even){
    box-sizing:border-box;
    width:auto;
    height:142px;
    min-height:142px;
    flex:0 0 clamp(238px,74vw,292px);
    grid-template-columns:34px minmax(0,1fr);
    align-content:start;
    gap:7px 9px;
    padding:11px;
    border-radius:13px;
    scroll-snap-align:start;
    scroll-snap-stop:always
  }
  .t4-seo .t4-seo-icon{width:34px;height:34px}
  .t4-seo .t4-seo-icon svg{width:17px;height:17px}
  .t4-seo .t4-seo-kicker{padding:2px 6px;font-size:7.5px}
  .t4-seo .t4-seo-list b{margin-top:4px;font-size:13px;line-height:1.25}
  .t4-seo .t4-seo-list p{
    display:-webkit-box;margin-top:4px;overflow:hidden;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;font-size:9px;line-height:1.35
  }
  .t4-seo .t4-seo-list em{margin-top:4px;font-size:8.5px}
}

@media (max-width:390px){
  .t4-main>.t4-side>.t4-card{flex-basis:78vw}
  #t4-side-mission.t4-side-attendance{flex-basis:91vw}
  .t4-seo .t4-seo-list li,
  .t4-seo .t4-seo-list li:nth-child(odd),
  .t4-seo .t4-seo-list li:nth-child(even){flex-basis:77vw}
}

/* ── 충전 라이브 결제 UI (2026-07-19) ── */
.t4-charge-opt.is-on{border-color:#1c56d6;background:#eef4ff;box-shadow:0 0 0 3px rgba(28,86,214,.16)}
.t4-charge-opt.is-on span{color:#1c56d6}
.t4-pay-lead{margin-top:16px}
.t4-pay-grid{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.t4-pay-opt span{font-size:14px}
.t4-charge-go{width:100%;margin-top:12px}
#t4-charge-err:empty{display:none}

/* ── 소셜 로그인 + 숨김 탈퇴 (2026-07-19) ── */
.t4-social-stack{display:grid;gap:10px;margin-top:6px}
.t4-social{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:14px;font-weight:800;font-size:15px;cursor:pointer;transition:filter .15s}
.t4-social:hover{filter:brightness(.96)}
.t4-social:disabled{opacity:.6;cursor:wait}
.t4-social--kakao{background:#FEE500;color:#191919}
.t4-social--kakao::before{content:'';width:19px;height:19px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191919' d='M12 3C6.48 3 2 6.42 2 10.64c0 2.7 1.8 5.07 4.5 6.42-.15.52-.96 3.33-.99 3.55 0 0-.02.17.09.24.11.07.24.02.24.02.32-.05 3.66-2.4 4.24-2.81.62.09 1.26.14 1.92.14 5.52 0 10-3.42 10-7.56C22 6.42 17.52 3 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.t4-social--naver{background:#03C75A;color:#fff}
.t4-social--naver::before{content:'N';font-weight:900;font-size:16px}
.t4-social--apple{background:#111;color:#fff}
.t4-social--apple::before{content:'';font-size:17px}
.t4-auth-fineprint{color:#9aa0b5;font-size:11.5px;text-align:center;margin-top:12px}
.t4-me-withdraw{background:none;border:0;color:#9aa0b5;font-size:11.5px;text-decoration:underline;margin:12px auto 0;display:block;cursor:pointer;opacity:.55}
.t4-me-withdraw:hover{opacity:.9}

/* ============ 2026-07-25 모바일 픽커 그리드 · 마퀴 이동 · 사이드 2열 ============ */
.t4-lineup-thumb{position:relative}
.t4-lineup-secret-tag{
  position:absolute;left:6px;top:6px;z-index:2;background:#ff4fd8;color:#fff;
  border-radius:899px;font-style:normal;font-size:10px;font-weight:900;padding:2px 8px;
  box-shadow:0 2px 6px rgba(16,26,66,.25);
}
.t4-lineup-select{width:100%;margin-top:14px}
/* 마퀴('방금 누가 뽑았지?')가 픽커 아래로 이동해도 머신 아래와 동일한 모양 유지 */
.t4-picker .t4-ps{padding:0;margin-top:14px}
.t4-picker .t4-ps-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;margin:1px 0 10px;align-items:center}
.t4-picker .t4-ps-head>img{width:38px;height:38px;padding:4px;border:1px solid var(--navy-deep);border-radius:50%;background:#fff;object-fit:contain}
.t4-picker .t4-ps-head>span{min-width:0}
.t4-picker .t4-ps-head small{display:block;color:var(--blue);font-size:8px;font-weight:950;letter-spacing:.15em}
.t4-picker .t4-ps-head b{display:block;margin-top:1px;color:var(--ink);font-size:14px;line-height:1.15}
.t4-picker .t4-ps-head em{padding:5px 9px;border-radius:99px;background:var(--gold);color:var(--ink);font-size:9px;font-style:normal;font-weight:950;white-space:nowrap}
@media (max-width:900px){
  .t4-picker .t4-picker-help{display:none}
  .t4-mobile-brand-strip,#t4-filter-toggle,.t4-maker-drop{display:none!important}
  /* 모바일 기본 탐색: 가로 캐러셀 대신 4열 그리드 */
  .t4-picker .t4-product-list.is-mobile-carousel{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;
    overflow:visible!important;scroll-snap-type:none
  }
  .t4-picker .t4-product-list.is-mobile-carousel>.t4-product{width:auto!important;flex:none!important}
  .t4-picker .t4-product-list.is-mobile-search-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .t4-picker .t4-floor-tabs{grid-template-columns:1fr 1fr}
  .t4-picker .t4-product-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .t4-picker .t4-product,.t4-picker .t4-product.is-selected{display:block;gap:0;padding:0;overflow:hidden;border-radius:11px}
  .t4-picker .t4-product-thumb{width:100%;height:auto;aspect-ratio:1/1;border:0;border-radius:0;background:#fff9df}
  .t4-picker .t4-product-thumb img{object-fit:cover}
  .t4-picker .t4-product-info{display:block;padding:4px 3px 5px;text-align:center}
  .t4-picker .t4-product-info .t4-pf,.t4-picker .t4-product-info h3,.t4-picker .t4-product-info .t4-pm,.t4-picker .t4-product-lineup{display:none}
  .t4-picker .t4-product-meta{display:flex;justify-content:center;gap:0;margin-top:0;padding-top:0}
  .t4-picker .t4-product-price{display:inline-flex;min-height:0;border:0;background:none;padding:0;font-size:11.5px}
  .t4-picker .t4-product .t4-hot{top:5px;right:5px}
  .t4-side .t4-card:last-child{grid-column:auto}
}
@media (max-width:560px){
  .t4-picker .t4-product-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .t4-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t4-side .t4-card:last-child{grid-column:auto}
}

/* 2026-07-25: 모바일 사이드 카드(출고센터·친구초대·최근획득·출석도장) 가로 스와이프 → 2x2 그리드 */
@media (max-width:820px){
  .t4-main>.t4-side{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px;
    overflow:visible!important;
    scroll-snap-type:none;
    padding:0
  }
  .t4-main>.t4-side>.t4-card{
    width:100%;
    height:auto;
    min-height:218px!important;
    flex:none;
    min-width:0;
    scroll-snap-align:none
  }
}

/* 2026-07-25: 2x2 사이드 그리드에서 출석 도장 10열이 좁은 카드 폭을 넘지 않게 — 칸=최대 20px, 부족하면 균등 축소 */
@media (max-width:820px){
  #t4-side-mission.t4-side-attendance .t4-attendance-grid{
    grid-template-columns:repeat(10,minmax(0,20px))!important;
    justify-content:center
  }
  #t4-side-mission.t4-side-attendance .t4-attendance-day{
    width:auto;height:auto;aspect-ratio:1;min-width:0
  }
}

/* ============ 2026-07-25 모바일 개편 2차: 단독배너 · 마퀴 4컷 슬라이드 · 사이드 세로 슬림 · 내 정보 ============ */
/* 내 정보 모달 배송 프로필 */
.t4-me-profile{display:grid;gap:10px;margin:14px 0 4px}
.t4-me-sub{font-size:12px;font-weight:900;color:var(--navy)}

@media (max-width:820px){
  /* 재판매 혜택: 픽커 카드에서 분리한 단독 배너 (픽커 다음 행) */
  .t4-main>.t4-mobile-benefit{grid-row:3;margin:0;padding:11px 12px}
  .t4-main>.t4-side{grid-row:4}

  /* '방금 누가 뽑았지?': 가로 4컷 이미지 자동 좌측 슬라이드 */
  .t4-ps-viewport{overflow:hidden}
  .t4-ps-track{--t4-ps-gap:8px;--t4-ps-half-gap:4px;gap:8px;animation:t4psroll 30s linear infinite}
  .t4-ps-card,.t4-ps-card--live{width:clamp(64px,18vw,120px);max-width:120px;height:auto;aspect-ratio:1/1;border-radius:10px}
  .t4-ps-card--live .t4-ps-live-nick{left:5px;top:5px;font-size:8px;padding:2px 6px}
  .t4-ps-meta{left:6px;right:6px;bottom:5px}
  .t4-ps-meta small{display:none}
  .t4-ps-meta b{font-size:9px}

  /* 사이드 카드(출고센터·친구초대·최근획득·출석도장): 1개씩 세로 배치 + 고정높이 해제로 슬림하게 */
  .t4-main>.t4-side{grid-template-columns:minmax(0,1fr)!important}
  .t4-main>.t4-side>.t4-card{height:auto;min-height:0!important}
  #t4-side-mission.t4-side-attendance{width:100%;height:auto;min-height:0!important;flex-basis:auto}
  #t4-side-recent #t4-recent-list{overflow-y:visible;max-height:none}
}
@media (max-width:560px){
  .t4-side{grid-template-columns:minmax(0,1fr)}
}

/* ============ 2026-07-25 라인업 모달 간소화: 확률표 위젯 제거 · 메인 이미지 · 개별 상품 한줄 리스트 ============ */
.t4-modal--lineup .t4-lineup-main{display:block;overflow:hidden;margin-bottom:13px;border:1.5px solid #cbd9f2;border-radius:14px;background:#fff9de}
.t4-modal--lineup .t4-lineup-main img{display:block;width:100%;max-height:230px;object-fit:cover}
.t4-modal--lineup .t4-lineup-list{display:grid;gap:7px}
.t4-modal--lineup .t4-lineup-row{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;
  padding:5px 11px 5px 5px;border:1.5px solid #cbd9f2;border-radius:11px;background:#fff
}
.t4-modal--lineup .t4-lineup-row-thumb{display:block;width:46px;height:46px;overflow:hidden;border:1px solid #d7e2f5;border-radius:8px;background:#fff9de}
.t4-modal--lineup .t4-lineup-row-thumb img{width:100%;height:100%;object-fit:cover}
.t4-modal--lineup .t4-lineup-row>b{min-width:0;overflow:hidden;color:var(--duck-blue-dark);font-size:12.5px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.t4-modal--lineup .t4-lineup-row>em{color:var(--duck-blue);font-size:12px;font-style:normal;font-weight:1000;white-space:nowrap}
.t4-modal--lineup .t4-lineup-row.is-secret{border-color:var(--duck-red);background:#fff6f4}
.t4-modal--lineup .t4-lineup-row.is-secret>em{color:var(--duck-red)}
.t4-modal--lineup .t4-lineup-row .t4-lineup-secret-tag{position:static;display:inline-block;margin-right:5px;padding:1px 6px;font-size:8.5px;vertical-align:1.5px}

/* 2026-07-25: 모바일 사이드 순서 — 출고센터를 출석도장 아래로 */
@media (max-width:820px){
  .t4-main>.t4-side>#t4-side-locker{order:5}
}

/* 2026-07-25: 상품/파츠 이미지는 잘라내거나 확대 연출하지 않고 프레임 안에 맞춤 */
.t4-ps-card img,
.t4-product-thumb img,
.t4-quick-product-thumb img,
.t4-recent-item img,
.t4-locker-item img,
.t4-ship-items img,
.t4-lineup-cell img,
.t4-lineup-preview-item img,
.t4-rm-item>img,
.t4-machine .t4-result .t4-result-art img{
  object-fit:contain!important;
  transform:none!important;
}
.t4-machine #t4-tv-img{
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  transform:none!important;
}
.t4-lineup-cell img:hover{
  position:static!important;
  z-index:auto!important;
  transform:none!important;
  box-shadow:none!important;
}

/* ============ 2026-07-25 상품 선택·검색·확률 보기 정리 ============ */
/* 제조사 필터 제거: HOT → NEW → 상품명 검색 */
#t4-filter-toggle,
.t4-maker-drop,
.t4-mobile-brand-strip{display:none!important}
.t4-picker .t4-floor-tabs{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px!important;
  gap:7px
}
.t4-picker-search-toggle{
  display:grid;width:44px;min-height:44px;place-items:center;
  border:1px solid #d2dced;border-radius:10px;background:#f1f5fc;color:#536078;
  cursor:pointer
}
.t4-picker-search-toggle:hover,
.t4-picker-search-toggle.is-active{
  border-color:var(--duck-blue-dark);background:var(--duck-blue);color:#fff
}
.t4-picker-search-toggle svg{width:19px;height:19px}
.t4-picker-search{
  display:grid;grid-template-columns:20px minmax(0,1fr) 30px;align-items:center;gap:7px;
  min-height:44px;margin:0 0 10px;padding:6px 7px 6px 11px;
  border:1.5px solid #aabce0;border-radius:12px;background:#fff
}
.t4-picker-search[hidden]{display:none!important}
.t4-picker-search:focus-within{
  border-color:var(--duck-blue);box-shadow:0 0 0 3px rgba(11,75,203,.14)
}
.t4-picker-search>svg{width:18px;height:18px;color:var(--duck-blue)}
.t4-picker-search>input{
  min-width:0;border:0;outline:0;background:transparent;color:var(--ink);
  font:inherit;font-size:13px;font-weight:750
}
.t4-picker-search>button{
  display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:8px;
  background:#edf3ff;color:var(--duck-blue-dark);font-size:20px;line-height:1;cursor:pointer
}

/* 우측 상품 카드: 모든 화면에서 한 줄 2개, 정보는 이미지 아래 */
.t4-picker .t4-product-list,
.t4-picker .t4-product-list.is-mobile-carousel,
.t4-picker .t4-product-list.is-mobile-search-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;overflow:visible!important;scroll-snap-type:none!important
}
.t4-picker .t4-product-list>.t4-empty{grid-column:1/-1}
.t4-picker .t4-product,
.t4-picker .t4-product.is-selected{
  display:flex!important;width:100%!important;min-width:0!important;flex:none!important;
  flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
  gap:7px!important;padding:7px!important;overflow:hidden;border-width:1.5px;border-radius:12px
}
.t4-picker .t4-product-thumb{
  width:100%!important;height:auto!important;aspect-ratio:1/1;overflow:hidden;
  border:0;border-radius:9px;background:#fff9df
}
.t4-picker .t4-product-thumb img{
  display:block;width:100%;height:100%;object-fit:contain!important;
  transition:transform .22s ease
}
.t4-picker .t4-product-info{
  display:flex!important;width:100%;min-width:0;flex:1;flex-direction:column;align-items:stretch;
  padding:0 1px 1px!important;text-align:center
}
.t4-picker .t4-product-info .t4-pf,
.t4-picker .t4-product-info .t4-pm{display:none!important}
.t4-picker .t4-product-info h3{
  display:-webkit-box!important;min-height:2.7em;margin:1px 0 6px!important;
  overflow:hidden;color:var(--duck-blue-dark);font-size:11.5px!important;font-weight:900;
  line-height:1.35!important;text-align:left;overflow-wrap:anywhere;word-break:keep-all;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal
}
.t4-picker .t4-product-meta{
  display:grid!important;grid-template-columns:1fr!important;gap:5px!important;
  margin-top:auto!important;padding-top:0!important
}
.t4-picker .t4-product-price,
.t4-picker .t4-product-lineup{
  display:flex!important;width:100%;height:27px!important;min-width:0;align-items:center;justify-content:center;
  padding:3px 6px!important;font-size:10.5px!important
}

/* 확률 보기: 낱개도 2열 카드, 상품명·가격·확률은 이미지 아래 */
.t4-modal--lineup .t4-lineup-main{overflow:hidden}
.t4-modal--lineup .t4-lineup-main img{
  object-fit:contain!important;transition:transform .22s ease
}
.t4-modal--lineup .t4-lineup-list{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important
}
.t4-modal--lineup .t4-lineup-row{
  display:flex!important;min-width:0;flex-direction:column;align-items:stretch!important;gap:5px!important;
  padding:7px!important;text-align:center
}
.t4-modal--lineup .t4-lineup-row-thumb{
  display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1;
  overflow:hidden;border-radius:9px;background:#fff
}
.t4-modal--lineup .t4-lineup-row-thumb img{
  display:block;width:100%;height:100%;object-fit:contain!important;transition:transform .22s ease
}
.t4-modal--lineup .t4-lineup-row>b{
  display:-webkit-box;min-height:2.7em;overflow:hidden!important;font-size:12px!important;
  line-height:1.35;text-align:left;text-overflow:clip!important;white-space:normal!important;
  -webkit-box-orient:vertical;-webkit-line-clamp:2
}
.t4-modal--lineup .t4-lineup-row-price{
  display:flex;min-height:27px;align-items:center;justify-content:center;
  border-radius:999px;background:var(--duck-blue);color:var(--duck-yellow);
  font-size:11px;font-weight:1000
}
.t4-modal--lineup .t4-lineup-row>em{
  display:flex;min-height:27px;align-items:center;justify-content:center;
  border-radius:999px;background:#edf3ff;color:var(--duck-blue)!important
}

/* 상품·낱개·메인 자판기 이미지 호버 확대 */
@media (hover:hover) and (pointer:fine){
  .t4-picker .t4-product-thumb:hover img,
  .t4-quick-product-thumb:hover img,
  .t4-modal--lineup .t4-lineup-row-thumb:hover img,
  .t4-modal--lineup .t4-lineup-main:hover img{
    transform:scale(1.1)!important
  }
  .t4-machine .t4-tv{overflow:hidden}
  .t4-machine .t4-tv:hover #t4-tv-img{
    transform:scale(1.1)!important
  }
}
@media (prefers-reduced-motion:reduce){
  .t4-picker .t4-product-thumb img,
  .t4-modal--lineup img,
  .t4-machine #t4-tv-img{transition:none!important}
}

/* 2026-07-25: 시크릿 포함 상품과 중복 50% 환급 대상을 카드에서 즉시 구분 */
.t4-product-secret-badge{
  position:absolute;z-index:4;top:11px;left:11px;
  display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;
  border:2px solid #9c190a;border-radius:999px;background:#ff3b25;color:#fff;
  box-shadow:0 2px 0 #9c190a,0 3px 10px rgba(156,25,10,.28);
  font-size:9px;font-weight:1000;line-height:1;letter-spacing:-.02em;pointer-events:none
}
.t4-product-secret-badge::before{content:"★";margin-right:3px;color:#ffe033}
.t4-machine-secret-badge{
  position:absolute;z-index:9;top:12.8%;right:27.5%;
  display:inline-flex;align-items:center;justify-content:center;padding:.55cqw 1.05cqw;
  border:.2cqw solid #8e1709;border-radius:999px;background:#ff3b25;color:#fff;
  box-shadow:0 .3cqw 0 #8e1709,0 .6cqw 1.2cqw rgba(142,23,9,.25);
  font-size:1.15cqw;font-weight:1000;line-height:1;pointer-events:none
}
.t4-machine-secret-badge[hidden]{display:none!important}
.t4-machine-secret-badge::before{content:"★";margin-right:.35cqw;color:#ffe033}
.t4-locker-item .t4-lk-duplicate{
  position:absolute;z-index:3;top:13px;right:13px;padding:3px 7px;
  border:1px solid #b68400;border-radius:999px;background:#ffd91f;color:#102663;
  box-shadow:0 2px 6px rgba(16,38,99,.16);font-size:9px;font-weight:1000;line-height:1
}
.t4-locker-item.is-picked .t4-lk-duplicate{top:39px}
html[data-theme="dark"] .t4-product-secret-badge{border-color:#ffd91f;box-shadow:0 2px 0 #ffd91f}

/* 2026-07-25: 300·400·500엔 티어별 뽑기권 */
.t4-tier-ticket-counts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0 0 8px
}
.t4-tier-ticket-counts>span{
  display:flex;min-width:0;align-items:center;justify-content:space-between;gap:3px;
  padding:5px 6px;border:1px solid #b9c9e7;border-radius:8px;background:#fff
}
.t4-tier-ticket-counts small{
  color:var(--duck-blue-dark);font-size:9px;font-weight:950;white-space:nowrap
}
.t4-tier-ticket-counts b{
  color:var(--duck-blue);font-size:10px;font-weight:1000;white-space:nowrap
}
.t4-tier-gauges{display:grid;gap:5px;margin:0 0 10px}
.t4-tier-gauge-row{
  display:grid;grid-template-columns:36px minmax(0,1fr) 29px;align-items:center;gap:6px
}
.t4-tier-gauge-row>small{
  color:var(--duck-blue-dark);font-size:9px;font-weight:1000;white-space:nowrap
}
.t4-tier-gauge-row>em{
  color:var(--duck-blue-dark);font-size:9px;font-style:normal;font-weight:1000;text-align:right;white-space:nowrap
}
.t4-tier-gauge{
  position:relative;height:11px;overflow:hidden;border:1px solid #aebfdf;border-radius:999px;background:#e8edf6
}
.t4-tier-gauge>i{
  position:absolute;z-index:1;inset:0 auto 0 0;width:0;border-radius:999px;
  background:linear-gradient(90deg,#ffc800,#ffe66a);transition:width .3s ease
}
.t4-tier-gauge::after{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(16,38,99,.25) calc(10% - 1px),rgba(16,38,99,.25) 10%)
}
html[data-theme="dark"] .t4-tier-ticket-counts>span{border-color:#3d5b8a;background:#0b2146}
html[data-theme="dark"] .t4-tier-ticket-counts small,
html[data-theme="dark"] .t4-tier-ticket-counts b,
html[data-theme="dark"] .t4-tier-gauge-row>small,
html[data-theme="dark"] .t4-tier-gauge-row>em{color:#fff}
html[data-theme="dark"] .t4-tier-gauge{border-color:#3d5b8a;background:#04132e}

/* 상품 가격과 옵션: C 코인 · 가격 | 옵션 한 줄 */
.t4-picker .t4-product-meta{
  display:flex!important;grid-template-columns:none!important;align-items:center!important;
  justify-content:center!important;gap:6px!important;margin-top:auto!important;padding-top:0!important
}
.t4-picker .t4-product-price,
.t4-picker .t4-product-lineup{
  display:inline-flex!important;width:auto!important;height:27px!important;min-width:0!important;
  flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
  padding:2px 0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--duck-blue-dark)!important;
  font-size:10.5px!important;font-weight:1000!important;text-decoration:none!important;white-space:nowrap
}
.t4-product-meta-sep{
  color:#9aa8bf;font-size:12px;font-style:normal;font-weight:800;line-height:1
}
.t4-price-cash-symbol{
  display:inline-grid;flex:0 0 auto;width:17px;height:17px;margin-right:4px;place-items:center;
  border-radius:50%;background:var(--duck-blue);color:var(--duck-yellow);
  font-size:10px;font-weight:1000;line-height:1
}
.t4-picker .t4-product-lineup:hover{color:var(--duck-blue)!important}
.t4-lineup-row-price .t4-price-cash-symbol{width:16px;height:16px;font-size:9px}
.t4-panel .t4-price-cash-symbol{width:1.7cqw;height:1.7cqw;margin-right:.35cqw;font-size:1.05cqw}

/* 카드 프레임이 아니라 화면 위에 메인 원본 이미지를 크게 표시 */
.t4-image-zoom-preview{
  position:fixed;z-index:5000;inset:0;display:grid;place-items:center;padding:20px;
  background:rgba(7,23,46,.2);pointer-events:none
}
.t4-image-zoom-preview.is-click-open{
  background:rgba(2,10,28,.78);pointer-events:auto
}
html.t4-image-zoom-open,
html.t4-image-zoom-open body{
  overflow:hidden!important;overscroll-behavior:none
}
.t4-image-zoom-preview[hidden]{display:none!important}
.t4-image-zoom-preview>figure{
  position:relative;
  width:min(780px,76vw);max-height:calc(100vh - 40px);margin:0;padding:14px;
  overflow:hidden;border:7px solid #151827;border-radius:24px;background:#fff;
  box-shadow:0 24px 70px rgba(7,23,46,.38)
}
.t4-image-zoom-preview img{
  display:block;width:100%;height:min(72vh,700px);object-fit:contain;border-radius:14px;background:#fff
}
.t4-image-zoom-preview figcaption{
  padding:10px 8px 2px;overflow:hidden;color:#151827;font-size:18px;font-weight:1000;
  text-align:center;text-overflow:ellipsis;white-space:nowrap
}
.t4-image-zoom-close{
  position:fixed;z-index:1;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));
  display:none;width:48px;height:48px;padding:0;place-items:center;
  border:2px solid rgba(255,255,255,.8);border-radius:50%;background:#fff;color:#0a255e;
  box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:32px;font-weight:700;line-height:1;cursor:pointer
}
.t4-image-zoom-preview.is-click-open .t4-image-zoom-close{display:grid}
.t4-image-zoom-close:focus-visible{outline:4px solid var(--duck-yellow);outline-offset:3px}
.t4-machine .t4-tv{cursor:zoom-in}
.t4-machine .t4-tv:focus-visible{
  outline:.45cqw solid var(--duck-yellow);outline-offset:.25cqw
}
@media (hover:hover) and (pointer:fine){
  .t4-picker .t4-product-thumb:hover img,
  .t4-quick-product-thumb:hover img,
  .t4-modal--lineup .t4-lineup-row-thumb:hover img,
  .t4-modal--lineup .t4-lineup-main:hover img,
  .t4-machine .t4-tv:hover #t4-tv-img{transform:none!important}
}
@media (max-width:900px){
  .t4-image-zoom-preview:not(.is-click-open){display:none!important}
  .t4-image-zoom-preview.is-click-open{display:grid!important;padding:12px}
  .t4-image-zoom-preview>figure{width:94vw;max-height:calc(100dvh - 24px);padding:9px;border-width:4px;border-radius:17px}
  .t4-image-zoom-preview img{height:min(76dvh,700px);border-radius:10px}
  .t4-image-zoom-preview figcaption{padding:8px 42px 2px;font-size:15px}
  .t4-image-zoom-close{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:42px;height:42px;font-size:28px}
  .t4-tier-ticket-counts>span{padding:5px 4px}
}

/* ============ 2026-07-25 픽커 헤더 검색 위치·사이드 문구 정리 ============ */
.t4-picker .t4-picker-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "copy copy"
    "art tools";
  align-items:center!important;
  gap:8px 10px!important;
  padding:13px 14px!important
}
.t4-picker .t4-picker-head>div:first-child{grid-area:copy}
.t4-picker .t4-picker-art{
  grid-area:art;
  position:static!important;
  z-index:2!important;
  display:block;
  width:88px!important;
  max-width:100%;
  height:auto;
  margin:0!important;
  opacity:1!important;
  transform:none!important
}
.t4-picker .t4-picker-head-tools{
  grid-area:tools;
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px
}
.t4-picker .t4-picker-head-tools .t4-picker-badge{
  min-width:0;
  min-height:44px;
  padding:7px 13px
}
.t4-picker .t4-picker-head-tools .t4-picker-search-toggle{
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-height:44px;
  border:0;
  background:#fff;
  color:var(--duck-blue-dark)
}
.t4-picker .t4-picker-head-tools .t4-picker-search-toggle:hover,
.t4-picker .t4-picker-head-tools .t4-picker-search-toggle.is-active{
  background:var(--duck-yellow);
  color:var(--duck-blue-dark)
}
.t4-picker .t4-floor-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr))!important
}
.t4-picker-search-toggle:focus,
.t4-picker-search-toggle:focus-visible,
.t4-picker-search>input:focus,
.t4-picker-search>input:focus-visible{
  border-color:transparent!important;
  outline:none!important;
  box-shadow:none!important
}
.t4-picker-search>input{
  -webkit-appearance:none;
  appearance:none
}
.t4-picker-search:focus-within{
  outline:none!important;
  border-color:#aabce0!important;
  box-shadow:none!important
}

/* ============ 2026-07-25 모바일 히어로: 큰 이미지 안에 카피 통합 ============ */
@media (max-width:820px){
  .t4-hero-viewport{
    height:clamp(220px,63vw,285px)!important;
    aspect-ratio:auto!important;
    background:#fff8df
  }
  .t4-hero-img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:70% center!important;
    border:0!important
  }
  .t4-hero-slide::after{
    inset:0!important;
    width:100%!important;
    background:linear-gradient(90deg,rgba(255,250,231,.97) 0%,rgba(255,250,231,.9) 45%,rgba(255,250,231,.38) 70%,rgba(255,250,231,0) 100%)!important
  }
  .t4-hero-copy{
    left:0!important;
    right:auto!important;
    top:0!important;
    bottom:0!important;
    display:flex;
    width:min(69%,270px)!important;
    max-width:none!important;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:12px 8px 38px 14px!important;
    transform:none!important
  }
  .t4-hero-eyebrow{
    min-height:20px;
    padding:4px 8px;
    font-size:8.5px
  }
  .t4-hero-copy .t4-hero-title{
    margin-top:6px;
    font-size:clamp(17px,5.2vw,23px);
    line-height:1.06;
    letter-spacing:-.8px;
    text-shadow:0 1px 0 rgba(255,255,255,.85)
  }
  .t4-hero-copy p{
    max-width:100%;
    margin-top:6px;
    font-size:clamp(8.8px,2.65vw,10.5px);
    line-height:1.34;
    text-shadow:0 1px 0 rgba(255,255,255,.85)
  }
  .t4-hero-copy-cta{
    min-height:31px;
    margin-top:7px;
    padding:5px 10px;
    border-radius:8px;
    font-size:9.5px;
    box-shadow:0 3px 0 #092c70
  }
  .t4-hero-copy-cta b{font-size:14px}
  .t4-hero-controls{
    right:7px;
    bottom:7px;
    padding:2px 4px;
    transform:scale(.82)!important;
    transform-origin:right bottom
  }
}
@media (max-width:360px){
  .t4-hero-viewport{height:218px!important}
  .t4-hero-copy{
    width:72%!important;
    padding-left:12px!important
  }
  .t4-hero-copy .t4-hero-title{font-size:17px}
  .t4-hero-copy p{font-size:8.7px}
}
@media (max-width:820px){
  html[data-theme="dark"] .t4-hero-slide::after{
    background:linear-gradient(90deg,rgba(3,11,32,.97) 0%,rgba(5,18,45,.91) 48%,rgba(5,18,45,.42) 72%,rgba(5,18,45,0) 100%)!important
  }
}

/* ============ 2026-07-25 모바일 상품 가격·옵션 통합 바 ============ */
@media (max-width:820px){
  .t4-picker .t4-product-meta{
    display:grid!important;
    width:100%;
    min-height:34px;
    grid-template-columns:minmax(0,1fr) 1px minmax(0,.72fr)!important;
    align-items:center!important;
    gap:5px!important;
    padding:4px 7px!important;
    border:1px solid var(--duck-blue-dark);
    border-radius:9px;
    background:var(--duck-blue);
    box-shadow:0 2px 0 var(--duck-blue-dark)
  }
  .t4-picker .t4-product-price,
  .t4-picker .t4-product-lineup{
    display:inline-flex!important;
    width:100%!important;
    height:24px!important;
    min-width:0!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    white-space:nowrap
  }
  .t4-picker .t4-product-price{
    color:#fff!important;
    font-size:10.5px!important
  }
  .t4-picker .t4-product-price .t4-price-cash-symbol{
    width:17px;
    height:17px;
    margin-right:4px;
    background:var(--duck-yellow);
    color:var(--duck-blue-dark)
  }
  .t4-picker .t4-product-price .t4-money-unit{display:none!important}
  .t4-picker .t4-product-meta-sep{
    display:block!important;
    width:1px;
    height:15px;
    overflow:hidden;
    background:rgba(255,255,255,.45);
    color:transparent;
    font-size:0
  }
  .t4-picker .t4-product-lineup{
    color:var(--duck-yellow)!important;
    font-size:0!important;
    font-weight:1000!important;
    text-decoration:none!important
  }
  .t4-picker .t4-product-lineup::after{
    content:"옵션";
    font-size:10px;
    line-height:1
  }
  .t4-picker .t4-product-lineup:hover,
  .t4-picker .t4-product-lineup:active{color:#fff!important}
}

/* ============ 2026-07-25 모바일 상품 목록 원래 4열 복원 ============ */
@media (max-width:820px){
  .t4-picker .t4-product-list,
  .t4-picker .t4-product-list.is-mobile-carousel,
  .t4-picker .t4-product-list.is-mobile-search-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important
  }
  .t4-picker .t4-product,
  .t4-picker .t4-product.is-selected{
    display:block!important;
    width:100%!important;
    gap:0!important;
    padding:0!important;
    border-radius:9px!important
  }
  .t4-picker .t4-product-thumb{
    border-radius:8px 8px 0 0!important
  }
  .t4-picker .t4-product-info{
    display:block!important;
    padding:3px 2px 4px!important
  }
  .t4-picker .t4-product-info h3,
  .t4-picker .t4-product-info .t4-pf,
  .t4-picker .t4-product-info .t4-pm{
    display:none!important
  }
  .t4-picker .t4-product-meta{
    min-height:27px;
    grid-template-columns:minmax(0,1fr) 1px auto!important;
    gap:2px!important;
    padding:2px 3px!important;
    border-radius:6px;
    box-shadow:0 1px 0 var(--duck-blue-dark)
  }
  .t4-picker .t4-product-price,
  .t4-picker .t4-product-lineup{
    height:21px!important
  }
  .t4-picker .t4-product-price{
    font-size:8.5px!important
  }
  .t4-picker .t4-product-price .t4-price-cash-symbol{
    width:13px;
    height:13px;
    margin-right:2px;
    font-size:8px
  }
  .t4-picker .t4-product-lineup::after{font-size:8.5px}
  .t4-picker .t4-product-meta-sep{height:12px}
}
@media (max-width:390px){
  .t4-picker .t4-product-list,
  .t4-picker .t4-product-list.is-mobile-carousel,
  .t4-picker .t4-product-list.is-mobile-search-grid{
    gap:5px!important
  }
}

/* ============ 2026-07-25 모바일 가격·확률·픽커 헤더 최종 정리 ============ */
@media (max-width:820px){
  /* 상품 카드: 옵션을 제거하고 금액만 표시 */
  .t4-picker .t4-product-meta{
    display:flex!important;
    min-height:27px;
    align-items:center!important;
    justify-content:center!important;
    padding:2px 3px!important
  }
  .t4-picker .t4-product-meta-sep,
  .t4-picker .t4-product-lineup{
    display:none!important
  }
  .t4-picker .t4-product-price{
    width:100%!important;
    color:#fff!important
  }
  .t4-picker .t4-product-price .t4-price-cash-symbol{
    background:var(--duck-yellow)!important;
    color:var(--duck-blue-dark)!important
  }

  /* 낱개 목록: 가격과 확률을 같은 줄에 두고 재고 수량은 숨김 */
  .t4-modal--lineup .t4-lineup-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch!important;
    gap:5px!important
  }
  .t4-modal--lineup .t4-lineup-row-thumb,
  .t4-modal--lineup .t4-lineup-row>b{
    grid-column:1/-1
  }
  .t4-modal--lineup .t4-lineup-row-price,
  .t4-modal--lineup .t4-lineup-row>em{
    display:flex;
    width:100%;
    min-width:0;
    min-height:29px;
    align-items:center;
    justify-content:center;
    padding:3px 4px;
    white-space:nowrap
  }
  .t4-modal--lineup .t4-lineup-row-price{
    border-radius:999px;
    background:var(--duck-blue);
    color:var(--duck-yellow)
  }
  .t4-modal--lineup .t4-lineup-row-price .t4-price-cash-symbol{
    width:16px;
    height:16px;
    margin-right:4px;
    background:var(--duck-yellow);
    color:var(--duck-blue-dark);
    font-size:9px
  }
  .t4-modal--lineup .t4-lineup-row>em{
    border-radius:999px;
    background:#edf3ff;
    color:var(--duck-blue)!important;
    font-size:10.5px
  }
  .t4-modal--lineup .t4-lineup-remaining{display:none!important}

  /* 뽑을 상품 선택 · 오늘신상 · 상품 수 · 검색을 한 줄로 배치 */
  .t4-picker .t4-picker-head{
    display:flex!important;
    min-height:58px;
    flex-wrap:nowrap;
    align-items:center!important;
    gap:6px!important;
    padding:9px 10px!important
  }
  .t4-picker .t4-picker-head>div:first-child{
    display:block;
    min-width:0;
    flex:1 1 auto;
    order:1
  }
  .t4-picker .t4-picker-head small{display:none}
  .t4-picker .t4-picker-head h2{
    margin:0;
    overflow:hidden;
    font-size:clamp(13px,4vw,17px);
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .t4-picker .t4-picker-art{
    flex:0 0 44px;
    width:44px!important;
    max-height:42px;
    order:2;
    object-fit:contain
  }
  .t4-picker .t4-picker-head-tools{
    flex:0 0 auto;
    gap:5px;
    order:3
  }
  .t4-picker .t4-picker-head-tools .t4-picker-badge{
    min-height:36px;
    padding:5px 9px;
    font-size:13px
  }
  .t4-picker .t4-picker-head-tools .t4-picker-search-toggle{
    width:36px;
    height:36px;
    min-height:36px;
    flex-basis:36px;
    border-radius:10px
  }
  .t4-picker .t4-picker-head-tools .t4-picker-search-toggle svg{
    width:17px;
    height:17px
  }
}
@media (max-width:360px){
  .t4-picker .t4-picker-art{
    flex-basis:38px;
    width:38px!important
  }
  .t4-picker .t4-picker-head-tools .t4-picker-badge{
    padding-inline:7px;
    font-size:12px
  }
}

/* ============ 2026-07-25 일반 결제형 캐시 충전 · NICEPAY ============ */
.t4-modal.t4-modal--charge-flow{
  width:min(560px,calc(100vw - 24px));
  max-width:560px;
  max-height:calc(100vh - 24px);
  overflow:hidden;
  border:1px solid #d9e0ec;
  border-radius:20px;
  background:#fff;
  box-shadow:0 24px 70px rgba(16,38,99,.24)
}
.t4-modal--charge-flow .t4-modal-head{
  min-height:68px;
  padding:13px 17px;
  border-bottom:1px solid #dfe5ef;
  background:#fff;
  color:var(--duck-blue-dark)
}
.t4-modal--charge-flow .t4-modal-head h2{font-size:21px}
.t4-modal--charge-flow .t4-modal-head h2 small{
  color:var(--duck-blue);
  font-size:9px;
  letter-spacing:.14em
}
.t4-modal--charge-flow .t4-modal-x{
  width:38px;
  height:38px;
  border:0;
  background:#f0f3f8;
  color:var(--duck-blue-dark);
  box-shadow:none
}
.t4-modal--charge-flow .t4-modal-body--charge{
  max-height:calc(100vh - 94px);
  overflow-y:auto;
  padding:18px;
  background:#f6f7f9
}
.t4-charge-balance{
  display:flex;
  min-height:52px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border:1px solid #dfe4ec;
  border-radius:13px;
  background:#fff
}
.t4-charge-balance>span{
  color:#667085;
  font-size:12px;
  font-weight:850
}
.t4-charge-balance>b{
  display:inline-flex;
  align-items:center;
  color:var(--duck-blue-dark);
  font-size:17px;
  font-weight:1000
}
.t4-charge-balance .t4-price-cash-symbol{
  width:20px;
  height:20px;
  margin-right:5px;
  background:var(--duck-yellow);
  color:var(--duck-blue-dark)
}
.t4-charge-section{
  margin-top:12px;
  padding:15px;
  border:1px solid #dfe4ec;
  border-radius:14px;
  background:#fff
}
.t4-charge-section>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px
}
.t4-charge-section>header>b{
  color:#202a44;
  font-size:14px;
  font-weight:950
}
.t4-charge-section>header>small{
  color:#7a8498;
  font-size:10px;
  font-weight:750
}
.t4-charge-presets{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}
.t4-modal--charge-flow .t4-charge-opt,
.t4-modal--charge-flow .t4-charge-opt:nth-child(3){
  position:relative;
  display:flex;
  min-height:52px;
  align-items:baseline;
  justify-content:center;
  gap:3px;
  padding:10px 8px;
  overflow:hidden;
  border:1px solid #ccd5e3;
  border-radius:10px;
  background:#fff;
  color:#27324b;
  box-shadow:none;
  transform:none
}
.t4-modal--charge-flow .t4-charge-opt::before,
.t4-modal--charge-flow .t4-charge-opt::after{
  display:none!important;
  content:none!important
}
.t4-modal--charge-flow .t4-charge-opt>b{font-size:16px;font-weight:950}
.t4-modal--charge-flow .t4-charge-opt>span{font-size:11px;font-weight:850}
.t4-modal--charge-flow .t4-charge-opt:hover{
  border-color:#8eaae1;
  background:#f8faff;
  box-shadow:none;
  transform:none
}
.t4-modal--charge-flow .t4-charge-opt.is-on{
  border:2px solid var(--duck-blue);
  background:#edf3ff;
  color:var(--duck-blue);
  box-shadow:none
}
.t4-modal--charge-flow .t4-charge-opt.is-on b,
.t4-modal--charge-flow .t4-charge-opt.is-on span{color:var(--duck-blue)}
.t4-charge-custom{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin-top:9px
}
.t4-charge-custom>span:first-child{
  color:#4b556b;
  font-size:11px;
  font-weight:850
}
.t4-charge-custom>span:last-child{
  display:flex;
  height:43px;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border:1px solid #ccd5e3;
  border-radius:10px;
  background:#fff
}
.t4-charge-custom input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#202a44;
  font:inherit;
  font-size:14px;
  font-weight:850;
  text-align:right
}
.t4-charge-custom input:focus{outline:0;box-shadow:none}
.t4-charge-custom>span:last-child>b{color:#7a8498;font-size:11px}
.t4-charge-method-card{
  display:grid;
  min-height:58px;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:2px solid var(--duck-blue);
  border-radius:11px;
  background:#f4f7ff
}
.t4-charge-method-card>i{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--duck-blue);
  color:#fff;
  font-size:16px;
  font-style:normal;
  font-weight:1000
}
.t4-charge-method-card>span{display:flex;min-width:0;flex-direction:column}
.t4-charge-method-card>span>b{color:#202a44;font-size:13px;font-weight:950}
.t4-charge-method-card>span>small{margin-top:2px;color:#69758c;font-size:9.5px;line-height:1.35}
.t4-charge-method-card>em{
  padding:4px 7px;
  border-radius:999px;
  background:var(--duck-blue);
  color:#fff;
  font-size:9px;
  font-style:normal;
  font-weight:900
}
.t4-charge-summary{
  display:grid;
  gap:7px;
  margin:12px 0 0;
  padding:13px 15px;
  border:1px solid #dfe4ec;
  border-radius:13px;
  background:#fff
}
.t4-charge-summary>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.t4-charge-summary dt{color:#717b8f;font-size:11px;font-weight:750}
.t4-charge-summary dd{margin:0;color:#34405a;font-size:12px;font-weight:900}
.t4-charge-summary .is-total{
  margin-top:3px;
  padding-top:10px;
  border-top:1px solid #e5e9f0
}
.t4-charge-summary .is-total dt{color:#202a44;font-size:13px;font-weight:950}
.t4-charge-summary .is-total dd{color:var(--duck-blue);font-size:18px;font-weight:1000}
.t4-charge-agree{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
  color:#4b556b;
  font-size:11px;
  font-weight:750;
  line-height:1.45;
  cursor:pointer
}
.t4-charge-agree input{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin:0;
  accent-color:var(--duck-blue)
}
.t4-charge-gateway{
  margin:10px 0 0;
  padding:8px 10px;
  border-radius:8px;
  background:#fff4d6;
  color:#785900;
  font-size:10px;
  font-weight:800;
  text-align:center
}
.t4-charge-gateway.is-ready{background:#edf8f0;color:#26723b}
.t4-modal--charge-flow #t4-charge-err{
  margin:8px 0 0;
  font-size:11px;
  text-align:center
}
.t4-modal--charge-flow .t4-charge-go{
  width:100%;
  min-height:52px;
  margin-top:10px;
  border-radius:12px;
  font-size:15px
}
.t4-modal--charge-flow .t4-charge-go:disabled{
  border-color:#d8dde7;
  background:#dfe3ea;
  color:#8a93a4;
  box-shadow:none;
  cursor:not-allowed
}
.t4-charge-fine{
  margin:9px 0 0;
  color:#8a93a4;
  font-size:9.5px;
  line-height:1.45;
  text-align:center
}
@media (max-width:560px){
  .t4-modal.t4-modal--charge-flow{
    width:calc(100vw - 14px);
    max-height:calc(100vh - 14px);
    border-radius:16px
  }
  .t4-modal--charge-flow .t4-modal-head{min-height:58px;padding:9px 12px}
  .t4-modal--charge-flow .t4-modal-head h2{font-size:18px}
  .t4-modal--charge-flow .t4-modal-body--charge{
    max-height:calc(100vh - 72px);
    padding:12px
  }
  .t4-charge-section{margin-top:9px;padding:12px}
  .t4-charge-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .t4-modal--charge-flow .t4-charge-opt,
  .t4-modal--charge-flow .t4-charge-opt:nth-child(3){min-height:48px}
  .t4-charge-balance{min-height:47px;padding:9px 12px}
  .t4-charge-summary{margin-top:9px;padding:11px 12px}
  .t4-charge-agree{margin-top:10px}
}
html[data-theme="dark"] .t4-modal.t4-modal--charge-flow,
html[data-theme="dark"] .t4-modal--charge-flow .t4-modal-head,
html[data-theme="dark"] .t4-charge-balance,
html[data-theme="dark"] .t4-charge-section,
html[data-theme="dark"] .t4-charge-summary{
  border-color:var(--t4-night-line);
  background:var(--t4-night-panel);
  color:#fff
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-modal-body--charge{background:var(--t4-night-main)}
html[data-theme="dark"] .t4-charge-section>header>b,
html[data-theme="dark"] .t4-charge-balance>b,
html[data-theme="dark"] .t4-charge-method-card>span>b,
html[data-theme="dark"] .t4-charge-summary .is-total dt,
html[data-theme="dark"] .t4-charge-custom input{color:#fff}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-opt,
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-opt:nth-child(3),
html[data-theme="dark"] .t4-charge-custom>span:last-child{
  border-color:var(--t4-night-line);
  background:var(--t4-night-soft);
  color:#fff
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-opt.is-on,
html[data-theme="dark"] .t4-charge-method-card{
  border-color:var(--duck-yellow);
  background:#17315c
}
html[data-theme="dark"] .t4-charge-agree,
html[data-theme="dark"] .t4-charge-method-card>span>small{color:#cbd5e6}

/* ========================================================================
   2026-07-25 · 자판기 오락실 앰비언트 / 당첨 잭팟 연출
   기능 UI와 분리된 pointer-events:none 장식 레이어만 사용한다.
   ======================================================================== */
.t4-machine-ambient{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:1;
  pointer-events:none;
  transition:opacity .22s ease
}
.t4-machine-ambient *,
.t4-machine-celebration *{pointer-events:none}
.t4-machine.is-mixing .t4-machine-ambient,
.t4-machine.is-dispensing .t4-machine-ambient{opacity:.26}
.t4-machine.has-result .t4-machine-ambient{opacity:0}
.t4-machine-ambient.is-paused *{animation-play-state:paused!important}

.t4-arcade-light{
  position:absolute;
  z-index:1;
  top:20%;
  width:1.65%;
  height:54%;
  opacity:.66;
  background:
    radial-gradient(circle,#fff 0 16%,#ffd21f 20% 48%,rgba(255,210,31,.15) 52%,transparent 66%)
    50% 0/100% 10% repeat-y;
  filter:drop-shadow(0 0 .45cqw rgba(255,210,31,.75));
  animation:t4ArcadeLightChase 1.35s steps(4,end) infinite
}
.t4-arcade-light--left{left:18.8%}
.t4-arcade-light--right{right:18.8%;animation-delay:-.68s}
.t4-machine-ambient.is-switching .t4-arcade-light{
  opacity:1;
  animation-duration:.22s
}

.t4-arcade-orbit{
  position:absolute;
  z-index:2;
  display:block;
  width:3.1%;
  aspect-ratio:1;
  opacity:.72;
  filter:drop-shadow(0 .28cqw .22cqw rgba(7,52,134,.24));
  animation:t4ArcadeOrbit 3.8s ease-in-out infinite
}
.t4-arcade-orbit--one{
  left:8.5%;
  top:30%;
  border:.28cqw solid var(--duck-blue-dark);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 15%,#ffe979 18% 45%,#ffd21f 48% 100%)
}
.t4-arcade-orbit--two{
  right:7.8%;
  top:43%;
  background:var(--duck-yellow);
  clip-path:polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 93%,50% 71%,21% 93%,32% 56%,2% 35%,39% 34%);
  animation-delay:-1.15s
}
.t4-arcade-orbit--three{
  left:11.5%;
  top:60%;
  width:2.45%;
  border:.22cqw solid #fff;
  border-radius:50%;
  background:var(--duck-blue);
  animation-delay:-2.1s
}
.t4-arcade-orbit--four{
  right:10.8%;
  top:25%;
  width:2.65%;
  border-radius:35% 65% 56% 44%;
  background:#ff5b4a;
  animation-delay:-2.8s
}

.t4-arcade-duck-track{
  position:absolute;
  z-index:3;
  right:0;
  bottom:.5%;
  left:0;
  height:11%;
  overflow:visible
}
.t4-arcade-duck{
  position:absolute;
  bottom:2%;
  left:-12%;
  display:block;
  width:8.5%;
  aspect-ratio:1;
  animation:t4ArcadeDuckPatrol 15s linear infinite;
  will-change:transform
}
.t4-arcade-duck img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 .48cqw .28cqw rgba(7,52,134,.3));
  animation:t4ArcadeDuckBob .38s steps(2,end) infinite
}
.t4-arcade-foot{
  position:absolute;
  z-index:1;
  bottom:-2%;
  width:31%;
  height:14%;
  border:.18cqw solid #9a6c00;
  border-radius:65% 45% 60% 38%;
  background:#ffca16
}
.t4-arcade-foot--one{
  left:19%;
  transform:rotate(12deg);
  animation:t4ArcadeFootOne .38s steps(2,end) infinite
}
.t4-arcade-foot--two{
  right:19%;
  transform:rotate(-12deg);
  animation:t4ArcadeFootTwo .38s steps(2,end) infinite
}

.t4-machine-celebration{
  position:absolute;
  z-index:19;
  inset:0;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none
}
.t4-machine-celebration.is-active{visibility:visible}
.t4-machine-celebration::before,
.t4-machine-celebration::after{
  position:absolute;
  inset:0;
  content:"";
  opacity:0
}
.t4-machine-celebration::before{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.92) 0 3%,rgba(255,226,83,.66) 8%,rgba(11,75,203,.16) 28%,transparent 57%)
}
.t4-machine-celebration::after{
  background:
    conic-gradient(from 0deg at 50% 42%,transparent 0 9deg,rgba(255,210,31,.32) 10deg 15deg,transparent 16deg 29deg);
  mix-blend-mode:screen
}
.t4-machine-celebration.is-active::before{animation:t4ArcadeFlash 1.05s ease-out both}
.t4-machine-celebration.is-active::after{animation:t4ArcadeRays 2.15s ease-out both}
.t4-machine-celebration.is-jackpot::before{animation-duration:1.55s}
.t4-machine-celebration.is-jackpot::after{animation-duration:3.2s}

.t4-arcade-jackpot{
  position:absolute;
  z-index:3;
  top:6.5%;
  left:50%;
  display:flex;
  min-width:34%;
  align-items:center;
  justify-content:center;
  gap:.7cqw;
  padding:.72cqw 1.45cqw .8cqw;
  opacity:0;
  border:.34cqw solid #fff;
  border-radius:999px;
  background:linear-gradient(180deg,#0b57db,#073486);
  box-shadow:
    0 0 0 .35cqw var(--duck-yellow),
    0 .65cqw 0 rgba(7,52,134,.68),
    0 0 2.2cqw rgba(255,210,31,.75);
  color:#fff;
  transform:translate(-50%,-120%) scale(.7) rotate(-3deg);
  white-space:nowrap
}
.t4-arcade-jackpot small{
  color:var(--duck-yellow);
  font-size:clamp(7px,.92cqw,11px);
  font-weight:1000;
  letter-spacing:.13em
}
.t4-arcade-jackpot b{
  font-size:clamp(15px,2.65cqw,29px);
  font-weight:1000;
  letter-spacing:.035em;
  line-height:1
}
.t4-machine-celebration.is-active .t4-arcade-jackpot{
  animation:t4ArcadeJackpotSign 2.25s cubic-bezier(.18,.82,.22,1) both
}
.t4-machine-celebration.is-jackpot .t4-arcade-jackpot{
  border-color:#fff7c2;
  background:linear-gradient(180deg,#ffe76b,#ffc515);
  box-shadow:
    0 0 0 .42cqw #f04432,
    0 .75cqw 0 #9f3a25,
    0 0 3cqw rgba(255,210,31,.95);
  color:var(--duck-blue-dark);
  animation-duration:3.35s
}
.t4-machine-celebration.is-jackpot .t4-arcade-jackpot small{color:#b22818}

.t4-arcade-burst{
  position:absolute;
  z-index:2;
  inset:0
}
.t4-arcade-burst>i{
  position:absolute;
  top:42%;
  left:50%;
  display:block;
  width:clamp(7px,1.45cqw,13px);
  aspect-ratio:1;
  opacity:0;
  animation-delay:var(--delay)
}
.t4-machine-celebration.is-active .t4-arcade-burst>i{
  animation-name:t4ArcadeBurst;
  animation-duration:1.85s;
  animation-timing-function:cubic-bezier(.16,.75,.22,1);
  animation-fill-mode:both
}
.t4-machine-celebration.is-jackpot .t4-arcade-burst>i{animation-duration:2.65s}
.t4-arcade-burst>i.is-coin{
  border:.17cqw solid #9a6c00;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff7ae 0 12%,#ffd21f 18% 64%,#e7a900 68%);
  box-shadow:inset 0 0 0 .16cqw #ffe66b
}
.t4-arcade-burst>i.is-star{
  background:#ffcf16;
  clip-path:polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 93%,50% 71%,21% 93%,32% 56%,2% 35%,39% 34%)
}
.t4-arcade-burst>i.is-ticket{
  width:clamp(9px,1.8cqw,16px);
  aspect-ratio:1.45;
  border:.15cqw solid #fff;
  border-radius:.28cqw;
  background:var(--duck-blue)
}

@keyframes t4ArcadeLightChase{
  0%,100%{background-position:50% 0;opacity:.38}
  50%{background-position:50% 10%;opacity:.96}
}
@keyframes t4ArcadeOrbit{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg);opacity:.48}
  50%{transform:translate3d(0,-1.6cqw,0) rotate(12deg);opacity:.92}
}
@keyframes t4ArcadeDuckPatrol{
  0%{transform:translate3d(0,0,0)}
  46%{transform:translate3d(1320%,0,0)}
  49.9%{transform:translate3d(1320%,0,0) scaleX(1)}
  50%{transform:translate3d(1320%,0,0) scaleX(-1)}
  96%{transform:translate3d(0,0,0) scaleX(-1)}
  99.9%{transform:translate3d(0,0,0) scaleX(-1)}
  100%{transform:translate3d(0,0,0) scaleX(1)}
}
@keyframes t4ArcadeDuckBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-5%) rotate(2deg)}
}
@keyframes t4ArcadeFootOne{
  0%,100%{transform:translateX(-9%) rotate(18deg)}
  50%{transform:translateX(13%) rotate(3deg)}
}
@keyframes t4ArcadeFootTwo{
  0%,100%{transform:translateX(10%) rotate(-4deg)}
  50%{transform:translateX(-12%) rotate(-18deg)}
}
@keyframes t4ArcadeFlash{
  0%{opacity:0;transform:scale(.25)}
  18%{opacity:1}
  100%{opacity:0;transform:scale(1.22)}
}
@keyframes t4ArcadeRays{
  0%{opacity:0;transform:rotate(0) scale(.35)}
  20%{opacity:.88}
  100%{opacity:0;transform:rotate(58deg) scale(1.22)}
}
@keyframes t4ArcadeJackpotSign{
  0%{opacity:0;transform:translate(-50%,-125%) scale(.65) rotate(-5deg)}
  12%{opacity:1;transform:translate(-50%,0) scale(1.12) rotate(2deg)}
  22%,78%{opacity:1;transform:translate(-50%,0) scale(1) rotate(-1deg)}
  88%{opacity:1;transform:translate(-50%,0) scale(1.06) rotate(1deg)}
  100%{opacity:0;transform:translate(-50%,-45%) scale(.86) rotate(-2deg)}
}
@keyframes t4ArcadeBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}
  12%{opacity:1}
  70%{opacity:1;transform:translate(calc(-50% + var(--x1)),calc(-50% + var(--y1))) scale(1) rotate(var(--spin))}
  100%{opacity:0;transform:translate(calc(-50% + var(--x2)),calc(-50% + var(--y2))) scale(.68) rotate(var(--spin))}
}

@media (max-width:820px){
  .t4-arcade-light{top:22%;height:50%;width:1.9%}
  .t4-arcade-light--left{left:16.7%}
  .t4-arcade-light--right{right:16.7%}
  .t4-arcade-orbit--three,
  .t4-arcade-orbit--four{display:none}
  .t4-arcade-duck{width:9.8%;animation-duration:12.5s}
  .t4-arcade-jackpot{
    top:5.5%;
    min-width:43%;
    gap:1cqw;
    padding:1.1cqw 2.2cqw 1.2cqw
  }
  .t4-arcade-jackpot small{font-size:clamp(6px,1.7cqw,9px)}
  .t4-arcade-jackpot b{font-size:clamp(14px,4.2cqw,24px)}
}

@media (prefers-reduced-motion:reduce){
  .t4-machine-ambient .t4-arcade-orbit,
  .t4-machine-ambient .t4-arcade-duck-track{display:none!important}
  .t4-machine-ambient .t4-arcade-light{
    opacity:.28;
    animation:none!important
  }
  .t4-machine-celebration::before,
  .t4-machine-celebration::after,
  .t4-arcade-burst{display:none!important}
  .t4-machine-celebration.is-active .t4-arcade-jackpot{
    opacity:1;
    animation:none!important;
    transform:translate(-50%,0) scale(1)
  }
}

/* ========================================================================
   2026-07-25 · GACHA DUCK PACHINKO RUSH
   기존 자판기 위에만 표시되는 만화 컷인/유리 부착/777 시퀀스.
   ======================================================================== */
.t4-arcade-peeker{
  position:absolute;
  z-index:3;
  display:block;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity
}
.t4-arcade-peeker img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 .8cqw .45cqw rgba(7,52,134,.28))
}
.t4-arcade-peeker b{
  position:absolute;
  z-index:4;
  display:grid;
  min-width:4.8cqw;
  min-height:3.2cqw;
  place-items:center;
  padding:.45cqw .75cqw;
  border:.25cqw solid var(--duck-blue-dark);
  border-radius:999px;
  background:#fff;
  box-shadow:0 .35cqw 0 var(--duck-blue-dark);
  color:var(--duck-blue-dark);
  font-size:clamp(8px,1.25cqw,13px);
  font-weight:1000;
  white-space:nowrap
}
.t4-arcade-peeker>i{
  position:absolute;
  z-index:1;
  width:13cqw;
  aspect-ratio:1;
  border:.35cqw solid rgba(255,255,255,.8);
  border-radius:50%;
  opacity:0;
  box-shadow:
    inset 0 0 0 .45cqw rgba(11,75,203,.12),
    0 0 0 .7cqw rgba(255,210,31,.2)
}
.t4-arcade-peeker--left{
  bottom:-2%;
  left:-24%;
  width:20%;
  transform-origin:20% 100%;
  animation:t4PachinkoPeekLeft 10.8s cubic-bezier(.2,.75,.18,1) infinite
}
.t4-arcade-peeker--left b{top:12%;right:-16%}
.t4-arcade-peeker--left>i{top:30%;right:-38%;animation:t4PachinkoGlassTap 10.8s ease-out infinite}
.t4-arcade-peeker--right{
  right:-21%;
  bottom:1%;
  width:17%;
  transform-origin:80% 100%;
  animation:t4PachinkoPeekRight 13.4s cubic-bezier(.2,.75,.18,1) -4.9s infinite
}
.t4-arcade-peeker--right b{top:4%;left:-22%}
.t4-arcade-peeker--right>i{top:28%;left:-45%;animation:t4PachinkoGlassTap 13.4s ease-out -4.9s infinite}

.t4-machine-celebration{
  overflow:hidden;
  border-radius:inherit;
  contain:layout paint style
}
.t4-machine-celebration.is-paused *{animation-play-state:paused!important}
.t4-machine.is-mixing>.t4-machine-celebration,
.t4-machine.is-dispensing>.t4-machine-celebration,
.t4-machine-celebration.is-charging,
.t4-machine-celebration.is-active{visibility:visible}
.t4-pachinko-stage{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  isolation:isolate
}
.t4-pachinko-stage::before{
  position:absolute;
  z-index:-2;
  inset:0;
  content:"";
  opacity:0;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.9) 0 4%,rgba(255,218,51,.42) 13%,rgba(11,75,203,.46) 39%,rgba(7,23,46,.78) 78%)
}
.t4-machine-celebration.is-active .t4-pachinko-stage::before{
  animation:t4PachinkoBackdrop 3.85s ease-out both
}
.t4-machine-celebration.is-jackpot .t4-pachinko-stage::before{
  background:
    radial-gradient(circle at 50% 44%,#fff 0 4%,rgba(255,231,82,.85) 12%,rgba(240,68,50,.58) 38%,rgba(7,23,46,.88) 78%);
  animation-duration:5.1s
}

.t4-pachinko-speedlines{
  position:absolute;
  z-index:-1;
  inset:-22%;
  opacity:0;
  background:
    repeating-conic-gradient(from 0deg at 50% 44%,rgba(255,255,255,.95) 0 1deg,transparent 1.5deg 8deg);
  -webkit-mask-image:radial-gradient(circle at 50% 44%,transparent 0 19%,rgba(0,0,0,.18) 28%,#000 56%);
  mask-image:radial-gradient(circle at 50% 44%,transparent 0 19%,rgba(0,0,0,.18) 28%,#000 56%);
  transform-origin:50% 44%
}
.t4-machine.is-mixing .t4-pachinko-speedlines{
  animation:t4PachinkoSpeedRush 1.6s linear both
}
.t4-machine-celebration.is-active .t4-pachinko-speedlines{
  animation:t4PachinkoSpeedBurst 2.4s linear both
}
.t4-machine-celebration.is-jackpot .t4-pachinko-speedlines{animation-duration:3.3s}

.t4-pachinko-neon-ring{
  position:absolute;
  z-index:0;
  top:43%;
  left:50%;
  width:34%;
  aspect-ratio:1;
  border:.75cqw solid var(--duck-yellow);
  border-radius:50%;
  opacity:0;
  box-shadow:
    0 0 0 .55cqw rgba(11,75,203,.85),
    0 0 2.4cqw 1cqw rgba(255,210,31,.62),
    inset 0 0 1.7cqw rgba(255,255,255,.82);
  transform:translate(-50%,-50%) scale(.25)
}
.t4-pachinko-neon-ring--two{width:46%;border-color:#fff;animation-delay:.15s!important}
.t4-machine-celebration.is-charging .t4-pachinko-neon-ring,
.t4-machine.is-mixing .t4-pachinko-neon-ring{
  animation:t4PachinkoNeonCharge .72s ease-out both
}
.t4-machine.is-dispensing .t4-pachinko-neon-ring{
  top:84%;
  width:20%;
  animation:t4PachinkoDoorImpact 1.2s ease-out both
}
.t4-machine-celebration.is-active .t4-pachinko-neon-ring{
  animation:t4PachinkoNeonBlast 2.15s ease-out both
}
.t4-machine-celebration.is-jackpot .t4-pachinko-neon-ring{
  border-color:#ffda3b;
  box-shadow:
    0 0 0 .65cqw #f04432,
    0 0 3.5cqw 1.3cqw rgba(255,210,31,.9),
    inset 0 0 2.2cqw #fff;
  animation-duration:3.2s
}

.t4-pachinko-heartbeat{
  position:absolute;
  z-index:5;
  top:10%;
  left:50%;
  opacity:0;
  color:var(--duck-yellow);
  font-size:clamp(12px,2.3cqw,24px);
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:
    -.16cqw -.16cqw 0 var(--duck-blue-dark),
    .16cqw -.16cqw 0 var(--duck-blue-dark),
    -.16cqw .16cqw 0 var(--duck-blue-dark),
    .16cqw .16cqw 0 var(--duck-blue-dark);
  transform:translateX(-50%)
}
.t4-machine-celebration.is-charging .t4-pachinko-heartbeat{
  animation:t4PachinkoHeartbeat .72s steps(2,end) both
}

.t4-pachinko-cut-in{
  position:absolute;
  z-index:5;
  top:18%;
  left:-2%;
  width:35%;
  opacity:0;
  transform:translateX(-115%) rotate(-8deg)
}
.t4-pachinko-cut-in img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(.8cqw .9cqw 0 rgba(7,52,134,.72))
}
.t4-pachinko-cut-in strong{
  position:absolute;
  top:4%;
  right:-11%;
  padding:.45cqw .8cqw;
  border:.25cqw solid var(--duck-blue-dark);
  border-radius:999px;
  background:var(--duck-yellow);
  color:var(--duck-blue-dark);
  font-size:clamp(10px,1.7cqw,18px);
  font-weight:1000;
  transform:rotate(8deg);
  white-space:nowrap
}
.t4-machine.is-mixing .t4-pachinko-cut-in{
  animation:t4PachinkoCutIn 1.58s cubic-bezier(.15,.82,.2,1) both
}

.t4-pachinko-reels{
  position:absolute;
  z-index:4;
  top:18%;
  left:50%;
  display:grid;
  width:31%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65cqw;
  opacity:0;
  transform:translateX(-50%)
}
.t4-pachinko-reels span{
  display:grid;
  aspect-ratio:.78;
  place-items:center;
  border:.42cqw solid #fff;
  border-radius:1.1cqw;
  background:linear-gradient(180deg,#0e61eb,#062e83);
  box-shadow:
    0 0 0 .35cqw var(--duck-yellow),
    0 .75cqw 0 var(--duck-blue-dark),
    inset 0 0 1.1cqw rgba(255,255,255,.68);
  color:#fff;
  font-family:Arial Black,Arial,sans-serif;
  font-size:clamp(31px,7.4cqw,72px);
  font-weight:1000;
  line-height:1;
  text-shadow:.2cqw .3cqw 0 var(--duck-blue-dark);
  transform:translateY(-240%) rotateX(160deg)
}
.t4-machine-celebration.is-active .t4-pachinko-reels{
  animation:t4PachinkoReelsFrame 2.15s ease-out both
}
.t4-machine-celebration.is-active .t4-pachinko-reels span{
  animation:t4PachinkoSevenDrop 1.55s cubic-bezier(.12,.88,.18,1.18) both
}
.t4-machine-celebration.is-active .t4-pachinko-reels span:nth-child(2){animation-delay:.16s}
.t4-machine-celebration.is-active .t4-pachinko-reels span:nth-child(3){animation-delay:.32s}
.t4-machine-celebration.is-jackpot .t4-pachinko-reels span{
  border-color:#fff9b5;
  background:linear-gradient(180deg,#ff725f,#c7251d);
  box-shadow:
    0 0 0 .4cqw #ffda3b,
    0 .78cqw 0 #8e1b15,
    inset 0 0 1.2cqw #fff
}

.t4-pachinko-slam{
  position:absolute;
  z-index:6;
  top:48%;
  left:50%;
  width:44%;
  opacity:0;
  transform:translate(-50%,-50%) translateX(125%) scale(.4) rotate(16deg)
}
.t4-pachinko-slam>img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  filter:
    drop-shadow(0 1cqw 0 rgba(7,52,134,.68))
    drop-shadow(0 0 2cqw rgba(255,255,255,.78))
}
.t4-pachinko-slam>strong{
  position:absolute;
  z-index:5;
  top:-5%;
  right:-20%;
  opacity:0;
  color:#fff;
  font-size:clamp(18px,4.7cqw,48px);
  font-weight:1000;
  letter-spacing:-.08em;
  text-shadow:
    -.3cqw -.3cqw 0 #f04432,
    .3cqw -.3cqw 0 #f04432,
    -.3cqw .3cqw 0 #f04432,
    .3cqw .3cqw 0 #f04432,
    .55cqw .65cqw 0 var(--duck-blue-dark);
  transform:rotate(10deg)
}
.t4-pachinko-splat{
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  width:132%;
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  background:
    repeating-conic-gradient(from 0deg,#fff 0 3deg,transparent 3deg 12deg);
  transform:translate(-50%,-50%) scale(.25)
}
.t4-machine-celebration.is-active .t4-pachinko-slam{
  animation:t4PachinkoDuckSlam 3.35s cubic-bezier(.16,.82,.2,1) both
}
.t4-machine-celebration.is-active .t4-pachinko-slam>strong{
  animation:t4PachinkoSlamWord 3.35s ease-out both
}
.t4-machine-celebration.is-active .t4-pachinko-splat{
  animation:t4PachinkoSplat 3.35s ease-out both
}
.t4-machine-celebration.is-jackpot .t4-pachinko-slam,
.t4-machine-celebration.is-jackpot .t4-pachinko-slam>strong,
.t4-machine-celebration.is-jackpot .t4-pachinko-splat{animation-duration:4.7s}

.t4-pachinko-glass{
  position:absolute;
  z-index:7;
  inset:0
}
.t4-pachinko-glass i{
  position:absolute;
  width:10%;
  aspect-ratio:1;
  border:.38cqw solid rgba(255,255,255,.84);
  border-radius:48% 52% 44% 56%;
  opacity:0;
  box-shadow:
    inset 0 0 0 .55cqw rgba(255,255,255,.18),
    0 0 1.1cqw rgba(255,255,255,.66)
}
.t4-pachinko-glass i:nth-child(1){top:29%;left:31%;transform:rotate(-18deg)}
.t4-pachinko-glass i:nth-child(2){top:41%;right:27%;transform:rotate(13deg) scale(.78)}
.t4-pachinko-glass i:nth-child(3){top:59%;left:47%;transform:rotate(-4deg) scale(.62)}
.t4-machine-celebration.is-active .t4-pachinko-glass i{
  animation:t4PachinkoGlassPrint 3.2s ease-out both
}
.t4-machine-celebration.is-active .t4-pachinko-glass i:nth-child(2){animation-delay:.11s}
.t4-machine-celebration.is-active .t4-pachinko-glass i:nth-child(3){animation-delay:.2s}
.t4-machine-celebration.is-jackpot .t4-pachinko-glass i{animation-duration:4.55s}

.t4-pachinko-hype{
  position:absolute;
  z-index:8;
  right:-4%;
  bottom:-5%;
  width:39%;
  opacity:0;
  transform:translate(95%,45%) rotate(13deg) scale(.55)
}
.t4-pachinko-hype img{
  display:block;
  width:100%;
  height:auto;
  filter:
    drop-shadow(0 1.1cqw 0 #f04432)
    drop-shadow(0 0 2.2cqw rgba(255,210,31,.95))
}
.t4-pachinko-hype strong{
  position:absolute;
  top:7%;
  left:-38%;
  padding:.65cqw 1cqw;
  border:.3cqw solid var(--duck-blue-dark);
  border-radius:999px;
  background:#fff;
  color:#f04432;
  font-size:clamp(12px,2.2cqw,23px);
  font-weight:1000;
  transform:rotate(-10deg);
  white-space:nowrap
}
.t4-machine-celebration.is-jackpot .t4-pachinko-hype{
  animation:t4PachinkoHypeDuck 4.8s cubic-bezier(.16,.82,.2,1) both
}

.t4-pachinko-board{
  position:absolute;
  z-index:9;
  top:50%;
  left:50%;
  width:67%;
  opacity:0;
  transform:translate(-50%,-50%) translateY(38%) scale(.48) rotate(-8deg)
}
.t4-pachinko-board>img{
  display:block;
  width:100%;
  height:auto;
  filter:
    drop-shadow(0 1.1cqw 0 var(--duck-blue-dark))
    drop-shadow(0 0 2.3cqw rgba(255,210,31,.7))
}
.t4-pachinko-board-copy{
  position:absolute;
  top:48%;
  left:3.5%;
  display:flex;
  width:59%;
  height:34%;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.25cqw;
  text-align:center;
  transform:rotate(-1deg)
}
.t4-pachinko-board-copy small{
  color:var(--duck-blue);
  font-size:clamp(7px,1.1cqw,12px);
  font-weight:1000;
  letter-spacing:.15em
}
.t4-pachinko-board-copy b{
  max-width:100%;
  color:#f04432;
  font-size:clamp(15px,3.05cqw,32px);
  font-weight:1000;
  letter-spacing:-.045em;
  line-height:.95;
  overflow-wrap:anywhere
}
.t4-pachinko-board-copy em{
  color:var(--duck-blue-dark);
  font-size:clamp(7px,1.05cqw,11px);
  font-style:normal;
  font-weight:900
}
.t4-machine-celebration.is-active .t4-pachinko-board{
  animation:t4PachinkoBoardReveal 3.8s cubic-bezier(.16,.82,.2,1) both
}
.t4-machine-celebration.is-jackpot .t4-pachinko-board{
  width:72%;
  animation-duration:5.05s
}
.t4-machine-celebration.is-jackpot .t4-pachinko-board-copy b{
  color:#c92018;
  font-size:clamp(14px,2.7cqw,29px)
}

@keyframes t4PachinkoPeekLeft{
  0%,48%,100%{opacity:0;transform:translateX(-35%) rotate(-12deg) scale(.82)}
  54%{opacity:1;transform:translateX(124%) rotate(7deg) scale(1.08,.9)}
  58%{opacity:1;transform:translateX(113%) rotate(-2deg) scale(.96,1.08)}
  62%,76%{opacity:1;transform:translateX(116%) rotate(1deg) scale(1)}
  82%{opacity:0;transform:translateX(-35%) rotate(-12deg) scale(.86)}
}
@keyframes t4PachinkoPeekRight{
  0%,55%,100%{opacity:0;transform:translateX(35%) rotate(11deg) scale(.82)}
  61%{opacity:1;transform:translateX(-116%) rotate(-6deg) scale(1.08,.9)}
  65%{opacity:1;transform:translateX(-108%) rotate(2deg) scale(.96,1.08)}
  69%,82%{opacity:1;transform:translateX(-110%) rotate(-1deg) scale(1)}
  88%{opacity:0;transform:translateX(35%) rotate(11deg) scale(.86)}
}
@keyframes t4PachinkoGlassTap{
  0%,52%,100%{opacity:0;transform:scale(.3)}
  56%{opacity:.9;transform:scale(1.15)}
  63%{opacity:.25;transform:scale(1.5)}
  70%{opacity:0;transform:scale(1.7)}
}
@keyframes t4PachinkoBackdrop{
  0%{opacity:0;transform:scale(.5)}
  10%{opacity:.95}
  70%{opacity:.68}
  100%{opacity:0;transform:scale(1.12)}
}
@keyframes t4PachinkoSpeedRush{
  0%{opacity:0;transform:scale(.5) rotate(0)}
  18%{opacity:.86}
  82%{opacity:.58}
  100%{opacity:0;transform:scale(1.05) rotate(18deg)}
}
@keyframes t4PachinkoSpeedBurst{
  0%{opacity:0;transform:scale(.38) rotate(0)}
  12%{opacity:.95}
  72%{opacity:.52}
  100%{opacity:0;transform:scale(1.2) rotate(46deg)}
}
@keyframes t4PachinkoNeonCharge{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  45%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
}
@keyframes t4PachinkoDoorImpact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.1)}
}
@keyframes t4PachinkoNeonBlast{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  14%{opacity:1}
  75%{opacity:.5}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.35)}
}
@keyframes t4PachinkoHeartbeat{
  0%{opacity:0;transform:translateX(-50%) scale(.65)}
  20%,45%,70%{opacity:1;transform:translateX(-50%) scale(1.14)}
  32%,57%,82%{opacity:.58;transform:translateX(-50%) scale(.94)}
  100%{opacity:0}
}
@keyframes t4PachinkoCutIn{
  0%{opacity:0;transform:translateX(-115%) rotate(-8deg)}
  18%{opacity:1;transform:translateX(9%) rotate(3deg) scale(1.08,.92)}
  27%,75%{opacity:1;transform:translateX(1%) rotate(-1deg) scale(1)}
  100%{opacity:0;transform:translateX(-112%) rotate(-8deg)}
}
@keyframes t4PachinkoReelsFrame{
  0%{opacity:0}
  8%,70%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) scale(1.15)}
}
@keyframes t4PachinkoSevenDrop{
  0%{opacity:0;transform:translateY(-240%) rotateX(160deg) scale(.6)}
  55%{opacity:1;transform:translateY(8%) rotateX(-10deg) scale(1.1)}
  72%,100%{opacity:1;transform:translateY(0) rotateX(0) scale(1)}
}
@keyframes t4PachinkoDuckSlam{
  0%,24%{opacity:0;transform:translate(-50%,-50%) translateX(125%) scale(.4) rotate(16deg)}
  32%{opacity:1;transform:translate(-50%,-50%) translateX(-3%) scale(1.26,.76) rotate(-4deg)}
  38%{opacity:1;transform:translate(-50%,-50%) scale(.92,1.1) rotate(2deg)}
  44%,63%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}
  73%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(1deg)}
  82%,100%{opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-5deg)}
}
@keyframes t4PachinkoSlamWord{
  0%,30%{opacity:0;transform:scale(.3) rotate(18deg)}
  36%{opacity:1;transform:scale(1.25) rotate(7deg)}
  48%,65%{opacity:1;transform:scale(1) rotate(10deg)}
  78%,100%{opacity:0;transform:scale(.7) rotate(15deg)}
}
@keyframes t4PachinkoSplat{
  0%,27%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  34%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  55%{opacity:.35;transform:translate(-50%,-50%) scale(1.45)}
  72%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.85)}
}
@keyframes t4PachinkoGlassPrint{
  0%,34%{opacity:0}
  40%{opacity:.88}
  65%{opacity:.46}
  88%,100%{opacity:0}
}
@keyframes t4PachinkoHypeDuck{
  0%,30%{opacity:0;transform:translate(95%,45%) rotate(13deg) scale(.55)}
  38%{opacity:1;transform:translate(-6%,-4%) rotate(-5deg) scale(1.08)}
  44%,61%{opacity:1;transform:translate(0,0) rotate(1deg) scale(1)}
  70%{opacity:1;transform:translate(8%,6%) rotate(5deg) scale(.94)}
  79%,100%{opacity:0;transform:translate(65%,32%) rotate(12deg) scale(.72)}
}
@keyframes t4PachinkoBoardReveal{
  0%,52%{opacity:0;transform:translate(-50%,-50%) translateY(38%) scale(.48) rotate(-8deg)}
  60%{opacity:1;transform:translate(-50%,-50%) translateY(-2%) scale(1.08) rotate(3deg)}
  67%,88%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}
  100%{opacity:0;transform:translate(-50%,-50%) translateY(-7%) scale(.9) rotate(1deg)}
}

@media (max-width:820px){
  .t4-arcade-peeker--left{width:22%;animation-duration:12s}
  .t4-arcade-peeker--right{width:18%;animation-duration:15s}
  .t4-arcade-peeker b{font-size:clamp(7px,2cqw,10px)}
  .t4-pachinko-cut-in{top:20%;width:38%}
  .t4-pachinko-reels{top:17%;width:38%;gap:1cqw}
  .t4-pachinko-slam{width:56%}
  .t4-pachinko-hype{right:-7%;width:44%}
  .t4-pachinko-board{width:84%}
  .t4-machine-celebration.is-jackpot .t4-pachinko-board{width:88%}
  .t4-pachinko-board-copy{top:48.5%;left:3%;width:59%;height:34%}
  .t4-pachinko-board-copy b{font-size:clamp(12px,4.15cqw,24px)}
  .t4-machine-celebration.is-jackpot .t4-pachinko-board-copy b{font-size:clamp(11px,3.65cqw,21px)}
  .t4-pachinko-board-copy small,
  .t4-pachinko-board-copy em{font-size:clamp(6px,1.65cqw,9px)}
  .t4-pachinko-speedlines{inset:-12%}
}

@media (max-width:480px){
  .t4-arcade-peeker--right,
  .t4-arcade-orbit--two,
  .t4-pachinko-glass i:nth-child(3){display:none}
  .t4-pachinko-cut-in strong{right:-4%}
  .t4-pachinko-hype strong{left:-28%;font-size:clamp(10px,3.3cqw,15px)}
}

@media (prefers-reduced-motion:reduce){
  .t4-arcade-peeker{display:none!important}
  .t4-machine.is-mixing>.t4-machine-celebration,
  .t4-machine.is-dispensing>.t4-machine-celebration,
  .t4-machine-celebration.is-charging{visibility:hidden!important}
  .t4-machine-celebration.is-active{visibility:visible!important}
  .t4-machine-celebration.is-active .t4-pachinko-stage::before{
    opacity:.3;
    animation:none!important
  }
  .t4-pachinko-speedlines,
  .t4-pachinko-neon-ring,
  .t4-pachinko-heartbeat,
  .t4-pachinko-cut-in,
  .t4-pachinko-reels,
  .t4-pachinko-slam,
  .t4-pachinko-glass,
  .t4-pachinko-hype{display:none!important}
  .t4-machine-celebration.is-active .t4-pachinko-board{
    opacity:1;
    animation:none!important;
    transform:translate(-50%,-50%) scale(.9)
  }
}

/* ========================================================================
   2026-07-25 · 중앙 스테이지 전체 빠칭코 전구 프레임
   레이아웃 폭/높이에 영향을 주지 않는 독립 장식 레이어.
   ======================================================================== */
.t4-main>.t4-stage{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate
}
.t4-stage-bulb-frame{
  position:absolute;
  z-index:45;
  inset:-7px;
  overflow:hidden;
  border-radius:23px;
  pointer-events:none
}
.t4-stage-bulb-frame::before{
  position:absolute;
  z-index:0;
  inset:1px;
  border:4px solid var(--duck-blue-dark);
  border-radius:22px;
  background:transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 0 15px rgba(11,75,203,.46),
    inset 0 0 13px rgba(11,75,203,.23);
  content:""
}
.t4-stage-bulb-frame::after{
  position:absolute;
  z-index:0;
  inset:8px;
  border:2px solid rgba(255,239,149,.95);
  border-radius:16px;
  box-shadow:
    0 0 16px 3px rgba(255,210,31,.54),
    inset 0 0 16px 3px rgba(255,210,31,.32);
  content:"";
  opacity:.48;
  animation:t4StageFrameGlow 1.55s ease-in-out infinite
}
.t4-stage-bulbs{
  position:absolute;
  z-index:2;
  display:block;
  overflow:hidden
}
.t4-stage-bulbs::before,
.t4-stage-bulbs::after{
  position:absolute;
  inset:0;
  content:"";
  opacity:.34;
  animation:t4StageBulbAlt 1.18s steps(2,end) infinite
}
.t4-stage-bulbs::before{
  background-image:
    radial-gradient(circle at center,#fff 0 13%,#fff7af 14% 23%,#ffd21f 25% 45%,rgba(255,210,31,.56) 47% 58%,transparent 68%)
}
.t4-stage-bulbs::after{
  background-image:
    radial-gradient(circle at center,#fff 0 15%,#dff5ff 17% 27%,#35b9ff 29% 43%,rgba(11,75,203,.6) 45% 58%,transparent 69%);
  animation-delay:-.59s
}
.t4-stage-bulbs--top,
.t4-stage-bulbs--bottom{
  right:17px;
  left:17px;
  height:17px
}
.t4-stage-bulbs--top{top:0}
.t4-stage-bulbs--bottom{bottom:0;transform:rotate(180deg)}
.t4-stage-bulbs--top::before,
.t4-stage-bulbs--top::after,
.t4-stage-bulbs--bottom::before,
.t4-stage-bulbs--bottom::after{
  background-repeat:repeat-x;
  background-size:38px 17px
}
.t4-stage-bulbs--top::before,
.t4-stage-bulbs--bottom::before{background-position:0 50%}
.t4-stage-bulbs--top::after,
.t4-stage-bulbs--bottom::after{background-position:19px 50%}
.t4-stage-bulbs--left,
.t4-stage-bulbs--right{
  top:17px;
  bottom:17px;
  width:17px
}
.t4-stage-bulbs--left{left:0}
.t4-stage-bulbs--right{right:0;transform:rotate(180deg)}
.t4-stage-bulbs--left::before,
.t4-stage-bulbs--left::after,
.t4-stage-bulbs--right::before,
.t4-stage-bulbs--right::after{
  background-repeat:repeat-y;
  background-size:17px 38px
}
.t4-stage-bulbs--left::before,
.t4-stage-bulbs--right::before{background-position:50% 0}
.t4-stage-bulbs--left::after,
.t4-stage-bulbs--right::after{background-position:50% 19px}
.t4-stage-bulb-corner{
  position:absolute;
  z-index:4;
  display:block;
  width:18px;
  height:18px;
  border:2px solid var(--duck-blue-dark);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 18%,#fff5a1 22%,#ffd21f 54%,#e2a600 72%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.92),
    0 0 15px 5px rgba(255,210,31,.72);
  animation:t4StageCornerPop 1.18s steps(2,end) infinite
}
.t4-stage-bulb-corner--tl{top:0;left:0}
.t4-stage-bulb-corner--tr{top:0;right:0;animation-delay:-.3s}
.t4-stage-bulb-corner--br{right:0;bottom:0;animation-delay:-.59s}
.t4-stage-bulb-corner--bl{bottom:0;left:0;animation-delay:-.88s}
.t4-stage-bulb-frame.is-paused *,
.t4-stage-bulb-frame.is-paused::after{animation-play-state:paused!important}
.t4-stage-bulb-frame.is-rush .t4-stage-bulbs::before,
.t4-stage-bulb-frame.is-rush .t4-stage-bulbs::after,
.t4-stage-bulb-frame.is-rush .t4-stage-bulb-corner{
  animation-duration:.22s;
  opacity:1
}
.t4-stage-bulb-frame.is-rush::after{
  opacity:.96;
  animation-duration:.34s
}
.t4-stage-bulb-frame.is-jackpot::before{
  border-color:#f04432;
  box-shadow:
    0 0 0 2px #fff,
    0 0 24px 7px rgba(240,68,50,.72),
    inset 0 0 20px 4px rgba(255,210,31,.62)
}
.t4-stage-bulb-frame.is-jackpot .t4-stage-bulbs::before{
  background-image:
    radial-gradient(circle at center,#fff 0 14%,#fff7af 16% 25%,#ffd21f 27% 44%,rgba(255,210,31,.64) 47% 58%,transparent 69%)
}
.t4-stage-bulb-frame.is-jackpot .t4-stage-bulbs::after{
  background-image:
    radial-gradient(circle at center,#fff 0 14%,#ffb4a9 17% 26%,#f04432 29% 44%,rgba(240,68,50,.64) 47% 59%,transparent 69%)
}

@keyframes t4StageBulbAlt{
  0%,100%{opacity:.34}
  50%{opacity:1}
}
@keyframes t4StageFrameGlow{
  0%,100%{opacity:.4}
  50%{opacity:.88}
}
@keyframes t4StageCornerPop{
  0%,100%{opacity:.55;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.08)}
}

@media (max-width:820px){
  .t4-stage-bulb-frame{inset:-2px;border-radius:18px}
  .t4-stage-bulb-frame::before{inset:0;border-width:3px;border-radius:18px}
  .t4-stage-bulb-frame::after{inset:6px;border-radius:13px}
  .t4-stage-bulbs--top,
  .t4-stage-bulbs--bottom{right:12px;left:12px;height:12px}
  .t4-stage-bulbs--left,
  .t4-stage-bulbs--right{top:12px;bottom:12px;width:12px}
  .t4-stage-bulbs--top::before,
  .t4-stage-bulbs--top::after,
  .t4-stage-bulbs--bottom::before,
  .t4-stage-bulbs--bottom::after{background-size:28px 12px}
  .t4-stage-bulbs--top::after,
  .t4-stage-bulbs--bottom::after{background-position:14px 50%}
  .t4-stage-bulbs--left::before,
  .t4-stage-bulbs--left::after,
  .t4-stage-bulbs--right::before,
  .t4-stage-bulbs--right::after{background-size:12px 28px}
  .t4-stage-bulbs--left::after,
  .t4-stage-bulbs--right::after{background-position:50% 14px}
  .t4-stage-bulb-corner{width:13px;height:13px;border-width:1.5px}
}

@media (prefers-reduced-motion:reduce){
  .t4-stage-bulb-frame::after,
  .t4-stage-bulbs::before,
  .t4-stage-bulbs::after,
  .t4-stage-bulb-corner{animation:none!important}
  .t4-stage-bulbs::before{opacity:.88}
  .t4-stage-bulbs::after{opacity:.58}
  .t4-stage-bulb-corner{opacity:1;transform:none}
}

/* 2026-07-25 · 햄버거 메뉴 아이콘을 다크모드 배지 스타일로 통일 */
.t4-menu button>.t4-menu-item-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border:1px solid var(--duck-blue-dark);
  border-radius:50%;
  background:var(--duck-yellow);
  color:var(--duck-blue-dark);
  box-shadow:0 2px 0 rgba(7,52,134,.2)
}
.t4-menu button>.t4-menu-item-icon svg,
.t4-menu-user>.t4-menu-item-icon svg,
.t4-menu-out>.t4-menu-item-icon svg{
  display:block;
  width:17px!important;
  height:17px!important;
  flex:0 0 auto;
  color:var(--duck-blue-dark)!important;
  fill:currentColor
}
.t4-menu button>.t4-menu-item-icon .t4-logout-icon{
  fill:none!important;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.t4-menu button:hover>.t4-menu-item-icon{
  border-color:var(--duck-blue);
  box-shadow:0 2px 0 var(--duck-blue-dark)
}
.t4-menu-user>.t4-menu-item-icon{width:36px;height:36px;flex-basis:36px}
.t4-menu-user>.t4-menu-item-icon svg{width:20px!important;height:20px!important}
.t4-menu-out>.t4-menu-item-icon{
  border-color:var(--duck-blue-dark);
  background:var(--duck-yellow);
  color:var(--duck-blue-dark)
}
html[data-theme="dark"] .t4-menu button>.t4-menu-item-icon{
  border-color:var(--duck-yellow);
  background:var(--duck-yellow);
  color:var(--duck-blue-dark);
  box-shadow:0 2px 0 rgba(0,0,0,.35)
}
html[data-theme="dark"] .t4-menu button>.t4-menu-item-icon svg{
  color:var(--duck-blue-dark)!important
}

/* 2026-07-25 · 직접 입력형 캐시 충전 UI */
.t4-modal.t4-modal--charge-flow{
  width:min(520px,calc(100vw - 24px));
  max-width:520px;
  border:1px solid #cad4e5;
  border-radius:20px
}
.t4-modal--charge-flow .t4-modal-head{
  min-height:64px;
  padding:12px 16px;
  border:0;
  background:#0d1c43;
  color:#fff
}
.t4-modal--charge-flow .t4-modal-head h2{font-size:20px}
.t4-modal--charge-flow .t4-modal-head h2 small{color:#ffd21f}
.t4-modal--charge-flow .t4-modal-x{
  width:38px;
  height:38px;
  border:1px solid #e5aa00;
  background:#ffd21f;
  color:#073486
}
.t4-modal--charge-flow .t4-modal-body--charge{
  padding:0 15px 17px;
  background:#f1f3f6
}
.t4-charge-hero{
  position:relative;
  display:flex;
  min-height:112px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 -15px;
  padding:18px 25px;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 25%,rgba(255,210,31,.25),transparent 24%),
    linear-gradient(125deg,#101a3d 0%,#14285f 58%,#172148 100%);
  color:#fff
}
.t4-charge-hero::after{
  position:absolute;
  right:59px;
  bottom:-42px;
  width:150px;
  height:80px;
  border-radius:50%;
  background:rgba(102,48,226,.25);
  filter:blur(18px);
  content:""
}
.t4-charge-hero>span{
  position:relative;
  z-index:1;
  display:flex;
  min-width:0;
  flex-direction:column
}
.t4-charge-hero small{
  color:#aebbd8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em
}
.t4-charge-hero strong{
  margin-top:5px;
  font-size:20px;
  font-weight:1000;
  letter-spacing:-.04em
}
.t4-charge-hero em{
  margin-top:7px;
  color:#d8deec;
  font-size:11px;
  font-style:normal;
  font-weight:750
}
.t4-charge-hero>i{
  position:relative;
  z-index:1;
  display:grid;
  width:66px;
  height:66px;
  flex:0 0 66px;
  place-items:center;
  border:3px solid #fff3a0;
  border-radius:50%;
  background:linear-gradient(145deg,#fff19a 0%,#ffd21f 45%,#f0a800 100%);
  color:#073486;
  box-shadow:0 0 22px rgba(255,210,31,.45),inset 0 -5px 0 rgba(168,111,0,.2);
  font-size:34px;
  font-style:normal;
  font-weight:1000
}
.t4-modal--charge-flow .t4-charge-balance{
  min-height:49px;
  margin-top:12px;
  padding:10px 14px;
  border-color:#d8dee9;
  border-radius:10px
}
.t4-modal--charge-flow .t4-charge-section{
  margin-top:10px;
  padding:15px;
  border-color:#d8dee9;
  border-radius:12px
}
.t4-modal--charge-flow .t4-charge-section>header{margin-bottom:10px}
.t4-charge-entry{
  display:flex;
  min-height:62px;
  align-items:center;
  gap:10px;
  padding:8px 13px;
  border:2px solid #cbd4e4;
  border-radius:12px;
  background:#fff;
  cursor:text;
  transition:border-color .16s ease,box-shadow .16s ease
}
.t4-charge-entry:focus-within{
  border-color:#1553ce;
  box-shadow:0 0 0 3px rgba(21,83,206,.12)
}
.t4-charge-entry-symbol{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:50%;
  background:#ffd21f;
  color:#073486;
  font-size:15px;
  font-weight:1000
}
.t4-charge-entry input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#111936;
  font:inherit;
  font-size:25px;
  font-weight:1000;
  letter-spacing:-.025em;
  text-align:right
}
.t4-charge-entry input:focus{outline:0;box-shadow:none}
.t4-charge-entry>b{
  flex:0 0 auto;
  color:#59657b;
  font-size:14px;
  font-weight:900
}
.t4-charge-input-note{
  margin:7px 2px 0;
  color:#758096;
  font-size:10px;
  font-weight:750;
  text-align:right
}
.t4-charge-input-note.is-error{color:#cc3d32}
.t4-charge-quick-label{
  margin:14px 0 8px;
  color:#4e596e;
  font-size:11px;
  font-weight:900
}
.t4-modal--charge-flow .t4-charge-presets{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px
}
.t4-modal--charge-flow .t4-charge-opt,
.t4-modal--charge-flow .t4-charge-opt:nth-child(3){
  min-height:43px;
  padding:8px 5px;
  border:1px solid #ccd5e3;
  border-radius:9px;
  background:#fff
}
.t4-modal--charge-flow .t4-charge-opt>b{font-size:14px}
.t4-modal--charge-flow .t4-charge-opt.is-on{
  border:1px solid #1553ce;
  background:#1553ce;
  color:#fff
}
.t4-modal--charge-flow .t4-charge-opt.is-on b,
.t4-modal--charge-flow .t4-charge-opt.is-on span{color:#fff}
.t4-modal--charge-flow .t4-charge-method-section{padding-block:13px}
.t4-modal--charge-flow .t4-charge-method-card{
  min-height:54px;
  border:1px solid #1553ce;
  border-radius:10px;
  background:#f5f8ff
}
.t4-modal--charge-flow .t4-charge-method-card>i{
  background:#1553ce;
  font-size:14px
}
.t4-modal--charge-flow .t4-charge-summary{
  margin-top:10px;
  border-color:#d8dee9;
  border-radius:12px
}
.t4-modal--charge-flow .t4-charge-agree{margin-inline:2px}
.t4-modal--charge-flow .t4-charge-gateway{
  border:1px solid #edd99b;
  background:#fff8df
}
.t4-modal--charge-flow .t4-charge-go{
  min-height:52px;
  border-color:#e0a900;
  background:#ffd21f;
  color:#073486;
  box-shadow:0 3px 0 #dba600
}
.t4-modal--charge-flow .t4-charge-go:not(:disabled):hover{
  background:#ffdc46;
  transform:translateY(-1px)
}
.t4-modal--charge-flow .t4-charge-go:disabled{
  border-color:#d6dbe4;
  background:#dfe3e9;
  color:#8791a2;
  box-shadow:none
}
@media (max-width:560px){
  .t4-modal.t4-modal--charge-flow{
    width:calc(100vw - 12px);
    max-height:calc(100vh - 12px);
    border-radius:15px
  }
  .t4-modal--charge-flow .t4-modal-head{
    min-height:56px;
    padding:8px 12px
  }
  .t4-modal--charge-flow .t4-modal-body--charge{
    max-height:calc(100vh - 68px);
    padding:0 10px 13px
  }
  .t4-charge-hero{
    min-height:92px;
    margin:0 -10px;
    padding:14px 18px
  }
  .t4-charge-hero strong{font-size:17px}
  .t4-charge-hero em{font-size:10px}
  .t4-charge-hero>i{
    width:54px;
    height:54px;
    flex-basis:54px;
    font-size:28px
  }
  .t4-modal--charge-flow .t4-charge-section{padding:12px}
  .t4-charge-entry{
    min-height:56px;
    padding:7px 11px
  }
  .t4-charge-entry input{font-size:22px}
  .t4-modal--charge-flow .t4-charge-opt,
  .t4-modal--charge-flow .t4-charge-opt:nth-child(3){
    min-height:41px
  }
}
@media (max-width:350px){
  .t4-modal--charge-flow .t4-charge-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t4-charge-hero em{display:none}
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-modal-head{background:#08142e}
html[data-theme="dark"] .t4-charge-hero{
  background:
    radial-gradient(circle at 82% 25%,rgba(255,210,31,.2),transparent 24%),
    linear-gradient(125deg,#070d20 0%,#102457 58%,#111831 100%)
}
html[data-theme="dark"] .t4-charge-entry{
  border-color:var(--t4-night-line);
  background:var(--t4-night-soft)
}
html[data-theme="dark"] .t4-charge-entry:focus-within{border-color:var(--duck-yellow)}
html[data-theme="dark"] .t4-charge-entry input{color:#fff}
html[data-theme="dark"] .t4-charge-entry>b,
html[data-theme="dark"] .t4-charge-input-note,
html[data-theme="dark"] .t4-charge-quick-label{color:#c8d1e2}
html[data-theme="dark"] .t4-charge-input-note.is-error{color:#ff8e85}

/* 2026-07-25 · 상시 스프레이 오리, 비눗방울, 외곽 전구 정리 */
.t4-arcade-light{display:none!important}

.t4-stage-bulb-frame{
  inset:-11px;
  border-radius:27px
}
.t4-stage-bulb-frame::before{
  inset:2px;
  border-width:4px;
  border-color:#073486;
  border-radius:25px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 18px 3px rgba(7,52,134,.3),
    inset 0 0 14px rgba(7,52,134,.22)
}
.t4-stage-bulb-frame::after{
  inset:10px;
  border-color:rgba(255,226,101,.92);
  border-radius:18px;
  box-shadow:
    0 0 18px 4px rgba(255,210,31,.4),
    inset 0 0 15px 3px rgba(255,210,31,.2)
}
.t4-stage-bulbs::before{
  background-image:
    radial-gradient(circle at center,#fff 0 17%,#fff5b3 19% 29%,#ffd21f 32% 52%,#dea600 55% 62%,rgba(255,210,31,.34) 65%,transparent 72%)
}
.t4-stage-bulbs::after{
  background-image:
    radial-gradient(circle at center,#fff 0 20%,#fffbe8 22% 34%,#ffe682 37% 52%,#e5b21c 55% 62%,rgba(255,230,130,.34) 65%,transparent 72%);
  animation-delay:-.59s
}
.t4-stage-bulbs--top,
.t4-stage-bulbs--bottom{
  right:27px;
  left:27px;
  height:26px
}
.t4-stage-bulbs--top::before,
.t4-stage-bulbs--top::after,
.t4-stage-bulbs--bottom::before,
.t4-stage-bulbs--bottom::after{
  background-size:54px 26px
}
.t4-stage-bulbs--top::after,
.t4-stage-bulbs--bottom::after{background-position:27px 50%}
.t4-stage-bulbs--left,
.t4-stage-bulbs--right{
  top:27px;
  bottom:27px;
  width:26px
}
.t4-stage-bulbs--left::before,
.t4-stage-bulbs--left::after,
.t4-stage-bulbs--right::before,
.t4-stage-bulbs--right::after{
  background-size:26px 54px
}
.t4-stage-bulbs--left::after,
.t4-stage-bulbs--right::after{background-position:50% 27px}
.t4-stage-bulb-corner{
  width:28px;
  height:28px;
  border-color:#073486;
  background:radial-gradient(circle at 34% 28%,#fff 0 20%,#fff4aa 23%,#ffd21f 51%,#dfa500 68%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.96),
    0 0 18px 6px rgba(255,210,31,.58)
}
.t4-stage-bulb-frame.is-jackpot::before{
  border-color:#073486;
  box-shadow:
    0 0 0 2px #fff,
    0 0 25px 7px rgba(255,210,31,.64),
    inset 0 0 20px 4px rgba(11,75,203,.22)
}
.t4-stage-bulb-frame.is-jackpot .t4-stage-bulbs::before{
  background-image:
    radial-gradient(circle at center,#fff 0 17%,#fff5b3 19% 29%,#ffd21f 32% 52%,#dea600 55% 62%,rgba(255,210,31,.34) 65%,transparent 72%)
}
.t4-stage-bulb-frame.is-jackpot .t4-stage-bulbs::after{
  background-image:
    radial-gradient(circle at center,#fff 0 20%,#fffbe8 22% 34%,#ffe682 37% 52%,#e5b21c 55% 62%,rgba(255,230,130,.34) 65%,transparent 72%)
}

.t4-machine-bubbles{
  position:absolute;
  z-index:5;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none
}
.t4-machine-bubbles>i{
  position:absolute;
  bottom:-7%;
  left:var(--bubble-x);
  display:block;
  width:var(--bubble-size);
  aspect-ratio:1;
  border:.13cqw solid rgba(255,255,255,.9);
  border-radius:50%;
  background:
    radial-gradient(circle at 29% 25%,rgba(255,255,255,.98) 0 10%,transparent 13%),
    radial-gradient(circle at 68% 72%,rgba(255,210,31,.3),transparent 37%),
    rgba(193,226,255,.12);
  box-shadow:
    inset -.15cqw -.16cqw .32cqw rgba(11,75,203,.18),
    inset .13cqw .13cqw .3cqw rgba(255,255,255,.72),
    0 0 .28cqw rgba(255,255,255,.35);
  opacity:0;
  animation:t4SoapBubbleRise var(--bubble-time) linear var(--bubble-delay) infinite
}
.t4-machine-bubbles>i:nth-child(3n+2){
  border-color:rgba(255,230,111,.86);
  background:
    radial-gradient(circle at 29% 25%,rgba(255,255,255,.98) 0 10%,transparent 13%),
    radial-gradient(circle at 68% 72%,rgba(255,210,31,.4),transparent 40%),
    rgba(255,243,180,.1)
}
.t4-machine-bubbles>i:nth-child(4n){opacity:.28}
.t4-machine-bubbles.is-rush>i{animation-duration:3.2s}
.t4-machine-bubbles.is-paused>i{animation-play-state:paused!important}

.t4-machine-peek.is-spraying{
  z-index:11;
  right:2%;
  top:30%;
  width:24%;
  overflow:visible;
  opacity:1!important;
  visibility:visible!important;
  transform-origin:88% 82%;
  animation:t4SprayDuckFloat 3.2s ease-in-out infinite
}
.t4-machine.has-result>.t4-machine-peek.is-spraying{
  opacity:1!important;
  visibility:visible!important
}
.t4-machine-peek.is-spraying img{
  position:relative;
  z-index:3;
  animation:t4SprayDuckAim 1.38s ease-in-out infinite
}
.t4-machine-spray{
  position:absolute;
  z-index:2;
  left:-79%;
  top:34%;
  display:block;
  width:88%;
  height:30%;
  overflow:visible;
  transform-origin:100% 50%
}
.t4-machine-spray::before{
  position:absolute;
  inset:5% -1% 3% 0;
  clip-path:polygon(100% 43%,0 0,0 100%,100% 57%);
  background:linear-gradient(to left,rgba(255,255,255,.72),rgba(191,228,255,.26) 52%,transparent);
  content:"";
  opacity:.56;
  animation:t4SprayMistPulse 1.38s ease-in-out infinite
}
.t4-machine-spray>i{
  position:absolute;
  right:1%;
  top:50%;
  display:block;
  width:var(--spray-size);
  aspect-ratio:1;
  border:.1cqw solid rgba(255,255,255,.94);
  border-radius:50%;
  background:rgba(202,235,255,.28);
  box-shadow:inset .08cqw .08cqw .15cqw #fff;
  opacity:0;
  animation:t4SprayDrop 1.54s linear var(--spray-delay) infinite
}
.t4-machine-spray-sfx{
  position:absolute;
  z-index:4;
  left:-17%;
  top:18%;
  padding:.42cqw .72cqw;
  border:.2cqw solid #073486;
  border-radius:999px;
  background:#fff;
  color:#073486;
  box-shadow:0 .28cqw 0 #073486;
  font-size:clamp(8px,1.35cqw,15px);
  font-weight:1000;
  transform:rotate(-8deg);
  animation:t4SpraySfx 1.38s steps(2,end) infinite
}
.t4-machine-peek.is-spraying.is-rush img,
.t4-machine-peek.is-spraying.is-rush .t4-machine-spray::before,
.t4-machine-peek.is-spraying.is-rush .t4-machine-spray>i,
.t4-machine-peek.is-spraying.is-rush .t4-machine-spray-sfx{
  animation-duration:.58s
}
.t4-machine-peek.is-paused *,
.t4-machine-peek.is-paused{animation-play-state:paused!important}

@keyframes t4SoapBubbleRise{
  0%{opacity:0;transform:translate3d(0,8cqw,0) scale(.48)}
  12%{opacity:.58}
  80%{opacity:.46}
  100%{opacity:0;transform:translate3d(var(--bubble-drift),-111cqw,0) scale(1.18)}
}
@keyframes t4SprayDuckFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(.5deg)}
  50%{transform:translate3d(0,-1.05cqw,0) rotate(-1deg)}
}
@keyframes t4SprayDuckAim{
  0%,100%{transform:translate3d(0,0,0) rotate(1deg)}
  45%{transform:translate3d(-1.2%,.6%,0) rotate(-1.2deg)}
  62%{transform:translate3d(.7%,-.4%,0) rotate(1.5deg)}
}
@keyframes t4SprayMistPulse{
  0%,100%{opacity:.3;transform:scaleX(.86) scaleY(.78)}
  46%{opacity:.72;transform:scaleX(1.05) scaleY(1.08)}
}
@keyframes t4SprayDrop{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.25)}
  14%{opacity:.82}
  78%{opacity:.58}
  100%{opacity:0;transform:translate3d(var(--spray-x),var(--spray-y),0) scale(1.08)}
}
@keyframes t4SpraySfx{
  0%,100%{opacity:.72;transform:rotate(-8deg) scale(.92)}
  50%{opacity:1;transform:rotate(-5deg) scale(1.06)}
}

@media (max-width:820px){
  .t4-stage-bulb-frame{inset:-5px;border-radius:21px}
  .t4-stage-bulb-frame::before{inset:1px;border-width:3px;border-radius:20px}
  .t4-stage-bulb-frame::after{inset:7px;border-radius:15px}
  .t4-stage-bulbs--top,
  .t4-stage-bulbs--bottom{right:19px;left:19px;height:18px}
  .t4-stage-bulbs--top::before,
  .t4-stage-bulbs--top::after,
  .t4-stage-bulbs--bottom::before,
  .t4-stage-bulbs--bottom::after{background-size:38px 18px}
  .t4-stage-bulbs--top::after,
  .t4-stage-bulbs--bottom::after{background-position:19px 50%}
  .t4-stage-bulbs--left,
  .t4-stage-bulbs--right{top:19px;bottom:19px;width:18px}
  .t4-stage-bulbs--left::before,
  .t4-stage-bulbs--left::after,
  .t4-stage-bulbs--right::before,
  .t4-stage-bulbs--right::after{background-size:18px 38px}
  .t4-stage-bulbs--left::after,
  .t4-stage-bulbs--right::after{background-position:50% 19px}
  .t4-stage-bulb-corner{width:20px;height:20px}
  .t4-machine-peek.is-spraying{right:.5%;top:30%;width:25%}
}
@media (prefers-reduced-motion:reduce){
  .t4-machine-bubbles{display:none!important}
  .t4-machine-peek.is-spraying,
  .t4-machine-peek.is-spraying img,
  .t4-machine-peek.is-spraying .t4-machine-spray::before,
  .t4-machine-peek.is-spraying .t4-machine-spray-sfx{
    animation:none!important
  }
  .t4-machine-peek.is-spraying .t4-machine-spray>i{display:none}
  .t4-machine-peek.is-spraying .t4-machine-spray::before{opacity:.36}
}

/* 2026-07-25 · 전구 단일 레이어 + 바닥 밈 캐릭터 */
.t4-stage-bulb-frame::after,
.t4-stage-bulbs::after,
.t4-stage-bulb-corner{
  display:none!important;
  content:none!important
}
.t4-stage-bulb-frame::before{
  border:3px solid #073486;
  box-shadow:0 0 13px rgba(7,52,134,.24);
  background:transparent
}
.t4-stage-bulbs::before{
  opacity:1;
  background-image:
    radial-gradient(circle at 38% 34%,
      #fff 0 16%,
      #fff8cf 18% 25%,
      #ffd21f 28% 50%,
      #efb400 52% 57%,
      #073486 59% 66%,
      transparent 68%);
  animation:t4StageBulbSingle 1.35s ease-in-out infinite
}
.t4-stage-bulbs--top::before,
.t4-stage-bulbs--bottom::before{background-size:46px 26px}
.t4-stage-bulbs--left::before,
.t4-stage-bulbs--right::before{background-size:26px 46px}
.t4-stage-bulb-frame.is-rush .t4-stage-bulbs::before{animation-duration:.38s}
.t4-stage-bulb-frame.is-jackpot .t4-stage-bulbs::before{
  background-image:
    radial-gradient(circle at 38% 34%,
      #fff 0 16%,
      #fff8cf 18% 25%,
      #ffd21f 28% 50%,
      #efb400 52% 57%,
      #073486 59% 66%,
      transparent 68%)
}

.t4-machine-spray,
.t4-machine-spray-sfx{display:none!important}
.t4-machine-peek.is-spraying{
  right:.5%;
  top:26.5%;
  width:29%;
  animation-duration:3.5s
}
.t4-machine-peek.is-spraying img{
  transform:scaleX(-1);
  filter:drop-shadow(0 .6cqw .45cqw rgba(7,52,134,.3));
  animation:t4FrontSprayDuck 1.42s ease-in-out infinite
}

.t4-duck-boat-track{
  position:absolute;
  z-index:4;
  right:0;
  bottom:.3%;
  left:0;
  display:block;
  height:15%;
  overflow:visible;
  pointer-events:none
}
.t4-duck-boat-track>img{
  position:absolute;
  bottom:-1%;
  left:-24%;
  display:block;
  width:22%;
  height:auto;
  filter:drop-shadow(0 .42cqw .3cqw rgba(7,52,134,.28));
  animation:t4DuckBoatCruise 18s linear -5.2s infinite
}

@keyframes t4StageBulbSingle{
  0%,100%{opacity:.68;filter:brightness(.96)}
  50%{opacity:1;filter:brightness(1.12)}
}
@keyframes t4FrontSprayDuck{
  0%,100%{transform:scaleX(-1) translate3d(0,0,0) rotate(-1deg)}
  42%{transform:scaleX(-1) translate3d(-1.6%,.5%,0) rotate(1deg) scale(1.025)}
  58%{transform:scaleX(-1) translate3d(.8%,-.5%,0) rotate(-1.6deg) scale(.99)}
}
@keyframes t4DuckBoatCruise{
  0%{transform:translate3d(0,0,0) scaleX(-1) rotate(-1deg)}
  12%{transform:translate3d(148%, -5%,0) scaleX(-1) rotate(1.5deg)}
  26%{transform:translate3d(320%,0,0) scaleX(-1) rotate(-1.5deg)}
  44%{transform:translate3d(590%,-4%,0) scaleX(-1) rotate(1deg)}
  49.9%{transform:translate3d(590%,0,0) scaleX(-1)}
  50%{transform:translate3d(590%,0,0) scaleX(1)}
  64%{transform:translate3d(410%,-5%,0) scaleX(1) rotate(-1deg)}
  80%{transform:translate3d(205%,0,0) scaleX(1) rotate(1.5deg)}
  96%{transform:translate3d(0,-4%,0) scaleX(1) rotate(-1deg)}
  99.9%{transform:translate3d(0,0,0) scaleX(1)}
  100%{transform:translate3d(0,0,0) scaleX(-1)}
}

@media (max-width:820px){
  .t4-stage-bulbs--top::before,
  .t4-stage-bulbs--bottom::before{background-size:34px 18px}
  .t4-stage-bulbs--left::before,
  .t4-stage-bulbs--right::before{background-size:18px 34px}
  .t4-machine-peek.is-spraying{right:0;top:28%;width:30%}
  .t4-duck-boat-track{height:16%}
  .t4-duck-boat-track>img{width:24%;animation-duration:15.5s}
}
@media (prefers-reduced-motion:reduce){
  .t4-stage-bulbs::before{animation:none!important;opacity:1}
  .t4-machine-peek.is-spraying img{animation:none!important;transform:scaleX(-1)}
  .t4-duck-boat-track{display:none!important}
}

/* 2026-07-25 · 전구 완전 제거 / 그래피티 프레임과 순찰 낙서 오리 */
.t4-stage-bulb-frame{display:none!important}
.t4-stage-graffiti-frame{
  position:absolute;
  z-index:45;
  inset:-6px;
  overflow:visible;
  border:3px solid #073486;
  border-radius:24px;
  box-shadow:0 6px 0 rgba(7,52,134,.1);
  pointer-events:none
}
.t4-stage-paint{
  position:absolute;
  display:block;
  border:2px solid #073486;
  filter:drop-shadow(0 2px 0 rgba(7,52,134,.14))
}
.t4-stage-paint--tl{
  top:-7px;
  left:4.5%;
  width:58px;
  height:15px;
  border-radius:70% 35% 68% 32%;
  background:#ffd21f;
  transform:rotate(-4deg)
}
.t4-stage-paint--tr{
  top:8%;
  right:-9px;
  width:17px;
  height:57px;
  border-radius:42% 72% 38% 66%;
  background:#f04432;
  transform:rotate(3deg)
}
.t4-stage-paint--br{
  right:4%;
  bottom:-8px;
  width:74px;
  height:16px;
  border-radius:38% 72% 31% 68%;
  background:#0b4bcb;
  transform:rotate(2deg)
}
.t4-stage-paint--bl{
  bottom:7%;
  left:-9px;
  width:17px;
  height:52px;
  border-radius:66% 38% 74% 34%;
  background:#ffd21f;
  transform:rotate(-3deg)
}
.t4-stage-graffiti-frame.is-rush{
  animation:t4GraffitiFrameKick .48s ease-out both
}
.t4-stage-graffiti-frame.is-jackpot{
  border-color:#f04432;
  box-shadow:0 6px 0 rgba(240,68,50,.16)
}
.t4-stage-graffiti-frame.is-paused,
.t4-stage-graffiti-frame.is-paused *{animation-play-state:paused!important}

.t4-machine-peek.is-spraying{
  z-index:13;
  top:auto;
  right:auto;
  bottom:2.5%;
  left:-29%;
  width:25%;
  transform-origin:50% 100%;
  animation:t4GraffitiDuckPatrol 18s linear infinite!important
}
.t4-machine-peek.is-spraying img{
  transform:none;
  filter:drop-shadow(0 .55cqw .42cqw rgba(7,52,134,.32));
  animation:t4GraffitiDuckFacing 18s linear infinite!important
}
.t4-machine-peek.is-spraying.is-rush img{animation-duration:18s!important}

.t4-machine-graffiti{
  position:absolute;
  z-index:10;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none
}
.t4-machine-graffiti.is-paused *,
.t4-machine-graffiti.is-paused{animation-play-state:paused!important}
.t4-graffiti-tag{
  position:absolute;
  display:grid;
  place-items:center;
  opacity:0;
  transform-origin:50% 50%
}
.t4-graffiti-tag>b{
  position:relative;
  z-index:2;
  color:#fff;
  font-size:clamp(8px,1.65cqw,17px);
  font-style:italic;
  font-weight:1000;
  letter-spacing:-.05em;
  line-height:1;
  text-shadow:
    -1px -1px 0 #073486,
    1px -1px 0 #073486,
    -1px 1px 0 #073486,
    1px 1px 0 #073486
}
.t4-graffiti-tag::before{
  position:absolute;
  inset:-24% -18%;
  clip-path:polygon(3% 39%,19% 29%,12% 8%,37% 22%,49% 0,58% 24%,86% 12%,79% 37%,100% 51%,78% 64%,89% 91%,60% 77%,47% 100%,37% 76%,9% 89%,20% 63%);
  background:#f04432;
  content:"";
  filter:drop-shadow(0 .24cqw 0 #073486)
}
.t4-graffiti-tag--one{
  top:31%;
  left:4.5%;
  width:13%;
  height:7%;
  animation:t4GraffitiTagOne 18s linear infinite
}
.t4-graffiti-tag--two{
  top:23%;
  right:4%;
  width:10%;
  height:6%;
  animation:t4GraffitiTagTwo 18s linear infinite
}
.t4-graffiti-tag--two::before{background:#0b4bcb}
.t4-graffiti-tag--three{
  top:48%;
  right:7%;
  width:7%;
  height:7%;
  animation:t4GraffitiTagThree 18s linear infinite
}
.t4-graffiti-tag--three::before{background:#ffd21f}
.t4-graffiti-tag--three>b{
  color:#073486;
  font-size:clamp(11px,2.3cqw,23px);
  text-shadow:none
}
.t4-graffiti-drip{
  position:absolute;
  display:block;
  height:1.8%;
  border:2px solid #073486;
  border-radius:999px;
  opacity:0
}
.t4-graffiti-drip::after{
  position:absolute;
  top:70%;
  width:24%;
  aspect-ratio:1;
  border:2px solid #073486;
  border-radius:50% 50% 58% 42%;
  background:inherit;
  content:""
}
.t4-graffiti-drip--one{
  top:61%;
  right:9%;
  width:11%;
  background:#f04432;
  transform:rotate(-7deg);
  animation:t4GraffitiDripOne 18s linear infinite
}
.t4-graffiti-drip--one::after{right:17%}
.t4-graffiti-drip--two{
  top:69%;
  left:12%;
  width:8%;
  background:#ffd21f;
  transform:rotate(5deg);
  animation:t4GraffitiDripTwo 18s linear infinite
}
.t4-graffiti-drip--two::after{left:20%}

@keyframes t4GraffitiFrameKick{
  0%{transform:scale(1);filter:none}
  36%{transform:scale(1.006) rotate(.15deg);filter:saturate(1.22)}
  100%{transform:scale(1);filter:none}
}
@keyframes t4GraffitiDuckPatrol{
  0%{transform:translate3d(0,0,0) rotate(-1deg)}
  8%{transform:translate3d(88%,-3%,0) rotate(1deg)}
  17%{transform:translate3d(185%,0,0) rotate(-1deg)}
  27%{transform:translate3d(292%,-4%,0) rotate(1.2deg)}
  36%{transform:translate3d(380%,0,0) rotate(-.6deg)}
  40%{transform:translate3d(380%,-2%,0) rotate(1deg)}
  46%{transform:translate3d(380%,0,0) rotate(-1.3deg)}
  52%{transform:translate3d(380%,-2%,0) rotate(.8deg)}
  58%{transform:translate3d(380%,0,0) rotate(-1deg)}
  63%{transform:translate3d(380%,-1%,0) rotate(.5deg)}
  72%{transform:translate3d(282%,-3%,0) rotate(-1deg)}
  82%{transform:translate3d(175%,0,0) rotate(1deg)}
  92%{transform:translate3d(70%,-3%,0) rotate(-1deg)}
  100%{transform:translate3d(0,0,0) rotate(1deg)}
}
@keyframes t4GraffitiDuckFacing{
  0%,34.5%{transform:scaleX(1)}
  35%,64%{transform:scaleX(-1)}
  40%,48%,56%{transform:scaleX(-1) scale(1.045) rotate(-1deg)}
  44%,52%,60%{transform:scaleX(-1) scale(.99) rotate(1deg)}
  64.5%,100%{transform:scaleX(-1)}
}
@keyframes t4GraffitiTagOne{
  0%,39%{opacity:0;transform:scale(.25) rotate(-16deg)}
  42%{opacity:1;transform:scale(1.15) rotate(-7deg)}
  45%,78%{opacity:1;transform:scale(1) rotate(-7deg)}
  84%,100%{opacity:0;transform:scale(.86) rotate(-7deg)}
}
@keyframes t4GraffitiTagTwo{
  0%,45%{opacity:0;transform:scale(.2) rotate(14deg)}
  48%{opacity:1;transform:scale(1.2) rotate(7deg)}
  51%,78%{opacity:1;transform:scale(1) rotate(7deg)}
  84%,100%{opacity:0;transform:scale(.86) rotate(7deg)}
}
@keyframes t4GraffitiTagThree{
  0%,52%{opacity:0;transform:scale(.15) rotate(-12deg)}
  55%{opacity:1;transform:scale(1.28) rotate(-5deg)}
  58%,78%{opacity:1;transform:scale(1) rotate(-5deg)}
  84%,100%{opacity:0;transform:scale(.8) rotate(-5deg)}
}
@keyframes t4GraffitiDripOne{
  0%,47%{opacity:0;transform:rotate(-7deg) scaleX(.1)}
  51%{opacity:1;transform:rotate(-7deg) scaleX(1)}
  78%{opacity:1}
  84%,100%{opacity:0}
}
@keyframes t4GraffitiDripTwo{
  0%,55%{opacity:0;transform:rotate(5deg) scaleX(.1)}
  59%{opacity:1;transform:rotate(5deg) scaleX(1)}
  78%{opacity:1}
  84%,100%{opacity:0}
}

@media (max-width:820px){
  .t4-stage-graffiti-frame{inset:-3px;border-width:2px;border-radius:19px;box-shadow:0 4px 0 rgba(7,52,134,.1)}
  .t4-stage-paint{border-width:1.5px}
  .t4-stage-paint--tl{top:-5px;width:42px;height:11px}
  .t4-stage-paint--tr{right:-6px;width:12px;height:40px}
  .t4-stage-paint--br{right:5%;bottom:-5px;width:52px;height:11px}
  .t4-stage-paint--bl{left:-6px;width:12px;height:38px}
  .t4-machine-peek.is-spraying{
    top:auto;
    right:auto;
    bottom:2.3%;
    left:-31%;
    width:27%
  }
}
@media (prefers-reduced-motion:reduce){
  .t4-stage-graffiti-frame{animation:none!important}
  .t4-machine-peek.is-spraying{
    left:auto;
    right:2%;
    bottom:3%;
    animation:none!important;
    transform:none
  }
  .t4-machine-peek.is-spraying img{animation:none!important;transform:scaleX(-1)}
  .t4-machine-graffiti .t4-graffiti-tag,
  .t4-machine-graffiti .t4-graffiti-drip{animation:none!important;opacity:.72}
}

/* ==========================================================================
   2026-07-25 · CLEAN FANFARE
   상시 캐릭터/낙서/전구 프레임을 제거하고 뽑기 순간에만 중앙 집중 연출을 표시한다.
   ========================================================================== */
.t4-stage-bulb-frame,
.t4-stage-graffiti-frame,
.t4-machine-peek,
.t4-machine-ambient,
.t4-machine-bubbles,
.t4-machine-graffiti,
.t4-arcade-peeker,
.t4-pachinko-stage,
.t4-arcade-burst{
  display:none!important
}
.t4-main>.t4-stage{
  border:0!important;
  box-shadow:none!important
}

.t4-machine .t4-machine-celebration.t4-machine-celebration--clean{
  position:absolute;
  z-index:19;
  inset:0;
  display:block!important;
  overflow:hidden;
  visibility:hidden!important;
  border:0!important;
  border-radius:inherit;
  background:none!important;
  box-shadow:none!important;
  opacity:1;
  pointer-events:none;
  contain:layout paint style;
  isolation:isolate
}
.t4-machine .t4-machine-celebration.t4-machine-celebration--clean::before,
.t4-machine .t4-machine-celebration.t4-machine-celebration--clean::after{
  display:none!important;
  content:none!important
}
.t4-machine .t4-machine-celebration.t4-machine-celebration--clean.is-charging,
.t4-machine .t4-machine-celebration.t4-machine-celebration--clean.is-active{
  visibility:visible!important
}
.t4-machine-celebration--clean.is-paused *{animation-play-state:paused!important}

.t4-clean-fanfare{
  --t4-fanfare-y:33%;
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none
}
.t4-fanfare-vignette,
.t4-fanfare-beam{
  position:absolute;
  inset:0;
  opacity:0
}
.t4-fanfare-vignette{
  background:
    radial-gradient(circle at 50% var(--t4-fanfare-y),
      rgba(255,255,255,.03) 0 7%,
      rgba(255,215,44,.14) 15%,
      rgba(5,30,88,.5) 45%,
      rgba(2,14,48,.8) 100%)
}
.t4-fanfare-beam{
  z-index:2;
  background:
    radial-gradient(circle at 50% var(--t4-fanfare-y),
      #fff 0 2.5%,
      rgba(255,242,167,.96) 4%,
      rgba(255,210,31,.55) 10%,
      rgba(35,104,224,.2) 24%,
      transparent 48%)
}
.t4-fanfare-ring{
  position:absolute;
  z-index:3;
  top:var(--t4-fanfare-y);
  left:50%;
  display:block;
  aspect-ratio:1;
  border:clamp(2px,.28cqw,4px) solid rgba(255,226,77,.92);
  border-radius:50%;
  box-shadow:0 0 clamp(10px,1.4cqw,24px) rgba(255,210,31,.46);
  opacity:0;
  transform:translate(-50%,-50%) scale(1)
}
.t4-fanfare-ring--one{width:17%}
.t4-fanfare-ring--two{
  width:29%;
  border-color:rgba(255,255,255,.78);
  animation-delay:.13s!important
}
.t4-fanfare-core{
  position:absolute;
  z-index:4;
  top:var(--t4-fanfare-y);
  left:50%;
  display:grid;
  width:clamp(25px,5.1cqw,56px);
  aspect-ratio:1;
  place-items:center;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle at 38% 34%,#fff 0 14%,#fff3a4 21%,#ffd21f 55%,#f3a800 100%);
  box-shadow:
    0 0 clamp(12px,2cqw,34px) rgba(255,210,31,.88),
    0 0 clamp(28px,4.5cqw,72px) rgba(28,96,220,.52);
  transform:translate(-50%,-50%) scale(.3)
}
.t4-fanfare-core>i{
  width:34%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  filter:blur(1px)
}
.t4-fanfare-beats{
  position:absolute;
  z-index:5;
  top:calc(var(--t4-fanfare-y) + 8%);
  left:50%;
  display:flex;
  gap:clamp(5px,.8cqw,10px);
  opacity:0;
  transform:translateX(-50%)
}
.t4-fanfare-beats>i{
  display:block;
  width:clamp(5px,.7cqw,8px);
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(255,210,31,.9);
  opacity:.3
}
.t4-fanfare-label{
  position:absolute;
  z-index:6;
  top:calc(var(--t4-fanfare-y) + 12%);
  left:50%;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:2px;
  opacity:0;
  color:#fff;
  text-align:center;
  text-shadow:0 2px 10px rgba(2,14,48,.78);
  transform:translate(-50%,10px) scale(.94);
  white-space:nowrap
}
.t4-fanfare-label small{
  color:#ffe05a;
  font-size:clamp(7px,.92cqw,11px);
  font-weight:900;
  letter-spacing:.22em
}
.t4-fanfare-label b{
  font-size:clamp(17px,3.1cqw,34px);
  font-weight:1000;
  letter-spacing:.08em;
  line-height:1
}

.t4-machine-celebration--clean.is-charging .t4-fanfare-vignette{
  animation:t4CleanFanfareVignette 1.05s ease-in-out infinite
}
.t4-machine-celebration--clean.is-charging .t4-fanfare-ring--one{
  animation:t4CleanFanfareChargeRing 1.05s ease-in-out infinite
}
.t4-machine-celebration--clean.is-charging .t4-fanfare-ring--two{
  animation:t4CleanFanfareChargeRing 1.05s ease-in-out infinite reverse
}
.t4-machine-celebration--clean.is-charging .t4-fanfare-core{
  animation:t4CleanFanfareCore 1.05s ease-in-out infinite
}
.t4-machine-celebration--clean.is-charging .t4-fanfare-beats{
  opacity:1
}
.t4-machine-celebration--clean.is-charging .t4-fanfare-beats>i{
  animation:t4CleanFanfareBeat 1.05s ease-in-out infinite
}
.t4-machine-celebration--clean.is-charging .t4-fanfare-beats>i:nth-child(2){animation-delay:.16s}
.t4-machine-celebration--clean.is-charging .t4-fanfare-beats>i:nth-child(3){animation-delay:.32s}

.t4-machine-celebration--clean.is-active .t4-fanfare-vignette{
  animation:t4CleanFanfareBackdrop 1.8s ease-out both
}
.t4-machine-celebration--clean.is-active .t4-fanfare-beam{
  animation:t4CleanFanfareFlash .72s ease-out both
}
.t4-machine-celebration--clean.is-active .t4-fanfare-ring--one{
  animation:t4CleanFanfareBurst 1.15s cubic-bezier(.16,.7,.2,1) both
}
.t4-machine-celebration--clean.is-active .t4-fanfare-ring--two{
  animation:t4CleanFanfareBurst 1.25s cubic-bezier(.16,.7,.2,1) .08s both
}
.t4-machine-celebration--clean.is-active .t4-fanfare-core{
  animation:t4CleanFanfareCoreBurst .82s ease-out both
}
.t4-machine-celebration--clean.is-active .t4-fanfare-label{
  animation:t4CleanFanfareLabel 1.72s cubic-bezier(.16,.78,.22,1) both
}
.t4-machine-celebration--clean.is-jackpot .t4-fanfare-ring{
  border-color:#fff3a3;
  box-shadow:0 0 clamp(13px,2cqw,34px) rgba(255,210,31,.92)
}
.t4-machine-celebration--clean.is-jackpot .t4-fanfare-label b{color:#ffe05a}

.t4-fanfare-particles{
  position:absolute;
  z-index:7;
  inset:0;
  overflow:hidden;
  pointer-events:none
}
.t4-fanfare-particles>i{
  position:absolute;
  top:var(--t4-fanfare-y,33%);
  left:50%;
  display:block;
  width:var(--size,6px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  background:#ffd21f;
  box-shadow:0 0 8px currentColor;
  color:#ffd21f;
  animation-delay:var(--delay,0s)!important
}
.t4-fanfare-particles>i.is-blue{
  border-radius:2px;
  background:#73a8ff;
  color:#73a8ff;
  transform:rotate(45deg)
}
.t4-machine-celebration--clean.is-active .t4-fanfare-particles>i{
  animation:t4CleanFanfareParticle 1.18s cubic-bezier(.12,.72,.25,1) both
}

@keyframes t4CleanFanfareVignette{
  0%,100%{opacity:.24}
  50%{opacity:.48}
}
@keyframes t4CleanFanfareChargeRing{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.42)}
  48%{opacity:.8}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.52)}
}
@keyframes t4CleanFanfareCore{
  0%,100%{opacity:.68;transform:translate(-50%,-50%) scale(.72)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes t4CleanFanfareBeat{
  0%,100%{opacity:.25;transform:scale(.7)}
  35%{opacity:1;transform:scale(1.3)}
}
@keyframes t4CleanFanfareBackdrop{
  0%{opacity:.62}
  62%{opacity:.3}
  100%{opacity:0}
}
@keyframes t4CleanFanfareFlash{
  0%{opacity:0;transform:scale(.35)}
  16%{opacity:1}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes t4CleanFanfareBurst{
  0%{opacity:.94;transform:translate(-50%,-50%) scale(.25)}
  72%{opacity:.42}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.7)}
}
@keyframes t4CleanFanfareCoreBurst{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.42)}
  34%{opacity:1;transform:translate(-50%,-50%) scale(1.38)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2)}
}
@keyframes t4CleanFanfareLabel{
  0%,20%{opacity:0;transform:translate(-50%,10px) scale(.94)}
  35%,76%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.98)}
}
@keyframes t4CleanFanfareParticle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}
  18%{opacity:.94}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.7) rotate(var(--turn))}
}

/* 결과 이미지 비중을 키우되 원본 비율과 전체 이미지를 유지한다. */
.t4-machine .t4-result .t4-result-shell--single{
  gap:2px;
  padding:2.5% 3% 2%
}
.t4-machine .t4-result .t4-result-shell--single .t4-result-head{min-height:21px}
.t4-machine .t4-result .t4-result-shell--single .t4-result-art img{
  width:auto!important;
  height:auto!important;
  max-width:89%!important;
  max-height:100%!important;
  object-fit:contain!important
}

@media (max-width:820px){
  .t4-clean-fanfare{--t4-fanfare-y:44%}
  .t4-fanfare-particles>i{top:44%}
  .t4-machine .t4-result .t4-result-shell--single{
    gap:3px;
    padding:2.5% 3.25% 2.4%
  }
  .t4-machine .t4-result .t4-result-shell--single .t4-result-art img{
    max-width:88%!important;
    max-height:100%!important
  }
}

@media (prefers-reduced-motion:reduce){
  .t4-machine-celebration--clean.is-charging .t4-fanfare-ring,
  .t4-machine-celebration--clean.is-charging .t4-fanfare-core,
  .t4-machine-celebration--clean.is-charging .t4-fanfare-beats,
  .t4-fanfare-particles{display:none!important}
  .t4-machine-celebration--clean.is-charging .t4-fanfare-vignette{
    opacity:.22;
    animation:none!important
  }
  .t4-machine-celebration--clean.is-active .t4-fanfare-beam{
    opacity:.25;
    animation:none!important
  }
  .t4-machine-celebration--clean.is-active .t4-fanfare-label{
    opacity:1;
    animation:none!important;
    transform:translate(-50%,0)
  }
}

/* 2026-07-25 · 범용 뽑기권: 숫자·엔화 구분 없이 10,000원 기준 게이지 하나만 표시 */
#t4-side-invite .t4-ticket-gauge-only{
  width:100%;
  margin:3px 0 12px;
  padding:2px 0
}
#t4-side-invite .t4-ticket-gauge-only .t4-tier-gauge{
  width:100%;
  height:16px;
  border:1.5px solid #9fb4d8;
  background:#e8edf6
}
#t4-side-invite .t4-ticket-gauge-only .t4-tier-gauge>i{
  background:linear-gradient(90deg,#ffc400,#ffe978)
}
html[data-theme="dark"] #t4-side-invite .t4-ticket-gauge-only .t4-tier-gauge{
  border-color:#49658f;
  background:#04132e
}

/* 우측 상품 썸네일은 카드 안에서만 표시하고 별도 확대 오버레이를 열지 않는다. */
.t4-picker .t4-product-thumb img,
.t4-picker .t4-product-thumb:hover img{
  transform:none!important
}

/* 2026-07-26 · 서비스 설명 일러스트 카드 + 자연스러운 검색 키워드 소개 */
.t4-seo .t4-seo-in{
  grid-template-columns:minmax(390px,.86fr) minmax(0,1.14fr);
  grid-template-rows:auto auto auto;
  gap:18px;
  padding:24px!important
}
.t4-seo .t4-seo-show{
  grid-column:1;
  grid-row:1;
  min-height:330px
}
.t4-seo-search-copy{
  grid-column:2;
  grid-row:1;
  display:flex;
  min-width:0;
  min-height:330px;
  flex-direction:column;
  justify-content:center;
  padding:clamp(24px,4vw,54px);
  border:2px solid var(--duck-blue-dark);
  border-radius:24px;
  background:#fff;
  color:var(--duck-blue-dark)
}
.t4-seo-search-copy>small{
  color:var(--duck-blue);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.18em
}
.t4-seo-search-copy h2{
  margin-top:10px;
  font-size:clamp(24px,3vw,38px);
  font-weight:1000;
  line-height:1.1;
  letter-spacing:-.045em
}
.t4-seo-search-copy p{
  max-width:680px;
  margin-top:14px;
  color:#53617a;
  font-size:14px;
  font-weight:750;
  line-height:1.65;
  word-break:keep-all
}
.t4-seo-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px
}
.t4-seo-keywords span{
  padding:7px 10px;
  border:1px solid #c7d5ed;
  border-radius:999px;
  background:#f5f8ff;
  color:var(--duck-blue-dark);
  font-size:10px;
  font-weight:900
}
.t4-seo .t4-seo-list{
  grid-column:1/-1;
  grid-row:2;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:none;
  align-items:stretch;
  gap:14px
}
.t4-seo .t4-seo-list li,
.t4-seo .t4-seo-list li:nth-child(odd),
.t4-seo .t4-seo-list li:nth-child(even){
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  gap:0;
  padding:0 0 16px;
  overflow:hidden;
  border:1px solid #cbd8ed;
  border-radius:18px;
  background:#fff;
  box-shadow:none
}
.t4-seo-card-visual{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border-bottom:1px solid #dbe4f3;
  background:#fffaf0
}
.t4-seo-card-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.t4-seo .t4-seo-list li>div{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  padding:15px 15px 0
}
.t4-seo .t4-seo-list b{
  margin-top:8px;
  font-size:15px;
  line-height:1.32
}
.t4-seo .t4-seo-list p{
  margin-top:7px;
  font-size:10.5px;
  line-height:1.55
}
.t4-seo .t4-seo-list em{margin-top:auto;padding-top:9px}
.t4-seo .t4-seo-cta{
  grid-column:1/-1;
  grid-row:3
}

/* 내 정보: 계정 기준 1회 닉네임 변경, 우편번호 검색 */
.t4-profile-inline,
.t4-address-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px
}
.t4-profile-action,
.t4-address-search{
  min-height:50px;
  padding:0 16px;
  border:1px solid var(--duck-blue-dark);
  border-radius:13px;
  background:var(--duck-yellow);
  color:var(--duck-blue-dark);
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
  cursor:pointer
}
.t4-profile-action:disabled{
  border-color:#cbd5e6;
  background:#edf1f7;
  color:#7d899d;
  cursor:default
}
.t4-profile-note{
  display:block;
  margin-top:6px;
  color:#6c7890;
  font-size:9.5px;
  font-weight:750
}
.t4-profile-error{
  min-height:0;
  margin-top:5px;
  color:#c7352b;
  font-size:10px;
  font-weight:800
}
.t4-profile-error:empty{display:none}

html[data-theme="dark"] .t4-seo-search-copy{
  border-color:var(--t4-night-line);
  background:var(--t4-night-panel);
  color:#fff
}
html[data-theme="dark"] .t4-seo-search-copy p{color:#c3cee1}
html[data-theme="dark"] .t4-seo-keywords span{
  border-color:var(--t4-night-line);
  background:#0b2048;
  color:#fff
}
html[data-theme="dark"] .t4-seo-card-visual{
  border-color:var(--t4-night-line);
  background:#18284a
}

@media (max-width:900px){
  .t4-seo .t4-seo-in{grid-template-columns:minmax(0,1fr)}
  .t4-seo .t4-seo-show,
  .t4-seo-search-copy,
  .t4-seo .t4-seo-list,
  .t4-seo .t4-seo-cta{
    grid-column:1;
    grid-row:auto
  }
  .t4-seo-search-copy{min-height:0;padding:24px}
}

@media (max-width:820px){
  .t4-seo .t4-seo-in{padding:14px!important}
  .t4-seo-search-copy{padding:20px;border-radius:18px}
  .t4-seo-search-copy h2{font-size:25px}
  .t4-seo-search-copy p{font-size:12px}
  .t4-seo .t4-seo-list li,
  .t4-seo .t4-seo-list li:nth-child(odd),
  .t4-seo .t4-seo-list li:nth-child(even){
    display:flex!important;
    width:auto;
    height:auto;
    min-height:326px;
    flex:0 0 clamp(254px,78vw,322px);
    flex-direction:column;
    gap:0;
    padding:0 0 14px
  }
  .t4-seo .t4-seo-list li>div{padding:13px 13px 0}
  .t4-seo .t4-seo-list b{font-size:14px}
  .t4-seo .t4-seo-list p{
    display:block;
    overflow:visible;
    font-size:10px;
    -webkit-line-clamp:unset
  }
  .t4-seo .t4-seo-list em{font-size:9px}
}

@media (max-width:560px){
  .t4-profile-fields{grid-template-columns:minmax(0,1fr)}
  .t4-profile-inline,
  .t4-address-row{grid-template-columns:minmax(0,1fr) auto}
  .t4-profile-action,
  .t4-address-search{padding:0 12px;font-size:11px}
}

/* =========================================================
   FULLSCREEN CAPSULE REVEAL
   자판기 레이아웃과 분리된 게임형 뽑기 결과 무대
   ========================================================= */
html.t4-result-open,
html.t4-result-open body{
  overflow:hidden!important;
  overscroll-behavior:none
}
.t4-fullscreen-reveal[hidden]{display:none!important}
.t4-fullscreen-reveal{
  position:fixed;
  z-index:6200;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background:#020711;
  color:#fff;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.t4-fullscreen-reveal:focus{outline:0}
.t4-full-reveal-stage,
.t4-full-reveal-result{
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.t4-full-reveal-stage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(19,105,235,.32),transparent 34%),
    linear-gradient(180deg,#020711,#06142d 70%,#01040b)
}
.t4-full-reveal-bg{
  position:absolute;
  inset:-3%;
  width:106%;
  height:106%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  pointer-events:none;
  filter:saturate(1.08) contrast(1.03);
  animation:t4-full-bg-breathe 7s ease-in-out infinite alternate
}
.t4-full-reveal-vignette{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 53%,transparent 19%,rgba(0,6,20,.12) 50%,rgba(0,3,12,.82) 100%),
    linear-gradient(180deg,rgba(0,5,18,.56),transparent 22%,transparent 70%,rgba(0,4,14,.72))
}
.t4-full-reveal-spotlight{
  position:absolute;
  z-index:2;
  top:-21%;
  left:50%;
  width:min(72vw,1040px);
  height:93%;
  transform:translateX(-50%);
  opacity:.55;
  clip-path:polygon(39% 0,61% 0,92% 100%,8% 100%);
  background:linear-gradient(180deg,rgba(226,242,255,.68),rgba(44,132,255,.12) 55%,transparent 94%);
  filter:blur(16px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:t4-full-spotlight 3.2s ease-in-out infinite alternate
}
.t4-full-reveal-ring{
  position:absolute;
  z-index:3;
  left:50%;
  top:52%;
  width:min(45vw,650px);
  aspect-ratio:1;
  border:2px solid rgba(255,215,75,.5);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.7);
  box-shadow:
    0 0 24px rgba(255,209,47,.32),
    inset 0 0 24px rgba(27,122,255,.25);
  opacity:.42;
  pointer-events:none;
  animation:t4-full-ring-pulse 2.4s ease-out infinite
}
.t4-full-reveal-ring--two{
  width:min(57vw,830px);
  border-color:rgba(75,159,255,.44);
  animation-delay:1.15s
}
.t4-full-reveal-shell{
  position:absolute;
  z-index:7;
  left:50%;
  top:51%;
  width:min(31vw,450px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 44px rgba(255,210,42,.72))
}
.t4-full-reveal-shell-top,
.t4-full-reveal-shell-bottom{
  position:absolute;
  inset:0;
  border:5px solid #dba719;
  border-radius:50%
}
.t4-full-reveal-shell-top{
  clip-path:inset(0 0 49% 0);
  background:
    radial-gradient(circle at 35% 22%,rgba(255,255,255,.85),transparent 9%),
    radial-gradient(circle at 42% 35%,#2879ed,#073baf 48%,#021b64 82%)
}
.t4-full-reveal-shell-bottom{
  clip-path:inset(51% 0 0 0);
  background:
    radial-gradient(circle at 35% 70%,#fff,#fff5d7 48%,#d7b86c 92%)
}
.t4-full-reveal-shell-seam{
  position:absolute;
  z-index:2;
  top:47%;
  left:0;
  width:100%;
  height:7%;
  border-radius:999px;
  background:linear-gradient(180deg,#fff2a9,#e0a811 48%,#845300);
  box-shadow:0 0 18px rgba(255,214,48,.9)
}
.t4-full-reveal-flash{
  position:absolute;
  z-index:8;
  inset:-20%;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,#fff 0,#fffdf0 11%,rgba(255,220,80,.92) 21%,rgba(42,133,255,.35) 42%,transparent 67%);
  mix-blend-mode:screen
}
.t4-full-reveal-particles,
.t4-full-result-particles{
  position:absolute;
  z-index:9;
  left:50%;
  top:51%;
  width:1px;
  height:1px;
  pointer-events:none
}
.t4-full-reveal-particles i,
.t4-full-result-particles i{
  position:absolute;
  width:clamp(4px,.65vw,10px);
  height:clamp(4px,.65vw,10px);
  border-radius:2px;
  opacity:0;
  background:#ffd63e;
  box-shadow:0 0 13px rgba(255,217,68,.94)
}
.t4-full-reveal-particles i:nth-child(3n+1),
.t4-full-result-particles i:nth-child(3n+1){
  border-radius:50%;
  background:#fff
}
.t4-full-reveal-particles i:nth-child(3n+2),
.t4-full-result-particles i:nth-child(3n+2){
  background:#4b9cff;
  box-shadow:0 0 15px rgba(65,144,255,.95)
}
.t4-full-reveal-open{
  position:absolute;
  z-index:10;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  cursor:default;
  -webkit-tap-highlight-color:transparent
}
.t4-full-reveal-open:focus-visible:after{
  content:"";
  position:absolute;
  inset:12px;
  border:2px solid rgba(255,221,79,.8);
  border-radius:18px;
  box-shadow:0 0 0 4px rgba(18,87,205,.35)
}
.t4-fullscreen-reveal.is-ready .t4-full-reveal-open{cursor:pointer}
.t4-full-reveal-prompt{
  position:absolute;
  left:50%;
  bottom:max(32px,env(safe-area-inset-bottom));
  display:grid;
  width:min(660px,calc(100vw - 40px));
  justify-items:center;
  padding:20px 30px 18px;
  transform:translateX(-50%);
  border:1px solid rgba(143,190,255,.42);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(4,20,54,.78),rgba(2,10,27,.9));
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.14),
    0 0 40px rgba(17,94,224,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  text-align:center
}
.t4-full-reveal-prompt small{
  color:#ffd643;
  font-size:clamp(10px,.9vw,13px);
  font-weight:1000;
  letter-spacing:.2em
}
.t4-full-reveal-prompt h2{
  margin-top:7px;
  color:#fff;
  font-size:clamp(24px,2.7vw,44px);
  font-weight:1000;
  line-height:1.1;
  letter-spacing:-.045em;
  text-shadow:0 3px 20px rgba(17,94,225,.65)
}
.t4-full-reveal-prompt p{
  margin-top:7px;
  color:#c9d9f5;
  font-size:clamp(12px,1vw,15px);
  font-weight:750
}
.t4-full-reveal-progress{
  position:relative;
  display:block;
  width:min(300px,64vw);
  height:5px;
  margin-top:15px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.15)
}
.t4-full-reveal-progress b{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,#fff,#ffd542,transparent);
  box-shadow:0 0 15px #ffd542;
  animation:t4-full-loading 1.05s ease-in-out infinite
}
.t4-full-reveal-prompt strong{
  display:none;
  align-items:center;
  gap:12px;
  margin-top:15px;
  padding:11px 18px;
  border:1px solid rgba(255,224,89,.66);
  border-radius:999px;
  background:linear-gradient(180deg,#ffdf54,#f5b900);
  box-shadow:0 0 24px rgba(255,201,30,.34),inset 0 1px rgba(255,255,255,.8);
  color:#05256c
}
.t4-full-reveal-prompt strong span{
  font-size:9px;
  font-weight:1000;
  letter-spacing:.16em
}
.t4-full-reveal-prompt strong b{
  font-size:14px;
  font-weight:1000
}
.t4-fullscreen-reveal.is-ready .t4-full-reveal-progress{display:none}
.t4-fullscreen-reveal.is-ready .t4-full-reveal-prompt strong{
  display:flex;
  animation:t4-full-open-cta 1.15s ease-in-out infinite
}
.t4-fullscreen-reveal.is-ready .t4-full-reveal-bg{
  animation:t4-full-bg-ready 1.25s ease-in-out infinite alternate
}
.t4-fullscreen-reveal.is-ready .t4-full-reveal-ring{animation-duration:1.25s}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-prompt{
  animation:t4-full-prompt-away .36s ease-in forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-bg{
  animation:t4-full-bg-open 1.1s cubic-bezier(.25,.7,.18,1) forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-spotlight{
  animation:t4-full-spot-open .82s ease-out forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-shell{
  animation:t4-full-shell-show 1.02s ease-out forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-shell-top{
  animation:t4-full-shell-top-open .82s .23s cubic-bezier(.12,.72,.1,1) forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-shell-bottom{
  animation:t4-full-shell-bottom-open .82s .23s cubic-bezier(.12,.72,.1,1) forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-shell-seam{
  animation:t4-full-shell-seam-open .7s .2s ease-out forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-flash{
  animation:t4-full-flash-open 1.08s ease-in-out forwards
}
.t4-fullscreen-reveal.is-opening .t4-full-reveal-particles i{
  animation:t4-full-particle-burst .9s var(--delay) cubic-bezier(.12,.6,.2,1) forwards
}

/* 공개된 실제 상품 결과 */
.t4-full-reveal-result{
  z-index:20;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  opacity:0;
  transform:scale(1.035);
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%,rgba(40,126,255,.42),transparent 32%),
    radial-gradient(circle at 50% 45%,rgba(255,210,54,.19),transparent 50%),
    linear-gradient(150deg,#02050d 0,#071b48 48%,#020711 100%)
}
.t4-fullscreen-reveal.is-revealed .t4-full-reveal-stage{
  opacity:0;
  visibility:hidden
}
.t4-fullscreen-reveal.is-revealed .t4-full-reveal-result{
  opacity:1;
  transform:none;
  pointer-events:auto;
  animation:t4-full-result-enter .72s cubic-bezier(.15,.82,.16,1) both
}
.t4-full-result-aurora{
  position:absolute;
  inset:-30%;
  opacity:.6;
  background:
    conic-gradient(from 180deg at 50% 50%,transparent,#1c76ff 13%,transparent 26%,#ffc928 42%,transparent 58%,#1455cb 78%,transparent);
  filter:blur(70px);
  animation:t4-full-aurora 16s linear infinite
}
.t4-full-result-rays{
  position:absolute;
  left:50%;
  top:44%;
  width:max(105vw,105vh);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:.22;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.82) 0 1.7deg,transparent 1.7deg 12deg);
  mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.66) 34%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.66) 34%,transparent 70%);
  animation:t4-full-rays-turn 38s linear infinite
}
.t4-full-result-particles{
  z-index:1;
  top:45%
}
.t4-fullscreen-reveal.is-revealed .t4-full-result-particles i{
  animation:t4-full-result-particle 1.25s var(--delay) cubic-bezier(.1,.65,.18,1) both
}
.t4-full-result-panel{
  position:relative;
  z-index:4;
  display:grid;
  width:min(1440px,100%);
  height:100%;
  min-height:0;
  grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center
}
.t4-full-result-heading{
  display:grid;
  justify-items:center;
  padding-top:2px;
  text-align:center
}
.t4-full-result-heading>span{
  color:#ffd646;
  font-size:clamp(9px,.82vw,13px);
  font-weight:1000;
  letter-spacing:.24em
}
.t4-full-result-heading h2{
  margin-top:5px;
  color:#fff;
  font-size:clamp(25px,3vw,48px);
  font-weight:1000;
  line-height:1.05;
  letter-spacing:-.05em;
  text-shadow:0 4px 28px rgba(36,120,255,.72)
}
.t4-full-result-panel.is-secret .t4-full-result-heading h2{
  color:#fff5b7;
  text-shadow:0 0 17px rgba(255,200,31,.8),0 5px 32px rgba(255,158,0,.48)
}
.t4-full-result-hero{
  position:relative;
  display:grid;
  width:min(940px,80vw);
  min-height:0;
  align-self:stretch;
  grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;
  margin:12px 0
}
.t4-full-result-halo{
  position:absolute;
  z-index:-1;
  left:50%;
  top:45%;
  width:min(73vh,780px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,214,68,.7);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,245,187,.3),rgba(28,113,255,.17) 38%,transparent 69%);
  box-shadow:0 0 90px rgba(38,121,255,.48),inset 0 0 60px rgba(255,211,54,.15);
  animation:t4-full-result-halo 2.4s ease-in-out infinite alternate
}
.t4-full-result-image{
  display:grid;
  width:100%;
  height:100%;
  min-height:0;
  place-items:center;
  overflow:hidden;
  border:2px solid rgba(255,214,64,.76);
  border-radius:clamp(22px,2vw,34px);
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,250,226,.95)),
    #fff;
  box-shadow:
    0 30px 80px rgba(0,0,0,.52),
    0 0 0 8px rgba(255,255,255,.07),
    0 0 66px rgba(45,132,255,.32);
  transform:translateY(28px) scale(.92);
  opacity:0
}
.t4-fullscreen-reveal.is-revealed .t4-full-result-image{
  animation:t4-full-prize-enter .86s .14s cubic-bezier(.12,.82,.15,1.12) forwards
}
.t4-full-result-image img{
  display:block;
  max-width:94%;
  max-height:94%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.16))
}
.t4-full-result-hero figcaption{
  display:flex;
  max-width:92vw;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:15px 20px 0;
  text-align:center
}
.t4-full-result-hero figcaption em{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid rgba(255,214,64,.6);
  border-radius:999px;
  background:#ffd333;
  color:#082b77;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.09em
}
.t4-full-result-hero figcaption b{
  overflow:hidden;
  color:#fff;
  font-size:clamp(18px,2vw,31px);
  font-weight:1000;
  line-height:1.2;
  letter-spacing:-.035em;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 3px 16px rgba(0,0,0,.5)
}
.t4-full-result-panel.is-secret .t4-full-result-hero figcaption em{
  background:linear-gradient(180deg,#fff4a7,#f3b800);
  box-shadow:0 0 22px rgba(255,205,32,.55)
}
.t4-full-result-footer{
  display:flex;
  width:min(940px,80vw);
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:4px
}
.t4-full-result-footer>span{
  color:#c8d8f3;
  font-size:clamp(11px,1vw,14px);
  font-weight:800
}
.t4-full-result-cash-symbol{
  display:inline-grid;
  width:20px;
  height:20px;
  place-items:center;
  margin-right:5px;
  border-radius:50%;
  background:#ffd12b;
  color:#083a9e;
  font-size:11px;
  font-weight:1000
}
.t4-full-result-close{
  min-height:48px;
  padding:0 25px;
  border:2px solid #ffd436;
  border-radius:999px;
  background:linear-gradient(180deg,#ffdd50,#f8bd0a);
  box-shadow:0 8px 26px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.7);
  color:#062b78;
  font-size:14px;
  font-weight:1000;
  white-space:nowrap;
  cursor:pointer
}
.t4-full-result-close:hover{filter:brightness(1.08);transform:translateY(-1px)}
.t4-full-result-close:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* 5연속 결과 */
.t4-full-result-panel--multi{width:min(1560px,100%)}
.t4-full-result-grid{
  display:grid;
  width:100%;
  min-height:0;
  align-self:stretch;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.2vw,19px);
  margin:15px 0;
  padding:0;
  list-style:none
}
.t4-full-result-grid li{
  position:relative;
  display:grid;
  min-width:0;
  min-height:0;
  grid-template-rows:minmax(0,1fr) auto auto;
  align-items:center;
  overflow:hidden;
  padding:10px 10px 14px;
  border:1px solid rgba(132,179,249,.48);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0,rgba(255,255,255,.95) 72%,rgba(225,238,255,.95));
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px #fff;
  opacity:0;
  transform:translateY(42px) scale(.92)
}
.t4-fullscreen-reveal.is-revealed .t4-full-result-grid li{
  animation:t4-full-grid-card .65s calc(.12s + var(--order) * .1s) cubic-bezier(.13,.82,.16,1.08) forwards
}
.t4-full-result-grid li.is-secret{
  border:2px solid #ffd02a;
  background:linear-gradient(180deg,#fffdf0,#fff6c8);
  box-shadow:0 0 40px rgba(255,203,33,.42),0 22px 56px rgba(0,0,0,.4)
}
.t4-full-result-number{
  position:absolute;
  z-index:2;
  top:10px;
  left:10px;
  display:grid;
  width:31px;
  height:31px;
  place-items:center;
  border-radius:50%;
  background:#073f9f;
  color:#fff;
  font-size:10px;
  font-weight:1000
}
.t4-full-result-grid-image{
  display:grid;
  width:100%;
  height:100%;
  min-height:0;
  place-items:center;
  overflow:hidden;
  border-radius:15px;
  background:#fff
}
.t4-full-result-grid-image img{
  display:block;
  max-width:96%;
  max-height:96%;
  width:auto;
  height:auto;
  object-fit:contain
}
.t4-full-result-grid li>em{
  justify-self:start;
  margin-top:10px;
  padding:4px 7px;
  border-radius:999px;
  background:#dfeaff;
  color:#0a459f;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em
}
.t4-full-result-grid li.is-secret>em{
  background:#ffd12d;
  color:#5d3500
}
.t4-full-result-grid li>b{
  display:-webkit-box;
  width:100%;
  margin-top:6px;
  overflow:hidden;
  color:#082d73;
  font-size:clamp(12px,1vw,16px);
  font-weight:950;
  line-height:1.3;
  letter-spacing:-.025em;
  text-align:left;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}
.t4-full-result-panel--multi .t4-full-result-footer{width:100%}

@keyframes t4-full-bg-breathe{
  from{transform:scale(1.01);filter:saturate(1.03) contrast(1.02) brightness(.9)}
  to{transform:scale(1.045);filter:saturate(1.14) contrast(1.05) brightness(1.04)}
}
@keyframes t4-full-bg-ready{
  from{transform:scale(1.025);filter:saturate(1.08) brightness(.96)}
  to{transform:scale(1.065);filter:saturate(1.2) brightness(1.14)}
}
@keyframes t4-full-spotlight{
  from{opacity:.38;transform:translateX(-50%) scaleX(.88)}
  to{opacity:.72;transform:translateX(-50%) scaleX(1.06)}
}
@keyframes t4-full-ring-pulse{
  0%{opacity:.52;transform:translate(-50%,-50%) scale(.65)}
  75%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
@keyframes t4-full-loading{
  0%{transform:translateX(-125%)}
  100%{transform:translateX(335%)}
}
@keyframes t4-full-open-cta{
  0%,100%{transform:scale(1);box-shadow:0 0 22px rgba(255,201,30,.3)}
  50%{transform:scale(1.045);box-shadow:0 0 38px rgba(255,211,53,.58)}
}
@keyframes t4-full-prompt-away{
  to{opacity:0;transform:translate(-50%,32px) scale(.94)}
}
@keyframes t4-full-bg-open{
  0%{transform:scale(1.04);filter:saturate(1.1) brightness(1)}
  38%{transform:scale(1.1);filter:saturate(1.35) brightness(1.2)}
  100%{transform:scale(1.5);filter:saturate(.7) brightness(2.8) blur(8px);opacity:.15}
}
@keyframes t4-full-spot-open{
  0%{opacity:.55}
  55%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) scaleX(1.7)}
}
@keyframes t4-full-shell-show{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1}
  100%{opacity:0}
}
@keyframes t4-full-shell-top-open{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(-48%) rotate(-11deg)}
}
@keyframes t4-full-shell-bottom-open{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(42%) rotate(8deg)}
}
@keyframes t4-full-shell-seam-open{
  0%{opacity:1;transform:scaleX(1)}
  60%,100%{opacity:0;transform:scaleX(1.35)}
}
@keyframes t4-full-flash-open{
  0%,18%{opacity:0;transform:scale(.35)}
  52%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.65)}
}
@keyframes t4-full-particle-burst{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.85) rotate(var(--r))}
}
@keyframes t4-full-result-enter{
  from{opacity:0;transform:scale(1.08);filter:brightness(2)}
  to{opacity:1;transform:none;filter:brightness(1)}
}
@keyframes t4-full-aurora{
  to{transform:rotate(360deg)}
}
@keyframes t4-full-rays-turn{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes t4-full-result-particle{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r))}
}
@keyframes t4-full-result-halo{
  from{transform:translate(-50%,-50%) scale(.94);opacity:.7}
  to{transform:translate(-50%,-50%) scale(1.04);opacity:1}
}
@keyframes t4-full-prize-enter{
  0%{opacity:0;transform:translateY(32px) scale(.88)}
  65%{opacity:1;transform:translateY(-5px) scale(1.015)}
  100%{opacity:1;transform:none}
}
@keyframes t4-full-grid-card{
  from{opacity:0;transform:translateY(42px) scale(.9)}
  to{opacity:1;transform:none}
}

@media (max-width:820px){
  .t4-full-reveal-bg{
    inset:-2%;
    width:104%;
    height:104%;
    object-position:center center
  }
  .t4-full-reveal-spotlight{width:150vw;height:86%}
  .t4-full-reveal-ring{width:76vw}
  .t4-full-reveal-ring--two{width:96vw}
  .t4-full-reveal-shell{width:min(72vw,430px)}
  .t4-full-reveal-prompt{
    bottom:max(18px,env(safe-area-inset-bottom));
    width:calc(100vw - 24px);
    padding:16px 15px 14px;
    border-radius:20px
  }
  .t4-full-reveal-prompt h2{font-size:clamp(23px,7vw,34px)}
  .t4-full-reveal-prompt p{font-size:12px}
  .t4-full-reveal-result{
    overflow-y:auto;
    padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))
  }
  .t4-full-result-panel{height:100%;min-height:620px}
  .t4-full-result-heading h2{font-size:clamp(24px,7vw,34px)}
  .t4-full-result-hero{
    width:100%;
    margin:10px 0
  }
  .t4-full-result-image{
    width:100%;
    border-radius:22px
  }
  .t4-full-result-hero figcaption{
    max-width:100%;
    gap:8px;
    padding:11px 5px 0
  }
  .t4-full-result-hero figcaption em{padding:5px 8px;font-size:8px}
  .t4-full-result-hero figcaption b{font-size:clamp(17px,5.2vw,24px)}
  .t4-full-result-footer{
    width:100%;
    gap:10px
  }
  .t4-full-result-footer>span{
    min-width:0;
    font-size:10px;
    line-height:1.35
  }
  .t4-full-result-close{
    min-height:44px;
    padding:0 17px;
    font-size:12px
  }
  .t4-full-result-panel--multi{
    height:auto;
    min-height:100%;
    grid-template-rows:auto auto auto
  }
  .t4-full-result-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:13px 0
  }
  .t4-full-result-grid li{
    min-height:245px;
    padding:8px 8px 12px;
    border-radius:18px
  }
  .t4-full-result-grid-image{min-height:168px}
  .t4-full-result-grid li>b{font-size:12px}
}

@media (max-width:480px){
  .t4-full-reveal-prompt small{font-size:8px}
  .t4-full-reveal-prompt strong{padding:9px 14px}
  .t4-full-result-panel--single{min-height:560px}
  .t4-full-result-grid li{min-height:218px}
  .t4-full-result-grid-image{min-height:145px}
  .t4-full-result-number{width:27px;height:27px;font-size:9px}
  .t4-full-result-footer>span{max-width:48%}
}

@media (max-height:680px) and (min-width:821px){
  .t4-full-reveal-prompt{
    bottom:18px;
    padding:13px 22px 12px
  }
  .t4-full-reveal-prompt p{display:none}
  .t4-full-reveal-progress{margin-top:10px}
  .t4-full-result-heading h2{font-size:28px}
  .t4-full-result-hero{margin:7px 0}
  .t4-full-result-hero figcaption{padding-top:8px}
  .t4-full-result-close{min-height:42px}
}

@media (prefers-reduced-motion:reduce){
  .t4-full-reveal-bg,
  .t4-full-reveal-spotlight,
  .t4-full-reveal-ring,
  .t4-full-reveal-progress b,
  .t4-full-reveal-prompt strong,
  .t4-full-result-aurora,
  .t4-full-result-rays,
  .t4-full-result-halo{
    animation:none!important
  }
  .t4-fullscreen-reveal.is-opening .t4-full-reveal-bg,
  .t4-fullscreen-reveal.is-opening .t4-full-reveal-shell,
  .t4-fullscreen-reveal.is-opening .t4-full-reveal-shell-top,
  .t4-fullscreen-reveal.is-opening .t4-full-reveal-shell-bottom,
  .t4-fullscreen-reveal.is-opening .t4-full-reveal-shell-seam,
  .t4-fullscreen-reveal.is-opening .t4-full-reveal-flash,
  .t4-fullscreen-reveal.is-opening .t4-full-reveal-particles i,
  .t4-fullscreen-reveal.is-revealed .t4-full-reveal-result,
  .t4-fullscreen-reveal.is-revealed .t4-full-result-image,
  .t4-fullscreen-reveal.is-revealed .t4-full-result-grid li,
  .t4-fullscreen-reveal.is-revealed .t4-full-result-particles i{
    animation-duration:.01ms!important;
    animation-delay:0s!important
  }
}

/* COLLECTION GALLERY · final visual layer */
.t4-modal.t4-modal--collection{
  width:min(1180px,calc(100vw - 28px));
  max-width:1180px;
  max-height:min(94vh,960px);
  max-height:min(94dvh,960px);
  border:1px solid #454c57;
  border-radius:22px;
  background:#0a0c10;
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.08)
}
.t4-modal--collection .t4-modal-head.t4-collection-fascia{
  grid-template-columns:minmax(0,1fr) auto auto 46px;
  min-height:84px;
  gap:20px;
  padding:12px 18px;
  border-bottom:1px solid #3a414b;
  background-color:#171b22;
  background-image:linear-gradient(180deg,#232831 0,#11151b 100%);
  box-shadow:inset 0 -3px 0 #bb8a42,0 8px 22px rgba(0,0,0,.36)
}
.t4-collection-fascia-brand>img{
  width:48px;height:48px;border:1px solid #deb763;background:#f6c648;
  box-shadow:0 0 0 4px rgba(255,255,255,.06)
}
.t4-collection-fascia-brand small{color:#cbb27d;font-size:8px;letter-spacing:.18em}
.t4-collection-fascia-brand b{color:#fff;font-size:19px;letter-spacing:-.03em}
.t4-collection-fascia-value{padding:7px 0 7px 20px;border-left:1px solid #444b55}
.t4-collection-fascia-value small{color:#b9bec8}
.t4-collection-fascia-value b{color:#f3d18c}
.t4-collection-fascia-light{color:#d7dbe2}
.t4-collection-fascia-light i{
  width:9px;height:9px;background:#f4c86b;
  box-shadow:0 0 12px 4px rgba(244,200,107,.42)
}
.t4-modal--collection .t4-collection-fascia .t4-modal-x{
  border-color:#575f6b;background:#171c23;color:#fff;box-shadow:none
}
.t4-modal--collection .t4-collection-fascia .t4-modal-x:hover{background:#2a3039}
.t4-modal--collection .t4-collection-body{
  padding:0 15px 18px;
  background:
    radial-gradient(circle at 50% -20%,rgba(205,156,79,.12),transparent 44%),
    linear-gradient(180deg,#15191f 0,#080a0d 100%);
  box-shadow:inset 0 18px 34px rgba(0,0,0,.38)
}
.t4-modal--collection .t4-collection-filter{
  position:sticky;top:0;z-index:12;gap:5px;margin:0 -15px 14px;padding:11px 16px;
  border-bottom:1px solid #333a44;background:rgba(14,17,22,.96);
  box-shadow:0 8px 18px rgba(0,0,0,.28);backdrop-filter:blur(10px)
}
.t4-modal--collection .t4-collection-filter button{
  min-height:34px;padding:6px 13px;border:1px solid transparent;border-radius:999px;
  background:transparent;color:#aeb5c0;font-size:10px
}
.t4-modal--collection .t4-collection-filter button:hover{border-color:#454c57;color:#fff}
.t4-modal--collection .t4-collection-filter button.is-active{
  border-color:#bd9352;background:#2a2319;color:#f4d69d
}
.t4-modal--collection .t4-collection-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;margin:0;padding:8px;border:7px solid #1e232a;border-radius:8px;background:#080a0d;
  box-shadow:inset 0 0 0 1px #3d444e,inset 0 0 40px rgba(0,0,0,.78),0 16px 34px rgba(0,0,0,.34)
}
.t4-modal--collection .t4-collection-item{
  min-height:312px;padding:0 8px 12px;overflow:visible;border:1px solid #414852;
  border-bottom:12px solid #1a1f26;border-radius:1px;
  background:
    radial-gradient(ellipse at 50% -2%,rgba(255,226,171,.34),transparent 46%),
    linear-gradient(180deg,#403629 0,#262521 38%,#14171b 79%,#0d1014 100%);
  color:#fff;
  box-shadow:inset 1px 0 rgba(255,255,255,.06),inset -1px 0 rgba(255,255,255,.03),inset 0 18px 28px rgba(255,211,137,.06),inset 0 -18px 30px rgba(0,0,0,.46);
  contain:layout style
}
.t4-modal--collection .t4-collection-item::before{
  content:"";position:absolute;z-index:5;inset:0;pointer-events:none;
  background:
    linear-gradient(112deg,rgba(255,255,255,.12) 0 7%,transparent 8% 70%,rgba(255,255,255,.045) 71% 77%,transparent 78%),
    linear-gradient(90deg,rgba(255,255,255,.045),transparent 3% 97%,rgba(255,255,255,.03))
}
.t4-modal--collection .t4-collection-item::after{
  left:-2px;right:-2px;bottom:-14px;height:14px;border:0;border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,#363c45 0,#171b20 44%,#080a0d 100%);
  box-shadow:0 3px 7px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.12)
}
.t4-modal--collection .t4-collection-case{
  aspect-ratio:4/4.35;padding:28px 7px 18px;border:0;border-radius:0;
  background:
    radial-gradient(ellipse at 50% -5%,rgba(255,239,196,.8),rgba(255,211,137,.16) 33%,transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 70%);
  box-shadow:none
}
.t4-modal--collection .t4-collection-case::before{
  left:4%;right:4%;top:-32%;height:94%;opacity:.58;
  background:linear-gradient(105deg,transparent 19%,rgba(255,232,184,.7) 50%,transparent 81%)
}
.t4-modal--collection .t4-collection-case::after{
  background:linear-gradient(116deg,rgba(255,255,255,.11) 0 8%,transparent 9% 69%,rgba(255,255,255,.045) 70% 76%,transparent 77%)
}
.t4-collection-lamp{
  left:10%;right:10%;top:0;width:auto;height:3px;transform:none;border:0;border-radius:0 0 5px 5px;
  background:#ffe0a0;box-shadow:0 0 9px 3px rgba(255,218,147,.42),0 10px 22px rgba(255,211,133,.28)
}
.t4-modal--collection .t4-collection-case img{
  width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 9px rgba(0,0,0,.52))
}
.t4-modal--collection .t4-collection-case>i{
  left:20%;right:20%;bottom:8px;height:8px;border:1px solid #707782;
  background:linear-gradient(180deg,#555c66,#15191f);
  box-shadow:0 5px 10px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.25)
}
.t4-modal--collection .t4-collection-item>em{
  left:10px;top:10px;padding:4px 7px;border:1px solid rgba(255,255,255,.24);border-radius:4px;
  background:rgba(12,15,19,.76);color:#ddd4c3;font-size:6.5px;letter-spacing:.11em;
  box-shadow:none;backdrop-filter:blur(5px)
}
.t4-modal--collection .t4-collection-item[data-crank="secret"]>em{
  border-color:#c99b55;background:#694021;color:#ffe3ac;box-shadow:0 0 14px rgba(255,185,78,.18)
}
.t4-modal--collection .t4-collection-qty{
  right:10px;top:10px;min-width:30px;height:22px;border:1px solid #c39956;
  background:rgba(15,18,22,.84);color:#f4d18f;box-shadow:none;backdrop-filter:blur(5px)
}
.t4-collection-plaque{
  position:relative;z-index:6;margin-top:0;padding:9px 9px 7px;border:1px solid #343b45;
  border-bottom:0;border-left:3px solid #b78b48;border-radius:2px 2px 0 0;background:#10141a
}
.t4-collection-plaque b{color:#f4f5f7;font-size:10.5px}
.t4-collection-plaque small{color:#9da5b1;font-size:8px}
.t4-collection-price{
  position:relative;z-index:6;padding:6px 9px;border:1px solid #343b45;border-top-color:#272d35;
  border-radius:0 0 2px 2px;background:#171c23;color:#dcb873
}
.t4-collection-price small{color:#969eaa;font-size:7px}
.t4-collection-price strong{font-size:10.5px}
.t4-modal--collection .t4-collection-empty,
.t4-modal--collection .t4-collection-filter-empty{min-height:340px;color:#fff}
.t4-modal--collection .t4-collection-empty i,
.t4-modal--collection .t4-collection-filter-empty i{
  border-color:#7c663c;background-color:#d2a34e;box-shadow:0 0 32px rgba(218,172,90,.22)
}
.t4-modal--collection .t4-collection-empty p,
.t4-modal--collection .t4-collection-filter-empty p{color:#aeb5c0}

@media (max-width:900px){
  .t4-modal--collection .t4-collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .t4-modal.t4-modal--collection{width:calc(100vw - 10px);max-height:95dvh;border-width:1px;border-radius:16px}
  .t4-modal--collection .t4-modal-head.t4-collection-fascia{
    grid-template-columns:minmax(0,1fr) auto 38px;min-height:68px;gap:9px;padding:9px 10px;border-bottom-width:1px
  }
  .t4-collection-fascia-brand>img{width:38px;height:38px}
  .t4-collection-fascia-brand small{font-size:6.5px}
  .t4-collection-fascia-brand b{font-size:14px}
  .t4-collection-fascia-value{padding-left:10px}
  .t4-collection-fascia-value small{font-size:7px}
  .t4-collection-fascia-value b{font-size:13px}
  .t4-collection-fascia-light{display:none}
  .t4-modal--collection .t4-collection-body{padding:0 8px 10px}
  .t4-modal--collection .t4-collection-filter{margin:0 -8px 8px;padding:8px}
  .t4-modal--collection .t4-collection-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px;border-width:4px
  }
  .t4-modal--collection .t4-collection-item{min-height:0;padding:0 5px 8px;border-width:1px;border-bottom-width:9px}
  .t4-modal--collection .t4-collection-item::after{left:-2px;right:-2px;bottom:-11px;height:11px;border-width:0}
  .t4-modal--collection .t4-collection-case{aspect-ratio:4/4.45;padding:23px 4px 14px}
  .t4-collection-lamp{left:10%;right:10%;width:auto;height:3px}
  .t4-modal--collection .t4-collection-item>em{left:7px;top:7px;padding:3px 5px;font-size:5.5px}
  .t4-modal--collection .t4-collection-qty{right:7px;top:7px;min-width:24px;height:19px;padding:0 5px;font-size:8px}
  .t4-collection-plaque{padding:7px 7px 6px}
  .t4-collection-plaque b{font-size:9px}
  .t4-collection-plaque small{font-size:6.8px}
  .t4-collection-price{padding:5px 7px}
  .t4-collection-price small{font-size:6.5px}
  .t4-collection-price strong{font-size:9px}
}
@media (max-width:420px){
  .t4-collection-fascia-brand small{display:none}
  .t4-collection-fascia-brand b{margin-top:0;font-size:12px}
  .t4-collection-fascia-value small{display:none}
  .t4-modal--collection .t4-collection-filter button{padding-inline:10px}
}

/* 최종 방송 모션 우선순위: 보트는 러너 반대 방향으로 정방향 주행 */
.t4-broadcast-route--boat{
  right:-22%!important;
  left:auto!important;
  bottom:0!important;
  animation:t4-broadcast-boat-forward 20s linear -3s infinite!important
}
.t4-broadcast-route--boat img{transform:scaleX(1)!important}
.t4-cartoon-runner-route{bottom:19%!important}
.t4-cartoon-impact{bottom:20%!important}
@media (max-width:760px){
  .t4-broadcast-route--boat{
    right:-25%!important;
    left:auto!important;
    width:22%;
    animation-duration:18s!important
  }
  .t4-cartoon-runner-route{bottom:20%!important}
  .t4-cartoon-impact{bottom:21%!important}
}

/* 2026-07-26 · 다크모드 최종 대비 보정 */
html[data-theme="dark"] .t4-picker .t4-product .t4-product-price,
html[data-theme="dark"] .t4-picker .t4-product .t4-product-price .t4-money-num,
html[data-theme="dark"] .t4-picker .t4-product .t4-product-lineup{
  color:var(--duck-yellow)!important;
  -webkit-text-fill-color:var(--duck-yellow)!important;
  opacity:1!important
}
html[data-theme="dark"] .t4-picker .t4-product .t4-product-meta-sep{
  color:#b9c9e3!important;
  opacity:1!important
}
html[data-theme="dark"] #t4-chip-locker em{
  border-color:var(--duck-yellow)!important;
  background:var(--duck-yellow)!important;
  color:var(--duck-blue-dark)!important;
  -webkit-text-fill-color:var(--duck-blue-dark)!important;
  opacity:1!important
}
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-field input[readonly],
html[data-theme="dark"] .t4-modal:not(.t4-modal--collection) .t4-invite-link input[readonly]{
  border-color:#8ca6d2!important;
  background:#f7f9fd!important;
  color:#071a43!important;
  -webkit-text-fill-color:#071a43!important;
  opacity:1!important
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-summary dt{
  color:#dbe6f8!important;
  -webkit-text-fill-color:#dbe6f8!important;
  opacity:1!important
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-summary dd,
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-summary .is-total dd{
  color:var(--duck-yellow)!important;
  -webkit-text-fill-color:var(--duck-yellow)!important;
  opacity:1!important
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-summary .is-total{
  border-top-color:#5874a4!important
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-agree{
  color:#e6edf9!important
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-balance>span,
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-section>header>small,
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-fine{
  color:#bdcbe1!important
}
html[data-theme="dark"] .t4-modal--charge-flow .t4-charge-go:disabled{
  color:#40506a!important;
  -webkit-text-fill-color:#40506a!important;
  opacity:1!important
}

/* 2026-07-26 · 뽑기 전에도 살아 있는 자판기 레버 */
@keyframes t4-lever-idle-turn{
  0%{transform:rotate(0deg)}
  18%{transform:rotate(48deg)}
  52%{transform:rotate(204deg)}
  82%{transform:rotate(334deg)}
  100%{transform:rotate(360deg)}
}
.t4-machine:not(.is-mixing) button.t4-machine-knob-part:not(:disabled){
  animation:t4-lever-idle-turn 5.2s cubic-bezier(.42,.08,.22,1) infinite;
  transform-origin:50% 50%;
  will-change:transform
}
.t4-machine:not(.is-mixing) button.t4-machine-knob-part:not(:disabled):active{
  animation:none!important;
  transform:rotate(14deg) scale(.98)
}
@media (prefers-reduced-motion:reduce){
  .t4-machine:not(.is-mixing) button.t4-machine-knob-part:not(:disabled){
    animation:none
  }
}

/* 2026-07-26 · 최근 획득 상품을 칸마다 또렷하게 보여 주는 릴 */
.t4-live-reels.is-spinning .t4-live-reel-strip{
  animation-duration:18s;
  animation-timing-function:linear
}
.t4-stage .t4-live-slot-board .t4-ps-in,
.t4-picker .t4-live-slot-board .t4-ps-in,
.t4-live-slot-board .t4-ps-head em::after{
  animation-duration:18s
}
.t4-live-reel-cell:not(.is-jackpot)>img{
  position:absolute;
  z-index:1;
  left:50%;
  top:calc(50% - 13px);
  width:calc(100% - 20px)!important;
  height:calc(100% - 34px)!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:translate(-50%,-50%)
}
.t4-live-reel::before,
.t4-live-reel::after{
  height:9%
}
.t4-live-reel::before{
  background:linear-gradient(180deg,rgba(3,20,57,.16),transparent)
}
.t4-live-reel::after{
  background:linear-gradient(0deg,rgba(3,20,57,.18),transparent)
}
@keyframes t4-live-reel-spin{
  0%,10%{opacity:1;filter:none;transform:translate3d(0,0,0)}
  11%,22%{opacity:1;filter:none;transform:translate3d(0,calc(var(--t4-live-cell) * -1),0)}
  23%,34%{opacity:1;filter:none;transform:translate3d(0,calc(var(--t4-live-cell) * -2),0)}
  35%,46%{opacity:1;filter:none;transform:translate3d(0,calc(var(--t4-live-cell) * -3),0)}
  47%,58%{opacity:1;filter:none;transform:translate3d(0,calc(var(--t4-live-cell) * -4),0)}
  59%,70%{opacity:1;filter:none;transform:translate3d(0,calc(var(--t4-live-cell) * -5),0)}
  71%,88%{opacity:1;filter:none;transform:translate3d(0,calc(var(--t4-live-cell) * -6),0)}
  90%{opacity:0;filter:none;transform:translate3d(0,calc(var(--t4-live-cell) * -6),0)}
  91%{opacity:0;filter:none;transform:translate3d(0,0,0)}
  94%,100%{opacity:1;filter:none;transform:translate3d(0,0,0)}
}

/* 2026-07-26 · 서버 공용 재고 / 품절 상태 */
.t4-product.is-sold-out{
  border-color:#aeb9cc!important;
  background:#eef1f6!important;
  box-shadow:none!important;
  cursor:not-allowed
}
.t4-product.is-sold-out .t4-product-thumb img{
  filter:grayscale(1);
  opacity:.42
}
.t4-product.is-sold-out .t4-product-info{
  opacity:.62
}
.t4-product.is-sold-out .t4-product-select,
.t4-product-select:disabled{
  cursor:not-allowed
}
.t4-product.is-sold-out .t4-product-lineup{
  opacity:1;
  cursor:pointer
}
.t4-product-soldout-badge{
  position:absolute;
  z-index:5;
  top:10px;
  right:10px;
  display:inline-flex;
  min-height:25px;
  align-items:center;
  justify-content:center;
  padding:4px 9px;
  border:2px solid #7b1621;
  border-radius:999px;
  background:#c92d3b;
  color:#fff;
  box-shadow:0 2px 0 #7b1621;
  font-size:10px;
  font-weight:1000;
  line-height:1;
  pointer-events:none
}
.t4-quick-product{
  position:relative
}
.t4-quick-product.is-sold-out,
.t4-quick-product:disabled{
  border-color:#aeb9cc!important;
  background:#eef1f6!important;
  color:#687287!important;
  cursor:not-allowed;
  box-shadow:none!important
}
.t4-quick-product.is-sold-out .t4-quick-product-thumb img{
  filter:grayscale(1);
  opacity:.4
}
.t4-quick-soldout{
  color:#fff
}
.t4-machine.is-sold-out .t4-panel--stock{
  border-color:#e04552!important;
  box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.18),0 0 1.2cqw rgba(224,69,82,.28)!important
}
.t4-machine.is-sold-out .t4-panel--stock b{
  color:#ff6873!important;
  font-size:clamp(10px,1.7cqw,17px)!important
}
.t4-machine.is-sold-out .t4-insert-btn:disabled,
.t4-machine.is-sold-out button.t4-machine-knob-part:disabled{
  cursor:not-allowed!important;
  filter:grayscale(.85) brightness(.72)!important;
  opacity:.72
}
.t4-modal--lineup .t4-lineup-row.is-sold-out,
.t4-lineup-preview-item.is-sold-out{
  background:#eef1f5!important;
  border-color:#c2cad7!important
}
.t4-modal--lineup .t4-lineup-row.is-sold-out img,
.t4-lineup-preview-item.is-sold-out img{
  filter:grayscale(1);
  opacity:.38
}
.t4-modal--lineup .t4-lineup-row.is-sold-out>em,
.t4-lineup-preview-item.is-sold-out>em{
  background:#c92d3b!important;
  color:#fff!important
}
.t4-modal--lineup .t4-lineup-select:disabled{
  border-color:#98a4b8!important;
  background:#c7ceda!important;
  color:#647086!important;
  cursor:not-allowed;
  box-shadow:none!important
}
html[data-theme="dark"] .t4-product.is-sold-out,
html[data-theme="dark"] .t4-quick-product.is-sold-out,
html[data-theme="dark"] .t4-quick-product:disabled{
  border-color:#405a82!important;
  background:#122746!important;
  color:#adbbd1!important
}
html[data-theme="dark"] .t4-modal--lineup .t4-lineup-row.is-sold-out,
html[data-theme="dark"] .t4-lineup-preview-item.is-sold-out{
  border-color:#405a82!important;
  background:#122746!important
}

/* 2026-07-26 · 방송 캐릭터 동선 정리 */
.t4-cartoon-runner-route{
  animation-direction:reverse!important
}
.t4-broadcast-sprayer{
  top:auto!important;
  bottom:1.5%!important
}
.t4-broadcast-spray-jet,
.t4-broadcast-spray-hit{
  display:none!important
}
@media (max-width:760px){
  .t4-broadcast-sprayer{
    top:auto!important;
    bottom:1%!important
  }
}

/* 2026-07-26 · 푸터 고객센터 버튼 색상 통일 */
.t4-footer .t4-f-cs-btns a,
.t4-footer .t4-f-cs-btns button{
  border-color:var(--duck-yellow)!important;
  background:var(--duck-yellow)!important;
  color:var(--duck-blue-dark)!important
}
.t4-footer .t4-f-cs-btns a:hover,
.t4-footer .t4-f-cs-btns button:hover{
  border-color:#ffe56b!important;
  background:#ffe56b!important;
  color:var(--duck-blue-dark)!important
}

/* 2026-07-26 · 8컷 가챠덕 스프레이 카툰 */
.t4-broadcast-sprayer{
  z-index:8;
  left:2.5%!important;
  top:auto!important;
  bottom:-3%!important;
  width:23%!important;
  opacity:0;
  transform-origin:42% 100%;
  animation:t4-spray-cameo 12s cubic-bezier(.2,.75,.28,1) infinite!important
}
.t4-broadcast-sprayer-sprite{
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  aspect-ratio:1429/2202;
  background:url("/assets/ui/gachaduck-spray-sprite-20260726.png?v=1") 0 0/400% 200% no-repeat;
  filter:drop-shadow(0 .65cqw .48cqw rgba(4,27,73,.32));
  will-change:background-position;
  animation:t4-spray-sprite-frames 12s steps(1,end) infinite
}
.t4-broadcast-spray-mist{
  position:absolute;
  z-index:4;
  left:44%;
  top:25%;
  display:block;
  width:158%;
  height:34%;
  opacity:0;
  pointer-events:none;
  transform:rotate(-10deg);
  transform-origin:0 50%;
  animation:t4-spray-mist-show 12s ease-out infinite
}
.t4-broadcast-spray-mist::before{
  content:"";
  position:absolute;
  left:0;
  top:8%;
  width:100%;
  height:84%;
  clip-path:polygon(0 43%,9% 30%,21% 40%,34% 18%,48% 34%,63% 10%,79% 31%,100% 3%,91% 49%,100% 88%,79% 71%,64% 96%,47% 68%,32% 85%,18% 59%,7% 70%,0 57%);
  background:
    radial-gradient(ellipse at 8% 50%,rgba(101,217,255,.98) 0 8%,transparent 11%),
    radial-gradient(ellipse at 19% 34%,rgba(23,107,218,.9) 0 7%,transparent 10%),
    radial-gradient(ellipse at 28% 66%,rgba(255,220,49,.92) 0 6%,transparent 9%),
    radial-gradient(ellipse at 39% 45%,rgba(11,79,189,.9) 0 9%,transparent 12%),
    radial-gradient(ellipse at 51% 24%,rgba(95,217,255,.9) 0 6%,transparent 9%),
    radial-gradient(ellipse at 59% 70%,rgba(20,83,207,.9) 0 8%,transparent 11%),
    radial-gradient(ellipse at 72% 42%,rgba(255,220,49,.94) 0 7%,transparent 10%),
    radial-gradient(ellipse at 84% 63%,rgba(7,52,134,.85) 0 6%,transparent 9%),
    radial-gradient(ellipse at 94% 31%,rgba(71,197,255,.92) 0 5%,transparent 8%),
    linear-gradient(90deg,rgba(94,220,255,.46),rgba(20,83,207,.28) 58%,rgba(7,52,134,.14) 82%,transparent);
  filter:blur(.025cqw) drop-shadow(0 0 .35cqw rgba(79,209,255,.68))
}
.t4-broadcast-spray-mist::after{
  content:"";
  position:absolute;
  right:-2%;
  top:14%;
  width:24%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,#ffdc31 0 9%,transparent 11%),
    radial-gradient(circle at 67% 23%,#5fd9ff 0 8%,transparent 10%),
    radial-gradient(circle at 76% 65%,#1453cf 0 12%,transparent 14%),
    radial-gradient(circle at 28% 72%,#073486 0 11%,transparent 13%);
  filter:drop-shadow(0 0 .35cqw rgba(20,83,207,.5))
}
.t4-broadcast-spray-mist>i{
  --t4-mist-x:8cqw;
  --t4-mist-y:-1cqw;
  position:absolute;
  left:1%;
  top:49%;
  display:block;
  width:clamp(4px,.72cqw,10px);
  aspect-ratio:1.45;
  border:.08cqw solid #073486;
  border-radius:58% 42% 65% 35%;
  background:#ffdc31;
  opacity:0;
  animation:t4-spray-mist-drop 12s ease-out infinite
}
.t4-broadcast-spray-mist>i:nth-child(1){--t4-mist-x:7cqw;--t4-mist-y:-3.2cqw}
.t4-broadcast-spray-mist>i:nth-child(2){--t4-mist-x:10cqw;--t4-mist-y:2.2cqw;background:#47c5ff}
.t4-broadcast-spray-mist>i:nth-child(3){--t4-mist-x:13cqw;--t4-mist-y:-1.4cqw}
.t4-broadcast-spray-mist>i:nth-child(4){--t4-mist-x:16cqw;--t4-mist-y:3.8cqw;background:#1453cf}
.t4-broadcast-spray-mist>i:nth-child(5){--t4-mist-x:19cqw;--t4-mist-y:-4.1cqw}
.t4-broadcast-spray-mist>i:nth-child(6){--t4-mist-x:22cqw;--t4-mist-y:1.1cqw;background:#47c5ff}
.t4-broadcast-spray-mist>i:nth-child(7){--t4-mist-x:25cqw;--t4-mist-y:-2.6cqw}
.t4-broadcast-spray-mist>i:nth-child(8){--t4-mist-x:29cqw;--t4-mist-y:3.1cqw;background:#1453cf}
.t4-broadcast-graffiti{
  position:absolute;
  z-index:6;
  left:24%;
  bottom:16%;
  display:block;
  width:38%;
  height:20%;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transform:rotate(-7deg) scale(.88);
  transform-origin:0 50%;
  animation:t4-spray-tag-reveal 12s cubic-bezier(.22,.72,.24,1) infinite
}
.t4-broadcast-graffiti>b{
  position:relative;
  z-index:2;
  display:block;
  color:#073486;
  font-family:"Arial Black","Noto Sans KR",sans-serif;
  font-size:clamp(24px,4.8cqw,72px);
  font-weight:1000;
  line-height:1;
  letter-spacing:-.09em;
  white-space:nowrap;
  -webkit-text-stroke:.12cqw #ffdc31;
  paint-order:stroke fill;
  text-shadow:.18cqw .22cqw 0 rgba(255,255,255,.9),0 0 .7cqw rgba(20,83,207,.32)
}
.t4-broadcast-graffiti::after{
  content:"";
  position:absolute;
  z-index:1;
  left:2%;
  bottom:-8%;
  width:95%;
  height:18%;
  border-radius:50%;
  background:#073486;
  clip-path:polygon(0 35%,18% 16%,35% 42%,53% 7%,72% 37%,100% 20%,100% 54%,73% 68%,54% 43%,32% 74%,14% 48%,0 66%)
}
.t4-broadcast-graffiti>i{
  position:absolute;
  z-index:1;
  top:70%;
  display:block;
  width:.72cqw;
  height:2.5cqw;
  border-radius:0 0 999px 999px;
  background:#073486
}
.t4-broadcast-graffiti>i:nth-of-type(1){left:13%;height:3.4cqw}
.t4-broadcast-graffiti>i:nth-of-type(2){left:52%;height:2.2cqw}
.t4-broadcast-graffiti>i:nth-of-type(3){left:84%;height:3cqw}
@keyframes t4-spray-cameo{
  0%,5%,100%{opacity:0;transform:translate3d(-18%,112%,0) rotate(-8deg) scale(.9)}
  10%{opacity:1;transform:translate3d(0,1%,0) rotate(1deg) scale(1.02)}
  14%,84%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
  89%{opacity:1;transform:translate3d(0,5%,0) rotate(2deg) scale(.98)}
  96%{opacity:0;transform:translate3d(-10%,112%,0) rotate(-7deg) scale(.9)}
}
@keyframes t4-spray-sprite-frames{
  0%,13.99%{background-position:0 0}
  14%,23.99%{background-position:33.333% 0}
  24%,31.99%{background-position:0 0}
  32%,39.99%{background-position:33.333% 0}
  40%,49.99%{background-position:63% 0}
  50%,57.99%{background-position:95% 0}
  58%,65.99%{background-position:0 100%}
  66%,73.99%{background-position:33.333% 100%}
  74%,82.99%{background-position:63% 100%}
  83%,100%{background-position:95% 100%}
}
@keyframes t4-spray-mist-show{
  0%,57%,77%,100%{opacity:0;transform:rotate(-10deg) scaleX(.03) scaleY(.62)}
  60%{opacity:.92;transform:rotate(-10deg) scaleX(.68) scaleY(.9)}
  64%{opacity:1;transform:rotate(-10deg) scaleX(1.08) scaleY(1.06)}
  69%,73%{opacity:.96;transform:rotate(-10deg) scaleX(1) scaleY(1)}
}
@keyframes t4-spray-mist-drop{
  0%,59%{opacity:0;transform:translate3d(0,0,0) scale(.25) rotate(0)}
  63%{opacity:.95}
  71%{opacity:.72}
  77%,100%{opacity:0;transform:translate3d(var(--t4-mist-x),var(--t4-mist-y),0) scale(1.08) rotate(210deg)}
}
@keyframes t4-spray-tag-reveal{
  0%,66%{opacity:0;clip-path:inset(0 100% 0 0);transform:rotate(-7deg) scale(.88)}
  70%{opacity:1;clip-path:inset(0 70% 0 0)}
  74%{opacity:1;clip-path:inset(0 35% 0 0)}
  78%,88%{opacity:1;clip-path:inset(0 0 0 0);transform:rotate(-7deg) scale(1)}
  96%,100%{opacity:0;clip-path:inset(0 0 0 0);transform:rotate(-7deg) scale(.96)}
}
@media (max-width:760px){
  .t4-broadcast-sprayer{
    left:1%!important;
    bottom:-4%!important;
    width:30%!important
  }
  .t4-broadcast-graffiti{
    left:29%;
    bottom:14%;
    width:37%
  }
  .t4-broadcast-graffiti>b{font-size:5cqw}
}
@media (prefers-reduced-motion:reduce){
  .t4-broadcast-sprayer,
  .t4-broadcast-graffiti{
    display:none!important
  }
}

/* 2026-07-26 · 모바일 히어로 아래 안내 바 여백 제거 */
@media (max-width:820px){
  .t4-main{
    padding-top:8px
  }
  .t4-main>.t4-stage{
    top:0!important
  }
}

/* PC 상품 카드의 가격 숫자와 옵션 가독성 */
@media (min-width:821px){
  .t4-picker .t4-product-price .t4-money-num,
  .t4-picker .t4-product-lineup{
    font-size:13px!important
  }
}

/* 2026-07-26 · 첫 방문 이벤트 팝업 */
.t4-modal.t4-modal--entry-event{
  width:min(860px,calc(100vw - 28px));
  max-width:860px;
  overflow:hidden;
  border:0;
  border-radius:30px;
  background:#fff;
  box-shadow:0 14px 0 #082f83,0 38px 100px rgba(4,27,77,.38)
}
.t4-entry-event{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
  min-height:530px;
  background:#fff
}
.t4-entry-event-x{
  position:absolute;
  z-index:5;
  top:18px;
  right:18px;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border:2px solid #082f83;
  border-radius:50%;
  background:#fff;
  color:#082f83;
  box-shadow:0 4px 0 #082f83;
  font-size:26px;
  font-weight:900;
  line-height:1;
  cursor:pointer
}
.t4-entry-event-x:hover{transform:translateY(-1px);background:#fff6c9}
.t4-entry-event-x:active{transform:translateY(3px);box-shadow:0 1px 0 #082f83}
.t4-entry-event-visual{
  position:relative;
  min-width:0;
  overflow:hidden;
  margin:0;
  background:#ffd528
}
.t4-entry-event-visual::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,41,113,0) 52%,rgba(4,31,86,.88) 100%)
}
.t4-entry-event-visual::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  right:-35px;
  width:74px;
  height:100%;
  background:radial-gradient(circle at 0 14px,transparent 13px,#fff 14px) 0 0/30px 30px repeat-y
}
.t4-entry-event-visual img{
  display:block;
  width:100%;
  height:100%;
  min-height:530px;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.04) contrast(1.02)
}
.t4-entry-event-visual>span{
  position:absolute;
  z-index:3;
  top:24px;
  left:24px;
  padding:8px 12px;
  border:2px solid #082f83;
  border-radius:999px;
  background:#ffd528;
  color:#082f83;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.16em
}
.t4-entry-event-visual figcaption{
  position:absolute;
  z-index:3;
  right:42px;
  bottom:28px;
  left:26px;
  color:#fff
}
.t4-entry-event-visual figcaption b{display:block;font-size:23px;font-weight:1000;letter-spacing:-.04em}
.t4-entry-event-visual figcaption small{display:block;margin-top:7px;font-size:12px;font-weight:750;line-height:1.55;opacity:.9}
.t4-entry-event-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  padding:50px 48px 36px
}
.t4-entry-event-kicker{
  margin:0 0 10px;
  color:#1953cf;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.16em
}
.t4-entry-event-copy h2{
  margin:0;
  color:#082455;
  font-size:34px;
  font-weight:1000;
  line-height:1.16;
  letter-spacing:-.055em
}
.t4-entry-event-copy h2 em{color:#1953cf;font-style:normal}
.t4-entry-event-benefits{display:grid;gap:9px;margin-top:23px}
.t4-entry-event-benefits article{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  min-height:66px;
  overflow:hidden;
  border:2px solid #d9e3f6;
  border-radius:16px;
  background:#f8faff
}
.t4-entry-event-benefits article:nth-child(2){border-color:#f0c814;background:#fff9da}
.t4-entry-event-benefits article>i{
  display:grid;
  height:100%;
  place-items:center;
  background:#1953cf;
  color:#fff;
  font-size:11px;
  font-style:normal;
  font-weight:1000
}
.t4-entry-event-benefits article:nth-child(2)>i{background:#ffd528;color:#082f83}
.t4-entry-event-benefits article>div{padding:10px 14px}
.t4-entry-event-benefits span{display:block;color:#657087;font-size:10px;font-weight:850}
.t4-entry-event-benefits b{display:block;margin-top:2px;color:#082455;font-size:17px;font-weight:1000;letter-spacing:-.035em}
.t4-entry-event-note{margin:14px 1px 0;color:#727d91;font-size:10px;font-weight:700;line-height:1.55}
.t4-entry-event-actions{display:grid;gap:10px;margin-top:18px}
.t4-entry-event-cta{
  display:flex;
  min-height:54px;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px solid #082f83;
  border-radius:15px;
  background:#1953cf;
  color:#fff;
  box-shadow:0 4px 0 #082f83;
  font-size:15px;
  font-weight:1000;
  text-decoration:none
}
.t4-entry-event-cta:hover{background:#0f47c3;transform:translateY(-1px)}
.t4-entry-event-cta span{color:#ffd528;font-size:21px}
.t4-entry-event-today{
  justify-self:center;
  border:0;
  border-bottom:1px solid #9aa3b3;
  background:transparent;
  color:#737d90;
  font-size:11px;
  font-weight:800;
  cursor:pointer
}
[data-theme="dark"] .t4-modal.t4-modal--entry-event{background:#fff}
[data-theme="dark"] .t4-entry-event-copy{background:#fff}
@media (max-width:680px){
  .t4-modal.t4-modal--entry-event{
    width:min(440px,calc(100vw - 20px));
    max-height:calc(100dvh - 24px);
    overflow:auto;
    border-radius:23px;
    box-shadow:0 8px 0 #082f83,0 24px 70px rgba(4,27,77,.38)
  }
  .t4-entry-event{display:block;min-height:0}
  .t4-entry-event-x{top:12px;right:12px;width:38px;height:38px;font-size:22px}
  .t4-entry-event-visual{height:218px}
  .t4-entry-event-visual::after{
    top:auto;
    right:0;
    bottom:-28px;
    width:100%;
    height:55px;
    background:radial-gradient(circle at 14px 0,transparent 13px,#fff 14px) 0 0/30px 30px repeat-x
  }
  .t4-entry-event-visual img{min-height:0;height:100%;object-position:center 49%}
  .t4-entry-event-visual>span{top:15px;left:15px;font-size:9px}
  .t4-entry-event-visual figcaption{right:24px;bottom:18px;left:18px}
  .t4-entry-event-visual figcaption b{font-size:18px}
  .t4-entry-event-visual figcaption small{font-size:10px}
  .t4-entry-event-copy{padding:27px 20px 20px}
  .t4-entry-event-kicker{margin-bottom:5px;font-size:9px}
  .t4-entry-event-copy h2{font-size:25px}
  .t4-entry-event-benefits{gap:7px;margin-top:15px}
  .t4-entry-event-benefits article{grid-template-columns:36px minmax(0,1fr);min-height:56px;border-radius:13px}
  .t4-entry-event-benefits article>div{padding:8px 11px}
  .t4-entry-event-benefits b{font-size:15px}
  .t4-entry-event-note{margin-top:10px;font-size:9px}
  .t4-entry-event-actions{margin-top:13px}
  .t4-entry-event-cta{min-height:49px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .t4-entry-event-x,.t4-entry-event-cta{transition:none}
}

/* ========================================================================
   2026-07-26 · 자판기 아케이드 사운드 컨트롤
   배경 루프와 Web Audio 효과음을 헤더 우측에서 함께 음소거할 수 있다.
   ======================================================================== */
.t4-sound-toggle{
  position:relative;
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  padding:0;
  border:1px solid #d3a400;
  border-radius:12px;
  background:var(--duck-yellow);
  color:var(--duck-blue-dark);
  box-shadow:none;
  cursor:pointer
}
.t4-sound-toggle:hover{border-color:var(--duck-blue-dark);background:#ffe05c}
.t4-sound-toggle:focus-visible{
  outline:3px solid var(--duck-blue)!important;
  outline-offset:2px;
  box-shadow:none!important
}
.t4-sound-toggle.is-muted{
  border-color:#c7d4e9;
  background:#f5f7fb;
  color:#6c7890
}
.t4-sound-toggle.is-muted:hover{border-color:#8fa2c2;background:#fff}
.t4-sound-glyph{position:relative;display:block;width:23px;height:22px}
.t4-sound-glyph::before{
  content:"";
  position:absolute;
  left:1px;
  top:8px;
  width:7px;
  height:7px;
  border-radius:2px;
  background:currentColor
}
.t4-sound-glyph::after{
  content:"";
  position:absolute;
  left:6px;
  top:4px;
  width:8px;
  height:15px;
  background:currentColor;
  clip-path:polygon(0 29%,100% 0,100% 100%,0 71%)
}
.t4-sound-glyph i,
.t4-sound-glyph b{
  position:absolute;
  display:block;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-left:0;
  border-radius:0 100% 100% 0
}
.t4-sound-glyph i{left:14px;top:6px;width:4px;height:10px}
.t4-sound-glyph b{left:15px;top:3px;width:7px;height:16px}
.t4-sound-toggle.is-muted .t4-sound-glyph i,
.t4-sound-toggle.is-muted .t4-sound-glyph b{display:none}
.t4-sound-toggle.is-muted::after{
  content:"";
  position:absolute;
  width:25px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transform:rotate(-45deg)
}
html[data-theme="dark"] .t4-sound-toggle{
  border-color:var(--duck-yellow);
  background:var(--duck-yellow);
  color:var(--duck-blue-dark)
}
html[data-theme="dark"] .t4-sound-toggle.is-muted{
  border-color:var(--t4-night-line);
  background:var(--t4-night-panel);
  color:#aebddb
}
@media (max-width:820px){
  .t4-sound-toggle{width:38px;height:38px;flex-basis:38px;border-radius:10px}
  .t4-sound-glyph{transform:scale(.9)}
}
@media (max-width:440px){
  .t4-sound-toggle{width:36px;height:36px;flex-basis:36px}
}

/* ============ 2026-07-26 모바일 상품 4열 x 4행 페이지 스와이프 ============ */
.t4-product-page{display:contents}
@media (max-width:820px){
  .t4-picker .t4-product-list,
  .t4-picker .t4-product-list.is-mobile-carousel,
  .t4-picker .t4-product-list.is-mobile-search-grid{
    display:flex!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }
  .t4-picker .t4-product-list::-webkit-scrollbar,
  .t4-picker .t4-product-list.is-mobile-carousel::-webkit-scrollbar,
  .t4-picker .t4-product-list.is-mobile-search-grid::-webkit-scrollbar{display:none}
  .t4-picker .t4-product-list>.t4-product-page{
    display:grid;
    width:100%;
    min-width:100%;
    flex:0 0 100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(4,auto);
    gap:7px;
    align-content:start;
    scroll-snap-align:start;
    scroll-snap-stop:always
  }
  .t4-picker .t4-product-list>.t4-product-page>.t4-product{
    width:100%!important;
    min-width:0!important
  }
  .t4-picker .t4-product-list>.t4-empty{
    width:100%;
    min-width:100%;
    flex:0 0 100%
  }
}
@media (max-width:390px){
  .t4-picker .t4-product-list>.t4-product-page{gap:5px}
}

/* ============ 2026-07-26 모바일 메뉴·팝업 밀도 축소 ============ */
@media (max-width:820px){
  /* 햄버거 메뉴 */
  .t4-menu{
    width:min(198px,calc(100vw - 24px));
    border-radius:10px
  }
  .t4-menu-sec{padding:2px 0}
  .t4-menu button{
    min-height:0;
    gap:7px;
    padding:8px 10px;
    font-size:12px
  }
  .t4-menu-user{padding:9px 10px}
  .t4-menu-user b{font-size:12px}
  .t4-menu-user small{font-size:9px}
  .t4-menu button>.t4-menu-item-icon{
    width:27px;
    height:27px;
    flex-basis:27px
  }
  .t4-menu-user>.t4-menu-item-icon{
    width:30px;
    height:30px;
    flex-basis:30px
  }
  .t4-menu button>.t4-menu-item-icon svg,
  .t4-menu-user>.t4-menu-item-icon svg{
    width:15px!important;
    height:15px!important
  }
  .t4-menu-theme{min-height:44px}
  .t4-theme-icon{
    width:27px;
    height:27px;
    font-size:15px
  }
  .t4-theme-copy b{font-size:11px}
  .t4-theme-copy small{font-size:8.5px}
  .t4-theme-switch{
    width:35px;
    height:20px
  }
  .t4-theme-switch u{
    left:2px;
    top:2px;
    width:14px;
    height:14px
  }
  .t4-menu-theme[aria-checked="true"] .t4-theme-switch u{transform:translateX(15px)}

  /* 일반 메뉴 팝업: 결과·상품·이벤트 화면은 제외 */
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)){
    max-height:calc(100dvh - 16px);
    border-radius:15px
  }
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-modal-head{
    min-height:54px;
    padding:9px 12px
  }
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-modal-head h2{font-size:17px}
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-modal-x{
    width:34px;
    height:34px
  }
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-modal-body{padding:12px}
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-popup-duck{
    min-height:108px;
    padding:12px 94px 10px 12px
  }
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-popup-duck__copy{min-height:84px}
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-popup-duck__copy strong{font-size:14px}
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-popup-duck__art{height:112px}
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-field{margin-bottom:8px}
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-field label{
    margin-bottom:4px;
    font-size:10px
  }
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-field input,
  #t4-modal.t4-modal:not(:is(.t4-modal--collection,.t4-modal--lineup,.t4-modal--quick-picker,.t4-modal--lever,.t4-modal--entry-event,.t4-modal--charge-flow,.t4-modal--vbank-ready)) .t4-field textarea{
    min-height:42px;
    padding:8px 10px;
    font-size:13px
  }
  #t4-modal .t4-invite-stats{gap:5px;margin-bottom:10px}
  #t4-modal .t4-invite-stats .t4-tile{
    min-height:68px;
    padding:12px 7px 8px;
    border-radius:12px
  }
  #t4-modal .t4-invite-stats .t4-tile b,
  #t4-modal .t4-invite-stats .t4-tile .t4-money-num{font-size:15px}
  #t4-modal .t4-invite-stats .t4-tile span{
    margin-top:3px;
    font-size:8px
  }
  #t4-modal .t4-profile-action,
  #t4-modal .t4-address-search{
    min-height:42px;
    padding:0 10px;
    font-size:10px
  }
  #t4-modal .t4-profile-note{
    margin-top:4px;
    font-size:8.5px
  }
  #t4-modal .t4-me-profile{
    gap:7px;
    margin:9px 0 3px
  }
  #t4-modal .t4-me-sub{font-size:10.5px}
  #t4-modal .t4-modal-body--me .t4-btn{
    min-height:42px;
    font-size:12px
  }

  /* 캐시 충전 */
  #t4-modal.t4-modal--charge-flow{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 18px);
    border-radius:13px
  }
  #t4-modal.t4-modal--charge-flow .t4-modal-head{
    min-height:48px;
    padding:7px 10px
  }
  #t4-modal.t4-modal--charge-flow .t4-modal-head h2{font-size:16px}
  #t4-modal.t4-modal--charge-flow .t4-modal-x{
    width:32px;
    height:32px
  }
  #t4-modal.t4-modal--charge-flow .t4-modal-body--charge{
    max-height:calc(100dvh - 66px);
    padding:0 9px 11px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-hero{
    min-height:76px;
    margin:0 -9px;
    padding:10px 14px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-hero strong{font-size:15px}
  #t4-modal.t4-modal--charge-flow .t4-charge-hero em{
    margin-top:4px;
    font-size:9px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-hero>i{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:24px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-balance{
    min-height:42px;
    margin-top:8px;
    padding:7px 10px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-section{
    margin-top:7px;
    padding:10px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-section>header{margin-bottom:7px}
  #t4-modal.t4-modal--charge-flow .t4-charge-section>header>b{font-size:12px}
  #t4-modal.t4-modal--charge-flow .t4-charge-section>header>small{font-size:8.5px}
  #t4-modal.t4-modal--charge-flow .t4-charge-entry{
    min-height:48px;
    padding:6px 9px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-entry input{font-size:19px}
  #t4-modal.t4-modal--charge-flow .t4-charge-entry-symbol{
    width:25px;
    height:25px;
    flex-basis:25px;
    font-size:12px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-input-note{
    margin-top:4px;
    font-size:8.5px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-quick-label{
    margin:9px 0 6px;
    font-size:9.5px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-opt,
  #t4-modal.t4-modal--charge-flow .t4-charge-opt:nth-child(3){
    min-height:36px;
    padding:6px 4px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-opt>b{font-size:12px}
  #t4-modal.t4-modal--charge-flow .t4-charge-opt>span{font-size:9px}
  #t4-modal.t4-modal--charge-flow .t4-charge-method-options{gap:5px}
  #t4-modal.t4-modal--charge-flow .t4-charge-method-option{
    min-height:62px;
    gap:4px;
    padding:7px 4px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-method-option--card{
    min-height:74px;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:6px 8px;
    padding:8px 9px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-method-option--card .t4-charge-method-icon{
    width:34px;
    height:30px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-method-option--card .t4-payment-glyph{font-size:19px}
  #t4-modal.t4-modal--charge-flow .t4-charge-method-copy>b{font-size:10px}
  #t4-modal.t4-modal--charge-flow .t4-charge-method-copy>small{font-size:7.5px}
  #t4-modal.t4-modal--charge-flow .t4-charge-method-option--card .t4-charge-method-copy>b{font-size:11px}
  #t4-modal.t4-modal--charge-flow .t4-charge-easypay-chips{
    gap:4px;
    padding-top:5px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-easypay-chips i{
    padding:3px 5px;
    font-size:7px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-method-note{
    margin-top:6px;
    padding:6px 8px;
    font-size:8px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-summary{
    margin-top:7px;
    padding:8px 10px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-agree{
    margin-top:7px;
    font-size:9px
  }
  #t4-modal.t4-modal--charge-flow .t4-charge-go{
    min-height:43px;
    margin-top:7px;
    font-size:12px
  }
}

/* 모바일 컬렉션: 한 줄 4개 전시장 */
@media (max-width:760px){
  #t4-modal.t4-modal--collection .t4-modal-head.t4-collection-fascia{
    min-height:58px;
    gap:6px;
    padding:7px 8px
  }
  #t4-modal.t4-modal--collection .t4-collection-fascia-brand>img{
    width:34px;
    height:34px
  }
  #t4-modal.t4-modal--collection .t4-collection-fascia-brand b{font-size:12px}
  #t4-modal.t4-modal--collection .t4-collection-fascia-value{padding-left:7px}
  #t4-modal.t4-modal--collection .t4-collection-fascia-value b{font-size:11px}
  #t4-modal.t4-modal--collection .t4-collection-fascia .t4-modal-x{
    width:32px;
    height:32px
  }
  #t4-modal.t4-modal--collection .t4-collection-body{padding:0 5px 7px}
  #t4-modal.t4-modal--collection .t4-collection-filter{
    margin:0 -5px 6px;
    padding:6px
  }
  #t4-modal.t4-modal--collection .t4-collection-filter button{
    min-height:28px;
    padding:4px 8px;
    font-size:8px
  }
  #t4-modal.t4-modal--collection .t4-collection-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
    padding:3px;
    border-width:3px
  }
  #t4-modal.t4-modal--collection .t4-collection-item{
    min-height:0;
    padding:0 2px 5px;
    border-bottom-width:6px
  }
  #t4-modal.t4-modal--collection .t4-collection-item::after{
    bottom:-8px;
    height:8px
  }
  #t4-modal.t4-modal--collection .t4-collection-case{
    aspect-ratio:4/5;
    padding:12px 2px 8px
  }
  #t4-modal.t4-modal--collection .t4-collection-item>em{
    left:3px;
    top:3px;
    max-width:calc(100% - 6px);
    overflow:hidden;
    padding:2px 3px;
    font-size:4.5px;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  #t4-modal.t4-modal--collection .t4-collection-qty{
    right:3px;
    top:3px;
    min-width:18px;
    height:15px;
    padding:0 3px;
    font-size:6px
  }
  #t4-modal.t4-modal--collection .t4-collection-plaque{
    padding:4px 2px 3px;
    border-left-width:1px
  }
  #t4-modal.t4-modal--collection .t4-collection-plaque small{
    display:block;
    overflow:hidden;
    font-size:5.6px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  #t4-modal.t4-modal--collection .t4-collection-price{
    display:block;
    padding:3px 2px
  }
  #t4-modal.t4-modal--collection .t4-collection-price small{
    display:block;
    font-size:5px;
    white-space:nowrap
  }
  #t4-modal.t4-modal--collection .t4-collection-price strong{
    display:block;
    font-size:7px;
    white-space:nowrap
  }
}

/* ============ 2026-07-26 결과 무대 투명화·5연속 가로 압축 ============ */
/* 단일 결과: 흰 카드 대신 조명 위에 누끼 상품만 떠 있는 무대 */
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single{
  width:100%;
  height:100%;
  min-height:0;
  grid-template-rows:auto minmax(0,1fr) auto
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-hero{
  width:min(70cqw,920px);
  max-width:92%;
  height:min(70cqw,calc(100% - 2cqw));
  min-height:0;
  align-self:center;
  margin:.7cqw 0
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100%;
  min-height:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:48%;
  width:min(57cqw,84%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,216,77,.38);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,240,.3) 0,rgba(255,218,74,.16) 24%,rgba(33,124,255,.16) 48%,transparent 70%);
  box-shadow:
    0 0 5.5cqw rgba(36,125,255,.42),
    inset 0 0 4cqw rgba(255,217,72,.16);
  animation:t4-result-stage-breathe 2.8s ease-in-out infinite alternate
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:84%;
  width:min(40cqw,58%);
  height:4.8cqw;
  transform:translateX(-50%);
  border:1px solid rgba(255,218,75,.42);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,231,130,.34),rgba(30,111,241,.2) 48%,transparent 72%);
  box-shadow:0 0 3.4cqw rgba(43,132,255,.4)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image img{
  position:relative;
  z-index:2;
  max-width:86%;
  max-height:88%;
  filter:
    drop-shadow(0 1.4cqw 1.7cqw rgba(0,0,0,.38))
    drop-shadow(0 0 1.2cqw rgba(121,184,255,.22))
}

/* 5연속 결과: 세로로 늘어나지 않는 짧은 전시 카드 */
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi{
  width:100%;
  height:auto;
  min-height:0;
  max-height:100%;
  align-self:center;
  grid-template-rows:auto auto auto
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid{
  width:100%;
  height:clamp(290px,34cqw,540px);
  min-height:0;
  align-self:center;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.15cqw;
  margin:1.05cqw 0;
  overflow:visible
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li{
  height:100%;
  min-height:0;
  grid-template-rows:minmax(0,1fr) auto auto;
  padding:.75cqw .75cqw .9cqw;
  border:1px solid rgba(108,166,255,.58);
  border-radius:1.65cqw;
  background:
    linear-gradient(155deg,rgba(16,55,119,.72),rgba(4,20,56,.9) 70%),
    rgba(3,16,45,.84);
  box-shadow:
    0 1.4cqw 3.2cqw rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.13),
    0 0 1.8cqw rgba(31,108,230,.18)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li.is-secret{
  border:2px solid #ffd02a;
  background:linear-gradient(155deg,rgba(96,65,11,.74),rgba(17,31,70,.94) 72%);
  box-shadow:
    0 0 2.4cqw rgba(255,203,33,.35),
    0 1.5cqw 3.4cqw rgba(0,0,0,.4)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid-image{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100%;
  min-height:0;
  overflow:visible;
  border-radius:1.2cqw;
  background:transparent
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid-image::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:49%;
  width:88%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,190,.2),rgba(42,128,255,.15) 48%,transparent 72%);
  box-shadow:0 0 1.8cqw rgba(55,138,255,.26)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid-image::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  bottom:5%;
  width:68%;
  height:7%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,218,76,.36),rgba(40,123,241,.16) 52%,transparent 75%)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid-image img{
  position:relative;
  z-index:2;
  max-width:94%;
  max-height:94%;
  filter:drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.4))
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li>b{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.4)
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li>em{
  background:rgba(222,235,255,.14);
  color:#cfe3ff
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li.is-secret>em{
  background:#ffd12d;
  color:#5d3500
}
.t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-number{
  background:#ffd233;
  color:#063a92;
  box-shadow:0 0 1cqw rgba(255,207,42,.25)
}

@keyframes t4-result-stage-breathe{
  from{opacity:.72;transform:translate(-50%,-50%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
}

/* 작은 화면: 5개 결과는 세로 3줄 대신 한 줄 가로 스와이프 */
@container (max-width:520px){
  .t4-machine>.t4-fullscreen-reveal .t4-full-reveal-result{
    overflow:hidden;
    padding:3cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel,
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single,
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi{
    width:100%;
    height:100%;
    min-height:0;
    max-height:100%;
    grid-template-rows:auto minmax(0,1fr) auto
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-hero{
    width:92cqw;
    max-width:100%;
    height:70cqw;
    min-height:0;
    align-self:center;
    margin:1cqw 0
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image{
    height:100%;
    min-height:0
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image::before{
    width:72cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image::after{
    width:52cqw;
    height:6cqw
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image img{
    max-width:88%;
    max-height:88%
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi{
    grid-template-rows:auto minmax(0,1fr) auto
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-heading::after{
    content:"옆으로 넘겨 5개 결과를 확인하세요";
    margin-top:1cqw;
    color:#b9cff2;
    font-size:clamp(8px,2.2cqw,11px);
    font-weight:800;
    letter-spacing:0
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid{
    display:grid;
    width:100%;
    height:auto;
    min-height:0;
    align-self:stretch;
    grid-template-columns:none;
    grid-template-rows:minmax(0,1fr);
    grid-auto-flow:column;
    grid-auto-columns:72cqw;
    gap:2cqw;
    margin:1.6cqw 0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid::-webkit-scrollbar{display:none}
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li{
    width:auto;
    height:100%;
    min-height:0;
    padding:1.4cqw;
    border-radius:3cqw;
    scroll-snap-align:center;
    scroll-snap-stop:always
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid-image{
    min-height:0
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li>em{
    margin-top:1cqw;
    font-size:clamp(7px,1.7cqw,9px)
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-grid li>b{
    margin-top:.8cqw;
    font-size:clamp(10px,2.8cqw,14px)
  }
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--multi .t4-full-result-number{
    top:1.4cqw;
    left:1.4cqw;
    width:6cqw;
    height:6cqw;
    font-size:clamp(8px,2cqw,10px)
  }
}

@media (prefers-reduced-motion:reduce){
  .t4-machine>.t4-fullscreen-reveal .t4-full-result-panel--single .t4-full-result-image::before{
    animation:none!important
  }
}

/* 2026-07-26 · 최근 획득 릴 흰 배경 제거 */
.t4-live-slot-board .t4-live-reel{
  background:rgba(4,25,66,.42);
  box-shadow:
    0 0 0 2px #061f55,
    inset 0 1px rgba(255,255,255,.12),
    inset 0 0 24px rgba(27,104,225,.18);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)
}
.t4-live-slot-board .t4-live-reel-cell:not(.is-jackpot){
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.16),rgba(79,145,255,.08) 43%,transparent 72%),
    transparent
}
.t4-live-slot-board .t4-live-reel-cell.is-secret:not(.is-jackpot){
  background:
    radial-gradient(circle at 50% 46%,rgba(255,236,178,.2),rgba(255,196,72,.08) 43%,transparent 72%),
    transparent
}
.t4-live-slot-board .t4-live-reel-cell:not(.is-jackpot)>img{
  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,.34))
    drop-shadow(0 0 12px rgba(255,205,42,.28))
}
.t4-live-slot-board .t4-live-reel-cell:not(.is-jackpot)::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:44%;
  width:78%;
  height:68%;
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(255,239,166,.46) 0%,
    rgba(255,211,64,.28) 38%,
    rgba(255,176,0,.1) 60%,
    transparent 78%
  );
  box-shadow:0 10px 28px rgba(255,194,20,.16);
  filter:blur(8px);
  opacity:.94;
  pointer-events:none;
  transform:translate(-50%,-50%)
}
.t4-live-slot-board .t4-live-reel-cell.is-secret:not(.is-jackpot)::before{
  background:radial-gradient(
    ellipse at center,
    rgba(255,244,185,.58) 0%,
    rgba(255,211,64,.36) 40%,
    rgba(255,176,0,.14) 62%,
    transparent 80%
  );
  box-shadow:0 10px 32px rgba(255,194,20,.22)
}


/* ── 음량 버튼: 헤더 → 머신 영역 우측 상단 (2026-07-27) ──
   .t4-machine 은 position:relative + overflow:hidden 이라 안쪽에 붙는다.
   네온 테두리(.t4-machine::after)가 z-index:6100 이므로 그 위로 올린다. */
.t4-machine > .t4-sound-toggle.t4-machine-sound{
  position:absolute !important;
  z-index:6200;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  flex:0 0 42px;
}
@media (max-width:820px){
  .t4-machine > .t4-sound-toggle.t4-machine-sound{
    top:10px;right:10px;width:36px;height:36px;flex:0 0 36px
  }
}
@media (max-width:480px){
  .t4-machine > .t4-sound-toggle.t4-machine-sound{
    top:8px;right:8px;width:32px;height:32px;flex:0 0 32px;border-radius:10px
  }
}

/* ── 헤더 이용방법 위치 · 메뉴 순서 (2026-07-27) ── */
@media (min-width:821px){
  .t4-header .t4-chips #t4-chip-guide{order:-100}
}
@media (max-width:820px){
  .t4-header .t4-chips #t4-chip-op{order:0}
  .t4-header .t4-chips .t4-search-toggle{order:10}
  .t4-header .t4-chips #t4-chip-guide{
    display:grid!important;
    order:20;
    width:38px;
    height:38px;
    min-height:38px;
    padding:0;
    place-items:center;
    overflow:hidden;
    font-size:0;
    line-height:1
  }
  .t4-header .t4-chips #t4-chip-guide svg{
    display:block;
    width:19px;
    height:19px;
    margin:0
  }
  .t4-header .t4-chips .t4-burger{order:30}
}
@media (max-width:440px){
  .t4-header .t4-chips #t4-chip-guide{
    width:36px;
    height:36px;
    min-height:36px
  }
}