:root {
    /* 通常時のキーボード各キーのカラー設定 (書き換え可能) */
    --color-lower: #501800;        /* 小文字キー (低彩度・黄み寄りベージュ) */
    --color-upper: #003888;        /* 大文字キー */
    --color-number: #38302a;       /* 数字キー(グレー) */
    --color-blue-number: #206000;  /* 数字キー(緑) */
    --color-symbol: #383630;       /* 記号キー */
    --color-hiragana: #705830;     /* ひらがなキー */
    --color-katakana: #703400;     /* カタカナキー */
    --color-enter: #0070e0;        /* Enterキー (水色シアン) */
    --color-enter-bs: #a03016;     /* EnterBSキー */
    --color-bs: #982000;           /* BSキー */
    --color-tab: #0048d0;          /* Tab/Navキー */
    --color-ins: #987000;          /* Insキー */
    --color-menu: #c97010;         /* Menuキー */
    --color-switch: #b05000;       /* Switchキー (少し暗めオレンジ寄り) */
    --color-space:  #A09474;        /* Spaceキー (ベージュ調) */
    --color-yellow: #b09000;       /* 特殊黄色キー(▶) */
}

/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

body {
    background-color: #050505;
    color: #f0f0f0;
    font-family: 'Inter', 'Outfit', sans-serif;
    overflow: hidden;
    height: 100dvh; /* Dynamic Viewport Heightでツールバー開閉時のズレを防止 */
    width: 100%;
    position: fixed; /* タッチスクロール等による画面ズレを絶対防止 */
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* アプリコンテナ */
.app-container {
    width: 100%;
    max-width: 844px;
    height: 100%;
    max-height: 452px;
    background-color: #080808; /* もっと黒に近いグレー */
    border: 1px solid #1c1c1c; /* 境界線を暗く */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 6px 10px; /* bottom: 10px×60%=6px キー下の隔間 */
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    container-type: inline-size; /* コンテナクエリを有効にしてキー内の比率を完全同期 */
}

/* 表示エリア */
.display-wrapper {
    flex: 1;
    background-color: #000000;
    border: 1px solid #1c1c1c; /* 境界線を暗く */
    margin-bottom: 12px;
    border-radius: 6px;
    padding: 10px;
    overflow-y: auto;
    cursor: text;
    position: relative;
}

.display-area {
    font-size: 20px;
    font-weight: normal; /* 太字を解除 */
    line-height: 1.4; /* 元の行間に復元 */
    word-break: break-all;
    white-space: pre-wrap;
    letter-spacing: 0.12em; /* 文字間隔を0.12emに調整 */
}

/* 表示エリアの各行 */
.display-line {
    min-height: 28px; /* 元の高さに復元 */
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* 大学ノート風のうっすらした罫線 */
}

/* 表示エリアの行背景（偶数・奇数の区別用） */
.display-line.active {
    background-color: transparent;
}

/* カーソル */
.cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: #ffffff;
    margin-left: -1px;
    vertical-align: middle;
    animation: blink 1.06s infinite steps(2, start);
}

.cursor.overwrite {
    width: 10px;
    height: 4px;
    margin-top: 1em;
}

@keyframes blink {
    to { visibility: hidden; }
}

/* キーボードコンテナ */
.keyboard-container {
    height: calc(76px * 3); /* KEY_SIZE * 3 (GAPなし) */
    display: flex;
    flex-direction: column;
    gap: 0px; /* ROW_GAPを無しに */
    position: relative;
    background-color: #000000; /* 隙間からの透過を防ぐため背景を完全に黒に */
}

/* キーボードグリッド行 */
.keyboard-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0px; /* KEY_GAPを無しに */
}

/* キー本体 */
.key {
    aspect-ratio: 1 / 1;
    width: calc(100% + 0.5px); /* サブピクセル隙間を埋めるため0.5px拡張 */
    height: calc(100% + 0.5px); /* サブピクセル隙間を埋めるため0.5px拡張 */
    max-height: 76px; /* キー自体の物理的な膨張・はみ出しを防ぐ */
    background-color: transparent !important; /* 背景画像を使用するため透明化 */
    border-radius: 0; /* 隙間を無くすため角丸を0に変更 */
    border: none !important;
    color: #f0f0f0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.05s;
    position: relative;
    box-shadow: none !important; /* 画像の立体感を優先して影をオフ */
    overflow: hidden;
    touch-action: none;
    white-space: nowrap;
}

