/* ═══════════════════════════════════════════════
   env-diagnosis.css — 메인페이지 동네 환경 진단 섹션
   (main.css 토큰 / card.css / badge.css 정합)
   ═══════════════════════════════════════════════ */

.env-diag-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* ── 카드 (사이트 .card 정합) ── */
.env-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.env-card-head {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.env-card-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    letter-spacing: -.2px;
    flex-wrap: wrap;
}

/* 도시 대기 카드의 ym 시즌별 보강 뱃지 (타이틀 옆 인라인) */
.env-bonus-tag {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 9px;
    border-radius: 5px;
}
.env-bonus-tag.spring { background: #dcfce7; color: #15803d; }
.env-bonus-tag.summer { background: var(--danger-light); color: #991b1b; }
.env-bonus-tag.autumn { background: var(--warning-light); color: #92400e; }
.env-bonus-tag.winter { background: var(--primary-light); color: #1e40af; }

.env-card-criteria {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 9px;
    border-radius: 5px;
    background: #ede9fe;
    color: #5b21b6;
    margin-bottom: 6px;
}
.env-card-meta {
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.5;
}

/* ── 행 (사이트 .feed-body 패턴 정합) ── */
.env-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.env-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.env-row.rank1 {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.env-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
}
.env-row-rank {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-faint);
}
.env-row.rank1 .env-row-rank { color: var(--primary); }
.env-row-region {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}
.env-row-region .sido {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 12px;
    margin-right: 3px;
}
.env-row-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── 맥락 뱃지 (외부/시간/분포/보강 inline 가로 배치) ── */
.env-row-ctx {
    padding-left: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.env-ctx-line {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}
.env-ctx-external    { background: #ede9fe;            color: #5b21b6; }
.env-ctx-temporal    { background: var(--bg);          color: var(--text-muted); border: 1px solid var(--border); }
.env-ctx-distribution{ background: var(--primary-light); color: #1e40af; }
.env-ctx-bonus       { background: var(--success-light); color: #065f46; }

.env-card-footnote {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.55;
}

/* ── 반응형 ── */
@media (max-width: 580px) {
    .env-card { padding: 16px; }
    .env-row-ctx { padding-left: 24px; }
    .env-ctx-line { white-space: normal; }
}