@charset "utf-8";
@import url('/apti/css/apti_reset.css');

/*
	아파트아이 앱 3.0 common.css 내용에 pc홈페이지용 common 스타일 추가한 파일
	아파트아이 앱쪽 css 내용은 이미지 경로 등이 맞지 않음. 해당 스타일을 사용할 때 여기서 경로 수정도 같이 필요.
*/

/* ====================== pc홈페이지용 common 스타일 ======================  */
.segmented_control .segmented_container .segment.on .text {
  font-weight: var(--font-weight-semibold);
  color: var(--gray50);
}
.segmented_control .segmented_container .segment.on::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: var(--black600);
    border-radius: 99px;
}
.dropdown_wrap .dropdown_select .list_item {
	cursor: pointer;
}
.dropdown_wrap .dropdown_select .list_item:hover .txt {
  font-weight: vaR(--font-weight-medium);
  background-color: var(--gray200);
}

#container{margin-top:80px; word-break: keep-all;}
.titleBox						{display: flex; align-items: center; justify-content: center; height:110px; background: #F7F8FA; }
.titleBox h2					{position: relative; padding: 15px 0 0; font-size: 24px; line-height: 1; color:#222; text-align:center;}
.titleBox h2:before				{display: block; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 40px; height: 3px; background-color: #3C70FF; content: '';}

/* 스타일 초기화(기존 스타일 덮어쓰기) */
input, input[type=text], input[type=password] {
	height: auto;
	padding: 0;
	border: none;
}

@media all and	(max-width:1100px){
	.titleBox h2					{font-size: 20px;}
}

@media all and (max-width:899px){
	#container{margin-top:65px;}
	.titleBox						{display: flex; align-items: center; justify-content: center; height:70px; background: #F7F8FA; }
	.titleBox h2					{font-size: 18px;}
}
/* ====================== //pc홈페이지용 common 스타일 ======================  */

:root {
  /* Color */
  --blue50: #f4f7f9;
  --blue100: #f1f5ff;
  --blue200: #e3ebff;
  --blue300: #b6caff;
  --blue400: #81a4ff;
  --blue500: #5885ff;
  --blue600: #4778ff;
  --blue700: #3c70ff;
  --blue800: #2761ff;
  --black50: #9fa8b5;
  --black100: #8f99a9;
  --black200: #7a8290;
  --black300: #626978;
  --black400: #535966;
  --black500: #464d5a;
  --black600: #363c43;
  --black700: #2a2a2a;
  --black800: #1c1c1f;
  --gray50: #ffffff;
  --gray100: #f5f7f9;
  --gray200: #f4f5f8;
  --gray300: #f1f2f3;
  --gray400: #e8eaed;
  --gray500: #e1e4eb;
  --gray600: #cdd1d8;
  --gray700: #c2c6cf;
  --gray800: #b5bac5;
  --gray900: #aab0bc;
  --red50: #fff1f1;
  --red100: #fac8c8;
  --red200: #ff7777;
  --red300: #ff4851;
  --red400: #ff3333;
  --red500: #ee1f1f;
  --navy900: #282f5a;
  --gradation01: linear-gradient(90deg, #75e6ff 0%, #6dcaff 50%, #5c8aff 100%);
  --gradation02: linear-gradient(90deg, #7492ff 0%, #ca98df 71%, #ff7aa5 100%);
  --gradation03: linear-gradient(90deg, #5885ff -8.28%, #a0a8ff 18.14%, #d393d7 49.36%, #ff82b5 79.98%, #ff4f4f 107%);
  --dimmed: rgba(0, 0, 0, 0.6);
  --pressed-normal: rgba(122, 130, 144, 0.1);
  --pressed-color: rgba(122, 130, 144, 0.2);
  --pressed-blue: rgba(129, 164, 255, 0.1);
  --pressed-red: rgba(255, 72, 81, 0.1);
  --pressed-img: rgba(28, 28, 31, 0.05);

  /* Shadow */
  --shadow100: 0px 4px 8px 0px rgba(100, 107, 119, 0.12);
  --shadow200: 0px 4px 12px 4px rgba(100, 107, 119, 0.06);
  --shadow300: 0px 8px 20px 0px rgba(100, 107, 119, 0.1);
  --shadow300-gnb: 0px -8px 20px 0px rgba(100, 107, 119, 0.1);

  /* Font Style */
  --font-size-title-xxl: 2.8rem;
  --font-size-title-xl: 2.6rem;
  --font-size-title-lg: 2.4rem;
  --font-size-title-md: 2.2rem;
  --font-size-title-sm: 2rem;
  --font-size-title-xs: 1.9rem;
  --font-size-text-xxl: 1.8rem;
  --font-size-text-xl: 1.7rem;
  --font-size-text-lg: 1.6rem;
  --font-size-text-md: 1.5rem;
  --font-size-text-sm: 1.4rem;
  --font-size-text-xs: 1.3rem;
  --font-size-caption-md: 1.2rem;
  --font-size-caption-sm: 1.1rem;
  --font-size-caption-xs: 0.9rem;
  --font-size-caption-xxs: 0.8rem;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Spacing */
  --unit-2: 2px;
  --unit-4: 4px;
  --unit-6: 6px;
  --unit-8: 8px;
  --unit-10: 10px;
  --unit-12: 12px;
  --unit-16: 16px;
  --unit-20: 20px;
  --unit-24: 24px;
  --unit-28: 28px;
  --unit-32: 32px;
  --unit-40: 40px;
  --unit-48: 48px;

  /* Divider */
  --divider-normal: 1px solid var(--gray300);
  --divider-thick: 6px solid var(--gray200);

  /* Layout */
  --nav-h: 80px;
  --cta-main-h: 86px;
  --cta-main-text-h: 132px;
}

/* Typography */
.title_xxl_700 {
  line-height: 1.35;
  font-size: var(--font-size-title-xxl);
  font-weight: var(--font-weight-bold);
}
.title_xxl_600 {
  line-height: 1.35;
  font-size: var(--font-size-title-xxl);
  font-weight: var(--font-weight-semibold);
}
.title_xxl_500 {
  line-height: 1.35;
  font-size: var(--font-size-title-xxl);
  font-weight: var(--font-weight-medium);
}
.title_xxl_400 {
  line-height: 1.35;
  font-size: var(--font-size-title-xxl);
  font-weight: var(--font-weight-regular);
}
.title_xl_700 {
  line-height: 1.35;
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-bold);
}
.title_xl_600 {
  line-height: 1.35;
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-semibold);
}
.title_xl_500 {
  line-height: 1.35;
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-medium);
}
.title_xl_400 {
  line-height: 1.35;
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-regular);
}
.title_lg_700 {
  line-height: 1.35;
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-bold);
}
.title_lg_600 {
  line-height: 1.35;
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-semibold);
}
.title_lg_500 {
  line-height: 1.35;
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-medium);
}
.title_lg_400 {
  line-height: 1.35;
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-regular);
}
.title_md_700 {
  line-height: 1.4;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
}
.title_md_600 {
  line-height: 1.4;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-semibold);
}
.title_md_500 {
  line-height: 1.4;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-medium);
}
.title_md_400 {
  line-height: 1.4;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-regular);
}
.title_sm_700 {
  line-height: 1.4;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-bold);
}
.title_sm_600 {
  line-height: 1.4;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-semibold);
}
.title_sm_500 {
  line-height: 1.4;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-medium);
}
.title_sm_400 {
  line-height: 1.4;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-regular);
}
.title_xs_700 {
  line-height: 1.4;
  font-size: var(--font-size-title-xs);
  font-weight: var(--font-weight-bold);
}
.title_xs_600 {
  line-height: 1.4;
  font-size: var(--font-size-title-xs);
  font-weight: var(--font-weight-semibold);
}
.title_xs_500 {
  line-height: 1.4;
  font-size: var(--font-size-title-xs);
  font-weight: var(--font-weight-medium);
}
.title_xs_400 {
  line-height: 1.4;
  font-size: var(--font-size-title-xs);
  font-weight: var(--font-weight-regular);
}
.text_xxl_700 {
  line-height: 1.45;
  font-size: var(--font-size-text-xxl);
  font-weight: var(--font-weight-bold);
}
.text_xxl_600 {
  line-height: 1.45;
  font-size: var(--font-size-text-xxl);
  font-weight: var(--font-weight-semibold);
}
.text_xxl_500 {
  line-height: 1.45;
  font-size: var(--font-size-text-xxl);
  font-weight: var(--font-weight-medium);
}
.text_xxl_400 {
  line-height: 1.45;
  font-size: var(--font-size-text-xxl);
  font-weight: var(--font-weight-regular);
}
.text_xl_700 {
  line-height: 1.45;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-bold);
}
.text_xl_600 {
  line-height: 1.45;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-semibold);
}
.text_xl_500 {
  line-height: 1.45;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-medium);
}
.text_xl_400 {
  line-height: 1.45;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-regular);
}
.text_lg_700 {
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
}
.text_lg_600 {
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-semibold);
}
.text_lg_500 {
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
}
.text_lg_400 {
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-regular);
}
.text_md_700 {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-bold);
}
.text_md_600 {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
}
.text_md_500 {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
}
.text_md_400 {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
}
.text_sm_700 {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-bold);
}
.text_sm_600 {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-semibold);
}
.text_sm_500 {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
}
.text_sm_400 {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
}
.text_xs_700 {
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-bold);
}
.text_xs_600 {
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-semibold);
}
.text_xs_500 {
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
}
.text_xs_400 {
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-regular);
}
.caption_md_700 {
  line-height: 1.35;
  font-size: var(--font-size-caption-md);
  font-weight: var(--font-weight-bold);
}
.caption_md_600 {
  line-height: 1.35;
  font-size: var(--font-size-caption-md);
  font-weight: var(--font-weight-semibold);
}
.caption_md_500 {
  line-height: 1.35;
  font-size: var(--font-size-caption-md);
  font-weight: var(--font-weight-medium);
}
.caption_md_400 {
  line-height: 1.35;
  font-size: var(--font-size-caption-md);
  font-weight: var(--font-weight-regular);
}
.caption_sm_700 {
  line-height: 1.35;
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-bold);
}
.caption_sm_600 {
  line-height: 1.35;
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-semibold);
}
.caption_sm_500 {
  line-height: 1.35;
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-medium);
}
.caption_sm_400 {
  line-height: 1.35;
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-regular);
}
.caption_xs_700 {
  line-height: 1.35;
  font-size: var(--font-size-caption-xs);
  font-weight: var(--font-weight-bold);
}
.caption_xs_600 {
  line-height: 1.35;
  font-size: var(--font-size-caption-xs);
  font-weight: var(--font-weight-semibold);
}
.caption_xs_500 {
  line-height: 1.35;
  font-size: var(--font-size-caption-xs);
  font-weight: var(--font-weight-medium);
}
.caption_xxs_700 {
  line-height: 1.35;
  font-size: var(--font-size-caption-xxs);
  font-weight: var(--font-weight-bold);
}

/* Title */
.title_set {
  position: relative;
  padding: var(--unit-24) var(--layout-padding);
}
.title_set .title {
  display: block;
  color: var(--black800);
  white-space: pre-line;
}
.title_set .body_text {
  margin: 6px 0 0;
  display: block;
  color: var(--black200);
}
.title_set .overline_text {
  margin: 0 0 10px;
  display: block;
  color: var(--black300);
}
.title_set .text_area {
  margin: 6px 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.title_set .text_area .body_text {
  margin: 0;
}
.title_set .text_area .icon {
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.title_set .text_area .icon.question {
  background-image: url("../images/common/ico_question_black100_20.svg");
}

.sub_title_set {
  display: flex;
  flex-direction: column;
  gap: var(--unit-4);
}
.sub_title_set .title_area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-4);
}
.sub_title_set .title {
  color: var(--black800);
}
.sub_title_set .text_area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-4);
}
.sub_title_set .body_text {
  color: var(--black200);
}

.inner {
  padding: 0 var(--layout-padding);
}

