@charset "utf-8";

/**
 * [ZZAN Studio] 회원 모듈 스킨 전역 변수 가이드
 * 이 변수들은 스킨 전체의 색상과 레이아웃을 결정합니다.
 * 레이아웃 설정이 없을 경우 아래의 기본값이 적용됩니다.
 */
:root {
    /* 기본 포인트 컬러 (네온) */
    --zzan-neon: #E6FF00;
    
    /* 다크 모드 기본 변수 */
    --zzan-bg: #131314;
    --zzan-header-bg: #0a0a0a;
    --zzan-text: #ffffff;
    --zzan-gray-text: #888888;
    --zzan-border: rgba(255, 255, 255, 0.1);
    --zzan-input-bg: #1a1a1b;
    --zzan-card-bg: #0a0a0a;
}

/* 라이트 모드 동기화 설정 */
html[data-theme="light"],
html[data-theme="light"] body {
    --zzan-bg: #f5f5f7;
    --zzan-header-bg: #ffffff;
    --zzan-text: #1d1d1f;
    --zzan-gray-text: #86868b;
    --zzan-border: rgba(0, 0, 0, 0.1);
    --zzan-input-bg: #ffffff;
    --zzan-card-bg: #ffffff;
}

/* 바디 클래스 기반 라이트 모드 하위 호환 */
body.light, body.light-mode {
    --zzan-bg: #f5f5f7;
    --zzan-header-bg: #ffffff;
    --zzan-text: #1d1d1f;
    --zzan-gray-text: #86868b;
    --zzan-border: rgba(0, 0, 0, 0.1);
    --zzan-input-bg: #ffffff;
    --zzan-card-bg: #ffffff;
}

/* 기본 스타일 리셋 및 베이스 */
.zzan-skin-wrapper {
    color: var(--zzan-text);
    font-family: 'Pretendard', sans-serif;
    line-height: 1.6;
    font-size: 16px;
}

.zzan-skin-wrapper a { color: inherit; text-decoration: none; transition: 0.2s; }
.zzan-skin-wrapper a:hover { color: var(--zzan-neon); }

/* 타이틀 및 헤딩 스타일 */
.zzan-skin-wrapper h1 { font-size: 26px; font-weight: 700; margin-bottom: 25px; border-bottom: none; padding-bottom: 15px; }
.zzan-skin-wrapper h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; }

/* 폼 요소 공통 스타일 (Input, Select, Textarea) */
.zzan-skin-wrapper input[type="text"],
.zzan-skin-wrapper input[type="password"],
.zzan-skin-wrapper input[type="email"],
.zzan-skin-wrapper input[type="tel"],
.zzan-skin-wrapper input[type="date"],
.zzan-skin-wrapper textarea,
.zzan-skin-wrapper select {
    background: var(--zzan-input-bg);
    border: 1px solid var(--zzan-border);
    color: var(--zzan-text);
    padding: 14px 20px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
    height: auto;
}

.zzan-skin-wrapper input:focus,
.zzan-skin-wrapper textarea:focus,
.zzan-skin-wrapper select:focus {
    border-color: var(--zzan-neon);
}

.zzan-skin-wrapper label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--zzan-text); font-size: 16px; }
.zzan-skin-wrapper .control-group { margin-bottom: 30px; }
.zzan-skin-wrapper .help-inline { display: block; font-size: 14px; color: var(--zzan-gray-text); margin-top: 8px; }

/* 생일 입력 및 날짜 선택기 레이아웃 수정 */
.zzan-skin-wrapper .controls {
    display: block; /* 하위 요소 영향 방지를 위한 기본값 복원 */
}
/* 날짜 컨테이너에 플렉스 레이아웃 적용 */
.zzan-skin-wrapper .controls:has(.inputDate) {
    display: flex;
    gap: 10px;
    align-items: center;
}
.zzan-skin-wrapper .controls > .inputDate { flex: 1; width: auto !important; }
.zzan-skin-wrapper .controls .dateRemover {
    flex-shrink: 0;
    white-space: nowrap;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: var(--zzan-input-bg);
    border: 1px solid var(--zzan-border);
    border-radius: 8px;
    color: var(--zzan-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.zzan-skin-wrapper .controls .dateRemover:hover {
    border-color: #ff4d4d;
    color: #ff4d4d;
}

/**
 * [3] 프로필 이미지 및 파일 업로드 버튼 스타일 (모던 UX)
 * 실제 파일 Input은 숨기고 사용자 정의 UI를 사용합니다.
 */
/* 실제 파일 인풋 숨김 */
.zzan-skin-wrapper input[type="file"] {
    display: none !important;
}

/* 프로필 이미지 미리보기 박스 (JS를 통해 동적 생성됨) */
.profile-preview-box {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: var(--zzan-input-bg);
    border: 2px dashed var(--zzan-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 10px 0;
}

.profile-preview-box:hover {
    border-color: var(--zzan-neon);
    background-color: rgba(255,255,255,0.02);
}

.profile-preview-box .cam-icon {
    font-size: 32px;
    color: var(--zzan-gray-text);
    margin-bottom: 5px;
    transition: 0.3s;
}

.profile-preview-box:hover .cam-icon {
    color: var(--zzan-neon);
}

.profile-preview-box .preview-text {
    font-size: 13px;
    color: var(--zzan-gray-text);
    font-weight: 600;
}

/* 이미지 선택 또는 로드 시 출력되는 실제 이미지 */
.profile-preview-box img.preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* 이미지 변경 안내를 위한 호버 오버레이 */
.profile-preview-box .preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    z-index: 3;
    transition: 0.3s;
}
.profile-preview-box:hover .preview-overlay {
    opacity: 1;
}

/* 프로필 하단 안내 문구 */
.profile-help-text {
    display: block;
    font-size: 12px;
    color: var(--zzan-gray-text);
    margin-top: 10px;
    line-height: 1.4;
}

/* 프로필 이미지 삭제 체크박스 커스텀 */
/* 이미지 다음에 오는 삭제 체크박스를 타겟팅합니다. */
.zzan-skin-wrapper .controls img + input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: auto !important;
    height: auto !important;
    border: none;
    background: transparent;
    position: relative;
    cursor: pointer;
    margin: 10px 0 0 10px;
    vertical-align: top;
}
/* 체크박스를 삭제 버튼 형태로 디자인 */
.zzan-skin-wrapper .controls img + input[type="checkbox"]::after {
    content: '삭제';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #ff4d4d22;
    border: 1px solid #ff4d4d;
    border-radius: 6px;
    color: #ff4d4d;
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s;
}
/* 체크박스 선택(삭제 예정) 시 스타일 변경 */
.zzan-skin-wrapper .controls img + input[type="checkbox"]:checked::after {
    background: #ff4d4d;
    color: #fff;
    content: '삭제됨';
}
.zzan-skin-wrapper .controls img + input[type="checkbox"]:hover::after {
    background: #ff4d4d;
    color: #fff;
}

/* 체크박스 뒤의 불필요한 텍스트 노드 숨김 처리 */
.zzan-skin-wrapper .controls img ~ * {
    font-size: 0; /* 텍스트 노드를 안전하게 숨김 */
}
.zzan-skin-wrapper .controls img ~ input,
.zzan-skin-wrapper .controls img ~ p,
.zzan-skin-wrapper .controls img ~ span {
    font-size: 14px; /* 실제 요소의 폰트 크기 복원 */
}


/**
 * [4] 커스텀 라디오 버튼 스타일
 */
.zzan-skin-wrapper input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--zzan-border);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 8px !important;
    background: var(--zzan-input-bg);
    transition: 0.2s;
}
.zzan-skin-wrapper input[type="radio"]:checked {
    border-color: var(--zzan-neon);
}
.zzan-skin-wrapper input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--zzan-neon);
    border-radius: 50%;
}

