/* CastSuite public-facing styles (cast list + profile) */

:root {
    --cs-primary: #e91e63;
    --cs-primary-dark: #c2185b;
    --cs-text: #333333;
    --cs-text-light: #666666;
    --cs-bg: #ffffff;
    --cs-bg-light: #f7f7f7;
    --cs-border: #e5e5e5;
    --cs-success: #4caf50;
    --cs-radius: 8px;
    --cs-radius-lg: 14px;
    --cs-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --cs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --cs-transition: 0.2s ease;
    --cs-container-max-width: 1200px;
    --cs-card-min-width: 220px;
    --cs-card-max-width: 280px;
    /* デザインテンプレート(DesignPresets)が差し替える。既定値は従来の
       挙動そのまま — 背景は敷かず、フォント・字間はテーマのものを継承。 */
    --cs-page-bg: transparent;
    --cs-font-family: inherit;
    --cs-letter-spacing: normal;
}

/* Some themes always render a sidebar/widget-area column next to the main
   content unless a per-page layout setting says otherwise. Our pages are
   created programmatically (wp_insert_post), so they never get whatever
   per-page "1カラム" meta value the theme's editor UI would normally set —
   this hides the sidebar and lets our content take the full width instead,
   regardless of that per-page setting. .sub-section is Lightning G3's
   confirmed sidebar wrapper (rendered by template-parts/sidebar*.php,
   matching the lightning_sub_section_* action names in its index.php);
   the #secondary/.widget-area/aside selectors are a best-effort fallback
   for the common _s (Underscores)-derived pattern other themes share. */
body:has(.cs-container) .sub-section,
body:has(.cs-container) #main ~ #secondary,
body:has(.cs-container) #main ~ .widget-area,
body:has(.cs-container) #main ~ aside,
body:has(.cs-container) .site-body-container > #secondary,
body:has(.cs-container) .site-body-container > .widget-area,
body:has(.cs-container) #secondary,
body:has(.cs-container) #primary + aside {
    display: none !important;
}

body:has(.cs-container) #main,
body:has(.cs-container) .main-section,
body:has(.cs-container) #primary {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
}

/* キャストログイン・キャストマイページだけは、サイト全体のナビゲー
   ションメニューも隠す — スタッフ専用の作業画面であり、お客様向けの
   サイト内メニューは不要かつ離脱の誘因になるだけなので。ロゴ等を含む
   ヘッダー全体ではなく、ナビゲーション部分のみを対象にしている。
   (customer側のログイン・マイページは対象外 — 通常のサイト訪問者
   なので、サイト内を移動しやすいメニューを残す。)
   `header nav`/`footer nav` はこのテーマの実際のマークアップで確認
   済み(ヘッダー・フッターどちらのグローバルナビも `<nav>` 要素)。
   他の命名パターン(#g-nav等)は未確認だったため削除し、確認済みの
   ものに絞った。 */
body:has(.cs-cast-login) header nav,
body:has(.cs-cast-login) footer nav,
body:has(.cs-cast-mypage) header nav,
body:has(.cs-cast-mypage) footer nav {
    display: none !important;
}

/* パンくずリストも同様に非表示。ただしこちらは実際のマークアップ未
   確認のため、Lightningでよくある命名(.pankuzu/#pankuzu)とBreadcrumb
   NavXT等の一般的な命名(.breadcrumbs/#breadcrumbs/.breadcrumb/
   nav[aria-label="breadcrumb"])をまとめてベストエフォートで指定して
   いる。消えない場合は実際のクラス名を教えてもらい、ここに追加する。 */
body:has(.cs-cast-login) .pankuzu,
body:has(.cs-cast-login) #pankuzu,
body:has(.cs-cast-login) .breadcrumbs,
body:has(.cs-cast-login) #breadcrumbs,
body:has(.cs-cast-login) .breadcrumb,
body:has(.cs-cast-login) nav[aria-label="breadcrumb"],
body:has(.cs-cast-mypage) .pankuzu,
body:has(.cs-cast-mypage) #pankuzu,
body:has(.cs-cast-mypage) .breadcrumbs,
body:has(.cs-cast-mypage) #breadcrumbs,
body:has(.cs-cast-mypage) .breadcrumb,
body:has(.cs-cast-mypage) nav[aria-label="breadcrumb"] {
    display: none !important;
}

.cs-container {
    max-width: var(--cs-container-max-width);
    margin: 0 auto;
    padding: 24px 16px 48px;
    background: var(--cs-page-bg);
    font-family: var(--cs-font-family);
    letter-spacing: var(--cs-letter-spacing);
    color: var(--cs-text);
}

/* Reset baseline for bare tags inside our markup, so theme/Bootstrap global
   styles (e.g. Lightning's h1-h6, table, ul/li, a color/underline resets)
   don't bleed in. Our component classes below re-apply the real styling. */
.cs-container,
.cs-container *,
.cs-container *::before,
.cs-container *::after {
    box-sizing: border-box;
}

/* :where() keeps these targeting the same elements but contributes zero
   specificity itself, so this block's real specificity is just the single
   .cs-container class (0,1,0) — same as any single component class like
   .cs-btn or .cs-ranking-tab. Without :where(), pairing the class with an
   element (e.g. ".cs-container button", (0,1,1)) would silently outrank
   and override every single-class button/link component below it,
   regardless of source order — which is exactly what was happening to
   .cs-ranking-tab's and .cs-btn's padding. */
.cs-container :where(h1, h2, h3, p, ul, li, table, th, td) {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: normal;
    line-height: normal;
    background: none;
    border: 0;
    text-decoration: none;
    list-style: none;
    text-align: left;
}

/* テーマ(Lightning)は見出しの下線を実際のtext-decorationではなく
   h2/h3::afterの疑似要素(border-bottomやbackground)で描画している
   ため、上のtext-decoration: noneだけでは消えなかった — content: none
   で疑似要素自体を無効化する。 */
