: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.60);
  --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.10);
  --shadow300-gnb: 0px -8px 20px 0px rgba(100, 107, 119, 0.10);
  
  /* 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: 2.0rem;
  --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: 56px;
  --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 {
  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(--gray300);
}
.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 .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 {
  background-image: url('../images/common/ico_avatarframe_24.svg');
}
.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 30px;
}
.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_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.00) 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;
}

/* 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 .2s ease;
  transition: transform .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;
  line-height: 1.45;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--black100);
  text-align: center;
  -webkit-transition: all .2s ease;
  transition: all .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.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.00) 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;
}

/* 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.00) 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 .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-sm);
  font-weight: var(--font-weight-regular);
  color: var(--black200);
  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.00) 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);
}

/* 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;
}



.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: var(--unit-28);
}
.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 var(--unit-8);
  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.35;
  font-size: var(--font-size-text-xs);
  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.35;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--blue700);
}
.terms_modal .section .article_list li .txt {
  flex: 1;
  line-height: 1.35;
  font-size: var(--font-size-text-xs);
  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: var(--unit-10) 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-caption-sm);
  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-caption-sm);
  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-caption-sm);
  font-weight: var(--font-weight-medium);
  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.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 {
  color: var(--black700);
}
.terms_modal .section .text {
  color: var(--black700);
}
.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: 4px;
}
.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 .text_list span {
  position: relative;
  display: block;
  padding: 0 0 0 14px;
  color: var(--black200);
}
.terms_modal .section .text_list span::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  color: var(--black200);
  text-align: center;
  content: '-';
}


.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;
  padding: 15px var(--unit-20);
  background-color: var(--gray200);
  border-radius: 16px;
}
.agree_wrap .all_agree_area .checkmark_label {
  gap: var(--unit-8)
}
.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 .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;
}

/* 서비스 약관 동의 (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.40;
  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.c_blue {
  color: var(--blue800);
}
.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.80);
  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.80);
  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 .input_cell {
  width: 145px;
}
.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(--gray800);
}

/* 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_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.40);
}
.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;  
}
.progress_step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--unit-6);  
}
.progress_step .number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--black50);
  background-color: var(--gray400);
  border-radius: 50%;
}
.progress_step .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: 8px;
  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 .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 .body_text.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);
}

.compl_wrap .bottom_text {
  padding: 0 0 20px;
  text-align: center;
}
.compl_wrap .bottom_text .txt {
  line-height: 1.45;
  font-size: var(--font-size-text-xs);
  color: var(--black100);
}
.compl_wrap .bnn_area img {
  display: block; 
  width: 100%;
}

/* 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;
}


@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;
  }
}

@media all and (max-width: 767px) {
    html {font-size: 62.5%;}
}

@media all and (max-width: 360px) {
    html {font-size: 62.5%;}
}

@media all and (max-width: 320px) {
	html {font-size: 62.5%;}
}

@media all and (max-width: 280px) {
	html {font-size: 62.5%;}
}