/* ============================================================
   himekuri.css — 「日めくり」デザイン(紙の道具。v1.43)

   きょうの画面の上に、めくる前の日めくりが1枚。大きな日の数字と、曜日(たて書き)、
   七十二候(季節を5日ほどに分けた、昔の暦のことば。js/ui/koyomi.js)。
   ほかの画面は、机の上の白い紙。見出しは明朝(Shippori Mincho)、操作の文字はゴシック。
   色は「緑青(ろくしょう)」ひとつだけ。日曜の数字を朱にする暦の決まりは、使わない(赤を使わない約束)。

   <html data-skin="himekuri"> のときだけ効く。部品の形は css/worlds.css(<html data-paper>)を借りる。
   ★ 約束は変えない: 達成率を出さない / 赤を使わない / 空の枠を出さない
   ★ 色の読みやすさは「4.5 : 1 以上」(自動テストが確かめる)
   ★ 文字サイズ(--fs-*)は、ここでは変えない(大きな日の数字は、30px 以上の飾りなので固定)
   ============================================================ */

/* ---- 1. 色・書体・形(机と白い紙) ------------------------------ */
html:root[data-skin="himekuri"] {
  color-scheme: light;

  --bg:          #E9EAE6;   /* 机 */
  --bg-card:     #FFFFFF;   /* 日めくりの紙 */
  --bg-sunken:   #F4F4F1;
  --raised:      #F4F4F1;

  --line:        #D3D5D0;
  --line-strong: #7C807B;

  --text:        #1D1E20;   /* 墨 */
  --text-sub:    #45484B;
  --text-weak:   #585C5F;

  --accent:      #2F6B5E;   /* 緑青 */
  --accent-2:    #2F6B5E;
  --accent-weak: #DCE9E4;
  --brown:       #2F6B5E;
  --lamp:        #2F6B5E;
  --on-lamp:     #FFFFFF;

  --warn:        #8F5233;
  --warn-weak:   #F6E7DD;

  --ink:         #1D1E20;
  --on-ink:      #FFFFFF;

  --head:  "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --font:  "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-quote: var(--head);

  --radius:      3px;
  --radius-sm:   3px;
  --radius-full: 999px;
  --shadow:      none;
  --lh:          1.8;

  --gutter:      20px;
  --tabbar-h:    60px;
  --header-h:    56px;
  --beat:        800ms;
  --ic-w:        1.5;
  --ic-rx:       1px;

  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  html:root[data-skin="himekuri"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #17181A;
    --bg-card:     #202225;
    --bg-sunken:   #111214;
    --raised:      #2A2C30;
    --line:        #2E3033;
    --line-strong: #6F7378;
    --text:        #ECEDEA;
    --text-sub:    #BFC2BE;
    --text-weak:   #A3A7A3;
    --accent:      #8CC4B4;
    --accent-2:    #8CC4B4;
    --accent-weak: #1E2E2A;
    --brown:       #8CC4B4;
    --lamp:        #8CC4B4;
    --on-lamp:     #131416;
    --warn:        #D9A07A;
    --warn-weak:   #2E2620;
    --ink:         #ECEDEA;
    --on-ink:      #17181A;
  }
}
html:root[data-skin="himekuri"][data-theme="dark"] {
  color-scheme: dark;
  --bg:          #17181A;
  --bg-card:     #202225;
  --bg-sunken:   #111214;
  --raised:      #2A2C30;
  --line:        #2E3033;
  --line-strong: #6F7378;
  --text:        #ECEDEA;
  --text-sub:    #BFC2BE;
  --text-weak:   #A3A7A3;
  --accent:      #8CC4B4;
  --accent-2:    #8CC4B4;
  --accent-weak: #1E2E2A;
  --brown:       #8CC4B4;
  --lamp:        #8CC4B4;
  --on-lamp:     #131416;
  --warn:        #D9A07A;
  --warn-weak:   #2E2620;
  --ink:         #ECEDEA;
  --on-ink:      #17181A;
}

/* ---- 2. きょうの1枚 -------------------------------------------- */
/* 日めくりの紙を、見出しの日付より上に出す(見出しの日付は、読み上げのために残し、目には見せない) */
html[data-skin="himekuri"] .lp__hero { display: flex; flex-direction: column; }
html[data-skin="himekuri"] .lp__date {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-skin="himekuri"] .koyomi {
  order: -1; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3);
  margin: 0 4px var(--sp-5); padding: 0 var(--sp-4) var(--sp-4);
  background: var(--bg-card); border: 1px solid var(--line);
  /* 下に重なる、めくる前の紙(2枚) */
  box-shadow: 0 4px 0 -1px var(--bg-card), 0 4px 0 0 var(--line), 0 8px 0 -1px var(--bg-card), 0 8px 0 0 var(--line);
}
html[data-skin="himekuri"] .koyomi::before {           /* 上の、とじ穴の列 */
  content: ""; grid-column: 1 / -1; height: 18px; margin: 0 calc(-1 * var(--sp-4)) var(--sp-2);
  background: radial-gradient(circle at 50% 55%, var(--bg) 2.6px, transparent 3px) 0 0 / 14px 18px repeat-x;
  border-bottom: 1px dashed var(--line);
}
html[data-skin="himekuri"] .koyomi p { margin: 0; }
html[data-skin="himekuri"] .koyomi__top {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
  color: var(--text-weak); font-size: var(--fs-xs);
}
html[data-skin="himekuri"] .koyomi__top b { font-family: var(--head); font-size: var(--fs-lg); color: var(--text); font-weight: 700; }
html[data-skin="himekuri"] .koyomi__day {
  font-family: var(--head); font-weight: 700; font-size: 120px; line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text);
}
html[data-skin="himekuri"] .koyomi__dow {
  align-self: center; writing-mode: vertical-rl; letter-spacing: 0.12em;
  font-family: var(--head); font-weight: 700; font-size: var(--fs-lg); color: var(--text);
}
html[data-skin="himekuri"] .koyomi__kou {
  grid-column: 1 / -1; display: grid; gap: 2px;
  border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-2);
}
html[data-skin="himekuri"] .koyomi__kou b { font-family: var(--head); font-weight: 700; font-size: var(--fs-lg); color: var(--text); }
html[data-skin="himekuri"] .koyomi__kou span { color: var(--text-weak); font-size: var(--fs-xs); }
html[data-skin="himekuri"] .koyomi__kou em { font-style: normal; color: var(--accent); font-size: var(--fs-xs); }
html[data-skin="himekuri"] .lp__greet { margin-top: var(--sp-2); }
html[data-skin="himekuri"] .lp__hero .listen { align-self: flex-start; }

/* ---- 3. 見出し・一覧 ------------------------------------------- */
html[data-skin="himekuri"] .section__title,
html[data-skin="himekuri"] .lp__h2 { color: var(--text); font-weight: 700; }
html[data-skin="himekuri"] .section__title { border-bottom: 1px solid var(--text); padding-bottom: var(--sp-1); }
html[data-skin="himekuri"] .lp__date { font-weight: 700; }
html[data-skin="himekuri"] .card,
html[data-skin="himekuri"] .tile { border-color: var(--line); }

/* ---- 4. 下のタブ ---------------------------------------------- */
html[data-skin="himekuri"] .tabbar { background: var(--bg-card); }
html[data-skin="himekuri"] .tabbar__item.is-active::before {      /* 選んでいるところの上に、緑青の線 */
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: var(--accent);
}
html[data-skin="himekuri"] .tabbar__add svg {
  background: transparent; border: 1.5px solid var(--ink); stroke: var(--ink); border-radius: var(--radius-sm); width: 40px;
}