@charset "utf-8";
/* ==========================================================================
   외부 로그인 화면 · ENTRY
     홈페이지 주소로 들어오면 제일 먼저 보이는 화면이다.
     가운데 정렬 스플래시가 아니라 대각선으로 갈라진 두 칸으로 짠다.
       왼쪽  — 서버 소개 · 수치 · 공성전 남은 시간
       오른쪽 — 로그인
     캐릭터 아트는 오른쪽에서 화면 밖으로 흘러 나간다.
   ========================================================================== */

*{ margin:0; padding:0; box-sizing:border-box; }
ul,ol{ list-style:none; }
a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }

html,body{ height:100%; }
body.lgb{
  min-height:100%; overflow-x:hidden;
  background:#04010a;
  font:14px/1.7 Tahoma, Verdana, "Malgun Gothic", "맑은 고딕", Dotum, sans-serif;
  color:#d7cbe8;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 바탕 ---------- */
.lg-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(150,58,236,.26) 0%, rgba(150,58,236,0) 58%),
    radial-gradient(90% 70% at 88% 88%, rgba(60,20,140,.30) 0%, rgba(60,20,140,0) 60%),
    url(../img/bg_hero.jpg) no-repeat center center;
  background-size:auto, auto, cover;
}
.lg-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(4,1,10,.94) 0%, rgba(4,1,10,.86) 38%, rgba(4,1,10,.55) 62%, rgba(4,1,10,.75) 100%);
}

/* ---------- 캐릭터 아트 : 오른쪽에서 화면 밖으로 ---------- */
.lg-art{
  position:fixed; z-index:1; pointer-events:none;
  right:-2vw; bottom:-4vh; width:56vw; max-width:1000px;
  display:flex; align-items:flex-end; justify-content:center;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 100%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 100%);
}
.lg-art img{
  width:100%; height:auto;
  filter:drop-shadow(0 0 70px rgba(150,58,236,.55)) drop-shadow(0 20px 50px rgba(0,0,0,.85));
  animation:lgfloat 9s ease-in-out infinite;
}
@keyframes lgfloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* ---------- 대각선 이음새 ---------- */
.lg-seam{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(102deg,
     rgba(178,104,240,0)   calc(46% - 1px),
     rgba(199,139,255,.55) 46%,
     rgba(178,104,240,0)   calc(46% + 1px));
  filter:drop-shadow(0 0 14px rgba(178,104,240,.5));
}

