/* michishirube — 共有スタイル
   ライト/ダーク両対応。色はすべてトークン経由で、メディアクエリの中に色の唯一の定義を置かない。 */

:root {
  --ground:     #F5F5F2;
  --surface:    #FFFFFF;
  --ink:        #1C201D;
  --ink-soft:   #5C655F;
  --ink-faint:  #66706A;
  --rule:       #DDDED9;
  --accent:     #2F5548;
  --accent-lit: #3F7361;
  --wash:       #EAEFEB;

  --mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #141715;
    --surface:    #1C201D;
    --ink:        #E5E8E3;
    --ink-soft:   #A2AAA4;
    --ink-faint:  #7C847E;
    --rule:       #2C322E;
    --accent:     #86B9A5;
    --accent-lit: #9DCCB9;
    --wash:       #1F2724;
  }
}
:root[data-theme="dark"] {
  --ground:     #141715;
  --surface:    #1C201D;
  --ink:        #E5E8E3;
  --ink-soft:   #A2AAA4;
  --ink-faint:  #7C847E;
  --rule:       #2C322E;
  --accent:     #86B9A5;
  --accent-lit: #9DCCB9;
  --wash:       #1F2724;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 1.4rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}
.sheet.wide { max-width: 40rem; }

/* ---- 冒頭の鎖 ---- */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  font-family: var(--mincho);
  font-size: .95rem;
  color: var(--ink-soft);
}
.chain i { color: var(--accent); font-style: normal; }

/* ---- 中心の一行 ---- */
.core {
  font-family: var(--mincho);
  font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.85;
  margin: 0;
  text-wrap: balance;
}
.core-en {
  font-family: var(--mincho);
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.8;
  margin: .7rem 0 0;
}

/* ---- 段 ---- */
.tier { display: flex; flex-direction: column; gap: .9rem; }
.tier-label {
  font-family: var(--gothic);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-faint);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}
.items { font-family: var(--mincho); font-size: 1.06rem; line-height: 2.15; margin: 0; padding: 0; list-style: none; }
.items li { display: flex; gap: .55rem; align-items: baseline; }
.items .mark { color: var(--accent); font-size: .72rem; font-family: var(--gothic); letter-spacing: .05em; flex: none; }

.grp { display: flex; flex-direction: column; gap: .15rem; }
.grp-name { font-family: var(--gothic); font-size: .79rem; color: var(--ink-faint); letter-spacing: .06em; }
.grp-items { font-family: var(--mincho); font-size: 1.04rem; line-height: 1.95; }

/* ---- 習慣（引用） ---- */
.habits { margin: 0; padding: 0; list-style: none; counter-reset: h; display: flex; flex-direction: column; gap: .95rem; }
.habits li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .1rem .7rem; }
.habits li::before {
  counter-increment: h;
  content: counter(h);
  font-family: var(--gothic);
  font-size: .76rem;
  color: var(--accent);
  padding-top: .42rem;
}
.habits .name { font-family: var(--mincho); font-size: 1.06rem; line-height: 1.75; }
.habits .gloss { grid-column: 2; font-size: .89rem; color: var(--ink-soft); line-height: 1.8; }

.quote-note {
  font-size: .83rem;
  color: var(--ink-faint);
  line-height: 1.8;
  border-left: 2px solid var(--rule);
  padding-left: .8rem;
  margin: 0;
}

/* ---- 文章 ---- */
.lede { font-size: .95rem; line-height: 2; color: var(--ink-soft); margin: 0; }
.prose { display: flex; flex-direction: column; gap: 1.1rem; }
.prose p { margin: 0; }
h1 {
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 5vw, 1.95rem);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-family: var(--mincho);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.65;
  margin: 0;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
  text-wrap: balance;
}
h3 { font-family: var(--gothic); font-size: .98rem; font-weight: 700; margin: 0; line-height: 1.7; }

a { color: var(--accent-lit); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 3px; border-radius: 2px; }

ul.notes { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
ul.notes li { line-height: 1.9; }

.callout {
  background: var(--wash);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: .93rem;
  line-height: 1.9;
}
.callout p { margin: 0; }

pre.original {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: .85rem;
  line-height: 1.9;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.2rem 1.3rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}

/* ---- 出典と行き先 ---- */
.source {
  font-size: .83rem;
  color: var(--ink-faint);
  line-height: 1.85;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}
nav.go { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .88rem; }

@media (max-width: 480px) {
  .sheet { padding: 2.5rem 1.15rem 4rem; gap: 2.25rem; }
  body { font-size: 15.5px; }
}