/*
| 案1「夜が流れるサイト」（試作）
| 見た目の主役は「時刻」。空の色はお店の場所の時刻で変わり（夜明け・昼・夕暮れ・夜・深夜）、
| 出勤は時間の流れとして並ぶ。ほかのテーマのような飾りの枠は使わず、光と時間で見せる。
| 画面の組み立ては resources/views/themes/yoru/site/ にある。
*/
body[data-theme="yoru"] {
  --ink: #2b2a38;
  --muted: #5d5a6e;
  --paper: #fbfaf7;
  --line: #e6e2ea;
  --t-latin: "Cormorant Garamond", "Times New Roman", serif;
  --display: "Zen Old Mincho", var(--serif);
  --radius: 12px;
  background: #0f1226;
}
[data-theme="yoru"] .site-shell { background: var(--paper); }
[data-theme="yoru"] .site-header { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom: 0; color: #fff; }
[data-theme="yoru"] .site-shell { position: relative; }
[data-theme="yoru"] main { padding-top: 82px; }
[data-theme="yoru"] .site-header .brand-logo { color: #fff; }
[data-theme="yoru"] .site-header .brand strong { color: #fff; }
[data-theme="yoru"] .site-header .brand small { color: #ffffffcc; }
[data-theme="yoru"] .menu-toggle { background: #ffffff26; color: #fff; }
/* 空が無いページでは、ヘッダーの後ろに夜の帯を敷く */
[data-theme="yoru"] main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 82px; background: linear-gradient(180deg, #151a3a, #232a52); z-index: 0; }
[data-theme="yoru"] .site-header { z-index: 40; }

[data-theme="yoru"] .eyebrow { font-family: var(--t-latin); font-style: italic; font-weight: 500; font-size: .9375rem; letter-spacing: .08em; color: #6b5fa0; }
[data-theme="yoru"] .section-heading h2 { font-family: var(--display); font-weight: 700; letter-spacing: .06em; font-feature-settings: "palt"; }
[data-theme="yoru"] .section-heading .eyebrow::before { background: #6b5fa0; }
[data-theme="yoru"] .button-primary, [data-theme="yoru"] .bottom-nav a:last-child { background: linear-gradient(135deg, #3a3f7a, #1f2352); border-color: transparent; color: #fff; }
[data-theme="yoru"] .bottom-nav a[aria-current]:not(:last-child) { background: #ecebf7; color: #3a3f7a; }

/* ───── 空 ───── */
.sky {
  --sky-top: #151a3a; --sky-bottom: #3c3f7a; --sky-ink: #fff; --orb: #fff6d8; --glow: #fff6d855;
  position: relative; margin-top: -82px; padding: 100px 24px 30px; min-height: 420px;
  color: var(--sky-ink); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  transition: background 2s ease;
}
.sky[data-phase="dawn"] { --sky-top: #7f8fc9; --sky-bottom: #f6c6b4; --orb: #fff1c9; --glow: #ffe3a866; }
.sky[data-phase="day"] { --sky-top: #5f9fd9; --sky-bottom: #cfe8f5; --orb: #fffbe6; --glow: #fff6c880; --sky-ink: #16324a; }
.sky[data-phase="dusk"] { --sky-top: #3b3f7e; --sky-bottom: #f29b76; --orb: #ffd08a; --glow: #ffb36e77; }
.sky[data-phase="night"] { --sky-top: #0e1230; --sky-bottom: #33306a; --orb: #f6f0da; --glow: #f6f0da40; }
.sky[data-phase="midnight"] { --sky-top: #05060f; --sky-bottom: #1b1c3b; --orb: #e9e4cf; --glow: #e9e4cf30; }
.sky-stage { position: absolute; inset: 0; z-index: -1; }
/* 星は夜と深夜だけ。CSS の点で描く（画像なし） */
.sky-stars {
  position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 32%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 62% 26%, #fffbe8, transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, #fff, transparent), radial-gradient(1px 1px at 88% 36%, #fff, transparent),
    radial-gradient(1px 1px at 18% 48%, #fff, transparent), radial-gradient(1.3px 1.3px at 52% 44%, #fff, transparent),
    radial-gradient(1px 1px at 70% 52%, #fff, transparent), radial-gradient(1px 1px at 36% 58%, #fffbe8, transparent);
}
.sky[data-phase="night"] .sky-stars, .sky[data-phase="midnight"] .sky-stars { opacity: .9; animation: sky-twinkle 6s ease-in-out infinite alternate; }
@keyframes sky-twinkle { to { opacity: .55; } }
/* 太陽と月。--sky-x（0〜1）で東から西へ、弧を描いて動く */
.sky-orb {
  --x: calc(48% + var(--sky-x) * 44%);
  --lift: calc((0.25 - (var(--sky-x) - 0.5) * (var(--sky-x) - 0.5)) * 4);
  position: absolute; left: var(--x); top: calc(62% - var(--lift) * 44%);
  width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: var(--orb); box-shadow: 0 0 0 10px var(--glow), 0 0 60px 20px var(--glow);
}
/* 月は欠けた形（影を重ねる） */
.sky-orb.is-moon { width: 38px; height: 38px; margin-left: -19px; box-shadow: inset -11px -4px 0 0 var(--orb), 0 0 40px 8px var(--glow); background: transparent; }
.sky-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; fill: var(--paper); }
.sky-text { position: relative; }
.sky-clock { margin: 0; font-family: var(--t-latin); font-size: 4.25rem; font-weight: 500; line-height: 1; letter-spacing: .01em; font-variant-numeric: lining-nums; }
.sky-clock small { display: block; margin-top: 8px; font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .14em; opacity: .9; }
.sky h1 { margin: 24px 0 8px; font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt"; text-shadow: 0 2px 18px #0004; }
.sky-lead { margin: 0; font-size: .875rem; line-height: 1.9; opacity: .92; }

/* ───── 今、会える人 ───── */
.flow-now { background: var(--paper); }
.flow-count {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-left: 10px; padding: 0 8px;
  border-radius: 999px; background: #2e9b7a; color: #fff; font-family: var(--sans); font-size: .875rem; font-weight: 700; vertical-align: 4px;
}
.flow-now-list { list-style: none; margin: 0 -24px; padding: 4px 24px 8px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.flow-now-list::-webkit-scrollbar { display: none; }
.flow-now-list li { flex: 0 0 104px; scroll-snap-align: start; }
.flow-now-list a { display: grid; justify-items: center; gap: 4px; text-align: center; text-decoration: none; }
.flow-now-list strong { font-size: .9375rem; font-weight: 700; margin-top: 6px; }
.flow-now-list small { font-size: .6875rem; color: var(--muted); line-height: 1.5; }
.flow-face { position: relative; display: block; width: 96px; height: 96px; border-radius: 50%; }
.flow-face > img, .flow-face > .portrait-placeholder { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; display: block; aspect-ratio: 1; }
.flow-face > .portrait-placeholder > small { display: none; }
.flow-face.is-small { width: 56px; height: 56px; flex: none; }
.flow-face.is-tiny { width: 36px; height: 36px; flex: none; }
/* 今会える人の輪。ゆっくり脈打つ（動きを減らす設定の人には止める） */
.flow-pulse { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #2e9b7a; }
.flow-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #2e9b7a; animation: flow-pulse 2.4s ease-out infinite; }
@keyframes flow-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.22); opacity: 0; } }

/* ───── このあと会える人（縦の時間の線） ───── */
.flow-later { background: linear-gradient(180deg, var(--paper), #f1effa); }
.flow-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.flow-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#b7b0de, #3a3f7a); border-radius: 2px; }
.flow-timeline > li { position: relative; padding: 0 0 22px 14px; }
.flow-timeline > li::before { content: ""; position: absolute; left: -18px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid #3a3f7a; }
.flow-hour { margin: 0 0 10px; display: flex; align-items: baseline; gap: 6px; }
.flow-hour strong { font-family: var(--t-latin); font-size: 1.75rem; font-weight: 500; line-height: 1; color: #2b2a52; font-variant-numeric: lining-nums; }
.flow-hour small { font-size: .75rem; color: var(--muted); }
.flow-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow-people a { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px #2b2a5214; text-decoration: none; }
.flow-people strong { display: block; font-size: .9375rem; }
.flow-people small { display: block; font-size: .75rem; color: var(--muted); }

/* ───── 出勤表：夜の時間の流れ ───── */
.night-chart { --who: 108px; position: relative; margin: 8px 0 0; padding: 30px 0 4px; }
.night-scale { position: absolute; left: var(--who); right: 0; top: 0; height: 24px; border-bottom: 1px solid var(--line); }
.night-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--t-latin); font-size: 1rem; color: var(--muted); font-variant-numeric: lining-nums; }
.night-scale small { font-family: var(--sans); font-size: .625rem; }
.night-rows { list-style: none; margin: 0; padding: 0; }
.night-rows li { border-bottom: 1px solid var(--line); }
.night-rows a { display: grid; grid-template-columns: var(--who) 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0; padding: 10px 0; text-decoration: none; }
.night-who { display: flex; align-items: center; gap: 8px; min-width: 0; grid-row: span 2; padding-right: 8px; }
.night-who strong { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.night-track { position: relative; height: 14px; border-radius: 999px; background: repeating-linear-gradient(90deg, #eeecf5 0 1px, transparent 1px 12.5%); }
.night-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #8a84c8, #3a3f7a); }
.night-rows li.is-now .night-bar { background: linear-gradient(90deg, #5cc6a4, #2e9b7a); box-shadow: 0 0 12px #2e9b7a66; }
.night-rows li.is-closed .night-bar { background: #c9c6d4; }
.night-time { font-size: .75rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.night-time em { font-style: normal; font-weight: 700; margin-left: 6px; color: #7a5a8a; }
.night-time em.is-open { color: #1f7a5e; }
/* 今の位置に縦の線 */
.night-now {
  position: absolute; top: 24px; bottom: 0; width: 0; pointer-events: none;
  left: calc(var(--who) + (100% - var(--who)) * var(--now) / 100);
  border-left: 2px solid #e2596f;
}
.night-now small { position: absolute; top: -22px; left: 0; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: #e2596f; color: #fff; font-size: .625rem; font-weight: 700; white-space: nowrap; }
.night-subhead { font-size: 1rem; margin: 30px 0 14px; }

@media (prefers-reduced-motion: reduce) {
  .flow-pulse::after, .sky-stars { animation: none !important; }
}
/* 見出しは言葉の切れ目で折る（「行／きますか」のように割れないように） */
.sky h1 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
[data-theme="yoru"] .site-header .brand-logo .logo-leaf { fill: #ffd9a8; }

/* パソコンの左右の欄（2026-09-19 YUTAKAさん「文字が見えない」）: 夜空の上なので明るい文字に */
[data-theme="yoru"] .desktop-rail { --ink: #ecebf5; --muted: #b8b5cf; --accent-line: #ffffff24; color: var(--ink); }
[data-theme="yoru"] .desktop-rail .eyebrow { color: #b3a6ea; }
[data-theme="yoru"] .rail-menu > a[aria-current], [data-theme="yoru"] .rail-menu > a:hover { background: #ffffff12; color: #fff; }
[data-theme="yoru"] .rail-menu small { color: #b3a6ea; }
[data-theme="yoru"] .rail-hours-line { background: #ffffff10; border-color: #ffffff24; }
[data-theme="yoru"] .rail-recruit { background: #ffffff10; border-color: #ffffff30; color: #f2d7a6; }
[data-theme="yoru"] .rail-more { color: #f2d7a6; }
[data-theme="yoru"] .desktop-rail .brand-logo { color: #fff; }
[data-theme="yoru"] .desktop-rail .brand-logo .logo-leaf { color: #ffd9a8; fill: #ffd9a8; }

/* 本日の出勤の枠: 月（丸い窓）。月明かりのように淡く光る */
[data-theme="yoru"] .rail-frame { border: 1px dashed #ffffff30; border-radius: 50%; padding: 10px; aspect-ratio: 1; }
[data-theme="yoru"] .rail-frame::after { inset: -8px; border: 1px solid #f2d7a633; border-radius: 50%; }
[data-theme="yoru"] .rail-people-stage { aspect-ratio: 1; border-radius: 50%; background: #232a52; box-shadow: 0 0 36px #f2d7a640, 0 0 0 1px #f2d7a666; }
[data-theme="yoru"] .rail-people-stage::after { inset: 5px; border-radius: 50%; border-color: #ffffff66; }
[data-theme="yoru"] .rail-frame-ornament { font-size: 0; top: -14px; text-shadow: none; }
[data-theme="yoru"] .rail-frame-ornament::before { content: "☾"; font-size: 1.25rem; color: #f2d7a6; text-shadow: 0 0 10px #f2d7a699; }
[data-theme="yoru"] .rail-person-info { padding: 40px 18px 26px; background: linear-gradient(transparent, #0f1226cc); }
[data-theme="yoru"] .rail-person-info strong { font-size: 1.0625rem; white-space: nowrap; }
[data-theme="yoru"] .rail-person-info strong i { display: none; }
[data-theme="yoru"] .rail-dots i.is-active { background: #f2d7a6; }

/* 入口ページ（2026-09-19）: 夜空の上なので明るい文字に */
[data-theme="yoru"].age-page .entrance-brand .brand-logo { color: #fff; }
[data-theme="yoru"].age-page .entrance-brand .logo-leaf { color: #ffd9a8; fill: #ffd9a8; }
[data-theme="yoru"].age-page .entrance-catch { color: #ecebf5; }
[data-theme="yoru"].age-page .entrance-links a, [data-theme="yoru"].age-page .entrance-foot { color: #b8b5cf; }
[data-theme="yoru"].age-page .entrance-links .eyebrow { color: #b3a6ea; }
[data-theme="yoru"].age-page .age-dialog { background: var(--paper); color: var(--ink); border: 0; box-shadow: 0 0 40px #f2d7a626; }
[data-theme="yoru"].age-page .age-dialog .eyebrow { color: #6b5fa0; }
[data-theme="yoru"].age-page .age-exit { color: var(--muted); }
[data-theme="yoru"].age-page main::before { display: none; }