/* UpsyCat site: soft clay colours, system fonts only (no web fonts, no CDN). */
:root { --bg:#FDF1E7; --ink:#4A3F3A; --sub:#7A6B63; --card:#FFFFFF; --line:#EADBCF; --accent:#EF8F7E; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Apple SD Gothic Neo", "Hiragino Sans", "Segoe UI", "Noto Sans KR", sans-serif; }
a { color:inherit; }
.wrap { max-width:880px; margin:0 auto; padding:0 22px; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
header.top .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; text-decoration:none; }
header.top .brand img { width:36px; height:36px; border-radius:9px; }
.langs a { font-size:14px; color:var(--sub); text-decoration:none; margin-left:12px; }
.langs a.on { color:var(--ink); font-weight:700; }
[lang="ko"].page, [lang="en"].page { display:none; }
.page.show { display:block; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; padding:24px 0 36px; }
.hero h1 { font-size:46px; line-height:1.1; margin:0 0 10px; letter-spacing:-0.5px; }
.hero p.lead { font-size:20px; color:var(--sub); margin:0 0 22px; }
.hero img.still { width:100%; border-radius:22px; box-shadow:0 8px 24px rgba(74,63,58,.12); }
.badge { display:inline-block; padding:12px 20px; border-radius:999px; background:var(--ink); color:var(--bg); font-weight:700; text-decoration:none; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; margin:8px 0 36px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 18px 16px; }
.card h3 { margin:0 0 6px; font-size:18px; }
.card p { margin:0; color:var(--sub); font-size:15px; }
h2 { font-size:26px; margin:30px 0 12px; }
.skins { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; margin-bottom:40px; }
.skins figure { margin:0; text-align:center; font-size:14px; color:var(--sub); }
.skins img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:14px; border:1px solid var(--line); background:#fff; }
.doc { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:8px 26px 20px; margin:10px 0 36px; }
.doc h1 { font-size:30px; margin:20px 0 4px; }
.doc .date { color:var(--sub); font-size:14px; margin:0 0 16px; }
.doc h2 { font-size:20px; margin:26px 0 8px; }
.doc table { width:100%; border-collapse:collapse; font-size:15px; margin:8px 0; }
.doc th, .doc td { text-align:left; vertical-align:top; border-top:1px solid var(--line); padding:9px 8px; }
.doc th { font-size:13px; color:var(--sub); font-weight:600; }
.doc ul { padding-left:20px; }
.faq dt { font-weight:700; margin-top:16px; }
.faq dd { margin:4px 0 0; color:var(--sub); }
footer { border-top:1px solid var(--line); padding:20px 0 40px; font-size:14px; color:var(--sub); }
footer a { margin-right:14px; }
@media (max-width:680px) {
  .hero { grid-template-columns:1fr; }
  .hero h1 { font-size:38px; }
  .doc { padding:6px 16px 16px; }
  .doc table, .doc tbody, .doc tr, .doc td, .doc th { display:block; }
  .doc thead { display:none; }
  .doc td { border-top:none; padding:2px 0; }
  .doc tr { border-top:1px solid var(--line); padding:8px 0; }
}
[lang="ko"] { word-break: keep-all; }

/* Main page: a game promo — the trailer in a phone, a strip of screens, then one scene clip per feature. */
.home { background: linear-gradient(180deg, #CFE6F5 0, #FDE3CF 900px, #FDF1E7 1500px); }
.home .wrap { max-width:1080px; }
.home header.top { padding:22px 22px 6px; }
.stage { display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; padding-top:22px; padding-bottom:54px; }
.stage .appicon { width:88px; height:88px; border-radius:21px; box-shadow:0 6px 18px rgba(74,63,58,.18); }
.stage h1 { font-size:60px; line-height:1.05; margin:20px 0 14px; letter-spacing:-1px; text-wrap:balance; }
.stage p.lead { font-size:21px; color:var(--sub); margin:0 0 26px; max-width:30em; }
.phone { justify-self:center; width:min(340px, 80vw); aspect-ratio:1320 / 2868; border-radius:50px; padding:11px;
  background:#2B2522; box-shadow:0 26px 60px rgba(74,63,58,.30), inset 0 0 0 2px #4A3F3A; }
.phone video { display:block; width:100%; height:100%; object-fit:cover; border-radius:40px; background:#FDE3CF; }
.strip { overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 0 30px; }
.strip-in { display:flex; gap:18px; width:max-content; margin:0 auto; padding:0 22px; }
.strip img { width:min(230px, 60vw); aspect-ratio:1320/2868; border-radius:22px; scroll-snap-align:center;
  box-shadow:0 12px 28px rgba(74,63,58,.16); background:#fff; }
.home h2 { font-size:34px; letter-spacing:-0.4px; margin:44px 0 20px; text-align:center; }
.scenes { display:grid; gap:22px; }
.scene { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; padding:38px 56px; border-radius:30px; }
.scene.flip { grid-template-columns:1fr auto; }
.scene.flip .phone { order:2; }
.scene .phone { width:250px; border-radius:40px; padding:9px; }
.scene .phone video { border-radius:32px; }
.scene .num { display:block; font-size:15px; font-weight:800; letter-spacing:1px; opacity:.55; margin-bottom:6px; }
.scene h3 { font-size:36px; line-height:1.15; margin:0 0 12px; letter-spacing:-0.5px; text-wrap:balance; }
.scene p { font-size:19px; margin:0; max-width:24em; opacity:.85; }
.scene.plain { grid-template-columns:1fr; text-align:center; padding:44px 56px; }
.scene.plain p { margin:0 auto; }
.scene.dusk { background:linear-gradient(150deg, #F6D3D6, #DCCFF1); }
.scene.dawn { background:linear-gradient(150deg, #FCE8C6, #F3C9C2 45%, #C9C4EC); }
.scene.night { background:linear-gradient(150deg, #2D3374, #171B45); color:#F6F1FF; }
.scene.lilac { background:linear-gradient(150deg, #E2DEF6, #FBE9DD); }
.scene.board { background:#FFFFFF; border:1px solid var(--line); }
.scene.day { background:linear-gradient(150deg, #D3EAFA, #FCEFE3); }
.home .skins { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
@media (max-width:820px) {
  .stage { grid-template-columns:1fr; gap:28px; padding-top:6px; }
  .stage h1 { font-size:40px; }
  .phone { width:min(300px, 78vw); }
  .home h2 { font-size:28px; }
  .scene, .scene.flip { grid-template-columns:1fr; gap:24px; padding:28px 22px 30px; text-align:center; justify-items:center; }
  .scene .phone, .scene.flip .phone { order:2; width:min(240px, 64vw); }
  .scene h3 { font-size:28px; }
  .scene p { font-size:17px; margin:0 auto; }
}