/* ============================================================================= * 무케 서치 — 공개 검색 프런트 (muhque.com 임베드용 정적 CSS) * ----------------------------------------------------------------------------- * 이 파일은 templates/designkit.md(Yave Design System v5)의 @theme 토큰을 그대로 * CSS 커스텀 프로퍼티로 옮긴 것이다. 값은 designkit.md가 정본이며, 임의 색/spacing/ * radius/shadow 를 새로 만들지 않는다. 빌드 단계 없이 카페24에 바로 올릴 수 있도록 * Tailwind 대신 토큰 기반 순수 CSS로 작성했다(= 동일 토큰, 동일 스펙). * * ── 완전 격리(임베드 호스트와 한 군데도 겹치지 않게) ───────────────────────── * · 모든 클래스/키프레임/유틸은 `muhai-` 네임스페이스 (예: .muhai-card, @keyframes muhai-spin). * · 모든 디자인 토큰은 `--muhai-*` CSS 변수이며 `:root` 가 아니라 `.muhai-root` 에 둔다. * · 전역 element/리셋 셀렉터(*, html, body, img, button, input, a, [data-lucide]) 없음 — * 전부 `.muhai-root` 하위로 스코프된다. (`.muhai-page` 만 단독 페이지 전용.) * ⇒ 이 스타일시트는 호스트 페이지의 어떤 셀렉터·변수·클래스와도 충돌하지 않는다. * * 리스킨 지점: --muhai-color-yave-* (브랜드 색)만 프로젝트 브랜드에 맞게 교체 가능 * (designkit.md 규칙). 나머지 토큰은 변경 금지. * ========================================================================== */ /* 필수 외부 폰트 — designkit.md "필수 외부 자산": Pretendard + Inter (대체 금지) */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); .muhai-root { /* Brand Colors (yave-50~950) — 리스킨 허용 지점 */ --muhai-color-yave-50: #fdf2f5; --muhai-color-yave-100: #fce7ec; --muhai-color-yave-200: #f8cdd9; --muhai-color-yave-300: #f2a3ba; --muhai-color-yave-400: #e96f92; --muhai-color-yave-500: #d8426e; --muhai-color-yave-600: #af1c46; --muhai-color-yave-700: #8f1639; --muhai-color-yave-800: #781631; --muhai-color-yave-900: #66172e; --muhai-color-yave-950: #3c0717; /* Surface (Toss 스타일: 깨끗한 화이트 카드 + 옅은 그레이 배경) */ --muhai-color-surface: #ffffff; --muhai-color-surface-subtle: #f4f5f7; --muhai-color-surface-muted: #f2f4f6; /* Ink (Text) — Toss 그레이 스케일 */ --muhai-color-ink: #191f28; --muhai-color-ink-body: #333d4b; --muhai-color-ink-muted: #6b7684; --muhai-color-ink-subtle: #8b95a1; /* Border */ --muhai-color-border: #e5e8eb; /* Semantic */ --muhai-color-error: #991b1b; --muhai-color-error-bg: #fef2f2; --muhai-color-error-border: #fecaca; --muhai-color-success: #065f46; --muhai-color-success-bg: #ecfdf5; --muhai-color-success-border: #a7f3d0; --muhai-color-warning: #92400e; --muhai-color-warning-bg: #fffbeb; --muhai-color-warning-border: #fde68a; --muhai-color-info: #075985; --muhai-color-info-bg: #f0f9ff; --muhai-color-info-border: #bae6fd; /* Ink on Dark */ --muhai-color-ink-on-dark: #ffffff; --muhai-color-ink-body-on-dark: rgba(255, 255, 255, 0.80); --muhai-color-ink-muted-on-dark: rgba(255, 255, 255, 0.50); /* Spacing */ --muhai-spacing-yave-1: 4px; --muhai-spacing-yave-2: 8px; --muhai-spacing-yave-3: 12px; --muhai-spacing-yave-4: 16px; --muhai-spacing-yave-5: 20px; --muhai-spacing-yave-6: 24px; --muhai-spacing-yave-7: 28px; --muhai-spacing-yave-8: 32px; --muhai-spacing-yave-9: 36px; --muhai-spacing-yave-10: 40px; --muhai-spacing-yave-12: 48px; --muhai-spacing-yave-14: 56px; --muhai-spacing-yave-16: 64px; --muhai-spacing-yave-20: 80px; --muhai-spacing-yave-24: 96px; /* Radius (Toss: 부드러운 라운드) */ --muhai-radius-card: 20px; --muhai-radius-btn: 14px; --muhai-radius-full: 20px; /* Shadow (Toss: 절제된 중립 그림자 — 컬러 글로우 대신) */ --muhai-shadow-soft: 0 2px 8px -1px rgba(17, 24, 39, 0.06); --muhai-shadow-lift: 0 8px 24px -6px rgba(17, 24, 39, 0.12); --muhai-shadow-glow: 0 0 0 4px rgba(175, 28, 70, 0.12); /* Font */ --muhai-font-sans: 'Pretendard Variable', 'Pretendard', 'Inter', system-ui, sans-serif; /* Typography — 모바일 기본값 (designkit 타이포 스케일) */ --muhai-text-display: 32px; --muhai-text-display-lh: 1.1; --muhai-text-display-ls: -0.02em; --muhai-text-display-fw: 800; --muhai-text-h1: 28px; --muhai-text-h1-lh: 1.25; --muhai-text-h1-ls: -0.015em; --muhai-text-h1-fw: 700; --muhai-text-h2: 22px; --muhai-text-h2-lh: 1.25; --muhai-text-h2-ls: -0.01em; --muhai-text-h2-fw: 700; --muhai-text-h3: 18px; --muhai-text-h3-lh: 1.3; --muhai-text-h3-ls: -0.005em; --muhai-text-h3-fw: 600; --muhai-text-body-strong: 15px; --muhai-text-body-strong-lh: 1.6; --muhai-text-body-strong-fw: 600; --muhai-text-body: 15px; --muhai-text-body-lh: 1.6; --muhai-text-body-fw: 400; --muhai-text-caption: 14px; --muhai-text-caption-lh: 1.5; --muhai-text-caption-ls: 0.01em; --muhai-text-caption-fw: 500; --muhai-text-data-md: 20px; --muhai-text-data-md-lh: 1.4; --muhai-text-data-md-fw: 500; --muhai-text-data-sm: 15px; --muhai-text-data-sm-lh: 1.4; --muhai-text-data-sm-fw: 500; /* Transition */ --muhai-duration-fast: 150ms; --muhai-duration-normal: 200ms; --muhai-duration-smooth: 300ms; --muhai-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* Z-index */ --muhai-z-sticky: 10; --muhai-z-header: 100; --muhai-z-dropdown: 200; --muhai-z-overlay: 300; --muhai-z-modal: 400; --muhai-z-toast: 500; } /* 데스크톱 타이포(sm: 640px+) — designkit 모바일-first */ @media (width >= 640px) { .muhai-root { --muhai-text-display: 52px; --muhai-text-display-ls: -0.025em; --muhai-text-h1: 36px; --muhai-text-h1-ls: -0.02em; --muhai-text-h2: 24px; --muhai-text-h2-ls: -0.015em; --muhai-text-h3: 20px; --muhai-text-h3-ls: -0.01em; --muhai-text-body-strong: 16px; --muhai-text-body: 16px; --muhai-text-data-md: 24px; --muhai-text-data-sm: 16px; } } /* ===== Reset / Base ===== */ .muhai-root, .muhai-root *, .muhai-root *::before, .muhai-root *::after { box-sizing: border-box; } .muhai-page { margin: 0; min-height: 100vh; } /* 단독 페이지() 전용 — 임베드 시 호스트 body엔 미적용 */ .muhai-root { font-family: var(--muhai-font-sans); font-size: var(--muhai-text-body); line-height: var(--muhai-text-body-lh); color: var(--muhai-color-ink-body); background: var(--muhai-color-surface); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .muhai-root img { max-width: 100%; display: block; } .muhai-root button { font-family: inherit; cursor: pointer; } .muhai-root input { font-family: inherit; } .muhai-root a { color: var(--muhai-color-yave-600); text-decoration: none; } .muhai-root a:hover { color: var(--muhai-color-yave-700); text-decoration: underline; } .muhai-root a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--muhai-color-yave-200); border-radius: var(--muhai-radius-btn); } .muhai-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .muhai-hidden { display: none !important; } /* ===== Layout container (designkit: max-w-1280, px-yave-4 / sm:px-yave-6) ===== */ .muhai-container { max-width: 1280px; margin-inline: auto; padding-inline: var(--muhai-spacing-yave-4); } @media (width >= 640px) { .muhai-container { padding-inline: var(--muhai-spacing-yave-6); } } /* 헤더 없음(임베드) — 히어로가 최상단. 넉넉한 여백(Toss) */ .muhai-main { display: block; } .muhai-hero { position: relative; z-index: 20; /* 검색 드롭다운(자동완성/최근검색)이 아래 결과 카드에 가리지 않도록 */ padding-top: var(--muhai-spacing-yave-12); padding-bottom: var(--muhai-spacing-yave-8); } @media (width >= 640px) { .muhai-hero { padding-top: var(--muhai-spacing-yave-20); padding-bottom: var(--muhai-spacing-yave-12); } } /* ===== Hero / Search ===== */ .muhai-hero-inner { text-align: center; max-width: 640px; margin-inline: auto; } .muhai-hero h1 { margin: 0 0 var(--muhai-spacing-yave-3); font-size: var(--muhai-text-display); line-height: var(--muhai-text-display-lh); letter-spacing: var(--muhai-text-display-ls); font-weight: var(--muhai-text-display-fw); color: var(--muhai-color-ink); } .muhai-hero-sub { margin: 0 auto var(--muhai-spacing-yave-8); font-size: var(--muhai-text-body); color: var(--muhai-color-ink-muted); } /* 검색창 (화이트 + 보더 + 소프트 섀도 = 떠 있는 느낌, 회색 채움 제거) */ .muhai-searchbar { position: relative; max-width: 600px; margin-inline: auto; } .muhai-searchbox { display: flex; align-items: center; gap: var(--muhai-spacing-yave-3); height: 58px; padding-inline: var(--muhai-spacing-yave-5) var(--muhai-spacing-yave-2); background: var(--muhai-color-surface); border: 1.5px solid var(--muhai-color-border); border-radius: var(--muhai-radius-full); box-shadow: var(--muhai-shadow-soft); transition: border-color var(--muhai-duration-fast) ease-out, box-shadow var(--muhai-duration-fast) ease-out; } .muhai-searchbox:focus-within { border-color: var(--muhai-color-yave-600); box-shadow: 0 0 0 4px rgba(175, 28, 70, 0.10); } .muhai-searchbox-ico { display: inline-flex; flex: none; color: var(--muhai-color-ink-subtle); } .muhai-searchbox-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: var(--muhai-text-body-strong); color: var(--muhai-color-ink); } .muhai-searchbox-input::placeholder { color: var(--muhai-color-ink-subtle); } .muhai-searchbox-submit { flex: none; width: 42px; height: 42px; border: 0; border-radius: var(--muhai-radius-full); background: var(--muhai-color-yave-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background var(--muhai-duration-fast) ease-out, transform var(--muhai-duration-fast) ease-out; } .muhai-searchbox-submit:hover { background: var(--muhai-color-yave-700); } .muhai-searchbox-submit:active { transform: scale(0.94); } .muhai-searchbox-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--muhai-color-yave-200); } /* ===== Button (designkit Button specs + 상호작용 상태) ===== */ .muhai-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--muhai-spacing-yave-2); border: 1px solid transparent; border-radius: var(--muhai-radius-btn); font-weight: 600; white-space: nowrap; transition: background var(--muhai-duration-fast) ease-out, color var(--muhai-duration-fast) ease-out, box-shadow var(--muhai-duration-fast) ease-out, transform var(--muhai-duration-fast) ease-out; } .muhai-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--muhai-color-yave-200); } .muhai-btn:disabled { opacity: 0.6; pointer-events: none; } .muhai-btn-lg { height: var(--muhai-spacing-yave-14); padding-inline: var(--muhai-spacing-yave-6); font-size: var(--muhai-text-body-strong); } .muhai-btn-md { height: var(--muhai-spacing-yave-12); padding-inline: var(--muhai-spacing-yave-5); font-size: var(--muhai-text-body-strong); } .muhai-btn-sm { height: var(--muhai-spacing-yave-10); padding-inline: var(--muhai-spacing-yave-3); font-size: var(--muhai-text-caption); } .muhai-btn-primary { background: var(--muhai-color-yave-600); color: #fff; box-shadow: var(--muhai-shadow-soft); } .muhai-btn-primary:hover { background: var(--muhai-color-yave-700); box-shadow: var(--muhai-shadow-lift); transform: translateY(-2px); } .muhai-btn-primary:active { background: var(--muhai-color-yave-900); transform: scale(0.97); } .muhai-btn-outline { background: transparent; border-color: var(--muhai-color-border); color: var(--muhai-color-ink-body); } .muhai-btn-outline:hover { border-color: var(--muhai-color-ink-muted); background: var(--muhai-color-surface); } .muhai-btn-ghost { background: transparent; color: var(--muhai-color-ink-body); } .muhai-btn-ghost:hover { background: var(--muhai-color-surface-muted); } /* 버튼 로딩 스피너 (designkit) */ .muhai-spinner { width: 22px; height: 22px; border-radius: var(--muhai-radius-full); border: 2px solid currentColor; border-top-color: transparent; animation: muhai-spin 0.7s linear infinite; } @keyframes muhai-spin { to { transform: rotate(360deg); } } /* ===== 자동완성 / 최근검색 드롭다운 (designkit 드롭다운 토큰) ===== */ .muhai-suggest { position: absolute; left: 0; right: 0; top: calc(100% + var(--muhai-spacing-yave-2)); background: var(--muhai-color-surface); box-shadow: var(--muhai-shadow-lift); border-radius: var(--muhai-radius-card); z-index: var(--muhai-z-dropdown); padding: var(--muhai-spacing-yave-2); overflow: hidden; text-align: left; } .muhai-suggest-label { display: flex; align-items: center; gap: var(--muhai-spacing-yave-2); padding: var(--muhai-spacing-yave-2) var(--muhai-spacing-yave-3); font-size: var(--muhai-text-caption); color: var(--muhai-color-ink-muted); font-weight: 500; } .muhai-suggest-item { display: flex; align-items: center; gap: var(--muhai-spacing-yave-3); width: 100%; padding: var(--muhai-spacing-yave-3); border: 0; background: transparent; text-align: left; border-radius: var(--muhai-radius-btn); font-size: var(--muhai-text-body-strong); color: var(--muhai-color-ink-body); } .muhai-suggest-item .muhai-suggest-ico { color: var(--muhai-color-ink-subtle); flex: none; } .muhai-suggest-item:hover, .muhai-suggest-item.muhai-active { background: var(--muhai-color-surface-muted); color: var(--muhai-color-ink); } .muhai-suggest-item mark { background: transparent; color: var(--muhai-color-yave-700); font-weight: 700; } /* ===== Controls (정렬 / 가격 필터) ===== */ .muhai-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--muhai-spacing-yave-3); margin-bottom: var(--muhai-spacing-yave-6); } .muhai-result-count { font-size: var(--muhai-text-body-strong); font-weight: 600; color: var(--muhai-color-ink); } .muhai-result-count strong { color: var(--muhai-color-yave-600); font-weight: 700; } .muhai-controls-right { display: flex; align-items: center; gap: var(--muhai-spacing-yave-2); } /* 정렬 세그먼트 */ .muhai-segment { display: inline-flex; padding: var(--muhai-spacing-yave-1); background: var(--muhai-color-surface-muted); border: 1px solid var(--muhai-color-border); border-radius: var(--muhai-radius-btn); } .muhai-segment button { height: var(--muhai-spacing-yave-8); padding-inline: var(--muhai-spacing-yave-3); border: 0; background: transparent; border-radius: calc(var(--muhai-radius-btn) - var(--muhai-spacing-yave-1)); font-size: var(--muhai-text-caption); font-weight: 600; color: var(--muhai-color-ink-muted); transition: background var(--muhai-duration-fast) ease-out, color var(--muhai-duration-fast) ease-out; } .muhai-segment button[aria-pressed="true"] { background: var(--muhai-color-surface); color: var(--muhai-color-yave-700); box-shadow: var(--muhai-shadow-soft); } /* 가격 필터 패널 */ /* 가격 필터 — 한 줄 컴팩트(회색 패널 제거, 화이트 인풋) */ .muhai-filter-panel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--muhai-spacing-yave-2); margin-bottom: var(--muhai-spacing-yave-5); } .muhai-filter-panel .muhai-num { height: var(--muhai-spacing-yave-10); width: 116px; padding-inline: var(--muhai-spacing-yave-3); font-size: var(--muhai-text-caption); color: var(--muhai-color-ink); background: var(--muhai-color-surface); border: 1px solid var(--muhai-color-border); border-radius: var(--muhai-radius-btn); } .muhai-filter-panel .muhai-num:focus { outline: none; border-color: var(--muhai-color-yave-600); box-shadow: 0 0 0 3px rgba(175, 28, 70, 0.12); } .muhai-filter-sep { color: var(--muhai-color-ink-subtle); font-size: var(--muhai-text-caption); padding-inline: var(--muhai-spacing-yave-1); } /* ===== 결과 그리드 + 상품 카드 ===== */ .muhai-results { padding-bottom: var(--muhai-spacing-yave-16); } .muhai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--muhai-spacing-yave-3); } @media (width >= 640px) { .muhai-grid { grid-template-columns: repeat(3, 1fr); gap: var(--muhai-spacing-yave-5); } } @media (width >= 1024px) { .muhai-grid { grid-template-columns: repeat(4, 1fr); } } @media (width >= 1280px) { .muhai-grid { grid-template-columns: repeat(5, 1fr); } } .muhai-card { display: flex; flex-direction: column; background: var(--muhai-color-surface); border: 1px solid var(--muhai-color-border); border-radius: var(--muhai-radius-card); box-shadow: var(--muhai-shadow-soft); overflow: hidden; transition: box-shadow var(--muhai-duration-normal) ease-in-out, transform var(--muhai-duration-normal) ease-in-out, border-color var(--muhai-duration-normal) ease-in-out; } a.muhai-card:hover { text-decoration: none; box-shadow: var(--muhai-shadow-lift); border-color: var(--muhai-color-yave-200); transform: translateY(-2px); } .muhai-card-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--muhai-color-surface-muted); } .muhai-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .muhai-card-body { display: flex; flex-direction: column; gap: var(--muhai-spacing-yave-2); padding: var(--muhai-spacing-yave-4); } .muhai-card-title { margin: 0; font-size: var(--muhai-text-body-strong); line-height: 1.45; font-weight: 600; color: var(--muhai-color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .muhai-card-title b { color: var(--muhai-color-yave-700); font-weight: 700; } .muhai-card-summary { margin: 0; font-size: var(--muhai-text-caption); color: var(--muhai-color-ink-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .muhai-card-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--muhai-spacing-yave-2); padding-top: var(--muhai-spacing-yave-1); } .muhai-card-price { font-size: var(--muhai-text-data-sm); font-weight: 600; color: var(--muhai-color-ink); font-variant-numeric: tabular-nums; } .muhai-card-price.muhai-empty { font-size: var(--muhai-text-caption); font-weight: 500; color: var(--muhai-color-ink-subtle); } .muhai-card-date { font-size: var(--muhai-text-caption); color: var(--muhai-color-ink-subtle); } /* 썸네일 자리표시 (이미지 로드 실패 — 거의 발생 안 함: 백엔드가 이미지 없는 결과 제외) */ .muhai-thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muhai-color-ink-subtle); background: var(--muhai-color-surface-muted); } /* ===== Badge (designkit) ===== */ .muhai-badge { display: inline-flex; align-items: center; gap: var(--muhai-spacing-yave-1); height: 28px; padding-inline: var(--muhai-spacing-yave-3); background: var(--muhai-color-yave-100); color: var(--muhai-color-yave-900); border-radius: var(--muhai-radius-full); font-size: var(--muhai-text-caption); font-weight: 600; } /* ===== Skeleton (designkit, CLS 방지 — 실제 카드와 동일 치수) ===== */ .muhai-skel-card { background: var(--muhai-color-surface); border-radius: var(--muhai-radius-card); box-shadow: var(--muhai-shadow-soft); overflow: hidden; } .muhai-skel-thumb { aspect-ratio: 1 / 1; } .muhai-skel-body { display: flex; flex-direction: column; gap: var(--muhai-spacing-yave-3); padding: var(--muhai-spacing-yave-4); } .muhai-pulse { background: var(--muhai-color-surface-muted); border-radius: var(--muhai-radius-btn); animation: muhai-pulse 1.5s ease-in-out infinite; } .muhai-skel-line { height: 16px; } .muhai-skel-line.muhai-w-70 { width: 70%; } .muhai-skel-line.muhai-w-40 { width: 40%; } @keyframes muhai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ===== 무케 AI 로딩 표시 (검색/추가 로딩 진행 — 사용자가 로딩 중임을 분명히 알게) ===== */ .muhai-loading { display: flex; align-items: center; justify-content: center; gap: var(--muhai-spacing-yave-3); width: max-content; max-width: calc(100% - var(--muhai-spacing-yave-8)); margin: var(--muhai-spacing-yave-8) auto var(--muhai-spacing-yave-4); padding: var(--muhai-spacing-yave-3) var(--muhai-spacing-yave-6); background: var(--muhai-color-surface); border: 1px solid var(--muhai-color-border); border-radius: var(--muhai-radius-full); box-shadow: var(--muhai-shadow-soft); color: var(--muhai-color-ink); font-size: var(--muhai-text-body-strong); font-weight: 600; } /* AI 코어 — 크림슨 그라데이션 링이 회전(도넛 스피너) + 은은한 글로우 */ .muhai-loading-orb { position: relative; width: 24px; height: 24px; flex: none; border-radius: var(--muhai-radius-full); background: conic-gradient(from 0deg, var(--muhai-color-yave-600), var(--muhai-color-yave-300), var(--muhai-color-yave-700), var(--muhai-color-yave-500), var(--muhai-color-yave-600)); box-shadow: 0 0 10px rgba(175, 28, 70, 0.30); animation: muhai-orb-spin 1.3s linear infinite; } .muhai-loading-orb::after { content: ""; position: absolute; inset: 4px; border-radius: var(--muhai-radius-full); background: var(--muhai-color-surface); } @keyframes muhai-orb-spin { to { transform: rotate(360deg); } } /* 텍스트 시머 — 크림슨 하이라이트가 글자를 훑고 지나간다(AI 처리 느낌) */ .muhai-loading-text { display: inline-flex; align-items: center; } #muhai-loading-label { background: linear-gradient(100deg, var(--muhai-color-ink) 25%, var(--muhai-color-yave-500) 50%, var(--muhai-color-ink) 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: muhai-shimmer 1.8s linear infinite; } @keyframes muhai-shimmer { to { background-position: -200% 0; } } .muhai-loading-dots { display: none; } /* 모션 최소화 사용자: 시머 끄고 또렷한 잉크색으로 */ @media (prefers-reduced-motion: reduce) { #muhai-loading-label { -webkit-text-fill-color: var(--muhai-color-ink); color: var(--muhai-color-ink); background: none; } } /* 초기 검색: 크고 또렷한 "무케 AI가 검색하고 있어요" — 대기 시간(상품 페이지 보강)이 납득되도록 중앙에 크게 */ .muhai-loading.muhai-initial { flex-direction: column; gap: var(--muhai-spacing-yave-4); margin: var(--muhai-spacing-yave-16) auto; padding: var(--muhai-spacing-yave-8) var(--muhai-spacing-yave-10); border-radius: var(--muhai-radius-card); font-size: var(--muhai-text-h3); } .muhai-loading.muhai-initial .muhai-loading-orb { width: 34px; height: 34px; } /* ===== 빈/에러/끝 상태 ===== */ .muhai-state { text-align: center; max-width: 480px; margin: var(--muhai-spacing-yave-12) auto; display: flex; flex-direction: column; align-items: center; gap: var(--muhai-spacing-yave-3); } .muhai-state-ico { width: 64px; height: 64px; border-radius: var(--muhai-radius-full); display: flex; align-items: center; justify-content: center; background: var(--muhai-color-surface-muted); color: var(--muhai-color-ink-muted); } .muhai-state h2 { margin: 0; font-size: var(--muhai-text-h3); font-weight: 600; color: var(--muhai-color-ink); } .muhai-state p { margin: 0; font-size: var(--muhai-text-body); color: var(--muhai-color-ink-muted); } .muhai-alert { display: flex; gap: var(--muhai-spacing-yave-3); align-items: flex-start; text-align: left; max-width: 480px; margin: var(--muhai-spacing-yave-10) auto; padding: var(--muhai-spacing-yave-4); background: var(--muhai-color-warning-bg); border: 1px solid var(--muhai-color-warning-border); border-radius: var(--muhai-radius-card); color: var(--muhai-color-warning); } .muhai-alert .muhai-alert-ico { flex: none; } .muhai-noscript { margin-top: calc(64px + var(--muhai-spacing-yave-16)); } .muhai-alert strong { display: block; margin-bottom: var(--muhai-spacing-yave-1); color: var(--muhai-color-warning); } .muhai-alert p { margin: 0; font-size: var(--muhai-text-caption); color: var(--muhai-color-ink-body); } .muhai-end { text-align: center; padding: var(--muhai-spacing-yave-10) 0 var(--muhai-spacing-yave-4); font-size: var(--muhai-text-caption); color: var(--muhai-color-ink-subtle); } .muhai-sentinel { height: 1px; } /* ===== 랜딩 모듈: 인기검색어 칩 / 인기상품 ===== */ .muhai-landing { display: flex; flex-direction: column; gap: var(--muhai-spacing-yave-10); padding-bottom: var(--muhai-spacing-yave-16); } .muhai-section-head { display: flex; align-items: center; gap: var(--muhai-spacing-yave-2); margin-bottom: var(--muhai-spacing-yave-4); } .muhai-section-head h2 { margin: 0; font-size: var(--muhai-text-h3); font-weight: 600; color: var(--muhai-color-ink); } .muhai-section-head .muhai-section-ico { color: var(--muhai-color-yave-600); } .muhai-chips { display: flex; flex-wrap: wrap; gap: var(--muhai-spacing-yave-2); } .muhai-chip { display: inline-flex; align-items: center; gap: var(--muhai-spacing-yave-2); height: var(--muhai-spacing-yave-10); padding-inline: var(--muhai-spacing-yave-4); background: var(--muhai-color-surface); border: 1px solid var(--muhai-color-border); border-radius: var(--muhai-radius-full); font-size: var(--muhai-text-caption); font-weight: 600; color: var(--muhai-color-ink-body); transition: border-color var(--muhai-duration-fast) ease-out, color var(--muhai-duration-fast) ease-out, box-shadow var(--muhai-duration-fast) ease-out, transform var(--muhai-duration-fast) ease-out; } .muhai-chip:hover { border-color: var(--muhai-color-yave-200); color: var(--muhai-color-yave-700); box-shadow: var(--muhai-shadow-soft); transform: translateY(-2px); } .muhai-chip .muhai-chip-rank { color: var(--muhai-color-yave-600); font-weight: 700; } /* ===== Toast (rate limit 등) ===== */ .muhai-toast-area { position: fixed; bottom: var(--muhai-spacing-yave-6); left: 50%; transform: translateX(-50%); z-index: var(--muhai-z-toast); width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: var(--muhai-spacing-yave-2); } .muhai-toast { display: flex; align-items: flex-start; gap: var(--muhai-spacing-yave-3); padding: var(--muhai-spacing-yave-4); background: var(--muhai-color-ink); color: var(--muhai-color-ink-on-dark); border-radius: var(--muhai-radius-btn); box-shadow: var(--muhai-shadow-lift); font-size: var(--muhai-text-caption); animation: muhai-toast-in var(--muhai-duration-smooth) var(--muhai-ease-smooth); } .muhai-toast .muhai-toast-ico { flex: none; color: var(--muhai-color-yave-300); } @keyframes muhai-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== 온로드 페이드업 (designkit yave-enter, no-JS 안전) ===== */ .muhai-enter { animation: muhai-enter var(--muhai-duration-smooth) var(--muhai-ease-smooth) both; } @keyframes muhai-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ===== 모션 접근성 (designkit 절대 규칙 2) ===== */ @media (prefers-reduced-motion: reduce) { .muhai-root *, .muhai-root *::before, .muhai-root *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .muhai-pulse { animation: none; opacity: 0.7; } } /* 아이콘 크기 보정 (Lucide svg) */ .muhai-root [data-lucide], .muhai-ico svg { width: 20px; height: 20px; } .muhai-ico-sm svg { width: 16px; height: 16px; } .muhai-ico-lg svg { width: 24px; height: 24px; }