/* ============================================================ program-mobile.css 프로그램 카드 모바일 전용 스타일시트 (단일 진실 소스) - 적용 범위: ≤991px 뷰포트 - 대상 페이지: list.siso, search.siso, main 등 .program .goods 그리드 사용 페이지 - program.css 이후에 로드되어야 함 (main.html ) - !important 는 program.css 의 legacy !important 대응 시에만 최소 사용 ============================================================ */ @media (max-width: 991px) { /* ──────────────────────────────────────────────────────── 0. 모바일 미니멀화 — 이미지 + 상품명 + 가격 + 요약 설명 + 자세히보기 태그(adventage) / 뱃지(NEW+BEST/신규출시/NEW 메달) / 작동확인완료 제거 (가격 행 자체는 노출, 안의 뱃지만 숨김) ──────────────────────────────────────────────────────── */ body .program .goods .hot_image2_m, body .program .goods .inner .hot_image2_m, body .program .goods .inner > .hot_image2_m, body .program .goods .inner .info .adventage, body .program .goods .info .adventage, body .program .goods .adventage, body .program .goods .complete_cover, /* 가격 행 내부 뱃지/메달은 숨김 (가격 라벨/금액만 노출) */ body .program .goods .price .hot_image, body .program .goods .price .hot_image.double, body .program .goods .price .hot_image.best, body .program .goods .price .hot_image.new, body .program .goods .price .hot_image.upgrade, body .program .goods .price .hot_image2, body .program .goods .price .hot_image2.new, body .program .goods .price .gradient_nemo, body .program .goods .price .medal, body .program .goods .price .double_img, body .program .goods .price .medal_icon, body .program .goods .price .icon.medal_icon { display: none; } /* ──────────────────────────────────────────────────────── 1. 그리드 — 2열 고정 ──────────────────────────────────────────────────────── */ body .program, body .program.after { display: flex; flex-wrap: wrap; flex-direction: row; gap: 12px; width: 100%; max-width: 100%; margin: 0 auto; padding: 0 14px; box-sizing: border-box; float: none; } /* program.css legacy 의 .program .goods:nth-child(2n)/(3n) 0,0,3,0 specificity 와 대등 이상으로 맞추기 위해 nth-child 셀렉터도 함께 명시 */ body .program > .goods, body .program > .goods:nth-child(2n), body .program > .goods:nth-child(3n), body .program.after > .goods, body .program.after > .goods:nth-child(2n), body .program.after > .goods:nth-child(3n) { flex: 0 0 calc((100% - 12px) / 2); width: calc((100% - 12px) / 2) !important; /* legacy width:320px (1023px) / 48% (767px) / calc(50% - 7px) (575px) 무력화 */ max-width: calc((100% - 12px) / 2); /* program.css 의 margin-right:15px / 7px / 3px !important 무력화 */ margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; float: none; height: auto; min-height: 0; background: #ffffff; border: 1px solid #f1f3f5; border-radius: 14px; box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04); overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; } body .program > .goods > a.atag { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; height: 100%; text-decoration: none; color: inherit; padding: 0; margin: 0; } body .program .goods .inner { display: flex; flex-direction: column; flex: 1 1 auto; height: auto; width: 100%; padding: 0; margin: 0; background: transparent; box-sizing: border-box; position: relative; } /* ──────────────────────────────────────────────────────── 2. 이미지 — 4:3 컨테이너, contain 으로 크롭 방지 ──────────────────────────────────────────────────────── */ body .program .goods .inner .img_area { position: relative; width: 100%; height: 0; padding-bottom: 75%; margin: 0; overflow: hidden; background: #ffffff; border-radius: 0; /* program.css 의 aspect-ratio 룰 무력화 (legacy 충돌 대응) */ aspect-ratio: auto !important; } body .program .goods .inner .img_area > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; display: block; margin: 0; transform: none !important; /* hover scale 비활성화 (legacy) */ } /* 이미지 hover 줌 비활성화 */ body .program .goods:hover .inner .img_area > img { transform: none !important; } /* ──────────────────────────────────────────────────────── 3. 이미지 위 뱃지 — 모바일에서는 모두 숨김 (정보는 가격행 칩으로 통합 표시) ──────────────────────────────────────────────────────── */ body .program .goods .hot_image2_m, body .program .goods .inner .hot_image2_m, body .program .goods .inner > .hot_image2_m, body .program .goods .inner .img_area .hot_image, body .program .goods .inner .img_area > .hot_image, body .program .goods .inner .img_area > .hot_image2 { display: none !important; } /* ──────────────────────────────────────────────────────── 4. 작동확인완료 오버레이 — 이미지 하단 라이트 그레이 알약 ──────────────────────────────────────────────────────── */ body .program .goods .inner .img_area .complete_cover { position: absolute; inset: auto 0 6px 0; top: auto; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: transparent; margin: 0; height: auto; z-index: 3; pointer-events: none; } body .program .goods .inner .img_area .complete_cover .complete { position: static; background: rgba(255, 255, 255, 0.95); color: #191f28; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 6px rgba(17, 24, 39, 0.10); white-space: nowrap; margin: 0; top: auto; right: auto; width: auto; } body .program .goods .inner .img_area .complete_cover .complete p { margin: 0; padding: 0; font-size: inherit; } body .program .goods .inner .img_area .complete_cover .complete p span { font-size: 9px; color: #6b7684; font-weight: 600; margin-right: 3px; display: inline; } /* ──────────────────────────────────────────────────────── 5. 정보 영역 — 세로 컬럼 플로우 ──────────────────────────────────────────────────────── */ body .program .goods .inner .info { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 12px 8px; margin: 0; background: transparent; box-sizing: border-box; width: 100%; } /* ──────────────────────────────────────────────────────── 6. 가격 행 — 뱃지(상단) + 라벨 + 금액(한 줄) ──────────────────────────────────────────────────────── */ body .program .goods .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 0 0 8px; padding: 0; height: auto !important; position: relative; border: 0; border-bottom: 0; } body .program .goods .price .price-label { font-size: 10.5px; color: #6b7684; font-weight: 600; letter-spacing: -0.2px; display: inline; } body .program .goods .price b { font-size: 16px !important; /* program.css 575px font-size:12px !important 대응 */ font-weight: 800; color: #191f28; letter-spacing: -0.4px; line-height: 1.2; display: inline; } /* ──────────────────────────────────────────────────────── 7. 뱃지 칩 (NEW+BEST / 신규출시) — 솔리드 컬러 알약 - 그라데이션/애니메이션 완전 제거 - icon sprite 숨김, 텍스트만 표시 - 가격 위 첫 행에 배치 (order: -1) ──────────────────────────────────────────────────────── */ /* 가격 행 내부 모든 뱃지/메달/아이콘 — 완전 숨김 (NEW+BEST / 신규출시 / medal_icon / gradient_nemo 등 일괄 제거) selector specificity 강화: list.html 인라인의 .program .goods .inner .info .price .hot_image (0,0,7,0) 를 body 접두로 0,0,7,1 로 끌어올려 자연 override (!important 불필요) */ body .program .goods .inner .info .price .hot_image, body .program .goods .inner .info .price .hot_image.double, body .program .goods .inner .info .price .hot_image.best, body .program .goods .inner .info .price .hot_image.new, body .program .goods .inner .info .price .hot_image.upgrade, body .program .goods .inner .info .price .hot_image2, body .program .goods .inner .info .price .hot_image2.new, body .program .goods .inner .info .price .hot_image .medal, body .program .goods .inner .info .price .hot_image .double_img, body .program .goods .inner .info .price .hot_image.double .double_img, body .program .goods .inner .info .price .hot_image .icon, body .program .goods .inner .info .price .hot_image .medal_icon, body .program .goods .inner .info .price .hot_image .icon.medal_icon, body .program .goods .inner .info .price .hot_image .double_img .icon, body .program .goods .inner .info .price .hot_image .double_img .medal_icon, body .program .goods .inner .info .price .hot_image .medal > .icon, body .program .goods .inner .info .price .hot_image .gradient_nemo, body .program .goods .inner .info .price .hot_image2 .gradient_nemo, body .program .goods .inner .info .price .gradient_nemo { display: none; } /* ──────────────────────────────────────────────────────── 8. 상품명 (sub-title) — 카드 메인 타이틀, 2줄 ellipsis ──────────────────────────────────────────────────────── */ /* selector specificity 강화: list.html 인라인의 .program .goods .inner .info .sub-title span (0,0,5,0) 를 body 접두로 0,0,5,1 로 끌어올려 자연 override */ body .program .goods .inner .info .sub-title { display: block; height: auto; padding: 0; margin: 0 0 8px; border: 0; font-size: 14px; letter-spacing: -0.3px; } body .program .goods .inner .info .sub-title span { display: -webkit-box; font-size: 14px; font-weight: 600; line-height: 1.35; color: #191f28; letter-spacing: -0.4px; white-space: normal; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.7em; } /* ──────────────────────────────────────────────────────── 9. 태그 칩 (adventage) — 모바일 미니멀화로 숨김 처리 (상단 0번 섹션의 hide 룰을 보강하는 방어용) ──────────────────────────────────────────────────────── */ body .program .goods .adventage { display: none; } body .program .goods .adventage > span, body .program .goods .adventage span { display: inline-flex; align-items: center; margin: 0; padding: 3px 8px; font-size: 10px; font-weight: 600; color: #4e5968; background: #f1f3f5; border: 0; border-radius: 999px; white-space: nowrap; letter-spacing: -0.2px; line-height: 1.4; width: auto; height: auto; } body .program .goods .adventage span:empty { display: none; } /* ──────────────────────────────────────────────────────── 10. 요약 설명 (text_box) — 모바일 미니멀: 텍스트만 표시 - "요약 설명" 라벨 ::before 제거 - 컬러 액센트 바 ::after 제거 - 배경/보더/패딩 없는 플레인 텍스트 selector specificity 강화: list.html 인라인의 .program .goods .inner .info .text_box (0,0,5,0) 를 body 접두로 0,0,5,1 로 끌어올려 자연 override ──────────────────────────────────────────────────────── */ body .program .goods .inner .info .text_box { display: block; height: auto; max-height: none; margin: 0 0 10px; padding: 0; background: transparent; border: 0; border-radius: 0; box-sizing: border-box; font-size: 11px; letter-spacing: -0.2px; overflow: visible; text-align: left; position: relative; } /* 라벨(::before) / 액센트 바(::after) 모두 제거 */ body .program .goods .inner .info .text_box::before, body .program .goods .inner .info .text_box::after { content: none; display: none; } /* text_box p — sub-title 중복이라 숨김 */ body .program .goods .inner .info .text_box p { display: none; } /* 본문 — 텍스트만, 3줄 ellipsis */ body .program .goods .inner .info .text_box span { display: -webkit-box; font-size: 11.5px; line-height: 1.5; color: #4e5968; font-weight: 500; word-break: keep-all; white-space: normal; margin: 0; padding: 0; vertical-align: baseline; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 4.5em; } body .program .goods .inner .info .text_box span br { display: inline; } body .program .goods .inner .info .text_box span:empty { display: none; } body .program .goods .inner .info .text_box:not(:has(> span:not(:empty))) { display: none; } /* ──────────────────────────────────────────────────────── 11. 액션 행 (자세히보기) — 카드 하단 풀폭 다크 버튼 - tip_box_wrap (추가설명 툴팁) 은 좁은 모바일에서 숨김 ──────────────────────────────────────────────────────── */ body .program .goods .tw-action-row { display: flex; margin: auto 12px 12px; padding: 0; gap: 0; align-items: stretch; width: auto; } body .program .goods .tw-action-row .tip_box_wrap, body .program .goods .tip_box_wrap, body .program .goods .tw-action-row .tip_box_view, body .program .goods .tip_box_view { display: none !important; } body .program .goods .tw-action-row .detail_btn, body .program .goods .tw-action-row .program_btn, body .program .goods .program_btn, body .program .goods .detail_btn { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; height: 38px; line-height: 1; padding: 0; margin: 0; font-size: 12.5px; font-weight: 700; color: #ffffff; background: #191f28; border: 0; border-radius: 8px; letter-spacing: -0.3px; width: 100%; } body .program .goods .tw-action-row .detail_btn a, body .program .goods .tw-action-row .program_btn a { color: inherit; text-decoration: none; } } /* ============================================================ 575px↓ — 폰트 미세 조정 (열 수는 유지: 2열) ============================================================ */ @media (max-width: 575px) { body .program, body .program.after { gap: 10px; padding: 0 12px; } body .program > .goods, body .program > .goods:nth-child(2n), body .program > .goods:nth-child(3n), body .program.after > .goods, body .program.after > .goods:nth-child(2n), body .program.after > .goods:nth-child(3n) { flex: 0 0 calc((100% - 10px) / 2); width: calc((100% - 10px) / 2) !important; max-width: calc((100% - 10px) / 2); margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body .program .goods .inner .info { padding: 10px 10px 8px; } body .program .goods .sub-title span { font-size: 13px; } body .program .goods .price b { font-size: 14.5px !important; } body .program .goods .price .price-label { font-size: 10px; } body .program .goods .adventage > span, body .program .goods .adventage span { font-size: 9.5px; padding: 2px 7px; } body .program .goods .text_box p { font-size: 11px; } body .program .goods .text_box span { font-size: 10.5px; } body .program .goods .tw-action-row { margin: auto 10px 10px; } body .program .goods .tw-action-row .detail_btn, body .program .goods .tw-action-row .program_btn, body .program .goods .program_btn, body .program .goods .detail_btn { font-size: 12px; height: 36px; } body .program .goods .price .hot_image .medal, body .program .goods .price .hot_image .double_img, body .program .goods .price .gradient_nemo { font-size: 9.5px; padding: 3px 9px !important; } } /* ============================================================ 360px↓ — 초소형 폰 (여전히 2열) ============================================================ */ @media (max-width: 360px) { body .program, body .program.after { gap: 8px; padding: 0 10px; } body .program > .goods, body .program > .goods:nth-child(2n), body .program > .goods:nth-child(3n), body .program.after > .goods, body .program.after > .goods:nth-child(2n), body .program.after > .goods:nth-child(3n) { flex: 0 0 calc((100% - 8px) / 2); width: calc((100% - 8px) / 2) !important; max-width: calc((100% - 8px) / 2); margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body .program .goods .inner .info { padding: 9px 8px 6px; } body .program .goods .sub-title span { font-size: 12.5px; } body .program .goods .price b { font-size: 13.5px !important; } body .program .goods .adventage > span, body .program .goods .adventage span { font-size: 9px; padding: 2px 6px; } }