/** * sites/css/base.css — 모든 멀티사이트가 공유하는 공통 스타일 * * 🔴 이 파일에는 색을 직접 쓰지 않는다. 전부 CSS 변수(--site-*)를 참조한다. * 색은 sites//style.css 가 :root 에 정의한다. * 그래야 사이트를 추가할 때 변수 몇 줄만 쓰면 되고, 구조 수정은 이 파일 한 곳에서 끝난다. * * 🔴 화면 조각의 모양은 여기가 아니라 ./widgets 의 위젯 CSS 가 갖는다(PHILGO-WIDGETS.md). * 이 파일에는 위젯에 속하지 않는 것 — 문서 전체 기본값과 페이지 골격 — 만 둔다. * * 🔴 sites/layout.php 는 이 파일 다음에 사이트 style.css 를 싣는다. * 그래야 사이트 고유 값이 공용 규칙을 덮는다. * * v7 웹은 라이트 모드 전용이므로 다크 모드 미디어쿼리를 두지 않는다. * 호버 명암은 프로젝트 규칙에 따라 배경 #f1f5f9 / 텍스트 #64748b 를 쓴다. */ * { box-sizing: border-box; } body { margin: 0; /* 웹폰트를 로드하지 않으므로 시스템 폰트 스택을 쓴다. (Noto Sans KR 을 첫 순위로 적으면 설치된 기기와 아닌 기기에서 글자가 갈린다) */ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 1.5; color: var(--site-text, #1f2937); background: var(--site-page-bg, var(--site-bg, #fff)); /* 좁은 화면에서 넘치는 요소 때문에 가로 스크롤이 생기지 않게 */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } /* ── Web Awesome 커스텀 엘리먼트가 아직 정의되기 전 ────────────── * * 🔴 로더는 type="module" 이라 HTML 파싱이 끝난 뒤에야 실행된다. * 그 사이 브라우저에게 는 그냥 "모르는 인라인 태그" 이므로, * 팝업 안에 **접어 둔** 링크·옵션을 본문에 그대로 펼쳐 그린다. * * 실측(ownph, 1440px, 로더 도착 전): * 헤더 77px → 169px (게시판 팝오버 4줄 + 언어 5개가 헤더 안에 쏟아진다) * 매물 목록 5244px → 6387px (wa-option 83개 · wa-dropdown-item 10개가 펼쳐진다) * * 메뉴를 눌러 페이지를 옮길 때마다 이 부푼 화면이 한 박자 보였다가 제자리로 접힌다. * 이것이 "헤더가 일그러진다" 의 정체다 — CSS 캐시나 로드 순서 문제가 아니다. * (캐시 버전은 Assets::version() 이 filemtime 으로 이미 갱신하고 있다) * * 🔴 새 WA 컴포넌트를 화면에 쓸 때는 여기 세 묶음 중 하나에 반드시 넣는다. * 빠뜨리면 그 자리에서 같은 증상이 다시 난다. * * 정의된 뒤 그 요소가 **어디에 있게 되는가** 로 셋을 가른다. */ /* ① 자리는 남기고 글자만 감춘다 — 정의된 뒤에도 제자리에 그대로 남는 것들. display 를 지우면 자리가 접혔다 다시 생기며 옆 요소가 밀린다. */ wa-button:not(:defined), wa-input:not(:defined), wa-select:not(:defined), wa-checkbox:not(:defined), wa-avatar:not(:defined), wa-card:not(:defined), wa-callout:not(:defined) { visibility: hidden; } /* ② 통째로 지운다 — 정의되면 팝업·오버레이로 떠서 문서 흐름에서 아예 빠지는 것들. 이쪽에 visibility 를 쓰면 안 보이는 채로 덩치만큼 자리를 먹어, 헤더가 부풀고 본문에 빈 구멍이 생긴다. (wa-dialog 가 실제로 그랬다) */ wa-popover:not(:defined), wa-tooltip:not(:defined), wa-toast:not(:defined), wa-dialog:not(:defined), wa-drawer:not(:defined) { display: none; } /* ③ 속만 지운다 — 겉(트리거)은 자리를 지켜야 하고 속(항목 목록)은 원래 닫혀 있어야 하는 것. wa-option 은 매물 목록 한 페이지에 83개가 들어간다. */ wa-dropdown:not(:defined) > :not([slot="trigger"]), wa-option:not(:defined) { display: none; } /* wa-details 는 본문이 **텍스트 노드**인 경우가 있어(sites/pages/real_estate/my.php) 자식 선택자로 감출 수 없다. 접힌 높이(실측 66px)만큼만 자리를 잡고 나머지를 잘라 둔다. */ wa-details:not(:defined) { display: block; height: 4rem; overflow: hidden; visibility: hidden; } /* 🔴 wa-button 은 감추는 것만으로 부족하다 — 자리를 **크기까지** 예약한다. * 정의되는 순간 shadow DOM 이 좌우 패딩과 높이를 붙여 버튼이 갑자기 커진다. * 헤더의 버튼 3개(게시판·언어·매물 등록)가 한꺼번에 커지면서 * 옆의 검색창을 665px → 533px 로 밀어냈다(실측). * * 아래 치수는 WA 3.3.1 실측값이다: medium 높이 46px·좌우 패딩 16px·글자 16px, * small 38px·14px·14px. 미리 같은 치수를 잡아 두면 로더가 도착해도 폭이 움직이지 않는다. */ wa-button:not(:defined) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 2.875rem; padding: 0 1rem; font-size: 1rem; /* 아이콘(slot="start")과 글자 사이 간격. WA 가 정의된 뒤 슬롯에 붙이는 여백과 맞춘다. 자식이 하나뿐인 버튼(아이콘 없음)에는 flex gap 이 아무 영향을 주지 않는다. */ gap: 0.75rem; } wa-button:not(:defined)[size="small"] { min-height: 2.375rem; padding: 0 0.875rem; font-size: 0.875rem; } /* with-caret 은 오른쪽에 화살표가 한 칸 더 붙는다. */ wa-button:not(:defined)[with-caret] { padding-right: 2.25rem; } /* ── 본문 골격 ─────────────────────────────────────────────── 🔴 모든 페이지의 폭은 이제 5칼럼 셸(layout/five-column)이 정한다. 셸이 --w-shell-max 를 기준으로 [광고][사이드][본문][사이드][광고] 를 배치하므로, 여기서 폭을 또 제한하면 좌우 여백이 두 번 들어가 본문이 셸보다 좁아진다. .site-main 은 셸을 쓰지 않는 페이지($shell = 'bare')에만 남는다 — 로그인처럼 좁은 화면이 어울리는 곳이다. @see sites/layout.php */ .site-main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } .site-main.is-wide { max-width: none; margin: 0; padding: 0; } /* ── 셸 안의 세로 간격 ─────────────────────────────────────── 셸은 배치만 하고 여백은 사이트가 정한다(widgets 규약). 가운데 칸과 사이드바가 헤더에 너무 붙지 않도록 최소한의 아래 여백만 준다. */ .site-shell { padding-bottom: 2rem; } /* ── 로그인 ───────────────────────────────────────────────── ⚠️ 아직 native