@charset "utf-8";
/*@import url('font.css');*/
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/earlyaccess/Pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


/* Reset */
html {overflow-y:scroll}
body {margin:0;padding:0;height:100%;background-color: #FFF; font-family: 'Pretendard', sans-serif;font-weight:400}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, dl, dt, dd, p {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
header ul, nav ul, footer ul {margin:0;padding:0;list-style:none}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type=submit]{cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {-webkit-appearance:none;}
textarea, select {font-size:1em;font-family:dotum}
textarea {border-radius:0;-webkit-appearance:none}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color: #000; text-decoration:none}
a:link {color: #000; text-decoration:none}
ul,li{list-style:none;padding:0;margin:0;}

ol {padding: 0;}
.clear {clear:both}

input, textarea, select {font-family: 'Pretendard', sans-serif;}

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

:root {
    --point_color: #0d4169;
	--point_orange: #e86608;
    --border_color: #e5e5e5;
    --bg_light: #fafafa;
    --text_dark: #111111;
    --text_gray: #888888;
}
/*셀렉트 커스텀*/
select {
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none; /* 화살표 없애기 공통*/
    background-image: url('../img/ico_arrow6.png');
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 3.3333vw;
}

select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }

/*가변형 팝업*/
.pop-layer .pop-container { padding: 4.1667vw; box-sizing: border-box; }
/*.pop-layer div.ctxt { font-size: 13px; font-weight: 400; text-align: center; color: #222222; }*/
.pop-layer { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 60%; height: auto; background: #fff; z-index: 10; }
.dim-layer { display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.dim-layer_on { display: block; }
.dim-layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50); }
.dim-layer .pop-layer { display: block; }

.dim-layer h2 { font-size: 3.6111vw; font-weight: 500; color: #555; text-align: center; margin-bottom: 5.5556vw; }
.dim-layer input[type="button"] { display: block; width: 27.7778vw; height: 6.9444vw; left: 0; right: 0; margin: auto; background: #284889; border: 0.2778vw solid #284889; box-sizing: border-box; font-size: 3.3333vw; font-weight: 400; color: #fff; }
.dim-layer input[type="button"]:active { background: #fff; color: #284889; }


/*header*/
/*header*/
#header-sub7 {
    position: fixed;
    display: flex;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #fff;
    box-sizing: border-box;
}

#header-sub7 h2 {
    position: absolute;
    width: 24px;
    top: 0;
    left: 16px;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

#header-sub7 h2 img {
    width: 100%;
}

#header-sub7 h1 {
    position: absolute;
    width: 180px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 18px;
    font-weight: 400;
    color: #12416d;
    text-align: center;
    font-family: Pretendard;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
}

/* 중앙 로고 */
/* 중앙 로고 */
#header h1 {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 150px;
    text-align: center;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header h1 img {
    height: auto;
    max-height: 50px;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

#header .alarm {
    width: 24px;
}

#header h2 .alarm_push {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 6px;
    height: 6px;
    background-color: #12416d;
    border-radius: 50%;
}

.header-1 h2 {
    position: static !important;
}

#header h2 {
    position: absolute;
    width: 24px;
    top: 0;
    left: 16px;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
}

#header h2 img {
    width: 100%;
}

#header h3 {
    position: absolute;
    width: 24px;
    top: 0;
    right: 16px;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
}

#header h3 img {
    width: 100%;
}

#header h4 {
    position: absolute;
    top: 0;
    right: 16px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    font-family: Pretendard;
    line-height: 60px;
    margin: 0;
}

#header h4 img {
    width: 100%;
}
/* 사이드바 전체 컨테이너 */
.aside-menu {
    position: fixed; 
    width: 320px; 
    height: 100%; 
    left: -340px; 
    top: 0; 
    z-index: 110; 
    background: #ffffff; 
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    transform: translateX(0); 
}

/* 상단 네비게이션 영역 */
.aside-menu .profile-area {
    width: 100%;
    padding: 20px 24px;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
}

.aside-menu .top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 닫기 (X) 버튼 */
.aside-menu .close-btn {
    font-size: 24px;
    font-weight: 300;
    color: #222222;
    cursor: pointer;
    line-height: 1;
}

/* 상단 텍스트 링크 */
.aside-menu .top-links {
    font-size: 13px;
    font-weight: 400;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aside-menu .top-links a {
    color: #333333;
    text-decoration: none;
}

.aside-menu .top-links a:hover {
    color: #12416d;
}

.aside-menu .top-links .bar {
    color: #d1d5db;
    font-size: 11px;
}

/* 하단 메뉴 리스트 영역 */
.aside-menu ul {
    overflow-y: auto; 
    height: calc(100% - 70px); 
    padding: 10px 0; 
    margin: 0;
    list-style: none;
}

/* 개별 메뉴 아이템 */
.aside-menu li { 
    position: relative;
    width: 100%; 
    height: 56px; 
    line-height: 56px; 
    padding: 0 24px; 
    box-sizing: border-box; 
    font-size: 16px; 
    font-weight: 600; 
    color: #111111; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aside-menu li:hover {
    background-color: #fcfcfc;
}

/* 우측 화살표(>) 기호 스타일 */
.aside-menu li .arrow-icon {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    font-family: monospace; /* 꺾쇠 기호가 일정한 간격으로 깔끔하게 보이도록 설정 */
}
/* bottom */

.page_bottom{ width: 100%; font-size: 3.3333vw; color: #B4B3B9; margin-top: 20vw; background-color: #F3F3F3;}
.page_bottom ul li{border-bottom: none !important; margin-bottom: 0.5556vw; padding:2.2222vw 5.0000vw !important;}
.page_bottom ul li button{background: none; border: 0; font-size: 3.3333vw; color: #B4B3B9;}
.page_bottom ul li:last-child{margin-top: 3.6111vw; }

.main .page_bottom {margin-top: 0;}



/*intro*/
#intro { position: relative; width: 100%; height: 100%; background: url('../img/intro1.png') center top no-repeat; background-color: #284889; background-size: cover; }



/*bxslider*/


#start { 
    width: 100%; 
    height: 100vh; 
    position: relative; 
}

#start .main_vis, #start .bx-wrapper, #start .bx-viewport { 
    height: 100% !important; 
}

#start .bxslider { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
}

#start .bxslider li { 
    position: relative; 
    height: 100%; 
}

/* 배경 이미지: 화면에 꽉 차게 잘림 (여백 없이) */
#start .bxslider li img { 
    width: 100%; 
    height: 100vh; /* height를 100vh로 변경하여 object-fit이 작동하게 함 */
    object-fit: cover; 
    display: block; 
}

#start .bxslider li::after {
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    z-index: 5;
}


/* ==============================
   2. 중앙 텍스트 영역 (새로 추가)
   ============================== */
#start .intro-txt {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 100%; 
    text-align: center; 
    color: #ffffff; 
    z-index: 10; 
    padding: 0 20px; 
    box-sizing: border-box;
}

#start .intro-txt h2 { 
    font-size: 30px; 
    font-weight: 800; 
    margin-bottom: 20px; 
    line-height: 1.2;
}

#start .intro-txt p { 
    font-size: 20px; 
    line-height: 1.5; 
    font-weight: 500; 
    margin: 0;
}
@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

#start .bxslider li img { 
    width: 100%; 
    height: 100vh; 
    object-fit: cover; 
    display: block; 
    animation: slowZoom 8s linear infinite alternate; 
}
#start #bx-pager { 
    position: absolute; 
    bottom: 120px; 
    left: 0; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px;
    z-index: 999;
}

#start #bx-pager a { 
    display: block; 
    width: 32px; 
    height: 4px; 
    background: var(--border_color); 
    margin: 0; 
    text-indent: -9999px; 
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease; 
    opacity: 0.4;
    border-radius: 2px;
}
#start #bx-pager a.active { 
    width: 64px; 
    background: var(--point_color); 
    opacity: 1;
}


/* ==============================
   4. SKIP 버튼
   ============================== */
#start .skip-btn {
    position: absolute; 
    bottom: 40px; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100px; 
    font-size: 16px; 
    font-weight: 600; 
    color: var(--bg_light); 
    text-align: center; 
    z-index: 999; /* 페이징과 동일 레벨 */
    cursor: pointer;
    letter-spacing: 1px;
    font-family: 'Pretendard', sans-serif;
}


/* 하단 푸터(Footer) 스타일 */
.footer-area {
    background-color: #f5f5f5; 
    padding: 30px 20px 105px; 
    color: #888;
    font-size: 13px; 
    line-height: 1.6;
    border-top: 1px solid #eaeaea;
}
.footer-area.style2{
	padding: 30px 20px 30px;
}

.footer-area .footer-info {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.footer-area .footer-info li {
    margin-bottom: 4px;
    word-break: keep-all; 
}

/* 고객센터 번호 살짝 강조 */
.footer-area .footer-info li strong {
    color: #555;
}

.footer-area .footer-links {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.footer-area .footer-links a {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
.footer-area .footer-links a strong {
    color: #333;
    font-weight: 600;
}

.footer-area .divider {
    color: #ccc;
    font-size: 11px;
    margin: 0 8px;
}



#login { 
    width: 100%; 
    min-height: 100vh; 
    background-color: #ffffff; 
    padding-bottom: 0; 
    box-sizing: border-box; 
    font-family: 'Pretendard', sans-serif; 
	overflow-x: hidden;
}

#login .wrap { 
    width: 100%; 
    max-width: 450px; 
    margin: 0 auto;
	padding: 60px 20px 50px;
	box-sizing:border-box;

}

#login ul { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 40px; 
	padding: 0;
	margin-top: 0;	
}
#login ul li { 
    display: flex; 
    align-items: center;
    width: 100%; 
    height: 45px; 
    padding: 0 5px; 
    border-bottom: 1px solid #e0e0e0; 
    box-sizing: border-box; 
    transition: all 0.3s ease;
}
#login ul li:focus-within {
    border-bottom: 2px solid #0d4169; 
}

#login ul li label { 
    width: 80px; 
    font-size: 13px; 
    font-weight: 600; 
    color: #555555; 
	white-space: nowrap; 
    flex-shrink: 0; 
    word-break: keep-all;
}
#login ul li input { 
    flex: 1; 
    height: 100%; 
    background: transparent; 
    border: 0; 
    color: #222222; 
    font-size: 16px; 
    outline: none; 
}

/* 로그인 버튼 */
#login input[type="submit"] { 
    width: 100%; 
    height: 54px; 
    background: #1a3952; 
    border: none; 
    border-radius: 27px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #ffffff; 
    margin-bottom: 40px; 
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(26, 57, 82, 0.2); 
    transition: transform 0.2s;
}
#login input[type="submit"]:active { 
    transform: scale(0.97); 
}
#login h1 { 
    width: 180px; 
    margin: 0 auto 40px; 
}
#login h1 img { 
    width: 100%; 
    display: block; 
}

/* 소셜 로그인 버튼 영역 */
#login ol {
	display: none;

    align-items: center; 
    justify-content: center; 
    gap: 20px; 
    width: 100%;
    margin-bottom: 40px;
}
#login ol li {
    width: 45px; 
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
#login ol li a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    margin: 0 !important; 
}
#login ol li img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}

/* 애플 로그인 버튼 전용 중앙 정렬 */
#login ol li .signin-button { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
	cursor: pointer;
}
/* 하단 링크 (회원가입, 비밀번호 찾기) */
#login h2 { text-align: center; margin: 0; }

/* 회원가입을 로그인 버튼과 똑같은 둥근 서브 버튼으로 변신 */
#login .join_btn { margin-bottom: 25px; }
#login .join_btn a { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: 54px; 
    border: 1px solid #e0e0e0;
    border-radius: 27px; /* 캡슐 형태 유지 */
    font-size: 16px; 
    font-weight: 600; 
    color: #222222; 
    text-decoration: none; 
    box-sizing: border-box;
    transition: background 0.2s;
}
#login .join_btn a:active { background: #f9f9f9; } /* 터치 시 미세한 피드백 */

/* 비밀번호 찾기는 가장 아래에 심플하게 텍스트로 배치 */
#login h2:not(.join_btn) a { 
    font-size: 13px; 
    color: #999999; 
    text-decoration: underline; 
    text-underline-offset: 4px; 
    padding: 10px;
}

/* --------------------------------------
   join
-------------------------------------- */
#join { 
    width: 100%; 
    min-height: 100vh; 
    background-color: #ffffff; 
    padding-bottom: 50px; 
    box-sizing: border-box; 
    font-family: 'Pretendard', sans-serif; 
    position: relative;
}

#join .wrap { 
    width: 100%; 
    max-width: 450px;
    margin: 0 auto; 
    padding: 110px 20px 0; 
    box-sizing: border-box; 
}

#join .back-bt { 
    position: absolute; 
    top: 25px; 
    left: 20px; 
    width: 24px; 
    cursor: pointer; 
    z-index: 10; 
}
#join .back-bt img { width: 100%; }

#join h1 { 
    width: 180px; 
    margin: 0 auto 40px; 
    text-align: center; 
}
#join h1 img { width: 100%; display: block; }

#join .number-recevie { margin-bottom: 30px; }
#join .number-recevie input[type="button"] {
    width: 100%; 
    height: 54px; 
    background: #1a3952; 
    border: none; 
    border-radius: 27px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #ffffff; 
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(26, 57, 82, 0.2); 
    transition: all 0.2s ease-in-out;
}
#join .number-recevie input[type="button"]:active { 
    transform: scale(0.96) translateY(2px); 
    box-shadow: 0 2px 5px rgba(26, 57, 82, 0.2);
}

#join ul { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}
#join ul li { 
    display: flex; 
    align-items: center; 
    position: relative;
    width: 100%; 
    height: 52px; 
    padding: 0 15px; 
    background-color: #f4f6f8; 
    border-radius: 14px;
    border: 2px solid transparent; 
    box-sizing: border-box; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
#join ul li:focus-within { 
    background-color: #ffffff;
    border-color: #1a3952;
    box-shadow: 0 6px 16px rgba(26, 57, 82, 0.08);
    transform: translateY(-3px); 
}

#join ul li label { 
    width: 90px; 
    font-size: 14px; 
    font-weight: 600; 
    color: #555555; 
	white-space: nowrap;    
    flex-shrink: 0;           
    word-break: keep-all;
}
#join ul li input { 
    flex: 1; 
    height: 100%; 
    background: transparent; 
    border: 0; 
    color: #222222; 
    font-size: 15px; 
    outline: none; 
	min-width: 0;           
    box-sizing: border-box;  
}
#join input::placeholder { color: #b0b8c1; font-weight: 400; }

