/* ===== 미니 프로필 팝업 (공용) ===== */
.mini-profile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
}
.mini-profile-overlay.active {
    display: flex;
}
.mini-profile-modal {
    position: relative;
    width: 480px;
    height: 600px;
    overflow: visible;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
    padding: 0;
    animation: mpFadeIn 0.22s ease;
    display: flex;
    flex-direction: column;
}
.mini-profile-modal::-webkit-scrollbar {
    width: 4px;
}
.mini-profile-modal::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}
@keyframes mpFadeIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 닫기 버튼 (우측 상단) */
.mini-profile-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s, background 0.15s;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-profile-close:hover {
    color: #333;
    background: #f5f5f7;
}

/* Hamburger (mini-profile 자체 포함 — messages.css 에 의존하지 않음) */
.mp-hamburger-wrap {
    position: relative;
}
.mp-hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.mp-hamburger-btn:hover {
    background: #f5f5f7;
}
.mp-hamburger-btn img {
    display: block;
    filter: none; /* messages.css 의 brightness(0) invert(1) 오버라이드 — 검정 아이콘 유지 */
}
.mp-hamburger-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    min-width: 180px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
}
.mp-hamburger-menu .chat-hamburger-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: none;
    border: none;
    color: #000;
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    width: 100%;
}
.mp-hamburger-menu .chat-hamburger-item:hover {
    background: #f5f5f7;
}
.mp-hamburger-menu .chat-hamburger-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 4px 0;
}
.chat-hamburger-group-label {
    padding: 8px 14px 4px;
    font-family: 'Pretendard', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
}

/* 타임존 공개 토글 */
.mp-toggle-item {
    gap: 10px !important;
    cursor: pointer;
}
.mp-toggle-text {
    flex: 1;
    text-align: left;
}
.mp-toggle-item input[type="checkbox"] {
    display: none;
}
.mp-toggle-switch {
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.mp-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.mp-toggle-item input[type="checkbox"]:checked + .mp-toggle-switch {
    background: #111;
}
.mp-toggle-item input[type="checkbox"]:checked + .mp-toggle-switch::after {
    transform: translateX(14px);
}

/* ===== 헤더 (이미지 상단 + 이름/상태 하단) ===== */
.mini-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px 24px;
    gap: 12px;
    border-bottom: 1px solid #E9ECEF;
    flex-shrink: 0;
}

/* 왼쪽 아바타 */
.mp-avatars-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 우측 정보 */
.mp-header-info {
    flex: 1;
    min-width: 0;
}
.mini-profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eee;
    flex-shrink: 0;
}

/* ===== 프로필 탭 (하단 배치) ===== */
.profile-tabs {
    display: flex;
    justify-content: center;
    border-top: 1px solid #eee;
    padding: 0 28px;
    flex-shrink: 0;
    position: relative;
}
/* 탭바 안의 햄버거는 Activity 탭 바로 옆에 inline 배치 */
.mp-hamburger-wrap--tabs {
    display: flex;
    align-items: center;
    margin-left: 4px;
}
/* 탭바 안의 햄버거 메뉴는 위로 열림 + 버튼 기준 수평 중앙 */
.mp-hamburger-wrap--tabs .mp-hamburger-menu {
    top: auto;
    bottom: calc(100% + 4px);
    margin-top: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
.tab-item {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s, background-color 0.15s;
}
.tab-item:hover {
    color: #111;
    background: #f5f5f7;
}
.tab-item.active {
    color: #111;
}
.tab-content {
    display: none;
    animation: tabFadeIn 0.3s ease-in-out;
    overflow-y: auto;
    flex: 1;
    padding: 0 0 24px;
}
.tab-content.active {
    display: block;
}
.tab-content > .mini-profile-section {
    padding-left: 28px;
    padding-right: 28px;
}
.tab-hero + .mini-profile-section {
    margin-top: 0;
}
.tab-content::-webkit-scrollbar {
    width: 4px;
}
.tab-content::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Accordion ===== */
.mp-accordion {
    border-bottom: none;
}
.mp-accordion + .mp-accordion .mp-accordion-row {
    border-top: 1px solid #C2C2C2;
}
.mp-accordion:last-child {
    border-bottom: 1px solid #C2C2C2;
}
.mp-accordion-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    padding: 0;
    cursor: pointer;
    user-select: none;
    border-top: 1px solid #C2C2C2;
    border-bottom: 0;
}
.mp-accordion-row:hover {
    opacity: 0.7;
}
.mp-accordion-title {
    font-family: 'Noto Serif KR', 'KoPub Batang', 'Nanum Myeongjo', serif;
    font-size: 15px;
    font-weight: 900;
    color: #000;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}
.mp-accordion-icon {
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggMTIuMjA3TC42NDYgNC44NTNsLjcwOC0uNzA2TDggMTAuNzkzbDYuNjQ2LTYuNjQ2LjcwOC43MDZ6Ii8+PC9nPjwvc3ZnPg==") no-repeat center/contain;
    font-size: 0;
    flex-shrink: 0;
}
.mp-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.mp-accordion.open .mp-accordion-body {
    max-height: 500px;
    padding-bottom: 8px;
}

/* ===== Activity 탭 ===== */
.mp-activity-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mp-activity-bar {
    flex: 1;
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}
.mp-activity-fill {
    height: 100%;
    background: #111;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.mp-activity-fill--growth {
    background: #228be6;
}
.mp-activity-pct {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    min-width: 36px;
    text-align: right;
}
.mp-help-level-dots {
    font-size: 16px;
    letter-spacing: 2px;
}

/* 역할 칩 */
.mini-profile-role {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.mp-role-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #000;
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 3px;
    white-space: nowrap;
}

/* status-line + 이름 우측 배치 */
.mp-status-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}
.mp-name-aside {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}

