/* =============================================================
 *  出品者向けページ共通スタイル（developer メニュー配下）
 *  読み込み: catalog/controller/common/header.php の NewstoreMinifier 経由
 *
 *  対象テンプレ:
 *    - developer/version.tpl       (バージョン管理)
 *    - developer/authenticate.tpl  (認証システム)
 *    - developer/exchange.tpl      (物々交換)
 *    - developer/campaign.tpl      (クーポン発行)
 *    - developer/contact.tpl       (利用者連絡)
 *    - developer/report.tpl        (年次レポート)
 *
 *  方針:
 *    - 各 .tpl 先頭の <style> ブロックを廃止し、本ファイルに集約。
 *    - 色値は design-tokens.css の var(--lr-*) を参照する。
 *    - 個別ページ用スタイルはページ root の id (#authentication / #exchange_app /
 *      #campaign_app / #developer_contact / #version_app / #developer_report) でスコープ。
 *    - 横断ユーティリティ（.lr-helper-* / .lr-aside-box / .lr-text-*）は
 *      letsreal.css 側に置き、本ファイルではページ固有レイアウトに集中する。
 * ============================================================= */

/* ===== v-cloak 共通（Vue マウント前の閃光防止） ===== */
#authentication [v-cloak],
#exchange_app[v-cloak],
#campaign_app[v-cloak],
#developer_contact[v-cloak],
#version_app[v-cloak],
#developer_report [v-cloak] {
    display: none;
}

/* =============================================================
 *  認証システム (#authentication)
 *  ----------------------------------------------------------------
 *  デザイン方針: 3ステップを横並び並列カードで一目化、
 *  詳細情報（機能/FAQ）は折り畳みで段階開示。
 *  上部に1行リード + バージョンチップ + 補足リンクで散在情報を集約。
 * ============================================================= */

/* ---- ヘッダーサマリー ---- */
#authentication .auth-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lr-space-2xl);
    padding: var(--lr-space-xl) var(--lr-space-2xl);
    margin-bottom: var(--lr-space-2xl);
    background: linear-gradient(135deg, var(--lr-color-primary-bg-soft) 0%, var(--lr-surface) 100%);
    border: 1px solid #d9ecff;
    border-radius: var(--lr-radius-md);
}
#authentication .auth-hero__main {
    flex: 1;
    min-width: 0;
}
#authentication .auth-hero__lead {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    line-height: 1.8;
    margin: 0 0 var(--lr-space-md);
}
#authentication .auth-hero__lead strong {
    color: var(--lr-color-primary);
    font-weight: var(--lr-fw-bold);
}
#authentication .auth-hero__aside {
    flex-shrink: 0;
    align-self: flex-end;
}

/* バージョンチップ群（pill） */
#authentication .version-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-sm);
}
#authentication .version-list li {
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-label);
    padding: 6px 14px;
    background: var(--lr-surface);
    border-radius: 999px;
    border: 1px solid #d9ecff;
}
#authentication .version-list li strong {
    color: var(--lr-text-title);
    margin-right: 4px;
}

/* ---- 3ステップ並列カード ---- */
#authentication .auth-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lr-space-lg);
    margin-bottom: var(--lr-space-2xl);
}
@media (max-width: 991px) {
    #authentication .auth-steps {
        grid-template-columns: 1fr;
        gap: var(--lr-space-md);
    }
}

#authentication .auth-step-card {
    display: flex;
    flex-direction: column;
    background: var(--lr-surface);
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-xl);
    transition: all var(--lr-transition-base);
    position: relative;
}
#authentication .auth-step-card:hover {
    border-color: var(--lr-color-primary);
    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.10);
    transform: translateY(-2px);
}

/* デスクトップ時、カード間に矢印インジケータ */
@media (min-width: 992px) {
    #authentication .auth-step-card:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(var(--lr-space-lg) * -1);
        width: var(--lr-space-lg);
        height: 2px;
        background: linear-gradient(90deg, var(--lr-border) 0%, transparent 100%);
        transform: translateY(-50%);
    }
}

#authentication .auth-step-card__head {
    display: flex;
    align-items: center;
    gap: var(--lr-space-md);
    margin-bottom: var(--lr-space-md);
}
#authentication .auth-step-card__title {
    margin: 0;
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
    line-height: var(--lr-lh-tight);
}
#authentication .auth-step-card__desc {
    margin: 0 0 var(--lr-space-lg);
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-muted);
    line-height: var(--lr-lh-base);
    flex: 1; /* カード高さを揃えるためアクションを下に押し下げる */
}
#authentication .auth-step-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-sm);
}
#authentication .auth-step-card__actions .el-button {
    margin: 0;
    width: 100%;
    font-size: var(--lr-fs-sm);
    font-weight: var(--lr-fw-medium);
    padding: 10px var(--lr-space-md);
    border-radius: var(--lr-radius-sm);
}

/* ステップバッジ（既存サイズ維持・カード内で十分目立つ） */
#authentication .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--lr-radius-full);
    background: var(--lr-color-primary);
    color: var(--lr-text-on-primary);
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-bold);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.30);
}

