/* =========================================
  YH TableCards KV (3+ columns) - Mobile Cards
  - Desktop: keep original table
  - Mobile: hide table, show key:value cards
========================================= */

:root{
  /* sticky TOC/header offset (if cards get hidden, increase) */
  --yh-kv-sticky-offset: 96px;
}

html{
  scroll-padding-top: var(--yh-kv-sticky-offset);
}

/* container created by JS */
.yh-kv-cards{
  display: none;
  width: 100%;
  box-sizing: border-box;
  scroll-margin-top: var(--yh-kv-sticky-offset);
}

/* mobile: hide table, show cards */
@media (max-width: 768px){
  table.yh-rtable-kv{ display: none !important; }
  .yh-kv-cards{ display: block !important; }

  /* prevent inner horizontal scrollbars */
  .yh-kv-cards{
    overflow-x: hidden !important;
    overflow-y: visible !important;
    contain: none !important;
  }
}

/* ===== Card UI ===== */
.yh-kv-card{
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  padding: 14px 14px 10px;
  margin: 0 0 14px 0;
  box-sizing: border-box;
  max-width: 100%;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* if anything inside tries to overflow */
.yh-kv-card *{
  max-width: 100%;
  box-sizing: border-box;
}

.yh-kv-title{
  font-weight: 900;
  font-size: 15px;
  color: #164f75;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.yh-kv-sub{
  font-size: 12px;
  color: #6b7684;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* key:value rows */
.yh-kv-row{
  display: grid;
  grid-template-columns: minmax(108px, 132px) 1fr;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px dashed #e7edf5;
}

@media (max-width: 380px){
  .yh-kv-row{
    grid-template-columns: 1fr;
  }
  .yh-kv-label{
    display: block;
    margin-bottom: 4px;
  }
}


.yh-kv-row:first-of-type{
  border-top: 0;
  padding-top: 0;
}



.yh-kv-label{
  font-size: 12px;
  font-weight: 800;
  color: #164f75;
  letter-spacing: 0.02em;
  line-height: 1.35;
}



/* nicer spacing when value has paragraphs */
.yh-kv-value p{
  margin: 0 0 8px 0;
}
.yh-kv-value p:last-child{
  margin-bottom: 0;
}

.yh-kv-cards{ overflow: visible !important; }

/* AOS 초기화/refresh 실패해도 카드가 안 숨겨지게 */
html:not(.aos-init) .yh-kv-cards [data-aos]{
  opacity: 1 !important;
  transform: none !important;
}

.yh-kv-cards [data-aos]{
  opacity: 1; /* 기본 보임 */
}