/* ============================================================
   깨알뉴스 PANEL CSS v1.2
   ------------------------------------------------------------
   - main.css의 변수/레이아웃 사용
   - 모든 뉴스 카드 동일 크기
   - 오늘 1위만 검정 강조
   - 카테고리별 은은한 색상
   - 제주 오렌지
   - 빈 지역카드 없음
   ============================================================ */

/* ============================================================
   PANEL
   ============================================================ */

#newsHomePanel {
  width: 100%;
}

#newsHomePanel[hidden] {
  display: none !important;
}

/* ============================================================
   HEADER
   ============================================================ */

#newsHomePanel .kkaeal-news-home-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 14px;
}

#newsHomePanel .kkaeal-news-home-title {
  margin: 0;

  color: var(--text);

  font-size: 25px;

  line-height: 1.25;

  letter-spacing: -1px;
}

#newsHomePanel .kkaeal-news-home-desc {
  margin: 5px 0 0;

  color: var(--text-soft);

  font-size: 11px;

  line-height: 1.6;
}

/* ============================================================
   UPDATED
   ============================================================ */

#newsHomePanel .kkaeal-news-updated {
  flex: 0 0 auto;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 7px 9px;

  border: 1px solid var(--line);

  border-radius: var(--radius-sm);

  background: var(--surface);
}

#newsHomePanel .kkaeal-news-updated > span {
  color: var(--text-soft);

  font-size: 9px;
}

#newsHomePanel .kkaeal-news-updated > strong {
  font-size: 10px;
}

#newsHomePanel .kkaeal-news-updated > button {
  margin-left: 3px;

  padding: 4px 7px;

  border: 0;

  border-radius: 7px;

  background: var(--surface-soft);

  color: var(--text-soft);

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}

/* ============================================================
   SUBGROUP TABS
   ============================================================ */

#newsHomePanel .kkaeal-news-tabs {
  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 17px;

  padding: 1px 0 4px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
}

#newsHomePanel .kkaeal-news-tabs::-webkit-scrollbar {
  display: none;
}

#newsHomePanel .kkaeal-news-tab {
  flex: 0 0 auto;

  min-height: 32px;

  padding: 6px 10px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: var(--surface);

  color: var(--text-soft);

  font-size: 10px;

  font-weight: 750;

  white-space: nowrap;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

#newsHomePanel .kkaeal-news-tab.is-active {
  border-color: var(--brand);

  background: var(--brand);

  color: #ffffff;
}

/* ============================================================
   BLOCK
   ============================================================ */

#newsHomePanel .kkaeal-news-block {
  padding: 22px 0 28px;

  border-top: 1px solid var(--line);

  scroll-margin-top: 78px;
}

#newsHomePanel .kkaeal-news-block:first-of-type {
  padding-top: 5px;

  border-top: 0;
}

/* ============================================================
   BLOCK HEADER
   ============================================================ */

#newsHomePanel .kkaeal-news-block-head,
#newsHomePanel .kkaeal-news-jeju-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 12px;
}

#newsHomePanel .kkaeal-news-block-eyebrow {
  display: block;

  margin-bottom: 2px;

  color: var(--accent);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: 0.7px;
}

#newsHomePanel .kkaeal-news-block-head h3,
#newsHomePanel .kkaeal-news-jeju-title h3 {
  margin: 0;

  font-size: 19px;

  line-height: 1.3;

  letter-spacing: -0.7px;
}

#newsHomePanel .kkaeal-news-block-head > small,
#newsHomePanel .kkaeal-news-jeju-head > small {
  flex: 0 0 auto;

  padding: 4px 7px;

  border-radius: 999px;

  background: var(--surface-soft);

  color: var(--text-soft);

  font-size: 9px;

  font-weight: 800;
}

/* ============================================================
   GRID
   ============================================================ */

#newsHomePanel .kkaeal-news-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 11px;

  align-items: stretch;
}

/* ============================================================
   NEWS CARD BASE
   ------------------------------------------------------------
   색상은 CSS 변수로 제어
   ============================================================ */