/* ---- 折り畳み: さらに詳しく ---- */
#authentication .auth-details {
    border-top: 1px solid var(--lr-border);
    border-bottom: 1px solid var(--lr-border);
}
#authentication .auth-details .el-collapse-item__header {
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-label);
    padding-left: var(--lr-space-md);
}
#authentication .auth-details .el-collapse-item__header i {
    color: var(--lr-color-primary);
    margin-right: var(--lr-space-xs);
}
#authentication .auth-details .el-collapse-item__content {
    padding: var(--lr-space-md) var(--lr-space-xl) var(--lr-space-xl);
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-body);
    line-height: var(--lr-lh-base);
}

/* 機能説明リスト */
#authentication .auth-list {
    margin: 0;
    padding-left: var(--lr-space-xl);
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    line-height: 2;
}
#authentication .auth-list li {
    padding: 2px 0;
}

/* FAQ ブロック */
#authentication .faq-item {
    display: flex;
    align-items: flex-start;
    gap: var(--lr-space-sm);
    padding: var(--lr-space-md) var(--lr-space-lg);
    background: var(--lr-surface-sub);
    border-radius: var(--lr-radius-md);
    transition: background-color var(--lr-transition-fast);
}
#authentication .faq-item:hover {
    background: var(--lr-color-primary-bg-soft);
}
#authentication .faq-item .el-link {
    font-size: var(--lr-fs-md);
    line-height: 1.6;
}
#authentication .faq-contact {
    margin-top: var(--lr-space-md);
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-muted);
}
#authentication .faq-contact a {
    color: var(--lr-color-primary);
    text-decoration: none;
}
#authentication .faq-contact a:hover {
    text-decoration: underline;
}

/* 貼付場所ダイアログ内の画像ブロック上余白 */
#authentication .auth-image-block,
.lr-auth-image-block {
    margin-top: var(--lr-space-lg);
}

/* タブ調整（card 型タブの装飾は letsreal.css 側で統一済み・予備） */
#authentication .el-tabs {
    margin-top: 0;
}
#authentication .el-tab-pane {
    padding: 0;
}
#authentication .el-tabs__content {
    padding: 0;
}

/* ---- レスポンシブ ---- */
@media (max-width: 767px) {
    #authentication .auth-hero {
        flex-direction: column;
        padding: var(--lr-space-lg);
    }
    #authentication .auth-hero__aside {
        align-self: flex-start;
    }
}

/* =============================================================
 *  物々交換 (#exchange_app)
 *  ----------------------------------------------------------------
 *  検索・交換タブ + ダイアログ。タブ装飾は letsreal.css 側で
 *  統一済みなのでここでは独自要素のみ。
 * ============================================================= */

/* タブ右上に置く操作ボタン群（プログラム参加/解除）の配置 */
#exchange_app .lr-tab-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--lr-space-sm);
    margin-bottom: var(--lr-space-md);
}

/* 検索行・テーブル行の下余白（旧 <br> 代替） */
#exchange_app .lr-search-row,
#exchange_app .lr-action-row {
    margin-bottom: var(--lr-space-lg);
}

/* ダイアログ内 select ペアのラベル */
#exchange_app .exchange-pair-label {
    color: var(--lr-text-title);
    font-weight: var(--lr-fw-medium);
    margin-bottom: var(--lr-space-sm);
}

/* ダイアログフッターのテキスト */
#exchange_app .exchange-terms-link {
    margin-bottom: var(--lr-space-sm);
}

/* popover 内の確認ボタン群を右寄せ */
#exchange_app .lr-popover-actions {
    text-align: right;
    margin: 0;
}

/* =============================================================
 *  クーポン発行 (#campaign_app)
 *  ----------------------------------------------------------------
 *  入力フォーム + 履歴テーブル。共通フォーム装飾は developer-form.css
 *  の .lr-form-grid 側で統一済み。
 * ============================================================= */

/* ネストされたフォームアイテム（有効期間の開始/終了など、行内サブフォーム） */
#campaign_app .el-form-item .el-form-item {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
#campaign_app .el-form-item .el-form-item .el-form-item__label {
    background: transparent;
    border-right: none;
    font-weight: var(--lr-fw-normal) !important;
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-muted);
    padding: 0 var(--lr-space-sm) 0 0;
    min-height: auto;
    min-width: auto;
}
#campaign_app .el-form-item .el-form-item .el-form-item__content {
    padding: 0;
}

/* 注釈テキスト（橙のリンクを含む場合に lr-helper-warning を補強） */
#campaign_app .help-note {
    font-size: var(--lr-fs-xs);
    color: var(--lr-color-warning);
    line-height: var(--lr-lh-base);
    margin-top: 6px;
}
#campaign_app .help-note a {
    color: var(--lr-color-primary);
}

/* 有効期間セパレータ「～」 */
#campaign_app .lr-period-separator {
    color: var(--lr-text-muted);
}

