/* base.css — reset, body defaults, common atoms (toast) */

/* ===== RESET + SVG ICON DEFAULTS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Default size for all inline SVG icons */
svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
}
/* Containers that wrap SVG icons in spans with specific size */
.section-handle svg { width: 12px; height: 12px; }
.section-type-icon svg { width: 16px; height: 16px; }
.page-icon svg { width: 14px; height: 14px; }
.props-section-icon svg { width: 16px; height: 16px; }
.catalog-item-thumb svg { width: 22px; height: 22px; }
.coming-soon-mark svg { width: 24px; height: 24px; }
.empty-props svg { width: 28px; height: 28px; }
.props-section-icon-wrap > div:first-child svg { width: 16px; height: 16px; }
.field-image-actions svg { width: 14px; height: 14px; }
/* Smaller chevrons in tenant header sub-elements */
.ps-lang-selector svg { width: 11px; height: 11px; opacity: 0.6; }
.ps-user-menu svg { width: 11px; height: 11px; opacity: 0.6; }
.route-card-route svg { width: 11px; height: 11px; }


/* ===== HTML / BODY / FORM DEFAULTS ===== */
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss03", "ss06";
  color: var(--text-1);
  background: var(--bg-base);
  font-size: 13px;
  line-height: var(--lh-normal);
  letter-spacing: -0.005em;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* NOTE: min-width:1280px / overflow:hidden used to live here, but they are
   builder app-shell traits — they froze every other page at desktop width.
   Moved to `body.app-shell` in layout.css (tms2-builder / websites only). */
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ===== CHECKBOX / RADIO — 공통 커스텀 컨트롤 =====
   마크업은 그대로 두고(<label><input type="checkbox"><span>TEXT</span></label>)
   appearance:none + ::before/::after 로만 그린다.
   ::before = hover / focus-visible / active 링
   ::after  = 체크박스는 아이콘(SVG data URI), 라디오는 가운데 점.
   둘은 형태(사각+틱 / 원+점)만 다르고 크기·색·상태 로직은 전부 공유한다.

   컨텍스트별 조정은 "조상(label·td·wrapper)에 --chk-* 를 선언"하는 것으로 끝난다:
     .sr-filter-option { --chk-size: 16px; --chk-accent: var(--sr-primary); }
   API: --chk-size / --chk-accent / --chk-border / --chk-border-w / --chk-radius(체크박스 전용)
        --chk-icon / --chk-icon-indeterminate (background-image 로 쓸 url())
        --chk-dot (라디오 가운데 점 색)

   NOTE: never declare --chk-* on the input itself — a declaration on the element
   beats the inherited one from an ancestor, which would kill every per-context
   override. Always consume them as var(--chk-x, <fallback>).

   NOTE: these rules intentionally reach every checkbox/radio in the project. The
   builder's switch-style controls (.page-toggle / .field-toggle /
   .field-mini-toggle / .lang-chip-toggle / .multiselect-row) and checkout's
   .co-radio all hide their input with display:none, so they are unaffected. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width:  var(--chk-size, 16px);
  height: var(--chk-size, 16px);
  /* --chk-border-w 는 ::after 가 border box 를 덮는 데도 쓰인다(아래 참고) */
  border: var(--chk-border-w, 1.5px) solid var(--chk-border, var(--t-border-strong));
  border-radius: var(--chk-radius, 4px);
  background: var(--t-surface, #fff);
  /* drives the ::before ring — keeps the halo on the tenant brand colour */
  color: var(--chk-accent, var(--t-primary));
  cursor: pointer;
  /* NOTE: no transform here. Scaling the box would drag ::after (the tick) along
     with it — the icon would grow while it fades in, which reads as the check
     sliding in diagonally. Press feedback lives on ::before instead. */
  transition: background-color .16s ease, border-color .16s ease;
}
/* 라디오 — 사각 대신 원. 나머지는 체크박스 룰을 그대로 탄다. */
input[type="radio"] { border-radius: 50%; }

