/*
 * ミッドナイト — 配色・書体・形の定義
 *
 * 親テーマ（cyen-front-theme）が骨格を、プラグインの tokens.css が既定値を持つ。
 * このファイルはその値を上書きするだけで、レイアウトには手を入れない。
 *
 * 濃紺寄りの黒地に真鍮のアクセント。角丸を落とし、影ではなく罫線で面を区切る。
 */

:root {
    --cyen-bg: #141118;
    --cyen-surface: #1e1a22;
    --cyen-surface-sunk: #262029;
    --cyen-surface-mute: #2f2833;

    --cyen-text-strong: #f4efe6;
    --cyen-text: #e6ded2;
    --cyen-text-muted: #a1968a;
    --cyen-text-faint: #7d7368;
    --cyen-text-inverse: #141118;

    --cyen-border: #332c39;
    --cyen-border-strong: #4a4051;

    --cyen-accent: #c9a24d;
    --cyen-accent-text: #17131b;
    --cyen-accent-soft: #2a2318;

    --cyen-success: #7fc4a0;
    --cyen-success-soft: #1b2b23;
    --cyen-success-border: #3d5c4c;
    --cyen-warning: #d9a441;
    --cyen-warning-soft: #2a2318;
    --cyen-warning-border: #5c4a25;
    --cyen-danger: #e2707a;
    --cyen-danger-strong: #f0838c;
    --cyen-danger-soft: #2b1a1d;
    --cyen-danger-border: #5e343a;
    --cyen-star: #d8ad4e;

    --cyen-day-sat: #7fa8e0;
    --cyen-day-sun: #e2707a;
    --cyen-day-holiday: #e2707a;
    --cyen-badge-new: #c9a24d;

    --cyen-fill-bg: #c9a24d;
    --cyen-fill-text: #17131b;

    --cyen-chip-bg: #2b2431;
    --cyen-chip-text: #cfc4b6;
    --cyen-chip-active-bg: #c9a24d;
    --cyen-chip-active-text: #17131b;

    --cyen-overlay: rgba(10, 8, 12, .45);
    --cyen-overlay-strong: rgba(10, 8, 12, .72);
    --cyen-overlay-weak: rgba(10, 8, 12, .5);
    --cyen-overlay-dot: rgba(244, 239, 230, .5);

    /* 角丸をほぼ捨てて、罫線で構成する */
    --cyen-radius-lg: 3px;
    --cyen-radius-md: 3px;
    --cyen-radius-sm: 2px;
    --cyen-radius-xs: 2px;

    /* 暗い地では影がほとんど効かないので、罫線に寄せる */
    --cyen-shadow-sm: none;
    --cyen-shadow-md: none;

    /* 見出しは明朝、英字ラベルは字間を広げたサンセリフ */
    --cyen-font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
    --cyen-font-en: "Optima", "Palatino Linotype", Georgia, serif;
    --cyen-heading-weight: 500;
    --cyen-heading-tracking: .08em;

    --cyen-section-rule: #4a4051;
    --cyen-section-accent: #c9a24d;
}

/*
 * ====================================================
 *  ミッドナイト
 * ====================================================
 * 濃い地に真鍮。角丸を捨て、罫線と余白で構成する。
 * 色は tokens.css 側で切り替わるので、ここでは構造だけを扱う。
 *
 * 【重要】部品の上書きは必ず body で始める。
 * プラグインの frontend-shortcodes.css は本文の描画中に読み込まれるため、
 * この skin.css より後ろに来る。同じ詳細度で書くと読み込み順で負ける。
 * body を1つ足して (0,1,1) にすれば、順序に関係なく勝てる。
 */

body {
    background: var(--cyen-bg);
    color: var(--cyen-text);
}

/* ---- 見出し：英字ラベルを添えた2段組 ---- */
body .cyen-section-title {
    position: relative;
    margin: 0 0 22px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--cyen-section-rule);
    font-size: 21px;
    line-height: 1.5;
    color: var(--cyen-text-strong);
}

body .cyen-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 1px;
    background: var(--cyen-section-accent);
}

/* ---- カード：罫線で構成し、写真を大きく見せる ---- */
body .cyen-cast-card {
    background: var(--cyen-surface);
    border: 1px solid var(--cyen-border);
    border-radius: var(--cyen-radius-lg);
    box-shadow: none;
    transition: border-color .2s ease;
}

body .cyen-cast-card:hover {
    border-color: var(--cyen-accent);
}

body .cyen-cast-card-body {
    padding: 14px 14px 16px;
}

body .cyen-cast-card-name {
    color: var(--cyen-text-strong);
    font-size: 18px;
}

body .cyen-cast-card-shift {
    color: var(--cyen-accent);
    font-weight: 400;
    letter-spacing: .06em;
    font-family: var(--cyen-font-en, inherit);
}

body .cyen-cast-card-specs,
body .cyen-cast-card-copy {
    color: var(--cyen-text-muted);
}

/* ---- タグ ---- */
body .cyen-cast-tag {
    background: transparent;
    border: 1px solid var(--cyen-border-strong);
    color: var(--cyen-text-muted);
    border-radius: var(--cyen-radius-xs);
}

body .cyen-cast-tag-filter-item {
    background: transparent;
    border-color: var(--cyen-border-strong);
    color: var(--cyen-text-muted);
    border-radius: var(--cyen-radius-xs);
    letter-spacing: .04em;
}

body .cyen-cast-tag-filter-item:hover {
    border-color: var(--cyen-accent);
    color: var(--cyen-text-strong);
}