/* ★ 재미 요소: 필수 입력 빨간 별표가 숨 쉬듯 콩콩 뜀 */
#join ul li span { 
    color: #ff4757; 
    font-size: 16px; 
    font-weight: bold; 
    margin-left: 4px; 
    animation: bounce 2s infinite; 
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* 3. 우편번호 검색 버튼 (인풋 박스 안에 귀엽게 쏙!) */
#join ul li #found { 
    position: absolute; 
    right: 6px; 
    top: 50%; 
    transform: translateY(-50%); 
    background-color: #222222; 
    color: #ffffff; 
    border: none; 
    border-radius: 10px; /* 동글동글한 작은 버튼 */
    padding: 7px 14px; 
    font-size: 12px; 
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
#join ul li #found:hover { background-color: #444444; }


/* 4. 인증번호 입력창 (기본 숨김) */
#join .citation { 
    display: none; 
    position: relative;
    width: 100%; 
    height: 52px;
    margin-bottom: 30px; 
}
#join .citation input { 
    width: 100%; height: 100%; 
    background: #f4f6f8; border-radius: 14px; border: 2px solid transparent;
    padding: 0 80px 0 15px; box-sizing: border-box; outline: none; font-size: 15px;
}
#join .citation input:focus { background: #fff; border-color: #1a3952; }
#join .citation #number-ckeck { 
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); 
    background-color: #1a3952; color: #fff; border: none; border-radius: 10px; 
    padding: 7px 14px; font-size: 12px; font-weight: 600;
}

#join div.terms { 
    width: 100%; 
    margin: 35px 0 30px; 
    background: #f8f9fa; 
    padding: 20px; 
    border-radius: 16px;
    box-sizing: border-box;
}
#join div.terms div { 
    display: flex; 
    align-items: center; 
    margin-bottom: 12px; 
}
#join div.terms div:last-child { margin-bottom: 0; }

#join div.terms input[type="checkbox"] { 
    width: 22px; 
    height: 22px; 
    margin-right: 10px; 
    accent-color: #1a3952; 
    cursor: pointer;
}

#join div.terms label { 
    flex: 1; 
    font-weight: 500;
    font-size: 14px;
    color: #444444;
    cursor: pointer; 
    margin: 0; 
    padding: 0;
    background: transparent;
}

#join div.terms a { 
    color: #666666; 
    background: #e9ecef; 
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none; 
    font-size: 12px; 
}

#join input[type="submit"] {
    width: 100%; 
    height: 56px; 
    background: var(--point_color);
    border: none; 
    border-radius: 28px; 
    font-size: 16px; 
    font-weight: bold; 
    color: #ffffff; 
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(26, 57, 82, 0.25); 
    transition: all 0.2s;
}
#join input[type="submit"]:active { 
    transform: translateY(3px) scale(0.97); 
    box-shadow: 0 3px 10px rgba(26, 57, 82, 0.2); 
}
/* ==========================================================
   우편번호 검색 팝업 (모바일 최적화 반응형 팝업 스타일)
   ========================================================== */

#join .addr_pop {
    display: none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    height: auto !important;      
    max-height: 85vh !important;   /
    z-index: 99999;
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    flex-direction: column;
}

#join .addr_pop[style*="display: block"] {
    display: flex !important;
}

#join .addr_pop .addr_close {
    text-align: right;
    padding-bottom: 10px;
    flex-shrink: 0;
}
#join .addr_pop .addr_close img {
    width: 24px;
    cursor: pointer;
}

/* 내부 알맹이 박스도 높이 고정 풀기 */
#join .addr_pop #addr_pop_wrap {
    border: none;
    width: 100%;
    height: 450px !important;    
    min-height: 350px !important;
    overflow: hidden;
    border-radius: 8px;
}

/* 1. 우편번호 감싸는 div를 li 영역 전체로 확장 및 수직 중앙 정렬 */
#join ul li.address > div {
    flex: 1;
    height: 100%;
    align-items: center; /* 내부 input과 버튼 수직 중앙 정렬 */
}

/* 2. input 태그 세로 정렬 기준 유지 */
#join ul li.address input {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 3. 검색 버튼 디자인 및 우측 밀착 */
#join ul li.address .btn_zipcode {
    margin-left: auto; /* 버튼을 우측 끝으로 배치 */
    background-color: #222222;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}


/* 전체 페이지 배경 및 기본 레이아웃 */
#terms {
    width: 100%;
    min-height: 100dvh; 
    background-color: #ffffff;
    padding: 90px 20px 60px; 
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
}
#terms .wrap h1 {
    font-size: 24px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #111111;
    letter-spacing: -0.5px;
}
/* 본문 내용을 감싸는 박스 */
#terms .wrap {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    color: #333333;
    font-size: 15px;
    line-height: 1.9;
    word-break: keep-all;
}

#terms .wrap p{line-height: 1.6 !important;}
/*메인*/
#main-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
		padding-top: 60px;
}

#main-banner .banner_wrap {
    position: relative;
    width: 100%;

}
#main-banner .banner_wrap {
    position: relative;
    width: 100%;
    height:50vh; 
}

#main-banner .banner_wrap img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block;
}
#main-banner .banner_wrap img {
    width: 100%;
    height: auto;
    display: block;
}

#main-banner .banner_wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15); 
}
#main-banner .banner_txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center; 
    color: #ffffff;
    z-index: 2;
    padding: 0 20px;
    box-sizing: border-box;

}

#main-banner .banner_txt .sub_txt {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px;
    opacity: 0.85;
    letter-spacing: 1px;
}

#main-banner .banner_txt .main_action {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
    line-height: 1.4;
}

#main-banner .banner_txt h2 {
    font-size: 38px; 
    font-weight: 800;
    letter-spacing: -1px;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* 1. 애니메이션 키프레임 정의 (서브 텍스트용) */
@keyframes slideFadeUp {
    0% { 
        opacity: 0; 
        transform: translateY(40px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 2. 애니메이션 키프레임 정의 (메인 타이틀용 - 약간의 텐션과 블러 해제 효과 포함) */
@keyframes titlePop {
    0% { 
        opacity: 0; 
        transform: translateY(40px) scale(0.9); 
        filter: blur(4px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
        filter: blur(0); 
    }
}

/* 3. 텍스트 요소 초기 상태 숨김 및 애니메이션 유지 설정 */
#main-banner .banner_txt .sub_txt,
#main-banner .banner_txt .main_action,
#main-banner .banner_txt h2 {
    opacity: 0; 
    animation-fill-mode: forwards; /* 애니메이션 종료 후 최종 프레임(100%) 상태 유지 */
}

/* 4. 각 요소별 애니메이션 할당 및 지연(Delay) 시간 차등 적용 */
#main-banner .banner_txt .sub_txt {
    /* 0.2초 후 0.8초 동안 실행 */
    animation: slideFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}

#main-banner .banner_txt .main_action {
    /* 0.4초 후 0.8초 동안 실행 */
    animation: slideFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards;
}

#main-banner .banner_txt h2 {
    /* 0.6초 후 1초 동안 탄성(cubic-bezier)을 가지며 실행 */
    animation: titlePop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards;
}

/* 4개의 아이콘 메뉴를 가로 1줄(1x4)로 균일하게 분할 배치 */
.main-link {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
    margin: 0;
    list-style: none;
    background: #ffffff;
}

.main-link li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

/* 아이콘을 담는 배경 박스 (앱 아이콘 스타일) */
.main-link .ico_box {
    width: 60px;
    height: 60px;
    background: var(--bg_light);
    border: 1px solid var(--border_color);
    border-radius: 18px; /* 둥근 모서리 처리 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

/* 내부 이미지 아이콘 크기 제어 */
.main-link .ico_box img {
    width: 28px; 
    height: auto;
    display: block;
}

/* 텍스트 스타일 지정 */
.main-link p {
    font-size: 13px;
    font-weight: 500;
    color: var(--text_dark);
    margin: 0;
    text-align: center;
    letter-spacing: -0.5px;
}

/* 2x2 카드 레이아웃 배경 리셋 */
.card-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 14px; /* 여백 확대 */
    padding: 24px 20px;
    background: #ffffff; /* 전체 배경은 완전한 흰색 */
    box-sizing: border-box;
}

/* 개별 카드: 입체감(Shadow) 및 터치 애니메이션 추가 */
.card-item {
    background: #ffffff; 
    border: none; 
    border-radius: 20px; 
    padding: 18px;
    height: 110px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); 
    transition: transform 0.15s ease, box-shadow 0.15s ease; 
}

/* 모바일 터치(클릭) 시 생동감 있는 축소 반응 */
.card-item:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* 텍스트 기본 스타일 */
.card-item p {
    font-size: 16px;
    font-weight: 700;
    color: var(--text_dark);
    margin: 0;
    letter-spacing: -0.5px;
}

/* 아이콘 정렬 기준 유지 */
.card-item img {
    align-self: flex-end; 
    width: 36px;
    height: auto;
}

/* 1. 메인 강조 카드 (색상 반전으로 시각적 포인트) */
.card-item.main-card {
    background: var(--point_color);
    box-shadow: 0 6px 16px rgba(13, 65, 105, 0.2);
}

.card-item.main-card p {
    color: #ffffff; 
}

/* 4. 서브 포인트 카드 (기존보다 맑은 파스텔톤) */
.card-item.point-card {
    background: #e8f0f6;
  
}
.card-item.main-card img {
    filter: invert(1) brightness(2);
}

/*메인 3번째 섹션*/
/* 특수 수거 와이드 배너 (세로 확장 및 이미지 가시성 확보) */
.special-banner {
    position: relative;
    width: 100%;
    margin: 0 0 40px 0;
    padding: 65px 20px; /* 상하 패딩을 키워 세로 공간감 확보 */
    box-sizing: border-box;
    cursor: pointer;
    
    /* 오버레이 투명도를 낮춰(0.85 -> 0.55) 배경 이미지가 은은하게 보이도록 조절 */
    background: linear-gradient(rgba(13, 65, 105, 0.6), rgba(13, 65, 105, 0.6)), url('/img/special_bg.png') no-repeat center center;
    background-size: cover;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 제목 텍스트 (가독성을 위한 미세한 그림자 추가) */
.special-banner .txt-box h3 {
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 배경 위에서도 텍스트가 확 돋보이게 처리 */
}

/* 설명 텍스트 */
.special-banner .txt-box p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 28px 0;
    opacity: 0.95;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 견적 신청 유도 버튼 */
.special-banner .btn-estimate {
    background: #ffffff;
    color: var(--point_color);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 28px;
    display: inline-block;
    letter-spacing: -0.5px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* 입체감 강화 */
}

.special-banner .btn-estimate span {
    margin-left: 4px;
    font-weight: 400;
}


.event-banner-wrap {
    width: 100%;
    padding: 0 20px 30px ;
    box-sizing: border-box;
    background: #ffffff;
}

.event-banner-wrap .section-title {
    margin-bottom: 14px;
}

.event-banner-wrap .section-title h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text_dark);
    margin: 0;
    letter-spacing: -0.5px;
}

/* 가로 스와이프 슬라이더 (첫 번째 다 나오고 두 번째 반 걸치는 구조) */
.event-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory;
    padding-left: 0;
    padding-right: 0;
    scrollbar-width: none;
    box-sizing: border-box;
    width: 100%;
}
.event-slider::-webkit-scrollbar {
    display: none;
}

/* 개별 이벤트 아이템 */
.event-item {
    flex: 0 0 75%; 
    max-width: 320px; 
    scroll-snap-align: start;
    cursor: pointer;
}

/* 이미지 카드 박스 */
.event-card-img {
    border-radius: 16px;
    overflow: hidden;
    background: #f4f7f9; 
    border: 1px solid #e1ecf4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.event-card-img img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5; 
    object-fit: cover;
    transition: transform 0.2s ease;
}

.event-item:active .event-card-img img {
    transform: scale(0.98);
}

/* 이미지 하단 텍스트 영역 */
.event-txt {
    padding: 10px 4px 0 4px;
}

.event-txt .tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--point_color);
    background: rgba(13, 65, 105, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.event-txt h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text_dark);
    margin: 0;
    letter-spacing: -0.5px;
}
/* 이용 방법 전체 영역 */

.howto-section {
    width: 100%;
    padding: 24px 20px 35px ;
    box-sizing: border-box;
    background: #ffffff;
}

.howto-section .section-title {
    padding: 0;
    margin-bottom: 14px;
}

.howto-section .section-title h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text_dark);
    margin: 0 0 2px 0;
    letter-spacing: -0.5px;
	margin-bottom: 10px;
}

.howto-section .section-title p {
    font-size: 13px;
    color: #666666;
    margin: 0;
    letter-spacing: -0.5px;
}

/* 가로 스와이프 슬라이더 영역 */
.howto-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-left: 20px;
    padding-right: 40px;
    scrollbar-width: none;
    box-sizing: border-box;
    width: 100%;
}

.howto-slider::-webkit-scrollbar {
    display: none;
}

/* 개별 카드 디자인 (레퍼런스처럼 컬러풀하고 큼직한 박스) */

