@charset "utf-8";

/* =====================================================
   Base: 로그인 공통
   ===================================================== */
/* 로그인1 */
.wp .login_flex_wrap { display:flex; align-items:stretch; gap:5px; }
.wp .login_inputs { display:flex; flex-direction:column; gap:5px; flex:1; }

/* 버튼(한 번만 정의) */
.wp .btn_b02 {
  padding:5px; height:90px; line-height:1.3; display:flex;
  flex-direction:column; justify-content:center; align-items:center;
  box-sizing:border-box;
  background-color:#3b4888;
  transition: background-color .3s ease, color .3s ease;
}
.wp .btn_b02 i { font-size:20px; transition: color .3s ease; }
.wp .btn_b02:hover { background-color:#3b4888; color:#fff; }
.wp .btn_b02:hover i { color:rgb(37,37,34); }

.wp .input_with_icon { position:relative; }
.wp .input_with_icon i {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:#999; font-size:16px; pointer-events:none;
}
.wp .input_with_icon input {
  padding-left:35px !important; width:100%; height:40px !important; box-sizing:border-box;
}

/* 로그인2 모달창 */
.md {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.5); z-index:9999; opacity:0; transition:opacity .3s ease;
}
.md.show { display:block; opacity:1; }
.md-content {
  position:relative; width:500px; max-width:95%; height:80%; margin:5% auto;
  background:#fff; border-radius:10px; overflow:hidden;
  transform:translateY(-20px); transition:transform .3s ease;
}
.md.show .md-content { transform:translateY(0); }
@media (max-width:768px) {
  .md-content { width:auto; height:90%; margin:5% auto; }
}
.md_close {
  position:absolute; top:0; right:15px; font-size:32px; font-weight:bold;
  color:#333; cursor:pointer; transition:color .2s ease;
}
.md_close:hover { color:red; }

