/* =============================================================================
   SOPLite — app-specific styles (layered over base.css)
   accent: cyan / 教育・明快
   ========================================================================== */
:root {
  --accent: 191 91% 40%;
  --accent-strong: 191 90% 33%;
  --accent-soft: 191 75% 94%;
  --accent-ink: 0 0% 100%;
  --accent-ring: 191 91% 40% / 0.35;
}
[data-theme="dark"] { --accent-soft: 191 55% 15%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent-soft: 191 55% 15%; }
}

/* ---- Landing ----------------------------------------------------------- */
.lp-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--surface) / 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.lp-nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lp-links { display: flex; align-items: center; gap: var(--s-5); }
.lp-links a { font-size: var(--text-md); font-weight: 530; color: hsl(var(--ink-2)); transition: color var(--dur-2) var(--ease); }
.lp-links a:hover { color: hsl(var(--ink)); }
@media (max-width: 720px) { .lp-links .lp-link-hide { display: none; } }

.hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 82% -5%, hsl(var(--accent) / 0.12), transparent 60%),
    radial-gradient(50% 60% at 8% 8%, hsl(var(--accent) / 0.07), transparent 62%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; } }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 720; letter-spacing: -0.03em; line-height: 1.08; }
.hero h1 .hl { color: hsl(var(--accent-strong)); }

/* phone mockup */
.phone {
  width: min(300px, 80%); margin-inline: auto;
  aspect-ratio: 9 / 18.2; border-radius: 34px; padding: 12px;
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border-strong));
  box-shadow: var(--shadow-xl);
}
.phone-screen {
  height: 100%; border-radius: 24px; overflow: hidden;
  background: hsl(var(--bg-subtle)); border: 1px solid hsl(var(--border));
  display: flex; flex-direction: column;
}
.phone-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--surface)); }
.phone-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--border-strong)); }
.phone-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mini-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r-md); background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-xs); }
.mini-step.done { border-color: hsl(var(--green) / 0.4); background: hsl(var(--green-soft)); }
[data-theme="dark"] .mini-step.done { background: hsl(152 40% 14%); }
.mini-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; background: hsl(var(--accent-soft)); color: hsl(var(--accent-strong)); }
.mini-step.done .mini-num { background: hsl(var(--green)); color: #fff; }
.mini-line { height: 9px; border-radius: 5px; background: hsl(var(--bg-muted)); }

.logo-strip { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; opacity: 0.9; }
.logo-strip .lc { font-weight: 620; color: hsl(var(--ink-3)); letter-spacing: -0.01em; font-size: var(--text-md); display: inline-flex; align-items: center; gap: 8px; }
.logo-strip .lc svg { width: 18px; height: 18px; color: hsl(var(--ink-4)); }

.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-head { max-width: 640px; margin-bottom: var(--s-8); }

.feature-card { padding: var(--s-6); height: 100%; }
.feature-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: hsl(var(--accent-soft)); color: hsl(var(--accent-strong)); margin-bottom: var(--s-4); }
.feature-ico svg { width: 22px; height: 22px; }

.step-flow { counter-reset: f; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 820px) { .step-flow { grid-template-columns: 1fr; } }
.flow-item { position: relative; padding-left: var(--s-10); }
.flow-item::before {
  counter-increment: f; content: counter(f);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: var(--text-md);
  background: hsl(var(--accent)); color: hsl(var(--accent-ink));
}

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.price-card { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.price-card.featured { border-color: hsl(var(--accent) / 0.5); box-shadow: var(--shadow-lg); position: relative; }
.price-amount { font-size: var(--text-4xl); font-weight: 720; letter-spacing: -0.02em; }
.price-amount small { font-size: var(--text-md); font-weight: 500; color: hsl(var(--ink-3)); }
.price-feats { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
.price-feats li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--text-md); color: hsl(var(--ink-2)); }
.price-feats svg { width: 18px; height: 18px; flex: none; color: hsl(var(--accent-strong)); margin-top: 1px; }