/* Divider */
.divider {
  flex: 0 0 auto;
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 1px;
  background-color: var(--gray300);
}
.divider.thick {
  height: 6px;
  background-color: var(--gray200);
}
.divider.inset {
  width: calc(100% - (var(--layout-padding) * 2));
}

/* Background Color */
.bg_gray,
.bg_gray .top_navi {
  background-color: var(--gray300);
}
.bg_gray02,
.bg_gray02 .top_navi {
  background-color: var(--gray200);
}
.bg_white_gray,
.bg_white_gray .top_navi {
  background-color: var(--gray100);
}

/* Header */
.top_navi {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit-6);
  width: 100%;
  height: var(--nav-h);
  padding: 0 var(--navigation-layout-right) 0 var(--navigation-layout-left);
  background-color: var(--gray50);
  text-align: center;
  z-index: 99;
}
.top_navi.bg_gray {
  background-color: var(--gray200);
}
.top_navi.align_right {
  justify-content: flex-end;
}
.top_navi .title_area {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--unit-4);
}
.top_navi .title {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
  text-align: center;
}
.top_navi .btn_info {
  display: block;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
}
.top_navi .title .ico_arw {
  margin: 0 0 0 4px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/common/ico_down_thick.png") no-repeat 0 0 / contain;
}
.top_navi .title_area .btn_month {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.top_navi .title_area .btn_month .text {
  line-height: 1.45;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
  text-decoration: underline;
}
.top_navi .title_area .btn_month .polygon_down {
  width: 20px;
  height: 20px;
  background: url("../images/common/ico_polygon_down_black700_20.svg") no-repeat center / contain;
}
.top_navi .btn_icon {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-indent: -9999px;
}
.top_navi .btn_icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.top_navi .right_btns {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-12);
  z-index: 1;
}
.top_navi .btn_text {
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--black500);
}
.top_navi .btn_text.c_blue {
  color: var(--blue800);
}
.top_navi .btn_text:disabled,
.top_navi .btn_text.c_blue:disabled {
  color: var(--gray800);
}
.top_navi .btn_filter {
  padding-right: 16px;
  background: url("../images/common/arrow_down_black500_12.svg") no-repeat right center / 12px;
}
.top_navi .btn_share {
  background: url("../images/common/ico_share_black800_24.svg") no-repeat center / contain;
}
.top_navi .btn_write {
  background: url("../images/common/ico_edit.svg") no-repeat center / contain;
}
.top_navi .btn_more {
  background: url("../images/common/icon_kebab_line_black800_24.svg") no-repeat center / contain;
}
.top_navi .btn_close {
  background: url("../images/common/ico_close_black800_24.svg") no-repeat center / contain;
}
.top_navi .btn_reload {
  background: url("../images/common/ico_refresh_black800_24.svg") no-repeat center / contain;
}
.top_navi .btn_search {
  background-image: url("../images/common/ico_search_black800_24.svg");
}
.top_navi .btn_mypage {
  text-indent: 0;
}
.top_navi .btn_mypage .profile_img {
  overflow: hidden;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gray500);
}
.top_navi .btn_mypage .profile_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top_navi .btn_mypage .profile_img.no_img {
  border: none;
}
.top_navi .btn_user_block {
  background-image: url("../images/common/ico_personblock_black800_24.svg");
}
.top_navi .btn_menu {
  background-image: url("../images/common/ico_menu_line_black800_24.svg");
}
.top_navi .tooltip_wh {
  top: 43px;
}
.top_navi .tooltip_wh .btn_close {
  background: url("../images/common/ico_delete_circle_M.png") no-repeat center / 18px;
}
.top_navi .tooltip_wh .tooltip_txt {
  text-align: left;
}
.top_navi .search_area {
  padding: var(--unit-8) 0;
}
.top_navi .segmented_control.size_md .segmented_container .segment {
  padding-left: 10px;
  padding-right: 10px;
}

/* Layout */
.layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--layout-gap);
  width: 100%;
  padding: 0 var(--layout-padding);
}
.layout_wrap {
  min-height: 100vh;
  padding: var(--nav-h) 0 48px;
}
.layout_wrap_bt {
  min-height: 100vh;
  padding: var(--nav-h) 0 var(--cta-main-h);
}
.layout_wrap_bt.pt0 {
  padding-top: 0;
}
.layout_wrap_bt02 {
  min-height: 100vh;
  padding: var(--nav-h) 0 var(--cta-main-text-h);
}
.layout_wrap_bt02.pt0 {
  padding-top: 0;
}
.layout_wrap_full {
  min-height: 100vh;
  padding: var(--nav-h) 0 0;
}
.layout_wrap_full.pt0 {
  padding-top: 0;
}
.layout_wrap .sub_container {
  min-height: calc(100vh - var(--nav-h) - 48px);
}
.layout_wrap_full .sub_container {
  min-height: calc(100vh - var(--nav-h));
}
.layout_wrap_bt .sub_container {
  min-height: calc(100vh - calc(var(--nav-h) + var(--cta-main-h)));
}
.layout_wrap_bt02 .sub_container {
  min-height: calc(100vh - calc(var(--nav-h) + var(--cta-main-text-h)));
}

/* Container */
.container {
  margin: 0 auto;
  width: calc(100% - (var(--layout-padding) * 2));
  padding: var(--unit-20);
  border-radius: 10px;
}

/* Card */
.card_wrap .card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: var(--unit-20);
  border-radius: 12px;
}
.card_wrap .card::before {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pressed-color);
  transition: all 0.2s ease;
  content: "";
}
.card_wrap .card:active:before {
  visibility: visible;
  opacity: 1;
}
.card_wrap.column02 .card {
  width: calc((100% - var(--layout-gap)) / 2);
  padding: var(--unit-16);
  border-radius: 10px;
}
.card_wrap.column03 .card {
  width: calc((100% - (var(--layout-gap) * 2)) / 3);
  padding: var(--unit-16);
  border-radius: 8px;
}

/* Tabs */
.tab {
  position: relative;
  width: 100%;
  background-color: var(--gray50);
}
.tab::before {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--gray500);
  content: "";
  z-index: 1;
}
.tab .tab_menu {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  min-height: 46px;
}
.tab .tab_menu .menu_item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-2);
  width: 100%;
  height: 100%;
  padding: var(--unit-12) var(--unit-12) 11px;
  text-align: center;
  background-color: transparent;
}
.tab .tab_menu .menu_item p {
  position: relative;
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-medium);
  color: var(--black100);
}
.tab .tab_menu .menu_item.active p {
  font-weight: var(--font-weight-semibold);
  color: var(--black800);
}
.tab .tab_menu .menu_item.active .num {
  color: var(--blue800);
}
.tab .indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--black700);
  transition: left 0.4s ease;
  z-index: 1;
}
/* Tab - Fixed */
.tab.fix {
  position: sticky;
  top: var(--nav-h);
  z-index: 3;
}
/* Tab - Flexible */
.tab.flexible {
  padding: 0 var(--unit-8);
}
.tab.flexible .tab_menu {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  gap: var(--unit-12);
}
.tab.flexible .menu_item a {
  padding: var(--unit-12) var(--unit-6);
}
.tab.flexible .indicator {
  left: 8px;
}
/* Tab - Flexible Scroll */
.tab.flexible.scroll {
  padding-left: 0;
  padding-right: var(--unit-20);
}
.tab.flexible.scroll::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  padding: 0 8px;
  background-image: linear-gradient(270deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
  content: "";
}
.tab.flexible.scroll .scroll_wrap {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--unit-12);
  padding-left: 8px;
}
.tab.flexible.scroll .scroll_wrap .tab_menu {
  overflow: initial;
}
.tab .tab_menu.swiper-pagination-bullets {
  top: auto;
  bottom: auto;
}
.tab .swiper-pagination-bullets .menu_item.active:before {
  display: none;
}

.title_select {
  padding: 10px 24px;
  background-color: var(--gray50);
}
.title_select.fix {
  position: sticky;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 3;
}
.title_select .tab_menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.title_select .tab_menu .menu_item .title {
  line-height: 1.35;
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--black50);
  transition: all 0.2s ease-in;
}
.title_select .tab_menu .menu_item.active .title {
  font-weight: var(--font-weight-bold);
  color: var(--black800);
}

/* Segmented Control  */
.segmented_control {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.segmented_control .segmented_container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--unit-4);
  border-radius: 99px;
  background-color: var(--gray300);
}
.segmented_control .segmented_container .selection {
  grid-column: 1;
  grid-row: 1;
  background-color: var(--black600);
  border-radius: 99px;
  will-change: transform;
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}
.segmented_control .segmented_container .segment {
  position: relative;
  padding: var(--unit-10) var(--unit-16);
  border-radius: 99px;
}
.segmented_control .segmented_container .segment:first-of-type {
  grid-column: 1;
  grid-row: 1;
}
.segmented_control .segmented_container .segment input {
  display: none;
}
.segmented_control .segmented_container .segment .text {
  position: relative;
  display: block;
  width: 100%;
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--black100);
  text-align: center;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  will-change: transform;
}
.segmented_control .segmented_container .segment input:checked + .text {
  font-weight: var(--font-weight-semibold);
  color: var(--gray50);
}
.segmented_control.size_md .segmented_container .segment {
  padding-top: var(--unit-6);
  padding-bottom: var(--unit-6);
}
.segmented_control.size_sm .segmented_container {
  padding: var(--unit-2);
}
.segmented_control.size_sm .segmented_container .segment {
  padding-top: 5px;
  padding-bottom: 5px;
}
.segmented_control.size_sm .segmented_container .segment .text {
  line-height: 1.35;
  font-size: 13px;
}
.segmented_control.type_white .segmented_container .selection {
  background-color: var(--gray50);
}
.segmented_control.type_white .segmented_container .segment input:checked + .text {
  color: var(--black800);
}
.segmented_control.full {
  margin: 0 auto;
  width: calc(100% - 8px);
}
.segmented_control.full .segmented_container {
  width: 100%;
}

/* Buttons - Solid, Line, On/Off */
.btn_primary,
.btn_secondary,
.btn_tertiary,
.btn_quaternary,
.btn_quinary,
.btn_line_primary,
.btn_line_secondary,
.btn_positive,
.btn_negative {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 15.4px var(--unit-20);
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-semibold);
  border-radius: 99px;
}
.btn_primary::after,
.btn_secondary::after,
.btn_tertiary::after,
.btn_quaternary::after,
.btn_quinary::after,
.btn_line_primary::after,
.btn_line_secondary::after,
.btn_positive::after,
.btn_negative::after {
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  transition: all 0.2s ease;
  content: "";
}
.btn_line_primary::before,
.btn_line_secondary::before,
.btn_positive::before,
.btn_negative::before {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-radius: 99px;
  transition: all 0.2s ease;
  content: "";
}
.btn_primary:active:not(:disabled)::after,
.btn_secondary:active:not(:disabled)::after,
.btn_tertiary:active:not(:disabled)::after,
.btn_quaternary:active:not(:disabled)::after,
.btn_quinary:active:not(:disabled)::after,
.btn_line_primary:active:not(:disabled)::after,
.btn_line_secondary:active:not(:disabled)::after,
.btn_positive:active:not(:disabled)::after,
.btn_negative:active:not(:disabled)::after {
  visibility: visible;
  opacity: 1;
}
.btn_primary {
  color: var(--gray50);
  background-color: var(--blue700);
}
.btn_primary:active:not(:disabled)::after {
  background-color: var(--pressed-color);
}
.btn_secondary {
  color: var(--black600);
  background-color: var(--gray200);
}
.btn_secondary:active:not(:disabled)::after {
  background-color: var(--pressed-normal);
}
.btn_tertiary {
  color: var(--blue700);
  background-color: var(--gray200);
}
.btn_tertiary:active:not(:disabled)::after {
  background-color: var(--pressed-normal);
}
.btn_quaternary {
  color: var(--blue700);
  background-color: var(--blue100);
}
.btn_quaternary:active:not(:disabled)::after {
  background-color: var(--pressed-blue);
}
.btn_quinary {
  color: var(--black600);
  background-color: var(--gray50);
}
.btn_quinary:active:not(:disabled)::after {
  background-color: var(--pressed-normal);
}

