/**
 * style.css
 * - 레이아웃, 섹션, 공통 스타일
 * - 디자인 토큰은 variables.css에서 로드
 */

@import url("variables.css");

/* ============================================================================
   Reset & Base
   ============================================================================ */
*,
*::before,
*::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: var(--font-family);
 font-size: var(--font-size-base);
 line-height: 1.5;
 color: var(--color-foreground);
 background-color: var(--color-background);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   Layout
   ============================================================================ */

.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--spacing-md);
}

/* ============================================================================
   Header
   ============================================================================ */

.header {
 background-color: var(--color-background);
 border-bottom: 1px solid var(--color-border);
 padding: var(--spacing-md) 0;
 position: sticky;
 top: 0;
 z-index: 100;
}

.header-content {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: var(--spacing-xl);
}

.logo a {
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
 font-size: var(--font-size-xl);
 font-weight: 700;
 color: var(--color-foreground);
 text-decoration: none;
 transition: opacity var(--transition-fast);
}

.logo a:hover {
 opacity: 0.8;
}

.logo-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 background-color: var(--color-primary);
 color: white;
 border-radius: var(--radius-md);
 font-size: var(--font-size-sm);
 font-weight: 600;
}

.logo-text {
 font-weight: 700;
 letter-spacing: -0.025em;
}

.header-center {
 display: flex;
 justify-content: center;
}

/* Search Box */
.search-box {
 position: relative;
 width: 100%;
 max-width: 480px;
}

.search-box input {
 width: 100%;
 height: 40px;
 padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 40px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-lg);
 font-size: var(--font-size-sm);
 background-color: var(--color-muted);
 transition: all var(--transition-fast);
}

.search-box input:focus {
 outline: none;
 border-color: var(--color-primary);
 background-color: var(--color-background);
 box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
}

.search-box input:focus-visible {
 outline: none;
}

.search-box input::placeholder {
 color: var(--color-muted-foreground);
}

.search-icon {
 position: absolute;
 left: 12px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--color-muted-foreground);
 pointer-events: none;
 font-size: var(--font-size-sm);
}

/* Search Dropdown */
.search-dropdown {
 position: absolute;
 top: calc(100% + 8px);
 left: 0;
 right: 0;
 background: var(--color-background);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
 padding: var(--spacing-md);
 z-index: 1000;
}

.search-dropdown-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--spacing-sm);
 font-size: var(--font-size-sm);
 font-weight: 500;
 color: var(--color-muted-foreground);
}

.clear-search {
 background: none;
 border: none;
 color: var(--color-primary);
 cursor: pointer;
 font-size: var(--font-size-sm);
 padding: 0;
 transition: opacity var(--transition-fast);
}

.clear-search:hover {
 opacity: 0.7;
}

.recent-searches {
 display: flex;
 flex-wrap: wrap;
 gap: var(--spacing-sm);
 margin-bottom: var(--spacing-md);
}

.recent-search-tag {
 display: inline-flex;
 align-items: center;
 gap: var(--spacing-xs);
 padding: var(--spacing-xs) var(--spacing-sm);
 background-color: var(--color-muted);
 border-radius: var(--radius-full);
 font-size: var(--font-size-sm);
 color: var(--color-foreground);
 cursor: pointer;
 transition: background-color var(--transition-fast);
}

.recent-search-tag:hover {
 background-color: var(--color-border);
}

.recent-search-tag .remove-btn {
 background: none;
 border: none;
 color: var(--color-muted-foreground);
 cursor: pointer;
 padding: 0;
 margin-left: var(--spacing-xs);
 font-size: var(--font-size-xs);
 line-height: 1;
 transition: color var(--transition-fast);
}

.recent-search-tag .remove-btn:hover {
 color: var(--color-destructive);
}

.no-recent {
 color: var(--color-muted-foreground);
 font-size: var(--font-size-sm);
}

.recommended-searches {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-xs);
}

.recommended-searches a {
 color: var(--color-foreground);
 text-decoration: none;
 font-size: var(--font-size-sm);
 padding: var(--spacing-xs) 0;
 transition: color var(--transition-fast);
}

.recommended-searches a:hover {
 color: var(--color-primary);
}

/* Header Actions */
.header-actions {
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
}

.user-menu {
 display: flex;
 align-items: center;
 gap: var(--spacing-md);
}

.user-profile-wrapper {
 position: relative;
}

.user-profile-btn {
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
 background: none;
 border: 1px solid transparent;
 cursor: pointer;
 padding: var(--spacing-xs) var(--spacing-sm);
 border-radius: var(--radius-lg);
 transition: all var(--transition-fast);
 font-size: var(--font-size-sm);
 color: var(--color-foreground);
}

.user-profile-btn:hover {
 background-color: var(--color-muted);
}

.user-avatar {
 width: 32px;
 height: 32px;
 border-radius: var(--radius-full);
 object-fit: cover;
}

.dropdown-icon {
 font-size: 10px;
 color: var(--color-muted-foreground);
 transition: transform var(--transition-fast);
}

.user-dropdown {
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 background: var(--color-background);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
 padding: var(--spacing-xs);
 min-width: 160px;
 z-index: 1000;
}

