/* ============================================================ common.css — 페이지 공통 스타일 (index·contribute·privacy·terms) reset · 기본 body · 헤더 · 베타 배지/알림 · 푸터(.disclaimer) editor.html은 자체 레이아웃이라 이 CSS를 쓰지 않음. ============================================================ */ /* ---------- Reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- Base ---------- */ body { font-family: NanumGothic, 'Nanum Gothic', 'Malgun Gothic', sans-serif; background: #f9f8f7; color: #2c313d; min-height: 100vh; letter-spacing: -0.3px; } /* ---------- Header ---------- */ header { background: #2c313d; color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 16px; letter-spacing: -0.3px; } .back-link { color: #8ba4b3; font-size: 13px; text-decoration: none; transition: color 0.15s; } .back-link:hover { color: #fff; } .header-title { font-size: 16px; font-weight: bold; } .beta-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; background: #fa5536; color: #fff; font-size: 10px; font-weight: bold; border-radius: 3px; letter-spacing: 1px; vertical-align: middle; } /* ---------- Header user-menu (common-header.js가 주입) ---------- */ .header-spacer { flex: 1; } .user-menu { position: relative; display: flex; align-items: center; gap: 8px; } .user-menu .auth-link { color: #8ba4b3; text-decoration: none; font-size: 13px; padding: 4px 4px; transition: color 0.15s; } .user-menu .auth-link:hover { color: #fff; } .user-menu .auth-link.primary { color: #fff; background: #4f80ff; padding: 4px 12px; border-radius: 3px; font-weight: bold; transition: background 0.15s; } .user-menu .auth-link.primary:hover { background: #3a6dec; color: #fff; } .user-menu .username-button { background: none; border: none; color: #fff; font-size: 13px; font-weight: bold; cursor: pointer; padding: 4px 8px; border-radius: 3px; display: flex; align-items: center; gap: 4px; font-family: inherit; letter-spacing: -0.3px; transition: background 0.15s; } .user-menu .username-button:hover { background: rgba(255, 255, 255, 0.1); } .user-menu .caret { font-size: 9px; opacity: 0.7; } .user-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #fff; border: 1px solid #e6e7e8; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); min-width: 140px; padding: 4px 0; z-index: 1000; } .user-dropdown a, .user-dropdown button { display: block; width: 100%; text-align: left; padding: 8px 14px; background: none; border: none; cursor: pointer; color: #2c313d; font-size: 13px; font-family: inherit; text-decoration: none; letter-spacing: -0.3px; } .user-dropdown a:hover, .user-dropdown button:hover { background: #f3f6fa; } /* ---------- Beta notice bar (index 전용, 다른 페이지에선 마크업 없음) ---------- */ .beta-notice { background: #ecf8ff; border-bottom: 1px solid #d6e9f4; color: #2c313d; padding: 10px 24px; font-size: 12px; line-height: 1.5; letter-spacing: -0.3px; } .beta-notice::before { content: 'BETA'; display: inline-block; background: #fa5536; color: #fff; font-size: 10px; font-weight: bold; padding: 1px 6px; border-radius: 3px; margin-right: 8px; letter-spacing: 1px; vertical-align: middle; } /* ---------- Footer (disclaimer) ---------- */ /* common-footer.js가 끝에