.btn_line_primary {
  color: var(--blue700);
  background-color: var(--gray50);
}
.btn_line_primary::before {
  border-color: var(--blue800);
}
.btn_line_secondary {
  color: var(--black300);
  background-color: var(--gray50);
}
.btn_line_secondary::before {
  border-color: var(--gray500);
}
.btn_line_primary:active:not(:disabled)::after,
.btn_line_secondary:active:not(:disabled)::after {
  background-color: var(--pressed-normal);
}
.btn_line_primary:disabled,
.btn_line_secondary:disabled {
  color: var(--gray600);
}
.btn_line_primary:disabled::before,
.btn_line_secondary:disabled::before {
  border-color: var(--gray500);
}

.btn_positive,
.btn_negative {
  color: var(--black600);
  background-color: var(--gray200);
}
.btn_positive::before,
.btn_negative::before {
  border-color: var(--gray200);
}
.btn_positive.active,
.btn_positive:active:not(:disabled) {
  color: var(--blue700);
  background-color: var(--blue100);
}
.btn_positive:active:not(:disabled)::after {
  background-color: var(--pressed-blue);
}
.btn_positive.active::before,
.btn_positive:active:not(:disabled)::before {
  border-color: var(--blue800);
}
.btn_negative.active,
.btn_negative:active:not(:disabled) {
  color: var(--red300);
  background-color: var(--red50);
}
.btn_negative:active:not(:disabled)::after {
  background-color: var(--pressed-red);
}
.btn_negative.active::before,
.btn_negative:active:not(:disabled)::before {
  border-color: var(--red300);
}
.btn_primary:disabled,
.btn_secondary:disabled,
.btn_tertiary:disabled,
.btn_quaternary:disabled,
.btn_quinary:disabled,
.btn_positive:disabled,
.btn_negative:disabled {
  color: var(--gray800);
  background-color: var(--gray200);
}
.btn_positive:disabled::before,
.btn_negative:disabled::before {
  border-color: var(--gray200);
}
.btn_xxl {
  gap: var(--unit-4);
  min-height: 54px;
  padding: 15.4px var(--unit-20);
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-semibold);
}
.btn_xl {
  gap: var(--unit-4);
  min-height: 48px;
  padding: 13px var(--unit-20);
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
}
.btn_lg {
  gap: var(--unit-4);
  min-height: 44px;
  padding: var(--unit-12) var(--unit-20);
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-semibold);
}
.btn_md {
  gap: var(--unit-2);
  min-height: 40px;
  padding: var(--unit-10) var(--unit-16);
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-semibold);
}
.btn_sm {
  gap: var(--unit-2);
  min-height: 32px;
  padding: 7px var(--unit-12);
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-semibold);
}
.btn_xs {
  gap: var(--unit-2);
  min-height: 24px;
  padding: var(--unit-4) var(--unit-8);
  line-height: 1.35;
  font-size: var(--font-size-caption-md);
  font-weight: var(--font-weight-semibold);
}

/* Text Button */
.text_button_primary,
.text_button_secondary {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-4);
  position: relative;
  overflow: hidden;
  min-height: 30px;
  padding: var(--unit-4) var(--unit-8);
  color: inherit;
  border-radius: 8px;
}
.text_button_primary::after,
.text_button_secondary::after {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pressed-normal);
  border-radius: 8px;
  transition: all 0.2s ease;
  content: "";
}
.text_button_primary:active:not(:disabled)::after,
.text_button_secondary:active:not(:disabled)::after {
  visibility: visible;
  opacity: 1;
}
.text_button_primary .text,
.text_button_secondary .text {
  flex: 0 0 auto;
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}
.text_button_primary .text {
  color: var(--blue800);
}
.text_button_secondary .text {
  color: var(--black600);
}
.text_button_primary .icon,
.text_button_secondary .icon {
  flex: 0 0 auto;
}
.text_button_primary.btn_md .text,
.text_button_secondary.btn_md .text {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
}
.text_button_primary.btn_sm .text,
.text_button_secondary.btn_sm .text {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
}
.text_button_primary.btn_xs .text,
.text_button_secondary.btn_xs .text {
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
}
.text_button_primary:disabled .text,
.text_button_secondary:disabled .text {
  color: var(--black100);
}

.box_btn {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 13px 16px;
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--gray50);
  background-color: var(--blue700);
  border-radius: 12px;
}
.box_btn.sub_btn {
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
}
.box_btn:disabled {
  color: var(--gray800);
  background-color: var(--gray400);
}
.box_btn:active:not(:disabled):before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black800);
  opacity: 0.05;
  content: "";
}
.box_btn_small {
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding: 9px 16px;
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  border-radius: 6px;
}
.box_btn_small:active:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black800);
  opacity: 0.05;
  content: "";
}
.box_btn_small.btn_tertiary {
  color: var(--black800);
}

.btn_bottom,
.btn_bottom_fix {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--unit-8);
  padding: var(--unit-16) var(--layout-padding);
  background-image: linear-gradient(0deg, var(--gray50) 80%, rgba(255, 255, 255, 0) 100%);
}
.btn_bottom_fix {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.btn_bottom_fix:has(.tooltip) {
  overflow: initial;
}
.btn_bottom.col02,
.btn_bottom_fix.col02 {
  flex-direction: row;
}
.btn_bottom a,
.btn_bottom .btn,
.btn_bottom_fix a,
.btn_bottom_fix .btn {
  width: 100%;
  min-height: 54px;
}
.btn_bottom_fix .btn_text {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-2);
  width: 100%;
  padding: 15px var(--unit-20);
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--black600);
}
.btn_bottom_fix .btn_text .ico_arw {
  width: 20px;
  height: 20px;
  background: url("../images/common/arrow_black_S.png") no-repeat 0 0 / contain;
}
.bg_gray02 .btn_bottom,
.bg_gray02 .btn_bottom_fix {
  background-image: linear-gradient(360deg, #f4f5f6 82.06%, rgba(244, 245, 246, 0) 100%);
}

/* 키패드 올라왔을 때 */
.btn_bottom_fix.full {
  padding: 0;
  background: none;
}
.btn_bottom_fix.full .btn {
  border-radius: 0;
}

/* CTA Main + Text */
.cta_main_text {
  gap: var(--unit-4);
  padding-bottom: var(--unit-4);
}
.text_button_area {
  padding: var(--unit-12) 0;
}
.text_button_area .sub_text {
  color: var(--black200);
}
.text_button_area [class*="text_button_"] .text {
  line-height: 1;
}

/* CTA버튼 + 다른 컴포넌트 합쳐졌을 때 */
.fix_bottom_button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 11px 0 0;
  background-image: linear-gradient(0deg, #fff 82.06%, rgba(255, 255, 255, 0) 100%);
}
.fix_bottom_button .btn_bottom_fix {
  position: relative;
}

/* Badge */
.dot_badge {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--red400);
}
.dot_badge.pos_label {
  top: 3px;
  right: -2px;
  transform: translateX(100%);
}
.new_badge {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  line-height: 1;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--gray50);
  background-color: var(--red400);
  border-radius: 50%;
}
.number_badge {
  display: block;
  padding: 1px var(--unit-4);
  line-height: 1.35;
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--gray50);
  background-color: var(--red400);
  border-radius: 12px;
}
.text_badge {
  line-height: 1.35;
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--gray50);
  border-radius: 12px;
  background-color: var(--red200);
}
.text_badge.size_sm {
  padding: var(--unit-2) var(--unit-6);
  font-size: var(--font-size-caption-xxs);
}
.text_badge.size_md {
  padding: var(--unit-2) var(--unit-4);
  font-size: var(--font-size-caption-xs);
}

/* Tag */
.tag {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--unit-4) var(--unit-8);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--gray50);
  text-align: center;
  border-radius: 99px;
  background-color: var(--black800);
}
.tag.size_md {
  min-height: 24px;
  padding: var(--unit-4) var(--unit-8);
  font-size: 12px;
}
.tag.size_sm {
  min-height: 19px;
  padding: var(--unit-2) var(--unit-8);
  font-size: 11px;
}
.tag.size_xs {
  min-height: 16px;
  padding: var(--unit-2) var(--unit-6);
  font-size: 9px;
}
.tag.type_line {
  color: var(--black300);
  background-color: var(--gray50);
}
.tag.type_line::before {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--gray400);
  content: "";
}

/* Chips */
.chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--unit-6);
  row-gap: var(--unit-8);
  padding: 0 var(--layout-padding);
}
.chips.scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.chips input {
  display: none;
}
.chips .label_box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--unit-4);
  border-radius: 99px;
  transition: all 0.2s ease;
}
.chips .label_box::after {
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background-color: var(--pressed-color);
  transition: all 0.2s ease;
  content: "";
}
.chips input:not(:disabled) + .label_box:active::after {
  visibility: visible;
  opacity: 1;
}
.chips button.label_box:active::after {
  visibility: visible;
  opacity: 1;
}
.chips .label_box .text {
  font-weight: var(--font-weight-medium);
  text-align: center;
  color: var(--black300);
  transition: all 0.2s ease;
}
.chips .label_box .btn_delete {
  width: 12px;
  height: 12px;
}
.chips .size_sm .label_box {
  min-height: 31px;
  padding: var(--unit-6) var(--unit-12);
}
.chips .size_md .label_box {
  min-height: 36px;
  padding: var(--unit-8) var(--unit-12);
}
.chips .size_sm .label_box .text {
  line-height: 1.35;
  font-size: 13px;
}
.chips .size_md .label_box .text {
  line-height: 1.45;
  font-size: 14px;
}
.chips input:checked + .label_box .text {
  font-weight: var(--font-weight-semibold);
}
.chips .chip .label_box {
  background-color: var(--gray300);
}
.chips .chip input:checked + .label_box {
  background-color: var(--blue700);
}
.chips .chip input:checked + .label_box .text {
  color: var(--gray50);
}
.chips .chip input:disabled + .label_box {
  background-color: var(--gray200);
}
.chips .chip input:disabled + .label_box .text {
  color: var(--gray800);
}
.chips .outline_chip .label_box {
  background-color: var(--gray50);
}
.chips .outline_chip .label_box::before {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  border: 1px solid var(--gray500);
  content: "";
}
.chips .outline_chip .label_box .text {
  color: var(--black500);
}
.chips .outline_chip .label_box button {
  position: relative;
  z-index: 1;
}
.chips .outline_chip input:checked + .label_box::before {
  border-color: var(--blue800);
}
.chips .outline_chip input:checked + .label_box .text {
  color: var(--blue700);
}
.chips .outline_chip input:checked + .label_box .btn_delete path {
  fill: var(--blue700);
}
.chips .outline_chip input:disabled + .label_box .text,
.chips .outline_chip .label_box button:disabled {
  color: var(--gray600);
}
.chips .outline_chip input:disabled + .label_box .btn_delete path,
.chips .outline_chip .label_box button:disabled path {
  fill: var(--gray600);
}

