/* 계산기 화면의 블로그 쪽 틀 (경로 표시·관련 글·인쇄) + 블로그 규칙이 계산기 안쪽을 건드리지 않게 하는 되돌림.
   손으로 쓰는 파일입니다. 고치면 npm run calc:import 를 다시 돌려야 manifest 의 shellVer(?v=)가 바뀝니다.

   head 순서: blog.css → 이 파일 → 계산기 CSS.
   되돌림 규칙은 :where() 로 명시도를 블로그 규칙과 같게(0,1,0 등) 맞춰 두었다 — 같은 명시도면 나중에 읽는 이 파일이 이기고,
   계산기 CSS(.calc-home .card 처럼 (0,2,0) 이상)는 이 파일을 다시 이긴다. */

/* ---------- 경로 표시 ---------- */
.calc-crumb { max-width: 760px; margin: 0 auto; padding: 14px 20px 0; font-size: 13px; line-height: 1.6; color: #686c75; }
.calc-crumb a { color: #686c75; }
.calc-crumb a:hover { color: var(--rfl-accent, #1a6fc4); text-decoration: underline; }
.calc-crumb .sep { margin: 0 2px; color: #a3a7ae; }
.calc-crumb [aria-current="page"] { color: #3a3f48; font-weight: 600; }

/* ---------- 관련 글 (원본 마지막 광고와 링크 카드 사이는 이 구역의 <h2> 가 띄움) ---------- */
.calc-related { max-width: 1060px; margin: 0 auto; padding: 0 20px; margin-top: 56px; }
.calc-related .rfl-h2 { margin-top: 0; }

/* ---------- 블로그 규칙이 계산기 안쪽을 바꾸지 않게 ---------- */
/* 블로그 .card (목록 카드) — 내집마련 .card 는 자기 상자 규칙을 따로 갖고 있다 */
:where(.calc-home, .calc-pay, .calc-life, .calc-hub) .card { display: block; flex-direction: row; transition: none; }
:where(.calc-home, .calc-pay, .calc-life, .calc-hub) .card:hover { transform: none; }
:where(.calc-home, .calc-pay, .calc-life, .calc-hub) .card h2 { font-size: revert; line-height: revert; margin: revert; letter-spacing: revert; }
/* 블로그 .search (메뉴 검색 상자) */
:where(.calc-home, .calc-pay, .calc-life, .calc-hub) .search { margin-left: 0; flex: initial; }
:where(.calc-home, .calc-pay, .calc-life, .calc-hub) .search input { border: revert; background: revert; border-radius: revert; padding: revert; font: revert; width: auto; transition: none; }
:where(.calc-home, .calc-pay, .calc-life, .calc-hub) .search input:focus { outline: revert; background: revert; border-color: revert; width: auto; }

/* 블로그 .hero-sub (pay 결과 화면에 같은 이름이 있다. 원본 .calc-pay .hero-sub 은 글자 크기·색·줄 간격만 정하고 여백은 0) */
:where(.calc-pay) .hero-sub { margin: 0; max-width: none; }
/* 블로그 .meta — 내집마련 reg-engine.js 가 만드는 <div class="meta"> (원본은 이 이름의 규칙이 없어 상속값) */
:where(.calc-home) .meta { font-size: inherit; color: inherit; }
/* 블로그 .pill — 내집마련 loan-calc 의 .pill 은 모양·색을 자기 규칙으로 정하지만 줄 간격은 정하지 않는다 (블로그는 line-height:1) */
:where(.calc-home) .pill { line-height: inherit; }
/* 블로그 .grid (display:grid; 2열; gap) — 생활금융 Tailwind 의 grid 는 열·간격을 grid-cols-*/gap-* 로만 정한다. 내집마련 loan-calc 는 .calc-home .grid 로 전부 정함 */
:where(.calc-life) .grid { grid-template-columns: none; gap: normal; }

/* ---------- 블로그 전역 요소 규칙 (body·a) 되돌림 ---------- */
/* blog body 의 글자 간격·줄바꿈은 상속되므로, 원본이 정하지 않은 쪽은 기본값으로 */
:where(.calc-home, .calc-pay, .calc-life, .calc-hub) { letter-spacing: normal; }
:where(.calc-pay, .calc-life) { word-break: normal; }
/* 생활금융: Tailwind 기본 규칙이 body 의 line-height 를 inherit 로 두어 원래는 html 의 1.5 를 받았다. 지금은 블로그 body 의 1.7 을 받으므로 직접 1.5 */
.calc-life { line-height: 1.5; }
/* 블로그 a { text-decoration: none }: 내집마련·pay 의 원본 링크는 브라우저 기본(밑줄)이고, 밑줄을 없애는 링크는 자기 규칙으로 정한다
   (생활금융은 Tailwind 기본 규칙이 a { text-decoration: inherit } 로 직접 정함). blog.css 의 a:hover 규칙은 계산기 안쪽을 아예 제외해 두었다 */
:where(.calc-home, .calc-pay, .calc-hub) a { text-decoration: revert; }

/* ---------- 인쇄: 계산기만 (블로그 머리글·메뉴·꼬리말·경로·관련 글 숨김) ---------- */
@media print {
  #admin-bar, #progress, #to-top, .site-header, .main-navigation, .site-info, .calc-crumb, .calc-related { display: none !important; }
  body { background: #fff; }
  .site-header ~ div.wrap, .site-header ~ div.wrap.wide { max-width: none; margin: 0; padding: 0; min-height: 0; }
}

/* ---------- 모음 화면 (/calc/) ---------- */
.calc-hub { max-width: 1060px; margin: 0 auto; }
.calc-hub [hidden] { display: none !important; } /* 검색에서 걸러진 카드·묶음 (광고 칸은 건드리지 않는다) */
.hub-head { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--rfl-ink, #111); }
.hub-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--rfl-ink, #111); }
.hub-lead { margin: 6px 0 0; font-size: 14px; color: var(--rfl-ink-3, #6b7480); }

/* 검색창: 블로그 메뉴의 .search 와 겹치지 않게 calc-find */
.calc-find { margin: 0 0 26px; }
.calc-find-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc-find-input { display: block; width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--rfl-line, #ddd); border-radius: 4px; background: #fff; color: var(--rfl-ink, #111); font: inherit; font-size: 15px; font-weight: 600; }
.calc-find-input:focus { outline: 0; border-color: var(--rfl-accent, #c2410c); box-shadow: 0 0 0 3px rgba(194, 65, 12, .12); }
.calc-find-empty { margin: 10px 0 0; font-size: 14px; color: var(--rfl-ink-3, #6b7480); }

.hub-group { position: relative; margin-bottom: 34px; }
.hub-h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; padding-bottom: 9px; border-bottom: 2px solid var(--rfl-ink, #111); font-size: 19px; font-weight: 800; letter-spacing: -.03em; line-height: 1.4; color: var(--rfl-ink, #111); }
.hub-count { font-size: 12px; font-weight: 700; color: var(--rfl-ink-3, #6b7480); }
.hub-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; } /* 옛 /calc/#category-… 주소가 닿는 자리 */
.hub-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calc-hub a.calc-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--rfl-paper, #fff); border: 1px solid var(--rfl-line, #ddd); border-radius: 4px; color: var(--rfl-ink, #111); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.calc-hub a.calc-card:hover { transform: translateY(-2px); border-color: var(--rfl-accent, #c2410c); color: var(--rfl-ink, #111); text-decoration: none; }
.calc-card-name { font-size: 15.5px; font-weight: 800; line-height: 1.4; letter-spacing: -.03em; overflow-wrap: break-word; }
.calc-card-lead { font-size: 13px; line-height: 1.6; color: var(--rfl-ink-2, #3a4552); overflow-wrap: break-word; }
@media (max-width: 900px) { .hub-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-cards { grid-template-columns: 1fr; } .hub-head h1 { font-size: 23px; } }

/* 광고 칸: 원본 페이노트와 같은 규칙 — 위아래 10px, 본문 사이 광고는 크기 지정(휴대폰 300×250 · PC 336×280) 가운데. 채워지지 않으면 칸을 접는다 */
.calc-hub .adwrap { margin: 10px 0; text-align: center; }
.calc-hub .adwrap:has(ins[data-ad-status="unfilled"]) { display: none; }
.calc-hub .adwrap:not(:has(ins[data-ad-status="unfilled"])) + * { margin-top: 0; }
.calc-hub *:has(+ .adwrap:not(:has(ins[data-ad-status="unfilled"]))) { margin-bottom: 0; }
.calc-hub .ad-rect { display: block; width: 300px; height: 250px; margin: 0 auto; }
@media (min-width: 500px) { .calc-hub .ad-rect { width: 336px; height: 280px; } }
.calc-hub .ad-gapline { margin: 10px 0; padding: 5px 0; font-size: 12.5px; line-height: 1.55; color: var(--rfl-ink-3, #6b7480); text-align: center; }
@media print { .calc-find, .calc-hub .print-hide { display: none !important; } }