/* =========================================================
   投資詐欺返金相談ナビ — Interior pages (shared)
   breadcrumbs, page header, prose, TOC, FAQ, evidence,
   special cards, checklist, consultation, line guide
   ========================================================= */

/* ---------- Page header / banner ---------- */
.page-head { background: linear-gradient(160deg, var(--color-primary), var(--color-primary-soft)); color: #fff; padding: 40px 0 46px; position: relative; overflow: hidden; }
.page-head::after { content:""; position:absolute; right:-80px; bottom:-100px; width: 320px; height: 320px; border-radius:50%; background: radial-gradient(circle, rgba(44,107,196,.35), transparent 70%); }
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { font-family: var(--font-serif); font-size: clamp(24px, 3.4vw, 36px); line-height: 1.45; color:#fff; margin: 12px 0 14px; max-width: 24ch; }
.page-head .ph-lead { color: #C7D6E8; font-size: 15.5px; max-width: 64ch; line-height: 1.9; }
.page-head .badge-supervised { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #BFE6CF; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: #A9BDD6; list-style: none; margin: 0; padding: 0; }
.breadcrumbs.on-light { color: var(--color-muted); }
.breadcrumbs li { display: flex; align-items: center; gap: 7px; }
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs.on-light a:hover { color: var(--color-secondary-dark); }
.breadcrumbs .sep { opacity: .5; }
.breadcrumbs li[aria-current] { color: #fff; font-weight: 600; }
.breadcrumbs.on-light li[aria-current] { color: var(--color-text); }

/* ---------- Article layout ---------- */
.article-wrap { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start; }
.article-main { min-width: 0; }
.article-side { position: sticky; top: calc(var(--header-height) + 20px); display: flex; flex-direction: column; gap: 20px; }

.article-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 18px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 28px; font-size: 13px; color: var(--color-muted); }
.article-meta-row .amr-item { display: flex; align-items: center; gap: 7px; }
.article-meta-row svg { width: 15px; height: 15px; color: var(--color-faint); }

/* ---------- Prose ---------- */
.prose { color: var(--color-text); font-size: 16.5px; line-height: 2; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-family: var(--font-serif); font-size: 25px; line-height: 1.5; margin-top: 1.8em; padding-bottom: 12px; border-bottom: 2px solid var(--color-secondary-soft); color: var(--color-primary); scroll-margin-top: 100px; }
.prose h3 { font-size: 20px; margin-top: 1.6em; color: var(--color-primary); padding-left: 12px; border-left: 4px solid var(--color-secondary); scroll-margin-top: 100px; }
.prose p { margin: 0; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0; }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--color-text-strong); font-weight: 700; }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- TOC ---------- */
.toc { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-card); }
.toc h4 { font-size: 14px; color: var(--color-primary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.toc h4 svg { width: 17px; height: 17px; color: var(--color-secondary); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 9px 8px; font-size: 13.5px; color: var(--color-text); border-radius: 8px; line-height: 1.6; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--color-secondary); font-weight: 700; flex: none; }
.toc a:hover { background: var(--color-secondary-soft); color: var(--color-secondary-dark); }

/* mobile TOC collapsible */
.toc-mobile { display: none; }
details.toc-details summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--color-primary); display: flex; align-items: center; justify-content: space-between; }
details.toc-details summary::-webkit-details-marker { display: none; }

/* ---------- FAQ accordion ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 18px 20px; font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--color-primary); display: flex; align-items: center; gap: 12px; justify-content: space-between; line-height: 1.6; }
.faq-q .q-mark { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--color-secondary-soft); color: var(--color-secondary-dark); display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 15px; }
.faq-q .q-chev { width: 20px; height: 20px; flex: none; color: var(--color-faint); transition: transform .22s ease; }
.faq-item.open .q-chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .26s ease; }
.faq-a-inner { padding: 0 20px 20px 58px; font-size: 14.5px; color: var(--color-muted); line-height: 1.9; }

/* ---------- Evidence checklist component ---------- */
.evidence { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow-card); }
.evidence h3 { font-size: 18px; color: var(--color-primary); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.evidence h3 svg { width: 22px; height: 22px; color: var(--color-accent); }
.evidence .ev-lead { font-size: 13.5px; color: var(--color-muted); margin-bottom: 18px; }
.ev-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: all .14s; font-size: 14.5px; user-select: none; }
.ev-row:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.ev-box { width: 22px; height: 22px; flex: none; border: 2px solid var(--color-border-strong); border-radius: 6px; display: grid; place-items: center; color: #fff; transition: all .14s; }
.ev-box svg { width: 14px; height: 14px; opacity: 0; }
.ev-row.checked .ev-box { background: var(--color-accent); border-color: var(--color-accent); }
.ev-row.checked .ev-box svg { opacity: 1; }
.ev-row.checked { background: var(--color-accent-soft); border-color: var(--color-accent); }

/* ---------- TxID / Wallet card ---------- */
.data-card { background: var(--color-primary); border-radius: var(--radius-md); padding: 18px 20px; color: #fff; }
.data-card .dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.data-card .dc-head h4 { font-size: 14px; color: #fff; display: flex; align-items: center; gap: 8px; }
.data-card .dc-head h4 svg { width: 18px; height: 18px; color: #8FB6E8; }
.data-card .dc-status { font-size: 11.5px; font-weight: 700; color: #7FE0A6; display: flex; align-items: center; gap: 5px; }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.1); }
.data-row .dr-label { font-size: 12px; color: #A9BDD6; flex: none; }
.data-row .dr-value { font-family: var(--font-mono); font-size: 13px; color: #fff; word-break: break-all; text-align: right; }
.copy-btn { background: rgba(255,255,255,.1); border: none; color: #C7D6E8; width: 30px; height: 30px; flex: none; border-radius: 7px; cursor: pointer; display: grid; place-items: center; transition: background .14s; }
.copy-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn.copied { background: var(--color-accent); color: #fff; }

/* ---------- Fake-exchange / LINE-group illustrative cards ---------- */
.fake-card { background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); }
.fake-card .fc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fake-card .fc-logo { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(145deg, var(--color-primary), var(--color-secondary)); display: grid; place-items: center; color:#fff; font-weight: 700; flex: none; }
.fake-card .fc-name { font-weight: 700; color: var(--color-primary); font-size: 15px; }
.fake-card .fc-tag { font-size: 11.5px; color: var(--color-muted); }
.fake-card .fc-balance { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--color-primary); }
.fake-card .fc-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 14px; }
.fake-card .fc-act { text-align: center; font-size: 11px; color: var(--color-muted); }
.fake-card .fc-act .fa-ico { width: 38px; height: 38px; margin: 0 auto 5px; border-radius: 10px; background: var(--color-bg-tint); display: grid; place-items: center; color: var(--color-secondary-dark); }
.fake-card .fc-act .fa-ico svg { width: 18px; height: 18px; }
.fake-card .fc-act.disabled { opacity: .5; }

.linegroup-card { background: #EAF6EE; border: 1px solid #C7E6D2; border-radius: var(--radius-lg); padding: 18px 20px; }
.linegroup-card .lg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.linegroup-card .lg-logo { width: 36px; height: 36px; border-radius: 9px; background: var(--color-line); display:grid; place-items:center; color:#fff; flex:none; }
.linegroup-card .lg-logo svg { width: 22px; height: 22px; }
.linegroup-card .lg-name { font-weight: 700; color: #134E2E; font-size: 14.5px; }
.linegroup-card .lg-count { font-size: 11.5px; color: #4B8064; }
.lg-msg { background:#fff; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: var(--color-text); margin-bottom: 8px; line-height: 1.7; display: flex; gap: 8px; align-items: flex-start; }
.lg-msg svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--color-warning); }

/* ---------- Public links inline ---------- */
.ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ref-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-muted); }
.ref-list svg { width: 16px; height: 16px; color: var(--color-faint); flex: none; margin-top: 4px; }

/* ---------- Related articles ---------- */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- Inline article LINE CTA ---------- */
.inline-line-cta { background: linear-gradient(135deg, #E8F7EE, #F2FAF5); border: 1px solid #C7E6D2; border-radius: var(--radius-lg); padding: 26px 28px; display: flex; gap: 22px; align-items: center; }
.inline-line-cta .ilc-ico { width: 56px; height: 56px; flex: none; border-radius: 15px; background: var(--color-line); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(6,199,85,.3); }
.inline-line-cta .ilc-ico svg { width: 32px; height: 32px; color:#fff; }
.inline-line-cta h3 { font-size: 18px; color: #134E2E; margin-bottom: 6px; }
.inline-line-cta p { font-size: 13.5px; color: #3E6B52; margin: 0; line-height: 1.75; }

@media (max-width: 980px) {
  .article-wrap { grid-template-columns: 1fr; }
  .article-side { position: static; }
  .toc-desktop { display: none; }
  .toc-mobile { display: block; }
  .related-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .ev-list { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .inline-line-cta { flex-direction: column; text-align: center; }
  .prose { font-size: 16px; }
}