/* site/holiday-calendar.css — 휴무일 달력 조각(fragments/holiday-calendar)과 휴무일 목록.
   연락처·위치(연간 열두 달)와 메인의 휴무일 안내(이번 달)가 함께 싣는다 — 두 화면이 쓰는 부품이라 페이지 CSS 밖에 둔다.
   색은 한국이 네이비(--c-primary), 베트남이 틸(--c-accent)이고, 두 나라가 겹친 날은 반반으로 칠한다.
   색만으로 가르지 않는다 — 날짜의 말풍선 배지와 범례가 글자로 나라를 적는다(컨벤션 08 §2.6).
   색·간격·글자 크기는 토큰만 쓴다 — 컨벤션 23. 달력 격자는 디자인 시스템 카드에 없어 표(table-pagination)와 배지 색을 조합했다. */

/* ── 연간 달력: 열두 달 그리드 ── */
.hcal-year {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
  margin: 0 0 var(--sp-8);
}

/* ── 달 하나 ── */
.hcal {
  border: var(--bd); border-radius: var(--r-lg); background: var(--c-white);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}
.hcal__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-primary);
  text-align: center;
}
.hcal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hcal__grid th {
  padding: 0 0 var(--sp-2);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--c-text-mute);
  text-align: center;
}
.hcal__grid td { padding: 0; text-align: center; height: 2rem; }
.hcal__grid .is-sun { color: var(--c-danger); }
.hcal__grid .is-sat { color: var(--c-primary); }
.hcal__day {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-full);
  font-size: var(--fs-13); color: var(--c-text); font-variant-numeric: tabular-nums;
}
.hcal__grid td.is-sun .hcal__day { color: var(--c-danger); }
.hcal__grid td.is-sat .hcal__day { color: var(--c-primary); }

/* 칠해진 날 — 한 나라면 그 색, 두 나라면 왼쪽 네이비·오른쪽 틸 */
.hcal__day.has-kr { background: var(--c-primary); color: var(--c-on-primary); font-weight: var(--fw-bold); }
.hcal__day.has-vn { background: var(--c-accent); color: var(--c-on-accent); font-weight: var(--fw-bold); }
.hcal__day.has-kr.has-vn { background: linear-gradient(90deg, var(--c-primary) 50%, var(--c-accent) 50%); }
.hcal__grid td.is-sun .hcal__day.has-mark,
.hcal__grid td.is-sat .hcal__day.has-mark { color: var(--c-on-primary); }
.hcal__day.has-mark:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── 말풍선 — 칠해진 날짜 위에 뜨는 흰 카드. 열고 닫기와 가장자리 밀기는 js/site/holiday-calendar.js가 맡는다.
   스크립트가 화면 밖으로 나가는 만큼을 --hcal-tip-shift로 주면 카드는 그만큼 안쪽으로 밀리고 꼬리는 날짜를 가리킨 채로 남는다 ── */
.hcal__mark { position: relative; display: inline-flex; }
.hcal-tip {
  position: absolute; bottom: calc(100% + var(--sp-3)); left: 50%; z-index: var(--z-raised);
  transform: translateX(calc(-50% + var(--hcal-tip-shift, 0px)));
  display: flex; flex-direction: column; gap: var(--sp-3);
  width: max-content; max-width: 240px; padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); border: var(--bd); border-radius: var(--r-md); box-shadow: var(--shadow-md);
  text-align: left; white-space: normal; word-break: keep-all; color: var(--c-text);
}
.hcal-tip[hidden] { display: none; }
.hcal-tip::after {
  content: ""; position: absolute; top: 100%; left: calc(50% - var(--hcal-tip-shift, 0px));
  width: 10px; height: 10px; background: var(--c-white);
  border-right: var(--bd); border-bottom: var(--bd);
  transform: translate(-50%, -50%) rotate(45deg);
}
.hcal-tip__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.hcal-tip__country {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2);
  border-radius: var(--r-full); font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: var(--lh-base);
}
.hcal-tip__country.is-kr { background: var(--c-navy-50); color: var(--c-primary); }
.hcal-tip__country.is-vn { background: var(--c-teal-50); color: var(--c-teal-700); }
.hcal-tip__dot { width: 6px; height: 6px; border-radius: var(--r-full); }
.hcal-tip__country.is-kr .hcal-tip__dot { background: var(--c-primary); }
.hcal-tip__country.is-vn .hcal-tip__dot { background: var(--c-accent); }
.hcal-tip__name { font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--c-text); }
.hcal-tip__date { font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--c-text-mute); font-variant-numeric: tabular-nums; }

