@charset "utf-8";

/* =============================
   style.css (Register type_2 + Result)
   - 라이트/다크 모드 균형
   - input/textarea/select 배경/글자색 동기화
   - 심플 레이어팝업
   - 가입결과(Card) 디자인 추가
   ============================= */

/* 전역 컬러 토큰 */
:root{
  --bg:#f6f8fb;
  --fg:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --card-2:#f8fafc;
  --border:rgba(2,6,23,.08);
  --input:#eef2f7;       /* 라이트 입력칸 배경 */
  --accent:#22c55e;
  --danger:#ef4444;
  --ring:rgba(34,197,94,.18);
  --shadow:0 14px 40px rgba(2,6,23,.08);
}

/* 다크 모드 (body.theme-dark 토글 가정) */
.theme-dark{
  --bg:#0b1220;
  --fg:#e2e8f0;
  --muted:#94a3b8;
  --card:#111827;
  --card-2:#0f172a;
  --border:rgba(255,255,255,.08);
  --input:#0b1220;       /* 다크 입력칸 배경 */
  --accent:#22c55e;
  --danger:#ef4444;
  --ring:rgba(34,197,94,.25);
  --shadow:0 18px 52px rgba(0,0,0,.55);
}

/* 기본 배경/텍스트 */

/* 왼쪽메뉴 제거 */
#sidemenu{display:none!important;}

/* ===== Register Layout ===== */
.gsreg-page{min-height:calc(100vh - 120px); display:grid; place-items:center; padding:28px 0;}
.gs-card{width:min(720px,92vw); background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);}
.gs-head{display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid var(--border)}
.gs-head .brand img{height:36px; display:block}
.gs-head h2{margin:0; font-size:18px; letter-spacing:-.2px}
.gs-body{padding:18px 20px; display:grid; gap:14px}
.gs-actions{display:flex; gap:8px; align-items:center; padding:16px 20px; border-top:1px solid var(--border)}

/* rows */
.row{display:grid; gap:8px}
.row span.title_mb{display:none;}
.row .field{display:flex; gap:0; align-items:center; position:relative}

#captcha legend{position:static; line-height:100%!important;}
#captcha label{display:none;}

/* ===== Form Controls ===== */
.frm_input,
.gs-card select,
.gs-card textarea{
  width:100%;
  border:1px solid var(--border);
  background:var(--input);   /* ✅ 라이트/다크 자동 전환 */
  color:var(--fg);
  height:48px;
  border-radius:12px;
  padding:0 12px;
  outline:none;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}
.gs-card textarea{height:120px; padding:12px; resize:vertical}

/* placeholder 대비 */
.frm_input::placeholder,
.gs-card textarea::placeholder{color:rgba(100,116,139,.70);}
.theme-dark .frm_input::placeholder,
.theme-dark .gs-card textarea::placeholder{color:rgba(148,163,184,.70);}

/* focus */
.frm_input:focus,
.gs-card select:focus,
.gs-card textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--ring);
  background:var(--card-2);
}

/* labels / helper */
label{font-size:13px; color:var(--muted)}
.hint{font-size:12px; color:var(--muted)}
.hint.bad{color:var(--danger)}
.title_mb{font-size:11px; color:var(--muted)}

/* buttons (공용) */
.btn{appearance:none; background:var(--card-2); color:var(--fg); border:1px solid var(--border);
     border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-block}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#16a34a); color:#fff; border:0}
.btn_submit{ /* 기존 클래스 호환 */
  appearance:none; background:linear-gradient(135deg,var(--accent),#16a34a);
  color:#fff; border:0; border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-block
}
.btn_submit:disabled{opacity:.5; cursor:not-allowed}
.btn_cancel{
  margin-left:auto; background:var(--card-2); color:var(--fg);
  border:1px solid var(--border); border-radius:12px; padding:12px 16px; text-decoration:none
}
.btn_leave{margin-left:auto; font-size:12px; color:var(--muted); text-decoration:underline}
.btn-line{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:1px solid var(--border); background:var(--card-2); color:var(--fg);
  border-radius:8px; padding:6px 10px; font-size:12px; text-decoration:none
}
.btn-ghost{position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); font-size:13px; cursor:pointer}