.cs-container :where(h1, h2, h3, p)::before,
.cs-container :where(h1, h2, h3, p)::after {
    content: none;
    display: none;
}

.cs-container :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.cs-container :where(a) {
    color: inherit;
    text-decoration: none;
    background: none;
}

.cs-container :where(img) {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
}

/* Same :where() reasoning as above, extended to form controls: themes built
   on Bootstrap-style form-control rules (Lightning G3 confirmed) force
   input/select/textarea to width:100%,display:block — with no competing
   width declared on our own field classes, that leaked straight through,
   stretching e.g. the age filter's number input to the full row. Setting a
   real (if unopinionated) width here means every .cs-*-filter__field etc.
   below only has to override it when it actually wants something other
   than "size to content", not fight the theme for the property at all. */
.cs-container :where(input, select, textarea) {
    width: auto;
    max-width: 100%;
    font: inherit;
    color: inherit;
    box-sizing: border-box;
    display: inline-block;
}

.cs-archive-title {
    font-size: 1.6rem;
    margin: 0 0 24px;
}

.cs-no-results {
    color: var(--cs-text-light);
}

/* ===== Badges ===== */
.cs-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.cs-badge--available {
    background: var(--cs-success);
    color: #fff;
}

.cs-badge--active-now {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--cs-success);
    color: #fff;
}

.cs-badge__dot {
    /* display:inline-block (not the default inline): a plain inline <span>
       ignores width/height entirely per spec, so without this the dot had
       no box to render at all — not "not blinking", just never visible. */
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: cs-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes cs-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.cs-badge--grade {
    background: var(--cs-primary);
    color: #fff;
}

.cs-badge--category {
    background: var(--cs-bg-light);
    color: var(--cs-text-light);
    border: 1px solid var(--cs-border);
}

.cs-badge--birthday {
    background: linear-gradient(135deg, #ff6fa5, #ffb86b);
    color: #fff;
}

.cs-profile__birthday-badge {
    margin: 4px 0 0;
}

/* ===== Cast grid / card (list view) ===== */
.cs-cast-grid {
    display: grid;
    /* auto-fit (not auto-fill) collapses unused tracks instead of leaving
       empty ones, and the minmax upper bound keeps cards from stretching
       to fill the row — together this centers a short result set (e.g. a
       ranking with only 2-3 casts) instead of leaving it flush-left with
       a lopsided block of empty space next to it. */
    grid-template-columns: repeat(auto-fit, minmax(var(--cs-card-min-width), var(--cs-card-max-width)));
    justify-content: center;
    gap: 20px;
}

.cs-cast-card {
    background: var(--cs-bg);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    transition: transform var(--cs-transition), box-shadow var(--cs-transition);
}

.cs-cast-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cs-shadow-lg);
}

.cs-cast-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cs-cast-card__image {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--cs-bg-light);
    overflow: hidden;
}

.cs-cast-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-cast-card__image .cs-badge {
    position: absolute;
    top: 8px;
}

.cs-cast-card__image .cs-badge--available,
.cs-cast-card__image .cs-badge--active-now {
    left: 8px;
}

.cs-cast-card__image .cs-badge--grade {
    right: 8px;
}

.cs-cast-card__image .cs-badge--birthday {
    left: 8px;
    bottom: 8px;
    top: auto;
}

/* ===== Favorite toggle ===== */
.cs-favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    color: var(--cs-text-light);
    transition: background var(--cs-transition), color var(--cs-transition), transform var(--cs-transition);
}

.cs-favorite-btn:hover {
    transform: scale(1.08);
}

.cs-favorite-btn.is-active {
    color: var(--cs-primary);
}

.cs-favorite-btn__icon {
    pointer-events: none;
}

/* Overlaid on the card photo, bottom-right (本日出勤/グレード already
   occupy the top corners — see above). Same bottom-right treatment on the
   profile page's main photo (.cs-profile__main-image, below) — grouping it
   with the SNS icons in the name row read as one homogeneous cluster of
   circular buttons, blurring "favorite this cast" (a site action) against
   "go to an external SNS profile" (an outbound link). */
.cs-cast-card__image .cs-favorite-btn,
.cs-profile__main-image .cs-favorite-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--cs-shadow);
    font-size: 1.15rem;
    z-index: 2;
}

/* Inline next to the name on the profile page — see cast-profile.php's
   .cs-profile__name-row. */
.cs-profile__name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.cs-cast-card__body {
    padding: 12px;
}

.cs-cast-card__name {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--cs-text);
}

.cs-cast-card__meta,
.cs-cast-card__measurements,
.cs-cast-card__categories {
    font-size: 0.85rem;
    color: var(--cs-text-light);
    margin: 0 0 2px;
}

.cs-cast-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 4px;
    font-size: 0.82rem;
}

.cs-cast-card__rating-stars {
    color: #f5a623;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.cs-cast-card__rating-value {
    font-weight: 700;
    color: var(--cs-text);
}

.cs-cast-card__rating-count {
    color: var(--cs-text-light);
}

/* ===== Price list ([cs_price_list]: 施術コース + オプション) ===== */
.cs-price-list__section + .cs-price-list__section {
    margin-top: 44px;
}

.cs-price-list__heading {
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--cs-primary);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
    gap: 20px;
}

.cs-menu-card {
    background: var(--cs-bg);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    transition: transform var(--cs-transition), box-shadow var(--cs-transition);
}

.cs-menu-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cs-shadow-lg);
}

.cs-menu-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-dark));
}

.cs-menu-card--option .cs-menu-card__header {
    background: var(--cs-text-light);
}

.cs-menu-card__name {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.cs-menu-card__duration {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.cs-menu-card__body {
    padding: 18px 20px 20px;
}

.cs-menu-card__price {
    margin: 0 0 8px;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--cs-primary);
}

.cs-menu-card--option .cs-menu-card__price {
    color: var(--cs-text);
}

.cs-menu-card__description {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--cs-text-light);
}

