/**
 * assets/app.css
 * noFace 서비스 전역 공통 CSS 스타일 및 테마 정의
 */

@charset "UTF-8";

/* 테마 컬러 커스텀 유틸리티 */
.bg-chocolate {
    background-color: #7B3F00;
}
.bg-chocolate-hover:hover {
    background-color: #603100;
}
.text-chocolate {
    color: #7B3F00;
}
.border-chocolate {
    border-color: #7B3F00;
}

/* 스크롤바 커스텀 */
html {
    scrollbar-gutter: stable;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: #f5f5f4;
}
::-webkit-scrollbar-thumb {
    background: #d6d3d1;
    border-radius: 2.5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #7B3F00; /* chocolate point color */
}

/* 관리자 대시보드 전역 테이블 스타일 */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.75rem;
}
.admin-table th {
    background-color: #f5f5f4;
    color: #44403c;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e7e5e4;
    white-space: nowrap;
}
.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f5f5f4;
    color: #292524;
    vertical-align: middle;
}
.admin-table tr:hover td {
    background-color: #fafaf9;
}

/* [SaaS 전역 모달 UI/UX] 백드롭 오버레이 및 팝업 카드 규격 */
.app-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background-color: rgba(28, 25, 23, 0.6); /* stone-900 60% opacity */
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.app-modal-card {
    background-color: #ffffff;
    border-radius: 1rem;
    border: 1px solid #e7e5e4;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    overflow: hidden;
    animation: modal-pop 0.15s ease-out forwards;
}

@keyframes modal-pop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   [myinfocard 전역 전용 테마 CSS]
   GNB 우측 닉네임, 핀, 레벨, 요금제 등급 통합 뷰 카운터 디자인 시스템
   ========================================================================== */

#myinfocard {
    position: relative;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. 기본 Free 플랜 테마 */
#myinfocard[data-tier="free"] {
    background-color: rgba(254, 243, 199, 0.5); /* amber-50/50 */
    border-color: #fde68a; /* amber-200 */
}
#myinfocard[data-tier="free"]:hover {
    background-color: rgba(254, 243, 199, 0.9);
    border-color: #fcd34d;
}

/* 2. Pass 플랜 테마 (Warm Amber) */
#myinfocard[data-tier="pass"] {
    background-color: #fffbeb;
    border-color: #fef08a;
    box-shadow: 0 1px 2px 0 rgba(217, 119, 6, 0.05);
}
#myinfocard[data-tier="pass"]:hover {
    border-color: #fde047;
    box-shadow: 0 2px 4px -1px rgba(217, 119, 6, 0.15);
}

/* 3. Subscription 플랜 테마 (Chocolate Point Theme) */
#myinfocard[data-tier="subscription"] {
    background-color: #fdf8f6;
    border-color: rgba(123, 63, 0, 0.25);
}
#myinfocard[data-tier="subscription"]:hover {
    background-color: #fcf0ea;
    border-color: rgba(123, 63, 0, 0.5);
    box-shadow: 0 2px 8px -2px rgba(123, 63, 0, 0.2);
}

/* 4. Annual 플랜 테마 (Emerald Accent Theme) */
#myinfocard[data-tier="annual"] {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
}
#myinfocard[data-tier="annual"]:hover {
    background-color: #d1fae5;
    border-color: #6ee7b7;
    box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.2);
}

/* 5. Admin 전용 Dark Premium 테마 */
#myinfocard[data-tier="admin"] {
    background: linear-gradient(135deg, #1c1917 0%, #292524 100%);
    border-color: #44403c;
    color: #f5f5f4;
}
#myinfocard[data-tier="admin"] a {
    color: #ffffff !important;
}
#myinfocard[data-tier="admin"] span {
    color: #d6d3d1 !important;
}
#myinfocard[data-tier="admin"] span.text-amber-300 {
    color: #78716c !important;
}
#myinfocard[data-tier="admin"]:hover {
    border-color: #78716c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}