/* =========================================================================
메인(홈) 페이지 — 이야기모바일. Crisp Bento UI(기준축 activation 컨셉 계승).
공통 자산 재사용: .v2-container / .v2-clean-card / .v2-btn / .v2-icon / 토큰.
페이지 전용 레이아웃은 .home-page 스코프 + home- 프리픽스(plans의 pd-/plan- 패턴과 동일 결).
========================================================================= */
/* 페이지 캔버스 — 흰색. 카드는 소프트 그림자로 분리(명도 대비 약화 주의) */
.home-page { background: var(--color-white); }
/* 키보드 포커스 — 전 링크·버튼 통일 링(focus-visible: 마우스 클릭엔 미표시). 요소 radius를 따라감 */
.home-page a:focus-visible, .home-page button:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
/* 본문 — 풀블리드 밴드 모델: gap 0, 각 섹션이 세로 패딩 + 배경(흰↔연회색 교차)으로 구획 */
.home-page .home-main { display: flex; flex-direction: column; gap: 0; }
/* 섹션 공통 세로 밴드 패딩 — 해상도별 압축(플립 가장 작게 → PC 넉넉히). 개별 .x-sec에서 배경만 지정 */
.home-page .story-sec,
.home-page .reco-sec,
.home-page .review-sec,
.home-page .why-sec,
.home-page .util-sec { padding: 1.75rem 0; } /* 플립 ≤360 */
@media (min-width: 361px) { /* 모바일 */
.home-page .story-sec,
.home-page .reco-sec,
.home-page .review-sec,
.home-page .why-sec,
.home-page .util-sec { padding: 2.25rem 0; }
}
@media (min-width: 680px) { /* 폴드 — 가로 공간 늘며 호흡 확보 */
.home-page .story-sec,
.home-page .reco-sec,
.home-page .review-sec,
.home-page .why-sec,
.home-page .util-sec { padding: 2.75rem 0; }
}
@media (min-width: 1024px) { /* PC */
.home-page .story-sec,
.home-page .reco-sec,
.home-page .review-sec,
.home-page .why-sec,
.home-page .util-sec { padding: 3.25rem 0; }
}
/* ── 1. 비주얼 히어로 — 풀폭 이벤트 롤링 배너(자동 슬라이드) ──────────────────
쇼핑몰 첫 대문: 좌 배너 + 우 액션 패널(요금제 찾기 등 바로가기) 2셀 벤토 */
.home-page .home-hero { padding: 1.125rem 0 1.25rem; } /* 하단 > 상단. 모바일/플립은 하단 압축 — 첫 섹션(맞춤추천) 카드가 첫 화면에 걸치게(above-the-fold). 폴드·PC는 아래서 확대 */
/* 배너(Swiper) — DB 연동 배너 이미지 영역. 그림자 없이 플랫(우패널과 결 통일), 경계는 헤어라인.
가로 2셀 벤토에서 우패널 높이에 맞춰 stretch → min-height는 collapse 방지용 하한 */
.home-page .home-banner { position: relative; width: 100%; min-height: 7rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-light); }
/* 슬라이드 = 배너 이미지. 패널 높이만큼 채우고 이미지는 object-fit:cover로 크롭(세로 축소) */
.home-page .home-banner-slide { display: block; height: 100%; }
.home-page .home-banner-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 이벤트 배너 이미지 — 뷰포트별 노출: ≤1023 플립·모바일·폴드=.mb / ≥1024 PC=.pc.
표시 이미지는 배너 박스를 cover로 꽉 채움 — a·wrapper 높이 100%로 브리지 */
.home-page .home-banner .swiper-wrapper,
.home-page .home-banner .swiper-slide { height: 100%; }
.home-page .home-banner a { display: block; height: 100%; }
.home-page .home-banner img.pc,
.home-page .home-banner img.mb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-page .home-banner img.pc { display: none; } /* ≤1023(폴드 포함): 모바일 이미지만 */
@media (min-width: 1024px) { /* PC: PC 이미지로 스왑 */
.home-page .home-banner img.mb { display: none; }
.home-page .home-banner img.pc { display: block; }
}
/* 컨트롤 — 좌하단 N/M 페이저 / 우하단 [정지·진행][이전][다음] 묶음(참고 시안 배치).
래퍼(ctrl·pager)를 display:contents로 해제 → 각 컨트롤을 배너 기준 absolute로 개별 배치.
폭을 점유하는 컨테이너 없이 좌·우 끝에만 컨트롤 존재. index 마크업 유지 */
.home-page .home-banner { --hb-inset: 0.875rem; --hb-btn: 1.875rem; --hb-gap: 0.375rem; }
.home-page .home-banner-ctrl, .home-page .hb-pager { display: contents; }
/* 정지/진행·이전·다음 — 동일 정원 원형 버튼 */
.home-page .hb-prev, .home-page .hb-next, .home-page .hb-toggle { position: absolute; z-index: 5; bottom: var(--hb-inset); display: inline-flex; align-items: center; justify-content: center; width: var(--hb-btn); height: var(--hb-btn); border-radius: 50%; border: none; padding: 0; background: rgba(15, 23, 42, 0.45); color: var(--color-white); cursor: pointer; }
.home-page .hb-prev:hover, .home-page .hb-next:hover, .home-page .hb-toggle:hover { background: rgba(15, 23, 42, 0.6); }
.home-page .hb-prev .v2-icon, .home-page .hb-next .v2-icon { width: 0.8125rem; height: 0.8125rem; color: var(--color-white); }
.home-page .hb-prev .v2-icon { transform: rotate(180deg); }
/* 우하단 묶음 — 우측 끝부터 다음·이전·정지/진행 순 offset */
.home-page .hb-next { right: var(--hb-inset); }
.home-page .hb-prev { right: calc(var(--hb-inset) + var(--hb-btn) + var(--hb-gap)); }
.home-page .hb-toggle { right: calc(var(--hb-inset) + 2 * (var(--hb-btn) + var(--hb-gap))); }
/* 좌하단 — N/M 페이저(버튼과 동일 높이로 정렬) */
.home-page .hb-count { position: absolute; z-index: 5; left: var(--hb-inset); bottom: var(--hb-inset); width: auto; display: inline-flex; align-items: center; height: var(--hb-btn); padding: 0 0.625rem; border-radius: var(--radius-pill); background: rgba(15, 23, 42, 0.45); font-size: 0.8125rem; font-weight: 700; color: var(--color-white); } /* width:auto → Swiper .swiper-pagination-fraction의 width:100% 무효화(알약 콘텐츠 폭 유지) */
.home-page .hb-count .swiper-pagination-current { font-weight: 800; }
/* 재생 중 = 일시정지(두 막대) / .is-paused = 시작(삼각형) */
.home-page .hb-toggle-icon { display: inline-block; box-sizing: border-box; width: 0.625rem; height: 0.75rem; border-left: 3px solid var(--color-white); border-right: 3px solid var(--color-white); }
.home-page .hb-toggle.is-paused .hb-toggle-icon { width: 0; height: 0; border: none; border-left: 0.625rem solid var(--color-white); border-top: 0.4375rem solid transparent; border-bottom: 0.4375rem solid transparent; margin-left: 0.1875rem; }
/* 배너 컨트롤 반응형 — 좁아진 배너에서 버튼·여백 축소(변수만 조정) */
@media (max-width: 1023px) { /* 폴드 이하 */
.home-page .home-banner { --hb-inset: 0.625rem; --hb-btn: 1.5rem; --hb-gap: 0.25rem; }
.home-page .hb-count { padding: 0 0.5rem; font-size: 0.75rem; }
.home-page .hb-prev .v2-icon, .home-page .hb-next .v2-icon { width: 0.6875rem; height: 0.6875rem; }
}
@media (max-width: 679px) { /* 모바일·플립 — 가장 작은 배너 */
.home-page .home-banner { --hb-inset: 0.5rem; --hb-btn: 1.375rem; --hb-gap: 0.1875rem; }
.home-page .hb-count { padding: 0 0.4375rem; font-size: 0.6875rem; }
.home-page .hb-prev .v2-icon, .home-page .hb-next .v2-icon { width: 0.625rem; height: 0.625rem; }
}
/* ── 2. 우측 액션 패널 — 핵심 동선 1장(와이드·큰 제목) + 보조 4장. 전부 연회색 카드(명도로 분리, 테두리 없음) ──
위계는 크기·전체폭으로(핵심 카드 제목 권력화). 블루는 호버 시에만 포인트.
제목 좌상단 / 라인아이콘 우하단(.home-act-ic). 색 임팩트는 좌측 배너가 담당 */
.home-page .home-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.home-page .home-act { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 5.75rem; padding: 1.125rem; border-radius: var(--radius-xl); background: var(--act-bg); border: 1px solid transparent; text-decoration: none; overflow: hidden; transition: background 0.16s; }
.home-page .home-act:hover { background: var(--act-bg-hover); } /* 호버 = 동일 톤 한 단 어둡게(글로우·테두리 없이, 4.8 색 변화 원칙) */
.home-page .home-act:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
/* 제목 — 굵게(전환 버튼감) + 글자 압축. near-black(text-main)로 대비 극대화. 크기는 4구간 반응형 */
.home-page .home-act-title { font-size: 1rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.025em; color: var(--text-main); } /* 폴드 16px */
/* 우하단 3D 솔리드 아이콘 자리 — 연동: 
로 교체 */
.home-page .home-act-ic { position: absolute; right: 0.5rem; bottom: 0.5rem; width: 2.25rem; height: 2.25rem; object-fit: contain; } /* 폴드 2.25rem (PC ≥1024 → 3rem, 아래 미디어에서 확대) */
/* 히어로 라운드 — 카드는 전 해상도 --radius-xl 고정(카드 컨셉). 배너만 폴드·PC(≥680)에서 lg 확대 */
@media (min-width: 680px) {
.home-page .home-banner { border-radius: var(--radius-lg); }
}
/* PC(≥1024) — 패널이 넉넉하니 폰트·패딩 한 단계 ↑ (플립·모바일 타일은 아래 ≤679 행 레이아웃에서 처리) */
@media (min-width: 1024px) {
.home-page .home-act { padding: 1.5rem; } /* PC 24px */
.home-page .home-act-title { font-size: 1.125rem; } /* PC 18px */
.home-page .home-act-ic { width: 2.75rem; height: 2.75rem; } /* PC 아이콘 2.75rem */
}
/* 폴드·태블릿(≥768) — 히어로 상·하 여백 확대 */
@media (min-width: 680px) {
.home-page .home-hero { padding: 1.5rem 0 2.25rem; } /* 폴드·PC — 하단 > 상단 */
/* 배너 최소 높이 ↑ — 좁은 패널에 맞춘 얇은 띠 크롭 완화(폴드·PC). 실배너는 와이드 포맷 권장 */
.home-page .home-banner { min-height: 11rem; }
}
/* ── 히어로 레이아웃 — 좌 배너 | 우 패널 2셀 벤토(전 해상도 가로 유지). 비율은 해상도별 ──
화면이 커질수록 패널을 캡(max-width)으로 좁혀 배너 지배력↑. 작은 화면은 패널을 넉넉히 줘 제목 한 줄 유지.
배너는 패널 높이에 맞춰 stretch(세로 축소·object-fit cover) */
.home-page .home-hero-grid { display: flex; flex-direction: row; align-items: stretch; gap: 1.25rem; }
.home-page .home-hero-grid .home-banner,
.home-page .home-hero-grid .home-side { min-width: 0; }
/* ▼▼ 좌우 비율(배너 : 패널) — 해상도별 조정 지점 (flex·max-width 숫자만 변경) ▼▼ */
.home-page .home-hero-grid .home-banner { flex: 1.3; } .home-page .home-hero-grid .home-side { flex: 1; } /* 플립 ≤360 (≈57:43) */
@media (min-width: 361px) { .home-page .home-hero-grid .home-banner { flex: 1.7; } .home-page .home-hero-grid .home-side { flex: 1; } } /* 모바일 (≈63:37) */
@media (min-width: 680px) { .home-page .home-hero-grid .home-banner { flex: 2; } .home-page .home-hero-grid .home-side { flex: 1; max-width: 22rem; } } /* 폴드·PC — 액션 그리드 수용 위해 패널 캡 22rem(배너는 여전히 지배적) */
/* 플립·모바일(≤679) — 배너 위 / 액션 패널은 가로 스와이프 한 줄(네이티브 스크롤+스냅) */
@media (max-width: 679px) {
.home-page .home-hero-grid { flex-direction: column; gap: 0.75rem; } /* 가로 20px → 세로 스택엔 과함. 12px로 압축(배너↔알약줄, 내부 알약 간격 10px보다 한 단계 위) */
.home-page .home-hero-grid .home-banner { flex: none; width: 100%; aspect-ratio: 5 / 2; }
.home-page .home-hero-grid .home-side { flex: none; width: 100%; }
/* 2열 그리드 → 가로 한 줄: 카드를 고정폭으로 나란히, 가로 스크롤(스냅) */
.home-page .home-side { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.625rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-page .home-side::-webkit-scrollbar { display: none; }
/* 스크롤 발견성(D peek + B 강페이드) — 스크롤바가 숨겨져 4개 중 숨은 알약(개통하기 등)을 못 볼 수 있다.
① padding-right로 마지막 알약이 항상 우측에 반쯤 걸쳐 보이게(peek) ② 우측 48px를 배경색으로 페이드해 잘린 알약을 강조.
페이지 배경이 솔리드(slate-100)라 mask 투명 페이드 = 오버레이와 동일한 그림. mask는 스크롤포트 기준이라 스크롤해도 우측 고정. */
.home-page .home-side { padding-right: 1.5rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
/* 모바일 — 가로 알약(pill): [아이콘][제목] 인라인, 콘텐츠 폭(이미지 시안) */
.home-page .home-act { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 0.75rem; scroll-snap-align: start; } /* 상하 6px + min-height 44px = 터치 타깃 확보(4.6). align-center라 모양은 유지 */
.home-page .home-act-title { font-size: 0.875rem; white-space: nowrap; } /* 모바일 14px */
.home-page .home-act-ic { position: static; order: -1; width: 1.625rem; height: 1.625rem; } /* 좌측 인라인 아이콘 */
}
@media (max-width: 360px) { /* 플립 — 가로 타일 압축(폭·패딩·폰트 ↓) */
.home-page .home-side .home-act { flex-basis: auto; padding: 0.375rem 0.625rem; } /* 플립 — 알약 더 압축, 상하 6px */
.home-page .home-act-title { font-size: 0.8125rem; } /* 플립 13px */
.home-page .home-act-ic { width: 1.5rem; height: 1.5rem; right: auto; bottom: auto; }
}
/* ▲▲ ───────────────────────────────────────────────────────────────── ▲▲ */
/* ── 3. 맞춤 추천(②) — "딱 맞는 요금제, 1초면 끝" (벤토 카드 · Tailwind 시안 이식) ──────
흰 카드(radius-xl) + 부드러운 그림자, 호버 시 살짝 떠오름(떠 있는 카드 연출).
배지=우상단 절대배치 / 이름=히어로 타이틀 / GB=잉크 권력화 / 카드1 요금=블루 / 하단 구분선+보러가기+원형 화살표. */
.home-page .story-sec { background: var(--gray-100); } /* 라이트그레이 밴드 — 흰 카드와 명도 차로 분리(과하지 않게). 리프트는 카드 resting 그림자가 보강. 상단 패딩은 공통(3.25/4rem)으로 히어로와 간격 확보 */
/* 모바일/플립 — 첫 섹션은 히어로 바로 아래라 상단 패딩만 줄여 '나에게 딱 맞는 요금제' 카드가 첫 화면 하단에 걸치게(above-the-fold). 나머지 섹션 리듬은 공통값 유지 */
@media (max-width: 679px) { .home-page .story-sec { padding-top: 1.5rem; } }
@media (max-width: 360px) { .home-page .story-sec { padding-top: 1.25rem; } }
/* 공통 섹션 헤더 — 제목+설명을 직접 자식으로(평평한 구조). 전체보기 링크는 있으면 우측 자동 배치.
grid: 제목·설명 좌측(col1) 세로 / 링크(있으면) 우측(col2) 세로 가운데 정렬. 링크 없으면 col2는 0폭 */
.home-page .home-sec-head { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; margin-bottom: 0.875rem; } /* 플립 ≤360 = 14px */
.home-page .home-sec-head .home-sec-title { grid-column: 1; }
.home-page .home-sec-head .home-sec-sub { grid-column: 1; }
.home-page .home-sec-head .sec-head-link { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; }
/* 섹션 제목→콘텐츠 여백 — 해상도별 최적화(작은 화면 타이트 / 큰 화면 여유) */
@media (min-width: 361px) { .home-page .home-sec-head { margin-bottom: 1rem; } } /* 모바일 = 16px */
@media (min-width: 680px) { .home-page .home-sec-head { margin-bottom: 1.25rem; } } /* 폴드 = 20px */
@media (min-width: 1024px) { .home-page .home-sec-head { margin-bottom: 1.5rem; } } /* PC = 24px */
/* 추천 3업 카드 — 떠 있는 흰 캡슐 */
.home-page .story-trio { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: stretch; } /* ≤1023 12px / PC 16px · stretch=카드 등높이(1위 배지로 높이 차나도 CTA 하단 정렬) */
.home-page .story-card { position: relative; display: flex; flex-direction: column; padding: 1.375rem; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); text-decoration: none; transition: border-color 0.16s, box-shadow 0.18s var(--smooth); } /* resting 그림자=기준축 clean-card와 동일 — 라이트그레이 밴드 위에서 카드가 float */
/* 호버 = 액션 글로우(통일): 1px 메인블루 테두리 + 브랜드 블루 그림자. 카드별 CTA도 강조 */
.home-page .story-card:hover { border-color: var(--color-main); box-shadow: 0 5px 18px -5px rgba(2, 103, 255, 0.22); }
.home-page .story-card:focus-visible { outline: 2px solid var(--color-main); outline-offset: 3px; }
/* 1위 카드 — 별도 테두리·그림자 없음. featured 구분은 "가장 많이 선택" 배지 하나로만 (일반 카드와 동일한 외형) */
/* 타이틀 행 — 제목(좌) + "가장 많이 선택" 배지(우) 한 줄. 1위 카드만 배지 있음(나머진 제목만) */
.home-page .story-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.625rem; }
.home-page .story-title-row .story-card-name { flex: 1; min-width: 0; }
/* "가장 많이 선택" — 1위 카드 사회적 증거. 추천/베스트 의미의 앰버 파스텔(블루 남용 완화). 제목 첫 줄에 맞춰 우측 */
.home-page .story-best { flex-shrink: 0; margin-top: 0.0625rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); background: var(--badge-recommend-bg); color: var(--badge-recommend-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
/* 타이틀 — 배경 없는 아이콘을 제목 텍스트 흐름에 인라인 삽입(첫 줄 자동 정렬, em 스케일). 색은 뉴트럴 회색으로 낮춰 페르소나 색은 배지만 담당 → 배지↔타이틀 색 경쟁 제거 */
.home-page .story-name-ico { width: 1.1em; height: 1.1em; margin-right: 0.4em; vertical-align: -0.17em; color: var(--text-tertiary); }
/* 통합 타이틀(페르소나) */
.home-page .story-card-name { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.32; color: var(--text-main); word-break: keep-all; } /* 모바일 17px (폴드 16px·PC 20px·플립 15px는 각 블록서 오버라이드) · keep-all=어절 단위 줄바꿈 */
/* 데이터·가격 앵커 — 스탯 2분할. 라이트그레이 블록을 세로 헤어라인으로 나눠, 각 셀 = 라벨(위) + 값(아래) 대칭 배치 */
.home-page .story-fit { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.125rem; background: var(--gray-15); border-radius: var(--radius-md); overflow: hidden; }
.home-page .story-stat { padding: 0.7rem 0.75rem; text-align: center; }
.home-page .story-stat + .story-stat { border-left: 1px solid var(--border-light); } /* 앵커 내부 한정 얇은 분할선(정보 그룹 구분선 아님) */
.home-page .story-stat-k { display: block; margin-bottom: 0.2rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.01em; color: var(--text-tertiary); white-space: nowrap; } /* 마이크로 라벨 — '데이터' / '월 최저 요금'('부터' 성격을 라벨이 담당) */
.home-page .story-data-num { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); white-space: nowrap; } /* 범위 텍스트(예: 11~71GB) */
/* CTA 버튼 — 아웃라인(흰 배경 + 블루 테두리·글자): 터치기기(호버X)에서도 '버튼'으로 읽힘. 호버 시 솔리드 채움 (반복 CTA §4.7 파란 벽 회피) */
.home-page .story-save-pill { display: flex; align-items: center; justify-content: center; gap: 0.3125rem; width: 100%; padding: 0.6875rem 1rem; border-radius: var(--radius-md); background: var(--blue-soft); color: var(--color-main); border: none; font-size: 0.875rem; font-weight: 800; white-space: nowrap; transition: background 0.16s, color 0.16s; }
.home-page .story-save-pill .v2-icon { width: 0.875rem; height: 0.875rem; }
.home-page .story-card:hover .story-save-pill { background: var(--color-main); color: var(--color-white); }
/* 가격 — 앵커 우측 셀 값. 블루(최저 요금 = 핵심 전환 숫자). '월 최저 요금'은 라벨이 담당하므로 값은 '11,000원'만 */
.home-page .story-card-price { white-space: nowrap; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-main); } /* 2분할 대칭 — 데이터와 동일 크기(모바일 17px) */
/* 하단 — CTA는 카드 맨 아래 고정(margin-top:auto), 최소 간격은 padding-top으로 보장 → 3장 버튼 라인 정렬 */
.home-page .story-foot { margin-top: auto; padding-top: 1rem; }
/* ── 보조 — "혹시 이런 스타일로 쓰시나요?" ──
플립/모바일(≤679): 가로 행 — 좌=제목·설명(세로 스택) / 우=가격+화살표(세로 중앙).
폴드·PC(≥680): 3열, 세로 배치(제목·설명 위 / 가격·화살표 아래). 가격=비강조(옅게). */
.home-page .story-more-head { margin: 1.75rem 0 0.875rem; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
.home-page .story-more { display: grid; grid-template-columns: 1fr; gap: 0.625rem; }
.home-page .story-more-item { position: relative; display: flex; align-items: center; gap: 0.875rem; padding: 0.9375rem 1.125rem; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); text-decoration: none; transition: border-color 0.16s, box-shadow 0.16s var(--smooth); }
.home-page .story-more-item:hover { border-color: var(--color-main); box-shadow: 0 5px 18px -5px rgba(2, 103, 255, 0.22); }
/* 좌: 제목(강조) + 설명(세로 스택) */
.home-page .story-more-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-page .story-more-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); transition: color 0.14s; } /* 700 — 섹션 대제목(800)과 굵기로도 위계 분리 */
.home-page .story-more-item:hover .story-more-title { color: var(--color-main); }
@media (max-width: 360px) { .home-page .story-more-title { font-size: 0.875rem; } } /* 플립 14px — 섹션 제목(18px)과 위계 회복(1.29배) */
.home-page .story-more-desc { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) { .home-page .story-more-desc { margin-top: 0; } } /* 폴드·모바일·플립 — 제목↔설명 붙임(PC만 2px 여백) */
/* 우: 가격(비강조) + 화살표 */
.home-page .story-more-meta { flex-shrink: 0; display: flex; align-items: center; gap: 0.375rem; }
.home-page .story-more-price { font-size: 0.8125rem; font-weight: 700; color: var(--text-tertiary); white-space: nowrap; }
.home-page .story-more-go { display: inline-flex; color: var(--gray-300); transition: color 0.14s; }
.home-page .story-more-go .v2-icon { width: 1.375rem; height: 1.375rem; }
/* 호버 = 액션 강조: 제목·화살표만 메인컬러로(가격은 비강조 유지) */
.home-page .story-more-item:hover .story-more-go { color: var(--color-main); }
/* 폴드·PC(≥680) — 3열 좁은 카드: 세로 배치(제목·설명 위 / 가격 좌·화살표 우 아래) */
@media (min-width: 680px) {
.home-page .story-more-item { flex-direction: column; align-items: stretch; gap: 0.4375rem; }
.home-page .story-more-meta { justify-content: space-between; }
}
/* ── 맞춤요금제 반응형 — 해상도별 그리드·콤팩트 (모바일 스크롤↓ / 폴드 뭉개짐 수정) ──
아이콘은 제목 인라인(전 구간 공통) · 폴드 3열만 데이터/가격 세로 스택 */
/* 폰(≤679) — 트리오는 base 그대로 1열 세로 스택(3x1: 3행 1열). 데이터/가격 좌우 배치 유지 */
/* 폴드·PC 공통 — 트리오 3열(F 단일 구조 reflow) */
@media (min-width: 680px) {
.home-page .story-trio { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } /* 폴드 12px */
}
/* 폴드 680~1023 — 3열 좁은 카드 뭉개짐 수정(콤팩트 + 배지 정적) */
@media (min-width: 680px) and (max-width: 1023px) {
.home-page .story-card { padding: 1.125rem; }
.home-page .story-card-name { font-size: 1rem; } /* 16px */
.home-page .story-name-ico { width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.14em; } /* 폴드는 좁아 아이콘 축소 → 제목 첫 줄 여유 */
/* 폴드도 PC와 동일한 2분할 좌우 배치(base 1fr 1fr·세로 분할선 그대로). 좁은 3열이라 폰트만 압축해 넘침 방지 */
.home-page .story-fit { margin-top: 1rem; }
.home-page .story-stat { padding: 0.5rem 0.375rem; }
.home-page .story-stat-k { margin-bottom: 0.125rem; font-size: 0.625rem; } /* 10px */
.home-page .story-data-num { font-size: 0.875rem; } /* 14px */
.home-page .story-card-price { font-size: 0.9375rem; } /* 15px */
/* 폴드는 카드가 좁아 제목+배지 한 줄이 눌림 → 배지를 상단 테두리에 걸치는 absolute로(제목 풀폭) */
.home-page .story-best { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1; margin-top: 0; }
.home-page .story-save-pill { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
.home-page .story-more { grid-template-columns: repeat(3, 1fr); }
.home-page .story-more-title { font-size: 0.9375rem; } /* 15px */
}
/* PC 1024+ — 3열 여유. 제목 20px · 앵커 2분할 대칭 19px · story-more 3열 */
@media (min-width: 1024px) {
.home-page .story-card { padding: 1.5rem; }
.home-page .story-trio { gap: 1rem; } /* PC 16px */
.home-page .story-more { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
/* story-more — PC는 3열 카드가 넓어(~350px) 가로 행: 제목·설명 좌 / 가격+화살표 우(세로 중앙). 폴드(좁은 3열)는 세로 유지 */
.home-page .story-more-item { flex-direction: row; align-items: center; gap: 0.875rem; }
.home-page .story-more-meta { justify-content: flex-start; }
.home-page .story-card-name { font-size: 1.25rem; } /* 20px */
.home-page .story-data-num,
.home-page .story-card-price { font-size: 1.1875rem; } /* 19px — 2분할 대칭(데이터=가격) */
}
/* 모바일 361~679 — 카드 좌우 여백 소폭 축소(세로 22px 유지 / 가로 20px) */
@media (min-width: 361px) and (max-width: 679px) {
.home-page .story-card { padding: 1.375rem 1.25rem; } /* 22px 20px */
}
/* 플립 ≤360 — 카드 텍스트 압축(과밀 방지·가독성 확보) */
@media (max-width: 360px) {
.home-page .story-card-name { font-size: 0.9375rem; } /* 15px — 모바일 16px보다 작게(역전 방지) */
.home-page .story-data-num,
.home-page .story-card-price { font-size: 1rem; } /* 16px — 2분할 대칭 */
}
/* 플립·모바일(≤679, 터치) — 저장 CTA pill 최적화: 터치 타깃 44px 확보(§4.6). 전체폭 버튼이라 폰트는 가독 14px 유지(플립 13px 축소 해제) */
@media (max-width: 679px) {
.home-page .story-save-pill { min-height: 2.75rem; }
}
/* ── 공통 섹션 헤더 ────────────────────────────────────────────────────────── */
/* 공통 섹션 타이틀/서브 — 전 섹션 단일 클래스(home-sec-title/home-sec-sub)로 통일.
다크 USP만 .why-sec 스코프에서 색 오버라이드(아래 5장). */
.home-page .home-sec-title { font-weight: 800; letter-spacing: -0.03em; color: var(--text-main); word-break: keep-all; }
.home-page .home-sec-title em { font-style: normal; color: var(--color-main); }
.home-page .home-sec-sub { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
/* 타이틀 공통 반응형 스케일 (플립→모바일→폴드→PC, CLAUDE 4.4 4구간) */
.home-page .home-sec-title { font-size: 1.125rem; line-height: 1.25; } /* 플립 ≤360 = 18px */
@media (min-width: 361px) { .home-page .home-sec-title { font-size: 1.375rem; } .home-page .home-sec-sub { font-size: 0.875rem; } } /* 모바일 = 22px */
@media (min-width: 680px) { .home-page .home-sec-title { font-size: 1.625rem; } .home-page .home-sec-sub { font-size: 0.9375rem; } } /* 폴드 */
@media (min-width: 1024px) { .home-page .home-sec-title { font-size: 1.875rem; } .home-page .home-sec-sub { font-size: 1rem; } } /* PC */
/* ── 3. 사은품으로 고르는 요금제 추천 ──────────────────────────────────────────
상단: 사은품 브랜드 로고 칩(가로 스크롤 + 좌우 화살표, Swiper)
하단: 선택 사은품에 묶인 추천 요금제 3카드(할인 전/후 가격 · 사은품 혜택)
흰 밴드(위 story=gray-100 회색과 명도 교차). 연동: 칩 선택 → 해당 사은품 요금제 DB 출력 */
.home-page .reco-sec { background: var(--color-main-bg); } /* 파스텔 블루 포인트 밴드 — 인기 섹션 강조(회색들 사이에서 또렷). 흰 요금제 카드 float */
/* 전체보기 — 테두리·배경 없는 심플 텍스트 링크(전체보기 >). 헤더 래퍼는 공통 .home-sec-head 사용 */
.home-page .sec-head-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 700; white-space: nowrap; color: var(--text-secondary); transition: color 0.14s; } /* 14px·아이콘16·패딩으로 버튼감·탭영역 확보(우측 flush 유지) */
.home-page .sec-head-link:hover { color: var(--color-main); }
.home-page .sec-head-link .v2-icon { width: 1rem; height: 1rem; transition: transform 0.18s; }
/* 폴드·PC(≥680) — 아웃라인 pill(시안 C): 흰 배경 + 얇은 테두리, hover 시 블루 테두리·글자. 플립·모바일은 위 고스트 텍스트 유지 */
@media (min-width: 680px) {
.home-page .sec-head-link { padding: 0.5rem 0.875rem; border: 1px solid var(--border-light); border-radius: var(--radius-pill); background: var(--color-white); color: var(--text-main); font-size: 0.8125rem; transition: color 0.14s, border-color 0.14s; }
.home-page .sec-head-link:hover { border-color: var(--color-main); color: var(--color-main); }
.home-page .sec-head-link:hover .v2-icon { transform: translateX(2px); }
}
/* 사은품 칩 스크롤러 — 좌우 화살표 자리만큼 안쪽 여백 확보 */
.home-page .reco-filter { position: relative; padding: 0; }
.home-page .reco-filter-swiper { overflow: hidden; }
.home-page .reco-filter .swiper-slide { width: auto; }
.home-page .reco-chip { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: auto; border: none; background: none; cursor: pointer; padding: 0.25rem 0; }
/* 원형 로고 칩 — 흰 배경 + 옅은 테두리, 선택 시 블루 링 */
.home-page .reco-chip-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-white); border: 1px solid var(--gray-300); overflow: hidden; transition: border-color 0.14s, box-shadow 0.14s; }
.home-page .reco-chip-ic img { width: 100%; height: 100%; object-fit: cover; }
.home-page .reco-chip-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; transition: color 0.14s; }
.home-page .reco-chip:hover .reco-chip-ic { border-color: var(--blue-border); }
.home-page .reco-chip.is-active .reco-chip-ic { border-color: var(--color-main); box-shadow: 0 0 0 2px var(--color-main); }
.home-page .reco-chip.is-active .reco-chip-label { color: var(--text-main); font-weight: 700; }
/* 좌우 화살표 — 원형 버튼, 칩 원(4rem) 중앙 높이에 정렬 */
/* 좌우 화살표 — 칩 위 양끝 오버레이. 섹션 배경(blue-60)→투명 그라데이션으로 가장자리 칩을 페이드해 '더 있음' 암시 */
.home-page .reco-arrow { position: absolute; top: 0; bottom: 0; z-index: 5; display: flex; align-items: center; width: 3.5rem; padding: 0 0.375rem; border: none; background: none; cursor: pointer; color: var(--text-secondary); transition: color 0.14s, opacity 0.2s; }
.home-page .reco-arrow-prev { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--blue-60) 45%, transparent); }
.home-page .reco-arrow-next { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--blue-60) 45%, transparent); }
.home-page .reco-arrow:hover { color: var(--color-main); }
.home-page .reco-arrow .v2-icon { width: 1.125rem; height: 1.125rem; }
.home-page .reco-arrow-prev .v2-icon { transform: rotate(180deg); }
.home-page .reco-arrow.swiper-button-disabled { opacity: 0; pointer-events: none; }
/* ── 공통 슬라이드 컨트롤 (요금제 추천·리뷰 통일) — 좌우 화살표 + 불릿(활성 블랙·두께 압축) ── */
.home-page .slide-ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.home-page .slide-ctrl.is-hidden { display: none; } /* 카드가 한 화면에 다 들어오면 컨트롤 숨김 */
.home-page .slide-nav { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-white); border: 1px solid var(--slate-300); box-shadow: 0 2px 8px rgba(11, 15, 26, 0.08); color: var(--text-secondary); transition: color .14s, border-color .14s, opacity .14s; }
.home-page .slide-nav:hover { color: var(--color-main); border-color: var(--blue-border); }
.home-page .slide-nav .v2-icon { width: 1.0625rem; height: 1.0625rem; }
.home-page .slide-prev .v2-icon { transform: rotate(180deg); }
.home-page .slide-nav.swiper-button-disabled { opacity: 0.3; pointer-events: none; }
/* 불릿 — 흐린 점 / 활성 = 블랙 알약(두께 압축). 3클래스로 swiper-bundle 우선순위 확보 */
.home-page .slide-bullets.swiper-pagination { position: relative; inset: auto; width: auto; display: flex; }
.home-page .slide-bullets .swiper-pagination-bullet { width: 0.375rem; height: 0.375rem; margin: 0; border-radius: 50%; background: var(--slate-400); opacity: 1; transition: width .2s, background .2s; }
.home-page .slide-bullets .swiper-pagination-bullet-active { width: 1rem; border-radius: var(--radius-pill); background: var(--text-main); }
/* 추천 카드 Swiper — 다수 요금제 노출, 그룹 단위(slidesPerGroup) 스킵. 컨트롤=공통 slide-ctrl */
/* 그림자 짤림 방지 — Swiper overflow:hidden가 카드 그림자를 자르므로, padding으로 클립 영역을 넓히고
음수 마진으로 위치 보정. 세로 패딩 상·하 동일(1.25rem)로 카드 위아래 공백 대칭. 상단 간격 1.75rem 유지(margin 0.5 + padding 1.25) */
.home-page .reco-swiper { position: relative; margin: 0.5rem -0.75rem -1.25rem; padding: 1.25rem 0.75rem 1.25rem; }
.home-page .reco-swiper .swiper-wrapper { align-items: flex-start; } /* 펼침 시 해당 카드만 늘어남 */
.home-page .reco-swiper .swiper-slide { height: auto; min-width: 0; }
/* 모바일=카드 2장 세로 스택(.reco-pair) / 폴드·PC=카드 1장. 슬라이드 묶음은 JS가 브레이크포인트별로 재구성(grid 미사용=autoHeight·사은품펼침 보존) */
.home-page .reco-pair { display: flex; flex-direction: column; gap: 0.875rem; }
.home-page .reco-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: 0 6px 20px rgba(11, 15, 26, 0.07); transition: border-color 0.16s, box-shadow 0.18s var(--smooth); }
.home-page .reco-card:hover { border-color: var(--color-main); box-shadow: 0 5px 18px -5px rgba(2, 103, 255, 0.22); }
.home-page .reco-card:hover .reco-plan-name { color: var(--color-main); }
/* 카드 전체 클릭 → 요금제 상세(스트레치 링크). 본문·가입버튼은 이 아래(클릭=상세), 인터랙티브(사은품·도움말)만 위로 */
.home-page .reco-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* 가입하기 CTA — 카드 하단 풀폭 솔리드 블루(전환 동선 완성) */
.home-page .reco-join { display: grid; place-items: center; height: 2.875rem; margin-top: 1rem; border-radius: var(--radius-md); background: var(--color-main); color: var(--color-white); font-size: 0.9375rem; font-weight: 800; transition: background 0.14s; }
.home-page .reco-card:hover .reco-join { background: var(--color-main-hover); } /* 카드 호버 시 CTA 강조(가입버튼은 카드 링크 아래라 자체 :hover 미작동) */
/* 본문(상세 링크) — 사은품 버튼과 분리 */
.home-page .reco-card-main { display: flex; flex-direction: column; }
/* 헤더 — 통신사 배지 + 강조 태그 */
.home-page .reco-card-head { display: flex; align-items: center; gap: 0.375rem; }
.home-page .reco-carrier { padding: 0.1875rem 0.5rem; border-radius: var(--radius-xs); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; } /* 12px/600/자간0 — 배지 가독성(폴백 폰트 뭉갬 방지) */
.home-page .reco-carrier.kt { background: var(--color-kt-bg); color: var(--color-kt); }
.home-page .reco-carrier.skt { background: var(--color-skt-bg); color: var(--color-skt); }
.home-page .reco-carrier.lgt { background: var(--color-lgt-bg); color: var(--color-lgt); }
/* 강조 태그 — 무채색(통신사 배지만 색 포인트로 두고 한 카드 색 과잉 방지). 위계: 통신사>태그 */
.home-page .reco-tag { padding: 0.1875rem 0.5rem; border-radius: var(--radius-xs); background: var(--gray-100); color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; }
/* 통신망 배지(LTE·5G 공용) — 요금제 리스트·상세와 동일한 클래스(.tag.net)·색 토큰. 크기만 홈 배지 줄(.reco-carrier/.reco-tag)에 맞춤 */
.home-page .tag.net { padding: 0.1875rem 0.5rem; border-radius: var(--radius-xs); background-color: var(--badge-net-bg); color: var(--badge-net-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
/* 선불(prepaid) 배지 — 요금제 리스트(.plans-page .tag.prepaid)와 동일한 뉴트럴 그레이. 현재 인기 카드엔 선불 요금제가 없어 스타일만 정의(DB 연동 시 선불 카드에 선불 출력되면 적용) */
.home-page .tag.prepaid { padding: 0.1875rem 0.5rem; border-radius: var(--radius-xs); background: var(--gray-200); color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; }
/* 요금제명 */
.home-page .reco-plan-name { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); line-height: 1.4; word-break: keep-all; transition: color 0.16s; }
/* 데이터 권력화 + QoS */
.home-page .reco-data { margin-top: 0.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.625rem; color: var(--text-main); } /* qos를 GB 옆에 인라인 수용(시안 C) */
.home-page .reco-data-num { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } /* PC 28px. 아래서 해상도별 축소 — 형제(가격 24px) 균형 */
@media (max-width: 1023px) { .home-page .reco-data-num { font-size: 1.625rem; } } /* 폴드 26px */
@media (max-width: 679px) { .home-page .reco-data-num { font-size: 1.375rem; } } /* 모바일·플립 22px (플립 기준 압축) */
.home-page .reco-data-plus { font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); } /* 모바일 14px (≥680 15px) */
.home-page .reco-qos { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 600; color: var(--color-main); } /* GB 옆 인라인. 폴드 이하 13px / PC 14px */
@media (min-width: 1024px) { .home-page .reco-qos { font-size: 0.875rem; } }
/* QoS "?" 도움말 말풍선 — plans .qos-help/.qos-bubble 이식(.home-page 스코프) */
.home-page .qos-help { position: relative; z-index: 2; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 0.9375rem; height: 0.9375rem; border-radius: 50%; background: var(--gray-200); color: var(--text-tertiary); font-size: 0.625rem; font-weight: 800; cursor: help; margin-left: 0.25rem; }
.home-page .qos-bubble { position: absolute; bottom: calc(100% + 0.5625rem); left: 50%; width: 14.375rem; max-width: 60vw; background: var(--slate-800); color: var(--color-white); font-size: 0.75rem; font-weight: 600; line-height: 1.55; letter-spacing: -0.01em; padding: 0.6875rem 0.8125rem; border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(11, 15, 26, 0.22); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px); transition: opacity 0.15s, transform 0.15s; z-index: 40; text-align: left; white-space: normal; }
.home-page .qos-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--slate-800); }
/* 말풍선 노출 — 폴드·모바일·플립(터치)은 .on(JS 클릭 토글, 재클릭 닫기)으로만. :hover를 전역에 두면 클릭으로 .on을 지워도
마우스/스티키호버가 ? 위에 남아 재클릭 닫기가 안 됨. 키보드 접근성만 :focus-visible로 유지. PC 호버는 아래 미디어쿼리 */
.home-page .qos-help:focus-visible .qos-bubble, .home-page .qos-help.on .qos-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* 인기 요금제: qos가 GB 옆 인라인 → help가 카드 우측. 말풍선을 우측 기준으로 펼쳐 옆 카드에 가려짐/넘침 방지 */
.home-page .reco-data .qos-bubble { left: auto; right: -0.5rem; transform: translateX(0) translateY(4px); }
.home-page .reco-data .qos-bubble::after { left: auto; right: 0.625rem; transform: none; }
.home-page .reco-data .qos-help:focus-visible .qos-bubble, .home-page .reco-data .qos-help.on .qos-bubble { transform: translateX(0) translateY(0); }
/* PC(마우스)만 호버 노출 — 터치 기기(폴드 포함)엔 (hover:hover)가 거짓이라 미적용 → JS .on 클릭 토글(재클릭 닫기) 유지 */
@media (min-width: 1024px) and (hover: hover) {
.home-page .reco-data .qos-help:hover .qos-bubble { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); }
}
/* 터치/좁은 화면(≤1023) — '?' 도움말 클릭 영역을 44px로 확장(작은 아이콘 탭 오류 방지, 시각 크기는 유지). 레이아웃 영향 없음 */
@media (max-width: 1023px) {
.home-page .qos-help::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; }
}
/* 플립·모바일 — reco 말풍선도 plans와 동일하게: '?'(left:50%)에서 80% 왼쪽으로 밀고 화살표를 80% 지점(='?' 위)으로 → 우측 넘침 해소 */
@media (max-width: 679px) {
.home-page .reco-data .qos-bubble { left: 50%; right: auto; transform: translateX(-80%) translateY(4px); }
.home-page .reco-data .qos-help:focus-visible .qos-bubble,
.home-page .reco-data .qos-help.on .qos-bubble { transform: translateX(-65%) translateY(0); }
.home-page .reco-data .qos-bubble {max-width: 50vw;}
.home-page .reco-data .qos-bubble::after { left: 65%; right: auto; transform: translateX(-50%); }
}
/* 통화·문자 스펙 — 인라인 */
.home-page .reco-specs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--text-secondary); }
.home-page .reco-specs b { font-weight: 700; color: var(--text-main); }
/* 가격 — 상단 헤어라인·여백으로 구분(박스 없음). 정가 취소선 → 실납부가(블루) */
.home-page .reco-price { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--border-light); }
/* 비포→애프터 흐름(시안 C): 정가(취소선) → 실납부가(블루)를 한 줄로 */
.home-page .reco-price-flow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4375rem; }
.home-page .reco-price-was { font-size: 0.8125rem; color: var(--text-tertiary); text-decoration: line-through; } /* 모바일 13px (≥680 14px) */
.home-page .reco-price-now { display: inline-flex; align-items: baseline; gap: 0.1875rem; font-size: 0.875rem; font-weight: 700; color: var(--text-main); }
.home-page .reco-price-now b { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-main); line-height: 1; } /* PC 26px — GB(28) −2px 공동 리드(전환 트리거) */
@media (max-width: 1023px) { .home-page .reco-price-now b { font-size: 1.5rem; } } /* 폴드 24px (GB 26, −2px) */
@media (max-width: 679px) { .home-page .reco-price-now b { font-size: 1.25rem; } } /* 모바일·플립 20px 통일 — 전환 트리거로 키우되(18→20) 좁은 폭 줄바꿈 여유 확보. 블루색으로 가격 강조 */
.home-page .reco-price-label { align-self: center; padding: 0.0625rem 0.3125rem; border-radius: var(--radius-xs); background: var(--gray-100); font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); }
/* 메타 줄 — 할인 배지 + 종료 후 안내(단계별 요금은 여러 개) */
.home-page .reco-price-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4375rem; margin-top: 0.25rem; }
.home-page .reco-price-after { font-size: 0.75rem; color: var(--text-secondary); } /* 플립 ≤360 = 12px */
@media (min-width: 361px) { .home-page .reco-price-after { font-size: 0.8125rem; } } /* 모바일·폴드 = 13px(형제 reco-specs·price-was와 통일) */
@media (min-width: 1024px) { .home-page .reco-price-after { font-size: 0.875rem; } } /* PC = 14px */
/* 사은품 — 겹친 썸네일 + 혜택 + 펼침 화살표(클릭 시 목록 토글) */
.home-page .reco-gift { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-top: 1rem; background: none; cursor: pointer; } /* 가격↔사은품 여백(PC·폴드), 모바일은 그리드 간격이라 margin:0 리셋. 링크 위로 올리는 건 .reco-gift-wrap(z-index:2)이 담당 */
.home-page .reco-gift:hover .reco-gift-text { color: var(--text-main); }
.home-page .reco-gift-thumbs { display: inline-flex; align-items: center; flex-shrink: 0; }
.home-page .reco-gift-thumbs img { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--color-white); object-fit: cover; background: var(--color-white); }
.home-page .reco-gift-thumbs img + img { margin-left: -0.5rem; }
.home-page .reco-gift-text { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-align: left; transition: color 0.14s; }
.home-page .reco-gift-text b { color: var(--color-main); font-weight: 800; }
/* 인기 요금제 — PC(≥1024)만 보조 텍스트 한 단계 ↑. 폴드 이하는 기본(작은) 크기로 압축 */
@media (min-width: 1024px) {
.home-page .reco-plan-name { font-size: 0.9375rem; } /* 15px (폴드 이하 14·플립 13) */
.home-page .reco-data-plus { font-size: 0.9375rem; } /* 15px (폴드 이하 14) */
.home-page .reco-specs { font-size: 0.875rem; } /* 14px (폴드 이하 13) */
.home-page .reco-price-was { font-size: 0.875rem; } /* 14px (폴드 이하 13) */
.home-page .reco-price-now { font-size: 0.9375rem; } /* '원' 15px (폴드 이하 14) */
.home-page .reco-gift-text { font-size: 0.875rem; } /* 14px (폴드 이하 13) */
.home-page .reco-join { font-size: 1rem; } /* 16px (폴드 이하 15) */
}
.home-page .reco-gift-arrow { width: 1.125rem; height: 1.125rem; margin-left: auto; flex-shrink: 0; color: var(--color-main); transition: transform 0.2s var(--smooth); }
.home-page .reco-gift[aria-expanded="true"] .reco-gift-arrow { transform: rotate(180deg); }
/* 펼친 사은품 목록 — 연회색 박스(gray-50)로 구분 */
.home-page .reco-gift-list { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.5rem; padding: 0.875rem; border-radius: var(--radius-md); background: var(--gray-50); }
.home-page .reco-gift-list[hidden] { display: none; }
.home-page .reco-gift-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.home-page .reco-gift-ic { display: inline-flex; flex-shrink: 0; width: 1.625rem; height: 1.625rem; border-radius: 50%; overflow: hidden; background: var(--color-white); }
.home-page .reco-gift-ic img { width: 100%; height: 100%; object-fit: cover; }
/* 사은품 묶음(버튼+목록)을 카드 링크(.reco-card-link, z-index:1) 위로 올림.
안 올리면 펼친 목록·버튼 아래 여백이 링크에 덮여 클릭 시 상세로 이동한다(사은품 영역 클릭이 상세로 새던 문제) */
.home-page .reco-gift-wrap { position: relative; z-index: 2; }
@media (min-width: 680px) { /* 폴드 — PC보다 카드 패딩 압축 */
.home-page .reco-card { padding: 1.5rem; }
/* 사은품 버튼↔가입 사이 간격을 reco-join의 margin이 아니라 reco-gift 버튼의 padding-bottom이 갖게 이관.
그 간격은 원래 reco-join margin(카드 링크 영역)이라 클릭 시 상세로 샜다 → 버튼 패딩(z-index로 링크 위)이 되면
클릭이 상세가 아니라 사은품 토글이 된다. 접힘 전용(aria-expanded=false) — 펼침 시엔 목록 아래 간격(list margin-bottom)이 담당 */
.home-page .reco-join { margin-top: 0; }
/* 사은품 없는 카드 — CTA가 .reco-price 바로 뒤라 붙어버림 → 사은품 있을 때 CTA 위 간격(reco-gift padding-bottom 1rem)과 동일하게 상단 여백 부여 */
.home-page .reco-price + .reco-join { margin-top: 1rem; }
.home-page .reco-gift[aria-expanded="false"] { padding-bottom: 1rem; }
.home-page .reco-gift-list { margin-bottom: 1rem; }
}
@media (min-width: 1024px) { /* PC */
.home-page .reco-card { padding: 1.75rem; }
}
/* ── 인기 요금제 모바일·플립(≤679) — 1쌍=세로 스택. 카드 내부 그리드: 본문 / [가격 | 가입] 한 줄 / 사은품
(폴드·PC는 기본 플렉스 = 하단 풀폭 가입버튼) ── */
@media (max-width: 679px) {
.home-page .reco-swiper { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* 좌우 음수 마진 해제 → 컨테이너 20px 거터에 맞춤 */
.home-page .reco-qos { white-space: nowrap; } /* '고화질 영상 3Mbps'가 글자 단위로 안 쪼개지게 */
.home-page .reco-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main main" "price join" "gift gift"; column-gap: 0.875rem; row-gap: 0.875rem; padding: 1.125rem 1.125rem 0; } /* 하단 패딩을 0으로 — 그 여백을 사은품 버튼이 흡수(아래) → 버튼 아래 빈 띠 클릭이 상세로 안 샘 */
.home-page .reco-plan-name { font-size: 0.8125rem; } /* 13px */
.home-page .reco-card-main { grid-area: main; padding-bottom: 0.875rem; border-bottom: 1px solid var(--border-light); } /* 정보 아래 헤어라인(전체 폭) */
.home-page .reco-price { grid-area: price; align-self: center; margin: 0; padding: 0; border: none; } /* 비포→애프터 흐름 */
.home-page .reco-join { grid-area: join; align-self: center; width: auto; height: auto; min-height: 2.25rem; margin: 0; padding: 0 0.875rem; font-size: 0.875rem; white-space: nowrap; } /* 가격 우측·세로 가운데, 압축 */
/* 사은품(버튼+목록) 묶음을 한 칸으로. 하단 여백은 wrap이 아니라 버튼/목록이 갖는다(폴드·PC와 동일 방식).
접힘: 버튼 padding-bottom이 카드 하단(패딩 0)까지 채워 그 영역 클릭이 상세가 아니라 사은품 토글이 됨.
펼침: 목록 margin-bottom이 하단 여백 담당(붙음 방지). 버튼·목록은 wrap의 z-index로 링크 위라 클릭이 상세로 안 샘 */
.home-page .reco-gift-wrap { grid-area: gift; }
.home-page .reco-gift { margin: 0; }
.home-page .reco-gift[aria-expanded="false"] { padding-bottom: 1.125rem; }
.home-page .reco-gift-list { margin-bottom: 1.125rem; }
}
/* ── 4. 고객 후기 — 실사용 후기 Swiper. 중립 흰 카드 + 페이지네이션 불릿 ──
요금제 명 강조 + 후크 키워드 브랜드 블루. 헤더는 히어로 스케일 타이틀(한 줄, 임팩트 강조) */
.home-page .review-sec { background: var(--color-white); } /* 흰색 — 후기 카드는 테두리+옅은 그림자로 분리 */
.home-page .review-swiper { position: relative; }
.home-page .review-swiper .swiper-wrapper { align-items: flex-start; }
.home-page .review-swiper .swiper-slide { height: auto; }
/* 후기 카드 — 소셜 프로필형(아바타 없음): 헤더(작성자·인증 + 별점) → 후크 → 본문(…더보기) → 요금제 CTA 밴드 */
.home-page .review-card { display: flex; flex-direction: column; padding: 1.625rem 1.5rem 1.5rem; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: 0 1px 3px rgba(11, 15, 26, 0.06); transition: border-color 0.16s, box-shadow 0.18s var(--smooth); }
.home-page .review-card:hover { border-color: var(--blue-border); box-shadow: 0 6px 22px -8px rgba(2, 103, 255, 0.24); }
/* 헤더 — 별점 + 작성자(좌측 나란히) */
.home-page .review-head { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; }
.home-page .review-name { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.875rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-main); }
.home-page .review-name .rv-writer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-page .review-stars { flex-shrink: 0; font-size: 0.875rem; letter-spacing: 0.05em; color: var(--amber-500); }
/* 포인트 후크 — 굵은 헤드라인, 키워드 메인블루 */
.home-page .review-hook { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; color: var(--text-main); word-break: keep-all; }
.home-page .review-hook b { color: var(--color-main); font-weight: 800; }
/* 본문(2줄) + 본문 끝 인라인 '…더보기'(오버레이) */
.home-page .rt-wrap { position: relative; }
.home-page .review-text { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-page .review-more-inline { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; padding-left: 2.25rem; border: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-white) 45%); color: var(--text-tertiary); font-family: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.home-page .review-more-inline:hover { color: var(--text-main); }
/* 요금제 CTA 밴드 — 행 전체 클릭 = 요금제 상세(단일 CTA). 요금제 정보가 곧 CTA */
.home-page .review-plan-cta { display: flex; align-items: center; gap: 0.5625rem; margin-top: 1rem; padding: 0.8125rem 0.875rem; border-radius: var(--radius-md); background: var(--blue-pale); text-decoration: none; transition: background 0.15s; }
.home-page .review-plan-cta:hover { background: var(--blue-soft); }
.home-page .review-plan { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4375rem; font-size: 0.875rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-main); }
.home-page .review-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-page .review-carrier { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-xs); font-size: 0.6875rem; font-weight: 800; }
.home-page .review-carrier.kt { background: var(--color-kt-bg); color: var(--color-kt); }
.home-page .review-carrier.skt { background: var(--color-skt-bg); color: var(--color-skt); }
.home-page .review-carrier.lgt { background: var(--color-lgt-bg); color: var(--color-lgt); }
.home-page .review-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.0625rem; font-size: 0.75rem; font-weight: 800; color: var(--color-main); }
.home-page .review-go .v2-icon { width: 0.9375rem; height: 0.9375rem; transition: transform 0.15s var(--smooth); }
.home-page .review-plan-cta:hover .review-go .v2-icon { transform: translateX(2px); }
/* 후기 카드 해상도 최적화 — 형제(reco·story) 패턴: 모바일·플립 압축 → 폴드 기본(base) → PC 한 단계 ↑ */
@media (max-width: 679px) { /* 모바일·플립 — 압축 */
.home-page .review-card { padding: 1.375rem 1.25rem 1.25rem; }
.home-page .review-hook { font-size: 1rem; } /* 16px */
.home-page .review-plan-cta { margin-top: 0.875rem; padding: 0.75rem 0.75rem; }
}
@media (min-width: 1024px) { /* PC — 폴드보다 한 단계 업 */
.home-page .review-card { padding: 1.875rem 1.75rem 1.625rem; }
.home-page .review-stars { font-size: 0.9375rem; }
.home-page .review-hook { font-size: 1.1875rem; } /* 19px (폴드 17) */
.home-page .review-text { font-size: 0.875rem; } /* 14px (폴드 13) */
.home-page .review-plan { font-size: 0.9375rem; } /* 15px (폴드 14) */
}
/* 후기 팝업 — 공통 모달 셸(.modal) 재사용(오버레이·애니메이션·.active·스크롤잠금). 외형만 프리미엄으로 오버라이드 */
.home-page .review-modal { --modal-max: 30rem; }
/* 시트(패널) — 풀블리드 글로우 위해 패딩 0, 라운드 클립·섀도 프리미엄. transform 컨테이닝블록이라 ::before·닫기 절대배치 anchor */
.home-page .review-modal .modal-sheet { position: relative; padding: 0; overflow: hidden; box-shadow: 0 24px 64px -12px rgba(11, 15, 26, 0.45); }
.home-page .review-modal .modal-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8.5rem; background: linear-gradient(180deg, var(--color-main-bg) 0%, rgba(224, 239, 253, 0) 100%); pointer-events: none; }
/* 플로팅 닫기(공통 .modal-close 위치·톤 오버라이드) */
.home-page .review-modal .modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.25rem; height: 2.25rem; background: rgba(255, 255, 255, 0.7); color: var(--text-secondary); }
.home-page .review-modal .modal-close:hover { background: var(--color-white); color: var(--text-main); }
.home-page .review-modal .modal-close .v2-icon { width: 1.125rem; height: 1.125rem; }
/* 본문 — 공통 .modal-body 패딩(0!important) 위에 프리미엄 패딩 주입 */
.home-page .review-modal .modal-body { position: relative; z-index: 1; padding: 2.25rem 2rem 2rem !important; }
.home-page .rv-quote { font-family: Georgia, "Times New Roman", serif; font-size: 4.5rem; line-height: 0.7; font-weight: 700; color: var(--color-main); opacity: 0.18; }
.home-page .rv-rate { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.home-page .review-modal .modal-body .review-stars { font-size: 1.125rem; letter-spacing: 0.08em; }
.home-page .rv-score { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
.home-page .rv-score span { font-size: 0.8125rem; font-weight: 700; color: var(--text-tertiary); }
.home-page .review-modal .modal-body .review-hook { margin: 0.625rem 0 0; font-size: 1.5rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; color: var(--text-main); word-break: keep-all; }
/* 전문 노출(클램프 해제) + 가독 줄간격 */
.home-page .review-modal .modal-body .review-text { margin: 1rem 0 0; display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; font-size: 0.9375rem; line-height: 1.75; color: var(--text-secondary); word-break: keep-all; }
/* 작성자 인증 카드 */
.home-page .rv-author { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.5rem; padding: 0.875rem 1rem; background: var(--gray-15); border-radius: var(--radius-lg); }
.home-page .rv-avatar { flex-shrink: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: linear-gradient(135deg, #5B9BFF 0%, var(--color-main) 100%); color: var(--color-white); font-size: 1.125rem; font-weight: 800; }
.home-page .rv-who { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.home-page .rv-name { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 800; color: var(--text-main); }
.home-page .review-modal .modal-body .review-plan { font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); }
/* 후기 팝업 해상도 최적화 — 폴드·PC(센터 480px)=base / 좁은 화면(모바일·플립 바텀시트)에서 폰트·여백·버튼 압축 */
@media (max-width: 679px) { /* 모바일 — 한 단계 압축 */
.home-page .review-modal .modal-body { padding: 1.875rem 1.5rem 1.5rem !important; }
.home-page .rv-quote { font-size: 3.75rem; } /* 60px */
.home-page .review-modal .modal-body .review-hook { font-size: 1.375rem; } /* 22px */
.home-page .review-modal .modal-body .review-text { line-height: 1.7; }
.home-page .rv-author { margin-top: 1.25rem; padding: 0.8125rem 0.875rem; }
.home-page .rv-avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}
@media (max-width: 360px) { /* 플립 — 추가 압축 */
.home-page .review-modal .modal-body { padding: 1.5rem 1.25rem 1.25rem !important; }
.home-page .rv-quote { font-size: 3rem; } /* 48px */
.home-page .review-modal .modal-body .review-stars { font-size: 1rem; }
.home-page .review-modal .modal-body .review-hook { font-size: 1.1875rem; } /* 19px */
.home-page .review-modal .modal-body .review-text { font-size: 0.875rem; } /* 14px */
.home-page .rv-author { margin-top: 1.125rem; }
.home-page .rv-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.9375rem; }
}
/* ── 5. 왜 이야기모바일 — USP(설득 클라이맥스). 다크 네이비 크로스 쇼케이스 ──
라이트 흐름 속 유일한 다크 반전 섹션: 네이비 배경 위 흰 피처 카드가 강하게 떠올라 대비로 콘텐츠를 띄움.
접근성(CLAUDE 4.6): 글래스(반투명 blur) 금지 → 보조 카드·칩 모두 솔리드 네이비 토큰. */
.home-page .why-sec { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); }
/* USP는 다크 네이비 섹션 → 공통 타이틀/서브를 흰·네이비 톤으로만 오버라이드(스타일은 공통 재사용) */
.home-page .why-sec .home-sec-title { color: var(--color-white); }
.home-page .why-sec .home-sec-title em { color: var(--navy-accent); }
.home-page .why-sec .home-sec-sub { color: var(--navy-sub); }
/* 피처 + 보조 그리드 */
.home-page .why-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
/* 피처 카드 — 핵심 한 줄(98%). 다크 카드 + navy-accent 큰 숫자로 권력화(흰 카드 제거, 톤 통일) */
/* 핵심 강점(98% 응답율) — 깊은 블루→네이비 그라데이션 + 은은한 글로우. 다크 섹션과 조화되되 도드라짐 */
.home-page .why-feature { display: flex; flex-direction: column; justify-content: center; padding: 1.875rem; background: linear-gradient(135deg, var(--blue-deep) 0%, var(--navy) 100%); border: 1px solid var(--navy-border); border-radius: var(--radius-xl); box-shadow: 0 12px 32px -16px rgba(2, 103, 255, 0.4); }
.home-page .why-fnum { display: flex; align-items: baseline; gap: 0.0625rem; font-size: 3.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--color-white); }
.home-page .why-fnum span { font-size: 1.5rem; }
.home-page .why-flabel { margin-top: 0.75rem; font-size: 1.1875rem; font-weight: 800; color: var(--color-white); }
.home-page .why-fdesc { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--navy-sub); }
/* 보조 3 — 솔리드 네이비 카드(평평, 호버 없음). 숫자=밝은 블루 강조 */
.home-page .why-supp { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.home-page .why-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.9375rem 1.125rem; background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: var(--radius-lg); }
.home-page .why-snum { flex-shrink: 0; min-width: 3.25rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy-accent); }
.home-page .why-snum span { font-size: 0.875rem; }
.home-page .why-stx b { display: block; font-size: 0.9375rem; font-weight: 800; color: var(--color-white); }
.home-page .why-stx span { font-size: 0.78125rem; color: var(--navy-sub); }
/* 인증·수상 — 크레덴셜 라인(구분선 인라인, 박스 없음). 메달 아이콘 + navy-accent */
.home-page .why-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.home-page .why-cred { position: relative; display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.875rem; font-weight: 700; color: var(--color-white); }
.home-page .why-cred .v2-icon { width: 1rem; height: 1rem; color: var(--navy-accent); }
.home-page .why-cred + .why-cred::before { content: ""; position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%); width: 1px; height: 0.9375rem; background: var(--navy-border); }
/* ── 반응형 최적화(폰트·여백·구조) — 기본=폴드/PC, 아래서 모바일·플립 압축 ── */
@media (min-width: 680px) { /* 폴드·PC — 좌 피처 | 우 보조 2열(가로 공간 활용) */
.home-page .why-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
@media (min-width: 1024px) { /* PC — 폴드(기본 크기)보다 폰트·여백 한 단계 확대(넓은 화면 밀도 최적화) */
.home-page .why-feature { padding: 2.25rem; }
.home-page .why-fnum { font-size: 4.25rem; }
.home-page .why-fnum span { font-size: 1.875rem; }
.home-page .why-flabel { font-size: 1.375rem; }
.home-page .why-fdesc { font-size: 1.0625rem; }
.home-page .why-item { padding: 1.125rem 1.375rem; }
.home-page .why-snum { min-width: 3.75rem; font-size: 1.875rem; }
.home-page .why-snum span { font-size: 1rem; }
.home-page .why-stx b { font-size: 1.0625rem; }
.home-page .why-stx span { font-size: 0.875rem; }
.home-page .why-cred { font-size: 0.9375rem; }
}
@media (max-width: 679px) { /* 모바일 — 피처를 보조(why-item)와 동일 가로 구조로, 4행 균일 리스트 */
.home-page .why-grid { gap: 0.5rem; } /* 피처↔보조 간격을 보조 항목 간격과 통일 */
/* 피처 = [숫자 | 라벨/설명] 가로 행 — 마크업 유지, grid로 배치(라벨·설명은 형제라 row 분리) */
.home-page .why-feature { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.875rem; padding: 0.9375rem 1.125rem; border-radius: var(--radius-lg); } /* 컴팩트 가로 행으로 바뀌므로 라운드도 한 단계 축소(xl→lg) */
.home-page .why-fnum { grid-row: 1 / 3; align-self: center; min-width: 2.875rem; font-size: 1.375rem; }
.home-page .why-fnum span { font-size: 0.875rem; }
.home-page .why-flabel { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 0.9375rem; } /* = why-stx b */
.home-page .why-fdesc { grid-column: 2; grid-row: 2; margin-top: 0; font-size: 0.78125rem; } /* = why-stx span */
.home-page .why-snum { min-width: 2.875rem; font-size: 1.375rem; }
/* 크레덴셜 세로 스택(줄바꿈 시 구분선이 줄 앞에 떠 보이는 문제 방지) */
.home-page .why-trust { flex-direction: column; align-items: flex-start; gap: 0.625rem; margin-top: 1.25rem; }
.home-page .why-cred + .why-cred::before { display: none; }
}
@media (max-width: 360px) { /* 플립 — 피처·보조 동일 압축 */
.home-page .why-feature { padding: 0.8125rem 1rem; column-gap: 0.625rem; }
.home-page .why-fnum { min-width: 2.5rem; font-size: 1.1875rem; }
.home-page .why-flabel { font-size: 0.875rem; }
.home-page .why-item { padding: 0.8125rem 1rem; gap: 0.625rem; }
.home-page .why-snum { min-width: 2.5rem; font-size: 1.1875rem; }
.home-page .why-stx b { font-size: 0.875rem; }
.home-page .why-cred { font-size: 0.8125rem; }
}
/* ── 6. 고객 지원 & 앱 — 유모바일 스타일. 좌: 2×2 무카드 퀵메뉴(아이콘칩+텍스트) / 우: 앱 카드(테두리+QR 2개) ──
placeholder — 연동: data-link·QR·스토어·이벤트 유의사항 일러스트 실값 교체. */
.home-page .util-sec { background: var(--gray-15); } /* 연회색 마무리 — USP(네이비) 다음, 칩·앱카드 float(푸터는 추후 제작) */
.home-page .util-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
/* 좌: 2×2 무카드 퀵메뉴 — 아이콘 원형 칩 + 텍스트(가로형) */
.home-page .util-menu { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* 플립·모바일: 1열(풀폭 가로 항목) */
.home-page .util-item { display: flex; align-items: center; gap: 0.875rem; }
.home-page .util-item-ic { display: grid; place-items: center; flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--gray-15); }
.home-page .util-item-ic img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.home-page .util-item-text { min-width: 0; }
.home-page .util-item-text b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--text-main); transition: color 0.14s; }
.home-page .util-item:hover .util-item-text b { color: var(--color-main); }
.home-page .util-item-text span { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.4; word-break: keep-all; }
/* 우: 고객센터앱 다운로드 — 테두리 카드, 가운데 정렬 + QR 2개 */
.home-page .util-app-card { padding: 1.75rem 1.5rem; background: var(--color-white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); text-align: center; }
.home-page .util-app-title { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
.home-page .util-app-desc { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); word-break: keep-all; }
.home-page .util-app-qrs { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; }
.home-page .util-app-qr-item { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.home-page .util-app-qr { display: grid; place-items: center; width: 6rem; height: 6rem; background: var(--gray-15); color: var(--text-tertiary); font-size: 0.6875rem; font-weight: 700; line-height: 1.4; text-align: center; }
.home-page .util-app-qr img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.home-page .util-store { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.4375rem 0.75rem; border-radius: var(--radius-pill); background: var(--gray-100); color: var(--text-main); font-size: 0.8125rem; font-weight: 700; transition: background 0.14s; }
.home-page .util-store:hover { background: var(--gray-200); }
/* 스토어 로고 — Google Play / App Store 아이콘 이미지 */
.home-page .util-store-ic { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; object-fit: contain; }
/* 폴드 680~ — 메뉴 | 앱 좌우 분할(가로 공간 활용·앱카드 여백 낭비 해소). 메뉴는 좁아진 폭이라 1열 유지 */
@media (min-width: 680px) {
.home-page .util-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
}
/* PC 1024~ — 메뉴 폭 넓혀 2×2 */
@media (min-width: 1024px) {
.home-page .util-grid { grid-template-columns: 1.25fr 1fr; }
.home-page .util-menu { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
}
/* 마지막 섹션(util) 폰트 — 해상도별 최적화(모바일 풀폭·PC=base / 폴드 좌우분할 좁은 컬럼·플립 좁은 화면=압축).
섹션 제목 home-sec-title/sub는 이미 반응형(공통)이라 제외 */
@media (max-width: 360px) { /* 플립 */
.home-page .util-item-text b { font-size: 0.9375rem; }
.home-page .util-item-text span { font-size: 0.8125rem; }
.home-page .util-app-title { font-size: 1rem; }
.home-page .util-app-desc { font-size: 0.8125rem; }
.home-page .util-store { font-size: 0.75rem; }
}
@media (min-width: 361px) and (max-width: 1023px) { /* 모바일·폴드 동일 — 좁은 컬럼 기준 압축 */
.home-page .util-item-text b { font-size: 1rem; }
.home-page .util-item-text span { font-size: 0.8125rem; }
.home-page .util-app-title { font-size: 1.0625rem; }
.home-page .util-app-desc { font-size: 0.8125rem; }
}