/* 전투 모바일 전용 압축 레이어: 데스크톱 규칙에는 영향을 주지 않는다. */
.card-summary-mobile { display: none; }
@media (max-width: 600px) {
    .vs-intro { padding: 12px; }
    .vs-intro-stage { width: 100%; height: min(600px,calc(100dvh - 24px)); }
    .vs-intro-side { gap: 12px; }
    .vs-intro-portrait .wizard-profile { width: clamp(68px,20vw,84px); height: clamp(68px,20vw,84px); border-radius: 18px; }
    .vs-intro-name { font-size: clamp(19px,6vw,24px); }
    .vs-intro-nickname { padding: 3px 9px; font-size: 10px; }
    .vs-intro-greeting { max-width: calc(100vw - 38px); font-size: 12px; line-height: 1.45; }
    .vs-intro-mark { width: 76px; height: 54px; font-size: 32px; }
    .vs-intro-hint { font-size: 9px; }
    body:has(#game-screen:not(.hidden)) {
        min-height: 100dvh;
        padding: 4px;
        align-items: safe center;
        justify-content: center;
    }
    #game-screen {
        --mobile-battle-section-gap: 10px;
        --mobile-battle-inner-gap: 6px;
        --mobile-battle-card-width: clamp(38px, 11.5vw, 46px);
        --mobile-battle-card-height: 60px;
        --mobile-spell-button-width: clamp(45px, 14vw, 54px);
        --mobile-spell-button-height: clamp(62px, 16.5vw, 68px);
        --mobile-memo-size: clamp(38px, 11vw, 44px);
        width: 100%;
        max-width: none;
        padding-bottom: max(3px, env(safe-area-inset-bottom));
    }
    #game-screen > :not([hidden]) ~ :not([hidden]) { margin-top: var(--mobile-battle-section-gap); }

    /* 세트 정보 */
    #game-screen > .academy-series {
        padding: 6px 9px;
        border-radius: 8px;
    }
    #game-screen > .academy-series .academy-series-heading {
        gap: 2px 6px;
        font-size: 10px;
        line-height: 1.25;
    }
    #game-screen > .academy-series .academy-series-score {
        gap: 5px;
        margin-top: 2px;
    }
    #game-screen > .academy-series .academy-series-side { font-size: 11px; }
    #game-screen > .academy-series .academy-series-number {
        font-size: 16px;
        letter-spacing: 1px;
    }
    #game-screen > .academy-series .academy-series-pips {
        gap: 3px;
        margin-top: 2px;
    }
    #game-screen > .academy-series .academy-series-pip { width: 6px; height: 6px; }
    #game-screen > .academy-series .academy-round-history { display: none; }

    /* 양쪽 패: 21장 덱의 최대 7장을 항상 한 줄에 유지한다. */
    #opponent-area, #my-area {
        padding: 8px;
        margin: 0;
        border-width: 1px;
        border-radius: 8px;
    }
    #opponent-area > .flex, #my-area > .flex {
        min-height: 26px;
        margin-bottom: 5px;
    }
    #my-area {
        display: flex;
        flex-direction: column;
    }
    #my-area > .flex { order: 0; }
    #my-hand { order: 1; margin-bottom: 0; padding-top: 8px; }
    #my-emote-dock { order: 2; }
    #opponent-area h2, #my-title {
        max-width: min(42vw, 156px);
        font-size: 14px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wizard-profile-battle {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        border-width: 1px;
    }
    #opponent-profile { order: 0; }
    #opponent-turn-indicator { order: 1; }
    #opponent-area h2 { order: 2; }
    #opponent-health, #my-health {
        min-width: 0;
        justify-content: flex-end;
        gap: 1px;
        font-size: 16px;
        white-space: nowrap;
    }
    #opponent-health .health-heart, #my-health .health-heart {
        display: inline-block;
        margin: 0 !important;
        font-size: 16px;
        line-height: 1;
    }
    #opponent-health .health-heart:nth-child(n+5),
    #my-health .health-heart:nth-child(n+5) { display: none; }
    .hand-zone {
        --hand-card-height: var(--mobile-battle-card-height);
        display: flex;
        flex-wrap: nowrap;
        justify-content: safe center;
        gap: 4px;
        min-height: var(--hand-card-height);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }
    .hand-zone::-webkit-scrollbar { display: none; }
    .hand-zone .card {
        /* 정신 교란·회수로 8장 이상이 되면 가로로 넘쳐 스크롤이 생겼다.
           넘칠 때만 줄어들게 해서 한 줄에 담는다. 7장 이하는 폭이 그대로다. */
        flex: 0 1 var(--mobile-battle-card-width);
        width: var(--mobile-battle-card-width);
        min-width: 21px;
        height: var(--hand-card-height);
        padding: 2px;
        border-radius: 6px;
    }
    .hand-zone .card .text-2xl { margin-bottom: 1px; font-size: 20px; line-height: 1; }
    .hand-zone .card .text-sm { font-size: 13px; line-height: 1; }
    .hand-zone .card .text-xs { font-size: 11px; line-height: 1; }
    #my-hand .card.card-known { overflow: visible; }
    #my-hand .card-known::after {
        z-index: 2;
        top: 0;
        right: -3px;
        transform: translateY(-50%);
    }
    .hand-empty-state {
        flex: 1 0 100%;
        min-height: var(--hand-card-height);
        padding: 4px;
        font-size: 10px;
    }
    #opponent-emote-row, #my-emote-dock { display: none !important; }
    .turn-indicator,
    .turn-indicator.opponent-turn {
        position: static;
        width: auto;
        height: 20px;
        flex: 0 0 auto;
        padding: 2px 6px;
        border-radius: 999px;
        font-size: 9px;
        line-height: 1;
        animation: none;
        transform: none;
        box-shadow: none;
    }

    /* 주문 현황: 좁은 화면에서도 모든 기록을 스크롤 없이 확인한다. */
    #battle-ledger { padding: 0; }
    .battle-ledger-summary { display: none; }
    .battle-ledger-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        gap: 5px;
    }
    .ledger-panel {
        /* 초반 여백이 과하지 않게 3줄(=사용 12장)까지만 자리를 잡고, 그 뒤로는 예전처럼 늘어난다. */
        min-height: 146px;
        height: auto;
        padding: 7px 5px;
        border-radius: 7px;
        overflow: visible;
    }
    .ledger-panel-header {
        min-height: 17px;
        margin-bottom: 1px;
        font-size: 11px;
    }
    .ledger-count {
        padding: 0 4px;
        font-size: 9px;
    }
    .ledger-secret-groups {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px 2px;
        min-height: 84px;
        overflow: visible;
    }
    .ledger-secret-groups::-webkit-scrollbar,
    .ledger-card-list::-webkit-scrollbar { display: none; }
    .ledger-group {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        width: 100%;
        align-items: start;
        gap: 2px;
    }
    .ledger-group-label {
        flex: 0 0 auto;
        min-height: 0;
        gap: 2px;
        font-size: 10px;
        justify-content: flex-start;
    }
    .ledger-group-label span:first-child { max-width: none; overflow: visible; }
    .ledger-group-label span:last-child { display: none; }
    .ledger-card-list {
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 3px;
        overflow: visible;
    }
    #used-stones-list { padding-top: 7px; row-gap: 9px; }
    .ledger-card {
        flex-basis: 31px;
        width: 31px;
        height: 30px;
        border-radius: 5px;
        font-size: 12px;
    }
    .ledger-card.is-latest::after { top: -5px; right: -2px; font-size: 8px; }
    .ledger-empty {
        min-height: 30px;
        padding: 0 3px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
    }

    /* 영창·메모·턴 종료 */
    .battle-controls { padding: 8px 6px; border-radius: 8px; }
    #spell-buttons { margin-bottom: var(--mobile-battle-inner-gap); }
    #memo-buttons { margin-bottom: 9px; }
    #spell-buttons-container {
        grid-template-columns: repeat(6, var(--mobile-spell-button-width));
        justify-content: center;
        gap: 4px;
        padding: 4px;
    }
    #spell-buttons-container .spell-button {
        width: var(--mobile-spell-button-width);
        min-width: 0;
        min-height: var(--mobile-spell-button-height);
        height: var(--mobile-spell-button-height);
        margin: 0;
        padding: 3px 1px;
        border-radius: 6px;
        font-size: 18px;
        line-height: 1;
    }
    #spell-buttons-container .spell-button .text-xs { display: none; }
    #spell-buttons-container .spell-button .font-bold { font-size: 11px; line-height: 1; }
    .spell-button-icon { font-size: 27px; line-height: 1; }
    .spell-button-number { margin-top: 4px; font-size: 12px; font-weight: 900; line-height: 1; }
    #memo-buttons {
        grid-template-columns: repeat(6, var(--mobile-spell-button-width));
        justify-content: center;
        gap: 4px;
        padding: 0 4px;
    }
    .memo-button {
        width: var(--mobile-memo-size);
        min-width: 0;
        min-height: var(--mobile-memo-size) !important;
        height: var(--mobile-memo-size);
        padding: 2px 1px;
        border-radius: 6px;
        line-height: 1.05;
    }
    .memo-button .memo-mark { font-size: 22px; }
    #end-turn-btn {
        min-height: 40px;
        height: 40px;
        padding: 5px 10px;
        font-size: 14px;
    }

    /* 하단은 핵심 동작만 짧게 보인다. */
    .battle-footer-actions {
        gap: 8px;
        min-height: 36px;
        padding: 4px 6px;
    }
    #surrender-btn, #help-btn {
        min-width: 42px;
        min-height: 34px;
        padding: 4px 9px;
        font-size: 12px;
    }
    #battle-bgm-mute-btn {
        min-width: 40px;
        min-height: 34px;
        font-size: 0;
        text-decoration: none;
    }
    #battle-bgm-mute-btn::before { content: '🔊'; font-size: 15px; }
    #battle-bgm-mute-btn[aria-pressed="true"]::before { content: '🔇'; }
    #battle-bgm-audio-control { gap: 5px; }
    #battle-bgm-audio-control .bgm-volume-slider { width: 48px; }
    .battle-footer-actions #help-btn { width: 42px; min-width: 42px; padding-inline: 0; font-size: 0; }
    #help-btn::before { content: '📝'; font-size: 15px; }
    #help-tooltip {
        position: fixed;
        right: max(8px, env(safe-area-inset-right));
        bottom: max(44px, calc(env(safe-area-inset-bottom) + 44px));
        left: auto;
        width: min(calc(100vw - 16px), 320px);
        max-height: calc(100dvh - 60px);
        margin: 0;
        overflow-y: auto;
        transform: none;
        z-index: 120;
    }

    /* 작은 화면용 팝업: 안전 영역 안에서 내용만 스크롤한다. */
    .modal-bg {
        min-height: 100dvh;
        padding: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    }
    .modal-bg .modal-content,
    .academy-dialog-card,
    .hero-selection-shell,
    .tutorial-guide-card {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 14px);
        margin: 0;
        padding: 13px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .academy-dialog-card { border-radius: 14px; }
    /* 일반 스토리 팝업의 제목: 본편의 -4px 당김을 풀어 위 여백(13px)을 아래 14px 과 비슷하게 맞춘다.
       관문(고유 주문 습득) 배너가 앞에 오는 팝업은 제목이 첫 요소가 아니라 그대로다. */
    .academy-dialog-card > .academy-chat-title:first-child { margin-top: 0; }
    .academy-speaker-icon { width: 56px; height: 56px; flex-basis: 56px; }
    .academy-dialog-copy,
    .academy-conversation .academy-dialog-copy { font-size: 13px; line-height: 1.55; }
    .academy-conversation [data-speaker-side]:not([data-speaker-side="narrator"]) .academy-dialog-copy { padding-top: 19px; }
    .academy-conversation .academy-dialog-copy::after { font-size: 23px; }
    .academy-dialog-footer { gap: 7px; }
    .academy-dialog-actions { gap: 6px; }
    .academy-dialog-actions button, .ui-modal-actions button { min-height: 40px; padding: 8px 11px; font-size: 13px; }

    /* 조율 제목과 선택 영역 사이의 중복 여백을 모바일에서만 정리한다. */
    #hero-selection-modal .hero-selection-header { margin-bottom: 8px; }
    #hero-selection-modal .hero-selection-body .custom-builder { margin-top: 0; }
    #hero-selection-modal .custom-spell-grid { gap: 6px; }
    #hero-selection-modal .custom-spell-option { padding: 7px 6px; }
    #hero-selection-modal .custom-spell-option-effect { margin-top: 2px; line-height: 1.4; }
    #hero-selection-modal .custom-spell-option-state { margin-top: 2px; line-height: 1.3; }

    /* 메인은 구조를 유지하고 여백만 줄인다. */
    #title-screen { width: 100%; }
    #title-screen .title-art { max-height: 154px; margin-bottom: 8px; }
    #title-screen .title-tagline { margin: 0 auto 10px; padding: 0 6px; font-size: 13.5px; line-height: 1.45; }
    /* 하단 풍경은 좁은 화면에서 낮게. 건물이 카드·버튼을 덮지 않되 장식으로는 보이게 한다. */
    :root { --academy-scenery-height: clamp(110px, 18vh, 170px); }
    #title-screen .academy-card {
        margin: 8px 0;
        padding: 12px;
    }
    #title-screen .academy-card h3 { font-size: 18px; }
    #academy-format-note.mobile-compact-hide { display: none; }
    #academy-record {
        flex-wrap: nowrap;
        gap: 3px;
        margin: 6px 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #academy-record::-webkit-scrollbar { display: none; }
    #academy-record span { flex: 0 0 auto; padding: 3px 5px; font-size: 10px; white-space: nowrap; }
    #academy-next, #academy-next.gate {
        margin: 7px 0;
        padding: 9px;
        font-size: 12px;
        line-height: 1.5;
    }
    #academy-battle-btn { min-height: 42px; padding: 8px 10px; font-size: 14px; }
    #academy-ladder-btn { margin-top: 7px; }
    .academy-ladder-button {
        min-height: 44px;
        padding: 7px 44px;
    }
    .academy-ladder-toggle-icon { left: 11px; }
    .academy-ladder-button-arrow { right: 11px; }
    .academy-ladder-button small { display: none; }
    .academy-ladder-modal { padding: 8px; }
    .academy-board-card { max-height: calc(100dvh - 16px); }
    .academy-board-paper { max-height: calc(100dvh - 16px); padding: 17px 12px 13px; }
    .academy-board-header { padding: 0 38px 11px 0; }
    .academy-board-header h3 { font-size: 20px; }
    .academy-board-header p { font-size: 10px; }
    .academy-board-close { top: 13px; right: 12px; }
    .academy-board-news { margin: 11px 0 8px; padding: 10px; }
    .academy-board-news-feed { max-height: 135px; }
    .academy-news-item strong { font-size: 11px; }
    .academy-news-item p { font-size: 10px; }
    .academy-board-changes { flex-direction: column; gap: 4px; padding: 8px 9px; }
    .academy-board-legend { gap: 4px 10px; font-size: 9px; }
    .academy-board-footer { align-items: stretch; flex-direction: column; }
    /* .modal-content p 가 기본 캡션 크기를 덮어쓰므로 뉴스 제목과 같은 12px로 맞춘다. */
    .academy-board-footer p { font-size: 12px; }
    .academy-board-footer button { flex-basis: auto; width: 100%; }
    #academy-storage-note { margin-top: 5px; font-size: 9px; line-height: 1.35; }
    /* 학교 게시판 진입 버튼(#school-board-btn)은 PC/모바일 동일하게 title-utility-actions 맨 앞자리를 그대로 쓴다(별도 배치 없음).
       팝업은 화면 대부분을 쓰되 제목·새로고침·작성 UI 는 고정, 목록만 scroll. */
    .school-board-card.academy-board-card { width: 100%; max-width: 100%; }
    .academy-board-paper.school-board-paper { max-height: calc(100dvh - 16px); padding: 16px; }
    .school-board-toolbar { flex-wrap: wrap; gap: 6px; margin: 9px 0 8px; }
    .school-board-cooldown-note { flex-basis: 100%; margin-left: 0; }
    .school-board-list { gap: 16px; }
    .school-board-note { min-height: 96px; padding: 12px 12px 8px; }
    .school-board-note-delete, .school-board-reaction-add { width: 26px; height: 26px; }
    .school-board-reaction-chip { padding: 4px 8px; font-size: 11px; }
    .school-board-input { font-size: 13px; }

    #current-hero-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(160px, 46%);
        align-items: center;
        gap: 4px 8px;
        margin-bottom: 12px;
        padding: 10px;
    }
    #current-hero-icon { width: 48px; height: 48px; font-size: 27px; }
    #current-hero-quote {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.35;
    }
    #current-hero-name { font-size: 16px; line-height: 1.25; }
    #current-hero-card .hero-current-meta { gap: 3px; margin-bottom: 2px; }
    #current-hero-card .hero-current-meta > span { font-size: 10px; }
    #current-hero-card .hero-current-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        min-width: 160px;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: repeat(2, 44px);
        gap: 4px;
    }
    #current-hero-card .hero-current-actions button {
        min-height: 34px;
        padding: 5px 8px;
        font-size: 11px;
    }
    /* 기존 버튼/강조 효과는 유지하고 작은 두 액션만 아이콘으로 표시한다. */
    #current-hero-card .hero-current-actions #rename-hero-btn { grid-column: 1; grid-row: 1; }
    #current-hero-card .hero-current-actions #monthly-ranking-btn { grid-column: 1; grid-row: 2; }
    #current-hero-card .hero-current-actions #change-hero-btn { grid-column: 2; grid-row: 1 / span 2; }
    #current-hero-card .hero-current-actions #rename-hero-btn,
    #current-hero-card .hero-current-actions #monthly-ranking-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
    }
    #current-hero-card .profile-action-label { display: none; }
    #current-hero-card .profile-action-icon { display: block; font-size: 20px; line-height: 1; }
    .duel-mode-actions { gap: 9px; }
    .duel-mode-actions > button {
        min-height: 44px;
        height: auto;
        padding: 8px 5px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }
    #academy-tutorial-btn span, #multiplayer-btn span { display: none; }
    /* 폭이 부족하면 오른쪽 항목부터 자연스럽게 다음 줄로 내려간다(고정 줄바꿈·좌표 지정 없음).
       각 버튼·BGM 묶음은 flex-shrink:0 로 텍스트가 축소되지 않고, 대신 통째로 다음 줄로 넘어간다. */
    .title-utility-actions { flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; margin-top: 10px; }
    .title-utility-actions button {
        min-height: 28px;
        padding: 3px 5px;
        font-size: 10px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    /* BGM 버튼 + 볼륨 슬라이더는 한 span(inline-flex) 안에 있어 이미 하나의 flex 항목으로 취급된다 —
       줄바꿈은 이 묶음 전체 단위로만 일어나고 버튼과 슬라이더 사이에서는 갈라지지 않는다. */
    .bgm-audio-control { gap: 5px; flex: 0 0 auto; }
    .bgm-audio-control .bgm-volume-slider { width: 55px; }
    /* 좁은 화면에서는 두 줄로 접힌다. 여백만 조금 줄여 아래에 붙여 둔다. */
    .title-copyright { bottom: 8px; font-size: 9px; }
    #title-screen { padding-bottom: 40px; }

    /* 결투 장식은 높이를 먹는 것만 접는다.
       헤어라인·배경 워시·마름모·안쪽 링은 레이아웃 비용이 0이라 좁은 화면에도 남긴다. */
    #opponent-area > .flex::after,
    #my-area > .flex::after,
    #game-screen > .academy-series .academy-series-heading::before,
    #game-screen > .academy-series .academy-series-heading::after,
    .ledger-group::before,
    .ledger-empty::before,
    .ledger-empty::after { display: none; }
    .turn-indicator { outline-offset: -2px; }
    #end-turn-btn::before { left: 12px; }
    #end-turn-btn::after { right: 12px; }
    /* 스토리 카드의 마법진 문양은 좁은 화면에서 제목과 겹치지 않게 줄인다. */
    #academy-panel::before { top: 4px; right: 4px; width: 150px; height: 150px; opacity: .24; }
}

