/* 枠と高さ・asideは style.css の18変本筮法と同じ部品を使う。 */
.input-page #ai-box-wrap {
    overflow-y: auto;
    padding-top: 1.5em;
}
.input-page .ai-content :is(#ai-question, #ai-noticed-words, #ai-situation-connection) {
    min-height: 4em;
    resize: vertical;
}
.input-page .ai-content button#copy-ai-prompt {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding-right: 1.3em;
    padding-left: 1.3em;
}
.input-page .ai-content .ai-prompt-help {
    margin: 0.8em 0 0;
    line-height: 1.3;
}
@media (max-width: 767px) {
    .input-page #ai-box-wrap { font-size: 1rem; }
    .input-page .ai-content textarea {
        font-size: 16px;
        line-height: 1.4;
        padding: 0.5em 0.7em;
        margin-bottom: 1em;
    }
    .input-page .ai-content :is(#ai-question, #ai-noticed-words, #ai-situation-connection) {
        height: calc(4.2em + 1em + 2px - 12px);
        min-height: 0;
        max-height: calc(4.2em + 1em + 2px - 12px);
        resize: none;
        overflow-y: auto;
    }
}
.input-page-title { font-size: 1.4rem; font-weight: 700; text-align: center; }
.input-lead { margin: 0.7em 0 1em; text-align: center; font-size: 0.9rem; }

.input-help p { margin: 0 0 1em; line-height: 1.8; }
.input-help h2 { font-weight: 700; margin-bottom: 1em; }
#input-copy-status { margin: 1em; font-size: 0.85rem; }
#input-instructions, .input-help p { font-size: 0.85rem; line-height: 1.8; margin-bottom: 1em; }
.input-polarity label { flex: 1; min-width: 0; cursor: pointer; }
.input-polarity input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.input-polarity input:checked + span { background: var(--bg-color2); border-color: var(--link-color); color: var(--link-color); }
.input-polarity input:focus-visible + span { outline: 2px solid var(--link-color); outline-offset: 2px; }
.input-line-preview { width: 1.8em; height: 0.4em; background: currentColor; }
.input-line-preview.is-yin { background: linear-gradient(to right,currentColor 43%,transparent 43%,transparent 57%,currentColor 57%); }
.input-action {
    display: block;
    margin: 1em auto 0;
    padding: 0.2em 1.7em 0.1em;
    border: 1px solid var(--border-color);
    border-radius: 0.6em;
    background: #fff;
    color: var(--text-color);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    font: inherit;
    font-size: 0.8em;
    line-height: 2;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}
.input-action:disabled { opacity: 0.5; cursor: default; }
#input-error { color: var(--color-red); font-size: 0.85rem; text-align: center; margin: 0.5em 0 0; }
#input-error:empty { display: none; }
.input-placeholder { padding: 3em 1em; line-height: 1.8; color: var(--text-color2); }
.input-page [hidden] { display: none !important; }
@media (max-width: 767px) {

    .input-page .input-sub-tabs button { color: var(--text-color2); }
    .input-page .input-sub-tabs button[aria-selected="true"] { background: var(--text-color); color: #fff; }
    .input-page #ai-box-wrap { position: absolute; top: 54px; bottom: 0; left: 0; right: 0; height: auto; overflow-y: auto; }
}

/* 18penのcontrol・visual-trigger・下余白の合計と開始位置を揃える。 */
.input-intro {
    height: var(--divination-operation-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.input-intro .input-lead {
    margin: 0 0 0;
    align-self: stretch;
}
@media (max-width: 767px) {
    .input-intro {
        height: var(--divination-operation-height);
    }
}

/* 入力中のみ、枠内の見出しとサブ卦タブを隠す。 */
.input-page .hexagram-wrap:not(.is-result) .gua-prefix-wrap,
.input-page .hexagram-wrap:not(.is-result) .input-sub-tabs {
    display: none;
}

/* 本卦は18penと同じく、卦名と爻を #hexagram のFlex項目として配置する。 */
#honka-result:not([hidden]),
#input-honka {
    display: contents;
}

/* 18penと同じ4枚分の幅でサブ卦を横移動する。 */
#input-sub-gua-body {
    display: flex;
    width: 400%;
    transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
    #input-sub-gua-body { transition: none; }
}

/* 入力中は2枚の結果パネルを使わず、仕切りのない1枚の面にする。 */
#gua-input-form {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 2em;
    width: calc(100% - 20px);
    height: calc(100% - 0.8em);
    min-height: 0;
    margin: 0.4em auto;
    padding: 1em;
    box-sizing: border-box;
    background: #fff;
}
.input-entry-lines,
.input-entry-guide {
    min-width: 0;
}
.input-entry-guide p {
    font-size: 0.85rem;
    line-height: 1.8;
    margin-bottom: 1em;
}
@media (max-width: 767px) {
    #gua-input-form {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 1.5em;
        width: calc(100% - 12px);
        height: calc(100% - 11px);
        min-height: 0;
        margin: 5px 6px 6px;
        padding: 1em;
        border-radius: 20px;
    }
}

