/*
Theme Name: Shukumei Tune
Description: 宿命調律流ブログ専用テーマ。本サイト（宿命調律流 / uranai-system）のデザイントークンを移植し、同じ見た目で記事を出す。dr_neo からの自動投稿（wao-* ブロック）と、本サイト由来の部品（uv-a-*）の両方を装飾する。
Version: 1.1.0
Author: 宿命調律流
Text Domain: shukumei-tune
*/

/* ============================================================
   デザイントークン — 本サイト src/app/globals.css からの移植。
   値を変えるときは本サイト側と揃えること（片方だけ変えると
   ブログと本サイトの見た目が割れる）。
   ============================================================ */
:root {
  /* 地 */
  --color-bg-primary: #07090e;
  --color-bg-deep: #04050a;
  --color-bg-surface: #0d131f;
  --color-bg-surface-alt: #111827;
  --color-bg-muted: #171a20;

  /* 文字 */
  --color-text-primary: #f4efe6;
  --color-text-secondary: #b0a795;
  --color-text-muted: #8a8173;
  --color-text-inverse: #07090e;

  /* 罫 */
  --color-border-default: #232a36;
  --color-border-subtle: #161c26;
  --color-border-strong: #39404e;

  /* ブランド */
  --color-brand-gold: #d6af37;
  --color-brand-gold-dim: #9c7d33;
  --accent: var(--color-brand-gold);

  /* 状態 */
  --color-danger: #b66e76;
  --color-warning: #c9973c;
  --color-success: #7f9e86;

  /* 角丸 */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;

  --font-display: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho",
    "Noto Serif JP", serif;
  --font-serif-ja: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --glow-gold: 0 0 24px rgba(214, 175, 55, 0.25);
}

/* ============================================================
   下地
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text-primary); }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

.st-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 小さなラベル（本サイトの uv-label 相当） */
.st-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   ヘッダー / フッター
   ============================================================ */
.st-header {
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-deep) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.st-header__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.st-header__brand {
  font-family: var(--font-serif-ja);
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--color-text-primary);
  text-decoration: none;
}
.st-header__brand small {
  margin-left: 0.8em;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--color-text-muted);
}
.st-header__nav a {
  margin-left: 18px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.st-header__nav a:hover { color: var(--accent); }

.st-footer {
  margin-top: 96px;
  border-top: 1px solid var(--color-border-subtle);
  padding: 40px 20px 56px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.st-footer a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 6px; }
.st-footer a:hover { color: var(--accent); }

/* ============================================================
   記事一覧
   ============================================================ */
.st-hero { padding: 88px 0 56px; }
.st-hero h1 {
  margin: 20px 0 0;
  font-family: var(--font-serif-ja);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: var(--color-text-primary);
}
.st-hero p { margin: 18px 0 0; font-size: 13px; color: var(--color-text-muted); }

.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li { border-top: 1px solid var(--color-border-subtle); }
.st-list a {
  display: block;
  padding: 26px 8px;
  text-decoration: none;
}
.st-list .st-item-title {
  display: block;
  margin-top: 10px;
  font-family: var(--font-serif-ja);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-primary);
}
.st-list a:hover .st-item-title { color: var(--accent); }
.st-list .st-item-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}
.st-list .st-item-excerpt {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 2;
  color: var(--color-text-secondary);
}

.st-pagination { margin: 40px 0; display: flex; gap: 16px; justify-content: center; font-size: 12px; }
.st-pagination a, .st-pagination span { color: var(--color-text-muted); text-decoration: none; padding: 4px 10px; }
.st-pagination a:hover { color: var(--accent); }
.st-pagination .current { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* ============================================================
   記事ページ
   ============================================================ */
.st-post-head { padding: 88px 0 40px; }
.st-post-head h1 {
  margin: 22px 0 0;
  font-family: var(--font-serif-ja);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--color-text-primary);
}
.st-post-head .st-post-meta {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}

