@charset "utf-8";
/* ==========================================================================
   스마일라인소개 > 스마일라인의 특별함 (/about/special/index)
   - 공통 토큰/헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 모두 .sl-sp- 접두사로 스코프 한정 (publish.md 3.4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 리드 카피 (히어로 밴드 아래, 명조 2줄)
      ※ 히어로 밴드와 그 안의 영문 라벨/제목은 site_layout.css 의 .sl-subhero
   -------------------------------------------------------------------------- */
.sl-sp-lead {
	background: var(--sl-cream);
	padding: 100px 20px;
	text-align: center;
	box-sizing: border-box;
}
.sl-sp-lead__copy {
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 400;
	color: var(--sl-dark);
	line-height: 1.65;
	letter-spacing: -.8px;
	margin: 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. 탭
   -------------------------------------------------------------------------- */
.sl-sp-tabs {
	background: var(--sl-cream);
	padding-top: 110px;
}
.sl-sp-tabs__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: var(--sl-container);   /* 헤더 콘텐츠 폭 */
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.sl-sp-tabs__btn {
	display: block;
	padding: 22px 72px;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	background: none;
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	color: rgba(43, 43, 40, .45);
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s ease;
}
.sl-sp-tabs__btn:hover { color: var(--sl-dark); }
/* 좌우 화살표는 모바일(640 이하) 전용 — PC·태블릿에서는 없는 것처럼 둔다 */
.sl-sp-tabs__arrow { display: none; }
.sl-sp-tabs__btn.on {
	font-weight: 700;
	color: var(--sl-dark);
	border-bottom-color: var(--sl-orange);
}

/* --------------------------------------------------------------------------
   4. 패널 (좌 이미지 / 우 텍스트)
   -------------------------------------------------------------------------- */
.sl-sp-panels {
	background: var(--sl-cream);
	padding: 100px 0 260px;
}
/* box-sizing:border-box 라 좌우 padding 이 max-width 안에 포함된다
   → 20px 씩 더 줘야 안쪽 콘텐츠가 정확히 헤더 폭(--sl-container) 이 된다 */
.sl-sp-panels__inner {
	max-width: calc(var(--sl-container) + 40px);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.sl-sp-panel { display: none; }
/* 사진 높이는 612px 로 못박는다. stretch 로 두면 글이 긴 패널(01·03) 에서 사진까지 함께
   늘어나 패널마다 사진 크기가 달라진다 → flex-start + 고정 높이로 네 장을 똑같이 맞춘다.
   (글이 612 를 넘는 패널은 글만 사진 아래로 내려간다) */
.sl-sp-panel.on {
	display: flex;
	align-items: flex-start;
	gap: 90px;
	flex-wrap: wrap;
	min-height: 612px;
}
.sl-sp-panel__visual {
	flex: 1 1 560px;
	max-width: 880px;
	min-width: 0;
	height: 612px;
	border-radius: 4px;
	overflow: hidden;
}
.sl-sp-panel__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sl-sp-panel__body {
	flex: 1 1 440px;
	min-width: 320px;
	/* 글이 가장 긴 01번도 사진 높이(612px) 안에 들어가야 하므로 시작 여백을 줄였다.
	   % 로 두면 화면 폭에 따라 값이 흔들려 넘치므로 px 로 고정한다 */
	padding-top: 40px;
	box-sizing: border-box;
}
.sl-sp-panel__ordinal {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 72px;
	font-weight: 700;
	color: rgba(43, 43, 40, .12);
	line-height: 1;
	letter-spacing: -.02em;
	margin: 0 0 56px;
}
.sl-sp-panel__ordinal i {
	display: inline-block;
	margin-right: -.12em;
	font-style: normal;
	color: rgba(232, 98, 44, .45);
}
.sl-sp-panel__title {
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 800;
	color: var(--sl-dark);
	line-height: 1.5;
	margin: 0 0 24px;
	text-wrap: pretty;
}
.sl-sp-panel__desc {
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .72);
	line-height: 1.85;
	letter-spacing: -.01em;
	margin: 0 0 22px;
	text-wrap: pretty;
}
.sl-sp-panel__desc:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
	.sl-sp-tabs__btn { padding: 20px 44px; }
	.sl-sp-panel.on { gap: 56px; }
	.sl-sp-panels { padding: 80px 0 160px; }
}