.howto-card {
    flex: 0 0 82%;
    max-width: 320px;
    scroll-snap-align: start;
    background: var(--point_color);
    border-radius: 24px;
    padding: 26px 20px 20px 20px;
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(13, 65, 105, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}
/* STEP 1 카드 그라데이션 (밝고 청량한 블루 톤) */
.howto-card:nth-child(1) {
    background: linear-gradient(135deg, #2fa4e7 0%, #1e83bb 100%);
}

/* STEP 2 카드 그라데이션 (안정감 있는 메인 블루 톤) */
.howto-card:nth-child(2) {
    background: linear-gradient(135deg, #1e83bb 0%, #135d8c 100%);
}

/* STEP 3 카드 그라데이션 (딥하고 묵직한 네이비 블루 톤) */
.howto-card:nth-child(3) {
    background: linear-gradient(135deg, #135d8c 0%, #0d4169 100%);
}
/* 스마트폰 외곽 프레임 (카드 우측 하단에 밀착) */
.css-phone-mockup {
    width: 68px;
    height: 110px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    box-sizing: border-box;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: -4px;
    margin-bottom: -6px; /* 바닥에 살짝 걸치게 밀착 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 스마트폰 내부 화면 영역 */
.css-phone-mockup .phone-screen {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 내부 화면에 들어가는 사용자의 아이콘 이미지 */
.css-phone-mockup .phone-screen img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}
/* 상단 타이틀 영역 */
.howto-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.5px;
}

/* 하단 영역: 뱃지와 이미지를 좌우로 배치 */
.howto-card .card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

}

.howto-card .step-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    margin-bottom: 24px; 
}
.howto-card .card-img {
    height: 110px; 
    width: auto;   
    flex-shrink: 0;
    margin-right: -6px;
    margin-bottom: 0;
}

.howto-card .card-img img {
    height: 100%;  
    width: auto;   
    object-fit: contain;
    object-position: bottom right;
}

#main .order { width: 100%; height: 350px; padding: 56px 0; box-sizing: border-box; background: url('../img/main_pic1.png') center center no-repeat; background-size: cover; }
#main .order input[type="button"] { display: block; left: 0; right: 0; border-radius: 10px; margin: auto; width: 166px; height: 40px; background: #284889; border: 1px solid #284889; box-sizing: border-box; font-size: 16px; font-weight: 400; color: #fff; }
#main .order input[type="image"] { width: 256px; border-radius: 12px; }
#main .order input[type="button"]:active { background: #fff; color: #284889; }



/* =========================================
   [신청하기] 일반 예약 폼 모던 앱 스타일
========================================= */
.modern_order_wrap {
 
    min-height: 100vh;
}

/* 🌟 하얀색 둥근 카드 레이아웃 */
.modern_card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 15px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid #eaeaea;
}
.transparent_card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 10px;
}

/* 제목 및 안내문구 */
.modern_card h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}
.modern_card .sub_txt {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}
.modern_card .guide_txt {
    font-size: 13px;
    color: #e53935;
    margin-bottom: 12px;
    margin-top: -6px;
}
.progress-etc div {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* 🌟 공통 인풋 스타일 (둥근 모서리) */
.addr-list { list-style: none; padding: 0; margin: 0; }
.addr-list li { margin-bottom: 12px; }
.addr-list li:last-child { margin-bottom: 0; }

.frm_input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafbfc;
    color: #1a1a1a;
    font-size: 15px;
    padding: 0 16px;
    font-family: 'Pretendard', sans-serif;
    outline: none;
    transition: all 0.2s ease;
}
.frm_input:focus {
    background: #fff;
    border-color: #1a3952;
    box-shadow: 0 0 0 3px rgba(26,57,82,0.08);
}
.full_input { width: 100%; }

/* 주소 검색 레이아웃 */
.addr_flex {
    display: flex;
    gap: 8px;
}
.btn_search {
    width: 90px;
    height: 48px;
    background: #1a3952;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

/* 수량 조절 버튼 (봉투 구매) */
.count_row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn_count {
    width: 48px;
    height: 48px;
    background: #f1f3f5;
    color: #1a1a1a;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 20px;
}
.vinyl.frm_input {
    width: 80px;
    text-align: center;
    padding: 0;
}

/* 라디오 버튼 (주차 등록 여부) */
.radio-list { display: flex; gap: 16px; margin-bottom: 12px; }
.radio-list li input[type="radio"] { display: none; }
.radio-list li input[type="radio"] + label {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #495057;
    cursor: pointer;
}
.radio-list li input[type="radio"] + label span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../img/radio1_off.png") no-repeat center / cover;
    margin-right: 8px;
}
.radio-list li input[type="radio"]:checked + label span {
    background-image: url("../img/radio1_on.png");
}
#park_input_area { margin-top: 10px; }

/* 파일 첨부 (사진 업로드) */
.file_wr {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafbfc;
    height: 48px;
    padding-left: 48px;
    overflow: hidden;
}
.file_wr .lb_icon {
    position: absolute;
    top: 0; left: 0;
    width: 48px; height: 100%;
    background: #f1f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #dcdcdc;
}
.file_wr .frm_file {
    width: 100%;
    padding: 0 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #555;
    outline: none;
}
.file_wr .frm_file::file-selector-button { display: none; }

/* 🌟 하단 쫀득 캡슐 다음 버튼 */
.next-btn {
    width: 100%;
    height: 52px;
    background: #1a3952;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 27px;
    border: none;
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2);
    margin: 20px 0;
    transition: transform 0.1s ease;
}
.next-btn:active {
    transform: scale(0.97);
}




/*날짜 선택*/
.ui-datepicker-trigger { display: none; }

.date-holiday .ui-state-default { color: red; }
.date-sunday .ui-state-default { color: red; font-weight: 600; }
.date-saturday .ui-state-default { color: #284889; font-weight: 600; }

.ui-datepicker .ui-datepicker-header { padding: 2.7778vw 0; }
.ui-datepicker-title select { height: 8.3333vw; background: #fff; border: 0.2778vw solid #c5c5c5; padding-left: 5.5556vw; box-sizing: border-box; margin: 0 0.5556vw !important; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { top: 105%; }

#ui-datepicker-div { position: fixed !important; top: 20% !important; width: 90%; }
.ui-widget.ui-widget-content { box-sizing: border-box; }
.ui-datepicker td, .ui-datepicker td a, .ui-datepicker td span { height: 8.3333vw; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background: #284889; border: 0.2778vw solid #284889; }

/*시간 선택*/
#order .popup-open1 .pop-layer { width: 70%; }
#order .popup-open1 ul { margin-bottom: 5.5556vw; }
#order .popup-open1 ul:after { content: ''; display: block; clear: both; }
#order .popup-open1 li { float: left; width: 48%; border-radius: 5.5556vw; box-sizing: border-box; margin-bottom: 2.7778vw; }
#order .popup-open1 li:nth-child(odd) { margin-right: 4%; }
#order .popup-open1 li input[type="radio"] { display: none; }
#order .popup-open1 li input[type="radio"] + label { display: block; height: 8.8889vw; line-height: 8.8889vw; font-size: 3.6111vw; font-weight: 300; color: #777; text-align: center; }
#order .popup-open1 li input[type="radio"] + label span { display: inline-block; cursor: pointer; width: 100%; height: 100%; background: #d3d7e0; border: 0.2778vw solid #99a2b5; border-radius: 5.5556vw; box-sizing: border-box; }
#order .popup-open1 li input[type="radio"]:checked + label span { background: #284889; color: #fff; }


/*수거방법*/
#order .delivery-list { margin-bottom: 12px; }
#order .delivery-list:after { content: ''; display: block; clear: both; }
#order .delivery-list li { float: left; width: 46%; }
#order .delivery-list li:nth-child(2) { margin: 0 2%; }
#order .delivery-list li input[type="radio"] { display: none; }
#order .delivery-list li input[type="radio"] + label { display: block; height: 60px; line-height: 60px; font-size: 13px; font-weight: 400; color: #fff; text-align: center; }
#order .delivery-list li input[type="radio"] + label span { display: inline-block; cursor: pointer; width: 100%; height: 100%; background: #99a2b5; border: 1px solid #aaa; box-sizing: border-box; }
#order .delivery-list li input[type="radio"]:checked + label span { background: #284889; }

#order .progress div { font-size: 14px; font-weight: 500; color: #284889; letter-spacing: -0.5px; text-align: center; font-family: Pretendard, sans-serif;}
#order .progress div:after { content: ''; display: block; clear: both; }
#order .progress #indivisual3 { width: 147px; left: 0; right: 0; margin: auto; }
#order .progress #indivisual3 li { float: left; margin: 0 10px; }

#order .progress #indivisual3 li input[type="radio"] { display: none; }
#order .progress #indivisual3 li input[type="radio"] + label { display: inline-block; font-size: 11px; font-weight: 500; color: #555; }
#order .progress #indivisual3 li input[type="radio"] + label span { display: inline-block; width: 14px; height: 14px; vertical-align: middle; cursor: pointer; background: url("../img/radio1_off.png") no-repeat; background-size: 100%; margin-right: 5px; }
#order .progress #indivisual3 li input[type="radio"]:checked + label span { background-image: url("../img/radio1_on.png"); }
/*결제방법*/
#order .pay-list { position: absolute; top: 0; right: 0; }
#order .pay-list li { float: left; }
#order .pay-list li:last-child { margin-left: 6.9444vw; }
#order .pay-list li input[type="radio"] { display: none; }
#order .pay-list li input[type="radio"] + label { display: inline-block; font-size: 3.6111vw; font-weight: 400; color: #555; }
#order .pay-list li input[type="radio"] + label span { display: inline-block; width: 3.8889vw; height: 3.8889vw; vertical-align: middle; cursor: pointer; background: url("../img/radio2_off.png") no-repeat; background-size: 100%;	margin-right: 1.3889vw; }
#order .pay-list li input[type="radio"]:checked + label span { background-image: url("../img/radio2_on.png"); }

#order .progress select { width: 100%; height: 8.8889vw; background: url('../img/arrow1.png') 95% center no-repeat; background-size: 4.1667vw; border: 0.2778vw solid #aaa; padding-left: 2.7778vw; box-sizing: border-box; font-size: 3.0556vw; font-weight: 400; color: #555; }

#order .progress .layer1 { text-align: left; }
#order .progress .layer1 label { display: inline-block; width: 25%; font-size: 3.3333vw; }
#order .progress .layer1 input { display: inline-block; width: 75%; height: 8.8889vw; border: 0; border-bottom: 0.2778vw solid #aaa; padding: 2.7778vw; box-sizing: border-box; margin-top: 2.7778vw; font-size: 3.3333vw; font-weight: 400; color: #555; }


/* #order .progress .request { text-align: left; display:none} */
#order .progress .request label { display: inline-block; width: 25%; font-size: 3.3333vw; }
#order .progress .request input { display: inline-block; width: 75%; height: 8.8889vw; border: 0; border-bottom: 0.2778vw solid #aaa; padding: 2.7778vw; box-sizing: border-box; margin-top: 2.7778vw; font-size: 3.3333vw; font-weight: 400; color: #555; }


.layer1 { display: none; }

#order .next-btn { 
    width: 100%;
    height: 54px;
    background: #1a3952;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 27px;
    border: none;
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2);
    margin-bottom: 12px;
    padding: 0;
    transition: transform 0.1s ease;
    cursor: pointer;
}


#order .next-btn:active { 
    transform: scale(0.97); 
    background: #0a3353; 
}
/* =========================================
   파일 첨부 (사진 첨부 한글 버전 - 예약 폼 전용)
========================================= */
.modern_card .file_wr {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafbfc;
    height: 48px;
    padding-left: 86px; /* 텍스트 너비(86px)만큼 내부 여백 확보 */
    overflow: hidden;
}

.modern_card .file_wr .lb_txt {
    position: absolute;
    top: 0; 
    left: 0;
    width: 86px;
    height: 100%;
    background: #f1f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #dcdcdc;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
}

.modern_card .file_wr .frm_file {
    width: 100%;
    padding: 0 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #555;
    outline: none;
}

/* 파일 선택 시 기본 브라우저 버튼(파일 선택) 숨김 처리 */
.modern_card .file_wr .frm_file::file-selector-button { 
    display: none; 
}
/* =========================================
   [결제완료창] 안전한 리폼 버전 CSS
========================================= */
#complete.modern_order_wrap { 
    background: #f5f7f9; 
    min-height: 100vh; 
    padding: 20px 0 60px 0; 
}

/* 상단 동그라미 진행바 */
#complete .ing { 
    display: flex; justify-content: center; gap: 12px; 
    padding: 10px 0 24px; list-style: none; margin: 0; 
}
#complete .ing li { 
    width: 14px; height: 14px; background: #fff; 
    border: 3px solid #1a3952; border-radius: 50%; box-sizing: border-box; float: none;
}
#complete .ing li.active { background: #1a3952; }

#complete .wrap { width: 92%; margin: 0 auto; }

/* 공통 하얀색 카드 */
#complete .modern_card {
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid #eaeaea;
    padding: 24px 20px;
}
#complete .map_card { padding: 0; }
#complete .transparent_card { background: transparent; border: none; box-shadow: none; padding: 0; }

/* 기존 ul > li > h2, h3 구조를 활용한 플렉스 정렬 */
#complete ul { padding: 0; margin: 0; list-style: none; }
#complete .info_row { 
    display: flex; justify-content: space-between; align-items: flex-start; 
    padding: 12px 0; border-bottom: 1px solid #f1f3f5; box-sizing: border-box;
}
#complete .info_row:last-child { border-bottom: none; }
#complete .info_row h2 { 
    width: 40%; font-size: 15px; font-weight: 500; color: #888; float: none; margin: 0; line-height: 1.4;
}
#complete .info_row h3 { 
    width: 60%; font-size: 15px; font-weight: 600; color: #222; text-align: right; float: none; margin: 0; line-height: 1.4;
}

/* 포인트 및 텍스트 강조 */
#complete .point_txt { color: #1a3952 !important; font-size: 16px !important; }
#complete .text_red { color: #e53935 !important; }

/* 라디오 / 체크박스 공통 처리 */
#complete input[type="radio"], #complete input[type="checkbox"] { display: none; }
#complete input[type="radio"] + label, #complete input[type="checkbox"] + label { 
    display: inline-flex; align-items: center; font-size: 15px; color: #222; cursor: pointer; font-weight: 600; margin: 0;
}
#complete input[type="radio"] + label span, #complete input[type="checkbox"] + label span { 
    display: inline-block; width: 22px; height: 22px; 
    background: url("../img/radio1_off.png") no-repeat center / cover; margin-right: 8px; vertical-align: middle;
}
#complete input[type="radio"]:checked + label span, #complete input[type="checkbox"]:checked + label span { 
    background-image: url("../img/radio1_on.png"); 
}

/* 약관 동의 */
#complete .terms_agree { text-align: center; margin: 10px 0 30px; }
#complete .terms_agree p { display: flex; align-items: center; justify-content: center; margin: 0; }
#complete .terms_agree .agree_txt { font-size: 14px; color: #555; cursor: pointer; margin-left: 6px; }
#complete .terms_agree .agree_txt u { color: #1a3952; font-weight: 700; text-decoration: none; }

