/* ============================================
   로그인 공통 다크톤 테마 (accessibility 포함)
   ============================================ */

/* ---------- 디자인 토큰(색/간격/반경) ---------- */
:root{
    /* 배경/패널 */
    --bg:#0b1220;            /* 페이지 배경 */
    --bg-soft:#0f1623;       /* 배경 그라데이션 중간톤 */
    --panel:#121a2a;         /* 카드 */
    --panel-2:#0f172a;       /* 인풋 배경 */
    --bg2:#101b2d;

    /* 텍스트 */
    --text:#e5edf7;
    --muted:#9fb0d1;
    --placeholder:#94a3b8;

    /* 선/경계 */
    --line:#22314a;
    --line2:#334155;

    /* 포커스/브랜드 */
    --primary:#3b82f6;       /* 버튼/포커스 기본 */
    --primary-ink:#0b1b3a;   /* 버튼 active 잉크 */
    --accent:#0DB8DE;        /* 보조 포인트(그라데이션용) */
    --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;

    /* 라운드/그림자/간격 */
    --radius:12px; --radius-lg:16px;
    --shadow-1:0 10px 30px rgba(0,0,0,.35);
    --shadow-2:0 3px 6px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.28);

    /* 폰트 크기 */
    --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-24:24px; --fs-28:28px;
}

