@charset "utf-8";
@font-face {
    font-family: 'Galmuri14';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/Galmuri14.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
:root {
--txt-color: #333333;
--txt-font: 'Galmuri14';
}

/*텍스트*/
.txt-sub {
	text-align: center;
	padding: 14px 48px;
	color: #333333;
	background: transparent;
	font-weight: normal;
	font-size: 16px;
	font-family: 'Galmuri14';
	text-decoration: none;
   }



textarea {display:block;}

/* 본문 */
#page_board_content	{
    padding: 0 10px;
    max-width: 800px !important;
}

.board-notice	{ max-width: 430px; padding: 20px; margin: 0 auto; text-align: center;} /* 상단공지 */

.clap_box button.clap {
    height: 40px !important;
    line-height: 40px !important; /* 글자가 중앙에 오도록 조정 */
    padding: 0 25px !important;
    border: none !important;      /* 테두리 제거 */
    border-radius: 10px !important; /* 둥글게 (높이의 절반) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* 부드러운 그림자 추가 */
    background-color: #D7E5F4 !important; /* 네임태그와 맞춘 노란색 (원하시는 색상이 따로 있다면 유지 가능) */
    color: #6b5a2e !important;    /* 글자색 */
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 마우스 올렸을 때 살짝 뜨는 효과 (선택사항) */
.clap_box button.clap:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
    transform: translateY(-1px);
}

.ui-write-box { 
position: relative;
    margin: 0 auto;
    padding-right: 120px !important; /* 버튼 너비(100px) + 여유공간(20px) */
    width: 100%; /* 가로 길이를 100%로 조정 */
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px; /* 둥근 정도 살짝 조절 */
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* 메시지 남기기 텍스트 입력창 */
.ui-write-box textarea {
    width: 100% !important; 
    height: 100px; 
    padding: 15px 20px; 
    box-sizing: border-box;
    border: none !important;
    outline: none;
    resize: none; 
    font-family: 'Galmuri14';
    font-size: 15px;
    display: block; /* 하단 공백 방지 */
}

.ui-write-box #btn_submit {
position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 110px;
    height: 100% !important;
    background: #D7E5F4 !important; 
    color: #6b5a2e !important; 
    border: none !important;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s;
    border-left: 1px solid #eee !important;

    /* 왼쪽 상단/하단 둥글기만 0으로 제거 */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* 버튼 호버 시 */
.ui-write-box #btn_submit:hover {
    background: #D7E5F4 !important;
}
	
.ui-control { padding-top: 5px; overflow: hidden; text-align: right; } 
.ui-control .files {position:relative;display:block;margin:5px 0;}
.ui-control .files dt {width:100px;flex-shrink:0;}
.ui-control .files dd {margin:0;width:100%;}

.ui-qna-list		{ position: relative; clear: both; } /* 메시지 리스트 전체 영역 */
.ui-qna-list li		{ position: relative; padding: 0px 0; } /* 각 메시지 영역 */
.ui-qna-list li p	{ clear: both; margin: 0 0 10px; line-height: 1.5em;}
.ui-qna-list li p.txt-center {padding:20px 0 10px;}
.ui-qna-list li p.notice		{margin:0;}
.ui-qna-list li p.notice strong {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important; /* 너비를 자동 설정하여 버튼들을 감쌈 */
}

/* 관리자 메뉴 (D, R, M) 심플 스타일 통일 및 노출 복구 */
.admin-menu a, 
.ui-qna-list li p.notice strong a {
    display: inline-block !important; /* float 대신 inline-block 사용으로 실종 방지 */
    padding: 2px 6px !important;
    margin-left: 4px !important;
    background: #f5f5f5 !important;
    color: #888 !important;
    text-decoration: none !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    font-family: 'dotum', sans-serif !important;
    font-weight: normal !important;
    vertical-align: top !important;
}

