/* ==========================================================
   features.css — dlcprice でできること (トップ案B / ヘルプ冒頭案A) 共通スタイル
   Source: top/static/mock/2026-08-09-top-what-you-can-do.html
   CSS 変数の衝突調査結果: --f-mono/--ink/--ink-2/--line/--card/--accent/--gold は
   top/static/css/*.css および shared/css/*.css の既存 :root 定義と衝突なし (確認済み)。
   ========================================================= */
:root {
  --f-mono: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --ink:    #16181d;
  --ink-2:  #5b6270;
  --line:   #e6e8ec;
  --card:   #ffffff;
  --accent: #c2185b;
  --gold:   #b8860b;
}

.dlc-feat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 22px 26px;
}
/* /guide だけ枠の下に余白が要る。直下のリード文は bootstrap reboot の `p { margin-top: 0 }`
   で上マージンを持たないため、これが無いと枠とリード文が 0px でくっつく。
   トップ (.dlc-hero) は flex の gap:18px で間隔を作っているので、.dlc-feat 単体に
   margin を付けると二重になる。だから .dlc-guide 配下だけに限定する。 */
.dlc-guide > .dlc-feat { margin-bottom: 22px; }
.dlc-feat-head { margin: 0 0 4px; }
.dlc-feat-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .14em; color: var(--accent);
  display: block; margin-bottom: 6px;
}
.dlc-feat-h {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4;
}
.dlc-feat-lead { margin: 8px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.dlc-feat-rule { height: 1px; background: var(--line); border: 0; margin: 20px 0 4px; }
.dlc-feat-head.is-sub { margin-bottom: 12px; }
.dlc-feat-head.is-sub .dlc-feat-h { font-size: 17px; }

/* ---- 案A：1 カラム縦積み・イラスト左右交互（ヘルプ冒頭で使う） ---- */
.dlc-feat-row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.dlc-feat-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.dlc-feat-row:nth-child(even) { flex-direction: row-reverse; }
.dlc-feat-fig {
  flex: 0 0 132px; height: 99px;
  background: #fbfbfc; border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.dlc-feat-fig svg { width: 108px; height: 81px; display: block; }
.dlc-feat-body { flex: 1 1 auto; min-width: 0; }
.dlc-feat-where {
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-2);
  letter-spacing: .04em; display: inline-block; margin-bottom: 5px;
  border-bottom: 1px solid var(--line); padding-bottom: 1px;
}
.dlc-feat-t { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }
.dlc-feat-d { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--ink-2); }
/* ヘルプ内では各項目が該当セクションへの入口も兼ねる */
.dlc-feat-jump {
  display: inline-block; margin-top: 7px; font-size: 12.5px;
  color: var(--accent); text-decoration: none; font-weight: 700;
}
.dlc-feat-jump:hover { text-decoration: underline; }
.dlc-feat .num {
  font-family: var(--f-mono); font-size: 12.5px; color: var(--ink);
  background: #f6f0f3; padding: 1px 5px; border-radius: 4px;
}

/* ---- 案A 後段：図解なしの補足リスト（ヘルプのみ・「そのほかにできること」） ----
   トップ（案B）は 6 枚のまま据え置き、ヘルプ側だけ項目を増やすための受け皿。
   図解付きの行を 13 本並べると本題のアコーディオンまで遠くなるので、
   後段は 2 カラムのテキストリンクにして行数を稼ぐ。 */
.dlc-feat-sub-head {
  margin: 26px 0 2px; font-size: 14px; font-weight: 700; color: var(--ink);
}
.dlc-feat-sub-lead { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }
.dlc-feat-mini {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px;
  margin: 0; padding: 0; list-style: none;
}
.dlc-feat-mini li { border-top: 1px solid var(--line); padding: 11px 0 10px; }
.dlc-feat-mini a { display: block; text-decoration: none; color: inherit; }
.dlc-feat-mini a:hover .mini-t { color: var(--accent); text-decoration: underline; }
.dlc-feat-mini a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlc-feat-mini .mini-t { font-size: 14px; font-weight: 700; line-height: 1.5; }
.dlc-feat-mini .mini-t::after {
  content: " →"; font-family: var(--f-mono); font-size: 11px; color: var(--accent);
}
.dlc-feat-mini .mini-d {
  display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
}

/* ---- 案B：3 ステップ（トップの初回訪問者向け） ---- */
.dlc-feat-steps { display: flex; align-items: stretch; gap: 10px; margin: 4px 0 0; }
.dlc-feat-step {
  flex: 1 1 0; min-width: 0; position: relative;
  background: #fbfbfc; border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 14px 16px;
}
.dlc-feat-step + .dlc-feat-step::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 10px; height: 2px; background: var(--line);
}
.dlc-feat-stepn {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--accent); display: block; margin-bottom: 6px;
}
.dlc-feat-stept { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.dlc-feat-stepd { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }

/* ---- 案B：機能カード ---- */
.dlc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.dlc-feat-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 8px; padding: 14px;
  background: var(--card); transition: border-color .12s, transform .12s;
}
.dlc-feat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.dlc-feat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlc-feat-card svg { width: 72px; height: 54px; display: block; margin-bottom: 8px; }
.dlc-feat-card .dlc-feat-t { font-size: 14.5px; }
.dlc-feat-card .dlc-feat-d { font-size: 12.5px; line-height: 1.8; }
.dlc-feat-card .go {
  font-family: var(--f-mono); font-size: 11px; color: var(--accent);
  display: inline-block; margin-top: 8px;
}
/* 案B → ヘルプ（案A）への橋渡し */
.dlc-feat-more {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.dlc-feat-more a { color: var(--accent); font-weight: 700; text-decoration: none; }
.dlc-feat-more a:hover { text-decoration: underline; }

/* ---- SVG 共通 ---- */
.ill { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill .ax  { stroke: #c9ced6; stroke-width: 2; }
.ill .ln  { stroke: var(--ink); stroke-width: 2.4; }
.ill .gd  { stroke: #c9ced6; stroke-width: 1.6; stroke-dasharray: 4 4; }
.ill .ac  { stroke: var(--accent); stroke-width: 2.4; }
.ill .acf { fill: var(--accent); stroke: none; }
.ill .bx  { stroke: var(--ink); stroke-width: 2; }
.ill .bxf { fill: #eef0f3; stroke: var(--ink); stroke-width: 2; }
.ill .gldf{ fill: var(--gold); stroke: none; }
.ill text {
  font-family: var(--f-mono); font-size: 9px; fill: var(--ink-2);
  stroke: none; letter-spacing: .02em;
}

/* ---- モバイル ---- */
@media (max-width: 640px) {
  .dlc-feat { padding: 18px 15px 20px; }
  .dlc-feat-h { font-size: 19px; }
  .dlc-feat-row,
  .dlc-feat-row:nth-child(even) { flex-direction: column; gap: 12px; padding: 18px 0; }
  .dlc-feat-fig { flex: 0 0 auto; width: 100%; height: 108px; }
  .dlc-feat-steps { flex-direction: column; gap: 8px; }
  .dlc-feat-step + .dlc-feat-step::before { left: 50%; top: -9px; width: 2px; height: 8px; }
  .dlc-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .dlc-feat-mini { grid-template-columns: 1fr; }
}

/* このブロック内のアニメーションだけを止める。`*` にすると読み込まれたページ全体の
   transition を消してしまうため、必ず .dlc-feat 配下にスコープすること
   (transition を持つのは .dlc-feat-card のみ)。 */
@media (prefers-reduced-motion: reduce) { .dlc-feat * { transition: none !important; } }