/* ============================================================ thegangsa.xyz — Starbucks-inspired Design Tokens (Option A) ============================================================ Source: D:\새 폴더 (2)\InstaFlow\DESIGN.md (getdesign starbucks) Plan: ~/.claude/plans/sequential-tinkering-badger.md Apply: /app/place/static/tokens.css → linked from main HTML ============================================================ */ /* ============================================================ THE GANGSA Marketing Hub — shared UX tokens/components Phase 3: brand-safe aliases + common page/action components ============================================================ */ :root { --tg-green: #1E3932; --tg-green-2: #006241; --tg-green-accent: #00754A; --tg-coral: #D65B75; --tg-coral-2: #E07186; --tg-gold: #CBA258; --tg-bg-dark: #0A0A14; --tg-panel-dark: #14142B; --tg-panel-dark-2: #1C1D21; --tg-bg-soft: #F6F2E8; --tg-bg-cream: #F2F0EB; --tg-card: #FFFFFF; --tg-line: #E4CFC7; --tg-line-dark: #252547; --tg-text: #1E3932; --tg-text-dark: #F7F8F8; --tg-muted: #8A8A8F; --accent: var(--tg-green-accent) !important; --accent-2: var(--tg-green-2) !important; --accent-3: var(--tg-green) !important; --green: var(--tg-green-2); --green-accent: var(--tg-green-accent); --green-house: var(--tg-green); --gold: var(--tg-gold); } .tg-page-shell { width:100%; min-height:100%; color:var(--tg-text); font-family:var(--sans, 'Manrope', 'Pretendard', system-ui, sans-serif); } .tg-page-header { display:flex; flex-direction:column; gap:8px; margin:0 0 24px; padding:22px 24px; border:1px solid rgba(30,57,50,.14); border-radius:16px; background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(246,242,232,.92)); box-shadow:0 8px 24px rgba(30,57,50,.08); } .tg-page-header.is-dark { color:var(--tg-text-dark); border-color:rgba(255,255,255,.10); background:linear-gradient(135deg, var(--tg-bg-dark), var(--tg-panel-dark)); } .tg-eyebrow { font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--tg-green-accent); } .tg-page-header.is-dark .tg-eyebrow { color:var(--tg-coral-2); } .tg-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px; font-weight:700; color:rgba(30,57,50,.62); } .tg-page-header.is-dark .tg-breadcrumb { color:rgba(255,255,255,.62); } .tg-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; } .tg-btn-primary, .tg-btn-secondary, .tg-btn-ghost, .tg-btn-danger { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 16px; border-radius:999px; font:800 14px/1 var(--sans, system-ui, sans-serif); text-decoration:none; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; } .tg-btn-primary { background:var(--tg-green-accent); color:#fff; border:1px solid var(--tg-green-accent); box-shadow:0 8px 20px rgba(0,117,74,.18); } .tg-btn-primary:hover { background:var(--tg-green-2); border-color:var(--tg-green-2); } .tg-btn-secondary { background:rgba(203,162,88,.14); color:var(--tg-green); border:1px solid rgba(203,162,88,.42); } .tg-btn-ghost { background:transparent; color:var(--tg-green); border:1px solid rgba(30,57,50,.22); } .tg-page-header.is-dark .tg-btn-ghost { color:var(--tg-text-dark); border-color:rgba(255,255,255,.18); } .tg-btn-danger { background:rgba(200,32,20,.10); color:#C82014; border:1px solid rgba(200,32,20,.24); } .tg-btn-primary:active, .tg-btn-secondary:active, .tg-btn-ghost:active, .tg-btn-danger:active { transform:scale(.97); } .tg-status-pill { display:inline-flex; align-items:center; gap:7px; width:fit-content; padding:5px 10px; border-radius:999px; background:rgba(0,117,74,.10); color:var(--tg-green-accent); border:1px solid rgba(0,117,74,.22); font:800 12px/1 var(--sans, system-ui, sans-serif); } .tg-status-pill::before { content:''; width:6px; height:6px; border-radius:999px; background:currentColor; } @media (max-width:640px) { .tg-page-header { padding:18px 16px; border-radius:14px; } .tg-header-actions { flex-direction:column; align-items:stretch; } .tg-btn-primary, .tg-btn-secondary, .tg-btn-ghost, .tg-btn-danger { width:100%; min-height:44px; } } :root { /* ============ Canvas / Surface (Starbucks 5-tier) ============ */ --bg: #f2f0eb !important; /* Neutral Warm — page canvas */ --bg-2: #edebe9 !important; /* Ceramic — zone separator */ --bg-3: #faf6ee !important; /* Gold Lightest — partnership wash */ --surface: #ffffff !important; /* Card */ --surface-2: #f9f9f9 !important; /* Neutral Cool — dropdown / utility */ --surface-3: #edebe9 !important; /* Ceramic */ /* ============ Borders / Lines ============ */ --line: #e7e7e7 !important; --line-2: #d6dbde !important; /* Input border */ --line-3: #c5cdd2 !important; /* ============ Text (Starbucks: warm 87%/58% black) ============ */ --text: rgba(0, 0, 0, 0.87) !important; /* Heading & body on light */ --text-2: rgba(0, 0, 0, 0.70) !important; --text-dim: rgba(0, 0, 0, 0.58) !important; /* Secondary */ --text-mute: rgba(0, 0, 0, 0.40) !important; --text-on-dark: rgba(255, 255, 255, 1); --text-on-dark-muted: rgba(255, 255, 255, 0.70); --text-rewards: #33433d; /* For 비밀창고 / 회원 등급 */ /* ============ Brand Greens (Starbucks 4-tier) ============ */ --green: #006241; /* Starbucks Green — h1 */ --green-accent: #00754A; /* Green Accent — primary CTA */ --green-house: #1E3932; /* House Green — feature band, footer */ --green-uplift: #2b5148; /* Green Uplift — decorative */ --green-light: #d4e9e2; /* Green Light — form valid tint */ /* ============ Override existing --accent (was #d65b75 wine) ============ */ --accent: #00754A !important; /* Green Accent (primary CTA) */ --accent-2: #006241 !important; /* Starbucks Green (heading) */ --accent-3: #1E3932 !important; /* House Green (deep) */ --accent-soft: rgba(0, 117, 74, 0.10) !important; --accent-glow: rgba(0, 117, 74, 0.20) !important; --primary: var(--accent); --primary-hover: var(--accent-2); /* ============ Status / Rewards (Gold) ============ */ --gold: #cba258; /* Admin / 유료 / 회원 등급 전용 */ --gold-light: #dfc49d; --gold-lightest: var(--bg-3); /* Override existing --amber */ --amber: #cba258 !important; --amber-soft: rgba(203, 162, 88, 0.16) !important; /* ============ Override existing semantic ============ */ --green-soft: rgba(0, 98, 65, 0.08) !important; /* Was #4ade80 */ --red: #c82014 !important; /* Was #f87171 */ --red-soft: rgba(200, 32, 20, 0.08) !important; --error: #c82014; --warning: #fbbc05; --success-tint: hsl(160 32% 87% / 33%); --error-tint: hsl(4 82% 43% / 5%); /* ============ Black/White alpha ladders (overlays) ============ */ --black-06: rgba(0,0,0,0.06); --black-10: rgba(0,0,0,0.10); --black-24: rgba(0,0,0,0.24); --white-10: rgba(255,255,255,0.10); --white-30: rgba(255,255,255,0.30); --white-70: rgba(255,255,255,0.70); /* ============ Font (Starbucks: SoDoSans → Manrope + Pretendard) ============ */ --sans: 'Manrope', 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', 'Geist', system-ui, sans-serif !important; --mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', monospace !important; --serif: 'Noto Serif KR', 'Lora', Georgia, serif; --font-sans: var(--sans); --font-mono: var(--mono); --font-serif: var(--serif); --ls-tight: -0.01em; /* Starbucks signature */ --ls-loose: 0.1em; --ls-looser: 0.15em; --lh-normal: 1.5; --lh-compact: 1.2; /* ============ Type scale (Starbucks rem-based) ============ */ --text-display: 5rem; /* 50px */ --text-jumbo: 3.6rem; /* 36px */ --text-hero: 2.8rem; /* 28px */ --text-h1: 2.4rem; /* 24px / 600 / Starbucks Green */ --text-h2: 2.4rem; /* 24px / 400 / Text */ --text-body-lg: 1.9rem; /* 19px */ --text-body: 1.6rem; /* 16px */ --text-sm: 1.4rem; /* 14px */ --text-micro: 1.3rem; /* 13px */ /* ============ Spacing (Starbucks rem) ============ */ --space-1: 0.4rem; --space-2: 0.8rem; --space-3: 1.6rem; /* 16px — default */ --space-4: 2.4rem; --space-5: 3.2rem; --space-6: 4rem; --space-7: 4.8rem; --space-8: 5.6rem; --space-9: 6.4rem; --outer-gutter: var(--space-3); --outer-gutter-md: var(--space-4); --outer-gutter-lg: var(--space-6); /* ============ Radius (Starbucks 50px pill) ============ */ --r-button: 50px; /* full pill — primary */ --r-button-sm: 4px; /* dense input / table action */ --r-card: 12px !important; /* override existing --radius */ --r-circle: 50%; --radius: 12px !important; /* override */ --radius-sm: 8px !important; --radius-xs: 6px !important; --radius-lg: 16px !important; /* ============ Shadow (Starbucks layered low-alpha) ============ */ --sh-card: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24); --sh-nav: 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07); --sh-frap: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14); --sh-frap-active: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0); /* Override existing shadows (was very dark for dark mode) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06) !important; --shadow-md: 0 4px 12px rgba(0,0,0,0.08) !important; --shadow-lg: 0 8px 24px rgba(0,0,0,0.10) !important; --shadow-xl: 0 16px 40px rgba(0,0,0,0.12) !important; --shadow-accent: 0 4px 32px -4px var(--accent-glow) !important; /* ============ Motion ============ */ --btn-active-scale: 0.95; --duration: 0.2s; --duration-expander: 300ms; --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-springy: cubic-bezier(0.32, 2.32, 0.61, 0.27); /* ============ Layout ============ */ --col-sm: 343px; --col-md: 500px; --col-lg: 720px; --col-xl: 1440px; --img-fade: opacity 0.3s ease-in; } /* ============================================================ Base body — apply Starbucks defaults globally ============================================================ */ html { /* Starbucks 1rem = 10px trick — KEEP existing scale unbroken if dashboard already uses 16px base */ /* Disabled to avoid breaking existing layouts. To enable: font-size: 62.5%; */ } body { font-family: var(--sans); letter-spacing: var(--ls-tight); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* ============================================================ Reusable components — Starbucks pattern library ============================================================ */ /* 1. Primary Filled Pill (CTA) */ .btn-primary, .btn.btn-primary { background: var(--green-accent) !important; color: #fff !important; border: 1px solid var(--green-accent) !important; border-radius: var(--r-button) !important; padding: 7px 16px; font-family: var(--sans); font-weight: 600; letter-spacing: var(--ls-tight); transition: all var(--duration) ease; cursor: pointer; } .btn-primary:active, .btn.btn-primary:active { transform: scale(var(--btn-active-scale)); } .btn-primary:hover, .btn.btn-primary:hover { background: var(--green) !important; border-color: var(--green) !important; } /* 2. Outlined Pill */ .btn-outlined, .btn-secondary { background: transparent !important; color: var(--green-accent) !important; border: 1px solid var(--green-accent) !important; border-radius: var(--r-button) !important; padding: 7px 16px; font-weight: 600; letter-spacing: var(--ls-tight); transition: all var(--duration) ease; } .btn-outlined:active, .btn-secondary:active { transform: scale(var(--btn-active-scale)); } /* 3. Black Filled (Join now / strong CTA) */ .btn-black { background: #000 !important; color: #fff !important; border: 1px solid #000 !important; border-radius: var(--r-button) !important; padding: 7px 16px; font-weight: 600; font-size: var(--text-sm); } /* 4. Success / Green button (legacy override) */ .btn.btn-success { background: var(--green-accent) !important; color: #fff !important; border: 1px solid var(--green-accent) !important; border-radius: var(--r-button) !important; } /* 5. Card — Starbucks 12px + layered low-alpha */ .card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-card); border: none; } /* 6. Feature band (dark green) */ .feature-band { background: var(--green-house); color: var(--text-on-dark); padding: var(--space-9) var(--outer-gutter-lg); } .feature-band .secondary, .feature-band .text-dim { color: var(--text-on-dark-muted); } /* 7. Frap floating CTA */ .frap { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: var(--r-circle); background: var(--green-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh-frap); transition: all var(--duration) ease; z-index: 9999; } .frap:active { transform: scale(var(--btn-active-scale)); box-shadow: var(--sh-frap-active); } /* 8. Status pill (Gold — Rewards-style: admin / 유료 / 등급) */ .status-pill-gold { background: transparent; color: var(--gold); border: 1px solid var(--gold); border-radius: var(--r-button); padding: 4px 12px; font-weight: 700; font-size: var(--text-micro); letter-spacing: 0.5px; } /* 9. Color-block page rhythm */ .section-cream { background: var(--bg); } .section-white { background: var(--surface); } .section-house { background: var(--green-house); color: var(--text-on-dark); } .section-ceramic { background: var(--bg-2); } .section-gold-wash { background: var(--bg-3); } /* 10. Headings (Starbucks h1 = green 600 / h2 = text 400) */ h1 { color: var(--green); font-weight: 600; letter-spacing: var(--ls-tight); } h2 { color: var(--text); font-weight: 400; letter-spacing: var(--ls-tight); } /* 11. Brand-logo (사이드바 "장") — Starbucks Green 800 */ .brand-logo { background: var(--green) !important; color: #fff !important; font-family: var(--sans); font-weight: 800; } .brand-name { color: var(--text); } .brand-name .sub { color: var(--text-dim); letter-spacing: var(--ls-looser); } /* 12. Sidebar — light cream */ .sidebar, aside.sidebar { background: var(--bg-2) !important; border-right: 1px solid var(--line); } .nav-item { color: var(--text-dim); border-radius: var(--r-card); } .nav-item:hover { background: var(--accent-soft); color: var(--green-accent); } .nav-item.active { background: var(--green-accent) !important; color: #fff !important; } .nav-group-label { color: var(--text-mute); letter-spacing: var(--ls-looser); } /* 13. Inputs — Starbucks 4px radius + green focus ring */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], textarea, select { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-button-sm) !important; font-family: var(--sans); letter-spacing: var(--ls-tight); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green-accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } /* ============================================================ 14. Inflow panel — wine 테마 잔존 색깔 starbucks 친화 강제 (유입 채널 / 유입 키워드 panel 가독성 fix) ============================================================ */ #inflowChannelDash, #inflowKeywordDash, #inflowSelector { color: var(--text) !important; } /* 우측 숫자 (count) — 옛 #34d399 → starbucks green */ #inflowChannelDash [style*="#34d399"], #inflowKeywordDash [style*="#34d399"] { color: var(--green) !important; } /* 헤더/액센트 — 옛 wine #d65b75 → starbucks green-accent */ #inflowChannelDash [style*="#d65b75"], #inflowKeywordDash [style*="#d65b75"], #inflowChannelDash [style*="rgb(214, 91, 117)"], #inflowKeywordDash [style*="rgb(214, 91, 117)"] { color: var(--green-accent) !important; } /* 보조 라벨 — 옛 #87736c → 통일 dim */ #inflowChannelDash [style*="#87736c"], #inflowKeywordDash [style*="#87736c"] { color: var(--text-dim) !important; } /* 본문 텍스트 — 옛 #241821 → 통일 text (가독성) */ #inflowChannelDash [style*="#241821"], #inflowKeywordDash [style*="#241821"] { color: var(--text) !important; font-weight: 600; } /* 막대 fill — 옛 wine 그라디언트 → starbucks green 그라디언트 */ #inflowChannelDash .kw-bar-fill, #inflowKeywordDash .kw-bar-fill { background: linear-gradient(90deg, var(--green-accent), var(--green)) !important; } /* ch-detail-panel 배경 — beige 유지하되 border starbucks 화 */ #inflowChannelDash .ch-detail-panel, #inflowKeywordDash .ch-detail-panel { background: var(--bg-3) !important; border-color: var(--gold-light) !important; } /* period-tab inactive — 명시적 어두운 글씨 */ #inflowChannelDash .period-tab:not(.active), #inflowKeywordDash .period-tab:not(.active), #inflowSelector .period-tab:not(.active) { color: var(--text-dim) !important; background: var(--surface) !important; } #inflowChannelDash .period-tab.active, #inflowKeywordDash .period-tab.active, #inflowSelector .period-tab.active { background: var(--green-accent) !important; color: #fff !important; } /* CSV 다운로드 버튼 — 옛 그린 → starbucks pill */ #inflowChannelDash button[onclick*="inflowDownloadCsv"], #inflowKeywordDash button[onclick*="inflowDownloadCsv"] { background: var(--accent-soft) !important; color: var(--green-accent) !important; border: 1px solid var(--green-accent) !important; border-radius: var(--r-button) !important; } /* "← 돌아가기" 버튼 */ #inflowChannelDash button[onclick*="inflowBackToSelector"], #inflowKeywordDash button[onclick*="inflowBackToSelector"] { background: var(--surface-2) !important; color: var(--text-dim) !important; border-radius: var(--r-button) !important; } /* 페이지 nav arrow — 그린 강조 */ #inflowChannelDash button[onclick*="inflowNavDate"], #inflowKeywordDash button[onclick*="inflowNavDate"] { background: var(--accent-soft) !important; color: var(--green-accent) !important; } /* ============================================================ 15. Hub redesign — Starbucks 모던 일러스트 톤 (#home-view 의 .feature-card / .fc-icon / .hub-* 전체) ============================================================ */ /* hub-greeting — 파스텔 톤 (felt-tip highlight + 부드러운 색) */ .hub-greeting .eyebrow { font-family: var(--mono) !important; font-size: 11px !important; color: #b89968 !important; /* 파스텔 골드 (탁한 베이지-골드) */ font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase; opacity: 0.85; } .hub-greeting .eyebrow::before { background: #d4b97a !important; /* 파스텔 골드 dot */ } .hub-greeting h1 { color: #3d4f48 !important; /* 부드러운 그린-그레이 (검정 대신) */ background: none !important; background-color: transparent !important; font-weight: 600 !important; letter-spacing: -0.4px !important; text-shadow: none !important; box-shadow: none !important; -webkit-text-fill-color: #3d4f48 !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* em — #d4e9e2 페일 그린 박스 + 어두운 그린 글자 (token --green-light) */ .hub-greeting h1 em, #home-view .hub-greeting h1 em, section#home-view .hub-greeting h1 em { font-style: normal !important; font-weight: 700 !important; color: #1E3932 !important; -webkit-text-fill-color: #1E3932 !important; background: #d4e9e2 !important; background-color: #d4e9e2 !important; background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; text-shadow: none !important; padding: 2px 10px !important; border-radius: 6px !important; border-bottom: 0 !important; } .hub-greeting .lead { color: #6b7d77 !important; /* 부드러운 회녹 */ opacity: 0.95; font-weight: 400 !important; } /* hub-section-header — eyebrow 스타일 */ .hub-section-header h3 { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--green) !important; letter-spacing: 2px !important; text-transform: uppercase; position: relative; padding-left: 32px; } .hub-section-header h3::before { content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 4px; background: var(--green-accent); border-radius: 2px; transform: translateY(-50%); } /* 카테고리별 stripe 색깔 */ .hub-section:nth-of-type(2) .hub-section-header h3 { color: var(--green-house) !important; } .hub-section:nth-of-type(2) .hub-section-header h3::before { background: var(--green-house); } .hub-section:nth-of-type(3) .hub-section-header h3 { color: var(--gold) !important; } .hub-section:nth-of-type(3) .hub-section-header h3::before { background: var(--gold); } .hub-section:nth-of-type(4) .hub-section-header h3 { color: var(--green) !important; } .hub-section:nth-of-type(4) .hub-section-header h3::before { background: linear-gradient(90deg, var(--green) 50%, var(--gold) 50%); } /* feature-card — 그린 mouse glow 로 교체 */ .feature-card { border-radius: var(--radius-lg) !important; } .feature-card::before { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 117, 74, 0.10), transparent 40%) !important; } .feature-card::after { background: linear-gradient(135deg, rgba(0, 117, 74, 0.30), transparent 50%, rgba(203, 162, 88, 0.20)) !important; } .feature-card:hover { border-color: var(--green-accent) !important; box-shadow: 0 12px 32px rgba(30, 57, 50, 0.10) !important; } /* fc-icon — 새 큰 사이즈 + 카테고리 배경 */ .fc-icon { width: 64px !important; height: 64px !important; border-radius: 14px !important; background: var(--bg-3) !important; margin-bottom: 16px !important; } .fc-icon svg { width: 56px !important; height: 56px !important; } .feature-card:hover .fc-icon { background: var(--accent-soft) !important; box-shadow: 0 0 0 1px rgba(0, 117, 74, 0.20) !important; } /* fc-arrow — 그린 화살표 */ .feature-card:hover .fc-arrow { background: var(--green-accent) !important; color: #fff !important; } /* fc-title / fc-desc */ .fc-title { color: var(--green-house) !important; font-weight: 700 !important; } .fc-desc { color: var(--text-dim) !important; } /* 카테고리별 fc-icon 배경 (data-panel 매핑) */ .feature-card[data-panel="branding"] .fc-icon { background: rgba(203, 162, 88, 0.14) !important; } .feature-card[data-panel="blog-grade"] .fc-icon, .feature-card[data-panel="web70"] .fc-icon { background: var(--green-house) !important; } .feature-card[data-panel="geo-review"] .fc-icon, .feature-card[data-panel="blog"] .fc-icon { background: var(--bg-3) !important; } /* ----- 모바일 (≤620px) — horizontal compact layout ----- */ @media (max-width: 620px) { .feature-card { flex-direction: row !important; align-items: center !important; gap: 14px; padding: 14px 16px !important; min-height: 0 !important; } .feature-card .fc-icon { width: 56px !important; height: 56px !important; flex-shrink: 0; margin-bottom: 0 !important; } .feature-card .fc-icon svg { width: 48px !important; height: 48px !important; } .fc-title { font-size: 14.5px !important; margin-bottom: 3px !important; } .fc-desc { font-size: 12px !important; line-height: 1.45 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fc-arrow { position: static !important; opacity: 1 !important; transform: none !important; margin-left: auto !important; flex-shrink: 0; width: 32px !important; height: 32px !important; background: var(--accent-soft) !important; color: var(--green-accent) !important; font-size: 16px !important; } .hub-greeting h1 { font-size: 26px !important; } .hub-greeting .lead { font-size: 13px !important; } .hub-section { margin-bottom: 24px !important; } /* 모바일에서도 em 박스/하이라이트 절대 안 생기게 강제 (PC 와 동일 톤) */ .hub-greeting h1 em, #home-view .hub-greeting h1 em, section#home-view .hub-greeting h1 em { background: none !important; background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #4a7a6a !important; -webkit-text-fill-color: #4a7a6a !important; padding: 0 !important; border-radius: 0 !important; text-shadow: none !important; } } /* ============================================================ 16. card-grid cols-5 — ANALYTICS 5번째 카드 (대표키워드) ============================================================ */ .card-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1400px) { .card-grid.cols-5 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1100px) { .card-grid.cols-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .card-grid.cols-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .card-grid.cols-5 { grid-template-columns: 1fr; } }