/* 쫀득한 캡슐형 결제 버튼 */
#complete .complete-btn { 
    width: 100%; height: 54px; 
    background: #1a3952; color: #ffffff; 
    font-size: 16px; font-weight: 700; 
    border-radius: 27px; border: none; 
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2); 
    margin-bottom: 12px; padding: 0;
    transition: transform 0.1s ease; cursor: pointer;
}
#complete .complete-btn:active { transform: scale(0.97); background: #12283a; color: #fff; }
/*개인정보 취급방침*/
.pre-contents { white-space: pre-wrap; }


/*주문내역*/

/* =========================================
   [공통] 팝업 레이어 (주문변경 / 안내창 등)
========================================= */

#detail .dim-layer {
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 9999; 
}
#detail .dimBg {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.6);
}
#detail .pop-layer {
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    width: 85%;
    max-width: 320px; 
    background: #ffffff; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
#detail .pop-container { padding: 0; }

/* 첫 번째 팝업: 주문변경 안내 (popup-open1) */
#detail .popup-open1 .pop-layer img { 
    width: 100%; 
    display: block; 
}
#detail .popup-open1 .pop-layer .ctxt div { 
    padding: 20px; 
    box-sizing: border-box; 
}
#detail .popup-open1 .pop-layer .ctxt div h3 { 
    font-size: 15px; 
    font-weight: 500; 
    color: #444444; 
    line-height: 1.6; 
    font-family: 'Pretendard', sans-serif;
    margin: 0 0 10px 0;
    word-break: keep-all;
}
#detail .popup-open2 .pop-layer .ctxt h2 {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    padding: 40px 20px 20px;
    margin: 0;
    font-family: 'Pretendard', sans-serif;
}
/* 팝업 공통 닫기 버튼 (★ 싹다버림 시그니처 캡슐 버튼 스타일 적용) */
#detail .dim-layer input[type="button"] { 
    width: calc(100% - 40px); /* 팝업창 안쪽 여백에 맞춤 */
    height: 54px; /* 로그인/변경 버튼과 동일한 시그니처 높이 */
    margin: 0 20px 20px; 
    background: #1a3952; 
    border: none; 
    border-radius: 27px; /* 시그니처 둥근 캡슐 모양 */
    font-size: 16px; /* 글씨 크기 통일 */
    font-weight: 600; 
    color: #ffffff; 
    font-family: 'Pretendard', sans-serif; 
    cursor: pointer; 
    display: block;
    box-shadow: 0 6px 15px rgba(26, 57, 82, 0.2); /* 고급스러운 시그니처 그림자 */
    transition: transform 0.2s;
}

/* 터치했을 때 살짝 들어가는 애니메이션 효과 */
#detail .dim-layer input[type="button"]:active {
    transform: scale(0.98);
}


/*요금표*/
#price { padding: 25.0000vw 0 31.9444vw; box-sizing: border-box; }
#price .wrap { width: 90%; left: 0; right: 0; margin: auto; }

/*탭*/
#price .sub-menu { position: fixed; top: 13.6111vw; left: 0; z-index: 2; width: 100%; overflow: scroll; }
#price .tabs { width: 288.8889vw; height: 10.0000vw; left: 0; right: 0; margin: auto; background: #ddd; border-top: 0.2778vw solid #284889; border-bottom: 0.2778vw solid #284889; box-sizing: border-box; }
#price .tabs li { float: left; position: relative; width: 22.2222vw; height: 10.0000vw; font-size: 3.6111vw; font-weight: 400; color: #777; text-align: center; line-height: 10.0000vw; }
#price .tabs li.active { color: #284889; }
#price .tabs li.active a { display: block; color: #284889; }
#price .tabs li:after { content: ''; display: block; clear: both; }
#price .tab_container { clear: both; }
#price .tab_content li { position: relative; border-bottom: 0.2778vw solid #9f9f9f; padding: 2.7778vw 0; box-sizing: border-box; }
#price .tab_content li h2 { font-size: 3.6111vw; font-weight: 400; color: #777; }
#price .tab_content li h3 { position: absolute; top: 2.7778vw; right: 0; font-size: 3.6111vw; font-weight: 500; color: #333; }

#price .tab_container input[type="button"] { position: fixed; bottom: 19.4444vw; width: 90%; height: 9.7222vw; left: 0; right: 0; margin: auto; background: #284889; border: 0.2778vw solid #284889; box-sizing: border-box; font-size: 4.1667vw; font-weight: 400; color: #fff; }
#price .tab_container input[type="button"]:active { background: #fff; color: #284889; }


/*공지사항*/
#notice { padding: 16.6667vw 0 0; box-sizing: border-box; }
#notice .wrap { width: 90%; left: 0; right: 0; margin: auto; }

#notice li { border-bottom: 0.2778vw solid #ccc; padding: 2.7778vw 0; box-sizing: border-box; }
#notice h2 { font-size: 3.6111vw; font-weight: 500; color: #284889; }
#notice h3 { font-size: 3.0556vw; font-weight: 400; color: #777; }
#notice span { font-size: 3.0556vw; font-weight: 400; color: #e32424; }


/*추천코드*/
#code { padding: 25.8889vw 0 18.0556vw; box-sizing: border-box; font-family: Pretendard;}
#code h2 { font-size: 3.6111vw; font-weight: 500; color: #555; text-align: center; }
#code h2 span { font-size: 4.1667vw; font-weight: 600; color: #e32424; }
#code p {position: relative; width: 45.5556vw; left: 0; right: 0; margin: 5.5556vw auto 9.7222vw; }
#code p img { width: 100%; margin-top: 2.7778vw; }
#code .codeArea { position: relative; width: 65%; left: 0; right: 0; margin: auto; border-top: 0.2778vw solid #284889; border-bottom: 0.2778vw solid #284889; padding: 1.9444vw 0; box-sizing: border-box; }
#code .codeArea h3 { font-size: 3.6111vw; font-weight: 400; color: #777; }
#code .codeArea h3 span { font-size: 3.6111vw; font-weight: 600; color: #284889; }
#code .codeArea h4 input[type="button"] { position: absolute; top: 1.6667vw; right: 0; width: 13.8889vw; height: 5.5556vw; background: #99a2b5; border: 0.2778vw solid #99a2b5; box-sizing: border-box; font-size: 3.0556vw; font-weight: 400; color: #fff; }
#code .codeArea h4 input[type="button"]:active { background: #284889; }
#code h5 { font-size: 3.0556vw; font-weight: 400; color: #999; text-align: center;  margin: 4.1667vw auto 8.3333vw; }
#code p input[type="button"] { display: block; width: 46.1111vw; height: 13.8889vw; left: 0; right: 0; margin: auto; background: #284889; border: 0.2778vw solid #284889; box-sizing: border-box; font-size: 4.1667vw; font-weight: 400; color: #fff; border-radius: 2.7778vw; font-family: Pretendard;}
#code p input[type="button"]:active { background: #fff; color: #284889; }

#code .recommend{font-size: 3.4444vw;}
#code .recom-1{border: 0.2778vw solid #ccc; padding: 0.8333vw; width: 43.4444vw; height: 7.2222vw; margin-top: 1.3889vw; margin-bottom: 1.3889vw;}

#code .pop-layer { width: 71.1111vw; }
#code .pop-layer .pop-container { padding: 0; }
#code .code-send { padding: 5.5556vw 4.1667vw; }
#code .code-send li { margin: 2.2222vw 0; }

#code .code-send input[type="radio"] { display: none; }
#code .code-send input[type="radio"] + label { display: inline-block; font-size: 3.6111vw; font-weight: 500; color: #381e1f; }
#code .code-send input[type="radio"] + label span { display: inline-block; width: 3.8889vw; height: 3.8889vw; vertical-align: middle; cursor: pointer; background: url("../img/radio2_off.png") no-repeat; background-size: 100%; margin-right: 1.3889vw; }
#code .code-send input[type="radio"]:checked + label span { background-image: url("../img/radio2_on.png"); }

#code .code-send li img { width: 10.2778vw; height: 9.7222vw; margin-right: 1.3889vw; }
#code .code-send li input[type="text"] { width: 45.8333vw; height: 9.7222vw; padding: 1.3889vw; border: 0.2778vw solid #cdcdcd; box-sizing: border-box; font-size: 3.0556vw; font-weight: 400; color: #999; }
#code .codesend-btn { width: 100%; height: 6.9444vw; background: #ffcd00; border: 0; font-size: 3.3333vw; font-weight: 400; color: #381e1f; }




.sub13_num {width: 5.5vw;}
.sub13_note {padding: 1vw 0;}


/* =========================================
   [서브페이지] 환경설정 페이지 
========================================= */

#setting { 
    padding: 50px 0 70px; 
    box-sizing: border-box; 
    background: #ffffff;
    min-height: calc(100vh - 120px);
}

#setting .wrap { 
    width: 100%; 
    max-width: 500px;
    margin: 0 auto; 
    position: relative; 
}

#setting .wrap ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 0 0; 
}

#setting .wrap li { 
    position: relative; 
    border-bottom: 1px solid #e5e5e5; 
    padding: 16px 0; 
    box-sizing: border-box; 
    cursor: pointer; 
}

#setting .wrap li h2 { 
    font-size: 15px; 
    font-weight: 500; 
    color: #333333; 
    margin: 0; 
}

#setting .wrap li h2.version-title { 
    color: #135A9A; 
}

#setting .wrap li h3 { 
    position: absolute; 
    top: 18px; 
    right: 0; 
    font-size: 14px; 
    font-weight: 400; 
    color: #999999; 
    margin: 0; 
}

#setting .wrap li h3 span { 
    font-size: 14px; 
    font-weight: 500; 
    color: #284889; 
}

#setting .wrap li h3 img { 
    width: 8px; 
    height: 15px; 
    display: block; 
}

/* 하단 버전 정보 영역 */
#setting .wrap ul.version-list { 
    margin-top: 30px; 
}

#setting .wrap ul.version-list li { 
    border-top: 1px solid #e5e5e5; 
    border-bottom: 1px solid #e5e5e5; 
    box-sizing: border-box; 
    cursor: default; 
}

/* 푸시 토글 버튼 위치 조정 */
.push { 
    position: absolute; 
    right: 0; 
}

#setting .push { 
    top: 10px; 
}

