/* ============================================================
   개인 커맨드센터 대시보드 — 디자인 시스템
   Notion + Linear + Apple Weather 느낌의 미니멀 / 고밀도 UI
   ============================================================ */

/* ---------- 1. 기본 토큰: radius / gap 통일 ---------- */
:root {
  --border-radius: 10px;
  --half-border-radius: 6px;
  --widget-gap: 16px;
  --widget-content-vertical-padding: 12px;
  --widget-content-horizontal-padding: 16px;
  --content-bounds-padding: 16px;
}

/* ---------- 1-1. 다크모드 가독성 보정 ----------
   Glance 기본 다크 테마의 --color-text-subdue가 lightness 35%인데 위젯 배경이 9~10%라
   대비가 너무 낮아(계산상 2.6:1 정도, WCAG AA 4.5:1 미달) 라벨류 텍스트(시간/단위/보조설명 등
   이 CSS 전반에서 var(--color-text-subdue)를 쓰는 곳 전부)가 다크모드에서 흐릿하게 보임.
   구분선(--color-widget-content-border, --color-separator)도 배경과 겨우 4% 차이라 같이 보정.
   라이트 테마는 별도 공식(밝기 반전)이라 문제 없어서 다크에서만 적용. ---------- */
:root:not([data-scheme="light"]) {
  --color-text-subdue: hsl(var(--ths), 52%);
  --color-widget-content-border: hsl(var(--bghs), 22%);
  --color-separator: hsl(var(--bghs), 22%);
}

/* ---------- 2. 카드 프레임: border 위주, shadow 최소화 ---------- */
/* :not(.widget-content-frameless) 필수 — split-column의 바깥 컨테이너(frameless)까지
   테두리를 씌우면 뉴스/주식 탭에서 "이중 블록"(바깥 박스 + 안쪽 카드들)처럼 보임 */
.widget-content:not(.widget-content-frameless) {
  background: var(--color-widget-background);
  border: 1px solid var(--color-widget-content-border);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px -1px hsla(var(--bghs), 0%, 0.4);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* split-column 내부 슬롯도 동일 프레임 적용 */
.widget-content-frame {
  border-radius: var(--border-radius);
}

/* ---------- 3. Hover 애니메이션 ---------- */
.widget-content:not(.widget-content-frameless):hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px -10px hsla(var(--bghs), 0%, 0.55);
}

/* ---------- 4. 위젯 헤더 밀도 + 타이포 위계 ---------- */
.widget-header {
  margin-bottom: 0.7rem;
  gap: 0.6rem;
}
.widget-header h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ---------- 5. 카테고리 Accent Color 시스템 ---------- */
/* 날씨 = Blue */
.widget.accent-weather {
  --color-primary: hsl(213, 85%, 60%);
}
/* 뉴스 = Orange */
.widget.accent-news {
  --color-primary: hsl(25, 90%, 55%);
}
/* 주식 = Green */
.widget.accent-stocks {
  --color-primary: hsl(150, 60%, 45%);
}
/* 시스템(오늘 요약) = Purple */
.widget.accent-system {
  --color-primary: hsl(262, 60%, 62%);
}
/* 내 서비스 = Teal */
.widget.accent-service {
  --color-primary: hsl(180, 55%, 42%);
}

/* 뉴스 탭: 언론사별 구분 색 — accent-news(orange)보다 클래스 수가 많아 우선 적용됨 */
.widget.news-source.src-maeil {
  --color-primary: hsl(45, 80%, 55%);
}
.widget.news-source.src-asiae {
  --color-primary: hsl(320, 60%, 62%);
}
.widget.news-source.src-khan {
  --color-primary: hsl(255, 55%, 65%);
}
.widget.news-source.src-etnews {
  --color-primary: hsl(130, 50%, 50%);
}
.widget.news-source.src-boan {
  --color-primary: hsl(0, 70%, 60%);
}
.widget.news-source.src-zdnet {
  --color-primary: hsl(195, 65%, 55%);
}

/* 날씨 탭: 위젯 3개(현재 날씨 / 시간별 예보 / 7일 예보) 구분 색 — 파란 계열 안에서 톤만 다르게 */
.widget.accent-weather.wx-current {
  --color-primary: hsl(213, 85%, 60%);
}
.widget.accent-weather.wx-hourly {
  --color-primary: hsl(188, 70%, 48%);
}
.widget.accent-weather.wx-daily {
  --color-primary: hsl(248, 60%, 66%);
}

