/* consult.css — 상담 전환 컴포넌트 (inc/consult.php + consult.js)
 * 토큰은 theme.css :root. accent = 정보(네이비), cta = 상담 행동(그린), kakao = 고정색.
 */

/* ── 버튼 (재사용) ─────────────────────────────────────────────── */
.ntte-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	padding: 11px 20px;
	border-radius: var(--ntte-radius);
	border: 0;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.3;
	white-space: nowrap;
}
.ntte-btn svg { flex-shrink: 0; }
/* 선택자에 `.ntte a` 를 포함해 (0,2,1) 로 — theme.css 의 `.ntte a`(0,1,1)가
 * 버튼 글자색을 네이비로 덮어써 초록/노랑 버튼 위 글씨가 안 보이던 것 교정. */
.ntte a.ntte-btn--cta,
.ntte button.ntte-btn--cta { background: var(--ntte-cta); color: #fff; }
.ntte a.ntte-btn--cta:hover,
.ntte button.ntte-btn--cta:hover { background: var(--ntte-cta-ink); color: #fff; }
.ntte a.ntte-btn--kakao { background: var(--ntte-kakao); color: var(--ntte-kakao-ink); }
.ntte a.ntte-btn--kakao:hover { background: #f2d900; color: var(--ntte-kakao-ink); }
.ntte-btn--block { display: flex; width: 100%; }

/* 네이비 배경(사이드바 위젯·메인 배너·상담 히어로) 위에서는 초록 버튼이 배경과
 * 거의 안 갈라진다(대비 약 1.6:1) → 상담 버튼을 흰 배경 + 네이비 글자로 뒤집는다.
 * 카톡(노랑)은 네이비 위에서 충분히 튀므로 그대로. */
.ntte-cta--aside a.ntte-btn--cta,
.ntte-consult-banner a.ntte-btn--cta,
.ntte-consult-hero a.ntte-btn--cta {
	background: #fff;
	color: var(--ntte-accent);
}
.ntte-cta--aside a.ntte-btn--cta:hover,
.ntte-consult-banner a.ntte-btn--cta:hover,
.ntte-consult-hero a.ntte-btn--cta:hover {
	background: var(--ntte-accent-wash);
	color: var(--ntte-accent-ink);
}

/* ── CTA 공통 ──────────────────────────────────────────────────── */
.ntte-cta__title { font-size: 17px; font-weight: 900; margin: 0 0 4px; }
.ntte-cta__sub { font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.ntte-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 글 하단 CTA 블록 */
.ntte-cta--block {
	margin-top: 32px;
	padding: 24px;
	background: var(--ntte-accent-wash);
	border: 1px solid var(--ntte-accent);
	border-radius: 10px;
}
.ntte-cta--block .ntte-cta__title { color: var(--ntte-accent-ink); }
.ntte-cta--block .ntte-cta__sub { color: #3f5b66; }
.ntte-cta__advisor { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(11, 79, 108, 0.18); }

/* 사이드바 sticky 위젯 */
.ntte-cta--aside {
	background: var(--ntte-accent);
	border-radius: var(--ntte-radius);
	padding: 20px;
}
.ntte-cta--aside .ntte-cta__title { color: #fff; font-size: 15px; }
.ntte-cta--aside .ntte-cta__sub { color: #d5e3ea; font-size: 13px; }
.ntte-cta--aside .ntte-cta__actions { flex-direction: column; gap: 8px; }

/* 본문 인라인 배너 (the_content 필터가 1회 삽입) */
.ntte-cta--inline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 1.8em 0;
	padding: 14px 18px;
	background: var(--ntte-surface);
	border: 1px solid var(--ntte-accent);
	border-left: 4px solid var(--ntte-accent);
	border-radius: var(--ntte-radius);
	flex-wrap: wrap;
}
.ntte-cta--inline__text { font-size: 14px; font-weight: 700; color: var(--ntte-text); flex: 1; min-width: 180px; }
.ntte-cta--inline .ntte-btn--cta { font-size: 13px; padding: 9px 16px; }
.ntte-cta__close {
	background: transparent;
	border: 0;
	padding: 4px;
	color: var(--ntte-text-mute);
	cursor: pointer;
	line-height: 0;
	flex-shrink: 0;
}
.ntte-cta__close:hover { color: var(--ntte-text); }

/* ── 상담사 프로필 ────────────────────────────────────────────── */
.ntte-advisor { display: flex; align-items: center; gap: 16px; }
.ntte-advisor__photo {
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: #cddde4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ntte-accent);
}
.ntte-advisor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ntte-advisor--mini .ntte-advisor__photo { width: 44px; height: 44px; }
.ntte-advisor--full .ntte-advisor__photo { width: 96px; height: 96px; }
.ntte-advisor--mini .ntte-advisor__ph svg { width: 22px; height: 22px; }
.ntte-advisor__name { font-weight: 700; margin: 0; color: var(--ntte-text); }
.ntte-advisor--mini .ntte-advisor__name { font-size: 14px; }
.ntte-advisor--full .ntte-advisor__name { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.ntte-advisor__meta { font-size: 13px; color: var(--ntte-text-sub); line-height: 1.7; margin: 0; }
.ntte-advisor--mini .ntte-advisor__meta { font-size: 12px; }
.ntte-advisor__note { font-size: 12px; color: #8a9199; margin: 8px 0 0; }

/* 상담 고지 문구 (개인 운영 · 참고용) */
.ntte-consult-disclaimer { font-size: 12px; line-height: 1.6; color: #8a9199; margin: 16px 0 0; }
.ntte-consult-disclaimer--sm { margin-top: 12px; font-size: 11px; }
.ntte-cta--block .ntte-consult-disclaimer { color: #6a8994; }

/* ── 메인 / 아카이브 상담 배너 ────────────────────────────────── */
.ntte-consult-banner {
	background: var(--ntte-accent);
	border-radius: 10px;
	padding: 26px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0 0 40px;
}
.ntte-consult-banner--sm { padding: 20px 24px; margin: 40px 0 0; }
.ntte-consult-banner__title { font-size: 19px; font-weight: 900; color: #fff; margin: 0 0 6px; }
.ntte-consult-banner--sm .ntte-consult-banner__title { font-size: 16px; }
.ntte-consult-banner__sub { font-size: 14px; color: #d5e3ea; line-height: 1.6; margin: 0; }
.ntte-consult-banner__actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── 플로팅 FAB ───────────────────────────────────────────────── */
.ntte-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
}
.ntte-fab[hidden] { display: none; }
.ntte-fab__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 800;
	padding: 13px 20px;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.ntte-fab__btn svg { flex-shrink: 0; }
/* `.ntte a`(0,1,1) 우선순위 극복 — FAB 버튼 글자색 고정 */
.ntte a.ntte-fab__btn--kakao { background: var(--ntte-kakao); color: var(--ntte-kakao-ink); }
.ntte a.ntte-fab__btn--kakao:hover { background: #f2d900; color: var(--ntte-kakao-ink); }
.ntte a.ntte-fab__btn--cta { background: var(--ntte-cta); color: #fff; }
.ntte a.ntte-fab__btn--cta:hover { background: var(--ntte-cta-ink); color: #fff; }

/* ── 첫 방문 슬라이드업 ───────────────────────────────────────── */
.ntte-slideup {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 95;
	width: 300px;
	max-width: calc(100vw - 40px);
	background: var(--ntte-surface);
	border: 1px solid var(--ntte-border);
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	transform: translateY(140%);
	transition: transform 0.28s ease;
}
.ntte-slideup[hidden] { display: none; }
.ntte-slideup.is-shown { transform: translateY(0); }
.ntte-slideup__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ntte-slideup__title { font-size: 14px; font-weight: 800; color: var(--ntte-text); margin: 0; }
.ntte-slideup__close { background: transparent; border: 0; padding: 2px; color: var(--ntte-text-mute); cursor: pointer; line-height: 0; flex-shrink: 0; }
.ntte-slideup__close:hover { color: var(--ntte-text); }
.ntte-slideup__sub { font-size: 12px; color: var(--ntte-text-sub); line-height: 1.6; margin: 6px 0 12px; }

/* 슬라이드업이 떠 있으면 FAB 를 위로 밀어 겹치지 않게 */
.ntte-slideup.is-shown ~ .ntte-fab { bottom: 190px; }

/* ── 상담 랜딩 페이지 (page-consult.php) ──────────────────────── */
.ntte-consult { padding: 40px 0 64px; }
.ntte-consult__inner { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.ntte-consult-hero {
	background: var(--ntte-accent);
	border-radius: 14px;
	padding: 44px 40px;
	text-align: center;
}
.ntte-consult-hero__eyebrow { font-size: 13px; font-weight: 700; color: #9ec4d4; margin: 0 0 12px; }
.ntte-consult-hero__title { font-size: 32px; font-weight: 900; color: #fff; line-height: 1.35; margin: 0 0 12px; word-break: keep-all; }
.ntte-consult-hero__sub { font-size: 15px; color: #d5e3ea; line-height: 1.7; margin: 0 0 24px; }
.ntte-consult-hero__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ntte-consult-hero .ntte-btn { padding: 13px 26px; font-size: 15px; }

.ntte-consult-sec { margin-top: 40px; }
.ntte-consult-sec__title { font-size: 19px; font-weight: 900; color: var(--ntte-text); margin: 0 0 16px; }
.ntte-consult-sec__note { font-size: 12px; color: #8a9199; margin: -8px 0 16px; }

.ntte-consult-profile {
	margin-top: 40px;
	background: var(--ntte-surface);
	border: 1px solid var(--ntte-border);
	border-radius: 12px;
	padding: 28px;
}

.ntte-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ntte-help-grid__item { background: var(--ntte-surface); border: 1px solid var(--ntte-border); border-radius: 10px; padding: 20px; }
.ntte-help-grid__t { font-size: 15px; font-weight: 800; color: var(--ntte-text); margin: 0 0 6px; }
.ntte-help-grid__d { font-size: 13px; color: var(--ntte-text-sub); line-height: 1.6; margin: 0; }

.ntte-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ntte-steps__item { background: var(--ntte-surface); border: 1px solid var(--ntte-border); border-radius: 10px; padding: 18px; text-align: center; }
.ntte-steps__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--ntte-accent-wash); color: var(--ntte-accent);
	font-size: 14px; font-weight: 900; margin-bottom: 10px;
}
.ntte-steps__t { font-size: 14px; font-weight: 800; color: var(--ntte-text); margin: 0 0 4px; }
.ntte-steps__d { font-size: 12px; color: var(--ntte-text-sub); line-height: 1.55; margin: 0; }

.ntte-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ntte-reviews__item { background: var(--ntte-surface); border: 1px solid var(--ntte-border); border-radius: 10px; padding: 20px; margin: 0; }
.ntte-reviews__item blockquote { font-size: 14px; color: #3f454d; line-height: 1.7; margin: 0 0 10px; }
.ntte-reviews__item figcaption { font-size: 12px; color: var(--ntte-text-sub); }

.ntte-faq { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ntte-faq dt { background: var(--ntte-surface); border: 1px solid var(--ntte-border); border-radius: 10px 10px 0 0; border-bottom: 0; padding: 16px 20px 8px; font-size: 14px; font-weight: 800; color: var(--ntte-text); }
.ntte-faq dd { background: var(--ntte-surface); border: 1px solid var(--ntte-border); border-radius: 0 0 10px 10px; border-top: 0; margin: 0 0 0; padding: 0 20px 16px; font-size: 13px; color: var(--ntte-text-sub); line-height: 1.7; }

.ntte-consult-formwrap { margin-top: 40px; background: var(--ntte-surface); border: 1px solid var(--ntte-border); border-radius: 12px; padding: 28px; }
.ntte-consult-formwrap__title { font-size: 19px; font-weight: 900; margin: 0 0 4px; }
.ntte-consult-formwrap__sub { font-size: 13px; color: var(--ntte-text-sub); margin: 0 0 20px; }
.ntte-consult-form__fallback { font-size: 14px; color: var(--ntte-text-sub); line-height: 1.7; margin: 0 0 14px; }

/* ── 반응형 ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ntte-help-grid,
	.ntte-reviews { grid-template-columns: minmax(0, 1fr); }
	.ntte-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ntte-consult-hero { padding: 32px 22px; }
	.ntte-consult-hero__title { font-size: 25px; }
	.ntte-consult-banner { padding: 22px; }
	.ntte-fab__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ntte-fab__btn { padding: 14px; }
	.ntte-fab { right: 14px; bottom: 14px; }
	.ntte-slideup { right: 14px; bottom: 14px; }
	.ntte-slideup.is-shown ~ .ntte-fab { bottom: 200px; }
}

/* ── 인쇄 ──────────────────────────────────────────────────────── */
@media print {
	.ntte-fab, .ntte-slideup, .ntte-cta, .ntte-consult-banner { display: none !important; }
}