/* @import url("ruby_modal.css"); */
/* Per-character ruby styling for Chinese in modal */
.word-modal-content .ruby {
    display: inline-flex;
    flex-direction: column-reverse; /* pinyin above, character below */
    align-items: center;
    vertical-align: baseline;
    margin: 0 0.14em; /* minimal horizontal spacing */
    /* font-size: 0.95em; 日本語のrubyタグと視覚的サイズを揃える */
}


.word-modal-word .ruby-pinyin,
.word-modal-sentence .ruby-pinyin { color: #aaa; line-height: 1; text-align: center; }
.word-modal-word .ruby-pinyin { font-size: 0.56em; margin: 0; margin-top: -0.2em; }
.word-modal-sentence .ruby-pinyin { font-size: 0.48em; margin: 0; margin-top: -0.2em; }

/* Make base character line-height tight to reduce vertical gap */
.word-modal-content .ruby > span { line-height: 1; }

/* Also compress line box of each ruby in the word row */
.word-modal-word .ruby { line-height: 1; }

/* Kill artificial letter spacing from global Chinese rules */
.word-modal-word:has(.ruby .ruby-pinyin),
.word-modal-sentence:has(.ruby .ruby-pinyin) {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* Apply Chinese font when span-based ruby exists */
.word-modal-word:has(.ruby .ruby-pinyin),
.word-modal-sentence:has(.ruby .ruby-pinyin) {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Hiragino Sans GB', 'SimHei', sans-serif !important;
  font-weight: 300 !important;
  font-variation-settings: 'wght' 300 !important;
  letter-spacing: 0.02em !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
  

body {
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", "Arial", sans-serif;
    line-height: 1.6;
    padding: 0.5rem;
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff; /* 背景をライトに変更 */
    color: #303030; /* テキスト色を暗く変更 */
    min-height: 100svh; /* モバイルブラウザUI対応：小さいビューポート高さを使用 */
    box-sizing: border-box;
    overflow-y: scroll; /* 垂直スクロールバーを常に表示 */
    scrollbar-gutter: stable; /* スクロールバー用のスペースを常に確保 */
}

/* h1 {
    font-size: 18px;
    font-weight: normal;
    color: #3a3a3a;
    text-align: left;
    margin-bottom: 0.5rem;
} */
h1 {
    font-size: 18px; /* フォントサイズを大きくして */
    /* font-weight: bold; 太字にして */
    /* color: #ff69b4; /* ピンク色に変更 */
    /* color: #cf6679; /* ピンク */
    color: #303030;
    /* color: #bb86fc; */
    /* color: #7B68EE; /* ミディアムスレートブルー */
    /* color: #483D8B; /* ダークスレートブルー */
    text-align: center; /*  中央揃えに変更 */
    /* text-align: left; */
    margin-bottom: 0.5rem; /* マージンを増やして */
    /* font-family: 'Comic Sans MS', cursive, sans-serif; かわいいフォントに変更 */
    /* font-family: 'Pacifico', 'Segoe Script', 'Brush Script MT', cursive; 別のかわいいフォントに変更 */
    /* text-shadow: 2px 2px #f0bdc5; テキストシャドウを追加 */
    /* text-shadow: 1px 1px #ffb6c1; テキストシャドウを追加 */
    /* text-shadow: 1px 1px #404040; テキストシャドウをダークな色に変更 */
    display: none;
}

h2 {
    font-size: 1rem;
    font-weight: 600;
    /* color: #3a3a3a; */
    color: #303030; /* 見出しの色を黒に変更 */
    margin-bottom: 1rem;
}

.tabcontent {
    font-size: 14px;
    /* color: #3a3a3a; */
    color: #303030; /* テキスト色を暗く変更 */
}

@keyframes jump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.jump-label {
    display: inline-block;
    position: relative;
}

.animal {
    position: absolute;
    font-size: 1.2rem;
    top: -24px;
    animation: jump 1s infinite;
}

.hidden {
    display: none;
}

/* 1行目：アプリ名とユーザー情報 */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0px;
  padding-bottom: 1px;
  padding-left: 12px;
  padding-right: 12px;

  background: #ffffff;
  border-bottom: 1px solid #303030;
}

.app-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-name {
  color: #303030;
  font-size: 22px;
  font-weight: 600;
  margin-top: 0;
  /* margin-bottom: -10px; */
}

/* ユーザーメニューコンテナ */
.user-menu-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#username-display {
  color: #303030;
  font-size: 14px;
  font-weight: 500;
}

.user-menu-btn {
  padding: 6px 12px;
  font-size: 12px;
  background-color: #f0f0f0;
  color: #303030;
  border: 1px solid #cccccc;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s;
}

.user-menu-btn:hover {
  background-color: #e0e0e0;
  border-color: #999999;
}

/* 2行目：タブコンテナ */
.tab-container {
  background: #ffffff;
  padding: 0 12px;
  padding-top: 1px;
}

.tab {
    display: flex;
    flex: 1;
    gap: 2px;
}

/* タブボタン */
.tab button {
    /* background-color: #ffffff; */
    background-color: #ffffff; /* タブボタンの背景をダークに変更 */
    border: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    outline: none;
    cursor: pointer;
    padding: 4px 2px;
    transition: 0.3s;
    font-size: 13px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* 中国語フォント優先 */
    font-weight: 500; /* フォントウェイトを明示的に指定 */
    line-height: 1.2; /* 行の高さを統一 */
    letter-spacing: 0.02em; /* 文字間隔を微調整 */
    text-rendering: optimizeLegibility; /* フォント描画を最適化 */
    -webkit-font-smoothing: antialiased; /* WebKit系でのフォント描画を改善 */
    /* color: #3a3a3a; */
    color: #666666; /* テキスト色を暗く変更 */
    /* margin-bottom: 1rem; */
}

.tab button:hover {
    /* background-color: #f5f5f5; */
    background-color: #f8f8f8; /* ホバー時の背景色を変更 */
    border: none;
    /* color: #3a3a3a; */
    color: #303030; /* テキスト色を白に変更 */
}

.tab button.active {
    background-color: #f8f8f8;
    color: #303030;
    border-bottom: 1px solid #303030 !important;
}


/* タブコンテンツ */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* border-radius: 8px; */
    border-top: none;
    /* background-color: #e9e9e9; */
    background-color: #f8f8f8; /* タブコンテンツの背景をダークに変更 */
    /* color: #303030; テキスト色を明るく変更 */
    margin-top: 0px; /* タブボタンの下線と重なるように調整 */
}

/* ボタンの視認性を高める */
button {
    /* border: 1px solid #ccc; */
    border: 1px solid #cccccc; /* ボーダー色をライトに変更 */
    border-radius: 4px;
    /* background: #121212; */
    background: #f8f8f8; /* ボタンの背景をライトに変更 */
    border-radius: 6px;
    transition: 0.2s;
    cursor: pointer;
    /* color: #303030; */
    color: #303030; /* テキスト色を暗く変更 */
    /* margin: 4px 0px; */
}


/* タッチフィードバックを無効にする */
button,
a,
input[type="text"],
textarea,
label[for="imageFile"],
.scrolling-word,
.app-icon {
    -webkit-tap-highlight-color: transparent; /* タッチハイライトを透明にする */
    outline: none; /* フォーカス時のアウトラインを無効にする */
}

.chat-box {
    position: relative;
    overflow: hidden; /* はみ出さないようにする */
    height: 100%; /* 高さを指定 */
}

.scrolling-word { /* クラス名を 'scrollright-word' から 'scrolling-word' に統一 */
    position: absolute;
    white-space: nowrap;
    left: 100%;
    /* animation: scroll-left linear 10s forwards; 'infinite' を削除し、時間を調整 */
    cursor: pointer;
    color: #303030; /* テキスト色を暗く変更 */
    user-select: none; /* テキスト選択を無効にする */
    
    /* 中国語に最適化されたフォント設定 */
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Microsoft YaHei', 'SimHei', 'Arial Unicode MS', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      
    /* ホバー時のエフェクト */
    transition: all 0.3s ease;
}

.scrolling-word:hover {
    transform: scale(1.05);
    color: #000;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0px);
    }
    100% {
        /* transform: translateX(-1200px); 固定値から変更 */
        transform: translateX(calc(-100vw - 800px));  /* 画面幅 + 余裕を持たせた800px(スクロールが完了前に終了しないようにするための余裕) */
    }
}

/* スクロール単語の相対位置設定 */
.scrolling-word {
    /* position: relative; */
    position: absolute;
    display: inline-block; /* 必要に応じて調整 */
    /* overflow: hidden; エフェクトがはみ出さないようにする - JLPTアンダーラインのフェードアウト効果を妨げるためコメントアウト */
    padding-left: 1.5em; /* Canvasのスペースを確保 */
}

/* エフェクト用Canvasのスタイル */
.scrolling-word canvas.effect-canvas {
    position: absolute;
    top: 0;
    left: 0;
    /* left: -1em; 単語の先頭から1文字分左にシフト */
    pointer-events: none; /* マウスイベントを無視 */
    width: 100%;
    height: 100%;
}

#voice-input-button,
#auto-input-button,
#submit-button,
#clear-button,
#word_output-button,
#word_output-sample-button,
#make_sentence_input_button,
#make_sentence_output_button,
#article_output-button,
#article_output-sample-button,
#article_output-collection-button {
    padding: 6px 12px;
    font-size: 14px;
}

button:hover,
button.hover-active {
    /* border: 1px solid #3e3e3e;
    color: #fff;
    background: #3e3e3e; */
    border: 1px solid #aaaaaa; /* ホバー時のボーダー色を変更 */
    color: #202020; /* テキスト色を少し暗く */
    background: #e8e8e8; /* ホバー時の背景色を変更 */
}


/* チャット中のcopyボタン */
.copy-button,
.analyze-button {
    /* background: #f8f8f8;
    border: 1px solid #353535;
    color: #666666; */
    background: #f0f0f0; /* ライトモードに変更 */
    color: #888888; /* テキスト色を暗く変更 */
    border: 1px solid #cccccc; /* ボーダー色をライトに変更 */
    border-radius: 4px;
    border-radius: 6px;
    transition: 0.2s;
    cursor: pointer;
    /* padding: 20px 40px; */
    /* min-width: 60px; */
    min-height: 20px;
    text-align: left;
    font-size: 12px;
    vertical-align: middle;
    display: inline-block;
}

.send-to-bot-btn {
    background: #f0f0f0; /* ライトモードに変更 */
    color: #303030; /* テキスト色を暗く変更 */
    border: 1px solid #cccccc; /* ボーダー色をライトに変更 */
    border-radius: 4px;
    border-radius: 6px;
    transition: 0.2s;
    cursor: pointer;
    min-height: 20px;
    text-align: left;
    padding: 8px 16px;
    font-size: 16px;
}

/* フィルターで絵文字を紫にする */
.purple-emoji {
    /* filter: hue-rotate(270deg) saturate(200%) brightness(85%) contrast(120%); */
    filter: hue-rotate(270deg) saturate(250%) brightness(75%) contrast(130%);
    /* filter: hue-rotate(270deg) saturate(280%) brightness(70%) contrast(135%); */
    /* filter: hue-rotate(270deg) saturate(300%) brightness(65%) contrast(140%); */
    /* display: inline-block; */
    font-size: 0.9em;
}

/* フィルターで絵文字を灰色にする */
.gray-emoji {
    width: 1.5em;             /* テキストの大きさと揃える */
    height: 1.5em;
    vertical-align: middle;
    margin-left: -5px;
    margin-bottom: 2px;
    /* filter: grayscale(100%) brightness(90%) contrast(100%); */
}
  
.copy-button sup {
    font-size: 10px;
    /* vertical-align: super; */
    vertical-align: baseline;
    /* color: #023f79; */
    color: #303030;
}

.copy-button:hover sup,
.analyze-button:hover sup,
.send-to-bot-btn:hover sup {
    color: #fff;
}


/* フォーム要素の色をライトモードに変更 */
input[type="text"],
textarea {
    /* background-color: #ffffff; 背景色をライトに変更 */
    background-color: #ffffff;
    color: #303030; /* テキスト色を暗く変更 */
    border: 1px solid #cccccc; /* ボーダー色をライトに変更 */
    border-radius: 4px; /* 角を少し丸くする */
}

/* オートフィル時のスタイルを上書き */
#imageURL:-webkit-autofill,
#imageURL:-webkit-autofill:hover,
#imageURL:-webkit-autofill:focus,
#imageURL:-webkit-autofill:active,
#word-input:-webkit-autofill,
#word-input:-webkit-autofill:hover,
#word-input:-webkit-autofill:focus,
#word-input:-webkit-autofill:active,
#make_sentence_input:-webkit-autofill,
#make_sentence_input:-webkit-autofill:hover,
#make_sentence_input:-webkit-autofill:focus,
#make_sentence_input:-webkit-autofill:active,
#articleURL:-webkit-autofill,
#articleURL:-webkit-autofill:hover,
#articleURL:-webkit-autofill:focus,
#articleURL:-webkit-autofill:active,
#user-input:-webkit-autofill,
#user-input:-webkit-autofill:hover,
#user-input:-webkit-autofill:focus,
#user-input:-webkit-autofill:active,
#input_text:-webkit-autofill,
#input_text:-webkit-autofill:hover,
#input_text:-webkit-autofill:focus,
#input_text:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;  /* 背景色をライトモードの入力欄背景色 (#303030) に維持 */
    -webkit-text-fill-color: #303030 !important;                 /* 文字色をライトモードの文字色 (#303030) に維持 */
    caret-color: #303030 !important;                             /* キャレット（カーソル）色を調整 */
    /* background-color は -webkit-box-shadow で上書きされるので、ここでは不要な場合が多い */
    /* border: 1px solid #4a4a4a !important; */ /* 必要であればボーダーも指定 */
    /* transition: background-color 5000s ease-in-out 0s; */ /* アニメーションを遅延させて上書きを防ぐハックも存在しますが、box-shadowで十分なことが多いです */
    background-color: #ffffff !important;                           /* 背景色を強制的に設定 */
}