/* ---------- 레이아웃 기본 ---------- */
html, body { height: 100%; }
*{ box-sizing:border-box }
body{
    margin:0;
    color:var(--text);

    font: 400 16px/1.55 -apple-system, Segoe UI, Roboto, Noto Sans KR, Arial, sans-serif;
    background: radial-gradient(1200px 700px at 20% 15%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(147,51,234,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    overflow-x:hidden; /* 배경 웨이브 넘침 방지 */
    position:relative;
}

/* 배경 스팟 무대  */
body::before{
    content:"";
    position:fixed; inset:0; pointer-events:none;
    z-index:0;
    background:
            radial-gradient(1000px 520px at 20% 15%, rgba(59,130,246,0.22), transparent 60%),
            radial-gradient(800px 460px at 80% 25%, rgba(147,51,234,0.20), transparent 60%);
    mix-blend-mode:screen;
    filter: blur(0.5px);
}

/* 배경 웨이브 사운드  */
body::after{
    content:"";
    position:fixed; left:-5%; right:-5%; top:58%; height:240px;
    pointer-events:none;
    /* 여기도 0으로 */
    z-index:0;
    background: linear-gradient(90deg,
    rgba(59,130,246,0.00),
    rgba(59,130,246,0.40),
    rgba(147,51,234,0.40),
    rgba(59,130,246,0.00));
    filter: blur(12px);
    opacity:.30;                 /* 살짝 더 보이게 + */
    transform:skewY(-6deg);
    animation: wave-move 12s linear infinite;

}
@keyframes wave-move{
    from{ transform: translateX(-8%) skewY(-6deg) }
    to{   transform: translateX(8%)  skewY(-6deg) }
}


/* ============================================
   배경 아이콘 (리모컨/마이크/노래 음표) - 고정 배경 레이어
   ============================================ */
.bg-icons{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
}

/* 공통 아이콘 베이스 */
.bg-icons .icon{
    position:absolute;
    opacity:.08;                  /* 은은하게 */
    filter: drop-shadow(0 0 12px rgba(59,130,246,.18));
    width:160px; height:160px;    /* 기본 사이즈 */
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

/* 위치/크기 개별 튜닝 */
.bg-icons .icon.remote{ right:6%; bottom:10%; width:130px; height:260px; }
.bg-icons .icon.mic{    left:8%;  bottom:12%; width:140px; height:220px; }
.bg-icons .icon.note{   right:14%; top:12%;   width:160px; height:160px; }

/* 본문을 아이콘 위로 올리기 */
.container, .footer{
    position:relative;
    z-index:2;
}

/* ===== SVG 아이콘을 data-URI로 주입 ===== */

/* 리모컨 */
.bg-icons .icon.remote{
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 280' fill='%239fb0d1'>\
<rect x='35' y='18' width='50' height='230' rx='18'/>\
<circle cx='60' cy='48' r='10'/>\
<circle cx='60' cy='78' r='8'/>\
<rect x='48' y='98' width='24' height='12' rx='3'/>\
<circle cx='60' cy='124' r='6'/>\
<circle cx='60' cy='144' r='6'/>\
<circle cx='60' cy='164' r='6'/>\
</svg>");
}

/* 마이크 */
.bg-icons .icon.mic{
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 220' fill='%239fb0d1'>\
<rect x='35' y='20' width='50' height='85' rx='25'/>\
<rect x='52' y='105' width='16' height='45' rx='8'/>\
<rect x='28' y='150' width='64' height='14' rx='7'/>\
<rect x='20' y='164' width='80' height='10' rx='5'/>\
</svg>");
}

/* 노래 음표 */
.bg-icons .icon.note{
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='%239fb0d1'>\
<path d='M150 30v90a35 35 0 1 1-12-26V62l-64 14v64a35 35 0 1 1-12-26V70l88-20V30z'/>\
</svg>");
}

/* TV */
.bg-icons .icon.tv{
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='%239fb0d1'>\
<rect x='6' y='10' width='188' height='110' rx='10'/>\
<rect x='70' y='124' width='60' height='10' rx='2'/>\
</svg>");
    left:6%; top:8%;
}

/* 중앙 컨테이너 */
.container{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- 로그인 카드 ---------- */
.login-box{
    width:100%;
    max-width:560px;
    margin: clamp(56px, 20vh, 120px) auto 24px;
    padding: 36px 30px 26px;
    background: linear-gradient(180deg, #0f1a2d 0%, var(--panel) 100%);
    border:1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    text-align:left;
}

/* 상단 아이콘/타이틀 */
.login-key{
    display:block;
    text-align: center;
    font-size:72px; line-height:1; margin:0 0 6px;
    background: linear-gradient(90deg, #27EF9F, var(--accent));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* 로고 이미지가 들어오면 크기 정렬 */
.login-key img{
    /* 로고 크기/정렬 보정 */
    height:42px; width:auto; vertical-align:middle; filter: drop-shadow(0 4px 14px rgba(59,130,246,.25));
}

.login-title{
    margin:6px 0 18px;
    font-size: var(--fs-28);
    font-weight: 800;
    letter-spacing:.5px;
    color:#FFFFFF;
}

.login-hint{ margin:-4px 0 16px; color:var(--muted); font-size:var(--fs-13); }

/* ---------- 폼 ---------- */
.login-form{
    margin-top: 12px;
    display:grid;
    grid-template-columns: 1fr;
    row-gap: 14px;
}

/* 라벨 */
.form-control-label{
    display:block;
    margin: 0 0 6px;
    font-size: var(--fs-13);
    color:#FFFFFF;
    font-weight:700;
    letter-spacing:.3px;
}

/* 인풋 공통 */
.form-control,
input[type="text"],
input[type="password"]{
    width:100%;
    background: var(--panel-2);
    color: var(--text);
    border:1px solid var(--line2);
    border-radius:10px;
    padding:12px 14px;
    font-size: var(--fs-16);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.form-control::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder{
    color: var(--placeholder);
    opacity:.9;
}
/* 포커스 상태: 키보드 접근성 */
.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.28);
    background:#0e1a25;
}

/* 에러 메시지 */
.form-error{
    margin-top:6px;
    color:#fecaca;
    font-size: var(--fs-13);
    display:none;
}
.form-error.show{ display:block; }

/* ---------- 버튼 영역 ---------- */
.loginbttm, .login-button{
    display:flex !important;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top: 12px;
    padding:0;
}

/* 버튼 기본 */
.btn{
    appearance:none; border:0; cursor:pointer;
    border-radius:10px; padding:12px 16px; font-weight:700; letter-spacing:.3px;
    transition: transform .04s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* 아웃라인(보조) */
.btn-outline-primary{
    background: transparent;
    border:1px solid var(--primary);
    color:#dbeafe;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.btn-outline-primary:hover{ background: rgba(59,130,246,.16); }
.btn-outline-primary:active{ transform: translateY(1px); }


.btn-primary{
    background: linear-gradient(180deg, #1f3a6b 0%, #112443 100%);
    border:1px solid var(--primary);
    color:#eaf2ff;
    box-shadow: 0 6px 18px rgba(20,75,170,.25);
}
.btn-primary:hover{ box-shadow: 0 8px 22px rgba(20,75,170,.35); }
.btn-primary:active{ background:#102038; box-shadow:none; }

/* 비활성 */
.btn[disabled], .btn[aria-disabled="true"]{
    opacity:.55; cursor:not-allowed; box-shadow:none;
}

/* ---------- 푸터(중앙 정렬, 카드 분리) ---------- */
.footer{
    max-width: 960px;
    margin: 48px auto 24px;
    padding: 0 16px;
    color: var(--muted);
    font-size: var(--fs-13);
    text-align:center;
}
.footer p{ margin:8px 0; }

/* ---------- 접근성: 키보드 전용 포커스 링 ---------- */
:focus{ outline:none; }
:focus-visible{ outline:2px solid rgba(96,165,250,.95); outline-offset:2px; }

/* ---------- 반응형 ---------- */
@media (max-width: 560px){
    .login-box{ margin: 8vh 12px 20px; padding: 28px 18px 22px; }
    .login-title{ font-size: var(--fs-24); }
    .btn{ padding: 11px 14px; }
}

/* ---------- 모션 최소화 선호 대응 ---------- */
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
}