/* 우야지 홈페이지 시안 공통 (스토어 B안 시각 언어) — 각 시안 폴더에서 ../_base/base.css 로 링크 */
@font-face{font-family:"Tmoney";src:url(../../assets/fonts/TmoneyRoundWindExtraBold.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Tmoney";src:url(../../assets/fonts/TmoneyRoundWindRegular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Pretendard";src:url(../../assets/fonts/PretendardVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --sea:#4FA3E3;        /* 스토어 배경 하늘 */
  --sea-2:#3F8FD6;      /* 스카이라인 실루엣 */
  --sea-3:#2E72C2;      /* 파도 진한 */
  --sea-4:#1E57A6;      /* 파도 가장 진한 */
  --yellow:#FFE14D;
  --sun:#FFF1A8;
  --ink:#16264A;        /* 말풍선 글자 */
  --paper:#FFFFFF;
  --mist:#EAF5FD;
  --btn-1:#6FD3F8;--btn-2:#1FB0EA;--btn-3:#0A93D2;
  --pear:#B8893F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}
.t-display{font-family:"Tmoney","Pretendard",sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.12}
.t-round{font-family:"Tmoney","Pretendard",sans-serif}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;border-radius:10px;z-index:99}
.skip:focus{left:8px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;font-family:"Tmoney",sans-serif;font-weight:800;font-size:18px;text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(10,60,120,.25)}
.btn-blue{background:linear-gradient(180deg,var(--btn-1),var(--btn-2) 55%,var(--btn-3));color:#fff;box-shadow:0 4px 0 #0874A8}
.btn-soon{background:rgba(255,255,255,.18);color:#fff;border:2px dashed rgba(255,255,255,.7);cursor:default}
.btn-soon small{font-family:"Pretendard",sans-serif;font-weight:600;font-size:13px;opacity:.95}

/* 말풍선 (확정 3번: 흰 알약형 320x150, 글자 46, 꼬리 밑변 왼쪽 60~130 비스듬히) — 균일 배율 --k 로만 크기 조절 */
.bubble{--k:.5;position:relative;width:calc(320px*var(--k));height:calc(150px*var(--k));background:#fff;border-radius:calc(75px*var(--k));display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Tmoney",sans-serif;font-weight:800;color:var(--ink);font-size:calc(40px*var(--k));line-height:1.18;filter:drop-shadow(0 calc(6px*var(--k)) 0 rgba(10,50,110,.18))}
.bubble::after{content:"";position:absolute;left:calc(60px*var(--k));top:calc(150px*var(--k) - 2px);width:calc(70px*var(--k));height:calc(60px*var(--k));background:#fff;clip-path:polygon(0 0,100% 0,28% 100%)}

/* 폰 (실제 캡처, 비율 유지) — 측면 두께가 보이는 단말 틀 */
.phone{position:relative;border-radius:calc(var(--w,280px)*.135);padding:calc(var(--w,280px)*.028);width:var(--w,280px);background:#1b1f27;
  box-shadow: calc(var(--w,280px)*.022) calc(var(--w,280px)*.018) 0 #0c0f14, 0 calc(var(--w,280px)*.06) calc(var(--w,280px)*.12) rgba(8,40,90,.35);border:1px solid #3a404c}
.phone img{width:100%;height:auto;border-radius:calc(var(--w,280px)*.11);background:#fff}
.tablet{position:relative;border-radius:28px;padding:16px;background:#1b1f27;box-shadow:12px 10px 0 #0c0f14,0 30px 60px rgba(8,40,90,.35);border:1px solid #3a404c}
.tablet img{width:100%;height:auto;border-radius:14px}

/* 울산 바다 장면: 스카이라인 + 파도 (SVG, 각 시안에서 <div class="scene">에 inline) */
.scene{position:relative;background:var(--sea);overflow:hidden}
.scene .skyline{position:absolute;left:0;right:0;bottom:70px;height:260px;width:100%;color:var(--sea-2)}
.scene .waves{position:absolute;left:0;right:0;bottom:0;height:110px;width:100%}
.cloud{position:absolute;width:120px;height:44px;background:#fff;border-radius:30px}
.cloud::before{content:"";position:absolute;left:24px;top:-22px;width:54px;height:54px;background:#fff;border-radius:50%}
.cloud::after{content:"";position:absolute;left:60px;top:-12px;width:40px;height:40px;background:#fff;border-radius:50%}

.notice-official{font-size:15px;line-height:1.5}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}