/* 모아요넷 - Bulma·custom.css 위에 공통 UI를 얹을 때 부딪히는 것을 정리한다. 화면을 옮기며 채운다(2026-10-05). 색·모서리는 var(--uk-*)만 */

/* ── A조: 글쓰기·회원·오류 화면 (2026-10-05) ── moayo/write.php · moayo-file-picker.js · member/auth/sso_login.php · errors/404·sso · moayo/extension_* */
/* 글쓰기(사이트·게시글·링크 등록/수정) - 공통 form-card > form-grid > form-panel(라벨 위). 폼은 읽는 글보다 좁게 */
.moayo-write-page { max-width: 880px; }
.moayo-write-form .form-panel { margin: 0; }
.moayo-write-form .label { margin-bottom: 0; } /* Bulma .label:not(:last-child) 아래 여백 */
.moayo-write-form .form-help { margin: 0; white-space: pre-line; word-break: keep-all; }
.moayo-write-form .textarea { min-width: 0; } /* Bulma .textarea min-width:100% 대신 공통 폭 */
/* 한줄 설명 - 라벨 줄 오른쪽 끝 글자수 */
.moayo-label-with-counter { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.moayo-field-counter { font-size: 12px; font-weight: 600; color: var(--uk-muted); font-variant-numeric: tabular-nums; }
.moayo-field-counter.is-near { color: var(--uk-fg); }
.moayo-field-counter.is-over { color: var(--uk-danger); }
/* 태그 - 입력한 대로 칩으로 되비추고, 자주 쓰는 태그(모아요 칩 .moayo-chip)를 눌러 넣는다 */
.moayo-tag-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.moayo-tag-preview:empty { display: none; }
.moayo-tag-preview-item { display: inline-flex; align-items: center; height: 26px; padding: 0 .7rem; border-radius: var(--uk-r-pill); background: var(--uk-brand-light); color: var(--uk-brand-dark); font-size: 13px; font-weight: 600; }
.moayo-tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: .2rem; }
.moayo-tag-suggest-label { font-size: 12px; font-weight: 600; color: var(--uk-muted); }
.moayo-tag-suggest-item { border: 1px solid var(--uk-line); cursor: pointer; font-family: inherit; }
.moayo-tag-suggest-item.is-added { opacity: .45; pointer-events: none; }
/* 첨부 - 공통 파일첨부 모양(점선 상자·파일 줄). 썸네일은 <img>로 채운다(공통은 배경 그림) */
.moayo-file-upload .file-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.moayo-file-upload .file-name { color: var(--uk-fg); text-decoration: none; }
.moayo-file-upload a.file-name:hover { color: var(--uk-brand); text-decoration: underline; }
.moayo-file-upload .file-meta .badge { height: 18px; padding: 0 .45rem; font-size: 11px; }
/* 바둑판형(사진만 - 게시글) - 맨 앞 타일 아래 띠에 대표 이미지 표시만 */
.moayo-file-picker-preview.is-grid .file-meta { padding: 0; background: none; opacity: 1; }
.moayo-file-picker-preview.is-grid .file-meta .badge { width: 100%; justify-content: center; border-radius: 0; }
.moayo-file-picker-preview .file-item:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
/* 삭제 - 저장 버튼과 떼어 둔다(선 + 여백) */
.moayo-write-danger { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--uk-line); }
.moayo-write-danger-label { margin: 0 0 .5rem; font-size: 13px; color: var(--uk-muted); }
.moayo-write-delete { margin: 0; }

/* 오류·확장 등록 화면 - 공통 빈 상태를 본문 가운데에 */
.moayo-error-page { max-width: 40rem; margin: 2.5rem auto; }
.moayo-error-page .empty-state { margin: 0; padding: 3rem 1rem; background: var(--uk-surface); }
/* 빈 상태 안 보조 동작(홈으로) - 공통 빈 상태 버튼은 모두 채운 알약이라 둘째 버튼만 기본 버튼 결로 (공통 후보) */
.moayo-error-page .empty-state a.is-plain { background: var(--uk-surface); color: var(--uk-fg); box-shadow: inset 0 0 0 1px var(--uk-border); }
.moayo-error-page .empty-state a.is-plain:hover { color: var(--uk-brand-dark); background: var(--uk-surface); }
@media (max-width: 767px) { .moayo-error-page { margin: 1rem auto; } }