/* 有効期間の開始/終了をネスト時に余白を詰める */
#campaign_app .lr-period-nested {
    display: flex;
    align-items: center;
    gap: var(--lr-space-md);
    flex-wrap: wrap;
}
#campaign_app .lr-period-nested > .el-form-item {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* カードヘッダー（入力フォームのセクションヘッダー） */
#campaign_app .el-card__header {
    background: var(--lr-surface-sub);
    border-bottom: 1px solid var(--lr-border);
    border-left: var(--lr-bw-3) solid var(--lr-color-primary);
    padding: 14px var(--lr-space-2xl);
}
#campaign_app .el-card__header span b {
    font-size: var(--lr-fs-lg);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
}

/* 申請ボタンエリア（el-form 直下、el-form-item の外） */
#campaign_app .submit-area {
    text-align: center;
    padding: var(--lr-space-xl) 0;
    background: var(--lr-surface);
    border-top: 1px solid var(--lr-border);
}

/* =============================================================
 *  利用者連絡 (#developer_contact)
 *  ----------------------------------------------------------------
 *  メッセージ送信フォーム + 履歴。フォーム装飾は #product_form 系と
 *  揃えるが、Element UI の el-form-item で構築されている。
 * ============================================================= */

#developer_contact .el-card {
    border: none;
    box-shadow: none !important;
}
#developer_contact .el-form-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--lr-border);
    transition: background-color var(--lr-transition-fast);
}
#developer_contact .el-form-item:last-of-type {
    border-bottom: none;
}
#developer_contact .el-form-item:hover {
    background-color: var(--lr-surface-hover);
}

#developer_contact .el-form-item__label {
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-medium) !important;
    color: var(--lr-text-label);
    background-color: var(--lr-surface-sub);
    padding: 14px var(--lr-space-xl);
    margin: 0;
    border-right: 1px solid var(--lr-border);
    min-height: var(--lr-row-min-height);
    display: flex;
    align-items: center;
    min-width: 150px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: var(--lr-lh-tight);
    text-align: left;
}
#developer_contact .el-form-item__content {
    flex: 1;
    padding: 10px var(--lr-space-xl);
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    margin-left: 0 !important;
    line-height: var(--lr-lh-base);
}

#developer_contact .el-input__inner,
#developer_contact .el-textarea__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    border: 1px solid var(--lr-border-strong);
    border-radius: var(--lr-radius-sm);
    transition: border-color var(--lr-transition-base), box-shadow var(--lr-transition-base);
}
#developer_contact .el-input__inner:focus,
#developer_contact .el-textarea__inner:focus {
    border-color: var(--lr-color-primary);
    box-shadow: var(--lr-shadow-focus);
}

#developer_contact .form-submit-row {
    border-bottom: none;
    padding: 0;
}
#developer_contact .form-submit-row .el-form-item__content {
    padding: 0;
}
#developer_contact .el-button--primary {
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-medium);
    padding: var(--lr-space-md) 0;
    border-radius: var(--lr-radius-sm);
    transition: all var(--lr-transition-base);
}
#developer_contact .el-button--primary:hover {
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

/* リッチエディタ（trumbowyg） */
#developer_contact .trumbowyg-box {
    border: 1px solid var(--lr-border-strong);
    border-radius: var(--lr-radius-sm);
}
#developer_contact .trumbowyg-editor {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
    min-height: 250px;
}

/* テーブル内ボタンの hover 強調 */
#developer_contact .el-table .el-button:hover {
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
}

/* =============================================================
 *  年次レポート (#developer_report)
 *  ----------------------------------------------------------------
 *  カードを縦に並べる素朴なレイアウト。
 * ============================================================= */

#developer_report .el-card {
    margin-bottom: 0;
    border: none;
    box-shadow: none !important;
    border-bottom: 1px solid var(--lr-border);
}
#developer_report .el-card:last-child {
    border-bottom: none;
}
#developer_report .el-card__header {
    border-bottom: 0;
    padding-bottom: 0;
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
}

#developer_report .el-select .el-input__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
}
#developer_report .el-button--success {
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-medium);
    border-radius: var(--lr-radius-sm);
    transition: all var(--lr-transition-base);
}
#developer_report .el-button--success:hover {
    box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}

/* セクション見出し */
#developer_report .section-title {
    font-size: var(--lr-fs-lg);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
    margin: var(--lr-space-xl) 0 var(--lr-space-md);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lr-border);
}

/* =============================================================
 *  バージョン管理 (#version_app)
 *  ----------------------------------------------------------------
 *  ほぼテーブル + ダイアログ。テーブル装飾は letsreal.css の el-table
 *  共通で揃っているので、ダイアログ内の見出し色などローカル要素のみ。
 * ============================================================= */

/* バージョン情報ダイアログのラベル（Version:、登録時刻:、状態:） */
#version_app .lr-version-label {
    color: var(--lr-text-title);
    font-weight: var(--lr-fw-medium);
}
/* 更新ボタンの上余白（リリースノート編集時の textarea との距離） */
#version_app .lr-version-update-btn {
    margin-top: 5px;
}