/* MUAMUAE 랜딩 (260928) — 콘솔과 같은 캐비닛 조명 위에, 스크롤되는 문서형 화면.
   값은 base.css 토큰만 쓴다. 배치만 여기서 한다. */

html{scroll-behavior:smooth;}
html,body{min-height:100%;}
body.landing{
  margin:0; background:var(--baize-2); color:var(--ink);
  font-family:var(--ff-body); font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.backdrop{position:fixed; inset:0; z-index:-1; pointer-events:none; isolation:isolate;}

/* ── 상단 레일: 콘솔과 같은 높이·선 ─────────────────────────── */
.rail{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:18px; padding:0 30px; height:62px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(6,18,16,.92), rgba(6,18,16,.78));
  backdrop-filter:blur(6px);
}
.rail::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.85), transparent);
}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:inherit;}
.brand__mark{color:var(--brass-2); font-size:15px; transform:translateY(-1px);}
.brand__name{font-family:var(--ff-display); font-variation-settings:"wght" 700,"wdth" 75; font-size:23px; letter-spacing:.16em;}
.brand__sub{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.34em; color:var(--brass); text-transform:uppercase;}
.rail__right{margin-left:auto; display:flex; align-items:center; gap:10px;}

.wrap{max-width:1120px; margin:0 auto; padding:0 30px 80px;}

/* ── 히어로: 왼쪽 문안 · 오른쪽 로그인 카드 ──────────────────── */
.hero{
  display:grid; grid-template-columns:minmax(0,1.15fr) 380px; grid-template-rows:auto 1fr;
  grid-template-areas:"copy auth" "steps auth"; gap:22px 40px; align-items:start;
  padding:64px 0 48px; min-height:calc(100vh - 62px);
}
.hero__copy{grid-area:copy;}
.hero__steps{grid-area:steps;}
.auth{grid-area:auth;}
.hero__title{
  margin:6px 0 10px; font-family:var(--ff-display); font-variation-settings:"wght" 700,"wdth" 78;
  font-size:clamp(44px, 7vw, 84px); letter-spacing:.08em; line-height:1;
  background:linear-gradient(180deg, var(--ink) 0%, var(--brass-2) 130%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{font-size:16.5px; color:var(--ink-2); margin:0 0 22px; max-width:56ch;}
.hero__lead kbd.btn{vertical-align:middle;}
.btn--a{border-color:rgba(88,214,141,.5); color:var(--ok);}

.steps{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px; max-width:560px;}
.steps li{
  display:grid; grid-template-columns:30px 1fr; gap:2px 12px; align-items:baseline;
  padding:10px 14px; border:1px solid var(--line-soft); border-radius:12px; background:rgba(0,0,0,.18);
}
.steps li b{
  grid-row:span 2; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  font-family:var(--ff-mono); font-size:12px; color:#0a1512; background:var(--brass-2);
}
.steps li span{font-family:var(--ff-display); font-size:15px; letter-spacing:.02em;}
.steps li small{color:var(--muted); font-size:12px;}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap;}
.note--need{margin-top:18px; max-width:560px;}

.auth{
  position:sticky; top:84px; padding:20px 22px;
  background:linear-gradient(180deg, rgba(18,51,44,.9), rgba(11,28,25,.94));
  box-shadow:var(--shadow-card); border-color:var(--line);
}
.auth__tabs{display:flex; margin-bottom:14px;}
.auth__tabs .seg__btn{flex:1;}
.auth__h{margin:0 0 12px; font-family:var(--ff-display); font-size:20px; letter-spacing:.02em;}
.auth__submit{width:100%; margin-top:6px;}
.auth__foot{margin:12px 0 0; line-height:1.5;}

/* ── 절 공통 ──────────────────────────────────────────────── */
.sec{padding:40px 0 8px; border-top:1px solid var(--line-soft);}
.sec__head{margin-bottom:18px;}
.sec__head h2{margin:2px 0 4px; font-family:var(--ff-display); font-variation-settings:"wght" 700,"wdth" 82; font-size:28px; letter-spacing:.02em;}
.sec__sub{margin:0; color:var(--muted); font-size:13px;}

/* 게임 카드: 콘솔 타일과 같은 색 규칙(--tile-rgb) · 같은 둥글기 · 같은 마크 */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px;}
.gcard{
  position:relative; display:block; text-decoration:none; color:inherit; overflow:hidden;
  border-radius:20px; padding:22px 18px 18px; min-height:196px;
  background:linear-gradient(165deg, rgba(var(--tile-rgb),.30), rgba(var(--tile-rgb),.05) 52%, rgba(0,0,0,.34)), var(--baize);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 26px -14px rgba(0,0,0,.9);
  transition:transform var(--t-mid) var(--ease-pop), box-shadow var(--t-mid) var(--ease-settle), filter var(--t-mid);
  filter:saturate(.7) brightness(.9);
  animation:cardIn var(--t-slow) var(--ease-pop) both; animation-delay:calc(var(--i, 0) * 70ms);
}
@keyframes cardIn{from{opacity:0; transform:translateY(22px) scale(.94);} to{opacity:1;}}
.gcard:hover,.gcard:focus-visible{
  transform:translateY(-8px) scale(1.03); filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 2px rgb(var(--tile-rgb)), 0 0 0 5px rgba(var(--tile-rgb),.20),
    0 26px 50px -18px rgba(0,0,0,.95), 0 0 60px -14px rgba(var(--tile-rgb),.55);
}
.gcard__mark{color:rgb(var(--tile-rgb)); width:56px; height:56px; margin-bottom:10px;}
.gcard__mark svg{width:100%; height:100%; display:block;}
.gcard__name{font-family:var(--ff-display); font-variation-settings:"wght" 600,"wdth" 85; font-size:20px; letter-spacing:.04em;}
.gcard__sub{font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; margin-top:2px;}
.gcard__tag{margin:10px 0 0; color:var(--ink-2); font-size:12.5px; line-height:1.5;}
.gcard__bucket{margin:var(--sp-2) 0 0; color:var(--brass-2);}
.gcard__badge{
  position:absolute; top:12px; right:12px; padding:2px 9px; border-radius:var(--r-pill);
  font-family:var(--ff-mono); font-size:8.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#0a1512; background:var(--warn);
}
.gcard[data-status="wip"]{filter:saturate(.3) brightness(.7);}

