/* 청년 안전전세 검증 — 진단 폼·결과. 전부 .ysj-app 아래로 스코프. */
.ysj-app {
	--ysj-bg: #ffffff;
	--ysj-card: #ffffff;
	--ysj-soft: #f5f7fa;
	--ysj-line: #dfe3e8;
	--ysj-text: #1f2328;
	--ysj-muted: #5f6670;
	--ysj-primary: #1a5fd0;
	--ysj-primary-text: #ffffff;
	--ysj-track: #e8ebef;
	--ysj-danger: #d93025;
	--ysj-caution: #e8710a;
	--ysj-warning: #c48a00;
	--ysj-safe: #188038;
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	color: var(--ysj-text);
	font-size: 16px;
	line-height: 1.6;
	word-break: keep-all;
}
.ysj-app *, .ysj-app *::before, .ysj-app *::after { box-sizing: border-box; }
/* 테마 전역 div/p 여백 차단(§55-3) — 아래 여백 선언은 2-클래스로 특이도를 확보한다 */
.ysj-app div, .ysj-app p, .ysj-app ul, .ysj-app li, .ysj-app dl, .ysj-app dd, .ysj-app fieldset { margin: 0; }

.ysj-app .ysj-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.3; }
.ysj-app .ysj-lead { margin: 0 0 20px; color: var(--ysj-muted); }

.ysj-app .ysj-section {
	border: 1px solid var(--ysj-line);
	border-radius: 14px;
	padding: 18px 18px 6px;
	margin: 0 0 16px;
	background: var(--ysj-card);
	min-width: 0;
}
.ysj-app .ysj-section legend {
	padding: 0 6px;
	font-weight: 700;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ysj-app .ysj-step {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--ysj-primary); color: var(--ysj-primary-text);
	font-size: 13px; font-weight: 700;
}
.ysj-app .ysj-field { margin: 0 0 14px; }
.ysj-app .ysj-field > label, .ysj-app .ysj-label { display: block; font-weight: 600; margin: 0 0 6px; font-size: 15px; }
.ysj-app .ysj-hint { margin: 6px 0 0; color: var(--ysj-muted); font-size: 13.5px; }
.ysj-app .ysj-money-out { color: var(--ysj-primary); font-weight: 600; }
.ysj-app .ysj-money-out:empty { display: none; }

.ysj-app input[type="text"], .ysj-app input[type="number"], .ysj-app input[type="date"] {
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--ysj-line);
	border-radius: 10px;
	background: var(--ysj-bg);
	color: var(--ysj-text);
	font-size: 16px; /* iOS 확대 방지 */
	margin: 0;
}
.ysj-app input:focus { outline: none; border-color: var(--ysj-primary); box-shadow: 0 0 0 3px rgba(26, 95, 208, .18); }
.ysj-app input.ysj-invalid { border-color: var(--ysj-danger); box-shadow: 0 0 0 3px rgba(217, 48, 37, .15); }
.ysj-app .ysj-address { cursor: pointer; background: var(--ysj-soft); }

.ysj-app .ysj-address-row { display: flex; gap: 8px; }
.ysj-app .ysj-address-row input { flex: 1 1 auto; min-width: 0; }
.ysj-app .ysj-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ysj-app .ysj-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 18px;
	border-radius: 10px; border: 1px solid transparent;
	font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap;
	line-height: 1.2;
}
.ysj-app .ysj-btn-line { background: var(--ysj-bg); color: var(--ysj-primary); border-color: var(--ysj-primary); }
.ysj-app .ysj-btn-primary { width: 100%; background: var(--ysj-primary); color: var(--ysj-primary-text); }
.ysj-app .ysj-btn:disabled { opacity: .6; cursor: progress; }

.ysj-app .ysj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ysj-app .ysj-chip { position: relative; margin: 0; }
.ysj-app .ysj-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ysj-app .ysj-chip span {
	display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
	border: 1px solid var(--ysj-line); border-radius: 999px; background: var(--ysj-bg);
	cursor: pointer; font-size: 15px;
}
.ysj-app .ysj-chip input:checked + span { border-color: var(--ysj-primary); background: rgba(26, 95, 208, .08); color: var(--ysj-primary); font-weight: 700; }
.ysj-app .ysj-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(26, 95, 208, .25); }

