/*
 * みらいいパーク X ダッシュボードUI 共通コンポーネント
 * Figma「Design Tokens / Components」ページのカラー・スペーシング・角丸トークンを
 * common.css で定義した --parkx-* 変数経由で利用する。
 * top.html（ホーム／属性入力）から読み込まれる。将来的に他ページを移行する際もそのまま再利用できるよう
 * ページ固有のレイアウト（.parkx-shell や .parkx-content の余白など）は top.css 側に置いている。
 */

/* ---------------------------------------------------------------- */
/* ボタン */
/* ---------------------------------------------------------------- */
.parkx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-8);
    border-radius: 4px;
    border: 1px solid transparent;
    padding: var(--parkx-space-12) var(--parkx-space-20);
    font-size: var(--parkx-text-md);
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, opacity 0.15s ease;
    height: 43px;
}

.parkx-btn:hover {
    transform: translateY(-1px);
}

.parkx-btn:disabled,
.parkx-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.parkx-btn--primary {
    background: var(--parkx-color-surface-subtle);
    border-color: var(--parkx-color-border-strong);
    color: var(--parkx-color-text);
}

.parkx-btn--secondary {
    background: var(--parkx-color-surface);
    border-color: var(--parkx-color-border);
    color: var(--parkx-color-text);
    font-size: var(--parkx-text-sm);
}

.parkx-btn--forward,
.parkx-btn--backward {
    background: var(--parkx-color-info);
    border-color: var(--parkx-color-info);
    color: #fff;
    width: 132px;
    height: 43px;
}

.parkx-btn--forward {
    padding: var(--parkx-space-4) var(--parkx-space-12) var(--parkx-space-4) var(--parkx-space-20);
}

.parkx-btn--backward {
    padding: var(--parkx-space-4) var(--parkx-space-20) var(--parkx-space-4) var(--parkx-space-12);
}

/* ボタンの label 部分。ruby と地の文字が混在する場合、直接 .parkx-btn（inline-flex + gap）の
   子要素にすると、ブラウザがテキストノードと ruby をそれぞれ別のフレックスアイテムとして扱い、
   gap 分の余計な隙間が文字間に入ってしまう。ラベル全体を1つの要素にまとめて防ぐ。 */
.parkx-btn__label {
    display: inline-block;
}

.parkx-btn__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.parkx-btn__icon--flip {
    transform: scaleX(-1);
}

/* 「診断スタート！」「ゲームプレイ」用。Figma実データでは sponsor(オレンジ)ではなく sponsor_yell(ピンク) */
.parkx-btn--start {
    background: var(--parkx-color-sponsor-yell);
    border-color: var(--parkx-color-sponsor-yell);
    color: #fff;
    padding: var(--parkx-space-4) var(--parkx-space-20);
}

/* ゲームランキングの「ゲームプレイ」ボタン用。Figma実データでは sponsor_yell(ピンク) ではなく
   sponsor(アンバー / var(--color/game,#fa0)) が使われている */
.parkx-btn--game {
    background: var(--parkx-color-sponsor);
    border-color: var(--parkx-color-sponsor);
    color: #fff;
    padding: var(--parkx-space-4) var(--parkx-space-20);
}

.parkx-btn--danger {
    background: var(--parkx-color-danger);
    border-color: var(--parkx-color-danger);
    color: #fff;
}

/* ---------------------------------------------------------------- */
/* サイドバー（PC） / ドロワー（SP） 共通 */
/* ---------------------------------------------------------------- */
.parkx-sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--parkx-space-16);
    width: 256px;
    flex-shrink: 0;
    padding: var(--parkx-space-24);
    background: var(--parkx-color-surface);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-md);
}

.parkx-sidebar__logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.parkx-nav {
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-4);
}

.parkx-nav__item {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-12);
    height: 48px;
    padding: var(--parkx-space-12) var(--parkx-space-16);
    border-radius: var(--parkx-radius-sm);
    color: var(--parkx-color-text);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--parkx-text-sm);
}

.parkx-nav__item:hover {
    background: var(--parkx-color-surface-subtle);
}

.parkx-nav__item.is-active {
    background: var(--parkx-color-primary);
}

.parkx-nav__item.is-disabled {
    color: var(--parkx-color-text-muted);
    cursor: default;
    position: relative;
}

.parkx-nav__item.is-disabled:hover {
    background: none;
}

.parkx-nav__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

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

/* ---------------------------------------------------------------- */
/* ユーザープロフィールカード */
/* ---------------------------------------------------------------- */
.parkx-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
    width: 100%;
    padding: var(--parkx-space-32) var(--parkx-space-16) var(--parkx-space-24);
    background: var(--parkx-color-surface-subtle);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-md);
}

.parkx-profile-card__avatar-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-12);
}

.parkx-profile-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.parkx-profile-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parkx-profile-card__name {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    max-width: 176px;
}

