@charset "utf-8";

/* ============================================================
   mcat22 — 동구 여행 노트
   폴라로이드 카테고리 레이아웃
   ============================================================ */

/* ── 커버 ─────────────────────────────────────────── */
.tn-cover {
	position: relative;
	padding: 160px 60px 100px;
	max-width: 1200px;
	margin: 0 auto;
}

.tn-cover-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 700px;
}

.tn-eyebrow {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 600;
	color: #b91c1c;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(10px);
	display: block;
}

.tn-type-line {
	font-size: clamp(16px, calc(6px + 1.4vw), 22px);
	color: var(--color-text-sub);
	min-height: 1.5em;
}

.tn-cursor {
	color: var(--color-text-main);
	animation: tn-blink 0.75s step-end infinite;
}

@keyframes tn-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.tn-cover-tit {
	font-size: clamp(48px, calc(18px + 4.5vw), 80px);
	font-weight: 900;
	color: var(--color-text-main);
	font-family: var(--font-sub-title);
	min-height: 1.2em;
	margin-top: 8px;
}

.tn-cover-stamp {
	position: absolute;
	right: 60px;
	bottom: 80px;
	width: 110px;
	height: 110px;
	opacity: 0;
}

.tn-cover-hint {
	margin-top: 32px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--color-text-sub);
	opacity: 0;
}

/* ── 노트 라인 배경 ──────────────────────────────── */
.tn-body {
	background-image: repeating-linear-gradient(
		transparent 0px,
		transparent 31px,
		rgba(0, 0, 0, 0.035) 31px,
		rgba(0, 0, 0, 0.035) 32px
	);
}

/* ── 리드 ─────────────────────────────────────────── */
.tn-lead {
	max-width: 800px;
	margin: 0 auto;
	padding: 100px 60px;
	border-bottom: 1px solid var(--color-border);
	opacity: 0;
	transform: translateY(24px);
}

.tn-lead-txt {
	font-size: clamp(18px, calc(8px + 1.6vw), 26px);
	color: var(--color-text-sub);
}

/* ── 폴라로이드 ──────────────────────────────────── */
.tn-polaroid {
	background: #fff;
	padding: 14px 14px 52px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13), 0 1px 4px rgba(0, 0, 0, 0.07);
	position: relative;
	width: 320px;
	flex-shrink: 0;
}

.tn-polaroid--lg { width: 380px; }
.tn-polaroid--sm { width: 210px; }

.tn-polaroid-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e8e8e8;
}

.tn-polaroid-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.tn-polaroid:hover .tn-polaroid-img img {
	transform: scale(1.04);
}

.tn-polaroid-cap {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Nanum Pen Script', cursive;
	font-size: clamp(16px, calc(8px + 1.2vw), 20px);
	color: #666;
}

/* ── 스팟 공통 ──────────────────────────────────── */
.tn-spot {
	padding: 100px 60px;
	max-width: 1200px;
	margin: 0 auto;
	opacity: 0;
	transform: translateY(40px);
}

.tn-spot-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.tn-polaroid-wrap {
	display: flex;
	justify-content: center;
}

.tn-spot-body {
	display: flex;
	flex-direction: column;
}

.tn-spot-num {
	font-size: clamp(48px, calc(20px + 4vw), 80px);
	font-weight: 900;
	color: rgba(0, 0, 0, 0.06);
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: -12px;
}

.tn-spot-name {
	font-size: clamp(24px, calc(10px + 2.2vw), 38px);
	font-weight: 800;
	color: var(--color-text-main);
	font-family: var(--font-sub-title);
	margin-bottom: 20px;
}

.tn-spot-desc {
	font-size: clamp(16px, calc(5px + 1.6vw), 20px);
	color: var(--color-text-sub);
	margin-bottom: 16px;
}

.tn-spot-tip {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--color-text-sub);
	border-left: 2px solid rgba(0, 0, 0, 0.12);
	padding-left: 12px;
	margin-top: 16px;
}

/* ── 폴라로이드 쌍 (02, 04) ──────────────────────── */
.tn-polaroids-pair {
	display: flex;
	flex-direction: column;
}

.tn-polaroids-pair > .tn-polaroid:last-child {
	margin-top: -36px;
	align-self: flex-end;
}

.tn-polaroids-pair--col {
	gap: 8px;
	justify-content: center;
}

.tn-polaroids-pair--col > .tn-polaroid:last-child {
	margin-top: 0;
	align-self: flex-end;
}

/* ── 03 이바구길 — 풀폭 이미지 ──────────────────── */
.tn-spot--03 {
	padding: 0;
	max-width: 100%;
}

.tn-spot-fullimg {
	width: 100%;
	height: 68vh;
	min-height: 400px;
	overflow: hidden;
}

.tn-spot-fullimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tn-spot-below {
	max-width: 680px;
	margin: 0 auto;
	padding: 60px 60px 100px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ============================================================
   반응형 — 999px
   ============================================================ */
@media all and (max-width: 999px) {
	.tn-cover { padding: 120px 32px 80px; }
	.tn-cover-stamp { right: 32px; bottom: 60px; width: 90px; height: 90px; }
	.tn-lead { padding: 80px 32px; }
	.tn-spot { padding: 80px 32px; }
	.tn-spot-grid { gap: 48px; }
	.tn-polaroid--lg { width: 320px; }
	.tn-spot-below { padding: 48px 32px 80px; }
}

/* ============================================================
   반응형 — 768px
   ============================================================ */
@media all and (max-width: 768px) {
	.tn-cover { padding: 100px 20px 60px; }
	.tn-cover-stamp { right: 20px; bottom: 40px; width: 72px; height: 72px; }
	.tn-lead { padding: 60px 20px; }
	.tn-spot { padding: 60px 20px; }

	.tn-spot-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tn-spot--02 .tn-spot-body { order: -1; }

	.tn-polaroid-wrap { justify-content: flex-start; }
	.tn-polaroid--lg, .tn-polaroid { width: 100%; max-width: 340px; }
	.tn-polaroid--sm { width: 180px; }

	.tn-polaroids-pair > .tn-polaroid:last-child { margin-top: -24px; }

	.tn-spot-fullimg { height: 50vh; }
	.tn-spot-below { padding: 40px 20px 60px; }
}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media all and (max-width: 499px) {
	.tn-spot { padding: 48px 20px; }
	.tn-spot-fullimg { height: 40vh; }
}

/* ============================================================
   다크모드
   ============================================================ */
body.dark .tn-spot-num { color: rgba(255, 255, 255, 0.06); }
body.dark .tn-body {
	background-image: repeating-linear-gradient(
		transparent 0px,
		transparent 31px,
		rgba(255, 255, 255, 0.04) 31px,
		rgba(255, 255, 255, 0.04) 32px
	);
}
body.dark .tn-spot-tip { border-left-color: rgba(255, 255, 255, 0.15); }
body.dark .tn-polaroid { background: var(--color-bg-sub); }
body.dark .tn-polaroid-cap { color: var(--color-text-sub); }