.key:active {
    transform: scale(0.95);
}

/* キートップ背景画像専用レイヤー (JavaScriptからSVGカラーフィルタを適用) */
.key-bg {
    position: absolute;
    inset: 0;
    background-image: url('keytop01.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* キートップ文字・記号レイヤー (画像の手前に重ねる) */
.key-text {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.key.char-len-1-lower {
    font-size: 8.6cqw; /* 大文字(8.0cqw)との見かけのバランスをとるため、8.6cqwへ微増 */
    line-height: 1;
}

/* qypjg 用のディセンダ補正（上に引き上げる） */
.key.char-len-1-lower.descender-key {
    padding-bottom: 1.2cqw; /* フォントサイズ調整に合わせて微修正 */
}

.key.char-len-1-upper,
.key.char-len-1-default {
    font-size: 8.0cqw; /* さらに1割拡大 (7.3cqw から 8.0cqw) */
    line-height: 1;
}

/* 大文字のみ位置を「ちょびっと左、少し下」に微調整 */
.key.char-len-1-upper {
    padding-top: 0.7cqw;   /* さらに下へ */
    padding-right: 0.3cqw; /* さらに左へ */
}

.key.char-len-2 {
    font-size: 5.2cqw;
}

.key.char-len-3 {
    font-size: 4.0cqw;
}

.key.char-len-4 {
    font-size: 3.2cqw;
}

.key.char-len-5 {
    font-size: 2.8cqw;
}

/* 記号文字の下へのはみ出し対策: テキストを少し上に持ち上げる */
.key.symbol-key .key-text {
    transform: translateY(-0.8cqw);
}

/* アンダーバーと矢印キーをさらに上に引き上げる補正 */
.key.key-underbar .key-text {
    transform: translateY(-2.8cqw);
}
.key.key-arrow .key-text {
    transform: translateY(-1.2cqw);
}

/* マイナスとアスタリスクの垂直位置調整（プラス + の中心に合わせる） */
.key.key-minus .key-text {
    transform: translateY(-0.6cqw); /* プラスの中心に揃えるために上に引き上げる */
}
.key.key-asterisk .key-text {
    transform: translateY(1.55cqw); /* プラスの中心に揃えるために少し下に下げる */
}

/* キーボードモードごとのカラー設定 */
.keyboard-lower .key {
    background-color: #683028; /* 少し明るくした暗い茶色 */
}
.keyboard-lower .key:active {
    background-color: #3d1b09;
}

.keyboard-upper .key {
    background-color: #205080; /* 少し明るくした暗いネイビー */
}
.keyboard-upper .key:active {
    background-color: #183f73;
}

.keyboard-number .key {
    background-color: #484030; /* もっと暗いグレー */
}
.keyboard-number .key.blue-number {
    background-color: #166058; /* 中間の明るさで少し彩度を高めたティール (0123456789./*-+) */
}
.keyboard-number .key.blue-number:active {
    background-color: #205a60;
}
.keyboard-number .key:active {
    background-color: #bfbfbf;
}

.keyboard-symbol .key {
    background-color: #484030; /* もっと暗いグレー */
}
.keyboard-symbol .key:active {
    background-color: #bfbfbf;
}

.keyboard-hiragana .key {
    background-color: #787058; /* 少し明るくしたピンク寄りの赤みがかったグレー */
    color: #f0f0f0; /* 文字色は白 */
}
.keyboard-hiragana .key:active {
    background-color: #85475c;
}
.keyboard-hiragana .key.functional,
.keyboard-hiragana .key.btn-nav,
.keyboard-hiragana .key.btn-enter,
.keyboard-hiragana .key.btn-enter-bs,
.keyboard-hiragana .key.btn-bs {
    color: #ffffff;
}

.keyboard-katakana .key {
    background-color: #886000; /* さらに彩度を高めた暗いイエローブラウン */
    color: #f0f0f0;
}
.keyboard-katakana .key:active {
    background-color: #7d4200;
}
.keyboard-katakana .key.functional,
.keyboard-katakana .key.btn-nav,
.keyboard-katakana .key.btn-enter,
.keyboard-katakana .key.btn-enter-bs,
.keyboard-katakana .key.btn-bs {
    color: #f0f0f0;
}

/* 特殊キーカラー */
.key.btn-enter {
    background-color: #0088e0 !important; /* enterKeyColor */
    font-size: 3.50cqw !important;
}
.key.btn-enter:active {
    background-color: #bfbfbf !important;
}

.key.btn-enter-bs {
    background-color: #a03016 !important; /* bsKeyColor */
    font-size: 6.6cqw !important;
}
.key.btn-enter-bs:active {
    background-color: #bfbfbf !important;
}

.key.btn-bs {
    background-color: #762216 !important; /* bsKeyColor */
    font-size: 6.24cqw !important;
}
.key.btn-bs:active {
    background-color: #bfbfbf !important;
}

.key.btn-tab, .key.btn-ins, .key.btn-nav {
    background-color: #0048d0 !important; /* tabKeyColor / insKeyColor */
}
.key.btn-tab:active, .key.btn-ins:active, .key.btn-nav:active {
    background-color: #bfbfbf !important;
}

/* カーソルキー：Tabと同じ青系を明示的に保証 */
.key.btn-nav {
    background-color: #0048d0 !important;
}

.key.btn-ins {
    background-color: #a88800 !important;
}

.key.btn-menu {
    background-color: #e6730f !important; /* saveKeyColor */
}
.key.btn-menu:active {
    background-color: #bfbfbf !important;
}

.key.btn-switch {
    background-color: #e6730f !important; /* 元のオレンジ */
}
.key.btn-switch:active {
    background-color: #bfbfbf !important;
}

.key.btn-space {
    background-color: #a09880 !important; /* spaceKeyColor */
    font-size: 3.2cqw !important;
}
.key.btn-space:active {
    background-color: #bfbfbf !important;
}

.key.btn-yellow {
    background-color: #d9a300 !important;
    font-size: 6.4cqw !important;
}
.key.btn-yellow:active {
    background-color: #ffc400 !important;
}

/* Switchキーのテキスト改行 */
.key.btn-switch {
    line-height: 1.05;
    font-size: 4.2cqw; /* cqwに変更してレスポンシブ同期 */
    font-weight: bold;
}

/* フリックガイド (インジケーター) */
.flick-indicators {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 600; /* ドラッグガイド(500)より手前に表示するよう変更 */
    display: none;
}

.flick-indicator {
    position: absolute;
    width: 30px;
    height: 30px;
    color: #f0f0f0;
    font-size: 32px; /* 32px に拡大 */
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    transition: transform 0.1s;
}

/* ポップアップモーダル共通 */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    border-radius: 8px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* メニューダイアログ */
.menu-dialog {
    width: 280px;
    height: 380px;
    background: rgba(24, 24, 24, 0.95);
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

/* Popダイアログ */
.pop-dialog {
    width: calc(100% - 24px);
    max-width: 580px;
    height: 420px;
    background: rgba(24, 24, 24, 0.95);
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.pop-title {
    font-size: 22px;
    font-weight: bold;
    color: #f0f0f0;
    margin-bottom: 15px;
}

.journal-list-container {
    width: 100%;
    flex: 1;
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 5px;
    box-sizing: border-box;
}

.journal-item {
    padding: 10px;
    color: #ccc;
    font-size: 15px;
    border-bottom: 1px solid #202020;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.journal-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.journal-item.selected {
    background: rgba(230, 115, 15, 0.2);
    color: #e6730f;
    font-weight: bold;
}

.pop-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pop-btn {
    flex: 1;
    height: 40px;
    background-color: #404040;
    color: #f0f0f0;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pop-btn:hover:not(:disabled) {
    background-color: #505050;
}

.pop-btn#btnPopExecute {
    background-color: #0d5e17;
}
.pop-btn#btnPopExecute:hover:not(:disabled) {
    background-color: #147a21;
}

.pop-btn#btnPopDelete {
    background-color: #762216;
}
.pop-btn#btnPopDelete:hover:not(:disabled) {
    background-color: #9c2e1f;
}

.pop-btn:disabled, .pop-btn.disabled {
    background-color: rgba(60, 60, 60, 0.4) !important;
    color: rgba(222, 222, 222, 0.3) !important;
    cursor: not-allowed;
}

.menu-title {
    font-size: 22px;
    font-weight: bold;
    color: #f0f0f0;
    margin-bottom: 15px;
    margin-top: 5px;
}

.menu-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-btn {
    width: 100%;
    height: 40px;
    background-color: #404040;
    color: #f0f0f0;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.menu-btn:hover {
    background-color: #505050;
}

.menu-btn:disabled {
    background-color: rgba(80, 80, 80, 0.5);
    color: rgba(222, 222, 222, 0.3);
    cursor: not-allowed;
}

/* 確認ダイアログ */
.confirm-dialog {
    width: 320px;
    height: 160px;
    background: rgba(29, 19, 19, 0.95);
    border: 1px solid #5a2e28;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

.confirm-title {
    font-size: 20px;
    font-weight: bold;
    color: #f0f0f0;
    margin-top: 10px;
}

.confirm-buttons {
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.confirm-btn {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.confirm-btn:hover {
    opacity: 0.9;
}

.confirm-btn.yes {
    background-color: #762216; /* bsKeyColor */
    color: #f0f0f0;
}

.confirm-btn.no {
    background-color: #4a4a4a;
    color: #f0f0f0;
}

/* レスポンシブ表示調整（縦向き表示など） */
@media (max-aspect-ratio: 1/1) {
    /* 縦画面対応: 解像度比率を調整 */
    .app-container {
        max-height: 100%;
        height: 100vh;
        border-radius: 0;
        border: none;
        /* 下の隙間をキー1個分に: (画面幅 - 左右padding20px) / 10列 × 縦横比 */
        padding-bottom: calc((100vw - 20px) / 10 * clamp(1, 100vh / 100vw, 1.9));
    }

    /* キーを画面縦横比に合わせて縦長に（最大1:1.9でキャップ） */
    .key {
        aspect-ratio: 1 / clamp(1, calc(100vh / 100vw), 1.9);
        max-height: none;
    }

    /* keyboard-containerの固定高さを解除してキー比率に追従 */
    .keyboard-container {
        height: auto;
    }
}

/* ─── フリックメニュー表示中オーバーレイ ─── */
/* app-containerのcontainer-typeがstacking contextを形成するためz-indexが有効 */
.app-container.flick-active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 450;
    pointer-events: none;
    border-radius: inherit;
}

/* Switchキー（A&a1）はオーバーレイより手前に表示 */
.app-container.flick-active .key.btn-switch {
    position: relative;
    z-index: 451;
}

/* ドラッグガイドボタンのスタイル */
.drag-guide-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
    display: none;
}

.drag-guide-key {
    position: absolute;
    border-radius: 16%; /* 角丸を16%に設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f0f0f0;
    font-size: 6.6cqw; /* 大文字キーと同等サイズに比率化 */
    font-weight: bold;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
    border: 0.41cqw solid #e6730f; /* 枠太さを60%に縮小 (0.68→0.41cqw) */
    transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
    overflow: hidden; /* 子要素のkey-bg画像が角丸からはみ出るのを防止 */
}

/* ドラッグ中のホバー強調表示 */
.drag-guide-key.active {
    transform: scale(1.1);
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 6px 15px rgba(0, 0, 0, 0.6);
}

/* 変換候補バー */
.candidate-bar {
    width: 100%;
    height: 44px;
    background-color: #0d0d0d;
    border-bottom: 1px solid #1a1a1a;
    display: none;
    align-items: center;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 0px;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    box-sizing: border-box;
}
.candidate-bar::-webkit-scrollbar {
    display: none;
}

.candidate-item {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 16px;
    background-color: #1a1a1a;
    color: #f0f0f0;
    border: none;
    border-right: 1px solid #2d2d2d;
    border-radius: 0;
    font-size: 13px !important;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}
.candidate-item.selected {
    background-color: #e6730f;
    color: #ffffff;
}
.candidate-item:active {
    background-color: #ffa047;
    color: #ffffff;
}

/* 未確定・変換中テキストの下線装飾 */
.unconfirmed-text {
    text-decoration: underline;
    text-decoration-color: #e6730f;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}