@charset "utf-8";

/* Cormorant Garamond 폰트*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');


/* presentation 폰트 */

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


/* a2z 폰트 */
@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}



/* 루트 색상 설정 */

:root {
    --color-primary: #B8965A;    
}


.sound_only {
    display: none;
}


body {
    font-family: 'Presentation', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color:#111;
}

/* break-keep, letter-spacing 스타일 */

p,
div,
label,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    word-break: keep-all;
    overflow-wrap: break-word;
    letter-spacing: -0.02rem;
}


/* span 태그는 상위 태그의 letter-spacing 값을 상속받음 */
span {
    letter-spacing: inherit;
}


/*모바일, 태블릿 뷰에서 lenis 새로고침 중지*/
html,
body {
    overscroll-behavior-y: none;
}

@media (min-width:1024px) {

    html,
    body {
        overscroll-behavior-y: initial;
    }
}

/*게시판 글쓰기 화면 공통 스타일 */
#bo_w .bo_w_flie .frm_file {
    margin-top: -1px;
}


/* 에디터 콘텐츠 내 텍스트, 이미지 정렬 - 에디터에서 설정한 정렬 그대로 반영 */

.editor_content p,
.editor_content div,
#bo_v_con p,
#bo_v_con div {
    text-align: inherit;
    font-family: inherit !important;
}

.editor_content img,
#bo_v_con img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/* 게시판 본문 첨부 이미지 확대 링크는 이미지 크기만 클릭되도록 제한 */
#bo_v_img a.view_image {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
}

#bo_v_img a.view_image img {
    display: block;
}

/* 게시글 파일첨부, 링크 공통 스타일 */
#bo_v_file h2,
#bo_v_link h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_v_file ul,
#bo_v_link ul {
    margin: 0;
    list-style: none;
}

#bo_v_file li,
#bo_v_link li {
    padding: 15px;
    position: relative;
    margin: 10px 0;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    box-shadow: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

#bo_v_file li br,
#bo_v_link li br {
    display: none;
}

#bo_v_file li i,
#bo_v_link li i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: #000;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

#bo_v_file a,
#bo_v_link a {
    flex: 1;
    min-width: 0;
    display: block;
    text-decoration: none;
    word-wrap: break-word;
    color: #000;
    transition: color 0.2s ease;
}

#bo_v_file a:focus,
#bo_v_file li:hover a,
#bo_v_file a:active,
#bo_v_link a:focus,
#bo_v_link li:hover a,
#bo_v_link a:active {
    text-decoration: underline;
    color: var(--color-primary);
}

#bo_v_file img {
    flex-shrink: 0;
    margin: 0 10px 0 0;
}

#bo_v_file .bo_v_file_cnt,
#bo_v_link .bo_v_link_cnt {
    margin-left: auto;
    flex-shrink: 0;
    color: #000;
    font-size: 0.92em;
    line-height: 1.4;
    transition: color 0.2s ease;
}

#bo_v_file li:hover,
#bo_v_link li:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

#bo_v_file li:hover i,
#bo_v_link li:hover i {
    color: var(--color-primary);
}

#bo_v_file li:hover .bo_v_file_cnt,
#bo_v_link li:hover .bo_v_link_cnt {
    color: var(--color-primary);
}



/* 체크박스 체크 시 색상 변경 */

input[type="checkbox"] {
    accent-color: var(--color-primary) !important;
}

input[type="checkbox"]:checked {
    accent-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

input[type="checkbox"]:checked+label span {
    accent-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

input[type="checkbox"]+label:hover {
    color: var(--color-primary) !important;
}


/* input, select, textarea focus 시 파란색 outline 제거 및 색상 변경 */
input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}

select:focus,
select:focus-visible {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}

textarea:focus,
textarea:focus-visible {
    outline: none !important;
    box-shadow: none;
    border: 1px solid var(--color-primary) !important;
}


/*캡챠 오버라이딩*/
#captcha {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    position: relative;    
}

#captcha .captcha_box {
    color: #000;
}