body .cyen-cast-tag-filter-item.is-active {
    background: var(--cyen-accent);
    border-color: var(--cyen-accent);
    color: var(--cyen-accent-text);
}

/* ---- NEWバッジ ---- */
body .cyen-cast-card-badge.is-new {
    background: var(--cyen-accent);
    color: var(--cyen-accent-text);
    font-family: var(--cyen-font-en, inherit);
    letter-spacing: .12em;
    border-radius: 0;
}

/* ---- 日付タブ ---- */
body .cyen-date-tab {
    background: transparent;
    border: 1px solid var(--cyen-border);
    color: var(--cyen-text-muted);
    border-radius: var(--cyen-radius-xs);
}

body .cyen-date-tab.is-active {
    background: var(--cyen-accent);
    border-color: var(--cyen-accent);
    color: var(--cyen-accent-text);
}

/* ---- ボタン ---- */
body .cyen-front-btn {
    background: transparent;
    border: 1px solid var(--cyen-accent);
    color: var(--cyen-accent);
    border-radius: var(--cyen-radius-xs);
    letter-spacing: .04em;
    transition: background .2s ease, color .2s ease;
}

body .cyen-front-btn:hover {
    background: var(--cyen-accent);
    color: var(--cyen-accent-text);
}

/* ---- 口コミ ---- */
body .cyen-review-item,
body .cyen-review-form-wrap {
    background: var(--cyen-surface);
    border-color: var(--cyen-border);
}

body .cyen-review-reply {
    background: var(--cyen-surface-sunk);
    border-left-color: var(--cyen-accent);
}

/* ---- イベント ---- */
body .cyen-event-title {
    color: var(--cyen-text-strong);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cyen-section-rule);
}

body .cyen-event-list-link {
    background: var(--cyen-surface);
    border-color: var(--cyen-border);
}

/* ---- 料金表 ----
   見出しを塗りつぶすと3枚並んだときに重くなるので、
   沈んだ面＋真鍮の文字と下線で、他のセクション見出しと揃える。 */
body .cyen-front-wrap.cyen-price-system .cyen-price-heading {
    background: var(--cyen-surface-sunk);
    color: var(--cyen-accent);
    border-bottom: 1px solid var(--cyen-border-strong);
    font-family: var(--cyen-font-display, inherit);
    font-weight: var(--cyen-heading-weight, 500);
    letter-spacing: var(--cyen-heading-tracking, .08em);
}

body .cyen-front-wrap.cyen-price-system .cyen-price-section {
    background: var(--cyen-surface);
    border-color: var(--cyen-border);
}

body .cyen-front-wrap.cyen-price-system .cyen-price-table th {
    background: var(--cyen-surface-sunk);
    color: var(--cyen-text-muted);
}

body .cyen-front-wrap.cyen-price-system .cyen-price-table td:last-child {
    color: var(--cyen-accent);
}

/* ---- AI予約チャット ----
   送信ボタンは真鍮のベタ塗り。相手の発言は面、自分の発言は真鍮で左右を分ける。 */
body .cyen-memberchat-title {
    font-family: var(--cyen-font-display, inherit);
    font-weight: var(--cyen-heading-weight, 500);
    letter-spacing: var(--cyen-heading-tracking, .08em);
}

body .cyen-memberchat-messages {
    background: var(--cyen-bg);
}

body .cyen-memberchat-msg.is-ai {
    border-color: var(--cyen-border-strong);
}

body .cyen-memberchat-chip:hover {
    background: var(--cyen-accent-soft);
}

body .cyen-memberchat-input:focus {
    box-shadow: 0 0 0 1px var(--cyen-accent);
}

/* ---- 入力欄 ---- */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body select,
body textarea {
    background: var(--cyen-surface-sunk);
    border-color: var(--cyen-border-strong);
    color: var(--cyen-text);
}

body input::placeholder,
body textarea::placeholder {
    color: var(--cyen-text-faint);
}

/* ---- 画像まわり ---- */
body .cyen-cast-card-image,
body .cyen-front-noimage,
body .cyen-review-cast-image {
    background: var(--cyen-surface-sunk);
}

body .cyen-front-noimage {
    color: var(--cyen-text-faint);
}

/* ---- ヘッダー（2段構成） ----
   上段と下段を罫線で分け、メニューは枠線ベースの控えめな見た目にする。 */
body .cyen-site-header-bottom {
    border-top-color: var(--cyen-border);
    background: var(--cyen-surface-sunk);
}

body .cyen-site-nav-list a {
    background: transparent;
    border-color: transparent;
    color: var(--cyen-text-muted);
    border-radius: var(--cyen-radius-xs);
    letter-spacing: .04em;
    transition: color .15s ease, border-color .15s ease;
}

body .cyen-site-nav-list a:hover {
    color: var(--cyen-accent);
    border-color: var(--cyen-border-strong);
}

/* 営業時間は情報として読ませたいので、細字・低コントラストにしない */
body .cyen-site-hours {
    background: var(--cyen-surface-sunk);
    border-color: var(--cyen-border-strong);
    color: var(--cyen-text);
    font-weight: 600;
    letter-spacing: .04em;
}

/* 電話番号は真鍮のベタ塗りで最優先。数字は明るい地に濃い文字で読ませる */
body .cyen-site-call {
    background: var(--cyen-accent);
    border-color: var(--cyen-accent);
    color: var(--cyen-accent-text);
}

body .cyen-site-call:hover {
    background: var(--cyen-text-strong);
    border-color: var(--cyen-text-strong);
    color: var(--cyen-bg);
}