.parkx-profile-card__name span {
    font-weight: 700;
    font-size: var(--parkx-text-md);
    color: var(--parkx-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* TODO: なまえ編集機能を想定したボタン。現状はバックエンド未対応のため見た目のみで無効化している */
.parkx-profile-card__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

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

.parkx-profile-card__edit:disabled {
    cursor: default;
    opacity: 0.7;
}

.parkx-profile-card__medals {
    display: flex;
    gap: var(--parkx-space-8);
}

.parkx-medal {
    /* 元画像が縦長（約30:40）のため、正方形に潰さず高さ基準で幅は自動にする */
    width: auto;
    height: 32px;
    object-fit: contain;
}

.parkx-profile-card__gauge {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-4);
}

.parkx-profile-card__gauge-text {
    display: flex;
    justify-content: space-between;
    font-size: var(--parkx-text-xs);
}

.parkx-profile-card__gauge-text span:first-child {
    color: var(--parkx-color-text-muted);
    font-weight: 600;
}

.parkx-profile-card__gauge-text span:last-child {
    color: var(--parkx-color-text);
    font-weight: 700;
}

.parkx-progress {
    width: 100%;
    height: 6px;
    background: var(--parkx-color-progress-bg);
    border-radius: var(--parkx-radius-full);
    overflow: hidden;
}

.parkx-progress__bar {
    height: 100%;
    background: var(--parkx-color-sponsor);
    border-radius: var(--parkx-radius-full);
    transition: width 0.3s ease;
}

/* ---------------------------------------------------------------- */
/* SPヘッダー & ドロワー */
/* ---------------------------------------------------------------- */
/* Figma実データ（AppHeader）には背景色・下線は無い（ページの背景がそのまま透けて見える）。
   見出し行の border-bottom は直下の TopStatsBar（.parkx-topbar）側が持っている。 */
.parkx-app-header {
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: var(--parkx-space-12) var(--parkx-space-4);
}

.parkx-app-header__logo {
    height: 32px;
    width: auto;
}

.parkx-app-header__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: var(--parkx-color-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.parkx-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(46, 42, 38, 0.4);
    z-index: 200;
}

.parkx-drawer-overlay.is-open {
    display: block;
}

.parkx-drawer {
    position: relative;
    width: 280px;
    max-width: 84vw;
    height: 100%;
    background: var(--parkx-color-surface);
    padding: var(--parkx-space-24) var(--parkx-space-16);
    overflow-y: auto;
    box-shadow: 4px 0 16px rgba(46, 42, 38, 0.12);
}

.parkx-drawer .parkx-sidebar {
    width: 100%;
    border: none;
    padding: 0;
}

.parkx-drawer__close {
    position: absolute;
    top: var(--parkx-space-16);
    right: var(--parkx-space-16);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--parkx-color-surface-subtle);
    border: none;
    border-radius: 999px;
    color: var(--parkx-color-text);
    cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* ボトムナビ（SP） */
/* ---------------------------------------------------------------- */
.parkx-bottom-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-4);
    height: 72px;
    padding: var(--parkx-space-8);
    background: var(--parkx-color-surface);
    border-top: 1px solid var(--parkx-color-border);
    position: sticky;
    bottom: 0;
}

.parkx-bottom-nav__item {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-4);
    height: 56px;
    padding: var(--parkx-space-8);
    border-radius: var(--parkx-radius-sm);
    color: var(--parkx-color-text);
    text-decoration: none;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
}

.parkx-bottom-nav__item svg,
.parkx-bottom-nav__item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.parkx-bottom-nav__item.is-active {
    background: var(--parkx-color-primary);
}

.parkx-bottom-nav__item.is-disabled {
    color: var(--parkx-color-text-muted);
}

/* ---------------------------------------------------------------- */
/* ヒーローカード・アイコンカード・リストバナー */
/* ---------------------------------------------------------------- */
.parkx-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    color: #fff;
    background: var(--parkx-color-primary);
    border-radius: var(--parkx-radius-full);
    padding: var(--parkx-space-4) var(--parkx-space-12);
}

.parkx-hero-card {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-24);
    padding: var(--parkx-space-32);
    background: var(--parkx-color-surface);
    border: 2px solid var(--parkx-color-border-strong);
    border-radius: var(--parkx-radius-lg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.parkx-hero-card__text {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--parkx-space-12);
}

.parkx-hero-card__text h2 {
    font-size: var(--parkx-text-xl);
    font-weight: 700;
    color: var(--parkx-color-text);
    margin: 0;
}

.parkx-hero-card__text p {
    font-size: var(--parkx-text-sm);
    color: var(--parkx-color-text-light);
    margin: 0;
}

.parkx-hero-card__text .parkx-btn {
    margin-top: var(--parkx-space-8);
}

.parkx-hero-card__character {
    width: 120px;
    height: auto;
    flex-shrink: 0;
}

.parkx-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--parkx-space-16);
}

.parkx-icon-card {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    height: 130px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-20);
    background: var(--parkx-color-surface);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-md);
    text-decoration: none;
    color: var(--parkx-color-text);
}

.parkx-icon-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--parkx-color-surface-subtle);
    font-size: 22px;
}