/* 方式を切り替えても枠の開始位置は固定する。 */
.input-intro { position: relative; padding-bottom: 3.2em; }
.input-mode-switch { position: absolute; bottom: 1.6em; left: 0; right: 0; display: flex; justify-content: center; width: max-content; max-width: calc(100% - 2em); margin: 0 auto; border-bottom: 1px solid var(--border-color); }
.input-mode-switch button { position: relative; flex: 0 1 auto; min-width: 0; padding: 0.8em 2.5em 0.4em; min-height: 44px; font: inherit; font-size: 0.85rem; white-space: nowrap; border: 0; border-radius: 0; background: transparent; color: var(--text-color); opacity: 0.3; cursor: pointer; }
.input-mode-switch button { font-weight: 600 !important; }
.input-mode-label { display: inline-block; position: relative; padding-left: 1.94em; }
.input-mode-label img { position: absolute; left: 0; top: 50%; width: 1.54em; height: 1.54em; transform: translateY(-50%); }
.input-mode-switch button[aria-pressed="true"] { opacity: 1; }
.input-mode-switch button[aria-pressed="true"]::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 4px; background: var(--text-color); }
.input-mode-switch button:focus-visible { outline: 2px solid var(--link-color); outline-offset: 2px; }
.is-trigram-mode .input-polarity { display: none; }
.input-trigram-group { min-width: 0; margin: 0 0 0.8em; padding: 0; border: 0; }
.input-trigram-group legend { font-weight: 700; margin-bottom: 0.3em; }
.input-trigram-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3em; }
.input-trigram-options label { cursor: pointer; }
.input-trigram-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.input-trigram-options label > span { display: flex; flex-direction: column; align-items: center; padding: 0.3em 0; font-size: 0.75rem; border: 1px solid var(--border-color); border-radius: 0.3em; }
.input-trigram-options input:checked + span { border-color: var(--link-color); color: var(--link-color); background: var(--bg-color2); }
.input-trigram-options input:focus-visible + span { outline: 2px solid var(--link-color); outline-offset: 2px; }
@media (max-width: 767px) {
    .input-intro { padding-bottom: 3em; }
    .input-intro .input-lead { margin-top: 0.3em; font-size: 0.8rem; }
    .input-mode-switch { bottom: 0.8em; max-width: 100%; }
    .input-mode-switch button { display: flex; align-items: flex-end; justify-content: center; padding: 0.8em 0.9em 0.4em; font-size: 0.9rem !important; }

}

