/*
 * おしえて手続き UI foundation
 * Step 1: design-system consolidation
 *
 * Layer order
 * 1. Tokens
 * 2. Base / accessibility
 * 3. Layout
 * 4. Components
 * 5. Existing page-specific compatibility rules
 * 6. Responsive rules
 */

:root {
  /* Brand and semantic colors */
  --color-brand-700: #0f5848;
  --color-brand-600: #146c5c;
  --color-brand-100: #dff1ec;
  --color-brand-050: #edf6f2;

  --color-bg: #f7f8f6;
  --color-surface: #ffffff;
  --color-surface-subtle: #f3f6f4;
  --color-surface-warm: #fffaf0;
  --color-text: #24312e;
  --color-text-muted: #64716d;
  --color-border: #d8e1dc;
  --color-border-strong: #b9c8c1;

  --color-info: #245a9b;
  --color-info-bg: #eaf2ff;
  --color-success: #155e50;
  --color-success-bg: #e0f2ec;
  --color-warning: #765000;
  --color-warning-bg: #fff1d6;
  --color-danger: #8f2525;
  --color-danger-bg: #fff0f0;

  /* Backward-compatible aliases */
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --accent: var(--color-brand-600);
  --accent2: var(--color-brand-700);
  --soft: var(--color-brand-050);
  --warm: var(--color-surface-warm);
  --danger: var(--color-danger);
  --warn: var(--color-warning);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.625rem, 5vw, 2.25rem);
  --text-hero: clamp(2rem, 7vw, 3.125rem);
  --leading-tight: 1.35;
  --leading-heading: 1.5;
  --leading-body: 1.75;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Spacing: 4px base scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shape and elevation */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --radius: var(--radius-lg);
  --shadow-sm: 0 1px 2px rgba(35, 59, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(35, 59, 51, 0.08);
  --shadow: var(--shadow-md);

  /* Layout and interaction */
  --container: 67.5rem;
  --tap-min: 2.75rem;
  --focus-ring: 0 0 0 3px rgba(20, 108, 92, 0.22);
  --transition-fast: 160ms ease;
}