.ysj-app .ysj-senior.is-emph { background: var(--ysj-soft); border-radius: 10px; padding: 10px 12px; }
.ysj-app .ysj-more { margin: 4px 0 14px; }
.ysj-app .ysj-more summary { cursor: pointer; color: var(--ysj-primary); font-weight: 600; padding: 6px 0; }
.ysj-app .ysj-more .ysj-field { margin-top: 10px; }

.ysj-app .ysj-postcode-layer {
	margin: 10px 0 0; border: 1px solid var(--ysj-line); border-radius: 12px; overflow: hidden; background: #fff;
}
.ysj-app .ysj-postcode-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--ysj-soft); font-weight: 700; }
.ysj-app .ysj-postcode-close { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; width: 40px; height: 40px; color: var(--ysj-text); }
.ysj-app .ysj-postcode-body { height: 460px; }

.ysj-app .ysj-actions { margin: 4px 0 0; }
.ysj-app .ysj-error { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(217, 48, 37, .08); color: var(--ysj-danger); font-weight: 600; }
.ysj-app .ysj-disclaimer { margin: 18px 0 0; color: var(--ysj-muted); font-size: 13px; }

/* 결과 */
.ysj-app .ysj-result { margin: 22px 0 0; }
.ysj-app .ysj-loading { display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: 12px; background: var(--ysj-soft); color: var(--ysj-muted); }
.ysj-app .ysj-spinner { width: 20px; height: 20px; border: 3px solid var(--ysj-track); border-top-color: var(--ysj-primary); border-radius: 50%; animation: ysj-spin .8s linear infinite; }
@keyframes ysj-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ysj-app .ysj-spinner { animation-duration: 2.5s; } }

.ysj-app .ysj-report-head { margin: 0 0 12px; }
.ysj-app .ysj-report-addr { margin: 0; font-size: 18px; font-weight: 800; }
.ysj-app .ysj-report-sub { margin: 2px 0 0; color: var(--ysj-muted); font-size: 14px; }

.ysj-app .ysj-card { border: 1px solid var(--ysj-line); border-radius: 14px; padding: 18px; margin: 0 0 14px; background: var(--ysj-card); }
.ysj-app .ysj-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; line-height: 1.4; }
.ysj-app .ysj-card p + p { margin-top: 8px; }

.ysj-app .ysj-grade { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; border-width: 2px; }
.ysj-app .ysj-grade-danger { border-color: var(--ysj-danger); }
.ysj-app .ysj-grade-caution { border-color: var(--ysj-caution); }
.ysj-app .ysj-grade-warning { border-color: var(--ysj-warning); }
.ysj-app .ysj-grade-safe { border-color: var(--ysj-safe); }
.ysj-app .ysj-grade-label { margin: 0; color: var(--ysj-muted); font-size: 13px; }
.ysj-app .ysj-grade-name { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.25; }
.ysj-app .ysj-grade-danger .ysj-grade-name { color: var(--ysj-danger); }
.ysj-app .ysj-grade-caution .ysj-grade-name { color: var(--ysj-caution); }
.ysj-app .ysj-grade-warning .ysj-grade-name { color: var(--ysj-warning); }
.ysj-app .ysj-grade-safe .ysj-grade-name { color: var(--ysj-safe); }
.ysj-app .ysj-grade-rate { margin: 4px 0 8px; }
.ysj-app .ysj-grade-guide { margin: 0; color: var(--ysj-text); }
.ysj-app .ysj-gauge svg { width: 100%; height: auto; display: block; }
.ysj-app .ysj-gauge-num { font-size: 26px; font-weight: 800; fill: var(--ysj-text); }
.ysj-app .ysj-gauge-cap { font-size: 12px; fill: var(--ysj-muted); }

.ysj-app .ysj-flag { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(232, 113, 10, .09); border-left: 4px solid var(--ysj-caution); }
.ysj-app .ysj-flag strong { display: block; margin: 0 0 2px; }

