@charset "utf-8";

/* =========================================================
   BAMPhil - CLEAN CSS (single file)
   - 충돌/중복 제거(특히 body 흰배경 덮는 부분 제거)
   - 주석 최소화
========================================================= */

/* ===== THEME TOKENS ===== */
:root{
  --bp-radius-card: 16px;
  --bp-radius-ui: 12px;
  --bp-shadow: 0 10px 30px rgba(0,0,0,.35);
  --bp-shadow2: 0 6px 18px rgba(0,0,0,.28);

  --accent: #ffd27d;
  --bg: #0b0c10;
  --gold: #ffd27d;
  --gold2: rgba(255,210,125,.45);
  --line: #1d212a;
  --muted: #aab3c2;
  --panel: #111318;
  --panel2: #0f1116;
  --r-card: 16px;
  --r-ui: 14px;
  --shadow: 0 12px 30px rgba(0,0,0,.40);
  --txt: #e9eef7;
}

/* ===== GLOBAL BASE (배경/기본색만) ===== */
html, body{
  background: var(--bg);
  color: var(--txt);
  margin: 0;
  padding: 0;
}

/* 전역 링크 */
a{color: inherit; text-decoration: none;}
a:hover{color: var(--bp-point); text-decoration: none;}
:focus-visible{outline: 2px solid rgba(255,210,125,.28); outline-offset: 2px;}

/* ===== TOPBAR ICONS ===== */
.bp-ic{
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-ui);
  color: var(--txt);
  display: inline-flex;
  font-weight: 900;
  gap: 8px;
  padding: 9px 10px;
  text-decoration: none;
}
.bp-ic:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16);}
.bp-ic__emoji{font-size: 14px; line-height: 1;}
.bp-ic__txt{color: rgba(255,255,255,.80); font-size: 12px;}
.bp-ic--admin{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);}

@media (max-width: 920px){
  .bp-ic__txt{display: none;}
}

/* 로그인 안내문 숨김 */
#hd_login_msg{
  font-size: 0;
  line-height: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  left: 0;
  overflow: hidden;
  top: 0;
  white-space: nowrap;
  width: 1px;
  position: absolute !important;
}

