/* 화면별 규칙(js/screens/ 와 대응). 색·간격·모서리는 base.css 의 :root 변수만 참조한다. */

/* 랜딩·로그인 필요 (screens/landing.js) */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--sat) + var(--sp-6)) var(--sp-6) calc(var(--sab) + var(--sp-7));isolation:isolate}
.hero .photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(15,18,22,.45),rgba(15,18,22,.05) 28%,rgba(15,18,22,.55) 55%,rgba(15,18,22,.97) 88%)}
.brand{font-family:var(--num);font-size:76px;line-height:.9;letter-spacing:.06em;text-shadow:0 4px 28px rgba(0,0,0,.45)}
.brand-sub{margin-top:10px;font-size:15px;color:var(--t1);letter-spacing:.14em}
.lead{margin:var(--sp-7) 0 var(--sp-6);font-size:22px;line-height:1.4;font-weight:700;text-wrap:balance;white-space:pre-line;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.login-actions{display:grid;gap:var(--sp-3)}
.login-error{margin:-8px 0 14px}

/* 상태 화면: 참가 대기·성공·실패, claim 오류, 닉네임, 404 (ui/status-screen.js) */
.status{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-6) var(--sp-7) calc(var(--sab) + var(--sp-7));position:relative;isolation:isolate}
.status::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 320px at 50% 38%,var(--glow,rgba(92,200,255,.14)),transparent 70%)}
.status.is-wait{--glow:rgba(92,200,255,.14)}
.status.is-seat{--glow:rgba(21,128,90,.30)}
.status.is-no{--glow:rgba(217,58,74,.22)}
.status.is-nickname{--glow:rgba(200,245,60,.08)}
.status h1{font-size:26px;text-wrap:balance}
.status p{margin:10px auto 0;color:var(--t1);max-width:300px;text-wrap:balance}
.status .actions{margin-top:var(--sp-8);width:100%;display:grid;gap:var(--sp-2)}
.badge{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;margin-bottom:30px;position:relative}
.badge svg{width:56px;height:56px}
.badge.wait{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hair)}
.badge.still::after{display:none}
.badge.wait::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge.no{background:var(--danger);box-shadow:var(--e2),0 0 60px rgba(217,58,74,.35);animation:pop .4s var(--ease)}
.seat-no{font:700 200px/.82 var(--num);margin:22px 0 var(--sp-7);text-shadow:0 8px 48px rgba(79,224,176,.35);animation:pop .45s var(--ease)}
.seat-no + h1{font-size:22px}

/* 닉네임 (screens/nickname.js) */
.nickname-box{width:100%;margin-top:var(--sp-7);padding:var(--sp-5);text-align:left}
.nickname-row{display:flex;gap:10px;margin-bottom:6px}
.nickname-row .field-input{flex:1;min-width:0;min-height:56px;background:rgba(15,18,22,.55);font-size:18px;font-weight:700}
.dice{width:56px;height:56px;border-radius:var(--r-md);background:rgba(255,255,255,.08);display:grid;place-items:center;box-shadow:inset 0 1px 0 var(--hair);transition:transform .2s var(--ease)}
.dice:active{transform:rotate(90deg) scale(.94)}
.nickname-box .err{margin:var(--sp-2) 2px var(--sp-3)}
.legal{margin-top:18px;max-width:280px;text-wrap:balance}
.legal a{text-decoration:underline}

