/* ===========================================
헤더 header.php
=========================================== */
.gnb{position:fixed; top:0; left:0; right:0; height:var(--gnbH); background:var(--bg); display:flex; align-items:center; padding:var(--headerPadding); z-index:1000; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); gap:1em; transition:background var(--transition), border-color var(--transition); min-width: var(--minW); display: flex; align-items: center; justify-content: space-between;}
@media (max-width:900px){
  html:has(.subContent) .gnb{display:none;}
}
/* ======= 좌측 ======= */
.gnbLeft{display: flex; gap: 15px; align-items: center;}
.gnbMenuBtn{width:20px; height:16px; display:flex; flex-direction:column; justify-content:space-between; gap:.35em; flex-shrink:0;}
.gnbMenuBtn span{display:block; width:100%; height:1px; background:var(--fgMuted); border-radius:2px;}
.gnbLogo{display: block; background: var(--logo) no-repeat center / contain; width: 90px; height: 50px;}

@media (max-width:900px){
  .gnbMenuBtn{display: none;}  
}
@media (max-width:600px){
  .gnbLogo{width: 80px; height: 40px;}
}

/* ======= 우측 ======= */
.gnbRight{display:flex; align-items:center; gap:8px;}

/* 검색 */
.gnbSearchWrap{display: flex; align-items: center; margin-right: 5px;}
.gnbSearch{position:relative; width: 300px;}
.gnbSearch input{width:100%; background:var(--inputBg); border:1px solid var(--border); border-radius:1.5em; padding:.5em 1em .5em 2.5em; font-size:.9em; color:var(--fg); outline:none; transition:border-color var(--transition), background var(--transition); }
.gnbSearch input:focus{border-color:var(--primary);}
.gnbSearchIcon{position:absolute; left:.9em; top:50%; transform:translateY(-50%); color:var(--fgDim); pointer-events:none;}

/* 아이콘 / 프로필 */
.gnbIconBtn{width:2em; height:2em; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--fgMuted); transition:background var(--transition), color var(--transition);}
.gnbIconBtn:hover{color:var(--fg);}
.gnbCoin{display:flex; align-items:center; gap:.35em; border:1px solid var(--border); border-radius:1.25em; padding:.3em .8em; font-size:.85em; font-weight:500; color:var(--fg); transition:background var(--transition), border-color var(--transition); margin-left: 5px; cursor: pointer;}
.gnbCoin .coinNum{font-weight: 500;}
.gnbIconBtn:hover{background:var(--surface2); color:var(--fg);}
.profileImg{width:2.1em; height:2.1em; border-radius:50%; border:1px solid var(--border); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor: pointer;}

@media (max-width:900px){
  .profileWrap:has(.gnbAvatar){display: none;} 
  .gnbIconBtn{width: 1.8em; height: 1.8em;} 
}

/* 모바일 검색 트리거 버튼 */
.gnbSearchTrigger{display:none;}
.gnbSearchBack{display:none; width:2em; height:2em; align-items:center; justify-content:center; border-radius:50%; color:var(--fgMuted); flex-shrink:0; transition:background var(--transition), color var(--transition);}
.gnbSearchBack:hover{background:var(--surface2); color:var(--fg);}

/* 로그인 버튼 */
.hBtn{padding:.3em .8em; border-radius:1.25em; color: var(--fg); font-size: .85em; transition:background var(--transition); border: 1px solid var(--border);}
.hBtn:hover{background: var(--surface2);}
.loginBtn{background: var(--hBtnBg); border: 1px solid var(--hBtnBg); color: var(--hBtnText);}
.loginBtn:hover{background: var(--hBtnHover);}

