:root { --auth-gold:#d7a840; --auth-gold-light:#ffe49b; --auth-ink:#080706; --auth-muted:#b4aa99; }
html,body.auth-page { width:100%; min-height:100%; margin:0; background:#050505; color:#fff; font-family:system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif; }
body.auth-page { overflow:hidden; }
.auth-page *,.auth-page *::before,.auth-page *::after { box-sizing:border-box; }
.auth-page .game-bg,.auth-page .main-shell { width:100%; height:100%; min-height:100%; max-width:none; margin:0; padding:0; background:transparent; }
.auth-stage { position:relative; width:100vw; height:100dvh; min-height:620px; overflow:hidden; isolation:isolate; background:url('/images/auth-billiards-lounge.png') center/cover no-repeat; }
.auth-stage::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 43%,rgba(0,0,0,.35) 65%,rgba(0,0,0,.82) 100%),linear-gradient(0deg,rgba(0,0,0,.52),transparent 48%); }
.auth-stage::after { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border:1px solid rgba(222,170,67,.28); box-shadow:inset 0 0 100px rgba(0,0,0,.7); }
.auth-brand { position:absolute; top:clamp(24px,4vw,58px); left:clamp(26px,5vw,82px); display:flex; align-items:center; gap:15px; color:#fff; text-shadow:0 3px 18px #000; }
.auth-brand-mark { position:relative; width:48px; height:48px; display:block; transform:rotate(45deg); border:2px solid var(--auth-gold); box-shadow:0 0 20px rgba(217,169,63,.35); }
.auth-brand-mark::before { content:""; position:absolute; inset:11px; border:2px solid var(--auth-gold-light); border-radius:50%; }
.auth-brand-mark i { position:absolute; top:22px; left:7px; width:30px; height:2px; background:var(--auth-gold-light); transform:rotate(-45deg); }
.auth-brand div { display:flex; flex-direction:column; gap:3px; }
.auth-brand strong { color:#f6d67b; font-family:Georgia,serif; font-size:22px; letter-spacing:.16em; }
.auth-brand strong { position:relative; animation:authBrandGlow 3.4s ease-in-out infinite; }
.auth-brand strong::after { content:""; position:absolute; top:-3px; right:-10px; width:4px; height:4px; border-radius:50%; background:#fff2b3; box-shadow:0 0 7px 2px #e8b947; opacity:0; animation:authBrandSpark 3.4s ease-in-out infinite; }
.auth-brand-mark { animation:authMarkGlow 3.4s ease-in-out infinite .35s; }
@keyframes authBrandGlow { 0%,100%{color:#d8ad4b;text-shadow:0 3px 18px #000,0 0 6px rgba(255,210,105,.18)} 48%{color:#fff0b0;text-shadow:0 3px 18px #000,0 0 10px rgba(255,226,145,.72),0 0 27px rgba(215,168,64,.42)} 58%{color:#e5bb59;text-shadow:0 3px 18px #000,0 0 8px rgba(255,210,105,.3)} }
@keyframes authBrandSpark { 0%,35%,68%,100%{opacity:0;transform:scale(.3)} 48%{opacity:1;transform:scale(1.35)} 56%{opacity:.25;transform:scale(.65)} }
@keyframes authMarkGlow { 0%,100%{border-color:#b98a2e;box-shadow:0 0 11px rgba(217,169,63,.22)} 50%{border-color:#ffe69a;box-shadow:0 0 22px rgba(255,216,109,.7),inset 0 0 12px rgba(215,168,64,.17)} }
.auth-brand small { color:rgba(255,255,255,.62); font-size:8px; font-weight:800; letter-spacing:.34em; }
.auth-panel { position:absolute; top:50%; right:clamp(28px,6vw,112px); width:min(430px,calc(100vw - 40px)); max-height:calc(100dvh - 56px); padding:clamp(28px,4vh,46px); overflow:auto; transform:translateY(-50%); border:1px solid rgba(223,178,81,.47); background:linear-gradient(145deg,rgba(10,9,8,.94),rgba(22,18,13,.91)); box-shadow:0 28px 80px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,230,166,.05); backdrop-filter:blur(12px); scrollbar-width:none; }
.auth-panel::-webkit-scrollbar { display:none; }
.auth-panel::before,.auth-panel::after { content:""; position:absolute; width:42px; height:42px; pointer-events:none; }
.auth-panel::before { top:10px; left:10px; border-top:1px solid var(--auth-gold); border-left:1px solid var(--auth-gold); }
.auth-panel::after { right:10px; bottom:10px; border-right:1px solid var(--auth-gold); border-bottom:1px solid var(--auth-gold); }
.auth-panel-header>span { display:block; margin-bottom:13px; color:var(--auth-gold); font-size:9px; font-weight:900; letter-spacing:.36em; }
.auth-panel-header h1 { margin:0; font-family:Georgia,"Times New Roman",serif; color:#fffaf0; font-size:clamp(32px,4vh,46px); line-height:1.12; letter-spacing:-.035em; }
.auth-panel-header p { margin:12px 0 24px; color:var(--auth-muted); font-size:12px; font-weight:650; }
.auth-form { display:flex; flex-direction:column; gap:13px; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { position:relative; width:max-content; padding-left:12px; color:#d6c5a8; font-size:10px; font-weight:800; letter-spacing:.08em; }
.auth-field label::before { content:""; position:absolute; left:0; top:50%; width:5px; height:5px; transform:translateY(-50%) rotate(45deg); border:1px solid #d7a840; box-shadow:0 0 6px rgba(215,168,64,.45); }
.auth-field input { width:100%; height:48px; padding:0 16px; border:1px solid rgba(215,168,64,.34); border-radius:7px; outline:0; background:linear-gradient(115deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); color:#fff; box-shadow:inset 0 1px rgba(255,232,172,.07),inset 3px 0 rgba(215,168,64,.18),0 8px 24px rgba(0,0,0,.18); font-size:13px; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; }
.auth-field input::placeholder { color:#706a60; }
.auth-field input:focus { border-color:#edc764; background:linear-gradient(115deg,rgba(215,168,64,.13),rgba(255,255,255,.045)); box-shadow:0 0 0 2px rgba(215,168,64,.1),0 0 20px rgba(215,168,64,.12),inset 3px 0 #e5b94f,inset 0 1px rgba(255,239,190,.13); transform:translateY(-1px); }
.auth-field .auth-masked-input{-webkit-text-security:disc}
.auth-save-row { display:flex; align-items:center; gap:8px; min-height:24px; color:#aaa093; font-size:10px; font-weight:700; user-select:none; }
.auth-save-row input { width:15px; height:15px; accent-color:var(--auth-gold); }
.auth-save-row small { margin-left:5px; color:#766f64; font-size:8px; font-weight:650; }
.auth-primary-button { position:relative; width:100%; height:52px; margin-top:2px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; border:1px solid #f3cd6c; border-radius:2px; background:linear-gradient(110deg,#8e641c,#d7a840 55%,#9c6f20); color:#120e08; box-shadow:0 8px 24px rgba(184,126,25,.22); font-size:14px; font-weight:950; cursor:pointer; }
.auth-primary-button::before { content:""; position:absolute; top:-100%; left:-40%; width:30%; height:300%; transform:rotate(28deg); background:rgba(255,255,255,.32); transition:left .35s ease; }
.auth-primary-button:hover::before { left:115%; }
.auth-primary-button i { font-size:8px; font-style:normal; letter-spacing:.28em; }
.auth-message { padding:9px 11px; border:1px solid #9e4e35; background:rgba(120,40,25,.25); color:#ffd2bd; font-size:11px; font-weight:800; text-align:center; }
.auth-social-divider { display:flex; align-items:center; gap:10px; color:#8e8577; font-size:9px; font-weight:800; }
.auth-social-divider::before,.auth-social-divider::after { content:""; height:1px; flex:1; background:rgba(215,168,64,.18); }
.auth-social-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.auth-social { min-height:44px; padding:6px 8px; display:grid; grid-template-columns:24px 1fr; align-items:center; border:1px solid rgba(255,255,255,.14); border-radius:2px; color:#242018; text-decoration:none; font-size:9px; font-weight:900; }
.auth-social b { grid-row:1/3; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; font-size:11px; }
.auth-social small { font-size:7px; opacity:.63; }.auth-social.kakao{background:#fee500}.auth-social.google{background:#fff}.auth-social.google b{color:#4285f4;border:1px solid #ddd}.auth-social.naver{background:#03c75a;color:#fff}.auth-social.naver b{background:#fff;color:#03a94e}
.auth-social.disabled { filter:grayscale(.85); opacity:.38; pointer-events:none; }
.auth-switch-link { padding-top:2px; text-align:center; color:#958b7d; font-size:10px; font-weight:700; }
.auth-switch-link a { margin-left:6px; color:#e6bc58; font-weight:900; text-decoration:none; }.auth-switch-link a:hover{text-decoration:underline}
.auth-register-note { padding:12px 14px; display:flex; flex-direction:column; gap:3px; border-left:2px solid var(--auth-gold); background:rgba(215,168,64,.07); }
.auth-register-note b { color:#dfb957; font-size:8px; letter-spacing:.2em; }.auth-register-note span{color:#9f9587;font-size:9px;font-weight:650}
.auth-scene-copy { position:absolute; left:clamp(30px,7vw,125px); bottom:clamp(34px,7vh,90px); display:flex; flex-direction:column; gap:9px; text-shadow:0 3px 22px #000; }
.auth-scene-copy span { color:var(--auth-gold); font-size:9px; font-weight:900; letter-spacing:.4em; }
.auth-scene-copy strong { color:#fff; font-family:Georgia,"Times New Roman",serif; font-size:clamp(28px,3vw,50px); line-height:1.08; font-weight:500; }
@media (max-height:760px) and (min-width:701px){.auth-panel{padding:25px 34px}.auth-panel-header h1{font-size:30px}.auth-panel-header p{margin:8px 0 14px}.auth-form{gap:8px}.auth-field input{height:39px}.auth-primary-button{height:43px}.auth-social{min-height:37px}.auth-scene-copy{display:none}}
@media (max-width:700px){body.auth-page{overflow:auto;background:#050505}.auth-stage{min-height:100dvh;height:auto;padding:105px 22px 230px;background-color:#050505;background-position:center bottom;background-size:100% auto;background-repeat:no-repeat}.auth-stage::before{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,#050505 26%,rgba(5,5,5,.96) 68%,rgba(5,5,5,.2) 100%)}.auth-stage::after{box-shadow:inset 0 0 45px rgba(0,0,0,.75)}.auth-brand{top:27px;left:50%;width:max-content;max-width:calc(100% - 36px);transform:translateX(-50%)}.auth-brand-mark{width:36px;height:36px}.auth-brand-mark::before{inset:8px}.auth-brand-mark i{top:16px;left:5px;width:23px}.auth-brand strong{font-size:16px}.auth-brand small{font-size:7px}.auth-panel{position:relative;top:auto;right:auto;width:100%;max-width:390px;max-height:none;margin:0 auto;padding:18px 4px 22px;transform:none;border:0;background:transparent;box-shadow:none;backdrop-filter:none}.auth-panel::before,.auth-panel::after{display:none}.auth-panel-header{text-align:center}.auth-panel-header>span{margin-bottom:10px}.auth-panel-header h1{font-size:32px}.auth-panel-header p{margin:10px 0 22px}.auth-field label{padding-left:3px}.auth-field input{height:50px;border-color:rgba(224,181,83,.42);border-radius:8px;background:rgba(12,10,8,.76);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.32);backdrop-filter:blur(8px)}.auth-field input::placeholder{color:#8f8779}.auth-field input:focus{background:rgba(20,16,11,.9)}.auth-primary-button{border-radius:8px}.auth-social-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.auth-social{min-height:42px}.auth-scene-copy{display:none}}
@media (max-height:520px) and (orientation:landscape){body.auth-page{overflow:auto;background:#050505}.auth-stage{height:auto;min-height:100dvh;padding:14px 18px;background-color:#050505;background-position:center;background-size:contain;background-repeat:no-repeat}.auth-stage::before{background:rgba(0,0,0,.58)}.auth-brand{display:flex;top:18px;left:22px;transform:none}.auth-brand-mark{width:30px;height:30px}.auth-brand-mark::before{inset:6px}.auth-brand-mark i{top:13px;left:4px;width:20px}.auth-brand strong{font-size:13px}.auth-brand small{font-size:6px}.auth-scene-copy{display:none}.auth-panel{position:relative;top:auto;right:auto;width:min(390px,100%);max-height:none;margin:0 auto;padding:10px 16px 14px;transform:none;border:0;background:rgba(5,5,5,.42);box-shadow:none;backdrop-filter:blur(3px)}.auth-panel::before,.auth-panel::after{display:none}.auth-panel-header{text-align:center}.auth-panel-header>span{margin-bottom:5px;font-size:7px}.auth-panel-header h1{font-size:23px;line-height:1.02}.auth-panel-header p{margin:5px 0 7px;font-size:9px}.auth-form{gap:5px}.auth-field{gap:3px}.auth-field label{font-size:8px}.auth-page .auth-stage .auth-field input{height:32px!important;border:1px solid rgba(224,181,83,.42)!important;border-radius:6px!important;background:rgba(12,10,8,.82)!important;color:#fff!important;box-shadow:0 5px 14px rgba(0,0,0,.28)!important;-webkit-text-fill-color:#fff}.auth-page .auth-stage .auth-field input::placeholder{color:#8f8779!important;-webkit-text-fill-color:#8f8779}.auth-save-row{min-height:17px;font-size:8px}.auth-save-row input{width:12px;height:12px}.auth-primary-button{height:34px;border-radius:6px;font-size:11px}.auth-social-divider{font-size:7px}.auth-social-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.auth-social{min-height:30px;padding:3px 5px;grid-template-columns:19px 1fr;font-size:7px}.auth-social b{width:17px;height:17px;font-size:8px}.auth-social small{font-size:6px}.auth-switch-link{font-size:8px}.auth-register-note{padding:6px 8px}.auth-register-note span{font-size:7px}}
@media (prefers-reduced-motion:reduce){.auth-brand strong,.auth-brand-mark{animation:none}}
@media (max-width:700px){.auth-page .auth-stage .auth-field input{border:1px solid rgba(224,181,83,.42)!important;border-radius:8px!important;background:rgba(12,10,8,.82)!important;color:#fff!important;box-shadow:0 8px 20px rgba(0,0,0,.32)!important;-webkit-text-fill-color:#fff}.auth-page .auth-stage .auth-field input::placeholder{color:#8f8779!important;-webkit-text-fill-color:#8f8779}.auth-page .auth-stage .auth-field input:focus{border-color:var(--auth-gold)!important;background:rgba(20,16,11,.92)!important;color:#fff!important}}
@media (max-width:700px){.auth-stage .auth-brand{left:22px;transform:none}.auth-stage .auth-field label{padding-left:12px}.auth-page .auth-stage .auth-field input{box-shadow:inset 0 1px rgba(255,232,172,.08),inset 3px 0 rgba(215,168,64,.24),0 8px 22px rgba(0,0,0,.36)!important}.auth-page .auth-stage .auth-field input:focus{box-shadow:0 0 0 2px rgba(215,168,64,.12),0 0 22px rgba(215,168,64,.15),inset 3px 0 #e5b94f!important;transform:translateY(-1px)}}