/*
 * ホーム画面（ダッシュボードレイアウト）のページ固有スタイル。
 * 共通コンポーネントのスタイルは parkx-ui.css を参照。
 * common.css は html/body/article/section を「全画面固定・スクロールなし」の
 * 旧デザイン（ゲーム風トップ画面）前提で定義しているため、
 * このページでは html.parkx-dashboard / body.parkx-dashboard クラス経由でのみ上書きする
 * （他ページの見た目には影響しない）。
 */

html.parkx-dashboard {
    overflow-y: auto;
    overflow-x: hidden;
}

body.parkx-dashboard {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    background: var(--parkx-color-surface-subtle);
    font-family: 'Noto Sans JP', sans-serif;
}

body.parkx-dashboard article {
    display: block;
    height: auto;
    width: auto;
    overflow: visible;
}

/* ふりがな（rt）が漢字本文より長い場合、ruby要素の実効幅がrt側に引っ張られて
   本文の文字間が間延びして見えるため、rtを少し小さく詰めて緩和する */
body.parkx-dashboard ruby {
    ruby-align: center;
}

body.parkx-dashboard rt {
    font-size: 0.55em;
    letter-spacing: -0.05em;
}

.parkx-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.parkx-shell {
    display: flex;
    align-items: flex-start;
    gap: var(--parkx-space-24);
    max-width: 1104px;
    width: 100%;
    margin: 0 auto;
    padding: var(--parkx-space-24) var(--parkx-space-16);
    flex: 1 0 auto;
}

.parkx-sidebar-slot {
    display: contents;
}

.parkx-sidebar {
    position: sticky;
    top: var(--parkx-space-24);
}

.parkx-main {
    /* Figma実データ（S20_home_TOP_PC）ではこの外枠フレームに border/背景は無く、
       枠線があるのは直下の TopStatsBar（.parkx-topbar）の border-bottom のみ。
       また main / TopStatsBar / content 内の各カードはすべて横幅704pxで揃っているため、
       flex:1 0 0 で可変にせず固定幅にして子要素と揃える。 */
    flex: 0 0 704px;
    width: 704px;
    display: flex;
    flex-direction: column;
}

.parkx-topbar {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    height: 64px;
    padding: var(--parkx-space-16);
    border-bottom: 1px solid var(--parkx-color-border);
    color: var(--parkx-color-text);
}

.parkx-topbar__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

.parkx-topbar__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.parkx-topbar__title {
    font-size: var(--parkx-text-lg);
    font-weight: 900;
    margin: 0;
}

.parkx-content {
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-24);
    max-width: 704px;
    padding: var(--parkx-space-32) 0;
}

.parkx-page-title {
    display: none;
    flex-direction: column;
    gap: 4px;
}

.parkx-page-title h1 {
    font-size: 22px;
    font-weight: 900;
    color: var(--parkx-color-text);
    margin: 0;
}

.parkx-page-title p {
    font-size: var(--parkx-text-xs);
    color: var(--parkx-color-text-light);
    margin: 0;
}

/* 低学年向け: カードや文字をひとまわり大きく、装飾的に。
   .parkx-mission-item の高さは通常108px固定だが、低学年向けはそれより一回り大きくしたいため
   height を解除して min-height + 縦パディングで自然に伸ばす。 */
.parkx-content--lower-grade .parkx-mission-item {
    height: auto;
    min-height: 92px;
    padding: var(--parkx-space-16) var(--parkx-space-12);
}

/* .parkx-comment-card は右側にキャラクターアバターが絶対配置で重なるため、
   右パディングだけは avatar の幅（96px）分を確保したまま他の辺を広げる */
.parkx-content--lower-grade .parkx-comment-card {
    padding: var(--parkx-space-16) 120px var(--parkx-space-16) var(--parkx-space-12);
}

.parkx-content--lower-grade .parkx-comment-card__quote {
    font-size: var(--parkx-text-xs);
}

/* .parkx-rank-card__thumb / .parkx-gamerank-card__thumb はどちらも実画像が
   全面に入るようになったため、背景色の上書きはもう不要。 */

@media screen and (max-width: 1024px) {
    /* Figma実データではSPでもTopStatsBar（.parkx-topbar）がPCと同じ見た目のまま
       表示されるため、サイドバーのみ非表示にする。 */
    .parkx-sidebar-slot.pc {
        display: none !important;
    }

    .parkx-shell {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .parkx-main {
        /* PCでは704px固定だが、SPは画面幅いっぱいに広げる */
        flex: 1 1 auto;
        width: 100%;
    }

    .parkx-content {
        padding: var(--parkx-space-16);
        padding-bottom: var(--parkx-space-32);
    }
}