/* ==========================================================================
   告示相談デスク  styles.css
   方向：信頼の青緑〜ニュートラル＋アクセント1色。
   上品な階層・洗練カード・やわらかい影・控えめなグラデ。役所/事業者が安心する質感。
   外部CDN/フォント不使用。日本語システムフォントスタック。
   ========================================================================== */

:root{
  /* ── 基調：白とごく淡いニュートラル ── */
  --bg:        #f6f8fa;
  --bg-soft:   #eef2f5;
  --surface:   #ffffff;
  --surface-2: #fbfcfd;
  --line:      #e2e8ec;
  --line-soft: #edf1f4;

  /* ── テキスト ── */
  --ink:       #16242c;
  --ink-2:     #41525b;
  --ink-3:     #6a7a83;
  --ink-4:     #93a1a8;

  /* ── アクセント：信頼の青緑（ティール） ── */
  --accent:        #0d8a8f;
  --accent-deep:   #0a6e72;
  --accent-press:  #095d61;
  --accent-soft:   #e3f3f3;
  --accent-tint:   #f0f8f8;
  --link:          #0a6e72;

  /* ── 補助：落ち着いた紺（見出し・ブランドの奥行き用） ── */
  --navy:      #1d3a47;
  --navy-soft: #eaf1f4;

  /* ── ステータス（相談カード） ── */
  --pending-bg:#fff5e0; --pending-fg:#9a6b00; --pending-line:#f3dca6;
  --draft-bg:  #e6f4ea; --draft-fg:  #1d7a3e; --draft-line:#bfe2c9;
  --pub-bg:    #e3f0f7; --pub-fg:    #14618c; --pub-line:#bcdcee;

  /* ── 判定バッジ（○△✕ℹ️）── */
  --ok-bg:   #e7f5ec;  --ok-fg:   #1c7a3c;  --ok-line:#c2e4cd;
  --gray-bg: #fdf3da;  --gray-fg: #8a5a00;  --gray-line:#f0dca8;
  --ng-bg:   #fbe8e6;  --ng-fg:   #b3261e;  --ng-line:#f1c8c4;
  --info-bg: #eaeff2;  --info-fg: #41525b;  --info-line:#d7e0e5;

  --radius:    20px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --maxw:      820px;

  /* やわらかく多層な影（奥行き） */
  --shadow-sm: 0 1px 2px rgba(16,40,48,.05);
  --shadow:    0 1px 2px rgba(16,40,48,.05), 0 10px 30px rgba(16,40,48,.06);
  --shadow-lg: 0 2px 6px rgba(16,40,48,.06), 0 22px 50px rgba(16,40,48,.10);
  --shadow-accent: 0 6px 18px rgba(13,138,143,.22);

  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.72;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

[hidden]{ display:none !important; }

/* スキップリンク */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:200;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ==========================================================================
   ボタン・入力共通
   ========================================================================== */
.btn{
  -webkit-appearance:none; appearance:none;
  font:inherit; font-weight:600; letter-spacing:.02em;
  border:1px solid transparent; border-radius:980px;
  padding:13px 26px; min-height:46px;
  cursor:pointer; transition:transform .12s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{ transform:translateY(1px); }
.btn-block{ width:100%; }

.btn-primary{
  color:#fff;
  background:linear-gradient(180deg, #11999e 0%, var(--accent) 55%, var(--accent-deep) 100%);
  box-shadow:var(--shadow-accent);
}
.btn-primary:hover{ background:linear-gradient(180deg, #14a7ac 0%, #0e9498 55%, var(--accent-deep) 100%); }
.btn-primary:disabled{ opacity:.6; cursor:default; box-shadow:none; }

.btn-ghost{
  color:var(--accent-deep); background:var(--surface);
  border-color:var(--line);
}
.btn-ghost:hover{ background:var(--accent-tint); border-color:var(--accent-soft); }

.btn-soft{
  color:var(--accent-deep); background:var(--accent-tint);
  border-color:var(--accent-soft); padding:9px 18px; min-height:40px; font-size:14.5px;
}
.btn-soft:hover{ background:var(--accent-soft); }

.text-link{
  font:inherit; color:var(--link); background:none; border:none; padding:0 2px;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.text-link:hover{ color:var(--accent-press); }

.text-input, textarea.text-input{
  width:100%; font:inherit; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:14px; padding:14px 16px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.text-input::placeholder{ color:var(--ink-4); }
.text-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
  background:#fff;
}
.text-input.is-invalid{ border-color:var(--ng-fg); box-shadow:0 0 0 4px var(--ng-bg); }

textarea.text-input{ resize:vertical; line-height:1.7; min-height:150px; }

.field{ text-align:left; margin-bottom:6px; }
.field-label{ display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:9px; }

/* ==========================================================================
   ① ログイン画面
   ========================================================================== */
.login-wrap{
  min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(13,138,143,.10), transparent 60%),
    radial-gradient(120% 90% at 100% 8%, rgba(29,58,71,.08), transparent 55%),
    var(--bg);
}
.login-card{
  width:100%; max-width:420px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  padding:44px 34px 36px;
  text-align:center;
}
.brand-small{
  margin:0 0 18px; font-size:12.5px; font-weight:600; letter-spacing:.14em;
  color:var(--accent-deep); text-transform:none;
}
.login-title{
  margin:0 0 12px; font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--navy);
}
.login-lead{ margin:0 0 30px; color:var(--ink-3); font-size:15px; line-height:1.65; }
#login-form{ text-align:left; }
.error-text{
  margin:10px 2px 0; color:var(--ng-fg); font-size:13.5px; font-weight:600;
}
#login-btn{ margin-top:20px; }
.login-note{ margin:24px 0 0; font-size:12.5px; color:var(--ink-4); }

.footer-login{ margin-top:26px; text-align:center; color:var(--ink-4); font-size:12px; }
.footer-login p{ margin:3px 0; }

/* ==========================================================================
   共通ヘッダー
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:14px;
  padding:11px 20px;
}
.logo{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;
}
.logo-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px; color:#fff;
  background:linear-gradient(150deg, #16a7ac, var(--accent-deep));
  box-shadow:var(--shadow-accent);
}
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo-brand{ font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--ink-3); }
.logo-service{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--navy); }

.header-tabs{ display:flex; gap:4px; margin-left:auto; background:var(--bg-soft); padding:4px; border-radius:980px; }
.header-tab{
  font:inherit; font-size:14px; font-weight:600;
  border:none; background:transparent; color:var(--ink-3);
  padding:8px 16px; min-height:38px; border-radius:980px; cursor:pointer;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.header-tab:hover{ color:var(--ink); }
.header-tab.is-active{ background:var(--surface); color:var(--accent-deep); box-shadow:var(--shadow-sm); }

.icon-btn{
  flex-shrink:0;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:16px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .16s ease, border-color .16s ease;
}
.icon-btn:hover{ background:var(--accent-tint); border-color:var(--accent-soft); color:var(--accent-deep); }

/* ==========================================================================
   レイアウト
   ========================================================================== */
.content{ max-width:var(--maxw); margin:0 auto; padding:0 20px; outline:none; }
.page{ padding:30px 0 56px; }

.page-h1{
  margin:6px 0 8px; font-size:27px; font-weight:700; letter-spacing:-.02em; color:var(--navy);
}
.page-sub{ margin:0 0 22px; color:var(--ink-3); font-size:15px; }

.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--accent-deep);
  background:none; border:none; cursor:pointer; padding:8px 4px; margin:8px 0 6px;
  min-height:40px;
}
.back-link:hover{ color:var(--accent-press); }

.hr{ border:none; border-top:1px solid var(--line); margin:20px 0; }

/* ==========================================================================
   ② ヒーロー（相談デスクのトップ）
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  border-radius:24px;
  margin:24px 0 26px;
  padding:38px 32px 34px;
  color:#eaf6f6;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(155deg, #15535c 0%, #0e7479 50%, #0a6e72 100%);
  box-shadow:var(--shadow-lg);
}
.hero::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  pointer-events:none;
}
.hero-eyebrow{
  margin:0 0 12px; display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.08em;
  color:#bfe7e8; background:rgba(255,255,255,.12); padding:6px 14px; border-radius:980px;
}
.hero h1{
  margin:0 0 12px; font-size:30px; font-weight:700; letter-spacing:-.02em; color:#fff; line-height:1.32;
}
.hero-lead{ margin:0; max-width:54ch; font-size:15.5px; line-height:1.7; color:#d4ecec; position:relative; }

@media (max-width:560px){
  .hero{ padding:30px 22px 28px; }
  .hero h1{ font-size:24px; }
}

/* ── 相談フォーム（主役カード）── */
.ask-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 26px 24px;
  margin-bottom:34px;
}
.ask-card h2{
  margin:0 0 4px; font-size:19px; font-weight:700; color:var(--navy); letter-spacing:-.01em;
}
.ask-card .ask-help{ margin:0 0 16px; font-size:13.5px; color:var(--ink-3); }

.pii-note{
  display:flex; align-items:flex-start; gap:9px;
  margin:11px 0 0; padding:11px 14px;
  background:#fff8ed; border:1px solid #f3e2bf; border-radius:12px;
  font-size:13px; color:#8a6300; line-height:1.55;
}
.pii-i{
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:#e9a200; color:#fff; font-size:11px; font-weight:700; font-style:normal;
  display:inline-flex; align-items:center; justify-content:center; margin-top:1px;
}

.ask-meta-row{ margin-top:16px; }
.ask-meta-row .text-input{ max-width:340px; }

.ask-actions{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:20px; flex-wrap:wrap;
}
.ask-actions .ask-counter{ font-size:12.5px; color:var(--ink-4); }
.ask-actions .ask-counter.is-over{ color:var(--ng-fg); font-weight:600; }
.ask-sent-msg{
  margin-top:14px; padding:13px 16px; border-radius:12px;
  background:var(--draft-bg); border:1px solid var(--draft-line); color:var(--draft-fg);
  font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:9px;
}

/* ==========================================================================
   相談一覧（フィード）
   ========================================================================== */
.feed-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:6px 0 16px; flex-wrap:wrap;
}
.feed-head h2{ margin:0; font-size:20px; font-weight:700; color:var(--navy); letter-spacing:-.01em; }
.feed-head .feed-count{ font-size:13.5px; color:var(--ink-3); }