/* 버튼 스타일 - 알약(Pill) 형태 및 애니메이션 */
.zzan-skin-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px !important; /* 버튼 크기 강제 적용 */
    background: var(--zzan-input-bg) !important;
    background-image: none !important; /* 기존 그래디언트 제거 */
    color: var(--zzan-text) !important;
    border: 1px solid var(--zzan-border) !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    min-width: 80px;
    text-shadow: none !important;
    box-shadow: none !important;
    height: auto !important;
    margin: 0;
}

.zzan-skin-wrapper .btn:hover {
    border-color: var(--zzan-text) !important;
    color: var(--zzan-text) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}

/* 주요 버튼(Primary/Inverse) 색상 설정 */
.zzan-skin-wrapper .btn.btn-inverse,
.zzan-skin-wrapper .btn.btn-primary {
    background: var(--zzan-neon) !important;
    color: #000 !important;
    border-color: var(--zzan-neon) !important;
}

.zzan-skin-wrapper .btn.btn-inverse:hover,
.zzan-skin-wrapper .btn.btn-primary:hover {
    background: var(--zzan-neon) !important; /* Use point color */
    color: #000 !important;
    filter: brightness(1.1); /* Slightly brighten instead of using fixed color */
    box-shadow: 0 8px 20px rgba(var(--zzan-neon-rgb, 230, 255, 0), 0.4) !important;
}

.zzan-skin-wrapper .btn.btn-danger {
    border-color: #ff4d4d !important;
    color: #ff4d4d !important;
    background: transparent !important;
}
.zzan-skin-wrapper .btn.btn-danger:hover {
    background: #ff4d4d !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(255, 77, 77, 0.3) !important;
}

.zzan-skin-wrapper .btnArea { margin-top: 40px; text-align: right; }
.zzan-skin-wrapper .btnArea.center { text-align: center; }
.zzan-skin-wrapper .btn-group { display: flex; gap: 15px; flex-wrap: wrap; }

/* 테이블 및 리스트 - 레거시 대응 */
.zzan-skin-wrapper .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

/* 새로운 리스트 컨테이너 UI (쪽지함 등과 동기화) */
.zzan-skin-wrapper .zzan-list-container {
    border: 1px solid var(--zzan-border);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.zzan-skin-wrapper .zzan-list-item {
    display: flex;
    align-items: center; /* PC: Title left, actions right */
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--zzan-border);
    transition: 0.2s;
    position: relative;
    gap: 20px;
}

.zzan-skin-wrapper .zzan-list-item:last-child {
    border-bottom: none;
}

.zzan-skin-wrapper .zzan-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.zzan-skin-wrapper .zzan-list-item.active {
    background: rgba(230, 255, 0, 0.05);
}

.zzan-skin-wrapper .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* 긴 텍스트로 인한 플렉스 깨짐 방지 */
}

.zzan-skin-wrapper .item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--zzan-text);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    text-decoration: none !important;
}

.zzan-skin-wrapper .item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--zzan-gray-text);
    flex-wrap: wrap;
}

.zzan-skin-wrapper .item-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.zzan-skin-wrapper .item-meta svg {
    opacity: 0.6;
}

.zzan-skin-wrapper .item-meta .divider {
    color: var(--zzan-border);
    opacity: 0.5;
}

.zzan-skin-wrapper .item-meta a {
    color: var(--zzan-text);
    font-weight: 500;
    text-decoration: none !important;
}

.zzan-skin-wrapper .item-meta a:hover {
    color: var(--zzan-neon);
}