.lp-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--surface)); padding: var(--s-12) 0 var(--s-8); margin-top: var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.footer-col h4 { font-size: var(--text-sm); color: hsl(var(--ink-3)); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s-3); font-weight: 650; }
.footer-col a { display: block; font-size: var(--text-md); color: hsl(var(--ink-2)); padding: 3px 0; transition: color var(--dur-2) var(--ease); }
.footer-col a:hover { color: hsl(var(--ink)); }

/* ---- App-specific ------------------------------------------------------ */
.theme-toggle svg { width: 18px; height: 18px; }

/* SOP / step editor */
.step-editor-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid hsl(var(--border)); border-radius: var(--r-lg); overflow: hidden;
  background: hsl(var(--surface));
}
@media (max-width: 760px) { .step-editor-row { grid-template-columns: 1fr; } }
.step-side { padding: var(--s-4); }
.step-side + .step-side { border-left: 1px solid hsl(var(--border)); }
@media (max-width: 760px) { .step-side + .step-side { border-left: none; border-top: 1px solid hsl(var(--border)); } }
.step-side-head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--ink-3)); margin-bottom: var(--s-3); }
.step-side.source { background: hsl(var(--bg-subtle)); }

.media-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  background: hsl(var(--bg-muted)); display: grid; place-items: center; color: hsl(var(--ink-4));
  border: 1px solid hsl(var(--border));
}
.media-thumb svg { width: 30px; height: 30px; }
.media-thumb.has-photo { background: linear-gradient(135deg, hsl(var(--accent) / 0.14), hsl(var(--accent) / 0.04)); color: hsl(var(--accent-strong)); }

.warn-box {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3); border-radius: var(--r-md);
  background: hsl(var(--amber-soft)); color: hsl(38 80% 30%);
  font-size: var(--text-sm); line-height: 1.5; border: 1px solid hsl(var(--amber) / 0.25);
}
[data-theme="dark"] .warn-box { background: hsl(38 50% 14%); color: hsl(40 85% 66%); }
.warn-box svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.privacy-note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-md);
  background: hsl(var(--accent-soft)); border: 1px solid hsl(var(--accent) / 0.2);
  font-size: var(--text-md); line-height: 1.55; color: hsl(var(--accent-strong));
}
.privacy-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* learner step viewer */
.learn-stepper { display: flex; gap: 6px; flex-wrap: wrap; }
.learn-pip {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: 650; cursor: pointer;
  background: hsl(var(--bg-muted)); color: hsl(var(--ink-3)); border: 1px solid hsl(var(--border));
  transition: all var(--dur-2) var(--ease);
}
.learn-pip:hover { border-color: hsl(var(--accent)); color: hsl(var(--ink)); }
.learn-pip.current { background: hsl(var(--accent)); color: hsl(var(--accent-ink)); border-color: hsl(var(--accent)); }
.learn-pip.visited { background: hsl(var(--green-soft)); color: hsl(var(--green)); border-color: hsl(var(--green) / 0.4); }
.learn-pip.current.visited { background: hsl(var(--accent)); color: hsl(var(--accent-ink)); }

.learn-card { padding: clamp(var(--s-5), 4vw, var(--s-8)); }
.learn-big-num {
  width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center;
  font-size: var(--text-2xl); font-weight: 720; background: hsl(var(--accent-soft)); color: hsl(var(--accent-strong));
}
.learn-instruction { font-size: var(--text-xl); line-height: 1.5; font-weight: 500; }

