/* ============================================================ SOMUNA 새 홈페이지 — 라이트 테마 항상 로드되며, 일 때만 적용. 테마 전환: 헤더의 #themeToggle (localStorage 'somuna_theme') ============================================================ */ html[data-theme="light"] { --bg: #f6f8fb; --bg-2: #ffffff; --bg-3: #eef2f8; --surface: #ffffff; --surface-hover: #f3f8fd; --stroke: rgba(12, 34, 56, 0.1); --stroke-strong: rgba(12, 34, 56, 0.2); --text: #0c1624; --text-2: #46586c; --text-3: #8395a8; --teal: #0aa886; /* 라이트 배경 대비 확보용 딥 틸 */ --grad: linear-gradient(100deg, #0089cc 0%, #0aa886 100%); --grad-soft: linear-gradient(100deg, rgba(0, 160, 233, 0.1), rgba(10, 168, 134, 0.1)); } html[data-theme="light"] ::selection { background: rgba(0, 160, 233, 0.25); } /* 앰비언트 블롭: 라이트는 파스텔 톤 */ html[data-theme="light"] body::before { background: radial-gradient(circle, rgba(0, 160, 233, 0.22), transparent 62%); } html[data-theme="light"] body::after { background: radial-gradient(circle, rgba(10, 168, 134, 0.18), transparent 62%); } /* 카드 깊이감: 보더 대신 섀도 중심 */ html[data-theme="light"] .impact-card, html[data-theme="light"] .flow-card, html[data-theme="light"] .bento-card, html[data-theme="light"] .hw-card, html[data-theme="light"] .news-card, html[data-theme="light"] .feat-card, html[data-theme="light"] .seg-card, html[data-theme="light"] .cta-banner { box-shadow: 0 10px 30px rgba(15, 35, 60, 0.07); } /* 플로팅 문의 버튼 / 카테고리 */ html[data-theme="light"] .fab-inquiry { color: #fff; box-shadow: 0 10px 28px rgba(0, 140, 200, 0.35); } html[data-theme="light"] .cat-pill input:checked + span { color: #fff; } /* 문의 폼 */ html[data-theme="light"] .inquiry-form { box-shadow: 0 10px 30px rgba(15, 35, 60, 0.07); } html[data-theme="light"] .form-field input[type="text"], html[data-theme="light"] .form-field input[type="email"], html[data-theme="light"] .form-field textarea { background: #ffffff; } html[data-theme="light"] .form-msg.success { color: #0a8f60; } html[data-theme="light"] .form-msg.error { color: #d64545; } /* 드롭다운 / 모바일 메뉴 */ html[data-theme="light"] .dropdown { background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 40px rgba(15, 35, 60, 0.14); } html[data-theme="light"] .gnb-item > a:hover, html[data-theme="light"] .gnb-item > a.active { background: rgba(12, 34, 56, 0.06); } html[data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.98); } /* 헤더 */ html[data-theme="light"] .site-header.scrolled { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px); border-bottom-color: var(--stroke); } html[data-theme="light"] .gnb a:hover, html[data-theme="light"] .gnb a.active { color: var(--text); background: rgba(12, 34, 56, 0.06); } html[data-theme="light"] .btn-ghost { background: rgba(255, 255, 255, 0.75); } html[data-theme="light"] .btn-ghost:hover { background: rgba(0, 160, 233, 0.08); } html[data-theme="light"] .btn-primary { color: #fff; box-shadow: 0 8px 24px rgba(0, 140, 200, 0.3); } html[data-theme="light"] .btn-primary:hover { box-shadow: 0 12px 32px rgba(0, 140, 200, 0.42); } /* 히어로 */ html[data-theme="light"] .hero::after { background: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0, 160, 233, 0.08), transparent 60%), linear-gradient(to bottom, rgba(246, 248, 251, 0.5), rgba(246, 248, 251, 0) 35%, rgba(246, 248, 251, 0) 70%, var(--bg) 100%); } html[data-theme="light"] .hud { background: rgba(255, 255, 255, 0.72); border-top-color: var(--stroke); } html[data-theme="light"] .hero p.lead b { color: var(--text); } /* 노드카 페이지 히어로 글로우 약하게 */ html[data-theme="light"] .page-hero::before { background: radial-gradient(ellipse 60% 50% at 75% 20%, rgba(10, 168, 134, 0.07), transparent 60%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(0, 160, 233, 0.08), transparent 60%); } /* 벤토/하드웨어 장식 */ html[data-theme="light"] .bento-card.featured { border-color: rgba(0, 140, 200, 0.25); } html[data-theme="light"] .hw-card .hw-deco { background: radial-gradient(circle, rgba(0, 160, 233, 0.1), transparent 65%); } html[data-theme="light"] .hw-band { background: linear-gradient(to bottom, var(--bg), var(--bg-3) 30%, var(--bg-3) 70%, var(--bg)); } /* CTA 배너 */ html[data-theme="light"] .cta-banner { border-color: rgba(0, 140, 200, 0.25); background: radial-gradient(ellipse 70% 120% at 80% -20%, rgba(10, 168, 134, 0.08), transparent 60%), radial-gradient(ellipse 70% 120% at 10% 120%, rgba(0, 160, 233, 0.1), transparent 60%), #ffffff; } /* 푸터 */ html[data-theme="light"] .site-footer { background: var(--bg-3); } html[data-theme="light"] .footer-links a:hover { color: var(--text); } /* 노드카 폰 목업: 라이트에서도 다크 스크린 유지 (대비 연출). 내부 텍스트가 라이트 변수를 상속하지 않도록 고정 */ html[data-theme="light"] .phone { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 40px 90px rgba(15, 35, 60, 0.25), 0 0 80px rgba(0, 160, 233, 0.1); } html[data-theme="light"] .phone-screen { background: #0a0f1c; border-color: rgba(255, 255, 255, 0.09); color: #eaf1f8; } html[data-theme="light"] .phone-screen .ps-cell { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); } html[data-theme="light"] .phone-screen .ps-cell .k { color: #5f6b7c; } html[data-theme="light"] .phone-screen .ps-badge, html[data-theme="light"] .phone-screen .ps-gauge .score { color: #38e8c6; } html[data-theme="light"] .phone-screen .ps-gauge .score-label { color: #5f6b7c; } html[data-theme="light"] .phone-screen .ps-cell .v.ok { color: #38e8c6; }