@charset "utf-8";

/*  (update 2026.05.19)

	**공통 컴포넌트 v1.0**

	[ CSS 위치 순서 ]
	■ base : 컬러 , 글꼴, 폰트 등  변수 정의
	■ atoms : input , button , icon , tag, layer , bullet, heading 및  layout(header, container, footer ) 더이상 쪼갤수 없는 요소
	■ moleculse : atoms 와 결합하여 사용.
	■ organisms : popup(layer,toast, alert, confirm), table 재사용성이 낮아지는 특성
	■ res(media query) : 
	
	
	[ 작업시 유의할점 ]
	■ CSS 위치 순서를 변경하지 않는다.
	■ 컨포넌트가 아닌 페이지를 위한 스타일은 해당 파일에 작업하지 않는다.
	■ 클래스명을 BEM방식으로 작업하여 충돌을 방지한다. (black__element--modififer)
		예외, 이미 개발에서 공통으로 사용하고 있는 경우 제외
	■ 컨포넌트 클래스명은 고유 클래스명이다. 
		ex) .Apage .btn--default {} , .btn--default.btn--wfull {}
		 예시처럼, 컨포넌트 클래스명을 가져와서 속성을 변경하지 않는다.
		 단, 별도의 클래스명을 추가하여 속성을 변경하는건 가능한다.
		 단, 여백 및 폰트 사이즈 등 간단한 속성 변경은 default.css에 있는 클래스명을 사용한다.

	■  공통 컨포넌트를 활용할 수 없는 경우 새로운 컨포넌트를 생성한다.
		단, atoms 처럼 쪼개서 작업한 다음 조립하는 방식으로 구성하여 유지보수 활용도를 높인다.

	■ 선택자를 높여서 작업하는 방식 또는  important를 지양한다.
		ex) .item__list.round__box__roof .accordion__group >  .tit {}
		ex) .item__list.round__box__roof .accordion__group >  .tit { font-size: 18px !important;}

	■ 기본 태그에 속성을 작업하는 방식을 지양한다.
		ex) .dl--list > dt > span {}

	■ 공통 컨포넌트를 수정해야하는 경우 다른페이지들에 영향도를 확인하여 수정한다. 
	■ mo, moria , etcUrl .. 등 동일한 디자인으로 작업되는 페이지 인클루드
	

*/




/* ==========================================================================================
 	reset & normailze  css
========================================================================================== */
/* reset */
:where(body, html) {
	font-family:  'Roboto', 'Noto Sans KR', 'Nanum Gothic','나눔 고딕', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
}
:where(body,h1,h2,h3,h4,h5,h6,pre,ul,li,ol,p,nav,section,article,header,footer,main,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,hr,input,button,textarea,figure,figcaption) {
    padding: 0;
    margin: 0;
}
:where(ul,li,ol) {
    list-style: none; 
}
/* 홈페이지 영향으로 인해 제거 - 자동차산출기 step4 (btn-help1 영향 )
:where(img, input, select, textarea,button,a) {
    vertical-align: middle;
}*/
:where(u,ins,a) {
    text-decoration: none;
}
:where(em, i ) {
    font-style: normal;
    font-weight: inherit;
}
:where(button) {
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: none;
    border: none;
    background-color: transparent;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}
.input--text:focus {
    outline: none;
}

.input--text:-webkit-autofill,
.input--text:-webkit-autofill:hover,
.input--text:-webkit-autofill:focus,
.input--text:-webkit-autofill:active,
.input--text:-internal-autofill-selected {
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	-webkit-background-clip: text;
}
.input--text:disabled,
.input--text:read-only {
    background: transparent !important;
}
.input--text[type="password"], 
.input--text[type="tel"],
.input--text[type="text"] {
	border: none;
	background-color: transparent;
	-webkit-appearance: none;
    appearance: none;
}

/* normailze */
.input--text[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

.input--text::placeholder,
.search__box--input::placeholder {
    font-size: var(--font-s18);
    color:#999;
    font-weight:300;
    font-family: 'Roboto', 'Noto Sans KR';
    letter-spacing:-0.05em;
}

.select--reset {
	box-shadow: none !important;
	outline:none;
	border: none;
	background: transparent none;
}

/* ==========================================================================================
 	1. base  css
========================================================================================== */
:root {
    --black: #000000;
    --white: #ffffff;

    --dark-primary : #111111;
    --dark-secondary : #333333;
    --gray-primary : #999999;
    --gray-secondary : #666666;

    /* hana point color */
    --primary: #009591;
    --secondary: #018d70;

    --mint-primary : #46d3b8;
    --mint-secondary : #20b7a4;

    --deepgray : #556b79;
    --green : #16a077;
	
	/* info Color */
    --success : #20b7a4;
    --warning : #df8714;
    --danger : #df4c4c;
    --info : blue;
    --yellow : #fdfb39;

    --error : #ed1651;
	
	--disabled : #e5e5e5;
	--disabled-level : #757575;

	/* Color */
    --border: #dddee4;
    --border2: #e2e2e3;
    --border3: #333333;
    --border4: #e5e5e5;

    /* shadow */
    --shadow :0px 5px 10px 0px rgb(0 0 0/ 10%);
    --shadow-active : 0px 5px 15px 0px rgb(0 149 145/ 40%); 
    --shadow-green-active : 0px 5px 15px 0px rgb(22 160 119 / 40%); /* save active */
    --shadow-mint2-active : 0px 5px 15px 0px rgb(32 183 164 / 40%);  /* mint2 active */

    /* z-index */
    --z-header : 100;
    --z-popup : 100;
    --z-dim: 99;

    /* font */
    --notoSans : Noto Sans KR;
    --roboto: Roboto;
    --pass: pass;

    /* font-size  */
    --font-s12 : 0.75rem;
    --font-s13 : 0.812rem;
    --font-s14 : 0.875rem;
    --font-s15 : 0.937rem;
    --font-s16 : 1rem; /* 브라우저 100%(16px) 기준 */
    --font-s17 : 1.062rem;
    --font-s18 : 1.125rem;
    --font-s19 : 1.187rem;
    --font-s20 : 1.25rem;
    --font-s21 : 1.312rem;
    --font-s22 : 1.375rem;

} /* End root */


.aria--hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    border-width: 0;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
}
/* 스크롤 방지 */
.scroll--lock {
    overflow-y: hidden;
}

/* background Color */


/* txtColor */
.txtBlack {color: var(--black) !important;}
.txtPrimary {color: var(--primary) !important; }
.txtDarkPrimary {color: var(--dark-primary) !important; }
.txtMintSecondary {color: var(--mint-secondary) !important; }
.txtWarning {color: var(--warning) !important; }
.txtDanger {color: var(--danger) !important; }
.txtError {color: var(--error) !important; }
.txtYellow {color: var(--yellow) !important; }
.txtWhite {color: var(--white) !important;}
.txtGrayPrimary {color: var(--gray-primary) !important; }
.txtGraySecondary {color: var(--gray-secondary) !important; }
.txtDarkSecondary { color: var(--dark-secondary) !important; }


