/*
 * affiliates 共通デザイントークン（素案 2026-10-05）
 * 正本: affiliates/docs/design-system/tokens.css
 * 各サイトは同一ファイルをコピーして読み込み、サイト固有の値だけ
 * 自サイトの CSS で :root を上書きする（「サイト別」節の変数）。
 * 色は白地でのコントラスト比を併記。文字と操作枠に使う色は 4.5:1 以上、
 * 装飾線は 3:1 未満でもよい。
 */
:root {
  /* 面 */
  --bg: #ffffff;
  --surface-muted: #f5f5f5;          /* 空状態と画像プレースホルダのみ。面を灰で塗らない */

  /* 文字（2段） */
  --fg: #1a1a1a;                     /* 17.4:1 */
  --fg-muted: #666666;               /* 5.7:1  補助文、パンくず、日付 */
  --fg-faint: #949494;               /* 3.0:1  区切り記号「›」「/」だけに使う */

  /* 線（装飾と操作枠を分ける） */
  --line: #dddddd;                   /* 1.4:1  カード枠、表の罫線、区切り */
  --line-control: #767676;           /* 4.5:1  入力欄、チップ、ボタンの枠 */

  /* アクセント: サイト別に上書き（下の既定は doujin の青） */
  --accent: #1f57d6;                 /* 文字と outline に使う。白地 4.5:1 以上を守る */
  --accent-hover: #1843a8;
  --accent-soft: #eef3fe;            /* 淡い地。選択中チップ、通知 */
  --accent-fill: var(--accent);      /* ボタンの塗り。ライムのように文字に使えない色はここだけに使う */
  --on-accent-fill: #ffffff;         /* 塗りの上の文字色 */

  /* 意味色（DADS 準拠） */
  --error: #ce0000;                  /* 5.8:1 */
  --error-bg: #fdecec;
  --warning: #927200;                /* 4.5:1 文字 */
  --warning-bg: #fff8e6;
  --warning-line: #f2d58a;
  --success: #197a4b;                /* 5.4:1 */
  --success-bg: #edf7f1;

  /* リンク */
  --link: var(--accent);
  --link-visited: #8b008b;           /* 本文内リンクのみ。ナビとカードは適用しない */
  --focus: var(--accent);
  --focus-ring: #ffd43d;             /* 既定で有効（DADS 流儀の外側リング、色付き帯の上でも焦点が見える）。消すサイトは transparent に上書き */

  /* 文字サイズ */
  --fs-body: 16px;
  --fs-h1: 24px;                     /* SP 20px。カタログの h1 は clamp(22px, 5vw, 32px) を許容 */
  --fs-h2: 18px;                     /* 節見出し */
  --fs-h3: 16px;
  --fs-data: 13px;                   /* データ行、表、節の箱 */
  --fs-meta: 12px;                   /* パンくず、補助文、人物名 */
  --fs-min: 11px;                    /* バッジ、#ラベル。これ未満は使わない */
  --fs-card-title: 15px;             /* SP 14px */
  --fs-price: 17px;
  --lh-body: 1.7;
  --lh-heading: 1.35;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;  /* 既定値。統一は保留(10-05)、各サイトが上書きしてよい */
  --font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* 寸法 */
  --wrap-wide: 1240px;               /* カタログ */
  --wrap-narrow: 760px;              /* 記事、lab */
  --gutter: 32px;                    /* PC。≤960: 16px、≤600: 10px はメディアクエリで上書き */
  --gap-grid: 12px;                  /* 一覧の列間。SP 8〜10px */
  --space-section: 24px;             /* 節の上下。SP は半分 */
  --control-h: 48px;                 /* 主 CTA、入力欄、タブ */
  --control-h-sm: 40px;              /* 副ボタン、チップ、ページ送り */
  --control-h-xs: 36px;              /* アイコンボタンの下限 */

  /* 形 */
  --radius: 8px;                     /* カード、ボタン、入力欄、節の箱 */
  --radius-sm: 4px;                  /* バッジ、形式チップ */
  --radius-pill: 999px;              /* タップ可能なチップ */
  --border-w: 1px;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .13);  /* ポップオーバーとメニューだけ。面には影を使わない */
}

@media (max-width: 960px) {
  :root { --gutter: 16px; }
}
@media (max-width: 600px) {
  :root {
    --gutter: 10px;
    --gap-grid: 8px;
    --space-section: 12px;
    --fs-h1: 20px;
    --fs-card-title: 14px;
  }
}

/* 共通の最小スタイル。部品の実装は各サイトに任せ、ここでは土台だけ揃える。
   フォント統一は保留(10-05)なので、各サイトは body { font-family } で自分の書体に上書きしてよい */
html { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background: var(--bg); }
a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.prose a:visited { color: var(--link-visited); }   /* 本文領域にだけ .prose を付ける */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 7px var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/*
 * サイト別の上書き例（各サイトの CSS に置く。ここには書かない）
 *
 * avdare:    --accent:#2f6fb3; --accent-hover:#25598f; --accent-soft:#eaf2fb;
 * picklooms: --accent:#5b7533; --accent-hover:#48613b; --accent-soft:#eeefe8;
 *            --accent-fill:#d3ee87; --on-accent-fill:#10242c;   （ライムは塗りだけ）
 *            --font-display:"DM Sans", var(--font-sans);        （見出しの演出用。本文は共通）
 * maker:     --accent:#1f6a4a; --accent-hover:#17533a; --accent-soft:#e8f1ec;
 * himepai:   --accent:#9b315a; --accent-hover:#7e2748; --accent-soft:#f4e9eb;
 * lab 記事型: --wrap-wide: var(--wrap-narrow); アクセントは lab 別。背景は白を維持し、
 *            灰地に白カードの演出をやめる（ベンチマーク模倣を続けるなら例外として runbook に書く）
 */

/* イメミル: サイト別の値（accent はローズ、白地 5.9:1） */
:root { --accent: #b0185a; --accent-hover: #8e1248; --accent-soft: #fdeef4; --accent-fill: var(--accent); --on-accent-fill: #fff;
  /* 旧 CSS から流用したコメント欄の変数名 */
  --ink: var(--fg); --muted: var(--fg-muted); --white: #fff; --lime: var(--accent-fill); }
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background: var(--bg); }
a { color: var(--link); }
main { max-width: 1080px; margin: 0 auto; padding: 0 12px 32px; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); margin: 8px 0 4px; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); margin: var(--space-section) 0 8px; }
h2 small { font-size: var(--fs-meta); color: var(--fg-muted); font-weight: normal; }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.logo { font-weight: 700; font-size: 20px; color: var(--accent); text-decoration: none; }
.site-head nav a { margin-left: 14px; font-size: var(--fs-data); color: var(--fg); text-decoration: none; }
.crumbs { font-size: var(--fs-meta); color: var(--fg-muted); padding: 8px 0 0; }
.crumbs a { color: var(--fg-muted); } .crumbs .sep { color: var(--fg-faint); margin: 0 4px; }
.byline, .lead, .note { font-size: var(--fs-data); color: var(--fg-muted); margin: 0 0 8px; }
.hero { padding: 16px 0 0; } .hero p { margin: 0; color: var(--fg-muted); }
/* 画像は切り抜かない・上に何も重ねない（DMM 画像規約） */
img { max-width: 100%; height: auto; display: block; }
.package img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--surface-muted); }
.package { margin: 0 0 12px; }
.sample-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 720px) { .sample-grid { grid-template-columns: repeat(3, 1fr); } }
.sample-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-muted); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card a { text-decoration: none; color: var(--fg); }
.thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: var(--surface-muted); border-radius: var(--radius-sm); }
.card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-card-title); line-height: 1.4; margin-top: 4px; }
.card-meta { display: block; font-size: var(--fs-meta); color: var(--fg-muted); }
.tag { font-weight: normal; color: var(--accent); }
.books { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
@media (min-width: 720px) { .books { grid-template-columns: repeat(6, 1fr); } }
.book a { text-decoration: none; color: var(--fg); }
.cover img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: var(--surface-muted); }
.offers { margin: 0 0 8px; }
.buy { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; margin: 0 0 6px; border: 1px solid var(--line-control); border-radius: var(--radius); color: var(--fg); text-decoration: none; font-size: var(--fs-data); }
.buy b { font-size: var(--fs-price); }
.buy-main { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent-fill); font-weight: 700; }
.facts dl { margin: 0; font-size: var(--fs-data); }
.facts dl div { display: grid; grid-template-columns: 7em 1fr; padding: 6px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--fg-muted); } .facts dd { margin: 0; }
.names { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.names a { display: inline-block; padding: 6px 10px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); text-decoration: none; color: var(--fg); font-size: var(--fs-data); }
.names small { color: var(--fg-muted); margin-left: 4px; }
.more { text-align: right; font-size: var(--fs-data); margin: 8px 0 0; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; } .pager a, .pager span { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-data); } .pager span { background: var(--accent-soft); }
.site-foot { border-top: 1px solid var(--line); padding: 16px 12px 32px; font-size: var(--fs-meta); color: var(--fg-muted); max-width: 1080px; margin: 0 auto; }
.site-foot a { color: var(--fg-muted); margin-right: 10px; }
.button{display:inline-flex;align-items:center;justify-content:center;gap:23px;padding:12px 21px;font-weight:600;font-size:14px;line-height:1.6;border:1px solid transparent;border-radius:var(--radius);transition:background .2s;white-space:nowrap;min-height:48px}
.button .icon{width:17px;height:17px}
.button-lime{background:var(--accent-fill);color:var(--on-accent-fill)}
.button-lime:hover{background:#bed970}
.button-dark{background:var(--ink);color:white}
.button-dark:hover{background:#314b52}
.button-outline{border:1px solid var(--line-control);background:transparent;color:var(--ink)}
.button-outline:hover{background:#eeefe8}
.detail-section{padding-bottom:40px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.detail-section h2{font-size:23px;margin-bottom:17px}
.detail-section>.overline{font-size:11px;margin-bottom:10px}
.detail-section .section-heading{margin-bottom:15px}
.ranking-price .button{font-size:13px;margin-top:15px;padding:12px 13px;gap:10px;min-height:42px}
.ranking-price .button>.icon{width:14px;height:14px}
.detail-section.official-facts .work-facts{margin:8px 0 0}
.detail-main .detail-section:not(#offers){padding-bottom:18px;margin-bottom:18px}
.detail-main .detail-section:not(#offers) h2{margin-bottom:10px}
.detail-section>.titled{margin-bottom:10px}
.sticky-cta .button{margin:0;min-height:40px;padding:9px 12px;font-size:13px}
.detail-section.work-performers-compact{padding:0 0 8px;margin-bottom:14px}
.reactions{margin:0 0 30px}
.reactions-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.reactions-head p{margin:0;font-size:15px;font-weight:700}
.reactions-head span{font-size:11px;color:var(--muted)}
.reaction-chips{display:flex;flex-wrap:wrap;gap:8px}
.reaction-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.reaction-chip span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.reaction-chip span:empty{display:none}
.reaction-chip[aria-pressed=true]{background:var(--lime);border-color:#b9d36f}
.reaction-chip[aria-pressed=true] span{color:var(--ink)}
.reaction-note{margin:8px 0 0;font-size:11px;color:var(--muted)}
.quick-comment{display:grid;gap:8px;margin-top:12px}
.quick-comment-row{display:flex;gap:8px}
.quick-comment-row input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);font:inherit;font-size:16px}
.quick-comment .button,.comment-form .button{margin:0;min-height:44px;padding:10px 18px;font-size:13px;gap:6px}
.comments-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.detail-section .comments-head h2{margin:0}
.comments-head span{font-size:11px;color:var(--muted)}
.comments-empty{margin:0 0 12px;font-size:13px;color:var(--muted)}
.comment-open{margin:0 0 14px;font-size:13px}
.comment-open[aria-expanded=true]{display:none}
.comment-form{display:grid;gap:8px;margin:0 0 16px}
.comment-form textarea{width:100%;min-height:92px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);font:inherit;font-size:16px;line-height:1.7;resize:vertical}
.comment-form-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.comment-form-row label{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:13px}
.comment-length{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.comment-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.comment-check:empty,.comment-status:empty{display:none}
.comment-check{margin:0;font-size:13px;font-weight:700;color:#7a4a00}
.comment-status{margin:0;font-size:13px;font-weight:600}
.comment-rule{margin:0;font-size:11px;line-height:1.8;color:var(--muted)}
.comment-rule a{text-decoration:underline;text-underline-offset:3px}
.comment-list{list-style:none;margin:0;padding:0}
.comment{padding:12px 0;border-top:1px solid var(--line)}
.comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0 0 4px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.comment-kind{padding:0 8px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:600}
.comment-report{margin-left:auto;min-height:32px;padding:0 4px;border:0;background:none;font:inherit;font-size:11px;color:var(--muted);text-decoration:underline;cursor:pointer}
.comment-mine{margin-left:auto;font-weight:700;color:var(--ink)}
.comment-body{margin:0;font-size:14px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere}
.comment-reported{font-size:12px;color:var(--muted)}
.comment-spoiler summary{min-height:32px;font-size:12px;color:var(--muted);cursor:pointer}
.comment-more{display:block;width:100%;min-height:44px;margin-top:8px;border:1px solid var(--line);border-radius:6px;background:var(--white);font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.detail-section h2,#offers h2,.guide-list h2,.detail-sidebar>h2,.detail-sidebar h2,.recent-views h2{font-size:18px}
.description-text a,.faq details a,.faq-list dd a,.guide-prose a,.profile-description a,.notice a,.comment-body a,.sidebar-note a,.editorial-note a,.event-row p a,.content-fold a{text-decoration:underline;text-underline-offset:3px}