* {margin: 0;padding: 0;box-sizing: border-box;} body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background-color: #f8f9fa;color: #333;padding-bottom: 60px;} .header {background-color: #fff;padding: 10px 15px;display: flex;align-items: center;gap: 12px;position: sticky;top: 0;z-index: 100;box-shadow: 0 1px 3px rgba(0,0,0,0.05);} .logo {width: 36px;height: 36px;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;text-decoration: none;cursor: pointer;transition: transform 0.2s ease, box-shadow 0.2s ease;overflow: hidden;background-color: #fff;border: 1px solid #e0e0e0;} .logo-img {width: 100%;height: 100%;object-fit: contain;display: block;} .logo:hover {transform: scale(1.05);box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);} .back-home {width: 36px;height: 36px;border-radius: 8px;display: flex;align-items: center;justify-content: center;text-decoration: none;cursor: pointer;transition: transform 0.2s ease, box-shadow 0.2s ease;overflow: hidden;background-color: #fff;border: 1px solid #e0e0e0;flex-shrink: 0;} .back-home-img {width: 100%;height: 100%;object-fit: contain;display: block;} .back-home:hover {transform: scale(1.05);box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);} .search-box {flex: 1;display: flex;align-items: center;background-color: #f5f5f5;border-radius: 25px;padding: 0 15px;margin: 0 10px;position: relative;} .search-input {flex: 1;border: none;background: none;padding: 10px 0;font-size: 14px;color: #333;} .search-suggestions {position: absolute;top: 100%;left: 0;right: 0;background-color: white;border-radius: 0 0 25px 25px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);z-index: 1000;max-height: 300px;overflow-y: auto;display: none;} .search-suggestions.show {display: block;} .search-section {padding: 10px 15px;border-bottom: 1px solid #f0f0f0;} .search-section-title {font-size: 12px;color: #999;margin-bottom: 8px;font-weight: 600;} .search-item {padding: 8px 10px;cursor: pointer;border-radius: 4px;transition: background-color 0.2s ease;display: flex;align-items: center;justify-content: space-between;} .search-item:hover {background-color: #f5f5f5;} .search-item span {font-size: 14px;color: #333;} .search-item .remove-history {color: #999;font-size: 12px;cursor: pointer;opacity: 0;transition: opacity 0.2s ease;} .search-item:hover .remove-history {opacity: 1;} .clear-history {text-align: center;padding: 10px;color: #667eea;cursor: pointer;font-size: 13px;border-top: 1px solid #f0f0f0;} .clear-history:hover {background-color: #f5f5f5;} .search-input::placeholder {color: #999;} .search-btn {background: none;border: none;color: #999;font-size: 16px;cursor: pointer;padding: 12px 16px;display: flex;align-items: center;justify-content: center;touch-action: manipulation;} .search-btn svg {width: 18px;height: 18px;fill: none;stroke: currentColor;stroke-width: 2;} .image-search-btn {background: none;border: none;color: #667eea;font-size: 16px;cursor: pointer;padding: 12px 12px;display: flex;align-items: center;justify-content: center;touch-action: manipulation;text-decoration: none;transition: color 0.2s ease;} .image-search-btn:hover {color: #4f46e5;} .image-search-btn svg {width: 18px;height: 18px;fill: none;stroke: currentColor;stroke-width: 2;} .content {padding: 15px;} .poster-grid {column-count: 2;column-gap: 15px;transition: opacity 0.4s ease, transform 0.4s ease;} .poster-card {background-color: #fff;box-shadow: 0 2px 8px rgba(0,0,0,0.06);transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;position: relative;break-inside: avoid;margin-bottom: 15px;border-radius: 8px;overflow: hidden;opacity: 0;animation: fadeInUp 0.5s ease forwards;} @keyframes fadeInUp {from {opacity: 0;transform: translateY(20px);} to {opacity: 1;transform: translateY(0);}} .poster-card:nth-child(1) {animation-delay: 0.05s;} .poster-card:nth-child(2) {animation-delay: 0.1s;} .poster-card:nth-child(3) {animation-delay: 0.15s;} .poster-card:nth-child(4) {animation-delay: 0.2s;} .poster-card:nth-child(5) {animation-delay: 0.25s;} .poster-card:nth-child(6) {animation-delay: 0.3s;} .poster-card:nth-child(7) {animation-delay: 0.35s;} .poster-card:nth-child(8) {animation-delay: 0.4s;} .poster-checkbox {position: absolute;top: 8px;left: 8px;z-index: 10;} .poster-checkbox-input {width: 16px;height: 16px;accent-color: #667eea;} .poster-card:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.1);} .poster-image-wrap {position: relative;width: 100%;background-color: #f8f8f8;overflow: hidden;} .poster-image-wrap.vertical {padding-bottom: 141.4%;} .poster-image-wrap.horizontal {padding-bottom: 70.7%;} .poster-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;opacity: 0;transition: opacity 0.6s ease, transform 0.6s ease;} .poster-image.loaded {opacity: 1;transform: scale(1);} .poster-image[data-src] {opacity: 0.3;transform: scale(0.95);} .image-loader {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px;height: 40px;border: 3px solid rgba(255, 255, 255, 0.3);border-radius: 50%;border-top-color: #667eea;animation: spin 1s ease-in-out infinite;z-index: 5;} @keyframes spin {to {transform: translate(-50%, -50%) rotate(360deg);}} .poster-image.loaded + .image-loader {display: none;} .poster-info {padding: 12px;} .poster-code-row {display: flex;align-items: center;gap: 4px;flex-wrap: nowrap;} .poster-tag {background-color: #667eea;color: #fff;padding: 3px 6px;border-radius: 4px;font-size: 12px;cursor: pointer;border: none;flex-shrink: 1;min-width: 0;text-align: center;touch-action: manipulation;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .poster-category {font-size: 12px;font-weight: 600;color: #667eea;padding: 3px 6px;background-color: #f0f4ff;border-radius: 4px;text-align: center;border: 1px solid #e0e7ff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 70px;flex-shrink: 0;min-width: 40px;} .poster-code {font-size: 14px;font-weight: 600;color: #333;text-align: right;flex-shrink: 0;} .preview-btn {position: absolute;top: 12px;right: 12px;background-color: rgba(102, 126, 234, 0.8);color: white;border: none;border-radius: 6px;padding: 8px 16px;font-size: 12px;cursor: pointer;z-index: 10;transition: background-color 0.2s ease;min-width: 70px;text-align: center;touch-action: manipulation;} .preview-btn:hover {background-color: rgba(102, 126, 234, 1);} .preview-modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);z-index: 1000;overflow: auto;} .preview-content {position: relative;margin: 10% auto;max-width: 90%;max-height: 80%;} .preview-image {display: block;max-width: 100%;max-height: 80vh;margin: 0 auto;} .preview-close {position: absolute;top: -40px;right: 0;color: white;font-size: 30px;font-weight: bold;cursor: pointer;} .preview-close:hover {color: #667eea;} .preview-tabs {display: flex;justify-content: center;gap: 10px;margin-bottom: 15px;} .preview-tab {padding: 8px 20px;background-color: rgba(255, 255, 255, 0.2);color: white;border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 4px;cursor: pointer;transition: all 0.3s ease;font-size: 14px;} .preview-tab:hover {background-color: rgba(255, 255, 255, 0.3);} .preview-tab.active {background-color: #667eea;border-color: #667eea;} .copy-all-btn {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: #fff;padding: 8px 16px;border-radius: 6px;font-size: 14px;cursor: pointer;border: none;box-shadow: 0 2px 4px rgba(0,0,0,0.1);} .copy-all-btn:hover {opacity: 0.9;} .copy-selected-btn {background-color: #4CAF50;color: #fff;padding: 12px 20px;border-radius: 8px;font-size: 15px;cursor: pointer;border: none;box-shadow: 0 2px 4px rgba(0,0,0,0.1);min-width: 120px;text-align: center;touch-action: manipulation;} .copy-selected-btn:hover:not(:disabled) {opacity: 0.9;} .copy-selected-btn:disabled {background-color: #ccc;cursor: not-allowed;} .floating-copy-btn {position: fixed;bottom: 120px;right: 20px;z-index: 999;box-shadow: 0 4px 12px rgba(0,0,0,0.15);border-radius: 25px;overflow: hidden;} .back-to-top {position: fixed;bottom: 200px;right: 20px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;border: none;border-radius: 50%;width: 50px;height: 50px;font-size: 20px;cursor: pointer;z-index: 999;box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);transition: all 0.3s ease;opacity: 0;visibility: hidden;display: flex;align-items: center;justify-content: center;touch-action: manipulation;} .back-to-top.show {opacity: 1;visibility: visible;} .back-to-top:hover {transform: translateY(-5px);box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);} .highlight {background-color: #fff3cd;color: #856404;padding: 0 2px;border-radius: 2px;font-weight: bold;} @media (max-width: 768px) {.floating-copy-btn {bottom: 140px;}} .floating-copy-btn .copy-selected-btn {border-radius: 25px;padding: 12px 20px;font-size: 14px;font-weight: 600;white-space: nowrap;} .pagination {display: flex;justify-content: center;align-items: center;gap: 8px;padding: 20px;flex-wrap: wrap;} .page-btn {display: inline-block;padding: 8px 14px;background: #fff;border: 1px solid #ddd;border-radius: 4px;color: #333;text-decoration: none;font-size: 14px;transition: all 0.3s;} .page-btn:hover {background: #667eea;color: #fff;border-color: #667eea;} .page-current {background: #667eea;color: #fff;border-color: #667eea;cursor: default;} .page-ellipsis {color: #999;padding: 0 5px;} .page-info {color: #666;font-size: 14px;margin-left: 10px;} .bottom-filter {position: fixed;bottom: 0;left: 0;right: 0;background-color: #fff;padding: 10px 15px 30px;box-shadow: 0 -2px 10px rgba(0,0,0,0.1);z-index: 100;} .filter-select {padding: 8px 12px;border: 1px solid #e0e0e0;border-radius: 20px;font-size: 14px;color: #333;background-color: #f5f5f5;outline: none;cursor: pointer;min-width: 100px;position: relative;} .filter-select option {background-color: #fff;color: #333;padding: 8px;} .filter-row {display: flex;align-items: center;gap: 15px;max-width: 1200px;margin: 0 auto;} .filter-group {display: flex;align-items: center;gap: 8px;} .filter-label {font-size: 14px;color: #666;white-space: nowrap;} .filter-select:focus {border-color: #667eea;} .loading-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.8);display: flex;align-items: center;justify-content: center;z-index: 9999;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;} .loading-overlay.active {opacity: 1;visibility: visible;} .loading-spinner {width: 40px;height: 40px;border: 3px solid #f3f3f3;border-top: 3px solid #667eea;border-radius: 50%;animation: spin 1s linear infinite;} .custom-select {position: relative;display: inline-block;min-width: 100px;cursor: pointer;} .select-value {display: inline-block;padding: 8px 12px;border: 1px solid #e0e0e0;border-radius: 20px;font-size: 14px;color: #333;background-color: #f5f5f5;min-width: 80px;text-align: center;} .select-arrow {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);font-size: 12px;color: #666;transition: transform 0.2s ease;} .custom-select:hover .select-arrow {color: #667eea;} .custom-select.active .select-arrow {transform: translateY(-50%) rotate(180deg);} .select-dropdown {position: absolute;bottom: 100%;left: 0;right: 0;background-color: #fff;border: 1px solid #e0e0e0;border-radius: 8px;box-shadow: 0 -2px 10px rgba(0,0,0,0.1);z-index: 1000;margin-bottom: 8px;max-height: 200px;overflow-y: auto;} .dropdown-option {padding: 10px 15px;font-size: 14px;color: #333;cursor: pointer;transition: background-color 0.2s ease;} .dropdown-option:hover {background-color: #f5f5f5;} .dropdown-option.selected {background-color: #667eea;color: #fff;} .select-dropdown {display: none;} .select-dropdown.show {display: block;} .reset-btn {margin-left: auto;padding: 12px 20px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: #fff;border: none;border-radius: 25px;font-size: 15px;cursor: pointer;white-space: nowrap;min-width: 100px;text-align: center;touch-action: manipulation;} .reset-btn:hover {opacity: 0.9;} .empty-state {display: flex;justify-content: center;align-items: center;min-height: 60vh;padding: 40px 20px;width: 100%;} .empty-state-content {text-align: center;max-width: 300px;width: 100%;display: flex;flex-direction: column;align-items: center;column-span: all;} .empty-state-icon {margin-bottom: 30px;position: relative;display: flex;justify-content: center;align-items: center;} .empty-state-icon svg {width: 120px;height: 120px;opacity: 0.5;} .empty-state-decorations {position: absolute;top: 0;left: 0;right: 0;bottom: 0;pointer-events: none;} .decoration {position: absolute;background-color: #E0E0E0;opacity: 0.5;} .decoration.dot {width: 8px;height: 8px;border-radius: 50%;top: -15px;left: 50%;transform: translateX(-50%);} .decoration.plus {width: 12px;height: 12px;top: 50%;right: -20px;transform: translateY(-50%);position: relative;} .decoration.plus::before,.decoration.plus::after {content: '';position: absolute;background-color: #E0E0E0;} .decoration.plus::before {width: 100%;height: 2px;top: 50%;left: 0;transform: translateY(-50%);} .decoration.plus::after {width: 2px;height: 100%;top: 0;left: 50%;transform: translateX(-50%);} .decoration.circle {width: 6px;height: 6px;border-radius: 50%;bottom: -10px;left: 30%;} .empty-state-text {font-size: 16px;color: #999;margin-bottom: 30px;line-height: 1.5;} .empty-state-buttons {display: flex;flex-direction: column;gap: 10px;max-width: 200px;margin: 0 auto;} .empty-state-btn {padding: 12px 20px;border: none;border-radius: 6px;font-size: 14px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;width: 100%;} .empty-state-btn.primary {background-color: #667eea;color: white;} .empty-state-btn.secondary {background-color: #f8f9fa;color: #667eea;border: 1px solid #667eea;} .empty-state-btn:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);} @media (max-width: 768px) {.empty-state-content {padding: 20px;} .empty-state-icon svg {width: 100px;height: 100px;} .empty-state-text {font-size: 14px;margin-bottom: 20px;} .empty-state-btn {padding: 10px 16px;font-size: 13px;} .poster-info {padding: 8px;} .poster-code-row {gap: 2px;} .poster-tag {font-size: 10px;padding: 2px 4px;} .poster-category {font-size: 10px;padding: 2px 4px;max-width: 50px;min-width: 30px;}} @media (max-width: 375px) {.poster-tag {font-size: 9px;padding: 2px 3px;} .poster-category {font-size: 9px;padding: 2px 3px;max-width: 40px;min-width: 25px;}} @media (min-width: 768px) {.poster-grid {column-count: 3;} .content {max-width: 1200px;margin: 0 auto;}} @media (min-width: 1024px) {.poster-grid {column-count: 4;}} @media (min-width: 1400px) {.poster-grid {column-count: 5;}}