@charset "utf-8";

/* ============================================================
   tour.css — 둘러보기 (#tour-page)

   마크업 : sections/tour/   ·   동작 : assets/js/tour.js
   ============================================================ */

#tour-page {
  /* 골드 포인트 — 컬러칩에 없는 색이라 페이지 토큰으로 둔다 (teeth · tmj 도 같은 값) */
  --one-pt: #dbba39;
  --one-tit: #5f5449;      /* 제목 갈색 — 컬러칩에 없는 색이라 페이지 토큰으로 둔다 (teeth 와 같은 값) */

  --one-map-w: 100%;       /* 약도 — 열 폭을 그대로 쓴다 */
  --one-map-pt: var(--one-pt);   /* 진료시간 강조(야간진료 끝 시간 · 달) — 골드. ui.css 기본은 파랑 */
  --one-map-moon: 0.9em;         /* 달 아이콘 크기 */
  --one-eqp-side: 0.86;    /* 장비소개 — 가운데가 아닌 장의 축소 비율 */
  --one-loc-icon: 56px;    /* 오시는 길 · 주차 아이콘 상자 */
  --one-loc-wm: 420px;     /* 오시는 길 — 좌하단 치아 워터마크 폭. 이 값 하나로 크기 · 위치 · 잘림이 같이 비례한다 */
  --one-intr-w: min(850px, 62vw);  /* 둘러보기 — 가운데 장 폭 (크롭 원본 849px) */
  --one-intr-gap: 56px;            /* 둘러보기 — 장 사이 간격. tour.js 의 spaceBetween 과 같은 값 */
  --one-intr-dot: 8px;             /* 둘러보기 — 페이지 점 지름 */
  --one-lb-bg: rgba(0, 0, 0, 0.85);  /* 크게 보기 — 뒤를 덮는 막. 끝 숫자가 진하기 */
  --one-lb-gap: 32px;                /* 크게 보기 — 사진과 좌우 화살표 사이 */
  --one-wm-ratio: 250 / 273;       /* 치아 워터마크 원본 비율 — 정사각형이 아니라 높이는 이 비율로 */
  --one-dr-vis: 300px;             /* 의료진 — 치아 워터마크 폭 (원본 250, 1.2배) */
  --one-dr-shift: 60px;            /* 의료진 — 워터마크 + 글을 함께 오른쪽으로 미는 거리 */
}

/* common.css 의 margin-bottom:100px 이 과하다 — 다른 페이지와 같은 값으로 */
#tour-page .sec-hd {
  margin-bottom: var(--one-gap-xl);
}

/* 제목 갈색 — Astra 가 h2·h3 에 자기 색을 뿌려서 시안과 달라진다 */
#tour-page .tit-color {
  color: var(--one-tit);
}

#tour-page .pt-color {
  color: var(--one-pt);
}

/* 등장 애니메이션 이동 거리 — animation.css 기본 40px 는 스크롤이 무겁게 느껴진다 */
#tour-page .anim-fade-up {
  transform: translateY(28px);
}


/* ============================
   01 의료진 소개
============================ */

#tour-page .sec-dr {
  overflow: hidden;
}

#tour-page .dr-intro {
  letter-spacing: 0.4em;
}

/* 글자 키만 한 두툼한 막대 — border 는 줄상자 높이라 길고 얇아진다.
   inline-block 이라 PC(왼쪽 정렬) · 모바일(가운데) 어느 쪽이든 글과 함께 선다 */
#tour-page .dr-role::before {
  display: inline-block;
  width: 0.28em;
  height: 0.8em;
  margin-right: var(--one-gap-sm);
  vertical-align: -0.08em;
  background-color: currentColor;
  content: "";
}

/* 좌측 치아 워터마크 — 장식. 글과 같은 거리만큼 함께 오른쪽으로 민다 */
#tour-page .dr-bg {
  position: absolute;
  top: 55%;
  left: calc(8% + var(--one-dr-shift));
  width: var(--one-dr-vis);
  aspect-ratio: var(--one-wm-ratio);   /* height 를 폭과 같게 두면 세로가 잘린다 */
  background-image: url(../images/tour/sec01-img.png);
  transform: translateY(-50%);
}

/* 워터마크 자리를 비워두려고 글 묶음을 오른쪽으로 민다.
   transform 은 쓰지 않는다 — .anim-fade-up 이 같은 속성을 쓴다 */
