@charset "UTF-8";

/********************************************************

// * 본 스킨은 Ninny Design에서 제작되었습니다.
// * 이 파일은 저작권법의 보호를 받습니다.
// * 무단 복제, 배포, 수정, 재판매를 금지합니다.
// * 위반 시 민·형사상 법적 책임을 질 수 있습니다.

// * Developed by Ninny Design.
// * This file is protected by copyright law.
// * Unauthorized copying, distribution, modification, or resale is strictly prohibited.
// * Violators may be subject to civil and criminal penalties.

// * © 2026 Ninny Design. All rights reserved.

********************************************************/

/********************************************************
■  셋팅
********************************************************/
:root {
    /* root 내용을 수정하거나 삭제할 경우 사이트가 정상적으로 동작하지 않을 수 있습니다. */
    /* 해당 부분 수정으로 발생한 오류 복구는 별도 비용이 발생할 수 있습니다. */

    /* 기본 색상 */
    --main-color1:#cb1c23;
    --main-color2:#ffe431;
    --main-color3:#2b3050;
    --bg-color:#fff;
    --txt-color:#050505;
    --form-border-color:#ddd;
    --scrollbar-color:#00000099;
    --scollbar-size:6px;
    --btn-point-color:#101010;

    --main-color1-rgb:203, 28, 35;
    --main-color2-rgb:255, 228, 49;
    --main-color3-rgb:70, 61, 61;
    --bg-color-rgb:255, 255, 255;
    --txt-color-rgb:16, 16, 16;
    --form-border-color-rgb:221, 221, 221;

	/* 컬러칩 */
    --nn-red:#d81f29;
    --nn-orange:#f25c1a;
    --nn-yellow:#f5b21a;
    --nn-mint:#6fd3ae;
    --nn-green:#4caf50;
    --nn-skyblue:#5bb8f5;
    --nn-blue:#2f5fbf;
    --nn-navy:#0b183b;
    --nn-purple:#5a3dbd;
    --nn-pink:#e94b6a;
    --nn-beige:#e4c5ae;
    --nn-brown:#4e3125;
    --nn-gray:#b6b8bd;
    --nn-black:#1b1b1b;
    --nn-bg-gray:#f8f8f8;

    /* sns */
    --sns-kakao-color:#ffe500;
    --sns-instagram-color:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b);
    --sns-naver-color:#06be34;
    --sns-facebook-color:#435e99;
    --sns-youtube-color:#d4262c;
    --sns-x-color:#27a9e0;

    /* 너비 */
    --default-width:1300px;
    --board-width:800px;

    /* 공통 좌우 패딩 */
    --default-padding:clamp(12px, 3vw, 20px);

    /* 서브 위아래 패딩 */
    --sub-v-padding:clamp(50px, 10vw, 100px);

    /* placeholder 색상 */
    --placeholder-color:#aaa;
}

@font-face {
    font-family:'Pretendard';
    src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:'Noto Serif KR';
    src:url('../fonts/NotoSerifKR-VariableFont.woff2') format('woff2-variations');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}

#nn-theme, #nn-theme body { font-family: "Pretendard", sans-serif; line-height:1.4; font-weight: 500; }
#nn-theme body { word-break: keep-all; }

.serif { font-family: "Noto Serif KR"; }

a.btn, .btn { line-height: normal; height: auto; padding: 0; text-align: left; font-weight: normal; font-size: 1rem; }


/* .dark { --bg-color:#101113; --txt-color:#eaeaea; }
@media (prefers-color-scheme: dark) {
    :root { --bg-color:#101113; --txt-color:#eaeaea; }
} */