/* Bottom Sheet */
.modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  transition: all 0.3s;
}
.modal .modal_wrap {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  max-height: calc(100% - 30px);
  padding: var(--unit-16) 0 0;
  background-color: var(--gray50);
  border-radius: 20px 20px 0 0;
  z-index: 1;
  transition: all 0.3s;
}
.modal .handle_bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 20px;
}
.modal .handle_bar::before {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 32px;
  height: 4px;
  border-radius: 4px;
  background-color: var(--gray400);
  content: "";
}
.modal .modal_header {
  flex: 1 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 20px;
  padding: var(--unit-20) calc(var(--layout-padding) + 46px) var(--unit-16) var(--layout-padding);
}
.modal .modal_header.scroll::before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gray300);
  content: "";
}
.modal .modal_header .title {
  line-height: 1.45;
  font-size: var(--font-size-title-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--black800);
  word-break: break-all;
}
.modal .modal_header .sub_txt {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  color: var(--black500);
  word-break: break-all;
}
.modal .btn_close {
  position: absolute;
  top: 0;
  right: var(--layout-padding);
  display: block;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--black300);
}
.modal .modal_contents {
  overflow-y: scroll;
  padding: 0 var(--layout-padding) calc(var(--cta-main-h) + 16px);
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal .modal_contents::-webkit-scrollbar {
  display: none;
}
.modal .modal_contents.align_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal .modal_contents .list {
  display: flex;
  flex-direction: column;
  gap: var(--unit-4);
}
.modal .modal_contents .list .text {
  position: relative;
  padding: 0 0 0 6px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black700);
}
.modal .modal_contents .list .text::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 6px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black700);
  content: "·";
}
.modal .modal_contents .input_row.type_b {
  padding: 0;
}
.modal .modal_button {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-8);
  width: 100%;
  padding: var(--unit-16) var(--layout-padding);
  background-image: linear-gradient(0deg, var(--gray50) 80%, rgba(255, 255, 255, 0) 100%);
}
.modal .modal_button button {
  width: 100%;
}
.modal .modal_button.full {
  padding: 0;
}
.modal .modal_button.full button {
  border-radius: 0;
}
.modal .modal_scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dimmed);
}

.modal.active {
  visibility: visible;
  opacity: 1;
}
.modal.active .modal_wrap {
  bottom: 0;
}

/* CTA 버튼 없고 리스트가 아닐 때 */
.modal.none_button .modal_contents {
  padding: 0 var(--layout-padding) var(--unit-32);
}

/* 바텀시트 타이틀 없을 때 */
.modal.none_title .modal_header {
  padding: 0;
}

/* 수직 CTA 버튼 두개 */
.modal.vertical_button .modal_button {
  flex-direction: column;
  gap: var(--unit-4);
  padding-bottom: var(--unit-4);
}
.modal.vertical_button .modal_contents {
  padding: 0 var(--layout-padding) var(--cta-main-text-h);
}
.modal.vertical_button .modal_contents .agree_wrap {
  padding: 0 0 16px;
}

/* Bottom Sheet - Scroll */
.modal .modal_header.scroll::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gray300);
  content: "";
}

/* Bottom Sheet - Indicator */
.modal.indicator .modal_header {
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: var(--unit-10) var(--layout-padding) 18px var(--layout-padding);
}
.modal.indicator .modal_header button {
  width: 26px;
  height: 26px;
  text-indent: -9999px;
  border-radius: 50%;
  background-color: var(--gray300);
}
.modal.indicator .modal_header button svg path {
  fill: var(--black300);
}
.modal.indicator .modal_header button:disabled {
  background-color: var(--gray200);
}
.modal.indicator .modal_header button:disabled svg path {
  background-color: var(--gray800);
}
.modal.indicator .modal_wrap {
  height: 90%;
}
.modal.indicator .modal_contents {
  padding-top: var(--unit-24);
}

/* Bottom Sheet - List */
.modal.type_list .modal_contents {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--unit-16);
}

/* modal agree_wrap */
.modal .agree_wrap {
  padding: 0;
}

/* Bottom Sheet - Img */
.modal.type_img .img_area {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal.type_img .img_area img {
  display: block;
}
.modal.type_img .text_area {
  margin: var(--unit-12) 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--unit-10);
  padding: 0 0 8px;
  text-align: center;
}
.modal.type_img .text_area .title {
  color: var(--black800);
}
.modal.type_img .text_area .text {
  color: var(--black200);
}
/* 우리집 등록 안내 */
.modal.home_register_modal .img_area img {
  width: 120px;
}
/* 입주민 인증 안내 */
.modal.res_verify_modal .img_area img {
  width: 110px;
}

.choice_modal .modal_header + .modal_contents {
  padding-top: 0;
}
.choice_modal .modal_contents {
  padding: 0 var(--layout-padding) var(--unit-16);
}
.choice_modal .radio_box + .radio_box {
  border-top: 1px solid var(--gray300);
}
.choice_modal .radio_box input {
  display: none;
}
.choice_modal .radio_box label {
  position: relative;
  display: block;
  padding: 15px 36px 15px 0;
  line-height: 1.45;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.choice_modal .radio_box label:before {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s linear;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
  width: 34px;
  height: 34px;
  background: url("../images/common/check_blue_M.png") no-repeat center / contain;
  content: "";
}
.choice_modal .radio_box input:checked + label:before {
  visibility: visible;
  opacity: 1;
}

.month_choice_modal .modal_wrap {
  max-height: 356px;
}
.month_choice_modal .modal_contents {
  padding: 0 24px 10px;
}

.share_modal .modal_contents {
  display: flex;
  padding: 15px 24px 40px;
  justify-content: center;
  align-items: center;
}
.share_modal .modal_contents .btn_share + .btn_share {
  margin-left: 43px;
}
.share_modal .modal_contents .btn_share .ico {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  width: 54px;
  height: 54px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.share_modal .modal_contents .btn_share .txt {
  display: block;
  margin: 8px 0 0;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.share_modal .modal_contents .btn_share.kakao .ico {
  background-image: url("../images/common/ico_share_kakao.png");
}
.share_modal .modal_contents .btn_share.sms .ico {
  background-image: url("../images/common/ico_share_sms.png");
}
.share_modal .modal_contents .btn_share.url .ico {
  background-image: url("../images/common/ico_share_url.png");
}

.terms_modal .modal_contents {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.terms_modal .section .chapter_tit {
  margin: 0 0 var(--unit-4);
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.terms_modal .section .article_tit {
  margin: 0 0 10px;
  display: block;
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.terms_modal .section .article_sub_tit {
  line-height: 1.45;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.terms_modal .section .article_txt {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black800);
}
.terms_modal .section .article_txt.c_gray {
  color: var(--black300);
}
.terms_modal .section .article_sub_txt {
  line-height: 1.1;
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black800);
}
.terms_modal .section .article_txt + .article_num_list {
  margin: var(--unit-10) 0 0;
}
.terms_modal .section .article_num_list {
  display: flex;
  flex-direction: column;
  gap: var(--unit-10);
}
.terms_modal .section .article_num_list .article_txt {
  padding: 0 0 0 13px;
  text-indent: -13px;
}
.terms_modal .section .article_dot_list .list_item {
  position: relative;
  padding: 0 0 0 6px;
}
.terms_modal .section .article_dot_list .list_item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-regular);
  color: var(--black800);
  text-align: left;
  content: "·";
}
.terms_modal .section .article_num_list + .article_txt {
  margin: var(--unit-20) 0 0;
}
.terms_modal .section .indent_list {
  margin: var(--unit-10) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--unit-4);
  padding: 0 0 0 var(--unit-12);
}
.terms_modal .section .indent_list .article_txt {
  padding: 0;
  text-indent: 0;
  color: var(--black300);
}
.terms_modal .section .article_list {
  display: flex;
  flex-direction: column;
  gap: var(--unit-12);
  padding: var(--unit-28) 0;
  border-top: 1px solid var(--gray300);
  border-bottom: 1px solid var(--gray300);
}
.terms_modal .section .article_list li a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.terms_modal .section .article_list li .num {
  width: 47px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--blue700);
}
.terms_modal .section .article_list li .txt {
  flex: 1;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black800);
}
.terms_modal .section .source {
  line-height: 1.35;
  font-size: var(--font-size-caption-md);
  font-weight: var(--font-weight-regular);
  color: var(--black700);
}
.terms_modal .table {
  width: 100%;
  margin: 10px 0 0;
  border-top: 1px solid var(--gray400);
}
.terms_modal .table thead tr {
  background-color: var(--gray200);
  border-bottom: 1px solid var(--gray400);
}
.terms_modal .table thead tr th {
  padding: var(--unit-10) var(--unit-12);
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
  text-align: center;
  border-left: 1px solid var(--gray400);
}
.terms_modal .table thead tr th:first-child {
  border: 0;
}
.terms_modal .table thead + tbody tr:first-child {
  border-top: 0;
}
.terms_modal .table tbody tr {
  border-top: 1px solid var(--gray400);
  border-bottom: 1px solid var(--gray400);
}
.terms_modal .table tbody tr th {
  padding: var(--unit-10) var(--unit-12);
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
  text-align: center;
  background-color: var(--gray200);
}
.terms_modal .table tbody tr td {
  padding: var(--unit-10) var(--unit-12);
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-regular);
  color: var(--black800);
  text-align: center;
  border-left: 1px solid var(--gray400);
  word-break: break-all;
}
.terms_modal .table tbody tr td:first-child {
  border: 0;
}
.terms_modal .table tbody tr td:last-child {
  border-left: 1px solid var(--gray400);
}
.terms_modal .table tbody tr td.border_l {
  border-left: 1px solid var(--gray400);
}
.terms_modal .table tbody tr td.align_left {
  text-align: left;
}
.terms_modal .table tbody tr th + td {
  border: 0;
}
.terms_modal .table + .article_txt {
  margin: 20px 0 0;
}
.terms_modal .table + .text {
  margin: 10px 0 0;
}

.terms_modal .section .title {
  display: block;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--black800);
}
.terms_modal .section .text {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black800);
}
.terms_modal .section .text.c_blue {
  color: var(--blue800);
}
.terms_modal .section .title + .text_list {
  margin: 4px 0 0;
}
.terms_modal .section .text_list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.terms_modal .section .text_list .text {
  position: relative;
  padding: 0 0 0 6px;
}
.terms_modal .section .text_list .text::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  text-align: left;
  content: "·";
}
.terms_modal .section .sub_text_area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 0 7px;
}
.terms_modal .section .sub_text_area .sub_text {
  display: flex;
  flex-direction: row;
  gap: 8px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black300);
}
.terms_modal .section .sub_text_area .sub_text::before {
  flex: 0 0 auto;
  width: 7px;
  color: var(--black300);
  text-align: center;
  content: "-";
}
.terms_modal .section .sub_text_area .sub_text.c_blue,
.terms_modal .section .sub_text_area .sub_text.c_blue::before {
  color: var(--blue800);
}
.terms_modal .section .text_list .table {
  margin: 4px 0 0;
}

.terms_modal .section .num_list {
  list-style: auto;
  list-style-position: inside;
}
.terms_modal .section .num_list .text {
  padding: 0;
  text-indent: 0;
}
.terms_modal .section .num_list .indent_list {
  margin: 0;
  padding: 0 0 0 15px;
}
.terms_modal .section .num_list .indent_list02 {
  padding: 0 0 0 22px;
}

.icon_modal .modal_wrap {
  padding: 27px 0 14px;
}
.icon_modal .list_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 14px 24px;
}
.icon_modal .list_item .ico {
  display: block;
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.icon_modal .list_item .txt_box .tit {
  display: block;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.icon_modal .list_item .txt_box .txt {
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--black300);
}

/* 약관동의 */
.agree_wrap {
  padding: 0 var(--layout-padding);
}
.agree_wrap .all_agree_area {
  margin: 0 0 16px;
}
.agree_wrap .all_agree_area .checkmark_label {
  position: relative;
  overflow: hidden;
  gap: var(--unit-8);
  padding: 15px 20px;
  background-color: var(--gray200);
  border-radius: 16px;
}
.agree_wrap .all_agree_area .text {
  line-height: 1.5;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--black800);
}
.agree_wrap .all_agree_area .checkmark_label:after {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pressed-normal);
  transition: all 0.2s ease;
  content: "";
}
.agree_wrap .all_agree_area .checkmark_label:active::after {
  visibility: visible;
  opacity: 1;
}
.agree_wrap .terms_list {
  display: flex;
  flex-direction: column;
  gap: var(--unit-12);
  padding: 0 var(--unit-10) 0 var(--unit-20);
}
.agree_wrap .terms_list .list_item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit-16);
}
.agree_wrap .terms_list .list_item .text {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black800);
}
.agree_wrap .terms_list .list_item .btn_terms_detail {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  text-indent: -9999px;
  background: url("../images/common/arrow_right_black800_12.svg") no-repeat center / contain;
}
.agree_wrap .terms_list .list_item .sub_list_item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--unit-24);
  padding: 0 0 0 var(--unit-16);
}
.agree_txt {
  color: var(--black200);
  text-align: center;
}
.agree_txt .btn_cs {
  color: var(--black200);
  text-decoration: underline;
}