/* 18penの結果パネル2枚と、その余白・外枠の合計に合わせる。 */
.input-page .hexagram-wrap {
    height: var(--hexagram-frame-height);
}
.input-help h3 {
    font-weight: 700;
    margin-bottom: 1em;
}
@media (max-width: 767px) {
    .input-page .hexagram-wrap {
        height: var(--hexagram-frame-height);
    }
}

/* 後続のinput-introに覆われず、修正ボタンを操作できるようにする。 */
@media (min-width: 768px) {
    .input-page #edit-input-wrap {
        z-index: 1;
    }
}

/* 入力時も18penと同じ爻寸法（7.5em × 1.3em、行高2.35em）。 */
.input-entry-lines { position: relative; font-size: 1rem; }
#input-lines { display: flex; flex-direction: column-reverse; }
.input-line-row, .input-columns {
    display: grid;
    grid-template-columns: 2.5em 0 7.5em 7em 2.5em;
    column-gap: 0.4em;
    align-items: center;
}
.input-columns { height: 2.35em; font-size: inherit; color: var(--text-color); text-align: center; }
.input-columns > span { font-size: 0.8em; }
.input-line-row { height: 2.35em; padding: 0; }
.input-line-row:nth-child(4) { margin-bottom: 0.9em; }
.input-line-label { color: var(--text-color); font-size: 0.8em; }
.input-line-row > .input-line-state { grid-column: 3; }
.input-line-row > .input-polarity { grid-column: 4; }
.input-line-row > .input-moving { grid-column: 5; }
.input-line-state { display: flex; align-items: center; justify-content: center; }
.input-line-state .line { width: 7.5em; height: 1.3em; margin: 0; font-style: normal; flex-shrink: 0; }
.input-line-state .line .segment { background: var(--text-color); }
.input-line-state .line.yang .segment:last-child { display: none; }
.input-line-state.is-unselected .line .segment { background: var(--bg-color2); }
.input-polarity { display: flex; gap: 0.3em; }
.input-polarity label > span { display: flex; align-items: center; justify-content: center; height: 1.9em; border: 1px solid var(--border-color); border-radius: 0.25em; font-size: 1em; }
.input-moving { display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; }
.input-moving input { width: 1.25em; height: 1.25em; font-size: inherit; accent-color: var(--color-red); }
.is-trigram-mode .input-line-row,
.is-trigram-mode .input-columns { grid-template-columns: 2.5em 2.5em 7.5em 0 2.5em; }
.is-trigram-mode .input-polarity-heading { visibility: hidden; }
.input-trigram-caption { display: none; }
.is-trigram-mode .input-trigram-caption { position: absolute; left: 2.9em; width: 2.5em; height: 6.05em; border-right: 1px solid var(--border-color); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.input-trigram-upper { top: 2.85em; }
.input-trigram-lower { top: 10.8em; }
.input-trigram-caption > span:first-child { font-size: 0.8em; border: 1px solid var(--border-color); padding: 0.1em; }
.input-trigram-options b { display: none; }
.input-trigram-options label > span { min-height: 2.6em; justify-content: center; }
@media (max-width: 767px) {
    #gua-input-form { display: flex; flex-direction: column; overflow-y: auto; gap: 1em; }
    .input-entry-lines { font-size: clamp(0.7rem, 3.1vw, 0.85rem); width: 100%; flex-shrink: 0; }
    .input-line-row, .input-columns {
        grid-template-columns: 2em minmax(0, 1fr) 7.5em 4.8em 2em;
        column-gap: 0.25em;
    }
    .is-trigram-mode .input-line-row, .is-trigram-mode .input-columns {
        grid-template-columns: 2em minmax(0, 1fr) 7.5em minmax(0, 1fr) 2em;
    }
    .input-columns { height: 2.35em; }
    .input-line-row { height: 2.35em; min-height: 32px; padding: 0; }
    .input-line-row:nth-child(4) { margin-bottom: 0.9em; }
    .input-polarity { gap: 0.2em; }
    .input-polarity label > span { height: 2.2em; min-height: 28px; box-sizing: border-box; }
    .input-moving input { width: 1.4em; height: 1.4em; }
    .input-moving { min-height: 32px; }
    .is-trigram-mode .input-trigram-caption { left: calc(50% - 6.3em); width: 2em; height: 6.05em; }
    .input-trigram-upper { top: 2.85em; }
    .input-trigram-lower { top: 10.8em; }
    .input-entry-guide { width: 100%; flex-shrink: 0; }
    .input-trigram-options label > span { min-height: 44px; box-sizing: border-box; }
}

/* 八卦未選択時は縦線も表示しない。 */
.input-trigram-caption:empty { border-right: 0; }
.input-trigram-caption > span:nth-child(1) {
    font-size: 0.96em;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    padding: 0 0.2em;
}
.input-trigram-caption > span:nth-child(2) { font-size: 1.2em; line-height: 1.5; }
/* PCの淡色枠は共通の10px paddingだけで確保する。 */
@media (min-width: 768px) {
    #gua-input-form {
        width: 100%;
        height: 100%;
        margin: 0;
    }
}