input::placeholder {
    color: #888888; /* プレースホルダーの色を明るく変更 */
}

/* リンクの色をライトモードに適応 */
a {
    /* color: #bb86fc; アクセントカラーに変更 */
    color: #7b7b7b;
    /* color: #ffb6c1; リンク色をアクセントカラーに変更 */
}

a:hover {
    color: #ffffff; /* ホバー時のリンク色を白に変更 */
}


/* ラジオボタン */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    /* border: 2px solid #ccc; */
    /* background-color: #f8f8f8; */
    border: 2px solid #cccccc; /* ラジオボタンの境界線をライトに変更 */
    background-color: #ffffff; /* 背景色をライトに変更 */
    outline: none;
    transition: border-color 0.2s;
    margin-left: 1px;
    margin-right: -2px;
    position: relative;
    top: 0.2em;
}

input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 1.1em;
    height: 1.1em;
    background-color: #666666;
    /* background-color: #4a4a4a; */
    /* background-color: #bb86fc; /* 選択時の色をアクセントカラーに変更 */
    /* background-color: #ffb6c1; */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* すべてのテーブルで統一した固定幅レイアウト */
/* 以下の2つを登録するとなぜかtd幅の設定が効かないので登録しない */
/* #translation_tab table */
/* #word_tab table */
#chat_tab #chat-form table,
#image_tab table,
#article_tab table,
#image_tab table.image-analysis-mode-table {
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

#chat_tab #chat-form table td,
#image_tab table td,
#translation_tab table td,
#word_tab table td,
#article_tab table td,
#image_tab table.image-analysis-mode-table td {
    padding: 0;
    margin: 0;
    white-space: normal; /* 改行を許可 */
    overflow: hidden;
    text-align: left;
}

/* #chat_tab #chat-form table td label,
#image_tab table td label,
#translation_tab table td label,
#word_tab table td label,
#article_tab table td label {
    margin: 0;
    padding-right: 2px;
} */


/* 各tableのtdの幅を指定 */
/* 4文字タイトルの場合 */
#chat_tab #chat-form table td:first-child,
#translation_tab table td:first-child,
#word_tab table td:first-child,
#article_tab table td:first-child {
    width: 70px !important;
}
/* 2文字タイトルの場合 */
#image_tab table td:first-child {
    width: 43px !important;
}

/* 2文字設定値の場合 */
#translation_tab table td:nth-child(2),
#translation_tab table td:nth-child(3),
#translation_tab table td:nth-child(4),
#word_tab table td:nth-child(2),
#word_tab table td:nth-child(3),
#word_tab table td:nth-child(4),
#chat_tab #chat-form table tr:nth-child(1) td:nth-child(2),
#chat_tab #chat-form table tr:nth-child(1) td:nth-child(3),
#chat_tab #chat-form table tr:nth-child(1) td:nth-child(4),
#chat_tab #chat-form table tr:nth-child(2) td:nth-child(2),
#chat_tab #chat-form table tr:nth-child(2) td:nth-child(3),
#chat_tab #chat-form table tr:nth-child(2) td:nth-child(4),
#chat_tab #chat-form table tr:nth-child(2) td:nth-child(5) {
    width: 65px !important;
}

/* 3文字設定値の場合 */
#image_tab table td:nth-child(2),
#image_tab table td:nth-child(3),
#article_tab table td:nth-child(2),
#article_tab table td:nth-child(3),
#article_tab table td:nth-child(4) {
    width: 75px !important;
}

/* 画像解析モード行のラジオボタン幅を狭く */
#image_tab table.image-analysis-mode-table td:first-child {
    width: 70px !important;
}

#image_tab table.image-analysis-mode-table td:nth-child(2),
#image_tab table.image-analysis-mode-table td:nth-child(3) {
    width: 90px !important;
}

/* スピナー */
.spinner {
    display: inline-block;
    /* border: 3px solid rgba(0, 0, 0, 0.1); */
    /* border-left-color: #3e3e3e; */
    border: 3px solid rgba(0, 0, 0, 0.1); /* スピナーの色を調整 */
    /* border-left-color: #bb86fc; アクセントカラーに変更 */
    border-left-color: #7b7b7b;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#chat-form { /* または #chat_tab 。状況に応じて調整してください */
    display: flex;
    flex-direction: column;
    /* チャットタブ全体の高さを適切に設定する必要があります */
    /* 例: viewportの高さからヘッダー分などを引いた高さ */
    /* height: calc(100vh - 100px); */ /* @media screen and (max-width: 767px)・@media screen and (min-width: 768px) 側で調整 */
    /* または親要素から高さを継承するなど */
    align-items: flex-start; /* 追加 */
}

#chat-area {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    overflow-y: auto;           /* .chat-box から移動/統合 */
    background-color: #f8f8f8;  /* .chat-box から移動/統合 */
    border: none;               /* .chat-box から移動/統合 */
    border-radius: 8px;         /* .chat-box から移動/統合 */
    padding: 10px;              /* .chat-box から移動/統合 */
    margin-bottom: 5px;         /* .chat-box から移動/統合 */
    /* font-size と font-family は共通スタイルから継承される想定 */
    
    /* 背景画像設定 - JavaScriptで時間帯に応じて動的に設定 */
    /* デフォルト背景なし（ちらつき防止） */
    background-size: calc(100% + 2px) calc(100% + 2px), 130%;
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-attachment: scroll, scroll;
    background-clip: border-box, border-box;
    background-origin: border-box, border-box;
    position: relative;
}

/* 時間帯別背景設定 */
/* 22時から翌7時：夜間モード */
#chat-area.nighttime {
    background: 
        linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)),
        url('image/js_image/chara_002-g.jpg') !important;
    background-size: calc(100% + 2px) calc(100% + 2px), cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, center center !important;
    background-attachment: scroll, scroll !important;
    background-clip: border-box, border-box !important;
    background-origin: border-box, border-box !important;
}

/* 7時から23時：日中モード（デフォルト） */
#chat-area.daytime {
    background: 
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.93)),
        url('image/js_image/chara_001-g.jpg') !important;
    background-size: calc(100% + 2px) calc(100% + 2px), cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, center center !important;
    background-attachment: scroll, scroll !important;
    background-clip: border-box, border-box !important;
    background-origin: border-box, border-box !important;
}

#input_text {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    height: 112px;
}

/* スクロールバーの共通スタイル */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* ★ スクロールバーのコーナー部分を追加 */
::-webkit-scrollbar-corner {
    background: #ffffff; /* bodyの背景色と同じダークカラー */
}

/* ★ スクロールバーのトラック部分も明示的に定義 */
::-webkit-scrollbar-track {
    background: #ffffff; /* bodyの背景色と同じダークカラー */
}

#input-form {
    display: flex;
    flex-direction: column; /* 縦並びに変更 */
    gap: 5px; /* テキストエリアとボタンコンテナの間隔 */
    flex-shrink: 0; /* 内容が増えてもコンテナ自体は縮まない */
    width: 100%;
    box-sizing: border-box;
}

#user-input {
    width: 100%; /* 幅を100%に */
    height: 1.8em; /* JavaScriptで調整される */
    overflow-wrap: break-word;
    resize: none;
    white-space: pre-wrap;
    box-sizing: border-box;
    overflow-y: hidden;
    padding: 8px; /* プレースホルダと枠との間の余白を追加 */
    /* font-size と font-family は共通スタイルから継承される想定 */
}

#word-input,
#make_sentence_input,
#imageURL,
#articleURL {
    width: 100%;
    height: 1.8em;
    overflow-wrap: break-word;
    resize: none;
    white-space: pre-wrap;
    box-sizing: border-box;
    overflow-y: hidden;
    margin-bottom: 5px;
}

#input_text, /* #input_text は translation_tab 内なので影響範囲外 */
#user-input,
#word-input,
#make_sentence_input,
#chat-area, /* #chat-area のフォント指定は個別IDセレクタの方が優先度が高い */
#imageURL,
#articleURL {
    font-size: 14px;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}


/* [画像解析]ドラッグ&ドロップ */
#file-drag-drop {
  border: 1px dashed #303030; /* dashedからsolidに変更、色も控えめに */
  border-radius: 8px; /* 角を少し丸くしてモダンに */
  padding: 15px; /* パディングを少し小さくして圧迫感を減らす */
  text-align: center;
  cursor: pointer;
  color: #666666; /* テキスト色をより控えめに */
  background-color: rgba(216, 216, 216, 0.3); /* 薄い背景色を追加してなじませる */
  margin-top: 0px;
  margin-bottom: 15px; /* 下部のマージンを追加 */
  transition: all 0.2s ease; /* スムーズな遷移効果を追加 */
  font-size: 14px; /* フォントサイズを少し小さく */
}

/* ホバー時のスタイルを追加 */
#file-drag-drop:hover {
  background-color: rgba(184, 184, 184, 0.4); /* 背景を少し暗く */
  border-color: #404040; /* ボーダー色を少し暗く */
  color: #666666;
}

#file-drag-drop.dragover {
  background-color: rgba(158, 158, 158, 0.5); /* ドラッグオーバー時はさらに暗く */
  border-color: #333333; /* ボーダー色をさらに暗く */
  color: #666666;
}

/* 画像解説タブの仕切り線 */
.image-section-divider {
  border: none;
  height: 2px;
  margin: 25px 0;
  width: 100%;
  background: linear-gradient(to right, 
    transparent 0%, 
    #303030 15%, 
    #404040 50%, 
    #303030 85%, 
    transparent 100%);
  position: relative;
  overflow: hidden;
}

.image-section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(80, 80, 80, 0.2) 50%, 
    transparent 100%);
  transform: translateY(-1px);
}

.image-section-divider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(50, 50, 50, 0.15) 50%, 
    transparent 100%);
}

/* キャプション用 */
#captionResult {
    font-size: 24px;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", "Arial", sans-serif;
    color: #3a3a3a; /* テキスト色を暗く変更 */
    /* color: #282828; */
    font-style: normal;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); */
    cursor: pointer; /* ★ マウスカーソルをポインターに変更 */
    /* ★ テキスト選択を無効化 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none; /* ★ iOS Safariの長押し時のコールアウトを無効化 */
    -webkit-tap-highlight-color: transparent; /* ★ タップ時のハイライトを無効化 */
    
    display: inline-block; /* インラインブロックに変更 */
    max-width: 100%;      /* 親要素の幅を最大とする */
    box-sizing: border-box;

    white-space: normal;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    word-break: break-all; 
    line-break: anywhere; 
    text-align: left; /* ブロック内部は左揃え */
    /* width: 100%; は inline-block では意図通りに機能しないため削除またはコメントアウト */
}

/* ★ 追加: キャプション再生中のスタイル */
#captionResult.playing-caption {
    /* color: #222222; */ /* 通常より明るい色に変更 ← コメントアウトまたは削除 */
}

/* ★ 追加: 再生中のキャプションのルビの色 */
#captionResult.playing-caption ruby rt {
    /* color: inherit; */ /* 親要素の文字色を継承 (明るい色になる) ← コメントアウトまたは削除 */
}

#captionResult ruby { 
    line-height: initial; 
}

#captionResult ruby rt {
  font-size: 14px; /* 70% of 20px */
  font-weight: normal;
  color: #888888;
  opacity: 1;
}

/* --- Per-language copy UI for captions --- */
#captionResult .caption-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

#captionResult .caption-row .audio-text-part {
    flex: 1 1 auto;
    min-width: 0;             /* 重要: フレックス内で折り返しを許可 */
    white-space: normal;      /* 明示的に改行許可 */
    overflow-wrap: anywhere;  /* 長い連続文字も折り返す */
    word-break: break-word;
}

#captionResult .caption-row-gap { height: 16px; }

/* 極小ボタン列（copy の下に ? を縦並び） */
#captionResult .caption-mini-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
}

#captionResult .copy-mini-btn,
#captionResult .query-mini-btn {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    min-width: 1.1em;
    min-height: 1.1em;
    padding: 0;
    margin: 2px 0 0 0; /* コンテナで左オフセット */
    border: none;
    background: transparent;
    color: #ccc;
    opacity: 0.25; /* 背景に溶け込む程度に控えめ */
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
    /* 微調整: レンダリング差異を吸収 */
    transform: translateY(0); /* 追加のオフセットが必要なら 2px 等に変更 */
}

#captionResult .copy-mini-btn:hover,
#captionResult .copy-mini-btn:active,
#captionResult .copy-mini-btn:focus,
#captionResult .query-mini-btn:hover,
#captionResult .query-mini-btn:active,
#captionResult .query-mini-btn:focus {
    opacity: 0.6;
    color: #ddd;
    outline: none;
}

@media (hover: none) {
  #captionResult .copy-mini-btn,
  #captionResult .query-mini-btn { opacity: 0.35; }
}

