@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   커뮤니티 정보 허브 (/info/{slug})
   ─ 먹튀의민족 정보 페이지라는 점이 먼저 읽히는 구조.
   ─ 검색 결과에서 들어온 사용자가 본문을 읽기 편한 것을 우선한다.
     (배너·네온·그라데이션 남발 없음)
   ═══════════════════════════════════════════════════════════ */

.ifp {
	--if-ink:   #14212B;
	--if-ink2:  #5A7180;
	--if-ink3:  #93A6B2;
	--if-line:  #E4EBEF;
	--if-line2: #EFF4F6;
	--if-card:  #FFFFFF;
	--if-deep:  #00756F;
	--if-mint:  #16C2AE;
	--if-soft:  #F2FAF8;
	--if-org:   #C2410C;

	max-width: 1060px;
	margin-inline: auto;
	padding-bottom: 36px;
	color: var(--if-ink2);
	font-size: 15px;
	line-height: 1.8;
}

/* ── ABOVE THE FOLD ─────────────────────────────── */
.ifp-head { padding: 26px 0 20px; }
.ifp-label {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--if-deep);
}
.ifp-head h1 {
	margin: 0;
	font-size: clamp(24px, 3.9vw, 34px);
	font-weight: 900;
	line-height: 1.26;
	letter-spacing: -.04em;
	color: var(--if-ink);
	text-wrap: balance;
}
.ifp-sub {
	max-width: 62ch;
	margin: 14px 0 0;
	font-size: 15.5px;
	line-height: 1.75;
}
.ifp-note {
	margin: 14px 0 0;
	padding-left: 11px;
	border-left: 3px solid var(--if-mint);
	font-size: 13px;
	line-height: 1.65;
	color: var(--if-ink3);
}

/* ── 상태 스냅샷 ────────────────────────────────── */
.ifp-snap {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: 1px solid var(--if-line);
	border-radius: 14px;
	background: var(--if-line);
	overflow: hidden;
}
.ifp-snap > div { background: var(--if-card); padding: 16px 18px; min-width: 0; }
.ifp-snap dt {
	margin: 0 0 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--if-ink3);
	white-space: nowrap;
}
.ifp-snap dd {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--if-ink);
	word-break: break-all;
	font-variant-numeric: tabular-nums;
}
.ifp-snap dd.dm { font-family: ui-monospace, "D2Coding", monospace; font-size: 14.5px; }
.ifp-snap .wait { font-weight: 600; color: var(--if-ink3); }

.ifp-st {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -.02em;
	white-space: nowrap;
}
.ifp-st.ok   { background: #E2F6EC; color: #0B8049; }
.ifp-st.warn { background: #FBEEE0; color: var(--if-org); }
.ifp-st.bad  { background: #FBE9E6; color: #A32217; }
.ifp-st.wait { background: #EEF3F6; color: var(--if-ink2); }

/* ── CTA ────────────────────────────────────────── */
.ifp-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.ifp-cta.top { margin-top: 14px; }
.ifp-cta.bottom { margin-top: 32px; }
.ifp-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 22px;
	border: 1px solid var(--if-line);
	border-radius: 999px;
	background: var(--if-card);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--if-ink);
	transition: border-color .15s, background .15s;
}
.ifp-btn:hover { border-color: var(--if-mint); background: var(--if-soft); text-decoration: none; }
.ifp-btn.primary { border-color: var(--if-deep); background: var(--if-deep); color: #fff; }
.ifp-btn.primary:hover { background: #005F5A; border-color: #005F5A; }

/* ── 본문 + 목차 ────────────────────────────────── */
.ifp-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 188px;
	gap: 40px;
	margin-top: 30px;
	align-items: start;
}
.ifp-main { min-width: 0; max-width: 72ch; }

.ifp-toc {
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + 20px);
	order: 2;
	padding: 16px 0 16px 18px;
	border-left: 1px solid var(--if-line);
}
.ifp-toc__h {
	margin: 0 0 9px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--if-ink3);
}
.ifp-toc ul { margin: 0; padding: 0; list-style: none; }
.ifp-toc li + li { margin-top: 2px; }
.ifp-toc a {
	display: block;
	padding: 5px 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--if-ink2);
}
.ifp-toc a:hover { color: var(--if-deep); text-decoration: none; }

.ifp-lead {
	margin: 0 0 8px;
	font-size: 15.5px;
	line-height: 1.85;
}