/* 약관 팝업 레이어 공통 스타일 */
.setting-layer {
    display: none;
    position: fixed;
    overflow-y: scroll;
    z-index: 10000;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

/* 하단 버전 정보 영역 */
#setting .wrap ul.version-list { margin-top: 6vw; }
#setting .wrap ul.version-list li { border-top: 0.2778vw solid #9f9f9f; border-bottom: 0.2778vw solid #9f9f9f; box-sizing: border-box; cursor: default; }

/*푸시*/
.push { position: absolute; right: 0; }
#setting .push { top: 2.5vw; }

/* 약관 팝업 레이어 공통 스타일 */
.setting-layer {
    display: none;
    position: fixed;
    overflow-y: scroll;
    z-index: 10000;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.push {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.push label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.push input[type="checkbox"] { 
    position: absolute; 
    opacity: 0; 
    width: 0;
    height: 0;
    cursor: pointer; 
}

.push input[type="checkbox"].ios-switch + div { 
    position: relative;
    display: inline-block;
    vertical-align: middle; 
    width: 44px; 
    height: 24px; 
    border-radius: 24px; 
    background-color: #e2e8f0; 
    transition: background-color 0.25s ease;
    cursor: pointer; 
    box-sizing: border-box;
}

.push input[type="checkbox"].ios-switch:checked + div { 
    background-color: #1a3952;
}

.push input[type="checkbox"].ios-switch + div > div { 
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: #ffffff; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; 
}

.push input[type="checkbox"].ios-switch:checked + div > div { 
    transform: translate3d(20px, 0, 0); 
    -webkit-transform: translate3d(20px, 0, 0);
}

/*게시판 뷰*/
#board-view { padding: 16.6667vw 0 18.0556vw; box-sizing: border-box; }
#board-view .wrap { width: 90%; left: 0; right: 0; margin: auto; }

#board-view .b-pic img { width: 100%; }

#board-view .b-info { padding: 2.7778vw 0; border-bottom: 0.2778vw solid #9f9f9f; box-sizing: border-box; }
#board-view .b-info:after { content: ''; display: block; clear: both; }
#board-view .b-info span { float: left; font-size: 3.0556vw; font-weight: 400; color: #777; }
#board-view .b-info .b-writer { margin-right: 2.7778vw; }
#board-view .b-info .b-views { float: right; }
#board-view .b-info .b-views img { width: 5.0000vw; margin-right: 1.3889vw; vertical-align: -0.2778vw; }

#board-view .b-container { clear: both; padding: 2.2222vw 0; box-sizing: border-box; }
#board-view .b-container .b-title { margin-bottom: 2.7778vw; font-size: 3.6111vw; font-weight: 400; color: #333; }
#board-view .b-container .b-contents { font-size: 3.0556vw; font-weight: 400; color: #777; }
#board-view .b-btn { display: block; margin: 20.8333vw auto 0; width: 46.1111vw; height: 9.7222vw; line-height: 9.7222vw; text-align: center; background: #284889; font-size: 4.1667vw; font-weight: 400; color: #fff; }

/*1:1문의*/
/* 게시판 목록 */
#bo_list {margin-top: 16.6667vw; padding: 0 5.5556vw 5.5556vw; font-family: Pretendard;}
/*#bo_list #list_chk {padding:0 10px }*/

#bo_list .li_stat{float:right;display:inline-block;height:6.9444vw;padding:0 2.7778vw;border-radius:4.1667vw;margin-top:0.8333vw}
#bo_list .txt_rdy{border:0.2778vw solid #ff63ab;color:#ff63ab;line-height:6.3889vw}
#bo_list .txt_done{background:#ff63ab;color:#fff;line-height:6.9444vw}

#bo_list .li_title{display: block;font-weight: bold;margin: 1.3889vw 0;}
#bo_list .li_title strong{color: #3ca1ff !important;font-weight: normal;text-decoration: none;font-size: 0.92em;}
#bo_list .li_info{border-top: 0.2778vw solid #eee;margin: 2.7778vw 0 0;line-height: 7.7778vw;color: #666;position: relative;padding-top: 0.8333vw;} 
#bo_list .li_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_list .profile_img img{border-radius:50%;}
#bo_list .li_sbj{display: block;font-weight: bold;margin: 1.3889vw 0;font-size: 1.083em;}

#bo_cate h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {margin: 2.7778vw 0 5.5556vw; padding-left:0.2778vw;zoom:1; font-family: Pretendard;}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_cate li{display:inline-block;float:left;margin:0.8333vw 1.3889vw 0.8333vw 0}
#bo_cate a {display:block;line-height:6.6667vw;padding:0 2.7778vw;border-radius:3.6111vw;background:#fff;}
#bo_cate #bo_cate_on {background:#12416d;color:#fff;
-webkit-box-shadow:0 0 5px  rgba(66,179,220,0.8);
-moz-box-shadow:0 0 5px  rgba(66,179,220,0.8);
box-shadow: 0 0 8px  rgba(66,179,220,0.8);}

.list_01 li {
    background: #fff; 
    border-radius: 3px; 
    margin: 10px 0; 
    padding: 10px 15px; 
    -webkit-box-shadow: 0 1px 4px #cbd1df; 
    -moz-box-shadow: 0 1px 4px #cbd1df; 
    box-shadow: 0 1px 4px #cbd1df;
}
.empty_list {
    padding: 50px 0 !important; 
    text-align: center !important; 
    color: #666 !important;
}
.btn_b02:visited {
    color: #fff;
}
.btn_b02 {
    background-color: #135a9a;
    border: 1px solid #135a9a; 
    padding: 10px; 
    border-radius: 10px; 
    color: #fff; 
    font-family: Pretendard; 
    font-size: 18px; 
    margin-left: 10px;
}
.btn_top top {
    display: flex;
}
.btn_top top li {
    margin: 10px 0;
}
.btn_admin {
    background-color: #135a9a;
    border: 1px solid #135a9a; 
    border-radius: 10px; 
    color: #fff; 
    font-family: Pretendard;
}

/* .frm_input required {height: } */
#bo_list .txt_rdy {border: 1px solid #12416d; color: #12416d;}
.btn_bo_adm {}


/* 관리자일 때 */
#bo_list_admin th label {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_list_admin th:nth-of-type(1) {width:40px}
#bo_list_admin th:nth-of-type(3) {width:100px}

#bo_list_admin td:nth-of-type(1) {text-align:center}
#bo_list_admin td:nth-of-type(3) {text-align:center}

/* 관리자가 아닐 때 */
#bo_list th:nth-of-type(2) {width:100px}

#bo_list td:nth-of-type(2) {text-align:center}

/* 게시판 목록 공통 */
.bo_fx {margin-bottom:1.3889vw;}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none}
#bo_list_total {float:left;padding:0;height:2.5em;line-height:2.5em;}
.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;margin-left:1.3889vw}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:1.3889vw}
.btn_bo_adm input {padding:0 2.7778vw;height:2em;border:0.2778vw solid #e8180c !important;background:#e8180c;color:#fff;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-appearance:none}
.bo_notice td {background:#f7f7f7}
.bo_notice td a {font-weight:bold}
.td_num strong {color:#000}
.bo_cate_link {display:inline-block;margin:0 0.8333vw 0 0;padding:0 1.6667vw 0 0;border-right:0.2778vw solid #e7f1ed;color:#999 !important;font-weight:bold;text-decoration:none} 
/* 글제목줄 분류스타일 */
.bo_current {color:#e8180c}
.td_subject img {margin-left:0.8333vw}
#bo_list .cnt_cmt {display:inline-block;margin:0 0 0 0.8333vw;font-weight:bold}

#bo_sch {margin-bottom:2.7778vw;padding-top:1.3889vw;text-align:center}
#bo_sch .btn_submit{width: 16.6667vw; height: 9.7222vw; font-family: 'Pretendard'; background-color: #135A9A; border: none; border-radius: 2.7778vw; color: #fff;}


/* =========================================
   [게시판 글쓰기] 싹다버림 모던 앱 스타일 리폼
========================================= */

#bo_w {
    /* 원본: margin: -10.9222vw 0 20.9222vw 0; */
    padding: 20px;
    margin-bottom: 40px;
    box-sizing: border-box;

}

#bo_w #wr_email, 
#bo_w #wr_homepage, 
#bo_w #wr_subject {
    width: 100%;
}

/* 글자수 제한 관련 (혹시 쓰일까봐 보존) */
#char_count_desc { display: block; margin: 0 0 10px; padding: 0; }
#char_count_wrp { margin: 10px 0 0; text-align: right; }
#char_count { font-weight: bold; }
#qa_subject { width: 100%; }

.form_01 {
    /* 원본: margin: 16.7778vw 2.7778vw 6.5555vw 2.7778vw; border-radius: 1.3889vw; padding: 4.1667vw; box-shadow: 0 0.2778vw 1.1111vw #cbd1df; */
    background: #ffffff;
    margin: 0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #eaeaea;
}

/* 각 입력 항목들 사이 여백 */
.write_div {
    margin-bottom: 16px;
}
.write_div:last-child {
    margin-bottom: 0;
}

.write_div input[type="checkbox"] {
    accent-color: #1a3952;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 4px 0 0;
}
.write_div label {
    font-size: 14px;
    color: #495057;
    margin-right: 12px;
    vertical-align: middle;
}

.frm_input,
#bo_w .frm_input {
    /* 원본: height: 8.3333vw; max-width: 100%; height: 38px; border-radius: 3px; border: 0.2778vw solid #ccc; padding: 1.1111vw; margin-top: 1.3889vw; */
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafbfc;
    color: #1a1a1a;
    font-size: 15px !important;
    padding: 0 16px;
    margin-top: 0;
    transition: all 0.2s ease;
    outline: none;
}

.frm_input:focus,
#bo_w .frm_input:focus,
#bo_w textarea:focus {
    background: #ffffff;
    border-color: #1a3952;
    box-shadow: 0 0 0 3px rgba(26, 57, 82, 0.08);
}

#bo_w textarea {
    /* 원본: .textarea {width: 97%;} */
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafbfc;
    padding: 16px;
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    resize: none;
    outline: none;
    transition: all 0.2s ease;
}
.bo_w_flie {
    margin-bottom: 12px;
}

#bo_w .bo_w_flie .file_wr {
    /* 원본: border:0.2778vw solid #ccc; background:#fff; border-radius:0.8333vw; padding:1.3889vw; height:9.5555vw; */
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafbfc;
    height: 48px;
    padding-left: 54px; /* 아이콘 공간 확보 */
    overflow: hidden;
}

#bo_w .bo_w_flie .lb_icon {
    /* 원본: position:absolute; top:0.0000vw; left:0.0000vw; border-radius:4px; height:9.2222vw; width:16.1111vw; background:#eee; padding: 1.5625vw; */
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 100%;
    background: #f1f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #dcdcdc;
    color: #888888;
    font-size: 16px;
}

#bo_w .bo_w_flie .frm_file {
    /* 원본: padding-left:17.8889vw; */
    width: 100%;
    padding: 0 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #555555;
    outline: none;
}

#bo_w .write_div {
    margin-bottom: 16px !important;
}

#bo_w .write_div.btn_top {
    margin-bottom: 0 !important;
}

/* 🌟 문제의 btn_top (절대좌표로 날아가는 현상 강제 취소) */
#bo_w div.btn_top {
    position: static !important; /* 화면 우측 상단으로 날아가는 것 방지 */
    display: flex !important;
    gap: 12px;
    margin-top: 24px !important;
    padding: 0 !important;
    width: 100%;
}

/* 취소 버튼 */
#bo_w div.btn_top .btn_cancel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    background: #f1f3f5;
    color: #495057;
    font-size: 15px;
    font-weight: 600;
    border-radius: 27px;
    border: 1px solid #e2e6ea;
    text-decoration: none;
    box-sizing: border-box;
}

/* 작성완료 쫀득 버튼 */
#bo_w div.btn_top .btn_submit {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    background: #1a3952;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 27px;
    border: none;
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2);
    cursor: pointer;
    transition: transform 0.1s ease;
    -webkit-appearance: none;
    margin: 0; /* 불필요한 마진 초기화 */
}

#bo_w div.btn_top .btn_submit:active {
    transform: scale(0.97);
}
/* =========================================
   [게시판 읽기] 뷰페이지 PX 단위 변환 리팩토링 스타일
========================================= */

#bo_v {
    margin-top: 60px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

#bo_v .bo_v_wr {
    background: #fff;
    margin: 12px;
    border-radius: 8px;
    padding: 16px;
    -webkit-box-shadow: 0 2px 8px #cbd1df;
    -moz-box-shadow: 0 2px 8px #cbd1df;
    box-shadow: 0 2px 8px #cbd1df;
}

#bo_v .btn_top ul {
    display: flex;
    margin-left: 15px;
}

#bo_v_table {
    margin: 0 0 8px;
    padding: 0 12px;
    color: #999;
    font-size: 13px;
    font-weight: bold;
}

#bo_v_info strong {
    display: inline-block;
    margin: 0;
    font-weight: normal;
}

#bo_v_info .info_date {
    position: absolute;
    top: 0;
    right: 0;
    color: #777;
}

#bo_v_info .profile_img img {
    border-radius: 50%;
}

#bo_v_file {}
#bo_v_file h2 {
    position: absolute;
    font-size: 0;
    text-indent: -9999em;
    line-height: 0;
    overflow: hidden;
}

#bo_v_file ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_v_file li {
    padding: 0 12px;
    border-bottom: 1px solid #eee;
    background: #f7f7f7;
}

#bo_v_file a {
    display: inline-block;
    padding: 8px 0;
    color: #000;
    text-decoration: none;
}

#bo_v_file a:focus, 
#bo_v_file a:hover, 
#bo_v_file a:active {
    text-decoration: none;
}

.bo_v_file_cnt {
    display: inline-block;
    margin: 0 12px;
}

#bo_v_link {}
#bo_v_link h2 {
    position: absolute;
    font-size: 0;
    text-indent: -9999em;
    line-height: 0;
    overflow: hidden;
}

#bo_v_link ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_v_link li {
    padding: 0 12px;
    border-bottom: 1px solid #eee;
    background: #f7f7f7;
}

#bo_v_link a {
    display: inline-block;
    padding: 8px 0;
    color: #000;
    text-decoration: none;
}

#bo_v_link a:focus, 
#bo_v_link a:hover, 
#bo_v_link a:active {
    text-decoration: none;
}

.bo_v_link_cnt {
    display: inline-block;
    margin: 0 12px;
}

#bo_v_contact {
    border-bottom: 1px solid #eee;
}

#bo_v_contact h2 {
    position: absolute;
    font-size: 0;
    text-indent: -9999em;
    line-height: 0;
    overflow: hidden;
}

#bo_v_contact dl {
    margin: 0;
    padding: 6px 0;
    color: #666;
    list-style: none;
}

#bo_v_contact dl:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_v_contact dt, 
#bo_v_contact dd {
    float: left;
    margin: 0;
}

#bo_v_contact dt {
    clear: both;
    padding: 4px 0;
    width: 55px;
    text-align: center;
    font-weight: bold;
}

#bo_v_contact dd {
    padding: 4px 0;
    width: 80%;
}

#bo_v_top {
    margin: 0 0 12px;
    padding: 12px;
}

#bo_v_top:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_v_top h2 {
    position: absolute;
    font-size: 0;
    text-indent: -9999em;
    line-height: 0;
    overflow: hidden;
}

#bo_v_top ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_v_bot {
    padding: 0 12px;
}

#bo_v_bot:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_v_bot h2 {
    position: absolute;
    font-size: 0;
    text-indent: -9999em;
    line-height: 0;
    overflow: hidden;
}

#bo_v_bot ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.bo_v_com {
    float: right;
}

.bo_v_com li {
    float: left;
    margin-left: 6px;
}

#bo_v_atc_title {
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
}

#bo_v_img {
    margin: 0 0 12px;
    width: 100%;
    overflow: hidden;
    zoom: 1;
}

#bo_v_img:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_v_img img {
    margin-bottom: 16px;
    max-width: 100%;
    height: auto;
}

#bo_v_con {
    margin-bottom: 24px;
    width: 100%;
    line-height: 1.7em;
    word-break: break-all;
    overflow: hidden;
}

#bo_v_con a {
    color: #000;
    text-decoration: underline;
}

#bo_v_con img {
    max-width: 100%;
    height: auto;
}

#bo_v_share .btn_scrap {
    line-height: 32px;
    width: 80px;
}

#bo_v_act {
    margin-bottom: 24px;
    text-align: center;
}

#bo_v_act a {
    margin-right: 6px;
    vertical-align: top;
}

#bo_v_act span {
    display: inline-block;
    margin-right: 6px;
    padding: 0 12px;
    border: 1px solid #eee !important;
    background: #fafafa !important;
    color: #000 !important;
    text-decoration: none !important;
    line-height: 2em;
    vertical-align: top;
}

#bo_v_act strong {
    color: #ff3061;
}

#bo_v_act_good, 
#bo_v_act_nogood {
    display: inline-block;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_v_sns {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    zoom: 1;
}

#bo_v_sns:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_v_sns li {
    float: left;
    margin: 0 6px 0 0;
}

#bo_v_addq {
    margin: 0 0 35px;
    text-align: right;
}

#bo_v_ans {
    margin-top: 60px;
}

#bo_v_ans h2 {
    font-size: 16px;
    margin: 12px;
}

#bo_v_ans h2 span {
    display: block;
}

#bo_v_ans h2 .tit_rpl {
    display: inline-block;
    font-size: 13px;
    padding: 0 6px;
    line-height: 28px;
    font-weight: normal;
    background: #646982;
    color: #fff;
}

#bo_v_ans #ans_datetime {
    padding: 6px 0 12px;
    border-bottom: 1px solid #eee;
    color: #777;
}

#bo_v_ans #ans_con {
    margin: 12px 0;
    line-height: 1.8em;
}

#bo_v_ans #ans_con img {
    max-width: 100%;
    height: auto;
}

#bo_v_ans #ans_add {
    text-align: right;
}

#bo_v_ans #ans_msg {
    padding: 40px 0;
    background: #f2f5f9;
    text-align: center;
}

#bo_v_ans .btn_submit {
    width: 100%;
    height: 44px;
    border-radius: 6px;
    background-color: #12416d;
    color: #fff;
    border: 0;
    font-size: 16px;
}

#bo_v_ans .btn_confirm {
    margin: 40px 30px;
}

#bo_v_rel {}
#bo_v_rel h2 {
    margin: 0 12px 12px;
    font-size: 1.2em;
}

#bo_v_rel .li_stat {
    float: right;
    display: inline-block;
    height: 30px;
    padding: 0 12px;
    border-radius: 18px;
    margin-top: 4px;
}