/* 호버 효과 */
.admin-menu a:hover, 
.ui-qna-list li p.notice strong a:hover {
    background: #eee !important;
    color: #333 !important;
}

.ui-qna-list li p strong a		{ 
	display: block; padding: 2px 5px; margin-right:5px; float: right;
	font-size:9px; font-family: 'dotum', sans-serif;font-weight: normal;
}

.ui-qna-list li .ui-btn.small {
    margin-top: 5px;
    margin-left: 8px;
    padding: 0 8px; /* 글자 양옆 여백을 살짝 늘리면 더 예쁩니다 */
    height: 20px;
    line-height: 20px; /* 높이와 맞춰서 수직 중앙 정렬 최적화 */
    font-size: 11px;
    font-family: 'Galmuri14', 'dotum', sans-serif;
    border: none;           /* 테두리 제거 */
    border-radius: 10px;    /* 높이(20px)의 절반을 주면 완전히 둥근 모양이 됩니다 */
    opacity: 0.8;
}

.ui-qna-list li .qna-content.guest { 
    opacity: 1 !important; 
    color: #333; /* 혹은 원하는 글자색 */
}
.ui-qna-list li .qna-content { margin:0 15px 5px; }
.ui-qna-list li .qna-content a { word-break:break-all; } 
.ui-qna-list li .qna-comment-content {
	background-color: #D7E5F4 !important; /* 요청하신 옅은 노랑 */
    border-radius: 10px !important;       /* 10px 둥글기 처리 */
    padding: 15px !important;             /* 안쪽 여백 */
    margin: 10px 15px 5px !important;     /* 상단 질문과 간격 띄우기 */
    border: none !important;              /* 기존 테두리 제거 */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); /* 아주 미세한 안쪽 그림자 */
}
.ui-qna-list li .qna-comment-content p {padding:0;margin:0;}

.ui-qna-list li ul li			{ padding: 0; }
.ui-qna-list li ul li .clear	{text-align:right;}
.ui-qna-list li ul li .clear a	{display:inline-block;float:none;}

.ui-qna-list li div.ui-write-area { padding:5px 0 0; margin-bottom: 10px;}
.ui-qna-list li div.ui-write-area button { white-space:nowrap; height: 28px; line-height: 28px; padding: 0 25px; margin-top: 10px; }

.ui-qna-list .ui-qna-list-password label		{ padding-right: 10px; }
.ui-qna-list .ui-qna-list-password label.blur	{ text-shadow: none; }
.ui-qna-list .ui-qna-list-password input		{ position: relative; z-index: 1; }
.ui-qna-list .ui-qna-list-password button		{ 
	height: 28px; line-height: 28px; padding: 0 25px;
	font-family: 'Dotum'; margin-left: -5px; border-left-width: 0;
}

.ui-qna-list .no-data			{ text-align: center; line-height: 100px; }

.search-box			{ clear: both; float: right; margin-bottom: 10px; }

 
/*통계 섹션*/
#clap_wrap {display:none;max-height:340px;overflow-y:auto;}
/* #clap_wrap::-webkit-scrollbar{display:none;} */
#stat_total {text-align:center;padding: 10px 0; font-size:13px;margin-bottom:0;}
.clap_container {display:flex;flex-wrap:wrap;justify-content:space-evenly;}
.clap_container section {display:flex; flex-direction: column;justify-content: space-between;margin:10px 0;}
#clap_wrap .clap_stat_daily {width:300px;}
#clap_wrap .clap_stat_weekly {width:65%;}

#clap_wrap h3 {margin-bottom:5px;padding:8px 0;background:rgba(100,100,100,0.1);}
#clap_wrap h3 .less {display:none;}
#clap_wrap table {width:100%; margin:0 auto;} 