/* ── 섹션 ───────────────────────────────────────── */
.ifp-sec { margin-top: 34px; scroll-margin-top: 24px; }
.ifp-sec h2 {
	margin: 0 0 13px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--if-line);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--if-ink);
}
.ifp-h3 {
	margin: 22px 0 10px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--if-ink);
}
.ifp-sec p { margin: 0 0 10px; }
.ifp-sec p:last-child { margin-bottom: 0; }
.ifp-sec b { color: var(--if-ink); font-weight: 700; }
.ifp-sec a { color: var(--if-deep); font-weight: 600; }
.ifp-sec a:hover { text-decoration: underline; }
.ifp-sm { font-size: 13px !important; color: var(--if-ink3); }

/* EMPTY STATE */
.ifp-empty {
	padding: 22px 20px;
	border: 1px dashed var(--if-line);
	border-radius: 12px;
	background: #FBFDFD;
	text-align: center;
}
.ifp-empty .t { margin: 0 0 5px; font-size: 14.5px; font-weight: 700; color: var(--if-ink); }
.ifp-empty .d { margin: 0; font-size: 13px; line-height: 1.7; color: var(--if-ink3); }

/* 주소 표 */
.ifp-addr {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 4px;
	border: 1px solid var(--if-line);
	border-radius: 12px;
	background: var(--if-line);
	overflow: hidden;
}
.ifp-addr > div { background: var(--if-card); padding: 14px 16px; min-width: 0; }
.ifp-addr dt { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--if-ink3); }
.ifp-addr dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--if-ink); word-break: break-all; }
.ifp-addr dd.dm { font-family: ui-monospace, "D2Coding", monospace; font-size: 14px; }
.ifp-addr .wait { font-weight: 600; color: var(--if-ink3); }

/* 주소 변경 타임라인 */
.ifp-tl { margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 2px solid var(--if-line); }
.ifp-tl li { position: relative; padding: 7px 0; display: flex; align-items: baseline; gap: 12px; }
.ifp-tl li::before {
	content: "";
	position: absolute;
	left: -24px;
	top: 15px;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--if-line);
	box-shadow: 0 0 0 3px var(--if-card);
}
.ifp-tl li.now::before { background: var(--if-mint); }
.ifp-tl time { flex: 0 0 auto; width: 78px; font-size: 13px; font-weight: 700; color: var(--if-ink3); }
.ifp-tl code {
	font-family: ui-monospace, "D2Coding", monospace;
	font-size: 13.5px;
	color: var(--if-ink);
	word-break: break-all;
}
.ifp-tl li.now code { font-weight: 700; }

/* 목록 */
.ifp-list { margin: 0; padding: 0 0 0 18px; }
.ifp-list li { margin: 0 0 7px; }
.ifp-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ifp-check li {
	padding: 13px 16px;
	border: 1px solid var(--if-line2);
	border-left: 3px solid var(--if-mint);
	border-radius: 10px;
	background: var(--if-card);
	font-size: 14.5px;
	line-height: 1.7;
}

/* 출처 */
.ifp-src { margin: 0; padding: 0; list-style: none; }
.ifp-src li { padding: 8px 0; border-bottom: 1px solid var(--if-line2); font-size: 14px; }
.ifp-src span { margin-left: 8px; font-size: 12.5px; color: var(--if-ink3); }

/* 관련 링크 카드 */
.ifp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-top: 16px;
}
.ifp-cards a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 16px;
	border: 1px solid var(--if-line);
	border-radius: 12px;
	background: var(--if-card);
	font-weight: 400 !important;
	transition: border-color .15s, background .15s;
}
.ifp-cards a:hover { border-color: var(--if-mint); background: var(--if-soft); text-decoration: none !important; }
.ifp-cards b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; color: var(--if-ink); }
.ifp-cards span { font-size: 12.5px; line-height: 1.55; color: var(--if-ink3); }

.ifp-rel { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--if-line2); }
.ifp-rel li { border-bottom: 1px solid var(--if-line2); }
.ifp-rel a { display: block; padding: 11px 2px; font-size: 14.5px; font-weight: 500 !important; }

/* 변경이력 */
.ifp-hist { margin: 0; padding: 0; list-style: none; }
.ifp-hist li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--if-line2); font-size: 14.5px; }
.ifp-hist li:last-child { border-bottom: 0; }
.ifp-hist time {
	flex: 0 0 auto; width: 92px;
	font-weight: 700; color: var(--if-ink);
	font-variant-numeric: tabular-nums;
}
.ifp-dates {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 16px 0 0;
	border: 1px solid var(--if-line);
	border-radius: 10px;
	background: var(--if-line);
	overflow: hidden;
}
.ifp-dates > div { background: #FBFDFD; padding: 11px 14px; }
.ifp-dates dt { margin: 0 0 2px; font-size: 12px; color: var(--if-ink3); }
.ifp-dates dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--if-ink); font-variant-numeric: tabular-nums; }

