:root {
  --mandal-grid-size: 9;
  --mandal-border-color: #ddd;
  --mandal-border-bold-color: #999;
  --mandal-highlight-color: #ffc;
  --mandal-completed-blur: blur(1px);
  --mandal-sidebar-bg: #ffffff;
  --mandal-active-color: #e0f7fa;
  --mandal-danger-color: #ffebee;
  --mandal-board-size: 90vmin;
  --mandal-cell-size: calc(var(--mandal-board-size) / 9);
}

/* --- 최상위 컨테이너 --- */
.mandal-art-container {
  display: flex;
  flex-direction: column; /* 네비게이션 바를 상단에 배치하기 위해 컬럼 방향으로 변경 */
  height: 100%;
  width: 100%;
  background-color: #f4f7f6; /* 배경색 추가 */
}

/* 네비게이션 바와 콘텐츠 영역을 감싸는 래퍼 */
.mandal-art-content-wrapper {
  display: flex;
  flex: 1; /* 남은 공간을 모두 차지 */
  overflow: hidden; /* 내부 컨텐츠에서만 스크롤 허용 */
}
.mandal-art-toolbar {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mandal-border-color);
  background: transparent; /* 컨테이너의 회색 배경과 자연스럽게 어울리도록 */
}

.mandal-art-toolbar button {
  padding: 6px 12px;
  border: 1px solid #d0d7de;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.mandal-art-toolbar button:hover {
  background: #f6f8fa;
}

/* --- 사이드바 --- */
.mandal-art-sidebar {
  width: 280px;
  background-color: var(--mandal-sidebar-bg);
  border-right: 1px solid var(--mandal-border-color);
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* 사이드바 너비 고정 */
}

.mandal-art-sidebar-header {
  border-bottom: 1px solid var(--mandal-border-color);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.mandal-art-sidebar h2 {
  font-size: 1.5em;
  color: #00796b;
  margin: 0;
}

.mandal-art-sidebar #mandal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
}

.mandal-art-sidebar #mandal-list li {
  padding: 15px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: background-color 0.2s ease-in-out;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mandal-art-sidebar #mandal-list li:hover {
  background-color: #f0f0f0;
}

.mandal-art-sidebar #mandal-list li.active {
  background-color: var(--mandal-active-color);
  font-weight: bold;
}

.mandal-art-sidebar #mandal-list li.mandal-dragging {
  opacity: 0.5;
}

.mandal-art-add-btn {
  /* HTML의 ID/클래스 이름과 일치시킴 */
  margin-top: 20px;
  padding: 10px;
  font-size: 1.8em;
  font-weight: bold;
  color: #00796b;
  background-color: #e0f2f1;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  align-self: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mandal-art-add-btn:hover {
  background-color: #b2dfdb;
  transform: rotate(90deg);
}

/* --- 메인 콘텐츠 및 그리드 --- */
.mandal-art-main-content {
  /* HTML의 클래스 이름과 일치시킴 */
  flex-grow: 1;
  display: flex;
  flex-direction: column; /* 툴바를 콘텐츠 바로 위에 배치 */
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  overflow: hidden;
}

