/* delimixx.com — shared stylesheet. No external fonts, no external requests. */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f7fa;
  --bg-card: #ffffff;
  --text: #1f2a44;
  --text-soft: #4a5570;
  --line: #dde1ea;
  --accent: #c8321f;          /* darker red: 5.6:1 on white */
  --accent-grad: linear-gradient(135deg, #ffb347 0%, #e8453c 100%);
  --btn-bg: #1f2a44;
  --btn-text: #ffffff;
  --code-bg: #eef0f5;
  --warn-bg: #fff4dc;
  --warn-line: #e5b84c;
  --tbd-bg: #ffe08a;
  --maxw: 1080px;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121826;
    --bg-soft: #181f31;
    --bg-card: #1b2338;
    --text: #e8ecf4;
    --text-soft: #aab3c8;
    --line: #2c3650;
    --accent: #ff8a6b;
    --btn-bg: #ffb347;
    --btn-text: #1f2a44;
    --code-bg: #232c45;
    --warn-bg: #3a3017;
    --warn-line: #8a6d1f;
    --tbd-bg: #6b5410;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Yu Gothic UI", "Meiryo UI", system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  font-size: 1rem;
}
:lang(ja) body, body:lang(ja) { line-height: 1.85; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
code, kbd, pre { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 0.92em; }
code, kbd { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: var(--code-bg); padding: 12px 14px; border-radius: 8px; overflow-x: auto; }
pre code { background: none; padding: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--btn-bg); color: var(--btn-text); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

/* header */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.15rem; }
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; color: var(--text-soft); padding: 6px 10px; border-radius: 8px; font-size: 0.95rem; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--bg-soft); color: var(--text); }
.nav a[aria-current="page"] { font-weight: 600; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 6px; }
.lang a, .lang span { padding: 4px 10px; font-size: 0.85rem; text-decoration: none; }
.lang span { background: var(--btn-bg); color: var(--btn-text); font-weight: 600; }
.lang a { color: var(--text-soft); }
.lang a:hover { background: var(--bg-soft); }
.menu-toggle { display: none; }
@media (max-width: 760px) {
  .menu-toggle { display: block; margin-left: auto; }
  .menu-toggle summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; }
  .menu-toggle summary::-webkit-details-marker { display: none; }
  .site-header .nav.full { display: none; }
  .menu-toggle .nav { margin: 8px 0 0; flex-direction: column; align-items: stretch; width: 100%; }
  .site-header .wrap { flex-wrap: wrap; }
  .menu-toggle[open] { flex-basis: 100%; }
}

