/* 이 파일은 make_font_subset.py 가 자동 생성합니다. 직접 고치지 마세요. */
/* Noto Sans KR / Noto Serif KR — SIL Open Font License 1.1 */
/* 사이트에 실제로 쓰인 글자만 담은 서브셋 (자체 호스팅) */

@font-face {
  font-family: 'NotoSerifKRsub';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/noto-serif-kr-700.woff2') format('woff2');
}
@font-face {
  font-family: 'NotoSansKRsub';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-kr-400.woff2') format('woff2');
}
@font-face {
  font-family: 'NotoSansKRsub';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-kr-700.woff2') format('woff2');
}

@charset "utf-8";
/* ============================================================================
 * 호주 급여·세금 계산기 — 공용 스타일
 * 디자인 방향: 금융 신문 편집(editorial) — 종이톤 지면, 명조 제목,
 *              헤어라인 괘선, 등폭 숫자. 카드/그림자/그라데이션 사용하지 않음.
 * ========================================================================== */

:root {
  /* 지면 */
  --paper:      #f3efe6;   /* 바탕 */
  --sheet:      #fdfcf9;   /* 본문 지면 */
  --sheet-2:    #f8f5ee;   /* 보조 블록 */

  /* 잉크 */
  --ink:        #17140f;
  --ink-2:      #403a31;
  --ink-3:      #574f43;
  --muted:      #6d6458;

  /* 괘선 */
  --rule:       #cfc7b6;
  --rule-2:     #e3ddd0;

  /* 강조 */
  --ochre:      #a85a0c;   /* 링크·강조 */
  --ochre-2:    #8c4a08;
  --ochre-bg:   #f6ecdc;
  --green:      #1d5138;   /* 실수령액 */
  --red:        #9d2b20;   /* 차감 */

  /* 서체 */
  --serif: NotoSerifKRsub, "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo,
           Batang, "바탕", serif;
  --sans: NotoSansKRsub, -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Courier New", monospace;
  /* 라벨(한글 포함)은 산세리프로. 등폭은 아래 예외 목록의 숫자에만 쓴다 */
  --label: var(--sans);

  --gut: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -.003em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--ochre); text-decoration: none; }
a:hover { color: var(--ochre-2); text-decoration: underline; text-underline-offset: .18em; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}

strong { font-weight: 700; color: var(--ink); }
em { font-style: normal; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 작은 라벨 공통 (등폭 + 넓은 자간) */
.kicker, .doc-meta, .ad-slot, .toc h2, .src-list h2,
.res-table thead th, .bracket-table th, .field > label, .field > .label,
.stat dt, .figure-box .fb-lab, .net-box .net-label, .site-nav a, .idx-meta {
  font-family: var(--label);
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ══ 머리글 ═══════════════════════════════════════════════════════════════ */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 60px;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 10px;
  color: var(--ink); font-family: var(--serif); font-weight: 700;
  font-size: 19px; letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; color: var(--ochre-2); }
.brand-mark {
  font-family: var(--label); font-size: 13px; font-weight: 700;
  letter-spacing: .02em; color: var(--paper); background: var(--ink);
  padding: 3px 6px 2px; transform: translateY(-3px);
}
.brand-sub {
  display: none;
  font-family: var(--label); font-size: 12.5px; font-weight: 400;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
}
@media (min-width: 560px) { .brand-sub { display: inline; } }

#nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--rule); color: var(--ink);
}
.site-nav { display: none; }
body.nav-open .site-nav {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--ink);
  padding: 4px var(--gut) 12px;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 11px 0; font-size: 13.5px; font-weight: 400;
  color: var(--ink-2); border-bottom: 1px solid var(--rule-2);
}
.site-nav a:hover { color: var(--ochre-2); text-decoration: none; }

@media (min-width: 860px) {
  #nav-toggle { display: none; }
  .site-nav {
    display: block !important; position: static !important;
    background: none !important; border: 0 !important; padding: 0 !important;
  }
  .site-nav ul { display: flex; gap: 22px; }
  .site-nav a { padding: 0; border: 0; }
}

/* ══ 첫 화면 (계산기 페이지) ══════════════════════════════════════════════ */
.lede { border-bottom: 1px solid var(--ink); background: var(--paper); }
.lede-grid { padding-block: 26px 28px; }
.kicker {
  font-size: 13px; font-weight: 400; color: var(--ochre); margin: 0 0 14px;
}
.lede h1 {
  font-size: 30px; line-height: 1.3; margin: 0 0 14px; letter-spacing: -.03em;
}
.lede h1 em { color: var(--ochre); }
.lede-text { margin: 0; max-width: 30em; color: var(--ink-2); font-size: 15px; }

