@charset "utf-8";
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

:root {
	--font-title: 'galmuri11'; /* 페어명 폰트 */

	/* hint */
	--error-color: #ff6461;
	--warning-color: #ffa509;
	--info-color: #16a5ed;
	--success-color: #34c560;
	--white-color: #fff;
}

/** Notice Box **/
.board-notice	{ width: 340px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }

/* 게시판 목록 */
.board-category	{
	float:left;height:30px;
	display: block;
	position: relative;margin: 10px 0; 
	
} 
#navi_category ul {text-align:center;}
#navi_category li {display:inline-block; padding:5px 0;}
#navi_category li:before {display:inline-block; content:"|";padding:0 15px;}
#navi_category li:first-child:before {display:none;content:"";}
#navi_category #bo_cate_on {font-weight:bold;}

/* 갤러리 목록 */
#bo_gall {margin:0 auto;}
.gall_row {padding:30px 0;} /*카테고리 포함한 목록*/ 
.gall_row h2 {padding: 0 10px;line-height:150%;	font-weight:400; } /*카테고리 제목*/ 
.gall_row .gall_con {line-height:0;text-align:center; overflow: visible; } /*썸네일 목록*/

figure.effect-sadie figcaption::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.8) 0%,   /* 블랙 80% 불투명 */
        rgba(0,0,0,0.6) 50%,  /* 블랙 60% 불투명 */
        rgba(0,0,0,0) 100%    /* 완전 투명 */
    );
    content: '';
    opacity: 0;
    transition: opacity 0.35s;
}

figure.effect-sadie:hover figcaption::before {
    opacity: 1;
}


figure.effect-sadie h2 {
	font-family: var(--font-title); 
    font-size: 2em; 
    color: #484c61;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    position: absolute;
    bottom: 10px; /* 글박스 하단과 맞춤 */
    left: 2%;
    transform: none; /* 중앙 이동 제거 */
    transition: transform 0.35s, color 0.35s;
}
figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie p {
	width: 650px;	color: #afafaf;	position: absolute;	text-align:right;
	bottom:0;	right: 0;	padding: 2em;	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}