/* 쪽지 알림깜박 */
.blink { animation:blink 1s infinite; color:#ff5252; }
@keyframes blink { 0%,50%,100%{opacity:1} 25%,75%{opacity:0} }

/* 유저인포리스트 */
.user-info-list {
  display:flex; gap:0; padding:0; margin:0; list-style:none;
  justify-content:center; align-items:center; width:100%;
}
.user-info-list li { flex:1 1 0; max-width:none; }
.item-box {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:10px; border-radius:0; transition:background-color .3s; color:#333;
  width:100%; box-sizing:border-box; cursor:pointer;
}
.item-box:hover { background-color:#f5f5f5; }
[data-theme="dark"] .item-box:hover { background-color:#21262D; }
.icon-wrap i { font-size:18px; margin-bottom:2px; color:#666; }
.text-wrap .label, .text-wrap strong { display:block; }
.text-wrap .label { font-size:14px; color:#555; margin-bottom:0; }
.text-wrap strong { font-size:12px; font-weight:bold; color:#007bff; white-space:nowrap; }

/* =====================================================
   Outlogin 박스(공통)
   ===================================================== */
.wp {
  position:relative; border:1px solid #dde7e9; margin-bottom:15px; border-radius:3px;
  background-color:#fff;
}
.wp h2 { width:117px; float:left; padding:15px 0; text-align:center; }
.wp #wp_be_cate:after { display:block; visibility:hidden; clear:both; content:""; }
.wp form { padding:5px; }
.wp a.btn_admin { display:inline-block; padding:0 10px; height:25px; text-decoration:none; line-height:25px; vertical-align:middle; }
.wp a.btn_admin:focus, .wp a.btn_admin:hover { text-decoration:none; }
.wp .login-sns { padding-bottom:0; }

#wp_before {}
#wp_before:after { display:block; visibility:hidden; clear:both; content:""; }
#wp_before .wp_wr { position:relative; margin-bottom:5px; }

/* 입력 */
#wp_id, #wp_pw {
  display:block; width:100%; border:1px solid #d0d3db; padding:0 10px;
  height:35px; margin-bottom:5px; border-radius:3px;
}
/* 추가 입력 보정(아이콘 공간) */
#wp_id { padding-left:30px; height:35px; box-sizing:border-box; width:100%; }

#wp_svc { float:right; line-height:20px; }
#wp_svc a { display:inline-block; border:1px solid #d5d9dd; color:#b8181a; border-radius:2px; padding:2px 5px; }
#wp_auto { float:left; line-height:20px; margin-top:5px; }
#wp_auto label { color:#555; vertical-align:baseline; }
.wp_auto_wr:after { display:block; visibility:hidden; clear:both; content:""; }
#sns_login { margin-top:0 !important; border-top:0 !important; }
#sns_login h3 { position:absolute; font-size:0; line-height:0; overflow:hidden; }

#wp_after {}
#wp_after_hd {  position:relative; padding:10px; padding-left:80px; height:auto; background-color:#ffffff;}
[data-theme="dark"] #wp_after_hd {  position:relative; padding:10px; padding-left:80px; height:auto; background-color:#161B22;}
#wp_after_hd strong { display:block; margin:0; }
#wp_after_hd .profile_img { position:absolute; top:10px; left:10px; display:inline-block; }
#wp_after_hd .profile_img img { border:0; border-radius:0; width:auto; height:50px; padding:0; }
#wp_after_hd .profile_img a { color:#ffffff; background-color:#b8181a; }
#wp_after_hd .profile_img a:hover { color:#b8181a; background-color:#ffffff; text-decoration:underline; }


#wp_after_info { display:inline-block; height:28px; line-height:22px; border:1px solid #d5d9dd; color:#b8181a; border-radius:2px; padding:2px 5px; }
#wp_after h2 { margin:0; padding:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden; }
#wp_after_hd .btn_admin { border-radius:3px; height:28px; line-height:28px; vertical-align:baseline; }
#wp_after_hd .btn_b04 { line-height:23px; padding:0 5px; }

#wp_after_private { zoom:1; }
#wp_after_private:after { display:block; visibility:hidden; clear:both; content:""; }
#wp_after_private li { text-align:left; position:relative; }
#wp_after_private li:first-child a { border-left:0; }
#wp_after_private a { display:block; color:#465168; line-height:18px; padding:10px 10px 10px 20px; }
#wp_after_private a strong {
  display:inline-block; float:right; max-width:87px; overflow:hidden; white-space:nowrap; text-overflow:clip;
  color:#b8181a; padding:0 5px; border-radius:15px; font-size:.92em;
}
#wp_after_private a:hover strong { background:#b8181a; color:#fff; }
#wp_after_private li a:hover { color:#b8181a; background:#f7f7f7; }
#wp_after_private li a:hover:after { position:absolute; left:-1px; top:0; width:2px; height:38px; background:#b8181a; content:""; }
#wp_after_private li i { width:25px; color:#8c9eb0; margin-right:5px; }
#wp_after_private li:hover i { color:#b8181a; }
#wp_after_private .win_point_code:hover strong { background:#37bc9b; color:#fff; }
#wp_after_private .win_memo_code:hover strong  { background:#8cc152; color:#fff; }
#wp_after_private .win_scrap_code:hover strong { background:#ff8b77; color:#fff; }

#wp_after_logout { text-align:center; font-weight:bold; display:block; padding:15px 0; color:#a0a0a1; border-top:1px solid #dde7e9; }
#wp_after_logout:hover { color:#b8181a; }
#wp_after_memo { margin-right:1px; }
#wp_after_pt { margin-right:1px; }

/* 체크박스 */
.selec_chk { position:absolute; top:0; left:0; width:0; height:0; opacity:0; outline:0; z-index:-1; overflow:hidden; }
.chk_box { position:relative; }
.chk_box input[type="checkbox"] + label { padding-left:20px; color:#676e70; }
.chk_box input[type="checkbox"] + label:hover { color:#b8181a; }
.chk_box input[type="checkbox"] + label span {
  position:absolute; top:2px; left:0; width:15px; height:15px; display:block; margin:0;
  background:#fff; border:1px solid #d0d4df; border-radius:3px;
}
.chk_box input[type="checkbox"]:checked + label { color:#000; }
.chk_box input[type="checkbox"]:checked + label span {
  background:url(./img/chk.png) no-repeat 50% 50% #b8181a; border-color:#1471f6; border-radius:3px;
}

/* 데스크톱 레이아웃만 필요한 추가가 있다면 여기 사용 */
@media (min-width:1025px) {
  /* 현재는 공통으로 충분하여 별도 내용 없음 */
}

/* =====================================================
   Dark Mode (data-theme="dark")
   ===================================================== */
[data-theme="dark"] .wp {
  border:1px solid #30363D;
  background-color:#161B22; /* !important 제거: 여기 블록이 후순서라 우선 적용 */
}

[data-theme="dark"] .wp h2 { color:#E4E6EB; }

/* 입력 */
[data-theme="dark"] #wp_id, 
[data-theme="dark"] #wp_pw {
  background-color:#30363D; border:1px solid #3A3F46; color:#C9D1D9;
}
[data-theme="dark"] #wp_id::placeholder,
[data-theme="dark"] #wp_pw::placeholder { color:#8B949E; }
[data-theme="dark"] #wp_id:focus,
[data-theme="dark"] #wp_pw:focus {
  ou