/* [Define404] */
/* 리포트: 목록과 글. 토큰은 site.css 그대로 쓴다. 그림자·그라디언트 없음, 선 1px, 모서리 2px */

.rp { padding-top: calc(var(--head-h) + var(--s9)); padding-bottom: var(--s9); }
.rp-head { max-width: 760px; margin-bottom: var(--s8); }
.rp-head h1 { font-size: var(--fs-h2); font-weight: 760; letter-spacing: var(--tr-display); line-height: var(--lh-tight); margin: var(--s4) 0 var(--s5); }
.rp-head p:not(.d404-label) { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.6; max-width: 34em; }
.rp-head p:not(.d404-label) + p { margin-top: 6px; }

/* 목록 */
.rp-list { border-top: var(--bw) solid var(--ink-1); }
.rp-item { border-bottom: var(--bw) solid var(--line-1); }
.rp-item a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--s2) var(--s6); align-items: baseline; padding: var(--s6) 0; }
.rp-no { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--tr-label); font-feature-settings: "tnum" 1; color: var(--sky-ink); }
.rp-title { font-size: clamp(22px, 2.6vw, 34px); font-weight: 720; letter-spacing: -0.02em; line-height: 1.3; }
.rp-sum { grid-column: 2; color: var(--ink-2); max-width: 40em; }
.rp-meta { color: var(--ink-3); font-size: var(--fs-small); font-feature-settings: "tnum" 1; white-space: nowrap; }
.rp-ko { display: inline-block; margin-left: var(--s2); padding: 1px 8px; border: var(--bw) solid var(--line-2); border-radius: var(--r-sm); font-size: 12px; font-weight: 600; color: var(--ink-2); vertical-align: 0.2em; white-space: nowrap; }
.rp-item a:hover .rp-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--sky); }
.rp-feed { margin-top: var(--s6); font-size: var(--fs-small); color: var(--ink-3); }
.rp-feed a { color: var(--sky-ink); border-bottom: var(--bw) solid currentColor; }

@media (max-width: 720px) {
  .rp { padding-top: calc(var(--head-h) + var(--s8)); }
  .rp-item a { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s5) 0; }
  .rp-sum { grid-column: 1; }
  .rp-meta { white-space: normal; }
}

/* 글 */
.ar { padding-top: calc(var(--head-h) + var(--s9)); padding-bottom: var(--s9); }
.ar-head, .ar-body { max-width: 760px; }
.ar-back { display: inline-block; font-size: var(--fs-small); color: var(--ink-3); margin-bottom: var(--s5); }
.ar-back:hover { color: var(--ink-1); }
.ar-head h1 { font-size: clamp(32px, 4.6vw, 60px); font-weight: 770; letter-spacing: -0.03em; line-height: 1.18; margin: var(--s4) 0 var(--s5); }
.ar-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--ink-3); font-size: var(--fs-small); font-feature-settings: "tnum" 1; padding-bottom: var(--s6); border-bottom: var(--bw) solid var(--ink-1); }
.ar-meta b { color: var(--sky-ink); font-weight: 700; letter-spacing: var(--tr-label); }

.ar-body { padding-top: var(--s7); }
.ar-body > * + * { margin-top: var(--s4); }
.ar-body h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 740; letter-spacing: -0.02em; line-height: 1.3; margin-top: var(--s8); padding-top: var(--s5); border-top: var(--bw) solid var(--line-1); }
.ar-body h3 { font-size: var(--fs-h3); font-weight: 720; margin-top: var(--s6); }
.ar-body p, .ar-body li { color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.ar-body strong { color: var(--ink-1); font-weight: 700; }
.ar-body a { color: var(--sky-ink); border-bottom: var(--bw) solid currentColor; }
.ar-lead { font-size: var(--fs-lead) !important; color: var(--ink-1) !important; line-height: 1.65 !important; }
.ar-body ul.ar-dots { display: grid; gap: var(--s2); }
.ar-body ul.ar-dots li { position: relative; padding-left: 18px; }
.ar-body ul.ar-dots li::before { content: ""; position: absolute; left: 0; top: .85em; width: 8px; height: 1px; background: var(--ink-3); }

/* 숫자 세 칸 */
.ar-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); margin-top: var(--s6) !important; }
.ar-stat { border-top: var(--bw) solid var(--ink-1); padding-top: var(--s3); }
.ar-stat b { display: block; font-size: clamp(36px, 4.4vw, 56px); font-weight: 780; letter-spacing: -0.03em; line-height: 1.1; font-feature-settings: "tnum" 1; color: var(--ink-1); }
.ar-stat span { display: block; margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }

/* 사장님 체크리스트 */
.ar-check { counter-reset: ck; border: var(--bw) solid var(--ink-1); border-radius: var(--r-sm); background: var(--paper-raised); padding: var(--s2) var(--s5); margin-top: var(--s6) !important; }
.ar-check li { counter-increment: ck; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; color: var(--ink-1) !important; }
.ar-check li + li { border-top: var(--bw) solid var(--line-1); }
.ar-check li::before { content: counter(ck); font-weight: 780; color: var(--sky-ink); font-feature-settings: "tnum" 1; }

/* 표: 넓으면 표 안에서만 옆으로 민다 */
.ar-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: var(--bw) solid var(--ink-1); margin-top: var(--s5) !important; }
.ar-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; font-feature-settings: "tnum" 1; }
.ar-table th, .ar-table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: var(--bw) solid var(--line-1); vertical-align: top; color: var(--ink-2); }
.ar-table th { font-size: 13px; font-weight: 650; color: var(--ink-3); line-height: 1.4; }
.ar-table td.tn, .ar-table th.tn { text-align: right; padding-right: 0; padding-left: 12px; }
.ar-table th:first-child { width: 30%; }
@media (max-width: 480px) { .ar-table th, .ar-table td { font-size: 13px; } .ar-table th.tn, .ar-table td.tn { padding-left: 6px; } }
.ar-table td:first-child { color: var(--ink-1); font-weight: 600; white-space: nowrap; }
.ar-table caption { caption-side: bottom; text-align: left; padding-top: var(--s2); font-size: 13px; color: var(--ink-3); }

/* 질문과 답 원문 */
.ar-qa { border-top: var(--bw) solid var(--line-1); }
.ar-qa > li { padding: var(--s4) 0; border-bottom: var(--bw) solid var(--line-1); }
.ar-qa .q { display: flex; flex-wrap: wrap; gap: 4px var(--s3); align-items: baseline; color: var(--ink-1); font-weight: 650; font-size: 16px; }
.ar-qa .q em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; }
.ar-qa .a { margin-top: 6px; font-size: 15px !important; line-height: 1.65 !important; color: var(--ink-2); }
.ar-qa .v { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 650; padding: 1px 8px; border-radius: var(--r-sm); border: var(--bw) solid var(--line-2); color: var(--ink-2); }
.ar-qa .v-bad { border-color: var(--danger); color: var(--danger); }
.ar-body details { border: var(--bw) solid var(--line-1); border-radius: var(--r-sm); padding: 0 var(--s4); background: var(--paper-raised); }
.ar-body details + details { margin-top: var(--s3); }
.ar-body summary { cursor: pointer; padding: var(--s4) 0; font-weight: 650; color: var(--ink-1); }
.ar-body details[open] summary { border-bottom: var(--bw) solid var(--line-1); }

.ar-note { font-size: var(--fs-small) !important; color: var(--ink-3) !important; }
.ar-foot { max-width: 760px; margin-top: var(--s8); padding-top: var(--s5); border-top: var(--bw) solid var(--ink-1); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between; font-size: var(--fs-small); color: var(--ink-3); }
.ar-foot a { color: var(--sky-ink); border-bottom: var(--bw) solid currentColor; }

@media (max-width: 720px) {
  .ar { padding-top: calc(var(--head-h) + var(--s8)); }
  .ar-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .ar-body p, .ar-body li { font-size: 16px; }
  .ar-check { padding: var(--s2) var(--s4); }
}