:root {
    color-scheme: light only;

    /* JEJU SAFETY 브랜드 팔레트 */
    --jeju-green: #2E7D5B;
    --jeju-green-dark: #1F6548;
    --jeju-green-soft: #EAF5EF;

    --jeju-nature: #7BA463;
    --jeju-nature-soft: #F0F6EA;

    --jeju-orange: #F7931E;
    --jeju-orange-dark: #D97B11;
    --jeju-orange-soft: #FFF2E1;

    --jeju-sun: #FFC857;
    --jeju-sun-soft: #FFF8DF;

    --jeju-sea: #44B3B3;
    --jeju-sea-dark: #258E8E;
    --jeju-sea-soft: #E8F8F8;

    --ink: #17382D;
    --text: #41534B;
    --muted: #708078;
    --line: #D9E7DF;

    --white: #FFFFFF;
    --ivory: #FFFDF7;
    --surface: #F7FBF8;

    --shadow:
        0 28px 70px rgba(46, 125, 91, 0.16);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    background: var(--ivory);
}

body {
    margin: 0;

    color: var(--text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        Arial,
        sans-serif;

    background:
        radial-gradient(circle at 6% 10%,
            rgba(123, 164, 99, 0.18),
            transparent 28%),
        radial-gradient(circle at 94% 10%,
            rgba(68, 179, 179, 0.18),
            transparent 30%),
        linear-gradient(135deg,
            #FFFDF7 0%,
            #F5FBF7 48%,
            #EFF9F7 100%);
}

a,
button,
input {
    font: inherit;
}

.login-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;
}

.login-shell {
    width: 100%;
    max-width: 1180px;

    display: grid;
    grid-template-columns: 1.04fr 0.96fr;

    overflow: hidden;

    background: var(--white);

    border: 1px solid rgba(46, 125, 91, 0.14);
    border-radius: 30px;

    box-shadow: var(--shadow);
}

/* =========================================
   PC 브랜드 영역
   - 글자 없는 제주 풍경 이미지
   - 브랜드 제목은 CSS/HTML 텍스트로 선명하게 표시
========================================= */

.brand-panel {
    position: relative;

    min-height: 680px;

    overflow: hidden;

    padding: 0;

    color: var(--white);

    background: #1F6548;
}

.brand-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;
}

.brand-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(10, 42, 30, 0.04) 42%,
            rgba(10, 42, 30, 0.34) 100%);

    pointer-events: none;
}

/* 이미지 안에는 글자를 넣지 않고 HTML 텍스트로 표시 */
.brand-content {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 32px;

    text-align: center;
}

.brand-logo-wrap,
.brand-divider,
.brand-message,
.brand-footer {
    display: none;
}

.brand-name {
    display: block;

    margin: 0 0 7px;

    color: #FFFFFF;

    font-size: clamp(2.2rem, 3.6vw, 3.35rem);
    font-weight: 850;

    letter-spacing: -0.045em;

    text-shadow:
        0 3px 14px rgba(10, 45, 33, 0.56);
}

.brand-subtitle {
    display: block;

    margin: 0;

    color: rgba(255, 255, 255, 0.96);

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;

    text-shadow:
        0 2px 10px rgba(10, 45, 33, 0.58);
}

.brand-panel::before,
.brand-panel::after {
    display: none;
    content: none;
}

/* =========================================
           로그인 영역
        ========================================= */

.login-panel {
    display: flex;
    align-items: center;

    padding: 54px 62px;

    background:
        linear-gradient(160deg,
            #FFFFFF 0%,
            #FCFFFD 60%,
            #F2FAF6 100%);
}

.login-box {
    width: 100%;
    max-width: 430px;

    margin: 0 auto;
}

.mobile-brand {
    display: none;
}

.login-heading {
    margin-bottom: 30px;
}

.login-heading h1 {
    margin: 0 0 9px;

    color: var(--jeju-green-dark);

    font-size: 2rem;
    font-weight: 850;

    letter-spacing: -0.04em;
}

.login-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 0.98rem;
    line-height: 1.7;
}

.alert-custom {
    margin-bottom: 20px;
    padding: 13px 15px;

    border: 0;
    border-radius: 12px;

    font-size: 0.88rem;
    line-height: 1.55;
}

.form-label {
    margin-bottom: 9px;

    color: var(--jeju-green-dark);

    font-size: 0.92rem;
    font-weight: 760;
}

.input-wrap {
    position: relative;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 17px;

    z-index: 3;

    color: var(--jeju-sea);

    font-size: 1.05rem;

    transform: translateY(-50%);

    pointer-events: none;
}

