@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');:root {--primary: #ff922b;--primary-light: #ffe8cc;--secondary: #228be6;--dark: #343a40;--light: #f8f9fa;--white: #ffffff;--text: #212529;--text-light: #868e96;--border: #dee2e6;--success: #37b24d;--danger: #f03e3e;--warning: #f59f00;--info: #1c7ed6;} .profile-image-sm {display: flex;align-items: center;justify-content: center;} .profile-image-sm img {object-fit: cover;border: 1px solid var(--border);} main {flex: 1;padding: 2rem 0;} h1,h2,h3,h4,h5,h6 {font-weight: 600;} a {color: var(--secondary);text-decoration: none;transition: color 0.2s ease-in-out;} a:hover {color: #1971c2;} .card {border: none;border-radius: 15px;box-shadow: 0 10px 20px rgba(0,0,0,0.05),0 6px 6px rgba(0,0,0,0.02);overflow: hidden;transition: transform 0.3s ease,box-shadow 0.3s ease;margin-bottom: 1.5rem;backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);background-color: rgba(255,255,255,0.9);} .card:hover {transform: translateY(-5px);box-shadow: 0 15px 30px rgba(0,0,0,0.1),0 8px 8px rgba(0,0,0,0.05);} .card::before {content: '';position: absolute;top: 0;left: 15%;right: 15%;height: 3px;background: linear-gradient(to right,#8e44ad,#2a80b9,#16a085);border-radius: 0 0 3px 3px;opacity: 0;transition: opacity 0.3s ease;} .card:hover::before {opacity: 1;} .card-header {background-color: var(--white);border-bottom: 1px solid var(--border);padding: 1.25rem 1.5rem;font-weight: 600;} .card-body {padding: 1.5rem;} .card-footer {background-color: var(--white);border-top: 1px solid var(--border);padding: 1rem 1.5rem;} .product-card {height: 100%;} .product-card .card-img-top {height: 200px;object-fit: cover;} .product-card .card-title {font-size: 1.1rem;font-weight: 600;margin-bottom: 0.25rem;} .product-card .card-subtitle {font-size: 0.9rem;margin-bottom: 0.75rem;} .badge {font-weight: 500;padding: 0.35em 0.65em;border-radius: 4px;} .footer {margin-top: auto;background-color: var(--white) !important;border-top: 1px solid var(--border);padding: 1.5rem 0;color: var(--text);} .footer a {color: var(--text) !important;} .footer a:hover {color: var(--primary) !important;} .form-control {border: 1px solid var(--border);border-radius: 6px;padding: 0.6rem 1rem;transition: all 0.2s ease;} .form-control:focus {border-color: var(--primary);box-shadow: 0 0 0 0.25rem rgba(255,146,43,0.25);} .form-select {border: 1px solid var(--border);border-radius: 6px;padding: 0.6rem 1rem;transition: all 0.2s ease;} .form-select:focus {border-color: var(--primary);box-shadow: 0 0 0 0.25rem rgba(255,146,43,0.25);} .form-label {font-weight: 500;margin-bottom: 0.5rem;} .btn {font-weight: 500;padding: 0.5rem 1.25rem;border-radius: 6px;transition: all 0.2s ease;} .btn-primary {background-color: var(--primary);border-color: var(--primary);color: var(--white);} .btn-primary:hover,.btn-primary:focus {background-color: #e67700;border-color: #e67700;color: var(--white);} .btn-secondary {background-color: var(--secondary);border-color: var(--secondary);} .btn-secondary:hover,.btn-secondary:focus {background-color: #1971c2;border-color: #1971c2;} .btn-outline-primary {color: var(--primary);border-color: var(--primary);} .btn-outline-primary:hover {background-color: var(--primary);border-color: var(--primary);color: var(--white);} .btn-outline-secondary {color: var(--secondary);border-color: var(--secondary);} .btn-outline-secondary:hover {background-color: var(--secondary);border-color: var(--secondary);color: var(--white);} .jumbotron {background-color: var(--white);border-radius: 10px;padding: 3rem;box-shadow: 0 4px 12px rgba(0,0,0,0.05);} .alert {border: none;border-radius: 8px;padding: 1rem 1.25rem;} .alert-success {background-color: #ebfbee;color: #2b9348;} .alert-danger {background-color: #fff5f5;color: #e03131;} .alert-warning {background-color: #fff9db;color: #e67700;} .alert-info {background-color: #e7f5ff;color: #1971c2;} .text-bourbon {color: var(--primary) !important;} .bg-bourbon {background-color: var(--primary) !important;} .bg-bourbon-light {background-color: var(--primary-light) !important;} .progress {height: 8px;border-radius: 4px;margin-top: 0.5rem;margin-bottom: 0.5rem;} .progress-bar.bg-warning {background-color: var(--primary) !important;} .review-list .card {margin-bottom: 1rem;} .review-images img {border-radius: 8px;transition: transform 0.2s ease;} .review-images img:hover {transform: scale(1.05);} .bi-star-fill,.bi-star {color: var(--primary) !important;} .profile-img-container {position: relative;width: 150px;height: 150px;margin: 0 auto;} .profile-img {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;border: 3px solid var(--white);box-shadow: 0 4px 12px rgba(0,0,0,0.15);} .profile-img-small {width: 28px;height: 28px;object-fit: cover;border-radius: 50%;border: 2px solid var(--white);box-shadow: 0 2px 4px rgba(0,0,0,0.1);} .profile-image-upload {border-radius: 10px;padding: 15px;background-color: var(--light);transition: all 0.3s ease;} .profile-image-preview img {border-radius: 50%;object-fit: cover;transition: all 0.3s ease;border: 3px solid var(--white);box-shadow: 0 4px 8px rgba(0,0,0,0.1);} .profile-image-preview img:hover {transform: scale(1.05);box-shadow: 0 6px 12px rgba(0,0,0,0.15);} body.dark-mode .profile-image-upload {background-color: var(--white);box-shadow: 0 4px 15px rgba(0,0,0,0.1);} body.dark-mode .profile-image-preview img {border-color: var(--primary);} body.dark-mode .form-control,body.dark-mode .form-select {background-color: var(--light);border-color: var(--border);color: var(--text);} body.dark-mode .form-control:focus,body.dark-mode .form-select:focus {background-color: var(--light);border-color: var(--primary);box-shadow: 0 0 0 0.25rem rgba(255,146,43,0.25);} .pagination .page-link {color: var(--primary);padding: 0.5rem 0.75rem;border-color: var(--border);} .pagination .page-item.active .page-link {background-color: var(--primary);border-color: var(--primary);} .nav-tabs .nav-link {color: var(--text);border: none;padding: 0.75rem 1rem;font-weight: 500;} .nav-tabs .nav-link.active {color: var(--primary);border-bottom: 2px solid var(--primary);background-color: transparent;} @media (max-width: 767.98px) {.jumbotron {padding: 2rem 1rem;} .display-4 {font-size: 2.5rem;} .card-body {padding: 1.25rem;}} @keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}} .animate-fade-in {animation: fadeIn 0.5s ease-in-out;} .dark-mode-toggle {cursor: pointer;padding: 0.5rem;display: flex;align-items: center;color: var(--text);font-weight: 500;transition: all 0.2s ease;} .dark-mode-toggle:hover {color: var(--primary);} .dark-mode-toggle i {margin-right: 0.5rem;} #scroll-to-top {opacity: 0;visibility: hidden;transition: opacity 0.3s ease,visibility 0.3s ease;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 10px rgba(0,0,0,0.15);} #scroll-to-top.visible {opacity: 1;visibility: visible;} .hero-section {background: linear-gradient(135deg,#00b894 0%,#0984e3 50%,#6c5ce7 100%);color: var(--white);border-radius: 15px;padding: 4rem 2rem;position: relative;overflow: hidden;box-shadow: 0 8px 24px rgba(0,0,0,0.1);margin-bottom: 2.5rem;} .hero-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('/static/img/bourbon-pattern.png') repeat;opacity: 0.1;z-index: 0;} .hero-content {position: relative;z-index: 1;} .hero-section .btn {padding: 0.75rem 2rem;font-weight: 600;margin-top: 1.5rem;background-color: var(--white);color: var(--primary);border: none;box-shadow: 0 4px 12px rgba(0,0,0,0.1);} .hero-section .btn:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(0,0,0,0.15);background-color: var(--white);color: var(--primary);} .feature-card {height: 100%;text-align: center;padding: 2rem 1.5rem;display: flex;flex-direction: column;align-items: center;} .feature-card .icon-container {width: 80px;height: 80px;background-color: var(--primary-light);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 1.5rem;} .feature-card .icon-container i {font-size: 2rem;color: var(--primary);} .feature-card .card-title {margin-bottom: 1rem;font-weight: 600;} .feature-card .btn {margin-top: auto;} .profile-image-sm {overflow: hidden;border-radius: 50%;display: flex;align-items: center;justify-content: center;background-color: var(--bg-card);box-shadow: 0 0 0 1px rgba(0,0,0,0.05);} .profile-image-sm img {object-fit: cover;width: 100%;height: 100%;} .user-profile-container {position: relative;} .user-dropdown .dropdown-menu {min-width: 200px;padding: 0.5rem;border-radius: 0.5rem;box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.05);border: 1px solid rgba(0,0,0,0.08);animation: fadeIn 0.2s ease;} .user-link {color: var(--text);font-weight: 500;transition: color 0.2s ease;} .user-link:hover {color: var(--primary);} .user-dropdown .dropdown-item {border-radius: 0.25rem;padding: 0.5rem 0.75rem;transition: all 0.2s ease;} .user-dropdown .dropdown-item:hover {background-color: var(--primary-light);color: var(--primary);} @keyframes fadeIn {from {opacity: 0;transform: translateY(-10px);} to {opacity: 1;transform: translateY(0);}} .scroll-btn {opacity: 0;visibility: hidden;transition: opacity 0.3s ease,visibility 0.3s ease;z-index: 1000;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 10px rgba(0,0,0,0.2);} .scroll-btn.visible {opacity: 1;visibility: visible;} .scroll-btn:hover {transform: translateY(-3px);} .animate-fade-in {animation: fadeInUp 0.5s ease forwards;opacity: 0;} @keyframes fadeInUp {from {opacity: 0;transform: translateY(20px);} to {opacity: 1;transform: translateY(0);}} @media (max-width: 991px) {.card {margin-bottom: 1rem;} .hero-section {padding: 3rem 1rem;} .footer {padding: 2rem 1rem;} .scroll-btn {width: 35px;height: 35px;}} @media (max-width: 767px) {body {font-size: 0.95rem;} h1 {font-size: 1.75rem;} h2 {font-size: 1.5rem;} .table-responsive {font-size: 0.85rem;} .profile-image-sm {width: 28px;height: 28px;} .user-dropdown .dropdown-menu {min-width: 180px;}} @media (max-width: 575px) {.navbar .profile-image-sm {width: 24px;height: 24px;} .dark-mode-toggle span {display: none;} .dark-mode-toggle i {margin-right: 0;}} @media print {header,footer,.sidebar,.no-print {display: none !important;} body {background: white;} .container {width: 100%;max-width: 100%;} .card {border: none;box-shadow: none;}}