.card-list{ display:flex; flex-direction:column; gap:16px; }

/* 相談カード */
.ticket{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.ticket:hover{ box-shadow:var(--shadow); border-color:var(--line); }
.ticket.is-open{ box-shadow:var(--shadow); border-color:var(--accent-soft); }

.ticket-head{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font:inherit; color:inherit;
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 20px; min-height:44px;
}
.ticket-head:hover{ background:var(--surface-2); }
.ticket-head-main{ flex:1; min-width:0; }
.ticket-q-excerpt{
  margin:0; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ticket.is-open .ticket-q-excerpt{ -webkit-line-clamp:unset; }
.ticket-sub{
  margin:7px 0 0; font-size:12.5px; color:var(--ink-4);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.ticket-submitter{ color:var(--ink-3); font-weight:600; }
.ticket-chevron{
  flex-shrink:0; color:var(--ink-4); transition:transform .2s ease; margin-top:3px;
}
.ticket.is-open .ticket-chevron{ transform:rotate(180deg); }

/* ステータスバッジ */
.status-badge{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  padding:6px 12px; border-radius:980px; border:1px solid transparent; white-space:nowrap;
}
.status-badge .dot{ width:7px; height:7px; border-radius:50%; }
.status-badge--pending{ background:var(--pending-bg); color:var(--pending-fg); border-color:var(--pending-line); }
.status-badge--pending .dot{ background:#e9a200; }
.status-badge--drafted{ background:var(--draft-bg); color:var(--draft-fg); border-color:var(--draft-line); }
.status-badge--drafted .dot{ background:#26a35a; }
.status-badge--published{ background:var(--pub-bg); color:var(--pub-fg); border-color:var(--pub-line); }
.status-badge--published .dot{ background:#1c84c0; }

/* 展開ボディ */
.ticket-body{
  border-top:1px solid var(--line-soft);
  padding:20px 20px 22px;
  background:var(--surface-2);
}
.ticket-block + .ticket-block{ margin-top:20px; }
.block-label{
  display:flex; align-items:center; gap:8px;
  margin:0 0 9px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ink-3);
  text-transform:none;
}
.block-label::before{ content:""; width:3px; height:14px; border-radius:2px; background:var(--accent); }

.q-text{
  margin:0; white-space:pre-wrap; font-size:15px; line-height:1.78; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px;
}

/* 回答エリア */
.answer-wrap{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
  padding:18px 18px 16px;
}
.answer-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; padding:5px 11px; border-radius:980px; margin-bottom:13px;
}
.answer-tag--draft{ background:var(--draft-bg); color:var(--draft-fg); border:1px solid var(--draft-line); }
.answer-tag--pub{ background:var(--pub-bg); color:var(--pub-fg); border:1px solid var(--pub-line); }

/* 軽量マークダウン描画 */
.md{ color:var(--ink); font-size:15.5px; line-height:1.82; }
.md > *:first-child{ margin-top:0; }
.md > *:last-child{ margin-bottom:0; }
.md h3{ font-size:16px; font-weight:700; color:var(--navy); margin:18px 0 8px; }
.md h4{ font-size:14.5px; font-weight:700; color:var(--ink); margin:15px 0 6px; }
.md p{ margin:0 0 12px; }
.md ul, .md ol{ margin:0 0 12px; padding-left:1.4em; }
.md li{ margin:3px 0; }
.md strong{ font-weight:700; color:var(--navy); }
.md .md-num{ font-weight:700; color:var(--accent-deep); }

.answer-pending{
  display:flex; align-items:center; gap:12px;
  padding:18px; border-radius:14px;
  background:var(--pending-bg); border:1px solid var(--pending-line); color:var(--pending-fg);
  font-size:14.5px; font-weight:600;
}
.answer-pending .spinner-dot{
  width:9px; height:9px; border-radius:50%; background:#e9a200; flex-shrink:0;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.85);} 50%{ opacity:1; transform:scale(1);} }

.answer-actions{
  display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap;
}
.copy-btn{
  display:inline-flex; align-items:center; gap:7px;
}
.copy-btn svg{ width:15px; height:15px; }

/* ==========================================================================
   詳細（パーマリンク 単票）
   ========================================================================== */
.detail-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:30px 30px 28px;
}
.detail-card .detail-head-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.detail-meta{ font-size:12.5px; color:var(--ink-4); }
.detail-card h1{ margin:0 0 6px; font-size:16px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; }
.detail-card .q-text{ font-size:16px; }
.detail-section{ margin-top:24px; }
.permalink-note{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-4);
}

@media (max-width:560px){
  .detail-card{ padding:22px 20px 22px; }
}

/* ==========================================================================
   空状態（マイクロインタラクション）
   ========================================================================== */
.empty-state{
  text-align:center; padding:46px 24px;
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius-md);
}
.empty-state .empty-art{
  width:64px; height:64px; margin:0 auto 18px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--accent-soft), var(--navy-soft));
  color:var(--accent-deep);
}
.empty-state .empty-art svg{ width:32px; height:32px; }
.empty-state h3{ margin:0 0 8px; font-size:17px; font-weight:700; color:var(--navy); }
.empty-state p{ margin:0; font-size:14px; color:var(--ink-3); }

