/* CURRENT Q 계산기 공통 스타일
   입력부는 가볍게, 결과부는 단말기처럼, 제목과 근거는 리포트처럼.
   모든 계산기 조각은 .cq-calc 안에 들어간다. */

.cq-calc {
  --calc-ink: #071a42;
  --calc-slate: #3d4f73;
  /* 흰 배경에서 4.5:1 을 넘기는 회색(5.00:1). 2026-09-26 전 #8894ab 는 3.06:1 로 AA 미달이었습니다. */
  --calc-mist: #647085;
  --calc-rule: #dce3eb;
  --calc-field: #f4f6fa;
  --calc-paper: #fff;
  --calc-slab: #0b1c33;
  --calc-slab-line: #22344f;
  --calc-gain: #0f7a5f;
  --calc-loss: #a03c2e;
  --calc-gain-dark: #5fd0a8;
  --calc-loss-dark: #ff9280;

  --calc-serif: var(--cq-display-serif, "Noto Serif KR", serif);
  --calc-figure: var(--cq-display-font, "Manrope", system-ui, sans-serif);

  color: var(--calc-ink);
  max-width: 46rem;
  margin: 0 auto;
  /* 계산기는 긴 글이 아니라 입력칸과 표 위주라 본문 행간(1.7)보다 좁게 둔다. 글자 크기는 그대로. */
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
.cq-calc * { box-sizing: border-box; }

/* 머리말 */

.cq-calc .calc-title {
  font-family: var(--calc-serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.4em;
}
.cq-calc .calc-lede {
  color: var(--calc-slate);
  font-size: 1rem;
  margin: 0 0 2rem;
  max-width: 58ch;
}

/* 탭 */

.cq-calc .calc-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--calc-rule);
  margin-bottom: 1.25rem;
}
.cq-calc .calc-tab {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  padding: 0.7em 1.1em;
  color: var(--calc-slate);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.cq-calc .calc-tab[aria-selected="true"] {
  color: var(--calc-ink);
  font-weight: 700;
  border-bottom-color: var(--calc-ink);
}
.cq-calc .calc-tab:focus-visible {
  outline: 2px solid var(--calc-ink);
  outline-offset: -3px;
  border-radius: 3px 3px 0 0;
}

/* 입력부 */

.cq-calc .calc-inputs {
  background: var(--calc-paper);
  border: 1px solid var(--calc-rule);
  border-radius: 10px;
  padding: 0.25rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}
.cq-calc .calc-group { border: 0; margin: 0; padding: 0; }
.cq-calc .calc-group + .calc-group {
  border-top: 1px solid var(--calc-rule);
  margin-top: 1rem;
  padding-top: 1rem;
}
.cq-calc .calc-group > legend {
  font-size: 1rem;
  font-weight: 700;
  color: var(--calc-slate);
  padding: 1.1rem 0 0.4rem;
}
.cq-calc .calc-group + .calc-group > legend { padding-top: 0; }
/* 브라우저는 legend를 fieldset 경계선 위에 그린다. 두 번째 묶음부터 선이 legend를 가로지르지 않게 흐름 안에 둔다.
   legend를 띄웠으므로 첫 묶음을 포함한 모든 묶음에서 다음 줄이 legend 옆으로 붙지 않게 clear한다. */
.cq-calc .calc-group > legend { float: left; width: 100%; }
.cq-calc .calc-group > legend + * { clear: both; }

/* 줄 간격(row-gap)은 줄바꿈된 요소 사이, 즉 모바일의 라벨→입력칸과 입력칸→빠른 선택 버튼 사이에만 쓰인다 */
/* hidden 이 붙은 줄은 감춥니다. display:flex 가 브라우저 기본 스타일의 hidden 을 눌러서
   방향에 따라 감춰야 할 입력이 그대로 보였습니다(전월세 환산, 2026-09-17). */
.cq-calc .calc-row[hidden] { display: none; }
.cq-calc .calc-row {
  display: flex;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.45rem 0;
  flex-wrap: wrap;
}
.cq-calc .calc-row > label { flex: 1 1 13rem; font-size: 1.125rem; line-height: 1.4; }
.cq-calc .calc-row > label .calc-hint {
  display: block;
  color: var(--calc-mist);
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0.15em;
}
.cq-calc .calc-entry {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.cq-calc input[type="number"],
.cq-calc input[data-thousands],
.cq-calc input[type="date"],
.cq-calc select {
  width: 11rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--calc-rule);
  border-radius: 8px;
  background: var(--calc-field);
  color: var(--calc-ink);
  font: inherit;
  font-size: 1.125rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cq-calc input[type="number"],
.cq-calc input[data-thousands] {
  text-align: right;
  font-family: var(--calc-figure);
  font-variant-numeric: tabular-nums;
}
.cq-calc input[type="number"]:hover,
.cq-calc input[data-thousands]:hover,
.cq-calc input[type="date"]:hover,
.cq-calc select:hover { border-color: var(--calc-mist); }
.cq-calc input[type="number"]:focus,
.cq-calc input[data-thousands]:focus,
.cq-calc input[type="date"]:focus,
.cq-calc select:focus {
  outline: 2px solid var(--calc-ink);
  outline-offset: 1px;
  background: var(--calc-paper);
  border-color: var(--calc-ink);
}
.cq-calc .calc-unit {
  font-size: 1rem;
  color: var(--calc-mist);
  white-space: nowrap;
}

/* 결과 슬래브 */

.cq-calc .calc-result {
  background: var(--calc-slab);
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.35rem;
  margin-bottom: 1.25rem;
  color: #e8eef7;
}
.cq-calc .calc-result-label {
  font-size: 1rem;
  color: #9db0cb;
  margin-bottom: 0.3rem;
}
.cq-calc .calc-figure {
  font-family: var(--calc-figure);
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 0.45rem;
}
.cq-calc .calc-figure.is-gain { color: var(--calc-gain-dark); }
.cq-calc .calc-figure.is-loss { color: var(--calc-loss-dark); }
.cq-calc .calc-figure.is-blocked {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  color: var(--calc-loss-dark);
  letter-spacing: -0.01em;
}
.cq-calc .calc-result-note {
  font-size: 1rem;
  line-height: 1.55;
  color: #b9c8dd;
  margin: 0;
  max-width: 52ch;
}
/* 값이 바뀌었을 때만 짧게 표시 */
.cq-calc .calc-figure.is-updating { animation: calc-tick 0.45s ease-out; }
@keyframes calc-tick {
  from { background: rgba(120, 170, 255, 0.22); }
  to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cq-calc .calc-figure.is-updating { animation: none; }
  .cq-calc input[type="number"],
  .cq-calc input[data-thousands],
  .cq-calc input[type="date"],
  .cq-calc select { transition: none; }
}
/* 날짜 칸은 브라우저 기본 모양이라 다른 칸과 달라 보였습니다(2026-09-25: 운영자가 입력칸을 못 찾음).
   같은 테두리·배경에 맞추고, 터치 목표 44px 을 지킵니다. */
.cq-calc input[type="date"] { min-height: 44px; font-family: var(--calc-figure); }

/* 내역 표 */

.cq-calc .calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.cq-calc .calc-table th,
.cq-calc .calc-table td {
  padding: 0.55rem 0.5rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--calc-rule);
  text-align: right;
  font-family: var(--calc-figure);
  font-variant-numeric: tabular-nums;
}
.cq-calc .calc-table th:first-child,
.cq-calc .calc-table td:first-child {
  text-align: left;
  font-family: inherit;
  font-variant-numeric: normal;
}
.cq-calc .calc-table thead th {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--calc-slate);
  border-bottom-color: var(--calc-slate);
}
.cq-calc .calc-table tbody tr.is-sub td:first-child {
  padding-left: 1.4rem;
  color: var(--calc-slate);
}
.cq-calc .calc-table tbody tr.is-total td {
  font-weight: 700;
  border-bottom: 2px solid var(--calc-ink);
}
.cq-calc .calc-table td.is-gain { color: var(--calc-gain); }
.cq-calc .calc-table td.is-loss { color: var(--calc-loss); }
.cq-calc .calc-table td.is-win { color: var(--calc-gain); font-weight: 700; }

