/* ========================================================================== 디자인 토큰(2026-09-04) - 지금까지 색/모서리/그림자 값이 파일 곳곳에 리터럴로 흩어져 있어서 같은 성격의 요소인데도 값이 조금씩 달랐다(회색만 7종, border-radius 9종, box-shadow 8종 - "화면이 엉성해 보인다"는 지적의 원인 중 하나). 아래 한 곳에서만 정의하고 나머지는 전부 var()로 참조한다. 색 계열은 이미 대부분 zinc 계열이었어서 그쪽으로 통일했다(상단 최근본 바만 혼자 다른 회색 계열(#fafafa/#eceef1/#3a3d42)을 쓰고 있었다). ========================================================================== */ :root { /* 텍스트 */ --c-ink: #18181b; /* 제목/강조/채워진 버튼 배경 */ --c-text: #3f3f46; /* 본문 */ --c-text-soft: #52525b; /* 메뉴 등 보조 본문 */ --c-muted: #71717a; /* 부가 정보 */ --c-faint: #a1a1aa; /* 가장 옅은 텍스트 */ /* 링크 파랑 - CLAUDE.md 무채색 원칙의 의도적 예외(카드 도메인/첨부파일처럼 "진짜 링크"에만) */ --c-link: #2563eb; --c-danger: #e11d48; /* 삭제 버튼(global.css .is-danger)·검증 에러·비공개 뱃지 - 무채색 원칙의 의도적 예외 */ /* 포인트 색(2026-09-04 지정) - "지금 여기"를 알리는 선택 표시에만 쓴다: 하단바 선택 칸, 사이드바 현재 메뉴, 선택된 태그 칩, 정렬 탭 선택, 상단 최근본 바 배경/스크롤바. **버튼에는 쓰지 않는다**(2026-09-04 "기본 버튼색은 포인트색 말고 진한 회색으로" 요청) - 기본 버튼은 --c-ink다. CLAUDE.md 무채색 원칙의 의도적 예외이며, 이 값 하나만 바꾸면 선택 표시 색이 전부 함께 바뀐다. */ --c-point: #4bb749; --c-point-hover: #41a33f; /* 포인트 색을 옅게 깐 배경(상단 최근본 바, 하단바 선택 칸 등) - 불투명 값이어야 스크롤바 막대를 가늘어 보이게 하는 테두리 기법(아래 .moayo-favbar-scroll)에 그대로 쓸 수 있다. */ --c-point-soft: #eaf5e9; /* 배경/선 */ --c-bg: #f6f6f7; /* 페이지 배경(global.css html과 같은 값) */ --c-surface: #fff; /* 카드/패널 */ --c-subtle: #f4f4f5; /* 옅은 버튼/칩 배경 */ --c-subtle-hover: #e4e4e7; --c-line: #ececef; /* 기본 경계선 */ --c-line-strong: #e4e4e7; /* 모서리 - 아래 값들로만 쓴다 */ --r-xs: 5px; /* 헤더 검색창(2026-09-04 요청으로 알약 -> 각진 5px) */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* 그림자 - 3단계 */ --sh-1: 0 1px 2px rgba(24, 24, 27, .04); --sh-2: 0 2px 6px rgba(24, 24, 27, .10); --sh-3: 0 2px 4px rgba(24, 24, 27, .06), 0 20px 40px -12px rgba(24, 24, 27, .16); /* 앱 셸 */ --header-h: 60px; /* 2026-09-04 요청(64 -> 50 -> 80 -> 60) */ --sidebar-w: 240px; /* 여백/높이 기준(2026-09-04) - "선이 딱딱 맞았으면 좋겠다"는 요청으로 도입. 콘텐츠 좌우 여백, 카드 사이 간격, 컨트롤 높이를 이 값들로만 쓴다(임의의 rem 값을 새로 만들지 말 것). --gutter는 헤더/콘텐츠/푸터/하단바가 모두 공유하는 좌우 여백이라, 이 값 하나만 바꾸면 화면 전체의 좌측 기준선이 함께 움직인다. 모바일 16 -> 8px(2026-09-15 요청, "좌우 여백이 너무 크다") - PC(768px~)는 아래 24px 그대로. */ --gutter: 8px; /* 글자 크기 - 6단계(2026-09-05). 그전에는 .62~2.4rem 사이에 26종이 흩어져 있어서 같은 성격의 글자인데 화면마다 크기가 달랐다(색·모서리·그림자를 토큰으로 묶은 것과 같은 이유). */ --fs-xs: .72rem; /* 배지, 날짜, 캡션 */ --fs-sm: .8rem; /* 보조 텍스트, 칩/작은 버튼 라벨 */ --fs-md: .875rem; /* 기본 UI 텍스트 */ --fs-lg: .95rem; /* 강조 UI 텍스트, 리드 문장 */ --fs-body: 1rem; /* 읽는 본문 */ --fs-title: 1.05rem; /* 섹션 제목 */ --fs-page: 1.6rem; /* 페이지 제목 */ /* 간격 - 4의 배수 6단계. px와 rem을 섞어 쓰던 걸(54종) 이 눈금으로 맞춘다. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; /* 본문 안 아이콘 - 3단계. 13/16/17/18/21px가 제각각이었다. */ --ic-sm: 16px; --ic-md: 20px; --ic-lg: 28px; /* 겹침 순서(2026-09-05) - 그전에는 1075/1080/1084/1085/1090/1100이 여기저기 하드코딩돼 있어서 새 레이어를 올릴 때마다 무엇이 무엇 위인지 파일을 뒤져야 했다. 값의 상하 관계는 그대로 두고 이름만 붙였다(.claude/references/overlay-modal-conventions.md의 "z-index 계층은 CSS 변수로"). */ --z-float: 1075; /* 맨 위로 버튼 */ --z-header: 1080; /* 상단 헤더 / 모바일 하단바 */ --z-drawer-backdrop: 1084; /* 모바일 사이드바 뒤 어두운 배경 */ --z-drawer: 1085; /* 모바일 사이드바 드로어 */ --z-overlay: 1090; /* 전체화면 오버레이(계정) */ --z-confirm: 1095; /* 공용 확인/알림 모달 - 앱 셸보다 위 */ --z-toast: 1100; /* 토스트는 항상 맨 위 */ --read-w: 68ch; /* 줄글 최대 폭 - 이보다 길면 다음 줄 첫 글자를 놓친다(2026-09-05) */ --control-h: 38px; /* 헤더의 햄버거/검색창/아이콘 버튼/로그인 버튼(헤더 50px 안에 들어감) */ --control-h-sm: 34px; /* 본문 안의 작은 컨트롤(정렬 세그먼트, is-small 버튼) */ --bottombar-h: 64px; /* 모바일 하단바 - 콘텐츠 아래 여백과 "맨 위로" 버튼 위치가 이 값을 따라간다 */ } @media (min-width: 768px) { :root { --gutter: 24px; } } /* Bulma 위에 얹는 최소한의 프로젝트 커스텀 스타일 */ /* 폼 검증 에러 표시 (public/js/form-validate.js) - 관리자 화면(admin/_style.php)과 동일한 규칙 */ /* 클라이언트 검증(form-validate.js)과 서버 검증(Bulma .is-danger)이 서로 다른 빨강을 쓰고 있어서 같은 필드인데 색이 달랐다(2026-09-05) - global.css의 .is-danger(#e11d48)에 맞춘다. */ .input.field-error, .textarea.field-error, select.field-error, .field-error { border-color: #e11d48; } .error-message { display: block; color: #e11d48; font-size: 12px; margin: .25rem 0 0; min-height: 14px; } .error-message:empty { display: none; } /* html/body에 height:100%를 주면 body가 "뷰포트 높이에 고정된 세로 flex 컨테이너"가 돼서 두 가지가 망가진다(2026-09-04에 확인): (1) 헤더가 flex-shrink로 찌그러져 height가 무시되고, (2) position:sticky의 기준 상자가 그 한 화면으로 제한돼 헤더가 한 화면 넘게 스크롤하면 따라오지 않는다. 아래 body의 min-height:100vh만으로 원래 의도(내용이 짧아도 화면을 채움)는 그대로 유지된다. */ html { height: auto; } /* 풀블리드(전체 폭) 섹션이 100vw 계산 때문에 가로 스크롤을 만드는 걸 막는 안전장치. hidden이 아니라 clip인 이유(2026-09-05): overflow-x:hidden은 html을 "스크롤 컨테이너"로 만들어버려서 그 안의 position:sticky가 통째로 무력화된다(Chrome/Safari의 잘 알려진 동작) - 실제로 좌측 사이드바가 붙어 있지 못하고 본문과 같이 밀려 올라가 화면에서 사라지고 있었다. overflow-x:clip은 스크롤 컨테이너를 만들지 않고 넘치는 부분만 잘라내서 sticky가 그대로 산다. (지금은 100vw를 쓰는 곳이 남아 있지 않지만, 다시 생겨도 가로 스크롤이 안 나게 남겨둔다) */ html { overflow-x: clip; } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } /* 로그인/회원가입처럼 박스 하나짜리 작은 페이지가 화면 위쪽에 붙어 보이지 않도록 세로 중앙보다 살짝 위에 오게 배치 (min-height 안에서만 정중앙 정렬하고, 그 아래 여백을 더 둬서 시각적 중심을 위로 당김) */ .auth-page { min-height: 60vh; align-items: center; padding-bottom: 4rem; } /* 소셜 로그인 버튼 - 무채색 원칙의 4번째 예외(frontend-bulma.md 참고). 구글/카카오는 자기 브랜드 색을 쓰는 게 사용자에게 즉시 인지되는 관용적 UI라 예외로 둔다. */ .social-login-divider { display: flex; align-items: center; text-align: center; color: #999; font-size: var(--fs-xs); } .social-login-divider::before, .social-login-divider::after { content: ""; flex: 1; border-bottom: 1px solid #e0e0e0; } .social-login-divider span { padding: 0 .75rem; } .social-login-btn { border: 1px solid #dbdbdb; font-weight: 600; } .social-login-btn.google { background: #fff; color: #3c4043; } .social-login-btn.google:hover { background: #f7f7f7; } .social-login-btn.kakao { background: #FEE500; color: #191600; border-color: #FEE500; } .social-login-btn.kakao:hover { background: #f5dc00; } /* 회원가입 약관동의 - 개별 항목은 접었다 펼 수 있는
로 본문을 보여준다 */ .terms-agreement { padding: 1rem; } .terms-content summary { cursor: pointer; } .terms-content-box { max-height: 160px; overflow-y: auto; margin-top: .4rem; padding: .6rem .75rem; background: #fafafa; border: 1px solid #eee; border-radius: var(--r-sm); color: #555; line-height: 1.5; } .banner-image { width: 100%; border-radius: var(--r-sm); margin-bottom: 0.75rem; } .comment-item { padding: 0.65rem 0; border-bottom: 1px solid var(--c-line); } /* ========================================================================== moayo 앱 셸 (layout.php, phpdashapi 기준 레이아웃 재구성 - 2026-08-18, .claude/features/moayo 작업사항 "레이아웃은 phpdashapi처럼" 요청) phpdashapi(.dash-pc-header/.dash-sidebar/.dash-card/.dash-topbar/.dash-bottombar/ .dash-mail-modal, public/css/custom.css)의 앱 셸 컴포넌트를 이식했다. 다만 그쪽 콘텐츠는 채팅함류라 .dash-card가 "고정 높이 + 내부 스크롤"이었던 반면, 이 프로젝트 콘텐츠(목록/상세/ 글쓰기 폼)는 일반 웹페이지처럼 문서 흐름대로 길어져야 하므로 그 부분만 바꿨다: - .moayo-topbar는 카드 내부 스크롤이 아니라 sticky로 화면에 붙는다 - .moayo-bottombar는 모바일에서 position:fixed로 화면 하단에 띄우고, 가려지는 만큼 .moayo-content가 padding-bottom으로 자리를 비워둔다(데스크톱은 사이드바가 대신하므로 숨김, phpdashapi와 동일) 나머지(사이드바 드로어/콘솔 전환, 오버레이 "←제목" 레이어 등)는 색상/크기/애니메이션까지 그대로 옮겼다. ========================================================================== */ .moayo-pc-header { position: sticky; top: 0; z-index: var(--z-header); /* flex: 0 0 auto가 없으면 height가 통째로 무시된다(2026-09-04에 발견) - body가 html,body{height:100%} + display:flex;flex-direction:column이라 "뷰포트 높이에 고정된 세로 flex 컨테이너"가 되는데, 그 안에서 .moayo-wrap은 내용이 커서 못 줄어들고 이 헤더만 flex-shrink 기본값(1)으로 자기 내용 높이(약 40px)까지 찌그러졌다. 그래서 그동안 CSS에 적힌 높이(128px -> 64 -> 50)가 화면에 한 번도 반영되지 않았다. */ flex: 0 0 auto; display: flex; align-items: center; gap: 0; /* 좌측 블록(.moayo-pc-header-lead)이 정확히 사이드바 폭이어야 해서 gap을 쓰지 않는다 */ width: 100%; /* 128px였다가 64px로(2026-09-04) - 안에 든 건 햄버거/브랜드/아이콘 2개뿐인데 높이만 128px라 상단 최근본 바(약 80px)와 합쳐 스크롤 전에 200px 넘게 잡아먹고 있었다. 이 값을 바꾸면 사이드바/백드롭이 시작하는 위치도 같이 움직여야 해서 --header-h 하나로 묶어 참조한다. */ height: var(--header-h); padding: 0 var(--gutter) 0 0; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--c-line); box-sizing: border-box; } .moayo-pc-header-brand { overflow: hidden; white-space: nowrap; font-size: var(--fs-page); font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); text-decoration: none; } /* 햄버거+브랜드를 사이드바와 똑같은 폭으로 묶는다(2026-09-04) - 그래야 그 오른쪽에 오는 검색창의 왼쪽 선이 콘텐츠(페이지 제목/카드 그리드/푸터)의 왼쪽 선과 정확히 일치한다. */ .moayo-pc-header-lead { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; padding: 0 var(--gutter); box-sizing: border-box; } /* 데스크톱에서는 좌측 패딩을 사이드바 안쪽 여백(10px)과 맞춰 햄버거가 사이드바 항목 박스와 같은 선에서 시작하게 하고, 전체 폭을 사이드바 폭 + --gutter로 잡아 오른쪽의 검색창이 콘텐츠 좌측선에서 시작하게 한다. 모바일은 사이드바가 없으므로 그냥 --gutter를 쓴다. */ /* 폭을 사이드바와 정확히 같게 둔다(2026-09-04 요청) - 그러면 검색창의 왼쪽 선이 사이드바 오른쪽 경계선과 딱 맞는다. 예전엔 여기에 --gutter를 더해서 카드/제목의 왼쪽 선(사이드바 + 콘텐츠 여백)에 맞췄었는데, 요청대로 경계선 기준으로 바꿨다. */ @media (min-width: 768px) { .moayo-pc-header-lead { width: var(--sidebar-w); padding-left: 10px; padding-right: 0; } } .moayo-pc-header-spacer { flex: 1 1 auto; } .moayo-sidebar-toggle { flex: 0 0 auto; display: flex; position: relative; width: var(--control-h); height: var(--control-h); border: none; border-radius: 50%; background: var(--c-subtle); color: var(--c-text); cursor: pointer; transition: background-color .15s, transform .15s; } .moayo-sidebar-toggle:hover { background: var(--c-subtle-hover); transform: scale(1.04); } .moayo-sidebar-toggle-bar { position: absolute; left: calc(50% - 8px); width: 16px; height: 2px; border-radius: 1px; background: currentColor; } .moayo-sidebar-toggle-bar:nth-child(1) { top: calc(50% - 6px); } .moayo-sidebar-toggle-bar:nth-child(2) { top: calc(50% - 1px); } .moayo-sidebar-toggle-bar:nth-child(3) { top: calc(50% + 4px); } .moayo-topbar-icon-btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); border: none; border-radius: 50%; background: var(--c-subtle); color: var(--c-text); cursor: pointer; transition: background-color .15s, transform .15s; } .moayo-topbar-icon-btn:hover { background: var(--c-subtle-hover); transform: scale(1.04); } .moayo-topbar-icon-btn + .moayo-topbar-icon-btn, .moayo-topbar-icon-btn + .moayo-header-login { margin-left: 8px; } .moayo-topbar-icon-btn img { width: 20px; height: 20px; } /* 헤더 폴다운 메뉴(2026-09-15) - "+" 등록 메뉴(사이트등록/게시글작성/단순링크추가)와 계정 메뉴가 같은 모양을 쓴다. "+" 버튼만 참고 캡처처럼 진한 원에 흰 +. */ .moayo-header-menu { position: relative; flex: 0 0 auto; } .moayo-topbar-icon-btn + .moayo-header-menu, .moayo-header-menu + .moayo-header-menu { margin-left: var(--sp-2); } .moayo-add-menu-toggle { background: var(--c-ink); } .moayo-add-menu-toggle:hover { background: var(--c-text); } .moayo-header-menu-list { position: absolute; top: calc(100% + var(--sp-2)); right: 0; min-width: 180px; padding: var(--sp-1) 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-2); } .moayo-header-menu-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); color: var(--c-text); font-size: var(--fs-md); font-weight: 600; text-decoration: none; white-space: nowrap; } .moayo-header-menu-item + .moayo-header-menu-item { border-top: 1px solid var(--c-line); } .moayo-header-menu-item:hover { background: var(--c-subtle); color: var(--c-ink); } .moayo-header-menu-item img { width: var(--ic-md); height: var(--ic-md); } /* 내가 등록한 내역(2026-09-15) - 사이트/게시글/단순링크 탭. 참고 캡처처럼 폭을 3등분하고, 선택된 탭만 포인트 색 밑줄(선택 표시 자리). */ .moayo-mine-title { margin: 0 0 var(--sp-3); font-size: var(--fs-title); font-weight: 800; color: var(--c-ink); } .moayo-mine-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--gutter); border-bottom: 1px solid var(--c-line); } .moayo-mine-tab { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--c-text-soft); font-size: var(--fs-lg); font-weight: 600; text-decoration: none; white-space: nowrap; } .moayo-mine-tab:hover { color: var(--c-ink); background: var(--c-subtle); } .moayo-mine-tab.is-active { border-bottom-color: var(--c-point); color: var(--c-ink); font-weight: 800; } .moayo-mine-tab img { width: var(--ic-md); height: var(--ic-md); } .moayo-mine-tab-count { color: var(--c-muted); font-weight: 600; } /* 나의글 조회분석(2026-09-15, views/moayo/stats.php) - 요약 카드 → 시간별 막대 → 글별 표. 막대 색: 상세 조회는 진회색, 사이트 방문은 링크색(바깥 사이트로 "나간" 수라 링크 의미를 그대로 쓴다 - 포인트 색은 선택 표시 전용). */ .moayo-stats-note { max-width: var(--read-w); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.6; color: var(--c-muted); } .moayo-stats-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } .moayo-stats-card { padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .moayo-stats-card-label { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); } .moayo-stats-card-value { margin: var(--sp-1) 0 0; font-size: var(--fs-page); font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); font-variant-numeric: tabular-nums; } .moayo-stats-card-slash { color: var(--c-faint); font-weight: 600; } .moayo-stats-card-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--c-faint); } .moayo-stats-panel { margin-bottom: var(--sp-4); padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .moayo-stats-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); } .moayo-stats-panel-title { margin: 0; font-size: var(--fs-title); font-weight: 800; color: var(--c-ink); } .moayo-stats-panel-hint { margin-left: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); } .moayo-stats-legend { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-soft); } .moayo-stats-legend-item::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--sp-1); border-radius: var(--r-xs); vertical-align: -1px; } .moayo-stats-legend-item.is-views::before, .moayo-stats-bar.is-views { background: var(--c-text-soft); } .moayo-stats-legend-item.is-visits::before, .moayo-stats-bar.is-visits { background: var(--c-link); } .moayo-stats-scroll { overflow-x: auto; } /* 칸 수는 기간마다 달라 --bars로 받는다(최근 48시간 = 48, 기간 선택 = 일 수). 칸이 12px보다 얇아지면 가로로 넘긴다. */ .moayo-stats-chart, .moayo-stats-axis { display: grid; grid-template-columns: repeat(var(--bars, 48), minmax(12px, 1fr)); gap: 2px; min-width: max(640px, calc(var(--bars, 48) * 14px)); } /* 기간 선택 줄 - 빠른 버튼(.moayo-sort 알약) + 날짜 두 칸 */ .moayo-stats-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); } .moayo-stats-period-dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--c-muted); } .moayo-stats-period input[type="date"] { height: var(--control-h-sm); padding: 0 var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--fs-sm); box-sizing: border-box; } .moayo-stats-chart { height: 220px; border-bottom: 1px solid var(--c-line-strong); } .moayo-stats-bar-col { display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-radius: var(--r-xs) var(--r-xs) 0 0; } .moayo-stats-bar-col:hover { background: var(--c-subtle); } .moayo-stats-bar { width: 45%; border-radius: 2px 2px 0 0; } .moayo-stats-axis { margin-top: var(--sp-1); } .moayo-stats-axis span { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; } .moayo-stats-empty { margin: 0; font-size: var(--fs-md); color: var(--c-muted); } .moayo-stats-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--fs-md); } .moayo-stats-table th { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line-strong); text-align: right; font-size: var(--fs-sm); font-weight: 700; color: var(--c-muted); white-space: nowrap; } .moayo-stats-table th a { color: inherit; text-decoration: none; } .moayo-stats-table th a:hover, .moayo-stats-table th.is-active { color: var(--c-ink); } .moayo-stats-table th.is-active a::after { content: " ▼"; font-size: var(--fs-xs); } .moayo-stats-table td { padding: var(--sp-3); border-bottom: 1px solid var(--c-line); text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; } .moayo-stats-table td.is-zero { color: var(--c-faint); } .moayo-stats-table .moayo-stats-col-site { text-align: left; width: 100%; } .moayo-stats-site { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: inherit; text-decoration: none; } .moayo-stats-thumb { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; width: 64px; aspect-ratio: 16 / 10; border-radius: var(--r-sm); background: var(--c-subtle); overflow: hidden; font-weight: 800; color: var(--c-faint); } .moayo-stats-thumb img { max-width: 100%; max-height: 100%; object-fit: scale-down; } .moayo-stats-site-text { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .moayo-stats-site-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 700; color: var(--c-ink); } .moayo-stats-site:hover .moayo-stats-site-title { text-decoration: underline; } .moayo-stats-site .moayo-site-card__badges { margin-bottom: 0; } .moayo-stats-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); } @media (max-width: 767px) { .moayo-stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .moayo-stats-panel { padding: var(--sp-4); } } /* 위 헤더와 같은 이유로 세로 flex 안에서 찌그러지지 않게 못 박아둔다. (사이드바가 화면 끝까지 이어지는 건 .moayo-sidebar가 align-self:stretch로 본문 높이만큼 늘어나기 때문이다 - 아래 데스크톱 블록 참고. 예전 주석은 존재하지도 않는 min-height 규칙을 설명하고 있어서 2026-09-05에 정리했다.) */ #moayo-favbar-slot { flex: 0 0 auto; } .moayo-wrap { display: flex; align-items: flex-start; flex: 1 0 auto; min-height: calc(100vh - var(--header-h)); } /* 사이드바 - 기본값(767px 이하)은 화면 밖에 숨어있는 드로어 */ /* 안쪽 상자(.moayo-sidebar-inner)는 모바일에서는 그냥 세로로 늘어나기만 한다 - 데스크톱에서만 sticky가 된다(아래 미디어쿼리). 푸터를 바닥에 붙이는 margin-top:auto가 여기서 동작한다. */ .moayo-sidebar-inner { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 100%; box-sizing: border-box; } .moayo-sidebar { display: flex; flex-direction: column; position: fixed; /* 모바일 드로어는 화면 전체 높이를 덮는다(2026-09-04 요청) - 예전엔 헤더 아래(top:--header-h) 에서 시작해서 위쪽에 최근본 바/헤더가 비쳐 보였다. 닫는 방법은 뒤쪽 배경(백드롭) 클릭이라 헤더의 햄버거가 가려져도 문제없다(moayo-app.js). */ top: 0; left: 0; bottom: 0; width: var(--sidebar-w); max-width: 80vw; background: #fff; z-index: var(--z-drawer); box-shadow: 4px 0 32px rgba(24, 24, 27, .1); padding: 20px 10px 1.25rem; /* 위쪽 여백은 20px(2026-09-04 요청 - 처음엔 0으로 붙였다가 조정) */ overflow-y: auto; box-sizing: border-box; transform: translateX(-100%); transition: transform .25s ease; } .moayo-wrap.is-sidebar-open .moayo-sidebar { transform: translateX(0); } .moayo-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(20, 20, 30, .45); z-index: var(--z-drawer-backdrop); } .moayo-wrap.is-sidebar-open .moayo-sidebar-backdrop { display: block; } .moayo-sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .moayo-sidebar-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border-radius: var(--r-md); color: var(--c-text-soft); font-size: var(--fs-md); font-weight: 600; background: none; border: none; width: 100%; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; } .moayo-sidebar-item:hover { background: var(--c-subtle); color: var(--c-ink); } /* 현재 보고 있는 메뉴(2026-09-04, layout.php의 $sidebarActive) - 꽉 찬 검은 막대는 사이드바에서 너무 무거워서 옅은 배경 + 진한 글씨로 바꿨다. */ .moayo-sidebar-item.is-active { background: var(--c-point); color: #fff; font-weight: 700; } .moayo-sidebar-item.is-active img { filter: brightness(0) invert(1); } .moayo-sidebar-divider { margin: 12px .8rem; border: none; border-top: 1px solid var(--c-line); } @media (min-width: 768px) { .moayo-wrap { align-items: stretch; } /* 기둥(