/*
=========================================================================
Base Color Css
=========================================================================
*/
:root { color-scheme: dark light; }
:root {	
  --color-primary: #7d6ffa;
}
html[data-theme="light"] {
  --bg: #fff;
  --bg-rgb: 255, 255, 255;
  --bg-op: #ffffffee;
  --fg: #111;
  --border: #eee;
  --border2: #ddd;
  --border-chat: #eee;
  --border-op: #eee;
  --gnb:#edecf7;
  --gnb-btn:#fff;
  --toggle-bg: #d7cbdf;
  --toggle-circle: #fff;
  --logo: url(../img/common/logo.png) no-repeat center / contain;
  --list-tag-text:#7d6ffa;
  --list-tag-bg:#f6f3ff;
  --list-tag-bg2:#9c95ca;
  --chat-user:#f6f3ff;
  --chat-ai:#f9f9f9;
  --btn-border:#ddd;
  --gray:#555;
  --input-bg:#fff;
  --comment-bg:#f9f9f9;
  --light-gray:#f9f9f9;
  --disabled-gray:#ccc;
  --editor-btn-color:#000;
  --card-bg:#f8f9fa;
  --text-color:#333;
  --text-color-secondary:#888;
  --text-color-muted:#aaa;
  --border-color:#ddd;
  --primary-color:#7d6ffa;
  --secondary-color:#6c757d;
  --danger-color:#dc3545;
}
html[data-theme="dark"] {
  --bg: #0b0f14;
  --bg-rgb: 11, 15, 20;
  --bg-op: #0b0f14dd;
  --fg: #e5e7eb;
  --border: #333;
  --border2: #333;
  --border-chat: #444;
  --border-op: #444;
  --gnb:#1d2125;
  --gnb-btn:#444;
  --toggle-bg: #444;
  --toggle-circle: #fff;
  --logo: url(../img/common/logo_w.png)  no-repeat center / contain;
  --list-tag-text:#e0ddff;
  --list-tag-bg:#333;
  --list-tag-bg2:#555;
  --chat-user:#454253;
  --chat-ai:#333;
  --btn-border:#666;
  --gray:#e5e7eb;
  --input-bg:#333;
  --comment-bg:#0b0f14;
  --light-gray:#333;
  --disabled-gray:#666;
  --editor-btn-color:#888;
  --card-bg:#1a1f25;
  --text-color:#e5e7eb;
  --text-color-secondary:#aaa;
  --text-color-muted:#777;
  --border-color:#444;
  --primary-color:#7d6ffa;
  --secondary-color:#8a8d91;
  --danger-color:#dc3545;
}
@media (max-width: 1000px) {
  html[data-theme="light"] {
    --chat-user:#f6f3ff;
    --chat-ai:#fff;
  }
  html[data-theme="dark"] {
    --chat-user:#2b2933;
    --chat-ai:#0b0f14;
  }
}

/*
=========================================================================
공통 스타일
=========================================================================
*/
html, body{position:relative; background: var(--bg); color: var(--fg);}
#wrap{position:relative; min-width:350px; height:100%; overflow: hidden; margin: 0 auto; z-index:300; }
.cont{display: flex; justify-content: center;}
.inner{padding: 90px 8em 70px; min-height:850px; box-sizing: border-box; width: 100%; padding-left: calc(280px + 8em); max-width: 1800px;}
html:has(.hMenuSub) .inner{margin-top: 30px;}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

@media (max-width: 1500px) {
	.inner{padding: 90px 2em 70px; padding-left: calc(260px + 2em);}
}
@media (max-width: 1000px) {
  .inner{padding: 80px 1em !important;}
  html:has(.hMenuSub) .inner{margin-top: 0;}
}
@media (max-width: 600px) {
  .inner{padding: 70px 1em !important;}
}

/*========== 배경 ==========*/
.darkBg{width: 100%; height: 100dvh; z-index: 9990; background: rgba(0,0,0,0.4); position: fixed; top:0; left: 0; display: none;}
.darkBg.active{display: block;}

/*========== 닫기 버튼 ==========*/
.closeBtn{width: 20px; height: 20px; cursor: pointer; position: relative;}
.closeBtn:before,.closeBtn:after {content: ''; position: absolute; left: 50%; top: 50%;width: 100%; height: 2px; background: #eee; border-radius: 2px; transform-origin: center;}
.closeBtn:before{transform: translate(-50%, -50%) rotate(45deg);}
.closeBtn:after{transform: translate(-50%, -50%) rotate(-45deg);}

/*========== 버튼 ==========*/
.btnWrap{display: flex; gap: 10px;}
.btnWrap.bottomBtnWrap{gap: 15px; justify-content: center; margin-top: 40px;}
.btnWrap.bottomBtnWrap>button{min-width: 140px;}
.btn{border-radius: 5px; border: 1px solid var(--border2); text-align: center; color: var(--gray); font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: .45em 1.5em .5em; box-sizing: border-box; background: var(--bg); line-height: 1; min-height: 38px; font-size: 1.05em;}
.btn.mainBtn{background: var(--color-primary); color: #fff; border: none;}
.header .btn{ min-height: auto !important;}
@media (max-width: 1000px) {
  .btn{padding: .25em 1.2em;}
}
@media (max-width: 600px) {
  .btn{padding: .25em .8em;}
  .btnWrap.bottomBtnWrap{flex-wrap: wrap; gap: 10px;}
  .btnWrap.bottomBtnWrap>button{min-width: auto; flex: 1 1 calc(50% - 5px);}
}
/*========== 프로필 ==========*/
.profile{width: 30px; height: 30px; border-radius: 50%; overflow: hidden; position: relative; display: inline-block; border: 1px solid var(--border);}
.profile img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

/*========== 드롭다운 ==========*/
.dropWrap{position: relative;}
.dropWrap:has(.setBtn){z-index: 10;}
.dropDown{display: none; position: absolute; top: 100%; left: 0; 
border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin-top: 5px; z-index: 999; background: var(--bg); border: 1px solid var(--border2); font-size: .95em; min-width: 80px;}
.dropBtn{position: relative; min-height: 38px; display: flex; align-items: center; padding: .4em 1em; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; background: var(--bg) url(../img/common/icon_select.png) no-repeat center right 7px / 10px; border: 1px solid var(--btn-border); color: var(--fg); box-sizing: border-box; padding-right: 2em;}

.dropDown .dOption {padding: .8em 1em; cursor: pointer; transition: background 0.2s; white-space: nowrap;}
.dropDown .dOption:hover{background: rgba(200, 200, 200, 0.1);}
.setBtn{width: 5px; height: 18px; cursor: pointer; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: .2em 1em; align-items:end;}
.setBtn>span{display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--fg);}
@media (max-width: 600px) {  
  .dropBtn{padding: .3em .8em; padding-right: 1.8em; background: var(--bg) url(../img/common/icon_select.png) no-repeat center right 7px / 8px;}
  .setBtn{height: 16px;}
  .setBtn>span{width: 2px; height: 2px;}
}

/*========== 표 스타일 ==========*/
.table-style{width: 100%;}
.table-style th, .table-style td{padding: .5em 1em; text-align: center;}
.table-style th{background: var(--gnb); white-space: nowrap;}
.table-style tr{border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2);}

/*========== 서식 스타일 ==========*/
.inputForm .inputCont{margin-bottom: 40px;}
.inputForm .inputCont:last-of-type{margin-bottom: 0;}
.inputForm .inputCont input{width: 100%;}
.inputForm .formInputWrap{display: flex; flex-direction: column; gap:20px;}
.inputForm .formInput>input, .inputForm .formInput>textarea{margin-bottom: 10px;}
.inputForm .formInput>input:last-of-type, .inputForm .formInput>textarea:last-of-type{margin-bottom: 0;}
.inputForm .fTit{margin-bottom: 5px; font-size: 1.1em; font-weight: 500;}
.inputForm .explan{margin-top: 5px; font-size: .95em;}

/*========== 체크박스 ==========*/
.checkWrap{display: flex; gap:10px; align-items: flex-start;} 
.checkWrap>input{margin-top: 4px;}


/*========== 컨텐츠 탭 ==========*/
.contTab{display: flex; margin-bottom: 30px; gap: 5px 20px; border-bottom: 1px solid var(--border); width: 100%; overflow-x: auto;}
.contTab::-webkit-scrollbar{display: none;}
.contTab>li{font-size: 1.2em; font-weight: 500; position: relative; padding: .5em 0; cursor: pointer; color: var(--gray); opacity: .7; white-space: nowrap; flex-shrink: 0; user-select: none;}
.contTab>li.active{color: var(--fg); opacity: 1;}
.contTab>li.active::after{content:''; width: 100%; height: 3px; background: var(--color-primary); position: absolute; left: 0; bottom:0;}
@media (max-width: 1000px){
  .contTab{gap: 5px 15px; border-bottom: none;}
}
@media (max-width: 600px){
  .contTab{gap: 5px 12px;}
  .contTab>li{font-size: 1.15em;}
}
/*========== 가운데 선 ==========*/
.line-through{text-decoration: line-through; margin-right: 3px; font-size: .9em; display: inline-block; opacity: .6;}

/*========== 페이지네이션 ==========*/
.pageination{display: flex; justify-content: center; gap:15px; margin-top: 50px;}
.pageination .arrow, .pageination .num{text-align: center; color: var(--gray); width: 20px; height: 20px; cursor: pointer; padding: 2px; border-radius: 3px; display: flex; justify-content: center; align-items: center;}
.pageination .arrow{border: 1px solid var(--border2);}
.pageination .arrow.first, .pageination .arrow.last{background: url(../img/common/pager_arrow_dubble.png) no-repeat center / 50%;}
.pageination .arrow.pre, .pageination .arrow.next{background: url(../img/common/pager_arrow.png) no-repeat center / 50%;}
.pageination .arrow.last, .pageination .arrow.next{transform: rotate(180deg);}
.pageination .numWrap{display: flex; gap:15px;}
.pageination .num.active{background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);}

@media (max-width: 600px){
    .pageination{gap: 10px;}
    .pageination .arrow, .pageination .num{width: 18px; height: 18px;}
    .pageination .numWrap{gap:10px;}
}
/*
=========================================================================
gnb
=========================================================================
*/
.gnb{z-index: 9999;}
.gnbWrap{z-index: 9999;  background: var(--gnb); padding: 2em; height: 100dvh; width: 280px; position: fixed; top:0; left: 0; box-sizing: border-box;}

/*========== 로고 ==========*/
.gnb .logo{width: 90%; height: 40px; background: var(--logo); cursor: pointer; margin: 0 auto 10px; max-width: 170px;}
.gnb .logo a{display: block; width: 100%; height: 100%;}
.gnb .logo img{width: 100%; height: auto;}

/*========== 설정 ==========*/
.gnbSet{display: flex; width: 100%; justify-content: space-between; margin-bottom: 20px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border2);}
.gnbSet .gnbSetBtn{display: flex; align-items: center; gap: 5px;}
.gnbSet .shopBtn{width: 22px; height: 22px; background: url(../img/common/icon_shop.png) no-repeat center / 90%; cursor: pointer;}
.gnbSet .alarmBtn{width: 22px; height: 22px; background: url(../img/common/icon_alarm.png) no-repeat center / 90%; cursor: pointer;}
.gnbSet .graphBtn{width: 22px; height: 22px; background: url(../img/common/icon_graph.png) no-repeat center / 90%; cursor: pointer;}