.st-divider {
  width: 44px;
  height: 1px;
  margin: 8px 0 48px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.st-eyecatch { margin: 0 0 40px; }
.st-eyecatch img { width: 100%; max-height: 60vh; object-fit: cover; border-radius: var(--radius-md); }

/* --- 目次（本サイトの INDEX ／ 目次 と同じ形） --- */
.st-toc {
  margin: 0 0 48px;
  padding: 22px 24px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.st-toc ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.st-toc a {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--color-text-primary);
  text-decoration: none;
}
.st-toc a:hover { text-decoration: underline; text-underline-offset: 8px; color: var(--accent); }

/* ============================================================
   本文 — 本サイト .uv-article の移植
   ============================================================ */
.st-article {
  font-size: 14px;
  line-height: 2.25;
  color: var(--color-text-secondary);
}
.st-article > :first-child { margin-top: 0; }
.st-article p { margin: 1.75rem 0; }
.st-article > p:first-of-type { color: var(--color-text-primary); }

/*
  見出し・リスト・引用・リンクは「装飾がはっきり効いた記事」(SWELL系の
  作り)に寄せる。ただし配色は宿命調律流の黒×金のまま。
  h2=面で区切る / h3=線で区切る / h4=印で区切る、の3段階。
*/
.st-article h2,
.st-article h3,
.st-article h4,
.st-article h5,
.st-article h6 {
  font-family: var(--font-serif-ja);
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.8;
  margin: 3.5rem 0 1.5rem;
  scroll-margin-top: 4.5rem;
}

/* h2: 帯型。面で塗り、左に金の柱、下に金→透明の罫 */
.st-article h2 {
  font-size: clamp(1.25rem, 4.4vw, 1.5rem);
  line-height: 1.7;
  margin-top: 4rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, var(--color-bg-surface-alt), var(--color-bg-surface));
  border-left: 4px solid var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 0 var(--radius-lg) 0 0;
}

/* h3: 左に金の太線 + 下に薄い罫 */
.st-article h3 {
  font-size: clamp(1.08rem, 3.8vw, 1.24rem);
  line-height: 1.75;
  padding: 0.2rem 0 0.55rem 0.9rem;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--color-border-default);
}

/* h4: 金の菱形マーカー */
.st-article h4 {
  font-size: 1rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.st-article h4::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  flex: none;
  background: var(--accent);
  transform: rotate(45deg);
}

/* --- リスト: 枠に入れず、印をはっきりさせる --- */
.st-article ul, .st-article ol { margin: 1.75rem 0; padding-left: 0.4em; list-style: none; }
.st-article li { position: relative; margin: 0.65rem 0; padding-left: 1.7em; }
.st-article li > ul, .st-article li > ol { margin: 0.65rem 0; }

/* ul: 金のチェック */
.st-article ul > li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.62em;
  height: 0.34em;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ol: 金の丸数字 */
.st-article ol { counter-reset: st-ol; }
.st-article ol > li { counter-increment: st-ol; }
.st-article ol > li::before {
  content: counter(st-ol);
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.25em;
  height: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--color-bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72em;
  line-height: 1;
}

.st-article strong { color: var(--color-text-primary); }
.st-article mark {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 42%, transparent) 62%);
  color: var(--color-text-primary);
}

/* --- 引用: 面で囲い、引用符を大きく置く --- */
.st-article blockquote {
  position: relative;
  margin: 2.25rem 0;
  padding: 1.3rem 1.4rem 1.3rem 3.1rem;
  background: color-mix(in srgb, var(--color-bg-surface) 75%, transparent);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-serif-ja);
}
.st-article blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.55rem;
  top: 0.1rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.st-article blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.78em;
  font-style: normal;
  color: var(--color-text-muted);
}

.st-article hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: 3rem 0; }

/* --- 本文リンク: 金で目立たせ、外部リンクには印を付ける --- */
.st-article a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.st-article a:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  text-decoration-color: var(--accent);
}
/* 外部リンクの印（↗）。サイト内・ページ内・CTAには付けない */
.st-article a[href^="http"]:not([href*="xs587760.xsrv.jp"]):not(.uv-a-cta):not([href*="uranai-system.fly.dev"])::after {
  content: "\2197";
  margin-left: 0.2em;
  font-size: 0.82em;
  color: color-mix(in srgb, var(--accent) 75%, transparent);
}

.st-article table {
  width: 100%;
  margin: 2.25rem 0;
  border-collapse: collapse;
  font-size: 0.9em;
}
.st-article th, .st-article td {
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-border-default);
  text-align: left;
}
.st-article th { background: var(--color-bg-surface); color: var(--color-text-primary); font-weight: 500; }
.st-article .st-table-scroll { overflow-x: auto; }

