@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');
}

@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

/* Light - 300 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* Regular - 400 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Medium - 500 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* Bold - 700 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Black - 900 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

:root {
    --FontFamily            : NotoSansKR, sans-serif;
    --FontFamily2           : 'Pretendard', sans-serif;
    --max-width              : 1300px;
    --vw-min: 360;
    --vw-max: 1280;
    --bp: calc((100vw - (var(--vw-min)*1px)) / (var(--vw-max) - var(--vw-min)));
}
html, body {
    font-size:16px;
    height: 100%;
    font-weight: 400;
    font-family: var(--FontFamily);
}

body#stnBody {
    font-size:16px;
    font-size: clamp(15px, calc(15px + (18 - 15) * var(--bp)), 18px);
    line-height: 1.55;
    padding:0 0 0 0;
    margin:0 0 0 0;
    width:100%;
    height:100vh;
}

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; font-family:inherit; }
input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus { border-color: #135dba; outline: none;}
input::placeholder,
textarea::placeholder {
    font-family: var(--FontFamily);
    font-weight: 400;
    color:#999;
}
input:focus::placeholder {
    color:#333;
}

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

.stnInp { padding:0 .5rem; height: 2rem; border:1px solid #DDDFE1; font-family: var(--FontFamily); border-radius: 10px 10px; }
.stnEstimateInpBox {
    padding:.5rem 1rem; margin:1rem 0 0 0;
}
.stnEstimateInpBox > input.stnInp {
    padding:0 .5rem; height: 3rem; border:1px solid #DDDFE1; font-family: var(--FontFamily); border-radius: 10px 10px;
}
input.stnInp[readonly]:hover,
input.stnInp[readonly] {
    color: #333;
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    border-color: #DDDFE1;
}

.stnInp.required {
    border:1px solid red;
    position: relative;
}
.stnInp.required:after {
    content: '';
    width:10px;
    height:100%;
    position: absolute;
    top: 0;
    right:0;
}
input[type=text].required:focus,
input[type=password].required:focus,
select.required:focus,
textarea.required:focus { border-color:red; outline: none;}



.inp100 { width:100px; }
.inp200 { width:200px; }
.inp300 { width:300px; }
.inp500 { width:500px; }
.inp00 { width:100%; }
#loadingOverlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loadingBar {
    width: 50%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}

.loadingBar::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 30%;
    background: #3498db;
    animation: loadingMove 1.5s infinite ease-in-out;
    border-radius: 4px;
}

@keyframes loadingMove {
    0% { left: -30%; }
    50% { left: 50%; }
    100% { left: 100%; }
}

.fs-10-12{ font-size: clamp(10px, calc(10px + (16 - 12) * var(--bp)), 12px); }
.fs-12-16{ font-size: clamp(12px, calc(12px + (16 - 12) * var(--bp)), 16px); }
.fs-14-18{ font-size: clamp(14px, calc(14px + (18 - 14) * var(--bp)), 18px); }
.fs-16-22{ font-size: clamp(16px, calc(16px + (22 - 16) * var(--bp)), 22px); }
.fs-18-24{ font-size: clamp(18px, calc(18px + (24 - 18) * var(--bp)), 24px); }
.fs-20-28{ font-size: clamp(20px, calc(20px + (28 - 20) * var(--bp)), 28px); }


.h1{ font-size: clamp(28px, calc(28px + (48 - 28) * var(--bp)), 48px); line-height:1.2; }
.h2{ font-size: clamp(24px, calc(24px + (36 - 24) * var(--bp)), 36px); line-height:1.25; }
.h3{ font-size: clamp(20px, calc(20px + (28 - 20) * var(--bp)), 28px); line-height:1.3; }

select.select {
    cursor: pointer;
    min-width: 150px;
    padding: 5px 60px 5px 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 #ccc;
    border-radius: 4px 4px; /* iOS 둥근모서리 제거 */
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s;
    font-size: 14px;
}
select.select option {
    color: #333;
    background-color: #fff;
}
select.select:focus{ border-color: #135dba; outline: none;}


#detailModal {
    font-family: var(--FontFamily);
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}
#detailModal .modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 700px;
    position: relative;
}
#detailModal .close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
}


/* 툴바와 에디터 전체에 적용 */
.ql-toolbar.ql-snow,
.ql-container.ql-snow,
.ql-container .ql-editor {
    font-family: var(--FontFamily);
    font-size: 14px;       /* 필요시 */
    line-height: 1.6;      /* 필요시 */
}

