/*
 * 사용자 사이트 UI (core.css 위에 덮어쓰는 스타일) — body.sx 아래에서만 적용된다.
 * 관리자(mg_modern.css)와 같은 색·모서리 기준을 쓴다. 접두사: sx-
 */

:root {
	--sx-bg: #f6f8fa;
	--sx-surface: #ffffff;
	--sx-surface-2: #f8fafb;
	--sx-border: #e4e9ee;
	--sx-border-strong: #cfd7df;
	--sx-text: #0f1a24;
	--sx-text-2: #3f4d5a;
	--sx-muted: #66737f;

	--sx-primary: #0b8f7e;
	--sx-primary-hover: #097a6b;
	--sx-primary-soft: #e4f5f2;
	--sx-primary-ink: #065f53;

	--sx-warn: #b45309; --sx-warn-soft: #fff3dc;
	--sx-danger: #c2310f; --sx-danger-soft: #ffece6;
	--sx-ok: #0f7b4a; --sx-ok-soft: #e3f6ec;

	--sx-radius: 16px;
	--sx-radius-sm: 12px;
	--sx-shadow-xs: 0 1px 2px rgba(15, 26, 36, .05);
	--sx-shadow-sm: 0 1px 3px rgba(15, 26, 36, .07), 0 1px 2px rgba(15, 26, 36, .04);
	--sx-shadow-md: 0 12px 32px -12px rgba(15, 26, 36, .18);
	--sx-ring: 0 0 0 3px rgba(11, 143, 126, .22);
	--sx-header-h: 68px;
}

/* ---------- 기본 ---------- */
body.sx {
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	color: var(--sx-text);
	background: var(--sx-surface);
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.012em;
}
body.sx ::selection { background: var(--sx-primary-soft); color: var(--sx-primary-ink); }
body.sx :focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: 8px; }
:where(body.sx) a { color: var(--sx-primary); }
:where(body.sx) a:hover { color: var(--sx-primary-hover); }

/* 이전 화면들의 큰 제목을 한 단계 줄인다 (신규 컴포넌트는 각자 크기를 가진다) */
:where(body.sx) :is(h1, .h1) { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.25; }
:where(body.sx) :is(h2, .h2) { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.025em; line-height: 1.3; }
:where(body.sx) :is(h3, .h3) { font-size: 20px; letter-spacing: -0.02em; }
:where(body.sx) :is(h4, .h4) { font-size: 18px; }
:where(body.sx) :is(h5, .h5) { font-size: 16px; }
:where(body.sx) .lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--sx-text-2); font-weight: 400; }

/* ---------- 버튼 ---------- */
body.sx .btn {
	border-radius: 12px; font-weight: 650; letter-spacing: -0.01em;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
body.sx .btn:active { transform: translateY(1px); }
body.sx .btn-primary {
	--bs-btn-bg: var(--sx-primary); --bs-btn-border-color: var(--sx-primary); --bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--sx-primary-hover); --bs-btn-hover-border-color: var(--sx-primary-hover); --bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--sx-primary-hover); --bs-btn-active-border-color: var(--sx-primary-hover);
	--bs-btn-disabled-bg: var(--sx-primary); --bs-btn-disabled-border-color: var(--sx-primary);
	background-image: none; box-shadow: none;
}
body.sx .btn-primary:hover { box-shadow: var(--sx-shadow-md); }
body.sx .btn-outline-primary {
	--bs-btn-color: var(--sx-primary-ink); --bs-btn-border-color: var(--sx-primary);
	--bs-btn-hover-bg: var(--sx-primary-soft); --bs-btn-hover-color: var(--sx-primary-ink); --bs-btn-hover-border-color: var(--sx-primary);
	--bs-btn-active-bg: var(--sx-primary-soft); --bs-btn-active-color: var(--sx-primary-ink); --bs-btn-active-border-color: var(--sx-primary);
}
body.sx .btn-secondary, body.sx .btn-outline-secondary {
	--bs-btn-color: var(--sx-text-2); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sx-border-strong);
	--bs-btn-hover-bg: var(--sx-surface-2); --bs-btn-hover-color: var(--sx-text); --bs-btn-hover-border-color: #b3bec8;
	--bs-btn-active-bg: var(--sx-surface-2); --bs-btn-active-color: var(--sx-text); --bs-btn-active-border-color: #b3bec8;
}
body.sx .btn-lg { padding: .85rem 1.6rem; font-size: 16.5px; }

/* ---------- 폼 ---------- */
body.sx .form-control, body.sx .form-select {
	min-height: 46px; font-size: 15px; color: var(--sx-text);
	border: 1px solid var(--sx-border-strong); border-radius: 12px; box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
body.sx .form-control-sm { min-height: 40px; font-size: 14.5px; }
body.sx textarea.form-control { line-height: 1.65; }
body.sx .form-control:focus, body.sx .form-select:focus { border-color: var(--sx-primary); box-shadow: var(--sx-ring); }
body.sx .form-label { font-size: 14px; font-weight: 650; color: var(--sx-text-2); }
body.sx .form-control.is-invalid, body.sx .form-select.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .14); background-image: none; }

/* ---------- 카드 / 섹션 ---------- */
body.sx .card { border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); overflow: hidden; }
body.sx .card-header { background: var(--sx-surface-2); border-bottom: 1px solid var(--sx-border); font-weight: 700; }
body.sx .badge { font-weight: 650; border-radius: 999px; }

/* ---------- 헤더 ---------- */
body.sx #header {
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--sx-border) !important; box-shadow: none;
}
body.sx #header .navbar { min-height: var(--sx-header-h); padding-top: 0; padding-bottom: 0; }
body.sx #header .navbar-brand img { height: 26px; width: auto; }
body.sx #header .navbar-nav { gap: 2px; margin-left: 24px; align-items: center; }
body.sx #header .navbar-collapse { align-items: center; }
body.sx #header .navbar-nav .nav-link {
	display: inline-flex; align-items: center; height: auto; line-height: 1.3; padding: 9px 14px; font-size: 15px; font-weight: 600; color: var(--sx-text-2);
	border-radius: 10px; transition: background-color .15s, color .15s;
}
body.sx #header .navbar-nav .nav-link:hover { background: var(--sx-surface-2); color: var(--sx-text); }
body.sx #header .navbar-nav .nav-link.active { background: var(--sx-primary-soft); color: var(--sx-primary-ink); font-weight: 700 !important; }

