/* ==========================================
   스마트 근무 기록기 - 메인 스타일시트
   디자인 컨셉: 모던 딥 다크 테마 & 글래스모피즘 (유리 효과)
   ========================================== */

/* 1. 디자인 시스템 변수 설정 (테마 컬러 및 폰트) */
:root {
    --bg-base: #0f172a;
    /* 전체 배경색 (깊은 다크 네이비) */
    --bg-card: rgba(30, 41, 59, 0.7);
    /* 글래스 카드 배경 (반투명) */
    --border-color: rgba(255, 255, 255, 0.08);
    /* 카드 테두리 (미세한 투명 흰색) */
    --border-focus: rgba(255, 255, 255, 0.25);
    /* 호버 시 카드 테두리 */

    --text-main: #f8fafc;
    /* 주요 텍스트 색상 (밝은 미색) */
    --text-muted: #94a3b8;
    /* 부연 설명 텍스트 색상 (회색) */

    /* 상태별 테마 색상 (네온 & 그라데이션용 HSL 변수) */
    --color-work: #10b981;
    /* 근무: 에메랄드 그린 */
    --color-work-glow: rgba(16, 185, 129, 0.25);

    --color-leave: #f59e0b;
    /* 조퇴: 앰버 오렌지 */
    --color-leave-glow: rgba(245, 158, 11, 0.25);

    --color-sick: #f43f5e;
    /* 병가: 로즈 레드 */
    --color-sick-glow: rgba(244, 63, 94, 0.25);

    --color-deduct: #6366f1;
    /* 차감: 인디고 블루 */
    --color-deduct-glow: rgba(99, 102, 241, 0.25);

    --color-empty: rgba(255, 255, 255, 0.03);
    /* 미정 지정 칸 배경 */

    /* 폰트 지정 */
    --font-family: 'Outfit', 'Noto Sans KR', sans-serif;

    /* 그림자 효과 */
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --glass-blur: blur(16px);
    /* 배경 블러 강도 */
}

/* 2. 전역 스타일 및 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: var(--font-family);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
    padding: 2rem 1rem;
}

/* 3. 백그라운드 네온 빛 원형 (오라 효과) */
.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.45;
}

.bg-glow-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.bg-glow-2 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
}

/* 4. 메인 컨테이너 레이아웃 */
.app-container {
    width: 100%;
    max-width: 1100px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 5. 헤더 스타일 */
.app-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.app-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(to right, #f8fafc, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.app-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 300;
}

/* 6. 메인 그리드 영역 (달력과 대시보드의 병렬 배치) */
.app-content {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 900px) {

    /* 화면이 좁아지면 달력과 대시보드를 세로로 배치 */
    .app-content {
        grid-template-columns: 1fr;
    }
}

/* 7. 글래스모피즘 공통 카드 스타일 */
.calendar-section,
.dashboard-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* 8. 달력 조작 헤더 */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.calendar-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--border-focus);
    transform: scale(1.05);
}

.nav-btn:active {
    transform: scale(0.95);
}

/* 9. 요일 표기 그리드 */
.weekdays-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.5rem;
}

.weekday {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

.weekday.sun {
    color: #f43f5e;
    /* 일요일은 부드러운 빨강 */
}

.weekday.sat {
    color: #3b82f6;
    /* 토요일은 부드러운 파랑 */
}

/* 10. 달력 날짜 카드 그리드 */
.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

/* 11. 각 날짜의 셀(Cell) 스타일 */
.day-cell {
    aspect-ratio: 1;
    /* 가로세로 1:1 비율 유지 */
    background: var(--color-empty);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.4rem;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

/* 마우스 호버 효과 */
.day-cell:hover:not(.other-month) {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border-focus);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 오늘 날짜 하이라이트 */
.day-cell.today:not(.other-month) {
    border: 1.5px solid #6366f1;
}

.day-cell.today::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    background-color: #6366f1;
    border-radius: 50%;
}

/* 날짜 숫자 */
.day-num {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
}

/* 주말 색상 강제 지정 (일요일/토요일) */
.day-cell.sunday .day-num {
    color: #f43f5e;
}

.day-cell.saturday .day-num {
    color: #3b82f6;
}

/* 다른 달의 날짜 스타일 (흐리게 처리) */
.day-cell.other-month {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
    /* 클릭 불가 */
}

/* 12. 날짜 셀의 근무 상태 배지(Badge) */
.status-badge {
    align-self: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 6px;
    display: none;
    /* 상태가 지정되지 않았을 때는 표시 안함 */
    text-align: center;
    white-space: nowrap;
}

/* 근무 상태일 때의 셀 및 배지 스타일 */
.day-cell.status-work {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.05);
}