/* New role-based component API. Existing classes remain supported below. */
.c-card {
  min-width: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.c-button {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6875rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.c-button--primary { background: var(--color-brand-600); color: #fff; }
.c-button--primary:hover { background: var(--color-brand-700); text-decoration: none; }
.c-button--secondary { background: var(--color-surface); color: var(--color-brand-700); border-color: var(--color-brand-600); }
.c-button--quiet { background: transparent; color: var(--color-brand-700); border-color: var(--color-border); }
.c-button--danger { background: var(--color-danger); color: #fff; }
.c-button--small { min-height: var(--tap-min); padding-inline: var(--space-3); font-size: var(--text-sm); }
.c-button--block { width: 100%; }

.c-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.35;
}
.c-badge--fact { background: var(--color-surface-subtle); color: #485650; border: 1px solid var(--color-border); }
.c-badge--status-success { background: var(--color-success-bg); color: var(--color-success); }
.c-badge--status-info { background: var(--color-info-bg); color: var(--color-info); }
.c-badge--status-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.c-badge--status-neutral { background: #edf0ef; color: #4f5e58; }

.c-field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.c-field__label { font-weight: var(--weight-bold); }
.c-field__help { color: var(--color-text-muted); font-size: var(--text-sm); }
.c-input,
.c-select,
.c-textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.6875rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.c-textarea { min-height: 11.25rem; resize: vertical; }
.c-input:focus,
.c-select:focus,
.c-textarea:focus { outline: none; border-color: var(--color-brand-600); box-shadow: var(--focus-ring); }

/* Existing page-specific compatibility rules */
* {
  box-sizing:border-box
}
html {
  font-size:16px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.7
}
a {
  color:var(--accent);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
.container {
  width:min(1080px,calc(100% - 32px));
  margin:auto
}
.site-header {
  background:var(--color-surface);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:68px;
  gap:18px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--text);
  font-size:1.12rem
}
.brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--radius-md);
  background:var(--accent);
  color:#fff
}
.nav {
  display:flex;
  gap:20px;
  align-items:center;
  font-size:.94rem
}
.nav a {
  color:#334252
}
.hero-grid {
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:36px;
  align-items:center
}
.eyebrow {
  display:inline-block;
  font-size:.84rem;
  font-weight:700;
  color:var(--accent);
  background:#dff1ec;
  padding:4px 10px;
  border-radius:var(--radius-pill)
}
.hero h1 {
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.25;
  margin:14px 0
}
.hero p {
  font-size:1.08rem;
  color:var(--muted);
  max-width:700px
}
.search-box {
  display:flex;
  gap:10px;
  background:var(--color-surface);
  padding:10px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  margin-top:24px
}
.search-box input {
  flex:1;
  border:0;
  outline:0;
  padding:10px;
  font-size:1rem
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--radius-md);
  padding:11px 18px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size:.95rem
}
.btn:hover {
  background:var(--accent2);
  text-decoration:none
}
.btn.secondary {
  background:var(--color-surface);
  color:var(--accent);
  border:1px solid var(--accent)
}
.btn.danger {
  background:var(--danger)
}
.btn.small {
  padding:7px 12px;
  font-size:.86rem
}
.hero-card,.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.hero-card {
  padding:22px
}
.hero-card h3 {
  margin-top:0
}
.section {
  padding:34px 0
}
.section h2 {
  font-size:1.5rem;
  margin:0 0 18px
}
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.category-card {
  display:block;
  padding:18px;
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  color:var(--text);
  font-weight:700
}
.category-card span {
  display:block;
  color:var(--muted);
  font-size:.84rem;
  font-weight:400
}
.list {
  display:grid;
  gap:14px
}
.question-card {
  padding:20px
}
.meta {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.84rem
}
.badge {
  display:inline-block;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  background:#eef3f7;
  color:#4e5d6c;
  font-size:.78rem;
  font-weight:700
}
.badge.green {
  background:#e0f2ec;
  color:#155e50
}
.badge.orange {
  background:var(--color-surface)0d4;
  color:#815500
}
.card {
  padding:22px
}
.two-col {
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:24px
}
.sidebar {
  display:grid;
  gap:16px;
  align-content:start
}
.form-card {
  max-width:800px;
  margin:28px auto;
  padding:26px
}
.field {
  margin-bottom:20px
}
.field label {
  display:block;
  font-weight:700;
  margin-bottom:6px
}
.field small {
  display:block;
  color:var(--muted);
  margin-top:5px
}
.input,.textarea,.select {
  width:100%;
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  padding:11px 12px;
  font:inherit;
  color:var(--text)
}
.textarea {
  min-height:180px;
  resize:vertical
}
.errors {
  border:1px solid #e8b9b9;
  background:var(--color-surface)0f0;
  color:#7d2222;
  padding:14px 18px;
  border-radius:var(--radius-md);
  margin-bottom:18px
}
.errors ul {
  margin:0;
  padding-left:20px
}
.flash-wrap {
  padding-top:14px
}
.flash {
  padding:12px 16px;
  border-radius:var(--radius-md)
}
.flash.success {
  background:#e5f5ee;
  color:#175d4e
}
.flash.error {
  background:var(--color-surface)0f0;
  color:#7d2222
}
.site-footer {
  margin-top:60px;
  background:#17232d;
  color:#cbd4dc;
  padding:36px 0 20px
}
.site-footer a {
  color:#e9f5f2
}
.footer-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}
.footer-links {
  display:grid;
  gap:8px;
  justify-content:end
}
.copyright {
  border-top:1px solid #35434f;
  margin-top:24px;
  padding-top:16px;
  font-size:.84rem;
  color:#9dacb8
}
.answer {
  padding:20px;
  margin-top:14px;
  border-left:4px solid var(--accent)
}
.answer .expert-name {
  font-weight:800
}
.notice {
  padding:14px 16px;
  border-radius:var(--radius-md);
  background:var(--color-surface)8e8;
  border:1px solid #f2dfb7;
  color:#6d4e0a
}
.admin-table {
  width:100%;
  border-collapse:collapse;
  background:var(--color-surface)
}
.admin-table th,.admin-table td {
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
  vertical-align:top
}
.admin-table th {
  font-size:.84rem;
  color:var(--muted)
}
.stat-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.stat {
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px
}
.stat b {
  display:block;
  font-size:1.8rem
}
.actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.markdown-pre {
  white-space:pre-wrap;
  background:#111923;
  color:#dfe7ef;
  padding:18px;
  border-radius:var(--radius-md);
  overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.88rem
}
.setup-wrap {
  max-width:900px;
  margin:30px auto
}
.setup-step {
  margin-bottom:18px
}
.muted {
  color:var(--muted)
}
.empty {
  padding:28px;
  text-align:center;
  color:var(--muted)
}
@media(max-width:820px) {
  .hero-grid,.two-col,.footer-grid {
    grid-template-columns:1fr
  }
  .grid {
    grid-template-columns:repeat(2,1fr)
  }
  .stat-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-links {
    justify-content:start
  }
  .hero {
    padding-top:44px
  }
}
@media(max-width:520px) {
  .container {
    width:min(100% - 22px,1080px)
  }
  .grid,.stat-grid {
    grid-template-columns:1fr
  }
  .search-box {
    flex-direction:column
  }
  .header-inner {
    min-height:60px
  }
  .nav {
    gap:10px
  }
  .hero h1 {
    font-size:2rem
  }
  .form-card,.card {
    padding:18px
  }
  .admin-table {
    font-size:.86rem
  }
}
.profile-head {
  display:flex;
  gap:20px;
  align-items:flex-start
}
.profile-photo {
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:#eef3f7
}
.profile-photo.large {
  width:120px;
  height:120px
}
.tag-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.check-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px
}
.check-grid label {
  font-weight:400;
  margin:0
}
.quick-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
details summary {
  cursor:pointer;
  color:var(--accent);
  font-weight:700
}
@media(max-width:820px) {
  .quick-grid {
    grid-template-columns:1fr
  }
  .profile-head {
    flex-direction:column
  }
  .check-grid {
    grid-template-columns:1fr
  }
}
/* v1.3 responsive / typography refinements */
.hero-title {
  font-size:clamp(2rem,4.15vw,3.1rem);
  line-height:1.32;
  max-width:19em;
  text-wrap:balance;
  word-break:auto-phrase;
  line-break:strict;
  overflow-wrap:break-word
}
h1,h2,h3 {
  word-break:auto-phrase;
  line-break:strict;
  overflow-wrap:break-word
}
.card h3 {
  line-height:1.45
}
.legal h1 {
  margin-top:0
}
.legal h2 {
  margin-top:2.2rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.35rem
}
.legal h3 {
  margin-top:1.5rem
}
.legal li {
  margin:.4rem 0
}
.legal .updated {
  color:var(--muted);
  font-size:.9rem
}
.filter-bar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px;
  margin:14px 0 20px
}
.filter-bar .field {
  margin:0;
  min-width:160px;
  flex:1
}
.filter-bar .field.compact {
  flex:0 1 220px
}
.question-state {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.embed-code {
  width:100%;
  min-height:120px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.86rem
}
.widget-preview {
  border:1px dashed #b9c6d2;
  border-radius:var(--radius-md);
  padding:16px;
  background:#fafcfd
}
.copy-row {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}
.status-open {
  background:#e0f2ec;
  color:#155e50
}
.status-answered {
  background:#e7f0ff;
  color:#245a9b
}
.status-closed {
  background:#edf0f3;
  color:#56616d
}
.legal-consent {
  font-size:.92rem;
  background:var(--color-surface-subtle);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 14px
}
.legal-consent label {
  font-weight:400
}
.legal-consent a {
  text-decoration:underline
}
@media(max-width:900px) {
  .hero-grid {
    grid-template-columns:1.2fr .8fr;
    gap:24px
  }
  .hero-title {
    font-size:clamp(2rem,4.4vw,2.65rem)
  }
}
@media(max-width:820px) {
  .hero-title {
    max-width:22em
  }
  .hero-grid {
    grid-template-columns:1fr
  }
  .hero-card {
    max-width:620px
  }
  .filter-bar {
    align-items:stretch
  }
  .filter-bar .field,.filter-bar .field.compact {
    min-width:min(100%,220px)
  }
}
@media(max-width:520px) {
  .hero-title {
    font-size:clamp(1.85rem,9vw,2.25rem);
    line-height:1.38;
    max-width:none
  }
  .hero p {
    font-size:1rem
  }
  .eyebrow {
    font-size:.8rem
  }
  .filter-bar {
    display:grid;
    grid-template-columns:1fr
  }
  .filter-bar .field,.filter-bar .field.compact {
    min-width:0
  }
  .btn {
    max-width:100%
  }
  .profile-head h1 {
    font-size:1.65rem
  }
}
/* v1.5 Public Beta */
.page-head {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px
}
.page-head h1 {
  margin-top:0
}
.stat-inline {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin:10px 0 16px;
  color:var(--muted)
}
.theme-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.theme-option {
  display:flex!important;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px;
  background:var(--color-surface);
  cursor:pointer
}
.theme-option input {
  margin-top:5px
}
.theme-option span {
  display:grid;
  gap:2px
}
.theme-option small {
  color:var(--muted);
  font-weight:400
}
.knowledge-picker {
  display:grid;
  gap:8px;
  max-height:420px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:10px;
  background:#fbfcfd
}
.knowledge-picker label {
  display:flex!important;
  align-items:flex-start;
  gap:9px;
  padding:8px;
  border-radius:var(--radius-sm);
  font-weight:400
}
.knowledge-picker label:hover {
  background:#f0f6f4
}
.knowledge-picker input {
  margin-top:5px
}
.knowledge-picker span {
  display:grid
}
.knowledge-picker small {
  color:var(--muted)
}
.legal p,.legal li {
  max-width:76em
}
.legal h1 {
  line-height:1.35;
  text-wrap:balance
}
.legal h2 {
  line-height:1.45;
  text-wrap:balance
}
.card,.question-card,.answer {
  min-width:0
}
h1,h2,h3,.category-card {
  overflow-wrap:break-word;
  word-break:normal;
  line-break:strict
}
.brand {
  overflow-wrap:normal;
  word-break:keep-all
}
.admin-table td,.admin-table th {
  word-break:normal;
  overflow-wrap:anywhere
}
@media(max-width:820px) {
  .page-head {
    display:grid;
    grid-template-columns:1fr
  }
  .theme-grid {
    grid-template-columns:1fr
  }
  .page-head .select {
    width:100%
  }
}
@media(max-width:520px) {
  .site-header .brand {
    font-size:1rem
  }
  .site-header .brand span:last-child {
    white-space:nowrap
  }
  .nav {
    font-size:.86rem
  }
  .section h1 {
    font-size:clamp(1.65rem,7vw,2rem);
    line-height:1.4;
    text-wrap:balance
  }
  .section h2 {
    font-size:1.3rem;
    line-height:1.45
  }
  .admin-table {
    min-width:580px
  }
  .card {
    overflow-wrap:break-word
  }
}
/* v1.5.1 Public Beta RC */
.narrow {
  max-width:620px
}
.honeypot {
  position:absolute!important;
  left:-9999px!important;
  width:1px;
  height:1px;
  overflow:hidden
}
.location-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.editor-toolbar {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 8px
}
.editor-toolbar button {
  border:1px solid var(--line);
  background:var(--color-surface);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:6px 10px;
  cursor:pointer
}
.editor-toolbar button:hover {
  background:#f0f6f4
}
.rich-text p {
  margin:.7em 0
}
.rich-text h3,.rich-text h4,.rich-text h5 {
  margin:1.2em 0 .45em
}
.rich-text blockquote {
  border-left:4px solid var(--line);
  padding:.4em 1em;
  margin:1em 0;
  color:var(--muted);
  background:#fafbfc
}
.rich-text ul,.rich-text ol {
  padding-left:1.5em
}
.rich-spacer {
  height:.35em
}
.compact-area {
  min-height:92px
}
.knowledge-picker[hidden],#source-field[hidden],#category-field[hidden],#manual-field[hidden] {
  display:none!important
}
@media(max-width:620px) {
  .location-grid {
    grid-template-columns:1fr
  }
  .actions .btn,.actions a.btn {
    width:100%
  }
  .editor-toolbar button {
    flex:1 1 auto
  }
  .nav {
    overflow-x:auto;
    max-width:62vw
  }
  .nav a {
    white-space:nowrap
  }
}
.inline-form {
  display:inline-flex;
  margin:0
}
.report-link {
  font-size:.82rem
}
.freshness-overdue {
  background:var(--color-surface)0f0;
  color:#9d2424
}
.freshness-aging {
  background:var(--color-surface)7e8;
  color:#845500
}
.freshness-fresh {
  background:#eef8f0;
  color:#226235
}
.page-hero.compact {
  padding:24px 0
}
.content-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
  gap:28px
}
.accent-green {
  --osh-accent:#2f7d4a
}
.accent-gray {
  --osh-accent:#667085
}
.accent-orange {
  --osh-accent:#b85c12
}
.accent-blue {
  --osh-accent:#3157c8
}
@media(max-width:760px) {
  .content-grid {
    grid-template-columns:1fr
  }
  .stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .filter-bar {
    align-items:stretch
  }
  .filter-bar .field {
    min-width:100%
  }
}
/* v1.5.2 Launch Edition */
.honeypot {
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important
}
.location-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px
}
.action-list {
  display:grid;
  gap:10px
}
.action-list a {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--border,#dfe5ec);
  border-radius:var(--radius-md);
  text-decoration:none
}
.action-list a span {
  font-size:.88rem;
  color:#687586
}
@media(max-width:640px) {
  .location-grid {
    grid-template-columns:1fr
  }
  .action-list a {
    align-items:flex-start;
    flex-direction:column;
    gap:3px
  }
}
.nav-logout {
  margin:0
}
.nav-logout button {
  border:0;
  background:transparent;
  color:#334252;
  padding:0;
  font:inherit;
  cursor:pointer
}
.nav-logout button:hover {
  color:var(--accent);
  text-decoration:underline
}
/* r4 usability refinements */
.editor-tabs {
  display:flex;
  gap:4px;
  margin:0 0 8px;
  border-bottom:1px solid var(--line)
}
.editor-tab {
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:700;
  padding:8px 12px;
  cursor:pointer;
  border-bottom:2px solid transparent
}
.editor-tab.active {
  color:var(--accent);
  border-bottom-color:var(--accent)
}
.editor-preview {
  min-height:180px;
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  padding:14px 16px;
  margin-bottom:0
}
.mypage-primary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}
.mypage-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.mypage-links a {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  color:var(--text);
  font-weight:700
}
.mypage-links a span {
  font-weight:400;
  color:var(--muted);
  font-size:.86rem
}
.mypage-secondary {
  margin-top:12px
}
.mypage-secondary summary {
  cursor:pointer;
  font-weight:700;
  color:var(--muted)
}
@media(max-width:820px) {
  .mypage-primary {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .mypage-links {
    grid-template-columns:1fr
  }
}
@media(max-width:520px) {
  .mypage-primary {
    grid-template-columns:1fr
  }
}
/* r5: simpler, denser shared UI */
.card,.hero-card,.question-card,.answer {
  box-shadow:none
}
.card {
  padding:18px
}
.section {
  padding:26px 0
}
.section h2 {
  margin-bottom:14px
}
.page-head {
  margin-bottom:14px
}
.form-card {
  margin:18px auto;
  padding:22px
}
.stat {
  padding:13px 14px
}
.stat b {
  font-size:1.45rem
}
.mypage-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  margin-bottom:16px
}
.mypage-summary>a,.mypage-summary>span {
  padding:11px 14px;
  border-right:1px solid var(--line);
  color:var(--text);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px
}
.mypage-summary>:last-child {
  border-right:0
}
.mypage-summary small,.mypage-summary a>span {
  color:var(--muted);
  font-size:.86rem
}
.mypage-summary strong {
  font-size:1.25rem
}
.onboarding-card {
  margin:14px 0
}
.onboarding-card .section-head {
  margin-bottom:8px
}
.mypage-section-title {
  margin-top:22px
}
.mypage-links {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}
.mypage-links a {
  display:block;
  padding:11px 12px
}
.mypage-links a span {
  display:block;
  margin-top:2px
}
.mypage-secondary {
  margin-top:10px;
  color:var(--muted);
  font-size:.9rem
}
.mypage-secondary summary {
  cursor:pointer;
  color:var(--accent);
  font-weight:700
}
.mypage-meta {
  margin:8px 0 0;
  line-height:1.8
}
.filter-bar {
  padding:12px
}
.list {
  gap:10px
}
@media(max-width:820px) {
  .mypage-summary {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .mypage-summary>:nth-child(2) {
    border-right:0
  }
  .mypage-summary>:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
  .mypage-links {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:520px) {
  .mypage-summary,.mypage-links {
    grid-template-columns:1fr
  }
  .mypage-summary>a,.mypage-summary>span {
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .mypage-summary>:last-child {
    border-bottom:0
  }
}
/* 1.7.0-beta2 UX / help / expert card */
.help-tip {
  position:relative;
  display:inline-flex;
  vertical-align:middle;
  margin-left:4px
}
.help-button {
  width:22px;
  height:22px;
  border:1px solid #b8c6d3;
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  color:var(--accent);
  font-weight:800;
  line-height:1;
  cursor:pointer
}
.help-button:hover,.help-button:focus {
  background:#edf7f4;
  outline:2px solid rgba(20,108,92,.18)
}
.help-popover {
  display:none;
  position:absolute;
  z-index:60;
  left:28px;
  top:-8px;
  width:min(320px,78vw);
  padding:12px 14px;
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  font-size:.9rem;
  color:var(--text);
  font-weight:400
}
.help-popover.open {
  display:grid;
  gap:5px
}
.help-popover a {
  font-weight:700
}
.help-close {
  position:absolute;
  right:8px;
  top:6px;
  border:0;
  background:transparent;
  font-size:1.2rem;
  cursor:pointer;
  color:var(--muted)
}
.help-popover:focus {
  outline:2px solid rgba(20,108,92,.28)
}
.lead {
  font-size:1.06rem
}
.compact-textarea {
  min-height:100px
}
.help-detail {
  max-width:760px;
  margin:auto
}
.answer-card {
  padding:0;
  overflow:hidden;
  border-left:0
}
.answer-card__accepted {
  padding:12px 18px;
  background:#eef8f0;
  border-bottom:1px solid #cfe6d5;
  color:#226235
}
.answer-expert {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  padding:18px;
  background:#f8fbfa;
  border-bottom:1px solid var(--line)
}
.answer-expert .profile-photo {
  width:72px;
  height:72px;
  border-radius:50%
}
.answer-expert__main {
  min-width:0
}
.answer-expert__name {
  font-size:1.08rem;
  font-weight:800
}
.answer-expert__stats {
  margin-top:7px;
  color:var(--muted);
  font-size:.86rem
}
.answer-body {
  padding:20px 18px
}
.answer-body__title {
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:800;
  margin-bottom:10px
}
.answer-actions {
  padding:14px 18px;
  border-top:1px solid var(--line);
  background:#fcfdfd
}
.answer-comments {
  padding:16px 18px;
  border-top:1px solid var(--line);
  background:#fafcfd
}
.answer-comments h4 {
  margin:0 0 10px
}
.answer-comment {
  padding:10px 0;
  border-top:1px solid var(--line)
}
.answer-comment:first-of-type {
  border-top:0
}
.answer-comment__author {
  font-weight:800
}
.status-solved {
  background:#e8f6ec;
  color:#226235
}
.state-help {
  display:inline-flex;
  align-items:center
}
.plain-callout {
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--color-surface-subtle)
}
.step-list {
  display:grid;
  gap:10px;
  counter-reset:steps
}
.step-item {
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:start
}
.step-item:before {
  counter-increment:steps;
  content:counter(steps);
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:800
}
.expert-profile-hero {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start
}
.expert-profile-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px
}
.expert-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0
}
.expert-metric {
  padding:13px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fbfcfd
}
.expert-metric strong {
  display:block;
  font-size:1.35rem
}
.empty-action {
  text-align:left
}
.empty-action h3 {
  margin-top:0
}
.human-label {
  font-weight:800
}
.technical-details {
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--line)
}
@media(max-width:620px) {
  .help-popover {
    position:fixed;
    left:14px;
    right:14px;
    top:auto;
    bottom:18px;
    width:auto
  }
  .answer-expert {
    grid-template-columns:1fr
  }
  .answer-expert .profile-photo {
    width:64px;
    height:64px
  }
  .answer-actions .btn {
    width:100%
  }
  .expert-profile-hero {
    grid-template-columns:1fr
  }
  .expert-metrics {
    grid-template-columns:1fr
  }
}
.connection-choice-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:18px 0
}
.attention {
  color:#b42318
}
.answer-sources {
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line)
}
.subtle-card {
  margin:12px 0;
  padding:12px
}
.category-experience {
  margin-top:16px
}
@media(max-width:720px) {
  .connection-choice-grid {
    grid-template-columns:1fr
  }
}
/* beta9 dashboard personalization */
.dashboard-custom-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  margin:18px 0
}
.dashboard-card {
  grid-column:span 6
}
.dashboard-card-small {
  grid-column:span 4
}
.dashboard-card-normal {
  grid-column:span 6
}
.dashboard-card-large {
  grid-column:span 12
}
@media(max-width:760px) {
  .dashboard-card,.dashboard-card-small,.dashboard-card-normal,.dashboard-card-large {
    grid-column:1/-1
  }
}
/* beta16 usability redesign: calm, inclusive, ad-ready */
body {
  background:var(--bg);
  letter-spacing:.01em
}
.skip-link {
  position:fixed;
  left:12px;
  top:-80px;
  z-index:100;
  background:var(--color-surface);
  color:var(--accent);
  padding:10px 14px;
  border:2px solid var(--accent);
  border-radius:var(--radius-md);
  font-weight:700
}
.skip-link:focus {
  top:12px
}
.site-header {
  box-shadow:0 1px 0 rgba(36,49,46,.04)
}
.header-inner {
  min-height:72px
}
.brand-mark {
  border-radius:50%;
  font-size:1.05rem
}
.nav a,.nav-logout button {
  font-weight:650
}
.nav-cta {
  background:var(--accent);
  color:#fff;
  padding:8px 14px;
  border-radius:var(--radius-pill)
}
.nav-cta:hover {
  background:var(--accent2);
  text-decoration:none
}
.site-frame {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-height:calc(100vh - 72px)
}
.site-main {
  min-width:0
}
.site-frame:has(.ad-rail) {
  width:min(1440px,100%);
  margin:0 auto;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:24px
}
.ad-rail {
  padding:24px 20px 0 0
}
.ad-rail__inner {
  position:sticky;
  top:96px
}
.ad-rail__label {
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.08em;
  margin:0 0 6px
}
.ad-rail__slot {
  min-height:250px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  overflow:hidden
}
.hero {
  padding:68px 0 52px;
  background:var(--color-brand-050)
}
.hero-grid {
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
  gap:42px
}
.hero-title {
  max-width:17em
}
.hero p {
  max-width:650px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px
}
.text-link {
  font-weight:700
}
.trust-card {
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px)
}
.trust-card h2 {
  font-size:1.25rem;
  margin-top:0
}
.check-list {
  display:grid;
  gap:10px;
  padding:0;
  margin:16px 0;
  list-style:none
}
.check-list li {
  position:relative;
  padding-left:28px
}
.check-list li:before {
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:900
}
.section-soft {
  background:#f0f5f2
}
.section-heading {
  margin-bottom:18px
}
.section-heading .eyebrow {
  margin-bottom:8px
}
.section-heading h2 {
  margin:0
}
.page-intro {
  max-width:760px;
  margin-bottom:22px
}
.page-intro h1 {
  margin:8px 0
}
.page-intro p:last-child {
  margin-bottom:0
}
.search-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:end
}
.search-panel .field {
  margin:0
}
.search-panel .optional-fields {
  grid-column:1/-1
}
.trust-note {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  background:var(--soft);
  border-radius:var(--radius-md);
  color:#315c50
}
.expert-card-grid .category-card {
  display:grid;
  gap:5px
}
.expert-card__name {
  font-size:1.04rem
}
.expert-card__office {
  font-weight:600;
  color:var(--text)
}
.expert-card__meta {
  margin-top:4px
}
.btn-large {
  min-height:48px;
  padding-inline:24px
}
.input,.textarea,.select {
  min-height:46px;
  border-color:var(--color-border-strong)
}
.input:focus,.textarea:focus,.select:focus {
  outline:3px solid rgba(23,107,87,.15);
  border-color:var(--accent)
}
.category-card,.question-card,.card {
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.category-card:hover,.question-card:hover {
  border-color:#b6cbc3;
  box-shadow:0 10px 24px rgba(35,59,51,.06);
  text-decoration:none;
  transform:translateY(-1px)
}
.empty {
  background:var(--color-surface)
}
.site-footer {
  margin-top:48px
}
@media(max-width:1100px) {
  .site-frame:has(.ad-rail) {
    grid-template-columns:minmax(0,1fr) 280px
  }
  .ad-rail {
    padding-right:12px
  }
  .container {
    width:min(100% - 28px,1080px)
  }
}
@media(max-width:900px) {
  .site-frame:has(.ad-rail) {
    display:flex;
    flex-direction:column
  }
  .ad-rail {
    order:2;
    padding:0 14px 24px
  }
  .ad-rail__inner {
    position:static
  }
  .ad-rail__slot {
    min-height:120px
  }
  .hero-grid {
    grid-template-columns:1fr
  }
  .trust-card {
    max-width:none
  }
  .search-panel {
    grid-template-columns:1fr 1fr
  }
  .search-panel .btn {
    grid-column:1/-1
  }
}
@media(max-width:720px) {
  .header-inner {
    min-height:64px
  }
  .brand {
    font-size:1rem
  }
  .nav-cta {
    display:inline-flex!important
  }
  .hero {
    padding:42px 0 36px
  }
  .hero-actions {
    align-items:stretch;
    flex-direction:column
  }
  .hero-actions .btn,.hero-actions .text-link {
    text-align:center
  }
  .search-panel {
    grid-template-columns:1fr
  }
  .search-panel .btn {
    grid-column:auto
  }
  .section {
    padding:22px 0
  }
  .grid {
    grid-template-columns:1fr
  }
  .question-card h2 {
    font-size:1.2rem
  }
  .footer-grid {
    gap:18px
  }
}
@media(max-width:520px) {
  .container {
    width:min(100% - 20px,1080px)
  }
  .nav {
    max-width:none
  }
  .nav a,.nav-logout button {
    font-size:.86rem
  }
  .nav-cta {
    padding:7px 12px
  }
  .hero-title {
    font-size:clamp(1.8rem,9vw,2.2rem)
  }
  .hero-card,.card,.question-card {
    border-radius:var(--radius-md)
  }
  .form-card {
    padding:16px
  }
  .page-intro {
    margin-bottom:16px
  }
}
/* Related service navigation */
.nav a.is-current {
  background:var(--soft);
  color:var(--accent);
  padding:8px 12px;
  border-radius:var(--radius-pill)
}
.nav {
  flex-wrap:wrap;
  justify-content:flex-end
}
@media(max-width:720px) {
  .nav a.is-current {
    display:inline-flex!important
  }
}
/* Compact responsive navigation without order-dependent selectors. */
@media(max-width:720px) {
  .header-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding:10px 0
  }
  .nav {
    width:100%;
    max-width:100%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:10px;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:thin
  }
  .nav a,.nav-logout,.nav-logout button {
    display:inline-flex!important;
    flex:0 0 auto;
    white-space:nowrap
  }
}
.watowa-cta {
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border-color:#b9ded5;
  background:#f2faf7
}
.watowa-cta h2 {
  margin:8px 0 6px;
  font-size:1.25rem
}
.watowa-cta p {
  margin:0;
  color:var(--muted);
  max-width:42rem
}
.watowa-cta__button {
  flex:0 0 auto;
  text-align:center
}
@media(max-width:720px) {
  .watowa-cta {
    display:grid
  }
  .watowa-cta__button {
    width:100%
  }
}
/* beta22: official FAQ summary and related navigation */
.official-guide {
  margin:0 0 24px;
  padding:22px;
  border:1px solid #cfe0ef;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#f7fbff,#eef7ff)
}
.official-guide__eyebrow {
  margin:0 0 8px;
  color:#315f83;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em
}
.official-guide h2 {
  margin:0 0 16px;
  font-size:1.12rem;
  line-height:1.65
}
.official-guide__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.official-guide__grid>div {
  padding:14px;
  border-radius:var(--radius-md);
  background:var(--color-surface)
}
.official-guide__grid h3 {
  margin:0 0 8px;
  font-size:.96rem
}
.official-guide__grid p,.official-guide__grid ul {
  margin:0
}
.official-guide__grid ul {
  padding-left:1.2em
}
.related-faqs {
  margin-top:18px
}
.related-faqs h2 {
  margin-top:0
}
.related-faqs__list {
  display:grid;
  gap:10px;
  margin-top:14px
}
.related-faqs__list a {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:14px 16px;
  border:1px solid #dce5ec;
  border-radius:var(--radius-md);
  background:var(--color-surface);
  text-decoration:none
}
.related-faqs__list a:hover {
  background:#f7fbff
}
.related-faqs__list strong {
  white-space:nowrap;
  color:#235b83
}
@media(max-width:700px) {
  .official-guide {
    padding:16px
  }
  .official-guide__grid {
    grid-template-columns:1fr
  }
  .related-faqs__list a {
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }
}
/* beta promotion: service-level repeat-use guidance */
.beta-usage-guide {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  border:1px solid #dce5ec;
  border-radius:var(--radius-lg);
  background:#f7fbff
}
.beta-usage-guide h2 {
  margin:0 0 8px
}
.beta-usage-guide p {
  margin:0;
  max-width:700px
}
.beta-usage-guide__actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto
}
@media(max-width:760px) {
  .beta-usage-guide {
    align-items:flex-start;
    flex-direction:column
  }
  .beta-usage-guide__actions,.beta-usage-guide__actions .btn {
    width:100%
  }
}
.repeat-use-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--color-surface)
}
.repeat-use-panel h2 {
  margin:0 0 8px
}
.repeat-use-panel p {
  margin:0;
  max-width:760px
}
.repeat-use-panel__actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0
}
@media(max-width:760px) {
  .repeat-use-panel {
    align-items:flex-start;
    flex-direction:column
  }
  .repeat-use-panel__actions {
    width:100%
  }
  .repeat-use-panel__actions .btn {
    width:100%
  }
}

