/* ★2026-10-15 (user3, 사용자: "가입신청 화면도 다크세이버 이미지도 넣고 해서 좀 예쁘게") 가입 신청·에디터 로그인 화면
   그림 = 원작 클라 Logo.bmp(ds_logo.jpg)·logo6.bmp(ds_town.jpg)를 JPG 로 옮긴 것(Client 파일은 그대로). */
:root{--gold:#e2b863;--gold2:#a8782e;--ink:#f3ead8;--dim:#b9ad97;--panel:rgba(22,16,12,.82);--line:rgba(226,184,99,.35)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:15px/1.55 "Malgun Gothic",system-ui,sans-serif;color:var(--ink);background:#120d0a;position:relative}
body::before{content:"";position:fixed;inset:-20px;background:url(/static/ds_town.jpg) center/cover no-repeat;filter:blur(6px) brightness(.45) saturate(1.1);z-index:-2}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(0,0,0,0) 0,rgba(10,6,4,.75) 75%);z-index:-1}
.wrap{max-width:520px;margin:0 auto;padding:clamp(12px,3vh,28px) 16px 40px}
.hero{position:relative;border-radius:14px 14px 0 0;overflow:hidden;border:1px solid var(--line);border-bottom:0;height:210px;background:#000}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(22,16,12,.95) 100%)}
.hero .tag{position:absolute;left:0;right:0;bottom:10px;text-align:center;z-index:1;font-size:13px;letter-spacing:.3em;color:var(--gold)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:0 0 14px 14px;padding:20px 24px 24px;box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.panel.solo{border-radius:14px;margin-top:16px}
h1{margin:0 0 4px;font-size:22px;color:var(--gold);text-align:center;letter-spacing:.05em}
h2{margin:0 0 10px;font-size:17px;color:var(--gold)}
.sub{margin:0 0 16px;text-align:center;color:var(--dim);font-size:14px}
.steps{display:flex;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.steps li{flex:1;text-align:center;font-size:12px;color:var(--dim);padding:7px 4px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.25)}
.steps li b{display:block;font-size:16px;color:var(--gold)}
label{display:block;margin:12px 0 5px;font-size:13px;color:var(--dim)}
input[type=text],input[type=password],input:not([type]){width:100%;padding:10px 12px;border-radius:8px;border:1px solid #5a4a33;background:rgba(0,0,0,.45);color:var(--ink);font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,184,99,.2)}
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.classes input{position:absolute;opacity:0;pointer-events:none}
.cls{position:relative;display:block;margin:0;cursor:pointer;text-align:center;padding:10px 4px 8px;border:1px solid #5a4a33;border-radius:10px;background:rgba(0,0,0,.35);color:var(--ink);transition:transform .12s,border-color .12s,background .12s}
.cls:hover{transform:translateY(-2px);border-color:var(--gold2)}
.cls .face{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;overflow:hidden;background:#2b2118;border:2px solid #5a4a33;display:flex;align-items:center;justify-content:center}
.cls .face img{max-width:100%;max-height:100%;image-rendering:pixelated}
.cls span{font-size:14px;font-weight:bold}
.classes input:checked + .cls{border-color:var(--gold);background:rgba(226,184,99,.16);box-shadow:0 0 0 2px rgba(226,184,99,.35)}
.classes input:checked + .cls .face{border-color:var(--gold)}
.classes input:focus-visible + .cls{outline:2px solid var(--gold);outline-offset:2px}
.btn{display:block;width:100%;margin-top:20px;padding:12px;border:0;border-radius:9px;cursor:pointer;font:bold 16px "Malgun Gothic",sans-serif;color:#24180c;text-align:center;text-decoration:none;background:linear-gradient(180deg,#f3cf82,#c8913e);box-shadow:0 4px 0 #7a5420,0 8px 18px rgba(0,0,0,.35);transition:filter .12s,transform .12s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #7a5420}
.msg-err{margin:0 0 6px;padding:10px 12px;border-radius:8px;background:rgba(160,30,30,.35);border:1px solid #c0504d;color:#ffd6d3}
.msg-ok{margin:0 0 6px;padding:12px 14px;border-radius:8px;background:rgba(50,110,40,.35);border:1px solid #6fae5a;color:#dff3d6}
.note{color:var(--dim);font-size:13px;margin:8px 0 0}
.linkrow{display:flex;gap:6px}.linkrow input{flex:1;min-width:0;font-size:13px!important}
.cbtn{flex:none;padding:0 14px;border:1px solid var(--gold2);border-radius:8px;background:rgba(226,184,99,.15);color:var(--gold);font:bold 14px "Malgun Gothic",sans-serif;cursor:pointer}
.cbtn:hover{background:rgba(226,184,99,.3)}
.foot{text-align:center;color:#857a68;font-size:12px;margin-top:18px}
/* ★2026-10-15 (사용자: "이 화면도 좀 넓게") 가입 페이지 = 넓은 판 + 두 칸씩 나란히, 단계 표시(지금 단계 = on, 지난 단계 = done) */
.wrap.wide{width:min(94vw,1000px);max-width:none}   /* 창 폭에 따라 늘었다 줄었다(사용자: "화면에 맞게 늘었다 줄었다") */
.wide .hero{height:clamp(150px,24vw,280px)}
.wide .hero img{object-position:50% 0}
.wide .hero .tag{display:none}   /* 넓은 판은 로고 글자(다크세이버)와 겹쳐서 숨김 */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.steps li.on{border-color:var(--gold);background:rgba(226,184,99,.18);color:var(--ink)}
.steps li.done{opacity:.55}
.panel h1{margin-top:2px}
.msg-ok,.msg-err{margin:6px 0 10px}
.swap{text-align:center;margin:16px 0 0;color:var(--dim);font-size:14px}
.swap a{color:var(--gold);font-weight:bold;text-decoration:none}
.swap a:hover{text-decoration:underline}
@media (max-width:600px){.cols{grid-template-columns:1fr}}
/* 모바일(사용자: "모바일에 맞춰서 UI를 텍스트로만 … PC레이아웃이 다 나올 필요는 없어") = 그림 빼고 글자만 */
.mtitle{display:none}
@media (max-width:600px){
 body::before,body::after{display:none}
 body{background:#17110d;font-size:16px}
 .wrap{padding:14px 12px 28px;max-width:none!important}
 .hero{display:none}
 .mtitle{display:block;text-align:center;font-size:20px;font-weight:bold;color:var(--gold);letter-spacing:.1em;margin:6px 0 12px}
 .panel{border-radius:10px;padding:16px 14px;box-shadow:none;backdrop-filter:none;background:#221913}
 .steps{display:none}
 .classes{gap:6px}
 .cls{padding:10px 2px}
 .cls .face{display:none}
 .cls:hover{transform:none}
 input[type=text],input[type=password],input:not([type]){font-size:16px}
}