/* ===========================================
모달 공통
=========================================== */
/* 모달 오버레이 */
.modalOverlay{display:flex; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2000; align-items:center; justify-content:center; width: 100%; min-width: var( --minW); opacity: 0; visibility: hidden; transition: opacity .1s ease;}
.modalOverlay.open{visibility: visible; opacity: 1;}
html:has(.modalOverlay.open){overflow: hidden;}

/* 모달 박스 */
.modalBox{background:var(--bg); border:1px solid var(--border2); border-radius:var(--radiusLg); padding:2em 2em 0; width:calc(100% - 2em); max-width:400px; position:relative; box-shadow:0 8px 40px rgba(0,0,0,.5); max-height: 90dvh; overflow: hidden; display: flex; flex-direction: column;}
.modalContent {display:flex; flex-direction:column; flex:1; min-height:0;}
@media (max-width:600px){
  .modalBox{padding: 1.8em 1em 0;}
}

/* 모달 패널 */
.modalPanel{position:fixed; top:0; right:0; width:min(22em, 92vw); height: 100dvh; background:var(--surface1); border-left:1px solid var(--border2); z-index:1501; transform:translateX(100%); transition:transform .2s ease; display:flex; flex-direction:column; overflow:hidden;}
.modalPanel.open {transform:translateX(0);}
.modalPanel *{-ms-overflow-style: none; scrollbar-width: none;}
.modalPanel *::-webkit-scrollbar{display: none;}
@media (max-width:900px){
  .charModalHeader {position: sticky; top: 0; right: 0; display: flex; justify-content: flex-end; z-index: 20;}
}

/* 모달 닫기 */
.modalClose{position:absolute; top:.8em; right:.8em; width:2em; height:2em; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--fgMuted); transition: color var(--transition); z-index: 10; background:rgba(107, 107, 107, .45); color: #fff;}
.modalClose svg{width: 80%; height: auto;}
.modalPanel .modalClose{position: static;}

