/**
 * カルテ共通スタイル — モバイル / 狭い viewport 向け（max-width のみ）
 *
 * - 本ファイルは common-form.css（PC・共通ベース）の**後**に読み込まれる（ファイル名ソート順）。
 * - 含めるブレークポイント:
 *   · max-width: 520px … メンバー帯の極窄幅レイアウト
 *   · max-width: 640px … 外部チャット widget の非表示
 *   · max-width: 720px … Tips モーダル底上げ・事業目的検索のコンパクト化
 *
 * PC 幅では本ファイル内の @media は一致しないため、デスクトップ表示には影響しません。
 */

/* --------------------------------------------------------------------------
   max-width: 520px — メンバー枠（帯の横並び・削除ボタン位置）
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
    #kh-karte .kh-karte__memberGroup,
    #kh-karte .kh-karte__memberAddSlot {
        flex-direction: column;
    }
    /* 折りたたみスロットの帯も、メンバーカードと同じく上側の横帯になる */
    #kh-karte .kh-karte__memberAddSlotRibbon {
        border-bottom-color: #e2e8f0;
    }
    #kh-karte .kh-karte__memberAddSlotBody {
        padding: 18px 14px;
    }
    #kh-karte .kh-karte__memberGroupRibbon {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 3px solid rgba(255, 255, 255, 0.4);
    }

    #kh-karte .kh-karte__memberGroupRibbonText {
        flex: 1 1 auto;
        justify-content: flex-start;
    }
    #kh-karte .kh-karte__memberGroupRibbon--tone1 {
        border-bottom-color: #a5b4fc;
    }
    #kh-karte .kh-karte__memberGroupRibbon--tone2 {
        border-bottom-color: #5eead4;
    }
    #kh-karte .kh-karte__memberGroupRibbon--tone3 {
        border-bottom-color: #fed7aa;
    }
    #kh-karte .kh-karte__memberGroupRibbon--tone4 {
        border-bottom-color: #fecdd3;
    }
    #kh-karte .kh-karte__memberGroupRibbon--tone5 {
        border-bottom-color: #a5f3fc;
    }
    #kh-karte .kh-karte__memberGroupRibbon--tone6 {
        border-bottom-color: #e9d5ff;
    }
    #kh-karte .kh-karte__memberGroupRibbonText {
        writing-mode: horizontal-tb;
        letter-spacing: 0.12em;
    }
}

/* --------------------------------------------------------------------------
   max-width: 640px — 外部チャット（UserLocal 等）の重なり回避
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
    .ul-widget-main-window {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   max-width: 720px — Tips 注釈モーダル（下からのシート風）
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    div#kh-karte-note-modal.kh-karte__modal--tipsSide {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    div#kh-karte-note-modal.kh-karte__modal--tipsSide .kh-karte__modalContent.kh-karte__tipsPanel {
        width: 100%;
        max-width: 100%;
        --kh-karte-tips-panel-max: min(52vh, 440px);
        max-height: var(--kh-karte-tips-panel-max);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.14);
        align-self: stretch;
        animation: kh-karte-tipsSlideUp 0.28s ease-out;
    }

    @keyframes kh-karte-tipsSlideUp {
        from {
            transform: translateY(18px);
            opacity: 0.85;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    div#kh-karte-note-modal.kh-karte__modal--tipsSide .kh-karte__modalContent.kh-karte__tipsPanel {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   max-width: 720px — 事業目的検索（ブックマーク）
   ※ 展開時のレイアウト（ボトムシート化・キーワード行）は common-form.tablet.css
     末尾の「max-width: 768px — 事業目的検索：スマホはボトムシート」に集約。
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    #kh-karte-purpose-search-tab.kh-karte__purposeSearchBookmark {
        top: calc(88px + 10px);
        width: 40px;
        min-height: 112px;
    }

    #kh-karte-purpose-search .kh-karte__purposeSearchKeywordRow {
        flex-wrap: nowrap;
    }
}