/* hover / focus / active 링 — 가운데가 비어 있는 border 링이라 박스·틱을 가리지 않는다.
   NOTE: a filled halo with z-index:-1 would be painted *under* the background of
   any non-positioned block ancestor (.sr-filter-card, table rows), i.e. invisible.
   A transparent-centre ring paints normally on top and needs no z-index at all. */
input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid currentColor;
  border-radius: calc(var(--chk-radius, 4px) + 4px);
  opacity: 0;
  transform: scale(.78);
  pointer-events: none;
  transition: opacity .16s ease, transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
input[type="radio"]::before { border-radius: 50%; }
input[type="checkbox"]:hover:not(:disabled)::before,
input[type="radio"]:hover:not(:disabled)::before { opacity: .13; transform: scale(1); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: none; }
input[type="checkbox"]:focus-visible::before,
input[type="radio"]:focus-visible::before { opacity: .26; transform: scale(1); }
/* 클릭 순간 눌리는 피드백 — 박스가 아니라 링만 반응한다(위 transition 주석 참고).
   hover/focus 룰과 specificity 가 같으므로 반드시 그 뒤에 와야 이긴다. */
input[type="checkbox"]:active:not(:disabled)::before,
input[type="radio"]:active:not(:disabled)::before { opacity: .24; transform: scale(.9); }

/* 체크 아이콘 — SVG data URI. 틱 색은 URI 안에 %23fff 로 박혀 있으므로
   다른 색이 필요하면 --chk-icon 을 통째로 갈아끼운다.
   NOTE: the URI takes double quotes and the SVG attributes take single quotes —
   swapping them breaks the declaration. #, < and > must stay percent-encoded. */
