/*
 * 첫 화면 "INYEON HOUSE" 칸 (2026-10-12 대표님 — 2번 그림)
 * ------------------------------------------------------------------------------------------------
 *  바탕 : 밝은 아이보리 · 웜베이지 — 부드러운 빛 · 은은한 나뭇잎 그림자 · 큰 INYEON 글자 (assets/img/main/house_bg.webp · 2560 폭 · 27KB).
 *         대표님 2번 그림에서 글자만 지운 그림이다 — 글은 아래 진짜 글자로 올라간다 (도구 : D:\인연의집 db 로컬서버2\도구\hero_bg_*.js).
 *  걷은 것 : 무지개 실 · 화살표 · 하트 · 화면을 붙잡고 그리던 스크롤 동작 (thread-draw.js · thread-draw.css) — 이제 다른 칸처럼 그대로 지나간다.
 *  남긴 것 : INYEON HOUSE · 제목 · 설명 · PRIVATE MATCHMAKING · SCROLL TO CONTINUE · 01 — 글과 나타나는 움직임(main.css scene-1 .active)은 원래 그대로,
 *           자리만 2번 그림처럼 (위 왼쪽 INYEON HOUSE · 가운데 왼쪽 제목 · 아래 왼쪽 PRIVATE · 아래 가운데 SCROLL · 아래 오른쪽 01).
 *  01 그림 : 원래 01.jpg 는 흰 바탕이라 아이보리 위에서 흰 네모가 보인다 → 흰 바탕만 투명하게 한 01_clear.png (숫자 모양 · 빛깔 그대로).
 *  글자 색 : 이 칸에서만 제목 회색 · 금빛을 2번 그림 색으로 조금 진하게 — 밝은 바탕에 묻히지 않게 (#666 → #606060 · #eeb301 → #e4ab18).
 *  .number_case(빈 칸)는 그대로 둔다 — main_index.js 가 스크롤마다 그 자리를 잰다(없으면 오류).
 */
/* 위 여백 140 — 내려가 있을 때 머리글(PC 98px · 흰 바탕 고정)에 INYEON HOUSE 가 붙지 않게 */
.section00.house_hero {
    padding: 140px 3.6vw 72px;
    background: #fdfbf7 url(../img/main/house_bg.webp) no-repeat 50% 50% / cover;
}

/*
 * 글 칸 = 화면 높이 — 위아래 여백(140 + 72)을 뺀 만큼. 안에서 INYEON HOUSE 는 위, 제목은 가운데, PRIVATE 는 아래.
 * 01 은 오른쪽 아래 — PC 는 화면 오른쪽 70px 에 고정 메뉴(.fixed_left 빠른 메뉴 · .rg_fixed 단추)가 있어 56px 비켜 둔다.
 */
.section00.house_hero > .cont_wrap {
    display: flex;
    flex-direction: column;
    max-width: none;
    min-height: calc(100vh - 212px);
    margin: 0;
    background: url(../img/main/01_clear.png) no-repeat right 56px bottom;
}

.section00.house_hero > .cont_wrap > .inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
}

.section00.house_hero .main_txt { margin: 0; padding: 56px 0; }
.section00.house_hero .main_txt h2 { color: #606060; }
.section00.house_hero .main_txt h2 p { color: #e4ab18; }

/* SCROLL TO CONTINUE — 가운데 아래, PRIVATE MATCHMAKING 과 같은 줄 (예전엔 무지개 실 스크립트가 자리를 맞췄다) */
.section00.house_hero .house_scroll {
    position: absolute;
    left: 50%;
    bottom: 72px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}
.section00.house_hero .house_scroll i { position: relative; display: block; width: 1px; height: 46px; background: #4a4a4a; }
.section00.house_hero .house_scroll i:after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #c9a86c; }
.section00.house_hero .house_scroll span { display: block; margin-top: 12px; font-family: 'BKV_R', serif; font-size: 8px; line-height: 10px; letter-spacing: 5px; color: #666; white-space: nowrap; }

/*
 * 태블릿 · 휴대폰 (main.css 의 900px 아래 칸과 같은 경계)
 *  · 이 폭에선 narrow.css 가 INYEON HOUSE · PRIVATE 줄에 위아래 30px(480 아래 20px) 여백을 건다 — SCROLL 줄도 그만큼 올려 같은 줄에.
 *  · 오른쪽 아래에는 늘 떠 있는 단추(.rg_fixed N · TALK — 화면 아래에서 약 90~170px)와 아래 막대(프로필 받기 …)가 있다.
 *    01 이 그 밑에 깔리지 않게 태블릿은 단추 위로 올리고, 휴대폰은 왼쪽 아래(PRIVATE 줄 바로 위)로 옮긴다.
 *  · 바탕 : 태블릿은 PC 처럼 큰 글자가 글 오른쪽에 오게(35%), 휴대폰은 화면이 좁아 큰 글자가 글 뒤에 은은하게(72%).
 */
@media screen and (max-width: 900px) {
    .section00.house_hero { padding: 96px 20px 56px; background-position: 35% 50%; }
    .section00.house_hero > .cont_wrap { min-height: calc(100vh - 152px); min-height: calc(100svh - 152px); background-position: right 0 bottom 128px; background-size: 100px auto; }
    .section00.house_hero .main_txt { padding: 40px 0 64px; }
    .section00.house_hero .house_scroll { bottom: 86px; }
}

/* 700 아래는 SCROLL 글(196px)이 PRIVATE 글(약 210px) 끝과 겹친다(600 폭에서 27px) — 뺀다 (예전엔 599 아래에서 뺐다) */
@media screen and (max-width: 699px) {
    .section00.house_hero .house_scroll { display: none; }
}

@media screen and (max-width: 599px) {
    .section00.house_hero { background-position: 72% 50%; }
    .section00.house_hero > .cont_wrap { background-position: left 0 bottom 54px; }
}

@media screen and (max-width: 480px) {
    .section00.house_hero > .cont_wrap { background-position: left 0 bottom 44px; }   /* PRIVATE 줄 여백이 20px 로 줄어든 만큼 */
}