/* 製品ページ（views/product.ejs）。2026-10 Claude Design 案に合わせた型。
   色は common.css のトークンだけを使う（ダークモードで反転するため）。
   塗りの上の文字は var(--white)（ライトでは白、ダークでは濃紺）にする。 */

.pd { background: var(--off-white); color: var(--text-primary); }
.pd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.pd-narrow { max-width: 880px; }
.pd-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero */
.pd-hero { background: var(--white); border-bottom: 1px solid var(--line); padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.breadcrumb + .pd-hero { padding-top: clamp(1rem, 3vw, 2rem); }
.pd-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.pd-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.3; font-weight: 700; color: var(--navy-deep); margin: 0 0 1rem; text-wrap: balance; word-break: auto-phrase; }
.pd-lead { font-size: clamp(1.02rem, 1.7vw, 1.15rem); line-height: 1.9; color: var(--text-secondary); max-width: 760px; margin: 0; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.pd-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.9rem; }
.pd-toc a { color: var(--text-secondary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pd-toc a:hover { color: var(--navy-deep); }

/* Buttons */

/* Sections */
.pd-section { padding: clamp(3rem, 7vw, 5rem) 0 0; }
.pd-section:last-of-type { padding-bottom: clamp(3rem, 7vw, 5rem); }
.pd-section-tight { padding-top: clamp(2rem, 4vw, 3rem); }
.pd-band { background: var(--navy-tint); margin-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.pd-h3 { font-size: 1.15rem; color: var(--navy-deep); margin: 0 0 1rem; }
.pd-note { color: var(--text-secondary); font-size: 0.9rem; margin: 1.2rem 0 0; max-width: 820px; line-height: 1.8; }
.pd-intro .prose > :first-child { margin-top: 0; }

/* Demo */
.pd-demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.2rem; }
.pd-demo-status { font-size: 0.9rem; color: var(--text-secondary); }
.pd-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.pd-panel { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pd-panel-head { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.8rem 1.1rem; font-weight: 700; font-size: 0.92rem; border-bottom: 1px solid var(--line); }
.pd-tint-navy { background: var(--navy-tint); color: var(--navy-deep); }
.pd-tint-mint { background: var(--mint-tint); color: var(--mint-deep); }
.pd-panel-note { font-weight: 400; font-size: 0.8rem; color: var(--text-secondary); }
.pd-lines { list-style: none; margin: 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 22rem; }
.pd-lines li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.92rem; line-height: 1.7; animation: pd-in 0.35s ease-out; }
.pd-lines li.pd-lines-empty { display: block; margin: auto; text-align: center; color: var(--text-light); animation: none; }
.pd-who { font-size: 0.78rem; font-weight: 700; text-align: center; border-radius: 6px; padding: 0.15rem 0.3rem; }
.pd-who[data-tone="navy"] { background: var(--navy-tint); color: var(--navy-deep); }
.pd-who[data-tone="lavender"] { background: var(--lavender-tint); color: var(--lavender-deep); }
.pd-who[data-tone="mint"] { background: var(--mint-tint); color: var(--mint-deep); }
.pd-record { margin: 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.pd-record-row { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.7rem; }
.pd-record-row.is-pending dd { color: var(--text-light); }
.pd-record dt { font-family: 'DM Sans', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 0.95rem; }
.pd-record dt[data-tone="mint"] { color: var(--mint-deep); }
.pd-record dt[data-tone="lavender"] { color: var(--lavender-deep); }
.pd-record dt[data-tone="navy"] { color: var(--navy-deep); }
.pd-record dd { margin: 0; font-size: 0.92rem; line-height: 1.75; white-space: pre-line; }
.pd-panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-secondary); }
.pd-done { font-weight: 700; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--navy-tint); color: var(--text-secondary); transition: background 0.3s, color 0.3s; }
.pd-done.is-on { background: var(--mint-deep); color: var(--white); }
@keyframes pd-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pd-lines li { animation: none; } .pd-record-row, .pd-done { transition: none; } }