figure.effect-sadie:hover h2 {
	color: #fff;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-5px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-5px,0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
/* 제목만 위로 이동 */
figure.effect-sadie:hover h2 {
	color: #fff;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-5px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-5px,0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* 글박스 어디에 올려도 figcaption과 p 나타나도록 */
figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/** 썸네일 **/

.gall_outbox { 
    position: relative; 
    display: inline-block;
    padding: 0; 
    margin: 5px 7px 50px; 
    overflow: visible; /* <- 추가 */
}


.gall_row .gall_box { 
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* 테두리 유지 */
border: 1px solid #000; 
    border-radius: 7px;

    /* 자연스러운 그림자 추가 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

    /* 기존 drop-shadow 필터 제거 (테두리용 필터 대신 box-shadow로 통합) */
    /* filter: drop-shadow(1px 1px 0px var(--menu-text)) drop-shadow(-1px -1px 0px var(--menu-text)) drop-shadow(3px 4px 2px rgba(0,0,0,0.4)); */
} 

.gall_row .gall_box a {
    width: 100%;
    height: 100%;
}

.gall_box .thumb_source {
    text-align: left;
    font-size: 0.8em;
    translate: 0 5px;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* 기존 .mini_thumb 그대로 유지하면서 gap만 추가 */
.mini_thumb { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin-left: auto; 
    margin-right: auto; 
    display: flex; 
    justify-content: center;
    gap: 0px;              /* ✅ 음수 금지 */
    z-index: 1000;
}


.mini_thumb .hint{
    margin: 0 !important;
    padding: 0 !important;
}

.mini_thumb img { 
    position: relative; 
    object-fit: cover;
    display:block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45));
}




/* ============================
   hint 툴팁 커스텀 (개선 버전)
   - background-color 대신 background 로 강제
   - ::after(박스) / ::before(화살표) 색상 통일
   - top/bottom/left/right 방향별 화살표 색 유지
   ============================ */

/* ---------- ERROR ---------- */
.mini_thumb .hint--error::after { 
    background: var(--error-color) !important; 
}
.mini_thumb .hint--error.hint--top-left::before,
.mini_thumb .hint--error.hint--top-right::before,
.mini_thumb .hint--error.hint--top::before { 
    border-top-color: var(--error-color) !important; 
}
.mini_thumb .hint--error.hint--bottom-left::before,
.mini_thumb .hint--error.hint--bottom-right::before,
.mini_thumb .hint--error.hint--bottom::before { 
    border-bottom-color: var(--error-color) !important; 
}
.mini_thumb .hint--error.hint--left::before { 
    border-left-color: var(--error-color) !important; 
}
.mini_thumb .hint--error.hint--right::before { 
    border-right-color: var(--error-color) !important; 
}


/* ---------- WARNING ---------- */
.mini_thumb .hint--warning::after { 
    background: var(--warning-color) !important; 
}
.mini_thumb .hint--warning.hint--top-left::before,
.mini_thumb .hint--warning.hint--top-right::before,
.mini_thumb .hint--warning.hint--top::before { 
    border-top-color: var(--warning-color) !important; 
}
.mini_thumb .hint--warning.hint--bottom-left::before,
.mini_thumb .hint--warning.hint--bottom-right::before,
.mini_thumb .hint--warning.hint--bottom::before { 
    border-bottom-color: var(--warning-color) !important; 
}
.mini_thumb .hint--warning.hint--left::before { 
    border-left-color: var(--warning-color) !important; 
}
.mini_thumb .hint--warning.hint--right::before { 
    border-right-color: var(--warning-color) !important; 
}


/* ---------- INFO ---------- */
.mini_thumb .hint--info::after { 
    background: var(--info-color) !important; 
}
.mini_thumb .hint--info.hint--top-left::before,
.mini_thumb .hint--info.hint--top-right::before,
.mini_thumb .hint--info.hint--top::before { 
    border-top-color: var(--info-color) !important; 
}
.mini_thumb .hint--info.hint--bottom-left::before,
.mini_thumb .hint--info.hint--bottom-right::before,
.mini_thumb .hint--info.hint--bottom::before { 
    border-bottom-color: var(--info-color) !important; 
}
.mini_thumb .hint--info.hint--left::before { 
    border-left-color: var(--info-color) !important; 
}
.mini_thumb .hint--info.hint--right::before { 
    border-right-color: var(--info-color) !important; 
}


/* ---------- SUCCESS ---------- */
.mini_thumb .hint--success::after { 
    background: var(--success-color) !important; 
}
.mini_thumb .hint--success.hint--top-left::before,
.mini_thumb .hint--success.hint--top-right::before,
.mini_thumb .hint--success.hint--top::before { 
    border-top-color: var(--success-color) !important; 
}
.mini_thumb .hint--success.hint--bottom-left::before,
.mini_thumb .hint--success.hint--bottom-right::before,
.mini_thumb .hint--success.hint--bottom::before { 
    border-bottom-color: var(--success-color) !important; 
}
.mini_thumb .hint--success.hint--left::before { 
    border-left-color: var(--success-color) !important; 
}
.mini_thumb .hint--success.hint--right::before { 
    border-right-color: var(--success-color) !important; 
}


/* ---------- WHITE ---------- */
.mini_thumb .hint--white::after { 
    background: var(--white-color) !important; 
    color: rgb(41, 41, 41) !important; 
    font-weight: bold;
    text-shadow: none !important;
}
.mini_thumb .hint--white.hint--top-left::before,
.mini_thumb .hint--white.hint--top-right::before,
.mini_thumb .hint--white.hint--top::before { 
    border-top-color: var(--white-color) !important; 
}
.mini_thumb .hint--white.hint--bottom-left::before,
.mini_thumb .hint--white.hint--bottom-right::before,
.mini_thumb .hint--white.hint--bottom::before { 
    border-bottom-color: var(--white-color) !important; 
}
.mini_thumb .hint--white.hint--left::before { 
    border-left-color: var(--white-color) !important; 
}
.mini_thumb .hint--white.hint--right::before { 
    border-right-color: var(--white-color) !important; 
}





/* 토큰 이미지 기본 */
.token-img {
    width: 60px;
    height: 60px;
    margin: 4px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    object-fit: cover;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover 효과 */
.token-img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}




.token-black   { border-color: black; }
.token-white   { border-color: #fff; }
.token-error   { border-color: var(--error-color); }    /* 빨강 */
.token-warning { border-color: var(--warning-color); }  /* 노랑 */
.token-info    { border-color: var(--info-color); }     /* 파랑 */
.token-success { border-color: var(--success-color); }  /* 초록 */


/* 게시판 목록 공통 */
#bo_gall .gall_con .gall_adm{position:absolute; right:5px; top:10px; text-align:left;}

#bo_btn_top{margin: 10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx {margin-bottom:5px;float:right; }
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none} 
.bo_fx #chkall {display:inline-block;width:0;height:0;overflow:hidden;}
.bo_fx #chkall + label span {display:inline-block;font-size:12px;line-height:26px;} 
.bo_fx #chkall + label span:after {content:"선택";}
.bo_fx #chkall + label span.on:after{ content:"해제";}
.bo_fx ul {margin:0;padding:0;list-style:none} 

.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;margin-left:5px}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:0 8px;border:0; text-decoration:none;vertical-align:middle}  
  
