/* ========================================
   공통 컴포넌트 스타일 (Common Component Styles)
   ======================================== */

/* ========================================
   모달 컴포넌트 (Modal Component)
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--modal-z-index);
    opacity: 0;
    animation: fadeIn var(--transition-speed) var(--transition-ease) forwards;
}

.modal-content {
    background: var(--modal-bg);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-shadow);
    max-width: var(--modal-max-width);
    width: var(--modal-width);
    max-height: var(--modal-max-height);
    overflow: hidden;
    transform: scale(0.9);
    animation: modalSlideIn var(--transition-speed) var(--transition-ease) forwards;
}

.modal-content.large {
    max-width: 600px;
}

.modal-content.extra-large {
    max-width: 800px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--input-border-color);
    padding: var(--modal-header-padding);
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--btn-gap) * 2;
}

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--light-text);
    cursor: pointer;
    padding: var(--btn-gap);
    border-radius: var(--btn-border-radius);
    transition: all var(--transition-speed);
}

.modal-close:hover {
    background-color: var(--background-color);
    color: var(--text-color);
}

.modal-body {
    padding: var(--modal-padding);
    color: #555;
    line-height: var(--line-height-base);
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--btn-gap) * 3);
    padding: var(--modal-footer-padding);
    border-top: 1px solid var(--input-border-color);
}

/* ========================================
   카드 컴포넌트 (Card Component)
   ======================================== */
.card {
    background: var(--card-bg);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    overflow: hidden;
    transition: all var(--transition-speed) var(--transition-ease);
}

.card.hoverable {
    cursor: pointer;
}

.card.hoverable:hover {
    transform: var(--card-hover-transform);
    box-shadow: var(--card-shadow-hover);
}

.card-header {
    padding: var(--card-padding);
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
}

.card-body {
    padding: var(--card-padding);
}

.card-footer {
    padding: var(--card-padding);
    border-top: 1px solid var(--border-color);
    background: var(--background-color);
}

.card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) var(--transition-ease);
}

.card.hoverable:hover .card-image img {
    transform: scale(1.05);
}

.card-image.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-placeholder-image {
    color: white;
    font-size: 2.5rem;
    opacity: 0.7;
}

/* ========================================
   버튼 컴포넌트 (Button Component)
   ======================================== */
.btn {
    padding: var(--btn-padding);
    border: none;
    border-radius: var(--btn-border-radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: all var(--transition-speed);
    min-width: var(--btn-min-width);
    display: inline-flex;
    align-items: center;
    gap: var(--btn-gap);
    text-decoration: none;
    text-align: center;
    justify-content: center;
    line-height: 1;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
}

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

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-color);
}

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

.btn-outline-primary {
    background-color: transparent;
    color: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-bg);
}

.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
}

.btn-outline-secondary {
    background-color: transparent;
    color: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-bg);
}

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

.btn-sm {
    padding: calc(var(--btn-padding) * 0.75);
    font-size: calc(var(--btn-font-size) * 0.9);
    min-width: calc(var(--btn-min-width) * 0.8);
}

.btn-lg {
    padding: calc(var(--btn-padding) * 1.25);
    font-size: calc(var(--btn-font-size) * 1.1);
    min-width: calc(var(--btn-min-width) * 1.2);
}

/* ========================================
   하이라이트 스타일 (Highlight Styles)
   ======================================== */
.highlight,
:global(.highlight) {
    background-color: var(--highlight-title-bg);
    color: var(--highlight-title-color);
    font-style: normal;
    font-weight: bold;
    padding: var(--highlight-padding);
    border-radius: var(--highlight-border-radius);
}

.highlight-title,
:global(.list_title_t em),
:global(.list_alternative_title_highlight em) {
    background-color: var(--highlight-title-bg);
    color: var(--highlight-title-color);
    font-style: normal;
    font-weight: bold;
    padding: var(--highlight-padding);
    border-radius: var(--highlight-border-radius);
}

.highlight-abstract,
:global(.abstract-fragment em) {
    background-color: var(--highlight-abstract-bg);
    color: var(--highlight-abstract-color);
    font-style: normal;
    font-weight: bold;
    padding: var(--highlight-padding);
    border-radius: var(--highlight-border-radius);
}

.highlight-keyword,
:global(.keyword-fragment em) {
    background-color: var(--highlight-keyword-bg);
    color: var(--highlight-keyword-color);
    font-style: normal;
    font-weight: bold;
    padding: var(--highlight-padding);
    border-radius: var(--highlight-border-radius);
}

.highlight-contributor,
:global(.contributor-fragment em) {
    background-color: var(--highlight-contributor-bg);
    color: var(--highlight-contributor-color);
    font-style: normal;
    font-weight: bold;
    padding: var(--highlight-padding);
    border-radius: var(--highlight-border-radius);
}

/* ========================================
   폼 컴포넌트 (Form Component)
   ======================================== */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: calc(var(--spacing-sm) / 2);
    font-weight: 500;
    color: var(--text-color);
    font-size: var(--input-font-size);
}

.form-control {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--input-font-size);
    background-color: var(--input-bg);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-control:focus {
    outline: none;
    border-color: var(--input-border-color-focus);
    box-shadow: var(--input-shadow-focus);
}

.form-control:disabled {
    opacity: 0.6;
    background-color: var(--background-color);
    cursor: not-allowed;
}

.form-control.is-invalid {
    border-color: var(--status-danger);
}

.form-control.is-valid {
    border-color: var(--status-success);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: calc(var(--spacing-sm) / 2);
    font-size: calc(var(--input-font-size) * 0.9);
    color: var(--status-danger);
}

.valid-feedback {
    display: block;
    width: 100%;
    margin-top: calc(var(--spacing-sm) / 2);
    font-size: calc(var(--input-font-size) * 0.9);
    color: var(--status-success);
}

/* ========================================
   그리드 시스템 (Grid System)
   ======================================== */
.grid {
    display: grid;
    gap: var(--grid-gap-md);
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width), 1fr));
}

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width), 1fr));
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.grid-gap-sm { gap: var(--grid-gap-sm); }
.grid-gap-md { gap: var(--grid-gap-md); }
.grid-gap-lg { gap: var(--grid-gap-lg); }

/* ========================================
   애니메이션 (Animations)
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ========================================
   유틸리티 클래스 (Utility Classes)
   ======================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.border-radius { border-radius: var(--border-radius); }
.border-radius-lg { border-radius: calc(var(--border-radius) * 2); }
.border-radius-xl { border-radius: calc(var(--border-radius) * 3); }

.shadow { box-shadow: var(--box-shadow); }
.shadow-lg { box-shadow: var(--card-shadow); }
.shadow-xl { box-shadow: var(--card-shadow-hover); }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.transition { transition: all var(--transition-speed) var(--transition-ease); }
.transition-fast { transition: all calc(var(--transition-speed) * 0.5) var(--transition-ease); }
.transition-slow { transition: all calc(var(--transition-speed) * 2) var(--transition-ease); }

/* ========================================
   반응형 유틸리티 (Responsive Utilities)
   ======================================== */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: var(--spacing-sm);
    }
    
    .grid-auto-fill,
    .grid-auto-fit {
        grid-template-columns: 1fr;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .hidden-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
}