.parkx-icon-card__title {
    font-weight: 700;
    font-size: var(--parkx-text-md);
}

.parkx-icon-card__caption {
    font-size: var(--parkx-text-xs);
    color: var(--parkx-color-text-light);
}

.parkx-list-banner {
    display: flex;
    align-items: center;
    height: 60px;
    gap: var(--parkx-space-12);
    padding: var(--parkx-space-12) var(--parkx-space-16);
    background: var(--parkx-color-surface);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-md);
}

.parkx-list-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--parkx-color-surface-subtle);
    font-size: 18px;
    flex-shrink: 0;
}

.parkx-list-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.parkx-list-banner__title {
    font-weight: 700;
    font-size: var(--parkx-text-sm);
    color: var(--parkx-color-text);
}

.parkx-list-banner__caption {
    font-size: var(--parkx-text-xs);
    color: var(--parkx-color-text-light);
}

/* ---------------------------------------------------------------- */
/* セクション見出し・企業コメント */
/* ---------------------------------------------------------------- */
.parkx-section {
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-16);
}

.parkx-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ルビ付き／ルビなしのタイトル文字列が混在しても、アイコンと文字の縦位置が
   ズレないように flex + align-items:center で中央揃えする（inline要素の
   vertical-align:middle だと、ルビの有無で行ボックスの高さ・ベースライン位置が
   変わってしまい、アイコンの見た目の位置がズレていた）。 */
.parkx-section__title {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    font-size: var(--parkx-text-lg);
    font-weight: 700;
    color: var(--parkx-color-text);
    margin: 0;
}

/* ruby と地の文字が混在するため、flex の直接の子にはしない
   （.parkx-comment-card__company-text などと同じ理由） */
.parkx-section__title-text {
    display: inline-block;
}

.parkx-section__link {
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: var(--parkx-color-info);
    text-decoration: none;
}

.parkx-section__link.is-disabled {
    color: var(--parkx-color-text-muted);
    cursor: default;
}

/* 企業からのコメント／ミッション／診断タイプランキングで共通の
   「背景・枠線付きカード」セクション意匠（Figma実データ準拠） */
.parkx-card-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-16);
    background: var(--parkx-color-surface);
    border: 2px solid var(--parkx-color-primary);
    border-radius: var(--parkx-radius-md);
}

.parkx-section__title-icon {
    display: block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* 「すべて見る」リンク（企業からのコメント／診断タイプランキングで共通） */
.parkx-section__see-all {
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-8);
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: var(--parkx-color-text);
}

.parkx-section__see-all.is-disabled {
    /* Figma実データでは文字も矢印も通常の文字色（#2e2a26）で表示されているため、
       「未実装機能」であることを示す色の減衰はここでは行わない。 */
    color: var(--parkx-color-text);
    cursor: default;
}

.parkx-section__see-all-icon {
    width: 8px;
    height: 16px;
    object-fit: contain;
}

.parkx-comment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--parkx-space-16);
    width: 100%;
}

.parkx-comment-card {
    position: relative;
    display: flex;
    flex: 1 1 260px;
    min-width: 170px;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--parkx-space-16);
    /* Figma実データでは右側にキャラクターの立ち絵が枠外にはみ出す形で配置される。
       マスク処理までは再現せず、絶対配置＋clip-pathで簡易的に再現する。
       上方向だけはキャラクターが枠外にはみ出して見えるようにしたいため、
       overflow:hidden ではなく clip-path で「上は無制限・右下左は枠ぴったり」にクリップする。 */
    padding: var(--parkx-space-16) 96px var(--parkx-space-16) var(--parkx-space-12);
    background: var(--parkx-color-surface-subtle);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    clip-path: inset(-200px 0 0 0);
}

.parkx-comment-card__avatar {
    position: absolute;
    top: -40px;
    right: -66px;
    width: 232px;
    height: auto;
    object-fit: contain;
}

.parkx-comment-card__quote {
    font-size: var(--parkx-text-xs);
    font-weight: 500;
    color: var(--parkx-color-text);
    line-height: 1.75;
    margin: 0;
}

.parkx-comment-card__company {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    color: var(--parkx-color-text);
    margin: 0;
}

.parkx-comment-card__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ruby と地の文字が混在するため、inline-flex の直接の子にはしない
   （.parkx-mission-item__reward などと同じ理由で、ruby が別アイテム扱いになり
   gap 分の隙間が入ってしまうのを防ぐ） */
.parkx-comment-card__company-text {
    display: inline-block;
}

/* ---------------------------------------------------------------- */
/* ミッションリスト */
/* ---------------------------------------------------------------- */

