/* ==========================================================================================
   [2026-09-18] TopMeat Portal 메인 — 스크롤 없이 한 화면(뷰포트)에 맞추는 레이아웃 오버라이드
   style-v7.css 뒤에 로드된다. 폭 1200px 이상에서는 헤더 / 히어로 / 4열 시스템 카드가 화면 높이 안에 들어가고,
   그보다 좁은 화면(태블릿·모바일)에서는 예전처럼 세로 스크롤을 허용한다.
   ========================================================================================== */
@media (min-width: 1200px) {
    html, body { height: 100%; }
    body { overflow: hidden; }
    .container {
        max-width: 1720px;
        height: 100vh; box-sizing: border-box;
        padding: 1.1rem 2.2rem 1.2rem;
        display: grid; grid-template-rows: auto minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 1rem;
    }
    header { padding-bottom: 0.9rem; }
    /* 히어로: 절반 높이로, 문구는 간결하게 */
    .hero-section { margin: 0; padding: 2rem 2.6rem; min-height: 0; }
    .hero-content { max-width: 620px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
    .hero-title { font-size: clamp(1.7rem, 2.4vw, 2.5rem); line-height: 1.15; margin-bottom: 0.7rem; }
    .hero-subtitle { font-size: clamp(0.85rem, 0.95vw, 1.02rem); margin-bottom: 1.1rem; line-height: 1.55; }
    .hero-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
    .hero-image-container { width: 56%; }
    /* 시스템 카드: 4열 한 줄, 카드 안은 세로 구성(아이콘·이름 / 상태 / 계정·입장) */
    #services-container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; min-height: 0; align-items: stretch; }
    .group-card { min-height: 0; height: 100%; }
    .group-card:hover { transform: translateY(-3px); }
    .group-header {
        height: 100%; box-sizing: border-box;
        display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 0.8rem; row-gap: 0.75rem;
        align-items: center; padding: 1.3rem 1.4rem 1.2rem; border-bottom: none;
    }
    .group-icon { grid-column: 1; grid-row: 1; width: 46px; height: 46px; font-size: 1.2rem; }
    .group-title-area { grid-column: 2; grid-row: 1; min-width: 0; }
    .group-title-area h2 { font-size: clamp(1rem, 1.15vw, 1.25rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .group-status-badges { grid-column: 1 / 3; grid-row: 2; margin-left: 0 !important; }
    .group-auth-area { grid-column: 1 / 3; grid-row: 4; align-self: end; width: 100%; margin: 0 !important; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
    .group-auth-area .group-enter-btn { flex: 1 1 auto; justify-content: center; }
    .group-auth-area .group-auth-btn { flex: 1 1 100%; width: 100%; justify-content: center; }
    .group-auth-area .group-logout-btn { margin-left: 0 !important; }
    .group-bg-img { opacity: 0.16; }
}
/* 히어로의 실시간 상태 칩(스크롤 버튼 대체) */
.hero-status { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1rem; border-radius: 999px; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); color: #6ee7b7; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; }
.hero-status.warn { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); color: #fcd34d; }
.hero-status.bad { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
.hero-status .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: heroPulse 2s ease-in-out infinite; }
.hero-status small { font-weight: 600; opacity: 0.8; }
@keyframes heroPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .hero-status .dot { animation: none; } }
/* 짧은 세로 화면(노트북 768p 등)에서는 히어로를 더 낮추고 여백을 줄인다 */
@media (min-width: 1200px) and (max-height: 820px) {
    .container { grid-template-rows: auto minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 0.75rem; padding: 0.8rem 2rem 0.9rem; }
    .hero-section { padding: 1.3rem 2.2rem; }
    .hero-subtitle { display: none; }
    header { padding-bottom: 0.6rem; }
    .group-header { padding: 1rem 1.1rem 0.95rem; gap: 0.55rem 0.7rem; }
}