/* キャプション画像/文字用 */
#image_output-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* center から flex-start に変更 */
    text-align: center;
    /* background-color: #f8f8f8; */
    background-color: #f8f8f8; /* 背景をライトに変更 */
    width: 100%;
    /* height: 434px; */
    /* min-height: 434px; */
    /* min-height: 600px; */
    overflow-y: hidden;
    overflow-x: hidden; /* 追加: 水平方向のはみ出しをクリップ */
    border: none;
    border-radius: 8px;
    /* padding: 20px; */
    padding-top: 0px;    /* 上部のパディングを減らす (例: 10px) */
    padding-right: 20px;  /* 左右のパディングは維持 */
    padding-bottom: 20px; /* 下部のパディングは維持 */
    padding-left: 20px;   /* 左右のパディングは維持 */
    /* padding-top: 20px; */
    margin-bottom: 10px;
    box-sizing: border-box;
}

#inputCaptionImage {
    /* width: 100%; */
    width: auto;
    /* max-width: 700px; */
    max-width: 100%;
    height: auto;
    max-height: 415px;
    /* max-height: 90%; */
    /* object-fit: contain; */
    /* border-radius: 4px; */
    
    /* タップハイライトとユーザー選択を無効化 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 単語カード内の各言語表示の共通スタイル */
#wordListContainer .word-card-lang {
  font-size: 22px; /* 基本の文字サイズ */
  color: #3a3a3a; /* ← この行を追加 (例: #aaa や #999 など、好みの色に調整してください) */
  /* 必要であれば、ここに追加の共通スタイルを記述 */
}

/* もし言語ごとに異なるスタイルが必要な場合は、以下のように個別指定も可能です */
/*
#wordListContainer .word-card-chinese {
  font-weight: bold; 
}
#wordListContainer .word-card-japanese {
  color: #aabbcc;
}
*/

/* 既存の単語カード内のルビのフォントサイズ調整 */
#wordListContainer div ruby rt {
  font-size: 16px;
  color: #606060; /* ← この行を追加 (例: #aaa や #999 など、好みの色に調整してください) */
}

/* 単語カードのホバースタイル */
.word-card {
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
  cursor: pointer;
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard */
  -webkit-tap-highlight-color: transparent; /* iOS Safariでのタップ時のハイライトも消す */
}

/* 通常時のホバースタイル */
.word-card:hover {
  background-color: #303030; /* 通常のカード背景より少し明るく */
  border-color: #4a4a4a;    /* 通常のカードボーダーより少し明るく */
}

/* 再生中のカードはホバーしてもスタイルが変わらないようにする */
.word-card.playing-word-card:hover {
  background-color: #e5e5e5; /* playing-word-card の背景色を維持 */
  border-color: #a5a5a5;    /* playing-word-card のボーダー色を維持 */
  /* color プロパティは playing-word-card の !important が優先されるのでここでは不要 */
}

/* 再生中のカードはホバーしてもスタイルが変わらないようにする */
.word-card.playing-word-card {
  background-color: #e5e5e5; 
  border-color: #a5a5a5;    
}

/* 再生中のカードの言語表示の色を変更 */
.word-card.playing-word-card .word-card-lang,
.word-card.playing-word-card .word-card-lang ruby rt,
.highlight-audio-lang { /* 再生中の言語を強調表示 */
    /* color: #FFD700; */ /* 例: ゴールド */
    /* text-shadow: 0 0 5px #FFD700; */ /* 例: 輝き効果 */
}

/* 共通のスタイル */
#send-btn,
#voice-input-btn,
#auto-input-btn {
    padding: 0px 0px;
    height: 29px;
    /* margin-right: 0px;
    margin-left: 0px; */
}

.app-icon {
    height: 38px;         /* タブバーの高さに合わせて大きく */
    width: auto;
    margin-right: 5px;
    display: block;
    padding: 0;
    cursor: pointer; /* Add this line */
    position: relative; /* 位置調整のため追加 */
    top: -4px;          /* 位置調整のため追加 (上に4px移動) */
    /* 影や背景でさらに目立たせたい場合↓ */
    /* background: #222; border-radius: 8px; */
  }

/* PC用のスタイル */
@media screen and (min-width: 768px) {
    /* チャットエリアの高さを調整 */
    #chat-form {
        height: calc(100svh - 125px); /* モバイルブラウザUI対応：小さいビューポート高さを使用 */
    }

    #send-btn {
        /* width: 11%; */ /* 削除 */
        font-size: 12px;
    }

    #voice-input-btn {
        /* width: 11%; */ /* 削除 */
        font-size: 12px;
    }

    #auto-input-btn {
        /* width: 11%; */ /* 削除 */
        font-size: 12px;
    }

    .tab button {
        padding: 4px 4px;
        font-size: 14px; /* PC表示の場合、フォントサイズを14pxに */
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* 中国語フォント優先 */
        font-weight: 500; /* フォントウェイトを明示的に指定 */
        line-height: 1.2; /* 行の高さを統一 */
        letter-spacing: 0.02em; /* 文字間隔を微調整 */
        text-rendering: optimizeLegibility; /* フォント描画を最適化 */
        -webkit-font-smoothing: antialiased; /* WebKit系でのフォント描画を改善 */
    }

    .app-icon {
        height: 45px;
        margin-right: 10px;
    }
}

/* スマホ用のスタイル */
@media screen and (max-width: 767px) {
    .app-name {
        font-size: 20px;
    }

    /* チャットエリアの高さを調整 */
    #chat-form {
        height: calc(100svh - 175px); /* モバイルブラウザUI対応：小さいビューポート高さを使用 */
    }

    #send-btn {
        /* width: 15%; */ /* 削除 */
        font-size: 12px;
    }

    #voice-input-btn {
        /* width: 20%; */ /* 削除 */
        font-size: 12px;
    }

    #auto-input-btn {
        /* width: 20%; */ /* 削除 */
        font-size: 12px;
    }

    /* 文章解説タブのボタンもスマホ用に統一 */
    #voice-input-button,
    #clear-button {
        font-size: 12px !important;
        padding: 6px 12px !important;
        height: 32px !important;
        box-sizing: border-box !important;
        min-width: 70px !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
    }

    /* スマホでのチャット入力欄のカーソル位置調整 */
    #user-input {
        line-height: 1.4 !important;
        padding: 6px 8px !important;
    }

    #captionResult {
      font-size: 16px;
    }
  
    #captionResult ruby rt {
      font-size: 12px;
    }

    /* 単語カード内の各言語表示の共通スタイル */
    #wordListContainer .word-card-lang {
      font-size: 16px; /* 基本の文字サイズ */
    }

    /* 既存の単語カード内のルビのフォントサイズ調整 (これは残す) */
    #wordListContainer div ruby rt {
      font-size: 12px;
    }

    /* .chat-box の height 指定は #chat-area で管理するため、ここでは不要になるか、
       #chat-area に対して !important を使うか検討が必要です。
       ただし、!important は極力避けるべきです。
       #chat-form の height と #chat-area の flex-grow で制御するのが望ましいです。*/
    /*
    .chat-box {
        height: calc(100vh - 300px) !important;
    }
    */

    /* [画像解析]ドラッグ&ドロップ (スマホ用) */
    #file-drag-drop {
      padding: 12px; /* モバイルではさらに小さく */
      font-size: 13px; /* フォントサイズも調整 */
      margin-bottom: 10px;
    }
    .send-to-bot-btn {
      font-size: 12px;
    }

    /* ★ 目印の円のレスポンシブ対応 */
    #coordinate-marker-outer {
        width: 80px !important;
        height: 80px !important;
    }
    #coordinate-marker-inner {
        width: 40px !important;
        height: 40px !important;
    }

    /* スマホ用の背景画像設定 - 縦長画面でも全体をカバー */
    #chat-area {
        background-size: calc(100% + 2px) calc(100% + 2px), cover !important;
    }
    
    /* スマートフォン用時間帯別背景設定 - 画像を拡大 */
    #chat-area.nighttime {
        background-size: calc(100% + 2px) calc(100% + 2px), cover !important;
        background-position: center center, 30% center !important;
    }

    #chat-area.daytime {
        background-size: calc(100% + 2px) calc(100% + 2px), cover !important;
    }
}

/* チャットエリアの色 */
/* .chat-box の定義は #chat-area のIDセレクタに統合したため、こちらはコメントアウトまたは削除を検討 */
/*
.chat-box {
    width: 100%;
    height: calc(100vh - 250px);
    overflow-y: auto;
    background-color: #222222;
    border: none;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 5px;
}
*/

.message {
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    z-index: 10; /* 背景画像の上に表示されるようにz-indexを追加 */
    opacity: 0.9;
}

/* ウェルカムメッセージを最前面に表示 */
.message.welcome {
    z-index: 1100; /* JLPTボタン (1000) より高い値 */
    margin-top: 4px; /* 右上のN2-N5/☆ボタンが押せるように下げる */
}

.message.me {
    /* background-color: #2c2c2c; */
    background-color: #eeeeee;
    /* color: rgb(30, 30, 30); */
    color: #303030; /* テキスト色を暗く変更 */
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 0px;
    width: calc(100% - 0px);
    box-sizing: border-box;
}

.message.bot {
    /* background-color: #e9e9e9; */
    background-color: #f8f8f8;
    /* color: rgb(30, 30, 30); */
    color: #303030; /* テキスト色を暗く変更 */
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 0px;
    width: calc(100% - 0px);
    box-sizing: border-box;
}

/* ★ 新しい情報メッセージ用のスタイル */
.message.info {
    background-color: #f0f0f0; /* 通常のbotメッセージより少し暗い背景 */
    color: #505050;          /* テキスト色をグレーに */
    border: 1px dashed #999999; /* ボーダー色も調整 */
    border-radius: 5px;
    padding: 8px;
    margin-top: 2px; /* 上のメッセージとの間隔 */
    margin-bottom: 2px; /* 下のメッセージとの間隔 */
    width: calc(100% - 0px);
    box-sizing: border-box;
    text-align: left; /* 通常のメッセージ同様左揃え */
    transition: background-color 0.2s ease-in-out; /* ★ ホバー時のトランジションを追加 */
    -webkit-tap-highlight-color: transparent; /* ★ タップ時のハイライトを無効化 */
    user-select: none; /* ★ テキスト選択も無効化 (任意) */
}

/* ★ 情報メッセージ内の共通ルビスタイル（必要であれば） */
.message.info .text ruby rt {
    color: #666666; /* 通常時のルビの共通色 */
    /* font-size: 0.7em; */ /* ← 共通のサイズ指定はコメントアウトまたは削除 */
}

/* ★ 情報メッセージ内の日本語ルビのスタイル */
.message.info .text ruby rt.ruby-ja {
    font-size: 0.6em; /* 例: 日本語ルビは少し小さめ */
}

/* ★ 情報メッセージ内の中国語ルビのスタイル */
.message.info .text ruby rt.ruby-zh {
    font-size: 0.6em; /* 例: 中国語ルビは少し大きめ */
}

.message.info .text { /* infoメッセージ内のテキスト要素のスタイル調整 */
    /* 必要に応じてフォントスタイルなどを調整 */
}
.message.info .text ruby { /* infoメッセージ内のルビタグのスタイル調整 */
    font-size: 1.3em; /* 通常より少しだけ大きく表示。親文字のサイズに影響 */
}

/* ★★★ 追加：前面表示時のルビの色を変更 ★★★ */
.message.info.info-highlight-first-tap .text ruby rt {
    color: #555555; /* 前面表示時のルビの色 (通常より暗く) */
}

/* ★ ホバー時のスタイル */
.message.info:hover {
    background-color: #e8e8e8; /* ホバー時に背景を少し暗く */
    /* color: #4d4d4d; */ /* 必要であれば文字色も調整 */
    border-style: solid; /* ホバー時に点線を実線に変更（任意） */
    cursor: pointer; /* ★ マウスカーソルをポインターに変更 */
}

/* ★★★ 更新：infoメッセージ初回タップ時の前面表示スタイル ★★★ */
.message.info.info-highlight-first-tap {
    position: relative; /* z-index を有効にするために必要 */
    z-index: 100;       /* 他のメッセージより前面に表示 */
    background-color: #f8f8f8; /* より明るい背景色 */
    color: #303030;          /* より暗い文字色 */
    opacity: 0.9; /* 少し半透明にする (値は0.0から1.0の範囲で調整) */
    /* padding や width/height は変更しないことで枠のサイズを維持 */
}

/* ★★★ 追加：通常ホバー時のテキスト拡大 ★★★ */
.message.info:hover .text {
    /* transform: scale(1.2); */
    transform-origin: left center; /* 左端中央を基点に拡大 */
    /* 既存の .info-highlight-first-tap .text のスタイルと合わせる */
}


/* 前面表示時のテキストとルビを transform: scale() で少し大きくする */
.message.info.info-highlight-first-tap .text {
    /* transform: scale(1.2); 1.2倍に拡大 (ユーザー指定の値) */
    transform-origin: left center; /* 左端中央を基点に拡大。これにより左揃えを維持しつつ拡大 */
    /* display: block; は .text がdiv要素であればデフォルトなので通常は不要 */
    /* 注意: scaleを使用すると、テキストが鮮明でなくなる場合があります。
       また、拡大した要素が他の要素と重なる可能性がありますが、
       今回はz-indexで前面に出ているため、問題になりにくい想定です。 */
}

