@charset "UTF-8";
/* abstracts */
/* px → rem 변환 함수 */
/* 플렉스 박스 */
/* 말줄임 */
/* 폰트 정의 */
/* 언어별 폰트 */
/* 한국어 */
/* 영어 */
/* 중국어 간체 (Simplified Chinese) */
/* 중국어 번체 (Traditional Chinese) */
/* 일본어 */
/* abstracts */
/* px → rem 변수, 언어별 폰트 사이즈 지정을 위해 폰트에서 해당 변수 사용 */
/* base */
/* abstracts */
/* 기본 여백, 폰트 초기화 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 시맨틱 요소 표시 보장 */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

figure {
  margin: 0;
}

/* 공통 박스모델 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 기본 폰트, 색상 */
html, body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  touch-action: none; /* pinch-zoom + pan 차단 */
  overscroll-behavior: none; /* 화면 밀림/체인 스크롤 방지 */
}

/* 문서 루트 언어별 폰트 패밀리 적용 */
/* 루트 글꼴 크기 */
html:lang(ko) {
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}

html:lang(en) {
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}

html:lang(zh-CN) {
  font-family: "Noto Sans SC", system-ui, sans-serif;
  font-feature-settings: "palt" on;
}

html:lang(zh-TW) {
  font-family: "Noto Sans TC", system-ui, sans-serif;
  font-feature-settings: "palt" on;
}

html:lang(ja) {
  font-family: "Noto Sans JP", system-ui, sans-serif;
}

/* 링크 */
a {
  color: inherit;
  text-decoration: none;
}

/* 목록 점 제거 (시각적만) */
ul, ol {
  list-style: none;
}

/* 테이블 시각 정리 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 폼 요소 기본값 유지 + 폰트 통일 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* 버튼 의미 유지 */
button {
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 1) 기본으로는 포커스 링 안 보이게 */
:focus,
:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 2) 키보드 사용 중일 때만 포커스 링 표시 (기본 = 바깥) */
html.is-keyboard-user :focus,
html.is-keyboard-user :focus-visible {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3B4CCF;
}

/* 3) 고대비 모드 + 키보드일 때 (기본 = 바깥) */
html.mode-high-contrast.is-keyboard-user :focus,
html.mode-high-contrast.is-keyboard-user :focus-visible {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FFFF2E;
}

/* 4) 안쪽 포커스가 필요한 요소만 */
html.is-keyboard-user .focus-inset:focus,
html.is-keyboard-user .focus-inset:focus-visible {
  box-shadow: inset 0 0 0 3px #3B4CCF, inset 0 0 0 5px #FFFFFF;
}

/* 5) 고대비 + 안쪽 포커스 */
html.mode-high-contrast.is-keyboard-user .focus-inset:focus,
html.mode-high-contrast.is-keyboard-user .focus-inset:focus-visible {
  box-shadow: inset 0 0 0 3px #FFFF2E, inset 0 0 0 5px #FFFFFF;
}

/* 6) table의 tr에 포커스 (row 전용 예외 처리) */
html.is-keyboard-user tr[tabindex]:focus,
html.is-keyboard-user tr[tabindex]:focus-visible {
  position: relative;
  transform: translateZ(0);
}

/* 7) 음량조절 모달 작동 버튼 */
html.is-keyboard-user .volume-marks .mark:focus::after,
html.is-keyboard-user .volume-marks .mark:focus-visible::after {
  opacity: 1;
}

/* 8) wrapper가 포커스일 때만, 활성 슬라이드에 링 표시 */
html.is-keyboard-user .swiper-wrapper:focus-visible .swiper-slide.swiper-slide-active,
html.is-keyboard-user .swiper-wrapper:focus .swiper-slide.swiper-slide-active {
  box-shadow: inset 0 0 0 3px #3B4CCF, inset 0 0 0 5px #FFFFFF;
}

/* 스크린리더용 클래스 */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* abstracts */
/* Pretendard Font Faces */
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Black.woff2") format("woff2"), url("/assets/fonts/Pretendard-Black.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-ExtraBold.woff2") format("woff2"), url("/assets/fonts/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Bold.woff2") format("woff2"), url("/assets/fonts/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-SemiBold.woff2") format("woff2"), url("/assets/fonts/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Medium.woff2") format("woff2"), url("/assets/fonts/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Regular.woff2") format("woff2"), url("/assets/fonts/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Light.woff2") format("woff2"), url("/assets/fonts/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-ExtraLight.woff2") format("woff2"), url("/assets/fonts/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Thin.woff2") format("woff2"), url("/assets/fonts/Pretendard-Thin.woff") format("woff");
}
/* components */
/* abstracts */
.touch-pointer {
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transform: translate(-50%, -50%); /* 중심이 좌표에 오도록 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* UI 클릭/터치 방해 금지 */
  z-index: 99999;
  background: url(../../../assets/images/common/touch_pointer.svg) no-repeat center/contain;
}
.touch-pointer.is-show {
  opacity: 1;
  visibility: visible;
}

/* abstracts */
.tab-menu {
  /* 기본 탭 메뉴 토큰 */
  --tm-list-bg: #ffffff;
  --tm-btn-bg: #ffffff;
  --tm-btn-active-bg: #3B4CCF;
  --tm-btn-color: #000000;
  --tm-btn-active-color: #ffffff;
  --tm-btn-active-color02: #3B4CCF;
  --tm-btn-border: #888888;
  /* line 스타일 전용 토큰 */
  --tm-line-border-color: #888888;
  --tm-line-active-border: #3B4CCF;
  --tm-line-color: #555555;
  --tm-line-active-color: #3B4CCF;
  width: 100%;
}
.tab-menu .tab-list {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: var(--tm-list-bg);
}
.tab-menu .tab-list li {
  position: relative;
  width: 33.3333333333%;
  padding: 0 24px;
  height: 114px;
  border-right: 1px solid var(--tm-btn-border);
  border-bottom: 1px solid var(--tm-btn-border);
  background: var(--tm-btn-bg);
}
.tab-menu .tab-list li:last-child {
  border-right: 0;
}
.tab-menu .tab-list li.is-active {
  border-right: 1px solid var(--tm-btn-active-bg);
  border-bottom: 1px solid var(--tm-btn-active-bg);
  background: var(--tm-btn-active-bg);
}
.tab-menu .tab-list li.is-active .tab-btn {
  color: var(--tm-btn-active-color);
  font-weight: 800;
}
.tab-menu .tab-list li .tab-btn {
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 500;
  color: var(--tm-btn-color);
  letter-spacing: -0.02em;
  background: transparent;
}
.tab-menu .tab-list li .tab-btn:focus, .tab-menu .tab-list li .tab-btn:focus-visible {
  box-shadow: none;
  outline: none;
}
.tab-menu .tab-list li .tab-btn:focus::after, .tab-menu .tab-list li .tab-btn:focus-visible::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 0;
  pointer-events: none;
  z-index: 100;
  box-shadow: none;
}
html.is-keyboard-user .tab-menu .tab-list li .tab-btn:focus::after, html.is-keyboard-user .tab-menu .tab-list li .tab-btn:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3B4CCF;
}
html.mode-high-contrast.is-keyboard-user .tab-menu .tab-list li .tab-btn:focus::after, html.mode-high-contrast.is-keyboard-user .tab-menu .tab-list li .tab-btn:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FFFF2E;
}
.tab-menu .tab-cont {
  border-top: 1px solid var(--tm-btn-border);
}
.tab-menu .tab-cont .tab-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  display: none;
}
.tab-menu .tab-cont .tab-panel.is-active {
  display: flex;
}
.tab-menu {
  /* 항목 2개인 탭 메뉴 */
}
.tab-menu.tab02 .tab-list li {
  width: 100%;
  height: 80px;
}
.tab-menu {
  /* 언더라인 스타일 탭 메뉴 */
}
.tab-menu.line .tab-list {
  border-bottom: 1px solid var(--tm-line-border-color);
}
.tab-menu.line .tab-list li {
  width: 50%;
  padding: 0 36px;
  height: 86px;
  border: 0;
}
.tab-menu.line .tab-list li.is-active {
  border-bottom: 4px solid var(--tm-line-active-border);
  background: var(--tm-btn-bg);
}
.tab-menu.line .tab-list li.is-active .tab-btn {
  color: var(--tm-line-active-color);
  font-weight: 700;
}
.tab-menu.line .tab-list li .tab-btn {
  color: var(--tm-line-color);
  letter-spacing: 0;
}

/* 낮은 자세 모드 */
.mode-low-posture .tab-menu .tab-list li {
  height: 80px;
}
.mode-low-posture .tab-menu .tab-list li .tab-btn {
  font-size: 1.75rem;
}

/* 고대비 모드 */
.mode-high-contrast .tab-menu {
  /* 기본 탭 토큰 교체 */
  --tm-list-bg: #1B1F23;
  --tm-btn-bg: #1B1F23;
  --tm-btn-active-bg: #1AEBFF;
  --tm-btn-color: #ffffff;
  --tm-btn-active-color: #000000;
  --tm-btn-border: #B6B6B6;
  /* line 전용 토큰 교체 */
  --tm-line-border-color: #B6B6B6;
  --tm-line-active-border: #1AEBFF;
  --tm-line-color: #ffffff;
  --tm-line-active-color: #1AEBFF;
}

/* abstracts */
.select-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.custom-select {
  --cs-bg: #fff;
  --cs-text: #000;
  --cs-border: #888;
  --cs-active-bg: #EEEFFF;
  --cs-active-text: #3B4CCF;
  --cs-radius: 8px;
  --cs-active-radius: 8px 8px 0 0;
  --cs-active-radius02: 0 0 8px 8px;
  position: relative;
  width: 200px;
  border-radius: var(--cs-radius);
  z-index: 70;
  cursor: pointer;
}
.custom-select .select-item {
  position: relative;
  width: 100%;
  height: 72px;
  padding: 0 44px 0 24px;
  font-size: 1.75rem;
}
html:lang(en) .custom-select .select-item {
  font-size: 1.225rem;
}
.custom-select .select-item {
  line-height: 119%;
  font-weight: 500;
  text-align: left;
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-bg);
  z-index: 1;
  overflow: hidden;
}
.custom-select .select-item.on {
  border-radius: var(--cs-active-radius);
}
.custom-select .select-item.on::after {
  transform: translateY(-50%) rotate(180deg);
}
.custom-select .select-item::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  background: url(../../../assets/images/icon/arrow_down.svg) no-repeat center/contain;
}
.custom-select .option-list-wrap {
  display: none;
  position: absolute;
  top: 72px;
  left: 0;
  width: 100%;
  border: 1px solid var(--cs-border);
  border-top: none;
  border-radius: var(--cs-active-radius02);
  overflow: hidden;
}
.custom-select .option-controls {
  display: none;
}
.custom-select .option-controls .btn-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 56px;
  padding: 8px 0;
  background: var(--cs-bg);
  z-index: 2;
  cursor: default;
}
.custom-select .option-controls .btn-wrap.prev {
  top: 0;
  border-bottom: 1px solid var(--cs-border);
}
.custom-select .option-controls .btn-wrap.next {
  bottom: 0;
  border-top: 1px solid var(--cs-border);
}
.custom-select .option-controls .btn-wrap.is-disabled button {
  pointer-events: none;
}
.custom-select .option-controls .btn-wrap.is-disabled button .label {
  color: #B7B7B7;
}
.custom-select .option-controls .btn-wrap.is-disabled.prev .icon {
  background: url(../../../assets/images/icon/arrow_up_gy.svg) no-repeat center/contain;
}
.custom-select .option-controls .btn-wrap.is-disabled.next .icon {
  background: url(../../../assets/images/icon/arrow_down_gy.svg) no-repeat center/contain;
}
.custom-select .option-controls button {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 7px;
  background: transparent;
}
.custom-select .option-controls button.prev-btn .icon {
  background: url(../../../assets/images/icon/arrow_up_bl.svg) no-repeat center/contain;
}
.custom-select .option-controls button.next-btn .icon {
  background: url(../../../assets/images/icon/arrow_down_bl.svg) no-repeat center/contain;
}
.custom-select .option-controls button .icon {
  display: block;
  width: 20px;
  height: 20px;
}
.custom-select .option-controls button .label {
  font-size: 1.25rem;
  font-weight: 700;
  color: #3B4CCF;
}
.custom-select .option-scroll {
  left: 0;
  width: 100%;
  max-height: 720px;
  background: var(--cs-bg);
  overflow-y: scroll;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
}
.custom-select .option-scroll::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.custom-select .option-list {
  width: 100%;
  z-index: 70;
}
.custom-select .option-list > li {
  position: relative;
  width: 100%;
  height: 72px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--cs-border);
  cursor: default;
}
.custom-select .option-list > li:last-child {
  border-bottom: 0;
}
.custom-select .option-list > li button {
  width: 100%;
  height: 100%;
  color: var(--cs-text);
  text-align: left;
  font-size: 1.75rem;
}
html:lang(en) .custom-select .option-list > li button {
  font-size: 1.225rem;
}
.custom-select .option-list > li button {
  line-height: 119%;
  font-weight: 500;
  background: var(--cs-bg);
}
.custom-select .option-list > li button.is-active {
  color: var(--cs-active-text);
  font-weight: 800;
  background: var(--cs-active-bg);
}
.custom-select .option-list > li button:focus, .custom-select .option-list > li button:focus-visible {
  box-shadow: none;
  outline: none;
}
.custom-select .option-list > li button:focus::after, .custom-select .option-list > li button:focus-visible::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 0;
  pointer-events: none;
  z-index: 100;
  box-shadow: none;
}
html.is-keyboard-user .custom-select .option-list > li button:focus::after, html.is-keyboard-user .custom-select .option-list > li button:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3B4CCF;
}
html.mode-high-contrast.is-keyboard-user .custom-select .option-list > li button:focus::after, html.mode-high-contrast.is-keyboard-user .custom-select .option-list > li button:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FFFF2E;
}
.custom-select .option-list > li.is-active {
  background: var(--cs-active-bg);
}

/* 낮은 자세 모드 */
.mode-low-posture .custom-select .select-item {
  height: 56px;
  font-size: 1.5rem;
}
.mode-low-posture .custom-select .option-list-wrap {
  padding: 56px 0;
  top: 56px;
}
.mode-low-posture .custom-select .option-controls {
  display: block;
}
.mode-low-posture .custom-select .option-scroll {
  height: 335px;
}
.mode-low-posture .custom-select .option-list {
  top: 56px;
}
.mode-low-posture .custom-select .option-list > li {
  height: 56px;
}
.mode-low-posture .custom-select .option-list > li.move-btn-wrap {
  display: block;
}
.mode-low-posture .custom-select .option-list > li.move-btn-wrap.is-disabled button.prev-btn .icon {
  background: url(../../../assets/images/icon/arrow_up_gy.svg) no-repeat center/contain;
}
.mode-low-posture .custom-select .option-list > li.move-btn-wrap.is-disabled button.next-btn .icon {
  background: url(../../../assets/images/icon/arrow_down_gy.svg);
}
.mode-low-posture .custom-select .option-list > li.move-btn-wrap.is-disabled button .label {
  color: #B7B7B7;
}
.mode-low-posture .custom-select .option-list > li button {
  font-size: 1.5rem;
}