#tour-page .dr-card {
  max-width: var(--one-lead-w);
  margin-left: auto;
  margin-right: calc(var(--one-dr-shift) * -1);
}

/* 글자 키만 한 두툼한 막대 — border 는 줄상자 높이라 길고 얇아진다.
   inline-block 이라 PC(왼쪽 정렬) · 모바일(가운데) 어느 쪽이든 글과 함께 선다 */
#tour-page .dr-role::before {
  display: inline-block;
  width: 0.28em;
  height: 0.8em;
  margin-right: var(--one-gap-sm);
  vertical-align: -0.08em;
  background-color: currentColor;
  content: "";
}


#tour-page .dr-spec {
  padding-top: var(--one-gap-sm);
}

#tour-page .dr-quote {
  padding: var(--one-space-s) 0;
}

#tour-page .dr-cols {
  display: grid;
  grid-template-columns: 1fr auto;   /* 우측(학회) 열은 가장 긴 한 줄(.dr-nowrap)에 맞춰 넓어진다 */
  gap: var(--one-gap-xl);
}

/* 긴 한 줄 — PC 는 줄바꿈 없이, 모바일은 안쪽 <br class="only-mo"> 자리에서 끊는다 */
#tour-page .dr-nowrap {
  white-space: nowrap;
}

#tour-page .dr-tit {
  padding-bottom: var(--one-gap-r);
  color: var(--main-color);
  font-size: var(--one-p-tit);
}

#tour-page .dr-col .lst-dot {
  color: var(--sub-color04);
}

#tour-page .sec-intr .hd3 {
  margin-top: 50px;
}


/* ============================
   02 둘러보기 — 가운데 장이 크고 좌우가 걸치는 갤러리
============================ */

#tour-page .sec-intr {
  padding-inline: 0;
  background-color: #a5937b;
}

/* 밴드 여백 — 제목 위아래를 같게. common.css 의 .sec-hd 아래 여백(48+100)은 지운다 */
#tour-page .sec-intr .con-inner {
  padding: var(--one-space-r) 0 0;
}

#tour-page .sec-intr .sec-hd {
  padding-bottom: 0;
  margin-bottom: 0;
}

#tour-page .sec-intr .sec-body {
  padding: var(--one-space-r) 0;
}

#tour-page .intr-wrap {
  position: relative;
  width: 100%;
}

#tour-page .intr-slide {
  width: 100%;
}

/* Swiper 가 붙기 전에도 가운데에 오게 — 초기화되면 Swiper 가 위치를 잡는다 */
#tour-page .intr-slide:not(.swiper-initialized) .swiper-wrapper {
  justify-content: center;
}

/* slidesPerView:'auto' 라 장 폭을 CSS 가 정한다 — 없으면 왼쪽으로 몰린다 */
#tour-page .intr-item {
  width: var(--one-intr-w);
  height: auto;
}

#tour-page .intr-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1em;
}
/* 사진 아래 한 줄 — ‹ · · · · › */
#tour-page .intr-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-gap-xl);
  padding-top: var(--one-space-s);
}

/* 화살표 — 테두리 두 변을 45° 돌려 만든다 (이미지 없음) */
#tour-page .intr-btn {
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--white-color);
  border-right: 2px solid var(--white-color);
  cursor: pointer;
}

#tour-page .intr-prev {
  transform: rotate(-135deg);
}

#tour-page .intr-next {
  transform: rotate(45deg);
}

/* 점 — Swiper 기본 위치·여백을 덮는다 */
#tour-page .intr-pg {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--one-gap-sm);
  width: auto;
}

#tour-page .intr-pg .swiper-pagination-bullet {
  width: var(--one-intr-dot);
  height: var(--one-intr-dot);
  margin: 0;
  background-color: var(--white-color);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

#tour-page .intr-pg .swiper-pagination-bullet-active {
  opacity: 1;
}

/* 크게 보기 — 화면 전체를 덮는 어두운 막 위에 사진 한 장. 여닫기는 tour.js */
body.one-lb-open {
  overflow: hidden;   /* 열린 동안 뒤 화면이 굴러가지 않게 */
}

#tour-page .intr-item {
  cursor: zoom-in;
}

/* hidden 속성이 display:flex 에 밀리지 않게 — 닫힌 상태 */
#tour-page .intr-lb[hidden] {
  display: none;
}