.parkx-mission-list {
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.parkx-mission-item {
    /* Figma実データでは高さ92pxで揃っているが、当サイトは本物の<ruby>タグを使っており
       （Figma側はレイアウトに影響しない絶対配置のふりがな疑似ルビのため92pxに収まっている）、
       ルビ付きタイトルは実際の行送り分だけ高さが必要になる。全項目で高さを統一するため
       固定 height + box-sizing:border-box にして、内容は中央揃えにする。 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--parkx-space-16);
    height: 108px;
    padding: 0 var(--parkx-space-12);
    background: var(--parkx-color-surface-subtle);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
}

.parkx-mission-item.is-done {
    background: #f2fbeb;
    border: 2px solid var(--parkx-color-success);
}

.parkx-mission-item.is-locked {
    background: #ebebeb;
    border: 1px solid #dedede;
}

.parkx-mission-item__main {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-16);
    min-width: 0;
}

.parkx-mission-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--parkx-radius-sm);
}

.parkx-mission-item__icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* Figma実データでは達成状態に関わらず、ミッションごとに固有のアイコン背景色を持つ */
.parkx-mission-item__icon--diagnosis {
    background: #ffd07a;
}

.parkx-mission-item__icon--game {
    background: #b0a89c;
}

.parkx-mission-item__icon--bronze {
    background: #c5db48;
}

.parkx-mission-item__icon--silver {
    background: #a6d5ff;
}

.parkx-mission-item__icon--gold {
    background: #ffa866;
}

.parkx-mission-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-8);
    flex: 1 0 0;
    min-width: 0;
}

.parkx-mission-item__title {
    font-weight: 900;
    font-size: var(--parkx-text-lg);
    letter-spacing: 0.6px;
    color: var(--parkx-color-text);
    margin: 0;
}

.parkx-mission-item__achievement {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-16);
    flex-wrap: wrap;
}

/* 報酬ラベルは常に緑のピル表示（達成状態に関わらず固定のFigmaコンポーネント）。
   Figma実データの letter-spacing:9.6px は、レイアウトに影響しない絶対配置の疑似ルビを
   手動で中央に置き直すための値であり、本物の<ruby>ではこの数値のまま使うと
   文字送り後の余白の分だけルビの中心がずれて見えるため、ここでは詰めて使用する。 */
.parkx-mission-item__reward-label {
    display: inline-flex;
    align-items: center;
    background: var(--parkx-color-success);
    color: #fff;
    font-weight: 900;
    font-size: var(--parkx-text-xs);
    letter-spacing: 2px;
    border-radius: var(--parkx-radius-xs);
    padding: 2px var(--parkx-space-12);
    white-space: nowrap;
}

.parkx-mission-item__reward-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.parkx-mission-item__reward-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ruby と地の文字が混在するため、inline-flex の直接の子にはしない
   （.parkx-comment-card__company-text などと同じ理由） */
.parkx-mission-item__reward-text {
    display: inline-block;
    font-weight: 900;
    font-size: var(--parkx-text-sm);
    letter-spacing: 0.42px;
    color: var(--parkx-color-text);
}

.parkx-mission-item__action {
    flex-shrink: 0;
}

.parkx-mission-item__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.parkx-mission-item__check img {
    /* アイコン自体（正解チェックの丸)は 53.3px 角で、64px の箱の中央に収まる */
    width: 53px;
    height: 53px;
    object-fit: contain;
}

.parkx-btn--primary.is-locked {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* 診断タイプランキング / ゲームランキング */
/* ---------------------------------------------------------------- */
.parkx-rank-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--parkx-space-12);
    /* 各カードの左上に大きくはみ出す順位バッジ（top:-28px）がセクション見出しと
       重ならないよう、見出しとの間に余白を確保する（Figma実データ同様の見た目にする）。 */
    margin-top: var(--parkx-space-20);
}

.parkx-rank-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
    padding: var(--parkx-space-24) var(--parkx-space-12) var(--parkx-space-12);
    background: var(--parkx-color-surface-subtle);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    text-align: center;
}

.parkx-rank-card__badge {
    position: absolute;
    top: -4px;
    left: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    /* 4位以降はFigma実データ準拠でトーンダウンした色（--parkx-color-progress-bg）を既定にする */
    background: var(--parkx-color-progress-bg);
    color: #3f2203;
    font-size: var(--parkx-text-md);
    font-weight: 900;
}

.parkx-rank-card__badge--gold {
    background: #f3ba42;
}

.parkx-rank-card__badge--silver {
    background: #afa89d;
}

.parkx-rank-card__badge--bronze {
    background: #dc7b30;
}

.parkx-rank-card__thumb {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 120px;
}

.parkx-rank-card__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.parkx-rank-card__type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    color: #fff;
    border-radius: var(--parkx-radius-full);
    padding: 2px 12px 2px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.parkx-rank-card__type--witch {
    background: #9673ab;
}

.parkx-rank-card__type--warrior {
    background: #6ea7c7;
}

.parkx-rank-card__type--mechanic {
    background: #8f8477;
}

.parkx-rank-card__type-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ruby と地の文字が混在するため、inline-flex の直接の子にはしない
   （.parkx-comment-card__company-text などと同じ理由） */
.parkx-rank-card__type-text {
    display: inline-block;
}

.parkx-rank-card__caption {
    font-size: var(--parkx-text-sm);
    font-weight: 900;
    color: var(--parkx-color-text);
}