/* ---------- 맨 위 줄 ---------- */
.lg-top{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:16px clamp(18px,3vw,44px);
}
.lg-state{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; font-size:12.5px; letter-spacing:.03em; color:#cbb6e6;
  background:rgba(10,3,26,.6); border:1px solid rgba(150,84,210,.4);
}
.lg-state i{
  width:7px; height:7px; border-radius:50%; background:#3fd9b8;
  box-shadow:0 0 9px rgba(60,230,190,.95); animation:lgdot 1.9s ease-in-out infinite;
}
@keyframes lgdot{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* ---------- 두 칸 ---------- */
.lg-stage{
  position:relative; z-index:4;
  display:flex; align-items:center; gap:clamp(24px,5vw,90px);
  min-height:calc(100vh - 132px);
  padding:0 clamp(18px,3vw,44px);
}

/* ---------- 왼쪽 : 소개 ---------- */
.lg-left{ flex:1 1 0; min-width:0; max-width:620px; }
.lg-eyebrow{
  display:flex; align-items:center; gap:10px;
  font:bold 11.5px/1 Tahoma,sans-serif; letter-spacing:.28em; color:#b674f0;
}
.lg-eyebrow i{ flex:1 1 auto; height:1px; max-width:120px;
               background:linear-gradient(90deg, rgba(178,104,240,.7), rgba(178,104,240,0)); }
/* 로고는 원본 크기 그대로 — 줄이면 글자가 뭉갠다 */
.lg-logo{ margin:10px 0 0; }
.lg-logo img{ width:auto; height:auto; max-width:100%;
              filter:drop-shadow(0 0 40px rgba(178,88,255,.8)); }
.lg-sublogo{ width:auto; height:auto; max-width:100%; margin-top:2px; opacity:.92; }

.lg-tag{
  margin-top:18px; padding-left:14px;
  font-size:clamp(13px,1.15vw,15px); line-height:1.85; color:#cbb6e6;
  border-left:2px solid rgba(178,104,240,.55);
  word-break:keep-all;
}

.lg-spec{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.lg-spec li{
  min-width:104px; padding:7px 14px;
  background:rgba(10,3,26,.62); border:1px solid rgba(150,84,210,.34);
  box-shadow:inset 0 0 16px rgba(150,58,236,.14);
}
.lg-spec em{ display:block; font-style:normal; font-size:11px; color:#a99cc0; white-space:nowrap; }
.lg-spec b{ display:block; margin-top:2px;
            font:bold 17px/1.1 Tahoma,"Malgun Gothic",sans-serif; color:#f0e2ff;
            text-shadow:0 0 12px rgba(178,104,240,.6); white-space:nowrap; }

.lg-cd{ margin-top:26px; }
.lg-cd .lb{ display:block; font-size:11.5px; letter-spacing:.14em; color:#b18ede; }
.lg-cd .clock{ display:flex; align-items:baseline; gap:2px; margin:5px 0 3px; }
.lg-cd .clock b{ font:bold clamp(28px,3.4vw,42px)/1 Tahoma,sans-serif; color:#fff;
                 text-shadow:0 0 22px rgba(178,88,255,1), 0 2px 10px rgba(0,0,0,.9); }
.lg-cd .clock u{ margin:0 12px 0 3px; text-decoration:none;
                 font:bold 12px/1 "Malgun Gothic",sans-serif; color:#9c8fb4; }
.lg-cd .clock u:last-of-type{ margin-right:0; }
.lg-cd .when{ display:block; font-size:12px; color:#a99cc0; }

/* ---------- 오른쪽 : 로그인 ---------- */
.lg-right{ flex:0 0 auto; width:clamp(330px,29vw,410px); }
.lg-card{
  position:relative; padding:26px clamp(20px,2vw,30px) 22px;
  background:linear-gradient(180deg, rgba(24,8,52,.93) 0%, rgba(8,2,20,.95) 100%);
  border:1px solid rgba(178,104,240,.42);
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(150,58,236,.12);
}
/* 네 귀퉁이 장식 */
.lg-card::before, .lg-card::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border:2px solid rgba(199,139,255,.85);
}
.lg-card::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.lg-card::after { right:-1px; bottom:-1px; border-left:0; border-top:0; }

.lg-ttl{ font:bold 22px/1.2 "Malgun Gothic",sans-serif; color:#fff;
         text-shadow:0 0 18px rgba(178,88,255,.85); }
.lg-ttl u{ display:block; margin-top:4px; text-decoration:none;
           font:bold 11px/1 Tahoma,sans-serif; letter-spacing:.26em; color:#b674f0; }
.lg-desc{ margin-top:12px; padding-bottom:16px; font-size:12.5px; line-height:1.8; color:#a99cc0;
          border-bottom:1px solid rgba(150,84,210,.28); word-break:keep-all; }

.lg-field{ display:block; margin-top:14px; }
.lg-field .lb{ display:flex; align-items:baseline; gap:7px; margin-bottom:6px;
               font:bold 12.5px/1 "Malgun Gothic",sans-serif; color:#dcc6f7; }
.lg-field .lb u{ text-decoration:none; font:bold 10px/1 Tahoma,sans-serif;
                 letter-spacing:.16em; color:#8a7ca6; }
.lg-field input{
  width:100%; height:44px; padding:0 14px;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.45);
  color:#efe6fb; font-size:14px; transition:.16s;
}
.lg-field input::placeholder{ color:#7d6f96; font-size:13px; }
.lg-field input:focus{ outline:none; border-color:#c77dff;
                       box-shadow:0 0 0 3px rgba(150,58,236,.18), 0 0 14px rgba(168,92,232,.5); }

.lg-opt{ display:flex; align-items:center; justify-content:space-between; gap:10px;
         margin-top:13px; font-size:12.5px; }
.lg-opt label{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:#b6a8cc; }
.lg-opt input{ width:14px; height:14px; accent-color:#8e48d6; }
.lg-opt a{ color:#a99cc0; }
.lg-opt a:hover{ color:#e0c9ff; }

.lg-btn{
  width:100%; height:50px; margin-top:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font:bold 16px/1 "Malgun Gothic",sans-serif; color:#fff;
  background:linear-gradient(180deg, rgba(168,72,244,.92) 0%, rgba(84,24,158,.95) 100%);
  border:1px solid rgba(199,139,255,.7);
  box-shadow:0 8px 26px rgba(120,40,210,.4), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 0 12px rgba(255,255,255,.4);
  transition:.16s;
}
.lg-btn u{ text-decoration:none; font:bold 11px/1 Tahoma,sans-serif; letter-spacing:.2em; color:#e6d3ff; }
.lg-btn:hover{ background:linear-gradient(180deg, rgba(190,96,255,.96) 0%, rgba(102,32,186,1) 100%);
               box-shadow:0 10px 32px rgba(150,58,236,.55), inset 0 1px 0 rgba(255,255,255,.3); }
.lg-btn:active{ transform:translateY(1px); }

.lg-sub{ display:flex; gap:8px; margin-top:11px; }
.lg-sub a,
.lg-sub button{
  flex:1 1 0; height:42px; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font:bold 13px/1.1 "Malgun Gothic",sans-serif; color:#cbb6e6;
  background:rgba(0,0,0,.42); border:1px solid rgba(150,84,210,.36); transition:.16s;
}
.lg-sub u{ text-decoration:none; font:bold 9.5px/1 Tahoma,sans-serif;
           letter-spacing:.16em; color:#8a7ca6; }
.lg-sub a:hover,
.lg-sub button:hover{ color:#fff; border-color:rgba(199,139,255,.75); background:rgba(96,38,164,.36); }

/* ---------- 비밀번호 찾기 화면 ---------- */
/* 읽기만 하는 칸 (아이디 · 확인 질문) 은 한 톤 죽여 입력칸과 구분한다 */
.lg-field input[readonly]{ color:#c6b8dc; background:rgba(0,0,0,.5);
                           border-style:dashed; cursor:default; }
.lg-field input[readonly]:focus{ box-shadow:none; border-color:rgba(150,84,210,.5); }

.lg-warn{
  margin:0 0 14px; padding:11px 14px; font-size:12.5px; line-height:1.7;
  color:#ffc0cd; background:rgba(180,30,60,.18);
  border:1px solid rgba(255,110,140,.45);
}
.lg-warn b{ color:#fff; }

/* 발급된 임시 비밀번호 */
.lg-pw{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:14px 0 4px; padding:14px 16px;
  background:rgba(0,0,0,.5); border:1px solid rgba(199,139,255,.6);
  box-shadow:inset 0 0 26px rgba(150,58,236,.22);
}
.lg-pw .lb{ flex:0 0 100%; font-size:11.5px; letter-spacing:.06em; color:#a99cc0; }
.lg-pw b{
  flex:1 1 auto; min-width:0; word-break:break-all;
  font:bold 25px/1.2 Consolas,"Malgun Gothic",monospace; letter-spacing:.09em;
  color:#fff; text-shadow:0 0 18px rgba(199,139,255,.9);
}
.lg-pw .cp{
  flex:none; padding:9px 15px; cursor:pointer; font-size:12.5px; color:#e0c9ff;
  background:rgba(96,38,164,.4); border:1px solid rgba(199,139,255,.6);
}
.lg-pw .cp:hover{ color:#fff; background:rgba(140,60,220,.55); }

.lg-help{ margin-top:16px; padding-top:14px; font-size:11.5px; line-height:1.8; color:#8d7fa0;
          border-top:1px solid rgba(150,84,210,.22); word-break:keep-all; }
.lg-help b{ color:#ff9fb4; font-weight:bold; }

/* ---------- 맨 아래 ---------- */
.lg-copy{ position:relative; z-index:5; padding:14px 0 20px; text-align:center;
          font-size:11px; letter-spacing:.04em; color:#6b5f80; }

/* ---------- 등장 ---------- */
.lg-left > *, .lg-right{ opacity:0; transform:translateY(14px); }
body.ready .lg-left > *,
body.ready .lg-right{ opacity:1; transform:none;
                      transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
body.ready .lg-left > *:nth-child(1){ transition-delay:.05s; }
body.ready .lg-left > *:nth-child(2){ transition-delay:.11s; }
body.ready .lg-left > *:nth-child(3){ transition-delay:.15s; }
body.ready .lg-left > *:nth-child(4){ transition-delay:.20s; }
body.ready .lg-left > *:nth-child(5){ transition-delay:.25s; }
body.ready .lg-left > *:nth-child(6){ transition-delay:.30s; }
body.ready .lg-right{ transition-delay:.18s; }

/* ==========================================================================
   좁은 화면
   ========================================================================== */
@media (max-width:1180px){
  .lg-seam{ display:none; }
  .lg-art{ width:70vw; right:-14vw; opacity:.5; }
  .lg-bg::after{ background:linear-gradient(180deg, rgba(4,1,10,.9) 0%, rgba(4,1,10,.82) 100%); }
  .lg-stage{ flex-direction:column; align-items:stretch; gap:26px;
             min-height:0; padding-bottom:26px; }
  .lg-left{ max-width:none; }
  .lg-right{ width:100%; max-width:430px; }
}
@media (max-width:560px){
  .lg-top{ flex-wrap:wrap; gap:8px; }
  .lg-spec li{ flex:1 1 44%; min-width:0; }
  .lg-cd .clock b{ font-size:26px; }
}