/* ===== Pagination ===== */
.cs-pagination {
    margin-top: 32px;
    text-align: center;
}

.cs-pagination .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--cs-text);
}

.cs-pagination .page-numbers.current {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}

/* ===== Profile: hero (gallery + summary) ===== */
.cs-profile__hero {
    display: grid;
    grid-template-columns: minmax(260px, 440px) 1fr;
    gap: 32px;
    /* start, not stretch/center: the summary column's actual content
       (name, rating, stats, hobby) is naturally shorter than the portrait
       photo next to it, and stretching it to match + centering the content
       inside just moved the "why is there a gap" feeling into "why is this
       floating in the middle of a half-empty box" instead of fixing it. A
       compact card anchored to the top reads as intentional the way a tall
       gallery photo next to a short spec sheet normally does — the white
       space below it is just layout breathing room, not part of the card. */
    align-items: start;
    margin-bottom: 32px;
}

.cs-profile__summary {
    background: var(--cs-bg);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    padding: 28px 32px;
}

.cs-profile__main-image {
    position: relative;
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    box-shadow: var(--cs-shadow-lg);
    aspect-ratio: 3 / 4;
    background: var(--cs-bg-light);
}

.cs-profile__main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-profile__gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--cs-transition);
    z-index: 2;
}

.cs-profile__gallery-nav:hover,
.cs-profile__gallery-nav:focus-visible {
    background: rgba(0, 0, 0, 0.65);
}

.cs-profile__gallery-nav--prev {
    left: 12px;
}

.cs-profile__gallery-nav--next {
    right: 12px;
}

.cs-profile__main-image img.cs-gallery-fade {
    animation: cs-gallery-fade 0.4s ease;
}

@keyframes cs-gallery-fade {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-profile__main-image img.cs-gallery-fade {
        animation: none;
    }
}

.cs-profile__today-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-size: 0.8rem;
    padding: 5px 12px;
}

.cs-profile__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cs-profile__thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: opacity var(--cs-transition), border-color var(--cs-transition);
}

.cs-profile__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-profile__thumb:hover {
    opacity: 1;
}

.cs-profile__thumb.is-active {
    opacity: 1;
    border-color: var(--cs-primary);
}

.cs-profile__name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--cs-text);
}

.cs-profile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.cs-profile__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    /* A divider ahead of this row (and .cs-profile__hobby's, below) breaks
       the card into clear identity / specs / about zones instead of just
       stacking unrelated pieces of text one after another. */
    padding-top: 20px;
    border-top: 1px solid var(--cs-border);
}

.cs-stat {
    background: var(--cs-bg-light);
    border-radius: var(--cs-radius);
    padding: 10px 16px;
    min-width: 88px;
}

.cs-stat--wide {
    min-width: 220px;
}

.cs-stat__value {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cs-text);
    line-height: 1.3;
}

.cs-stat__label {
    display: block;
    font-size: 0.72rem;
    color: var(--cs-text-light);
    margin-top: 2px;
}

.cs-profile__hobby {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--cs-text);
    padding-top: 18px;
    border-top: 1px solid var(--cs-border);
}

.cs-profile__hobby strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cs-text-light);
    margin-bottom: 6px;
}

.cs-profile__hobby p {
    margin: 0;
}

.cs-profile__sns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cs-profile__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cs-bg-light);
    color: var(--cs-text-light);
    transition: background 0.15s ease, color 0.15s ease;
}

.cs-profile__sns-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.cs-profile__sns-link:hover {
    background: var(--cs-primary);
    color: #fff;
}

.cs-profile__custom-fields {
    margin: 16px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--cs-border);
    font-size: 0.92rem;
}

.cs-profile__custom-fields dt {
    font-weight: 700;
    color: var(--cs-text);
    margin-top: 8px;
}

.cs-profile__custom-fields dt:first-child {
    margin-top: 0;
}

.cs-profile__custom-fields dd {
    margin: 2px 0 0;
    color: var(--cs-text);
    line-height: 1.6;
}

/* ===== Profile: message ===== */
.cs-profile__message {
    margin-bottom: 32px;
}

.cs-profile__message h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--cs-text);
}

.cs-profile__message-body {
    background: var(--cs-bg-light);
    border-radius: var(--cs-radius);
    padding: 18px 20px;
    line-height: 1.8;
    font-size: 0.92rem;
}

.cs-profile__message-body p {
    margin: 0 0 0.8em;
}

.cs-profile__message-body p:last-child {
    margin-bottom: 0;
}

/* ===== Profile: weekly schedule ===== */
.cs-profile__schedule {
    margin-bottom: 32px;
}

.cs-profile__schedule h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--cs-text);
}

.cs-week-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.cs-week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 4px;
    border-radius: var(--cs-radius);
    background: var(--cs-bg-light);
    text-align: center;
}

.cs-week-day__dow {
    font-size: 0.75rem;
    color: var(--cs-text-light);
}

.cs-week-day__date {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-week-day__status {
    font-size: 0.72rem;
    color: var(--cs-text-light);
    white-space: nowrap;
}

.cs-week-day__store {
    display: block;
    font-size: 0.66rem;
    color: var(--cs-text-light);
    white-space: nowrap;
    margin-top: 1px;
}

.cs-week-day__reserve-btn {
    display: inline-block;
    margin-top: auto;
    padding: 3px 8px;
    border: none;
    border-radius: 10px;
    background: var(--cs-primary);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.cs-week-day__reserve-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.cs-week-day__reserve-status {
    display: block;
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--cs-text-light);
}

/* ===== Reservation modal (course + start time picker) ===== */
body.cs-modal-open {
    overflow: hidden;
}

.cs-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Same reasoning as age-gate.css's identical rule: the UA stylesheet's
   [hidden] { display: none } is the lowest-priority rule in the cascade,
   so our own `display: flex` above needs to be explicitly beaten here
   rather than left to win by default. */
.cs-modal[hidden] {
    display: none;
}

.cs-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.cs-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--cs-bg);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    padding: 28px 24px 24px;
}

