/* AlgoLens site chrome — shared across all algolens.* pages (2026-07-08). Theme tokens: dark is the default; [data-theme="light"] overrides. Pages that must stay light-only (privacy/terms) hardcode so every var() below resolves to the light values — same ruleset, no page-specific duplication. Two page families share typography from this file: "product" (.head/.ico/h1/.sub/ .callout — items/pricing/guide/faq/sitemap) and "legal" (.legal-doc — privacy/ terms/refund, own h1/h2/table scale, intentionally distinct from the product family per owner decision 2026-07-08). */ :root { --bg: #101218; --bg-gradient: radial-gradient(80% 60% at 80% -10%, #33285e 0%, transparent 55%); --text: #eef0f6; --text2: #d7dbe6; --muted: #99a1b3; --muted2: #8b93a7; --border: rgba(255, 255, 255, 0.1); --border-soft: rgba(255, 255, 255, 0.07); --card-bg: rgba(255, 255, 255, 0.04); --select-bg: rgba(255, 255, 255, 0.06); --select-border: rgba(255, 255, 255, 0.18); --accent-text: #c4b5fd; --hover-border: rgba(165, 140, 255, 0.5); --notice-text: #a39fd0; --ok-text: #86efac; --warn-text: #fbbf24; --info-text: #818cf8; } :root[data-theme="light"] { --bg: #fdfdff; --bg-gradient: none; --text: #191f28; --text2: #191f28; --muted: #8b95a1; --muted2: #8b95a1; --border: #e5e8f0; --border-soft: #eceef4; --card-bg: #f6f7fb; --select-bg: #fff; --select-border: #d7dbe6; --accent-text: #6366f1; --hover-border: #6366f1; --notice-text: #7c3aed; --ok-text: #16a34a; --warn-text: #b45309; --info-text: #4f46e5; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --bg: #fdfdff; --bg-gradient: none; --text: #191f28; --text2: #191f28; --muted: #8b95a1; --muted2: #8b95a1; --border: #e5e8f0; --border-soft: #eceef4; --card-bg: #f6f7fb; --select-bg: #fff; --select-border: #d7dbe6; --accent-text: #6366f1; --hover-border: #6366f1; --notice-text: #7c3aed; --ok-text: #16a34a; --warn-text: #b45309; --info-text: #4f46e5; } } /* ── Product-family page header (shared — items/algolens*.html, pricing, guide, faq, sitemap) ── */ .head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .ico { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #8b5cf6, #ec4899); display: grid; place-items: center; font-size: 24px; } h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; } .sub { color: var(--muted); font-size: 15px; margin-bottom: 32px; } /* ── Callout box (shared — trust/notice-style single note, not a structured panel) ── */ .callout { background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 12px; padding: 14px 18px; font-size: 13px; color: var(--notice-text); line-height: 1.7; } /* ── Legal-document family (privacy/terms/refund) — own typography scale, shared via . Fixed-light pages (privacy/terms) hardcode data-theme="light" on so these vars still resolve correctly without a theme toggle; refund stays dual-theme and uses the same ruleset. ── */ .legal-doc { font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; max-width: 760px; margin: 0 auto; padding: 56px 24px; color: var(--text); background: var(--bg); line-height: 1.75; word-break: keep-all; } .legal-doc h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; } .legal-doc h2 { font-size: 18px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border-soft); } .legal-doc .date { color: var(--muted); font-size: 13px; } .legal-doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; } /* anti-crush (2026-07-12, 제품 대시보드와 동일 원칙): 좁은 화면에서 표를 짓누르는 대신 표 자체를 가로 스크롤 */ .legal-doc table { display: block; overflow-x: auto; } .legal-doc td, .legal-doc th { min-width: 96px; overflow-wrap: break-word; word-break: keep-all; } .legal-doc th, .legal-doc td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .legal-doc th { background: var(--card-bg); } .legal-doc a { color: var(--accent-text); } .legal-doc .box { background: var(--card-bg); border-radius: 12px; padding: 16px 20px; font-size: 14px; } .legal-doc ul { padding-left: 20px; } .legal-doc li { margin: 8px 0; } .legal-doc footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; } .legal-doc footer a { color: var(--muted2); text-decoration: none; } .legal-doc footer a:hover { color: var(--accent-text); } @media (max-width: 520px) { .legal-doc { padding: 32px 16px; } } /* Japanese has no inter-word spaces; keep-all would block wrapping and overflow narrow layouts. Pages set in their i18n apply(); this overrides every keep-all above (and the page-level inline body{word-break:keep-all} on items/pricing) via higher specificity. */ html[lang="ja"] body, html[lang="ja"] .legal-doc, html[lang="ja"] .legal-doc td, html[lang="ja"] .legal-doc th { word-break: normal; } /* ── Install button (shared — items/algolens.html, guide/algolens.html, faq/algolens.html) ── CWS 게시 후: .install-btn에서 disabled 클래스 제거 + href="#" → 실제 CWS URL로 교체 URL: https://chromewebstore.google.com/detail/{slug}/eihdhchhjngbaijfccphmfgeapdmcpkl */ .install-wrap { margin: 0 0 32px; } .install-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 14px; font-size: 15px; font-weight: 700; text-decoration: none; background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35); transition: opacity 0.2s, transform 0.2s; } .install-btn:hover { opacity: 0.9; transform: translateY(-1px); } .install-btn.disabled { background: rgba(139, 92, 246, 0.18); color: var(--accent-text); box-shadow: none; cursor: not-allowed; pointer-events: none; opacity: 0.6; } .install-note { display: block; font-size: 12.5px; color: var(--muted2); margin-top: 9px; } /* ── Site nav bar ── */ .site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 28px; font-size: 13px; } .site-nav a { color: var(--muted2); text-decoration: none; padding: 2px 0; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent-text); } .site-nav a[aria-current="page"] { font-weight: 700; } /* ── Header controls row (lang select + theme toggle) ── */ .site-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 18px; } .lang-select { background: var(--select-bg); color: var(--text); border: 1px solid var(--select-border); border-radius: 10px; padding: 6px 10px; font-size: 13px; cursor: pointer; } .lang-select:hover { border-color: var(--hover-border); } .theme-toggle-btn { background: var(--select-bg); border: 1px solid var(--select-border); border-radius: 10px; padding: 6px 10px; font-size: 14px; line-height: 1; cursor: pointer; color: var(--text); } .theme-toggle-btn:hover { border-color: var(--hover-border); } /* Fixed-light pages (privacy/terms) show this button for layout consistency only — never functional. */ .theme-toggle-btn:disabled { opacity: 0.4; cursor: not-allowed; } .theme-toggle-btn:disabled:hover { border-color: var(--select-border); } /* ── Floating back-to-top button ── */ .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--select-border); background: var(--select-bg); color: var(--text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, border-color 0.2s; z-index: 40; backdrop-filter: blur(6px); } .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { border-color: var(--hover-border); }