/**
 * memoyan-view.css - memoyan作成コンテンツ表示用スタイルシート
 *
 * memoyan.jsで作成されたコンテンツを詳細ページで正しく表示するためのCSS
 * .memoyan-view クラスで囲まれたコンテンツに対してのみ適用
 * 既存のCSSルールを上書きしてmemoyanのスタイルを優先
 */

/* ===========================================
   基本設定・リセット
   =========================================== */

.memoyan-view {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.memoyan-view *,
.memoyan-view *::before,
.memoyan-view *::after {
    box-sizing: border-box;
}

/* ===========================================
   テキスト要素
   =========================================== */

.memoyan-view p {
    margin: 0 0 1em;
}

.memoyan-view h1,
.memoyan-view h2,
.memoyan-view h3,
.memoyan-view h4 {
    margin: 1.5em 0 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

.memoyan-view h1 {
    font-size: 2em;
}

.memoyan-view h2 {
    font-size: 1.5em;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.3em;
}

.memoyan-view h3 {
    font-size: 1.25em;
}

.memoyan-view h4 {
    font-size: 1.1em;
}

.memoyan-view b,
.memoyan-view strong {
    font-weight: 600;
}

.memoyan-view s,
.memoyan-view strike,
.memoyan-view del {
    text-decoration: line-through;
}

/* ===========================================
   リスト
   =========================================== */

.memoyan-view ul,
.memoyan-view ol {
    margin: 0 0 1em;
    padding-left: 2em;
}

.memoyan-view li {
    margin-bottom: 0.25em;
}

/* ===========================================
   リンク
   =========================================== */

.memoyan-view a {
    color: #0066cc;
    text-decoration: underline;
}

.memoyan-view a:hover {
    color: #004499;
}

/* ===========================================
   画像 - memoyanで設定されたサイズを尊重
   =========================================== */

/* 基本画像スタイル */
.memoyan-view img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* memoyanリサイザブル画像ラッパー */
.memoyan-view .memoyan-resizable-image {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}

.memoyan-view .memoyan-resizable-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ===========================================
   YouTube動画プレースホルダー
   memoyanで設定されたサイズを優先、未設定時はレスポンシブ
   =========================================== */

.memoyan-view .memoyan-video-placeholder {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
}

.memoyan-view .memoyan-video-preview {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.memoyan-view .memoyan-video-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* 再生アイコン */
.memoyan-view .memoyan-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    pointer-events: none;
}

.memoyan-view .memoyan-video-play-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

/* ===========================================
   YouTube iframe - 直接埋め込み時
   memoyanの設定サイズを尊重しつつレスポンシブ対応
   =========================================== */

/* YouTube iframe基本スタイル（!importantで既存ルール上書き） */
.memoyan-view iframe[src*="youtube.com"],
.memoyan-view iframe[src*="youtu.be"] {
    max-width: 100% !important;
    border-radius: 8px;
    margin: 8px 0;
}

/* インラインstyle（width/height属性）があれば尊重、なければデフォルト */
.memoyan-view iframe[src*="youtube.com"]:not([style*="width"]),
.memoyan-view iframe[src*="youtu.be"]:not([style*="width"]) {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
}

/* ===========================================
   Spotify iframe
   memoyanの設定サイズを尊重
   =========================================== */

.memoyan-view .memoyan-spotify-placeholder {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 8px 0;
    border-radius: 12px;
    overflow: hidden;
}

.memoyan-view .memoyan-spotify-preview {
    display: block;
    width: 100%;
    height: 100%;
}

.memoyan-view .memoyan-spotify-preview iframe {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* Spotify直接iframe */
.memoyan-view iframe[src*="spotify.com"] {
    max-width: 100% !important;
    border-radius: 12px;
    margin: 8px 0;
}

/* ===========================================
   tky12ch埋め込みコード iframe
   height属性を尊重し、カットオフを防ぐ
   =========================================== */

.memoyan-view .embed-code-iframe {
    max-width: 100% !important;
    width: 100% !important;
    /* height属性を尊重するため、heightはオーバーライドしない */
    min-height: 200px;
    margin: 16px 0;
    border: none;
    border-radius: 8px;
}

/* embed-code-iframeにheight属性がない場合のフォールバック */
.memoyan-view .embed-code-iframe:not([height]):not([style*="height"]) {
    height: auto !important;
    min-height: 400px;
}

/* ===========================================
   一般的なiframe（その他）
   =========================================== */

.memoyan-view iframe:not([src*="youtube.com"]):not([src*="youtu.be"]):not([src*="spotify.com"]):not(.embed-code-iframe) {
    max-width: 100% !important;
    margin: 8px 0;
    border-radius: 8px;
}

/* ===========================================
   メディアの削除ボタン（非表示 - 表示専用モード）
   =========================================== */

.memoyan-view .memoyan-video-remove,
.memoyan-view .memoyan-media-remove,
.memoyan-view .memoyan-resize-corner {
    display: none !important;
}

/* ===========================================
   モバイル対応
   =========================================== */

@media screen and (max-width: 767px) {
    .memoyan-view {
        font-size: 15px;
    }

    .memoyan-view h1 {
        font-size: 1.6em;
    }

    .memoyan-view h2 {
        font-size: 1.3em;
    }

    .memoyan-view h3 {
        font-size: 1.15em;
    }

    .memoyan-view h4 {
        font-size: 1.05em;
    }

    /* モバイルでの画像・動画はmax-width制限 */
    .memoyan-view img,
    .memoyan-view .memoyan-resizable-image,
    .memoyan-view .memoyan-video-placeholder,
    .memoyan-view .memoyan-spotify-placeholder {
        max-width: 100%;
    }

    /* memoyan-resizable-imageの幅がインラインで指定されている場合の上限 */
    .memoyan-view .memoyan-resizable-image[style*="width"] {
        max-width: 100% !important;
    }

    /* YouTube再生アイコンを小さく */
    .memoyan-view .memoyan-video-play-icon {
        width: 48px;
        height: 48px;
    }

    .memoyan-view .memoyan-video-play-icon svg {
        width: 24px;
        height: 24px;
    }

    /* モバイルでembed-code-iframeの最小高さ調整 */
    .memoyan-view .embed-code-iframe:not([height]):not([style*="height"]) {
        min-height: 300px;
    }
}

/* ===========================================
   PC幅制限 - コンテンツの読みやすさ
   =========================================== */

@media screen and (min-width: 768px) {
    /* PC表示時、画像・動画の最大幅をコンテナに収める */
    .memoyan-view img,
    .memoyan-view .memoyan-resizable-image,
    .memoyan-view .memoyan-video-placeholder,
    .memoyan-view .memoyan-spotify-placeholder,
    .memoyan-view iframe {
        max-width: 100%;
    }
}