/* ============================================================
   worlds.css — 「四つの世界」(朝・夜・カフェ・散歩)に共通の部品の形

   色・書体・形(角の丸み)は、世界ごとのファイル(asa.css / yoru.css / cafe.css / sanpo.css)が
   変数で決める。ここは、その変数を使って、部品を整えるだけ。
   世界だけの飾り(朝の金の線・夜の灯り・カフェの点線・散歩の丸いタブ)は、世界ごとのファイルに書く。

   <html data-world="asa|yoru|cafe|sanpo">(boot.js と display.js が付ける)のときだけ効く。
   使う変数(世界ごとのファイルで決める):
     --head(見出しの書体) --font(本文の書体) --lamp / --on-lamp(塗りの色と、その上の文字)
     --accent(色のついた文字・線) --accent-weak(選んでいる面) --line-strong(縁。地との差 3 : 1 以上)
     --radius / --radius-sm / --radius-full(形)
   ★ 文字サイズ(--fs-*)は、ここでは変えない(設定の「文字の大きさ」を効かせるため)
   ★ 約束は変えない: 達成率を出さない / 赤を使わない / 空の枠を出さない
   ============================================================ */

/* ---- 書体(同梱。使うときに初めて読み込まれる。docs/11 STEP B) ----
   Shippori Mincho(見出し: 朝・夜)と BIZ UDPゴシック(本文: 朝・カフェ)。
   Klee One(カフェの見出し)は techo.css、Zen Maru Gothic(夜・散歩の本文)は akari.css に、同じく @font-face がある */
@font-face {
  font-family: "Shippori Mincho"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/shippori-500.woff2") format("woff2");
}
@font-face {
  font-family: "Shippori Mincho"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/shippori-700.woff2") format("woff2");
}
@font-face {
  font-family: "BIZ UDPGothic"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/bizud-400.woff2") format("woff2");
}
@font-face {
  font-family: "BIZ UDPGothic"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/bizud-700.woff2") format("woff2");
}

html[data-world] body { background: var(--bg); letter-spacing: 0.02em; }
html[data-world] ::selection { background: var(--accent-weak); color: var(--text); }
html[data-world] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-world] .view { padding-top: var(--sp-5); }

/* ---- 2. 見出し(明朝・見出しだけ) --------------------------- */
html[data-world] h1,
html[data-world] h2,
html[data-world] h3 { font-family: var(--head); font-weight: 500; letter-spacing: 0.02em; }
html[data-world] .header__title { font-family: var(--head); font-size: calc(17px * var(--fs-scale)); font-weight: 500; letter-spacing: 0.06em; }
html[data-world] .section { margin-bottom: var(--sp-6); }
html[data-world] .section__title {
  font-family: var(--head); font-size: calc(18px * var(--fs-scale)); font-weight: 600;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: var(--sp-3);
}
html[data-world] .subtitle,
html[data-world] .lead { color: var(--text-sub); }

/* ---- 3. アイコン(細い線 1.5・まるい端) -------------------- */
html[data-world] .ic { stroke: currentColor; stroke-width: var(--ic-w, 1.5); vertical-align: -0.18em; }
html[data-world] .row__icon .ic,
html[data-world] .sheet__icon .ic,
html[data-world] .tile__icon .ic,
html[data-world] .quote__mark .ic,
html[data-world] .sheet__grid-item .ic,
html[data-world] .row__avatar .ic,
html[data-world] .person__photo .ic,
html[data-world] .listen .ic,
html[data-world] .action .ic { stroke: var(--accent); }
/* 世界ごとの描きかた(js/ui/icon-sets.js)。class="d" は、ひかり・灯りの塗りの点 / class="f" は、にじみ。
   icon-sets.js に無いアイコン(基本の形)にも、閉じた図形にだけ、世界のにじみと角の丸みがかかる */
html[data-world] :is(.ic, .tabbar__item svg, .header__action svg) .d { fill: var(--lamp); fill-opacity: 1; stroke: none; }
html[data-world] :is(.ic, .tabbar__item svg, .header__action svg) :is(.f, ellipse, rect, circle:not(.d)) { fill: var(--ic-wash, none); fill-opacity: var(--ic-wash-o, 0); }
html[data-world] :is(.ic, .tabbar__item svg, .header__action svg) rect { rx: var(--ic-rx, 3px); }
html[data-world] .header__action svg { stroke-width: var(--ic-w, 1.5); }
html[data-world] .btn .ic,
html[data-world] .chip .ic,
html[data-world] .more .ic,
html[data-world] .listen .ic { margin-right: 0.4em; }

