/* 정적 페이지(소개·가이드·약관·처리방침) 전용. 토큰은 base.css 변수만 참조.
   넓은 화면(≥900px)은 구획마다 그 규칙 바로 아래 @media 로 둔다. 앱 화면(기록실·내 정보·참가 흐름)은 넓은 화면에서도 가운데 좁은 폭 그대로. */

/* 노출 규칙 */
#intro{display:none}
html[data-page=home] #intro{display:block}
html.authed .guest-only{display:none}
html:not(.authed) .member-only{display:none}

/* 공통 */
.i-sec,.page{padding-left:var(--page-x);padding-right:var(--page-x)}
.i-h{font-size:28px;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--t0);margin:0 0 var(--sp-3)}
.i-p{color:var(--t1);font-size:16px;line-height:1.7}
.i-p+.i-p{margin-top:var(--sp-2)}
.fig{position:relative;overflow:hidden;border-radius:var(--r-2xl);isolation:isolate;box-shadow:var(--e2),inset 0 0 0 1px var(--hair)}
.fig>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fig::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(15,18,22,0) 35%,rgba(15,18,22,.92))}
.site-foot{padding:var(--sp-8) var(--page-x) calc(var(--sab) + var(--sp-6));text-align:center;color:var(--t2);font-size:13px;line-height:1.8}
.site-foot nav{display:flex;justify-content:center;gap:var(--sp-5);margin-bottom:var(--sp-2)}
.site-foot a{color:var(--t1);display:inline-flex;align-items:center;min-height:var(--tap)}

/* 넓은 화면 공통: 소개 사이트 역할을 하는 페이지(홈·가이드·약관·처리방침·로그인·회원가입)만 휴대폰 카드 틀을 벗고 화면 폭을 쓴다 */
@media(min-width:900px){
  html[data-page=home] body{padding:0}
  body:has(.page,.auth-page){padding-bottom:0}
  html[data-page=home] #app,#app:has(.page,.auth-page){max-width:none;min-height:100dvh;border-radius:0;box-shadow:none;background:none;overflow:visible}
  html[data-page=home] #app,#app:has(.page,.auth-page){--site-x:max(var(--page-x),calc((100% - 1120px) / 2))}
  .site-foot{padding-top:var(--sp-8)}
  .i-h{font-size:40px;margin-bottom:var(--sp-5)}
  .i-p{font-size:18px;max-width:30em}
}

/* A-1 히어로 */
.i-hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;
  padding:calc(var(--sat) + var(--sp-6)) var(--page-x) calc(var(--sab) + 84px)}
.i-hero .photo{position:absolute;inset:0;z-index:-2;background:var(--s0) url(/img/hero.jpg) center/cover}
.i-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(15,18,22,.5),rgba(15,18,22,.05) 26%,rgba(15,18,22,.6) 52%,rgba(15,18,22,.97) 86%)}
.i-brand{margin:0;line-height:0;filter:drop-shadow(0 4px 28px rgba(0,0,0,.45))}
.i-brand img{display:block;width:240px;height:auto}
.head-logo{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-5);width:max-content}
.head-logo img:first-child{width:28px;height:28px}
.head-logo img:last-child{width:84px;height:auto}
.i-line{margin:var(--sp-4) 0 var(--sp-5);font-size:19px;line-height:1.45;font-weight:700}
.i-hero .code-panel{margin:0}
.i-hero .code-title{text-align:center;font-size:17px;color:var(--t0);letter-spacing:0;margin:0 0 2px}
.i-links{display:flex;justify-content:center;flex-wrap:wrap;column-gap:var(--sp-5);margin-top:var(--sp-2)}
.i-links a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--t1);font-size:15px}
.i-links a.u{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
.i-hint{margin-top:var(--sp-1);text-align:center;color:var(--t2);font-size:12px;letter-spacing:.08em;pointer-events:none}
.i-hint::after{content:"";display:block;width:8px;height:8px;margin:6px auto 0;border:solid var(--t2);border-width:0 2px 2px 0;transform:rotate(45deg);animation:hint 1.8s var(--ease) infinite}
@keyframes hint{50%{transform:translateY(4px) rotate(45deg)}}
@media(min-width:900px){
  .i-hero{align-items:flex-start;padding:calc(72px + var(--sp-8)) var(--site-x) var(--sp-8)}
  .i-hero::before{background:linear-gradient(90deg,rgba(15,18,22,.82),rgba(15,18,22,.35) 48%,rgba(15,18,22,0) 75%),linear-gradient(rgba(15,18,22,0) 55%,rgba(15,18,22,.9))}
  .i-brand img{width:340px}
  .head-logo{display:none}
  .i-line{max-width:520px;margin:var(--sp-5) 0 var(--sp-6);font-size:26px;line-height:1.4;text-wrap:balance}
  .i-hero .btn{width:320px}
  .i-hero .code-panel{width:380px}
  .i-links{justify-content:flex-start}
  .i-hint{display:none}
}

/* A-2 KICKOO 가 뭐예요 */
.i-what{padding-top:var(--sp-8)}
.i-what .fig{margin-top:var(--sp-6);aspect-ratio:16/10}
.i-what .fig::before{background:linear-gradient(rgba(15,18,22,0) 70%,rgba(15,18,22,.5))}
@media(min-width:900px){
  .i-what{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-8) 72px;align-items:center;padding:120px var(--site-x) 0}
  .i-what .fig{margin-top:0}
}

