/* css/housing-rules.css — 무엇이 집값을 붙잡나.
   civics.css 위에 얹는다.

   이 지면의 시각적 중심은 「층」이다. 위로 갈수록 빠르고, 아래로 갈수록
   강하지만 느리다. 층마다 왼쪽 테두리 굵기를 달리해 무게를 표현했다. */

:root { --hr-fast: #a8503c; --hr-mid: #7a6a4e; --hr-slow: #3f6b82; }
[data-skin="night"] { --hr-fast: #d08a72; --hr-mid: #b3a077; --hr-slow: #7fa8c0; }

.hr-caveat {
  border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft);
  padding: 17px 19px; margin: 0 0 8px;
  font-size: 13.5px; line-height: 1.95; color: var(--ink); word-break: keep-all;
}

/* ── 세 개의 문 ── */
.hr-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hr-door {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 18px 19px;
}
.hr-door-n {
  font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--gold);
}
.hr-door-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint);
}
.hr-door-d {
  font-size: 12.5px; line-height: 1.85; color: var(--ink-dim); word-break: keep-all;
  margin-top: 3px;
}
.hr-door-w {
  font-size: 11.5px; color: var(--ink); word-break: keep-all;
  border-top: 1px solid var(--line); padding-top: 9px; margin-top: auto;
}
.hr-door-s { font-family: var(--mono); font-size: 10.5px; color: var(--gold); }

/* ── 대출 세 관문 ── */
.hr-gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.hr-gate {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 18px 19px;
}
.hr-gate-n {
  font-family: var(--mono); font-weight: 500; font-size: 19px; color: var(--gold);
  letter-spacing: .02em;
}
.hr-gate-f { font-size: 11.5px; color: var(--ink-faint); }
.hr-gate-q {
  font-family: var(--serif); font-size: 13.5px; color: var(--ink); word-break: keep-all;
  line-height: 1.65; margin: 4px 0;
}
.hr-gate-d {
  font-size: 12.5px; line-height: 1.85; color: var(--ink-dim); word-break: keep-all;
}
.hr-gate-s {
  font-family: var(--mono); font-size: 10.5px; color: var(--gold);
  border-top: 1px solid var(--line); padding-top: 9px; margin-top: auto;
}
.hr-rule {
  border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft);
  padding: 18px 20px; margin: 0 0 16px;
  font-size: 14.5px; line-height: 1.95; color: var(--ink); word-break: keep-all;
}
.hr-soft {
  border: 1px dashed var(--line); border-radius: 11px; padding: 15px 17px; margin: 0 0 14px;
  font-size: 12.5px; line-height: 1.9; color: var(--ink-faint); word-break: keep-all;
}
.hr-soft:last-child { margin-bottom: 0; }

/* ── 세금 세 순간 ── */
.hr-taxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.hr-tax {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 17px 18px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.hr-tax:hover { border-color: var(--gold); transform: translateY(-2px); }
.hr-tax-n { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
.hr-tax:hover .hr-tax-n { color: var(--gold); }
.hr-tax-t {
  font-family: var(--mono); font-size: 10.5px; color: var(--gold); word-break: keep-all;
  line-height: 1.6;
}
.hr-tax-d { font-size: 12.5px; line-height: 1.85; color: var(--ink-dim); word-break: keep-all; }

/* ── 규제지역 ── */
.hr-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0 16px; }
.hr-zone {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 17px 18px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.hr-zone:hover { border-color: var(--gold); transform: translateY(-2px); }
.hr-zone-n { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
.hr-zone:hover .hr-zone-n { color: var(--gold); }
.hr-zone-l {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint); word-break: keep-all;
  line-height: 1.6;
}
.hr-zone-e { font-size: 12.5px; line-height: 1.85; color: var(--ink-dim); word-break: keep-all; }

/* ── 세 개의 층 ── */
.hr-tiers { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 18px; }
.hr-tier {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 18px 20px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.hr-tier:hover { transform: translateX(4px); }
.hr-tier:nth-child(1) { border-left: 7px solid var(--hr-slow); }
.hr-tier:nth-child(2) { border-left: 5px solid var(--hr-mid); }
.hr-tier:nth-child(3) { border-left: 3px solid var(--hr-fast); }
.hr-tier.is-key { background: var(--gold-soft); }
.hr-tier-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hr-tier-n { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink); }
.hr-tier:hover .hr-tier-n { color: var(--gold); }
.hr-tier-sp {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  border: 1px solid currentColor; border-radius: 3px; padding: 1px 7px; margin-left: auto;
}
.hr-tier:nth-child(1) .hr-tier-sp { color: var(--hr-slow); }
.hr-tier:nth-child(2) .hr-tier-sp { color: var(--hr-mid); }
.hr-tier:nth-child(3) .hr-tier-sp { color: var(--hr-fast); }
.hr-tier-who { font-size: 11.5px; color: var(--ink-faint); }
.hr-tier-i {
  font-size: 12.5px; line-height: 1.8; color: var(--ink-dim); word-break: keep-all;
}
.hr-lesson {
  border-left: 2px solid var(--gold); padding: 2px 0 2px 15px; margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.95; color: var(--ink-dim); word-break: keep-all;
}
.hr-lesson b { color: var(--ink); }
.hr-read {
  border: 1px dashed var(--gold); border-radius: 11px; padding: 15px 17px; margin: 0;
  font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); word-break: keep-all;
}

/* ── 읽는 법 ── */
.hr-checks { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: hrc; }
.hr-checks li {
  position: relative; counter-increment: hrc; padding: 0 0 18px 38px;
  border-left: 1px solid var(--line); margin-left: 11px;
}
.hr-checks li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hr-checks li::before {
  content: counter(hrc); position: absolute; left: -11px; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--mono); font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
}
.hr-checks h3 {
  font-family: var(--serif); font-size: 15px; margin: 0 0 5px; color: var(--ink);
  word-break: keep-all;
}
.hr-checks p { font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); margin: 0;
  word-break: keep-all; }

.hr-wheres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
.hr-where {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
}
.hr-where-n { font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--ink); }
.hr-where-d { font-size: 12px; color: var(--ink-dim); word-break: keep-all; line-height: 1.7; }
.hr-close {
  border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft);
  padding: 18px 20px; margin: 0;
  font-size: 13.5px; line-height: 1.95; color: var(--ink); word-break: keep-all;
}

/* ── 좁은 화면 ── */
@media (max-width: 860px) {
  .hr-doors, .hr-gates, .hr-taxes { grid-template-columns: 1fr; }
  .hr-zones, .hr-wheres { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hr-tier { padding: 15px 16px; }
  .hr-tier-n { font-size: 15.5px; }
  .hr-tier-sp { margin-left: 0; }
  .hr-gate-n { font-size: 17px; }
}