.sx-header-actions { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-cta {
	display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
	font-size: 14.5px; font-weight: 700; color: #fff !important; text-decoration: none !important; white-space: nowrap;
	background: var(--sx-primary); border-radius: 999px; transition: background-color .15s, box-shadow .15s;
}
.sx-cta:hover { background: var(--sx-primary-hover); box-shadow: var(--sx-shadow-md); }
.sx-link-quiet {
	padding: 8px 12px; font-size: 14.5px; font-weight: 600; color: var(--sx-text-2) !important; text-decoration: none !important;
	border-radius: 10px; white-space: nowrap;
}
.sx-link-quiet:hover { background: var(--sx-surface-2); }
/* 대행사 서비스(공급자 입구) / 로그인(회원) 구분 */
.sx-link-biz { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; font-size: 12.5px; font-weight: 650; color: var(--sx-muted) !important; text-decoration: none !important; white-space: nowrap; background: var(--sx-surface-2); border: 1px solid var(--sx-border); border-radius: 999px; }
.sx-link-biz:hover { color: var(--sx-text) !important; background: #e9eef2; }
.sx-header-actions .sx-sep { width: 1px; height: 20px; margin: 0 8px; background: var(--sx-border-strong); }
.sx-link-login { padding: 8px 16px; background: #fff; border: 1px solid var(--sx-border-strong); border-radius: 999px; color: var(--sx-text) !important; }
.sx-link-login:hover { background: var(--sx-surface-2); border-color: #b3bec8; }
.sx-account { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--sx-border); border-radius: 999px; background: #fff; color: var(--sx-text) !important; font-size: 14px; font-weight: 650; text-decoration: none !important; }
.sx-account .sx-avatar { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 50%; }
body.sx #header .dropdown-menu { border: 1px solid var(--sx-border); border-radius: 14px; box-shadow: var(--sx-shadow-md); padding: 6px; min-width: 190px; }
body.sx #header .dropdown-item { border-radius: 9px; padding: 9px 12px; font-size: 14.5px; font-weight: 600; color: var(--sx-text-2); }
body.sx #header .dropdown-item:hover { background: var(--sx-surface-2); color: var(--sx-text); }

@media (max-width: 991px) {
	/* backdrop-filter 가 있으면 position:fixed 인 메뉴 오버레이가 화면이 아니라 헤더 안에 갇힌다 → 모바일에서는 끈다 */
	body.sx #header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

	/* 한 줄 고정: [메뉴 버튼 + 로고] ...... [계정 / 로그인 + 견적 버튼] */
	body.sx #header .navbar { flex-wrap: nowrap; min-height: 60px; }
	body.sx #header .navbar > div:first-child { flex: 0 0 auto; }
	body.sx #header .navbar > .navbar-collapse:not(.show) { display: none; }
	body.sx #header .navbar-toggler { width: 44px; height: 56px; margin: 0 4px 0 -8px; border: 0 !important; }
	body.sx #header .navbar-brand { margin-right: 0; }
	body.sx #header .navbar-brand img { height: 22px; }
	body.sx #header .sx-header-actions { margin-left: auto; gap: 6px; flex-shrink: 0; }
	body.sx #header .sx-cta { padding: 8px 13px; font-size: 13px; }
	body.sx #header .sx-link-quiet { padding: 8px; font-size: 13.5px; }
	body.sx #header .sx-link-login { padding: 7px 13px; }
	body.sx #header .sx-account { padding: 4px; }
	.sx-header-actions .sx-hide-sm { display: none; }

	/* 펼친 메뉴: 화면 전체를 덮고, 링크는 세로로 크게 */
	body.sx #header .navbar-collapse { padding: 0; }
	body.sx #header .navbar-collapse.show > .navbar-nav { margin: 0; gap: 2px; align-items: stretch; flex-direction: column; border-radius: 16px; bottom: auto; max-height: calc(100% - 100px); }
	body.sx #header .navbar-collapse.show .navbar-nav .nav-link { display: flex; padding: 14px 14px; font-size: 16px; }
	body.sx #header .navbar-xs { padding: 0 8px; }
}
body.sx #header .navbar-nav .nav-link { white-space: nowrap; }
/* 노트북·태블릿 가로(992~1199px): 메뉴가 두 줄로 꺾이지 않게 간격과 글자를 줄인다 */
@media (min-width: 992px) and (max-width: 1199px) {
	body.sx #header .navbar-nav { margin-left: 8px; gap: 0; flex-wrap: nowrap; }
	body.sx #header .navbar-nav .nav-link { padding: 8px 7px; font-size: 14px; }
	body.sx #header .sx-link-biz { padding: 5px 9px; font-size: 12px; }
	body.sx #header .sx-link-biz svg { display: none; }
	body.sx #header .sx-header-actions .sx-sep { margin: 0 4px; }
	body.sx #header .sx-link-login { padding: 7px 13px; }
	body.sx #header .navbar-brand { margin-right: 8px !important; }
	body.sx #header .sx-cta { padding: 8px 13px; font-size: 13.5px; }
}
@media (max-width: 380px) {
	body.sx #header .sx-cta { padding: 8px 10px; font-size: 12.5px; }
	body.sx #header .navbar-brand img { height: 20px; }
}

/* ---------- 푸터 ---------- */
.sx-footer { margin-top: 64px; padding: 40px 0 32px; background: var(--sx-surface-2); border-top: 1px solid var(--sx-border); color: var(--sx-muted); font-size: 13px; line-height: 1.8; }
.sx-footer .sx-footer-top { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sx-footer .sx-footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.sx-footer a { color: var(--sx-text-2) !important; font-weight: 600; text-decoration: none; }
.sx-footer a:hover { text-decoration: underline; }
.sx-footer .sx-footer-logo { height: 22px; opacity: .85; }

/* ---------- 마이페이지 사이드 ---------- */
.sx-side { position: sticky; top: calc(var(--sx-header-h) + 16px); padding: 18px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-side-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--sx-border); }
.sx-side-user .sx-avatar { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 50%; }
.sx-side-user small { display: block; font-size: 12.5px; color: var(--sx-muted); }
.sx-side-user b { display: block; font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.sx-side-nav { display: flex; flex-direction: column; gap: 2px; }
.sx-side-link { display: flex; align-items: center; gap: 11px; padding: 11px 12px; font-size: 15px; font-weight: 600; color: var(--sx-text-2) !important; text-decoration: none !important; border-radius: 11px; transition: background-color .15s, color .15s; }
.sx-side-link:hover { background: var(--sx-surface-2); color: var(--sx-text) !important; }
.sx-side-link.is-active { background: var(--sx-primary-soft); color: var(--sx-primary-ink) !important; font-weight: 700; }
.sx-side-link svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.sx-side-sep { height: 1px; margin: 8px 4px; background: var(--sx-border); }
.sx-side-cta { margin-top: 14px; }
.sx-side-cta .btn { width: 100%; }
@media (max-width: 991px) {
	.sx-side { position: static; padding: 12px; }
	.sx-side-user { padding-bottom: 12px; }
	.sx-side-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
	.sx-side-link { white-space: nowrap; padding: 9px 13px; background: var(--sx-surface-2); }
	.sx-side-sep { display: none; }
}

/* ---------- 상태 알약 ---------- */
.sx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; font-size: 12.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; border-radius: 999px; background: #eceff3; color: #52606d; }
.sx-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.sx-pill--wait { background: var(--sx-warn-soft); color: var(--sx-warn); }
.sx-pill--ing { background: #e8f0ff; color: #2563eb; }
.sx-pill--ok { background: var(--sx-ok-soft); color: var(--sx-ok); }
.sx-pill--end { background: #e3e8ee; color: #334155; }

/* ========== 프로젝트 등록 흐름 ========== */
.sx-flow { padding: 36px 0 24px; background: var(--sx-bg); }
.sx-flow-head { margin-bottom: 22px; }
.sx-flow-head h1 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.sx-flow-head p { margin: 0; color: var(--sx-muted); font-size: 15px; }

/* 단계 표시 */
.sx-steps { display: flex; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sx-step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-sm); color: var(--sx-muted); font-size: 14px; font-weight: 650; }
.sx-step .num { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: #eceff3; color: #52606d; border-radius: 50%; }
.sx-step small { display: block; font-size: 12px; font-weight: 500; color: var(--sx-muted); }
.sx-step.is-active { border-color: var(--sx-primary); background: var(--sx-primary-soft); color: var(--sx-primary-ink); }
.sx-step.is-active .num { background: var(--sx-primary); color: #fff; }
.sx-step.is-done { color: var(--sx-text-2); }
.sx-step.is-done .num { background: var(--sx-primary-soft); color: var(--sx-primary-ink); }
@media (max-width: 575px) { .sx-step small { display: none; } .sx-step { padding: 10px; gap: 8px; font-size: 13px; } }

.sx-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; margin-top: 22px; }
@media (max-width: 991px) { .sx-flow-grid { grid-template-columns: 1fr; } .sx-aside { position: static !important; } }

.sx-q { margin-bottom: 14px; padding: 24px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); scroll-margin-top: calc(var(--sx-header-h) + 16px); transition: border-color .15s, box-shadow .15s; }
.sx-q.is-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.sx-q-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.sx-q-title .q { font-size: 13px; font-weight: 800; color: var(--sx-primary); }
.sx-q-title .opt { font-size: 13px; font-weight: 500; color: var(--sx-muted); }
.sx-q-help { margin: 0 0 16px; font-size: 13.5px; color: var(--sx-muted); }
.sx-q-error { display: none; margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--sx-danger); }
.sx-q.is-error .sx-q-error { display: block; }

/* 선택 칩 */
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip { position: relative; margin: 0; }
.sx-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.sx-chip span {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; min-height: 42px;
	font-size: 14.5px; font-weight: 600; color: var(--sx-text-2); background: var(--sx-surface);
	border: 1px solid var(--sx-border-strong); border-radius: 999px; cursor: pointer; user-select: none;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.sx-chip span:hover { background: var(--sx-surface-2); border-color: #aeb9c4; }
.sx-chip input:checked + span { background: var(--sx-primary-soft); border-color: var(--sx-primary); color: var(--sx-primary-ink); font-weight: 750; box-shadow: 0 0 0 1px var(--sx-primary) inset; }
.sx-chip input:checked + span::before { content: ''; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b8f7e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); }
.sx-chip input:focus-visible + span { box-shadow: var(--sx-ring); }

.sx-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--sx-border); }
.sx-inline label { margin: 0; font-size: 14px; font-weight: 650; color: var(--sx-text-2); }
.sx-inline .form-control { width: auto; min-width: 180px; }
.sx-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--sx-text-2); cursor: pointer; }

/* 오른쪽 요약 */
.sx-aside { position: sticky; top: calc(var(--sx-header-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
.sx-panel { padding: 20px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-panel h3 { margin: 0 0 12px; font-size: 15px; font-weight: 750; }
.sx-meter { height: 6px; margin: 4px 0 14px; background: #e9eef2; border-radius: 99px; overflow: hidden; }
.sx-meter i { display: block; height: 100%; width: 0; background: var(--sx-primary); border-radius: 99px; transition: width .25s ease; }
.sx-sum { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sx-sum li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.sx-sum .k { flex: 0 0 62px; color: var(--sx-muted); font-weight: 600; }
.sx-sum .v { min-width: 0; color: var(--sx-text); font-weight: 650; word-break: keep-all; }
.sx-sum .v.is-empty { color: #a3adb7; font-weight: 500; }
.sx-tip { background: var(--sx-primary-soft); border-color: transparent; }
.sx-tip p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--sx-primary-ink); }
.sx-tip p + p { margin-top: 8px; }

/* 하단 고정 액션 바 */
.sx-actionbar { position: sticky; bottom: 0; z-index: 20; margin-top: 8px; padding: 14px 0 16px; background: linear-gradient(to top, var(--sx-bg) 70%, rgba(246, 248, 250, 0)); }
.sx-actionbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-md); }
.sx-actionbar-inner .hint { font-size: 13.5px; color: var(--sx-muted); }
.sx-actionbar-inner .btns { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 575px) { .sx-actionbar-inner .hint { display: none; } .sx-actionbar-inner .btns { width: 100%; } .sx-actionbar-inner .btns .btn { flex: 1; } }

/* 토스트 */
.sx-toast { position: fixed; left: 50%; bottom: 96px; z-index: 1080; transform: translate(-50%, 12px); opacity: 0; padding: 12px 20px; font-size: 14.5px; font-weight: 650; color: #fff; background: rgba(15, 26, 36, .92); border-radius: 999px; box-shadow: var(--sx-shadow-md); pointer-events: none; transition: opacity .25s, transform .25s; }
.sx-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* 휴대폰 인증 */
.sx-verify { display: grid; gap: 12px; }
.sx-verified { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--sx-ok-soft); border-radius: var(--sx-radius-sm); color: var(--sx-ok); font-weight: 700; }
.sx-verified b { color: var(--sx-text); font-weight: 750; letter-spacing: .01em; }
.sx-verified .btn { margin-left: auto; }
.sx-verify-row { display: flex; gap: 8px; }
.sx-verify-row .form-control { flex: 1; min-width: 0; }
.sx-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sx-danger); font-size: 13.5px; }
.sx-field-msg { margin: 6px 0 0; font-size: 13px; color: var(--sx-danger); min-height: 18px; }
.sx-field-msg.is-ok { color: var(--sx-ok); }
.sx-field-msg.is-info { color: var(--sx-muted); }

/* 접수 완료 */
.sx-done { max-width: 640px; margin: 0 auto; padding: 48px 28px 40px; text-align: center; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 24px; box-shadow: var(--sx-shadow-md); }
.sx-done-icon { width: 72px; height: 72px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sx-primary-soft); color: var(--sx-primary); }
.sx-done-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-done h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; }
.sx-done > p { margin: 0 0 28px; color: var(--sx-text-2); }
.sx-timeline { margin: 0 0 30px; padding: 0; list-style: none; text-align: left; display: grid; gap: 0; }
.sx-timeline li { position: relative; display: flex; gap: 14px; padding: 0 0 20px 0; }
.sx-timeline li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--sx-border); }
.sx-timeline .dot { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; background: #eceff3; color: #52606d; border-radius: 50%; z-index: 1; }
.sx-timeline li.is-now .dot { background: var(--sx-primary); color: #fff; }
.sx-timeline b { display: block; font-size: 15px; font-weight: 750; }
.sx-timeline span { font-size: 13.5px; color: var(--sx-muted); }
.sx-done .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ========== 랜딩 (무료비교견적 소개) ========== */
.sx-hero { padding: 72px 0 56px; background: radial-gradient(900px 420px at 85% -10%, rgba(11, 143, 126, .14), transparent 60%), linear-gradient(180deg, #f1faf8 0%, #fff 100%); }
.sx-hero .eyebrow { display: inline-block; padding: 6px 14px; margin-bottom: 18px; font-size: 13.5px; font-weight: 700; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 999px; }
.sx-hero h1 { margin: 0 0 16px; font-size: clamp(30px, 4.4vw, 48px); font-weight: 850; letter-spacing: -0.035em; line-height: 1.2; word-break: keep-all; }
.sx-hero h1 em { font-style: normal; color: var(--sx-primary); }
.sx-hero p { margin: 0 0 28px; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; color: var(--sx-text-2); }
.sx-hero .sub { margin: 14px 0 0; font-size: 13.5px; color: var(--sx-muted); }
.sx-hero img { max-width: 100%; height: auto; border-radius: 24px; }
.sx-section { padding: 64px 0; }
.sx-section-title { margin: 0 0 8px; text-align: center; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.sx-section-sub { margin: 0 auto 36px; max-width: 560px; text-align: center; color: var(--sx-muted); }
.sx-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sx-how li { padding: 24px 22px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-how .n { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 14px; font-weight: 800; color: #fff; background: var(--sx-primary); border-radius: 50%; }
.sx-how b { display: block; margin-bottom: 4px; font-size: 16.5px; font-weight: 750; }
.sx-how span { font-size: 14px; line-height: 1.6; color: var(--sx-muted); }
@media (max-width: 991px) { .sx-how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sx-how { grid-template-columns: 1fr; } .sx-hero { padding: 40px 0 32px; } .sx-section { padding: 44px 0; } }
.sx-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 28px 0; }
.sx-feature + .sx-feature { border-top: 1px solid var(--sx-border); }
.sx-feature:nth-child(even) .txt { order: 2; }
.sx-feature h3 { margin: 0 0 10px; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; word-break: keep-all; }
.sx-feature p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--sx-text-2); }
.sx-feature img { width: 100%; height: auto; border-radius: 20px; }
@media (max-width: 767px) { .sx-feature { grid-template-columns: 1fr; gap: 18px; } .sx-feature:nth-child(even) .txt { order: 0; } }
.sx-cta-band { padding: 44px 24px; text-align: center; color: #fff; background: linear-gradient(145deg, #0fa593 0%, #0a7568 60%, #065348 100%); border-radius: 28px; }
.sx-cta-band h2 { margin: 0 0 8px; color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.sx-cta-band p { margin: 0 0 22px; color: rgba(255, 255, 255, .82); }
.sx-cta-band .btn { background: #fff; border-color: #fff; color: var(--sx-primary-ink); }
.sx-cta-band .btn:hover { background: #effaf8; color: var(--sx-primary-ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ========== 의뢰 카드 (마이페이지 목록) — 기업관리자 카드와 같은 모양 ========== */
body.sx .cp-card { padding: 20px 22px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); transition: box-shadow .18s ease, border-color .18s ease; }
body.sx .cp-card:hover { box-shadow: var(--sx-shadow-md); border-color: var(--sx-border-strong); }
body.sx .cp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.sx .cp-card-title { margin: 8px 0 0; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.4; color: var(--sx-text); word-break: keep-all; }
body.sx .cp-card-money { flex-shrink: 0; text-align: right; }
body.sx .cp-card-money small { display: block; font-size: 12px; font-weight: 600; color: var(--sx-muted); }
body.sx .cp-card-money b { font-size: 18px; font-weight: 780; letter-spacing: -0.02em; color: var(--sx-text); white-space: nowrap; }
body.sx .cp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.sx .cp-tag { padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 999px; }
body.sx .cp-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 14px 0 0; }
body.sx .cp-meta dt { display: inline; margin: 0 6px 0 0; font-size: 13px; font-weight: 600; color: var(--sx-muted); }
body.sx .cp-meta dd { display: inline; margin: 0; font-size: 13.5px; color: var(--sx-text-2); }
body.sx .cp-summary { margin: 14px 0 0; padding: 12px 14px; font-size: 14px; line-height: 1.65; color: var(--sx-text-2); background: var(--sx-surface-2); border-radius: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.sx .cp-card-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 767px) { body.sx .cp-card-head { flex-direction: column; gap: 8px; } body.sx .cp-card-money { text-align: left; } body.sx .cp-meta { grid-template-columns: 1fr; } }

/* ========== 목록형 화면 공통 (대행사 리스트 / 포트폴리오) ========== */
.sx-listpage { padding: 32px 0 24px; background: var(--sx-bg); min-height: 70vh; }
.sx-pagehead { margin-bottom: 20px; }
.sx-pagehead h1 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.sx-pagehead p { margin: 0; color: var(--sx-muted); font-size: 15px; }

.sx-searchcard { margin-bottom: 18px; padding: 18px 20px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-searchrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
@media (max-width: 767px) { .sx-searchrow { grid-template-columns: 1fr; } }
.sx-searchrow label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--sx-muted); }
.sx-searchbox { position: relative; }
.sx-searchbox svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--sx-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.sx-searchbox input { padding-left: 42px; padding-right: 92px; }
.sx-searchbox button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 16px; border: 0; border-radius: 9px; font-size: 14px; font-weight: 700; color: #fff; background: var(--sx-primary); cursor: pointer; }
.sx-searchbox button:hover { background: var(--sx-primary-hover); }

.sx-toolrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--sx-border); }
.sx-seg { display: inline-flex; gap: 4px; padding: 4px; background: #eceff3; border-radius: 12px; max-width: 100%; overflow-x: auto; }
.sx-seg a { display: inline-flex; align-items: center; padding: 7px 14px; font-size: 14px; font-weight: 650; color: var(--sx-muted) !important; text-decoration: none !important; border-radius: 9px; white-space: nowrap; transition: background-color .15s, color .15s; }
.sx-seg a:hover { color: var(--sx-text) !important; }
.sx-seg a.is-active { background: #fff; color: var(--sx-text) !important; box-shadow: var(--sx-shadow-sm); }

/* 필터 칩 (링크) */
.sx-filter { margin-bottom: 18px; padding: 18px 20px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-filter-row { display: flex; gap: 14px; align-items: flex-start; }
.sx-filter-row + .sx-filter-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--sx-border); }
.sx-filter-label { flex: 0 0 64px; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--sx-text-2); }
.sx-fchips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sx-fchip { display: inline-flex; align-items: center; padding: 6px 13px; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--sx-text-2) !important; text-decoration: none !important; background: var(--sx-surface); border: 1px solid var(--sx-border-strong); border-radius: 999px; transition: background-color .15s, border-color .15s, color .15s; }
.sx-fchip:hover { background: var(--sx-surface-2); border-color: #b3bec8; }
.sx-fchip.is-active { background: var(--sx-primary); border-color: var(--sx-primary); color: #fff !important; }
@media (max-width: 767px) {
	.sx-filter { padding: 14px 16px; }
	/* 세로로 쌓을 때 align-items:flex-start 이면 칩 줄이 내용 폭만큼 늘어나 화면 밖으로 밀려난다 → 폭을 부모에 맞추고 그 안에서만 가로 스크롤 */
	.sx-filter-row { flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
	.sx-filter-label { flex-basis: auto; padding-top: 0; }
	.sx-fchips { flex-wrap: nowrap; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 16px 6px 0; scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
	.sx-fchips::-webkit-scrollbar { display: none; }
	.sx-fchip { flex: 0 0 auto; }
}

.sx-count { margin: 4px 0 14px; font-size: 14px; color: var(--sx-muted); }

/* 카드 그리드 */
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sx-pcard { position: relative; display: flex; flex-direction: column; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.sx-pcard:hover { box-shadow: var(--sx-shadow-md); border-color: var(--sx-border-strong); transform: translateY(-3px); }
.sx-pcard-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.sx-pcard-top .sx-check { font-size: 13px; }
.sx-scrap { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #a3adb7 !important; background: var(--sx-surface-2); border-radius: 10px; transition: background-color .15s, color .15s; }
.sx-scrap:hover { background: #e9eef2; }
.sx-scrap .text-primary { color: var(--sx-primary) !important; }
.sx-pcard-link { display: flex; flex-direction: column; flex: 1; color: inherit !important; text-decoration: none !important; }
.sx-pcard-logo { display: flex; align-items: center; justify-content: center; height: 140px; margin: 0 12px; background: var(--sx-surface-2); border-radius: 12px; }
.sx-pcard-logo img { max-width: 70%; max-height: 90px; object-fit: contain; }
.sx-pcard-body { padding: 14px 16px 16px; }
.sx-pcard-name { margin: 0 0 6px; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; color: var(--sx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sx-muted); }
.sx-rating .stars { color: #f5a524; letter-spacing: -1px; font-size: 14px; }
.sx-rating b { color: var(--sx-text); font-weight: 750; }
.sx-pcard-meta { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; color: var(--sx-text-2); }
.sx-pcard-meta .k { color: var(--sx-muted); margin-right: 6px; }

/* 포트폴리오 카드 */
.sx-pf { display: flex; flex-direction: column; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); overflow: hidden; box-shadow: var(--sx-shadow-xs); transition: box-shadow .2s, transform .2s, border-color .2s; color: inherit !important; text-decoration: none !important; }
.sx-pf:hover { box-shadow: var(--sx-shadow-md); transform: translateY(-3px); border-color: var(--sx-border-strong); }
.sx-pf-img { aspect-ratio: 4 / 3; background: var(--sx-surface-2); overflow: hidden; }
.sx-pf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sx-pf:hover .sx-pf-img img { transform: scale(1.04); }
.sx-pf-body { padding: 14px 16px 16px; }
.sx-pf-title { margin: 0 0 4px; font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--sx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-pf-sub { font-size: 13px; color: var(--sx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-pf-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sx-pf-tags span { padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 999px; }

.sx-more { margin: 28px 0 0; text-align: center; }
.sx-empty { max-width: 420px; margin: 40px auto; padding: 44px 24px; text-align: center; background: var(--sx-surface); border: 1px dashed var(--sx-border-strong); border-radius: var(--sx-radius); color: var(--sx-muted); }
.sx-empty b { display: block; margin-bottom: 6px; font-size: 16px; color: var(--sx-text); }

/* 대행사 비교 트레이 (하단 고정) */
.sx-compare { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; padding: 12px 0; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--sx-border); box-shadow: 0 -10px 30px rgba(15, 26, 36, .08); }
.sx-compare-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sx-compare-title { font-size: 14px; font-weight: 750; white-space: nowrap; }
.sx-compare-title small { display: block; font-size: 12px; font-weight: 500; color: var(--sx-muted); }
.sx-compare-items { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; padding: 6px 6px 2px 0; }
.sx-compare-item { position: relative; width: 64px; height: 64px; flex: 0 0 auto; background: #fff center/contain no-repeat; border: 1px solid var(--sx-border); border-radius: 12px; }
.sx-compare-item button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #0f1a24; color: #fff; font-size: 14px; line-height: 22px; cursor: pointer; }
.sx-compare-actions { display: flex; gap: 8px; margin-left: auto; }

/* ========== AI 대행사 매칭 (설문 마법사) — matching.css 위에 덮어쓴다. 동작(JS)은 그대로 ========== */
body.sx .matching, body.sx .matching .section { background: var(--sx-bg); }
body.sx .matching .matching_con { top: 56px; padding: 24px 0 140px; }
body.sx .matching .matching_con .inner { padding: 0 20px 120px; }

/* 질문 제목 / 안내 */
body.sx .matching .intro .title { font-size: clamp(26px, 4vw, 38px); line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; color: var(--sx-text); }
body.sx .matching .intro .desc { margin-top: 12px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--sx-muted); }
body.sx .matching .req, body.sx .matching .cho { margin-left: 8px; padding: 3px 10px; font-size: 12px; font-weight: 700; line-height: 1.4; border-radius: 999px; vertical-align: middle; }
body.sx .matching .req { color: var(--sx-danger); background: var(--sx-danger-soft); }
body.sx .matching .cho { color: var(--sx-muted); background: #eceff3; }

/* 진행 표시 */
body.sx .matching .step_state { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 2; width: min(480px, 90%); margin: 0; }
body.sx .matching .step_state .li { height: 6px; background: #dde3e9; }
body.sx .matching .step_state .li.on { background: var(--sx-primary); }

/* 이전/다음 버튼 */
body.sx .matching .btn_group { max-width: 460px; margin-top: 40px; gap: 10px; }
body.sx .matching .btn_group .anchor { height: 54px; font-size: 16px; font-weight: 700; border-radius: 14px; border-width: 1px; border-style: solid; text-decoration: none; }
body.sx .matching .btn_group .anchor.style_1,
body.sx .matching .btn_group .anchor.style_3 { background: var(--sx-primary); border-color: var(--sx-primary); color: #fff; }
body.sx .matching .btn_group .anchor.style_1:hover,
body.sx .matching .btn_group .anchor.style_3:hover { background: var(--sx-primary-hover); border-color: var(--sx-primary-hover); color: #fff; box-shadow: var(--sx-shadow-md); }
body.sx .matching .btn_group .anchor.style_2 { background: #fff; border-color: var(--sx-border-strong); color: var(--sx-text-2); }
body.sx .matching .btn_group .anchor.style_2:hover { background: var(--sx-surface-2); border-color: #b3bec8; color: var(--sx-text); }

/* 입력 */
body.sx .matching .matching_con input { padding: 12px 16px; border: 1px solid var(--sx-border-strong); border-radius: 12px; color: var(--sx-text); font-size: 16px; font-weight: 500; background: #fff; }
body.sx .matching .matching_con input:focus { border-color: var(--sx-primary); box-shadow: var(--sx-ring); }
body.sx .matching .item.selectbox select { height: 50px; border: 1px solid var(--sx-border-strong); border-radius: 12px; font-size: 16px; }
body.sx .matching .item textarea { border: 1px solid var(--sx-border-strong); border-radius: 12px; font-size: 15px; line-height: 1.6; }
body.sx .matching .item textarea:focus { border-color: var(--sx-primary); box-shadow: var(--sx-ring); }
body.sx .matching .item .check_list label { font-size: 16px; }
body.sx #client_result { width: 100%; border: 1px solid var(--sx-border); border-radius: 12px; box-shadow: var(--sx-shadow-md); }
body.sx #client_result div:hover { background: var(--sx-primary-soft); color: var(--sx-primary-ink); }
body.sx #selected_clients .tag { background: var(--sx-primary-soft); color: var(--sx-primary-ink); font-weight: 650; }

/* 선택 칩 (산업군·서비스 등) */
body.sx .matching .category_ul { gap: 8px; }
body.sx .matching .form-selector { flex: 0 0 auto; max-width: none; min-width: 0; height: auto; margin: 0; padding: 0; font-size: 15px; font-weight: 600; border: 1px solid var(--sx-border-strong); border-radius: 999px; background: #fff; color: var(--sx-text-2); }
body.sx .matching .form-selector:hover { background: var(--sx-surface-2); border-color: #aeb9c4; }
body.sx .matching .form-selector span { padding: 11px 18px; font-size: 15px; }
body.sx .matching .form-selector input[type="checkbox"]:checked + span { width: auto; height: auto; display: block; background: var(--sx-primary-soft); color: var(--sx-primary-ink); border-radius: 999px; font-weight: 750; }
body.sx .matching .form-selector:has(input:checked) { border-color: var(--sx-primary); box-shadow: 0 0 0 1px var(--sx-primary) inset; }

/* 선택 카드 (규모 등) */
body.sx .matching .radio-selector { gap: 12px; margin-top: 8px; }
body.sx .matching .radio-selector label { width: 180px; height: 84px; margin: 0; font-size: 16px; font-weight: 650; border: 1px solid var(--sx-border-strong); border-radius: 16px; color: var(--sx-text-2); }
body.sx .matching .radio-selector input[type="radio"]:checked + span { background: var(--sx-primary-soft); color: var(--sx-primary-ink); border-radius: 16px; font-weight: 750; box-shadow: 0 0 0 1.5px var(--sx-primary) inset; }
body.sx .ul.type_box { gap: 12px; flex-wrap: wrap; }
body.sx .ul.type_box label { width: 160px; height: 110px; font-size: 16px; border: 1px solid var(--sx-border-strong); border-radius: 16px; }
body.sx .ul.type_box input[type="radio"]:checked + label { background: var(--sx-primary-soft); border-color: var(--sx-primary); color: var(--sx-primary-ink); }
body.sx .matching .item.radio .ez-radio + .label { font-size: 17px; font-weight: 650; border: 1px solid var(--sx-border-strong); border-radius: 16px; color: var(--sx-text-2); }
body.sx .matching .item.radio .ez-selected + .label { background: var(--sx-primary-soft); border-color: var(--sx-primary); color: var(--sx-primary-ink); box-shadow: 0 0 0 1px var(--sx-primary) inset; }
body.sx .matching .item.radio.style_1 .li { height: 120px; }
body.sx .matching .item.radio.style_2 .li { height: 84px; }

/* 로딩 / 결과 */
body.sx .loading-bar-container { height: 8px; background: #dde3e9; border-radius: 99px; }
body.sx .infinite-bar { background: linear-gradient(to right, #0fa593, #0a7568); border-radius: 99px; }
body.sx .matching .result .intro .title .not { font-size: 22px; font-weight: 700; color: var(--sx-muted); }
body.sx .matching .result .item .box { background: #fff; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); transition: box-shadow .2s, transform .2s; }
body.sx .matching .result .item .box:hover { box-shadow: var(--sx-shadow-md); transform: translateY(-3px); }
body.sx .matching .result .item .info .subject { font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
@media (max-width: 767px) {
	body.sx .matching .result .item { padding: 0 16px; }
	body.sx .matching .result .item .box { width: 100%; margin-right: 0; }
	body.sx .matching .radio-selector label, body.sx .ul.type_box label { width: calc(50% - 6px); }
}

/* ========== 로그인 / 회원가입 ========== */
.sx-auth { padding: 40px 0 24px; background: var(--sx-bg); min-height: 70vh; }
.sx-authwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 980px; margin: 0 auto; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 24px; box-shadow: var(--sx-shadow-md); overflow: hidden; }
.sx-authwrap.is-single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
@media (max-width: 860px) { .sx-authwrap { grid-template-columns: 1fr; } .sx-authwrap .sx-authhero { display: none; } }
.sx-authhero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; color: #eafaf7; background: radial-gradient(700px 420px at 15% 0%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(150deg, #0fa593 0%, #0a7568 58%, #065348 100%); }
.sx-authhero::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 320px; height: 320px; border: 44px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.sx-authhero h2 { margin: 0 0 18px; color: #fff; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; }
.sx-authhero ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; position: relative; z-index: 1; }
.sx-authhero li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: rgba(234, 250, 247, .85); }
.sx-authhero li b { display: block; color: #fff; font-size: 15.5px; font-weight: 700; }
.sx-authhero li .dot { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: #065f53; background: #d6f5ee; border-radius: 50%; }
.sx-authhero small { color: rgba(234, 250, 247, .6); font-size: 12.5px; position: relative; z-index: 1; }
.sx-authcard { padding: 40px 40px 32px; }
@media (max-width: 575px) { .sx-authcard { padding: 28px 20px 24px; } }
.sx-authcard h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.sx-authcard .sub { margin: 0 0 24px; color: var(--sx-muted); font-size: 14.5px; }
.sx-authcard .sub a { font-weight: 700; }

.sx-sns { display: grid; gap: 8px; }
.sx-sns a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; font-size: 15px; font-weight: 700; border-radius: 12px; text-decoration: none !important; border: 1px solid transparent; transition: filter .15s, box-shadow .15s; }
.sx-sns a:hover { filter: brightness(.97); box-shadow: var(--sx-shadow-sm); }
.sx-sns .kakao { background: #fee500; color: #191919 !important; }
.sx-sns .naver { background: #03c75a; color: #fff !important; }
.sx-sns .google { background: #fff; color: var(--sx-text) !important; border-color: var(--sx-border-strong); }
.sx-sns .mark { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; border-radius: 6px; }
.sx-sns .kakao .mark { background: #191919; color: #fee500; }
.sx-sns .naver .mark { background: #fff; color: #03c75a; }
.sx-sns .google .mark { background: #fff; color: #4285f4; border: 1px solid var(--sx-border-strong); }
.sx-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 13px; color: var(--sx-muted); }
.sx-divider::before, .sx-divider::after { content: ''; flex: 1; height: 1px; background: var(--sx-border); }

.sx-field { margin-bottom: 14px; }
.sx-field > label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 650; color: var(--sx-text-2); }
.sx-field .form-control { height: 48px; }
.sx-field .text-red-300 { display: block; margin-top: 6px; font-size: 13px; color: var(--sx-danger) !important; }
.sx-field .hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--sx-muted); }
.sx-field .inline-link { float: right; font-size: 13px; font-weight: 600; color: var(--sx-muted) !important; }
.sx-submit { width: 100%; height: 52px; margin-top: 6px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 700; color: #fff; background: var(--sx-primary); cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .1s; }
.sx-submit:hover { background: var(--sx-primary-hover); box-shadow: var(--sx-shadow-md); }
.sx-submit:active { transform: translateY(1px); }
.sx-authlinks { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sx-border); text-align: center; font-size: 14px; color: var(--sx-muted); }
.sx-authlinks a { font-weight: 700; }

/* 약관 동의 */
.sx-terms { margin: 4px 0 18px; padding: 16px 18px; background: var(--sx-surface-2); border: 1px solid var(--sx-border); border-radius: 14px; }
.sx-terms label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--sx-text-2); cursor: pointer; }
.sx-terms label + label { margin-top: 10px; }
.sx-terms input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sx-primary); }
.sx-terms .all { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--sx-border); font-weight: 750; color: var(--sx-text); }
.sx-terms .req { color: var(--sx-primary-ink); font-weight: 700; }
.sx-terms .opt { color: var(--sx-muted); font-weight: 600; }
.sx-terms a { font-weight: 650; text-decoration: underline; }
.sx-terms .text-red-300 { display: block; margin-top: 8px; font-size: 13px; color: var(--sx-danger) !important; }

/* 로그인 팝업 (모달) */
.sx-poplogin { padding: 8px 8px 4px; }
.sx-poplogin h5 { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.4; text-align: center; }
.sx-poplogin .sub { margin: 0 0 18px; text-align: center; color: var(--sx-muted); font-size: 14px; }

/* ========== 마이페이지: 받은 견적 비교 ========== */
.sx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
@media (max-width: 767px) { .sx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-stat { padding: 16px 18px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-stat small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--sx-muted); }
.sx-stat b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sx-stat.is-low b { color: var(--sx-ok); }
.sx-stat.is-high b { color: var(--sx-danger); }
.sx-stat.is-avg b { color: var(--sx-primary-ink); }

.sx-deadline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 16px; padding: 14px 18px; background: var(--sx-primary-soft); border-radius: var(--sx-radius); color: var(--sx-primary-ink); font-size: 14.5px; }
.sx-deadline.is-over { background: #eceff3; color: var(--sx-text-2); }
.sx-deadline b { font-weight: 750; }
.sx-deadline .dday { margin-left: auto; padding: 3px 12px; font-size: 13px; font-weight: 800; color: #fff; background: var(--sx-primary); border-radius: 999px; }
.sx-deadline.is-over .dday { background: #7b8792; }

.sx-sectionhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 14px; }
.sx-sectionhead h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sx-sectionhead h2 span { color: var(--sx-primary); }

.sx-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sx-quote { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); transition: box-shadow .2s, border-color .2s, transform .2s; }
.sx-quote:hover { box-shadow: var(--sx-shadow-md); border-color: var(--sx-border-strong); transform: translateY(-2px); }
.sx-quote.is-matched { border-color: var(--sx-primary); box-shadow: 0 0 0 1px var(--sx-primary) inset; }
.sx-quote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sx-quote-name { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.sx-quote-name.is-masked { color: #98a4af; letter-spacing: .12em; }
.sx-quote-meta { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; color: var(--sx-muted); }
.sx-quote-meta b { color: var(--sx-text-2); font-weight: 650; }
.sx-quote-price { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sx-border); }
.sx-quote-price small { display: block; font-size: 12.5px; color: var(--sx-muted); }
.sx-quote-price b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sx-quote-price span { font-size: 12.5px; color: var(--sx-muted); margin-left: 4px; }
.sx-quote .btn { width: 100%; }
.sx-note { margin: 14px 0 0; padding: 14px 16px; background: var(--sx-surface-2); border-radius: 12px; font-size: 13.5px; line-height: 1.7; color: var(--sx-text-2); }
.sx-note b { color: var(--sx-text); }
.sx-note ul { margin: 6px 0 0; padding-left: 18px; }
.sx-note li { margin: 2px 0; }
.sx-chartcard { padding: 20px; margin: 0 0 8px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }

/* ========== 입력칸 + 버튼 묶음 (휴대폰 인증요청 / 인증번호 확인 / 변경) ========== */
body.sx .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; }
body.sx .input-group > .form-control { flex: 1 1 auto; min-width: 0; width: 1%; }
body.sx .input-group > .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 84px; padding: 0 16px; font-size: 14.5px; white-space: nowrap; border-radius: 0 12px 12px 0; margin-left: -1px; }
body.sx .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.sx .input-group > .btn.disabled { opacity: .6; pointer-events: none; }
body.sx .sx-field label small { font-size: 12.5px; font-weight: 500; color: var(--sx-muted); }
body.sx .sx-field .text-red-300:empty { display: none; }

/* 마이페이지 가로 메뉴(모바일): 스크롤바 막대는 숨기고 손가락으로 밀어서 이동 */
@media (max-width: 991px) {
	.sx-side-nav { scrollbar-width: none; -ms-overflow-style: none; }
	.sx-side-nav::-webkit-scrollbar { display: none; }
}

/* ========== 대행사 비교 (트레이 / 알림 / 결과 표) ========== */
.sx-toast { position: fixed; left: 50%; bottom: 110px; z-index: 100000; max-width: calc(100vw - 32px); padding: 12px 18px; font-size: 14px; font-weight: 600; color: #fff; text-align: center; background: rgba(15, 26, 36, .92); border-radius: 12px; box-shadow: var(--sx-shadow-md); opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.sx-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

.sx-compare-chip { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; max-width: 190px; padding: 6px 30px 6px 6px; background: #fff; border: 1px solid var(--sx-border); border-radius: 12px; }
.sx-compare-chip .logo { width: 40px; height: 40px; flex-shrink: 0; background: #fff center/contain no-repeat; border-radius: 8px; }
.sx-compare-chip .nm { min-width: 0; font-size: 13px; font-weight: 650; color: var(--sx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-compare-chip button { position: absolute; top: 50%; right: 6px; width: 22px; height: 22px; margin-top: -11px; padding: 0; border: 0; border-radius: 50%; background: var(--sx-surface-2); color: var(--sx-text-2); font-size: 15px; line-height: 22px; cursor: pointer; }
.sx-compare-chip button:hover { background: #e3e9ee; }
@media (max-width: 575px) {
	/* 모바일 트레이: [비교 n/4 ........ 비교하기 | 취소] 한 줄 + 아래에 선택한 대행사 칩 */
	.sx-compare { padding: 10px 0 12px; }
	.sx-compare-inner { gap: 8px 10px; }
	.sx-compare-title { flex: 1 1 auto; width: auto; min-width: 0; }
	.sx-compare-title small { display: none; }
	.sx-compare-actions { order: 2; width: auto; margin-left: auto; gap: 6px; }
	.sx-compare-actions .btn { padding: .5rem .9rem; font-size: 14px; white-space: nowrap; }
	.sx-compare-items { order: 3; flex: 1 1 100%; width: 100%; scrollbar-width: none; padding: 2px 0; }
	.sx-compare-items::-webkit-scrollbar { display: none; }
	.sx-compare-chip { max-width: 160px; }
	.sx-toast { bottom: 150px; }
}

.sx-cmp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.sx-cmp-hint { display: none; margin: 0 0 8px; font-size: 12.5px; color: var(--sx-muted); }
.sx-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-cmp { width: 100%; min-width: calc(120px + var(--n, 4) * 210px); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sx-cmp th, .sx-cmp td { padding: 16px 16px; vertical-align: top; text-align: left; font-size: 14.5px; line-height: 1.55; color: var(--sx-text-2); border-bottom: 1px solid var(--sx-border); word-break: keep-all; overflow-wrap: anywhere; }
.sx-cmp td + td, .sx-cmp th + th { border-left: 1px solid var(--sx-border); }
.sx-cmp tbody tr:last-child > * { border-bottom: 0; }
.sx-cmp .sx-cmp-label { position: sticky; left: 0; z-index: 2; width: 120px; background: var(--sx-surface-2); font-size: 13px; font-weight: 700; color: var(--sx-muted); }
.sx-cmp thead th { background: var(--sx-surface); }
.sx-cmp thead .sx-cmp-label { background: var(--sx-surface-2); }
.sx-cmp-head { text-align: center !important; }
.sx-cmp-logo { display: flex; align-items: center; justify-content: center; height: 84px; margin: 0 auto 10px; background: var(--sx-surface-2); border-radius: 14px; }
.sx-cmp-logo img { max-width: 70%; max-height: 56px; object-fit: contain; }
.sx-cmp-name { display: block; font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--sx-text) !important; text-decoration: none !important; }
.sx-cmp-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sx-cmp-rate .stars { color: #f5a524; letter-spacing: -1px; }
.sx-cmp-rate b { font-size: 18px; font-weight: 800; color: var(--sx-text); }
.sx-cmp-best { padding: 2px 8px; font-size: 11.5px; font-style: normal; font-weight: 700; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 999px; }
.sx-cmp-sub { margin-top: 2px; font-size: 12.5px; color: var(--sx-muted); }
.sx-cmp-none { color: #aab4be; }
.sx-cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-cmp-chip { padding: 4px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--sx-text-2); background: var(--sx-surface-2); border: 1px solid var(--sx-border); border-radius: 999px; }
.sx-cmp-chip.is-blue { color: #1d4ed8; background: #e8f0ff; border-color: #c9dafd; }
.sx-cmp-chip.is-green { color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-color: #bfe6df; }
.sx-cmp-actions-row td { text-align: center; }
.sx-cmp-actions-row .btn { width: 100%; }
.sx-cmp.only-diff tbody tr.is-same { display: none; }
.sx-cmp-empty { margin-top: 14px; padding: 16px; text-align: center; font-size: 14px; color: var(--sx-muted); background: var(--sx-surface); border: 1px dashed var(--sx-border-strong); border-radius: var(--sx-radius); }
@media (max-width: 767px) {
	.sx-cmp-hint { display: block; }
	.sx-cmp { min-width: calc(92px + var(--n, 4) * 180px); }
	.sx-cmp th, .sx-cmp td { padding: 12px; font-size: 14px; }
	.sx-cmp .sx-cmp-label { width: 92px; font-size: 12.5px; }
}

/* ========== 모바일 가로 스크롤 방지 ========== */
/* .row.g-5 는 좌우로 24px 튀어나오는데 컨테이너 안쪽 여백은 12px 이라 12px 가 화면 밖으로 나간다 → 좁은 화면에서는 간격을 줄인다 */
@media (max-width: 1199px) {
	body.sx .row.g-5, body.sx .row.gx-5 { --bs-gutter-x: 1.5rem; }
}
/* 혹시 모르는 곳에서 튀어나온 요소가 있어도 화면 전체가 좌우로 흔들리지 않게 한다 (clip 은 sticky 를 깨지 않는다) */
body.sx #wrapper { overflow-x: clip; }
body.sx img, body.sx video, body.sx iframe { max-width: 100%; }

/* ========== 의뢰 내용 AI 작성 ========== */
.sx-ai-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sx-ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; color: var(--sx-primary-ink); background: linear-gradient(135deg, #e5f6f3, #eef0ff); border: 1px solid #bfe6df; border-radius: 999px; cursor: pointer; transition: box-shadow .15s, transform .1s, opacity .15s; }
.sx-ai-btn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(11, 143, 126, .18); }
.sx-ai-btn:active:not(:disabled) { transform: translateY(1px); }
.sx-ai-btn svg { color: var(--sx-primary); }
.sx-ai-btn:disabled { cursor: progress; opacity: .8; }
.sx-ai-btn.is-busy svg { animation: sx-ai-spin 1.1s linear infinite; }
@keyframes sx-ai-spin { to { transform: rotate(360deg); } }
.sx-ai-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--sx-muted); }
.sx-ai-note.is-ok { color: var(--sx-primary-ink); }
.sx-ai-note.is-warn { color: var(--sx-danger); }
textarea.sx-ai-filled { animation: sx-ai-flash 1.4s ease-out; }
@keyframes sx-ai-flash { 0% { box-shadow: 0 0 0 4px rgba(11, 143, 126, .35); background: #f2fbf9; } 100% { box-shadow: none; background: #fff; } }

/* ========== 테마의 section 기본 여백(PC 100px / 모바일 80px)이 우리 구역 여백을 덮어쓰던 문제 ========== */
/* core.css 의 `body:not(.layout-admin) section` 이 더 구체적이라 .sx-* 의 padding 이 무시되었다 → 같은 선택자 위에 다시 지정 */
body.sx section.sx-flow { padding: 36px 0 24px; }
body.sx section.sx-listpage { padding: 32px 0 24px; }
body.sx section.sx-auth { padding: 40px 0 24px; }
body.sx section.sx-hero { padding: 72px 0 56px; }
body.sx section.sx-section { padding: 64px 0; }
body.sx section.sx-compare { padding: 12px 0; }
@media (max-width: 575px) {
	body.sx section.sx-hero { padding: 40px 0 32px; }
	body.sx section.sx-section { padding: 44px 0; }
	body.sx section.sx-compare { padding: 10px 0 12px; }
}

/* ========== 이용안내 (/guide) ========== */
body.sx section.sx-guide-hero { padding: 48px 0 28px; background: radial-gradient(900px 380px at 85% -20%, rgba(11, 143, 126, .14), transparent 60%), linear-gradient(180deg, #f1faf8 0%, #fff 100%); }
.sx-guide-hero .eyebrow { display: inline-block; padding: 6px 14px; margin-bottom: 14px; font-size: 13.5px; font-weight: 700; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 999px; }
.sx-guide-hero h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 40px); font-weight: 850; letter-spacing: -0.035em; }
.sx-guide-hero p { margin: 0 0 22px; font-size: 16px; color: var(--sx-text-2); }
.sx-guide-tabs a { padding: 9px 22px; font-size: 15px; }
body.sx section.sx-guide-sec { padding: 48px 0; }
.sx-guide-pane[hidden], .sx-faq[hidden] { display: none; }

.sx-guide-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 40px; }
.sx-guide-nums > div { padding: 16px 12px; text-align: center; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-guide-nums b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--sx-primary-ink); }
.sx-guide-nums span { font-size: 13px; color: var(--sx-muted); }

.sx-gsteps { position: relative; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; }
.sx-gsteps > li { position: relative; display: flex; gap: 18px; padding-bottom: 26px; }
.sx-gsteps > li:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 2px; background: var(--sx-border-strong); }
.sx-gsteps .n { flex: 0 0 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; background: var(--sx-primary); border-radius: 50%; box-shadow: 0 0 0 5px var(--sx-primary-soft); }
.sx-gsteps .b { flex: 1; min-width: 0; padding: 16px 20px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-gsteps h3 { margin: 0 0 6px; font-size: 18px; font-weight: 780; letter-spacing: -0.02em; }
.sx-gsteps h3 em { margin-left: 8px; padding: 2px 10px; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 999px; vertical-align: 2px; white-space: nowrap; }
.sx-gsteps p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sx-text-2); word-break: keep-all; }
.sx-gsteps ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sx-gsteps ul li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.6; color: var(--sx-text-2); word-break: keep-all; }
.sx-gsteps ul li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; background: var(--sx-primary); border-radius: 50%; }
.sx-guide-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

.sx-guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sx-guide-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; color: inherit !important; text-decoration: none !important; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); transition: box-shadow .2s, transform .2s, border-color .2s; }
.sx-guide-card:hover { box-shadow: var(--sx-shadow-md); transform: translateY(-3px); border-color: var(--sx-border-strong); }
.sx-guide-card .tag { align-self: flex-start; padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--sx-primary-ink); background: var(--sx-primary-soft); border-radius: 999px; }
.sx-guide-card b { font-size: 17px; font-weight: 780; letter-spacing: -0.02em; line-height: 1.4; }
.sx-guide-card > span:not(.tag) { flex: 1; font-size: 14px; line-height: 1.65; color: var(--sx-text-2); word-break: keep-all; }
.sx-guide-card i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--sx-primary); }

.sx-faq { display: grid; gap: 10px; }
.sx-faq details { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 14px; box-shadow: var(--sx-shadow-xs); }
.sx-faq details[open] { border-color: #bfe6df; }
.sx-faq summary { position: relative; padding: 16px 48px 16px 18px; font-size: 15.5px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--sx-muted); border-bottom: 2px solid var(--sx-muted); transform: rotate(45deg); transition: transform .2s; }
.sx-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sx-faq details > div { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.75; color: var(--sx-text-2); word-break: keep-all; }

.sx-guide-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 20px; box-shadow: var(--sx-shadow-sm); }
.sx-guide-help h3 { margin: 0 0 4px; font-size: 18px; font-weight: 780; }
.sx-guide-help p { margin: 0 0 12px; font-size: 14px; color: var(--sx-muted); }
.sx-guide-help .links { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-guide-help .contact { display: grid; gap: 2px; font-size: 14px; }
.sx-guide-help .contact b { margin-bottom: 4px; font-size: 13px; color: var(--sx-muted); }
.sx-guide-help .contact a { font-weight: 700; }
@media (max-width: 575px) {
	body.sx section.sx-guide-hero { padding: 32px 0 20px; }
	body.sx section.sx-guide-sec { padding: 32px 0; }
	.sx-gsteps > li { gap: 12px; }
	.sx-gsteps .n { flex-basis: 34px; height: 34px; font-size: 14px; }
	.sx-gsteps > li:not(:last-child)::before { left: 16px; top: 36px; }
	.sx-gsteps .b { padding: 14px 14px; }
	.sx-gsteps h3 { font-size: 16.5px; }
	.sx-gsteps h3 em { display: inline-block; margin: 4px 0 0; }
	.sx-guide-help { padding: 18px; }
	.sx-guide-help .links .btn { flex: 1 1 100%; }
}

/* ========== 이용약관 · 개인정보처리방침 (/notion/terms, /notion/privacy) ========== */
body.sx section.sx-doc-page { padding: 36px 0 24px; background: var(--sx-bg); }
.sx-doc-head { margin-bottom: 22px; }
.sx-doc-head .sx-seg { margin-bottom: 16px; }
.sx-doc-head h1 { margin: 0 0 8px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 850; letter-spacing: -0.035em; }
.sx-doc-head .meta { margin: 0; font-size: 14px; color: var(--sx-muted); }
.sx-doc-head .meta b { color: var(--sx-text-2); }

.sx-doc-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.sx-doc-toc { position: sticky; top: calc(var(--sx-header-h) + 16px); max-height: calc(100vh - var(--sx-header-h) - 40px); overflow-y: auto; padding: 8px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); }
.sx-doc-toc summary { padding: 10px 12px; font-size: 13px; font-weight: 800; color: var(--sx-muted); list-style: none; cursor: default; pointer-events: none; }
.sx-doc-toc summary::-webkit-details-marker { display: none; }
.sx-doc-toc nav { display: grid; gap: 1px; padding-bottom: 4px; }
.sx-doc-toc nav a { display: block; padding: 7px 12px; font-size: 13.5px; line-height: 1.45; color: var(--sx-text-2) !important; text-decoration: none !important; border-radius: 9px; }
.sx-doc-toc nav a:hover { background: var(--sx-surface-2); }
.sx-doc-toc nav a.is-current { color: var(--sx-primary-ink) !important; background: var(--sx-primary-soft); font-weight: 700; }

.sx-doc { padding: 36px 40px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-xs); color: var(--sx-text-2); font-size: 15px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.sx-doc > div { margin-bottom: 0 !important; padding: 28px 0; border-top: 1px solid var(--sx-border); }
.sx-doc > div:first-child { padding-top: 0; border-top: 0; }
.sx-doc > div:last-child { padding-bottom: 0; }
.sx-doc h2 { margin: 0 0 12px !important; scroll-margin-top: calc(var(--sx-header-h) + 20px); font-size: 19px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.45; color: var(--sx-text); }
.sx-doc h3, .sx-doc h4 { margin: 20px 0 8px !important; font-size: 16px; font-weight: 750; color: var(--sx-text); }
.sx-doc h5, .sx-doc h6 { margin: 16px 0 6px !important; font-size: 15px; font-weight: 750; color: var(--sx-text); }
.sx-doc p { margin: 0 0 10px; }
.sx-doc p.lead { font-size: 15.5px; font-weight: 400; color: var(--sx-text-2); }
.sx-doc ol, .sx-doc ul { margin: 0 0 10px; padding-left: 22px; }
.sx-doc li { margin-bottom: 6px !important; }
.sx-doc li > ul, .sx-doc li > ol { margin-top: 6px; }
.sx-doc a { color: var(--sx-primary-ink); text-decoration: underline; word-break: break-all; }
.sx-doc strong { color: var(--sx-text); }
.sx-doc .table-responsive { margin: 8px 0 14px; border: 1px solid var(--sx-border); border-radius: 12px; }
.sx-doc table { width: 100%; margin: 0; font-size: 13.5px; line-height: 1.6; border-collapse: collapse; }
.sx-doc table th, .sx-doc table td { padding: 10px 12px; vertical-align: top; border: 1px solid var(--sx-border); word-break: keep-all; }
.sx-doc table th { font-weight: 750; color: var(--sx-text); background: var(--sx-surface-2); text-align: left; }
.sx-doc .card { margin: 8px 0 12px; border: 1px solid var(--sx-border); border-radius: 12px; box-shadow: none; }
.sx-doc-foot { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }

@media (max-width: 991px) {
	body.sx section.sx-doc-page { padding: 24px 0 16px; }
	.sx-doc-layout { grid-template-columns: 1fr; gap: 14px; }
	.sx-doc-toc { position: static; max-height: none; padding: 0; overflow: visible; }
	.sx-doc-toc summary { position: relative; padding: 14px 44px 14px 16px; font-size: 14px; color: var(--sx-text); cursor: pointer; pointer-events: auto; }
	.sx-doc-toc summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--sx-muted); border-bottom: 2px solid var(--sx-muted); transform: rotate(45deg); transition: transform .2s; }
	.sx-doc-toc[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
	.sx-doc-toc nav { max-height: 46vh; overflow-y: auto; padding: 0 8px 8px; border-top: 1px solid var(--sx-border); }
	.sx-doc { padding: 22px 18px; font-size: 14.5px; }
	.sx-doc h2 { font-size: 17.5px; }
}
@media print {
	#header, #footer, .sx-footer, .sx-doc-toc, .sx-doc-head .sx-seg, .sx-doc-foot { display: none !important; }
	body.sx section.sx-doc-page { padding: 0; background: #fff; }
	.sx-doc { padding: 0; border: 0; box-shadow: none; }
}

/* 약관·방침 초안 표시 (공개 전 검토용) */
.sx-doc-draft { margin: 0 0 24px; padding: 16px 18px; background: #fff8e1; border: 1px solid #f3dc8c; border-radius: 12px; }
.sx-doc-draft b { color: #7a5200; }
.sx-doc-draft p { margin: 6px 0 0; font-size: 14px; line-height: 1.7; }
.sx-doc mark.sx-todo { padding: 1px 6px; font-size: .92em; font-weight: 700; color: #7a5200; background: #ffe69c; border-radius: 6px; }
.sx-doc p.sx-doc-note { padding: 10px 12px; font-size: 13.5px; background: var(--sx-surface-2); border-radius: 10px; }
@media (max-width: 575px) {
	.sx-doc .table-responsive { overflow-x: auto; }
	.sx-doc .table-responsive table { min-width: 540px; }
}