@charset "utf-8";
/* ==========================================================================
   스마일라인소개 > 둘러보기 (/about/tour/index)
   - 히어로 밴드(.sl-subhero)·토큰·헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 모두 .sl-tour 접두사로 스코프 한정 (publish.md 3.4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 섹션 · 머리말
   -------------------------------------------------------------------------- */
.sl-tour {
	background: var(--sl-cream);
	/* 사진 뷰어가 100vw 로 넓어지므로 세로 스크롤바 폭만큼 가로 스크롤이 생기지 않게 막는다 */
	overflow-x: hidden;
	/* 좌우 여백은 뷰어(.sl-tour__viewer) 의 max-width 가 잡는다 — 사진이 헤더 라인에 서고
	   화살표만 그 바깥으로 나가야 하므로 섹션에서는 최소 여백만 둔다 */
	padding: 110px 20px 140px;
	box-sizing: border-box;
}
.sl-tour__head { text-align: center; }
.sl-tour__title {
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 700;
	color: var(--sl-dark);
	line-height: 1.4;
	letter-spacing: -.56px;
	margin: 21px 0 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2. 스텝 탭 (번호 원 + 공간명, 선택 항목은 체크로 전환)
   -------------------------------------------------------------------------- */
.sl-tour__steps {
	max-width: var(--sl-container);   /* 아래 사진(.sl-tour__stage) 과 같은 폭 */
	margin: 21px auto 0;
	padding-top: 35px;
}
.sl-tour__tabs {
	display: flex;
	align-items: flex-start;
}
.sl-tour__tab {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	padding: 0 4px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
/* 원 중앙 높이를 지나는 연결선 : 양 끝 탭만 16px 안쪽에서 끊는다 */
.sl-tour__tab::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 17px;
	height: 1px;
	background: rgba(43, 43, 40, .18);
}
.sl-tour__tab:first-child::before { left: 16px; }
.sl-tour__tab:last-child::before { right: 16px; }

/* 2-1. 번호 원 --------------------------------------------------------- */
.sl-tour__dot {
	position: relative;   /* 연결선 위로 올라오게 */
	z-index: 1;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(43, 43, 40, .25);
	border-radius: 50%;
	background: var(--sl-cream);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	color: rgba(43, 43, 40, .5);
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.sl-tour__num,
.sl-tour__check { font-style: normal; }
.sl-tour__check { display: none; }

.sl-tour__tab.is-on .sl-tour__dot {
	background: var(--sl-dark);
	border-color: var(--sl-dark);
	color: #fff;
	font-weight: 700;
}
.sl-tour__tab.is-on .sl-tour__num { display: none; }
.sl-tour__tab.is-on .sl-tour__check { display: block; }

.sl-tour__tab:hover .sl-tour__dot { border-color: rgba(43, 43, 40, .5); }
.sl-tour__tab.is-on:hover .sl-tour__dot { border-color: var(--sl-dark); }
.sl-tour__tab:focus-visible .sl-tour__dot { outline: 2px solid var(--sl-orange); outline-offset: 3px; }

/* 2-2. 공간명 ---------------------------------------------------------- */
.sl-tour__label {
	font-size: 13px;
	line-height: 1.4;
	color: rgba(43, 43, 40, .4);
	letter-spacing: -.02em;
	text-align: center;
	word-break: keep-all;   /* 긴 공간명이 낱글자로 쪼개지지 않게 */
	transition: color .25s ease;
}
.sl-tour__tab:hover .sl-tour__label { color: rgba(43, 43, 40, .7); }
.sl-tour__tab.is-on .sl-tour__label { color: var(--sl-dark); }

/* --------------------------------------------------------------------------
   3. 사진 스테이지 (가운데 사진 + 화면 좌우 끝에 걸친 이전/다음 사진)
      - 위치·크기는 % 로만 잡아 화면 폭이 달라져도 같은 비율로 따라간다
      - 옆 사진은 화면 밖으로 흘러 나가 스테이지의 overflow 가 잘라 낸다
   -------------------------------------------------------------------------- */
/* 옆 사진이 화면 가장자리까지 닿아야 하므로 뷰어만 화면 전체 폭으로 넓힌다
   (섹션 좌우 여백을 넘어가는 유일한 블록) */
/* 가운데로 되돌릴 때 transform 은 쓰지 않는다 — 이 블록에는 리빌 애니메이션(.sl-reveal)이
   걸려 있어 transform 을 덮어쓰므로, 좌우 여백을 음수 마진으로 상쇄한다 */
.sl-tour__viewer {
	position: relative;
	width: 100vw;
	max-width: none;
	margin: 128px 0 0 calc(50% - 50vw);
}

.sl-tour__stage {
	position: relative;
	width: 100%;
	/* 가운데 사진 높이(23.6%) + 옆 사진이 내려앉은 만큼(3.9%) */
	aspect-ratio: 100 / 27.5;
	overflow: hidden;
}
/* 자리(left/top)만 상태 클래스로 지정하고, 이동은 transition 이 맡는다.
   기본값은 오른쪽 바깥 대기 자리 — 넘길 때 사진이 오른쪽에서 들어와 왼쪽으로 빠진다.
   z-index 는 화살표(3) 보다 낮게 두어, 사진이 흘러갈 때 화살표 뒤로 지나간다. */
.sl-tour__shot {
	position: absolute;
	top: 14%;
	left: 110%;
	width: 42%;
	aspect-ratio: 16 / 9;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	/* 사진이 아직 안 뜬 동안(지연 로딩·미준비)에도 빈 면으로 보이게 바탕을 깔아 둔다 */
	background: #f1ece4;
	opacity: 0;
	visibility: hidden;
	transition: left .6s cubic-bezier(.22,.61,.36,1),
	            top .6s cubic-bezier(.22,.61,.36,1),
	            opacity .5s ease,
	            visibility .6s;
}
.sl-tour__shot.is-on {
	top: 0;
	left: 29%;
	opacity: 1;
	visibility: visible;
	z-index: 2;
}
/* 이전·다음 사진은 화면 좌우 끝에 걸쳐 두고 가운데보다 살짝 내려 앉힌다 */
.sl-tour__shot.is-prev,
.sl-tour__shot.is-next {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
.sl-tour__shot.is-prev { left: -21%; }
.sl-tour__shot.is-next { left: 79%; }
/* 차례를 기다리는 사진은 진행 방향 바깥에 세워 둔다 */
.sl-tour__shot.is-far-prev { left: -70%; }
.sl-tour__shot.is-far-next { left: 110%; }
/* 시선이 가운데로 모이도록 옆 사진은 옅게 덮는다 */
.sl-tour__shot.is-prev::after,
.sl-tour__shot.is-next::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(43, 43, 40, .28);
}
.sl-tour__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	color: transparent;   /* 파일이 없을 때 alt 문구가 잠깐 비치지 않게 */
}
/* 캡션은 평소 화면에 보이지 않고 스크린리더에만 읽힌다 (공간명은 탭에 이미 있음) */
.sl-tour__shot figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 사진 파일이 아직 준비되지 않은 항목 : 공간명만 담은 빈 면으로 대체한다
   (플레이스홀더에 테두리·점선은 두지 않는다) */
.sl-tour__shot.is-empty { background: #f1ece4; }
.sl-tour__shot.is-empty img { display: none; }
.sl-tour__shot.is-empty figcaption {
	position: static;
	width: auto;
	height: 100%;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	box-sizing: border-box;
	font-size: var(--sl-text);
	color: rgba(43, 43, 40, .45);
	text-align: center;
}

/* 모션 최소화 설정을 켠 사용자는 자리를 옮기지 않고 페이드로만 바뀐다 */
@media (prefers-reduced-motion: reduce) {
	.sl-tour__shot { transition: opacity .2s ease; }
}

/* 3-1. 좌우 이동 화살표 (가운데 사진 바깥에 떠 있는 원형 버튼) ---------- */
.sl-tour__arrow {
	position: absolute;
	z-index: 3;
	top: 43%;             /* 가운데 사진의 세로 한가운데 */
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(43, 43, 40, .07);
	border-radius: 50%;
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 2px 12px rgba(43, 43, 40, .07);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	transition: background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.sl-tour__arrow--prev { left: 26%; }
.sl-tour__arrow--next { left: 74%; }
.sl-tour__arrow:hover { background: #fff; }

/* 겹꺾쇠(«) — border 를 회전시켜 만들면 회전된 사각형의 시각 중심이 박스 중심과 어긋나
   원 안에서 한쪽으로 쏠린다. 그래서 꺾쇠 두 개를 그린 SVG 를 마스크로 씌운다.
   viewBox(20×12) 를 선 끝(둥근 캡 반지름 1 포함)에 딱 맞춰 두었으므로,
   요소 한가운데 = 두 꺾쇠의 한가운데가 된다. 색은 background-color 가 그대로 맡는다. */
.sl-tour__arrow i {
	display: block;
	width: 20px;
	height: 12px;
	background-color: rgba(43, 43, 40, .45);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M8 2 L4 6 L8 10 M16 2 L12 6 L16 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M8 2 L4 6 L8 10 M16 2 L12 6 L16 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color .2s ease;   /* 호버 시 색만 바뀌고 위치는 그대로 */
}
/* 마스크는 왼쪽(«) 을 그린 것이라 다음 버튼만 좌우로 뒤집는다 */
.sl-tour__arrow--next i { transform: scaleX(-1); }

.sl-tour__arrow:hover i { background-color: var(--sl-orange); }
.sl-tour__arrow:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
   -------------------------------------------------------------------------- */
@media (max-width: 1680px) {
	.sl-tour { padding: 110px 40px 140px; }
}

@media (max-width: 1400px) {
	.sl-tour { padding: 90px 40px 110px; }
	.sl-tour__viewer { margin-top: 96px; }
}

@media (max-width: 1024px) {
	.sl-tour { padding: 64px 20px 80px; }
	.sl-tour__title { font-size: 26px; }

	/* 탭 10개는 가로로 밀어 보게 한다 */
	.sl-tour__steps {
		margin-top: 18px;
		padding-top: 30px;
	}
	.sl-tour__tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.sl-tour__tabs::-webkit-scrollbar { display: none; }
	.sl-tour__tab {
		flex: 0 0 118px;
		gap: 9px;
	}

	/* 화면이 좁아지는 만큼 가운데 사진을 키우고, 옆 사진은 가장자리에 살짝만 걸친다 */
	.sl-tour__viewer { margin-top: 48px; }
	.sl-tour__stage { aspect-ratio: 100 / 40; }
	.sl-tour__shot {
		top: 10%;
		width: 64%;
		border-radius: 12px;
	}
	.sl-tour__shot.is-on { left: 18%; }
	.sl-tour__shot.is-prev { left: -54%; }
	.sl-tour__shot.is-next { left: 90%; }
	.sl-tour__shot.is-far-prev { left: -100%; }

	.sl-tour__arrow { top: 45%; width: 46px; height: 46px; }
	.sl-tour__arrow--prev { left: 15%; }
	.sl-tour__arrow--next { left: 85%; }
}

@media (max-width: 640px) {
	.sl-tour { padding: 56px 12px 72px; }
	.sl-tour__title { font-size: 22px; }
	.sl-tour__tab { flex: 0 0 104px; }
	.sl-tour__label { font-size: 12px; }

	/* 옆 사진까지 늘어놓기에는 폭이 모자라므로 가운데 한 장만 크게 두고,
	   화살표는 사진 좌우 안쪽에 겹쳐 놓는다 (원형 버튼이라 사진을 가리지 않는다) */
	.sl-tour__stage { aspect-ratio: 100 / 52; }
	.sl-tour__shot {
		top: 0;
		width: 92%;
		aspect-ratio: 16 / 9;
	}
	.sl-tour__shot.is-on { left: 4%; }
	/* 옆 사진은 감추고, 넘길 때 좌우로 지나가기만 한다 */
	.sl-tour__shot.is-prev,
	.sl-tour__shot.is-next { opacity: 0; visibility: hidden; }
	.sl-tour__shot.is-prev { left: -100%; }
	.sl-tour__shot.is-next { left: 110%; }

	.sl-tour__arrow { top: 50%; width: 38px; height: 38px; }
	.sl-tour__arrow--prev { left: 12%; }
	.sl-tour__arrow--next { left: 88%; }
	.sl-tour__arrow i { width: 16px; height: 10px; }
}