/* 예원 부동산 세금 계산기 */

.ypt-root {
	--ypt-fg: #16202c;
	--ypt-muted: #6b7684;
	--ypt-line: #e5e8eb;
	--ypt-accent: #1b64da;
	--ypt-bg-soft: #f7f8fa;

	max-width: 720px;
	margin: 0 auto 2.5rem;
	padding: 1.5rem;
	border: 1px solid var(--ypt-line);
	border-radius: 14px;
	background: #fff;
	color: var(--ypt-fg);
	font-size: 15px;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

.ypt-title {
	margin: 0 0 .35rem;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ypt-desc {
	margin: 0 0 1.25rem;
	color: var(--ypt-muted);
	font-size: .9rem;
}

/* ---- 입력 ---- */

.ypt-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (max-width: 560px) {
	.ypt-grid { grid-template-columns: 1fr; }
	.ypt-root { padding: 1.1rem; border-radius: 10px; }
}

.ypt-field { min-width: 0; }

.ypt-label {
	display: block;
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ypt-muted);
}

.ypt-input {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .7rem;
	border: 1px solid var(--ypt-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ypt-fg);
	font-size: .98rem;
	font-variant-numeric: tabular-nums;
	transition: border-color .15s;
}

.ypt-input:focus {
	outline: none;
	border-color: var(--ypt-accent);
	box-shadow: 0 0 0 3px rgba(27, 100, 218, .12);
}

.ypt-readout {
	margin-top: .3rem;
	font-size: .74rem;
	color: var(--ypt-muted);
	word-break: keep-all;
}

/* ---- 주택 목록 (보유세) ---- */

.ypt-list-section { margin-bottom: 1.25rem; }

.ypt-list-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: .6rem;
}

.ypt-list-title { font-size: .82rem; font-weight: 700; color: var(--ypt-muted); }

.ypt-add {
	padding: .35rem .7rem;
	border: 1px solid var(--ypt-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--ypt-accent);
	font-size: .78rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ypt-add:hover { background: var(--ypt-accent); color: #fff; }

.ypt-list { display: grid; gap: .7rem; }

.ypt-house {
	padding: .9rem;
	border: 1px solid var(--ypt-line);
	border-radius: 10px;
	background: var(--ypt-bg-soft);
}

.ypt-house-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: .6rem;
}

.ypt-house-name { font-size: .8rem; font-weight: 700; }

.ypt-remove {
	padding: .15rem .5rem;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--ypt-muted);
	font-size: .74rem;
	font-family: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.ypt-remove:hover { color: #c9372c; }

.ypt-list-hint {
	margin: .55rem 0 0;
	font-size: .74rem;
	color: var(--ypt-muted);
	word-break: keep-all;
}

/* ---- 결과 ---- */

.ypt-result { margin-top: 1.5rem; }

.ypt-step {
	margin-bottom: .7rem;
	padding: .85rem 1rem;
	border: 1px solid var(--ypt-line);
	border-radius: 10px;
}

.ypt-step-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .35rem;
	padding-bottom: .45rem;
	border-bottom: 1px solid var(--ypt-line);
}

.ypt-step-title { font-size: .84rem; font-weight: 700; }

.ypt-badge {
	padding: .1rem .45rem;
	border-radius: 999px;
	background: rgba(27, 100, 218, .1);
	color: var(--ypt-accent);
	font-size: .68rem;
	font-weight: 600;
	word-break: keep-all;
}

.ypt-badge-warn { background: rgba(201, 55, 44, .1); color: #c9372c; }

.ypt-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .4rem 0;
}

.ypt-row-label { color: var(--ypt-muted); font-size: .88rem; word-break: keep-all; }

.ypt-row-value {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	text-align: right;
	word-break: keep-all;
}

.ypt-minus { color: var(--ypt-muted); }

.ypt-row-sub {
	margin-top: .25rem;
	padding-top: .55rem;
	border-top: 1px dashed var(--ypt-line);
}

.ypt-row-sub .ypt-row-label,
.ypt-row-sub .ypt-row-value {
	font-weight: 700;
	color: var(--ypt-fg);
}

.ypt-note {
	margin: -.25rem 0 .35rem;
	font-size: .75rem;
	color: var(--ypt-muted);
	text-align: right;
	word-break: keep-all;
}

.ypt-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-top: 1rem;
	padding: .9rem 1rem;
	border-radius: 10px;
	background: var(--ypt-bg-soft);
}

.ypt-total-label { font-weight: 700; }

.ypt-total-value {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--ypt-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	text-align: right;
	word-break: keep-all;
}

.ypt-total-korean {
	margin-top: .4rem;
	text-align: right;
	font-size: .82rem;
	color: var(--ypt-muted);
}

.ypt-notes {
	margin: 1rem 0 0;
	padding-left: 1.1rem;
	font-size: .78rem;
	color: var(--ypt-muted);
}

.ypt-notes li { margin-bottom: .3rem; word-break: keep-all; }

.ypt-basis {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--ypt-line);
	font-size: .73rem;
	color: var(--ypt-muted);
	word-break: keep-all;
}

