body{
  letter-spacing:0;
  overflow-x:hidden;
  max-width:100vw;
}

html{
  overflow-x:hidden;
}

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

.frame{
  width:100%!important;
  overflow-x:hidden!important;
}
/* 모바일(<700px)에서만 폰 폭(390px) 고정 — 데스크톱은 하단 웹 표준이 담당 */
@media(max-width:699px){
  .frame{
    max-width:390px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

.wrap{
  width:100%!important;
  max-width:100vw!important;
  overflow-x:hidden!important;
}

.status,
.rn-header,
.rn-pill-tabs,
.rn-stat-row,
.rn-cat-grid,
.rn-tabbar,
.tabbar{
  max-width:100%!important;
}

.status .signals{
  max-width:96px;
  overflow:hidden;
  white-space:nowrap;
}

/* 가짜 상태바(9:41·노치·신호 점) 숨김 — 실제 폰 상태바와 중복되어 부자연스러움 */
.status{display:none!important}

.rn-pill-tabs{
  overflow-x:auto!important;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}

.rn-pill-tabs::-webkit-scrollbar{
  display:none;
}

.rn-stat-row{
  grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;
}
/* 카테고리 카드: 최소 140px 보장 → 모바일 2열, 글자 세로 깨짐 방지 */
.rn-cat-grid{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;
}

.rn-hero{
  overflow:hidden!important;
}

.rn-hero .mascot,
.rn-hero img,
.hero img,
.hero .mascot{
  max-width:34%!important;
  right:8px!important;
}

#paymentHoldNotice,
.rn-row,
.rn-cat,
.rn-stat,
.pkg-tile{
  overflow-wrap:anywhere;
}

#paymentHoldNotice{
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  word-break:keep-all;
}

.rn-stat,
.pkg-tile{
  box-sizing:border-box;
  width:100%;
}

.tabbar{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(100vw,390px)!important;
  padding-left:max(10px,env(safe-area-inset-left))!important;
  padding-right:max(10px,env(safe-area-inset-right))!important;
}
/* 하단 탭바 전 페이지 고정 — 홈(.tabbar)처럼 스크롤해도 유지 (sticky→fixed) */
.rn-tabbar{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  transform:none!important;
  width:auto!important;
  padding-left:max(10px,env(safe-area-inset-left))!important;
  padding-right:max(10px,env(safe-area-inset-right))!important;
}

h1,h2,h3,.chunk,.jua{
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif!important;
  letter-spacing:0!important;
}

.lp-disabled-link,
a:not([href]).lp-auto-disabled,
a[href="#"].lp-auto-disabled,
button.lp-disabled-link{
  opacity:.52!important;
  cursor:not-allowed!important;
  filter:saturate(.65);
}

.lp-ready-link{
  opacity:1!important;
  cursor:pointer!important;
  filter:none!important;
}

.lp-toast{
  position:fixed;
  left:50%;
  top:auto;
  bottom:calc(env(safe-area-inset-bottom,0px) + 86px);
  transform:translateX(-50%);
  z-index:9999;
  width:min(300px,calc(100vw - 48px));
  padding:12px 14px;
  border-radius:14px;
  background:rgba(10,14,26,.96);
  color:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  text-align:center;
}

.lp-toast-success{
  background:rgba(15,110,86,.96);
}

.lp-network-banner{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:10000;
  width:min(420px,calc(100vw - 28px));
  padding:12px 14px;
  border-radius:14px;
  background:#1E293B;
  color:#fff;
  box-shadow:0 16px 38px rgba(15,23,42,.32);
  font-size:13px;
  font-weight:850;
  line-height:1.45;
  text-align:center;
}

.lp-inline-error{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  background:#FFF4E6;
  color:#854F0B;
  border:1px solid rgba(255,169,77,.38);
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}

.lp-inline-info{
  background:#EAF3FE;
  color:#1F4E79;
  border-color:rgba(46,117,182,.28);
}

.lp-state-card{
  margin:12px 0;
  padding:22px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(31,78,121,.1);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
  color:#172033;
  text-align:center;
}

.lp-state-card strong{
  display:block;
  font-size:15px;
  font-weight:900;
  margin-bottom:6px;
}

.lp-state-card span{
  display:block;
  color:#647184;
  font-size:13px;
  line-height:1.5;
}

.lp-state-loading i,
.lp-is-loading::before{
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:8px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-3px;
  animation:lp-spin .7s linear infinite;
}

.lp-state-loading i{
  width:24px;
  height:24px;
  margin:0 0 10px;
  color:#2E75B6;
}

.lp-state-error{
  background:#FFF5F5;
  border-color:rgba(226,75,74,.22);
}

.lp-state-error strong{
  color:#A32D2D;
}

.lp-state-empty{
  background:#F8FAFC;
}

.lp-state-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin-top:14px;
  padding:0 14px;
  border:0;
  border-radius:10px;
  background:#1F4E79;
  color:#fff!important;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

@keyframes lp-spin{to{transform:rotate(360deg)}}

.lp-payment-hold{
  pointer-events:auto;
  background:#334155!important;
  color:#CBD5E1!important;
  box-shadow:none!important;
}
/* 마이페이지 메뉴 행(.rn-row)은 결제 보류여도 다른 행과 같은 배경 유지 — '운영 설정' 태그로 표시 */
.rn-row.lp-payment-hold{background:rgba(255,255,255,0.04)!important;color:#fff!important}

body.lp-authenticated .signup-pill{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:96px!important;
  min-width:0!important;
  min-height:32px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

body.lp-authenticated .head{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:8px!important;
}

body.lp-authenticated .head h1{
  padding-right:0!important;
}

body.lp-authenticated #authWelcomeTitle{
  white-space:normal!important;
  line-height:1.25!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

body.lp-authenticated #inviteProgressBtn{
  flex-shrink:0!important;
  max-width:82px!important;
  padding:8px 10px!important;
  font-size:11px!important;
}

body.lp-authenticated .hero .ctas .btn-ghost{
  min-width:96px!important;
}

body.lp-authenticated .hero .ctas .btn-ghost.lp-ready-link{
  background:rgba(54,199,189,.16)!important;
  border-color:rgba(54,199,189,.4)!important;
  color:#EFFFFB!important;
}

body.lp-authenticated #authWelcome{
  box-shadow:0 14px 34px rgba(54,199,189,.12)!important;
}

@media (max-width:420px){
  body.lp-authenticated .signup-pill{
    max-width:82px!important;
    padding:0 8px!important;
    font-size:10px!important;
  }
  body.lp-authenticated #inviteProgressBtn{
    max-width:76px!important;
    padding:8px!important;
  }
}