.lede-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule);
}
.lede-facts > div {
  min-width: 0; padding: 13px 12px 12px 0; border-right: 1px solid var(--rule-2);
}
.lede-facts > div:last-child { border-right: 0; }
.lede-facts dt {
  font-family: var(--label); font-size: 12px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.lede-facts dd {
  margin: 0; font-family: var(--label); font-size: 19px; font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
}
.lede-facts dd span {
  display: block; font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0; color: var(--ink-3); text-transform: none;
}

@media (min-width: 820px) {
  .lede-grid {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 40px; align-items: end; padding-block: 44px 40px;
  }
  .lede h1 { font-size: 44px; }
  .lede-text { font-size: 16.5px; }
  .lede-facts { margin: 0; grid-template-columns: 1fr; border-top: 0; }
  .lede-facts > div {
    border-right: 0; border-top: 1px solid var(--rule-2);
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 10px 0 9px;
  }
  .lede-facts > div:first-child { border-top: 1px solid var(--ink); }
  .lede-facts dd { text-align: right; }
}

/* ══ 광고 슬롯 ════════════════════════════════════════════════════════════ */
.ad-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; margin: 24px 0; padding: 16px; min-height: 92px;
  background: transparent;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  color: var(--muted); font-size: 12px; letter-spacing: .04em;
}
.ad-slot b { font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.ad-slot--inarticle { min-height: 210px; }

/* ══ 지면 블록 ════════════════════════════════════════════════════════════ */
main { display: block; padding-bottom: 10px; }

.panel {
  background: var(--sheet); border: 1px solid var(--rule); padding: 22px var(--gut);
}
@media (min-width: 760px) { .panel { padding: 32px 36px; } }

.panel-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif); font-size: 19px; font-weight: 700;
}
.panel-title .tax-year {
  flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--label); font-size: 12px; font-weight: 400;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--ochre); white-space: nowrap;
}

/* ══ 계산기 ═══════════════════════════════════════════════════════════════ */
.calc-grid { display: grid; grid-template-columns: 1fr; margin-top: 22px; }
.calc-grid > * { min-width: 0; }
.calc-grid > .panel--form { border-bottom: 0; }
@media (min-width: 940px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .calc-grid > .panel--form { border-bottom: 1px solid var(--rule); border-right: 0; }
  .calc-grid > .panel--result { position: sticky; top: 76px; }
}

.field { margin-bottom: 22px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > .label {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 400; color: var(--ink-3);
}
.field .hint {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}

select, input[type="text"], input[type="number"] {
  width: 100%; min-width: 0; height: 44px; padding: 0 2px;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0; appearance: none; -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%2317140f' d='M5.5 7 0 1.2 1.2 0 5.5 4.5 9.8 0 11 1.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  padding-right: 26px; cursor: pointer;
}
select:focus, input:focus { outline: 0; border-bottom: 2px solid var(--ochre); }

.money-input { position: relative; min-width: 0; }
.money-input .cur {
  position: absolute; left: 0; bottom: 12px;
  font-family: var(--label); font-size: 19px; font-weight: 700;
  color: var(--muted); pointer-events: none;
}
.money-input input {
  padding-left: 22px; padding-right: 62px; height: 54px;
  font-family: var(--label); font-size: 27px; font-weight: 700; letter-spacing: -.02em;
}
.money-input .unit {
  position: absolute; right: 0; bottom: 14px;
  font-family: var(--label); font-size: 12.5px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); pointer-events: none;
}

.quick-row { display: flex; flex-wrap: wrap; gap: 0; margin-top: 12px; }
.quick-btn {
  font-family: var(--label); font-size: 13.5px; font-weight: 400;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--rule); border-left-width: 0;
  padding: 6px 12px; cursor: pointer;
}
.quick-btn:first-child { border-left-width: 1px; }
.quick-btn:hover { background: var(--ochre-bg); color: var(--ochre-2); border-color: var(--ochre); }

.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.radio-card {
  position: relative; display: block; cursor: pointer;
  padding: 9px 2px 8px; text-align: left;
  border-top: 1px solid var(--rule); border-bottom: 2px solid transparent;
}
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.radio-card span {
  display: block; font-family: var(--label); font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
}
.radio-card:has(input:checked) { border-bottom-color: var(--ochre); }
.radio-card:has(input:checked) strong { color: var(--ink); }
.radio-card input:checked ~ strong { color: var(--ink); }

.super-row { display: grid; grid-template-columns: 1fr 88px; gap: 18px; align-items: end; }

.note {
  margin-top: 20px; padding: 0 0 0 14px;
  border-left: 2px solid var(--ochre);
  font-size: 13px; line-height: 1.7; color: var(--ink-2);
}

.btn-primary {
  display: block; width: 100%; margin-top: 24px; height: 50px;
  font-family: var(--label); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  border: 0; border-radius: 0; cursor: pointer;
}
.btn-primary:hover { background: var(--ochre-2); }

