/**
 * マイページ・アクティビティ関連画面（front.css の共通スタイルに追加）
 */

/* =========================================================================
   マイページ
   ========================================================================= */
.mp { padding: 24px 16px 48px; }
.mp .section-title { margin: 28px 0 8px 4px; }

/* プロフィールカード（アバター左・名前右） */
.mp-profile { padding: 20px; text-align: left; box-shadow: 0 4px 10px rgba(0, 0, 0, .04); }
.mp-profile-head { display: flex; align-items: center; gap: 20px; }
.mp-profile-head .avatar { margin: 0; }
.mp-profile-main { min-width: 0; flex: 1; }
.mp-profile .name { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-profile .uid { font-size: 12px; color: var(--gray2); margin-top: 6px; }
.mp-profile .bio { font-size: 14px; color: var(--text); padding: 8px 4px; margin-top: 16px; white-space: pre-line; word-break: break-word; text-align: left; }
.mp-profile .btn-edit { font-weight: 700; color: var(--text); }
.mp-profile .btn-edit:hover { opacity: .85; }

/* アクティビティ（常に2列。PC幅ではカードを低くする） */
.mp .menu-grid { grid-template-columns: repeat(2, 1fr); }
.mp .menu-tile { box-shadow: none; padding: 12px 16px; line-height: 1.25; min-height: 72px; }
.mp .menu-tile:hover { background: #fcfcfc; }
.mp .menu-tile .circle { width: 38px; height: 38px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }
@media (min-width: 900px) { .mp .menu-tile { min-height: 64px; } }

/* メニューリスト（区切り線はアイコン分インデント） */
.mp-list { overflow: hidden; }
.mp-list > * { position: relative; }
.mp-list > form { display: block; }
.mp-list > * + *::before {
    content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--border2);
}
.mp-list .menu-row { gap: 16px; color: var(--text); font-weight: 400; cursor: pointer; }
.mp-list .menu-row + .menu-row { border-top: 0; }
.mp-list .menu-row .icon { color: var(--black); }
.mp-list .menu-row.is-red, .mp-list .menu-row.is-red .icon { color: var(--red); }
.mp-list .menu-row.is-blue, .mp-list .menu-row.is-blue .icon { color: var(--ios-blue); }
.mp-list form { margin: 0; }

/* 矢印（arrow_forward_ios 相当） */
.chev-icon { width: 14px; height: 14px; margin-left: auto; color: var(--light-gray); flex-shrink: 0; }

/* =========================================================================
   アクティビティ
   ========================================================================= */
.act-list { padding: 8px 0; }
.act-row { display: flex; align-items: center; padding: 8px 16px; gap: 12px; }
.act-row:hover { background: #fcfcfc; }
.act-row + .act-row { border-top: 1px solid var(--border); }
.act-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.act-main { flex: 1; min-width: 0; padding: 0 16px; }
.act-title { font-size: 10px; color: var(--gray); word-break: break-word; }
.act-body {
    font-size: 12px; color: var(--text2); line-height: 1.6; margin-top: 2px; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.act-foot { display: flex; align-items: center; gap: 2px; margin-top: 2px; font-size: 10px; color: var(--gray); }
.act-foot .date { margin-right: 6px; }
.act-foot .count { color: var(--dark-gray); }
.act-row .arrow { width: 9px; height: 9px; color: var(--dark-gray2); flex-shrink: 0; }
.act-row.is-unread .act-body { font-weight: 700; }

/* =========================================================================
   お知らせ
   ========================================================================= */
.notice-row { display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
.notice-row:hover { background: #fcfcfc; }
.notice-row + .notice-row { border-top: 1px solid var(--border); }
.notice-logo {
    width: 48px; height: 48px; border-radius: 50%; background: rgba(153, 153, 153, .1);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notice-logo img { width: 36px; height: auto; }
.notice-main { flex: 1; min-width: 0; }
.notice-title { font-size: 14px; font-weight: 700; word-break: break-word; }
.notice-sub { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--text2); margin-top: 2px; }
.notice-sub .body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-sub .time { font-size: 12px; color: var(--gray); flex-shrink: 0; }

.notice-detail { padding: 24px; }
.notice-detail h1 { font-size: 16px; font-weight: 700; word-break: break-word; }
.notice-detail .time { font-size: 14px; color: var(--gray); margin-top: 12px; }
.notice-detail .body { font-size: 16px; margin-top: 24px; white-space: pre-line; word-break: break-word; line-height: 1.7; }
.notice-detail .btn { margin-top: 32px; }

/* =========================================================================
   ブロックしたユーザー
   ========================================================================= */
.block-list { padding: 16px; }
.block-row { position: relative; display: flex; align-items: center; padding: 16px; }
.block-row + .block-row { border-top: 1px solid var(--border); }
.block-row:hover { background: #fcfcfc; }
.block-link { display: flex; align-items: center; flex: 1; min-width: 0; }
.block-link::after { content: ""; position: absolute; inset: 0; }
.block-main { flex: 1; min-width: 0; padding: 0 16px; }
.block-main .uid { font-size: 10px; color: var(--gray2); }
.block-main .name { font-size: 10px; color: var(--dark-gray); word-break: break-word; }
.unblock-chip {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
    padding: 8px; border: 0; border-radius: 4px; background: var(--light-gray2); font-size: 12px; color: var(--text);
}
.unblock-chip:hover { background: var(--border2); }
.block-row .arrow { width: 9px; height: 9px; color: var(--dark-gray2); margin-left: 12px; flex-shrink: 0; }

/* =========================================================================
   設定
   ========================================================================= */
.setting { padding: 16px; }
.setting-section + .setting-section { margin-top: 24px; }
.setting-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--black); padding: 8px 0; }
.setting-section .switch-row { padding-left: 28px; cursor: pointer; }

/* =========================================================================
   フォーム（お問い合わせ・プロフィール編集・情報変更・パスワード変更）
   ========================================================================= */
.mp-form { padding: 24px 16px; }
.mp-form .field { margin-bottom: 32px; }
.mp-form .field-title { font-weight: 500; }
.mp-form .counter { text-align: right; font-size: 10px; color: var(--gray2); margin-top: 4px; }
.mp-form .is-invalid { box-shadow: inset 0 0 0 1px #E53935; }
.select-wrap { position: relative; }
.select-wrap .select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--dark-gray); }
.footer-bar .btn { width: 100%; min-width: 0; }

/* プロフィール編集 */
.avatar-edit {
    position: relative; display: block; width: 96px; height: 96px; margin: 0 auto 32px; border-radius: 50%;
    overflow: hidden; border: 0; padding: 0; background: var(--light-gray2); cursor: pointer;
}
.avatar-edit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.avatar-edit .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 1; }
.btn-save { width: 100%; min-width: 0; border-radius: 8px; }
.btn-save.is-saving, .btn-save:disabled { background: var(--light-gray); opacity: 1; }

/* 情報変更（下線のみの入力欄） */
.update-info { padding: 68px; }
.input-underline {
    width: 100%; font: inherit; font-size: 16px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--light-gray);
    outline: none; background: none; color: var(--text);
}
.input-underline:focus { border-bottom-color: var(--aqua); }
textarea.input-underline { resize: vertical; min-height: 120px; line-height: 1.6; }
.update-info .btn { margin-top: 24px; width: 100%; min-width: 0; }

@media (max-width: 768px) {
    .update-info { padding: 32px 24px; }
}