/*
==========================================================================
   枠線デザインシステム (Border Design System)
==========================================================================
このファイルでは、アプリケーションの主要な枠線を、
画面の表示順に沿って管理します。
==========================================================================
*/

:root {

    /*
    ==========================================================================
       1. 基本設定セクション
    ==========================================================================
    */
    /* 1-1. 「基本設定」セクション全体の枠線 */
    --section-basic-settings-border-width: 3px;
    --section-basic-settings-border-color: rgb(146, 146, 146);
    --section-basic-settings-border-style: solid;

    /* 1-2. 「SPU」「キャンペーン」などを囲むグループの枠線 */
    --group-basic-settings-border-width: 2px;
    --group-basic-settings-border-color: rgb(112, 112, 112);
    --group-basic-settings-border-style: solid;

    /* 1-3. 「楽天カード」や「勝ったら倍」などを囲む詳細グループの枠線 */
    --fieldset-basic-settings-border-width: 1px;
    --fieldset-basic-settings-border-color: rgb(112, 112, 112);
    --fieldset-basic-settings-border-style: solid;

    /*
    ==========================================================================
       2. ショッピングリストセクション
    ==========================================================================
    */
    /* 2-1. 「ショッピングリスト」セクション全体の枠線 */
    --section-shopping-list-border-width: 3px;
    --section-shopping-list-border-color: rgb(146, 146, 146);
    --section-shopping-list-border-style: solid;

    /* 2-2. ショップごとのカードの枠線 */
    --shop-card-border-width: 2px;
    --shop-card-border-color: rgb(146, 146, 146);
    --shop-card-border-style: solid;

    /* 2-3. 商品一行ごとの枠線 */
    --product-row-border-width: 1px;
    --product-row-border-color: rgb(163, 163, 163);
    --product-row-border-style: solid;

    /* 2-4. 商品名や価格などの入力欄の枠線 */
    --form-element-border-width: 1px;
    --form-element-border-color: rgb(163, 163, 163);
    --form-element-border-style: solid;

    /*
    ==========================================================================
       3. ポイント割当 & 他ECサイト比較セクション
    ==========================================================================
    */
    /* 3-1. 「ポイント割当 & 他ECサイト比較」セクション全体の枠線 */
    --section-comparison-border-width: 3px;
    --section-comparison-border-color: rgb(146, 146, 146);
    --section-comparison-border-style: solid;

    /* 3-2. 比較テーブルの枠線 */
    --table-comparison-border-width: 1px;
    --table-comparison-border-color: rgb(163, 163, 163);
    --table-comparison-border-style: solid;

    /* 3-3. 買いまわり・初利用ボーナス等サマリーテーブルの枠線 */
    --table-comparison-summary-border-width: 1px;
    --table-comparison-summary-border-color: rgb(163, 163, 163);
    --table-comparison-summary-border-style: solid;

    /*
    ==========================================================================
       4. サマリーセクション
    ==========================================================================
    */
    /* 4-1. 「サマリー」セクション全体の枠線 */
    --section-summary-border-width: 3px;
    --section-summary-border-color: rgb(146, 146, 146);
    --section-summary-border-style: solid;

    /* 4-2. サマリーテーブルの枠線 */
    --table-summary-border-width: 1px;
    --table-summary-border-color: rgb(163, 163, 163);
    --table-summary-border-style: solid;

    /* 4-3. お買い物成果メッセージの枠線 */
    --result-announcement-border-width: 3px;
    --result-announcement-border-color: rgb(163, 163, 163);
    --result-announcement-border-style: solid;

    /* 4-4. グラフ凡例の枠線 */
    --legend-layer-border-width: 1px;
    --legend-layer-border-color: rgb(163, 163, 163);
    --legend-layer-border-style: solid;

    /*
    ==========================================================================
       5. その他
    ==========================================================================
    */
    /* 5-1. 情報ポップオーバーの枠線 */
    --popover-border-width: 1px;
    --popover-border-color: #c7c7c7ff;
    --popover-border-style: solid;

    /* 5-2. フッターの上線 */
    --footer-border-top-width: 1px;
    --footer-border-top-color: #c7c7c7ff;
    --footer-border-top-style: solid;

    /* 5-3. ショップヘッダーの下線 */
    --shop-header-border-bottom-width: 1px;
    --shop-header-border-bottom-color: #c7c7c7ff;
    --shop-header-border-bottom-style: solid;

    /* 5-4. 商品詳細の区切り線 */
    --product-details-divider-width: 1px;
    --product-details-divider-color: rgb(146, 146, 146);
    --product-details-divider-style: dashed;

    /* 5-5. ポップアップトリガーアイコン */
    --popup-trigger-icon-color: #007bff; /* info-iconと同じ色 */
}

/* ポップアップトリガーアイコンのスタイル */
.popup-trigger-icon {
    cursor: pointer;
    color: var(--popup-trigger-icon-color);
    margin-left: 5px;
    vertical-align: middle; /* テキストと縦方向を合わせる */
}