/**
 * 알림·쪽지 모아보기 (/inbox/) · 쪽지함 (/my-messages/) — 땅튜브 톤
 *
 * fluxhub-common 의 화면 부품(fxm-*, fxi-*, fhc-msg)은 색을 전부 토큰(--fxm-* / --acct-* / --fhc-*)으로 읽는다.
 * 여기서는 그 토큰을 테마 토큰(dark-theme.css)에 이어 주고, 마이페이지(my-settings.css)의 탭·카드 모양에 맞춘다.
 * 배치·구성은 플러그인 그대로. 이 두 페이지에서만 로드된다.
 */

/* ===================
   1. 토큰 연결
   =================== */
.fxi,
.fhc-msg {
    --fxm-surface: var(--bg-secondary);
    --fxm-surface-2: var(--bg-active);
    --fxm-surface-hover: var(--bg-hover);
    --fxm-ink: var(--text-primary);
    --fxm-muted: var(--text-secondary);
    --fxm-faint: var(--text-muted);
    --fxm-line: var(--border-primary);
    --fxm-line-2: var(--border-secondary);
    --fxm-accent: var(--accent-primary);
    --fxm-accent-hover: var(--accent-secondary);
    --fxm-on-accent: #111111;
    --fxm-field-bg: var(--bg-primary);
    --fxm-field-line: var(--border-primary);
    --fxm-ok: var(--accent-success);
    --fxm-ok-bg: rgba(67, 181, 129, 0.12);
    --fxm-danger: var(--accent-danger);
    --fxm-danger-bg: rgba(240, 71, 71, 0.12);
    --fxm-radius: 1rem;
    --fxm-radius-sm: var(--radius-md);
    --fxm-shadow: none;
    --fxm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;

    --acct-white: var(--bg-secondary);
    --acct-warm: var(--bg-secondary);
    --acct-hover: var(--bg-hover);
    --acct-ink: var(--text-primary);
    --acct-ink-2: var(--text-secondary);
    --acct-muted: var(--text-secondary);
    --acct-faint: var(--text-muted);
    --acct-line: var(--border-secondary);
    --acct-line-strong: var(--border-primary);
    --acct-field-line: var(--border-primary);
    --acct-black: var(--accent-secondary);
    --acct-danger: var(--accent-danger);
    --acct-danger-line: var(--accent-danger);
    --acct-danger-bg: rgba(240, 71, 71, 0.12);
    --acct-radius: var(--radius-md);

    --fhc-surface: var(--bg-secondary);
    --fhc-surface-2: var(--bg-active);
    --fhc-unread: rgba(234, 126, 17, 0.12);
    --fhc-ink: var(--text-primary);
    --fhc-muted: var(--text-secondary);
    --fhc-faint: var(--text-muted);
    --fhc-line: var(--border-primary);
    --fhc-line-2: var(--border-secondary);
    --fhc-accent: var(--accent-primary);
    --fhc-accent-hover: var(--accent-secondary);
    --fhc-on-accent: #111111;
    --fhc-link: var(--accent-primary);
    --fhc-field: var(--bg-primary);
    --fhc-field-line: var(--border-primary);
    --fhc-radius: 1rem;
    --fhc-radius-sm: var(--radius-md);
    --fhc-shadow: var(--shadow-lg);

    color: var(--text-primary);
    word-break: keep-all;
}

/* ===================
   2. 바깥 틀 — 마이페이지와 같은 폭
   =================== */
.ddangtube-container:has(.fxi),
.ddangtube-container:has(.fhc-msg) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.fxi,
.fhc-msg {
    padding-top: 1.5rem;
    padding-bottom: 4rem;
}

/* ===================
   3. 머리 · 탭 (마이페이지 탭과 같은 칩 유지)
   =================== */
.fxi .fxi__title {
    font-family: 'Galmuri11', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}


.fxi .fxi__tabs {
    gap: 0.375rem;
    margin-bottom: 1.5rem;
    border-bottom: 0;
}