/* quiz */
.quiz-option {
  display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4);
  border: 1.5px solid hsl(var(--border-strong)); border-radius: var(--r-md);
  cursor: pointer; transition: all var(--dur-2) var(--ease); background: hsl(var(--surface)); width: 100%; text-align: left;
}
.quiz-option:hover { border-color: hsl(var(--accent)); }
.quiz-option.selected { border-color: hsl(var(--accent)); background: hsl(var(--accent-soft)); }
.quiz-option.correct { border-color: hsl(var(--green)); background: hsl(var(--green-soft)); }
.quiz-option.wrong { border-color: hsl(var(--red)); background: hsl(var(--red-soft)); }
.quiz-option .opt-key { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: var(--text-sm); background: hsl(var(--bg-muted)); color: hsl(var(--ink-2)); }
.quiz-option.selected .opt-key { background: hsl(var(--accent)); color: hsl(var(--accent-ink)); }
.quiz-option.correct .opt-key { background: hsl(var(--green)); color: #fff; }
.quiz-option.wrong .opt-key { background: hsl(var(--red)); color: #fff; }

/* ask-sop chat */
.chat-log { display: flex; flex-direction: column; gap: var(--s-4); }
.chat-msg { display: flex; gap: var(--s-3); max-width: 100%; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-bubble { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); font-size: var(--text-md); line-height: 1.55; max-width: 80%; }
.chat-msg.bot .chat-bubble { background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); }
.chat-msg.user .chat-bubble { background: hsl(var(--accent)); color: hsl(var(--accent-ink)); }
.cite-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2);
  font-size: var(--text-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-full);
  background: hsl(var(--accent-soft)); color: hsl(var(--accent-strong)); border: 1px solid hsl(var(--accent) / 0.3);
  cursor: pointer; transition: all var(--dur-2) var(--ease);
}
.cite-chip:hover { filter: brightness(0.97); border-color: hsl(var(--accent)); }
.cite-chip svg { width: 13px; height: 13px; }

/* sop list cards */
.sop-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); height: 100%; }
.sop-card .sop-cat { display: inline-flex; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }

.upload-zone {
  border: 2px dashed hsl(var(--border-strong)); border-radius: var(--r-lg);
  padding: var(--s-8); text-align: center; color: hsl(var(--ink-3));
  transition: all var(--dur-2) var(--ease); cursor: pointer; background: hsl(var(--bg-subtle));
}
.upload-zone:hover, .upload-zone.drag { border-color: hsl(var(--accent)); background: hsl(var(--accent-soft)); color: hsl(var(--accent-strong)); }
.upload-zone svg { width: 32px; height: 32px; margin: 0 auto var(--s-2); }

.menu-list { display: flex; flex-direction: column; gap: var(--s-1); }

/* version timeline */
.ver-row { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid hsl(var(--border)); }
.ver-row:last-child { border-bottom: none; }
.ver-badge { flex: none; }

.segmented.full { display: flex; width: 100%; }
.segmented.full button { flex: 1; }

.list-reorder-btn { color: hsl(var(--ink-4)); }
.list-reorder-btn:hover { color: hsl(var(--accent-strong)); }

/* progress ring helper */
.ring-wrap { position: relative; width: 96px; height: 96px; }
.ring-wrap .ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 720; font-size: var(--text-lg); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nowrap { white-space: nowrap; }

.assignment-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid hsl(var(--border)); }
.assignment-row:last-child { border-bottom: none; }

.dot-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--green)); box-shadow: 0 0 0 0 hsl(var(--green) / 0.5); animation: dotp 1.8s infinite; }
@keyframes dotp { 0% { box-shadow: 0 0 0 0 hsl(var(--green) / 0.5); } 70% { box-shadow: 0 0 0 8px hsl(var(--green) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--green) / 0); } }

.menu-toggle { display: none; }
@media (max-width: 880px) { .menu-toggle { display: inline-flex; } }

/* topbar responsive: keep within 360px without horizontal scroll */
.topbar-back-icon { display: none; }
@media (max-width: 540px) {
  .topbar-label { display: none; }
  .topbar-back .topbar-back-text { display: none; }
  .topbar-back .topbar-back-icon { display: inline-flex; }
}