/* 서비스 약관 동의 (Full Page) */
.agree_terms_full {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 144px);
}
.agree_terms_full .agree_wrap {
  flex: 1;
}

/* Fixed Date Picker */
.picker_wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--unit-24);
  width: 100%;
}
.picker_wrapper .cal_wrap .cal_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--unit-16);
}
.picker_wrapper .cal_wrap .cal_header .cal_title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--unit-6);
  line-height: 1.4;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
}
.picker_wrapper .cal_wrap .cal_header .right_area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-16);
}
.picker_wrapper .cal_wrap .cal_header .btn_month {
  width: 20px;
  height: 20px;
}
.picker_wrapper .cal_wrap .cal_week {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.picker_wrapper .cal_wrap .cal_week li {
  width: calc(100% / 7);
  padding: 13px 0;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--black200);
  text-align: center;
}
.picker_wrapper .cal_wrap .cal_week li:nth-child(1) {
  color: var(--red200);
}
.picker_wrapper .cal_table {
  width: 100%;
}
.picker_wrapper .cal_table tr {
  vertical-align: top;
}
.picker_wrapper .cal_table .day {
  height: 46px;
  padding: 7px 0;
}
.picker_wrapper .cal_table .day .num_area {
  position: relative;
  padding: var(--unit-6) var(--unit-6) 0;
  background-color: transparent;
  transition: all 0.3s ease;
}
.picker_wrapper .cal_table .day .num_area .num {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--black700);
  text-align: center;
  border-radius: 0;
  z-index: 1;
}
.picker_wrapper .cal_table .day .num_area .num:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(0) translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  content: "";
  z-index: -1;
}
.picker_wrapper .cal_table .day .txt {
  line-height: 1.35;
  font-size: var(--font-size-caption-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--blue800);
}
.picker_wrapper .cal_table .day.disabled .num_area .num {
  color: var(--gray900);
}
.picker_wrapper .cal_table .day.schedule .num_area .num:after {
  transform: scale(1) translate(-50%, -50%);
  background-color: var(--blue50);
}
.picker_wrapper .cal_table .day.selected .num_area .num {
  color: var(--gray50);
}
.picker_wrapper .cal_table .day.selected .num_area .num:after {
  transform: scale(1) translate(-50%, -50%);
  background-color: var(--blue700);
}
.picker_wrapper .cal_table .day.today {
  padding-bottom: 0;
}
.picker_wrapper .cal_table .day.today .txt {
  color: var(--black300);
}

/* Timeline Date Picker */
.picker_wrapper.timeline .cal_table .day {
  height: 56px;
  padding: var(--unit-4) 0 var(--unit-6);
}
.picker_wrapper.timeline .cal_table .day .txt {
  margin: var(--unit-2) 0 0;
}
.picker_wrapper.timeline .cal_table .day .num_area {
  padding-bottom: var(--unit-6);
}
.picker_wrapper.timeline .cal_table .day.selected_range .num_area {
  transition: all 0.3s ease;
  background-color: var(--blue100);
}
.picker_wrapper.timeline .cal_table .day:nth-child(1).selected_range .num_area {
  margin: 0 0 0 auto;
  border-radius: 16.5px 0 0 16.5px;
}
.picker_wrapper.timeline .cal_table .day:nth-child(7).selected_range .num_area {
  margin: 0 auto 0 0;
  border-radius: 0 16.5px 16.5px 0;
}
.picker_wrapper.timeline .cal_table .day.selected_start .num_area:before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 32px;
  content: "";
  transition: all 0.3s 0.07s ease;
  background-color: var(--blue100);
}
.picker_wrapper.timeline .cal_table .day.selected_end .num_area:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 32px;
  content: "";
  transition: all 0.3s 0.07s ease;
  background-color: var(--blue100);
}

/* Popup - 고정폰트 */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
}
.popup.active {
  display: block;
}
.popup_wrap {
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--unit-20);
  padding: var(--unit-24) var(--unit-24) var(--unit-20);
  background-color: var(--gray50);
  border-radius: 16px;
  z-index: 1;
}
.popup_wrap .popup_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.popup_wrap .popup_container .title {
  display: block;
  line-height: 1.45;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--black800);
  text-align: center;
  word-break: keep-all;
  white-space: pre-line;
}
.popup_wrap .popup_container .desc {
  line-height: 1.45;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--black500);
  word-break: keep-all;
  white-space: pre-line;
  text-align: center;
}
.popup_wrap .popup_container .desc.no_pre {
  white-space: normal;
}
.popup_wrap .popup_container .desc.c_blue {
  color: var(--blue800);
}
.popup_wrap .popup_container .desc .c_blue {
  color: var(--blue700);
}
.popup_wrap .list_description {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--unit-12);
  width: 100%;
}
.popup_wrap .list_description .list_desc_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--unit-4);
  padding: 14px;
  text-align: left;
  border-radius: 8px;
  background-color: var(--gray100);
}
.popup_wrap .list_description .list_desc_box .sub_tit {
  display: block;
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--black600);
}
.popup_wrap .list_description .list_desc_box .txt_list .txt {
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--black500);
}
.popup_wrap .list_description .sub_description {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--unit-2);
}
.popup_wrap .list_description .sub_description .ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: url("../images/common/ico_warning_s.svg") no-repeat center / contain;
}
.popup_wrap .list_description .sub_description .txt {
  line-height: 1.35;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--black200);
}
.popup_wrap .popup_container.title_desc_type {
  gap: var(--unit-8);
}
.popup_wrap .popup_container.title_desc_type .title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
}
.popup_wrap .popup_container.list_desc_type {
  gap: var(--unit-24);
}
.popup_wrap .popup_container.list_desc_type .title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
}
.popup_wrap .btn_area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-8);
}
.popup_wrap .btn_area button {
  width: 100%;
  height: 48px;
}
.popup_wrap .btn_area .btn_primary,
.popup_wrap .btn_area .btn_secondary {
  padding: 13px var(--unit-20);
  font-size: 15px;
}
.popup_wrap .btn_area .text_button_secondary {
  width: auto;
  height: 26px;
}
.popup_wrap .btn_area .text_button_secondary .text {
  line-height: 1.35;
  font-size: 13px;
}
.popup_wrap .btn_area.vertical {
  flex-direction: column;
}
.popup_wrap .btn_area.vertical .text_button_secondary {
  margin: var(--unit-4) 0 0;
}
.popup .popup_scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dimmed);
}
.popup_wrap .img_area img {
  width: 100%;
  vertical-align: top;
}

/* Image Popup */
.popup.type_image .popup_wrap {
  gap: 0;
  width: 272px;
  padding: 0;
  border-radius: 16px;
}
.popup.type_image .popup_wrap .img_area {
  position: relative;
}
.popup.type_image .popup_wrap .dot_paging {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}
.popup.type_image .popup_wrap .btn_area {
  gap: 0;
  border-top: 1px solid var(--gray400);
}
.popup.type_image .popup_wrap .btn_area button {
  height: auto;
  padding: 16px 24px;
}
.popup.type_image .popup_wrap .btn_area .btn_today_close {
  color: var(--black100);
  text-align: left;
}
.popup.type_image .popup_wrap .btn_area .btn_close {
  color: var(--balck800);
  text-align: right;
}

/* Full Page, Page Popup */
.page_popup {
  visibility: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: var(--nav-h);
  background-color: var(--gray50);
  z-index: 100;
  transition: all 0.4s ease-out;
}
.page_popup.active {
  visibility: visible;
}
.page_popup .page_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit-6);
  width: 100%;
  height: var(--nav-h);
  padding: 0 var(--navigation-layout-right) 0 var(--navigation-layout-left);
  background-color: var(--gray50);
  text-align: center;
  z-index: 99;
}
.page_popup .page_header.align_right {
  justify-content: flex-end;
}
.page_popup .page_header .title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
  text-align: center;
}
.page_popup .page_header button {
  position: relative;
  z-index: 1;
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
}
.page_popup .page_header .btn_back {
  background-image: url("../images/common/arrow_left_black800_24.svg");
}
.page_popup .page_header .btn_close {
  background-image: url("../images/common/ico_close_black800_24.svg");
}

/* 우측에서 좌측으로 나오는 인터랙션 */
.page_popup.cover {
  transform: translateX(100%);
  overflow: hidden;
}
.page_popup.cover.active {
  transform: translateX(0);
}
.page_popup.cover .page_contents {
  overflow-y: scroll;
  height: 100%;
}

/* Full Page 약관 상세 */
.page_popup.terms_modal .page_contents {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px var(--layout-padding) 48px;
}
.page_popup.terms_modal.agree_modal .page_contents {
  padding-bottom: calc(var(--cta-main-h) + 16px);
}
.page_popup.terms_modal.native {
  padding-top: 0;
}
.page_popup.terms_modal.native .page_header {
  display: none;
}

/* Full Page - Image Popup */
.page_popup.img_popup {
  background-color: #000;
}
.page_popup.img_popup .page_header {
  justify-content: flex-end;
  background-color: transparent;
}
.page_popup.img_popup .page_header .btn_close {
  background-image: url("../images/common/ico_close_gray200_24.svg");
}
.page_popup.img_popup .page_contents {
  height: 100%;
  padding-bottom: var(--nav-h);
}
.page_popup.img_popup .swiper-container {
  height: calc(100% - 35px);
}
.page_popup.img_popup .swiper-container .swiper-slide {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.page_popup.img_popup .swiper-container .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}
.page_popup.img_popup .dot_paging {
  padding: 30px 0 0;
}

/* Notification - Tooltip */
.btn_tooltip {
  display: block;
}
.tooltip_wh {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  position: absolute;
  max-width: calc(100% - 48px);
  padding: 12px 36px 12px 16px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
  background-color: var(--gray50);
  border-radius: 12px;
  border: 1px solid var(--gray400);
  z-index: 1;
}
.tooltip_wh.active {
  visibility: visible;
  opacity: 1;
}
.tooltip_wh .arw {
  display: block;
  position: absolute;
  top: -5px;
  width: 12px;
  height: 6px;
  background: url("../images/common/tooltip_arrow_white_bottom.png") no-repeat 0 0 / contain;
  content: "";
}
.tooltip_wh .arw.down {
  top: auto;
  bottom: -6px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: rotate(180deg);
}
.tooltip_wh .tooltip_txt {
  color: #111;
  word-break: keep-all;
}
.tooltip_wh .btn_close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
  background: url("../images/common/ico_delete_circle_M.png") no-repeat center / 18px;
}

.tooltip_wrap {
  position: relative;
}
.ico_tooltip {
  display: block;
  width: 14px;
  height: 14px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.ico_tooltip.question {
  background-image: url("../images/common/ico_question_XS.png");
}
.ico_tooltip.question02 {
  background-image: url("../images/common/ico_question_gray_XS.png");
}

.tooltip {
  visibility: hidden;
  opacity: 0;
  height: 0;
  pointer-events: auto;
  position: absolute;
  padding: var(--unit-8) var(--unit-10);
  background-color: var(--black700);
  border-radius: 8px;
  z-index: 1;
}
.tooltip .tooltip_arrow {
  opacity: 0;
  position: absolute;
  display: block;
  width: 8px;
  height: 5px;
  pointer-events: auto;
  transform-origin: center center;
  background: url("../images/common/arrow_tooltip_black.svg") no-repeat center / cover;
  content: "";
  z-index: 1;
}
.tooltip .text_area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-4);
  text-align: center;
}
.tooltip .text_area .text {
  box-sizing: content-box;
  display: block;
  line-height: 1.35;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--gray50);
  white-space: nowrap;
}
.tooltip.active {
  visibility: visible;
  opacity: 1;
  height: auto;
  transition: visible, opacity 0.3s ease-in-out 0s;
}
.tooltip.active .tooltip_arrow {
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0s;
}
.tooltip[data-tooltip-position|="top"] {
  transform: translate(-50%, -100%);
  top: -8px;
  left: 50%;
  margin-bottom: var(--unit-4);
  animation: tooltipTopAni 1.5s ease-out infinite forwards;
}
@keyframes tooltipTopAni {
  0% {
    top: -8px;
  }
  50% {
    top: -14px;
  }
  100% {
    top: -8px;
  }
}

