/*
 * 公開ページ（料金・認証・文書・動画・記事・エラー・決済完了）の presentation。
 * marketing_base.css の後に読み込む。body に .lp-page.mk-public を付ける。
 * 既存テンプレートの DOM・ID・課金/フォームの属性は変えず、Tailwind の色・面・影と
 * 共通ボタン（nm-button）の色変数を、公開ページの配色（紙・墨・藍・朱）へ読み替える。
 * 警告・成功などの状態色（赤・琥珀・緑）は意味を持つため読み替えない。
 */

/* ── 骨格 ─────────────────────────────── */
.mk-public {
  --nm-action-primary: #2443d6;
  --nm-action-primary-hover: #1a32a8;
  --nm-action-primary-active: #15298a;
  --nm-control-bg: transparent;
  --nm-control-border: rgba(26, 23, 18, 0.3);
  --nm-action-secondary-hover: rgba(26, 23, 18, 0.06);
  --nm-text: #1a1712;
  --nm-text-muted: #6b6457;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.mk-public > main,
.mk-public > #mk-main {
  flex: 1 0 auto;
  width: 100%;
}

/* 静的ヘッダー（LP以外は常に紙の地で上部に固定） */
.lp-header--static {
  position: sticky;
  top: 0;
  background: rgba(238, 234, 225, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--rule);
}
.mk-header__maps {
  display: none;
}
@media (min-width: 640px) {
  .mk-header__maps {
    display: inline-flex;
  }
}

.mk-billing-banner {
  padding: 10px var(--gutter);
  border-bottom: 1px solid;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}
.mk-billing-banner a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mk-billing-banner--danger {
  border-color: #f0b8ab;
  background: #fbe9e5;
  color: #7a1d0e;
}
.mk-billing-banner--warning {
  border-color: #e9cf8c;
  background: #f8eccb;
  color: #5e4100;
}

/* ── ページの頭（柱＋明朝の見出し） ─────────────── */
.mk-page-head {
  text-align: center;
}
.mk-page-head .lp-running-head {
  justify-content: center;
}
.mk-title {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.mk-title--md {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.mk-lead {
  max-width: 40em;
  margin: 20px auto 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 2;
  color: var(--ink-2);
}
.mk-eyebrow {
  margin: 0;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--shu-ink);
}

/* ── Tailwind の色・面・影の読み替え（公開ページ内のみ） ─────── */
.mk-public :where(h1, h2, h3, h4) {
  font-family: var(--serif);
  font-weight: 600;
  font-feature-settings: "palt";
}
.mk-public .bg-gray-50,
.mk-public .bg-slate-50,
.mk-public .bg-gray-100,
.mk-public .bg-slate-100 {
  background-color: var(--paper-2);
}
.mk-public .bg-white {
  background-color: var(--sheet);
}
.mk-public .text-gray-900,
.mk-public .text-slate-900,
.mk-public .text-slate-800 {
  color: var(--ink);
}
.mk-public .text-gray-800,
.mk-public .text-gray-700,
.mk-public .text-slate-700 {
  color: var(--ink-2);
}
.mk-public .text-gray-600,
.mk-public .text-gray-500,
.mk-public .text-gray-400,
.mk-public .text-slate-600,
.mk-public .text-slate-500,
.mk-public .text-slate-400 {
  color: var(--muted);
}
.mk-public .border,
.mk-public .border-t,
.mk-public .border-b,
.mk-public .border-gray-100,
.mk-public .border-gray-200,
.mk-public .border-gray-300,
.mk-public .border-slate-100,
.mk-public .border-slate-200 {
  border-color: var(--rule);
}
.mk-public .divide-gray-100 > *,
.mk-public .divide-gray-200 > *,
.mk-public .divide-slate-100 > * {
  border-color: var(--rule);
}
.mk-public .text-blue-600,
.mk-public .text-blue-700,
.mk-public .text-blue-800,
.mk-public .text-indigo-600,
.mk-public .text-indigo-700 {
  color: var(--ai);
}
.mk-public .text-blue-900,
.mk-public .text-blue-950 {
  color: #1b2a6b;
}
.mk-public .bg-blue-50,
.mk-public .bg-indigo-50 {
  background-color: #eceffb;
}
.mk-public .border-blue-200,
.mk-public .border-blue-300,
.mk-public .border-indigo-100,
.mk-public .border-indigo-200 {
  border-color: rgba(36, 67, 214, 0.25);
}
.mk-public .shadow,
.mk-public .shadow-sm,
.mk-public .shadow-md,
.mk-public .shadow-lg,
.mk-public .shadow-xl {
  box-shadow: 0 1px 0 rgba(26, 23, 18, 0.04), 0 30px 60px -44px rgba(26, 23, 18, 0.45);
}
.mk-public a.underline:hover,
.mk-public .hover\:text-blue-700:hover,
.mk-public .hover\:text-blue-600:hover {
  color: var(--ai-deep);
}

/* ── 共通ボタン・フォーム部品 ─────────────────────── */
.mk-public .nm-button {
  min-height: 48px;
  padding-inline: 24px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mk-public .nm-button--primary {
  box-shadow: 0 14px 30px -18px rgba(36, 67, 214, 0.8);
}
@media (hover: hover) {
  .mk-public .nm-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--ink);
    background-color: var(--ink);
    color: var(--paper);
  }
}
.mk-public .nm-button--tertiary {
  color: var(--ai);
}
.mk-public .nm-form-control,
.mk-public input[type="text"],
.mk-public input[type="email"],
.mk-public input[type="password"] {
  border-radius: 10px;
  border-color: var(--rule-strong);
  background-color: #fff;
}
.mk-public .nm-form-control:focus,
.mk-public input[type="text"]:focus,
.mk-public input[type="email"]:focus,
.mk-public input[type="password"]:focus {
  border-color: var(--ai);
  outline: 3px solid rgba(36, 67, 214, 0.2);
  outline-offset: 0;
}
.mk-public :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 3px;
}