/*
   transform: scale() を使用した場合、ルビも親要素と一緒に拡大されます。
   個別のフォントサイズ調整は基本的に不要になります。
   もし、拡大後のルビの見た目に違和感がある場合は、
   font-sizeではなく、同様に transform: scale() をネストして微調整するか、
   別の方法を検討する必要がありますが、まずはこの状態でご確認ください。
*/

/* ★★★ 情報メッセージ再生中のスタイル (修正) ★ */
.message.info.playing {
    /* background-color: #cacaca; */ /* 背景色の変更をコメントアウト */
    border-color: #666666;     /* ボーダー色は濃いめのグレーなどに (既存のままでも可) */
    border-style: solid;       /* 点線を実線に変更 */
    /* color: #484848; */            /* 文字色の変更をコメントアウト */
    cursor: default;           /* 再生中はクリックできないことを示す (任意) */
}
.message.info.playing:hover { /* 再生中にホバーしてもスタイルが変わらないように */
    /* background-color: #cacaca; */ /* 背景色の変更をコメントアウト */
    border-color: #666666;     /* 上記 playing と同じボーダー色 */
    border-style: solid;       /* 上記 playing と同じボーダースタイル */
    /* color: #484848; */            /* 文字色の変更をコメントアウト */
    cursor: default;
}

.message-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat_image {
    max-width: 100%;
    /* max-height: 100%; */
    max-height: 300px;
    width: auto;
    height: auto;
}


/* チャット音声再生速度スライダー */
.slider-container {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0px;
}

.slider-label {
    margin-right: 10px;
}

input[type="range"] {
    width: 120px;
    height: 8px;
    border-radius: 4px;
    /* background: #121212; */
    background: #e0e0e0;
    /* border: 1px solid #6a6a6a; */
    border: 1px solid #aaaaaa;
    outline: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* background: #121212; */
    background: #ffffff;
    /* border: 2px solid #6a6a6a; */
    border: 2px solid #999999;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* background: #121212; */
    background: #ffffff;
    /* border: 2px solid #6a6a6a; */
    border: 2px solid #999999;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Pro code */
.point-procode-container {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    gap: 10px; /* 要素間のスペース */
}

/* 今日の利用可能ポイント */
#secret-code-div,
#remain-point {
    font-size: 14px;
    /* color: #3a3a3a; */
    color: #303030; /* テキスト色を暗く変更 */
    margin-top: 3px;
}
#secret-code {
    background-color: #ffffff; /* 背景をライトに変更 */
    color: #303030;            /* テキスト色を暗く変更 */

}

/* オートフィル時のスタイルを上書き */
#secret-code:-webkit-autofill,
#secret-code:-webkit-autofill:hover,
#secret-code:-webkit-autofill:focus,
#secret-code:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;    /* 背景色をライトモードに維持 */
    -webkit-text-fill-color: #303030 !important;                    /* 文字色を黒に維持 */
    caret-color: #303030 !important;                                /* キャレット（カーソル）色を黒に設定 */
    background-color: #ffffff !important;                           /* 背景色を強制的に設定 */
    /* border: 1px solid #cccccc !important;                       ボーダーの色を維持 */
    /* transition: background-color 0.5s ease-in-out !important;   トランジションを調整 */
}

/* フォーカス時のスタイルを維持 */
#secret-code:focus,
#secret-code:hover,
#secret-code:active {
    /* background-color: #222222 !important; ダークモードの背景色を維持 */
    /* color: #303030 !important;            文字色を明るく変更 */
    /* border: 1px solid #4a4a4a !important; ボーダーの色を維持 */
    /* box-shadow: none !important;          不要なボックスシャドウを削除 */
    outline: none !important;             /* デフォルトのアウトラインを削除 */
}

/* エラーメッセージ */
#error-message {
    font-size: 14px;
}

/* 開発者 */
#developer {
    font-size: 14px;
}



/* style_result.css */
/* .ruby-container { */
/* 原文とルビの適切な表示を維持： */
/* 要素をインライン要素として表示しつつ、その要素自体にはブロック要素の特性を持たせることができます。 */
/* これにより、子要素に適用されたスタイルが他の要素と干渉することなく、適切に表示されることが保証されます。 */
/* インラインブロック要素は、他のインライン要素と同じ行に表示されますが、内部ではブロック要素のように振る舞います。 */
/* このため、ルビが適切に縦に並ぶようになります。 */
/* display: inline-block; */

/* text-align: center; */
/* } */

.ruby-pinyin {
    /* ルビを新しい行に強制し、原文の下にルビを配置 */
    display: block;
    font-size: 12px;
}



.ruby {
    position: relative;
    /* font-size: 1rem; */
    /* 原文とルビの適切な表示を維持： */
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    margin-right: 5px;
}

.ruby::before {
    content: attr(data-animal);
    position: absolute;
    top: -24px;
    left: 0;
    visibility: hidden;
    font-size: 1.2rem;
    transform: scaleX(-1);
    animation: jumping 1s infinite;
}

.ruby[data-animal]:before {
    content: attr(data-animal);
    font-size: 16px;
    /* margin-left: 4px; */
}

.ruby.active::before {
    visibility: visible;
}

.ruby.highlighted {
    /* color: red; */
    /* color: #ff69b4; */
    color: #ffb6c1;
    /* color: #ffc0c9; */
    /* color: rgb(217, 181, 195) !important; */
    font-weight: normal;
}

@keyframes jumping {

    0%,
    100% {
        top: -24px;
        transform: scaleX(-1) translateY(0);
    }

    50% {
        top: -32px;
        transform: scaleX(-1) translateY(-8px);
    }
}

th,
td {
    text-align: left;
    vertical-align: middle;
}

th,
h2 {
    font-size: 16px;
    font-weight: normal;
    /* color: #3a3a3a; */
    color: #303030; /* 見出しの色を黒に変更 */
}

/* 発音・翻訳・重要表現・改善点の幅調整 */
h2 {
    margin-bottom: 0;
}

#rubies-result,
#translation-result,
#important_expression-result,
#improvement_text-result,
#important_words-result,
#word_translation-result,
#word_sentence-result,
#make_sentence_result_text,
#usage_tab_chat,
#usage_tab_image,
#usage_tab_sentence,
#usage_tab_word,
#usage_make_sentence,
#usage_tab_point_procode,
#privacypolicy {
    /* border: 1px solid #ccc; */
    /* background: #f8f8f8; */
    border: 1px solid #cccccc; /* ボーダー色をライトに変更 */
    background: #f8f8f8; /* 背景色をライトに変更 */
    border-radius: 4px;
    padding-left: 2px;
    margin-bottom: 6px;
    min-height: 23px;
    min-width: 90%;
    word-wrap: break-word;
}

#privacypolicy {
    white-space: pre-wrap;
}

/* 音声認識結果が表示される領域をボックスで囲む */
.result-box {
    /* background: #f8f8f8; */
    /* border: 1px solid #ccc; */
    background-color: #f8f8f8; /* 背景色をライトに変更 */
    color: #303030; /* テキスト色を暗く変更 */
    border: 1px solid #cccccc; /* ボーダー色をライトに変更 */
    border-radius: 4px;
    /* padding: 10px; */
    margin-bottom: 10px;
    min-height: 10px;
    word-wrap: break-word;
}

/* 文章解説タブ内のボタン */
.convert-button {
    /* background-color: #e9e9e9; */
    /* border: 1px solid #c4c4c4; */
    /* color: #3a3a3a; */
    /* background-color: #303030; 背景色をダークに変更 */
    /* color: #303030; テキスト色を明るく変更 */
    /* border: 1px solid #4a4a4a; ボーダー色をダークに変更 */
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 0px 0px;
    /* cursor: pointer; */
    border-radius: 3px;
}


/* [記事解説]要約出力領域～sen to botボタン */
/* [記事解説]解説出力領域 */
/* [記事解説]記事出力領域 */
#article_output_summarize_result,
#article_output_exp_result,
#article_output_collection_result,
#article_output_words_result {
    /* background-color: #f8f8f8; */
    /* border: 1px solid #ccc; */
    background-color: #f8f8f8; /* 背景色をライトに変更 */
    color: #303030; /* テキスト色を暗く変更 */
    border: 1px solid #cccccc; /* ボーダー色をライトに変更 */
    border-radius: 4px;
    padding-left: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 46px;
    min-width: 90%;
    word-wrap: break-word;
    /* height: 434px; */
    /* min-height: 434px; */
    overflow-y: hidden;
    /* border: none; */
    padding-bottom: 20px;
    /* padding-top: 20px; */
    margin-bottom: 6px;
    /* margin-bottom: 10px; */
    box-sizing: border-box;
}


/* [記事解説]要約・解説・記事出力領域 */
#article_summarize_result,
#article_exp_result,
#article_collection_result,
#article_words_result,
#article_trend_result {
    text-align: left;
    width: 100%;
}

/* [記事解説]サイトタイトル（【】で囲まれた部分）の表示改善 */
#article_collection_result > br + a[target="_blank"] {
    font-size: 1.2em; /* フォントサイズを大きく */
    color: #252525; /* 白色で見やすく */
    font-weight: bold; /* 太字 */
}

/* 記事収集リンクの色設定 - より具体的なセレクタで優先度を上げる */
#article_collection_result a.article-link-generated {
    color: rgb(94, 94, 94) !important; /* ワード生成済み記事の色（暗いグレー） */
}

#article_collection_result a.article-link-ungenerated {
    color: rgb(199, 199, 199) !important; /* 未生成記事の色（明るいグレー） */
}


/* [記事解説]send to botボタン */
#article_send-to-bot-button {
    display: block;
    margin: 0 auto;
    margin-top: 14px;
}

/* 記事解説チェックボックス */
.checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 14px;
    vertical-align: top;
    user-select: none;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #3a3a3a;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    /* background-color: #ccc; */
    background-color: #4a4a4a;
    border-radius: 3px;
    margin-top: 0px;
    transform: translateY(-1px);
    transform: translateX(5px);
    /* 垂直方法の調整 */
}

/* リンク解析 */
.link-analysis-label {
    color: #303030; /* ダークモード用の明るい色 */
}

.checkbox-container:hover input~.custom-checkbox {
    background-color: #bbb;
}

.checkbox-container input:checked~.custom-checkbox {
    background-color: #888;
}

.custom-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked~.custom-checkbox:after {
    display: block;
}

.checkbox-container .custom-checkbox:after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #303030;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 指南 */
#usage_tab ul {
    padding-left: 30px;
}

#usage_tab p {
    line-height: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#usage_tab li>p:first-child {
    margin-top: 3px;
}

#usage_tab li>p:last-child {
    margin-bottom: 20px;
}

