/* 스크롤바 생성 시 100vw 오버플로우 방지 */
html {
  overflow-x: hidden;
}

/* 템플릿 JS 스크롤 감춤 동작 방지 */
.navbar.fixed-top,
.navbar.fixed-bottom {
  transform: translateY(0) !important;
  transition: transform 0s !important;
}

/* Authentication 비밀번호 입력 */
.pw-input {
  border-color: dimgray !important;
}
.pw-input:focus {
  border-color: var(--bs-primary) !important;
}

/* ── SweetAlert2 모바일~태블릿 형상 보정 ──
   popup font-size 하나로 내부(em 단위) 전체가 비례 축소됨. 기존 호출부 무수정 일괄 적용. */
div.swal2-popup {
  width: min(90vw, 24em);
  font-size: clamp(13px, 3.2vw, 15px);
  padding: 1.5em 1em 1.25em;
  border-radius: 10px;
}

div.swal2-popup .swal2-title {
  font-size: clamp(15px, 4vw, 19px);
}

div.swal2-popup .swal2-html-container {
  font-size: clamp(12px, 3vw, 14px);
}

div.swal2-popup .swal2-actions {
  margin-top: 1em;
}

div.swal2-popup .swal2-actions button {
  font-size: clamp(13px, 3.2vw, 15px);
}

/* 이름 옆 상태 텍스트(나/연결/관리자) — 2개 이상 표시 시 사이에 · 구분자 */
.title-badge:not(.d-none) ~ .title-badge:not(.d-none)::before {
  content: "·";
  margin-right: 4px;
}

/* 탭 전환 fade 애니메이션 */
.list-fade {
  transition: opacity 0.12s ease;
}

.list-fade.fade-out {
  opacity: 0;
}

.footer-menu-icon {
  font-size: 30px;
}

.footer-menu-a {
  transition: all 0.3s ease;
}

.footer-menu-a:hover {
  background-color: #e9ecef;
  text-decoration: none;
}