/* 주식 탭: 국내 시장 / 해외 시장 / 주요 자산 구분 색 (mkt-* 는 툴팁 스코프용으로 이미 부여된 클래스 재사용) */
.widget.accent-stocks.mkt-domestic {
  --color-primary: hsl(150, 60%, 45%);
}
.widget.accent-stocks.mkt-global {
  --color-primary: hsl(205, 65%, 55%);
}
.widget.accent-stocks.mkt-assets {
  --color-primary: hsl(42, 80%, 55%);
}

.widget.accent-weather .widget-content,
.widget.accent-news .widget-content,
.widget.accent-stocks .widget-content,
.widget.accent-system .widget-content,
.widget.accent-service .widget-content {
  border-left: 3px solid var(--color-primary);
}

/* 헤더 좌측 accent dot — 아이콘 대체용 시각 표식 */
.widget.accent-weather .widget-header h2::before,
.widget.accent-news .widget-header h2::before,
.widget.accent-stocks .widget-header h2::before,
.widget.accent-system .widget-header h2::before,
.widget.accent-service .widget-header h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: 0.6rem;
  vertical-align: middle;
}

/* ---------- 6. 현재 날씨 카드 (메인 탭 압축판 / 날씨 탭 확대판 wx-now-large) ---------- */
.wx-location {
  font-size: var(--font-size-h6);
  color: var(--color-text-subdue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.wx-now-datetime {
  font-size: var(--font-size-h6);
  color: var(--color-text-subdue);
  margin-bottom: 0.8rem;
}
.wx-now-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wx-now-icon {
  font-size: 2.4rem;
  line-height: 1;
}
.wx-now-temp {
  font-size: var(--font-size-h1);
  font-weight: 650;
  color: var(--color-text-highlight);
  line-height: 1.1;
}
.wx-now-desc {
  font-size: var(--font-size-h5);
  color: var(--color-text-subdue);
  margin-top: 0.2rem;
}
.wx-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-widget-content-border);
}
.wx-metric {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.wx-metric-icon {
  font-size: 1rem;
}
.wx-metric-value {
  font-size: var(--font-size-h5);
  font-weight: 600;
  color: var(--color-text-highlight);
}
.wx-metric-label {
  font-size: var(--font-size-h6);
  color: var(--color-text-subdue);
  flex-basis: 100%;
}
.wx-today-simple {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-widget-content-border);
  font-size: var(--font-size-h6);
  color: var(--color-text-subdue);
}
.wx-today-simple strong {
  color: var(--color-text-highlight);
  font-weight: 600;
}
.wx-today-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-widget-content-border);
}
.wx-today-label {
  font-size: var(--font-size-h6);
  color: var(--color-text-subdue);
}
.wx-today-bar .daily-bar-track {
  flex: 1;
}

/* wx-now-large: 날씨 탭의 확대판 */
.wx-now-large .wx-now-icon {
  font-size: 3.6rem;
}
.wx-now-large .wx-now-temp {
  font-size: 3.2rem;
}
.wx-now-large .wx-now-desc {
  font-size: var(--font-size-h4);
}
.wx-now-large .wx-metrics {
  gap: 1rem 0.8rem;
}
.wx-now-large .wx-metric-value {
  font-size: var(--font-size-h4);
}

/* ---------- 7. 뉴스 탭: 언론사 카드 제목은 중립색으로(주황이 너무 강해 보여서), accent 포인트는 헤더 dot에만 ---------- */
.news-source .grow.min-width-0 > a.size-h3 {
  color: var(--color-text-highlight);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 8. 시세(markets) 카드: 티커 심볼(^GSPC 등)은 숨기고 종목명만 강조 ---------- */
.widget-type-markets .min-width-0 > a.color-highlight {
  display: none;
}
.widget-type-markets .min-width-0 > div.text-truncate {
  font-size: var(--font-size-h3);
  color: var(--color-text-highlight);
  font-weight: 600;
}

/* ---------- 9. 주식 탭: 종목명 hover(모바일은 tap) 시 짧은 설명 툴팁
   nth-child 순서는 glance.yml의 각 markets 위젯 목록 순서와 반드시 일치해야 함 ---------- */
.mkt-domestic .widget-content,
.mkt-global .widget-content,
.mkt-assets .widget-content {
  overflow: visible;
}
.mkt-domestic .min-width-0,
.mkt-global .min-width-0,
.mkt-assets .min-width-0 {
  position: relative;
  cursor: help;
}
.mkt-domestic .min-width-0::after,
.mkt-global .min-width-0::after,
.mkt-assets .min-width-0::after {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: 15rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--half-border-radius);
  background: var(--color-popover-background);
  border: 1px solid var(--color-popover-border);
  box-shadow: 0 6px 16px -6px hsla(var(--bghs), 0%, 0.5);
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-base);
  font-weight: 400;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  white-space: normal;
}
.mkt-domestic .min-width-0:hover::after,
.mkt-domestic .min-width-0:active::after,
.mkt-global .min-width-0:hover::after,
.mkt-global .min-width-0:active::after,
.mkt-assets .min-width-0:hover::after,
.mkt-assets .min-width-0:active::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mkt-domestic .dynamic-columns > div:nth-child(1) .min-width-0::after { content: "국내 유가증권시장에 상장된 주요 기업의 주가 흐름을 나타내는 대표 지수입니다."; }
.mkt-domestic .dynamic-columns > div:nth-child(2) .min-width-0::after { content: "국내 코스닥 시장의 전반적인 주가 흐름을 나타내는 지수입니다."; }
.mkt-domestic .dynamic-columns > div:nth-child(3) .min-width-0::after { content: "국내 대표 대형주 200개 종목으로 구성된 지수입니다."; }
.mkt-domestic .dynamic-columns > div:nth-child(4) .min-width-0::after { content: "1달러당 원화 가치입니다. 원화 약세 시 환율이 상승합니다."; }