/* 프로필 달성률 레벨미터 */
.mp-level-meter {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.mp-level-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.mp-level-pct {
    color: #111;
    font-weight: 700;
    font-size: 9px;
}
.mp-level-bar {
    flex: 1;
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    overflow: hidden;
    min-width: 60px;
}
.mp-level-fill {
    height: 100%;
    background: #111;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* 이름 + 뱃지 */
.mini-profile-name {
    font-family: 'Times New Roman', 'Noto Serif KR', 'KoPub Batang', 'Nanum Myeongjo', serif;
    font-size: 32px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
    line-height: 1.25;
    word-break: keep-all;
    text-transform: none;
    margin: 0 0 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.mp-badge-top {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    background: #111;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* 역할 */
.mini-profile-role {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
}

/* 상태 배지 행 */
.mp-status-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.mp-badge-gray {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 3px;
    background: #f4f4f5;
    color: #555;
    letter-spacing: 0;
}
.mp-badge-dark {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    background: #111;
    color: #fff;
    letter-spacing: 0;
}

/* ===== 섹션 공통 ===== */
.mini-profile-section {
    margin-bottom: 16px;
}
.mini-profile-section .ms-card-title {
    margin-bottom: 4px;
}
.mini-profile-label {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.02em;
    line-height: 1.5;
    text-transform: none;
    margin-bottom: 8px;
}

/* Bio */
.mini-profile-bio {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #4A4A4A;
    letter-spacing: -0.02em;
    line-height: 1.5;
    margin: 0;
    text-transform: none;
    overflow: hidden;
}

/* Activity Stats */
.mp-activity-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #E9ECEF;
}
.mp-activity-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mp-activity-stat-num {
    font-family: SackersGothicStd, sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: rgba(0, 0, 0, 1);
    line-height: 1.2;
}
.mp-activity-stat-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #4A4A4A;
    text-transform: lowercase;
}

/* DAILY LOG — 프로젝트 카드 통합 */
.mp-daily-log {
    padding: 48px 0 0;
}

/* Mr Porter 스타일 라디오 기반 아코디언 (단일 오픈) */
.mp-proj-accordion {
    margin: 0;
}
.mp-proj-accordion .AccordionSection3 {
    position: relative;
    border-top: 1px solid #dfdfdf;
}
.mp-proj-accordion .AccordionSection3:last-child {
    border-bottom: 1px solid #dfdfdf;
}
.mp-proj-accordion .AccordionSection3__openRadioButton,
.mp-proj-accordion .AccordionSection3__closeRadioButton {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* Mr Porter 헤딩 스타일 1:1 적용 */
.mp-proj-accordion .AccordionSection3__heading {
    display: inline-block;
    position: relative;
    height: 72px;
    width: 100%;
    flex-shrink: 0;
    font-weight: 400;
    font-size: inherit;
    cursor: pointer;
}
.mp-proj-accordion .AccordionSection3__heading--colour {
    color: #000;
}
.mp-proj-accordion .EditorialAccordion0__accordionTitle {
    padding: 24px 0;
    outline-offset: -1px;
    font: 18px/24px Georgia, serif;
    font-weight: 400;
    margin: 0;
}
/* 클릭 라벨 — 헤딩 영역을 절대 위치로 덮음 */
.mp-proj-accordion > .AccordionSection3 > label.openLabel,
.mp-proj-accordion > .AccordionSection3 > label.closeLabel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    cursor: pointer;
    z-index: 2;
    background: transparent;
}
.mp-proj-accordion > .AccordionSection3 > label.closeLabel {
    display: none;
}
.mp-proj-accordion > .AccordionSection3 > .AccordionSection3__openRadioButton:checked ~ label.openLabel {
    display: none;
}
.mp-proj-accordion > .AccordionSection3 > .AccordionSection3__openRadioButton:checked ~ label.closeLabel {
    display: block;
}
/* 화살표 아이콘 (V → ^ rotate) */
.mp-proj-accordion .AccordionSection3__arrowIcon {
    position: absolute;
    top: 30px;
    right: 4px;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease;
    pointer-events: none;
    z-index: 1;
}
.mp-proj-accordion > .AccordionSection3 > .AccordionSection3__openRadioButton:checked ~ .AccordionSection3__arrowIcon {
    transform: rotateX(180deg);
}
/* 컨텐츠 펼침/접힘 애니메이션 */
.mp-proj-accordion .AccordionSection3__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}
.mp-proj-accordion > .AccordionSection3 > .AccordionSection3__openRadioButton:checked ~ .AccordionSection3__content {
    max-height: 1500px;
}
.mp-proj-accordion .AccordionSection3__contentChildWrapper {
    padding: 0 0 18px;
}
.mp-proj-accordion .EditorialAccordion0__accordionContentDiv {
    /* 안쪽 컨텐츠 wrapper — Mr Porter 구조 유지 */
}
.mp-proj-accordion .EditorialAccordion0__accordionContent {
    padding-top: 4px;
}
/* 포커스 표시 (접근성) */
.mp-proj-accordion > .AccordionSection3 > .AccordionSection3__openRadioButton:focus-visible ~ label.openLabel,
.mp-proj-accordion > .AccordionSection3 > .AccordionSection3__closeRadioButton:focus-visible ~ label.closeLabel {
    outline: 2px solid #2563EB;
    outline-offset: -2px;
}

.mp-proj-card-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 12px 0 4px;
}