/* 타이틀 */
.modalTitle{font-size:1.1em; font-weight:700; color:var(--fg); margin-bottom:1em;}
.modalTitle em{font-style:normal; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
#authModal .modalTitle{font-size:1.35em;}

/* 본문 */
.modalBody{flex:1; overflow-y:auto; min-height: 0; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 2em;}
.modalBody::-webkit-scrollbar{display: none;}
.confirmModal .modalBody{text-align: center;}
.divider{width: 100%; height:1px; background:var(--border); margin:.75em 0;}
.modalTit{font-size:1.1em; font-weight: 500; margin-bottom:.5em;}
.modalDesc{font-size:.8em;color:var(--fgMuted);}
@media (max-width:600px){
  .modalBody{padding-bottom: 1em;}
}
/* 모달 하단 고정 버튼  */
.modalFooter{display:flex; align-items:center; gap:.75em; flex-shrink:0; margin-top:1.5em;}
.modalFooter>button{flex: 1; font-weight: 500;}

@media (max-width:600px){
  .modalFooter{margin-top:1em;}
}

/* ===========================================
로그인/회원가입 모달 modal/signin.php
=========================================== */
/* ======= 로그인/회원가입 찾기 ======= */
.modalField{position: relative; margin-bottom:.8em;}
.modalField label{display:block; font-size:.8em; font-weight:500; color:var(--fgMuted); margin-bottom:.4em;}
.modalField input{width:100%; background:transparent; border:1.5px solid var(--border2); border-radius:2em; padding:.65em 1em; font-size:.9em; color:var(--fg); font-family:var(--fontSans); outline:none; transition:border-color var(--transition);}
.modalField input::placeholder{color:var(--fgDim);}
.modalField input:focus{border-color:var(--primary);}
.modalFieldPw{position:relative;}
.modalFieldPw input{padding-right:2.8em;}
.modalPwToggle{position:absolute; right:.9em; top:50%; transform:translateY(-50%); color:var(--fgDim); cursor:pointer; transition:color var(--transition); display: flex; align-items: center;}
.modalPwToggle:hover{color:var(--fg);}
.modalForgot {display:block; text-align:right; font-size:.78em; color:var(--fgMuted); margin-top:.4em; transition:color var(--transition); cursor: pointer;}
.modalForgot:hover{color:var(--primary);}

.modalSignup {text-align:center; font-size:.82em; color:var(--fgMuted); margin-bottom:1.25em; margin-top: 1em;}
.modalSignup a {color:var(--primary); font-weight:600; cursor: pointer;}
.modalDivider {display:flex; align-items:center; gap:.75em; margin-bottom:1em;}
.modalDivider::before,.modalDivider::after {content:''; flex:1; height:1px; background:var(--border);}
.modalDivider span{font-size:.78em; color:var(--fgDim); white-space:nowrap;}
.modalBtnGoogle{width:100%; padding:.7em; border-radius:2em; background:var(--surface2); border:1.5px solid var(--border2); color:var(--fg); font-size:.88em; font-weight:500; display:flex; align-items:center; justify-content:center; gap:.6em; transition:background var(--transition), border-color var(--transition);}
.modalBtnGoogle:hover{background:var(--surface3);}
 
.modalAgree{font-size:.78em; color:var(--fgDim); text-align:center; line-height:1.6; margin:1em 0 0;}
.modalAgreeLinks{margin-top:.3em;}
.modalAgreeLinks a{color: var(--primary); font-weight: 600; cursor: pointer;}

/* ======= 아이디/비밀번호 찾기 ======= */
#findModal .modalBox {max-width:380px;}
.findPanel .pageAccent{margin-bottom:1.5em;}
.findCodeRow {display:flex; gap:.5em;}
.findCodeRow input {flex:1;}
.findSendCodeBtn {flex-shrink:0; padding:0 1em; background:var(--primary); color:#fff; font-size:.8em; font-weight:700; border-radius:var(--radiusMd); cursor:pointer; transition:opacity var(--transition); white-space:nowrap;}
.findSendCodeBtn:hover {opacity:.88;}
.findSendCodeBtn:disabled {opacity:.45; cursor:default;}
.inputWithTimer {position: relative; width: 100%;}
.inputWithTimer input {width: 100%; padding-right: 70px; }
.inputWithTimer .timer {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--primary); pointer-events: none;}
.findResult {display:none; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radiusMd); padding:.85em 1em; margin-bottom:1em;}
.findResult.show {display:block;}
.findResultLabel {font-size:.75em; color:var(--fgMuted); margin-bottom:.25em;}
.findResultValue {font-size:.9em; font-weight:700; color:var(--fg);}
.findPanel .modalFooter{flex-direction: column;}
.findPanel .modalFooter .mainBtn{width: 100%;}

/* ===========================================
캐릭터 상세 모달 modal/character.php
=========================================== */
.charModal .modalBox{width:calc(100% - 2em); max-width: 1000px; display:flex; flex-direction:row; padding: 0; height:min(33em, 88dvh);}
.charModal *{-ms-overflow-style: none; scrollbar-width: none;}
.charModal *::-webkit-scrollbar{display: none;}
@media (max-width:900px) {
  .charModal .modalBox{flex-direction:column; max-width: 400px; height: 88vh; overflow-y: auto;}
}

/* ======= 이미지 갤러리 ======= */
.charModalGallery {position:relative; flex-shrink:0; overflow:hidden; background:var(--surface2); aspect-ratio:1/1; height:100%;}
.charGalleryTrack {position: relative;}
.charGalleryItem {display: none; width:100%; height:100%; object-fit:cover;}
.charGalleryItem.active {display: block;}
.charGalleryBtn {position:absolute; top:50%; transform:translateY(-50%); width:2.5em; height:2.5em; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); border-radius:50%; color:#fff; transition:background var(--transition); z-index:5;}
.charGalleryBtn:hover {background:rgba(0,0,0,.7);}
.charGalleryPrev{left:.6em;}
.charGalleryNext{right:.6em;}

@media (max-width:900px) {
  .charModalGallery{width:100%; height:auto;}
}

