/* LR Appli — Modernist site stylesheet.
   Written from the Modernist design system against the site's existing class
   names, so the pages' markup is untouched. This file replaces the old
   assets/style.css entirely: flat surfaces, zero radius, 2px rules, the brand
   orange kept as the accent and the original ink as the text color.
   Variable NAMES match the old sheet so each page's page-local <style> block
   keeps working unchanged. */

:root {
  /* brand, inherited from the original site */
  --accent: #ED8B00;       /* graphic orange: marks, squares, dial */
  --accent-ink: #A85B06;   /* orange as readable text */
  --accent-btn: #C2660A;   /* orange as a button fill */
  --accent-soft: rgba(237, 139, 0, 0.10);
  --accent-line: rgba(237, 139, 0, 0.35);

  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --panel: #ffffff;
  --ink: #0e1622;          /* the instrument-panel dark */
  --text: #131c2b;
  --text-dim: rgba(19, 28, 43, 0.78);
  --text-faint: rgba(19, 28, 43, 0.55);
  --border: rgba(19, 28, 43, 0.20);
  --border-strong: rgba(19, 28, 43, 0.42);

  --radius: 0px;
  --maxw: 1040px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 18px 46px rgba(14, 22, 34, 0.28);

  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Archivo, 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1.85;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-btn); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
img { display: block; max-width: 100%; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 19px; letter-spacing: -0.01em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
/* the original's period, redrawn as the system's square mark */
.brand .dot {
  width: 9px; height: 9px; background: var(--accent);
  font-size: 0; line-height: 0; overflow: hidden;
}
.header-right { display: flex; align-items: center; gap: 20px; }
.nav { display: flex; gap: clamp(14px, 2vw, 26px); font-size: 13.5px; }
.nav a { color: var(--text-dim); }
.nav a:hover { color: var(--text); text-decoration: none; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 0;
  background: transparent; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; margin: 0 auto;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lang-switch { display: flex; border: 1px solid var(--border); }
.lang-switch button {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; padding: 7px 12px;
  color: var(--text-dim); background: transparent;
  border: 0; border-radius: 0; cursor: pointer;
}
.lang-switch button + button { border-left: 1px solid var(--border); }
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--text); color: #ffffff; }

/* ---------- Sections ---------- */
section, section.container { padding-block: clamp(40px, 5vw, 76px) clamp(28px, 3vw, 48px); }
section + section { border-top: 2px solid var(--border); }

.section-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 26px; padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.section-title::before { content: ""; width: 13px; height: 13px; flex: none; background: var(--accent); }
.section-lead { margin: -8px 0 24px; color: var(--text-dim); font-size: 15px; }

/* ---------- Long-form pages ---------- */
.article { padding-block: clamp(36px, 4vw, 64px) clamp(48px, 5vw, 84px); }
.article h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 14px; }
.article .updated {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em;
  color: var(--text-faint);
  margin: 0 0 40px; padding-bottom: 22px;
  border-bottom: 2px solid var(--border);
}
.article h2 {
  font-size: 21px; margin: 44px 0 14px;
  border-top: 2px solid var(--border); padding-top: 30px;
}
.article h2:first-of-type { border-top: 0; padding-top: 0; }
.article h3 { font-size: 17px; margin: 28px 0 10px; }
.article p, .article li { color: var(--text-dim); }
.article ul { padding-left: 20px; }
.article li { margin-bottom: 8px; }
.article strong { color: var(--text); }

.note {
  background: transparent;
  border: 0; border-left: 2px solid var(--accent);
  padding: 2px 0 2px 18px;
  margin: 26px 0;
  font-size: 14.5px;
}
.placeholder { color: var(--accent-ink); background: var(--accent-soft); padding: 0 4px; }

.legal-dl { margin: 32px 0; border-top: 2px solid var(--border); }
.legal-dl dt {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--text);
  padding: 16px 0 6px;
}
.legal-dl dd { margin: 0; padding: 0 0 16px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
@media (min-width: 640px) {
  .legal-dl { display: grid; grid-template-columns: 220px 1fr; }
  .legal-dl dt { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--border); }
  .legal-dl dd { padding: 16px 0; }
}