.zzan-skin-wrapper .item-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.zzan-skin-wrapper .empty-list {
    padding: 80px 0;
    text-align: center;
    color: var(--zzan-gray-text);
}

.zzan-skin-wrapper .empty-list svg {
    opacity: 0.3;
    margin-bottom: 15px;
}

.zzan-skin-wrapper .empty-list p {
    font-size: 15px;
}

.zzan-skin-wrapper .comment-count {
    color: var(--zzan-neon);
    font-size: 14px;
    font-weight: 700;
    margin-left: 5px;
}

/* 실제 테이블 요소에 대한 대체 스타일 (자동 로그인 확인 등) */
.zzan-skin-wrapper .table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--zzan-gray-text);
    font-weight: 600;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--zzan-border);
    font-size: 14px;
    text-transform: uppercase;
}

.zzan-skin-wrapper .table td {
    padding: 15px;
    border-bottom: 1px solid var(--zzan-border);
    color: var(--zzan-text);
    font-size: 15px;
}

.zzan-skin-wrapper .table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* 회원 정보 페이지 - 플렉스 레이아웃 적용 */
.zzan-skin-wrapper .dl-horizontal {
    display: flex;
    flex-wrap: wrap;
}

.zzan-skin-wrapper .dl-horizontal dt {
    width: 150px;
    flex-shrink: 0;
    text-align: left;
    font-weight: 600;
    color: var(--zzan-gray-text);
    padding: 20px 0;
    border-bottom: 1px solid var(--zzan-border);
    font-size: 15px;
    clear: left;
}

.zzan-skin-wrapper .dl-horizontal dd {
    width: calc(100% - 150px);
    margin: 0;
    text-align: left;
    color: var(--zzan-text);
    font-weight: 500;
    font-size: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--zzan-border);
    display: flex;
    align-items: center;
}

/* Profile Image in List */
.zzan-skin-wrapper .dl-horizontal dd img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--zzan-border);
}

/* 벨리데이션 및 알림 메시지 스타일 */
.zzan-skin-wrapper .message {
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 12px;
    background: rgba(230, 255, 0, 0.1);
    border: 1px solid var(--zzan-neon);
    color: var(--zzan-neon);
    text-align: center;
    font-size: 15px;
}
.zzan-skin-wrapper .message.error {
    background: rgba(255, 0, 0, 0.1);
    border-color: #ff4d4d;
    color: #ff4d4d;
}

/* 페이지네이션 스타일 */
.zzan-skin-wrapper .pagination { margin: 40px 0; text-align: center; }
.zzan-skin-wrapper .pagination ul { list-style: none; padding: 0; display: inline-block; }
.zzan-skin-wrapper .pagination li { display: inline; margin: 0 5px; }
.zzan-skin-wrapper .pagination a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    color: var(--zzan-gray-text);
    text-align: center;
    transition: 0.2s;
    font-size: 14px;
}
.zzan-skin-wrapper .pagination a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--zzan-text);
}
.zzan-skin-wrapper .pagination li.active a {
    background: var(--zzan-neon);
    color: #000;
    font-weight: 700;
}

/* 특정 페이지 전용 수정 사항 */
/* 계정 찾기 박스 */
.zzan-skin-wrapper .find-account-box {
    max-width: 450px;
    margin: 80px auto;
    padding: 50px;
    background: var(--zzan-card-bg);
    border: 1px solid var(--zzan-border);
    border-radius: 20px;
}

/* 데이트피커(날짜 선택기) UI 수정 */
#ui-datepicker-div {
    background: var(--zzan-header-bg) !important;
    border: 1px solid var(--zzan-border) !important;
    padding: 10px !important;
    color: var(--zzan-text) !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 12px;
}
.ui-datepicker-header {
    background: var(--zzan-header-bg) !important;
    border-bottom: 1px solid var(--zzan-border) !important;
    color: var(--zzan-text) !important;
}
.ui-datepicker-calendar th { color: var(--zzan-gray-text) !important; }
.ui-datepicker-calendar td a {
    background: var(--zzan-bg) !important;
    border: 1px solid var(--zzan-border) !important;
    color: var(--zzan-text) !important;
    border-radius: 4px;
}
.ui-datepicker-calendar td a:hover {
    background: var(--zzan-neon) !important;
    color: #000 !important;
}

/**
 * [5] 프로필 헤더 및 카드 스타일
 * 좌측 정렬 기반의 가로형 레이아웃입니다.
 */

/* 프로필 헤더 컨테이너 */
.zzan-skin-wrapper .zzan-profile-wrapper {
    max-width: 900px;
    margin: 0 auto 40px;
    background: transparent;
    border: none;
}

.zzan-skin-wrapper .profile-header {
    padding: 40px 0;
    display: flex;
    align-items: flex-start; /* Aligned to TOP per request */
    gap: 40px;
}

