/* ───── 공통 사이트 크롬 (내비게이션 / 푸터 / 본문 콘텐츠) ───── 페이지별 인라인 :root 변수와 별개로, 사이트 공통 색상을 여기서 정의한다. [data-theme="dark"] 는 에 설정되므로 다크모드도 자동 반영된다. */ :root { --site-text: #444; --site-heading: #333; --site-muted: #777; --site-card: #fff; --site-shadow: 0 10px 40px rgba(0,0,0,0.18); --site-border: #ececf2; --site-nav-bg: rgba(255,255,255,0.92); --site-link: #6a4fb0; --site-accent: #764ba2; --site-chip: #f2f0fa; } [data-theme="dark"] { --site-text: #c7c7de; --site-heading: #f0f0f5; --site-muted: #9a9ab5; --site-card: #242444; --site-shadow: 0 10px 40px rgba(0,0,0,0.5); --site-border: #3a3a5e; --site-nav-bg: rgba(26,26,46,0.92); --site-link: #a78bfa; --site-accent: #a78bfa; --site-chip: #1c1c34; } /* 내비게이션에 테마 토글이 있으므로 카드에 떠있던 기존 플로팅 토글은 숨김 */ body.site .theme-toggle { display: none; } /* 페이지 레이아웃: 상단 내비 - 본문 - 하단 푸터 세로 배치 */ body.site { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 0; } body.site .page-main { width: 100%; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 20px 40px; } /* ── 상단 내비게이션 ── */ .site-nav { position: sticky; top: 0; z-index: 50; width: 100%; background: var(--site-nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--site-border); } .nav-inner { max-width: 760px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .nav-brand { font-size: 17px; font-weight: bold; color: var(--site-heading); text-decoration: none; white-space: nowrap; } .nav-links { display: flex; flex-wrap: wrap; gap: 4px; } .nav-links a { font-size: 14px; color: var(--site-text); text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: background 0.2s ease, color 0.2s ease; } .nav-links a:hover { background: var(--site-chip); color: var(--site-accent); } .nav-links a.active { color: var(--site-accent); font-weight: bold; } .nav-theme { border: none; background: var(--site-chip); color: var(--site-heading); width: 32px; height: 32px; border-radius: 8px; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; transition: transform 0.15s ease; } .nav-theme:hover { transform: scale(1.1); } /* ── 본문 콘텐츠 카드 (설명/안내 글) ── */ .content { background: var(--site-card); border-radius: 24px; box-shadow: var(--site-shadow); padding: 32px 30px; width: 100%; max-width: 560px; text-align: left; color: var(--site-text); line-height: 1.7; } .content h2 { font-size: 20px; color: var(--site-heading); margin: 4px 0 14px; } .content h3 { font-size: 16px; color: var(--site-heading); margin: 22px 0 8px; } .content p { margin-bottom: 12px; font-size: 15px; } .content ul, .content ol { margin: 0 0 14px 20px; } .content li { margin-bottom: 6px; font-size: 15px; } .content a { color: var(--site-link); } .content .lead { font-size: 16px; color: var(--site-muted); margin-bottom: 18px; } .content table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14px; } .content th, .content td { border: 1px solid var(--site-border); padding: 8px 10px; text-align: center; } .content th { background: var(--site-chip); color: var(--site-heading); } .content .faq-q { font-weight: bold; color: var(--site-heading); margin-bottom: 4px; } .content .updated { font-size: 13px; color: var(--site-muted); margin-top: 8px; } .callout { background: var(--site-chip); border-left: 4px solid var(--site-accent); border-radius: 10px; padding: 14px 16px; margin: 16px 0; font-size: 14px; } /* ── 하단 푸터 ── */ .site-footer { width: 100%; border-top: 1px solid var(--site-border); background: var(--site-nav-bg); padding: 24px 20px 32px; text-align: center; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 12px; } .footer-links a { font-size: 14px; color: var(--site-link); text-decoration: none; } .footer-links a:hover { text-decoration: underline; } .footer-copy { font-size: 12px; color: var(--site-muted); line-height: 1.6; }