/* 오하 — 실서비스 전용 보정 CSS.
 * 디자인 프로토타입은 .device 컨테이너 쿼리를 썼지만, 실서비스는
 * .oha-app을 컨테이너로 지정해 실제 뷰포트 폭으로 반응형이 동작하게 한다. */

html, body { min-height: 100%; }
body { background: var(--surface-background); }

/* 링크 밑줄 제거 — 디자인 원본은 버튼/무밑줄 기반. (a 태그 기본 underline 차단) */
.oha-app a { text-decoration: none; }
.oha-app a:hover, .oha-app a:focus, .oha-app a:visited { text-decoration: none; }
/* 색이 지정되지 않은 링크(pager 등)는 기본 파랑 대신 본문색 상속 */
.oha-app .pager a { color: var(--fg-secondary); }

/* 컨테이너 쿼리 기준점 — app.css의 @container app(...) 규칙이 뷰포트 폭에 반응 */
.oha-app {
  container-type: inline-size;
  container-name: app;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.oha-app > .page { flex: 1 0 auto; height: auto; }
.oha-app .footer { flex: none; }

/* 검사 카드 플로우: 실서비스에서는 뷰포트 높이에 맞춤 */
.page.fillscreen { min-height: 100vh; height: 100vh; }

/* 폼/플래시 */
.flash { max-width: 1120px; margin: 16px auto 0; padding: 0 32px; }
.flash .alert { border-radius: var(--radius-md); padding: 13px 18px; font-size: 14px; font-weight: 600; }
.alert-error { background: var(--status-danger-soft); color: var(--status-danger); }
.alert-ok { background: var(--status-success-soft); color: var(--status-success); }

/* 폼 카드 화면(로그인/가입) 중앙정렬 */
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 56px 20px 80px; }

/* 같은 카테고리 좌우 가로 리스트 */
.hscroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.hscroll > * { scroll-snap-align: start; flex: 0 0 78%; max-width: 320px; }
@container app (min-width: 721px) { .hscroll > * { flex-basis: 320px; } }

/* 링크 카드 기본 */
a.plain { text-decoration: none; color: inherit; display: block; }

/* 댓글 들여쓰기 */
.comment { padding: 14px 0; box-shadow: 0 1px 0 var(--border-hairline); }
.comment.reply { margin-left: 28px; }
.comment .cbody { font-size: 14.5px; line-height: 1.6; margin: 6px 0 8px; }

/* 검사 결과 trend */
.trend-good { color: var(--status-success); }
.trend-warn { color: var(--status-warn); }
.trend-neutral { color: var(--fg-tertiary); }

/* 관리자: 실서비스 높이 */
.admin { min-height: 100vh; }
.admin-side { position: sticky; top: 58px; height: calc(100vh - 58px); }
/* 모바일: 사이드바를 서랍(off-canvas)으로 — app.css의 규칙이 여기 sticky에 덮이지 않도록 함께 선언 */
@container app (max-width: 760px) { .admin-side { position: fixed; height: auto; bottom: 0; } }

/* 작은 유틸 */
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.center{text-align:center}.grow{flex:1}