/* ページ全体の基本のスタイルを */
/* このファイルに記述します。 */
/* bodyや.container、歌詞テキストに関するスタイル、 */
/* その他の要素に関するスタイルを含みます。 */

/* 基本のリセットスタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* 全体のボディスタイル */
body {
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

/* コンテナの基本スタイル */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}

/* 曲タイトルのスタイル */
.logo h1 {
    font-size: 1.4em; /* さらに小さく */
    margin-bottom: 0; /* 下のマージンを0に */
}

/* YouTube動画エリアのスタイル */
#youtubeVideo {
    margin: 5px 0; /* 上下のマージンをさらに小さく */
}

/* 歌詞エリア */
#lyricsContainer {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
    background-color: #fff;
    margin-top: 5px; /* 上マージンをさらに小さく */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 歌詞のスタイル */
#lyrics {
    font-size: 1.1em;
    line-height: 1.6;
}

/* 歌詞のスタイル */
.lyric-line {
    padding: 8px 0;
    transition: all 0.3s ease;
}

/* 歌詞アクセント（<MY> の塗りと <with> の下層グラデ字で共通） */
:root {
    --lyric-accent-gradient: linear-gradient(to bottom right, #c3dcfa, #dcaeff, #d59fd0);
}

/* 歌詞のタグ別スタイル */
.aespa {
    color: black;
}

/* グラデの字形を下層・黒字を上層に重ねる（長方形の背景は使わない） */
.with {
    display: inline-grid;
}

.with__bg,
.with__fg {
    grid-area: 1 / 1;
}

.with__bg {
    z-index: 0;
    font-weight: normal;
    /* bold だと字幅が上の通常字と一致せず右にじわじわずれるので、ストロークで「太め」に見せる */
    -webkit-text-stroke: 0.55px rgba(200, 160, 230, 0.85);
    /* 完全重ねだと黒字が不透明でグラデが一切見えないので、ごく少しずらしてはみ出させる */
    transform: translate(0.06em, 0.07em);
    background: var(--lyric-accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.with__fg {
    position: relative;
    z-index: 1;
    color: black;
    font-weight: normal;
}

/* グラデを文字の塗りにする */
.MY {
    background: var(--lyric-accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

/* iframe スタイル */
iframe {
    border: none;
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

/* 翻訳エリアのスタイル */
.jp, .en, .kr {
    display: none;          /* 初期状態では非表示 */
    font-size: 0.8em;       /* 翻訳テキストの基本サイズ */
    color: gray;            /* 翻訳テキストの色 */
    white-space: pre-wrap;  /* 改行を保持して折り返し表示 */
    margin-top: 4px;
}

/* 翻訳テキストのスタイル */
.jp, .en, .kr {
    display: block;         /* 各翻訳テキストを改行して表示 */
}

/* サイドバーが表示されている場合、メインコンテンツを右にずらす */
.main-content {
    margin-left: 250px; /* サイドバーの幅と一致させる */
    padding: 20px; /* 必要に応じて余白を調整 */
}

/* レスポンシブデザイン（モバイル版） */
@media (max-width: 768px) {
    .main-content {
        margin-left: 0; /* サイドバーが表示されないモバイルでは左マージンをリセット */
    }
}