/* ===== RECENT BOX ===== */
.bp-boxgrid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0 18px;
}
@media (max-width: 1100px){
  .bp-boxgrid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 700px){
  .bp-boxgrid{grid-template-columns: 1fr;}
}
.bpbox{
  display: block !important;
  min-height: 60px !important;
  background: var(--panel);
  border-radius: var(--r-card);
  overflow: hidden;
}
.bpbox__head{
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}
.bpbox__title{
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  padding-left: 12px;
  position: relative;
  text-decoration: none;
}
.bpbox__title::before{
  background: var(--gold);
  border-radius: 999px;
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
}
.bpbox__more{
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: rgba(255,255,255,.70);
  display: flex;
  font-size: 18px;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  width: 26px;
}
.bpbox__more:hover{border-color: rgba(255,210,125,.30); color: #fff;}
.bpbox__body{padding: 10px 14px 12px;}
.bpbox__list{list-style: none; margin: 0; padding: 0;}
.bpbox__item{
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 7px 0;
}
.bpbox__item:last-child{border-bottom: 0;}
.bpbox__link{
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bpbox__link:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bpbox__meta{align-items: center; display: flex; flex: 0 0 auto; gap: 8px;}
.bpbox__new{
  align-items: center;
  background: #ff3b30;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  height: 16px;
  justify-content: center;
  width: 16px;
}
.bpbox__date{color: rgba(255,255,255,.55); font-size: 12px; font-weight: 900;}
.bpbox__empty{color: rgba(255,255,255,.55); font-size: 13px; padding: 8px 0;}

/* ===== PAGING ===== */
.pg_wrap .pg a,
.pg_wrap .pg strong{
  border-radius: 10px;
  font-weight: 900;
  background: transparent !important;
  border-color: var(--line) !important;
  color: rgba(255,255,255,.75) !important;
}
.pg_wrap .pg strong{
  border-color: var(--gold2) !important;
  color: var(--gold) !important;
}

/* ===== FOOTER ===== */
.bp-footer{
  background: #05060a;
  border-top: 1px solid #1d212a;
  color: rgba(255,255,255,.65);
  margin-top: 60px;
}
.bp-footer__inner{
  display: grid;
  gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr;
  margin: 0 auto;
  max-width: 1200px;
  padding: 40px 14px;
}
.bp-footer__brand{color: #fff; font-size: 18px; font-weight: 900; margin-bottom: 10px;}
.bp-footer__desc{color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.6;}
.bp-footer__title{color: var(--gold); font-size: 13px; font-weight: 900; margin-bottom: 10px;}
.bp-footer__col a{color: rgba(255,255,255,.65); display: block; font-size: 13px; margin-bottom: 8px; text-decoration: none;}
.bp-footer__col a:hover{color: #fff; text-decoration: underline; text-underline-offset: 4px;}
.bp-footer__copy{border-top: 1px solid #1d212a; color: rgba(255,255,255,.45); font-size: 12px; padding: 14px; text-align: center;}
@media (max-width: 900px){
  .bp-footer__inner{gap: 24px; grid-template-columns: 1fr;}
}

/* ===== MEMO ===== */
#memo, .memo, #memo_list, #memo_write, #memo_view{
  color: var(--txt);
  margin: 0 auto 30px;
  max-width: 1200px;
  padding: 0 14px;
}
.bp-memo{margin: 0 auto 30px; max-width: 1200px; padding: 0 14px;}
.bp-memo__head{align-items: flex-end; display: flex; gap: 12px; justify-content: space-between; margin: 14px 0 12px;}
.bp-memo__title{color: #fff; font-size: 18px; font-weight: 900; letter-spacing: -0.2px; margin: 0;}
.bp-memo__panel{background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; padding: 14px;}
.bp-memo__list{list-style: none; margin: 0; padding: 0;}
.bp-memo__item{border-bottom: 1px solid rgba(255,255,255,.06); display: flex; gap: 14px; justify-content: space-between; padding: 12px 6px;}
.bp-memo__item:last-child{border-bottom: 0;}
.bp-memo__subject a{font-weight: 900; color: rgba(255,255,255,.92) !important; text-decoration: none !important;}
.bp-memo__subject a:hover{text-underline-offset: 4px; color: #fff !important; text-decoration: underline !important;}
.bp-memo__meta{color: rgba(255,255,255,.60); font-size: 12px; font-weight: 900; margin-top: 6px;}
.bp-badge{
  border: 1px solid #1d212a;
  flex-shrink: 0;
  align-items: center;
  background: #ff3b30;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  height: 18px;
  justify-content: center;
  margin-left: 8px;
  padding: 0 6px;
}
.bp-empty{font-weight: 800; color: rgba(255,255,255,.55); font-size: 13px; padding: 18px 6px;}
@media (max-width:700px){
  .bp-memo__item{align-items: flex-start; flex-direction: column;}
  .bp-memo__right{display: flex; gap: 8px; justify-content: flex-end; width: 100%;}
}

/* ===== LEVEL ICON / NAME ===== */
.bp-lv-icon{height: 16px; margin-right: 6px; vertical-align: -3px; width: 16px;}
.bp-name{vertical-align: middle;}

/* 작성자(닉네임) 색상 */
td.td_name,
td.td_name a,
td.td_name a:visited,
.sv_member, .sv_member a,
.sv_guest, .sv_guest a{color: #eaeaea !important;}
td.td_name a:hover,
.sv_member a:hover,
.sv_guest a:hover{color: #ffffff !important;}
.td_name, .td_name a{white-space: nowrap;}
td.td_name{width: 150px;}

/* ===== MEMBER / LOGIN DARK ===== */
#mb_login, #fregister, #fregisterform, #register_form,
#member_confirm, #mb_confirm, #pw_confirm{
  background: var(--bg) !important;
  color: var(--txt) !important;
}
#mb_login .mbskin,
#fregister .mbskin,
#fregisterform .mbskin,
#register_form .register_form,
#member_confirm .mbskin,
#mb_confirm .mbskin,
#pw_confirm .mbskin{
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  color: var(--txt) !important;
}
#mb_login input, #mb_login select, #mb_login textarea,
#fregister input, #fregister select, #fregister textarea,
#fregisterform input, #fregisterform select, #fregisterform textarea,
#register_form input, #register_form select, #register_form textarea{
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
}
#mb_login a, #fregister a, #fregisterform a, #register_form a{
  color: rgba(255,255,255,.88) !important;
}

/* ===== TOP PADDING (고정헤더 높이만) ===== */
/* ❗️중요: 여기서 background를 절대 건드리지 않음 */
body{
  font-family: "Malgun Gothic", dotum, sans-serif;
  font-size: 0.75em;
  padding-top: calc(var(--bp-topbar-h, 64px) + var(--bp-gnb-h, 52px));
}

/* ===== BOARD BODY BACKGROUND (bo-* 페이지 전용) ===== */
body[class^="bo-"], body[class*=" bo-"]{
  background:#0f1318 !important;
}