/**
 * 파일명: common.css
 * 위치: /wp-content/plugins/jmp-mypage/assets/css/
 * 설명: 마이페이지 공통 스타일 — Solapi Design System
 * 버전: 3.0.0
 */

/* =========================================
   Astra / astra-child 테마 격리
   - 마이페이지 스타일은 wp_enqueue_scripts priority 20으로
     astra-child(priority 15) 이후 로드되어 테마 덮어쓰기 방지.
   - 프로필·JSeeds는 .jmp-mypage-wrapper 내부에서만 테마 변수 적용.
   ========================================= */

/* =========================================
   Solapi Design Tokens
   ========================================= */
/*
 * ⚠️ 주의: .jmp-mypage-container는 여기서 변수 정의 제거
 *   이유: .jmp-mypage-wrapper[data-theme="X"]의 테마 변수가
 *   .jmp-mypage-container에서 재정의되면 자식 요소에 기본값이
 *   전파되어 테마 색상이 적용되지 않음.
 *   대신 mypage-themes.css에서 컨테이너에도 테마 변수 전파.
 */
.jmp-mypage-wrapper,
.jmp-mypage-login-required {
    --brand:        #4541FF;
    --brand-light:  #7B6FFF;
    --brand-pale:   #A788FF;
    --brand-dark:   #3730E3;
    --brand-glow:   rgba(69,65,255,.12);
    --bg-root:      #ffffff;
    --bg-1:         #ffffff;
    --bg-2:         #F8F8FF;
    --bg-3:         #F0F0FF;
    --bg-4:         #E2E2F8;
    --bg-card:      #ffffff;
    --bg-input:     #F8F8FF;
    --text-1:       #111827;
    --text-2:       #6B7280;
    --text-3:       #9CA3AF;
    --border-1:     #E5E7EB;
    --border-2:     #F3F4F6;
    --shadow-sm:    0 1px 3px rgba(69,65,255,.06);
    --shadow-md:    0 4px 12px rgba(69,65,255,.08);
    --shadow-lg:    0 8px 24px rgba(69,65,255,.12);
    --radius-sm:    6px;
    --radius:       10px;
    --radius-lg:    14px;
    --radius-xl:    18px;
    --radius-full:  9999px;
    --success:      #10B981;
    --success-bg:   rgba(16,185,129,.1);
    --error:        #EF4444;
    --error-bg:     rgba(239,68,68,.1);
    --warning:      #F59E0B;
    --warning-bg:   rgba(245,158,11,.1);
    --brand-contrast: #ffffff;
    --ease:         cubic-bezier(0.4,0,0.2,1);
    --transition:   200ms cubic-bezier(0.4,0,0.2,1);
    background: transparent;
    color: inherit;
}