@media (min-width:900px){
  body:has(.frame){
    display:block;
    min-height:100vh;
    padding:0;
  }

  .desktop-shell{
    min-height:100vh;
    max-width:1180px;
    margin:0 auto;
    padding:56px 32px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    gap:56px;
    align-items:center;
  }

  .desktop-copy{
    display:block!important;
    color:#fff;
  }

  .desktop-copy .eyebrow{
    color:#36C7BD;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
  }

  .desktop-copy h2{
    margin:16px 0 18px;
    max-width:620px;
    font-size:56px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:0;
  }

  .desktop-copy p{
    max-width:560px;
    color:#A4B0CC;
    font-size:18px;
    line-height:1.7;
  }

  .desktop-actions{
    display:flex;
    gap:12px;
    margin-top:30px;
    flex-wrap:wrap;
  }

  .desktop-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    border-radius:14px;
    font-weight:900;
  }

  .desktop-actions .primary{
    background:#FFC107;
    color:#1a1a1a;
    box-shadow:0 12px 28px rgba(255,193,7,.28);
  }

  .desktop-actions .secondary{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
  }

  .desktop-proof{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:34px;
    max-width:620px;
  }

  .desktop-proof div{
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
  }

  .desktop-proof strong{
    display:block;
    color:#fff;
    font-size:18px;
  }

  .desktop-proof span{
    display:block;
    margin-top:4px;
    color:#A4B0CC;
    font-size:12px;
    font-weight:800;
  }

  .frame{
    min-height:100vh;
  }
}

@media (max-width:899px){
  .desktop-copy{display:none!important}
  .frame{
    width:100vw!important;
  }
}

@media (max-width:420px){
  .rn-stat-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .rn-stat{
    padding:10px 6px!important;
  }

  .rn-stat .n{
    font-size:18px!important;
  }

  .rn-hero .mascot,
  .rn-hero img,
  .hero img,
  .hero .mascot{
    max-width:30%!important;
    right:10px!important;
  }

  #chargeProductsGrid,
  #chargeMethods{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
  }
}

/* ============================================================
   웹 반응형 레이아웃 표준 (2026-06-30) — 최종 오버라이드
   이 파일이 마지막에 로드되므로, 위쪽의 폰 목업 규칙
   (.frame 390px 고정 · 900px 폰 셸 · 그라데이션 배경)을
   여기서 일괄 무효화하고 "넓은 화면 활용 반응형"으로 통일한다
   ============================================================ */

:root{
  --lp-app-max:560px;
  --lp-app-gutter:18px;
  --lp-tabbar-h:calc(74px + env(safe-area-inset-bottom,0px));
}

.frame{
  max-width:none!important;
  min-height:100dvh!important;
}