/* placeholder도 같은 폰트 */
.ql-editor.ql-blank::before{
    font-family: var(--FontFamily);
}

/* 코드 블록은 가독성 위해 모노스페이스 유지 */
.ql-editor pre,
.ql-editor code{
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

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

.ql-align-right { text-align: right }
.ql-align-justify { text-align: justify }
.ql-align-center,
.txtCenter { text-align:center; }
.txtLeft { text-align:left; }


footer#stnFooterWrap {
    margin-top: 4rem;
}
footer#stnFooterWrap > section.stnFooterBg {
    background: #0C1632;
}
footer#stnFooterWrap article.stnFooterInfo {
    padding:.5rem 2rem;
    max-width: var(--max-width);
    margin:0 auto;
}
footer#stnFooterWrap article.stnFooterInfo > div.stnFooterInfoLink {
    font-family: var(--FontFamily); display: flex; gap: 1rem;
}
footer#stnFooterWrap article.stnFooterInfo > div.stnFooterInfoLink > a {
    color:#FFF; text-decoration:none; font-size:.875rem; font-weight:400;
}
footer#stnFooterWrap > section.stnFooterBg2 {
    background: #f9f9f9;
}
footer#stnFooterWrap > section.stnFooterBg2 h3,
footer#stnFooterWrap > section.stnFooterBg2 h6,
footer#stnFooterWrap > section.stnFooterBg2 p { padding:0 0 0 0; margin:0 0 0 0; }
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo {
    padding:2rem 2rem;
    max-width: var(--max-width);
    margin:0 auto;
    display: grid; grid-template-columns:repeat(3,minmax(0,1fr))
}
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo > article {
    color:#333; font-size:.875rem;
}
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo > article h6,
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo > article a {
    color:#333; text-decoration:none; font-size:.875rem;
}
footer#stnFooterWrap > section.stnFooterBg2 h3 { padding-bottom:.5rem; }
footer#stnFooterWrap > section.stnFooterBg2 div.form-group {
    display: flex; gap: 1rem;
}
footer#stnFooterWrap > section.stnFooterBg2 div.form-group > label { font-weight: 500; }
footer#stnFooterWrap > section.stnFooterBg3 {
    background: #0b2153; color: #FFF; font-size:.875rem;
}
footer#stnFooterWrap > section.stnFooterBg3 > article {
    padding:0 2rem;
    max-width: var(--max-width);
    margin:0 auto;
}
footer#stnFooterWrap > section.stnFooterBg3 > article.info {
    padding-top:1rem; padding-bottom:1rem; font-size:.875rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
footer#stnFooterWrap > section.stnFooterBg3 > article.copy {
    padding-bottom:1rem; font-size:.75rem;
}

#goTopBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
    z-index: 999;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #333;
    color: white;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 1rem 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#goTopBtn:hover {
    background-color: #555;
}
button#stnEstimateBtn {
    min-width:185px; font-weight: 400; margin-top: 10px;
}
img.escrow {
    height:15px; margin-top: 10px;
}

.pagination {
    text-align: center;
    width:100%;
    padding:50px 0;
    display: inline-block;
}

.pagination a {
    display: inline-block;
    line-height: 2rem;
    min-width: 40px;
    border:1px solid #a8a8a8;
    color: black;
    font-size:.8rem;
    text-decoration: none;
}

.pagination a.active {
    background-color: #eaeaea;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.tooltip {
    position: relative;
    display: block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size:.75rem;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* 툴팁 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 화살표 기본 스타일 설정 시작 */

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 5px;
}

/* 툴팁 화살표 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 방향 설정 시작 */

/* 왼쪽 툴팁 시작 */

.tooltip .tooltip-left {
    top: -5px;
    right: 105%;
}

.tooltip .tooltip-left::after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent black;
}

/* 왼쪽 툴팁 끝 */

/* 오른쪽 툴팁 시작 */

.tooltip .tooltip-right {
    top: -5px;
    left: 105%;
}

.tooltip .tooltip-right::after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-color: transparent black transparent transparent;
}

/* 오른쪽 툴팁 끝 */

/* 위쪽 툴팁 시작 */

.tooltip .tooltip-top {
    width: 120px;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltip-top::after {
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: black transparent transparent transparent;
}

/* 아래쪽 툴팁 시작 */

.tooltip .tooltip-bottom {
    width: 120px;
    top: 120%;
    left: 50%;
    margin-left: -60px;
}


.tooltip .tooltip-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent black transparent;
}