#wrap {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  background-color: #fff;
}

/* header */
header {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  position: relative;
  background: #fff;
  border-bottom: 1px solid #101110;
  background: #fff;
}
.mo_gnb {
  display: none;
}
header .header_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  padding: 0 32px;
}
header .header_wrap > a {
  width: 346px;
  height: 49px;
  color: #000;
  text-align: center;
  background: url("/next/images/olympic88/ico/ico_logo.svg") center center no-repeat;
}
header .header_wrap ul {
  display: flex;
  align-items: center;
  gap: 16px;
}
header .header_wrap ul li {
  text-align: center;
}
header .header_wrap ul li a {
  color: #333;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  line-height: 150%;
  padding: 0 20px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: 4px solid transparent;
  transition: color 0.2s ease-in;
}
header .header_wrap ul li a:hover {
  color: #111143;
}
header .header_wrap ul li.active a {
  color: #111143;
  font-weight: 700;
  border-bottom-color: #111143;
}
header .header_wrap ul li:last-child {
  display: none;
}
header .header_wrap ul li:last-child .btn_more {
  content: "";
  width: 100%;
  height: 100%;
  background: url("/next/images/olympic88/ico/ico_hamberger.svg") center center
    no-repeat #111143;
  background-size: 24px 24px;
  position: relative;
  border-radius: 28px;
  transition: all 0.2s ease-out;
}
header .header_wrap ul li:last-child .btn_more:hover {
  opacity: 0.8;
}

/* main */
main {
  width: 100%;
  height: 100%;
}
main .main_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 120px);
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #fff;
}
main .main_wrap .title {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-left: 80px;
  padding-top: 80px;
  padding-right: 110px;
}
/* 곡선 배경: 시안 위치(헤더 아래 253px)보다 위로 올라가지 않음. 높이가 모자라면 아래가 잘림 */
main .main_wrap .title::before {
  content: "";
  position: absolute;
  inset: 253px 0 0 0;
  z-index: 0;
  background: url("/next/images/olympic88/bg/img_main_bg.svg") left max(0px, 100%) /
    100% auto no-repeat;
}
main .main_wrap .title span,
main .main_wrap .title p {
  position: relative;
  z-index: 1;
}
main .main_wrap .title span {
  color: #111143;
  font-family: "S-CoreDream";
  font-size: 79px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  letter-spacing: -0.795px;
}
main .main_wrap .title p {
  color: #535155;
  font-size: 20px;
  line-height: 150%;
  word-break: keep-all;
}
main .main_wrap .hero_container {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fff;
}
main .main_wrap .hero_contents {
  flex: 1;
  display: flex;
  gap: 1px;
}
main .main_wrap .hero_item {
  width: 330px;
  min-width: 330px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 32px 40px;
}
main .main_wrap .hero_item .thumb {
  position: absolute;
  top: 260px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}