/* ══ 결과 ═════════════════════════════════════════════════════════════════ */
.net-box { padding: 0 0 20px; margin: 0 0 4px; border-bottom: 1px solid var(--ink); }
.net-box .net-label {
  display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); margin-bottom: 6px;
}
.net-box .net-amount {
  display: block; font-family: var(--label); font-weight: 700;
  font-size: 40px; line-height: 1.05; letter-spacing: -.035em; color: var(--green);
}
.net-box .net-annual {
  display: block; margin-top: 7px; font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 420px) { .net-box .net-amount { font-size: 50px; } }

.res-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.res-table thead th {
  font-size: 12px; font-weight: 400; color: var(--muted);
  text-align: right; padding: 12px 0 7px; border-bottom: 1px solid var(--rule);
}
.res-table thead th:first-child { text-align: left; }
.res-table th[scope="row"] {
  text-align: left; font-weight: 700; color: var(--ink);
  padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule-2);
}
.res-table th[scope="row"] small {
  font-family: var(--label); font-weight: 400; font-size: 12px;
  letter-spacing: .02em; text-transform: uppercase; color: var(--muted);
}
.res-table .row-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.res-table td {
  padding: 12px 0; border-bottom: 1px solid var(--rule-2);
  font-family: var(--label); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}
.res-table .num { font-weight: 700; }
.res-table .annual { padding-left: 14px; color: var(--ink-3); font-weight: 400; }
.res-table .is-minus .num { color: var(--red); }
.res-table .is-zero .num { color: var(--muted); font-weight: 400; }
.res-table .is-net th[scope="row"],
.res-table .is-net td { border-bottom: 1px solid var(--ink); }
.res-table .is-net .num { color: var(--green); }
.res-table .is-super .num { color: var(--ochre); }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.stat { padding: 14px 14px 13px 0; border-bottom: 1px solid var(--rule-2); }
.stat:last-child { padding-right: 0; padding-left: 14px; border-left: 1px solid var(--rule-2); }
.stat dt { font-size: 12px; font-weight: 400; color: var(--muted); }
.stat dt small { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.stat dd {
  margin: 3px 0 0; font-family: var(--label); font-size: 18px; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}

.bracket-block { margin-top: 24px; }
.bracket-block > h3 {
  font-family: var(--label); font-size: 12.5px; font-weight: 400;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bracket-table { width: 100%; min-width: 400px; border-collapse: collapse; font-size: 12.5px; }
.bracket-table th {
  font-size: 13.5px; font-weight: 400; color: var(--muted); text-align: right;
  padding: 8px 0 7px; border-bottom: 1px solid var(--rule-2);
}
.bracket-table th:first-child { text-align: left; }
.bracket-table td {
  padding: 9px 0; border-bottom: 1px solid var(--rule-2);
  font-family: var(--label); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: left;
}
.bracket-table .num { text-align: right; }
.bracket-table td + td { padding-left: 12px; }
.bracket-table .empty {
  text-align: center; color: var(--muted); padding: 22px 8px;
  white-space: normal; font-family: var(--sans);
}

.disclaimer {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule-2);
  font-size: 13.5px; line-height: 1.75; color: var(--muted);
}

/* ══ 본문 조판 ════════════════════════════════════════════════════════════ */
.article-panel { margin-top: 22px; }

.prose { font-size: 16px; color: var(--ink-2); }
.prose > * { max-width: 42rem; }          /* 본문 가독 폭 */
.prose > .lead { max-width: 46rem; }
@media (min-width: 720px) { .prose .lead { font-size: 18px; line-height: 1.68; } }
.prose > h2,
.prose > .toc,
.prose > .doc-meta,
.prose > .table-scroll,
.prose > .figure-row,
.prose > .ad-slot,
.prose > .cta-calc,
.prose > .idx-list,
.prose > .next-read,
.prose > .src-list,
.prose > .card-grid,
.prose > .sec-more,
.prose > .pull,
.prose > .disclaimer { max-width: none; }

.prose h2 {
  font-size: 23px; color: var(--ink);
  margin: 46px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--ink);
}
.prose > h2:first-of-type { margin-top: 0; }
.prose h3 { font-size: 17.5px; color: var(--ink); margin: 32px 0 10px; }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--muted); }

.prose .lead {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.66;
  color: var(--ink); margin-bottom: 1.6em;
  padding-left: 16px; border-left: 2px solid var(--ochre);
}

