/* Cabineat IR Board — scoped styles */
.cir-board {
  --cir-text: #171717;
  --cir-muted: #85888d;
  --cir-border: transparent;
  --cir-surface: #fff;
  --cir-notice: #4854a6;
  --cir-event: #765338;
  --cir-ir: #16851d;
  color: var(--cir-text);
  width: 100%;
}
.cir-board * { box-sizing: border-box; }
.cir-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 36px;
}
.cir-filters { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cir-filter {
  appearance: none;
  position: relative;
  padding: 4px 0 7px;
  border: 0;
  background: transparent;
  color: #8c8f94;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: color .2s ease;
}
.cir-filter:hover, .cir-filter.is-active { color: #202329; }
.cir-filter.is-active::after {
  content: "";
  position: absolute;
  height: 2px;
  background: currentColor;
  left: 0;
  right: 0;
  bottom: 0;
}
.cir-search { width: min(345px, 32%); display: block; }
.cir-search input {
  width: 100%;
  padding: 8px 0px 10px 10px;
  border: 0;
  border-bottom: 1px solid #d1d1d1;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  box-shadow: none;
}
.cir-search input:focus { border-bottom-color: #222; }
.cir-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px 14px;
  opacity: 1;
  transition: opacity .18s ease;
}
.cir-grid.is-loading { opacity: .45; pointer-events: none; }
/* Override theme-level button styles (e.g. Salient's 200px button radius). */
body .container-wrap .cir-board .cir-grid > button.cir-card,
body .cir-board .cir-grid > button.cir-card,
.cir-board .cir-grid > button.cir-card,
.cir-card {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 154px;
  padding: 21px 22px 19px;
  border: 1px solid var(--cir-border);
  border-radius: 10px !important;
  background: var(--cir-surface);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cir-card:hover { border-color: #d3d3d3; box-shadow: 0 6px 22px rgb(0 0 0 / 3%); transform: translateY(-1px); }
.cir-card:focus-visible, .cir-filter:focus-visible { outline: 2px solid #202020; outline-offset: 3px; }
.cir-card__meta, .cir-detail__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.cir-card__meta time, .cir-detail__meta time { font-size: 14px; color: #252525; white-space: nowrap; }
.cir-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 26px;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--cir-badge-color, #777);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}
.cir-badge--notice { background: var(--cir-badge-color, var(--cir-notice)); }
.cir-badge--event { background: var(--cir-badge-color, var(--cir-event)); }
.cir-badge--ir { background: var(--cir-badge-color, var(--cir-ir)); }
.cir-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.cir-card__summary {
  display: -webkit-box;
  overflow: hidden;
  margin-top: auto;
  font-size: 14px;
  line-height: 1.7;
  color: #242424;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cir-match { font-weight: 700; }
.cir-empty { grid-column: 1 / -1; padding: 48px 16px; color: #777; text-align: center; }
.cir-modal { display: none; position: fixed; inset: 0; z-index: 999999; }
.cir-modal.is-open { display: flex; align-items: center; justify-content: center; padding: 24px; }
.cir-modal__backdrop { position: absolute; inset: 0; touch-action: none; background: rgb(0 0 0 / 18%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.cir-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(800px, calc(100vw - 32px));
  max-width: 800px;
  max-height: min(800px, calc(100vh - 48px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Legacy Edge */
  padding: 27px 26px 32px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 44px rgb(0 0 0 / 15%);
  outline: none;
  opacity: 0;
  transform: translateY(6px) scale(.995);
  transition: opacity .15s ease, transform .15s ease;
}
.cir-modal__dialog::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Chromium-based browsers */
  width: 0;
  height: 0;
}
.cir-modal.is-open .cir-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cir-modal__close {
  position: sticky;
  z-index: 3;
  float: right;
  top: -10px;
  margin: -14px -12px 0 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #333;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.cir-detail__header { padding: 0 0 13px; border-bottom: 1px solid #dedede; margin-bottom: 10px; }
.cir-detail__meta { margin-bottom: 8px; }
.cir-detail__title { margin: 0; color: #151515; font-size: 20px; line-height: 1.5; font-weight: 500; }
.cir-attachments { list-style: none; padding: 0; margin: 0 0 15px; }
.cir-attachments li { display: flex; align-items: center; gap: 10px; min-height: 27px; font-size: 14px; }
.cir-attachments li::before { content: url("../image/attachment.svg"); margin-top:5px;}
.cir-attachment__name { min-width: 0; overflow-wrap: anywhere; }
.cir-attachments a { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; color: #222; text-decoration: none; }
.cir-attachments a:hover { text-decoration: underline; }
.cir-detail__image { margin: 14px 0 20px; }
.cir-detail__image img { display: block; width: 100%; height: auto; border-radius: 5px; margin-bottom:40px; }
.cir-detail__body { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.cir-detail__body > :first-child { margin-top: 0; }
.cir-detail__body > :last-child { margin-bottom: 0; }
.cir-loading { padding: 60px 0; text-align: center; color: #777; }
/* Keep the page scrollbar gutter reserved while the modal is open to prevent horizontal layout shifts. */
html.cir-modal-open {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}
body.cir-modal-open {
  overflow: hidden !important;
  padding-right: var(--cir-scrollbar-compensation, 0px);
}
.cir-single-detail { max-width: 900px; margin: 0 auto; }
@media (max-width: 1024px) {
  .cir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cir-toolbar { gap: 24px; }
  .cir-filters { gap: 20px; }
}
@media (max-width: 640px) {
  .cir-toolbar { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 24px; }
  .cir-filters { gap: 18px; }
  .cir-search { width: 100%; }
  .cir-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cir-card { min-height: 145px; padding: 18px; }
  .cir-modal.is-open { padding: 12px; }
  .cir-modal__dialog { width: 100%; max-height: calc(100vh - 24px); padding: 22px 18px 24px; }
  .cir-detail__title { font-size: 17px; }
  .cir-attachments li { align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; }
  .cir-attachments li::before {margin-top:0px;}
}