@charset "utf-8";

/* ============================================================
   msub13 — 국내 여행 지역 카드 그리드 + 아코디언 패널
   ============================================================ */

/* ============================================================
   헤더 — 흰 배경 고정 (layout.css의 .on 상태와 동일하게 적용)
   ============================================================ */
#header {
	background-color: #fff;
	border-bottom-color: #ccc;
}

#header #logo .mag-info *,
#header .main-navi > li > a {
	color: #000;
}

#header .navi-more-list > * {
	color: rgba(0, 0, 0, 0.5);
}

#header .navi-more-list .theme-toggle {
	border-color: rgba(0, 0, 0, 0.2);
}

/* ============================================================
   진행 바
   ============================================================ */
.tr-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: var(--color-primary);
	z-index: 9999;
	transition: width 0.1s linear;
}

/* ============================================================
   히어로 — 이미지 스트립 아코디언
   ============================================================ */
.tr-hero {
	position: relative;
	margin-top: 90px;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
}

.tr-hero-header {
	position: absolute;
	top: clamp(20px, 3vh, 36px);
	left: clamp(24px, 4vw, 60px);
	z-index: 20;
	color: #fff;
	pointer-events: none;
	opacity: 0;
}

.tr-hero-eye {
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 10px;
}

.tr-hero-tit {
	font-size: clamp(30px, calc(20px + 2.2vw), 52px);
	font-weight: 700;
	color: #fff;
}

.tr-hero-hint {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

/* ── 스트립 컨테이너 ── */
.tr-hero-strips {
	display: flex;
	width: 100%;
	height: 100%;
}

/* ── 개별 스트립 ── */
.tr-hero-strip {
	flex: 1;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: flex 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}

.tr-hero-strip:hover {
	flex: 2.2;
}

.tr-hero-strips:has(.tr-hero-strip:hover) .tr-hero-strip:not(:hover) {
	flex: 0.6;
}

.tr-strip-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.55s ease;
}

.tr-hero-strip:hover .tr-strip-bg {
	transform: scale(1.04);
}

.tr-strip-dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.04) 45%, rgba(0, 0, 0, 0.62) 100%);
	transition: background 0.35s;
}

.tr-hero-strip:hover .tr-strip-dim {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.78) 100%);
}

.tr-strip-num {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: rgba(255, 255, 255, 0.5);
	z-index: 2;
	transition: opacity 0.25s;
}

.tr-hero-strip:hover .tr-strip-num {
	opacity: 0;
}

.tr-strip-vname {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	writing-mode: vertical-rl;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: rgba(255, 255, 255, 0.82);
	white-space: nowrap;
	z-index: 2;
	transition: opacity 0.22s;
}

.tr-hero-strip:hover .tr-strip-vname {
	opacity: 0;
}

.tr-strip-hover {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(20px, 2.5vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.32s ease,
		transform 0.32s ease;
}

.tr-hero-strip:hover .tr-strip-hover {
	opacity: 1;
	transform: translateY(0);
}

.tr-strip-hname {
	display: block;
	font-size: clamp(18px, calc(14px + 0.5vw), 22px);
	font-weight: 700;
	color: #fff;
}

.tr-strip-kw {
	display: block;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: rgba(255, 255, 255, 0.72);
}

.tr-strip-cta {
	display: block;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	margin-top: 4px;
}

@media (max-width: 768px) {
	.tr-hero-strips {
		flex-direction: column;
	}

	.tr-hero-strip,
	.tr-hero-strip:hover,
	.tr-hero-strips:has(.tr-hero-strip:hover) .tr-hero-strip:not(:hover) {
		flex: 1;
	}

	.tr-strip-vname {
		writing-mode: horizontal-tb;
		transform: none;
		left: 20px;
		bottom: auto;
		top: 50%;
		translate: 0 -50%;
	}

	.tr-strip-num {
		left: auto;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
	}

	.tr-strip-hover {
		display: none;
	}

	.tr-hero {
		margin-top: 70px;
	}

	.tr-hero-header {
		top: clamp(16px, 2.5vh, 28px);
	}
}

/* ============================================================
   인트로
   ============================================================ */
.tr-intro {
	padding: clamp(56px, 8vw, 112px) 0;
	background: var(--color-bg-main);
}

.tr-intro-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 60px);
}

.tr-intro-inner p {
	font-size: clamp(18px, calc(16px + 0.4vw), 22px);
	color: var(--color-text-sub);
	word-break: keep-all;
}

/* ============================================================
   지역 카드 섹션
   ============================================================ */