/* PCの入力プレビューも結果表示と同じ配置にする。 */
@media (min-width: 768px) {
    .input-trigram-caption > span:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 50%;
        width: 1.5em;
        height: 1.5em;
        padding: 0;
        line-height: 1;
        box-sizing: border-box;
        transform: translateX(-50%);
    }
    .input-trigram-caption > span:nth-child(2) {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        line-height: 1;
        text-align: center;
        transform: translateY(-50%);
    }
}

/* 入力プレビューの八卦名も下端、自然の象は中央に揃える。 */
.input-trigram-caption > span:nth-child(1) {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
    transform: translateX(-50%);
}
.input-trigram-caption > span:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    line-height: 1;
    text-align: center;
    transform: translateY(-50%);
}

/* 陰陽・八卦の選択は、連続する一体型ボタンにする。 */
.input-polarity {
    gap: 0;
}
.input-polarity label > span {
    border-radius: 0;
}
.input-polarity label + label > span {
    margin-left: -1px;
}
.input-polarity label:first-child > span {
    border-radius: 0.2em 0 0 0.2em;
}
.input-polarity label:last-child > span {
    border-radius: 0 0.2em 0.2em 0;
}
.input-polarity input:checked + span,
.input-trigram-options input:checked + span {
    position: relative;
    z-index: 1;
    background: var(--color-red);
    border-color: var(--color-red);
    color: #fff}
.input-line-state.is-unselected .line .segment {
    background: var(--bg-color5);
}
.is-trigram-mode .input-trigram-caption:empty {
    display: none;
}
.is-trigram-mode .input-trigram-caption:not(:empty) {
    display: flex;
}
.input-trigram-options {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
}
.input-trigram-options label > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3em;
    min-height: 4.4em;
    padding: 0.4em 0;
    font-size: 1em;
    line-height: 1.4;
    border-radius: 0;
}
.input-trigram-options label + label > span {
    margin-left: -1px;
}
.input-trigram-options label:first-child > span {
    border-radius: 0.2em 0 0 0.2em;
}
.input-trigram-options label:last-child > span {
    border-radius: 0 0.2em 0.2em 0;
}
.input-trigram-group {
    margin-bottom: 1em;
}
@media (min-width: 768px) {
    #gua-input-form {
        gap: 1.5em;
    }
    .input-line-row, .input-columns {
        grid-template-columns: 2em 0 7.5em 6em 2.5em;
        column-gap: 0.4em;
    }
    .is-trigram-mode .input-line-row,
    .is-trigram-mode .input-columns {
        grid-template-columns: 2em 2.5em 7.5em 0 2.5em;
    }
    .input-entry-guide {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .is-trigram-mode .input-entry-guide {
        align-self: center;
        height: 15em;
        padding-top: 0.525em;
        box-sizing: border-box;
        justify-content: flex-start;
    }
    .is-trigram-mode #input-trigrams {
        padding-top: 0;
        margin-left: 30px;
    }
    .is-trigram-mode .input-trigram-group:first-child {
        position: relative;
    }
    .is-trigram-mode .input-trigram-group:first-child legend {
        position: absolute;
        bottom: 100%;
    }
    .input-entry-guide > .input-action {
        margin: 0.67em auto 1em;
    }
    .is-trigram-mode .input-entry-guide > .input-action {
        transform: translateX(15px);
        margin-top: 1.07em;
        margin-bottom: 0;
    }
    #gua-input-form:not(.is-trigram-mode) .input-entry-guide {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    #gua-input-form:not(.is-trigram-mode) .input-action {
        grid-row: 2;
    }
    #gua-input-form:not(.is-trigram-mode) #input-error {
        grid-row: 3;
        align-self: start;
    }
    .is-trigram-mode #input-error {
        margin-left: 30px;
    }
}
@media (max-width: 767px) {
    .input-trigram-group legend {
        font-size: 0.85em;
    }
    .input-trigram-options label > span {
        font-size: clamp(0.975rem, 4.42vw, 1.235rem);
        min-height: 4em;
    }
    .is-trigram-mode .input-action {
        margin-top: 1.5em;
    }
    #gua-input-form:not(.is-trigram-mode) .input-action {
        margin-top: 3.7em;
    }
}