/* --- 新しいスクロール単語ルビ表示調整 (日本語・中国語共通化) --- */
.scrolling-word {
    /* 単語全体の行高と垂直方向の配置を調整 */
    /* line-height は ruby 要素内で調整するためここでは標準に近くしておくか、auto */
    line-height: 1.5; /* ベースの行高を少し確保 */
    display: inline-block;
    vertical-align: baseline; /* ベースライン揃えを基準にする */
    margin-bottom: 0.1em;
    /* padding-top は削除または 0 に */
    padding-top: 0;
    box-sizing: border-box;
  }
  
  .scrolling-word ruby {
    /* ruby要素はインラインレベルで表示 */
    display: inline-ruby; /* 標準的なルビ表示 */
    /* vertical-align を微調整して高さを合わせる */
    vertical-align: text-top; /* ルビが上に付くように試す */
    line-height: 1.8; /* ルビを含めた高さをここで確保 */
    text-align: center; /* ルビの中央揃え */
    ruby-align: center; /* ルビを中央揃え（対応ブラウザ向け） */
    
    /* 中国語に最適化されたフォント設定を継承 */
    font-family: inherit;
    font-weight: inherit;
  }
  
  .scrolling-word ruby rt {
    /* ルビ文字(rt)のスタイル */
    font-size: 0.55em; /* サイズを少し小さめに */
    color: #424242;
    line-height: 1; /* ルビ自体の行高は詰める */
    text-align: center;
    user-select: none;
    /* ルビと親文字の間隔調整 */
    /* ruby-position: over; はデフォルトだが明示 */
    padding-bottom: 0px; /* 親文字との間にわずかなスペース */
    /* display: block; は inline-ruby の場合不要なことが多い */
    white-space: nowrap;
    
    /* 中国語ピンイン用フォント設定 */
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* 中国語表示時（rubyタグがない場合）も高さを合わせる */
  .scrolling-word:not(:has(ruby)):not([lang="ja"]):not([lang="ja-JP"]) {
    vertical-align: baseline; /* ベースラインを揃える */
    line-height: 1.8; /* rubyがある場合と同じ高さを確保 */
    display: inline-block; /* 念のため */
    /* padding-top: calc(0.55em * 1 + 0.1em); */ /* ルビの高さ分のスペースを確保？ */
    /* 上記paddingはline-heightで確保するため不要なはず */
    
    /* 中国語フォント設定 */
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* --- ここまで新しいスタイル --- */

.app-title {
  font-size: 12px;
  padding: 4px 8px;
  color: #666666;
  display: inline-block;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 変更: space-betweenで両端配置 */
  min-height: 40px;     /* タブバーの高さに合わせて調整 */
  background: #ffffff;
  padding: 0 0 0 4px;
}

.input-buttons-container {
  display: flex;
  justify-content: space-between; /* ボタンを均等に配置 */
  gap: 2px; /* ボタン間の間隔 */
}

.input-buttons-container button {
  flex-grow: 1; /* ボタンが利用可能なスペースを均等に分け合う */
  /* 必要に応じて、最小幅や最大幅を設定することも可能です */
  /* min-width: 80px; */
}

/* 翻訳結果のテキストとボタン間の余白調整 */
.language-section p {
  margin-top: 0px;
  margin-bottom: -2px;
}

.language-section .copy-button {
  margin-top: 0px;    /* ボタン上の余白を小さくします。お好みに応じて調整してください。 */
  margin-right: 4px;  /* ボタン同士の右側の余白を設定します。 */
}

/* 各翻訳セクション内の最後のボタンには右マージンが不要なため削除します */
.language-section .copy-button:last-child {
  margin-right: 0;
}

/* 翻訳セクション間にマージンを追加して改行のように見せる */
.language-section + .language-section {
  margin-top: 0.8em; /* 1行より少し狭い程度のスペース。お好みで調整してください。 */
}

/* スクロール単語内の短文用スタイル */
.scrolling-word span.scrolling-sentence-divider {
    /* color: #888; */ /* 例：区切り文字の色 */
    /* margin: 0 0.2em; */ /* 例：区切り文字の左右マージン */
    /* color: rgb(217, 181, 195) !important; */
}

.scrolling-word span.scrolling-sentence {
    font-size: 0.8em !important; /* 親要素に対して80%のサイズ、!importantで強制 */
    /* color: #ababab !important;   薄いグレー、!importantで強制 */
    /* color: rgb(217, 181, 195) !important; */
    /* color: rgb(203, 179, 100) !important; */
    /* color: rgb(150, 202, 143) !important; */
    color: rgb(133, 185, 125) !important;
    /* background-color: red !important; */ /* デバッグ用：一時的に背景を赤に */
    
    /* 中国語に最適化されたフォント設定 */
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Microsoft YaHei', 'SimHei', 'Arial Unicode MS', sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.scrolling-word span.scrolling-sentence ruby {
    /* 親の .scrolling-sentence の font-size と color を継承するはず */
    font-family: inherit;
    font-weight: inherit;
}

.scrolling-word span.scrolling-sentence ruby rt {
    font-size: 0.6em !important; /* 短文の文字サイズのさらに80% */
    /* color: #666666 !important;   短文のルビの色も薄く、!importantで強制 */
    /* color: rgb(217, 181, 195) !important; */
    /* color: rgb(203, 179, 100) !important; */
    /* color: rgb(150, 202, 143) !important; */
    color: rgb(133, 185, 125) !important;
    
    /* 中国語ピンイン用フォント設定 */
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 200;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ★ 追加：音声再生中のスクロール単語のスタイル */
.scrolling-word.playing {
  color: #202020; /* 通常より明るい白で表示 */
  /* filter: brightness(1.1); */ /* 必要であれば明るさフィルターも調整 */
  transition: color 0.2s ease-in-out; /* 色の変化を滑らかに */
}

/* ★ 追加：音声再生中のスクロール単語のルビのスタイル */
.scrolling-word.playing ruby rt {
  color: #353535 !important; /* 通常より明るい色で表示 (例: #222222 や #ffffff) */
  transition: color 0.2s ease-in-out; /* 色の変化を滑らかに */
}

/* ★ 追加：音声再生中のスクロール単語の短文内ルビのスタイル */
.scrolling-word.playing span.scrolling-sentence {
  color: rgb(174, 233, 165) !important;
  transition: color 0.2s ease-in-out;
}
/* ★ 追加：音声再生中のスクロール単語の短文内ルビのスタイル */
.scrolling-word.playing span.scrolling-sentence ruby rt {
  color: rgb(174, 233, 165) !important;
  transition: color 0.2s ease-in-out;
}

/* 画像解説タブのボタンコンテナスタイル */
.image-buttons-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 2px; /* 上の要素との間隔 */
  margin-bottom: 10px; /* 下の要素との間隔を正の値に変更 */
}

.image-buttons-container button {
  padding: 6px 0px;
  font-size: 14px; /* フォントサイズを他のボタンと合わせる */
  overflow: hidden;         /* はみ出したテキストを隠す */
  text-overflow: ellipsis;  /* はみ出したテキストを...で表示 */
  white-space: nowrap;      /* テキストを折り返さない */
  box-sizing: border-box;   /* paddingとborderをwidthに含める */
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    .image-buttons-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .image-buttons-container button {
        font-size: 12px;
    }
}



#image_spinner {
    display: none !important; /* スピナーを常に非表示にする */
}

/* 自動ワード生成の進捗表示エリア */
#article_batch_generation_progress {
    background: linear-gradient(135deg, rgba(245, 245, 245, 0.8) 0%, rgba(250, 250, 250, 0.8) 100%);
    border: 1px solid rgba(80, 80, 80, 0.5);
    border-radius: 8px;
    margin-top: 15px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#article_batch_generation_status {
    color: #4CAF50;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
    word-wrap: break-word;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#article_batch_generation_log {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    color: #ccc;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.3;
    font-family: 'Courier New', monospace;
    border: 1px solid rgba(60, 60, 60, 0.5);
}

/* 画像上に単語カードを表示するオーバーレイ */
.image-word-overlay {
    position: absolute;
    /* top, left, transform, width, height はJavaScriptで動的に設定される */
    background: transparent; /* 背景を透明に変更 */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: 8px;
    pointer-events: none; /* 背景クリックを無効化 */
    transition: opacity 0.3s ease; /* スムーズな非表示のためのトランジション */
}

.image-word-overlay.active {
    display: flex;
    opacity: 1;
}

.image-word-overlay:not(.active) {
    opacity: 0;
}

.overlay-word-card {
    background: linear-gradient(135deg, rgba(240, 240, 240, 0.85) 0%, rgba(250, 250, 250, 0.85) 100%);
    /* border: 2px solid rgba(63, 63, 63, 0.65); */
    border-radius: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 35px;
    padding-right: 35px;
    text-align: center;
    /* max-width: 95%; 幅が狭くなるので一旦コメントアウト */
    max-height: 95%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    pointer-events: auto; /* カード自体はクリック可能 */
    backdrop-filter: blur(0px); /* 背景ぼかし効果なし */
    cursor: pointer; /* ホバー時にクリック可能なカーソルを表示 */
    /* ★ 単語カードを10px下に移動 */
    transform: translateY(-5%);
    min-width: 300px !important; /* 単語カードの最小幅 */
    flex-shrink: 0;   /* コンテナが狭くても縮まないようにする */
    z-index: 1000;
    -webkit-tap-highlight-color: transparent; /* ★ タップ時のハイライトを無効化 */
}

.overlay-word-card.fade-in {
    opacity: 1;
}

.overlay-word-card.fade-out {
    opacity: 0;
}

.overlay-word-text {
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 1.4;
    /* color: #282828; */
    color: #3a3a3a; /* テキスト色を暗く変更 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease; /* スムーズな変化を追加 */
    user-select: none; /* テキスト選択を無効にする */
    -webkit-user-select: none; /* Safari 用 */
    -moz-user-select: none; /* Firefox 用 */
    -ms-user-select: none; /* Internet Explorer/Edge 用 */
}

.overlay-word-text.chinese {
    font-size: 30px;
    font-weight: normal;
    /* color: #282828; */
    color: #3a3a3a; /* テキスト色を暗く変更 */
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    user-select: none; /* テキスト選択を無効にする */
    -webkit-user-select: none; /* Safari 用 */
    -moz-user-select: none; /* Firefox 用 */
    -ms-user-select: none; /* Internet Explorer/Edge 用 */
}

.overlay-word-text.japanese {
    font-size: 30px;
    /* color: #282828; */
    color: #3a3a3a; /* テキスト色を暗く変更 */
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    user-select: none; /* テキスト選択を無効にする */
    -webkit-user-select: none; /* Safari 用 */
    -moz-user-select: none; /* Firefox 用 */
    -ms-user-select: none; /* Internet Explorer/Edge 用 */
}

.overlay-word-text.english {
    font-size: 30px;
    /* color: #282828; */
    color: #3a3a3a; /* テキスト色を暗く変更 */
    font-style: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    margin-bottom: 0px;
    user-select: none; /* テキスト選択を無効にする */
    -webkit-user-select: none; /* Safari 用 */
    -moz-user-select: none; /* Firefox 用 */
    -ms-user-select: none; /* Internet Explorer/Edge 用 */
}

#imageWordOverlay {
    user-select: none; /* テキスト選択を無効にする */
    -webkit-user-select: none; /* Safari 用 */
    -moz-user-select: none; /* Firefox 用 */
    -ms-user-select: none; /* Internet Explorer/Edge 用 */
}

/* ★ 追加: オーバーレイ単語カード内の音声再生中の言語強調表示 */
.overlay-word-card .highlight-audio-lang,
.overlay-word-card .highlight-audio-lang ruby,
.overlay-word-card .highlight-audio-lang ruby rt,
#captionResult .highlight-audio-lang,
#captionResult .highlight-audio-lang ruby,
#captionResult .highlight-audio-lang ruby rt {
  color: #252525 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out; /* アニメーションをスムーズに */
  /* font-weight: 600 !important; 太字で強調 */
}

.overlay-word-text ruby {
    line-height: 1.6;
}

.overlay-word-text ruby rt {
    font-size: 0.7em;
    color: #666666;
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 進行状況インジケーター */
.overlay-progress {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    pointer-events: auto; /* プログレスドットはクリック可能 */
    transition: opacity 0.3s ease; /* プログレスドットの非表示も同期 */
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.7); /* 境界線も少し濃く */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    cursor: pointer; /* プログレスドットもクリック可能カーソル */
}

.progress-dot.active {
    background: #ececec;
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    /* スマホではJavaScriptで幅が動的に設定される */
    
    .overlay-word-card {
        padding-top: 6px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 6px;
        /* max-width: 98%; 幅が狭くなるのでコメントアウト */
        max-height: 80%;
        /* ★ スマホでは上方向への移動を少し減らす */
        transform: translateY(-7%);
        min-width: 180px !important;    /* 単語カードの最小幅 */
    }
    
    .overlay-word-text {
        font-size: 20px;
        margin-bottom: 0px;
        user-select: none; /* テキスト選択を無効にする */
        -webkit-user-select: none; /* Safari 用 */
        -moz-user-select: none; /* Firefox 用 */
        -ms-user-select: none; /* Internet Explorer/Edge 用 */
    }
    
    .overlay-word-text.chinese {
        font-size: 20px;
        margin-bottom: 8px;
        user-select: none; /* テキスト選択を無効にする */
        -webkit-user-select: none; /* Safari 用 */
        -moz-user-select: none; /* Firefox 用 */
        -ms-user-select: none; /* Internet Explorer/Edge 用 */
    }
    
    .overlay-word-text.japanese {
        font-size: 20px;
        margin-bottom: 8px;
        user-select: none; /* テキスト選択を無効にする */
        -webkit-user-select: none; /* Safari 用 */
        -moz-user-select: none; /* Firefox 用 */
        -ms-user-select: none; /* Internet Explorer/Edge 用 */
    }
    
    .overlay-word-text.english {
        font-size: 20px;
        margin-bottom: 0px;
        user-select: none; /* テキスト選択を無効にする */
        -webkit-user-select: none; /* Safari 用 */
        -moz-user-select: none; /* Firefox 用 */
        -ms-user-select: none; /* Internet Explorer/Edge 用 */
    }
    
    .overlay-progress {
        bottom: 10px;
        gap: 8px;
    }
    
    .progress-dot {
        width: 8px;
        height: 8px;
    }
}

/* 画像コンテナの相対位置設定 */
#image_output-result {
    position: relative; /* オーバーレイの基準となる相対位置 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* center から flex-start に変更 */
    text-align: center;
    /* background-color: #f8f8f8; */
    background-color: #f8f8f8; /* 背景をライトに変更 */
    width: 100%;
    /* height: 434px; */
    /* min-height: 434px; */
    /* min-height: 600px; */
    overflow-y: hidden;
    overflow-x: hidden; /* 追加: 水平方向のはみ出しをクリップ */
    border: none;
    border-radius: 8px;
    /* padding: 20px; */
    padding-top: 0px;    /* 上部のパディングを減らす (例: 10px) */
    padding-right: 20px;  /* 左右のパディングは維持 */
    padding-bottom: 20px; /* 下部のパディングは維持 */
    padding-left: 20px;   /* 左右のパディングは維持 */
    /* padding-top: 20px; */
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* 画像要素の設定 */
#inputCaptionImage {
    position: relative; /* オーバーレイの基準となる相対位置 */
    cursor: pointer;
    transition: transform 0.2s ease;
    /* width: 100%; */
    width: auto;
    /* max-width: 700px; */
    max-width: 100%;
    height: auto;
    max-height: 415px;
    /* max-height: 90%; */
    /* object-fit: contain; */
    /* border-radius: 4px; */
    
    /* タップハイライトとユーザー選択を無効化 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ★ 自動再生設定メニューのスタイル */
