/* Weather Charm landing — 살구빛 클레이 톤 (앱과 같은 팔레트) */
:root{
  color-scheme: light;
  --bg:#FFF3E8; --bg2:#FFE9D6; --butter:#FFF1C9; --sky:#DDEBFA;
  --card:#FFFCF8; --ink:#4A2917; --text:#6B5145; --muted:#9A8174;
  --accent:#E8894A; --accent-strong:#A84F1F; --line:rgba(168,79,31,.12);
  --shadow:0 18px 40px -18px rgba(168,79,31,.35), 0 2px 6px rgba(168,79,31,.06);
  --r:28px; --wrap:1120px;
  --font-head: system-ui, sans-serif; --font-body: system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.7;
  background:
    radial-gradient(900px 600px at 85% -10%, var(--butter) 0%, transparent 60%),
    radial-gradient(800px 700px at -10% 30%, var(--sky) 0%, transparent 55%),
    radial-gradient(900px 700px at 110% 80%, var(--bg2) 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-strong)}
h1,h2,h3{font-family:var(--font-head); color:var(--ink); line-height:1.25; margin:0 0 .5em; font-weight:600; letter-spacing:-.01em}
.lang-ko h1,.lang-ko h2,.lang-ko h3{font-weight:400}
.lang-ja h1,.lang-ja h2,.lang-ja h3{font-weight:800}
h1{font-size:clamp(34px,6vw,60px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:clamp(21px,2.4vw,26px)}
p{margin:0 0 1em}
main{max-width:var(--wrap); margin:0 auto; padding:0 20px}
section{margin:96px 0}
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow), inset 0 1px 0 #fff; border:1px solid var(--line)}

/* header */
.top{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--wrap); margin:0 auto; padding:14px 20px; backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); background:rgba(255,243,232,.72)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--font-head); font-size:21px}
.brand img{border-radius:11px; box-shadow:0 4px 10px rgba(168,79,31,.25)}
.nav{display:flex; align-items:center; gap:18px}
.nav>a{color:var(--text); text-decoration:none; font-weight:600; font-size:15px}
.nav>a:hover{color:var(--accent-strong)}
.langs{position:relative}
.langs summary{list-style:none; cursor:pointer; padding:7px 14px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink)}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:" ▾"; color:var(--muted)}
.langs div{position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border-radius:18px; padding:8px;
  box-shadow:var(--shadow); border:1px solid var(--line); display:flex; flex-direction:column; min-width:140px}
.langs div a{padding:8px 12px; border-radius:12px; text-decoration:none; color:var(--text); font-size:15px}
.langs div a:hover,.langs div a[aria-current]{background:var(--bg2); color:var(--ink)}

/* hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; margin-top:40px}
.kicker{display:inline-block; font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--accent-strong);
  background:#fff; border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:20px}
.lead{font-size:clamp(17px,1.8vw,20px); max-width:34em}

.cta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px}
.cta-row.center{justify-content:center}
.cta{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; background:#1d1410; color:#fff;
  text-decoration:none; font-weight:700; font-size:17px; box-shadow:0 12px 24px -10px rgba(29,20,16,.55); transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.cta.soon{background:var(--ink); opacity:.85; cursor:default}
.note{font-size:14px; color:var(--muted); font-weight:600}

/* features */
.features>h2,.gallery>h2,.premium>h2,.privacy>h2{text-align:center; margin-bottom:48px}
.feat{display:grid; grid-template-columns:380px 1fr; gap:56px; align-items:center; margin:0 auto 72px; max-width:960px}
.feat.rev{grid-template-columns:1fr 380px}
.feat.rev .shot{order:2}
.shot img{border-radius:32px; box-shadow:var(--shadow)}
.num{font-family:var(--font-head); font-size:15px; color:var(--accent); font-weight:700; letter-spacing:.08em}
.feat p{font-size:18px}

/* room */

/* gallery */
.strip{list-style:none; margin:0 -20px; padding:8px 20px 24px; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory}
.strip li{flex:0 0 230px; scroll-snap-align:start}
.strip img{border-radius:22px; box-shadow:var(--shadow)}