/* beta26: direct rich-text editing and concise related content */
.rich-editor{min-height:180px;width:100%;padding:12px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);outline:0;overflow-wrap:anywhere}
.rich-editor:focus{border-color:var(--color-brand-600);box-shadow:var(--focus-ring)}
.rich-editor:empty:before{content:attr(data-placeholder);color:var(--color-text-muted);pointer-events:none}
.editor-toolbar{position:sticky;top:76px;z-index:5;padding:8px;background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:8px}
.editor-toolbar button{min-height:40px;font-weight:700}
.rich-text .rich-red,.rich-red{color:#b42318}
.optional-fields{margin:18px 0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-subtle)}
.optional-fields summary{padding:14px 16px;cursor:pointer;font-weight:700}
.optional-fields__body{padding:0 16px 4px}
.related-content{margin-top:22px}
.related-content__list{display:grid;gap:10px}
.related-content__item{display:block;padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}
.related-content__item:hover{border-color:var(--color-border-strong);text-decoration:none}
.related-content__item strong{display:block;margin-bottom:4px}
@media(max-width:620px){.editor-toolbar{top:0;position:relative}.editor-toolbar button{flex:1 1 30%}.rich-editor{min-height:220px}}

/* 1.8.0 beta1: repeat-use and manual plan management */
.recent-content-link{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-weight:700}.recent-content-link:last-child{border-bottom:0}.plan-status{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.admin-plan-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:10px;align-items:end}@media(max-width:900px){.admin-plan-form{grid-template-columns:1fr 1fr}}@media(max-width:520px){.admin-plan-form{grid-template-columns:1fr}}

