:root {
  --yr-ink: #15221f;
  --yr-paper: #f3efe5;
  --yr-panel: #fffdf7;
  --yr-green: #0b5f55;
  --yr-green-dark: #073f39;
  --yr-orange: #d5662b;
  --yr-line: #cfc6b4;
  --yr-muted: #66716d;
  --yr-red: #a13c30;
  --yr-hold: #fff1cc;
  --yr-shadow: 0 10px 28px rgba(21, 34, 31, 0.08);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { background: var(--yr-paper); color: var(--yr-ink); font-family: Inter, "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif; margin: 0; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.surface-nav { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; }
.surface-nav a { border: 1px solid transparent; border-radius: 999px; color: inherit; font-size: .86rem; font-weight: 750; padding: 7px 10px; text-decoration: none; }
.surface-nav a:hover, .surface-nav a:focus-visible { background: rgba(11, 95, 85, .08); border-color: rgba(11, 95, 85, .28); outline: none; }
.surface-nav a[aria-current="page"] { background: var(--yr-green); color: white; }

.public-page { min-height: 100vh; }
.public-header { align-items: center; background: rgba(255, 253, 247, .96); border-bottom: 1px solid var(--yr-line); display: flex; gap: 24px; justify-content: space-between; padding: 14px clamp(18px, 4vw, 60px); position: sticky; top: 0; z-index: 20; }
.public-brand { align-items: center; color: var(--yr-ink); display: flex; gap: 11px; text-decoration: none; }
.public-brand-mark { align-items: center; background: var(--yr-green); border-radius: 7px; color: white; display: inline-flex; font-size: .78rem; font-weight: 900; height: 34px; justify-content: center; letter-spacing: .04em; width: 44px; }
.public-brand strong { display: block; font-size: .96rem; }
.public-brand small { color: var(--yr-muted); display: block; font-size: .72rem; }
.public-main { margin: 0 auto; max-width: 1180px; padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 40px) 80px; }

.public-hero { border-bottom: 1px solid var(--yr-line); display: grid; gap: 28px; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); padding-bottom: clamp(28px, 5vw, 58px); }
.kicker { color: var(--yr-green); font-size: .76rem; font-weight: 900; letter-spacing: .16em; margin: 0 0 12px; text-transform: uppercase; }
.public-hero h1 { font-family: Georgia, "Yu Mincho", serif; font-size: clamp(2.4rem, 7vw, 5.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; margin: 0; max-width: 900px; }
.public-hero .lede { color: #43524e; font-size: clamp(1.02rem, 2vw, 1.28rem); line-height: 1.75; margin: 24px 0 0; max-width: 760px; }
.boundary-stack { align-content: start; display: grid; gap: 8px; }
.boundary-chip { background: var(--yr-panel); border: 1px solid var(--yr-line); border-left: 5px solid var(--yr-orange); border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .77rem; font-weight: 750; padding: 10px 12px; }

.surface-section { margin-top: clamp(34px, 6vw, 70px); }
.section-head { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 16px; }
.section-head h2 { font-family: Georgia, "Yu Mincho", serif; font-size: clamp(1.65rem, 3vw, 2.55rem); font-weight: 500; margin: 0; }
.section-head p { color: var(--yr-muted); margin: 0; max-width: 540px; }
.surface-grid { display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.surface-card { background: var(--yr-panel); border: 1px solid var(--yr-line); border-radius: 12px; box-shadow: var(--yr-shadow); grid-column: span 6; min-width: 0; padding: clamp(18px, 3vw, 30px); }
.surface-card.full { grid-column: 1 / -1; }
.surface-card.third { grid-column: span 4; }
.surface-card h2, .surface-card h3 { margin-top: 0; }
.surface-card p { line-height: 1.65; }

.field { display: grid; gap: 7px; margin: 0 0 16px; }
.field > span { font-size: .84rem; font-weight: 850; }
.field small { color: var(--yr-muted); }
.field input, .field select, .field textarea { background: #fff; border: 1px solid #a7b2ae; border-radius: 8px; color: var(--yr-ink); min-width: 0; padding: 11px 12px; width: 100%; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--yr-green); box-shadow: 0 0 0 3px rgba(11, 95, 85, .14); outline: none; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-line { align-items: flex-start; display: flex; gap: 9px; line-height: 1.55; margin: 14px 0; }
.check-line input { margin-top: 4px; }
.action-row { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: space-between; }
.primary-action, .quiet-action { border-radius: 8px; font-weight: 850; min-height: 44px; padding: 9px 15px; }
.primary-action { background: var(--yr-green); border: 1px solid var(--yr-green); color: white; }
.primary-action:hover { background: var(--yr-green-dark); }
.primary-action:disabled { cursor: wait; opacity: .58; }
.quiet-action { background: transparent; border: 1px solid #8b9b96; color: var(--yr-green-dark); }
.status-line { color: var(--yr-muted); font-size: .82rem; min-height: 1.35em; }
.status-line.error { color: var(--yr-red); font-weight: 750; }
.status-line.ok { color: var(--yr-green); font-weight: 750; }

.arm-switch { background: #ebe5d9; border: 1px solid var(--yr-line); border-radius: 9px; display: inline-flex; gap: 3px; padding: 3px; }
.arm-switch button { background: transparent; border: 0; border-radius: 6px; color: var(--yr-muted); font-size: .82rem; font-weight: 850; padding: 8px 11px; }
.arm-switch button.active { background: var(--yr-panel); box-shadow: 0 1px 5px rgba(0, 0, 0, .1); color: var(--yr-green-dark); }
.candidate-list, .evidence-list { display: grid; gap: 10px; margin: 0; padding: 0; }
.candidate, .evidence-item { background: #fff; border: 1px solid var(--yr-line); border-radius: 9px; list-style: none; padding: 13px 14px; }
.candidate-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.candidate-code { align-items: center; background: var(--yr-green); border-radius: 50%; color: #fff; display: inline-flex; font-weight: 900; height: 31px; justify-content: center; width: 31px; }
.candidate-weight { color: var(--yr-muted); font-family: ui-monospace, Consolas, monospace; font-size: .73rem; text-transform: uppercase; }
.hold-panel { background: var(--yr-hold); border: 1px dashed #b38327; border-radius: 9px; margin-top: 14px; padding: 14px; }
.hold-panel strong { color: #704d0d; }
.hold-panel ul { margin-bottom: 0; }
.empty-result { border: 1px dashed var(--yr-line); border-radius: 9px; color: var(--yr-muted); padding: 28px; text-align: center; }

.api-table { border-collapse: collapse; font-size: .9rem; width: 100%; }
.api-table th, .api-table td { border-bottom: 1px solid var(--yr-line); padding: 11px 8px; text-align: left; vertical-align: top; }
.api-table th { color: var(--yr-muted); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
code { background: #eee8da; border-radius: 4px; padding: 2px 5px; }
pre { background: #10201c; border-radius: 9px; color: #dbe9e3; font-size: .79rem; line-height: 1.55; margin: 0; max-height: 420px; overflow: auto; padding: 16px; white-space: pre-wrap; word-break: break-word; }
.result-json { margin-top: 16px; }
.live-badge { align-items: center; background: #ddf0e8; border: 1px solid #9acabb; border-radius: 999px; color: var(--yr-green-dark); display: inline-flex; font-size: .74rem; font-weight: 900; gap: 6px; padding: 5px 9px; }
.live-badge::before { background: var(--yr-green); border-radius: 50%; content: ""; height: 7px; width: 7px; }

.public-footer { border-top: 1px solid var(--yr-line); color: var(--yr-muted); display: flex; flex-wrap: wrap; font-size: .8rem; gap: 10px 24px; justify-content: space-between; margin: 0 auto; max-width: 1180px; padding: 26px clamp(16px, 4vw, 40px) 40px; }
.public-footer a { color: var(--yr-green-dark); }
.hidden { display: none !important; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

@media (max-width: 880px) {
  .public-header { align-items: flex-start; flex-direction: column; gap: 10px; position: static; }
  .public-hero { grid-template-columns: 1fr; }
  .surface-card, .surface-card.third { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .public-main { padding-top: 28px; }
  .public-hero h1 { font-size: 2.65rem; }
  .field-row { grid-template-columns: 1fr; }
  .surface-nav { gap: 1px; }
  .surface-nav a { font-size: .78rem; padding: 6px 7px; }
  .section-head { align-items: flex-start; flex-direction: column; }
}