@charset "UTF-8";
@import './tokens.css';
@import './common.css';
@import './fullmenu.css';
@import './content.css';
@import './accessibility.css';
/* css 불러오는 순서 지켜주세요 */

/* ---- 공통 설정 ---- */
:root {
  --font-family-base: var(--typo-font-type);
  --fs-base: 62.5%;
  --fs-base: 16px;
  --line-height-none: 1;
  --line-height-base: 1.5;
  --letter-spacing-none: var(--typo-letter-spacing-0);
  --letter-spacing-wide: var(--typo-letter-spacing-1);
  --typo-weight-regular: 400;
  --typo-weight-bold: 700;
  --transition-base: 0.4s ease-in-out;
  --transition-fade: opacity 0.4s linear;
  --transition-collapse: max-height 0.4s ease;
  --transition-collapse-width: width 0.4s ease;
  --contents-size: 1520px;
  --contents-padding-x: 24px;
  --contents-wrap-size: 1520px;
  --box-shadow-outline: 0 0 0 4px var(--border-primary);
  --box-shadow-outline-inset: inset 0 0 0 2px var(--border-primary);
  --font-underline-offset: 3px;
  --icon--size-xsmall: var(--size-height-2);
  --icon--size-small: var(--size-height-2);
  --icon--size-medium: var(--size-height-3);
  --icon--size-large: var(--size-height-4);
  --icon--size-xlarge: var(--size-height-4);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 20px);

}

@media (max-width: 1023px) {
  :root {
    --contents-padding-x: 16px;
  }
}

/* ---- 기본 설정 ---- */
.ff-aggro {
  font-family: 'SBAggro', Pretendard, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ff-aggro.ff-light {
  font-weight: 300;
}

.ff-aggro.ff-medium {
  font-weight: 400;
}

#wrap {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 100%;
}

.inner {
  --container-max: var(--contents-wrap-size, 1520px);
  --container-pad: var(--gap-4);
  box-sizing: border-box;
  width: min(100% - 2 * var(--container-pad), var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.inner.narrow {
  --container-max: 792px;
}

#container>.inner {
  min-height: 600px;
}

#container>.inner:not(.in-between) {
  padding-bottom: var(--pc-gap-contents-footer);
}

.content-area {
  margin-bottom: var(--number-19);
}

/* 모바일 */
@media (max-width: 767px) {
  .inner {
    --container-pad: var(--gap-3);
  }

  #container>.inner {
    min-height: 500px;
  }

  #container>.inner:not(.in-between) {
    padding-bottom: var(--mobile-gap-contents-footer);
  }

  .content-area {
    margin-bottom: var(--number-14);
  }
}

.scroll-no {
  overflow: hidden;
}

/* ---- 폼 ---- */
.sch-form-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--gap-5);
}

