@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;600;700&family=Cinzel:wght@400;600;700&family=Noto+Sans+KR:wght@300;400;500&display=swap');

/* ════════════════════════════════════════
   CSS 변수
════════════════════════════════════════ */
:root {
    --gold: #c9a84c;
    --gold-dark: #b8943e;
    --green-deep: #0e2018;
    --green-card: rgba(12, 26, 18, 0.82);
    --white-dim: rgba(255,255,255,0.07);
    --border-gold: rgba(201,168,76,0.22);
}

/* ════════════════════════════════════════
   리셋 & 기본
════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--green-deep);
    overflow: hidden;
    height: 100vh;
}

/* ════════════════════════════════════════
   .wrapper
   → 배경 이미지 + flex 중앙정렬로
     .login-area(→ .container)를 화면 중앙에 배치
════════════════════════════════════════ */
.wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url(/Myoffice/Account/images/bg2.png) no-repeat center center / cover !important;
    background-color: var(--green-deep) !important;
    /* 핵심: flex로 자식 중앙정렬 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    /* 다크 오버레이 */
    .wrapper::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(14,32,24,0.50) 0%, transparent 70%), linear-gradient(180deg, rgba(6,16,10,0.60) 0%, rgba(14,32,24,0.40) 50%, rgba(6,16,10,0.72) 100%);
        z-index: 0;
        pointer-events: none;
    }

    /* 골드 원형 장식 */
    .wrapper::after {
        content: '';
        position: absolute;
        width: 700px;
        height: 700px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        border: 1px solid rgba(201,168,76,0.07);
        animation: rotateSlow 40s linear infinite;
        z-index: 0;
        pointer-events: none;
    }

@keyframes rotateSlow {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

/* ════════════════════════════════════════
   .login-area
════════════════════════════════════════ */
.page-login .login-area {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ════════════════════════════════════════
   .container → 로그인 카드
   기존 CSS의 absolute + top/left/margin 값을
   모두 !important로 덮어씌움
════════════════════════════════════════ */
.page-login .container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
    width: 360px !important;
    padding: 46px 40px 40px !important;
    background: var(--green-card) !important;
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border: 1px solid var(--border-gold) !important;
    border-radius: 4px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.65), inset 0 1px 0 rgba(201,168,76,0.14) !important;
    text-align: center;
    animation: cardIn 0.85s cubic-bezier(0.22,1,0.36,1) both;
}

    /* 카드 상단 골드 라인 */
    .page-login .container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ════════════════════════════════════════
   로고
════════════════════════════════════════ */
.login_logo {
    margin-bottom: 0;
}

    .login_logo img {
        width: 130px !important;
        filter: drop-shadow(0 4px 14px rgba(201,168,76,0.28));
    }

    /* 브랜드명 */
    .login_logo::after {
        content: '(주)거상물산';
        display: block;
        margin-top: 12px;
        font-family: 'Noto Serif KR', serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.18em;
        color: rgba(255,255,255,0.88);
        text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }

/* ── 골드 구분선 ── */
.divider-gold {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
}

.divider-gold-line {
    flex: 1;
    height: 1px;
}

    .divider-gold-line:first-child {
        background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55));
    }

    .divider-gold-line:last-child {
        background: linear-gradient(90deg, rgba(201,168,76,0.55), transparent);
    }

.divider-gold-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .divider-gold-dots i {
        width: 3px;
        height: 3px;
        background: rgba(201,168,76,0.6);
        border-radius: 50%;
        display: inline-block;
    }

        .divider-gold-dots i:nth-child(2) {
            width: 5px;
            height: 5px;
            background: var(--gold);
            box-shadow: 0 0 8px rgba(201,168,76,0.7);
        }

/* ════════════════════════════════════════
   #sp_getMsg
════════════════════════════════════════ */
#sp_getMsg {
    display: block;
    min-height: 22px;
    margin-bottom: 4px;
}

    #sp_getMsg p {
        font-family: 'Cinzel', serif !important;
        font-size: 12px;
        letter-spacing: 0.14em;
        color: var(--gold);
        text-shadow: 0 0 14px rgba(201,168,76,0.5);
    }

/* ════════════════════════════════════════
   폼 전체
════════════════════════════════════════ */
form {
    padding: 14px 0 0;
    position: relative;
    z-index: 2;
}

.form-group {
    margin-bottom: 14px;
}

/* ── input-icon ── */
.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(201,168,76,0.45);
        font-size: 13px;
        pointer-events: none;
        transition: color 0.3s;
        z-index: 1;
    }

    .input-icon:focus-within > i {
        color: var(--gold);
    }

/* ── 입력 필드 ── */
.form-control,
form input[type="text"],
form input[type="password"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none !important;
    width: 100% !important;
    padding: 13px 16px 13px 40px !important;
    margin: 0 !important;
    background: var(--white-dim) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: 3px !important;
    color: #fff !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    display: block !important;
    text-align: left !important;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}

    .form-control:focus,
    form input[type="text"]:focus,
    form input[type="password"]:focus {
        background: rgba(255,255,255,0.11) !important;
        border-color: rgba(201,168,76,0.65) !important;
        box-shadow: 0 0 0 3px rgba(201,168,76,0.09) !important;
    }

    .form-control::placeholder,
    form input::placeholder {
        color: rgba(255,255,255,0.28) !important;
        font-size: 12px !important;
    }

