/**
 * FluxShop 프로필 페이지 — 차일드 테마 오버라이드
 *
 * 변경사항:
 * - 제목 Galmuri11 폰트 제거 (시스템 폰트로 리셋)
 * - 피드 아이템을 게시판 리스팅 스타일(2줄 구조)로 변경
 * - 탭 디자인 개선
 * - 전체 간격 및 가독성 개선
 *
 * @package DdangTube_Child
 * @since   1.1.0
 */


/* ===================
   1. 프로필 컨테이너
   =================== */

.fluxshop-profile {
    max-width: 720px;
    margin: 0 auto;
}


/* ===================
   2. 프로필 헤더
   =================== */

.fluxshop-profile__header {
    padding: 24px;
    gap: 16px;
    border-radius: 14px;
    border-color: var(--fs-border);
    background: var(--fs-bg-light);
}

/* 멤버십 배지 — 프로필 내 간격 */
.fluxshop-profile__info .ddtc-membership-badge {
    margin-bottom: 6px;
}

.fluxshop-profile__name {
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}

.fluxshop-profile__meta {
    font-size: 12px;
    gap: 8px;
}

.fluxshop-profile__stats {
    gap: 20px;
}

.fluxshop-profile__stat {
    min-width: 48px;
    gap: 2px;
}

.fluxshop-profile__stat-value {
    font-size: 17px;
    font-weight: 700;
}

.fluxshop-profile__stat-label {
    font-size: 11px;
    color: var(--fs-text-muted);
}


/* ===================
   3. 탭 네비게이션
   =================== */

.fluxshop-profile__tabs {
    margin-top: 20px;
    border-bottom: none;
    gap: 4px;
}

.fluxshop-profile__tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fs-text-muted);
    background: transparent;
    border: 1px solid var(--fs-border);
    border-bottom: 1px solid var(--fs-border);
    border-radius: 100px;
    margin-bottom: 0;
    transition: all 0.2s;
}

.fluxshop-profile__tab--active,
.fluxshop-profile__tab:hover {
    color: #fff;
    font-weight: 600;
    background: transparent;
    border-color: #ff6b00;
}

.fluxshop-profile__tab-count {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.06);
    color: var(--fs-text-muted);
}

.fluxshop-profile__tab--active .fluxshop-profile__tab-count {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* ===================
   4. 피드 리스트 (게시판 2줄 구조)
   =================== */

.fluxshop-profile__feed {
    display: flex;
    flex-direction: column;
}

/* 각 아이템: flex-wrap 2줄 레이아웃 */
.fluxshop-profile__feed-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 14px 4px;
    border-bottom: 1px solid var(--fs-border);
    row-gap: 6px;
    column-gap: 0;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.fluxshop-profile__feed-item:last-child {
    border-bottom: none;
}

.fluxshop-profile__feed-item:hover {
    background: var(--fs-bg-hover);
    border-radius: 6px;
}

/* 1행/2행 강제 줄바꿈 */
.fluxshop-profile__feed-item::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 3;
}

/* --- 1행: 게시판 뱃지 + 제목 --- */

.fluxshop-profile__feed-board {
    order: 1;
    display: inline-block;
    padding: 2px 8px;
    background: var(--fs-bg-hover);
    color: var(--fs-text-sub);
    border: 1px solid var(--fs-border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 8px;
    margin-bottom: 0;
    line-height: 1.4;
    white-space: nowrap;
}

/* 작성글 제목 — Galmuri11 제거 */
.fluxshop-profile__feed-title {
    order: 2;
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--fs-text);
    margin: 0;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.fluxshop-profile__feed-item:hover .fluxshop-profile__feed-title {
    color: var(--fs-text);
}

/* 댓글 탭: 원글 제목 */
.fluxshop-profile__feed-origin {
    order: 2;
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fs-text);
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* --- 2행: 날짜 · 조회수 --- */

.fluxshop-profile__feed-date {
    order: 4;
    font-size: 12px;
    color: var(--fs-text-muted);
    white-space: nowrap;
}

.fluxshop-profile__feed-hit {
    order: 5;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--fs-text-muted);
}

.fluxshop-profile__feed-hit::before {
    content: "\00b7";
    margin: 0 6px;
    color: var(--fs-text-muted);
}

.fluxshop-profile__feed-hit svg {
    opacity: 0.5;
}

/* 댓글 탭: 댓글 내용 미리보기 */
.fluxshop-profile__feed-excerpt {
    order: 6;
    font-size: 12px;
    color: var(--fs-text-muted);
    line-height: 1.5;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-basis: 100%;
}


/* ===================
   5. 빈 상태
   =================== */

.fluxshop-profile__empty {
    padding: 56px 16px;
}

.fluxshop-profile__empty svg {
    opacity: 0.15;
}

.fluxshop-profile__empty p {
    font-size: 13px;
    color: var(--fs-text-muted);
}


/* ===================
   6. 반응형
   =================== */

@media (max-width: 768px) {
    .fluxshop-profile__header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 18px 16px;
        border-radius: 10px;
    }

    .fluxshop-profile__stats {
        width: 100%;
        justify-content: center;
        gap: 28px;
        padding-top: 14px;
        border-top: 1px solid var(--fs-border);
    }

    .fluxshop-profile__tab {
        padding: 11px 16px;
        font-size: 13px;
    }

    .fluxshop-profile__feed-item {
        padding: 12px 2px;
    }

    .fluxshop-profile__feed-title,
    .fluxshop-profile__feed-origin {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .fluxshop-profile__header {
        padding: 14px 12px;
        gap: 10px;
    }

    .fluxshop-profile__name {
        font-size: 15px;
    }

    .fluxshop-profile__tabs {
        margin-top: 16px;
    }

    .fluxshop-profile__tab {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 12px;
    }
}