/* 표 */
.prose table {
  width: 100%; min-width: 440px; border-collapse: collapse; font-size: 13.5px;
  background: transparent;
}
.prose table th, .prose table td {
  padding: 10px 12px 10px 0; text-align: left; border: 0;
  border-bottom: 1px solid var(--rule-2);
}
.prose table thead th {
  font-family: var(--label); font-size: 12px; font-weight: 400;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
.prose table td.num, .prose table th.num {
  text-align: right; font-family: var(--label);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prose table .t-sub {
  display: block; font-family: var(--label); font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
}

/* 인용 / 경고 */
.callout {
  margin: 0 0 1.5em; padding: 0 0 0 18px; border-left: 2px solid var(--ochre);
  font-size: 14.5px; color: var(--ink-2);
}
.callout strong { color: var(--ochre-2); }
.warn {
  margin: 0 0 1.5em; padding: 0 0 0 18px; border-left: 2px solid var(--red);
  font-size: 14.5px; color: var(--ink-2);
}
.warn strong { color: var(--red); }
.warn ul { margin-bottom: 0; }

/* 목차 */
.toc {
  margin: 0 0 34px; padding: 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.toc h2 {
  font-family: var(--label); font-size: 12px; font-weight: 400;
  color: var(--muted); margin: 0; padding: 10px 0 6px; border: 0;
}
.toc ol { margin: 0; padding: 0 0 12px 1.4em; font-size: 14px; }
@media (min-width: 620px) { .toc ol { columns: 2; column-gap: 34px; } }
.toc li { margin-bottom: 5px; break-inside: avoid; }

/* 문서 메타 */
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  margin: 0 0 26px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  font-size: 12px; color: var(--muted);
}
.doc-meta .chip { color: var(--ochre); font-weight: 700; }

/* 수치 강조 */
.figure-row {
  display: grid; grid-template-columns: 1fr; margin: 0 0 1.7em;
  border-top: 1px solid var(--ink);
}
@media (min-width: 560px) { .figure-row { grid-template-columns: repeat(3, 1fr); } }
.figure-box { padding: 14px 16px 13px 0; border-bottom: 1px solid var(--rule-2); }
@media (min-width: 560px) {
  .figure-box { border-right: 1px solid var(--rule-2); border-bottom: 0; }
  .figure-box:last-child { border-right: 0; }
}
.figure-box .fb-num {
  display: block; font-family: var(--label); font-size: 25px; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.figure-box .fb-lab {
  display: block; margin-top: 3px; font-size: 12px; color: var(--muted); letter-spacing: .03em;
}

/* 본문 하단 */
.cta-calc {
  display: block; margin: 40px 0 0; padding: 22px var(--gut);
  background: var(--ink); color: var(--paper); border-left: 3px solid var(--ochre);
}
.cta-calc:hover { text-decoration: none; background: #100e0a; }
.cta-calc strong {
  display: block; font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: var(--paper); margin-bottom: 5px;
}
.cta-calc span { font-size: 13px; color: #cdc2af; }

.next-read { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--ink); }
.next-read h2 {
  font-family: var(--label); font-size: 12px; font-weight: 400;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px; padding: 0; border: 0;
}
.next-read ul { list-style: none; margin: 0; padding: 0; }
.next-read li { border-bottom: 1px solid var(--rule-2); }
.next-read a {
  display: block; padding: 11px 0; font-size: 15px; color: var(--ink);
  font-family: var(--serif); font-weight: 700;
}
.next-read a:hover { color: var(--ochre-2); text-decoration: none; padding-left: 6px; }

.src-list { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.src-list h2 {
  font-family: var(--label); font-size: 12px; font-weight: 400;
  color: var(--muted); margin: 0 0 8px; padding: 0; border: 0;
}
.src-list ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.src-list li { margin-bottom: 5px; color: var(--muted); }

/* ══ 가이드 색인 ══════════════════════════════════════════════════════════ */
.idx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.idx-list > li { border-bottom: 1px solid var(--rule-2); }
.idx-list > li:last-child { border-bottom: 1px solid var(--ink); }

.idx-item { display: block; padding: 20px 0; color: var(--ink); }
.idx-item:hover { text-decoration: none; background: var(--sheet-2); }
.idx-item:hover .idx-title { color: var(--ochre-2); }
.idx-head { display: flex; align-items: baseline; gap: 14px; }
.idx-num {
  flex: 0 0 auto; font-family: var(--label); font-size: 12px; font-weight: 700;
  color: var(--ochre); letter-spacing: .04em; padding-top: 3px;
}
.idx-title {
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  color: var(--ink); margin: 0; line-height: 1.4;
}
.idx-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.idx-desc { margin: 8px 0 0 26px; font-size: 14px; color: var(--ink-3); max-width: 44em; }
@media (min-width: 720px) {
  .idx-item {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) 132px;
    gap: 0 18px; align-items: start;
  }
  .idx-num  { grid-column: 1; grid-row: 1 / span 2; }
  .idx-head { grid-column: 2; grid-row: 1; }
  .idx-desc { grid-column: 2; grid-row: 2; }
  .idx-meta { grid-column: 3; grid-row: 1; }
  .idx-num { padding-top: 5px; font-size: 13px; }
  .idx-head { display: block; }
  .idx-desc { margin: 7px 0 0; }
  .idx-meta { margin: 0; text-align: right; padding-top: 7px; }
}

/* ══ 서브 페이지 머리 ═════════════════════════════════════════════════════ */
.page-head {
  background: var(--paper); border-bottom: 1px solid var(--ink); padding: 26px 0 24px;
}
.page-head h1 { font-size: 27px; margin: 0; letter-spacing: -.03em; max-width: 26em; }
.page-head p { margin: 10px 0 0; max-width: 36em; color: var(--ink-2); font-size: 14.5px; }
@media (min-width: 820px) {
  .page-head { padding: 40px 0 34px; }
  .page-head h1 { font-size: 36px; }
}
.crumbs {
  font-family: var(--label); font-size: 12px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
}
.crumbs a { color: var(--ink-3); }
.crumbs span { margin: 0 7px; color: var(--rule); }

/* ══ 꼬리글 ═══════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: 34px; padding: 32px 0 40px;
  background: var(--ink); color: #cabfae; font-size: 14px;
  border-top: 3px solid var(--ochre);
}
.site-footer a { color: #ded6c6; }
.site-footer a:hover { color: #fff; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid #332e26;
  font-family: var(--label); font-size: 13px; letter-spacing: .03em;
  text-transform: uppercase;
}
.site-footer p { margin: 0 0 .8em; line-height: 1.75; max-width: 52em; }
.site-footer strong { color: #ded6c6; }
.site-footer .copy {
  font-family: var(--label); font-size: 12.5px; letter-spacing: .03em;
  color: #98907f; text-transform: uppercase; margin-top: 16px;
}

/* ══ FAQ ══════════════════════════════════════════════════════════════════ */
.ad-slot--leader { min-height: 92px; }

.faq-list { margin-top: 4px; border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--rule-2); }
.faq-item:last-child { border-bottom: 1px solid var(--ink); }

.faq-q {
  position: relative; display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: 16.5px; font-weight: 700;
  color: var(--ink); line-height: 1.5;
  padding: 16px 34px 15px 0;
}
.faq-q:hover { color: var(--ochre-2); }
/* 가로선 + 세로선 = 닫힘(＋), 열리면 세로선만 숨겨 −  */
.faq-q::before,
.faq-q::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  background: var(--ochre);
}
.faq-q::before { width: 13px; height: 1px; margin-top: -1px; }
.faq-q::after {
  width: 1px; height: 13px; margin-top: -7px; right: 10px;
  transition: opacity .15s ease;
}
.faq-item.open .faq-q::after { opacity: 0; }

.faq-a {
  display: none; padding: 0 0 18px;
  font-size: 15px; color: var(--ink-2); max-width: 40em;
}
.faq-item.open .faq-a { display: block; }
.faq-a p { margin: 0 0 .8em; }
.faq-a p:last-child { margin-bottom: 0; }

/* 애드센스 승인 전에는 광고 자리표시자를 감춘다.
   (build.py 의 SHOW_AD_PLACEHOLDER 로 전환 — HTML 슬롯 자체는 그대로 남아 있음) */
body.ads-hidden .ad-slot { display: none; }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  이미지 · 시각 요소 레이어                                            ║
   ║  사진은 전부 듀오톤(잉크+오커)으로 통일해 한 벌처럼 보이게 한다.      ║
   ║  애드센스 기준: 콘텐츠가 주인공, 이미지는 CLS 0 · 지연로딩.           ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── 듀오톤 공통 ─────────────────────────────────────────────────────── */
.duo { position: relative; overflow: hidden; background: var(--ink); }
.duo > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.88) contrast(1.06) brightness(1.02) sepia(.12);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.duo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(168,90,12,.40), rgba(23,20,15,.56) 58%, rgba(14,28,24,.58));
  mix-blend-mode: multiply;
}
.duo > .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,8,6,.88) 2%, rgba(10,8,6,.42) 45%, rgba(10,8,6,.10) 100%);
}

