/* NouMan Worker 公式の区画（プレビュー）。サイトの共通の style.css の上に重ねる */
:root {
  --w-ink: #1f3a2e;          /* Worker アプリの濃い緑（アプリのボタン・見出しの色） */
  --w-band: #eef3ee;
  --w-chip: #e3ece4;
  --w-os-ios: #2b4c6f;
  --w-os-and: #2f6b3f;
  --w-shot-border: #d5dcd3;
  --w-wide: 960px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --w-ink: #cfe3d4;
    --w-band: #1c241e;
    --w-chip: #26332a;
    --w-os-ios: #9cc0e4;
    --w-os-and: #8fc79c;
    --w-shot-border: #3a4237;
  }
}

/* 区画の見出し（公式であることを示す帯） */
.w-section { background: var(--w-band); border-bottom: 1px solid var(--line); }
.w-section-inner { max-width: calc(var(--w-wide) + 32px); margin: 0 auto; padding: 14px 16px 0; }
.w-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-brand-name { font-weight: 700; font-size: 18px; color: var(--w-ink); text-decoration: none; }
.w-official { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--w-ink); border: 1px solid var(--w-ink); border-radius: 4px; padding: 0 6px; line-height: 1.7; }
.w-brand-note { font-size: 13px; color: var(--muted); }
.w-tabs { display: flex; gap: 4px; margin-top: 8px; }
.w-tabs a { font-size: 15px; padding: 8px 12px 10px; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.w-tabs a[aria-current="page"] { color: var(--w-ink); font-weight: 700; border-bottom-color: var(--w-ink); }
.w-tabs a:hover { color: var(--w-ink); }

.w-main { max-width: calc(var(--w-wide) + 32px); margin: 0 auto; padding: 0 16px 48px; }
.w-measure { max-width: var(--measure); }
.w-main h1 { font-size: 28px; margin: 28px 0 8px; }
.w-lead { color: var(--muted); margin: 0 0 20px; max-width: var(--measure); }

/* 一覧 */
.w-current { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: 15px; color: var(--muted); margin: 0 0 18px; }
.w-current strong { color: var(--text); }
.w-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.w-row { border-bottom: 1px solid var(--line); }
.w-row-link { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 4px 20px; align-items: start; padding: 16px 4px; text-decoration: none; color: var(--text); }
.w-row-link:hover .w-row-title, .w-row-link:focus-visible .w-row-title { text-decoration: underline; color: var(--accent); }
.w-row-plain { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 4px 20px; align-items: start; padding: 16px 4px; }
.w-ver { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--w-ink); }
.w-ver small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: .02em; }
.w-row-title { font-size: 17px; font-weight: 700; line-height: 1.6; margin: 0; }
.w-dates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.w-os { display: inline-flex; align-items: center; gap: 6px; }
.w-os::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; display: inline-block; }
.w-os.ios { color: var(--w-os-ios); }
.w-os.android { color: var(--w-os-and); }
.w-os .w-date { color: var(--text); }
.w-os .w-date.unknown { color: var(--muted); }
.w-more { font-size: 14px; color: var(--accent); white-space: nowrap; padding-top: 4px; }
.w-latest { font-size: 12px; font-weight: 700; color: #fff; background: var(--w-ink); border-radius: 4px; padding: 0 6px; margin-left: 8px; vertical-align: 2px; }
@media (prefers-color-scheme: dark) { .w-latest { color: #102017; } }
.w-note { font-size: 14px; color: var(--muted); margin: 16px 0 0; max-width: var(--measure); }

/* 詳細 */
.w-crumbs { font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.w-release-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.w-benefits { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; max-width: var(--measure); }
.w-benefits li { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.7; }
.w-benefits li strong { display: block; font-size: 17px; }
.w-benefits li span { color: var(--muted); font-size: 15px; }

.w-step-section { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.w-step-section h2 { margin: 0 0 6px; font-size: 22px; }
.w-pair { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 16px; }
.w-shots { display: grid; gap: 16px; }
.w-shot { margin: 0; }
.w-shot img { display: block; width: 100%; max-width: 340px; height: auto; border: 1px solid var(--w-shot-border); border-radius: 18px; background: #fff; }
.w-shot figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.w-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.w-steps li { counter-increment: s; position: relative; padding-left: 2.2em; line-height: 1.7; }
.w-steps li::before { content: counter(s); position: absolute; left: 0; top: .1em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--w-chip); color: var(--w-ink); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.w-text p { margin: 0 0 1em; }
.w-text h3 { font-size: 16px; margin: 18px 0 6px; }

.w-plain-list { padding-left: 1.3em; margin: 0 0 1em; max-width: var(--measure); }
.w-plain-list li { margin-bottom: .45em; }
.w-related { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.w-related a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; font-size: 15px; }
.w-pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.w-footer-note { font-size: 13px; color: var(--muted); }

/* できること（短い版） */
.w-feature { padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.w-feature h2 { margin: 0 0 4px; font-size: 19px; }
.w-feature p { margin: 0 0 6px; max-width: var(--measure); }
.w-feature .w-since { font-size: 14px; color: var(--muted); }

@media (max-width: 720px) {
  .w-main h1 { font-size: 24px; }
  .w-row-link, .w-row-plain { grid-template-columns: 1fr; gap: 2px; padding: 14px 2px; }
  .w-more { display: none; }
  .w-ver { font-size: 18px; display: flex; gap: 8px; align-items: baseline; }
  .w-ver small { display: inline; }
  .w-pair { grid-template-columns: 1fr; gap: 14px; }
  .w-shot img { max-width: 100%; }
  .w-shots { max-width: 380px; margin: 0 auto; }
}

/* ===== v2（CD 評価 2026-10-19 の反映） ===== */
.w-page .site-header { max-width: calc(var(--w-wide) + 32px); }
.w-os { color: var(--text); }
.w-os::before { display: none; }
.w-os b { font-weight: 700; }
.w-os.ios, .w-os.android { color: var(--text); }
.w-lead + .w-note-top { margin-top: -10px; }
.w-note-top { font-size: 14px; color: var(--muted); margin: 0 0 18px; max-width: var(--measure); }
.w-colhead { display: grid; grid-template-columns: 7.5em 1fr 8em; gap: 20px; font-size: 13px; color: var(--muted); padding: 0 4px 6px; letter-spacing: .02em; }
.w-row-link, .w-row-plain { grid-template-columns: 7.5em 1fr 8em; }
.w-more { text-align: right; }
.w-latest { font-size: 13px; padding: 1px 7px; line-height: 1.6; }
.w-row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.w-row-tags li { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }

.w-release-meta { align-items: baseline; }
.w-release-meta .w-feature-link { margin-left: auto; font-size: 15px; }
.w-intro { font-size: 17px; margin: 0 0 22px; max-width: var(--measure); }
.w-benefits-h { font-size: 19px; font-weight: 700; margin: 8px 0 10px; }
.w-benefits { gap: 14px; }
.w-benefits li { background: none; border: 0; border-left: 3px solid var(--w-ink); border-radius: 0; padding: 2px 0 2px 14px; }
.w-benefits li a { font-size: 14px; white-space: nowrap; }

.w-step-section, .w-tail { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.w-tail h2 { margin: 0 0 8px; font-size: 22px; }
.w-pairs { display: grid; gap: 32px; margin-top: 18px; }
.w-pair2 { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px; align-items: start; }
.w-step { display: flex; gap: 12px; align-items: flex-start; }
.w-num { flex: 0 0 auto; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--w-ink); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; margin-top: .1em; }
@media (prefers-color-scheme: dark) { .w-num { color: #102017; } }
.w-step p { margin: 0; line-height: 1.75; max-width: 36em; }
.w-step .w-sub { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; }
.w-zoom { margin: 0; }
.w-zoom-frame { position: relative; border: 1px solid var(--w-shot-border); border-radius: 14px; overflow: hidden; background: #fff; }
.w-zoom-frame img { display: block; width: 100%; height: auto; }
.w-mark { position: absolute; border: 3px solid var(--w-ink); border-radius: 12px; box-shadow: 0 0 0 3px rgba(255,255,255,.7); pointer-events: none; }
.w-mark span { position: absolute; top: -14px; left: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--w-ink); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.w-zoom figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.w-zoom figcaption a { white-space: nowrap; }
.w-source { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

@media (max-width: 720px) {
  .w-colhead { display: none; }
  .w-row-link, .w-row-plain { grid-template-columns: 1fr; }
  .w-more { display: block; text-align: left; padding-top: 2px; }
  .w-dates { flex-direction: column; gap: 0; }
  .w-release-meta { flex-direction: column; gap: 2px; }
  .w-release-meta .w-feature-link { margin-left: 0; }
  .w-pair2 { grid-template-columns: 1fr; gap: 12px; }
  .w-step-section h2, .w-tail h2 { font-size: 20px; }
}

/* ===== v3（CD 2巡目の反映） ===== */
.w-latest { white-space: nowrap; display: inline-block; }
.w-colhead, .w-row-link, .w-row-plain { grid-template-columns: 128px 1fr 8em; }
.w-page .site-footer { max-width: calc(var(--w-wide) + 32px); }
.w-source { margin: 22px 0 0; }
@media (max-width: 720px) {
  .w-row-link, .w-row-plain { grid-template-columns: 1fr; }
}
.w-page .site-footer p { max-width: var(--measure); }

/* NouMan Worker 公式のヘッダー・フッター（2026-10-23。Workerプラスとは別） */
.w-official-header { align-items: center; }
.w-logo { display: inline-block; line-height: 0; padding: 6px 0; }
.w-logo img { display: block; width: 160px; height: auto; }
.w-official-header .site-nav a { white-space: nowrap; }
/* 背景は画面幅いっぱい、中身は本文と同じ幅（960px） */
.w-official-footer { background: #193d32; color: #e9efe9; margin: 48px 0 0; padding: 0; width: 100%; }
.w-footer-inner { max-width: calc(var(--w-wide) + 32px); margin: 0 auto; padding: 32px 16px 28px; display: grid; gap: 20px; }
.w-footer-logo { display: inline-block; background: #f6f2e8; border-radius: 10px; padding: 8px 12px; line-height: 0; }
.w-footer-logo img { display: block; width: 180px; height: auto; }
.w-footer-note { margin: 12px 0 0; color: #c9d6cd; font-size: 13px; line-height: 1.8; max-width: 34em; }
.w-footer-links { display: flex; flex-direction: column; }
.w-footer-links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: #f6f2e8; font-size: 15px; text-decoration: none; border-top: 1px solid rgba(246, 242, 232, 0.16); }
.w-footer-links a:last-child { border-bottom: 1px solid rgba(246, 242, 232, 0.16); }
.w-footer-links a::after { content: "›"; color: #d6a93d; font-size: 20px; }
.w-footer-links a:hover, .w-footer-links a:focus-visible { text-decoration: underline; }
.w-footer-copy { margin: 0; color: #a9bbb0; font-size: 12px; }
@media (min-width: 760px) {
  .w-footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 48px; padding: 40px 16px 32px; }
  .w-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; align-content: start; }
  .w-footer-links a, .w-footer-links a:last-child { min-height: 0; padding: 6px 0; border: 0; justify-content: flex-start; font-size: 14px; }
  .w-footer-links a::after { content: none; }
  .w-footer-copy { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid rgba(246, 242, 232, 0.2); }
}
body.w-page { padding-bottom: 0; margin-bottom: 0; }
/* 詳細ページ: 説明 → 画面 → 操作・補足（2026-10-23） */
.w-block { margin: 0 0 28px; }
.w-block-p { margin: 0 0 12px; font-size: 16px; line-height: 1.9; }
.w-bshot { margin: 0 0 12px; max-width: 360px; }
.w-bshot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.w-bshot figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.w-pending { max-width: 360px; margin: 0 0 12px; padding: 16px; border: 1px dashed #c9b88f; border-radius: 12px; font-size: 13px; color: #7a5b13; background: #fdf8ea; }