/* =========================================================
   Horoscope Slider CSS  (multi-card PC support)
   ========================================================= */

.hs-wrapper {
    --hs-bg:      #1a1a2e;
    --hs-surface: #16213e;
    --hs-text:    #e8e8f0;
    --hs-muted:   #8b92a8;
    --hs-border:  rgba(255,255,255,.08);
    --hs-color:   #9b59b6;
    --hs-cols:    1;

    background: var(--hs-bg);
    color: var(--hs-text);
    font-family: 'Helvetica Neue','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ライトモード */
.hs-wrapper:not(.hs-dark) {
    --hs-bg:      #f7f3ff;
    --hs-surface: #ede9fe;
    --hs-text:    #1e1b4b;
    --hs-muted:   #6b7280;
    --hs-border:  rgba(0,0,0,.08);
}

/* ── ヘッダー ── */
.hs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--hs-border);
    flex-wrap: wrap;
    gap: 4px;
}
.hs-title      { font-size: 13px; font-weight: 700; }
.hs-week-label { font-size: 11px; color: var(--hs-muted); }

/* ── スライダーエリア ── */
.hs-slider-area {
    display: flex;
    align-items: stretch;
}

/* ── トラック：カードを横並びにしてtranslateXでスライド ── */
.hs-track-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.hs-track {
    display: flex;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── カード ── */
.hs-card {
    flex: 0 0 calc(100% / var(--hs-cols));
    min-width: calc(100% / var(--hs-cols));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}

/* 複数表示時はカード間に区切り線 */
.hs-wrapper[style*="--hs-cols: 2"] .hs-card + .hs-card,
.hs-wrapper[style*="--hs-cols: 3"] .hs-card + .hs-card,
.hs-wrapper[style*="--hs-cols: 4"] .hs-card + .hs-card {
    border-left: 1px solid var(--hs-border);
}

/* 星座ヘッド行 */
.hs-sign-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hs-emoji      { font-size: 26px; flex-shrink: 0; }
.hs-sign-info  { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hs-sign-name  { font-size: 14px; font-weight: 700; color: var(--hs-color); white-space: nowrap; }
.hs-period     { font-size: 10px; color: var(--hs-muted); }
.hs-overall-stars { font-size: 11px; flex-shrink: 0; }

/* 運勢テキスト */
.hs-fortune {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--hs-text);
    border-left: 3px solid var(--hs-color);
    padding-left: 9px;
    flex: 1;
}

/* フッター */
.hs-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}
.hs-lucky-row { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-lucky-tag {
    font-size: 10px;
    background: var(--hs-surface);
    color: var(--hs-muted);
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.hs-sub-ranks { display: flex; gap: 8px; }
.hs-sub-rank  { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hs-sub-label { font-size: 9px; color: var(--hs-muted); }
.hs-sub-stars { font-size: 10px; }

/* ── 矢印 ── */
.hs-arrow {
    width: 30px;
    min-width: 30px;
    border: none;
    background: var(--hs-surface);
    color: var(--hs-muted);
    font-size: 22px;
    cursor: pointer;
    transition: color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    align-self: stretch;
}
.hs-arrow:hover { background: var(--hs-border); color: var(--hs-text); }

/* ── ドット ── */
.hs-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 6px 0 8px;
    border-top: 1px solid var(--hs-border);
    flex-wrap: wrap;
}
.hs-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    border: none;
    background: var(--hs-border);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}
.hs-dot--active {
    background: var(--hs-color);
    transform: scale(1.4);
}

/* ── モバイルは常に1枚表示 ── */
@media (max-width: 600px) {
    .hs-wrapper { --hs-cols: 1 !important; }
    .hs-footer-row { flex-direction: column; align-items: flex-start; }
    .hs-card { padding: 10px 12px; }
}