.form-control-custom {
    width: 100%;
    height: 58px;

    padding: 0 50px 0 48px;

    color: var(--ink);

    background: #FFFFFF;

    border: 1.5px solid var(--line);
    border-radius: 15px;

    outline: none;

    box-shadow:
        0 5px 16px rgba(46, 125, 91, 0.05);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.form-control-custom::placeholder {
    color: #9EADA5;
}

.form-control-custom:focus {
    border-color: var(--jeju-sea);

    box-shadow:
        0 0 0 4px rgba(68, 179, 179, 0.12),
        0 10px 24px rgba(46, 125, 91, 0.09);

    transform: translateY(-1px);
}

.input-help {
    margin-top: 8px;

    color: var(--muted);

    font-size: 0.78rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 11px;

    z-index: 3;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--jeju-sea-dark);

    background: transparent;

    border: 0;
    border-radius: 11px;

    transform: translateY(-50%);

    cursor: pointer;
}

.password-toggle:hover {
    color: var(--jeju-green-dark);
    background: var(--jeju-sea-soft);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 14px;

    margin: 22px 0;
}

.form-check-input:checked {
    background-color: var(--jeju-green);
    border-color: var(--jeju-green);
}

.form-check-label {
    color: var(--muted);

    font-size: 0.88rem;
}

.text-link {
    color: var(--jeju-sea-dark);

    font-size: 0.88rem;
    font-weight: 720;

    text-decoration: none;
}

.text-link:hover {
    color: var(--jeju-orange-dark);
    text-decoration: underline;
}

.login-button {
    width: 100%;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: #FFFFFF;

    background:
        linear-gradient(135deg,
            var(--jeju-green) 0%,
            #34986F 50%,
            var(--jeju-sea) 100%);

    border: 0;
    border-radius: 16px;

    font-size: 1.03rem;
    font-weight: 850;

    box-shadow:
        0 14px 30px rgba(46, 125, 91, 0.28);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.login-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 36px rgba(46, 125, 91, 0.34);

    filter: saturate(1.05);
}

.login-button:active {
    transform: translateY(0);
}

.login-button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.sub-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 18px;
}

.sub-action-link {
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--jeju-green-dark);

    background: #FFFFFF;

    border: 1.5px solid #CCE3D7;
    border-radius: 14px;

    font-size: 0.9rem;
    font-weight: 760;

    text-decoration: none;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}

.sub-action-link:hover {
    color: var(--jeju-sea-dark);

    background:
        linear-gradient(135deg,
            var(--jeju-green-soft),
            var(--jeju-sea-soft));

    border-color: var(--jeju-sea);

    transform: translateY(-1px);
}

.security-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 27px;
    padding: 15px 17px;

    color: #587066;

    background:
        linear-gradient(135deg,
            var(--jeju-green-soft),
            #F8FCF9);

    border: 1px solid #D9EDE2;
    border-radius: 14px;

    font-size: 0.8rem;
    line-height: 1.55;
}

.security-note i {
    margin-top: 1px;

    color: var(--jeju-green);
}

.mobile-philosophy,
.mobile-copyright {
    display: none;
}

/* =========================================
           태블릿
        ========================================= */

@media (max-width: 991.98px) {
    .login-page {
        padding: 20px;
    }

    .login-shell {
        grid-template-columns: 0.92fr 1.08fr;
        border-radius: 24px;
    }

    .brand-panel {
        min-height: 640px;
        padding: 0;
    }

    .login-panel {
        padding: 46px 36px;
    }

}

/* =========================================
   모바일 로그인 화면
   - 제주 배경 이미지
   - 반투명 Glass 카드
========================================= */

@media (max-width: 767.98px) {

    html,
    body {
        min-height: 100%;
        color: var(--text) !important;
        background: #183f31 !important;
    }

    body {
        position: relative;
        min-height: 100svh;

        background-image:
            linear-gradient(180deg,
                rgba(10, 41, 30, 0.20) 0%,
                rgba(10, 41, 30, 0.08) 30%,
                rgba(10, 41, 30, 0.34) 100%),
            url("../images/jeju-safety-login-bg.webp") !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }

    body::before {
        content: "";

        position: fixed;
        inset: 0;
        z-index: 0;

        background:
            linear-gradient(180deg,
                rgba(7, 35, 25, 0.10) 0%,
                rgba(7, 35, 25, 0.02) 38%,
                rgba(7, 35, 25, 0.28) 100%);

        pointer-events: none;
    }

    .login-page {
        position: relative;
        z-index: 1;

        min-height: 100svh;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        padding:
            calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    }

    .login-shell {
        display: block;

        width: 100%;
        max-width: 520px;

        overflow: visible;

        background: transparent !important;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .brand-panel {
        display: none;
    }

    .login-panel {
        min-height: auto;

        display: block;

        padding: 0;

        background: transparent !important;
    }

    .login-box {
        width: 100%;
        max-width: 500px;

        margin: 0 auto;
        padding: 24px 22px 22px;

        background: rgba(255, 255, 255, 0.88);

        border: 1px solid rgba(255, 255, 255, 0.70);
        border-radius: 26px;

        box-shadow:
            0 20px 55px rgba(10, 46, 33, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.75);

        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .mobile-brand {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin: 0 0 22px;

        text-align: center;
    }

    .mobile-logo-wrap {
        width: 92px;
        height: 92px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 14px;

        background: rgba(255, 255, 255, 0.93);

        border: 2px solid rgba(46, 125, 91, 0.16);
        border-radius: 24px;

        box-shadow:
            0 12px 30px rgba(23, 56, 45, 0.16);
    }

    .mobile-logo {
        width: 74px;
        height: 74px;

        display: block;

        object-fit: contain;
    }

    .mobile-brand-name {
        margin: 0 0 4px;

        color: var(--jeju-green-dark);

        font-size: 1.82rem;
        font-weight: 850;

        letter-spacing: -0.04em;

        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.75);
    }

    .mobile-brand-subtitle {
        margin: 0;

        color: #547064;

        font-size: 0.88rem;
        font-weight: 650;
        line-height: 1.55;
    }

    .login-heading {
        margin-bottom: 22px;

        text-align: center;
    }

    .login-heading h1 {
        margin-bottom: 7px;

        font-size: 1.5rem;
    }

    .login-heading p {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .alert-custom {
        margin-bottom: 16px;
    }

    .form-control-custom {
        height: 56px;

        background: rgba(255, 255, 255, 0.95) !important;

        border-color: rgba(46, 125, 91, 0.20);
    }

    .form-control-custom:focus {
        background: #FFFFFF !important;
    }

    .login-options {
        margin: 19px 0;
    }

    .login-button {
        height: 58px;

        box-shadow:
            0 13px 28px rgba(46, 125, 91, 0.30);
    }

    .sub-actions {
        gap: 10px;

        margin-top: 15px;
    }

    .sub-action-link {
        height: 48px;

        background: rgba(255, 255, 255, 0.86);
    }

    .security-note {
        margin-top: 20px;
        padding: 13px 15px;

        background: rgba(234, 245, 239, 0.88);
    }

    .mobile-philosophy {
        display: block;

        margin-top: 20px;
        padding: 18px 16px;

        color: #425E53;

        background:
            linear-gradient(145deg,
                rgba(234, 245, 239, 0.90) 0%,
                rgba(240, 246, 234, 0.88) 52%,
                rgba(232, 248, 248, 0.88) 100%);

        border: 1px solid rgba(46, 125, 91, 0.13);
        border-radius: 17px;

        box-shadow:
            0 8px 22px rgba(46, 125, 91, 0.08);

        font-size: 0.82rem;
        line-height: 1.8;

        text-align: center;

        word-break: keep-all;
    }

    .mobile-philosophy strong {
        color: var(--jeju-orange-dark);
    }

    .mobile-copyright {
        display: block;

        margin: 18px 0 0;

        color: rgba(36, 70, 58, 0.62);

        font-size: 0.72rem;

        text-align: center;
    }
}

@media (max-width: 374px) {

    .login-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .login-box {
        padding: 21px 16px 19px;

        border-radius: 22px;
    }

    .mobile-logo-wrap {
        width: 84px;
        height: 84px;
    }

    .mobile-logo {
        width: 68px;
        height: 68px;
    }

    .mobile-brand-name {
        font-size: 1.62rem;
    }

    .sub-actions {
        grid-template-columns: 1fr;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-color-scheme: dark) {

    html,
    body,
    .login-page,
    .login-shell,
    .login-panel {
        color-scheme: light only !important;
    }

    body {
        color: var(--text) !important;
        background: #F4FBF7 !important;
    }

    .login-panel,
    .login-shell {
        background-color: #FFFFFF !important;
    }

    .form-control-custom {
        color: var(--ink) !important;
        background: #FFFFFF !important;
        border-color: var(--line) !important;
    }

    .form-control-custom::placeholder {
        color: #9EADA5 !important;
    }
}