.ysj-app .ysj-chart svg { width: 100%; height: auto; display: block; }
.ysj-app .ysj-bar-label { font-size: 14px; font-weight: 700; fill: var(--ysj-text); }
.ysj-app .ysj-seg-prior { fill: #8a94a6; background: #8a94a6; }
.ysj-app .ysj-seg-recover { fill: var(--ysj-safe); background: var(--ysj-safe); }
.ysj-app .ysj-seg-loss { fill: var(--ysj-danger); background: var(--ysj-danger); }
.ysj-app .ysj-seg-rest { fill: var(--ysj-track); background: var(--ysj-track); }
.ysj-app .ysj-legend { list-style: none; padding: 0; margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ysj-muted); }
.ysj-app .ysj-legend li { display: flex; align-items: center; gap: 6px; }
.ysj-app .ysj-legend li::before { content: none; display: none; }
.ysj-app .ysj-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.ysj-app .ysj-calc { margin: 0; }
.ysj-app .ysj-calc > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ysj-line); }
.ysj-app .ysj-calc dt { color: var(--ysj-muted); font-weight: 400; }
.ysj-app .ysj-calc dd { font-weight: 700; text-align: right; white-space: nowrap; }
.ysj-app .ysj-calc .ysj-calc-strong dd { color: var(--ysj-safe); font-size: 18px; }
.ysj-app .ysj-calc .ysj-calc-loss dd { color: var(--ysj-danger); }
.ysj-app .ysj-card .ysj-hint { margin-top: 10px; }

.ysj-app .ysj-api-error { margin: 8px 0 0; color: var(--ysj-danger); font-size: 14px; }
.ysj-app .ysj-card-fallback { background: var(--ysj-soft); }

.ysj-app .ysj-table-wrap { overflow-x: auto; margin: 10px 0 0; -webkit-overflow-scrolling: touch; }
.ysj-app .ysj-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.ysj-app .ysj-table th, .ysj-app .ysj-table td { padding: 8px 6px; border-bottom: 1px solid var(--ysj-line); text-align: left; white-space: nowrap; }
.ysj-app .ysj-table th { color: var(--ysj-muted); font-weight: 600; background: transparent; }
.ysj-app .ysj-table td:last-child, .ysj-app .ysj-table th:last-child { text-align: right; }

.ysj-app .ysj-checklist ul { margin: 0; padding: 0 0 0 20px; }
.ysj-app .ysj-checklist li { margin: 4px 0; }

@media (max-width: 640px) {
	.ysj-app .ysj-title { font-size: 22px; }
	.ysj-app .ysj-section { padding: 14px 14px 4px; }
	.ysj-app .ysj-grid2 { grid-template-columns: 1fr; gap: 0; }
	.ysj-app .ysj-grade { grid-template-columns: 1fr; text-align: center; }
	.ysj-app .ysj-gauge { max-width: 220px; margin: 0 auto; }
	.ysj-app .ysj-postcode-body { height: 420px; }
	.ysj-app .ysj-calc > div { flex-wrap: wrap; }
}

