/* ---------------------------------------------------------
   🌿 Ha-Bin Studio — style.css (CLEAN BASE)  2026. 5. 10
   역할: 전역 / 레이아웃 / 계절 / Night Mode / 메인 UI
----------------------------------------------------- ------*/
/* ===============================
   Reset & Base
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--bgmain, #FFFDF8);
  color: var(--text-main, #2b2b2b);
  overflow-x: hidden;
}
/* ===============================
   Layout
================================ */
#layout {
  display: flex;
  min-height: 100vh;
}
/* 사이드바 자리만 확보 (스타일 없음) */
#sidebar-container {
  width: 260px;
  flex-shrink: 0;
}
/* ===============================
   🌱 Seasonal Theme (CSS only)
   계절 표현은 여기서만
================================ */
body.spring { background-color: #FFF0A0; }  /* 봄 : 햇살 노랑 */
body.summer { background-color: #AEE7FF; }  /* 여름 : 맑은 하늘 */
body.autumn { background-color: #FFD6A5; }  /* 가을 : 살구 / 단풍빛 */
body.winter { background-color: #FFD1E8; }  /* 겨울 : 연핑크 눈빛 */
/* ===============================
   Season Particles Canvas
================================ */
#season-canvas {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none;
  z-index: 0;
}
/* ===============================
   Main Content
================================ */
#content {
  flex: 1;
  min-width: 0;
  padding:0 0 120px;
  position: relative;
  z-index: 100;
  height: auto; 
  min-height: 100vh;
}
#content{
  color:#94A3B8;
}
/* ===============================
   Top Banner
================================ */
.top-banner {
  width: 100%;
  height: 85px;
  background: #2F2D63; /* 원래는 #26214F */
  color: #FFFFFF;
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;

  font-family: 'HCR Batang','Batang',serif;
  font-size: 25px;
  font-weight: 700;
  border-radius: 0;
  margin-bottom: 20px;
  padding: 0;  
  box-shadow: none; 
  border: none; 
}
.top-sub {
  margin-top: 10px;
  font-size: 14px;
  color: #C0C0C0;
  font-style: italic;
  white-space: nowrap; /* 한 줄 고정 */
}
/* ===============================
   Top Menu
================================ */
.top-menu {
  display: flex;
  flex-wrap: nowrap; 
  justify-content: center;
  gap: 25px;
  padding: 0 30px;
  margin-bottom: 40px;
  width: 100%;  
 }
.top-menu a {
  flex: 0 0 10%;
  padding: 6px 0;
  min-width: 0;
 background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: 0.25s;
}
.top-menu a:hover {
  background: #EEF4FF;
  border-color: #3558A8;
  color: #3558A8;
}
/* 파스텔 컬러 */
.top-menu a:nth-child(1){ background:#F8C4C4;border-color:rgba(255,182,193,0.55); }
.top-menu a:nth-child(2){ background:#FFC871;border-color:rgba(255,224,130,0.55); }
.top-menu a:nth-child(3){ background:#FFE08A;border-color:rgba(144,238,144,0.55); }
.top-menu a:nth-child(4){ background:#A6FCA6;border-color:rgba(92,142,219,0.55); }
.top-menu a:nth-child(5){ background:#C9E1FF;border-color:rgba(186,160,255,0.55); }
.top-menu a:nth-child(6){ background:#A9BEEF;border-color:rgba(135,206,235,0.55); }
.top-menu a:nth-child(7){ background:#D7C4FF;border-color:rgba(210,180,80,0.75); }
.top-menu a:nth-child(8){ background:#F5D686;border-color:rgba(250,240,230,0.7); }

/* ===============================
   Footer
================================ */
#habin-footer {
  position: fixed;
  bottom: 0;
  left: 260px;
  width: calc(100% - 260px);
  background: #1B1E45;
  color: #FFFFFF;
  border-top: 1px solid rgba(0,0,0,0.1);
  text-align: center;
  padding: 6px 0 8px;
  z-index: 9999;
  font-family: 'HCR Batang','Batang',serif;
}
.footer-inner { line-height: 1.8; }
.footer-line1, .footer-line2 { margin: 2px 0;opacity: 0.9; }
.footer-line2 em { font-style: italic; }
.ft-sub    { font-size: 15px;color: #FFFFFF; font-weight: 600; }
.ft-star   { font-size: 15px;color: #DAA520; font-weight: 700; }
.ft-hidden { color: #C0C0C0;font-size: 15px; font-style: italic;margin-left: 6px;opacity: 0.9; }

/* Layout wrapper는 배경을 가지지 않음 */
#layout,
#content {
  background: transparent;
}
/* ===============================
   Content Scrollbar
================================ */
#content::-webkit-scrollbar {
  width: 8px;
}
#content::-webkit-scrollbar-track {
  background: #F3FAF5;
  border-radius: 10px;
}
#content::-webkit-scrollbar-thumb {
  background: #BFE3C7;
  border-radius: 10px;
  border: 2px solid #E6F2EC; 
}
#content::-webkit-scrollbar-thumb:hover {
  background: #9FD4B2;
}
.notice-more a {
  float: right;
  margin-right: 20px; 
  font-size: 14px;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s ease;
}
.notice-more a:hover {
  color: #FFFFFF;
}
/* ===============================
   🌙 Night Mode (ONE BLOCK)
================================ */
body.night {
  --bgmain: linear-gradient(180deg, #020617 0%, #0A0F24 100%);
  --text-main: #E5E7EB;
}
body.night .top-banner {
  background: #1E1A3A; color: #E5E7EB;
}
body.night .top-menu a {
  background: #1E293B;
  border-color: #334155;
  color: #E2E8F0;
}
body.night .top-menu a:hover {
  background: #334155;
  border-color: #60A5FA; 
  color: #BFDBFE;
}
body.night #habin-footer {
  background: #0F172A;
  color: #E2E8F0; 
}
 body.night #habin-footer .ft-sub {
  color: #E2E8F0 ;
}  
body.night #habin-footer .ft-hidden {
  color: #94A3B8;
}  
body.night .notice-more a {
  color: rgba(255,255,255,0.5);
}

body.night .notice-more a:hover {
  color: #FFFFFF;
}
/* ===== admin-clean ===== */
.admin-wrapper{
  max-width: 900px;
  margin: 60px auto;
  padding: 0 16px;
}
.admin-title{
  margin: 0 0 14px 0;
}
.admin-panel{
  background: #fff;
  border: 2px solid #3558A8;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.admin-buttons{
  margin-bottom: 12px;
}
.gc-summary{
  margin: 12px 0;
}
.gc-log{
  white-space: pre-wrap;
  padding: 10px;
  border: 2px solid #66DAFF;
  border-radius: 10px;
  min-height: 160px;
}
/* 위험 버튼 (원하면 색은 나중에 조정) */
.btn.danger{
  background: #c0392b;
  color: #fff;
}
/* ✉ 쪽지 버튼 */
.msg-btn {
  margin-left: 10px;
  cursor: pointer;
  color: #3FAF5A;
  font-weight: bold;
  font-size: 16px; 
  text-decoration: none;
  transition: all 0.25s ease;
}
/* 🌞 hover */
.msg-btn:hover {
  color: #DAA520;
  text-shadow: 0 0 6px rgba(218,165,32,0.45);
  transform: translateY(-1px);
}
/* 🌙 나이트모드 */
body.night .msg-btn {
  color: #DAA520;
}
/* 🌙 나이트 hover */
body.night .msg-btn:hover {
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255,215,0,0.65);
  transform: translateY(-1px);
}
/* 💬 쪽지창 */
.msg-box {
  display: none;
  width:350px;
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
/* 🌙 나이트모드 쪽지창 */
body.night .msg-box {
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(218,165,32,0.35);
}
.msg-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#msg-name {
  width: 180px;
  height: 34px;
  padding: 6px 10px;
}
#msg-content {
  width: 100%;
  min-height: 90px;
  max-height: 220px;
  padding: 10px;
  resize: none;
  overflow: hidden;
  border-radius: 8px;
}
#msg-send {
   height:34px;
  padding:0 14px;
  background:#4CAF50;
  border:1px solid #4CAF50;
  color:#FFFFFF;
  font-weight:bold;
  border-radius:6px;
  cursor:pointer;
  transition:all 0.25s ease;
}
#msg-send:hover {
  background:#3E8E41;
  border-color:#3E8E41;
}
.mo-text{
  display:none;
}
#mobile-drawer{
  display:none;
}
.secure-password{
  -webkit-text-security: disc;
  text-security: disc;
}