/* bg Color */
.bgColor {background-color: var(--white) !important; }
.bgColor1 {background-color: #f9f9fb !important; }
.bgColor2 {background-color: #eff0f3 !important; }

.bgNeutral {background-color: var(--white) !important; }
.bgPrimary {background-color: var(--primary) !important; }
.bgMintSecondary {background-color: var(--mint-secondary) !important; }
.bgSuccess {background-color: var(--success) !important; }
.bgWarning{background-color: var(--warning) !important; }
.bgDanger {background-color: var(--danger) !important; }


/* gap */
.gap0 {gap: 0px !important;}
.gap5 {gap: 5px !important;}
.gap10 {gap: 10px 10px !important; }
.gap15 {gap: 15px 15px !important;}
.gap20 {gap: 20px !important;}

.gap--block5 {gap: 5px 0 !important;}
.gap--block10 {gap: 10px 0 !important;}
.gap--block15 {gap: 15px 0 !important;}
.gap--block20 {gap: 20px 0 !important;}
.gap--block25 {gap: 25px 0 !important;}
.gap--block30 {gap: 30px 0 !important;}

.gap--inline5 {gap: 0 5px !important;}
.gap--inline10 {gap: 0 10px !important;}
.gap--inline15 {gap: 0 15px !important;}
.gap--inline20 {gap: 0 20px !important;}
.gap--inline25 {gap: 0 25px !important;}
.gap--inline30 {gap: 0 30px !important;}

/* padding */
.pd--block5 {padding-block: 5px !important; }
.pd--block10 {padding-block: 10px !important; }
.pd--block15 {padding-block: 15px !important; }
.pd--block20 {padding-block: 20px !important; }
.pd--block25 {padding-block: 25px !important; }
.pd--block30 {padding-block: 30px !important; }


.pd--inline5 {padding-inline: 5px !important; }
.pd--inline10 {padding-inline: 10px !important; }
.pd--inline15 {padding-inline: 15px !important; }
.pd--inline20 {padding-inline: 20px !important; }
.pd--inline25 {padding-inline: 25px !important; }
.pd--inline30 {padding-inline: 30px !important; }


.transition0 {transition: none !important;}

/* ==========================================================================================
 	2. atoms css
========================================================================================== */
.wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.header {
    position: relative;
    background-color: var(--white);
    border-bottom: 1px solid var(--border2);
    padding-inline: 20px;
    box-sizing: border-box;
}
.header__inner {
	display: flex;
	height: 50px;
	align-items:center;
}
.header.sticky {
    position: sticky;
    z-index: 10;
    top: 0; left:0;
    width: 100%;
}
.header .header__logo {
	display: block;
	width: 120px;
	height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 30px;;
}

.header .header__logo > a {
    display: block;
    height: 100%;
}
.header .btn--back {
	width: 30px;
	height: 100%;
	background-color: var(--primary);
    mask-image: url('/static/resources/mo/img/icon_prev.png');
    -webkit-mask-image: url('/static/resources/mo/img/icon_prev.png');
    mask-position: left center;
    -webkit-mask-position: left center;
    background-position: left center;
    mask-size: 10px auto;;
    -webkit-mask-size: 10px auto;
    background-size: 10px auto;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
}
.header .header__title {
    font-size: 16px;
    color: var(--dark-primary);
    font-weight: 500;
}

.container {
    position: relative;
    flex: 1;
    padding-bottom: 20px;
    overflow-y: auto;
} 

.footer {
    position: relative;
}

.footer.sticky {
    position: sticky;
    z-index: 10;
    bottom: 0; left:0;
    width: 100%;
    box-sizing: border-box;
}

/* icon
========================= */
.i--thumbs {
    position: relative;
    display: inline-block;
    width: 30px;
    aspect-ratio:  1;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-size: contain;
    mask-position: center center;
    -webkit-mask-position: center center;
    background-position: ceter center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
}
.i--arrow:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%; right: 20px;
    width: 12px; height: 7px;
    background-color: #bcbcbc;
    mask-image: url('/static/resources/onedayHoneQ/img/btn_arrowDn_g.png');
    -webkit-mask-image: url('/static/resources/onedayHoneQ/img/btn_arrowDn_g.png');
    mask-position: right center;
    -webkit-mask-position: right center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
    transition: .6s;
    transform: translateY(-50%) rotate(-95deg);
}
.i--calendar:after {
    content: '';
    position: absolute;
    width: 30px; height: 30px;
    mask-image: url('/static/resources/moria/img/common/icon_date_active.png');
    -webkit-mask-image: url('/static/resources/moria/img/common/icon_date_active.png');
    mask-size: 18px auto;
    -webkit-mask-size: 18px auto;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
    background-color: var(--disabled-level);
}
.i--search {
    width: 30px; height: 30px;
    mask-image: url('/static/resources/mo/img/img_search.png');
    -webkit-mask-image: url('/static/resources/mo/img/img_search.png');
    mask-size: 18px auto;
    -webkit-mask-size: 18px auto;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: #8d9695;
}
.i--question {
    width: 30px; height: 18px;
    mask-image: url('/static/resources/moria/img/q-gray-tooltip.png');
    -webkit-mask-image: url('/static/resources/moria/img/q-gray-tooltip.png');
    mask-size: 18px auto;
    -webkit-mask-size: 18px auto;
    mask-position: left center;
    -webkit-mask-position: left center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: #adadad;
}
.i--success {
    background-image: url('/static/resources/moriaHoneQ/img/pop_point.png');
}
.i--warning {
    background-image: url('/static/resources/moriaHoneQ/img/pop_warning.png');
}
.i--active,
.i--active--after:after {
    background-color: var(--primary);
}

.i--info:before {
	content: '';
	width: 22px;
	aspect-ratio:  1;
	background: url('/static/resources/mo/img/icon_info.png') no-repeat center / auto 18px;
}
.i--arrow--select:before {
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
   	width: 7px;
   	height: 7px;
	mask-image: url('/static/resources/onedayHoneQ/img/btn_arrowDn_g.png');
    -webkit-mask-image: url('/static/resources/onedayHoneQ/img/btn_arrowDn_g.png');
    mask-position: right center;
    -webkit-mask-position: right center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
    transition: .6s;
	transform: translateY(-50%);
	background-color: var(--primary);
}

/* no data */
.no--dataIcon {
	padding-top: 100px;
	box-sizing: border-box;
	background-image: url("/static/resources/mo/img/icon_null.png");
	background-position:  top 20px center;
	background-repeat: no-repeat;
	background-size: 50px auto;
	font-size: 15px;
	color: #999;
	text-align: center;
}


/* checkbox
========================= */
.checkbox--label {
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    width: 100%;
    gap: 0 15px;
    color: var(--black);
    font-size: var(--font-s16);
    font-weight: 400;
}
.checkbox--input {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    border-width: 0;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
}
.checkbox--label .i--check {
    position: relative;
    height: 24px;
    aspect-ratio: 1;
    background-color: var(--white);
    border: 1px solid #d9d9d9;
    border-radius: 100%;
    transform: none;
    vertical-align: middle;
    line-height: normal;
}
.checkbox--label .i--check:after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    background-color: #d9d9d9;
    transform: translate(-50%, -50%);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('/static/resources/moriaHoneQ/img/icon_check.png');
    -webkit-mask-image: url('/static/resources/moriaHoneQ/img/icon_check.png');
}
.checkbox--label .checkbox--txt {
	flex: 1;
}
/* checked */
.checkbox--input:checked + .i--check {
    background-color: var(--primary);
    border-color: var(--primary);
}
.checkbox--input:checked + .i--check:after {
    background-color: var(--white);
}

