/* ===== 부동산 계산기 허브 + 관련계산기 동선 컴포넌트 ===== */

/* ---- 관련계산기 동선 (모든 계산기 하단) ---- */
.rl-related {
  margin: 22px 0 8px; padding: 22px;
  background: linear-gradient(165deg,#1e293b,#0f172a); border-radius: 18px;
  box-shadow: 0 4px 16px rgba(15,23,42,.18);
}
.rl-related-h { font-size: 1.1rem; font-weight: 800; color: #fff; margin: 0 0 16px; letter-spacing: -0.02em; }
.rl-flow { margin-bottom: 16px; }
.rl-flow-label { font-size: 0.85rem; color: #94a3b8; font-weight: 600; margin-bottom: 9px; }
.rl-flow-label b { color: #e2e8f0; }
.rl-flow-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rl-step {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: #334155; border-radius: 11px; text-decoration: none;
  border: 1.5px solid transparent; transition: all .14s;
}
.rl-step:hover { background: #3e4c63; transform: translateY(-1px); }
.rl-step-ico { font-size: 1.05rem; }
.rl-step-name { font-size: 0.88rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; }
.rl-active {
  background: linear-gradient(135deg,#2563eb,#1d4ed8); border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(37,99,235,.3); cursor: default;
}
.rl-active:hover { transform: none; background: linear-gradient(135deg,#2563eb,#1d4ed8); }
.rl-active .rl-step-name { color: #fff; }
.rl-soon { background: #1e293b; border: 1.5px dashed #475569; cursor: default; }
.rl-soon .rl-step-name { color: #64748b; }
.rl-soon .rl-step-ico { opacity: .5; }
.rl-badge { font-size: 0.66rem; background: #475569; color: #cbd5e1; padding: 2px 7px; border-radius: 5px; font-weight: 700; }
.rl-arrow { color: #475569; font-weight: 700; font-size: 0.9rem; }
.rl-hub-link {
  display: inline-block; margin-top: 8px; font-size: 0.88rem; font-weight: 700;
  color: #93c5fd; text-decoration: none;
}
.rl-hub-link:hover { color: #bfdbfe; text-decoration: underline; }

.rl-tools { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(148,163,184,.25); }
.rl-tools-label { display: block; font-size: 0.85rem; color: #94a3b8; font-weight: 600; margin-bottom: 9px; }
.rl-tools-links { display: flex; flex-wrap: wrap; gap: 7px; }
.rl-tools-links a {
  font-size: 0.82rem; font-weight: 600; color: #cbd5e1; text-decoration: none;
  background: rgba(148,163,184,.14); padding: 7px 12px; border-radius: 9px; transition: all .12s;
}
.rl-tools-links a:hover { background: rgba(147,197,253,.22); color: #fff; }

/* ---- 애드센스 광고 구역 placeholder ---- */
.rl-ad {
  margin: 18px 0; min-height: 90px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#f1f5f9 10px,#f1f5f9 20px);
  border: 1px dashed #cbd5e1; border-radius: 12px; color: #94a3b8; font-size: 0.8rem;
}
@media (prefers-color-scheme: dark) {
  .rl-ad { background: #1b212c; border-color: #2b3340; color: #64748b; }
}

/* ---- 허브 랜딩 ---- */
.rh-wrap { max-width: 820px; margin: 0 auto; padding: 4px 0 56px; }
.rh-head { text-align: center; margin: 8px 0 26px; }
.rh-badge {
  display: inline-block; background: linear-gradient(135deg,#1e3a8a,#1d4ed8); color: #fff;
  font-size: 0.8rem; font-weight: 700; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px;
}
.rh-head h1 { font-size: 1.85rem; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.03em; }
.rh-head p { color: #6b7280; font-size: 0.96rem; margin: 0; line-height: 1.6; }

.rh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.rh-card {
  display: block; text-decoration: none; padding: 22px; border-radius: 16px;
  background: #fff; border: 1px solid #e9ecef; box-shadow: 0 2px 10px rgba(17,24,39,.04);
  transition: all .15s; position: relative;
}
.rh-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(17,24,39,.1); border-color: #c7d2fe; }
.rh-card-ico { font-size: 2rem; margin-bottom: 10px; }
.rh-card-name { font-size: 1.12rem; font-weight: 800; color: #1f2937; margin-bottom: 5px; letter-spacing: -0.02em; }
.rh-card-desc { font-size: 0.86rem; color: #6b7280; line-height: 1.55; }
.rh-card-go { margin-top: 12px; font-size: 0.84rem; font-weight: 700; color: #2563eb; }
.rh-card-soon { pointer-events: none; opacity: .62; }
.rh-card-soon .rh-card-go { color: #94a3b8; }
.rh-tag {
  position: absolute; top: 16px; right: 16px; font-size: 0.68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 6px; background: #dbeafe; color: #1d4ed8;
}
.rh-tag-soon { background: #f1f5f9; color: #94a3b8; }

.rh-flow-sec { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 16px; padding: 22px; margin-bottom: 22px; }
.rh-flow-sec h2 { font-size: 1.12rem; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.02em; }
.rh-intro { font-size: 0.95rem; line-height: 1.75; color: #374151; }

@media (max-width: 560px) {
  .rh-head h1 { font-size: 1.45rem; }
  .rh-grid { grid-template-columns: 1fr; }
  .rl-related { padding: 18px; }
}
@media (prefers-color-scheme: dark) {
  .rh-head p, .rh-intro { color: #94a3b8; }
  .rh-card { background: #1b212c; border-color: #2b3340; }
  .rh-card:hover { border-color: #1e40af; }
  .rh-card-name { color: #e2e8f0; }
  .rh-flow-sec { background: #1b212c; border-color: #2b3340; }
  .rh-tag { background: #1e3a5f; color: #bfdbfe; }
  .rh-tag-soon { background: #232a36; color: #64748b; }
}

/* ===== 댓글 컴포넌트 ===== */
.rc-wrap { margin: 22px 0 8px; padding: 24px; background: #fff; border: 1px solid #e9ecef; border-radius: 18px; box-shadow: 0 2px 10px rgba(17,24,39,.04); }
.rc-h { font-size: 1.12rem; font-weight: 800; margin: 0 0 16px; letter-spacing: -0.02em; }
.rc-count { font-size: 0.9rem; color: #2563eb; background: #eff6ff; padding: 1px 9px; border-radius: 8px; margin-left: 4px; }
.rc-msg { padding: 10px 14px; border-radius: 10px; font-size: 0.86rem; margin-bottom: 10px; }
.rc-msg-success { background: #ecfdf5; color: #047857; }
.rc-msg-error { background: #fef2f2; color: #b91c1c; }
.rc-msg-warning { background: #fffbeb; color: #b45309; }
.rc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rc-form { margin-bottom: 18px; }
.rc-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-nick { flex: 0 0 110px; }
.rc-body { flex: 1 1 200px; }
.rc-nick, .rc-body { padding: 11px 13px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 0.9rem; outline: none; transition: border-color .12s; }
.rc-nick:focus, .rc-body:focus { border-color: #2563eb; }
.rc-submit { flex: 0 0 auto; padding: 11px 20px; background: #2563eb; color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: background .12s; }
.rc-submit:hover { background: #1d4ed8; }
.rc-list { display: flex; flex-direction: column; gap: 10px; }
.rc-item { padding: 13px 15px; background: #f8fafc; border-radius: 11px; }
.rc-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.rc-item-nick { font-weight: 700; font-size: 0.88rem; color: #1f2937; }
.rc-item-date { font-size: 0.76rem; color: #9ca3af; }
.rc-item-body { font-size: 0.9rem; color: #374151; line-height: 1.5; word-break: break-word; }
.rc-empty { text-align: center; color: #9ca3af; font-size: 0.9rem; padding: 18px 0; }
@media (max-width: 520px) {
  .rc-nick { flex: 1 1 100%; }
  .rc-body { flex: 1 1 70%; }
}
@media (prefers-color-scheme: dark) {
  .rc-wrap { background: #1b212c; border-color: #2b3340; }
  .rc-count { background: #1e3a5f; color: #bfdbfe; }
  .rc-nick, .rc-body { background: #232a36; border-color: #2b3340; color: #f1f5f9; }
  .rc-item { background: #232a36; }
  .rc-item-nick { color: #e2e8f0; } .rc-item-body { color: #cbd5e1; }
}

/* ---- 임대인↔임차인 가이드 배너 (허브) ---- */
.rh-guide-banner { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 18px 20px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6); border-radius: 16px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(99,102,241,.25); transition: transform .12s; }
.rh-guide-banner:hover { transform: translateY(-2px); }
.rh-guide-ico { font-size: 2rem; flex: none; }
.rh-guide-body { display: flex; flex-direction: column; gap: 3px; }
.rh-guide-title { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.rh-guide-desc { font-size: 0.86rem; color: #e0e7ff; font-weight: 500; }

/* ---- 이해관계자 가이드 배너 (teal) ---- */
.rh-guide-banner2 { background: linear-gradient(135deg,#0f766e,#0891b2); box-shadow: 0 6px 18px rgba(15,118,110,.25); }
.rh-guide-banner2 .rh-guide-desc { color: #ccfbf1; }