/* ========================================
   행복일기 공통 컴포넌트 스타일
   design-system.css 변수를 활용한 컴포넌트 정의
   ======================================== */


/* ========================================
   1. 카드 컴포넌트
   ======================================== */
.ds-card {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(61, 54, 50, 0.04);
    transition: all var(--transition-normal);
}

.ds-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* 카드 타입별 상단 포인트 */
.ds-card--gratitude {
    border-top: 3px solid var(--gratitude);
}

.ds-card--hurt {
    border-top: 3px solid var(--hurt);
}

.ds-card--together {
    border-top: 3px solid var(--together);
}

.ds-card--reflection {
    border-top: 3px solid var(--reflection);
}

.ds-card--quiz {
    border-top: 3px solid var(--quiz);
}

.ds-card--empathy {
    border-top: 3px solid var(--empathy);
}

/* 카드 내 구성요소 */
.ds-card__header {
    margin-bottom: var(--space-4);
}

.ds-card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.ds-card__subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.ds-card__body {
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.ds-card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(61, 54, 50, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ========================================
   2. 버튼 컴포넌트
   ======================================== */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    font-family: inherit;
    transition: all var(--transition-normal);
    cursor: pointer;
    border: none;
    text-decoration: none;
    line-height: 1.5;
}

.ds-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Primary */
.ds-btn--primary {
    background: var(--primary);
    color: var(--text-inverse);
}

.ds-btn--primary:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Secondary */
.ds-btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--bg-tertiary);
}

.ds-btn--secondary:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

/* Ghost */
.ds-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.ds-btn--ghost:hover:not(:disabled) {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Danger */
.ds-btn--danger {
    background: var(--error);
    color: var(--text-inverse);
}

.ds-btn--danger:hover:not(:disabled) {
    background: #D68A8A;
    transform: translateY(-1px);
}

/* 큰 버튼 (CTA) */
.ds-btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    border-radius: var(--radius-lg);
}

/* 작은 버튼 */
.ds-btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

/* 아이콘 버튼 */
.ds-btn--icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-full);
}

/* 전체 너비 버튼 */
.ds-btn--full {
    width: 100%;
}


/* ========================================
   3. 입력 필드 컴포넌트
   ======================================== */
.ds-input {
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text-primary);
    transition: all var(--transition-normal);
}

.ds-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.ds-input::placeholder {
    color: var(--text-tertiary);
}

/* 텍스트에어리어 */
.ds-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: var(--leading-relaxed);
}

/* 폼 그룹 */
.ds-form-group {
    margin-bottom: var(--space-5);
}

.ds-form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ds-form-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.ds-form-error {
    font-size: var(--text-xs);
    color: var(--error);
    margin-top: var(--space-1);
}


/* ========================================
   4. 감정 선택 그리드
   ======================================== */
.ds-emotion-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.ds-emotion-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.ds-emotion-btn:hover {
    background: var(--card-bg);
    transform: scale(1.05);
}

.ds-emotion-btn.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.ds-emotion-btn .emoji {
    font-size: 2rem;
}

.ds-emotion-btn .label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .ds-emotion-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }
}


/* ========================================
   5. 탭 컴포넌트
   ======================================== */
.ds-tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-1);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.ds-tab {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    background: none;
    font-family: inherit;
}

.ds-tab:hover {
    color: var(--text-primary);
}

.ds-tab.active {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}


/* ========================================
   6. 뱃지/태그 컴포넌트
   ======================================== */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.ds-badge--gratitude {
    background: var(--gratitude);
    color: #2D5A47;
}

.ds-badge--hurt {
    background: var(--hurt);
    color: #2D4A5A;
}

.ds-badge--together {
    background: var(--together);
    color: #5A4D2D;
}

.ds-badge--reflection {
    background: var(--reflection);
    color: #3D2D5A;
}

.ds-badge--quiz {
    background: var(--quiz);
    color: #5A3D2D;
}