#bo_v_rel .txt_rdy {
    border: 1px solid #ff63ab;
    color: #ff63ab;
    line-height: 28px;
}

#bo_v_rel .txt_done {
    background: #ff63ab;
    color: #fff;
    line-height: 30px;
}

#bo_v_rel .li_title {
    display: block;
    font-weight: bold;
    margin: 6px 0;
}

#bo_v_rel .li_title strong {
    color: #3ca1ff !important;
    font-weight: normal;
    text-decoration: none;
    font-size: 0.92em;
}

#bo_v_rel .li_info {
    border-top: 1px solid #eee;
    margin: 12px 0 0;
    line-height: 32px;
    color: #666;
    position: relative;
    padding-top: 4px;
}

#bo_v_rel .li_info:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_list .profile_img img {
    border-radius: 50%;
}

#bo_v_rel .li_sbj {
    display: block;
    font-weight: bold;
    margin: 6px 0;
    font-size: 16px;
}

/* =========================================
   [게시판 댓글 및 글쓰기 영역]
========================================= */

#bo_vc {
    /* 원본: margin:0 0 1.3889vw; padding:4.1667vw 4.1667vw 1.3889vw; border-top:0.2778vw solid #cfded8; border-bottom:0.2778vw solid #cfded8; background:#f7f7f7; */
    margin: 16px 0;
    padding: 16px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

#bo_vc h2 {
    /* 원본: margin-bottom:1.3889vw; */
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f3f5;
}
#bo_vc article {
    /* 원본: padding:0 0 1.3889vw; */
    padding: 16px 0;
    border-bottom: 1px solid #f1f3f5;
    position: relative;
}

#bo_vc article:last-of-type {
    border-bottom: none;
}

#bo_vc header {
    /* 원본: position:relative; padding:10.6111vw 0 7.3889vw; */
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px; 
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f3f5; 
}

#bo_vc article header h2 {
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_vc header br {
    display: none;
}

/* 프로필 이미지 정돈 */
#bo_vc .comment_profile_img {
    display: inline-flex;
    align-items: center;
}

#bo_vc .comment_profile_img img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

#bo_vc header .icon_reply {
    /* 원본: position:absolute; top:3.6111vw; left:-5.5556vw; */
    position: absolute;
    top: 15px;
    left: -15px;
}

#bo_vc .sv_member, 
#bo_vc .sv_guest {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
}

.bo_vc_hdinfo {
    /* 원본: display:inline-block; margin:0 2.7778vw 0 1.3889vw; */
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #888888;
}

#bo_vc header .bo_vc_hdinfo:last-of-type {
    margin-left: auto;
}
#bo_vc h1 {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_vc a {
    color: #000;
    text-decoration: none;
}

#bo_vc p {
    /* 원본: padding:0 0 1.3889vw; line-height:1.8em; */
    padding: 0 0 5px;
    font-size: 14px;
    color: #212529;
    line-height: 1.6em;
    margin: 6px 0 10px 0;
}

#bo_vc p a {
    text-decoration: underline;
}

#bo_vc_empty {
    /* 원본: margin:0; padding:4.1667vw !important; text-align:center; */
    margin: 0;
    padding: 30px 0 !important;
    text-align: center;
    font-size: 13.5px;
    color: #888888;
}

#bo_vc fieldset {
    /* 원본: margin:0 0 2.7778vw; padding:0; */
    margin: 0 0 10px;
    padding: 0;
}

#bo_vc #bo_vc_winfo {
    float: left;
}

#bo_vc footer { zoom: 1; }
#bo_vc footer:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

/* 댓글 수정/삭제/답변 버튼 */
.bo_vc_act {
    /* 원본: float:right; margin:0; list-style:none; */
    display: flex;
    gap: 6px;
    margin: 6px 0 0 0;
    padding: 0;
    list-style: none;
}

.bo_vc_act:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

.bo_vc_act li {
    /* 원본: float:left; margin-left:1.3889vw; */
    /* 앱 스타일에 맞게 수정 */
}

.bo_vc_act li a {
    display: inline-block;
    padding: 4px 10px;
    background: #f4f6f9;
    color: #6c757d !important;
    font-size: 11.5px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 500;
    border: 1px solid #e2e6ea;
}

#bo_vc .comment_profile_img img {
    /* 원본: width: 8.1111vw; height: 8.1111vw; */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
/* =========================================
   [댓글 작성 폼] 하단 비밀글 및 등록 버튼 영역
========================================= */
.bo_vc_w_wr {
    display: flex;
    justify-content: space-between; /* 좌측 비밀글, 우측 등록버튼을 양끝으로 밀어냄 */
    align-items: center;
    margin-top: 14px;
}

.bo_vc_w_info {
    display: flex;
    align-items: center;
}

.bo_vc_secret {
    display: flex;
    align-items: center;
    gap: 6px; 
}

.bo_vc_secret input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1a3952; 
    cursor: pointer;
    margin: 0;
}

.bo_vc_secret label.icon_lock {
    font-size: 15px;
    color: #888888;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.bo_vc_secret label.icon_lock:hover {
    color: #1a3952;
}

/* 댓글 등록 쫀득 버튼 (싹다버림 캡슐 스타일) */
.btn_confirm {
    margin: 0;
}

.btn_confirm .btn_submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    background: #1a3952;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 27px; 
    border: none;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2);
    transition: transform 0.1s ease;
}

.btn_confirm .btn_submit:active {
    transform: scale(0.96);
}

/* --- 댓글 쓰기 영역 --- */
#bo_vc_w {
    /* 원본: position:relative; margin-bottom:2.7778vw; padding:0 4.1667vw 4.1667vw; border-bottom:0.2778vw solid #cfded8; */
    margin-top: 20px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

#bo_vc_w h2 {
    /* 원본: padding:2.7778vw 0 1.3889vw; */
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}

#bo_vc_w #char_cnt {
    /* 원본: display:block; margin-bottom:1.3889vw; */
    display: block;
    text-align: right;
    font-size: 12px;
    color: #888888;
    margin-bottom: 5px;
    font-weight: normal;
}

#bo_vc_w textarea {
    /* 원본: width:99%; */
    width: 100%;
    height: 90px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 14px;
    resize: none;
    outline: none;
    background: #fafbfc;
}
.bo_vc_w textarea#wr_content {
    width: 100%;
    height: 90px;
    padding: 14px;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 14px;
    resize: none;
    outline: none;
    background: #f8f9fa;
    transition: all 0.2s ease;
	margin-top: 15px;
}
/* =========================================
   [대댓글(답변)] 계층 구조 시각화
========================================= */
#bo_vc article[style*="margin-left"] {
    background-color: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #f1f3f5 !important;
    margin-bottom: 12px;
	margin-top: 15px;

}

#bo_vc article[style*="margin-left"]::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -14px;
    width: 10px;
    height: 10px;
    border-left: 2px solid #adb5bd;
    border-bottom: 2px solid #adb5bd;
}
/* 입력창 터치(포커스) 시 반응 */
.bo_vc_w textarea#wr_content:focus {
    background: #ffffff;
    border-color: #1a3952;
    box-shadow: 0 0 0 3px rgba(26, 57, 82, 0.08);
}
#bo_vc_sns {
    margin: 0;
    padding: 0;
    list-style: none;
    zoom: 1;
}

#bo_vc_sns:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_vc_sns li {
    float: left;
    margin: 0 10px 0 0;
}

#bo_vc_sns input {
    margin: 0 0 0 5px;
}

#bo_vc form {
    padding: 0;
}
/* =========================================
   [댓글목록] 열기/닫기 토글 버튼 스타일
========================================= */
.cmt_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin: 20px 0 12px;
    background: #ffffff;
    color: #1a3952;
    border: 1px solid #1a3952;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(26, 57, 82, 0.05);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cmt_btn i {
    font-size: 16px;
}

.cmt_btn:active {
    transform: scale(0.98);
}

.cmt_btn.cmt_btn_op {
    background: #1a3952;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2);
}

#bo_w .bo_w_flie.write_div {
    margin-bottom: 0 !important; 
}

#bo_w .file_wr.write_div {
    margin-bottom: 12px !important;
}

#bo_w .bo_w_flie .file_wr {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafbfc;
    height: 48px;
    padding-left: 48px;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
}

/* 왼쪽 다운로드 아이콘 박스 */
#bo_w .bo_w_flie .lb_icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 100%; 
    background: #f1f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #dcdcdc;
    color: #888888;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 11px 0 0 11px;
}

/* 오른쪽 파일명 텍스트 부분 */
#bo_w .bo_w_flie .frm_file {
    width: 100%;
    padding: 0 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #555555;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
}

#bo_w .bo_w_flie .frm_file::file-selector-button {
    display: none;
}
#bo_w .bo_w_flie .frm_file::-webkit-file-upload-button {
    display: none;
}


#bo_w ul li label {
    /* 원본: margin-bottom: 1.1111vw; */
    margin-bottom: 4px;
}
/*footer*/
footer {
    position: fixed;
    /* 하단에서 20px 띄우고, 아이폰 하단 홈 바(인디케이터) 여백 추가 */
    bottom: calc(env(safe-area-inset-bottom) + 20px);
    left: 4%;
    width: 92%;
    height: 70px;
    
    /* 반투명 배경 및 블러 효과 */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    z-index: 100;
    font-family: 'Pretendard', sans-serif;
    border-radius: 35px; /* 완전한 캡슐 형태 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); /* 그림자 범위를 넓혀 부유감 확보 */
    display: flex;
    box-sizing: border-box;
    padding: 0 5px; /* 내부 탭 여백 */
}

footer ul {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

footer li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 11px;
    font-weight: 500;
    color: #777;
    cursor: pointer;
    border-radius: 30px; /* 클릭 시 둥근 배경이 들어가도록 설정 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

footer li img {
    display: block;
    height: 24px;
    margin-bottom: 4px;
    opacity: 0.4; /* 비활성 아이콘 명도 낮춤 */
}

footer li.active {
    background: #222; 
    color: #fff;
    font-weight: 600;
}

footer li.active img {
    opacity: 1;
    filter: invert(100%) sepia(0%) saturate(7482%) hue-rotate(72deg) brightness(114%) contrast(114%);
}


/*미디어쿼리*/
@media only screen and (max-width: 320px) {
    .pop-layer { width: 70%; }
}


