@charset "utf-8";

:root {
	font-size: 16px;
	
  --primary: #FF6F61;        /* 메인 코랄 (주요 버튼, 포인트 컬러) */
  --accent: #f1968f;         /* 강조 브릭레드 (CTA hover, 주목 요소) */
  --text-base: #444;      /* 기본 텍스트 (본문, 제목 등) */
  --text-sub: #666;       /* 서브 텍스트 (보조 설명 등) */
  --highlight: #FFD6C0;      /* 하이라이트 살몬 (섹션 배경, 강조 배경 등) */
  --bg-light: #F5EBDD;       /* 웜 베이지 배경 (전체 또는 카드 배경 등) */
  --bg-gray: #f0f0f0;        /* 라이트 그레이 (일반 배경, 카드 등) */
  --bg-dark: #2c3351;        /* 딥 네이비 (푸터, 강조 배경 등) */
  --bg-brown: #8B6D5C;       /* 브라운 그레이 (테두리, 서브 강조 등) */
  --primary_clean:#2196f3;
}
input:focus, 
select:focus,
textarea:focus {
    outline: none;
	box-shadow: none;
}
input::placeholder,
textarea::placeholder {
    color: #999;
}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.none {display:none;}
* {
	/* 포커스 outline 제거 */
	outline: none;
	
	/* 하이라이트 색상을 투명하게 설정 */
	-webkit-tap-highlight-color: transparent;
	
	/* 모든 속성의 변화에 0.3초 애니메이션을 적용 (부드럽게) */
	-webkit-transition:all .3s ease-in-out; 
	-moz-transition:all .3s ease-in-out; 
	-ms-transition:all .3s ease-in-out; 
	-o-transition:all .3s ease-in-out; 
	transition:all .3s ease-in-out;  
}
.noselect {
  -webkit-user-select: none; /* Safari/Chrome */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* 표준 */
}
input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: #000 !important;
}
textarea::placeholder {
  white-space: pre-line;
}
.flexbox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
}
.flexbox_stretch {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
}
.between {
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
}
.around {
	justify-content: space-around;
	-webkit-justify-content: space-around;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
}
.start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.wrap { flex-wrap: wrap; }
.column { 
	-webkit-flex-direction:column;
	-moz-flex-direction:column;
	-ms-flex-direction:column;
	-o-flex-direction:column;
	flex-direction:column;
}

