/* 평수 계산기 — 두 칸 양방향 + 면적 쌓기 그림 + 10~60평 표 */
:root { --ac: #c0612b; }
.py-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-top: 16px; }
.py-pair .cf { padding: 10px 12px; }
.py-pair .cf-num { gap: 6px; }
.py-pair .cf-num input { padding: 0 10px; font-size: 21px; }
.py-eq { padding-bottom: 22px; font: 900 22px/1 var(--font-sans); color: var(--sub); }
.py-chips { margin-top: 10px; }
.py-res { margin-top: 14px; }
.py-res .cr-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; font-variant-numeric: tabular-nums; word-break: break-all; }
.py-res .cr-v small { font: 900 24px/1 var(--font-sans); color: var(--sub); }
.py-sent { margin: 8px 0 0; font: 700 14px/1.5 var(--font-sans); color: var(--sub); font-variant-numeric: tabular-nums; }
.py-area, .py-table-wrap { margin-top: 18px; padding: 16px 14px; }
.py-h { margin: 0; font: 900 18px/1.3 var(--font-sans); }
.py-stack { display: grid; gap: 4px; margin-top: 12px; }
.py-s { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 12px; border-radius: 10px; font: 600 12.5px/1.35 var(--font-sans); color: var(--sub); }
.py-s b { font: 900 14px/1.3 var(--font-sans); color: var(--ink); }
.py-s1 { width: 58%; background: #f3d9c8; }
.py-s2 { width: 74%; background: #f7e6da; }
.py-s3 { width: 86%; background: #fbf0e8; border: 1.5px solid var(--ac); }
.py-s4 { width: 100%; background: #f6f2ea; box-sizing: border-box; }
.py-s1, .py-s2, .py-s3 { box-sizing: border-box; }
.py-ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font: 500 14px/1.6 var(--font-sans); word-break: keep-all; }
.py-ul b { margin-right: 4px; }
.py-note { margin: 10px 0 0; font: 600 12.5px/1.5 var(--font-sans); color: var(--sub); }
.py-table { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 10px; }
.py-th { grid-column: 1 / -1; display: none; }
.py-tr { display: flex; justify-content: space-between; align-items: center; min-height: 38px; padding: 0 6px; border: 0; border-bottom: 1px dashed var(--line); background: none; font: 600 14px/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; text-align: left; }
.py-tr b { font-weight: 900; }
.py-tr.on { background: var(--ink); color: #fff; border-radius: 8px; }
@media (max-width: 380px) { .py-pair { grid-template-columns: 1fr; } .py-eq { display: none; } .py-s1 { width: 70%; } .py-s2 { width: 82%; } .py-s3 { width: 92%; } }