/* ==========================================================================
   告示クイック検索（副タブ）
   ========================================================================== */
.search-pane .search-intro{
  display:flex; align-items:flex-start; gap:11px;
  margin:6px 0 20px; padding:13px 16px;
  background:var(--navy-soft); border:1px solid #dbe7ec; border-radius:14px;
  font-size:13.5px; color:var(--ink-2);
}
.search-pane .search-intro svg{ flex-shrink:0; width:18px; height:18px; color:var(--accent-deep); margin-top:1px; }

.search-block{ margin-bottom:8px; }
.search-row{ display:flex; gap:10px; }
.search-row .text-input{ flex:1; }
.search-row .btn{ flex-shrink:0; }
.cat-select-wrap{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.cat-select-wrap label{ font-size:13px; font-weight:600; color:var(--ink-2); }
.cat-select{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; min-height:44px; max-width:340px;
}
.cat-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }

.examples{ margin:24px 0 28px; }
.examples h3{ font-size:14px; font-weight:700; color:var(--ink-2); margin:0 0 12px; }
.chip-list{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font:inherit; font-size:13.5px; color:var(--accent-deep);
  background:var(--accent-tint); border:1px solid var(--accent-soft);
  border-radius:980px; padding:9px 15px; min-height:40px; cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.chip:hover{ background:var(--accent-soft); }
.chip:active{ transform:translateY(1px); }

.cat-section h3{ font-size:16px; font-weight:700; color:var(--navy); margin:6px 0 16px; }
.tile-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tile{
  text-align:left; font:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  padding:16px 16px; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--accent-soft); }