.btn_bottom_fix .tooltip[data-tooltip-position|="top"] {
  top: 8px;
  animation: ctaTooltipTopAni 1.5s ease-out infinite forwards;
}
@keyframes ctaTooltipTopAni {
  0% {
    top: 8px;
  }
  50% {
    top: 2px;
  }
  100% {
    top: 8px;
  }
}

.tooltip[data-tooltip-position|="top"] .tooltip_arrow {
  transform: translate(-50%, 0) rotate(180deg);
  left: 50%;
  bottom: -4px;
}
.tooltip[data-tooltip-position|="top-left"] {
  transform: translate(0%, -100%);
  left: 0%;
}
.tooltip[data-tooltip-position|="top-left"] .tooltip_arrow {
  transform: translate(0, 0) rotate(180deg);
  left: 8px;
}
.tooltip[data-tooltip-position|="top-right"] {
  transform: translate(0%, -100%);
  left: auto;
  right: 0%;
}
.tooltip[data-tooltip-position|="top-right"] .tooltip_arrow {
  transform: translate(0, 0) rotate(180deg);
  left: auto;
  right: 8px;
}
.tooltip[data-tooltip-position|="bottom"] {
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, 100%);
  margin-top: var(--unit-4);
  animation: tooltipBottomAni 1.5s ease-out infinite forwards;
}
@keyframes tooltipBottomAni {
  0% {
    bottom: -8px;
  }
  50% {
    bottom: -14px;
  }
  100% {
    bottom: -8px;
  }
}
.tooltip[data-tooltip-position|="bottom"] .tooltip_arrow {
  transform: translate(-50%, 0);
  bottom: auto;
  left: 50%;
  top: -5px;
}
.tooltip[data-tooltip-position|="bottom-left"] {
  transform: translate(0%, 100%);
  left: 0%;
}
.tooltip[data-tooltip-position|="bottom-left"] .tooltip_arrow {
  transform: translate(0, 0);
  left: 8px;
}
.tooltip[data-tooltip-position|="bottom-right"] {
  transform: translate(0%, 100%);
  left: auto;
  right: 0%;
}
.tooltip[data-tooltip-position|="bottom-right"] .tooltip_arrow {
  transform: translate(0, 0);
  left: auto;
  right: 8px;
}

.tooltip.type_action {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--unit-8);
  padding: var(--unit-8) var(--unit-8) var(--unit-8) var(--unit-12);
  background-color: var(--gray50);
  border-radius: 8px;
  animation: none;
}
.tooltip.type_action::before {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid var(--gray600);
  content: "";
}
.tooltip.type_action .text_area {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}
.tooltip.type_action .text_area .text {
  color: var(--black800);
}
.tooltip.type_action .text_area .text em {
  color: var(--blue700);
}
.tooltip.type_action .btn_tooltip_close {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  background: url("../images/common/ico_close_black200_16.svg") no-repeat center / contain;
}
.tooltip.type_action .tooltip_arrow {
  width: 8px;
  height: 6px;
  background-image: url("../images/common/arrow_tooltip_white.svg");
  z-index: 1;
}

.tooltip.info {
  background-color: var(--blue200);
}
.tooltip.info .text_area .text {
  color: var(--black700);
}
.tooltip.info.active[data-tooltip-position|="top"] .tooltip_arrow {
  transform: translate(-50%, 0);
  width: auto;
  height: auto;
  border-top: 4px solid var(--blue200);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  background: none;
}
.tooltip.info.active[data-tooltip-position|="bottom"] .tooltip_arrow {
  background-image: url("../images/common/arrow_tooltip_info_top.svg");
}
.tooltip.danger {
  background-color: #ffe3e3;
}
.tooltip.danger .text_area .text {
  color: var(--black700);
}
.tooltip.danger.active[data-tooltip-position|="top"] .tooltip_arrow {
  transform: translate(-50%, 0);
  background-image: url("../images/common/arrow_tooltip_danger_bottom.svg");
}
.tooltip.danger.active[data-tooltip-position|="bottom"] .tooltip_arrow {
  background-image: url("../images/common/arrow_tooltip_danger_top.svg");
}

/* Notification - Toast */
.toast {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-4);
  width: calc(100% - (var(--layout-padding) * 2));
  padding: 13px var(--unit-20);
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.3s;
  z-index: 1;
}
.toast .icon {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
}
.toast .text {
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--gray50);
  text-align: center;
}
.toast.active {
  visibility: visible;
  opacity: 1;
  bottom: var(--unit-16);
}

/* Notification - Snackbar */
.snackbar {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit-16);
  width: calc(100% - (var(--layout-padding) * 2));
  padding: 13px var(--unit-20);
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.3s;
}
.snackbar .text_area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-4);
}
.snackbar .text_area .icon {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
}
.snackbar .text_area .text {
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--gray50);
  text-align: left;
}
.snackbar .button_area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-4);
}
.snackbar .button_area .text {
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--gray50);
  text-align: right;
}
.snackbar .button_area .arrow_icon {
  width: 12px;
  height: 12px;
  background: url("../images/common/arrow_right_gray50_12.svg") no-repeat center / contain;
}
.snackbar.active {
  visibility: visible;
  opacity: 1;
  bottom: var(--unit-16);
}

/* Input */
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 var(--layout-padding);
}
.input_row {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--unit-8);
  width: 100%;
}
.input_row .input_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-2);
  padding: 0 0 0 var(--unit-4);
}
.input_row .input_label .text {
  line-height: 1.35;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--black700);
}
.input_row .input_label .required_star {
  color: var(--red300);
}
.input_row .input_label .icon {
  display: block;
  width: 16px;
  height: 16px;
}
.input_row .input_group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-8);
}
.input_row .hyphen {
  flex: 0 0 auto;
  display: block;
  width: 6px;
  height: 2px;
  background-color: var(--gray700);
}
.input_row .input_cell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit-12);
  width: 100%;
  height: 48px;
  padding: 13px var(--unit-16) 13px var(--unit-20);
  border-radius: 12px;
  background-color: var(--gray200);
  transition: all 0.2s ease-in;
}
.input_row .input_cell::before {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--gray200);
  transition: all 0.2s ease-in;
  content: "";
}
.input_row .input_cell:focus-within {
  background-color: var(--gray50);
}
.input_row .input_cell:focus-within::before {
  border-color: var(--black800);
}
.input_row .input_cell:has(.input_txt:read-only) {
  background-color: var(--gray200);
}
.input_row .input_cell:has(.input_txt:read-only)::before {
  border-color: var(--gray200);
}
.input_row .input_cell:has(.input_txt:disabled) {
  background-color: var(--gray500);
}
.input_row .input_cell:has(.input_txt:disabled)::before {
  border-color: var(--gray500);
}
.input_row .input_cell:has(textarea) {
  align-items: flex-start;
  height: 213px;
  padding: 0;
}
.input_row .input_cell .input_txt {
  position: relative;
  flex: 1;
  width: 100%;
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.input_row .input_cell textarea.input_txt {
  width: 100%;
  height: 100%;
  padding: 13px var(--unit-20);
}
.input_row .input_cell .input_txt:disabled {
  color: var(--gray800);
  -webkit-text-fill-color: var(--gray800);
}
.input_cell .right_area {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-12);
}
.input_cell .right_area button {
  display: none;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.input_cell .right_area .btn_password_show {
  display: block;
  background-image: url("../../assets/images/common/ico_eye_off_20.svg");
}
.input_cell .right_area .btn_password_show.active {
  background-image: url("../../assets/images/common/ico_eye_on_20.svg");
}
.input_cell .right_area .btn_delete {
  background-image: url("../../assets/images/common/ico_delete_20.svg");
}
.input_cell .right_area .btn_delete.active {
  display: block;
}
.input_cell .right_area .countdown {
  margin: 0 var(--unit-4) 0 0;
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--blue800);
  text-align: right;
}
.input_cell .right_area .icon_checkmark {
  display: none;
  width: 20px;
  height: 20px;
  background: url("../images/common/ico_checkmark_20_disabled.svg") no-repeat center / contain;
}
.input_cell .right_area .icon_checkmark.active {
  display: block;
  background: url("../images/common/ico_checkmark_20.svg") no-repeat center / contain;
}
.input_cell .right_area .btn_text {
  margin: 0 var(--unit-4) 0 0;
  display: block;
  text-indent: 0;
  width: auto;
  height: auto;
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--blue800);
}
.input_cell .right_area .btn_text:disabled {
  color: var(--gray800);
}
.input_cell .right_area .btn_search {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("../../assets/images/common/ico_search_black800_24.svg");
}
.input_row .helper_text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-12);
  padding: 0 var(--unit-4);
}
.input_row .helper_text .text {
  line-height: 1.35;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--black100);
}
.input_row .helper_text .c_blue {
  color: var(--blue800);
}
.input_row .helper_text .c_black {
  color: var(--black600);
}
.input_row .helper_text button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-2);
}
.input_row .helper_text .btn_receive .text {
  color: var(--black300);
}
.input_row .helper_text .pw_rule {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-2);
}
.input_row .helper_text .pw_rule.active .text {
  color: var(--blue800);
}
.input_row .helper_text .pw_rule.active svg path {
  stroke: var(--blue800);
}
.input_row .helper_text.counting {
  justify-content: flex-end;
  gap: 0;
}
.input_row .helper_text.counting .text {
  color: var(--gray900);
}
.input_row .helper_text.counting .current.active {
  color: var(--black700);
}
.input_row.error .input_label .text {
  color: var(--red300);
}
.input_row.error .input_cell {
  background-color: var(--gray50);
}
.input_row.error .input_cell::before {
  border-color: var(--red300);
}
.input_row.error .input_cell:focus-within::before {
  border-color: var(--red300);
}
.input_row.error .input_cell .input_txt {
  caret-color: var(--red300);
}
.input_row.error .helper_text.counting .text {
  color: var(--red300);
}

.input_row.type_card_number .input_cell .right_area .icon_checkmark {
  display: block;
}
.input_row.type_card_number .input_cell .right_area .icon_checkmark.active path {
  stroke: #2761ff;
}
.input_row.type_card_number .input_cell .input_txt {
  flex: auto;
  width: calc((100% - 60px) / 4);
}

/* 주민등록번호 Type */
.input_row.type_rrn .rrn01 {
  flex: 0 1 48.3%;
}
.input_row.type_rrn .rrn02 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-10);
}
.input_row.type_rrn .rrn02 .input_cell {
  gap: 0;
  width: 50px;
  padding: var(--unit-16) var(--unit-20);
}
.input_row.type_rrn .rrn02 .input_cell .input_txt {
  text-align: center;
}
.input_row.type_rrn .rrn02 .dot {
  flex: 0 0 auto;
}

/* 원 Type */
.input_row.type_unit .input_cell {
  position: relative;
}
.input_row.type_unit .input_cell .won_input {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
  width: calc(100% - 104px);
  flex-wrap: nowrap;
}
.input_row.type_unit .input_cell .won_input .edit_input {
  overflow: hidden;
  flex: 0 0 auto;
  width: auto;
  max-width: calc(100% - 20px);
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--black800);
  white-space: nowrap;
  border: none;
  outline: none;
  background-color: transparent;
  caret-color: var(--blue800);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-user-select: auto;
  -webkit-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  cursor: text;
}
.input_row.type_unit .input_cell .won_input .edit_input[contenteditable]:empty:before {
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--gray800);
  content: attr(placeholder);
}
.input_row.type_unit .input_cell .won_input .edit_input[contenteditable="false"] {
  cursor: auto;
}
.input_row.type_unit .input_cell .won_input .unit {
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}