/* 레거시 변수 호환 매핑 */
.jmp-mypage-wrapper *,
.jmp-mypage-login-required *,
.jmp-mypage-container * {
    --joyn-primary:           var(--brand);
    --joyn-primary-hover:     var(--brand-light);
    --joyn-primary-light:     var(--brand-glow);
    --joyn-primary-dark:      var(--brand-dark);
    --joyn-success:           var(--success);
    --joyn-success-light:     var(--success-bg);
    --joyn-error:             var(--error);
    --joyn-error-light:       var(--error-bg);
    --joyn-warning:           var(--warning);
    --joyn-warning-light:     var(--warning-bg);
    --joyn-text:              var(--text-1);
    --joyn-text-secondary:    var(--text-2);
    --joyn-text-muted:        var(--text-3);
    --joyn-bg:                var(--bg-card);
    --joyn-bg-secondary:      var(--bg-2);
    --joyn-bg-tertiary:       var(--bg-3);
    --joyn-border:            var(--border-1);
    --joyn-border-light:      var(--border-2);
    --joyn-shadow:            var(--shadow-sm);
    --joyn-shadow-md:         var(--shadow-md);
    --joyn-shadow-lg:         var(--shadow-lg);
    --joyn-radius-md:         var(--radius-sm);
    --joyn-radius-lg:         var(--radius);
    --joyn-radius-xl:         var(--radius-lg);
    --joyn-radius-full:       var(--radius-full);
    --joyn-transition:        var(--transition);
    --joyn-text-xs:    clamp(12px,2.8vw,13px);
    --joyn-text-sm:    clamp(13px,3vw,14px);
    --joyn-text-base:  clamp(14px,3.2vw,15px);
    --joyn-text-lg:    clamp(16px,3.8vw,18px);
    --joyn-text-xl:    clamp(18px,4.2vw,22px);
    --joyn-text-2xl:   clamp(22px,5vw,28px);
    --joyn-font-normal:   500;
    --joyn-font-medium:   600;
    --joyn-font-semibold: 700;
    --joyn-font-bold:     800;
    --joyn-space-1:  clamp(4px,1vw,6px);
    --joyn-space-2:  clamp(8px,1.5vw,10px);
    --joyn-space-3:  clamp(10px,2vw,12px);
    --joyn-space-4:  clamp(14px,2.5vw,16px);
    --joyn-space-5:  clamp(18px,3vw,22px);
    --joyn-space-6:  clamp(22px,3.5vw,28px);
    --joyn-space-8:  clamp(28px,4.5vw,36px);
    --joyn-space-10: clamp(36px,5.5vw,44px);
    --joyn-container: clamp(320px,92vw,720px);
}

/* =========================================
   Base Reset
   ========================================= */
.jmp-mypage-container * {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.jmp-mypage-wrapper,
.jmp-mypage-login-required {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    overflow-x: hidden;
    touch-action: pan-y;
}

/* 작은 모바일: 가로 스크롤·좌우 흔들림 방지 (100vw·자식 overflow 대비) */
html:has(.jmp-mypage-wrapper),
body:has(.jmp-mypage-wrapper) {
    overflow-x: hidden;
    max-width: 100%;
}

/* =========================================
   Hero — Compact Bar (Astra child 완전 격리)
   ========================================= */
/* 100vw + negative margin 은 모바일에서 가로 스크롤·좌우 흔들림 유발 → 부모 100% 로 제한 */
#jmp-mypage-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 0 32px !important;
    min-height: 72px !important;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 60%, var(--brand-pale) 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    float: none !important;
}
#jmp-mypage-hero::before {
    content:''; position:absolute; right:-60px; top:-60px;
    width:200px; height:200px; border-radius:50%;
    background:rgba(255,255,255,.07); pointer-events:none;
}
#jmp-mypage-hero::after {
    content:''; position:absolute; left:-30px; bottom:-50px;
    width:140px; height:140px; border-radius:50%;
    background:rgba(255,255,255,.05); pointer-events:none;
}

.jmp-hero-left {
    display: flex; align-items: center; gap: 14px;
    flex: 1;
    min-width: 0;
    flex-shrink: 1;
    position: relative; z-index: 1;
}
.jmp-hero-badge {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
    border-radius: 99px; padding: 4px 12px;
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: rgba(255,255,255,.9);
    white-space: nowrap;
}
.jmp-hero-title {
    font-size: 22px !important; font-weight: 900 !important;
    color: var(--brand-contrast) !important; -webkit-text-fill-color: var(--brand-contrast) !important;
    letter-spacing: -1px !important; white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    text-shadow: none !important; background: none !important;
    line-height: 1 !important; margin: 0 !important; padding: 0 !important;
}

.jmp-hero-right {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; position: relative; z-index: 1;
}
.jmp-hero-avatar {
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important; border: 2px solid rgba(255,255,255,.5) !important;
    object-fit: cover !important; overflow: hidden !important;
    background: rgba(255,255,255,.2) !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; font-size: 14px !important;
    font-weight: 700 !important; color: var(--brand-contrast) !important;
}
.jmp-hero-avatar img { width:100%; height:100%; object-fit:cover; }

