/* 일인분 — 프리랜서 청구서: 흰 종이, 얇은 항목 줄, 검은 합계 띠, 벽돌색 한 점. 고운바탕 제목 + 고운돋움 본문. */
:root {
  --paper: #ffffff;
  --ink: #141414;
  --ink-2: #4a4a4a;
  --ink-3: #626262;
  --rule: #dedede;
  --rule-2: #141414;
  --brick: #a83a22;
  --tint: #f6f4f1;
  --serif: "Gowun Batang", "Apple Myungjo", serif;
  --sans: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5h5.5V8M9.5 2.5 2.5 9.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #c9c9c9 transparent; }
body { margin: 0; font-synthesis: none; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
::selection { background: #efd9d2; color: var(--ink); }
a { color: var(--brick); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

.masthead { width: calc(100% - 40px); max-width: 700px; margin: 0 auto; padding: 22px 0 0; border-bottom: 3px solid var(--rule-2); }
.name { font-family: var(--serif); font-weight: 700; font-size: 28px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.say { margin: 2px 0 10px; font-size: 13.5px; color: var(--ink-3); }
.tabs { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 6px 0 9px; transition: color .18s ease-out, box-shadow .18s ease-out; }
.tab:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--rule); }
.tab[aria-current="page"] { color: var(--ink); font-family: var(--serif); font-weight: 700; box-shadow: inset 0 -3px 0 var(--brick); }

.doc { max-width: 740px; margin: 0 auto; padding: 28px 20px 56px; }
.intro h1, .post h1 { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1.42; letter-spacing: -0.02em; margin: 6px 0 12px; text-wrap: balance; }
.intro p { margin: 0 0 24px; color: var(--ink-2); font-size: 16.5px; }

/* 청구서 */
.bill { margin: 6px 0 26px; border-top: 3px solid var(--rule-2); }
.bill-top { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0 8px; font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.bill-top span:last-child { flex: none; white-space: nowrap; font-family: var(--sans); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bill .item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.bill .item span:last-child { text-align: right; font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums; }
.bill .total { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; margin-top: 10px; background: var(--rule-2); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 16.5px; }
.bill .total span:last-child { font-family: var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.bill.year .item { display: grid; grid-template-columns: 6.5em 1fr; }
.bill.year .item span:last-child { text-align: left; font-family: var(--sans); font-weight: 400; }
.bill.year .mon { font-family: var(--serif); font-weight: 700; color: var(--brick); }
.bill.year a { color: var(--ink); text-decoration: none; }
.bill.year a:hover, .bill.year a:focus-visible { text-decoration: underline; }
.bill.year a:hover { color: var(--brick); }

.crumb { font-size: 13.5px; color: var(--ink-3); }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--brick); }
.lead { margin: 0 0 18px; font-family: var(--serif); font-size: 17.5px; line-height: 1.8; font-weight: 700; }
.toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 0 0 10px; }
.toc summary { cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink-2); list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " +"; color: var(--brick); }
.toc[open] summary::after { content: " −"; }
.toc ol { margin: 8px 0 2px; padding-left: 22px; font-size: 15.5px; line-height: 1.9; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--brick); }
.body > * { max-width: 66ch; }
.body h2 { font-family: var(--serif); font-size: 21.5px; font-weight: 700; line-height: 1.45; margin: 46px 0 12px; scroll-margin-top: 16px; }
.body h3 { font-family: var(--serif); font-size: 18px; margin: 26px 0 8px; }
.body p { margin: 0 0 18px; }
.body ul, .body ol { margin: 0 0 18px; padding-left: 22px; }
.body li { margin: 6px 0; }
.body b { font-family: var(--serif); font-weight: 700; }
.tip { background: var(--tint); padding: 13px 16px; margin: 0 0 20px; }
.tip p { margin: 0; font-size: 16px; }
.table-wrap { margin: 6px 0 22px; overflow-x: auto; }
.body table { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.body th { text-align: left; font-family: var(--serif); font-weight: 700; padding: 10px 12px; border-top: 2px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.body td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.refs, .more { margin-top: 38px; }
.refs h2, .more h2 { font-family: var(--serif); font-size: 17.5px; font-weight: 700; margin: 0 0 8px; }
.refs ul { margin: 0; padding-left: 20px; font-size: 15px; }
.refs li { margin: 6px 0; }
.out::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: 3px; background: currentColor; -webkit-mask: var(--arrow) center/contain no-repeat; mask: var(--arrow) center/contain no-repeat; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.rows li { border-bottom: 1px solid var(--rule); }
.rows a { display: block; padding: 13px 0; color: var(--ink); text-decoration: none; }
.rows .t { display: block; font-family: var(--serif); font-weight: 700; font-size: 16.5px; line-height: 1.55; }
.rows a:hover .t { color: var(--brick); }
.rows .m { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.fin { width: calc(100% - 40px); max-width: 700px; margin: 0 auto; padding: 22px 0 40px; border-top: 3px solid var(--rule-2); font-size: 13.5px; color: var(--ink-3); }
.fin p { margin: 0 0 6px; }
.fin a { color: var(--ink-2); }
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .intro h1, .post h1 { font-size: 24px; }
  .body table, .body thead, .body tbody, .body tr, .body td { display: block; }
  .body thead { display: none; }
  .body tr { border-top: 2px solid var(--rule-2); margin: 0 0 12px; padding: 4px 0; }
  .body td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  .body td::before { content: attr(data-k); color: var(--ink-3); font-size: 13.5px; font-family: var(--serif); font-weight: 700; text-align: left; flex: none; max-width: 45%; }
  .body td:first-child { font-family: var(--serif); font-weight: 700; text-align: left; }
  .body td:first-child::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }