/**
 * musecode.jp サイト固有スタイル
 * MUSECODE_CSS_2026_08_11
 *
 * 🔴 面・文字・罫・影・角丸・組版は /shared/css/asi-tokens.css（ASI全サイト共通の正本）に置いてある。
 *    ここで上書きしてよいのはブランド色の3つだけ。全サイトの見た目を一気に変えるときは
 *    /var/www/_shared/css/asi-tokens.css を1回直せばよい。
 */

:root {
  /* このサイトのブランド色（claudecodenavi.jp と同系統のオレンジ） */
  --accent-primary: #ee7711;
  --accent-hover:   #c85f08;
  --accent-soft:    #fef7ee;
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.lucide { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
.icon { width: 20px; height: 20px; }
.icon--sm { width: 16px; height: 16px; }

/* ---------- ヘッダー ---------- */
.site-head { border-bottom: 1px solid var(--border-color); background: var(--bg-primary); }
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text-primary); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-primary); }
.brand__mark .lucide { width: 17px; height: 17px; }
.brand__name { font-size: 15px; }
.site-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.site-nav__link { padding: 7px 11px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.site-nav__link:hover { color: var(--accent-primary); background: var(--accent-soft); text-decoration: none; }

/* ---------- 非公式の明示 ---------- */
.disclaimer { background: var(--bg-surface); border-bottom: 1px solid var(--border-color); }
.disclaimer__inner { display: flex; align-items: flex-start; gap: 8px; padding-top: 9px; padding-bottom: 9px; color: var(--text-secondary); }
.disclaimer__inner .lucide { margin-top: 4px; }
.disclaimer p { margin: 0; font-size: 12.5px; line-height: 1.6; }

/* ---------- ヒーロー ---------- */
.hero { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.hero__inner { padding: 54px 20px 48px; max-width: var(--wrap); margin: 0 auto; }
.hero__eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--accent-primary); letter-spacing: .04em; }
.hero__title { margin: 0 0 16px; font-size: 33px; font-weight: 800; line-height: 1.4; }
.hero__lead { margin: 0; font-size: 15.5px; color: var(--text-secondary); max-width: 46em; }
.hero__meta { margin: 20px 0 0; font-size: 13px; color: var(--text-muted); }

/* ---------- セクション ---------- */
.section { padding: 52px 0; }
.section--alt { background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.sec-title { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.sec-lead { margin: 0 0 26px; color: var(--text-secondary); font-size: 14.5px; }

/* ---------- カード（均一1pxボーダー・色帯なし） ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-primary); }
.card__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.card__text { margin: 0; font-size: 14px; color: var(--text-secondary); }
.card__link { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; }

/* ---------- 表 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg-primary); }
.dtable th, .dtable td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.dtable thead th { background: var(--bg-surface); font-weight: 700; font-size: 13px; }
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td.num { font-family: var(--font-mono); }

/* ---------- コールアウト ---------- */
.callout { padding: 18px 20px; background: var(--accent-soft); border: 1px solid var(--bg-hover); border-radius: var(--radius-lg); }
.callout--warn { background: var(--bg-surface); }
.callout__title { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; font-size: 15px; font-weight: 700; }
.callout__body { margin: 0; font-size: 14px; color: var(--text-secondary); }

/* ---------- コード ---------- */
.code { margin: 0 0 6px; padding: 14px 16px; overflow-x: auto; background: var(--bg-dark); color: var(--bg-secondary); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; line-height: 1.75; }
.code__label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }

/* ---------- 記事 ---------- */
.breadcrumb { padding: 14px 0 0; font-size: 12.5px; color: var(--text-muted); }
.breadcrumb__link { color: var(--text-secondary); }
.article { max-width: 760px; margin: 0 auto; padding: 8px 20px 56px; }
.article__head { padding: 22px 0 24px; border-bottom: 1px solid var(--border-color); margin-bottom: 30px; }
.article__title { margin: 0 0 12px; font-size: 28px; font-weight: 800; line-height: 1.45; }
.article__lead { margin: 0 0 14px; font-size: 15.5px; color: var(--text-secondary); }
.article__meta { margin: 0; font-size: 13px; color: var(--text-muted); }
.article__body h2 { margin: 40px 0 14px; font-size: 20px; font-weight: 800; }
.article__body h3 { margin: 30px 0 10px; font-size: 16.5px; font-weight: 700; }
.article__body p { margin: 0 0 16px; font-size: 15px; }
.article__body ul, .article__body ol { margin: 0 0 16px; padding-left: 1.4em; font-size: 15px; }
.article__body li { margin-bottom: 7px; }
.article__body strong { font-weight: 700; }
.article__body code { padding: 2px 5px; background: var(--bg-surface); border-radius: 4px; font-family: var(--font-mono); font-size: .92em; }
.article__body .table-wrap, .article__body .callout, .article__body .code { margin-bottom: 22px; }
.note { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); }

/* ---------- CTA ---------- */
.cta { background: var(--bg-secondary); border-top: 1px solid var(--border-color); }
.cta__inner { padding: 44px 20px; text-align: center; }
.cta__title { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
.cta__lead { margin: 0 auto 20px; max-width: 40em; font-size: 14.5px; color: var(--text-secondary); }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 22px; background: var(--accent-primary); color: var(--text-inverse); border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; }
.btn:hover { background: var(--accent-hover); text-decoration: none; }

/* ---------- フッター ---------- */
.site-foot { border-top: 1px solid var(--border-color); background: var(--bg-primary); }
.site-foot__inner { padding: 26px 20px; }
.site-foot__note { margin: 0 0 8px; font-size: 12.5px; color: var(--text-secondary); }
.site-foot__note .lucide { margin-left: 3px; }
.site-foot__copy { margin: 0; font-size: 12.5px; color: var(--text-muted); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 26px; }
  .hero__inner { padding: 40px 20px 36px; }
  .article__title { font-size: 23px; }
  .section { padding: 40px 0; }
}