/* VIP Paragraph Styles - Optimized */

/* CSS Layers */
@layer vip.reset, vip.base, vip.components, vip.editor, vip.utilities;

/* CSS Variables */
@layer vip.reset {
    :root {
        /* VIPカラーシステム */
        --vip-primary: #0073aa;
        --vip-border: #e5e5e5;
        --vip-bg-gray: #f7f7f7;
        --vip-bg-light: #fafafa;

        /* VIPアイコンカラー */
        --vip-good: #4caf50;
        --vip-bad: #f44336;
        --vip-info: #2196f3;
        --vip-announce: #ff9800;
        --vip-pen: #607d8b;
        --vip-book: #9c27b0;
        --vip-point: #ffc107;
        --vip-caution: #ff5722;
        --vip-memo: #795548;
        --vip-hatena: #03a9f4;

        /* VIPアイコン背景色 */
        --vip-good-bg: #e8f5e9;
        --vip-bad-bg: #ffebee;
        --vip-info-bg: #e3f2fd;
        --vip-announce-bg: #fff3e0;
        --vip-pen-bg: #fafafa;
        --vip-book-bg: #f3e5f5;

        /* VIPスペーシング */
        --vip-padding: 1.5em;
        --vip-padding-sm: 1em;

        /* VIPボーダー */
        --vip-border-radius: 8px;
        --vip-border-width-thick: 2px;

        /* VIPシャドウ */
        --vip-shadow-sm: 0 1px 3px rgba(0,0,0,.1);
        --vip-shadow-md: 0 2px 5px rgba(0,0,0,.1);

        /* VIPトランジション */
        --vip-transition: .2s cubic-bezier(.4,0,.2,1);
    }
}

/* Base Styles */
@layer vip.base {
    /* 統一セレクタ */
    .wp-block [class*="is-style-"],
    p[class*="is-style-"] {
        box-sizing: border-box;
        position: relative;
        transition: var(--vip-transition);
    }

    /* パディング統一 */
    .wp-block [class*="is-style-"]:not([class*="icon_"]):not([class*="balloon_"]),
    p[class*="is-style-"]:not([class*="icon_"]):not([class*="balloon_"]) {
        padding: var(--vip-padding);
    }

    /* 共通ボーダー - 削除済み（全スタイルへの不要なボーダーを防ぐため） */
}

