/* ============================================================
   SugarHeartDB style.css  —  V2 redesign
   Single stylesheet for all 130+ pages.
   ============================================================ */

/* ----------------------------------------------------------
   0. Design tokens
---------------------------------------------------------- */
:root {
    /* Core palette */
    --sh-pink:        #fd89b9;
    --sh-pink-deep:   #e06898;
    --sh-pink-soft:   #fff0f5;
    --sh-pink-mist:   #ffe6ef;
    --sh-pink-hush:   #fff8fb;
    --sh-yellow:      #fad766;
    --sh-yellow-soft: #fff4c4;
    --sh-cream:       #fffaf3;
    --sh-text:        #5d4037;
    --sh-text-soft:   #8a6f64;
    --sh-text-mute:   #b89c93;
    --sh-line:        #f3dde6;
    --sh-line-soft:   #f7e9ef;
    --sh-bg:          #fff8fb;
    --sh-bg-alt:      #fdf2f7;

    /* Tag colours */
    --tag-limited:  #ff7aa2;
    --tag-ranking:  #f59e0b;
    --tag-solo:     #ffb84d;
    --tag-medley:   #fad766;
    --tag-revival:  #f08fb5;
    --tag-seasonal: #ff9b6a;
    --tag-collab:   #d97fb8;

    /* Event type tag colours (Deresute) */
    --tag-atapon:        #f97316;
    --tag-live-groove:   #8b5cf6;
    --tag-live-parade:   #3b82f6;
    --tag-live-carnival: #10b981;
    --tag-idolproduce:   #ec4899;
    /* Event type tag colours (Mobamas) */
    --tag-mob-prot:   #f97316;
    --tag-mob-chall:  #06b6d4;
    --tag-mob-royale: #3b82f6;
    --tag-mob-dream:  #8b5cf6;
    --tag-mob-puchi:  #f472b6;

    /* Typography */
    --font-display: "Yusei Magic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
    --font-body:    "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;

    /* Border-radius scale */
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   22px;
    --r-xl:   32px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(253,137,185,0.10);
    --shadow-md: 0 8px 24px rgba(253,137,185,0.14);
    --shadow-lg: 0 18px 48px rgba(253,137,185,0.20);

    /* Gradients */
    --grad-sugar:      linear-gradient(135deg, #fad766 0%, #fd89b9 100%);
    --grad-sugar-soft: linear-gradient(135deg, #fff4c4 0%, #ffe6ef 100%);
    --grad-mist:       linear-gradient(180deg, #fff8fb 0%, #fff0f5 100%);
}

/* ----------------------------------------------------------
   1. Reset & base
---------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    margin: 0;
    padding: 64px 0 0 0;
    overflow-x: hidden;
    width: 100%;
    background: var(--sh-bg);
    color: var(--sh-text);
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
}

body.menu-open {
    overflow: hidden;
}

p {
    padding: 10px;
    color: var(--sh-text);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
}

h2 {
    color: var(--sh-pink);
    margin: 20px 0;
    text-align: center;
}

h3 {
    color: var(--sh-pink);
    margin: 5px 0;
}

a {
    color: var(--sh-text);
}

/* ----------------------------------------------------------
   2. Site header  (glass effect)
---------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(253,137,185,0.18);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

/* Header nav bar */
.header-nav {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.header-logo {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--sh-pink-deep);
    text-decoration: none;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s, opacity 0.2s;
}

.header-logo::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--grad-sugar);
    box-shadow: 0 2px 6px rgba(253,137,185,0.4);
    flex-shrink: 0;
}

.header-logo:hover {
    color: var(--sh-pink);
    opacity: 0.85;
}

/* PC nav menu */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
    align-items: stretch;
}

.nav-item {
    position: static;
    display: flex;
    align-items: stretch;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: var(--sh-text);
    text-decoration: none;
    font-size: 0.92rem;
    border-radius: var(--r-pill);
    margin: 12px 4px;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
}

.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link {
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
}

/* Mega menu */
.mega-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--sh-line);
    border-bottom: 1px solid var(--sh-line);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.25s ease;
    opacity: 0;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
    max-height: 480px;
    opacity: 1;
}

.mega-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 32px 32px;
    display: flex;
    gap: 32px;
}

.mega-col {
    flex: 1;
    min-width: 160px;
}

.mega-col h4 {
    font-family: var(--font-display);
    color: var(--sh-pink);
    font-size: 0.78rem;
    font-weight: 400;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sh-line);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mega-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-col ul li {
    margin-bottom: 2px;
}

.mega-col ul li a {
    color: var(--sh-text);
    text-decoration: none;
    font-size: 0.88rem;
    display: block;
    padding: 6px 0 6px 2px;
    border-left: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s, padding-left 0.2s;
}

.mega-col ul li a:hover {
    color: var(--sh-pink);
    border-left-color: var(--sh-pink);
    padding-left: 8px;
}

.mega-col ul li a.disabled {
    color: var(--sh-text-mute);
    pointer-events: none;
    cursor: default;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--sh-text);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    right: 0;
    width: 80%;
    max-width: 320px;
    bottom: 0;
    background: #ffffff;
    border-left: 1px solid var(--sh-line);
    box-shadow: -4px 0 16px rgba(253,137,185,0.12);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    pointer-events: none;
}

.mobile-menu.active {
    transform: translateX(0);
    pointer-events: auto;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(93,64,55,0.25);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav {
    list-style: none;
    margin: 0;
    padding: 12px 0 32px;
}

.mobile-item {
    border-bottom: 1px solid var(--sh-line);
}

.mobile-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: default;
}

.mobile-item-header span {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--sh-text);
    font-size: 0.95rem;
}

.accordion-toggle {
    background: none;
    border: 1.5px solid var(--sh-pink);
    color: var(--sh-pink);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.accordion-toggle.open {
    transform: rotate(45deg);
    background: var(--sh-pink);
    color: #ffffff;
}

.mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
    background: var(--sh-pink-hush);
}

.mobile-submenu.open {
    max-height: 520px;
}

.mobile-submenu li a {
    display: block;
    padding: 11px 20px 11px 32px;
    color: var(--sh-text);
    text-decoration: none;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--sh-line);
    transition: color 0.2s, background 0.2s;
}

.mobile-submenu li:last-child a {
    border-bottom: none;
}

.mobile-submenu li a:hover {
    background: var(--sh-pink-mist);
    color: var(--sh-pink-deep);
}

.mobile-submenu li a.disabled {
    color: var(--sh-text-mute);
    pointer-events: none;
    cursor: default;
}

/* ----------------------------------------------------------
   3. Disabled links
---------------------------------------------------------- */
a.disabled,
.disabled {
    color: var(--sh-text-mute) !important;
    pointer-events: none;
    cursor: default;
}

/* ----------------------------------------------------------
   4. Page layout helpers
---------------------------------------------------------- */

/* Generic page wrapper (new V2 pages) */
.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px 80px;
}

/* Sub-page hero (new V2 pages — replaces .sub-title for new pages) */
.page-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 28px 28px;
}

.breadcrumb {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--sh-text-mute);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.breadcrumb a {
    color: var(--sh-pink);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Section heading with flex space-between */
.sh-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sh-section-head h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--sh-text);
    margin: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-section-head h2::before {
    content: "✿";
    color: var(--sh-pink);
}

/* ----------------------------------------------------------
   5. Titles
---------------------------------------------------------- */

/* Main title (top page) */
.main-title {
    width: 100%;
    margin: 0;
    background-image:
        linear-gradient(rgba(214,35,80,0.6), rgba(214,35,80,0.6)),
        url('/Deresute/KonoyoDeTadaHitoriNoHeart+/KonoyoDeTadaHitoriNoHeart+.jpg');
    background-size: cover;
    background-position: center;
    padding: 30px 20px;
    color: #fff2f2;
    text-align: center;
    text-shadow: 0 3px 5px rgba(0,0,0,0.3);
}

.main-title h1 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}

/* Sub-title (existing sub-page header — updated V2 colours, light) */
.sub-title {
    width: 100%;
    margin: 0 0 15px 0;
    background: var(--grad-sugar-soft);
    padding: 24px 28px;
    color: var(--sh-text);
    text-shadow: none;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-height: 80px;
}

.sub-title h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    color: var(--sh-text);
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.sub-title-date {
    color: var(--sh-text-soft);
    font-size: 0.85rem;
    text-decoration: none;
    opacity: 0.9;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.white-text {
    color: #fff2f2;
}

.img-full-center {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
}

/* ----------------------------------------------------------
   6. Links
---------------------------------------------------------- */

.link a {
    color: var(--sh-text);
    text-decoration: underline;
    transition: color 0.3s;
}

.link a:hover {
    color: var(--sh-pink);
}

.link-image {
    display: block;
    width: 100px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.link-image img {
    width: 100%;
    border-radius: var(--r-sm);
    display: block;
}

.link-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.link-image:active {
    transform: translateY(2px);
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.3);
}

/* ----------------------------------------------------------
   7. Box area
---------------------------------------------------------- */

.box-area {
    background-color: #ffffff;
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.box-title {
    margin: 0 0 15px 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--sh-pink-deep);
    padding-bottom: 10px;
    border-bottom: 2px dotted var(--sh-line);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.box-title::before {
    content: "✿";
    color: var(--sh-pink);
    flex-shrink: 0;
}

.box-scroll-area {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

.box-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 2px dotted var(--sh-line);
}

.box-item:last-child {
    border-bottom: none;
}

.box-subtitle {
    width: 140px;
    flex-shrink: 0;
    font-weight: bold;
    text-align: center;
    color: var(--sh-pink);
    white-space: nowrap;
}

.box-text {
    color: var(--sh-text);
    line-height: 1.5;
    flex: 1;
}

/* News box variant */
.box-area.type-news {
    width: 80%;
    padding-bottom: 50px;
}

.box-area.type-news .box-subtitle {
    width: auto;
    margin-right: 15px;
    text-align: left;
}

.news-link {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 0.9rem;
    color: var(--sh-pink);
    text-decoration: underline;
    font-weight: bold;
    transition: opacity 0.3s;
}

.news-link:hover {
    opacity: 0.5;
}

/* ----------------------------------------------------------
   8. Table
---------------------------------------------------------- */

.table-area {
    width: 90%;
    max-width: 800px;
    margin: 25px auto;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    table-layout: fixed;
}

.table-area td:first-child,
.table-area th:first-child {
    width: 120px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding: 10px 8px;
}

.table-area td,
.table-area th {
    padding: 15px 12px;
    word-break: break-word;
}

.table-area thead th {
    background-color: var(--sh-pink);
    color: #fff2f2;
    padding: 15px;
    font-family: var(--font-display);
    font-weight: 400;
    text-align: center;
    border-bottom: 2px solid var(--sh-line);
    border-right: 1px solid rgba(255,255,255,0.2);
    font-size: 1rem;
    white-space: nowrap;
}

.table-area tbody td:first-child {
    padding: 15px 10px;
}

.table-area tbody td {
    text-align: left;
    padding: 16px 20px;
    border-bottom: 2px dotted var(--sh-line);
    border-right: 1px solid var(--sh-line-soft);
    color: var(--sh-text);
}

.table-area tbody tr:nth-child(even) {
    background-color: var(--sh-pink-hush);
}

.table-area tbody tr:last-child td {
    border-bottom: none;
}

.table-area thead th:last-child,
.table-area tbody td:last-child {
    border-right: none;
}

.table-area tbody tr:hover {
    background-color: var(--sh-pink-soft);
    transition: background-color 0.2s;
}

.table-area .col-narrow {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.table-area .link-image {
    display: block;
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.table-area .link-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-sm);
}

/* ----------------------------------------------------------
   9. Top-page tabs (existing radio-button tabs)
---------------------------------------------------------- */

.tab-wrapper {
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    position: relative;
}

input[name="tab-radio"] {
    display: none;
}

.tab-nav {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
    background: var(--sh-pink-soft);
    border-radius: var(--r-pill);
    padding: 6px;
}

.tab-btn {
    display: block;
    background: transparent;
    color: var(--sh-text-soft);
    padding: 14px 10px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all 0.25s;
    border: none;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.6);
    color: var(--sh-pink-deep);
}

#tab1:checked ~ .tab-nav .btn-1,
#tab2:checked ~ .tab-nav .btn-2,
#tab3:checked ~ .tab-nav .btn-3,
#tab4:checked ~ .tab-nav .btn-4 {
    background: #ffffff;
    color: var(--sh-pink-deep);
    box-shadow: var(--shadow-sm);
}

.tab-content {
    display: none;
    background-color: #ffffff;
    padding: 30px;
    border-radius: var(--r-lg);
    border-top: 3px solid var(--sh-pink);
    box-shadow: var(--shadow-sm);
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#tab1:checked ~ .content-1,
#tab2:checked ~ .content-2,
#tab3:checked ~ .content-3,
#tab4:checked ~ .content-4 {
    display: block;
}

/* Link list inside tabs */
.link-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: var(--sh-bg-alt);
    border-radius: var(--r-sm);
    color: var(--sh-text);
    text-decoration: none;
    font-size: 0.92rem;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    border: 1px solid var(--sh-line-soft);
}

.link-list a::before {
    content: "◆";
    color: var(--sh-pink);
    font-size: 0.6rem;
    flex-shrink: 0;
}

.link-list a:hover {
    background: var(--sh-pink-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--sh-pink-deep);
    text-decoration: none;
}

.link-list a[href="#"],
.link-list a.disabled {
    color: var(--sh-text-mute);
    pointer-events: none;
    cursor: default;
    background: var(--sh-bg);
    border-color: var(--sh-line-soft);
}

.link-list a[href="#"]::before,
.link-list a.disabled::before {
    color: var(--sh-text-mute);
}

/* ----------------------------------------------------------
   10. Card detail pages
---------------------------------------------------------- */

/* Full layout container */
.detail-container {
    display: flex;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Left sidebar card list (PC only) */
.sidebar-cardlist {
    width: 250px;
    flex-shrink: 0;
    background-color: #ffffff;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    position: sticky;
    top: 20px;
}

.sidebar-cardlist h3 {
    font-family: var(--font-display);
    color: var(--sh-pink-deep);
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sh-line);
}

.sidebar-cardlist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-cardlist li {
    margin-bottom: 6px;
}

.sidebar-cardlist a {
    display: block;
    padding: 8px 12px;
    color: var(--sh-text);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: all 0.2s;
    font-size: 0.9rem;
}

.sidebar-cardlist a:hover {
    background-color: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    padding-left: 16px;
}

.sidebar-cardlist a.active {
    background-color: var(--sh-pink);
    color: #ffffff;
    font-weight: bold;
}

/* Detail main area */
.detail-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Card image area */
.card-image-area {
    background-color: #ffffff;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-lg);
    padding: 30px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.card-image-area img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
}

/* Dialogue area */
.dialogue-area {
    width: 90%;
    max-width: 900px;
    background-color: #ffffff;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-lg);
    padding: 20px;
    position: relative;
    margin: 20px auto;
    box-shadow: var(--shadow-sm);
}

.dialogue-area h2 {
    margin: 0 0 20px 0;
}

/* detail-container overrides */
.detail-container .dialogue-area,
.detail-container .box-area {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Dialogue tabs */
input[name="dialogue-tab"] {
    display: none;
}

.dialogue-tab-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--sh-line);
}

.dialogue-tab-btn {
    flex: 1;
    padding: 13px 16px;
    background-color: var(--sh-pink-hush);
    color: var(--sh-text-soft);
    font-size: 0.95rem;
    font-family: var(--font-display);
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    transition: all 0.25s;
    border: 1px solid var(--sh-line);
    border-bottom: none;
    margin-bottom: -2px;
}

.dialogue-tab-btn:hover {
    background-color: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
}

#dialogue-tab1:checked ~ .dialogue-tab-nav .dialogue-tab-btn1,
#dialogue-tab2:checked ~ .dialogue-tab-nav .dialogue-tab-btn2,
#dialogue-tab3:checked ~ .dialogue-tab-nav .dialogue-tab-btn3,
#dialogue-tab4:checked ~ .dialogue-tab-nav .dialogue-tab-btn4,
#dialogue-tab5:checked ~ .dialogue-tab-nav .dialogue-tab-btn5 {
    background-color: var(--sh-pink);
    color: #ffffff;
    border-color: var(--sh-pink);
}

.dialogue-tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

#dialogue-tab1:checked ~ .dialogue-content1,
#dialogue-tab2:checked ~ .dialogue-content2,
#dialogue-tab3:checked ~ .dialogue-content3,
#dialogue-tab4:checked ~ .dialogue-content4,
#dialogue-tab5:checked ~ .dialogue-content5 {
    display: block;
}

