<?php
/*
 * popup_login.php — 보유포인트 팝업용 독립 로그인 미니페이지
 * point.php 게스트 섹션과 동일 방식 (외부 CSS 없음, 인라인만 사용)
 */
include_once('./_common.php');

// 이미 로그인된 경우 포인트 페이지로 이동
if (!$is_guest) {
    header('Location: ' . G5_BBS_URL . '/point.php?g5_layer=1&g5_parent_refresh=1');
    exit;
}

$login_action_url = G5_HTTPS_BBS_URL . '/login_check.php';
$redirect_url     = G5_BBS_URL . '/point.php?g5_layer=1&g5_parent_refresh=1';
$full_login_url   = G5_BBS_URL . '/login.php?g5_layer=1&url=' . urlencode($redirect_url);
if (isset($_GET['vpntheme']) && $_GET['vpntheme'] === 'dark') { $_g5_vpn_theme = 'dark'; }
elseif (isset($_GET['vpntheme']) && $_GET['vpntheme'] === 'light') { $_g5_vpn_theme = 'light'; }
elseif (!empty($_COOKIE['vpnlink_dark']) && $_COOKIE['vpnlink_dark'] === '1') { $_g5_vpn_theme = 'dark'; }
else { $_g5_vpn_theme = 'light'; }
?>
<!doctype html>
<html lang="ko" data-site-theme="<?php echo $_g5_vpn_theme; ?>">
<head>
<meta charset="utf-8">
<script>(function(){
/* 1순위: iframe 안에서는 부모 창의 data-site-theme을 직접 읽음 */
if(window.self!==window.top){try{var pt=window.parent.document.documentElement.getAttribute('data-site-theme');if(pt==='light'||pt==='dark'){document.documentElement.setAttribute('data-site-theme',pt);return;}}catch(e){}}
/* 2순위: vpntheme URL 파라미터 */
try{var vt=new URLSearchParams(window.location.search).get('vpntheme');if(vt==='light'||vt==='dark'){document.documentElement.setAttribute('data-site-theme',vt);return;}}catch(e){}
var eff='light';
try{
  var m=document.cookie.match(/(?:^|;\s*)vpnlink_dark=([01])/);
  if(m){eff=(m[1]==='1')?'dark':'light';}
  else{throw '';}
}catch(e){
  var t='system';
  try{t=localStorage.getItem('vpnlink_site_theme')||'system';}catch(e2){}
  var s=(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches)?'dark':'light';
  eff=(t==='system')?s:t;
}
document.documentElement.setAttribute('data-site-theme',eff);
}());</script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>로그인</title>
<style>
html[data-site-theme="light"]{color-scheme:light}
html[data-site-theme="dark"]{color-scheme:dark}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c5cdd8;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#a0aabb}
[data-site-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a3a52}[data-site-theme="dark"] ::-webkit-scrollbar-track{background:#1a1b1e}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Noto Sans KR',Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:#f1f5f9;
  color:#0f172a;
  min-height:100%;
}
.card{
  width:min(380px,100%);
  background:#ffffff;
  border:1px solid #dbe4f0;
  border-radius:14px;
  box-shadow:0 16px 42px rgba(15,23,42,.18);
  padding:28px 24px 22px;
}
.fg{margin-bottom:16px}
.fg label{
  display:block;font-size:14px;font-weight:700;
  margin-bottom:8px;color:#1f2937;
}
.fi{position:relative}
.fc{
  display:block;width:100%;height:46px;
  border:1px solid #d1d9e6;border-radius:9px;
  background:#ffffff;font-size:15px;
  padding:0 40px 0 14px;color:#0f172a;
  font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.fc:focus{
  outline:none;border-color:#3b5fa3;
  box-shadow:0 0 0 3px rgba(59,95,163,.13);
}
.fi-icon{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:#9ca3af;font-size:15px;pointer-events:none;line-height:1;
}
.btn-login{
  display:block;width:100%;height:48px;
  background:linear-gradient(180deg,#4f76b3 0%,#35598d 100%);
  border:1px solid #2f4b7f;border-radius:9px;
  color:#fff;font-size:16px;font-weight:700;
  cursor:pointer;margin-top:6px;
  font-family:inherit;
  transition:background .18s;
}
.btn-login:hover{background:linear-gradient(180deg,#3b5fa3 0%,#2f4b7f 100%)}

/* ── 다크모드 (data-site-theme="dark") ── */
[data-site-theme="dark"] body{background:#1a1b1e;color:#e4e4e7}
[data-site-theme="dark"] .card{
  background:#252528;
  border-color:#3a3a42;
  box-shadow:0 16px 42px rgba(0,0,0,.5);
}
[data-site-theme="dark"] .fg label{color:#c4c4cc}
[data-site-theme="dark"] .fc{
  background:#1e1e24;
  border-color:#4a4a52;
  color:#e4e4e7;
}
[data-site-theme="dark"] .fc:focus{border-color:#3b5fa3}
[data-site-theme="dark"] .fi-icon{color:#71717a}
[data-site-theme="dark"] .btn-login{
  background:linear-gradient(180deg,#3b5fa3 0%,#2f4b7f 100%);
  border-color:#274170;
}

/* ── OS 다크모드 폴백 (JS가 실행되지 않은 경우에만 적용) ── */
@media (prefers-color-scheme:dark){
  html:not([data-site-theme]) body{background:#1a1b1e;color:#e4e4e7}
  html:not([data-site-theme]) .card{background:#252528;border-color:#3a3a42;box-shadow:0 16px 42px rgba(0,0,0,.5)}
  html:not([data-site-theme]) .fg label{color:#c4c4cc}
  html:not([data-site-theme]) .fc{background:#1e1e24;border-color:#4a4a52;color:#e4e4e7}
  html:not([data-site-theme]) .fi-icon{color:#71717a}
  html:not([data-site-theme]) .btn-login{background:linear-gradient(180deg,#3b5fa3 0%,#2f4b7f 100%);border-color:#274170}
}
</style>
</head>
<body>
<div class="card">
  <form method="post" action="<?php echo htmlspecialchars($login_action_url); ?>">
    <input type="hidden" name="url" value="<?php echo htmlspecialchars($redirect_url); ?>">
    <div class="fg">
      <label for="pu_mb_id">아이디 또는 이메일</label>
      <div class="fi">
        <input type="text" id="pu_mb_id" name="mb_id" class="fc"
               placeholder="ID or Email" required autocomplete="username">
        <span class="fi-icon">👤</span>
      </div>
    </div>
    <div class="fg">
      <label for="pu_mb_pw">비밀번호</label>
      <div class="fi">
        <input type="password" id="pu_mb_pw" name="mb_password" class="fc"
               placeholder="Password" required autocomplete="current-password">
        <span class="fi-icon">🔒</span>
      </div>
    </div>
    <button type="submit" class="btn-login">&#10132; 로그인</button>
  </form>
</div>
</body>
</html>
