/*
 * Accordion Notes - Frontend Stylesheet
 * Version: 2.1.1 - アニメーション修正版
 */

/* ==========================================================================
   Base Container
   ========================================================================== */
.accordion-notes-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    max-width: 100%;
    /* ハードウェアアクセラレーションを強制 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

.accordion-notes-container * {
    box-sizing: border-box;
}

/* ==========================================================================
   Accordion Items
   ========================================================================== */
.accordion-item {
    margin-bottom: var(--margin, 10px);
    /* レンダリング最適化 */
    contain: layout style;
}

.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    cursor: pointer;
    font-weight: 500;
    transition: border-radius 0.2s ease-in-out;
    background-color: var(--title-bg, #97baa0);
    color: var(--title-text, #ffffff);
    border-radius: var(--border-radius, 8px);
    /* ハードウェアアクセラレーション強化 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: border-radius;
    /* レンダリング最適化 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* アクセシビリティ */
    outline: none;
    position: relative;
    /* アニメーション干渉を防ぐ */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* フォーカス時のスタイル */

.accordion-item-title:hover {
    opacity: 0.9;
}

/* frontend.css */

.accordion-item-content {
    padding: 0; /* paddingを削除し、内側のラッパーへ移動 */
    border: 1px solid var(--border-color, #97baa0);
    border-top: none;
    display: none;
    background-color: var(--content-bg, #fdfdfd);
    color: var(--content-text, #566270);
    border-radius: 0 0 var(--border-radius, 8px) var(--border-radius, 8px);
    /* ハードウェアアクセラレーション強化 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: height, opacity;
    /* レンダリング最適化 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 高さ計算の安定化 */
    overflow: hidden; /* アニメーション中はoverflow:hiddenが必須 */
    /* フォントレンダリングの最適化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* アニメーション干渉防止 */
    position: relative;
}

.accordion-content-inner {
    padding: 3px 15px 15px;
    box-sizing: border-box;
}

/* アニメーション中の状態管理 */
.accordion-item-content[data-animating="true"] {
    overflow: hidden !important;
}

.accordion-item.is-open > .accordion-item-title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ==========================================================================
   Toggle Icon
   ========================================================================== */
.accordion-toggle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    /* ハードウェアアクセラレーション */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.accordion-toggle::before {
    content: '';
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: currentColor;
    display: inline-block;
    padding: 4px;
    transform: translateY(-2px) rotate(45deg);
    /* ハードウェアアクセラレーション */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.accordion-item.is-open .accordion-toggle {
    transform: translateZ(0) rotate(180deg);
    -webkit-transform: translateZ(0) rotate(180deg);
}

/* ==========================================================================
   Content & Nested Items
   ========================================================================== */
.accordion-item-content h4 {
    margin-top: 10px;
    margin-bottom: 2px;
    padding-bottom: 3px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--content-text, #566270);
    color: var(--subtitle-text, #566270);
}

.accordion-item-content p {
    margin: 0.5em 0 1em 0;
    font-size: 14px;
    line-height: 1.6;
}

.accordion-item-content p:last-child {
    margin-bottom: 0;
}

.accordion-item-content img {
    display: block;          /* 画像をブロック要素として扱う */
    max-width: 100%;         /* 横幅をコンテンツエリアの100%に制限 */
    height: auto;            /* 高さは自動で調整してアスペクト比を維持 */
    max-height: 300px;       /* 画像の最大の高さを300pxに制限 */
    margin: 15px 0;       /* 画像の上下に15px、左右は中央揃え */
    border-radius: 4px;      /* 画像の角を少し丸くする */
    object-fit: contain;     /* 画像のアスペクト比を保持しつつ、指定サイズに収める */
}

/* 小さな画像の場合の処理 */
.accordion-item-content img[width] {
    width: auto;
    max-width: min(100%, 400px); /* 小さい画像は最大400pxまで */
}

/* 非常に大きな画像の場合の追加制限 */
.accordion-item-content img {
    width: auto;
    min-height: 50px;        /* 最小高さを設定 */
}
.accordion-children {
    margin-top: 15px;
    padding-left: 5px; /* Slight indent for visual hierarchy */
}

.accordion-children .accordion-item {
    border-radius: var(--border-radius, 8px);
    overflow: hidden; /* Ensures content respects the border radius */
}
/* テーマのemスタイルに影響されないように、より具体的なルールを定義 */
.accordion-notes-container .accordion-item-content em {
    font-style: italic;      /* スタイルを強制的にイタリックに */
    font-weight: normal;    /* テーマの太字指定をリセット */
    color: inherit;         /* テーマの色指定をリセットし、親要素の色を継承 */
}
/* ==========================================================================
   Animation Performance Optimizations
   ========================================================================== */

/* CSS Transitionを完全に無効化してJavaScriptアニメーションとの競合を防ぐ */
.accordion-item-content {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
}

/* アニメーション中の最適化 */
.accordion-item-content[data-animating="true"] {
    /* アニメーション中は必要最小限のプロパティのみを更新 */
    will-change: height, opacity;
    /* レイアウトの再計算を最小化 */
    contain: layout style paint;
}

/* 低性能デバイス向けの最適化 */
@media (max-width: 768px) {
    .accordion-notes-container {
        /* モバイルでのパフォーマンス最適化 */
        -webkit-overflow-scrolling: touch;
    }

    .accordion-item-content {
        /* モバイルでのレンダリング最適化 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .accordion-item-title {
        font-size: 14px;
        padding: 10px 12px;
    }

    .accordion-item-content p {
        font-size: 12px;
    }
}

/* 高DPIディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .accordion-toggle::before {
        transform: translateY(-2px) rotate(45deg) scale(0.9);
    }
}

/* reduced-motionが設定されている場合の対応 */
@media (prefers-reduced-motion: reduce) {
    .accordion-toggle {
        transition: none;
    }

    .accordion-item-title {
        transition: none;
    }
}