@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=block');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=block');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=block');
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

.page_wrap { display: flex; flex-direction: column; min-height: 100vh;}
.page_wrap .container { flex: 1;}

/* 1240 이하 등장 효과 끄기 — landing-common.js staticRevealFreeze() 가 .active 를 일괄로 붙이는 두 프레임 동안만 트랜지션을 꺼서
   처음부터 최종 모습으로 그린다(2026-10-13 사용자 지시). 잠깐만 거는 클래스라 hover·슬라이더 등 이후 동작에는 영향 없음 */
html.reveal_static *, html.reveal_static *::before, html.reveal_static *::after {transition: none !important;}


:root {
	--hdH: 10rem; 
    --hdIn: 5rem;
 
    --subVisPd: 12rem;
    --subPd: 20rem;

    --inPd: 20px;
    --inpH: max(6rem, 50px);

    --inM: max(184rem, 1340px);
    --in:  max(164rem, 1340px);
    --in2: max(144rem, 1040px);
    --in3: max(124rem, 1040px);
    --in4: max(104rem, 940px);
    --in5: max(94rem, 840px);

    --point01: #493C75;
    --point02 : #756D9E;
    --pointBg:#F3F6FF; /* 포인트계열 BG */
    --point03: #F1EFF8; /* 연한 보라 (태그·정보 박스 배경) */
    --point04: #B5A0F9; /* 연한 보라 (필수입력 * 등 소형 액센트) */
    --brown: #A37E73;   /* 브라운 포인트 (스텝·체크 아이콘) */
    --beige: #E5DACA;
    --beigeBg: #FAF5EE; /* 베이지 배경 (전후사진·스텝 배지) */

    /* Gray */
    --gray5: #F5F7FA;
    --gray10: #E8E8E8;
    --gray20: #CFCFCF;
    --gray30: #B5B5B5;
    --gray40: #9C9C9C;
    --gray50: #828282;
    --gray60: #696969;
    --gray70: #4F4F4F;
    --gray80: #363636;
    --gray90: #1C1C1C;
    --black:var(--gray90);

    /* Cool Gray */
    --coolGray5: #F5F7FA;
    --coolGray10: #E4E7EB;
    --coolGray20: #CBD2D9;
    --coolGray30: #9AA5B1;
    --coolGray40: #7B8794;
    --coolGray50: #616E7C;
    --coolGray60: #52606D;
    --coolGray70: #3E4C59;
    --coolGray80: #323F4B;
    --coolGray90: #1F2933;

    --grayBg1:#F6F6F6;
    --grayBg2:#F5F7FA;
    --grayBg3:#EFF4FE;
    --line:var(--gray20);

    --en: 'Mona Sans', sans-serif;
    /* 영문 디스플레이 서체(--en)는 라틴 전용이라 중문·일문이 들어가면 시스템 폰트로 떨어진다.
       관리자에서 등록한 문구처럼 CJK 가 섞일 수 있는 자리는 --enCjk 를 쓴다(메인 KV 타이틀 등). */
    --enCjk: 'Mona Sans', "Pretendard Variable", Pretendard, "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif;
    --serif: "Noto Serif KR", serif;
	
    --d1:10rem; 
    --h1:6rem; 
    --h2:5.4rem; 
    --h3:4.5rem; 
    --h4:4rem; 
    --h5:max(3.5rem,28px); 
    --h6:max(3rem,25px);; 
    --h7:max(2.8rem,23px); 
    --h8:max(2.5rem,21px); 

    --p1:max(2.2rem,19px); 
    --p2:max(2rem,17px);
    --p3:max(1.8rem,15px);  /* 본문 */
    --p4:max(1.6rem,13px);
    --p5:max(1.5rem,12px);
    --p6:max(1.4rem,12px);
    --p7:max(1.3rem,11px);
    --p8:max(1.2rem,11px);

    --pd:30rem;
    --pd1:25rem;
    --pd2:20rem;
    --pd3:15rem;
    --pd4:10rem;

    --contMt1: 10rem;
    --contMt2: 8rem;
    --contMt3: 6rem;
    --contMt4: 4rem;

}


/* 드래그(텍스트 선택) 색 — 사용자 사이트만. 관리자(elevMng, <body class="body1">)도 이 파일을 불러오지만 브라우저 기본 선택색을 쓴다(2026-10-26 사용자 지시) */
body:not(.body1) ::selection {
    background: var(--point01);
    color: #fff;
}

body:not(.body1) ::-moz-selection {
    background: var(--point01);
    color: #fff;
}


/* Grid */
.in_f { position:relative; width: 100%; max-width:100%; margin:0 auto; }
.in_w { position:relative; width: 100%; max-width:100%; padding:0 var(--inPd); margin:0 auto; }
.in_m { position:relative; width:var(--inM); max-width:100%; padding:0 var(--inPd); margin:0 auto;}
.in   { position:relative; width:var(--in); max-width:100%; padding:0 var(--inPd); margin:0 auto; }
.in2  { position:relative; width:var(--in2); max-width:100%; padding:0 var(--inPd); margin:0 auto; }
.in3  { position:relative; width:var(--in3); max-width:100%; padding:0 var(--inPd); margin:0 auto; }
.in4  { position:relative; width:var(--in4); max-width:100%; padding:0 var(--inPd); margin:0 auto; }
.in5  { position:relative; width:var(--in5); max-width:100%; padding:0 var(--inPd); margin:0 auto; }

html.scroll_none,
body.scroll_none { overflow: hidden; }