/* Structure */
.pd-zones { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; }
.pd-zones-single { grid-template-columns: minmax(0, 1fr); }
.pd-zone { border: 2px dashed var(--mint-deep); border-radius: 20px; padding: 1.4rem; background: var(--white); }
.pd-zone-label { margin: 0 0 1rem; font-size: 0.85rem; font-weight: 700; color: var(--mint-deep); }
.pd-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0.7rem; counter-reset: none; }
.pd-flow-step { border-radius: 12px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; position: relative; }
.pd-flow-step[data-tone="mint"] { background: var(--mint-tint); }
.pd-flow-step[data-tone="lavender"] { background: var(--lavender-tint); }
.pd-flow-step[data-tone="navy"] { background: var(--navy-tint); }
.pd-flow-num { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
.pd-flow-title { font-weight: 700; color: var(--navy-deep); font-size: 0.95rem; line-height: 1.5; }
.pd-flow-text { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.65; }
.pd-chips { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pd-chips li { font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 8px; background: var(--navy-tint); color: var(--navy-deep); }
.pd-side { display: flex; flex-direction: column; gap: 0.9rem; }
.pd-side-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
.pd-side-title { font-weight: 700; font-size: 0.88rem; }
.pd-side-card[data-tone="navy"] .pd-side-title { color: var(--navy-deep); }
.pd-side-card[data-tone="lavender"] .pd-side-title { color: var(--lavender-deep); }
.pd-side-card[data-tone="mint"] .pd-side-title { color: var(--mint-deep); }

/* Tables */
.pd-table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 620px; }
.pd-table th, .pd-table td { text-align: left; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.7; }
.pd-table tbody tr:last-child th, .pd-table tbody tr:last-child td { border-bottom: none; }
.pd-table thead th { background: var(--off-white); font-weight: 700; color: var(--navy-deep); }
.pd-table tbody th { color: var(--navy-deep); font-weight: 700; width: 22%; }
.pd-table td { color: var(--text-secondary); }
.pd-table-2 tbody th { width: 30%; }
.pd-th-name { margin-right: 0.4rem; }

/* Cards */
.pd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pd-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.pd-card-title { font-weight: 700; color: var(--navy-deep); line-height: 1.5; }
.pd-card-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; }

/* Safety checks */
.pd-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.6rem; }
.pd-checks li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 0 0.9rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; }
.pd-checks li::before { content: ''; position: absolute; left: 0; top: 1.3rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--mint-deep); }
.pd-check-title { font-weight: 700; color: var(--navy-deep); }

/* Steps */
.pd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.pd-steps li { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
.pd-step-num { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--lavender-deep); }
.pd-step-title { font-weight: 700; color: var(--navy-deep); font-size: 1rem; }

/* Price */
.pd-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.pd-price { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.pd-price.is-highlight { border: 2px solid var(--mint-deep); }
.pd-price-label { font-size: 0.88rem; color: var(--text-secondary); }
.pd-price-value { font-family: 'DM Sans', 'Noto Sans JP', sans-serif; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--navy-deep); line-height: 1.3; }
.pd-price-value small { font-size: 0.5em; font-weight: 700; margin-left: 0.2rem; color: var(--text-secondary); }
.pd-price-note { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.7; }

/* Download */
.pd-download { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; background: var(--lavender-tint); border-radius: 20px; padding: 1.4rem 1.6rem; text-decoration: none; color: var(--text-secondary); }
.pd-download img { width: 96px; height: auto; border-radius: 4px; border: 1px solid var(--line); background: #FFFFFF; }
.pd-download-body { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; line-height: 1.7; }
.pd-download-title { font-weight: 700; font-size: 1.05rem; color: var(--navy-deep); }

/* FAQ */
.pd-faq { display: flex; flex-direction: column; gap: 0.7rem; }
.pd-faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0 1.2rem; }
.pd-faq-item summary { cursor: pointer; font-weight: 700; color: var(--navy-deep); padding: 1rem 0; min-height: 44px; list-style-position: outside; }
.pd-faq-item p { margin: 0 0 1rem; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.8; }