main .main_wrap .hero_item .num {
  position: relative;
  z-index: 1;
  font-family: "Agdasima", sans-serif;
  font-size: 134px;
  line-height: 120%;
  letter-spacing: -1.343px;
}
main .main_wrap .hero_item .label {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 500;
  line-height: 150%;
  margin-left: 8px;
}
main .main_wrap .hero_item .label::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 18px;
  background: linear-gradient(
    to right,
    #1df052 0,
    #1df052 69px,
    rgba(63, 69, 84, 0.5) 69px,
    rgba(63, 69, 84, 0.5) 96px
  );
}
main .main_wrap .hero_item.theme_navy {
  background: #0d0e3e;
}
main .main_wrap .hero_item.theme_navy .num,
main .main_wrap .hero_item.theme_navy .label {
  color: #fff;
}
main .main_wrap .hero_item.theme_gray {
  background: #efefef;
}
main .main_wrap .hero_item.theme_gray .num,
main .main_wrap .hero_item.theme_gray .label {
  color: #111143;
}
main .main_wrap .hero_item.theme_gray .label::after {
  background: linear-gradient(
    to right,
    #1df052 0,
    #1df052 69px,
    rgba(227, 227, 226, 0.5) 69px,
    rgba(227, 227, 226, 0.5) 96px
  );
}
main .main_wrap .hero_item.theme_green {
  background: #1df052;
}
main .main_wrap .hero_item.theme_green .num,
main .main_wrap .hero_item.theme_green .label {
  color: #111143;
}
main .main_wrap .hero_item.theme_green .label::after {
  background: linear-gradient(
    to right,
    #111143 0,
    #111143 69px,
    rgba(227, 227, 226, 0.5) 69px,
    rgba(227, 227, 226, 0.5) 96px
  );
}
main .main_wrap .hero_contents .hero_item:nth-child(1) .thumb {
  background-image: url("/next/images/olympic88/bg/img_main_01.png");
}
main .main_wrap .hero_contents .hero_item:nth-child(2) .thumb {
  background-image: url("/next/images/olympic88/bg/img_main_02.png");
}
main .main_wrap .hero_contents .hero_item:nth-child(3) .thumb {
  background-image: url("/next/images/olympic88/bg/img_main_03.png");
}
main .main_wrap .hero_contents .hero_item:nth-child(4) .thumb {
  background-image: url("/next/images/olympic88/bg/img_main_04.png");
}
main .main_wrap .hero_item:hover .thumb {
  transform: scale(1.05);
}
main .main_wrap .hero_footer {
  flex: none;
  display: flex;
  gap: 1px;
  height: 100px;
}
main .main_wrap .hero_footer .footer_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
}
main .main_wrap .hero_footer .footer_link .txt {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
main .main_wrap .hero_footer .footer_link .btn_arrow {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  transition: transform 0.25s ease-out;
}
main .main_wrap .hero_footer .footer_link:hover .btn_arrow {
  transform: scale(1.1);
}
main .main_wrap .hero_footer .footer_link.timeline {
  flex: 1;
  background: #111143;
}
main .main_wrap .hero_footer .footer_link.timeline .txt {
  color: #fff;
}
main .main_wrap .hero_footer .footer_link.timeline .btn_arrow {
  background-color: #fff;
  background-image: url("/next/images/olympic88/ico/ico_arrow_black.svg");
}
main .main_wrap .hero_footer .footer_link.record {
  width: 330px;
  background: #1df052;
}
main .main_wrap .hero_footer .footer_link.record .txt {
  color: #111143;
}
main .main_wrap .hero_footer .footer_link.record .btn_arrow {
  background-color: #111143;
  background-image: url("/next/images/olympic88/ico/ico_arrow_green.svg");
}

/* 서브 페이지 */
.sub_main {
  width: 100%;
  min-height: calc(100vh - 120px);
  background-color: #f4f5f9;
  background-image: url("/next/images/olympic88/bg/img_sub_bg.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  display: flex;
  justify-content: center;
}
.subpage {
  width: 100%;
  max-width: 1920px;
  display: flex;
  align-items: flex-start;
  gap: 76px;
}
.subpage .lnb {
  width: 422px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.subpage .lnb .lnb_label {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: #111143;
}
.subpage .lnb .lnb_menu {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.subpage .lnb .lnb_menu a {
  display: block;
  padding: 16px 16px 16px 20px;
  border-radius: 12px;
  border: 1px solid #7f7f8b;
  background: #f4f5f9;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #8d8d9c;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.2s ease;
}
.subpage .lnb .lnb_menu a:hover {
  color: #111143;
  font-weight: 600;
  background: #fff;
  border-color: #111143;
}
.subpage .lnb .lnb_menu a.active {
  color: #fff;
  font-weight: 600;
  background: #2f2f5b;
  border-color: #111143;
}
.subpage .content {
  flex: 1;
  min-width: 0;
  padding: 34px 109px 72px 0;
}

/* 서브페이지 모바일 LNB */
.subpage .lnb_mo {
  margin-bottom: 20px;
}
.subpage .lnb_mo .lnb_mo_label {
  font-size: 15px;
  font-weight: 700;
  color: #111143;
  margin-bottom: 10px;
}
.subpage .lnb_mo .lnb_select {
  position: relative;
}
.subpage .lnb_mo .lnb_select_btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid #d7d8e0;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: #111143;
  text-align: left;
}
.subpage .lnb_mo .lnb_select_btn svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: #111143;
  transition: transform 0.2s ease;
}
.subpage .lnb_mo .lnb_select.open .lnb_select_btn svg {
  transform: rotate(180deg);
}
.subpage .lnb_mo .lnb_options {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #d7d8e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(17, 17, 67, 0.12);
}
.subpage .lnb_mo .lnb_select.open .lnb_options {
  display: block;
}
.subpage .lnb_mo .lnb_options a {
  display: block;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 500;
  color: #555;
}
.subpage .lnb_mo .lnb_options a.active {
  color: #111143;
  font-weight: 700;
  background: #f4f5f9;
}

.subpage .page_title {
  font-family: "S-CoreDream";
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: #111143;
  letter-spacing: -0.32px;
  margin-bottom: 28px;
  opacity: 0.8;
}
.subpage .card {
  background: #fff;
  border: 1px solid #b8b5c3;
  border-radius: 20px;
  padding: 62px 100px;
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.subpage .tab_panel > :last-child {
  margin-bottom: 0;
}
.subpage .tabs {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.subpage .tabs .tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 16px 32px;
  border-radius: 30px;
  border: 1px solid #e4e2e9;
  background: #fbfaff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #111143;
  letter-spacing: -0.02em;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.subpage .tabs .tab:hover {
  border-color: #c9c6d2;
}
.subpage .tabs .tab.active {
  background: #1df052;
  border-color: #1df052;
  color: #111143;
  font-weight: 600;
}
.subpage .tabs .tab:hover {
  background: #1df052;
  border-color: #1df052;
  color: #111143;
  font-weight: 600;
}
.subpage .tab_panel {
  display: none;
}
.subpage .tab_panel.active {
  display: block;
}
.subpage .card_subtitle {
  font-family: "S-CoreDream", sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: #111143;
  opacity: 0.8;
  margin: 0;
}
.subpage .para_group {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.subpage .para_group p {
  color: #333;
  font-size: 18px;
  line-height: 32px;
}
.subpage .img_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.subpage .img_row.lg {
  display: flex;
}
/* 원본 비율 이미지를 줄 폭에 맞춰 늘림 */
.subpage .img_row.lg.full > .img_item {
  flex: 1;
}
/* 본문 옆 이미지: [첫 문단 | 이미지] 아래 다음 문단이 전체 폭
   이미지 칸 폭은 시안 px(카드 1111 기준)을 --img-w 로 받음, 기본 583 */
.subpage .para_group.with_img {
  display: grid;
  grid-template-columns: 1fr calc(var(--img-w, 583) / 1111 * 100%);
  gap: 4px 40px;
}
/* 자식 순서: 글(p 또는 문단 묶음 div) → 이미지(.img_item 또는 .img_pair) → 이어지는 문단 */
.subpage .para_group.with_img > :first-child {
  grid-area: 1 / 1;
}
.subpage .para_group.with_img > :nth-child(2) {
  grid-area: 1 / 2;
  align-self: center;
}
.subpage .para_group.with_img > :nth-child(n + 3) {
  grid-column: 1 / -1;
}
/* 이미지 두 장 나란히: 각 칸 flex-grow 에 원본 폭을 주면 높이가 같아짐 */
.subpage .img_pair {
  display: flex;
  gap: 12px;
}
.subpage .img_pair > .img_item {
  flex: 1 1 0;
  min-width: 0;
}
/* 한 기록물을 두 장으로 나눈 묶음: 사이 여백도 눌러서 크게 보기 */
.subpage .img_pair.joined {
  cursor: zoom-in;
}
.img_row + .para_group {
  padding-top: 40px;
}
.img_row + .img_slider {
  padding-top: 40px;
}
.slider_ctrl + .para_group {
  padding-top: 40px;
}
.subpage .img_row > .img_item:only-child {
  grid-column: 1 / 2;
}
.subpage .para_group > .img_box:only-child {
  width: calc(50% - 9px);
}
.subpage .img_item {
  display: flex;
  flex-direction: column;
}
.subpage .img_box {
  position: relative;
  width: 100%;
  background: #ebeaed;
  overflow: hidden;
}
.subpage .img_box > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.subpage .img_slider .img_box > img {
  aspect-ratio: 547 / 279;
}
.subpage .diagram .img_box > img.doc {
  border: 1px solid #dadeee;
}
.subpage .img_item.diagram .img_box {
  background: #ebeaed;
}
.subpage .img_row.diagrams {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 40px;
}
.subpage .img_row.diagrams .img_item:first-child {
  flex: 0 0 50.32%;
}
.subpage .img_row.diagrams .img_item:last-child {
  flex: 0 0 30.87%;
}
.subpage .img_row.diagrams .img_item:first-child .img_box {
  aspect-ratio: 559 / 373;
}
.subpage .img_row.diagrams .img_item:last-child .img_box {
  aspect-ratio: 343 / 373;
}
/* 조직도 */
.subpage .img_row.diagrams .img_item:only-child {
  flex: 1 1 100%;
}
.subpage .img_row.diagrams .img_item:only-child .img_box {
  aspect-ratio: 1110 / 446;
}
.subpage .img_item .caption {
  margin-top: 10px;
  color: #636363;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.subpage .img_item .caption.mid {
  text-align: center;
}
.subpage .img_item .caption .source {
  font-size: 13px;
}
.subpage .img_box .tools,
.subpage .poster_grid .poster .tools {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.subpage .img_box .tools button,
.subpage .poster_grid .poster .tools button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #d8dee2;
  box-shadow: 0 4px 30px 0 rgba(53, 48, 48, 0.2);
  color: #111143;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.subpage .img_box .tools button:hover,
.subpage .poster_grid .poster .tools button:hover {
  background: #f4f6f7;
}
.subpage .img_box .tools button svg,
.subpage .img_box .tools button img,
.subpage .poster_grid .poster .tools button img {
  width: 24px;
  height: 24px;
}

/* 종목 필터 칩 */
.subpage .sport_filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 14px 16px;
  padding: 0;
  margin: 0 0 60px;
}
/* 종목별 개별 슬라이더 패널 */
.subpage .sport_panel {
  display: none;
}
.subpage .sport_panel.active {
  display: block;
}
.subpage .sport_chip {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: #111143;
  background: #f5f5fa;
  border: 1px solid #dcdae6;
  padding: 10px 26px;
  border-radius: 90px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.08s ease;
}
.subpage .sport_chip:hover {
  border-color: #1df052;
  background: #ecfdf1;
}
.subpage .sport_chip:active {
  transform: translateY(1px);
}
.subpage .sport_chip.active {
  background: #1df052;
  border-color: #1df052;
  color: #05331a;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(29, 240, 82, 0.35);
}

/* 서브 페이지 이미지 슬라이더 */
.subpage .img_slider {
  margin-bottom: 40px;
}
.subpage .img_slider .swiper {
  width: 100%;
}
.subpage .img_slider .swiper-slide {
  height: auto;
}
.subpage .slider_ctrl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 20px;
}
.subpage .slider_ctrl .track {
  position: relative;
  flex: 0 1 372px;
  height: 3px;
  background: #d8d8d8;
  border-radius: 2px;
  overflow: hidden;
}
.subpage .slider_ctrl .track .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 16%;
  background: #111143;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.subpage .slider_ctrl .counter {
  margin-left: 11px;
  font-size: 16px;
  font-weight: 400;
  color: #494949;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.subpage .slider_ctrl .counter .cur {
  color: #111143;
  font-weight: 600;
}
.subpage .slider_ctrl .nav {
  display: flex;
  gap: 8px;
}
.subpage .slider_ctrl .nav button {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: #111143;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.subpage .slider_ctrl .nav button:hover {
  opacity: 0.85;
}
.subpage .slider_ctrl .nav button:disabled {
  opacity: 0.3;
  cursor: default;
}
.subpage .slider_ctrl .nav button img {
  width: 12px;
  height: 21px;
}
.subpage .slider_ctrl .nav button.prev img {
  transform: rotate(180deg);
}

/* 서브 페이지 참고문헌 */
.subpage .refs {
  margin-top: 52px;
  padding-top: 52px;
  border-top: 1px solid #e6e7ee;
}
.subpage .sport_grid + .refs {
  margin-top: 40px;
  padding-top: 40px;
}
.subpage .refs .refs_toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #3e3e56;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.subpage .refs .refs_toggle img {
  width: 9px;
  height: 6px;
  transition: transform 0.2s ease;
}
.subpage .refs.collapsed .refs_toggle img {
  transform: rotate(180deg);
}
.subpage .refs .refs_clip {
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.subpage .refs .refs_list {
  margin-top: 6px;
  padding: 24px 36px;
  background: #fbfaff;
  border: 1px solid #c7c3d0;
  border-radius: 8px;
  transition: opacity 0.3s ease;
}
.subpage .refs.collapsed .refs_list {
  opacity: 0;
}
.subpage .refs .refs_list li {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* 가이드 페이지 */
.sub_main.guide_page {
  background-color: #fbfaff;
}
.subpage.guide .lnb .lnb_menu a.active {
  color: #fff;
  background: #2f2f5b;
  border-color: #111143;
}
.subpage.guide .card {
  padding: 62px 100px;
}
.guide_sections {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.guide_sec {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.guide_sec > h2 {
  font-family: "S-CoreDream", sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: #111143;
  opacity: 0.8;
}
.guide_sec > p {
  color: #333;
  font-size: 18px;
  line-height: 30px;
}
.guide_sec > p.sm {
  font-size: 18px;
}
.guide_infobox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e0dee8;
  border-radius: 20px;
}
.guide_infobox .row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.guide_infobox .row .label {
  color: #333;
  font-size: 18px;
  line-height: 30px;
}
.btn_orig {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 4px 12px;
  border-radius: 12px;
  background: #fff;
  font-size: 20px;
  line-height: 30px;
  white-space: nowrap;
  cursor: default;
}
.btn_orig svg {
  width: 24px;
  height: 24px;
}
.btn_orig.open {
  border: 1px solid #199a4a;
  color: #199a4a;
}
.btn_orig.closed {
  border: 1px solid #3b3d93;
  color: #3b3d93;
}
.guide_contact {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #fbfaff;
  border-radius: 20px;
}
.guide_contact p {
  flex: 1;
  color: #333;
  font-size: 16px;
  line-height: 30px;
}

/* 메뉴소개 및 내용 집필 표 */
.guide_table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #222;
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.5;
  color: #222;
  table-layout: fixed;
}
.guide_table th,
.guide_table td {
  border-bottom: 1px solid #e7e9ed;
  padding: 10px;
  vertical-align: middle;
  font-weight: 400;
  word-break: keep-all;
}
.guide_table thead th {
  border-bottom: 1px solid #222;
}
.guide_table .gt_menu {
  background: #fafbfd;
  text-align: center;
  font-weight: 500;
}
.guide_table thead .gt_menu {
  font-weight: 400;
}
.guide_table .gt_desc {
  text-align: left;
  padding: 10px 16px;
}
.guide_table .gt_author {
  background: #fafbfd;
  text-align: center;
}
.guide_table .gt_author b {
  display: block;
  font-weight: 400;
}
.guide_table .gt_author span {
  display: block;
  font-size: 14px;
  color: #49494c;
}
.guide_table tbody tr:last-child th,
.guide_table tbody tr:last-child td {
  border-bottom: 1px solid #222;
}
.guide_table tbody tr:nth-last-child(2) th[rowspan] {
  border-bottom-color: #222;
}

/* 타임라인 페이지 */
.sub_main.timeline_page {
  background-color: #fbfaff;
}
.tl {
  --tl-band: rgba(26, 27, 84, 0.6);
  --tl-line: #e6e2f3;
  --band-left: 10.282%;
  --band-width: 23.923%;
  --year-mr: 19.64%;
  --dot-left: 32.369%;
  --events-left: 38.386%;
  --events-width: 56.588%;
  position: relative;
  padding: 77px 0 77px;
  background: #fff;
  border: 1px solid #b8b5c3;
  border-radius: 20px;
  overflow: hidden;
}
.tl_band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--band-left);
  width: var(--band-width);
  background: var(--tl-band);
  z-index: 2;
}
.tl_green {
  position: absolute;
  z-index: 0;
  background: #1df052;
}
.tl_green.g1 {
  left: 0;
  top: 403px;
  width: 16.375%;
  height: 152px;
}
.tl_green.g2 {
  left: 79.893%;
  top: 521px;
  width: 15.842%;
  height: 145px;
}
.tl_green.g3 {
  left: 3.731%;
  top: 1157px;
  width: 16.375%;
  height: 152px;
}
.tl_green.g4 {
  left: -2.741%;
  top: 1653px;
  width: 11.881%;
  height: 110px;
}
.tl_green.g5 {
  left: 0%;
  top: 2361px;
  width: 14.013%;
  height: 71px;
}
.tl_img {
  position: absolute;
  z-index: 1;
  height: 305px;
  background: #ebeaed;
  overflow: hidden;
}
.tl_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tl_img.img1 {
  left: 0;
  top: 214px;
  width: 35.567%;
}
.tl_img.img2 {
  right: 0;
  top: 547px;
  width: 17.821%;
  height: 201px;
  z-index: 4;
}
.tl_img.img3 {
  left: 5.4%;
  top: 1179px;
  width: 32.14%;
}
.tl_img.img4 {
  left: -1.523%;
  top: 1669px;
  width: 23.381%;
  height: 195px;
}
.tl_img.img5 {
  left: 0;
  top: 2381px;
  width: 34.196%;
  height: 362px;
}
.tl_rows {
  position: relative;
  z-index: 3;
}
.tl_row {
  position: relative;
  display: grid;
  grid-template-columns: var(--events-left) 1fr;
  align-items: start;
}
.tl_year {
  grid-column: 1;
  justify-self: end;
  margin-right: var(--year-mr);
  transform: translateY(calc(-1 * var(--yoff, 0px)));
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-size: 52px;
  line-height: 30px;
  color: #fff;
  white-space: nowrap;
}
.tl_row::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: var(--dot-left);
  top: calc(15px - var(--yoff, 0px));
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8.66px solid #fff;
}
.tl_rows .tl_row:nth-child(3) {
  --yoff: 54px;
}
.tl_rows .tl_row:nth-child(5) {
  --yoff: 60px;
}
.tl_rows .tl_row:nth-child(7) {
  --yoff: 64px;
}
.tl_rows .tl_row:nth-child(9) {
  --yoff: 60px;
}
.tl_rows .tl_row:nth-child(11) {
  --yoff: 62px;
}
.tl_rows .tl_row:nth-child(13) {
  --yoff: 60px;
}
.tl_rows .tl_row:nth-child(15) {
  --yoff: 65px;
}
.tl_rows .tl_row:nth-child(17) {
  --yoff: 66px;
}
.tl_group {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl_group .ev {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.tl_group .ev_head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.tl_group .ev_bul {
  flex: none;
  width: 10px;
  height: 10px;
  background: #111143;
}
.tl_group .ev_date {
  flex: none;
  width: 88px;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #111143;
}
.tl_group .ev_desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #333;
}
.tl_div {
  height: 1px;
  margin: 44px 0 43px var(--events-left);
  width: var(--events-width);
  background: var(--tl-line);
}

/* 기록물 목록 페이지 */
.sub_main.records_page {
  background-color: #fbfaff;
}
/* 제목 없이 검색·표가 바로 시작하므로 시안대로 위 여백을 줄임 */
.subpage.records .content {
  padding-top: 26px;
}
.subpage.records .card {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* 검색 영역 */
.records_search {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 27px;
}
.records_search .search_box {
  flex: 1;
  min-width: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 0 20px 0 24px;
  background: #fff;
  border: 1px solid #b8b5c3;
  border-radius: 8px;
}
.records_search select {
  height: 100%;
  padding-right: 32px;
  border: 0;
  background: url("/next/images/olympic88/ico/ico_arrow_select.svg") right center / 24px
    24px no-repeat;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111143;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.records_search .search_box select {
  flex: none;
  width: 92px;
}
.records_search .search_box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: #333;
  letter-spacing: -0.18px;
}
.records_search .search_box input::placeholder {
  color: #939291;
}
.records_search .btn_search {
  flex: none;
  width: 24px;
  height: 24px;
  background: url("/next/images/olympic88/ico/ico_search.svg") center / 24px 24px
    no-repeat;
}
.records_search .filter {
  flex: none;
  width: 232px;
  height: 46px;
  padding: 0 20px;
  background-color: #fff;
  background-position: right 20px center;
  border: 1px solid #b0b0fd;
  border-radius: 8px;
}
.records_search .btn_download {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid #b0b0fd;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #111143;
  white-space: nowrap;
}
.records_search .btn_download img {
  width: 20px;
  height: 20px;
}

/* 목록 표 */
.records_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #333;
}
.records_table th,
.records_table td {
  padding: 16px 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
}
.records_table thead th {
  padding: 12px;
  background: #fbfaff;
  font-size: 14px;
}
.records_table .rt_type,
.records_table .rt_title {
  text-align: left;
}
.records_table td.rt_num {
  font-weight: 400;
}
.records_table td.rt_year {
  color: #4a4a51;
}
.records_table .rt_title a {
  color: #333;
}
.records_table .rt_title a:hover {
  color: #111143;
  text-decoration: underline;
}
.records_table .tools {
  display: flex;
  justify-content: center;
}
/* 보기 버튼: 아이콘 + 원문보기/동영상보기 */
.records_table .tools button {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #d8dee2;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.records_table .tools button span {
  min-width: 64px;
  text-align: center;
}
.records_table .tools button:hover {
  background: #f4f6f7;
}
.records_table .tools button svg {
  width: 24px;
  height: 24px;
}

/* 페이지네이션 */
.paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 0;
}
.paging .pages {
  display: flex;
  gap: 4px;
}
.paging .pages a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #494949;
}
.paging .pages a:hover {
  background: #f4f5f9;
}
.paging .pages a.active {
  background: #111143;
  color: #fff;
}
.paging .next {
  width: 20px;
  height: 20px;
  background: url("/next/images/olympic88/ico/ico_arrow_paging.svg") center / 20px
    20px no-repeat;
}