/* ----------------------------------------------------------
   11. Accordion (card dialogue fold)
---------------------------------------------------------- */

.accordion-item {
    border-bottom: 2px dotted var(--sh-line);
    margin-bottom: 14px;
    padding-bottom: 14px;
}

.accordion-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.accordion-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background-color: var(--sh-pink-hush);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--sh-pink-deep);
    user-select: none;
}

.accordion-label:hover {
    background-color: var(--sh-pink-soft);
    transform: translateX(4px);
}

.accordion-arrow {
    transition: transform 0.3s;
    font-size: 1.1rem;
    color: var(--sh-pink);
}

.accordion-checkbox {
    display: none;
}

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
    overflow: hidden;
    padding: 0 15px;
}

.accordion-checkbox:checked ~ .accordion-content {
    grid-template-rows: 1fr;
    padding: 15px 0px 0px;
}

.accordion-checkbox:checked ~ .accordion-label .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-inner {
    min-height: 0;
}

.accordion-content p {
    margin: 10px 0;
    line-height: 1.8;
    color: var(--sh-text);
    border-bottom: 1px dotted var(--sh-line);
}

.accordion-content p:last-child {
    border-bottom: none;
}

.accordion-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    margin: 10px 0;
    box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------
   12. Cinderella Theater accordion (PC: always open, mobile: fold)
---------------------------------------------------------- */

.theater-checkbox {
    display: none;
}

.theater-accordion-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
}

.theater-arrow {
    display: none;
}

.theater-accordion-content {
    display: block;
}

@media screen and (max-width: 900px) {
    .theater-accordion-label {
        padding: 12px 15px;
        background-color: var(--sh-pink-hush);
        border-radius: var(--r-sm);
        cursor: pointer;
        transition: background-color 0.25s;
        user-select: none;
    }

    .theater-accordion-label:hover {
        background-color: var(--sh-pink-soft);
    }

    .theater-accordion-label .box-title {
        margin: 0;
        border-left: none;
        padding-left: 0;
    }

    .theater-arrow {
        display: block;
        transition: transform 0.3s;
        font-size: 1.1rem;
        color: var(--sh-pink);
    }

    .theater-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
    }

    .theater-checkbox:checked ~ .theater-accordion-label .theater-arrow {
        transform: rotate(180deg);
    }

    .theater-checkbox:checked ~ .theater-accordion-content {
        max-height: 3000px;
    }
}

/* ----------------------------------------------------------
   13. Card navigation (prev / next)
---------------------------------------------------------- */

.card-navigation {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.nav-card {
    width: 45%;
    max-width: 300px;
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--sh-text);
    padding: 14px;
    border-radius: var(--r-md);
    transition: all 0.25s;
    text-decoration: none;
    gap: 12px;
    min-width: 0;
    background: var(--sh-bg-alt);
    border: 1px solid var(--sh-line-soft);
}

.nav-card:hover,
.nav-card:link,
.nav-card:visited {
    text-decoration: none;
}

.nav-card:hover {
    background-color: var(--sh-pink-soft);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.nav-prev { justify-content: flex-start; margin-right: auto; }
.nav-next { justify-content: flex-end; margin-left: auto; }

.nav-card-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    object-fit: cover;
    border: 2px solid var(--sh-pink);
}

.nav-next .nav-card-icon { order: 2; }

.nav-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: underline;
}

.nav-prev .nav-card-info { text-align: left; }

.nav-next .nav-card-info {
    order: 1;
    text-align: right;
}

.nav-label {
    font-size: 0.75rem;
    color: var(--sh-pink);
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: var(--sh-pink);
}

.nav-card-name {
    font-size: 0.88rem;
    color: var(--sh-text);
    font-weight: bold;
    word-wrap: break-word;
    line-height: 1.3;
}

.nav-arrow {
    font-size: 1.4rem;
    color: var(--sh-pink);
    flex-shrink: 0;
}

.nav-prev .nav-arrow { order: -1; }
.nav-next .nav-arrow { order: 3; }

/* ----------------------------------------------------------
   14. Detail page boss/split layout
---------------------------------------------------------- */

.detailpage-container {
    width: 100%;
    max-width: 100%;
    margin: 40px 0;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    align-items: start;
    min-width: 0;
}

.side-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.other-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    overflow: hidden;
}

.detailpage-container .box-area {
    background-color: #ffffff;
    width: 100%;
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

/* Split layout (boss pages) */
.split {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.table-wrap {
    flex: 1;
    min-width: 0;
}

.table-wrap .table-area {
    width: 100%;
    max-width: none;
    margin: 0;
}

.table-wrap .table-area td:first-child,
.table-wrap .table-area th:first-child {
    width: auto;
    white-space: normal;
    text-align: center;
}

.img-pc {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.img-pc img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.img-mobile {
    display: none;
    margin-top: 15px;
    text-align: center;
}

/* Boss split layout (alias classes) */
.boss-split {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.boss-table-wrap {
    flex: 1;
    min-width: 0;
}

.boss-img-pc {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.boss-img-pc img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.boss-img-mobile {
    display: none;
    margin-top: 15px;
    text-align: center;
}

/* ----------------------------------------------------------
   15. Gallery scroll
---------------------------------------------------------- */

.image-scroll-area {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.image-scroll-area img {
    height: 200px;
    width: auto;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    object-fit: cover;
}

/* ----------------------------------------------------------
   16. Timeline page
---------------------------------------------------------- */

.timeline-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 60px;
}

.year-separator {
    position: absolute;
    top: calc(300px * var(--year));
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 2px dotted var(--sh-line);
    font-weight: bold;
    color: var(--sh-pink);
    transform: translateY(-50%);
    z-index: 0;
    margin-left: -60px;
    padding-left: 60px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: var(--sh-pink);
    transform: translateX(-50%);
    z-index: 0;
}

.event-box {
    position: absolute;
    width: 42%;
    top: calc(300px * var(--year) + (300px / 12 * var(--month)));
    z-index: 10;
    transition: z-index 0s;
}

.event-box:hover,
.event-box:focus {
    z-index: 100;
    outline: none;
}

.event-box::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    z-index: 2;
}

.event-box::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 3px;
    background: linear-gradient(to right, var(--c1), var(--c2));
    z-index: 1;
}

.event-box.left {
    right: calc(50% + 35px);
    text-align: right;
    padding-right: 0;
}

.event-box.left::after { right: -42px; }
.event-box.left::before { right: -35px; }

.event-box.right {
    left: calc(50% + 35px);
    text-align: left;
    padding-left: 0;
}

.event-box.right::after { left: -42px; }
.event-box.right::before { left: -35px; }

.content-card {
    display: inline-block;
    background: #fff;
    padding: 15px;
    text-align: left;
    max-width: 100%;
    position: relative;
    border-radius: var(--r-sm);
    border: 2px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, var(--c1), var(--c2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.event-box:hover .content-card,
.event-box:focus .content-card {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tags {
    margin-bottom: 8px;
    line-height: 1;
}

.tag {
    display: inline-block;
    font-size: 0.7rem;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 4px;
    font-weight: bold;
    vertical-align: middle;
}

.tag.sub {
    background-color: #eee !important;
    color: #555;
    font-weight: normal;
    border: 1px solid #ddd;
}

.date-label {
    display: block;
    font-size: 0.8rem;
    color: var(--sh-text-mute);
    margin-bottom: 4px;
}

/* ----------------------------------------------------------
   17. Updates page
---------------------------------------------------------- */

.updates-list {
    padding-top: 10px;
}

.update-item {
    padding: 22px 0;
    border-bottom: 2px dotted var(--sh-line);
}

.update-item:last-child {
    border-bottom: none;
}

.update-date {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--sh-pink);
    font-size: 1rem;
    margin-bottom: 6px;
}

.update-text {
    color: var(--sh-text);
    margin: 0;
    line-height: 1.7;
}

.update-text a,
.box-text a {
    color: var(--sh-pink);
    text-decoration: underline;
    font-weight: bold;
    transition: opacity 0.2s;
}

.update-text a:hover,
.box-text a:hover {
    opacity: 0.6;
}

/* ----------------------------------------------------------
   18. Video embed
---------------------------------------------------------- */

.video-container-mobamas {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
}

.video-container-mobamas iframe {
    width: 100%;
    height: 100%;
}

.video-container-landscape {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto 12px;
}

.video-container-landscape iframe {
    width: 100%;
    height: 100%;
}

/* MV タブプレイヤー */
.mv-block {
    margin-top: 16px;
    margin-bottom: 16px;
}

.mv-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mv-tab {
    padding: 5px 14px;
    border: 1.5px solid var(--sh-line-soft);
    border-radius: var(--r-lg);
    background: var(--sh-bg-soft);
    color: var(--sh-text-mute);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mv-tab.active {
    background: var(--grad-sugar);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
}

.mv-tab:hover:not(.active) {
    background: var(--sh-pink-hush);
    border-color: var(--sh-pink-light);
    color: var(--sh-pink-deep);
}

/* ----------------------------------------------------------
   19. Pill buttons
---------------------------------------------------------- */

.sh-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    text-decoration: none;
    border: none;
    line-height: 1.4;
}

.sh-pill.primary {
    background: var(--grad-sugar);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(253,137,185,0.35);
}

.sh-pill.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(253,137,185,0.45);
}

.sh-pill.ghost {
    background: transparent;
    color: var(--sh-pink-deep);
    border: 1.5px solid var(--sh-pink);
}

.sh-pill.ghost:hover {
    background: var(--sh-pink-soft);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------
   20. Tags (sh-tag with data-tag attribute)
---------------------------------------------------------- */

.sh-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

.sh-tag[data-tag="limited"]  { background: var(--tag-limited); }
.sh-tag[data-tag="ranking"]  { background: var(--tag-ranking); }
.sh-tag[data-tag="solo"]     { background: var(--tag-solo); }
.sh-tag[data-tag="medley"]   { background: var(--tag-medley); color: var(--sh-text); }
.sh-tag[data-tag="revival"]  { background: var(--tag-revival); }
.sh-tag[data-tag="seasonal"] { background: var(--tag-seasonal); }
.sh-tag[data-tag="collab"]   { background: var(--tag-collab); }

/* Deresute event type tags */
.sh-tag[data-tag="atapon"]        { background: var(--tag-atapon); }
.sh-tag[data-tag="live-groove"]   { background: var(--tag-live-groove); }
.sh-tag[data-tag="live-parade"]   { background: var(--tag-live-parade); }
.sh-tag[data-tag="live-carnival"] { background: var(--tag-live-carnival); }
.sh-tag[data-tag="idolproduce"]   { background: var(--tag-idolproduce); }
/* Mobamas event type tags */
.sh-tag[data-tag="mob-prot"]   { background: var(--tag-mob-prot); }
.sh-tag[data-tag="mob-chall"]  { background: var(--tag-mob-chall); }
.sh-tag[data-tag="mob-royale"] { background: var(--tag-mob-royale); }
.sh-tag[data-tag="mob-dream"]  { background: var(--tag-mob-dream); }
.sh-tag[data-tag="mob-puchi"]  { background: var(--tag-mob-puchi); }

/* ----------------------------------------------------------
   21. Rarity system
---------------------------------------------------------- */

.rarity-n       { --r-c: #9e9e9e; --r-bg: #f5f5f5; }
.rarity-r       { --r-c: #42a5f5; --r-bg: #e3f2fd; }
.rarity-r-plus  { --r-c: #1e88e5; --r-bg: #bbdefb; }
.rarity-sr      { --r-c: #ab47bc; --r-bg: #f3e5f5; }
.rarity-sr-plus { --r-c: #8e24aa; --r-bg: #e1bee7; }
.rarity-ssr      { --r-c: #ffd600; --r-bg: #fffde7; }
.rarity-ssr-plus { --r-c: #d4a000; --r-bg: #fff5c0; }

.r-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: bold;
    background: var(--r-bg);
    color: var(--r-c);
    border: 1px solid var(--r-c);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.r-pill.lg {
    padding: 4px 14px;
    font-size: 0.82rem;
}

/* ----------------------------------------------------------
   22. Filter toolbar
---------------------------------------------------------- */

.toolbar {
    position: sticky;
    top: 64px;
    z-index: 100;
    background: rgba(255,248,251,0.90);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--sh-line);
    padding: 12px 0;
    margin-bottom: 24px;
}

.filter-group {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.toolbar .search {
    padding: 8px 14px 8px 36px;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-pill);
    font-size: 0.88rem;
    color: var(--sh-text);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b89c93' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.442 1.155a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    outline: none;
    transition: border-color 0.2s;
    min-width: 180px;
}

.toolbar .search:focus {
    border-color: var(--sh-pink);
}

.view-switch {
    display: inline-flex;
    background: var(--sh-pink-soft);
    border-radius: var(--r-pill);
    padding: 3px;
    gap: 2px;
}

.view-switch button {
    padding: 5px 12px;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--sh-text-soft);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

.view-switch button.active {
    background: #ffffff;
    color: var(--sh-pink-deep);
    box-shadow: var(--shadow-sm);
}

/* Filter chips */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    font-size: 0.82rem;
    font-family: var(--font-display);
    border: 1px solid var(--sh-line);
    background: #ffffff;
    color: var(--sh-text-soft);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--sh-pink-soft);
    border-color: var(--sh-pink);
    color: var(--sh-pink-deep);
}

.filter-chip.active {
    background: var(--sh-pink);
    border-color: var(--sh-pink);
    color: #ffffff;
}

.filter-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   23. Year band
---------------------------------------------------------- */

.year-band {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 36px 0 16px;
}

.year-band .yr {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--sh-pink-deep);
    font-weight: 400;
}

.year-band .cnt {
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    border-radius: var(--r-pill);
    padding: 2px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.year-band .line {
    height: 1px;
    background: var(--sh-line);
}

/* ----------------------------------------------------------
   24. Stats strip / stat row
---------------------------------------------------------- */

.stats-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

.stat-tile {
    background: #ffffff;
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-md);
    padding: 14px 10px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-tile .k {
    display: block;
    font-size: 0.72rem;
    color: var(--sh-text-mute);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

.stat-tile .v {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--sh-pink-deep);
    line-height: 1;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-md);
    padding: 18px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-card .k {
    display: block;
    font-size: 0.78rem;
    color: var(--sh-text-mute);
    margin-bottom: 6px;
}

.stat-card .v {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--sh-pink-deep);
    line-height: 1;
}

/* ----------------------------------------------------------
   25. Card list (V2 list page)
---------------------------------------------------------- */

.card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-row {
    display: grid;
    grid-template-columns: 72px auto 1fr auto;
    align-items: center;
    gap: 0;
    background: #ffffff;
    border-radius: var(--r-md);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border-left: 4px solid var(--r-c, var(--sh-pink));
    transition: box-shadow 0.2s, transform 0.2s;
}

.card-row:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-row > * {
    padding: 12px 14px;
}

.card-icon img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}

.card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.card-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.card-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--sh-text);
}

.card-name a {
    color: inherit;
    text-decoration: none;
}

.card-name a:hover {
    color: var(--sh-pink-deep);
    text-decoration: underline;
}

.card-source {
    font-size: 0.85rem;
    color: var(--sh-text-soft);
}

.card-date {
    font-size: 0.82rem;
    color: var(--sh-text-mute);
    font-family: monospace;
}

.card-action a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: 0.82rem;
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    text-decoration: none;
    transition: background 0.18s;
}

.card-action a:hover {
    background: var(--sh-pink-mist);
}

/* ----------------------------------------------------------
   26. Event list (V2 event page)
---------------------------------------------------------- */

.event-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.year-group {
    margin-bottom: 36px;
}

.event-row {
    display: flex;
    flex-direction: column-reverse;
    background: #ffffff;
    border-radius: var(--r-md);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border-left: 4px solid var(--sh-pink);
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}

/* Dynamic accent colour from data-accent attribute */
.event-row[data-accent="atapon"]        { border-left-color: var(--tag-atapon); }
.event-row[data-accent="live-groove"]   { border-left-color: var(--tag-live-groove); }
.event-row[data-accent="live-parade"]   { border-left-color: var(--tag-live-parade); }
.event-row[data-accent="live-carnival"] { border-left-color: var(--tag-live-carnival); }
.event-row[data-accent="idolproduce"]   { border-left-color: var(--tag-idolproduce); }
.event-row[data-accent="mob-prot"]      { border-left-color: var(--tag-mob-prot); }
.event-row[data-accent="mob-chall"]     { border-left-color: var(--tag-mob-chall); }
.event-row[data-accent="mob-royale"]    { border-left-color: var(--tag-mob-royale); }
.event-row[data-accent="mob-dream"]     { border-left-color: var(--tag-mob-dream); }
.event-row[data-accent="mob-puchi"]     { border-left-color: var(--tag-mob-puchi); }

.event-row:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Top section: date + info */
.event-top {
    display: flex;
    align-items: stretch;
}

/* Date column */
.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--sh-pink-hush);
    padding: 10px 14px;
    min-width: 68px;
    flex-shrink: 0;
    text-align: center;
}

.event-date .m {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--sh-pink-deep);
    line-height: 1;
}

.event-date .d {
    font-size: 0.7rem;
    color: var(--sh-text-mute);
    letter-spacing: 0.06em;
}

.event-date .y {
    font-size: 0.68rem;
    color: var(--sh-text-mute);
}

/* Info column */
.event-info {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.event-info h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--sh-text);
    margin: 0;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Full-width header image */
.event-thumb {
    width: 100%;
    aspect-ratio: 4 / 1;
    overflow: hidden;
    background: var(--sh-bg-soft);
    flex-shrink: 0;
}

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

/* ----------------------------------------------------------
   27. Script / dialogue V2
---------------------------------------------------------- */

.script-block {
    background: #ffffff;
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 12px;
}

.script-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: start;
    border-bottom: 1px solid var(--sh-line-soft);
    padding: 12px 18px;
}