/* Related */
.pd-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; }
.pd-related-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.86rem; color: var(--text-secondary); }
.pd-related-card:hover { border-color: var(--mint-deep); }
.pd-related-title { font-weight: 700; color: var(--navy-deep); font-size: 0.95rem; }

/* CTA */
.pd-cta { background: var(--navy-deep); margin-top: clamp(3rem, 7vw, 5rem); }
.pd-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.pd-cta h2 { color: var(--white); font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0 0 0.4rem; }
.pd-cta p { color: var(--white); opacity: 0.92; margin: 0; max-width: 640px; }
.pd-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Responsive */
/* Screens */
.pd-video { margin: 0 0 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pd-video video { display: block; width: 100%; height: auto; background: var(--line); }
.pd-video figcaption, .pd-shot figcaption { padding: 0.75rem 1.1rem; font-size: 0.86rem; line-height: 1.7; color: var(--text-secondary); border-top: 1px solid var(--line); }
.pd-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.pd-shot { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pd-shot a { display: block; background: var(--line); }
.pd-shot img { display: block; width: 100%; height: auto; }
.pd-shot figcaption { display: flex; gap: 0.6rem; align-items: baseline; }
.pd-shot-n { flex: none; font-weight: 700; font-size: 0.78rem; color: var(--mint-deep); background: var(--mint-tint); border-radius: 999px; min-width: 1.5rem; text-align: center; padding: 0.05rem 0.4rem; }
.pd-shots-note { margin-top: 1rem; font-size: 0.82rem; color: var(--text-secondary); }
.pd-screens-steps { display: none; }

/* Wide enough for two columns: foldable inner screen, tablet, desktop */
@media (min-width: 700px) {
  .pd-screens { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
  .pd-screens-text { position: sticky; top: calc(5.5rem + env(safe-area-inset-top, 0px)); }
  .pd-screens-steps { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
  .pd-screens-steps button { width: 100%; display: flex; gap: 0.7rem; align-items: baseline; text-align: left; font: inherit; font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.9rem; cursor: pointer; }
  .pd-screens-steps button:hover { border-color: var(--mint-deep); color: var(--text); }
  .pd-screens-steps button[aria-pressed="true"] { border-color: var(--mint-deep); background: var(--mint-tint); color: var(--text); }
  .pd-screens-steps button:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 2px; }
  .pd-screens .pd-shots { grid-template-columns: minmax(0, 1fr); }
  /* With JS the right side shows one screen at a time and the caption lives on the left */
  .js-screens .pd-shot { display: none; }
  .js-screens .pd-shot.is-active { display: flex; }
  .js-screens .pd-shot figcaption { display: none; }
}

/* Foldable inner screen / small tablet: even split, tighter step cards */
@media (min-width: 700px) and (max-width: 1000px) {
  .pd-screens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-screens-steps button { font-size: 0.84rem; padding: 0.55rem 0.7rem; }
}

/* Dual-screen / foldable reporting two side-by-side segments: split at the hinge */
@media (horizontal-viewport-segments: 2) {
  .pd-screens {
    grid-template-columns: calc(env(viewport-segment-width 0 0) - 1.5rem) minmax(0, 1fr);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 3rem);
  }
}

@media (max-width: 1080px) {
  .pd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-zones { grid-template-columns: minmax(0, 1fr); }
  .pd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pd-demo-grid, .pd-shots, .pd-cards, .pd-steps, .pd-checks, .pd-flow { grid-template-columns: minmax(0, 1fr); }
  .pd-lines { min-height: 14rem; }
  .pd-download { grid-template-columns: 72px minmax(0, 1fr); }
  .pd-download img { width: 72px; }
  .pd-download .pd-btn { grid-column: 1 / -1; }
}
.pd ~ .breadcrumb, .pd .breadcrumb { background: var(--white); }