/* ── 料金 ─────────────────────────────── */
.mk-pricing {
  padding-top: clamp(48px, 7vw, 96px) !important;
  padding-bottom: clamp(80px, 10vw, 140px) !important;
}
.mk-pricing .mk-page-head h1 {
  max-width: 18em;
  margin-inline: auto;
}
.mk-pricing .mk-free-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.mk-pricing .mk-free-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--shu);
}
.mk-value-card {
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  background: var(--sheet) !important;
  box-shadow: none !important;
}
.mk-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -44px rgba(26, 23, 18, 0.5) !important;
}
.mk-value-card > div[aria-hidden="true"] {
  background: transparent !important;
  border: 1px solid var(--rule-strong);
  color: var(--shu) !important;
}

.mk-plan {
  border: 1px solid var(--rule-strong) !important;
  border-radius: 16px !important;
  background: var(--sheet) !important;
  box-shadow: none !important;
}
.mk-plan--featured {
  border: 0 !important;
  background: var(--night) !important;
  color: var(--night-ink);
  box-shadow: 0 60px 100px -60px rgba(26, 23, 18, 0.85) !important;
}
.mk-plan--featured :is(.text-gray-500, .text-gray-600, .text-gray-700) {
  color: var(--night-muted);
}
.mk-plan--featured .text-blue-700 {
  color: var(--ai-light);
}
.mk-plan--featured li > span[class*="rounded-full"] {
  background: var(--ai-light) !important;
}
.mk-plan li > span[class*="rounded-full"] {
  background: var(--shu);
}
.mk-plan__badge {
  border-radius: 999px !important;
  background: var(--shu-ink) !important;
  font-family: var(--serif);
  font-weight: 600 !important;
  letter-spacing: 0.12em;
}
.mk-price {
  font-family: var(--latin);
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.mk-plan--featured .nm-button--primary {
  --nm-action-primary: #ece6da;
  --nm-action-primary-hover: #ffffff;
  --nm-action-primary-active: #ffffff;
  color: var(--ink);
  box-shadow: none;
}
.mk-plan--featured .nm-button--tertiary {
  color: var(--night-ink);
}
.mk-plan--featured .nm-button--tertiary:hover {
  color: var(--ink) !important;
}

.mk-panel {
  border: 1px solid var(--rule) !important;
  border-radius: 16px !important;
  background: var(--sheet) !important;
  box-shadow: none !important;
}
.mk-panel thead {
  background: var(--paper-2) !important;
}
.mk-panel .pricing-comparison-category {
  background: rgba(26, 23, 18, 0.03) !important;
}
.mk-panel .pricing-comparison-category th {
  font-family: var(--serif);
  letter-spacing: 0.08em;
  color: var(--ink) !important;
}
.mk-public .feature-help-link {
  border-color: rgba(36, 67, 214, 0.35);
  background-color: #eceffb;
  color: var(--ai);
}

.mk-faq-card {
  border: 1px solid var(--rule);
  border-radius: 14px !important;
  background: var(--sheet) !important;
  box-shadow: none !important;
}
.mk-faq-card > p:first-child {
  font-family: var(--serif);
  font-weight: 600 !important;
  color: var(--ink);
}

.mk-cta {
  border-radius: 20px !important;
  background: var(--night) !important;
  background-image: none !important;
  color: var(--night-ink) !important;
  box-shadow: 0 60px 100px -60px rgba(26, 23, 18, 0.85) !important;
}
.mk-cta h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
}
.mk-cta .text-blue-100 {
  color: var(--night-muted) !important;
}
.mk-cta .nm-button--primary {
  --nm-action-primary: #ece6da;
  --nm-action-primary-hover: #ffffff;
  --nm-action-primary-active: #ffffff;
  color: var(--ink) !important;
  box-shadow: none;
}
.mk-cta a.block {
  color: var(--night-muted) !important;
}