/* alerts */
.alert{font-size:12px; border-radius:10px; padding:8px 10px}
.alert-success{display:none; background:rgba(34,197,94,.12); color:#16a34a}
.alert-danger{display:none; background:rgba(239,68,68,.12); color:#ef4444}

/* consent */
.consent{clear:both; display:block; align-items:flex-start; gap:8px}
.consent label{display:block;}
.consent .ment{font-size:13px; color:var(--muted)}
.consent .ment a{color:inherit; text-decoration:underline}

/* 사용 가능 메시지 */
.useok{display:none; position:absolute; right:100px; top:50%; transform:translateY(-50%); color:#0ea5e9; font-size:12px}

/* ===== Layer (Privacy/Terms) ===== */
.gs-layer{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:9999}
.gs-layer.is-open{display:flex}
.gs-layer .panel{width:min(800px,94vw); background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:85vh}
.gs-layer .panel-hd{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.gs-layer .panel-bd{padding:12px 16px; overflow:auto}
.gs-layer .panel-bd textarea{width:100%; height:55vh; border:1px solid var(--border); background:var(--card-2); color:var(--fg); border-radius:10px; padding:12px}
.gs-layer .panel-ft{display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border)}
.gs-layer .btn-primary{appearance:none; border:0; border-radius:10px; padding:10px 14px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer}
.gs-layer .close-layer{appearance:none; background:transparent; border:0; color:var(--muted); font-size:18px; cursor:pointer}

/* 기존 부트스트랩 모달이 노출되던 문제 방지 */
.modal, .modal-backdrop{display:none!important}

#msg_mb_nick{display:block;}

/* 셀렉트 기본 미화 */
select:not([multiple]):not([size]){
  height:44px; border-radius:10px; background:var(--input);
  border:1px solid var(--border); padding:0 12px; color:var(--fg)
}
select:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}

/* 레이아웃 충돌 최소화 */
#register_form, #reg_result, .mbskin{width:100%!important; margin:0 auto!important; padding:0!important}
.form_01 li, .stage{margin:0}

/* =============================
   가입결과(Result) 스타일
   ============================= */
.reg-result{min-height:calc(100vh - 140px); display:grid; place-items:center; padding:40px 16px;}
.reg-result .card{
  width:min(880px,96vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:28px;
}
.reg-result .hero{text-align:center; margin-bottom:16px}
.reg-result .hero .illus{height:120px; display:block; margin:6px auto 10px}
.reg-result .hero h1{margin:0 0 6px; font-size:22px; letter-spacing:-.3px}
.reg-result .hero .welcome{margin:0; color:var(--muted); font-size:14px}
.reg-result .hero .welcome strong{color:var(--fg)}

.notice-box{
  background:var(--card-2); border:1px solid var(--border);
  border-radius:12px; padding:14px; margin:16px 0;
}
.result-info{margin-top:10px}
.result-info dl{display:grid; grid-template-columns:100px 1fr; gap:8px 12px; margin:8px 0 0}
.result-info dt{color:var(--muted)}
.result-info dd{margin:0; font-weight:700}

.tips{list-style:none; padding:0; margin:10px 0 0; color:var(--muted)}
.tips li{margin:4px 0}
.tips li::before{content:"•"; margin-right:6px}

.actions{display:flex; gap:10px; justify-content:center; margin-top:22px}
.actions .btn.secondary{background:var(--card-2); color:var(--fg); border:1px solid var(--border)}

/* 반응형 */
@media (max-width:520px){
  .gs-actions{flex-wrap:wrap}
  .btn_cancel{order:3; width:100%; text-align:center}
    .btn_submit{order:3; width:100%; text-align:center}
  .result-info dl{grid-template-columns:90px 1fr}
}


/* Turnstile 위젯 & 허니팟 */
.cf-turnstile { margin-top:6px; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }


/* =========================================
   LOGIN (login.skin.php) — Responsive styles
   - Uses the same CSS variables as register page
   - Works with light/dark via :root / .theme-dark tokens
   ========================================= */

/* Page wrapper */
#mb_login.mbskin{
  min-height:calc(100vh - 120px);
  display:grid;
  align-content:center;
  padding:24px 12px;
  /* background:var(--bg); */
  color:var(--fg);
}

/* Logo */
#mb_login h1{
  margin:0 0 14px;
  text-align:center;
}
#mb_login h1 img{
  height:44px;
  display:inline-block;
}