.cs-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cs-text-light);
    cursor: pointer;
    padding: 4px;
}

.cs-modal__close:hover {
    color: var(--cs-text);
}

.cs-modal__title {
    margin: 0 0 18px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-modal__step-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cs-text-light);
}

.cs-modal__select {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--cs-radius);
    border: 1px solid var(--cs-border);
    font-size: 0.95rem;
    background: var(--cs-bg);
    color: var(--cs-text);
}

.cs-modal__body .cs-btn {
    width: 100%;
    text-align: center;
}

.cs-modal__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.cs-modal__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cs-modal__option:hover {
    border-color: var(--cs-primary);
}

.cs-modal__option:has(.cs-modal__option-input:checked) {
    border-color: var(--cs-primary);
    background: var(--cs-bg-light);
}

.cs-modal__option-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.cs-modal__option-box {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--cs-border);
    background: var(--cs-bg);
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cs-modal__option-input:checked ~ .cs-modal__option-box {
    border-color: var(--cs-primary);
    background: var(--cs-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.cs-modal__option-input:focus-visible ~ .cs-modal__option-box {
    outline: 2px solid var(--cs-primary);
    outline-offset: 2px;
}

.cs-modal__option-body {
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--cs-text);
}

.cs-modal__message {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--cs-text);
}

.cs-modal__summary {
    margin: 0;
    padding: 14px 16px;
    background: var(--cs-bg-light);
    border-radius: var(--cs-radius);
}

.cs-modal__summary dt {
    font-size: 0.75rem;
    color: var(--cs-text-light);
}

.cs-modal__summary dd {
    margin: 2px 0 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cs-text);
}

.cs-modal__summary dd:last-child {
    margin-bottom: 0;
}

/* 出勤日のハイライト。淡いピンク固定だと、暗い配色のデザイン
   テンプレート(ラグジュアリー等)で「明るい面に明るい文字」になって
   読めなくなるため、メインカラーをカード背景に混ぜた色にしている。
   1行目はcolor-mix未対応ブラウザ向けのフォールバック。 */
.cs-week-day.is-working {
    background: #fdecef;
    background: color-mix(in srgb, var(--cs-primary) 12%, var(--cs-bg-light));
}

.cs-week-day.is-working .cs-week-day__status {
    color: var(--cs-primary-dark);
    font-weight: 600;
}

.cs-week-day.is-today {
    box-shadow: 0 0 0 2px var(--cs-primary) inset;
}

/* ===== Filter card (cast list + diary list search/filter) =====
   Shared by cast-search-form.php and DiaryShortcodes::renderFilterForm().
   Widths on the actual <input>/<select> elements are scoped under
   .cs-container (0,2,0) rather than a single class (0,1,0), and the number
   range inputs additionally use !important: a theme's own
   input[type="..."] rule (Lightning G3 confirmed, likely Bootstrap-derived)
   otherwise silently outranks a same-or-lower-specificity rule regardless
   of source order — same specificity trap as the :where() reset above,
   just coming from the theme's side instead of ours this time. */
.cs-filter-card {
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.cs-filter-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--cs-text);
}

.cs-filter-card__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
}

.cs-filter-card__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-filter-card__field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cs-text-light);
}

.cs-container .cs-filter-card__field select,
.cs-container .cs-filter-card__field input {
    width: auto;
    min-width: 160px;
    padding: 9px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    font-size: 0.88rem;
    background: var(--cs-bg);
}

.cs-filter-card__range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-container .cs-filter-card__range input {
    width: 90px !important;
    min-width: 0 !important;
}

.cs-container .cs-filter-card__range input[type="date"] {
    width: 150px !important;
}

.cs-filter-card__range-sep {
    color: var(--cs-text-light);
    font-size: 0.85rem;
}

.cs-filter-card__field--checkbox {
    flex-direction: row;
    padding-bottom: 10px;
}

.cs-filter-card__field--checkbox label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: normal;
    color: var(--cs-text);
    white-space: nowrap;
}

.cs-filter-card__actions {
    display: flex;
    gap: 8px;
    padding-bottom: 1px;
}

.cs-filter-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 0;
}

.cs-filter-card__result {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cs-text-light);
}

.cs-filter-card__result strong {
    color: var(--cs-primary-dark);
}

.cs-view-toggle {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cs-view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--cs-radius);
    border: 1px solid var(--cs-border);
    background: var(--cs-bg);
    color: var(--cs-text-light);
    transition: background var(--cs-transition), color var(--cs-transition), border-color var(--cs-transition);
}

.cs-view-toggle__btn:hover {
    color: var(--cs-text);
}

.cs-view-toggle__btn.is-active {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}

@media (max-width: 640px) {
    .cs-filter-card {
        padding: 16px;
    }

    .cs-filter-card__form {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-container .cs-filter-card__field select,
    .cs-container .cs-filter-card__field input,
    .cs-container .cs-filter-card__range input[type="date"] {
        width: 100% !important;
        min-width: 0;
    }

    .cs-filter-card__actions {
        flex-direction: column;
    }

    .cs-filter-card__actions .cs-btn {
        width: 100%;
    }
}

/* ===== Diary list / card ===== */
.cs-diary-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cs-diary-card {
    background: var(--cs-bg);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    transition: box-shadow var(--cs-transition);
}

.cs-diary-card:hover {
    box-shadow: var(--cs-shadow-lg);
}

.cs-diary-card__link {
    display: flex;
    gap: 16px;
    color: inherit;
    text-decoration: none;
}

.cs-diary-card__image {
    flex: 0 0 160px;
    aspect-ratio: 4 / 3;
    background: var(--cs-bg-light);
    overflow: hidden;
}

.cs-diary-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-diary-card__body {
    flex: 1 1 auto;
    padding: 14px 16px 14px 0;
    min-width: 0;
}

.cs-diary-card__cast {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cs-primary-dark);
    margin: 0 0 4px;
}