.steps { padding-left: 20px; }
.steps li { margin-bottom: 10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 0;
  font-family: inherit; font-weight: 800; font-size: 14.5px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
button.btn { border: 0; }
.btn-primary { background: var(--accent-btn); color: #ffffff; }
.btn-primary:hover { background: var(--accent-ink); color: #ffffff; text-decoration: none; }
.btn-ghost { border: 1px solid var(--text); color: var(--text); background: transparent; }
.btn-ghost:hover { background: rgba(19, 28, 43, 0.06); color: var(--text); text-decoration: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Cards / cells ---------- */
.app-card {
  display: flex; gap: 24px; align-items: flex-start;
  border: 2px solid var(--border); padding: 28px;
  background: var(--panel);
}
.app-icon {
  width: 76px; height: 76px; flex: 0 0 auto;
  background: linear-gradient(160deg, #21303f, var(--ink));
  border: 1px solid var(--accent-line);
  display: grid; place-items: center;
  font-weight: 800; font-size: 26px; color: var(--accent);
}
.app-card h3 { margin: 0 0 6px; font-size: 26px; }
.app-sub {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}
.app-card p { margin: 0; color: var(--text-dim); font-size: 15.5px; }
.app-card .app-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; }
.app-extra { margin: 10px 0 0; font-size: 13.5px; color: var(--text-faint); }

.status-pill, .badge, .shot .paid {
  display: inline-block;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 0;
}
.status-pill { background: var(--accent); color: var(--ink); }
.badge { color: var(--text-faint); background: transparent; border: 1px solid var(--border); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.feature { padding: 30px 0 12px; border-top: 2px solid var(--border); background: transparent; }
.feature h4 { margin: 0 0 10px; font-size: 21px; line-height: 1.45; }
.feature p { margin: 0; color: var(--text-dim); font-size: 15px; }
.feature-icon {
  width: 38px; height: 38px; margin-bottom: 14px;
  display: grid; place-items: center;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.feature-icon svg { width: 20px; height: 20px; }

.cta { border: 2px solid var(--border); background: transparent; padding: 40px 28px; }
.cta h3 { margin: 0 0 10px; font-size: clamp(19px, 3vw, 24px); }
.cta p { margin: 0 0 24px; max-width: 56ch; color: var(--text-dim); font-size: 15px; }

/* ---------- Screenshots ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; margin-top: 28px; }
.shot { margin: 0; }
.shot img {
  width: 100%; height: auto;
  background: var(--ink); border: 1px solid rgba(19, 28, 43, 0.32); padding: 6px;
}
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.shot .paid { margin-top: 6px; color: var(--accent-ink); background: transparent; border: 1px solid var(--accent-line); padding: 2px 9px; font-size: 10.5px; }
.shots-note, .call-note, .support-note {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  letter-spacing: 0.04em; color: var(--text-faint);
}
.shots-note { margin: 20px 0 0; }

.bell-clip { margin: 28px 0 0; max-width: 320px; }
.bell-clip video { width: 100%; height: auto; border: 1px solid var(--accent-line); padding: 8px; background: var(--ink); }
.bell-clip figcaption { margin-top: 10px; font-size: 13px; color: var(--text-dim); }

/* ---------- Lightbox ---------- */
.shot-zoom { cursor: zoom-in; }
.shot-zoom:focus { outline: none; }
.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: rgba(14, 22, 34, 0.94);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(14, 22, 34, 0.94); }
body.lightbox-open { overflow: hidden; }
.lightbox-figure {
  margin: 0; height: 100%; padding: 56px 20px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.lightbox-img { max-width: min(100%, 480px); max-height: calc(100vh - 132px); width: auto; height: auto; }
.lightbox-caption { color: #fff; font-size: 14px; line-height: 1.6; text-align: center; }
.lightbox .paid {
  display: inline-block; margin-left: 6px; padding: 2px 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: transparent; border: 1px solid var(--accent-line);
}
.lightbox-close, .lightbox-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  padding: 0; color: #fff; line-height: 1; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 0;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 24px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 28px; }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-nav[hidden] { display: none; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; }
.faq-group { margin: 32px 0 12px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.faq-group:first-of-type { margin-top: 0; }
.faq-item { background: transparent; border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 2px solid var(--border); }
.faq-item summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 18px 48px 18px 24px;
  font-weight: 800; font-size: 16.5px; line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item summary::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; background: var(--accent);
}
.faq-item summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item .faq-body { padding: 0 0 22px 24px; color: var(--text-dim); font-size: 15px; }
.faq-item .faq-body p { margin: 0 0 10px; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Contact strip ---------- */
.contact-strip {
  border-top: 2px solid var(--border);
  margin-top: 8px; padding-top: 32px;
  text-align: left;
}
.contact-strip p { margin: 0 0 18px; max-width: 62ch; color: var(--text-dim); font-size: 15px; }

/* ---------- Forms ---------- */
.contact-box { border: 2px solid var(--border); padding: clamp(22px, 3vw, 36px); margin-top: 24px; background: transparent; }
.contact-box .label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.contact-box .value { font-size: 17px; margin: 4px 0 22px; }

.field { margin-bottom: 22px; }
.field label {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.field .req { color: #c0392b; margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border-strong); border-radius: 0;
  color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.6;
  padding: 12px 14px;
}
.field textarea { resize: vertical; min-height: 160px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field .hint { font-size: 12.5px; color: var(--text-faint); margin-top: 7px; }

.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; border-top: 2px solid var(--border); padding-top: 22px; }
.form-actions .btn { border: none; cursor: pointer; font-family: inherit; }
.form-actions .btn[disabled] { opacity: 0.45; cursor: default; }

.form-status { display: none; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; margin-top: 20px; padding: 14px 16px; }
.form-status.is-visible { display: block; }
.form-status.is-ok { background: transparent; border-left: 2px solid #17603a; color: #17603a; }
.form-status.is-error { background: transparent; border-left: 2px solid #a02c22; color: #a02c22; }

/* ---------- Roster builder ---------- */
.roster-tool { margin: 28px 0 8px; padding: clamp(18px, 2.4vw, 28px); border: 2px solid var(--border); background: transparent; }
.roster-tool .field { max-width: 320px; }
.roster-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.roster-table th {
  text-align: left; padding: 0 8px 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
  border-bottom: 2px solid var(--border);
}
.roster-table td { padding: 5px 8px 5px 0; vertical-align: middle; }
.roster-table td:first-child, .roster-table th:first-child { padding-left: 0; }
.roster-table .r-idx { width: 28px; font-family: var(--mono); font-size: 12px; color: var(--text-faint); text-align: right; padding-right: 8px; }
.roster-table input, .roster-table select {
  width: 100%; padding: 9px 10px; font: inherit; font-size: 15px;
  color: var(--text); background: #ffffff;
  border: 1px solid var(--border-strong); border-radius: 0;
}
.roster-table input:focus, .roster-table select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.roster-table .r-no { width: 72px; }
.roster-table .r-pos { width: 92px; }
.roster-table td:last-child { width: 32px; }
.r-del {
  width: 28px; height: 28px; padding: 0;
  font-size: 17px; line-height: 1; color: var(--text-faint);
  background: none; border: 1px solid transparent; border-radius: 0; cursor: pointer;
}
.r-del:hover { color: #c0392b; border-color: var(--border-strong); }

.roster-status { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-dim); }
.roster-hint { color: var(--text-faint); }
.roster-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.qr-out { margin-top: 26px; padding-top: 24px; border-top: 2px solid var(--border); }
.qr-lead { margin: 0 0 16px; font-size: 14.5px; color: var(--text-dim); }
.qr-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.qr-item { margin: 0; padding: 10px; background: #fff; border: 1px solid var(--border); }
.qr-item canvas { display: block; max-width: 100%; height: auto; }
.qr-item figcaption { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-faint); text-align: center; }
.qr-warn { margin: 18px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--text-dim); }
.qr-warn-strong { padding: 14px 16px; color: var(--text); background: var(--accent-soft); border-left: 2px solid var(--accent); }
.qr-warn-save { margin-top: 10px; padding: 10px 18px; font-size: 14px; }

/* ---------- Ramen call tool ---------- */
.call-label { font-family: var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); }

/* ---------- Footer ---------- */
.site-footer { background: #ffffff; border-top: 2px solid var(--border); padding: 32px 0 44px; margin-top: 40px; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; }
.site-footer .foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.site-footer .foot-nav a { color: var(--text-dim); }
.copyright { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--text-faint); }
.site-footer .trademark {
  flex-basis: 100%; margin: 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  letter-spacing: 0.04em; color: var(--text-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .header-right { gap: 10px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 6px 0;
    background: var(--bg); border-bottom: 2px solid var(--border);
  }
  .nav-open .nav { display: flex; }
  .nav a { padding: 13px clamp(20px, 5vw, 72px); font-size: 15px; color: var(--text); }
}
@media (max-width: 560px) {
  .site-footer .container { flex-direction: column; align-items: flex-start; }
  .site-footer .foot-nav { flex-direction: column; gap: 14px; }
  .app-card { flex-direction: column; }
  .shots { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .roster-table .r-no { width: 56px; }
  .roster-table .r-pos { width: 74px; }
  .roster-actions .btn { flex: 1 1 calc(50% - 5px); }
}