/* 両方式で爻名・八卦・線の3列を共通にし、3本揃うとラベルを表示する。 */
.input-entry-lines {
    --input-row-height: 2.35em;
}
.input-entry-lines .input-trigram-caption {
    position: absolute;
    left: 2.4em;
    width: 2.5em;
    height: calc(2 * var(--input-row-height) + 1.3em);
    border-right: 1px solid var(--border-color);
    box-sizing: border-box;
}
.input-entry-lines .input-trigram-caption:empty {
    display: none;
}
.input-entry-lines .input-trigram-caption:not(:empty) {
    display: flex;
}
.input-entry-lines .input-trigram-upper {
    top: calc(2.35em + (var(--input-row-height) - 1.3em) / 2);
}
.input-entry-lines .input-trigram-lower {
    top: calc(2.35em + (var(--input-row-height) - 1.3em) / 2 + 3 * var(--input-row-height) + 0.9em);
}
@media (min-width: 768px) {
    .input-line-row, .input-columns {
        grid-template-columns: 2em 2.5em 7.5em 6em 2.5em;
    }
    .is-trigram-mode .input-line-row,
    .is-trigram-mode .input-columns {
        grid-template-columns: 2em 2.5em 7.5em 0 2.5em;
    }
}
@media (max-width: 767px) {
    .input-entry-lines {
        --input-row-height: max(2.35em, 32px);
    }
    .input-line-row, .input-columns,
    .is-trigram-mode .input-line-row, .is-trigram-mode .input-columns {
        grid-template-columns: 1.8em 1.8em 7.5em 4.5em 1.5em;
        column-gap: 0.25em;
    }
    .input-entry-lines .input-trigram-caption {
        left: 2.05em;
        width: 1.8em;
    }
}

/* PCの入力欄を18penの爻名・八卦ラベル・線の横位置に合わせる。 */
@media (min-width: 768px) {
    .input-entry-lines {
        padding-left: 2px;
        /* 中央揃えの対象から、上部の見出し行（2.35em）を除く。 */
        top: -1.175em;
    }
    .input-line-row, .input-columns {
        grid-template-columns: 2em calc(2.5em + 13px) 7.5em 6em 2.5em;
    }
    .is-trigram-mode .input-line-row,
    .is-trigram-mode .input-columns {
        grid-template-columns: 2em calc(2.5em + 13px) 7.5em 0 2.5em;
    }
    .input-entry-lines .input-trigram-caption {
        left: calc(2.4em + 2px);
    }
}