/* Style Components */
@layer vip.components {

    /* 1. 背景パターン系 - 共通化 */
    .is-style-bg_stripe {
        background: repeating-linear-gradient(-45deg, var(--vip-bg-gray), var(--vip-bg-gray) 5px, transparent 5px, transparent 10px);
    }

    .is-style-bg_grid {
        background: #fff url("data:image/svg+xml,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h15v1H0zm0 0v15h1V0z' fill='%23e5e5e5' fill-opacity='0.3'/%3E%3C/svg%3E");
    }

    /* 2. 装飾ボックス系 - ::after統一 */
    .is-style-crease {
        background: #fff;
        overflow: hidden;
    }

    .is-style-crease::after {
        content: '';
        position: absolute;
        top: -8px;
        right: -8px;
        border-style: solid;
        border-width: 0 30px 30px 0;
        border-color: transparent #f0f0f0 transparent transparent;
        transform: rotate(45deg);
        box-shadow: var(--vip-shadow-sm);
    }

    .is-style-stitch {
        background: #fff;
        border-style: dashed;
        border-width: var(--vip-border-width-thick);
        border-radius: var(--vip-border-radius);
            box-shadow: 0 0 0 4px #fff inset;
    }

    /* 3. かぎ括弧系 */
    .is-style-kakko_box,
    .is-style-big_kakko_box {
        background: var(--vip-bg-light);
        border: none;
    }

    .is-style-kakko_box::before,
    .is-style-kakko_box::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border: 3px solid var(--vip-primary);
    }

    .is-style-kakko_box::before {
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: none;
    }

    .is-style-kakko_box::after {
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
    }

    .is-style-big_kakko_box::before,
    .is-style-big_kakko_box::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 30px;
        border: 4px solid var(--vip-primary);
    }

    .is-style-big_kakko_box::before {
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: none;
    }

    .is-style-big_kakko_box::after {
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
    }

    /* 4. 立体効果系 */
    .is-style-dent_box {
        background: var(--vip-bg-gray);
        box-shadow: inset var(--vip-shadow-sm);
        border: none;
    }

    .is-style-emboss_box {
        background: #fff;
        box-shadow: var(--vip-shadow-md);
        border: none;
    }

    /* 5. 枠線系 - 共通化 */
    .is-style-border_left {
        border-left: 4px solid var(--vip-primary);
        background: var(--vip-bg-light);
        border-top: none;
        border-right: none;
        border-bottom: none;
    }

    .is-style-double_border {
        border-style: double;
        border-width: 3px;
        background: #fff;
    }

    .is-style-border_top_bottom {
        border-left: none;
        border-right: none;
        border-top: var(--vip-border-width-thick) solid var(--vip-border);
        border-bottom: var(--vip-border-width-thick) solid var(--vip-border);
        background: #fff;
    }

    /* 6. 付箋・吹き出し系 - transform最適化 */
    .is-style-sticky_box {
        background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
        border-left: 4px solid #ffd54f;
        border-top: none;
        border-right: none;
        border-bottom: none;
        position: relative;
    }

    .is-style-sticky_box::before {
        content: '';
        position: absolute;
        top: -5px;
        left: 10px;
        width: 30px;
        height: 25px;
        background: rgba(255,255,255,0.5);
        transform: rotate(-5deg);
        border-radius: 3px;
    }

    .is-style-balloon_box,
    .is-style-balloon_box2 {
        border-radius: 10px;
        position: relative;
        padding: var(--vip-padding);
    }

    .is-style-balloon_box {
        background: #fff;
        border: 2px solid var(--vip-border);
    }

    .is-style-balloon_box2 {
        background: var(--vip-bg-gray);
        border: 2px solid var(--vip-primary);
        border-radius: 15px;
    }

    /* 吹き出し尻尾 - 正確な位置に修正 */
    .is-style-balloon_box::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 30px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #fff transparent transparent transparent;
    }

    .is-style-balloon_box::before {
        content: '';
        position: absolute;
        bottom: -13px;
        left: 29px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 11px 11px 0 11px;
        border-color: var(--vip-border) transparent transparent transparent;
    }

    .is-style-balloon_box2::after {
        content: '';
        position: absolute;
        top: 20px;
        right: -15px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent var(--vip-bg-gray);
    }

    .is-style-balloon_box2::before {
        content: '';
        position: absolute;
        top: 18px;
        right: -19px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 0 12px 17px;
        border-color: transparent transparent transparent var(--vip-primary);
    }
}