/* ── 메인 히어로 ─────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--ink); color: var(--paper); }
.hero-media { position: absolute; inset: 0; }

.hero-inner {
  position: relative; z-index: 2;
  padding-block: 58px 34px;
  min-height: 70vh; display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 820px) { .hero-inner { padding-block: 104px 54px; min-height: 78vh; } }

.hero .kicker {
  color: #e8b45c; margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero .kicker::before { content: ''; width: 34px; height: 1px; background: #e8b45c; }
.hero h1 {
  font-size: 33px; line-height: 1.24; letter-spacing: -.035em;
  color: #fff; margin: 0 0 18px; max-width: 15em;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.hero h1 em { color: #f0c069; }
@media (min-width: 560px) { .hero h1 { font-size: 46px; } }
@media (min-width: 900px) { .hero h1 { font-size: 60px; } }

.hero-text {
  margin: 0; max-width: 30em; font-size: 15px; line-height: 1.78;
  color: rgba(255,255,255,.92);
}
@media (min-width: 820px) { .hero-text { font-size: 17px; } }

.hero-cta {
  align-self: flex-start; margin-top: 28px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--label); font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: #f0c069; padding: 15px 26px;
  transition: background .2s ease, gap .2s ease;
}
.hero-cta:hover { text-decoration: none; background: #fff; gap: 18px; }

/* 히어로 아래 수치 띠 */
.fact-band { position: relative; z-index: 3; background: var(--ink); color: var(--paper); }
.fact-grid {
  display: grid; grid-template-columns: 1fr; margin: 0;
  border-top: 2px solid var(--ochre);
}
@media (min-width: 680px) { .fact-grid { grid-template-columns: repeat(3, 1fr); } }
.fact-grid > div {
  min-width: 0; padding: 18px 18px 17px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 680px) {
  .fact-grid > div {
    border-bottom: 0; border-right: 1px solid rgba(255,255,255,.1);
    padding-block: 26px 24px;
  }
  .fact-grid > div:last-child { border-right: 0; }
  .fact-grid > div + div { padding-left: 26px; }
}
.fact-grid dt {
  font-family: var(--label); font-size: 12px; letter-spacing: .035em;
  text-transform: uppercase; color: #c4b49a; margin-bottom: 6px;
}
.fact-grid dd {
  margin: 0; font-family: var(--label); font-size: 26px; font-weight: 700;
  letter-spacing: -.03em; color: #f0c069;
}
.fact-grid dd span {
  display: block; margin-top: 3px; font-family: var(--sans); font-size: 13.5px;
  font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.72);
}