/* CTA 링크 (Mr Porter 스타일) */
.mp-proj-cta {
    display: inline-block;
    font-family: Georgia, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2857142857142858;
    color: rgba(0, 0, 0, 1);
    text-transform: none;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    transition: opacity 0.2s ease;
}
.mp-proj-card-tagline {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6A6A6A;
    letter-spacing: -0.02em;
    line-height: 1.45;
    margin: 0 0 12px;
}
.mp-proj-card-cycle {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1.4;
    padding: 10px 12px;
    background: #F8F9FA;
    border-radius: 6px;
    margin-bottom: 14px;
}
.mp-proj-card-cycle strong {
    font-weight: 800;
}
.mp-proj-card-cycle--empty {
    color: #888;
    font-style: normal;
}
.mp-proj-card-week {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px 0;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    margin-bottom: 14px;
}
.mp-proj-card-mix {
    margin-top: 4px;
}

/* 상태 배지 */
.mp-dl-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.mp-dl-status--active {
    background: #ECFDF5;
}
.mp-dl-status--idle {
    background: #FEF3C7;
}
.mp-dl-status--rest {
    background: #FEE2E2;
}
.mp-dl-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mp-dl-status--active .mp-dl-status-dot {
    background: #10B981;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
    animation: mpPulse 2s infinite;
}
.mp-dl-status--idle .mp-dl-status-dot { background: #F59E0B; }
.mp-dl-status--rest .mp-dl-status-dot { background: #EF4444; }
@keyframes mpPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.08); }
}
.mp-dl-status-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
    letter-spacing: -0.02em;
}
.mp-dl-status--idle .mp-dl-status-text { color: #B45309; }
.mp-dl-status--rest .mp-dl-status-text { color: #B91C1C; }
.mp-dl-status-text strong {
    font-family: 'SF Mono', monospace;
    font-weight: 700;
    margin-right: 1px;
}

/* 지금 만드는 것 — 헤드라인 */
.mp-dl-now {
    margin-bottom: 16px;
}
.mp-dl-now-headline {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1.45;
    margin-bottom: 4px;
}
.mp-dl-now-headline strong {
    font-weight: 800;
}
.mp-dl-now-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6A6A6A;
    letter-spacing: -0.02em;
}
.mp-dl-now-project {
    font-weight: 700;
    color: #111;
}

/* 최근 활동 — 큰 숫자 3분할 */
.mp-dl-week {
    padding: 14px 0;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    margin-bottom: 16px;
}
.mp-dl-week-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    text-align: center;
}
.mp-dl-week-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.mp-dl-week-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}
.mp-dl-week-divider {
    width: 1px;
    height: 28px;
    background: #F0F0F0;
}
.mp-dl-week-num {
    font-family: 'SF Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: #111;
    line-height: 1;
    letter-spacing: -0.02em;
}
.mp-dl-week-cap {
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #6A6A6A;
    letter-spacing: -0.02em;
}