.tile-label{ font-size:15px; font-weight:600; color:var(--ink); }
.tile-count{ font-size:12.5px; color:var(--ink-4); }
.tile-count b{ color:var(--accent-deep); }

/* 検索結果カード */
.result-head{ margin-top:6px; }
.result-query{ margin:18px 0 4px; font-size:18px; font-weight:700; color:var(--navy); }
.result-count{ margin:0 0 4px; font-size:13.5px; color:var(--ink-3); }

.card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:20px 20px 16px; cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line); }
.card-title{ margin:12px 0 6px; font-size:17px; font-weight:700; color:var(--navy); line-height:1.5; }
.card-summary{ margin:0; font-size:15px; font-weight:600; color:var(--ink-2); line-height:1.62; }
.card-sep{ border:none; border-top:1px solid var(--line-soft); margin:16px 0; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.card-asof{ font-size:12px; color:var(--ink-4); }
.detail-link{
  font:inherit; font-size:14px; font-weight:600; color:var(--accent-deep);
  background:none; border:none; cursor:pointer; padding:6px 2px; min-height:40px;
  display:inline-flex; align-items:center; gap:5px;
}
.detail-link:hover{ color:var(--accent-press); }

/* 判定バッジ */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; padding:6px 13px; border-radius:980px; border:1px solid transparent;
}
.badge .mark{ font-size:14px; line-height:1; }
.badge--ok{ background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-line); }
.badge--gray{ background:var(--gray-bg); color:var(--gray-fg); border-color:var(--gray-line); }
.badge--ng{ background:var(--ng-bg); color:var(--ng-fg); border-color:var(--ng-line); }
.badge--info{ background:var(--info-bg); color:var(--info-fg); border-color:var(--info-line); }