.tr-section {
	background: var(--color-bg-main);
	padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 8vw, 120px);
}

.tr-section-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 60px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}

.tr-section-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.tr-section-tit {
	font-size: clamp(20px, calc(16px + 0.5vw), 26px);
	font-weight: 700;
	color: var(--color-text-main);
}

.tr-section-sub {
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: var(--color-text-muted);
}

/* ============================================================
   카드 그리드
   ============================================================ */
.tr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: 248px;
	gap: 12px;
}

/* 카드 공통 */
.tr-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	cursor: pointer;
}

/* 서울 대형 카드 */
.tr-card--lg {
	grid-row: span 2;
}

.tr-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.55s ease;
}

.tr-card:hover .tr-card-bg {
	transform: scale(1.06);
}

.tr-card-dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.08) 60%);
	transition: background 0.3s;
}

.tr-card:hover .tr-card-dim {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.28) 60%);
}

.tr-card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(16px, 2.5vw, 28px);
	color: #fff;
	transition: transform 0.3s ease;
}

.tr-card:hover .tr-card-body {
	transform: translateY(-4px);
}

.tr-card-num {
	display: block;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: rgba(255, 255, 255, 0.55);
	font-family: "Roboto", sans-serif;
	margin-bottom: 4px;
}

.tr-card-name {
	font-size: clamp(18px, calc(16px + 0.5vw), 26px);
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
}

.tr-card-kw {
	display: block;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: rgba(255, 255, 255, 0.65);
}

.tr-card-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px 22px;
	border: 1.5px solid rgba(255, 255, 255, 0.75);
	border-radius: 24px;
	color: #fff;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	opacity: 0;
	transition:
		opacity 0.28s,
		background 0.28s;
	white-space: nowrap;
}

.tr-card:hover .tr-card-btn {
	opacity: 1;
}

.tr-card:hover .tr-card-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* 활성 카드 하단 바 */
.tr-card-active-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.tr-card.is-active .tr-card-active-bar {
	transform: scaleX(1);
}

.tr-card.is-active .tr-card-dim {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(30, 50, 100, 0.22) 60%);
}

/* ============================================================
   아코디언 패널
   ============================================================ */
.tr-panel {
	height: 0;
	overflow: hidden;
	opacity: 0;
}

.tr-panel-inner {
	background: var(--color-bg-card);
	border-radius: 16px;
	border: 1px solid var(--color-border);
	position: relative;
	overflow: hidden;
}

body.dark .tr-panel-inner {
	border-color: var(--color-border-strong);
}

.tr-panel-close {
	position: absolute;
	top: 16px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: var(--color-text-sub);
	transition: color 0.2s;
	z-index: 2;
	padding: 4px 8px;
}

.tr-panel-close:hover {
	color: var(--color-text-main);
}

.tr-panel-content {
	display: grid;
	grid-template-columns: 42% 1fr;
}

.tr-panel-img-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.tr-panel-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.tr-panel-img-wrap:hover .tr-panel-img {
	transform: scale(1.04);
}

.tr-panel-text {
	padding: clamp(28px, 4vw, 52px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tr-panel-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 4px;
}

.tr-panel-tag {
	background: var(--color-primary);
	color: #fff;
	padding: 3px 12px;
	border-radius: 20px;
	text-transform: uppercase;
}

.tr-panel-region {
	color: var(--color-text-muted);
}

.tr-panel-title {
	font-size: clamp(22px, calc(18px + 0.6vw), 32px);
	font-weight: 700;
	color: var(--color-text-main);
}

.tr-panel-keywords {
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: var(--color-primary);
	font-weight: 500;
	margin-bottom: 12px;
}

.tr-panel-desc {
	font-size: clamp(14px, calc(13px + 0.5vw), 18px);
	color: var(--color-text-sub);
	word-break: keep-all;
}

.tr-panel-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	margin-top: 4px;
	transition: gap 0.2s;
	margin-top: 20px;
}

.tr-panel-link:hover {
	gap: 12px;
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 999px) {
	.tr-grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 220px;
	}

	.tr-card--lg {
		grid-row: span 1;
	}

	.tr-panel-content {
		grid-template-columns: 1fr;
	}

	.tr-panel-img-wrap {
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 768px) {
	.tr-grid {
		grid-auto-rows: 200px;
		gap: 8px;
	}

	.tr-panel-text {
		padding: 24px 20px;
	}

	.tr-panel-close {
		top: 12px;
		right: 12px;
	}
}

@media (max-width: 499px) {
	.tr-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 200px;
		gap: 8px;
	}

	.tr-section {
		padding-bottom: 60px;
	}
}