/* ==========================================================
   個人活動セラピストページ 追補
   /public_html/assets/solo-v2.css
   1rem = 10px
   solo.css の後に読む(solo.css は触らない)

   ここで足すもの:
     ・2カラム(左 = ナビ・プロフィールほか / 右 = 出勤・予約)
     ・右カラム1枚カード(.sv2-*) … お店所属セラピストページ(v2)と同じ作り
     ・ナビを左カラムの一番上に置いたときの余白
     ・SPの折りたたみ(出勤4日 + 凡例)
   ブレークポイント: 〜900px タブレット / 〜600px SP
   ========================================================== */

/* ==========================================================
   2カラム
   ========================================================== */
.shop-page--solo .solo-layout {
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;
}

.shop-page--solo .solo-layout > .solo-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* ナビ(左カラムの一番上) */
.shop-page--solo .solo-navwrap {
    margin-bottom: 2rem;
}

.shop-page--solo .solo-navwrap .shop-tab-nav--solo {
    margin-top: 0;
}

/* ==========================================================
   右カラム(1枚のカード)
   上から: 出勤時間 / 予約 / 気になる！ / 電話・LINE / 今週の出勤
   ========================================================== */
/* 追従(sticky)はしない。本文と一緒に流れる */
.sv2-side {
    flex: 0 0 30rem;
    align-self: flex-start;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.14));
    border-radius: var(--solo-radius, 0.8rem);
    background: var(--ap-panel-v2, #16161b);
    color: var(--solo-text);
}

/* ── 出勤時間 / ボタン ── */
.sv2-side__top {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--solo-panel-line);
    gap: 1.2rem;
    padding: 2rem 1.6rem 1.8rem;
}

.sv2-side__status {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
}

