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

body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 980px;
    margin: 20px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* ヘッダーのレスポンシブ対応＆デザイン最適化 */
.header {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    padding: 35px 20px;
    text-align: center;
    color: #fff;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 930px;
    margin: 0 auto;
    padding-bottom: 12px;
}

.back-portal-link {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
    transition: background 0.2s;
}

.back-portal-link:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.header h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    font-weight: bold;
}

.header p {
    margin: 10px 0 0;
    font-size: 13px;
    opacity: 0.9;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.content {
    padding: 20px;
}

/* ニュースボックスと出典ボタン */
.news-box {
    background: #f8f9fa;
    border-left: 5px solid #3498db;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 0 8px 8px 0;
    transition: background-color 0.3s;
}

.news-box h2 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #2c3e50;
    transition: color 0.3s;
}

.news-box p {
    margin: 0 0 12px;
    font-size: 13px;
    word-break: break-all;
}

.news-sources {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.news-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #3498db;
    color: #3498db !important;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.2s ease;
    min-height: 48px;
    box-sizing: border-box;
    text-align: center;
}

.news-btn:hover {
    background: #3498db;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* SEO/GEO対策：3行要約セクション */
.key-takeaways {
    background: #edf7ed;
    border-left: 5px solid #2cc36b;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 0 8px 8px 0;
    transition: background-color 0.3s, border-color 0.3s;
}

.key-takeaways h3 {
    margin: 0 0 10px;
    font-size: 15px;
    color: #1e4620;
    display: flex;
    align-items: center;
    gap: 6px;
}

.key-takeaways ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #1e4620;
    line-height: 1.6;
}

.key-takeaways li {
    margin-bottom: 6px;
}

.key-takeaways li:last-child {
    margin-bottom: 0;
}

/* ナビゲーター紹介（フレックス・スマホ縦並び対応） */
.intro-section {
    background: #f0f4f8;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    transition: background-color 0.3s;
}

.intro-title {
    font-size: 14px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 12px;
    border-bottom: 1px solid #d0dbe5;
    padding-bottom: 5px;
    transition: color 0.3s, border-color 0.3s;
}

.intro-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.intro-card {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.3s;
}

.intro-card img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3498db;
    flex-shrink: 0;
}

.intro-card.liam-card img {
    border-color: #e74c3c;
}