@media screen and (max-width: 768px) {
    #captcha {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* captcha_img는 한 줄 전체를 차지 */
    #captcha_img {
        display: block;
        width: 80% !important;
        margin: 0 auto;
        object-fit: contain;

    }

    /* captcha_key와 captcha_reload를 한 줄로 배치 */
    #captcha_key {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        height: 40px !important;
    }

    #captcha_reload {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
}

/* 그누보드 input:focus의 border !important를 상쇄 */
.site-search input:focus, .site-search input:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.site-search-popup__panel.is-found {background-color:#e0ffe9}
.site-search-popup__panel.is-empty {background-color:#ffe6e6}
#hd .site-search-popup__text {
    color:rgba(0,0,0,0.8);
    font-family:Pretendard,sans-serif;
    font-weight:500;
    font-size:15px;
    line-height:21px;
    word-break:keep-all;
}
#hd .site-search-popup__phrase.is-match {color:#00BF06}
#hd .site-search-popup__phrase.is-miss {color:#FF4C4C}
#hd .site-search-popup__close {
    color:rgba(0,0,0,0.35);
    font-family:Pretendard,sans-serif;
    font-weight:400;
    width:20px;
    height:20px;
    font-size:20px;
    line-height:1;
}
.site-search-note.is-found {color:#c8f5d4}
.site-search-note.is-empty {color:#ffc9c9}
#hd .site-search-note {
    font-family:Pretendard,sans-serif;
    font-weight:500;
}

@media (min-width: 1024px) {
    .site-search-popup {
        display:grid;
        grid-template-rows:0fr;
        pointer-events:none;
        transition:grid-template-rows 0.32s ease;
    }
    .site-search-popup.is-open {
        grid-template-rows:1fr;
        pointer-events:auto;
    }
    .site-search-popup__clip {overflow:hidden}
    .site-search-popup.is-open .site-search-popup__clip {
        padding-top:0.5rem;
        filter:drop-shadow(0 0 40px rgba(255,255,255,0.6));
    }
    .site-search-popup__panel {
        transform:translateY(-100%);
        transition:transform 0.32s ease;
    }
    .site-search-popup.is-open .site-search-popup__panel {transform:translateY(0)}
}

/* 사이트 푸터: 그누보드 #ft 고정폭·배경·가운데 정렬 상쇄 */
#ft.site-footer {
    min-width: 0;
    width: 100%;
    margin: 0;
    background-color: #000511;
    text-align: left;
}

#ft.site-footer a {
    text-decoration: none;
}

.site-footer__line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* 서브비주얼. 배경 이미지는 component/sub_visual.php 의 $sv_data 에서 지정 */
.sub-visual__label {
    font-family: "Cormorant Garamond", serif;
}

.sub-visual__title,
.sub-visual__desc {
    font-family: "Pretendard", sans-serif;
}

.sub-visual + hr {
    display: none;
}



@property --inquiry-gradient-angle {
    syntax: "<angle>";
    initial-value: 90deg;
    inherits: false;
}

/* 문의폼. 체크 전에는 자동등록방지를 숨기고, 다크 폼 안에서 캡차를 맞춘다 */
.inquiry-form .inquiry-submit {
    background-image: linear-gradient(var(--inquiry-gradient-angle), #b8965a, #c7a568, #ffdb9a);
    transition: --inquiry-gradient-angle 0.7s ease;
}

.inquiry-form .inquiry-submit:hover {
    --inquiry-gradient-angle: -90deg;
}

.inquiry-form .inquiry-captcha[hidden] {
    display: none !important;
}

.inquiry-form input[type="text"]:focus,
.inquiry-form input[type="tel"]:focus,
.inquiry-form input[type="text"]:focus-visible,
.inquiry-form input[type="tel"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--color-primary) !important;
}

.inquiry-form #captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
}

.inquiry-form #captcha_img {
    height: 45px;
    border: 1px solid #262626;
    background: #0d0d0d;
}

.inquiry-form #captcha_key {
    width: 120px;
    height: 45px;
    margin: 0;
    border: 1px solid #262626;
    background: #fff;
    color: #000;
    font-size: 16px;
}

.inquiry-form #captcha_info {
    flex: 1 1 100%;
    margin: 0;
    color: #9ca3af;
    letter-spacing: 0;
}