#tour-page .intr-lb {
  position: fixed;
  inset: 0;
  z-index: 450;   /* 퀵메뉴(420) 위 — 화살표가 가려지지 않게. quick.css 사다리 참고 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-lb-gap);
  padding: var(--one-space-s);
  background-color: var(--one-lb-bg);
}

#tour-page .intr-lb-img {
  display: block;
  width: auto;
  min-width: 0;
  max-width: calc(100% - (18px + var(--one-lb-gap)) * 2);   /* 화살표 두 개 자리 */
  max-height: 100%;
  border-radius: 1em;
}

/* 닫기 — 45° 로 돌린 두 선 */
#tour-page .intr-lb-close {
  position: absolute;
  top: var(--one-space-s);
  right: var(--one-space-s);
  width: var(--one-icon-xl);
  height: var(--one-icon-xl);
  cursor: pointer;
}

#tour-page .intr-lb-close::before,
#tour-page .intr-lb-close::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--white-color);
  content: "";
}

#tour-page .intr-lb-close::before { transform: rotate(45deg); }
#tour-page .intr-lb-close::after  { transform: rotate(-45deg); }

/* 좌우 — 갤러리 화살표와 같은 모양. 화면 끝이 아니라 사진 바로 옆에 선다 (flex 순서: prev · img · next) */
#tour-page .intr-lb-btn {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--white-color);
  border-right: 2px solid var(--white-color);
  cursor: pointer;
}

#tour-page .intr-lb-prev {
  transform: rotate(-135deg);
}

#tour-page .intr-lb-next {
  transform: rotate(45deg);
}


/* ============================
   03 장비소개
============================ */

#tour-page .sec-eqp {
  background-color: #f1f1f1;
}

#tour-page .eqp-wrap {
  position: relative;
}

#tour-page .eqp-txt-tit {
  gap: 0 !important;
}

#tour-page .eqp-txt {
  font-size: var(--one-body);
}

#tour-page .eqp-txt-intro {
  letter-spacing: 0;
}

#tour-page .eqp-slide {
  width: 100%;
}

/* 가운데(활성) 장만 원래 크기, 나머지는 작고 흐리게 — tour.js 의 centeredSlides 와 한 벌.
   scale 은 transform 이라 자리는 그대로고 그림만 줄어든다 */
/* 옆 장은 눌러서 가운데로 가져올 수 있다 (tour.js slideToClickedSlide) */
#tour-page .eqp-slide .swiper-slide:not(.swiper-slide-active) {
  cursor: pointer;
}

#tour-page .eqp-slide .swiper-slide {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: scale(var(--one-eqp-side));
  opacity: 0.55;
}

#tour-page .eqp-slide .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}

#tour-page .eqp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  padding: var(--one-space-s) var(--one-gap-lg);
  background-color: var(--white-color);
  text-align: center;
}

#tour-page .eqp-vis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240px;
}

#tour-page .eqp-vis img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}


#tour-page .eqp-tit {
  padding-top: var(--one-gap-lg);
  color: var(--sub-color17);
}

#tour-page .eqp-desc {
  font-size: var(--one-body);
  padding-top: var(--one-gap-r);
  color: var(--sub-color18);
}

/* 사진 아래 한 줄 — ‹ · · · · › (둘러보기 갤러리와 같은 형태) */
#tour-page .eqp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-gap-xl);
  padding-top: var(--one-space-s);
}

/* 화살표 — 테두리 두 변을 45° 돌려 만든다 (이미지 없음) */
#tour-page .eqp-btn {
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--gray-color02);
  border-right: 2px solid var(--gray-color02);
  cursor: pointer;
}

#tour-page .eqp-prev {
  transform: rotate(-135deg);
}

#tour-page .eqp-next {
  transform: rotate(45deg);
}

/* 점 — Swiper 기본 위치·여백을 덮는다 */
#tour-page .eqp-pg {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--one-gap-sm);
  width: auto;
}

#tour-page .eqp-pg .swiper-pagination-bullet {
  width: var(--one-intr-dot);
  height: var(--one-intr-dot);
  margin: 0;
  background-color: var(--gray-color02);
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

#tour-page .eqp-pg .swiper-pagination-bullet-active {
  opacity: 1;
}


/* ============================
   04 오시는 길
============================ */

#tour-page .sec-loc {
  overflow: hidden;
}

/* 좌하단 치아 워터마크 — 왼쪽 · 아래로 조금씩 잘려 나간다 */
#tour-page .loc-bg {
  position: absolute;
  left: calc(var(--one-loc-wm) * -0.18);
  bottom: calc(var(--one-loc-wm) * -0.03);
  width: var(--one-loc-wm);
  aspect-ratio: var(--one-wm-ratio);
  background-image: url(../images/tour/sec01-img.png);
}