@media (max-width:900px){
  /* 기본: gnbSearch 숨김, 트리거 버튼만 표시 */
  .gnbSearch{display:none;}
  .gnbSearchTrigger{display:flex;}
  .gnbSearchBack{display:none;}

  /* 열린 상태: gnbRight를 통째로 검색창으로 교체 */
  .gnbRight.searchOpen{position:absolute; left:0; right:0; top:0; height:var(--gnbH); background:var(--gnbBg); padding:0 1em; display:flex; align-items:center; gap:.5em; z-index:10; border-bottom:1px solid var(--border);}
  .gnbRight.searchOpen .gnbSearchWrap{flex:1; display:flex; align-items:center; gap:.5em;}
  .gnbRight.searchOpen .gnbSearchBack{display:flex;}
  .gnbRight.searchOpen .gnbSearch{display:flex; flex:1; width:auto; max-width:none; position:relative;}
  .gnbRight.searchOpen .gnbSearch .gnbSearchIcon{position:absolute; left:.9em; top:50%; transform:translateY(-50%);}
  .gnbRight.searchOpen .gnbSearch input{background:var(--inputBg); border:1px solid var(--border); border-radius:1.5em; padding:.5em 1em .5em 2.5em; font-size:.9em; width:100%;}

  /* 열린 상태: 트리거/나머지 버튼 숨김 */
  .gnbRight.searchOpen .gnbSearchTrigger, .gnbRight.searchOpen .gnbIconBtn, .gnbRight.searchOpen .gnbCoin,
  .gnbRight.searchOpen .gnbAvatar, .gnbRight.searchOpen .notiWrap{display:none;}

  /* GNB 왼쪽 숨김 */
  .gnb.searchOpen .gnbLeft{visibility:hidden;}
}

