/* ===========================================
공통
=========================================== */
/* ======= 레이아웃 ======= */
html, body{background: var(--bg);}
#wrap{display:flex; padding-top:var(--gnbH); min-height:100vh; min-width: var(--minW);}
.content{flex:1; overflow:hidden; max-width:1200px; padding: var(--contPadding); margin: 0 auto; opacity: 0;}
body.ready .content {opacity: 1; transition: margin-left var(--transition), width var(--transition), opacity .2s;}
.subContent{position: relative; padding-top: 50px; max-width: var(--maxSub);}
.content:has(.siteFooter){padding-bottom: 0;}
@media (max-width:900px){
  #wrap:has(.bottomNav){padding-bottom: 50px;}
  #wrap:has(.chatWrap){padding-bottom: 0;}
  .subContent{padding-top: 0;}
}
/* ======= 뒤로가기 ======= */
.backBtn{width:1.8em; height:1.8em; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--fgMuted); transition: color var(--transition); cursor: pointer;}
.backBtn:hover{color: var(--fg);}
.backBtn svg{width: 90%; height: auto; transform: translateX(-.5em);}
@media (max-width:600px){
  .backBtn svg{transform: translateX(-.3em);}
}
/* ======= 서브페이지 헤더 ======= */
.pageHead{display:flex; align-items:center; gap:0; height:50px; flex-shrink:0;  background: var(--bg); padding: 1em 1.5em; position: fixed; left: 0; top:56px; width: 100%; z-index: 100;}
.pageTitle{font-size:1.15em; font-weight:700; color:var(--fg);}
.pageHead .btnWrap{display: flex; gap: 5px; align-items: center; margin-left: auto;}
@media (max-width:900px){
  .pageHead{top:0; left: 0; width: 100%; padding: 1em 1.5em; z-index: 100;} 
}

/* ======= 서브페이지 컨텐츠 공통 ======= */
.pageCont{padding-top:2em;}
.pSectionArea{display: flex; flex-direction: column; gap: 2em;}
.pageAccent{background: var(--pSoft); color: var(--tagText); border-radius: 2em; padding: .4em 1em; width: 100%; text-align: center; font-size: .8em;}
.pTitle{font-size:.9em; font-weight:700; color:var(--fg); margin-bottom:.6em;}

/* ======= 버튼 ======= */
.subBtn{font-size:.8em; font-weight:600; color:var(--sBtnText); border:1px solid var(--border2); padding:.3em .9em; border-radius:5px; transition:background var(--transition)}
.subBtn:hover{background: var(--surface2);}
.subBtn.primary{background:var(--primary); border-color: var(--primary); color: var(--hBtnText);}
.subBtn.primary:hover{background: var(--primary-hover);}