/* A-3 이렇게 해요 */
.i-steps{padding:var(--sp-8) 0 0}
.i-steps .i-h{padding:0 var(--page-x)}
.steps{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--sp-3) var(--page-x) var(--sp-4);scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{flex:0 0 76%;scroll-snap-align:center;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-5)}
.step::before{background:linear-gradient(rgba(15,18,22,0) 25%,rgba(15,18,22,.95))}
.step .n{font:700 72px/.9 var(--num);color:var(--t0);text-shadow:0 2px 20px rgba(0,0,0,.4)}
.step p{margin-top:var(--sp-2);font-size:18px;font-weight:700;line-height:1.4}
@media(min-width:900px){
  .i-steps{padding:120px var(--site-x) 0}
  .i-steps .i-h{padding:0}
  .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);overflow:visible;padding:var(--sp-3) 0 0}
  .step{aspect-ratio:4/5}
  .step p{font-size:20px}
}

/* A-4 기록이 남아요 */
.i-rec{padding-top:var(--sp-8)}
.i-rec .i-h,.i-rec .i-p{padding:0 var(--page-x)}
.rec{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--sp-6) var(--page-x) var(--sp-4);scrollbar-width:none}
.rec::-webkit-scrollbar{display:none}
.rec figure{flex:0 0 78%;scroll-snap-align:center;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--e2),0 0 0 1px var(--hair);background:var(--s1)}
.rec img{display:block;width:100%;height:auto}
@media(min-width:900px){
  .i-rec{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"shots text";gap:72px;align-items:center;padding:120px var(--site-x) 0}
  .i-rec .i-text{grid-area:text}
  .i-rec .i-h,.i-rec .i-p{padding:0}
  .rec{grid-area:shots;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);align-items:center;overflow:visible;padding:0}
}

/* A-5 마지막 CTA */
.i-end{padding-top:var(--sp-8);text-align:center}
.i-end .i-h{margin-bottom:var(--sp-6)}
.i-end .btn{max-width:360px;margin:0 auto}
@media(min-width:900px){
  .i-end{padding-top:140px}
  .i-end .i-h{margin-bottom:var(--sp-7)}
}

