/* 노후 계산기 — 큰 글씨, 큰 입력칸, "평균값 넣기" 단추, 입력값 저장 없음. 색·글자 크기는 테마 변수(style.css 의 --fs-*)를 그대로 쓴다. */
.in2l-calc { --fg: var(--wp--preset--color--primary, #245b8f); --fgd: var(--wp--preset--color--primary-dark, #173f65); --line: var(--wp--preset--color--line, #c7cdd4); --surface: var(--wp--preset--color--surface, #f3f6fa); --gray: var(--wp--preset--color--gray, #4b5563); --warn: var(--wp--preset--color--accent, #9a341f); --note: var(--wp--preset--color--note, #d9a21b); --ok: var(--wp--preset--color--health, #2b7a4b); }
.in2l-calc *, .in2l-calc-list * { box-sizing: border-box; }
.in2l-calc > * + * { margin-block-start: 0; }

/* 예시 채우기 안내 줄 */
.in2l-calc__demo { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; background: var(--surface); border-radius: 4px; padding: .8rem 1rem; margin: 0 0 1rem; font-size: var(--fs-sub, 1.125rem); line-height: 1.6; }
.in2l-calc__demo span { flex: 1 1 18rem; }

/* 단계 카드 */
.in2l-calc__step { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1.2rem 1.3rem; margin: 0 0 1rem; }
.in2l-calc__q { font-size: var(--fs-h3, 1.5rem); font-weight: 700; line-height: 1.45; margin: 0 0 .3rem; }
.in2l-calc__stephint { font-size: var(--fs-sub, 1.125rem); color: var(--gray); margin: 0 0 .4rem; }
.in2l-calc__field { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--line); }
.in2l-calc__field:first-of-type { border-top: 0; padding-top: 0; margin-top: .4rem; }
.in2l-calc__field[hidden] { display: none; }
.in2l-calc__label { display: block; font-size: var(--fs-body, 1.25rem); font-weight: 700; margin: 0 0 .3rem; }
.in2l-calc__hint { font-size: var(--fs-sub, 1.125rem); color: var(--gray); line-height: 1.6; margin: 0 0 .6rem; }
.in2l-calc__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.in2l-calc__input { font: inherit; font-size: var(--fs-h3, 1.5rem); font-weight: 700; padding: .5rem .8rem; min-height: 56px; width: 13rem; max-width: 100%; border: 2px solid var(--line); border-radius: 4px; text-align: right; color: var(--wp--preset--color--contrast, #20242a); background: #fff; }
.in2l-calc__input::placeholder { color: #9aa3ad; font-weight: 400; }
.in2l-calc__input:focus { border-color: var(--fg); }
.in2l-calc__unit { font-size: var(--fs-body, 1.25rem); font-weight: 700; }
.in2l-calc__read { font-size: var(--fs-sub, 1.125rem); color: var(--fgd); font-weight: 700; margin: .35rem 0 0; min-height: 1.5em; }

/* 평균값 단추·표시 */
.in2l-calc__avgbtn { font: inherit; font-size: var(--fs-sub, 1.125rem); font-weight: 700; min-height: 48px; padding: .45rem .9rem; border: 2px solid var(--fg); border-radius: 4px; background: #fff; color: var(--fgd); cursor: pointer; }
.in2l-calc__avgbtn[aria-pressed="true"] { background: var(--fg); color: #fff; }
.in2l-calc__avgbtn:hover { text-decoration: underline; }
.in2l-calc__badge { display: inline-block; font-size: var(--fs-meta, 1rem); font-weight: 700; line-height: 1.4; padding: .15rem .6rem; border-radius: 8px; background: #fff3cd; color: #7a5a00; margin-left: .5rem; vertical-align: middle; }
.in2l-calc__badge[hidden] { display: none; }
.in2l-calc__badge--own { background: #e8f3ec; color: var(--ok); }
.in2l-calc__badge--rule { background: #e9eff7; color: var(--fgd); }
.in2l-calc__src { font-size: var(--fs-meta, 1rem); line-height: 1.6; color: var(--gray); margin: .5rem 0 0; padding: .55rem .8rem; background: var(--surface); border-left: 3px solid var(--note); }
.in2l-calc__src a { color: var(--fgd); }
.in2l-calc__src--err { border-left-color: var(--warn); color: var(--warn); font-weight: 700; }

/* 고르기 단추 */
.in2l-calc__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.in2l-calc__opt { font: inherit; font-size: var(--fs-body, 1.25rem); font-weight: 700; line-height: 1.4; padding: .6rem 1rem; min-height: 52px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--wp--preset--color--contrast, #20242a); cursor: pointer; text-align: left; }
.in2l-calc__opt[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: #fff; }

/* 결과 */
.in2l-calc__result { border-top: 2px solid var(--fgd); border-bottom: 1px solid var(--line); padding: 1.3rem 0 1rem; margin: 1.6rem 0 1rem; }
.in2l-calc__result h2 { font-size: var(--fs-h2, 1.875rem); margin: 0 0 .7rem; }
.in2l-calc__wait { background: var(--surface); border-radius: 4px; padding: 1.1rem 1.2rem; font-size: var(--fs-body, 1.25rem); line-height: 1.6; }
.in2l-calc__missing { color: var(--warn); font-weight: 700; }
.in2l-calc__headline { font-size: var(--fs-h3, 1.5rem); font-weight: 700; line-height: 1.5; margin: 0 0 .5rem; }
.in2l-calc__headline strong { color: var(--fgd); }
.in2l-calc__sub { font-size: var(--fs-sub, 1.125rem); color: var(--gray); margin: 0 0 1rem; }
.in2l-calc__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sub, 1.125rem); margin: .4rem 0 1.2rem; }
.in2l-calc__table caption { text-align: left; font-weight: 700; font-size: var(--fs-body, 1.25rem); padding: .4rem 0; }
.in2l-calc__table th, .in2l-calc__table td { padding: .55rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.in2l-calc__table th { width: 42%; overflow-wrap: anywhere; }   /* 띄어쓰기 없는 긴 이름이 좁은 화면에서 표를 밀어내지 않게 */
.in2l-calc__table td.num { text-align: right; white-space: nowrap; font-weight: 700; }
.in2l-calc__table td.memo { font-size: var(--fs-meta, 1rem); color: var(--gray); }
.in2l-calc__table tr.total th, .in2l-calc__table tr.total td { font-weight: 800; border-top: 2px solid var(--fgd); border-bottom: 0; font-size: var(--fs-body, 1.25rem); }
.in2l-calc__table tr.total td.num { color: var(--fgd); }
.in2l-calc details { border: 1px solid var(--line); border-radius: 4px; padding: .5rem 1rem; margin: .8rem 0; }
.in2l-calc summary { font-size: var(--fs-body, 1.25rem); font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.in2l-calc details ul, .in2l-calc details ol { margin: .4rem 0 .6rem 1.3rem; padding: 0; font-size: var(--fs-sub, 1.125rem); line-height: 1.7; }
.in2l-calc__caution { border: 1px solid var(--warn); border-radius: 4px; padding: .9rem 1.1rem; margin: 1rem 0; font-size: var(--fs-sub, 1.125rem); line-height: 1.7; }
.in2l-calc__caution p { margin: 0 0 .3rem; }
.in2l-calc__caution strong { color: var(--warn); }
.in2l-calc__caution ul { margin: .2rem 0 0 1.3rem; padding: 0; }
.in2l-calc__basis { border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.2rem; margin: 1rem 0; font-size: var(--fs-sub, 1.125rem); line-height: 1.7; }
.in2l-calc__basis h3 { font-size: var(--fs-body, 1.25rem); margin: 0 0 .5rem; }
.in2l-calc__basis h4 { font-size: var(--fs-sub, 1.125rem); margin: .8rem 0 .2rem; }
.in2l-calc__basis ul { margin: .2rem 0 .4rem 1.3rem; padding: 0; }
.in2l-calc__basis a { color: var(--fgd); }
.in2l-calc__meta { font-size: var(--fs-meta, 1rem); color: var(--gray); margin: .6rem 0 0; }
.in2l-calc__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.in2l-calc__btn { font: inherit; font-size: var(--fs-body, 1.25rem); font-weight: 700; min-height: 52px; padding: .6rem 1.2rem; border-radius: 4px; border: 2px solid var(--fgd); background: var(--fgd); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.in2l-calc__btn--ghost { background: #fff; color: var(--fgd); }

/* 결과 링크 보내기(2026-11-08): 단추 아래 안내 상자, 받은 링크로 열었을 때 띠 */
.in2l-calc__share { border: 1px solid var(--line); border-left: 4px solid var(--fgd); border-radius: 4px; padding: .9rem 1.1rem; margin: 0 0 1rem; font-size: var(--fs-sub, 1.125rem); line-height: 1.6; background: var(--surface); }
.in2l-calc__share[hidden] { display: none; }
.in2l-calc__share p { margin: 0 0 .5rem; }
.in2l-calc__sharemsg { font-weight: 700; color: var(--fgd); }
.in2l-calc__shareurl { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.in2l-calc__shareurl input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: var(--fs-meta, 1rem); padding: .5rem .7rem; min-height: 48px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: inherit; }
/* 기준값 갱신 달력 (2026-11-09): 바뀌는 때가 지난 기준은 맨 위 띠와 목록에서 "확인 중"으로 보인다 */
.in2l-calc__due { background: #fff3cd; border-left: 4px solid var(--note); border-radius: 4px; padding: .9rem 1.1rem; margin: 0 0 1rem; font-size: var(--fs-sub, 1.125rem); line-height: 1.6; }
.in2l-calc__due p { margin: 0; }
.in2l-calc__due strong { color: #7a5a00; }
.in2l-calc__refresh li { margin: 0 0 .35rem; }
.in2l-calc__refresh li.is-due { background: #fff3cd; border-radius: 4px; padding: .2rem .5rem; }
.in2l-calc__duetag, .in2l-calc-cal__due { display: inline-block; font-size: var(--fs-meta, 1rem); font-weight: 700; line-height: 1.5; padding: .1rem .55rem; border-radius: 8px; background: #7a5a00; color: #fff; margin-left: .5rem; vertical-align: middle; white-space: nowrap; }
/* 모음 페이지의 달력([in2l_calc_calendar]) — .in2l-calc 바깥이라 테마 변수를 직접 쓴다 */
.in2l-calc-cal { list-style: none; margin: 1rem 0 .6rem; padding: 0; display: grid; gap: .6rem; }
.in2l-calc-cal li { display: grid; grid-template-columns: 11rem 1fr; column-gap: 1rem; row-gap: .15rem; border: 1px solid var(--wp--preset--color--line, #c7cdd4); border-radius: 4px; padding: .9rem 1.1rem; margin: 0; background: #fff; font-size: var(--fs-sub, 1.125rem); line-height: 1.6; }
.in2l-calc-cal li.is-due { border-color: var(--wp--preset--color--note, #d9a21b); background: #fff8e1; }
.in2l-calc-cal__when { grid-row: 1 / span 3; font-weight: 700; font-size: var(--fs-body, 1.25rem); line-height: 1.5; color: var(--wp--preset--color--primary-dark, #173f65); }
.in2l-calc-cal__what { font-weight: 700; color: var(--wp--preset--color--contrast, #20242a); }
.in2l-calc-cal__kind { display: inline-block; font-size: var(--fs-meta, 1rem); font-weight: 700; line-height: 1.5; padding: .05rem .5rem; border-radius: 8px; background: var(--wp--preset--color--surface, #f3f6fa); color: var(--wp--preset--color--gray, #4b5563); margin-left: .45rem; vertical-align: middle; }
.in2l-calc-cal__who, .in2l-calc-cal__now { color: var(--wp--preset--color--gray, #4b5563); }
.in2l-calc-cal__now a { color: var(--wp--preset--color--primary-dark, #173f65); }
.in2l-calc-cal__meta { font-size: var(--fs-meta, 1rem); color: var(--wp--preset--color--gray, #4b5563); margin: 0 0 1.5rem; }
@media (max-width: 767px) { .in2l-calc-cal li { grid-template-columns: 1fr; padding: .8rem .9rem; } .in2l-calc-cal__when { grid-row: auto; } }

.in2l-calc__shared { background: #fff3cd; border-left: 4px solid var(--note); border-radius: 4px; padding: .8rem 1rem; margin: 1.4rem 0 0; font-size: var(--fs-sub, 1.125rem); line-height: 1.6; font-weight: 700; }

/* 계산기 목록(모음 페이지·각 계산기 아래 "다른 계산기") */
.in2l-calc-list { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.in2l-calc-list li { margin: 0; }
.in2l-calc-list a, .in2l-calc-list .is-soon { display: block; border: 1px solid var(--wp--preset--color--line, #c7cdd4); border-radius: 4px; padding: 1rem 1.2rem; text-decoration: none; color: inherit; background: #fff; }
.in2l-calc-list a:hover, .in2l-calc-list a:focus-visible { border-color: var(--wp--preset--color--primary, #245b8f); }
.in2l-calc-list__name { display: block; font-size: var(--fs-h3, 1.5rem); font-weight: 700; line-height: 1.4; color: var(--wp--preset--color--primary-dark, #173f65); }
.in2l-calc-list a:hover .in2l-calc-list__name { text-decoration: underline; }
.in2l-calc-list__desc { display: block; font-size: var(--fs-sub, 1.125rem); line-height: 1.6; color: var(--wp--preset--color--gray, #4b5563); margin-top: .3rem; }
.in2l-calc-list .is-soon { background: var(--wp--preset--color--surface, #f3f6fa); }
.in2l-calc-list .is-soon .in2l-calc-list__name { color: var(--wp--preset--color--gray, #4b5563); }
.in2l-calc-list__soon { display: inline-block; font-size: var(--fs-meta, 1rem); font-weight: 700; padding: .1rem .5rem; border-radius: 8px; background: #e9eff7; color: var(--wp--preset--color--primary-dark, #173f65); margin-left: .4rem; vertical-align: middle; }
.in2l-calc__others h2 { font-size: var(--fs-h3, 1.5rem); margin: 1.5rem 0 .4rem; }

/* 가격 확인하는 곳·관련 계산기 줄 (2026-11-09 계산기 연계): 공시가격 알리미 등 공식 누리집으로 가는 단추, 다른 계산기로 값을 가져가는 링크 */
.in2l-calc__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.in2l-calc__look { margin: .7rem 0 0; padding: .2rem 1rem .2rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.in2l-calc__look > summary.in2l-calc__looktitle { font-size: var(--fs-sub, 1.125rem); font-weight: 700; color: var(--fgd); min-height: 48px; display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.in2l-calc__look[open] > summary.in2l-calc__looktitle { margin: 0 0 .5rem; }
.in2l-calc__look > summary:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.in2l-calc__look > summary::-webkit-details-marker { display: none; }
.in2l-calc__look > summary::after { content: '펼쳐 보기'; margin-left: auto; padding-left: .8rem; font-size: var(--fs-meta, 1rem); font-weight: 700; color: var(--gray); text-decoration: none; white-space: nowrap; }
.in2l-calc__look[open] > summary::after { content: '접기'; }
.in2l-calc__lookbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.in2l-calc__look[open] { padding-bottom: .8rem; }
.in2l-calc__lookbtn { display: inline-flex; align-items: center; min-height: 48px; padding: .45rem .9rem; border: 1px solid var(--fg); border-radius: 4px; background: #fff; color: var(--fgd); font-size: var(--fs-sub, 1.125rem); font-weight: 700; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; }
.in2l-calc__lookbtn:hover { background: #e9eff7; }
.in2l-calc__lookbtn:focus-visible, .in2l-calc__rel a:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.in2l-calc__looknote { font-size: var(--fs-meta, 1rem); line-height: 1.6; color: var(--gray); margin: .55rem 0 0; }
.in2l-calc__looknote a { color: var(--fgd); }
.in2l-calc__rel { font-size: var(--fs-sub, 1.125rem); line-height: 1.7; color: var(--gray); margin: .6rem 0 0; }
.in2l-calc__rel a { color: var(--fgd); font-weight: 700; display: inline-block; padding: .55rem 0; }
.in2l-calc__shared--carry { margin: 0 0 1rem; background: #e9eff7; border-left-color: var(--fgd); }
.in2l-calc__term { font-size: var(--fs-meta, 1rem); color: var(--gray); }
.in2l-calc__cta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .8rem 0 1rem; }
.in2l-calc__cta .in2l-calc__btn:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.in2l-calc__ctanote { font-size: var(--fs-meta, 1rem); color: var(--gray); flex: 1 1 14rem; }

@media (max-width: 600px) {
  .in2l-calc__step { padding: 1rem; }
  .in2l-calc__input { width: auto; flex: 1 1 8rem; min-width: 0; }   /* 숫자칸과 단위(세·만원)는 한 줄, 평균값 단추는 다음 줄 */
  .in2l-calc__avgbtn { width: 100%; }
  .in2l-calc__lookbtn { flex: 1 1 100%; }
  .in2l-calc__table th { width: 48%; }
  .in2l-calc__table td.num { white-space: normal; }
  .in2l-calc__table td.memo { display: none; }
}
@media print {
  .in2l-header, .in2l-footer, .in2l-calc__actions, .in2l-calc__share, .in2l-calc__shared, .in2l-calc__avgbtn, .in2l-calc__others, .in2l-calc__look, .in2l-calc__rel, .in2l-calc__cta { display: none !important; }
  .in2l-calc__step, .in2l-calc__result { break-inside: avoid; }
}

/* 자주 묻는 질문 (2026-11-09 검색 노출: 구조화 데이터와 같은 내용을 화면에도 보인다) */
.in2l-calc-faq { margin: 2rem 0 1rem; padding-top: 1rem; border-top: 2px solid var(--wp--preset--color--line, #c7cdd4); }
.in2l-calc-faq h2 { font-size: var(--fs-h2, 1.875rem); margin: 0 0 .6rem; }
.in2l-calc-faq h3 { font-size: var(--fs-h3, 1.5rem); line-height: 1.45; margin: 1.2rem 0 .3rem; }
.in2l-calc-faq p { font-size: var(--fs-body, 1.25rem); line-height: 1.8; margin: 0; }

/* 신청 전 공식 확인 상자 (2026-11-09: 법·고시 변경 시차 안내, 기준일·다음 변경 예정·확인처) */
.in2l-calc__verify { border: 2px solid var(--fg); border-radius: 4px; padding: .9rem 1.1rem; margin: 1rem 0; font-size: var(--fs-sub, 1.125rem); line-height: 1.7; background: #fff; }
.in2l-calc__verify p { margin: 0 0 .3rem; color: var(--fgd); }
.in2l-calc__verify ul { margin: .2rem 0 0 1.3rem; padding: 0; }
.in2l-calc__verify li { margin: 0 0 .3rem; }
.in2l-calc__verify a { color: var(--fgd); font-weight: 700; }