/* =========================================================
   日本語入力（IME）風タイピング
   js/ime-typing.js とセットで使用
   ========================================================= */
.ime-typing {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ime-typing__line {
    position: relative;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
}

.ime-typing__ghost {
    visibility: hidden;
}

.ime-typing__live {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}

/* 変換前の入力中の文字（IME の下線） */
.ime-typing__comp {
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(23, 81, 124, 0.55);
}

/* 変換候補を選んだ瞬間（太い下線＋薄い背景） */
.ime-typing__comp.is-converted {
    text-decoration: underline solid;
    text-decoration-thickness: 3px;
    text-decoration-color: #f0a339;
    background: rgba(240, 163, 57, 0.16);
}

.ime-typing__caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.12em;
    background: #f0a339;
    animation: ime-caret 0.9s steps(1) infinite;
}

@keyframes ime-caret {
    50% { opacity: 0; }
}

.ime-typing.is-done .ime-typing__caret {
    animation-duration: 1.2s;
}

/* 横並び（PC は 1 行、スマホは 2 行） */
.ime-typing--inline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 768px) {
    .ime-typing--inline {
        flex-direction: column;
        align-items: center;
    }
}

/* MVV の引用（左揃え・折り返し可） */
.ime-typing--quote {
    display: block;
}

.ime-typing--quote .ime-typing__line {
    display: block;
    white-space: normal;
}

.ime-typing--quote .ime-typing__live {
    right: 0;
    white-space: normal;
}

/* タイピング開始前は文字を隠す（JS が動いたときだけ付くクラス） */
.ime-typing.is-waiting .ime-typing__line {
    visibility: hidden;
}

/* 短い一文の高速タイプ（カーソル・下線なし） */
.quick-type {
    position: relative;
    display: inline-block;
}

.quick-type__ghost {
    visibility: hidden;
}

.quick-type__live {
    position: absolute;
    left: 0;
    top: 0;
    white-space: inherit;
}