/* PROFILE DROPDOWN */
.profileWrap {position:relative;}
.gnbAvatar {cursor:pointer;}
.profileDropdown {display:none; position:absolute; top:calc(100% + 8px); right:0; width:min(18em, 94vw); background:var(--surface); border:1px solid var(--border2); border-radius:var(--radiusLg); box-shadow:var(--shadow); z-index:1200; overflow:hidden;}
.profileDropdown.open {display:block;}
.profileDropHead {display:flex; align-items:center; gap:.75em; padding:1em 1.1em; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--transition);}
.profileDropHead:hover {background:var(--surface2);}
.profileDropAvatar {width:2.4em; height:2.4em; border-radius:50%; border:2px solid var(--primary); background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9em; font-weight:700; flex-shrink:0;}
.profileDropName {font-size:.9em; font-weight:700; color:var(--fg);}
.profileDropId {font-size:.75em; color:var(--fgMuted);}
.profileDropHeadArrow {margin-left:auto; color:var(--fgDim);}
.profileDropMenu {padding:.4em 0;}
.profileDropItem {display:flex; align-items:center; justify-content:space-between; padding:.65em 1.1em; cursor:pointer; transition:background var(--transition);}
.profileDropItem:hover {background:var(--surface2);}
.profileDropItemLeft {display:flex; align-items:center; gap:.75em; color:var(--fg); font-size:.88em;}
.profileDropItemLeft svg {color:var(--fgMuted); flex-shrink:0;}
.profileDropItemRight {font-size:.8em; color:var(--fgMuted); display:flex; align-items:center; gap:.2em;}
.profileDropDivider {height:1px; background:var(--border); margin:.3em 0;}
.profileDropItem.logout .profileDropItemLeft {color:var(--fgMuted);}
.profileDropItem.logout:hover .profileDropItemLeft {color:var(--fg);}
.profileOrbIcon {width:1.1em; height:1.1em; border-radius:50%; background:linear-gradient(135deg,#A871FF,#FF9EE2); flex-shrink:0;}

/* ===========================================
사이드메뉴 side_menu.php
=========================================== */
/* ======= 사이드 메뉴(PC) ======= */
.sidebar{width:var(--sidebarW); background:var(--bg); position:fixed; top:var(--gnbH); bottom:0; left:0; overflow:hidden; padding:.75em 0; z-index:100; transition:width var(--transition), background var(--transition), border-color var(--transition); box-sizing:border-box;}
.sidebar.collapsed{width:var(--sidebarCollapsed); padding-left: .8em;}

.sidebarNav{display:flex; flex-direction:column; gap:2px; padding:0 1em; box-sizing:border-box;}
.navItem{display:flex; align-items:center; gap:.65em; padding:.7em .8em; border-radius:var(--radiusMd); font-size:.9em; font-weight:500; color:var(--fgMuted); transition:color var(--transition); cursor:pointer; white-space:nowrap; overflow:hidden; box-sizing:border-box; width:100%;}
.navItem:hover{color:var(--fg);}
.navItem:hover .navIcon{opacity:1;}
.navItem.active{background:var(--pSoft); color:var(--fg);}
.navIcon{width:20px; height:20px; opacity:.8; transition:opacity var(--transition); flex:0 0 20px;}
.navIcon img{width:100%; height:100%; object-fit:contain;}
.navItem.active .navIcon{opacity:1;}

.sidebar.collapsed .navLabel{display:none;}
.sidebar.collapsed .navItem{justify-content:center; width:35px; height:35px;}
.sidebar.collapsed .sidebarNav, #sidebar.collapsed .resentChatArea{padding:0; display:flex; flex-direction:column; align-items:center;}

/* 최근 채팅 목록 */
.resentChatArea{padding:0 1em; margin-top:2em; box-sizing:border-box; display: flex; flex-direction: column;}
.resentChatArea *{-ms-overflow-style: none; scrollbar-width: none;}
.resentChatArea *::-webkit-scrollbar{display: none;}
.resentChatArea .sectionLabel{margin-bottom:10px !important; display:block;}
.resentChatArea .profileImg{width:35px !important; height:35px !important; flex:0 0 35px !important;}
.resentChatArea .clItem{padding:5px !important; margin-bottom:.5em; gap:8px !important; box-sizing:border-box;}
.resentChatArea .clName{font-size:.8em !important; font-weight:500 !important;}
.resentChatArea .clPreview{font-size:.7em !important;}

#sidebar.collapsed .resentChatArea{margin-top:1em;}
#sidebar.collapsed .resentChatArea .sectionLabel,
#sidebar.collapsed .resentChatArea .clBody{display:none;}
.sidebar.collapsed .navItem, #sidebar.collapsed .resentChatArea .clItem{padding:0; display:flex; align-items:center; justify-content:center;}
#sidebar.collapsed .resentChatArea .profileImg{margin:0 auto;}

/* ======= 하단 탭바(모바일) ======= */
.bottomNav{display:none; align-items:center; justify-content:space-around; position:fixed; bottom:0; left:0; right:0; height:3.6em; background:var(--bg); border-top:1px solid var(--border); z-index:1000; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background var(--transition), border-color var(--transition); min-width:var(--minW);}
.bottomNavItem{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25em; flex:1; height:100%; color:var(--fgMuted); font-size:.72em; font-weight:500; transition:color var(--transition); cursor:pointer;}
.bottomNavItem:hover{color:var(--fg);}
.bottomNavItem.active{color:var(--primary);}
.bottomNavItem .navIcon{opacity:1;}
.navIcon.gnbAvatar{display:block;}

@media (max-width:900px){
  .sidebar{display:none;}
  .bottomNav{display:flex;}
}

/* ===========================================
푸터 footer.php
=========================================== */
.siteFooter{padding:2.5em 0 3em; border-top:1px solid var(--border); margin-top: var(--footerTopM);}
.footerInner{max-width:1200px; margin:0 auto;}
.footerCompany{font-size:.8em; color:var(--fgDim); line-height:1.8; margin-bottom:1.2em;}
.footerCompany strong{display:block; font-size:1em; font-weight:700; color:var(--fgMuted); margin-bottom:.4em;}
.footerLinks{display:flex; flex-wrap:wrap; gap:.25em 0;}
.footerLink{font-size:.8em; color:var(--fgMuted); line-height:1; display: flex; align-items: center;  cursor: pointer;}
.footerLink::after{content: ''; width: 1px; height: 10px; background: var(--border2); display: inline-block; margin: 0 8px;}
.footerLink:last-child::after{display: none;}

@media (max-width:900px){
  .siteFooter{margin-left:0;}
}
@media (max-width:600px){
  .footerLink::after{height: 8px; margin: 0 5px;}
}

/* ===========================================
하단 tail.php
=========================================== */
/* ======= 탑버튼 ======= */
.topBtn{position:fixed; bottom:20px; right:10px; width:2.6em; height:2.6em; display:flex; align-items:center; justify-content:center; background:var(--surface3); border:1px solid var(--border2); border-radius:50%; color:var(--fgMuted); box-shadow:var(--shadowCard); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(.5em); z-index:500; transition: opacity .2s;}
.topBtn.visible{opacity:1; pointer-events:auto;}

@media (max-width:900px){
  .topBtn{display: none;}
}