/* content.css: page-level content blocks. Plan cards, agent role blocks, prose with sticky TOC,
   blog post list and byline, Korean summary sheet, diagram wrapper, jump links, copyable template, rule callout, post nav. */

/* Plan cards: real objects, so they get a sheet and a border. */
.plans { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin: 0; }
.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--sheet);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
}
.plan--featured { border: 2px solid var(--green); }
.plan__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-height: 1.8rem; }
.plan__name { margin: 0; font-size: var(--step-2); }
.plan__price {
  margin: var(--space-3) 0 0;
  padding-bottom: var(--space-3);
  border-bottom: 3px double var(--rule-strong);
  font-variant-numeric: tabular-nums;
}
.plan__price { min-height: calc(2.2rem + 1.4rem + var(--space-3)); }   /* same rule height with or without a unit line */
.plan__amount { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.plan__unit { display: block; font-size: var(--step--1); color: var(--muted); }
.plan__for { margin: var(--space-3) 0; color: var(--ink-2); font-size: 0.9375rem; }
.plan__list { flex: 1; margin: 0 0 var(--space-5); padding-left: 1.1em; font-size: 0.9375rem; }
.plan__action { margin: 0; }
.plan__action .btn { width: 100%; }
.plan__note { margin: 0; }

/* Agent role block (agents page): heading row, Korean name, then ruled columns. */
.agent { padding-block: var(--space-7); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.agent + .agent { border-top: var(--rule-w) solid var(--rule-strong); }
.agent__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
/* One step below the section heading (section-head h2), so group headings and role names differ. */
.agent__name { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.25; }
.section-head + .agent { padding-top: var(--space-2); }
.agent__ko { flex-basis: 100%; margin: 0; color: var(--muted); }
.agent__intro { max-width: 60ch; margin: 0 0 var(--space-5); color: var(--ink-2); }
.agent__cols { display: grid; gap: var(--space-5) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.agent__col { border-top: var(--rule-w) solid var(--rule-strong); padding-top: var(--space-3); }
.agent__col h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-0); margin-bottom: var(--space-3); }
.agent__col ul { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.agent__col li { position: relative; padding-left: 1.25rem; }
.agent__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--green);
}
.agent__col--not li::before { top: 0.78em; width: 0.6rem; height: 0; border-top: 1.5px solid var(--muted); background: none; }
.agent__col--approval { border-top-color: var(--seal); }
.agent__col--approval h3 { color: var(--seal); }
.agent__col--approval li::before { top: 0.42em; width: 0.7rem; height: 0.7rem; background: none; border: 1.5px solid var(--seal); border-radius: 2px; }
.agent--planned .agent__name { color: var(--ink-2); }
.agent__note { margin: var(--space-4) 0 0; font-size: var(--step--1); color: var(--muted); max-width: 60ch; }