.cs-diary-card__cast-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.cs-diary-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cs-text);
    margin: 0 0 6px;
}

.cs-diary-card__excerpt {
    font-size: 0.85rem;
    color: var(--cs-text-light);
    line-height: 1.6;
    margin: 0 0 6px;
}

.cs-diary-card__date {
    font-size: 0.75rem;
    color: var(--cs-text-light);
}

/* ===== Diary grid card (layout="card" on [cs_diary_list]) =====
   Same visual language as .cs-cast-grid/.cs-cast-card: image on top, text
   below, auto-fit columns that center a short result set instead of
   leaving it flush-left. */
.cs-diary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--cs-card-min-width), var(--cs-card-max-width)));
    justify-content: center;
    gap: 20px;
}

.cs-diary-grid-card {
    background: var(--cs-bg);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    transition: box-shadow var(--cs-transition), transform var(--cs-transition);
}

.cs-diary-grid-card:hover {
    box-shadow: var(--cs-shadow-lg);
    transform: translateY(-2px);
}

.cs-diary-grid-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cs-diary-grid-card__image {
    aspect-ratio: 4 / 3;
    background: var(--cs-bg-light);
}

.cs-diary-grid-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-diary-grid-card__body {
    padding: 14px;
}

.cs-diary-grid-card__cast {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--cs-primary-dark);
    margin: 0 0 6px;
}

.cs-diary-grid-card__cast-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.cs-diary-grid-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cs-text);
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-diary-grid-card__excerpt {
    font-size: 0.8rem;
    color: var(--cs-text-light);
    line-height: 1.6;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-diary-grid-card__date {
    font-size: 0.72rem;
    color: var(--cs-text-light);
}

/* ===== Diary byline (prepended to single diary content) ===== */
.cs-diary-byline {
    margin-bottom: 20px;
}

.cs-diary-byline__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.cs-diary-byline__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.cs-diary-byline__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cs-text);
}

/* ===== Ranking ===== */
.cs-ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 32px;
    padding: 8px;
    background: var(--cs-bg-light);
    border-radius: var(--cs-radius-lg);
}

.cs-ranking-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* line-height:1 matters here — without it, the theme's own body
       line-height inflates this button's content box well past what the
       padding alone implies, so the colored fill (especially in the
       .is-active state) ends up hugging the text with barely any visible
       margin no matter how generous the padding value is. */
    line-height: 1;
    padding: 16px 30px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cs-text-light);
    white-space: nowrap;
    transition: background var(--cs-transition), color var(--cs-transition), box-shadow var(--cs-transition);
}

.cs-ranking-tab:hover {
    color: var(--cs-text);
    background: rgba(0, 0, 0, 0.05);
}

.cs-ranking-tab.is-active {
    background: var(--cs-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(233, 30, 99, 0.35);
}

.cs-ranking-tab.is-active:hover {
    background: var(--cs-primary);
}

.cs-ranking-tab__icon {
    font-size: 1rem;
    line-height: 1;
}

.cs-ranking-panel[hidden] {
    display: none;
}

/* ===== [cs_schedule_page]: date tabs ===== */
.cs-schedule-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 32px;
    padding: 8px;
    background: var(--cs-bg-light);
    border-radius: var(--cs-radius-lg);
}

.cs-schedule-tab {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 16px 24px;
    border-radius: var(--cs-radius);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cs-text-light);
    background: none;
    white-space: nowrap;
    transition: background var(--cs-transition), color var(--cs-transition);
}

.cs-schedule-tab:hover {
    color: var(--cs-text);
    background: rgba(0, 0, 0, 0.05);
}

.cs-schedule-tab.is-active {
    background: var(--cs-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(233, 30, 99, 0.35);
}

.cs-schedule-tab.is-active:hover {
    background: var(--cs-primary);
}

.cs-schedule-panel[hidden] {
    display: none;
}

/* Ranking card: cs-cast-card + a rank header strip. overflow:hidden and
   border-radius on .cs-cast-card (see the キャスト一覧 rules above) clip
   this header's top corners to match automatically — no radius rules
   needed here. */
.cs-ranking-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--cs-bg-light);
}

.cs-ranking-card__header--rank-1 {
    background: linear-gradient(135deg, #fff6d9, #f4c542);
}

.cs-ranking-card__header--rank-2 {
    background: linear-gradient(135deg, #f4f5f6, #c9ccd1);
}

.cs-ranking-card__header--rank-3 {
    background: linear-gradient(135deg, #fbe9d9, #d8a373);
}

.cs-ranking-card__rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cs-text);
}

/* A drawn circle+number instead of a 🥇/🥈/🥉 emoji: those render
   inconsistently across platforms (some fonts print a date-like number
   inside the "calendar" glyph family), so a number we draw ourselves reads
   the same everywhere and stays legible against the gradient headers. */
.cs-ranking-card__rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: var(--cs-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.cs-ranking-card__header--rank-1 .cs-ranking-card__rank-number {
    background: #fff;
    color: #a8790a;
    box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.6);
}

.cs-ranking-card__header--rank-2 .cs-ranking-card__rank-number {
    background: #fff;
    color: #63676c;
    box-shadow: 0 0 0 2px rgba(201, 204, 209, 0.8);
}

.cs-ranking-card__header--rank-3 .cs-ranking-card__rank-number {
    background: #fff;
    color: #9c6224;
    box-shadow: 0 0 0 2px rgba(216, 163, 115, 0.7);
}

@media (max-width: 480px) {
    /* At this width there isn't room for all 4 tabs on one line without
       shrinking them uncomfortably small, and letting them wrap produces an
       uneven, accidental-looking second row (e.g. 3 tabs + 1 alone). A
       single horizontally-scrollable row — the standard mobile tab-bar
       pattern — keeps every tab full-size and legible instead. */
    .cs-ranking-tabs {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding: 6px;
        /* Fades the last visible tab out instead of clipping it sharply,
           so it visibly continues past the edge — a plain hard cutoff
           didn't read as "scroll for more" on its own. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }

    .cs-ranking-tabs::-webkit-scrollbar {
        display: none;
    }

    .cs-ranking-tab {
        flex: 0 0 auto;
        padding: 12px 18px;
        font-size: 0.82rem;
    }

    /* Same reasoning as .cs-ranking-tabs above — 7 date tabs need it even
       more. */
    .cs-schedule-tabs {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding: 6px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }

    .cs-schedule-tabs::-webkit-scrollbar {
        display: none;
    }

    .cs-schedule-tab {
        flex: 0 0 auto;
        padding: 12px 18px;
        font-size: 0.82rem;
    }

    /* Same reasoning as .cs-ranking-tabs above — マイページ内の4つのタブ
       ("日記一覧"/"新規作成"/"シフト申請"/"パスワード変更") don't fit one
       line at this width without wrapping mid-label, so it scrolls
       instead. */
    .cs-mypage__nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }

    .cs-mypage__nav::-webkit-scrollbar {
        display: none;
    }

    .cs-mypage__nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

.cs-ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
}

.cs-ranking-item__position {
    flex: 0 0 28px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cs-primary-dark);
}