/* 낮은 자세 모드 + 영문 */
html:lang(en).mode-low-posture .custom-select .select-item {
  font-size: 1.05rem;
}
html:lang(en).mode-low-posture .custom-select .option-list > li button {
  font-size: 1.05rem;
}

/* 고대비 모드 */
.mode-high-contrast .custom-select {
  --cs-bg: #fff;
  --cs-text: #000;
  --cs-border: #444;
  --cs-active-bg: #000;
  --cs-active-text: #fff;
  --cs-radius: 0;
  --cs-active-radius: 0;
  --cs-active-radius02: 0;
}

/* abstracts */
/* 기본(네이티브) 모양을 제거 */
input[type=search] {
  appearance: textfield;
  -webkit-appearance: textfield;
}

/* X 버튼 및 검색 결과 버튼 숨기기 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button {
  display: none;
}

.search-wrap {
  position: relative;
}
.search-wrap .search-input {
  width: 440px;
  height: 72px;
  font-size: 1.75rem;
  color: #000;
  padding: 0 80px 0 32px;
  border-radius: 100px;
  border: none;
  background: #F0F0F0;
}
.search-wrap .search-input::placeholder {
  color: #555555;
}
.search-wrap .search-btn {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #3B4CCF;
}

/* abstracts */
.card {
  /* Card 전용 로컬 컬러 토큰 */
  --cd-border: #888;
  --cd-bg: #ffffff;
  --cd-title-color: #000000;
  --cd-meta-term-color: #3B4CCF;
  --cd-meta-desc-color: #555;
  --cd-radius: 16px;
  --cd-thumb-radius: 8px;
  width: calc(33.3333333333% - 10.6666666667px);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  background: var(--cd-bg);
}
.card .card-link {
  display: block;
  width: 100%;
  border-radius: var(--cd-radius);
  padding: 16px 16px 24px;
}
.card .card-thumbnail {
  width: 100%;
  height: 180px;
  margin-bottom: 24px;
  border-radius: var(--cd-thumb-radius);
  overflow: hidden;
}
.card .card-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card .card-info {
  width: 100%;
}
.card .card-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cd-title-color);
  line-height: 33px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card .card-meta {
  width: 100%;
  padding-top: 16px;
}
.card .card-meta-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.card .card-meta-item:first-child {
  margin-bottom: 8px;
}
.card .card-term {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cd-meta-term-color);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.card .card-desc {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 32px;
  color: var(--cd-meta-desc-color);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 낮은 자세 모드 */
.mode-low-posture .card .card-link {
  padding: 16px 16px 20px;
}
.mode-low-posture .card .card-thumbnail {
  height: 160px;
  margin-bottom: 16px;
}
.mode-low-posture .card .card-title {
  font-size: 1.5rem;
  line-height: 29px;
}
.mode-low-posture .card .card-meta {
  padding-top: 12px;
}

/* 고대비 모드 - 컬러만 변경 */
.mode-high-contrast .card {
  --cd-border: #B6B6B6;
  --cd-bg: #1B1F23;
  --cd-title-color: #ffffff;
  --cd-meta-term-color: #1AEBFF;
  --cd-meta-desc-color: #C1C1C1;
  --cd-radius: 0;
  --cd-thumb-radius: 0;
}

/* abstracts */
.pagination {
  /* Pagination 전용 로컬 디자인 토큰 */
  --pg-btn-color: #555;
  --pg-btn-active-color: #ffffff;
  --pg-btn-active-bg: #3B4CCF;
  /* 아이콘/이미지 토큰 */
  --pg-arrow-first: url(../../../assets/images/icon/arrow_first.svg);
  --pg-arrow-prev: url(../../../assets/images/icon/arrow_left.svg);
  --pg-arrow-next: url(../../../assets/images/icon/arrow_right.svg);
  --pg-arrow-last: url(../../../assets/images/icon/arrow_last.svg);
  width: 100%;
  padding-bottom: 61px;
}
.pagination.is-hidden {
  display: none;
}
.pagination .Zebra_Pagination {
  width: 100%;
}
.pagination .Zebra_Pagination ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.pagination .Zebra_Pagination a {
  display: block;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--pg-btn-color);
  letter-spacing: -0.02em;
  text-align: center;
  border-radius: 48px;
  background: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pagination .Zebra_Pagination a.current {
  color: var(--pg-btn-active-color);
  background: var(--pg-btn-active-bg);
}
.pagination .Zebra_Pagination a.navigation {
  margin: 0;
  padding: 0;
}
.pagination .Zebra_Pagination a.first {
  background: var(--pg-arrow-first) no-repeat center/24px;
}
.pagination .Zebra_Pagination a.previous {
  background: var(--pg-arrow-prev) no-repeat center/24px;
}
.pagination .Zebra_Pagination a.next {
  background: var(--pg-arrow-next) no-repeat center/24px;
}
.pagination .Zebra_Pagination a.last {
  background: var(--pg-arrow-last) no-repeat center/24px;
}
.pagination .Zebra_Pagination span {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--pg-btn-color);
  letter-spacing: -0.02em;
  text-align: center;
}

/* 낮은 자세 모드 */
.mode-low-posture .pagination {
  padding-bottom: 26px;
}
.mode-low-posture .pagination .Zebra_Pagination a {
  min-width: 40px;
  height: 40px;
  border-radius: 40px;
}

/* 고대비 모드 */
.mode-high-contrast .pagination {
  /* 로컬 토큰 오버라이드 */
  --pg-btn-color: #BCBCBC;
  --pg-btn-active-color: #1B1F23;
  --pg-btn-active-bg: #1AEBFF;
  /* 아이콘/이미지 토큰 */
  --pg-arrow-first: url(../../../assets/images/icon/high-contrast/arrow_first.svg);
  --pg-arrow-prev: url(../../../assets/images/icon/high-contrast/arrow_left.svg);
  --pg-arrow-next: url(../../../assets/images/icon/high-contrast/arrow_right.svg);
  --pg-arrow-last: url(../../../assets/images/icon/high-contrast/arrow_last.svg);
}

/* abstracts */
.floating-btn {
  /* 플로팅 버튼 전용 로컬 디자인 토큰 */
  --fb-border: #3B4CCF;
  --fb-label: #3B4CCF;
  --fb-divide-border: #3B4CCF;
  /* 아이콘/이미지 토큰 */
  --fb-arrow-up-icon: url(../../../assets/images/icon/arrow_up_bl.svg);
  --fb-arrow-down-icon: url(../../../assets/images/icon/arrow_down_bl.svg);
  position: fixed;
  right: 32px;
  bottom: 235px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  border: 1px solid var(--fb-border);
  border-radius: 8px;
  overflow: hidden;
  z-index: 60;
}
.floating-btn .btn-wrap {
  position: relative;
  height: 52px;
  padding: 14px 18px;
  background: #fff;
}
.floating-btn .btn-wrap.prev::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--fb-divide-border);
}
.floating-btn .btn-wrap.prev {
  /* 이전 버튼만 화면에 노출될때 추가 */
}
.floating-btn .btn-wrap.prev.no-bd::before {
  content: none;
}
.floating-btn .sec-move-btn {
  width: 100%;
  height: 100%;
  background: #fff;
  gap: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.floating-btn .sec-move-btn:focus, .floating-btn .sec-move-btn:focus-visible {
  box-shadow: none;
  outline: none;
}
.floating-btn .sec-move-btn:focus::after, .floating-btn .sec-move-btn:focus-visible::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 0;
  pointer-events: none;
  z-index: 100;
  box-shadow: none;
}
html.is-keyboard-user .floating-btn .sec-move-btn:focus::after, html.is-keyboard-user .floating-btn .sec-move-btn:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3B4CCF;
}
html.mode-high-contrast.is-keyboard-user .floating-btn .sec-move-btn:focus::after, html.mode-high-contrast.is-keyboard-user .floating-btn .sec-move-btn:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FFFF2E;
}
.floating-btn .sec-move-btn .label {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fb-label);
}
.floating-btn .sec-move-btn .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.floating-btn .sec-move-btn.prev .icon {
  background: var(--fb-arrow-up-icon) no-repeat center/contain;
}
.floating-btn .sec-move-btn.next .icon {
  background: var(--fb-arrow-down-icon) no-repeat center/contain;
}

/* 낮은 자세 모드 */
.mode-low-posture .floating-btn {
  display: flex;
  right: 24px;
  bottom: 169px;
}

/* 고대비 모드 */
.mode-high-contrast .floating-btn {
  /* 플로팅 버튼 전용 로컬 디자인 토큰 */
  --fb-border: #fff;
  --fb-label: #000;
  --fb-divide-border: #000;
  /* 아이콘/이미지 토큰 */
  --fb-arrow-up-icon: url(../../../assets/images/icon/high-contrast/arrow_up_bk.svg);
  --fb-arrow-down-icon: url(../../../assets/images/icon/high-contrast/arrow_down_bk.svg);
}

/* abstracts */
.filter-menu {
  /* Filter 전용 로컬 디자인 토큰 */
  --fm-bg: #fff;
  --fm-border: #888;
  --fm-btn-text: #333;
  --fm-btn-bg: #fff;
  --fm-btn-border: #888;
  --fm-move-btn-bg: #fff;
  --fm-move-btn-border: #888;
  --fm-btn-active-text: #fff;
  --fm-btn-active-bg: #3B4CCF;
  --fm-btn-active-border: #3B4CCF;
  /* 아이콘/이미지 토큰 */
  --fm-prev-btn-icon: url(../../../assets/images/icon/arrow_left_bk.svg);
  --fm-next-btn-icon: url(../../../assets/images/icon/arrow_right_bk.svg);
  width: 100%;
  /* 좌우 이동 버튼이 있는 필터 리스트 */
}
.filter-menu .filter-list-area {
  position: relative;
  width: 100%;
  padding: 0 32px 24px;
  border-bottom: 1px solid var(--fm-border);
  background: var(--fm-bg);
}
.filter-menu .filter-list-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.filter-menu .filter-list-wrap .filter-list {
  width: calc(100% - 146px);
  padding-bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 0;
  background: transparent;
  touch-action: pan-y;
}
.filter-menu {
  /* 필터 리스트 좌우 이동 버튼 */
}
.filter-menu .filter-move-btn {
  width: 57px;
  height: 57px;
  border-radius: 50%;
  border: 1px solid var(--fm-move-btn-border);
}
.filter-menu .filter-move-btn.prev {
  background: var(--fm-prev-btn-icon) no-repeat center/24px var(--fm-move-btn-bg);
}
.filter-menu .filter-move-btn.next {
  background: var(--fm-next-btn-icon) no-repeat center/24px var(--fm-move-btn-bg);
}
.filter-menu {
  /* 기본 필터 리스트 */
}
.filter-menu .filter-list {
  width: 100%;
  padding-bottom: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--fm-border);
  background: var(--fm-bg);
}
.filter-menu .filter-list li .filter-btn {
  height: 57px;
  padding: 0 24px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--fm-btn-text);
  text-align: center;
  letter-spacing: -0.02em;
  border-radius: 100px;
  border: 1px solid var(--fm-btn-border);
  background: var(--fm-btn-bg);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.filter-menu .filter-list li.is-active .filter-btn {
  font-weight: 800;
  color: var(--fm-btn-active-text);
  border: 2px solid var(--fm-btn-active-border);
  background: var(--fm-btn-active-bg);
}
.filter-menu .filter-panel {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 낮은 자세 모드 */
.mode-low-posture .filter-menu .filter-list-wrap {
  padding: 0 24px 16px;
}
.mode-low-posture .filter-menu .filter-move-btn {
  width: 53px;
  height: 53px;
  background-size: 20px;
}
.mode-low-posture .filter-menu .filter-list li .filter-btn {
  height: 53px;
}

/* 고대비 모드 — 컬러만 변경 */
.mode-high-contrast .filter-menu {
  --fm-bg: #1B1F23;
  --fm-border: #B6B6B6;
  --fm-btn-text: #fff;
  --fm-btn-bg: #1B1F23;
  --fm-btn-border: #C8C8C8;
  --fm-move-btn-bg: #1B1F23;
  --fm-move-btn-border: #fff;
  --fm-btn-active-text: #000;
  --fm-btn-active-bg: #1AEBFF;
  --fm-btn-active-border: #1AEBFF;
  /* 아이콘/이미지 토큰 */
  --fm-prev-btn-icon: url(../../../assets/images/icon/high-contrast/arrow_left_wh.svg);
  --fm-next-btn-icon: url(../../../assets/images/icon/high-contrast/arrow_right_wh.svg);
}

/* abstracts */
.tb-wrap {
  /* === traffic table color tokens === */
  --tb-th-bg: #0B162F;
  --tb-th-text: #FFFFFF;
  --tb-th-border-right: #FFFFFF;
  --tb-td-bg: #FFFFFF;
  --tb-first-td-bg: #FFFFFF;
  --tb-td-text: #000000;
  --tb-td-border: #888888;
  width: 100%;
  padding-bottom: 24px;
}
.tb-wrap .traffic-table {
  width: 100%;
  table-layout: fixed;
}
.tb-wrap thead tr th {
  height: 60px;
  font-size: 1.25rem;
}
html:lang(en) .tb-wrap thead tr th {
  font-size: 1rem;
}
.tb-wrap thead tr th {
  color: var(--tb-th-text);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--tb-th-border-right);
  background: var(--tb-th-bg);
}
.tb-wrap thead tr th:last-child {
  border-right: none;
}
.tb-wrap tbody tr td {
  height: 64px;
  font-size: 1.25rem;
}
html:lang(en) .tb-wrap tbody tr td {
  font-size: 1rem;
}
.tb-wrap tbody tr td {
  line-height: 119%;
  color: var(--tb-td-text);
  font-weight: 500;
  vertical-align: middle;
  text-align: center;
  border: 1px solid var(--tb-td-border);
  background: var(--tb-td-bg);
}
.tb-wrap tbody tr td:nth-child(2), .tb-wrap tbody tr td:nth-child(3) {
  font-size: 1.5rem;
}
html:lang(en) .tb-wrap tbody tr td:nth-child(2), html:lang(en) .tb-wrap tbody tr td:nth-child(3) {
  font-size: 1.35rem;
}
.tb-wrap tbody tr td:first-child {
  border-left: none;
  background: var(--tb-first-td-bg);
}
.tb-wrap tbody tr td:last-child {
  border-right: none;
}
.tb-wrap .logo-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.tb-wrap .logo-wrap .inner {
  width: 120px;
  height: 40px;
}
.tb-wrap .logo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 낮은 자세 모드 */
.mode-low-posture .tb-wrap {
  padding-bottom: 0;
}
.mode-low-posture .tb-wrap thead tr th {
  height: 44px;
}
.mode-low-posture .tb-wrap tbody tr td {
  height: 48px;
}