/* hero */
.hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.hero .wrap { padding-top: 56px; padding-bottom: 48px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 32px; } }
.hero .wrap > *, .grid > *, .plans > *, .shots > * { min-width: 0; }
h1, h2, h3, p, li, a { overflow-wrap: anywhere; }
.hero h1 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.01em; }
.hero p.lead { font-size: 1.1rem; color: var(--text-soft); margin: 0 0 22px; }
.hero .lead .fn-mark { position: relative; font-size: 1em; line-height: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hero .lead .fn-mark::before { content: ""; position: absolute; inset: -12px -14px; }   /* larger tap area without adding height */
.hero .lead .fn-mark:hover { color: var(--accent); }
#fn-note { scroll-margin-top: 80px; }
#fn-note { color: var(--text); }
#fn-note .fn-star { color: var(--accent); font-weight: 700; }
#fn-note:target { background: var(--warn-bg); border-radius: 6px; padding: 8px 10px; margin-left: -10px; }
.hero .lead .fn-mark { color: var(--accent); }
.hero .shot { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(31, 42, 68, 0.18); }
.stripe { height: 5px; background: var(--accent-grad); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.btn { display: inline-block; padding: 11px 20px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-text); text-decoration: none; font-weight: 600; border: 2px solid var(--btn-bg); }
.btn:hover { filter: brightness(1.12); }
.btn.secondary { background: transparent; color: var(--text); border-color: var(--line); }
.btn.secondary:hover { background: var(--bg-soft); filter: none; }
.btn.pending { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.note-small { font-size: 0.88rem; color: var(--text-soft); }

/* sections */
main { display: block; }
section.block { padding: 44px 0; }
section.block + section.block { border-top: 1px solid var(--line); }
section.alt { background: var(--bg-soft); }
h1, h2, h3 { line-height: 1.3; }
h2 { font-size: 1.6rem; margin: 0 0 8px; }
h3 { font-size: 1.12rem; margin: 22px 0 6px; }
.sub { color: var(--text-soft); margin: 0 0 24px; max-width: 70ch; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card h3 { margin-top: 0; }
.card p { margin: 6px 0 0; color: var(--text-soft); }
.shots { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
figure { margin: 0; }
figure img { border: 1px solid var(--line); border-radius: 10px; width: 100%; }
figcaption { font-size: 0.9rem; color: var(--text-soft); margin-top: 6px; }

/* pricing */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg-card); display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--accent); }
.plan h2, .plan h3 { margin: 0; font-size: 1.3rem; padding: 0; }
.price { font-size: 2.1rem; font-weight: 700; margin: 8px 0 2px; }
.price small { font-size: 0.95rem; font-weight: 400; color: var(--text-soft); }
.plan ul { padding-left: 1.2em; margin: 14px 0; }
.plan li { margin: 4px 0; }
.plan .btn-row { margin-top: auto; padding-top: 12px; }
.tiers { width: 100%; border-collapse: collapse; margin: 12px 0; }
.tiers th, .tiers td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.tiers thead th { background: var(--bg-soft); }
.tiers td.c { text-align: center; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 0.95rem; }
table.data th, table.data td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
table.data thead th { background: var(--bg-soft); }

/* prose (legal, faq, support) */
.prose { max-width: 78ch; }
.prose.wide { max-width: var(--maxw); }
.prose h1 { font-size: 2rem; margin: 0 0 6px; }
.prose h2 { font-size: 1.3rem; margin: 32px 0 6px; padding-top: 6px; }
.prose h3 { font-size: 1.05rem; margin: 20px 0 4px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 4px 0; }
.meta { color: var(--text-soft); font-size: 0.92rem; margin-bottom: 24px; }
.callout { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
.callout.info { background: var(--bg-soft); border-color: var(--line); }
details.qa { border-bottom: 1px solid var(--line); padding: 10px 0; }
details.qa summary { cursor: pointer; font-weight: 600; }
details.qa[open] summary { margin-bottom: 6px; }
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; margin: 18px 0; }
.toc ul { margin: 6px 0; padding-left: 1.2em; columns: 2; }
@media (max-width: 640px) { .toc ul { columns: 1; } }
mark.tbd { background: var(--tbd-bg); color: var(--text); padding: 0 4px; border-radius: 3px; }
.draft-banner { background: #b3261e; color: #fff; text-align: center; padding: 6px 12px; font-weight: 600; }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); margin-top: 24px; padding: 32px 0 24px; font-size: 0.93rem; }
.foot-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer h2 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 5px 0; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.legal-line { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 0.88rem; }

/* the language gate and the 404 page (kept here, not inline: the Content-Security-Policy forbids inline styles) */
.gate { text-align: center; padding: 12vh 16px; }
.gate-logo { border-radius: 20px; }
.gate-sub { margin: 0 auto 24px; }
.btn-row-center { justify-content: center; }

@media print {
  .site-header, .site-footer, .btn-row, .menu-toggle { display: none; }
  body { font-size: 11pt; }
}

/* Long inline code must not widen a table or the page. */
td code, th code, li code, p code { overflow-wrap: anywhere; }
/* Japanese: strict line breaking keeps small kana (っ, ゃ ...) and the long vowel mark off the start of a line. */
html[lang="ja"] { line-break: strict; }

/* Image viewer (zoom.js). No animation at all, so prefers-reduced-motion needs nothing special. */
a.zoom { display: block; cursor: zoom-in; }
a.zoom:focus-visible { outline: 3px solid var(--btn-bg); outline-offset: 3px; border-radius: 10px; }
.zv { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 22, 0.9); display: flex; flex-direction: column; }
.zv-bar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 10px 12px; }
.zv-bar button { font: inherit; font-size: 1rem; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 8px; padding: 8px 14px; min-height: 44px; min-width: 44px; cursor: pointer; }
.zv-bar button:hover { background: rgba(255, 255, 255, 0.26); }
.zv-bar button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zv-stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 0 12px 12px; -webkit-overflow-scrolling: touch; }
.zv-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 6px; }
.zv-stage.actual { display: block; }
.zv-stage.actual img { max-width: none; max-height: none; }
.zv-cap { color: #e8ecf5; text-align: center; padding: 0 16px 14px; font-size: 0.95rem; }
body.zv-open { overflow: hidden; }

/* Phones (up to 600px): less empty space, but still airy. The desktop layout above is unchanged (everything here is inside the query).
   Body text stays at 1rem, line height stays near 1.6 (1.7 for Japanese), side margins stay at 16px, tap targets are at least 44px. */
@media (max-width: 600px) {
  body { line-height: 1.6; }
  :lang(ja) body, body:lang(ja) { line-height: 1.7; }
  .site-header .wrap { min-height: 52px; gap: 10px; }
  .brand { font-size: 1.05rem; min-height: 44px; }
  .brand img { width: 28px; height: 28px; }
  .menu-toggle summary { min-height: 44px; display: flex; align-items: center; padding: 6px 14px; }
  .menu-toggle .nav a { padding: 12px; min-height: 44px; display: flex; align-items: center; }
  .menu-toggle .lang { margin: 6px 0 0; align-self: flex-start; }
  .menu-toggle .lang a, .menu-toggle .lang span { padding: 10px 14px; }
  .hero .wrap { padding-top: 20px; padding-bottom: 22px; gap: 16px; }
  .hero h1 { font-size: 1.65rem; margin-bottom: 8px; }
  .hero p.lead { font-size: 1.05rem; margin-bottom: 14px; }
  section.block { padding: 28px 0; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.08rem; margin-top: 18px; }
  .prose h2 { font-size: 1.25rem; margin-top: 24px; }
  .sub { margin-bottom: 16px; }
  .grid, .shots, .plans { gap: 12px; }
  .card { padding: 14px 16px; }
  .plan { padding: 18px; }
  .price { font-size: 1.8rem; }
  .btn { padding: 12px 18px; min-height: 44px; box-sizing: border-box; }
  .btn-row { gap: 10px; }
  .callout { padding: 10px 14px; margin: 12px 0; }
  details.qa { padding: 8px 0; }
  details.qa summary { min-height: 44px; display: flex; align-items: center; }
  .site-footer { padding: 22px 0 18px; margin-top: 16px; }
  .foot-grid { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer li { margin: 0; }
  .site-footer li a { display: inline-block; padding: 10px 0; }
  .tiers th, .tiers td { padding: 8px 8px; }
  /* data tables become stacked cards: the column title is shown above each value (build.py adds data-label) */
  table.data thead { position: absolute; left: -9999px; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; box-sizing: border-box; }
  table.data tr { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 6px 12px; }
  table.data td { border: 0; padding: 5px 0; }
  table.data td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-soft); }
}

