/*
 * 그림을 끈 칸 · 구역 뒤 남은 칸 모으기 (2026-10-21 대표님 "이미지를 OFF 하면 그 그림의 칸 · 글까지 · 여백도 제거")
 * ------------------------------------------------------------
 *  칸 · 구역을 빼는 일은 화면(blade)이 한다 — 여기는 남은 칸이 한쪽에 몰려 빈 자리가 생기지 않게
 *  원래 칸 폭 그대로 가운데에 모으기만 한다. 그림이 모두 켜져 있으면 아무것도 바뀌지 않는다(같은 칸 수 · 같은 폭).
 *  휴대폰(900px 이하)은 원래 한 줄에 한 칸이라 그대로 — 가입 혜택 띠(휴대폰 그림 자리가 따로)만 휴대폰 쪽 규칙이 있다.
 * ------------------------------------------------------------
 */
@media screen and (min-width: 901px) {
    /* 두 칸 짝(첫 화면 PART 1 카드 · WHY 파트 카드 · 가입 비용 체험 상품 · 채용 카드) — 한 장만 남으면 원래 칸 폭으로 가운데 */
    .section01 .sub_txt ul.is-one,
    .pg-why .scene-5 .sub_txt .twoboxs ul.is-one,
    .pg-why .scene-6 .sub_txt ul.is-one,
    .pg-why .scene-7 .sub_txt ul.is-one,
    .pg-why .scene-8 .sub_txt ul.is-one { grid-template-columns: minmax(0, calc((100% - 20px) / 2)); justify-content: center; }
    .pg-cost .scene-3 .sub_txt ul.is-one { grid-template-columns: minmax(0, calc((100% - 14px) / 2)); justify-content: center; }
    .pg-recruit .scene-2.is-one .cont_wrap .inner { grid-template-columns: minmax(0, calc((100% - 20px) / 2)); justify-content: center; }

    /* MBTI · 사주 분석 예시 — 한 칸만 남으면 화면 폭 가득(예시 안은 그림 칸 + 글 칸 그대로) */
    .pg-mbti .scene-3 .sub_txt.is-one { grid-template-columns: minmax(0, 1fr); }

    /* 첫 화면 카드 셋(WHY · MATCHING · SAJU & MBTI) · 가치관매칭 재정 항목 다섯 — 켜진 수만큼 원래 칸 폭으로 가운데 */
    .section05 .main_txt > div > ul[style*="--hc-n"] { grid-template-columns: repeat(var(--hc-n), calc((100% - 20px) / 3)); justify-content: center; }
    .pg-values .scene-3 .sub_txt ul[style*="--vi-n"] { grid-template-columns: repeat(var(--vi-n), calc((100% - 56px) / 5)); justify-content: center; }

    /* 가입 혜택 인연머니 리워드 띠 — PC 그림 자리가 모두 꺼지면 PC 에서만 띠(제목 · 글)를 뺀다 */
    .pg-benefit .scene-2.no-pc .main_txt { display: none; }
}

@media screen and (max-width: 900px) {
    /* 가입 혜택 인연머니 리워드 띠 — 휴대폰 그림 자리가 모두 꺼지면 휴대폰에서만 띠를 뺀다 */
    .pg-benefit .scene-2.no-m .main_txt { display: none; }
}

/*
 * 첫 화면 맨 위 큰 슬라이드 그림이 모두 꺼져 히어로가 없을 때(body.no-hero) — 투명 머리글의 흰 글자가 밝은 INYEON HOUSE 위에서 안 보이므로
 * 처음부터 내린 뒤 모습(흰 바탕 · 짙은 글자 · site-header.css 의 hd_scrolled 와 같은 값)으로 둔다.
 */
body.no-hero #hd.hd_overlay { background-color: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); }

@media screen and (min-width: 901px) {
    body.no-hero .hd_overlay .gnb_1da_sub { color: #333; }
    body.no-hero .hd_overlay .sidesbtn a:first-child { color: #666; border-color: #666; }
}

@media screen and (max-width: 900px) {
    body.no-hero #hd.hd_overlay #gnb_open,
    body.no-hero #hd.hd_overlay #user_btn { color: #333; }
}