/* 고대비 모드 */
.mode-high-contrast .tb-wrap {
  --tb-th-bg: #1AEBFF;
  --tb-th-text: #000000;
  --tb-th-border-right: #000000;
  --tb-td-bg: #1B1F23;
  --tb-first-td-bg: #FFFFFF;
  --tb-td-text: #FFFFFF;
  --tb-td-border: #B6B6B6;
}

/* 서울 도시철도 */
.subway-tag.line-1 {
  background-color: #0052A4;
} /* 서울 1호선 */
.subway-tag.line-2 {
  background-color: #009D3E;
} /* 서울 2호선 */
.subway-tag.line-3 {
  background-color: #FC4C02;
} /* 서울 3호선 */
.subway-tag.line-4 {
  background-color: #00A9E0;
} /* 서울 4호선 */
.subway-tag.line-5 {
  background-color: #A05EB5;
} /* 서울 5호선 */
.subway-tag.line-6 {
  background-color: #A9431E;
} /* 서울 6호선 */
.subway-tag.line-7 {
  background-color: #67823A;
} /* 서울 7호선 */
.subway-tag.line-8 {
  background-color: #E31C79;
} /* 서울 8호선 */
.subway-tag.line-9 {
  background-color: #8C8279;
} /* 서울 9호선 */
/* 수도권 도시철도 */
.subway-tag.line-i {
  background-color: #7CA8D5;
} /* 인천 1호선 */
.subway-tag.line-i2 {
  background-color: #ED8B00;
} /* 인천 2호선 */
.subway-tag.line-a {
  background-color: #0090D2;
} /* 공항철도 */
.subway-tag.line-k {
  background-color: #6CBC99;
} /* 경의중앙선 */
.subway-tag.line-kk {
  background-color: #F5A200;
} /* 수인분당선 */
.subway-tag.line-ui {
  background-color: #B0BE47;
} /* 우이신설역 */
/* 부산 도시철도 */
.subway-tag.line-b1 {
  background-color: #F06A00;
} /* 부산 1호선 */
.subway-tag.line-b2 {
  background-color: #81BF48;
} /* 부산 2호선 */
.subway-tag.line-b3 {
  background-color: #BB8C00;
} /* 부산 3호선 */
.subway-tag.line-b4 {
  background-color: #217DCB;
} /* 부산 4호선 */
.subway-tag.line-b5 {
  background-color: #F14C53;
} /* 부산 5호선 */
/* 대구 도시철도 */
.subway-tag.line-d1 {
  background-color: #D93F5C;
} /* 대구 1호선 */
.subway-tag.line-d2 {
  background-color: #00AA80;
} /* 대구 2호선 */
.subway-tag.line-d3 {
  background-color: #FFB100;
} /* 대구 3호선 */
.subway-tag.line-d4 {
  background-color: #0099CC;
} /* 대구 4호선 */
/* 광주 도시철도 */
.subway-tag.line-gj1 {
  background-color: #009088;
} /* 광주 1호선 */
.subway-tag.line-gj2 {
  background-color: #0471C3;
} /* 광주 2호선 */
/* 대전 도시철도 */
.subway-tag.line-dj1 {
  background-color: #007448;
} /* 대전 1호선 */
/* layout */
/* abstracts */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  background: #0B162F;
  z-index: 80;
}
.header .hd-inner {
  width: calc(100% - 64px);
  height: 90px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.header .logo {
  width: 399px;
  height: 24px;
}
.header .logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header .status {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.header .datetime {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}
.header .datetime .date {
  font-size: 1.75rem;
  color: rgba(255, 255, 255, 0.8);
}
.header .datetime .clock {
  font-size: 2.625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.header .weather {
  width: 70px;
  height: 70px;
}
.header .weather img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 낮은 자세 모드 */
.mode-low-posture .header {
  position: relative;
  top: auto;
  left: auto;
  transform: translateX(0);
}

/* abstracts */
.sub-header {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  background: #0B162F;
  z-index: 80;
}
.sub-header .sub-hd-inner {
  width: calc(100% - 64px);
  height: 94px;
  padding: 10px 0 27px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.sub-header .page-title {
  position: absolute;
  bottom: 27px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 57px;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
}

/* 낮은 자세 모드 */
.mode-low-posture .sub-header {
  position: relative;
  top: auto;
  left: auto;
  transform: translateX(0);
}
.mode-low-posture .sub-header .sub-hd-inner {
  height: 94px;
  padding: 10px 0 26px;
}

/* abstracts */
/* 페이지 상세 타이틀 */
.detail-title {
  --dt-title-bg: #ffffff;
  --dt-title-border: #888888;
  --dt-title-color: #000000;
  --dt-nav-btn-border: #000000;
  --dt-nav-btn-bg: #ffffff;
  /* 아이콘/이미지 토큰 */
  --dt-arrow-left: url(../../../assets/images/icon/arrow_left_bk.svg);
  position: fixed;
  top: 184px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  height: 114px;
  border-bottom: 1px solid var(--dt-title-border);
  background: var(--dt-title-bg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.detail-title h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dt-title-color);
  text-align: center;
}
.detail-title .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--dt-nav-btn-border);
}
.detail-title .nav-btn.prev {
  left: 32px;
  background: var(--dt-arrow-left) no-repeat center/24px var(--dt-nav-btn-bg);
}

/* 낮은 자세 모드 */
.mode-low-posture .detail-title {
  position: relative;
  top: auto;
  left: auto;
  transform: translateX(0);
  height: 80px;
}
.mode-low-posture .detail-title h3 {
  font-size: 2rem;
}
.mode-low-posture .detail-title .nav-btn {
  width: 48px;
  height: 48px;
}
.mode-low-posture .detail-title .nav-btn.prev {
  left: 24px;
  background: var(--dt-arrow-left) no-repeat center/19px var(--dt-nav-btn-bg);
}

/* 고대비 모드 */
.mode-high-contrast .detail-title {
  --dt-title-bg: #1B1F23;
  --dt-title-border: #B6B6B6;
  --dt-title-color: #ffffff;
  --dt-nav-btn-border: #ffffff;
  --dt-nav-btn-bg: transparent;
  /* 아이콘/이미지 토큰 */
  --dt-arrow-left: url(../../../assets/images/icon/high-contrast/arrow_left_wh.svg);
}

/* abstracts */
.bottom-nav {
  /* Bottom Nav 전용 로컬 컬러 토큰 */
  --bn-bg: #ffffff;
  --bn-border-top: #888888;
  --bn-outer-circle-border: #888888;
  --bn-mask-bg: #ffffff;
  --bn-nav-label-color: #000000;
  --bn-nav-label-active-color: #3B4CCF;
  --bn-home-border: #ffffff;
  --bn-home-gradient: linear-gradient(135deg, #4A72D0 0%, #5234E6 100%);
  /* 아이콘/이미지 토큰 */
  --bn-icon-tour: url(../../../assets/images/icon/tour.svg);
  --bn-icon-tour-active: url(../../../assets/images/icon/tour_active.svg);
  --bn-icon-map: url(../../../assets/images/icon/map.svg);
  --bn-icon-map-active: url(../../../assets/images/icon/map_active.svg);
  --bn-icon-traffic: url(../../../assets/images/icon/traffic.svg);
  --bn-icon-traffic-active: url(../../../assets/images/icon/traffic_active.svg);
  --bn-icon-restaurant: url(../../../assets/images/icon/restaurant.svg);
  --bn-icon-restaurant-active: url(../../../assets/images/icon/restaurant_active.svg);
  --bn-icon-home: url(../../../assets/images/icon/home.svg);
  position: fixed;
  left: 50%;
  bottom: 68px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  height: 143px;
  padding: 24px 26px 32px;
  border-radius: 32px 32px 0 0;
  border-top: 1px solid var(--bn-border-top);
  border-bottom: 0;
  background: var(--bn-bg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 32px;
  z-index: 50;
  /* 홈 버튼 외곽 원형 라인 */
}
.bottom-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 23px;
  transform: translateX(-50%);
  width: 145px;
  height: 145px;
  border-radius: 50%;
  border: 1px solid var(--bn-outer-circle-border);
  background: transparent;
  pointer-events: none;
  z-index: -1;
}
.bottom-nav {
  /* 홈 버튼 외곽 원형 라인의 overflow를 숨기기 위한 요소 */
}
.bottom-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 180px;
  height: 100%;
  background: var(--bn-mask-bg);
}
.bottom-nav .nav-btn {
  display: block;
  width: 180px;
  height: 87px;
  background: transparent;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.bottom-nav .nav-btn .icon {
  display: block;
  width: 40px;
  height: 40px;
}
.bottom-nav .nav-btn .label {
  font-size: 1.75rem;
}
html:lang(en) .bottom-nav .nav-btn .label {
  font-size: 1.575rem;
}
.bottom-nav .nav-btn .label {
  font-weight: 500;
  line-height: 124%;
  text-align: center;
  color: var(--bn-nav-label-color);
}
.bottom-nav .nav-btn.is-active .label {
  font-weight: 800;
  color: var(--bn-nav-label-active-color);
}
.bottom-nav .nav-btn.is-active.tour-btn .icon {
  background: var(--bn-icon-tour-active) no-repeat center/contain;
}
.bottom-nav .nav-btn.is-active.map-btn .icon {
  background: var(--bn-icon-map-active) no-repeat center/contain;
}
.bottom-nav .nav-btn.is-active.traffic-btn .icon {
  background: var(--bn-icon-traffic-active) no-repeat center/contain;
}
.bottom-nav .nav-btn.is-active.restaurant-btn .icon {
  background: var(--bn-icon-restaurant-active) no-repeat center/contain;
}
.bottom-nav .nav-btn.tour-btn .icon {
  background: var(--bn-icon-tour) no-repeat center/contain;
}
.bottom-nav .nav-btn.map-btn .icon {
  background: var(--bn-icon-map) no-repeat center/contain;
}
.bottom-nav .nav-btn.traffic-btn .icon {
  background: var(--bn-icon-traffic) no-repeat center/contain;
}
.bottom-nav .nav-btn.restaurant-btn .icon {
  background: var(--bn-icon-restaurant) no-repeat center/contain;
}
.bottom-nav .home-btn-wrap {
  position: relative;
  width: 180px;
  height: 100%;
  background: var(--bn-mask-bg);
}
.bottom-nav .home-btn {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  display: block;
  box-sizing: content-box;
  width: 119px;
  height: 119px;
  border-radius: 50%;
  border: 12px solid var(--bn-home-border);
  background: var(--bn-icon-home) no-repeat center/58px, var(--bn-home-gradient);
  z-index: 20;
}

/* 낮은 자세 모드 */
.mode-low-posture .bottom-nav {
  height: 86px;
  padding: 8px 24px 8px;
  gap: 48px;
  /* 홈 버튼 외곽 원형 라인 */
}
.mode-low-posture .bottom-nav::before {
  bottom: 9px;
  width: 92px;
  height: 92px;
}
.mode-low-posture .bottom-nav {
  /* 홈 버튼 외곽 원형 라인의 overflow를 숨기기 위한 요소 */
}
.mode-low-posture .bottom-nav::after {
  width: 100px;
}
.mode-low-posture .bottom-nav .nav-btn {
  width: 170px;
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.mode-low-posture .bottom-nav .home-btn-wrap {
  width: 90px;
}
.mode-low-posture .bottom-nav .home-btn {
  bottom: 2px;
  width: 74px;
  height: 74px;
  border: 8px solid var(--bn-home-border);
  background: url(../../../assets/images/icon/home.svg) no-repeat center/35px, var(--bn-home-gradient);
}
.mode-low-posture .bottom-nav .prev-btn,
.mode-low-posture .bottom-nav .next-btn {
  display: flex;
}

/* 낮은 자세 모드 + 영문 */
html:lang(en).mode-low-posture .bottom-nav .nav-btn .label {
  font-size: 1.4rem;
}

/* 고대비 모드 */
.mode-high-contrast .bottom-nav {
  --bn-bg: #1B1F23;
  --bn-border-top: #FFF;
  --bn-outer-circle-border: #FFF;
  --bn-mask-bg: #1B1F23;
  --bn-nav-label-color: #ffffff;
  --bn-nav-label-active-color: #1AEBFF;
  --bn-home-border: #1B1F23;
  --bn-home-gradient: linear-gradient(135deg, #1AEBFF 0%, #98FF93 100%);
  /* 아이콘/이미지 토큰 */
  --bn-icon-tour: url(../../../assets/images/icon/high-contrast/tour.svg);
  --bn-icon-tour-active: url(../../../assets/images/icon/high-contrast/tour_active.svg);
  --bn-icon-map: url(../../../assets/images/icon/high-contrast/map.svg);
  --bn-icon-map-active: url(../../../assets/images/icon/high-contrast/map_active.svg);
  --bn-icon-traffic: url(../../../assets/images/icon/high-contrast/traffic.svg);
  --bn-icon-traffic-active: url(../../../assets/images/icon/high-contrast/traffic_active.svg);
  --bn-icon-restaurant: url(../../../assets/images/icon/high-contrast/restaurant.svg);
  --bn-icon-restaurant-active: url(../../../assets/images/icon/high-contrast/restaurant_active.svg);
  --bn-icon-home: url(../../../assets/images/icon/high-contrast/home.svg);
}

/* abstracts */
.footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  background: #242C33;
  z-index: 50;
}
.footer .ft-inner {
  width: calc(100% - 64px);
  height: 68px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.footer .copyright {
  font-size: 1.5rem;
  color: #B6B6B6;
  letter-spacing: -0.02em;
}
.footer .btn-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}
.footer .btn-wrap > button {
  height: 48px;
  padding: 0 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff;
  border-radius: 100px;
  background: transparent;
}
.footer .btn-wrap > button .btn-label {
  font-size: 1.25rem;
  color: #fff;
  font-weight: 500;
}
.footer .volume-control-btn.close .volume-icon {
  background: url(../../../assets/images/icon/close.svg) no-repeat center/contain;
}
.footer .volume-control-btn .volume-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/icon/volume.svg) no-repeat center/contain;
}
.footer .zoom-btn.close .zoom-icon {
  background: url(../../../assets/images/icon/close.svg) no-repeat center/contain;
}
.footer .zoom-btn .zoom-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/icon/search.svg) no-repeat center/contain;
}