/* 네온 링이 포함된 프로필 이미지 (좌측) */
.zzan-skin-wrapper .profile-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--zzan-bg);
    padding: 4px;
    border: 2.5px solid var(--zzan-neon);
    box-shadow: 0 0 25px rgba(230, 255, 0, 0.3);
    flex-shrink: 0;
}
.zzan-skin-wrapper .profile-img img { 
    width: 100%; height: 100%; 
    object-fit: cover; 
    border-radius: 50%; 
}
.zzan-skin-wrapper .default-profile-img { width: 100%; height: 100%; background: #333; border-radius: 50%; }

/* 사용자 상세 정보 (우측) */
.zzan-skin-wrapper .user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Restored to 12px for overall balance */
}
.zzan-skin-wrapper .user-top-info {
    display: flex;
    align-items: flex-start; /* Changed to flex-start for top alignment */
    gap: 15px;
}
.zzan-skin-wrapper .nickname {
    font-size: 36px;
    font-weight: 800;
    color: var(--zzan-text);
    margin: 0;
    letter-spacing: -1px;
    line-height: 1;
    margin-top: 10px;
}
.zzan-skin-wrapper .quick-saved-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    color: var(--zzan-gray-text) !important;
    font-size: 18px !important;
    margin-left: auto !important;
    margin-top: 7px !important; /* Forced 7px top margin */
    transition: 0.2s !important;
    flex-shrink: 0 !important;
}
.zzan-skin-wrapper .quick-saved-btn:hover {
    color: var(--zzan-neon);
    background: rgba(230, 255, 0, 0.1);
    transform: translateY(-2px);
}
.zzan-skin-wrapper .reg-date {
    font-size: 14px;
    color: var(--zzan-gray-text);
    opacity: 0.8;
    margin-top: 12px; /* Fine-tuned from 10px to 12px for perfect top alignment */
}

.zzan-skin-wrapper .user-signature {
    font-size: 16px;
    color: var(--zzan-text);
    line-height: 1.5;
    opacity: 0.9;
    margin-top: -15px; /* Pull signature up further to -15px */
    margin-bottom: 5px;
}

/* 활동 배지 (알약 형태 UI) */
.zzan-skin-wrapper .user-activity-badges {
    display: flex;
    gap: 10px;
    margin-top: 15px; /* Fine-tuned to 15px */
    flex-wrap: wrap;
}
.zzan-skin-wrapper .badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--zzan-border);
    border-radius: 999px;
    text-decoration: none !important;
    transition: 0.2s;
}
.zzan-skin-wrapper .badge-item .label { font-size: 13px; color: var(--zzan-gray-text); font-weight: 500; }
.zzan-skin-wrapper .badge-item .count { font-size: 15px; color: var(--zzan-text); font-weight: 800; }
.zzan-skin-wrapper .badge-item:hover {
    border-color: var(--zzan-neon);
    background: rgba(230, 255, 0, 0.05);
}
.zzan-skin-wrapper .badge-item:hover .count { color: var(--zzan-neon); }
.zzan-skin-wrapper .badge-item.active {
    background: var(--zzan-neon);
    border-color: var(--zzan-neon);
    box-shadow: 0 5px 15px rgba(230, 255, 0, 0.2);
}
.zzan-skin-wrapper .badge-item.active .label { color: rgba(0,0,0,0.6); }
.zzan-skin-wrapper .badge-item.active .count { color: #000; }
.zzan-skin-wrapper .no-sig {
    color: var(--zzan-gray-text);
    font-size: 15px;
}

/* 프로필 네비게이션 - 상단 하이라이트 스타일 */
.zzan-skin-wrapper .profile-nav {
    border-top: 1px solid var(--zzan-border);
    background: transparent;
    max-width: 900px;
    margin: 0 auto 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}
.zzan-skin-wrapper .profile-nav:active {
    cursor: grabbing;
}
.zzan-skin-wrapper .profile-nav::-webkit-scrollbar { display: none; }

.zzan-skin-wrapper .nav-list {
    display: flex;
    justify-content: flex-start;
    align-items: center; /* 수직 중앙 정렬 강제 */
    list-style: none;
    margin: 0;
    padding: 0 20px;
    gap: 30px;
    flex-wrap: nowrap;
    width: max-content;
}

.zzan-skin-wrapper .nav-item {
    margin: 0;
    padding: 0;
}

/* 전용 네비게이션 링크 스타일 */
.zzan-skin-wrapper .zzan-nav-link {
    display: block !important;
    padding: 18px 0 !important;
    color: var(--zzan-gray-text) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    opacity: 0.6 !important;
    text-decoration: none !important;
}

.zzan-skin-wrapper .nav-item.active .zzan-nav-link {
    color: var(--zzan-neon) !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

.zzan-skin-wrapper .nav-item.active .zzan-nav-link:after {
    content: '' !important;
    position: absolute !important;
    top: -1.5px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: var(--zzan-neon) !important;
    box-shadow: 0 0 12px rgba(230, 255, 0, 0.6) !important;
}

.zzan-skin-wrapper .zzan-nav-link:hover {
    color: var(--zzan-text) !important;
    opacity: 1 !important;
}

/* 카드 컨테이너 (클린 룩 스타일) */
.zzan-skin-wrapper .zzan-card-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--zzan-card-bg);
    border: 1px solid var(--zzan-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0,0,0,0.1);
}
.zzan-skin-wrapper .zzan-card-header {
    padding: 30px 50px;
    border-bottom: 1px solid var(--zzan-border);
    background: rgba(255, 255, 255, 0.01);
}
.zzan-skin-wrapper .zzan-card-header h1,
.zzan-skin-wrapper .zzan-card-header h2 { margin: 0; font-size: 20px; color: var(--zzan-text); font-weight: 800; }
.zzan-skin-wrapper .zzan-card-body { padding: 50px; }
.zzan-skin-wrapper .zzan-card-footer {
    padding: 30px 50px;
    border-top: 1px solid var(--zzan-border);
    background: rgba(255, 255, 255, 0.01);
}

@media screen and (max-width: 768px) {
    .zzan-skin-wrapper .profile-header {
        position: relative;
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 20px;
    }
    .zzan-skin-wrapper .user-details {
        align-items: center;
    }
    .zzan-skin-wrapper .user-top-info {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
    }
    .zzan-skin-wrapper .reg-date {
        margin-top: -5px;
    }
    .zzan-skin-wrapper .quick-saved-btn,
    .zzan-skin-wrapper .quick-action-btns {
        position: absolute;
        top: 20px;
        right: 20px;
        margin: 0 !important;
    }
    .zzan-skin-wrapper .user-signature {
        margin-top: 5px;
        text-align: center;
    }
    .zzan-skin-wrapper .user-activity-badges {
        justify-content: center;
        margin-top: 15px;
    }
}