/* ── 섹션 머리 ───────────────────────────────────────────────────────── */
.sec-head { margin: 46px 0 20px; }
.sec-head .kicker { margin-bottom: 10px; display: block; }
.sec-head h2 {
  font-size: 26px; margin: 0; letter-spacing: -.03em;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
@media (min-width: 820px) { .sec-head h2 { font-size: 32px; } }
.sec-head p { margin: 12px 0 0; color: var(--ink-3); font-size: 14.5px; max-width: 42rem; }

/* ── 이미지 카드 ─────────────────────────────────────────────────────── */
.card-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (min-width: 700px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card { display: block; background: var(--sheet); color: var(--ink); overflow: hidden; }
.card:hover { text-decoration: none; }
.card:hover .duo > img { transform: scale(1.06); filter: grayscale(.35) contrast(1.05) brightness(.95); }
.card:hover .card-title { color: var(--ochre-2); }

.card-media { position: relative; aspect-ratio: 16 / 10; }
.card .duo::after { background: linear-gradient(150deg, rgba(168,90,12,.30), rgba(23,20,15,.38) 60%, rgba(14,28,24,.40)); }
.card-num {
  position: absolute; left: 0; top: 0; z-index: 2;
  font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--ink); background: #f0c069; padding: 7px 12px 6px;
}
.card-tag {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  font-family: var(--label); font-size: 12px; letter-spacing: .035em; text-transform: uppercase;
  color: #fff; background: rgba(12,10,8,.55); padding: 5px 10px;
}
.card-body { padding: 18px 20px 22px; }
.card-title {
  font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.42;
  margin: 0 0 8px; color: var(--ink); transition: color .2s ease;
}
.card-desc { margin: 0; font-size: 13.5px; line-height: 1.68; color: var(--ink-3); }
.card-more {
  display: inline-block; margin-top: 14px;
  font-family: var(--label); font-size: 12.5px; letter-spacing: .035em;
  text-transform: uppercase; color: var(--ochre);
}

/* ── 서브페이지 이미지 머리 ──────────────────────────────────────────── */
.page-head--media { position: relative; background: var(--ink); border-bottom: 0; padding: 0; }
.page-head--media .ph-media { position: absolute; inset: 0; }
.page-head--media .ph-inner {
  position: relative; z-index: 2;
  padding-block: 44px 32px; min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 820px) {
  .page-head--media .ph-inner { padding-block: 80px 44px; min-height: 360px; }
}
.page-head--media h1 {
  color: #fff; font-size: 27px; margin: 0; max-width: 20em;
  text-shadow: 0 2px 26px rgba(0,0,0,.4);
}
@media (min-width: 820px) { .page-head--media h1 { font-size: 39px; } }
.page-head--media p { color: rgba(255,255,255,.78); margin-top: 12px; }
.page-head--media .crumbs { color: #c4b49a; }
.page-head--media .crumbs a { color: #d8c9b0; }
.page-head--media .crumbs span { color: rgba(255,255,255,.28); }

/* ── 급여 분해 막대 ──────────────────────────────────────────────────── */
.split-block { margin-top: 24px; }
.split-block > h3 {
  font-family: var(--label); font-size: 12.5px; font-weight: 400; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
.split-bar {
  display: flex; width: 100%; height: 32px; overflow: hidden;
  background: var(--rule-2); border: 1px solid var(--rule);
}
.split-bar > span { display: block; height: 100%; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.sp-net { background: var(--green); }
.sp-tax { background: var(--red); }
.sp-med { background: #c0703c; }

.split-legend {
  display: flex; flex-wrap: wrap; gap: 7px 20px; margin-top: 12px;
  font-family: var(--label); font-size: 12.5px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3);
}
.split-legend b { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; }
.split-legend i { width: 11px; height: 11px; display: inline-block; }
.split-legend em { color: var(--ink); font-weight: 700; font-style: normal; }

/* ── 세율 구간 그래프 ────────────────────────────────────────────────── */
.br-chart { margin-top: 8px; }
.br-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 86px;
  gap: 10px; align-items: center; padding: 5px 0;
}
.br-lab {
  font-family: var(--label); font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-track { position: relative; height: 14px; background: var(--rule-2); }
.br-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--ochre); transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.br-fill.is-full { background: var(--ink); }
.br-amt {
  font-family: var(--label); font-size: 13px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.br-row.is-off .br-lab, .br-row.is-off .br-amt { color: #bab2a4; }

/* ── 읽기 진행 막대 ──────────────────────────────────────────────────── */
.read-bar {
  position: fixed; left: 0; top: 0; height: 3px; width: 0;
  background: var(--ochre); z-index: 100;
}

/* ── 스크롤 등장 ─────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
  .duo > img, .hero-cta, .split-bar > span, .br-fill { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── 본문 속 이미지 ──────────────────────────────────────────────────── */
.prose figure.shot { margin: 0 0 1.8em; }
.prose figure.shot .duo { aspect-ratio: 16 / 9; }
.prose figure.shot figcaption {
  margin-top: 9px; font-family: var(--label); font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
}

/* ── 인용 강조 ───────────────────────────────────────────────────────── */
.pull {
  margin: 34px 0; padding: 26px 0 24px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-size: 20px; line-height: 1.55;
  color: var(--ink); letter-spacing: -.02em;
}
@media (min-width: 820px) { .pull { font-size: 24px; } }
.pull span {
  display: block; margin-top: 12px;
  font-family: var(--label); font-size: 12px; letter-spacing: .035em;
  text-transform: uppercase; color: var(--ochre);
}

/* ── 어두운 강조 섹션 ────────────────────────────────────────────────── */
.dark-sec { background: var(--ink); color: #d6cbb8; margin-top: 34px; }
.dark-sec .wrap { padding-block: 40px 44px; }
.dark-sec h2 { color: #fff; font-size: 25px; margin: 0 0 16px; }
.dark-sec .sec-head h2 { border-bottom-color: rgba(255,255,255,.22); }
@media (min-width: 820px) {
  .dark-sec h2 { font-size: 31px; }
  .dark-sec .wrap { padding-block: 60px 64px; }
}
.dark-sec p { max-width: 42rem; margin: 0 0 1.1em; line-height: 1.8; }
.dark-sec strong { color: #f0c069; }
.dark-sec .kicker { color: #f0c069; }
.dark-sec .sec-head { margin-top: 0; }

/* 섹션 더보기 링크 */
.sec-more { margin: 16px 0 0; text-align: right; }
.sec-more a {
  font-family: var(--label); font-size: 13px; letter-spacing: .035em;
  text-transform: uppercase; color: var(--ochre);
}
.sec-more a:hover { color: var(--ochre-2); }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  가독성 보정                                                          ║
   ║  라벨은 전부 산세리프(--label)로 바꾸고, 등폭은 아래 "숫자"에만 남긴다.║
   ║  한글은 등폭 글꼴에 글리프가 없어 시스템 기본 글꼴로 떨어지는데,       ║
   ║  그 상태에서 9~11px + 넓은 자간이면 판독이 무너진다.                   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* 숫자·기호 전용 — 자릿수 정렬과 판독성을 위해 등폭 유지 */
.brand-mark,
.money-input .cur,
.money-input input,
.quick-btn,
.net-box .net-amount,
.net-box .net-annual,
.res-table th[scope="row"] small,
.res-table td,
.stat dd,
.bracket-table td,
.prose table td.num,
.prose table th.num,
.figure-box .fb-num,
.idx-num,
.card-num,
.fact-grid dd,
.lede-facts dd,
.br-lab,
.br-amt,
.split-legend em {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* 숫자 블록 안의 한글 설명줄은 다시 산세리프로 */
.fact-grid dd span,
.lede-facts dd span,
.net-box .net-annual,
.res-table th[scope="row"] small { letter-spacing: 0; }
.net-box .net-annual { font-family: var(--sans); }

/* 대문자 변환은 라틴 문자에만 의미가 있다. 한글이 섞인 라벨은 자간만 좁게 유지 */
.crumbs,
.doc-meta,
.card-tag,
.idx-meta,
.toc h2,
.src-list h2,
.next-read h2,
.split-block > h3,
.bracket-block > h3,
.field > label,
.field > .label,
.stat dt,
.fact-grid dt,
.figure-box .fb-lab,
.net-box .net-label,
.res-table thead th,
.bracket-table th,
.prose table thead th,
.prose table .t-sub,
.split-legend,
.panel-title .tax-year,
.site-nav a,
.footer-links,
.sec-more a,
.card-more,
.pull span,
.money-input .unit,
.radio-card span,
.site-footer .copy,
.kicker {
  text-transform: none;
  letter-spacing: -.005em;
  font-weight: 700;
}

/* 본문 기본 크기·선간격 상향 */
body { font-size: 16.5px; line-height: 1.78; }
.prose { font-size: 16.5px; line-height: 1.85; }
.prose li { line-height: 1.8; }
.card-desc { font-size: 14.5px; line-height: 1.72; }
.idx-desc { font-size: 15px; }
.hero-text { line-height: 1.8; }
.disclaimer { font-size: 13px; line-height: 1.8; }
.src-list ul { font-size: 13.5px; }
.src-list li { line-height: 1.7; }
.site-footer p { font-size: 14px; }

/* 내비게이션·푸터 링크는 라벨이 아니라 실제로 누르는 대상 — 더 키운다 */
.site-nav a { font-size: 15px; font-weight: 700; }
.footer-links { font-size: 14px; }
.crumbs { font-size: 13px; }
.doc-meta { font-size: 13px; gap: 6px 16px; }
.card-tag { font-size: 12px; }
.card-more { font-size: 12.5px; }
.sec-more a { font-size: 13px; }
.kicker { font-size: 13px; }
.panel-title .tax-year { font-size: 12.5px; }
.field > label, .field > .label { font-size: 13px; }
.net-box .net-label { font-size: 13px; }
.split-legend { font-size: 12.5px; }
.toc h2, .src-list h2, .next-read h2,
.split-block > h3, .bracket-block > h3 { font-size: 12.5px; }
.toc ol { font-size: 15px; }
.ad-slot { font-size: 11px; letter-spacing: .06em; }

/* 세율 구간 그래프 — 글자를 키운 만큼 라벨 열을 넓혀 금액이 잘리지 않게 한다 */
.br-row { grid-template-columns: 128px minmax(0, 1fr) 54px; gap: 12px; }
.br-lab { font-size: 12px; letter-spacing: -.02em; }
.br-amt { font-size: 12.5px; font-weight: 700; }
.br-row.is-off .br-lab, .br-row.is-off .br-amt { color: #9a9081; }
@media (max-width: 520px) {
  .br-row { grid-template-columns: 112px minmax(0, 1fr) 46px; gap: 9px; }
  .br-lab { font-size: 11px; }
  .br-amt { font-size: 11.5px; }
}

/* ══ 카드 배너 — 제목을 이미지 중앙에 ═════════════════════════════════════
   번호 뱃지를 없애고, 이 배너가 무슨 글인지 이미지 위에서 바로 읽히게 한다. */
.card-media > .scrim {
  /* 가운데 글자를 위해 위아래가 아니라 전체를 고르게 눌러준다 */
  background: linear-gradient(180deg,
              rgba(10, 8, 6, .26) 0%, rgba(10, 8, 6, .56) 45%, rgba(10, 8, 6, .34) 100%);
  transition: background .25s ease;
}
.card:hover .card-media > .scrim {
  background: linear-gradient(180deg,
              rgba(10, 8, 6, .34) 0%, rgba(10, 8, 6, .64) 45%, rgba(10, 8, 6, .42) 100%);
}

.card-label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 18px 20px; text-align: center;
}
.card-kicker {
  font-family: var(--label); font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: #f0c069;
  padding-bottom: 7px; border-bottom: 1px solid rgba(240, 192, 105, .45);
}
.card-label .card-title {
  font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.42;
  color: #fff; margin: 0; max-width: 15em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  transition: color .2s ease;
}
.card:hover .card-label .card-title { color: #f0c069; }
@media (min-width: 700px) { .card-label .card-title { font-size: 20px; } }

/* 본문에는 설명과 링크만 남는다 */
.card-body { padding: 16px 20px 20px; }

/* 카드 내부 요소는 <a> 안이라 전부 <span> 이다.
   display 를 지정하지 않으면 인라인이라 aspect-ratio·inset 이 어긋난다. */
.duo,
.card-media,
.card-body,
.card-desc,
.card-kicker { display: block; }
.card-label .card-title { display: block; }