/* ============================================
   improved.css — 보조 스타일 (흰/검 테마)
   ============================================ */

/* 전역 transition — background-color만 짧게 (color-box 업데이트 방해 방지) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ─── Button ripple (shimmer) ─── */
button {
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    transition: left 0.3s ease;
    pointer-events: none;
}

button:hover::before {
    left: 100%;
}

/* ─── Focus states ─── */
button:focus-visible,
input:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* ─── h2 — 흰/검 테마에 맞게 ─── */
h2 {
    color: #111;
}

/* ─── Tab active animation ─── */
.nav-tab.active {
    animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ─── Color box glow overlay ─── */
.color-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

/* ─── Similar color item border ─── */
.similar-color-item {
    border: 2px solid transparent;
}

.similar-color-item:hover {
    border-color: rgba(0, 0, 0, 0.2);
}

/* ─── Search result hover ─── */
.search-result-item {
    border-left: 3px solid #111;
}

/* ─── Palette colors ─── */
.palette-color {
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.palette-color:hover {
    border-color: rgba(255, 255, 255, 0.9);
}

/* ─── Color box appear animation ─── */
.color-box {
    animation: colorBoxAppear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes colorBoxAppear {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Tab content fade ─── */
.tab-content.active {
    animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ─── Inspiration palette fade ─── */
.inspiration-palette {
    animation: fadeInColors 0.4s ease-out;
}

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

/* ─── Color library entry animation ─── */
.color-library-item {
    animation: fadeInItem 0.3s ease-out;
}

/* ─── Copy button flash ─── */
@keyframes copyFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    50%       { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12); }
}

/* ─── Mobile: disable hover transforms ─── */
@media (hover: none) and (pointer: coarse) {
    .btn-reset:hover,
    .btn-copy:hover,
    .similar-color-item:hover,
    .color-library-item:hover .color-library-box {
        transform: none;
    }

    button {
        min-height: 44px;
    }

    .similar-color-item {
        min-height: 48px;
        min-width: 48px;
    }
}

/* ═══════════════════════════════════════════════
   Premium Features UI
═══════════════════════════════════════════════ */

/* Icons */
.icon-svg { width: 18px; height: 18px; fill: currentColor; }
.tab-icon { width: 16px; height: 16px; fill: currentColor; margin-right: 4px; }
.nav-tab { display: flex; align-items: center; justify-content: center; gap: 4px; }

/* Nav Action & Volume Slider */
.nav-actions { margin-left: auto; margin-right: 16px; display: flex; align-items: center; gap: 8px; background: #f8f8fa; padding: 4px 12px; border-radius: 20px; }
.volume-slider { width: 60px; height: 4px; -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 2px; outline: none; transition: width 0.3s; cursor: pointer; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: #111; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.icon-indicator { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #444; }

/* History Tray */
.history-tray {
    display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; background: #fff; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.history-tray::-webkit-scrollbar { display: none; }
.history-item {
    width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); flex-shrink: 0; cursor: pointer; transition: transform 0.2s;
}
.history-item:hover { transform: translateY(-3px); }

/* Fav Row & Accessibility */
.name-fav-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.color-name-display { margin-bottom: 0 !important; flex: 1; }
.fav-btn {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid #eee; background: #fff; color: #ccc; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.2s;
}
.fav-btn.active { color: #FF3B30; }
.fav-btn:hover { transform: scale(1.1); }

.accessibility-preview {
    position: absolute; bottom: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 8px 16px; backdrop-filter: blur(8px); flex-wrap: wrap; gap: 10px; border: 1px solid rgba(255,255,255,0.1);
}
.preview-text {
    font-size: 15px; font-weight: 700; letter-spacing: -0.5px;
}
.a11y-badge {
    font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 6px; text-transform: uppercase; background: red; color: white; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; transform: translateY(-1px);
}
.a11y-pass { background: #34C759; }
.a11y-fail { background: #FF3B30; }

/* Image Extractor & Export */
.btn-image { display: inline-flex; align-items: center; gap: 6px; background: #f0f0f5; color: #111; cursor: pointer; padding: 8px 14px; margin-left: 10px; }
.extracted-palette { display: flex; gap: 6px; margin: 12px 0 20px; padding: 12px; background: #f8f8fa; border-radius: 12px; }
.ext-swatch { flex: 1; height: 36px; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.2s; }
.ext-swatch:hover { transform: scale(1.1); }
.btn-export { background: #111; color: #fff; display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; margin-top: 12px; }

/* My Palettes Grid */
.my-palettes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; margin-top: 20px; }
.my-pal-card { display: flex; flex-direction: column; background: #fff; padding: 12px; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.2s; }
.my-pal-card:hover { transform: translateY(-4px); }
.my-pal-color { height: 90px; border-radius: 12px; margin-bottom: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.my-pal-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.my-pal-hex { font-size: 11px; color: #888; font-family: monospace; }
.my-pal-empty { grid-column: 1 / -1; text-align: center; color: #999; padding: 40px 0; font-size: 14px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-content { background: #fff; padding: 32px; border-radius: 24px; min-width: 320px; max-width: 90%; text-align: center; transform: scale(0.9); transition: transform 0.3s; box-shadow: 0 10px 40px rgba(0,0,0,0.2); max-height: 90dvh; overflow-y: auto; }
.modal-overlay.show .modal-content { transform: scale(1); }
.modal-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: #111; }
.modal-desc { font-size: 13px; color: #666; margin-bottom: 24px; }
.export-block { text-align: left; margin-bottom: 20px; background: #f8f8fa; padding: 16px; border-radius: 16px; }
.export-block h4 { font-size: 12px; color: #444; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; }
.export-block pre { background: #111; color: #4ade80; padding: 12px; border-radius: 8px; font-size: 12px; font-family: monospace; overflow-x: auto; margin-bottom: 12px; line-height: 1.4; }
.btn-close-modal { background: #eee; color: #111; width: 100%; }

/* Mobile fixes for new UI */
@media (max-width: 768px) {
    .nav-tabs { max-width: none; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-bottom: 5px; }
    .nav-tab span { font-size: 11px; }
    .tab-icon { width: 14px; height: 14px; margin-right: 3px; }
    .history-tray { margin: 0 0 16px; padding: 10px 12px; }
    .btn-image { font-size: 12px; padding: 6px 10px; margin-left: auto; }
    .code-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .a11y-badge { padding: 2px 4px; font-size: 9px; }
    .preview-text { font-size: 12px; }
}