.ds-badge--empathy {
    background: var(--empathy);
    color: #5A2D2D;
}

.ds-badge--primary {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.ds-badge--success {
    background: rgba(123, 200, 156, 0.2);
    color: #2D5A3F;
}


/* ========================================
   7. 프로그레스 바
   ======================================== */
.ds-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ds-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-light), var(--primary));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* 색상 변형 */
.ds-progress--mint .ds-progress__bar {
    background: linear-gradient(90deg, #C8EDE0, var(--accent-mint));
}

.ds-progress--lavender .ds-progress__bar {
    background: linear-gradient(90deg, #DDD0F0, var(--accent-lavender));
}


/* ========================================
   8. 헤더/섹션
   ======================================== */
.ds-header {
    background: var(--card-bg);
    padding: var(--space-6) var(--space-4) var(--space-8);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.ds-header__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ds-header__subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.ds-section {
    margin-bottom: var(--space-8);
}

.ds-section__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}


/* ========================================
   9. 컨테이너
   ======================================== */
.ds-container {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-4);
}

.ds-container--wide {
    max-width: 960px;
}


/* ========================================
   10. 구분선
   ======================================== */
.ds-divider {
    border: none;
    height: 1px;
    background: rgba(61, 54, 50, 0.06);
    margin: var(--space-6) 0;
}


/* ========================================
   11. 알림/토스트
   ======================================== */
.ds-alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.ds-alert--success {
    background: rgba(123, 200, 156, 0.15);
    color: #2D5A3F;
    border: 1px solid rgba(123, 200, 156, 0.3);
}

.ds-alert--error {
    background: rgba(232, 160, 160, 0.15);
    color: #5A2D2D;
    border: 1px solid rgba(232, 160, 160, 0.3);
}

.ds-alert--warning {
    background: rgba(240, 200, 122, 0.15);
    color: #5A4D2D;
    border: 1px solid rgba(240, 200, 122, 0.3);
}

.ds-alert--info {
    background: rgba(139, 184, 208, 0.15);
    color: #2D4A5A;
    border: 1px solid rgba(139, 184, 208, 0.3);
}


/* ========================================
   12. 빈 상태
   ======================================== */
.ds-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--text-tertiary);
}

.ds-empty__icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

.ds-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.ds-empty__description {
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}


/* ========================================
   13. 아바타
   ======================================== */
.ds-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    color: var(--primary-dark);
    font-size: var(--text-sm);
}

.ds-avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.ds-avatar--lg { width: 56px; height: 56px; font-size: var(--text-lg); }
.ds-avatar--xl { width: 80px; height: 80px; font-size: var(--text-2xl); }


/* ========================================
   14. 다크모드 보정 (컴포넌트)
   ======================================== */
html.dark-mode .ds-card {
    border-color: rgba(255, 255, 255, 0.06);
}