.cs-ranking-item__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.cs-ranking-item__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cs-bg-light);
}

.cs-ranking-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-ranking-item__name {
    font-weight: 600;
    color: var(--cs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-ranking-item__change {
    flex: 0 0 auto;
}

.cs-ranking-item__change-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--cs-bg-light);
    color: var(--cs-text-light);
}

.cs-ranking-item__change-badge--up {
    background: #e8f5e9;
    color: #2e7d32;
}

.cs-ranking-item__change-badge--down {
    background: #fdecea;
    color: #a33;
}

.cs-ranking-item__change-badge--new {
    background: #e8f2fc;
    color: #1565c0;
}

/* ===== Diary timeline (cross-cast Instagram-style grid) ===== */
.cs-diary-timeline {
    display: grid;
    grid-template-columns: repeat(var(--cs-timeline-columns, 6), 1fr);
    gap: 4px;
}

.cs-diary-timeline__item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cs-bg-light);
}

.cs-diary-timeline__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-diary-timeline__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 8px;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity var(--cs-transition);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-diary-timeline__item:hover .cs-diary-timeline__overlay,
.cs-diary-timeline__item:focus .cs-diary-timeline__overlay {
    opacity: 1;
}

.cs-diary-timeline__cast {
    font-weight: 600;
}

.cs-diary-timeline__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .cs-diary-timeline {
        grid-template-columns: repeat(var(--cs-timeline-columns-sp, 3), 1fr);
    }

    .cs-diary-timeline__overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.55);
    }
}

/* ===== Profile: recent diaries ===== */
.cs-profile__diaries h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--cs-text);
}

.cs-profile__diaries-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.cs-profile__diary-item {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cs-profile__diary-item-image {
    aspect-ratio: 4 / 3;
    border-radius: var(--cs-radius);
    overflow: hidden;
    background: var(--cs-bg-light);
    margin-bottom: 6px;
}

.cs-profile__diary-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-profile__diary-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cs-text);
    line-height: 1.4;
}

.cs-profile__diary-item-date {
    font-size: 0.72rem;
    color: var(--cs-text-light);
    margin-top: 2px;
}

/* ===== Profile: rating summary ===== */
.cs-profile__rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: inherit;
    text-decoration: none;
}

.cs-profile__rating-stars {
    color: #f5a623;
    letter-spacing: 1px;
}

.cs-profile__rating-value {
    font-weight: 700;
    color: var(--cs-text);
}

.cs-profile__rating-count {
    font-size: 0.82rem;
    color: var(--cs-text-light);
}

/* ===== Mypage: favorites notify toggle ===== */
.cs-mypage-favorite {
    display: flex;
    flex-direction: column;
}

.cs-mypage-favorite__notify {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--cs-text-light);
    cursor: pointer;
}

/* ===== Reviews ===== */
.cs-reviews {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--cs-border);
}

.cs-reviews h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--cs-text);
}

.cs-reviews__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-reviews__empty {
    color: var(--cs-text-light);
    margin-bottom: 20px;
}

.cs-review-item {
    background: var(--cs-bg-light);
    border-radius: var(--cs-radius);
    padding: 14px 16px;
}

.cs-review-item__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.cs-review-item__stars {
    color: #f5a623;
    letter-spacing: 1px;
}

.cs-review-item__author {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cs-text);
}

.cs-review-item__date {
    font-size: 0.78rem;
    color: var(--cs-text-light);
    margin-left: auto;
}

.cs-review-item__body {
    margin: 0;
    color: var(--cs-text);
    line-height: 1.6;
    white-space: pre-wrap;
}

.cs-review-form-wrap {
    background: var(--cs-bg-light);
    border-radius: var(--cs-radius);
    padding: 18px 20px;
}

.cs-review-form__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--cs-text);
}

.cs-review-form__rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
    margin-bottom: 12px;
}

.cs-review-form__rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cs-review-form__rating label {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--cs-border);
    cursor: pointer;
    transition: color var(--cs-transition);
}

.cs-review-form__rating input:checked ~ label,
.cs-review-form__rating label:hover,
.cs-review-form__rating label:hover ~ label {
    color: #f5a623;
}

.cs-review-form__display-name {
    font-size: 0.82rem;
    color: var(--cs-text-light);
    margin: 0 0 12px;
}

.cs-review-form__field textarea {
    width: 100%;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 10px 12px;
    font-size: 0.92rem;
    font-family: inherit;
    resize: vertical;
}

.cs-review-form__message {
    font-size: 0.85rem;
    color: var(--cs-success);
    margin: 0 0 10px;
}

.cs-review-form__message.is-error {
    color: #d32f2f;
}

.cs-review-form__login-prompt {
    margin: 0;
    color: var(--cs-text-light);
}

.cs-review-form__login-prompt a {
    color: var(--cs-primary);
    font-weight: 600;
}