/* PC（縦積みカード）では type / caption をまとめて中央揃えするための単なるラッパー。
   SPでは横並びレイアウトの中央カラムとして使う（下記メディアクエリで上書き）。 */
.parkx-rank-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
}

.parkx-gamerank-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--parkx-space-16);
    /* CLEARラベルがカード上端から大きくはみ出すため、見出しと重ならないよう余白を確保する
       （.parkx-rank-grid と同じ理由） */
    margin-top: var(--parkx-space-20);
}

.parkx-gamerank-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

.parkx-gamerank-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--parkx-space-16);
    width: 100%;
    padding-bottom: var(--parkx-space-12);
    background: var(--parkx-color-surface);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    overflow: hidden;
}

/* Figma実データ準拠のスタンプ風ラベル。回転済みの画像アセット（badge-clear.svg）を
   カード中央上部からはみ出す形で配置する。回転は画像自体に含まれているため
   ここでは transform で位置調整のみ行う。 */
.parkx-gamerank-card__clear {
    position: absolute;
    top: -8px;
    left: -12px;
    width: 91px;
    height: auto;
    z-index: 1;
}

/* PCではthumb/bodyを.parkx-gamerank-cardの直接の子と全く同じように振る舞わせたいので
   display:contentsにしておく（SPではこれを横並びのflexコンテナに切り替える）。 */
.parkx-gamerank-card__top {
    display: contents;
}

.parkx-gamerank-card__thumb {
    width: 100%;
    aspect-ratio: 192 / 144;
}

.parkx-gamerank-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parkx-gamerank-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--parkx-space-16);
    width: 100%;
    padding: 0 var(--parkx-space-12);
}

.parkx-gamerank-card__title {
    font-weight: 900;
    font-size: var(--parkx-text-xs);
    letter-spacing: 1.2px;
    color: var(--parkx-color-text);
    margin: 0;
}

.parkx-gamerank-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.parkx-gamerank-card__type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    border-radius: var(--parkx-radius-full);
    padding: 2px 12px 2px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.parkx-gamerank-card__type--witch {
    background: #9673ab;
}

.parkx-gamerank-card__type--warrior {
    background: #6ea7c7;
}

.parkx-gamerank-card__type--mechanic {
    background: #8f8477;
}

.parkx-gamerank-card__type-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ruby と地の文字が混在するため、inline-flex の直接の子にはしない
   （.parkx-comment-card__company-text などと同じ理由） */
.parkx-gamerank-card__type-text {
    display: inline-block;
}

.parkx-gamerank-card__user {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    color: var(--parkx-color-text);
}

.parkx-gamerank-card__user-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.parkx-gamerank-card__flames {
    display: flex;
    align-items: center;
    gap: 2px;
}

.parkx-gamerank-card__flames img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.parkx-gamerank-card__play {
    width: 100%;
    height: 43px;
}

.parkx-gamerank-card__play-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 低学年向け「みらいいパーク」誘導バナー／高学年向けキャンペーン訴求バナー、
   どちらもFigma実データ（ParkBnr のデフォルト/バリアント2）をそのまま画像としてエクスポートし、
   1枚の画像として表示している（装飾やレイアウトを個別に組む必要がないため）。 */
.parkx-banner-ad {
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--parkx-radius-md);
    overflow: hidden;
}

.parkx-banner-ad img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------------------------------------------------------------- */
/* リセット導線 */
/* ---------------------------------------------------------------- */
.parkx-reset-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-8);
    align-self: center;
    background: none;
    border: none;
    color: var(--parkx-color-text-muted);
    font-size: var(--parkx-text-xs);
    font-weight: 400;
    cursor: pointer;
    padding: var(--parkx-space-12);
}

/* ---------------------------------------------------------------- */
/* モーダル（リセット確認） */
/* ---------------------------------------------------------------- */
.parkx-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(46, 42, 38, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: var(--parkx-space-16);
}

.parkx-modal-overlay[hidden] {
    display: none;
}

.parkx-modal-card {
    width: 100%;
    max-width: 440px;
    background: var(--parkx-color-surface);
    border-radius: var(--parkx-radius-md);
    padding: var(--parkx-space-32) var(--parkx-space-24) var(--parkx-space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-12);
    text-align: center;
}

.parkx-modal-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--parkx-color-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--parkx-color-text-light);
}

.parkx-modal-card__title {
    font-size: var(--parkx-text-md);
    font-weight: 900;
    color: var(--parkx-color-text);
    margin: 0;
}

.parkx-modal-card__desc {
    font-size: var(--parkx-text-xs);
    color: var(--parkx-color-text-light);
    margin: 0;
}

.parkx-modal-card__current {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--parkx-color-surface-subtle);
    border-radius: var(--parkx-radius-sm);
    padding: var(--parkx-space-12);
    font-size: var(--parkx-text-xs);
}

.parkx-modal-card__current span:first-child {
    color: var(--parkx-color-text-muted);
}