.jmp-hero-username {
    font-size: 13px; font-weight: 700; color: var(--brand-contrast);
    white-space: nowrap; max-width: 120px;
    overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 768px) {
    #jmp-mypage-hero { padding:14px 20px !important; min-height:0 !important; gap:12px !important; }
    .jmp-hero-username { display: none; }
}
@media (max-width: 480px) {
    #jmp-mypage-hero { padding:12px 16px !important; }
    .jmp-hero-badge  { display: none; }
}

/* =========================================
   Container
   ========================================= */
.jmp-mypage-container {
    width: 100%; max-width: 720px; min-width: 0;
    margin-inline: auto;
    padding-inline: clamp(16px,4vw,20px);
    font-family: 'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size: var(--joyn-text-base);
    font-weight: var(--joyn-font-normal);
    color: var(--text-1);
    line-height: 1.65; letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
}
.jmp-mypage-content {
    padding-left: 0; padding-right: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

/* 카드 공통 — 테마 변수로 배경/글자/테두리 통일 */
.joyn-card,
.jmp-card {
    background: var(--bg-card);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.joyn-card:hover,
.jmp-card:hover {
    box-shadow: var(--shadow-md);
}

/* 쪽지 탭 컨텐츠 영역 밖 하단 패딩 */
.jmp-mypage-content:has(.jmp-messages-tab-wrap) { padding-bottom: 50px; }

/* =========================================
   Tab Navigation
   ========================================= */
/* =========================================
   Tab Pill Buttons — hover (base/active는 인라인 스타일)
   ========================================= */
#jmp-mypage-nav .jmp-tab-btn:hover {
    background: var(--bg-3) !important;
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px var(--brand-glow) !important;
}
@media (max-width: 768px) {
    #jmp-mypage-nav .jmp-tab-btn:hover {
        transform: none !important;
    }
}
#jmp-mypage-nav .jmp-tab-btn i {
    pointer-events: none !important;
    display: inline-block !important;
}
#jmp-mypage-nav .jmp-tab-btn span {
    pointer-events: none !important;
}

/* 쪽지 배지 */
.jmp-tab-btn .nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--error); color: var(--brand-contrast);
    font-size: 10px; font-weight: 800;
    border-radius: 99px; margin-left: 4px; line-height: 1;
}

@media (max-width: 480px) {
    #jmp-mypage-nav {
        gap: 6px !important;
        padding: 12px 16px !important;
    }
}

.section-title i, .joyn-section-title i {
    font-size: 14px; color: var(--brand); opacity: .8;
}

/* =========================================
   Profile Header
   ========================================= */
.profile-header, .joyn-profile-header {
    display: flex; align-items: center;
    gap: var(--joyn-space-4); padding: 0;
    margin-bottom: var(--joyn-space-4);
}
.avatar, .joyn-avatar {
    width: clamp(44px,10vw,52px); height: clamp(44px,10vw,52px);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg,var(--brand-light),var(--brand));
    color: var(--brand-contrast); display: flex; align-items: center;
    justify-content: center; font-size: var(--joyn-text-base);
    font-weight: var(--joyn-font-bold); flex-shrink: 0;
    overflow: hidden; box-shadow: 0 0 0 3px var(--brand-glow);
}
.avatar img, .joyn-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-name, .joyn-profile-name, .name {
    font-size: var(--joyn-text-lg); font-weight: var(--joyn-font-bold);
    color: var(--text-1); margin-bottom: 2px;
}
.profile-email, .joyn-profile-email, .email {
    font-size: var(--joyn-text-sm); color: var(--text-2);
}
.profile-top { display: flex; align-items: center; gap: var(--joyn-space-4); margin-bottom: var(--joyn-space-4); }
.profile-main { flex: 1; min-width: 0; }
.stats {
    display: flex; flex-wrap: wrap; gap: var(--joyn-space-3);
    padding: var(--joyn-space-4); background: var(--bg-2);
    border-radius: var(--radius); margin-bottom: var(--joyn-space-4);
}
.stat { display: flex; align-items: center; gap: 4px; font-size: var(--joyn-text-sm); color: var(--text-2); }
.stat-value { font-weight: var(--joyn-font-bold); color: var(--text-1); }