.mandal-art-grid-container {
  /* HTML의 클래스 이름과 일치시킴 */
  display: grid;
  grid-template-columns: repeat(var(--mandal-grid-size), 1fr);
  grid-template-rows: repeat(var(--mandal-grid-size), 1fr);
  width: var(--mandal-board-size);
  height: var(--mandal-board-size);
  border: 3px solid var(--mandal-border-bold-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- 셀 스타일 (가장 중요) --- */
/* 모든 .cell 관련 스타일은 .mandal-art-grid-container 하위로 한정 */
.mandal-art-grid-container .cell {
  border: 1px solid var(--mandal-border-color);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  background-color: #fff;
}
/* --- Matrix 테이블 스타일 --- */
.mandal-matrix {
  width: var(--mandal-board-size); /* 보드 크기에 맞춰 균등 분배 */
  border-collapse: collapse;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  table-layout: fixed;
}

.mandal-matrix thead th {
  border: 1px solid var(--mandal-border-color);
  padding: 0;
  background: #fafafa;
  font-weight: bold;
  width: auto; /* table-layout:fixed 기반 균등 분배 */
  height: calc(var(--mandal-cell-size) * 0.3);
  line-height: calc(var(--mandal-cell-size) * 0.3);
  overflow: hidden; /* 텍스트 넘침 방지 */
}

.mandal-matrix tbody th {
  border: 1px solid var(--mandal-border-color);
  padding: 0 8px;
  text-align: center; /* 좌측 라벨 가운데 정렬 */
  vertical-align: middle; /* 수직 가운데 정렬 */
  white-space: nowrap;
  width: auto; /* table-layout:fixed 기반 균등 분배 */
  height: var(--mandal-cell-size);
  overflow: hidden; /* 텍스트 넘침 방지 */
  display: flex; /* 라벨 textarea를 수직 가운데 정렬 */
  align-items: center;
  justify-content: center;
}

/* 좌측 라벨을 grid 셀 textarea와 동일한 스타일로 */
.mandal-matrix-label {
  width: 100%;
  height: auto; /* 부모(th)에서 수직 가운데 정렬 */
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  padding: 0 8px;
  font-size: 1em;
  font-family: inherit;
  text-align: center;
  color: inherit;
  box-sizing: border-box;
  display: block;
}

.mandal-matrix td {
  border: 1px solid var(--mandal-border-color);
  padding: 0;
  width: auto; /* table-layout:fixed 기반 균등 분배 */
  height: var(--mandal-cell-size);
  overflow: hidden; /* 텍스트 넘침 방지 */
}

.mandal-matrix td textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  padding: 6px; /* 패딩으로 인한 넘침 최소화 */
  font-size: 0.95em;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box; /* 보더/패딩 포함한 크기 계산 */
  white-space: pre-wrap; /* 줄바꿈 보존 + 래핑 */
  word-break: break-word; /* 긴 단어 줄바꿈 */
  overflow-y: hidden !important; /* 세로 스크롤바 강제 제거 */
  overflow-x: hidden !important; /* 가로 스크롤바 강제 제거 */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

.mandal-matrix td textarea::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}

.mandal-matrix td textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  padding: 6px; /* 패딩으로 인한 넘침 최소화 */
  font-size: 0.95em;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box; /* 보더/패딩 포함한 크기 계산 */
  white-space: pre-wrap; /* 줄바꿈 보존 + 래핑 */
  word-break: break-word; /* 긴 단어 줄바꿈 */
  overflow: hidden; /* 스크롤바 제거, 넘친 내용 숨김 */
  /* 스크롤바 완전 제거 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.mandal-matrix td textarea::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Matrix view에서 완료된 셀 스타일 */
.mandal-matrix td.completed {
  position: relative;
  /* 배경색은 JavaScript에서 동적으로 설정됨 (getRepresentativeColor 함수 사용) */
}

.mandal-matrix td.completed .checkmark {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 1.2em;
  color: #4caf50;
  user-select: none; /* 체크마크 선택 방지 */
  z-index: 1;
}

.mandal-art-grid-container .cell.border-right-bold {
  border-right: 3px solid var(--mandal-border-bold-color);
}
.mandal-art-grid-container .cell.border-bottom-bold {
  border-bottom: 3px solid var(--mandal-border-bold-color);
}

.mandal-art-grid-container .cell.central-goal {
  font-weight: bold;
}

.mandal-art-grid-container .cell.sub-goal {
  background-color: #f5f5f5;
  font-weight: bold;
}
.mandal-art-grid-container .cell.sub-goal textarea {
  color: #555;
}

.mandal-art-grid-container .cell textarea {
  width: 100%;
  /* height: 100%; */
  border: none;
  outline: none;
  resize: none;
  background-color: transparent;
  padding: 8px;
  font-size: 1em;
  text-align: center;
  font-family: inherit;
  color: inherit; /* 부모(.cell)의 글자색을 상속받도록 명시 */
  display: grid;
  place-content: center;
}

/* Grid view에서 완료된 셀의 textarea는 blur 효과를 제거하여 텍스트가 선명하게 보이도록 함 */

.mandal-art-grid-container .checkmark {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 1.2em;
  color: #4caf50;
  display: none;
  user-select: none; /* 체크마크 선택 방지 */
}

.mandal-art-grid-container .cell.completed .checkmark {
  display: block;
}

.mandal-art-grid-container .cell.highlighted {
  box-shadow: 0 0 0 3px var(--mandal-highlight-color) inset;
  border-color: var(--mandal-highlight-color);
}

/* --- 컨텍스트 메뉴 --- */
.mandal-art-context-menu {
  /* HTML의 클래스 이름과 일치시킴 */
  position: fixed; /* absolute 대신 fixed 사용하면 스크롤에 영향받지 않음 */
  display: none;
  background-color: var(--mandal-sidebar-bg);
  border: 1px solid var(--mandal-border-color);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  z-index: 1000;
  font-size: 14px;
}

.mandal-art-context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mandal-art-context-menu li {
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.mandal-art-context-menu li label {
  cursor: pointer;
}

.mandal-art-context-menu li:hover {
  background-color: #f0f0f0;
}

.mandal-art-context-menu li[data-action="delete-mandal"]:hover,
.mandal-art-context-menu li[data-action="delete-content"]:hover {
  background-color: var(--mandal-danger-color);
}

/* color-picker는 ID가 구체적이므로 그대로 사용 가능 */
#mandal-color-picker {
  visibility: hidden;
  width: 0;
  height: 0;
  position: absolute;
}