<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// CSS는 _head.php에서 공통 로드됨 (bootstrap, style.css, partner-darkmode.css)

?>

<style>
/* ── Override page-wrapper (login page only) ── */
#page-wrapper {
    background: transparent !important;
    overflow: visible !important;
}

/* ── Root: full-bleed two-panel ── */
.pln-root {
    display: flex;
    align-items: stretch;
    /* cancel #page-wrapper padding: mobile 5px 15px, desktop 15px 25px */
    margin: -5px -15px;
    min-height: calc(100vh - 51px);
}
@media (min-width: 768px) {
    .pln-root { margin: -15px -25px; }
}

/* ── Left: brand panel ── */
.pln-brand {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    padding: 64px 48px;
    /*
     * 단순 2-stop 그라디언트: 중간 darkest-point 구간을 제거해
     * 좁은 패널에서 어두운 띠가 생기는 현상 방지
     */
    background: linear-gradient(135deg, #3730a3 0%, #6d28d9 100%);
}
.pln-brand-inner {
    margin: auto;         /* flex column + margin:auto → 수직·수평 중앙 */
    width: 100%;
    max-width: 320px;
    text-align: center;
    color: #fff;
}
.pln-brand-logo {
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto 18px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.pln-brand-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.32);
    color: rgba(255,255,255,0.9);
    margin-bottom: 40px;
}
.pln-brand-headline {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 14px;
    letter-spacing: -0.3px;
}
.pln-brand-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.68);
    line-height: 1.7;
    margin: 0 0 40px;
}
.pln-brand-features {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 28px;
}
.pln-brand-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    padding: 7px 0;
}
.pln-brand-features li::before {
    content: '\f00c'; /* fa-check */
    font-family: FontAwesome;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    font-size: 10px;
    text-align: center;
    color: #fff;
}

/* ── Right: form panel ── */
.pln-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 64px 48px;
    background: #18181b;
}
.pln-form-inner {
    margin: auto;           /* flex column + margin:auto → 수직·수평 중앙 */
    width: 100%;
    max-width: 340px;
}
.pln-form-title {
    font-size: 22px;
    font-weight: 700;
    color: #f0f0f4;
    margin: 0 0 6px;
}
.pln-form-sub {
    font-size: 13px;
    color: #71717a;
    margin: 0 0 32px;
}
.pln-field {
    position: relative;
    margin-bottom: 14px;
}
.pln-field-icon {
    position: absolute;
    top: 0; left: 0;
    width: 46px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #52525b;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}
.pln-field .form-control {
    height: 48px;
    background: #27272a;
    border: 1px solid #3f3f46;
    border-radius: 8px;
    color: #e4e4e7;
    font-size: 14px;
    padding: 0 16px 0 44px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pln-field .form-control::placeholder { color: #52525b; }
.pln-field .form-control:focus {
    border-color: #6d28d9;
    box-shadow: 0 0 0 3px rgba(109,40,217,0.18);
    outline: none;
    background: #2c2c30;
}
.pln-submit {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f46e5, #6d28d9);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: 8px;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}
.pln-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(109,40,217,0.38);
}
.pln-submit:active { transform: translateY(0); }
.pln-captcha-notice {
    color: #f87171;
    font-size: 12px;
    margin: 0 0 8px;
}

/* ── Light mode ── */
[data-site-theme="light"] .pln-form-panel,
html:not([data-site-theme="dark"]) .pln-form-panel {
    background: #ededf2;
}
[data-site-theme="light"] .pln-field .form-control,
html:not([data-site-theme="dark"]) .pln-field .form-control {
    background: #fff;
    border-color: #d4d4d8;
    color: #18181b;
}
[data-site-theme="light"] .pln-field .form-control::placeholder,
html:not([data-site-theme="dark"]) .pln-field .form-control::placeholder { color: #a1a1aa; }
[data-site-theme="light"] .pln-field .form-control:focus,
html:not([data-site-theme="dark"]) .pln-field .form-control:focus { background: #fff; }
[data-site-theme="light"] .pln-form-title,
html:not([data-site-theme="dark"]) .pln-form-title { color: #18181b; }
[data-site-theme="light"] .pln-form-sub,
html:not([data-site-theme="dark"]) .pln-form-sub { color: #71717a; }
[data-site-theme="light"] .pln-field-icon,
html:not([data-site-theme="dark"]) .pln-field-icon { color: #a1a1aa; }

/* ── Mobile: stack vertically ── */
@media (max-width: 767px) {
    .pln-root { flex-direction: column; }
    .pln-brand { flex: none; padding: 40px 28px; }
    .pln-brand-headline { font-size: 20px; }
    .pln-brand-features { display: none; }
    .pln-form-panel { padding: 40px 28px; }
    .pln-form-inner { margin: 0 auto; }
}
</style>

<div class="pln-root">

    <!-- ── Left: brand ── -->
    <div class="pln-brand">
        <div class="pln-brand-inner">
            <img src="<?php echo G5_DATA_URL; ?>/common/mobile_logo_img" alt="VPNLink" class="pln-brand-logo">
            <span class="pln-brand-badge">Partner Center</span>
            <p class="pln-brand-headline">판매자센터에<br>오신 것을 환영합니다</p>
            <p class="pln-brand-desc">VPNLink 공식 파트너 전용 관리 패널입니다.<br>승인된 셀러·마케터 계정으로 로그인하세요.</p>
            <ul class="pln-brand-features">
                <li>내 상품 등록 및 관리</li>
                <li>실시간 판매현황 확인</li>
                <li>댓글·문의·후기 관리</li>
                <li>수익 내역 및 출금 관리</li>
            </ul>
        </div>
    </div>

    <!-- ── Right: form ── -->
    <div class="pln-form-panel">
        <div class="pln-form-inner">
            <p class="pln-form-title">로그인</p>
            <p class="pln-form-sub">아이디와 비밀번호를 입력하세요</p>

            <form role="form" name="flogin" action="<?php echo $action_url; ?>" method="post" onsubmit="return flogin_submit(this);">
                <div class="pln-field">
                    <span class="pln-field-icon"><i class="fa fa-user"></i></span>
                    <input type="text" placeholder="User ID" id="login_id" name="mb_id" required class="form-control" autocomplete="username">
                </div>
                <div class="pln-field">
                    <span class="pln-field-icon"><i class="fa fa-lock"></i></span>
                    <input type="password" placeholder="Password" id="login_pw" required name="mb_password" class="form-control" autocomplete="current-password">
                </div>
                <?php if (!empty($login_captcha_required) && !empty($login_captcha_html)) { ?>
                <div class="pln-field">
                    <p class="pln-captcha-notice">로그인 실패가 누적되어 자동등록방지 숫자 입력이 필요합니다. (약 <?php echo ceil((int)$login_captcha_lock_seconds / 60); ?>분 후 자동 해제)</p>
                    <?php echo $login_captcha_html; ?>
                </div>
                <?php } ?>
                <button type="submit" class="pln-submit">LOGIN</button>
            </form>
        </div>
    </div>

</div>

<!-- JavaScript -->
<script type="text/javascript" src="<?php echo $skin_url;?>/assets/js/bootstrap.min.js"></script>
<script>
function flogin_submit(f)
{
    if (typeof chk_captcha === 'function' && document.getElementById('captcha_key')) {
        if (!chk_captcha()) { return false; }
    }
    return true;
}
</script>
