/* 시설 둘러보기 — 한국어 메인(index.html)과 6개 언어 홈이 함께 쓰는 단일 출처(SSoT).
   여기 한 곳만 고치면 7개 화면에 모두 반영된다. 값은 site.css의 :root 토큰을 그대로 쓴다.
   2026-09-01 신설. */
/* 시설 둘러보기 (2026-09-01 추가) — 탭으로 공간을 고르고 큰 사진 + 썸네일로 넘겨 본다.
   사진은 원본을 자르지 않고 전부 보여준다(object-fit:contain). 섹션 안에서만 가로 스크롤이
   생기도록 루트에 overflow-x:clip 을 걸어 페이지 전체 가로 스크롤을 막는다. */
.tour{overflow-x:clip;}
/* 메뉴에서 눌러 내려올 때 고정 헤더가 제목을 덮지 않도록 여유를 둔다(#hours 와 같은 방식) */
#tour{scroll-margin-top:104px;}
.tourHead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;}
.tourHead strong{display:block;font-size:26px;font-weight:800;color:var(--g900);letter-spacing:-.6px;}
/* 2026-09-10 국문 페이지는 위쪽 공간 이름표를 없앴다 — 혼자 남은 화살표가 왼쪽으로 붙지 않도록
   margin-left:auto 로 오른쪽에 고정한다(이름표가 남아 있는 옛 다국어 페이지도 결과는 그대로다). */
.tourNav{display:flex;gap:8px;flex:none;margin-left:auto;}
.tourArrow{width:52px;height:52px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;transition:.2s;}
.tourArrow svg{width:20px;height:20px;fill:none;stroke:var(--g700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;}
.tourArrow:hover{background:var(--g700);border-color:var(--g700);}
.tourArrow:hover svg{stroke:#fff;}
.tourBody{display:flex;align-items:stretch;gap:0;}
.tourTabs{width:262px;flex:none;display:flex;flex-direction:column;border-top:1px solid var(--line);
  border-right:1px solid var(--line);min-width:0;}
/* 홈의 목록 어법(.bitem)과 같게 — 면을 칠하지 않고 얇은 선만 쓴다.
   고른 항목은 왼쪽 딥그린 선과 짙은 글자로 구분한다(2026-09-01 대표님 지적 반영). */
.tourTabs li{flex:1;display:flex;border-bottom:1px solid var(--line);}
.tourTabs button{position:relative;display:flex;align-items:center;width:100%;text-align:left;
  padding:0 22px;min-height:60px;height:100%;background:none;border:0;cursor:pointer;
  font-size:17px;font-weight:600;color:var(--muted);letter-spacing:-.02em;line-height:1.45;
  word-break:keep-all;transition:color .16s ease;}
.tourTabs button:hover{color:var(--g800);}
.tourTabs button[aria-selected="true"]{background:none;color:var(--g900);font-weight:700;}
.tourTabs button[aria-selected="true"]:before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--g800);}
.tourStage{flex:1;min-width:0;}
/* 사진이 아직 안 왔을 때도 높이가 확정돼 있어야 아래 섹션이 밀리지 않는다(레이아웃 점프 방지) */
.tourFrame{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--cream);border-radius:var(--radius);transition:aspect-ratio .3s ease;}
.tourFrame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;transition:opacity .4s ease;}
.tourFrame.is-fade img{opacity:0;}
.tourCount{position:absolute;right:0;bottom:0;background:rgba(13,59,44,.55);color:#fff;font-size:14px;letter-spacing:.06em;padding:8px 16px;border-radius:var(--radius) 0 var(--radius) 0;z-index:2;}
.tourCount em{font-style:normal;font-weight:700;}
/* 방 이름표 (2026-09-08). 처음엔 사진 위에 얹었는데 ①사진을 가리고 ②배경 사진에 따라
   읽기 힘들어서, 대표님 지시로 사진 밖(사진과 썸네일 줄 사이)로 내렸다.
   사진을 가리지 않으니 글자를 키울 수 있다. 이름표가 없는 탭에서는 탭 이름을 적어 두므로
   이 줄은 항상 있다 — 줄이 생겼다 사라지면 아래 썸네일이 위아래로 튄다.
   2026-09-08 대표님 지시로 가운데 정렬 + 테두리를 둘렀다. 글자 길이만큼만 테두리가 생기도록
   width:fit-content 로 두고 좌우 margin auto 로 가운데에 세운다(테두리가 가로 전체로 늘어나면
   이름이 아니라 안내 띠처럼 보인다). 색·모서리는 전부 :root 토큰을 참조한다. */
.tourCaption{width:fit-content;max-width:100%;margin:14px auto 0;padding:8px 22px;
  font-size:24px;font-weight:700;color:var(--g900);letter-spacing:-.02em;line-height:1.35;
  word-break:keep-all;text-align:center;border:1px solid var(--g700);border-radius:999px;
  /* 이름표가 없는 탭에서도 이 줄이 차지하는 높이는 그대로여야 한다 — 줄이 사라지면 아래
     썸네일이 그만큼 올라와 탭을 넘길 때마다 들썩인다. ★자리는 「글자」가 아니라 「값」으로
     잡는다(min-height): 탭 이름을 넣어 두고 감추는 방식은 이름이 길거나 다른 언어로 바뀌면
     두 줄이 되며 그 탭만 높이가 달라진다(2026-09-09 CCG 지적). */
  box-sizing:border-box;min-height:50px;}
/* 2026-09-09 대표님 지시: 이름표는 「치료실 · 검사실」 탭에만 띄운다. 나머지 탭은 글자를 비우고
   자리만 남긴다. 빈 알약 테두리가 보이지 않도록 visibility 로 감춘다.
   ★높이를 `height` 로 못 박는 이유: `min-height` 는 바닥만 잡고 천장은 안 잡는다 — 나중에 누가
   이 줄에 글자를 도로 넣으면 모바일에서 두 줄이 되며 슬롯이 44 → 69px 로 부푼다(실측).
   빈 슬롯은 값으로 고정하고 넘치는 것은 잘라, 글자가 들어와도 아래 썸네일이 밀리지 않게 한다. */
.tourCaption.is-empty{visibility:hidden;height:50px;overflow:hidden;}
.tourThumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:2px;}
.tourThumbs::-webkit-scrollbar{height:4px;}
.tourThumbs::-webkit-scrollbar-thumb{background:#cfded7;border-radius:4px;}
.tourThumbs button{flex:0 0 auto;width:112px;height:75px;padding:0;border:0;cursor:pointer;background:var(--cream);
  opacity:.5;transition:opacity .2s;position:relative;line-height:0;font-size:0;border-radius:8px;overflow:hidden;}
.tourThumbs button img{width:100%;height:100%;display:block;object-fit:cover;}
.tourThumbs button:hover{opacity:.85;}
.tourThumbs button.on{opacity:1;}
.tourThumbs button.on:after{content:"";position:absolute;inset:0;border:2px solid var(--g700);border-radius:8px;}
.tour :focus-visible{outline:3px solid var(--g500);outline-offset:2px;}
/* 화면에는 안 보이고 화면낭독기에만 읽히는 안내(사진이 바뀐 것을 알려 준다) */
.tour .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@media(max-width:980px){
  .tourHead{margin-bottom:16px;}
  .tourHead strong{font-size:21px;}
  .tourArrow{width:44px;height:44px;}
  .tourBody{display:block;}
  /* 탭 줄은 자기 안에서만 옆으로 넘긴다. 섹션 밖으로 넘치지 않게 폭을 100%로 묶는다. */
  .tourTabs{width:100%;max-width:100%;flex-direction:row;overflow-x:auto;border-top:0;border-right:0;
    border-bottom:1px solid var(--line);margin-bottom:16px;-webkit-overflow-scrolling:touch;}
  .tourTabs::-webkit-scrollbar{display:none;}
  .tourTabs li{border-bottom:0;flex:0 0 auto;}
  .tourTabs button{min-height:0;height:46px;padding:0 15px;font-size:15.5px;font-weight:600;
    white-space:nowrap;background:none;border-bottom:2px solid transparent;color:var(--muted);}
  .tourTabs button:before{display:none;}
  .tourTabs button:hover{background:none;}
  .tourTabs button[aria-selected="true"]{background:none;color:var(--g900);border-bottom-color:var(--g800);}
  .tourCount{font-size:12px;padding:6px 12px;}
  .tourCaption{font-size:19px;margin-top:10px;min-height:44px;}
  .tourCaption.is-empty{height:44px;}
  .tourThumbs button{width:88px;height:59px;}
}
@media(max-width:560px){
  .tourThumbs button{width:76px;height:51px;}
}

/* ===== 글자 키움은 PC 에서만 (2026-09-18) — 경위는 index.html 같은 이름의 블록 참조.
   ★이 파일은 메인 + 다국어 6개 + 시설 페이지 = 8곳 공용이다. 모바일 탭·배지는 원래 크기로 둔다. */
@media (min-width:981px){
  .tourTabs button{font-size:19px;}
  .tourCount{font-size:16px;}
}
/* 2026-09-24 대표님 지시: 화살표를 사진 안 좌우 가운데에 둔다. 사진 칸(.tourFrame) 안에 버튼을 둔 화면에만
   걸린다 — 국문 메인·병원 둘러보기. 위쪽 줄(.tourHead)에 버튼을 둔 다국어 홈은 그대로다. */
.tourFrame .tourArrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;
  background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.16);}