/* 기록물 상세 */
.record_view {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
.record_view .card {
  width: 100%;
}
.record_info {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.record_info tr + tr {
  border-top: 1px solid #cecee9;
}
.record_info th,
.record_info td {
  height: 46px;
  font-size: 16px;
  line-height: 1.2;
  vertical-align: middle;
}
.record_info th {
  font-weight: 400;
  color: #111143;
  text-align: center;
  border-right: 1px solid #cecee9;
}
.record_info td {
  padding: 0 20px;
  font-weight: 500;
  color: #333;
  text-align: left;
}
.record_info td.half {
  border-right: 1px solid #cecee9;
}
.record_desc {
  min-height: 385px;
  padding: 52px;
  border-top: 1px solid #dedfeb;
}
.record_desc p {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
}
.record_view .btn_list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 44px;
  background: #111143;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: normal;
  letter-spacing: -0.16px;
}

.mo {
  display: none;
}
.pc {
  display: block;
}

/* 정적 이미지 행 캐러셀 컨트롤: PC(2장 그리드)에선 숨김, 모바일에서만 표시 */
.subpage .slider_ctrl.row_ctrl {
  display: none;
}

/* =========================================================
   세계가 모인 서울 : 대회 페이지 전용 컴포넌트
   - 두 장 이미지(개막/폐막) 행
   - 종목 픽토그램 그리드
   - 종목별 포스터 카드 그리드
   - 종목 상세 레이어(모달)
   ========================================================= */

.subpage .event_imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 40px;
}
.subpage .para_group:has(+ .event_imgs),
.subpage .para_group:has(+ .sport_grid),
.subpage .para_group:has(+ .poster_grid) {
  margin-bottom: 40px;
}
.subpage .para_group:has(+ .event_imgs) p,
.subpage .para_group:has(+ .sport_grid) p,
.subpage .para_group:has(+ .poster_grid) p {
  text-align: justify;
  letter-spacing: normal;
  text-indent: 0;
  word-break: break-word;
}
@media (min-width: 1401px) {
  .subpage .card:has(.sport_grid),
  .subpage .card:has(.poster_grid) {
    padding-left: 101px;
    padding-right: 101px;
  }
}
.subpage .event_imgs .img_item .img_box {
  aspect-ratio: 546 / 279;
}
/* 대회 페이지에 슬라이더 추가 */
.subpage .event_imgs.img_slider {
  display: block;
}

