/* ── CSS 변수 정의 ── */ :root[data-theme="light"] { --bg-primary: #f5f7fa; --bg-card: #ffffff; --bg-navbar: #ffffff; --text-primary: #1a1a2e; --text-muted: #6b7280; --border-color: #e5e7eb; --shadow: 0 4px 24px rgba(0,0,0,.08); --toggle-bg: #e0e7ff; --toggle-hover: #c7d2fe; --icon-color: #f59e0b; --accent: #6366f1; } :root[data-theme="dark"] { --bg-primary: #0f172a; --bg-card: #1e293b; --bg-navbar: #1e293b; --text-primary: #f1f5f9; --text-muted: #94a3b8; --border-color: #334155; --shadow: 0 4px 24px rgba(0,0,0,.4); --toggle-bg: #1e3a5f; --toggle-hover: #1d4ed8; --icon-color: #818cf8; --accent: #818cf8; } html, body, footer { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; transition: background-color .35s ease, color .35s ease; } /* ── 네비게이션 바 ── */ .navbar { background-color: var(--bg-navbar) !important; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow); transition: background-color .35s ease, border-color .35s ease; } .navbar-brand .navbar-item { color: var(--text-primary) !important; font-weight: 700; font-size: 1.1rem; } /* ── 서치 창 ── */ .search-box { display: flex; align-items: center; border-radius: 10px; overflow: hidden; border: 2px solid var(--border-color); transition: border-color .25s ease, box-shadow .25s ease; } .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .search-box input { width: 220px; padding: .45rem .85rem; border: none; outline: none; background: var(--bg-card); color: var(--text-primary); font-size: .9rem; transition: background-color .35s ease, color .35s ease; } .search-box input::placeholder { color: var(--text-muted); } .search-box button { padding: .45rem .85rem; background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: .9rem; transition: filter .2s ease, transform .1s ease; } .search-box button:hover { filter: brightness(1.15); } .search-box button:active { transform: scale(.95); } /* ── 테마 토글 버튼 ── */ #theme-toggle { width: 46px; height: 46px; border-radius: 50%; background-color: var(--toggle-bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--icon-color); transition: background-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease; position: relative; overflow: hidden; } #theme-toggle:hover { background-color: var(--toggle-hover); transform: scale(1.1) rotate(15deg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--icon-color) 15%, transparent); } #theme-toggle:active { transform: scale(.95); } #theme-toggle .icon-sun, #theme-toggle .icon-moon { position: absolute; transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); } [data-theme="light"] #theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] #theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.5); } [data-theme="dark"] #theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.5); } [data-theme="dark"] #theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } /* ── 카드 ── */ .card { background-color: var(--bg-card) !important; border: 1px solid var(--border-color); box-shadow: var(--shadow); border-radius: 16px; transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; } .card-content { color: var(--text-primary) !important; } .card-header { border-bottom: 1px solid var(--border-color); } .card-header-title { color: var(--text-primary) !important; } .title, .subtitle { color: var(--text-primary) !important; transition: color .35s ease; } p, span { color: var(--text-primary); transition: color .35s ease; } .section { background-color: var(--bg-primary) !important; transition: background-color .35s ease; } /* ── 태그 ── */ .tag.is-accent { background-color: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } /* ── 컬러 팔레트 스와치 ── */ .swatch { width: 28px; height: 28px; border-radius: 6px; display: inline-block; } /* ── 검색 결과 ── */ #search-results { max-width: 600px; margin: 0 auto; } .result-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); margin-bottom: .75rem; transition: background-color .35s ease, border-color .35s ease, transform .15s ease, box-shadow .15s ease; } .result-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); } .result-icon { font-size: 1.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); flex-shrink: 0; } .result-title { font-weight: 600; color: var(--text-primary); margin-bottom: .2rem; } .result-desc { font-size: .85rem; color: var(--text-muted); } .result-tag { font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-left: .4rem; } .no-result { text-align: center; padding: 2rem; color: var(--text-muted); font-size: .95rem; } /* ── 모드 배지 ── */ .mode-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; transition: all .35s ease; } [data-theme="light"] .mode-badge { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } [data-theme="dark"] .mode-badge { background: #1e1b4b; color: #a5b4fc; border: 1px solid #3730a3; } .box { background-color: var(--bg-card); color: var(--text-primary) }