/* 카드방침 */
.card_main{margin-top: 20.1111vw; padding: 0 4.1667vw;}
.card_main button{border: 0; background: transparent;}
.card_main h3{font-size:4.4444vw; font-weight: normal; margin-bottom: 2.7778vw;}
.card_main .card_txt{padding: 2.7778vw 4.1667vw; border: 0.2778vw solid #12416d; border-radius: 1.1111vw;}
.card_main .card_txt div{display: flex; align-items: center; justify-content: space-between;}
.card_main .card_txt p{font-size: 3.8889vw;}
.card_main .card_txt span{font-size: 3.8889vw;}
.card_main .card_txt .card_1 p{font-size: 3.8889vw; font-weight: bold;}
.card_main .card_txt .card_1 button{font-size: 3.3333vw;}
.card_main .card_txt .card_1 .dele{margin-left: 4.1667vw; color: #FF0000;}
.card_main .card_txt .card_1 .emend{color: #B4B4B4;}
.card_main .card_txt .card_2{margin: 4.7222vw 0 0.8333vw 0;}
.card_main .card_registr{ position: fixed;  bottom: 13.8889vw; padding: 2.5000vw 36.2778vw 4.4444vw 35.2778vw; font-size: 5.0000vw; background-color: #12416d; color: #fff; border-radius: 1.9444vw; }

/* 카드수정 */
#emend{margin-top: 20.1111vw; padding: 0 4.1667vw;}
#emend input{padding: 1.3889vw ; border: 1px solid #E4E4E4; border-radius: 4px;}
#emend ul li{display: flex; align-items: center; justify-content: space-between;}
#emend ul li b{font-size: 4.4444vw;}
#emend ul .card-num input{width: 8.1111vw;}
#emend ul .card-period {margin: 2.7778vw 0;}
#emend ul .card-period input{width: 19.5555vw;}
#emend ul .card-pass input{width: 51.2778vw;}
#emend .card_registr{ position: fixed;  bottom: 13.8889vw; padding: 2.5000vw 40.8333vw 4.4444vw 40.8333vw; font-size: 5.0000vw;border: 0; background-color: #12416d; color: #fff; border-radius: 1.9444vw; }


/* 채팅하기 -채팅목록 */
#chat{margin-top: 15.1111vw;font-family:Noto Sans CJK KR; }
#chat .one_line{display: flex; align-items: center; justify-content: space-between; height: 19.4444vw; padding: 0 4.1667vw; border-bottom: 1px solid #E4E4E4;}
#chat .one_line .front{display: flex; align-items: center;}
#chat .one_line .chat_profil{max-width: 11.1111vw; margin-right: 4.1667vw;}
#chat .one_line .chat_profil img{width: 100%;}
#chat .one_line .info p{font-size: 4.4444vw; font-weight: bold;}
#chat .one_line .info span{font-size: 3.3333vw; color: #9F9F9F;}
#chat .one_line .close_BT{border: 0; background: none; max-width: 6.6667vw;}
#chat .one_line .close_BT img{width: 100%;}


/* 채팅하기 - 관리자 */
#chat_write{margin-top: 10.1111vw; padding: 0 4.1667vw; font-family:Noto Sans CJK KR;}
#chat_write .date{font-size: 3.3333vw; text-align: center; margin-top: 3vw;}
#chat_write .wrap{padding: 0 0 34.5555vw 0;}
#chat_write ul li{}
#chat_write .wrap .chat .textbox{position: relative; display: inline-block;  padding:  2.2222vw 2.7778vw;  border-radius: 2.7778vw; background-color: #E6E7F2; font-size: 3.8889vw;}
#chat_write .wrap .chat .time{padding-right: 5px; font-size:3.3333vw ;}
#chat_write .wrap .ch1 {display: flex; justify-content: flex-end; align-items: flex-end; text-align: left; margin-top: 2.3889vw;}
#chat_write .wrap .ch1 .textbox{min-width: 42.8333vw; max-width: 61.1111vw; border-bottom-right-radius: 0;}
#chat_write .wrap .ch2 .textbox{min-width: 42.8333vw; max-width: 61.1111vw; border-top-left-radius: 0; background-color: #F8F8F8;}
#chat_write .wrap .ch2 {display: flex;  margin-top: 13.3888vw; margin-bottom: 11.6666vw;}
#chat_write .wrap .ch2 .img_box{display: flex; align-items: flex-end; }
/* #chat_write .wrap .ch2_img{align-items: flex-end; margin-left: 12.1111vw; margin-top: 1.1111vw; margin-bottom: 9.9999vw;} */
#chat_write .wrap .ch2  .icon{display: flex; flex-direction: column; margin-left: 1.9444vw;}
#chat_write .wrap .ch2  .icon_ch2{margin-left: 12.9444vw;}
#chat_write .wrap .ch2  .icon .fa-user{font-size: 4.4444vw; margin-bottom: 1.6667vw;}
#chat_write .wrap .ch2 .left{max-width: 11.1111vw; max-height: 11.1111vw;}
#chat_write .wrap .ch2 .left img{max-width: 100%; max-height: 100%;}

#chat_write .wrap .upload{width: 50vw; padding: 1.3333vw; border-radius: 2.6667vw; background-color: #fff; border: 0.2667vw solid #E2E2E2; margin-top: 1.0000vw;}
#chat_write .wrap .upload img{width:100%;  border-radius: 2.6667vw;}
#chat_write .wrap .upload_a1 {display: block; float: right; } 

#message_area .message{position: fixed; bottom: 0; left: 0;  display: flex; align-items: center; height: 19.4444vw;  padding: 0 2.7778vw;background-color: #F1F1F1;}
#message_area .message .btn_upload{ width: 10.7777vw;height: 10.7777vw;font-size: 5.3333vw;font-weight: bold;background-color: #fff;border: 1px solid #E4E4E4;display: flex;align-items: center;justify-content: center;}
#message_area .message #file{display: none;}
#message_area .message .add_img_bt img{width: 100%;}
#message_area .message .messge_input{margin-right: 1.3889vw; margin-left: 1.3889vw;}
#message_area .message .messge_input input{width: 60.2778vw; border: 1px solid #E4E4E4; padding: 3.3332vw 0 3.5556vw 2.7778vw;}
#message_area .message .messge_input input::placeholder{font-size: 3.8889vw; color: #BBBBBB;}
#message_area .message .submit_bt{width: 17.2222vw;border: 0; padding: 3.0556vw 0 2.7778vw 0; background: none; background-color: #135A9A; font-size: 3.8889vw; color: #fff;}



/* 첫 수거신청 팝업 */
.sub19_first{display: none;}
.sub19_first.on{display: block; position: fixed;top: 0;width: 100%;height: 100vh;z-index: 999;box-sizing: border-box;transition: 0.3s ease all;}
.sub19_first .bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color:rgba(0,0,0,0.6);}
.sub19_first .content{width: 90.6250vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5.5469vw 6.2500vw 6.2500vw; box-sizing: border-box; border-radius: 2.1875vw; border: 0.1563vw solid #000000; background-color: #FFF;}
.sub19_first .content .title{text-align: center; font-size: 3.7500vw; font-weight: bold;}
.sub19_first .content .text{margin: 7.1250vw 0; font-size: 3.4444vw; line-height: 1.7;}
.sub19_first .content .btn{width: 30%; margin: 0 auto;}
.sub19_first .content .btn .ok_btn{font-size: 3.4444vw; padding: 1.5625vw 3.9063vw; border: 0; border-radius: 1.0938vw; background-color: #12416d; color: #fff;}

/* =========================================
   [공통] 서브페이지 타이틀
========================================= */
.page-title {
    font-size: 24px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}
.container{
	padding: 90px 20px 60px !important;
}
/* =========================================
   [서브페이지] 주문내역 (sub8_list.php)
========================================= */
#detail {
    padding: 90px 20px 60px;
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
    min-height: 100dvh;
    background-color: #f8f9fa; 
}



#detail .wrap {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    padding: 10px 20px 20px; 
    box-sizing: border-box;
}

/* 주문내역 리스트 테이블 */
#detail table { width: 100%; border-collapse: collapse; }
#detail table th { background: #ffffff; padding: 15px 10px; text-align: center; border-bottom: 2px solid #111111; font-size: 14px; font-weight: 700; color: #111111; }
#detail table td { padding: 15px 10px; text-align: center; border-bottom: 1px solid #f1f3f5; font-size: 14px; color: #444444; }
#detail table tr:last-child td { border-bottom: none; }
#detail table td a { display: inline-block; padding: 6px 12px; background: #1a3952; color: #ffffff; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; }
/* =========================================
   [서브페이지] 주문 상세내역 (sub8_detail.php)
========================================= */
#detail .wrap ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

#detail .wrap ul li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid #eeeeee;
}

#detail .wrap ul li h2,
#detail .wrap ul li p {
    font-size: 14px;
    font-weight: 600;
    color: #777777;
    margin: 0;
    width: 30%;
    word-break: keep-all;
    line-height: 1.5; 
    padding-top: 1px; 
}

/* 오른쪽 내용 */
#detail .wrap ul li h3,
#detail .wrap ul li span {
    font-size: 15px;
    font-weight: 500;
    color: #111111;
    margin: 0;
    width: 70%;
    text-align: right;
    line-height: 1.5;
    word-break: break-all;
}

/* 영수증(수거완료) 영역 스타일 */
#detail .wrap ul.infomaition {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-top: none;
}

#detail .wrap ul.infomaition li {
    border-bottom: 1px dashed #dddddd;
    padding: 12px 0;
}

/* 합계 금액 강조 */
#detail .wrap ul.infomaition li:last-child {
    border-bottom: none;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid #111111;
}

#detail .wrap ul.infomaition li:last-child p,
#detail .wrap ul.infomaition li:last-child span {
    font-size: 18px;
    font-weight: 700;
    color: #1a3952;
}

.change-btn {
    display: block;
    width: 100%;
    height: 54px; 
    line-height: 54px; 
    padding: 0;
    background: #1a3952;
    border: none;
    border-radius: 27px; 
    font-size: 16px !important;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 6px 15px rgba(26, 57, 82, 0.2);
    transition: transform 0.2s;
    margin-top: 20px; 
}

.change-btn:active {
    transform: scale(0.98);
}
/* 첨부 사진 영역 */
.photo-div { margin-top: 30px; }
.photo-div h3 { font-size: 16px; font-weight: 700; margin-bottom: 15px; color: #111111; }
.photo-in img { max-width: 100%; border-radius: 8px; border: 1px solid #eeeeee; }


/* =========================================
   싹다버림: 아이디/비밀번호 찾기 모바일 UI
========================================= */
.find-wrap { 
    padding: 40px 20px 60px; 
    font-family: 'Pretendard', sans-serif; 
    background: #ffffff; 
    min-height: 80vh; 
    box-sizing: border-box; 
}
.find-wrap .page-title { 
    font-size: 24px; 
    font-weight: 700; 
    color: #111111; 
    text-align: center; 
    margin-bottom: 30px; 
    letter-spacing: -0.5px; 
}
.find-wrap .info-txt { 
    font-size: 15px; 
    color: #555555; 
    line-height: 1.6; 
    text-align: center; 
    margin-bottom: 30px; 
    word-break: keep-all; 
}
.find-wrap .frm_input { 
    width: 100%; 
    height: 54px; 
    border: 1px solid #dddddd; 
    border-radius: 8px; 
    padding: 0 15px; 
    font-size: 15px; 
    box-sizing: border-box; 
    margin-bottom: 20px; 
}
.find-wrap .frm_input:focus { 
    border-color: #1a3952; 
    outline: none; 
}
/* ★ 싹다버림 시그니처 캡슐 버튼 */
.find-wrap .btn_submit { 
    display: block; 
    width: 100%; 
    height: 54px; 
    background: #1a3952; 
    border: none; 
    border-radius: 27px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #ffffff; 
    cursor: pointer; 
    box-shadow: 0 6px 15px rgba(26, 57, 82, 0.2); 
  
    margin-top: 15px; 
    transition: transform 0.2s;
}
.find-wrap .btn_submit:active { 
    transform: scale(0.98); 
}
/* 자동가입방지(캡차) 영역 여백 보정 */
#captcha.m_captcha audio{display:inline-block;}
fieldset#captcha { 
    border: none; 
    padding: 0; 
    margin-bottom: 20px; 
	text-align: center;
}




/* =========================================
   [서브페이지] 이용 요금 안내 (use_price)
========================================= */
#use_price {
    padding: 40px 20px 60px;
    background-color: #f8f9fa;
    min-height: 100vh;
    box-sizing: border-box;
}

/* 요금 안내 박스 */
.price-info-box {
    background: #ffffff;
    border: 2px solid #1a3952;
    border-radius: 12px;
    padding: 25px 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.price-info-box ul {
    list-style: none;
    padding: 0; margin: 0;
}

.price-info-box ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #eeeeee;
}
.price-info-box ul li:last-child { border-bottom: none; }

.price-info-box ul li span {
    font-size: 15px;
    font-weight: 600;
    color: #555555;
}

.price-info-box ul li strong {
    font-size: 16px;
    font-weight: 700;
    color: #1a3952;
	text-align: right;
}

/* 예상 요금 계산기 UI */
.calculator-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.calculator-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 20px 0;
    text-align: center;
}

.calc-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.calc-input-wrap input {
    width: 120px;
    height: 50px;
    text-align: right;
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 0 15px;
    margin-right: 10px;
}
.calc-input-wrap input:focus { border-color: #1a3952; outline: none; }
.calc-input-wrap span { font-size: 18px; font-weight: 600; color: #111111; }

.calc-result {
    background: #f1f3f5;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.calc-result p { margin: 0 0 5px 0; font-size: 14px; color: #555555; font-weight: 600; }
.calc-result strong { font-size: 24px; color: #1a3952; font-weight: 700; }

.calc-noti {
    font-size: 13px;
    color: #888888;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
}


/* =========================================
   [서브페이지] 이용가이드 (참신한 트렌디 앱 UI)
========================================= */
#guide {
    padding: 30px 20px 60px;
    font-family: 'Pretendard', sans-serif;
    background-color: var(--bg_light); 
    min-height: 100vh;
    box-sizing: border-box;
}

.guide-hero {
    background: var(--point_color);
    border-radius: 20px;
    padding: 35px 24px;
    color: #ffffff;
    margin-bottom: 24px;
    box-shadow: 0 10px 25px rgba(13, 65, 105, 0.2);
}

.guide-hero h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--point_orange);
    margin: 0 0 15px 0;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.guide-hero p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

.guide-hero p b { color: #ffffff; }

/* 세련된 벤토 박스(카드) 스타일 */
.g-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    border: 1px solid var(--border_color);
}

/* 모던한 넘버링 타이틀 */
.g-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--point_color); 
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.g-tit {
    font-size: 20px;
    font-weight: 800;
    color: var(--text_dark);
    margin: 0 0 24px 0;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.g-list {
    display: flex;
    flex-direction: column;
    gap: 16px; 
}

.g-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* 세련된 원형 체크마크 아이콘 (브랜드 컬러 적용) */
.g-item i {
    width: 20px;
    height: 20px;
    background: rgba(13, 65, 105, 0.08); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.g-item i::before {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: solid var(--point_color); 
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.g-item p {
    margin: 0;
    font-size: 15.5px;
    color: #555555;
    line-height: 1.6;
    word-break: keep-all;
}

.g-item p b {
    color: var(--text_dark);
    font-weight: 700;
}

.g-card.alert {
    background: #fffcf9; 
    border: 1px solid rgba(232, 102, 8, 0.15);
    margin-top: 30px;
}
.g-card.alert .g-num { color: var(--point_orange); }
.g-card.alert .g-item i { background: rgba(232, 102, 8, 0.1); }
.g-card.alert .g-item i::before { border-color: var(--point_orange); }


/* =========================================
   [서브페이지] 알림내역 (notice_detail)
========================================= */
#notice_detail {
    padding: 30px 20px 60px;
    font-family: 'Pretendard', sans-serif;
    background-color: var(--bg_light);
    min-height: 100vh;
    box-sizing: border-box;
}

/* 공통 타이틀 */
.page-title {
    font-size: 24px; 
    font-weight: 700; 
    color: var(--text_dark); 
    text-align: center; 
    margin-bottom: 24px; 
    letter-spacing: -0.5px;
}

.notice-wrap ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 모던 앱 스타일 알림 카드 */
.notice-item {
    background: #ffffff;
    border: 1px solid var(--border_color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}


.notice-icon {
    width: 42px;
    height: 42px;
    background-color: rgba(13, 65, 105, 0.06); 
    background-image: url('../img/notifications.png'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px; 
    border-radius: 50%;
    flex-shrink: 0;
}
.notice-content {
    flex-grow: 1;
}

.notice-msg {
    font-size: 15.5px;
    color: var(--text_dark);
    line-height: 1.5;
    margin: 0 0 6px 0;
    word-break: keep-all;
    font-weight: 600;
}

.notice-date {
    font-size: 13px;
    color: var(--text_gray);
    margin: 0;
    font-weight: 400;
}



/* =========================================
   [서브페이지] 마이페이지 
========================================= */
#mypage { 
    padding: 20px 20px 100px 20px; 
    box-sizing: border-box; 
    background: var(--bg_light, #f4f6f8);
    min-height: 100vh;
}

#mypage .profile { 
    background: #ffffff; 
    padding: 24px 20px; 
    box-sizing: border-box; 
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    border: 1px solid var(--border_color, #eaeaea);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#mypage .profile-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
#mypage .profile {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
}

#mypage .profile .edit-link {
    font-size: 13px;
    color: #666;
    text-decoration: none;
}

#mypage .profile h2 {  
    font-size: 17px; 
    font-weight: 700; 
    color: var(--text_dark, #111111); 
    margin: 0; 
    letter-spacing: -0.5px;
}
#mypage .profile .edit-link {
    display: inline-block;
    padding: 6px 12px;
    background: #f1f3f5;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #666666;
    text-decoration: none; 
    transition: background 0.2s;
}

#mypage .profile .edit-link:hover {
    background: #e2e6ea;
    color: #333333;
}
#mypage .profile h3 { margin: 0; }

#mypage .profile input[type="button"] { 
    display: inline-block; 
    padding: 6px 12px;
    background: #f1f3f5; 
    border: none; 
    border-radius: 8px;
    font-size: 12.5px; 
    font-weight: 600; 
    color: #666666; 
    cursor: pointer;
    transition: background 0.2s;
}
#mypage .profile input[type="button"]:hover {
    background: #e2e6ea;
    color: #333333;
}
#mypage .wrap { 
    width: 100%; 
    max-width: 500px;
    margin: 0 auto; 
    background: #ffffff;
    border-radius: 24px;
    padding: 8px 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    border: 1px solid var(--border_color, #eaeaea);
}

#mypage .wrap ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#mypage .wrap li { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0; 
    border-bottom: 1px solid #f1f3f5; 
    box-sizing: border-box; 
    min-height: 56px;
    height: auto !important; 
}

#mypage .wrap li:last-child {
    border-bottom: none;
}

#mypage .wrap li h2 { 
    font-size: 15px; 
    font-weight: 600; 
    color: #555555; 
    margin: 0;
    white-space: nowrap;
}

#mypage .wrap li h3 { 
    font-size: 15px; 
    font-weight: 600; 
    color: var(--text_dark, #111111); 
    margin: 0;
    text-align: right !important; 
    word-break: keep-all;
    line-height: 1.4;
}
#mypage .wrap li:has(br) {
    align-items: flex-start;
    padding: 20px 0;
}
#mypage .wrap li:has(br) h3 {
    text-align: right !important; 
    display: inline-block;
    max-width: 70%; 
    font-weight: 500;
    color: var(--text_dark, #111111);
    line-height: 1.5;
}
#mypage .wrap li h3 span { 
    font-weight: 800; 
    color: var(--point_orange) !important; 
    font-size: 16px;
}
#mypage .wrap li:has(span) h3 {
    color: var(--point_orange) !important;
    font-weight: 800;
}
#mypage .wrap li:has(span) h3 span {
    font-size: 17px;
}
#mypage .wrap li:nth-last-child(2) {
    border-bottom: none !important;
}
/* 회원탈퇴 버튼 스타일링 */
#mypage .wrap li[onclick="leave()"] {
    margin-top: 4px;
    padding-top: 18px;
    padding-bottom: 6px;
    border-top: 2px dashed #eaeaea;
    cursor: pointer;
    display: flex;
    justify-content: flex-start; 
}
#mypage .wrap li[onclick="leave()"] h2 {
    color: #e03131;
    font-size: 14px;
    font-weight: 600;
}

/* =========================================
   [서브페이지] 마이페이지 수정하기 
========================================= */

#mypage { 
    padding: 20px 20px 100px 20px; 
    box-sizing: border-box; 
    background: var(--bg_light, #f4f6f8);
    min-height: 100vh;
}

/* 상단 프로필 박스 (기존 filebox 구조 완벽 호환) */
#mypage .profile-box, #mypage .profile.filebox {
    background: #ffffff; 
    padding: 24px 20px; 
    box-sizing: border-box; 
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    border: 1px solid var(--border_color, #eaeaea);
    text-align: center;
}
#mypage .profile-box h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text_dark, #111111);
    margin-top: 12px;
    margin-bottom: 0;
}

/* 입력 폼 전체 카드 래퍼 */
#mypage .wrap.form-wrap {
    width: 100%; 
    max-width: 500px;
    margin: 0 auto; 
    background: #ffffff;
    border-radius: 20px;
    padding: 10px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    border: 1px solid var(--border_color, #eaeaea);
}

#mypage .form-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 각각의 입력 행 (Flex 레이아웃으로 라벨과 인포 깔끔하게 정렬) */
#mypage .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f1f3f5;
    box-sizing: border-box;
}
#mypage .form-item:last-child {
    border-bottom: none;
}

/* 좌측 라벨 (비밀번호, 닉네임 등) */
#mypage .form-item h2 {
    font-size: 15px;
    font-weight: 600;
    color: #555555;
    margin: 0;
    white-space: nowrap;
    width: 25%;
}

/* 우측 입력 필드 영역 컨테이너 (h3 태그 그대로 활용) */
#mypage .form-item .input-area {
    position: relative;
    margin: 0;
    width: 75%;
	max-width:75% !important;
    text-align: right;
}

#mypage .form-item .input-area input[type="text"],
#mypage .form-item .input-area input[type="password"],
#mypage .form-item .input-area select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d9dde2;
    border-radius: 10px;
    background-color: #fcfcfc;
    font-size: 14.5px;
    color: var(--text_dark, #111111);
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
    outline: none;
    transition: all 0.2s;
}

#mypage .form-item .input-area input:focus,
#mypage .form-item .input-area select:focus {
    border-color: var(--point_color);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(13, 65, 105, 0.08);
}

#mypage .form-item.address-item {
    align-items: flex-start;
    padding: 20px 0;
}

#mypage .address-inputs input[type="text"] {
    margin-bottom: 8px;
}
#mypage .address-inputs input[type="text"]:first-child {
    width: 110px; 
    display: inline-block;
    float: left;
    margin-right: 6px;
    background-color: #f1f3f5;
    cursor: pointer;
}
#mypage .address-inputs input[type="text"]:nth-child(3),
#mypage .address-inputs input[type="text"]:nth-last-child(1) {
    clear: both;
}

/* 휴대전화 및 인증 버튼 영역 */
#mypage .form-item.phone-item .input-area input[type="text"] {
    margin-bottom: 8px;
    background-color: #f1f3f5;
}
#mypage .form-item.phone-item .input-area input[type="button"] {
    width: 100%;
    height: 54px;
    background: #1a3952;
    border: none;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(26, 57, 82, 0.2);
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
}

/* 인증요청 버튼 쫀득한 누름 효과 */
#mypage .form-item.phone-item .input-area input[type="button"]:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: 0 2px 5px rgba(26, 57, 82, 0.2);
}

/* 인증 완료 안내 텍스트 */
#mypage #msg_certify {
    font-size: 12.5px;
    color: #2b8a3e;
    margin-top: 6px;
    text-align: right;
}

/* 하단 [수정하기] 버튼 박스 */
#mypage .btn-wrap {
    margin-top: 24px;
    padding-bottom: 10px;
}
#mypage .submit-btn {
    width: 100%;
    height: 54px;
    background: #1a3952;
    border: none;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(26, 57, 82, 0.2);
    transition: all 0.2s ease-in-out;
}

#mypage .submit-btn:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: 0 2px 5px rgba(26, 57, 82, 0.2);
}


/* =========================================
   [서브페이지] 서비스 이용지역 안내 페이지
========================================= */

#service_area {
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    background: #ffffff;
    min-height: calc(100vh - 120px);
}

#service_area .wrap {
    max-width: 500px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 0;
    box-sizing: border-box;
}

/* 지도 이미지 카드 래퍼 */
#service_area .service-map-box {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 16px;
    overflow: hidden;
    background: #f8f9fa;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
}

#service_area .service-map-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* 안내 텍스트 박스 */
#service_area .service-info-box {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 20px;
    text-align: left;
    border: 1px solid #eaeaea;
    box-sizing: border-box;
}

#service_area .service-time-text {
    font-size: 15px;
    color: #333333;
    line-height: 1.6;
    margin: 0;
}
/* 지도 이미지 래퍼 기준점 설정 */
.service-map-box {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.service-map-box img {
    display: block;
    width: 100%;
    height: auto;
}

/* 지도 위 정중앙 텍스트 배치 */
.service-map-box .map-overlay-txt {
    position: absolute;
    top: 49%;
    left: 48%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); /* 지도 배경과 대비를 위한 은은한 그림자 */
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}
#service_area .service-time-text strong {
    display: block;
    font-size: 16px;
    color: #111111;
    margin-bottom: 8px;
}

/* 구분선 */
#service_area .service-divider {
    width: 100%;
    height: 1px;
    background: #eaeaea;
    margin: 16px 0;
}

#service_area .service-warning-text {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

#service_area .service-warning-text strong {
    display: block;
    font-size: 15px;
    color: var(--point_orange);
    margin-bottom: 4px;
}
#company_info {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    min-height: calc(100vh - 120px);
}

#company_info .wrap {
    max-width: 500px;
    margin: 0 auto;
}

#company_info .company-title-box {
    margin-bottom: 20px;
    padding: 0 4px;
}

#company_info .company-title-box h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    margin: 0;
}

#company_info .company-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    overflow: hidden;
}

#company_info .company-list li {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 16px 20px;
    border-bottom: 1px solid #eaeaea;
    box-sizing: border-box;
}
#company_info .company-list li:last-child {
    border-bottom: none;
}

#company_info .company-list .label {
    font-size: 14px;
    font-weight: 600;
    color: #666666;
    flex-shrink: 0;
    width: 110px;
	line-height: 1.4;
}

#company_info .company-list .value {
    font-size: 14px;
    font-weight: 500;
    color: #111111;
    text-align: right;
    line-height: 1.4;
}

/* 주소처럼 긴 텍스트 줄바꿈 대응 */
#company_info .company-list li.addr-item .value {
    text-align: right;
}
/* 관리자 상단 툴바 */
#board-list .board-admin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}

#board-list .chk-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
}

#board-list .btn-select-del {
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* 체크박스 정렬 및 여백 */
#board-list .board-chk-wrap {
    padding-left: 18px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#board-list input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1a3952;
    cursor: pointer;
}
#board-list .board-item {
    display: flex !important;
    align-items: center !important;
}
#board-list {
    padding: 24px 16px;
    box-sizing: border-box;
    background: #ffffff; 
    min-height: calc(100vh - 120px);
}

#board-list .wrap {
    max-width: 500px;
    margin: 0 auto;
}


#board-list .board-list-box {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e8eb;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

#board-list .board-item {
    border-bottom: 1px solid #f1f3f5;
    box-sizing: border-box;
    transition: background 0.15s ease;
}

#board-list .board-item:last-child {
    border-bottom: none;
}

#board-list .board-item:hover {
    background: #f8f9fa;
}

#board-list .gall_li_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    text-decoration: none;
    box-sizing: border-box;
}

#board-list .board-subject {
    font-size: 15px;
    font-weight: 500;
    color: #212529;
    letter-spacing: -0.3px;
    padding-right: 10px;
    flex: 1; 
    white-space: normal; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all; 
    line-height: 1.4;
}

#board-list .gall_li_tit {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

#board-list .board-subject {
    flex: 1;
}

#board-list .board-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

#board-list .board-arrow img {
    width: 8px;
    height: 13px;
    display: block;
    object-fit: contain;
    opacity: 0.4;
}

#board-list .empty_table {
    padding: 50px 0;
    text-align: center;
    font-size: 14px;
    color: #888888;
}

#board-list .board-btn-wrap {
    margin-top: 20px;
    text-align: right;
}

#board-list .board-btn-wrap a {
    display: inline-block !important;
    padding: 12px 24px !important;
    background: #1a3952 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 27px !important; 
    text-decoration: none !important;
    font-family: 'Pretendard', sans-serif !important;
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2) !important;
}
/* =========================================
   [게시판] 트렌디한 앱 스타일 페이징 리모델링
========================================= */
#board-list .paging {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 20px;
}

#board-list .paging .pg_wrap {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eaeaea;
}

#board-list .paging span,
#board-list .paging a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    height: 32px;
    margin: 0 2px;
    border-radius: 50%; 
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    color: #666666;
    border: none;
    transition: all 0.2s ease;
}

#board-list .paging a:hover {
    background: #f1f3f5;
    color: #111111;
}

#board-list .paging .sound_only {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

#board-list .paging strong,
#board-list .paging .current {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    height: 32px;
    margin: 0 2px;
    border-radius: 50%;
    font-size: 13.5px;
    background: #1a3952;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(26, 57, 82, 0.25);
}

#board-list .paging .pg_page.pg_start,
#board-list .paging .pg_page.pg_end,
#board-list .paging .pg_page.pg_prev,
#board-list .paging .pg_page.pg_next {
    border-radius: 16px;
    font-size: 12px;
    color: #888888;
}


/* =========================================
   [싹다버림] 게시판 뷰페이지(view.skin.php) 모던 리폼 스타일
========================================= */

#bo_v {
    margin: 0 auto 40px;
    padding: 0 16px;
    box-sizing: border-box;

    max-width: 600px;
}

/* 본문을 감싸는 카드 컨테이너 */
article#bo_v {
    background: #ffffff; 
   padding: 0 20px;
    box-sizing: border-box;
}

#bo_v header {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f3f5;
}

#bo_v_title {
    padding: 0;
    margin: 0 0 6px 0;
    border-bottom: none !important;
}

#bo_v_title span.bo_v_tit {
    display: block;
    font-size: 20px;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.4;
}

#bo_v header p {

    font-size: 13px;
    color: #888888;
    display: flex;
    align-items: center;

}

#bo_v_info {
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #eaeaea;
    margin-top: 10px;
}
#bo_v_info h2 { display: none; }
#bo_v_info strong { font-weight: normal; color: #555555; }

#bo_v_top {
    margin: 16px 0;
    padding: 0;
}
#bo_v_share{display: none;}
#bo_v_top ul.bo_v_left {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; 
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_v_top ul.bo_v_left li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: #f4f6f9;
    color: #495057;
    font-size: 12.5px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #e2e6ea;
    transition: all 0.2s ease;
}

#bo_v_top ul.bo_v_left li a:hover {
    background: #1a3952;
    color: #ffffff;
    border-color: #1a3952;
}

#bo_v_atc {
    padding: 16px 0;
}

#bo_v_con {
    margin-bottom: 24px;
    line-height: 1.75em;
    font-size: 15px;
    color: #212529;
    word-break: break-all;
}

#bo_v_con img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 12px 0;
}

/* 첨부파일 및 관련링크 박스 */
#bo_v_file, #bo_v_link {
    margin-top: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid #eaeaea;
}

#bo_v_file ul, #bo_v_link ul { margin: 0; padding: 0; list-style: none; }
#bo_v_file li, #bo_v_link li { padding: 4px 0; font-size: 13px; }
#bo_v_file a, #bo_v_link a { color: #1a3952; text-decoration: none; }

/* 하단 이전글 / 다음글 / 목록 버튼 */
.bo_v_nb {
    display: flex;
    gap: 8px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.bo_v_nb li { flex: 1; }

.bo_v_nb li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    background: #f1f3f5;
    color: #333333;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    box-sizing: border-box;
}

.bo_v_nb li.bo_v_prev a, 
.bo_v_nb li.bo_v_next a {
    background: #f8f9fa;
    border: 1px solid #eaeaea;
}

.bo_v_nb li a.btn_list {
    background: #1a3952;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(26, 57, 82, 0.2);
}