/* ── 文書（運営情報・規約・プライバシー・特商法） ─────── */
.mk-doc {
  max-width: 48rem !important;
  padding-top: clamp(56px, 8vw, 104px) !important;
  padding-bottom: clamp(80px, 10vw, 140px) !important;
}
.mk-doc .mk-page-head {
  margin-bottom: clamp(40px, 6vw, 72px) !important;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
}
.mk-doc .mk-page-head .lp-running-head {
  justify-content: flex-start;
}
.mk-doc p,
.mk-doc li,
.mk-doc dd,
.mk-doc td {
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--ink-2);
}
.mk-doc h2 {
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem) !important;
  line-height: 1.6;
  color: var(--ink);
}
.mk-doc h2::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--shu);
}
.mk-doc a {
  color: var(--ai);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mk-doc table,
.mk-doc dl {
  border-color: var(--rule) !important;
}
.mk-doc th,
.mk-doc dt {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}

/* ── 認証（登録・ログイン・パスワード再設定） ─────── */
.mk-auth > main {
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(64px, 10vw, 120px) !important;
}
.mk-auth-card {
  max-width: 30rem !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  background: var(--sheet) !important;
  box-shadow: 0 50px 90px -60px rgba(26, 23, 18, 0.6) !important;
}
.mk-auth-card h1 {
  font-size: clamp(1.6rem, 2.6vw, 2rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}
.mk-auth-card .mk-eyebrow {
  margin-bottom: 10px;
  text-align: center;
}
.mk-auth-card label {
  color: var(--ink-2);
}
.mk-auth-card a:not(.nm-button) {
  color: var(--ai);
}

/* ── エラー・メンテナンス・決済完了 ─────────────── */
.mk-status-page > main {
  display: grid;
  place-items: center;
  padding: clamp(64px, 10vw, 140px) var(--gutter) !important;
}
.mk-status-card {
  max-width: 36rem;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  background: var(--sheet) !important;
  box-shadow: 0 50px 90px -60px rgba(26, 23, 18, 0.6);
  text-align: center;
}
.mk-status-card h1,
.mk-status-card .text-xl {
  font-family: var(--serif);
  font-weight: 600;
}
.mk-status-card .lp-running-head {
  justify-content: center;
}

/* ── 動画・記事（記事本文の組版は article.css が担当） ─────── */
.mk-header-icon:hover {
  background: var(--paper-2);
}
.mk-public.nm-video-library,
.mk-public.mk-editorial {
  background: var(--paper);
}
.mk-editorial [data-article-content] :where(h2, h3) {
  font-family: var(--serif);
  font-weight: 600;
}
.mk-editorial .bg-gradient-to-br,
.mk-editorial .bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--night) !important;
  color: var(--night-ink);
}
.mk-editorial .from-indigo-600,
.mk-editorial .from-violet-600,
.mk-editorial .from-purple-600 {
  background-color: var(--night) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mk-value-card:hover {
    transform: none;
  }
}

