@charset "utf-8";

/* 1. CSS Reset 또는 Normalize (선택) */
/* 예: Meyer Reset 또는 Normalize.css 일부 */
/* https://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* --- End of Reset --- */


/* 2. 기본 Box Sizing 설정 */
html {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 모바일 클릭 시 하이라이트 제거 */
    font-size: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* 3. CSS 변수 (Custom Properties) - 색상, 폰트, 간격 등 */
/*:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;

    --text-color: #212529;
    --link-color: var(--primary-color);
    --link-hover-color: darken(var(--primary-color), 10%); !* SASS/SCSS 사용 시, 아니면 직접 값 지정 *!

    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --font-size-base: 1rem; !* 기본 폰트 크기 (보통 16px) *!
    --line-height-base: 1.5;

    --spacing-unit: 0.5rem; !* 8px (if 1rem = 16px) *!
    --border-radius: 0.25rem;
}*/

/* 4. 기본 HTML 요소 스타일링 */
body {
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: #181818; /* 기본 배경색 */
    -webkit-font-smoothing: antialiased; /* 폰트 안티앨리어싱 (iOS) */
    -moz-osx-font-smoothing: grayscale; /* 폰트 안티앨리어싱 (MacOS) */
    overflow: hidden;
}

a {
    /*color: var(--link-color);*/
    text-decoration: none; /* 기본 밑줄 제거 */
    color: inherit;
}
a:hover {
    color: var(--link-hover-color); /* CSS 변수를 사용하거나 직접 지정 */
    /* text-decoration: underline; */ /* 호버 시 밑줄 (선택) */
}

img, video {
    max-width: 100%; /* 이미지가 부모 요소를 넘어가지 않도록 */
    height: auto;
    display: block; /* 이미지 하단 여백 제거 */
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
    font-weight: 500; /* 기본 헤딩 폰트 두께 */
}

p {
    margin-top: 0;
    /*margin-bottom: calc(var(--spacing-unit) * 2);*/ /* 1rem */
}

button, input, select, textarea {
    font-family: inherit; /* 부모 폰트 상속 */
    font-size: inherit;
    line-height: inherit;
    margin: 0; /* 기본 마진 제거 */
}

input {
    background: none;
    border: 0;
}

input:focus,
button:focus {
    outline: none;
}

input::placeholder {
    background: none;
    color: #939393;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* 기존 background: none; 은 효과가 없을 가능성이 높습니다. */

    /* 트릭 1: 매우 큰 내부 그림자를 사용하여 배경색을 덮어씁니다. */
    /* 여기서 white는 원하는 배경색입니다. 투명하게 하려면 transparent를 시도해볼 수 있으나, */
    /* 보통은 일반 input 배경색과 맞추는 것이 자연스럽습니다. */
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important; /* 표준 속성도 포함 */

    /* 트릭 2: 배경색 변경 애니메이션을 매우 길게 설정하여 사실상 변경되지 않는 것처럼 보이게 합니다. */
    /* 이 방법은 box-shadow 트릭과 함께 사용하거나 단독으로도 사용될 수 있습니다. */
    transition: background-color 5000s ease-in-out 0s;

    /* 자동 완성 시 텍스트 색상도 지정해주는 것이 좋습니다. */
    /* 지정하지 않으면 브라우저 기본 자동완성 텍스트 색상(예: 검정)이 표시됩니다. */
    -webkit-text-fill-color: #fff !important; /* common.css의 --text-color 변수 사용 또는 원하는 색상 직접 지정 */
    color: #fff !important; /* 표준 속성 */

    /* 폰트 스타일도 필요한 경우 여기에 추가 */
    /* font-family: inherit; */
    /* font-size: inherit; */
}



button {
    cursor: pointer;
    background: none;
    border: 0;
}


/* 모바일 이하: 12px */
@media (max-width: 480px) {
    /*html { font-size: 75%; }*/
}

/* 갤럭시 이하: 12px */
@media (max-width: 380px) {
    html { font-size: 90%; }
}













/* 5. 유틸리티 클래스 (필요에 따라 추가) */
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-flex  { display: flex !important; }
/* ... 기타 자주 사용하는 유틸리티들 */

/* 접근성을 위한 스크린 리더 전용 클래스 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}






/* font Size */
.fs10 {font-size:10px !important;}
.fs11 {font-size:11px !important;}
.fs15 {font-size:15px !important;}
.fs20 {font-size:20px !important;}
.fs25 {font-size:25px !important;}

/* width */
.w1p {width:1% !important;}
.w2p {width:2% !important;}
.w3p {width:3% !important;}
.w4p {width:4% !important;}
.w5p {width:5% !important;}
.w6p {width:6% !important;}
.w7p {width:7% !important;}
.w8p {width:8% !important;}
.w9p {width:9% !important;}
.w10p {width:10% !important;}
.w11p {width:11% !important;}
.w12p {width:12% !important;}
.w13p {width:13% !important;}
.w14p {width:14% !important;}
.w15p {width:15% !important;}
.w16p {width:16% !important;}
.w17p {width:17% !important;}
.w18p {width:18% !important;}
.w19p {width:19% !important;}
.w20p {width:20% !important;}
.w21p {width:21% !important;}
.w22p {width:22% !important;}
.w23p {width:23% !important;}
.w24p {width:24% !important;}
.w25p {width:25% !important;}
.w26p {width:26% !important;}
.w27p {width:27% !important;}
.w28p {width:28% !important;}
.w29p {width:29% !important;}
.w30p {width:30% !important;}
.w31p {width:31% !important;}
.w32p {width:32% !important;}
.w33p {width:33% !important;}
.w34p {width:34% !important;}
.w35p {width:35% !important;}
.w36p {width:36% !important;}
.w37p {width:37% !important;}
.w38p {width:38% !important;}
.w39p {width:39% !important;}
.w40p {width:40% !important;}
.w41p {width:41% !important;}
.w42p {width:42% !important;}
.w43p {width:43% !important;}
.w44p {width:44% !important;}
.w45p {width:45% !important;}
.w46p {width:46% !important;}
.w47p {width:47% !important;}
.w48p {width:48% !important;}
.w49p {width:49% !important;}
.w50p {width:50% !important;}
.w51p {width:51% !important;}
.w52p {width:52% !important;}
.w53p {width:53% !important;}
.w54p {width:54% !important;}
.w55p {width:55% !important;}
.w56p {width:56% !important;}
.w57p {width:57% !important;}
.w58p {width:58% !important;}
.w59p {width:59% !important;}
.w60p {width:60% !important;}
.w61p {width:61% !important;}
.w62p {width:62% !important;}
.w63p {width:63% !important;}
.w64p {width:64% !important;}
.w65p {width:65% !important;}
.w66p {width:66% !important;}
.w67p {width:67% !important;}
.w68p {width:68% !important;}
.w69p {width:69% !important;}
.w70p {width:70% !important;}
.w71p {width:71% !important;}
.w72p {width:72% !important;}
.w73p {width:73% !important;}
.w74p {width:74% !important;}
.w75p {width:75% !important;}
.w76p {width:76% !important;}
.w77p {width:77% !important;}
.w78p {width:78% !important;}
.w79p {width:79% !important;}
.w80p {width:80% !important;}
.w81p {width:81% !important;}
.w82p {width:82% !important;}
.w83p {width:83% !important;}
.w84p {width:84% !important;}
.w85p {width:85% !important;}
.w86p {width:86% !important;}
.w87p {width:87% !important;}
.w88p {width:88% !important;}
.w89p {width:89% !important;}
.w90p {width:90% !important;}
.w91p {width:91% !important;}
.w92p {width:92% !important;}
.w93p {width:93% !important;}
.w94p {width:94% !important;}
.w95p {width:95% !important;}
.w96p {width:96% !important;}
.w97p {width:97% !important;}
.w98p {width:98% !important;}
.w99p {width:99% !important;}
.w100p {width:100% !important;}

.w-1vw {width: 1vw !important; height: auto;}
.w-2vw {width: 2vw !important; height: auto;}
.w-3vw {width: 3vw !important; height: auto;}
.w-3-1vw {width: 3.1vw !important; height: auto;}
.w-3-2vw {width: 3.2vw !important; height: auto;}
.w-3-3vw {width: 3.3vw !important; height: auto;}
.w-3-4vw {width: 3.4vw !important; height: auto;}
.w-3-5vw {width: 3.5vw !important; height: auto;}
.w-3-6vw {width: 3.6vw !important; height: auto;}
.w-3-7vw {width: 3.7vw !important; height: auto;}
.w-3-8vw {width: 3.8vw !important; height: auto;}
.w-3-9vw {width: 3.9vw !important; height: auto;}
.w-4vw {width: 4vw !important; height: auto;}
.w-5vw {width: 5vw !important; height: auto;}
.w-6vw {width: 6vw !important; height: auto;}
.w-7vw {width: 7vw !important; height: auto;}
.w-8vw {width: 8vw !important; height: auto;}
.w-9vw {width: 9vw !important; height: auto;}
.w-10vw {width: 10vw !important; height: auto;}
.w-11vw {width: 11vw !important; height: auto;}
.w-12vw {width: 12vw !important; height: auto;}
.w-13vw {width: 13vw !important; height: auto;}
.w-14vw {width: 14vw !important; height: auto;}
.w-15vw {width: 15vw !important; height: auto;}
.w-16vw {width: 16vw !important; height: auto;}
.w-17vw {width: 17vw !important; height: auto;}
.w-18vw {width: 18vw !important; height: auto;}
.w-19vw {width: 19vw !important; height: auto;}
.w-20vw {width: 20vw !important; height: auto;}
.w-21vw {width: 21vw !important; height: auto;}
.w-22vw {width: 22vw !important; height: auto;}
.w-23vw {width: 23vw !important; height: auto;}
.w-24vw {width: 24vw !important; height: auto;}
.w-25vw {width: 25vw !important; height: auto;}
.w-26vw {width: 26vw !important; height: auto;}
.w-27vw {width: 27vw !important; height: auto;}
.w-28vw {width: 28vw !important; height: auto;}
.w-29vw {width: 29vw !important; height: auto;}
.w-30vw {width: 30vw !important; height: auto;}
.w-31vw {width: 31vw !important; height: auto;}

.mlr-0 {margin-left:0 !important; margin-right:0 !important;}
.mtb-0 {margin-top:0 !important; margin-bottom:0 !important;}
.plr-0 {padding-left:0 !important; padding-right:0 !important;}
.ptb-0 {padding-top:0 !important; padding-bottom:0 !important;}

.ml-auto {margin-left:auto !important;}
.mr-auto {margin-right:auto !important;}
.mx-auto {margin-left:auto !important; margin-right:auto !important;}

.ml-0 {margin-left:0 !important;}
.ml-5 {margin-left:5px !important;}
.ml-10 {margin-left:10px !important;}
.ml-15 {margin-left:15px !important;}
.ml-20 {margin-left:20px !important;}

.ml-1vw {margin-left: 1vw !important;}
.ml-2vw {margin-left: 2vw !important;}
.ml-3vw {margin-left: 3vw !important;}

.mr-1vw {margin-right: 1vw !important;}
.mr-2vw {margin-right: 2vw !important;}
.mr-3vw {margin-right: 3vw !important;}

.mb-1vh {margin-bottom: 1vh !important;}
.mb-2vh {margin-bottom: 2vh !important;}
.mb-3vh {margin-bottom: 3vh !important;}
.mb-4vh {margin-bottom: 4vh !important;}
.mb-5vh {margin-bottom: 5vh !important;}
.mb-6vh {margin-bottom: 6vh !important;}
.mb-7vh {margin-bottom: 7vh !important;}
.mb-8vh {margin-bottom: 8vh !important;}
.mb-9vh {margin-bottom: 9vh !important;}
.mb-10vh {margin-bottom: 10vh !important;}

.mb-1vw {margin-bottom: 1vw !important;}
.mb-2vw {margin-bottom: 2vw !important;}
.mb-3vw {margin-bottom: 3vw !important;}
.mb-4vw {margin-bottom: 4vw !important;}
.mb-5vw {margin-bottom: 5vw !important;}
.mb-6vw {margin-bottom: 6vw !important;}
.mb-7vw {margin-bottom: 7vw !important;}
.mb-8vw {margin-bottom: 8vw !important;}
.mb-9vw {margin-bottom: 9vw !important;}
.mb-10vw {margin-bottom: 10vw !important;}

.mb-1rem {margin-bottom: 1rem !important;}
.mb-2rem {margin-bottom: 2rem !important;}
.mb-3rem {margin-bottom: 3rem !important;}
.mb-4rem {margin-bottom: 4rem !important;}
.mb-5rem {margin-bottom: 5rem !important;}
.mb-6rem {margin-bottom: 6rem !important;}
.mb-7rem {margin-bottom: 7rem !important;}
.mb-8rem {margin-bottom: 8rem !important;}
.mb-9rem {margin-bottom: 9rem !important;}
.mb-10rem {margin-bottom: 10rem !important;}

.mt-1vh {margin-top: 1vh !important;}
.mt-2vh {margin-top: 2vh !important;}
.mt-3vh {margin-top: 3vh !important;}
.mt-4vh {margin-top: 4vh !important;}
.mt-5vh {margin-top: 5vh !important;}
.mt-6vh {margin-top: 6vh !important;}
.mt-7vh {margin-top: 7vh !important;}
.mt-8vh {margin-top: 8vh !important;}
.mt-9vh {margin-top: 9vh !important;}
.mt-10vh {margin-top: 10vh !important;}
.mt-11vh {margin-top: 11vh !important;}
.mt-12vh {margin-top: 12vh !important;}
.mt-13vh {margin-top: 13vh !important;}
.mt-14vh {margin-top: 14vh !important;}
.mt-15vh {margin-top: 15vh !important;}
.mt-16vh {margin-top: 16vh !important;}
.mt-17vh {margin-top: 17vh !important;}
.mt-18vh {margin-top: 18vh !important;}
.mt-19vh {margin-top: 19vh !important;}
.mt-20vh {margin-top: 20vh !important;}
.mt-21vh {margin-top: 21vh !important;}
.mt-22vh {margin-top: 22vh !important;}
.mt-23vh {margin-top: 23vh !important;}
.mt-24vh {margin-top: 24vh !important;}
.mt-25vh {margin-top: 25vh !important;}
.mt-26vh {margin-top: 26vh !important;}
.mt-27vh {margin-top: 27vh !important;}
.mt-28vh {margin-top: 28vh !important;}
.mt-29vh {margin-top: 29vh !important;}
.mt-30vh {margin-top: 30vh !important;}

.mt-1rem {margin-top: 1rem !important;}
.mt-2rem {margin-top: 2rem !important;}
.mt-3rem {margin-top: 3rem !important;}
.mt-4rem {margin-top: 4rem !important;}
.mt-5rem {margin-top: 5rem !important;}
.mt-6rem {margin-top: 6rem !important;}
.mt-7rem {margin-top: 7rem !important;}
.mt-8rem {margin-top: 8rem !important;}
.mt-9rem {margin-top: 9rem !important;}
.mt-10rem {margin-top: 10rem !important;}
.mt-11rem {margin-top: 11rem !important;}
.mt-12rem {margin-top: 12rem !important;}
.mt-13rem {margin-top: 13rem !important;}
.mt-14rem {margin-top: 14rem !important;}
.mt-15rem {margin-top: 15rem !important;}
.mt-16rem {margin-top: 16rem !important;}
.mt-17rem {margin-top: 17rem !important;}
.mt-18rem {margin-top: 18rem !important;}
.mt-19rem {margin-top: 19rem !important;}
.mt-20rem {margin-top: 20rem !important;}

.ml-1rem {margin-left: 1rem !important;}
.ml-2rem {margin-left: 2rem !important;}
.ml-3rem {margin-left: 3rem !important;}
.ml-4rem {margin-left: 4rem !important;}
.ml-5rem {margin-left: 5rem !important;}
.ml-6rem {margin-left: 6rem !important;}
.ml-7rem {margin-left: 7rem !important;}
.ml-8rem {margin-left: 8rem !important;}
.ml-9rem {margin-left: 9rem !important;}
.ml-10rem {margin-left: 10rem !important;}

.mr-1rem {margin-right: 1rem !important;}
.mr-2rem {margin-right: 2rem !important;}
.mr-3rem {margin-right: 3rem !important;}
.mr-4rem {margin-right: 4rem !important;}
.mr-5rem {margin-right: 5rem !important;}
.mr-6rem {margin-right: 6rem !important;}
.mr-7rem {margin-right: 7rem !important;}
.mr-8rem {margin-right: 8rem !important;}
.mr-9rem {margin-right: 9rem !important;}
.mr-10rem {margin-right: 10rem !important;}

.mt-1vw {margin-top: 1vw !important;}
.mt-2vw {margin-top: 2vw !important;}
.mt-3vw {margin-top: 3vw !important;}
.mt-4vw {margin-top: 4vw !important;}
.mt-5vw {margin-top: 5vw !important;}
.mt-6vw {margin-top: 6vw !important;}
.mt-7vw {margin-top: 7vw !important;}
.mt-8vw {margin-top: 8vw !important;}
.mt-9vw {margin-top: 9vw !important;}
.mt-10vw {margin-top: 10vw !important;}

.pb-1vh {padding-bottom: 1vh !important;}
.pb-2vh {padding-bottom: 2vh !important;}
.pb-3vh {padding-bottom: 3vh !important;}
.pb-4vh {padding-bottom: 4vh !important;}
.pb-5vh {padding-bottom: 5vh !important;}
.pb-6vh {padding-bottom: 6vh !important;}
.pb-7vh {padding-bottom: 7vh !important;}
.pb-8vh {padding-bottom: 8vh !important;}
.pb-9vh {padding-bottom: 9vh !important;}
.pb-10vh {padding-bottom: 10vh !important;}
.pb-11vh {padding-bottom: 11vh !important;}

.pt-1vh {padding-top: 11vh !important;}
.pt-2vh {padding-top: 12vh !important;}
.pt-3vh {padding-top: 13vh !important;}
.pt-4vh {padding-top: 14vh !important;}
.pt-5vh {padding-top: 15vh !important;}
.pt-6vh {padding-top: 16vh !important;}
.pt-7vh {padding-top: 17vh !important;}
.pt-8vh {padding-top: 18vh !important;}
.pt-9vh {padding-top: 19vh !important;}
.pt-10vh {padding-top: 10vh !important;}

.font-pretend__light { font-family: 'Pretendard', sans-serif; font-weight: 100; }
.font-pretend__regular { font-family: 'Pretendard', sans-serif; font-weight: 300; }
.font-pretend__medium { font-family: 'Pretendard', sans-serif; font-weight: 500; }
.font-pretend__semiBold { font-family: 'Pretendard', sans-serif; font-weight: 600; }
.font-pretend__bold { font-family: 'Pretendard', sans-serif; font-weight: 700; }
.font-pretend__extraBold { font-family: 'Pretendard', sans-serif; font-weight: 800; }
.font-gangwonEdu { font-family: 'GangwonEduPower', sans-serif; font-weight: 900; font-style: italic; }

.no-padding { padding: 0 !important; }