/* 홈 코드 입력 패널 (index.html 정적 마크업 + screens/home.js) */
.code-panel{padding:var(--sp-7) var(--sp-5) 22px;position:relative;overflow:hidden}
.code-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 140px at 50% 0,rgba(200,245,60,.10),transparent 70%);pointer-events:none}
.code-panel h1{font-size:24px;text-align:center}
.code-panel .cap{text-align:center;margin:6px 0 22px}
.code-panel .err{text-align:center;margin:14px 0 0}
.code-cells{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.code-cells i{display:grid;place-items:center;height:76px;border-radius:14px;background:rgba(15,18,22,.55);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 0 0 1px var(--hair);
  font:700 44px/1 var(--num);font-style:normal;transition:.15s}
.code-cells i.on{box-shadow:inset 0 0 0 2px var(--lime),0 0 24px rgba(200,245,60,.18)}
.code-cells input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent}
.code-cells.bad{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* 기록실 */
.more{margin-top:6px}
.period-seg{margin:var(--sp-5) 0 var(--sp-1)}

/* 라운드 상세 머리 (screens/round-detail.js) */
.back svg{width:24px;height:24px}
.back{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:50%}
.detail-head{position:relative;margin:calc(-1 * (var(--sat) + var(--page-x))) calc(-1 * var(--page-x)) 0;padding:calc(var(--sat) + var(--sp-2)) var(--page-x) 22px;min-height:290px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.detail-head .photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.detail-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(15,18,22,.5),rgba(15,18,22,0) 40%,var(--s0) 98%)}
.detail-head .back{background:rgba(15,18,22,.45);backdrop-filter:blur(8px)}
.detail-head .row{display:flex;align-items:flex-end;justify-content:space-between}
.detail-head h1{font-size:26px}
.detail-head .to-par{font:700 88px/.8 var(--num);text-shadow:0 4px 24px rgba(0,0,0,.5)}

/* 내 정보 (screens/me.js) */
.profile-card{border-radius:var(--r-2xl);padding:26px var(--sp-5) 22px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--e2),inset 0 0 0 1px var(--hair)}
.profile-card .avatar{width:96px;height:96px;margin:0 auto 14px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.profile-card .nickname-form{display:flex;gap:var(--sp-2);max-width:280px;margin:0 auto}
.profile-card .field-input{flex:1;min-width:0;text-align:center;background:rgba(15,18,22,.5);backdrop-filter:blur(10px);font-weight:700;font-size:20px}
.profile-card .btn{width:auto;flex:none;padding:0 18px}
.profile-card .provider{margin-top:10px;font-size:13px;color:rgba(255,255,255,.7)}
.account-actions{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-8);padding-top:var(--sp-3);border-top:1px solid var(--hair)}
.account-actions .btn.txt{width:100%;justify-content:flex-start;padding:0}
.account-actions .danger-text{color:var(--danger-text)}

/* 게스트 기록 가져오기 (screens/claim.js) */
.claim{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--sat) + var(--sp-6)) var(--sp-6) calc(var(--sab) + var(--sp-7));position:relative;isolation:isolate}
.claim .photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.claim::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(15,18,22,.5),rgba(15,18,22,.1) 25%,rgba(15,18,22,.96) 70%)}
.claim .chip{align-self:flex-start}
.claim .to-par{font:700 120px/.8 var(--num);margin:18px 0 var(--sp-2);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.claim .actions{margin-top:var(--sp-7);display:grid;gap:var(--sp-2)}

/* 로그인·회원가입 페이지 (screens/login.js, signup.js) */
.auth-page{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--sat) + var(--sp-6)) var(--sp-6) calc(var(--sab) + 96px);isolation:isolate}
.auth-page .photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.auth-page::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(15,18,22,.55),rgba(15,18,22,.78) 40%,var(--s0) 82%)}
.auth-body h1{font-size:32px;margin-bottom:var(--sp-2)}
.auth-body .sub{margin-bottom:var(--sp-6)}
.auth-body .login-actions{margin-top:var(--sp-5)}
.benefits{list-style:none;padding:0;margin:var(--sp-3) 0 var(--sp-6);display:grid;gap:var(--sp-2);color:var(--t1)}
.benefits li{display:flex;gap:var(--sp-3);align-items:center}
.benefits li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok-text);flex:none}
.auth-switch{margin-top:var(--sp-5)}
.auth-switch a{color:var(--t0);font-weight:700;text-decoration:underline}