.user-dropdown a {
 display: block;
 padding: var(--spacing-sm) var(--spacing-md);
 color: var(--color-foreground);
 text-decoration: none;
 border-radius: var(--radius-md);
 font-size: var(--font-size-sm);
 transition: background-color var(--transition-fast);
}

.user-dropdown a:hover {
 background-color: var(--color-muted);
}

.user-dropdown a:last-child:hover {
 background-color: hsl(0 84.2% 60.2% / 0.1);
 color: var(--color-destructive);
}

/* Hero Section */
.hero {
 background-color: var(--color-background);
 padding: var(--spacing-3xl) 0;
 min-height: 560px;
 display: flex;
 align-items: center;
}

.hero-layout {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--spacing-3xl);
 align-items: center;
}

.hero-content {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-md);
}

.hero-title-line1,
.hero-title-line2 {
 display: block;
 font-size: var(--font-size-4xl);
 font-weight: 700;
 line-height: 1.1;
 letter-spacing: -0.025em;
}

.hero-title-line1 {
 color: var(--color-foreground);
}

.hero-title-line2 {
 color: var(--color-primary);
}

.hero-description {
 font-size: var(--font-size-lg);
 color: var(--color-muted-foreground);
 line-height: 1.6;
 margin: var(--spacing-sm) 0;
}

.hero-buttons {
 display: flex;
 gap: var(--spacing-md);
 margin-top: var(--spacing-md);
}

/* Hero Carousel */
.hero-carousel {
 position: relative;
 border-radius: var(--radius-xl);
 overflow: hidden;
 aspect-ratio: 4 / 3;
 box-shadow: var(--shadow-xl);
}

.hero-swiper {
 width: 100%;
 height: 100%;
}

.hero-swiper .swiper-slide {
 position: relative;
 width: 100%;
 height: 100%;
}

.hero-swiper .swiper-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.carousel-overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
 padding: var(--spacing-xl);
 color: white;
}

.carousel-overlay h3 {
 font-size: var(--font-size-xl);
 font-weight: 600;
 margin-bottom: var(--spacing-xs);
}

.carousel-overlay p {
 font-size: var(--font-size-sm);
 opacity: 0.9;
}

/* Carousel Controls */
.carousel-controls {
 position: absolute;
 bottom: var(--spacing-md);
 right: var(--spacing-md);
 display: flex;
 align-items: center;
 gap: var(--spacing-xs);
 background: rgba(0, 0, 0, 0.6);
 backdrop-filter: blur(8px);
 padding: var(--spacing-xs) var(--spacing-sm);
 border-radius: var(--radius-full);
 z-index: 10;
}

.carousel-counter {
 color: white;
 font-size: var(--font-size-xs);
 margin-right: var(--spacing-xs);
}

.carousel-btn {
 width: 28px;
 height: 28px;
 border: none;
 background: rgba(255, 255, 255, 0.2);
 color: white;
 border-radius: var(--radius-full);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: var(--font-size-sm);
 transition: background-color var(--transition-fast);
}

.carousel-btn:hover {
 background: rgba(255, 255, 255, 0.3);
}

.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-pagination {
 display: none;
}

/* Sections */
section {
 padding: var(--spacing-2xl) 0;
}

.section-title {
 font-size: var(--font-size-2xl);
 font-weight: 700;
 margin-bottom: var(--spacing-lg);
 color: var(--color-foreground);
 letter-spacing: -0.025em;
}

/* Footer */
.footer {
 background-color: var(--color-foreground);
 color: white;
 padding: var(--spacing-2xl) 0;
 margin-top: var(--spacing-3xl);
}

.footer-content {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: var(--spacing-xl);
}

.footer-section h3 {
 font-size: var(--font-size-base);
 font-weight: 600;
 margin-bottom: var(--spacing-md);
}

.footer-section p {
 color: hsl(215 20% 65%);
 margin-bottom: var(--spacing-sm);
 font-size: var(--font-size-sm);
}

/* Screen Reader Only */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border-width: 0;
}

/* Loading Spinner */
.loading-spinner {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: var(--spacing-2xl);
}

.spinner {
 width: 32px;
 height: 32px;
 border: 3px solid var(--color-border);
 border-top-color: var(--color-primary);
 border-radius: var(--radius-full);
 animation: spin 0.8s linear infinite;
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

/* Empty State */
.empty-state {
 text-align: center;
 padding: var(--spacing-2xl);
 color: var(--color-muted-foreground);
}

/* Toast */
.toast {
 position: fixed;
 bottom: var(--spacing-xl);
 right: var(--spacing-xl);
 padding: var(--spacing-md) var(--spacing-lg);
 background-color: var(--color-foreground);
 color: white;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
 opacity: 0;
 transform: translateY(16px);
 transition: opacity var(--transition-base), transform var(--transition-base);
 z-index: 1000;
 font-size: var(--font-size-sm);
}

.toast.show {
 opacity: 1;
 transform: translateY(0);
}

.toast-success {
 background-color: var(--color-success);
}

.toast-error {
 background-color: var(--color-destructive);
}

.toast-warning {
 background-color: var(--color-warning);
 color: var(--color-foreground);
}