/* Card */
#mb_login form{
  width:min(480px, 94vw);
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* Fieldset */
#login_fs{
  border:0;
  margin:0;
  padding:22px 18px 18px;
  display:grid;
  gap:12px;
  position:relative;
}
#login_fs legend{position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; overflow:hidden;}

/* Inputs */
#login_fs .frm_input{
  width:100%;
  height:50px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--input);
  color:var(--fg);
  padding:0 14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
#login_fs .frm_input::placeholder{ color:rgba(100,116,139,.75); }
.theme-dark #login_fs .frm_input::placeholder{ color:rgba(148,163,184,.75); }

#login_fs .frm_input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--ring);
  background:var(--card-2);
}

/* Show password button (placed after #login_pw) */
#login_pw{ padding-right:76px; }
#login_pw + #showPassword{
  position:absolute !important;
right: 28px !important;
    top: 94px !important;
  /* keep existing vertical position if inline style present */
  z-index:2;
  height:30px;
  padding:0 10px;
  line-height:30px;
  border-radius:8px;
  border:1px solid var(--border) !important;
  background:var(--card-2) !important;
  color:var(--muted) !important;
  cursor:pointer;
}

/* Submit button */
#mb_login .btn_submit.right_btn{
  width:100%;
  height:50px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg, var(--accent), #16a34a);
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(22,163,74,.25);
  cursor:pointer;
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
#mb_login .btn_submit.right_btn:hover{ filter:brightness(1.04); }
#mb_login .btn_submit.right_btn:active{ transform:translateY(1px); }

/* Auto login */
#mb_login .agree_check{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:2px;
  color:var(--muted);
}
#mb_login .agree_check input[type=checkbox]{ width:18px; height:18px; }

/* Bottom actions */
#mb_login .btn_group.btn-return{
  display:flex;
  gap:10px;
  margin-top:2px;
}
#mb_login .btn_group.btn-return a{
  flex:1 1 0;
  text-align:center;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid var(--border);
  background:var(--card-2);
  color:var(--fg);
  transition:box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}
#mb_login .btn_group.btn-return a:hover{
  box-shadow:0 0 0 3px var(--ring) inset;
}
#mb_login .btn_group.btn-return a.join{
  border:0;
  background:linear-gradient(135deg, var(--accent), #16a34a);
  color:#fff;
}

/* Side info (social login area, etc.) */
#login_info{
  padding:14px 18px 18px;
  color:var(--muted);
  border-top:1px solid var(--border);
}
#login_info h2{
  font-size:14px;
  margin:0 0 10px;
  color:var(--fg);
}

/* ===== Responsive ===== */
@media (max-width: 480px){
  #mb_login h1 img{ height:40px; }
  #login_fs{ padding:18px 14px 14px; gap:10px; }
  #login_pw + #showPassword{ right:12px !important; }
  #mb_login .btn_group.btn-return a{ padding:11px 12px; font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  #login_fs .frm_input,
  #mb_login .btn_submit.right_btn,
  #mb_login .btn_group.btn-return a{ transition:none; }
}