/* 찍먹써먹 비교형 서브페이지 스킨
 * 기준: kids-bicycle-design-guide.zip의 Apple형 v2 시안
 * 범위: single post 전용. 홈·카테고리·고정 페이지는 변경하지 않는다.
 * 기존 승인값: 본문 1120px, 장문 예외 800px, 모바일 표 15px 유지.
 */

body.single-post {
  --sub-canvas: #f3f4f6;
  --sub-card: #fff;
  --sub-ink: #16181c;
  --sub-ink-2: #3c4048;
  --sub-muted: #686d76;
  --sub-accent: #1769e0;
  --sub-accent-dark: #1256b8;
  --sub-accent-tint: #eef4fd;
  --sub-point: #ff8e69;
  --sub-line: #e3e5ea;
  --sub-radius-sm: 12px;
  --sub-radius-md: 18px;
  --sub-radius-lg: 28px;
  --sub-pill: 999px;
  --sub-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 24px rgba(15,17,21,.06);
  --sub-shadow-hover: 0 2px 6px rgba(15,17,21,.06), 0 18px 40px rgba(15,17,21,.12);
  background: linear-gradient(180deg,#f7f8fa 0%,var(--sub-canvas) 42%,#eceef2 100%);
  background-attachment: fixed;
  color: var(--sub-ink);
  letter-spacing: -.01em;
}

body.single-post .site-header {
  min-height: 58px;
  background: rgba(247,248,250,.78);
  border-bottom-color: rgba(22,24,28,.08);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.single-post .brand-mark { border-radius: 50%; }
body.single-post .main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--sub-pill);
  padding: 7px 12px;
  color: var(--sub-ink-2);
}
body.single-post .main-nav a:hover { background: rgba(22,24,28,.06); color: var(--sub-ink); }
body.single-post .header-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--sub-accent);
  font-weight: 650;
}
body.single-post .header-action:hover { background: var(--sub-accent-dark); }