/**
 * [6] 스크랩 목록 페이지 전용 스타일
 */
.zzan-skin-wrapper .scrap-management-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

.zzan-skin-wrapper .scrap-folder-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 280px;
}

.zzan-skin-wrapper .scrap-folder-controls select {
    width: auto;
    min-width: 180px;
}

.zzan-skin-wrapper .scrap-folder-controls .btn-group {
    display: flex;
    gap: 8px;
}

.zzan-skin-wrapper .scrap-folder-add {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 테이블 내 버튼 크기 보정 */
.zzan-skin-wrapper .btn.btn-sm {
    padding: 6px 16px !important;
    font-size: 13px !important;
    min-width: 60px;
}

.zzan-skin-wrapper .table select {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    width: auto;
}

/* 검색 폼 스타일링 */
.zzan-skin-wrapper .scrap-search-form {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.zzan-skin-wrapper .scrap-search-form .search-inner {
    display: flex;
    gap: 10px;
    max-width: 600px;
    width: 100%;
}

.zzan-skin-wrapper .scrap-search-form select {
    width: 130px;
    flex-shrink: 0;
}

.zzan-skin-wrapper .scrap-search-form input[type="text"] {
    flex: 1;
}

.zzan-skin-wrapper .scrap-search-form .btn {
    flex-shrink: 0;
}

@media screen and (max-width: 600px) {
    .zzan-skin-wrapper .scrap-management-area {
        flex-direction: column;
        align-items: stretch;
    }
    .zzan-skin-wrapper .scrap-folder-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .zzan-skin-wrapper .scrap-folder-controls select {
        width: 100%;
    }
    .zzan-skin-wrapper .scrap-folder-add .btn {
        width: 100%;
    }
    .zzan-skin-wrapper .scrap-search-form .search-inner {
        flex-direction: column;
    }
    .zzan-skin-wrapper .scrap-search-form select,
    .zzan-skin-wrapper .scrap-search-form .btn {
        width: 100%;
    }
}

/**
 * [7] 모바일 최적화 스타일 (리스트 및 정보창)
 */
@media screen and (max-width: 768px) {
    .zzan-skin-wrapper .zzan-card-body {
        padding: 30px 20px;
    }

    /* 모바일 리스트 아이템: 액션 버튼이 하단으로 배치됨 */
    .zzan-skin-wrapper .zzan-list-item {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 15px;
    }
    
    .zzan-skin-wrapper .item-title {
        white-space: normal; /* Allow title to wrap on mobile */
    }

    .zzan-skin-wrapper .item-actions {
        margin-left: 0;
        justify-content: flex-end; /* Align actions to right on mobile */
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 15px;
    }

    /* 레거시 테이블 모바일 대응 (자동 로그인 등) */
    .zzan-skin-wrapper .table thead { display: none; }
    .zzan-skin-wrapper .table, 
    .zzan-skin-wrapper .table tbody, 
    .zzan-skin-wrapper .table tr, 
    .zzan-skin-wrapper .table td { display: block; width: 100%; }
    .zzan-skin-wrapper .table tr {
        margin-bottom: 20px;
        border: 1px solid var(--zzan-border);
        border-radius: 15px;
        padding: 15px;
        background: rgba(255,255,255,0.02);
    }
    .zzan-skin-wrapper .table td {
        border: none;
        padding: 8px 0;
        text-align: left;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .zzan-skin-wrapper .table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--zzan-gray-text);
        font-size: 12px;
        text-transform: uppercase;
    }
    .zzan-skin-wrapper .table td.title,
    .zzan-skin-wrapper .table td:first-child {
        font-weight: 700;
        color: var(--zzan-text);
    }
    .zzan-skin-wrapper .table td button,
    .zzan-skin-wrapper .table td select {
        width: auto !important;
    }

    /* Member Info DL Mobile */
    .zzan-skin-wrapper .dl-horizontal dt {
        width: 100%;
        padding: 15px 0 5px;
        border-bottom: none;
        font-size: 13px;
    }
    .zzan-skin-wrapper .dl-horizontal dd {
        width: 100%;
        padding: 0 0 15px;
        font-size: 15px;
    }
}

/**
 * [8] ZZAN 커스텀 모달 시스템 스타일
 */
.zzan_modal_layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.zzan_modal_layer.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.zzan_modal_layer .modal_content {
    background: var(--zzan-card-bg);
    border: 1px solid var(--zzan-border);
    border-radius: 20px;
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zzan_modal_layer .modal_header {
    padding: 30px 40px 10px;
}

.zzan_modal_layer .modal_header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--zzan-text);
}

.zzan_modal_layer .modal_body {
    padding: 20px 40px 30px;
}

.zzan_modal_layer .modal_body p {
    color: var(--zzan-gray-text);
    line-height: 1.6;
}

.zzan_modal_layer .modal_body small {
    display: block;
    margin-top: 10px;
    opacity: 0.7;
}

.zzan_modal_layer .modal_footer {
    padding: 0 40px 40px;
    display: flex;
    gap: 15px;
}

.zzan_modal_layer .modal_footer .btn {
    flex: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 페이지네이션 화살표 아이콘 수직 정렬 수정 */
.zzan-skin-wrapper .pagination a svg {
    vertical-align: middle;
    margin-top: -2px;
}
    text-decoration: none !important;
}

.zzan-skin-wrapper .item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--zzan-gray-text);
    flex-wrap: wrap;
}