/* 분류 방식 */
.schemes{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px;}
.scheme{padding:14px 16px;}
.scheme__h{margin:0; font-family:var(--ff-display); font-size:16px;}
.scheme__q{margin:4px 0 10px; color:var(--muted); font-size:12.5px;}
.scheme__cats{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none;}
.scheme__cats li{font-size:11.5px; color:var(--ink-2); border:1px solid var(--line-soft); border-radius:var(--r-pill); padding:2px 9px;}
.scheme__cats li b{color:var(--brass-2); font-weight:600; margin-left:5px;}

/* 요금제 */
.plans{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px;}
.plan{padding:20px 22px; border-top:3px solid var(--faint);}
.plan[data-plan="free"]{border-top-color:var(--muted);}
.plan[data-plan="member"]{border-top-color:var(--brass);}
.plan[data-plan="unlimited"]{border-top-color:var(--live);}
.plan__h{margin:0; font-family:var(--ff-display); font-size:22px; letter-spacing:.04em;}
.plan__n{display:block; margin:8px 0 2px; font-family:var(--ff-display); font-size:34px; line-height:1;}
.plan__n small{font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; color:var(--muted); margin-left:6px;}
.plan__blurb{margin:0; color:var(--ink-2); font-size:13px;}
.plan__how{margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.5;}

.foot{
  max-width:1120px; margin:0 auto; padding:18px 30px 40px; display:flex; gap:18px; flex-wrap:wrap;
  color:var(--faint); font-size:12px; border-top:1px solid var(--line-soft);
}
.foot a{color:var(--muted); text-decoration:none;} .foot a:hover{color:var(--brass-2);}

@media (max-width:900px){
  .rail{padding:0 16px; height:auto; min-height:62px; flex-wrap:wrap; row-gap:6px; padding-top:8px; padding-bottom:8px;}
  .brand__sub{display:none;}
  .wrap{padding:0 16px 60px;}
  .hero{grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"copy" "auth" "steps"; gap:var(--sp-4); padding:var(--sp-2) 0 var(--sp-5); min-height:0;}
  .hero__lead{margin-bottom:var(--sp-2);}
  .note--need{margin:var(--sp-2) 0 0;}
  .auth{position:static;}
  .hero__cta{display:none;}                     /* 카드가 바로 아래라 CTA 가 중복이다 */
  .rail__right .chip{display:none;}
}
@media (max-width:430px){
  .brand__name{font-size:19px; letter-spacing:.08em;}
  .hero__title{font-size:44px;}
  .steps li{grid-template-columns:26px 1fr;}
}