/* 다크모드(sw-simple-dark-mode: body.dark-mode). 그 플러그인이 span/p 색을 !important 로 덮으므로 함께 지정한다. */
body.dark-mode .ysj-app {
	--ysj-bg: #1b1e23;
	--ysj-card: #23272e;
	--ysj-soft: #2a2f37;
	--ysj-line: #3a404a;
	--ysj-text: #e8eaed;
	--ysj-muted: #a7aeb8;
	--ysj-primary: #6ea2ff;
	--ysj-primary-text: #0b1530;
	--ysj-track: #3a404a;
	--ysj-danger: #ff7a70;
	--ysj-caution: #ffa65c;
	--ysj-warning: #f2c94c;
	--ysj-safe: #5fd38a;
}
body.dark-mode .ysj-app .ysj-hint, body.dark-mode .ysj-app .ysj-lead, body.dark-mode .ysj-app .ysj-report-sub,
body.dark-mode .ysj-app .ysj-grade-label, body.dark-mode .ysj-app .ysj-disclaimer, body.dark-mode .ysj-app .ysj-calc dt { color: var(--ysj-muted) !important; }
body.dark-mode .ysj-app .ysj-money-out, body.dark-mode .ysj-app .ysj-more summary { color: var(--ysj-primary) !important; }
body.dark-mode .ysj-app .ysj-grade-danger .ysj-grade-name { color: var(--ysj-danger) !important; }
body.dark-mode .ysj-app .ysj-grade-caution .ysj-grade-name { color: var(--ysj-caution) !important; }
body.dark-mode .ysj-app .ysj-grade-warning .ysj-grade-name { color: var(--ysj-warning) !important; }
body.dark-mode .ysj-app .ysj-grade-safe .ysj-grade-name, body.dark-mode .ysj-app .ysj-calc .ysj-calc-strong dd { color: var(--ysj-safe) !important; }
body.dark-mode .ysj-app .ysj-calc .ysj-calc-loss dd, body.dark-mode .ysj-app .ysj-error, body.dark-mode .ysj-app .ysj-api-error { color: var(--ysj-danger) !important; }
body.dark-mode .ysj-app .ysj-chip input:checked + span { color: var(--ysj-primary) !important; }
body.dark-mode .ysj-app .ysj-btn-primary { color: var(--ysj-primary-text) !important; }
body.dark-mode .ysj-app .ysj-postcode-layer { background: #fff; } /* 카카오 화면은 밝은 배경 고정 */

/* ── 오른쪽 사이드(요약 + 최근 검증) ── */
.ysj-app.ysj-layout-wide { max-width: none; }
.ysj-app .ysj-result { margin: 22px 0 0; }
.ysj-app .ysj-result:empty { display: none; }
.ysj-app .ysj-side { margin: 24px 0 0; display: grid; gap: 16px; align-content: start; }
.ysj-app .ysj-placeholder {
	border: 1px dashed var(--ysj-line); border-radius: 14px; padding: 18px; background: var(--ysj-soft); color: var(--ysj-muted); font-size: 14.5px;
}
.ysj-app .ysj-placeholder .ysj-placeholder-title { margin: 0 0 6px; color: var(--ysj-text); font-size: 16px; font-weight: 800; }
.ysj-app .ysj-placeholder ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 5px; }
.ysj-app .ysj-placeholder li, .ysj-app .ysj-recent-list li { display: flex; margin: 0; }
.ysj-app .ysj-placeholder li { align-items: center; gap: 8px; }
.ysj-app .ysj-placeholder li::before, .ysj-app .ysj-recent-list li::before { content: none; display: none; }
.ysj-app .ysj-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ysj-app .ysj-dot-danger, .ysj-app .ysj-badge-danger { background: var(--ysj-danger); }
.ysj-app .ysj-dot-caution, .ysj-app .ysj-badge-caution { background: var(--ysj-caution); }
.ysj-app .ysj-dot-warning, .ysj-app .ysj-badge-warning { background: var(--ysj-warning); }
.ysj-app .ysj-dot-safe, .ysj-app .ysj-badge-safe { background: var(--ysj-safe); }

.ysj-app .ysj-summary { border: 2px solid var(--ysj-line); border-radius: 14px; padding: 16px; background: var(--ysj-card); }
.ysj-app .ysj-summary-danger { border-color: var(--ysj-danger); }
.ysj-app .ysj-summary-caution { border-color: var(--ysj-caution); }
.ysj-app .ysj-summary-warning { border-color: var(--ysj-warning); }
.ysj-app .ysj-summary-safe { border-color: var(--ysj-safe); }
.ysj-app .ysj-summary-cap { margin: 0; color: var(--ysj-muted); font-size: 13px; }
.ysj-app .ysj-summary-name { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.3; }
.ysj-app .ysj-summary-danger .ysj-summary-name { color: var(--ysj-danger); }
.ysj-app .ysj-summary-caution .ysj-summary-name { color: var(--ysj-caution); }
.ysj-app .ysj-summary-warning .ysj-summary-name { color: var(--ysj-warning); }
.ysj-app .ysj-summary-safe .ysj-summary-name { color: var(--ysj-safe); }
.ysj-app .ysj-summary-rate { margin: 2px 0 10px; }
.ysj-app .ysj-summary dl { margin: 0 0 12px; }
.ysj-app .ysj-summary dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--ysj-line); font-size: 14px; }
.ysj-app .ysj-summary dt { color: var(--ysj-muted); }
.ysj-app .ysj-summary dd { font-weight: 700; white-space: nowrap; }
.ysj-app .ysj-summary .ysj-btn { width: 100%; min-height: 42px; font-size: 15px; }
.ysj-app .ysj-summary-shared { margin: 10px 0 0; font-size: 13px; color: var(--ysj-safe); }