.boxPage { margin:2.5rem auto 0 auto; text-align:center; }
.boxPage strong,
.boxPage a { display:inline-block; width:2.4rem; height:2.4rem; line-height:2.4rem; text-align:center; }
.boxPage strong { background:#007a9c; }

.under { 
	background-image: -webkit-linear-gradient(transparent 60%, #d5e9e6 40%);
	background-image: -moz-linear-gradient(transparent 60%, #d5e9e6 40%);
	background-image: -ms-linear-gradient(transparent 60%, #d5e9e6 40%);
	background-image: -o-linear-gradient(transparent 60%, #d5e9e6 40%);
	background-image: linear-gradient(transparent 60%, #d5e9e6 40%);
	background-size: 100% 100%; 
}

.overflow { overflow:hidden; }

.radius4 {
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}
.radius16 {
	-webkit-border-radius:16px;
	-moz-border-radius:16px;
	-ms-border-radius:16px;
	-o-border-radius:16px;
	border-radius:16px;
}
.radius26 {
	-webkit-border-radius:2rem;
	-moz-border-radius:2rem;
	-ms-border-radius:2rem;
	-o-border-radius:2rem;
	border-radius:2rem;
}
.radius50 {
	-webkit-border-radius:85px;
	-moz-border-radius:85px;
	-ms-border-radius:85px;
	-o-border-radius:85px;
	border-radius:85px;
}
.radius100 {
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	-ms-border-radius:100%;
	-o-border-radius:100%;
	border-radius:100%;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield; /* Firefox에서도 동작하도록 추가 */
}

@keyframes scroll{
	0%{bottom: -25px;}
	100%{bottom: -40px;}
}
@keyframes height{
	0%{height:100%}
	100%{height:0%}
}
@keyframes width{
	0%{width:0%}
	100%{width:100%}
}
@keyframes scaleWidth {
    0% { width: 0; opacity: 0; } 
    100% { width: 100%; opacity: 1; } 
}
@keyframes scale{
	0%{transform:scale(0.6); opacity: 0;}
	100%{transform:scale(1); opacity: 1;}
}
@keyframes upDown{
	0%{transform:translateY(-40px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}
@keyframes up{
	0%{transform:translateY(110px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}
@keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes fadeUp{
	0%{transform:translateY(180px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}
@keyframes fadeLeft{
	0%{transform:translateX(180px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}
@keyframes fadeRight{
	0%{transform:translateX(-180px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}
@keyframes move{
	0%{transform:translateX(-10px) translateY(-50%); opacity: 0;}
	100%{transform:translateX(10px) translateY(-50%); opacity: 1;}
}

.ani { opacity:0; }
.fadeUp { animation: fadeUp 1s ease forwards; }
.fadeLeft { animation: fadeLeft 1s ease forwards; }
.fadeRight { animation: fadeRight 1s ease forwards; }
.scaleWidth { animation: scaleWidth 1.5s 0.8s both; }

.table-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤을 지원 */
}

.boxForm { background:#fff; padding:1.5rem; width:100%; max-width:800px; margin:0 auto; position:relative; overflow-y:scroll; }
.boxForm .boxFormTit { text-align:center; font-size:1.35rem; font-weight:600; height:3rem; line-height:3rem; border-bottom:1px solid #ddd; margin-bottom:1rem; overflow:hidden; white-space:nowrap; }
.boxForm .boxFormTit .star i { color:var(--primary); margin-left:2px; font-size:1rem; }
.boxForm .boxFormCon { overflow-y:scroll; max-height:calc(80vh - 7.5rem); line-height:160%; padding-bottom:2rem; font-size:1rem;}
.boxForm .boxFormCon img { margin-top:.5rem; max-width:100%; display:block;}
.boxForm .boxFormCon h2 { display:block; font-size:1.15rem; }
.boxForm .boxFormCon .line { width:100%; height:1px; background:#ddd; margin:1rem auto 0 auto; }
.boxForm .mfp-close { font-size:3rem; }

.boxCalendar { background:#fff; padding:1.5rem; width:90vw;  margin:0 auto; padding-bottom:2rem; position:relative; overflow:hidden; }
.boxCalendar .boxCalendarTit { text-align:center; font-size:1.25rem; font-weight:500; height:3rem; line-height:3rem; border-bottom:1px solid #ddd; margin-bottom:.5rem; overflow:hidden; }
.boxCalendar .boxCalendarCon .line { width:100%; height:1px; background:#ddd; margin:0 auto; }
.boxCalendar .boxCalendarCon label { margin-top:1rem; }

/* 페이징 */
.pg_wrap {clear:both;display:block;margin:1.5rem auto;text-align:center;}
.pg_wrap .pg { align-items: center;display:block;}
.pg_wrap .pg a,
.pg_wrap .pg strong,
.pg_wrap .pg button { display:inline-block; text-align:center; vertical-align:middle;background-color:#fff;color:#959595;border:1px solid #eee; font-size:1rem;height:2rem;line-height:2rem;min-width:2rem;text-decoration:none;border-radius:3px; }
.pg_wrap .pg a:focus,
.pg_wrap .pg a:hover,
.pg_wrap .pg button:hover {text-decoration:none}
.pg_wrap .pg strong { background:var(--primary);color:#fff;font-weight:normal;}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}

/* 체크박스 동의 */
.service-agree { display: block; width: 100%; padding: 1rem; border: 1px solid #ddd; border-radius: 4px; background: #fff; font-size: 1.15rem; }
.agree-header { display: flex; justify-content: space-between; align-items: left; }
.toggle-details { display: inline-block; padding: 5px 10px; border: none; border-radius: 3px; background: #f1f1f1; font-size: 14px; cursor: pointer; }
.agree-details { display: none; margin-top: 15px; }
.agree-details.open { display: block; }
.sub-agree { display: flex; align-items: left; margin-bottom: 10px; font-size: 1rem; }
.sub-agree label { margin-left: 8px; text-align:left; white-space:nowrap; text-overflow:ellipsis; }
.sub-agree label span { color: var(--primary); }
.view-link { margin-left: auto; font-size: .9rem; color: #007bff; cursor: pointer; }

#boxBlack {display:none;top: 0;left: 0;width: 100%;height: 100%;z-index: 1042;overflow: hidden;position: fixed;background: #0b0b0b;opacity: 0.8;}
#boxBlack.on {display:block;}

/* 주소 검색시 팝업목록 */
.suggest-list{list-style:none;max-height:10rem;overflow-y:auto;margin:0;padding:0;width:100%;position:absolute;z-index:1000;background:#fff;border-radius:.5rem;display:none;}
.suggest-list[data-visible="true"]{display:block;border:1px solid #ccc;padding:0.5rem 0;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.suggest-item{line-height:3rem;padding:0 1.5rem;cursor:pointer;text-align:left;}
.suggest-item:hover{background:#f0f0f0;}

/* ================================================
   접수폼 달력
   ================================================ */
/* 달력 크기 */
#ui-datepicker-div {padding:.75rem !important;z-index:1000000 !important;position:fixed !important;max-width:340px; width:90% !important;top:50% !important;left:50% !important;transform:translate(-50%, -50%) !important;z-index:10000 !important;display:none}

/* 연도와 월 select를 동일한 줄에 정렬 */
.ui-datepicker .ui-datepicker-title {display:flex;justify-content:center;align-items:center;gap:.35rem;}

/* 연도 select 박스도 스타일 통일 */
.ui-datepicker select.ui-datepicker-year,.ui-datepicker select.ui-datepicker-month {padding:4px 6px;border:0;border-radius:4px;background-color:#fff;font-size:14px;outline:none;text-align:center;appearance:none;-webkit-appearance:none;}

/* 비활성(선택 불가능) 날짜 */
.ui-datepicker td.ui-datepicker-unselectable span {background-color:#fff !important;border:0 !important;}

/* 활성(선택 가능) 날짜 */
.ui-datepicker td a {height:auto !important;line-height:2.4rem !important;border:0 !important;background-color:#f0f0f0 !important;}

/* 선택된 날짜 */
.ui-datepicker td a.ui-state-active {background-color:var(--primary) !important;}

/* 닫기 버튼 */
.ui-datepicker-close {border:0 !important;background:none !important;}
.ui-datepicker-close::before {content:'달력';}
.ui-datepicker-close::after {content:'\2715';margin-left:.5rem;}

/* 보관이사용 달력 */
/* daterangepicker 정가운데 위치 */
.daterangepicker {position: fixed !important;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%) scale(1.25) !important;transform-origin: center center !important;background-color: #fff;border: 0;font-weight: normal !important;z-index: 9999 !important;}
/* 말풍선 꼬리 제거 */
.daterangepicker:before,
.daterangepicker:after {display: none !important;}
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--primary); color: #fff; }
.daterangepicker td.in-range { background: var(--bg-light) !important; }
.daterangepicker td.off { text-decoration: none !important; color: #ccc !important; }
.daterangepicker .drp-selected { font-weight: bold; color: var(--primary); }
.daterangepicker .btn { background: var(--primary); color: white; border: none;}
.daterangepicker td.start-date,
.daterangepicker td.end-date {background-color: var(--primary) !important;color: #fff !important;}
/* 회색 날짜는 항상 회색으로, 선택되더라도 색이 바뀌지 않게 강제 고정 */
.daterangepicker td.off,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.daterangepicker td.off.in-range,
.daterangepicker td.off.active {background: none !important;color: #ccc !important;font-weight: normal !important;pointer-events: none !important; /* 선택도 차단 */}