/*
 * ページ共通の PC レイアウト土台（トップ / 決済完了 で共有）。
 *
 * モバイルは 414px 帯の1カラム、1024px 以上は帯を zoom で拡大し、
 * 余白に .pc-left-content / .pc-side-content を絶対配置で張り出す。
 * 絶対配置のため DOM 順はモバイルの縦積み順に合わせてよい。
 *
 * ページ固有の中身（表示/非表示・パネル内の装飾）は各ページの CSS に置く。
 */

.wrapper {
    max-width: 414px;
    width: 100%;
    margin: 0 auto;
}

/* レール見出し。中央帯の ＼見出し／ とは別様式で、狭い縦長に合う左寄せ + 縦アクセント */
.rail-heading {
    font-weight: bold;
    font-size: 18px;
    color: var(--color-text);
    margin: 0 0 12px;
    padding: 8px 0 8px 12px;
    border-left: 5px solid var(--color-primary);
    background-color: var(--color-bg-muted);
    border-radius: 0 4px 4px 0;
}

/* 視覚的には隠すが読み上げには残す（アイコンのみのリンクに名前を与える用途） */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pc-layout-container {
    display: block;
}

@media (min-width: 1024px) {
    .wrapper {
        zoom: 1.2;
    }

    /* 側面パネルの絶対配置の基準 */
    .pc-layout-container {
        position: relative;
    }

    /* 中央帯より視覚的に控えめにする（0.78 * 1.2 = 実効 0.93） */
    .pc-side-content,
    .pc-left-content {
        position: absolute;
        top: 0;
        box-sizing: border-box;
        font-size: 0.9rem;
        zoom: 0.78;
        opacity: 0.98;
    }

    .pc-side-content {
        bottom: 0;
        left: calc(100% + 8px);
        width: 380px;
        display: flex;
        flex-direction: column;
    }

    .pc-left-content {
        right: calc(100% + 8px);
        width: 320px;
        max-height: calc(100% + 80px);
        overflow-y: auto;
        padding-left: 8px;
    }

    .pc-left-content::-webkit-scrollbar {
        width: 8px;
    }

    .pc-left-content::-webkit-scrollbar-track {
        background: var(--color-bg-subtle);
        border-radius: 4px;
    }

    .pc-left-content::-webkit-scrollbar-thumb {
        background: var(--color-border-strong);
        border-radius: 4px;
    }

    .pc-left-content::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-muted);
    }
}

/* 画面が広いほど中央帯と側面パネルの間隔を空ける */
@media (min-width: 1280px) {
    .pc-side-content {
        left: calc(100% + 32px);
    }

    .pc-left-content {
        right: calc(100% + 32px);
    }
}

@media (min-width: 1500px) {
    .pc-side-content {
        left: calc(100% + 100px);
    }

    .pc-left-content {
        right: calc(100% + 100px);
    }
}