#newsHomePanel .kkaeal-news-card {
  --news-card-bg: var(--surface);

  --news-card-accent: #d9d4ca;

  min-width: 0;

  min-height: 255px;

  display: flex;

  flex-direction: column;

  padding: 15px;

  border: 1px solid var(--line);

  border-top: 3px solid var(--news-card-accent);

  border-radius: var(--radius-md);

  background: var(--news-card-bg);

  color: var(--text);

  box-shadow: 0 3px 12px rgba(32, 35, 29, 0.03);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* ============================================================
   CATEGORY COLOR
   ============================================================ */

/* 국내 */

#newsHomePanel .kkaeal-news-card.news-category-domestic {
  --news-card-bg: #f4f7fd;

  --news-card-accent: #7f9fce;
}

/* 해외 */

#newsHomePanel .kkaeal-news-card.news-category-world {
  --news-card-bg: #f7f4fc;

  --news-card-accent: #9483bd;
}

/* 생활 */

#newsHomePanel .kkaeal-news-card.news-category-life {
  --news-card-bg: #f3f9f5;

  --news-card-accent: #82aa8a;
}

/* 날씨 */

#newsHomePanel .kkaeal-news-card.news-category-weather {
  --news-card-bg: #f1f8fb;

  --news-card-accent: #72a5bf;
}

/* AI / 인터넷 */

#newsHomePanel .kkaeal-news-card.news-category-ai_internet {
  --news-card-bg: #f8f4fb;

  --news-card-accent: #9c82b4;
}

/* 지역 */

#newsHomePanel .kkaeal-news-card.news-category-local {
  --news-card-bg: #fff9ef;

  --news-card-accent: #d7a759;
}

/* 기타 */

#newsHomePanel .kkaeal-news-card.news-category-default {
  --news-card-bg: #ffffff;

  --news-card-accent: #cfcac0;
}

/* ============================================================
   TODAY HIGHLIGHT
   ------------------------------------------------------------
   첫 카드만 검정.

   주의:
   - grid span 없음
   - 높이 증가 없음
   - padding 증가 없음

   즉 크기는 다른 카드와 동일.
   ============================================================ */

#newsHomePanel .kkaeal-news-card.is-highlight {
  --news-card-bg: var(--brand);

  --news-card-accent: var(--accent);

  border-color: var(--brand);

  border-top-color: var(--accent);

  background: var(--brand);

  color: #ffffff;
}

/* ============================================================
   META
   ============================================================ */

#newsHomePanel .kkaeal-news-card-meta {
  min-height: 20px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;
}

#newsHomePanel .kkaeal-news-badge {
  padding: 3px 6px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);

  color: var(--text-soft);

  font-size: 8px;

  font-weight: 850;

  backdrop-filter: blur(4px);
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-badge {
  background: rgba(255, 255, 255, 0.13);

  color: rgba(255, 255, 255, 0.85);
}

#newsHomePanel .kkaeal-news-badge.is-breaking {
  background: #fff0eb;

  color: #d65d45;
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-badge.is-breaking {
  background: #ef765d;

  color: #ffffff;
}

#newsHomePanel .kkaeal-news-section-tag {
  color: #8f8980;

  font-size: 8px;

  font-weight: 700;
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-section-tag {
  color: rgba(255, 255, 255, 0.56);
}

/* ============================================================
   TITLE
   ============================================================ */

#newsHomePanel .kkaeal-news-card-title {
  margin: 9px 0 0;

  font-size: 15px;

  line-height: 1.43;

  letter-spacing: -0.5px;

  word-break: keep-all;
}

#newsHomePanel .kkaeal-news-card-title a {
  color: inherit;

  text-decoration: none;
}

/* ============================================================
   SUMMARY
   ============================================================ */

#newsHomePanel .kkaeal-news-card-summary {
  display: -webkit-box;

  margin: 8px 0 0;

  overflow: hidden;

  color: var(--text-soft);

  font-size: 10px;

  line-height: 1.62;

  word-break: keep-all;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-card-summary {
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   깨알 한 줄
   ============================================================ */

#newsHomePanel .kkaeal-news-point {
  display: flex;

  align-items: flex-start;

  gap: 6px;

  margin-top: 10px;

  padding: 8px 9px;

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.58);

  color: #625e57;

  font-size: 9px;

  line-height: 1.5;

  word-break: keep-all;
}