/* 시안은 좌측에 세 덩어리가 세로로 쌓인다 — 2열 기본값을 덮는다 */
#tour-page .loc-body {
  flex-direction: column;
  gap: var(--one-space-s);
}

/* 제목과 내용 사이 간격은 .map-col 의 gap 이 잡는다 */
/* 아이콘 있는 블록 — .map-col 의 세로 쌓기를 가로(아이콘 | 글)로 바꾼다 */
#tour-page .loc-ico {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--one-gap-lg);
}

#tour-page .loc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--one-loc-icon);
  height: var(--one-loc-icon);
  border-radius: 8px;
  background-color: var(--gray-color03);
  color: var(--sub-color01);
}

#tour-page .loc-icon svg {
  width: 55%;
  height: 55%;
}

/* 글 묶음 — 제목과 내용 사이 간격은 .map-col 이 주던 값 그대로 */
#tour-page .loc-txt {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
}

#tour-page .loc-txt-u {
  letter-spacing: 0.45em;
}

#tour-page .loc-blk p {
  color: var(--sub-color04);
}

/* 야간진료 줄 — 시안은 끝나는 시간과 달만 강조색. ui.css 는 줄 전체를 칠하므로 되돌린다 */
#tour-page .map-row.map-pt {
  color: inherit;
}

#tour-page .map-late,
#tour-page .map-moon {
  color: var(--one-map-pt);
}

#tour-page .map-moon {
  display: inline-flex;
  width: var(--one-map-moon);
  height: var(--one-map-moon);
  margin-left: var(--one-gap-xs);
  align-self: center;   /* .map-day 가 flex 라 vertical-align 은 안 먹는다 */
}

#tour-page .map-moon svg {
  width: 100%;
  height: 100%;
}

/* 비고 — PC 는 한 줄로 이어 쓰고 모바일에서 줄을 나눈다 */
#tour-page .loc-blk .map-note {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--one-gap-r);
}

#tour-page .loc-blk .map-note li {
  color: var(--one-txt-li);
  font-size: var(--one-caption);
}




/* ============================
   반응형 — 노트북 · 태블릿 (max-width: 1600px)
============================ */

@media all and (max-width: 1600px) {
  /* 03 장비 설명 — 카드가 좁아 고정 <br> 이 자연 줄바꿈과 겹쳐 갈린다. br 을 끄고 폭에 맡긴다 */
  #tour-page .eqp-desc br {
    display: none;
  }

  /* 01 의료진 — 카드를 오른쪽으로 미는 여백과 학회 열의 한 줄 고정이 겹쳐 콘텐츠 밖(퀵메뉴 뒤)으로 잘린다.
     밀기를 끄고 카드를 가운데로, 두 열은 반반, 긴 줄은 자연 줄바꿈. 워터마크는 작게 왼쪽 끝으로 */
  #tour-page {
    --one-dr-shift: 0px;
  }

  #tour-page .dr-cols {
    grid-template-columns: 1fr 1fr;
  }

  #tour-page .dr-nowrap {
    white-space: normal;
  }

  #tour-page .dr-card {
    margin-inline: auto;
  }

  #tour-page .dr-bg {
    left: 2%;
    width: 220px;
  }
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

@media all and (max-width: 1024px) {
  #tour-page {
    --one-dr-shift: 0px;
  }

  /* 워터마크가 본문과 겹친다 — 좁은 화면에서는 숨기고 글을 가운데로 되돌린다 */
  #tour-page .loc-bg,
  #tour-page .dr-bg {
    display: none;
  }

  #tour-page .dr-card {
    margin-inline: auto;
  }

  #tour-page .eqp-vis {
    height: 190px;
  }
}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

@media all and (max-width: 639px) {
  #tour-page {
    --one-intr-w: 82vw;
    --one-intr-gap: 24px;
  }

  /* 비고 두 줄 */
  #tour-page .loc-blk .map-note {
    flex-direction: column;
  }

  /* 좁은 폭에서는 br 로 끊은 뒤에도 넘치면 자연 줄바꿈 허용 */
  #tour-page .dr-nowrap {
    white-space: normal;
  }

  #tour-page .dr-cols {
    grid-template-columns: 1fr;
  }

  #tour-page .eqp-vis {
    height: 160px;
  }
}