.mkt-global .dynamic-columns > div:nth-child(1) .min-width-0::after { content: "미국 대형주 500개 기업으로 구성된 대표적인 미국 주가지수입니다."; }
.mkt-global .dynamic-columns > div:nth-child(2) .min-width-0::after { content: "나스닥 시장의 종합 지수로 기술주·성장주의 비중이 높은 지수입니다."; }
.mkt-global .dynamic-columns > div:nth-child(3) .min-width-0::after { content: "미국 주요 우량기업 30개로 구성된 대표 주가지수입니다."; }
.mkt-global .dynamic-columns > div:nth-child(4) .min-width-0::after { content: "미국 소형주 약 2,000개로 구성된 대표적인 소형주 지수입니다."; }

.mkt-assets .dynamic-columns > div:nth-child(1) .min-width-0::after { content: "비트코인의 현재 시장 가격입니다."; }
.mkt-assets .dynamic-columns > div:nth-child(2) .min-width-0::after { content: "국제 금 현물 가격입니다."; }
.mkt-assets .dynamic-columns > div:nth-child(3) .min-width-0::after { content: "서부텍사스산원유(WTI)의 국제 기준 유가입니다."; }
.mkt-assets .dynamic-columns > div:nth-child(4) .min-width-0::after { content: "미국 10년 만기 국채 금리로, 장기 시장금리의 대표적인 지표입니다."; }

/* ---------- 10. 뉴스 탭: 언론사별 카드 — 이미지 없이 제목+시간+요약만, 카드 내부 스크롤 없이 페이지 스크롤 ---------- */
.news-source .thumbnail-container {
  display: none;
}
/* 요약은 2줄 → 1줄로 압축해서 카드당 정보량을 줄임 */
.news-source .rss-detailed-description {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
/* 태그(카테고리)는 전부 숨김 */
.news-source .attachments {
  display: none;
}
/* "Show more" → "더보기" (텍스트 노드는 CSS로 못 바꿔서 폰트 크기 0으로 숨기고 ::before로 대체 삽입,
   회전하는 화살표 아이콘(.expand-toggle-button-icon)은 자체 font-size가 있어 그대로 보임) */
.news-source .expand-toggle-button {
  font-size: 0;
  text-align: center;
  color: var(--color-primary);
}
.news-source .expand-toggle-button::before {
  content: "더보기";
  font-size: var(--font-size-h6);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- 11. 뉴스 탭: split-column의 masonry(들쭉날쭉) 대신 진짜 2x3 그리드로 배치
   — 데스크톱 폭(1200px+)에서만 적용, 좁은 화면은 Glance 기본 반응형 동작 유지.
   행 높이를 minmax(고정값, auto) + height:100%로 강제로 맞췄더니 한겨레(설명 길어짐)·
   한국경제(설명 없음)처럼 내용량이 크게 다른 카드에서 내용이 잘리는 문제가 있어서,
   높이를 강제로 맞추는 대신 auto(각 카드 내용만큼) + align-items:start로 안전하게 변경.
   대신 카드 높이는 100% 동일하진 않지만 잘리는 일은 없음. ---------- */
@media (min-width: 1200px) {
  .news-grid .masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    align-items: start;
    gap: var(--widget-gap);
  }
  .news-grid .masonry-column {
    display: contents;
  }
}

/* ---------- 12. 메인 탭: 대표 뉴스 5개를 2열로 배치해 여백 활용 ---------- */
.summary-news .list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.6rem;
}
.summary-news .list > li {
  /* 기본 .list 스타일의 margin-top 누적(margin-top: calc(--list-half-gap * 2))을 무력화
     — 그대로 두면 그리드 오른쪽 열이 왼쪽보다 아래로 밀려 행이 어긋남 */
  margin-top: 0 !important;
  border-bottom: 1px solid var(--color-widget-content-border);
  padding-bottom: 1rem;
}
.summary-news .list > li:last-child {
  border-bottom: none;
}