input[type="checkbox"]::after {
  content: "";
  position: absolute;
  /* 서브픽셀 방지 — inset:0(패딩박스)은 16 - 1.5*2 = 13px 라 78% 가 10.14px,
     여백이 1.43px 인 소수 기하가 된다. 컨테이너마다 원점 소수부가 달라
     (sticky 사이드바 vs transform 걸린 바텀시트) 반올림 방향이 갈리면서
     틱이 박스 안에서 1px 씩 틀어져 보였다. border box 를 덮고 아이콘을
     정수 크기로 잡으면 --chk-size 와 무관하게 여백이 항상 2px 로 고정된다:
     16→12px, 14→10px, 13→9px. */
  inset: calc(var(--chk-border-w, 1.5px) * -1);
  background-image: var(--chk-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.4l3 3 5.8-6.3'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(var(--chk-size, 16px) - 4px) calc(var(--chk-size, 16px) - 4px);
  opacity: 0;
  transform: translateY(-25%);
  transition: opacity, transform .2s ease-out;
}

/* 라디오 가운데 점 — 아이콘 대신 원. 체크 아이콘과 같은 fade 타이밍.
   크기는 체크 아이콘과 같은 이유로 정수 px. 퍼센트(38%)는 패딩박스
   (16 - 1.5*2 = 13px) 기준이라 4.94px 라는 소수 원이 됐다.
   -10px 은 매직넘버가 아니라 두 가지를 동시에 만족시키는 값이다:
     ① --chk-size 와 홀짝이 같아 → (size - dot)/2 가 항상 정수
     ② 그 결과 점은 박스 바깥 모서리에서 언제나 정확히 5px 안쪽
   16→6px, 15→5px, 14→4px, 13→3px. (13px 이하에선 점이 상대적으로
   작아지므로, 그런 컨텍스트가 생기면 --chk-size 쪽을 키우는 게 낫다.) */
input[type="radio"]::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width:  calc(var(--chk-size, 16px) - 10px);
  height: calc(var(--chk-size, 16px) - 10px);
  border-radius: 50%;
  background: var(--chk-dot, #fff);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: opacity, transform .2s ease-out;
}

input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate,
input[type="radio"]:checked {
  background-color: var(--chk-accent, var(--t-primary));
  border-color: var(--chk-accent, var(--t-primary));
}
input[type="checkbox"]:checked::after,
input[type="checkbox"]:indeterminate::after,
input[type="radio"]:checked::after { opacity: 1; }
input[type="checkbox"]:checked::after,
input[type="checkbox"]:indeterminate::after { transform: translateY(0); }
input[type="radio"]:checked::after { transform: translate(-50%, -50%) scale(1); }

/* 부분 선택 대시 — websites.html 전체선택 (js/websites.js) */
input[type="checkbox"]:indeterminate::after {
  background-image: var(--chk-icon-indeterminate, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M4.2 8h7.6'/%3E%3C/svg%3E"));
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled { cursor: not-allowed; opacity: .5; }
input[type="checkbox"]:disabled::before,
input[type="radio"]:disabled::before { opacity: 0; }
input[type="checkbox"]:disabled + *,
input[type="radio"]:disabled + * { opacity: .6; }

/* 모션 최소화 선호 시 애니메이션 제거 */
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"], input[type="radio"],
  input[type="checkbox"]::before, input[type="radio"]::before,
  input[type="checkbox"]::after, input[type="radio"]::after { transition-duration: .01ms; }
}

/* ===== CALENDAR — 달력 3종 공통 뼈대 =====
   .ps-cal-*(검색바 팝오버) / .bk-cal-*(예약 패널) / .co-dp-*(체크아웃 애드온).
   DOM 은 서로 다른 렌더러가 만들지만 구조는 동일하다:
     월 헤더(‹ 제목 ›) → 요일 행 → 7열 날짜 그리드.
   여기서는 뼈대와 치수만 잡고, 색은 호스트가 --cal-* 로 매핑해 넘긴다:
     .ps-spop-date → --t-*  /  .bk-calendar → --sr-*  /  .co-datepicker-popover → --co-*

   API: --cal-accent-strong / --cal-hover-bg / --cal-sun
        --cal-text / --cal-text-2 / --cal-text-3 / --cal-text-muted
        --cal-nav-size / --cal-nav-icon / --cal-cell-radius / --cal-gap

   NOTE: --chk-* 와 같은 규칙 — 반드시 조상(호스트)에 선언하고, 여기서는
   var(--cal-x, <fallback>) 로만 소비한다.

   NOTE: 달력별 고유 기능은 각자 파일에 남겨 뒀다.
     preview.css       — 왕복 range(.in-range / .selected::before 원형 / .start .end)
     booking-panel.css — 2줄 셀(.bk-cal-cell-num/-seats) + 재고 상태색
     checkout.css      — 트리거 버튼 / 팝오버 위치·애니메이션 */

/* 월 헤더 — 세 달력 모두 DOM 이 [이전][제목][다음] 순서라 3열 그리드로 묶는다.
   flex space-between 과 달리 제목이 항상 정확히 가운데 온다. */
.ps-cal-head,
.bk-cal-month,
.co-dp-head {
  display: grid;
  grid-template-columns: var(--cal-nav-size, 26px) 1fr var(--cal-nav-size, 26px);
  align-items: center;
  margin-bottom: 8px;
}
.ps-cal-head strong,
.bk-cal-month-title,
.co-dp-month-title {
  text-align: center;
  font-size: 13px; font-weight: 700;
  color: var(--cal-text);
  font-variant-numeric: tabular-nums;
}
.ps-cal-nav,
.bk-cal-nav,
.co-dp-nav {
  width:  var(--cal-nav-size, 26px);
  height: var(--cal-nav-size, 26px);
  display: grid; place-items: center;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--cal-text-2);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
/* 화살표는 ICN.chevL/chevR — 24x24 viewBox 에 크기 미지정이라 여기서 치수를 준다.
   pointer-events:none 으로 클릭 타깃을 항상 버튼으로 고정(sr-builder-search 의 closest 위임) */
.ps-cal-nav > svg,
.bk-cal-nav > svg,
.co-dp-nav  > svg {
  width:  var(--cal-nav-icon, 13px);
  height: var(--cal-nav-icon, 13px);
  pointer-events: none;
}
.ps-cal-nav:hover:not(:disabled),
.bk-cal-nav:hover:not(:disabled),
.co-dp-nav:hover:not(:disabled) { background: var(--cal-hover-bg); color: var(--cal-text); }
.ps-cal-nav:disabled,
.bk-cal-nav:disabled,
.co-dp-nav:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* 요일 행 — ps 는 별도 컨테이너(span 7개), bk/co 는 날짜 그리드의 첫 줄.
   컨테이너 여부만 다르고 라벨 스타일은 같다. */
.ps-cal-dow > span,
.bk-cal-dow,
.co-dp-dow {
  text-align: center;
  padding: 4px 0 6px;
  font-size: 11px; font-weight: 700;
  color: var(--cal-text-3);
  font-family: ui-monospace, monospace;
}

.ps-cal-grid,
.bk-cal-grid,
.co-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--cal-gap, 2px);
}