.day-cell.status-work .day-num {
    color: #a7f3d0;
}

.day-cell.status-work .status-badge {
    display: inline-block;
    background-color: var(--color-work);
    color: #064e3b;
}

/* 조퇴 상태일 때의 셀 및 배지 스타일 */
.day-cell.status-leave {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.05);
}

.day-cell.status-leave .day-num {
    color: #fde68a;
}

.day-cell.status-leave .status-badge {
    display: inline-block;
    background-color: var(--color-leave);
    color: #78350f;
}

/* 병가 상태일 때의 셀 및 배지 스타일 */
.day-cell.status-sick {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.4);
    box-shadow: inset 0 0 10px rgba(244, 63, 94, 0.05);
}

.day-cell.status-sick .day-num {
    color: #fecdd3;
}

.day-cell.status-sick .status-badge {
    display: inline-block;
    background-color: var(--color-sick);
    color: #4c0519;
}


/* 13. 대시보드 및 통계 섹션 스타일 */
.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    border-left: 4px solid #6366f1;
    padding-left: 0.6rem;
}

/* 통계 카드 격자 배치 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

/* 각 통계 카드 공통 스타일 */
.stat-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
}

.stat-sub-value {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* 통계 카드별 포인트 색상 커스텀 */
.stat-card.total-work {
    grid-column: span 2;
    /* 총 근무일수는 가로 전체 넓이 차지 */
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.stat-card.total-work .stat-icon {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.stat-card.total-work .stat-value {
    font-size: 1.6rem;
    background: linear-gradient(to right, #a5b4fc, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-card.type-work .stat-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-work);
}

.stat-card.type-leave .stat-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-leave);
}

.stat-card.type-deduction .stat-icon {
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-deduct);
}

.stat-card.type-deduction {
    border: 1px dashed rgba(99, 102, 241, 0.2);
}

.stat-card.type-deduction #deducted-days {
    color: #a5b4fc;
}

.stat-card.type-sick .stat-icon {
    background: rgba(244, 63, 94, 0.1);
    color: var(--color-sick);
}

/* 리셋 영역 카드 */
.action-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.action-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.reset-btn {
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.2);
    color: #fda4af;
    padding: 0.6rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-btn:hover {
    background: var(--color-sick);
    color: white;
    box-shadow: 0 4px 12px var(--color-sick-glow);
}

/* 14. 하단 푸터 영역 */
.app-footer {
    text-align: center;
    margin-top: 1rem;
}

.app-footer p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.2);
}

/* 15. 근무 상태 선택 팝오버(Popover) 스타일 */
.status-popover {
    position: absolute;
    z-index: 100;
    width: 250px;
    background: rgba(23, 23, 37, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: opacity 0.2s, transform 0.2s;
}

/* 숨겨진 팝오버 상태 */
.status-popover.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95) translateY(10px);
}

/* HTML hidden 속성 및 display-none 처리 */
.status-popover .hidden {
    display: none !important;
}

/* 팝오버 내부 타이틀 및 서브 타이틀 */
.popover-sub-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    text-align: center;
}

/* 팝오버 삼각형 화살표 */
.popover-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(23, 23, 37, 0.95);
    border-left: 1.5px solid rgba(255, 255, 255, 0.12);
    border-top: 1.5px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    bottom: -7px;
    /* 팝오버 밑에 위치하도록 설정 */
    left: calc(50% - 6px);
}

.popover-content {
    padding: 1.2rem 1rem;
    position: relative;
}

.popover-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    text-align: center;
}

.popover-title span {
    color: var(--text-main);
    font-weight: 700;
}

/* 팝오버 내부 버튼 목록 */
.popover-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* 상태 지정용 공통 버튼 스타일 */
.status-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
}