.recent-updated{margin-left:8px;vertical-align:middle}

/* 1.8.0-beta2 analytics / advertising */
.ad-card{border-color:var(--color-border);background:var(--color-surface)}
.ad-card__label{margin:0 0 8px;font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.08em;color:var(--color-text-muted)}
.ad-card h3{margin-top:0}

/* Phase19D Blog */
.blog-filter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end;margin:20px 0}.blog-filter label{display:grid;gap:6px;font-weight:700;min-width:0}.blog-filter select{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.blog-card-grid{align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));max-width:100%}.blog-card{display:block;min-width:0;max-width:100%;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}.blog-card h2{font-size:1.08rem;margin:.3rem 0;overflow-wrap:anywhere}.blog-card a,.blog-card p{max-width:100%;overflow-wrap:anywhere;word-break:break-word}.blog-badge{display:inline-block;margin:0 0 6px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:800}.blog-rich{max-width:820px;margin:24px 0;overflow-wrap:anywhere}.blog-rich img{max-width:100%;height:auto}.blog-rich table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}.blog-rich th,.blog-rich td{border:1px solid var(--line);padding:8px}.blog-rich blockquote{margin:1rem 0;padding:.8rem 1rem;border-left:4px solid var(--line);background:var(--color-surface)}.pager{display:flex;gap:12px;margin-top:24px}@media(max-width:900px){.blog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.blog-filter{grid-template-columns:1fr}.blog-card-grid{grid-template-columns:1fr}.blog-rich{font-size:1rem}}