/* =========================================
   Buttons
   ========================================= */
.jmp-btn {
    display: inline-flex; align-items: center;
    justify-content: center; gap: 7px;
    padding: 11px 20px;
    font-size: var(--joyn-text-base);
    font-weight: var(--joyn-font-medium);
    font-family: 'Pretendard',sans-serif;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    cursor: pointer; transition: all var(--transition);
    text-decoration: none !important;
    white-space: nowrap; min-height: 44px;
    letter-spacing: -.2px;
}
.jmp-btn i { font-size: var(--joyn-text-lg); }
.jmp-btn-primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-color: var(--brand);
    color: var(--brand-contrast); box-shadow: 0 2px 8px var(--brand-glow);
}
.jmp-btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
    border-color: var(--brand-light);
    color: var(--brand-contrast); transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(69,65,255,.25);
}
.jmp-btn-primary:active { transform: scale(.98); box-shadow: none; }
.jmp-btn-outline {
    background: transparent; border-color: var(--border-1); color: var(--text-2);
}
.jmp-btn-outline:hover {
    background: var(--bg-2); border-color: var(--brand);
    color: var(--brand); transform: translateY(-1px);
}
.jmp-btn-outline:active { transform: scale(.98); }
.jmp-btn-sm { padding: 8px 14px; font-size: var(--joyn-text-sm); min-height: 36px; }
.actions, .profile-actions, .joyn-actions {
    display: flex;
    flex-direction: row;
    gap: var(--joyn-space-3);
}
.actions .jmp-btn, .profile-actions .jmp-btn, .joyn-actions .jmp-btn { flex: 1; }

/* =========================================
   Info Rows
   ========================================= */
.info-row, .joyn-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(11px,2.2vw,13px) 0;
    border-bottom: 1px solid var(--border-2);
    gap: 12px;
}
.info-row:last-child, .joyn-info-row:last-child { border-bottom: none; }
.info-label, .joyn-info-label {
    font-size: var(--joyn-text-sm);
    font-weight: 600;
    color: var(--text-3);
    flex-shrink: 0;
}
.info-value, .joyn-info-value {
    font-size: var(--joyn-text-sm);
    font-weight: 600;
    color: var(--text-1);
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* =========================================
   Badge
   ========================================= */
.badge, .joyn-badge {
    display: inline-flex; align-items: center;
    padding: 4px 10px; background: var(--brand-glow);
    color: var(--brand); font-size: var(--joyn-text-xs);
    font-weight: var(--joyn-font-bold); border-radius: var(--radius-full);
    border: 1px solid var(--brand-glow);
}
.badge-success, .joyn-badge-success {
    background: var(--success-bg); color: var(--success);
    border-color: var(--success-bg);
}

/* =========================================
   Form Elements
   ========================================= */
.joyn-form-group { margin-bottom: var(--joyn-space-5); }
.joyn-label {
    display: block; font-size: var(--joyn-text-sm);
    font-weight: var(--joyn-font-medium); color: var(--text-2); margin-bottom: 6px;
}
.joyn-input, .joyn-form-input,
.joyn-select, .joyn-form-select,
.joyn-textarea, .joyn-form-textarea {
    width: 100%; padding: 12px 14px;
    font-size: var(--joyn-text-base); font-family: 'Pretendard',sans-serif;
    color: var(--text-1); background: var(--bg-input);
    border: 1.5px solid var(--border-1);
    border-radius: var(--radius);
    transition: all var(--transition); min-height: 44px;
}
.joyn-input:focus, .joyn-form-input:focus,
.joyn-select:focus, .joyn-form-select:focus,
.joyn-textarea:focus, .joyn-form-textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow); background: var(--bg-1);
}
.joyn-textarea, .joyn-form-textarea { min-height: 110px; resize: vertical; }