/* ===== Buttons ===== */
.cs-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: var(--cs-radius);
    background: var(--cs-bg-light);
    color: var(--cs-text);
    font-size: 0.92rem;
    font-weight: 600;
    border: 1px solid var(--cs-border);
    cursor: pointer;
    text-align: center;
}

.cs-btn--primary {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}

.cs-btn--small {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.cs-btn--danger {
    background: #fdecea;
    border-color: #f3c6c2;
    color: #a33;
}

.cs-btn--danger:hover {
    background: #fbdad6;
}

/* ===== Login ===== */
.cs-login {
    max-width: 420px;
}

.cs-login-box {
    background: var(--cs-bg);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    padding: 32px 28px;
}

.cs-login-box__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 20px;
    text-align: center;
    color: var(--cs-text);
}

.cs-login-box__notice {
    text-align: center;
    color: var(--cs-text-light);
    margin: 0 0 20px;
}

.cs-login-box > .cs-btn {
    display: block;
    width: 100%;
    text-align: center;
}

.cs-login-box__error {
    background: #fdecea;
    color: #a33;
    border-radius: var(--cs-radius);
    padding: 10px 14px;
    font-size: 0.85rem;
    margin: 0 0 16px;
}

.cs-login-form__field {
    margin: 0 0 16px;
}

.cs-login-form__field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cs-text-light);
    margin-bottom: 4px;
}

.cs-login-form__field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    font-size: 0.95rem;
}

.cs-login-form__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--cs-text-light);
}

.cs-login-form .cs-btn {
    width: 100%;
}

.cs-login-box__link {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.85rem;
}

.cs-login-box__link a {
    color: var(--cs-primary-dark);
    font-weight: 600;
}

/* ===== Mypage ===== */
.cs-mypage__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cs-text-light);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cs-border);
}

.cs-mypage__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cs-mypage__identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-mypage__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.cs-mypage__name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cs-text);
}

.cs-mypage__section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cs-text);
    margin: 0 0 16px;
}

.cs-mypage__section-title--divider {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--cs-border);
}

.cs-mypage__logout {
    font-size: 0.85rem;
    color: var(--cs-text-light);
    text-decoration: underline;
}

.cs-mypage__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.cs-mypage__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 120px;
    padding: 14px 18px;
    background: var(--cs-bg-light);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius, 8px);
}

.cs-mypage__stat-label {
    font-size: 0.78rem;
    color: var(--cs-text-light);
}

.cs-mypage__stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-badge--rank-bronze {
    background: #f3e4d7;
    color: #8a5a34;
}

.cs-badge--rank-silver {
    background: #eceff1;
    color: #546e7a;
}

.cs-badge--rank-gold {
    background: #fff3cd;
    color: #a3790a;
}

.cs-badge--rank-platinum {
    background: #e6f3fb;
    color: #1f6f8b;
}

.cs-mypage__nav {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--cs-border);
    margin-bottom: 20px;
}

.cs-mypage__nav a {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cs-text-light);
    border-bottom: 2px solid transparent;
}

.cs-mypage__nav a.is-active {
    color: var(--cs-primary);
    border-bottom-color: var(--cs-primary);
}

.cs-mypage__notice {
    padding: 10px 14px;
    border-radius: var(--cs-radius);
    font-size: 0.88rem;
    margin: 0 0 16px;
}

.cs-mypage__notice--success {
    background: #e8f5e9;
    color: #2e7d32;
}

.cs-mypage__notice--error {
    background: #fdecea;
    color: #a33;
}

/* ===== Mypage: status summary ===== */
.cs-mypage-summary {
    display: grid;
    /* auto-fit rather than a fixed column count: the number of status
       buckets has grown (却下 added alongside 下書き/承認待ち/公開済み/
       公開予約), and a fixed 4-column grid squeezed 5 cards into cramped
       columns, wrapping their labels mid-word. */
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.cs-mypage-summary__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--cs-radius);
    background: var(--cs-bg-light);
    text-align: center;
}

.cs-mypage-summary__count {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-mypage-summary__label {
    font-size: 0.75rem;
    color: var(--cs-text-light);
}

.cs-mypage-summary__card--pending {
    background: #fff8e5;
}

.cs-mypage-summary__card--pending .cs-mypage-summary__count {
    color: #b8860b;
}

.cs-mypage-summary__card--publish {
    background: #e8f5e9;
}

.cs-mypage-summary__card--publish .cs-mypage-summary__count {
    color: #2e7d32;
}

.cs-mypage-summary__card--future {
    background: #e8f2fc;
}

.cs-mypage-summary__card--future .cs-mypage-summary__count {
    color: #1565c0;
}

.cs-mypage-summary__card--rejected {
    background: #fdecea;
}

.cs-mypage-summary__card--rejected .cs-mypage-summary__count {
    color: #c62828;
}

/* ===== Mypage: status badges ===== */
.cs-badge--status-draft {
    background: var(--cs-bg-light);
    color: var(--cs-text-light);
    border: 1px solid var(--cs-border);
}

.cs-badge--status-pending {
    background: #fff8e5;
    color: #b8860b;
}

.cs-badge--status-publish {
    background: #e8f5e9;
    color: #2e7d32;
}

.cs-badge--status-future {
    background: #e8f2fc;
    color: #1565c0;
}

.cs-badge--status-rejected {
    background: #fdecea;
    color: #c62828;
}

/* ===== Mypage: diary rejection reason ===== */
.cs-mypage-diary-list__reject-reason {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #c62828;
}

.cs-mypage__reject-reason {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--cs-radius);
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.cs-mypage__reject-reason strong {
    display: block;
    margin-bottom: 4px;
}

.cs-mypage__reject-reason p {
    margin: 0 0 6px;
    white-space: pre-line;
}

/* ===== Mypage: schedule request list ===== */
.cs-mypage-schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-mypage-schedule-list__item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-bg);
    font-size: 0.88rem;
}