/* 정적 페이지 공통 */
.page{padding-top:calc(var(--sat) + var(--sp-8));padding-bottom:var(--sp-7)}
.page h1{font-size:32px;margin-bottom:var(--sp-2)}
.page .lead{color:var(--t1);font-size:16px;line-height:1.6}
.page h2{font-size:20px;color:var(--t0);letter-spacing:-.01em;margin:var(--sp-8) 0 var(--sp-3)}
.draft{display:inline-block;margin-bottom:var(--sp-4);padding:4px 12px;border-radius:var(--r-pill);background:var(--s3);color:var(--t1);font-size:13px;font-weight:700}
@media(min-width:900px){
  .page{width:100%;max-width:calc(720px + 2 * var(--page-x));margin:0 auto;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
  .page h1{font-size:40px}
  .page .lead{font-size:18px}
}

/* 약관·처리방침 본문 */
.doc p,.doc li,.doc dd{color:var(--t1);font-size:16px;line-height:1.8}
.doc p+p{margin-top:var(--sp-3)}
.doc ul{padding-left:20px}
.doc li+li{margin-top:var(--sp-2)}
.doc dl{display:grid;gap:var(--sp-3)}
.doc .row{padding:var(--sp-4);border-radius:var(--r-lg);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.doc dt{color:var(--t0);font-weight:700;font-size:16px}
.doc dd{margin-top:2px}
.doc .todo{color:var(--warn);font-weight:700}
.doc h2{padding-top:var(--sp-5);border-top:1px solid var(--hair);margin-top:var(--sp-7)}
.doc h2:first-of-type{border:0;padding:0;margin-top:var(--sp-6)}

/* 게임 방법 */
.g-sec{margin-top:var(--sp-8)}
.g-sec h2{margin-top:0}
.g-fig{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-5)}
.g-fig .tag{font:700 13px var(--font);color:var(--t1);letter-spacing:.04em}
.g-fig .big{font:700 64px/1 var(--num);margin:var(--sp-1) 0}
.g-fig .big small{font-size:28px;margin-left:4px}
.g-fig p{font-size:17px;font-weight:700;line-height:1.45}
.g-txt{margin-top:var(--sp-4);color:var(--t1);line-height:1.75}
.g-txt li{margin-left:20px}
.g-txt li+li{margin-top:var(--sp-2)}
.tees{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);list-style:none;padding:0}
.tees li{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-md);background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);margin:0}
.tees li+li{margin-top:0}
.tees i{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.tees b{width:56px;color:var(--t0)}
.tees span{color:var(--t1);font-size:14px}
.sc-list{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.sc-list>div{display:flex;align-items:center;gap:var(--sp-4);min-height:56px;padding:0 var(--sp-4);border-radius:var(--r-md);background:var(--s1)}
.sc-list .score{flex:none;width:36px;height:36px;font-size:22px}
.sc-list b{color:var(--t0);width:56px}
.sc-list span{color:var(--t1);font-size:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-4)}
.pair>div{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-xl)}
.pair .big{font:700 48px/1 var(--num);color:var(--t0)}
.pair .big small{font-size:22px;margin-left:2px}
.pair b{display:block;margin-top:var(--sp-3);color:var(--t0)}
.pair p{margin-top:var(--sp-1);font-size:14px;line-height:1.6;color:var(--t1)}
.g-sec details{border-bottom:1px solid var(--hair)}
.g-sec summary{display:flex;align-items:center;min-height:var(--tap);font-weight:700;cursor:pointer;list-style:none}
.g-sec summary::-webkit-details-marker{display:none}
.g-sec details p{padding-bottom:var(--sp-4);color:var(--t1);line-height:1.7}
.g-cta{margin-top:var(--sp-8);text-align:center}
@media(min-width:900px){
  .g-sec{margin-top:72px}
  .g-fig{aspect-ratio:4/3}
}

/* 로그인·회원가입 (screens/login.js, signup.js 가 그리는 .auth-page): 풀블리드 사진 + 왼쪽 글래스 패널 */
@media(min-width:900px){
  .auth-page{min-height:calc(100dvh - 72px);justify-content:center;align-items:flex-start;padding:var(--sp-8) var(--site-x)}
  .auth-page::before{background:linear-gradient(90deg,rgba(15,18,22,.78),rgba(15,18,22,.2) 70%),linear-gradient(rgba(15,18,22,0) 60%,rgba(15,18,22,.7))}
  .auth-body{width:100%;max-width:420px;padding:var(--sp-8);border-radius:var(--r-2xl);background:var(--glass);
    backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--e2),inset 0 1px 0 var(--hair)}
}