/* CCAA 23차 — 데스크톱 세 교육 카드의 위/아래를 102px 날씨 블록과 정확하게 맞춤.
   v21-cards.css 와 v13-compact/v16의 !important 보다 높은 선택자로 마지막에 적용.
   전체 가로 너비, 배경색, 서체, 링크, 날씨 위젯, 메뉴/섹션은 그대로 유지. */

/* 날씨 위젯과 카드가 한 행에 배치되는 PC에서 정확히 102px */
@media (min-width:961px){
  #main .weather-showcase.quick-access-row {
    align-items:stretch !important;
  }
  #main .weather-showcase.quick-access-row > .quick-weather {
    height:102px !important;
    min-height:102px !important;
    max-height:102px !important;
    align-self:stretch !important;
  }
  #main .weather-showcase.quick-access-row > .quick-program-grid {
    height:102px !important;
    min-height:102px !important;
    max-height:102px !important;
    align-self:stretch !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card {
    height:102px !important;
    min-height:102px !important;
    max-height:102px !important;
    padding:9px 53px 9px 16px !important;
    justify-content:center !important;
    gap:0 !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .card-number {
    margin-bottom:6px !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .quick-card-copy {
    gap:3px !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .arrow-circle {
    top:50% !important;
    right:10px !important;
    transform:translateY(-50%) !important;
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
    font-size:24px !important;
  }
}

/* 가로 폭이 좁은 PC에서도 카드 세로 크기는 동일하고 글자가 잘리지 않도록 압축 */
@media (min-width:961px) and (max-width:1230px){
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card {
    padding:7px 39px 7px 10px !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .card-number {
    font-size:10px !important;
    margin-bottom:4px !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .quick-card-copy {
    gap:2px !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .quick-card-copy strong {
    font-size:18px !important;
    line-height:1.14 !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .quick-card-description {
    font-size:10.5px !important;
    line-height:1.32 !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .arrow-circle {
    right:7px !important;
    width:29px !important;
    height:29px !important;
    flex-basis:29px !important;
    font-size:20px !important;
  }
}

/* 태블릿에서는 날씨가 한 줄 위에 놓이므로 카드만 102px로 축소. */
@media (min-width:651px) and (max-width:960px){
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card {
    height:102px !important;
    min-height:102px !important;
    max-height:102px !important;
    padding:8px 43px 8px 12px !important;
  }
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .card-number {margin-bottom:5px !important;}
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .quick-card-copy{gap:3px !important;}
  #main .weather-showcase.quick-access-row .quick-program-grid > a.program-card .arrow-circle {right:7px !important;}
}

/* 휴대전화는 세 카드가 세로로 쌓이므로 기존 v21 모바일 디자인 유지. */