.autoplay-settings-overlay-style {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 背景を少し濃く */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.autoplay-settings-menu-style {
    background-color: #ffffff; /* ライトモード: 白ベース */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 影は軽めに */
    width: 90%;
    max-width: 280px; /* 最大幅を狭くする */
    text-align: center;
    border: 1px solid #cccccc; /* 薄めの境界線 */
}

.autoplay-settings-title-style {
    color: #303030; /* タイトル文字色 */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.autoplay-settings-button-style {
    background-color: #f0f0f0; /* ライト: 明るいグレー */
    color: #303030; /* ボタン文字色 */
    border: 1px solid #cccccc; /* 薄めの境界線 */
    padding: 6px 10px;
    margin: 5px; /* 上下左右のマージンを5pxに */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    display: block;
    width: calc(100% - 10px); /* 左右のマージン(5px * 2)分を引く */
    box-sizing: border-box;
    font-size: 16px;
}

.autoplay-settings-button-style:hover {
    background-color: #e8e8e8; /* ホバー時背景を少し濃く */
    border-color: #aaaaaa; /* ホバー時境界線 */
}

.autoplay-settings-close-button-style {
    background-color: #f0f0f0; /* ライト: 明るいグレー */
    color: #303030; /* 文字色は濃いグレー */
    border: 1px solid #cccccc; /* 薄めの境界線 */
    padding: 10px 15px; /* パディングを他のボタンと合わせる */
    margin-top: 20px; /* 上マージンは維持 */
    margin-right: 5px; /* 左右マージンを他のボタンと合わせる */
    margin-bottom: 5px; /* 下マージンを他のボタンと合わせる */
    margin-left: 5px; /* 左右マージンを他のボタンと合わせる */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    display: block;
    width: calc(100% - 10px); /* 左右のマージン(5px * 2)分を引く */
    box-sizing: border-box;
}

.autoplay-settings-close-button-style:hover {
    background-color: #e8e8e8; /* 「閉じる」ボタンホバー時背景 */
    border-color: #aaaaaa; /* 「閉じる」ボタンホバー時境界線 */
}

.autoplay-settings-subtitle-style {
    color: #484848; /* サブタイトル文字色 */
    margin-top: 20px; /* 通常のサブタイトルの上マージン */
    margin-bottom: 10px;
    font-size: 1.1em;
    text-align: left; /* 左寄せに変更 */
}

/* メニュー内の最初のサブタイトルのみ上マージンを調整 */
.autoplay-settings-menu-style > .autoplay-settings-subtitle-style:first-of-type {
    margin-top: 5px; 
}

.autoplay-order-control-container-style {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between; /* 要素間のスペースを均等に */
}

.autoplay-order-label-style {
    color: #555555; /* ラベル文字色 */
    margin-right: 10px;
    font-size: 0.95em;
}

.autoplay-order-select-style {
    background-color: #ffffff; /* select背景（白） */
    color: #303030; /* select文字色 */
    border: 1px solid #cccccc; /* select境界線 */
    border-radius: 4px;
    padding: 8px;
    flex-grow: 1; /* 幅を調整 */
    font-size: 0.9em;
}

.autoplay-order-select-style:focus {
    outline: none;
    border-color: #999999;
    box-shadow: 0 0 0 3px rgba(153, 153, 153, 0.2); /* フォーカス時のスタイル */
}

/* トグルスイッチのスタイルもグレースケールに寄せる */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 70px; /* 横幅をさらに広げる */
    height: 28px; /* 高さは元の提案に近い値に戻す */
    -webkit-tap-highlight-color: transparent; /* タップハイライト無効化 */
    user-select: none; /* テキスト選択無効化 */
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cccccc; /* ライト: OFF時の背景を明るく */
    transition: .4s;
    border-radius: 28px; /* 高さに合わせる */
    -webkit-tap-highlight-color: transparent; /* タップハイライト無効化 */
    user-select: none; /* テキスト選択無効化 */
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px; /* スライダーの高さ（スイッチの高さより少し小さい） */
    width: 20px;  /* スライダーの幅（円形を維持） */
    left: 4px; 
    bottom: 4px; /* スイッチ中央に来るように調整 */
    background-color: #ffffff; /* ライト: OFF時のスライダーの色を白に */
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #508050; /* ON時の背景を明るいグレーに */
}

input:checked + .slider:before {
    transform: translateX(40px); /* 移動距離を新しい幅に合わせて調整 (70 - 20 - 4 - 4) */
    background-color: #e8f5e8; /* ON時のスライダーの色を白っぽく */
}

/* 区切り線 */
.autoplay-settings-menu-style hr {
    border-color: #dddddd; /* ライト: 薄いグレー */
    margin: 20px 0; /* マージン調整 */
}

/* ★ 目印の円のスタイル定義 */
#coordinate-marker-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 画像外のマーカー表示を防ぐ */
    /* z-index: 899; */ /* 必要に応じて */
}

#coordinate-marker-outer {
    position: absolute;
    /* left と top はJSで設定 */
    width: 150px; /* PC向けデフォルト */
    height: 150px; /* PC向けデフォルト */
    background-color: rgba(255, 0, 0, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 900;
}

#coordinate-marker-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75px; /* PC向けデフォルト */
    height: 75px; /* PC向けデフォルト */
    background-color: rgba(255, 0, 0, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 901;
}

/* REQ-5.7: ログインモーダル・履歴モーダル共通スタイル */
.auth-modal {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  z-index: 2000; /* ★ 単語カードよりも手前に表示 */
  /* display: flex; */ /* JavaScript側で制御するため削除またはコメントアウト */
  align-items: center;
  justify-content: center;
  overflow-y: auto; /* コンテンツが多い場合にスクロール可能にする */
  /* REQ-5.7.1: モーダル全体で長押し時のデフォルト動作を無効化 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.auth-modal-content {
  background-color: #ffffff;
  margin: 5% auto;
  padding: 0;
  border: 1px solid #cccccc;
  border-radius: 8px;
  width: 90%;
  max-width: 520px;
  max-height: 94svh; /* モバイルブラウザUI対応：小さいビューポート高さを使用 */
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease-out;
  /* font-size: 14px; */
}

/* 履歴モーダル専用のスタイル - スクリーンサイズに収まるよう調整 */
#image-history-modal .auth-modal-content {
  margin: 2svh auto; /* marginを小さくしてスクリーン内に収める */
  max-height: 95svh; /* スクリーンの95%以内に制限 */
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 10px 24px;
  border-bottom: 1px solid #e0e0e0;
}

.auth-modal-header h2 {
  margin: 0;
  color: #4d4d4d;
  font-size: 20px;
  font-weight: 600;
}

.auth-close {
  color: #666666;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.auth-close:hover {
  color: #303030;
}

.auth-modal-body {
  padding: 20px 24px 24px 24px;
}

.auth-form {
  display: block;
}

.auth-input-group {
  margin-bottom: 16px;
}

.auth-input-group label {
  display: block;
  margin-bottom: 6px;
  color: #303030;
  font-size: 14px;
  font-weight: 500;
}

.auth-input-group input {
  width: 100%;
  padding: 12px;
  background-color: #ffffff;
  color: #303030;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input-group input:focus {
  outline: none;
  border-color: #999999;
  box-shadow: 0 0 0 3px rgba(153, 153, 153, 0.2);
}

.auth-input-group input::placeholder {
  color: #888888;
}

/* オートフィル時のスタイル */
.auth-input-group input:-webkit-autofill,
.auth-input-group input:-webkit-autofill:hover,
.auth-input-group input:-webkit-autofill:focus,
.auth-input-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #303030 !important;
  caret-color: #303030 !important;
  background-color: #ffffff !important;
}

.auth-submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #4d914d;
  color: #fcfcfc;
  border-color: #428042;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
}

.auth-submit-btn:hover {
  background-color: #458145;
  border-color: #3e773e;
  color: #fcfcfc;
}

.auth-submit-btn:active {
  background-color: #356a35;
}

.auth-switch {
  text-align: center;
  margin: 0;
  color: #555555;
  font-size: 14px;
}

.auth-switch a {
  color: #7b7b7b;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.auth-switch a:hover {
  color: #303030;
  text-decoration: underline;
}

.auth-error-message {
  background-color: rgba(220, 53, 69, 0.1);
  border: 1px solid #dc3545;
  border-radius: 6px;
  padding: 12px;
  margin-top: 16px;
  color: #ff6b7a;
  font-size: 14px;
  text-align: center;
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
  .auth-modal-content {
    margin: 10% auto;
    width: 95%;
    max-width: none;
    font-size: 14px;
  }
  
  /* 履歴モーダルのスマホ対応 */
  #image-history-modal .auth-modal-content {
    margin: 1svh auto; /* スマホではさらにmarginを小さく */
    max-height: 95svh; /* スマホでは画面の95%まで使用 */
    width: 98%; /* 横幅も広く */
  }
  
  .auth-modal-header,
  .auth-modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .user-menu-container {
    margin-right: 5px;
  }
  
  .user-menu-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  #username-display {
    font-size: 12px;
  }
}

/* オートフィル時の背景色フラッシュを防ぐ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #303030 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 認証モーダル内の入力フィールド専用 */
.auth-modal input:-webkit-autofill,
.auth-modal input:-webkit-autofill:hover,
.auth-modal input:-webkit-autofill:focus,
.auth-modal input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #303030 !important;
    background-color: #ffffff !important;
    color: #303030 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Firefox用 */
.auth-modal input:-moz-autofill {
    background-color: #ffffff !important;
    color: #303030 !important;
    box-shadow: none !important;
    box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #303030 !important;
}

.word-card .star-icon,
.overlay-word-card .star-icon {
    position: absolute;
    top: 5px;
    right: 12px;
    font-size: 28px;
    cursor: pointer;
    color: #888; /* Default color for empty star */
    transition: color 0.2s, transform 0.2s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 1; /* Ensure star is clickable */
    user-select: none; /* 防止文本被選中 */
    -webkit-user-select: none; /* Safari */
    -webkit-tap-highlight-color: transparent; /* ★ タップ時のハイライトを無効化 */
}

.word-card .star-icon:hover,
.description-star-icon:hover {
    /* transform: scale(1.2); */
}

.word-card .star-icon.starred,
#captionResult .star-icon.starred {
    color: #ffc107; /* Color for favorited star */
}

.description-star-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s, transform 0.2s;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    user-select: none; /* 防止文本被選中 */
    -webkit-user-select: none; /* Safari */
    -webkit-tap-highlight-color: transparent; /* ★ タップ時のハイライトを無効化 */
}

.description-star-icon:hover {
    /* transform: scale(1.2); */
}

.description-star-icon.starred {
    color: #ffc107; /* Gold color for favorited description */
}

/* Add a little "pop" effect on click */
.star-icon:active {
    /* transform: scale(1.2); */
}

/* ★★★ 色を強制的に上書きして問題を診断します ★★★ */
.word-card .star-icon.starred,
.overlay-word-card .star-icon.starred {
    color: #ffc107 !important; /* 黄色を強制適用 */
}

/* ★ ユーザーがテキストとして選択できないようにする */
.star-icon {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

@media screen and (max-width: 767px) {
    .word-card .star-icon,
    .overlay-word-card .star-icon {
        top: 3px;
        right: 8px;
        font-size: 24px;
    }

    .description-star-icon {
        top: 25px;
        right: 25px;
        font-size: 24px;
    }
}

/* ログイン特典メッセージのスタイル */
.login-benefits-section {
    margin: 15px 0;
    padding: 16px;
    background: linear-gradient(135deg, #e8f5e8 0%, #d4ead4 100%);
    border-radius: 12px;
    border: 1px solid #90c090;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.login-benefits-title {
    color: #4a904a;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 15px 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.login-benefits-subtitle {
    color: #ffbb00;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 12px 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.login-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.login-benefits-list li {
    display: flex;
    align-items: center;
    margin: 6px 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border-left: 3px solid #7ab070;
    transition: background-color 0.3s ease;
    font-size: 0.95em;
}

.login-benefits-list li:hover {
    background: rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    font-size: 1.2em;
    margin-right: 10px;
    min-width: 24px;
    text-align: center;
}

.login-benefits-list strong {
    color: #4a904a;
    margin-right: 5px;
}

.login-benefits-note {
    color: #555555;
    font-size: 0.9em;
    text-align: center;
    margin: 0;
    line-height: 1.4;
    /* font-style: italic; */
}

@media screen and (max-width: 767px) {
    .login-benefits-section {
        margin: 15px 0;
        padding: 15px;
    }
    
    .login-benefits-title {
        font-size: 1.1em;
    }
    
    .login-benefits-subtitle {
        font-size: 1.0em;
    }
    
    .login-benefits-list li {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    
    .benefit-icon {
        font-size: 1.1em;
        margin-right: 8px;
        min-width: 20px;
    }
}

/* REQ-5.4.1: 画像解説履歴モーダルのスタイル */
.history-list-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin: 8px 0;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border-left: 3px solid #7ab070;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.history-list-item:hover {
    background: rgba(0, 0, 0, 0.1);
    border-left-color: #4a904a;
}

.history-item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 12px;
    border: 1px solid #555;
}

.history-item-content {
    flex: 1;
    min-width: 0;
}

.history-item-title {
    color: #303030;
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-date {
    color: #555555;
    font-size: 0.8em;
    margin-bottom: 2px;
}

.history-item-source {
    color: #4a904a;
    font-size: 0.75em;
    padding: 2px 6px;
    background: rgba(144, 238, 144, 0.2);
    border-radius: 4px;
    display: inline-block;
}

.history-empty-message {
    text-align: center;
    color: #555555;
    padding: 40px 20px;
    /* font-style: italic; */
}

.history-empty-message .empty-icon {
    font-size: 3em;
    margin-bottom: 10px;
    display: block;
}

/* REQ-5.7.3: 履歴削除ボタンのスタイル（requirements_definition.md参照） */
.history-item-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 69, 58, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.history-item-delete-btn:hover {
    background: rgba(255, 69, 58, 1);
    opacity: 1;
    transform: scale(1.1);
}

/* REQ-5.7: 削除確認モーダルのスタイル */
.delete-confirm-modal-content {
    max-width: 400px;
    width: 90%;
}

.delete-confirm-message {
    text-align: center;
    padding: 20px 0;
}

.delete-confirm-icon {
    font-size: 3em;
    margin-bottom: 15px;
    user-select: none;
}

.delete-confirm-message p {
    margin: 10px 0;
    color: #303030;
    user-select: none;
}

.delete-confirm-note {
    font-size: 0.9em;
    color: #555555 !important;
}

.delete-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.delete-confirm-cancel-btn,
.delete-confirm-delete-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 120px; /* 幅を広くして改行を防ぐ */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-sizing: border-box;
    transform: none;
    height: 40px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    flex-shrink: 0;
    white-space: nowrap; /* テキストの改行を防ぐ */
}

.delete-confirm-cancel-btn:focus,
.delete-confirm-delete-btn:focus {
    outline: none;
    box-shadow: none;
}

.delete-confirm-cancel-btn {
    background: #555;
    color: #303030;
}

.delete-confirm-cancel-btn:hover {
    background: #ccc;
    transform: none;
    padding: 10px 20px;
    width: 120px; /* ホバー時も同じ幅を明示 */
    height: 40px;
    line-height: 1;
}

.delete-confirm-delete-btn {
    background: rgba(255, 69, 58, 0.9);
    color: white;
}

.delete-confirm-delete-btn:hover {
    background: rgba(255, 69, 58, 1);
    transform: none;
    padding: 10px 20px;
    width: 120px; /* ホバー時も同じ幅を明示 */
    height: 40px;
    line-height: 1;
}

/* REQ-5.7.2: レスポンシブ対応 */
@media screen and (max-width: 767px) {
    .history-list-item {
        padding: 10px;
    }
    
    .history-item-image {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    
    .history-item-title {
        font-size: 0.9em;
    }
    
    .history-item-date {
        font-size: 0.75em;
    }
    
    .history-item-source {
        font-size: 0.7em;
    }
    
    .history-item-delete-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
        top: 6px;
        right: 6px;
    }
}

/* 記事収集設定モーダル用チェックボックス */
.article-collection-category-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 4px;
    background-color: #f2f2f2;
    border: 1px solid #d8d8d8;
}

