/* MarkNext 紹介ページ専用の意匠。共有の style.css は触らない。
   marknext.html / marknext-details.html / marknext-barcode.html /
   marknext-wavedrom.html だけが読む。 */

/* ---- product head (icon + title) ---- */
.hero-head{display:flex;gap:28px;align-items:center}
.hero-head .app-icon{width:132px;height:132px;flex:0 0 auto;border-radius:22%;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.hero h1.product{font-size:3.6rem;line-height:1.1;margin:2px 0 10px;letter-spacing:.01em}
.hero .tagline{font-size:1.45rem;font-weight:800;color:#fff;margin:0;line-height:1.5}
.hero .note-line{margin-top:22px;padding:14px 16px;border-left:3px solid var(--bronze);background:rgba(255,255,255,.06);color:#e6e0d3;font-size:.95rem;border-radius:0 8px 8px 0}
@media(max-width:820px){.hero h1.product{font-size:2.6rem}.hero .tagline{font-size:1.2rem}}
@media(max-width:560px){.hero-head{flex-direction:column;gap:14px;align-items:flex-start}.hero-head .app-icon{width:88px;height:88px}.hero h1.product{font-size:2.2rem}}

/* ---- the one sentence a page turns on ---- */
.axis{margin:20px 0 0;padding:16px 18px;border-left:4px solid var(--bronze);background:var(--card);
  border-radius:0 var(--radius) var(--radius) 0;font-size:1.05rem;font-weight:700;line-height:1.9}

/* ---- screenshots ---- */
figure.shot{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
figure.shot figcaption{margin-top:10px;font-size:.9rem;color:var(--muted);line-height:1.7}
.shot-pair{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:820px){.shot-pair{grid-template-columns:1fr}}

/* ---- notation examples ----
   The notation pages show the markup itself. It has to survive a narrow window
   without pushing the page sideways, so it scrolls inside its own box. */
pre.snippet{margin:14px 0;padding:14px 16px;background:#fbf8f2;border:1px solid var(--line);
  border-radius:var(--radius);overflow-x:auto;line-height:1.75;
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace;font-size:.86rem;color:#3a3226}

/* ---- drawn samples (barcodes, waveforms) ----
   These are SVG with no background of their own; a symbol has to sit on white
   to be read by a scanner or by a person. */
.code-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:16px;align-items:start}
@media(max-width:820px){.code-grid{grid-template-columns:1fr}}
figure.code-sample{margin:16px 0 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px}
figure.code-sample img{display:block;width:auto;max-width:100%;height:auto;max-height:280px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px}
figure.code-sample.wide img{width:100%;max-height:none}
figure.code-sample figcaption{margin-top:10px;font-size:.9rem;color:var(--muted);line-height:1.7}

/* ---- questions and answers ---- */
dl.faq{margin:16px 0 0}
dl.faq dt{margin-top:18px;font-weight:800;line-height:1.7}
dl.faq dd{margin:6px 0 0;padding-left:0;line-height:1.9}

/* ---- printing ----
   The browser's own header and footer (date, file path, page numbers) are a
   setting in its print dialog, not something a stylesheet can reach: untick
   "ヘッダーとフッター" there. What is here is the rest — the navigation and the
   dark bands are screen furniture, and a figure cut across two pages is worse
   than a page break before it. */
@media print{
  header.site,footer.site,.cta-band{display:none}
  body{background:#fff;color:#000}
  .section{padding:18px 0;break-inside:avoid}
  .alt,.dark-sec{background:#fff;color:#000}
  .dark-sec h2,.dark-sec .muted{color:#000}
  .hero{background:#fff;color:#000;border-bottom:2px solid var(--bronze)}
  .hero h1,.hero .tagline{color:#000}
  .hero .sub,.hero .note-line{color:#222;background:none}
  figure.shot,figure.code-sample{break-inside:avoid;border-color:#bbb}
  figure.shot img,figure.code-sample img{border-color:#bbb}
  pre.snippet,dl.faq dt{break-inside:avoid}
  .card,.boxed,.note,.doc{break-inside:avoid}
  a{color:#000;text-decoration:none}
}