/* 마우스를 올리면(휴대폰은 누른 뒤) 기본 규칙이 화살표를 흰색으로 바꾸므로 바탕도 함께 짙게 — 안 하면 흰 바탕에 흰 화살표가 된다 */
.tourFrame .tourArrow:hover{background:var(--g700);border-color:var(--g700);}
.tourFrame .tourPrev{left:14px;}
.tourFrame .tourNext{right:14px;}
@media(max-width:980px){
  .tourFrame .tourArrow{width:44px;height:44px;}
  .tourFrame .tourPrev{left:8px;}
  .tourFrame .tourNext{right:8px;}
}
/* 2026-09-24 대표님 지시: 왼쪽 공간 목록이 사진 아래 썸네일 줄까지 늘어나(1280폭 약 760px) 한 화면에 안 잡혔다.
   목록 길이를 오른쪽 큰 사진의 높이에 맞춘다. 기준은 가장 흔한 4:3 사진 높이다 — 탭마다 바뀌는 사진 틀을
   따라가게 하면 탭을 누를 때마다 목록 칸까지 들썩인다. 폭은 컨테이너 단위(cqw)로 읽는다:
   오른쪽 칸 폭 = 전체 폭 - 목록 폭 262px, 그 4:3 높이 = × .75. 칸이 44px 아래로 줄지는 않는다(터치 크기). */
@media (min-width:981px){
  .tourBody{container-type:inline-size;align-items:flex-start;}
  .tourTabs{box-sizing:border-box;height:calc((100cqw - 262px) * .75);}
  .tourTabs button{min-height:44px;}
}