.bottomBtnArea{margin-top: 3em;}
.mainBtnWrap{display: flex; align-items: center; gap: 1em;}
.mainBtn{flex: 1; color:var(--sBtnText); border:1px solid var(--border2); padding:.8em .9em; border-radius:5em; transition:background var(--transition); font-weight: 500; font-size: .9em;}
.mainBtn.primary{background: var(--grad); color: #fff; border: none;}
.mainBtn.primary:hover{background: var(--grad-hover);}
.mainBtn.danger{border:1px solid rgba(248,113,113,.4); color:var(--red); cursor:pointer;}
.mainBtn.danger:hover{background:rgba(248,113,113,.08); border-color:var(--red);}

@media (max-width:600px){
  .mainBtnWrap{gap: .5em;}
}
/* ======= 코인 ======= */
.coinWrap{display: flex; align-items: center; gap: .3em;}
.coinWrap .unit{font-size: .8em; font-weight: 500; color: var(--fgMuted); transform: translateY(-1px);}
.coinIcon{width: 15px; height: 15px; background:url(../img/common/candy.png) no-repeat center / contain;} 
.coinNum{display: flex; align-items: flex-end; gap: .3em; font-weight: 600;}

/* ======= 드롭메뉴 ======= */
.dropWrap{display:flex; align-items:center; justify-content:flex-end; gap:.5em;}
.dropCont{position:relative;}
.dropBtn{display:flex; align-items:center; gap:.35em; font-size:.85em; font-weight:500; color:var(--fgMuted); padding:.3em .75em; border:1px solid var(--border); border-radius: 5em; transition:color var(--transition), border-color var(--transition), background var(--transition);}
.dropBtn:hover{color:var(--fg); border-color:var(--border2);}
.dropBtn.noborder{padding: 0; border: none;}
.dropMenu{display:none; position:absolute; right:0; top:calc(100% + 4px); background:var(--bg); border:1px solid var(--border2); border-radius:var(--radiusMd); overflow:hidden; min-width:5em; z-index:200; box-shadow:var(--shadow);}
.dropMenu.open{display:block;}
.dropItem{width: 100%; padding:.5em 1em; font-size:.85em; color:var(--fgMuted); cursor:pointer; transition:background var(--transition), color var(--transition); white-space:nowrap; text-align: left;}
.dropItem:hover{color:var(--fg);}
.dropItem.active{color:var(--primary); font-weight:500;}
.dropItem.delete{color: var(--red);}
.dropItem.delete:hover {background: rgba(224,85,85,.1);color: var(--red);}

/* ======= 토스트 ======= */
.toast{position:fixed;top:2em;left:50%;transform:translateX(-50%) translateY(-8px); background:var(--toastBg); border-radius:var(--radiusMd); display:flex;align-items:center;gap:.55em; padding:.6em 1.1em; font-size:.83em;font-weight:600;color:#fff; box-shadow:var(--shadow); z-index:3000; opacity:0;pointer-events:none; transition:opacity .22s ease, transform .22s ease; white-space:nowrap;}
.toast.show {opacity:1;transform:translateX(-50%) translateY(0);}
.toast.toast-error {background:#ef4444ee; color: #fff;}

/* ======= 폼 ======= */
.formGroup{margin-bottom:1.75em;}
.formLabelWrap{margin-bottom: .5em;}
.formLabelWrap.flex{display: flex; justify-content: space-between; align-items: center;}
.formLabel{font-size:.88em;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:.3em;}
.formLabel .req {color:var(--primary);}
.formDesc{color: var(--fgDim); margin-top: .2em; font-size: .85em;}

.inputWrap{position: relative;}
.formInput{width:100%; height:2.6em; background:var(--inputBg);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.65em 1em;font-size:.9em;color:var(--fg);transition:border-color var(--transition); outline: none;}
.formInput:focus {border-color:var(--primary);}
.formTextarea{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.75em 1em;font-size:.9em;color:var(--fg);resize:vertical;min-height:6em;line-height:1.6;transition:border-color var(--transition); outline: none; resize: none;}
.formTextarea{background:var(--inputBg);}
.formTextarea:focus {border-color:var(--primary);}
.formCounter {font-size:.75em;color:var(--fgDim);margin-top:.4em; text-align: right;}
.fInfo{font-size: .8em; color: var(--fgMuted); margin-top: .3em;}
.errorMsg {color: var(--red); font-size: 12px; margin-top: 6px;}

/* ======= 팔로우 버튼 ======= */
.btnFollow {font-size:.78em; font-weight:700; background:var(--primary); color:#fff; padding:.3em .9em; border-radius:2em; transition:background var(--transition),color var(--transition),border-color var(--transition); cursor:pointer;}

/* Following 상태 */
.btnFollow.is-following{background:var(--surface1); border: 1px solid var(--border2); color:var(--fgMuted)}
.btnFollow.is-following:hover{background:var(--surface2);}

/* ======= 서브 탭 ======= */
.accTabBar{display:flex;gap:.3em;margin-bottom:1.25em;background:var(--surface2); border-radius:var(--radiusMd); padding:.25em;}
.accTab{flex:1;padding:.5em 0;font-size:.85em;font-weight:600;color:var(--fgMuted); border-radius:var(--radiusMd); text-align:center;cursor:pointer;transition:background var(--transition),color var(--transition);}
.accTab.active{background:var(--bg);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.2);}

/* ======= 탭 숫자카운트 ======= */
.tabCount{font-size:.75em; background:var(--surface2); border-radius:1em; padding:.1em .45em; color:var(--fgMuted); margin-left: .5em;}
.active .tabCount{background:rgba(168,113,255,.2); color:var(--primary);}

/* ======= 글자 수 카운트 ======= */
.charCount{font-size:.72em;color:var(--fgDim);text-align:right;margin-top:.2em;}

/* ======= 컨텐츠 없음 ======= */
.emptyCont{display: flex; flex-direction: column;  align-items: center; justify-content: center; gap: .6em; padding: 3.5em 0; color: var(--fgDim); font-size: .9em;}

/* ======= 하단설명 ======= */
.statusNote {font-size:.75em;color:var(--fgDim);line-height:1.6; padding: 1em; margin-top:.8em;  border:1px solid var(--border); background: var(--surface1); border-radius: var(--radiusSm);}

/* ======= 토글 ======= */
.toggleRow {display:flex;align-items:center;justify-content:space-between;}
.toggleLabel {display:flex;align-items:center;gap:.5em;font-size:.88em;font-weight:600;color:var(--fg);}
.toggle {position:relative;width:2.5em;height:1.4em;}
.toggle input {opacity:0;width:0;height:0;position:absolute;}
.toggleTrack {position:absolute;inset:0;background:var(--border2);border-radius:1em;cursor:pointer;transition:background var(--transition);}
.toggle input:checked + .toggleTrack {background:var(--primary);}
.toggleTrack::after {content:"";position:absolute;width:1.05em;height:1.05em;background:#fff;border-radius:50%;top:.175em;left:.175em;transition:transform var(--transition);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.toggle input:checked + .toggleTrack::after {transform:translateX(1.1em);}

/* ===========================================
메인 index.php
=========================================== */
/* ======= 메인 배너 ======= */
.bannerSwiper{border-radius:var(--radiusLg); overflow:hidden; margin-bottom:1.75em; height: 200px;}
.bannerSlide{border-radius:var(--radiusLg); overflow:hidden; position:relative; display:flex; align-items:center; height: 100%; background:var(--pSoft);}
.bannerSwiper .swiper-pagination-bullet{background:rgba(255,255,255,.5); opacity:1; width:.4em; height:.4em;}
.bannerSwiper .swiper-pagination-bullet-active{background:#fff; width:1em; border-radius:.25em;}
.bannerImg{position: absolute; right:0; top:0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.bannerImg img{height: 100%; width: 100%; object-fit: cover;}

@media (max-width:900px){
  .bannerSwiper{border-radius: var(--radiusMd); height: 180px;}
  .mainWrap{padding-top: 10px;}
}
@media (max-width:600px){
  .bannerSwiper{height: 140px;}
  .bannerSwiper .swiper-pagination{bottom: 2px !important;}
}
@media (max-width:500px){
  .bannerSwiper{height: 115px;}
}
/* ======= 메인 탭 ======= */
.sectionTabs{display:flex; align-items:center; justify-content: space-between; gap:.2em; margin-bottom:1.25em;}
.tabLeft{display:flex; align-items:center; gap:7px;}
.tabBtn{padding:.5em; font-size:.95em; font-weight:500; color:var(--fgMuted); border-radius:var(--radiusSm) var(--radiusSm) 0 0; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--transition), border-color var(--transition); white-space:nowrap; flex-shrink:0;}
.tabBtn:hover{color:var(--fg);}
.tabBtn.active{color:var(--fg); border-bottom-color:var(--primary);}
.tabRight{margin-left:auto; flex-shrink:0;}
.tabPanel{display: none;}
.tabPanel.active{display: block;}

@media (max-width:600px){
  .tabBtn{font-size: .92em;}
  .sectionTabs{flex-direction: column-reverse; align-items: flex-start; gap:0;}
  .tabLeft{width: 100%; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;}
  .tabLeft::-webkit-scrollbar{display:none;}
  .tabRight{flex-shrink:0; margin-left:auto; display: flex; justify-content: right;}
}

/* ======= 성별 필터 ======= */
.genderItem{display: flex; align-items: center; gap: .3em;}
.genderDot{display:block; width:6px; height:6px; border-radius:50%; margin-right: .2em; }
.genderDot--all{background:#A871FF;}
.genderDot--female{background:#FF9EE2;}
.genderDot--male{background:#7EC8E3;}

.contentEmpty{padding:3em 0; text-align:center; color:var(--fgMuted); font-size:.9em;}

@media (max-width:600px){
  .allBtn{padding:.1em .75em;}
}

/* ======= 정렬 필터 ======= */
.sortBar{margin-bottom: 1em;}

/* ======= 섹션 ======= */
.section{margin-bottom:2.25em;}
.sectionHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:1em;}
.sectionTitle{font-size:1.1em; font-weight:700; color:var(--fg); display:flex; align-items:center; gap:.5em;}

/* ======= 서브 탭  ======= */
.subTabs{display:flex; gap:.4em; margin-bottom:1.25em; flex-wrap:wrap;}
.subTabBtn{padding:.5em 1em .6em; font-size:.85em; font-weight:500; border:1px solid var(--border); border-radius:2em; color:var(--fgMuted); transition:background var(--transition), color var(--transition), border-color var(--transition); line-height: 1;}
.subTabBtn:hover{color:var(--fg); border-color:var(--border2);}
.subTabBtn.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.subPanel{display: none;}
.subPanel.active{display: block;}

/* ======= 캐릭터 리스트 ======= */
.charGrid{display:grid; grid-template-columns:repeat(5, 1fr); gap:1.5em .9em;}
.charCard{overflow:hidden; cursor:pointer; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);}
.cardImgWrap{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--pSoft); border-radius:var(--radiusLg); margin-bottom: 10px;}
.cardImgWrap img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.charCard:hover .cardImgWrap .cardThumb{transform:scale(1.05);}
.cardImgWrap::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%); opacity:.6; pointer-events:none;}
.cardCount, .cardRange, .cardBadge, .cardLangBadges{position:absolute; background:rgba(0,0,0,.52); backdrop-filter:blur(6px); color:#fff; font-size:.78em; padding:.3em .6em .35em; border-radius:1em; z-index:1; display:flex; align-items:center; gap:.3em; line-height: 1; min-height: 20px;}
.cardCount{bottom:.55em; right:.55em;}
.cardLangBadges{top:7px; right:7px; display: flex; align-items: center; font-size: .7em;}
.cardLangBadges span{display: flex; align-items: center; color:#fff; letter-spacing:.03em; line-height:1; gap:0;}
.cardLangBadges span em{font-style:normal; color:rgba(255,255,255,.65); margin:0 1px; font-size: .85em; }
.cardLangBadges span em.sep{margin:0 3px; opacity: .5; font-size: .7em;}
.cardLangBadges span em.num{color:rgba(255,255,255,.7); margin-left: 1px; display:inline-flex; align-items:center; line-height:1;}
.cardLangBadges .rangeIcon{margin-right:2px; vertical-align:middle; flex-shrink:0;}

.chatCount{width: 14px; height: 14px; background: url(../img/common/nav_chat.png) no-repeat center / contain; transform: translateY(-.5px);}
.cardRange{font-size:.7em;}
.cardBadgeWrap{position:absolute; top:7px; left:7px; display: flex; align-items: center; gap: 2px;}
.cardBadgeWrap .cardBadge{position:static;}
.cardBadge{top:.55em; left:.55em; border-radius: 5px;}
.cardBadge.new{background: #bf5effaa;}
.cardBadge.adult{background: #e5333399;}
.cardThumb{width:100%; height:100%; object-fit:cover; display:block; background:var(--pSoft);}
.cardName{font-size:.9em; font-weight:700; color:var(--fg); margin-bottom:.3em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cardDesc{font-size:.8em; color:var(--fgMuted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.55em;}
.cardTags{display:flex; flex-wrap:wrap; gap:.25em; margin-bottom:.5em;}
.cardTag{font-size:.75em; color:var(--tagText); cursor:pointer;}
.cardAuthor{font-size:.75em; color:var(--fgMuted); background: var(--atagBg); border-radius:2em; display: inline-flex; flex-shrink: 0; padding:.05em .6em .15em; cursor:pointer;}
.cardAuthor em{margin-left: 1px;}

@media (max-width:1400px){
  .charGrid{grid-template-columns:repeat(4, 1fr);}    
}
@media (max-width:1200px){
  .cardCount, .cardRange, .cardBadge, .cardLangBadges{padding:.2em .45em .25em; font-size: .7em;}
}
@media (max-width:900px){
  .charGrid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:600px){
  .charGrid{grid-template-columns:repeat(2, 1fr);}
  .chatCount{width: 13px; height: 13px;}
}

/* ======= 검색 결과 ======= */
/* fullscreen 오버레이 아님 — .content 안에서 메인 콘텐츠 대체 */
.searchLayer{display:none;}
.searchLayer.on{display:block;}

/* 검색 레이어가 활성화되면 .content 내 나머지 요소 숨김 */
body.searchActive .bannerSwiper,
body.searchActive .sectionTabs,
body.searchActive .tabPanel{display:none !important;}

.searchHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25em;}
.searchKeyword{font-size:.9em; color:var(--fgMuted);}
.searchKeyword em{color:var(--primary); font-style:normal; font-weight:700;}
.searchClose{display:flex; align-items:center; gap:.4em; font-size:.8em; color:var(--fgMuted); background:none; border:1px solid var(--border); border-radius:6px; padding:.3em .75em; cursor:pointer; transition:color .15s, border-color .15s;}
.searchClose:hover{color:var(--fg); border-color:var(--fg);}
.searchFilterRow{display:flex; flex-direction: column; align-items:flex-start; justify-content:space-between; gap:1em; margin-bottom:1.25em;}
.searchFilterRow .subTabs{margin-bottom:0; flex:1;}
.searchSortBar{flex-shrink:0; padding-top:.25em; margin-left: auto;}

@media (max-width:900px){
  .searchLayer.on{padding-bottom:5em;}
}

.cardSwiperWrap{position:relative;}
.cardSwiper{overflow:hidden; margin-bottom:.5em;}
.cardSwiper .swiper-wrapper{align-items:stretch;}
.cardSwiper .swiper-slide{width:200px; height:auto; flex-shrink:0;}
.cardSwiper .charCard{height:100%;}
.cardNavBtn{position:absolute; z-index:10; width:2.8em; height:2.8em; display:flex; align-items:center; justify-content:center; background:rgba(0, 0, 0, .52); border: 1px solid rgba(133, 133, 133, .3); border-radius:50%; color:#fff; transition:background var(--transition), opacity var(--transition); cursor:pointer;}
.cardNavBtn.swiper-button-disabled{opacity:0; pointer-events:none;}
.cardNavPrev{left:-1.1em;}
.cardNavNext{right:-1.1em;}

@media (max-width:600px){
  .cardSwiperWrap{margin-right: -1.5em;}
  .cardNavNext{right:10px;}
  .cardNavBtn svg{width: 18px; height: 18px;}
}

/* ======= 탭 : 랭킹 ======= */
.rankGrid{position:relative;}
.rankWrap{position:relative;}
.rankNum{position:absolute; top:.4em; left:.4em; z-index:2; font-size:1.4em; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); line-height:1;}

/* ======= 탭 : 카테고리 ======= */
.catPanel{display: none;}
.catPanel.active{display: block;}


/* ===========================================
채팅 목록 chat_list.php
=========================================== */
.clFilter {display:flex; align-items:center; gap:.5em; margin-top: .5em; margin-bottom:1.5em;}
.clCheckbox {display:flex; align-items:center; gap:.5em; cursor:pointer; font-size:.85em; color:var(--fgMuted); user-select:none;}
.clCheckbox input {display:none;}
.clCheckMark {width:1.1em; height:1.1em; border:1.5px solid var(--border2); border-radius:3px; display:flex; align-items:center; justify-content:center; transition:background var(--transition), border-color var(--transition); flex-shrink:0;}
.clCheckbox input:checked + .clCheckMark {background:var(--primary); border-color:var(--primary);}
.clCheckbox input:checked + .clCheckMark::after {content:''; display:block; width:.4em; height:.65em; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg) translate(-1px,-1px);}
 
.clList {display:flex; flex-direction:column; gap:0;}
.clItem {display:flex; align-items:center; gap:1em; padding:1em .75em; cursor:pointer; border-radius:var(--radiusMd); transition:background var(--transition);}
.clItem:hover {background:var(--surface2);}
.clItem:last-child {border-bottom:none;}
 
.clItem .profileImg{width:3.5em; height:3.5em;}
 
.clBody {flex:1; min-width:0;}
.clName {font-size:.95em; font-weight:700; color:var(--fg); margin-bottom:.2em;}
.clPreview {font-size:.85em; color:var(--fgMuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.5;}
.clPreview em {font-style:normal; color:var(--fgDim);}
 
.clMeta {display:flex; flex-direction:column; align-items:flex-end; gap:.2em; flex-shrink:0;}
.clRooms {font-size:.8em; color:var(--fgMuted);}
.clTime {font-size:.8em; color:var(--fgDim);}

@media (max-width: 600px) {
  .clItem .profileImg{width: 2.7em; height: 2.7em;}
}

/* ===========================================
스냅샷 목록 snapshot.php
=========================================== */
.snapCont .subBtn{font-weight: 500; display: flex; align-items: center; padding: .3em .8em .4em .6em;}
.snapCont .subBtn svg{color: var(--fgMuted); margin-right: 3px;}
.snapPageCont { padding-top: 1.5em; display: flex; flex-direction: column; gap: 1.5em;}
.snapFolderTree {display: flex; flex-direction: column; gap: .5em; }


/* 폴더 카드 */
.snapFolder { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radiusLg); overflow: hidden; transition: border-color var(--transition), background var(--transition); }
.snapFolder.drag-over { border-color: var(--primary) !important; background: var(--pSoft) !important; }

/* 폴더 헤더 */
.snapFolderHead{display: flex; align-items: center; gap: 8px; padding: .85em 1em; cursor: pointer; user-select: none; transition: background var(--transition);}
.snapFolderHead:hover{background: var(--surface2); }
.snapFolderIcon{color: var(--primary); flex-shrink: 0; }
.snapFolderName{font-size: .92em; font-weight: 700; color: var(--fg); transform: translateY(-1px);}
.snapFolderCount{font-size: .65em; color: var(--primary); background: var(--surface2);  border-radius: 1em; padding: .3em .55em; margin-right: auto; display: flex; align-items: center; justify-content: center; line-height: 1;}
.snapFolderActions { display: flex; align-items: center; gap: .15em; }
.snapFolderBtn { width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--fgDim); transition: background var(--transition), color var(--transition); }
.snapFolderBtn:hover { background: var(--surface2); color: var(--fg); }
.snapFolderChevron { color: var(--fgDim); flex-shrink: 0; transition: transform .2s ease; }
.snapFolderHead.open .snapFolderChevron { transform: rotate(90deg); }

/* 폴더 바디 슬라이드 */
.snapFolderBody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.snapFolderBody.open { grid-template-rows: 1fr; }
.snapFolderBodyInner { min-height: 0; overflow: hidden; }
.snapFolderBodyInner .snapList { padding: 0 .5em .5em; }

/* 미분류 라벨 */
.snapUnclassifiedLabel { display: flex; align-items: center; gap: .45em; font-size: .78em; font-weight: 700; color: var(--fgDim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .65em; padding: 0 .2em; }

/* 스냅샷 아이템 */
.snapItem { display: flex; align-items: center; gap: .9em; padding: .75em .75em; cursor: grab; border-radius: var(--radiusMd); transition: background var(--transition); position: relative; }
.snapItem:hover { background: var(--surface2); }
.snapItem.dragging { opacity: .35; cursor: grabbing; pointer-events: none; }
.snapItem .profileImg{width: 3.5em; height: 3.5em;}
.snapItemBody { flex: 1; min-width: 0; }
.snapItemName { font-size: .92em; font-weight: 700; color: var(--fg); margin-bottom: .18em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snapItemComment{ font-size: .82em; color: var(--fgMuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snapItemMeta { display: flex; align-items: center; gap: .4em; flex-shrink: 0; }
.snapItemTime { font-size: .75em; color: var(--fgDim); }

@media (max-width: 600px) {
  .snapItem{padding: .7em .5em; gap: 8px;}
  .snapItem .profileImg{width: 2.7em; height: 2.7em;}
}

/* 더보기 버튼 & 드롭메뉴 */
.snapMoreBtn {color: var(--fgDim); transition: background var(--transition), color var(--transition); flex-shrink: 0; transform: translateY(1px);}
.snapMoreBtn:hover {color: var(--fg); }


/* 드래그 드롭 하이라이트 */
.snapFolder.drag-over { border-color: var(--primary) !important; background: var(--pSoft) !important; }
.snapFolder.drop-target { border-color: var(--primary); background: var(--pSoft); }
#snapUnclassifiedList.drag-over { outline: 2px dashed var(--primary); outline-offset: 4px; border-radius: var(--radiusMd); background: var(--pSoft); }
#snapGlobalMenu{width: max-content; min-width: 1em; max-width: 10em;}

/* 모달 */
.snapModalBg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.snapModalBg.open { display: flex; }
.snapModal { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radiusLg); padding: 1.5em; width: min(22em, 90vw); box-shadow: var(--shadow); }
.snapModalTitle { font-size: 1em; font-weight: 700; color: var(--fg); margin-bottom: 1em; }
.snapFolderInput { margin-bottom: 1.25em; }
.snapModalBtns { display: flex; gap: .6em; }
.snapModalBtns .mainBtn { padding: .7em; font-size: .88em; }
.snapMoveFolderList { margin-bottom: 1em; display: flex; flex-direction: column; gap: .3em; max-height: 16em; overflow-y: auto; }
.snapMoveFolderItem { display: flex; align-items: center; gap: .7em; padding: .7em .9em; border-radius: var(--radiusMd); cursor: pointer; color: var(--fgMuted); font-size: .9em; transition: background var(--transition), color var(--transition); }
.snapMoveFolderItem:hover { background: var(--pSoft); color: var(--fg); }
.snapMoveFolderItem svg { color: var(--primary); flex-shrink: 0; }
.snapMoveFolderItem.unct svg{color: var(--fgMuted);}
.snapMoveFolderItem.unct:hover{background: rgba(145, 145, 145, 0.1);}
.snapFolderEmptyMsg { padding: 1.25em 1em; text-align: center; color: var(--fgDim); font-size: .85em; }

@media (max-width: 600px) {
  .snapItemImg { width: 2.8em; height: 2.8em; }
}

/* ===========================================
캔디 상점 shop.php
=========================================== */
/* ======= My Balance ======= */
.balanceAmt{display:flex; align-items:center; justify-content: space-between; gap: .5em;}
.balanceAmt .coinWrap{gap: .7em;}
.balanceAmt .coinNum{font-size:1.5em; font-weight:700; color:var(--fg);}
.balanceAmt .coinIcon{width:1.6em; height:1.6em; transform: translateY(1px);}

/* ======= 커스텀 금액 입력 ======= */
/* 금액 입력 */
.shopCustomBox{background:var(--surface); border:1px solid var(--border2); border-radius:var(--radiusMd); padding:1.5em 1em; display:flex; align-items:center; gap:.5em; margin-bottom:.75em; flex-wrap:wrap;}
.shopCustomInput {font-size:1.1em; font-weight:700; color:var(--fg); background:transparent; border:none; outline:none; border-bottom:1.5px solid var(--border2); width:7em; text-align:center; transition:border-color var(--transition);}
.shopCustomInput:focus {border-color:var(--primary);}
.shopCustomApprox{font-size:.8em; color:var(--fgMuted); transform: translateY(2px);}
.shopCustomEq {font-size:.9em; color:var(--fg); font-weight:600;}
.shopCustomCnd {font-size:1.05em; font-weight:700; color:var(--fg);}
.shopCustomCnd .unit{color: var(--fgMuted); font-weight: 500; font-size: .9em;}
.shopCustomCards {display:flex; align-items:center; gap:.6em; margin-left:auto;}

@media (max-width:900px) {
  .shopCustomCards{width: 100%; flex-direction: column; margin-top: .5em;}
  .shopCustomCards .subBtn{flex: 1; width: 100%; padding: .5em;}
}

/* 금액 선택 버튼 */
.shopAmtGrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:.5em;}

@media (max-width:600px) {
  .shopAmtGrid {grid-template-columns:repeat(2, 1fr);}
}
.shopAmtBtn{background:var(--subMenu); border:1px solid var(--border); border-radius:5em; padding:.5em; font-size:.85em; font-weight:600; color:var(--fgMuted); text-align:center; cursor:pointer; transition:background var(--transition), color var(--transition), border-color var(--transition);}
.shopAmtBtn:hover {background:var(--subMenu-hover); color:var(--fg);}
.shopAmtBtn.active {background:var(--gradSoft); border-color:var(--primary); color:var(--primary);}

/* ======= 프로모션 ======= */
.promoGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:.85em; margin-bottom:1.75em;}
@media (max-width:900px) {
  .promoGrid {grid-template-columns:1fr;}
}
.promoCard{background:var(--surface); border:1px solid var(--border2); border-radius:var(--radiusLg); padding:1.5em 1em; display:flex; flex-direction:column; gap:.6em; transition:border-color var(--transition), box-shadow var(--transition); align-items: flex-start;}
.promoLabel{font-size:.75em; font-weight:700; color:var(--fgMuted); margin-bottom:.3em; background: var(--surface2); padding: .1em .7em; border-radius: var(--radiusMd);}
.promoPrice{font-size:1.4em; font-weight:700; color:var(--primary);}
.promoTotal{font-size:1.1em; font-weight:700; color:var(--fg);}
.promoTotal .coinIcon{width:1.1em; height:1.1em; transform: translateY(1px);}
.promoBonus{font-size:.72em; color:var(--primary); font-weight:600;}
.promoBonus em{color: var(--tagText);}
.bonusTag{background: var(--surface2); padding: .1em .7em; border-radius: var(--radiusMd); color: var(--tagText); font-size: .8em;}
.promoCheck{font-size:.75em; color:var(--fgMuted); gap:.3em;}
.promoActions{display:flex; flex-direction:column; gap:.6em; margin-top:1em; width: 100%;}
.promoActions .subBtn{padding: .5em;}

/* ===========================================
캐릭터 생성 create.php
=========================================== */
.createCont .tabBar.dragging,
.tabLeft.dragging { cursor: grabbing; user-select: none; }
.createCont .tabBar { cursor: grab; }
.tabLeft { cursor: grab; }
.createCont{padding-top: 80px;}
.createCont .tabBar{position: fixed; top:106px; width: 100%; background: var(--bg); z-index: 100; display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-right: 1.5em; box-sizing:border-box;}
.createCont .tabBar::-webkit-scrollbar{display:none;}
.createCont .tabBar .tabBtn{flex-shrink:0;}
.tabContent{display:none; margin:0 auto;}
.tabContent.active {display:block;}
@media (max-width:900px) {
  .createCont{padding-top: 40px;}
  .createCont .tabBar{top: 50px; left: 0; padding: 0 1.5em;}
}
@media (max-width:600px) {
  .createCont .tabBar{padding: 0 1em; }
}
/* ======= 언어 선택 탭 ======= */
.langTabBar {display:flex;gap:5px;margin-bottom:0; overflow:hidden; margin-bottom: 1em;}
.langTab {display:flex;align-items:center;gap:.35em;padding:.5em .9em;font-size:.82em;font-weight:600;color:var(--fgMuted);cursor:pointer;background:var(--surface2);border-right:1px solid var(--border2);white-space:nowrap;transition:background var(--transition),color var(--transition); border-radius: 5em;}
.langTab:last-child {border-right:none;}
.langTab.active{background:var(--primary);color:#fff;}
.langTab:hover:not(.active) {background:var(--surface3);}

/* flag img */
.flagImg {width:1.35em;height:1em;border-radius:2px;object-fit:cover;flex-shrink:0;}
.formLabel .flagImg{width:14px;height:11px; transform: translateY(1px);}

/* AI 자동생성 버튼 */
.aiGenBtnWrap{display: flex; justify-content: right; margin-bottom: 10px;}
.aiGenBtn {display:inline-flex; align-items:center; gap:.35em; font-size:.78em;font-weight:600;color:var(--primary);background:rgba(168,113,255,.12);border:1px solid var(--primary);border-radius:2em;padding:.25em .75em .3em;cursor:pointer;transition:background var(--transition);white-space:nowrap; margin-left: auto;}
.aiGenBtn:hover {background:rgba(168,113,255,.22);}
.aiGenBtn svg {color:var(--primary); transform: translateY(1px);}

/* ======= 저장버튼 ======= */
.topNavBtn{display:flex;align-items:center;gap:.4em;font-size:.82em;font-weight:700;padding:.4em 1.1em;border-radius:2em;transition:opacity var(--transition); transition: background .5s;}
.topNavBtn.temporarySave{background: var(--surface1); border: 1px solid var(--border); color: var(--fgMuted);}
.topNavSave{background:var(--primary);color:#fff;}
.topNavSave:hover{background: var(--primary-hover);}

/* ======= IMAGE UPLOAD ======= */
.imageUploadBox {display:flex;justify-content:center;margin-bottom:.5em;}
.imageUploadZone {width:160px;height:160px;background:var(--surface2);border:2px dashed var(--border2);border-radius:var(--radiusLg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;cursor:pointer;transition:border-color var(--transition),background var(--transition);}
.imageUploadZone:hover {border-color:var(--primary);background:var(--surface3);}
.imageUploadZone svg {color:var(--fgDim);}
.imageUploadZone span {font-size:.72em;color:var(--fgDim);}

/* TARGET AUDIENCE */
.choiceBtnWrap{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;}
.choiceBtn{background:var(--subMenu);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.65em;font-size:.85em;font-weight:500;color:var(--fgMuted);text-align:center;cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition);}
.choiceBtn.active{background: var(--bg); color: var(--primary); border-color: var(--primary);}
.choiceBtn:not(.active):hover {background:var(--surface3);color:var(--fg);}
.audienceGroup {grid-template-columns:repeat(3,1fr);}
.genderGroup {grid-template-columns:repeat(4,1fr);}

/* == ALERT BOX == */
.adultBox{background: var(--surface1); border: 1px solid var(--border2); border-radius: var(--radiusMd); padding: .85em 1em ;}
.alertBox {background:rgba(224,85,85,.1); border:1px solid rgba(224,85,85,.3); border-radius:var(--radiusMd);padding:.85em 1em;margin-top:1em;}
.alertBox p {font-size:.8em; color:var(--red);}
.alertBox .alertTitle {font-weight:600; color:var(--red); margin-bottom:.2em;display:flex;align-items:center;gap:.4em; font-size: .9em;}

/* == INFO BOX == */
.infoBox {background:var(--pSoft); border-radius:var(--radiusMd);padding:.9em 1em;margin-bottom:1.5em;}
.infoBox .infoTitle {font-size:.82em;font-weight:600;color:var(--primary);margin-bottom:.4em;display:flex;align-items:center;gap:.4em;}
.infoBox p {font-size:.78em;color:var(--fgMuted);}
.infoBox ul {font-size:.78em;color:var(--fgMuted);padding-left:.5em;line-height:1.8;}
.infoBox ul li{position: relative;}
.infoBox ul li::before {content:''; width: 3px; height: 3px; display: inline-block; background:var(--primary); border-radius: 50%; position: absolute; top:10px; left: -.5em;}
.infoBoxMeta {display:flex;gap:.2em 1em;margin-top:.6em;flex-wrap:wrap;}
.infoBoxMetaItem {display:flex;align-items:center;gap:.35em;font-size:.75em;color:var(--fgMuted);}
.infoBoxMetaDot {width:.6em;height:.6em;border-radius:50%;flex-shrink:0;}

/* == GALLERY UPLOAD == */
.galleryUploadBtn {width:100%;display:flex;align-items:center;justify-content:center;gap:.5em;background:var(--surface);border:1.5px dashed var(--border2);border-radius:var(--radiusLg);padding:1.1em;font-size:.88em;color:var(--fgMuted);cursor:pointer;transition:border-color var(--transition),background var(--transition);}
.galleryUploadBtn:hover {border-color:var(--primary);color:var(--fg);}
.galleryCount {font-size:.78em;background:var(--surface1);color:var(--fgMuted);border:1px solid var(--border2);padding:.15em .6em;border-radius:1em;font-weight:600;}

/* == FIRST MESSAGE == */
.msgTabRow {display:flex;align-items:center;gap:.5em;margin-bottom:.5em;flex-wrap:wrap;}
.msgTab {font-size:.78em;padding:.25em .75em;border-radius:2em;background:var(--surface2);border:1px solid var(--border2);color:var(--fgMuted);cursor:pointer;transition:all var(--transition);}
.msgTab.active {background:var(--gradSoft);border-color:var(--primary);color:var(--primary);}

/* == SELECT == */
.formSelect {width:100%;background:var(--inputBg);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.65em 2.5em .65em 1em;font-size:.9em;color:var(--fg);appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;}
.formSelect:focus {border-color:var(--primary);}

/* == LOREBOOK == */
.loreEntry {background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusLg);margin-bottom:1em;overflow:hidden;}
.loreEntryHead {display:flex;align-items:center;gap:.6em;padding:.85em 1em;cursor:pointer;}
.loreDrag {color:var(--fgDim);flex-shrink:0;cursor:grab;}
.loreNum {font-size:.75em;font-weight:700;color:var(--fgDim); transform: translateY(-1px);}
.loreName {font-size:.88em;font-weight:600;color:var(--fg);flex:1;}
.loreHeadBtns {display:flex;align-items:center;gap:.25em;margin-left:auto;}
.loreHeadBtn {width:2em;height:2em;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--fgDim);transition:background var(--transition),color var(--transition);}
.loreHeadBtn:hover {background:var(--surface2);color:var(--fg);}
.loreHeadBtn.collapsed svg{transform: rotate(180deg);}
.loreBody {padding:0 1em 1em;}
.loreSubLabel {font-size:.78em;font-weight:500;color:var(--fgMuted);margin-bottom:.4em;}
.loreRow {margin-bottom:.75em;}
.loreActKeys {display:flex;gap:.4em;}
.loreActKeys .formInput {flex:1;}
.loreActKeyBtn {width:2.65em;height:2.65em;display:flex;align-items:center;justify-content:center;border-radius:var(--radiusMd);background:var(--surface2);border:1px solid var(--border2);color:var(--fgMuted);transition:background var(--transition),color var(--transition);}
.loreActKeyBtn:hover {background:var(--surface3);color:var(--fg);}
.checkRow {display:flex;align-items:center;gap:.5em;cursor:pointer;font-size:.82em;color:var(--fgMuted);}
.checkRow input[type=checkbox] {display:none;}
.checkMark {width:1em;height:1em;border:1.5px solid var(--border2);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:background var(--transition),border-color var(--transition);flex-shrink:0;}
.checkRow input:checked + .checkMark {background:var(--primary);border-color:var(--primary);}
.checkRow input:checked + .checkMark::after {content:"";display:block;width:.4em;height:.65em;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px);}
.addLoreBtn {width:100%;display:flex;align-items:center;justify-content:center;gap:.5em;background:var(--surface);border:1.5px dashed var(--border2);border-radius:var(--radiusLg);padding:.9em;font-size:.88em;color:var(--fgMuted);cursor:pointer;transition:border-color var(--transition),background var(--transition);}
.addLoreBtn:hover {border-color:var(--primary);color:var(--fg);}

/* == PAUG BADGE == */
.paugBadge {display:flex;align-items:center;gap:.4em;font-size:.78em;font-weight:600;color:var(--primary);}
.paugBadge svg {color:var(--primary);}
/* == Gallery card == */
.galCard {background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusLg);overflow:hidden;margin-bottom:.75em;}
.galCardHead {display:flex;align-items:center;gap:.5em;padding:.65em .9em;border-bottom:1px solid var(--border);}
.galCardDrag {color:var(--fgDim);cursor:grab;flex-shrink:0;}
.galCardNum {font-size:.75em;font-weight:700;color:var(--fgDim);}
.galCardHeadBtnsWrap{display:flex;align-items:center;gap:10px;margin-left:auto;}
.galCardHeadBtns{display:flex;align-items:center;gap:5px; border: 1px solid var(--border2); border-radius: 5em; padding: 2px;}
.galCardHeadBtn {width:1.8em;height:1.8em;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--fgDim);transition:background var(--transition),color var(--transition);}
.galCardHeadBtn:hover {background:var(--surface2);color:var(--fg);}
.galCardHeadBtn.vis-public {color:#fff; background: #30c567;}
.galCardHeadBtn.vis-cond {color:#fff; background:var(--primary);}
.galCardHeadBtn.vis-private {color: #fff; background:var(--fgDim);}
.galCardBody {display:flex;gap:.75em;padding:.75em .9em;}
.galCardThumb {width:80px;height:80px;border-radius:var(--radiusMd);overflow:hidden;background:var(--surface2);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.galCardThumb img {width:100%;height:100%;object-fit:cover;display:block;}
.galCardFields {flex:1;min-width:0;display:flex;flex-direction:column;gap:.4em;}
.galKeyRow {display:flex;align-items:center;gap:.4em;}
.galKeyInput {flex:1;background:var(--inputBg);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.45em .75em;font-size:.82em;color:var(--fg);font-family:var(--fontSans);}
.galKeyInput:focus {outline:none;border-color:var(--primary);}
.galCopyBtn {width:1.8em;height:1.8em;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--fgDim);flex-shrink:0;transition:color var(--transition);}
.galCopyBtn:hover {color:var(--fg);}
.galDescInput {width:100%;background:var(--inputBg);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.45em .75em;font-size:.8em;color:var(--fg);font-family:var(--fontSans);resize:none;min-height:3.2em;}
.galDescInput:focus {outline:none;border-color:var(--primary);}
.galDescCounter {font-size:.72em;color:var(--fgDim);text-align:right;margin-top:.2em;}

/* == PAUG tooltip == */
.paugBadge{display:flex;align-items:center;gap:.4em;}
.paugInfoBtn{display:flex; align-items:center; gap:.3em;font-size:.85em; font-weight:600; color:var(--primary);background:none; border:none; cursor:pointer;}
.paugTooltip {position:absolute;top:calc(100% + 6px);right:0;width:16em;background:var(--surface3);border:1px solid var(--border2);border-radius:var(--radiusLg);padding:.9em 1em;box-shadow:var(--shadow);z-index:200;display:none;}
.paugTooltip.open {display:block;}
.paugTooltip h4 {font-size:.85em;font-weight:700;color:var(--fg);margin-bottom:.4em;}
.paugTooltip p {font-size:.78em;color:var(--fgMuted);line-height:1.6;margin-bottom:.3em;}
.paugTooltip a {font-size:.78em;color:var(--primary);}
.paugBadge {position:relative;}
/* == First Message blocks == */
.msgBlock{background:var(--surface); border:1px solid var(--border2); border-radius:var(--radiusLg); margin-bottom:.75em; overflow:hidden;}
.msgBlockHead {font-size:.85em; font-weight:600; color:var(--fg); padding: .85em 1em; display: flex; justify-content: space-between; align-items: center;}
.msgBlockTit{display: flex; align-items: center; gap: 7px;}
.msgBlockNum{font-size: .9em; font-weight: 700; color: var(--fgDim);}
.msgBlockBody{padding: .85em 1em; padding-top: 0;}
.msgBlockTextarea:focus {outline:none;}
.msgBlockFooter{font-size:.72em; color:var(--fgDim); text-align: right;}

/* == Lore key tags == */
.loreKeyTags {display:flex;flex-wrap:wrap;gap:.35em;margin-top:.4em;}
.loreKeyTag {display:inline-flex;align-items:center;gap:.25em;background:var(--surface2);border:1px solid var(--border2);border-radius:.5em;padding:.15em .5em;font-size:.78em;color:var(--fgMuted);}
.loreKeyTag button {color:var(--fgDim);background:none;border:none;cursor:pointer;font-size:.9em;line-height:1;}

/* == Tag dropdown == */
.tagWrap {position:relative;}
.tagInputBox {display:flex;flex-wrap:wrap;align-items:center;gap:.4em;background:var(--inputBg);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.5em .75em;min-height:2.6em;cursor:text;transition:border-color var(--transition);}
.tagInputBox.focused {border-color:var(--primary);}
.tagChip {display:inline-flex;align-items:center;gap:.25em;background:var(--surface3);border:1px solid var(--border2);border-radius:1em;padding:.15em .55em;font-size:.8em;color:var(--fg);white-space:nowrap;}
.tagChip button {color:var(--fgDim);background:none;border:none;cursor:pointer;font-size:1em;line-height:1;padding:0;}
.tagChip button:hover {color:var(--fg);}
.tagRealInput {flex:1;min-width:6em;background:transparent;border:none;outline:none;font-size:.88em;color:var(--fg);font-family:var(--fontSans);padding:0;}
.tagDropdown {display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);box-shadow:var(--shadow);z-index:300;max-height:15em;overflow-y:auto;}
.tagDropdown.open {display:block;}
.tagDropItem {padding:.6em 1em;font-size:.88em;color:var(--fgMuted);cursor:pointer;transition:background var(--transition),color var(--transition);}
.tagDropItem:hover {background:var(--surface2);color:var(--fg);}
.tagDropItem.add {color:var(--primary);}
.tagDropItem.add:hover {background:rgba(168,113,255,.1);}


/* ===== 언어 선택 (Language Selector) ====== */
.langSection {background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusLg);padding:1em 1.1em;margin-bottom:1.5em;}
.langSectionTitle {font-size:.82em;font-weight:700;color:var(--fgMuted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75em;display:flex;align-items:center;gap:.4em;}
.langGrid {display:flex;flex-wrap:wrap;gap:.4em;}
.langChip {display:inline-flex;align-items:center;gap:.35em;padding:.3em .75em;border-radius:2em;border:1px solid var(--border2);background:var(--surface2);font-size:.82em;font-weight:600;color:var(--fgMuted);cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition);user-select:none;}
.langChip:hover {background:var(--surface3);color:var(--fg);}
.langChip.active {background:var(--gradSoft);border-color:var(--primary);color:var(--primary);}
.langChip.always {background:var(--gradSoft);border-color:var(--primary);color:var(--primary);cursor:default;opacity:.8;}
.langFlag {font-size:1.05em;line-height:1;}

/* ====== 언어별 콘텐츠 패널 ====== */
.langPanel {display:none;}
.langPanel.active {display:block;}

/* ===== Publish 탭 ===== */
.publishSection {margin-bottom:1.75em;}
.visRow {display:flex;gap:.5em;margin-bottom:1.25em;}
.visBtn {flex:1;display:flex;flex-direction:column;align-items:center;gap:.4em;padding:.85em .5em;background:var(--subMenu);border:1.5px solid var(--border2);border-radius:var(--radiusLg);cursor:pointer;transition:border-color var(--transition),background var(--transition);color:var(--fgMuted);}
.visBtn:hover {background:var(--surface3);}
.visBtn.active {border-color:var(--primary);background:var(--gradSoft);color:var(--primary);}
.visBtn svg {width:1.3em;height:1.3em;}
.visBtnLabel {font-size:.9em;font-weight:600;}
.publishCountryList {display:flex;flex-direction:column;gap:.5em;}
.publishCountryItem {display:flex;align-items:center;justify-content:space-between;padding:.75em 1em;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);}
.publishCountryLeft {display:flex;align-items:center;gap:.6em;font-size:.88em;color:var(--fgMuted);}
.publishCountryLeft.enabled {color:var(--fg);}
.publishCountryDisabled {opacity:.4;pointer-events:none;}

/* ── Language 탭 전용 ── */
.langTopCard {background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusLg);overflow:hidden;margin-bottom:1em;}
.langTopCardHead {display:flex;align-items:center;justify-content:space-between;padding:1em 1.15em;cursor:pointer;transition:background var(--transition);}
.langTopCardHead:hover {background:var(--surface2);}
.langTopCardLeft {display:flex;align-items:center;gap:.65em;}
.langTopCardFlag {font-size:1.4em;line-height:1;}
.langTopCardTitle {font-size:.95em;font-weight:700;color:var(--fg);}
.langTopCardSub {font-size:.76em;color:var(--fgMuted);margin-top:.1em;}
.langSubCardArea {display:none;border-top:1px solid var(--border);padding:.85em 1.15em 1em;}
.langSubCardArea.open {display:block;}
.langSubLabel {font-size:.76em;font-weight:700;color:var(--fgDim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.65em;}
.langSubChips {display:flex;flex-wrap:wrap;gap:.4em;}
.langSubChip {display:inline-flex;align-items:center;gap:.3em;padding:.28em .7em;border-radius:2em;border:1.5px solid var(--border2);background:var(--subMenu);font-size:.8em;font-weight:600;color:var(--fgMuted);cursor:pointer;transition:all var(--transition);}
.langSubChip:hover {background:var(--surface3);color:var(--fg);}
.langSubChip.active {border-color:var(--primary);background:var(--gradSoft);color:var(--primary);}
.langSubChip.always-sub {border-color:var(--primary);background:var(--gradSoft);color:var(--primary);cursor:default;}
.langSummaryBox {background:var(--surface1);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.85em 1em;margin-bottom:1.5em;display:flex;flex-wrap:wrap;gap:.4em;min-height:3em;align-items:center;}
.langSummaryLabel {font-size:.76em;color:var(--fgDim);margin-bottom:.25em;width:100%;}
.langSummaryChip {display:inline-flex;align-items:center;gap:.25em;padding:.18em .55em;border-radius:1em;background:var(--gradSoft);border:1px solid var(--primary);font-size:.78em;font-weight:600;color:var(--primary);}
.langNextBtn {width:100%;padding:.8em;background:var(--grad);color:#fff;border-radius:2em;font-size:.92em;font-weight:700;cursor:pointer;transition:opacity var(--transition);border:none;}
.langNextBtn:hover {opacity:.88;}
.langNextBtn:disabled {opacity:.4;cursor:not-allowed;}

.selectEmpty{background:var(--surface1); border:1px solid var(--border2); border-radius:var(--radiusMd); padding:.85em 1em; margin-bottom:1.5em; display:flex; flex-wrap:wrap;gap:.4em;min-height:3em; align-items:center; font-size:.85em; color:var(--fgDim);margin-bottom:.25em;}


/* ===========================================
마이페이지 mypage.php
=========================================== */
.accSection{margin-bottom:1.75em;}
.accSection .arrow{color: var(--fgDim); margin-left: auto;}
.accCard{background:var(--surface1); border-radius:var(--radiusMd);overflow:hidden;}
.accRow{display:flex;align-items:center;gap:.9em;padding:.8em 1em; transition:background var(--transition);}
.accRow:hover{background: rgba(125, 125, 125, .05);}
.accRow:last-child{border-bottom:none;}
.accRowIcon{width:2em;height:2em;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fgMuted);}
.accRowBody{flex:1;min-width:0;}
.accRowTitle{font-size:.9em;font-weight:600;color:var(--fg);}
.accRowSub{font-size:.76em;color:var(--fgMuted);margin-top:.1em;}
.accRowAction{flex-shrink:0;}
.accRowRight{margin-left: auto;}

.accRowArrow{color: var(--fgDim);}

/* ======= PROFILE CARD ======= */
.myCont .profileCard{border-bottom: 1px solid var(--border); padding: 1em;}
.myCont .profileWrap{gap: .8em;}
.myCont .profileAvatar{width: 3.5em; height: 3.5em;}
.myCont .profileInfo{flex: 1; overflow: hidden; }
.myCont .profileName{font-size: 1.1em; font-weight: 700; color: var(--fg); }
.myCont .profileHandle{font-size: .85em; color: var(--fgMuted); margin-bottom: .35em; }

/* ======= MENU LIST ======= */
.myCont .accRow{cursor: pointer;}

/* ======= DANGER ZONE ======= */
.myBottom{display: flex; flex-direction: column; gap: .8em; align-items: flex-end;}
.dAccountBtn{margin-left: auto; color: var(--fgMuted); cursor: pointer; opacity: .5; font-size: .9em;}

/* ======= 필터 표시 ======= */
.filterStatus{font-size:.7em; font-weight:600; padding:.2em .9em .25em; border-radius:5em;}
.filterStatus.off{color:var(--sBtnText); border:1px solid var(--border2);}
.filterStatus.on{color: var(--primary); border:1px solid var(--primary);}

/* ===========================================
제작자 creator.php
=========================================== */
/* ======= PROFILE HEADER ======= */
.pageTitle.handle{font-size: .95em; font-weight: 500; color: var(--fgMuted); line-height: 1; transform: translateY(-1px);}
.profileTop{display:flex;align-items:center;gap:1.2em; margin-bottom:1em;}
.creatorCont .profileWrap{gap: 1em; cursor: inherit;}
.creatorCont .profileImg{width:5em; height:5em; cursor: inherit;}

.profileInfo {flex:1;padding-top:.2em;}
.creatorCont .profileName{font-size:1.2em;font-weight:600;color:var(--fg);margin-bottom:.25em;}
.creatorCont .profileHandle{font-size: .9em; color: var(--fgMuted); margin-bottom: .35em;}
.profileStatsRow{display:flex;gap:1em; margin-bottom: 1em;}
.profileStat{font-size:.95em;color:var(--fgMuted);}
.profileStat strong{color:var(--fg);font-weight:600;}
.profileHeaderActions{display:flex;align-items:center; gap:.8em;padding-top:.15em; margin-left: auto;}
.iconActionBtn{width:2.2em;height:2.2em;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--surface);border:1px solid var(--border2); color:var(--fgMuted);transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.iconActionBtn:hover{background:var(--surface2);color:var(--fg);border-color:var(--border2);}
.iconActionBtn.danger:hover {background:rgba(255,80,80,.12);color:#ff7070;border-color:rgba(255,80,80,.3);}

@media (max-width:900px) {
  .creatorCont .profileImg{width:4em; height:4em;}
}
/* ======= BIO ======= */
.profileBio {font-size:.88em;color:var(--fgMuted);line-height:1.7; margin-bottom:1.3em; white-space:pre-line;}
.profileBioLink {color:var(--primary);font-size:.85em; display:inline-flex;align-items:center;gap:.3em; margin-top:.15em; transition:opacity var(--transition);}
.profileBioLink:hover {opacity:.75;}

/* ======= ACTION BUTTONS ======= */
.profileActions {display:flex;gap:.6em ;margin-bottom:1.8em;}
.pBtn{display:flex;align-items:center;justify-content:center; font-size:.9em;font-weight:600; padding:.7em 1em;transition:background var(--transition); border-radius:5em;}
.pMainBtn{flex:1;background:var(--grad); color:#fff;}
.pMainBtn:hover{background: var(--grad-hover);}
.btnFollow.following {background:var(--surface2);color:var(--fgMuted);border:1px solid var(--border2);}
.btnFollow.following:hover {background:rgba(255,80,80,.1);color:#ff7070;border-color:rgba(255,80,80,.3);}
.pSubBtn{background:var(--surface);border:1px solid var(--border2); color:var(--fg);white-space:nowrap; min-width: 120px;}
.pSubBtn:hover{background:var(--surface2);}

.btnGift{gap:.45em;}
.btnGift .coinIcon{width: 1.3em; height: 1.3em;}
.btnEdit{flex:1;}

@media (max-width:900px) {
  .btnGift{min-width: auto;}
}

/* ======= 총 캐릭터 수 ======= */
.sortRow{display: flex; justify-content: space-between; margin-top: 20px; margin-bottom: 1em;}
.sortRow .sortLabelWrap{display: flex;}
.sortRow .sortLabel{color: var(--fgMuted); font-size: .9em;}
.sortRow .sortLabel::after{content: ''; width: 1px; height: 10px; background: var(--fgMuted); opacity: .5; display: inline-block; margin: 0 .8em;}
.sortRow .sortLabel:last-of-type::after{display: none;}
.sortRow .dropWrap{margin-bottom: 0;}
@media (max-width:600px) {
  .sortRow .sortLabel{font-size: .8em;}
}
/* ======= 캐릭터 리스트 ======= */
.subContent .charGrid{display:grid; grid-template-columns:repeat(4, 1fr);}

@media (max-width:900px){
  .subContent .charGrid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:600px){
  .subContent .charGrid{grid-template-columns:repeat(2, 1fr);}
}

.userItem {display:flex;align-items:center;gap:.9em;padding:.85em 0;border-bottom:1px solid var(--border);}
.userItem:last-child {border-bottom:none;}
.userItem .profileImg{width:2.6em;height:2.6em; background:var(--surface2);}
.userItemInfo {flex:1;overflow:hidden;}
.userItemName {font-size:.88em;font-weight:600;color:var(--fg);}
.userItemHandle {font-size:.75em;color:var(--fgDim);margin-top:.05em;}
.userItemAction {flex-shrink:0;}

/* ===========================================
페르소나 persona.php
=========================================== */
.personaSelectWrap{position:relative;margin-bottom:1.5em;}
.personaSelectLabel{font-size:.82em;font-weight:700;color:var(--fgMuted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5em;}
.personaSelectBox{display:flex;align-items:center;justify-content:space-between;background:var(--surface1);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.5em 1em;cursor:pointer;transition:border-color var(--transition);}
.personaSelectBox:hover{border-color:var(--primary);}
.personaSelectLeft{display:flex;align-items:center;gap:.6em;}
.personaAvatar{width:1.8em;height:1.8em;}
.personaSelectName{font-size:.9em;font-weight:600;color:var(--fg); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1;}
.personaDefaultBadge{padding: .3em .8em .4em; line-height: 1; background: var(--surface2); border-radius: 5em; color: var(--primary); font-size: 10px; font-weight: 500;}
.personaDropdown{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);box-shadow:var(--shadow);z-index:200;overflow:hidden;}
.personaDropdown.open{display:block;}
.personaDropItem{display:flex;align-items:center;gap:.6em;padding:.7em 1em;cursor:pointer;transition:background var(--transition);font-size:.88em;color:var(--fgMuted);}
.personaDropItem:hover{background:var(--surface2);}
.personaDropItem .checkIcon{margin-left:auto;color:var(--primary);}
.personaDropNew{color:var(--primary);font-weight:600;}
.personaDropNew svg{color:var(--primary);}
.personaImgZone{display:flex;justify-content:center;margin-bottom:1.5em;}
.personaImgCircle{width:5.5em;height:5.5em;border-radius:50%;border:2px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--transition),background var(--transition);color:var(--fgDim);}
.personaImgCircle:hover{border-color:var(--primary);background:var(--surface2);}
.personaFieldGroup{margin-bottom:1em;}
.personaFliter{justify-content: right; margin-top: 0; margin-bottom: .5em;}

/* ===========================================
프롬프트 prompt.php
=========================================== */
.promptList{display:flex;flex-direction:column;gap:.5em;}
.promptItem{display:flex;align-items:center;gap:.9em;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusLg);padding:1em 1.1em;cursor:pointer;transition:border-color var(--transition),background var(--transition);position:relative;}
.promptItem:hover{background:var(--surface2);}
.promptItem.active{border-color:var(--primary);}
.promptItemIcon{width:2.2em;height:2.2em;border-radius:var(--radiusMd);background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fgMuted);}
.promptItem.active .promptItemIcon{background:var(--primary); color:#fff;}
.promptItemBody{flex:1;min-width:0;}
.promptItemTitle{font-size:.92em;font-weight:700;color:var(--fg);margin-bottom:.15em;}
.promptItemDesc{font-size:.78em;color:var(--fgMuted); }
.promptSectionTitle{font-size:1em;font-weight:700;color:var(--fg);margin-bottom:.85em;}


/* ===========================================
캔디 히스토리 cnd_history.php
=========================================== */
.cndHistoryCont .balanceSection{margin-bottom: 2em;}

/* 내역 리스트 */
.cndDateGroup{font-size:.72em;font-weight:700;color:var(--fgDim);letter-spacing:.06em;text-transform:uppercase;padding:.4em .2em;margin-top:.9em;margin-bottom:.3em;}
.cndItem{display:flex;align-items:center;gap:.85em;padding:.85em 0;border-bottom:1px solid var(--border);}
.cndItem:last-child{border-bottom:none;}
.cndItemIcon{width:2.2em;height:2.2em;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cndItemBody{flex:1;min-width:0;}
.cndItemDesc{font-size:.88em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cndItemTime{font-size:.74em;color:var(--fgDim);margin-top:.1em;}
.cndItemAmt{font-size:.9em;font-weight:700;flex-shrink:0;}

/* 기본 표시 */
.cndGroup{display:block;}

/* 타입별 색상 */
.cndItem.is-charge .cndItemAmt, .cndItem.is-charge .cndItemIcon{color:var(--primary);}
.cndItem.is-use .cndItemAmt, .cndItem.is-use .cndItemIcon{color:var(--fgMuted);}
.cndItem.is-gift .cndItemAmt, .cndItem.is-gift .cndItemIcon{color:var(--pink);}
.cndItem.is-expire .cndItemAmt, .cndItem.is-expire .cndItemIcon{color:var(--red);}

/* ===========================================
유저노트 usernote.php
=========================================== */
.notesCreateBtn{width:100%;display:flex;align-items:center;justify-content:center;gap:.4em;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.8em;font-size:.88em;font-weight:600;color:var(--fgMuted);cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition);}
.notesCreateBtn:hover{background:var(--surface3);color:var(--fg);border-color:var(--border2);}
.noteFormBox{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);overflow:hidden;margin-bottom:1em;}
.noteFormName{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);padding:.75em 1em;font-size:.9em;color:var(--fg);font-family:var(--fontSans);outline:none;}
.noteFormBody{width:100%;background:transparent;border:none;padding:.75em 1em;font-size:.88em;color:var(--fg);font-family:var(--fontSans);resize:none;min-height:6em;line-height:1.6;outline:none;}
.noteFormCounter{font-size:.72em;color:var(--fgDim);text-align:right;padding:.3em 1em .5em;}
.noteFormBtns{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);}
.noteFormBtn{padding:.75em;font-size:.88em;font-weight:600;cursor:pointer;transition:background var(--transition);}
.noteFormBtn:hover{background:var(--surface2);}
.noteFormBtn.cancel{color:var(--fgMuted);border-right:1px solid var(--border);}
.noteFormBtn.create{color:var(--primary);}
.noteList{display:flex;flex-direction:column;gap:.5em;margin-bottom:1em;}
.noteItem{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.85em 1em;display:flex;align-items:flex-start;justify-content:space-between;gap:.5em;cursor:pointer;transition:border-color var(--transition);}
.noteItem:hover{border-color:var(--primary);}
.noteItemName{font-size:.88em;font-weight:600;color:var(--fg);}
.noteItemDesc{font-size:.78em;color:var(--fgMuted);margin-top:.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30em;}
.noteItemDel{color:var(--fgDim);flex-shrink:0;transition:color var(--transition);}
.noteItemMeta{display: flex; align-items: flex-start; justify-content: space-between; width: 100%;}
.noteItemLeft, .noteItemRight{display:flex; align-items:center; gap:10px;}
.noteItemLeft{align-items: flex-start;}
.noteItem .arrow{display:flex; align-items:center; color: var(--fgDim); transform:rotate(90deg) translateY(1px);}
.noteItem .arrow.open{transform:rotate(-90deg) translateY(1px);}
.favBtn{color: var(--fgDim); transform: translateY(2px);}

/* ===========================================
계정 관리 account.php
=========================================== */
.accToggle{position:relative;width:2.8em;height:1.55em;}
.accToggle input{opacity:0;width:0;height:0;position:absolute;}
.accToggleTrack{position:absolute;inset:0;background:var(--border2);border-radius:1em;cursor:pointer;transition:background var(--transition);}
.accToggle input:checked + .accToggleTrack{background:var(--primary);}
.accToggleTrack::after{content:"";position:absolute;width:1.15em;height:1.15em;background:#fff;border-radius:50%;top:.2em;left:.2em;transition:transform var(--transition);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.accToggle input:checked + .accToggleTrack::after{transform:translateX(1.25em);}
.accSelect{background:var(--surface2);border:1px solid var(--border2);border-radius:2em;padding:.4em 2em .4em .85em;font-size:.82em;color:var(--fg);appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7em center;outline:none;}

.discordLink{color:var(--fgDim);transition:color var(--transition);}
.discordLink:hover{color:var(--fg);}
.signOutBtn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5em;border:1px solid rgba(248,113,113,.4);border-radius:var(--radiusLg);padding:1em;font-size:.9em;font-weight:700;color:#f87171;cursor:pointer;transition:background var(--transition),border-color var(--transition);background:transparent;}
.signOutBtn:hover{background:rgba(248,113,113,.08);border-color:#f87171;}

/* ===========================================
모델 model.php
=========================================== */
/* 추천 모델 토글 배너 */
.modelToggleBanner {display:flex;align-items:center;justify-content:space-between; background:var(--surface1);  border-radius:var(--radiusMd);padding:.85em 1em;margin-bottom:1.4em;}
.modelToggleLabel {font-size:.9em;font-weight:700;color:var(--fg);}
.modelToggleSub {font-size:.78em;color:var(--fgMuted);margin-top:.1em;}

/* 모델 뱃찌 */
.spModelBadge {font-size:.6em; font-weight:800; padding:.1em .4em; border-radius:3px; letter-spacing:.02em; flex-shrink:0; width: 40px; text-align: center; display: flex; align-items: center; justify-content: center;}
.spModelBadgeMax {background:#e53e3e; color:#fff;}
.spModelBadgePro {background:var(--primary); color:#fff;}
.spModelBadgeFree {background:var(--surface3); color:var(--fgMuted); border:1px solid var(--border2);}

.modelCardWrap { display:flex; flex-direction:column; margin-bottom:0; }
.modelCardWrap .promptItem { cursor:pointer; }
.modelCardWrap.active .promptItem { border-color:var(--primary);}
.modelSliderBox {display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.22s ease; overflow:hidden;}
.modelCardWrap.active .modelSliderBox,
.modelSliderBox.open { grid-template-rows:1fr; }
.modelSliderInner { min-height:0; overflow:hidden; padding:0 1.1em; transition: padding .3s;}
.modelCardWrap.active .modelSliderInner { padding:1em 1.1em 0; }
.modelCardWrap.active .promptItemTitle::after{content:'Default'; padding: .3em .8em .4em; line-height: 1; background: var(--surface2); border-radius: 5em; color: var(--primary); font-size: 10px; transform: translateY(-2px); display: inline-block; font-weight: 500; margin-left: 8px;}

/* reset 버튼 */
.modelSliderReset { display:flex; justify-content:flex-end; margin-top:0; transform: translateY(-15px);}
.modelResetBtn { font-size:0.75em; color:var(--fgDim); background:none; border:1px solid var(--border2); border-radius:var(--radiusSm); padding:0.25em 0.65em .3em; cursor:pointer; transition:color var(--transition), border-color var(--transition);}

/* 모델 비용 정보박스 */
.modelCostBox {background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radiusMd); padding: .85em 1em; margin: .2em 0 1em;}
.spPanel:has(.spModelBadgeFree) .modelCostNote{display: none;}
.modelCardWrap[data-model="Free"] .modelCostNote{display: none;}
.modelCostTitle {display: flex; align-items: center; gap: .35em; font-size: .78em; font-weight: 600; color: var(--primary); margin-bottom: .65em;}
.modelCostRows{display: flex; flex-direction: column; gap: .35em; margin-bottom: .6em;}
.modelCostRow{display: flex; align-items: center; justify-content: space-between;}
.modelCostLabel{font-size: .78em; color: var(--fgMuted);}
.modelCostVal {font-size: .78em; color: var(--fg);}
.modelCostVal strong { font-weight: 700;color: var(--primary);}
.modelCostUnit {font-size: .9em; color: var(--fgDim);}
.modelCostFree {font-size: .82em; font-weight: 700; margin-bottom: .6em; color: var(--fgDim);}
.modelCostNote {font-size: .72em; color: var(--fgDim); line-height: 1.5; border-top: 1px solid var(--border2); padding-top: .5em; margin-top: .1em;}


/* ===========================================
서버현황 server.php
=========================================== */
/* 기간 탭 */
.infoBtn {width:1.8em;height:1.8em;display:flex;align-items:center;justify-content:center; border-radius:50%; color:var(--fgDim); transition:background var(--transition),color var(--transition);}
.infoBtn:hover {background:var(--surface2); color:var(--fgMuted);}

/* SERVER CARD */
.serverCard{background:var(--surface);border:1px solid var(--border2); border-radius:var(--radiusLg);overflow:hidden; margin-bottom:1em;}
.serverCardHead{display:flex;align-items:center;justify-content:space-between; padding:.9em 1.2em;border-bottom:1px solid var(--border);}
.serverCardName{font-size:.9em;font-weight:600; color:var(--fg);}
.statusBadge{font-size:.7em;font-weight:700; padding:.22em .75em;border-radius:2em;}
.statusBadge.operational {background:rgba(74,222,128,.12);color:#30c567;border:1px solid rgba(74,222,128,.3);}
.statusBadge.impaired{background:rgba(251,191,36,.12); color:#fbbf24;border:1px solid rgba(251,191,36,.3);}
.statusBadge.nodata {background:var(--surface2); color:var(--fgDim);border:1px solid var(--border2);}

.serverCardBody {padding:1em 1.2em 1.2em;}

/* uptime 수치 */
.uptimeNum{font-size:1.9em; font-weight:700; margin-bottom:.7em; line-height:1;}
.uptimeNum.good{color:#30c567;}
.uptimeNum.impaired{color:#fbbf24;}
.uptimeNum.nodata{color:var(--fgDim);font-size:1.3em;}

/* 차트 영역 */
.chartWrap {position:relative;width:100%;}
canvas.serverChart {width:100% !important;height:120px !important;display:block;}

/* y축 레이블 */
.chartYLabels {position:absolute;left:0;top:0;bottom:24px; display:flex;flex-direction:column;justify-content:space-between; pointer-events:none;}
.chartYLabel {font-size:.65em;color:var(--fgDim);line-height:1;}

/* ===========================================
마이페이지-차단 blocking.php
=========================================== */
.blockPanel{display:none;}
.blockPanel.active{display:block;}
.blockSearchBox{display:flex;align-items:center;gap:.6em;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.6em .9em;margin-bottom:1.25em;transition:border-color var(--transition);}
.blockSearchBox:focus-within{border-color:var(--primary);}
.blockSearchInput{flex:1;background:transparent;border:none;outline:none;font-size:.88em;color:var(--fg);}
.blockSearchResults{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);overflow:hidden;margin-bottom:1em;display:none;}
.blockSearchResults.open{display:block;}
.blockSearchItem{display:flex;align-items:center;justify-content:space-between;padding:.65em 1em;cursor:pointer;transition:background var(--transition);border-bottom:1px solid var(--border);}
.blockSearchItem:last-child{border-bottom:none;}
.blockSearchItem:hover{background:var(--surface2);}
.blockSearchItemName{font-size:.88em;color:var(--fg);}
.blockSearchItemCount{font-size:.75em;color:var(--fgDim);}
.blockSearchItemCount.blocked{color:#f87171;}
.blockSectionLabel{font-size:.82em;font-weight:700;color:var(--fgMuted);margin-bottom:.6em;display:flex;align-items:center;justify-content:space-between;}
.blockSectionCount{font-size:.82em;font-weight:600;color:var(--fgMuted);}
.blockedTagsBox{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.75em 1em;min-height:3.5em;display:flex;flex-wrap:wrap;gap:.4em;}
.blockedTag{display:inline-flex;align-items:center;gap:.35em;background:var(--surface2);border:1px solid var(--border2);border-radius:1em;padding:.2em .65em .2em .75em;font-size:.82em;color:var(--fg);}
.blockedTag span{font-weight:600;color:var(--primary);}
.blockedTag button{color:var(--fgDim);background:none;border:none;cursor:pointer;font-size:1em;line-height:1;transition:color var(--transition);}
.blockedTag button:hover{color:var(--fg);}
.blockedCreatorList{display:flex;flex-direction:column;gap:.5em;}
.blockEmpty{font-size:.85em;color:var(--fgDim);padding:.9em 0;text-align:center;}
.blockedCreatorItem{display:flex;align-items:center;gap:.75em;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.75em 1em;}
.blockedCreatorAvatar{width:2.4em;height:2.4em;border-radius:50%;overflow:hidden;flex-shrink:0;}
.blockedCreatorAvatar img{width:100%;height:100%;object-fit:cover;}
.blockedCreatorName{font-size:.9em;font-weight:600;color:var(--fg);}
.blockedCreatorId{font-size:.75em;color:var(--fgDim);}
.unblockBtn{margin-left:auto;font-size:.8em;font-weight:600;color:var(--fgMuted);cursor:pointer;transition:color var(--transition);flex-shrink:0;}
.unblockBtn:hover{color:#f87171;}

/* ===========================================
마이페이지-탈퇴 delete_account.php
=========================================== */
/* WARNING BANNER */
.warnBanner{display:flex;align-items:flex-start;gap:.85em; background:rgba(248,113,113,.08); ; border:1px solid rgba(248,113,113,.4); border-radius:var(--radiusMd);padding:1.1em 1em; margin-bottom:1.6em;}
.warnBannerIcon { width:2.2em;height:2.2em;border-radius:50%;  background:rgba(239,68,68,.15); display:flex;align-items:center;justify-content:center; flex-shrink:0;color:var(--red);}
.warnBannerTitle {font-size:.9em;font-weight:700;color:var(--danger);margin-bottom:.25em;}
.warnBannerText {font-size:.8em;color:var(--fgMuted);line-height:1.65;}
 
/* SECTION LABEL */
.sectionLabel {font-size:.7em;font-weight:700;color:var(--fgDim); letter-spacing:.05em;text-transform:uppercase; margin-bottom:.65em; padding:0 .1em; display: block;}
.deleteSection {margin-bottom:1.5em;}
 
/* LOSS LIST */
.lossList {background:var(--surface1);  border-radius:var(--radiusMd);overflow:hidden;  margin-bottom:1.5em;}
.lossItem {display:flex;align-items:center;gap:.85em; padding:0 1em 1.3em;}
.lossItem:first-of-type{padding-top: 1.3em;}
.lossItem:last-child {border-bottom:none;}
.lossItemIcon {width:1.9em;height:1.9em;border-radius:50%; background:var(--surface2); display:flex;align-items:center;justify-content:center; flex-shrink:0;color:var(--primary);}
.lossItemTitle {font-size:.86em;font-weight:600;color:var(--fg);}
.lossItemSub {font-size:.75em;color:var(--fgMuted);margin-top:.08em;}
  
/* CONFIRM INPUT */
.confirmInputWrap {background:var(--surface1); border-radius:var(--radiusMd);padding:1.1em 1.2em;}
.confirmInputLabel {font-size:.8em;color:var(--fgMuted);line-height:1.6;margin-bottom:.5em;}
.confirmInputLabel strong {color:var(--fg);font-weight:600;}
.confirmInput:focus {border-color:var(--red);}
.confirmInput.error {border-color:var(--red);}
.confirmInputError{font-size:.73em;color:var(--red);margin-top:.4em;display:none;}


/* ===========================================
알림 notification.php
=========================================== */
.notiPageList { display:flex; flex-direction:column; }
.notiPagePanel { display:none; }
.notiPagePanel.active { display:block; }
.notiPageItem { border-bottom:1px solid var(--border); }
.notiPageItem:last-child { border-bottom:none; }
.notiPageItemHead { display:flex; align-items:center; gap:.75em; padding:.95em 0; cursor:pointer; }
.notiPageItem.new .notiTitle { font-weight:600; color:var(--fg); opacity:1; }
.notiPageItem.new .notiPageItemHead::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); flex-shrink:0;}
.notiPageItem:not(.new) .notiPageItemHead::before { content:''; width:6px; height:6px; flex-shrink:0; }
.notiPageItem.expanded .notiChevron { transform:rotate(180deg); }
.notiPageDetail { display:none; font-size:.85em; color:var(--fgMuted); line-height:1.75; padding:.1em 0 1.1em 2.3em; white-space:pre-line; }
.notiReadAllBtn { color:var(--fgMuted); transition:color var(--transition); }
.notiReadAllBtn:hover { color:var(--primary); }
.notiWrap {position:relative;}
.notiBadge {position:absolute; top:.1em; right:.1em; width:.4em; height:.4em; background:var(--primary); border-radius:50%; pointer-events:none;}
.notiDropdown {display:none; position:absolute; top:calc(100% + 8px); right:-.5em; width:min(22em, 94vw); background:var(--surface); border:1px solid var(--border2); border-radius:var(--radiusLg); box-shadow:var(--shadow); z-index:1200; overflow:hidden; flex-direction:column;}
.notiDropdown.open {display:flex;}
.notiTabs {display:flex; border-bottom:1px solid var(--border); flex-shrink:0;}
.notiTab {flex:1; padding:.6em; font-size:.82em; font-weight:600; color:var(--fgMuted); text-align:center; cursor:pointer; transition:color var(--transition), background var(--transition); border-radius:0;}
.notiTab.active {background:var(--primary); color:var(--hBtnText);}
.notiTab:not(.active):hover {color:var(--fg);}
.notiBody{max-height:22em; overflow-y:auto; min-height: 15em; padding: .5em 0;}
.notiItem{display:flex; align-items:flex-start; gap:.75em; padding:.8em 1em; cursor:pointer; transition:background var(--transition);}

.notiIcon {width:2em; height:2em; border-radius:50%; background:var(--gradSoft); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--primaryAlt); margin-top:.1em;}
.notiIcon svg{width: 48%; height: auto;}
.notiContent {flex:1; min-width:0;}
.notiTitle{font-size:.85em; font-weight:5600; color:var(--fg); margin-bottom:.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity: .8;}
.notiItem.new .notiTitle{font-weight:600; color:var(--fg); opacity: 1;}

.notiTime {font-size:.73em; color:var(--fgDim);}
.notiChevron {color:var(--fgDim); flex-shrink:0; align-self:center; transition:transform var(--transition);}
.notiItem.expanded .notiChevron {transform:rotate(180deg);}
.notiDetail{display:none; font-size:.82em; color:var(--fgMuted); line-height:1.6; padding:0 1em .9em 1.5em;}
.notiDetail.open {display:block;}