/* 로그인(sso_login.php - 레이아웃 없는 한 장). 구글 흰 버튼·카카오 노랑은 브랜드 색이라 공통 색의 예외(phpadmin 회원 화면과 같은 결정) */
.moayo-login-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--uk-bg); color: var(--uk-fg); font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; }
.moayo-login { width: 100%; max-width: 420px; margin: 40px auto; padding: 0 16px 14vh; box-sizing: border-box; } /* 아래 여백을 더 줘 눈으로 보기에 가운데(2026-10-02) */
.moayo-login-brand { display: block; text-align: center; margin-bottom: 24px; color: inherit; text-decoration: none; }
.moayo-login-brand img { display: block; max-width: 220px; max-height: 72px; margin: 0 auto; object-fit: contain; }
.moayo-login-brand h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.moayo-login-card { padding: 28px 24px; border: 1px solid var(--uk-line); border-radius: var(--uk-r-lg); background: var(--uk-surface); box-shadow: var(--uk-up); }
.moayo-login-card h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.moayo-login-sns { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-bottom: 10px; border-radius: var(--uk-r-md); font-size: 16px; font-weight: 700; text-decoration: none; }
.moayo-login-sns.is-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.moayo-login-sns.is-kakao { background: #fee500; color: rgba(0, 0, 0, .85); }
.moayo-login-sns:hover { filter: brightness(.97); }
.moayo-login-sns:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.moayo-login-hint { margin: 12px 0 0; text-align: center; color: var(--uk-muted); font-size: 13px; }
/* ── A조 끝 ── */

/* ── B조: 상세·목록·통계 (2026-10-05) ── */
/* 목록(moayo/index.php) - 정렬 칩 줄·내 등록 탭·빈 상태·쪽 번호(JS 없을 때 폴백) */
.moayo-list-head .detail-tabs.is-chips { margin-bottom: -7px; }
.detail-tabs a img { display: block; flex: none; width: 18px; height: 18px; opacity: .55; }   /* 아이콘은 파일(<img>) - tabs.css의 svg 규칙과 같은 크기·톤 */
.detail-tabs a.is-active img, .detail-tabs a:hover img { opacity: 1; }
.moayo-page > .empty-state { margin: 8px 0 0; }
.moayo-list-foot { margin-top: 24px; border-top: 0; }

/* 상세(moayo/show.php) - 칸(.detail-panel)을 카드 간격 하나로 쌓는다 */
.moayo-show-page > .detail-panel,
.moayo-show-page > .notice { margin: 0 0 var(--card-gap); }
.moayo-show-group { margin: 0 0 var(--card-gap); }
.moayo-show-group .detail-tabs { margin-bottom: 0; }
.moayo-show-group-tab-text { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moayo-show-hero-card { padding: 20px; }
.moayo-show-private-badge { margin-left: 4px; vertical-align: middle; }
.moayo-show-panel .detail-panel-title { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.moayo-show-section-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--uk-r-pill); background: var(--uk-head); color: var(--uk-muted); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.moayo-show-section.is-plain > .detail-panel-head .detail-panel-title { font-size: 15px; }
.moayo-show-empty[hidden] { display: none; }
.moayo-comment-input.textarea { min-height: 4.5em; }
.moayo-comment-tools .btn-row + form .btn-row { margin-left: 0; }
.moayo-show-manage { display: flex; flex-wrap: wrap; gap: 8px; }
.moayo-show-report-form { margin-top: 8px; padding: 14px 16px; background: var(--uk-surface); border-radius: var(--card-radius); box-shadow: var(--uk-up); max-width: 420px; }
.moayo-show-report-form .form-row + .form-row { margin-top: 10px; }
.moayo-show-report-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.moayo-comment-head .moayo-comment-author { min-width: 2.5em; }   /* 줄 버튼(.btn-row)이 글자 링크보다 넓어 좁은 폭에서 이름이 0으로 접혔다 */
@media (max-width: 600px) {
  .moayo-show-hero-card { padding: 16px; }
  .moayo-comment-tools .btn-row { padding: 0 .45rem; }
  .moayo-comment-head .moayo-comment-date { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* 조회분석(moayo/stats.php) - 기간 칩 + 날짜, 숫자 요약 줄, 추이 막대(세로 막대는 공통에 없어 모아요넷 CSS 막대), 글별 표 */
.moayo-stats-note { max-width: 68ch; margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--uk-muted); white-space: pre-line; word-break: keep-all; }
.moayo-stats-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: var(--card-gap); }
.moayo-stats-period .detail-tabs { margin-bottom: -7px; }
.moayo-stats-period-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--uk-muted); }
.moayo-stats-page > .detail-panel { margin-bottom: var(--card-gap); }
.moayo-stats-trend .chart-legend { margin: 0 0 0 auto; }
.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-stats-chart { height: 220px; border-bottom: 1px solid var(--uk-border); }
.moayo-stats-bar-col { display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-radius: var(--uk-r-xs) var(--uk-r-xs) 0 0; }
.moayo-stats-bar-col:hover { background: var(--uk-head); }
.moayo-stats-bar { width: 45%; border-radius: var(--uk-r-xs) var(--uk-r-xs) 0 0; }
.moayo-stats-bar.is-views { background: var(--uk-series-1); }
.moayo-stats-bar.is-visits { background: var(--uk-series-2); }
.moayo-stats-axis { margin-top: 4px; }
.moayo-stats-axis span { font-size: 12px; color: var(--uk-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(--uk-fg); }
.moayo-stats-table th.is-active a::after { content: " ▼"; font-size: 10px; }
.moayo-stats-table .moayo-stats-col-site { width: 100%; min-width: 16rem; }
.moayo-stats-site { display: flex; align-items: center; gap: 12px; 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(--uk-r-xs); background: var(--uk-head); overflow: hidden; font-weight: 800; color: var(--uk-muted); }
.moayo-stats-thumb img { max-width: 100%; max-height: 100%; object-fit: scale-down; }
.moayo-stats-site-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.moayo-stats-site-title { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--uk-fg); }
.moayo-stats-site:hover .moayo-stats-site-title { text-decoration: underline; }
.moayo-stats-site .moayo-site-card__badges { margin-bottom: 0; }
/* ── B조 끝 ── */