/*
| テーマ「ノワール」— 黒 × くすんだ金 × 細い二重線
| 調べた結果（docs/デザイン調査.md）から:
|  - 真っ黒でなく、少し紫がかった墨色。文字も真っ白でなく生成り色（まぶしくしない）
|  - 金は原色でなく、くすんだ金。線は細く、二重線と四隅の飾りで高級感を出す
|  - 英字の小見出しは Marcellus を大文字＋広い文字間、数字は Cormorant Garamond
|  - 暗い背景でも文字のコントラストは十分に取る（灰色の文字も明るめ）
*/
body[data-theme="noir"] {
  --ink: #efe8dc;
  --muted: #c9bfb0;
  --paper: #1b1820;
  --line: #3a3340;
  --second: #25302d;
  --second-ink: #a9d6c8;
  --accent-soft: #2a2430;
  --accent-line: #4a4052;
  --accent-mark: #5a4a3a;
  --t-gold: #c8a96a;
  --t-gold-dim: #c8a96a66;
  --t-wine: #7d3b5a;
  --t-surface: #221e27;
  --t-latin: "Cormorant Garamond", "Times New Roman", serif;
  --t-caps: "Marcellus", var(--t-latin);
  --display: "Shippori Mincho", var(--serif);
  --radius: 2px;

  color: var(--ink);
  background-color: #121015;
  background-image:
    radial-gradient(ellipse at 50% -10%, #3a2c3a 0, transparent 55%),
    radial-gradient(ellipse at 100% 80%, #2a1f2a 0, transparent 45%),
    /* ほのかなざらつき（自作の SVG ノイズ）。通信量はほぼゼロ */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
[data-theme="noir"] a { color: inherit; }
[data-theme="noir"] .site-shell { background: #17141bd9; box-shadow: 0 0 80px #000; }
[data-theme="noir"] .site-header,
[data-theme="noir"] .home-intro,
[data-theme="noir"] .home-visual,
[data-theme="noir"] .price-intro,
[data-theme="noir"] .site-footer,
[data-theme="noir"] .section-new,
[data-theme="noir"] .section-diary,
[data-theme="noir"] .section-blog { background: transparent; }
[data-theme="noir"] .site-header { border-bottom: 1px solid var(--t-gold-dim); }
[data-theme="noir"] .brand strong { font-weight: 600; letter-spacing: .14em; }
[data-theme="noir"] .brand small { font-family: var(--t-caps); font-weight: 400; font-size: .625rem; letter-spacing: .28em; color: var(--t-gold); }
[data-theme="noir"] .brand-flower { color: var(--t-gold); }
[data-theme="noir"] .menu-toggle { background: transparent; border: 1px solid var(--t-gold-dim); color: var(--t-gold); }
[data-theme="noir"] .site-menu { background: #1b1820; box-shadow: 0 12px 22px #0008; }

/* 見出し */
[data-theme="noir"] .eyebrow { font-family: var(--t-caps); font-weight: 400; font-size: .6875rem; letter-spacing: .3em; color: var(--t-gold); }
[data-theme="noir"] .section-heading .eyebrow::before { width: 26px; background: var(--t-gold); opacity: .7; }
[data-theme="noir"] .section-heading h2,
[data-theme="noir"] .home-intro h1,
[data-theme="noir"] .cast-detail h1,
[data-theme="noir"] .guide-banner h2 { font-weight: 600; letter-spacing: .14em; font-feature-settings: "palt"; }
[data-theme="noir"] .home-intro h1 span { background: linear-gradient(transparent 88%, var(--t-gold-dim) 88%); }
[data-theme="noir"] .section + .section { border-top: 0; background-image: linear-gradient(90deg, transparent, var(--t-gold-dim), transparent); background-size: 70% 1px; background-repeat: no-repeat; background-position: center top; }
[data-theme="noir"] .muted, [data-theme="noir"] .intro-description { color: var(--muted); }

/* ボタン: 金の細い二重線。塗りつぶしはワインレッド */
[data-theme="noir"] .button-primary,
[data-theme="noir"] .bottom-nav a:last-child {
  background: linear-gradient(135deg, #8a4264, #5e2c45); color: #f7efe2; border: 1px solid var(--t-gold);
  box-shadow: inset 0 0 0 3px #5e2c45, inset 0 0 0 4px #c8a96a80;
}
[data-theme="noir"] .button-outline, [data-theme="noir"] .contact-option { background: transparent; color: var(--ink); border-color: var(--t-gold-dim); }
[data-theme="noir"] .button-outline:hover, [data-theme="noir"] .contact-option:hover { background: #ffffff0a; }
[data-theme="noir"] .button-primary, [data-theme="noir"] .button-outline, [data-theme="noir"] .contact-option { border-radius: 0; letter-spacing: .1em; }
[data-theme="noir"] .bottom-nav { background: #141117f2; border-top: 1px solid var(--t-gold-dim); border-radius: 0; box-shadow: 0 -8px 24px #0009; }
[data-theme="noir"] .bottom-nav a { color: #d8cfc2; border-radius: 0 !important; }
[data-theme="noir"] .bottom-nav a[aria-current]:not(:last-child) { background: #ffffff0d; color: var(--t-gold); }

/* 面と枠: 金の細い線＋内側にもう1本（二重線）。四隅に小さな飾り */
[data-theme="noir"] .cast-info,
[data-theme="noir"] .course-card,
[data-theme="noir"] .notice-card,
[data-theme="noir"] .quick-links,
[data-theme="noir"] .shift-box,
[data-theme="noir"] .terms-fold,
[data-theme="noir"] .option-tiles li,
[data-theme="noir"] .manager-card,
[data-theme="noir"] .contact-note,
[data-theme="noir"] .selected-cast,
[data-theme="noir"] .empty-state {
  background: var(--t-surface); border: 1px solid var(--t-gold-dim); border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--t-surface), inset 0 0 0 4px #c8a96a26;
  color: var(--ink);
}
[data-theme="noir"] .course-card::before,
[data-theme="noir"] .course-card::after,
[data-theme="noir"] .notice-card::before,
[data-theme="noir"] .notice-card::after {
  content: ""; position: absolute; display: block; width: 10px; height: 10px; pointer-events: none; border-radius: 0; background: none;
  top: -1px; left: -1px; bottom: auto; right: auto; border-top: 2px solid var(--t-gold); border-left: 2px solid var(--t-gold);
}
[data-theme="noir"] .course-card::after,
[data-theme="noir"] .notice-card::after {
  top: auto; left: auto; right: -1px; bottom: -1px; border: 0;
  border-bottom: 2px solid var(--t-gold); border-right: 2px solid var(--t-gold);
}
[data-theme="noir"] .notice-card { position: relative; }

/* ───── 人のカード ───── */
[data-theme="noir"] .cast-card { background: transparent; }
[data-theme="noir"] .cast-picture { border-radius: 0; background: #2a2430; box-shadow: 0 12px 28px #0009; }
[data-theme="noir"] .cast-picture::after { border-radius: 0; box-shadow: inset 0 0 0 1px #c8a96a40; }
/* 写真の下だけ暗くして、札の文字を読みやすく */
[data-theme="noir"] .cast-picture::before {
  content: ""; position: absolute; inset: 55% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, #000000a6);
}
[data-theme="noir"] .cast-info { margin-top: 0; border-top: 0; padding: 12px 9px 10px; text-align: center; }
[data-theme="noir"] .cast-info h3 { justify-content: center; font-family: var(--display); font-weight: 600; letter-spacing: .14em; }
[data-theme="noir"] .cast-info h3 small, [data-theme="noir"] .cast-meta, [data-theme="noir"] .cast-measurements, [data-theme="noir"] .cast-tagline { color: var(--muted); }
[data-theme="noir"] .cast-meta, [data-theme="noir"] .cast-measurements { font-size: .6875rem; font-variant-numeric: tabular-nums; }
[data-theme="noir"] .cast-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
[data-theme="noir"] .cast-tags span { background: transparent; color: #e3cf9f; border: 1px solid #c8a96a4d; border-radius: 0; padding: 2px; text-align: center; }
[data-theme="noir"] .cast-tagline { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 8px; }
[data-theme="noir"] .cast-info .shift-time,
[data-theme="noir"] .cast-info .shift-state:not(.is-quiet) { display: none; }
[data-theme="noir"] .cast-info .shift-state.is-quiet { background: #ffffff14; color: var(--muted); }
[data-theme="noir"] .wait-label { color: var(--second-ink); }
[data-theme="noir"] .photo-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  color: #f3e3bf; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 4px #000;
}
[data-theme="noir"] .photo-badge svg { width: 14px; height: 14px; stroke-width: 2; color: var(--t-gold); }
[data-theme="noir"] .new-label {
  top: 0; left: 0; padding: 3px 10px; border-radius: 0;
  background: var(--t-gold); color: #1b1820; font-family: var(--t-caps); font-size: .625rem; letter-spacing: .2em;
}
[data-theme="noir"] .portrait-placeholder { background: #2a2430; }

/* ───── 出勤表 ───── */
[data-theme="noir"] .schedule-caption { flex-wrap: wrap; }
[data-theme="noir"] .caption-date {
  display: inline-flex; align-items: baseline; gap: 10px; margin: 0; padding: 0 0 6px;
  border-bottom: 1px solid var(--t-gold-dim); color: var(--t-gold);
  font-family: var(--t-latin); font-weight: 500; font-size: 2.5rem; line-height: 1.1; letter-spacing: .04em;
}
[data-theme="noir"] .caption-date small { font-family: var(--t-caps); font-size: .75rem; letter-spacing: .25em; color: var(--muted); }
[data-theme="noir"] .schedule-caption h3 { flex-basis: 100%; font-family: var(--display); letter-spacing: .12em; }
[data-theme="noir"] .schedule-caption small, [data-theme="noir"] .schedule-note { color: var(--muted); }
[data-theme="noir"] .date-tabs > a, [data-theme="noir"] .filter-tabs a, [data-theme="noir"] .pagination a { background: transparent; border-color: var(--line); border-radius: 0; color: var(--ink); }
[data-theme="noir"] .date-tabs strong { font-family: var(--t-latin); font-size: 1.75rem; font-weight: 500; }
[data-theme="noir"] .date-tabs a[aria-current],
[data-theme="noir"] .filter-tabs a[aria-current] { background: transparent; border-color: var(--t-gold); color: var(--t-gold); box-shadow: inset 0 0 0 1px var(--t-gold); }

/* ───── 人の詳細 ───── */
[data-theme="noir"] .photo-stage, [data-theme="noir"] .detail-photo { border-radius: 0; background: #2a2430; box-shadow: 0 16px 40px #000a; }
[data-theme="noir"] .photo-thumb { border-radius: 0; background: #2a2430; }
[data-theme="noir"] .photo-thumb.is-active { box-shadow: 0 0 0 1px var(--t-gold); }
[data-theme="noir"] .photo-nav { background: #17141be0; color: var(--t-gold); }
[data-theme="noir"] .cast-photo-area > .back-link { color: var(--t-gold); }
[data-theme="noir"] .cast-detail .badge { background: transparent; border: 1px solid #c8a96a4d; color: #e3cf9f; }
[data-theme="noir"] .shift-box-label { color: var(--t-gold); }
[data-theme="noir"] .shift-box-state { background: var(--t-wine); color: #f7efe2; }
[data-theme="noir"] .shift-box-state.is-open { background: var(--second); color: var(--second-ink); }
[data-theme="noir"] .faq summary { font-family: var(--display); letter-spacing: .08em; }
[data-theme="noir"] .faq > div { color: var(--muted); }

/* ───── 料金ページ ───── */
[data-theme="noir"] .course-card { padding: 18px 20px; }
[data-theme="noir"] .course-time { background: transparent; border: 1px solid var(--t-gold); color: var(--t-gold); box-shadow: inset 0 0 0 3px var(--t-surface), inset 0 0 0 4px #c8a96a40; }
[data-theme="noir"] .course-time strong { font-family: var(--t-latin); font-size: 1.625rem; font-weight: 500; }
[data-theme="noir"] .course-time small { font-family: var(--t-caps); font-size: .5625rem; letter-spacing: .2em; }
[data-theme="noir"] .course-name { font-family: var(--display); font-weight: 600; letter-spacing: .04em; }
[data-theme="noir"] .course-name small, [data-theme="noir"] .option-tiles li > small { color: var(--muted); }
[data-theme="noir"] .course-price, [data-theme="noir"] .extension-list strong, [data-theme="noir"] .option-tiles strong {
  font-family: var(--t-latin); font-weight: 500; letter-spacing: .02em; color: #f3e3bf;
}
[data-theme="noir"] .course-price { font-size: 1.875rem; }
[data-theme="noir"] .course-price small { color: var(--t-gold); }
[data-theme="noir"] .extension-list li { background: transparent; border: 1px solid var(--line); border-radius: 0; color: var(--ink); }
[data-theme="noir"] .extension-list svg { color: var(--t-gold); }
[data-theme="noir"] .extension-list strong { font-size: 1.5rem; }
[data-theme="noir"] .option-name { font-family: var(--display); letter-spacing: .08em; }
[data-theme="noir"] .option-tiles strong { font-size: 1.375rem; }
[data-theme="noir"] .notice-card h3 { font-family: var(--display); letter-spacing: .1em; }
[data-theme="noir"] .notice-card h3 svg, [data-theme="noir"] .terms-fold summary svg { color: var(--t-gold); }
[data-theme="noir"] .text-rows > div { border-top: 1px solid var(--line); }
[data-theme="noir"] .text-rows dt { color: var(--muted); }
[data-theme="noir"] .terms-fold summary span { color: var(--muted); }
[data-theme="noir"] .terms-fold .terms-body { border-top-color: var(--line); }

/* ───── その他 ───── */
[data-theme="noir"] .quick-links strong { font-family: var(--t-latin); font-size: 2rem; font-weight: 500; color: var(--t-gold); }
[data-theme="noir"] .quick-links svg { color: var(--t-gold); }
[data-theme="noir"] .quick-links > a + a { border-left-color: var(--line); }
[data-theme="noir"] .intro-guide a { background: var(--t-gold); color: #14110d; box-shadow: none; }
[data-theme="noir"] .text-link { color: var(--t-gold); }
[data-theme="noir"] .guide-banner { background: linear-gradient(160deg, #2a2230, #1d2522); }
[data-theme="noir"] .guide-banner .eyebrow { color: var(--t-gold); }
[data-theme="noir"] .guide-banner p { color: var(--muted); }
[data-theme="noir"] .story { border-bottom-color: var(--line); }
[data-theme="noir"] .story-image { background: #2a2430; box-shadow: none; border-radius: 0; }
[data-theme="noir"] .story-date, [data-theme="noir"] .story-author { color: var(--muted); }
[data-theme="noir"] .story-type, [data-theme="noir"] .story-monogram { color: var(--t-gold); }
[data-theme="noir"] .site-footer { border-top-color: var(--t-gold-dim); color: var(--muted); }
[data-theme="noir"] .footer-brand { font-family: var(--display); letter-spacing: .14em; color: var(--ink); }
[data-theme="noir"] .shift-list li, [data-theme="noir"] .faq, [data-theme="noir"] .info-row, [data-theme="noir"] .profile-fields { border-color: var(--line); }
[data-theme="noir"] .info-row h3, [data-theme="noir"] .contact-option small { color: var(--muted); }
[data-theme="noir"] .shift-state { color: #e3cf9f; }
[data-theme="noir"] .age-dialog { background: #1b1820; color: var(--ink); border: 1px solid var(--t-gold-dim); border-radius: 0; box-shadow: inset 0 0 0 4px #1b1820, inset 0 0 0 5px #c8a96a40, 0 20px 80px #000; }
[data-theme="noir"] .age-dialog::backdrop { background: #000000b3; }
[data-theme="noir"] .age-dialog h2 { font-family: var(--display); letter-spacing: .12em; }
[data-theme="noir"] .age-exit { color: var(--muted); }
[data-theme="noir"] :focus-visible { outline-color: var(--t-gold); }

[data-theme="noir"] .course-price, [data-theme="noir"] .course-time strong, [data-theme="noir"] .extension-list strong,
[data-theme="noir"] .option-tiles strong, [data-theme="noir"] .caption-date, [data-theme="noir"] .date-tabs strong,
[data-theme="noir"] .quick-links strong { font-variant-numeric: lining-nums tabular-nums; }

/* フッター「お店からの手紙」を夜の便箋に */
[data-theme="noir"] .site-footer.footer-letter-style { background: transparent; }
[data-theme="noir"] .footer-letter {
  background-color: #1f1b24; color: var(--ink); border-color: var(--t-gold-dim);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, #c8a96a26 31px 32px);
  box-shadow: 0 12px 30px #0008;
}
[data-theme="noir"] .footer-letter::before { background: repeating-linear-gradient(135deg, var(--t-gold) 0 10px, transparent 10px 16px, var(--t-wine) 16px 26px, transparent 26px 32px); }
[data-theme="noir"] .footer-letter-body { color: var(--ink); }
[data-theme="noir"] .footer-postmark { background: #1f1b24e6; border-color: var(--t-gold-dim); color: var(--t-gold); box-shadow: inset 0 0 0 3px #1f1b24, inset 0 0 0 4px #c8a96a40; }
[data-theme="noir"] .footer-now > * { background: var(--t-surface); border-color: var(--line); color: var(--ink); }
[data-theme="noir"] .footer-now-open.is-open strong { color: #8fd8bd; }
[data-theme="noir"] .footer-index a { color: var(--ink); border-color: var(--line); }
[data-theme="noir"] .footer-index { border-color: var(--line); }
[data-theme="noir"] .footer-index a small { color: var(--t-gold); }
[data-theme="noir"] .footer-base { color: var(--muted); }
[data-theme="noir"] .costume-box { background: var(--t-surface); border-color: var(--t-gold-dim); border-radius: 0; }
[data-theme="noir"] .costume-count { background: transparent; border: 1px solid var(--t-gold); color: var(--t-gold); }
[data-theme="noir"] .costume-open { background: var(--t-wine); color: #f7efe2; border-radius: 0; }
[data-theme="noir"] .costume-list li { background: #ffffff08; border-radius: 0; }

/* パソコンの左右の欄（2026-09-19）: 受付時間・求人の箱を夜の色に */
[data-theme="noir"] .rail-hours-line { background: var(--t-surface); border-color: var(--line); }
[data-theme="noir"] .rail-recruit { background: transparent; border-color: var(--t-gold-dim); color: var(--t-gold); border-radius: 0; }

/* 本日の出勤の枠: 金の二重線の額縁、四隅にアールデコの角飾り */
[data-theme="noir"] .rail-frame { border: 1px solid var(--t-gold-dim); border-radius: 0; padding: 10px;
  background:
    linear-gradient(var(--t-gold), var(--t-gold)) left top / 18px 2px no-repeat,
    linear-gradient(var(--t-gold), var(--t-gold)) left top / 2px 18px no-repeat,
    linear-gradient(var(--t-gold), var(--t-gold)) right top / 18px 2px no-repeat,
    linear-gradient(var(--t-gold), var(--t-gold)) right top / 2px 18px no-repeat,
    linear-gradient(var(--t-gold), var(--t-gold)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--t-gold), var(--t-gold)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--t-gold), var(--t-gold)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--t-gold), var(--t-gold)) right bottom / 2px 18px no-repeat; }
[data-theme="noir"] .rail-frame::after { inset: -6px; border: 1px solid #c8a96a33; border-radius: 0; }
[data-theme="noir"] .rail-people-stage { border-radius: 0; background: var(--t-surface); box-shadow: 0 18px 40px -20px #000; }
[data-theme="noir"] .rail-people-stage::after { border-radius: 0; border-color: #c8a96a80; }
[data-theme="noir"] .rail-frame-ornament { font-size: 0; top: -12px; text-shadow: none; background: #121015; padding: 0 8px; }
[data-theme="noir"] .rail-frame-ornament::before { content: "◆"; font-size: .75rem; color: var(--t-gold); }
[data-theme="noir"] .rail-person-info strong { font-family: var(--t-caps), var(--display); letter-spacing: .14em; }
[data-theme="noir"] .rail-person-info strong i { background: var(--t-gold); }
[data-theme="noir"] .rail-dots i.is-active { background: var(--t-gold); }

/* 人のカードの枠（2026-09-19 YUTAKAさん「全サイトに枠を」）: 夜の色のカードに、くすんだ金の細い線と内側の線 */
[data-theme="noir"] .cast-card { display: flex; flex-direction: column; padding: 6px 6px 4px; background: var(--t-surface); border: 1px solid var(--t-gold-dim); outline: 1px solid #c8a96a24; outline-offset: -4px; box-shadow: 0 14px 30px #0008; }
[data-theme="noir"] .cast-picture { box-shadow: none; }