.parkx-modal-card__current span:last-child {
    font-weight: 700;
    color: var(--parkx-color-text);
}

.parkx-modal-card__note {
    font-size: 11px;
    color: var(--parkx-color-warning);
    margin: 0;
}

.parkx-modal-card .parkx-onboarding__actions {
    width: 100%;
    margin-top: var(--parkx-space-8);
}

/* ---------------------------------------------------------------- */
/* 属性入力オンボーディング */
/* ---------------------------------------------------------------- */
.parkx-onboarding {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: var(--parkx-color-surface-subtle);
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--parkx-space-32) var(--parkx-space-16);
}

.parkx-onboarding__step {
    display: none;
    width: 100%;
}

.parkx-onboarding__step.is-active {
    display: flex;
    justify-content: center;
}

.parkx-onboarding__inner {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-24);
}

.parkx-onboarding__logo {
    max-width: 320px;
    width: 100%;
    height: auto;
}

.parkx-onboarding__next {
    align-self: center;
}

.parkx-onboarding__actions {
    display: flex;
    gap: var(--parkx-space-12);
    justify-content: center;
    width: 100%;
}

/* ステップインジケーター */
.parkx-step-indicator {
    display: flex;
    align-items: flex-start;
    gap: var(--parkx-space-24);
    position: relative;
}

.parkx-step-indicator::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--parkx-color-border-strong);
    z-index: 0;
}

.parkx-step-indicator__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
}

.parkx-step-indicator__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--parkx-color-text-muted);
    color: #fff;
    font-weight: 900;
    font-size: var(--parkx-text-md);
}

.parkx-step-indicator__label {
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: var(--parkx-color-text-muted);
}

/* 「いまココ！」の吹き出し。現在地（is-current）のときだけ丸の上に表示する */
.parkx-step-indicator__tooltip {
    display: none;
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    padding: 3px 4px 3px 8px;
    background: #fff;
    border: 1px solid var(--parkx-color-sponsor-yell);
    border-radius: 24px;
    color: var(--parkx-color-text);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.parkx-step-indicator__item.is-current .parkx-step-indicator__tooltip {
    display: flex;
}

.parkx-step-indicator__item.is-current .parkx-step-indicator__num {
    background: var(--parkx-color-sponsor-yell);
}

.parkx-step-indicator__item.is-current .parkx-step-indicator__label {
    color: var(--parkx-color-sponsor-yell);
}

.parkx-step-indicator__item.is-cleared .parkx-step-indicator__num {
    background: var(--parkx-color-success);
}

.parkx-step-indicator__item.is-cleared .parkx-step-indicator__label {
    color: var(--parkx-color-success);
}

/* スピーチカード
   Figma上ではPCは（ウェルカム画面・ステップ1〜4のいずれも）常にデフォルト（大きい）SpeechCardを使い、
   親フレームに対して左右対称の余白を持つ固定幅相当のボックスとして中央寄せされる。
   SPのときだけ幅いっぱいに広がる小さいバリアントになる（下記モバイル用メディアクエリで上書き）。 */
.parkx-speech-card {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-12);
    margin: var(--parkx-space-16) 0;
}

.parkx-speech-card__avatar {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    margin-bottom: 16px;
}

.parkx-speech-card__bubble {
    /* Figma実データでは grow 指定が無く shrink-0 のみ。363px を下限としつつ、
       それ以上は伸びない（コンテンツに合わせる）ボックスにする。 */
    flex: 0 1 auto;
    min-width: 363px;
    background: #fff;
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    padding: var(--parkx-space-24);
}

.parkx-speech-card__bubble p {
    margin: 0;
    font-size: var(--parkx-text-md);
    font-weight: 700;
    color: var(--parkx-color-text);
    line-height: 26px;
}

/* Figma の SpeechCard は本文（bold）とサブタイトル（通常の太さ・薄い色）が別要素 */
.parkx-speech-card__subtitle {
    font-weight: 400;
    color: var(--parkx-color-text-light);
    font-size: var(--parkx-text-xs);
    line-height: 1.5;
}

/* 入力フィールド系
   なまえ入力ステップのみ、Figma上は左寄せ（注記だけ右寄せ・警告チップだけ中央）。
   がくねん/せいべつ/すまいの選択肢グリッドは引き続き中央寄せなので、
   左寄せは .parkx-field-block--left 修飾クラスを付けたときだけ適用する。 */
.parkx-field-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-12);
    text-align: center;
}

.parkx-field-block--left {
    align-items: flex-start;
    text-align: left;
}

.parkx-field-block--left .parkx-field-block__hint {
    align-self: stretch;
    text-align: right;
}

.parkx-field-block--left .parkx-warning-chip {
    align-self: center;
}

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

.parkx-field-block__desc {
    /* Figma上は親のcenter寄せに関わらず、説明文そのものは常に左寄せテキスト */
    font-size: var(--parkx-text-xs);
    color: var(--parkx-color-text-light);
    text-align: left;
    margin: 0;
    width: 100%;
}