.intro-text {
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.intro-text strong {
    font-size: 13px;
    color: #2c3e50;
    display: block;
    margin-bottom: 2px;
    transition: color 0.3s;
}

/* 会話劇エリア */
.dialogue-area {
    margin-top: 20px;
    margin-bottom: 30px;
}

.chat-line {
    margin-bottom: 25px;
    width: 100%;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.chat-avatar {
    width: 55px;
    text-align: center;
    flex-shrink: 0;
}

.chat-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.chat-avatar .name {
    font-size: 11px;
    font-weight: bold;
    margin-top: 4px;
    color: #555;
    transition: color 0.3s;
}

.chat-bubble-cell {
    flex-grow: 1;
    display: flex;
}

/* 共通の吹き出しベース（必ずbubble自体にrelativeを持たせる） */
.bubble {
    padding: 12px 16px;
    font-size: 14px;
    max-width: 88%;
    word-wrap: break-word;
    position: relative;
    border-radius: 12px;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* エマ（左側・ピンク）のしっぽ配置 */
.chat-line.emma .chat-bubble-cell {
    justify-content: flex-start;
    padding-left: 5px;
}

.chat-line.emma .bubble {
    background: #fff0f5;
    border: 1px solid #ffd1dc;
}

.chat-line.emma .bubble::after {
    content: "";
    position: absolute;
    top: 15px;
    left: -9px;
    border-style: solid;
    border-width: 7px 9px 7px 0;
    border-color: transparent #fff0f5 transparent transparent;
    display: block;
    width: 0;
    z-index: 2;
    transition: border-color 0.3s;
}

.chat-line.emma .bubble::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -10px;
    border-style: solid;
    border-width: 7px 9px 7px 0;
    border-color: transparent #ffd1dc transparent transparent;
    display: block;
    width: 0;
    z-index: 1;
    transition: border-color 0.3s;
}

/* リアム（右側・ブルー）の反転＆しっぽ配置 */
.chat-line.liam {
    flex-direction: row-reverse;
}

.chat-line.liam .chat-bubble-cell {
    justify-content: flex-end;
    padding-right: 5px;
}

.chat-line.liam .bubble {
    background: #e6f3ff;
    border: 1px solid #b3d7ff;
    text-align: left;
}

.chat-line.liam .bubble::after {
    content: "";
    position: absolute;
    top: 15px;
    right: -9px;
    border-style: solid;
    border-width: 7px 0 7px 9px;
    border-color: transparent transparent transparent #e6f3ff;
    display: block;
    width: 0;
    z-index: 2;
    transition: border-color 0.3s;
}

.chat-line.liam .bubble::before {
    content: "";
    position: absolute;
    top: 15px;
    right: -10px;
    border-style: solid;
    border-width: 7px 0 7px 9px;
    border-color: transparent transparent transparent #b3d7ff;
    display: block;
    width: 0;
    z-index: 1;
    transition: border-color 0.3s;
}

/* 解説本文セクション */
.seo-article {
    margin-bottom: 30px;
    padding: 5px 0;
}

.seo-article h3 {
    font-size: 16px;
    color: #2c3e50;
    border-left: 4px solid #2c3e50;
    padding-left: 10px;
    margin: 25px 0 12px;
    line-height: 1.4;
    transition: color 0.3s, border-color 0.3s;
}

.seo-article p {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 15px;
    transition: color 0.3s;
}

/* 重要キーワード */
.keyword-section {
    background: #fdfaf2;
    border: 1px solid #f39c12;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
    transition: background-color 0.3s, border-color 0.3s;
}

.keyword-title {
    font-size: 15px;
    font-weight: bold;
    color: #d35400;
    margin-bottom: 12px;
    transition: color 0.3s;
}

.keyword-box {
    background: linear-gradient(to right, #ffffff, #fffdf9);
    padding: 12px 14px;
    border-radius: 6px;
    border-left: 4px solid #f39c12;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: background 0.3s, border-color 0.3s;
}

.keyword-box:last-child {
    margin-bottom: 0;
}

.keyword-name {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background: #f39c12;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}

.keyword-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #555;
    padding-left: 2px;
    transition: color 0.3s;
}

/* ネイティブフレーズ */
.phrase-section {
    background: #f7f9fa;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
    transition: background-color 0.3s, border-color 0.3s;
}

.phrase-title {
    font-size: 15px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
    transition: color 0.3s;
}

/* 1行注釈のスタイル */
.phrase-sub {
    font-size: 11px;
    color: #7f8c8d;
    margin-top: -5px;
    margin-bottom: 15px;
    line-height: 1.4;
    transition: color 0.3s;
}

.phrase-card {
    position: relative;
    background: #fff;
    border-left: 4px solid #2cc36b;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, border-color 0.3s;
}

.phrase-card:last-child {
    margin-bottom: 0;
}

.phrase-eng {
    font-size: 14px;
    font-weight: bold;
    color: #2cc36b;
    margin-bottom: 4px;
    word-break: break-word;
}

.phrase-jp {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #666;
    transition: color 0.3s;
    margin-bottom: 10px;
}

/* アクションボタン（音声・コピー・お気に入り） */
.phrase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.speech-btn,
.copy-btn,
.fav-btn {
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.speech-btn {
    background: #3498db;
}

.speech-btn:hover {
    background: #2980b9;
}

.copy-btn {
    background: #2cc36b;
}

.copy-btn:hover {
    background: #219d52;
}

.copy-btn.copied {
    background: #7f8c8d;
}

.fav-btn {
    background: #f1c40f;
    color: #333;
}

.fav-btn:hover {
    background: #f39c12;
    color: #fff;
}

.fav-btn.active {
    background: #e67e22;
    color: #fff;
}

/* まとめ・一問一答（GEO対策アコーディオン：details/summary移行） */
.faq-section {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
    transition: background-color 0.3s, border-color 0.3s;
}

.faq-title {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 6px;
    transition: color 0.3s, border-color 0.3s;
}

.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px dashed #e9ecef;
    padding-bottom: 15px;
    transition: border-color 0.3s;
}

.faq-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.faq-item::-webkit-details-marker {
    display: none;
}

/* Safari用の標準矢印非表示 */
.faq-q {
    font-size: 14px;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    list-style: none;
    outline: none;
}

.faq-icon {
    transition: transform 0.2s;
    font-size: 12px;
    color: #7f8c8d;
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

/* details展開時に矢印を回転 */
.faq-a {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #444;
    padding-top: 10px;
    transition: color 0.3s;
}

/* 管理者ツール */
.admin-tool {
    display: none !important;
    background: #2e3a4e;
    color: #fff;
    padding: 20px 15px;
    margin-top: 20px;
    border-top: 5px solid #e74c3c;
}

.admin-tool h3 {
    margin: 0 0 15px;
    font-size: 15px;
    color: #ecf0f1;
    border-bottom: 1px solid #475975;
    padding-bottom: 8px;
}

.admin-tool p {
    font-size: 12px;
    color: #bdc3c7;
    margin: 0 0 15px;
    line-height: 1.4;
}

.tool-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.tool-col {
    width: 100%;
}

.admin-tool label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #f39c12;
}

.admin-tool textarea {
    width: 100%;
    height: 80px;
    background: #1f2836;
    border: 1px solid #475975;
    color: #fff;
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    resize: none;
}

.admin-tool input[type="file"] {
    display: block;
    font-size: 12px;
    color: #bdc3c7;
    margin-bottom: 10px;
    width: 100%;
}

.admin-tool button {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.admin-tool button:hover {
    background: #c0392b;
}

#canvas-preview {
    background: #1f2836;
    border: 1px solid #475975;
    margin-top: 15px;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    overflow: hidden;
}

canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid #000;
    display: block;
    margin: 0 auto;
}

/* タブレット・PC環境（横幅576px以上）でのレイアウト微調整 */
@media (min-width: 576px) {
    .header h1 {
        font-size: 26px;
    }

    .content {
        padding: 25px;
    }

    .intro-grid {
        flex-direction: row;
    }

    .tool-grid {
        flex-direction: row;
    }

    .tool-col {
        flex: 1;
    }

    .bubble {
        max-width: 75%;
    }
}

/* スマホ表示（480px以下）時のチャット1カラム最適化 */
@media (max-width: 480px) {
    .chat-line {
        flex-direction: column !important;
        gap: 8px;
    }

    .chat-line.liam {
        align-items: flex-end;
    }

    .chat-line.liam .chat-bubble-cell {
        justify-content: flex-end;
        padding-right: 0;
        width: 100%;
    }

    .chat-line.emma .chat-bubble-cell {
        justify-content: flex-start;
        padding-left: 0;
        width: 100%;
    }

    .chat-avatar {
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto;
        text-align: left;
    }

    .chat-line.liam .chat-avatar {
        flex-direction: row-reverse;
    }

    .chat-avatar img,
    .avatar-placeholder {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .chat-avatar .name {
        margin-top: 0;
    }

    .bubble {
        max-width: 100% !important;
        width: 100%;
    }

    /* スマホ幅での吹き出ししっぽの再配置（上部へ） */
    .chat-line.emma .bubble::after {
        content: "";
        position: absolute;
        top: -9px;
        left: 15px;
        border-style: solid;
        border-width: 0 7px 9px 7px;
        border-color: transparent transparent #fff0f5 transparent;
        display: block;
        width: 0;
        z-index: 2;
    }

    .chat-line.emma .bubble::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 15px;
        border-style: solid;
        border-width: 0 7px 9px 7px;
        border-color: transparent transparent #ffd1dc transparent;
        display: block;
        width: 0;
        z-index: 1;
    }

    .chat-line.liam .bubble::after {
        content: "";
        position: absolute;
        top: -9px;
        right: 15px;
        border-style: solid;
        border-width: 0 7px 9px 7px;
        border-color: transparent transparent #e6f3ff transparent;
        display: block;
        width: 0;
        z-index: 2;
    }

    .chat-line.liam .bubble::before {
        content: "";
        position: absolute;
        top: -10px;
        right: 15px;
        border-style: solid;
        border-width: 0 7px 9px 7px;
        border-color: transparent transparent #b3d7ff transparent;
        display: block;
        width: 0;
        z-index: 1;
    }

    /* スマホ時のアクションボタン共通余白 */
    .phrase-card {
        padding-bottom: 15px !important;
    }
}

/* ==========================================
ダークモードテーマ (body.dark-theme) のカラーパレット
========================================== */
body.dark-theme {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-theme .container {
    background: #1e1e1e;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-theme .header {
    background: linear-gradient(135deg, #1f2d3d, #1a5276);
}

body.dark-theme .news-box {
    background: #252525;
    border-left-color: #3498db;
}

body.dark-theme .news-box h2 {
    color: #e0e0e0;
}

body.dark-theme .news-btn {
    background: #252525;
    border-color: #3498db;
    color: #3498db !important;
}

body.dark-theme .news-btn:hover {
    background: #3498db;
    color: #ffffff !important;
}

/* ダークモード時：3行要約セクション */
body.dark-theme .key-takeaways {
    background: #1b2e1e !important;
    border-left-color: #2cc36b !important;
}

body.dark-theme .key-takeaways h3,
body.dark-theme .key-takeaways ul,
body.dark-theme .key-takeaways li {
    color: #a2e9b1 !important;
}

body.dark-theme .intro-section {
    background: #252525;
}

body.dark-theme .intro-title {
    color: #e0e0e0;
    border-bottom-color: #444;
}

body.dark-theme .intro-card {
    background: #1e1e1e;
}

body.dark-theme .intro-text strong {
    color: #e0e0e0;
}

/* 会話劇ダークモードのカラーとしっぽ */
body.dark-theme .chat-line.emma .bubble {
    background: #3a1c24;
    border-color: #612d39;
    color: #fce4ec;
}

body.dark-theme .chat-line.emma .bubble::after {
    border-color: transparent #3a1c24 transparent transparent;
}

body.dark-theme .chat-line.emma .bubble::before {
    border-color: transparent #612d39 transparent transparent;
}

body.dark-theme .chat-line.liam .bubble {
    background: #1c2d3a;
    border-color: #2c475d;
    color: #e3f2fd;
}

body.dark-theme .chat-line.liam .bubble::after {
    border-color: transparent transparent transparent #1c2d3a;
}

body.dark-theme .chat-line.liam .bubble::before {
    border-color: transparent transparent transparent #2c475d;
}

/* スマホ表示かつダークモード時のしっぽ再配置 */
@media (max-width: 480px) {
    body.dark-theme .chat-line.emma .bubble::after {
        border-color: transparent transparent #3a1c24 transparent !important;
    }

    body.dark-theme .chat-line.emma .bubble::before {
        border-color: transparent transparent #612d39 transparent !important;
    }

    body.dark-theme .chat-line.liam .bubble::after {
        border-color: transparent transparent #1c2d3a transparent !important;
    }

    body.dark-theme .chat-line.liam .bubble::before {
        border-color: transparent transparent #2c475d transparent !important;
    }
}

body.dark-theme .seo-article h3 {
    color: #e0e0e0;
    border-left-color: #e0e0e0;
}

body.dark-theme .seo-article p {
    color: #cccccc;
}

body.dark-theme .keyword-section {
    background: #2c2519;
    border-color: #a05d00;
}

body.dark-theme .keyword-title {
    color: #f39c12;
}

body.dark-theme .keyword-box {
    background: linear-gradient(to right, #1e1e1e, #252525);
    border-left-color: #f39c12;
}

body.dark-theme .keyword-desc {
    color: #cccccc !important;
}

body.dark-theme .phrase-section {
    background: #252525;
    border-color: #444;
}

body.dark-theme .phrase-title {
    color: #e0e0e0;
}

body.dark-theme .phrase-sub {
    color: #95a5a6 !important;
}

body.dark-theme .phrase-card {
    background: #1e1e1e;
    border-left-color: #2cc36b;
}

body.dark-theme .phrase-jp {
    color: #bbbbbb !important;
}

body.dark-theme .faq-section {
    background: #1e1e1e;
    border-color: #444;
}

body.dark-theme .faq-title {
    color: #e0e0e0;
    border-bottom-color: #3498db;
}

body.dark-theme .faq-item {
    border-bottom-color: #444;
}

body.dark-theme .faq-q {
    color: #ff6b6b;
}

body.dark-theme .faq-a {
    color: #cccccc !important;
}

body.dark-theme .admin-tool {
    background: #151d27;
}

body.dark-theme #favorite-section {
    background: #2b2512 !important;
    border-color: #a05d00 !important;
}

body.dark-theme #favorite-section .phrase-title {
    color: #f1c40f !important;
}



/* 導入メッセージ装飾枠（プレミアムグラデーション＆角丸） */
.intro-lead {
    font-size: 15.5px;
    color: #4a5568;
    margin-bottom: 30px;
    line-height: 1.8;
    background: linear-gradient(135deg, #f0f4f8, #e2ebf0);
    border: 1px solid #d2dbe5;
    border-left: 6px solid #4a90e2;
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

body.dark-theme .intro-lead {
    background: linear-gradient(135deg, #1b263b, #151d2a) !important;
    border-color: #2e3b4e;
    border-left-color: #58a6ff;
    color: #cbd5e1;
}

/* アマゾンアソシエイトリンク（amzn.to）の視認性向上 */
a[href*="amzn.to"] {
    color: #e67e22;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s;
}

a[href*="amzn.to"]:hover {
    color: #d35400;
}

/* ダークモード時のアマゾンリンク（amzn.to） */
body.dark-theme a[href*="amzn.to"] {
    color: #ffb03a !important;
    text-decoration: underline;
}

body.dark-theme a[href*="amzn.to"]:hover {
    color: #ffcc75 !important;
}

/* モバイル表示における表示・干渉バグの物理的回避（広告タグ無効化など） */
ins, iframe, .google-auto-placed {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 640px) {
    /* スマホ表示時にはポップアップや結果パネル、お気に入りセクション、管理者ツール等の animation, backdrop-filter を無効化 */
    .phrase-section, .faq-section, .admin-tool, .key-takeaways, .news-box, .intro-section {
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
    }
    
    body.dark-theme .phrase-section, 
    body.dark-theme .faq-section, 
    body.dark-theme .admin-tool, 
    body.dark-theme .key-takeaways, 
    body.dark-theme .news-box, 
    body.dark-theme .intro-section {
        background: #1e1e1e !important; /* 不透明な背景色を強制 */
    }
}