@charset "utf-8";
@import url('/css/font.css');
@layer swiper, reset;

/* 스크롤 */
/* ::-webkit-scrollbar{ display: none; } */
::-webkit-scrollbar{ width: 13px; height: 13px; }
::-webkit-scrollbar-thumb{ background: var(--black); border-radius: 13px; }
@media(prefers-reduced-motion:no-preference){
    /* html{ scroll-behavior: smooth; } */
}

:root{
    --inr-narrow: 1280;
    --inr: 1640;
    --inr-wide: 1780;
    --inr-width: .93;
    --primary: #89c29e;
    --placeholder-bg: #f4f8f6;
    --bg-color-1: #f5f1e8;
    --bg-color-2: #f0eadc;
    --bg-color-3: #ece4d3;
    --bg-color-4: #f9f8f4;
    --bg-color-5: #e9dfcb;
    --bg-color-6: #f6f3ec;
    --bg-1: #f9f8f4;
    --bg-2: #f6f3ec;
    --bg-3: #f5f1e8;
    --bg-4: #f2eee3;
    --bg-5: #f0eadc;
    --bg-6: #ece4d3;
    --bg-7: #e9dfcb;
    --bg-8: #e6dac3;
    --bg-9: #e3d5bb;
    --black: #403c3b;
    --font-pre: 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --font-goyo: 'Goyo', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --font-chw: 'Cheongweol', 'Goyo', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --font-lwt: 'LXGW WenKai TC', cursive;
    --font-ref: 100vw;
    --fs75: clamp(36rem, calc(75 / var(--inr) * var(--font-ref)), 75rem);
    --fs45: clamp(36rem, calc(45.83 / var(--inr) * var(--font-ref)), 45.83rem);
    --fs37: clamp(24rem, calc(37.5 / var(--inr) * var(--font-ref)), 37.5rem);
    --fs33: clamp(22rem, calc(33.32 / var(--inr) * var(--font-ref)), 33.32rem);
    --fs29: clamp(22rem, calc(29.17 / var(--inr) * var(--font-ref)), 29.17rem);
    --fs25: clamp(20rem, calc(25.01 / var(--inr) * var(--font-ref)), 25.01rem);
    --fs22: clamp(18rem, calc(22.92 / var(--inr) * var(--font-ref)), 22.92rem);
    --fs21: clamp(18rem, calc(21 / var(--inr) * var(--font-ref)), 21rem);
    --fs20: clamp(16rem, calc(20.83 / var(--inr) * var(--font-ref)), 20.83rem);
    --fs18: clamp(14rem, calc(18.75 / var(--inr) * var(--font-ref)), 18.75rem);
    --fs16: clamp(12rem, calc(16.66 / var(--inr) * var(--font-ref)), 16.66rem);
}
@media(min-width:768px){
    :root{
        --font-ref: 76.875vw;
    }
}
@media(max-width:767px){
    :root{
        --inr-width: .866667;
    }
}

/* reset */
@layer reset{
    *{ outline-color: var(--primary); }
    *, *::before, *::after{ box-sizing: border-box; }
    :where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dd){ margin:0; padding: 0; }
    :where(input,textarea,button,select){ font: inherit; color: inherit; caret-color: var(--primary); }
    a{ text-decoration: none; color: inherit; }
    address, em{ font-style:normal; }
    button{ padding: 0; background: 0; border: 0; cursor:pointer; }
    caption, legend{ overflow:hidden; position: absolute; width: 0; height: 0; border: 0; }
    dialog{ color: inherit; }
    input{ margin: 0; }
    summary::-webkit-details-marker{ display: none; }
    svg:focus, svg *:focus{ outline:none; }
    table{ border-spacing:0; border-collapse:collapse; }
    textarea{ resize: none; }
    ul,ol,li{list-style:none;}
}
body{ accent-color: var(--primary); font: 16rem/1.5 var(--font-goyo); color:var(--black); overflow-wrap: break-word; /* word-break: keep-all; */ }

/* 글자 크기 - clamp(각 영역의 최소, 기본, 최대 크기) */
@media(min-width:1921px){
    html{ font-size: clamp(0px, calc((100 / 1920) * 1vw), 500px ); }
}
@media(max-width:1920px) and (min-width:1280px){
    html{ font-size: clamp(0px, calc((100 / (var(--inr) / var(--inr-width))) * 1vw), 1px ); }
}
@media(max-width:1279px) and (min-width:768px){
    html{ font-size: clamp(0px, calc((100 / 768) * 1vw), 1px ); }
}
@media(max-width:767px){
    html{ font-size: clamp(0px, calc((100 / 360) * .75vw), 5px ); }
}

/* 검색엔진 고려한 숨기기, 로고, 제목, 링크 등, 버튼은 aria-label과 title */
.visually-hidden{ overflow: hidden; position: absolute; width: 0; height: 0; }

/* 선택자 */
::selection{ background: var(--primary); color: #fff; }

/* 말줄임표 */
.ellipsis{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; min-height: 1lh; white-space: normal; word-break: break-all; }
.ellipsis.e2{ -webkit-line-clamp: 2; }
.ellipsis.e3{ -webkit-line-clamp: 3; }

@media(min-width:768px){
    #wrap .show-mob{ display: none; }
}
@media(max-width:767px){
    #wrap .hide-mob{ display: none; }
    #wrap .show-mob{ display: block; }
}