.fxi .fxi__tab {
    min-height: 40px;
    padding: 0 1.25rem;
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-family: 'Galmuri11', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.fxi .fxi__tab:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.fxi .fxi__tab--active,
.fxi .fxi__tab--active:hover {
    color: var(--mypage-accent);
    background: rgba(192, 133, 69, 0.08);
    border-color: rgba(192, 133, 69, 0.25);
    font-weight: 500;
}


/* ===================
   5. 빈 상태 · 버튼 · 쪽 넘김
   =================== */
.fxi .fxm-empty {
    padding: 3.5rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
}

.fxi .fxm-empty__title {
    font-family: 'Galmuri11', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fxi .fxm-empty__desc {
    color: var(--text-secondary);
    word-break: keep-all;
}


.fxi .fxm-btn--primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #111111;
}

.fxi .fxm-btn--primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.fxi .fxm-pagination__item {
    color: var(--text-secondary);
}

.fxi .fxm-pagination__item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.fxi .fxm-pagination__item--active,
.fxi .fxm-pagination__item--active:hover {
    background: var(--accent-primary);
    color: #111111;
}

/* 포커스 — 어두운 면에서도 보이는 주황 */
.fxi .fxi__tab:focus-visible,
.fxi .fxi__prefs:focus-visible,
.fxi .fxi__link:focus-visible,
.fxi .fxi__back a:focus-visible,
.fxi .fxm-btn:focus-visible,
.fxi .fxm-pagination__item:focus-visible,
.fhc-msg a:focus-visible,
.fhc-msg button:focus-visible,
.fhc-msg input:focus-visible,
.fhc-msg textarea:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ===================
   6. 쪽지 [fluxhub_messages] — 기능이 켜졌을 때 모양 (.fhc-msg)
   =================== */
.fhc-msg input[type="text"],
.fhc-msg input[type="search"],
.fhc-msg textarea,
.fhc-msg select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}

.fhc-msg input::placeholder,
.fhc-msg textarea::placeholder {
    color: var(--text-muted);
}

/* ===================
   7. 모바일
   =================== */
@media (max-width: 768px) {
    .ddangtube-container:has(.fxi),
    .ddangtube-container:has(.fhc-msg) {
        padding: 0 1rem;
    }

    .fxi .fxi__title {
        font-size: 1.25rem;
    }

    .fxi .fxi__item {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .fxi .fxi__tabs {
        gap: 0.375rem;
    }

    .fxi .fxi__tab {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 0.5rem;
    }

    .fxi .fxm-empty {
        padding: 2.5rem 1rem;
    }
}

/* ===================
   8. 알림 제목 링크 — 본문색, 밑줄은 호버에서만
   =================== */
.fxi .fxi__subject .fxi__link {
    color: var(--text-primary);
    text-decoration: none;
}

.fxi .fxi__subject .fxi__link:hover {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===================
   9. r2 — 알림은 상자 없는 목록 행 (점 + 굵기로 안 읽음, 텍스트 버튼)
   =================== */
.fxi .fxi__prefs {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.fxi .fxi__prefs:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fxi .fxi__list {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-primary);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.fxi .fxi__item,
.fxi .fxi__item--unread,
.fxi .fxi__item:hover,
.fxi .fxi__item--unread:hover {
    background: transparent;
    border-left: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border-primary);
    padding: 16px 4px;
}

.fxi .fxi__item:last-child {
    border-bottom: 1px solid var(--border-primary);
}

.fxi .fxi__subject {
    color: var(--text-secondary);
    font-weight: 400;
}

.fxi .fxi__item--unread .fxi__subject {
    color: var(--text-primary);
    font-weight: 600;
}

.fxi .fxi__item--unread .fxi__subject::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.fxi .fxi__subject .fxi__link {
    color: inherit;
}

.fxi .fxi__summary {
    color: var(--text-secondary);
}

/* 알림 행·도구줄의 버튼 = 텍스트 버튼 (44px 터치 영역 유지) */
.fxi .fxi__actions .fxm-btn,
.fxi .fxi__toolbar .fxm-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.fxi .fxi__actions .fxm-btn:hover,
.fxi .fxi__toolbar .fxm-btn:hover {
    background: transparent;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fxi .fxi__actions {
    gap: 0;
    align-items: center;
}

@media (max-width: 768px) {
    .fxi .fxi__item,
    .fxi .fxi__item--unread {
        padding: 16px 4px 4px;
    }

    .fxi .fxi__actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: -8px;
    }
}

@media (max-width: 480px) {
    .fxi .fxi__actions .fxi__form {
        flex: 0 0 auto;
    }

    .fxi .fxi__actions .fxm-btn,
    .fxi .fxi__toolbar .fxm-btn {
        width: auto;
    }

    .fxi .fxi__toolbar {
        flex-direction: row;
        align-items: center;
    }
}

/* 종 패널(이 두 페이지에서만 적용) — 안 읽음은 틴트 대신 점 + 굵기 */
.header-message-icon .fhc-bell {
    --fhc-unread: transparent;
}

.header-message-icon .fhc-bell .fhc-bell__item--unread .fhc-bell__item-subject {
    font-weight: 600;
}

.header-message-icon .fhc-bell .fhc-bell__item:not(.fhc-bell__item--unread) .fhc-bell__item-subject {
    font-weight: 400;
}