/* 날짜 셀 — 정렬 방식만 각 파일에서 지정한다(bk 는 날짜+잔여 2줄이라 flex column). */
.ps-cal-cell,
.bk-cal-cell,
.co-dp-cell {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: var(--cal-cell-radius, 6px);
  color: var(--cal-text);
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.bk-cal-cell.empty,
.co-dp-cell.co-dp-empty { visibility: hidden; }
.ps-cal-cell.out,
.ps-cal-cell.disabled,
.bk-cal-cell.past, .bk-cal-cell.off, .bk-cal-cell.full,
.co-dp-cell.past { color: var(--cal-text-muted); cursor: not-allowed; }
.ps-cal-cell:not(:disabled):not(.selected):hover,
.bk-cal-cell.avail:not(.selected):hover,
.co-dp-cell:not(:disabled):not(.selected):hover {
  background: var(--cal-hover-bg);
  color: var(--cal-accent-strong);
}

/* 일요일 — JS 가 붙이는 .sun 클래스 대신 위치로 잡는다. 세 그리드 모두 1열이
   일요일이다(bk/co 는 요일 라벨 7칸이 먼저 오지만 7n+1 은 그대로 1열).
   route-detail 은 .sun 을 아예 안 붙이고 있어서, 이 규칙으로 처음 통일된다. */
.ps-cal-dow > span:nth-child(7n+1),
.bk-cal-grid > .bk-cal-dow:nth-child(7n+1),
.co-dp-grid > .co-dp-dow:nth-child(7n+1) { color: var(--cal-sun); }
.ps-cal-grid > .ps-cal-cell:nth-child(7n+1):not(.out):not(.disabled):not(.selected),
.bk-cal-grid > .bk-cal-cell:nth-child(7n+1):not(.past):not(.off):not(.full):not(.selected),
.co-dp-grid  > .co-dp-cell:nth-child(7n+1):not(.past):not(.selected) { color: var(--cal-sun); }

/* ===== TOAST ===== */
/* ===== TOAST ===== */
.toast-container {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--text-1); color: #fff;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 500;
  box-shadow: var(--shadow-3);
  display: inline-flex; align-items: center; gap: 10px;
  animation: toastIn .25s cubic-bezier(.4,.2,.2,1);
  pointer-events: auto;
  max-width: 460px;
}
.toast.success { background: var(--status-live); }
.toast.warn { background: var(--status-draft); }
.toast.error { background: var(--status-error); }
.toast svg { width: 14px; height: 14px; flex-shrink: 0; }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast.fade-out { animation: toastOut .2s forwards; }
@keyframes toastOut { to { transform: translateY(20px); opacity: 0; } }