/* premium / privacy */
.premium .sub{text-align:center; max-width:40em; margin:-28px auto 40px}
.grid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px}
.grid.three{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid li{background:var(--card); border-radius:24px; padding:22px 24px; border:1px solid var(--line); box-shadow:var(--shadow)}
.grid strong{display:block; color:var(--ink); font-family:var(--font-head); font-size:19px; margin-bottom:4px; font-weight:600}
.lang-ko .grid strong{font-weight:400}
.grid span{font-size:15.5px}

/* teaser */
.teaser{text-align:center; padding:48px 24px}
.btn{display:inline-block; padding:12px 24px; border-radius:999px; background:var(--bg2); color:var(--accent-strong);
  font-weight:700; text-decoration:none; border:1px solid var(--line)}
.btn:hover{background:#FFDDC0}

/* faq */
.faq{max-width:820px}
.faq>h1{margin-top:48px; font-size:clamp(32px,5vw,48px)}
.qas{margin:36px 0 64px}
.qa{background:var(--card); border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:14px; padding:0 24px}
.qa summary{cursor:pointer; list-style:none; padding:20px 32px 20px 0; position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; position:absolute; right:0; top:14px; font-size:26px; color:var(--accent)}
.qa[open] summary::after{content:"–"}
.qa h2{font-size:19px; margin:0; font-family:var(--font-body); font-weight:700}
.qa p{padding-bottom:20px; margin:0}

/* footer */
.foot{max-width:var(--wrap); margin:40px auto 0; padding:40px 20px 56px; border-top:1px solid var(--line); text-align:center; font-size:14px; color:var(--muted)}
.foot nav{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-bottom:16px}
.foot nav a{color:var(--text); text-decoration:none; font-weight:600}
.foot .biz{margin:0 0 6px; line-height:1.6}

/* root picker */
.root{display:grid; place-items:center; min-height:100vh}
.pick{padding:40px 48px; text-align:center}
.pick img{margin:0 auto 16px; border-radius:18px}
.pick ul{list-style:none; padding:0; margin:0}
.pick a{display:block; padding:8px; font-weight:700; text-decoration:none}

/* painted sky behind hero */
.sky{position:absolute; left:0; right:0; top:0; height:760px; z-index:-1;
  background:url(/assets/art/paint_sky.webp) center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 35%, transparent); mask-image:linear-gradient(#000 35%, transparent); opacity:.85}
body{position:relative}
.hero-art{position:relative; max-width:400px; margin:0 auto}
.hero-phone{border-radius:40px; box-shadow:var(--shadow); transform:rotate(1.5deg)}
.fl{position:absolute; filter:drop-shadow(0 10px 14px rgba(74,41,23,.18)); animation:bob 6s ease-in-out infinite}
.f1{top:-40px; left:-56px; width:120px}
.f2{bottom:40px; left:-70px; width:130px; animation-delay:-2s}
.f3{top:120px; right:-54px; width:104px; animation-delay:-4s}
.f4{bottom:-36px; right:-40px; width:150px; animation-delay:-1s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}

/* weather → charm chips */
.charms{text-align:center}
.charms .sub{max-width:38em; margin:0 auto 40px}
.chips{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.chips li{display:flex; flex-direction:column; align-items:center; gap:10px}
.bubble{width:100%; aspect-ratio:1; border-radius:32px; background:var(--chip); display:grid; place-items:center;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8), var(--shadow); border:1px solid rgba(255,255,255,.7)}
.bubble img{width:66%; filter:drop-shadow(0 8px 10px rgba(74,41,23,.15)); transition:transform .25s}
.chips li:hover .bubble img{transform:translateY(-6px) scale(1.05)}
.chips b{font-family:var(--font-head); color:var(--ink); font-weight:600; font-size:17px}
.lang-ko .chips b{font-weight:400}

/* decorative charms under feature text */
.stamps{display:flex; gap:12px; align-items:flex-end; margin-top:18px}
.feat:not(.rev) .stamps{justify-content:flex-start}
.stamps img{height:auto; filter:drop-shadow(0 8px 10px rgba(74,41,23,.15))}

/* room scene built from app assets */
.room{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:0; background:none; box-shadow:none; border:0}
.scene{position:relative; aspect-ratio:4/3.1; border-radius:36px; overflow:hidden; box-shadow:var(--shadow);
  background:url(/assets/art/room_wall.webp) center/cover}
.scene::after{content:""; position:absolute; left:0; right:0; bottom:0; height:22%; background:linear-gradient(#d9b48f,#c99d74); box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.scene img{position:absolute; z-index:1; filter:drop-shadow(0 10px 12px rgba(74,41,23,.22))}
.scene .win{top:9%; left:50%; transform:translateX(-50%); width:52%; filter:none}
.scene .on-win{top:24%; left:36%; width:11%}
.scene .on-win2{top:24.5%; left:55%; width:10%}
.scene .lamp{bottom:18%; right:6%; width:21%}
.scene .plant{bottom:17%; left:5%; width:17%}
.scene .sofa{bottom:13%; left:50%; transform:translateX(-50%); width:46%}
.scene .on-sofa{bottom:29%; left:36%; width:14%; z-index:2}
.scene .on-sofa2{bottom:29%; left:53%; width:11%; z-index:2}
.scene .floor{bottom:4%; left:21%; width:12%; z-index:2}
.room-txt p{font-size:18px}

/* grow */
.grow{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:48px}
.grow-art{display:flex; align-items:center; justify-content:center; gap:14px}
.grow-art figure{text-align:center}
.grow-art img{margin:0 auto; filter:drop-shadow(0 12px 14px rgba(74,41,23,.18))}
.grow-art figcaption{margin-top:8px; font-weight:700; color:var(--accent-strong); font-size:15px}
.arrow{width:70px; height:14px; border-radius:99px; flex:none;
  background:linear-gradient(90deg,#ff9aa8,#ffd27a,#9ee6a8,#8fc9ff,#b9a3ff); position:relative}
.arrow::after{content:""; position:absolute; right:-10px; top:-9px; border:16px solid transparent; border-left:20px solid #b9a3ff; border-right:0}

/* premium banner */
.banner{height:170px; border-radius:32px; background-size:cover; background-position:center; margin-bottom:40px;
  display:flex; align-items:flex-end; justify-content:center; box-shadow:var(--shadow)}
.banner img{width:140px; margin-bottom:-36px; filter:drop-shadow(0 12px 14px rgba(74,41,23,.25))}

/* teaser over painted meadow */
.teaser.meadow{background-size:cover; background-position:center; border-radius:36px; padding:64px 20px; box-shadow:var(--shadow)}
.teaser .inner{max-width:560px; margin:0 auto; padding:40px 24px; text-align:center; background:rgba(255,252,248,.92)}
.appicon{border-radius:22px; margin:0 auto 16px; box-shadow:0 10px 20px rgba(74,41,23,.2)}

@media (max-width:860px){
  .chips{grid-template-columns:repeat(3,1fr)}
  .room,.grow{grid-template-columns:1fr; text-align:center}
  .grow{padding:32px 20px}
  .grow-art img{max-width:120px}
  .stamps,.feat:not(.rev) .stamps{justify-content:center}
  .stamps img{max-width:70px}
  .hero-art{max-width:280px}
  .f1{width:84px; left:-36px} .f2{width:90px; left:-44px} .f3{width:74px; right:-34px} .f4{width:104px; right:-28px}
  .sky{height:560px}

  body{font-size:16px}
  section{margin:72px 0}
  .hero{grid-template-columns:1fr; gap:32px; text-align:center; margin-top:24px}
  .hero .lead{margin:0 auto}
  .hero .cta-row{justify-content:center}
  .hero-img{max-width:340px; margin:0 auto}
  .feat,.feat.rev{grid-template-columns:1fr; gap:24px; text-align:center}
  .feat.rev .shot{order:0}
  .shot{max-width:300px; margin:0 auto}
  .nav{gap:12px}
  .brand span{font-size:18px}
}
figure{margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}