/* ═══════════════════════════════════════════
올인원 계산기 — 공용 스타일시트 (shared.css)
프리미엄 고도화 버전 (Pretendard 폰트 & Glassmorphism)
═══════════════════════════════════════════ */
/* ── 웹 폰트 (Pretendard) ──
각 HTML 에서 + 로 로드합니다.
@import는 렌더블로킹이므로 제거했습니다. ── */
/* ── 다크 모드 (기본) ── */
:root, [data-theme="dark"] {
--primary: #6366f1;
--primary-dark: #4f46e5;
--accent: #a78bfa;
--accent-light: #c4b5fd;
--bg-body: #0a0a16; /* 더 깊고 고급스러운 다크 */
--bg-body-rgb: 10, 10, 22;
--bg-card: rgba(255, 255, 255, 0.04);
--bg-card-hover: rgba(255, 255, 255, 0.08);
--bg-glass: rgba(20, 20, 35, 0.6);
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--border: rgba(255, 255, 255, 0.06);
--border-light: rgba(255, 255, 255, 0.12);
--glow: rgba(99, 102, 241, 0.4);
--glow-bg1: rgba(99, 102, 241, 0.18);
--glow-bg2: rgba(167, 139, 250, 0.12);
--glow-bg3: rgba(14, 165, 233, 0.1);
--hero-grad-start: #ffffff;
--hero-grad-end: #a78bfa;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.3);
--shadow-lg: 0 16px 40px rgba(0,0,0,0.5);
}
/* ── 라이트 모드 ── */
[data-theme="light"] {
--primary: #4f46e5;
--primary-dark: #4338ca;
--accent: #4338ca;
--accent-light: #6366f1;
--bg-body: #f4f5f9; /* 깨끗하고 부드러운 화이트 톤 */
--bg-body-rgb: 244, 245, 249;
--bg-card: rgba(255, 255, 255, 0.6);
--bg-card-hover: rgba(255, 255, 255, 0.9);
--bg-glass: rgba(255, 255, 255, 0.7);
--text-primary: #0f172a;
--text-secondary: #475569;
--border: rgba(0, 0, 0, 0.06);
--border-light: rgba(0, 0, 0, 0.12);
--glow: rgba(99, 102, 241, 0.2);
--glow-bg1: rgba(99, 102, 241, 0.08);
--glow-bg2: rgba(167, 139, 250, 0.06);
--glow-bg3: rgba(14, 165, 233, 0.05);
--hero-grad-start: #0f172a;
--hero-grad-end: #4f46e5;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
--shadow-lg: 0 16px 40px rgba(99,102,241,0.12);
}
/* ── 리셋 & 기본 ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: var(--bg-body); color: var(--text-primary);
min-height: 100vh; overflow-x: hidden; line-height: 1.6;
transition: background 0.4s ease, color 0.4s ease;
-webkit-font-smoothing: antialiased;
}
/* ── 키보드 포커스 표시 (WCAG 2.4.7) ── */
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* ══ 배경 이펙트 (고급 메쉬 그라디언트) ══ */
.bg-glow {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 20% 20%, var(--glow-bg1) 0%, transparent 50%),
radial-gradient(ellipse 60% 70% at 80% 80%, var(--glow-bg2) 0%, transparent 50%),
radial-gradient(ellipse 70% 50% at 50% 50%, var(--glow-bg3) 0%, transparent 50%);
animation: meshDrift 30s ease-in-out infinite alternate;
transition: background 0.4s ease;
}
@keyframes meshDrift{
0% {transform: scale(1) translate(0,0)}
33% {transform: scale(1.05) translate(3%, -2%)}
66% {transform: scale(1.02) translate(-2%, 3%)}
100%{transform: scale(1.06) translate(-1%, -1%)}
}
.grid-pattern {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 80px 80px; opacity: 0.4;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 80%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 80%);
}
/* ══ 글래스모피즘 유틸리티 ══ */
.glass-panel {
background: var(--bg-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
}
/* ══ 스크롤 애니메이션 유틸리티 ══ */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
/* ══ 헤더 ══ */
.site-header {
position: sticky; top: 0; z-index: 100;
max-width: 1100px; margin: 0 auto; padding: 16px 24px;
display: flex; align-items: center; justify-content: space-between;
background: rgba(var(--bg-body-rgb, 10,10,22), 0.7);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
transition: all 0.3s ease;
}
[data-theme="light"] .site-header {
background: rgba(var(--bg-body-rgb), 0.7);
}
.logo { font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
.logo a { color: inherit; text-decoration: none; }
.logo span { opacity: 0.5; font-weight: 500; font-size: 13px; margin-left: 6px; }
.theme-toggle { display: flex; align-items: center; gap: 8px; }
.theme-toggle .tl { font-size: 15px; line-height: 1; }
.toggle-switch {
position: relative; width: 48px; height: 26px;
background: var(--border-light); border-radius: 13px;
cursor: pointer; border: none; transition: background 0.3s;
}
.toggle-switch::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 20px; height: 20px; background: var(--text-primary);
border-radius: 50%; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: var(--shadow-sm);
}
[data-theme="light"] .toggle-switch { background: var(--primary-dark); }
[data-theme="light"] .toggle-switch::after { transform: translateX(22px); background: var(--bg-body); }
/* ══ 브레드크럼 ══ */
.breadcrumb {
position: relative; z-index: 1; max-width: 1100px; margin: 0 auto;
padding: 16px 24px 0; font-size: 13px; color: var(--text-secondary);
}
.breadcrumb a { color: var(--accent); text-decoration: none; transition: color 0.2s; font-weight: 500;}
.breadcrumb a:hover { color: var(--accent-light); }
/* ══ 푸터 ══ */
.site-footer {
position: relative; z-index: 1; max-width: 1100px; margin: 60px auto 0;
padding: 32px 24px; border-top: 1px solid var(--border);
text-align: center; font-size: 13px; color: var(--text-secondary);
}
.site-footer a {
color: var(--text-secondary); text-decoration: none;
margin: 0 12px; transition: color 0.2s;
display: inline-block;
padding: 12px 16px;
min-height: 48px;
line-height: 24px;
}
.site-footer a:hover { color: var(--accent); }
.site-footer .copyright { margin-top: 12px; font-size: 12px; opacity: 0.6; }
/* ══ 라이트모드 카드 색상 (기존 하이라이트/특수카드용) ══ */
[data-theme="light"] .color-card.c1{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.15)}
[data-theme="light"] .color-card.c1 h3{color:#4338ca}
[data-theme="light"] .color-card.c2{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.15)}
[data-theme="light"] .color-card.c2 h3{color:#047857}
[data-theme="light"] .color-card.c3{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.15)}
[data-theme="light"] .color-card.c3 h3{color:#b45309}
[data-theme="light"] .color-card.c4{background:rgba(236,72,153,.06);border-color:rgba(236,72,153,.15)}
[data-theme="light"] .color-card.c4 h3{color:#be185d}
[data-theme="light"] .color-card.c5{background:rgba(14,165,233,.06);border-color:rgba(14,165,233,.15)}
[data-theme="light"] .color-card.c5 h3{color:#0369a1}
[data-theme="light"] .color-card.c6{background:rgba(168,85,247,.06);border-color:rgba(168,85,247,.15)}
[data-theme="light"] .color-card.c6 h3{color:#6d28d9}
/* 공용 버튼 */
.btn-primary {
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff; text-decoration: none; padding: 16px 36px;
border-radius: 100px; font-size: 16px; font-weight: 700;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 8px 24px rgba(99,102,241,0.4); border: none; cursor: pointer;
}
.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 32px rgba(99,102,241,0.6);
}
/* ══ 반응형 ══ */
@media(max-width:768px){
.site-header{padding:14px 16px;}
.breadcrumb{padding:12px 16px 0;}
.site-footer{padding:24px 16px;}
.link-tags a {
min-height: 44px;
padding: 10px 16px;
display: inline-flex;
align-items: center;
}
}