.article-page {
  max-width: 1180px;
  padding-top: 34px;
}
.visible-breadcrumb {
  margin: 0 0 14px;
  color: var(--sub-muted);
  font-size: 14px;
}
.visible-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.visible-breadcrumb li {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}
.visible-breadcrumb li:not(:last-child)::after {
  margin-left: 8px;
  color: #9aa0a9;
  content: '›';
}
.visible-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sub-accent-dark);
}
.visible-breadcrumb [aria-current="page"] {
  overflow-wrap: anywhere;
  color: var(--sub-muted);
}
.article-disclosure {
  margin: 0 0 20px;
  color: var(--sub-muted);
  font-size: 12.5px;
}
.article-hero {
  padding: 70px clamp(28px,6vw,72px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--sub-radius-lg);
  background:
    radial-gradient(120% 100% at 18% 0%,rgba(23,105,224,.2) 0%,rgba(23,105,224,0) 58%),
    linear-gradient(160deg,#252a33 0%,#15181e 48%,#0d0f13 100%);
  box-shadow: var(--sub-shadow);
}
.article-hero .eyebrow { color: #7fb0ff; font-weight: 650; }
.article-hero h1 { letter-spacing: -.038em; word-break: keep-all; overflow-wrap: normal; }
.article-hero > p:last-child { color: #aeb4be; }
.article-featured {
  border-radius: var(--sub-radius-lg);
  box-shadow: var(--sub-shadow);
}

.article-body {
  max-width: 1120px;
  color: var(--sub-ink);
  letter-spacing: -.012em;
}
.article-body.prose-narrow,
.article-body .prose-narrow { max-width: 800px; }
.article-body h2 {
  margin: 64px 0 18px;
  padding: 0;
  border: 0;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.028em;
}
.article-body h3 {
  margin: 40px 0 12px;
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -.022em;
}
.article-body h4 { font-size: 20px; color: var(--sub-ink-2); }
.article-body p { margin: 0 0 20px; }
.article-body a:not(.cta) {
  color: var(--sub-accent);
  border-bottom: 1px solid rgba(23,105,224,.3);
}
.article-body a:not(.cta):hover { border-bottom-color: var(--sub-accent); }

.sec-summary,
.readings,
.conclusion,
.assumptions,
.space-calc {
  border: 0;
  border-radius: var(--sub-radius-md);
  background: linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
  box-shadow: var(--sub-shadow);
}
.sec-summary { padding: 24px 28px; }
.sec-summary ol { padding-left: 1.35em; }
.readings,
.assumptions { padding: 20px 24px; }
.conclusion { padding: 18px 22px; }
.caution {
  padding: 18px 22px;
  border: 0;
  border-radius: var(--sub-radius-md);
  background: linear-gradient(160deg,#f4f8fe 0%,#e9f1fc 100%);
  color: #10315f;
}

.flow { display: grid; gap: 14px; }
.flow .step {
  gap: 16px;
  padding: 20px;
  border: 0;
  border-radius: var(--sub-radius-md);
  background: var(--sub-card);
  box-shadow: var(--sub-shadow);
}
.flow .step-no { background: var(--sub-accent); }
.flow .tag { border-radius: var(--sub-pill); }

.table-wrap {
  margin: 1.2em 0 2em;
  border-radius: var(--sub-radius-md);
  background: var(--sub-card);
  box-shadow: var(--sub-shadow);
}
.article-body table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--sub-radius-md);
  background: var(--sub-card);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.article-body th,
.article-body td { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--sub-line); }
.article-body thead th { background: #f7f8fa; color: var(--sub-muted); font-size: 13px; font-weight: 650; }
.article-body tbody tr:last-child td { border-bottom: 0; }
.article-body tbody tr:nth-child(even) { background: transparent; }
.article-body tbody tr:hover td { background: #fafbfc; }
.article-body td:first-child { font-weight: 650; }

figure.diagram {
  overflow: hidden;
  border-radius: var(--sub-radius-md);
  background: var(--sub-card);
  box-shadow: var(--sub-shadow);
}
figure.diagram img { border-radius: var(--sub-radius-md) var(--sub-radius-md) 0 0; }
figure.diagram figcaption { margin: 0; padding: 12px 16px 14px; text-align: center; }

.products { gap: 20px; }
.product {
  gap: 22px;
  padding: 24px;
  border: 0;
  border-radius: var(--sub-radius-lg);
  background: linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
  box-shadow: var(--sub-shadow);
  transition: transform .3s ease,box-shadow .3s ease;
}
.product:hover { transform: translateY(-3px); box-shadow: var(--sub-shadow-hover); }
.product-media img,
.img-slot { border-radius: var(--sub-radius-md); background: #f7f8fa; }
.product .cond {
  border-radius: 10px;
  background: var(--sub-point);
  color: var(--sub-ink);
  font-size: 1.14rem;
  line-height: 1.35;
  padding: 7px 14px;
}
.product .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--sub-pill);
  background: var(--sub-accent);
  font-size: 16px;
  font-weight: 650;
  transition: background .2s ease,transform .15s ease;
}
.product .cta:not(.pending):hover { background: var(--sub-accent-dark); }
.product .cta:not(.pending):active { transform: scale(.98); }

ul.checklist {
  overflow: hidden;
  border-radius: var(--sub-radius-md);
  background: var(--sub-card);
  box-shadow: var(--sub-shadow);
}
ul.checklist li { padding: 12px 18px 12px 44px; border-bottom-color: var(--sub-line); }
ul.checklist li::before { left: 18px; color: var(--sub-accent); }
.faq-item { padding: 18px 0; border-top-color: var(--sub-line); }
.article-meta { border-top-color: var(--sub-line); }

body.single-post :focus-visible {
  outline: 3px solid rgba(23,105,224,.45);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  body.single-post .site-header { min-height: 60px; }
  .article-page { padding-top: 24px; padding-inline: 20px; }
  .visible-breadcrumb { margin-bottom: 10px; }
  .article-disclosure { margin-bottom: 16px; }
  .article-hero { padding: 44px 24px; border-radius: var(--sub-radius-md); }
  .article-hero h1 { font-size: 34px; line-height: 1.12; word-break: keep-all; overflow-wrap: normal; }
  .article-body { font-size: 17px; line-height: 1.7; }
  .article-body h2 { margin-top: 48px; font-size: 24px; }
  .article-body h3 { margin-top: 32px; font-size: 20px; }
  .sec-summary,
  .readings,
  .conclusion,
  .assumptions,
  .caution,
  .space-calc { border-radius: var(--sub-radius-sm); }
  .sec-summary { padding: 20px; }
  .flow .step { padding: 18px; border-radius: var(--sub-radius-sm); }
  .table-wrap { border-radius: var(--sub-radius-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-body table { min-width: 720px; border-radius: var(--sub-radius-sm); font-size: 15px; }
  .article-body th,
  .article-body td { padding: 11px 13px; }
  .product { padding: 18px; border-radius: var(--sub-radius-md); }
  .product .cta { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .product,
  .product .cta { transition: none; }
}