body::-webkit-scrollbar { width: 5px; height: 5px; }
body::-webkit-scrollbar-thumb { height: 5px; background: #A9A9A9; border-radius: 5px; }
body::-webkit-scrollbar-track { background-color: #fff; }

.hidden,
.sr_only { position: absolute; width: 1px;height: 1px; padding: 0; margin: -1px;overflow: hidden;  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.clearfix::after{content: ''; display: block; clear: both;}

.pc_only { display:block;}
.mo_only { display:none !important }
.mini_only {display: none !important;}
.phone_only { display:none !important;}
.phone_over { display:block; }
.phone_over.inline { display:inline; }
.header .hd_mo { display: none; }
.header .hd_pc { display: block; }



.page_wrap .nice-select {font-size: var(--p3); border-radius: 5px; background: var(--grayBg1); border: none;}
.page_wrap .nice-select:active,
.page_wrap .nice-select.open,
.page_wrap .nice-select:focus{border: none;}
.page_wrap .nice-select:after { right: 2.3rem; width: 0.8em;; height: 0.5em; font-size: 1em; border: 0; transform: rotate(0deg); transform-origin: center; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7" fill="none"><path d="M10.5 0.5L5.5 5.5L0.5 0.5" stroke="%231C1C1C" stroke-linecap="round"/></svg>') no-repeat center / contain; transition: transform 0.3s; border: none;}
.page_wrap .nice-select.open:after { transform: rotate(180deg); }
.page_wrap .nice-select .list {min-width: 100%; box-shadow: 0 0 0 1px var(--gray20); top: calc(100% + 2px); background-color: #fff; border-radius: 1rem; max-height: 400px; overflow-y: auto;} 
.page_wrap .nice-select .list .option {height: 3em; line-height: 3em; min-height: 0; padding: 0 10px; position: relative;}
.page_wrap .nice-select .list::-webkit-scrollbar{display: inherit; width: 10px;}
.page_wrap .nice-select .list::-webkit-scrollbar-thumb{background: #BFBFBF; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px;}
.page_wrap .nice-select .list::-webkit-scrollbar-track{background: #fff;}
.page_wrap .nice-select .list::-webkit-scrollbar-button:vertical:decrement{height: 5px;}
.page_wrap .nice-select .list::-webkit-scrollbar-button:vertical:increment{height: 5px;}




/* === Footer === (Figma 207:7382 메인 / 474:6477 서브 — 2560 프레임 기준, 시안 px ÷ 10 = rem) */
footer{margin-top: auto;}
.footer {padding: 12rem 0 16rem; background-color: #1F2933; color: #fff;}
/* 서브 푸터(.footer_sub) = 메인에서 상단 블록(안내정보+지도)만 뺀 형태. 시안 상단 여백 60px */
.footer.footer_sub {padding-top: 6rem;}
.footer .in {display: flex; flex-direction: column; gap: 8rem; width: var(--in); max-width: 100%; margin: 0 auto; padding: 0 var(--inPd);}
.footer a, .footer a:visited {color: inherit;}

/* ---- 상단: 안내정보 + 지도 ---- */
.footer .footer_top {display: flex; align-items: center; justify-content: space-between; gap: 6rem;}
.footer .footer_info {display: flex; flex-direction: column; gap: 8rem; flex-shrink: 0; }
.footer .ft_label {font-size: var(--p1); font-weight: 700; line-height: 1; }

.footer .ft_tel {display: flex; flex-direction: column; gap: 3rem;}
.footer .ft_tel .tel_num {font-family: var(--en); font-size: 7rem; font-weight: 400; line-height: 1; }

.footer .ft_hours {display: flex; align-items: flex-start; gap: 5rem;}
.footer .ft_hours .ft_label {font-weight: 600; padding-top: .2rem;}
.footer .hour_list {display: flex; flex-direction: column; gap: 1.4rem;}
.footer .hour_list li {display: flex; align-items: center; gap: 1rem; line-height: 1;}
.footer .hour_list .day {flex-shrink: 0; width: 12.5rem; font-size: var(--p4); font-weight: 600; }
.footer .hour_list .time {font-size: var(--p3); font-weight: 400;  color: rgba(255,255,255,0.8);}
.footer .hour_list .note {font-size: var(--p4); font-weight: 600; margin-top: 1.4rem;}

.footer .ft_addr {display: flex; flex-direction: column; gap: 3rem;}
.footer .ft_addr .addr {font-size: var(--p1); font-weight: 700; line-height: 1; }
.footer .map_btns {display: flex; gap: 1.5rem;}
.footer .map_btn {display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 5.1rem; padding: 1.2rem 2.5rem; width: auto;border: 1px solid rgba(255,255,255,0.2); font-size: var(--p4); font-weight: 400; line-height: 1.4; white-space: nowrap; transition: border-color .3s, background-color .3s;}
.footer .map_btn img {flex-shrink: 0; width: auto; height: 2.3rem;}
.footer .map_btn.naver img {height: 2.7rem;}
.footer .map_btn.google img {height: 2.8rem;}
@media (min-width: 1241px) {
    .footer .map_btn:hover {border-color: #fff; }
}


/* background-color = 지도 로드 전/실패 시의 폴백 면 */
.footer .footer_map {flex: 0 1 90rem; height: 51.7rem; border-radius: 2rem; overflow: hidden; background-color: #2A3540;}
/* 구글 지도 기본 임베드(iframe) — 확대/축소·「더 크게 보기」 컨트롤은 구글이 직접 그린다. */
.footer .footer_map iframe {display: block; width: 100%; height: 100%; border: 0;}

/* ---- 하단: 로고 + 약관/사업자정보 + SNS ---- */
.footer .footer_bottom {display: flex; align-items: flex-start; justify-content: space-between; gap: 4rem;}
.footer .footer_bottom_left {display: flex; flex-direction: column; gap: 4rem; min-width: 0;}
.footer .ft_logo {display: block; width: 15.3rem;}
.footer .ft_logo img {display: block; width: 100%; height: auto;}
.footer .ft_texts {display: flex; flex-direction: column; gap: 2rem;}

.footer .terms_txt {display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;}
.footer .terms_txt a {font-size: var(--p4); font-weight: 500; line-height: 1;  transition: opacity .3s;}
.footer .terms_txt a.on {font-weight: 700;}
@media (min-width: 1241px) {
    .footer .terms_txt a:hover {opacity: .7;}
}
.footer .terms_txt a + a::before {content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 1rem; border-radius: 50%; background-color: rgba(255,255,255,0.3); vertical-align: middle;}

.footer .info_txt {display: flex; flex-direction: column; gap: 1rem; opacity: .5;}
.footer .info_txt p {font-size: var(--p6); font-weight: 400; line-height: 1; }
.footer .info_txt .copy {margin-left: 3rem;}

.footer .footer_bottom_right {display: flex; flex-direction: column; align-items: flex-end; gap: 2.5rem; flex-shrink: 0;}
.footer .footer_sns {display: flex; align-items: center; gap: 3rem;}
.footer .footer_sns a {display: flex; align-items: center; justify-content: center; height: 2.6rem; transition: opacity .3s;}   /* 시안 흰색 100% */
@media (min-width: 1241px) {
    .footer .footer_sns a:hover {opacity: .7;}
}
.footer .footer_sns img {display: block; width: auto; height: 100%;}
.footer .footer_sns img[src$="youtube_w.svg"] {height: 84.6%;}   /* 시안 31×22 — 링크 높이(26) 대비 22 */

/* ---- TOP 버튼 ---- */

/* ---- fixed quick actions ---- */
.footer .kv_reserv {position: fixed; left: 50%; bottom: 3rem; transform: translateX(-50%); z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 9.6em; height: 2.8em; border-radius: 60rem; background:#353535; color: #fff; font-size: var(--h8); font-weight: 700; transition: opacity .3s;}
@media (min-width: 1241px) {
    .footer .kv_reserv:hover {background: var(--point01);}
}
.footer .kv_reserv.hide {opacity: 0;}
.footer .quick_float {position: fixed; right: var(--hdIn); bottom: -6rem; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; transition: 0.3s ease-in-out;}
.main .footer .quick_float {bottom: 3rem;}
.footer .quick_float .float_links {display: flex; flex-direction: column; border-radius: 60rem; background: #3e3168; overflow: hidden;}   /* 메인 시안 177:172·177:178 #493C75 (#5F48A1 은 시안의 텍스트모션 배경색) */
.footer .quick_float .float_links a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; width: 9rem; height: 10rem; color: #fff; font-size: var(--p6); line-height: 1; transition: background .3s;}
.footer .quick_float .float_links .txt {font-weight: 500;}   /* 시안 라벨 14/500 */
@media (min-width: 1241px) {
    .footer .quick_float .float_links a:hover {background: var(--gray90);}
}
.footer .quick_float .float_links a + a {gap: 1rem; border-top: 1px solid rgba(255,255,255,.2);}
.footer .quick_float .float_links a:last-child:not(:first-child) {padding-bottom: 1rem;}   /* 아래 라운드 안으로 아이콘을 올림 — 항목 수가 언어마다 달라 마지막 칸에만 */
.footer .quick_float .float_links svg {width: 2.7rem; height: 2.7rem;}
.footer .quick_float .float_links a.fl_insta svg {width: 1.9rem; height: 1.9rem;}   /* 인스타 아이콘만 작게(시안) — 언어마다 순서가 달라 위치(a + a)가 아닌 클래스로 */
/* 왓츠앱·위챗·라인 QR 팝업 */
.footer .fl_qr_layer {position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center; padding: 20px;}
.footer .fl_qr_layer[hidden] {display: none;}
.footer .fl_qr_layer .dim {position: absolute; inset: 0; background: rgba(0,0,0,.6);}
.footer .fl_qr_layer .box {position: relative; display: flex; flex-direction: column; align-items: center; width: min(450px, 100%); padding: 73px 45px 45px; border-radius: 20px; background: #fff; text-align: center; font-family: 'Pretendard', sans-serif; letter-spacing: -0.02em;}   /* 회원 모달(login-modal.css .modal_cont.member.narrow + .login_wrap)과 같은 카드 — 폭 450 · 위 73(닫기 행) · 좌우·아래 45 · 라운드 20 */
.footer .fl_qr_layer .btn_close {position: absolute; top: 17px; right: 22px; display: block; width: 40px; height: 40px; padding: 0; border: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" fill="none"><path d="M24 1L1 24M1 1L24 24" stroke="%23B5B5B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 23px 23px; cursor: pointer; transition: transform 0.25s, opacity 0.25s;}   /* 회원 모달 닫기와 동일: 40px 영역 · 23px 연회색 X · hover 회전 */
@media (min-width: 1241px) {
    .footer .fl_qr_layer .btn_close:hover {transform: rotate(90deg); opacity: 0.7;}
}
.footer .fl_qr_layer .tit {margin: 0; font-size: 25px; font-weight: 700; line-height: 1.3; color: #1C1C1C;}
.footer .fl_qr_layer .desc {margin: 10px 0 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: #666;}
.footer .fl_qr_layer .qr {display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; margin-top: 30px; border: 1px solid #E5E5E5; border-radius: 10px; background: #fff;}
.footer .fl_qr_layer .qr img {width: 160px; height: auto;}
.footer .fl_qr_layer .note {margin: 20px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: #1C1C1C;}
.footer .quick_float .btn_top {display: flex; align-items: center; justify-content: center; width: max(2.6rem, 20px); height: max(2.6rem, 20px); color: var(--black); border: 0; background: transparent; cursor: pointer; background-color: #fff; width: 9rem; height: 9rem; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.1);opacity: 0;; transform: translateY(100%); transition: 0.3s ease-in-out; pointer-events: none;}
.footer .quick_float.header_down {bottom: 3rem;}
.footer .quick_float.header_down .btn_top {opacity: 1; transform: none; pointer-events: all;}
.footer .quick_float .btn_top svg {width: 30%; height: auto;}
.footer .quick_float .btn_top svg path {transition: 0.3s ease-in-out;}  
@media (min-width: 1241px) {
    .footer .quick_float .btn_top:hover {background-color: var(--black); pointer-events: all;}
    .footer .quick_float .btn_top:hover svg path {stroke: #fff;}
}
.footer .quick_float .fl_reserv, .footer .quick_float .btn_top .txt {display: none;}   /* 768 이하 하단 고정 바에서만 노출 */


/* ---- 반응형 ---- */
@media screen and (max-width: 1440px) {
    .footer .quick_float {right: 20px;}


}
@media screen and (max-width: 1240px) {
    .footer {padding: 80px 0 120px;}
    .footer.footer_sub {padding-top: 40px;}
    .footer .in {gap: 60px;}
    .footer .ft_tel {gap: 16px;}
    .footer .ft_tel .tel_num {font-size: 40px;}
    .footer .ft_hours {gap: 30px;}
    .footer .hour_list .day {width: 105px;}
    .footer .map_btn {min-height: 44px; padding: 10px 18px;}
    .footer .map_btn img {height: 20px;}
    .footer .map_btn.naver img, .footer .map_btn.google img {height: 22px;}
    .footer .footer_map {height: 38rem; border-radius: 16px;}
    .footer .ft_logo {width: 120px;}
    .footer .info_txt {gap: 0;}
    .footer .info_txt p {line-height: 1.7;}
    .footer .footer_sns {gap: 22px;}
    .footer .footer_sns a {height: 22px;}
    .footer .quick_float {right: 2rem;}

    .footer .footer_info {width: 50%;}

    .en .footer .quick_float .float_links a {font-size: 10px;}


}

@media screen and (max-width: 1040px) {



    .footer .footer_top,
    .footer .footer_info {display: contents;}

    .footer .in {gap:0}
    
    .footer .ft_tel {order: 1;}
    .footer .ft_tel {order: 1;}
    .footer .ft_hours {order: 2; margin-top: 30px;}
    .footer .footer_map {order: 3; margin-top: 40px;}
    .footer .ft_addr {order: 4; margin-top: 30px;}
    .footer .footer_bottom {order: 6;}
    .footer .footer_top + .footer_bottom {margin-top: 60px;}
    .footer .footer_map {height: auto; padding-top: 56.25%; position: relative; flex: none;}
    .footer .footer_map iframe {position: absolute; left: 0; top: 0; object-position: center; object-fit: cover;;}

    .footer .quick_float .float_links .txt {font-size: var(--p8);}


}


@media screen and (max-width: 768px) {
    .footer {padding: 60px 0 50px;}
    .footer.footer_sub {padding-top: 30px;}
    .footer .footer_info {gap: 40px;}
    .footer .ft_tel .tel_num {font-size: 32px;}
    .footer .hour_list .day {width: 90px;}
    .footer .map_btns {gap: 8px;}
    .footer .map_btn {flex: 1 1 auto; justify-content: center; padding: 10px 12px;}
    .footer .footer_map {height: 28rem; border-radius: 2rem;}
    .footer .footer_bottom {flex-direction: column; align-items: flex-start; gap: 30px;}
    .footer .footer_bottom_left {width: 100%; gap: 24px;}
    .footer .footer_bottom_right {width: 100%; align-items: flex-start;}
    .footer .terms_txt {gap: 10px;}
    .footer .terms_txt a + a::before {margin-right: 8px;}
    .footer .info_txt .copy {display: block; margin-top: 4px; margin-left: 0;}
    .footer .kv_reserv {display: none;}
    .footer .ft_texts {gap: 20px;}
    /* 768 이하 — 바로가기(카톡 상담·인스타 등)는 전체메뉴 .site_map_menu 로 옮기고(2026-10-07 사용자 지시) TOP 도 숨겨,
       .quick_float 에는 예약하기(.fl_reserv) 하나만 남긴다 — 우측 하단 알약 버튼(아이콘 + RESERVATION).
       메인은 하단 고정 상담 바(.kv_consult — main.css 768) 위에 띄운다(--cstBarH = 상담 바 높이). */
    .footer {padding-bottom: 50px;}
    .main .footer {padding-bottom: calc(50px + var(--cstBarH));}
    .footer, .footer .quick_float {--cstBarH: 89px;}
    .footer .quick_float,
    .main .footer .quick_float,
    .footer .quick_float.header_down {left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); gap: 0;}
    .main .footer .quick_float,
    .main .footer .quick_float.header_down {bottom: calc(var(--cstBarH) + 12px + env(safe-area-inset-bottom));}
    .footer .quick_float .float_links,
    .footer .quick_float .btn_top {display: none;}
    .footer .quick_float .fl_reserv {display: flex; align-items: center; justify-content: center; gap: 6px; width: 50px; height: 50px;;  border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;  background-color: var(--black);}
    .footer .quick_float .fl_reserv svg {width: 20px; height: 20px;}
    .footer .quick_float .fl_reserv .txt {display: none;}
    .footer .fl_qr_layer {padding: 0 16px;}
    .footer .fl_qr_layer .box {padding: 60px 20px 30px; border-radius: 16px;}   /* 회원 모달 768 과 동일 */
    .footer .fl_qr_layer .btn_close {top: 8px; right: 8px;}
    .footer .fl_qr_layer .tit {font-size: 21px;}
    .footer .fl_qr_layer .desc {font-size: 14px;}
    .footer .fl_qr_layer .qr {margin-top: 24px;}
    .footer .ft_addr .addr {line-height: 1.5;}

    .footer .ft_logo {width: 10rem;}
}



/* === 통합검색 (헤더 돋보기 패널 · 입력 영역 공용) ===
   마크업: _Skin/include/search-form.php(.srch_form) — 헤더 패널(inc/header/left-image.php .hd_search)과
   /search 결과 페이지 상단(search.php .srch_top)이 같은 폼을 쓴다. 결과 본문은 sub.css 「통합검색 결과」 블록.
   기획서(Figma 1826:891) 상단 영역(SEARCH · 설명 · 입력칸 · 추천키워드)을 사이트 톤으로 — 입력칸은 메인·ELEV YOUTUBE
   검색처럼 보라(--point01) 바 + 흰 글자, 추천 키워드 칩은 메인 「인기 키워드」와 같은 베이지 칩.
   상세: docs/conventions/integrated-search.md */
.srch_form {display: flex; flex-direction: column; align-items: center; text-align: center;}
.srch_form .srch_head .tit {font-family: var(--en); font-size: max(5.4rem, 32px); font-weight: 700; line-height: 1; color: var(--black);}
.srch_form .srch_head .txt {margin-top: 2rem; font-size: var(--p3); line-height: 1.6; color: var(--gray60);}
.srch_form .srch_bar {position: relative; width: 100rem; max-width: 100%; margin-top: 5rem;}
.srch_form .srch_bar input {width: 100%; height: max(9rem, 56px); padding: 0 14rem 0 4.5rem; border: 0; border-radius: 2rem; background: var(--point01); font-size: var(--p1); font-weight: 600; line-height: 1; color: #fff; outline: none; box-shadow: none;}   /* 포커스 때 테두리·링 효과 없음(사용자 지시 2026-10-01) */
.srch_form .srch_bar input::placeholder {color: rgba(255,255,255,.55); font-weight: 500;}
.srch_form .srch_bar .btn_submit {position: absolute; right: 4rem; top: 50%; transform: translateY(-50%); display: flex; width: max(3.2rem, 22px); height: max(3.2rem, 22px); color: #fff; transition: opacity .3s;}
.srch_form .srch_bar .btn_clear {position: absolute; right: 9.5rem; top: 50%; transform: translateY(-50%); display: none; width: max(2.6rem, 20px); height: max(2.6rem, 20px); color: #fff; transition: opacity .3s;}
.srch_form.has_val .srch_bar .btn_clear {display: flex;}
.srch_form .srch_bar button svg {width: 100%; height: 100%;}
@media (min-width: 1241px) {
    .srch_form .srch_bar button:hover {opacity: .7;}
}
.srch_form .srch_keyword {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.5rem 3rem; width: 110rem; max-width: 100%; margin-top: 3.5rem;}
.srch_form .srch_keyword .label {flex-shrink: 0; font-size: var(--p3); font-weight: 700; line-height: 1; color: var(--black);}
.srch_form .srch_keyword .tags {display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;}
.srch_form .srch_keyword .tags button {display: inline-flex; align-items: center; height: 2.875em; padding: 0 1.875em; border-radius: 10em; background: var(--beige); font-size: var(--p4); font-weight: 500; line-height: 1; color: #968469; white-space: nowrap; transition: background .3s, color .3s;}
.srch_form .srch_keyword .tags button:focus-visible {background: var(--brown); color: #fff;}
@media (min-width: 1241px) {
    .srch_form .srch_keyword .tags button:hover {background: var(--brown); color: #fff;}
}

/* ---- 헤더 패널 — 헤더 바로 아래로 펼친다(메가메뉴와 같은 clip-path 전개), 뒤 화면은 딤 ---- */
.header .hd_search {position: absolute; left: 0; top: 100%; z-index: 2; width: 100%; max-height: calc(100vh - var(--hdH)); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--gray10); background: var(--grayBg1); color: var(--black); visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s linear .5s;}
.header.search_open .hd_search {visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .5s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s;}
.header .hd_search_in {padding: 9rem var(--hdIn) 10rem;}
.header .hd_search .srch_head,
.header .hd_search .srch_bar,
.header .hd_search .srch_keyword {opacity: 0; transform: translateY(2rem); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);}
.header.search_open .hd_search .srch_head,
.header.search_open .hd_search .srch_bar,
.header.search_open .hd_search .srch_keyword {opacity: 1; transform: none;}
.header.search_open .hd_search .srch_head {transition-delay: .08s;}
.header.search_open .hd_search .srch_bar {transition-delay: .16s;}
.header.search_open .hd_search .srch_keyword {transition-delay: .24s;}
.header .hd_search_close {position: absolute; right: var(--hdIn); top: 4rem; display: flex; align-items: center; justify-content: center; width: max(4.4rem, 36px); height: max(4.4rem, 36px); color: var(--black); transition: color .3s, transform .3s;}
.header .hd_search_close svg {width: 72%; height: 72%;}
@media (min-width: 1241px) {
    .header .hd_search_close:hover {color: var(--point01); transform: rotate(90deg);}
}
.hd_search_dim {position: fixed; inset: 0; z-index: 999; background: rgba(28,28,28,.5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;}
.header.search_open + .hd_search_dim {opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s;}

/* 패널이 열리면 헤더도 흰 배경 + 검정 글자(메가메뉴가 열린 .on 과 같은 모양). 서브탑 위 헤더 규칙
   (sub.css body.sub:has(.top_img…) .header:not(.header_down):not(.on) …)보다 앞서야 해서 body id 로 우선순위를 올린다. */
#bodyCont .header.search_open {background-color: #fff; color: var(--black);}
#bodyCont .header.search_open .header_in {background: #fff;}
#bodyCont .header.search_open .nav .depth1 > li > a {color: var(--black);}
#bodyCont .header.search_open .nav .depth1 > li.active > a {color: var(--point01);}
#bodyCont .header.search_open .nav .depth1 > li > a > span:before {background-color: var(--point01);}
#bodyCont .header.search_open .logo img {filter: none;}
#bodyCont .header.search_open .logo .logo_mono {opacity: 0;}
#bodyCont .header.search_open .logo .logo_color {opacity: 1;}
#bodyCont .header.search_open .util_wrap .btn_reserv {border-color: var(--black);}
#bodyCont .header.search_open .util_wrap .search {color: var(--point01);}

@media screen and (max-width: 1240px) {
    .header .hd_search_in {padding: 70px var(--inPd) 80px;}
    .header .hd_search_close {top: 20px;}
}
@media screen and (max-width: 768px) {
    .header .hd_search_in {padding: 48px var(--inPd) 56px;}
    .header .hd_search_close {top: 12px; right: 12px;}
    .srch_form .srch_head .tit {font-size: 30px;}
    .srch_form .srch_head .txt {margin-top: 12px; font-size: 14px;}
    .srch_form .srch_bar {margin-top: 28px;}
    .srch_form .srch_bar input {height: 3.5em; padding: 0 86px 0 1.25em; border-radius: 10px; font-size: var(--p2);}
    .srch_form .srch_bar .btn_submit {right: 18px; width: 22px; height: 22px;}
    .srch_form .srch_bar .btn_clear {right: 52px; width: 20px; height: 20px;}
    .srch_form .srch_keyword {flex-direction: column; gap: 12px; margin-top: 24px;}
    .srch_form .srch_keyword .tags {gap: 8px;}
    .srch_form .srch_keyword .tags button {font-size: var(--p6); padding: 0 1.2em; height: 2.2em;}
}



/* === 마이페이지 ===*/
.my_page .sub_visual .tit_wrap {text-align: center;}

.my_write_form{ }
.my_write_form .in {  }
.my_write_form .form_list { padding:4rem; border-top:1px solid var(--gray90); border-bottom: 1px solid var(--gray20); font-size:var(--p3);}
.my_write_form .form_list > li { display: flex; justify-content: space-between;}
.my_write_form .form_list > li + li { margin-top: 2rem; }
.my_write_form .form_list > li .left_txt { display: flex; font-weight: 700; flex-shrink: 0; width: 10em; align-items: center; }
.my_write_form .form_list > li .left_txt .ess::after { content: "*"; color: var(--point01); margin-left: 3px;}
.my_write_form .form_list > li .cont_box { flex: 1;}
.my_write_form .form_list > li.last_btns {margin-top: var(--contMt2);}
.my_write_form .form_list > li.last_btns .modify_btn {display: flex; align-items: center; padding: 1em 1.5em ;font-size: var(--p4); border-radius: 99rem; background-color: #fff; border:1px solid var(--black); font-weight: 600; transition: 0.3s ease-in-out ;}

.my_write_form .form_list li .nice-select { font-size:var(--p6); height: var(--inpH); line-height: var(--inpH); padding: 0 1.3em; border: 0; border-radius:1rem;  font-weight: 500; background-color: var(--grayBg1);; }
.my_write_form .form_list li .nice-select:after { right: 2rem; width: 0.8em; height: 1em; margin-top: -0.4em; font-size: 1em; border: 0; transform: rotate(0); transform-origin: center; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10" fill="none"><path d="M14 2L8 8L2 2" stroke="%231C1C1C" stroke-width="2" stroke-linecap="square"/></svg>') no-repeat center center/ contain; transition: transform 0.3s; opacity:0.3;}
.my_write_form .form_list li .nice-select.open:after { transform: rotate(180deg); }
.my_write_form .form_list li .inp { width: 100%; }
.my_write_form .form_list li .inp input { width: 100%; height: var(--inpH); padding: 0 1.3em; border-radius:1rem; background-color: var(--grayBg1); font-size:var(--p6); }
.my_write_form .form_list li .inp input:focus { outline: 1px solid #101010; }
.my_write_form .form_list li .inp input::placeholder { color: var(--gray); color:#BCBFC7; font-weight: 500;}
.my_write_form .form_list li .inp input[type="text"] + input[type="text"] { margin-top:1.2rem;}
.my_write_form .form_list li .inp_txt { margin-top: 10px; font-size: calc(var(--txt) * 0.85); color: var(--gray); }
.my_write_form .form_list li .textarea textarea { position: relative; width: 100%; height: 10em; padding: 1.5em 1.3em; border:0; border-radius: 0.8rem; background-color: var(--grayBg1); font-size:var(--p6);; resize: none; line-height: 1.5em; transition: border-color 0.25s, box-shadow 0.25s; }
.my_write_form .form_list li .textarea textarea:focus { outline: 1px solid #101010; }
.my_write_form .form_list li .textarea textarea::placeholder { color: #BCBFC7; font-weight: 500;}


.my_write_form .form_list li .textarea textarea::-webkit-scrollbar {-webkit-appearance: none;}
.my_write_form .form_list li .textarea textarea::-webkit-scrollbar:vertical {width: 8px; background-color: var(--grayBg1)}
.my_write_form .form_list li .textarea textarea::-webkit-scrollbar:horizontal {height: 5px;}
.my_write_form .form_list li .textarea textarea::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,0.3); border-radius: 5px; border-right: 5px solid var(--grayBg1);  border-top-right-radius: 15px 5px; border-bottom-right-radius: 15px 5px;}
.my_write_form .form_list li .textarea textarea::-webkit-scrollbar-track {border-radius: 10px;}
.my_write_form .form_list li .textarea textarea::-webkit-scrollbar-button:vertical:decrement { height: 10px; }
.my_write_form .form_list li .textarea textarea::-webkit-scrollbar-button:vertical:increment { height: 10px; }


.my_write_form .form_list li .file_inp{display: flex;}
.my_write_form .form_list li .file_inp .inp{width: auto; flex: 1;}
.my_write_form .form_list li .file_inp .file_btn {display: flex; align-items: center; padding:0 1.8em; border-radius: 0.8rem; border:1px solid #101010; font-weight: 500; margin-left:10px; transition: 0.3s;}

.my_write_form .form_list li .file_inp #fileNameBox{position:relative;}
.my_write_form .form_list li .file_inp .commonFileDeleteBtn{position:absolute; top:50%; right: 1.8rem; transform: translateY(-50%)}
.my_write_form .form_list li .file_inp .commonFileDeleteBtn svg{display: block;}
.my_write_form .form_list li .captcha_wrap { display: flex; align-items: center; justify-content: flex-start; }
.my_write_form .form_list li .captcha_wrap .captcha { display: flex; align-items: center; height: var(--inpH); padding: 0 1.5rem; margin-right: 1.5rem; background-color: #F3F4F8; border-radius: 0.8rem;  font-size:var(--p6);}
.my_write_form .form_list li .captcha_wrap .captcha img { height: 100%; }
.my_write_form .form_list li .captcha_wrap .captcha .btn { display: flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em;}
.my_write_form .form_list li .captcha_wrap .inp { flex: 1; }
.my_write_form .form_list li.priv_chk { display: block; }
.my_write_form .form_list li.priv_chk .left_txt { width: auto; height: auto; }
.my_write_form .form_list li.priv_chk .cont_box { margin-top: 2rem; }
.my_write_form .form_list li.priv_chk .cont_box .terms_box { padding: 4rem; background-color: var(--grayBg1); background-color: #F3F4F8; color: var(--gray); font-size: var(--p6); border-radius: 0.8rem; margin-bottom: 1.6rem;}
.my_write_form .form_list + .h3 { margin-top:6.5rem;}
.my_write_form .form_btn_box { margin-top: 6.5rem; display: flex; justify-content: center; }
.my_write_form .date_box { display: flex; }
.my_write_form .date_box input + input { margin-left: 1.5rem;}
.my_write_form .date_box .datepicker2 {flex: 1}
.my_write_form .date_box .datepicker2 ~ .nice-select { margin-left: 1.5rem; flex-shrink: 0; flex: 1}
.my_write_form .tel_box { display: flex; }
.my_write_form .tel_box .select { width:32.5%; margin-right:1.5rem; flex-shrink: 0;}

.my_write_form .tel_agree { margin-top:1rem; }
.my_write_form .tel_agree .checkbox + div { font-size:var(--p6);}
.my_write_form .tel_agree .checkbox + div em { width:1.3em; height: 1.3em;}


.my_write_form .tel_agree em{width: 1.3em;height: 1.3em;border-radius: 3px;background-color: #fff;border: 1px solid var(--gray20);display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}
.my_write_form .tel_agree svg {width: 0.8em; height: auto;}
.my_write_form .tel_agree .checkbox + div {display: flex;align-items: center;font-size: var(--p6);cursor: pointer;}
.my_write_form .tel_agree .checkbox + div p {margin-left: 1rem;}
.my_write_form .tel_agree .checkbox:checked + div em {background-color: var(--point01);border-color: var(--point01);}
.my_write_form .tel_agree .checkbox:checked + div em svg path {stroke: #fff; opacity: 0.8;}

.my_write_form .mail_box { display: flex; align-items: center; }
.my_write_form .mail_box .select {  margin-right:1.5rem;}
.my_write_form .mail_box #email2 + .select { margin:0 0 0 1.5rem;}
.my_write_form .mail_box > div { width:100%;}
.my_write_form .mail_box >span {color:var(--black5); font-size:var(--p6); margin:0 1rem; }
.my_write_form .text_box { line-height: var(--inpH); flex:1;}
.my_write_form .text_box.flex {display: flex; align-items: center}
.my_write_form .text_box .btn_find { font-size:var(--p6); padding:0.6em 1.2em; border-radius:3em; color:var(--gray60); background: var(--grayBg1); font-weight:600; transition: all 0.3s ease-in-out; }
@media (min-width: 1241px) {
    .my_write_form .text_box .btn_find:hover {background-color: #101010; color: #fff;}
}
.my_write_form .text_box .icon{display:flex; width:2.5em; height:2.5em; align-items: center; justify-content: center; border-radius:50%; overflow:hidden; margin-right: 0.6em}
.my_write_form .text_box .icon-sns{display:flex; width:100%; height:100%; }
.my_write_form .text_box .sns-naver{background-color: #00c73c;}
.my_write_form .text_box .sns-naver .icon-naver{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAABIElEQVRYCWNgGAWjITAaAoM1BP7jBr+BUmbY3A0Uv4RLGzb1IDEmXBJ4xFmAcouBFnHhUUO0FDkOABmuBsS9RNuCRyG5DgAZmQEMBS88ZhMlRYkDQBbMBTpChCibcCii1AESQHNn4TCbKGFKHQCyJBAYCglE2YZFETUcADJ2EtARCljMJyhELQfwAm1aDMTMBG1EU8CIxodzgT76D+egMq4BuW+B2BZVGD+PEQiwqSAnBP4CDYoD4s/YDCRVjBwHMAA98wBoUR6plmFTT5YDQAYBHbEASK0DsSkBZDsAamk6kH4xYA4AhsIboOVJA+YAkMVAR2wHUtPJdQSlUQCztwTIuAXjkEJTxQHAUPgGtDQGiP+QYvmo2tEQGA2BQRECAL7YYewVRr/jAAAAAElFTkSuQmCC) center no-repeat; background-size: 1.6em 1.6em;}
.my_write_form .text_box .sns-kakao{background-color: #ffeb3b;}
.my_write_form .text_box .sns-kakao .icon-kakao{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAACTklEQVRYCe1WTUsbURR9d2bQKC6SUihESEjc9C+kVRsoBfciIrgSP3Br+zdcFIQuWlxU6EZpt1ahjIkfuFAQSZBAHBMxWhpECqVQTF7PC1rwvTeZMR0olDyYDPfOOeeeufM+wlh7tDvwjztAfuun02nr+vh4iBGlQXrCGetlnD9s8ImqyJ0ht42cbSWTq7ZtX/vR9jQwkkp1fa1UXtY5n4Vg1I8oMBWD6M2jaHR+eWfnZzNOUwODicRgvVZbhEBfM5Emz4qGaU5kHCfjhnE1MBCPD6OlH9DSDjeyrzzRL4OxsUyp9FGH1xoYiMWeArwBA6aOdN8citTAeZYtl7dkLszdHeKbY6ItBVVcqAstXO8b2nfLMcXAxfn5KOc8IeGCCJNCWxZSDOCbj8ugwGKNtmIAb/84sIKSkE5bMYAJE5Z4QYYPZDHFACZgQQYFFRPRqaylGuD8QAYFGO/KWooBLJcFGRRUbBjGW1lLMbBZLu+hVSsy8K9jok8bjpOVdRQDAtDd0zODyXgog1uN8UKO1dk5reNrDXzO5S47TPMFCDkd6T45FM+HQqF+u1Co6niue71zdfUjGYksYu2a6EYKZK1ZnehNrg7e665weGw9n790wwHjPXAyzsPInDcSCKLv+F2yiBbsk5MjL47lBbh5Lk7HPwNt/YLgANu22Fg4ilZxneHaNuPxfb//hoSgZwf6Y7EIQN8apyPejjh/hWNVWU5CrJXh2QEUfy6K475GljWZKRaV3ayVwrccTwMARtDyqWyp9O6W1L63O/BfdeA3G6OjNkWwE8gAAAAASUVORK5CYII=) center no-repeat; background-size: 1.6em 1.6em;}
.my_write_form .text_box .sns-common{background-color: #f6f6f6;}
.my_write_form .text_box .sns-common img{width:1.5em; height:1.5em; object-fit:contain;}
.my_write_form .text_box .sns-google{background-color: #F6F6F6;}
.my_write_form .text_box .sns-google .icon-google{background: url('data:image/svg+xml,<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.71591C18 9.04227 17.9416 8.39455 17.833 7.77273H9.18367V11.4518H14.1262C13.9091 12.635 13.2579 13.6368 12.2811 14.3105V16.7027H15.2616C16.9981 15.0445 18 12.6091 18 9.71591Z" fill="%234285F4"/><path d="M9.18367 19C11.6633 19 13.7421 18.1536 15.2616 16.7027L12.2811 14.3105C11.4629 14.8805 10.4193 15.2259 9.18367 15.2259C6.79592 15.2259 4.76716 13.5591 4.04082 11.3136H0.985158V13.7664C2.49629 16.8668 5.59369 19 9.18367 19Z" fill="%2334A853"/><path d="M4.04082 11.305C3.85714 10.735 3.74861 10.1305 3.74861 9.5C3.74861 8.86954 3.85714 8.265 4.04082 7.695V5.24227H0.985158C0.358998 6.52045 0 7.96273 0 9.5C0 11.0373 0.358998 12.4795 0.985158 13.7577L3.36456 11.8405L4.04082 11.305Z" fill="%23FBBC05"/><path d="M9.18367 3.78273C10.5362 3.78273 11.7384 4.26636 12.6985 5.19909L15.3284 2.47864C13.7338 0.941363 11.6633 0 9.18367 0C5.59369 0 2.49629 2.13318 0.985158 5.24227L4.04082 7.695C4.76716 5.44955 6.79592 3.78273 9.18367 3.78273Z" fill="%23EA4335"/></svg>') center no-repeat;
    background-size: 1.1em 1.1em;}

.my_write_form .flex_wrap { display: flex;}
.my_write_form .flex_wrap input { width:100%; }
.my_write_form .flex_wrap button { flex-shrink: 0; height: var(--inpH); padding: 0 1.5em; font-size: var(--p6); border:0; color: #fff;background: #EFF4FE; color: #1947C7; margin-left: 1.2rem; transition:all 0.3s ease;  border-radius:1rem; font-weight: 600;}
@media (min-width: 1241px) {
    .my_write_form .flex_wrap button:hover {background-color: #101010; color: #fff;}
}
.my_write_form .btn_lost { font-size:var(--p6); text-decoration: underline; text-underline-offset: 4px; color:var(--gray60); font-weight:600;}

.my_page .h2 { font-size:var(--h8); font-weight:700; margin-bottom: 2.5rem;}
.my_page .in { width:110rem; max-width: 100%; }
.my_page .pw_box { position: relative;}
.my_page .pw_box .icos { position: absolute; right:1.6rem; top:0; height: 100%; display: flex; align-items: center;}
.my_page .pw_box .icos svg { vertical-align: middle; width:1.3em; height: auto;}
.my_page .pw_box .icos i { transition: all 0.3s var(--ease); opacity: 0; visibility: hidden;  }
.my_page .pw_box .icos i.active { opacity:1;  visibility: visible;}
.my_page .pw_box .icos .btn_del { margin-left: 1.5rem; transition: all 0.3s var(--ease); opacity: 0; visibility: hidden; display: none}
.my_page .pw_box .icos .btn_del.active { opacity:1;  visibility: visible;}
.my_page .agree_box  { margin-bottom: 6rem;}
.my_page .agree_box .tit { font-size:var(--p4); font-weight:600; margin:3rem 0 1rem; }
.my_page .agree_box .agree label { display: inline-block; vertical-align: middle; margin-right:1rem;}


.my_page .history_sect { margin-top:8rem; }
.my_page .history_sect .h2 { margin-bottom: 4rem;}

.my_page .history_sect .notice_list08 .list li a {padding:2.5rem 1rem;}

.my_page .history_sect .board_list ul li a .labels { margin-left: 2em;}
.my_page .history_sect .board_list ul li a .state { margin-right: 2em;}
.my_page .history_sect .description { display: flex; justify-content: center; align-items: center; margin-top:4rem}
.my_page .history_sect .description .dot { font-size:var(--p4); font-weight:500; display: flex; align-items: flex-start; margin-right: 2rem;}
.my_page .history_sect .description .dot svg { width:1.2em; height: auto; vertical-align: middle; margin:0.2em 1rem 0 0;;}
.my_page .history_sect .description a { font-size:var(--p4); padding:0.6em 1.2em; border-radius:3em; color:#fff; background:var(--point01); font-weight:600; transition: all 0.3s var(--ease); flex-shrink: 0; transition: 0.3s ease-in-out;}
@media (min-width: 1241px) {
    .my_page .history_sect .description a:hover {background-color: #101010; color: #fff;}
}



/* === 모달 === */
.modal{display: block; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: auto; position: fixed; top:0; bottom:0; left:0; right:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 50px 0 80px; background: rgba(0,0,0,0.4); pointer-events: none; transition: 0.2s ease-in-out; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}
.modal.open{opacity: 1; pointer-events: inherit}
/*over*/
.over_modal{display: block; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: auto; position: fixed; top:0; bottom:0; left:0; right:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 50px 0 80px; background: rgba(0,0,0,0.4); pointer-events: none; transition: 0.2s ease-in-out; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}
.over_modal.open{opacity: 1; pointer-events: inherit}

.page_wrap .modal_wrap{display: table; position: relative; width: 100%; height: 100%; padding: 0 var(--inPd); margin: 0 auto; table-layout: fixed; vertical-align: middle}
.page_wrap .modal_wrap .scroll_box{display: table-cell; vertical-align: middle}
.page_wrap .modal_wrap .modal_cont{position: relative; width: 80rem; max-width: 100%; padding: 8rem 4rem 6rem; margin: 0 auto; background-color: #fff; border-radius: 2rem; overflow: hidden;}

.page_wrap .modal_wrap .modal_cont .modal_close {position: absolute;top: 3.5rem;right: 3rem;width: 4rem;height: 4rem;cursor: pointer;z-index: 2; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M32.0091 7.99023L7.98828 32.0111" stroke="%231c1c1c" stroke-width="2" stroke-linejoin="round"/><path d="M7.98828 7.99023L32.0091 32.0111" stroke="%231c1c1c" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain; transition: transform 0.5s;}
.page_wrap .modal_wrap .modal_cont .modal_close.solo{top: -5.5rem; right: -0.5rem; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M32.0091 7.99023L7.98828 32.0111" stroke="%23fff" stroke-width="2" stroke-linejoin="round"/><path d="M7.98828 7.99023L32.0091 32.0111" stroke="%23fff" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain; }

.modal_wrap .modal_cont .cont::-webkit-scrollbar{width: 10px;}
.modal_wrap .modal_cont .cont::-webkit-scrollbar-thumb{background: #d7d7d7; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px;}
.modal_wrap .modal_cont .cont::-webkit-scrollbar-track{background: #fff; margin-block: 10px;}

.page_wrap .modal_wrap:has(.modal_top) .modal_cont{background-color: transparent;}
.page_wrap .modal_wrap:has(.modal_top) .modal_cont .cont{background-color: #fff;}
.page_wrap .modal_wrap .modal_cont .modal_top {display: flex; justify-content: space-between; padding: 2rem 2.5rem 2rem 3rem; background-color: var(--gray90); color: #fff;}
.page_wrap .modal_wrap .modal_cont .modal_top .tit {font-size: 2.4rem; font-weight: 600}
.page_wrap .modal_wrap .modal_cont .modal_top .modal_close{position: relative; top: 0; right:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M32.0091 7.99023L7.98828 32.0111" stroke="%23fff" stroke-width="2" stroke-linejoin="round"/><path d="M7.98828 7.99023L32.0091 32.0111" stroke="%23fff" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain;}

.modal .swiper-container-fade .swiper-slide-active,
.modal .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: none}
.modal.open .swiper-container-fade .swiper-slide-active,
.modal.open .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: none}


/* 약관 모달 */
.over_modal .modal_wrap .modal_cont.terms {padding: 0; border-radius: 2rem; overflow: hidden; font-size: var(--p4)}
.over_modal .modal_cont.terms .modal_top {align-items: center;}
.over_modal .modal_cont.terms .cont {max-height: 65vh; padding: 3rem; overflow-y: auto; overscroll-behavior: contain;}
.over_modal .modal_cont.terms .cont .effective_date {margin-bottom: 2rem; color: var(--gray60); }
.over_modal .modal_cont.terms .cont .table {margin-left:0 !important; margin-right:0 !important;}
/* 현재 언어 발행본이 없어 국문 발행본을 보여 줄 때의 안내 (terms-view.php) */
.over_modal .modal_cont.terms .cont .terms_lang_notice {margin-bottom: 1.2rem; padding: 1rem 1.4rem; border-radius: 0.8rem; background-color: var(--grayBg1); color: var(--gray60);}

.over_modal .modal_cont.terms .cont .terms_body h2,
.over_modal .modal_cont.terms .cont .terms_body h3,
.over_modal .modal_cont.terms .cont .terms_body h4,
.over_modal .modal_cont.terms .cont .terms_body h5,
.over_modal .modal_cont.terms .cont .terms_body h6 {margin: 1.2em 0 0.3em; font-weight: 700;}

.over_modal .modal_cont.terms .cont .terms_body h2,
.over_modal .modal_cont.terms .cont .terms_body h3,
.over_modal .modal_cont.terms .cont .terms_body h4 {font-size: var(--p3);}
.over_modal .modal_cont.terms .cont .terms_body h5,
.over_modal .modal_cont.terms .cont .terms_body h6 {font-size: var(--p4);}

.over_modal .modal_cont.terms .cont .terms_body ul { margin-bottom: 0.8em;}
.over_modal .modal_cont.terms .cont .terms_body ol { margin-bottom: 0.8em;}
.over_modal .modal_cont.terms .cont .terms_body ol > li {/*list-style: decimal;*/ text-indent: -1.5em; padding-left: 1.5em;}
.over_modal .modal_cont.terms .cont .terms_body table {width: 100%; margin: 1em 0; border-collapse: collapse;}
.over_modal .modal_cont.terms .cont .terms_body table th,
.over_modal .modal_cont.terms .cont .terms_body table td {padding: 0.8rem 1rem; border: 1px solid #e2e6ec; text-align: left;}
.over_modal .modal_cont.terms .cont .terms_body table th {background-color: var(--grayBg1); font-weight: 600;}
.over_modal .modal_cont.terms .cont .terms_empty {padding: 8rem 0; color: var(--gray60); text-align: center;}

/* 회원 모달 */
.modal .modal_wrap .modal_cont.member {width: max(50rem,500px); padding: 0;}

.modal .member .btn_wrap{display: flex; justify-content: center; margin-top: 5rem;}
.modal .member .btn_wrap a{flex: 1; padding: 1em 0; background: #000; border: 1px solid #000; color: #fff; font-size: var(--p3); font-weight: 600; text-align: center; border-radius: 0.8rem; line-height: 1em; transition: background 0.25s, color 0.25s;}
.modal .member .btn_wrap a + a{margin-left: 0.8rem;}
.modal .member .btn_wrap a.line{background: #fff; border-color: #232323; color: #232323; font-weight: 400;}
@media (min-width: 1241px) {
    .modal .member .btn_wrap a:hover {background-color: var(--point01); border-color: var(--point01); color: #fff;}
}

.modal .member .login_wrap {padding: 10rem 6rem 8rem; background: #fff; border-radius: 2.4rem;}
.modal .member .login_wrap .logo {width: 60%; margin: 0 auto;}
.modal .member .login_wrap .logo img {width: 100%;}
.modal .member .login_wrap .input_wrap{margin-top: 5.6rem;}
.modal .member .login_wrap .input_wrap .inp {position: relative; margin-bottom: 1.25rem;}
.modal .member .login_wrap .input_wrap input{width: 100%; height: var(--inpH); padding-left: 1.2em; background-color: var(--grayBg1); font-size: var(--p3); border-radius: 0.8rem; line-height: var(--inpH); transition: background 0.25s, border 0.25s;}
.modal .member .login_wrap .input_wrap input::placeholder{color: rgba(0,0,0,0.3); font-weight: 500;}

/* 비밀번호 표시/숨김 토글 */
.modal .member .login_wrap .input_wrap .inp.has_pw_toggle input {padding-right: 5rem;}
.modal .member .login_wrap .input_wrap .pw_toggle {position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); z-index: 2; width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: #9aa3bd; cursor: pointer; transition: color 0.2s;}

.modal .member .login_wrap .input_wrap .pw_toggle.on {color: var(--point01); background: none;}
@media (min-width: 1241px) {
    .modal .member .login_wrap .input_wrap .pw_toggle:hover {color: var(--point01); background: none;}
}
.modal .member .login_wrap .input_wrap .pw_toggle svg {display: block;}
.modal .member .login_wrap .input_wrap button {width: 100%; padding: 1.25em 0; background: #000; color: #fff; font-size: var(--p3); font-weight: 700; text-align: center; border-radius: 0.8rem; line-height: 1em; transition: background 0.25s;}
@media (min-width: 1241px) {
    .modal .member .login_wrap .input_wrap button:hover {background-color: var(--point01);}
}

.modal .member .login_wrap .util_wrap{display: flex; justify-content: center; margin-top: 2.4rem;}
.modal .member .login_wrap .util_wrap a{position: relative; color: rgba(0,0,0,0.5); font-size: var(--p4); font-weight: 500; line-height: 1em; transition: color 0.3s;}
.modal .member .login_wrap .util_wrap a + a{padding-left: 1.2em; margin-left: 1.2em; border-left: 1px solid rgba(188, 191, 199, 0.5);}
@media (min-width: 1241px) {
    .modal .member .login_wrap .util_wrap a:hover {color: #000;}
}

.modal .member .login_wrap .sns_wrap {margin-top: 5rem;}
.modal .member .login_wrap .sns_wrap .btn {display: flex; align-items: center; justify-content: center; font-size: var(--p4); height: var(--inpH); border-radius: 0.8rem; border: 1px solid #DFDFDF; font-weight: 600; transition: 0.3s ease-in-out;}
.modal .member .login_wrap .sns_wrap .btn + .btn {margin-top: 1.25rem;}
.modal .member .login_wrap .sns_wrap .btn .icon-sns {display: flex; align-items: center; margin-right: 10px; font-size: 10px}
.modal .member .login_wrap .sns_wrap .btn .icon-sns img,
.modal .member .login_wrap .sns_wrap .btn .icon-sns svg {width: 100%;}
.modal .member .login_wrap .sns_wrap .btn svg path {transition: 0.3s ease-in-out;}
.modal .member .login_wrap .sns_wrap .btn .icon-sns.icon-naver {width: 2.4em;}
.modal .member .login_wrap .sns_wrap .btn .icon-sns.icon-kakao {width: 2.4em;}
.modal .member .login_wrap .sns_wrap .btn .icon-sns.icon-google {width: 2em;}

@media (min-width: 1241px) {
    .modal .member .login_wrap .sns_wrap .btn.naver:hover {background-color: #2EB400; border-color: #2EB400; color: #fff;}
    .modal .member .login_wrap .sns_wrap .btn.naver:hover svg path {fill: #fff;}
    .modal .member .login_wrap .sns_wrap .btn.kakao:hover {background-color: #FFE812; border-color: #FFE812 ;}
    .modal .member .login_wrap .sns_wrap .btn.google:hover {background-color: #000; border-color: #000; color: #fff;}
}

.modal .member .login_wrap .sns_wrap .btn {position: relative;}
.modal .member .login_wrap .last_login_badge {position: absolute; bottom: 100%; right: 2rem; margin-bottom: -1.4rem; display: inline-flex; align-items: center; justify-content: center; width: 7em; height: 2.5em; color: var(--point01); font-size: var(--p8); font-weight: 700; line-height: 1em;  white-space: nowrap; border-radius: 999px; pointer-events: none; z-index: 2; animation: lastLoginFloat 2.4s ease-in-out infinite;}
.modal .member .login_wrap .last_login_badge::after {content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 3em; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="84" height="30" viewBox="0 0 84 30" fill="none"><mask id="path-1-inside-1_3786_8095" fill="white"><path d="M71.5 0C78.4036 1.28852e-06 84 5.59644 84 12.5C84 19.4036 78.4036 25 71.5 25H66.9355L59.7793 28.9941C59.1128 29.366 58.2922 28.8842 58.292 28.1211V25H12.5C5.59644 25 0 19.4036 0 12.5C0 5.59644 5.59644 0 12.5 0H71.5Z"/></mask><path d="M71.5 0C78.4036 1.28852e-06 84 5.59644 84 12.5C84 19.4036 78.4036 25 71.5 25H66.9355L59.7793 28.9941C59.1128 29.366 58.2922 28.8842 58.292 28.1211V25H12.5C5.59644 25 0 19.4036 0 12.5C0 5.59644 5.59644 0 12.5 0H71.5Z" fill="white"/><path d="M71.5 0V-1V-1V0ZM66.9355 25V24H66.6754L66.4482 24.1268L66.9355 25ZM59.7793 28.9941L60.2666 29.8674L60.2667 29.8673L59.7793 28.9941ZM58.292 28.1211H57.292V28.1214L58.292 28.1211ZM58.292 25H59.292V24H58.292V25ZM12.5 25V26V26V25ZM71.5 0V1C77.8513 1 83 6.14873 83 12.5H84H85C85 5.04416 78.9558 -0.999999 71.5 -1V0ZM84 12.5H83C83 18.8513 77.8513 24 71.5 24V25V26C78.9558 26 85 19.9558 85 12.5H84ZM71.5 25V24H66.9355V25V26H71.5V25ZM66.9355 25L66.4482 24.1268L59.2919 28.1209L59.7793 28.9941L60.2667 29.8673L67.4229 25.8732L66.9355 25ZM59.7793 28.9941L59.292 28.1209L59.292 28.1208L58.292 28.1211L57.292 28.1214C57.2924 29.6476 58.9336 30.6112 60.2666 29.8674L59.7793 28.9941ZM58.292 28.1211H59.292V25H58.292H57.292V28.1211H58.292ZM58.292 25V24H12.5V25V26H58.292V25ZM12.5 25V24C6.14873 24 1 18.8513 1 12.5H0H-1C-1 19.9558 5.04416 26 12.5 26V25ZM0 12.5H1C1 6.14873 6.14873 1 12.5 1V0V-1C5.04416 -1 -1 5.04416 -1 12.5H0ZM12.5 0V1H71.5V0V-1H12.5V0Z" fill="%232F58E0" mask="url(%23path-1-inside-1_3786_8095)"/></svg>') no-repeat center / contain;}


@keyframes lastLoginFloat {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-0.5rem);}
}

.modal .member .join_wrap{padding: 9rem 4rem 6.4rem; background: #fff; border-radius: 2.4rem;}
.modal .member .join_wrap .txt_box{margin-bottom: 5.6rem;}
.modal .member .join_wrap .txt_box .step{margin-bottom: 0.5em; color: var(--brown); font-size: var(--p3); font-weight: 700; line-height: 1em;}
.modal .member .join_wrap .txt_box .tit{font-size: var(--h6); font-weight: 700;}
.modal .member .join_wrap .inp_wrap{margin-top: 2.4rem;}
.modal .member .join_wrap .inp_wrap .com_dot_list,
.modal .member .join_wrap .inp_wrap .dot_list {margin-top: 1rem; color: rgba(0,0,0,0.5); font-size: var(--p5);}
.modal .member .join_wrap .inp_wrap .inp_tit{ font-size: var(--p4); display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-weight: 500;}
.modal .member .join_wrap .inp_wrap .inp_tit p .ess{margin-left: 3px; color: var(--point01);}
.modal .member .join_wrap .inp_wrap .inp_tit a{display: flex; align-items: center; color: #9A9EA7; font-size: var(--p6); transition: color 0.25s;}
.modal .member .join_wrap .inp_wrap .inp_tit a svg{margin-left: 0.5em; fill: #9A9EA7; transition: fill 0.25s;}

.modal .member .join_wrap .inp_wrap .refer{display: block; position: relative; padding-left: 1em; margin-top: 1em; color: #9A9EA7; font-size: var(--p6); font-weight: 500;}
.modal .member .join_wrap .inp_wrap .refer::before{content: '※'; position: absolute; top: 0; left: 0;}
.modal .member .join_wrap .inp_wrap input{width: 100%; height: var(--inpH); font-size: var(--p4) ;padding: 0 1.2em; background-color: var(--grayBg1); border-radius: 0.8rem; line-height: var(--inpH); transition: background 0.25s, border 0.25s;}
.modal .member .join_wrap .inp_wrap input:focus{border-color: #232323;}
.modal .member .join_wrap .inp_wrap input::placeholder{opacity: 0.5; font-weight: 500;}
.modal .member .join_wrap .inp_wrap .inp {position: relative}
.modal .member .join_wrap .inp_wrap .inp input + .ico {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: var(--p3); height: var(--p3) ;display: none}
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked {display: block}
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked.enable {display: block; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%232F6BF0"><path d="M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z"/></svg>') no-repeat center / contain}
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked.unable {display: block; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23EC5252"><path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/></svg>') no-repeat center / contain; }
.modal .member .join_wrap .inp_wrap .flex_wrap{display: flex;}
/* 비밀번호 표시/숨김 토글(pwdChg 모달) */
.modal .member .join_wrap .inp_wrap .inp.has_pw_toggle input {padding-right: 5rem;}
.modal .member .join_wrap .inp_wrap .inp.has_pw_toggle.has_chk_ico input {padding-right: 8.5rem;}
.modal .member .join_wrap .inp_wrap .inp.has_chk_ico input + .ico {right: 5.5rem;}
.modal .member .join_wrap .inp_wrap .pw_toggle {position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); z-index: 2; width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--gray50); cursor: pointer; transition: color 0.2s;}
.modal .member .join_wrap .inp_wrap .pw_toggle.on {color: var(--point01); background: none;}
@media (min-width: 1241px) {
    .modal .member .join_wrap .inp_wrap .pw_toggle:hover {color: var(--point01); background: none;}
}
.modal .member .join_wrap .inp_wrap .pw_toggle svg {display: block;}

.modal .member .join_wrap .inp_wrap .flex_wrap button{margin-left: 0.8rem ;flex-shrink: 0; height: var(--inpH); padding: 0 1.5em;  font-size: var(--p4); border-radius: 0.8rem ; color: #1947C7; background-color: #EFF4FE; transition: background 0.25s, color 0.25s;}

.modal .member .join_wrap .nice-select {font-size: var(--p4);height: var(--inpH);line-height: var(--inpH);padding: 0 1.3em;border: 0;border-radius: 0.8rem;font-weight: 500;background-color: var(--grayBg1);}
.modal .member .join_wrap .nice-select .list{max-height: 150px;}
.modal .member .join_wrap .agree { margin-top:1.2rem;}

.modal .member .join_wrap .inp_wrap .flex_wrap{display: flex;}

.modal .member .join_wrap .inp_wrap .agree em {width: 1.3em;height: 1.3em;border-radius: 3px;background-color: #fff;border: 1px solid var(--gray20);display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}
.modal .member .join_wrap .inp_wrap .agree em svg {width: 0.8em; height: auto;}
.modal .member .join_wrap .inp_wrap .agree .checkbox + div {display: flex;align-items: center;font-size: var(--p4);cursor: pointer;}
.modal .member .join_wrap .inp_wrap .agree .checkbox + div p {margin-left: 1rem;}
.modal .member .join_wrap .inp_wrap .agree .checkbox:checked + div em {background-color: var(--point01);border-color: var(--point01);}
.modal .member .join_wrap .inp_wrap .agree .checkbox:checked + div em svg path {stroke: #fff; opacity: 0.8;}
.modal .member .join_wrap .inp_wrap .agree .nice-select { width:14em; margin-right:1.2rem;}

.modal .member .join_wrap .inp_wrap .email_box { align-items: center; gap: 0.8rem;}
.modal .member .join_wrap .inp_wrap .email_box input { flex:1; }
.modal .member .join_wrap .inp_wrap .email_box .nice-select { flex:1;; }
.modal .member .join_wrap .inp_wrap .email_box em { margin:0rem; color:var(--black5);  }

/* 회원가입 완료(join_3) */
.modal .member .join_wrap .join_complete {display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0 0;}
.modal .member .join_wrap .join_complete .ico {display: flex; justify-content: center; margin-bottom: 2.4rem;}
.modal .member .join_wrap .join_complete .welcome {font-size: var(--p1); font-weight: 700; line-height: 1.4;}
.modal .member .join_wrap .join_complete .welcome b {color: var(--point01);}
.modal .member .join_wrap .join_complete .desc {margin-top: 1.2rem; color: rgba(0,0,0,0.55); font-size: var(--p4); line-height: 1.5;}
.modal .member .join_wrap .join_complete .join_tip {margin-top: 1.6rem; color: var(--point01); font-weight: 500; font-size: var(--p6); background: var(--pointBg);padding: 0.5em 1em; border-radius: 0.5rem;}

.modal .member .join_wrap .join_complete .ico{display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; background: #f0f0f0; font-size: 3.6rem; border-radius: 50%;}
.modal .member .join_wrap .join_complete .ico svg{fill: var(--gray90);}


/* 아이디 찾기 결과(find_2) */
.modal .member .join_wrap .find_result {text-align: center; padding: 1rem 0 2rem;}
.modal .member .join_wrap .find_result .id_box {padding: 2.8rem 1.2rem; background-color: var(--grayBg1); border-radius: 0.8rem;}
.modal .member .join_wrap .find_result .id_box .label {color: rgba(0,0,0,0.5); font-size: var(--p5); font-weight: 500; line-height: 1em;}
.modal .member .join_wrap .find_result .id_box .id {margin-top: 1rem; color: var(--point01); font-size: var(--p2); font-weight: 700; line-height: 1.3; word-break: break-all;}
.modal .member .join_wrap .find_result .desc {margin-top: 1.6rem; color: rgba(0,0,0,0.55); font-size: var(--p4); line-height: 1.5;}
.modal .member .join_wrap .find_result .mail_desc {margin-top: 1.2rem; color: rgba(0,0,0,0.55); font-size: var(--p5); line-height: 1.5; word-break: break-all;}
.modal .member .join_wrap .find_result .mail_desc b {color: #232323; font-weight: 600;}
.modal .member .join_wrap .find_result.none .desc {margin-top: 0;}
.modal .member .btn_wrap a.disabled {background: #EDEDED; border-color: #EDEDED; color: rgba(0,0,0,0.35); pointer-events: none;}

.modal .member .join_wrap .inp_wrap .tel_box .nice-select {width: 7em; margin-right: 0.8rem; flex-shrink: 0;}

.modal .member .join_wrap .chk_wrap {display: flex; align-items: center;}
.modal .member .join_wrap .chk_wrap svg {width: 3rem; height: auto;}
.modal .member .join_wrap .chk_wrap label {display: flex; align-items: center; cursor: pointer;}
.modal .member .join_wrap .chk_wrap input:checked + label svg circle {fill-opacity:1; fill: var(--gray90);}
.modal .member .join_wrap .chk_wrap .txt {font-size: var(--p4); font-weight: 500; margin-left: 10px;}
.modal .member .join_wrap .chk_wrap .txt span {color: var(--point01);}
.modal .member .join_wrap .chk_wrap .view {margin-left: auto; font-size: var(--p6); color: rgba(0,0,0,0.3);}

.modal .member .join_wrap .chk_all_wrap {}
.modal .member .join_wrap .chk_all_wrap label {display: flex; align-items: center; justify-content: space-between; background-color: var(--grayBg1); border-radius: 0.8rem; font-size: var(--txt); height: 3.5em; padding: 0 1.1em; font-weight: 600; cursor: pointer;}
.modal .member .join_wrap .chk_all_wrap label svg {width: 3rem; height: auto;}
.modal .member .join_wrap .chk_all_wrap input:checked + label svg circle {fill-opacity:1; fill: var(--gray90);}

.modal .member .join_wrap.find_id .tit { margin-bottom: 1em; font-weight: 600; }
.modal .member .join_wrap.find_id .chk_id { padding: 1em; border-radius: 2rem; background-color: #f6f7f9; }


/* 비디오, 유튜브 */
.modal .modal_wrap .modal_cont.video_modal{padding: 0; overflow: visible; border-radius: 0;}
.modal .modal_wrap .modal_cont.video_modal .video{position: relative; width: 100%; padding-top: 125%;}
.modal .modal_wrap .modal_cont.video_modal .video > *{position: absolute; width: 101%; height: 101%; left:-0.5%; top: -0.5%; object-fit: cover;}

/* 알랏레이어 */
.msg_layer{display: block; justify-content: center; align-items: center; overflow: auto; position: fixed; top:0; bottom:0; left:0; right:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 50px 20px 80px; background: rgba(0, 0, 0, 0.5); pointer-events: none; transition: 0.2s ease-in-out}
.msg_layer.open{opacity: 1; pointer-events: inherit}
.msg_layer .modal_wrap{display: table; position: relative; width: 100%; height: 100%; padding: 0 var(--resp_wrap_pd); margin: 0 auto; table-layout: fixed; vertical-align: middle}
.msg_layer .modal_wrap .scroll_box{display: table-cell; vertical-align: middle}
.msg_layer .modal_wrap .modal_cont {position: relative; width:max(45rem, 400px); max-width: 100%; padding: 40px var(--modal_row_pd) 40px; margin: 0 auto; background-color: #fff; border-radius: 12px;}
.msg_layer .modal_wrap .modal_cont .cont {padding: 4rem 3rem}
.msg_layer .modal_wrap .modal_cont .cont p {font-size: var(--txt3); text-align: center}
.msg_layer .modal_bot_box {display: flex; justify-content: center}
.msg_layer .modal_bot_box .btn {display: inline-block; width: 12rem; height: 4rem; line-height: 3.9rem; background-color: #000; color: #fff}
.msg_layer .modal_bot_box .btn:first-child:nth-last-child(2),
.msg_layer .modal_bot_box .btn:first-child:nth-last-child(2) ~ .btn {width: 12rem;}
.msg_layer .modal_top { display: flex; align-items: center; justify-content: space-between; padding: 4rem 4rem 2rem; display: none}
.msg_layer .modal_top.step { align-items: flex-start; }
.msg_layer .modal_top .tit_wrap {  }
.msg_layer .modal_top .step { font-size: 16px; font-weight: 600; }
.msg_layer .modal_top .step + .tit { margin-top: 10px; }
.msg_layer .modal_top .tit { font-size: 24px; font-weight: 700; }
.msg_layer .btn_wrap { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 3rem; }
.msg_layer .btn_wrap .btm_btn { cursor:pointer;display: flex; align-items: center; justify-content: center; flex: 1; max-width: 50%; height: 3em; padding: 0 1.5em; line-height: 3.1rem; font-size: var(--p3); font-weight: 600; border-radius: 2em; background-color: var(--point01); border: 1px solid var(--point01); color: #fff; box-shadow: 0 0 0 transparent; transition: box-shadow 0.3s, background-color 0.3s, color 0.3s; white-space: nowrap; }
.msg_layer .btn_wrap .btm_btn.wh{background-color: #fff; color: #000; border-color: #000;}
.msg_layer .btn_wrap .btm_btn .txt { font-weight: 600; }
.msg_layer .btn_wrap > * + * { margin-left: 1rem; }




@media screen and (min-width: 1241px) {
    .tel_btn{pointer-events: none;}

    @media (min-width: 1241px) {
        .fix_btn_box .top_btn_box .top_btn:hover svg {transform: translateY(-4px);}
        .keyword_form .keyword .btn:hover { border-color: var(--gray70);}
        .all_search_page .menu_sect .list_box .cont:hover {background-color: var(--point01); color: #fff;}
        .all_search_page .menu_sect .list_box .cont:hover .tit .arr {background: url('data:image/svg+xml,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 0L14.4156 3.08437L26.6219 15.3125L0 15.3125L0 19.6875H26.6219L14.4156 31.9156L17.5 35L35 17.5L17.5 0Z" fill="white"/></svg>') no-repeat center / contain;}
        .all_search_page .menu_sect .list_box .cont:hover .nav_txt {color: #fff;}
        .all_search_page .tab_box .btn:hover {background-color: var(--gray90); color: #fff; border-color: var(--gray90);}
        .my_write_form .form_list > li.last_btns .modify_btn:hover {background-color: var(--point01); border-color: var(--point01); color: #fff; }
    }

}

/*3201 ~  */
/* @media screen and (min-width: 3201px) {
    html { font-size: 13px;}
} */

/* 2561 ~ 3200 */
/* @media screen and (min-width: 2561px) and (max-width: 3200px) {
    html { font-size: clamp(0.625rem, 0.125rem + 0.3125vw, 0.75rem);}
} */

/* 2560px 초과 */
@media screen and (min-width: 2561px) {
    html { font-size: 10px; }

}

/* 2560px 이하 */
@media screen and (max-width: 2560px) {
    html {font-size: clamp(0.4875rem, 0.075rem + 0.34375vw, 0.625rem);}
}

@media screen and (max-width: 2000px){
    html {font-size: 7.8px;}

    :root {
        --inM:1340px; 
    }


}

@media screen and (max-width: 1640px){

    :root {
        --inPd: 50px;
        --hdIn: var(--inPd)
    }
}


@media screen and (max-width: 1240px) {
    html {font-size: 7px;}

    :root {

        --h1:38px; 
        --h2:34px; 
        --h3:30px; 
        --h4:28px; 
        --h5:24px;
        --h6:22px;
        --h7:20px; 
        --h8:20px; 

        --p1:18px; 
        --p2:16px;
        --p3:14px;  /* 본문 */  
        --p4:14px;
        --p5:13px;
        --p6:12px;
        --p7:11px;
        --p8:10px;


        --pd: 25rem;
        --pd1: 20rem;
        --pd2: 15rem;
        --pd3: 10rem;
        --pd4: 10rem;


        
        --contMt1: 80px;
        --contMt2: 60px;
        --contMt3: 40px;
        --contMt4: 30px;

        --bgPd:var(--pd4);
        --sectPd:var(--pd1);

    }


	.pc_only { display: none !important}
	.mo_over { display: none !important}
	.mo_only { display: block !important}
	.mo_only.flex {display: flex !important}


}

@media screen and (max-width:1040px) {
    :root {
        --inPd:30px;
    }
}





@media screen and (max-width: 768px) {
    .over_modal .modal_cont.terms .cont .effective_date { font-size: var(--p7); }   /* 약관 시행일 — 768 이하 날짜 글자는 전부 p7 (2026-10-14 사용자 지시) */
     html {font-size: 6px;}
     body {line-height: 1.5;}

    :root {


        --inPd:30px;
        --hdH: 60px;
        --inpH: 45px;
        --subPd: 80px;

        --d1:36px;
        --h1:31px; 
        --h2:27px; 
        --h3:25px; 
        --h4:23px; 
        --h5:21px;
        --h6:21px;
        --h7:19px; 
        --h8:19px; 

        --p1:17px; 
        --p2:15px;
        --p3:13px;  /* 본문 */  
        --p4:13px;
        --p5:12px;
        --p6:12px;
        --p7:11px;
        --p8:10px;

        --pd:120px;
        --pd1:120px;
        --pd2:80px;
        --pd3:80px;
        --pd4:80px;

        --contMt1: 30px;
        --contMt2: 30px;
        --contMt3: 30px;
        --contMt4: 30px;
    }



    .phone_only { display: block !important}
	.phone_only.flex {display: flex !important}
    .phone_over {display: none !important;}

	html::-webkit-scrollbar {display: none;}

    .quick_bar { right: 2rem; bottom: 3rem; }
    .quick_bar .q_tip { display: none; }
    .quick_bar .q_now, .quick_bar .q_whatsapp { width: 7rem; height: 7rem; }

    .over_modal .modal_cont.terms .modal_top { padding: 1.6rem 1.6rem 1.6rem 2.2rem; }
    .over_modal .modal_cont.terms .modal_top .tit { font-size: 2rem; }
    .over_modal .modal_cont.terms .cont { padding: 2.2rem; max-height: 68vh; }

    .c_form .f_row { flex-direction: column; gap: 1.4rem; }
    .c_form .f_row > input[type="text"], .c_form .f_row > .nice-select { flex-basis: 100%; width: 100%; }
    .c_form .upload_btn { width: 13rem; }
    .c_form .f_captcha { transform: scale(0.82); transform-origin: left top; }

    .modal, .over_modal { padding: 3rem 0 4rem; }
    .modal:has(.modal_cont.quick_consult) { padding: 0; }
    .modal_cont.quick_consult { right: 1.4rem; left: 1.4rem; bottom: 2rem; width: auto; max-height: calc(100% - 4rem); }
    .quick_consult .qc_top { padding: 2.4rem 2.4rem 0.4rem; }
    .quick_consult .c_form { padding: 2rem 2.4rem 0; }
    .quick_consult .qc_sns { gap: 2.4rem; margin-top: 2.6rem; }

    .all_search_page .tab_box{gap: 8px;}
    .all_search_page .tab_box .btn{font-size: var(--p5);}
    .all_search_page .menu_sect .list_box {grid-template-columns: repeat(3, minmax(0, 1fr));}


}


@media screen and (max-width: 600px) {

    
    :root {
        --inPd:15px;
    }

    .mini_over {display: none !important;}
    .mini_only {display: block !important;}
    .mini_only.flex {display: flex !important;}

    .footer .info_txt p:nth-child(2) .sep {display: none;} 

    .nice-select:after {right: 1.5rem;}

    

    /* Modal */
    .modal .member .join_wrap .inp_wrap .email_box{flex-wrap: wrap;}
    .modal .member .join_wrap .inp_wrap .email_box .nice-select{flex: unset; width: 100%;}
    .contact_modal {padding: 20px 15px; width: 100%;}
    .contact_modal .tab_cont.branch .branch_tab_box .branch_tab {font-size: 10px;}
    .contact_modal .contact_cont_box .contact_cont .cont_box {padding: 20px 15px;}
    .contact_modal .tab_cont.branch .branch_tab_box {gap: 5px;}
    .contact_modal .tab_cont.branch .branch_tab_box .branch_tab {flex: none; padding: 0 6px;}
    .contact_modal .cont_tab_box {padding: 5px;}
    .contact_modal .top_box {align-items: flex-end; margin-bottom: 20px; padding-bottom: 20px;  position: relative;}
    .contact_modal .top_box::before {content: ""; position: absolute; left: -15px; width: calc(100% + 30px); bottom: 0; background-color: var(--gray20); height: 1px;}

    .contact_modal_bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: block; z-index: 25; backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: 0.3s ease-in-out;}
    .contact_modal_bg.on {opacity: 1; pointer-events: all;}

    .contact_modal .sns_box .link_wrap .kakao {height: 3em;}
    .contact_modal .sns_box .link_wrap .cir_ico {width: 3em;}
    


    /* 통합검색 */
    .keyword_form .keyword{gap: 5px;}
    .all_search_page .menu_sect .list_box {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .all_search_page .tab_box .btn{width: calc(50% - 5px);}
    .all_search_page .menu_sect .list_box .cont .tit{font-size: 16px;}
    .all_search_page .menu_sect .list_box .cont{padding-top: 40px;}


    /* 마이페이지 */
    .my_write_form .form_list { padding: 4rem 0;}
    .my_write_form .form_list > li .left_txt {width: 5em;}
    .my_write_form .form_list > li:not(.mo_flex){display: block; margin-top: 3rem;}
    .my_write_form .form_list > li:not(.mo_flex) .left_txt {width: 100%; margin-bottom: 5px;}

    .my_write_form .form_list li.last_btns{ display: flex; flex-direction: column; margin-top: 5rem;}
    .my_write_form .form_list > li.last_btns .modify_btn{width: 100%; justify-content: center;}
    .my_write_form .btn_lost{order: 2; font-size: 11px; margin-top: 20px; margin-bottom: 20px;}
    .my_write_form .form_list > li.marketing .radio_box{min-height: 0;}

    .my_page .history_sect .description{flex-direction: column;}
    .my_page .history_sect .description a{margin-top: 8px;}

    
    .footer .map_btn img {height: 15px;}
    .footer .map_btn.naver img, .footer .map_btn.google img {height: 16px;} 

    .footer .terms_txt a + a::before {display: none;}
    

}

/* 전화 링크(tel:) — PC 접속은 발신을 막아 두었으므로(inc/js/common.js 가 <html class="is_pc"> 부여) 손가락 커서로 보이지 않게 */
html.is_pc a[href^="tel:" i] {cursor: default;}

/* 아이콘 전용 버튼·링크 툴팁 — inc/js/common.js 가 body 에 한 개 띄운다(동탄 헤더 .ico_btn[data-tooltip] 과 같은 모양).
   메인·서브의 rem 기준값이 달라 px 로 고정. 1241px 이상 + 마우스 기기에서만 JS 가 켠다. */
.ico_tooltip {position: fixed; left: 0; top: 0; z-index: 10000; max-width: 240px; padding: .45em .8em; border-radius: 4px; background-color: var(--black, #1C1C1C); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility .2s;}
.ico_tooltip.up {transform: translateY(4px);}
.ico_tooltip.on {opacity: 1; visibility: visible; transform: none;}