#newsHomePanel .kkaeal-news-point-icon {
  flex: 0 0 auto;
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-point {
  background: rgba(255, 255, 255, 0.09);

  color: rgba(255, 255, 255, 0.86);
}

/* ============================================================
   CARD FOOTER
   ============================================================ */

#newsHomePanel .kkaeal-news-card-foot {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 8px;

  margin-top: auto;

  padding-top: 12px;
}

#newsHomePanel .kkaeal-news-source {
  min-width: 0;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 3px 6px;

  color: #99938a;

  font-size: 8px;
}

#newsHomePanel .kkaeal-news-source strong {
  max-width: 120px;

  overflow: hidden;

  color: #716c63;

  text-overflow: ellipsis;

  white-space: nowrap;
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-source {
  color: rgba(255, 255, 255, 0.55);
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-source strong {
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   ORIGINAL LINK
   ============================================================ */

#newsHomePanel .kkaeal-news-original {
  flex: 0 0 auto;

  padding: 5px 7px;

  border-radius: 7px;

  background: rgba(255, 255, 255, 0.65);

  color: #69645c;

  font-size: 8px;

  font-weight: 800;

  text-decoration: none;
}

#newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-original {
  background: #ffffff;

  color: var(--brand);
}

/* ============================================================
   JEJU
   ============================================================ */

#newsHomePanel .kkaeal-news-jeju {
  margin: 3px -12px 0;

  padding: 20px 12px 27px;

  border-radius: 18px;

  background: linear-gradient(
    180deg,
    #fff8ec 0%,
    rgba(255, 248, 236, 0.15) 100%
  );
}

#newsHomePanel .kkaeal-news-jeju-title {
  display: flex;

  align-items: center;

  gap: 10px;
}

#newsHomePanel .kkaeal-news-jeju-icon {
  width: 42px;

  height: 42px;

  flex: 0 0 42px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: #ffecd2;

  font-size: 21px;
}

#newsHomePanel .kkaeal-news-jeju-title p {
  margin: 3px 0 0;

  color: #8b8072;

  font-size: 9px;
}

/*
 * 제주 섹션에서는
 * 카테고리 색상보다 제주 지역성이 우선
 */

#newsHomePanel .kkaeal-news-card.is-jeju {
  --news-card-bg: #fff8ee;

  --news-card-accent: #dfa05b;

  background: #fff8ee;

  border-color: #eadbc4;

  border-top-color: #dfa05b;
}

#newsHomePanel .kkaeal-news-card.is-jeju .kkaeal-news-point {
  background: rgba(255, 255, 255, 0.67);
}

/* ============================================================
   REGION GRID
   ============================================================ */

#newsHomePanel .kkaeal-region-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 9px;
}

/* ============================================================
   REGION CARD
   ============================================================ */

#newsHomePanel .kkaeal-region-card {
  min-width: 0;

  min-height: 165px;

  padding: 12px;

  border: 1px solid var(--line);

  border-top: 3px solid #d7a759;

  border-radius: 13px;

  background: #fffaf2;
}

#newsHomePanel .kkaeal-region-card > header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(228, 225, 216, 0.9);
}

#newsHomePanel .kkaeal-region-card > header > div {
  display: flex;

  align-items: center;

  gap: 6px;
}

#newsHomePanel .kkaeal-region-card > header strong {
  font-size: 12px;
}

#newsHomePanel .kkaeal-region-card > header small {
  min-width: 20px;

  height: 20px;

  display: grid;

  place-items: center;

  padding: 0 5px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.75);

  color: var(--text-soft);

  font-size: 8px;

  font-weight: 850;
}

/* ============================================================
   REGION ITEMS
   ============================================================ */

#newsHomePanel .kkaeal-region-items {
  margin-top: 3px;
}

#newsHomePanel .kkaeal-region-items > a,
#newsHomePanel .kkaeal-region-item {
  display: block;

  padding: 7px 1px;

  border-bottom: 1px solid var(--line);

  color: inherit;

  text-decoration: none;
}

