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

/* 스크롤 */
/* ::-webkit-scrollbar{ display: none; } */
@media(prefers-reduced-motion:no-preference){
    html{ scroll-behavior: smooth; }
}

/* reset */
@layer base{
    *{ 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; }
    input{ margin: 0; }
    pre{ margin:0; font-family: inherit; white-space: pre-wrap; }
    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;}
    img{ display: block; width: 100%; }
}
body{ accent-color: var(--primary); font: 16rem/1.5 var(--font-suit); color:var(--text-black); overflow-wrap: break-word; word-break: keep-all; }

/* 루트 */
:root{
    --inr-narrow: 1280;
    --inr: 1200;
    --inr-wide: 1650;
    --inr-width: .92;
    --primary: #1f8e26;
    --secondary: #020101;
    --placeholder-bg: #f4f8f6;
    --black: #050505;
    --black-surfaces: #02070A;
    --grey-surfaces: #F3F3F3;
    --white: #fff;
    --text-black: #222;
    --stroke-grey: #ddd;
    --color-white: #ffffff;
    --bg-surface-grey: #FAFAFA;
    --border-radius: 5rem;
    --font-pre: 'Pretendard', 'Dotum', 'Gulim', Sans-serif;
    --font-suit: 'SUIT', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif; 
    --font-poppins: 'Poppins', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif; 
    --font-paperlogy: 'Paperlogy', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif; 
    --font-nmj: "Nanum Myeongjo", serif;
    --fs60: clamp(28rem, calc(60 / var(--inr) * 100vw), 60rem);
    --fs50: clamp(26rem, calc(50 / var(--inr) * 100vw), 50rem);
    --fs45: clamp(24rem, calc(45 / var(--inr) * 100vw), 45rem);
    --fs42: clamp(24rem, calc(42 / var(--inr) * 100vw), 42rem);
    --fs40: clamp(24rem, calc(40 / var(--inr) * 100vw), 40rem);
    --fs36: clamp(24rem, calc(36 / var(--inr) * 100vw), 36rem);
    --fs35: clamp(24rem, calc(35 / var(--inr) * 100vw), 35rem);
    --fs30: clamp(24rem, calc(30 / var(--inr) * 100vw), 30rem);
    --fs28: clamp(22rem, calc(28 / var(--inr) * 100vw), 28rem);
    --fs26: clamp(20rem, calc(26 / var(--inr) * 100vw), 26rem);
    --fs25: clamp(20rem, calc(25 / var(--inr) * 100vw), 25rem);
    --fs24: clamp(20rem, calc(24 / var(--inr) * 100vw), 24rem);
    --fs22: clamp(20rem, calc(22 / var(--inr) * 100vw), 22rem);
    --fs20: clamp(18rem, calc(20 / var(--inr) * 100vw), 20rem);
}

/* 글자 크기 - 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) * .75vw), 5px ); }
}
@media(max-width:767px){
    html{ font-size: clamp(0px, calc((100 / 360) * .875vw), 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; }