.ypt-basis-reform {
	margin-top: .45rem;
	padding-left: .55rem;
	border-left: 2px solid var(--ypt-line);
}

.ypt-error {
	padding: .8rem;
	border-radius: 8px;
	background: #fff2f0;
	color: #c9372c;
	font-size: .88rem;
}

/* ---- 사용법 ---- */

.ypt-howto {
	max-width: 720px;
	margin: 0 auto 1rem;
	padding: 1rem 1.2rem;
	border: 1px solid #dbe4f3;
	border-radius: 12px;
	background: #f4f7fd;
	color: #16202c;
	font-size: 15px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.ypt-howto-title {
	margin: 0 0 .5rem;
	font-size: .8rem;
	font-weight: 700;
	color: #1b64da;
	letter-spacing: .02em;
}

/* 4단계 흐름. 좁은 화면에서는 자동으로 세로로 쌓인다. */
.ypt-flow {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .9rem;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ypt-flow-item {
	display: flex;
	align-items: center;
	gap: .45rem;
	flex: 1 1 150px;
	min-width: 0;
	padding: .5rem .65rem;
	border: 1px solid #dbe4f3;
	border-radius: 8px;
	background: #fff;
}

.ypt-flow-n {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	background: #1b64da;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.35rem;
	text-align: center;
}

.ypt-flow-text { min-width: 0; }

.ypt-flow-label {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	word-break: keep-all;
}

.ypt-flow-desc {
	display: block;
	font-size: .71rem;
	color: #6b7684;
	word-break: keep-all;
}

.ypt-howto-list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .87rem;
}

.ypt-howto-list li { margin-bottom: .4rem; word-break: keep-all; }
.ypt-howto-list li:last-child { margin-bottom: 0; }

.ypt-howto-list code {
	padding: .05rem .3rem;
	border-radius: 4px;
	background: rgba(27, 100, 218, .1);
	font-size: .95em;
}

.ypt-howto-list a { color: #1b64da; }

/* ---- 가이드 · FAQ ----
 * PHP 가 정적 HTML(details/summary)로 출력한다. 스크립트 없이 접기·펼치기가
 * 동작하고 검색엔진이 본문을 그대로 읽는다.
 */

.ypt-sections {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	color: #16202c;
	font-size: 15px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.ypt-section { margin-bottom: 1.75rem; }

.ypt-section-title {
	margin: 0 0 .8rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ypt-qa {
	border: 1px solid #e5e8eb;
	border-radius: 10px;
	margin-bottom: .5rem;
	background: #fff;
	overflow: hidden;
}

.ypt-qa > summary {
	padding: .8rem 1rem;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.4rem;
	word-break: keep-all;
}

.ypt-qa > summary::-webkit-details-marker { display: none; }

.ypt-qa > summary::after {
	content: '+';
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #6b7684;
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1;
}

.ypt-qa[open] > summary::after { content: '−'; }
.ypt-qa[open] > summary { border-bottom: 1px solid #e5e8eb; }

.ypt-qa-body {
	padding: .85rem 1rem 1rem;
	font-size: .89rem;
	color: #3c4655;
	word-break: keep-all;
}

.ypt-qa-body p { margin: 0 0 .6rem; }
.ypt-qa-body p:last-child { margin-bottom: 0; }
.ypt-qa-body ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.ypt-qa-body li { margin-bottom: .25rem; }

/* ---- 세제개편안 문답 검색 ---- */

.ypt-reform {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	color: #16202c;
	font-size: 15px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.ypt-reform-head {
	margin-bottom: 1.25rem;
	padding: 1rem 1.2rem;
	border: 1px solid #f0d9a8;
	border-radius: 12px;
	background: #fff9ed;
}

.ypt-reform-warn {
	margin: .55rem 0 0;
	font-size: .84rem;
	color: #6b5320;
	word-break: keep-all;
}

.ypt-reform-label {
	display: block;
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
	color: #6b7684;
}

.ypt-reform-search {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	border: 1px solid #e5e8eb;
	border-radius: 10px;
	background: #fff;
	color: #16202c;
	font-size: .98rem;
	font-family: inherit;
}

.ypt-reform-search:focus {
	outline: none;
	border-color: #1b64da;
	box-shadow: 0 0 0 3px rgba(27, 100, 218, .12);
}

.ypt-reform-count {
	margin: .5rem 0 1.25rem;
	font-size: .8rem;
	color: #6b7684;
}

.ypt-reform-group[hidden] { display: none; }

.ypt-reform-n {
	margin-left: .3rem;
	padding: .05rem .4rem;
	border-radius: 999px;
	background: #eef1f5;
	color: #6b7684;
	font-size: .72rem;
	font-weight: 600;
	vertical-align: middle;
}

.ypt-reform-item[hidden] { display: none; }

.ypt-reform-sub {
	margin: .9rem 0 .4rem;
	font-size: .85rem;
	font-weight: 700;
	color: #1b64da;
}

.ypt-reform-sub:first-child { margin-top: 0; }

.ypt-reform-ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.ypt-reform-ul li { margin-bottom: .3rem; word-break: keep-all; }
.ypt-reform-l2 { list-style: '– '; margin-left: .7rem; }

.ypt-reform-note {
	margin: -.3rem 0 .6rem;
	padding-left: .2rem;
	font-size: .78rem;
	color: #6b7684;
	word-break: keep-all;
}

.ypt-reform-src {
	margin: .8rem 0 0;
	padding-top: .6rem;
	border-top: 1px solid #e5e8eb;
	font-size: .74rem;
	color: #6b7684;
}

.ypt-reform-empty {
	padding: 1.5rem;
	border-radius: 10px;
	background: #f7f8fa;
	color: #6b7684;
	font-size: .88rem;
	text-align: center;
}

.ypt-reform-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.ypt-reform-foot {
	margin: 1.5rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid #e5e8eb;
	font-size: .76rem;
	color: #6b7684;
	word-break: keep-all;
}

/* ---- 제작 표기 ---- */

.ypt-credit {
	max-width: 720px;
	margin: 0 auto 2rem;
	font-size: .74rem;
	color: #9aa5b1;
	text-align: right;
	letter-spacing: .01em;
}

/* ---- 상담 CTA ---- */

.ypt-cta {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid #e5e8eb;
	border-radius: 14px;
	background: #f7f8fa;
	color: #16202c;
	font-size: 15px;
	line-height: 1.6;
}

.ypt-cta-title { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; }

.ypt-cta-desc {
	margin: 0 0 1rem;
	font-size: .87rem;
	color: #6b7684;
	word-break: keep-all;
}

.ypt-cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.ypt-cta-btn {
	display: inline-block;
	padding: .55rem 1rem;
	border-radius: 8px;
	background: #1b64da;
	color: #fff;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
}

.ypt-cta-btn:hover { background: #1550b5; color: #fff; }

.ypt-cta-btn-ghost {
	background: transparent;
	border: 1px solid #d5dae1;
	color: #16202c;
}

.ypt-cta-btn-ghost:hover { background: #edf0f4; color: #16202c; }

/* ---- 다크 모드 ---- */

@media (prefers-color-scheme: dark) {
	.ypt-root {
		--ypt-fg: #e8ecf1;
		--ypt-muted: #9aa5b1;
		--ypt-line: #2c3440;
		--ypt-accent: #6ea8fe;
		--ypt-bg-soft: #1b2029;
		background: #141922;
	}
	.ypt-input { background: #1b2029; }
	.ypt-error { background: #3a1f1d; color: #ff9c92; }
	.ypt-badge { background: rgba(110, 168, 254, .14); }
	.ypt-badge-warn { background: rgba(255, 156, 146, .14); color: #ff9c92; }
	.ypt-remove:hover { color: #ff9c92; }

	.ypt-howto { border-color: #26364f; background: #161e2b; color: #e8ecf1; }
	.ypt-howto-title { color: #6ea8fe; }
	.ypt-howto-list code { background: rgba(110, 168, 254, .16); }
	.ypt-flow-item { border-color: #26364f; background: #1b2029; }
	.ypt-flow-n { background: #2f6fe0; }
	.ypt-flow-desc { color: #9aa5b1; }
	.ypt-howto-list a { color: #6ea8fe; }

	.ypt-sections { color: #e8ecf1; }
	.ypt-qa { border-color: #2c3440; background: #141922; }
	.ypt-qa[open] > summary { border-bottom-color: #2c3440; }
	.ypt-qa > summary::after { color: #9aa5b1; }
	.ypt-qa-body { color: #c3ccd8; }

	.ypt-reform { color: #e8ecf1; }
	.ypt-reform-head { border-color: #5c4a1a; background: #2b2410; }
	.ypt-reform-warn { color: #e8c96a; }
	.ypt-reform-label, .ypt-reform-count, .ypt-reform-note, .ypt-reform-src { color: #9aa5b1; }
	.ypt-reform-search { border-color: #2c3440; background: #1b2029; color: #e8ecf1; }
	.ypt-reform-search:focus { border-color: #6ea8fe; }
	.ypt-reform-n { background: #242b36; color: #9aa5b1; }
	.ypt-reform-sub { color: #6ea8fe; }
	.ypt-reform-src { border-top-color: #2c3440; }
	.ypt-reform-empty { background: #1b2029; color: #9aa5b1; }
	.ypt-reform-foot { border-top-color: #2c3440; color: #9aa5b1; }
	.ypt-credit { color: #6b7684; }

	.ypt-cta { border-color: #2c3440; background: #1b2029; color: #e8ecf1; }
	.ypt-cta-desc { color: #9aa5b1; }
	.ypt-cta-btn { background: #2f6fe0; }
	.ypt-cta-btn:hover { background: #1b64da; }
	.ypt-cta-btn-ghost { border-color: #39424f; color: #e8ecf1; background: transparent; }
	.ypt-cta-btn-ghost:hover { background: #242b36; color: #e8ecf1; }
}