.article-collection-category-item:hover {
    background-color: #303030;
    border-color: #4a4a4a;
}

.article-collection-category-checkbox {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    accent-color: #508050;
    cursor: pointer;
}

.article-collection-category-label {
    color: #303030;
    font-size: 0.95em;
    cursor: pointer;
    flex-grow: 1;
    user-select: none;
    text-align: left;
}

.article-collection-category-url {
    color: #777777;
    font-size: 0.8em;
    margin-left: 8px;
    font-family: monospace;
}

/* 記事収集設定モーダル専用のスタイル */
#article-collection-settings-menu {
    max-width: 600px !important; /* 幅を広くする */
    max-height: 80svh !important; /* モバイルブラウザUI対応：小さいビューポート高さを使用 */
    overflow-y: auto !important; /* 縦スクロールを有効にする */
}

/* 自動ワード生成設定モーダル専用のスタイル */
#auto-word-generation-settings-menu {
    max-width: 600px !important; /* 幅を広くする */
    max-height: 80svh !important; /* モバイルブラウザUI対応：小さいビューポート高さを使用 */
    overflow-y: auto !important; /* 縦スクロールを有効にする */
}

/* 記事収集設定モーダル専用のスクロールバースタイル */
#article-collection-settings-menu::-webkit-scrollbar {
    width: 8px;
}

#article-collection-settings-menu::-webkit-scrollbar-track {
    background: #fafafa;
    border-radius: 4px;
}

#article-collection-settings-menu::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

#article-collection-settings-menu::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* 自動ワード生成設定モーダル専用のスクロールバースタイル */
#auto-word-generation-settings-menu::-webkit-scrollbar {
    width: 8px;
}

#auto-word-generation-settings-menu::-webkit-scrollbar-track {
    background: #fafafa;
    border-radius: 4px;
}

#auto-word-generation-settings-menu::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

#auto-word-generation-settings-menu::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

/* 単語モーダル専用スタイル - README.md「単語詳細モーダル機能」セクション参照 */
.word-modal-content {
  max-width: 600px;
  min-height: 300px;
  transform: translateZ(0); /* ハードウェアアクセラレーションを有効化してスムーズな描画 */
  will-change: auto; /* ブラウザの最適化を有効化 */
}

.word-modal-body {
  text-align: center;
  padding: 24px 20px;
}

.word-modal-word {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #454545;
  cursor: pointer;
  transition: color 0.3s ease;
  line-height: 1.4;
  line-break: auto;
  word-break: normal;
}

/* 中国語（ruby-pinyinあり）のときは行高を詰めて上の空白を削減 */
.word-modal-word:has(.ruby .ruby-pinyin),
.word-modal-sentence:has(.ruby .ruby-pinyin) {
  line-height: 0.6;
}

/* 中国語の単語モーダルを数ドット上に移動 */
.word-modal-word:has(.ruby .ruby-pinyin) {
  margin-top: -12px;
}

/* 中国語の例文モーダルも同様に上に移動して位置を揃える */
.word-modal-sentence:has(.ruby .ruby-pinyin) {
  margin-top: -1px;
}

/* .word-modal-word:hover {
  color: #6a9a65;
}

.word-modal-word:hover ruby rt {
  color: #6a9a65 !important;
} */

.word-modal-sentence {
  font-size: 2.2rem;
  color: #505050;
  cursor: pointer;
  transition: color 0.3s ease;
  line-height: 1.7;
  margin-top: 12px;
  margin-bottom: 16px;
  line-break: auto;
  word-break: normal;
}

/* .word-modal-sentence:hover {
  color: #6a9a65;
}

.word-modal-sentence:hover ruby rt {
  color: #6a9a65 !important;
} */

.word-modal-word ruby rt,
.word-modal-sentence ruby rt {
  font-size: 0.6em;
  color: #999; /* グレースケールで少し明るく表示 */
  transition: color 0.3s ease;
}

.word-modal-word ruby rt.ruby-ja,
.word-modal-sentence ruby rt.ruby-ja {
  color: #999; /* 日本語ルビもグレースケール */
  transition: color 0.3s ease;
}

.word-modal-word ruby rt.ruby-zh,
.word-modal-sentence ruby rt.ruby-zh {
  color: #999; /* 中国語ルビもグレースケール */
  transition: color 0.3s ease;
}

.word-modal-buttons {
  margin-top: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* 中国語(ピンイン表示)のとき、ナビと単語の間隔を詰める
.word-modal-body:has(.word-modal-word .ruby .ruby-pinyin) .word-modal-navigation {
  margin-bottom: 20px;
} */

/* 中国語のspanベースrubyがある場合の余白調整 */
/* .word-modal-body:has(.word-modal-word .ruby .ruby-pinyin) {
  padding-top: 22px;
} */
.word-modal-body:has(.word-modal-sentence .ruby .ruby-pinyin) .word-modal-sentence {
  margin-bottom: 30px;
}

.word-modal-buttons .copy-button {
  border: 1px solid #6a9a65;
  background: rgba(0, 0, 0, 0.1);
  color: #6a9a65;
  font-size: 14px;
  opacity: 1;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100px;
  text-align: center;
  margin: 0;
}

.word-modal-buttons .copy-button:hover {
  background: rgba(151, 192, 146, 0.1);
}

.word-modal-buttons #word-modal-autoplay {
  background: rgba(152, 195, 121, 0.1);
  color: #98c379;
  border: 1px solid rgba(152, 195, 121, 0.3);
  width: 100px;
}

.word-modal-buttons #word-modal-autoplay:hover {
  background: rgba(152, 195, 121, 0.2);
  border-color: rgba(152, 195, 121, 0.5);
}

.word-modal-buttons #word-modal-autoplay.playing {
  background: rgba(224, 108, 117, 0.2);
  color: #e06c75;
  border-color: rgba(224, 108, 117, 0.5);
}

/* 単語詳細モーダル: copy/play を autoplay と同じ配色に */
.word-modal-buttons #word-modal-copy,
.word-modal-buttons #word-modal-play {
  background: rgba(152, 195, 121, 0.1);
  color: #98c379;
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.word-modal-buttons #word-modal-copy:hover,
.word-modal-buttons #word-modal-play:hover,
.word-modal-buttons #word-modal-copy:active,
.word-modal-buttons #word-modal-play:active {
  background: rgba(152, 195, 121, 0.2);
  border-color: rgba(152, 195, 121, 0.5);
}

/* 単語詳細モーダル: 日语解释/中文解释 も同じ配色に */
.word-modal-buttons #word-modal-explain-ja,
.word-modal-buttons #word-modal-explain-zh {
  background: rgba(152, 195, 121, 0.1);
  color: #98c379;
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.word-modal-buttons #word-modal-explain-ja:hover,
.word-modal-buttons #word-modal-explain-zh:hover,
.word-modal-buttons #word-modal-explain-ja:active,
.word-modal-buttons #word-modal-explain-zh:active {
  background: rgba(152, 195, 121, 0.2);
  border-color: rgba(152, 195, 121, 0.5);
}

/* 単語詳細モーダル: 説明出力エリア（ライト） */
.word-modal-background {
  background-color: #f8f8f8;
  color: #303030; /* 念のため */
  border: 1px solid #cccccc;
  border-radius: 6px;
}

/* explain-ja/explain-zhボタンのスタイル - README.md「背景情報取得機能」参照 */
.word-modal-buttons #word-modal-explain-ja,
.word-modal-buttons #word-modal-explain-zh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.word-modal-buttons #word-modal-explain-ja:hover,
.word-modal-buttons #word-modal-explain-zh:hover {
  /* explain-ja/zhボタンは.copy-buttonクラスを継承するため、個別スタイルは不要 */
}

.word-modal-buttons .source-link {
  color: #6a9a65;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  width: 70px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.word-modal-buttons .source-link:hover {
  background: rgba(151, 192, 146, 0.1);
}

/* ナビゲーションボタンのスタイル - README.md「ナビゲーション機能」参照 */
.word-modal-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.word-modal-nav-button {
  background: rgba(151, 192, 146, 0); /* 常に同じ背景色（透明）を設定してサイズを固定 */
  border: 1px solid transparent; /* 透明な枠線を常に設定してサイズを固定 */
  color: #6a9a65;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  min-width: 80px;
  border-radius: 6px;
  outline: none; /* フォーカス時の枠線を削除 */
  transition: none; /* トランジション効果を削除してカクつきを防ぐ */
  -webkit-tap-highlight-color: transparent; /* モバイルでのタップハイライトを削除 */
  box-shadow: none; /* ボックスシャドウを削除 */
}

.word-modal-nav-button:hover:not(:disabled) {
  background: rgba(151, 192, 146, 0.1);
  border: 1px solid transparent; /* ホバー時も同じ透明な枠線を維持 */
}

.word-modal-nav-button:focus {
  outline: none; /* フォーカス時の枠線を削除 */
  box-shadow: none; /* フォーカス時のボックスシャドウを削除 */
}

.word-modal-nav-button:active {
  outline: none; /* アクティブ時の枠線を削除 */
  box-shadow: none; /* アクティブ時のボックスシャドウを削除 */
}

.word-modal-nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #666;
}

.word-modal-position {
  color: #999;
  font-size: 14px;
  text-align: center;
  min-width: 80px;
}

@media screen and (max-width: 767px) {
  .word-modal-content {
    max-width: 95%;
    margin: 10% auto;
  }
  
  .word-modal-word {
    font-size: 2.3rem;
    line-height: 1.5;
  }
  
  .word-modal-sentence {
    font-size: 1.8rem;
    line-height: 1.8;
  }
  
  .word-modal-buttons .copy-button{
    font-size: 12px;
    padding: 6px 12px;
    width: 90px;
    text-align: center;
  }
  .word-modal-buttons .source-link {
    font-size: 12px;
    padding: 6px 12px;
    width: 68px;
    height: 18px;
    text-align: center;
  }
  
  .word-modal-buttons #word-modal-autoplay {
    font-size: 12px;
    padding: 6px 12px;
    width: 90px;
  }
  
  /* explain-ja/zhボタンは.copy-buttonクラスを使用するためモバイル版も個別スタイル不要 */
  
  .word-modal-nav-button {
    font-size: 12px;
    padding: 6px 12px;
    min-width: 60px;
    outline: none; /* モバイルでもフォーカス枠線を削除 */
    -webkit-tap-highlight-color: transparent; /* モバイルタップハイライトを削除 */
    background: rgba(151, 192, 146, 0); /* モバイルでも常に同じ背景色（透明）を設定 */
    border: 1px solid transparent; /* モバイルでも透明な枠線を常に設定 */
  }
  
  .word-modal-position {
    font-size: 12px;
    min-width: 60px;
  }
  /* 中国語の単語モーダルを数ドット上に移動 */
  .word-modal-word:has(.ruby .ruby-pinyin) {
    margin-top: -6px;
  }
  /* 中国語の例文モーダルも同様に上に移動して位置を揃える */
  .word-modal-sentence:has(.ruby .ruby-pinyin) {
    margin-top: 1px;
  }
}

/* トグルスイッチのスタイルもグレースケールに寄せる */