.zzan-skin-wrapper .item-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.zzan-skin-wrapper .item-meta svg {
    opacity: 0.6;
}

.zzan-skin-wrapper .item-meta .divider {
    color: var(--zzan-border);
    opacity: 0.5;
}

.zzan-skin-wrapper .item-meta a {
    color: var(--zzan-text);
    font-weight: 500;
    text-decoration: none !important;
}

.zzan-skin-wrapper .item-meta a:hover {
    color: var(--zzan-neon);
}

.zzan-skin-wrapper .item-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.zzan-skin-wrapper .empty-list {
    padding: 80px 0;
    text-align: center;
    color: var(--zzan-gray-text);
}

.zzan-skin-wrapper .empty-list svg {
    opacity: 0.3;
    margin-bottom: 15px;
}

.zzan-skin-wrapper .empty-list p {
    font-size: 15px;
}

.zzan-skin-wrapper .comment-count {
    color: var(--zzan-neon);
    font-size: 14px;
    font-weight: 700;
    margin-left: 5px;
}

/* Fallback for actual tables (like active_logins if it remains) */
.zzan-skin-wrapper .table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--zzan-gray-text);
    font-weight: 600;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--zzan-border);
    font-size: 14px;
    text-transform: uppercase;
}

.zzan-skin-wrapper .table td {
    padding: 15px;
    border-bottom: 1px solid var(--zzan-border);
    color: var(--zzan-text);
    font-size: 15px;
}

.zzan-skin-wrapper .table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* [Member Info - Revised Layout (Flex Wrap)] */
.zzan-skin-wrapper .dl-horizontal {
    display: flex;
    flex-wrap: wrap;
}

.zzan-skin-wrapper .dl-horizontal dt {
    width: 150px;
    flex-shrink: 0;
    text-align: left;
    font-weight: 600;
    color: var(--zzan-gray-text);
    padding: 20px 0;
    border-bottom: 1px solid var(--zzan-border);
    font-size: 15px;
    clear: left;
}

.zzan-skin-wrapper .dl-horizontal dd {
    width: calc(100% - 150px);
    margin: 0;
    text-align: left;
    color: var(--zzan-text);
    font-weight: 500;
    font-size: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--zzan-border);
    display: flex;
    align-items: center;
}

/* Profile Image in List */
.zzan-skin-wrapper .dl-horizontal dd img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--zzan-border);
}

/* [Validation Messages] */
.zzan-skin-wrapper .message {
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 12px;
    background: rgba(230, 255, 0, 0.1);
    border: 1px solid var(--zzan-neon);
    color: var(--zzan-neon);
    text-align: center;
    font-size: 15px;
}
.zzan-skin-wrapper .message.error {
    background: rgba(255, 0, 0, 0.1);
    border-color: #ff4d4d;
    color: #ff4d4d;
}

/* [Pagination] */
.zzan-skin-wrapper .pagination { margin: 40px 0; text-align: center; }
.zzan-skin-wrapper .pagination ul { list-style: none; padding: 0; display: inline-block; }
.zzan-skin-wrapper .pagination li { display: inline; margin: 0 5px; }
.zzan-skin-wrapper .pagination a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    color: var(--zzan-gray-text);
    text-align: center;
    transition: 0.2s;
    font-size: 14px;
}
.zzan-skin-wrapper .pagination a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--zzan-text);
}
.zzan-skin-wrapper .pagination li.active a {
    background: var(--zzan-neon);
    color: #000;
    font-weight: 700;
}

/* [Specific Page Fixes] */
/* Find Account */
.zzan-skin-wrapper .find-account-box {
    max-width: 450px;
    margin: 80px auto;
    padding: 50px;
    background: var(--zzan-card-bg);
    border: 1px solid var(--zzan-border);
    border-radius: 20px;
}

/* Datepicker Fix */
#ui-datepicker-div {
    background: var(--zzan-header-bg) !important;
    border: 1px solid var(--zzan-border) !important;
    padding: 10px !important;
    color: var(--zzan-text) !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 12px;
}
.ui-datepicker-header {
    background: var(--zzan-header-bg) !important;
    border-bottom: 1px solid var(--zzan-border) !important;
    color: var(--zzan-text) !important;
}
.ui-datepicker-calendar th { color: var(--zzan-gray-text) !important; }
.ui-datepicker-calendar td a {
    background: var(--zzan-bg) !important;
    border: 1px solid var(--zzan-border) !important;
    color: var(--zzan-text) !important;
    border-radius: 4px;
}
.ui-datepicker-calendar td a:hover {
    background: var(--zzan-neon) !important;
    color: #000 !important;
}

/* =========================================
   [NEW] Left-Aligned Profile Header & Card Styles
   ========================================= */

/* Profile Header (Horizontal Layout) */
.zzan-skin-wrapper .zzan-profile-wrapper {
    max-width: 900px;
    margin: 0 auto 40px;
    background: transparent;
    border: none;
}

.zzan-skin-wrapper .profile-header {
    padding: 40px 0;
    display: flex;
    align-items: flex-start; /* Aligned to TOP per request */
    gap: 40px;
}