/* ---------- 종목 픽토그램 그리드 ---------- */
.subpage .sport_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}
.subpage .sport_grid .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.subpage .sport_grid .cell .pic {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ebeaed;
  transition: background-color 0.25s ease;
}
.subpage .sport_grid .cell .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 흰 배경 픽토그램을 칸 배경색과 섞어 배경색만 바꿔도 톤이 같이 바뀌게 */
  mix-blend-mode: darken;
  transition: transform 0.25s ease;
}
/* 패럴림픽: 투명 배경 픽토그램을 59% 불투명도로 */
.subpage .sport_grid.para .cell .pic img {
  mix-blend-mode: normal;
  opacity: 0.59;
}
.subpage .sport_grid.clickable .cell .pic {
  cursor: pointer;
}
.subpage .sport_grid.clickable .cell .pic:hover {
  background-color: #1df052;
}
.subpage .sport_grid.clickable .cell .pic:hover img {
  transform: scale(1.05);
}
.subpage .sport_grid .cell .name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #636363;
  text-align: center;
  transition: color 0.25s ease;
}
.subpage .sport_grid.clickable .cell .pic:hover + .name {
  color: #111143;
}

/* ---------- 종목별 포스터 카드 그리드 ---------- */
.subpage .poster_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}
.subpage .poster_grid .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.subpage .poster_grid .cell .poster {
  position: relative;
  width: 79.3%;
  aspect-ratio: 161 / 228;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ebeaed;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 문서 툴바: 포스터·종목명(.cell)에 올렸을 때만 표시. 마우스 없는 기기는 항상 표시 */
@media (hover: hover) {
  .subpage .poster_grid .poster .tools {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
  }
  .subpage .poster_grid .cell:hover .poster .tools,
  .subpage .poster_grid .cell:focus-within .poster .tools {
    opacity: 1;
    visibility: visible;
  }
}
.subpage .poster_grid .cell .name {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #333;
  text-align: center;
}
@media (max-width: 900px) {
  .subpage .sport_grid,
  .subpage .poster_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .subpage .sport_grid,
  .subpage .poster_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .subpage .poster_grid .cell .poster {
    width: 100%;
  }
}

/* ---------- 종목 상세 레이어(모달) ---------- */
.sport_modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.sport_modal.active {
  display: flex;
}
body:has(.sport_modal.active) {
  overflow: hidden;
}
.sport_modal .dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.sport_modal .modal_box {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  width: 1180px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  padding: 0 52px 52px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* 상단: 설명보기 라벨 + 닫기 */
.sport_modal .m_top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: -28px;
  padding: 24px 0;
}
.sport_modal .m_label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #333;
}
.sport_modal .m_close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sport_modal .m_close img {
  width: 13px;
  height: 13px;
}
.sport_modal .m_head {
  flex: none;
  background: #0d0e3e;
  border-radius: 14px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sport_modal .m_head h2 {
  color: #fff;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
}
.sport_modal .m_meta {
  flex: none;
  display: flex;
  align-items: stretch;
  height: 48px;
  border-top: 1px solid #babad5;
  border-bottom: 1px solid #babad5;
}
.sport_modal .m_pair {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
}
.sport_modal .m_meta .m_pair:first-child {
  width: 488px;
}
.sport_modal .m_meta .m_pair:last-child {
  width: 234px;
}
.sport_modal .m_pair.grow {
  flex: 1 1 0;
  min-width: 0;
}
.sport_modal .m_pair .m_l {
  flex: none;
  width: 131px;
  height: 46px;
  background: #f3f3f8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111143;
  font-size: 16px;
  font-weight: 400;
}
.sport_modal .m_pair .m_v {
  height: 46px;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.sport_modal .m_desc {
  flex: none;
  background: #fbfaff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 20px;
  line-height: 32px;
  text-align: justify;
  letter-spacing: normal;
  word-break: break-word;
}
.sport_modal .m_gallery {
  align-self: flex-end;
  width: 1075px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}
.sport_modal .m_main {
  position: relative;
  width: 100%;
  height: 590px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  flex: none;
}
.sport_modal .m_slide {
  position: absolute;
  inset: 0;
  display: none;
}
.sport_modal .m_slide.active {
  display: block;
}
.sport_modal .m_slide .bg,
.sport_modal .m_thumb .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
.sport_modal .m_slide .ov,
.sport_modal .m_thumb .ov {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}
.sport_modal .m_slide .sharp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.sport_modal .m_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  background: #111143;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.sport_modal .m_arrow.prev {
  left: 20px;
}
.sport_modal .m_arrow.next {
  right: 20px;
}
.sport_modal .m_arrow svg,
.sport_modal .m_arrow img {
  width: 12px;
  height: 21px;
  display: block;
}
.sport_modal .m_arrow.prev img {
  transform: rotate(180deg);
}
.sport_modal .m_arrow.is-off {
  opacity: 0.35;
  pointer-events: none;
}
.sport_modal .m_thumbs {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
}
.sport_modal .m_thumb {
  position: relative;
  width: 199px;
  height: 199px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  flex: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.2s ease;
}
.sport_modal .m_thumb .sharp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.sport_modal .m_thumb.active {
  outline-color: #111143;
}
.sport_modal .m_ctrl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.sport_modal .m_prog {
  display: flex;
  align-items: center;
  gap: 31px;
}
.sport_modal .m_track {
  position: relative;
  width: 372px;
  height: 3px;
  background: #d8d8d8;
}
.sport_modal .m_bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  background: #111143;
  transition: width 0.3s ease;
}
.sport_modal .m_counter {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  line-height: 1.5;
}
.sport_modal .m_counter .cur {
  color: #111143;
  font-weight: 600;
}
.sport_modal .m_counter .sep,
.sport_modal .m_counter .total {
  color: #494949;
  font-weight: 400;
}
.sport_modal .m_nav {
  display: flex;
  gap: 8px;
}
.sport_modal .m_nav button {
  width: 38px;
  height: 38px;
  background: #111143;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.sport_modal .m_nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
.sport_modal .m_nav button svg,
.sport_modal .m_nav button img {
  width: 12px;
  height: 21px;
  display: block;
}
.sport_modal .m_nav button.prev img {
  transform: rotate(180deg);
}

/* ---------- 기록물 이미지 크게 보기 ---------- */
.subpage .img_box img.doc.zoomable {
  cursor: zoom-in;
}
.img_viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.img_viewer.active {
  display: flex;
}
body:has(.img_viewer.active) {
  overflow: hidden;
}
/* 이미지 무대: 툴바 위 남는 공간 (시안 1080 기준 이미지 영역 95~822px) */
.img_viewer .v_stage {
  flex: 1 1 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 95px 40px 42px;
  overflow: hidden;
}
.img_viewer .v_img {
  flex: none;
  /* 크기는 스크립트가 무대에 맞춰 계산하고, 확대·회전·반전·이동은 transform 으로
     버튼을 연달아 누르면 산만해서 전환 효과 없이 바로 바뀌게 둔다 */
  background: #fff; /* 배경이 투명한 원본 */
  touch-action: none;
  user-select: none;
}
.img_viewer .v_stage.is-zoomed .v_img {
  cursor: grab;
}
.img_viewer .v_img.is-dragging {
  cursor: grabbing;
}
/* 툴바·닫기 버튼 공통 */
.img_viewer .btn_close,
.img_viewer .v_tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}
.img_viewer .btn_close:hover,
.img_viewer .v_tools button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.7);
}
.img_viewer .btn_close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  width: 44px;
  height: 44px;
}
.img_viewer .btn_close img {
  width: 13px;
  height: 13px;
}
.img_viewer .v_tools {
  flex: none;
  display: flex;
  gap: 8px;
  margin-bottom: 80px;
}
.img_viewer .v_tools button {
  width: 36px;
  height: 36px;
}
.img_viewer .v_tools button img {
  width: 24px;
  height: 24px;
}
.img_viewer .v_tools button:disabled {
  opacity: 0.4;
  cursor: default;
}
/* 쪽 썸네일 줄 */
.img_viewer .v_thumbs {
  flex: none;
  align-self: stretch;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: safe center; /* 넘치면 왼쪽부터 가로 스크롤 */
  gap: 8px;
  padding: 0 24px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.7);
}
.img_viewer .v_thumbs button {
  flex: none;
  height: 68px;
  opacity: 0.5;
}
.img_viewer .v_thumbs button.active,
.img_viewer .v_thumbs button:hover {
  opacity: 1;
}
.img_viewer .v_thumbs img {
  display: block;
  width: auto;
  height: 100%;
}

/* ---------- 기록물 설명보기 레이어 ---------- */
.rec_modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rec_modal.active {
  display: flex;
}
body:has(.rec_modal.active) {
  overflow: hidden;
}
.rec_modal .dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.rec_modal .modal_box {
  position: relative;
  width: 840px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-bottom: 32px;
  background: #fff;
}
.rec_modal .m_top {
  flex: none;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}
.rec_modal .m_label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #333;
}
.rec_modal .m_close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rec_modal .m_close img {
  width: 13px;
  height: 13px;
}
.rec_modal .m_body {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 0 32px;
}
/* 관리정보 표는 기록물 상세(.record_info) 그대로, 위아래 선만 추가 */
.rec_modal .record_info {
  border-top: 1px solid #cecee9;
  border-bottom: 1px solid #cecee9;
}
.rec_modal .m_desc {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}