.btn-icon {
    font-size: 1rem;
    width: 20px;
    display: inline-block;
}

/* 호버 시 상태별 스타일 적용 */
.status-btn.btn-work:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--color-work);
    color: #a7f3d0;
}

.status-btn.btn-leave:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--color-leave);
    color: #fde68a;
}

.status-btn.btn-sick:hover {
    background: rgba(244, 63, 94, 0.15);
    border-color: var(--color-sick);
    color: #fecdd3;
}

.status-btn.btn-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-main);
}

.status-btn.btn-back {
    margin-top: 0.4rem;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-btn.btn-back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
}

/* 조퇴 시간 선택 1h~7h 격자 레이아웃 */
.hours-selector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.hour-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.45rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.hour-btn:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--color-leave);
    color: #fde68a;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
}

.hour-btn:active {
    transform: translateY(0);
}

/* 팝오버 닫기(X) 버튼 */
.popover-close-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px;
}

.popover-close-btn:hover {
    color: var(--text-main);
}

/* 백그라운드 오버레이 (클릭 시 팝오버 닫힘) */
.popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
}

.popover-overlay.hidden {
    display: none;
}


/* 16. 커스텀 모달 다이얼로그 (초기화 확인 메세지창) 스타일 */
.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    transition: all 0.3s ease;
}

/* 모달이 숨겨진 상태 */
.modal-wrapper.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-wrapper.hidden .modal-container {
    transform: scale(0.9) translateY(20px);
}

/* 어두운 배경 막 효과 (블러링 포함) */
.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 경고창 박스 몸체 (글래스모피즘) */
.modal-container {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    width: 90%;
    max-width: 400px;
    padding: 2.2rem 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-icon {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    animation: pulse-warn 2s infinite;
}

.modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--text-main);
}

.modal-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.6rem;
}

/* 모달 하단 액션 버튼 배치 */
.modal-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
}

.modal-btn {
    padding: 0.7rem 1.4rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    flex: 1;
}

/* 취소 버튼 */
.modal-btn.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
    color: var(--text-muted);
}

.modal-btn.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

/* 삭제 실행 버튼 */
.modal-btn.btn-confirm {
    background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
}

.modal-btn.btn-confirm:hover {
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.4);
    transform: translateY(-1px);
}

/* 아이콘 반짝임 애니메이션 */
@keyframes pulse-warn {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* ==========================================
   [수정] 독립형 디데이 카드 커스텀 스타일
   ========================================== */
.dday-standalone-card {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(99, 102, 241, 0.04) 100%);
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: 20px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    /* 아래 통계 타이틀과의 시각적 분리를 위한 여백 */
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.dday-layout-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.dday-icon {
    font-size: 1.6rem;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    flex-shrink: 0;
}

.dday-info-block {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.1rem;
}

/* 디데이 제목 입력창 (텍스트가 아닌 일반 라벨처럼 자연스럽게 동화되도록 커스텀) */
.dday-title-input {
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-family);
    padding: 2px 0;
    outline: none;
    width: 100%;
    max-width: 160px;
    transition: all 0.2s;
}

.dday-title-input:focus {
    border-bottom-color: #f472b6;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.02);
}

.dday-countdown-value {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to right, #f472b6, #fb7185);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}

.dday-picker-block {
    flex-shrink: 0;
}

.dday-date-picker {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    color-scheme: dark;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.dday-date-picker:focus {
    border-color: #f472b6;
}

/* 화면 반응형 대응 조절 */
@media (max-width: 480px) {
    .dday-layout-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .dday-picker-block {
        width: 100%;
    }

    .dday-date-picker {
        width: 100%;
    }
}

/* ==========================================
   [수정] 타이틀 이모지 그라데이션 충돌 버그 패치
   ========================================== */
.title-emoji {
    /* 부모(h1)에게서 상속받은 그라데이션 마스크 효과를 강제로 초기화 */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;

    /* 레이아웃 및 간격 조정 */
    display: inline-block;
    margin-right: 8px;
    /* 이모지와 글자 사이의 여백 */
    vertical-align: middle;

    /* 이모지 전용 내장 시스템 폰트 강제 지정 */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}