/* Profile Image with Neon Ring (Left) */
.zzan-skin-wrapper .profile-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--zzan-bg);
    padding: 4px;
    border: 2.5px solid var(--zzan-neon);
    box-shadow: 0 0 25px rgba(230, 255, 0, 0.3);
    flex-shrink: 0;
}
.zzan-skin-wrapper .profile-img img { 
    width: 100%; height: 100%; 
    object-fit: cover; 
    border-radius: 50%; 
}
.zzan-skin-wrapper .default-profile-img { width: 100%; height: 100%; background: #333; border-radius: 50%; }

/* Details (Right) */
.zzan-skin-wrapper .user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Restored to 12px for overall balance */
}
.zzan-skin-wrapper .user-top-info {
    display: flex;
    align-items: flex-start; /* Changed to flex-start for top alignment */
    gap: 15px;
}
.zzan-skin-wrapper .nickname {
    font-size: 36px;
    font-weight: 800;
    color: var(--zzan-text);
    margin: 0;
    letter-spacing: -1px;
    line-height: 1;
    margin-top: 10px;
}
.zzan-skin-wrapper .quick-saved-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    color: var(--zzan-gray-text) !important;
    font-size: 18px !important;
    margin-left: auto !important;
    margin-top: 7px !important; /* Forced 7px top margin */
    transition: 0.2s !important;
    flex-shrink: 0 !important;
}
.zzan-skin-wrapper .quick-saved-btn:hover {
    color: var(--zzan-neon);
    background: rgba(230, 255, 0, 0.1);
    transform: translateY(-2px);
}
.zzan-skin-wrapper .reg-date {
    font-size: 14px;
    color: var(--zzan-gray-text);
    opacity: 0.8;
    margin-top: 12px; /* Fine-tuned from 10px to 12px for perfect top alignment */
}

.zzan-skin-wrapper .user-signature {
    font-size: 16px;
    color: var(--zzan-text);
    line-height: 1.5;
    opacity: 0.9;
    margin-top: -15px; /* Pull signature up further to -15px */
    margin-bottom: 5px;
}

/* Activity Badges (Pill UI) */
.zzan-skin-wrapper .user-activity-badges {
    display: flex;
    gap: 10px;
    margin-top: 15px; /* Fine-tuned to 15px */
    flex-wrap: wrap;
}
.zzan-skin-wrapper .badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--zzan-border);
    border-radius: 999px;
    text-decoration: none !important;
    transition: 0.2s;
}
.zzan-skin-wrapper .badge-item .label { font-size: 13px; color: var(--zzan-gray-text); font-weight: 500; }
.zzan-skin-wrapper .badge-item .count { font-size: 15px; color: var(--zzan-text); font-weight: 800; }
.zzan-skin-wrapper .badge-item:hover {
    border-color: var(--zzan-neon);
    background: rgba(230, 255, 0, 0.05);
}
.zzan-skin-wrapper .badge-item:hover .count { color: var(--zzan-neon); }
.zzan-skin-wrapper .badge-item.active {
    background: var(--zzan-neon);
    border-color: var(--zzan-neon);
    box-shadow: 0 5px 15px rgba(230, 255, 0, 0.2);
}
.zzan-skin-wrapper .badge-item.active .label { color: rgba(0,0,0,0.6); }
.zzan-skin-wrapper .badge-item.active .count { color: #000; }
.zzan-skin-wrapper .no-sig {
    color: var(--zzan-gray-text);
    font-size: 15px;
}

/* Profile Navigation - Top Highlight Style */
.zzan-skin-wrapper .profile-nav {
    border-top: 1px solid var(--zzan-border);
    background: transparent;
    max-width: 900px;
    margin: 0 auto 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}
.zzan-skin-wrapper .profile-nav:active {
    cursor: grabbing;
}
.zzan-skin-wrapper .profile-nav::-webkit-scrollbar { display: none; }

.zzan-skin-wrapper .nav-list {
    display: flex;
    justify-content: flex-start;
    align-items: center; /* 수직 중앙 정렬 강제 */
    list-style: none;
    margin: 0;
    padding: 0 20px;
    gap: 30px;
    flex-wrap: nowrap;
    width: max-content;
}

.zzan-skin-wrapper .nav-item {
    margin: 0;
    padding: 0;
}

/* Dedicated Navigation Styles with Exclusive Class */
.zzan-skin-wrapper .zzan-nav-link {
    display: block !important;
    padding: 18px 0 !important;
    color: var(--zzan-gray-text) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    opacity: 0.6 !important;
    text-decoration: none !important;
}

.zzan-skin-wrapper .nav-item.active .zzan-nav-link {
    color: var(--zzan-neon) !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

.zzan-skin-wrapper .nav-item.active .zzan-nav-link:after {
    content: '' !important;
    position: absolute !important;
    top: -1.5px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: var(--zzan-neon) !important;
    box-shadow: 0 0 12px rgba(230, 255, 0, 0.6) !important;
}

.zzan-skin-wrapper .zzan-nav-link:hover {
    color: var(--zzan-text) !important;
    opacity: 1 !important;
}

/* Card Container (Clean Look) */
.zzan-skin-wrapper .zzan-card-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--zzan-card-bg);
    border: 1px solid var(--zzan-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0,0,0,0.1);
}
.zzan-skin-wrapper .zzan-card-header {
    padding: 30px 50px;
    border-bottom: 1px solid var(--zzan-border);
    background: rgba(255, 255, 255, 0.01);
}
.zzan-skin-wrapper .zzan-card-header h1,
.zzan-skin-wrapper .zzan-card-header h2 { margin: 0; font-size: 20px; color: var(--zzan-text); font-weight: 800; }
.zzan-skin-wrapper .zzan-card-body { padding: 50px; }
.zzan-skin-wrapper .zzan-card-footer {
    padding: 30px 50px;
    border-top: 1px solid var(--zzan-border);
    background: rgba(255, 255, 255, 0.01);
}