@media (max-width: 360px), (max-height: 700px) and (max-width: 600px) {
    #game-screen {
        --mobile-battle-section-gap: 6px;
        --mobile-battle-inner-gap: 4px;
        --mobile-battle-card-width: clamp(37px, 10.8vw, 42px);
        --mobile-battle-card-height: 53px;
        --mobile-spell-button-width: clamp(42px, 14vw, 48px);
        --mobile-spell-button-height: 58px;
        --mobile-memo-size: clamp(36px, 11vw, 40px);
    }
    #game-screen > .academy-series { padding: 4px 7px; }
    #opponent-area, #my-area { padding: 4px 5px; }
    .hand-zone { gap: 2px; }
    .battle-ledger-grid { gap: 3px; }
    .ledger-card-list { gap: 2px; }
    .battle-controls { padding: 5px 4px; }
    #memo-buttons { margin-bottom: 6px; }
    #spell-buttons-container { gap: 2px; padding: 3px; }
    #memo-buttons { gap: 2px; padding: 0 3px; }
    .battle-footer-actions { gap: 5px; padding: 2px 4px; }
    #opponent-area > .flex, #my-area > .flex { min-height: 22px; margin-bottom: 2px; }
    .wizard-profile-battle { width: 22px; height: 22px; flex-basis: 22px; }
    .hand-zone .card .text-2xl { font-size: 16px; }
    .ledger-panel { min-height: 106px; padding: 4px 3px; }
    .ledger-secret-groups { min-height: 73px; }
    .ledger-card { flex-basis: 26px; width: 26px; height: 25px; font-size: 10px; }
    #spell-buttons-container .spell-button { font-size: 16px; }
    .spell-button-icon { font-size: 23px; }
    .memo-button .memo-mark { font-size: 20px; }
    #end-turn-btn { min-height: 34px; height: 34px; }
    .battle-footer-actions { min-height: 32px; }
    #surrender-btn, #help-btn, #battle-bgm-mute-btn { min-height: 30px; height: 30px; }
}

