/* =============================================================
 *  パートナー（affiliate メニュー配下）共通スタイル
 *  読み込み: catalog/controller/common/header.php の NewstoreMinifier 経由
 *
 *  対象テンプレ:
 *    - affiliate/sales.tpl       (パートナー報酬)      #affiliate_sales
 *    - affiliate/report.tpl      (年次レポート)        #affiliate_report
 *    - affiliate/banner.tpl      (商品各種バナー)      #affiliate_banner
 *    - affiliate/blog_parts.tpl  (サイト各種広告)      #affiliate_blog_parts
 *
 *  方針:
 *    - 各 .tpl 先頭の <style> ブロックを廃止し、本ファイルに集約。
 *    - 色値は design-tokens.css の var(--lr-*) を参照する。
 *    - 個別ページ用スタイルはページ root の「一意な」id でスコープ。
 *      （旧 id #bonus / #tracking は他テンプレと共有される汎用名で、
 *        developer-pages.css / developer-sales.css の #bonus 規則が
 *        漏れ込む事故が起きていたため、本対応で一意化した。
 *        ガイドライン §5-4「スコープが他ページに漏れないように」参照）
 *    - 横断ユーティリティ（.lr-helper-* / .lr-text-* 等）は letsreal.css 側。
 * ============================================================= */

/* ===== v-cloak 共通（Vue マウント前の閃光防止） ===== */
#affiliate_sales [v-cloak],
#affiliate_report [v-cloak],
#affiliate_banner [v-cloak],
#affiliate_blog_parts [v-cloak] {
    display: none;
}

/* =============================================================
 *  パートナー報酬 (#affiliate_sales)
 *  ----------------------------------------------------------------
 *  上部に概要カード（大型数字）、下部にタブ（報酬明細／詳細検索／会員獲得履歴）。
 * ============================================================= */

#affiliate_sales .el-card {
    margin-bottom: var(--lr-space-xl);
}

/* 概要カードの大型数字エリア（旧クラス名 .gaiyao / .shang / .zhonge /
   .grayFont / .weightFont はテンプレ側がそのまま参照するため命名維持） */
#affiliate_sales .gaiyao .shang {
    padding: var(--lr-space-md) 0 var(--lr-space-xl); /* 旧 11px → 12px に寄せ 4 の倍数化 */
}
#affiliate_sales .gaiyao .zhonge {
    font-size: 30px;       /* 大型表示数字。専用サイズのためトークン化しない */
    line-height: 50px;
    color: var(--lr-color-primary);
    font-weight: var(--lr-fw-bold);
}
#affiliate_sales .gaiyao .grayFont {
    color: var(--lr-text-muted); /* 旧 #999 → Element UI 準拠の補助テキスト色 */
}
#affiliate_sales .gaiyao .weightFont {
    font-weight: var(--lr-fw-bold);
    font-size: var(--lr-fs-lg);
}

/* 会員獲得履歴タブのカレンダーのヘッダ中央寄せ。
   旧コードはグローバル指定だったが #affiliate_sales 配下に限定 */
#affiliate_sales .el-calendar-table thead th {
    text-align: center;
}

/* =============================================================
 *  年次レポート (#affiliate_report)
 *  ----------------------------------------------------------------
 *  カードを縦に並べる素朴なレイアウト（developer/report.tpl と同設計）。
 * ============================================================= */

#affiliate_report .el-card {
    margin-bottom: 0;
    border: none;
    box-shadow: none !important;
    border-bottom: 1px solid var(--lr-border);
}
#affiliate_report .el-card:last-child {
    border-bottom: none;
}
#affiliate_report .el-card__header {
    border-bottom: 0;
    padding-bottom: 0;
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
}
#affiliate_report .el-select .el-input__inner {
    font-size: var(--lr-fs-md);
    color: var(--lr-text-body);
}
#affiliate_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);
}
#affiliate_report .el-button--success:hover {
    box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}

/* =============================================================
 *  商品各種バナー (#affiliate_banner)
 *  ----------------------------------------------------------------
 *  テーブル＋画像/ウィジェットダイアログ。
 * ============================================================= */

/* 自己アフィリエイト留意事項ボックス（タイトル付き枠）。
   旧コードはグローバル指定だったが #affiliate_banner 配下に限定。
   装飾色 #62c1ce はこの枠専用の一点物のためトークン化しない */
#affiliate_banner .box-message {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid var(--lr-bw-3) #62c1ce;
}
#affiliate_banner .box-message .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: var(--lr-text-on-primary);
    border-radius: 5px 5px 0 0;
}
#affiliate_banner .box-message p {
    margin: 0;
    padding: 0;
}
/* ウィジェットプレビュー iframe はクリック無効（コピー用の見本表示のため） */
#affiliate_banner iframe {
    pointer-events: none;
}
#affiliate_banner .el-table th .cell {
    white-space: nowrap;
}
/* セール特価（取消線付き通常価格の下に表示する割引後価格）。旧 style="color:red" を class 化 */
#affiliate_banner .lr-special-price {
    color: var(--lr-color-danger);
}

/* =============================================================
 *  サイト各種広告 (#affiliate_blog_parts)
 *  ----------------------------------------------------------------
 *  ブログパーツ／サイトバナーのコード生成＋プレビュー。
 * ============================================================= */

@media screen and (max-width: 768px) {
    #affiliate_blog_parts .console {
        display: none;
    }
    #affiliate_blog_parts .tip {
        display: inherit;
    }
}
#affiliate_blog_parts ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #d0c5c554;
}
#affiliate_blog_parts ::-webkit-scrollbar-thumb {
    background: #bdc3ca;
}
#affiliate_blog_parts .el-row {
    padding-bottom: 10px;
}
#affiliate_blog_parts .widthHeight .el-input-number {
    width: 53.5%;
}
#affiliate_blog_parts .widthHeight img {
    width: initial;
    float: left;
    height: 42px;
    position: relative;
    top: -4px;
}
#affiliate_blog_parts .ranking .el-select {
    width: 90%;
}
#affiliate_blog_parts .preview {
    border-top: 0;
}
#affiliate_blog_parts .preview .el-row .el-col {
    text-align: center;
}
#affiliate_blog_parts .tip {
    display: none;
}
#affiliate_blog_parts .console {
    margin-bottom: 15px;
}