/* ==============================
   ページ位置統一・最終上書き
============================== */

/*
   このファイルは base.html で最後に読み込む。
   ページごとの CSS にある max-width / margin:auto / 横 padding によって、
   カード類の開始位置がページごとにズレるのを防ぐための最終調整用CSS。
*/

/* メイン領域の基準位置を明確に固定する */
.main-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

/* ページ直下の主要ラッパーは、中央寄せや幅制限を解除して同じ左端から始める */
.main-content > .home-layout,
.main-content > .character-list-page,
.main-content > .character-form-page,
.main-content > .area-manage-page,
.main-content > .room-edit-page,
.main-content > .pl-message-page,
.main-content > .rulebook-page,
.main-content > .login-page,
.main-content > .report-page {
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* キャラリストだけはページラッパー自体に横paddingがあるため、カードの開始位置を揃える */
.main-content > .character-list-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* スマホ幅では既存の余白調整を優先しつつ、横ズレだけ防ぐ */
@media (max-width: 700px) {
    .main-content > .character-list-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==============================
   共通カードデザイン調整
============================== */

/* ==============================
   共通カードデザイン調整：石板風・やわらか縁
============================== */

.home-profile-card,
.home-section,
.character-list-header-card,
.character-list-card,
.character-list-empty-card,
.character-profile-card,
.character-recent-posts-card,
.character-settings-header-card,
.character-settings-card,
.character-settings-submit-card,
.pl-message-header-card,
.pl-message-compose-card,
.pl-message-log-card,
.rulebook-hero,
.rulebook-section-card,
.rulebook-card-link,
.report-card,
.report-manage-card,
.gm-status-card,
.area-manage-header-card,
.area-manage-card,
.room-edit-preview-card,
.card,
.notice-box {
    border: 1px solid rgba(130, 130, 130, 0.35);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);

    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(120, 120, 120, 0.10);
}

/*
   カード内の区切り線を背景に合わせる。
*/
.home-profile-card__divider,
.character-list-card__divider,
.character-profile-card__divider,
.gm-status-card__divider {
    border-color: rgba(70, 65, 58, 0.75);
    background: rgba(70, 65, 58, 0.75);
}

/*
   セクション見出しの線を少し柔らかくする。
*/
.main-content h2 {
    border-bottom-color: rgba(130, 120, 105, 0.45);
}

/*
   入力欄も真っ白ベタではなく少しだけ背景になじませる。
*/
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    border-color: rgba(110, 105, 96, 0.65);
    background: rgba(255, 255, 255, 0.86);
}

/*
   ボタン類を共通の薄い石板・紙片風に寄せる。
*/
button,
.button-link,
.chat-tag-button,
.chat-post__action-button,
.character-profile-card__edit-link,
.character-settings-return-link,
.character-search-form__reset,
.report-link-button,
.area-manage-button,
.gm-dashboard-link-button {
    border-color: rgba(100, 94, 84, 0.75);
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.9),
            rgba(230, 226, 214, 0.9)
        );
    color: #222;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

button:hover,
.button-link:hover,
.chat-tag-button:hover,
.chat-post__action-button:hover,
.character-profile-card__edit-link:hover,
.character-settings-return-link:hover,
.character-search-form__reset:hover,
.report-link-button:hover,
.area-manage-button:hover,
.gm-dashboard-link-button:hover {
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.98),
            rgba(214, 209, 196, 0.98)
        );
}

/* ==============================
   エリア画像・ルーム画像の表示比率統一
============================== */

/*
   エリア画像・ルーム画像は横幅基準で表示する。
   横幅は必ず全体を表示し、画像が縦に長い場合は上下を見切る。
*/
.home-location-card,
.area-preview-panel,
.room-edit-preview-card {
    width: 100%;
    aspect-ratio: 9 / 2;
    min-height: 0;
    overflow: hidden;

    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;