/* ========================================= YH TableCards KV - JS-driven Mobile Cards - JS가 에 yh-kv-mobile 붙이면 모바일 카드 ON - 카드 생성 성공 시 table.yh-kv-enhanced 붙고 표 숨김 ========================================= */ :root{ --yh-kv-sticky-offset: 96px; } html{ scroll-padding-top: var(--yh-kv-sticky-offset); } /* 기본: 카드 컨테이너는 숨김 (PC 포함) */ .yh-kv-cards{ display: none; width: 100%; box-sizing: border-box; scroll-margin-top: var(--yh-kv-sticky-offset); } /* ✅ JS가 모바일이라고 판단하면 카드 보이게 */ html.yh-kv-mobile .yh-kv-cards{ display: block !important; overflow-x: hidden !important; overflow-y: visible !important; } /* ✅ 카드 생성 성공했을 때만 표 숨김 (안전장치) */ html.yh-kv-mobile table.yh-rtable-kv.yh-kv-enhanced{ display: none !important; } /* AOS 없어도 카드 숨김 방지 */ html:not(.aos-init) .yh-kv-cards [data-aos]{ opacity: 1 !important; transform: none !important; } /* ========================================= YH KV CARD - Balanced B2B Version ========================================= */ /* 카드 기본 */ .yh-kv-card{ background: #ffffff; border: 1px solid #e4e8ee; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); padding: 16px 16px 14px; margin: 0 0 16px 0; box-sizing: border-box; max-width: 100%; } /* 카드 제목 */ .yh-kv-title{ font-weight: 800; font-size: 15px; color: #164f75; margin: 0 0 10px 0; line-height: 1.4; } /* 기본 row */ .yh-kv-row{ display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 9px 0; border-top: 1px dashed #e6edf3; align-items: start; } .yh-kv-row:first-of-type{ border-top: 0; padding-top: 0; } /* 라벨 */ .yh-kv-label{ font-size: 12px; font-weight: 700; color: #5f6b78; letter-spacing: 0.01em; } /* 값 */ .yh-kv-value{ font-size: 14px; font-weight: 500; color: #2c2c2c; line-height: 1.5; } /* ✅ 중복 모드 대표 스펙(첫 줄 강조) */ .yh-kv-row.yh-kv-row--primary{ position: relative; background: #f6f9fc; border-top: 1px solid #dbe8f4; padding: 12px 12px 12px 18px; /* 왼쪽 바 공간 */ margin: 8px -12px 10px; border-radius: 10px; } /* 좌측 포인트 바 (은은하게) */ .yh-kv-row.yh-kv-row--primary::before{ content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: #236fa1; opacity: 0.18; } /* 강조 시 라벨 */ .yh-kv-row.yh-kv-row--primary .yh-kv-label{ font-weight: 700; color: #4f5e6d; } /* 강조 시 값 */ .yh-kv-row.yh-kv-row--primary .yh-kv-value{ font-weight: 800; font-size: 15px; color: #123a55; } /* 작은 화면 대응 */ @media (max-width: 380px){ .yh-kv-row{ grid-template-columns: 1fr; gap: 6px; align-items: start; } .yh-kv-row.yh-kv-row--primary{ margin: 8px -10px 10px; padding: 12px 12px 12px 16px; } }