/* スマホの入力プレビューは、操作欄とは独立して線を中央に置く。 */
@media (max-width: 767px) {
    .input-entry-lines {
        font-size: clamp(0.65rem, 2.9vw, 0.75rem);
    }
    .input-line-row, .input-columns,
    .is-trigram-mode .input-line-row, .is-trigram-mode .input-columns {
        position: relative;
        display: block;
        height: var(--input-row-height);
        min-height: 0;
    }
    .input-columns {
        height: 2.35em;
    }
    .input-line-label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: 1em;
    }
    .input-trigram-space {
        display: none;
    }
    .input-line-row > .input-line-state {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .input-line-row > .input-polarity {
        position: absolute;
        top: 50%;
        left: calc(50% + 4em);
        width: 5em;
        transform: translateY(-50%);
    }
    .input-polarity label > span {
        min-height: 28px;
    }
    .input-line-row > .input-moving {
        position: absolute;
        top: 0;
        right: -0.2em;
        width: 1.8em;
        height: 100%;
    }
    .input-columns .input-polarity-heading {
        position: absolute;
        left: calc(50% + 5em);
        width: 6.25em;
        text-align: center;
        white-space: nowrap;
    }
    .input-columns > span:last-child {
        position: absolute;
        right: -0.75em;
        width: 3em;
        white-space: nowrap;
        text-align: center;
    }
    .input-entry-lines .input-trigram-caption {
        left: calc(50% - 6em);
        width: 1.8em;
    }
    .input-trigram-options label > span {
        min-height: 0;
        padding: 0.25em 0;
        gap: 0.15em;
        line-height: 1.2;
    }
}

/* 方式によらず同じ幅・縮尺を基準にし、18penの爻間隔を保つ。 */
@media (max-width: 767px) {
    #gua-input-form {
        scrollbar-gutter: stable both-edges;
    }
    .input-entry-lines {
        --input-row-height: 2.35em;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .input-columns,
    .is-trigram-mode .input-columns {
        height: 1.5em;
    }
    .input-line-row,
    .is-trigram-mode .input-line-row {
        height: 2.35em;
        min-height: 0;
    }
    .input-polarity label > span {
        height: 2em;
        min-height: 0;
    }
    .input-line-row > .input-moving {
        left: calc(50% + 9.2em);
        right: auto;
        width: 1.8em;
        min-height: 0;
    }
    .input-columns > span:last-child {
        left: calc(50% + 9.2em);
        right: auto;
        width: 1.8em;
        font-size: inherit;
        white-space: nowrap;
    }
    .input-entry-lines .input-trigram-upper {
        top: calc(1.5em + (2.35em - 1.3em) / 2);
    }
    .input-entry-lines .input-trigram-lower {
        top: calc(1.5em + (2.35em - 1.3em) / 2 + 3 * 2.35em + 0.9em);
    }
}

/* スマホ入力の拡大と、選択欄・見出しの整列。 */
@media (max-width: 767px) {
    #gua-input-form {
        padding-left: 0.5em;
        padding-right: 0.5em;
        scrollbar-gutter: auto;
    }
    .input-entry-lines {
        --input-unit: clamp(0.7rem, 3.4vw, 0.9rem);
        font-size: var(--input-unit);
    }
    .input-line-label {
        font-size: 0.682rem; /* 18pen: 0.62rem × 1.1 */
    }
    .input-columns .input-polarity-heading,
    .input-columns > span:last-child {
        top: 0;
        font-size: 0.75rem;
        line-height: 1.3;
        white-space: nowrap;
    }
    .input-columns .input-polarity-heading {
        left: calc(50% + 4 * var(--input-unit));
        width: calc(5 * var(--input-unit));
    }
    .input-columns > span:last-child {
        left: calc(50% + 9.2 * var(--input-unit));
        width: calc(1.8 * var(--input-unit));
    }
    .is-trigram-mode .input-line-row > .input-moving {
        left: calc(50% + 4em);
    }
    .is-trigram-mode .input-columns > span:last-child {
        left: calc(50% + 4 * var(--input-unit));
        width: calc(1.8 * var(--input-unit));
    }
    .input-entry-guide,
    #input-trigrams {
        width: 100%;
        box-sizing: border-box;
    }
}