/* 유효성 오류 */
.has-error .help-block {
    color: #e57373 !important;
    font-size: 10px !important;
    padding: 4px 2px 0 !important;
    margin: 0 !important;
    display: block !important;
    text-align: left;
    letter-spacing: 0.02em;
}

/* ── 로그인 버튼 ── */
#btn_Apply,
form button[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none !important;
    width: 100% !important;
    padding: 13px 16px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-dark) 100%) !important;
    background-size: 200% 100% !important;
    border: none !important;
    border-radius: 3px !important;
    color: #1a2a1e !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-position 0.4s, box-shadow 0.3s, transform 0.2s !important;
    box-shadow: 0 4px 20px rgba(201,168,76,0.28) !important;
}

    #btn_Apply:hover,
    form button[type="submit"]:hover {
        background-position: 100% 0 !important;
        box-shadow: 0 6px 28px rgba(201,168,76,0.5) !important;
        transform: translateY(-1px) !important;
    }

    #btn_Apply:active,
    form button[type="submit"]:active {
        transform: translateY(0) !important;
    }

/* padding-top 인라인 덮어쓰기 */
.page-login .container div[style*="padding-top"] {
    padding-top: 8px !important;
}

/* ── 링크 ([메인화면] [회원가입]) ── */
.page-login .container div[style*="text-align:right"],
.page-login .container div[style*="text-align: right"] {
    text-align: center !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
}

.page-login .container div a {
    color: rgba(201,168,76,0.52) !important;
    font-size: 11px !important;
    font-family: 'Noto Serif KR', serif !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    letter-spacing: 0.06em !important;
    padding: 0 6px !important;
    transition: color 0.3s !important;
}

    .page-login .container div a:hover {
        color: var(--gold) !important;
    }

/* ════════════════════════════════════════
   #footer
════════════════════════════════════════ */
#footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    background: linear-gradient(transparent, rgba(6,16,10,0.88)) !important;
    text-align: center;
    padding: 18px 0 14px !important;
    z-index: 20;
}

    #footer .copyright {
        color: rgba(201,168,76,0.30) !important;
        font-size: 10px !important;
        font-family: 'Noto Sans KR', sans-serif !important;
        font-weight: 300 !important;
        letter-spacing: 0.08em !important;
    }

/* ════════════════════════════════════════
   공지 팝업 (.modal)
════════════════════════════════════════ */
.modal {
    display: inline-block !important;
    position: fixed !important;
    z-index: 99999999 !important;
    top: 30px !important;
    left: 30px !important;
    width: 440px !important;
    padding: 26px 24px !important;
    background: rgba(10,22,14,0.95) !important;
    border: 1px solid rgba(201,168,76,0.22) !important;
    border-radius: 4px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(16px) !important;
}

    .modal .modalBody .Company {
        font-size: 13px !important;
        font-family: 'Cinzel', serif !important;
        color: var(--gold) !important;
        letter-spacing: 0.14em !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    .modal .modalBody .Substance {
        width: 100% !important;
        margin-top: 14px !important;
        padding: 12px !important;
        border: 1px solid rgba(201,168,76,0.15) !important;
        border-radius: 3px !important;
        background: rgba(255,255,255,0.04) !important;
        color: rgba(255,255,255,0.72) !important;
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
        resize: none !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        outline: none !important;
    }

    .modal .modalFooter {
        width: 100% !important;
        margin-top: 14px !important;
        display: flex !important;
        gap: 8px !important;
    }

        .modal .modalFooter .btn {
            flex: 1 !important;
            width: auto !important;
            display: block !important;
            padding: 10px !important;
            background: rgba(255,255,255,0.04) !important;
            border: 1px solid rgba(201,168,76,0.22) !important;
            border-radius: 3px !important;
            color: rgba(255,255,255,0.62) !important;
            font-family: 'Noto Sans KR', sans-serif !important;
            font-size: 11px !important;
            letter-spacing: 0.04em !important;
            cursor: pointer !important;
            transition: all 0.25s !important;
            text-align: center !important;
        }

            .modal .modalFooter .btn:hover {
                background: rgba(201,168,76,0.12) !important;
                border-color: var(--gold-dark) !important;
                color: var(--gold) !important;
            }

/* ════════════════════════════════════════
   반응형
════════════════════════════════════════ */
@media (max-width: 425px) {
    .page-login .container {
        width: 92vw !important;
        padding: 34px 22px 30px !important;
    }

    .wrapper {
        background-size: cover !important;
    }

    .modal {
        width: 92vw !important;
        left: 4vw !important;
        top: 14px !important;
    }

        .modal .modalFooter {
            flex-direction: column !important;
        }
}