/*========== 토글 ==========*/
.theme-toggle{--toggle-width: 50px; --toggle-height: 23px; position: relative; display: inline-flex; align-items: center; width: var(--toggle-width); height: var(--toggle-height); background-color: var(--toggle-bg); border-radius: var(--toggle-height); cursor: pointer; transition: background-color 0.3s ease; padding: 4px; box-sizing: border-box; margin-left: 2px;}

/* 토글 원 */
.toggle-circle {width: calc(var(--toggle-height) - 6px); height: calc(var(--toggle-height) - 6px);  background-color: var(--toggle-circle); border-radius: 50%;
position: absolute; top: 3px; left: 3px; display: flex; justify-content: center;    align-items: center; transition: transform 0.3s ease, background-color 0.3s ease;    box-shadow: 0 2px 6px rgba(0,0,0,0.2);}

.toggle-circle .icon-sun{opacity: 0; transition: opacity 0.2s ease;}
.toggle-circle .icon-moon{opacity: 1; transition: opacity 0.2s ease;}
.toggle-circle>span>img{width: 80%; height: 80%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}

/* 라이트모드 설정 */
html[data-theme="light"] .theme-toggle {background-color: var(--toggle-bg);}
html[data-theme="light"] .toggle-circle {transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));}
html[data-theme="light"] .toggle-circle .icon-sun {opacity: 1;}
html[data-theme="light"] .toggle-circle .icon-moon {opacity: 0;}

/*========== 메뉴 ==========*/
/* 프로필 */
.nickWrap{display: flex; align-items: center; gap: 7px; flex-wrap: wrap;}
.gnb .gnbTopArea{width: 100%; border-bottom: 1px solid var(--border2); padding-bottom: 20px;}
.gnb .nickWrap{margin-bottom: 10px;}
.gnb .nickWrap>div{cursor: pointer;}
.gnb .profile{width: 40px; height: 40px;}
.gnb .nickname{font-size: 1.05em; font-weight: 600;}