.tab-spacer{
  height:calc(var(--lp-tabbar-h) + 18px)!important;
}

.rn-tabbar{
  min-height:var(--lp-tabbar-h)!important;
  box-sizing:border-box!important;
}

.rn-avatar{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:5px!important;
  width:72px!important;
  flex:0 0 72px!important;
}

.rn-avatar img{
  width:72px!important;
  height:auto!important;
  max-width:72px!important;
}

.rn-avatar .lv{
  position:static!important;
  transform:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:100%!important;
  padding:3px 8px!important;
  line-height:1!important;
}

#lpAvatar + div{
  min-width:0!important;
  overflow:hidden!important;
}

#lpAvatar + div [style*="white-space:nowrap"]{
  white-space:normal!important;
  overflow-wrap:keep-all!important;
}

.rn-row,
.row,
.rn-card,
.rn-cat,
.rn-stat,
.stat{
  min-width:0!important;
}

.rn-stat-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
}

.rn-stat{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:78px!important;
  padding:12px 8px!important;
  border:1px solid rgba(31,78,121,.10)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(31,78,121,.08)!important;
  text-align:center!important;
}

.rn-stat .n{
  color:#1f4e79!important;
  font-family:'Jua','Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif!important;
  font-size:20px!important;
  font-weight:900!important;
  line-height:1.05!important;
}

.rn-stat .n.mint{
  color:#00857a!important;
}

.rn-stat .n.gold{
  color:#b9893a!important;
}

.rn-stat .lbl{
  margin-top:6px!important;
  color:#667085!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.25!important;
  overflow-wrap:keep-all!important;
}

.rn-row .title,
.rn-row .meta,
.row .meta .t,
.row .meta .m,
.stat .t,
.stat .s{
  overflow-wrap:break-word!important;
}

.rn-chip,
.chip,
.pill-trust,
.reward-status{
  max-width:calc(100vw - 36px)!important;
}

.tpr-camera-page{
  --tpr-camera-max:560px;
  --tpr-camera-view:390px;
}

.referral-qr-panel{
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  gap:8px!important;
}

.referral-qr-img,
#qrImg{
  display:block!important;
  width:168px!important;
  height:168px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  flex:0 0 auto!important;
}

.tpr-camera-page .rn-header,
.tpr-camera-shell,
.tpr-camera-note{
  width:100%!important;
  max-width:var(--tpr-camera-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

.tpr-camera-viewfinder{
  width:min(100%,var(--tpr-camera-view))!important;
  max-width:var(--tpr-camera-view)!important;
  max-height:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  aspect-ratio:3/4!important;
}

.tpr-camera-controls{
  width:min(100%,var(--tpr-camera-view))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.tpr-camera-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:0!important;
  transform:scaleX(-1)!important;
  transition:opacity .2s ease!important;
  z-index:0!important;
}

.tpr-camera-canvas{
  display:none!important;
}

.tpr-camera-grid,
.tpr-camera-guide,
.tpr-camera-corner,
.tpr-camera-score{
  z-index:2!important;
}

.tpr-camera-demo{
  z-index:1!important;
  transition:opacity .2s ease,filter .2s ease!important;
}

.tpr-camera-page.is-live .tpr-camera-video{
  opacity:.86!important;
}

.tpr-camera-page.is-live .tpr-camera-demo{
  opacity:.10!important;
  filter:grayscale(1)!important;
}

.tpr-camera-page.is-live .tpr-camera-grid{
  background-image:radial-gradient(circle,rgba(91,255,238,0.18) 1px,transparent 1px)!important;
}

@media(max-width:699px){
  .tpr-camera-page{
    --tpr-camera-max:100%;
    --tpr-camera-view:360px;
  }

  .tpr-camera-shell{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

@media(min-width:1100px){
  .tpr-camera-page{
    --tpr-camera-view:420px;
  }
}

@media(max-width:699px){
  body:has(.frame){
    background:#f5f7fb!important;
  }

  .frame{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-shadow:none!important;
  }

  .rn-tabbar{
    left:0!important;
    right:0!important;
    bottom:0!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    border-radius:0!important;
  }
}

@media(min-width:700px){
  .frame{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:max(var(--lp-app-gutter),calc((100% - var(--lp-app-max)) / 2))!important;
    padding-right:max(var(--lp-app-gutter),calc((100% - var(--lp-app-max)) / 2))!important;
    box-shadow:none!important;
  }

  .rn-tabbar{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(var(--lp-app-max),calc(100vw - 36px))!important;
    max-width:var(--lp-app-max)!important;
    border-radius:18px 18px 0 0!important;
    box-shadow:0 -14px 32px rgba(31,78,121,.12)!important;
  }
}