/* Phase19D RC3: standard Blog presentation. Custom presentation remains an allow-listed renderer concern for Phase19E+. */
.blog-detail-page{padding-top:22px}.blog-detail{max-width:980px}.blog-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px;font-size:.9rem;color:var(--muted)}
.blog-hero{padding:clamp(24px,4vw,48px);border:1px solid var(--color-border);border-radius:24px;background:linear-gradient(135deg,var(--color-brand-050),var(--color-surface));box-shadow:var(--shadow-sm)}
.blog-hero__eyebrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.9rem}.blog-hero h1{max-width:24em;margin:14px 0 16px;font-size:clamp(2rem,5vw,3.1rem);line-height:1.35;color:var(--color-text)}
.blog-hero__lead{max-width:52em;margin:0;color:var(--color-text-muted);font-size:1.08rem;line-height:1.8}.blog-hero__author{margin:18px 0 0;color:var(--color-brand-700)}.blog-kind-notice{margin:18px 0 0}
.blog-rich--standard{max-width:820px;margin:42px auto;font-size:1.04rem;line-height:1.95;color:var(--color-text)}.blog-rich--standard>p:first-child{font-size:1.08rem}.blog-rich--standard h2,.blog-rich--standard h3,.blog-rich--standard h4{color:var(--color-text);font-weight:800;line-height:1.5}.blog-rich--standard h2{margin:2.8rem 0 1.1rem;padding:0 0 .55rem;border-bottom:2px solid var(--color-brand-100);font-size:1.65rem}.blog-rich--standard h3{margin:2rem 0 .85rem;padding-left:.75rem;border-left:4px solid var(--color-brand-600);font-size:1.3rem}.blog-rich--standard h4{margin:1.6rem 0 .7rem;font-size:1.12rem}.blog-rich--standard p{margin:0 0 1.15rem}.blog-rich--standard ul,.blog-rich--standard ol{margin:1rem 0 1.5rem;padding-left:1.6rem}.blog-rich--standard li{margin:.45rem 0}.blog-rich--standard a{text-decoration:underline;text-underline-offset:3px}.blog-rich--standard img{display:block;margin:1.4rem auto;border-radius:12px}.blog-rich--standard blockquote{border-left-color:var(--color-brand-600);border-radius:0 10px 10px 0}.blog-rich--standard hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.blog-section{margin:48px 0;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--color-surface);box-shadow:var(--shadow-sm)}.blog-section__heading{margin-bottom:22px}.blog-section__heading h2{margin:2px 0 8px}.blog-section__heading p:last-child{margin:0;color:var(--muted)}.blog-section__kicker{margin:0!important;color:var(--color-brand-700)!important;font-size:.78rem!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.blog-author-card{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,1.8fr);gap:28px;align-items:start}.blog-author-card__identity{padding:22px;border-radius:16px;background:var(--color-brand-050)}.blog-author-card__identity h3{margin:8px 0 0;font-size:1.35rem}.blog-author-card__type{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-border);font-size:.78rem;font-weight:800}.blog-author-card__body p{line-height:1.8}.blog-author-card__feature{font-weight:700}.blog-author-card__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.blog-related-block+.blog-related-block{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}.blog-related-block h3{margin:0 0 14px}.blog-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.blog-related-card{display:flex;min-width:0;flex-direction:column;gap:7px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--color-surface-subtle);color:var(--text);text-decoration:none}.blog-related-card:hover{border-color:var(--color-brand-600);background:var(--color-brand-050);text-decoration:none}.blog-related-card strong{font-size:1.03rem;line-height:1.55}.blog-related-card>span:last-child{font-size:.88rem;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.blog-related-card__label{align-self:flex-start;padding:3px 8px;border-radius:999px;background:var(--color-surface);border:1px solid var(--line);color:var(--color-brand-700)!important;font-size:.75rem!important;font-weight:800}.blog-expert-links{display:grid;gap:10px}.blog-expert-links a{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;text-decoration:none}.blog-expert-links span{color:var(--muted);font-size:.88rem}.blog-source-link{margin:40px 0 10px;text-align:right;font-size:.9rem}
@media(max-width:760px){.blog-hero{padding:24px 20px;border-radius:18px}.blog-hero h1{font-size:clamp(1.7rem,8vw,2.35rem)}.blog-rich--standard{margin:30px 0;font-size:1rem}.blog-section{margin:34px 0;padding:20px}.blog-author-card{grid-template-columns:1fr;gap:16px}.blog-related-grid{grid-template-columns:1fr}.blog-expert-links a{flex-direction:column;gap:4px}.blog-source-link{text-align:left}}


/* Phase19D RC4: one visual system. Legacy article presentation is normalized before entering this shell. */
.blog-detail-page{background:var(--color-surface-subtle);padding:28px 0 54px}.blog-detail{max-width:1040px}
.blog-hero{padding:clamp(28px,5vw,54px);border:1px solid var(--line);border-top:6px solid var(--color-brand-700);border-radius:18px;background:var(--color-surface);box-shadow:none}
.blog-hero h1{max-width:22em;margin:16px 0 18px;font-size:clamp(2rem,4.5vw,3rem);line-height:1.38}.blog-hero__lead{max-width:48em;font-size:1.05rem;line-height:1.9}.blog-kind-notice{margin:18px 0 22px}
.blog-article-shell{max-width:900px;margin:0 auto;padding:clamp(24px,4vw,48px);border:1px solid var(--line);border-radius:18px;background:var(--color-surface)}
.blog-rich--standard{max-width:none;margin:0;font-size:1.02rem;line-height:1.95;color:var(--color-text)}
.blog-rich--standard :where(div,span,p,li,strong,b,em,i,u,h2,h3,h4,h5,h6,blockquote,figcaption){background:transparent!important;color:var(--color-text)!important;text-shadow:none!important;box-shadow:none!important}
.blog-rich--standard a{color:var(--color-brand-700)!important;background:transparent!important}.blog-rich--standard>br:first-child{display:none}.blog-rich--standard h2:first-child,.blog-rich--standard h3:first-child{margin-top:.4rem}
.blog-rich--standard h2{margin:2.7rem 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--color-brand-100);font-size:1.55rem}.blog-rich--standard h3{margin:2rem 0 .85rem;padding-left:.8rem;border-left:4px solid var(--color-brand-600);font-size:1.25rem}.blog-rich--standard h4{margin:1.6rem 0 .7rem;font-size:1.1rem}
.blog-rich--standard p{margin:0 0 1.2rem}.blog-rich--standard ul,.blog-rich--standard ol{margin:1rem 0 1.5rem}.blog-rich--standard blockquote{margin:1.4rem 0;padding:1rem 1.2rem;background:var(--color-brand-050)!important;border-left:4px solid var(--color-brand-600)}
.blog-rich--standard table{margin:1.4rem 0;background:var(--color-surface)!important}.blog-rich--standard th{background:var(--color-surface-subtle)!important}.blog-rich--standard img{max-width:100%;height:auto}
.blog-section{max-width:900px;margin:34px auto;padding:clamp(24px,4vw,36px);border:1px solid var(--line);border-radius:18px;background:var(--color-surface);box-shadow:none}.blog-section__heading{margin-bottom:24px}
.blog-author-card{grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);gap:30px}.blog-author-card__identity{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border-radius:14px;background:var(--color-brand-050)}
.blog-author-card__image{width:96px;height:96px;object-fit:cover;border-radius:50%;margin-bottom:16px;border:3px solid var(--color-surface)}.blog-author-card__monogram{display:grid;place-items:center;width:72px;height:72px;margin-bottom:16px;border-radius:50%;background:var(--color-brand-700);color:#fff;font-size:2rem;font-weight:800}
.blog-author-card__body{min-width:0}.blog-author-card__body>p:first-child{margin-top:0}.blog-author-card__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.blog-author-card__tags span{padding:5px 9px;border-radius:999px;background:var(--color-surface-subtle);border:1px solid var(--line);font-size:.82rem}
.blog-author-card__references{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.blog-author-card__references a{font-size:.9rem}.blog-related-hub{margin-top:34px}.blog-related-empty{margin:0 0 22px;padding:14px 16px;border-radius:12px;background:var(--color-surface-subtle);color:var(--muted);line-height:1.7}
.blog-related-card{background:var(--color-surface);box-shadow:none}.blog-related-card:hover{transform:none}.blog-source-link{max-width:900px;margin:24px auto 0}
@media(max-width:760px){.blog-detail-page{padding-top:16px}.blog-hero{padding:24px 20px;border-radius:14px}.blog-article-shell{padding:22px 18px;border-radius:14px}.blog-section{padding:22px 18px;border-radius:14px}.blog-author-card{grid-template-columns:1fr}.blog-author-card__identity{padding:20px}.blog-related-grid{grid-template-columns:1fr}.blog-source-link{padding:0 4px}}

/* Phase19D RC5: preserve semantic article structures while keeping all legacy styling inert. */
.blog-rich--standard div{max-width:100%;box-sizing:border-box}.blog-rich--standard>div{margin:1.25rem 0}.blog-rich--standard span{color:inherit!important;background:transparent!important}
.blog-rich--standard a.blog-inline-link{color:var(--color-brand-700)!important;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--color-brand-600) 55%,transparent)}
.blog-rich--standard a.blog-inline-link:hover{color:var(--color-brand-800)!important;text-decoration-color:currentColor;background:var(--color-brand-050)!important;border-radius:4px}
.blog-rich--standard .blog-link-group{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:1.35rem 0;padding:0;background:transparent!important}
.blog-rich--standard a.blog-link-chip{display:inline-flex;align-items:center;min-height:42px;padding:9px 14px;border:1px solid var(--color-brand-300);border-radius:999px;background:var(--color-surface)!important;color:var(--color-brand-800)!important;font-weight:800;text-decoration:none;line-height:1.45}
.blog-rich--standard a.blog-link-chip:hover{border-color:var(--color-brand-700);background:var(--color-brand-050)!important;text-decoration:none}
.blog-rich--standard .blog-figure-panel{margin:2rem 0;border:1px solid var(--line);border-radius:16px;background:var(--color-surface)!important;overflow:hidden}
.blog-rich--standard .blog-figure-panel__title{display:block;margin:0!important;padding:15px 18px!important;border:0!important;background:var(--color-ink)!important;color:#fff!important;font-size:1rem!important;font-weight:800;line-height:1.5}
.blog-rich--standard .blog-figure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0!important;padding:18px!important;background:var(--color-surface)!important}
.blog-rich--standard .blog-figure-card{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;min-height:130px;margin:0!important;padding:16px!important;border:1px solid var(--line);border-radius:12px;background:var(--color-surface)!important;color:var(--color-text)!important;overflow-wrap:anywhere}
.blog-rich--standard .blog-figure-card>*{margin-top:.35rem;margin-bottom:.35rem}.blog-rich--standard .blog-figure-card>p:first-child,.blog-rich--standard .blog-figure-card>div:first-child{margin-top:0}
.blog-rich--standard br+br{line-height:1.2}
@media(max-width:760px){.blog-rich--standard .blog-figure-grid{grid-template-columns:1fr;padding:14px!important}.blog-rich--standard .blog-figure-card{min-height:auto}.blog-rich--standard .blog-link-group{align-items:stretch}.blog-rich--standard a.blog-link-chip{width:100%;justify-content:center;text-align:center}}