/* 메인의 작은 달력 — 날짜는 칠하지 않고 아래에 나라 색 점을 찍는다 */
.hcal--compact { padding: var(--sp-5) var(--sp-6); }
.hcal--compact .hcal__title { font-size: var(--fs-17); text-align: left; }
.hcal--compact .hcal__grid td { height: 2.4rem; }
.hcal--compact .hcal__day { position: relative; background: none; color: var(--c-text); font-weight: var(--fw-regular); font-size: var(--fs-14); }
.hcal--compact td.is-sun .hcal__day { color: var(--c-danger); }
.hcal--compact td.is-sat .hcal__day { color: var(--c-primary); }
.hcal--compact .hcal__day.has-mark { font-weight: var(--fw-bold); }
/* 칠하지 않으므로 토·일의 글자색을 그대로 둔다 — 위의 흰 글자 규칙이 여기까지 걸리면 날짜가 사라진다 */
.hcal--compact td.is-sun .hcal__day.has-mark { color: var(--c-danger); }
.hcal--compact td.is-sat .hcal__day.has-mark { color: var(--c-primary); }
.hcal--compact .hcal__day.has-mark::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: var(--r-full);
}
.hcal--compact .hcal__day.has-kr::after { background: var(--c-primary); }
.hcal--compact .hcal__day.has-vn::after { background: var(--c-accent); }
/* 두 나라가 겹친 날은 점 둘 — 점 하나를 두 색으로 나누고 폭을 넓힌다 */
.hcal--compact .hcal__day.has-kr.has-vn::after {
  width: 14px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-primary) 50%, var(--c-accent) 50%);
}

/* ── 범례 ── */
.hcal-legend {
  display: flex; gap: var(--sp-5); margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-14); color: var(--c-text-mute);
}
.hcal-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hcal-legend__swatch { width: 12px; height: 12px; border-radius: var(--r-full); display: inline-block; }
.hcal-legend__swatch.is-kr { background: var(--c-primary); }
.hcal-legend__swatch.is-vn { background: var(--c-accent); }

/* ── 휴무일 목록(연락처·위치) — 나라별 두 열 ── */
/* 칸이 표 폭만큼 늘지 않게 최소 폭을 0으로 두어, 좁은 폭에서는 표를 감싼 스크롤 상자가 가로로 민다 */
.hlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-grid-gap); margin-top: var(--sp-8); }
.hlist__h {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--c-text);
}
.hlist__h .hcal-legend__swatch { width: 10px; height: 10px; }
.hlist .data-table td:first-child { font-variant-numeric: tabular-nums; }
.hlist__empty { margin: 0; padding: var(--sp-6) 0; font-size: var(--fs-15); color: var(--c-text-mute); }

/* 메인의 「더보기」가 #holidays로 바로 오므로, 절 머리가 고정 머리줄 밑에 가리지 않게 머리줄 높이만큼 띄워 멈춘다 */
.holiday-sec { scroll-margin-top: calc(var(--header-top-h) + var(--sp-6)); }

/* 연도 고르기 — 제목 줄 오른쪽 */
.holiday-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.holiday-head .static-sec__h { margin-bottom: 0; }
.holiday-year { display: flex; align-items: center; gap: var(--sp-2); }
.holiday-year label { font-size: var(--fs-15); color: var(--c-text-mute); }
.holiday-year .select-wrap select { height: 40px; min-width: 110px; }

/* ── 반응형 ── */
@media (max-width: 1279px) { .hcal-year { grid-template-columns: repeat(3, 1fr); } }
/* 목록 표 하나가 날짜·명칭 열의 최소 폭보다 좁아지기 전에 두 나라를 한 열로 쌓는다 */
@media (max-width: 1099px) { .hlist { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }
@media (max-width: 1023px) { .hcal-year { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .hcal-year { grid-template-columns: 1fr; gap: var(--sp-4); }
}