/* ---- 4. ヘッダー・下タブ(平らな帯・細い線) ---------------- */
html[data-world] .header { background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: none; }
html[data-world] .header__action { color: var(--text-sub); }
html[data-world] .header__action:active { color: var(--accent); }

html[data-world] .tabbar { background: var(--tab-bg, var(--bg)); border-top: var(--tab-border, 1px solid var(--line)); box-shadow: none; }
html[data-world] .tabbar__item {
  position: relative; color: var(--text-weak);
  font-size: calc(13px * var(--fs-scale)); gap: 3px; letter-spacing: 0.04em;
}
html[data-world] .tabbar__item svg { stroke-width: var(--ic-w, 1.5); }
html[data-world] .tabbar__item.is-active { color: var(--text); font-weight: 700; }
html[data-world] .tabbar__item.is-active svg { stroke: var(--accent); }
/* (選んでいるところの印は、世界ごとのファイルで) */

/* 「＋」ボタン(世界の塗りの色の丸) */
html[data-world] .fab { background: var(--lamp); color: var(--on-lamp); box-shadow: var(--fab-shadow, 0 0 0 1px rgba(44, 42, 38, 0.18)); }
html[data-world] .fab .ic { stroke: var(--on-lamp); stroke-width: 2; width: 24px; height: 24px; }
html[data-world] .fab:active { transform: scale(0.96); }

/* ---- 5. カード・ひとこと(影なし・細い線) ------------------- */
html[data-world] .card,
html[data-world] .tile {
  background: var(--bg-card); border: var(--card-border, 1px solid var(--line));
  border-radius: var(--radius); box-shadow: var(--card-shadow, none);
}
html[data-world] .card { padding: var(--sp-5); }
html[data-world] .tile { padding: var(--sp-5) var(--sp-3); }
html[data-world] .tile:active { background: var(--accent-weak); }
html[data-world] .tile__count { color: var(--accent); }

html[data-world] .quote {
  background: none; color: var(--text); box-shadow: none; border-radius: 0;
  border: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--sp-4) 0;
}
html[data-world] .quote__text { font-family: var(--head); font-size: calc(22px * var(--fs-scale)); line-height: 1.6; font-weight: 500; }
html[data-world] .quote__mark,
html[data-world] .quote__src { color: var(--text-weak); }

html[data-world] .timerow__time,
html[data-world] .meta-time { font-family: var(--head); color: var(--accent); font-variant-numeric: tabular-nums; }
html[data-world] .timerow[class*="k-"] .timerow__time { color: var(--k); }

/* ---- 6. ボタン・チップ・入力欄 ------------------------------ */
html[data-world] .btn {
  min-height: 48px; border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--text); box-shadow: none;
  font-size: calc(16px * var(--fs-scale)); letter-spacing: 0.04em;
}
html[data-world] .btn:active { background: var(--accent-weak); }
html[data-world] .btn--primary { background: var(--lamp); border-color: var(--lamp); color: var(--on-lamp); font-weight: 700; }
html[data-world] .btn--primary:active { background: var(--lamp); filter: brightness(0.94); }
html[data-world] .btn--primary .ic { stroke: var(--on-lamp); }
html[data-world] .btn--danger { background: transparent; border-color: var(--warn); color: var(--warn); }
html[data-world] .btn--danger:active { background: var(--warn-weak); }
html[data-world] .btn--danger .ic { stroke: var(--warn); }
html[data-world] .btn--quiet { border-color: var(--line-strong); color: var(--text-sub); }
html[data-world] .btn--small { min-height: 44px; font-size: calc(14px * var(--fs-scale)); }
html[data-world] .more { color: var(--text-sub); }

html[data-world] .chip {
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-sub);
  font-size: calc(14px * var(--fs-scale));
}
html[data-world] .chip.is-active { background: var(--accent-weak); border-color: var(--accent); color: var(--text); font-weight: 700; }
html[data-world] .chip.is-active .ic { stroke: var(--accent); }
html[data-world] .chip--suggest { border-style: dashed; color: var(--accent); }
html[data-world] .listen {
  color: var(--text); border: 1.5px solid var(--ink); background: transparent; border-radius: var(--radius-full);
}