/* 動画一覧（video_library.css の配色を公開ページの配色へ） */
.lp-page.nm-video-library {
  background: var(--paper);
  font-family: var(--sans);
}
.lp-page.nm-video-library h1,
.lp-page.nm-video-library h2,
.lp-page.nm-video-library h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}
.lp-page.nm-video-library p {
  color: var(--ink-2);
}
.lp-page.nm-video-library .nm-video-library-eyebrow {
  font-family: var(--serif);
  letter-spacing: 0.2em;
  color: var(--muted);
}
.lp-page.nm-video-library .nm-video-library-eyebrow::before {
  height: 1px;
  background: var(--shu);
}
.lp-page.nm-video-library .nm-video-library-nav,
.lp-page.nm-video-library .nm-video-library-section,
.lp-page.nm-video-library .nm-video-library-cta {
  border-color: var(--rule-strong);
}
.lp-page.nm-video-library .nm-video-library-nav a {
  color: var(--ink-2);
}
.lp-page.nm-video-library .nm-video-library-nav a:hover {
  border-bottom-color: var(--shu);
  color: var(--ink);
}
.lp-page.nm-video-library .nm-video-library-links a:not(.nm-button) {
  color: var(--ai);
}

/* 料金ページの頭：見出し・注記・リード・操作の間に段落ごとの余白を取る */
.mk-pricing .mk-page-head .mk-free-note {
  margin-top: 20px;
}
.mk-pricing .mk-page-head .mk-lead {
  margin-top: 28px;
}
.mk-pricing .mk-page-head > div {
  margin-top: 32px;
}

/* ── 記事本文（article.css の配色を公開ページの配色へ。構造・組版は変えない） ─────── */
.mk-editorial .article-prose,
.mk-editorial .article-prose p,
.mk-editorial .article-prose li {
  color: var(--ink-2);
}
.mk-editorial .article-prose :where(h2, h3, strong) {
  color: var(--ink);
}
.mk-editorial .article-prose :where(h2, h3) {
  font-family: var(--serif);
  font-weight: 600;
  font-feature-settings: "palt";
}
.mk-editorial .article-prose a {
  color: var(--ai);
  text-decoration-color: rgba(36, 67, 214, 0.35);
}
.mk-editorial .article-prose a:hover {
  color: var(--ai-deep);
}
.mk-editorial .article-prose ul li::marker,
.mk-editorial .article-prose .nm-checklist-item::before {
  color: var(--shu);
}
.mk-editorial .article-prose ul.nm-checklist,
.mk-editorial .article-prose .nm-block-structure,
.mk-editorial .article-prose .nm-block-note {
  border-color: var(--rule);
  background-color: var(--paper-2);
}
.mk-editorial .article-prose .nm-block-insight,
.mk-editorial .article-prose .nm-block-summary {
  border-left-color: var(--ai);
  background-color: #eceffb;
}
.mk-editorial .article-prose p.text-indigo-900,
.mk-editorial .article-prose .nm-block-insight :where(p, li, strong) {
  color: var(--ink);
}
.mk-editorial .article-prose hr {
  border-top-color: var(--rule);
}
/* 目次・サイドバー・一覧の藍紫系ユーティリティ */
.mk-editorial .bg-indigo-50 {
  background-color: #eceffb;
}
.mk-editorial .text-indigo-400,
.mk-editorial .text-indigo-500 {
  color: var(--ai);
}
.mk-editorial .text-indigo-900 {
  color: var(--ink);
}
.mk-editorial .border-indigo-300 {
  border-color: rgba(36, 67, 214, 0.3);
}
.mk-editorial .bg-indigo-400 {
  background-color: var(--shu);
}
.mk-editorial .shadow-indigo-200 {
  --tw-shadow-color: transparent;
  box-shadow: 0 50px 90px -60px rgba(26, 23, 18, 0.7);
}
.mk-editorial .text-indigo-100,
.mk-editorial .text-indigo-200 {
  color: var(--night-muted);
}

/* ── 読みやすさ：公開ページでは10pxの補助文字を12pxに引き上げる（アプリ側の表示は変えない） ── */
.mk-public .text-\[10px\] {
  font-size: 12px;
  line-height: 1.5;
}
.mk-public .nm-plan-badge {
  font-size: 12px;
}

/* ── 押しやすさ：見た目は変えずに押せる範囲を44px以上にする ── */
.mk-public .feature-help-link {
  position: relative;
}
.mk-public .feature-help-link::after {
  content: "";
  position: absolute;
  inset: -13px;
}
.mk-auth-card a:not(.nm-button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mk-cta a.block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}