/* style.css の input[type="text"]（要素+属性セレクタ = 詳細度0,1,1）に
   .parkx-input（クラス単体 = 0,1,0）だと負けて上書きされてしまうため、
   input.parkx-input として詳細度を合わせて確実に効かせる。
   input 要素はブラウザ既定で親の font-family を継承しないため、それも明示する。 */
input.parkx-input {
    width: 100%;
    height: 40px;
    padding: var(--parkx-space-4) var(--parkx-space-16);
    border: 1px solid #a8a8a8;
    border-radius: var(--parkx-radius-xs);
    font-family: inherit;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: #121212;
    background: #fff;
}

.parkx-field-block__hint {
    font-size: var(--parkx-text-xs);
    color: var(--parkx-color-text-muted);
    margin: 0;
}

.parkx-field-block__other {
    width: 100%;
    display: flex;
    justify-content: center;
}

.parkx-warning-chip {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    color: var(--parkx-color-warning);
    border-radius: var(--parkx-radius-xl);
    padding: var(--parkx-space-8) 0;
}

.parkx-selection-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--parkx-space-8);
}

.parkx-selection-grid--inline {
    flex-wrap: nowrap;
    justify-content: center;
}

/* チップ内など、インライン表示のままPC/SPでテキストを出し分けたい箇所用
   （.pc/.sp-flex は display:flex 等になり、なまえ等のnowrapテキスト中では使えないため専用に用意） */
.parkx-only-pc {
    display: inline;
}

.parkx-only-sp {
    display: none;
}

/* 「その他」チップ＋年齢入力欄の行。入力欄は常に表示し、残り幅いっぱいに広げる */
.parkx-selection-grid--with-input .parkx-input {
    flex: 1 0 0;
    width: auto;
    min-width: 160px;
}

/* Figma の Radio コンポーネント準拠。
   デフォルト/選択済みで背景色は変わらず、枠線とテキスト色だけが変わる。 */
/* ruby（ふりがな）と地の文字が混在するため display:flex は使わない
   （フレックスコンテナにすると、テキストノードと ruby がそれぞれ別アイテムとして
   扱われ、flex-direction:column で縦に積み重なって改行されてしまう）。
   通常のインラインブロックとして扱い、line-height/padding で縦位置を合わせる。 */
.parkx-selection-chip {
    display: inline-block;
    flex-shrink: 0;
    min-width: 93px;
    width: auto;
    height: 36px;
    line-height: 24px;
    padding: var(--parkx-space-8) var(--parkx-space-12) var(--parkx-space-4);
    border-radius: var(--parkx-radius-xs);
    border: 1px solid var(--parkx-color-border);
    background: var(--parkx-color-surface-subtle);
    color: var(--parkx-color-text);
    font-weight: 900;
    font-size: var(--parkx-text-sm);
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    cursor: pointer;
}

.parkx-selection-chip.is-selected {
    border-color: var(--parkx-color-sponsor-yell);
    color: var(--parkx-color-sponsor-yell);
}

/* ---------------------------------------------------------------- */
/* SP向け調整 */
/* ---------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .parkx-only-pc {
        display: none;
    }

    .parkx-only-sp {
        display: inline;
    }

    .parkx-selection-grid {
        justify-content: center;
    }

    .parkx-app-header {
        display: none;
    }

    .parkx-app-header.sp-flex {
        display: flex !important;
        padding: var(--parkx-space-12) var(--parkx-space-16);
    }

    .parkx-bottom-nav {
        display: none;
    }

    .parkx-bottom-nav.sp-flex {
        display: flex !important;
    }

    .parkx-comment-grid {
        flex-direction: column;
    }

    .parkx-comment-card {
        flex-basis: auto;
        width: 100%;
    }

    /* PC版のサイズのまま（232px, right:-66px）だとSPの狭いカード幅では
       画面右端からはみ出し、ページ全体に横スクロールが発生してしまう
       （clip-pathは見た目上のクリップのみで、レイアウト上の幅には影響しないため）。
       SPでは画面をはみ出さない範囲に縮小する。 */
    .parkx-comment-card__avatar {
        width: 190px;
        top: -32px;
        right: -40px;
    }

    /* Figma実データ（actionCard--SP）ではPCの横並びカードとは別の専用レイアウトが
       組まれている：アイコンは48px、報酬/ボタンは縦積みで、達成済みのチェックは
       ボタン行を使わずカード右上に大きくはみ出すバッジとして重なる。 */
    .parkx-mission-item {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: auto;
        min-height: 0;
        gap: var(--parkx-space-8);
        padding: var(--parkx-space-8) var(--parkx-space-12);
    }

    .parkx-mission-item__main {
        gap: var(--parkx-space-12);
    }

    .parkx-mission-item__icon {
        width: 48px;
        height: 48px;
    }

    .parkx-mission-item__body {
        gap: var(--parkx-space-4);
    }

    .parkx-mission-item__title {
        font-size: var(--parkx-text-sm);
    }

    .parkx-mission-item__achievement {
        gap: var(--parkx-space-12);
    }

    .parkx-mission-item__reward-label {
        font-size: 10px;
    }

    .parkx-mission-item__reward-text {
        font-size: var(--parkx-text-xs);
    }

    /* やってみる／ロック中のボタンはアイコン行の下にフル幅で並ぶ */
    .parkx-mission-item__action {
        width: 100%;
    }

    /* 達成済みのチェックだけはボタン行を使わず、カード右上にはみ出すバッジとして重ねる */
    .parkx-mission-item__check {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 48px;
        height: 48px;
    }

    .parkx-mission-item__check img {
        width: 40px;
        height: 40px;
    }

    /* Figma実データ（jobrankCard-SP）はPCの縦積みカードとは全く別の横並びレイアウト：
       グリッドではなく1カラムの縦リストで、各カードは「順位バッジ・職業タグ+キャプション・
       右上にはみ出すキャラクター」を横一列に並べる構成になっている。 */
    .parkx-rank-grid {
        grid-template-columns: 1fr;
        gap: var(--parkx-space-8);
        margin-top: 0;
    }

    .parkx-rank-card {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--parkx-space-12);
        padding: var(--parkx-space-12);
        text-align: left;
        overflow: visible;
    }

    .parkx-rank-card__badge {
        position: static;
        width: 24px;
        height: 24px;
        font-size: var(--parkx-text-sm);
        flex-shrink: 0;
    }

    .parkx-rank-card__thumb {
        position: absolute;
        top: -8px;
        right: 5px;
        width: auto;
        height: 87px;
    }

    .parkx-rank-card__info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--parkx-space-8);
        flex: 1 0 0;
        min-width: 0;
        /* 右上にはみ出すキャラクターと文字が重ならないよう右側に余白を確保する */
        padding-right: 90px;
    }

    .parkx-gamerank-grid {
        grid-template-columns: 1fr;
    }

    /* Figma実データ（gameCard prop1=SP）はPCの縦積みカードとは別レイアウトで、
       サムネイルとタイトル/メタ/ユーザー名を横並びにし、その下にフル幅の
       「ゲームプレイ」ボタンを配置する構成になっている。 */
    .parkx-gamerank-card {
        padding: var(--parkx-space-12);
    }

    .parkx-gamerank-card__top {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--parkx-space-8);
        width: 100%;
    }

    .parkx-gamerank-card__thumb {
        width: 107px;
        flex-shrink: 0;
        border-radius: 4px;
        overflow: hidden;
    }

    .parkx-gamerank-card__body {
        padding: 0;
        gap: var(--parkx-space-8);
        flex: 1 0 0;
        min-width: 0;
    }

    .parkx-gamerank-card__title {
        font-size: var(--parkx-text-xs);
    }

    .parkx-gamerank-card__meta {
        justify-content: flex-start;
        gap: 4px;
    }

    .parkx-hero-card {
        flex-direction: column;
        text-align: center;
    }

    .parkx-hero-card__text {
        align-items: center;
    }

    .parkx-step-indicator {
        gap: var(--parkx-space-12);
    }

    /* Figma の StepItem--SP はPC版（丸24px・ラベル14px）より一回り小さい（丸20px・ラベル12px） */
    .parkx-step-indicator__num {
        width: 20px;
        height: 20px;
        font-size: var(--parkx-text-xs);
    }

    .parkx-step-indicator__label {
        font-size: var(--parkx-text-xs);
    }

    /* Figma の質問見出しはPC版(20px)よりSP版の方が小さい(16px) */
    .parkx-field-block__title {
        font-size: var(--parkx-text-md);
    }

    /* Figma の Button--SP はPC版(16px)よりラベルが小さく(14px)、左右パディングも狭い */
    .parkx-btn {
        font-size: var(--parkx-text-sm);
    }

    .parkx-btn--forward {
        padding: var(--parkx-space-4) var(--parkx-space-8) var(--parkx-space-4) var(--parkx-space-12);
    }

    .parkx-btn--backward {
        padding: var(--parkx-space-4) var(--parkx-space-12) var(--parkx-space-4) var(--parkx-space-8);
    }

    .parkx-onboarding {
        padding: var(--parkx-space-24) var(--parkx-space-12);
    }

    .parkx-speech-card {
        width: 100%;
    }

    /* ウェルカム画面だけキャラクターと吹き出しを縦並びにする（Figma上もそちらだけ縦並び）。
       なまえ/がくねん/せいべつ/すまい の各ステップは引き続き横並びのまま。 */
    .parkx-onboarding__inner--welcome .parkx-speech-card {
        flex-direction: column;
        gap: var(--parkx-space-12);
    }

    .parkx-speech-card__bubble {
        flex: 1 1 0%;
        min-width: 0;
        width: 100%;
        padding: var(--parkx-space-8) var(--parkx-space-16);
    }

    .parkx-speech-card__bubble p {
        font-size: var(--parkx-text-xs);
        line-height: 20px;
    }

    .parkx-app-header__logo {
        height: 45px;
    }
}