.sch-form-wrap.vert {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.sch-input {
  display: flex;
  position: relative;
}

.sch-form-wrap.vert .sch-input {
  width: 100%;
}

.sch-input .custom-input.xlarge {
  font-weight: var(--typo-weight-bold);
  padding: 0 4.5rem 0 var(--padding-8);
}

.w-hide {
  display: none !important;
}

@media (max-width: 767px) {
  .m-hide {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .w-hide {
    display: block !important;
  }
}

/* ---- 아이콘 ---- */
.svg-icon.ico-send {
  background-image: url(../images/component/icon/ico_send_arrow.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-angle {
  background-image: url(../images/component/icon/ico_angle.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-angle.disabled {
  background-image: url(../images/component/icon/ico_angle_disabled.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-mypage {
  background: url(../images/component/icon/ico_my.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-menu {
  background: url(../images/component/icon/ico_all.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-angle.up {
  transform: rotate(180deg);
}

.svg-icon.ico-angle.left {
  transform: rotate(90deg);
}

.svg-icon.ico-angle.right {
  transform: rotate(-90deg);
}

.svg-icon.ico-sch {
  background-image: url(../images/component/icon/ico_search.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-sch--blue {
  background-image: url(../images/component/icon/ico_search_blue.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-sch--wh {
  background-image: url(../images/component/icon/ico_search_wh.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-upload {
  background-image: url(../images/component/icon/ico_upload.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-excel {
  background-image: url(../images/component/icon/ico_excel.png);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-call {
  background-image: url(../images/component/icon/ico_call.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-faq {
  background-image: url(../images/component/icon/ico_faq.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-like {
  background-image: url(../images/component/icon/ico_like.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-share {
  background-image: url(../images/component/icon/ico_share.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-more {
  background-image: url(../images/component/icon/ico_more.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-sch-plus {
  background-image: url(../images/component/icon/ico_sch_plus.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-go {
  background-image: url(../images/component/icon/ico_go.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-down {
  background-image: url(../images/component/icon/ico_download.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-down--blue {
  background-image: url(../images/component/icon/ico_download_blue.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-down--wh {
  background-image: url(../images/component/icon/ico_download_wh.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-filter {
  background-image: url(../images/component/icon/ico_filter.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-reset {
  background-image: url(../images/component/icon/ico_reset.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-log {
  background-image: url(../images/component/icon/ico_login.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-func {
  background-image: url(../images/component/icon/ico_expand.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-func.up {
  transform: rotate(-90deg);
}

.svg-icon.ico-func {
  gap: var(--gap-3);
}

.svg-icon.ico-logout {
  background-image: url(../images/component/icon/ico_logout.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-logout {
  gap: var(--gap-3);
}

.svg-icon.ico-login {
  background-image: url(../images/component/icon/ico_login.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login {
  gap: var(--gap-3);
}

.svg-icon.ico-join {
  background-image: url(../images/component/icon/ico_join.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-join {
  gap: var(--gap-3);
}

.svg-icon.ico-email {
  background-image: url(../images/component/icon/ico_email.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-email {
  gap: var(--gap-3);
}

.svg-icon.ico-print {
  background-image: url(../images/component/icon/ico_print.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-print {
  gap: var(--gap-3);
}

.svg-icon.ico-scrap {
  background-image: url(../images/component/icon/ico_scrap.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-scrap {
  gap: var(--gap-3);
}

.svg-icon.ico-del {
  background-image: url(../images/component/icon/ico_delete.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-del {
  gap: var(--gap-3);
}

.svg-icon.ico-close {
  background-image: url(../images/component/icon/ico_close.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-popup-close {
  background-image: url(../images/component/icon/ico_pop_close.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-popup-close--wh {
  background-image: url(../images/component/icon/ico_close_pop_wh.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-delete-fill {
  background-image: url(../images/component/icon/ico_delete_fill.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-minus--red {
  background-image: url(../images/component/icon/ico_minus_red.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-plus {
  background-image: url(../images/component/icon/ico_plus.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-plus {
  gap: var(--gap-3);
}

.svg-icon.ico-plus--blue {
  background-image: url(../images/component/icon/ico_plus_blue.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-plus--wh {
  background-image: url(../images/component/icon/ico_plus_wh.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-plus--blue,
.svg-icon.ico-plus--wh {
  gap: var(--gap-3);
}

.svg-icon.ico-setting {
  background-image: url(../images/component/icon/ico_setting.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-setting {
  gap: var(--gap-3);
}

.svg-icon.ico-time {
  background-image: url(../images/component/icon/ico_time.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-time {
  gap: var(--gap-3);
}

.svg-icon.ico-link {
  background-image: url(../images/component/icon/ico_go.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-link {
  gap: var(--gap-3);
}

.svg-icon.ico-refresh {
  background-image: url(../images/component/icon/ico_reset.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-toggle {
  background-image: url(../images/component/icon/ico_angle.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-pw-visible {
  background-image: url(../images/component/icon/ico_pw_visible_off.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-pw-visible-on {
  background-image: url(../images/component/icon/ico_pw_visible_on.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-help {
  background-image: url(../images/component/icon/ico_help.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-page-next {
  background-image: url(../images/component/icon/ico_angle.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
  transform: rotate(-90deg);
}

.svg-icon.ico-bread-home {
  background-image: url(../images/component/icon/ico_bread_home.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-cal-move {
  background-image: url(../images/component/icon/ico_arrow_dropdown.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-calendar {
  background-image: url(../images/component/icon/ico_calendar.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-success-fill {
  background-image: url(../images/component/icon/ico_success_fill.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-information-fill {
  background-image: url(../images/component/icon/ico_information_fill.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-error-fill {
  background-image: url(../images/component/icon/ico_error_fill.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-complete-fill {
  background-image: url(../images/component/icon/ico_complete_fill.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-modal-close {
  background-image: url(../images/component/icon/ico_close.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-fold {
  background-image: url(../images/component/icon/ico_foldable.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-fold.right {
  transform: rotate(-180deg);
}

.svg-icon.ico-ellipsis {
  background-image: url(../images/component/icon/ico_ellipsis.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-swiper-play {
  background-image: url(../images/component/icon/ico_swiper_play.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-swiper-stop {
  background-image: url(../images/component/icon/ico_swiper_stop.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-tooltip {
  background-image: url(../images/component/icon/ico_tooltip.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-urgent-danger {
  background-image: url(../images/component/icon/ico_urgent_badge_danger.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-blog {
  background-image: url(../images/component/icon/ico_blog.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-facebook {
  background-image: url(../images/component/icon/ico_facebook.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-instagram {
  background-image: url(../images/component/icon/ico_instagram.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-sns-x {
  background-image: url(../images/component/icon/ico_sns_x.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-youtube {
  background-image: url(../images/component/icon/ico_youtube.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-all {
  background-image: url(../images/component/icon/ico_all.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-join {
  background-image: url(../images/component/icon/ico_join.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-my {
  background-image: url(../images/component/icon/ico_my.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login-go {
  background-image: url(../images/component/icon/ico_login_certify_go.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-global {
  background-image: url(../images/component/icon/ico_global.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-view-mode {
  background-image: url(../images/component/icon/ico_view_mode.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-go-top {
  background-image: url(../images/component/icon/ico_go_top.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login-type01 {
  background-image: url(../images/component/icon/ico_login_certify_type_01.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login-type02 {
  background-image: url(../images/component/icon/ico_login_certify_type_02.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login-type03 {
  background-image: url(../images/component/icon/ico_login_certify_type_03.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login-type04 {
  background-image: url(../images/component/icon/ico_login_certify_type_04.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login-type05 {
  background-image: url(../images/component/icon/ico_login_certify_type_05.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-login-type06 {
  background-image: url(../images/component/icon/ico_login_certify_type_06.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-flag {
  background-image: url(../images/component/icon/ico_flag.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-file {
  background-image: url(../images/component/icon/ico_file.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-checkbox {
  background-image: url(../images/component/icon/ico_checkbox_checked.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-checkbox--wh {
  background-image: url(../images/component/icon/ico_checkbox_checked_wh.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-checkbox--gray {
  background-image: url(../images/component/icon/ico_checkbox_checked_gray.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-save--wh {
  background-image: url(../images/component/icon/ico_save_wh.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-save {
  background-image: url(../images/component/icon/ico_save_blue.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-apply {
  background-image: url(../images/component/icon/ico_apply.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-edit {
  background-image: url(../images/component/icon/ico_edit.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

button:hover .svg-icon.ico-edit {
  background-image: url(../images/component/icon/ico_edit_on.svg);
}

.svg-icon.ico-edit--blue {
  background-image: url(../images/component/icon/ico_edit_blue.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

button:hover .svg-icon.ico-edit--blue {
  background-image: url(../images/component/icon/ico_edit_blue_on.svg);
}

.svg-icon.ico-issuance {
  background-image: url(../images/component/icon/ico_checked_wh.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

.svg-icon.ico-link {
  background-image: url(../images/component/icon/ico_link.svg);
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
}

/* ---- 버튼 / 링크 ---- */
/* icon 버튼 사이즈 */
.btn {
  --button-size-height-xsmall: var(--size-height-5);
  --button-padding-x-xsmall: var(--padding-4);
  --button-padding-y-xsmall: 0;
  --button-gap-xsmall: var(--gap-1);
  --button-radius-xsmall: var(--radius-xsmall);
  --button-pc-fs-xsmall: var(--pc-fs-label-small);
  --button-mobile-fs-xsmall: var(--mobile-fs-label-small);
  --button-font-weight-xsmall: var(--typo-weight-regular);
  --button-size-height-small: var(--size-height-6);
  --button-padding-x-small: var(--padding-5);
  --button-padding-y-small: 0;
  --button-gap-small: var(--gap-1);
  --button-radius-small: var(--radius-small);
  --button-pc-fs-small: var(--pc-fs-label-medium);
  --button-mobile-fs-small: var(--mobile-fs-label-small);
  --button-font-weight-small: var(--typo-weight-regular);
  --button-size-height-medium: var(--size-height-7);
  --button-padding-x-medium: var(--padding-6);
  --button-padding-y-medium: 0;
  --button-gap-medium: var(--gap-2);
  --button-radius-medium: var(--radius-medium);
  --button-pc-fs-medium: var(--pc-fs-label-medium);
  --button-mobile-fs-medium: var(--mobile-fs-label-medium);
  --button-font-weight-medium: var(--typo-weight-regular);
  --button-size-height-large: var(--size-height-8);
  --button-padding-x-large: var(--padding-7);
  --button-padding-y-large: 0;
  --button-gap-large: var(--gap-2);
  --button-radius-large: var(--radius-large);
  --button-pc-fs-large: var(--pc-fs-label-large);
  --button-mobile-fs-large: var(--mobile-fs-label-large);
  --button-font-weight-large: var(--typo-weight-regular);
  --button-size-height-xlarge: var(--size-height-9);
  --button-padding-x-xlarge: var(--padding-8);
  --button-padding-y-xlarge: 0;
  --button-gap-xlarge: var(--gap-2);
  --button-radius-xlarge: var(--radius-xlarge);
  --button-pc-fs-xlarge: var(--pc-fs-label-large);
  --button-mobile-fs-xlarge: var(--mobile-fs-label-large);
  --button-font-weight-xlarge: var(--typo-weight-regular);

  gap: var(--button-gap-large);
  height: var(--button-size-height-large);
  padding: var(--button-padding-y-large) var(--button-padding-x-large);
  border-radius: var(--button-radius-large);
  font-size: var(--button-pc-fs-large);
  font-weight: var(--button-font-weight-large);
}

@media (max-width: 767px) {
  .btn {
    font-size: var(--button-mobile-fs-large);
  }
}

.btn .svg-icon {
  width: var(--icon--size-large);
  height: var(--icon--size-large);
}

@media (max-width: 767px) {
  .btn.xsmall {
    font-size: var(--button-mobile-fs-xsmall);
  }
}

.btn.xsmall .svg-icon {
  width: var(--icon--size-xsmall);
  height: var(--icon--size-xsmall);
}

.btn.xsmall .svg-icon {
  width: var(--icon--size-xsmall);
  height: var(--icon--size-xsmall);
}

.btn.xsmall {
  font-size: var(--button-pc-fs-small);
  font-weight: var(--button-font-weight-small);
  gap: var(--button-gap-small);
  height: var(--button-size-height-xsmall);
  padding: var(--button-padding-y-small) var(--button-padding-x-small);
  border-radius: var(--button-radius-small);
  font-weight: var(--button-font-weight-small);
}

.btn.small {
  gap: var(--button-gap-small);
  height: var(--button-size-height-small);
  padding: 16px 20px;
  border-radius: var(--button-radius-small);
  font-size: var(--button-pc-fs-small);
  font-weight: var(--button-font-weight-small);
}

.btn.small .svg-icon {
  width: var(--icon--size-small);
  height: var(--icon--size-small);
}

@media (max-width: 767px) {
  .btn.small {
    gap: var(--button-gap-small);
    height: var(--button-size-height-small);
    padding: var(--button-padding-y-xsmall) var(--button-padding-x-small);
    border-radius: var(--button-radius-small);
    font-size: var(--button-pc-fs-xsmall);
  }
}

.btn.medium {
  gap: var(--button-gap-medium);
  height: var(--button-size-height-medium);
  padding: var(--button-padding-y-medium) var(--button-padding-x-medium);
  border-radius: var(--button-radius-medium);
  font-size: var(--button-pc-fs-medium);
  font-weight: var(--button-font-weight-medium);
}

.btn.medium .svg-icon {
  width: var(--icon--size-medium);
  height: var(--icon--size-medium);
}

.btn.large {
  gap: var(--button-gap-large);
  height: var(--button-size-height-large);
  padding: var(--button-padding-y-large) var(--button-padding-x-large);
  border-radius: var(--button-radius-large);
  font-size: var(--button-pc-fs-large);
  font-weight: var(--button-font-weight-large);
}

@media (max-width: 767px) {
  .btn.large {
    font-size: var(--button-mobile-fs-large);
  }
}

.btn.large .svg-icon {
  width: var(--icon--size-large);
  height: var(--icon--size-large);
}

.btn.xlarge {
  gap: var(--button-gap-xlarge);
  height: var(--button-size-height-xlarge);
  padding: var(--button-padding-y-xlarge) var(--button-padding-x-xlarge);
  border-radius: var(--button-radius-xlarge);
  font-size: var(--button-pc-fs-xlarge);
  font-weight: var(--button-font-weight-xlarge);
}

@media (max-width: 767px) {
  .btn.xlarge {
    font-size: var(--button-mobile-fs-xlarge);
  }
}

.btn.xlarge .svg-icon {
  width: var(--icon--size-xlarge);
  height: var(--icon--size-xlarge);
}

.btn {
  /* Primary */
  --button-color-primary-fill: var(--button-primary-fill);
  --button-color-primary-fill-hover: var(--button-primary-fill-hover);
  --button-color-primary-fill-pressed: var(--button-primary-fill-pressed);
  --button-color-primary-fill-disabled: var(--button-disabled-fill);
  --button-color-primary-border: var(--button-primary-border);
  --button-color-primary-border-disabled: var(--button-disabled-border);
  --button-color-primary-text: var(--button-primary-text);
  --button-color-primary-text-disabled: var(--button-disabled-text-on);

  /* Secondary */
  --button-color-secondary-fill: var(--button-secondary-fill);
  --button-color-secondary-fill-hover: var(--button-secondary-fill-hover);
  --button-color-secondary-fill-pressed: var(--button-secondary-fill-pressed);
  --button-color-secondary-fill-disabled: var(--button-disabled-fill);
  --button-color-secondary-border: var(--button-secondary-border);
  --button-color-secondary-border-disabled: var(--button-disabled-border);
  --button-color-secondary-text: var(--button-secondary-text);
  --button-color-secondary-text-disabled: var(--button-disabled-text-on);

  /* Tertiary (회색 실색) */
  --button-color-tertiary-fill: var(--button-tertiary-fill);
  --button-color-tertiary-fill-hover: var(--button-tertiary-fill-hover);
  --button-color-tertiary-fill-pressed: var(--button-tertiary-fill-pressed);
  --button-color-tertiary-fill-disabled: var(--button-disabled-fill);
  --button-color-tertiary-border: var(--button-tertiary-border);
  --button-color-tertiary-border-disabled: var(--button-disabled-border);
  --button-color-tertiary-text: var(--button-tertiary-text);
  --button-color-tertiary-text-disabled: var(--button-disabled-text-on);

  /* Text / Link */
  --button-color-text-fill: var(--button-text-fill);
  --button-color-text-fill-hover: var(--button-text-fill-hover);
  --button-color-text-fill-pressed: var(--button-text-fill-pressed);
  --button-color-text-fill-disabled: var(--button-text-fill);
  --button-color-text-border: var(--button-text-border);
  --button-color-text-border-disabled: var(--border-transparency);
  --button-color-text-text: var(--text-basic);
  --button-color-text-text-disabled: var(--text-disabled);

  --button-color-link-fill: var(--button-text-fill);
  --button-color-link-fill-hover: var(--button-text-fill);
  --button-color-link-fill-pressed: var(--button-text-fill);
  --button-color-link-fill-disabled: var(--button-text-fill);
  --button-color-link-border: var(--button-text-border);
  --button-color-link-border-disabled: var(--border-transparency);
  --button-color-link-text: var(--button-link-text);
  --button-color-link-text-disabled: var(--text-disabled);

  /* Outline - Primary */
  --button-color-outline-primary-fill: var(--button-outline-primary-fill);
  --button-color-outline-primary-border: var(--button-outline-primary-border);
  --button-color-outline-primary-text: var(--button-outline-primary-text);
  --button-color-outline-primary-fill-hover: var(--button-outline-primary-fill-hover);
  --button-color-outline-primary-fill-pressed: var(--button-outline-primary-fill-pressed);

  /* Outline - Primary2 */
  --button-color-outline-primary2-fill: var(--button-outline-primary2-fill);
  --button-color-outline-primary2-border: var(--button-outline-primary2-border);
  --button-color-outline-primary2-fill-hover: var(--button-outline-primary2-fill-hover);

  /* Outline - Secondary */
  --button-color-outline-secondary-fill: var(--button-outline-secondary-fill);
  --button-color-outline-secondary-border: var(--button-outline-secondary-border);
  --button-color-outline-secondary-text: var(--button-outline-secondary-text);
  --button-color-outline-secondary-fill-hover: var(--button-outline-secondary-fill-hover);
  --button-color-outline-secondary-fill-pressed: var(--button-outline-secondary-fill-pressed);

  /* Outline - Tertiary */
  --button-color-outline-tertiary-fill: var(--button-outline-tertiary-fill);
  --button-color-outline-tertiary-border: var(--button-outline-tertiary-border);
  --button-color-outline-tertiary-text: var(--button-outline-tertiary-text);
  --button-color-outline-tertiary-fill-hover: var(--button-outline-tertiary-fill-hover);
  --button-color-outline-tertiary-fill-pressed: var(--button-outline-tertiary-fill-pressed);
}

/* ━━━━━━━━━━━━━━━━━━━━ 기본 공통 ━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  vertical-align: middle;
  width: auto;
  line-height: 1;
  border-style: solid;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-base);
  border-width: var(--width-variable-regular);
}

.btn .svg-icon {
  background-color: var(--button-color-primary-text);
  transition: var(--transition-base);
  display: block;
}

/* ━━━━━━━━━━━━ Primary (실색) ━━━━━━━━━━━━━━━*/
.btn.primary {
  background-color: var(--button-color-primary-fill);
  border-color: var(--button-color-primary-border);
  color: var(--button-color-primary-text);
  font-weight: 600;
}

.btn.primary:not(.icon) .svg-icon {
  background-color: var(--button-color-primary-text);
}

.btn.primary:hover {
  background-color: var(--button-color-primary-fill-hover);
}

.btn.primary:active,
.btn.primary:focus {
  background-color: var(--button-color-primary-fill-pressed);
}

.btn.primary[disabled],
.btn.primary.disabled {
  background-color: var(--button-color-primary-fill-disabled);
  border-color: var(--button-color-primary-border-disabled);
  color: var(--button-color-primary-text-disabled);
}

.btn.primary[disabled]:not(.icon) .svg-icon,
.btn.primary.disabled:not(.icon) .svg-icon {
  background-color: var(--button-color-primary-text-disabled);
}

/* ━━━━━━━━━━━━━━━━━━━━━ Outline - Primary ━━━━━━━━━━━━━━━━━━━━ */
.btn.outline-primary {
  background-color: var(--button-color-outline-primary-fill);
  border-color: var(--button-color-outline-primary-border);
  color: var(--button-color-outline-primary-text);
  font-weight: 600;
}

.btn.outline-primary:hover {
  background-color: var(--button-color-outline-primary-fill-hover);
}

.btn.outline-primary:active,
.btn.outline-primary:focus {
  background-color: var(--button-color-outline-primary-fill-pressed);
}

.btn.outline-primary[disabled],
.btn.outline-primary.disabled {
  background-color: var(--button-outline-fill-disabled);
  border-color: var(--button-disabled-border);
  color: var(--button-outline-text-disabled);
}

/* ━━━━━━━━ Outline - Primary2 ━━━━━━━━*/
.btn.outline-primary2 {
  background-color: var(--button-outline-primary2-fill);
  border-color: var(--button-outline-primary2-border);
  color: var(--button-outline-primary2-text);
  font-weight: 600;
}

.btn.outline-primary2:hover {
  background-color: var(--button-outline-primary2-fill-hover);
  border-color: var(--button-outline-primary2-border-hover);
  color: var(--button-outline-primary2-text-hover);
}

.btn.outline-primary2:active,
.btn.outline-primary2:focus {
  background-color: var(--button-outline-primary2-fill-pressed);
  border-color: var(--button-outline-primary2-border-pressed);
  color: var(--button-outline-primary2-text-pressed);
}

.btn.outline-primary2[disabled],
.btn.outline-primary2.disabled {
  background-color: var(--button-outline-primary2-fill-disabled);
  border-color: var(--button-outline-primary2-border-disabled);
  color: var(--button-outline-primary2-text-disabled);
}

/* ━━━━━━━━━━━━━━━━━━━━━━ Secondary (실색) ━━━━━━━━━━━━━━━━━ */
.btn.secondary {
  background-color: var(--button-color-secondary-fill);
  border-color: var(--button-color-secondary-border);
  color: var(--button-color-secondary-text);
  font-weight: 600;
}

.btn.secondary:not(.icon) .svg-icon {
  background-color: var(--button-color-secondary-text);
}

.btn.secondary:hover {
  background-color: var(--button-color-secondary-fill-hover);
}

.btn.secondary:active,
.btn.secondary:focus {
  background-color: var(--button-color-secondary-fill-pressed);
}

.btn.secondary[disabled],
.btn.secondary.disabled {
  background-color: var(--button-color-secondary-fill-disabled);
  border-color: var(--button-color-secondary-border-disabled);
  color: var(--button-color-secondary-text-disabled);
}

.btn.secondary[disabled]:not(.icon) .svg-icon,
.btn.secondary.disabled:not(.icon) .svg-icon {
  background-color: var(--button-color-secondary-text-disabled);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━ Outline - Secondary ━━━━━━━━━━━━━━━━━━━━━ */
.btn.outline-secondary {
  background-color: var(--button-color-outline-secondary-fill);
  border-color: var(--button-color-outline-secondary-border);
  color: var(--button-color-outline-secondary-text);
  font-weight: 600;
}

.btn.outline-secondary:hover {
  background-color: var(--button-color-outline-secondary-fill-hover);
}

.btn.outline-secondary:active,
.btn.outline-secondary:focus {
  background-color: var(--button-color-outline-secondary-fill-pressed);
}

.btn.outline-secondary[disabled],
.btn.outline-secondary.disabled {
  background-color: var(--button-outline-fill-disabled);
  border-color: var(--button-disabled-border);
  color: var(--button-outline-text-disabled);
}

/* ━━━━━━━━━━━━━━━━━━━━ Tertiary (회색 실색) ━━━━━━━━━━━━━━━━━━━ */
.btn.tertiary {
  background-color: var(--button-color-tertiary-fill);
  border-color: var(--button-color-tertiary-border);
  color: var(--button-color-tertiary-text);
  font-weight: 600;
}

.btn.tertiary:not(.icon) .svg-icon {
  background-color: currentColor;
}

.btn.tertiary:hover {
  background-color: var(--button-color-tertiary-fill-hover);
}

.btn.tertiary:active,
.btn.tertiary:focus {
  background-color: var(--button-color-tertiary-fill-pressed);
}

.btn.tertiary[disabled],
.btn.tertiary.disabled {
  background-color: var(--button-color-tertiary-fill-disabled);
  border-color: var(--button-color-tertiary-border-disabled);
  color: var(--button-color-tertiary-text-disabled);
}

.btn.tertiary[disabled]:not(.icon) .svg-icon,
.btn.tertiary.disabled:not(.icon) .svg-icon {
  background-color: var(--button-color-tertiary-text-disabled);
}

/* ━━━━━ Outline - Tertiary (회색 라인/투명 배경) ━━━━━━ */
.btn.outline-tertiary {
  background-color: var(--button-color-outline-tertiary-fill);
  /* 투명 */
  border-color: var(--button-color-outline-tertiary-border);
  color: var(--button-color-outline-tertiary-text);
  font-weight: 600;
}

.btn.outline-tertiary:not(.icon) .svg-icon {
  background-color: currentColor;
}

.btn.outline-tertiary:hover {
  background-color: var(--button-color-outline-tertiary-fill-hover);
}

.btn.outline-tertiary:active,
.btn.outline-tertiary:focus {
  background-color: var(--button-color-outline-tertiary-fill-pressed);
}

.btn.outline-tertiary[disabled],
.btn.outline-tertiary.disabled {
  background-color: var(--button-outline-fill-disabled);
  border-color: var(--button-disabled-border);
  color: var(--button-outline-text-disabled);
}

/* ━━━━━━━━━ Text Button ━━━━━━━━ */
.btn.text {
  --button-size-height-xsmall: var(--size-height-3);
  --button-padding-x-xsmall: var(--padding-1);
  --button-padding-y-xsmall: var(--number-0);
  --button-size-height-small: var(--size-height-4);
  --button-padding-x-small: var(--padding-1);
  --button-padding-y-small: var(--number-0);
  --button-size-height-medium: var(--size-height-5);
  --button-padding-x-medium: var(--padding-1);
  --button-padding-y-medium: var(--number-2);
  --button-size-height-large: var(--size-height-6);
  --button-padding-x-large: var(--padding-1);
  --button-padding-y-large: 0.3125rem;
  --button-size-height-xlarge: var(--size-height-7);
  --button-padding-x-xlarge: var(--padding-1);
  --button-padding-y-xlarge: 0.5625rem;

  display: inline-block;
  height: auto !important;
  padding: var(--button-padding-y-large) var(--button-padding-x-large);
  text-align: left;
  white-space: normal;

  background-color: var(--button-color-text-fill);
  border-color: var(--button-color-text-border);
  color: var(--button-color-text-text);
}

.btn.text .svg-icon {
  display: inline-block;
}

.btn.text.xsmall {
  min-height: var(--button-size-height-xsmall);
  padding: var(--button-padding-y-xsmall) var(--button-padding-x-xsmall);
}

.btn.text.small {
  padding: var(--button-padding-y-small) var(--button-padding-x-small);
}

.btn.text.medium {
  padding: var(--button-padding-y-medium) var(--button-padding-x-medium);
}

.btn.text.large {
  padding: var(--button-padding-y-large) var(--button-padding-x-large);
}

.btn.text.xlarge {
  padding: var(--button-padding-y-xlarge) var(--button-padding-x-xlarge);
}

.btn.text:hover {
  background-color: var(--button-color-text-fill-hover);
}

.btn.text:active,
.btn.text:focus {
  background-color: var(--button-color-text-fill-pressed);
}

.btn.text[disabled],
.btn.text.disabled {
  background-color: var(--button-color-text-fill-disabled);
  border-color: var(--button-color-text-border-disabled);
  color: var(--button-color-text-text-disabled);
}

.btn.text[disabled]:not(.icon) .svg-icon,
.btn.text.disabled:not(.icon) .svg-icon {
  background-color: var(--button-color-text-text-disabled);
}

/* ━━━━━━━  Link Button ━━━━━━━━ */
.btn.link {
  --button-pc-fs-xsmall: var(--pc-fs-label-small);
  --button-mobile-fs-xsmall: var(--mobile-fs-label-small);
  --button-padding-x-xsmall: var(--padding-1);
  --button-pc-fs-small: var(--pc-fs-label-small);
  --button-mobile-fs-small: var(--mobile-fs-label-small);
  --button-padding-x-small: var(--padding-1);
  --button-pc-fs-medium: var(--pc-fs-label-medium);
  --button-mobile-fs-medium: var(--mobile-fs-label-medium);
  --button-padding-x-medium: var(--padding-1);
  --button-pc-fs-large: var(--pc-fs-label-large);
  --button-mobile-fs-large: var(--mobile-fs-label-large);
  --button-padding-x-large: var(--padding-1);
  --button-pc-fs-xlarge: var(--pc-fs-label-large);
  --button-mobile-fs-xlarge: var(--mobile-fs-label-large);
  --button-padding-x-xlarge: var(--padding-1);

  display: inline-block;
  height: auto !important;
  padding: 0 var(--button-padding-x-large);
  font-size: var(--button-pc-fs-large);
  text-align: left;
  white-space: normal;

  background-color: var(--button-color-link-fill);
  border-color: var(--button-color-link-border);
  color: var(--button-color-link-text);
}

@media (max-width: 767px) {
  .btn.link {
    font-size: var(--button-mobile-fs-large);
  }
}

.btn.link.xsmall {
  padding: 0 var(--button-padding-x-xsmall);
  font-size: var(--button-pc-fs-xsmall);
}

@media (max-width: 767px) {
  .btn.link.xsmall {
    font-size: var(--button-mobile-fs-xsmall);
  }
}

.btn.link.small {
  padding: 0 var(--button-padding-x-small);
  font-size: var(--button-pc-fs-small);
}

@media (max-width: 767px) {
  .btn.link.small {
    font-size: var(--button-mobile-fs-small);
  }
}

.btn.link.medium {
  padding: 0 var(--button-padding-x-medium);
  font-size: var(--button-pc-fs-medium);
}

@media (max-width: 767px) {
  .btn.link.medium {
    font-size: var(--button-mobile-fs-medium);
  }
}

.btn.link.large {
  padding: 0 var(--button-padding-x-large);
  font-size: var(--button-pc-fs-large);
}

@media (max-width: 767px) {
  .btn.link.large {
    font-size: var(--button-mobile-fs-large);
  }
}

.btn.link.xlarge {
  padding: 0 var(--button-padding-x-xlarge);
  font-size: var(--button-pc-fs-xlarge);
}

@media (max-width: 767px) {
  .btn.link.xlarge {
    font-size: var(--button-mobile-fs-xlarge);
  }
}

.btn.link .svg-icon {
  display: inline-block;
  margin-bottom: -0.3125rem;
}

.btn.link:not(.icon) .svg-icon {
  background-color: var(--button-color-link-text);
  background-image: url(../images/component/icon/ico_go_blue.svg);
}

.btn.link.basic {
  color: var(--text-basic);
}

.btn.link.basic .svg-icon {
  background-image: url(../images/component/icon/ico_go.svg);
}

.btn.link:hover {
  color: var(--link-hover);
  background-color: var(--button-color-link-fill-hover);
}

.btn.link:hover .svg-icon {
  background-color: var(--link-hover);
}

.btn.link:active,
.btn.link:focus {
  color: var(--link-pressed);
  background-color: var(--button-color-link-fill-pressed);
}

.btn.link:active .svg-icon,
.btn.link:focus .svg-icon {
  background-color: var(--link-pressed);
}

.btn.link.pure:hover,
.btn.link.pure:active,
.btn.link.pure:focus,
.btn.link.pure:visited {
  color: var(--button-color-link-text);
}

.btn.link.pure:hover .svg-icon,
.btn.link.pure:active .svg-icon,
.btn.link.pure:focus .svg-icon,
.btn.link.pure:visited .svg-icon {
  background-color: var(--button-color-link-text);
}

.btn.link .underline.hidden-underline {
  text-decoration-color: var(--border-transparency);
  transition: var(--transition-base);
}

.btn.link:hover .underline.hidden-underline,
.btn.link:active .underline.hidden-underline,
.btn.link:focus .underline.hidden-underline,
.btn.link:visited .underline.hidden-underline {
  text-decoration-color: inherit;
}

/* ━━━━━━━━━ Icon Only ━━━━━━━━ */
.btn.icon {
  --button-icon-size-xsmall: var(--size-height-2);
  --button-icon-size-small: var(--size-height-3);
  --button-icon-size-medium: var(--size-height-4);
  --button-icon-size-large: var(--size-height-5);
  --button-icon-size-xlarge: var(--size-height-6);

  width: var(--button-icon-size-medium);
  height: var(--button-icon-size-medium);
  padding: 0 !important;
  background-color: transparent;
  border-color: var(--border-transparency);
  color: inherit;
  border: 0;
}

.btn.icon:hover,
.btn.icon:active {
  background-color: inherit;
}

.btn.icon.xsmall {
  width: var(--button-icon-size-xsmall);
  height: var(--button-icon-size-xsmall);
}

.btn.icon.small {
  width: var(--button-icon-size-small);
  height: var(--button-icon-size-small);
}

.btn.icon.medium {
  width: var(--button-icon-size-medium);
  height: var(--button-icon-size-medium);
}

.btn.icon.large {
  width: var(--button-icon-size-large);
  height: var(--button-icon-size-large);
}

.btn.icon.xlarge {
  width: var(--button-icon-size-xlarge);
  height: var(--button-icon-size-xlarge);
}

.btn.icon .svg-icon {
  background-color: var(--text-basic);
}

.btn.icon.pure .svg-icon {
  background-color: transparent;
}

.btn.icon.border {
  background-color: var(--background-white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-full);
}

.btn.icon.border.large .svg-icon {
  width: var(--icon--size-xsmall);
  height: var(--icon--size-xsmall);
}

.btn.icon.border.xlarge .svg-icon {
  width: var(--icon--size-xlarge);
  height: var(--icon--size-xlarge);
}

.btn.icon.border[disabled],
.btn.icon.border.disabled {
  background-color: var(--button-disabled-fill);
}

/* 추가 버튼 */
.btn.outline-success,
.btn.outline-danger {
  background-color: var(--surface-white);
  font-weight: 600;
  /* outline-primary와 톤 맞춤 */
}

.btn.outline-success {
  border-color: var(--success);
  color: var(--success);
}

.btn.outline-danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* 아이콘도 텍스트색을 따르게 */
.btn.outline-success .svg-icon,
.btn.outline-danger .svg-icon {
  background-color: currentColor;
}




/* hover/active — 은은한 틴트 */

/* 🛑🛑🛑css검사용 -  color-mix   실사용시 주석처리 🛑🛑🛑*/
.btn.outline-success:hover {
  background-color: rgba(0, 138, 30, 0.08);
}

.btn.outline-success:active,
.btn.outline-success:focus {
  background-color: rgba(0, 138, 30, 0.14);
}

.btn.outline-danger:hover {
  background-color: rgba(235, 0, 59, 0.08);
}

.btn.outline-danger:active,
.btn.outline-danger:focus {
  background-color: rgba(235, 0, 59, 0.14);
}

/*🛑🛑🛑 실 사용시 주석처리 해제 🛑🛑🛑*/
/* @supports (color: color-mix(in srgb, #ff0000 50%, #ffffff 50%)) {
  .btn.outline-success:hover {
    background-color: color-mix(in srgb, var(--success) 8%, #fff 92%);
  }

  .btn.outline-success:active,
  .btn.outline-success:focus {
    background-color: color-mix(in srgb, var(--success) 14%, #fff 86%);
  }

  .btn.outline-danger:hover {
    background-color: color-mix(in srgb, var(--danger) 8%, #fff 92%);
  }

  .btn.outline-danger:active,
  .btn.outline-danger:focus {
    background-color: color-mix(in srgb, var(--danger) 14%, #fff 86%);
  }
} */

/* 구형 브라우저 fallback */

/*🛑🛑🛑 실사용시 주석처리 해제 🛑🛑🛑*/
/* @supports not (color: color-mix(in srgb, red 50%, #ffffff 50%)) {
  .btn.outline-success:hover {
    background-color: rgba(0, 138, 30, 0.08);
  }

   #008A1E
  .btn.outline-success:active,
  .btn.outline-success:focus {
    background-color: rgba(0, 138, 30, 0.14);
  }

  .btn.outline-danger:hover {
    background-color: rgba(235, 0, 59, 0.08);
  }

   #EB003B
  .btn.outline-danger:active,
  .btn.outline-danger:focus {
    background-color: rgba(235, 0, 59, 0.14);
  }
} */




/* disabled */
.btn.outline-success[disabled],
.btn.outline-success.disabled,
.btn.outline-danger[disabled],
.btn.outline-danger.disabled {
  border-color: var(--button-color-primary-border-disabled);
  color: var(--button-color-primary-text-disabled);
  background-color: var(--button-color-primary-fill-disabled);
  cursor: default;
}

/* ━━━━
  [Override] 버튼 톤 매핑 — roles - tones
  - Tertiary : 회색(목록/보조)
  - Success  : 초록(완료)
  - Danger   : 빨강(취소/삭제)
━━━━━━━ */

/* --- Tone 정의(필요 시 tokens.css로 이동 가능) --- */
:root {
  /* neutral (gray) */
  --tone-neutral-fill: #f5f6fa;
  --tone-neutral-hover: #ebedf5;
  --tone-neutral-pressed: #e2e4ed;
  --tone-neutral-border: #d1d3dc;

  /* success */
  --tone-success-fill: #008a1e;
  --tone-success-hover: #067718;
  --tone-success-pressed: #075f14;
  --tone-success-fill-hover: color-mix(in srgb, var(--tone-success-fill) 12%, #fff 88%);


  /* danger */
  --tone-danger-fill: #eb003b;
  --tone-danger-hover: #c90033;
  --tone-danger-pressed: #a1002a;
}

/*  역할 변수 재매핑 */
:root {
  /* success/danger (채움/라인 공통 사용) */
  --button-success-fill: var(--tone-success-fill);
  --button-success-fill-hover: var(--tone-success-hover);
  --button-success-fill-pressed: var(--tone-success-pressed);
  --button-success-text: var(--surface-white);

  --button-danger-fill: var(--tone-danger-fill);
  --button-danger-fill-hover: var(--tone-danger-hover);
  --button-danger-fill-pressed: var(--tone-danger-pressed);
  --button-danger-text: var(--surface-white);
}

/* ━━━━━━━━
  Filled Variants (Secondary=Blue / Tertiary=Gray / Success / Danger)
  - 기본 규칙과 동일한 specificity, 파일 하단 배치로 우선순위 확보
━━━━━━━ */
/* success (채움) */
.btn.success {
  background-color: var(--button-success-fill);
  border-color: var(--button-success-fill);
  color: var(--button-success-text);
  font-weight: 600;
}

.btn.success:not(.icon) .svg-icon {
  background-color: var(--button-success-text);
}

.btn.success:hover {
  background-color: var(--button-success-fill-hover);
}

.btn.success:active,
.btn.success:focus {
  background-color: var(--button-success-fill-pressed);
}

/* danger (채움) */
.btn.danger {
  background-color: var(--button-danger-fill);
  border-color: var(--button-danger-fill);
  color: var(--button-danger-text);
  font-weight: 600;
}

.btn.danger:not(.icon) .svg-icon {
  background-color: var(--button-danger-text);
}

.btn.danger:hover {
  background-color: var(--button-danger-fill-hover);
}

.btn.danger:active,
.btn.danger:focus {
  background-color: var(--button-danger-fill-pressed);
}

/* outline-success / outline-danger — 기존 클래스 유지 + 상태 강화 */
.btn.outline-success {
  background-color: var(--surface-white);
  border-color: var(--tone-success-fill);
  color: var(--tone-success-fill);
  font-weight: 600;
}



/* 🛑🛑🛑css검사용 -  color-mix 실사용시 주석처리 🛑🛑🛑*/
.btn.outline-success:hover,
.btn.outline-success:active,
.btn.outline-success:focus {
  background-color: rgba(0, 138, 30, 0.12);
}

/*🛑🛑🛑 실사용시 주석처리 해제 🛑🛑🛑*/
/* .btn.outline-success:hover,
.btn.outline-success:active,
.btn.outline-success:focus {
  background-color: color-mix(in srgb, var(--tone-success-fill) 12%, #fff 88%);
} */




.btn.outline-danger {
  background-color: var(--surface-white);
  border-color: var(--tone-danger-fill);
  color: var(--tone-danger-fill);
  font-weight: 600;
}





/* 🛑🛑🛑css검사용 -  color-mix 실사용시 주석처리 🛑🛑🛑*/
.btn.outline-danger:hover,
.btn.outline-danger:active,
.btn.outline-danger:focus {
  background-color: rgba(235, 0, 59, 0.12);
}

/*🛑🛑🛑 실사용시 주석처리 해제 🛑🛑🛑*/
/* .btn.outline-danger:hover,
.btn.outline-danger:active,
.btn.outline-danger:focus {
  background-color: color-mix(in srgb, var(--tone-danger-fill) 12%, #fff 88%);
} */





/* 🛑🛑🛑css검사용 -  color-mix 실사용시 주석처리 🛑🛑🛑*/
.btn.outline-success:hover,
.btn.outline-success:active,
.btn.outline-success:focus {
  background-color: rgba(0, 138, 30, 0.12);
}

.btn.outline-danger:hover,
.btn.outline-danger:active,
.btn.outline-danger:focus {
  background-color: rgba(235, 0, 59, 0.12);
}

/*🛑🛑🛑 실사용시 주석처리 해제 🛑🛑🛑*/
/* @supports not (color: color-mix(in srgb, red, white)) {

  .btn.outline-success:hover,
  .btn.outline-success:active,
  .btn.outline-success:focus {
    background-color: rgba(0, 138, 30, 0.12);
  }

  .btn.outline-danger:hover,
  .btn.outline-danger:active,
  .btn.outline-danger:focus {
    background-color: rgba(235, 0, 59, 0.12);
  }
} */




.btn.success[disabled],
.btn.success.disabled,
.btn.danger[disabled],
.btn.danger.disabled {
  background-color: var(--button-color-primary-fill-disabled);
  border-color: var(--button-color-primary-border-disabled);
  color: var(--button-color-primary-text-disabled);
  cursor: default;
}

/* 버튼 배경 하얀색 */
.btn.white {
  background-color: var(--white);
}

/*  button area  */
.btn-wrap {
  width: 100%;
}

/* 건너뛰기 링크 */
#skip-link {
  --skip-link--pc-font-size: var(--pc-fs-body-small);
  --skip-link--mobile-font-size: var(--mobile-fs-body-small);
  --skip-link--color-background: var(--background-inverse);
  --skip-link-color-text: var(--text-basic-inverse);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  text-align: center;
  background-color: var(--skip-link--color-background);
}

#skip-link a:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#skip-link a:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  box-shadow: var(--box-shadow-outline-inset);
  outline-offset: -4px;
  font-size: var(--pc-fs-body-small);
  color: var(--skip-link-color-text);
  width: 100%;
  height: var(--size-height-5);
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 767px) {
  #skip-link a:focus {
    font-size: var(--skip-link--mobile-font-size);
  }
}

/* HEADER 공통 토큰 */
#header {
  --header--top-height: var(--size-height-6);
  --header--container-height: var(--size-height-11);
  --header--container-height-m: var(--size-height-10);
  --header--inner-gap: var(--gap-12);
  --header--logo-w: 158px;
  --header--menu-gap: var(--gap-9);
  --header--action-gap: var(--gap-6);
  --header--z: 1000;

  --header--surface: var(--surface-white);
  --header--divider: var(--divider-gray-light);
  --header--dropdown-radius: var(--radius-large2);
  --header--dropdown-shadow: 0 16px 36px rgba(17, 24, 39, 0.14);
  --header--dropdown-bd: var(--border-gray-light);
}

body.is-gnb-web::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 900;
  pointer-events: none;
}

/*
.dimmed-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 900;
}

body.is-gnb-web .dimmed-layer {
  display: block;
}
*/

/* 상단 유틸 */
#header .header-top {
  background: var(--surface-gray-primary);
  height: var(--header--top-height);
  border-bottom: var(--width-variable-thin) solid var(--header--divider);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
}

#header .header-top .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header--inner-gap);
  max-width: var(--pc-container-max, 1520px);
  margin: 0 auto;
}

#header .header-access {
  position: relative;
}

#header .header-access::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;

  width: 24px;
  height: 16px;
}

#header .header-access p {
  color: var(--text-muted);
  font-size: var(--pc-fs-label-small);
  padding-left: var(--padding-9);
}

#header .header-top-utility-list {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  color: var(--text-muted);
  font-size: var(--pc-fs-label-small);
}

#header .header-top-utility-list li {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  position: relative;
}

#header .header-top-utility-list li+li::before {
  content: '·';
  color: var(--text-sub);
  margin: 0 var(--gap-2);
  line-height: 1;
}

#header .header-top-utility-list li>* {
  display: inline-flex;
  align-items: center;
  height: var(--size-height-5);
  line-height: 1;
  font-size: var(--pc-fs-label-small);
  gap: 3px;
}

/* 로그인 및 사용자등록, 로그아웃버튼 크기 확대 20260323 */
#header .header-top-utility-list .header-top-utility-log>* {
  font-size: var(--pc-fs-label-large);
  font-weight: bold;
}

/* 로그아웃 버튼 */
#header .header-top-utility-log .btn.large.text {
  padding: 0 var(--padding-2);
}

/* 접속 시간 표시 */
#header .header-top-utility-time .time {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  color: var(--information-70);
}

#header .header-top-utility-time .time i {
  font-size: 1rem;
  width: var(--icon--size-small);
  height: var(--icon--size-small);
}

/* 시간연장 칩 버튼 */
#header .header-top-utility-time .btn.tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: var(--size-height-5);
  padding: 0 var(--padding-4);
  border-radius: var(--radius-full);
  border: var(--width-variable-regular) solid var(--border-gray-light);
  background: var(--surface-white);
  font-size: var(--pc-fs-label-small);
}

/* 사용자명 링크 */
#header .header-top-utility-username {
  color: var(--element-information-darker);
  font-weight: var(--typo-weight-bold);
}

#header .header-top-utility-username a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  height: var(--size-height-5);
  padding: 0 var(--padding-2);
}

/* 헤더 바 */
#header .header-container {
  background: var(--header--surface);
  height: var(--header--container-height);
  display: flex;
  align-items: center;
  position: sticky;
  top: var(--header--top-height);
  z-index: var(--header--z);
  /* border-top: var(--width-variable-regular) solid var(--header--divider); */
  /* border-bottom: var(--width-variable-regular) solid var(--header--divider); */
}

/* header-container가 고정될 때 적용되는 스타일 */
#header .header-container.sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#header .header-container .inner {
  display: grid;
  grid-template-columns: var(--header--logo-w) 1fr auto;
  align-items: center;
  gap: var(--header--inner-gap);
  width: 100%;
  max-width: var(--pc-container-max, 1520px);
  margin: 0 auto;
  height: 100%;
}

/* 로고 */
#header .header-logo a {
  display: block;
  width: var(--header--logo-w);
  height: var(--size-height-9);
  background: url('../images/common/top_logo.svg') left center/contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

/* GNB (PC) 메뉴: 중앙 정렬 */
#header .main-menu {
  display: flex;
  justify-content: center;
  height: 100%;
}

/* 1depth */
#header .main-menu .gnb-menu {
  display: flex;
  align-items: center;
  gap: var(--header--menu-gap);
  font-size: var(--pc-fs-label-large);
  height: 100%;
}

#header .main-menu .gnb-main-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--padding-2) var(--padding-3);
  color: var(--text-basic);
  height: 100%;
  outline: none;
  position: relative;
  z-index: 2;
  font-size: var(--pc-fs-body-xlarge);
}
#header .main-menu .gnb-main-trigger:hover {
    color: #2563eb; /* 파란색 (원하면 변경) */
}

#header .main-menu .gnb-item.active>.gnb-main-trigger {
  color: var(--text-primary);
}

#header .main-menu .gnb-item {
  height: 100%;
}

/* 드롭다운(메가메뉴) */
#header .gnb-toggle-wrap {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--surface-white);
  border: var(--width-variable-regular) solid var(--header--dropdown-bd);
  padding: 0 0 var(--gap-12);
  font-family: var(--typo-font-type);
  display: none;
}

#header .gnb-item.is-open>.gnb-toggle-wrap {
  display: block;
}

#header .gnb-sub-list {
  background: var(--surface-white);
}

#header .gnb-sub-list>.inner {
  max-width: var(--pc-container-max, 1520px);
  margin: 0 auto;

  display: flex;
  align-items: stretch;
  gap: var(--gap-10);
  /* 내부 요소 사이의 간격 */
  padding-top: var(--gap-8);
}

#header .gnb-sub-title {
  width: calc(var(--header--logo-w) + (var(--header--inner-gap) * 0.5));
  background: linear-gradient(145deg, #f5f5ff -10.53%, #eef2ff 18.73%, #f8faff 41.4%, #f4f7fe 60.98%);
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

#header .gnb-sub-title::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  /* 타이틀 너비는 280px로 가정했습니다. */
  width: calc(1000px + var(--header--logo-w) + var(--header--inner-gap));

  background: url('../images/common/bg.svg') top right no-repeat #f4f8ff;
  top: -2rem;
  z-index: -1;
  height: calc(100% + var(--gap-12) + 2rem);
}

#header .gnb-sub-title .menu-title-box {
  font-size: var(--pc-fs-heading-large);
  color: var(--text-bolder);
  font-weight: var(--typo-weight-bold);
  margin-right: 3rem;
  line-height: 1.2;
}

#header .gnb-sub-content,
#header .gnb-tab-content {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  gap: var(--gap-12);
}

#header .gnb-tab-wrap,
#header .gnb-tab-list,
#header .gnb-tab-btn {
  display: none !important;
}

#header .gnb-tab-content {
  display: flex;
  flex-direction: row;
  gap: var(--gap-12);
}

#header .gnb-tab-panel {
  display: block;
  min-width: 240px;
}

#header .gnb-tab-panel.active::before {
  background: var(--primary-60);
  color: #fff;
}

#header .gnb-tab-panel ul {
  padding-left: var(--gap-4);
  padding-top: var(--gap-2);
}

#header .gnb-tab-panel li {
  margin-bottom: var(--gap-3);
}

#header .gnb-tab-panel a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  color: var(--text-basic);
  font-size: var(--pc-fs-body-medium);
  font-weight: var(--typo-weight-semibold);
}

#header .gnb-tab-panel a.active {
  color: var(--primary-60);
}

#header .gnb-tab-panel a::before {
  content: '•';
  color: var(--text-sub);
  transform: translateY(-1px);
}

#header .gnb-tab-panel a:hover {
  color: var(--link-hover);
}

/* subTitle tabindex작업을 위해 before 제거*/
#header .gnb-tab-panel .title-panel {
  content: attr(aria-labelledby);
  display: block;
  margin-bottom: var(--gap-3);
  font-weight: var(--typo-weight-bold);
  color: var(--text-basic);
  font-size: var(--pc-fs-body-large);
  width: 100%;
  background: #f3f6fb;
  border-radius: 10px;
  text-align: center;
  padding: 0.8rem;
  transition: all 0.2s ease;
}

#header .gnb-tab-panel.active .title-panel {
  background: var(--primary-60);
  color: #fff;
}

#header .gnb-tab-panel .title-panel:hover {
  background: var(--primary-80);
  color: #fff;
}

#header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--header--action-gap);
}

#header .header-actions li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
}

#header .header-actions .btn-navi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
  padding: var(--padding-2);
  background: transparent;
  border: 0;
  color: var(--text-basic);
  font-size: var(--pc-fs-label-small);
}

#header .header-actions .btn-navi i.svg-icon {
  font-size: 1.375rem;
  color: var(--text-sub);
}

@media (min-width: 1380px) {

  /* 마우스/키보드 모두 유지 */
  #header .gnb-item:hover>.gnb-toggle-wrap {
    display: block;
  }
}

/*  포커스 */
#header .header-top-utility-list a:focus,
#header .header-top-utility-list button:focus {
  outline: none;
  border-radius: var(--radius-small);
}

.gnb-item>.gnb-main-trigger:focus,
.gnb-item>.gnb-main-trigger:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--border-information); 
  border-radius: var(--radius-medium);
}

/* 고대비 모드 대응 */
@media (prefers-contrast: more) {

  #header .header-top-utility-list a:focus,
  #header .header-top-utility-list button:focus {
    outline: 2px solid;
    outline-offset: -2px;
  }

  .gnb-item>.gnb-main-trigger:focus,
  .gnb-item>.gnb-main-trigger:focus-visible {
    outline: 2px solid !important;
    outline-offset: -2px !important;
    border-color: currentColor;
  }
}

#header .gnb-main-trigger:focus-visible,
#header .gnb-tab-panel a:focus-visible {
  outline: var(--width-variable-regular) solid var(--border-primary);
  outline-offset: var(--number-2);
  position: relative;
  /* stacking 컨텍스트 확보 */
  z-index: calc(var(--header--z) + 1);
}

/* ━━━━━모바일 메뉴 ━━━━━ */
.main-menu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  /* Dimmed 배경 */
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
}

/* ━━━━ PC (≥ 1380px) ━━━━ */
@media (min-width: 1380px) {

  /* 검색 버튼은 PC에서 숨김 */
  #header .header-actions .btn-navi.search {
    display: none;
  }

  /* 메인 메뉴는 PC에서 표시 */
  #header .main-menu {
    display: block;
    height: 100%;
  }
}

/* ━━━━ Mobile & Tablet (≤ 1379.98px) ━━━━ */
@media (max-width: 1379.98px) {

  /* 상단 유틸 바는 모바일에서 숨김 */
  #header .header-top {
    display: none;
  }

  #header .header-container {
    height: var(--header--container-height-m);
  }

  /* 헤더 그리드 축소 */
  #header .header-container .inner {
    grid-template-columns: 1fr auto;
    gap: var(--gap-4, 16px);
  }

  #header .header-logo a {
    max-width: 70%;
    height: 36px;
  }

  /* GNB 숨김 (오프캔버스로 대체) */
  #header .main-menu {
    display: none;
  }

  /* 액션: 텍스트 숨기고 아이콘만 */
  #header .header-actions .btn-navi {
    font-size: 0;
  }

  #header .header-actions .btn-navi i.svg-icon {
    font-size: 1.5rem;
  }

  /* PC 전체메뉴는 아예 사용하지 않음 (별도 fullmenu.css가 있어도 강제 비표시) */
  #pc-fullmenu.pc-fullmenu {
    display: none !important;
  }

  /* ━━━━━━ 모바일 메뉴 ━━━━━━━ */

  /* 1. 모바일 전체 메뉴 기본 레이아웃 (main-menu-mobile) */

  #mobile-nav.main-menu-mobile.is-open {
    opacity: 1;
    visibility: visible;
  }

  /*  */
  #mobile-nav .gnb-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    background-color: #fff;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
  }

  #mobile-nav.main-menu-mobile.is-open .gnb-wrap {
    transform: translateX(0);
  }

  /* 헤더 (로고 및 닫기 버튼) */
  #mobile-nav .gnb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
    height: var(--header--container-height-m);

    border-bottom: 1px solid #eee;
  }

  #mobile-nav .header-logo-mobile img {
    max-width: 70%;
    padding: 7px 0 5px;
  }

  #mobile-nav #close-nav {
    font-size: 24px;
    color: #666;
    background: none;
    border: none;
  }

  /* 메뉴 본문 영역 (스크롤 처리) */
  #mobile-nav .gnb-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  /* 2. 사용자 프로필 박스 — Mobile  */

  #mobile-nav .user-profile-box {
    /*  간단 손잡이 2개 */
    --profile-bottom-gap: var(--gap-4, 16px);
    --profile-chip-height: 48px;

    /* 스타일 */
    --profile-pad-y: var(--gap-4, 16px);
    --profile-bg-img: url('../images/common/bg.svg');
    --profile-bg: var(--surface-information-subtler, #f7f9fd);

    --profile-card-pad: var(--mobile-nav-pad-x);
    --profile-card-border: 1px solid var(--border-gray-light, #e0e0e0);
    --profile-card-radius: var(--radius-large);
    --profile-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --profile-card-bg: rgba(255, 255, 255, 0.56);

    --profile-role-fs: var(--mobile-fs-heading-xxsmall, 17px);
    --profile-meta-fs: var(--mobile-fs-label-small, 12px);
    --profile-logout-fs: var(--mobile-fs-label-small, 13px);
    --profile-session-fs: var(--mobile-fs-label-small, 14px);
    --profile-session-icon: 18px;
    --profile-session-gap: var(--gap-2, 8px);
    --profile-session-pad-y: 4px;
    --profile-session-pad-x: 12px;
    --profile-session-radius: var(--radius-full, 9999px);
    --profile-session-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    /* 좌우 시작점 통일 + 칩 아래 여백 자동 반영 */
    padding-inline: var(--mobile-nav-pad-x);
    padding-top: var(--profile-pad-y);
    background: var(--profile-bg-img) top center no-repeat var(--profile-bg);
    position: relative;
    /* padding-bottom: calc(var(--profile-bottom-gap) + var(--profile-chip-height) + env(safe-area-inset-bottom, 0px)); */
    padding-bottom: calc(var(--profile-bottom-gap) + var(--profile-chip-height) + var(--safe-bottom));
  }

  #mobile-nav .user-profile-box .inner {
    padding: var(--profile-card-pad);
    border: var(--profile-card-border);
    border-radius: var(--profile-card-radius);
    box-shadow: var(--profile-card-shadow);
    background: var(--profile-card-bg);
  }

  /* 상단 영역 */
  #mobile-nav .user-profile-box .user-info-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--gap-2, 8px);
  }

  #mobile-nav .user-profile-box .user-role {
    font-size: var(--profile-role-fs);
    font-weight: var(--typo-weight-bold, 700);
    color: #063054;
  }

  #mobile-nav .user-profile-box .btn-logout {
    min-height: var(--size-height-5, 36px);
    padding: 0 18px;
    /* font-size: var(--profile-logout-fs); */
    font-size: 16px;  /*20260325 수정*/
    font-weight: bold; /*20260325 수정*/
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #666;
    transition: background-color 0.2s ease;
  }

  #mobile-nav .user-profile-box .btn-logout:hover {
    background: #f0f0f0;
  }

  #mobile-nav .user-profile-box .btn-logout:focus-visible {
    outline: 2px solid var(--primary-50, #3c8cff);
    outline-offset: -2px;
  }

  /* 최근 접속/메타 */
  #mobile-nav .user-profile-box .user-info-bottom {
    font-size: var(--profile-meta-fs);
    color: #666;
    line-height: 1.5;
    margin-bottom: var(--gap-3, 12px);
  }

  #mobile-nav .user-profile-box .session-status {
    display: flex;
    align-items: center;
    gap: var(--profile-session-gap);
    position: absolute;
    right: var(--mobile-nav-pad-x);
    bottom: var(--profile-bottom-gap);
    padding: var(--profile-session-pad-y) var(--profile-session-pad-x);
    border-radius: var(--profile-session-radius);
    box-shadow: var(--profile-session-shadow);
    background: rgba(255, 255, 255, 0.56);
    margin-right: 10px;
  }

  #mobile-nav .user-profile-box .session-status span {
    color: #555;
    font-size: var(--profile-session-fs);
    padding-left: calc(var(--profile-session-icon) + 4px);
    position: relative;
  }

  #mobile-nav .user-profile-box .session-status span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--profile-session-icon);
    height: var(--profile-session-icon);
    transform: translateY(-50%);
    background: url('../images/component/icon/ico_time.svg') no-repeat 0 0 / contain;
  }

  #mobile-nav .user-profile-box .btn-extend {
    min-height: var(--size-height-5, 36px);
    padding: 0 16px;
    font-size: var(--profile-meta-fs);
    background: #e6f0ff;
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 20px;
    font-weight: 600;
  }

  #mobile-nav .user-profile-box .btn-extend:focus-visible {
    outline: 2px solid var(--primary-50);
    outline-offset: -2px;
  }

  /* 3. 메뉴 영역 (1뎁스/2-3뎁스 분할) */
  /* [수정]: ID (#mobile-nav)를 사용하여 우선순위 강화 */

  #mobile-nav .gnb-menu {
    display: flex;
    flex-grow: 1;
    border-top: var(--divider-gray-light, 1px solid #d2d2d2);
  }

  /* 1뎁스 메뉴 (좌측) */
  #mobile-nav .menu-wrap {
    width: 130px;
    /* 고정폭 */
    flex-shrink: 0;
    background: var(--surface-gray-primary, #f8f8f8);
    overflow-y: auto;
    border-right: var(--divider-gray-light, 1px solid #d2d2d2);
  }

  #mobile-nav .menu-wrap ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #mobile-nav .gnb-main-trigger {
    display: block;
    width: 100%;
    padding: 15px 10px;
    border: none;
    background-color: transparent;
    text-align: left;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    box-sizing: border-box;
    position: relative;
    line-height: 1.35;
  }

  #mobile-nav .gnb-main-trigger.active {
    background-color: #fff;

    color: #007bff;
    font-weight: 700;
  }

  #mobile-nav .gnb-main-trigger.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3px;

    background-color: #007bff;
  }

  /* Mobile GNB — 1depth / 2-3depth */

  #mobile-nav {
    --mobile-nav-pad-x: 10px;
    --menu-depth1-fs: var(--mobile-fs-label-small);
    --menu-depth2-fs: var(--mobile-fs-body-medium);
    --menu-depth3-fs: var(--mobile-fs-label-small);
  }

  /* 1뎁스 메뉴(좌측) */
  #mobile-nav .menu-wrap {
    width: 130px;
    flex-shrink: 0;
    background: var(--surface-gray-primary, #f8f8f8);
    overflow-y: auto;
    border-right: var(--divider-gray-light, 1px solid #eee);
  }

  #mobile-nav .menu-wrap ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #mobile-nav .gnb-main-trigger {
    display: block;
    width: 100%;
    min-height: var(--size-height-7, 44px);
    /* 접근성: 터치타깃 */
    padding: 15px var(--mobile-nav-pad-x);
    /* 시작점 통일 */
    border: 0;
    background: transparent;
    text-align: left;
    font-size: var(--menu-depth1-fs);
    /* 1차 크기 */
    color: var(--text-basic);
    font-weight: var(--typo-weight-medium, 500);
    position: relative;
    box-sizing: border-box;
    border-radius: var(--radius-small);
    -webkit-tap-highlight-color: transparent;
  }

  /*  */
  #mobile-nav .gnb-main-trigger:focus-visible {
    outline: 2px solid var(--primary-50);
    outline-offset: -2px;
    /* 안쪽으로 */
    box-shadow: 0 0 0 2px var(--primary-20, rgba(0, 123, 255, 0.25)) inset;
  }

  #mobile-nav .gnb-main-trigger.active {
    background: var(--surface-white, #fff);
    color: var(--primary-60);
    font-weight: var(--typo-weight-bold, 700);
  }

  #mobile-nav .gnb-main-trigger.active::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 3px;
    background: var(--primary-60);
  }

  /* 우측 패널 */
  #mobile-nav .submenu-wrap {
    flex-grow: 1;
    overflow-y: auto;
    /* 좌측 시작점을 1뎁스와 동일하게 */
    padding: 0 var(--gap-4, 15px) 0 var(--mobile-nav-pad-x);
  }

  #mobile-nav .gnb-sub-list {
    display: none;
    padding: 10px 0;
  }

  #mobile-nav .gnb-sub-list.active {
    display: block;
  }

  /* 2뎁스/3뎁스     */

  #mobile-nav .gnb-sub-list .mobile-depth-wrap {
    --depth-gap-v: var(--gap-4);
    --depth3-item-h: var(--size-height-7);
    --depth-divider-color: var(--gray-20);
    /* 구분선 색 */
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--depth-gap-v);
    align-items: start;
  }

  #mobile-nav .depth2-title {
    margin: 0;
    padding: var(--gap-1, 4px) 0;
    font-size: var(--menu-depth2-fs);
    font-weight: var(--typo-weight-bold, 700);
    color: var(--icon-secondary-static);
  }

  /* 3차 목록 */
  #mobile-nav .depth3-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: var(--width-variable-regular) solid var(--depth-divider-color);
    padding-bottom: var(--gap-4);
    /* 선 위 여백 */
    margin-bottom: var(--gap-4);
    /* 선 아래 여백 */
  }

  #mobile-nav .gnb-sub-list .mobile-depth-wrap .depth3-list:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  #mobile-nav .depth3-list li {
    margin: 0;
    padding: 0;
  }

  #mobile-nav .depth3-list a {
    display: flex;
    align-items: center;
    min-height: var(--depth3-item-h);
    padding: 0;
    font-size: var(--menu-depth3-fs);
    font-weight: var(--typo-weight-bold);
    line-height: 1.35;
    text-decoration: none;
    color: var(--text-basic);
    border-radius: var(--radius-small);
    transition: color 0.12s ease, background-color 0.12s ease;
  }

  #mobile-nav .depth3-list a:hover,
  #mobile-nav .depth3-list a:focus {
    color: var(--primary-60);
    background: var(--action-secondary-hover, rgba(0, 0, 0, 0.04));
  }

  #mobile-nav .depth3-list a:focus-visible {
    outline: 2px solid var(--primary-50);
    outline-offset: -2px;
    /* 안쪽 링 */
  }

  #mobile-nav .depth3-list a[aria-current='page'],
  #mobile-nav .depth3-list .active>a {
    color: var(--primary-60);
    font-weight: var(--typo-weight-bold, 700);
  }
}

/* ━━━━ Footer ━━━━ */
.site-footer {
  --ft-bg: var(--surface-white);
  --ft-top-bg: var(--surface-white);
  --ft-top-bd: var(--divider-gray-regular);
  --ft-text: var(--text-basic);
  --ft-sub: var(--text-secondary);
  --ft-link: var(--link-default);
  --ft-chip-bg: var(--surface-secondary-subtler);
  --ft-chip-bd: var(--border-gray-light);

  color: var(--ft-text);
  background: var(--ft-bg);
  letter-spacing: -0.01em;
}

/* 상단 라인바 */
.site-footer .footer-top {
  background: #f9f9f9;
  border-bottom: var(--width-variable-regular) solid var(--divider-gray-light);
  font-size: var(--pc-fs-label-medium);
  color: var(--text-basic);
}

.site-footer .footer-top .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-2);
  padding: var(--padding-5) 0;
}

/* 왼쪽 텍스트 */
.footer-top .footer-links {
  white-space: nowrap;
}

.footer-top .footer-links a:first-child {
  font-weight: var(--typo-weight-semibold);
}

/* 관련 사이트 버튼 */
.rel-sites {
  margin-left: auto;
  position: relative;
}

.rel-sites__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-13);
  height: var(--size-height-7);
  padding: 0 var(--padding-8);
  border-radius: 9999px;
  background: var(--secondary-70);
  color: #fff;
  font-weight: var(--typo-weight-medium);
  transition: background 0.2s ease;
  border: none;
}

.rel-sites__btn:hover,
.rel-sites__btn:focus {
  background: var(--secondary-90);
  outline: none;
}

.rel-sites__btn:focus-visible{
  outline: 2px solid var(--primary-50);
  transition: outline 0.15s ease-in-out;
}

.rel-sites__btn .rel-sites__caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
}

.rel-sites__btn[aria-expanded='true'] .rel-sites__caret {
  transform: rotate(135deg);
}

/* 드롭다운 메뉴 */
.rel-sites__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--gap-2));
  min-width: 220px;
  background: var(--surface-white);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-medium2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: none;
  overflow: hidden;
  z-index: 10;
}

.rel-sites__item {
  display: block;
  padding: var(--padding-4) var(--padding-6);
  font-size: var(--pc-fs-label-small);
  color: var(--text-basic);
  transition: background 0.2s ease;
}

.rel-sites__item:hover {
  background: var(--action-secondary-hover);
}

.rel-sites__menu a:focus-visible{
  outline: none;
  box-shadow: var(--box-shadow-outline-inset);
}

/* 메인 */
.site-footer .footer-main .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-10);
  padding: var(--padding-5) 0;
  border-bottom: var(--width-variable-regular) solid var(--divider-gray-light);
}

.site-footer .footer-main .inner:last-child {
  border-bottom: none;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-3);
}

.footer-brand .brand-head {
  display: inline-flex;
}

.footer-brand .f-logo {
  width: 123px;
  height: 40px;
  background: url('../images/common/footer_logo.svg') no-repeat;
  background-size: contain;
}

.footer-brand .addr {
  color: var(--text-basic);
}

.footer-brand .bar {
  margin: 0 var(--gap-3);
  color: var(--divider-gray-regular);
}

.footer-call {
  text-align: right;
  line-height: 1.3;
}

.footer-call .call-label {
  color: var(--text-sub);
  font-size: var(--pc-fs-label-large);
}

.footer-call .call-number {
  display: block;
  font-size: var(--pc-fs-heading-medium);
  font-weight: var(--typo-weight-bold);
}

.footer-call .call-time {
  color: var(--text-sub);
}

.footer-call .call-row {
    display: flex;
    align-items: center; /* 세로 중앙 맞춤 */
    justify-content: flex-end; /* 오른쪽 정렬  */
    gap: 8px; /* 요소 사이의 간격 */
    margin-bottom: 4px; /* 줄 간격 */
    /*white-space: nowrap;*/  /*글자 아래로 안 밀리게 */
}

.footer-call .call-number {
    font-weight: bold;
    color: #144EB5; 
    text-decoration: none;
    font-size: 20px;
}


/* 카피라이트 */
.site-footer .footer-meta {
  color: var(--text-basic);
}

.site-footer .footer-meta .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-6);
  padding: var(--padding-5) 0;
  font-size: var(--pc-fs-body-xsmall);
}

.site-footer .footer-meta .copyright {
  margin-right: auto;
  text-align: left;
  color: var(--text-sub);
}

.site-footer .footer-meta .mark {
  display: inline-flex;
}

.site-footer .footer-meta .mark-wa {
  width: 54px;
  height: 35px;
  background: url(../images/common/mark_wa.svg) no-repeat;
  background-size: contain;
}

/* 반응형 */
@media (max-width: 1380px) {

  .site-footer .footer-main .inner,
  .site-footer .footer-top .inner {
    padding: var(--padding-5) var(--contents-padding-x);
  }

  .site-footer .footer-meta {
    padding-bottom: var(--number-12);
  }
}

@media (max-width: 1023px) {
  .site-footer .footer-top .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .footer-top .footer-links {
    font-size: var(--mobile-fs-body-small);
  }

  .footer-call .call-label {
    font-size: var(--mobile-fs-heading-small);
  }

  .footer-call .call-number {
    font-size: var(--mobile-fs-heading-small);
    margin: 0;
  }

  .footer-call .call-time,
  .copyright {
    font-size: var(--mobile-fs-body-small);
  }

  .rel-sites {
    width: 100%;
    margin-top: var(--number-5);
  }

  .rel-sites__menu {
    width: 100%;
  }

  .rel-sites__btn {
    width: 100%;
    justify-content: space-between;
    height: var(--size-height-6);
  }

  .site-footer .footer-main .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2);
  }

  .footer-call {
    text-align: left;
  }

  .site-footer .footer-meta .copyright {
    text-align: left;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .footer-brand .f-logo {
    max-width: 70%;
    height: 33px;
  }

  .footer-call .call-time,
  .copyright,
  .site-footer .footer-meta .footer-links a {
    font-size: var(--mobile-fs-body-xxsmall);
  }

  .rel-sites__btn,
  .rel-sites__item {
    font-size: var(--mobile-fs-body-xsmall);
  }

  .footer-call .call-label {
    font-size: var(--mobile-fs-heading-xsmall);
    line-height: 1.1;
  }

  .footer-main,
  .copyright {
    font-size: var(--mobile-fs-caption-small);
  }

  .site-footer .footer-meta .mark-wa {
    max-width: 80%;
    height: 27px;
  }
}

/* Breadcrumb - */

.breadcrumb-wrap {
  --bc--chip-gap: var(--gap-2);
  --bc--chip-padding-x: var(--padding-5);
  --bc--chip-height: var(--size-height-6);
  --bc--chip-height-mob: var(--size-height-5);
  --bc--chip-radius: var(--radius-xlarge);
  --bc--font-pc: var(--pc-fs-label-small);
  --bc--font-mob: var(--mobile-fs-label-small);
  --bc--chip-bg: var(--surface-white);
  --bc--chip-border: var(--border-gray-light);
  --bc--chip-text: var(--text-basic);
  --bc--chip-text-hover: var(--link-hover);
  --bc--divider-color: var(--text-muted);
  --bc--arrow-url: url(../images/component/icon/ico_angle.svg);
  --bc--arrow-size: var(--icon--size-small);
  --bc--arrow-gap: var(--gap-4);
  --bc--last-max: 14rem;

  font-weight: var(--typo-weight-light);
  padding-top: var(--pc-gap-header-breadcrumb);
  padding-bottom: var(--pc-gap-breadcrumb-h1);
}

/* Flexbox min-width 초기화 */
.breadcrumb-wrap .inner,
.breadcrumb-wrap .breadcrumb,
.breadcrumb-wrap .breadcrumb .trail,
.breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list {
  min-width: 0;
}

/* 브레드크럼 컨테이너 */
.breadcrumb-wrap .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  width: 100%;
}

.breadcrumb-wrap .breadcrumb li {
  display: flex;
  align-items: center;
  /*gap: var(--bc--chip-gap);*/
  font-size: var(--bc--font-pc);
  min-height: var(--bc--chip-height);
}

/* 칩 스타일 (공통) */
.breadcrumb-wrap .breadcrumb .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  height: var(--bc--chip-height);
  padding: 0 var(--bc--chip-padding-x);
  border-radius: var(--bc--chip-radius);
  background: var(--bc--chip-bg);
  border: 1px solid var(--bc--chip-border);
  color: var(--bc--chip-text);
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
  box-sizing: border-box;
}

/* 홈 아이콘 칩 */
.breadcrumb-wrap .breadcrumb .home .chip {
  justify-content: center;
  flex: 0 0 var(--bc--chip-height);
  width: var(--bc--chip-height);
  padding: 0;
}

.breadcrumb-wrap .breadcrumb .home .chip .svg-icon {
  display: block;
  width: var(--bc--arrow-size);
  height: var(--bc--arrow-size);
  background-color: var(--text-basic);
}

/* 그룹형 브레드크럼 */
.breadcrumb-wrap .breadcrumb.is-grouped .trail {
  display: flex;
  flex: 1 1 auto;
}

.breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bc--chip-bg);
  border: 1px solid var(--bc--chip-border);
  border-radius: var(--bc--chip-radius);
  overflow: hidden;
  padding: 0 var(--gap-4);
  flex-wrap: nowrap;
}

.breadcrumb-wrap.long .breadcrumb.is-grouped .trail .trail-list {
  padding: 0 var(--padding-8) 0 var(--gap-4);
}

/* 브레드크럼 항목 */
.breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list li {
  position: relative;
  flex: 0 1 auto;
  max-width: 260px;
}

/* 마지막 항목 */
.breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li:last-child {
  flex: 0 1 var(--bc--last-max);
}

/* 화살표 (::after) */
.breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: var(--bc--arrow-size);
  height: var(--bc--arrow-size);
  background: var(--bc--arrow-url) center / 100% 100% no-repeat;
  transform: rotate(-90deg);
  margin: -1px var(--bc--arrow-gap) 0;
}

.breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li:last-child::after {
  display: none;
}

/* 브레드크럼 텍스트 */
.breadcrumb-wrap .breadcrumb.is-grouped .trail .crumb {
  display: block;
  padding: 0 var(--gap-3);
  height: var(--bc--chip-height);
  line-height: var(--bc--chip-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bc--chip-text);
  font-weight: var(--typo-weight-light);
  transition: color 0.2s, background-color 0.2s;
  text-decoration: none;
  border-radius: var(--radius-small);
}

/* 개별 링크 포커스 - 웹접근성 준수 */
.breadcrumb-wrap .breadcrumb.is-grouped .trail .crumb:focus {
  outline: 0px solid var(--link-default, #0066cc);
  outline-offset: -2px;
 /* background-color: rgba(0, 102, 204, 0.08);*/
  color: var(--link-default, #0066cc);
  z-index: 1;
}

.breadcrumb-wrap .breadcrumb.is-grouped .trail .crumb:hover {
 /* color: var(--bc--chip-text-hover);*/
}

/* 현재 페이지 (span 항목) */
.breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li[aria-current='page'] .crumb {
  font-weight: var(--typo-weight-bold);
  cursor: default;
}

.breadcrumb-wrap.long .breadcrumb.is-grouped .trail .trail-list>li[aria-current='page'] .crumb {
  font-weight: var(--typo-weight-bold);
  cursor: default;
  overflow: visible;
}

@media (max-width: 767px) {
  .breadcrumb-wrap {
    padding-top: var(--mobile-gap-header-breadcrumb);
    padding-bottom: var(--mobile-gap-breadcrumb-h1);
  }

  .breadcrumb-wrap .breadcrumb {
    gap: var(--gap-1);
  }

  .breadcrumb-wrap .breadcrumb li {
    font-size: var(--bc--font-mob);
    min-height: var(--bc--chip-height-mob);
  }

  .breadcrumb-wrap .breadcrumb .home {
    flex: 0 0 auto;
  }

  .breadcrumb-wrap .breadcrumb .trail {
    flex: 1 1 auto;
  }

  .breadcrumb-wrap .breadcrumb .home .chip {
    height: var(--bc--chip-height-mob);
    background: transparent;
    border: 0;
    padding: 0;
  }

  .breadcrumb-wrap .breadcrumb .home .chip .svg-icon {
    width: var(--icon--size-xsmall);
    height: var(--icon--size-xsmall);
  }

  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list li {
    max-width: 110px;
  }

  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li:last-child {
    flex: 1 1 0;
  }

  .breadcrumb-wrap .breadcrumb.is-grouped .trail .crumb {
    height: var(--bc--chip-height-mob);
    line-height: 1;
    padding: var(--gap-4) var(--gap-2);
  }

  /* 모바일 개별 포커스 */
  .breadcrumb-wrap .breadcrumb.is-grouped .trail .crumb:focus {
    outline: 2px solid var(--link-default, #0066cc);
    outline-offset: 1px;
    background-color: rgba(0, 102, 204, 0.08);
  }

  .breadcrumb-wrap .breadcrumb .home::after,
  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li::after {
    content: '';
    flex: 0 0 auto;
    width: var(--icon--size-xsmall);
    height: var(--icon--size-xsmall);
    background: var(--bc--arrow-url) center / 100% 100% no-repeat;
    transform: rotate(-90deg);
    margin-inline: var(--gap-1);
  }

  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li:last-child::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .breadcrumb-wrap .breadcrumb {
    gap: var(--gap-1);
  }

  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list li {
    max-width: 100px;
  }

  .breadcrumb-wrap .breadcrumb .home .chip .svg-icon,
  .breadcrumb-wrap .breadcrumb .home::after,
  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list>li::after {
    width: calc(var(--icon--size-xsmall) * 0.8);
    height: calc(var(--icon--size-xsmall) * 0.8);
  }
}

@media (max-width: 320px) {
  .breadcrumb-wrap .breadcrumb.is-grouped .trail .trail-list li {
    max-width: 60px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━ form-field ━━━━━━━━━━━━━━━━━━━ */

:root {
  /* 색상만 변수로 */
  --field--bd: var(--border-gray-regular);
  --field--bd-hover: var(--border-gray-dark);
  --field--bd-focus: var(--border-primary);
  --field--bd-disabled: var(--border-gray-light);

  --field--bg: var(--surface-white);
  --field--bg-disabled: var(--surface-secondary-subtler);

  --field--ph: var(--text-sub);
  --field--disabled: var(--text-disabled);

  --field--icon-color: var(--text-sub);
  --field--icon-color-focus: var(--text-basic);
  --field--icon-color-disabled: var(--text-disabled);

  /* 복합 행 레이아웃 라벨 폭 (다른 라벨과 정렬을 위해 필요) */
  --form-table-row--label-width: 200px;
}

/* .form-field .custom-input,
.form-field .form-select:not(.nice-select) {
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.form-field__control select:focus,
.form-field__control select:focus-visible,
.form-field__control input:focus,
.form-field__control input:focus-visible,
.form-field__control textarea:focus,
.form-field__control textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
} */

.form-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  /* PC 높이 */
  padding: 0 16px;
  /* 좌우 패딩 */
  border-width: 1px;
  border-style: solid;
  border-color: #cacaca;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-field:hover {
  border-color: var(--field--bd-hover);
}

.form-field:focus-within {
  border-color: var(--field--bd-focus);
  box-shadow: 0 0 0 2px var(--surface-primary-subtler);
}

.form-field.is-disabled {
  background: var(--gray-20);
  border-color: var(--gray-30);
  color: var(--field--disabled);
  cursor: not-allowed;
}

.form-field.is-inline {
  width: auto;
  /* 너비를 유연하게 조정 */
  max-width: 120px;
  /* 인라인에서 사용할 적당한 최대 너비 설정 */
  flex-grow: 1;
  /* 남은 공간을 차지하도록 성장 */
}

/* ━━━━━━━━━
form-field-group (여러 필드를 한 줄에)
━━━━━━━━━━━*/
.form-field-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.form-field-group.inline-2>.form-field {
  flex: 1 1 0;
}

.form-field-group.inline-3>.form-field {
  flex: 1 1 0;
}

/* 컨트롤 */
.form-field__control {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.form-field__control input,
.form-field__control select,
.form-field__control textarea,
.form-field__control .custom-input,
.form-field__control .form-select {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--pc-fs-body-small);
  line-height: 1.4;
  color: var(--element-gray-dark);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-field__control input::placeholder,
.form-field__control textarea::placeholder {
  color: var(--field--ph);
}

.form-field:has(.custom-textarea) {
  height: 100%;
  align-items: stretch;
}

/* textarea 자체의 스타일 */
.form-field__control .custom-textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.6;
  height: 100%;
}

.form-field.is-search {
  position: relative;
  cursor: pointer;
  padding-right: 40px;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  background-image: url(../images/component/icon/ico_search.svg);
}

.form-field.is-search::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 32px;
  cursor: pointer;
}

.form-field.is-search input {
  cursor: pointer;
}

.form-field.is-search .form-field__icon {
  display: none;
}

/* 아이콘 (.svg-icon.ico-angle) */
.form-field__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--field--icon-color);
  pointer-events: none;
  /* 필요 시 : transform: rotate(90deg); */
}

.form-field:focus-within .form-field__icon {
  color: var(--field--icon-color-focus);
}

.form-field.is-disabled .form-field__icon {
  color: var(--field--icon-color-disabled);
}

/* Textarea */
.form-field.is-textarea {
  height: auto;
  padding: 12px 16px;
}

.form-field.is-textarea .form-field__control textarea {
  min-height: 96px;
  /* 48px x2 */
  resize: vertical;
}

/*
New: form-table-row (테이블을 대체하는 복합 행 구조)
"인증재료 품질규격 이병주" 영역과 같이 복잡한 인라인 구조에 사용
 */
.form-table-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  /* 행 간격 */
  width: 100%;
}

/* 복합 행의 라벨 영역 (PC 라벨 폭 고정) */
.form-table-row__label {
  flex: 0 0 var(--form-table-row--label-width);
  padding-right: 16px;
  padding-top: 14px;
  /* 48px 필드 높이 중앙에 맞추기 위한 조정 */
  font-size: var(--pc-fs-label-large);
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-basic);
  box-sizing: border-box;
}

/* 복합 행의 컨트롤 영역 (정적 텍스트와 인풋을 포함하는 우측 컨테이너) */
.form-table-row__controls {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
}

.form-table-row__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-table-row__static-text {
  flex-shrink: 0;
  font-size: var(--pc-fs-label-large);
  line-height: 36px;
  color: var(--text-basic);
  white-space: nowrap;
}

/* 반응형 (≤1024px) */
@media (max-width: 1024px) {
  .form-field {
    height: 36px;
    padding: 0 12px;
  }

  .form-field__control input,
  .form-field__control select,
  .form-field__control textarea {
    font-size: 14px;
  }

  .form-field__icon {
    width: 14px;
    height: 14px;
  }

  .form-field.is-textarea .form-field__control textarea {
    min-height: 80px;
  }

  .form-field-group {
    flex-direction: column;
    gap: 4px;
  }

  /* New: 복합 행 반응형 조정 */
  .form-table-row {
    flex-direction: column;
    margin-bottom: 8px;
  }

  .form-table-row__label {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
    margin-bottom: 4px;
  }

  .form-table-row__controls {
    /* 모바일에서는 column으로 설정하여 각 .form-table-row__item이 한 줄씩 차지하도록 함 */
    flex-direction: column;
    gap: 4px;
    /* 모바일 행 간격 */
  }

  /* New: 복합 행 내부 아이템이 모바일에서 100% 너비를 차지하도록 조정 */
  .form-table-row__item {
    width: 100%;
  }

  .form-table-row__static-text {
    line-height: 36px;
  }

  .form-field.is-inline {
    max-width: none;
    /* 모바일에서 max-width 제한 해제 */
  }

  /* 돋보기 아이콘을 위한 오른쪽 여백 확보 (모바일) */
  .form-field.is-search {
    padding-right: 34px;
    /* 모바일 padding 12px + 아이콘 크기/간격 */
    background-position: right 12px center;
    background-size: 14px;
    /* 모바일 아이콘 크기 */
  }

  /* 모바일에서 특기사항 재설정 */
  .special-note-field {
    grid-column: auto;
  }

  .special-note-label {
    margin-bottom: var(--gap-1);
  }
}

@media (max-width: 480px) {
  .form-table-row__static-text {
    font-size: var(--pc-fs-label-xsmall);
  }

  .form-field__control input,
  .form-field__control select,
  .form-field__control textarea,
  .form-field__control .custom-input,
  .form-field__control .form-select {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: var(--pc-fs-body-small);
  }
}

/*
  (옵션) 셸 없이 .custom-input / .form-select 단독 사용 시
 */
.custom-input,
.form-select {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--field--bd);
  border-radius: 6px;
  background: var(--field--bg);
  box-sizing: border-box;
}

.form-field.required {
  background-color: var(--warning-10) !important;
}

@media (max-width: 1024px) {

  .custom-input,
  .form-select {
    height: 36px;
    padding: 0 12px;
  }
}

/* [수정] label 전역은 영향 범위가 커서 .form-check 범위로 축소 */
.form-check label {
  display: inline-flex;
}

/* [유지] check-area는 그대로, gap 토큰만 확인 */
.check-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-6);
}

@media (max-width: 1380px) {
  .check-area {
    gap: var(--gap-4);
  }
}

/* 라디오(토큰화) */
.form-check.large {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  cursor: pointer;
}

/* 라디오 입력 */
.form-check.large input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  /* 16px */
  height: 1rem;
  border: var(--width-variable-regular) solid var(--border-disabled);
  border-radius: 50%;
  background-color: var(--surface-white);
  position: relative;
  cursor: pointer;
  transition: border-color 0.1s, background-color 0.1s, box-shadow 0.1s;
}

/* hover / focus */
.form-check.large input[type='radio']:hover {
  border-color: var(--border-secondary);
}

.form-check.large input[type='radio']:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(37, 110, 244, 0.25);
  border-color: var(--border-secondary);
}

/* checked */
.form-check.large input[type='radio']:checked {
  border-color: var(--border-secondary);
}

.form-check.large input[type='radio']:checked::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.5rem;
  height: 0.5rem;
  /* 8px */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--border-secondary);
}

/* 라벨 타이포 */
.form-check.large label {
  color: var(--text-basic);
  font-size: var(--pc-fs-label-medium);
  cursor: pointer;
  user-select: none;
}

@media (max-width: 480px) {
  .form-check.large label {
    font-size: var(--pc-fs-label-small);
  }
}

/* 체크박스 */
.form-check.large input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: var(--width-variable-regular) solid var(--border-disabled);
  border-radius: var(--radius-xsmall);
  background-color: var(--surface-white);
  cursor: pointer;
  transition: border-color 0.1s, background-color 0.1s, box-shadow 0.1s;
  vertical-align: middle;
  position: relative;
}

/* Hover */
.form-check.large input[type='checkbox']:hover {
  border-color: var(--border-primary);
}

/* Focus */
.form-check.large input[type='checkbox']:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(37, 110, 244, 0.25);
  border-color: var(--border-primary);
}

/* Checked — 아이콘 */
.form-check.large input[type='checkbox']:checked {
  border-color: var(--border-primary);
  background-color: var(--primary-50);
  background-image: url('../images/component/icon/ico_checkbox_checked_wh.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8rem;
  /* 약 12px */
}

/* Disabled */
.form-check.large input[type='checkbox']:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ━━━━ 테이블 ━━━━ */
.table-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  margin-top: var(--gap-8);
}

/* 상단 타이틀 + 버튼 */
.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-4);
}

.table-head .table-info {
  font-size: var(--pc-fs-body-small);
  color: var(--text-secondary);
}

.table-head .table-info strong {
  color: var(--information-90);
  font-weight: var(--typo-weight-bold);
}

@media (max-width: 480px) {
  .table-head .table-info {
    font-size: var(--pc-fs-body-xsmall);
  }
}

.table-actions {
  display: flex;
  gap: var(--gap-4);
}

.table-inner-actions {
  display: flex;
  gap: var(--gap-4);
  align-items: center;
}

@media (max-width: 480px) {
  .table-actions {
    justify-content: flex-end;
  }

  .table-section {
    margin-left: calc(-1 * var(--gap-2));
    margin-right: calc(-1 * var(--gap-2));
    width: calc(100% + var(--gap-2) * 2);
  }

  .table-head {
    flex-direction: column;
    align-items: inherit;
  }

  .data-table th,
  .data-table td {
    font-size: var(--pc-fs-label-small);
    padding: var(--padding-3) var(--padding-2);
    line-height: 1;
  }
}

/* 테이블 기본 */
.table-wrap {
  /* 반응형  */
  position: relative;
  width: 100%;
  
  border-top: 2px solid var(--divider-gray-dark);
  border-bottom: 1px solid var(--divider-gray-dark);
  background: var(--surface-white);

  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-30) var(--gray-5);
  /* Firefox */
}

/* Chrome, Edge, Safari */
.table-wrap::-webkit-scrollbar {
  height: 10px;
}

.table-wrap::-webkit-scrollbar-track {
  background: var(--gray-5);
  /* 밝은 회색 */
  border-radius: var(--radius-medium);
}

.table-wrap::-webkit-scrollbar-thumb {
  background-color: var(--gray-30);
  border-radius: var(--radius-medium);
  border: 2px solid var(--gray-5);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.table-wrap::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-50);
}

.table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}

/* 내부 테이블 */
.data-table {
  /* 반응형  */
  border-collapse: collapse;
  table-layout: auto;
  /* colgroup 반영 */
  width: 100%;
  /* 더 넓으면 스크롤 */
  min-width: 800px;
  /* 최소 100%는 채움 */
  text-align: center;
  font-size: var(--pc-fs-body-medium);
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--divider-gray-light);
  padding: var(--padding-3) var(--padding-3);
  color: var(--text-basic);
  vertical-align: middle;
  
  /* 반응형  */
  /* white-space: normal !important; */
  word-break: keep-all;
  word-wrap: break-word;
  
  /* 모바일 및 PC 둘다 적용 되도록 */
  overflow: hidden;
  white-space: nowrap !important;
  text-overflow: ellipsis;
}

.data-table th {
  background: var(--white);
  font-weight: var(--typo-weight-semibold);
  color: var(--text-bolder);
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--padding-4) var(--padding-3);

  white-space: normal;
  word-break: keep-all;
  word-wrap: break-word;
  line-height: 1.4;
  vertical-align: middle;
  text-align: center;
}

.data-table th em,
.data-table td em {
  color: var(--icon-point);
}

.data-table td {
  background: var(--surface-white);
  font-size: var(--pc-fs-body-xsmall);
  vertical-align: middle;
}

/* 체크박스/라디오 정렬 */
.data-table input[type='checkbox'],
.data-table input[type='radio'] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary-50);
}

/* 테이블 첫 컬럼 너비/정렬 */
.data-table th:first-child,
.data-table td:first-child {
  width: 48px;
  text-align: center;
}

.data-table th:first-child .form-check,
.data-table td:first-child .form-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 나이스셀렉트가 있는 th의 overflow 문제 해결 */
.data-table th:has(.nice-select) {
  overflow: visible;
}

/* 구형 브라우저 지원 (IE 미지원시 대체) */
.data-table th .form-field.is-select {
  position: static;
}

.data-table th .nice-select .list {
  z-index: 9999;
}

/* 테이블 반응형 */

@media (max-width: 1380px) {
  .data-table col {
    width: auto !important;
  }
}

/*
    file-tag (첨부 파일 표시 태그)
 */
.file-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  /* 파일 태그 높이 */
  padding: 0 8px 0 12px;
  border-radius: 9999px;
  /* Pill shape */
  background-color: var(--surface-secondary-subtler);
  /* 밝은 회색 배경 */
  color: var(--text-basic);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: default;
  box-sizing: border-box;
  max-width: 100%;
}

.file-tag__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.file-tag__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.file-tag__remove .svg-icon {
  width: var(--icon--size-medium);
  height: var(--icon--size-medium);
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}

.file-tag__remove:hover .svg-icon {
  transform: translateY(-1px);
}

/* 반응형: 스크롤 처리 */
@media (max-width: 1380px) {
  .table-wrap.scrollable {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 400px;
    position: relative;
  }

  .table-wrap.scrollable .data-table {
    min-width: 100%;
    /* 필요시 1000~1400px로 조정!!!!!!!! */
    width: max-content;
    /* 콘텐츠 길이에 맞춰 더 커질 수 있게 */
  }

  /* 헤더 sticky 안정화 */
  .table-wrap.scrollable .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-secondary-subtler);
  }

  /* 셀 줄바꿈 방지로 열 폭 유지 */
  .table-wrap.scrollable .data-table th,
  .table-wrap.scrollable .data-table td {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
 }


/* 모바일 테이블 내용 겹침 현상 수정  */
@media (max-width: 430px) {

	
	
  .table-wrap.scrollable {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  
  .data-table {
    min-width: 900px !important;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  
  .data-table th,
  .data-table td {
    white-space: nowrap;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 1.5;
    vertical-align: middle;
  }
  
  .data-table th:first-child, .data-table td:first-child{
  width: fit-content ;
  }
  
  
}


/* ━━━━━━━━━━━━━━━━━
  테이블내부 나이스셀렉트 보완 패치
━━━━━━━━━━━━━━━━━  */

/* sticky 헤더가 있다면 살짝 위로 */
.table-wrap.scrollable .data-table thead th {
  z-index: 4;
}

.data-table .nice-select.open {
  z-index: 5;
}

.data-table .nice-select .list {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
  animation: none !important;
}

.data-table .nice-select.open .list {
  display: block !important;
  opacity: 1 !important;
}

ul.ns-portal-list {
  position: fixed;
  display: block;
  overflow-y: auto;
  max-height: 240px;
  z-index: 10000;
  background-color: #fff;
  border-radius: 10px;
  border: solid 1px #e8e8e8;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  will-change: top, left, width;
  font-size: var(--pc-fs-body-small);
  color: var(--element-gray-dark);
}

ul.ns-portal-list li {
  line-height: 36px;
  height: 36px;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
}

ul.ns-portal-list li.focus,
ul.ns-portal-list li:hover {
  background: #f5f5f5;
}

ul.ns-portal-list li.selected {
  color: #003980;
  font-weight: 600;
}

.data-table .nice-select.ns-portaled .list {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━
  Pagination
━━━━━━━━━━━━━━━━━━━ */
.section_bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-8) 0;
  border-top: 1px solid var(--divider-gray-light);
  background: var(--surface-white);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
}

/* 숫자 버튼 리스트 */
.pagination .page-list {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  list-style: none;
}

/* 공통 버튼 — borderless */
.pagination .page,
.pagination .page-btn {
  width: 2rem;
  /* 32px */
  height: 2rem;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text-basic);
  font-size: var(--pc-fs-body-small);
  line-height: 1;
  font-weight: var(--typo-weight-medium);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.06s ease;
}

.pagination .page:hover {
  color: var(--text-primary);
}

.pagination .page.active,
.pagination .page[aria-current='page'] {
  background: var(--text-disabled-on);
  color: var(--surface-white);
}

/* 좌우 / 처음 / 끝 버튼 — 아이콘만 */
.pagination .page-btn {
  background: center / 0.75rem no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 0.9;
}

/* 아이콘 지정 */
.pagination .page-btn.first {
  background-image: url('../images/component/icon/ico_page_angle_double.svg');
  transform: rotate(180deg);
}

.pagination .page-btn.prev {
  background-image: url('../images/component/icon/ico_page_angle.svg');
  transform: rotate(180deg);
}

.pagination .page-btn.next {
  background-image: url('../images/component/icon/ico_page_angle.svg');
}

.pagination .page-btn.last {
  background-image: url('../images/component/icon/ico_page_angle_double.svg');
}

/* Disabled */
.pagination .page-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* 키보드 접근성: 보더 대신 포커스 링 */
.pagination .page:focus-visible,
.pagination .page-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--primary-50);
}

/* ━━━━ ≤768px : 살짝 컴팩트(보더 없음 유지) ━━━━ */
@media (max-width: 768px) {
  .pagination {
    gap: var(--gap-1);
  }

  .pagination .page-list {
    gap: var(--gap-1);
  }

  .pagination .page,
  .pagination .page-btn {
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    font-size: var(--mobile-fs-label-small);
  }

  .pagination .page-btn {
    background-size: 0.7rem;
    /* 11px */
  }
}

/* ━━━━ phones ≤480px : 화살표 포함 컴팩트, borderless ━━━━ */
@media (max-width: 480px) {
  .section_bottom {
    padding: var(--padding-6) 0;
    /* 위아래 24px / 좌우 12px */
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.1875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pagination>.page-btn {
    flex: 0 0 1.2rem;
    /* 24px 고정폭 */
  }

  /* 숫자 리스트는 약간 수축 허용(화살표 보호) */
  .pagination .page-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    /* 3px */
    flex: 1 1 auto;
    /* 숫자열만 수축 허용 */
    min-width: 0;
    /* 🔑 ellipsis/수축 동작 */
    white-space: nowrap;
    list-style: none;
    margin: 0;
    /* 기본 여백 제거 */
    padding: 0;
  }

  /* 화살표는 절대 수축 금지 → 항상 보임 */
  .pagination .page-btn {
    flex: 0 0 auto;
  }

  /* 버튼 24px — 정부 터치 타깃 최소 충족 */
  .pagination .page,
  .pagination .page-btn {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.8rem;
    background-color: transparent;
  }

  .pagination .page-btn {
    background-size: 0.5rem;
  }

  /* 활성 페이지(보더 없이 배경만) */
  .pagination .page.active,
  .pagination .page[aria-current='page'] {
    background: var(--text-disabled-on);
    color: var(--surface-white);
  }
}

/* ━━━━━━━━━━━━━━━━━━━
Badge (정부 공통 스타일)
━━━━━━━━━━━━━━━━━━━  */
.badge {
  /* size & radius */
  --bdg-h: var(--size-height-4);
  --bdg-px: var(--padding-4);
  --bdg-radius-gov: var(--radius-small);
  --bdg-radius-pill: var(--radius-full);

  /* default palette */
  --bdg-border: transparent;
  --bdg-border-hover: transparent;
  --bdg-bg-soft: var(--surface-secondary);
  --bdg-bg-hover: var(--surface-secondary-hover, rgba(0, 0, 0, 0.03));
  --bdg-fg: var(--text-basic);
  --bdg-fg-hover: var(--text-basic);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bdg-h);
  min-width: 68px;
  padding: 0 var(--bdg-px);
  border-radius: var(--bdg-radius-gov);
  border: var(--width-variable-regular) solid var(--bdg-border);
  background-color: var(--bdg-bg-soft);
  color: var(--bdg-fg);
  font-size: var(--pc-fs-label-small);
  line-height: 1;
  white-space: nowrap;
  font-weight: var(--typo-weight-semibold);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* hover 공통 */
.badge:hover {
  background-color: var(--bdg-bg-hover);
  border-color: var(--bdg-border-hover);
  color: var(--bdg-fg-hover);
}

/* 반응형 폰트 */
@media (max-width: 767px) {
  .badge {
    font-size: var(--mobile-fs-label-small);
  }
}

.badge.large {
  --bdg-h: var(--size-height-5);
}

/* Line 타입 (outline tone) */
.badge.line {
  background-color: var(--surface-white);
  border-color: var(--bdg-border);
  color: var(--bdg-fg);
}

.badge.line:hover {
  background-color: var(--bdg-bg-hover);
  border-color: var(--bdg-border-hover);
  color: var(--bdg-fg-hover);
}

/* Round 타입 */
.badge.round {
  border-radius: var(--bdg-radius-pill);
}

/* ━━━━━━━━━━━━━━━━━━━
Color presets
━━━━━━━━━━━━━━━━━━━ */

/* Gray */
.badge.gray {
  --bdg-border: var(--element-gray-lighter);
  --bdg-border-hover: var(--element-gray-dark);
  --bdg-bg-soft: var(--element-gray-lighter);
  --bdg-bg-hover: var(--element-gray);
  --bdg-fg: var(--text-subtle);
  --bdg-fg-hover: var(--surface-white);
}

/* Blue (정보) */
.badge.blue {
  --bdg-border-hover: var(--information-10);
  --bdg-bg-soft: var(--information-10);
  --bdg-bg-hover: var(--element-information);
  --bdg-fg: var(--text-information);
  --bdg-fg-hover: var(--surface-white);
}

/* Green (성공) */
.badge.green {
  --bdg-border-hover: var(--success-10);
  --bdg-bg-soft: var(--success-10);
  --bdg-bg-hover: var(--element-success);
  --bdg-fg: var(--text-success);
  --bdg-fg-hover: var(--surface-white);
}

/* Brown (경고) */
.badge.brown {
  --bdg-border-hover: var(--element-warning-lighter);
  --bdg-bg-soft: var(--element-warning-lighter);
  --bdg-bg-hover: var(--element-warning);
  --bdg-fg: var(--text-warning);
  --bdg-fg-hover: var(--surface-white);
}

/* Deep Blue (정부형 Primary 강조) */
.badge.deepBlue {
  --bdg-border: var(--primary-80);
  --bdg-border-hover: var(--element-secondary);
  --bdg-bg-soft: #fff;
  --bdg-bg-hover: var(--element-secondary);
  --bdg-fg: var(--primary-80);
  --bdg-fg-hover: var(--surface-white);
}

/* Red (삭제) */
.badge.red {
  --bdg-border-hover: var(--information-10);
  --bdg-bg-soft: var(--danger-10);
  --bdg-bg-hover: var(--element-danger);
  --bdg-fg: var(--text-danger);
  --bdg-fg-hover: var(--surface-white);
}

.filter-grid.m_popup {
	display: block;
}
.filter-grid.m_popup .th {
	padding-left: 16px;
	margin-bottom: 5px;
}
.btn.m_popup {
	height: 36px;
}
.filter-box.m_popup {
	padding: 18px 16px;
	display: flex;
	align-items: flex-end;
	gap: 15px;
}
.popup-content.table-wrap {
	border-bottom: 0;
}
.table-view.data-table {
	text-align: left;
}
.table-view.data-table th {
	padding: 10px 15px;
	background-color: var(--primary-5);
}
.table-view.data-table th:first-child {
	width: 30%;
	text-align: left;
}
.table-view.data-table td:first-child {
	width: 70%;
	text-align: left;
}
.custom-input.m_popup:focus-visible {
	outline: none !important;
}
@media (max-width: 1380px) {
	.popup-content .table-view.data-table {
		min-width: 100%;
	}
}
@media (max-width: 500px) {
	.m_popup_btn {
		display: flex;
		gap: 5px;
	}
}
/* 메인페이지 이력번호 조회 팝업 e */
/* 팝업 입력오류 e  */
.pop_error {
	width: 100%;
	height: 200px;
	padding: 25px;
	border: 1px solid #cacaca;
	border-radius: 5px;
	margin-top: 20px;
}
.pop_error .error_wr {
	height: 100%;
	background-color: #F8F9Fd;
	display: flex;
	justify-content: center;
	align-items: center;
}
.pop_error .error_txt {
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}


.footer-call {
  text-align: right;
  line-height: 1.5;
}

.footer-call .call-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.footer-call .addr,
.footer-call .call-number,
.footer-call a {
  white-space: nowrap;
}

/* 모바일/태블릿 */
@media (max-width: 1023px) {
  .site-footer .footer-main .inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-brand {
    width: 100%;
  }

  .footer-call {
    width: 100%;
    text-align: left;
    margin-top: 12px;
  }

  .footer-call .call-row {
    justify-content: flex-start;
  }
}

/*footer 전화번호 배치 수정 */
@media (max-width: 767px) {
  .footer-call .call-row {
    display: block;
    margin-bottom: 10px;
  }

  .footer-call .call-row .bar,
  .footer-call .call-row .slash {
    display: none;
  }

  .footer-call .call-row p,
  .footer-call .call-row a,
  .footer-call > p.addr {
    display: block;
    margin: 2px 0;
  }

  .footer-call .call-number {
    font-size: 18px;
  }

  .footer-call .addr,
  .footer-call a {
    white-space: normal;
  }
}