/* 체크박스 */
input[type="checkbox"].nn-form-custom + label { color:#aaa; }
input[type="checkbox"].nn-form-custom + label:before { border-radius:3px; margin:0 auto; }

input[type="checkbox"].nn-form-custom + label:after { background:url('../img/icon-check.svg') no-repeat center/10px; transform: translateY(-100%); opacity:0; transition-duration: .3s; }
input[type="checkbox"].nn-form-custom:checked + label { color:#111; }
input[type="checkbox"].nn-form-custom:checked + label:before { border-color:#333; }
input[type="checkbox"].nn-form-custom:checked + label:after { transform: translateY(-50%); opacity:1; }


/* 파일첨부 */
input[type="file"].nn-form-custom + label { border-radius: 99px; padding:10px 30px; text-align: center; border:1px solid #333; }
input[type="file"].nn-form-custom + label:hover { background:#333; color:#fff; }

@media (max-width:768px) {
    input[type="file"].nn-form-custom + label { padding:7px 20px; }
}


/* 격자무늬 배경 */
.bg-grid { background-color:#fff; background-image: linear-gradient(#f5f5f5 1px, transparent 1px), linear-gradient(90deg, #f5f5f5 1px, transparent 1px); background-size: var(--bg-grid-size1) var(--bg-grid-size2); background-position: -1px -1px; --bg-grid-size1:10px; --bg-grid-size2:10px; }


/********************************************************
■ Layout
********************************************************/
.wrap { margin:0 auto; padding-left:var(--default-padding); padding-right:var(--default-padding); }
.max-wrap { width:min(100%, var(--default-width)); }

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}



/********************************************************
■ Main
********************************************************/
.is-main { overflow-x:hidden; }
.is-main .quick-wrap { position: relative; }

.is-main .sec { position:relative; background:var(--bg-color); z-index:2; }
.is-main .sec:not(.no-padding) { padding-top:clamp(50px, 8vw, 130px); padding-bottom:clamp(50px, 8vw, 130px); }


.is-main .sec .sec-header { margin-bottom:clamp(20px, 4.5vw, 40px); }
.is-main .sec .sec-header:not(.center) { display:grid; grid-template-columns: clamp(400px, 540px, 42%) 1fr; align-items: flex-end; }
.is-main .sec .sec-header.center { text-align:center; }

.is-main .sec .sec-header h2 { line-height:1.2; }
.is-main .sec .sec-header h2 span { display:block; }
.is-main .sec .sec-header .ko { font-size:clamp(1rem, 1.8vw, 1.625rem); color:var(--main-color1); font-weight: 400; }
.is-main .sec .sec-header .en { font-size:clamp(1.875rem, 4vw, 3.75rem); }
.is-main .sec .sec-header p { font-size:clamp(.875rem, 1.2vw, 1.125rem); color:#949494; line-height:1.7; margin-top:clamp(5px, 1vw, 15px); }
.is-main .sec .sec-header strong { color:#060606; font-weight:inherit; }

.is-main .sec .sec-header.center { text-align:center; }

.is-main .sec .swiper-nav.circle { border-radius:99px; background:#0000001a; color:#fff; display: flex; align-items: center; justify-content: center; width:var(--circle-size); height:var(--circle-size); --circle-size:clamp(40px, 5vw, 70px); }
.is-main .sec .swiper-nav.circle { font-size:clamp(1rem, 3vw, 1.5rem); }

.is-main .sec .swiper-nav.circle:hover { background:var(--main-color2); color:var(--main-color1); }


@media (max-width: 1024px) {
    .is-main .sec .sec-header { display:block !important; text-align:center; }
    .is-main .sec .sec-header h2 { width:100%; }
    .is-main .sec .sec-header p { line-height:1.4; }
}

@media (max-width: 768px) {
}




/********************************************************
■ Sub
********************************************************/
.is-sub { padding-top:var(--header-h); }
.is-sub #nn-sub-conts { padding-top:var(--sub-v-padding); padding-bottom:var(--sub-v-padding); }

.is-page h2 { font-size:clamp(1.875rem, 4vw, 4.5rem); }



/********************************************************
■ POPUP
********************************************************/
#hd_pop { position:fixed !important; left:0; top:0; right:0; bottom:0; height:auto !important; padding:10px; z-index:9999; display:none; }
#hd_pop .hd_pops { border:none; margin-bottom:10px; opacity:0; }
#hd_pop .hd_pops_con { height:auto !important; font-size:0; /*이미지로만 팝업사용시 폰트사이즈 0*/ }
#hd_pop .hd_pops_con img { width:100%; }
#hd_pop .hd_pops_con p { margin:0; }
#hd_pop .hd_pops_con br { display:none; }

#hd_pop .pop_fadein { animation:pop_fadein 400ms 1 forwards; }

@keyframes pop_fadein {
	0%	 { opacity:0; }
	100%	 { opacity:1; }
}

@media (max-width: 768px) {
	#hd_pop .hd_pops { left:50% !important; transform:translateX(-50%); top:0 !important; max-width:90%; }
	#hd_pop .hd_pops_con { max-width:100%; }
}




/********************************************************
■ 버튼 효과
********************************************************/
#nn-theme .nn-btn { position: relative; display: block; padding:15px 25px; border:1px solid #ddd; border-radius: 5px; line-height: 1; z-index:1; }

#nn-theme .nn-bth-effect1 { overflow:hidden; --effect-size:50px; }
#nn-theme .nn-bth-effect1:before { content:""; position:absolute; left:calc(-1 * (var(--effect-size)*1.5)); top:-50%; opacity:.2; background: #fff; width:var(--effect-size); height:200%; transform: rotate(35deg); transition: all .7s cubic-bezier(0.19, 1, 0.22, 1); filter:blur(3px); z-index:-1; }
#nn-theme .nn-bth-effect1:hover:before { left: 150%; }

#nn-theme .nn-bth-effect2 { overflow:hidden; --effect-size:20px; --effect-color:var(--main-color1); }
#nn-theme .nn-bth-effect2:before,
#nn-theme .nn-bth-effect2:after { content:""; position:absolute; top:50%; width:var(--effect-size); height:var(--effect-size); background:var(--effect-color); border-radius:50%; z-index:-1; }
#nn-theme .nn-bth-effect2:before { left:calc(-1 * var(--effect-size)); transform: translate(-50%, -50%); }
#nn-theme .nn-bth-effect2:after { right:calc(-1 * var(--effect-size)); transform: translate(50%, -50%); }

#nn-theme .nn-bth-effect2:hover { border-color:var(--effect-color) !important; color:#fff; }
#nn-theme .nn-bth-effect2:hover:before { animation: btn-cross-left 0.8s both; animation-direction: alternate; }
#nn-theme .nn-bth-effect2:hover:after { animation: btn-cross-right 0.8s both; animation-direction: alternate; }


@keyframes btn-cross-left {
  0% { left: calc(-1 * var(--effect-size)); }
  50% { left: 50%; width:var(--effect-size); height:var(--effect-size); }
  100% { left: 50%; width: calc(var(--effect-size)*15); height: calc(var(--effect-size)*15); }
}

@keyframes btn-cross-right {
  0% { right: calc(-1 * var(--effect-size)); }
  50% { right: 50%; width:var(--effect-size); height:var(--effect-size); }
  100% { right: 50%; width: calc(var(--effect-size)*15); height: calc(var(--effect-size)*15); }
}




/********************************************************
■ Aos
********************************************************/
[data-aos="blur-spacing-in"] { filter: blur(10px); letter-spacing: 10px; opacity: 0; }
[data-aos="blur-spacing-in"].aos-animate { filter: blur(0); letter-spacing: 0px; opacity: 1; }




/********************************************************
■ 미성년자 팝업
********************************************************/
.age-gate { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.88); }
.age-gate-inner { width: 100%; max-width: 430px; padding: 42px 36px 32px; background: #f3f1eb; border: 1px solid #222; text-align: center; box-sizing: border-box; }

.age-gate-logo { margin-bottom: 38px; }
.age-gate-logo img { display: block; width: auto; max-width: 180px; height: auto; margin: 0 auto; }

.age-gate-title { margin: 0 0 34px; color: #111; font-size: 23px; line-height: 1.55; font-weight: 400; font-style: italic; }

.age-inputs { display: flex; gap: 10px; margin-bottom: 30px; }
.age-inputs__item { flex: 1; text-align: left; }
.age-inputs__item label { display: block; margin-bottom: 12px; color: #111; font-size: 14px; line-height: 1.4; font-weight: 400; }
.age-inputs__item input { width: 100%; height: 54px; padding: 0; border: 0; border-bottom: 2px solid #111; background: transparent; color: #111; font-size: 18px; line-height: 52px; text-align: center; box-sizing: border-box; border-radius: 0; outline: 0; -webkit-appearance: none; appearance: none; }
.age-inputs__item input::placeholder { color: #a9adb3; opacity: 1; }

.age-msg { min-height: 22px; margin: -10px 0 18px; color: #b32222; font-size: 14px; line-height: 1.5; }

.age-confirm { display: block; width: 100%; height: 62px; margin: 0 0 30px; border: 0; background: #000; color: #fff; font-size: 24px; line-height: 62px; font-weight: 700; letter-spacing: 0.18em; text-align: center; cursor: pointer; border-radius: 0; -webkit-appearance: none; appearance: none; }
.age-confirm:hover { background: #111; }

.age-remember { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 34px; text-align: left; }
.age-remember input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid #111; border-radius: 0; accent-color: #111; flex: 0 0 18px; }
.age-remember label { color: #111; font-size: 14px; line-height: 1.55; font-weight: 400; cursor: pointer; }

.age-gate-desc { margin: 0 0 14px; color: #111; font-size: 13px; line-height: 1.6; font-weight: 400; }


@media (max-width: 768px) {
    .age-gate { padding: 12px; }
    .age-gate-inner { max-width: 372px; padding: 34px 22px 24px; }
    .age-gate-logo { margin-bottom: 30px; }
    .age-gate-logo img { max-width: 150px; }
    .age-gate-title { margin-bottom: 28px; font-size: 19px; }
    .age-inputs { gap: 8px; margin-bottom: 26px; }
    .age-inputs__item label { margin-bottom: 10px; font-size: 13px; }
    .age-inputs__item input { height: 48px; font-size: 16px; line-height: 46px; }
    .age-confirm { height: 56px; margin-bottom: 24px; font-size: 20px; line-height: 56px; }
    .age-remember { margin-bottom: 28px; }
}




/********************************************************
■ policy
********************************************************/
#policy header { margin-bottom:clamp(15px, 3vw, 30px); text-align: center; }
#policy h2 { font-size:clamp(1.5rem, 2.5vw, 3rem); }
#policy section { position: relative; background:#f8f8f8; border:1px solid #eee; padding:calc(clamp(20px, 4vw, 50px) + var(--bg-gap)); --bg-gap:clamp(15px, 3vw, 30px); z-index:1; }
#policy section:before { content:""; position:absolute; left:var(--bg-gap); top:var(--bg-gap); right:var(--bg-gap); bottom:var(--bg-gap); background:#fff; z-index:-1; }
#policy .tit { font-size:1.125rem; font-weight:600; margin:clamp(30px, 3.5vw, 40px) 0 clamp(5px, 1.2vw, 10px); }

#policy .policy-table { margin-top:clamp(5px, 1.5vw, 15px); border-top:2px solid #111; word-break: break-all; }
#policy .policy-table col:nth-child(1) { width:25%; }
#policy .policy-table th,
#policy .policy-table td { border:1px solid #ddd; padding:15px; }
#policy .policy-table thead { background:#666; color:#fff; }
#policy .policy-table tbody th { background:#f8f8f8; }

#policy .policy-list { margin-top:clamp(5px, 1.5vw, 15px); padding-left:10px; }
#policy .policy-list li { position: relative; padding-left: 10px; margin-bottom: 5px; }
#policy .policy-list li:before { content:""; position: absolute; left:0; top:9px; border-radius: 3px; width:3px; height:3px; background:#111; }

#policy .policy-date { margin-top: 50px; padding-top: 20px; border-top: 1px solid #eee; font-weight: 700; }





/********************************************************
■ 게시판 공통
********************************************************/
/* 리스트 카테고리 */
#bo-cate { margin-bottom:clamp(30px, 3vw, 50px); }
#bo-cate h2 { position:absolute; font-size:0; line-height:0; overflow:hidden; }
#bo-cate ul { display:flex; align-items: center; justify-content: center; flex-wrap: wrap; }
#bo-cate li { position:relative; }
#bo-cate li:not(:first-child):before { content:""; position: absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:12px; background:#ddd; }

#bo-cate a { display:block; padding:5px 20px; font-size:clamp(1rem, 1.5vw, 1.375rem); font-weight:300; color:#777; }
#bo-cate a:hover { text-decoration: underline; }
#bo-cate #bo_cate_on { color:#111; font-weight:bold; }



/* 리스트 갯수 & 검색 */
#bo-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom:clamp(10px, 2vw, 20px); }
#bo-list-total { color:#777; font-size:.875rem; }

#bo-top .bo-sch fieldset { display:flex; }
#bo-top .bo-sch .nn-form-el { padding: 20px; border-radius: 5px; }
#bo-top .bo-sch div.nn-form-el { width:auto; padding:0; display:flex; align-items: center; }
#bo-top .bo-sch .nn-form-el:hover,
#bo-top .bo-sch .nn-form-el:focus { border-color:#111; }
#bo-top .bo-sch select { width:120px; margin-right:3px; }
#bo-top .bo-sch input { width:250px; padding:15px; }
#bo-top .bo-sch input:focus { border:none !important; }
#bo-top .bo-sch button { height:100%; padding:0 15px; }


@media (max-width: 768px) {
    #bo-list-total { display:none; }

    #bo-top .bo-sch { width:100%; }
    #bo-top .bo-sch div.nn-form-el { width:100%; }
    #bo-top .bo-sch select { width:90px; }
    #bo-top .bo-sch input { width:100%; min-width:0; flex:1; }
}


/* 리스트 체크박스 */
#bo-list input[type="checkbox"].nn-form-custom + label { width:var(--box-size); padding:0; }



/* 리스트 아이콘 */
#bo-list span[class^="icon-"] { display:flex; align-items: center; justify-content: center; font-size:.813rem; font-weight:800; margin-left:5px; line-height:1; }
#bo-list span[class^="icon-"] i { width:12px; }

#bo-list .icon-reply { margin-right:5px; }
#bo-list .icon-secret { color:var(--nn-blue, #0362df); margin:0 5px 0 0; }
#bo-list .icon-new { color:var(--nn-yellow, #fddb18); }
#bo-list .icon-hot { color:var(--nn-red, #ff0000); }

#bo-list .icon-file { color:#999; }
#bo-list .icon-link { color:#999; }
#bo-list .icon-comment { color:#111; margin-left:6px !important; }
#bo-list .icon-comment i { font-size:.75rem; }
#bo-list .comment-cnt { margin-left:2px; font-weight: 400; }


/* 리스트 게시물x */
#bo-list.bo-gallery .nn-list-empty { grid-column: 1 / -1; }






/* 글쓰기 필수값 초기화*/
.required, textarea.required { background:none !important; }
.required > *:after { content:" *"; color:var(--nn-red); }



/* 글쓰기 폼 기본 */
.bo-w-default .nn-form-el { padding:clamp(12px, 2vw, 20px) clamp(10px, 1.5vw, 15px); }

.bo-w-default .bo-w-field-wrap { border-top:1px solid #333; border-bottom:1px solid #ddd; --title-w:clamp(140px, 15vw, 200px); --li-padding:12px; }
.bo-w-default .bo-w-field-wrap > ul { padding:var(--li-padding) 0; }
.bo-w-default .bo-w-field-wrap > ul > li { display:grid; grid-template-columns:var(--title-w) 1fr; align-items: flex-start; padding:var(--li-padding); }
.bo-w-default .bo-w-field-wrap > ul > li.bo-w-field-group { grid-template-columns: var(--title-w) 1fr var(--title-w) 1fr; gap:var(--li-padding) 0; }

.bo-w-default .bo-w-field-name { padding:var(--li-padding) calc(var(--li-padding)*2); }
.bo-w-default .bo-w-field { padding:0 calc(var(--li-padding)*2); }
.bo-w-default .bo-w-flex { display:flex; align-items: center; padding:var(--li-padding) calc(var(--li-padding)*2); }

.bo-w-default .bo-w-options { padding-bottom:0; }
.bo-w-default .bo-w-options span { margin-right:20px; }
.bo-w-default .bo-w-options label { display:flex; align-items: center; }
.bo-w-default .bo-w-options label span { margin-right:5px; }
.bo-w-default .bo-w-options .bo-w-field { height:100%; }

.bo-w-default .bo-w-subject .bo-w-field { display: flex; }
.bo-w-default .bo-w-subject .btn-frmline { white-space: nowrap; padding:10px 20px; font-size:.875rem; background:var(--main-color3); color:#fff; border-radius: 5px; margin-left:2px; }

.bo-w-default .bo-w-file .bo-w-field-name { grid-row: 1 / span 10; }
.bo-w-default .bo-w-file .bo-w-field { display: flex; flex-wrap: wrap; align-items: center; }
.bo-w-default .bo-w-file .bo-w-field ~ .bo-w-field { margin-top:var(--li-padding); }
.bo-w-default .bo-w-file .file-info { flex:1; max-width:calc(100% - 150px); margin-left:15px; line-height: 1; display: flex; align-items: center; }
.bo-w-default .bo-w-file span[id^="file-name"] { max-width:calc(100% - clamp(80px, 10vw, 100px)); }
.bo-w-default .bo-w-file .file_del { margin-left:clamp(10px, 1.5vw, 20px); font-size:.875rem; }

.bo-w-default .bo-w-file input[name="bf_content[]"] { margin-top:5px; }
.bo-w-default .bo-w-file .nn-txt-help { margin-top:5px; width:100%; }


#bo-w .wr_content.smarteditor2 iframe { background:#fff; }
#bo-w .captcha-wrap { margin:30px auto 0; text-align: center; }

#bo-w #bo-btns { justify-content: center; margin-top:30px; }
#bo-w #bo-btns .nn-btn { padding:15px 30px; }
#bo-w #bo-btns .btn-cencel { background:#f5f5f5; }


@media (max-width:768px) {
    .bo-w-default .bo-w-field-wrap { padding-bottom:calc(var(--li-padding)*2); --li-padding:10px; }
    .bo-w-default .bo-w-field-wrap > ul > li { display:block; padding:var(--li-padding) 0 0; }

    .bo-w-default .bo-w-field-name { padding:var(--li-padding) 5px 5px; }


    .bo-w-default .bo-w-title,
    .bo-w-default .bo-w-field { padding-left:5px; padding-right:5px; }

    .bo-w-default .bo-w-title { padding-bottom:5px; }

    .bo-w-default .bo-w-subject .btn-frmline { padding:5px 10px; font-size:.75rem; }

    .bo-w-default .bo-w-file .file-info { max-width:calc(100% - 120px); margin-left:5px; }


    #captcha.m_captcha audio { margin:0 auto; }
    #captcha.m_captcha #captcha_img { margin:5px auto; }
    #captcha.m_captcha #captcha_key { height:40px; }
}



/* 글쓰기 자동 저장 */
#autosave_wrapper { position:relative }
#autosave_pop { display:none; z-index:10; position:absolute !important; top:100%; right:0; width:350px; height:auto; max-height:180px; border:1px solid #565656;background:#fff; box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); }
#autosave_pop:before,
#autosave_pop:after { content:""; position:absolute; right:45px; width:0; height:0; border-style:solid; border-width:0 6px 8px 6px; }
#autosave_pop:before { top:-8px; border-color:transparent transparent #000 transparent; }
#autosave_pop:after { top:-7px; border-color:transparent transparent #fff transparent; }

html.no-overflowscrolling #autosave_pop { height:auto; max-height:10000px !important; } /* overflow 미지원 기기 대응 */

#autosave_pop strong { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#autosave_pop div { text-align: center; }
#autosave_pop ul { padding: 15px; border-top: 1px solid #e9e9e9; list-style: none; overflow-y: scroll; height: 130px; border-bottom: 1px solid #e8e8e8; }
#autosave_pop li { padding: 10px; border-bottom: 1px solid #fff; background: #eee; justify-content: space-between; align-items: center; }
#autosave_pop a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#autosave_pop span {  font-size: .75rem; font-style: italic; color: #999; white-space: nowrap; }

.autosave_close { cursor: pointer; width: 100%; height: 30px; background: none; color: #888; font-weight: bold; font-size: .875em; }
.autosave_close:hover { background: #f3f3f3; color: var(--main-color1); }
.autosave_content { display: none; }
.autosave_del { background: url(./img/close_btn.png) no-repeat 50% 50%; text-indent: -999px; overflow: hidden; height: 20px; width: 20px; }



#char_count_desc { display:block; margin:0 0 5px; padding:0; }
#char_count_wrap { margin:5px 0 0; text-align:right; }
#char_count { font-weight:bold; }





/* 게시판 읽기 기본 */
.bo-v-default header { border-bottom:1px solid #ddd; }
.bo-v-default header .bo-v-title { display: grid; width:100%; font-size: clamp(24px, 3.5vw, 36px); }
.bo-v-default header .bo-v-cate { font-size:clamp(1.125rem, 2vw, 1.5rem); margin-bottom:clamp(10px, 1.8vw, 20px); color:var(--main-color1); }
.bo-v-default header .bo-v-subject { font-size:clamp(1.25rem, 3vw, 3rem); line-height:1.3; }
.bo-v-default header .bo-v-date { margin:clamp(20px, 4vw, 50px) 0 clamp(15px, 2vw, 30px); color:#777; }

#bo-v .bo-v-btns { padding:10px 0; border-bottom:1px solid #ddd; }
#bo-v .bo-v-btns ul { display:flex; flex-wrap: wrap; margin:0 calc(-1 * var(--btns-gap)); --btns-gap:clamp(5px, 1.5vw, 15px); }
#bo-v .bo-v-btns li { margin:0 var(--btns-gap); }
#bo-v .bo-v-btns a { display: grid; grid-template-columns:auto 1fr; align-items: center; gap:3px; padding:5px 0; color:#777; }
#bo-v .bo-v-btns i { font-size:.75rem; }
#bo-v .bo-v-btns i.fa-comment-dots { transform: scaleX(-1); }

#bo-v #bo-v-share { position:relative; padding:clamp(10px, 2.2vw, 20px) 0; display:flex; }
#bo-v #bo-v-share a { display: inline-block; padding:10px 20px 8px; border-radius:5px; }
#bo-v #bo-v-share .btn-share { color:#555; border:1px solid #ddd; }
#bo-v #bo-v-share .btn i { margin-right:5px; }

#bo-v #bo_v_sns { display: flex; flex-wrap: wrap; }
#bo-v #bo_v_sns li { margin-right:2px; }
#bo-v #bo_v_sns li a { color:#fff; display:inline-block; }
#bo-v #bo_v_sns li img { display: inline-block; vertical-align: middle; margin-top:-3px; margin-right:5px; }
#bo-v #bo_v_sns li .sns_f { background:var(--sns-facebook-color); }
#bo-v #bo_v_sns li .sns_t { background:var(--sns-x-color); }
#bo-v #bo_v_sns li .sns_g { background:#ea4026; }
#bo-v #bo_v_sns li .sns_k { background:var(--sns-kakao-color); }




#bo-v #bo-v-con a.view_image { display:inline-block; }
#bo-v #bo-v-con img { margin-bottom:clamp(10px, 2vw, 20px); }

#bo-v #bo-v-con { margin:10px 0 30px; min-height:200px; word-break:break-all; overflow:hidden; }


#bo-v #bo-v-act { margin-bottom:30px; text-align: center; }
#bo-v #bo-v-act .bo_v_act_gng { position: relative; }
#bo-v #bo-v-act a:hover { color:var(--main-color1); border-color: var(--main-color1); }
#bo-v #bo-v-act i { font-size:clamp(1rem, 1.5vw, 1.375rem); margin-right:5px; }
#bo-v #bo-v-act .bo-v-good,
#bo-v #bo-v-act .bo-v-nogood { display:inline-block; border:1px solid #ddd; border-radius:99px; padding:10px clamp(15px, 2vw, 30px); }

#bo-v #bo-v-act_good,
#bo-v #bo_v_act_nogood { display:none; position:absolute; top:30px; left:0; z-index:9999; padding:10px 0; width:165px; background:var(--main-color1); color:#fff;text-align:center; }



#bo-v .bo-v-add { display: grid; grid-template-columns: 100px 1fr; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:-1px; }
#bo-v .bo-v-add h2 { font-size:1rem; }
#bo-v .bo-v-add h2,
#bo-v .bo-v-add li { padding:15px 0; }
#bo-v .bo-v-add li:not(:last-child) { border-bottom:1px solid #ddd; }
#bo-v .bo-v-add i { font-size:.75rem; }
#bo-v .bo-v-add span { color:#777; }


#bo-v .bo-v-nb { margin-top:-1px; border-top:1px solid #ddd; }
#bo-v .bo-v-nb li { border-bottom:1px solid #ddd; padding:15px 0; display: grid; grid-template-columns: 100px 1fr; align-items: center; transition-duration: .3s; }
#bo-v .bo-v-nb li:hover { background:var(--nn-bg-gray); padding:15px; }
#bo-v .bo-v-nb li i { font-size:.75rem; }
#bo-v .bo-v-nb li a { display: flex; justify-content: space-between; }


#bo-v #bo-v-atc { min-height:200px; }

#bo-v #bo-v-atc + .bo-v-botton-btn { border-top:1px solid #ddd; padding-top:clamp(20px, 3vw, 40px); }

#bo-v .bo-v-botton-btn { text-align: center; margin-top:clamp(20px, 3vw, 40px); }
#bo-v .bo-v-botton-btn .nn-btn { display: inline-block !important; border-radius: 99px !important; border-color: var(--btn-color); padding:clamp(15px, 2vw, 20px) clamp(35px, 4.5vw, 50px) !important; --btn-color:#111; }
#bo-v .bo-v-botton-btn .btn-edit { background:var(--btn-color); color:#fff; }


#bo-v ~ #bo-list { margin-top:clamp(30px, 4vw, 50px); }



@media (max-width: 768px) {
    .bo-v-default header .bo-v-date { font-size:.875rem; }

    #bo-v .bo-v-btns { font-size:.875rem; }

    #bo-v #bo-v-share a { display:inline-block; margin-top:2px; padding:5px 10px; }
    #bo-v #bo-v-share span { position: absolute; width:0; height:0; opacity: 0; visibility: hidden; z-index:-1; }
    #bo-v #bo_v_sns li img { margin: 0; }


    #bo-v .bo-v-add { display: block; padding:5px 0; font-size:.875rem; }
    #bo-v .bo-v-add h2 { position: absolute; width:0; height:0; opacity: 0; visibility: hidden; z-index:-1; }
    #bo-v .bo-v-add li { padding:5px 0; }
    #bo-v .bo-v-add span { display:none; }


    #bo-v .bo-v-nb li { position: relative; display: block; text-align: center; background:var(--nn-bg-gray); }
    #bo-v .bo-v-nb li a { position:absolute; left:0; top:0; right:0; bottom:0; }
    #bo-v .bo-v-nb li a span { position: absolute; width:0; height:0; opacity: 0; visibility: hidden; z-index:-1; }
}




/* 게시판 페이징 */
.nn-pg-wrap { margin-top:clamp(40px, 6vw, 80px); display:flex; align-items: center; justify-content: center; }
.nn-pg-wrap .nn-pg { border-radius: 99px; width:30px; height:30px; padding-top:2px; display:flex; align-items: center; justify-content: center; text-align: center; }
.nn-pg-wrap .nn-pg i { font-size:.75rem; }
.nn-pg-wrap .nn-pg.nn-pg-current { background:#333; color:#fff; }
.nn-pg-wrap a[class="nn-pg"]:hover { text-decoration: underline; }



/* 게시판 버튼 */
#bo-btns { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-top:50px; }
#bo-btns ul { display:flex; flex-wrap:wrap; }
#bo-btns ul:nth-of-type(2) { margin-left:auto; }
#bo-btns ul:nth-of-type(1) li { margin-right:5px; }
#bo-btns ul:nth-of-type(2) li { margin-left:5px; }

#bo-btns .btn-point { background:var(--btn-point-color, #101010); border-color:#101010; color:#fff; box-shadow: inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .4); }

#bo-btns .bo-btns-admin input[type="checkbox"] { position: absolute; width:0; height:0; opacity: 0; visibility: hidden; }
#bo-btns .bo-btns-admin input[type="checkbox"]:checked + label { border-color:#111; }


@media (max-width: 768px) {
    #bo-btns { flex-direction: column; }
    #bo-btns ul { justify-content: center; }
    #bo-btns ul:nth-of-type(2) { margin:5px auto 0; }

    #bo-btns ul:nth-of-type(1) li:first-child { margin-left:5px; }
    #bo-btns ul:nth-of-type(2) li:last-child { margin-right:5px; }

    #nn-theme .nn-btn { font-size:.875rem; padding:10px 20px; }
}