/* ---------- 13. 날씨 탭: 시간별 예보 (3시간 간격 표 + 기온 그래프 + 강수확률) ---------- */
.hourly3-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  text-align: center;
}
.hourly3-times {
  font-size: var(--font-size-h6);
  color: var(--color-text-subdue);
  margin-bottom: 0.3rem;
}
.hourly3-icons {
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.hourly3-temps {
  font-size: var(--font-size-h5);
  font-weight: 600;
  color: var(--color-text-highlight);
  margin-bottom: 0.3rem;
}
.hourly3-pops {
  font-size: var(--font-size-h6);
  color: hsl(213, 85%, 65%);
}
.hourly3-precip {
  font-size: 10px;
  color: var(--color-text-subdue);
  margin-bottom: 0.5rem;
}
.hourly3-pop-empty {
  color: var(--color-text-subdue);
  opacity: 0.4;
}
/* 기온 그래프는 위 시간축(시간/아이콘/기온/강수확률)의 보조 시각화 — 낮고 은은하게 */
.hourly3-graph {
  height: 2.4rem;
  opacity: 0.7;
}
.hourly3-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hourly3-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 14. 날씨 탭: 7일 예보 리스트 ---------- */
.daily-list {
  display: flex;
  flex-direction: column;
}
.daily-row {
  display: grid;
  grid-template-columns: 2.6rem 1.6rem 2.4rem 1.8rem 1fr 1.8rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid var(--color-widget-content-border);
}
.daily-row:last-child {
  border-bottom: none;
}
.daily-row-today {
  font-weight: 650;
}
.daily-row-today .daily-day {
  color: var(--color-primary);
}
.daily-day {
  font-size: var(--font-size-h5);
  font-weight: 600;
  color: var(--color-text-highlight);
}
.daily-icon {
  font-size: 1.1rem;
  text-align: center;
}
.daily-pop {
  font-size: var(--font-size-h6);
  color: hsl(213, 85%, 65%);
  text-align: right;
}
.daily-min {
  font-size: var(--font-size-h6);
  color: var(--color-text-subdue);
  text-align: right;
}
.daily-max {
  font-size: var(--font-size-h6);
  color: var(--color-text-highlight);
  font-weight: 600;
}
.daily-bar-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--color-widget-content-border);
}
.daily-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, hsl(213, 85%, 60%), hsl(25, 90%, 60%));
}

/* ---------- 15. 메인 탭: 내 서비스 — 바로가기를 pill 버튼으로, 줄바꿈 가능한 flex로 배치
   (실제 마크업은 <ul class="list"><li><div class="flex items-center gap-10"><a class="bookmarks-link">
   구조라 li 하나가 그리드 셀이 아니라 내용 크기만큼만 차지함 — grid-auto-fill로는 셀 너비가
   들쭉날쭉해지고 일부 항목에 배경이 안 씌워진 것처럼 보였던 원인. flex-wrap + 내부 div를
   pill로 스타일링하면 항목마다 크기가 고르게 잡힘) ---------- */
.accent-service .bookmarks-group .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.accent-service .bookmarks-group .list > li {
  margin-top: 0 !important;
}
.accent-service .bookmarks-group .list > li > .flex {
  background: var(--color-widget-content-border);
  border-radius: var(--half-border-radius);
  padding: 0.6rem 0.9rem;
  transition: background-color 0.15s ease;
}
.accent-service .bookmarks-group .list > li > .flex:hover {
  background: hsl(var(--bghs), 28%);
}
.accent-service .bookmarks-link {
  font-size: var(--font-size-h5);
}

/* ---------- 16. 반응형: 모바일 여백 축소 ---------- */
@media (max-width: 720px) {
  .wx-now-large .wx-now-icon {
    font-size: 2.8rem;
  }
  .wx-now-large .wx-now-temp {
    font-size: 2.4rem;
  }
  .wx-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .daily-row {
    grid-template-columns: 2.2rem 1.4rem 2rem 1.6rem 1fr 1.6rem;
    gap: 0.4rem;
  }
  .summary-news .list {
    grid-template-columns: 1fr;
  }
}