#clap_wrap table td {
	position:relative;padding:0 0 18px;height:140px;
	vertical-align:bottom; text-align:center; line-height:1;
	font-family:'dotum',sans-serif;font-size:11px;
	box-sizing:border-box;border-bottom:1px solid rgba(100,100,100,0.1);
} 
#clap_wrap .clap_stat_weekly table td {height:280px;} 

#clap_wrap table td p {line-height:18px; display:block; padding:0;margin:0 auto;}
#clap_wrap table td .bar {width:12px;cursor:pointer; }
#clap_wrap table td .bar i { 
	display:none; 
	position:absolute;bottom:30%;
	white-space:nowrap;
	transform:translateX(-50%);
	opacity:1;
}
#clap_wrap table td .bar:hover i { display:block; }
#clap_wrap table td .num {position:absolute;bottom:0;left:0;right:0;height:18px;}
@media all and (max-width: 800px) {
	#clap_wrap .clap_stat_weekly {width:100%;}
}
@media all and (max-width: 480px) {
	.ui-control input[type="text"],
	.ui-control input[type="password"]	{ display: block; clear: both; width: 100%; margin-top: 10px; }
	.ui-qna-list li	{ padding: 10px 0; }
	#clap_wrap table td.old {width:0;overflow:hidden;}
	#clap_wrap h3 .less {display:inline;}
	#clap_wrap h3 .full, #clap_wrap table td .num .year {display:none;}
}

@media all and (max-width: 380px) {
	.ui-qna-list .ui-qna-list-password		{ position: relative; padding-right: 90px; }
	.ui-qna-list .ui-qna-list-password label	{ display: none; } 
	.ui-qna-list .ui-qna-list-password .ui-submit	{ position: absolute; top: 0; right: 0; width: 90px; }
	.ui-qna-list .ui-qna-list-password input		{ width: 100%; }
}

/* 운세 결과 답글 스타일 */
.fortune-reply {
    background: #fdf6f6 !important; /* 약간 따뜻한 느낌의 배경 */
    border-left: 4px solid var(--num-color) !important;
    padding: 15px !important;
    margin-top: 10px;
    border-radius: 0 10px 10px 0;
    font-weight: bold;
    color: #444;
}

.fortune-tag {
    display: inline-block;
    background: var(--num-color);
    color: #fff;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    margin-bottom: 5px;
}

/* 운세 답글 작성자 이름 강조 */
.ui-qna-list li ul li .qna-info strong {
    font-weight: bold;
}

/* 작성자 네임태그 (#D7E5F4 스타일) */
.wr-name {
    display: inline-block;
    background-color: #D7E5F4;   /* 요청하신 노란색 */
    color: #6b5a2e;              /* 배경과 대비되는 진한 갈색 */
    padding: 2px 12px;           /* 태그 안쪽 여백 */
    border-radius: 15px;         /* 알약 모양의 둥근 테두리 */
    font-size: 12px;             /* 글자 크기 */
	font-family: 'Galmuri14'; /* 설정된 폰트 적용 */
    font-weight: bold;
    margin-right: 8px;           /* 날짜와의 간격 */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.05); /* 미세한 입체감 */
    vertical-align: middle;
}

/* 날짜 스타일 조정 */
.date {
    font-size: 11px;
    color: #999;
    font-family: 'dotum', sans-serif;
    vertical-align: middle;
}

/* 비밀글 체크박스 영역 배경색 맞추기 */
.ui-control {
    background-color: #D7E5F4 !important; /* 입력창과 동일한 노란색 */
    padding: 5px 20px 10px !important;    /* 여백 조정 */
    border-radius: 0 0 0px 25px;         /* 하단만 둥글게 */
    margin-top: -1px;                     /* 경계선 틈새 방지 */
    display: flex;
    justify-content: flex-end;            /* 오른쪽 정렬 */
    align-items: center;
    color: #333333;                       /* 글자색도 갈색톤으로 변경 */
    font-size: 15px;
}

/* 체크박스 자체 스타일 살짝 조정 */
.ui-control input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}