/* 가입 마무리 (screens/signup-finish.js) */
.finish .nickname-box{margin-top:var(--sp-6)}
.consent-row{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);cursor:pointer}
.consent-row input{position:absolute;opacity:0;pointer-events:none}
.consent-row i{width:24px;height:24px;border-radius:7px;flex:none;background:var(--field);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);display:grid;place-items:center;transition:.15s}
.consent-row input:checked + i{background:var(--ok);box-shadow:none}
.consent-row input:checked + i::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.consent-row input:focus-visible + i{outline:2px solid #fff;outline-offset:2px}
.consent-row span{flex:1;font-size:15px}
.consent-row span small{margin-left:var(--sp-2);font-size:12px;color:var(--t2)}
.consent-row.all{font-weight:700;border-bottom:1px solid var(--hair);margin-bottom:var(--sp-1)}
.consent-link{font-size:13px;color:var(--t1);text-decoration:underline;padding:var(--sp-2)}
.finish .btn{margin-top:var(--sp-2)}

/* 기록실 (screens/records.js) */
.records-body{margin-top:var(--sp-4)}
.records-seg{margin:var(--sp-5) 0 var(--sp-1)}
.sample{position:relative;margin-top:var(--sp-3)}
.sample-chip{position:absolute;top:0;right:0;z-index:2;background:var(--info);color:#fff}
.sample-body{opacity:.82;pointer-events:none;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.sample-body .round-card:first-child,.sample-body .practice:first-child{margin-top:var(--sp-5)}
.guest-note{margin-top:calc(-1 * var(--sp-6));position:relative;padding:var(--sp-6) var(--sp-5);display:grid;gap:var(--sp-3);text-align:center}
.guest-note b{font-size:17px;text-wrap:balance;margin-bottom:var(--sp-1)}

/* 연습 (ui/practice-card.js, screens/practice-detail.js) */
.round-card.practice::before{background:linear-gradient(rgba(42,116,200,.28),rgba(15,18,22,.35) 40%,var(--scrim-bottom))}
.round-card.practice .chip{background:var(--info);color:#fff;box-shadow:var(--e1)}
.hero-number{text-align:right;text-shadow:0 3px 18px rgba(0,0,0,.6)}
.hero-number b{display:block;font:700 56px/.85 var(--num)}
.hero-number b small{font-size:22px;margin-left:3px;color:var(--t1)}
.hero-number span{font-size:12px;color:var(--t1)}
.detail-head.practice::before{background:linear-gradient(rgba(42,116,200,.38),rgba(15,18,22,0) 45%,var(--s0) 98%)}
.detail-head.practice .hero-number b{font-size:72px}
.kick{display:grid;grid-template-columns:36px auto 1fr;gap:var(--sp-3);align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair)}
.kick i{font:700 18px var(--num);font-style:normal;color:var(--t2)}
.kick .dist{font:700 26px var(--num)}
.kick .dist small{font-size:14px;color:var(--t2)}
.kick span{font-size:13px;color:var(--t2);text-align:right}

/* 참가 흐름 보조 (screens/join.js, join-code.js, ui/login-buttons.js) */
.status-note{margin-top:var(--sp-3);font-size:14px;color:var(--t2)}
.status .actions .cap{margin-top:var(--sp-1)}
.status .actions .login-actions{display:grid;gap:var(--sp-3)}
.recovery{margin-bottom:var(--sp-2)}
.recovery .cap{margin-bottom:var(--sp-3)}
.recovery .err,.join-code .err{text-align:center;margin-top:var(--sp-3)}
.join-code .code-panel{width:100%;margin-top:var(--sp-6);padding:var(--sp-6) var(--sp-5) var(--sp-4)}
.in-app-note{display:grid;gap:var(--sp-2);padding:var(--sp-4);border-radius:var(--r-md);background:var(--field);box-shadow:inset 0 0 0 1px var(--hair)}
.in-app-note .btn{min-height:var(--tap)}