/* =============================================================================
   じねんのことわり ～からだとこころ～
   Obsidian Publish theme  (publish.css)
   ---------------------------------------------------------------------------
   前回のトップページ案の世界観を Obsidian Publish に翻訳したものです。
   ・色      : 朝靄のような灰白と、沈んだ苔の緑。生成りやテラコッタは避ける
   ・書体    : 本文・見出しとも明朝(Shippori Mincho)を基調に、UIはゴシック
   ・余白    : 本文幅を狭め、行間を広く。静けさと「間」を中心に

   使い方:
   1. このファイルを Vault の一番上の階層(ルート)に「publish.css」の名前で置く
   2. 公開ダイアログの「新規」に publish.css が出るのでチェックして公開
   3. 反映まで数分かかることがあります。変わらないときはブラウザの
      キャッシュを消して再読み込みしてください
   4. 色や余白は下の「調整用トークン」の数値をいじれば全体に効きます
   ============================================================================= */

/* --- 書体 ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');


/* =============================================================================
   調整用トークン  ── ここの数値・色を変えると全体に反映されます
   ============================================================================= */

/* ライト(既定) */
.theme-light,
body {
  --ground:      #eef0ec;   /* 地: ごく淡い、緑を含んだ白 */
  --ground-soft: #e6e9e3;   /* 影のある地(コードブロック・引用など) */
  --sumi:        #2b302c;   /* 墨に寄せた文字色 */
  --sumi-soft:   #5c635b;   /* 淡い墨(補足・日付など) */
  --koke:        #6f7b62;   /* 苔: 沈んだ若葉(リンク・アクセント) */
  --koke-deep:   #4d5843;   /* 濃い苔(ホバー) */
  --line-quiet:  rgba(43, 48, 44, .14);  /* 区切り線 */

  --measure:     40rem;     /* 本文の横幅(狭めるほど静か) */
  --lead:        1.95;      /* 本文の行間 */
}

/* ダーク(サイトオプションで dark を選んだとき) */
.theme-dark {
  --ground:      #1a1d19;
  --ground-soft: #202420;
  --sumi:        #dfe3da;
  --sumi-soft:   #9aa093;
  --koke:        #9aa886;
  --koke-deep:   #b7c3a2;
  --line-quiet:  rgba(223, 227, 218, .16);
}


/* =============================================================================
   Obsidian の内部変数へ橋渡し
   (Publish の各パーツはこれらの変数を参照して描画されます)
   ============================================================================= */
body {
  --background-primary:            var(--ground);
  --background-primary-alt:        var(--ground);
  --background-secondary:          var(--ground);
  --background-secondary-alt:      var(--ground-soft);
  --background-modifier-border:    var(--line-quiet);

  --text-normal:      var(--sumi);
  --text-muted:       var(--sumi-soft);
  --text-faint:       var(--sumi-soft);
  --text-accent:      var(--koke);
  --text-accent-hover:var(--koke-deep);
  --text-selection:   rgba(111, 123, 98, .20);

  --interactive-accent: var(--koke);
  --link-color:         var(--koke);
  --link-color-hover:   var(--koke-deep);

  --font-text-theme:      "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-interface-theme: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-text-size:       17px;
  --file-line-width:      var(--measure);
}


/* =============================================================================
   全体の地
   ============================================================================= */
.site-body,
.published-container,
.markdown-preview-view {
  background: var(--ground);
  color: var(--sumi);
}

body {
  font-family: var(--font-interface-theme);
  -webkit-font-smoothing: antialiased;
}

/* ほんのり呼吸するような地のにじみ(主張しない程度に) */
.site-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 6%,  rgba(111,123,98,.10), transparent 60%),
    radial-gradient(90% 70% at 10% 98%, rgba(111,123,98,.07), transparent 55%);
}
.published-container { position: relative; z-index: 1; }


/* =============================================================================
   本文(明朝・広い行間・狭い版面)
   ============================================================================= */
.markdown-preview-view,
.markdown-rendered {
  font-family: var(--font-text-theme);
  font-size: var(--font-text-size);
  line-height: var(--lead);
  letter-spacing: .01em;
  color: var(--sumi);
}

.markdown-preview-view p { margin: 0 0 1.4em; }

/* 版面を中央に、たっぷりの余白で */
.published-container .markdown-preview-sizer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(2rem, 6vh, 4.5rem);
}


/* =============================================================================
   ページタイトル・見出し
   ============================================================================= */
.published-container .page-title {
  font-family: var(--font-text-theme);
  font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--sumi);
  margin-bottom: 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-quiet);
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4 {
  font-family: var(--font-text-theme);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.7;
  color: var(--sumi);
}
.markdown-preview-view h1 { font-size: 1.55rem; margin: 2.6em 0 1em; }
.markdown-preview-view h2 {
  font-size: 1.3rem;
  margin: 2.4em 0 .9em;
  color: var(--koke-deep);          /* 節の見出しに苔の色を、ひかえめに */
}
.markdown-preview-view h3 { font-size: 1.12rem; margin: 2em 0 .7em; }


/* =============================================================================
   リンク・引用・区切り・コード
   ============================================================================= */
.markdown-preview-view a,
.markdown-preview-view a.internal-link {
  color: var(--koke);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 123, 98, .35);
  transition: color .3s, border-color .3s;
}
.markdown-preview-view a:hover {
  color: var(--koke-deep);
  border-bottom-color: var(--koke-deep);
}

.markdown-preview-view blockquote {
  border-left: 2px solid var(--koke);
  background: var(--ground-soft);
  color: var(--sumi-soft);
  margin: 1.8em 0;
  padding: .2em 1.4em;
  font-style: normal;
}

.markdown-preview-view hr {
  border: none;
  border-top: 1px solid var(--line-quiet);
  margin: 3em auto;
  width: 6rem;                       /* 短い一本の線で「間」をつくる */
}

.markdown-preview-view code,
.markdown-preview-view pre {
  background: var(--ground-soft);
  border-radius: 4px;
}
.markdown-preview-view pre { padding: 1em 1.2em; }


/* =============================================================================
   左カラム(サイト名・ナビゲーション)
   ============================================================================= */
.site-body-left-column {
  background: var(--ground);
  border-right: 1px solid var(--line-quiet);
}

.site-name,
.site-body-left-column .site-name,
.published-container .site-name,
.site-body-left-column-site-name {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--sumi);
  line-height: 1.7;
}

/* ナビの各項目は静かに、明朝で */
.site-body-left-column .tree-item-self {
  font-family: var(--font-text-theme);
  color: var(--sumi-soft);
  border-radius: 4px;
  transition: color .3s, background .3s;
}
.site-body-left-column .tree-item-self:hover {
  color: var(--sumi);
  background: var(--ground-soft);
}
.site-body-left-column .tree-item-self.is-active {
  color: var(--koke-deep);
  background: var(--ground-soft);
}


/* =============================================================================
   仕上げ(検索・アクセシビリティ・モバイル)
   ============================================================================= */
::selection { background: rgba(111, 123, 98, .20); }

a:focus-visible,
.tree-item-self:focus-visible {
  outline: 2px solid var(--koke);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* 画面が狭いときは版面をさらに詰める */
@media (max-width: 600px) {
  body { --font-text-size: 16px; }
  .published-container .markdown-preview-sizer { padding-inline: 1.2rem; }
}