.action-preview { background: #f7fafc; color: #17394f; }
.action-preview * { box-sizing: border-box; }
.action-preview .container { width: 100%; max-width: 1120px; padding-inline: 24px; }
.action-preview .site-header .container { max-width: 1120px; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.prototype-tag { border: 1px solid #cfdee7; border-radius: 999px; padding: 5px 12px; color: #456278; font-size: .8rem; white-space: nowrap; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.guide-icon { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.guide-main { padding-top: 42px; padding-bottom: 64px; }
.guide-intro { padding-bottom: 28px; }
.guide-intro .eyebrow { color: #087b98; font-weight: 700; font-size: .85rem; margin: 0 0 10px; }
.guide-intro h1 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); color: #133d5a; letter-spacing: -.025em; line-height: 1.45; margin: 0 0 12px; }
.intro-copy { color: #456477; margin: 0 0 16px; }
.edition { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: #466375; font-size: .85rem; margin: 0; }
.edition span { background: #e7f1f7; color: #165a82; border-radius: 999px; padding: 3px 10px; font-weight: 700; }
.mobile-break { display: none; }
.action-preview .finder { padding: 24px; border: 1px solid #d8e7ef; border-radius: 18px; background: #fff; }
.finder h2 { font-size: 1.1rem; color: #173d55; margin: 0 0 6px; }
.scope-note { color: #4a6578; font-size: .86rem; margin: 0 0 18px; }
/* home.css "body.home .scope-note { margin: 0 }" (0,2,1) outranks the rule above; restore the gap above the buttons. */
.action-preview .finder .scope-note { margin: 0 0 18px; }
.target-options { display: flex; flex-wrap: wrap; gap: 8px; }
.target-button { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .86rem; font-weight: 650; min-height: 44px; padding: 9px 12px; border: 1px solid #cadce7; border-radius: 999px; color: #315971; background: #fff; cursor: pointer; }
.target-button .guide-icon { width: 20px; height: 20px; flex-basis: 20px; }
.target-button[aria-pressed="true"] { background: #165a82; color: #fff; border-color: #165a82; }
.target-button:hover { border-color: #087f9b; }
.action-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.action-button { display: flex; align-items: center; gap: 12px; padding: 17px 18px; min-height: 78px; border: 1px solid #d4e3ed; border-radius: 13px; font: inherit; background: #f6fafc; color: #21536e; text-align: left; cursor: pointer; }
.action-button[data-action="check"] { background: #f1f9fb; }
.action-button[data-action="know"] { background: #f5f7fa; }
.action-button[aria-pressed="true"] { border-color: #165a82; box-shadow: inset 0 0 0 1px #165a82; background: #e9f6fb; }
.action-label { font-size: .96rem; font-weight: 750; }
.action-label span { display: inline; }
.action-count { font-size: 1.65rem; font-weight: 750; color: #165a82; margin-left: auto; line-height: 1.1; }
.filter-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; }
.filter-status p { color: #466375; font-size: .86rem; margin: 0; }
.reset-button { min-height: 44px; background: transparent; border: 0; color: #165a82; font: inherit; font-size: .86rem; text-decoration: underline; text-underline-offset: 4px; padding: 8px 2px; cursor: pointer; }
.action-preview .card-group { padding-top: 30px; }
.card-group h2 { display: flex; align-items: center; gap: 9px; color: #164d6d; font-size: 1.12rem; margin: 0 0 14px; }
.group-count { color: #506b7d; font-weight: 500; font-size: .85rem; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-card { min-width: 0; border: 1px solid #d7e5ee; background: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; }
.card-target { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: #45677d; margin: 0 0 10px; }
.card-target .guide-icon { width: 19px; height: 19px; flex-basis: 19px; }
.guide-card h3 { font-size: 1.13rem; line-height: 1.55; color: #153f5c; margin: 0 0 10px; overflow-wrap: anywhere; }
.card-scope { color: #4b6576; font-size: .87rem; line-height: 1.7; margin: 0 0 14px; overflow-wrap: anywhere; }
.next-step { background: #eef7fb; border-left: 3px solid #4a9cba; color: #174e6b; padding: 11px 13px; font-size: .93rem; line-height: 1.7; margin: 0 0 16px; }
.card-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: auto; }
.card-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; font-weight: 650; color: #165a82; text-underline-offset: 4px; }
.card-details { border-top: 1px solid #e1ebf1; margin-top: 9px; font-size: .84rem; color: #476476; }
.card-details summary { min-height: 44px; padding-block: 12px; color: #365c76; cursor: pointer; }
.card-details dl { display: grid; gap: 10px; margin: 5px 0 14px; }
.card-details dt { color: #234d66; font-weight: 700; }
.card-details dd { margin: 3px 0 0; line-height: 1.7; overflow-wrap: anywhere; }
.card-details .source-url { display: flex; align-items: center; min-height: 44px; color: #165a82; overflow-wrap: anywhere; }
.version-list { list-style: none; padding: 0; margin: 0 0 16px; }
.version-list li { padding: 10px 0; border-bottom: 1px solid #e5eef3; }
.version-list strong { display: block; color: #214d66; }
.version-list p { margin: 4px 0 0; line-height: 1.7; overflow-wrap: anywhere; }
/* Only the top padding is intended; .original-day margin-top sets the gap below, so cancel home.css section bottom padding. */
.action-preview .other-section { padding: 36px 0 0; }
.other-section h2 { font-size: 1.1rem; color: #244e67; margin-bottom: 6px; }
.other-section h2 span { font-weight: 500; font-size: .86rem; color: #526c7e; }
.other-section > p { color: #506b7d; font-size: .86rem; margin: 0 0 14px; }
.other-news { list-style: none; margin: 0; padding: 0 20px; border: 1px solid #dce8ef; border-radius: 14px; background: #fff; }
.other-news li { border-bottom: 1px solid #e1ebf1; padding: 13px 0; }
.other-news li:last-child { border-bottom: 0; }
.other-news a { display: block; min-height: 44px; padding-block: 8px; font-size: .9rem; line-height: 1.7; overflow-wrap: anywhere; color: #285b79; }
.original-day { padding: 24px; margin-top: 30px; text-align: center; border: 1px solid #cfe4ef; border-radius: 15px; background: #edf7fb; }
.original-day p { margin: 0 0 8px; font-size: .85rem; color: #4a6779; }
.original-day a { display: inline-flex; min-height: 44px; align-items: center; gap: 16px; color: #165a82; font-weight: 700; }
.empty-state, #error-message:not([hidden]) { padding: 24px; border: 1px solid #d7e5ee; border-radius: 15px; background: #fff; margin-top: 26px; }
/* .empty-state is a <section>; override home.css "body.home section" padding (64px 0 / 40px 0). */
.action-preview .empty-state { padding: 24px; }
.empty-state h2 { margin: 0 0 8px; color: #244e67; font-size: 1.1rem; }
.empty-state p { color: #4b6678; font-size: .9rem; margin: 0; }
.action-preview :focus-visible { outline: 3px solid #087dab; outline-offset: 3px; }
.action-preview button { transition: background .12s ease; }
@media (max-width: 800px) {
  .action-button { padding-inline: 12px; gap: 8px; }
  .action-label { font-size: .89rem; }
}
@media (max-width: 640px) {
  .action-preview .container { padding-inline: 18px; }
  .guide-main { padding-top: 27px; padding-bottom: 40px; }
  .guide-intro { padding-bottom: 22px; }
  .guide-intro h1 { font-size: 1.68rem; }
  .mobile-break { display: initial; }
  .guide-intro .eyebrow { font-size: .78rem; }
  .intro-copy { font-size: .92rem; }
  .prototype-tag { font-size: .7rem; padding: 4px 9px; }
  .action-preview .finder { padding: 18px 14px 10px; border-radius: 15px; }
  .finder h2 { font-size: 1rem; }
  .scope-note { font-size: .875rem; line-height: 1.7; }
  .target-options { gap: 7px 6px; }
  .target-button { padding: 8px 10px; font-size: .875rem; gap: 5px; }
  .target-button .guide-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .action-options { gap: 7px; margin-top: 20px; }
  .action-button { position: relative; flex-direction: column; align-items: flex-start; min-height: 100px; padding: 12px 9px; gap: 4px; }
  .action-button > .guide-icon { width: 21px; height: 21px; flex-basis: 21px; }
  .action-label { line-height: 1.5; font-size: .83rem; margin-top: 3px; }
  .action-label span { display: block; }
  .action-count { position: absolute; top: 12px; right: 9px; font-size: 1.35rem; }
  .filter-status p { font-size: .8rem; }
  .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .action-preview .card-group { padding-top: 26px; }
  .card-group h2 { font-size: 1.05rem; }
  .guide-card { padding: 18px; border-radius: 14px; }
  .guide-card h3 { font-size: 1.08rem; }
  .card-scope { font-size: .9rem; }
  .next-step { padding: 10px 11px; font-size: .89rem; }
  .other-news { padding-inline: 16px; }
  .original-day { padding: 20px 12px; }
  .original-day a { font-size: .88rem; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .action-preview button { transition: none; }
}
/* A category with no cards shows "まだありません" instead of "0". */
.target-empty { font-size: .72rem; font-weight: 600; color: #506b7d; background: #eef4f8; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.target-button[aria-pressed="true"] .target-empty { color: #165a82; background: #fff; }
.action-count.is-empty { font-size: .78rem; font-weight: 650; color: #506b7d; white-space: nowrap; }
@media (max-width: 640px) {
  .action-count.is-empty { position: static; margin: 2px 0 0; font-size: .72rem; }
}