/* 상단메뉴 */
.gnb_loginBtn, .gnb_mypageBtn, .gBtnWrap .subBtn .gBtn{width: 100%; padding: .8em;}
.gBtnWrap .mainBtn{display: flex; gap:7px; margin-bottom: 7px;}
.gBtnWrap .mainBtn>button{flex: 1; white-space: nowrap;}
.gnb_loginBtn, .gnb_mypageBtn{background: var(--color-primary) !important; color: #fff !important;}
.gBtnWrap .subBtn{display: flex; flex-direction: column; position: relative; gap:7px;}
.gBtnWrap .subBtn .gBtn{background: var(--gnb-btn); border-radius: 5px; cursor: pointer; text-align: center;}
html[data-theme="light"] .gBtnWrap .subBtn .gBtn{color:var(--color-primary);}
html[data-theme="dark"] .gBtnWrap .subBtn .gBtn{color: #e5e7eb;}

/* 하단메뉴 */
.gnb .gBtn{border: none; font-size: 1.02em;}
.gnbBtn{overflow-y: auto; max-height: 100%; padding-top: 20px; box-sizing: border-box;}
.gnbBtn::-webkit-scrollbar{display: none;}
.gnbBtn>div{position: relative; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border2);}
.gnbBtn>div:last-of-type{border-bottom: none; margin-bottom: 0;}
.gMenu{display: flex; flex-direction: column;}
.gMenu .gTit{font-size: .9em; margin-bottom: 5px; opacity: .8; font-weight: 500;}
.gMenu .gBtn{cursor: pointer; margin-bottom: 15px; background: none; padding: 0; text-align: left;}
.gMenu .gBtn:last-of-type{margin-bottom: 0;}

/* 로그아웃 */
.logout .gBtn{cursor: pointer; background: none; padding: 0; text-align: left; display: flex; align-items: center;}
.logout .gBtn::before{content:''; display: inline-block; width: 20px; height: 20px; background: url(../img/common/icon_logout.png) no-repeat center / 80%; margin-right: 2px;}

/*========== gnb 닫기 ==========*/
.gnbClose{position: absolute; top: 10px; right: -30px; display: none;}

@media (max-width: 1500px) {
  .gnbWrap{width: 260px;}
}
@media (max-width: 1000px) {
	.gnbWrap{width: 80%; max-width: 280px; min-width: 240px; left: -100%; transition: all .2s; padding: 1em;}
  .gnb.active .gnbWrap{left:0;}
  .gnb .logo{display: none;}
  .gnbClose{display: block;}
}


/*
=========================================================================
header
=========================================================================
*/
.header{position: fixed; top:0; left: 280px; padding: 0 30px; border-bottom: 1px solid var(--border); z-index: 999; width: 100%; background: var(--bg); box-sizing: border-box; min-width: 350px; max-width: calc(100% - 280px); display: flex; justify-content: space-between;}
.headerDetail, .headerSub{display: flex; align-items: center; min-height: 45px;}
.pageName{font-size: 1.15em; font-weight: 500;}
.header .hMenu{display: flex; gap: 25px; align-items: center;}
.header .hMenu>li{font-weight: 500; cursor: pointer; font-size: 1.1em; position: relative; min-height: 45px; box-sizing: border-box; display: flex; align-items: center;}
.header .hMenu>li>a{transform: translateY(-2px);}
.header .hMenu>li.active{color: var(--color-primary);}
.header .hMenu>li.active::after{content: ''; width: 100%; height: 3px; background: var(--color-primary); bottom:0; position: absolute; left: 50%; transform: translateX(-50%);}
.hMenuSub{position: fixed; top:45px; left: 280px; display: flex; gap: 20px; padding: 10px 30px; border-bottom: 1px solid var(--border); width: 100%; box-sizing: border-box; background: var(--bg); z-index: 990;}
.hMenuSub>li{color: var(--fg); opacity: .7;}
.hMenuSub>li.active{font-weight: 500; opacity: 1;}
.header .leftWrap{display: flex; align-items: center;}
.header .rightWrap{display: flex; align-items: center;}
.header .rightWrap .menuSearch{width: 34px; height: 34px; background: url(../img/common/icon_search.png) no-repeat center / 80%; padding: 0;}
.header .rightWrap .menuSearch>a{display: block; width: 100%; height: 100%;}
.header .rightWrap .dropDown{left: inherit; right:0;}
.header .rightWrap .setBtn>span{background: #888;}

/* 이전 버튼 */
.backBtn{width: 23px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-right: 2px; position: relative;}
.backBtn svg{width: 100%; height: auto; fill: var(--fg); display: block; position: absolute; top:50%; left: -5px; transform: translateY(-50%);}

/*========== 모바일 ==========*/
.header.mobile{z-index: 999; left: 0; display: flex; align-items: center; display: none; padding: 0 1em; justify-content: space-between; min-height: 45px;}
.hamburger {width: 20px; height: 16px; position: relative; cursor: pointer; display: flex;  flex-direction: column; justify-content: space-between; margin-right: 15px;}
.hamburger span{display: block; height: 2px; width: 100%; background: var(--fg);  border-radius: 2px;}

.header.mobile .logo{width: 120px; height: 40px; background: var(--logo);}
.header.mobile .logo img{width: 100%; height: auto;}
.header.mobile .logo a{display: block; width: 100%; height: 100%;}
.header.mobile .gnbSet{width: auto; margin-bottom: 0;}

@media (max-width: 1500px){
  .header{left: 260px; max-width: calc(100% - 260px);}
  .hMenuSub{left: 260px}
}
@media (max-width: 1000px){
  .header{max-width: inherit;}
  .headerDetail, .headerSub{left: 0; padding: 0 1em;}
	.header.pc{display: none;}
  .header.mobile{display: flex;}
  .hMenuSub{left: 0; display: none;}
  .hMenuSub>li{flex:1;}
  .hMenuSub>li>a{display: block; width: 100%; height: 100%; text-align: center; white-space: nowrap;}  
  .header .rightWrap .menuSearch{width: 32px; height: 32px;}
}
@media (max-width: 600px){
  .header .hMenu{gap: 15px;}
  .hMenuSub{gap: 10px;}  
  .pageName{font-size: 1.3em;}
}

/*
=========================================================================
footer
=========================================================================
*/
.footer{width: 100%; position: relative; display: flex; justify-content: center; color: var(--gray);  opacity: .7; font-size: .95em;}
.footer .inner{padding-top: 0 !important; padding-bottom: 50px !important;}
.footer .fCont{border-top: 1px solid var(--border); padding-top: 20px; position: relative;}
.footer .fLogo{width: 120px; height: 40px; background: var(--logo); margin-bottom: 10px; opacity: .7;}
.footer .fLinkWrap{display: flex; flex-wrap: wrap; margin-bottom: 10px; font-weight: 500; margin-top: 2px;}
.footer .fLink{display: flex; align-items: center; cursor: pointer;}
.footer .fLink::after{content: ''; width: 1px; height: 10px; background: var(--border2); margin: 0 8px; display: inline-block;}
.footer .fLink:last-of-type::after{display: none;}
.footer .fInfo{display: flex; width: 100%; flex-wrap: wrap; gap: 3px 20px;}
.footer .fInfo>li{display: flex;}
.footer .fInfo>li .fTit{margin-right: 10px; font-weight: 500; white-space: nowrap;}
.footer .fSnsWrap{display: flex; gap: 4px; align-items: center; position: absolute; top:25px; right:0;}
.footer .fSnsWrap .fSns{width: 28px; height: 28px;}
.footer .fSnsWrap .fSns.discord{background: url(../img/common/icon_discord.png) no-repeat center / 80%;}
.footer .fSnsWrap .fSns.instagram{background: url(../img/common/icon_instagram.png) no-repeat center / 80%;}
.footer .fSnsWrap .fSns.twitter{background: url(../img/common/icon_twitter.png) no-repeat center / 80%;}
.footer .copyright{font-size: .9em; color: #888; margin-top: 25px;}

@media (max-width: 600px){
  .footer .fInfo>li .fTit{width: 105px;}
  .footer .fInfo>li .fTxt{width:calc(100% - 110px);}
  .footer .fInfo{flex-direction: column;}
  .footer .fLink::after{margin: 0 4px;}
}

/*
=========================================================================
login.php 로그인 페이지
=========================================================================
*/
.loginPage .inner{position: relative; display: flex; height: 100dvh; justify-content: center; align-items: center;}
.loginCont{width: 100%; max-width: 600px; transform: translateY(-50px);}
.loginTit{display: flex; justify-content: center; align-items: center; margin:10px auto 30px;}
.loginTit .logo{width: 90%; height: 50px; background: var(--logo); cursor: pointer; margin: 0 auto; max-width: 240px;}
.loginTit .logo a{display: block; width: 100%; height: 100%;}
.loginTit .logo img{width: 100%; height: auto;}
.formSignin>*{margin-bottom: 10px;}
.inputLogin input, .inputPassword input{width: 100%; height: 45px; padding: 10px 15px;  box-sizing: border-box; box-sizing: border-box; border-radius: 5px;}
.loginOption{display: flex; justify-content: space-between; margin-top: 20px;}
.autoLogin{display: flex; align-items: center; gap: 5px;}
.loginSearch{display: flex; align-items: center;}
.loginSearch>div{cursor: pointer;}
.loginSearch .search_id::after{content: ''; width: 1px; height: 10px; background: var(--border2); margin: 0 8px; display: inline-block;}
.login .joinBtn{margin-top: 30px;}
.login .joinBtn::before{content: ''; width: 100%; height: 1px; display: block; background: #eee; transform: translateY(-45px);}
.loginBtn{background: var(--color-primary); width: 100%; min-height: 45px; color: #fff; border: none; font-size: 1.05em; margin-top: 20px;}
.joinBtnWrap{padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--border);}
.joinBtnWrap .joinTxt{font-size: 1.05em; font-weight: 500; text-align: center;;}
.joinBtn{width: 100%; min-height: 45px;font-size: 1.05em; margin-top: 15px;}
@media (max-width: 1000px) {
    .loginTit .logo{max-width: 210px; height: 35px;}
}

/*
=========================================================================
join.php 회원가입 페이지 - 동의
=========================================================================
*/
.join .mainTit{margin-bottom: 10px;}
.join .checkCont{margin-bottom: 40px;}
.join .checkCont:last-of-type{margin-bottom: 0;}
.join .totalCheck{background: var(--light-gray); border-radius: 5px; margin-top: 10px; padding: .8em 1.2em;}
.join .totalCheck .checkWrap{margin-top: 0;}
.join .totalCheck label{font-weight: 600; font-size: 1.1em;} 
.join .checkWrap{margin-top: 15px;}
.join .checkCont button{text-decoration: underline; color: var(--gray); background: transparent;}
.joinTxtBox{width: 100%; height: 140px; padding: 1rem; border: 1px solid var(--border2); background: var(--bg); border-radius: 10px; font-size: 0.95em; resize: none;}
.join .profile{width: 90px; height: 90px; border-radius: 50%;}
.join .pEditBtn{width: 25px; height: 25px; border: 1px solid #eee; border-radius: 50%; background: #fff url(../img/common/icon_camera.png) no-repeat center / 80%; position: absolute; bottom:0; right:-5px;}
.join .formInput:has(input:required) .fTit::after{content: ''; width: 5px; height: 5px; display: inline-block; background: var(--main-color); border-radius: 50%;  position: absolute; top:3px; right:-10px;}
.ageInputWrap{display: flex; align-items: center;}
.ageInputWrap>input{width: calc(100% - 30px) !important; margin-right: 15px;}
.ageInputWrap>p{width: 15px; text-align: center;}

/*
=========================================================================
join2.php 회원가입 페이지 - 정보입력
=========================================================================
*/
.joinForm .sendmail{display: flex; align-items: center; gap: 8px;}
.identityBtn{max-width: 180px;}
.joinForm .inputWrap{display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.joinForm .myConfirmTag{padding: .3em 1.5em;}
.joinForm .myConfirmTag.red{color:#ff0000;}
.joinForm .aligncenter {margin:0 auto;}
.joinForm .w100 {width:100%;}
.joinForm .wp300 {width:300px;}

/*
=========================================================================
account.php 계정찾기 페이지
=========================================================================
*/
.account .inner{display: flex; justify-content: center;}
.accountCont{width: 100%; max-width: 600px;}
.account  .explanBox{padding: 1em; border-radius: 10px; background: var(--comment-bg); border: 1px solid var(--border2); text-align: center; margin-bottom: 20px;}

/*
=========================================================================
index.php 메인 페이지
=========================================================================
*/
.main{position: relative; width: 100%; height: 100%; box-sizing: border-box;}
.mainTab{display: none; margin-bottom: 20px !important;}
.mainTab>li{padding-top: 0 !important;}
.mainSubTab{transform: translateY(-8px); margin-bottom: 10px !important;}
.mainSubTab>li{font-size: 1.1em;}
.mainSubTab>li::after{display: none;}

/*========== banner ==========*/
.banner-wrapper, .cSwiper-wrapper{position: relative;}
.banner{width: 100%; height: 250px; border-radius: 2em; overflow: hidden;  position: relative; background: #222; display: flex; justify-content: center; align-items: center; margin-bottom: 40px; border: 1px solid var(--border); box-sizing: border-box;}
.banner a{display: block; width:100%; height:100%; text-decoration: none; color: inherit; position:relative;}
.banner img{position: absolute; top: 50%; right: 0; transform: translateY(-50%);  height: 200%; width: auto; object-fit: cover; mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%); -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);}
.bTxtWrap {position: absolute; top: 50%; left: 80px; transform: translateY(-50%); max-width: 80%; z-index: 50;}
.bTag {color:#fff; font-size:1.1em; margin-bottom:6px; opacity:0.95;}
.bTxt {color:#fff; font-size:2.1em; line-height:1.2; font-weight:600;}

@media (max-width: 1000px) {
  .mainTab{display: flex;}
	.banner{height: 220px;}
  .banner img{height: 125%;}
  .bTxt{font-size: 1.8em;}
}
@media (max-width: 600px) {
	.banner{height: 180px;}
  .banner img{height: 100%;}
  .bTxtWrap{left: 50px;}
  .bTxt{font-size: 1.6em;}
}

/* 페이지네이션 스타일 */
.banner-wrapper .swiper-pagination{bottom: 14px !important; text-align: center; z-index: 50;}
.banner-wrapper .swiper-pagination-bullet{background: rgba(255,255,255,0.45); width: 8px; height: 8px; opacity: 1; margin: 0 6px !important; border-radius: 50%; transition: background 0.3s ease;}
.banner-wrapper .swiper-pagination-bullet-active{background: #fff;}

/* 좌우 화살표 (원형 + SVG) */
.sliderPrev, .sliderNext {position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: rgba(120, 120, 120, 0.5); transition: background .18s ease, transform .12s ease; cursor: pointer; z-index: 50;}
.sliderPrev:hover, .sliderNext:hover {background: rgba(120, 120, 120, 0.7); transform: translateY(-50%);}
.sliderPrev{left: -20px;}
.sliderNext{right: -20px;}
.sliderPrev svg, .sliderNext svg{width: 25px; height: 25px; fill: #fff; display: block;}

@media (max-width: 1000px) {
    .sliderPrev{left: -5px;}
    .sliderNext{right: -5px;}
}

@media (max-width: 600px) {
	.sliderPrev, .sliderNext {width: 35px; height: 35px;}
    .sliderPrev svg, .sliderNext svg{width: 22px; height: 22px;}
}

/*========== list area ==========*/
.mainTit{font-size: 1.4em; margin-bottom: 20px;}
.mainTit .tag{font-weight: 500;}

/* 리스트 슬라이드 */
.cSwiper-wrapper{margin-bottom: 45px;}
.cSwiper-wrapper:last-of-type{margin-bottom: 0;}
.characterSwiper{position: relative;}
.characterSwiper .swiper-slide{flex: 0 0 auto; cursor: pointer;}
.cSwiper-wrapper:has(.characterSwiper) .sliderPrev, .cSwiper-wrapper:has(.characterSwiper) .sliderNext{top: calc(50% - 30px);}
.listCont .cList{display: grid;  grid-template-columns: repeat(5, 1fr); gap: 20px;}

@media (max-width: 1500px){
  .listCont .cList {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 1000px){
  .listCont .cList {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 748px) {
  .listCont .cList {grid-template-columns: repeat(2, 1fr); gap: 10px;}
}
@media (max-width: 600px) {
  .mainTit{font-size: 1.3em; margin-bottom: 15px;}
}
.listCont .cList .cCont{width: 100%; min-width: 0; height: auto;}
.listCont .cList .cCont>a{cursor: pointer; position: relative;}
.lImgWrap{width: 100%; position: relative;}
.lImg{width: 100%; padding-top: 100%; margin-bottom: 10px; position: relative;  border-radius: 1em;  border: 1px solid var(--border);  box-sizing: border-box; aspect-ratio: 1 / 1; overflow: hidden;}
.lImg img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.listCont .lTxt .lTit {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 2px;}
.listCont .lTxt p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;  font-size: .95em;}
.mainTit.naru::before{content: ''; width: 33px; height: 33px; background: url(../img/common/logo_naru.png) no-repeat center / contain; display: inline-block; margin-right: 10px; transform: translateY(5px);}
.mainTit.official::before{content: ''; width: 33px; height: 33px; background: url(../uploads/emblems/emblem_1766381908_70ad4a9d.png) no-repeat center / contain; display: inline-block; margin-right: 10px; transform: translateY(5px);}

/* 태그 */
.lTag{display: block; font-size: .8em; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.lTag>li{padding: 0.15em 0.3em; color: var(--list-tag-text); background: var(--list-tag-bg); border-radius: 0.15em; white-space: nowrap; display: inline-block; margin-right: 3px;}
.lTag>li:last-of-type{margin-right: 0;}

/* 말풍선 */
.lData{display: flex; align-items: center; gap: 5px; margin-top: 6px;}
.lData .lChat{position: static;}
.lData>div{background: var(--list-tag-bg2); padding: 0.1em 0.4em; border-radius: 3px; color: #fff; font-size: .9em;}
.lChat{position: absolute; top:10px; right:10px; }
.lChat>span{display: flex; align-items: center;}
.lChat>span::before{content: ''; width: 12px; height: 12px; background: url(../img/common/icon_chat_w.png) no-repeat center / contain; display: inline-block; margin-right: 3px;}
.lHeart>span{display: flex; align-items: center;}
.lHeart>span::before{content: ''; width: 12px; height: 12px; background: url(../img/common/icon_heart.png) no-repeat center / contain; display: inline-block; margin-right: 3px;}

/* 컨텐츠 정보 */
.lInfo{display: flex; justify-content: space-between; font-size: .85em; margin-top: 4px; align-items: center;}
.lInfo .producer{padding: 0.15em 0.3em; border-radius: 3px;}

/* 상단태그 */
.itemTag{position: absolute; top:10px; right:10px; display: flex; align-items: center; gap: 5px;}
.itemTag .iTag{padding: .3em .5em; background: var(--color-primary); color: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9em; min-width: 30px;}
.itemTag .iTag.hot{background: #ff3852;}
.itemTag .iTag.new{ background: var(--color-primary);}
.itemTag .iTag.trend{ background: #ff6710;}

@media screen and (max-width: 748px) {
  .listCont .cList {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 600px) {
  .itemTag .iTag{padding: .2em .4em; min-width: 25px;}
}
/*
=========================================================================
search.php 검색 페이지
=========================================================================
*/
/*========== 검색창 ==========*/
.searchCont {width: 100%; padding:15px 20px; border: 1px solid var(--border);border-radius: 12px; box-sizing: border-box; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center;}
.searchBox{width: 100%; max-width: 1000px;}

/* 검색창 전체 래퍼 */
.searchWrap{display: flex; position: relative;  margin-bottom: 10px; border: 1px solid var(--color-primary); border-radius: 5px;}

/* 검색 옵션 버튼 */
.searchType {padding: 10px 16px; cursor: pointer; background-color: transparent; color: var(--fg); position: relative; border: none; width: 140px;}
.searchWrap .dropDown{ min-width: 140px;}

/* 검색 인풋 영역 */
.sInputWrap {flex: 1; display: flex; align-items: center; padding: 5px 10px;}
.sInputWrap input {flex: 1; padding: 10px; background: transparent; border: none; outline: none; color: var(--fg); }
.sInputWrap input:autofill, .sInputWrap input:autofill:hover,.sInputWrap input:autofill:focus,.sInputWrap input:autofill:active{-webkit-text-fill-color: var(--fg) !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;  box-shadow: 0 0 0px 1000px transparent inset !important; transition: background-color 5000s ease-in-out 0s !important;}
.sInputWrap input:-webkit-autofill,.sInputWrap input:-webkit-autofill:hover,
.sInputWrap input:-webkit-autofill:focus,.sInputWrap input:-webkit-autofill:active {-webkit-text-fill-color: var(--fg) !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; box-shadow: 0 0 0px 1000px transparent inset !important; transition: background-color 5000s ease-in-out 0s  !important;}
.searchBtn {padding: 8px 14px; background-color: var(--color-primary); color: #fff; border: none;  border-radius: 5px;  cursor: pointer; transition: all 0.2s ease;}

/* 태그 선택 */
.tagFillterWrap {display: flex; align-items: center; gap: 8px; margin-top: 10px; position: relative; flex-wrap: wrap;}
.tagChoiceBtn{padding: .2em 1em; border: 1px solid var(--btn-border);}
.tagChoiceBtn::before{content:''; width: 12px; height: 12px; margin-right: 5px;}
html[data-theme="light"] .tagChoiceBtn::before{background: url(../img/common/icon_tag.png) no-repeat center / contain;}
html[data-theme="dark"] .tagChoiceBtn::before{background: url(../img/common/icon_tag_w.png) no-repeat center / contain;}
.choiceTag{padding: .3em 1em; border-radius: 30px; background: var(--light-gray); border: 1px solid var(--border2); cursor: pointer; color: var(--gray); box-sizing: border-box; display: flex; align-items: center;}
.tagDeleteBtn{width: 10px; height: 10px; margin-left: 5px; transform: translateX(2px) translateY(0.5px);}
.tagDeleteBtn::before, .tagDeleteBtn::after{background: var(--gray); height: 1px;}

@media (max-width: 1000px) {
  .searchCont{border: none; padding: 0;}
}

@media (max-width: 600px) {  
  .searchType{width: 90px;}
  .sInputWrap{padding: 5px;}
  .sInputWrap input{width: calc(100% - 100px); padding: 8px 5px;}
  .searchWrap .dropDown{ min-width: 90px;}
}

/*========== 리스트 옵션 ==========*/
.listOptionWrap:has(.mainTit){display: flex; justify-content: space-between; align-items: center;}
.listOption{display: flex; justify-content: right; gap: 5px; margin-bottom: 20px;}


/*
=========================================================================
rank.php 랭킹페이지
=========================================================================
*/
.menuTab{display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;}
.menuTab>li{padding: .3em 1em; border-radius: 30px; color: var(--gray); cursor: pointer; background: var(--light-gray); border: 1px solid var(--border2); box-sizing: border-box;}
.menuTab>li.active{background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);}

.rankList{display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 50px;}
.rankList .cCont{width: 100%; min-width: 0; height: auto; box-sizing: border-box;}
.rankList .cCont>a{position: relative;}
.rankList .cCont:first-of-type{margin-right: 50%;}
.rankList .cCont:first-of-type, .rankList .cCont:nth-of-type(2),  .rankList .cCont:nth-of-type(3){border: 4px solid var(--color-primary); border-radius: calc(1em + 4px);}
.rankList .cCont:first-of-type .lImg, .rankList .cCont:nth-of-type(2) .lImg,  .rankList .cCont:nth-of-type(3) .lImg{border: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--border)}
.rankList .cCont:first-of-type .lTxtWrap, .rankList .cCont:nth-of-type(2) .lTxtWrap,  .rankList .cCont:nth-of-type(3) .lTxtWrap{padding: 0 1em 1em; box-sizing: border-box;}
.rankList .cCont .lTit{font-size: 1.2em;}
.rankList .cCont .explanTxt{word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--gray); white-space: inherit; font-size: .9em; margin: 5px 0 10px;}

/* 랭크 태그 */
.rankTag {position: absolute; top: -7px; left: 7px; z-index: 5; width: 38px; height: 38px; background: url(../img/common/rank_common.png) no-repeat center / contain; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .95em;}
.rankList .cCont:first-of-type .rankTag, .rankList .cCont:nth-of-type(2) .rankTag,  .rankList .cCont:nth-of-type(3) .rankTag{top:-20px; width: 46px; height: 46px; font-size: 1.1em; }
.rankList .cCont:first-of-type .rankTag{background: url(../img/common/rank_gold.png) no-repeat center / contain;}
.rankList .cCont.cCont:nth-of-type(2) .rankTag{background: url(../img/common/rank_silver.png) no-repeat center / contain;}
.rankList .cCont.cCont:nth-of-type(3) .rankTag{background: url(../img/common/rank_bronze.png) no-repeat center / contain;}

@media (max-width: 1000px) {
  .rankList{display: flex; flex-direction: column;}
  .rankList .cCont{width: 100%;}
  .rankList .cCont>a{display: flex; align-items: center; flex-direction: row;}
  .rankList .cCont:first-of-type{margin-right: 0;}
  .rankList .cCont .lImgWrap{width: 50%; padding-top: 0; flex-shrink: 0; max-width: 300px;}
  .rankList .cCont .lImgWrap .lImg{margin-bottom: 0;}
  .rankList .cCont:first-of-type .lImg, .rankList .cCont:nth-of-type(2) .lImg,  .rankList .cCont:nth-of-type(3) .lImg{border: none; border-bottom-left-radius: 1em; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 1px solid var(--border); border-bottom: 0;}
  .rankList .cCont:first-of-type .rankTag, .rankList .cCont:nth-of-type(2) .rankTag, .rankList .cCont:nth-of-type(3) .rankTag{width: 44px; height: 44px;}  
  .rankList .cCont:first-of-type .lTxtWrap, .rankList .cCont:nth-of-type(2) .lTxtWrap,  .rankList .cCont:nth-of-type(3) .lTxtWrap{padding: 1em; max-width: 50%;}
  .rankList .cCont .explanTxt{margin: 3px 0 8px;}
}
@media (max-width: 600px) {
  .rankTag{width: 33px; height: 33px; left: 5px; }
  .rankList .cCont:first-of-type .rankTag, .rankList .cCont:nth-of-type(2) .rankTag, .rankList .cCont:nth-of-type(3) .rankTag{width: 35px; height: 35px; top:-15px;}  
  .rankList .cCont:first-of-type .lTxtWrap, .rankList .cCont:nth-of-type(2) .lTxtWrap,  .rankList .cCont:nth-of-type(3) .lTxtWrap{padding: .5em 1em;}
  .rankList .cCont .explanTxt{white-space: nowrap;}
}

/*
=========================================================================
chat.php 채팅페이지
=========================================================================
*/
.chat{width: 100%; height: 100dvh; overflow: hidden; position: relative;}
.chat-background {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none;}
.chat-background-left, .chat-background-right{position: absolute; top: 0; height: 100%;   background-size: cover; background-position: center; background-repeat: no-repeat;   opacity: 0.8;  transition: opacity 0.3s ease;}
.chat-background-left {left: 0; width: calc(50% - 400px); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--chat-bg-image);}
.chat-background-right {right: 0; width: calc(50% - 400px); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--chat-bg-image);
background-position: right center;}
.chat .inner{width: 100%; max-width: 800px; padding: 0 !important; box-sizing: border-box; margin: 0 auto; position: relative; background: var(--bg);}

/*========== 채팅 설정 메뉴 ==========*/
.chatSetMenu{position: fixed; right:-100%; top:0; background: var(--gnb); height: 100dvh; width: 350px; z-index: 9999; padding: 2em; transition: right .2s; box-sizing: border-box; transform: translateZ(0); will-change: right;}
.chatSetMenu>*{margin-bottom: 15px;}
.chatSetMenu .chatSetClose{position: absolute; top: 15px; right: 15px;}
.chatSetMenu .chatSetClose:before,.chatSetMenu .chatSetClose:after {background: var(--gray);}
.chatSetMenu.active{right:0;}
.chatGoodsInfo{display: flex; align-items: center; font-size: .95em;}
.chatGoodsInfo>li{display: flex; align-items: center;}
.chatGoodsInfo>li::after{content: ''; width: 1px; height: 10px; background: var(--border2); display: inline-block; margin: 0 5px;}
.chatGoodsInfo>li:last-of-type::after{display: none;}
.chatGoodsInfo>li .gIcon{margin-right: 3px;}
.chatGoodsInfo>li.coin .gIcon{width: 18px; height: 18px; background: url(../img/common/can_icon.png) no-repeat center / contain;}
.chatGoodsInfo>li.ticket .gIcon{width: 20px; height: 20px; background: url(../img/common/ticket_icon.png) no-repeat center / contain;}
.chatGoodsInfo>li .gNum{font-weight: 500;}
.chatModelNow{width: 100%; padding: .5em 1em; background: var(--color-primary); box-sizing: border-box; border-radius: 5px; text-align: center; color: #fff; cursor: pointer;}
.chatModelNow::after {content: ''; width: 1px; height: 1px; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 2px; transform: translateY(calc(-50% + 1px)) rotate(45deg); pointer-events: none; margin-left: 10px;}
.chatSetWrap{overflow-y: auto; max-height: calc(100dvh - 110px);}
.chatSetWrap::-webkit-scrollbar{display: none;}
.chatSetWrap>*{margin-bottom: 15px;}
.packWrap{
    padding: .7em 1em; 
    border-radius: 5px; 
    border: 1px solid var(--border2); 
    background: var(--light-gray);
    display: flex; 
    flex-direction: column; 
    gap: 12px;
}

.packWrap>li{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: .8em 0;
    border-bottom:1px var(--border-op) solid;
}

.packWrap>li.packEmpty {
  text-align:center;
  grid-template-columns:none;
  border-bottom:0;
}

.packItem{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.packLabel{
    font-size: .85em;
    color: var(--gray);
    opacity: .8;
    font-weight: 400;
}

.packWrap .pTit, .packWrap .pDate{
    font-weight: 500;
    font-size: .95em;
    line-height: 1.3;
}

.packWrap .delLine {
  text-decoration: line-through;
}

/* 반응형 */
@media (max-width: 1000px) {
    .packWrap>li{
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .packWrap>li{
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .packItem{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    
    .packLabel{
        min-width: 70px;
        font-size: .9em;
    }
}
.chatSetBox{display: flex; flex-wrap: wrap; gap:10px;}
.chatSetBox .setCont{background: var(--gnb-btn); border-radius: 5px; padding: .8em 1em; box-sizing: border-box; text-align: center; width: calc(50% - 5px); cursor: pointer;}
.chatSetBox .setCont>ul{display: flex; flex-direction: column; align-items: center;}
.chatSetBox .setCont>h3{line-height: 1; font-size: .95em;}
.chatSetBox .setCont .setOption{display: none; padding: .3em 1em; background: var(--color-primary); border-radius: 20px; color: #fff; font-size: .9em; line-height: 1;}
.chatSetBox .setCont .setOption.active{display: block;}
.chatSetBox .setCont .setOption.off{background: var(--gnb); color: var(--fg);}
.chatSetBox .setCont .setToggle{display: block; padding: .3em 1em; background: var(--color-primary); border-radius: 20px; color: #fff; font-size: .9em; line-height: 1; cursor: pointer;}
.chatSetMenu select{width: 100%;}
.chatSetMenu .setCont{display: flex; flex-direction: column; gap:6px;}
.chatSetMenu .setCont textarea{height: 180px; width:100%; resize: none;}

@media (max-width: 600px) {
  .chatSetMenu{width: 90%; min-width: 300px;}
}

/*========== chat header ==========*/
.chatHeader{display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 800px; padding: 10px; box-sizing: border-box; height: 80px; background: var(--bg); z-index: 999; border-bottom: 1px solid var(--border); transform: translateZ(0); will-change: transform;}
.chatHeaderLeft{display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden;}
.chatProfile{display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; overflow: hidden;}
.viewImage{width: 50px; height: 50px; border-radius: 50%; overflow: hidden; position: relative; display: inline-block; border: 1px solid var(--border);}
.viewImage img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.chatTxtWrap{display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow: hidden;}
.chatTxtWrap .chat_character{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.user_location{display: flex; align-items: center; font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.user_location::before{content:''; width: 12px; height: 12px; display: inline-block; background: url(../img/common/icon_location.png) no-repeat center / contain; margin-right: 3px;}
.chatHeader .setBtn{width: 5px; height: 18px;}
.chatHeader .setBtn>span{width: 3px; height: 3px;}
.chatHeaderRight{display: flex; align-items: center; gap: 12px;}
.chatHeaderRight .debugBtn{display: flex; align-items: center; justify-content: center; color: var(--fg2); opacity: 0.6; transition: opacity 0.2s;}
.chatHeaderRight .debugBtn:hover{opacity: 1; color: var(--color-primary);}

@media (max-width: 1000px) {
  .chat-background{display: none;}
  .chatHeader{max-width: inherit;}
  .chat .inner{max-width: inherit; background-image: linear-gradient(rgba(var(--bg-rgb), 0.85), rgba(var(--bg-rgb), 0.85)), var(--chat-bg-image); background-size: cover; background-position: center; background-attachment: scroll;}
}
@media (max-width: 600px) {
  .chatHeader{height: 65px;}
  .viewImage{width: 40px; height: 40px;}
}

/*========== chat area ==========*/
.chatCont{max-height: calc(100dvh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;}
.chatCont::-webkit-scrollbar{width:15px;}
.chatCont .inner{display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0;}

.message{display: flex; flex-direction: column;  padding-top: 20px;  gap: 20px; padding-bottom: 150px;}
.cWrap{position: relative; display: flex;  flex-direction: column; width: 100%; padding: 0 2em; box-sizing: border-box;}
.cbox{padding: 9px 18px 11px; box-sizing: border-box; border-radius: 10px; width: auto; display: inline-block; box-sizing: border-box; border: 1px solid var(--border);}

.cbox>*{margin-top: 15px;}
.cbox .action{font-weight: 400;}
.cbox .dialogue{font-weight: 600;}
.cbox img{width: 100%;}
.cbox>p:first-of-type{margin-top: 0;}

.cWrap.aichat .cbox{background: var(--chat-ai); border-top-left-radius: 0;  margin-right: auto;}
.cWrap.user .cbox{background: var(--chat-user); border-top-right-radius: 0;  margin-left: auto;}
.cName{margin-bottom: 5px; font-weight: 600; color: var(--fg);}
.cBtnWrap{display: flex; align-items: center; justify-content: space-between; margin-top: 2px; gap: 5px;}
.cWrap.aichat .cBtnWrap{margin-right: auto;}
.cWrap.user .cBtnWrap{margin-left: auto;}
.cBtnWrap .cBtn{width: 26px; height: 26px; cursor: pointer;}
.cBtnWrap .cBtn.star{background: url(../img/common/icon_star_blank.png) no-repeat center / 68%;}
.cBtnWrap .cBtn.star.active{background: url(../img/common/icon_star_active.png) no-repeat center / 68%;}
.cBtnWrap .cBtn.refresh{background: url(../img/common/icon_refresh.png) no-repeat center / 68%;}
.cBtnWrap .cBtn.history{background: url(../img/common/icon_history.png) no-repeat center / 68%;}
.cBtnWrap .cBtn.delete{background: url(../img/common/icon_delete.png) no-repeat center / 68%;}
.cBtnWrap .cBtn.edit{background: url(../img/common/icon_edit.png) no-repeat center / 68%;}

@media (max-width: 1000px) {
  .chatCont{max-width: inherit; background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ) no-repeat center / cover; position: relative;}
  .cWrap{padding: 0 1em;}
  .cbox{max-width: 90%;}  
}
@media (max-width: 600px) {
  .chatCont{max-height: calc(100dvh - 65px);}
  .cbox{max-width: 100%;}
  .cBtnLeft, .cBtnRight{gap: 8px;}
  .cBtnWrap .cBtn{width: 30px; height: 30px;}
}

/*========== chat bottom bar ==========*/
.bottomBar{position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%) translateZ(0); z-index: 300;  box-sizing: border-box; display: flex; justify-content: center; max-width: 800px; width: 100%; z-index: 999; padding: 0 2em; will-change: transform;}
.chatInner{width: 100%; position: relative; }

/* 채팅버튼 */
.chatBtnWrap{display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
.chatBtnWrap>div{padding: .5em; background: var(--gnb); border: 1px solid var(--border); border-radius: 3px; box-sizing: border-box; font-size: .9em; cursor: pointer;}
.chatPlusBtn{width: 35px; height: 35px; border-radius: 50%; background: #888 url(../img/common/icon_plus.png) no-repeat center / 50%;}


/* 채팅입력창 */
.chatWrap{display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--color-primary); border-radius: 1em; overflow: hidden; padding: 0 10px; box-sizing: border-box; width: 100%; background: var(--bg-op); z-index: 200;}

.chatPlusBtn{width: 33px; height: 33px; border-radius: 50%; background: #555 url(../img/common/icon_plus.png) no-repeat center / 50%; cursor: pointer;}
.chatPlusBtn.open{transform: rotate(45deg);}
.chatOption{position: absolute; bottom:58px; left: 0; background: var(--bg); padding: 1em; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin-top: 5px; z-index: 999; background: var(--bg); border: 1px solid var(--border2); font-size: .97em; min-width: 100px; display: none;}
.chatOption .dOption{padding: .4em; cursor: pointer; display: flex; align-items: center;}
.chatOption .dOption::before{content: ''; width: 13px; height: 13px; margin-right: 7px; display: inline-block;}
.chatOption .dOption.capture::before{background: url(../img/common/icon_capture.png) no-repeat center / contain;}
.chatOption .dOption.imgUpload::before{background: url(../img/common/icon_upload.png) no-repeat center / contain;}
.chatOption .dOption.autoChat::before{background: url(../img/common/icon_auto.png) no-repeat center / contain;}
.chatOption .dOption.imgCreate::before{background: url(../img/common/icon_img.png) no-repeat center / contain;}
.chatOption .dOption.chatContinue::before{background: url(../img/common/icon_continue.png) no-repeat center / contain;}
.chatOption .dOption.titleEdit::before{background: url(../img/common/icon_edit.png) no-repeat center / contain;}
.chatOption .dOption.chatOutput::before{background: url(../img/common/icon_chat.png) no-repeat center / contain;}

.chatInput{display: flex; align-items: center; justify-content: space-between; width: calc(100% - 45px);}
.chatInputBox{width: calc(100% - 40px);  box-sizing: border-box; padding: 13px 0 15px; align-items: center; display: block; resize: none; overflow: auto; border: none; font-size: .98em; margin-left: 4px; background: transparent; color: var(--fg);}
.chatInputBox:focus{outline: none;}

.chatSend{width: 33px; height: 33px; background: var(--color-primary) url(../img/common/icon_send.png) no-repeat center / 100% auto; cursor: pointer; border-radius: 50%; margin-left: 10px;}
.chatSend:disabled{background-color: #ccc; pointer-events: none;}

@media (max-width: 1000px) {
  .bottomBar{ max-width: inherit; padding: 0 1em;}
}
@media (max-width: 600px) {
  .chatPlusBtn{width: 30px; height: 30px;}
  .chatInput{width: calc(100% - 35px);}
  .chatInputBox{width: calc(100% - 35px);}
  .chatSend{width: 30px; height: 30px;}
}

/*
=========================================================================
detail.php 캐릭터 상세 페이지
=========================================================================
*/
/* 캐릭터 설명 */
.detailProfile{display: flex; gap: 30px;  margin-bottom: 50px;}
.detail .lImgWrap{width: 320px;}
.detail .lImg{margin-bottom: 0;}
.detailTop{display: flex; flex-direction: column; align-items: start; justify-content: space-between; width: calc(100% - 350px);}
.datailTxt{ width: 100%; max-height: 250px; overflow-y: auto;}
.datailTxt::-webkit-scrollbar{display: none;}
.datailTxt>*{margin-bottom: 5px;}
.detailTop .lTit{font-size: 1.5em;}
.detailTop .lInfo{margin-top: 0; font-size: .9em; justify-content: left; gap: 2px;}
.detailTop .lInfo .followBtn{padding: .5em .6em; font-size: .95em; min-height: auto; transition: all 0.2s ease;}
.detailTop .lInfo .followBtn::before{content: ''; width: 12px; height: 12px; background: url(../img/common/icon_alarm_off.png) no-repeat center / contain; margin-right: 2px; transform: translateY(1px);}
.detailTop .lInfo .followBtn.following{border: 1px solid var(--color-primary); color: var(--color-primary);}
.detailTop .lInfo .followBtn.following::before{background: url(../img/common/icon_alarm_on.png) no-repeat center / contain;}

.detailTop .lData{font-size: 1.05em; gap:8px; margin-bottom: 15px;}
.detailTop .lTag{font-size: .98em; gap:8px; text-overflow:inherit; white-space:inherit; display: flex; gap: 5px; flex-wrap: wrap;}
.detailTop .lTag>li{margin-right: 0;}
.detailTop .producer{cursor: pointer;}

.detailDate{display: flex; gap: 5px; color: var(--gray);}
.detailDate>li, .detailImgpack>li{background: var(--light-gray); border: 1px solid var(--border); padding: .3em 1em; display: flex; font-size: .95em; gap:5px; justify-content: center; box-sizing: border-box; border-radius: 30px; align-items: center;}
.detailImgpack{margin-top: 5px; margin-bottom: 10px; display: flex; align-items: start; gap: 5px; flex-wrap: wrap;}
.detailImgpack>li{font-weight: 500; gap: 2px;}
.detailImgpack>li::before{content: ''; display: inline-block; width: 15px; height: 15px; background: url(../img/common/icon_img.png) no-repeat center / contain;}
.detailImgpack>li.lorebook::before{background: url(../img/common/icon_memo.png) no-repeat center / contain;}
.detailDate .dTit{font-weight: 500;}
.detailBtn{display: flex; align-items: center; gap:10px; font-size: 1.05em; margin-top: 20px;}
.detailBtn .btn{height: 42px;}
.detailBtn2{font-size: 1em; margin-top: 40px;}
.detailBtn2 .btn{height: 38px;}
.chatStartBtn{background: var(--color-primary); color: #fff; min-width: 300px; border: none; font-size: 1.05em;}
.likeBtn{width: 42px; height: 42px; background: url(../img/common/icon_heart_blank.png) no-repeat center / 50%;}
.likeBtn.active{background: url(../img/common/icon_heart_active.png) no-repeat center / 50%;}
.shareBtn{width: 32px; height: 32px; background: url(../img/common/icon_share.png) no-repeat center / 80%; border: none; padding: 0;}
.detailInfo>h3{font-size: 1.2em; margin-bottom: 10px;}

@media (max-width: 1000px) {
  .detailProfile{flex-direction: column; padding-bottom: 30px; border-bottom: 1px solid var(--border); margin-bottom: 30px; align-items: center;}
  .detail .lImgWrap{width: 100%; max-width: 300px;}
  .detailTop{width: 100%;}
  .datailTxt{max-height: inherit;}
  .detailBtn1{position: fixed; bottom:0; left: 50%; transform: translateX(-50%); background: var(--bg); border-top: 1px solid var(--border); width: 100%; padding: 1em; box-sizing: border-box; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); justify-content: space-between; z-index: 8000;}
  .chatStartBtn{width: calc(100% - 54px); min-width: auto;}
}
@media (max-width: 600px){
  .detail .lImgWrap{max-width: inherit;}
  .detailTop .lInfo .followBtn::before{transform: translateY(0);}
}
/*========== 댓글 ==========*/
.commentWrap{padding-top: 30px; border-top: 1px solid var(--border); margin-top: 30px;}
.commentWrap .cTotal{margin-bottom: 5px; font-weight: 600; font-size: 1.05em;}

/* 댓글 입력창 */
.commentBox{margin-bottom: 20px; width: 100%;}
.commentInput{width: 100%; height: 90px; overflow-y: auto; resize: none; padding:.6em 1em; box-sizing: border-box;}
.commentWrap .write_form_footer{display: flex; justify-content: space-between; margin-top: 5px; align-items: start; flex-wrap: wrap; gap: 5px; position: relative;}
.commentWrap .checkbox_wrap{display: flex; align-items: center; gap: 5px;}
.commentBtn{display: flex; align-items: center; gap:10px;}
.commentBtn>button{height: 40px;}
.naruconBtn::before{content: ''; width: 30px; height: 30px; background: url(../img/common/logo_naru.png) no-repeat center / contain; display: inline-block; margin-right: 5px;}
.submitBtn{background: var(--color-primary); color: #fff; border: none;}

/* 댓글 목록 */
.commentListWrap{display: flex; flex-direction: column; gap:10px;}

.commentList .cContWrap{padding: .8em 1.2em; border-radius: 5px; border: 1px solid var(--border); background: var(--comment-bg); display: flex; flex-direction: column; gap:10px; margin-bottom:5px;}
.commentList .cCont{display: flex; flex-direction: column; align-items: start; gap:5px; width: 100%;}
.commentList .cTop{display: flex; align-items: center; justify-content: space-between; width: 100%;}

.commentList .nickWrap .profile{width: 22px; height: 22px;}
.commentList .nickname{font-weight: 600; font-size: 1.05em;}
.commentList .cTime{font-size: .9em; opacity: .6; transform: translateY(1px);}
.commentList .cTxt{display: flex; flex-direction: column; align-items: start; gap:5px;}

.editCommentBox{display: none;}
.editCommentBox.active{display: block;}

/* 나루콘 */
.naruCon{position: absolute;  right: 0;  padding: 1em;  background: var(--light-gray);  border: 1px solid var(--gray);  border-radius: 10px;  z-index: 100;  box-shadow: 0 0 10px #00000022;
display: none; overflow: visible;}
.naruCon.active{display: block;}
.narucon_layer_content{display: flex; flex-wrap: wrap; width: 300px; height: 300px; overflow-y: auto;}
.narucon_layer_content>img{width: 33%; cursor: pointer;}

/* 답글 */
.reCommentList .cContWrap{padding: 0; border: none; position: relative;}
.reCommentWrap{width: 100%; display: none;}
.reCommentWrap.active{display: block;}

.reCommentBox{width: 100%; display: flex; position: relative;}
.reCommentBox::before{left: 0;}
.reCommentList .cContWrap[data-level="2"],
.commentList .cContWrap[data-level="2"] {position: relative; margin-left: 25px;}
.reCommentList .cContWrap[data-level="3"],
.commentList .cContWrap[data-level="3"] {position: relative; margin-left: 50px;}
.reCommentList .cContWrap[data-level="4"],
.commentList .cContWrap[data-level="4"] {position: relative; margin-left: 75px;}
.reCommentList .cContWrap[data-level="5"],
.commentList .cContWrap[data-level="5"] {position: relative; margin-left: 100px;}
.reCommentList .cContWrap[data-level="6"],
.commentList .cContWrap[data-level="6"] {position: relative; margin-left: 125px;}
.reCommentList .cContWrap[data-level]:not([data-level="1"])::before,
.commentList .cContWrap[data-level]:not([data-level="1"])::before,
.reCommentBox::before{content:''; display: inline-block; width: 20px; height: 20px; background: url(../img/common/icon_recomment.png) no-repeat left center / 70%; position: absolute; left: -25px; top: 0;}
.reCommentBox::before{left: 0px;}
.reCommentBox .cForm{width: 100%; box-sizing: border-box; margin-left: 25px;}
.reCommentBtnWrap{margin-top: 2px; gap:5px}
.reCommentBtnWrap>button{height: 30px; font-size: .9em; min-height: auto;}

@media (max-width: 600px) {
  /* 댓글 입력창 */
  .naruconBtn::before{width: 20px; height: 20px;}
  .commentBtn>button{height: 35px;}

  /* 나루콘 */
  .narucon_layer_content{width: 250px; height: 180px;}

  /* 답글 */
  .commentListWrap .write_form_footer{flex-direction: column; align-items: end; margin-top: 2px;}
  .reCommentList .cContWrap[data-level="2"],
  .commentList .cContWrap[data-level="2"] {margin-left: 20px;}
  .reCommentList .cContWrap[data-level="3"],
  .commentList .cContWrap[data-level="3"] {margin-left: 40px;}
  .reCommentList .cContWrap[data-level="4"],
  .commentList .cContWrap[data-level="4"] {margin-left: 60px;}
  .reCommentList .cContWrap[data-level="5"],
  .commentList .cContWrap[data-level="5"] {margin-left: 80px;}
  .reCommentList .cContWrap[data-level="6"],
  .commentList .cContWrap[data-level="6"] {margin-left: 100px;}
  .reCommentList .cContWrap[data-level]:not([data-level="1"])::before,
  .commentList .cContWrap[data-level]:not([data-level="1"])::before,
  .reCommentBox::before{width: 15px; height: 15px; left: -20px;}
  .reCommentBox::before{left: 0px;}
  .reCommentBox .cForm{width: 100%; box-sizing: border-box; margin-left: 20px;}
}

/* 삭제/수정된 댓글 스타일 */
.cContWrap.deleted .cCont{opacity: 0.6;}
.cContWrap.deleted .nickname.deleted{color: var(--gray); font-style: italic;}
.deletedComment{color: var(--gray); font-style: italic;}
.editedMark{color: var(--gray); font-size: 0.85em; font-style: italic; margin-left: 5px;}

/*
=========================================================================
mypage.php 마이페이지
=========================================================================
*/
.myContWrap{display: none;}
.myContWrap.active{display: block;}
.myProfile{display: flex; gap: 50px; border-bottom: 1px solid var(--border); padding-bottom: 40px; margin-bottom: 40px;}
.myProfile .profile{width: 80px; height: 80px;}
.myProfileTxt{width: 100%;}
.myProfileTxt .myNick{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.myProfileTxt .myNick .nickWrap{gap: 15px;}
.myProfileTxt .nickname{font-weight: 600; font-size: 1.2em;}
.myBtnWrap{display: flex; gap: 10px;}
.creatorBtn{border: 1px solid var(--color-primary); color: var(--color-primary);}

.myProfileTxt .myInfo{width: 100%; display: flex; flex-direction: column; gap: 10px;}
.myProfileTxt .myInfo>li{display: flex; gap:5px;}
.myProfileTxt .myInfo>li>h5{width: 170px;}
.myProfileTxt .myInfo>li>div{width: calc(100% - 175px);}
.myConfirmTag{background: var(--chat-user); color: var(--color-primary); padding: .2em 1em; border-radius: 30px; font-weight: 500; font-size: .95em;}
.myConfirmTag.certify{color:var(--list-tag-text);}
.myConfirmTag.adult_certify{color:#ff0000;}
.myConfirmTag.creator{color:var(--list-tag-text);}
.myProfileTxt .myPoint .point{color:var(--list-tag-text); font-weight: 600; font-size: 1.1em; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;}
.myProfileTxt .myPack .packWrap{width: calc(100% - 175px); margin-top: 5px; box-sizing: border-box;}
.myCont{margin-bottom: 40px;}
.myCont:last-of-type{margin-bottom: 0;}
.myCont .myContBox{display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border2); border-radius: 10px; padding: 1em; justify-content: space-between;}
.myCont .btn{background: var(--color-primary); color: #fff; border: none;}
.myFormWrap{display: flex; align-items: center; gap: 5px;}

.myCont .point_table .cols1{width: 80%;}
.myCont .point_table .cols2{width: 20%;}

.myList-style1{padding: .7em 1em; border-radius: 5px; border: 1px solid var(--border2); background: var(--light-gray); display: flex; gap: 6px; flex-wrap: wrap;}
.myList-style1>li{padding: .3em 1em; border-radius: 30px; color: var(--gray); cursor: pointer; background: var(--light-gray); border: 1px solid #aaaaaa88; box-sizing: border-box; font-size: .95em; display: flex; align-items: center;}
.myCont h4{margin-bottom: 5px;}
.myCont .tagChoiceBtn{width: 100% !important;}
.myCont .tagChoiceBtn::before{background: url(../img/common/icon_tag_w.png) no-repeat center / contain !important;}
html[data-theme="dark"] .myCont input{background: transparent; border: 1px solid var(--border2);}

.myList-style2{display: flex; gap: 10px; flex-wrap: wrap; max-height: 240px; overflow-y: auto;}
.myCont .listCont{border:1px solid var(--border2); padding: 1em; border-radius: 5px; cursor: pointer; background: var(--light-gray); box-sizing: border-box; width: calc(50% - 5px); display: flex; flex-direction: column; justify-content: space-between;}
.myCont .listCont>h5{font-size: 1.05em; margin-bottom: 5px; width: 100%; text-overflow: ellipsis;white-space: nowrap; overflow: hidden;}
.myCont .infoWrap{display: flex; justify-content: space-between; align-items: center;}
.myCont .infoWrap .date{color: var(--gray); font-size: .9em; opacity: .8;}
.myCont .myListBtn{width: 100%;}

@media (max-width: 1000px) {
  .myProfileTxt .myNick{flex-direction: column;}
  .myProfileTxt .myNick .nickWrap{flex-direction: column; margin-bottom: 20px;}
  .myProfileTxt .myInfo>li{justify-content: space-between;}
  .myProfileTxt .myInfo>li>h5{width: 130px;}
  .myProfileTxt .myInfo>li>div{width: auto; max-width: calc(100% - 135px);}  
  .myProfileTxt .myPack{flex-direction: column;}
  .myProfileTxt .myPack .packWrap{width: 100%;}
  .myBtnWrap{width: 100%; flex-wrap: wrap;}
  .myBtnWrap>button{width: calc(50% - 5px);}

}
@media (max-width: 600px) {
  .myFormWrap{flex-direction: column;}
  .myFormWrap>*{width: 100%;}
  .myList-style2{max-height: 220px;}
  .myCont .listCont{width: 100%;}
  .myCont .listCont>h5{font-size: 1em;}
  .myCont .infoWrap{font-size: .9em;}
  .myCont .infoWrap .date{transform: translateY(1px);}
  .loreCont{width: 100%;}
}

/* 구독 제작자 리스트 */
.myFollowing{flex-direction: column !important;}
.myFollowing>h5{width: 100% !important; margin-bottom: 10px;}
.followingAuthorList{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: .7em 1em;
    border-radius: 5px;
    border: 1px solid var(--border2);
    background: var(--bg);
    max-height: 300px;
    overflow-y: auto;
}
.followingAuthorList::-webkit-scrollbar{width: 5px;}
.followingAuthorList::-webkit-scrollbar-thumb{background: var(--border2); border-radius: 5px;}
.followingAuthorList .authorItem{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg2);
    cursor: pointer;
    transition: all .2s ease;
}
.followingAuthorList .authorItem:hover{
    background: var(--hover);
}
.followingAuthorList .authorProfile{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.followingAuthorList .authorProfile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.followingAuthorList .authorInfo{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.followingAuthorList .authorNick{
    font-weight: 600;
    font-size: .95em;
    color: var(--text);
}
.followingAuthorList .authorCharCount{
    font-size: .8em;
    color: var(--gray);
}
.followingAuthorList .followingEmpty{
    width: 100%;
    text-align: center;
    padding: 20px 0;
    color: var(--gray);
}
.followingAuthorList .followingEmpty .btn{
    margin:0 auto;
    margin-top:10px;
}

@media (max-width: 600px) {
    .followingAuthorList{max-height: 200px;}
    .followingAuthorList .authorItem{
        width: calc(50% - 5px);
        padding: 6px 10px;
    }
    .followingAuthorList .authorProfile{
        width: 32px;
        height: 32px;
    }
    .followingAuthorList .authorNick{font-size: .85em;}
    .followingAuthorList .authorCharCount{font-size: .75em;}
}

/*
=========================================================================
mychat.php 내 채팅
=========================================================================
*/
.myChatList{display: flex; flex-direction: column;}
.myChatList>li{width: 100%; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px; position: relative;}
.myChatList>li>a{display: flex; align-items: center; gap: 20px; width: calc(100% - 30px);}
.myChatList>li:last-of-type{border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
.myChatList .lImgWrap{width: 180px;}
.myChatList .lImgWrap .lImg{margin-bottom: 0;}
.myChatCont{display: flex; flex-direction: column;  width: calc(100% - 200px);box-sizing: border-box; gap: 10px; justify-content: space-between; height: 180px;}
.myChatList .lTxtWrap{display: flex; flex-direction: column; gap:10px;}
.myChatList .lTitWrap{display: flex; justify-content: space-between;}
.myChatList .lTit{font-size: 1.2em;}
.myChatList .recentChat{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%;}
.myChatList .lInfoWrap{display: flex; align-items: center; flex-wrap: wrap;}
.myChatList .lInfoWrap>li{display: flex; align-items: center;}
.myChatList .lInfoWrap>li::after{content:''; width: 1px; height: 10px; margin: 0 8px; background: var(--border2);}
.myChatList .lInfoWrap>li:last-of-type::after{display: none;}
.myChatList .lInfoWrap>li>h5{margin-right: 8px;}
.myChatList .date{color: var(--gray); opacity: .8; font-size: .9em; margin-top: 5px;}
.myChatList .dropDown{left:inherit; right:0;}
.myChatList .dropWrap{position: absolute; right:0; top:0; z-index: 10;}

@media (max-width: 600px) {  
  .myChatList>li{gap: 15px;}
  .myChatList .lImgWrap{width: 120px;}
  .myChatCont{width: calc(100% - 135px); height: 120px;}
  .myChatList .lInfoWrap{flex-direction: column; align-items: flex-start;}
  .myChatList .lInfoWrap>li::after{display: none;}
}

/*
=========================================================================
alarm.php 알림
=========================================================================
*/
.alarmBtnWrap{display: flex; justify-content: space-between; margin-bottom: 30px;}
.alarmListWrap .leftBtnWrap{display: flex; gap: 8px;}
.alarmListWrap .rightBtnWrap{display: flex; gap: 8px;}
.alarmList{display: flex; flex-direction: column; gap: 10px;}
.alarmList .aCont{padding: 1em 2em; border: 1px solid var(--border2); border-radius: 5px; display: flex; align-items: center; gap: 15px;}
.alarmList .aCont.new{border: 1px solid var(--color-primary);}
.alarmList .aCont.new .aTit::after{content:''; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); display: inline-block; margin-left: 5px; transform: translateY(-7px);}
.alarmList .aIcon{border-radius: 50%; background: var(--gnb) url(../img/common/icon_alarm.png) no-repeat center / 40%; width: 50px; height: 50px;}
.alarmList .aTxtWrap{width: calc(100% - 60px);}
.alarmList .aTit{font-size: 1.05em; font-weight: 500; margin-bottom: 1px;}
.alarmList .aTxt{color: var(--gray); font-size: .95em;}

@media (max-width: 600px) {  
  .alarmList .aCont{padding: 1em; gap:10px}
  .alarmList .aIcon{width: 30px; height: 30px; background: var(--gnb) url(../img/common/icon_alarm.png) no-repeat center / 60%;}
  .alarmList .aTxtWrap{width: calc(100% - 40px);}
}

/*
=========================================================================
create.php 제작
=========================================================================
*/
.createForm{display: none;}
.createForm.active{display: block;}

/* 단계 */
.createStep{display: flex; align-items: center; margin-bottom: 50px;}
.createStep .step{flex: 1;}
.createStep .stepCont{text-align: center; position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; border-bottom: 4px solid var(--border2); padding-bottom: 10px;}
.createStep .step.active .stepCont{border-bottom: 4px solid var(--color-primary);}
.createStep .stepNum{background: var(--light-gray); border-radius: 50%; color: var(--gray); width: 25px; height: 25px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border2); font-weight: 500; font-size: .9em;}
.createStep .stepName{font-size: 1.1em; font-weight: 500;}
.createStep .step.active .stepNum{background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);}
.createStep .stepLine{width: 200px; height: 3px; visibility: hidden;}
.createStep .step:first-of-type .stepCont::before{display: none;}

/* 제작폼 */
.createCont .inputCont{margin-bottom: 0;}
.createCont .inputCont .formInputWrap{max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; display: flex; flex-direction: column; gap: 25px;}
.createCont .inputCont.open .formInputWrap{max-height: 10000px;}
.createCont .mainTitWrap{display: flex; align-items: center; justify-content: space-between; padding: 10px 0;}
.createCont .mainTitRight{display: flex; align-items: center; gap:10px;}
.createCont .mainTit{width: 100%; display: flex; position: relative; cursor: pointer; box-sizing: border-box; padding-left: 1.3em; margin-bottom: 0;}
.createCont .mainTit::before{content: ''; width: 17px; height: 17px; background: url(../img/common/icon_memo.png) no-repeat center / contain; position: absolute; top:50%; left: 0; transform: translateY(-50%);}
.createCont .mainTitWrap .writeTag{padding: .2em .8em; border-radius: 20px; background: var(--comment-bg); color: var(--gray); border: 1px solid var(--btn-border); white-space: nowrap; font-size: .9em; display: flex; align-items: center;}
.createCont .mainTitWrap .writeTag.complete{background: var(--color-primary); color: #fff; border: none;}
.createCont .mainTitWrap .arrow{width: 28px; height: 28px; border-radius: 50%; background: #edecf7 url(../img/common/icon_select_bold.png) no-repeat center / 40%; transform: rotate(0deg); cursor: pointer;}
html[data-theme="dark"] .createCont .mainTitWrap .arrow{background: #7d6ffa6c url(../img/common/icon_select_bold_w.png) no-repeat center / 40%;}
.createCont .inputCont.open  .mainTitWrap .arrow{transform: rotate(180deg);}
.createCont textarea{width: 100%; height: 400px; resize: none;}
.createCont .fTit{font-size: 1.2em;}
.createCont .fTit>span{font-size: .9em; font-weight: 400;}
.createCont .insertWrap{display: flex; gap: 5px; margin-bottom: 8px; }
.createCont .insertWrap>button{padding: .8em 1em; font-size: .85em; min-height: auto;}
.createCont select{min-width: 180px;}
.explanBox{padding: .6em 1em; border-radius: 8px; background: var(--comment-bg); border: 1px solid var(--border2); margin-bottom: 10px; color: var(--gray);}
.explanBox .list>li{position: relative; padding-left: 8px;}
.explanBox .list>li::before{content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--fg); display: inline-block; opacity: .5; position: absolute; top:9px; left: 0;}
.createCont .checkWrap{margin-top: 10px;}
.createCont .inputBtnWrap{margin-top: 10px; font-size: .9em;}
.chatPreview{background: #ebe9ff66; border: 1px solid var(--border2); border-radius: 10px; padding: 1em;}
.createCont .flexInput{display: flex; gap: 10px;}
.createCont .flexInput>input{width: auto;}
.createCont .menuTab{padding: 1em; border-radius: 8px; border: 1px solid var(--border2);}
.createCont .divisionLine{width: 100% ; height: 1px; background: var(--border2); margin: 30px 0;}
.createCont .bottomBtnWrap{margin-top: 10px;}
.createCont .user-tag-list .myList{margin-bottom: 10px; background: var(--bg); border: 1px solid var(--border2);}
.createCont .user-tag-list .myList>li{background: var(--color-primary); color: #fff; border: none;}
.createCont .tagDeleteBtn::before, .createCont .tagDeleteBtn::after{background: #e5e7eb;}
.createCont .createListWrap{display: flex; gap: 10px; flex-wrap: wrap; max-height: 400x; overflow-y: auto;}
.createCont .myContBox{display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border2); border-radius: 10px; padding: 1em; justify-content: space-between;}
.createCont .listCont {border: 1px solid var(--border2); padding: .7em 1em; border-radius: 5px; cursor: pointer; background: var(--light-gray); box-sizing: border-box; width: calc(50% - 5px); display: flex; flex-direction: column;  justify-content: space-between;}
.createCont .createListBtn{width: 100%;}
.createCont .create_basic{display: flex; flex-direction: column; gap: 20px;}
.fTxtNum{width: 100%; text-align: right; color: var(--gray); opacity: .8; font-size: .9em;}

/* 제작공지 */
.indexNoticeWrap{display: flex; flex-direction: column; gap: 10px; position: relative; padding-top: 50px; margin-top: 40px; border-top: 1px solid var(--border);}
.indexNotice h5{font-size: 1.1em; margin-bottom: 5px;}
.indexNotice .btnWrap{margin-top: 10px;}
.indexNotice .btnWrap>button{padding: .8em 1em; font-size: 1em; min-height: auto;}

@media (max-width: 600px) {
  .createCont .mainTit{padding-left: 1.2em;} 
  .createCont .mainTit::before{width: 14px; height: 14px;}
  .createCont .mainTit::after{width: 25px; height: 25px;}
  .createStep{margin-bottom: 30px;}
  .createStep .stepNum{width: 18px; height: 18px; margin-bottom: 6px; font-size: .8em;}
  .createStep .stepName{font-size: 1em;}
  .createCont .listCont {width: 100%;}
  .createCont .divisionLine{margin: 20px 0;}
  .indexNoticeWrap{padding-top: 40px; margin-top: 20px;}
}


/*
=========================================================================
form_lore.php 로어북
=========================================================================
*/
.loreForm .explanBox, .imgForm .explanBox{margin-bottom: 30px; cursor: pointer;}
.loreForm .inputWrap{display: flex; gap: 15px;}
.loreForm .inputWrap .formInput{flex: 1;}
.loreForm select{min-width: 250px;}
@media (max-width: 600px) {
  .loreForm select{min-width: auto; width: 100%;}
}

/*
=========================================================================
form_memo.php 유저메모
=========================================================================
*/
.memoForm textarea{width: 100%; height: 400px; resize: none;}

/*
=========================================================================
form_img.php 이미지팩
=========================================================================
*/
#drop-area {border: 2px dashed #ccc;  border-radius: 10px;  padding: 2em 1em;  text-align: center;  background-color: var(--light-gray);  transition: background-color 0.2s, border-color 0.2s;  cursor: pointer;  position: relative; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center;}

.upload-button-wrapper {display: flex; justify-content: center; margin-bottom: 15px;}
.upload-info {margin-top: 8px; opacity: .8;}
.imgForm .caption{margin-top: 20px; text-align: center; font-size: 1.1em; font-weight: 500;}
.file-list{display: flex; flex-wrap: wrap; gap: 30px;}
.file-item{display: flex; gap: 15px; width: calc(50% - 15px);}
.file-item .fileInfo{width: calc(100% - 230px);}
.file-item .fileInfo .fTit{font-size: 1em;}
.file-item .fileInfo .btnWrap{margin-top: 10px;}
.file-item .fileInfo .btnWrap>button{font-size: 1em; min-height: auto; padding: .8em 1em;}
.file-item .fileInfo .formInput{margin-bottom: 10px;}
.file-item .fileInfo select{width: 100%;}
.file-item .fileInfo .checkWrap{margin-bottom: 10px;}
.file-preview{width: 215px; height: 215px; border: 1px solid var(--border); overflow: hidden; display: flex; justify-content: center; align-items: center; background: var(--light-gray);}
.file-preview>img{width: auto; height: 100%;}

@media (max-width: 1200px) {
  .file-item{width: 100%;}
}
@media (max-width: 600px) {
  #drop-area{height: auto; padding: 1.5em 1em;}
  .file-item{flex-direction: column;}
  .file-item .fileInfo{width: 100%;}
  .file-preview{width: 100%; height: 140px;}
  .file-item .fileInfo .btnWrap{justify-content: right;}
}

/*
=========================================================================
policy.php 약관
=========================================================================
*/
.policyCont{display: flex; flex-direction: column; gap: 10px;}
.policyCont h5{font-size: 1.3em;}
.policyCont h7{font-size: 1.1em; font-weight: 600;}
.policyCont a{font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-bottom: 10px;}
.blankBr{height: 30px; width: 100%;}

.createLevel{display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-weight: 500;}
.createLevel>li{display: flex; align-items: center; gap: 10px;}
.createLevel .colorTag{width: 20px; height: 20px;}
.policyCreateTable .cols1{font-weight: 500;}
.policyCont .level4{background: #ff3b45;  color: #fff;}
.policyCont .level3{background: #ff8036;  color: #fff;}
.policyCont .level2{background: #fffd7d; color: #222;}
.policyCont .level1{background: #abf798; color: #222;}

/*
=========================================================================
creator.php 제작자
=========================================================================
*/
/* 프로필 */
.creatorProfile{margin-bottom: 40px;}
.creatorProfile .nickWrap{gap: 15px;}
.creatorProfile .profile{width: 100px; height: 100px;}
.creatorProfile .nickname{font-size: 1.2em; font-weight: 600;}
.followerWrap{display: flex; gap: 15px;}
.followerWrap .followerNum{font-weight: 600;}
.creatorProfile .btnWrap{margin-top: 8px; position: relative; align-items: center;}
.creatorProfile .followBtn{transition: all 0.2s ease;}
.creatorProfile .followBtn::before {content: ''; width: 14px; height: 14px; background: url(../img/common/icon_alarm_off_w.png) no-repeat center / contain;   margin-right: 4px;}
.creatorProfile .followBtn.following{background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary);}
.creatorProfile .followBtn.following::before {background: url(../img/common/icon_alarm_on.png) no-repeat center / contain;}
.creatorProfile .setBtn{padding: .2em .5em;}

/* 그래프 */
.cInfoWrap{margin: 20px 0;}
.stats-grid{display: flex; gap: 20px; padding: 1em 2em; border: 1px solid var(--border); border-radius: 10px;}
.achievement-card{flex: 1;}
.progress-bar {width: 100%; height: 0.5rem; background: var(--border);   border-radius: 1rem;  overflow: hidden; margin-top: 0.5rem;}
.progress-fill {height: 100%; background: var(--color-primary); transition: width 0.3s ease;}

/* 리스트 */
.creatorListWrap .listCont .cList{grid-template-columns: repeat(6, 1fr);}

@media (max-width: 1500px) {
  .creatorListWrap .listCont .cList{grid-template-columns: repeat(5, 1fr);}
}
@media (max-width: 1000px) {
  .creatorListWrap .listCont .cList{grid-template-columns: repeat(4, 1fr);}
}
@media screen and (max-width: 748px) {
  .creatorListWrap .listCont .cList{grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 450px) {
  .creatorListWrap .listCont .cList{grid-template-columns: repeat(2, 1fr);}
}
/* 페이지네이션 */
.creatorCont .pageination{margin-bottom: 50px;}

@media (max-width: 600px) {
  .stats-grid{flex-direction: column; gap: 15px; padding: 1em;}
}

/*
=========================================================================
shop.php 상점
=========================================================================
*/
.shopListWrap{display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px;}
.shopListWrap .shopList{border: 1px solid var(--border2); border-radius: 10px; padding: 1em 1.5em; display: flex; justify-content: space-between; align-items: center;}
.mypack .shopListWrap .shopList{border: 1px solid var(--color-primary);}
.shopListWrap .shopList .sTxtWrap{width: calc(100% - 200px);}
.shopListWrap .shopList .sTxtWrap>p>b{font-size: 1.05em; line-height: 2;}
.shopCont{display: none;}
.shopCont.active{display: block;}
.shopCont .sTit{font-size: 1.2em; margin-bottom: 5px; display: flex; align-items: center;}
.shopCont .sTit::before{content:''; display: inline-block; width: 20px; height: 20px;  margin-right: 5px;}
.shopCont1 .sTit::before{background: url(../img/common/can_icon.png) no-repeat center / contain;}
.shopCont2 .sTit::before, .shopCont3 .sTit::before{background: url(../img/common/ticket_icon.png) no-repeat center / contain;}
.shopCont .chargeBtn>i{margin-right: 3px;}

@media (max-width: 600px) {
  .shopCont .shopList{flex-direction: column;}
  .shopListWrap .shopList .sTxtWrap{width: 100%;}
  .shopCont .chargeBtn{width: 100%; margin-top: 10px;}
}

/*
=========================================================================
faq.php faq 페이지
=========================================================================
*/
.faqContWrap{display: none;}
.faqContWrap.active{display: block;}
.faqCont .mainTit{width: 100%; display: flex; position: relative; cursor: pointer; font-size: 1.1em; padding: 1em 0; border-bottom: 1px solid var(--border); margin: 0;}
.faqCont .mainTit::after{content: ''; width: 24px; height: 24px; background: #edecf7 url(../img/common/icon_select_bold.png) no-repeat center / 40%; position: absolute; top:50%; right:5px; transform: translateY(-50%) rotate(0deg); border-radius: 50%; }
html[data-theme="dark"] .faqCont .mainTit::after{background: #7d6ffa6c url(../img/common/icon_select_bold_w.png) no-repeat center / 40%;}
.faqCont.open .mainTit::after{transform: translateY(-50%) rotate(180deg);}
.faqCont .answerWrap{display: none; background: var(--light-gray); padding: 1em 1.5em; border-bottom: 1px solid var(--border);}

/*
=========================================================================
섹션 구분선
=========================================================================
*/
.sectionDivider{width: 100%; height: 1px; background: var(--border); margin: 2em 0;}


/*
=========================================================================
251218 css 추가
=========================================================================
*/

.inner{min-height: 100vh;}

/* gnb 아이콘 수정 */
.gMenu .fas::before{opacity: .4; width: 18px; height: 18px; display: inline-block;}

/* 엠블럼 수정 */
.producer, .nickname, .sv_member, .b_name{display: flex; align-items: center;}
.sv_member{justify-content: center; white-space: nowrap;}
.lInfo .producer>img, .detailTop .producer>img, .sv_member>img, .b_name>img{transform: translateY(1px);}

@media (max-width: 600px) {
  .lInfo .producer>img, .detailTop .producer>img, .sv_member>img, .b_name>img{transform: translateY(0);}
}

/* 메인 푸터 : 영역 오류 수정 */
.footer>.inner{min-height: auto;}

/* 캐릭터 상세 : 버튼 조정 */
.detailTop .lInfo{gap: 4px;}
.detailTop .lInfo .followBtn, .detailTop .lInfo .donateBtn{height: 27px; box-sizing: border-box;}
.detailTop .lInfo .donateBtn{height: 25px; width: 25px; box-sizing: border-box; border-radius: 4px;}

/* 캐릭터 상세 : 폰트크기/레이아웃 조정 */
@media (max-width: 600px) {
    .pageName{font-size: 1.2em;}
}
@media (max-width: 1000px) {
    .detail .inner {padding: 80px 1em 100px !important;}
}
@media (max-width: 600px) {
    .detail .inner {padding: 70px 1em 100px !important;}
}

/* 댓글 */
.cContWrap.donation .donationBadge{transform: translateY(1px);}
.cContWrap.donation{border-radius: 5px !important;}
.anonymousCheck{margin-right: 2px !important;}

/* 게시판 */
.board-table .td_name{width: 10%;}
.post-category, .post-detail-category{color: var(--list-tag-text) !important; background: var(--list-tag-bg) !important; padding: .1em 1em .2em !important; transform: translateY(-1px);}
.editCommentWrap .write_form_footer{justify-content: right;}

/* 채팅 */
.chatSetWrap{padding-bottom: 20px; box-sizing: border-box;}

/* FAQ */
.faq_icon, .faq_icon_answer{font-size: 1em !important;}
.faq_answer .faq_content{margin-top: 5px;}
.faq_toggle .arrow_down{font-size: .65em !important; opacity: .8 !important;}

/* PAGER */
.page-link{display: flex !important; justify-content: center !important; align-items: center !important;}

/* 모달 */
.chat-setting-modal .modal-content{width: calc(100% - 2em) !important; border: 1px solid rgba(120, 120, 120, 0.2);}
@media (max-width: 600px) {
    .chat-setting-modal .modal-content{max-height: 70vh !important;}
}