/* 折りたたみ */
.fold{ border-top:1px solid var(--line-soft); }
.fold:first-of-type{ border-top:none; }
.fold > summary{
  list-style:none; cursor:pointer; padding:12px 2px; min-height:44px;
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink-2);
}
.fold > summary::-webkit-details-marker{ display:none; }
.fold > summary:hover{ color:var(--accent-deep); }
.fold .tri{ color:var(--ink-4); transition:transform .18s ease; font-size:12px; }
.fold[open] > summary .tri{ transform:rotate(90deg); }
.fold-body{ padding:2px 2px 14px; }

.basis-list, .caveat-list{ margin:0; padding-left:1.3em; }
.basis-list li, .caveat-list li{ margin:5px 0; font-size:14.5px; color:var(--ink-2); }
.caveat-list li{ color:var(--ink-2); }

.ex-group + .ex-group{ margin-top:14px; }
.ex-group h4{ margin:0 0 7px; font-size:13.5px; font-weight:700; color:var(--ink-2); }
.ex-list{ list-style:none; margin:0; padding:0; }
.ex-list li{ display:flex; align-items:flex-start; gap:8px; margin:5px 0; font-size:14.5px; color:var(--ink-2); }
.ex-mark{ flex-shrink:0; font-weight:700; }
.ex-ok .ex-mark{ color:var(--ok-fg); }
.ex-ng .ex-mark{ color:var(--ng-fg); }