/* =========================================
   Table
   ========================================= */
.joyn-table { width: 100%; border-collapse: collapse; }
.joyn-table th, .joyn-table td {
    padding: var(--joyn-space-3) var(--joyn-space-4);
    text-align: left; border-bottom: 1px solid var(--border-2);
    font-size: var(--joyn-text-base);
}
.joyn-table th { font-weight: var(--joyn-font-semibold); color: var(--text-1); background: var(--bg-2); }
.joyn-table td { color: var(--text-2); }

/* =========================================
   Empty / Login
   ========================================= */
.joyn-empty-state {
    text-align: center; padding: var(--joyn-space-10); color: var(--text-2);
}
.joyn-empty-state i {
    font-size: clamp(44px,10vw,52px); margin-bottom: var(--joyn-space-4);
    opacity: .25; color: var(--brand); display: block;
}
.login-message {
    text-align: center; padding: var(--joyn-space-10) var(--joyn-space-6);
    background: var(--bg-card); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border-1);
}
.login-message i.ri-lock-line {
    font-size: clamp(44px,10vw,52px); color: var(--brand);
    opacity: .4; margin-bottom: var(--joyn-space-5); display: block;
}
.login-message h3 {
    font-size: var(--joyn-text-xl); font-weight: var(--joyn-font-bold);
    color: var(--text-1); margin-bottom: var(--joyn-space-3);
}
.login-message p {
    font-size: var(--joyn-text-base); color: var(--text-2);
    margin-bottom: var(--joyn-space-6);
}
.login-actions {
    display: flex; flex-direction: column;
    justify-content: center; gap: var(--joyn-space-3);
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 768px) {
    .jmp-mypage-container { padding-inline: 16px; }
    /* 프로필: 컨테이너 패딩만 사용 — 이중 패딩으로 뷰포트 초과·가로 스크롤 방지 */
    .jmp-mypage-content:has(.joyn-profile-wrapper) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* JSeeds 탭 모바일 좌우 10px */
    .jmp-mypage-content:has(.joyn-points-wrapper) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* 쪽지 탭 모바일 좌우 10px */
    .jmp-mypage-content:has(.jmp-messages-tab-wrap) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .stats { flex-direction: column; gap: var(--joyn-space-2); }
    .jmp-mypage-nav .nav-item { font-size: 13px !important; }
    .jmp-mypage-nav .nav-item span { font-size: 13px !important; }
}
@media (max-width: 480px) {
    .jmp-mypage-container { padding-inline: 14px; }
    .jmp-mypage-nav .nav-item { font-size: 12px !important; }
    .jmp-mypage-nav .nav-item i { font-size: 15px !important; }
    .jmp-mypage-nav .nav-item span { font-size: 12px !important; }
}
/* 매우 좁은 기기: 히어로 타이틀·여백 축소 */
@media (max-width: 380px) {
    #jmp-mypage-hero {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .jmp-hero-title {
        font-size: 18px !important;
        letter-spacing: -0.5px !important;
    }
}
@media (min-width: 768px) {
    .login-actions { flex-direction: row; }
}
@media (display-mode: standalone) {
    .jmp-mypage-container {
        padding-top: calc(var(--joyn-space-4) + env(safe-area-inset-top));
        padding-bottom: calc(var(--joyn-space-4) + env(safe-area-inset-bottom));
    }
}
@media (pointer: coarse) {
    .jmp-btn, .jmp-mypage-nav .nav-item { min-height: 48px; }
}
@media (hover:none) and (pointer:coarse) {
    .jmp-btn:active { transform: scale(.96); }
}