/* ============================================================ 톡키 커머스 · "Teal & Carrot" 드롭인 테마 (tokki-commerce-theme.css) ------------------------------------------------------------ 실행 중인 nshop-auto 앱에 새 커머스 디자인(Teal & Carrot)을 입히는 오버라이드 스타일시트입니다. 기능/마크업/스크립트는 전혀 건드리지 않고 "보이는 색·폰트·입체감"만 덮어씁니다. tokki-calm-theme.css(그린)를 포크한 것으로, 셀렉터 구조는 동일하고 브랜드 변수값만 Teal로 교체했습니다. 적용은 각 템플릿 에서 tokki-calm-theme.css 링크를 이 파일로 "교체"하면 됩니다. 디자인 방향: 화이트 바탕 · 플랫 단색(그라데이션 금지) · Teal(#0E9595)=신뢰·동작 · Carrot(#FF7A3C)=성장·매출 하이라이트. 되돌리려면 링크를 다시 tokki-calm-theme.css 로 바꾸면 됩니다. ============================================================ */ /* ---- 타이포: Pretendard ---- */ @import url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard.min.css"); :root { /* 기존 calm 변수명을 유지(셀렉터 재사용)하되 값만 Teal로 */ --tk-green: #0e9595; /* teal-600 · 주요 동작 */ --tk-green-hover: #0a6e6e; /* teal-700 · 호버 */ --tk-green-ink: #0a6e6e; /* teal-700 · 텍스트 강조 */ --tk-green-soft: #ecfbfb; /* teal-50 · 소프트 배경 */ --tk-green-line: #cff5f5; /* teal-100 · 보더 */ /* Carrot(성장·매출 하이라이트 CTA) — 화면당 1곳 */ --tk-carrot: #ff7a3c; --tk-carrot-hover: #f2622a; --tk-carrot-soft: #fff4ec; --tk-carrot-line: #ffe3d2; } /* ---- 페이지 배경: 연회색(gray-50) — 흰 카드가 떠 보이고 헤더~콘텐츠 빈공간이 회색으로 채워짐 ---- */ body { background: #f9fafb !important; font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif !important; } button, input, textarea, select { font-family: inherit !important; } /* ============================================================ 1. 헤더 그라데이션 → 솔리드 teal ============================================================ */ .gradient-bg { background: var(--tk-green) !important; background-image: none !important; } /* ============================================================ 2. 진한 그라데이션(버튼·헤더·프로그레스바) → 솔리드 teal ============================================================ */ [class*="bg-gradient"][class*="from-purple-6"], [class*="bg-gradient"][class*="from-purple-5"], [class*="bg-gradient"][class*="from-indigo-6"], [class*="bg-gradient"][class*="from-indigo-5"], [class*="bg-gradient"][class*="from-blue-6"], [class*="bg-gradient"][class*="from-green-6"] { background-image: none !important; background-color: var(--tk-green) !important; } [class*="hover:from-purple-6"]:hover, [class*="hover:from-purple-7"]:hover, [class*="hover:to-indigo-7"]:hover, [class*="hover:to-blue-7"]:hover { background-image: none !important; background-color: var(--tk-green-hover) !important; } /* ============================================================ 3. 옅은 그라데이션 배경(카드·팁·패널) → 평면 흰색 ============================================================ */ [class*="bg-gradient"][class*="from-purple-50"], [class*="bg-gradient"][class*="from-blue-50"], [class*="bg-gradient"][class*="from-indigo-50"], [class*="bg-gradient"][class*="from-orange-50"], [class*="bg-gradient"][class*="from-yellow-50"], [class*="bg-gradient"][class*="from-green-50"] { background-image: none !important; background-color: #ffffff !important; } /* ============================================================ 4. 솔리드 색 유틸: purple/indigo/blue → teal ============================================================ */ .bg-purple-600, .bg-purple-700, .bg-indigo-600, .bg-blue-600 { background-color: var(--tk-green) !important; } .hover\:bg-purple-700:hover, .hover\:bg-purple-600:hover, .hover\:bg-indigo-700:hover, .hover\:bg-blue-700:hover { background-color: var(--tk-green-hover) !important; } .bg-purple-50, .bg-indigo-50, .bg-blue-50 { background-color: var(--tk-green-soft) !important; } .hover\:bg-purple-50:hover, .hover\:bg-indigo-50:hover, .hover\:bg-blue-50:hover { background-color: var(--tk-green-soft) !important; } .text-purple-600, .text-purple-700, .text-purple-800, .text-purple-900, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900, .text-violet-600, .text-violet-700, .text-violet-800, .text-blue-600 { color: var(--tk-green-ink) !important; } .border-purple-200, .border-purple-300, .border-purple-400, .border-blue-200, .border-blue-300, .border-blue-400, .border-indigo-200 { border-color: var(--tk-green-line) !important; } .ring-purple-200, .ring-purple-300 { --tw-ring-color: var(--tk-green-line) !important; } .text-purple-600[type="checkbox"], input[type="checkbox"].text-purple-600 { accent-color: var(--tk-green) !important; } input[type="checkbox"], input[type="radio"] { accent-color: var(--tk-green) !important; } a { color: var(--tk-green-ink); } *:focus-visible { outline-color: var(--tk-green) !important; } /* ============================================================ 5. 차분한 입체감: 과한 그림자만 살짝 완화 ============================================================ */ .shadow-2xl { box-shadow: 0 8px 24px rgba(24,24,27,.10) !important; } .hover\:shadow-2xl:hover { box-shadow: 0 8px 24px rgba(24,24,27,.12) !important; } /* ============================================================ 6. 잔여 강조: 보라색 spinner/아이콘 등도 teal로 ============================================================ */ .fa-spin.text-purple-600, .text-purple-500, .text-indigo-500 { color: var(--tk-green) !important; } /* ████████████████████████████████████████████████████████████ 심화 패스 — 남은 그라데이션·브랜드색을 평면 + Teal로 정리. 시맨틱(빨강 오류 · 주황/노랑 경고 · 초록 성공)은 보존. ████████████████████████████████████████████████████████████ */ :root { --tk-ink: #18181b; --tk-fg: #3f3f46; --tk-muted:#71717a; --tk-line: #ededed; } /* ---- 7. 남은 옅은 그라데이션 틴트 → 평면 흰색 ---- */ [class*="bg-gradient"][class*="from-teal-50"], [class*="bg-gradient"][class*="from-cyan-50"], [class*="bg-gradient"][class*="from-sky-50"], [class*="bg-gradient"][class*="from-pink-50"], [class*="bg-gradient"][class*="from-rose-50"], [class*="bg-gradient"][class*="from-violet-50"], [class*="bg-gradient"][class*="from-gray-50"], [class*="bg-gradient"][class*="from-slate-50"] { background-image: none !important; background-color: #ffffff !important; } /* ---- 남은 진한 브랜드 그라데이션 → 솔리드 teal ---- */ [class*="bg-gradient"][class*="from-violet-600"], [class*="bg-gradient"][class*="from-violet-500"], [class*="bg-gradient"][class*="from-sky-600"], [class*="bg-gradient"][class*="from-sky-500"], [class*="bg-gradient"][class*="from-teal-600"], [class*="bg-gradient"][class*="from-teal-500"], [class*="bg-gradient"][class*="from-cyan-600"], [class*="bg-gradient"][class*="from-blue-500"], [class*="bg-gradient"][class*="from-indigo-700"], [class*="bg-gradient"][class*="from-purple-700"] { background-image: none !important; background-color: var(--tk-green) !important; } /* ---- 8. 🔍 상품 조회 카드: 인라인 그라데이션 → 평면 흰 카드 + 헤어라인 ---- */ #productSearchSection { background: #ffffff !important; background-image: none !important; border: 1px solid var(--tk-line) !important; box-shadow: 0 1px 2px rgba(24,24,27,.05) !important; } #productSearchSection h2, #productSearchSection [style*="#134e4a"] { color: var(--tk-ink) !important; } #productSearchSection p, #productSearchSection [style*="#1e293b"] { color: var(--tk-muted) !important; opacity: 1 !important; } #productSearchSection [style*="#0f766e"] { color: var(--tk-green-ink) !important; } #productSearchSection [style*="rgba(255,255,255,0.55)"] { background: var(--tk-green-soft) !important; border-color: var(--tk-green-line) !important; } #productSearchSection [style*="rgba(255,255,255,0.12)"] { display: none !important; } /* ---- 9. 잔여 솔리드 브랜드색 배경 → teal / 옅은 배경 → teal 소프트 ---- */ .bg-purple-500, .bg-blue-500, .bg-blue-700, .bg-indigo-500, .bg-indigo-700, .bg-violet-500, .bg-violet-600, .bg-sky-500, .bg-sky-600 { background-color: var(--tk-green) !important; } .hover\:bg-blue-600:hover, .hover\:bg-blue-500:hover, .hover\:bg-indigo-600:hover, .hover\:bg-violet-600:hover, .hover\:bg-sky-600:hover { background-color: var(--tk-green-hover) !important; } .bg-purple-100, .bg-indigo-100, .bg-blue-100, .bg-violet-100, .bg-sky-100, .bg-cyan-100, .bg-teal-100 { background-color: var(--tk-green-soft) !important; } /* ---- 10. 잔여 브랜드 텍스트색 → teal 잉크 (시맨틱 색 제외) ---- */ .text-blue-400, .text-blue-500, .text-blue-700, .text-blue-800, .text-blue-900, .text-indigo-400, .text-indigo-600, .text-indigo-700, .text-purple-400, .text-violet-500, .text-violet-600, .text-sky-500, .text-sky-600, .text-cyan-600, .text-cyan-700, .text-pink-500, .text-pink-600 { color: var(--tk-green-ink) !important; } span[id^="usage-"] { color: var(--tk-green) !important; } /* ---- 11. 잔여 브랜드 보더색 → teal 라인 ---- */ .border-purple-500, .border-purple-600, .border-blue-100, .border-blue-500, .border-blue-600, .border-indigo-300, .border-violet-200, .border-sky-200, .border-teal-200, .border-cyan-200 { border-color: var(--tk-green-line) !important; } /* ---- 12. 포커스 링: 남은 브랜드색 링 전부 → teal ---- */ [class*="ring-purple-"], [class*="ring-blue-"], [class*="ring-indigo-"], [class*="ring-pink-"], [class*="ring-violet-"], [class*="ring-sky-"], [class*="ring-cyan-"] { --tw-ring-color: rgba(14,149,149,.30) !important; } input:focus, textarea:focus, select:focus { border-color: var(--tk-green) !important; } /* ---- 13. 입체감: 카드 그림자 → 헤어라인 보더 + 속삭임 그림자 ---- */ .shadow, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: 0 1px 2px rgba(24,24,27,.05) !important; } .hover\:shadow, .hover\:shadow-md, .hover\:shadow-lg, .hover\:shadow-xl { transition: border-color .15s ease, box-shadow .15s ease; } .hover\:shadow:hover, .hover\:shadow-md:hover, .hover\:shadow-lg:hover, .hover\:shadow-xl:hover { box-shadow: 0 1px 3px rgba(24,24,27,.08) !important; } .bg-white.shadow-lg, .bg-white.shadow-md, .bg-white.shadow-xl, .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-b-xl { border: 1px solid var(--tk-line); } .hover\:shadow-lg:hover, .hover\:shadow-xl:hover, .hover\:shadow-md:hover { border-color: var(--tk-green-line) !important; } /* ============================================================ 마크업 재작성 섹션 전용 클래스 (tk-topbar 등) ============================================================ */ .tk-topbar { background: #ffffff !important; border-bottom: 1px solid var(--tk-line); position: sticky; top: 0; z-index: 40; } .tk-topbar-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; } .tk-brand-logo { width: 40px; height: 40px; border: none; background: transparent; object-fit: contain; flex-shrink: 0; } .tk-brand-label { display: flex; align-items: baseline; gap: 9px; } .tk-brand-name { font-size: 18px; font-weight: 700; color: var(--tk-ink); letter-spacing: -0.01em; } .tk-brand-sub { font-size: 13px; color: #a1a1aa; } .tk-topbtn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--tk-muted); background: transparent; border: none; cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap; } .tk-topbtn:hover { color: var(--tk-ink); background: var(--surface-2, #f7f7f8); } .tk-topbtn .fas { font-size: .9em; } .tk-topbtn-badge { position: absolute; top: 3px; right: 6px; width: 7px; height: 7px; padding: 0; overflow: hidden; background: #dc2626; border-radius: 50%; color: transparent; font-size: 0; line-height: 0; } .tk-topbar-divider { width: 1px; height: 22px; background: var(--tk-line); margin: 0 6px; } .tk-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--tk-green-soft); color: var(--tk-green-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border: 1px solid var(--tk-green-line); } /* ---- 사용량 그리드 ---- */ .tk-usage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--tk-line); border: 1px solid var(--tk-line); border-radius: 14px; overflow: hidden; } /* 한 줄 레이아웃: [아이콘 라벨] ........ [0/무제한], 바는 아래 전체폭 */ .tk-usage-cell { background: #fff; padding: 9px 14px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; } .tk-usage-top { display: flex; align-items: center; gap: 8px; margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .tk-usage-ico { width: 22px; height: 22px; flex-shrink: 0; background: transparent; border: none; color: var(--tk-green); display: flex; align-items: center; justify-content: center; font-size: 14px; } .tk-usage-label { font-size: 14px; font-weight: 600; color: var(--tk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-usage-num { font-size: 16px; font-weight: 700; color: var(--tk-ink); letter-spacing: -0.01em; text-align: right; white-space: nowrap; flex-shrink: 0; } .tk-usage-quota { font-size: 12px; font-weight: 500; color: #a1a1aa; } .tk-usage-bar { flex-basis: 100%; width: 100%; margin-top: 6px; height: 3px; border-radius: 2px; background: #f1f1f3; overflow: hidden; } .tk-usage-bar-fill { height: 100%; width: 0; background: var(--tk-green); border-radius: 2px; transition: width .3s ease; } .tk-usage-bar-fill.is-inf { background: var(--tk-green-line); } @media (max-width: 640px) { .tk-usage-grid { grid-template-columns: repeat(2, 1fr); } } /* ---- 15. 프리미엄/최적화 버튼 & 골드 그라데이션 → 브랜드 teal ---- */ button#premiumNameBtn, button#premiumComposeBtn, button#btn-premium-extract, a#premiumNameBtn, a#premiumComposeBtn { background-image: none !important; background-color: var(--tk-green) !important; color: #fff !important; } [class*="from-purple-400"],[class*="from-purple-500"],[class*="from-purple-600"],[class*="from-purple-700"], [class*="from-indigo-400"],[class*="from-indigo-500"],[class*="from-indigo-600"],[class*="from-indigo-700"], [class*="from-blue-400"],[class*="from-blue-500"],[class*="from-blue-600"],[class*="from-blue-700"], [class*="from-violet-400"],[class*="from-violet-500"],[class*="from-violet-600"],[class*="from-violet-700"], [class*="from-amber-400"],[class*="from-amber-500"],[class*="from-amber-600"], [class*="from-orange-400"],[class*="from-orange-500"],[class*="from-orange-600"], [class*="from-yellow-400"],[class*="from-yellow-500"],[class*="from-yellow-600"] { --tw-gradient-from: var(--tk-green) var(--tw-gradient-from-position, 0%) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14,149,149,0)) !important; } [class*="to-purple-400"],[class*="to-purple-500"],[class*="to-purple-600"],[class*="to-purple-700"], [class*="to-indigo-400"],[class*="to-indigo-500"],[class*="to-indigo-600"],[class*="to-indigo-700"], [class*="to-blue-400"],[class*="to-blue-500"],[class*="to-blue-600"],[class*="to-blue-700"], [class*="to-violet-400"],[class*="to-violet-500"],[class*="to-violet-600"],[class*="to-violet-700"], [class*="to-amber-400"],[class*="to-amber-500"],[class*="to-amber-600"], [class*="to-orange-400"],[class*="to-orange-500"],[class*="to-orange-600"], [class*="to-yellow-400"],[class*="to-yellow-500"],[class*="to-yellow-600"] { --tw-gradient-to: var(--tk-green-hover) var(--tw-gradient-to-position, 100%) !important; } [class*="bg-gradient"][class*="from-amber-50"], [class*="bg-gradient"][class*="from-orange-100"], [class*="bg-gradient"][class*="from-amber-100"] { background-image: none !important; background-color: #ffffff !important; } .bg-amber-400, .bg-amber-500, .bg-orange-400, .bg-orange-500, .bg-yellow-400, .bg-yellow-500 { background-color: var(--tk-green) !important; color: #fff !important; } .bg-amber-100, .bg-orange-100, .bg-yellow-100, .bg-amber-50, .bg-orange-50, .bg-yellow-50 { background-color: var(--tk-green-soft) !important; } .text-orange-400, .text-orange-500, .text-orange-600, .text-orange-700 { color: var(--tk-green-ink) !important; } .border-orange-200, .border-orange-300, .border-orange-400, .border-orange-500 { border-color: var(--tk-green-line) !important; } /* ---- 16. 가독성 + 잔여 브랜드 그라데이션 버튼 → 브랜드 teal ---- */ #optimizeBtn, #premiumNameBtn, #optimizeTagsBtn, #tagOptimizeBtn, #aiImageOptimizeBtn, #autoFillAllBtn, [id^="optimize"][id$="Btn"] { background-image: none !important; background-color: var(--tk-green) !important; color: #fff !important; } [class*="from-purple-"][class*="text-white"], [class*="from-indigo-"][class*="text-white"], [class*="from-blue-"][class*="text-white"], [class*="from-violet-"][class*="text-white"], [class*="from-amber-"][class*="text-white"], [class*="from-orange-"][class*="text-white"], [class*="from-yellow-"][class*="text-white"], [class*="from-green-"][class*="text-white"], [class*="from-pink-"][class*="text-white"], [class*="from-cyan-"][class*="text-white"], [class*="from-teal-"][class*="text-white"], [class*="from-emerald-"][class*="text-white"], [class*="from-sky-"][class*="text-white"], [class*="from-fuchsia-"][class*="text-white"] { background-image: none !important; background-color: var(--tk-green) !important; } #categoryTopTagsContainer { background-color: var(--tk-green-soft) !important; border-color: var(--tk-green-line) !important; } #categoryTopTagsContainer button, #categoryTopTagsContainer [class*="amber"], #categoryTopTagsContainer [class*="orange"], #categoryTopTagsContainer [class*="yellow"] { background-color: #ffffff !important; border-color: var(--tk-green-line) !important; color: var(--tk-green-ink) !important; } #categoryTopTagsContainer .text-amber-700, #categoryTopTagsContainer .text-amber-800, #categoryTopTagsContainer [class*="text-amber"] { color: var(--tk-green-ink) !important; } .content-tier-card { background-color: #ffffff !important; } #subscriptionStatusCard #storeSetupBtn, #subscriptionStatusCard button[onclick*="showOnboarding"], #subscriptionStatusCard #subscription-status-badge { height: 38px !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; } #toast-container { top: 80px !important; z-index: 2147483647 !important; } #saveProductBtn:disabled, #saveProductBtn[disabled] { background-color: #9ca3af !important; opacity: 1 !important; } .accordion-header { background-image: none !important; background-color: var(--tk-green-soft) !important; } .accordion-toggle { background-color: var(--tk-green-soft) !important; color: var(--tk-green-ink) !important; } .accordion-toggle .toggle-icon, .accordion-toggle .accordion-toggle-text, .accordion-toggle i, .accordion-toggle span { color: var(--tk-green-ink) !important; } /* ---- 14. 솔리드 그린 CTA(green-500/600)도 브랜드 teal로 통일 */ .bg-green-500, .bg-green-600 { background-color: var(--tk-green) !important; } .hover\:bg-green-600:hover, .hover\:bg-green-700:hover { background-color: var(--tk-green-hover) !important; } .border-green-500, .border-green-600 { border-color: var(--tk-green) !important; } /* ---- 17. 사용자 요청: 남은 모든 그린 → teal 단일 통일 ---- 필터 탭(전체)·페이지네이션 등 JS 렌더 그린 클래스 포함. 빨강(오류)은 보존. */ .bg-green-300, .bg-green-400, .bg-green-700, .bg-green-800 { background-color: var(--tk-green) !important; } .bg-green-50, .bg-green-100, .bg-green-200 { background-color: var(--tk-green-soft) !important; } .hover\:bg-green-50:hover, .hover\:bg-green-100:hover { background-color: var(--tk-green-soft) !important; } .hover\:bg-green-500:hover { background-color: var(--tk-green-hover) !important; } .text-green-400, .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-green-900 { color: var(--tk-green-ink) !important; } .border-green-100, .border-green-200, .border-green-300, .border-green-400, .border-green-700 { border-color: var(--tk-green-line) !important; } [class*="ring-green-"] { --tw-ring-color: rgba(14,149,149,.30) !important; } .accent-green-500, .accent-green-600 { accent-color: var(--tk-green) !important; } /* 그린 그라데이션(진한 톤) → 플랫 teal */ [class*="from-green-4"], [class*="from-green-5"], [class*="from-green-6"], [class*="from-green-7"] { --tw-gradient-from: var(--tk-green) var(--tw-gradient-from-position, 0%) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14,149,149,0)) !important; } [class*="to-green-4"], [class*="to-green-5"], [class*="to-green-6"], [class*="to-green-7"] { --tw-gradient-to: var(--tk-green-hover) var(--tw-gradient-to-position, 100%) !important; } /* ============================================================ 18. 타이포 스케일 통일 (Pretendard) — 역할 기반 단계 수렴 ------------------------------------------------------------ 기존 text-4xl(36)~text-base(16)이 제각각이라 위계가 흐트러짐. 대제목 22 · 제목 20 · 섹션제목 18 · 소제목 16 · 본문 15/14 · 캡션 12 로 수렴(본문 text-sm 14 / 캡션 text-xs 12 는 기본 유지). tailwind.css 뒤에 로드되므로 !important 없이 같은 특이도로 덮음. ============================================================ */ .text-4xl { font-size: 24px; line-height: 1.25; } .text-3xl { font-size: 22px; line-height: 1.25; } .text-2xl { font-size: 20px; line-height: 1.3; } .text-xl { font-size: 18px; line-height: 1.35; } .text-lg { font-size: 16px; line-height: 1.4; } .text-base{ font-size: 15px; line-height: 1.55; } /* arbitrary 초소형 클래스(text-[8~10.5px])는 마이크로 11px로, 11.5는 12로 수렴 */ .text-\[8px\], .text-\[9px\], .text-\[9\.5px\], .text-\[10px\], .text-\[10\.5px\] { font-size: 11px; } .text-\[11\.5px\] { font-size: 12px; } /* ============================================================ 19. 네이티브 파일 선택 버튼 → 브랜드 teal (Tailwind file: arbitrary 클래스가 정적 빌드에 없어 회색으로 남던 문제 해결) ============================================================ */ input[type="file"]::file-selector-button { background-color: var(--tk-green) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; padding: 8px 16px !important; margin-right: 12px !important; font-weight: 600 !important; font-size: 13px !important; cursor: pointer !important; transition: background-color .15s ease !important; } input[type="file"]:hover::file-selector-button { background-color: var(--tk-green-hover) !important; }