@media screen and (max-width: 768px) {
    .zzan-skin-wrapper .profile-header {
        position: relative;
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 20px;
    }
    .zzan-skin-wrapper .user-details {
        align-items: center;
    }
    .zzan-skin-wrapper .user-top-info {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
    }
    .zzan-skin-wrapper .reg-date {
        margin-top: -5px;
    }
    .zzan-skin-wrapper .quick-saved-btn,
    .zzan-skin-wrapper .quick-action-btns {
        position: absolute;
        top: 20px;
        right: 20px;
        margin: 0 !important;
    }
    .zzan-skin-wrapper .user-signature {
        margin-top: 5px;
        text-align: center;
    }
    .zzan-skin-wrapper .user-activity-badges {
        justify-content: center;
        margin-top: 15px;
    }
}

/* =========================================
   [NEW] Scrapped List Page Styles
   ========================================= */
.zzan-skin-wrapper .scrap-management-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

.zzan-skin-wrapper .scrap-folder-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 280px;
}

.zzan-skin-wrapper .scrap-folder-controls select {
    width: auto;
    min-width: 180px;
}

.zzan-skin-wrapper .scrap-folder-controls .btn-group {
    display: flex;
    gap: 8px;
}

.zzan-skin-wrapper .scrap-folder-add {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Table Button Size Fix */
.zzan-skin-wrapper .btn.btn-sm {
    padding: 6px 16px !important;
    font-size: 13px !important;
    min-width: 60px;
}

.zzan-skin-wrapper .table select {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    width: auto;
}

/* Search Form Styling */
.zzan-skin-wrapper .scrap-search-form {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.zzan-skin-wrapper .scrap-search-form .search-inner {
    display: flex;
    gap: 10px;
    max-width: 600px;
    width: 100%;
}

.zzan-skin-wrapper .scrap-search-form select {
    width: 130px;
    flex-shrink: 0;
}

.zzan-skin-wrapper .scrap-search-form input[type="text"] {
    flex: 1;
}

.zzan-skin-wrapper .scrap-search-form .btn {
    flex-shrink: 0;
}

@media screen and (max-width: 600px) {
    .zzan-skin-wrapper .scrap-management-area {
        flex-direction: column;
        align-items: stretch;
    }
    .zzan-skin-wrapper .scrap-folder-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .zzan-skin-wrapper .scrap-folder-controls select {
        width: 100%;
    }
    .zzan-skin-wrapper .scrap-folder-add .btn {
        width: 100%;
    }
    .zzan-skin-wrapper .scrap-search-form .search-inner {
        flex-direction: column;
    }
    .zzan-skin-wrapper .scrap-search-form select,
    .zzan-skin-wrapper .scrap-search-form .btn {
        width: 100%;
    }
}

/* =========================================
   [NEW] Mobile Optimization (Lists & Info)
   ========================================= */
@media screen and (max-width: 768px) {
    .zzan-skin-wrapper .zzan-card-body {
        padding: 30px 20px;
    }

    /* List Container Mobile: Action buttons drop below content */
    .zzan-skin-wrapper .zzan-list-item {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 15px;
    }
    
    .zzan-skin-wrapper .item-title {
        white-space: normal; /* Allow title to wrap on mobile */
    }

    .zzan-skin-wrapper .item-actions {
        margin-left: 0;
        justify-content: flex-end; /* Align actions to right on mobile */
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 15px;
    }

    /* Legacy Table Mobile Fix (Only for active_logins etc) */
    .zzan-skin-wrapper .table thead { display: none; }
    .zzan-skin-wrapper .table, 
    .zzan-skin-wrapper .table tbody, 
    .zzan-skin-wrapper .table tr, 
    .zzan-skin-wrapper .table td { display: block; width: 100%; }
    .zzan-skin-wrapper .table tr {
        margin-bottom: 20px;
        border: 1px solid var(--zzan-border);
        border-radius: 15px;
        padding: 15px;
        background: rgba(255,255,255,0.02);
    }
    .zzan-skin-wrapper .table td {
        border: none;
        padding: 8px 0;
        text-align: left;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .zzan-skin-wrapper .table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--zzan-gray-text);
        font-size: 12px;
        text-transform: uppercase;
    }
    .zzan-skin-wrapper .table td.title,
    .zzan-skin-wrapper .table td:first-child {
        font-weight: 700;
        color: var(--zzan-text);
    }
    .zzan-skin-wrapper .table td button,
    .zzan-skin-wrapper .table td select {
        width: auto !important;
    }

    /* Member Info DL Mobile */
    .zzan-skin-wrapper .dl-horizontal dt {
        width: 100%;
        padding: 15px 0 5px;
        border-bottom: none;
        font-size: 13px;
    }
    .zzan-skin-wrapper .dl-horizontal dd {
        width: 100%;
        padding: 0 0 15px;
        font-size: 15px;
    }
}

/* =========================================
   [NEW] ZZAN Modal System Styles
   ========================================= */
.zzan_modal_layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.zzan_modal_layer.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.zzan_modal_layer .modal_content {
    background: var(--zzan-card-bg);
    border: 1px solid var(--zzan-border);
    border-radius: 20px;
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zzan_modal_layer .modal_header {
    padding: 30px 40px 10px;
}

.zzan_modal_layer .modal_header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--zzan-text);
}

.zzan_modal_layer .modal_body {
    padding: 20px 40px 30px;
}

.zzan_modal_layer .modal_body p {
    color: var(--zzan-gray-text);
    line-height: 1.6;
}

.zzan_modal_layer .modal_body small {
    display: block;
    margin-top: 10px;
    opacity: 0.7;
}

.zzan_modal_layer .modal_footer {
    padding: 0 40px 40px;
    display: flex;
    gap: 15px;
}

.zzan_modal_layer .modal_footer .btn {
    flex: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Pagination Arrow Centering Fix */
.zzan-skin-wrapper .pagination a svg {
    vertical-align: middle;
    margin-top: -2px;
}