/* 근거 */

.cq-calc .calc-basis {
  font-size: 1rem;
  color: var(--calc-slate);
  border-left: 2px solid var(--calc-rule);
  padding: 0.1rem 0 0.1rem 1rem;
  margin-top: 1.25rem;
  max-width: 60ch;
}
/* 근거 문단은 몇 줄씩 이어 읽는 글이라 긴 글 기준(다음 기사 18px/29px, 1.61)에 가깝게 둔다 */
.cq-calc .calc-basis p { margin: 0 0 0.45em; line-height: 1.6; }
.cq-calc .calc-basis p:last-child { margin: 0; }
.cq-calc .calc-basis .calc-asof {
  color: var(--calc-mist);
  font-size: 1rem;
}

/* 입력 도우미: 입력칸 바로 아래 누적 버튼 줄(버튼 5개)과 칸별 지우기(C). 동작은 /assets/cq-calc-input.js
   390px에서 버튼 5개와 C가 한 줄에 들어가도록 6칸 격자로 둔다. C는 늘 마지막 칸이라 줄마다 세로로 맞는다(수량 줄은 5번째 칸이 빈다).
   데스크톱은 같은 격자를 입력칸 아래 오른쪽에 붙인다. */
.cq-calc .calc-steps {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
  max-width: 21rem;
  margin-left: auto;
}
.cq-calc .calc-steps button {
  appearance: none;
  font: inherit;
  font-family: var(--calc-figure);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-height: 2.75rem;
  padding: 0 0.15rem;
  border: 1px solid var(--calc-rule);
  border-radius: 8px;
  background: var(--calc-field);
  color: var(--calc-ink);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cq-calc .calc-steps button:hover { border-color: var(--calc-mist); }
.cq-calc .calc-steps button:active { background: var(--calc-rule); }
.cq-calc .calc-steps button:focus-visible { outline: 2px solid var(--calc-ink); outline-offset: 1px; }
.cq-calc .calc-steps .calc-step-clear {
  grid-column: 6;
  background: var(--calc-paper);
  border-color: #e3c5bf;
  color: var(--calc-loss);
  font-weight: 700;
}

@media (max-width: 30rem) {
  .cq-calc .calc-steps { max-width: none; margin-left: 0; }
  .cq-calc .calc-steps button { min-height: 2.75rem; }
}

/* 계산기 페이지의 머리말과 관련 섹션
   이 파일은 계산기 페이지에만 붙으므로 여기서 사이트 공통 규칙(cq-reader-v512.css, 긴 글 기준 행간 1.75~1.85)을 계산기 페이지에서만 좁힌다.
   같은 선택자이거나 더 구체적이고 나중에 붙어서 이긴다. 글자 크기는 바꾸지 않는다. */

.cq-v512 .page-hero p { line-height: 1.6; }
.cq-related.cq-learn-preview { margin-top: 1.75rem; padding-top: 1.5rem; }
.cq-related .cq-section-heading { margin-bottom: 0.9rem; }
.cq-related .cq-editorial-grid { gap: 0.9rem; }
.cq-related .cq-editorial-card { padding: 1.25rem; }
.cq-related .cq-editorial-card h3 { margin: 0.5rem 0 0.4rem; line-height: 1.45; }
.cq-related .cq-editorial-card p { line-height: 1.6; margin-bottom: 0.9rem; }

/* 이 계산에 나오는 용어: 용어 사전으로 가는 이름 목록(src/lib/app.mjs toolTerms). 카드 대신 한 줄에 여러 개가 들어가는 알약 모양 */
.gl-tool-terms ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gl-tool-terms a { display: inline-block; font-size: 16px; line-height: 1.5; padding: 0.35rem 0.85rem; border: 1px solid var(--cq-line); border-radius: 999px; background: #fff; color: var(--cq-ink); text-decoration: none; }
.gl-tool-terms a:hover, .gl-tool-terms a:focus { border-color: #8ba6c7; color: var(--cq-blue); }
/* A term the glossary has not published yet: the same pill, not a link (2026-09-18). */
.gl-tool-terms .gl-term-plain { display: inline-block; font-size: 16px; line-height: 1.5; padding: 0.35rem 0.85rem; border: 1px solid var(--cq-line); border-radius: 999px; background: #f6f8fb; color: var(--cq-ink); }

/* 모바일 */

@media (max-width: 30rem) {
  .cq-calc .calc-inputs { padding: 0.25rem 1rem 1rem; }
  .cq-calc .calc-row { padding: 0.45rem 0; }
  .cq-calc .calc-row > label { flex: 1 1 100%; }
  .cq-calc .calc-entry { width: 100%; }
  .cq-calc input[type="number"],
  .cq-calc input[data-thousands],
  .cq-calc select { width: 100%; }
  .cq-calc .calc-result { padding: 1.1rem 1.1rem; }
  .cq-calc .calc-tab { padding: 0.7em 0.75em; font-size: 1rem; }
  .cq-calc .calc-table th,
  .cq-calc .calc-table td { padding: 0.5rem 0.3rem; }
}

/* ── 2단 배치 (2026-09-16, 매도 실수령액에서 먼저 시험) ─────────────────────
   app.mjs splitCalcLayout() 이 .calc-split > .calc-col-inputs + .calc-col-result 로 묶어 줍니다.
   좁은 화면에서는 한 줄로 쌓여, 지금까지와 순서가 같습니다(입력 → 결과 → 표 → 근거). */

.cq-calc.is-split { max-width: 68rem; }
.cq-calc .calc-split { display: grid; gap: 1.5rem; }

@media (min-width: 64rem) {
  .cq-calc .calc-split {
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  /* 붙박이로 둘 것은 결과 카드 하나입니다. 단 전체를 sticky 로 두면 두 단 높이가 비슷해
     움직일 자리가 없습니다. 카드만 붙이면 표와 근거를 읽는 동안 금액이 계속 보입니다.
     사이트 머리글이 108px 붙박이라 그 아래(7.75rem)에 세웁니다. */
  .cq-calc.is-split .calc-result { position: sticky; top: 7.75rem; z-index: 1; margin-bottom: 1rem; }

  /* 한 단으로 좁아진 입력 칸: 라벨을 윗줄에 두고 입력칸이 단 너비를 채웁니다.
     가로로 라벨과 입력칸을 나누면 27rem 안에서 둘 다 좁아집니다. */
  .cq-calc.is-split .calc-col-inputs .calc-row { align-items: flex-start; }
  .cq-calc.is-split .calc-col-inputs .calc-row > label { flex: 1 1 100%; }
  .cq-calc.is-split .calc-col-inputs .calc-entry { flex: 1 1 100%; align-items: center; }
  .cq-calc.is-split .calc-col-inputs .calc-entry > input,
  .cq-calc.is-split .calc-col-inputs .calc-entry > select { width: auto; flex: 1 1 auto; min-width: 0; }
  .cq-calc.is-split .calc-col-inputs .calc-steps { max-width: none; margin-left: 0; }

  /* 단위(원·주·%)를 입력칸 안 오른쪽에 넣습니다. 밖에 두면 입력칸이 단위 너비만큼 짧아져
     아래 단계 버튼 줄과 오른쪽 끝이 22px 어긋납니다. 안으로 넣으면 둘 다 단 너비를 꽉 채웁니다. */
  .cq-calc.is-split .calc-col-inputs .calc-entry { position: relative; }
  .cq-calc.is-split .calc-col-inputs .calc-entry > input { padding-right: 3.4rem; }
  .cq-calc.is-split .calc-col-inputs .calc-entry > .calc-unit {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* 결과 카드: 숫자를 키우고, 기준일을 카드 안 맨 아래에 옅게 둡니다. */
.cq-calc.is-split .calc-figure { font-size: clamp(2.25rem, 4.2vw, 2.9rem); }
.cq-calc .calc-result .calc-asof {
  display: block;
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1rem;
  line-height: 1.5;
  color: #93a6c2;
}

/* 근거: 제목을 달고 접습니다. 펼치기 전에도 무엇이 들었는지 보이게 합니다. */
.cq-calc .calc-basis-details {
  border: 1px solid var(--calc-line, #dce3eb);
  border-radius: 8px;
  background: #fff;
  margin-top: 1.25rem;
}
.cq-calc .calc-basis-details > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--calc-ink);
  cursor: pointer;
  list-style: none;
}
.cq-calc .calc-basis-details > summary::-webkit-details-marker { display: none; }
.cq-calc .calc-basis-details > summary::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid #7286a3;
  border-bottom: 2px solid #7286a3;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: none;
  margin-left: 0.15rem;
}
.cq-calc .calc-basis-details[open] > summary::before { transform: rotate(45deg); margin-top: -0.25rem; }
.cq-calc .calc-basis-details > summary:hover { color: var(--cq-blue, #275acb); }
.cq-calc .calc-basis-details > summary:focus-visible { outline: 3px solid #4581f1; outline-offset: 2px; }
.cq-calc .calc-basis-details .calc-basis { margin: 0; padding: 0 1.1rem 1.1rem; }

/* ── 계산기 페이지 다듬기 (2026-09-18, 벤치마킹: NerdWallet·사람인) ─────────────────────────
   1. 제목을 카드와 같은 분류 색 상자에 넣고, 머리글은 '매매 계산기'처럼 분류 이름으로.
      색은 cq-reader-v520.css 의 .cq-g-* 변수입니다. 이 파일은 계산기 페이지에만 붙습니다.
   2. 탭을 분할 버튼으로: 두 칸을 반씩 나누고, 고른 칸은 남색으로 채우고 ✓ 를 붙입니다.
      밑줄 탭은 누를 수 있는지 알기 어려웠습니다. ✓ 가 있어 색을 구분하지 못해도 고른 쪽을 압니다.
   3. 간격을 줄여 한 화면에 더 들어오게: 줄·묶음 여백, 넓은 화면에서는 빠른 버튼을 입력칸 옆으로,
      휴대폰에서는 짧은 라벨을 입력칸 옆으로. 글자 크기는 그대로(라벨 18px, 보조 16px). */

.cq-v512 .page-hero{padding:26px 32px}
.cq-v512 .page-hero p{margin-bottom:0}
.cq-v512 .page-hero .kicker[class*="cq-g-"]{color:var(--cq-chip-fg);font-weight:700;letter-spacing:0}
.cq-v512 .page-hero h1{margin:10px 0 12px}
.cq-v512 .page-hero .cq-page-name{display:inline-block;padding:6px 18px;border-radius:12px;
  background:var(--cq-chip-bg,#eef2f6);color:var(--cq-chip-fg,var(--cq-ink));line-height:1.35}

.cq-calc .calc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:0;border-radius:12px;
  background:#e9eef4;margin-bottom:.9rem}
.cq-calc .calc-tab{border:0;margin:0;border-radius:9px;min-height:48px;font-size:1.0625rem;font-weight:600;
  color:#40546b;white-space:normal;line-height:1.3;padding:.5em .6em}
.cq-calc .calc-tab:hover{background:#dde5ee}
.cq-calc .calc-tab[aria-selected="true"]{background:#14314c;color:#fff;border:0;box-shadow:0 1px 3px #0f294033}
.cq-calc .calc-tab[aria-selected="true"]::before{content:"✓ ";font-weight:700}
.cq-calc .calc-tab:focus-visible{outline:2px solid #1b4bc4;outline-offset:2px;border-radius:9px}

.cq-calc .calc-inputs{padding:.1rem 1rem .75rem}
.cq-calc .calc-group > legend{padding:.8rem 0 .2rem}
.cq-calc .calc-group + .calc-group{margin-top:.6rem;padding-top:.6rem}
.cq-calc .calc-row{padding:.2rem 0;gap:.25rem 1rem}
.cq-calc .calc-steps{gap:.25rem}
/* 2026-09-18 에 36px 로 줄였다가 손가락 목표 44px 규칙에 어긋나 되돌립니다(2026-09-26). 한 줄 여섯 칸이라 세로만 커집니다. */
.cq-calc .calc-steps button{min-height:2.75rem}

/* 넓은 화면의 1단 계산기: 빠른 버튼을 입력칸 오른쪽 같은 줄에. 2단(.is-split)은 입력 칸이 좁아 그대로 둡니다. */
@media (min-width: 1000px){
  .cq-calc:not(.is-split) .calc-row{flex-wrap:nowrap}
  .cq-calc:not(.is-split) .calc-row > label{flex:1 1 auto}
  .cq-calc:not(.is-split) .calc-steps{flex:0 0 19rem;max-width:19rem;margin-left:0}
}
/* 휴대폰: 라벨이 짧으면 입력칸과 같은 줄에. 긴 라벨은 알아서 윗줄로 내려갑니다. */
@media (max-width: 30rem){
  .cq-v512 .page-hero{padding:20px}
  .cq-v512 .page-hero .cq-page-name{padding:5px 14px}
  .cq-calc .calc-inputs{padding:.1rem .85rem .7rem}
  .cq-calc .calc-row{padding:.2rem 0}
  .cq-calc .calc-row > label{flex:1 1 5.5rem;min-width:0}
  .cq-calc .calc-entry{width:auto;flex:1 1 10rem}
  /* 보조 설명이 달린 라벨은 옆 칸에 넣으면 여러 줄로 꺾이므로 예전처럼 윗줄에 둡니다. */
  .cq-calc .calc-row:has(> label .calc-hint) > label{flex-basis:100%}
  /* 라벨 안에 입력칸이 있는 줄(리밸런싱 자산 이름)도 윗줄에. 옆에 두면 평가액 칸이 좁아져 숫자가 잘렸습니다. */
  .cq-calc .calc-row:has(> label > input) > label{flex-basis:100%}
  /* 선택 목록이 있는 줄도 윗줄에. 옆에 두면 목록 글자("보증금을 줄이고 월세로")가 잘렸습니다. */
  .cq-calc .calc-row:has(select) > label{flex-basis:100%}
}

/* 금액 읽어 주는 줄 (2026-09-18, cq-calc-input.js): 만원·원 입력칸 바로 아래, 입력칸 오른쪽 끝에 맞춘 한글 금액.
   위치는 스크립트가 정하고, 줄이 있는 입력 묶음에만 그만큼 아래 여백을 줍니다. 글자는 사이트 하한 16px. */
.cq-calc .calc-entry{position:relative}
.cq-calc .calc-entry.has-readout{padding-bottom:1.3rem}
.cq-calc .calc-readout{position:absolute;font-size:1rem;line-height:1.2;color:var(--calc-slate,#5b6b7d);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em;pointer-events:none}
.cq-calc .calc-readout[hidden]{display:none}
/* 2단에서 단위는 입력칸 안 오른쪽에 떠 있습니다(top:50%). 아래 여백이 생기면 그만큼 올려 입력칸 가운데에 둡니다. */
@media (min-width: 64rem){
  .cq-calc.is-split .calc-col-inputs .calc-entry.has-readout > .calc-unit{top:calc(50% - .65rem)}
  /* 한 묶음에 입력칸이 둘인 줄(리밸런싱: 평가액과 목표 비중)은 단위를 입력칸 뒤 제자리에 둡니다.
     떠 있게 두면 "만원"과 "%"가 묶음 오른쪽 끝에서 겹쳤습니다(2026-09-18 이전부터 있던 문제). */
  .cq-calc.is-split .calc-col-inputs .calc-entry:has(> input ~ input) > .calc-unit{position:static;transform:none}
  .cq-calc.is-split .calc-col-inputs .calc-entry:has(> input ~ input) > input{padding-right:.75rem}
}

/* 연말정산 미리보기(2026-09-20): 선택 입력 펼침과, 결과 아래 두 구역(공제별 기여, 12월 안에 할 수 있는 것).
   details 로 접는 선택 입력은 .calc-group 과 같은 간격을 쓰고, summary 는 근거 펼침과 같은 모양입니다. */
.cq-calc details.calc-more{border-top:1px solid var(--calc-rule);margin-top:.6rem;padding-top:.6rem}
.cq-calc details.calc-more > summary{font-size:1.125rem;font-weight:700;line-height:1.4;padding:.5rem 0;cursor:pointer;
  list-style:none;display:flex;align-items:baseline;gap:.5rem}
.cq-calc details.calc-more > summary::-webkit-details-marker{display:none}
.cq-calc details.calc-more > summary::before{content:"";width:.5rem;height:.5rem;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top:-.15rem}
.cq-calc details.calc-more[open] > summary::before{transform:rotate(45deg);margin-top:-.3rem}
.cq-calc details.calc-more > summary:hover{color:var(--cq-blue,#275acb)}
.cq-calc details.calc-more > summary:focus-visible{outline:3px solid #4581f1;outline-offset:2px}

.cq-calc .calc-extra{margin-top:1.6rem}
.cq-calc .calc-extra[hidden]{display:none}
.cq-calc .calc-extra > h3{font-size:1.25rem;line-height:1.4;margin:0 0 .6rem}
.cq-calc .yep-action{border:1px solid var(--calc-rule);border-radius:var(--cq-radius-md,14px);padding:1rem 1.1rem;margin-bottom:.8rem}
.cq-calc .yep-action > h4{font-size:1.125rem;line-height:1.4;margin:0 0 .4rem}
.cq-calc .yep-action > p{font-size:1rem;line-height:1.55;margin:0 0 .6rem}
.cq-calc .yep-action .calc-table{margin:0}
.cq-calc .yep-caveat{font-size:1rem;line-height:1.55;color:var(--calc-slate,#5b6b7d);margin:.6rem 0 0}

/* 연말정산 미리보기는 입력 칸이 25개라 왼쪽 단이 오른쪽보다 두 배 넘게 깁니다(1280px에서 2,338px 대 995px).
   격자가 align-items:start 라 오른쪽 단이 먼저 끝나 결과 카드가 중간에서 멈추고 아래가 비어 보였습니다.
   이 계산기에서만 오른쪽 단을 끝까지 늘려, 결과 카드가 입력을 따라 내려오게 합니다. */
@media (min-width: 64rem){
  #cq-yearend.is-split .calc-col-result{align-self:stretch}
}

/* 접은 묶음 제목 옆의 "입력됨" 표시와, 묶음 안 소제목(의료비 문턱, 4대보험 안내). */
.cq-calc .calc-filled{font-size:1rem;font-weight:600;line-height:1.2;color:#1f5130;background:#e3f0e7;
  border-radius:var(--cq-radius-pill,999px);padding:.15rem .55rem;white-space:nowrap}
.cq-calc .calc-filled[hidden]{display:none}
.cq-calc .calc-subhead{font-size:1rem;line-height:1.5;color:var(--calc-slate,#5b6b7d);margin:.7rem 0 .2rem}
.cq-calc .calc-row[hidden]{display:none}

/* 결과 카드 안에서 값을 채워 주는 작은 버튼(퇴직금 계산기의 「추정값 넣기」, 2026-09-20). 글자는 사이트 하한 16px. */
.cq-calc .calc-inline-btn{font:inherit;font-size:1rem;font-weight:700;line-height:1.2;color:#fff;background:var(--cq-blue,#275acb);
  border:0;border-radius:var(--cq-radius-pill,999px);padding:.45rem .9rem;margin-left:.15rem;cursor:pointer;min-height:2.75rem}
.cq-calc .calc-inline-btn:hover{filter:brightness(1.08)}
.cq-calc .calc-inline-btn:focus-visible{outline:3px solid #4581f1;outline-offset:2px}
.cq-calc #sev-floor{margin-top:.5rem}

/* 자주 묻는 질문(2026-09-20, 상위 5개 계산기). 화면에 보이는 그대로가 FAQPage 마크업의 내용입니다. */
.cq-faq dl { margin: 0; }
.cq-faq dt { font-size: 1.125rem; font-weight: 700; line-height: 1.45; margin: 0 0 .4rem; }
.cq-faq dd { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.7; color: var(--calc-ink, #1d2b3a); }
.cq-faq dd:last-child { margin-bottom: 0; }
.cq-faq dd a { text-decoration: underline; }

/* 계산기 아래 용어 알약(2026-09-21): 사이트의 다른 알약과 같은 높이·굵기로 맞춥니다. */
.gl-tool-terms ul { gap: 0.6rem; }
.gl-tool-terms a, .gl-tool-terms .gl-term-plain {
  min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1rem; font-weight: 700; transition: border-color .15s, background .15s, box-shadow .15s;
}
.gl-tool-terms a::before, .gl-tool-terms .gl-term-plain::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cq-blue, #275acb); flex: none;
}
.gl-tool-terms .gl-term-plain::before { background: #c6d2e2; }
.gl-tool-terms a:hover { background: #eaf1fb; border-color: #b9cdf0; box-shadow: 0 8px 18px -16px rgba(9, 22, 44, .8); }

/* 공유 링크(cq-calc-share.js, docs/share-link-design.md). 결과 카드 바로 아래 "링크 복사" 하나, 공유 링크로 열면
   결과 카드 위에 안내 한 줄. 글자는 16px 아래로 내리지 않고, 단추는 44px 높이를 지킵니다. */
.cq-calc .calc-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;margin:.75rem 0 0}
.cq-calc .calc-share-btn{font:inherit;font-size:1rem;font-weight:700;line-height:1.2;min-height:44px;padding:.625rem 1.125rem;
  color:var(--cq-ink,#132339);background:#fff;border:1px solid #c9d5e6;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;transition:border-color .15s,background .15s}
.cq-calc .calc-share-btn::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5'/%3E%3Cpath d='M14 10a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5'/%3E%3Cpath d='M14 10a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.cq-calc .calc-share-btn:hover{background:#f3f7fd;border-color:#9fb7de}
.cq-calc .calc-share-btn:focus-visible{outline:3px solid #4581f1;outline-offset:2px}
.cq-calc .calc-share-btn.is-done{color:#116859;border-color:#9fd0c2;background:#eef8f4}
.cq-calc .calc-share-btn.is-done::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.cq-calc .calc-share-hint{font-size:1rem;line-height:1.4;color:var(--cq-muted,#58697b)}
.cq-calc .calc-share-box{flex:1 1 100%;min-width:0;font:inherit;font-size:1rem;min-height:44px;padding:.5rem .75rem;
  border:1px solid #c9d5e6;border-radius:8px;background:#f7f9fc;color:var(--cq-ink,#132339)}
.cq-calc .calc-share-box[hidden]{display:none}
.cq-calc .calc-share-note{margin:0 0 .625rem;padding:.625rem .875rem;font-size:1rem;line-height:1.5;
  color:#1b3f8f;background:#eef3fc;border:1px solid #cfdcf3;border-radius:8px}
@media (prefers-reduced-motion:reduce){.cq-calc .calc-share-btn{transition:none}}

/* 결과 카드 안 비율 막대(2026-11-02). 결과 금액이 무엇으로 나뉘는지 한 줄 막대로 보여 줍니다.
   사용처: 월급 실수령액(실수령·4대보험·세금), 대출 상환(원금·이자), 목돈 목표(넣은 돈·불어난 돈), 퇴직소득세(실수령·세금).
   조각 색은 계산기 안에서 s1(파랑)·s2(주황)·s3(초록) 중 고르고, 0% 조각은 스크립트가 숨깁니다.
   색은 어두운 카드(#0b1c33) 위에서 색약 구분·대비 검사를 통과한 세 가지이고, 색만으로 뜻을 전하지 않도록 범례에 이름·금액·비율을 적습니다.
   조각 사이 2px 틈, 양 끝 4px 둥글게. 글자는 사이트 하한 16px. */
.cq-calc .calc-mix { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.cq-calc .calc-mix[hidden] { display: none; }
.cq-calc .calc-mix-title { font-size: 1rem; line-height: 1.4; color: #b9c6d8; margin-bottom: .55rem; }
.cq-calc .calc-mix-track { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.cq-calc .calc-mix-track > span { display: block; min-width: 2px; transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .cq-calc .calc-mix-track > span { transition: none; } }
.cq-calc .calc-mix-s1 { background: #3987e5; }
.cq-calc .calc-mix-s2 { background: #d95926; }
.cq-calc .calc-mix-s3 { background: #199e70; }
.cq-calc .calc-mix-legend { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .3rem; }
.cq-calc .calc-mix-legend li { display: flex; align-items: center; gap: .5rem; font-size: 1rem; line-height: 1.45; color: #e8eef7; }
.cq-calc .calc-mix-legend i { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.cq-calc .calc-mix-legend b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 결과 아래 덧붙임 글(월급 계산기의 비교·역산·프리랜서, 2026-11-03)과 근처 표의 지금 줄. */
.cq-calc .calc-extra-note{font-size:1.0625rem;line-height:1.6;margin:.5rem 0 0;color:var(--calc-ink,#14243d)}
.cq-calc .calc-table tr.is-current td{font-weight:700;background:var(--cq-chip-bg,#eef3fc)}
/* 「결과 복사」 단추는 링크 고리 대신 겹친 종이 아이콘(복사됨일 때는 위의 ✓ 규칙이 이깁니다). */
.cq-calc .calc-copy-btn:not(.is-done)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E")}
/* 「그림 공유」 단추: 그림 아이콘(2026-11-03). */
.cq-calc .calc-img-btn:not(.is-done)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E")}