html.dark-mode .ds-badge--gratitude { color: #A8D8C8; background: rgba(168, 216, 200, 0.15); }
html.dark-mode .ds-badge--hurt { color: #B8D4E8; background: rgba(184, 212, 232, 0.15); }
html.dark-mode .ds-badge--together { color: #F7E8A4; background: rgba(247, 232, 164, 0.15); }
html.dark-mode .ds-badge--reflection { color: #C9B8E8; background: rgba(201, 184, 232, 0.15); }
html.dark-mode .ds-badge--quiz { color: #FFDAB3; background: rgba(255, 218, 179, 0.15); }
html.dark-mode .ds-badge--empathy { color: #F2C4C4; background: rgba(242, 196, 196, 0.15); }

html.dark-mode .ds-alert--success { background: rgba(123, 200, 156, 0.1); color: #7BC89C; }
html.dark-mode .ds-alert--error { background: rgba(232, 160, 160, 0.1); color: #E8A0A0; }
html.dark-mode .ds-alert--warning { background: rgba(240, 200, 122, 0.1); color: #F0C87A; }
html.dark-mode .ds-alert--info { background: rgba(139, 184, 208, 0.1); color: #8BB8D0; }

html.dark-mode .ds-input {
    background: var(--bg-tertiary);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .ds-tabs {
    background: var(--bg-tertiary);
}

html.dark-mode .ds-tab.active {
    background: var(--card-bg);
}

html.dark-mode .ds-divider {
    background: rgba(255, 255, 255, 0.06);
}


/* ========================================
   날짜 선택 컴포넌트 (ds-date-picker)
   ======================================== */
.ds-date-picker .dp-row {
    display: flex;
    gap: var(--space-2, 0.5rem);
    align-items: center;
}

.ds-date-picker .dp-col {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    flex: 1;
    min-width: 0;
}

.ds-date-picker .dp-col:first-child {
    flex: 1.4;
}

.ds-date-picker .dp-label {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #7A736C);
    flex-shrink: 0;
}

.ds-date-picker select {
    width: 100%;
    padding: 0.7rem 1.8rem 0.7rem 0.6rem;
    border: 1px solid var(--bg-tertiary, #EDE8E0);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--text-base, 1rem);
    font-family: inherit;
    color: var(--text-primary, #3D3632);
    background-color: var(--bg-secondary, #F5F1EB);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237A736C' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease);
    cursor: pointer;
}

.ds-date-picker select:focus {
    outline: none;
    border-color: var(--primary, #F4A896);
    background-color: var(--card-bg, #FFFFFF);
    box-shadow: 0 0 0 3px rgba(244, 168, 150, 0.12);
}

/* placeholder 옵션 색상 */
.ds-date-picker select option[value=""] {
    color: var(--text-tertiary, #A69E96);
}

/* 다크모드 */
html.dark-mode .ds-date-picker select,
body.dark-mode .ds-date-picker select {
    background-color: var(--input-bg, #2D2A27);
    border-color: var(--border-color, #3D3A37);
    color: var(--text-color, #F5F1EB);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23A69E96' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

html.dark-mode .ds-date-picker select:focus,
body.dark-mode .ds-date-picker select:focus {
    border-color: var(--primary-color, #F4A896);
    background-color: var(--card-bg, #343130);
    box-shadow: 0 0 0 3px rgba(244, 168, 150, 0.15);
}

/* 모바일 — 터치 영역 확대 */
@media (max-width: 480px) {
    .ds-date-picker select {
        padding: 0.8rem 1.8rem 0.8rem 0.5rem;
        font-size: var(--text-sm, 0.875rem);
    }

    .ds-date-picker .dp-row {
        gap: var(--space-1, 0.25rem);
    }

    .ds-date-picker .dp-label {
        font-size: var(--text-xs, 0.75rem);
    }
}

/* ========================================
   공지 배너 (Announcement Banner)
   ======================================== */
.announcement-banner {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border-bottom: 1px solid #ffc107;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    position: relative;
    z-index: 100;
}

.announcement-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.announcement-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.announcement-text {
    flex: 1;
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: #856404;
    line-height: 1.5;
}

.announcement-text strong {
    color: #664d03;
}

.announcement-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #856404;
    cursor: pointer;
    padding: var(--space-1, 0.25rem);
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.announcement-close:hover {
    opacity: 1;
}

/* 다크모드 */
.dark-mode .announcement-banner {
    background: linear-gradient(135deg, #3d3a38 0%, #4a4745 100%);
    border-bottom-color: #f4a896;
}

.dark-mode .announcement-text {
    color: #ffd9a0;
}

.dark-mode .announcement-text strong {
    color: #ffe4b5;
}

.dark-mode .announcement-close {
    color: #ffd9a0;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .announcement-banner {
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    }

    .announcement-content {
        gap: var(--space-2, 0.5rem);
    }

    .announcement-text {
        font-size: var(--text-xs, 0.75rem);
    }

    .announcement-icon {
        font-size: 1rem;
    }
}