@media (max-width: 600px) {
    #matching-modal { padding: 10px; }
    #matching-modal .matching-card {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 26px 16px 20px;
        border-radius: 20px;
    }
    #matching-modal .matching-kicker { gap: 6px; margin-top: 16px; font-size: 9px; letter-spacing: .16em; }
    #matching-modal .matching-kicker-mark { font-size: 8px; }
    #matching-modal .matching-title { font-size: 23px; }
    #matching-modal .matching-intro { min-height: 42px; margin-top: 7px; font-size: 12px; }
    #matching-modal .matching-route { grid-template-columns: 56px minmax(72px,1fr) 56px; gap: 9px; margin: 18px auto 16px; }
    #matching-modal .matching-route-node { width: 56px; height: 56px; border-radius: 18px; font-size: 26px; }
    #matching-modal .matching-route-node::after { top: calc(100% + 4px); font-size: 9px; }
    #matching-modal .matching-message { min-height: 22px; margin: 7px 0 12px; font-size: 12px; }
    #matching-modal .matching-record { margin-bottom: 14px; padding: 7px; }
    #matching-modal .matching-record-item strong { font-size: 16px; }
    #matching-modal .matching-attune { margin-bottom: 14px; padding: 10px 11px 8px; }
    #matching-modal .matching-attune-head { margin-bottom: 10px; }
    #matching-modal .matching-attune-head strong { font-size: 13px; }
    #matching-modal .matching-attune-track { height: 5px; margin-bottom: 22px; }
    #matching-modal .matching-attune-node i { width: 9px; height: 9px; }
    #matching-modal .matching-attune-node em { top: calc(100% + 6px); font-size: 9px; }
    #matching-modal .matching-attune-hint { font-size: 10px; }
    #matching-modal .matching-action { min-height: 46px; font-size: 14px; }
    #matching-modal .matching-close { top: 10px; right: 10px; }
}