/* 375px幅の表示を上限の目安にし、広いスマホでも中央に収める。 */
@media (max-width: 767px) {
    .input-entry-lines,
    .input-entry-guide {
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .input-entry-lines {
        --input-unit: clamp(0.7rem, 3.4vw, 0.796875rem);
    }
}

/* 入力プレビューも結果の八卦ラベルと同じ量だけ左へ離す。 */
.input-entry-lines .input-trigram-caption {
    transform: translateX(-0.3em);
}

/* スマホ入力の操作幅と、爻名・八卦ラベルの余白を整える。 */
@media (max-width: 767px) {
    .input-entry-lines {
        --polarity-width: 5.3;
        --moving-offset: 9.75;
    }
    .input-line-label {
        left: 1em;
    }
    .input-line-row > .input-polarity {
        left: calc(50% + 4.25em);
        width: calc(var(--polarity-width) * 1em);
    }
    .input-columns .input-polarity-heading {
        left: calc(50% + 4.25 * var(--input-unit));
        width: calc(var(--polarity-width) * var(--input-unit));
    }
    #gua-input-form:not(.is-trigram-mode) .input-line-row > .input-moving {
        left: calc(50% + var(--moving-offset) * 1em);
    }
    #gua-input-form:not(.is-trigram-mode) .input-columns > span:last-child {
        left: calc(50% + var(--moving-offset) * var(--input-unit));
    }
    .input-entry-lines .input-trigram-caption {
        left: calc(50% - 6.5em);
    }
    .input-trigram-caption > span:nth-child(1) {
        font-size: 1.1em;
    }
    .input-trigram-caption > span:nth-child(2) {
        font-size: 1.55em;
    }
}
@media (max-width: 360px) {
    .input-entry-lines {
        --polarity-width: 4.8;
        --moving-offset: 9.25;
    }
}

/* 入力プレビューも縦線は動かさず、文字側で4pxの間隔を確保する。 */
.input-trigram-caption > span:nth-child(1) {
    left: auto;
    right: 4px;
    transform: none;
}
.input-trigram-caption > span:nth-child(2) {
    translate: -3px 0;
}

@media (max-width: 767px) {
    .input-action {
        padding: 0.8em 1.7em;
        border: 0;
        border-radius: 0.65em;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        font-weight: 600;
        line-height: 1;
    }
    .input-line-label {
        left: 1.5em;
    }
}

/* PCでは卦名の正方形と自然の象を、4px間隔の同じ中心軸に揃える。 */
@media (min-width: 768px) {
    .input-trigram-caption > span:nth-child(2) {
        left: auto;
        right: calc(4px + 0.6em);
        width: auto;
        translate: none;
        transform: translate(50%, -50%);
    }
}

/* 入力プレビューも、余白を除いた同じ領域内で文字を中央に置く。 */
.input-entry-lines .input-trigram-caption:not(:empty) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 0 4px 0 0;
    text-align: center;
}
.input-trigram-caption > span:nth-child(1),
.input-trigram-caption > span:nth-child(2) {
    position: static;
    inset: auto;
    grid-area: 1 / 1;
    justify-self: center;
    margin: 0;
    padding: 0;
    text-align: center;
    translate: none;
    transform: none;
}
.input-trigram-caption > span:nth-child(1) {
    align-self: end;
    width: 1.5em;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    line-height: 1;
}
.input-trigram-caption > span:nth-child(2) {
    align-self: center;
    width: 100%;
    height: auto;
    line-height: 1;
}