/* Prose (blog posts, legal pages). Optional sticky TOC on wide screens. */
.prose { max-width: var(--measure); font-size: var(--step-1); line-height: 1.65; }
.prose > * + * { margin-top: 0; }
.prose h2 { margin: 2.2em 0 0.6em; font-size: 1.625rem; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.prose h3 { margin: 1.8em 0 0.5em; font-size: var(--step-2); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1em; }
.prose blockquote { margin: 1.5em 0; padding: 0 0 0 var(--space-5); border-left: 2px solid var(--rule-strong); color: var(--ink-2); }
.prose .table-wrap { margin: 1.5em 0; font-size: var(--step-0); }
.prose :lang(ko) { line-height: var(--leading-ko); }

.doc { display: grid; gap: var(--space-6) var(--gutter); }
@media (min-width: 64em) {
  .doc { grid-template-columns: 15rem minmax(0, 1fr); }
  .doc__toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; max-height: calc(100vh - var(--header-h) - var(--space-7)); overflow-y: auto; }
}
.toc { font-size: var(--step--1); }
.toc__title { margin: 0 0 var(--space-2); font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.toc ol, .toc ul { margin: 0; padding: 0; list-style: none; border-top: var(--rule-w) solid var(--rule-strong); }
.toc li { margin: 0; border-bottom: var(--rule-w) solid var(--rule); }
.toc a { display: block; padding: var(--space-2) 0; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--green); text-decoration: underline; }
.toc li ol, .toc li ul { border-top: 0; }
.toc li li { border-bottom: 0; }
.toc li li a { padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.toc li li:last-child a { padding-bottom: var(--space-2); }
/* Phones and tablets: a compact list above the text; nested entries (e.g. the Korean sections of
   the privacy policy) are reachable from their parent link, so they are not repeated here. */
@media (max-width: 63.99em) {
  .toc a { padding: var(--space-1) 0; }
  .toc li ol, .toc li ul { display: none; }
}
/* Optional collapsible form: <details class="toc__details"><summary class="toc__title">…</summary><ol>…</ol></details> */
.toc__details > summary { cursor: pointer; list-style: none; padding: var(--space-2) 0; }
.toc__details > summary::-webkit-details-marker { display: none; }
.toc__details > summary::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-left: var(--space-2); border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.15rem) rotate(45deg); }
.toc__details[open] > summary::after { transform: translateY(0.05rem) rotate(-135deg); }

.byline { margin: 0; color: var(--muted); font-size: var(--step--1); }
.back-link { display: block; width: fit-content; margin-bottom: var(--space-3); font-size: var(--step--1); }
/* A back link at the top of a page head sits in the head's top padding instead of adding to it. */
.page-head > .wrap > .back-link:first-child { margin-top: calc(-0.5 * clamp(2.5rem, 1.5rem + 4vw, 5rem)); }

.post-list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-w) solid var(--rule-strong); max-width: 48rem; }
.post-list > li { margin: 0; padding: var(--space-5) 0; border-bottom: var(--rule-w) solid var(--rule); }
.post-list h2 { margin: var(--space-1) 0 var(--space-2); font-size: var(--step-2); }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list .byline { margin-bottom: var(--space-2); }
.post-list h2 a:hover { color: var(--green); text-decoration: underline; }
.post-list p:last-child { margin-bottom: 0; color: var(--ink-2); }

/* Korean summary: a quiet green-wash sheet, always lang="ko". Heading left, body right. */
.ko-summary {
  display: grid;
  gap: var(--space-3) var(--gutter);
  padding: var(--space-5);
  background: var(--green-wash);
  border-radius: var(--radius);
}
@media (min-width: 56em) {
  .ko-summary { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding: var(--space-6); }
}
.ko-summary > h2 { margin: 0; font-size: var(--step-1); line-height: 1.4; }
.ko-summary__body { max-width: 42rem; }
.ko-summary__body p, .ko-summary__body ul { margin: 0 0 var(--space-3); }
.ko-summary__body ul { padding-left: 1.1em; }
.ko-summary__body > :last-child { margin-bottom: 0; }
.ko-summary__more { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--rule-w) solid var(--rule-strong); font-weight: 600; }
.prose .ko-summary { margin-top: var(--space-7); font-size: var(--step-0); grid-template-columns: 1fr; }

/* Ruled list: one hairline row per item, no bullets. For short parallel facts. */
.ruled-list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-w) solid var(--rule-strong); }
.ruled-list > li { margin: 0; padding: var(--space-3) 0; border-bottom: var(--rule-w) solid var(--rule); }
.ruled-list--planned > li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.ruled-list--planned > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-3) + 0.45em);
  width: 0.625rem;
  height: 0.625rem;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
}

/* A short list of text links after a section (no arrows; the label names the destination). */
.link-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.link-list li { margin: 0; }