/* admin page tables: scroll inside the frame instead of widening the page */
table.tbl { display: block; overflow-x: auto; max-width: 100%; }

/* review fixes 2026-10-13 */
code.nw { white-space: nowrap; }
table.codes th:first-child, table.codes td:first-child { white-space: nowrap; width: 11em; }
table.codes td:first-child code { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
table.data td, table.data th { overflow-wrap: break-word; }
.prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.plan .price.soon { font-size: 1.15rem; font-weight: 600; color: var(--text-soft); }
.btn.pending { background: #e6e8ee; border-color: #cfd3de; color: #6a7285; cursor: not-allowed; box-shadow: none; }
@media (prefers-color-scheme: dark) { .btn.pending { background: #2a3144; border-color: #3a4259; color: #98a1b8; } }
@media (max-width: 600px) { .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (min-width: 601px) {
  table.codes { table-layout: fixed; }
  table.codes:has(th:nth-child(3)) th:nth-child(2) { width: 30%; }
}

.x-icon { vertical-align: -1px; margin-right: 4px; }
/* row-header tables (legal notice): the header column must not break labels in the middle of a word */
@media (min-width: 601px) { table.data tbody th { width: 12.5em; min-width: 8em; } }

/* Japanese has no italics: a slanted CJK font looks broken, so emphasis is a heavier weight */
:lang(ja) em { font-style: normal; font-weight: 600; }