/*
 * MOTTOAPP Block CSS
 * Git管理する公開・会員ページ共通のブロック基盤。
 * 管理画面のCSS編集機能では使用せず、MOTTOAPPの配置領域へ安全に差し込む。
 * 長い翻訳文、URL、メールアドレスを含むブロックでも横にはみ出さない。
 */
:root {
    --mapp-block-text: var(--ink, #142033);
    --mapp-block-muted: var(--muted, #64748b);
    --mapp-block-line: var(--line, #d9e2ef);
    --mapp-block-surface: var(--white, #ffffff);
    --mapp-block-soft: var(--soft, #f4f7fb);
    --mapp-block-blue: var(--blue, #1d6fd8);
    --mapp-block-radius: var(--rs, 10px);
}

/* .mapp-block系: Header下、Main、Sidebar、CTA、Footer前で使う基本外枠。 */
.mapp-block,
.mapp-block--plain,
.mapp-block--panel,
.mapp-block--compact,
.mapp-block--wide {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--mapp-block-text);
}

/* panelは通知などのカード型。カード内カードには使わない。 */
.mapp-block--panel {
    padding: clamp(16px, 2.4vw, 24px);
    border: 1px solid var(--mapp-block-line);
    border-radius: var(--mapp-block-radius);
    background: var(--mapp-block-surface);
}

.mapp-block--compact { padding: 14px; }
.mapp-block--wide { width: 100%; }

/* __head/body/foot: 見出し、本文、CTAを分離し、翻訳長文の幅を守る。 */
.mapp-block__head,
.mapp-block__body,
.mapp-block__foot {
    min-width: 0;
    max-width: 100%;
}

.mapp-block__head { margin-bottom: 16px; }
.mapp-block__foot { margin-top: 18px; }

/* 日本語・英語・韓国語・中国語の長い見出しと説明文用。 */
.mapp-block__title,
.mapp-block__lead,
.mapp-text-long,
.mapp-text-balance {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.mapp-block__title {
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.35;
}

.mapp-block__lead {
    margin: 6px 0 0;
    color: var(--mapp-block-muted);
    line-height: 1.7;
}

.mapp-text-long { line-height: 1.7; }
.mapp-text-balance { line-height: 1.45; text-wrap: balance; }

/* actions/button: PCは横並び、狭い領域や長い翻訳では折り返す。 */
.mapp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

/* 日付・短い状態など、折り返したくない値に使う。 */
.mapp-nowrap,.mapp-status,.mapp-date{ white-space: nowrap; }

/* リンク一覧とラベル・値一覧。値は長文でも親幅を壊さない。 */
.mapp-link-list,
.mapp-meta-list {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapp-link-list > li + li { margin-top: 8px; }
.mapp-link-list a { display: block; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.mapp-meta-list > li { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--mapp-block-line); }
.mapp-meta-list dt,
.mapp-meta-list dd { min-width: 0; max-width: 100%; margin: 0; overflow-wrap: anywhere; }
.mapp-meta-list dt { color: var(--mapp-block-muted); font-weight: 700; }

/* notice/status: 色は状態表示専用で、ナビゲーション装飾には流用しない。 */
.mapp-status {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 5px 9px;
	border: 0;
	border-radius: 999px;
	background: #eaf2ff;
	color: #195fb7;
	font-size: 12px;
	font-weight: 800;
}

/* grid-auto/stack: カードやリンクを配置領域に合わせて自動折り返しする。 */
.mapp-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; min-width: 0; max-width: 100%; }
.mapp-stack { display: grid; gap: 14px; min-width: 0; max-width: 100%; }

/* 表やログだけに横スクロールを許可し、画面全体の横スクロールは発生させない。 */
.mapp-scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mapp-scroll-x > table { min-width: 560px; }

/* 画像・動画・iframeはMOTTOAPPブロック幅を超えない。 */
.mapp-block img,
.mapp-block video,
.mapp-block iframe,
.mapp-block svg { display: block; max-width: 100%; height: auto; }

/* 配置領域直下のブロック間隔。既存MOTTOAPPブロックにも適用できる。 */
.mapp-layout-region > .mapp-block + .mapp-block,
.mapp-layout-region > .block_outer + .block_outer { margin-top: 16px; }

@media (max-width: 640px) {
    .mapp-actions { align-items: stretch; flex-direction: column; }
    .mapp-actions > .mapp-button,
    .mapp-actions > a,
    .mapp-actions > button { width: 100%; }
    .mapp-meta-list > li { display: block; }
    .mapp-meta-list dd { margin-top: 4px; }
}

/* 端末選択された旧ブロックは、大画面でも従来の幅・見出し・縦並びを保つ。 */
:where(.mapp-device-sphone) .mapp-block,
:where(.mapp-device-sphone) .mapp-block--plain,
:where(.mapp-device-sphone) .mapp-block--panel,
:where(.mapp-device-sphone) .mapp-block--compact,
:where(.mapp-device-sphone) .mapp-block--wide,
:where(.mapp-device-sphone) .mapp-layout-region { width: 100%; min-width: 0; max-width: 100%; }
:where(.mapp-device-sphone) .mapp-block__title { font-size: 1.08rem; }
:where(.mapp-device-sphone) .mapp-actions { align-items: stretch; flex-direction: column; }
:where(.mapp-device-sphone) .mapp-actions > .mapp-button,
:where(.mapp-device-sphone) .mapp-actions > a,
:where(.mapp-device-sphone) .mapp-actions > button { width: 100%; }