/* FAQ — JS 없이 details 로 */
.ifp-faq details {
	border: 1px solid var(--if-line);
	border-radius: 11px;
	background: var(--if-card);
	overflow: hidden;
}
.ifp-faq details + details { margin-top: 8px; }
.ifp-faq summary {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--if-ink);
	cursor: pointer;
	list-style: none;
}
.ifp-faq summary::-webkit-details-marker { display: none; }
.ifp-faq summary::before {
	content: "Q";
	flex: 0 0 auto;
	display: grid; place-items: center;
	width: 20px; height: 20px;
	margin-top: 1px;
	border-radius: 6px;
	background: var(--if-soft);
	font-size: 11.5px; font-weight: 900;
	color: var(--if-deep);
}
.ifp-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px; height: 8px;
	margin: 6px 0 0 auto;
	border-right: 1.8px solid var(--if-ink3);
	border-bottom: 1.8px solid var(--if-ink3);
	transform: rotate(45deg);
	transition: transform .18s;
}
.ifp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 9px; }
.ifp-faq details > div {
	padding: 0 16px 15px 46px;
	font-size: 14.5px;
	line-height: 1.78;
	color: var(--if-ink2);
}

.ifp-foot {
	margin: 26px 0 0;
	padding: 16px 18px;
	border-radius: 12px;
	background: #F7FAFB;
	font-size: 13px;
	line-height: 1.7;
	color: var(--if-ink3);
}

/* ── 반응형 ─────────────────────────────────────── */
@media (max-width: 1000px) {
	.ifp-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ifp-main { max-width: none; }
	/* 목차는 본문 위로, 가로 칩 형태 */
	.ifp-toc {
		order: 0;
		position: static;
		margin-bottom: 22px;
		padding: 0 0 16px;
		border-left: 0;
		border-bottom: 1px solid var(--if-line);
	}
	.ifp-toc ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.ifp-toc li + li { margin-top: 0; }
	.ifp-toc a {
		padding: 5px 12px;
		border: 1px solid var(--if-line);
		border-radius: 999px;
		font-size: 12.5px;
		white-space: nowrap;
	}
	.ifp-snap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ifp { font-size: 14.5px; }
	.ifp-head { padding-top: 20px; }
	.ifp-head h1 br { display: none; }
	.ifp-snap { grid-template-columns: minmax(0, 1fr); }
	.ifp-addr { grid-template-columns: minmax(0, 1fr); }
	.ifp-dates { grid-template-columns: minmax(0, 1fr); }
	.ifp-sec { margin-top: 26px; }
	.ifp-sec h2 { font-size: 17px; }
	.ifp-hist li { flex-direction: column; gap: 2px; }
	.ifp-hist time { width: auto; }
	.ifp-tl li { flex-direction: column; gap: 1px; }
	.ifp-tl time { width: auto; }
	.ifp-cta .ifp-btn { flex: 1 1 100%; justify-content: center; }
	.ifp-faq details > div { padding-left: 16px; }
}

/* ── 다크 모드 ──────────────────────────────────── */
[data-theme="dark"] .ifp {
	--if-ink:   #E7F3F1;
	--if-ink2:  #A4BCB9;
	--if-ink3:  #7D9693;
	--if-line:  #24383B;
	--if-line2: #1D2E31;
	--if-card:  #101B1D;
	--if-soft:  #152A2B;
	--if-deep:  #4FD9C8;
	--if-mint:  #0CEFD3;
	--if-org:   #E0A264;
}
[data-theme="dark"] .ifp-snap,
[data-theme="dark"] .ifp-addr,
[data-theme="dark"] .ifp-dates { background-color: var(--if-line); }
[data-theme="dark"] .ifp-dates > div,
[data-theme="dark"] .ifp-empty { background-color: #0E1A1C; border-color: var(--if-line); }
[data-theme="dark"] .ifp-st.ok   { background-color: rgba(11,128,73,.22);  color: #5FCB95; }
[data-theme="dark"] .ifp-st.warn { background-color: rgba(194,65,12,.22);  color: #E0A264; }
[data-theme="dark"] .ifp-st.bad  { background-color: rgba(163,34,23,.24);  color: #EE8A7D; }
[data-theme="dark"] .ifp-st.wait { background-color: #1B2C2F; color: var(--if-ink2); }
[data-theme="dark"] .ifp-btn.primary { background-color: #0E8F85; border-color: #0E8F85; color: #04191A; }
[data-theme="dark"] .ifp-foot { background-color: #16262A; }
[data-theme="dark"] .ifp-tl li::before { box-shadow: 0 0 0 3px #0A1214; }