/* ======= 우측 콘텐츠 ======= */
.charModalContent {flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

@media (max-width:900px) {
  .charModalContent {overflow: visible;}
}

/* == 캐릭터 모달 탭 == */
.charModalTabs {display:flex; align-items:center; gap:10px; flex-shrink:0; padding:.5em 1.4em 0;}
.charModalTab{padding:.7em .1em; font-size:.85em; font-weight:600; color:var(--fgMuted); cursor:pointer; border-bottom:2px solid transparent; transition:color var(--transition),border-color var(--transition); white-space:nowrap; display:flex; align-items:center;}
.charModalTab.active {color:var(--primary); border-color:var(--primary);}
.charModalTab:hover:not(.active) {color:var(--fg);}

.charModalTabPanel{display:none !important;}
.charModalTabPanel.active{display:flex !important; flex-direction:column; flex:1; overflow:hidden; min-height:0;}
/* About은 block 스크롤 박스 */
.charModalBody.charModalTabPanel.active {display:block !important; overflow-y:auto; flex:1;}

@media (max-width:900px) {
  .charModalBody.charModalTabPanel.active {overflow: visible;}
}

/* 본문 */
.charModalBody{flex:1; padding:1.25em 1.4em 1.5em;}
.charModalTitWrap{display: flex; align-items: center; justify-content: space-between; margin-bottom:.6em;}
.charModalTitle{font-size:1.2em; font-weight:700; color:var(--fg); margin-right: auto;}

@media (max-width:900px){
  .charModalTitle{font-size:1.1em;}
  .charInfo .profileImg{width: 1.8em; height: 1.8em;}
}
/* 국기 탭 */
.charLangFlags{display:flex; align-items:center; gap:3px; margin: 0 .6em 0 .5em; flex-shrink:0;}
.charLangFlag{display:inline-flex; align-items:center; justify-content:center; padding:.2em .4em .25em; border-radius:4px; border:1.5px solid var(--border); background:none; font-size:.72em; font-weight:700; letter-spacing:.04em; color:var(--fgMuted); cursor:pointer; opacity:.55; transition:opacity var(--transition), border-color var(--transition), color var(--transition), background var(--transition); flex-shrink:0; line-height:1;}
.charLangFlag:hover{opacity:.85; border-color:var(--primary); color:var(--primary);}
.charLangFlag.active{opacity:1; border-color:var(--primary); color:var(--primary); background:var(--primary15, rgba(99,102,241,.12));}

/* 언어별 설명 패널 */
.charLangDesc{display:none; font-size:.88em; color:var(--fgMuted); line-height:1.7; margin-bottom:.65em;}
.charLangDesc.active{display:block;}
.charModalMeta{display:flex; align-items:center; gap:1em; margin-bottom:.8em; flex-wrap:wrap;}
.charModalStat{display:flex; align-items:center; gap:.3em; font-size:.8em; color:var(--fgMuted);}
.charModalStat svg {color:var(--fgDim);}
.authorRow{display:flex; align-items:center; gap:.6em; margin-bottom:.9em;}
.authorName {font-size:.9em; font-weight:500; color:var(--fg);}
.charInfo .cardTag{font-size:.9em;}
.charInfo .cardDesc{font-size:.9em;}
.cardDate{font-size:.8em; color:var(--fgDim);}

/* More by */
.moreBy{margin-top: 2em;}
.modelTitWrap{display:flex; align-items:center; justify-content:space-between; margin-bottom:.75em;}
.modelTitWrap .mTit{font-size:.9em; font-weight:700; color:var(--fg);}
.modelTitWrap .moreBtn{font-size:.75em; color:var(--fgMuted); border:1px solid var(--border); border-radius:2em; padding:.1em .7em .2em; transition:color var(--transition), border-color var(--transition);}
.modelTitWrap .moreBtn:hover{color:var(--primary); border-color:var(--primary);}
.moreBy .charGrid{grid-template-columns:repeat(3, 1fr); gap:.6em; margin-bottom:1.25em; font-size: .95em;}

/* Start Conversation */
.charModalFooter {display:flex; align-items:center; gap:.75em; padding:.9em 1.4em; border-top:1px solid var(--border); flex-shrink:0; background:var(--surface);}
.charModalStartBtn {flex:1; display:flex; align-items:center; justify-content:center; gap:.5em; background:var(--grad); color:#fff; font-size:.9em; font-weight:700; border-radius:2em; padding:.75em; transition:opacity var(--transition);}
.charModalStartBtn:hover {background: var(--grad-hover);}
.charModalWishBtn {width:3em; height:3em; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border2); color:var(--fgMuted); transition:color var(--transition), border-color var(--transition);}
.charModalWishBtn:hover {color:#ff6b8a;}

@media (max-width:900px){
  .charModalFooter{position: sticky; bottom:0; z-index: 50; gap: .5em;}
}


/* == 댓글 == */
.cmtInputBox {display:flex; flex-direction: column; gap:.6em; padding:.8em 1em; border:1px solid var(--border); flex-shrink:0; background: var(--inputBg); border-radius: var(--radiusMd); margin-bottom: 1em; width: 100%;}
.cmtInputWrap{display:flex; align-items: flex-end; justify-content: space-between; gap: .5em; }
.cmtInputField{background:transparent; border:none; outline:none; font-size:.88em; color:var(--fg); font-family:var(--fontSans); margin-bottom: .8em; width: 100%; resize: none; min-height: 20px; max-height: 80px;}
.cmtInputMeta {display:flex; align-items:center; gap:.75em; font-size:.78em; color:var(--fgMuted);}
.cmtInputMeta .cmtMetaItem {display:flex; align-items:center; gap:.3em; cursor:pointer; transition:color var(--transition);}
.cmtInputMeta .cmtMetaItem:hover {color:var(--fg);}
.cmtInputMeta .cmtMetaItem svg {flex-shrink:0;}
.cmtSendBtn{width:1.8em; height:1.8em; display:flex; align-items:center; justify-content:center; border-radius:50%; background: var(--primary); color:#fff; transition:color var(--transition);}
.cmtMetaItem.is-private{color: var(--primary);}
.cmtSendBtn svg{width: 50%; height: 50%; transform: translateX(-1px);}
.cmtSendBtn:hover {background:var(--primary-hover);}
.cmtSortRow {display:flex; align-items:center; justify-content:flex-end; gap:.75em; flex-shrink:0;}
.cmtSortBtn {font-size:.78em; color:var(--fgDim); cursor:pointer; transition:color var(--transition);}
.cmtSortBtn.active {color:var(--fg); font-weight:600;}
.cmtSortBtn:hover {color:var(--fg);}

.cmtScrollArea {flex:1; overflow-y:auto; min-height:0; -ms-overflow-style:none; scrollbar-width:none;}
.cmtScrollArea::-webkit-scrollbar {display:none;}
.cmtItem {padding:.9em 0; border-bottom:1px solid var(--border);}
.cmtItem:last-child {border-bottom:none;}
.cmtItemHead {display:flex; align-items:center; gap:.5em; margin-bottom:.4em;}
.cmtAvatar {width:1.8em; height:1.8em; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--surface2);}
.cmtAvatar img {width:100%; height:100%; object-fit:cover;}
.cmtUsername {font-size:.85em; font-weight:600; color:var(--fg);}
.cmtTime {font-size:.75em; color:var(--fgDim);}
.cmtMore {margin-left:auto; color:var(--fgDim); cursor:pointer; transition:color var(--transition);}
.cmtMore:hover {color:var(--fg);}
.cmtprivateIcon{color: var(--fgMuted);}

.giftAccent{width: calc(100% - 2.5em); font-size: .8em; background: rgba(168,113,255,.1);
border: 1px solid var(--primary); color: var(--primary); margin-left:2.5em; border-radius: 5px; padding: .3em 1em; display: flex; gap: .2em; border-radius: 5em; margin-bottom: .5em; font-weight: 600;}
.giftAccent .coinIcon{transform: translateY(2px);}
.giftAccent span{flex: 1;}
.cmtText{font-size:.85em; color:var(--fg); line-height:1.6; margin-bottom:.5em; margin-left:2.5em;}
.cmtText.privateText{padding: .4em 1em .5em; background: var(--surface1); text-align: center; border-radius: var(--radiusMd);  border: 1px solid var(--border); color: var(--fgDim);  font-size: .8em;}
.cmtActions {display:flex; align-items:center; gap:.9em; padding-left:2.5em;}
.cmtActionBtn {display:flex; align-items:center; gap:.3em; font-size:.78em; color:var(--fgDim); cursor:pointer; transition:color var(--transition);}
.cmtActionBtn:hover {color:var(--fg);}
.cmtReplyToggle {display:flex; align-items:center; gap:.3em; font-size:.78em; color:var(--fgDim); cursor:pointer; transition:color var(--transition);}
.cmtReplyToggle:hover {color:var(--primary);}
.cmtReplyCount {color:var(--primary);}

/* 선물 칩 (댓글 입력란) */
.cmtGiftCont{display:inline-flex; align-items:center; gap:.2em; background:rgba(168,113,255,.1); border:1px solid var(--primary); border-radius:1em; padding:.18em .6em .18em .45em; font-size:.75em; font-weight:600; color:var(--primary); flex-shrink:0; white-space:nowrap;}
.cmtGiftChipClose {font-size:.9em; line-height:1; cursor:pointer; color:var(--primary); opacity:.7; margin-left:.1em; transition:opacity var(--transition);}
.cmtGiftChipClose:hover {opacity:1;}

/* cmtMore 드롭다운 */
.cmtMoreWrap {position:relative; margin-left:auto;}

/* 댓글 하트 */
.cmtLikeBtn {display:flex; align-items:center; gap:.3em; font-size:.78em; color:var(--fgDim); cursor:pointer; transition:color var(--transition);}
.cmtLikeBtn:hover {color:#ff6b8a;}
.cmtLikeBtn.liked {color:#ff6b8a;}
.cmtLikeBtn.liked svg {fill:#ff6b8a; stroke:#ff6b8a;}
.cmtLikeBtn svg {transition:fill var(--transition), stroke var(--transition);}

/* == 답글 영역 == */
.cmtReplyArea {display:none; padding-left:2.3em; margin-top:.25em;}
.cmtReplyArea.open {display:block;}
.cmtReplyItem {padding:.65em 0; border-top:1px solid var(--border);}
.cmtReplyItemHead {display:flex; align-items:center; gap:.5em; margin-bottom:.35em;}
.cmtReplyAvatar {width:1.5em; height:1.5em; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--surface2);}
.cmtReplyAvatar img {width:100%; height:100%; object-fit:cover;}
.cmtReplyUsername {font-size:.82em; font-weight:600; color:var(--fg);}
.cmtReplyTime {font-size:.72em; color:var(--fgDim);}
.cmtReplyMore {margin-left:auto; color:var(--fgDim); cursor:pointer; transition:color var(--transition);}
.cmtReplyMore:hover {color:var(--fg);}
.cmtReplyText {font-size:.82em; color:var(--fg); line-height:1.6; padding-left:2em; margin-bottom:.35em;}
.cmtReplyActions {display:flex; align-items:center; gap:.5em; padding-left:2em;}
.cmtReplyActionBtn {display:flex; align-items:center; gap:.25em; font-size:.75em; color:var(--fgDim); cursor:pointer; transition:color var(--transition);}
.cmtReplyActionBtn:hover {color:var(--fg);}

/* 답글 입력창 */
.cmtReplyInputRow {display:none; align-items:center; gap:.5em; padding:.5em 0 .25em; border-top:1px solid var(--border);}
.cmtReplyInputRow.open {display:flex;}
.cmtReplyInputAvatar {width:1.5em; height:1.5em; border-radius:50%; background:var(--grad); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.65em; font-weight:700;}
.cmtReplyInput {flex:1; background:var(--surface2); border:1px solid var(--border2); border-radius:2em; padding:.35em .85em; font-size:.82em; color:var(--fg); outline:none; font-family:var(--fontSans);}
.cmtReplyInput:focus {border-color:var(--primary);}
.cmtReplySendBtn {color:var(--primary); flex-shrink:0;}
/* 토글 chevron 회전 */
.cmtReplyToggle{transform: translateX(-.7em);}
.cmtReplyToggle svg{transform:translateY(1px);}
.cmtReplyToggle.open svg {transform:rotate(90deg);}


/* == 룸 목록 == */
.roomItem {display:flex; align-items: flex-start; gap:.5em; padding:.9em 0; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--transition);}
.roomItem:last-child {border-bottom:none;}
.roomThumb {width:3em; height:3em; border-radius:var(--radiusMd); overflow:hidden; flex-shrink:0; background:var(--surface2);}
.roomThumb img {width:100%; height:100%; object-fit:cover;}
.roomBody {flex:1; min-width:0;}
.roomNameWrap{display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom:.15em; }
.roomName {font-size:.88em; font-weight:600; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.roomPreview {font-size:.78em; color:var(--fgMuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.roomMeta {display:flex; align-items:center; gap:.25em; flex-shrink:0; margin-top: .3em;}
.roomTime {font-size:.72em; color:var(--fgDim);}
.roomTime::before{content: '·'; color: var(--fgDim); display: inline-block; margin: 0 2px;}
.roomTurns {font-size:.72em; color:var(--fgDim);}
.roomEmpty {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; padding:3em 0; color:var(--fgDim);}
.roomEmpty p {font-size:.85em;}


/* == 룸 메뉴 == */
.roomMenuWrap { position: relative; flex-shrink: 0; }
.roomMenuBtn { color: var(--fgMuted); width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; transform: translateX(.5em); transition: color var(--transition); padding: 0 !important; border: none !important;}
/* charModal 내부 드롭다운은 JS fixed 포지셔닝 사용 — overflow clip 이슈 방지 */
.charModal .dropMenu { position: fixed; right: auto; }

/* ===========================================
성인인증 modal/age_verfication.php
=========================================== */
.ageOverlay .modalBody{text-align: center;}
.ageModalIcon{width:3.5em;height:3.5em;border-radius:50%;background:rgba(168,113,255,.15);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25em;color:var(--primary);}

.ageModalStart{padding:.65em 1.5em;border-radius:2em;background:var(--primary);color:#fff;font-size:.88em;cursor:pointer;transition:opacity var(--transition);}
.ageModalStart:hover{opacity:.88;}

/* ===========================================
룸 리스트 modal/room.php
=========================================== */
.roomListOverlay .profileWrap{margin-bottom: .5em;}

/* ===========================================
선물 모달 modal/gift.php
=========================================== */
.giftOverlay{z-index:4000;}
.giftBalanceRow {display:flex; align-items:center; gap:.5em; margin-bottom:1em;}
.giftBalanceLabel {font-size:.82em; color:var(--fg); flex:1;}
.giftBalanceAmt {font-size:.82em; font-weight:700; color:var(--fg);}
.giftAmtRow {display:flex; align-items:center; gap:.5em; background:var(--surface); border:1.5px solid var(--primary); border-radius:var(--radiusMd); padding:.55em .9em; margin-bottom:.75em;}
.giftAmtInput {flex:1; background:transparent; border:none; outline:none; font-size:.9em; color:var(--fg); font-family:var(--fontSans);}
.giftAmtUnit {font-size:.8em; color:var(--fgMuted); flex-shrink:0;}
.giftPresets {display:flex; gap:.4em; margin-bottom:1em; flex-wrap:wrap;}
.giftPresetBtn {flex:1; min-width:4em; padding:.45em .3em; background:var(--subMenu); border:1px solid var(--border2); border-radius:5em; font-size:.8em; font-weight:600; color:var(--fgMuted); cursor:pointer; text-align:center; transition:background var(--transition),color var(--transition),border-color var(--transition);}
.giftPresetBtn:hover {background:var(--surface2); color:var(--fg);}
.giftPresetBtn.active {background:var(--gradSoft); border-color:var(--primary); color:var(--primary);}
.giftMsgLabel {font-size:.8em; color:var(--fgMuted); margin-bottom:.4em;}
.giftMsgCounter {font-size:.72em; color:var(--fgDim); text-align:right; margin-top:.3em; margin-bottom:1em;}

/* ===========================================
캐릭터 제작 저장 모달 modal/create_save.php
=========================================== */
/* == Save modal == */
.saveVisLabel {font-size:.8em;font-weight:700;color:var(--fgMuted);margin-bottom:.4em;}
.saveVisSelect {width:100%;background:var(--surface2);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;margin-bottom:1em;}
.saveVisSelect:focus {outline:none;border-color:var(--primary);}
.saveStatusBox {display:flex;align-items:flex-start;gap:.7em;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.85em 1em;margin-bottom:1.25em;}
/* private / unlisted */
.saveStatusBox.is-private {background: rgba(79,121,255,.08); border: 1px solid rgba(79,121,255,.2);}
.saveStatusBox.is-private .saveStatusTitle {color: #4f79ff;}
/* public */
.saveStatusBox.is-public {background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25);}
.saveStatusBox.is-public .saveStatusTitle {color: #22c55e;}
.saveStatusIcon {width:1.5em;height:1.5em;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1em;}
.saveStatusTitle {font-size:.88em;font-weight:700;color:var(--fg);margin-bottom:.1em;}
.saveStatusDesc {font-size:.75em;color:var(--fgMuted);}

/* Save modal custom vis dropdown */
.saveVisCustom {position:relative;margin-bottom:1em;}
.saveVisBtn {width:100%;display:flex;align-items:center;gap:.6em;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radiusMd);padding:.65em 1em;font-size:.9em;color:var(--fg);cursor:pointer;transition:border-color var(--transition);}
.saveVisBtn:hover {border-color:var(--primary);}
.saveVisIcon {color:var(--fgMuted);display:flex;align-items:center;}
.saveVisLabel2 {font-weight:500;}
.saveVisDropMenu {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:10;overflow:hidden;}
.saveVisDropMenu.open {display:block;}
.saveVisOption {display:flex;align-items:center;gap:.6em;padding:.65em 1em;font-size:.88em;color:var(--fgMuted);cursor:pointer;transition:background var(--transition),color var(--transition);}
.saveVisOption:hover {background:var(--surface2);color:var(--fg);}
.saveVisOption.active {color:var(--fg);font-weight:600;}
.sortableGhost {opacity:.35;background:var(--gradSoft);border-color:var(--primary) !important;}

/* ===========================================
약관, 정책 모달 terms.php
=========================================== */
.termModal .modalBox{max-width: 600px;}

/* 날짜 메타 */
.docMeta { font-size:.75em;color:var(--fgDim);margin-bottom:1.4em;  padding-bottom:.9em;border-bottom:1px solid var(--border);}
 
/* 섹션 */
.docSection {margin-bottom:1.4em;}
.docSection:last-child {margin-bottom:0;}
.docSectionTitle {font-size:.82em;font-weight:700;color:var(--fg); margin-bottom:.45em;}
 
/* 본문 텍스트 */
.docText {font-size:.8em;color:var(--fgMuted);line-height:1.75;}
 
/* 리스트 */
.docList {font-size:.8em;color:var(--fgMuted);line-height:1.75; padding-left:.2em;margin-top:.4em; display:flex;flex-direction:column;gap:.25em;}
.docList li{display:flex; gap:.5em;}
.docList li::before {content:"—";color:var(--fgDim);flex-shrink:0;}
.docList strong {color:var(--fg);font-weight:500;}
 
/* 이메일 링크 */
.docLink {color:var(--primary);cursor:pointer; text-decoration:underline;text-underline-offset:2px; transition:opacity var(--transition);}
.docLink:hover {opacity:.75;}