/* --- base.css --- */
/* --- Reset & Base Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--background-color);
    color: var(--text-primary-color);
    min-height: 100vh;
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    animation: pageLoad 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed-fast) ease-in-out;
}

a:hover {
    color: var(--primary-dark);
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1em; /* 제목 아래 간격 조정 */
    color: var(--text-primary-color);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

h1 { font-size: var(--h1-font-size); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }

p {
    margin-bottom: 1.2em;
    color: var(--text-secondary-color);
}

/* --- Forms Base --- */
.form-group label {
    display: block;
    margin-bottom: 10px; /* 라벨 아래 간격 증가 */
    font-weight: var(--font-weight-medium);
    font-size: var(--small-font-size);
    color: var(--text-secondary-color);
}

.form-control {
    width: 100%;
    padding: 14px 18px; /* 입력 필드 패딩 조정 */
    background-color: var(--surface-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius);
    font-size: var(--body-font-size);
    color: var(--text-primary-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control::placeholder {
    color: var(--text-disabled-color);
    opacity: 1;
    transition: opacity 0.25s ease;
}

.form-control:focus::placeholder {
    opacity: 0.6;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(109, 152, 134, 0.15);
    transform: translateY(-1px);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23777777'%3E%3Cpath fill-rule='evenodd' d='M8 11.293l-4.646-4.647a.5.5 0 0 1 .708-.708L8 9.879l4.938-4.938a.5.5 0 0 1 .707.707L8 11.293z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px 16px;
    padding-right: 45px;
}

/* --- Icons Placeholder --- */
/* 아이콘 기본 스타일 유지 - 실제 프로젝트에서는 FontAwesome, SVG 등을 사용 */
.icon { display: inline-block; font-style: normal; vertical-align: middle; }
.icon-dashboard::before { content: '📊'; }
.icon-analytics::before { content: '💡'; }
.icon-artworks::before { content: '🖼️'; }
.icon-exhibitions::before { content: '🏛️'; }
.icon-users::before { content: '👥'; }
.icon-clients::before { content: '🏢'; }
.icon-logs::before { content: '📜'; }
.icon-settings::before { content: '⚙️'; }
.icon-add::before { content: '+'; margin-right: 4px; }
.icon-edit::before { content: '✏️'; }
.icon-delete::before { content: '🗑️'; }
.icon-ar::before { content: '📱'; }
.icon-admin::before { content: '👤'; }
.icon-image::before { content: '🌄'; }
.icon-3d::before { content: '🧊'; }
.icon-text::before { content: '📄'; }
.icon-audio::before { content: '🎵'; }
.icon-video::before { content: '▶️'; }
.icon-upload::before { content: '☁️'; }
.icon-save::before { content: '💾'; }
.icon-manage::before { content: '🔧'; }
.icon-sort::before { content: '↕️'; color: var(--text-secondary-color); }
.icon-views::before { content: '👁️'; }
.icon-time::before { content: '⏱️'; }
.icon-star::before { content: '⭐'; }
.icon-interaction::before { content: '👆'; }
.icon-suggestion::before { content: '💡'; color: var(--info-color); }
.icon-trend-up::before { content: '📈'; color: var(--success-color); }
.icon-trend-down::before { content: '📉'; color: var(--danger-color); }
.icon-platform::before { content: '💻'; }
.icon-chart-bar::before { content: '📊'; }
.icon-chart-line::before { content: '📈'; }
.icon-chart-pie::before { content: '🥧'; }
.icon-chart-scatter::before { content: '✨'; }
.icon-effect::before { content: '✨';} /* 이펙트 아이콘 추가 */

/* --- Tag Selector Styles (컬렉션 태그 · 인사이트 작품별 태그 디자인 통일) --- */
.tag-selector {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    background-color: var(--surface-color);
    margin-top: 10px;
}

/* 카테고리 탭: 선택 = 녹색 배경+흰 글씨, 비선택 = 연한 회색 */
.tag-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.tag-category-btn {
    width: 88px;
    min-height: 36px;
    padding: 8px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    background-color: #F0F0F0;
    color: #555555;
    font-size: var(--small-font-size);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tag-category-btn:hover {
    background-color: #E5E5E5;
    color: #333333;
}

.tag-category-btn.active {
    background-color: #4CAF50;
    color: #FFFFFF;
}

/* 소재목 (매체/기술/스타일/주제 선택 시에만 표시) */
.tag-subcategories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.tag-subcategories.hidden {
    display: none;
}

.tag-subcategories-label {
    font-size: var(--small-font-size);
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-medium);
    margin-right: 4px;
    flex-shrink: 0;
}

.tag-subcategories-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-subcategories-btns .tag-subcategory-btn {
    width: 100px;
    min-height: 36px;
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid #E0E0E5;
    border-radius: 8px;
    font-size: 0.8rem;
    background-color: #F8F8FA;
    color: #555555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tag-subcategories-btns .tag-subcategory-btn:hover {
    background-color: #EEEEF2;
    color: #333333;
    border-color: #D0D0D5;
}

.tag-subcategories-btns .tag-subcategory-btn.active {
    background-color: #4CAF50;
    color: #FFFFFF;
    border-color: #4CAF50;
}

/* 태그 그리드: 비선택 = 연한 회색 칩, 선택 = 민트그린 칩 (인사이트 작품별 태그 스타일) */
.tag-selector .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    min-height: 60px;
}

.tag-selector .tag-item {
    min-width: 96px;
    min-height: 32px;
    padding: 6px 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #E6E6E6;
    border-radius: 999px;
    background-color: #F5F5F5;
    color: #555555;
    font-size: var(--small-font-size);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tag-selector .tag-item:hover {
    background-color: #EEEEEE;
    color: #333333;
    border-color: #DDDDDD;
}

/* 그리드에서 선택된 태그 = 인사이트 컬렉션 한눈에 .analytics-tag.ar 와 동일 색톤 */
.tag-selector .tag-item.active,
.tag-selector .tag-item.selected {
    background: linear-gradient(135deg, #A7F3D0 0%, #6EE7B7 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tag-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 선택된 태그 영역 (하단) */
.selected-tags {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.selected-tags-label {
    font-size: var(--small-font-size);
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-medium);
    margin-bottom: 10px;
    display: block;
}

.selected-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 36px;
}

/* 선택된 태그 칩 = 인사이트 컬렉션 한눈에 .analytics-tag.ar 와 동일 색톤, 박스 크기 통일 */
.selected-tag-chip,
.selected-tag {
    min-width: 110px;
    min-height: 40px;
    padding: 8px 28px 8px 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    font-size: var(--small-font-size);
    color: #FFFFFF;
    background: linear-gradient(135deg, #A7F3D0 0%, #6EE7B7 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.selected-tag-chip:hover,
.selected-tag:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.selected-tag-chip .remove-tag,
.selected-tag .remove-tag {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: 0.9;
    padding: 0 2px;
    transition: opacity 0.2s ease;
}

.selected-tag-chip .remove-tag:hover,
.selected-tag .remove-tag:hover {
    opacity: 1;
}

.empty-tags-message {
    color: var(--text-disabled-color);
    font-style: italic;
    font-size: var(--small-font-size);
    padding: 10px 0;
}