.script-row:last-child {
    border-bottom: none;
}

.script-row .who {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--sh-text-mute);
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    line-height: 1.5;
    margin-top: 3px;
    flex-shrink: 0;
}

.script-row .line {
    font-size: 0.92rem;
    color: var(--sh-text);
    line-height: 1.75;
}

.script-row.stage-direction {
    font-style: italic;
    background: var(--sh-yellow-soft);
}

.script-row.stage-direction .who {
    background: none;
    color: var(--sh-text-soft);
    padding: 0;
    font-weight: normal;
    font-size: 0.82rem;
}

.script-row.stage-direction .line {
    color: var(--sh-text-soft);
}

/* Section block (collapsible section for V2 pages) */
.section-block {
    background: #ffffff;
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.section-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--grad-sugar-soft);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}

.section-block-head:hover {
    opacity: 0.85;
}

.section-block-head h2 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--sh-text);
    margin: 0;
    text-align: left;
}

.section-block-head .arrow {
    font-size: 1rem;
    color: var(--sh-pink);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.section-block.open .section-block-head .arrow {
    transform: rotate(180deg);
}

.section-block-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.section-block.open .section-block-body {
    max-height: 50000px;
}

.section-block-body-inner {
    padding: 20px;
}

/* ----------------------------------------------------------
   28. Top-page hero (V2 new top page)
---------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    margin: 40px 0 48px;
    align-items: center;
}

.hero-text .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border-radius: var(--r-pill);
    background: var(--sh-pink-soft);
    font-size: 0.78rem;
    font-family: monospace;
    color: var(--sh-pink-deep);
    margin-bottom: 18px;
    letter-spacing: 0.04em;
}

.hero-text .eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sh-pink);
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}

.hero-text h1 {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 400;
    margin: 0 0 16px 0;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--sh-pink-deep), var(--sh-pink), var(--sh-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text h1 small {
    display: block;
    font-size: 20px;
    color: var(--sh-text-soft);
    background: none;
    -webkit-text-fill-color: var(--sh-text-soft);
    margin-top: 6px;
}

.hero-text .lead {
    font-size: 16px;
    color: var(--sh-text-soft);
    line-height: 1.95;
    margin-bottom: 28px;
}

.hero-text .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.hero-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    background: var(--grad-sugar-soft);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-visual .badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--r-pill);
    padding: 5px 14px;
    font-size: 0.78rem;
    font-family: var(--font-display);
    color: var(--sh-pink-deep);
    box-shadow: var(--shadow-sm);
}

.hero-visual .stats {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-radius: var(--r-md);
    padding: 12px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 16px;
}

.hero-visual .stats .s-item {
    text-align: center;
}

.hero-visual .stats .s-v {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--sh-pink-deep);
    line-height: 1;
}

.hero-visual .stats .s-k {
    display: block;
    font-size: 0.68rem;
    color: var(--sh-text-mute);
    margin-top: 2px;
}

/* ----------------------------------------------------------
   29. Bento grid (top page)
---------------------------------------------------------- */

.bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

/* News card */
.news {
    background: #ffffff;
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}

.news .news-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sh-line-soft);
}

.news .news-row:last-child {
    border-bottom: none;
}

.news .news-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--sh-pink-soft);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    min-width: 52px;
    text-align: center;
    font-family: var(--font-display);
}

.news .news-date .y {
    font-size: 0.65rem;
    color: var(--sh-text-mute);
    line-height: 1;
}

.news .news-date .d {
    font-size: 1rem;
    color: var(--sh-pink-deep);
    line-height: 1.2;
}

.news .news-text {
    font-size: 0.9rem;
    color: var(--sh-text);
    line-height: 1.5;
}

.news .news-text .chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-size: 0.68rem;
    font-weight: bold;
    background: var(--sh-yellow-soft);
    color: var(--sh-text);
    margin-right: 6px;
    vertical-align: middle;
}

.news .news-link-col a {
    font-size: 0.8rem;
    color: var(--sh-pink);
    text-decoration: underline;
    white-space: nowrap;
}

/* Profile card */
.profile-card {
    background: var(--grad-mist);
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
}

.profile-card::before {
    content: "♡";
    position: absolute;
    top: -10px;
    right: 16px;
    font-size: 80px;
    color: var(--sh-pink);
    opacity: 0.07;
    pointer-events: none;
    line-height: 1;
}

.profile-card .profile-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid transparent;
    background:
        linear-gradient(#fff,#fff) padding-box,
        var(--grad-sugar) border-box;
    display: block;
    margin: 0 auto 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.profile-card .profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-card h3 {
    font-family: var(--font-display);
    text-align: center;
    font-size: 1.1rem;
    margin: 0 0 14px 0;
    color: var(--sh-pink-deep);
}

.profile-card .prof-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.82rem;
    padding: 0;
    margin: 0 0 16px 0;
}

.profile-card .prof-list dt {
    color: var(--sh-text-mute);
}

.profile-card .prof-list dd {
    margin: 0;
    color: var(--sh-text);
}

.profile-card .see-all {
    display: block;
    text-align: center;
}

.profile-card .see-all a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 18px;
    border-radius: var(--r-pill);
    background: #ffffff;
    color: var(--sh-pink-deep);
    font-size: 0.82rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--sh-line);
    transition: box-shadow 0.18s, transform 0.18s;
}

.profile-card .see-all a:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Games / link grid card */
.games {
    background: #ffffff;
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 28px;
}

/* Pill nav for game tabs (inside .games) */
.tab-nav.pill-nav {
    display: inline-flex;
    gap: 4px;
    background: var(--sh-pink-soft);
    border-radius: var(--r-pill);
    padding: 5px;
    margin-bottom: 20px;
}

.tab-nav.pill-nav .tab-btn {
    padding: 8px 18px;
    font-size: 0.88rem;
    font-family: var(--font-display);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--sh-text-soft);
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.tab-nav.pill-nav .tab-btn.active {
    background: #ffffff;
    color: var(--sh-pink-deep);
    box-shadow: var(--shadow-sm);
}

/* Link grid */
.link-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.link-grid a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--sh-bg-alt);
    border-radius: var(--r-sm);
    border: 1px solid var(--sh-line-soft);
    color: var(--sh-text);
    text-decoration: none;
    font-size: 0.88rem;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.link-grid a::before {
    content: "◆";
    color: var(--sh-pink);
    font-size: 0.55rem;
    flex-shrink: 0;
}

.link-grid a:hover {
    background: var(--sh-pink-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--sh-pink-deep);
}

.link-grid a.disabled,
.link-grid a[href="#"] {
    color: var(--sh-text-mute);
    pointer-events: none;
    background: var(--sh-bg);
}

/* Info CTA (2-col card at page bottom) */
.info-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    background: #ffffff;
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    padding: 28px 32px;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.info-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.info-cta h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--sh-text);
    margin: 0 0 6px 0;
}

.info-cta p {
    padding: 0;
    font-size: 0.9rem;
    color: var(--sh-text-soft);
    margin: 0;
}

/* ----------------------------------------------------------
   30. Mobile overrides — ≤900px
---------------------------------------------------------- */

@media screen and (max-width: 900px) {

    /* Header */
    .nav-menu { display: none; }
    .hamburger { display: flex; }
    .mobile-menu { display: block; }
    .mobile-menu-overlay { display: block; }
    .header-nav { padding: 0 20px; }

    /* Box */
    .box-area { width: 90%; padding: 15px; }
    .box-item { display: block; }
    .box-subtitle { display: block; margin-bottom: 4px; text-align: left; width: auto; }
    .box-area.type-news { width: 90%; padding-bottom: 50px; }

    /* Old radio tabs */
    .tab-nav {
        grid-template-columns: repeat(2, 1fr);
        border-radius: var(--r-lg);
    }
    .tab-btn { padding: 12px 5px; font-size: 0.88rem; }
    .tab-content { padding: 20px; }

    /* Pill-nav game tabs */
    .games .tab-nav.pill-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
        border-radius: var(--r-lg);
    }

    /* Card detail */
    .sidebar-cardlist { display: none; }
    .detail-container { padding: 10px; }
    .card-image-area { padding: 20px; }
    .dialogue-area { width: 100%; padding: 15px; }
    .dialogue-tab-btn { padding: 11px 8px; font-size: 0.86rem; }
    .accordion-label { padding: 12px; font-size: 0.88rem; }

    /* Card navigation */
    .card-navigation { gap: 10px; }
    .nav-card { padding: 12px; justify-content: center; }
    .nav-card-icon { width: 56px; height: 56px; }
    .nav-arrow { font-size: 1.3rem; }
    .nav-prev, .nav-next { justify-content: center; flex-direction: row; }

    /* Boss/split layout */
    .split { display: block; }
    .boss-split { display: block; }
    .img-pc { display: none; }
    .img-mobile { display: block; }
    .boss-img-pc { display: none; }
    .boss-img-mobile { display: block; }
    .detailpage-container { grid-template-columns: 1fr; }

    /* Timeline */
    .timeline-container { padding-left: 30px; }
    .year-separator { margin-left: -30px; padding-left: 30px; font-size: 0.8rem; }
    .event-box { width: 40%; }
    .content-card { padding: 10px; font-size: 0.9rem; }

    /* Hero */
    .hero {
        grid-template-columns: 1fr;
        margin: 24px 0 32px;
        gap: 28px;
    }
    .hero-text h1 { font-size: 44px; }
    .hero-visual { aspect-ratio: 16/9; }

    /* Bento */
    .bento { grid-template-columns: 1fr; }

    /* Link grid */
    .link-grid { grid-template-columns: 1fr; }

    /* Info CTA */
    .info-cta { grid-template-columns: 1fr; }

    /* Stats */
    .stats-strip { grid-template-columns: repeat(3, 1fr); }
    .stat-row { grid-template-columns: repeat(2, 1fr); }

    /* Card rows */
    .card-row {
        grid-template-areas: "icon badges name action";
        grid-template-columns: 56px auto 1fr auto;
    }

    .card-row .card-icon   { grid-area: icon; padding: 8px 8px; }
    .card-row .card-badges { grid-area: badges; padding: 8px 6px; }
    .card-row .card-name   { grid-area: name; padding: 8px 6px; }
    .card-row .card-action { grid-area: action; padding: 8px 8px; }

    .card-row .card-icon img { width: 48px; height: 48px; }

    .card-name h3 { font-size: 0.82rem; }

    /* Toolbar — not sticky on mobile */
    .toolbar {
        position: static;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Page layout */
    .page { padding: 0 16px 60px; }
    .page-hero { padding: 24px 16px 20px; }
}

/* ----------------------------------------------------------
   31. Extra breakpoint ≤720px
---------------------------------------------------------- */

@media screen and (max-width: 720px) {
    .hero-text h1 { font-size: 36px; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }

    .script-row {
        grid-template-columns: 80px 1fr;
    }

    .event-date .m { font-size: 1.1rem; }
}

/* ----------------------------------------------------------
   32. ぷちでれら・コミュページ専用コンポーネント
---------------------------------------------------------- */

/* Jump nav card */
.index-card {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 16px 22px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
    display: flex; gap: 14px;
    flex-wrap: wrap; align-items: center;
}
.index-card .label {
    font-size: 11px; font-family: ui-monospace, monospace;
    color: var(--sh-text-soft); letter-spacing: 0.08em;
}
.index-card a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    font-size: 13px; font-weight: 700;
    transition: background .15s, color .15s;
}
.index-card a:hover { background: var(--sh-pink); color: #fff; }


/* Tab group — JS-based tab switching */
.tab-list {
    display: flex; gap: 6px; margin-bottom: 18px; padding: 6px;
    background: #fff; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.tab-item {
    flex: 1; padding: 10px 14px; border-radius: var(--r-pill); border: none;
    background: transparent; font-family: var(--font-display); font-weight: 400;
    font-size: 13px; color: var(--sh-text-soft); cursor: pointer;
    transition: background .15s, color .15s;
}
.tab-item.active { background: var(--grad-sugar); color: #fff; box-shadow: var(--shadow-sm); }
.tab-item:hover:not(.active) { color: var(--sh-pink-deep); background: var(--sh-pink-soft); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Lv accordion */
.lv-accord {
    background: #fff; border-radius: var(--r-md);
    box-shadow: var(--shadow-sm); margin-bottom: 10px; overflow: hidden;
}
.lv-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(90deg, var(--sh-pink-soft), var(--sh-yellow-soft));
    cursor: pointer; font-family: var(--font-display); font-weight: 400;
    color: var(--sh-pink-deep); font-size: 15px;
}
.lv-head .lv-name { display: flex; align-items: center; gap: 10px; }
.lv-head .lv-tag {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 12px; background: #fff; color: var(--sh-pink-deep);
    border-radius: var(--r-pill); font-size: 11px;
    font-family: ui-monospace, monospace; letter-spacing: 0.06em;
}
.lv-head .lv-count { font-size: 11px; color: var(--sh-text-soft); font-family: ui-monospace, monospace; }
.lv-head .arrow {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.7); color: var(--sh-pink-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: transform .3s;
}
.lv-accord.open .lv-head .arrow { transform: rotate(180deg); }
.lv-body { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.lv-accord.open .lv-body { max-height: 5000px; }
.lv-body-inner { padding: 16px 20px; }

/* Voice line bubbles */
.voice-list { display: flex; flex-direction: column; gap: 8px; }
.voice-list .v {
    background: var(--sh-pink-hush, #fff8fb);
    border-radius: var(--r-md);
    padding: 12px 16px 12px 38px;
    font-size: 13.5px; line-height: 1.85; color: var(--sh-text);
    position: relative; border-left: 3px solid var(--sh-pink);
    transition: background .15s, transform .15s;
}
.voice-list .v::before {
    content: "♥"; position: absolute; left: 14px; top: 14px;
    color: var(--sh-pink); font-size: 12px;
}
.voice-list .v:hover { background: var(--sh-pink-soft); transform: translateX(2px); }

/* Lesson sub-category labels */
.lesson-sub {
    margin-top: 14px; margin-bottom: 8px; font-size: 12px; color: #94720f;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 400;
}
.lesson-sub::before { content: ""; width: 16px; height: 2px; background: var(--sh-yellow); }
.lesson-sub:first-child { margin-top: 0; }

/* Episode block accordion */
.ep-block {
    background: #fff; border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); margin-bottom: 12px; overflow: hidden;
}
.ep-head {
    padding: 16px 22px;
    background: linear-gradient(90deg, #fff 0%, var(--sh-pink-soft) 100%);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; cursor: pointer;
}
.ep-head h3 {
    font-size: 15px; color: var(--sh-text);
    font-family: var(--font-body); font-weight: 700;
    display: flex; align-items: center; gap: 10px;
}
.ep-head .ep-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--sh-pink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 11px; flex-shrink: 0;
}
.ep-head .lesson-tag {
    padding: 2px 10px; border-radius: var(--r-pill);
    background: var(--sh-yellow-soft); color: #94720f;
    font-size: 10px; font-family: ui-monospace, monospace; letter-spacing: 0.04em;
}
.ep-head .arrow {
    width: 28px; height: 28px; border-radius: 50%; background: #fff;
    color: var(--sh-pink-deep); display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: transform .3s; flex-shrink: 0;
}
.ep-block.open .ep-head .arrow { transform: rotate(180deg); }
.ep-body { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.ep-block.open .ep-body { max-height: 8000px; }
.ep-body-inner { padding: 20px 22px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media screen and (min-width: 900px) {
    .ep-body-inner { grid-template-columns: 320px 1fr; align-items: start; }
    .ep-body-inner .yt-frame { margin: 0; max-width: 100%; }
}

/* Commu index (シンデレラヒストリー等) */
.commu-index {
    background: #fff; border-radius: var(--r-lg);
    padding: 18px 22px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.commu-index .label {
    font-size: 11px; font-family: ui-monospace, monospace;
    color: var(--sh-text-soft); letter-spacing: 0.08em; margin-bottom: 12px;
}
.commu-index .links { display: flex; flex-direction: column; gap: 4px; }
.commu-index .links a {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: var(--r-md); background: var(--sh-bg-alt); color: var(--sh-text);
    font-size: 13.5px; transition: background .15s, padding-left .15s; cursor: pointer;
}
.commu-index .links a:hover { background: var(--sh-pink-soft); color: var(--sh-pink-deep); padding-left: 18px; }
.commu-index .links a .num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--sh-pink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 11px; flex-shrink: 0;
}
.commu-index .links a .when {
    margin-left: auto; font-size: 11px; color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
}

/* Cast block */
.cast-block {
    background: var(--sh-pink-hush, #fff8fb);
    border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px;
}
.cast-block .label {
    font-size: 11px; color: var(--sh-text-soft);
    font-family: ui-monospace, monospace; letter-spacing: 0.08em; margin-bottom: 8px;
}

/* Idol avatar row */
.idol-cast { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 0; }
.idol-cast .idol {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px;
}
.idol-cast .idol img {
    width: 72px; height: 72px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: var(--shadow-sm);
    background: var(--grad-sugar-soft); object-fit: cover;
}
.idol-cast .idol.shin img {
    border-color: var(--sh-yellow); box-shadow: 0 4px 14px rgba(253,137,185,0.4);
}
.idol-cast .idol .nm {
    font-size: 11px; color: var(--sh-text);
    font-family: var(--font-body); font-weight: 700;
    text-align: center; line-height: 1.3;
}

/* Commu body layout (video + script) */
.commu-body { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media screen and (min-width: 900px) {
    .commu-body.with-video {
        grid-template-columns: 320px 1fr; align-items: start;
    }
    .commu-body.with-video .yt-frame { margin: 0; max-width: 100%; }
    .commu-body.with-video .video-col { position: sticky; top: 88px; }
}

/* Section-block head extras for commu pages */
.section-block-head .meta {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.section-block-head .num-badge {
    font-family: ui-monospace, monospace; font-size: 10px;
    color: var(--sh-pink-deep); background: rgba(255,255,255,0.7);
    padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: 0.08em;
}
.section-block-head .right {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}

@media screen and (max-width: 900px) {
    .idol-cast .idol { width: 64px; }
    .idol-cast .idol img { width: 56px; height: 56px; }
    .tab-list { flex-wrap: wrap; }
    .tab-item { flex: none; }
    .ep-body-inner { grid-template-columns: 1fr; }
}



/* ----------------------------------------------------------
   メモリアルコミュ — 共有プレイヤー & シークボタン
---------------------------------------------------------- */

/* 上部固定プレイヤー（16:9） */
.mc-player-wrap {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 28px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #000;
    aspect-ratio: 16 / 9;
    position: relative;
}
.mc-player-wrap iframe,
.mc-player-wrap > div {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    inset: 0;
}

/* シークボタン */
.mc-seek-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    border: none;
    background: var(--sh-pink);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s, transform 0.1s;
    margin-bottom: 20px;
}
.mc-seek-btn::before { content: "▶"; font-size: 0.75rem; }
.mc-seek-btn:hover { background: var(--sh-pink-deep); }
.mc-seek-btn:active { transform: scale(0.97); }

/* ----------------------------------------------------------
   Unified CardList — game tag badge + tab nav
---------------------------------------------------------- */
.game-tag {
    display: inline-block;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    vertical-align: middle;
    margin-right: 6px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.game-tag-mobamas { background: rgba(253,137,185,0.2); color: #c42667; }
.game-tag-deresute { background: rgba(91,144,255,0.15); color: #1a4db5; }

.cl-no-results {
    padding: 32px;
    text-align: center;
    color: var(--sh-text-mute);
    font-size: 0.9rem;
}

/* ----------------------------------------------------------
   Index inline sub-menus (details/summary)
---------------------------------------------------------- */
.link-details {
    background: var(--sh-bg-alt);
    border-radius: var(--r-sm);
    border: 1px solid var(--sh-line-soft);
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
}

.link-details[open] {
    background: #fff;
    border-color: var(--sh-pink-mist);
}

.link-details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    color: var(--sh-text);
    list-style: none;
    user-select: none;
}

.link-details > summary::-webkit-details-marker { display: none; }

.link-details > summary::before {
    content: "◆";
    color: var(--sh-pink);
    font-size: 0.55rem;
    flex-shrink: 0;
}

.link-details > summary::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--sh-pink);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.link-details[open] > summary::after { transform: rotate(180deg); }

.link-details .link-submenu-inner {
    border-top: 1px solid var(--sh-line-soft);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.link-details .link-submenu-inner a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: var(--sh-text);
    text-decoration: none;
    border-radius: var(--r-sm);
    font-size: 0.84rem;
    transition: background 0.15s, color 0.15s;
}

.link-details .link-submenu-inner a::before {
    content: "→";
    color: var(--sh-pink);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.link-details .link-submenu-inner a:hover {
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
}

.link-details .link-submenu-inner .coming-soon {
    padding: 8px 12px;
    color: var(--sh-text-mute);
    font-size: 0.82rem;
    font-style: italic;
}

/* ----------------------------------------------------------
   ユニット一覧・ユニット詳細専用コンポーネント
---------------------------------------------------------- */

/* === ユニット一覧ツールバー === */
.unit-toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    flex-direction: column;
}
/* ゲームタブ */
.unit-game-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}
.unit-tab {
    padding: 7px 18px;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    color: var(--sh-text-soft);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.unit-tab.active { background: var(--sh-pink); color: #fff; }
/* 検索・ソート行 */
.unit-search-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.unit-search-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 16px;
    border: 1.5px solid var(--sh-line);
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--sh-text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.unit-search-input:focus { border-color: var(--sh-pink); }
.unit-sort-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.unit-sort-label {
    font-size: 11px;
    color: var(--sh-text-soft);
    white-space: nowrap;
}
.sort-controls { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.unit-sort-btn {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--sh-line);
    background: #fff;
    color: var(--sh-text-soft);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.unit-sort-btn.active { border-color: var(--sh-pink); color: var(--sh-pink-deep); background: var(--sh-pink-soft); }
@media screen and (max-width: 900px) {
    .unit-search-input { min-width: 0; }
    .unit-sort-group { flex-wrap: wrap; }
}
.list-empty {
    text-align: center;
    color: var(--sh-text-soft);
    font-size: 13px;
    padding: 28px 0 8px;
}

/* ----------------------------------------------------------
   シンデレラガールズ劇場 一覧
---------------------------------------------------------- */
.gekijo-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}
.gekijo-block {
    background: #fff;
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gekijo-thumb {
    cursor: zoom-in;
    background: var(--sh-pink-soft);
    line-height: 0;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.gekijo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: opacity 0.15s;
}
.gekijo-thumb::after {
    content: "🔍 タップで全体表示";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    font-size: 10px;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
    padding: 14px 8px 5px;
    text-align: right;
    pointer-events: none;
}
.gekijo-thumb:hover img { opacity: 0.85; }
.gekijo-meta {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gekijo-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}
.gekijo-date {
    margin-left: auto;
    font-size: 11px;
    color: var(--sh-text-mute);
    font-family: monospace;
    white-space: nowrap;
}
.gekijo-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sh-text);
    line-height: 1.35;
}
.gekijo-ep {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--sh-pink-deep);
}
.gekijo-type {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.gekijo-type.type-mujirushi { background: #eaecfb; color: #5560c0; }
.gekijo-type.type-wide { background: var(--sh-pink-soft); color: var(--sh-pink-deep); }
.gekijo-type.type-anime { background: #e6f5e6; color: #4a9a4a; }
.gekijo-cast {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.gekijo-cast .idol { width: 46px; text-align: center; }
.gekijo-cast .idol img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.gekijo-cast .idol.shin img { border: 2px solid var(--sh-pink); }
.gekijo-cast .idol .nm {
    display: block;
    font-size: 9px;
    color: var(--sh-text-soft);
    margin-top: 3px;
}
.gekijo-cast .idol-empty {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px dashed var(--sh-line);
    box-sizing: border-box;
}
.gekijo-cast .idol.no-icon { width: 46px; text-align: center; }
.gekijo-cast .idol.no-icon::before {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sh-pink-soft);
    margin: 0 auto;
}
.gekijo-rel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.gekijo-rel::before {
    content: "関連ページ";
    display: block;
    width: 100%;
    font-size: 10px;
    color: var(--sh-text-mute);
    margin-bottom: 1px;
}
.gekijo-rel .rel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: var(--sh-bg-alt);
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-pill);
    color: var(--sh-pink-deep);
    text-decoration: none;
    font-size: 11px;
    line-height: 1.3;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.gekijo-rel .rel-btn::before {
    content: "◆";
    color: var(--sh-pink);
    font-size: 0.5rem;
    flex-shrink: 0;
}
.gekijo-rel .rel-btn:hover {
    background: var(--sh-pink-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    color: var(--sh-pink-deep);
}
.size-filter {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}
.size-filter button {
    padding: 7px 16px;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    color: var(--sh-text-soft);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.size-filter button.active { background: var(--sh-pink); color: #fff; }
.unit-sort {
    margin-left: auto;
    font-size: 12px;
    color: var(--sh-text-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.unit-sort select {
    background: #fff;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--sh-text);
}

/* === ユニットグリッド === */
.unit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.unit-card {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}
.unit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* カードのグラデーション上部 */
.unit-cover {
    background: var(--grad-sugar-soft);
    padding: 24px 26px 20px;
    position: relative;
    border-bottom: 1px solid var(--sh-line);
    overflow: hidden;
}
.unit-cover::after {
    content: "♥";
    position: absolute;
    bottom: -32px;
    right: 14px;
    font-size: 120px;
    color: rgba(253, 137, 185, 0.10);
    line-height: 1;
    pointer-events: none;
}
.unit-cover .meta {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* バッジ（サイズ・年代・テーマ） */
.unit-badge {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-weight: 700;
    line-height: 1.5;
    display: inline-block;
}
.unit-badge.size  { background: var(--sh-pink); color: #fff; }
.unit-badge.year  { background: #fff; color: var(--sh-text-soft); border: 1px solid var(--sh-line); }
.unit-badge.theme { background: var(--sh-yellow-soft); color: #94720f; }

/* ユニット名 */
.unit-name {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--sh-pink-deep);
    line-height: 1.2;
    position: relative;
}
.unit-en {
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: var(--sh-text-soft);
    letter-spacing: 0.1em;
    margin-top: 4px;
    position: relative;
}

/* メンバーエリア */
.unit-members {
    padding: 20px 26px 16px;
}
.unit-members .label {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.1em;
    font-family: ui-monospace, monospace;
    margin-bottom: 12px;
}
.member-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* メンバーアバター（ユニット一覧・詳細共通） */
.unit-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 64px;
}
.unit-member .av {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--grad-sugar-soft);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-pink-deep);
    font-family: var(--font-display);
    font-size: 13px;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
}
.unit-member .av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.unit-member.shin .av {
    background: var(--grad-sugar);
    color: #fff;
    border-color: var(--sh-yellow);
    box-shadow: 0 4px 12px rgba(253, 137, 185, 0.4);
}
.unit-member.shin::after {
    content: "★";
    position: relative;
    top: -8px;
    color: var(--sh-yellow);
    font-size: 11px;
}
.unit-member .nm {
    font-size: 11px;
    color: var(--sh-text);
    text-align: center;
    line-height: 1.3;
}

/* ユニット情報グリッド */
.unit-info {
    padding: 0 26px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    font-size: 12px;
    color: var(--sh-text-soft);
}
.unit-info .row {
    display: flex;
    gap: 6px;
    padding: 6px 0;
    border-top: 1px dotted var(--sh-line);
}
.unit-info .row .k {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.06em;
    font-family: ui-monospace, monospace;
    flex-shrink: 0;
    padding-top: 2px;
}
.unit-info .row .v { color: var(--sh-text); font-weight: 700; }

/* カードフッター */
.unit-foot {
    padding: 14px 24px;
    background: var(--sh-bg-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--sh-line);
    margin-top: auto;
}
.unit-foot .stats {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--sh-text-soft);
}
.unit-foot .stats .stat strong {
    font-family: var(--font-display);
    color: var(--sh-pink-deep);
    font-size: 16px;
    margin-right: 3px;
}
.unit-foot .detail-btn {
    font-size: 12px;
    font-weight: 700;
    color: var(--sh-pink-deep);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: #fff;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.unit-foot .detail-btn:hover { background: var(--sh-pink-soft); }

/* === ユニット詳細ヒーロー === */
.unit-hero {
    background: #fff;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    margin-bottom: 24px;
}
.unit-hero-left {
    background: var(--grad-sugar-soft);
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
}
.unit-hero-left::after {
    content: "♥";
    position: absolute;
    bottom: -50px;
    right: -10px;
    font-size: 200px;
    color: rgba(253, 137, 185, 0.10);
    line-height: 1;
    pointer-events: none;
}
.unit-hero-left .badges { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.unit-hero-left h1 {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--sh-pink-deep);
    line-height: 1.15;
    margin-bottom: 6px;
    position: relative;
}
.unit-hero-left .en {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--sh-text-soft);
    margin-bottom: 20px;
    position: relative;
}
.unit-hero-left .summary {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--sh-text);
    margin: 0;
    max-width: 460px;
    position: relative;
}
.unit-hero-right { padding: 28px 32px; }
.members-label {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.1em;
    font-family: ui-monospace, monospace;
    margin-bottom: 14px;
}
.members-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* 詳細ページ用メンバーアバター（大きめ） */
.members-row .unit-member {
    width: 72px;
}
.members-row .unit-member .av {
    width: 64px;
    height: 64px;
    font-size: 14px;
}

/* ヒーロー統計（4列） */
.unit-stats-strip {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px dotted var(--sh-line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.unit-stats-strip .stat { text-align: center; }
.unit-stats-strip .stat .v {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--sh-pink-deep);
    line-height: 1;
}
.unit-stats-strip .stat .l {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* === セクションタブ（詳細ページ） === */
.section-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.section-tab {
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    background: #fff;
    color: var(--sh-text-soft);
    border: 1px solid var(--sh-line);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.section-tab.active { background: var(--sh-pink); color: #fff; border-color: var(--sh-pink); }
.section-tab .count {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 10px;
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
}
.section-tab.active .count { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* === 出番カード（appearance） === */
.appearance {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 18px;
}
.appearance-header {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sh-line);
    background: linear-gradient(180deg, #fff 0%, var(--sh-bg-alt) 100%);
}
.ap-date {
    text-align: center;
    background: #fff;
    border-radius: var(--r-sm);
    padding: 10px 4px;
    border: 1px solid var(--sh-line);
}
.ap-date .y { font-size: 10px; color: var(--sh-text-soft); font-family: ui-monospace, monospace; }
.ap-date .m { font-family: var(--font-display); font-size: 22px; color: var(--sh-pink-deep); line-height: 1; }
.ap-date .d { font-size: 10px; color: var(--sh-text-soft); margin-top: 2px; font-family: ui-monospace, monospace; }
.ap-title h3 {
    font-size: 18px;
    color: var(--sh-text);
    margin-bottom: 4px;
    font-family: var(--font-body);
    font-weight: 700;
}
.ap-title .game-event {
    font-size: 11px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ap-title .game-event a { color: var(--sh-pink-deep); border-bottom: 1px dotted; text-decoration: none; }
.ap-title .tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.ap-meta {
    display: flex;
    gap: 8px;
    color: var(--sh-text-soft);
    font-size: 11px;
    font-family: ui-monospace, monospace;
    text-align: right;
    flex-direction: column;
    align-items: flex-end;
}
.ap-meta .num {
    padding: 4px 10px;
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    border-radius: var(--r-pill);
    font-weight: 700;
}

/* === フェーズグリッド（5列: DEBUT/BATTLE/WIN/LOSE/DRAW） === */
.phases {
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.phase {
    display: flex;
    flex-direction: column;
    background: var(--sh-bg-alt);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--sh-line);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.phase:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.phase-label {
    padding: 8px 12px;
    font-family: var(--font-display);
    font-size: 12px;
    color: #fff;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.phase[data-phase="debut"]  .phase-label { background: linear-gradient(90deg, #b87fd6, #d97fb8); }
.phase[data-phase="battle"] .phase-label { background: linear-gradient(90deg, #fd89b9, #e06898); }
.phase[data-phase="win"]    .phase-label { background: linear-gradient(90deg, #f59e0b, #fad766); color: #5d4037; }
.phase[data-phase="lose"]   .phase-label { background: linear-gradient(90deg, #8a6f64, #b89c93); }
.phase[data-phase="draw"]   .phase-label { background: linear-gradient(90deg, #ffb84d, #ff9b6a); }
.phase-label .ic { opacity: 0.85; font-size: 10px; }
.phase .phase-img {
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--grad-sugar-soft);
    border-bottom: 1px dashed var(--sh-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-text-mute);
    font-size: 11px;
    font-family: ui-monospace, monospace;
    text-align: center;
    overflow: hidden;
}
.phase .phase-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.phase .dialogue {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--sh-text);
    background: #fff;
    flex: 1;
    min-height: 84px;
}
.phase .dialogue .speaker {
    display: inline-block;
    font-size: 10px;
    color: var(--sh-pink-deep);
    font-weight: 700;
    margin-right: 4px;
}

/* 出番フッター */
.ap-foot {
    padding: 14px 22px;
    background: var(--sh-bg-alt);
    border-top: 1px dashed var(--sh-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--sh-text-soft);
    flex-wrap: wrap;
}
.ap-foot .related {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.ap-foot .related .lbl {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
    color: var(--sh-text-soft);
    font-size: 10px;
}
.ap-foot .related a {
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--sh-pink-deep);
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--sh-line-soft);
    text-decoration: none;
}
.ap-foot .related a:hover { background: var(--sh-pink-soft); }
.ap-foot .full-detail {
    color: var(--sh-pink-deep);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: #fff;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    white-space: nowrap;
}

/* page-hero の meta-row・chip（ユニット一覧の統計チップ） */
.page-hero .meta-row {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.page-hero .chip {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--sh-line);
    font-size: 12px;
    color: var(--sh-text-soft);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.page-hero .chip strong { color: var(--sh-pink-deep); font-family: var(--font-display); }

/* === レスポンシブ（ユニット系） === */
@media screen and (max-width: 900px) {
    .unit-grid { grid-template-columns: 1fr; }
    .unit-hero  { grid-template-columns: 1fr; }
    .appearance-header { grid-template-columns: 72px 1fr; }
    .ap-meta { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
    .phases {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .unit-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .section-tabs { gap: 4px; }
    .section-tab { padding: 8px 14px; font-size: 12px; }
    .unit-hero-left { padding: 24px 22px; }
    .unit-hero-left h1 { font-size: 28px; }
    .unit-hero-right { padding: 20px 22px; }
}

/* ----------------------------------------------------------
   V2 カード詳細ページ
---------------------------------------------------------- */

/* レイアウト */
.v2-detail-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 28px 80px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: stretch;
}
.v2-detail-main { min-width: 0; }

/* サイドバー */
.v2-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100dvh - 96px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.v2-sidebar-sticky {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}
.v2-sidebar h3 {
    font-size: 12px;
    color: var(--sh-pink-deep);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px dotted var(--sh-pink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sb-count {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--sh-pink-soft);
    font-family: ui-monospace, monospace;
}
.sb-list { display: flex; flex-direction: column; gap: 2px; }
.sb-section-label {
    font-size: 10px;
    color: var(--sh-text-mute);
    letter-spacing: 0.1em;
    padding: 10px 10px 4px;
    font-family: ui-monospace, monospace;
    border-top: 1px solid var(--sh-line-soft);
    margin-top: 6px;
}
.sb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    color: var(--sh-text);
    font-size: 11.5px;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s, padding-left 0.15s;
}
.sb-item:hover { background: var(--sh-pink-soft); padding-left: 14px; }
.sb-item.active { background: var(--sh-pink); color: #fff; font-weight: 700; }
.sb-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--grad-sugar-soft);
}

/* タイトルブロック */
.v2-title-block {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    border-left: 5px solid var(--sh-pink);
}
.v2-breadcrumb {
    font-size: 10px;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
    color: var(--sh-text-soft);
    margin-bottom: 10px;
}
.v2-breadcrumb a { color: var(--sh-pink-deep); text-decoration: none; }
.v2-title-block h1 {
    font-size: 26px;
    color: var(--sh-text);
    line-height: 1.2;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.v2-date {
    font-size: 12px;
    font-family: ui-monospace, monospace;
    color: var(--sh-text-soft);
    font-weight: 400;
}

/* 前後ナビ */
.v2-card-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.v2-nav-card {
    background: #fff;
    border-radius: var(--r-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    color: var(--sh-text);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.v2-nav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.v2-nav-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--grad-sugar-soft);
}
.v2-nav-label {
    font-size: 10px;
    color: var(--sh-pink-deep);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.v2-nav-name { font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.v2-nav-arrow { color: var(--sh-pink); font-size: 16px; flex-shrink: 0; }
.v2-nav-card.v2-nav-next { text-align: right; justify-content: flex-end; }

/* カードヒーロー */
.v2-card-hero {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: start;
}
.v2-main-img-area img,
.v2-main-img-area video {
    width: 100%;
    border-radius: var(--r-md);
    box-shadow: 0 4px 14px rgba(253,137,185,0.15);
    cursor: pointer;
    transition: opacity 0.15s;
    display: block;
}
.v2-img-hint {
    font-size: 11px;
    color: var(--sh-text-mute);
    text-align: center;
    margin-top: 8px;
    font-family: ui-monospace, monospace;
}
.v2-meta-panel h2 {
    font-size: 13px;
    color: var(--sh-pink-deep);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.v2-meta-panel h2::before { content: "♥"; color: var(--sh-pink); }
.v2-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.v2-meta-row {
    display: flex;
    gap: 5px;
    padding: 7px 0;
    border-bottom: 1px dotted var(--sh-line);
    font-size: 12px;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
}
.v2-meta-row:last-child { border-bottom: none; }
.v2-meta-wide {
    grid-column: span 2;
    white-space: normal;
}
.v2-meta-k {
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.v2-meta-v { color: var(--sh-text); }

/* セリフエリア */
.v2-dialogue-block {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 14px;
}
.v2-dialogue-tabs {
    display: flex;
    background: var(--sh-bg-alt);
    border-bottom: 1px solid var(--sh-line);
}
.v2-dialogue-tab {
    flex: 1;
    padding: 13px 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--sh-text-soft);
    text-align: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.v2-dialogue-tab.active {
    color: var(--sh-pink-deep);
    border-bottom-color: var(--sh-pink);
    background: #fff;
}
.v2-dialogue-content { padding: 16px 22px; }
.v2-accord { border-bottom: 1px dotted var(--sh-line); }
.v2-accord:last-child { border-bottom: none; }
.v2-accord-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    cursor: pointer;
    user-select: none;
}
.v2-accord-lbl {
    font-size: 13px;
    color: var(--sh-pink-deep);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.v2-accord-lbl::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sh-pink);
    flex-shrink: 0;
}
.v2-accord-arrow { color: var(--sh-pink); transition: transform 0.3s; flex-shrink: 0; }
.v2-accord.open .v2-accord-arrow { transform: rotate(180deg); }
.v2-accord-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.3s ease;
}
.v2-accord.open .v2-accord-body { max-height: 3000px; padding: 4px 0 16px; }
.v2-accord-body p {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--sh-text);
    padding: 8px 14px;
    background: var(--sh-pink-hush);
    border-radius: var(--r-sm);
}
.v2-accord-body p::before { content: "「"; color: var(--sh-pink); margin-right: 2px; }
.v2-accord-body p::after { content: "」"; color: var(--sh-pink); margin-left: 2px; }
.accord-sub {
    font-size: 11px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
    margin: 12px 0 6px;
    padding-left: 6px;
    border-left: 2px solid var(--sh-pink);
}

/* ── イベント中セリフ アコーディオン ── */
.ev-accord-list { display: flex; flex-direction: column; }
.ev-accord-head-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.ev-accord-head-inner .speaker {
    font-size: 12px;
    padding: 3px 10px;
    background: var(--sh-pink);
    color: #fff;
    border-radius: var(--r-pill);
    font-weight: 700;
    flex-shrink: 0;
}
.ev-accord-head-inner .speaker[data-who="P"]           { background: var(--sh-text); }
.ev-accord-head-inner .speaker[data-who="心"]          { background: #f04e98; }
.ev-accord-head-inner .speaker[data-who="きらり"]       { background: #ffd100; color: #222; }
.ev-accord-head-inner .speaker[data-who="ほたる"]       { background: #c964cf; }
.ev-accord-head-inner .speaker[data-who="千鶴"]         { background: #99e3fc; color: #222; }
.ev-accord-head-inner .speaker[data-who="ナレーション"]  { background: transparent; color: var(--sh-text-soft); border: 1px dashed var(--sh-line); }
.ev-accord-head-inner .speaker[data-who="アイドル他"]    { background: var(--sh-text-soft); }
.ev-accord-head-inner .stamp {
    font-size: 10px;
    color: var(--sh-text-mute);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.06em;
}
.ev-dialog-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.ev-shot {
    width: 72px;
    flex-shrink: 0;
    aspect-ratio: 16/10;
    border-radius: var(--r-sm);
    background: var(--grad-sugar-soft);
    border: 1.5px dashed rgba(253,137,185,0.30);
    overflow: hidden;
}
.ev-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ev-text {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--sh-text);
    flex: 1;
    min-width: 0;
}
.ev-text .ud-dialogue { padding-top: 4px; }
.ev-shot img { cursor: zoom-in; }

.ev-entry { display: flex; flex-direction: column; gap: 8px; }
.ev-condition { display: flex; align-items: center; gap: 6px; }
.ev-label { background: var(--sh-line); color: var(--sh-text-soft); border-radius: 3px; padding: 1px 6px; font-size: 11px; flex-shrink: 0; }
.ev-cond-text { font-size: 12.5px; color: var(--sh-text-soft); }
.ev-divider { border: none; border-top: 1.5px dashed var(--sh-line); margin: 10px 0; }
.ev-scene-img {
    display: block;
    width: 100%;
    border-radius: var(--r-sm);
    margin-bottom: 14px;
    cursor: zoom-in;
}

/* ── ライトボックス ── */
.sh-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.sh-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}
.sh-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    transform: scale(0.94);
    transition: transform 0.22s ease;
    cursor: default;
}
.sh-lightbox.open .sh-lightbox-img { transform: scale(1); }
.sh-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
    user-select: none;
    padding: 4px 8px;
}
.sh-lightbox-close:hover { opacity: 1; }

/* 劇場 */
/* 劇場・ギャラリー・関連ページ 2カラムレイアウト（PC） */
.v2-detail-lower {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
    min-width: 0;
}
.v2-detail-lower-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.v2-theater {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 20px;
    min-width: 0;
    overflow: hidden;
}
.v2-theater h2 {
    font-size: 15px;
    color: var(--sh-pink-deep);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.v2-theater h2::before { content: "✦"; color: var(--sh-yellow); }
.v2-theater img {
    width: 100%;
    border-radius: var(--r-md);
    display: block;
}

/* ギャラリー */
.v2-gallery {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 20px;
    min-width: 0;
    overflow: hidden;
}
.v2-gallery h2 {
    font-size: 15px;
    color: var(--sh-pink-deep);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.v2-gallery h2::before { content: "✦"; color: var(--sh-yellow); }
.gallery-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--sh-pink) var(--sh-pink-soft);
}
.gallery-img {
    height: 160px;
    width: auto;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    object-fit: cover;
    cursor: pointer;
}

/* 関連ページ */
.v2-related {
    background: linear-gradient(135deg, var(--sh-pink-soft), var(--sh-yellow-soft));
    border-radius: var(--r-lg);
    padding: 14px 20px;
    min-width: 0;
    overflow: hidden;
}
.v2-related h2 { font-size: 13px; color: var(--sh-pink-deep); margin-bottom: 10px; }
.v2-related-links { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-related-links a {
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--sh-pink-deep);
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.v2-related-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* レスポンシブ */
@media screen and (max-width: 900px) {
    .v2-detail-layout { grid-template-columns: 1fr; padding: 16px 16px 60px; }
    .v2-sidebar { display: none; }
    .v2-card-hero { grid-template-columns: 1fr; padding: 18px; }
    .v2-title-block h1 { font-size: 20px; }
    .v2-card-nav { grid-template-columns: 1fr; }
    .gallery-img { height: 130px; }
    .v2-detail-lower { grid-template-columns: 1fr; }
}

/* ユニット詳細ページ */
.unit-img-group { margin-bottom: 28px; }
.unit-img-group .box-title { margin-bottom: 14px; }
.unit-img-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.unit-img-fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.unit-img-fig figcaption {
    font-size: 11px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
}
.unit-img-fig img {
    width: 180px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
@media screen and (max-width: 900px) {
    .unit-img-row { gap: 10px; }
    .unit-img-fig img { width: 140px; }
}

/* ----------------------------------------------------------
   ユニット詳細ページ V2
---------------------------------------------------------- */
.ud-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px 80px;
}

/* Hero card */
.ud-hero {
    background: #fff;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    margin-bottom: 24px;
}
.ud-hero-left {
    background: var(--grad-sugar-soft);
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
}
.ud-hero-left::after {
    content: "♥";
    position: absolute;
    bottom: -50px;
    right: -10px;
    font-size: 200px;
    color: rgba(253,137,185,0.10);
    line-height: 1;
    pointer-events: none;
}
.ud-hero-left .badges {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.ud-hero-left h1 {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--sh-pink-deep);
    line-height: 1.2;
    margin-bottom: 6px;
    position: relative;
    margin-top: 0;
}
.ud-hero-left .en {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--sh-text-soft);
    margin-bottom: 20px;
    position: relative;
}
.ud-hero-left .summary {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--sh-text);
    margin: 0;
    position: relative;
}
.ud-hero-right {
    padding: 28px 32px;
}
.members-label {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.1em;
    font-family: ui-monospace, monospace;
    margin-bottom: 14px;
}
.members-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 72px;
}
.member .av {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--grad-sugar-soft);
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-pink-deep);
    font-family: var(--font-display);
    font-size: 14px;
    text-align: center;
    line-height: 1.1;
}
.member.shin .av {
    background: var(--grad-sugar);
    color: #fff;
    border-color: var(--sh-yellow);
    box-shadow: 0 4px 14px rgba(253,137,185,0.4);
}
.member .av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.member .av { overflow: hidden; }
.member .name {
    font-size: 11.5px;
    color: var(--sh-text);
    text-align: center;
    line-height: 1.3;
}

/* ユニット詳細セリフ */
.ud-dialogue .line { margin-bottom: 6px; line-height: 1.75; }
.ud-dialogue .speaker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--sh-pink-deep);
    padding: 2px 7px;
    border-radius: var(--r-pill);
    margin-bottom: 3px;
    width: fit-content;
}
.ud-ap-foot .card-ref {
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--sh-text-soft);
    font-size: 11.5px;
    border: 1px solid var(--sh-line-soft);
}

/* Stats strip */
.ud-stats-strip {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px dotted var(--sh-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ud-stats-strip .stat { text-align: center; }
.ud-stats-strip .stat .v {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--sh-pink-deep);
    line-height: 1;
}
.ud-stats-strip .stat .l {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* Unit-level related pages */
.ud-related {
    background: #fff;
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ud-related .lbl {
    font-size: 11px;
    color: var(--sh-text-soft);
    letter-spacing: 0.08em;
    white-space: nowrap;
    margin-right: 4px;
}
.ud-related a {
    font-size: 13px;
    color: var(--sh-pink-deep);
    background: var(--sh-pink-soft);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background 0.15s;
}
.ud-related a:hover {
    background: var(--sh-pink);
    color: #fff;
}
.ud-related a.disabled {
    color: var(--sh-text-mute);
    background: var(--sh-bg-alt);
    pointer-events: none;
    cursor: default;
}

/* Appearance card */
.ud-appearance {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 18px;
}
.ud-appearance-header {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sh-line);
    background: linear-gradient(180deg, #fff 0%, var(--sh-bg-alt) 100%);
}
.ud-ap-date {
    text-align: center;
    background: #fff;
    border-radius: var(--r-sm);
    padding: 10px 4px;
    border: 1px solid var(--sh-line);
}
.ud-ap-date .y {
    font-size: 10px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
}
.ud-ap-date .m {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--sh-pink-deep);
    line-height: 1;
}
.ud-ap-date .d {
    font-size: 10px;
    color: var(--sh-text-soft);
    margin-top: 2px;
    font-family: ui-monospace, monospace;
}
.ud-ap-title h3 {
    font-size: 18px;
    color: var(--sh-text);
    margin: 0 0 4px;
    font-weight: 700;
}
.ud-ap-title .game-event {
    font-size: 11px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
}
.ud-ap-meta {
    display: flex;
    gap: 8px;
    color: var(--sh-text-soft);
    font-size: 11px;
    font-family: ui-monospace, monospace;
    text-align: right;
    align-items: center;
}
.ud-ap-meta .num {
    padding: 4px 10px;
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    border-radius: var(--r-pill);
    font-weight: 700;
    white-space: nowrap;
}

/* Phases grid */
.ud-phases {
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.ud-phase {
    display: flex;
    flex-direction: column;
    background: var(--sh-bg-alt);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--sh-line);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ud-phase:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ud-phase-label {
    padding: 8px 12px;
    font-family: var(--font-display);
    font-size: 12px;
    color: #fff;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ud-phase[data-phase="debut"]  .ud-phase-label { background: linear-gradient(90deg, #b87fd6, #d97fb8); }
.ud-phase[data-phase="battle"] .ud-phase-label { background: linear-gradient(90deg, #fd89b9, #e06898); }
.ud-phase[data-phase="win"]    .ud-phase-label { background: linear-gradient(90deg, #f59e0b, #fad766); color: #5d4037; }
.ud-phase[data-phase="lose"]   .ud-phase-label { background: linear-gradient(90deg, #8a6f64, #b89c93); }
.ud-phase[data-phase="draw"]   .ud-phase-label { background: linear-gradient(90deg, #ffb84d, #ff9b6a); }
.ud-phase-label .ic { opacity: 0.85; font-size: 10px; }
.ud-phase-img {
    width: 100%;
    background: #fff;
    border-bottom: 1px dashed var(--sh-line);
}
.ud-phase-img img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.ud-dialogue {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--sh-text);
    background: #fff;
    flex: 1;
    min-height: 60px;
}

/* Appearance footer */
.ud-ap-foot {
    padding: 14px 22px;
    background: var(--sh-bg-alt);
    border-top: 1px dashed var(--sh-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--sh-text-soft);
}
.ud-ap-foot .related {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.ud-ap-foot .related .lbl {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
    color: var(--sh-text-soft);
    font-size: 10px;
}
.ud-ap-foot .related a {
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--sh-pink-deep);
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--sh-line-soft);
    text-decoration: none;
}
.ud-ap-foot .related a:hover { background: var(--sh-pink-soft); }

/* Mobile */
@media screen and (max-width: 900px) {
    .ud-page { padding: 0 16px 60px; }
    .ud-hero { grid-template-columns: 1fr; }
    .ud-hero-left { padding: 24px 20px; }
    .ud-hero-left h1 { font-size: 24px; }
    .ud-hero-right { padding: 20px; }
    .ud-stats-strip { grid-template-columns: repeat(3, 1fr); }
    .ud-appearance-header { grid-template-columns: 72px 1fr; }
    .ud-ap-meta { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
    .ud-phases { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ud-ap-foot { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------------------
   コラボ・グッズ一覧 & 詳細ページ
---------------------------------------------------------- */

/* リスト行 */
.collab-row {
    display: grid;
    grid-template-columns: 108px 130px 1fr auto;
    align-items: stretch;
    background: #ffffff;
    border-radius: var(--r-md);
    border: 1px solid var(--sh-line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border-left: 4px solid var(--sh-pink);
    transition: box-shadow 0.2s, transform 0.2s;
}

.collab-row[data-accent="collab"]   { border-left-color: var(--tag-collab); }
.collab-row[data-accent="campaign"] { border-left-color: var(--tag-ranking); }

.collab-row:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.collab-row > * {
    padding: 12px 14px;
    border-right: 1px solid var(--sh-line-soft);
}

.collab-row > *:last-child { border-right: none; }

/* 日付セル */
.collab-date {
    background: var(--sh-pink-hush);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
}

.collab-date .yr {
    font-size: 0.65rem;
    color: var(--sh-text-mute);
}

.collab-date .range {
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: var(--sh-pink-deep);
    line-height: 1.45;
}

/* バッジセル */
.collab-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
}

/* タイトルセル */
.collab-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.collab-info-title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: var(--sh-text);
    line-height: 1.45;
    overflow-wrap: break-word;
    font-weight: 400;
}

.collab-info-sub {
    font-size: 0.8rem;
    color: var(--sh-text-soft);
}

/* アクションセル */
.collab-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.collab-action a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    text-decoration: none;
    transition: background 0.18s;
    white-space: nowrap;
}

.collab-action a:hover { background: var(--sh-pink-mist); }

/* 詳細ページ — リンクリスト */
.collab-link-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.collab-link-list a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--sh-bg-alt);
    border-radius: var(--r-sm);
    border: 1px solid var(--sh-line-soft);
    color: var(--sh-pink-deep);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: break-word;
    transition: background 0.18s, transform 0.15s;
}

.collab-link-list a::before {
    content: "→";
    color: var(--sh-pink);
    flex-shrink: 0;
    margin-top: 1px;
}

.collab-link-list a:hover {
    background: var(--sh-pink-soft);
    transform: translateX(4px);
}

/* ============================================================
   イベント詳細ページ (event-detail-v2)
   ============================================================ */

/* ===== Event hero card ===== */
.event-hero {
    background: #fff;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
    border-left: 6px solid var(--tag-limited);
}
.event-hero[data-accent="limited"]  { border-left-color: var(--tag-limited); }
.event-hero[data-accent="ranking"]  { border-left-color: var(--tag-ranking); }
.event-hero[data-accent="solo"]     { border-left-color: var(--tag-solo); }
.event-hero[data-accent="medley"]   { border-left-color: var(--tag-medley); }
.event-hero[data-accent="revival"]  { border-left-color: var(--tag-revival); }
.event-hero[data-accent="seasonal"] { border-left-color: var(--tag-seasonal); }
.event-hero[data-accent="collab"]   { border-left-color: var(--tag-collab); }

.event-hero .banner {
    position: relative;
    background: fff;
    border-bottom: 1px dashed var(--sh-line);
    min-width: 0;
}
.event-hero .banner .event-banner-img {
    width: 100%;
    height: auto;
    display: block;
}
.event-hero .banner .event-banner-ph {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-sugar-soft);
    color: rgba(180,100,140,0.5);
    font-size: 12px;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.06em;
}
.event-hero .banner .corner-no {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--font-display);
    font-size: 12px;
    color: #fff;
    background: rgba(224,104,152,0.85);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    letter-spacing: 0.08em;
    z-index: 2;
}

.event-hero-meta {
    padding: 28px 32px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.event-hero-meta .tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.event-hero-meta h1 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--sh-text);
    line-height: 1.25;
    margin: 0;
    text-align: left;
    padding: 0;
}
.event-hero-meta .en {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--sh-text-soft);
    letter-spacing: 0.14em;
}
.event-hero-meta .summary {
    font-size: 13px;
    line-height: 1.85;
    color: var(--sh-text);
    margin: 0;
    max-width: 480px;
}

/* Duration capsule */
.duration-card {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--r-md);
    background: var(--sh-bg-alt);
    border: 1px dashed var(--sh-line);
}
.duration-card .pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    min-width: 48px;
}
.duration-card .pin .y {
    font-size: 9px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
}
.duration-card .pin .m {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--sh-pink-deep);
    margin-top: 1px;
}
.duration-card .pin .d {
    font-size: 10px;
    color: var(--sh-text-soft);
    margin-top: 3px;
    font-family: ui-monospace, monospace;
}
.duration-card .arrow {
    color: var(--sh-pink);
    font-size: 14px;
}
.duration-card .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
    border-left: 1px solid var(--sh-line);
}
.duration-card .info .l {
    font-size: 9px;
    color: var(--sh-text-soft);
    letter-spacing: 0.1em;
    font-family: ui-monospace, monospace;
}
.duration-card .info .full {
    font-size: 12px;
    color: var(--sh-text);
}
.duration-card .days {
    background: var(--sh-pink);
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
}

.meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 11px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
}
.pill-state {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    font-family: var(--font-body);
}
.pill-state.ended   { background: #efe9e6; color: var(--sh-text-soft); }

/* ===== Section heading (event detail) ===== */
.sec-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    margin: 40px 0 14px;
}
.sec-head .ic {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    background: var(--grad-sugar);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 18px;
    box-shadow: var(--shadow-sm);
}
.sec-head h2 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--sh-text);
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.sec-head h2::before { content: none; }
.sec-head h2 .sub {
    font-size: 11px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.1em;
    font-weight: 400;
}
.sec-head .anchor {
    font-size: 11px;
    color: var(--sh-text-mute);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-decoration: none;
}

/* Section icon glyphs */
.sec-head .ic.glyph-overview::before { content: "●○●"; font-size: 9px; letter-spacing: 1px; }
.sec-head .ic.glyph-reward::before   { content: "✯"; font-size: 18px; }
.sec-head .ic.glyph-dialogue::before { content: '""'; font-size: 20px; font-family: var(--font-display); }
.sec-head .ic.glyph-movie::before    { content: "▶"; font-size: 14px; }

/* ===== Credit strip ===== */
.credit-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.credit {
    background: #fff;
    border-radius: var(--r-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--sh-pink);
}
.credit .l {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.1em;
    font-family: ui-monospace, monospace;
    margin-bottom: 6px;
}
.credit .v {
    font-size: 14px;
    color: var(--sh-text);
    line-height: 1.5;
    font-weight: 700;
}
.credit .v small {
    font-size: 11px;
    color: var(--sh-text-soft);
    margin-left: 4px;
    font-weight: 400;
    font-family: ui-monospace, monospace;
}

/* ===== Reward card (single) ===== */
.reward-card {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 180px 1fr;
    overflow: hidden;
    border-left: 5px solid var(--sh-yellow);
}
.reward-card[data-rarity="sr-plus"],
.reward-card[data-rarity="sr"] { border-left-color: var(--sh-pink); }
.reward-card .thumb-wrap {
    background: var(--grad-sugar-soft);
    padding: 22px;
    display: grid;
    place-items: center;
    border-right: 1px dashed var(--sh-line);
    min-width: 0;
}
.reward-card .thumb-wrap img {
    width: 100%;
    height: auto;
    display: block;
}
.reward-card .thumb {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--r-md);
    background: var(--grad-sugar-soft);
    border: 1.5px dashed rgba(253,137,185,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(180,100,140,0.6);
    font-size: 11px;
    font-family: ui-monospace, monospace;
    text-align: center;
    box-shadow: 0 6px 18px rgba(253,137,185,0.18);
}
.reward-card .info {
    padding: 22px 26px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
.reward-card .info .rarity-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reward-card .rarity {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--sh-yellow-soft);
    color: #94720f;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.reward-card[data-rarity="sr-plus"] .rarity,
.reward-card[data-rarity="sr"] .rarity {
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
}
.reward-card .info .lbl {
    font-size: 10px;
    color: var(--sh-text-soft);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.1em;
}
.reward-card .nm {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--sh-text);
    line-height: 1.3;
}
.reward-card .by {
    font-size: 12.5px;
    color: var(--sh-text-soft);
    line-height: 1.6;
}
.reward-card .extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.reward-card .extras .extra {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--sh-bg-alt);
    color: var(--sh-text-soft);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--sh-line);
}

/* ===== Seriful (scene selector + dialog list) ===== */
.seriful {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.scene-bar {
    background: linear-gradient(180deg, #fff 0%, var(--sh-bg-alt) 100%);
    border-bottom: 1px solid var(--sh-line);
    padding: 14px 18px;
}
.scene-bar-label {
    font-size: 10px;
    color: var(--sh-text-soft);
    letter-spacing: 0.12em;
    font-family: ui-monospace, monospace;
    margin-bottom: 8px;
}
.scenes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.scene-pill {
    appearance: none;
    border: 1px solid var(--sh-line);
    background: #fff;
    color: var(--sh-text-soft);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s ease;
    line-height: 1;
}
.scene-pill:hover {
    border-color: var(--sh-pink);
    color: var(--sh-pink-deep);
}
.scene-pill input { display: none; }
.scene-pill[data-checked="true"] {
    background: var(--sh-pink);
    color: #fff;
    border-color: var(--sh-pink);
    box-shadow: 0 4px 10px rgba(253,137,185,0.32);
}
.scene-pill .idx {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    background: var(--sh-bg-alt);
    color: var(--sh-text-soft);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    line-height: 1;
}
.scene-pill[data-checked="true"] .idx {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* Dialog list */
.scene-body { padding: 22px 24px; }
.scene-meta {
    padding-bottom: 14px;
    border-bottom: 2px dotted var(--sh-line);
    margin-bottom: 18px;
}
.scene-meta .scene-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--sh-text);
    line-height: 1.2;
}
.scene-meta .scene-title .num {
    color: var(--sh-pink-deep);
    margin-right: 8px;
}
.scene-meta .scene-cap {
    font-size: 12px;
    color: var(--sh-text-soft);
    margin-top: 4px;
    line-height: 1.5;
}

.dialog-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dialog {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 14px;
    background: var(--sh-bg-alt);
    border-radius: var(--r-md);
    border: 1px solid var(--sh-line);
}
.dialog .shot {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--r-sm);
    background: var(--grad-sugar-soft);
    border: 1.5px dashed rgba(253,137,185,0.30);
}
.dialog .body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.dialog .body .line-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dialog .body .speaker {
    font-size: 12px;
    padding: 3px 10px;
    background: var(--sh-pink);
    color: #fff;
    border-radius: var(--r-pill);
    font-weight: 700;
}
/* --- 単独話者 パーソナルカラー --- */
.dialog .body .speaker[data-who="P"]           { background: var(--sh-text); }
.dialog .body .speaker[data-who="心"]          { background: #f04e98; }
.dialog .body .speaker[data-who="きらり"]       { background: #ffd100; color: #222; }
.dialog .body .speaker[data-who="ほたる"]       { background: #c964cf; }
.dialog .body .speaker[data-who="千鶴"]         { background: #99e3fc; color: #222; }
.dialog .body .speaker[data-who="紗枝"]         { background: #c585d8; }
.dialog .body .speaker[data-who="蘭子"]         { background: #6b5cd2; }
.dialog .body .speaker[data-who="アイドル他"]    { background: var(--sh-text-soft); }
.dialog .body .speaker[data-who="ナレーション"]  { background: transparent; color: var(--sh-text-soft); border: 1px dashed var(--sh-line); }
/* --- 2人同時 斜め分割 (100deg: 左上→右下) --- */
.dialog .body .speaker[data-who="ほたる・千鶴"]  { background: linear-gradient(100deg, #c964cf 50%, #99e3fc 50%); color: #222; }
.dialog .body .speaker[data-who="心・千鶴"]      { background: linear-gradient(100deg, #f04e98 50%, #99e3fc 50%); color: #222; }
/* --- 一同 / 3人以上: 3属性カラー斜め分割 --- */
.dialog .body .speaker[data-who="一同"]          { background: linear-gradient(100deg, #ef2782 33.33%, #006aff 33.33% 66.67%, #f49207 66.67%); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
.dialog .body .stamp {
    font-size: 10px;
    color: var(--sh-text-mute);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.06em;
}
.dialog .body .text {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--sh-text);
}
.dialog .body .note {
    font-size: 11px;
    color: var(--sh-text-soft);
    padding-left: 10px;
    border-left: 2px dotted var(--sh-pink-soft);
    font-style: italic;
}
.dialog.no-shot { grid-template-columns: 1fr; }
.dialog .shot.has-img {
    aspect-ratio: unset;
    background: none;
    border: none;
    align-self: start;
}
.dialog .shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}

/* Battle phase grid */
.dialog-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.dialog-grid .dialog {
    grid-template-columns: 1fr;
    padding: 0;
    overflow: hidden;
}
.dialog-grid .dialog .phase-label {
    padding: 8px 12px;
    font-family: var(--font-display);
    font-size: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.04em;
}
.dialog-grid .dialog[data-phase="debut"]  .phase-label { background: linear-gradient(90deg, #b87fd6, #d97fb8); }
.dialog-grid .dialog[data-phase="battle"] .phase-label { background: linear-gradient(90deg, #fd89b9, #e06898); }
.dialog-grid .dialog[data-phase="win"]    .phase-label { background: linear-gradient(90deg, #f59e0b, #fad766); color: #5d4037; }
.dialog-grid .dialog[data-phase="lose"]   .phase-label { background: linear-gradient(90deg, #8a6f64, #b89c93); }
.dialog-grid .dialog[data-phase="draw"]   .phase-label { background: linear-gradient(90deg, #ffb84d, #ff9b6a); }
.dialog-grid .dialog .shot { width: 100%; aspect-ratio: 16/10; border-radius: 0; border-bottom: 1px dashed var(--sh-line); }
.dialog-grid .dialog .body { padding: 12px; gap: 4px; }

/* Empty state */
.scene-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--sh-text-mute);
    font-size: 13px;
    border: 1.5px dashed var(--sh-line);
    border-radius: var(--r-md);
    background: var(--sh-bg-alt);
}
.scene-empty .ic { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }

/* ===== Related footer ===== */
.related-foot {
    margin-top: 28px;
    padding: 20px 22px;
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}
.related-foot .related {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.related-foot .lbl {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
    color: var(--sh-text-soft);
    font-size: 10px;
    margin-right: 4px;
}
.related-foot .related a {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--sh-bg-alt);
    color: var(--sh-pink-deep);
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--sh-line-soft);
    text-decoration: none;
}
.related-foot .related a:hover { background: var(--sh-pink-soft); }
.related-foot .nav-events {
    display: flex;
    gap: 6px;
}
.related-foot .nav-events a {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--sh-pink-deep);
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--sh-line-soft);
    text-decoration: none;
    white-space: nowrap;
}

/* ===== Mobile — event detail ===== */
@media screen and (max-width: 900px) {
    .event-hero-meta h1 { font-size: 22px; }
    .event-hero-meta { padding: 20px 22px 24px; }

    .duration-card {
        grid-template-columns: auto auto auto;
        row-gap: 10px;
    }
    .duration-card .info {
        grid-column: 1 / -1;
        padding-left: 0;
        border-left: 0;
        border-top: 1px dashed var(--sh-line);
        padding-top: 8px;
    }
    .duration-card .days { grid-column: 1 / -1; justify-self: start; }

    .credit-strip { grid-template-columns: repeat(2, 1fr); }
    .reward-card { grid-template-columns: 1fr; }
    .reward-card .thumb-wrap { border-right: none; border-bottom: 1px dashed var(--sh-line); }
    .dialog-grid { grid-template-columns: 1fr; }
    .dialog { grid-template-columns: 1fr; }
    .dialog .shot { aspect-ratio: 16/9; }
    .scene-body { padding: 18px 16px; }
    .related-foot { grid-template-columns: 1fr; }
    .related-foot .nav-events { justify-content: stretch; }
    .related-foot .nav-events a { flex: 1; text-align: center; }
}

/* 詳細ページ — ヒーロー */
.collab-detail-hero {
    background: var(--grad-sugar-soft);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    border: 1px solid var(--sh-line-soft);
}

.collab-detail-hero h1 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--sh-text);
    margin: 12px 0 10px;
    font-weight: 400;
    line-height: 1.4;
}

.collab-detail-hero .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collab-detail-hero .date-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--sh-text-soft);
}

.collab-detail-hero .date-row .icon {
    color: var(--sh-pink);
    flex-shrink: 0;
}

/* レスポンシブ */
@media screen and (max-width: 900px) {
    .collab-row {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
    }

    .collab-date {
        grid-row: 1 / 3;
    }

    .collab-badges {
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 4px;
        border-right: none;
    }

    .collab-info {
        border-right: none;
    }

    .collab-action {
        grid-column: 2;
        justify-content: flex-start;
        padding-top: 2px;
        padding-bottom: 12px;
    }

    .collab-detail-hero { padding: 20px; }
    .collab-detail-hero h1 { font-size: 1.15rem; }
}

/* コラボ詳細 — 画像ギャラリー */
.collab-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.collab-image-gallery a {
    display: block;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--sh-line-soft);
    transition: transform 0.18s, box-shadow 0.18s;
}

.collab-image-gallery a:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.collab-image-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 600px) {
    .collab-image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .collab-image-gallery img { height: 140px; }
}


/* ============================================================
   グローバル検索オーバーレイ
   ============================================================ */

/* ─── 検索ボタン（ヘッダー内） ─── */
.sh-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--r-pill);
    color: var(--sh-text-soft);
    font-size: 1.1rem;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
    margin-right: 6px;
}
.sh-search-btn:hover {
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
}

/* ─── オーバーレイ背景 ─── */
.sh-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(93,64,55,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-direction: column;
    align-items: center;
    padding-top: 72px;
    box-sizing: border-box;
}
.sh-search-overlay.active {
    display: flex;
}

/* ─── 検索ボックス（入力欄 + ドロップダウン） ─── */
.sh-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 680px;
    background: #fff;
    border-radius: var(--r-pill);
    padding: 8px 14px 8px 18px;
    box-shadow: 0 8px 32px rgba(93,64,55,0.18);
    box-sizing: border-box;
    margin: 0 16px;
}
.sh-search-icon {
    font-size: 1rem;
    color: var(--sh-text-mute);
    flex-shrink: 0;
}
.sh-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--sh-text);
    background: transparent;
    min-width: 0;
    font-family: var(--font-body);
}
.sh-search-input::placeholder {
    color: var(--sh-text-mute);
}
.sh-search-idol-select {
    border: 1px solid var(--sh-line);
    border-radius: var(--r-pill);
    background: var(--sh-bg-alt);
    color: var(--sh-text);
    font-size: 0.82rem;
    padding: 4px 10px;
    outline: none;
    cursor: pointer;
    max-width: 110px;
    flex-shrink: 0;
}
.sh-search-close {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--sh-text-mute);
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}
.sh-search-close:hover {
    background: var(--sh-pink-mist);
    color: var(--sh-pink-deep);
}

/* ─── 検索結果パネル ─── */
.sh-search-results {
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    margin: 10px 16px 0;
    box-shadow: 0 8px 32px rgba(93,64,55,0.18);
    box-sizing: border-box;
}
.sh-search-hint {
    padding: 28px 24px;
    color: var(--sh-text-mute);
    font-size: 0.92rem;
    text-align: center;
}
.sh-search-group {
    padding: 12px 20px 4px;
    border-bottom: 1px solid var(--sh-line-soft);
}
.sh-search-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--sh-pink);
    background: var(--sh-pink-soft);
    padding: 3px 10px;
    border-radius: var(--r-pill);
}
.sh-search-item {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--sh-line-soft);
    transition: background 0.15s;
}
.sh-search-item:last-child {
    border-bottom: none;
    border-radius: 0 0 20px 20px;
}
.sh-search-item:hover {
    background: var(--sh-pink-soft);
}
.sh-search-item-title {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sh-text);
    margin-bottom: 2px;
}
.sh-search-item-text {
    display: block;
    font-size: 0.82rem;
    color: var(--sh-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* モバイル対応 */
@media screen and (max-width: 600px) {
    .sh-search-overlay {
        padding-top: 60px;
    }
    .sh-search-box {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 10px 14px;
    }
    .sh-search-idol-select {
        max-width: 100%;
        width: 100%;
    }
    .sh-search-results {
        border-radius: 16px;
        max-height: calc(100vh - 200px);
    }
}


/* ============================================================
   セリフコピーボタン
   ============================================================ */
.sh-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--sh-line);
    background: var(--sh-bg);
    border-radius: 6px;
    cursor: pointer;
    color: var(--sh-text-mute);
    font-size: 0.75rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.18s, background 0.18s, color 0.18s;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1;
}
.sh-copy-btn.copied {
    background: var(--sh-pink-soft);
    color: var(--sh-pink-deep);
    border-color: var(--sh-pink);
}
/* 親にホバーで表示 */
.script-row:hover .sh-copy-btn,
.dialog:hover .sh-copy-btn,
.ud-dialogue:hover .sh-copy-btn,
.sh-copy-btn:focus {
    opacity: 1;
}
/* タッチデバイスでは常時表示 */
@media (hover: none) {
    .sh-copy-btn { opacity: 0.6; }
}

/* ─── 検索タイプフィルターバー ─── */
.sh-search-type-bar {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 680px;
    margin: 8px 16px 0;
    flex-wrap: wrap;
}
.sh-search-type-btn {
    border: 1px solid var(--sh-line);
    background: rgba(255,255,255,0.85);
    color: var(--sh-text-soft);
    font-size: 0.82rem;
    font-family: var(--font-body);
    padding: 5px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.sh-search-type-btn:hover {
    background: var(--sh-pink-soft);
    border-color: var(--sh-pink);
    color: var(--sh-pink-deep);
}
.sh-search-type-btn.active {
    background: var(--sh-pink-deep);
    border-color: var(--sh-pink-deep);
    color: #fff;
}

/* ----------------------------------------------------------
   Shot items (screenshot + caption)
---------------------------------------------------------- */
.shot-item {
    margin: 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px dotted var(--sh-line);
}
.shot-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.shot-line {
    margin: 10px 0 0;
    line-height: 1.8;
    color: var(--sh-text);
}
.shot-noimgbadge {
    display: inline-block;
    font-size: 0.82rem;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--sh-bg-alt);
    border: 1px dashed var(--sh-line);
    color: var(--sh-text-mute);
    margin-bottom: 8px;
}
.choices-block {
    margin: 8px 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.choice-item {
    font-size: 0.88rem;
    color: var(--sh-text-soft);
    padding: 6px 12px;
    background: var(--sh-bg-alt);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--sh-pink-soft);
}
.speech-bubble {
    display: inline-block;
    margin: 8px 0 0;
    padding: 6px 16px;
    background: var(--sh-pink-hush);
    border-radius: var(--r-pill);
    font-size: 0.88rem;
    color: var(--sh-pink-deep);
    border: 1px solid var(--sh-pink-soft);
}

/* ----------------------------------------------------------
   Image switcher (タップ切り替えギャラリー)
---------------------------------------------------------- */
.img-switcher {
    padding: 20px 0;
    text-align: center;
}
.sw-frame {
    max-width: 100%;
    margin: 0 auto;
}
.sw-img {
    display: none;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    margin: 0 auto;
}
.sw-img.active {
    display: block;
}
.sw-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.sw-dot {
    min-width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--sh-pink);
    background: transparent;
    color: var(--sh-pink);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.85rem;
    padding: 0 10px;
    transition: background 0.2s, color 0.2s;
}
.sw-dot.active {
    background: var(--sh-pink);
    color: #fff;
}
.sw-dot:hover:not(.active) {
    background: var(--sh-pink-soft);
}

/* ----------------------------------------------------------
   Popmas gallery (comic / dress-up item)
---------------------------------------------------------- */
.pm-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 32px 0 0;
}
@media (max-width: 600px) {
    .pm-gallery {
        grid-template-columns: 1fr;
    }
}
.pm-gallery-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--sh-bg-card);
    border: 1px solid var(--sh-line);
}
.pm-gallery-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.15s;
}
.pm-gallery-img:hover {
    opacity: 0.88;
}
.pm-gallery-cap {
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--sh-text-mute);
    border-top: 1px solid var(--sh-line);
    background: var(--sh-bg-alt);
    text-align: center;
}

/* ゲームセンター等: 単体スクショの表示 */
.gc-figure { margin: 0; }
.gc-shot {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
    border-radius: var(--r-sm);
    border: 1px solid var(--sh-line);
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
    transition: opacity 0.15s;
}
.gc-shot:hover { opacity: 0.88; }

/* ウワサ等: 横長バナーの縦積み */
.uwasa-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.uwasa-stack .gc-shot { max-width: 760px; }

/* スタンプ */
.stamp-shot {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background: var(--sh-bg-alt);
    border-radius: var(--r-sm);
    border: 1px solid var(--sh-line);
    cursor: zoom-in;
    transition: opacity 0.15s;
}
.stamp-shot:hover { opacity: 0.88; }

/* ローディング: ループ再生する短尺動画 */
.loop-vid {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

/* ----------------------------------------------------------
   Popmas speech bubble (P's line)
---------------------------------------------------------- */
.pm-bubble {
    display: inline-block;
    margin: 8px 0 0;
    padding: 6px 16px;
    background: var(--sh-pink-hush);
    border-radius: var(--r-pill);
    font-size: 0.88rem;
    color: var(--sh-pink-deep);
    border: 1px solid var(--sh-pink-soft);
}

/* ----------------------------------------------------------
   サイト共通フッター
---------------------------------------------------------- */
.sh-site-footer {
    margin-top: 64px;
    padding: 36px 20px 28px;
    background: var(--sh-pink-mist);
    border-top: 1px solid var(--sh-line);
    text-align: center;
}

.sh-site-footer-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.sh-footer-x-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    background: #000;
    color: #fff;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    transition: opacity 0.18s;
}

.sh-footer-x-btn:hover {
    opacity: 0.75;
}

.sh-footer-disclaimer {
    font-size: 0.78rem;
    color: var(--sh-text-mute);
    line-height: 1.9;
}

.sh-footer-disclaimer p {
    margin: 2px 0;
}

.sh-footer-copyright {
    margin-top: 10px !important;
    font-size: 0.74rem;
    color: var(--sh-text-soft);
    letter-spacing: 0.01em;
}

/* ----------------------------------------------------------
   臨時ページ：投票チェックリスト（vc- プレフィックス）
---------------------------------------------------------- */
.vc-video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    margin: 20px auto 0;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    background: #000;
    object-fit: contain;
}

.vc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: vc-step;
}

.vc-steps li {
    counter-increment: vc-step;
    position: relative;
    padding: 14px 0 14px 46px;
    border-bottom: 2px dotted var(--sh-line);
    line-height: 1.7;
    color: var(--sh-text);
}

.vc-steps li:last-child {
    border-bottom: none;
}

.vc-steps li::before {
    content: counter(vc-step);
    position: absolute;
    left: 0;
    top: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--grad-sugar);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vc-steps a {
    color: var(--sh-pink-deep);
    word-break: break-all;
}

.vc-note {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--sh-pink-soft);
    border-radius: var(--r-md);
    font-size: 0.88rem;
    color: var(--sh-text-soft);
}

.vc-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vc-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 4px;
    border-bottom: 2px dotted var(--sh-line);
    transition: opacity 0.2s;
}

.vc-check-item:last-child {
    border-bottom: none;
}

.vc-check-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--sh-pink);
    cursor: pointer;
}

.vc-check-item label {
    flex: 1;
    line-height: 1.7;
    color: var(--sh-text);
    cursor: pointer;
}

.vc-check-item.vc-done {
    opacity: 0.45;
}

.vc-check-item.vc-done label {
    text-decoration: line-through;
    color: var(--sh-text-mute);
}

.vc-check-item .vc-copy {
    opacity: 1;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    font-size: 0.9rem;
    margin-left: 0;
}

@media screen and (max-width: 900px) {
    .vc-steps li { padding-left: 40px; }
    .vc-steps li::before { width: 24px; height: 24px; font-size: 0.78rem; }
}

/* ============================================================
   汎用ユーティリティ（インラインstyle集約）
============================================================ */

/* プレースホルダ文（準備中・読み込み中・画像募集中 など） */
.placeholder-text {
    color: var(--sh-text-mute);
    padding: 20px 0;
    font-size: 14px;
}

/* コンテンツ幅コンテナ（一覧ページの外枠） */
.sh-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px 80px;
}
.sh-container.tight { padding-bottom: 8px; }

/* 小さめタグ（一覧の行内バッジ用） */
.sh-tag.sh-tag-sm { font-size: 0.68rem; }
.sh-tag[data-tag="goods"] { background: var(--sh-pink); color: #fff; }

/* ============================================================
   コラボ・グッズ一覧（CollabList）統計ストリップ
============================================================ */
.stats-strip {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
}
.filter-chip .dot.collab   { background: #d97fb8; }
.filter-chip .dot.goods    { background: #fd89b9; }
.filter-chip .dot.campaign { background: #f59e0b; }

@media screen and (max-width: 900px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   参考・情報提供ページ（References）
============================================================ */
.ref-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ref-item {
    border-bottom: 1px solid var(--sh-border, rgba(255,255,255,0.08));
    padding: 14px 0;
}
.ref-item:last-child {
    border-bottom: none;
}
.ref-item a {
    color: var(--sh-pink-deep, #e75480);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s;
}
.ref-item a:hover {
    opacity: 0.75;
    text-decoration: underline;
}
.ref-item a::before {
    content: "→";
    font-size: 12px;
    color: var(--sh-pink, #f08080);
}
.ref-note {
    font-size: 12px;
    color: var(--sh-text-mute, #888);
    margin-top: 3px;
}
.ref-section {
    margin-bottom: 32px;
}

/* ============================================================
   イベントコミュ タブ（凸凹スピードスター等・shot付コミュ）
============================================================ */
.dss-commu { margin-bottom: 28px; }
.dss-commu .tab-list { flex-wrap: wrap; }
.dss-commu .tab-panel {
    background: #fff;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-md, 10px);
    padding: 16px 22px;
}
.dss-ep-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.dss-title-card {
    width: 200px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--sh-line);
}
.dss-title-card img { width: 100%; max-width: 100%; display: block; cursor: zoom-in; }
.dss-ep-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--sh-text-soft);
}
.dss-ep-title {
    margin: 2px 0 6px;
    font-size: 17px;
    color: var(--sh-pink-deep);
}
.dss-ep-summary {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--sh-text-soft);
    margin: 0 0 10px;
}
.dss-play {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: var(--sh-pink-deep);
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.dss-play:hover { opacity: 0.85; }
.dss-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* shotが未取得の行にも、あとからスクショを差し込む前提でショット枠のプレースホルダーを表示する */
.dss-lines .ev-dialog-row.no-shot::before {
    content: "";
    width: 72px;
    flex-shrink: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-sm);
    background: var(--grad-sugar-soft);
    border: 1.5px dashed rgba(253,137,185,0.30);
}
/* Twitter告知行は画像枠なし（プレースホルダーも非表示） */
.dss-lines .ev-dialog-row.no-shot.no-frame::before { display: none; }
/* モバマス系の縦型フレーム（3:4前後）用のshot枠 */
.dss-lines.mobamas-shots .ev-shot,
.dss-lines.mobamas-shots .ev-dialog-row.no-shot::before {
    aspect-ratio: 3 / 4;
    width: 64px;
}
.dss-stage-text {
    display: inline-block;
    font-size: 12.5px;
    color: var(--sh-text-soft);
    background: var(--sh-bg-alt);
    border: 1px dashed var(--sh-line);
    border-radius: var(--r-sm);
    padding: 6px 12px;
}
/* 分岐（選択肢）に関する注記。OPのプロデューサー選択分岐などで使用 */
.dss-branch-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 10px 0;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--sh-text-soft);
    background: var(--sh-pink-soft, #fff0f5);
    border: 1px dashed var(--sh-pink, #e58aad);
    border-radius: var(--r-md, 10px);
}
.dss-branch-ic {
    flex: none;
    font-size: 14px;
    color: var(--sh-pink, #e58aad);
    line-height: 1.5;
}
.dss-log { margin-top: 16px; }
.dss-log summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--sh-text-soft);
    user-select: none;
}
.dss-log img {
    width: 100%;
    max-width: 540px;
    display: block;
    margin-top: 8px;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-sm);
    cursor: zoom-in;
}
@media (max-width: 640px) {
    .dss-commu .tab-item { flex: 1 1 22%; }
    .dss-ep-head { flex-direction: column; }
    .dss-title-card { width: 100%; }
}

/* dss-commu 補助: 楽曲MV／ログのみ注記 */
.dss-note {
    font-size: 12.5px;
    color: var(--sh-text-soft);
    background: var(--sh-bg-alt);
    border: 1px dashed var(--sh-line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-top: 12px;
}

/* ============================================================
   EVERLASTING & EVERAFTER: イベント区切り
============================================================ */
.ee-block { margin-bottom: 40px; }
.ee-head {
    border-bottom: 2px solid var(--sh-pink);
    margin-bottom: 16px;
    padding-bottom: 6px;
}
.ee-head h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--sh-pink-deep);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ============================================================
   アイドルプロデュース（IdolProduce1st）: 場所タブ内のセクション見出し
============================================================ */
.ip1-group { margin-bottom: 24px; }
.ip1-group-head {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sh-pink-deep);
    border-left: 3px solid var(--sh-pink-deep);
    padding-left: 8px;
    margin: 18px 0 10px;
}
.ip1-sub > .tab-list { margin-top: 4px; }

/* ============================================================
   歌唱曲一覧（General/SongList.html）
============================================================ */
.song-list { display: flex; flex-direction: column; gap: 12px; }

.song-item {
    background: var(--sh-bg-card);
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.song-item[open] { box-shadow: var(--shadow-md); }

.song-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.song-head::-webkit-details-marker { display: none; }

.song-jk { flex-shrink: 0; width: 62px; height: 62px; }
.song-jk-img {
    width: 62px; height: 62px;
    border-radius: var(--r-md);
    object-fit: cover;
    display: block;
    box-shadow: var(--shadow-sm);
}
.song-jk-none {
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    background: var(--sh-pink-mist);
    color: var(--sh-pink);
    font-size: 26px;
}

.song-headmain { flex: 1; min-width: 0; }
.song-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--sh-text);
    line-height: 1.35;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-bottom: 5px;
}
.song-singers { gap: 6px; }
.song-singers .idol { width: 38px; }
.song-singers .idol .ic img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }
.song-singers .idol .nm { display: block; font-size: 8.5px; color: var(--sh-text-soft); margin-top: 2px; text-align: center; }
.song-singers .idol.no-icon .nm {
    display: inline-block;
    font-size: 10px;
    color: var(--sh-pink-deep);
    background: var(--sh-pink-mist);
    border-radius: var(--r-pill);
    padding: 3px 8px;
    margin-top: 8px;
}

/* 属性バッジ */
.song-attr, .dere-attr {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: var(--r-pill);
    padding: 2px 9px;
    line-height: 1.5;
}
.attr-cute { background: #ef2782; }
.attr-cool { background: #006aff; }
.attr-passion { background: #f49207; }
.attr-all { background: linear-gradient(100deg, #ef2782 33.33%, #006aff 33.33% 66.67%, #f49207 66.67%); }

.song-caret {
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-right: 2px solid var(--sh-pink);
    border-bottom: 2px solid var(--sh-pink);
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-right: 4px;
}
.song-item[open] .song-caret { transform: rotate(-135deg); }

/* 本文 */
.song-body {
    padding: 4px 14px 16px;
    border-top: 1px dashed var(--sh-line-soft);
}
.song-note {
    font-size: 12px;
    color: var(--sh-text-soft);
    background: var(--sh-pink-mist);
    border-radius: var(--r-md);
    padding: 8px 11px;
    margin: 12px 0 6px;
    line-height: 1.6;
}
.song-orig-singers { font-size: 12px; color: var(--sh-text-soft); margin: 8px 0 4px; line-height: 1.6; }
.song-orig-singers b { color: var(--sh-pink-deep); }

.song-meta { margin: 10px 0 0; }
.song-mrow { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--sh-line-soft); font-size: 12.5px; }
.song-mrow dt { flex-shrink: 0; width: 78px; color: var(--sh-text-mute); font-weight: 700; }
.song-mrow dd { flex: 1; margin: 0; color: var(--sh-text); line-height: 1.55; }

/* デレステ情報 */
.song-sub {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--sh-pink-deep);
    border-left: 3px solid var(--sh-pink);
    padding-left: 7px;
    margin: 16px 0 8px;
}
.dere-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.dere-fact { font-size: 11.5px; color: var(--sh-text-soft); }
.dere-fact b { color: var(--sh-text-mute); font-weight: 700; margin-right: 4px; }
.dere-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.dere-lv {
    display: flex; flex-direction: column; align-items: center;
    min-width: 52px;
    background: var(--sh-bg-alt);
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-md);
    padding: 5px 8px;
}
.dere-lv .lv-name { font-size: 8.5px; color: var(--sh-text-mute); letter-spacing: 0.02em; }
.dere-lv .lv-num { font-size: 16px; font-weight: 700; color: var(--sh-pink-deep); line-height: 1.2; }

/* イベントボタン */
.song-rel { margin: 14px 0 4px; }
.song-rel .rel-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px;
    background: var(--sh-bg-alt);
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-pill);
    color: var(--sh-pink-deep);
    text-decoration: none;
    font-size: 12px; font-weight: 700;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.song-rel .rel-btn::before { content: "◆"; color: var(--sh-pink); font-size: 0.5rem; }
.song-rel .rel-btn:hover { background: var(--sh-pink-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* LIVE披露 */
.song-lives { margin-top: 14px; border: 1px solid var(--sh-line-soft); border-radius: var(--r-md); overflow: hidden; }
.song-lives > summary {
    cursor: pointer; list-style: none;
    padding: 9px 12px;
    background: var(--sh-bg-alt);
    font-size: 12.5px; font-weight: 700; color: var(--sh-pink-deep);
}
.song-lives > summary::-webkit-details-marker { display: none; }
.song-lives > summary::after { content: "＋"; float: right; color: var(--sh-pink); }
.song-lives[open] > summary::after { content: "－"; }
.live-table { padding: 4px 0; }
.live-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 2px 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--sh-line-soft);
    font-size: 11.5px;
}
.live-row:last-child { border-bottom: none; }
.live-date { color: var(--sh-text-mute); font-weight: 700; grid-row: span 2; }
.live-date .lv-tag {
    display: inline-block; margin-left: 4px;
    font-size: 8.5px; font-weight: 700; color: #fff; background: var(--sh-pink);
    border-radius: var(--r-pill); padding: 1px 5px; vertical-align: middle;
}
.live-ev { color: var(--sh-text); line-height: 1.5; }
.live-venue { display: block; font-size: 10.5px; color: var(--sh-text-mute); margin-top: 1px; }
.live-perf { grid-column: 2; color: var(--sh-text-soft); line-height: 1.55; }

.song-source { font-size: 10.5px; color: var(--sh-text-mute); margin-top: 14px; line-height: 1.6; }

@media (max-width: 640px) {
    .song-jk, .song-jk-img { width: 52px; height: 52px; }
    .song-title { font-size: 14px; }
    .song-singers .idol { width: 34px; }
    .song-singers .idol .ic img { width: 30px; height: 30px; }
    .live-row { grid-template-columns: 74px 1fr; }
    .song-mrow dt { width: 66px; }
    .song-cd-area { flex-direction: column; }
    .song-jk2 { width: 100%; max-width: 160px; margin: 0 auto; }
    .filter-row { flex-direction: column; }
    .filter-input, .filter-select { width: 100%; max-width: 100%; }
    .solo-remix-item { flex-direction: column; }
    .solo-remix-jk { width: 100%; max-width: 140px; margin: 0 auto; }
}

/* 検索・絞り込みフィルター */
.song-filter {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--sh-pink-mist);
    border-radius: var(--r-lg);
    border: 1px solid var(--sh-line-soft);
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.filter-input {
    flex: 2;
    min-width: 160px;
    padding: 8px 12px;
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-pill);
    font-size: 13px;
    background: #fff;
    color: var(--sh-text);
    outline: none;
    transition: border-color 0.18s;
}
.filter-input:focus { border-color: var(--sh-pink); }
.filter-select {
    flex: 1;
    min-width: 140px;
    padding: 8px 10px;
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-pill);
    font-size: 13px;
    background: #fff;
    color: var(--sh-text);
    outline: none;
    cursor: pointer;
    transition: border-color 0.18s;
}
.filter-select:focus { border-color: var(--sh-pink); }
.filter-result {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--sh-text-mute);
    text-align: right;
}
.filter-result #sf-msg {
    font-weight: 700;
    color: var(--sh-pink-deep);
}

/* 2枚目ジャケット（CDジャケット）+ メタ情報エリア */
.song-cd-area {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 10px;
}
.song-cd-area .song-meta { flex: 1; margin: 0; }
.song-jk2 {
    flex-shrink: 0;
    width: 28%;
    max-width: 120px;
    min-width: 70px;
}
.song-jk2-img {
    width: 100%;
    display: block;
    border-radius: var(--r-md);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* ソロ・リミックス収録CDセクション */
.song-solo-remix { margin-top: 4px; }
.solo-remix-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--sh-bg-alt);
    border: 1px solid var(--sh-line-soft);
    border-radius: var(--r-md);
}
.solo-remix-jk {
    flex-shrink: 0;
    width: 22%;
    max-width: 90px;
    min-width: 60px;
}
.solo-remix-jk-img {
    width: 100%;
    display: block;
    border-radius: var(--r-md);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}