.st-article figure { margin: 2.25rem 0; }
.st-article figcaption { font-size: 0.8em; color: var(--color-text-muted); margin-top: 0.6em; }

.st-article pre {
  overflow-x: auto;
  padding: 1em 1.2em;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* --- 押させたい場所（CTA）: 金のボタンとしてはっきり出す --- */
.st-article a.uv-a-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  min-height: 60px;
  margin: 2.75rem 0;
  padding: 18px 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-brand-gold), var(--color-brand-gold-dim));
  color: var(--color-text-inverse);
  font-family: var(--font-serif-ja);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(214, 175, 55, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.st-article a.uv-a-cta::after {
  content: "\2192";
  font-family: var(--font-mono);
  transition: transform 0.15s ease;
}
.st-article a.uv-a-cta:hover,
.st-article a.uv-a-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(214, 175, 55, 0.34), var(--glow-gold);
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, #e5c14f, var(--color-brand-gold));
}
.st-article a.uv-a-cta:hover::after { transform: translateX(4px); }
/* 本文リンク用の下線・外部印はCTAに持ち込まない */
.st-article a.uv-a-cta { text-decoration: none; }

/* --- 吹き出し（本サイト aside.uv-a-say の移植） --- */
.st-article aside.uv-a-say {
  position: relative;
  margin: 2.25rem 0 2.25rem 0.9rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 0.86rem;
  line-height: 2.1;
}
.st-article aside.uv-a-say::before,
.st-article aside.uv-a-say::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
}
.st-article aside.uv-a-say::before { left: -9px; border-right: 9px solid var(--color-border-default); }
.st-article aside.uv-a-say::after { left: -8px; border-right: 9px solid var(--color-bg-surface); }

.st-article aside.uv-a-say-you {
  margin-left: 2.5rem;
  margin-right: 0.9rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--color-bg-surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--color-border-default));
}
.st-article aside.uv-a-say-you::before,
.st-article aside.uv-a-say-you::after { left: auto; }
.st-article aside.uv-a-say-you::before { right: -9px; border-left: 9px solid color-mix(in srgb, var(--accent) 30%, var(--color-border-default)); border-right: 0; }
.st-article aside.uv-a-say-you::after { right: -8px; border-left: 9px solid color-mix(in srgb, var(--accent) 8%, var(--color-bg-surface)); border-right: 0; }

/* --- 補足（本サイト aside.uv-a-note の移植） --- */
.st-article aside.uv-a-note {
  margin: 2.25rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-surface) 60%, transparent);
  color: var(--color-text-secondary);
  font-size: 0.86rem;
}

.st-article :is(blockquote, aside.uv-a-say, aside.uv-a-note) > :first-child { margin-top: 0; }
.st-article :is(blockquote, aside.uv-a-say, aside.uv-a-note) > :last-child { margin-bottom: 0; }

/* ============================================================
   dr_neo 自動投稿ブロック（wao-*）をこの見た目に取り込む。
   dr_neo は blockEditor モードで class だけ付けて送ってくる前提
   （inline style 無し）。ここで宿命調律流の意匠を当てる。
   ============================================================ */
.st-article .wao-toc { display: none; } /* 目次はテーマが作るので、二重になる方は消す */

.st-article .wao-point,
.st-article .wao-important {
  margin: 2.25rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--color-border-default));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--color-bg-surface));
  color: var(--color-text-primary);
}
.st-article .wao-caution {
  margin: 2.25rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--color-danger) 45%, var(--color-border-default));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-surface));
}
.st-article .wao-summary {
  margin: 3rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.st-article .wao-cta { margin: 2.5rem 0; }

/* ============================================================
   次の記事
   ============================================================ */
.st-more { margin-top: 72px; }
.st-more ol { list-style: none; margin: 16px 0 0; padding: 0; }
.st-more li { border-top: 1px solid var(--color-border-subtle); }
.st-more a { display: block; padding: 20px 8px; text-decoration: none; font-size: 13.5px; line-height: 2; color: var(--color-text-primary); }
.st-more a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .st-hero, .st-post-head { padding-top: 56px; }
  .st-header__nav a { margin-left: 12px; }
}