html[data-world] .field,
html[data-world] .editor__body,
html[data-world] .editor__quote {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: none;
}
html[data-world] .field:focus,
html[data-world] .editor__body:focus,
html[data-world] .editor__quote:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
html[data-world] .field::placeholder,
html[data-world] .editor__body::placeholder,
html[data-world] .editor__title::placeholder { color: var(--text-weak); }
html[data-world] .editor__title { font-family: var(--head); font-weight: 500; border-bottom-color: var(--line); background: transparent; }
html[data-world] .editor__title:focus { border-bottom-color: var(--accent); }
html[data-world] .switchrow input { accent-color: var(--accent); }
html[data-world] select.field option { background: var(--bg); color: var(--text); }
html[data-world] .dictate__btn { background: transparent; border-color: var(--line-strong); color: var(--accent); box-shadow: none; }
html[data-world] .dictate__btn.is-on { background: var(--lamp); color: var(--on-lamp); border-color: var(--lamp); }

html[data-world] .check__box { border: 1.5px solid var(--ink); border-radius: 6px; background: transparent; }
html[data-world] .check__box.is-done { background: var(--lamp); border-color: var(--lamp); }
html[data-world] .check__box.is-done::after { border-color: var(--on-lamp); }
html[data-world] .check__title.is-done { color: var(--text-weak); }

/* ---- 7. 一覧・カレンダー ------------------------------------ */
html[data-world] .row,
html[data-world] .linkrow,
html[data-world] .quoterow,
html[data-world] .timerow { border-bottom-color: var(--line); }
html[data-world] .row:active,
html[data-world] .quoterow:active,
html[data-world] .timerow:active { background: var(--accent-weak); }
html[data-world] .row__avatar { background: var(--bg-card); box-shadow: 0 0 0 1px var(--line); }
html[data-world] .person__photo { background: var(--bg-card); border: 1px solid var(--line); box-shadow: none; }
html[data-world] .thumb { border-color: var(--line); box-shadow: none; }

html[data-world] .cal__nav { color: var(--accent); }
html[data-world] .cal__label { font-family: var(--head); font-weight: 500; }
html[data-world] .cal__cell { border: 1px solid transparent; border-radius: 50%; }
html[data-world] .cal__cell.is-today { color: var(--accent); font-weight: 700; border-color: var(--accent); }
html[data-world] .cal__cell.is-selected { background: var(--lamp); color: var(--on-lamp); border-color: var(--lamp); font-weight: 700; }
html[data-world] .cal__cell.is-selected.is-today { color: var(--on-lamp); }
html[data-world] .cal__dot { background: var(--k, var(--accent)); box-shadow: none; }

/* ---- 8. シート・ダイアログ・お知らせ ------------------------ */
html[data-world] .overlay__scrim { background: rgba(44, 42, 38, 0.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-world] .sheet__card {
  background: var(--bg); border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-world] .sheet__title,
html[data-world] .dialog__title { font-family: var(--head); font-weight: 500; }
html[data-world] .sheet__item { border-bottom-color: var(--line); }
html[data-world] .sheet__item:active,
html[data-world] .sheet__grid-item:active { background: var(--accent-weak); }
html[data-world] .sheet__grid-item {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); box-shadow: none;
}
html[data-world] .sheet__cancel { color: var(--text-sub); }
html[data-world] .dialog__card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(44, 42, 38, 0.24);
}
html[data-world] .dialog__message { color: var(--text-sub); }
html[data-world] .snackbar {
  background: var(--ink); color: var(--on-ink); border: none; border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(44, 42, 38, 0.28);
}
html[data-world] .snackbar__action { color: var(--lamp); }
html[data-world] .updatebar {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(44, 42, 38, 0.16);
}
html[data-world] .notice,
html[data-world] .warnline { border: 1px solid var(--warn); background: var(--warn-weak); color: var(--warn); border-radius: var(--radius-sm); }
html[data-world] .dot { background: var(--line-strong); }
html[data-world] .dot.is-on { background: var(--lamp); box-shadow: none; }