.solo-remix-info { flex: 1; margin: 0; }

/* ============================================================
   参加ライブ一覧（LiveList）
============================================================ */
.sh-tag[data-tag="cast"] { background: var(--sh-pink); }
.sh-tag[data-tag="xr"]   { background: #7b6fff; }

.ll-dot-cast { background: var(--sh-pink); }
.ll-dot-xr   { background: #7b6fff; }

.ll-filters { margin: 12px 0 8px; }

.ll-concert-card,
.ll-song-card {
    border: 1px solid var(--sh-line);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    background: var(--sh-bg-card);
    overflow: hidden;
}
.ll-concert-card[open] { border-color: var(--sh-pink-soft); }
.ll-song-card[open]    { border-color: #c4bfff; }

.ll-concert-head,
.ll-song-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    list-style: none;
    flex-wrap: wrap;
    user-select: none;
}
.ll-concert-head::-webkit-details-marker,
.ll-song-head::-webkit-details-marker { display: none; }
.ll-concert-head::after,
.ll-song-head::after {
    content: '▶';
    font-size: 0.68rem;
    color: var(--sh-text-mute);
    margin-left: auto;
    transition: transform 0.18s;
    flex-shrink: 0;
}
.ll-concert-card[open] .ll-concert-head::after,
.ll-song-card[open] .ll-song-head::after { transform: rotate(90deg); }

.ll-date { display: flex; flex-direction: column; align-items: center; min-width: 46px; flex-shrink: 0; }
.ll-y    { font-size: 0.7rem; color: var(--sh-text-mute); line-height: 1; }
.ll-md   { font-size: 0.9rem; font-weight: 700; color: var(--sh-text); }
.ll-date-sm { font-size: 0.8rem; color: var(--sh-text-mute); min-width: 80px; flex-shrink: 0; }

.ll-event-name { flex: 1; font-size: 0.88rem; color: var(--sh-text); line-height: 1.5; }
.ll-song-title { flex: 1; font-size: 0.92rem; font-weight: 600; color: var(--sh-text); }
.ll-song-count { font-size: 0.8rem; color: var(--sh-text-mute); flex-shrink: 0; }

.ll-setlist,
.ll-perf-list {
    border-top: 1px solid var(--sh-line);
    background: var(--sh-bg-alt);
    padding: 4px 0;
}
.ll-track {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 5px 16px;
    border-bottom: 1px dotted var(--sh-line);
    flex-wrap: wrap;
}
.ll-track:last-child { border-bottom: none; }
.ll-track-num   { font-size: 0.73rem; color: var(--sh-text-mute); min-width: 36px; flex-shrink: 0; }
.ll-track-title { font-size: 0.88rem; font-weight: 600; color: var(--sh-text); min-width: 150px; }
.ll-track-with  { font-size: 0.8rem; color: var(--sh-text-soft); flex: 1; }

.ll-perf-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 16px;
    border-bottom: 1px dotted var(--sh-line);
    flex-wrap: wrap;
}
.ll-perf-row:last-child { border-bottom: none; }
.ll-perf-num   { font-size: 0.73rem; color: var(--sh-text-mute); flex-shrink: 0; }
.ll-perf-event { font-size: 0.86rem; color: var(--sh-text); flex: 1; min-width: 180px; }
.ll-perf-with  { font-size: 0.8rem; color: var(--sh-text-soft); flex-basis: 100%; padding-left: 100px; }

@media (max-width: 600px) {
    .ll-track, .ll-perf-row { padding: 5px 10px; }
    .ll-perf-with { padding-left: 0; }
    .ll-track-title { min-width: 90px; }
    .ll-perf-event { min-width: 0; }
}

/* ============================================================
   衣装一覧（CostumeList）
============================================================ */
.costume-ol {
    margin: 20px 0 0;
    padding-left: 1.8em;
    line-height: 1.9;
    columns: 2;
    column-gap: 40px;
}
.costume-ol li {
    break-inside: avoid;
    padding: 2px 0;
    font-size: 0.92rem;
    color: var(--sh-text);
}
@media (max-width: 600px) {
    .costume-ol { columns: 1; }
}

/* ============================================================
   ルームアイテム（Other_Room）
============================================================ */
.room-card {
    display: flex;
    gap: 16px;
    padding: 0;
    border: 1px solid var(--sh-line);
    border-radius: var(--r-sm);
    background: var(--sh-bg-card);
    margin-bottom: 10px;
    overflow: hidden;
}
.room-card-img {
    width: 260px;
    flex-shrink: 0;
    object-fit: cover;
    cursor: pointer;
    display: block;
    background: #111;
}
.room-card-body {
    flex: 1;
    min-width: 0;
    padding: 14px 16px 14px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.room-card-name {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--sh-text);
    margin: 0 0 6px;
    line-height: 1.4;
}
.room-card-desc {
    font-size: 0.86rem;
    color: var(--sh-text-soft);
    line-height: 1.75;
    margin: 0 0 10px;
}
.room-card-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-size: 0.82rem;
}
.room-card-stats dt {
    color: var(--sh-text-mute);
    white-space: nowrap;
}
.room-card-stats dd {
    color: var(--sh-text);
    margin: 0;
}
.room-card-stats .unsellable {
    color: #e04040;
    font-weight: 600;
}
@media (max-width: 640px) {
    .room-card { flex-direction: column; }
    .room-card-img { width: 100%; max-height: 200px; }
    .room-card-body { padding: 12px; }
}