/* Input Type Month */
.input_row.type_month .input_cell .input_txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.input_row.type_month .input_cell .month_text {
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--gray800);
}
.input_row.type_month .input_cell .month_text.active {
  color: var(--black800);
}

/* Input 주소 검색 */
.input_row.type_address .input_cell:has(textarea) {
  align-items: center;
  height: 48px;
  padding: 13px var(--unit-16) 13px var(--unit-20);
}
.input_row.type_address .input_cell textarea.input_txt {
  padding: 0;
}
.input_row.type_address .input_cell .right_area .btn_search {
  display: block;
  width: 24px;
  height: 24px;
  background: url("../images/common/ico_search_black800_24.svg") no-repeat center / contain;
}

/* Inputs - Dropdown */
.select_row {
  position: relative;
}
.select_row .input_cell button.input_txt {
  text-align: left;
}
.select_row .input_cell .arrow_down {
  display: block;
  width: 16px;
  height: 16px;
}
.select_row .input_cell:focus-within:has(button.input_txt) {
  background-color: var(--gray200);
}
.select_row .input_cell:focus-within:has(button.input_txt)::before {
  border-color: var(--gray200);
}
.select_row .input_cell button.input_txt:empty:before {
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--gray800);
  content: attr(placeholder);
}

.dropdown_wrap {
  position: absolute;
  bottom: 0;
  transform: translateY(calc(100% + 8px));
  overflow: hidden;
  width: 100%;
  height: 0;
  max-height: 230px;
  padding: 0;
  border-radius: 12px;
  background-color: var(--gray50);
  box-shadow: var(--shadow200);
  z-index: 1;
}
.dropdown_wrap.active {
  display: block;
  height: auto;
  padding: var(--unit-4) 0;
  border: 1px solid var(--gray300);
}
.dropdown_wrap .dropdown_select {
  visibility: hidden;
  opacity: 0;
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 0;
  max-height: 220px;
  z-index: 1;
  -webkit-overflow-scrolling: auto;
  transition: all 0.3s;
}
.dropdown_wrap.active .dropdown_select {
  visibility: visible;
  opacity: 1;
  height: auto;
}
.dropdown_wrap .dropdown_select::-webkit-scrollbar {
  width: 4px;
}
.dropdown_wrap .dropdown_select::-webkit-scrollbar-track {
  background-color: transparent;
}
.dropdown_wrap .dropdown_select::-webkit-scrollbar-thumb {
  background: var(--gray800);
  border-radius: 3px;
}
.dropdown_wrap .dropdown_select .list_item input {
  display: none;
}
.dropdown_wrap .dropdown_select .list_item .txt {
  display: block;
  overflow: hidden;
  height: 44px;
  padding: var(--unit-12) var(--unit-20);
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--black700);
  text-align: left;
  background-color: transparent;
}
.dropdown_wrap .dropdown_select .list_item input:checked + .txt {
  font-weight: vaR(--font-weight-medium);
  background-color: var(--gray200);
}

.hidden_input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Input 사진 첨부 */
.image_file_input {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--unit-8);
  overflow-x: scroll;
  padding: var(--unit-20) 0 0 var(--layout-padding);
}
.image_file_input .input_file {
  border: 1px solid var(--gray400);
  border-radius: 8px;
}
.image_file_input .input_file input[type="file"] {
  display: none;
}
.image_file_input .input_file .label_box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--unit-2);
  width: 100%;
  height: 100%;
}
.image_file_input .input_file .label_box:active::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: var(--pressed-normal);
  content: "";
}
.image_file_input .input_file .label_box .ico {
  display: block;
  width: 24px;
  height: 24px;
  background: url("../images/common/ico_camera_24.svg") no-repeat center / contain;
}
.image_file_input .input_file .label_box .count_num {
  color: var(--black100);
  text-align: center;
}
.image_file_input .input_file .label_box .count_num .current {
  color: var(--black800);
}
.image_file_input .file_box {
  position: relative;
  width: 74px;
  flex: 0 0 auto;
}
.image_file_input .file_box:before {
  display: block;
  padding-top: 100%;
  content: "";
}
.image_file_input .file_box .img_box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid var(--gray300);
}
.image_file_input .file_box .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image_file_input .file_box .btn_delete {
  position: absolute;
  top: -8px;
  right: -8px;
  overflow: hidden;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-indent: -9999px;
  background: url("../images/common/icon_delete_black500_20.svg") no-repeat center / contain;
}

/* Search */
.search_area {
  position: sticky;
  top: var(--nav-h);
  margin: 0 auto;
  width: 100%;
  padding: var(--unit-8) var(--layout-padding);
  background-color: var(--gray50);
  z-index: 1;
}
.search_area .input_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit-6);
  width: 100%;
  height: 40px;
  padding: 9px 14px;
  border-radius: 99px;
  background-color: var(--gray200);
}
.search_area .input_box .search_input {
  width: 100%;
  height: 100%;
  line-height: 1.45;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.search_area .input_box .search_input::placeholder,
.search_area .input_box .search_input::-webkit-input-placeholder {
  color: var(--gray800);
}
.search_area .input_box .right_area {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-8);
}
.search_area .input_box .right_area .btn_delete {
  display: none;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  background: url("../../assets/images/common/ico_delete_20.svg") no-repeat center / contain;
}
.search_area .input_box .right_area .btn_delete.active {
  display: block;
}
.search_area .input_box .right_area .btn_search {
  background: none;
}
.search_area .input_box .right_area .btn_search.active path {
  fill: #1c1c1f;
}

/* List Title */
.list_title {
  padding: 6px 24px;
  background-color: var(--gray50);
}
.list_title .tit {
  color: var(--black800);
}
.list_title.type_c .tit {
  line-height: 1.45;
  font-size: min(var(--font-size-text-xl), 23px);
  font-weight: var(--font-weight-bold);
}
.list_title.type_d {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.list_title.type_d .tit {
  line-height: 1.45;
  font-size: min(var(--font-size-text-xl), 23px);
  font-weight: var(--font-weight-bold);
}
.list_title.type_e {
  position: relative;
  display: flex;
  align-items: center;
  padding: 9px 24px;
}
.list_title.type_e .tit {
  line-height: 1.45;
  font-size: min(var(--font-size-text-sm), 18px);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.list_title.type_e .btn_tooltip {
  margin-left: 4px;
}

/* List */
.list_text {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit-12);
  padding: var(--unit-12) var(--layout-padding);
  background-color: var(--gray50);
  cursor: pointer;
}
.list_text.size_box {
  padding: var(--unit-12) var(--unit-20);
}
.list_text:after {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: var(--unit-4);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - var(--unit-16));
  height: calc(100% - var(--unit-8));
  background-color: var(--pressed-normal);
  border-radius: 8px;
  transition: all 0.2s ease;
  content: "";
}
.list_text:active::after {
  visibility: visible;
  opacity: 1;
}
.list_text.none_pressed {
  cursor: auto;
}
.list_text.none_pressed:active::after {
  visibility: hidden;
  opacity: 0;
}
.list_text.align_top {
  align-items: flex-start;
}
.list_text.align_bottom {
  align-items: flex-end;
}
.list_text .left_area {
  flex: 0 0 auto;
  display: flex;
}
.list_text .left_area img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
}
.list_text .left_area.size_64 {
  width: 64px;
  height: 64px;
}
.list_text .left_area.size_48 {
  width: 48px;
  height: 48px;
}
.list_text .left_area.size_40 {
  width: 40px;
  height: 40px;
}
.list_text .left_area.size_36 {
  width: 36px;
  height: 36px;
}
.list_text .left_area.size_32 {
  width: 32px;
  height: 32px;
}
.list_text .left_area.size_28 {
  width: 28px;
  height: 28px;
}
.list_text .left_area.size_24 {
  width: 24px;
  height: 24px;
}
.list_text .text_area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: var(--unit-2);
  max-width: 100%;
}
.list_text .text_area .heading {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--unit-4);
  max-width: 100%;
}
.list_text .text_area .title {
  color: var(--black800);
}
.list_text .text_area .sub_title {
  color: var(--black300);
}
.list_text .text_area .text {
  color: var(--black300);
}
.list_text .text_area .sub_text {
  margin-top: var(--unit-2);
  color: var(--black100);
}
.list_text .text_area > .tag {
  margin: 0 0 var(--unit-2);
}
.list_text .right_area {
  text-align: right;
}
.list_text .right_area .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-4);
}
.list_text .right_area .icon_sub_text {
  margin: var(--unit-2) 0 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var(--unit-4);
}
.list_text .right_area .icon {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
.list_text .right_area .text {
  color: var(--black800);
}
.list_text .right_area .sub_text {
  color: var(--black300);
}
.list_text .right_area i {
  display: block;
}
.list_text .right_area .arrow_12 {
  width: 12px;
  height: 12px;
  background: url("../../assets/images/common/arrow_right_black800_12.svg") no-repeat center / contain;
}

/* Info Text */
.info_text_wrap {
  display: flex;
  flex-direction: column;
}
.info_text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--unit-8);
  padding: var(--unit-8) var(--layout-padding);
}
.info_text .text_area .title {
  color: var(--black100);
}
.info_text .text_area .text {
  display: block;
  margin: var(--unit-8) 0 0;
  color: var(--black100);
}
.info_text .right_area .text {
  text-align: right;
  color: var(--black800);
}
.info_text .right_area .c_blue {
  color: var(--blue800);
}

/* Checkbox */
.checkbox input {
  display: none;
}
.checkbox .checkbox_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-8);
}
.checkbox .checkbox_label .icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--gray500);
  transition: all 0.3s ease;
}
.checkbox .checkbox_label .text {
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.checkbox.size_s .checkbox_label .icon {
  width: 20px;
  height: 20px;
}
.checkbox.size_s .checkbox_label .text {
  font-size: var(--font-size-text-sm);
}
.checkbox.size_m .checkbox_label .icon {
  width: 24px;
  height: 24px;
}
.checkbox.size_m .checkbox_label .text {
  font-size: var(--font-size-text-md);
}
.checkbox input:checked + .checkbox_label .icon {
  background-color: var(--blue700);
}

/* Checkmark */
.checkmark input {
  display: none;
}
.checkmark .checkmark_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-12);
}
.checkmark .checkmark_label .icon {
  flex: 0 0 auto;
}
.checkmark .checkmark_label .icon path {
  transition: all 0.3s ease;
}
.checkmark.size_s .checkmark_label .icon {
  width: 20px;
  height: 20px;
}
.checkmark.size_m .checkmark_label .icon {
  width: 24px;
  height: 24px;
}
.checkmark input:checked + .checkmark_label .icon path {
  stroke: var(--blue800);
}

/* Control - Radio */
.radio_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--unit-20);
}
.radio_button input {
  display: none;
}
.radio_button .radio_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-8);
}
.radio_button .radio_label .icon {
  position: relative;
  overflow: hidden;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--gray500);
  transition: all 0.3s;
}
.radio_button .radio_label .icon::after {
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background-color: var(--pressed-color);
  transition: all 0.2s ease;
  content: "";
}
.radio_button .radio_label .icon::before {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gray50);
  content: "";
}
.radio_button .radio_label .text {
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--black800);
}
.radio_button input:not(:disabled) + .radio_label:active .icon::after {
  visibility: visible;
  opacity: 1;
}
.radio_button input:disabled + .radio_label .icon {
  background-color: var(--gray200);
}
.radio_button input:checked + .radio_label .icon {
  background-color: var(--blue600);
}

/* Control - Switch */
.switch_box input {
  display: none;
}
.switch_box .label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-8);
}
.switch_box .label .txt {
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--black900);
}
.switch_box .label .toggle {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background-color: var(--gray500);
  transition: all 0.3s ease-in-out;
}
.switch_box .label .toggle .circle {
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background-color: var(--gray50);
  border-radius: 50%;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out;
}
.switch_box .label .toggle::after {
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background-color: var(--pressed-color);
  transition: all 0.2s ease;
  content: "";
}
.switch_box .label .toggle:active::after {
  visibility: visible;
  opacity: 1;
}
.switch_box input:checked + .label .toggle {
  background-color: var(--blue600);
}
.switch_box input:checked + .label .toggle .circle {
  left: 22px;
}
.switch_box.size_s .label .toggle {
  width: 38px;
  height: 22px;
}
.switch_box.size_s .label .toggle .circle {
  width: 18px;
  height: 18px;
}
.switch_box.size_s input:checked + .label .toggle .circle {
  left: 18px;
}