/* ---- 9. アプリロック ---------------------------------------- */
html[data-world] .lock { background: var(--bg); }
html[data-world] .lock__brand { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
html[data-world] .lock__title { font-family: var(--head); font-weight: 500; }
html[data-world] .lock__dot { border-color: var(--ink); }
html[data-world] .lock__dot.is-on { background: var(--lamp); border-color: var(--lamp); box-shadow: none; }
html[data-world] .lock__key {
  background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: none;
  font-family: var(--head); font-weight: 500;
}
html[data-world] .lock__key:active { background: var(--lamp); color: var(--on-lamp); border-color: var(--lamp); transform: none; box-shadow: none; }
html[data-world] .lock__key--blank { background: none; border: none; }
html[data-world] .lock__danger { color: var(--warn); background: transparent; border: 1px solid var(--warn); box-shadow: none; }

/* ---- 10. ホーム(今日の画面) -------------------------------- */
html[data-world] .lp__eyebrow { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: none; color: var(--text-weak); margin-bottom: var(--sp-1); }
html[data-world] .lp__hero { padding: var(--sp-2) 0 var(--sp-5); }
html[data-world] .lp__date { font-family: var(--head); font-size: 40px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; }
html[data-world] .lp__greet { color: var(--text-sub); margin: var(--sp-3) 0 var(--sp-5); font-size: var(--fs-md); }
html[data-world] .lp__hero .quote { margin: 0 0 var(--sp-5); }
html[data-world] .lp__block { margin-top: var(--sp-6); }
html[data-world] .lp__h2 { font-size: calc(20px * var(--fs-scale)); font-weight: 600; letter-spacing: 0.12em; color: var(--accent); margin-bottom: var(--sp-2); }
html[data-world] .lp__grouptitle { color: var(--accent); letter-spacing: 0.16em; font-family: var(--head); font-weight: 600; margin: var(--sp-5) 0 var(--sp-1); }
html[data-world] .lp__item { padding: var(--sp-4) 2px; border-bottom: 1px solid var(--line); }
html[data-world] .lp__item:active { background: var(--accent-weak); }
html[data-world] .lp__no { color: var(--accent); font-family: var(--head); }
html[data-world] .lp__arrow { background: var(--line-strong); }
html[data-world] .lp__arrow::after { border-color: var(--line-strong); }
html[data-world] .lp__foot { letter-spacing: 0.3em; }

/* ============================================================
   動き(曲の「1拍」から。変数 --beat は、世界ごとのファイルで決める)
   朝 72bpm=833ms / 夜 60bpm=1000ms / カフェ 96bpm=625ms / 散歩 108bpm=556ms
   動きは3つだけ: 現れる(半拍)・押す(¼拍)・移る(半拍)。点滅・ゆれつづける動きはしない。
   端末の「動きを減らす」がオンのときは、動かない(下の media の中だけで、動かしている)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html[data-world] .view { animation: world-in calc(var(--beat, 800ms) / 2) cubic-bezier(.2, .7, .2, 1) both; }
  html[data-world] .lp--enter .lp__hero > * { animation: world-in calc(var(--beat, 800ms) / 2) cubic-bezier(.2, .7, .2, 1) both; }
  html[data-world] .lp--enter .lp__hero > :nth-child(2) { animation-delay: calc(var(--beat, 800ms) / 8); }
  html[data-world] .lp--enter .lp__hero > :nth-child(3) { animation-delay: calc(var(--beat, 800ms) / 4); }
  html[data-world] .lp--enter .lp__hero > :nth-child(4) { animation-delay: calc(var(--beat, 800ms) * 3 / 8); }
  html[data-world] .lp--enter .lp__hero > :nth-child(5) { animation-delay: calc(var(--beat, 800ms) / 2); }
  html[data-world] .lp--enter .lp__block { animation: world-in calc(var(--beat, 800ms) / 2) cubic-bezier(.2, .7, .2, 1) calc(var(--beat, 800ms) * 5 / 8) both; }
  html[data-world] :is(.btn, .chip, .tile, .lp__item, .tabbar__item, .timerow, .row) {
    transition: transform calc(var(--beat, 800ms) / 4) ease-out, background-color calc(var(--beat, 800ms) / 4) ease-out;
  }
  html[data-world] :is(.btn, .chip, .tile, .lp__item):active { transform: scale(0.97); }
  html[data-world] .overlay__scrim { animation: world-fade calc(var(--beat, 800ms) / 2) ease both; }
  html[data-world] .sheet__card { animation: world-sheet calc(var(--beat, 800ms) / 2) cubic-bezier(.2, .7, .2, 1) both; }
  html[data-world] .dialog__card { animation: world-in calc(var(--beat, 800ms) / 2) cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes world-in    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes world-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes world-sheet { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }