/* =============================================================
 *  account-pages.css — マイページ／account 配下のページ専用スタイル
 *
 *  スコープ:
 *    #account_password        ... 各種変更ページ（パスワード変更 + ニュースレター設定）
 *    #account_profile         ... プロフィール表示ページ（読み取り専用）
 *    #account_profile_form    ... プロフィール編集ページ（編集フォーム）
 *    #account_basicinfo_form  ... 基本情報編集ページ（編集フォーム）
 *    #account_payment         ... 報酬受取口座ページ（編集フォーム）
 *    #account_download        ... 商品入手ページ（ダウンロードテーブル）
 *    #account_order_list      ... 注文履歴ページ（リストテーブル + ページネーション）
 *    #account_order_info      ... 注文詳細ページ（読み取り専用）
 *    #account_create          ... EA作成ツール（複雑な Vue アプリ・7ダイアログ）
 *    #account_dashboard       ... 口座管理（MT4ダッシュボード・10ダイアログ・サイドパネル）
 *
 *  方針:
 *    - 汎用 id #password / #newsletter は他テンプレと衝突しやすいため、
 *      ページ root を #account_password に一意化（2026-06-03 教訓・§5-4）。
 *    - 色値は var(--lr-*) を参照（直接の hex を残さない）。
 *    - card-header（各種変更）は #account_password の内側に配置し、
 *      ヘッダーと内容を 1 つの視覚ブロックに統合（§5-1）。
 *      外側 wrapper に box-shadow / border-radius は当てない
 *      （card-header 自体が視覚的トップを担うため、重ねると「浮く」）。
 *    - 各セクション（パスワード / ニュースレター）は単一ラッパー内の
 *      .lr-pw-section 区切りで分け、視覚的な「重複した独立カード」感を排除。
 *    - 保存ボタン帯は §5-6 ページレベルフッター流（右寄せ・min-width 120px）。
 *      従来の灰色帯（background-color: #f8f9fb）は廃止。
 *
 *  読み込み:
 *    catalog/controller/common/header.php の NewstoreMinifier 経由。
 *    design-tokens.css と letsreal.css の後に登録すること。
 * ============================================================= */

#account_password {
    background: var(--lr-surface);
    margin-bottom: var(--lr-space-2xl);
    border: var(--lr-bw-1) solid var(--lr-border);
    /* §5-1: card-header と一体化させるため box-shadow / border-radius は当てない */
}

/* =====================
   サブセクション区切り
   ===================== */
#account_password .lr-pw-section {
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
}
#account_password .lr-pw-section:last-child {
    border-bottom: none;
}

/* =====================
   フォーム行
   ===================== */
#account_password .form-group {
    display: flex;
    align-items: stretch;
    margin: 0;
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
    transition: background-color var(--lr-transition-fast);
}
#account_password fieldset .form-group:last-child {
    border-bottom: none;
}
#account_password .form-group:hover {
    background-color: var(--lr-surface-hover);
}

/* ラベル列（左固定幅・灰背景） */
#account_password .form-group .control-label {
    width: var(--lr-form-label-width);
    min-width: var(--lr-form-label-width);
    max-width: var(--lr-form-label-width);
    flex-shrink: 0;
    margin: 0;
    padding: var(--lr-space-md) var(--lr-space-xl);
    background-color: var(--lr-surface-sub);
    color: var(--lr-text-label);
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-medium);
    text-align: left !important;
    border-right: var(--lr-bw-1) solid var(--lr-border);
    min-height: var(--lr-row-min-height);
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
}

/* 必須マーク（form-group.required .control-label::before） */
#account_password .form-group.required .control-label::before {
    color: var(--lr-color-required);
    font-size: var(--lr-fs-xs);
    margin-right: var(--lr-space-xs);
    vertical-align: middle;
}

/* 入力フィールド列 */
#account_password .form-group .col-sm-9 {
    flex: 1;
    padding: var(--lr-space-md) var(--lr-space-2xl);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* =====================
   入力欄（el-input__inner 互換）
   ===================== */
#account_password input.el-input__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    border: var(--lr-bw-1) solid var(--lr-border-strong);
    border-radius: var(--lr-radius-sm);
    padding: var(--lr-space-sm) var(--lr-space-md);
    height: 40px;
    /* §5-5：パスワード入力は lg 幅（320px）— placeholder 短く十分 */
    width: var(--lr-input-w-lg);
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color var(--lr-transition-base), box-shadow var(--lr-transition-base);
    background-color: var(--lr-surface);
}
#account_password input.el-input__inner:focus {
    border-color: var(--lr-color-primary);
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* =====================
   ラジオボタン（HTML radio をスタイル）
   ===================== */
#account_password .radio-inline {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-label);
    cursor: pointer;
    padding: var(--lr-space-xs) var(--lr-space-lg) var(--lr-space-xs) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-sm);
    transition: color var(--lr-transition-fast);
}
#account_password .radio-inline:hover {
    color: var(--lr-color-primary);
}
#account_password .radio-inline input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--lr-border-radio);
    border-radius: var(--lr-radius-full);
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: border-color var(--lr-transition-fast);
    flex-shrink: 0;
}
#account_password .radio-inline input[type="radio"]:checked {
    border-color: var(--lr-color-primary);
}
#account_password .radio-inline input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: var(--lr-radius-full);
    background: var(--lr-color-primary);
}
#account_password .radio-inline input[type="radio"]:focus {
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* =====================
   エラーメッセージ
   ===================== */
#account_password .text-danger {
    margin-top: var(--lr-space-xs);
    padding-left: var(--lr-space-xs);
    width: 100%;
    color: var(--lr-color-danger);
    font-size: var(--lr-fs-sm);
}

/* =====================
   ボタン帯（§5-6 ページレベルフッター流）
   旧 grey banner（#f8f9fb）は廃止。右寄せ・min-width 120px のみ。
   ===================== */
#account_password .buttons {
    padding: var(--lr-space-xl) var(--lr-space-2xl);
    border-top: var(--lr-bw-1) solid var(--lr-border);
    text-align: right;
    background-color: var(--lr-surface);
    margin: 0;
}
#account_password .buttons .el-button {
    min-width: 120px;
    padding: 10px var(--lr-space-2xl);
    font-size: var(--lr-fs-md);
    border-radius: var(--lr-radius-sm);
    transition: all var(--lr-transition-base);
    font-weight: var(--lr-fw-medium);
    letter-spacing: 0.02em;
}
#account_password .buttons .el-button--primary:hover {
    background-color: var(--lr-color-primary-hover);
    border-color: var(--lr-color-primary-hover);
    box-shadow: 0 2px 8px var(--lr-color-primary-glow);
}

/* =============================================================
 *  #account_profile — プロフィール表示ページ（読み取り専用）
 *
 *  方針:
 *    - 旧 id #profile は profile_form.tpl と共有していたため、
 *      表示用は #account_profile に一意化（§5-4・2026-06-03 教訓）。
 *    - .profile-wrap は card-header + アバター + info-table を内包する
 *      白カードコンテナ。letsreal.css の .info-table を継承するため、
 *      テーブル本体のスタイルは記述不要。
 *    - §5-1: card-header はラッパー内側、ページ root（#account_profile）に
 *      box-shadow / border-radius は当てない。
 * ============================================================= */

#account_profile .profile-wrap {
    background: var(--lr-surface);
}

/* card-header — 右端に「編集」ボタンを並べる flex 配置 */
#account_profile .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* アバター帯（card-header と info-table の間） */
#account_profile .header-icon {
    padding: var(--lr-space-2xl);
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
}
#account_profile .header-icon img {
    width: 80px;
    height: 80px;
    border-radius: var(--lr-radius-full);
    object-fit: cover;
}

/* =============================================================
 *  #account_profile_form — プロフィール編集ページ
 *
 *  方針:
 *    - 旧 id #profile は profile.tpl と共有していたため、
 *      編集用は #account_profile_form に一意化（§5-4・2026-06-03 教訓）。
 *    - フォーム行は #account_password と同じ「灰色ラベル + 白入力セル」
 *      のテーブル様レイアウト。トークン参照・hover/focus ring 統一。
 *    - §5-1: card-header はラッパー（.profile-edit-wrap）内側、ページ root
 *      に box-shadow / border-radius は当てない。
 *    - §5-6: ボタン帯は右寄せ統合（戻る → 保存）。
 * ============================================================= */

#account_profile_form .profile-edit-wrap {
    background: var(--lr-surface);
}
#account_profile_form .card-body {
    padding: 0;
}

/* フォーム行 */
#account_profile_form .form-group {
    display: flex;
    align-items: stretch;
    margin: 0;
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
    transition: background-color var(--lr-transition-fast);
}
#account_profile_form fieldset .form-group:last-child {
    border-bottom: none;
}
#account_profile_form .form-group:hover {
    background-color: var(--lr-surface-hover);
}

/* ラベル列（左固定幅・灰背景） */
#account_profile_form .form-group .control-label {
    width: var(--lr-form-label-width);
    min-width: var(--lr-form-label-width);
    max-width: var(--lr-form-label-width);
    flex-shrink: 0;
    margin: 0;
    padding: var(--lr-space-md) var(--lr-space-xl);
    background-color: var(--lr-surface-sub);
    color: var(--lr-text-label);
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-medium);
    text-align: left !important;
    border-right: var(--lr-bw-1) solid var(--lr-border);
    min-height: var(--lr-row-min-height);
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
}

/* 入力フィールド列 */
#account_profile_form .form-group .col-sm-9 {
    flex: 1;
    padding: var(--lr-space-md) var(--lr-space-2xl);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* input / select 共通 */
#account_profile_form input.el-input__inner,
#account_profile_form select.el-input__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    border: var(--lr-bw-1) solid var(--lr-border-strong);
    border-radius: var(--lr-radius-sm);
    background-color: var(--lr-surface);
    box-sizing: border-box;
    width: 100%;
    transition: border-color var(--lr-transition-base), box-shadow var(--lr-transition-base);
}
#account_profile_form input.el-input__inner {
    padding: var(--lr-space-sm) var(--lr-space-md);
    height: 40px;
}
#account_profile_form select.el-input__inner {
    cursor: pointer;
}
#account_profile_form input.el-input__inner:focus,
#account_profile_form select.el-input__inner:focus {
    border-color: var(--lr-color-primary);
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* textarea */
#account_profile_form .el-textarea__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    border: var(--lr-bw-1) solid var(--lr-border-strong);
    border-radius: var(--lr-radius-sm);
    padding: 10px var(--lr-space-md);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--lr-surface);
    min-height: 120px;
    resize: vertical;
    line-height: var(--lr-lh-base);
    font-family: inherit;
    transition: border-color var(--lr-transition-base), box-shadow var(--lr-transition-base);
}
#account_profile_form .el-textarea__inner:focus {
    border-color: var(--lr-color-primary);
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* ラジオボタン（HTML radio をスタイル — #account_password と同パターン） */
#account_profile_form .radio-inline {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-label);
    cursor: pointer;
    padding: var(--lr-space-xs) var(--lr-space-lg) var(--lr-space-xs) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-sm);
    transition: color var(--lr-transition-fast);
}
#account_profile_form .radio-inline:hover {
    color: var(--lr-color-primary);
}
#account_profile_form .radio-inline input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--lr-border-radio);
    border-radius: var(--lr-radius-full);
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: border-color var(--lr-transition-fast);
    flex-shrink: 0;
}
#account_profile_form .radio-inline input[type="radio"]:checked {
    border-color: var(--lr-color-primary);
}
#account_profile_form .radio-inline input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: var(--lr-radius-full);
    background: var(--lr-color-primary);
}
#account_profile_form .radio-inline input[type="radio"]:focus {
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* 画像サムネイル */
#account_profile_form .img-thumbnail {
    display: inline-block;
    border: var(--lr-bw-1) solid var(--lr-border);
    border-radius: var(--lr-radius-sm);
    padding: var(--lr-space-xs);
    transition: border-color var(--lr-transition-base);
}
#account_profile_form .img-thumbnail:hover {
    border-color: var(--lr-color-primary);
}
#account_profile_form .img-thumbnail img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 2px;
}

/* ボタン帯（§5-6 ページレベルフッター流：右寄せ統合・min-width 120px） */
#account_profile_form .buttons {
    padding: var(--lr-space-xl) var(--lr-space-2xl);
    border-top: var(--lr-bw-1) solid var(--lr-border);
    text-align: right;
    background-color: var(--lr-surface);
    margin: 0;
}
#account_profile_form .buttons .el-button {
    min-width: 120px;
    padding: 10px var(--lr-space-2xl);
    font-size: var(--lr-fs-md);
    border-radius: var(--lr-radius-sm);
    transition: all var(--lr-transition-base);
    font-weight: var(--lr-fw-medium);
    letter-spacing: 0.02em;
}
#account_profile_form .buttons .el-button--primary:hover {
    background-color: var(--lr-color-primary-hover);
    border-color: var(--lr-color-primary-hover);
    box-shadow: 0 2px 8px var(--lr-color-primary-glow);
}

/* =============================================================
 *  #account_basicinfo_form — 基本情報編集ページ
 *
 *  方針:
 *    - 旧 id #basicinfo は basicinfo.tpl と共有していたため、
 *      編集用は #account_basicinfo_form に一意化（§5-4・2026-06-03 教訓）。
 *    - col-sm-10 を入力列に使用（profile_form の col-sm-9 と異なる）。
 *    - 氏名・ひらがなの「姓 / 名」分割は .name-fields でフレックス配置。
 *    - §5-1: card-header はラッパー（.basicinfo-edit-card）内側。
 *    - §5-6: ボタン帯は右寄せ統合（一覧に戻る → 更新）。
 * ============================================================= */

#account_basicinfo_form .basicinfo-edit-card {
    background: var(--lr-surface);
}
#account_basicinfo_form .card-body {
    padding: 0;
}

/* フォーム行 */
#account_basicinfo_form .form-group {
    display: flex;
    align-items: stretch;
    margin: 0;
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
    transition: background-color var(--lr-transition-fast);
}
#account_basicinfo_form fieldset .form-group:last-child {
    border-bottom: none;
}
#account_basicinfo_form .form-group:hover {
    background-color: var(--lr-surface-hover);
}

/* ラベル列（左固定幅・灰背景） */
#account_basicinfo_form .form-group .control-label {
    width: var(--lr-form-label-width);
    min-width: var(--lr-form-label-width);
    max-width: var(--lr-form-label-width);
    flex-shrink: 0;
    margin: 0;
    padding: var(--lr-space-md) var(--lr-space-xl);
    background-color: var(--lr-surface-sub);
    color: var(--lr-text-label);
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-medium);
    text-align: left !important;
    border-right: var(--lr-bw-1) solid var(--lr-border);
    min-height: var(--lr-row-min-height);
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
}

/* 必須マーク */
#account_basicinfo_form .form-group.required .control-label::before {
    color: var(--lr-color-required);
    font-size: var(--lr-fs-xs);
    margin-right: var(--lr-space-xs);
    vertical-align: middle;
}

/* 入力フィールド列（col-sm-10） */
#account_basicinfo_form .form-group .col-sm-10 {
    flex: 1;
    padding: var(--lr-space-md) var(--lr-space-2xl);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* input / select 共通 */
#account_basicinfo_form input.el-input__inner,
#account_basicinfo_form select.el-input__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    border: var(--lr-bw-1) solid var(--lr-border-strong);
    border-radius: var(--lr-radius-sm);
    background-color: var(--lr-surface);
    box-sizing: border-box;
    width: 100%;
    transition: border-color var(--lr-transition-base), box-shadow var(--lr-transition-base);
}
#account_basicinfo_form input.el-input__inner {
    padding: var(--lr-space-sm) var(--lr-space-md);
    height: 40px;
}
#account_basicinfo_form input.el-input__inner::placeholder {
    color: var(--lr-text-placeholder);
}
#account_basicinfo_form select.el-input__inner {
    cursor: pointer;
}
#account_basicinfo_form input.el-input__inner:focus,
#account_basicinfo_form select.el-input__inner:focus {
    border-color: var(--lr-color-primary);
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* textarea（el-input__inner クラスを textarea にも当てている既存パターン） */
#account_basicinfo_form textarea.el-input__inner {
    height: auto;
    min-height: 80px;
    padding: 10px var(--lr-space-md);
    resize: vertical;
    line-height: var(--lr-lh-base);
    font-family: inherit;
}

/* ラジオボタン */
#account_basicinfo_form .radio-inline {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-label);
    cursor: pointer;
    padding: var(--lr-space-xs) var(--lr-space-lg) var(--lr-space-xs) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-sm);
    transition: color var(--lr-transition-fast);
}
#account_basicinfo_form .radio-inline:hover {
    color: var(--lr-color-primary);
}
#account_basicinfo_form .radio-inline input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--lr-border-radio);
    border-radius: var(--lr-radius-full);
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: border-color var(--lr-transition-fast);
    flex-shrink: 0;
}
#account_basicinfo_form .radio-inline input[type="radio"]:checked {
    border-color: var(--lr-color-primary);
}
#account_basicinfo_form .radio-inline input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: var(--lr-radius-full);
    background: var(--lr-color-primary);
}
#account_basicinfo_form .radio-inline input[type="radio"]:focus {
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* 氏名・ひらがな分割行（姓 / 名 を横並び） */
#account_basicinfo_form .name-fields {
    display: flex;
    gap: var(--lr-space-md);
    flex: 1;
    padding: 0;
}
#account_basicinfo_form .name-fields .name-field {
    flex: 1;
    min-width: 0;
}

/* エラーメッセージ */
#account_basicinfo_form .text-danger {
    margin-top: var(--lr-space-xs);
    padding-left: var(--lr-space-xs);
    width: 100%;
    color: var(--lr-color-danger);
    font-size: var(--lr-fs-sm);
}

/* ボタン帯（§5-6 ページレベルフッター流：右寄せ統合・min-width 120px） */
#account_basicinfo_form .buttons {
    padding: var(--lr-space-xl) var(--lr-space-2xl);
    border-top: var(--lr-bw-1) solid var(--lr-border);
    text-align: right;
    background-color: var(--lr-surface);
    margin: 0;
}
#account_basicinfo_form .buttons .el-button {
    min-width: 120px;
    padding: 10px var(--lr-space-2xl);
    font-size: var(--lr-fs-md);
    border-radius: var(--lr-radius-sm);
    transition: all var(--lr-transition-base);
    font-weight: var(--lr-fw-medium);
    letter-spacing: 0.02em;
}
#account_basicinfo_form .buttons .el-button--primary:hover {
    background-color: var(--lr-color-primary-hover);
    border-color: var(--lr-color-primary-hover);
    box-shadow: 0 2px 8px var(--lr-color-primary-glow);
}

/* =============================================================
 *  #account_payment — 報酬受取口座ページ
 *
 *  方針:
 *    - 旧 id #payment-page は命名規則ずれのため #account_payment に統一。
 *    - フォーム行は basicinfo_form と同じ「灰色ラベル + 白入力セル」レイアウト。
 *    - $payment 変数として payment_form.tpl の HTML が #account_payment 配下に
 *      展開されるため、CSS スコープはここに集約。
 *    - §5-1: card-header（"報酬受取口座"）は payment_form.tpl が出力、#account_payment 配下。
 *    - §5-6: ボタン帯は右寄せ統合・灰色帯廃止・min-width 120px。
 *    - 注意文（.header-sub）は letsreal.css の既存スタイルを継承。
 * ============================================================= */

#account_payment {
    background: var(--lr-surface);
}

/* フォーム行 */
#account_payment .form-group {
    display: flex;
    align-items: stretch;
    margin: 0;
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
    transition: background-color var(--lr-transition-fast);
}
#account_payment fieldset .form-group:last-child {
    border-bottom: none;
}
#account_payment .form-group:hover {
    background-color: var(--lr-surface-hover);
}

/* ラベル列 */
#account_payment .form-group .control-label {
    width: var(--lr-form-label-width);
    min-width: var(--lr-form-label-width);
    max-width: var(--lr-form-label-width);
    flex-shrink: 0;
    margin: 0;
    padding: var(--lr-space-md) var(--lr-space-xl);
    background-color: var(--lr-surface-sub);
    color: var(--lr-text-label);
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-medium);
    text-align: left !important;
    border-right: var(--lr-bw-1) solid var(--lr-border);
    min-height: var(--lr-row-min-height);
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
}

/* 入力フィールド列（col-sm-10） */
#account_payment .form-group .col-sm-10 {
    flex: 1;
    padding: var(--lr-space-md) var(--lr-space-2xl);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* input / select 共通 */
#account_payment input.el-input__inner,
#account_payment select.el-input__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    border: var(--lr-bw-1) solid var(--lr-border-strong);
    border-radius: var(--lr-radius-sm);
    background-color: var(--lr-surface);
    box-sizing: border-box;
    width: 100%;
    transition: border-color var(--lr-transition-base), box-shadow var(--lr-transition-base);
}
#account_payment input.el-input__inner {
    padding: var(--lr-space-sm) var(--lr-space-md);
    height: 40px;
}
#account_payment select.el-input__inner {
    cursor: pointer;
}
#account_payment input.el-input__inner:focus,
#account_payment select.el-input__inner:focus {
    border-color: var(--lr-color-primary);
    box-shadow: var(--lr-shadow-focus);
    outline: none;
}

/* ボタン帯（§5-6 ページレベルフッター流：右寄せ・min-width 120px、灰色帯廃止） */
#account_payment .buttons {
    padding: var(--lr-space-xl) var(--lr-space-2xl);
    border-top: var(--lr-bw-1) solid var(--lr-border);
    text-align: right;
    background-color: var(--lr-surface);
    margin: 0;
}
#account_payment .buttons .el-button {
    min-width: 120px;
    padding: 10px var(--lr-space-2xl);
    font-size: var(--lr-fs-md);
    border-radius: var(--lr-radius-sm);
    transition: all var(--lr-transition-base);
    font-weight: var(--lr-fw-medium);
    letter-spacing: 0.02em;
}
#account_payment .buttons .el-button--primary:hover {
    background-color: var(--lr-color-primary-hover);
    border-color: var(--lr-color-primary-hover);
    box-shadow: 0 2px 8px var(--lr-color-primary-glow);
}

/* =============================================================
 *  #account_download — 商品入手ページ（ダウンロード一覧テーブル）
 *
 *  方針:
 *    - 旧 id #download は他テンプレと衝突しやすい汎用名のため
 *      #account_download に一意化（§5-4）。
 *    - el-table 自体の基本スタイル（外枠 + ヘッダ + ストライプ等）は
 *      letsreal.css のグローバルルール ＋ <el-table border> 属性で自動適用。
 *      ここではこのページ固有の微調整（success ボタンの緑系 hover glow）
 *      だけを記述する。
 *    - §5-3「外枠は維持する」 — 旧コードの `border: none` は外枠を消して
 *      出品リスト等と一貫性が崩れていたため復活させる（2026-06-03 是正）。
 * ============================================================= */

#account_download [v-cloak] {
    display: none;
}
#account_download {
    background: var(--lr-surface);
}

/* アクションボタン固有 hover（success の緑 glow — letsreal.css の青 glow を上書き） */
#account_download .el-table .el-button--success.is-plain:hover {
    box-shadow: 0 2px 6px rgba(103, 194, 58, 0.3);
}

/* =============================================================
 *  #account_order_list — 注文履歴ページ
 *
 *  方針:
 *    - 旧 id #order-list（ハイフン）は命名規則ずれのため #account_order_list に統一。
 *    - el-table の外枠は維持（§5-3 教訓）。letsreal.css グローバルに委譲し、
 *      ページ固有 CSS は最小限。
 *    - el-pagination は §5-16 に従い、テーブル下に左寄せ・margin-top 20px。
 * ============================================================= */

#account_order_list [v-cloak] {
    display: none;
}
#account_order_list {
    background: var(--lr-surface);
}

/* ページネーション（§5-16 左寄せ・テーブル下に余白） */
#account_order_list .el-pagination {
    margin-top: var(--lr-space-xl);
    padding: 0;
    text-align: left;
}

/* =============================================================
 *  #account_order_info — 注文詳細ページ（読み取り専用）
 *
 *  方針:
 *    - 旧 id #order-info（ハイフン）は #account_order_info に統一（§5-4）。
 *    - 注文概要（.order-summary）は 2 カラム flex で、左：注文番号/注文日、
 *      右：支払方法/配送方法。垂直の細い区切り線あり。
 *    - 商品テーブル + 注文履歴は letsreal.css の .info-table を継承。
 *    - 旧 .section-gap（空の 16px 灰色帯）は撤去。テーブル間は margin-top で自然分離。
 *    - §5-6: ボタン帯は右寄せ・min-width 120px・灰色帯廃止。
 * ============================================================= */

#account_order_info {
    background: var(--lr-surface);
}

/* 注文概要（2カラム flex） */
#account_order_info .order-summary {
    display: flex;
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
}
#account_order_info .order-summary .summary-col {
    flex: 1;
    padding: var(--lr-space-lg) var(--lr-space-2xl);
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    line-height: 1.8;
}
#account_order_info .order-summary .summary-col:first-child {
    border-right: var(--lr-bw-1) solid var(--lr-border);
}
#account_order_info .order-summary b {
    color: var(--lr-text-label);
    font-weight: var(--lr-fw-medium);
}

/* info-table のマージン解除（global で margin あれば打ち消し） */
#account_order_info .info-table {
    margin: 0;
}
/* 2 つ目以降の .info-table（コメント・履歴）は前のテーブルから 20px 離す
   旧 .section-gap の空灰色帯は撤去し、margin で自然分離（2026-06-03 是正） */
#account_order_info .table-responsive + .info-table,
#account_order_info .info-table + .info-table {
    margin-top: var(--lr-space-xl);
}

/* ボタン帯（§5-6 ページレベルフッター流：右寄せ・min-width 120px、灰色帯廃止） */
#account_order_info .buttons {
    padding: var(--lr-space-xl) var(--lr-space-2xl);
    border-top: var(--lr-bw-1) solid var(--lr-border);
    text-align: right;
    background-color: var(--lr-surface);
    margin: 0;
}
#account_order_info .buttons .el-button {
    min-width: 120px;
    padding: 10px var(--lr-space-2xl);
    font-size: var(--lr-fs-md);
    border-radius: var(--lr-radius-sm);
    transition: all var(--lr-transition-base);
    font-weight: var(--lr-fw-medium);
    letter-spacing: 0.02em;
}
#account_order_info .buttons .el-button--primary:hover {
    background-color: var(--lr-color-primary-hover);
    border-color: var(--lr-color-primary-hover);
    box-shadow: 0 2px 8px var(--lr-color-primary-glow);
}

/* =============================================================
 *  #account_create — EA作成ツール（複雑な Vue アプリ）
 *
 *  方針:
 *    - 旧 id #create は汎用名のため #account_create に一意化（§5-4）。
 *    - 旧テンプレ先頭の <style> は Element UI のグローバル要素（.el-row / .el-col /
 *      .el-card__header / .el-tag）を上書きしており、他ページへの漏れが心配だった。
 *      ここで #account_create スコープに閉じ込めることで影響範囲を限定する。
 *    - 5137 行の大規模 Vue テンプレなので、本セクションは「現状の見た目を維持しつつ
 *      トークン化・スコープ化」のみ実施。マークアップ側のインライン色は別タスクで整理。
 * ============================================================= */

#account_create [v-cloak] {
    display: none;
}

/* el-row / el-col の上書き（旧 inline <style> から移管・スコープ化） */
#account_create .el-row {
    margin-bottom: var(--lr-space-xl);
}
#account_create .el-row:last-child {
    margin-bottom: 0;
}
#account_create .el-col {
    border-radius: var(--lr-radius-sm);
}

/* グリッド／カードの装飾色（Element UI examples 由来） */
#account_create .bg-purple-dark {
    background: #99a9bf;
}
#account_create .bg-purple {
    background: #d3dce6;
}
#account_create .bg-purple-light {
    background: #e5e9f2;
}
#account_create .grid-content {
    border-radius: var(--lr-radius-sm);
    min-height: 36px;
}
#account_create .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
#account_create .el-card__header {
    background-color: var(--lr-surface-sub);
}

/* ラベル・必須マーク */
#account_create .position_question {
    color: var(--lr-text-title);
    font-weight: var(--lr-fw-bold);
}
#account_create .label1 {
    color: var(--lr-color-danger);
}

/* タグ管理（条件作成タブの動的タグ追加 UI） */
#account_create .el-tag + .el-tag {
    margin-left: var(--lr-space-sm);
}
#account_create .button-new-tag {
    margin-left: var(--lr-space-sm);
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
#account_create .input-new-tag {
    width: 90px;
    margin-left: var(--lr-space-sm);
    vertical-align: bottom;
}

/* テキスト */
#account_create .text {
    font-size: var(--lr-fs-md);
}
#account_create .item {
    margin-bottom: 18px;
}

/* clearfix（Bootstrap 互換、レガシー利用箇所のため残置） */
#account_create .clearfix:before,
#account_create .clearfix:after {
    display: table;
    content: "";
}
#account_create .clearfix:after {
    clear: both;
}

/* インジケーター要素ラベル */
#account_create .indicator-element-label {
    color: var(--lr-text-label);
    font-weight: var(--lr-fw-bold);
    font-family: 'Kosugi Maru', sans-serif;
    font-size: var(--lr-fs-md);
}
#account_create .indicator_category {
    color: var(--lr-color-danger);
    font-size: var(--lr-fs-md);
    font-weight: 800;
}

/* ポップオーバー内表示書式 */
#account_create .rulePopoverFormat {
    padding: 3px;
    font-size: var(--lr-fs-sm);
}

/* =============================================================
 *  #account_dashboard — 口座管理（MT4 ダッシュボード）
 *
 *  方針:
 *    - 旧 id #dashboard_app は命名統一のため #account_dashboard に改名（§5-4）。
 *    - 旧インライン <style> の Element UI グローバル上書き（h4, .el-dialog .el-radio-group,
 *      .el-dialog__wrapper .el-dialog__body, .el-carousel__item h3）は他ページへ
 *      漏れる可能性があったため、#account_dashboard スコープに閉じ込める。
 *    - .lr-dialog（custom-class）が letsreal.css で max-height 90vh + flex を提供
 *      するため、旧 .el-dialog__wrapper の 70vh ルールは廃止（lr-dialog で代替）。
 *    - 内側 id #api_list / #account も #account_dashboard 配下にスコープ化。
 * ============================================================= */

#account_dashboard[v-cloak],
#account_dashboard [v-cloak] {
    display: none;
}

/* h4 のページ内既定（旧グローバル h4 上書きをスコープ化） */
#account_dashboard h4 {
    line-height: 20px;
}

/* el-carousel 内の h3（あれば適用） */
#account_dashboard .el-carousel__item h3 {
    color: #475669;
    font-size: var(--lr-fs-md);
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

/* グリッド・行装飾 */
#account_dashboard .grid-content {
    border-radius: var(--lr-radius-sm);
    min-height: 36px;
}
#account_dashboard .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

/* アカウントサマリ右寄せ */
#account_dashboard .account-summary {
    color: var(--lr-text-title);
    float: right;
}

/* サマリ指標カード（KPI ブロック） */
#account_dashboard .summary-card {
    background: var(--lr-surface);
    border: var(--lr-bw-1) solid var(--lr-border);
    border-radius: 8px;
    padding: var(--lr-space-xl) var(--lr-space-lg);
    text-align: center;
}
#account_dashboard .summary-card .summary-label {
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-label);
    font-weight: var(--lr-fw-bold);
    margin-bottom: 10px;
}
#account_dashboard .summary-card .summary-value {
    font-size: 26px;
    font-weight: 700;
    color: #25D6BB;
}
#account_dashboard .summary-card .summary-value.is-minus {
    color: var(--lr-loss);
}
#account_dashboard .summary-card-main {
    background: #f5f7fa;
    border: 2px solid var(--lr-color-primary);
}

/* API 情報行 */
#account_dashboard .api-info {
    color: var(--lr-color-primary);
    float: right;
}

/* 区切りテキスト */
#account_dashboard .divide-text {
    color: var(--lr-text-label);
    font-weight: bold;
}

/* ポートフォリオ公開設定のラベル */
#account_dashboard .potofolio-open-set-label {
    display: inline-block;
    width: 300px;
    vertical-align: top;
}

/* サイドパネル */
#account_dashboard .el-aside {
    padding-top: var(--lr-space-lg);
}
#account_dashboard .aside-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-sm);
    padding: 0 var(--lr-space-xs);
}
#account_dashboard .aside-buttons .van-button {
    width: 100%;
    border-radius: var(--lr-radius-md);
    font-size: var(--lr-fs-sm);
}
#account_dashboard .aside-tree-wrapper {
    margin-top: var(--lr-space-lg);
    padding: var(--lr-space-md);
    background: #f9fafb;
    border-radius: 8px;
    border: var(--lr-bw-1) solid var(--lr-border);
}
#account_dashboard .aside-tree-title {
    font-size: var(--lr-fs-sm);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-label);
    margin-bottom: 10px;
    padding-bottom: var(--lr-space-sm);
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
}

/* テーブル固有スタイル（#api_list 配下） */
#account_dashboard #api_list .el-table .cell {
    padding: 0 var(--lr-space-md);
}
#account_dashboard #api_list .el-table--border::after,
#account_dashboard #api_list .el-table--group::after,
#account_dashboard #api_list .el-table::before {
    background-color: var(--lr-border);
}
#account_dashboard #api_list .el-table__expand-icon {
    background: var(--lr-color-primary-bg);
    border: var(--lr-bw-1) solid #b3d8ff;
    border-radius: var(--lr-radius-sm);
    width: 28px;
    height: 28px;
    line-height: 28px;
    color: var(--lr-color-primary);
    font-size: var(--lr-fs-md);
}
#account_dashboard #api_list .el-table__expand-icon:hover {
    background: var(--lr-color-primary);
    color: var(--lr-text-on-primary);
}
#account_dashboard #api_list.el-main {
    padding: var(--lr-space-lg) var(--lr-space-xl) 0 0;
}

/* 接続キー表示（monospace） */
#account_dashboard .key-display {
    font-family: monospace;
    font-size: var(--lr-fs-xs);
    color: var(--lr-text-label);
    cursor: pointer;
}
#account_dashboard .key-display:hover {
    color: var(--lr-color-primary);
}

/* ウィジェットカスタマイズグリッド（コントロール高さ揃え） */
#account_dashboard .widget-custom-grid > div {
    display: flex;
    flex-direction: column;
}
#account_dashboard .widget-custom-grid .widget-label {
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-label);
    margin-bottom: var(--lr-space-xs);
    height: 20px;
    line-height: 20px;
}
#account_dashboard .widget-custom-grid .widget-control {
    height: 36px;
    display: flex;
    align-items: stretch;
}
#account_dashboard .widget-custom-grid .widget-control .el-input,
#account_dashboard .widget-custom-grid .widget-control .el-radio-group,
#account_dashboard .widget-custom-grid .widget-control .el-input-number {
    height: 36px !important;
}
#account_dashboard .widget-custom-grid .widget-control .el-input__inner {
    height: 36px !important;
}
#account_dashboard .widget-custom-grid .widget-control .el-input-number .el-input__inner {
    height: 34px !important;
}
#account_dashboard .widget-custom-grid .widget-control .el-radio-button__inner {
    height: 36px !important;
    line-height: 18px;
}

/* ポートフォリオ公開設定ダイアログのラジオボタン幅統一
   （旧 .el-dialog .el-radio-group グローバル上書き → #account_dashboard スコープ化） */
#account_dashboard .el-dialog .el-radio-group {
    display: flex;
    width: 180px;
}
#account_dashboard .el-dialog .el-radio-group .el-radio-button {
    flex: 1;
}
#account_dashboard .el-dialog .el-radio-group .el-radio-button__inner {
    width: 100%;
    text-align: center;
}

/* ダイアログ内フォーム（共通微調整） */
#account_dashboard .el-dialog .el-form-item__label {
    line-height: 1.4;
}
#account_dashboard .el-dialog .el-form-item__content {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    margin-left: 0 !important;
    line-height: var(--lr-lh-base);
}