/* Icon Components */
@layer vip.components {

    /* 共通アイコンスタイル - 複数セレクターで確実に適用 */
    .wp-block-paragraph[class*="is-style-icon_"]:not([class*="big_icon"]),
    p[class*="is-style-icon_"]:not([class*="big_icon"]),
    [class*="is-style-icon_"]:not([class*="big_icon"]) {
        padding: var(--vip-padding-sm) var(--vip-padding-sm) var(--vip-padding-sm) 2.5em;
        position: relative;
        border-left: 4px solid;
        border-top: none;
        border-right: none;
        border-bottom: none;
    }

    [class*="is-style-icon_"]:not([class*="big_icon"])::before {
        position: absolute;
        left: 0.7em;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1em;
        font-weight: bold;
    }

    /* 大アイコン共通スタイル - 複数セレクターで確実に適用 */
    .wp-block-paragraph[class*="is-style-big_icon_"],
    p[class*="is-style-big_icon_"],
    [class*="is-style-big_icon_"] {
        padding: 1.2em 1.2em 1.2em 1.5em;
        border-radius: var(--vip-border-radius);
        border-width: var(--vip-border-width-thick);
        border-style: solid;
        position: relative;
    }

    [class*="is-style-big_icon_"]::before {
        position: absolute;
        left: -8px;
        top: 8px;
        transform: translateY(-50%);
        width: 1.8em;
        height: 1.8em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1em;
        font-weight: bold;
        border-radius: 50%;
        color: #fff;
    }

    /* アイコン別カラー定義 - 強力なセレクターで確実に適用 */
    body .wp-block-paragraph.is-style-icon_good,
    body p.is-style-icon_good,
    body .is-style-icon_good {
        background: var(--vip-good-bg) !important;
        border-left: 4px solid var(--vip-good) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    body .wp-block-paragraph.is-style-big_icon_check,
    body p.is-style-big_icon_check,
    body .is-style-big_icon_check {
        background: var(--vip-good-bg) !important;
        border: 2px solid var(--vip-good) !important;
        border-radius: var(--vip-border-radius) !important;
    }

    .is-style-icon_good::before { content: '✓'; color: var(--vip-good); }
    .is-style-big_icon_check::before { content: '✓'; background: var(--vip-good); }

    body .wp-block-paragraph.is-style-icon_bad,
    body p.is-style-icon_bad,
    body .is-style-icon_bad {
        background: var(--vip-bad-bg) !important;
        border-left: 4px solid var(--vip-bad) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    body .wp-block-paragraph.is-style-big_icon_batsu,
    body p.is-style-big_icon_batsu,
    body .is-style-big_icon_batsu {
        background: var(--vip-bad-bg) !important;
        border: 2px solid var(--vip-bad) !important;
        border-radius: var(--vip-border-radius) !important;
    }

    .is-style-icon_bad::before { content: '✗'; color: var(--vip-bad); }
    .is-style-big_icon_batsu::before { content: '✗'; background: var(--vip-bad); }

    body .wp-block-paragraph.is-style-icon_info,
    body p.is-style-icon_info,
    body .is-style-icon_info {
        background: var(--vip-info-bg) !important;
        border-left: 4px solid var(--vip-info) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .is-style-icon_info::before {
        content: 'i';
        width: 1em;
        height: 1em;
        line-height: 1em;
        text-align: center;
        color: #fff;
        background: var(--vip-info);
        border-radius: 50%;
        font-style: italic;
        font-weight: bold;
        font-family: serif;
    }

    body .wp-block-paragraph.is-style-icon_announce,
    body p.is-style-icon_announce,
    body .is-style-icon_announce {
        background: var(--vip-announce-bg) !important;
        border-left: 4px solid var(--vip-announce) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .is-style-icon_announce::before { content: '📢'; }

    body .wp-block-paragraph.is-style-icon_pen,
    body p.is-style-icon_pen,
    body .is-style-icon_pen {
        background: var(--vip-pen-bg) !important;
        border-left: 4px solid var(--vip-pen) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .is-style-icon_pen::before { content: '✎'; color: var(--vip-pen); }

    body .wp-block-paragraph.is-style-icon_book,
    body p.is-style-icon_book,
    body .is-style-icon_book {
        background: var(--vip-book-bg) !important;
        border-left: 4px solid var(--vip-book) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .is-style-icon_book::before { content: '📖'; }

    /* 大アイコン特別スタイル */
    .is-style-big_icon_check {
        background: var(--vip-good-bg);
        border-color: var(--vip-good);
    }

    .is-style-big_icon_batsu {
        background: var(--vip-bad-bg);
        border-color: var(--vip-bad);
    }

    .is-style-big_icon_point {
        background: #fff8e1;
        border-color: var(--vip-point);
    }

    .is-style-big_icon_point::before { content: '!'; background: #fff; color: var(--vip-good); border: 2px solid var(--vip-good); }

    .is-style-big_icon_hatena {
        background: var(--vip-info-bg);
        border-color: var(--vip-hatena);
    }

    .is-style-big_icon_hatena::before { content: '?'; background: var(--vip-hatena); }

    .is-style-big_icon_caution {
        background: var(--vip-announce-bg);
        border-color: var(--vip-caution);
    }

    .is-style-big_icon_caution::before { content: '!'; background: var(--vip-caution); }

    .is-style-big_icon_memo {
        background: #fce4ec;
        border-color: var(--vip-memo);
    }

    .is-style-big_icon_memo::before { content: '📝'; background: #fff; border: 2px solid var(--vip-memo); }
}


/* Utilities */
@layer vip.utilities {
    /* アクセシビリティ */
    @media (prefers-reduced-motion: reduce) {
        [class*="is-style-"] {
            transition: none;
            transform: none;
        }
    }

    @media (prefers-contrast: high) {
        [class*="is-style-"] {
            border-width: 2px;
        }
    }

    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        [class*="is-style-"] {
            padding: var(--vip-padding-sm);
        }

        [class*="is-style-icon_"]:not([class*="big_icon"]) {
            padding-left: 2em;
        }

        [class*="is-style-big_icon_"] {
            padding-left: 2.5em;
        }
    }
}