.other-cats{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.other-cats h3{ margin:0 0 14px; font-size:15px; font-weight:700; color:var(--ink-2); }

/* 0件 */
.empty h2{ margin:18px 0 12px; font-size:19px; font-weight:700; color:var(--navy); }
.hint-title{ margin:14px 0 6px; font-size:14px; font-weight:600; color:var(--ink-2); }
.empty ul{ margin:0 0 22px; padding-left:1.3em; color:var(--ink-2); }
.empty ul li{ margin:4px 0; }
.last-resort{ margin-top:20px; font-size:13.5px; color:var(--ink-3); }

/* ==========================================================================
   スケルトン / ローディング
   ========================================================================== */
.skeleton-list{ display:flex; flex-direction:column; gap:16px; }
.sk-card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow-sm);
}
.sk{ border-radius:8px; background:linear-gradient(90deg,#eef2f4 25%,#f6f9fa 37%,#eef2f4 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
.sk-badge{ width:96px; height:26px; border-radius:980px; margin-bottom:14px; }
.sk-title{ width:75%; height:18px; margin-bottom:12px; }
.sk-line{ width:100%; height:13px; margin-bottom:8px; }
.sk-line.short{ width:55%; }
@keyframes shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
.loading-msg{ text-align:center; color:var(--ink-3); font-size:13.5px; margin-top:14px; }

/* ==========================================================================
   フッター免責
   ========================================================================== */
.footer-main{
  margin-top:20px;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:28px 20px 36px; }
.disclaimer-title{ margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--ink-2); }
.disclaimer-icon{ color:#c98a00; }
.disclaimer-text{ margin:0 0 12px; font-size:13px; color:var(--ink-3); line-height:1.7; }
.disclaimer-points{ margin:0 0 14px; padding-left:1.25em; }
.disclaimer-points li{ font-size:12.5px; color:var(--ink-3); margin:3px 0; }
.disclaimer-asof{ margin:0 0 10px; font-size:12px; color:var(--ink-4); }
.copy{ margin:0; font-size:12px; color:var(--ink-4); display:flex; align-items:center; gap:10px; }

/* ==========================================================================
   使い方モーダル
   ========================================================================== */
.help-dialog{
  border:none; border-radius:22px; padding:0; max-width:480px; width:calc(100% - 36px);
  box-shadow:var(--shadow-lg); color:var(--ink); background:var(--surface);
}
.help-dialog::backdrop{ background:rgba(16,40,48,.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.help-dialog-inner{ padding:30px 28px 26px; }
.help-dialog h2{ margin:0 0 18px; font-size:20px; font-weight:700; color:var(--navy); }
.help-list{ margin:0 0 24px; padding-left:1.25em; }
.help-list li{ margin:9px 0; font-size:14.5px; color:var(--ink-2); line-height:1.65; }
.help-warn{ list-style:none; margin-left:-1.25em; padding:12px 14px; background:#fff8ed; border:1px solid #f3e2bf; border-radius:12px; color:#8a6300; font-weight:600; }

/* ==========================================================================
   トースト
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  padding:12px 22px; border-radius:980px; box-shadow:var(--shadow-lg);
  z-index:300; opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (min-width:768px){
  .tile-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:639px){
  .header-tabs{ order:3; margin-left:0; width:100%; justify-content:center; }
  .header-inner{ flex-wrap:wrap; row-gap:10px; }
  .logo{ margin-right:auto; }
  .search-row{ flex-direction:column; }
  .search-row .btn{ width:100%; }
  .badge{ font-size:12.5px; }
}

/* ==========================================================================
   モーション配慮
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}