/* Select Box */
.selectbox {
  width: 100%;
}
.selectbox input {
  display: none;
}
.selectbox .label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--gray200);
  background-color: var(--gray200);
}
.selectbox .label .text {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  color: var(--black600);
}
.selectbox .label .icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.selectbox input:checked + .label {
  border-color: var(--blue800);
  background-color: var(--blue100);
}
.selectbox input:checked + .label .text {
  font-weight: var(--font-weight-semibold);
  color: var(--blue700);
}
.selectbox.type_checkbox .label .icon {
  background-image: url("../../assets/images/common/ico_checkbox_gray50_20.svg");
}
.selectbox.type_checkbox input:checked + .label .icon {
  background-image: url("../../assets/images/common/ico_checkbox_blue700_20.svg");
}
.selectbox.type_checkbox.negative input:checked + .label {
  border-color: var(--red300);
  background-color: var(--red50);
}
.selectbox.type_checkbox.negative input:checked + .label .text {
  color: var(--red300);
}
.selectbox.type_checkbox.negative input:checked + .label .icon {
  background-image: url("../../assets/images/common/ico_redclose_20.svg");
}
.selectbox.type_checkmark .label .icon {
  background-image: url("../../assets/images/common/ico_checkmark_20_disabled.svg");
}
.selectbox.type_checkmark input:checked + .label .icon {
  background-image: url("../../assets/images/common/ico_checkmark_20.svg");
}
.selectbox.type_radio .label .icon {
  background-image: url("../../assets/images/common/ico_radio_20_enabled.svg");
}
.selectbox.type_radio input:checked + .label .icon {
  background-image: url("../../assets/images/common/ico_radio_20_selected.svg");
}

/* Pagination */
.dot_paging {
  margin: 10px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--unit-6);
}
.dot_paging .dot {
  opacity: 0.2;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--black400);
  transition: all 0.3s ease-in-out;
}
.dot_paging .dot.active {
  opacity: 1;
  background-color: var(--black600);
}
.dot_paging.c_white .dot {
  opacity: 0.4;
  background-color: var(--gray50);
}
.dot_paging.c_white .dot.active {
  opacity: 1;
  background-color: var(--gray50);
}
.number_paging {
  position: absolute;
  bottom: 10px;
  right: 10px;
  left: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  z-index: 1;
}
.number_paging .fraction {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1px var(--unit-4);
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);
}
.number_paging span {
  display: block;
  min-width: 7px;
  line-height: 1.35;
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  text-align: center;
}
.number_paging .current {
  color: var(--gray50);
}
.number_paging .total {
  color: var(--gray600);
}
.number_paging .slash {
  min-width: 4px;
  color: var(--gray600);
}

/* Progress Indicator */
.progress_track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3px;
  background: var(--gray300);
}
.progress_track .indicator {
  width: 0%;
  height: 100%;
  background-color: var(--blue600);
  transition: all 0.6s linear;
}
.step_indicator {
  position: absolute;
  top: 24px;
  right: var(--layout-padding);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-6);
}
.step_indicator .number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--black50);
  background-color: var(--gray400);
  border-radius: 50%;
}
.step_indicator .number.active {
  color: var(--gray50);
  background-color: var(--blue600);
}

/* 이미지 배너 스와이프 */
.bnn_swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--layout-padding);
}
.bnn_swiper .img_box {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.bnn_swiper .img_box::before {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pressed-img);
  transition: all 0.3s;
  content: "";
}
.bnn_swiper .img_box:active::before {
  visibility: visible;
  opacity: 1;
}
.bnn_swiper .img_box img {
  display: block;
  width: 100%;
}
.bnn_swiper .number_paging {
  right: calc(var(--layout-padding) + 14px);
}

/* notice Template */
.notice_box_contents {
  margin: 0 auto;
  width: calc(100% - 48px);
  padding: 20px;
  background-color: var(--gray200);
  border-radius: 8px;
}
.notice_box_contents .title {
  display: block;
  margin: 0 0 8px;
  line-height: 1.45;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
}
.notice_box_contents .list .txt {
  position: relative;
  padding: 0 0 0 8px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  color: var(--black400);
}
.notice_box_contents .list .txt::before {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  color: var(--black400);
  content: "∙";
}
.notice_box_contents .list .txt + .txt {
  margin: 4px 0 0;
}
.notice_box_contents .list .txt.c_black {
  color: var(--black600);
}
.notice_box_contents .list .txt .c_blue {
  color: var(--blue700);
}

/* 본인인증 polling page */
.polling_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.naver_auth {
  transform: translateY(-24px);
  text-align: center;
}
.naver_auth .ico {
  display: block;
  margin: 0 auto;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.naver_auth .ico.success {
  background-image: url("../images/common/check_circle_L.png");
}
.naver_auth .ico.failure {
  background-image: url("../images/common/warn_L_fill.png");
}
.naver_auth .tit {
  display: block;
  margin: 18px 0 0;
  line-height: 1.4;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--black800);
}
.naver_auth .txt {
  margin: 12px 0 0;
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  color: var(--black400);
}

/* 꼭 확인해주세요 */
.dropdown_disclaimer {
  padding: var(--unit-16) var(--unit-28);
}
.dropdown_disclaimer .title_area {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dropdown_disclaimer .title_area .title {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
}
.dropdown_disclaimer .title_area .btn_dropdown {
  width: 16px;
  height: 16px;
  background: url("../images/common/arrow_up_black800_16.svg") no-repeat center / contain;
  transform: rotate(180deg);
  transition: all 0.3s;
}
.dropdown_disclaimer .contents_area {
  overflow: hidden;
  opacity: 0;
  height: 0;
  padding: 0;
  transition: all 0.3s;
}
.dropdown_disclaimer .contents_area .list {
  display: flex;
  flex-direction: column;
  gap: var(--unit-4);
}
.dropdown_disclaimer .contents_area .list .text {
  position: relative;
  padding: 0 0 0 6px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black600);
}
.dropdown_disclaimer .contents_area .list .text::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 6px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black400);
  content: "·";
}
.dropdown_disclaimer.active {
  display: flex;
  flex-direction: column;
  gap: var(--unit-16);
}
.dropdown_disclaimer.active .title_area .btn_dropdown {
  transform: rotate(0);
}
.dropdown_disclaimer.active .contents_area {
  opacity: 1;
  height: auto;
}

.disclaimer_box {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: calc(100% - (var(--layout-padding) * 2));
  padding: 20px;
  border-radius: 12px;
  background-color: var(--gray100);
}
.disclaimer_box .text_area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.disclaimer_box .text_area .title {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
}
.disclaimer_box .title_area {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.disclaimer_box .title_area .title {
  line-height: 1.45;
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--black700);
}
.disclaimer_box .title_area .btn_dropdown {
  width: 16px;
  height: 16px;
  background: url("../images/common/arrow_up_black800_16.svg") no-repeat center / contain;
  transform: rotate(180deg);
  transition: all 0.3s;
}
.disclaimer_box .text_area .desc {
  color: var(--black600);
  word-break: break-all;
}
.disclaimer_box .contents_area {
  overflow: hidden;
  height: 0;
}
.disclaimer_box .contents_area .list {
  display: flex;
  flex-direction: column;
  gap: var(--unit-4);
}
.disclaimer_box .contents_area .list .text {
  position: relative;
  padding: 0 0 0 6px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black600);
}
.disclaimer_box .contents_area .list .text .c_blue {
  color: var(--blue800);
}
.disclaimer_box .contents_area .list .text::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 6px;
  line-height: 1.45;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black400);
  content: "·";
}
.disclaimer_box .btn_area {
  margin: 18px 0 0;
}
.disclaimer_box .btn_link_text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.disclaimer_box .btn_link_text .text {
  color: var(--blue800);
}
.disclaimer_box .btn_link_text .arrow_right {
  width: 12px;
  height: 12px;
  background: url("../images/common/arrow_right_blue800_12.svg") no-repeat center / contain;
}
.disclaimer_box.active .title_area .btn_dropdown {
  transform: rotate(0);
}
.disclaimer_box.active .contents_area {
  height: auto;
  padding: var(--unit-8) 0 0;
}

/* 신청, 결제 등 완료 페이지 */
.complete_wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 86px);
}
.complete_wrap .content_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--unit-16);
  flex: 1;
}
.complete_wrap .content_area .check_motion {
  margin: 0 auto;
  width: 40px;
  height: 40px;
}
.complete_wrap .content_area .icon {
  margin: 0 auto;
  width: 40px;
  height: 40px;
}
.complete_wrap .content_area .text_area {
  display: flex;
  flex-direction: column;
  gap: var(--unit-10);
  text-align: center;
}
.complete_wrap .content_area .text_area .title {
  color: var(--black800);
}
.complete_wrap .content_area .text_area .body_text {
  color: var(--black200);
}
.complete_wrap .content_area .text_area .c_blue {
  color: var(--blue600);
}
.complete_wrap .content_area .amount_sub_text {
  display: flex;
  flex-direction: column;
  gap: var(--unit-6);
  text-align: center;
}
.complete_wrap .content_area .amount_sub_text .amount {
  color: var(--black800);
}
.complete_wrap .content_area .amount_sub_text .sub_text {
  color: var(--black400);
}
.complete_wrap .info_text_wrap .info_text {
  padding: 8px calc(var(--layout-padding) + 8px);
}

/* Empty 화면 */
/* 컨텐츠 영역 50% 이하 하단 여백 40px, 50% 이상 100px */
.empty_wrap {
  display: flex;
  flex-direction: column;
}
.empty_wrap .list_none {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.empty_wrap .list_none .txt_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--unit-12);
  padding: 0 0 100px;
}
.empty_wrap .list_none .txt_box .icon {
  display: block;
  width: 100px;
  height: 100px;
  background: url("../images/common/ico_emptyhistory_100.png") no-repeat center / contain;
}
.empty_wrap .list_none .txt_box .text {
  color: var(--black200);
  text-align: center;
}
.empty_wrap.type_short .list_none .txt_box {
  padding: 0 0 40px;
}

/* Iconography */
.ico {
  position: relative;
  display: block;
}
.ico svg {
  display: block;
}
.ico.size_12 {
  width: 12px;
  height: 12px;
}
.ico.size_16 {
  width: 16px;
  height: 16px;
}
.ico.size_20 {
  width: 20px;
  height: 20px;
}
.ico.size_24 {
  width: 24px;
  height: 24px;
}
.ico_info:before,
.ico_warning:before,
.ico_question:before {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
  content: "";
}
.ico_info:active:before,
.ico_warning:active:before,
.ico_question:active:before {
  visibility: visible;
  opacity: 1;
}

/* free slide */
.fs_container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.fs_wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: content-box;
  cursor: grab;
}
.fs_item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

@media screen and (max-width: 320px) {
  :root {
    --layout-padding: 16px;
    --layout-gap: 12px;
    --navigation-layout-left: 8px;
    --navigation-layout-right: 16px;
  }

  .popup_wrap {
    max-width: 260px;
  }
}

@media screen and (min-width: 321px) and (max-width: 599px) {
  :root {
    --layout-padding: 20px;
    --layout-gap: 12px;
    --navigation-layout-left: 12px;
    --navigation-layout-right: 20px;
  }

  .popup_wrap {
    max-width: 296px;
  }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  :root {
    --layout-padding: 24px;
    --layout-gap: 16px;
    --navigation-layout-left: 16px;
    --navigation-layout-right: 24px;
  }

  .popup_wrap {
    max-width: 340px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --layout-padding: 24px;
    --layout-gap: 16px;
    --navigation-layout-left: 16px;
    --navigation-layout-right: 24px;
  }

  .popup_wrap {
    max-width: 340px;
  }
}