/* 言語別フォント最適化 */
.scrolling-word[lang="zh"], 
.scrolling-word[lang="zh-CN"], 
.scrolling-word[lang="zh-cn"] {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Hiragino Sans GB', 'SimHei', sans-serif;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    letter-spacing: 0.02em;
}

/* 単語モーダル - 中国語フォント設定（スクロール単語と統一） */
.word-modal-word:has(ruby rt.ruby-zh),
.word-modal-sentence:has(ruby rt.ruby-zh) {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Hiragino Sans GB', 'SimHei', sans-serif !important;
    font-weight: 400 !important;
    font-variation-settings: 'wght' 400 !important;
    letter-spacing: 0.02em !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 単語モーダル - 日本語フォント設定（スクロール単語と統一） */
.word-modal-word:has(ruby rt.ruby-ja),
.word-modal-sentence:has(ruby rt.ruby-ja) {
    font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', 'Yu Gothic UI Semilight', 'Yu Gothic UI', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Noto Sans CJK JP Light', 'Noto Sans CJK JP', 'Source Han Sans JP', 'Meiryo UI', sans-serif !important;
    font-weight: 350 !important;
    font-variation-settings: 'wght' 350 !important;
    letter-spacing: 0.03em !important;
    text-shadow: none !important;
}

/* 単語モーダル - 中国語ルビフォント設定（スクロール単語と統一） */
.word-modal-word ruby rt.ruby-zh,
.word-modal-sentence ruby rt.ruby-zh {
    font-family: 'Consolas', 'Monaco', 'Courier New', 'PingFang SC', monospace !important;
    font-weight: 300 !important;
    font-variation-settings: 'wght' 300 !important;
}

/* 単語モーダル - 日本語ルビフォント設定（スクロール単語と統一） */
.word-modal-word ruby rt.ruby-ja,
.word-modal-sentence ruby rt.ruby-ja {
    font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', 'Yu Gothic UI Semilight', 'Yu Gothic UI', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Noto Sans CJK JP Light', 'Noto Sans CJK JP', sans-serif !important;
    font-weight: 300 !important;
    font-variation-settings: 'wght' 300 !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
}

/* 単語モーダル - タイトル「单词详情」フォント設定（中国語フォントと統一） */
#word-modal-title {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Hiragino Sans GB', 'SimHei', sans-serif !important;
    font-weight: 400 !important;
    font-variation-settings: 'wght' 400 !important;
    letter-spacing: 0.02em !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.scrolling-word[lang="ja"], 
.scrolling-word[lang="ja-JP"] {
    font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', 'Yu Gothic UI Semilight', 'Yu Gothic UI', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Noto Sans CJK JP Light', 'Noto Sans CJK JP', 'Source Han Sans JP', 'Meiryo UI', sans-serif !important;
    font-weight: 350 !important;
    font-variation-settings: 'wght' 350 !important;
    letter-spacing: 0.03em !important;
    text-shadow: none !important;
}

/* 中国語単語の太さ統一 */
.scrolling-word ruby[lang="zh"] rt,
.scrolling-word ruby[lang="zh-CN"] rt,
.scrolling-word ruby[lang="zh-cn"] rt {
    font-family: 'Consolas', 'Monaco', 'Courier New', 'PingFang SC', monospace;
    font-weight: 300;
    font-variation-settings: 'wght' 300;
}

/* 日本語ルビ（ピンイン）のフォント設定 */
.scrolling-word[lang="ja"] ruby rt,
.scrolling-word[lang="ja-JP"] ruby rt {
    font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', 'Yu Gothic UI Semilight', 'Yu Gothic UI', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Noto Sans CJK JP Light', 'Noto Sans CJK JP', sans-serif !important;
    font-weight: 300 !important;
    font-variation-settings: 'wght' 300 !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
}

/* 日本語専用のやわらかいスタイル（rubyなし） */
.scrolling-word:not(:has(ruby))[lang="ja"],
.scrolling-word:not(:has(ruby))[lang="ja-JP"] {
    font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', 'Yu Gothic UI Semilight', 'Yu Gothic UI', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Noto Sans CJK JP Light', 'Noto Sans CJK JP', sans-serif !important;
    font-weight: 350 !important;
    letter-spacing: 0.05em !important;
    text-shadow: none !important;
    filter: brightness(1.05) !important;
}

/* JLPT レベル選択ボタンのスタイル */
.jlpt-level-toggles {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none; /* デフォルトで非表示 */
    gap: 3px;
    z-index: 1000;
    opacity: 0.9;
}

/* JLPTモード選択時のみ表示 */
.jlpt-level-toggles.visible {
    display: flex;
}

.jlpt-level-btn {
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    width: 28px; /* 明示的な幅設定で統一 */
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* N5 アクティブ状態（青系） */
.jlpt-level-btn.jlpt-n5-active {
    background-color: #1976d2;
    color: #ffffff;
    border-color: #1565c0;
}

/* N4 アクティブ状態（緑系） */
.jlpt-level-btn.jlpt-n4-active {
    background-color: #388e3c;
    color: #ffffff;
    border-color: #2e7d32;
}

/* 非アクティブ状態（共通グレー） */
.jlpt-level-btn.jlpt-inactive {
    background-color: #e0e0e0;
    color: #666666;
    border-color: #cccccc;
}

/* ホバー効果 */
.jlpt-level-btn:hover.jlpt-n5-active {
    background-color: #1565c0;
}

.jlpt-level-btn:hover.jlpt-n4-active {
    background-color: #2e7d32;
}

.jlpt-level-btn:hover.jlpt-inactive {
    background-color: #d0d0d0;
    color: #555555;
}

/* Word Modal Title Container */
.word-modal-title-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* JLPT Level Identification Buttons in Modal */
.word-modal-jlpt-level {
    display: flex;
    gap: 8px;
    margin-top: 3px;
}

/* Modal JLPT buttons - now interactive for word list display */
.word-modal-jlpt-level .jlpt-level-btn {
    cursor: pointer; /* Clickable appearance */
    pointer-events: auto; /* Enable click events */
    transition: background-color 0.2s ease, transform 0.1s ease; /* Smooth transitions */
}

.word-modal-jlpt-level .jlpt-level-btn:hover {
    transform: scale(1.05); /* Slight scale effect on hover */
}

.word-modal-jlpt-level .jlpt-level-btn:active {
    transform: scale(0.95); /* Press effect */
}

/* JLPT Level Toggle Buttons */
.jlpt-level-btn.jlpt-n5-active {
    background-color: #1976d2;
    color: #ffffff;
}

.jlpt-level-btn.jlpt-n4-active {
    background-color: #388e3c;
    color: #ffffff;
}

.jlpt-level-btn.jlpt-n3-active {
    background-color: #f57c00;
    color: #ffffff;
}

.jlpt-level-btn.jlpt-n2-active {
    background-color: #7b1fa2;
    color: #ffffff;
}

.jlpt-level-btn.jlpt-inactive {
    background-color: #e0e0e0;
    color: #666666;
}

/* ... existing code ... */

/* JLPT Level Underlines */
.scrolling-word.jlpt-n5::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #1976d2 5%, #1976d2 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(25, 118, 210, 0.3);
    border-radius: 1px;
    z-index: 1;
}

.scrolling-word.jlpt-n4::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #388e3c 5%, #388e3c 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(56, 142, 60, 0.3);
    border-radius: 1px;
    z-index: 1;
}

.scrolling-word.jlpt-n3::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #f57c00 5%, #f57c00 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(245, 124, 0, 0.3);
    border-radius: 1px;
    z-index: 1;
}

.scrolling-word.jlpt-n2::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #7b1fa2 5%, #7b1fa2 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(123, 31, 162, 0.3);
    border-radius: 1px;
    z-index: 1;
}

/* ★★★ 新規追加：お気に入りモード用スタイル ★★★ */

/* お気に入りボタン（アクティブ時） */
#favorite-toggle {
    background-color: #f0f0f0; /* ライトグレー */
    color: #ff9800; /* オレンジゴールド */
    /* N2-N5ボタン.jlpt-level-btnと完全に同じ幅・高さ */
    width: 28px; /* N2-N5ボタンと同じ幅 */
    height: 18px;
    font-size: 12px;
    padding: 0; /* パディングをリセット */
    /* 位置調整のためのパディング */
    padding-top: 2px;
    padding-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    opacity: 0.9;
}

/* お気に入りボタン（非アクティブ時） */
#favorite-toggle.jlpt-inactive {
    background-color: #e0e0e0;
    border-color: #cccccc;
    /* colorは適用しない - ☆ボタン独自の色を保持 */
}

/* お気に入りボタン（非アクティブ時ホバー） */
#favorite-toggle:hover.jlpt-inactive {
    background-color: #d0d0d0;
    /* colorは適用しない - ☆ボタン独自の色を保持 */
}


/* お気に入りモード時のJLPTレベル別下線（各レベルの色を保持） */
.scrolling-word.favorite-mode.jlpt-n5::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #1976d2 5%, #1976d2 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(25, 118, 210, 0.3);
    border-radius: 1px;
    z-index: 1;
}

.scrolling-word.favorite-mode.jlpt-n4::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #388e3c 5%, #388e3c 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(56, 142, 60, 0.3);
    border-radius: 1px;
    z-index: 1;
}

.scrolling-word.favorite-mode.jlpt-n3::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #f57c00 5%, #f57c00 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(245, 124, 0, 0.3);
    border-radius: 1px;
    z-index: 1;
}

.scrolling-word.favorite-mode.jlpt-n2::after {
    content: '';
    position: absolute;
    left: 10px;
    right: -15px;
    bottom: 0.3em;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #7b1fa2 5%, #7b1fa2 95%, transparent 100%);
    box-shadow: 0 0 2px rgba(123, 31, 162, 0.3);
    border-radius: 1px;
    z-index: 1;
}

/* 吹き出し共通スタイル */
.jlpt-tooltip,
.scroll-word-tooltip,
.translation-switch-tooltip,
.jlpt-button-list-tooltip {
    position: absolute;
    z-index: 10000;
    animation: tooltipFadeIn 0.3s ease-out;
}

/* スクロール単語吹き出しのアニメーション無効化 */
.scroll-word-tooltip-no-animation {
    animation: none !important;
}

.jlpt-tooltip-content,
.scroll-word-tooltip-content,
.translation-switch-tooltip-content,
.jlpt-button-list-tooltip-content {
    position: relative;
    background: linear-gradient(135deg, #e8eef5 0%, #dce4ed 100%);
    border: 2px solid #2980b9;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 200px;
}

.jlpt-tooltip-text,
.scroll-word-tooltip-text,
.translation-switch-tooltip-text,
.jlpt-button-list-tooltip-text {
    color: #2c3e50;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans CJK SC', 'Hiragino Sans GB', 'SimHei', sans-serif;
}

.jlpt-tooltip:hover,
.scroll-word-tooltip:hover,
.translation-switch-tooltip:hover,
.jlpt-button-list-tooltip:hover {
    cursor: pointer;
}

/* 矢印の共通スタイル */
.jlpt-tooltip-arrow,
.scroll-word-tooltip-arrow,
.translation-switch-tooltip-arrow,
.jlpt-button-list-tooltip-arrow {
    position: absolute;
    left: 50px; /* デフォルト位置、JavaScriptで動的に変更される */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.jlpt-tooltip-arrow::after,
.scroll-word-tooltip-arrow::after,
.translation-switch-tooltip-arrow::after,
.jlpt-button-list-tooltip-arrow::after {
    content: '';
    position: absolute;
    left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

/* JLPTボタン吹き出し専用（上向き矢印） */
.jlpt-tooltip-arrow {
    top: -8px;
    border-bottom: 8px solid #2980b9;
}

.jlpt-tooltip-arrow::after {
    top: 2px;
    border-bottom: 6px solid #e8eef5;
}

/* スクロール単語吹き出し専用（下向き矢印） */
.scroll-word-tooltip-arrow {
    bottom: -8px;
    border-top: 8px solid #2980b9;
}

.scroll-word-tooltip-arrow::after {
    bottom: 2px;
    border-top: 6px solid #e8eef5;
}

/* 翻訳切り替え吹き出し専用（下向き矢印） */
.translation-switch-tooltip-arrow {
    bottom: -8px;
    border-top: 8px solid #2980b9;
}

.translation-switch-tooltip-arrow::after {
    bottom: 2px;
    border-top: 6px solid #e8eef5;
}

/* JLPTボタン一覧吹き出し専用（上向き矢印） */
.jlpt-button-list-tooltip-arrow {
    top: -8px;
    border-bottom: 8px solid #2980b9;
}

.jlpt-button-list-tooltip-arrow::after {
    top: 2px;
    border-bottom: 6px solid #e8eef5;
}

/* アニメーション定義 */
@keyframes tooltipFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 記事タブのデータ表示エリア */
#article_log_content {
    background-color: #f8f8f8 !important;
    color: #303030 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    border: 1px solid #cccccc !important;
    margin-bottom: 10px !important;
}

#article_log_info {
    font-size: 14px !important;
    color: #666666 !important;
}

/* オーディオコントロール（ライトモード用）*/
audio {
    filter: none !important; /* ライトモードではフィルターを無効化 */
}

/* テーマ切り替えボタン */
.theme-toggle-btn {
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 8px;
    /* transition: transform 0.3s ease; */
    color: #303030;
    outline: none;
}

.theme-toggle-btn:hover {
    border: none;
    background: none;
    color: #303030;
    outline: none;
}