@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url('/plugin/font/Pretendard/woff2/Pretendard-Black.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Black.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url('/plugin/font/Pretendard/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url('/plugin/font/Pretendard/woff2/Pretendard-Bold.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url('/plugin/font/Pretendard/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url('/plugin/font/Pretendard/woff2/Pretendard-Medium.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url('/plugin/font/Pretendard/woff2/Pretendard-Regular.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url('/plugin/font/Pretendard/woff2/Pretendard-Light.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Light.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url('/plugin/font/Pretendard/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url('/plugin/font/Pretendard/woff2/Pretendard-Thin.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Thin.woff') format('woff');
}



:root {
    --max-w: 1400px;
    --pad: 2rem;
    --hdr-h: 60px;
    --c-bg-init: transparent;    /* 초기 헤더 배경을 투명으로 */
    --c-bg-scrolled: #ffffff;    /* 스크롤 후 헤더 배경 */
    --c-txt: #333;
    --c-primary: #3498db;
    --c-filter-bg: #f0f4f8;
}
*,
*::before,*::after {
    box-sizing: border-box;
    margin:0; padding:0;
}
html#stnHtml {
    scroll-behavior: smooth;
}
body {
    font-family: 'Pretendard', sans-serif;
    color: var(--c-txt);
    background: linear-gradient( to right, #3e77ee, #41a8c6 );
    line-height: 1.5;
}
.container {
    width:100%;
    max-width: var(--max-w);
    margin:0 auto;
    padding: 0 var(--pad);
}


/* ────────────────────────────────────────────────────────────
   2. 대형 모니터 / 데스크탑 — max-width: 1400px
───────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
    html#stnHtml {
        font-size: 19px !important;
    }
    .container {
        max-width: 1320px;
    }
    /* ... */
}

/* ────────────────────────────────────────────────────────────
   3. 작은 데스크탑 / 태블릿 가로 — max-width: 1200px
───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    html#stnHtml {
        font-size: 18px !important;
    }
    .container {
        max-width: 1140px;
    }
    /* ... */
}

/* ────────────────────────────────────────────────────────────
   4. 태블릿 세로 — max-width: 992px
───────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    html#stnHtml {
        font-size: 16px !important;
    }
    .container {
        max-width: 720px;
    }
    /* ... */
}

/* ────────────────────────────────────────────────────────────
   6. Galaxy Z Fold4 Unfolded 대응 — max-width: 820px
   (뷰포트 너비 약 806px) :contentReference[oaicite:0]{index=0}
───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    /* Foldable 기기용 특별 레이아웃 */
    /* 예: 내부 디스플레이 펼친 상태의 Fold4 대응 */
    html#stnHtml {
        font-size: 16px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   5. 모바일 가로 — max-width: 768px
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html#stnHtml {
        font-size: 14px !important;
    }
    .container {
        max-width: 540px;
    }
    /* ... */
}

/* ────────────────────────────────────────────────────────────
   8. 모바일 세로 / 초소형 디바이스 — max-width: 576px
───────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    html#stnHtml {
        font-size: 13px !important;
    }
    .container {
        width: 100%;
    }
    /* ... */
}

/* ────────────────────────────────────────────────────────────
   7. Galaxy Z Fold4 Folded 대응 — max-width: 420px
   (뷰포트 너비 약 402px) :contentReference[oaicite:1]{index=1}
───────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    /* Fold4 접힌 상태 전용 스타일 */
    html#stnHtml {
        font-size: 12px !important;
    }
}


input[type=text],
input[type=password],
select { box-sizing: border-box; transition: all 0.3s; }
textarea { display: block; width: 100%; padding: 15px; background: #FFF; border: 1px solid #DDDFE1; border-radius: 10px; box-sizing: border-box; word-break: break-all; resize: none; transition: all 0.3s; }

input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus { border-color: #4E5052; outline: none;}


input[type=text],
input[type=password],
select { box-sizing: border-box; transition: all 0.3s; }
textarea { display: block; width: 100%; padding: 15px; background: #FFF; border: 1px solid #DDDFE1; border-radius: 10px; box-sizing: border-box; word-break: break-all; resize: none; transition: all 0.3s; }

input::placeholder,
textarea::placeholder {
    font-family: var(--FontFamily);
    font-size: .875rem;
}

figure { padding:0 0 0 0; margin:0 0 0 0; position: relative; }
.stnInp { padding:10px 15px; border:1px solid #DDDFE1; font-size: .875rem; font-family: var(--FontFamily); border-radius: 0.25rem; }
textarea.textarea { font-size: .875rem; font-family: 'Pretendard';}
h2.swal2-title { font-family: var(--FontFamily); font-size: 1.5rem; }
div.swal2-html-container {
    font-family: var(--FontFamily);
    word-wrap: break-word;
    word-break: break-all;
}
div.swal2-validation-message {
    font-family: var(--FontFamily);
    color:red;
    font-weight: 400;
}
input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus { border-color: #333; outline: none;}
select.select {
    font-family: var(--FontFamily);
    cursor: pointer;
    min-width: 150px;
    padding: 10px 60px 10px 10px; /* 여백으로 높이 설정 */
    font-family: inherit;  /* 폰트 상속 */
    background: url(https://t1.daumcdn.net/depo/datatrend/ico_check.png) no-repeat calc(100% - 10px) 50%; /* 네이티브 화살표 대체 */
    background-size: 12px;
    border: 1px solid #DDDFE1;
    border-radius: 10px 10px; /* iOS 둥근모서리 제거 */
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s;
    font-size: .875rem;
}
select option {
    font-size:.9rem; padding:10px 0; margin:10px 0; line-height: 2rem;
}

img.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 100%;

}
#back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;              /* 기본 여백 */
    width: 48px;
    height: 48px;
    background: #3e77ee;       /* 버튼 배경색 */
    color: #fff;
    font-size: 24px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    display: none;             /* 스크롤 시에만 표시 */
    z-index: 1000;
    transition: bottom 0.2s;   /* 푸터 겹칠 때 부드럽게 이동 */
}
#back-to-top:hover {
    background: #2d5dbb;
}
.mobile-menu {
    display: none;
}