.fixed-meeting-add {
  position: fixed;
  bottom: 60px;
  right: 10px;
  z-index: 1100;
  padding: 12px;
  border-radius: 25px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fixed-meeting-add.is-scrolled {
  opacity: 0;
  pointer-events: none;
}

/* 모달 열림 시 고정 버튼(FAB 등) 숨김 — 모달 위로 떠 보이는 문제 방지 (Bootstrap이 body에 .modal-open 부여) */
body.modal-open .fixed-meeting-add {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* footer 없는 페이지: 하단에 더 붙임 */
.fixed-meeting-add.no-footer {
  bottom: 16px;
}

/* FAB 2개 스택 시 위쪽 버튼 오프셋 (Meeting/Index·Address/Index 공통) */
.fixed-meeting-add.stacked {
  bottom: 120px;
}

/* 태블릿(콘텐츠 max-width 768px) 이상: FAB를 콘텐츠 컬럼 우측 가장자리에 고정 */
@media (min-width: 788px) {
  .fixed-meeting-add {
    right: calc((100vw - 768px) / 2 + 10px);
  }
}

/* 첨부 이미지 라이트박스 */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.img-lightbox.show {
  display: flex;
}

.img-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.img-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Calendar Styles */
.calendar-grid {
  user-select: none;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.calendar-day {
  min-height: clamp(50px, 16vw, 95px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

/* Week view specific styles */
.week-view .calendar-day {
  min-height: clamp(150px, 32vw, 200px);
}

.calendar-day:hover {
  background-color: #f8f9fa;
  border-radius: 10%;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.calendar-day.other-month {
  opacity: 0.4;
}

.calendar-day.selected {
  background-color: #e9ecef;
  border-radius: 10%;
}

.calendar-day.weekend {
  color: #dc3545;
}

.calendar-day.today .day-number {
  background-color: #212529;
  color: white;
  width: 24px;
  height: 18px;
  border-radius: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  font-size: 0.75rem;
}

.calendar-day.today.weekend .day-number {
  background-color: #dc3545;
}

.day-number {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.meeting-preview {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 0px;
  min-width: 0;
}

.meeting-preview .badge {
  font-size: clamp(8px, 2vw, 12px) !important;
  padding: 1px 2px !important;
  font-weight: normal !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.2;
  display: block;
  text-align: center;
  width: 100%;
}

/* Meeting List Styles */
.meeting-item {
  background-color: white;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 10px;
  border-left: 4px solid var(--meeting-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.meeting-item:hover {
  background-color: #e9ecef;
}

.meeting-time {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 2px;
}

.meeting-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.meeting-participants {
  display: flex;
  gap: -8px;
}

.participant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  position: relative;
}

.participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.participant-count {
  margin-left: 4px;
  font-size: 0.75rem;
  color: #6c757d;
}

.Address-navbar-container {
  min-height: max-content;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

::-webkit-scrollbar {
  display: none;
}

.Address-navbar-container .nav-tabs {
  flex-shrink: 0;
  min-width: max-content;
  min-height: max-content;
  border-bottom: none;
}

.Address-navbar-container .nav-item {
  white-space: nowrap;
  position: relative;
  margin-right: 6px;
}

.Address-navbar-container .nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  min-width: max-content;
  border: 1px solid #e9ecef;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.Address-navbar-container .nav-link:hover {
  background-color: #e9ecef;
}

.Address-navbar-container .nav-link.active {
  background-color: #5d87ff;
  color: white;
  border-color: #5d87ff;
}

.Address-navbar-container .nav-item:first-child {
  margin-left: 10px;
}

.meetinglist-navbar-container {
  min-height: max-content;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  padding-bottom: 12px;
}

::-webkit-scrollbar {
  display: none;
}

.meetinglist-navbar-container .nav-tabs {
  flex-shrink: 0;
  min-width: max-content;
  min-height: max-content;
  border-bottom: none;
}

.meetinglist-navbar-container .nav-item {
  white-space: nowrap;
  position: relative;
  margin-right: 6px;
}

.meetinglist-navbar-container .nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  min-width: max-content;
  border: 1px solid #e9ecef;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.meetinglist-navbar-container .nav-link:hover {
  background-color: #e9ecef;
}

.meetinglist-navbar-container .nav-link.active {
  background-color: #5d87ff;
  color: white;
  border-color: #5d87ff;
}

.meetinglist-navbar-container .nav-item:first-child {
  margin-left: 10px;
}

.tab-meeting {
  padding: 0 10px;
}

/* 모바일에서 navbar 전체 너비 */
@media (max-width: 575.98px) {
  .meetinglist-navbar-container {
    width: 100%;
  }

  #categorySelectMenu {
    width: 100%;
  }
}

/* Login */

.slider-container {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 768px;
  margin: 0 auto;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  width: 400%;
}

.slider-wrapper.dragging {
  transition: none;
}

.slide {
  width: 25%;
  flex-shrink: 0;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.slide-content {
  text-align: center;
  max-width: 400px;
}

.pagination-dots {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: #007bff;
  width: 24px;
  border-radius: 12px;
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 10;
}

.nav-arrow:hover {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-arrow.prev {
  left: 20px;
}

.nav-arrow.next {
  right: 20px;
}

.slide-content {
  text-align: center;
  max-width: 400px;
}

/* Privacy */

.policy-container {
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 10px;
}

/* Summernote 모바일 최적화 */
.note-editor .note-toolbar {
  padding: 0.5rem;
}

.note-editor .note-editing-area {
  border: none;
}

.note-editor .note-editable {
  min-height: 300px;
  font-size: 14px;
  line-height: 1.5;
}

/* 읽기 전용 모드에서 툴바 숨기기 */
.readonly-mode .note-toolbar {
  display: none;
}

/* Details */

.header-right-a {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  text-align: center;
  cursor: pointer;
}

.header-right-icon {
  font-size: clamp(24px, 5vw, 26px);
  color: black;
}

.participant-list-container {
  min-height: max-content;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  margin-bottom: 1rem;
}

::-webkit-scrollbar {
  display: none;
}

.participant-list {
  display: flex;
  flex-shrink: 0;
  min-width: max-content;
  min-height: max-content;
  margin: 0;
  list-style: none;
}

.participant-item {
  white-space: nowrap;
  position: relative;
  margin-right: 6px;
}

.participant-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  min-width: max-content;
  border: 1px solid lightgrey;
  border-radius: 25px;
  background-color: white;
  color: #5a6a85;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.participant-link:hover {
  background-color: #e9ecef;
  color: #495057;
  text-decoration: none;
}

.participant-item:first-child {
  margin-left: 10px;
}

.participant-content {
  padding: 0 10px;
}
/* 모바일에서 참석자 목록 전체 너비 */
@media (max-width: 575.98px) {
  .participant-list-container {
    width: 100%;
  }
}

.editable-dropdown {
  width: 100%;
  padding: 8px 48px 8px 16px;
  border: 1px solid lightgrey;
  border-radius: 7px;
}

.editable-dropdown::after {
  margin-left: auto;
}

.editable-dropdown.no-caret::after {
  display: none;
}

.editable-dropdown-textbar {
  position: absolute;
  width: calc(100% - 48px);
  padding: 8px 48px 7px 16px;
  border: none;
  border-right: 1px solid lightgrey;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  left: 1px;
  top: 1px;
  color: #5a6a85;
}

.editable-dropdown-textbar::placeholder {
  color: var(--bs-secondary-color);
}

.editable-dropdownm-focus {
  border-color: #aec3ff;
  outline: 0;
}

.meeting-history {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.meeting-history:has(.dropdown-menu.show) {
  z-index: 1000;
}

.meeting-file {
  cursor: pointer;
  color: #6c757d;
  background-color: white;
  transition: all 0.2s ease;
  border: solid 1px #dfe5ef;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 7px;
}

.meeting-file:has(.dropdown-menu.show) {
  z-index: 1000;
}

.meeting-file:not(
    :has(.list-dropdown:hover, .list-checkbox-container:hover)
  ):hover {
  background-color: #e9ecef;
  color: #6c757d;
}

.list-checkbox {
  width: 24px;
  height: 24px;
  border-color: darkgrey;
  background-color: white;
}

.file-info {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 400;
  color: #6c757d;
}

.file-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: black;
}

/* 조직 파일함 카드 3번째 줄: 파일 출처(타입 · 콘텐츠명). 고정 height 70px 카드에서 line-clamp 1줄. */
.file-source {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 500;
  color: #6c757d;
  margin-top: 1px;
}
.file-source i {
  color: var(--bs-primary);
  margin-right: 2px;
}

.file-upload-area {
  border: dashed 1px #00000032;
  border-radius: 7px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
}

.file-upload-area:hover {
  background-color: #e9ecef;
  border-color: #6c757d;
}

.file-upload-area.dragging {
  background-color: #d1ecf1;
  border-color: var(--bs-success);
  /*#0c5460*/
}

/* 드래그 이벤트가 자식 요소에서 dragleave를 유발하지 않도록 */
.file-upload-area > * {
  pointer-events: none;
}

.progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(40, 167, 69, 0.1);
  transition: width 0.3s ease;
}

.file-icon {
  width: 36px;
  height: 36px;
}

/* 파일 삭제 버튼 */
.file-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #6c757d;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding-bottom: 6px;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.file-delete-btn:hover {
  color: dimgrey;
  background-color: #e9ecef;
}

.footer-menu-icon {
  font-size: 24px;
}

.footer-menu-btn {
  background-color: white;
  border: 1px solid #c5c7ca;
}

.footer-menu-btn:hover {
  background-color: #e9ecef;
  text-decoration: none;
}

.setting-menu-btn {
  background-color: white;
  padding: 12px 0px;
}

.setting-menu-btn:hover {
  background-color: #e9ecef;
  text-decoration: none;
}

/* Craete */

.note-editor {
  margin-bottom: 16px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.note-editor .dropdown-toggle::after {
  all: unset;
}

.note-editor .note-dropdown-menu {
  box-sizing: content-box;
}

.note-editor .note-modal-footer {
  box-sizing: content-box;
}

.note-editable {
  background-color: white !important;
  color: #5a6a85 !important;
}

.form-switch {
  height: 20px;
}

.form-switch .form-check-input {
  width: 2.8em;
  height: 24px;
  border-color: #6c757d;
  height: 100%;
}

.editable-dropdown {
  width: 100%;
  padding: 8px 48px 8px 16px;
  border: 1px solid lightgrey;
  border-radius: 7px;
}

.editable-dropdown::after {
  margin-left: auto;
}

.editable-dropdown-textbar {
  position: absolute;
  width: calc(100% - 48px);
  padding: 8px 48px 7px 16px;
  border: none;
  border-right: 1px solid lightgrey;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  left: 1px;
  top: 1px;
  color: #5a6a85;
}

.editable-dropdown-textbar::placeholder {
  color: var(--bs-secondary-color);
}

.editable-dropdownm-focus {
  border-color: #aec3ff;
  outline: 0;
}

.address-box {
  cursor: pointer;
  color: #6c757d;
  background-color: white;
  transition: all 0.2s ease;
  border: solid 1px #dfe5ef;
  position: relative;
  z-index: 1;
  border-radius: 7px;
  overflow: visible;
  min-height: 64px;
  align-items: center;
}

.address-box:has(.dropdown-menu.show) {
  z-index: 1000;
}

.address-box:not(
    :has(
        .list-dropdown:hover,
        .list-second-btn:hover,
        .list-checkbox-container:hover
      )
  ):hover {
  background-color: #e9ecef;
  color: #6c757d;
}

.address-info {
  font-size: 0.7rem;
  font-weight: 400;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.address-intro {
  font-size: 0.7rem;
  font-weight: 400;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.address-title {
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  overflow: hidden;
  line-height: 1.3;
}

.address-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.list-first-btn {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

.list-second-btn {
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  line-height: 0;
}

.guest-box {
  cursor: pointer;
  color: #6c757d;
  background-color: white;
  transition: all 0.2s ease;
  border: solid 1px #dfe5ef;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 7px;
  padding: 12px;
  overflow: visible;
}

.guest-box:has(.dropdown-menu.show) {
  z-index: 1000;
}
/* 일반 상태 hover - selected가 아닐 때만 */
.guest-box:not(.selected):not(
    :has(
        .list-dropdown:hover,
        .list-second-btn:hover,
        .list-checkbox-container:hover
      )
  ):hover {
  background-color: #e9ecef;
  color: #6c757d;
}

.guest-box.selected {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}
/* selected 상태 hover - 더 짙은 primary */
.guest-box.selected:not(
    :has(
        .list-dropdown:hover,
        .list-second-btn:hover,
        .list-checkbox-container:hover
      )
  ):hover {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.guest-info {
  font-size: 0.7rem;
  font-weight: 400;
  color: #6c757d;
}

.guest-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.custom-round-check .form-check-input {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #dee2e6;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-round-check .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  background-size: 16px;
  background-position: center;
}

.custom-round-check .form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 체크되지 않은 상태에서 호버 */
.custom-round-check .form-check-input:not(:checked):hover {
  border-color: #b6bcc5;
}

.guest-browse-area {
  border: dashed 1px #00000032;
  border-radius: 7px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
}

.guest-browse-area:hover {
  background-color: #e9ecef;
  border-color: #6c757d;
}

.address-avatar {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #e9ecef;
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  position: relative;
  margin: 0 8px 0 0;
}

.address-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bc-regist-area {
  border: dashed 1px black;
  border-radius: 7px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bc-regist-area:hover {
  background-color: #f8f9fa;
}

* {
  caret-color: transparent;
}

input[type="text"]:not([readonly]):not([disabled]),
input[type="password"]:not([readonly]):not([disabled]),
input[type="email"]:not([readonly]):not([disabled]),
input[type="url"]:not([readonly]):not([disabled]),
input[type="search"]:not([readonly]):not([disabled]),
input[type="tel"]:not([readonly]):not([disabled]),
input[type="number"]:not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]),
[contenteditable="true"],
.summernote {
  caret-color: auto;
}

.note-editable {
  caret-color: auto;
}

.address-create-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e9ecef;
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  position: relative;
}

.address-create-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-edit-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  background-color: white;
}

.avatar-edit-btn:hover {
  color: white;
  background-color: var(--bs-primary);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.avatar-delete-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  background-color: white;
}

.avatar-delete-btn:hover {
  color: white;
  background-color: var(--bs-primary);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.new-phone-area {
  border: dashed 1px black;
  border-radius: 7px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
}

.new-phone-area:hover {
  background-color: #f8f9fa;
}

.setting-menu-icon {
  color: var(--bs-primary);
  margin: 0px;
  padding: 18px 12px 18px 14px;
  font-size: 1.5rem;
}

.setting-menu {
  cursor: pointer;
  color: #6c757d;
  background-color: white;
  transition: all 0.2s ease;
  border: solid 1px #dfe5ef;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.setting-menu:hover {
  background-color: #e9ecef;
  color: #6c757d;
}

/* 조직 관리 하위 메뉴: 2열 그리드. 라벨이 길면(JP/EN) 최대 2줄, 좁은 모바일은 1열. */
.company-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.company-menu-grid .setting-menu {
  margin-bottom: 0 !important;
  min-height: 58px;
}
.company-menu-grid .setting-menu > div.d-flex {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 32px; /* 우측 chevron 공간 (JP/EN 라벨 길이 대응) */
}
.company-menu-grid .setting-menu-icon {
  flex-shrink: 0;
}
.company-menu-grid .setting-menu span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.2;
  word-break: break-word;
}
/* 좁은 모바일(소형 단말): 1열로 폴백 */
@media (max-width: 360px) {
  .company-menu-grid {
    grid-template-columns: 1fr;
  }
}

.activity-box {
  cursor: pointer;
  color: #6c757d;
  background-color: white;
  transition: all 0.2s ease;
  border: solid 1px #dfe5ef;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.activity-info {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 400;
  color: #6c757d;
  padding-right: 32px;
}

.activity-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: black;
  padding-right: 32px;
}

.storage-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 600;
  color: black;
  margin-bottom: 2px;
  padding-right: 20px;
}

.storage-info {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-primary);
  padding-right: 20px;
}

.Alarm-box {
  cursor: pointer;
  color: #6c757d;
  background-color: white;
  transition: all 0.2s ease;
  border: solid 1px #dfe5ef;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.Alarm-box:has(.dropdown-menu.show) {
  z-index: 1000;
}

.Alarm-box:not(
    :has(.list-dropdown:hover, .list-checkbox-container:hover)
  ):hover {
  background-color: #e9ecef;
  color: #6c757d;
}

/* 그룹 관리 모달 - Chip 스타일 */
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 25px;
  border: 1px solid #e9ecef;
  background-color: white;
  font-size: 0.9rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: border-color 0.15s ease, color 0.15s ease;
  user-select: none;
}

.group-chip-delete-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #adb5bd;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
}

.group-chip-delete-btn:hover {
  color: #dc3545;
}

.group-chip-add {
  border-style: dashed;
  color: #6c757d;
  cursor: pointer;
}

.group-chip-add:hover {
  border-color: #5d87ff;
  color: #5d87ff;
}

.group-chip-input-wrap {
  border-color: #5d87ff;
  padding: 4px 12px;
}

.group-chip-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  width: 80px;
  color: inherit;
  caret-color: auto;
}

/* 모달 닫기 버튼 - 우상단 absolute */
.modal-content .btn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

/* Tabler 아이콘 flex 컨텍스트에서 shrink 방지 */
.icon.icon-tabler {
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────
   회사 관리 (Company)
   ────────────────────────────────────────────── */

/* navbar-brand: 현재 선택 기업 로고. height 고정, width 비율. */
.company-brand-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* 기업 선택 모달 행의 로고: height 고정, width 비율. */
.company-logo-sm {
  height: 24px;
  width: auto;
  object-fit: contain;
}

/* detail header 로고: width 고정, height 비율(원본). */
.company-logo img {
  width: 40px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 조직 확인 카드(Join) 로고: 가로 중앙, 카드 폭 내에서 최대 320px. */
.company-logo-lg {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.company-logo-lg img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 접이식 카드 chevron 회전 (Bootstrap Collapse 연동) */
.collapse-chevron {
  transition: transform 0.25s ease;
}

[data-bs-toggle="collapse"].collapsed .collapse-chevron {
  transform: rotate(-90deg);
}

/* 아바타 스택 컨테이너 (동적 +N은 avatar-stack.js) */
.avatar-stack {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.avatar-stack .participant-avatar:not(:first-child) {
  margin-left: -8px;
}

/* 기업 등록/수정: 로고 이미지 박스 */
.company-image-box {
  position: relative;
  background-color: #f1f3f5;
  border-radius: 7px;
  padding: 16px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.company-image-box img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain; /* 로고 비율 고정 */
  display: block;
  margin: 0 auto; /* 가로 중앙 */
}

.company-image-empty {
  color: #6c757d;
  font-size: 0.85rem;
  text-align: center;
}

.company-image-setting-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.85);
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.company-image-setting-btn:hover {
  background-color: #ffffff;
  color: #212529;
}

/* 기업 삭제 버튼 (full-width danger) */
.company-delete-btn {
  border: none;
  border-radius: 7px;
  background-color: #d9534f;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 0;
  transition: all 0.2s ease;
}

.company-delete-btn:hover {
  background-color: #c34a47;
  color: white;
}

/* 기업 초대: 상단 브랜드 박스 */
.company-invite-brand {
  background-color: #f1f3f5;
  border-radius: 7px;
  padding: 12px;
}

/* 권한 설정 모달: 권한 종류 행 */
.perm-row {
  background-color: #f1f3f5;
  border-radius: 7px;
  padding: 12px;
}

/* 권한 레벨: 커스텀 드롭다운 (모달 내부 클리핑 회피용)
   버튼은 categorySelectBtn 톤, 메뉴는 Bootstrap .dropdown-menu 재사용(position:fixed) */
.perm-dd {
  position: relative;
}

.perm-dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 120px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: var(--bs-nav-link-font-weight);
  color: #212529;
  background-color: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  cursor: pointer;
}

.perm-dd-btn:hover {
  background-color: #f8f9fa;
}

/* Bootstrap .dropdown-menu 위에 얹는 보정: 모달(z-index ~1055)보다 위로 */
.perm-dd-menu {
  z-index: 2000;
}

/* ── 공급처 (Suppliers) ── */
.supplier-card {
  position: relative;
  background-color: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  overflow: visible;
  transition: background-color 0.2s ease;
}

.supplier-card:has(.dropdown-menu.show) {
  z-index: 1000;
}

.supplier-card-body {
  cursor: pointer;
}

.supplier-card-body:hover {
  background-color: #f8f9fa;
  border-radius: 7px;
}

.supplier-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.5;
}

.supplier-info {
  font-size: 0.75rem;
  color: #212529;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-memo {
  font-size: 0.75rem;
  color: var(--bs-primary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 상태/구분 pill 토글 (등록 폼) — nav-tabs(flex-nowrap) 톤 */
.toggle-pill {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border: 1px solid #e9ecef;
  border-radius: 25px;
  background-color: #fff;
  color: #5a6a85;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.15s ease;
}

.toggle-pill:hover {
  background-color: #e9ecef;
}

.toggle-pill.active {
  background-color: #5d87ff;
  border-color: #5d87ff;
  color: #fff;
}

/* 상태/구분 표시 칩 (목록·상세) — 커스텀: 채움 배경 + 흰 글씨 + 작고 두껍게 */
.status-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

.status-chip.is-active {
  background-color: var(--bs-primary);
}

.status-chip.is-stopped {
  background-color: #fa5a7d;
}

.status-chip.is-corp {
  background-color: #3cd856;
}

.status-chip.is-individual {
  background-color: #ff9f43;
}

/* 프로젝트 상태 */
.status-chip.is-ongoing {
  background-color: var(--bs-primary);
}

.status-chip.is-done {
  background-color: #3cd856;
}

.status-chip.is-paused {
  background-color: #ff9f43;
}

/* 연구비용 상태 */
.status-chip.is-requested {
  background-color: var(--bs-primary);
}

.status-chip.is-paid {
  background-color: #1f9d57;
}

.status-chip.is-administered {
  background-color: #ff9f43;
}

/* 연구노트 상태 */
.status-chip.is-draft {
  background-color: var(--bs-primary);
}

.status-chip.is-confirmed {
  background-color: #1f9d57;
}

/* 장비대장 상태 */
.status-chip.is-holding {
  background-color: var(--bs-primary);
}

.status-chip.is-released {
  background-color: #fa5a7d;
}

.status-chip.is-disposed {
  background-color: #adb5bd;
}

/* 연차별 예산 행 (총액/장비비/재료비/활동비) */
.year-amount-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}

.year-amount-row .year-label {
  min-width: 42px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #212529;
  padding-bottom: 6px;
}

.year-amount-row .year-cell {
  flex: 1;
  min-width: 0;
}

.year-amount-row .year-cell label {
  display: block;
  font-size: 0.65rem;
  color: #6c757d;
  margin-bottom: 2px;
}

.year-amount-row .year-cell .form-control {
  padding: 6px 8px;
  font-size: 0.8rem;
}

.year-amount-row .year-cell .year-value {
  font-size: 0.85rem;
  color: #212529;
}

/* 첨부 이미지 썸네일 */
.supplier-thumb {
  position: relative;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  overflow: hidden;
  background-color: white;
}

.supplier-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.supplier-thumb-del,
.supplier-file-del {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background-color: #f1f3f5;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
}

.supplier-thumb-del {
  position: absolute;
  top: 6px;
  right: 6px;
}

.supplier-file-row {
  background-color: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  padding: 10px 36px 10px 12px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.supplier-file-name {
  font-size: 0.8rem;
  color: #212529;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-file-meta {
  font-size: 0.7rem;
  color: #6c757d;
}