/* ===========================================
   방재실 관제시스템 시작화면
=========================================== */

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
}

body{
    overflow:hidden;
    background:#020817;
    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}

/* ===========================================
   전체 화면
=========================================== */

.control-start-page{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    min-height:100vh;
    background:#020817;
}

.control-start-screen{
    position:relative;
    width:min(100vw, 150vh);
    aspect-ratio:3 / 2;
    max-height:100vh;
    overflow:hidden;
    background:#020817;
}

.control-start-background{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    pointer-events:none;
}

/* ===========================================
   시작하기 버튼
=========================================== */

.control-start-button{
    position:absolute;
    left:23.9%;
    top:64.1%;
    width:50.9%;
    height:14.2%;
    margin:0;
    padding:0;
    border:2px solid transparent;
    border-radius:70px;
    background:transparent;
    cursor:pointer;
    outline:none;
    -webkit-tap-highlight-color:transparent;
}

.control-start-button:hover{
    border-color:rgba(64, 229, 255, 0.85);
    box-shadow:
        0 0 18px rgba(0, 207, 255, 0.70),
        0 0 40px rgba(0, 115, 255, 0.45);
}

.control-start-button:focus-visible{
    border-color:#fff;
    box-shadow:
        0 0 0 4px rgba(0, 213, 255, 0.75),
        0 0 30px rgba(0, 213, 255, 0.85);
}

.control-start-button.is-starting{
    cursor:wait;
    border-color:rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 22px rgba(0, 213, 255, 0.90),
        0 0 48px rgba(0, 99, 255, 0.60);
}

/* ===========================================
   화면낭독기 전용
=========================================== */

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

/* ===========================================
   화면 비율 대응
=========================================== */

@media (max-aspect-ratio:3/2){

    .control-start-screen{
        width:100vw;
        height:auto;
        max-height:none;
    }
}