/* 작은 체크박스 ex) v텍스트 */
.checkbox--label--text {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: var(--font-s14);
    color: var(--dark-secondary);
    font-weight: 300;
}
.checkbox--label--text .i--check {
    display: inline-block;
    width: 0.8em;
    aspect-ratio: 1;
    background-color: #d9d9d9;
    mask-image: url('/static/resources/moriaHoneQ/img/icon_check.png');
    -webkit-mask-image: url('/static/resources/moriaHoneQ/img/icon_check.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
}

/* checked */
.checkbox--label--text:has(.checkbox--input:checked) {
    color: var(--primary);
    font-weight: 400;
}
/* disabled */
.checkbox--label:has(.checkbox--input:disabled) {
    color: var(--disabled-level);
}
.checkbox--label:has(.checkbox--input:disabled) .i--check {
    background-color: #ccc;
}
.checkbox--label:has(.checkbox--input:disabled) .i--check:after  {
	background-color: var(--white);
}

/* switch
========================= */
.switch--label {
	display: flex;
	flex-direction: row;
	gap: 5px;
}
.switch--txt {
	font-size: var(--font-s14);
	color: var(--dark-secondary);
}
.switch--label .i--switch {
	position: relative;
	background-color: #d9d9d9;
	border-radius: 15px;
	width: 40px;
	height: 18px;
	box-sizing: border-box;
}
.switch--label .i--switch:after {
	content: 'on';
	position: absolute;
	top:50%;
	left:0;
	width: 22px;
	aspect-ratio: 1;
	border-radius: 100%;
	box-sizing: border-box;
	background-color: var(--white);
	box-shadow: var(--shadow);
	transform: translateY(-50%);
	transition: .3s;
	font-size: 10px;
	text-align: center;
	line-height: 22px;
}
.switch--label:has(.checkbox--input:checked) .i--switch {
	background-color: var(--primary);
}
.switch--label:has(.checkbox--input:checked) .i--switch:after {
	left: 18px;
	content: "" attr(data-switch) "off";
}




/* radio
========================= */
.radio--label {
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    width: 100%;
    gap: 0 15px;
    color: var(--dark-secondary);
    font-weight: 400;
}
.radio--input {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    border-width: 0;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
}
.radio--label .i--radio {
    position: relative;
    display: inline-block;
    width: 24px; height: 24px;
    background-color: var(--white);
    border: 1px solid #d9d9d9;
    border-radius: 100%;
    transform: none;
    vertical-align: middle;
    line-height: normal;
}
.radio--label .i--radio:after {
    content: '';
    position: absolute; z-index:1;
    top: 50%; left: 50%;
    width: 12px; height:12px;
    background-color: #d9d9d9;
    border-radius: 100%;
    transform: translate(-50%, -50%);
}
.radio--input:checked + .i--radio {
    border-color: var(--primary);
}
.radio--input:checked + .i--radio:after {
    background-color: var(--primary);
}
.radio--label .radio--txt {
	flex: 1;
}

/* disabled */
.radio--label:has(.radio--input:disabled) {
    color: var(--disabled-level);
}
.radio--label:has(.radio--input:disabled) .i--radio {
    background-color: #ccc;
}
.radio--label:has(.radio--input:disabled) .i--radio:after  {
	background-color: var(--white);
}


/* button
========================= */
.btn--default {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    min-width: 50px;
    height: 60px;
    padding: 0 20px;
    box-shadow: var(--shadow);
    background-color: #8d9695;
    color: var(--white);
    font-size: var(--font-s16);
    font-weight: 400;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    border:none;
    cursor:pointer;
    vertical-align: middle;
    transition: all 0.8s ease-in-out;
}
/* 버튼 텍스트 사이즈 조절.   단,높잇값이 60이상인경우 적용 x */
.btn--default:is(.h45, .h40, ) {
	font-size: clamp(var(--font-s12), 4vw, var(--font-s16));
	padding: 0 clamp(15px, 4vw, 20px);
}
.active--shadow {
    box-shadow: var(--shadow-active);
}
/* width */
.btn--wfull {width: 100%; }
/* size */
.btn--xs {
    height: 30px;
    padding-inline: 8px;
    font-size: var(--font-s14);
}
.btn--sm {height: 40px;}
.btn--md {height: 50px;}
.btn--lg {height: 60px;}

/* bg color */
.btn--default.clear {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.btn--default.neutral {
	--current-color : var(--white);
    background-color: var(--white);
    color: var(--gray-secondary);
}
.btn--default.prev {
	--current-color : #ccc;
    background-color: #ccc;
}
.btn--default.save {
	--current-color : var(--green);
    background-color: var(--green);
}

.btn--default.deepgray {
	--current-color : var(--deepgray);
    background-color: var(--deepgray);
}
.btn--default.primary {
	--current-color : var(--primary);
    background-color: var(--primary); 
}
.btn--default.mint2 {
	--current-color : var(--mint-secondary);
    background-color: var(--mint-secondary); 
}

.btn--default.on:not(.animate--fill, .save, .mint2) {
    background-color: var(--primary);
    box-shadow: var(--shadow-active);
    color: var(--white);
}
.btn--default.save.on {
    box-shadow: var(--shadow-green-active);
}
.btn--default.mint2.on {
    box-shadow: var(--shadow-mint2-active);
}

/* btn border */
.btn--default.btn--line {
	background-color: var(--white);
	border-width: 1px;
	border-style: solid;
	border-color: var(--current-color);
	color: var(--current-color, #666);
}
.btn--default.btn--line:is(.on) {
	--current-color : var(--primary);
	background-color: var(--white);
	color: var(--current-color);
}

/* btn + icon */
.btn--default.column {
    flex-direction: column;
}

.animate--fill > span {
    z-index: 1;
}
.animate--fill.on { /* 버튼 활성화  + 애니메이션 효과 액션시 클래스명  */
    box-shadow: var(--shadow-active);
    transition :all 0.8s ease-in-out;
}
.animate--fill:after {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 0;
    height: 100%;
    transition :all 0.8s ease-in-out;
}
.animate--fill.on:after  {
    background-color: var(--primary);
    width: 100%;
}

/* 탭 버튼 */
.btn--tab {
    background-color: var(--white);
    font-size: var(--font-s16);
    font-weight: 400;
    box-shadow: var(--shadow);
    border-radius: 15px;
    height: 54px;
    color: var(--dark-secondary);
    transition: none;
}
.btn--tab.on:not(.animate--fill),
.btn--tab:has(input:checked) {
    background-color: var(--mint-secondary) ;
    box-shadow: var(--shadow-active);
    color: var(--white);
    font-weight: 500;
}
.btn--tab.on:not(.animate--fill) > *,
.btn--tab:has(input:checked) > * {
    color: var(--white) !important;
}
.tab__cont {display: none;}
.tab__cont.on {display: block;}

/* disabled */
.btn--default.disabled, 
.btn--default:has(input:disabled) {
	background-color: var(--disabled);
	color: var(--disabled-level);
	box-shadow: none;
	cursor: not-allowed;
}

/* 버튼 + 아이콘 조합 */
.btn--default.i--arrow {
	padding-right: 32px;
}
/* 토글 탭 영역 */
.btn__tab__group {
	flex-wrap: nowrap;
	background-color: var(--white);
	border-radius: 15px;
	box-shadow: var(--shadow);
	box-sizing: border-box;
}
.btn__tab__group .btn--tab {
	flex: 1;
	box-shadow: none;
	background-color: transparent;
}
/* 슬라이드 효과 있는 탭 영역 */
.tab__slide {
	position: relative;
	overflow: hidden;
}
.tab__slide:after {
	content: '';
	position: absolute;
	top: 0; 
	left: var(--tabSlide-left, 0);
	z-index:1;
	width: var(--tabSlide-width);
	height: 100%;;
	border-radius: 15px;
	transition: .5s ease-in-out;
	box-shadow: var(--shadow-active);
	background-color: var(--mint-secondary);
}
.tab__slide .btn--tab > * {
	z-index: 2;
}
.tab__slide .btn--tab.on {
	background-color: transparent;
	box-shadow: none;
	z-index: 2;
}
.tab__slide .btn--tab.on:not(.animate--fill) > *,
.tab__slide .btn--tab:has(input:checked) > *{
 	transition: .5s ease-in-out;
 }

/* tag
========================= */
.status--tag {
    display: inline-block;
    color: var(--white);
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
    line-height:normal;
    font-weight: 400;
    min-width: 50px;
}
.status--tag.xxs {
    padding: 1px 5px;
    font-size: 11px;
    letter-spacing: -0.05em;
}
.status--tag.xs {
    padding-block: 4px;
    font-size: var(--font-s12);
}
.status--tag.sm {
    min-width: 60px;
    padding-block: 6px;
    font-size: var(--font-s13);
}
.status--tag.md {
    padding-block: 6px;
    padding-inline: 14px;
    font-size: var(--font-s14);
}
.status--tag.lg {
    padding-block: 10px;
    padding-inline: 15px;
    font-size: var(--font-s15);
}

/* tag Color */
.status--tag.neutral{
	--current-color : var(--primary);
    background-color: var(--white);
    color: var(--primary);
}
.status--tag.primary{
	--current-color : var(--primary);
    background-color: var(--primary);
}
.status--tag.mint2 {
	--current-color : var(--mint-secondary);
    background-color:var(--mint-secondary);
}
.status--tag.success {
	--current-color : var(--success);
    background-color: var(--success);
}
.status--tag.warning{
	--current-color : var(--warning);
    background-color: var(--warning);
}
.status--tag.danger {
	--current-color : var(--danger);
    background-color: var(--danger);
}
.status--tag.lightGreen {
	background-color: #e0f3f2;
	color: #23a4a0;
}
.status--tag.lightBlue {
	background-color: #eaf2fe;
	color: #316fd4;
}
.status--tag.lightRed {
	background-color: #f8e9ed;
	color: #ed1651;
}

/* btn border */
.status--tag.status--line {
	background-color: var(--white);
	border-width: 1px;
	border-style: solid;
	border-color: var(--current-color);
	color: var(--current-color, #666);
}
.status--tag.status--line:is(.on) {
	--current-color : var(--primary);
	background-color: var(--white);
	color: var(--current-color);
}

/* 타이틀
========================= */
.section__heading3 {
	margin-bottom: 20px;
    font-size: var(--font-s22);
    color: var(--black);
    font-weight: 400;
    line-height: 1.4;
}
.section__heading3 > strong {
	font-weight: 500;
}

.section__heading4 {
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 500;
	color: var(--black); 
}
.heading4__summary {
    font-size: var(--font-s15);
    color: var(--dark-secondary);
    font-weight: 400;
 	line-height: 1.2;
 	word-break: keep-all;
}

/* 밑줄있는 텍스트*/
.underline--link  {
	position: relative;
	border: none;
	box-shadow: none;
	background-color: transparent;
	box-sizing: border-box;
	font-size: 12px;
	text-align: right;
	padding: 0;
	color: var(--primary);
	cursor: pointer;
}
.underline--link:after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0; 
	width: 100%;
	height: 1px;
	background-color: var(--primary);
}
/* ex) 직접입력 ▼ (이메일 폼영역) */
.underline--link.i--arrow--select {
	padding-right: 10px;
}
.txt--guide {
    font-size: var(--font-s12);
    color: var(--gray-secondary);
}
.clickLink {
	display: block; 
	width: 100%; 
	text-decoration: none; 
	cursor: pointer; 
	font-size: inherit; 
	font-weight: inherit; 
	text-align: left;
	color: inherit;
}
.clickLink:hover {color: var(--primary) !important;}

/* 섹션 헤더(로고) - 높잇값은 인라인스타일로 적용  */
.section__heading__logo {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}
/* 섹션 헤더(아이콘) */
.section__heading__icon {
	text-align: center;
}
.section__heading__icon.i--top {
	padding-top: calc(var(--i-sign-size, 50px) + 20px);
	background-size: var(--i-sign-size, 50px);
	background-position: top center;
	background-repeat: no-repeat; 
}
.section__heading__icon.i--success {
	background-image: url('/static/resources/moriaHoneQ/img/pop_point.png');
}

.section__heading__icon.i--caution {
	background-image: url('/static/resources/moriaHoneQ/img/pop_warning.png');
}

/* 마스코트 */
.section__heading__icon.i--mascot-hug-heart {
	background-image: url("/static/resources/mo/img/hana_mascot_flat__hugHeart.png");                       
	background-size: auto 130px;
	background-repeat: no-repeat;
 	background-position: top center;
	padding-top: 150px;   
}
/*  =========================
    bullet (크기조절 : font-size)
========================= */
.list__style {
    display: flex;
    flex-direction: column;
    gap: 5px 0;
}
.list__style li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    line-height: 1.4;
    font-size: inherit;
}
.list__style > li:before {
    flex-shrink: 0;
    font-size: inherit;
    color: var(--gray-secondary);
}
.list__style__center li {
    align-items: center
}
.list__style2 li {
    position: relative;
    padding-left: 0.6em;
    line-height: 1.4;
    font-size: inherit;
    color: inherit;
}
.list__style2 li:before {
    content: '';
    position: absolute;
    left: 0;
    box-sizing: border-box;
}
.list__style2__center li:before {
    top: 50% !important;
    transform: translate(-50%);
}
.list__style3 > li {
	position: relative;
	padding-left: 0.8em;
}
.list__style3 > li:before {
	position: absolute; 
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

/*  bullet count
==================================== */
/* 숫자 : 1. */
.list--bullet--decimal {
    counter-reset: decimal;
}
.list--bullet--decimal>li::before {
    content: counter(decimal) '.';
    counter-increment: decimal 1;
}
/* 숫자 : 1) */
.list--bullet--decimal2 {
    counter-reset: decimal;
}
.list--bullet--decimal2 > li::before {
    content: counter(decimal)')';
    counter-increment: decimal 1;
    color: var(--gray-secondary);
}
/* 숫자 : (1) */
.list--bullet--decimal3 {
    counter-reset: decimal;
}
.list--bullet--decimal3 > li::before {
    content: '('counter(decimal)')';
    counter-increment: decimal 1;
    color: var(--gray-secondary);
}
/* 숫자 : ① */
.list--bullet--decimal4 {
    counter-reset: decimal;
}
.list--bullet--decimal4 > li::before {
    margin-top:0.4em;
    content: counter(decimal);
    counter-increment: decimal 1;
    height: 1.4em;
    aspect-ratio: 1;
    font-size: 0.7em;
    border-radius: 100%;
    border: 1px solid var(--gray-secondary);
    box-sizing: border-box;
    text-align: center;
    font-weight: normal;
    line-height: 1.2em;
    color: var(--gray-secondary);
}
/* 가 */
.list--bullet--hangul > li {
    list-style: hangul;
    display: list-item;
    list-style-position: inside;
    color: var(--black);
}
/*  
    bullet Icon (특수문자) //list__style 로 사용하는 뷸렛
========================= */
/* * */
.list--bullet--asterisk > li:before {
    content: '*';    
}
/* ※ */
.list--bullet--reference > li:before {
    content: '※';
}
/* - */
.list--bullet--dash > li:before {
    content: '-';
}
/* · */
.list--bullet--dot > li:before {
    content: '·';
}

/*  
    bullet Icon (특수문자 X) //list__style2 로 사용하는 뷸렛
========================= */
/*  ● */
.list--bullet--circle > li:before {
    width: 0.2em; 
    aspect-ratio: 1;
    border-radius: 100%;
    top: calc((1lh - 0.4em) /2 );
    background-color: var(--gray-secondary);
}
/* ○ */
.list--bullet--circle--line > li:before {
    width: 0.2em; 
    aspect-ratio: 1;
    border-radius: 100%;
    top: calc((1lh - 0.4em) /2 );
    border-width: 1px;
    border-style: solid;
    border-color: var(--gray-secondary);
}
/* ■ */
.list--bullet--square> li:before {
    width: 0.2em; 
    aspect-ratio: 1;
    top: calc((1lh - 0.4em) /2 );
    background-color: var(--gray-secondary);
}
/* □ */
.list--bullet--square--line > li:before {
    width: 0.2em; 
    aspect-ratio: 1;
    top: calc((1lh - 0.4em) /2 );
    border-width: 1px;
    border-style: solid;
    border-color: var(--gray-secondary);
}

/* ! */
.list__style2.list--bullet--caution > li {
	padding-left: 1.4em;
}
.list--bullet--caution > li:before {
    width: 1em; 
    aspect-ratio: 1;
    top: calc((1lh - 1em) /2 );
    background-color: var(--error);
    mask-image: url('/static/resources/moriaHoneQ/img/img_warning.png');
    -webkit-mask-image: url('/static/resources/moriaHoneQ/img/img_warning.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: left center;
    -webkit-mask-position: left center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* bullet color */
.bulletColor li:before {
	color: var(--bullet-color);
	border-color: var(--bullet-color);
}
.bulletAllColor,
.bulletAllColor li:before {
	color: var(--bullet-color);
	border-color: var(--bullet-color);
}
.bulletBgColor li:before {
	background-color: var(--bullet-color);
}


/* ==========================================================================================
 	3. moleculse css
========================================================================================== */
.section__inner {
	padding-inline: 20px;
	padding-block: 40px 20px;
	box-sizing: border-box;
}

/*  group
========================= */
.btn__group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
}

/* 갯수 고정  */
.btn__group.btn__half .btn--default,
.btn__group.w2n .btn--default {
    width: calc((100% - 10px) /2);
}
.btn__group.w3n .btn--default {
    width: calc((100% - 20px) /3);
}
.btn__group.btn__half .btn--wfull {
    width: 100%;
}
/* 유동적 갯수  */
.btn__group.wn .btn--default,
.btn__group.btn__flex1 .btn--default {
	flex: 1;
}

/* 너비가 다른 버튼 */
.btn__group.btn__columns .btn--default {
    width: 120px;
}
.btn__group.btn__columns .btn--wfull {
    width: calc(100% - 130px);
}

/* 버튼 하단 고정 */
.btn__bottom__group {
    width: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 1%,
    rgba(255, 255, 255) 40%, #ffffff);
    padding: 20px;
    box-sizing: border-box;
}
.btn__bottom__group.fixed {
    position: fixed; z-index: 10;
    left: 0; bottom: 0;
    width:100%;
}
.btn__bottom__group .btn--default {
    border-radius: 30px;
}

/* round box //.round__box 또는 해당 영역 부모에 폰트 사이즈 별도로 주기 
========================= */
.round__box {
    position: relative;
    box-shadow: var(--shadow);
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
}
.round__box.current {
    border: 2px solid var(--mint-secondary);
    box-shadow: none;
}
.round__box.current1 {
    border: 1px solid var(--mint-secondary);
    box-shadow: none;
}
.round__box.border--light {
    box-shadow: none;
    border: 1px solid var(--border4);
}
.round__box.current:focus-visible:before,
.round__box.current:focus-within:before {
    border: none;
}
/* highlight */
.round__box.bg--highlight {
    border: none;
}
.round__box.bg--highlight .round__box__roof, 
.bg--highlight.round__box__roof {
    background-color: var(--mint-secondary);
    color: var(--white);
}
.round__box.bg--highlight .round__box__ground,
.bg--highlight.round__box__ground {
    background-color: var(--mint-secondary);
    color: var(--white);
    border-color: var(--white);
}
.round__box.bg--highlight .i--active,
.round__box.bg--highlight .i--active--after:after {
   background-color: var(--white);
}
.bg--highlight .underline--link:after {
	background-color: var(--white);
}

/* focus */
.round__box:focus-visible,
.round__box:focus-within {
    outline: 2px solid var(--mint-secondary);
}
.round__box__roof {
    position: relative;
    padding: 20px 20px;
    box-sizing: border-box;
    background-color: var(--white);
    font-size: var(--font-s16);
    color: var(--dark-secondary);
}
.round__box__ground {
    border-top: 1px solid var(--border);
    background-color: #f9f9fb;
    padding: 20px 20px;
}

/* checked - 기본값은 포커스일때만 보더값을 주지만, 체크드되었을때 하이라이터 원하는 경우에만 적용*/
.current__item__wrap .round__box:has(.radio--input:checked, .checkbox--input:checked),
.current__item__wrap .checkbox--label--text:has(.radio--input:checked, .checkbox--input:checked) {
    outline: 2px solid var(--mint-secondary);
} 

/* disabled */
.round__box:has(.checkbox--input:disabled, .radio--input:disabled) {
	border: none;
	box-shadow: none;
}
.round__box:has(.checkbox--input:disabled, .radio--input:disabled):focus-visible,
.round__box:has(.checkbox--input:disabled, .radio--input:disabled):focus-within {
	outline: none;
}
.round__box__roof:has(.checkbox--input:disabled, .radio--input:disabled) {
	background-color: #e5e5e5;
	color: var(--gray-secondary);
}
.round__box:has(.checkbox--input:disabled, .radio--input:disabled) .round__box__ground {
	background-color: #e5e5e5 !important;
	border-color: #ccc;
}
.round__box:has(.checkbox--input:disabled, .radio--input:disabled) .round__box__roof *:not(.status--tag ),
.round__box:has(.checkbox--input:disabled, .radio--input:disabled) .round__box__ground *:not(.status--tag) {
	color: #666;
}

/* 백그라운드가 하이라이트일때 내부 정보 리스트 컬러 변경  */
:is(.bg--highlight .dl--list) .tit,
:is(.bg--highlight .dl--list) .txt {
	color: var(--white);
}
/* dl list : info 정보 */
.dl--list {
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap:wrap;
}
.dl--list.space--between {
    justify-content: space-between;
    flex-wrap: nowrap;
}
.dl--list .tit {
    color: var(--gray-secondary);
    font-size: inherit;
    font-weight: 400;
    min-width: 80px;
}
.dl--list .txt {
    color: var(--dark-secondary);
    font-size: inherit;
    font-weight: 500;
}

.section__thumbs {
    box-sizing:border-box;
    aspect-ratio: 16/9;
    padding-bottom: 20px; /* section__root margin 음수값 만큼 */
}
.section__thumbs img {
    display: block;
    max-width: 100%;
    width: 100%;
}
.section__roof {
    border-radius: 20px 20px 0 0;
    box-sizing: border-box;
    background-color: #f9f9f9;
    margin-top: -20px;
    padding: 20px 20px 130px;
}

/* inpit write box
========================= */
.input__write__box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    padding: 15px 20px 15px;
    box-sizing: border-box;
    background-color: var(--white);
    box-shadow: var(--shadow);
    border-radius: 15px;
}
.input__write__box .input--label {
    font-size: var(--font-s12);
    color: var(--gray-secondary);
}
.input__write__box .input--text {
    display: block;
    width: 100%;
    height: auto;
    flex:1;
    font-size: var(--font-s18);
    color: var(--dark-primary);
    min-height: 30px;
    font-weight: 400;
    padding: 0;
    box-sizing: border-box;
}
.input__write__box .input--textSpan {
    display: block;
    font-size: var(--font-s18);
    color: var(--dark-primary);
}

/* err */
.input__write__box.err .err_msg {
	display: block;
}
.input__write__box.err .input--label {
	display: none;
}
.input__write__box .err_msg {
	display: none;
	font-size: var(--font-s12);
	color: var(--error);
}
/* focus */
.input__write__box:focus-visible,
.input__write__box:focus-within,
.search__box--input:focus-visible,
.search__box--input:focus-within {
    outline: 2px solid var(--mint-secondary);
}

/* 포커스시 아웃라인 제거 - input__write__box 가 묶음으로 되어 있는 경우 사용 */
.focus__not .input__write__box:focus-visible,
.focus__not .input__write__box:focus-within {
	outline: none;
}
.focus__not .input__write__box.err {
	outline: none;
}
.focus__not:has(.input__write__box.err) {
	outline: 2px solid var(--error);
}

/* disabled */
.input__write__box.disabled,
.input__write__box:not(.disabled--plain):has(.input--text:disabled) {
    background-color: var(--disabled);
    box-shadow: none;
}
.input__write__box.disabled .input--text {
    color: var(--disabled-level);
    cursor: not-allowed;
}


/* input + button */
.input__write__box.i--calendar:after {
    right: 20px; bottom: 15px;
    mask-position: right center;
    -webkit-mask-position: right center;
}

/* 셀렉트 */
.input__write__box.select:after {
    content: '';
    position: absolute;
    bottom: 24px; right: 20px;
    width: 12px; height: 7px;
    background-color: var(--primary);
    mask-image: url('/static/resources/onedayHoneQ/img/btn_arrowDn_g.png');
    -webkit-mask-image: url('/static/resources/onedayHoneQ/img/btn_arrowDn_g.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: right center;
    -webkit-mask-position: right center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.input__write__box .input--gender { /* 뒷자리 성별 1자리수 */
	width: 15px;
	flex: none;
	text-align: center;
	margin-right: -10px;
}
.input__write__box.disabled.select:after,
.input__write__box.select:has(.input--text:disabled):after {
	background-color: var(--disabled-level);
}

/* input password 일경우 , ●(동그라미) 디바이스 통일화  
=================================================== */
.input__write__box.birth--field .utill__group,
.input__write__box.card--field .utill__group {
	container-type: inline-size;
	flex: 1;
	flex-wrap: nowrap;
}
.input__write__box .input--text[type="password"] {
	font-family: var(--pass) !important;
    letter-spacing: -0.08em;
    font-size: clamp(20px, 11.437cqw ,35px);
}

/* 컨테이너 쿼리 */
@container (min-width: 370px) {
	.input__write__box.card--field input[type="password"] {
		font-size: 35px;
	}
}
@container (min-width: 330px) and (max-width: 369px) {
	.input__write__box.card--field input[type="password"] {
		font-size: 30px;
	}
}
@container (min-width: 280px) and (max-width: 329px) {
	.input__write__box.card--field input[type="password"] {
		font-size: 25px;
	}
}
@container (max-width: 279px) {
	.input__write__box.card--field input[type="password"] {
		font-size: 20px;
	}
	.input__write__box.birth--field input[type="password"] {
		font-size: 25px;
	}
}

/* 달력 */
.input__write__box.date:after {
    content: '';
    position: absolute;
    bottom: 20px; right: 20px;
    width: 18px; height: 18px;
    background-color: var(--primary);
    mask-image: url('/static/resources/moria/img/common/icon_date_active.png');
    -webkit-mask-image: url('/static/resources/moria/img/common/icon_date_active.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: right center;
    -webkit-mask-position: right center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.input__write__box.disabled.date:after,
.input__write__box.date:has(.input--text:disabled):after {
	background-color: var(--disabled-level);
}

/* 검색 인풋  */
.input__search__box {
    position: relative;
    width: 100%; height: 60px;
}
.input__search__box.current .search__box--input {
    outline: 2px solid var(--mint-secondary);
}
input.search__box--input {
    display: block;
    width: 100%; height: 100%;
    padding-inline: 20px 40px;
    box-sizing: border-box;
    box-shadow: var(--shadow);
    border: 2px solid transparent;
    background-color: var(--white);
    border-radius: 15px;
    line-height: 60px;
    color: var(--dark-primary);
    font-size: var(--font-s18);
    font-weight: 400;
    overflow: hidden;
}
.input__search__box .btn--search {
    position: absolute;
    top: 15px; right: 20px;
    background-position: right center;   
}

/* focus */
.input__write__box.err,
.input__write__box.err:focus-visible,
.input__write__box.err:focus-within{
    outline: 2px solid var(--error);
}

/*  
    Item List
========================= */
.item__list {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px 0;
}
.item__list.row {
	flex-direction: row;
}
.item__list.wn > * {
	flex: 1;
}
.item__list.space--between{
    justify-content: space-between;
}

/* 구분선으로 구분하는 리스트 영역 */
.divided__list {
    box-shadow: var(--shadow);
    border-radius: 15px;
    overflow: hidden;
}
.divided__list > li{
    border-bottom: 1px solid var(--border);
}
.divided__list > li:last-child {
    border-bottom: 0;
}

.divided__list.border--light{
    box-shadow: none;
    border: 1px solid var(--border4);
}

/* 컨텐츠 구분선 */
.dividing--border {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.dividing--border--top {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 20px;
}
/* 간격조절 */
.dividing--border.border--gap10 {
	padding-bottom: 10px;
    margin-bottom: 10px;
}
.dividing--border--top.border--gap10 {
	padding-top: 10px;
    margin-top: 10px;
}
.dividing--border--top.border--gap30 {
	padding-top: 30px;
    margin-top: 30px;
}


/* 유틸 그룹  */
.utill__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.utill__group.space--between {
    justify-content: space-between;
}
.utill__group:has(.i--thumbs) .utill--tit  {
    width: calc(100% - 30px);
}
.utill--tit {
	flex: 1;
}
.utill__group .flex--end {
    justify-items: flex-end;
}
.margin--end {
    margin-left: auto;
}


/* button + input tcheckbox & radio 결합 */
.btn--default.on > .i--check {
	background-color: var(--white);
}



/* ==========================================================================================
 	4. organisms css
========================================================================================== */
/* 우편 */
.input__write__box.round__box__roof,
.input__write__box.round__box__ground {
    padding: 15px 18px 15px;
    border-radius: 0;
    box-shadow: none;
}

/*약관 동의 */
.agree__chk__box {}
.agree__chk__body {
	display: flex;
	flex-direction: colurmn;
	gap:  15px 0;
}
.agree__item {
	display: flex;
	flex: 1;
	gap: 0 10px;
	justify-content: space-between;
}

.agree__item .btn--more {
	padding-right: 0.8em;
	background-repeat: no-repeat;
	background-size: 0.4em auto;
	background-image: url("/static/resources/moriaHoneQ/img/btn_arrowR.png");
	background-position: right center;
	font-size: var(--font-s16);
	color: var(--black);
	font-weight: 400;
	text-align: left;
}
.agree__item.agree__ad {
	border-bottom: 1px solid #dddee4;
	padding-bottom: 20px;
	font-size: var(--font-s14);
	color: var(--gray-secondary);
}


/* table  // .table__wrap 에 폰트 사이즈 별도로 주기
========================= */
.table__wrap {
    position: relative;
}
.table__wrap table {
	table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit;
}
.table__wrap thead tr > th {
    font-size: inherit;
    color: var(--dark-secondary);
    text-align: center;
    padding: 10px 5px;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    background-color: #f9f9fb;
    vertical-align: middle;    
    border-top: 1px solid #b3b3b3;
}
.table__wrap thead tr > th + th {
    border-left: 1px solid var(--border);
}
.table__wrap tbody tr > th {
    font-size: inherit;
    color: var(--dark-secondary);
    font-weight: 400;
    padding: 10px 5px;
    background-color: #e0f7f5;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}
.table__wrap tbody tr > td {
    font-size: inherit;
    color: inherit;
    font-weight: 400;
    padding: 10px 5px;
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    vertical-align: middle;
}
.table__wrap tbody tr > td + td {
    border-left: 1px solid var(--border);
}
.table__wrap tbody tr > td:first-child[rowspan] {
    border-right: 1px solid var(--border);
}
.table__wrap.border--none thead th {
	border-top: none;
}
.table__wrap.border--top thead th {
    border-top: 1px solid var(--primary);
}

.table__wrap.border--top2 thead th {
    border-top: 2px solid var(--primary);
}

.table--bg > th {
    background-color: #e0f7f5 !important;
}

/* 강조(보더 라인) */
.table__wrap .table--highlight  {
    border:4px solid var(--success);
}
/* 테이블 내부 인풋 */
.table__wrap .input--clear {
	display: inline-block;
    width: 100%; height: 100%;
    font-size: inherit;
    border: none;
    text-align: right;
}
.table__wrap .input--clear[type="text"]::placeholder {
    color: var(--gray-secondary);
    font-weight: 300;
    font-size:12px;
}


/*  =========================
    popup
========================= */
.layer__popup {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-popup);
}
.layer__popup.on {
    display: block;
}
.layer__popup__container {
    position: absolute; z-index: 101;
    top:0; left: 0;
    display: flex;
    flex-direction: column;
    width: 100%; height: 100%;
    background-color: #f9f9fb;
}
.layer__popup__dim {z-index: var(--z-dim);}

/* popup header */
.layer__popup__header {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 45px;
    background-color: #f9f9fb;
}
.layer__popup__header--title {
    font-size: var(--font-s16);
    text-align: center;
    color: var(--dark-primary);
    font-weight: 400;
}
.layer__popup--close--icon {
    position: absolute;
    right: 20px;
    width: 30px; height: 30px;
    background-color: transparent;
}
.layer__popup--close--icon:after {
    content: '';
    position: absolute;
    top: 14px; right: 0;
    width: 22px; height: 2px;
    border-radius: 5px;
    background-color: var(--black);
    transform: rotate(-45deg);
}
.layer__popup--close--icon:before {
    content: '';
    position: absolute;
    top: 14px; right: 0;
    width: 22px; height: 2px;
    border-radius: 5px;
    background-color: var(--black);
    transform: rotate(45deg);

}
/* popup body */
.layer__popup__body {
    padding-block: 40px 40px;
    padding-inline: 20px;
    height: 100%;
    overflow-y: auto;
}

/* 버튼 fixed 일때 컨텐츠 높이 조절 */
.layer__popup__body:has(.btn__bottom__group) {
    padding-bottom: 120px;
}
/* 백그라운드 그라데이션 문제로 fixed로 변경하고 패딩 값 조절 */
.layer__popup__body:has(+ .layer__popup__footer.fixed) {
    padding-bottom: 120px;
}
.layer__popup__body:has(+ .layer__popup__footer.fixed .btn--default:nth-of-type(3n) ) {
    padding-bottom: 180px;
}

/*  =========================
     toast popup
========================= */
.toast__popup--open,
.toast__popup__select--open {
    cursor: pointer;
}
.toast__popup, .toast__popup__select {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100dvh;
    visibility: hidden;
    z-index: var(--z-popup);
}

.toast__popup.on,
.toast__popup__select.on {
	 visibility: visible;
}
.toast__popup.on .toast__popup__container,
.toast__popup__select.on .toast__popup__container {
    pointer-events: auto;
    transform: translateY(0);
}
.toast__popup__container {
    position: absolute; z-index: 101;
    bottom:0; left: 0;
    display: flex;
    flex-direction: column;
    width: 100%; height: auto;
    max-height: 80%;
    background-color: #f9f9fb;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow-y: auto;
	transform: translateY(100%);
    transition: .3s;
}

/* 셀렉트 박스 있는 토스트 팝업만 높잇값 별도 조절 */
.toast__popup__container:has(.select__list__map) {
    max-height: 50%;
}

/* head */
.toast__popup__header {
    position: sticky; z-index: 1;
    top: 0; left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(249, 249, 251, 0.0) 1%, rgba(249, 249, 251) 30%, #f9f9fb)
}
.toast__popup--close--icon {
    position: absolute;
    top: 20px; left: 50%; z-index: 1;
    min-width: 70px; height: 4px;
    transform: translateX(-50%);
    background-color: #dbdbdb;
    border-radius: 5px;
}
.toast__popup--title {
    padding-top: 40px;
    text-align: center;
}
.toast__popup--title.section__heading__icon {
	padding-top: 104px;
}
.toast__popup--title.i--top {
	background-position: top 40px center;
}
/* body */
.toast__popup__body {
    padding: 10px 20px 30px;
}

.toast__popup__dim {
    position: absolute; z-index: var(--z-dim);
    top:0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
}
.toast__popup__footer {
    position: sticky; z-index: 1;
    bottom: 0; left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 토스트 팝업에 노출되는 셀렉트 버튼 디자인 */
.select__list__map {
    display: flex;
    gap: 10px 0;
    flex-wrap: wrap;
}
.select__list__map > li {
    flex-basis: 100%;
}
.option--btn {
    display: block;
    width: 100%;
    padding-block: 18px;
    text-align: center;
    font-size: var(--font-s16);
    color: var(--gray-secondary);
    border-radius: 15px;
    background-color: var(--white);
    box-shadow: 0px 5px 10px 0px rgb(0 0 0/ 10%);
    border-color: transparent;
}

/* focus */
.option--btn.on,
.option--btn:focus-visible,
.option--btn:focus-within {
    background-color: var(--mint-secondary);
    color: var(--white);
    box-shadow: 0px 5px 15px 0px rgba(32 183 164/ 40%);
}



/*  =========================
    confirm
========================= */
.confirm__popup {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-popup);
}
.confirm__popup.on {
    display: block;
}
/* 알럿창 버튼 스타일 */
.confirm__popup .btn--default {
    height: 50px;
}
.confirm__popup .btn__group.columns .btn--default {
    width: 82px;
}
.confirm__popup .btn__group.columns .btn--default.full{
    width: calc(100% - 92px);
}

.confirm__popup__container {
    position: absolute; z-index: 101;
    top:50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 480px;
    border-radius: 20px;
    background-color: #f9f9fb;
    overflow: hidden;
}
.confirm__popup__dim {
    position: absolute; z-index: var(--z-dim);
    top:0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

/* confirm header */
.confirm__popup__header {
    position: relative;
    padding-block: 20px 0;
    padding-inline: 20px;
}
.confirm__popup__header--title {
    font-size: var(--font-s16);
    text-align: center;
    color: var(--dark-primary);
    font-weight: 400;
}
.confirm__popup--close--icon {
    position: absolute;
    top: 15px; right: 20px;
    width: 30px; height: 30px;
    background-color: transparent;
}
.confirm__popup--close--icon:after {
    content: '';
    position: absolute;
    top: 14px; right: 0;
    width: 22px; height: 2px;
    border-radius: 5px;
    background-color: var(--black);
    transform: rotate(-45deg);
}
.confirm__popup--close--icon:before {
    content: '';
    position: absolute;
    top: 14px; right: 0;
    width: 22px; height: 2px;
    border-radius: 5px;
    background-color: var(--black);
    transform: rotate(45deg);

}
/* confirm body */
.confirm__popup__body {
    padding: 30px 20px;
    text-align: center;
    font-size: var(--font-s16);
    color: var(--dark-secondary);
    font-weight: 400;
}
.confirm--icon {
    background-size: 50px;
    padding-top:70px;
    background-repeat: no-repeat;
    background-position: top center;
}


.confirm__popup__body + .confirm__popup__footer {
    padding-top: 0;
}
.confirm__popup__footer.btn__bottom__group {
    background: transparent;
    box-sizing: border-box;
}

/* procsss 
========================= */
.dl--list + .procsss--box {
    margin-top: 5px;
}
.procsss--box + .dl--list {
    margin-top: 3px;
}

/* accordion 
========================= */
.accordion__group__head {
    position: relative;
    cursor: pointer;
    padding-inline: 20px 40px;
}
.accordion__group__head.i--arrow:after {
    transform: translateY(-50%) rotate(0deg);
    background-color: #999;
}
.accordion__group__head.on.i--arrow:after {
    transform: translateY(-50%) rotate(-180deg);
    background-color: var(--primary);
}
.accordion__group__cont {
    max-height: 0;
    overflow: hidden;
    transition: max-Height 0.6s ease;
}





/* ==========================================================================================
 	page style
========================================================================================== */

/* 산출기 form 영역 공통을 위한 상위 클래스명 추가 ex) 폰트 사이즈 및 컬러 등... 
============================================================ */
.moria__form__size {}
.moria__form__size .input--text {
	font-size: 	var(--font-s20);
}
.moria__form__size .input--text::placeholder {
    font-size: var(--font-s20);
}





/* ==========================================================================================
 5. res (미디어쿼리) //하단에 배치
========================================================================================== */
@media (max-width: 375px){
	.btn__group.w3n .btn--default {
    	font-size: 14px;
    	padding-inline: 5px;
    }

}