#newsHomePanel .kkaeal-region-items > a:last-child,
#newsHomePanel .kkaeal-region-item:last-child {
  border-bottom: 0;
}

#newsHomePanel .kkaeal-region-items strong {
  display: -webkit-box;

  overflow: hidden;

  font-size: 9px;

  line-height: 1.45;

  word-break: keep-all;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;
}

#newsHomePanel .kkaeal-region-items span {
  display: block;

  margin-top: 3px;

  color: #99938a;

  font-size: 7px;
}

/* ============================================================
   EMPTY
   ============================================================ */

#newsHomePanel .kkaeal-news-empty {
  padding: 34px 15px;

  border: 1px dashed var(--line);

  border-radius: var(--radius-md);

  color: var(--text-soft);

  text-align: center;

  font-size: 11px;
}

#newsHomePanel .kkaeal-news-empty.compact {
  padding: 22px 15px;
}

/* ============================================================
   DISCLAIMER
   ============================================================ */

#newsHomePanel .kkaeal-news-disclaimer {
  margin-top: 8px;

  padding: 14px 0 3px;

  border-top: 1px solid var(--line);

  color: #98938a;

  font-size: 8px;

  text-align: center;
}

/* ============================================================
   HOVER
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  #newsHomePanel .kkaeal-news-card:hover {
    transform: translateY(-2px);

    box-shadow: 0 8px 21px rgba(32, 35, 29, 0.065);
  }

  #newsHomePanel .kkaeal-news-card-title a:hover {
    color: var(--accent);
  }

  #newsHomePanel
    .kkaeal-news-card.is-highlight
    .kkaeal-news-card-title
    a:hover {
    color: #ffd49a;
  }

  #newsHomePanel .kkaeal-news-original:hover {
    background: var(--brand-soft);
  }

  #newsHomePanel .kkaeal-news-card.is-highlight .kkaeal-news-original:hover {
    background: #fff6e9;
  }

  #newsHomePanel .kkaeal-news-tab:hover {
    border-color: #cfc9bd;
  }

  #newsHomePanel .kkaeal-region-items a:hover strong {
    color: var(--accent);
  }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 960px) {
  #newsHomePanel .kkaeal-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #newsHomePanel .kkaeal-region-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 520px) {
  #newsHomePanel .kkaeal-news-home-head {
    align-items: flex-start;

    flex-direction: column;

    gap: 9px;

    margin-bottom: 10px;
  }

  #newsHomePanel .kkaeal-news-home-title {
    font-size: 21px;
  }

  #newsHomePanel .kkaeal-news-home-desc {
    font-size: 10px;
  }

  #newsHomePanel .kkaeal-news-updated {
    width: 100%;

    padding: 6px 8px;
  }

  #newsHomePanel .kkaeal-news-updated > button {
    margin-left: auto;
  }

  #newsHomePanel .kkaeal-news-tabs {
    margin-bottom: 12px;
  }

  #newsHomePanel .kkaeal-news-block {
    padding: 17px 0 22px;

    scroll-margin-top: 66px;
  }

  #newsHomePanel .kkaeal-news-block-head h3,
  #newsHomePanel .kkaeal-news-jeju-title h3 {
    font-size: 17px;
  }

  #newsHomePanel .kkaeal-news-grid {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  #newsHomePanel .kkaeal-news-card {
    min-height: 0;

    padding: 13px;

    border-radius: 12px;
  }

  #newsHomePanel .kkaeal-news-card-title {
    font-size: 14px;
  }

  #newsHomePanel .kkaeal-news-card-summary {
    -webkit-line-clamp: 3;
  }

  #newsHomePanel .kkaeal-news-jeju {
    margin: 0 -5px;

    padding: 17px 5px 22px;
  }

  #newsHomePanel .kkaeal-news-jeju-title p {
    display: none;
  }

  #newsHomePanel .kkaeal-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  #newsHomePanel .kkaeal-region-card {
    min-height: 145px;

    padding: 10px;
  }
}