/* Phase19D RC6 — Legacy Scoped Renderer. Preserve article-authored visual hierarchy; contain it to the article. */
.blog-rich--legacy{max-width:none;margin:0;min-width:0;max-inline-size:100%;isolation:isolate;overflow-wrap:anywhere;word-break:normal;color:inherit}
.blog-rich--legacy,.blog-rich--legacy *{box-sizing:border-box}
.blog-rich--legacy img,.blog-rich--legacy svg,.blog-rich--legacy video{max-width:100%;height:auto}
.blog-rich--legacy table{max-width:100%}
.blog-rich--legacy :where(pre,code){max-width:100%;overflow-x:auto}
.blog-rich--legacy a{overflow-wrap:anywhere}
.blog-rich--legacy input[disabled]{pointer-events:none}
@media(max-width:760px){.blog-rich--legacy{max-width:100%}.blog-rich--legacy table{display:block;overflow-x:auto}.blog-rich--legacy [style*="position:sticky"],.blog-rich--legacy [style*="position: sticky"]{position:static!important;top:auto!important}}

/* Phase19D RC7 — Existing HANAWA article renderer is isolated in a same-origin frame. */
.blog-detail-page{background:var(--color-surface-subtle);padding:24px 0 54px}
.blog-detail{max-width:1240px}
.blog-kind-notice{max-width:1180px;margin:18px auto 22px}
.blog-legacy-frame-wrap{width:100%;max-width:1180px;margin:0 auto;overflow:hidden;border:0;border-radius:0;background:transparent}
.blog-legacy-frame{display:block;width:100%;height:720px;min-height:480px;border:0;background:transparent}
.blog-author-section,.blog-related-hub,.blog-source-link{position:relative;z-index:1}
@media(max-width:760px){.blog-detail-page{padding-top:14px}.blog-kind-notice{margin:12px 0 16px}.blog-legacy-frame{min-height:420px}}

/* Phase19E RC3: Blog source editor must match rich editor width. */
.expert-blog-source{display:block;width:100%;max-width:none;min-height:500px;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.cke{max-width:100%!important;width:100%!important;box-sizing:border-box}