/* 낮은 자세 모드 */
/* abstracts */
/* 페이지 내 공통 레이아웃 요소들 */
.zoom-viewport {
  /* zoom viewport 전용 로컬 컬러 토큰 */
  --zv-bg: #EEE;
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: 100vh;
  margin: 0 auto;
  background: var(--zv-bg);
  touch-action: none;
}
.zoom-viewport.is-active {
  min-height: auto;
  height: 100vh;
  overflow: hidden;
}
.zoom-viewport.is-active .zoom-canvas {
  will-change: transform;
}
.zoom-viewport.is-active .bottom-nav {
  bottom: 168px;
}
.zoom-viewport.is-active .footer {
  bottom: 100px;
}
.zoom-viewport.is-active {
  /* 관광/음식점 상세페이지 - 낮은 화면 모드 - 우측 하단 */
}
.zoom-viewport.is-active .floating-btn {
  bottom: 336px;
}
.zoom-viewport .zoom-move-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
.zoom-viewport .zoom-canvas {
  width: 100%;
  min-height: 100%;
  transform: none;
  transform-origin: 0 0;
  background: var(--zv-bg);
  overflow: hidden;
}
.zoom-viewport .main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: 184px;
  padding-bottom: 211px;
}
.zoom-viewport .main.intro {
  padding-top: 90px;
  padding-bottom: 68px;
  background: linear-gradient(180deg, #1A1E28 50.94%, #060C18 70.56%);
}
.zoom-viewport .main.category {
  padding-top: 90px;
  padding-bottom: 68px;
}
.zoom-viewport .main.detail-page {
  min-height: 100vh;
  padding-top: 298px;
}
.zoom-viewport .main.traffic {
  padding-top: 298px;
}
.zoom-viewport .main.map {
  padding-top: 298px;
}
.zoom-viewport {
  /* 상/하/좌/우 이동 버튼 */
}
.zoom-viewport .viewport-controller {
  /* 상/하/좌/우 이동 버튼 컬러 토큰 */
  --vc-border: #000;
  --vc-btn-border: #000;
  --vc-btn-bg: #fff;
  --vc-btn-color: #3B4CCF;
  /* 아이콘/이미지 토큰 */
  --vc-move-up-icon: url(../../../assets/images/zoom/zoom_up.svg);
  --vc-move-left-icon: url(../../../assets/images/zoom/zoom_left.svg);
  --vc-move-right-icon: url(../../../assets/images/zoom/zoom_right.svg);
  --vc-move-down-icon: url(../../../assets/images/zoom/zoom_down.svg);
  --vc-zoom-exit-icon: url(../../../assets/images/zoom/zoom_close.svg);
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  height: 200px;
  border-top: 2px solid var(--vc-border);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  z-index: 999;
  display: none;
}
.zoom-viewport .viewport-controller.is-active {
  display: flex;
}
.zoom-viewport .viewport-controller .btn-wrap {
  position: relative;
  width: 20%;
  height: 100%;
  padding: 0 16px;
  border-right: 2px solid var(--vc-btn-border);
  background: var(--vc-btn-bg);
}
.zoom-viewport .viewport-controller .btn-wrap:last-child {
  border-right: 0;
}
.zoom-viewport .viewport-controller .zoom-control {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: var(--vc-btn-bg);
}
.zoom-viewport .viewport-controller .zoom-control:focus, .zoom-viewport .viewport-controller .zoom-control:focus-visible {
  box-shadow: none;
  outline: none;
}
.zoom-viewport .viewport-controller .zoom-control:focus::after, .zoom-viewport .viewport-controller .zoom-control:focus-visible::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 0;
  pointer-events: none;
  z-index: 100;
  box-shadow: none;
}
html.is-keyboard-user .zoom-viewport .viewport-controller .zoom-control:focus::after, html.is-keyboard-user .zoom-viewport .viewport-controller .zoom-control:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3B4CCF;
}
html.mode-high-contrast.is-keyboard-user .zoom-viewport .viewport-controller .zoom-control:focus::after, html.mode-high-contrast.is-keyboard-user .zoom-viewport .viewport-controller .zoom-control:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FFFF2E;
}
.zoom-viewport .viewport-controller .zoom-control .icon {
  display: inline-block;
  width: 56px;
  height: 56px;
}
.zoom-viewport .viewport-controller .zoom-control .label {
  font-size: 2rem;
}
html:lang(en) .zoom-viewport .viewport-controller .zoom-control .label {
  font-size: 1.8rem;
}
.zoom-viewport .viewport-controller .zoom-control .label {
  font-weight: 700;
  line-height: 120%;
  color: var(--vc-btn-color);
}
.zoom-viewport .viewport-controller .zoom-control.is-disable .label {
  color: #B7B7B7;
}
.zoom-viewport .viewport-controller .zoom-control.move-up .icon {
  background: var(--vc-move-up-icon) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.move-up.is-disable .icon {
  background: url(../../../assets/images/zoom/zoom_up_gy.svg) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.move-left .icon {
  background: var(--vc-move-left-icon) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.move-left.is-disable .icon {
  background: url(../../../assets/images/zoom/zoom_left_gy.svg) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.move-right .icon {
  background: var(--vc-move-right-icon) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.move-right.is-disable .icon {
  background: url(../../../assets/images/zoom/zoom_right_gy.svg) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.move-down .icon {
  background: var(--vc-move-down-icon) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.move-down.is-disable .icon {
  background: url(../../../assets/images/zoom/zoom_down_gy.svg) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.zoom-exit-btn .icon {
  background: var(--vc-zoom-exit-icon) no-repeat center/contain;
}
.zoom-viewport .viewport-controller .zoom-control.zoom-exit-btn.is-active {
  display: flex;
}

/* 낮은 자세 모드 */
.mode-low-posture .zoom-viewport {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  background: linear-gradient(180deg, #1A1E28 68.11%, #060C18 100%);
}
.mode-low-posture .zoom-viewport.is-active .bottom-nav {
  bottom: 118px;
}
.mode-low-posture .zoom-viewport.is-active .footer {
  bottom: 50px;
}
.mode-low-posture .zoom-viewport.is-active .modal {
  height: calc(var(--lp-page-height, 916px) - 68px);
}
.mode-low-posture .zoom-viewport.is-active .modal.volume-control .modal-content {
  bottom: 68px;
}
.mode-low-posture .zoom-viewport .zoom-move-wrap {
  width: 100%;
  margin-top: auto;
}
.mode-low-posture .zoom-viewport .zoom-move-wrap.h1100 {
  height: 1100px;
}
.mode-low-posture .zoom-viewport .zoom-move-wrap.h1011 {
  height: 1011px;
}
.mode-low-posture .zoom-viewport .zoom-move-wrap.h933 {
  height: 933px;
}
.mode-low-posture .zoom-viewport .zoom-move-wrap.h917 {
  height: 917px;
}
.mode-low-posture .zoom-viewport .main {
  min-height: auto;
  padding-top: 0;
  padding-bottom: 154px;
}
.mode-low-posture .zoom-viewport .main.intro {
  padding-top: 0;
  padding-bottom: 68px;
}
.mode-low-posture .zoom-viewport .main.category {
  padding-top: 0;
  padding-bottom: 68px;
}
.mode-low-posture .zoom-viewport .main.detail-page {
  min-height: auto;
  padding-top: 0;
}
.mode-low-posture .zoom-viewport .main.traffic {
  padding-top: 0;
}
.mode-low-posture .zoom-viewport .main.map {
  padding-top: 0;
}
.mode-low-posture .zoom-viewport {
  /* 상/하/좌/우 이동 버튼 */
}
.mode-low-posture .zoom-viewport .viewport-controller {
  height: 100px;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control .icon {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control .label {
  font-size: 1.5rem;
  line-height: 29px;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-up .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_up.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-up.is-disable .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_up_gy.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-left .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_left.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-left.is-disable .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_left_gy.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-right .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_right.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-right.is-disable .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_right_gy.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-down .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_down.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.move-down.is-disable .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_down_gy.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.zoom-exit-btn .icon {
  background: url(../../../assets/images/zoom/low-posture/zoom_close.svg) no-repeat center/contain;
}
.mode-low-posture .zoom-viewport .viewport-controller .zoom-control.zoom-exit-btn.is-active {
  display: flex;
}

/* 낮은 자세 모드 + 영문 */
html:lang(en).mode-low-posture .zoom-viewport {
  /* 상/하/좌/우 이동 버튼 */
}
html:lang(en).mode-low-posture .zoom-viewport .viewport-controller .zoom-control .label {
  font-size: 1.5rem;
}

/* 고대비 모드 */
.mode-high-contrast .zoom-viewport {
  --zv-bg: #1B1F23;
}
.mode-high-contrast .zoom-viewport .viewport-controller {
  /* 상/하/좌/우 이동 버튼 컬러 토큰 */
  --vc-border: #000;
  --vc-btn-border: #000;
  --vc-btn-bg: #fff;
  --vc-btn-color: #000;
  /* 아이콘/이미지 토큰 */
  --vc-move-up-icon: url(../../../assets/images/zoom/zoom_up_bk.svg);
  --vc-move-left-icon: url(../../../assets/images/zoom/zoom_left_bk.svg);
  --vc-move-right-icon: url(../../../assets/images/zoom//zoom_right_bk.svg);
  --vc-move-down-icon: url(../../../assets/images/zoom/zoom_down_bk.svg);
  --vc-zoom-exit-icon: url(../../../assets/images/zoom/zoom_close_bk.svg);
}

/* abstracts */
/* 소팅 영역 (관광, 음식점) */
.sort-wrap {
  /* Sorting 전용 로컬 컬러 토큰 */
  --sw-bg: #ffffff;
  --sw-info-color: #555;
  --sw-dimmed-bg: rgba(0, 0, 0, 0.80);
  position: relative;
  width: 100%;
  background: var(--sw-bg);
}
.sort-wrap .sort-inner {
  width: calc(100% - 64px);
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.sort-wrap .info-text {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--sw-info-color);
}
.sort-wrap .dimmed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  background: var(--sw-dimmed-bg);
  z-index: 60;
  display: none;
}
.sort-wrap .dimmed.is-active {
  display: block;
}

/* 고대비 모드 */
.mode-high-contrast .sort-wrap {
  --sw-bg: #1B1F23;
  --sw-info-color: #C1C1C1;
  --sw-dimmed-bg: rgba(0, 0, 0, 0.80);
}

/* abstracts */
.card-list {
  width: 100%;
  padding: 32px 32px 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

/* 낮은 자세 모드 */
.mode-low-posture .card-list {
  padding: 16px 24px 12px;
}

/* abstracts */
/* 관광, 음식점 상세페이지 레이아웃 */
.detail-page {
  /* 서브페이지 전용 로컬 컬러 토큰 */
  --sp-panel-radius: 24px;
  --sp-panel-border: transparent;
  --sp-panel-bg: #ffffff;
  --sp-border: #888888;
  --sp-heading-color: #000000;
  --sp-body-color: #555555;
  --sp-map-radius: 8px;
  --sp-map-btn-bg: #ffffff;
  --sp-map-btn-color: #000000;
  --sp-qr-bg: #ffffff;
  --sp-qr-radius: 4px;
  --sp-qr-bullet-color: #555555;
  --sp-qr-btn-color: #000;
  --sp-qr-border: #888;
  --sp-access-title-color: #0072E0;
  --sp-access-icon-bg: transparent;
  /* 아이콘/이미지 토큰 */
  --sp-icon-map-zoom-in: url(../../../assets/images/icon/plus.svg);
  --sp-icon-map-zoom-out: url(../../../assets/images/icon/minus.svg);
  --sp-icon-qr-google: url(../../../assets/images/common/google_maps_logo.png);
  --sp-icon-qr-naver: url(../../../assets/images/common/naver_map_logo.png);
  --sp-icon-disability: url(../../../assets/images/icon/disability.svg);
  --sp-icon-disability-visual: url(../../../assets/images/icon/visual_disability.svg);
}
.detail-page .scroll-sec {
  width: calc(100% - 64px);
  height: calc(100vh - 509px);
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.detail-page .scroll-sec::-webkit-scrollbar {
  display: none;
}
.detail-page .sec-wrap {
  width: 100%;
  padding: 0 40px;
  border-radius: var(--sp-panel-radius);
  border: 1px solid var(--sp-panel-border);
  background: var(--sp-panel-bg);
}
.detail-page .sec-wrap section {
  padding: 40px 0;
}
.detail-page .section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sp-heading-color);
}
.detail-page {
  /* 기본 정보 & 지도 */
}
.detail-page .base-info-sec .sec-inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.detail-page .base-info-sec .sec-inner > div {
  width: calc(50% - 12px);
}
.detail-page .base-info-sec .info-list {
  border-top: 1px solid var(--sp-border);
  border-bottom: 1px solid var(--sp-border);
}
.detail-page .base-info-sec .info-list .info-item {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--sp-border);
}
.detail-page .base-info-sec .info-list .info-item:last-child {
  height: auto;
  min-height: 120px;
  padding: 24px 16px 24px 0;
  border-bottom: 0;
}
.detail-page .base-info-sec .info-list .info-item .info-term {
  display: block;
  width: 96px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sp-heading-color);
  white-space: nowrap;
}
.detail-page .base-info-sec .info-list .info-item .subway-wrap {
  width: calc(100% - 104px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-page .base-info-sec .info-list .info-item .info-desc {
  width: calc(100% - 120px);
  font-size: 1.5rem;
}
html:lang(en) .detail-page .base-info-sec .info-list .info-item .info-desc {
  font-size: 1.35rem;
}
.detail-page .base-info-sec .info-list .info-item .info-desc {
  font-weight: 500;
  line-height: 132%;
  color: var(--sp-body-color);
  word-break: keep-all;
}
.detail-page .base-info-sec .info-list .info-item .info-desc.subway {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.detail-page .base-info-sec .info-list .info-item .info-desc .subway-tag {
  display: inline-block;
  height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
  border-radius: 100px;
}
.detail-page .base-info-sec .info-list {
  /* 관광 - 지하철 노선도 4개 이상인 경우 */
}
.detail-page .base-info-sec .info-list.subway-multi .info-item:nth-child(2) {
  height: 80px;
}
.detail-page .base-info-sec .info-list {
  /* 음식점 */
}
.detail-page .base-info-sec .info-list.row04 .info-item {
  height: 90px;
}
.detail-page .base-info-sec .info-list.row04 .info-item:last-child {
  min-height: 90px;
  height: auto;
}
.detail-page .base-info-sec .map-wrap .map-area {
  width: 100%;
  height: 304px;
  border-radius: var(--sp-map-radius);
  border: 1px solid var(--sp-border);
  z-index: 2;
}
.detail-page .base-info-sec .map-wrap .map-control {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  margin-top: 8px;
}
.detail-page .base-info-sec .map-wrap .map-control .btn-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
  border-radius: var(--sp-map-radius);
  border: 1px solid var(--sp-border);
}
.detail-page .base-info-sec .map-wrap .map-control button {
  width: calc(100% - 32px);
  height: 100%;
  margin: 0 16px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--sp-map-btn-color);
  background: var(--sp-map-btn-bg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.detail-page .base-info-sec .map-wrap .map-control button:focus, .detail-page .base-info-sec .map-wrap .map-control button:focus-visible {
  box-shadow: none;
  outline: none;
}
.detail-page .base-info-sec .map-wrap .map-control button:focus::after, .detail-page .base-info-sec .map-wrap .map-control button:focus-visible::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 0;
  pointer-events: none;
  z-index: 100;
  box-shadow: none;
}
html.is-keyboard-user .detail-page .base-info-sec .map-wrap .map-control button:focus::after, html.is-keyboard-user .detail-page .base-info-sec .map-wrap .map-control button:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3B4CCF;
}
html.mode-high-contrast.is-keyboard-user .detail-page .base-info-sec .map-wrap .map-control button:focus::after, html.mode-high-contrast.is-keyboard-user .detail-page .base-info-sec .map-wrap .map-control button:focus-visible::after {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FFFF2E;
}
.detail-page .base-info-sec .map-wrap .map-control button .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.detail-page .base-info-sec .map-wrap .map-control button.map-zoom-in-btn .icon {
  background: var(--sp-icon-map-zoom-in) no-repeat center/contain;
}
.detail-page .base-info-sec .map-wrap .map-control button.map-zoom-out-btn .icon {
  background: var(--sp-icon-map-zoom-out) no-repeat center/contain;
}
.detail-page {
  /* QR 안내 */
}
.detail-page .qr-sec .sec-inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.detail-page .qr-sec .qr-info-wrap {
  width: calc(100% - 252px);
}
.detail-page .qr-sec .qr-guide-list {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.detail-page .qr-sec .qr-guide-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 35px;
  color: var(--sp-body-color);
  word-break: keep-all;
}
.detail-page .qr-sec .qr-guide-item::before {
  content: "";
  display: block;
  position: relative;
  width: 5px;
  height: 5px;
  margin: 15px 6.5px;
  border-radius: 50%;
  background: var(--sp-qr-bullet-color);
}
.detail-page .qr-sec .qr-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
.detail-page .qr-sec .qr-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.detail-page .qr-sec .qr-item .img-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.detail-page .qr-sec .qr-item .qr-logo {
  display: block;
  width: 60px;
  height: 54px;
}
.detail-page .qr-sec .qr-item .qr-logo.google {
  background: var(--sp-icon-qr-google) no-repeat center/contain;
}
.detail-page .qr-sec .qr-item .qr-logo.naver {
  background: var(--sp-icon-qr-naver) no-repeat center/contain;
}
.detail-page .qr-sec .qr-item .qr-code {
  width: 98px;
  height: 98px;
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  background: var(--sp-qr-bg);
}
.detail-page .qr-sec .qr-item .qr-code img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-page .qr-sec .qr-item .qr-zoom-btn {
  width: 98px;
  height: 44px;
  padding: 0 14px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--sp-qr-btn-color);
  white-space: nowrap;
  border-radius: var(--sp-qr-radius);
  border: 1px solid var(--sp-qr-border);
  background: transparent;
}
.detail-page {
  /* 상세 정보 */
}
.detail-page .detail-sec .detail-text {
  padding-top: 24px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 35px;
  color: var(--sp-body-color);
}
.detail-page .detail-sec + .detail-sec {
  border-top: 1px solid var(--sp-border);
}
.detail-page {
  /* 무장애 편의정보 */
}
.detail-page .access-sec {
  border-top: 1px solid var(--sp-border);
}
.detail-page .access-sec .access-title {
  padding-top: 24px;
  padding-bottom: 12px;
  font-size: 1.25rem;
  color: var(--sp-access-title-color);
  font-weight: 700;
}
.detail-page .access-sec .access-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.detail-page .access-sec .access-list li {
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 35px;
  color: var(--sp-body-color);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.detail-page .access-sec .access-list li [class^=icon_] {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 7px;
  background-color: var(--sp-access-icon-bg);
}
.detail-page .access-sec .access-list.visual li::before {
  background: var(--sp-icon-disability-visual) no-repeat center/contain;
}

/* 낮은 자세 모드 */
.mode-low-posture .detail-page .scroll-sec {
  width: calc(100% - 48px);
  height: 499px;
  padding: 16px 0;
  overflow-y: hidden;
  touch-action: none;
}
.mode-low-posture .detail-page .sec-wrap.is-hidden {
  display: none;
}
.mode-low-posture .detail-page .sec-wrap.is-active {
  display: block;
}

/* 고대비 모드 - detail-page */
.mode-high-contrast .detail-page {
  --sp-panel-radius: 0;
  --sp-panel-border: #B6B6B6;
  --sp-panel-bg: #1B1F23;
  --sp-border: #B6B6B6;
  --sp-heading-color: #ffffff;
  --sp-body-color: #C1C1C1;
  --sp-map-radius: 0;
  --sp-map-btn-bg: #1B1F23;
  --sp-map-btn-color: #ffffff;
  --sp-qr-bg: #ffffff;
  --sp-qr-radius: 0;
  --sp-qr-bullet-color: #C1C1C1;
  --sp-qr-btn-color: #fff;
  --sp-qr-border: #fff;
  --sp-access-title-color: #1AEBFF;
  --sp-access-icon-bg: #FFFF2E;
  --sp-icon-map-zoom-in: url(../../../assets/images/icon/high-contrast/plus.svg);
  --sp-icon-map-zoom-out: url(../../../assets/images/icon/high-contrast/minus.svg);
  --sp-icon-qr-google: url(../../../assets/images/common/high-contrast/google_maps_logo.png);
  --sp-icon-qr-naver: url(../../../assets/images/common/high-contrast/naver_map_logo.png);
  --sp-icon-disability: url(../../../assets/images/icon/high-contrast/disability.svg);
  --sp-icon-disability-visual: url(../../../assets/images/icon/high-contrast/visual_disability.svg);
}

/* abstracts */
.modal {
  /* modal 공통 전용 로컬 컬러 토큰 */
  --md-overlay-bg: rgba(0, 0, 0, 0.80);
  --md-bg: #FFFFFF;
  --md-radius: 24px;
  --md-border: transparent;
  --md-title-color: #000000;
  --md-btn-radius: 8px;
  --md-btn-close-border: #888888;
  --md-btn-close-text: #000000;
  --md-btn-apply-border: #3B4CCF;
  --md-btn-apply-text: #3B4CCF;
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  height: calc(100vh - 68px);
  z-index: 100;
  background: var(--md-overlay-bg);
}
.modal .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 64px);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  background: var(--md-bg);
}
.modal .modal-title {
  width: 100%;
}
.modal .modal-title strong {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--md-title-color);
  line-height: 48px;
}
.modal .modal-btn-wrap {
  width: 100%;
}
.modal .modal-btn-wrap button {
  height: 64px;
  padding: 0 18px;
  border-radius: var(--md-btn-radius);
  font-size: 1.5rem;
  background: transparent;
}
.modal .modal-btn-wrap button.close-btn {
  border: 1px solid var(--md-btn-close-border);
  font-weight: 500;
  color: var(--md-btn-close-text);
}
.modal .modal-btn-wrap button.apply-btn {
  border: 2px solid var(--md-btn-apply-border);
  font-weight: 700;
  color: var(--md-btn-apply-text);
}
.modal .modal-btn-wrap button.return-home-btn {
  border-radius: 8px;
  border: 1px solid #888;
  color: #000;
}
.modal .modal-btn-wrap button.return-stay-btn {
  border-radius: 8px;
  border: 1px solid #3B4CCF;
  color: #3B4CCF;
}
.modal {
  /* 교통 모달 */
}
.modal.traffic .modal-content {
  padding: 40px;
}
.modal.traffic .modal-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 48px;
}
.modal.traffic .modal-title strong {
  text-align: center;
}
.modal.traffic .tab-menu.tab02 .tab-list {
  margin-bottom: 32px;
}
.modal.traffic .tab-menu.tab02 .tab-cont {
  border-top: 0;
}
.modal.traffic .filter-menu .filter-list {
  padding-bottom: 0;
  border-bottom: 0;
}
.modal.traffic .modal-btn-wrap {
  padding-top: 48px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.modal.traffic .modal-btn-wrap button {
  width: calc(50% - 8px);
}
.modal {
  /* 디지털 관광지도 모달 */
}
.modal.digital-map {
  /* 디지털 관광지도 전용 로컬 컬러 토큰 */
  --mdm-qr-desc-color: #555;
  --mdm-qr-desc-border: #888;
  --mdm-qr-info-title-color: #000;
  --mdm-qr-guide-color: #555;
  --mdm-qr-radius: 4px;
  --mdm-qr-border: #3B4CCF;
  --mdm-qr-bg: transparent;
}
.modal.digital-map .modal-content {
  padding: 32px 40px;
}
.modal.digital-map .modal-title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 16px;
}
.modal.digital-map .modal-title strong {
  text-align: left;
}
.modal.digital-map .modal-btn-wrap {
  padding-top: 32px;
}
.modal.digital-map .modal-btn-wrap button {
  width: 100%;
}
.modal.digital-map .qr-desc {
  width: 100%;
  height: 128px;
  padding-bottom: 32px;
  font-size: 1.5rem;
  color: var(--mdm-qr-desc-color);
  font-weight: 500;
  line-height: 132%;
  border-bottom: 1px solid var(--mdm-qr-desc-border);
}
.modal.digital-map .qr-area {
  padding-top: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.modal.digital-map .qr-area .qr-info-wrap {
  width: calc(100% - 194px);
}
.modal.digital-map .qr-area .qr-info-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mdm-qr-info-title-color);
}
.modal.digital-map .qr-area .qr-guide-list {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.modal.digital-map .qr-area .qr-guide-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 35px;
  color: var(--mdm-qr-guide-color);
  word-break: keep-all;
}
.modal.digital-map .qr-area .qr-guide-item::before {
  content: "";
  display: block;
  position: relative;
  width: 5px;
  height: 5px;
  margin: 15px 6.5px;
  border-radius: 50%;
  background: var(--mdm-qr-guide-color);
}
.modal.digital-map .qr-area .qr-wrap {
  width: 162px;
  height: 162px;
  border-radius: var(--mdm-qr-radius);
  border: 4px solid var(--mdm-qr-border);
  background: var(--mdm-qr-bg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modal.digital-map .qr-area .qr-wrap .qr-code {
  width: 146px;
  height: 146px;
}
.modal.digital-map .qr-area .qr-wrap .qr-code img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal {
  /* 음량조절 모달 */
}
.modal.volume-control .modal-content {
  top: auto;
  bottom: 255px;
  transform: translate(-50%, 0);
  width: calc(100% - 120px);
  padding: 40px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #fff;
}
.modal.volume-control .modal-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.modal.volume-control .modal-title strong {
  color: #000;
}
.modal.volume-control .modal-title span {
  color: #555;
  font-size: 2rem;
  font-weight: 500;
  line-height: 38px;
}
.modal.volume-control .volume-control-wrap {
  width: 100%;
  margin: 32px 0;
  padding: 24px 0 69px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.modal.volume-control .volume-btn-wrap {
  position: relative;
}
.modal.volume-control .volume-btn {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}
.modal.volume-control .volume-btn.down {
  background: url(../../../assets/images/icon/volume_down.svg) no-repeat center/24px #3B4CCF;
}
.modal.volume-control .volume-btn.up {
  background: url(../../../assets/images/icon/volume_up.svg) no-repeat center/24px #3B4CCF;
}
.modal.volume-control .volume-btn-label {
  position: absolute;
  left: 50%;
  bottom: -45px;
  transform: translateX(-50%);
  display: block;
  height: 29px;
  color: #555;
  font-size: 1.5rem;
  font-weight: 500;
  white-space: nowrap;
}
.modal.volume-control .volume-range {
  position: relative;
  flex: 1;
  height: 40px;
  overflow: visible;
  --volume-percent: 50%;
  --track-inset: 20px;
}
.modal.volume-control .volume-range::before {
  content: "";
  position: absolute;
  left: var(--track-inset);
  right: var(--track-inset);
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, #3B4CCF 0 var(--volume-percent), #888 var(--volume-percent) 100%);
  z-index: 0;
}
.modal.volume-control .volume-input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 40px;
  margin: 0;
  background: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* WebKit (Chrome, Edge, Android WebView 등) */
}
.modal.volume-control .volume-input .volume-input::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
.modal.volume-control .volume-input {
  /* Firefox */
}
.modal.volume-control .volume-input .volume-input::-moz-range-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
.modal.volume-control .volume-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3B4CCF;
}
.modal.volume-control .volume-input::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3B4CCF;
}
.modal.volume-control .volume-marks {
  position: absolute;
  top: 50%;
  left: var(--track-inset);
  right: var(--track-inset);
  transform: translateY(-50%);
  height: 40px;
  z-index: 5;
  display: block;
  padding: 0;
}
.modal.volume-control .volume-marks .mark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transform: translate(-50%, -50%) translateZ(0);
}
.modal.volume-control .volume-marks .mark:focus, .modal.volume-control .volume-marks .mark:focus-visible {
  box-shadow: none;
}
.modal.volume-control .volume-marks .mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 0;
  opacity: 0;
  box-shadow: inset 0 0 0 3px #3B4CCF, inset 0 0 0 5px #FFFFFF;
  pointer-events: none;
  z-index: 11;
  transform: translate(-50%, -50%) translateZ(0);
}
.modal.volume-control .volume-marks .mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #888;
  transform: translate(-50%, -50%) scale(1);
}
.modal.volume-control .volume-marks .mark.is-past::before {
  transform: translate(-50%, -50%) scale(0);
}
.modal.volume-control .volume-marks .mark.is-selected {
  transform: translate(-50%, -50%) translateZ(0);
  opacity: 1;
}
.modal.volume-control .modal-btn-wrap button {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #888;
  color: #000;
}
.modal {
  /* 문의 모달 */
}
.modal.inquiry .modal-content {
  top: auto;
  bottom: 243px;
  transform: translate(-50%, 0);
  width: calc(100% - 120px);
  padding: 40px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #fff;
}
.modal.inquiry .modal-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.modal.inquiry .modal-title strong {
  color: #000;
}
.modal.inquiry .modal-title span {
  color: #555;
  font-size: 2rem;
  font-weight: 500;
  line-height: 38px;
}
.modal.inquiry .inquiry-info {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal.inquiry .inquiry-info ul {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}
.modal.inquiry .inquiry-info ul li {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 37px;
  color: #000;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.modal.inquiry .inquiry-info ul li .icon {
  width: 36px;
  height: 36px;
}
.modal.inquiry .inquiry-info ul .phone-number .icon {
  background: url(../../../assets/images/intro/phone.svg) no-repeat center/contain;
}
.modal.inquiry .inquiry-info ul .email-address .icon {
  background: url(../../../assets/images/intro/email.svg) no-repeat center/contain;
}
.modal.inquiry .modal-btn-wrap button {
  width: 100%;
  border-radius: 0;
  border: 1px solid #888;
  color: #000;
}
.modal {
  /* 무동작 초기화면 복귀 모달 */
}
.modal.idle-reset .modal-content {
  width: calc(100% - 120px);
  padding: 40px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #fff;
}
.modal.idle-reset .modal-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.modal.idle-reset .modal-title strong {
  color: #000;
}
.modal.idle-reset .modal-title p {
  color: #555;
  font-size: 2rem;
  font-weight: 500;
  line-height: 38px;
}
.modal.idle-reset .countdown-wrap {
  padding: 48px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modal.idle-reset .countdown-wrap .countdown-num {
  color: #3B4CCF;
  font-size: 5rem;
  font-weight: 800;
  line-height: 95px;
  letter-spacing: -0.02em;
}
.modal.idle-reset .modal-btn-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.modal.idle-reset .modal-btn-wrap button {
  width: calc(50% - 8px);
}
.modal {
  /* qr코드 크게보기 모달 */
}
.modal.qr-zoom .modal-content {
  width: calc(100% - 120px);
  padding: 40px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.modal.qr-zoom .qr-logo {
  width: 110px;
  height: 99px;
  margin-bottom: 56px;
}
.modal.qr-zoom .qr-logo.google {
  background: url(../../../assets/images/common/google_maps_logo.png) no-repeat center/contain;
}
.modal.qr-zoom .qr-logo.naver {
  background: url(../../../assets/images/common/naver_map_logo.png) no-repeat center/contain;
}
.modal.qr-zoom .qr-code {
  width: 300px;
  height: 300px;
  padding: 12px;
  margin-bottom: 48px;
  border-radius: 8px;
  border: 2px solid #888;
}
.modal.qr-zoom .qr-code img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal.qr-zoom .qr-info {
  margin-bottom: 48px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 124%;
  text-align: center;
  color: #000;
}
.modal.qr-zoom .modal-btn-wrap button {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #888;
  color: #000;
}
.modal {
  /* 인트로 슬라이드 모달 */
}
.modal.slide-modal .modal-content {
  padding: 40px;
}
.modal.slide-modal .img-wrap {
  width: 100%;
  height: 400px;
  background: #000;
  margin-bottom: 48px;
}
.modal.slide-modal .img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal.slide-modal .info-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal.slide-modal .info-wrap .modal-title {
  margin-bottom: 16px;
  color: #000;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 124%;
}
.modal.slide-modal .info-wrap .detail-info {
  margin-bottom: 48px;
  color: #555;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
}
.modal.slide-modal .modal-btn-wrap button {
  width: 100%;
}
.modal.is-active {
  display: block;
}

/* 낮은 자세 모드 */
.mode-low-posture .modal {
  /* 교통 모달 */
}
.mode-low-posture .modal.traffic .modal-content {
  top: auto;
  bottom: 0;
  transform: translate(-50%, 0);
  width: calc(100% - 48px);
  border-radius: 24px 24px 0 0;
}
.mode-low-posture .modal.traffic .modal-title {
  padding-bottom: 56px;
}
.mode-low-posture .modal.traffic .tab-menu.line .tab-list li {
  height: 60px;
}
.mode-low-posture .modal.traffic .modal-btn-wrap {
  padding-top: 56px;
}
.mode-low-posture .modal {
  /* 디지털 관광지도 모달 */
}
.mode-low-posture .modal.digital-map .modal-content {
  top: auto;
  bottom: 0;
  transform: translate(-50%, 0);
  width: calc(100% - 48px);
  border-radius: 24px 24px 0 0;
}
.mode-low-posture .modal {
  /* 무동작 초기화면 복귀 모달 */
}
.mode-low-posture .modal.idle-reset .modal-content {
  top: auto;
  bottom: 208px;
  transform: translate(-50%, 0);
}
.mode-low-posture .modal {
  /* qr코드 크게보기 모달 */
}
.mode-low-posture .modal.qr-zoom .modal-content {
  top: auto;
  bottom: 0;
  transform: translate(-50%, 0);
  border-radius: 24px 24px 0 0;
}
.mode-low-posture .modal {
  /* 인트로 슬라이드 모달 */
}
.mode-low-posture .modal.slide-modal .modal-content {
  top: auto;
  bottom: 0;
  transform: translate(-50%, 0);
  border-radius: 24px 24px 0 0;
}

/* 고대비 모드 */
.mode-high-contrast .modal {
  --md-overlay-bg: rgba(0, 0, 0, 0.80);
  --md-bg: #1B1F23;
  --md-radius: 0;
  --md-border: #FFFFFF;
  --md-title-color: #FFFFFF;
  --md-btn-radius: 0;
  --md-btn-close-border: #C8C8C8;
  --md-btn-close-text: #FFFFFF;
  --md-btn-apply-border: #1AEBFF;
  --md-btn-apply-text: #1AEBFF;
  /* 인트로 슬라이드 모달 */
}
.mode-high-contrast .modal.slide-modal .modal-content {
  padding: 40px;
}
.mode-high-contrast .modal.slide-modal .img-wrap {
  width: 100%;
  height: 400px;
  background: #000;
  margin-bottom: 48px;
}
.mode-high-contrast .modal.slide-modal .img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mode-high-contrast .modal.slide-modal .info-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mode-high-contrast .modal.slide-modal .info-wrap .modal-title {
  margin-bottom: 16px;
  color: #fff;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 124%;
}
.mode-high-contrast .modal.slide-modal .info-wrap .detail-info {
  margin-bottom: 48px;
  color: #c1c1c1;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
}
.mode-high-contrast .modal.slide-modal .modal-btn-wrap button {
  width: 100%;
}
.mode-high-contrast .modal {
  /* 문의 모달 */
}
.mode-high-contrast .modal.inquiry .modal-content {
  top: auto;
  bottom: 243px;
  transform: translate(-50%, 0);
  width: calc(100% - 120px);
  padding: 40px;
  background: #1B1F23;
  border: 1px solid #c1c1c1;
  border-radius: 0 !important;
}
.mode-high-contrast .modal.inquiry .modal-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.mode-high-contrast .modal.inquiry .modal-title strong {
  color: #fff;
}
.mode-high-contrast .modal.inquiry .modal-title span {
  color: #c1c1c1;
  font-size: 2rem;
  font-weight: 500;
  line-height: 38px;
}
.mode-high-contrast .modal.inquiry .inquiry-info {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mode-high-contrast .modal.inquiry .inquiry-info ul {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}
.mode-high-contrast .modal.inquiry .inquiry-info ul li {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 37px;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.mode-high-contrast .modal.inquiry .inquiry-info ul li .icon {
  width: 36px;
  height: 36px;
}
.mode-high-contrast .modal.inquiry .inquiry-info ul .phone-number .icon {
  background: url(../../../assets/images/intro/phone_hc.svg) no-repeat center/contain;
}
.mode-high-contrast .modal.inquiry .inquiry-info ul .email-address .icon {
  background: url(../../../assets/images/intro/email_hc.svg) no-repeat center/contain;
}
.mode-high-contrast .modal.inquiry .modal-btn-wrap button {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #c1c1c1;
  color: #fff;
}
.mode-high-contrast .modal.digital-map {
  --mdm-qr-desc-color: #C1C1C1;
  --mdm-qr-desc-border: #888;
  --mdm-qr-info-title-color: #fff;
  --mdm-qr-guide-color: #C1C1C1;
  --mdm-qr-radius: 0;
  --mdm-qr-border: transparent;
  --mdm-qr-bg: #fff;
}
.mode-high-contrast .modal.volume-control .modal-content {
  top: auto;
  bottom: 255px;
  transform: translate(-50%, 0);
  width: calc(100% - 120px);
  padding: 40px;
  border: 1px solid #c1c1c1;
  border-radius: 0;
  background: #1B1F23;
}
.mode-high-contrast .modal.volume-control .modal-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.mode-high-contrast .modal.volume-control .modal-title strong {
  color: #fff;
}
.mode-high-contrast .modal.volume-control .modal-title span {
  color: #c1c1c1;
  font-size: 2rem;
  font-weight: 500;
  line-height: 38px;
}
.mode-high-contrast .modal.volume-control .volume-control-wrap {
  width: 100%;
  margin: 32px 0;
  padding: 24px 0 69px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.mode-high-contrast .modal.volume-control .volume-btn-wrap {
  position: relative;
}
.mode-high-contrast .modal.volume-control .volume-btn {
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 1px solid #1AEBFF;
}
.mode-high-contrast .modal.volume-control .volume-btn.down {
  background: url(../../../assets/images/icon/volume_down_hc.svg) no-repeat center/24px;
}
.mode-high-contrast .modal.volume-control .volume-btn.up {
  background: url(../../../assets/images/icon/volume_up_hc.svg) no-repeat center/24px;
}
.mode-high-contrast .modal.volume-control .volume-btn-label {
  position: absolute;
  left: 50%;
  bottom: -45px;
  transform: translateX(-50%);
  display: block;
  height: 29px;
  color: #c1c1c1;
  font-size: 1.5rem;
  font-weight: 500;
  white-space: nowrap;
}
.mode-high-contrast .modal.volume-control .volume-range {
  position: relative;
  flex: 1;
  height: 40px;
  overflow: visible;
  --volume-percent: 50%;
  --track-inset: 20px;
}
.mode-high-contrast .modal.volume-control .volume-range::before {
  content: "";
  position: absolute;
  left: var(--track-inset);
  right: var(--track-inset);
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, #1AEBFF 0 var(--volume-percent), #c1c1c1 var(--volume-percent) 100%);
  z-index: 0;
}
.mode-high-contrast .modal.volume-control .volume-input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 40px;
  margin: 0;
  background: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* WebKit (Chrome, Edge, Android WebView 등) */
}
.mode-high-contrast .modal.volume-control .volume-input .volume-input::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
.mode-high-contrast .modal.volume-control .volume-input {
  /* Firefox */
}
.mode-high-contrast .modal.volume-control .volume-input .volume-input::-moz-range-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
.mode-high-contrast .modal.volume-control .volume-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1AEBFF;
}
.mode-high-contrast .modal.volume-control .volume-input::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1AEBFF;
}
.mode-high-contrast .modal.volume-control .volume-marks {
  position: absolute;
  top: 50%;
  left: var(--track-inset);
  right: var(--track-inset);
  transform: translateY(-50%);
  height: 40px;
  z-index: 5;
  display: block;
  padding: 0;
}
.mode-high-contrast .modal.volume-control .volume-marks .mark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transform: translate(-50%, -50%) translateZ(0);
  /* 모달 안의 모든 포커스 가능한 요소 */
}
.mode-high-contrast .modal.volume-control .volume-marks .mark:focus, .mode-high-contrast .modal.volume-control .volume-marks .mark:focus-visible {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #ffff2e;
  outline: none;
}
.mode-high-contrast .modal.volume-control .volume-marks .mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 0;
  opacity: 0;
  box-shadow: inset 0 0 0 3px #1AEBFF, inset 0 0 0 5px #FFFFFF;
  pointer-events: none;
  z-index: 11;
  transform: translate(-50%, -50%) translateZ(0);
}
.mode-high-contrast .modal.volume-control .volume-marks .mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c1c1c1;
  transform: translate(-50%, -50%) scale(1);
}
.mode-high-contrast .modal.volume-control .volume-marks .mark.is-past::before {
  transform: translate(-50%, -50%) scale(0);
}
.mode-high-contrast .modal.volume-control .volume-marks .mark.is-selected {
  transform: translate(-50%, -50%) translateZ(0);
  opacity: 1;
}
.mode-high-contrast .modal.volume-control .modal-btn-wrap button {
  width: 100%;
  border-radius: 0;
  border: 1px solid #c1c1c1;
  color: #fff;
}
.mode-high-contrast .modal {
  /* 무동작 초기화면 복귀 모달 */
}
.mode-high-contrast .modal.idle-reset {
  /* 모달 안의 모든 포커스 가능한 요소 */
}
.mode-high-contrast .modal.idle-reset :focus,
.mode-high-contrast .modal.idle-reset :focus-visible {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #ffff2e;
  outline: none;
}
.mode-high-contrast .modal.idle-reset .modal-content {
  width: calc(100% - 120px);
  padding: 40px;
  border: 1px solid #c1c1c1;
  border-radius: 0;
  background: #1B1F23;
}
.mode-high-contrast .modal.idle-reset .modal-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.mode-high-contrast .modal.idle-reset .modal-title strong {
  color: #fff;
}
.mode-high-contrast .modal.idle-reset .modal-title p {
  color: #c1c1c1;
  font-size: 2rem;
  font-weight: 500;
  line-height: 38px;
}
.mode-high-contrast .modal.idle-reset .countdown-wrap {
  padding: 48px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mode-high-contrast .modal.idle-reset .countdown-wrap .countdown-num {
  color: #1AEBFF;
  font-size: 5rem;
  font-weight: 800;
  line-height: 95px;
  letter-spacing: -0.02em;
}
.mode-high-contrast .modal.idle-reset .modal-btn-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.mode-high-contrast .modal.idle-reset .modal-btn-wrap button {
  width: calc(50% - 8px);
}
.mode-high-contrast .modal.idle-reset .modal-btn-wrap .return-home-btn {
  color: #c1c1c1;
  border: 1px solid #c1c1c1;
  border-radius: 0;
}
.mode-high-contrast .modal.idle-reset .modal-btn-wrap .return-stay-btn {
  color: #1AEBFF;
  border: 1px solid #1AEBFF;
  border-radius: 0;
}
.mode-high-contrast .modal {
  /* qr코드 크게보기 모달 */
}
.mode-high-contrast .modal.qr-zoom {
  /* 모달 안의 모든 포커스 가능한 요소 */
}
.mode-high-contrast .modal.qr-zoom :focus,
.mode-high-contrast .modal.qr-zoom :focus-visible {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #ffff2e;
  outline: none;
}
.mode-high-contrast .modal.qr-zoom .modal-content {
  width: calc(100% - 120px);
  padding: 40px;
  border: 1px solid #c1c1c1;
  border-radius: 0;
  background: #1B1F23;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.mode-high-contrast .modal.qr-zoom .qr-logo {
  width: 110px;
  height: 99px;
  margin-bottom: 56px;
}
.mode-high-contrast .modal.qr-zoom .qr-logo.google {
  background: url(../../../assets/images/common/google_maps_logo_hc.png) no-repeat center/contain;
}
.mode-high-contrast .modal.qr-zoom .qr-logo.naver {
  background: url(../../../assets/images/common/naver_map_logo_hc.png) no-repeat center/contain;
}
.mode-high-contrast .modal.qr-zoom .qr-code {
  width: 300px;
  height: 300px;
  padding: 12px;
  margin-bottom: 48px;
  border-radius: 8px;
  border: 2px solid #c1c1c1;
}
.mode-high-contrast .modal.qr-zoom .qr-code img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mode-high-contrast .modal.qr-zoom .qr-info {
  margin-bottom: 48px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 124%;
  text-align: center;
  color: #fff;
}
.mode-high-contrast .modal.qr-zoom .modal-btn-wrap button {
  width: 100%;
  border-radius: 0;
  border: 1px solid #c1c1c1;
  color: #fff;
}

/* abstracts */
.loading {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
.loading.is-hidden {
  display: none;
}
.loading .loading-content {
  width: calc(100% - 120px);
  margin: 0 auto;
  padding: 40px;
  border-radius: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.loading .loading-title {
  font-size: 2.5rem;
  color: #000;
  text-align: center;
  font-weight: 700;
  line-height: 124%;
}
.loading .loading-desc {
  font-size: 2rem;
  color: #555;
  text-align: center;
  font-weight: 500;
}

/* pages */
/* abstracts */
.main.intro .visual-sec {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}
.main.intro .visual-sec .slide-wrap {
  position: relative;
  width: 100%;
  background: #000;
  z-index: 0;
}
.main.intro .visual-sec .intro-slide {
  width: 100%;
  height: 100%;
  z-index: 0;
}
.main.intro .visual-sec .intro-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, #000 100%);
  z-index: 1;
  pointer-events: none;
}
.main.intro .visual-sec .swiper-wrapper {
  align-items: center;
}
.main.intro .visual-sec .swiper-slide {
  position: relative;
  height: 910px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main.intro .visual-sec .swiper-slide video,
.main.intro .visual-sec .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  z-index: 0;
}
.main.intro .visual-sec {
  /* 이미지 슬라이드 상세 모달 버튼 */
}
.main.intro .visual-sec .slide-detail-btn {
  position: absolute;
  left: 50%;
  bottom: 224px;
  transform: translateX(-50%);
  padding: 0 16px;
  height: 50px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 20;
}
.main.intro .visual-sec .slide-detail-btn .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/icon/arrow_right_wh.svg) no-repeat center/contain;
}
.main.intro .visual-sec .slide-detail-btn .label {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
}
.main.intro .visual-sec .video-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main.intro .visual-sec {
  /* 영상 제어 버튼 (영상 위에 오버레이) */
}
.main.intro .visual-sec .video-control {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 2;
}
.main.intro .visual-sec .video-btn {
  position: relative;
  padding: 0 16px;
  height: 50px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 20;
}
.main.intro .visual-sec .video-btn .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.main.intro .visual-sec .video-btn .label {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
}
.main.intro .visual-sec .video-btn.video-play .icon {
  background: url(../../../assets/images/icon/video_play.svg) no-repeat center/contain;
}
.main.intro .visual-sec .video-btn.video-pause .icon {
  background: url(../../../assets/images/icon/video_pause.svg) no-repeat center/contain;
}
.main.intro .visual-sec .intro-controls {
  position: absolute;
  right: 32px;
  bottom: 56px;
  z-index: 30;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 2;
}
.main.intro .visual-sec .intro-control-group {
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 50px;
  background: #fff;
}
.main.intro .visual-sec .intro-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
.main.intro .visual-sec .intro-btn.slide-prev {
  background: url(../../../assets/images/icon/slide_prev.svg) no-repeat center/24px;
}
.main.intro .visual-sec .intro-btn.slide-next {
  background: url(../../../assets/images/icon/slide_next.svg) no-repeat center/24px;
}
.main.intro .visual-sec .intro-pagination {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.main.intro .visual-sec .intro-pagination span {
  color: #000;
}
.main.intro .visual-sec .slide-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../../../assets/images/icon/slide_pause.svg) no-repeat center/23px #fff;
}
.main.intro .visual-sec .slide-toggle.is-paused {
  background: url(../../../assets/images/icon/slide_play.svg) no-repeat center/23px #fff;
}
.main.intro .visual-sec .intro-title {
  position: absolute;
  left: 32px;
  bottom: 56px;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 78px;
  color: #FFF;
  z-index: 50;
}
.main.intro .visual-sec .intro-title::before {
  content: attr(data-line1) "\a" attr(data-line2);
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: transparent; /* 안쪽 비우기 */
  -webkit-text-stroke: 12px #000; /* 외곽선 6px */
  z-index: -1; /* 뒤로 */
}
.main.intro .visual-sec .is-hidden {
  display: none !important;
}
.main.intro .lang-sec {
  margin-bottom: 31px;
}
.main.intro .lang-sec .title-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
.main.intro .lang-sec .title-wrap > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.main.intro .lang-sec .lang-title {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 48px;
}
.main.intro .lang-sec .lang-title span {
  color: #1AEBFF;
}
.main.intro .lang-sec .lang-guide {
  display: inline-block;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  line-height: 38px;
  color: #fff;
}
.main.intro .lang-sec .lang-select {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.main.intro .lang-sec .lang-btn {
  display: inline-block;
  width: 160px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: transparent;
}
.main.intro .lang-sec .lang-symbol {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  font-size: 3.125rem;
}
.main.intro .lang-sec .lang-name {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
.main.intro .lang-sec {
  /* 한국어 */
}
.main.intro .lang-sec .lang-kr .lang-symbol {
  color: #060C18;
  font-weight: 600;
  border: 1px solid rgba(121, 158, 244, 0);
  background: #1AEBFF;
}
.main.intro .lang-sec {
  /* 영어 */
}
.main.intro .lang-sec .lang-en .lang-symbol {
  color: #fff;
  font-weight: 500;
  border: 1px solid rgba(121, 158, 244, 0);
  background: #213156;
}
.main.intro .system-menu-sec {
  width: 100%;
}
.main.intro .system-menu-sec .grid-wrap {
  width: calc(100% - 64px);
  margin: 0 auto;
  height: 400px;
  display: grid;
  grid-template-columns: 260fr 362fr 362fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.main.intro .system-menu-sec .card-btn {
  position: relative;
  padding: 32px;
  display: inline-block;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(#252935, #252935) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, #343A3F 100%) border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.main.intro .system-menu-sec .card-btn .title-primary {
  font-size: 2rem;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
}
.main.intro .system-menu-sec .card-btn .title-secondary {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 30px;
  color: #C1C1C1;
}
.main.intro .system-menu-sec .card-btn .icon {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 80px;
  height: 80px;
}
.main.intro .system-menu-sec .card-btn.all-menu {
  grid-row: 1/-1;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #4A72D0 0%, #5234E6 100%) padding-box, linear-gradient(135deg, #C9E4FF 0%, rgba(255, 255, 255, 0) 100%) border-box;
}
.main.intro .system-menu-sec .card-btn.all-menu .title-secondary {
  color: #fff;
}
.main.intro .system-menu-sec .card-btn.all-menu .icon {
  background: url(../../../assets/images/intro/all_menu.svg) no-repeat center/contain;
}
.main.intro .system-menu-sec .card-btn.voice .icon {
  background: url(../../../assets/images/intro/voice.svg) no-repeat center/contain;
}
.main.intro .system-menu-sec .card-btn.high-contrast .icon {
  background: url(../../../assets/images/intro/high_contrast.svg) no-repeat center/contain;
}
.main.intro .system-menu-sec .card-btn.low-screen .icon {
  background: url(../../../assets/images/intro/low_screen.svg) no-repeat center/contain;
}
.main.intro .system-menu-sec .card-btn.inquiry .icon {
  background: url(../../../assets/images/intro/inquiry.svg) no-repeat center/contain;
}
.main.intro .system-menu-sec .card-btn.reset {
  display: none;
}
.main.intro .system-menu-sec .card-btn.reset .icon {
  background: url(../../../assets/images/intro/reset.svg) no-repeat center/contain;
}

/* 낮은 자세 모드 */
/* 고대비 모드 */
.mode-high-contrast .main.intro .visual-sec .intro-controls {
  position: absolute;
  right: 32px;
  bottom: 56px;
  z-index: 30;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 2;
}
.mode-high-contrast .main.intro .visual-sec .intro-control-group {
  border: 1px solid #FFF;
  background: #000;
}
.mode-high-contrast .main.intro .visual-sec .intro-btn.slide-prev {
  background: url(../../../assets/images/icon/high-contrast/slide_prev.svg) no-repeat center/24px;
}
.mode-high-contrast .main.intro .visual-sec .intro-btn.slide-next {
  background: url(../../../assets/images/icon/high-contrast/slide_next.svg) no-repeat center/24px;
}
.mode-high-contrast .main.intro .visual-sec .intro-pagination span {
  color: #FFF;
}
.mode-high-contrast .main.intro .visual-sec .slide-toggle {
  border: 1px solid #FFF;
  background: url(../../../assets/images/icon/high-contrast/slide_pause.svg) no-repeat center/23px #000;
}
.mode-high-contrast .main.intro .visual-sec .slide-toggle.is-paused {
  background: url(../../../assets/images/icon/high-contrast/slide_play.svg) no-repeat center/23px #000;
}

/* 낮은 자세 모드 */
.mode-low-posture .main.intro .visual-sec {
  margin-bottom: 31px;
}
.mode-low-posture .main.intro .visual-sec .swiper-slide {
  height: 400px;
}
.mode-low-posture .main.intro .visual-sec .video-wrap {
  height: 100%;
}
.mode-low-posture .main.intro .visual-sec .slide-detail-btn {
  bottom: 25px;
}
.mode-low-posture .main.intro .visual-sec .video-control {
  bottom: 25px;
}
.mode-low-posture .main.intro .visual-sec .intro-controls {
  bottom: 25px;
}
.mode-low-posture .main.intro .visual-sec .intro-title {
  bottom: 25px;
  font-size: 2.5rem;
  line-height: 56px;
}
.mode-low-posture .main.intro .lang-sec .lang-title {
  font-size: 2rem;
  line-height: 38px;
}
.mode-low-posture .main.intro .lang-sec .title-wrap > div {
  gap: 8px;
}
.mode-low-posture .main.intro .lang-sec .lang-btn {
  width: 140px;
  height: 160px;
  gap: 16px;
}
.mode-low-posture .main.intro .lang-sec .lang-symbol {
  width: 96px;
  height: 96px;
  font-size: 2.75rem;
}
.mode-low-posture .main.intro .system-menu-sec {
  margin-bottom: 32px;
}
.mode-low-posture .main.intro .system-menu-sec .grid-wrap {
  height: 180px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 16px;
}
.mode-low-posture .main.intro .system-menu-sec .card-btn.voice {
  display: none;
}
.mode-low-posture .main.intro .system-menu-sec .card-btn.high-contrast {
  display: none;
}
.mode-low-posture .main.intro .system-menu-sec .card-btn.low-screen {
  display: none;
}
.mode-low-posture .main.intro .system-menu-sec .card-btn.inquiry {
  display: none;
}
.mode-low-posture .main.intro .system-menu-sec .card-btn.reset {
  display: flex;
}

/* 음성 모드 */
.mode-voice .main.intro .system-menu-sec .grid-wrap {
  grid-template-columns: 260fr 740fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.mode-voice .main.intro .system-menu-sec .card-btn {
  display: flex;
  width: 100%;
  height: 100%;
}
.mode-voice .main.intro .system-menu-sec .card-btn.voice, .mode-voice .main.intro .system-menu-sec .card-btn.high-contrast, .mode-voice .main.intro .system-menu-sec .card-btn.low-screen {
  display: none;
}
.mode-voice .main.intro .system-menu-sec .card-btn.all-menu {
  display: flex;
  grid-row: 1/-1;
  grid-column: 1;
}
.mode-voice .main.intro .system-menu-sec .card-btn.reset {
  display: flex;
  grid-column: 2;
  grid-row: 1;
}
.mode-voice .main.intro .system-menu-sec .card-btn.inquiry {
  display: flex;
  grid-column: 2;
  grid-row: 2;
}

/* 고대비 모드 */
.mode-high-contrast .main.intro .system-menu-sec .grid-wrap {
  grid-template-columns: 260fr 740fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.mode-high-contrast .main.intro .system-menu-sec .card-btn {
  display: flex;
  width: 100%;
  height: 100%;
}
.mode-high-contrast .main.intro .system-menu-sec .card-btn.voice, .mode-high-contrast .main.intro .system-menu-sec .card-btn.high-contrast, .mode-high-contrast .main.intro .system-menu-sec .card-btn.low-screen {
  display: none;
}
.mode-high-contrast .main.intro .system-menu-sec .card-btn.all-menu {
  background: #1AEBFF;
  display: flex;
  grid-row: 1/-1;
  grid-column: 1;
}
.mode-high-contrast .main.intro .system-menu-sec .card-btn.all-menu .title-primary, .mode-high-contrast .main.intro .system-menu-sec .card-btn.all-menu .title-secondary {
  color: #000;
}
.mode-high-contrast .main.intro .system-menu-sec .card-btn.all-menu .icon {
  background: url(../../../assets/images/intro/all_menu_hc.svg) no-repeat center/contain;
}
.mode-high-contrast .main.intro .system-menu-sec .card-btn.reset {
  display: flex;
  grid-column: 2;
  grid-row: 1;
}
.mode-high-contrast .main.intro .system-menu-sec .card-btn.inquiry {
  display: flex;
  grid-column: 2;
  grid-row: 2;
}

/* abstracts */
.main.category {
  /* category 전용 로컬 컬러 토큰 */
  --cg-title-color: #000;
  --cg-desc-color: #555;
  --cg-card-border: #B393FF;
  --cg-card-bg: #fff;
  --cg-card-title-color: #000;
  --cg-card-desc-color: #555;
  --cg-card-icon-gradient01: #4A72D0;
  --cg-card-icon-gradient02: #5234E6;
  --cg-home-btn-border: transparent;
  --cg-home-btn-color: #3B4CCF;
  --cg-home-btn-bg: #fff;
  /* 아이콘/이미지 토큰 */
  --cg-arrow-icon: url(../../../assets/images/icon/high-contrast/arrow_right_wh.svg);
  --cg-tour-img: url(../../../assets/images/main/tour.png);
  --cg-map-img: url(../../../assets/images/main/map.png);
  --cg-traffic-img: url(../../../assets/images/main/traffic.png);
  --cg-restaurant-img: url(../../../assets/images/main/restaurant.png);
  --cg-home-icon: url(../../../assets/images/icon/home_bl.svg);
}
.main.category .category-menu-sec {
  width: calc(100% - 64px);
  margin: 0 auto;
  padding: 92px 0;
}
.main.category .category-title {
  margin-bottom: 16px;
  font-size: 3rem;
  font-weight: 700;
  color: var(--cg-title-color);
  text-align: center;
  line-height: 57px;
}
.main.category .category-desc {
  margin-bottom: 56px;
  font-size: 2rem;
  font-weight: 500;
  color: var(--cg-desc-color);
  text-align: center;
  line-height: 46px;
}
.main.category .card-btn-list {
  margin-bottom: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.main.category .card-btn {
  width: calc(50% - 8px);
  height: 612px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.main.category .card-btn-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 48px;
  border-radius: 20px;
  border: 3px solid var(--cg-card-border);
  background: var(--cg-card-bg);
}
.main.category .card-btn-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--cg-card-title-color);
  line-height: 57px;
}
.main.category .card-btn-desc {
  padding: 16px 0 48px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--cg-card-desc-color);
  line-height: 35px;
}
.main.category .arrow-icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cg-arrow-icon) no-repeat center/24px, linear-gradient(135deg, var(--cg-card-icon-gradient01) 0%, var(--cg-card-icon-gradient02) 100%);
}
.main.category .category-img {
  position: absolute;
  right: 48px;
  bottom: 48px;
  display: inline-block;
}
.main.category .card-btn.tour .category-img {
  width: 166px;
  height: 153px;
  background: var(--cg-tour-img) no-repeat center/contain;
}
.main.category .card-btn.map .category-img {
  width: 156px;
  height: 136px;
  background: var(--cg-map-img) no-repeat center/contain;
}
.main.category .card-btn.traffic .category-img {
  width: 162px;
  height: 153px;
  background: var(--cg-traffic-img) no-repeat center/contain;
}
.main.category .card-btn.restaurant .category-img {
  width: 164px;
  height: 153px;
  background: var(--cg-restaurant-img) no-repeat center/contain;
}
.main.category .category-menu-bottom .home-btn {
  display: block;
  width: 100%;
  height: 124px;
  border-radius: 20px;
  border: 1px solid var(--cg-home-btn-border);
  background: var(--cg-home-btn-bg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.main.category .category-menu-bottom .icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: var(--cg-home-icon) no-repeat center/contain;
}
.main.category .category-menu-bottom .label {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cg-home-btn-color);
}

/* 낮은 자세 모드 */
.mode-low-posture .main.category .category-menu-sec {
  width: calc(100% - 48px);
  padding: 56px 0;
}
.mode-low-posture .main.category .category-title {
  margin-bottom: 8px;
  font-size: 2.5rem;
  line-height: 48px;
}
.mode-low-posture .main.category .category-desc {
  margin-bottom: 48px;
  font-size: 1.5rem;
  line-height: 35px;
}
.mode-low-posture .main.category .card-btn-list {
  margin-bottom: 32px;
}
.mode-low-posture .main.category .card-btn {
  height: 222px;
}
.mode-low-posture .main.category .card-btn-link {
  padding: 40px 38px 40px 40px;
}
.mode-low-posture .main.category .card-btn-title {
  font-size: 2.5rem;
  line-height: 48px;
}
.mode-low-posture .main.category .card-btn-desc {
  padding: 24px 0 0;
}
.mode-low-posture .main.category .arrow-icon {
  position: absolute;
  top: 40px;
  right: 38px;
  width: 44px;
  height: 44px;
  background: url(../../../assets/images/icon/high-contrast/arrow_right_wh.svg) no-repeat center/19px, linear-gradient(135deg, #4A72D0 0%, #5234E6 100%);
}
.mode-low-posture .main.category .category-img {
  display: none;
}
.mode-low-posture .main.category .category-menu-bottom .home-btn {
  height: 110px;
}
.mode-low-posture .main.category .category-menu-bottom .icon {
  width: 40px;
  height: 40px;
}
.mode-low-posture .main.category .category-menu-bottom .label {
  font-size: 2rem;
}

/* 고대비 모드 */
.mode-high-contrast .main.category {
  --cg-title-color: #fff;
  --cg-desc-color: #C1C1C1;
  --cg-card-border: #1AEBFF;
  --cg-card-bg: transparent;
  --cg-card-title-color: #fff;
  --cg-card-desc-color: #C1C1C1;
  --cg-card-icon-gradient01: #1AEBFF ;
  --cg-card-icon-gradient02: #98FF93 ;
  --cg-home-btn-border: #B6B6B6;
  --cg-home-btn-color: #fff;
  --cg-home-btn-bg: transparent;
  /* 아이콘/이미지 토큰 */
  --cg-arrow-icon: url(../../../assets/images/icon/arrow_right_bk.svg);
  --cg-tour-img: url(../../../assets/images/main/high-contrast/tour.png);
  --cg-map-img: url(../../../assets/images/main/high-contrast/map.png);
  --cg-traffic-img: url(../../../assets/images/main/high-contrast/traffic.png);
  --cg-restaurant-img: url(../../../assets/images/main/high-contrast/restaurant.png);
  --cg-home-icon: url(../../../assets/images/icon/home_small.svg);
}

/* abstracts */
.main.tour {
  /* 관광 페이지 토큰 */
  --tu-empty-info-color: #000;
}
.main.tour .dimmed {
  top: 418px;
  height: calc(100vh - 486px);
}
.main.tour .tab-menu {
  height: calc(100vh - 395px);
}
.main.tour {
  /* 관광 - empty */
}
.main.tour .empty-screen {
  width: 100%;
  height: calc(100vh - 629px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main.tour .empty-screen .empty-info {
  color: var(--tu-empty-info-color);
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.8px;
}

/* 낮은 자세 모드 */
.mode-low-posture .main.tour .tab-menu {
  height: 579px;
}
.mode-low-posture .main.tour .dimmed {
  position: absolute;
  top: 80px;
  height: 505px;
}
.mode-low-posture .main.tour .sort-wrap .sort-inner {
  padding: 12px 0;
}
.mode-low-posture .main.tour {
  /* 관광 - empty */
}
.mode-low-posture .main.tour .empty-screen {
  height: 419px;
}
.mode-low-posture .main.tour .empty-screen .empty-info {
  font-size: 2rem;
}

/* 고대비 모드 */
.mode-high-contrast .main.tour {
  /* 관광 페이지 토큰 */
  --tu-empty-info-color: #fff;
}

/* abstracts */
.main.restaurant {
  /* 음식점 페이지 토큰 */
  --rs-empty-info-color: #000;
}
.main.restaurant .dimmed {
  top: 304px;
  height: calc(100vh - 372px);
}
.main.restaurant .filter-menu {
  height: calc(100vh - 395px);
}
.main.restaurant {
  /* 음식점 - empty */
}
.main.restaurant .empty-screen {
  width: 100%;
  height: calc(100vh - 597px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main.restaurant .empty-screen .empty-info {
  color: var(--rs-empty-info-color);
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.8px;
}

/* 낮은 자세 모드 */
.mode-low-posture .main.restaurant .filter-menu {
  height: 595px;
}
.mode-low-posture .main.restaurant .dimmed {
  position: absolute;
  top: 88px;
  height: 593px;
}
.mode-low-posture .main.restaurant .sort-wrap .sort-inner {
  padding: 16px 0;
}
.mode-low-posture .main.restaurant {
  /* 관광 - empty */
}
.mode-low-posture .main.restaurant .empty-screen {
  height: 437px;
}
.mode-low-posture .main.restaurant .empty-screen .empty-info {
  font-size: 2rem;
}

/* 고대비 모드 */
.mode-high-contrast .main.restaurant {
  /* 관광 페이지 토큰 */
  --rs-empty-info-color: #fff;
}

/* abstracts */
/* 교통 페이지 레이아웃 */
main.traffic {
  /* traffic 전용 로컬 컬러 토큰 */
  --tf-filter-border-color: #3B4CCF;
  --tf-filter-label-color: #3B4CCF;
  --tf-title-color: #000000;
  --tf-title-divider-color: #666666;
  --tf-card-radius: 24px;
  --tf-card-border-color: transparent;
  --tf-card-bg: #FFFFFF;
  --tf-date-color: #000000;
  --tf-refresh-radius: 8px;
  --tf-refresh-border-color: #888888;
  --tf-refresh-label-color: #000000;
  --tf-info-text-color: #555555;
  --tf-info-bullet-color: #555555;
  --tf-empty-info-color: #000000;
  /* 아이콘/이미지 토큰 */
  --tf-filter-icon: url(../../../assets/images/icon/filter.svg);
  --tf-refresh-icon: url(../../../assets/images/icon/refresh.svg);
}
main.traffic .detail-title .traffic-search-btn {
  position: absolute;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  height: 58px;
  padding: 0 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--tf-filter-border-color);
  border-radius: 100px;
  background: transparent;
}
main.traffic .detail-title .traffic-search-btn .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--tf-filter-icon) no-repeat center/contain;
}
main.traffic .detail-title .traffic-search-btn .label {
  font-size: 1.75rem;
}
html:lang(en) main.traffic .detail-title .traffic-search-btn .label {
  font-size: 1.4rem;
}
main.traffic .detail-title .traffic-search-btn .label {
  color: var(--tf-filter-label-color);
  font-weight: 700;
}
main.traffic .detail-title h3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 64px;
}
main.traffic .detail-title h3 span {
  position: relative;
  font-size: 2.5rem;
}
html:lang(en) main.traffic .detail-title h3 span {
  font-size: 1.75rem;
}
main.traffic .detail-title h3 span {
  color: var(--tf-title-color);
  font-weight: 700;
}
main.traffic .detail-title h3 span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -32px;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: var(--tf-title-divider-color);
}
main.traffic .detail-title h3 span:last-child::after {
  content: none;
}
main.traffic .traffic-content {
  position: relative;
  width: calc(100% - 64px);
  margin: 32px auto 24px;
  padding: 40px;
  border-radius: var(--tf-card-radius);
  border: 1px solid var(--tf-card-border-color);
  background: var(--tf-card-bg);
}
main.traffic .traffic-content.empty {
  background: transparent;
  width: 100%;
  margin: 0;
  padding: 0;
  height: calc(100vh - 509px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
main.traffic .traffic-content.empty .empty-info {
  color: var(--tf-empty-info-color);
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.8px;
}
main.traffic .traffic-content .traffic-toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
}
main.traffic .traffic-content .left-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
main.traffic .traffic-content .date-wrap time,
main.traffic .traffic-content .date-wrap .weekday {
  font-size: 1.75rem;
  color: var(--tf-date-color);
  font-weight: 700;
}
main.traffic .traffic-content .refresh-btn {
  height: 56px;
  padding: 0 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--tf-refresh-border-color);
  border-radius: var(--tf-refresh-radius);
  background: transparent;
}
main.traffic .traffic-content .refresh-btn .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--tf-refresh-icon) no-repeat center/contain;
}
main.traffic .traffic-content .refresh-btn .label {
  font-size: 1.5rem;
  color: var(--tf-refresh-label-color);
  font-weight: 500;
}
main.traffic .traffic-content .info-text {
  position: relative;
  font-size: 1.5rem;
  color: var(--tf-info-text-color);
  font-weight: 500;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
main.traffic .traffic-content .info-text::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 12px 6.5px;
  border-radius: 50%;
  background: var(--tf-info-bullet-color);
}

/* 낮은 자세 모드 */
.mode-low-posture main.traffic .detail-title .traffic-search-btn {
  height: 48px;
  padding: 0 18px 0 16px;
}
.mode-low-posture main.traffic .detail-title .traffic-search-btn .label {
  font-size: 1.25rem;
}
.mode-low-posture main.traffic .detail-title h3 {
  gap: 48px;
}
.mode-low-posture main.traffic .detail-title h3 span {
  font-size: 2rem;
}
.mode-low-posture main.traffic .detail-title h3 span::after {
  right: -24px;
  height: 22px;
}
.mode-low-posture main.traffic .traffic-content {
  width: calc(100% - 48px);
  margin: 16px auto 12px;
  padding: 24px 32px;
}
.mode-low-posture main.traffic .traffic-content.empty {
  height: 500px;
}
.mode-low-posture main.traffic .traffic-content.empty .empty-info {
  font-size: 2rem;
}
.mode-low-posture main.traffic .traffic-content .traffic-toolbar {
  padding-bottom: 16px;
}
.mode-low-posture main.traffic .traffic-content .left-wrap .info-text {
  font-size: 1.25rem;
}
.mode-low-posture main.traffic .traffic-content .date-wrap time,
.mode-low-posture main.traffic .traffic-content .date-wrap .weekday {
  font-size: 1.5rem;
}
.mode-low-posture main.traffic .traffic-content .refresh-btn {
  height: 48px;
  padding: 0 18px 0 16px;
}
.mode-low-posture main.traffic .traffic-content .refresh-btn .label {
  font-size: 1.25rem;
}
.mode-low-posture main.traffic .tb-wrap + .info-text {
  display: none;
}

/* 낮은 자세 모드 + 영문 */
html:lang(en).mode-low-posture main.traffic .detail-title .traffic-search-btn .label {
  font-size: 1.25rem;
}
html:lang(en).mode-low-posture main.traffic .detail-title h3 span {
  font-size: 1.6rem;
}

/* 고대비 모드 */
.mode-high-contrast main.traffic {
  --tf-filter-border-color: #1AEBFF;
  --tf-filter-label-color: #1AEBFF;
  --tf-title-color: #FFFFFF;
  --tf-title-divider-color: #B6B6B6;
  --tf-card-radius: 0;
  --tf-card-border-color: #fff;
  --tf-card-bg: #1B1F23;
  --tf-date-color: #FFFFFF;
  --tf-refresh-radius: 0;
  --tf-refresh-border-color: #B6B6B6;
  --tf-refresh-label-color: #FFFFFF;
  --tf-info-text-color: #C1C1C1;
  --tf-info-bullet-color: #C1C1C1;
  --tf-empty-info-color: #ffffff;
  /* 아이콘/이미지 토큰 */
  --tf-filter-icon: url(../../../assets/images/icon/high-contrast/filter.svg);
  --tf-refresh-icon: url(../../../assets/images/icon/high-contrast/refresh.svg);
}

/* abstracts */
/* 디지털 관광지도 레이아웃 */
main.map {
  /* map 전용 로컬 컬러 토큰 */
  --map-thema-color: #3B4CCF;
  --map-thema-border: #3B4CCF;
  --map-thema-radius: 16px;
  --map-thema-icon: url(../../../assets/images/icon/arrow_right_bl.svg);
  --map-thema-bg: #ffffff;
  /* 아이콘/이미지 토큰 */
}
main.map .filter-menu .filter-list {
  padding: 16px 0;
  gap: 24px;
}
main.map .thema-btn-wrap {
  width: calc(100% - 64px);
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
main.map .thema-btn-wrap .thema-btn {
  display: block;
  width: calc(50% - 8px);
  height: 80px;
  padding: 0 24px;
  font-size: 1.75rem;
}
html:lang(en) main.map .thema-btn-wrap .thema-btn {
  font-size: 1.4rem;
}
main.map .thema-btn-wrap .thema-btn {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--map-thema-color);
  border-radius: var(--map-thema-radius);
  border: 2px solid var(--map-thema-border);
  background: var(--map-thema-icon) no-repeat center right 24px/24px var(--map-thema-bg);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
main.map .card-list {
  padding: 24px 32px 32px;
}
main.map .card .card-thumbnail {
  height: 172px;
}
main.map .card .card-title {
  text-align: center;
}

/* 낮은 자세 모드 */
.mode-low-posture .main.map .thema-btn-wrap {
  width: calc(100% - 48px);
  padding-top: 16px;
}
.mode-low-posture .main.map .thema-btn-wrap .thema-btn {
  height: 65px;
  font-size: 1.5rem;
}
.mode-low-posture .main.map .card-list {
  padding: 16px 24px 12px;
}
.mode-low-posture .main.map .card .card-thumbnail {
  height: 148px;
}

/* 낮은 자세 모드 + 영문 */
html:lang(en).mode-low-posture .main.map .thema-btn-wrap .thema-btn {
  font-size: 1.35rem;
}

/* 고대비 모드 */
.mode-high-contrast .main.map {
  --map-thema-color: #000;
  --map-thema-border: transparent;
  --map-thema-radius: 0;
  --map-thema-icon: url(../../../assets/images/icon/arrow_right_bk.svg);
  --map-thema-bg: #1AEBFF;
}

/* vendors - 별도로 불러옴 */