/* 행동 분포 — 가로 바 */
.mp-dl-mix {
    margin-bottom: 4px;
}
.mp-dl-mix-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.mp-dl-mix-total {
    font-weight: 500;
    color: #6A6A6A;
}
.mp-dl-mix-total strong {
    font-family: 'SF Mono', monospace;
    font-weight: 700;
    color: #111;
}
.mp-dl-mix-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}
.mp-dl-mix-row:last-child {
    margin-bottom: 0;
}
.mp-dl-mix-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #4A4A4A;
    letter-spacing: -0.02em;
    min-width: 60px;
}
.mp-dl-mix-bar {
    flex: 1;
    height: 8px;
    background: #F5F5F5;
    border-radius: 4px;
    overflow: hidden;
}
.mp-dl-mix-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.mp-dl-mix-fill--done { background: #10B981; }
.mp-dl-mix-fill--prog { background: #3B82F6; }
.mp-dl-mix-fill--miss { background: #D1D5DB; }
.mp-dl-mix-num {
    font-family: 'SF Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    min-width: 32px;
    text-align: right;
}

/* 공통 row 리스트 (Projects · Highlights) */
.mp-row-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
}
.mp-row:last-child {
    border-bottom: none;
}
.mp-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mp-row-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-row-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6A6A6A;
    letter-spacing: -0.02em;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-row-num {
    font-family: 'SF Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

/* BIO line-clamp + Read More */
.bio-clamp-wrap {
    position: relative;
}
.bio-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.bio-clamped.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.bio-read-more {
    display: inline-block;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    padding: 4px 0 0;
    font-family: Georgia, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2857142857142858;
    color: rgba(0, 0, 0, 1);
    text-transform: none;
    text-decoration: none;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    transition: opacity 0.2s ease;
    cursor: pointer;
}
.bio-read-more:hover {
    opacity: 0.6;
}

/* Track Record */
.mini-profile-track {
    font-size: 12.5px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 8px 12px;
    background: #fafafa;
    border-left: 3px solid #111;
}

/* ===== 칩 ===== */
.mini-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mp-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #000;
    color: #fff;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.mp-chip--can-help {
    background: #000;
    color: #fff;
    font-weight: 500;
}
.mp-chip--need {
    background: #000;
    color: #fff;
}

/* ===== 액션 버튼 ===== */
.mini-profile-actions {
    display: flex;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.mp-btn {
    flex: 1;
    padding: 11px 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;
}
.mp-btn:hover {
    border-color: #111;
}
.mp-btn-primary {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ===== 프로필 팝업 (상세) - directory.html에서 이관 ===== */
.profile-popup { background:#fff; border-radius:12px; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.18); position:relative; }
.profile-close { position:absolute; top:12px; right:12px; z-index:5; font-size:22px; }
.profile-popup-cover { height:80px; background:linear-gradient(135deg,#2b3137 0%,#3a4a5a 100%); border-radius:12px 12px 0 0; }
.profile-popup-header { display:flex; align-items:flex-end; gap:14px; padding:0 20px; margin-top:-36px; }
.profile-popup-avatar { width:72px; height:72px; border-radius:50%; border:3px solid #fff; object-fit:cover; background:#e9ecef; flex-shrink:0; }
.profile-popup-name-area { padding-bottom:6px; }
.profile-popup-name-area h3 { font-size:18px; font-weight:700; margin:0; line-height:1.2; }
.profile-popup-role { font-size:13px; color:#228be6; font-weight:500; margin-top:2px; }
.profile-popup-status-line { display:flex; align-items:center; gap:10px; margin-top:4px; font-size:12px; }
.profile-popup-name-inline { font-weight:700; color:#111; font-size:13px; }
.profile-popup-tz { color:#868e96; }
.profile-popup-bio { padding:12px 20px 0; font-size:13px; color:#495057; line-height:1.5; }
.profile-popup-current { padding:8px 20px 0; font-size:12px; color:#868e96; }
.profile-popup-current i { color:#fab005; }
.profile-popup-details { padding:12px 20px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.profile-popup-tags { padding:10px 20px 0; }
.profile-popup-tags strong { font-size:11px; color:#868e96; text-transform:uppercase; letter-spacing:0.03em; }
.profile-popup-tags .cp-tag { font-size:11px; }
.profile-popup-actions { padding:16px 20px; display:flex; gap:8px; }
.pp-btn-message { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; font-size:14px; font-weight:600; background:#228be6; color:#fff; border:none; border-radius:8px; cursor:pointer; flex:1; justify-content:center; }
.pp-btn-message:hover { background:#1c7ed6; }

.pp-detail-item label { display:block; font-size:10px; font-weight:600; color:#adb5bd; text-transform:uppercase; letter-spacing:0.04em; }
.pp-detail-item span { font-size:12px; color:#333; }

/* 미니 프로필 내부에 임베드될 때 shadow/max-width 제거 */
.mini-profile-modal .profile-popup { box-shadow:none; max-width:none; }

/* Dark mode */
html.dark-mode .profile-popup { background:#1e1e1e; }
html.dark-mode .profile-popup-name-area h3 { color:#f5f5f7; }
html.dark-mode .profile-popup-bio { color:#ccc; }
html.dark-mode .pp-detail-item span { color:#ccc; }
html.dark-mode .profile-popup-cover { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); }

/* ===== 반응형 ===== */
@media (max-width: 640px) {
    .mini-profile-modal {
        width: calc(100vw - 16px);
        max-width: 480px;
        max-height: 90vh;
        padding: 0;
    }
    /* 모바일에서 섹션/히어로 좌우 패딩 축소: 28px → 18px */
    .tab-content > .mini-profile-section {
        padding-left: 18px;
        padding-right: 18px;
    }
    .tab-hero--overview,
    .mini-profile-header {
        padding-left: 18px;
        padding-right: 18px;
    }
    .tab-hero--bio,
    .tab-hero--activity {
        padding-left: 18px;
        padding-right: 18px;
    }
    .profile-tabs {
        padding: 0 10px;
    }
    .mini-profile-name {
        font-size: 32px;
    }
    .mini-profile-actions {
        padding: 14px 18px;
    }
    .mp-btn {
        padding: 14px 0;
        font-size: 15px;
    }
    .profile-popup { max-width:100%; border-radius:0; max-height:100vh; }
    .profile-popup-details { grid-template-columns:1fr; }
}

/* ===== Quick Message Popup ===== */
.quick-msg-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.quick-msg-overlay.active { display: flex; }
.quick-msg-modal {
    position: relative;
    background: #fff;
    border-radius: 0;
    width: 445px;
    height: 227px;
    border: 2px solid #000;
    max-width: calc(100vw - 32px);
    padding: 10px 20px 20px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}
.quick-msg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}
.quick-msg-close {
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.quick-msg-close:hover { color: #333; }
.quick-msg-modal .mp-accordion-body {
    border-top: 1px solid #000;
    padding: 8px 0;
}
.quick-msg-input {
    width: 100%;
    height: 95px;
    text-align: left;
    border: none;
    padding: 4px 0;
    font-family: 'Pretendard', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.5 !important;
    resize: none;
    outline: none;
    box-sizing: border-box;
    text-transform: none !important;
    transition: color 0.2s ease-in-out;
}
.quick-msg-input::placeholder {
    color: #757575;
    font-size: 13px;
    text-align: center;
    white-space: pre-line;
}
.quick-msg-footer { display: flex; flex-shrink: 0; }
.quick-msg-send {
    flex: 1;
    padding: 11px 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    border: 1px solid #000;
    background: #000;
    color: #fff;
}
.quick-msg-send:hover { background: #333; border-color: #333; }
.quick-msg-send:disabled { background: #adb5bd; border-color: #adb5bd; cursor: not-allowed; }
html.dark-mode .quick-msg-modal { background: #1e1e1e; }
html.dark-mode .quick-msg-header { color: #f0f0f0; }
html.dark-mode .quick-msg-input { background: #2a2a2a; border-color: #444; color: #f0f0f0; }

/* ===== Tab Hero — 각 탭 상단의 고유 비주얼 ===== */

/* BIO — 풀쿼트 히어로 */
.tab-hero--bio {
    padding: 48px 28px 24px;
    border-bottom: 1px solid #E9ECEF;
}
.bio-pullquote {
    font-family: 'Times New Roman', 'Noto Serif KR', 'KoPub Batang', 'Nanum Myeongjo', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    letter-spacing: -0.015em;
    margin: 0;
    text-align: left;
    position: relative;
    padding-left: 22px;
    word-break: keep-all;
}
.bio-pullquote::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: -6px;
    font-size: 44px;
    color: #bbb;
    font-family: Georgia, serif;
    line-height: 1;
}
.bio-pullquote:empty {
    display: none;
}

/* BIO 풀쿼트 — 호버 시 연필 아이콘 노출 + 인라인 편집 */
.bio-pullquote-wrap {
    position: relative;
}
.bio-pullquote-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: 0.18em;
    margin-left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #555;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.bio-pullquote-wrap:hover .bio-pullquote-edit-btn {
    opacity: 1;
}
@media (hover: none) {
    .bio-pullquote-edit-btn {
        opacity: 1;
    }
}
.bio-pullquote-edit-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}
.bio-pullquote-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bio-pullquote-input {
    width: 100%;
    font-family: 'Times New Roman', 'Noto Serif KR', 'KoPub Batang', 'Nanum Myeongjo', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    letter-spacing: -0.015em;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 12px 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
    box-sizing: border-box;
}
.bio-pullquote-input:focus {
    border-color: #111;
}
.bio-pullquote-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.bio-pullquote-cancel,
.bio-pullquote-save {
    padding: 7px 14px;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
}
.bio-pullquote-cancel {
    background: none;
    color: #555;
    border-color: #d5d5d5;
}
.bio-pullquote-cancel:hover {
    background: #f5f5f7;
    color: #111;
}
.bio-pullquote-save {
    background: #111;
    color: #fff;
}
.bio-pullquote-save:hover {
    background: #333;
}
.bio-pullquote-save:disabled {
    background: #aaa;
    cursor: not-allowed;
}

/* Match — 좌/우 정렬 zigzag 레이아웃 */
#tab-match {
    padding-top: 48px;
    text-align: center;
}
.match-title {
    font-family: 'Times New Roman', 'Noto Serif KR', 'KoPub Batang', 'Nanum Myeongjo', serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    color: #111;
    letter-spacing: -0.015em;
    margin: 0 0 32px;
    text-align: center;
    word-break: keep-all;
}
#tab-match .mini-profile-section {
    margin-bottom: 24px;
}
#tab-match .ms-card-title {
    text-align: center;
}
#tab-match .mini-profile-bio {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}
#tab-match #mpPrimaryRoleSection,
#tab-match #mpPrimaryRoleSection .ms-card-title,
#tab-match #mpPrimaryRoleSection .mini-profile-bio {
    text-align: left;
}
#tab-match #mpPrimaryRoleSection .mini-profile-bio {
    max-width: none;
    margin: 0;
}
#tab-match #mpLookingForRoleSection,
#tab-match #mpLookingForRoleSection .ms-card-title,
#tab-match #mpLookingForRoleSection .mini-profile-bio {
    text-align: right;
}
#tab-match #mpLookingForRoleSection .mini-profile-bio {
    max-width: none;
    margin: 0;
}
#tab-match #mpCanHelpSection,
#tab-match #mpCanHelpSection .ms-card-title,
#tab-match #mpCanHelpSection .mini-profile-bio {
    text-align: left;
}
#tab-match #mpCanHelpSection .mini-profile-bio {
    max-width: none;
    margin: 0;
}
#tab-match .mini-profile-section:has(#mpNeeds),
#tab-match .mini-profile-section:has(#mpNeeds) .ms-card-title,
#tab-match #mpNeeds {
    text-align: right;
}
#tab-match #mpNeeds {
    max-width: none;
    margin: 0;
}

/* Activity — 대형 스탯 히어로 */
.tab-hero--activity {
    padding: 48px 28px 32px;
    border-bottom: 1px solid #E9ECEF;
}
.tab-hero--activity .mp-activity-stats {
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
    gap: 40px;
}
.tab-hero--activity .mp-activity-stat-num {
    font-size: 44px;
    line-height: 1;
}
.tab-hero--activity .mp-activity-stat-label {
    font-family: SackersGothicStd, sans-serif;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #888;
    margin-top: 10px;
}