/* =========================================================
   너의날씨 글래스 카드 — your_weather 스타일을 .yw 로 스코프해 네이티브 이식
   (라이트 배경 버전 / 가로 스크롤 레이아웃)
   ========================================================= */

.yw{ position:relative; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* 좌우로 깔리는 가로 스크롤 행 */
.yw-row{
  display:flex; gap:26px; align-items:stretch;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:14px clamp(16px,5vw,48px) 30px;
}
.yw-row::-webkit-scrollbar{ display:none; }

/* 카드(310×675 고정) */
.yw .square{
  flex:0 0 auto; scroll-snap-align:center;
  width:310px; height:675px; position:relative;
  background:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-radius:40px; border:3px solid rgba(251,252,254,.55);
  box-shadow:0 8px 32px rgba(60,70,110,.14);
}
.yw .modal-handle{ display:none; }

/* 카드 텍스트 (다크 — 라이트 배경용) */
.yw .weather-text{ position:absolute; top:180px; left:50px; font-weight:700; font-size:36px; line-height:100%; color:#363849; z-index:10; }
.yw .forecast-text{ position:absolute; top:70px; left:50px; font-weight:400; font-size:32px; line-height:110%; color:#363849; z-index:10; }
.yw .forecast-text-center{ position:absolute; top:70px; left:50%; transform:translateX(-50%); width:250px; text-align:center; font-weight:400; font-size:26px; line-height:110%; color:#363849; z-index:10; }

/* 카드1 — HELLO / 앱스토어 */
.yw .app-icon{ position:absolute; top:60px; left:40px; width:100px; height:auto; z-index:10; }
.yw .app-intro-box{ position:absolute; top:354px; left:50%; transform:translateX(-50%); width:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:10; background:#fff; border-radius:40px; padding:12px 20px; box-sizing:border-box; }
.yw .app-intro-text{ font-weight:bold; font-size:16px; color:#7478A8; text-align:center; line-height:1.2; }
.yw .app-store-buttons{ display:flex; gap:12px; align-items:center; justify-content:center; }
.yw .store-button{ display:inline-block; text-decoration:none; transition:opacity .3s ease; }
.yw .store-button:hover{ opacity:.8; }
.yw .store-badge{ height:40px; width:auto; display:block; }

/* 카드2 — 예보는 같을지 몰라도 / 캐릭터 로고 */
.yw .logo-image{ position:absolute; top:236px; left:50%; transform:translateX(-50%); width:200px; height:auto; z-index:10; }
.yw .character-description-box{ position:absolute; top:512px; left:50%; transform:translateX(-50%); width:200px; height:60px; background:#fff; border-radius:40px; display:flex; align-items:center; justify-content:center; z-index:10; }
.yw .character-description-text{ font-weight:bold; font-size:16px; color:#7478A8; text-align:center; line-height:1.2; }
html[lang="en"] .yw .yw-card-outfit .forecast-text{
  left:50%;
  width:250px;
  transform:translateX(-50%);
  text-align:left;
  font-size:30px;
}
html[lang="en"] .yw .yw-card-outfit .character-description-text{ font-size:14px; }
html[lang="en"] .yw .forecast-text-center{ font-size:24px; }
html[lang="en"] .yw .yw-card-mood .forecast-text-center{ width:270px; }

/* 카드3~11 — 앱 스크린샷 프레임 */
.yw .card-screen-frame{ position:absolute; left:50%; transform:translateX(-50%); width:calc(100% - 24px); overflow:visible; background:transparent; }
.yw .card-screen-frame img{ width:100%; height:100%; display:block; object-fit:contain; object-position:center top; }
.yw .card-03-frame, .yw .card-04-frame, .yw .card-05-frame, .yw .card-06-frame,
.yw .card-07-frame, .yw .card-08-frame, .yw .card-09-frame, .yw .card-10-latest-frame,
.yw .card-11-frame{ top:174px; bottom:14px; }

/* 좌우 화살표 */
.yw-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:#363849; font-size:24px; font-weight:700; line-height:1;
  display:grid; place-items:center; z-index:20;
  box-shadow:0 8px 22px rgba(48,53,75,.20); transition:transform .15s ease;
}
.yw-arrow:hover{ transform:translateY(-50%) scale(1.08); }
.yw-prev{ left:8px; }
.yw-next{ right:8px; }
@media (max-width:760px){ .yw-arrow{ display:none; } }