/* 연금 부족분 계산기 전용 스타일.
   공통 부품(.tkhead/.tkh/.tklead/.tkcard/.tkrow/.tknote…)은 /tools/assets/tools.css 를 쓴다.
   여기에는 이 서비스에만 있는 것 — 부족분 강조 줄, 빈칸·적립 계획 블록 — 만 둔다. */

/* 큰 숫자 바로 밑에 붙는 뜻풀이. 숫자만 던지지 않는다는 규칙이 여기서 눈에 보인다. */
.pn-mean{font-size:14.8px;line-height:1.85;color:#33405A;margin:14px 2px 18px;text-align:center}
.pn-mean b{color:var(--deep);font-weight:850}

/* 수입·지출 표. 합계 줄과 부족분 줄만 색으로 끊어 준다. */
.tkrow.pn-sum{border-top:1px solid var(--tk-line);border-bottom:1px solid var(--tk-line);
  background:var(--tk-surface);margin:2px -22px 0;padding:12px 22px}
.tkrow.pn-sum dt{color:var(--deep);font-weight:800}
.tkrow.pn-sum dd{color:var(--blue-d)}
.tkrow.pn-gap{padding-top:14px}
.tkrow.pn-gap dt{color:#A62121;font-weight:800}
.tkrow.pn-gap dd{color:#A62121;font-size:17px;font-weight:900}
@media(max-width:560px){.tkrow.pn-sum{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* 연금이 아직 안 나오는 기간 — 두 칸으로 나란히. */
.pn-blank{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 12px}
.pn-blank > div{background:#FFF6EE;border:1px solid #F4DCC4;border-radius:12px;padding:13px 15px}
.pn-blank .lb{display:block;font-size:12px;font-weight:700;color:#8A5A22;margin-bottom:4px}
.pn-blank b{font-size:19px;font-weight:900;color:#5C3A17;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums}
@media(max-width:460px){.pn-blank{grid-template-columns:1fr}}

/* 채워야 할 돈 → 지금부터 매달. 가운데 화살표로 두 숫자를 잇는다. */
.pn-plan{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:14px 0 12px}
.pn-plan > div:not(.arw){background:var(--light);border:1px solid #D8E3F7;border-radius:12px;padding:14px 16px}
.pn-plan .lb{display:block;font-size:12px;font-weight:700;color:var(--blue-d);margin-bottom:4px}
.pn-plan b{display:block;font-size:20px;font-weight:900;color:var(--deep);letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;line-height:1.3}
.pn-plan small{display:block;font-size:11.8px;font-weight:600;color:var(--gray);margin-top:4px}
.pn-plan .arw{color:var(--muted);font-size:20px;display:flex;align-items:center;justify-content:center}
@media(max-width:520px){
  .pn-plan{grid-template-columns:1fr;gap:8px}
  .pn-plan .arw{transform:rotate(90deg);font-size:17px}
}

/* 계산 근거 목록. 항목마다 한 줄 설명이 붙어 길어지므로 여백을 넉넉히 준다. */
.pn-basis{margin:0 0 12px;padding:0;list-style:none}
.pn-basis li{position:relative;padding:0 0 0 15px;margin:0 0 9px;font-size:13.6px;line-height:1.8}
.pn-basis li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--blue-surface)}
.pn-basis li:last-child{margin-bottom:0}
.pn-less{background:#F7F9FC;border:1px solid var(--tk-line);border-radius:11px;padding:11px 13px;
  font-size:13px;line-height:1.8;color:var(--gray);margin:0}

/* 노후생활비 칩은 네 개가 두 줄로 떨어지는 게 보기 좋다. */
.pn-needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:8px}
.pn-needs .tkchip span{text-align:left}
.pn-needs .tkchip span b{display:block;font-size:16px;font-weight:900;color:var(--deep);letter-spacing:-.4px;
  margin-top:3px;font-variant-numeric:tabular-nums}
.pn-needs .tkchip input:checked + span b{color:var(--blue-d)}

/* 단위가 붙는 입력칸(만원·년·세). 숫자 칸을 좁게 두고 단위를 오른쪽에 붙인다. */
.pn-unit{display:flex;align-items:center;gap:9px}
.pn-unit .tkinput{max-width:190px}
.pn-unit .u{font-size:14px;font-weight:700;color:var(--gray);flex-shrink:0}
.pn-unit .tkselect{max-width:190px}
.pn-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.pn-two{grid-template-columns:1fr;gap:20px}}