@media (max-width: 1024px) {
	.sl-sp-lead { padding: 56px 20px; }
	.sl-sp-lead__copy { font-size: 26px; line-height: 1.6; }

	.sl-sp-tabs { padding-top: 56px; }
	.sl-sp-tabs__list { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
	.sl-sp-tabs__btn { padding: 16px 24px; font-size: 16px; }

	.sl-sp-panels { padding: 48px 0 90px; }
	/* 세로로 쌓이므로 높이를 맞출 필요가 없다 (사진은 아래 aspect-ratio 로 비율 유지) */
	.sl-sp-panel.on { gap: 32px; min-height: 0; }
	/* 세로로 쌓이는 구간은 높이를 못박지 않고 비율로 잡는다 */
	.sl-sp-panel__visual { flex: 1 1 100%; max-width: none; height: auto; aspect-ratio: 6 / 5; }
	.sl-sp-panel__body { flex: 1 1 100%; min-width: 0; padding-top: 0; }
	.sl-sp-panel__ordinal { font-size: 54px; margin-bottom: 28px; }
	.sl-sp-panel__title { font-size: 26px; }
}

@media (max-width: 640px) {
	.sl-sp-lead__copy { font-size: 22px; }
	.sl-sp-panel__title { font-size: 22px; }   /* 섹션 제목 공통 (.sl-title 과 동일) */

	/* 탭 : 가로 스크롤 대신 활성 항목 하나만 두고 좌우 화살표로 넘긴다.
	   (padding-top 은 1024 구간 값 56px 을 그대로 쓰므로 좌우만 지정한다) */
	.sl-sp-tabs {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 30px;   /* 제목과 화살표 사이 간격 */
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	.sl-sp-tabs__list {
		/* 이름 폭만큼만 차지하게 둬야 화살표가 제목 바로 옆에 붙는다.
		   기본 규칙의 margin:0 auto 를 반드시 지운다 —
		   flex 아이템의 auto 여백은 남는 공간을 전부 먹어 화살표를 화면 양 끝으로 밀어낸다 */
		flex: 0 0 auto;
		margin: 0;
		min-width: 0;
		overflow: visible;   /* 한 개만 보이므로 가로 스크롤이 필요 없다 */
		/* 네 항목을 같은 칸에 겹쳐 쌓는다. 칸 너비가 '가장 긴 이름' 기준으로 잡히므로
		   어떤 탭을 골라도 화살표 위치가 그대로다 (탭마다 흔들리지 않는다) */
		display: grid;
		grid-template-columns: max-content;
		justify-items: center;
	}
	/* display:none 이면 폭 계산에서 빠지므로, 자리는 차지하되 보이지만 않게 한다
	   (visibility:hidden 은 클릭도 되지 않아 숨은 탭이 눌릴 염려가 없다) */
	.sl-sp-tabs__list > li {
		grid-column: 1;
		grid-row: 1;
		visibility: hidden;
	}
	.sl-sp-tabs__list > li.on { visibility: visible; }
	/* 좌우 padding 을 두면 그만큼 간격이 더 벌어지므로 0 — 간격은 위 gap 30px 으로만 준다 */
	.sl-sp-tabs__btn { padding: 14px 0; }
	/* 활성 탭 하나만 보이므로 밑줄로 구분할 필요가 없다.
	   자리는 그대로 두고 색만 지운다 (0 으로 없애면 화살표 세로 정렬이 3px 어긋난다) */
	.sl-sp-tabs__btn.on { border-bottom-color: transparent; }

	.sl-sp-tabs__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 28px;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		/* 탭 버튼은 글자 아래에 3px 밑줄이 붙어 있어 상자 한가운데가 글자 한가운데보다
		   1.5px 아래다. 화살표에 아래 여백을 줘 글자 높이에 눈으로 맞춘다 */
		margin-bottom: 3px;
	}
	/* 위/왼쪽 테두리만 있는 정사각형을 45° 돌린 꺾쇠 (main_page.css 의 슬라이더 화살표와 같은 방식).
	   도형 중심과 획의 시각적 중심이 어긋나므로 2px 되밀어 맞춘다 */
	.sl-sp-tabs__arrow::before {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		border-top: 1.5px solid rgba(43, 43, 40, .55);
		border-left: 1.5px solid rgba(43, 43, 40, .55);
	}
	.sl-sp-tabs__arrow--prev::before { transform: translate(2px, 0) rotate(-45deg); }
	.sl-sp-tabs__arrow--next::before { transform: translate(-2px, 0) rotate(135deg); }
}