.pg_wrap{clear:both;}



/*글쓰기*/ 
/*글쓰기*/ 
#bo_w .write_div{margin:10px 0;position:relative}
#bo_w .bo_w_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info .frm_input{float:left;width:33%}
#bo_w #wr_password{margin:0 0.5%  }
#bo_w .wr_content.smarteditor2 iframe{background:#fff}
#bo_w .bo_w_tit{position:relative}
#bo_w .bo_w_tit .frm_input{padding-right:120px;}
#bo_w .bo_w_tit #btn_autosave{position:absolute;top:0;right:0;line-height:30px;height:30px;}
#bo_w .bo_w_link label,#bo_w .bo_w_flie label{display:inline-block;height:28px;line-height:28px;width:60px;background: #eee;text-align:center;color:#888} 
#bo_w .bo_w_link .frm_input,#bo_w .bo_w_flie .frm_file{padding-left:65px}  
#bo_w .bo_w_flie .frm_input{margin:10px 0 0 } 

.board-write > dl {position:relative;}
.board-write > dl > dt { width:70px;position:absolute;line-height:32px;text-align:center; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:80px;box-sizing:border-box;line-height:32px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}

.board-write-container {
    background: #f9f9f9;      /* 연한 배경 */
    border: 1px solid #ddd;   /* 테두리 */
    padding: 20px;             /* 안쪽 여백 */
    border-radius: 12px;       /* 모서리 둥글게 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 살짝 그림자 */
    display: flex;
    flex-direction: column;     
    gap: 12px;                  
}
.board-write-container dl dt {
    font-weight: 600;
    margin-bottom: 4px;
}
.board-write-container dl dd {
    margin: 0;
}
.board-write-container input.frm_input,
.board-write-container select,
.board-write-container textarea {
    box-sizing: border-box;
}

/* --- 옵션창 좁게 --- */
#bo_w select#set_secret,
#bo_w select#ca_name {
    width: 120px;    /* 텍스트 길이 정도 */
}

/* --- 페어명, 설명, 링크 --- */
#bo_w input[name="wr_subject"],
#bo_w input[name="wr_content"],
#bo_w input[name="wr_url"] {
    width: 30%;        /* 절반 정도 */
    display: inline-block;
    margin-right: 4%;  
}

/* --- 커버 이미지 입력 --- */
#bo_w input[name="wr_1"],
#bo_w input[name="wr_2"] {
    width: 100%; /* 전체폭 */
}

/* --- 토큰 입력 테이블 --- */
#bo_w table tr td select[name="bf_content[]"] {
    width: 80%;  /* 컬러 선택 */
}
#bo_w table tr td input[type="file"] {
    width: 90%;  /* 파일 선택 */
}
#bo_w table tr td input[name^="bf_url"] {
    width: 95%;  /* URL 칸 */
}
#bo_w table tr td input[name^="bf_tooltip"] {
    width: 60%;  /* 툴팁 텍스트 칸 */
}





/* 갤러리 뷰 (사용 안 함) */
#password_box {max-width:300px;margin:20px auto;position:relative;z-index:9999;}
#password_box p{padding:5px;}

#view_box{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.7);z-index:999;}
#view_box.on {display:block;}
#view_box .fix-layout {margin:0 auto;height:100%;}
#view_box #close_area{display:block;position:fixed;width:100%;height:100%;top:0;right:0;bottom:0;left:0;z-index:10;}
#view_area{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:90;}

#bo_v {position:relative;padding:20px 30px;box-sizing:border-box; overflow:auto;} 

#bo_v_top{position:absolute;width:100%;left:0;z-index:999;}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top ul {padding-right:20px;list-style:none;word-break:break-all}

#bo_v_info {padding:0 10px;}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_v_info h2 {font-size:15px;padding-bottom:5px;}
#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal} 
#bo_v_info .if_date{margin:0;opacity:0.8;}