/* Diagram wrapper for inline SVG. Use the d-* classes inside the SVG so both themes work. */
.diagram { margin: 0; padding: var(--space-5); background: var(--sheet); border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius); }
.diagram svg { width: 100%; height: auto; font-family: var(--font-sans); }
.diagram figcaption { margin-top: var(--space-3); font-size: var(--step--1); color: var(--muted); }
.d-box { fill: var(--sheet); stroke: var(--rule-strong); stroke-width: 1.5; }
.d-box--owner { fill: var(--green); stroke: var(--green); }
.d-box--agent { fill: var(--green-wash); stroke: var(--green); stroke-width: 1; }
.d-box--source { fill: var(--paper); stroke: var(--rule); }
.d-box--gate { fill: var(--seal-wash); stroke: var(--seal); stroke-width: 1.5; stroke-dasharray: 5 3; }
.d-line { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.d-arrow { fill: var(--muted); }
.d-text { fill: var(--ink); font-size: 13px; font-weight: 600; }
.d-text--on-owner { fill: var(--on-green); }
.d-text--small { fill: var(--ink-2); font-size: 11px; font-weight: 400; }
.d-text--gate { fill: var(--seal); }

/* Jump links (agents page): a wrapping list with real tap targets, no " · " separators. */
.jump-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.jump-nav li { margin: 0; }
.jump-nav a { display: inline-block; padding-block: var(--space-2); }

/* Copyable template (pilot page): a form slip with ruled lines and a copy button. */
.template-block { max-width: 40rem; background: var(--sheet); border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius); }
.template-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 3px double var(--rule-strong);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
}
.template-block pre {
  margin: 0;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--rule) calc(100% - 1px));
  background-size: 100% 1.75rem;
}

/* Rule callout (blog): a rule or test sentence set on ledger lines with a green margin rule. */
.rule-note,
.prose .rule-note {
  margin: 1.5em 0;
  padding: 0 0 0 var(--space-5);
  border-left: 3px solid var(--green);
  line-height: 1.75rem;
  color: var(--ink);
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--rule) calc(100% - 1px));
  background-size: 100% 1.75rem;
}
.rule-note > * { margin: 0; }
/* Korean children would otherwise take the 1.75 :lang(ko) line-height and drift off the 1.75rem rules. */
.rule-note :lang(ko) { line-height: inherit; }

/* Previous / next post. */
.post-nav {
  display: grid;
  gap: var(--space-4) var(--gutter);
  margin: var(--space-7) 0 0;
  padding: var(--space-4) 0 0;
  list-style: none;
  border-top: var(--rule-w) solid var(--rule-strong);
}
@media (min-width: 40em) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav li { margin: 0; }
.post-nav__label { display: block; font-size: var(--step--1); color: var(--muted); }

/* Diagram shown only where its labels stay legible; the text version carries the content on phones. */
@media (max-width: 47.99em) { .diagram--wide-only { display: none; } }

/* Pull quote in a label column: a .lead paragraph under the heading in .labeled's first child (or
   any element with .pull-quote). Decorative repetition of a line from the text: keep aria-hidden. */
.labeled > :first-child > .lead, .pull-quote {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--rule-w) solid var(--rule-strong);
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 24ch;
}

/* Block spacing. Stacked block components get even space below them; the last child of a container
   never does. This sits last in the shared CSS on purpose: it must beat the components' own
   margin: 0 resets. Inside .flow the margins collapse with the flow spacing, so there is no double gap. */
.callout, .table-wrap, .faq, .plans, .gate-list, .ruled-list, .timeline, .steps, .facts, .template-block,
.legend, .diagram, .columns, .split, .approval-doc, .post-list, .agent__cols, .btn-row, .link-list,
.post-nav, .jump-nav, .ko-summary {
  margin-bottom: var(--space-5);
}
:is(.callout, .table-wrap, .faq, .plans, .gate-list, .ruled-list, .timeline, .steps, .facts, .template-block,
.legend, .diagram, .columns, .split, .approval-doc, .post-list, .agent__cols, .btn-row, .link-list,
.post-nav, .jump-nav, .ko-summary):last-child {
  margin-bottom: 0;
}