/* ============================================================ app.css — mimeo-ci 테스트 호스트 공통 스타일 출처: Claude Design 프로젝트 "앱 CSS 토큰 및 목업 전달" 전제: 각 뷰의 마지막에 로드 (hostile.css 뒤). 클래스 기반. 요소 전역 리셋 없음(불변 마크업과 충돌 방지). ============================================================ */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; --bg: #f4f5f7; --surface: #ffffff; --line: #e3e6eb; --line-strong: #c9ced6; --text: #20242c; --text-sub: #6a7280; --text-faint: #9aa1ad; --accent: #3053c4; --accent-hover: #24409e; --accent-soft: #eef1fb; --warn-bg: #fff7e6; --warn-border: #ecd394; --warn-text: #8a6712; --radius: 6px; --radius-sm: 4px; --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.06); } /* ---- 베이스(요소 선택자는 body/a 최소한만) ---- */ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* ---- 글로벌 헤더 ---- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: 1024px; margin: 0 auto; padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .brand:hover { color: var(--text); text-decoration: none; } .brand__mark { width: 22px; height: 22px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .brand__env { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 5px; } .gnb { display: flex; gap: 4px; flex: 1; } .gnb__link { display: inline-flex; align-items: center; height: 52px; padding: 0 12px; font-size: 14px; color: var(--text-sub); border-bottom: 2px solid transparent; margin-bottom: -1px; } .gnb__link:hover { color: var(--text); text-decoration: none; } .gnb__link.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } .admin-chip { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 3px; padding: 2px 7px; } /* ---- 레이아웃 ---- */ .container { max-width: 880px; margin: 0 auto; padding: 28px 24px 64px; } .container--read { max-width: 760px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 16px; } .page-head__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .page-head__count { font-size: 13px; color: var(--text-sub); margin-left: 8px; font-weight: 400; } .page-head__actions { display: flex; gap: 8px; } /* ---- 버튼 ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); } .btn:hover { background: #f7f8fa; color: var(--text); text-decoration: none; } .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn--sm { height: 28px; padding: 0 10px; font-size: 12px; } /* ---- 패널(흰 카드) ---- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .panel--pad { padding: 24px; } /* ---- 게시판 테이블 ---- */ .board-table { width: 100%; border-collapse: collapse; font-size: 14px; } .board-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-sub); padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fafbfc; white-space: nowrap; } .board-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; } .board-table tr:last-child td { border-bottom: 0; } .board-table tbody tr:hover td { background: #fafbfd; } .cell-num { width: 56px; color: var(--text-faint); text-align: center; } .cell-date, .cell-views { width: 96px; color: var(--text-sub); white-space: nowrap; font-size: 13px; } .cell-views { width: 64px; text-align: right; } .cell-title a { color: var(--text); } .cell-title a:hover { color: var(--accent); } .cell-slug { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-sub); } .cell-actions { width: 110px; white-space: nowrap; font-size: 13px; } .cell-actions .sep { color: var(--line-strong); margin: 0 6px; } /* ---- 페이지네이션(더미) ---- */ .pager { display: flex; justify-content: center; gap: 4px; margin-top: 20px; } .pager__item { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-sub); font-size: 13px; } .pager__item:hover { background: var(--surface); text-decoration: none; } .pager__item.is-current { background: var(--accent); color: #fff; font-weight: 600; } /* ---- 폼 ---- */ .form-stack { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 13px; font-weight: 600; color: var(--text-sub); } .input { height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-sans); font-size: 15px; color: var(--text); background: var(--surface); box-sizing: border-box; width: 100%; } .input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } .form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--line); } /* ---- 에디터 액자 ---- #editor-root 자체의 마크업은 불변 계약. CSS 로만 최소 프레임 제공. 내부는 에디터가 채우므로 건드리지 않는다. */ .editor-frame { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; } /* 목업 전용(.is-placeholder): 실제 뷰에서는 modifier 클래스를 빼면 됨 */ .editor-frame.is-placeholder #editor-root { min-height: 320px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #f2f3f5, #f2f3f5 12px, #eceef1 12px, #eceef1 24px); color: var(--text-faint); font-size: 13px; } .editor-frame.is-placeholder #editor-root::before { content: "mimeo 에디터 마운트 영역 (#editor-root)"; } /* ---- HTML 소스 접이식 패널 ---- */ .src-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fafbfc; } .src-panel summary { cursor: pointer; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text-sub); user-select: none; list-style-position: inside; } .src-panel summary:hover { color: var(--text); } .src-panel__hint { font-weight: 400; color: var(--text-faint); margin-left: 6px; } .src-panel__body { padding: 0 14px 14px; } .src-panel textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--text); background: var(--surface); resize: vertical; } /* ---- 글 보기 / 콘텐츠 페이지 ---- */ .post-head { margin: 8px 0 16px; } .post-head__title { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; } .post-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sub); } .post-meta .sep { color: var(--line-strong); } .post-nav { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 20px; } /* 뷰어 액자 — 본문은 Shadow DOM(호스트 CSS 불가침). 액자만 담당. */ .viewer-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px 32px; } /* 목업 전용 placeholder — 실제 뷰에서는 modifier 클래스를 뺀다 */ .viewer-frame.is-placeholder mimeo-doc { display: block; min-height: 260px; border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg, #f2f3f5, #f2f3f5 12px, #eceef1 12px, #eceef1 24px); position: relative; } .viewer-frame.is-placeholder mimeo-doc::before { content: " 뷰어 영역 — 본문은 Shadow DOM 렌더"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; } /* ---- 적대적 CSS 배지 ---- */ .hostile-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); font-size: 12px; font-weight: 600; } .hostile-badge::before { content: "⚠"; font-size: 12px; } /* ---- 푸터 ---- */ .site-footer { max-width: 1024px; margin: 0 auto; padding: 16px 24px 32px; font-size: 12px; color: var(--text-faint); } /* ============================================================ 적대적 CSS 방어 — body.page-hostile (글 보기 뷰 전용) hostile.css 가 * / p / div / table 에 !important 를 깔아둔다. app.css 가 뒤에 로드되므로, 동급 !important + 높은 특이성으로 이긴다. 본문( 내부)은 Shadow DOM 이라 원래 안전. ============================================================ */ .page-hostile, .page-hostile * { font-family: var(--font-sans) !important; } .page-hostile div { border: 0 !important; } .page-hostile p { color: var(--text) !important; margin: 0 0 10px !important; line-height: 1.6 !important; } /* 방어로 지워진 chrome 보더 재선언 */ .page-hostile .site-header { border-bottom: 1px solid var(--line) !important; } .page-hostile .viewer-frame { border: 1px solid var(--line) !important; } .page-hostile .hostile-badge { border: 1px solid var(--warn-border) !important; } .page-hostile .btn { border: 1px solid var(--line-strong) !important; } .page-hostile .btn--primary { border-color: var(--accent) !important; } /* ---- 모바일: 안 깨지는 정도 ---- */ @media (max-width: 720px) { .site-header__inner, .container { padding-left: 16px; padding-right: 16px; } .page-head { flex-direction: column; align-items: flex-start; } .cell-views, .cell-date { display: none; } .viewer-frame { padding: 20px 16px; } } /* ============================================================ 통합 글루 (mimeo-ci 이식 시 추가) mimeo-host.js 는 에디터 마운트 성공 시 textarea 를 인라인 display:none 으로 숨긴다 — 그 경우 "HTML 소스" 패널 전체를 함께 숨긴다(빈 패널 노출 방지). JS 미로드 시에는 textarea 가 폴백 편집기로 패널 안에 그대로 보인다. ============================================================ */ .src-panel:has(textarea[style*="none"]) { display: none; } /* 빈 제목 폴백 텍스트 — 목록/보기에서 "(제목 없음)" 표시용 */ .title-empty { color: var(--text-faint); font-style: italic; }