.bo_v_com { float:right; }
.bo_v_com li {float:left;margin-right:8px}

.bo_v_left { float:left}
.bo_v_left li {float:left;margin-right:5px}

.bo_v_nb {position:absolute;width:100%;top:50%;left:0;height:50px;transform:translateY(-50%);z-index:999;} 
.bo_v_nb .prev, .bo_v_nb .next{position:relative;display:block;width:50px;height:50px;line-height:50px;}
.bo_v_nb .prev {float:left}
.bo_v_nb .next {float:right;}
.bo_v_nb .prev:after {content:"<";}
.bo_v_nb .next:after {content:">";}
.bo_v_nb .prev:after, .bo_v_nb .next:after{position:absolute;top:0;display:block;width:100%;height:100%;font-size:35px;text-align:center;}
.bo_v_nb .prev span, .bo_v_nb .next span{display:inline-block;width:0;height:0;white-space:nowrap;overflow:hidden;}
 
#bo_v .bo_block {position:absolute;top:0;right:0;left:0;bottom:0;z-index:100;}

#bo_v_atc {min-height:100px;padding:30px 10px 10px; }  

#bo_v_con { width:100%; overflow:hidden} 
#bo_v_con img {max-width:100%;height:auto}


/* 게시판 댓글 (현재 사용안함) */ 
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 10px;position:relative} 
#bo_vc header {line-height:23px;}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold} 
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {padding:10px;margin:5px 0 0;}
#bo_vc #bo_vc_winfo {float:left} 

.bo_vc_w {position:relative;margin:10px 0;display:block;}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w_info{margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input{float:left;margin-right:5px}
.bo_vc_w .btn_confirm{float:right;margin-top:5px}
.bo_vc_w .btn_confirm label{display:inline-block;margin-right:10px; text-align:center;}
.bo_vc_w .btn_submit{height:30px;padding:0 20px; font-weight:bold; }
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}

@media all and (max-width:640px) {
	.gall_con .gall_outbox {width:100% !important; margin:5px 0px 20px;}
	.gall_con .gall_box {width:100% !important;}
	.board-notice	{ width: 80%;}
 .hint { padding: 3px 6px; font-size: 11px; }
}


/* ============================
   hint.css (FULL SAFE VERSION)
   ============================ */

.hint {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.15s ease-out;
    padding: 5px 8px;
    margin: 2px;            /* 토큰끼리 겹치지 않도록 간격 */
    border-radius: 4px;
    z-index: 10;            /* 다른 요소보다 위로 */
}

/* hover 확대 */
.hint:hover {
    transform: scale(1.05);
}


/* ============================
   툴팁 박스
   ============================ */
.hint::after {
    content: attr(data-hint);
    position: absolute;
    left: 50% !important;
    bottom: calc(100% + 0px) !important;   /* ★ 토큰과 거리 */
    transform: translateX(-50%) !important;
    padding: 8px 12px;
    white-space: nowrap;
    background: var(--hint-color, rgba(0,0,0,0.85));
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease-out;
    z-index: 10000 !important;
}


/* ============================
   말풍선 화살표
   ============================ */
.hint::before {
    content: "";
    position: absolute;
    left: 50% !important;                    /* ★ 중앙 고정 */
    bottom: calc(100% - 1px) !important;     /* ★ 박스와 화살표 간격 */
    transform: translateX(-50%) !important;  /* ★ 중앙 고정 */
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--hint-color, rgba(0,0,0,0.85)) transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease-out;
    z-index: 10001 !important;
}


/* hover 시 보임 */
.hint:hover::after,
.hint:hover::before {
    opacity: 1;
    visibility: visible;
}


/* ============================
   (중요) mini_thumb + hint--top
   기존 hint.css 덮어쓰기 방지용
   ============================ */

/* hint.css에서 hint--top이 위치를 따로 잡는 경우가 있어서
   여기서 강제로 다시 잡아줌 */
.mini_thumb .hint.hint--top::after{
    left: 50% !important;
    bottom: calc(100% + 0px) !important;
    transform: translateX(-50%) !important;
}

.mini_thumb .hint.hint--top::before{
    left: 50% !important;
    bottom: calc(100% - 1px) !important;
    transform: translateX(-50%) !important;
}

/* ★ 이 블록은 삭제 추천 (정렬 어긋남 원인)
.mini_thumb .hint--top:before,
.mini_thumb .hint--top:after{
  transform: translateX(-50%) translateY(0px) !important;
}
*/