.sv2-side__status-main {
    margin: 0;
    color: var(--solo-text);
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* 即案内(ブースト中) */
.sv2-side__status--instant .sv2-side__status-main {
    color: #5ee08c;
}

/* 次回の出勤未定 */
.sv2-side__status--off .sv2-side__status-main {
    color: var(--solo-dim);
}

.sv2-side__status-sub {
    margin: 0;
    color: var(--solo-dim);
    font-size: 1.2rem;
}

/* ── ボタン(予約 / 気になる！ / 電話 / LINE) ── */
/* 枠と背景はここでは決めない。ネット予約は mp-btn-reserve(共通のピンク)を
   そのまま使いたいので、下の --like / --tel / --line にだけ持たせる */
.sv2-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 5rem;
    padding: 1.2rem 1.4rem;
    border: none;
    border-radius: var(--shop-radius, 0.8rem);
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.sv2-btn--like,
.sv2-btn--tel,
.sv2-btn--line {
    border: 1px solid var(--solo-gold-dim);
    background: var(--solo-card);
    color: var(--solo-gold-soft);
}

.sv2-btn--like:hover,
.sv2-btn--tel:hover,
.sv2-btn--line:hover {
    border-color: var(--solo-gold);
    background: rgba(201, 168, 108, 0.08);
}

/* ── 電話 / LINE / SMS: 横1列(お店ページの右サイドと同じ) ── */
.sv2-side__contact {
    display: flex;
    gap: 0.8rem;
}

.sv2-btn--sub {
    flex: 1 1 0;
    width: auto;
    min-height: 4.4rem;
    padding: 1.1rem 0.6rem;
    border: 1px solid var(--solo-gold-dim);
    background: var(--solo-card);
    color: var(--solo-gold-soft);
    font-size: 1.2rem;
}

.sv2-btn--sub:hover {
    border-color: var(--solo-gold);
    background: rgba(201, 168, 108, 0.08);
}

/* アイコンの色はお店ページと同じ(電話=金 / LINE=緑 / SMS=青) */
.sv2-btn--line i {
    color: #00c300;
}

.sv2-btn--sms i {
    color: #5a8dd6;
}

/* SMS は900px以下だけ */
.sv2-btn--sms {
    display: none;
}

/* ── 出勤通知(ベル) ── */
.sv2-side__sub-wrap {
    padding: 0 1.6rem 1.4rem;
}

.sv2-side__sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 4.4rem;
    padding: 0 1.2rem;
    border: 1px dashed var(--solo-gold-dim);
    border-radius: 10rem;
    background: transparent;
    color: var(--solo-gold-soft);
    font-family: inherit;
    font-size: 1.2rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.sv2-side__sub i {
    color: var(--solo-gold);
    font-size: 1.4rem;
}

.sv2-side__sub:hover {
    border-color: var(--solo-gold);
    background: rgba(201, 168, 108, 0.08);
}

.sv2-side__sub:focus-visible {
    outline: 2px solid var(--solo-gold);
    outline-offset: 2px;
}

/* 通知オン */
.sv2-side__sub.is-on {
    border-style: solid;
    border-color: var(--solo-gold);
    background: rgba(201, 168, 108, 0.12);
    color: var(--solo-gold);
}

.sv2-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sv2-btn i {
    flex-shrink: 0;
    font-size: 1.5rem;
}

.sv2-btn:focus-visible {
    outline: 2px solid var(--solo-gold);
    outline-offset: 2px;
}

/* ===== メッセージで問い合わせ（2026-09） ===== */
.sv2-btn--chat {
    width: 100%;
    justify-content: center;
    margin-top: 0.8rem;
    text-decoration: none;
}


/* ネット予約。色は共通の mp-btn-reserve(ピンク)にまかせる。
   ここで background を指定しないこと(上書きすると他ページと色が変わる) */
.sv2-btn--reserve {
    color: #fff;
    font-size: 1.5rem;
}

.sv2-btn--reserve:hover {
    opacity: 0.9;
}

/* 気になる！(押下エフェクトは thera-fx.js / shop-sub.css) */
.sv2-btn--like {
    position: relative;
    overflow: visible;
}

.sv2-btn--like i {
    color: var(--solo-gold);
    transition: color 0.2s, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.sv2-btn--like.is-active {
    border-color: var(--solo-gold);
    background: linear-gradient(135deg, #c9a86c 0%, #e2c98a 50%, #c9a86c 100%);
    color: #1a1611;
}

.sv2-btn--like.is-active i {
    color: #1a1611;
}

.sv2-btn--like.is-pop {
    animation: thera-btn-pop 0.4s cubic-bezier(0.2, 1.4, 0.35, 1);
}

.sv2-btn--like.is-pop i {
    transform: scale(1.45) rotate(-8deg);
}

.sv2-btn__count {
    font-variant-numeric: tabular-nums;
}

.sv2-btn__count[hidden] {
    display: none;
}

/* 電話 / LINE */
.sv2-btn--tel i,
.sv2-btn--line i {
    color: var(--solo-gold);
}

@media (prefers-reduced-motion: reduce) {
    .sv2-btn--like.is-pop,
    .sv2-btn--like.is-pop i {
        animation: none;
        transform: none;
    }
}

/* ── 今週の出勤 ── */
.sv2-side__sec {
    border-top: 1px solid var(--solo-line);
}

.sv2-side__head {
    margin: 0;
    padding: 1.2rem 1.6rem 0.8rem;
    color: var(--solo-text);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.sv2-week {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv2-week__day {
    border-top: 1px solid var(--solo-line);
}

.sv2-week__day.is-today {
    background: rgba(201, 168, 108, 0.08);
}

.sv2-week__row {
    display: grid;
    grid-template-columns: 7.4rem 2.6rem minmax(0, 1fr) 1.4rem;
    align-items: center;
    min-height: 4.4rem;
    padding: 0 1rem 0 1.6rem;
    color: inherit;
    text-decoration: none;
}

a.sv2-week__row {
    transition: background 0.2s;
}

a.sv2-week__row:hover {
    background: rgba(229, 120, 154, 0.1);
}

a.sv2-week__row:focus-visible {
    outline: 2px solid var(--solo-gold);
    outline-offset: -2px;
}

.sv2-week__date {
    color: var(--solo-text);
    font-size: 1.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sv2-week__date small {
    margin-left: 0.2rem;
    color: var(--solo-dim);
    font-size: 1.1rem;
    font-weight: 400;
}

.sv2-week__date.is-sun,
.sv2-week__date.is-sun small {
    color: #e26a6a;
}

.sv2-week__date.is-sat,
.sv2-week__date.is-sat small {
    color: #6a9ce2;
}

.sv2-week__sym {
    color: var(--solo-mute);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.sv2-week__sym--open {
    color: var(--accent-geen, #2ecc71);
}

.sv2-week__sym--few {
    color: var(--accent-ore, #fa8700);
}

.sv2-week__sym--full {
    color: #e26a6a;
}

.sv2-week__sym--off {
    color: var(--solo-mute);
}

.sv2-week__time {
    min-width: 0;
    overflow: hidden;
    color: var(--solo-dim);
    font-size: 1.3rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sv2-week__time--on {
    color: var(--solo-text);
    font-weight: 600;
}

/* 出勤はあるが空きが無い日(満席・今日の出勤終了後など) */
.sv2-week__time--dim {
    color: var(--solo-mute);
}

.sv2-week__time--note {
    color: #ff8a93;
    font-weight: 600;
}

.sv2-week__time--off {
    color: var(--solo-mute);
}

.sv2-week__go {
    color: var(--solo-gold);
    font-size: 1.1rem;
    text-align: right;
}

/* 記号の見かた */
.sv2-week__guide {
    padding: 1rem 1.6rem 1.2rem;
    border-top: 1px solid var(--solo-line);
}

.sv2-week__legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0;
    padding: 0;
    color: var(--solo-dim);
    font-size: 1.1rem;
    list-style: none;
}

.sv2-week__legend b {
    margin-right: 0.3rem;
    font-size: 1.2rem;
    font-weight: 700;
}


/* 折りたたみの開閉ボタン(SPだけ出す) */
.sv2-side__fold-foot {
    display: none;
}

.sv2-fold__btn {
    display: none;
}

/* ==========================================================
   タブレット・SP(〜900px): 1カラム
   並び = ヒーロー → ナビ → プロフィール → 出勤・予約 → もっと詳しく以下
   ナビとプロフィールは左カラム(.solo-main)の中にあるので、1カラムのときだけ
   .solo-main の箱をなくし(display: contents)、中のセクションを
   .solo-layout の直接の子にして order で並べ替える
   ========================================================== */
@media (max-width: 900px) {
    /* 縦並びでは align-items が横方向の揃えになる。
       flex-start のままだと子が中身の幅まで縮むので stretch に戻す。
       セクション同士の間隔は各セクションの margin で取るので gap は 0 */
    .shop-page--solo .solo-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* 左カラムの箱をなくして、中身を .solo-layout に並べる */
    .shop-page--solo .solo-layout > .solo-main {
        display: contents;
    }

    /* 1番目: ナビ */
    .shop-page--solo .solo-navwrap {
        order: -3;
    }

    /* 2番目: プロフィール。下の余白は右カラムとの間隔 */
    .shop-page--solo .solo-layout .solo-prof {
        order: -2;
        margin-bottom: 2rem;
    }

    .sv2-btn--sms {
        display: flex;
    }

    /* 3番目: 出勤・予約(右カラム)。下の余白はナビと同じ */
    .sv2-side {
        order: -1;
        flex: none;
        width: 100%;
        position: static;
        margin-bottom: 2rem;
    }
}

/* ==========================================================
   SP(〜600px)
   出勤は4日分まで。5日目以降と凡例は「残りの出勤を見る」で開く
   ========================================================== */
@media (max-width: 600px) {
    .shop-page--solo .solo-navwrap {
        margin-bottom: 1.6rem;
    }

    .sv2-side {
        border-radius: 0.8rem;
    }

    .sv2-side__top {
        padding: 1.6rem 1.4rem;
    }

    .sv2-side__status-main {
        font-size: 1.5rem;
    }

    .sv2-btn {
        min-height: 4.6rem;
        padding: 1.1rem 1rem;
        font-size: 1.3rem;
    }

    .sv2-side__head {
        padding: 1.2rem 1.4rem 0.8rem;
    }

    .sv2-week__row {
        grid-template-columns: 7rem 2.6rem minmax(0, 1fr) 1.4rem;
        min-height: 4rem;
        padding: 0 0.8rem 0 1.2rem;
    }

    .sv2-week__date {
        font-size: 1.2rem;
    }
    .sv2-side__sub-wrap {
        padding: 0 1.4rem 1.2rem;
    }
    .sv2-week__time {
        font-size: 1.2rem;
    }

    .sv2-week__guide {
        padding: 1rem 1.4rem;
    }

    /* 折りたたみ */
    .sv2-fold__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
        min-height: 4.4rem;
        padding: 0 1rem;
        border: 1px solid var(--solo-gold-dim);
        border-radius: 10rem;
        background: transparent;
        color: var(--solo-gold-soft);
        font-family: inherit;
        font-size: 1.2rem;
        cursor: pointer;
    }

    .sv2-fold__btn[hidden] {
        display: none;
    }

    .sv2-fold__icon {
        transition: transform 0.2s;
    }

    .sv2-fold__btn[aria-expanded="true"] .sv2-fold__icon {
        transform: rotate(180deg);
    }

    .sv2-side__fold-foot {
        display: block;
        padding: 1.2rem 1.4rem 1.4rem;
        border-top: 1px solid var(--solo-line);
    }

    .sv2-side.is-foldable:not(.is-open) .sv2-week__day.is-extra,
    .sv2-side.is-foldable:not(.is-open) .sv2-side__fold-part {
        display: none;
    }
}

/* ==========================================================
   SP(〜600px): ☆をサムネの右へ
   solo.css は SPで「☆をヘッダー画像の右上に重ねる(.solo-fav--banner)」に
   切り替えている。お店所属セラピストページ(v2)と同じ
   [サムネ] ………… [☆] の1段目にそろえるため、ここで戻す
   ========================================================== */
@media (max-width: 600px) {
    /* ヘッダー画像の中の☆は使わない */
    .shop-page--solo .solo-fav.solo-fav--banner {
        display: none;
    }

    /* 右列の☆を出す。サムネの高さの真ん中にそろえる */
    .shop-page--solo .solo-fav.solo-fav--side {
        display: inline-flex;
        width: 4.4rem;
        height: 4.4rem;
    }

    .shop-page--solo .solo-hero__side {
        align-self: center;
        justify-content: flex-end;
        padding-top: 0;
    }

    /* 1段目 = [サムネ] ………… [☆] / 2段目から 名前・サイズ・スキル */
    .shop-page--solo .solo-hero__head {
        grid-template-columns: 8.4rem minmax(0, 1fr) auto;
        grid-template-areas:
            "avatar . side"
            "info info info";
    }

    .shop-page--solo .solo-fav--side i {
        font-size: 1.8rem;
    }
}



/* 2026-10-26 sold-out day in "this week": red pill instead of ×.
   fits the 2.6rem symbol column */
.sv2-week__sym--sold {
    justify-self: center;
    width: max-content;
    padding: 3px 5px;
    border-radius: 3px;
    background: #e26a6a;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}

.sv2-week__legend .sv2-week__sym--sold {
    display: inline-block;
    margin-right: 0;
    font-size: 1rem;
}