.ysj-app .ysj-recent { border: 1px solid var(--ysj-line); border-radius: 14px; padding: 16px; background: var(--ysj-card); }
.ysj-app .ysj-recent-title { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.ysj-app .ysj-recent-desc { margin: 0 0 10px; color: var(--ysj-muted); font-size: 12.5px; }
.ysj-app .ysj-recent-list { list-style: none; padding: 0; margin: 0; }
.ysj-app .ysj-recent-list li { align-items: flex-start; gap: 8px; padding: 10px 0; border-top: 1px solid var(--ysj-line); font-size: 13.5px; }
.ysj-app .ysj-recent-list li:first-child { border-top: 0; padding-top: 2px; }
.ysj-app .ysj-recent-loading, .ysj-app .ysj-recent-empty { color: var(--ysj-muted); align-items: center !important; }
.ysj-app .ysj-badge { flex: 0 0 auto; color: #fff; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.ysj-app .ysj-recent-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ysj-app .ysj-recent-region { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ysj-app .ysj-recent-meta { color: var(--ysj-muted); font-size: 12.5px; }
.ysj-app .ysj-recent-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.ysj-app .ysj-recent-side small { color: var(--ysj-muted); font-size: 11.5px; }
.ysj-app.ysj-recent-only { max-width: 420px; }

/* 공개 동의 */
.ysj-app .ysj-consent { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--ysj-line); border-radius: 12px; background: var(--ysj-soft); }
.ysj-app .ysj-consent-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.ysj-app .ysj-consent-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ysj-primary); }
.ysj-app .ysj-consent-check em { color: var(--ysj-muted); font-style: normal; font-weight: 400; }
.ysj-app .ysj-consent-notice { margin: 10px 0 0 30px; font-size: 13px; color: var(--ysj-muted); }
.ysj-app .ysj-consent-notice p + p { margin-top: 6px; }
.ysj-app .ysj-consent-notice .ysj-consent-ai { color: var(--ysj-text); padding: 8px 10px; border-left: 3px solid var(--ysj-primary); background: var(--ysj-bg); border-radius: 0 8px 8px 0; }
.ysj-app .ysj-consent-notice a { color: var(--ysj-primary); }

/* 기본(좁은) 모양에서는 요약 카드 없이 위젯만 아래에 */
.ysj-app.ysj-layout-default .ysj-side-summary { display: none; }

@media (min-width: 1024px) {
	.ysj-app.ysj-layout-wide .ysj-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px; /* 결과 칸(약 635px)을 절반으로 줄여 오른쪽 사이드로 */
		gap: 28px;
		align-items: start;
	}
	.ysj-app.ysj-layout-wide .ysj-side { margin: 0; }
	.ysj-app.ysj-layout-wide .ysj-lead { max-width: 760px; }
}
@media (max-width: 1023px) {
	.ysj-app .ysj-placeholder { display: none; }
	.ysj-app .ysj-side-summary:empty { display: none; }
}
@media (max-width: 640px) {
	.ysj-app .ysj-consent-notice { margin-left: 0; }
}

body.dark-mode .ysj-app .ysj-placeholder, body.dark-mode .ysj-app .ysj-placeholder p,
body.dark-mode .ysj-app .ysj-recent-desc, body.dark-mode .ysj-app .ysj-recent-meta, body.dark-mode .ysj-app .ysj-recent-side small,
body.dark-mode .ysj-app .ysj-summary-cap, body.dark-mode .ysj-app .ysj-summary dt, body.dark-mode .ysj-app .ysj-consent-notice p,
body.dark-mode .ysj-app .ysj-consent-check em { color: var(--ysj-muted) !important; }
body.dark-mode .ysj-app .ysj-placeholder .ysj-placeholder-title, body.dark-mode .ysj-app .ysj-consent-notice .ysj-consent-ai,
body.dark-mode .ysj-app .ysj-recent-region { color: var(--ysj-text) !important; }
body.dark-mode .ysj-app .ysj-badge { color: #111 !important; }
body.dark-mode .ysj-app .ysj-summary-danger .ysj-summary-name { color: var(--ysj-danger) !important; }
body.dark-mode .ysj-app .ysj-summary-caution .ysj-summary-name { color: var(--ysj-caution) !important; }
body.dark-mode .ysj-app .ysj-summary-warning .ysj-summary-name { color: var(--ysj-warning) !important; }
body.dark-mode .ysj-app .ysj-summary-safe .ysj-summary-name, body.dark-mode .ysj-app .ysj-summary-shared { color: var(--ysj-safe) !important; }
body.dark-mode .ysj-app .ysj-consent-notice a { color: var(--ysj-primary) !important; }