.cs-mypage-schedule-list__date {
    font-weight: 600;
    color: var(--cs-text);
}

.cs-mypage-schedule-list__time,
.cs-mypage-schedule-list__store {
    color: var(--cs-text-light);
}

.cs-mypage__history {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--cs-border);
}

.cs-mypage__history summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cs-text);
}

.cs-mypage__history .cs-mypage-schedule-list,
.cs-mypage__history .cs-no-results {
    margin-top: 16px;
}

/* ===== Mypage: diary list (cards) ===== */
.cs-mypage-diary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-mypage-diary-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-bg);
    transition: box-shadow var(--cs-transition);
}

.cs-mypage-diary-list__item:hover {
    box-shadow: var(--cs-shadow);
}

.cs-mypage-diary-list__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--cs-radius);
    overflow: hidden;
    background: var(--cs-bg-light);
}

.cs-mypage-diary-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-mypage-diary-list__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-mypage-diary-list__title {
    margin: 4px 0 2px;
    font-weight: 600;
    color: var(--cs-text);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-mypage-diary-list__date {
    margin: 0;
    font-size: 0.78rem;
    color: var(--cs-text-light);
}

.cs-mypage-diary-list__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.cs-mypage-form {
    max-width: 560px;
}

/* Each field is a bare <p>; the reset baseline near the top of this file
   zeroes out <p> margin entirely, so without this every field sat flush
   against the next one's label with no consistent rhythm. Labels rely on
   this (not a trailing <br>) for their own gap above the next field — a
   <br>'s rendered height depends on the surrounding font-size/line-height,
   which differs between plain text inputs and select/textarea, so it
   produced visibly uneven gaps rather than a uniform one. */
.cs-mypage-form p {
    margin: 0 0 18px;
}

.cs-mypage-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cs-text-light);
    margin-bottom: 6px;
}

.cs-mypage-form__input,
.cs-mypage-form__textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    font-size: 0.95rem;
    font-family: inherit;
}

.cs-mypage-form__textarea {
    resize: vertical;
}

/* 年齢・身長・スリーサイズ等、短い数値/選択欄用(inline文言と並べるため
   .cs-mypage-form__inputの width:100% を上書きする)。 */
.cs-mypage-form__input--narrow {
    width: 80px;
    display: inline-block;
    vertical-align: middle;
}

/* バストは3桁(100〜150)になることが多いため、他の項目より少し広げて
   スピンボタンと重ならないようにする。 */
.cs-mypage-form__input--bust {
    width: 100px;
}

/* 「入力欄+単位(歳/cm)」「入力欄+(選択欄)」のように、常にひとまとまり
   で表示したい組み合わせを囲む汎用クラス。入力欄と直後のテキストは
   別々のインライン要素なので、幅が足りないと間で改行されてしまう
   (Flexboxでの対応は入れ子構成でブラウザ間の挙動が食い違ったため、
   ここでは基本のテキストフローのみに頼るnowrapを使う)。 */
.cs-mypage-form__inline-group {
    display: inline-block;
    white-space: nowrap;
}

.cs-mypage-form__actions {
    display: flex;
    gap: 10px;
}

.cs-mypage-form__counter {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--cs-text-light);
}

.cs-mypage-form__counter.is-over-limit {
    color: #c0392b;
    font-weight: 600;
}

.cs-mypage-form__image-preview {
    display: block;
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--cs-radius);
    margin-bottom: 8px;
    border: 1px solid var(--cs-border);
}

.cs-mypage-form__image-preview[hidden] {
    display: none;
}

.cs-mypage-form__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--cs-text-light);
}

.cs-mypage__photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.cs-mypage__photo-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--cs-text-light);
}

.cs-mypage__photo-thumb {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--cs-radius);
    border: 1px solid var(--cs-border);
}

.cs-mypage__photo-pending-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.cs-mypage-form .cs-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-mypage-form input[type="datetime-local"],
.cs-mypage-form input[type="date"],
.cs-mypage-form input[type="time"] {
    padding: 9px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    font-size: 0.9rem;
    font-family: inherit;
}

.cs-mypage-form select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--cs-bg);
}

/* カップ選択欄がこのwidth:100%を引き継いでしまい(.cs-mypage-form select
   の方が.cs-mypage-form__input--narrow単体より詳細度が高いため)、
   スリーサイズの行で隣の項目と重なる不具合があった。要素名を含めて
   詳細度を上げ、確実にnarrow分の幅で上書きする。 */
.cs-mypage-form select.cs-mypage-form__input--narrow {
    width: 80px;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .cs-profile__hero {
        grid-template-columns: 1fr;
    }

    .cs-profile__main-image {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .cs-cast-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cs-menu-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cs-profile__name {
        font-size: 1.5rem;
    }

    .cs-stat {
        padding: 8px 12px;
        min-width: 76px;
    }

    .cs-week-strip {
        grid-template-columns: none;
        grid-auto-columns: minmax(64px, 1fr);
        grid-auto-flow: column;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .cs-week-day {
        scroll-snap-align: start;
    }

    .cs-diary-card__image {
        flex-basis: 120px;
    }

    .cs-profile__diaries-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cs-container {
        padding: 16px 12px 36px;
    }

    .cs-diary-card__link {
        flex-direction: column;
    }

    .cs-diary-card__image {
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }

    .cs-diary-card__body {
        padding: 12px;
    }

    .cs-profile__main-image {
        aspect-ratio: 4 / 3;
        border-radius: var(--cs-radius);
    }

    .cs-profile__summary {
        padding: 20px;
    }

    .cs-profile__thumb {
        width: 52px;
        height: 52px;
    }

    .cs-mypage-diary-list__item {
        flex-wrap: wrap;
    }

    .cs-mypage-diary-list__actions {
        width: 100%;
        margin-left: 70px;
    }

    .cs-login-box {
        padding: 24px 18px;
    }
}

@media (max-width: 380px) {
    .cs-cast-grid {
        grid-template-columns: 1fr;
    }
}