/* ========================================
   SIDEBAR & CONTROL PANEL
   사이드바 및 컨트롤 패널 스타일
   ======================================== */

/* Sidebar Toggle Button */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  width: 48px;
  height: 48px;
  color: #8a95a5;
  font-size: 28px;
  transition: all 0.2s ease;
  pointer-events: none;
}

.sidebar-toggle:active {
  transform: scale(0.95);
}

.sidebar-toggle .icon-hamburger {
  display: block;
}

.sidebar-toggle .icon-close {
  display: none;
}

body.sidebar-open .sidebar-toggle .icon-hamburger {
  display: none;
}

body.sidebar-open .sidebar-toggle .icon-close {
  display: block;
}

/* Control Panel - Sidebar */
.control-panel {
  background: #16181d;
  border-right: 1px solid #2c2f38;
  padding: 0;
  width: 320px;
  min-width: 320px;
  /* 모바일 주소창 표시/숨김에 따라 높이가 출렁이는 문제 방지 */
  height: 100vh; /* 기본 폴백 */
  height: 100dvh; /* 지원 브라우저에서 실제 보이는 뷰포트 높이 사용 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

body.sidebar-open .control-panel {
  transform: translateX(0);
}

/* Scrollable sections container */
.control-sections {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 24px;
  /* 사이드바 내부 스크롤이 끝나도 문서가 끌려가지 않도록 */
  overscroll-behavior: contain;
}

.control-sections::-webkit-scrollbar {
  width: 4px;
}

.control-sections::-webkit-scrollbar-track {
  background: transparent;
}

.control-sections::-webkit-scrollbar-thumb {
  background: rgba(150, 160, 170, 0.3);
  border-radius: 2px;
}

.control-sections::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 160, 170, 0.5);
}

/* Section */
.section {
  margin-bottom: 28px;
  /* 섹션 자체의 아래 여백 변화가 갑작스러운 점프가 되지 않도록 애니메이션 */
  transition: margin-bottom 0.3s ease;
}

.section.collapsed {
  margin-bottom: 16px;
}

.section:last-child {
  margin-bottom: 0;
}

/* Advanced Mode Only Sections */
.section.advanced-only {
  border-left: 4px solid rgba(90, 140, 184, 0.25);
  padding: 8px 0 8px 16px;
  margin-bottom: 28px;
}

.section.advanced-only .section-title {
  margin-bottom: 12px;
  color: #c5cad3;
}

/* 연속된 advanced-only 섹션 묶음 처리 */
.section.advanced-only + .section.advanced-only {
  margin-top: -16px;
  padding-top: 12px;
}

/* 묶음의 첫 번째 섹션만 상단 패딩 */
.section.advanced-only {
  padding-top: 8px;
}

/* 묶음의 마지막 섹션만 하단 패딩 */
.section.advanced-only:not(:has(+ .section.advanced-only)) {
  padding-bottom: 8px;
}

/* :has 미지원 브라우저 대비 fallback */
.section.advanced-only + .section:not(.advanced-only) {
  margin-top: 0;
}

.section.advanced-only:last-child {
  padding-bottom: 8px;
}

.section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #b5bac5;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  transition: color 0.2s ease;
  position: relative; /* allow absolute-positioned inline badges */
}

.section-title:hover {
  color: #d0d5dd;
}

.section-title::after {
  content: '';
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b5bac5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: none;
  opacity: 0.7;
}

.section.collapsed .section-title::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b5bac5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 접기/펼치기 시 하단 잔여 공간이 생기지 않도록 명시 */
  margin: 0;
  padding: 0;
  height: auto;
  overflow: hidden;
  transition: height 0.3s ease;
}

.section.collapsed .option-group {
  height: 0;
}

.section.collapsed .bg-colors {
  height: 0;
}

/* Hide list-toggle when a section is collapsed */
.section.collapsed .list-toggle {
  display: none;
}

.section#section-page-bg {
  margin-bottom: 0;
}

/* Background Color Section */
.bg-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  /* 접기/펼치기 시 하단 잔여 공간이 생기지 않도록 명시 */
  margin: 0;
  padding: 0;
  height: auto;
  /* 접힘 상태(height:0)에서 자식이 겹쳐 보이는 문제 방지 */
  overflow: hidden;
  transition: height 0.3s ease;
}

.option-btn {
  padding: 10px 12px 10px 36px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #bfc4ce;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 400;
  text-align: left;
  position: relative;
}

.option-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(20%);
}

.option-btn::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border: 2px solid #3a3e48;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.option-btn:hover {
  background: rgba(150, 160, 170, 0.08);
  color: #e2e5ea;
}

.option-btn:hover::before {
  border-color: #5a8cb8;
}

.option-btn.active {
  background: rgba(90, 140, 184, 0.12);
  color: #e2e5ea;
}

.option-btn.active::before {
  border-color: #5a8cb8;
  background: #5a8cb8;
  box-shadow: 0 0 0 3px rgba(90, 140, 184, 0.25);
}

/* Extra space on the right for preset swatches */
.option-btn[data-gauge-preset] {
  padding-right: 56px;
}

/* Gauge preset mini swatches on option buttons */
.option-btn .gauge-swatch {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 4px;
  pointer-events: none;
}

.option-btn .gauge-swatch .sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Global 'new' badge (red/coral dot) — reusable on buttons/titles */
.new-dot {
  position: absolute;
  width: 5px;  /* ~85–90% of previous 6px size */
  height: 5px;
  border-radius: 50%;
  background: #ff6f6a; /* coral-leaning red */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
  opacity: 0.95;
  pointer-events: none;
}

/* Global hide toggle for all new badges */
body.hide-new-badges .new-dot { display: none; }

/* Theme swatch for color theme buttons */
.option-btn[data-theme],
.option-btn[data-theme-sys] {
  padding-right: 36px;
}

.option-btn .theme-swatch {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* List toggle (전체보기/접기) — minimal bar */
.list-toggle {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: #1c2430; /* 사이드바(#16181d)보다 약간 밝은 청회색 */
  color: #c6cfdb;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.list-toggle:hover {
  background: #212c3a; /* hover 시 약간 더 밝게 */
  color: #e2e7ee;
}

/* Background Color Section - 스타일은 위에 통합됨 */

.bg-color-btn {
  width: 100%;
  height: 36px;
  border: 2px solid #2c2f38;
  border-radius: 4px;
  cursor: pointer;
}

.bg-color-btn.active {
  border-color: #5a8cb8;
  box-shadow: 0 0 0 2px rgba(90, 140, 184, 0.35);
}

.custom-color-picker {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-bucket-icon lucide-paint-bucket'%3E%3Cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3E%3Cpath d='m5 2 5 5'/%3E%3Cpath d='M2 13h15'/%3E%3Cpath d='M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}

.custom-color-picker input[type="text"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  z-index: 2;
}



/* Action Buttons */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 0; /* 하단 패딩 제거 - pin-toggle-container가 완전히 하단에 붙도록 */
  border-top: 1px solid #2c2f38;
}

.action-buttons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #345D78;
  color: #e8f0f7;
}

.btn-primary:hover {
  background: #407293;
}

.btn-primary:active {
  background: #3d6785;
}

.btn-secondary {
  background: #2a2d32;
  border: 1px solid #3a3e48;
  color: #bfc4ce;
}

.btn-secondary:hover {
  background: #33373e;
  border-color: #484d59;
}

.btn-secondary:active {
  background: #23262b;
}

/* ========================================
   QUICK NAVIGATION (TOC)
   사이드바 상단 접이식 미니 목차
   ======================================== */

.quick-nav {
  width: 100%;
  margin: 0;
  background: #242a35;
  border-radius: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.quick-nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: transparent;
  border: none;
  color: #c5cad3;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

.quick-nav-header:hover {
  background: rgba(150, 160, 170, 0.08);
  color: #d5dae2;
}

.quick-nav-header:active {
  background: rgba(150, 160, 170, 0.12);
}

.quick-nav-title {
  flex: 1;
  text-align: left;
}

.quick-nav-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.quick-nav.collapsed .quick-nav-icon {
  transform: rotate(180deg);
}

.quick-nav-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height 0.3s ease, border-top-color 0.3s ease;
  /* 긴 목록 대비 내부 스크롤 가능 */
  max-height: 228px; /* 대략 4~5개 항목 높이 */
  overflow-y: auto;
  border-top: 1px solid rgba(58, 63, 77, 0.65);
}

.quick-nav.collapsed .quick-nav-content {
  height: 0;
  border-top-color: transparent; /* 접힌 상태일 때는 구분선을 투명하게 */
}

.quick-nav-item {
  display: block;
  padding: 12px 24px;
  color: #b5bac5;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  border-left: 3px solid transparent;
  min-height: 44px;
  display: flex;
  align-items: center;
  position: relative; /* For pseudo-element positioning */
}

.quick-nav-item:hover {
  background: rgba(150, 160, 170, 0.08);
  color: #e2e5ea;
  padding-left: 28px;
  border-left-color: #5a8cb8;
}

.quick-nav-item:active {
  background: rgba(150, 160, 170, 0.15);
  color: #ffffff;
}

/* Advanced mode navigation items */
.quick-nav-item.advanced-nav-item {
  display: none;
  padding-left: 36px;
  font-size: 0.85rem;
  color: #a5aab5;
  min-height: 40px;
}

.quick-nav-item.advanced-nav-item:hover {
  padding-left: 40px;
}

/* Show advanced nav items in advanced mode */
body[data-edit-mode="advanced"] .quick-nav-item.advanced-nav-item {
  display: flex;
}

/* Sub-level nav items */
.quick-nav-item.quick-nav-sub {
  padding-left: 36px;
  font-size: 0.88rem;
  color: #818997;
  min-height: 40px;
}

.quick-nav-item.quick-nav-sub::before {
  content: '';
  position: absolute;
  left: 24px; /* Position within the padding */
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: rgba(129, 137, 151, 0.2);
  border-radius: 50%;
}

.quick-nav-item.quick-nav-sub:hover {
  padding-left: 40px;
}

/* Quick-nav custom scrollbar */
.quick-nav-content::-webkit-scrollbar {
  width: 6px;
}
.quick-nav-content::-webkit-scrollbar-track {
  background: transparent;
}
.quick-nav-content::-webkit-scrollbar-thumb {
  background: rgba(150, 160, 170, 0.28);
  border-radius: 3px;
}
.quick-nav-content::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 160, 170, 0.45);
}

/* Scrollable hint: subtle gradient fade at bottom */
.quick-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(36,42,53,0), rgba(36,42,53,0.9));
  opacity: 0; /* 기본: 접힘 또는 스크롤 불필요 시 숨김 */
  transition: opacity 0.2s ease;
}

.quick-nav.has-scroll:not(.collapsed)::after {
  opacity: 1;
}

/* Minimal scroll indicator */
.quick-nav-indicator {
  --indicator-w: 22px;
  --indicator-h: 36px;
  --indicator-radius: 12px;
  --indicator-border: rgba(200, 210, 224, 0.85);
  --indicator-dot: #e9eef7;

  position: absolute;
  right: 10px;
  bottom: 8px;
  width: var(--indicator-w);
  height: var(--indicator-h);
  border-radius: var(--indicator-radius);
  border: 1.5px solid var(--indicator-border);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(1.5px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 11;
}

.quick-nav-indicator .qni-dot {
  --dot: 6px;
  position: absolute;
  left: 50%;
  width: var(--dot);
  height: var(--dot);
  background: var(--indicator-dot);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: qni-scroll 1.4s ease-in-out infinite;
}

@keyframes qni-scroll {
  0% { top: 18%; opacity: 1; transform: translateX(-50%) scale(1); }
  60% { top: 70%; opacity: 1; transform: translateX(-50%) scale(1); }
  80% { top: 84%; opacity: 0; transform: translateX(-50%) scale(0.45); }
  81% { top: 18%; opacity: 0; transform: translateX(-50%) scale(0.45); }
  100% { top: 18%; opacity: 1; transform: translateX(-50%) scale(1); }
}

.quick-nav-indicator.visible {
  opacity: 0.9;
  transform: translateY(0);
}

/* ========================================
   ACTION BUTTONS PINNING
   액션 버튼 하단 고정 기능
   ======================================== */

.action-buttons.pinned {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 320px; /* .control-panel과 동일한 너비 */
  z-index: 11; /* quickNav보다 위에 오도록 조정 */
  background: #16181d; /* .control-panel과 동일한 배경 */
  margin-top: 0; /* fixed일 때는 margin 무효화 */
  /* 버튼 4종에 동일한 좌우 여백 제공 */
  padding: 24px 24px 0 24px;
  padding-bottom: 0; /* 하단 패딩 제거 */
  box-shadow: 0 -8px 12px rgba(0, 0, 0, 0.15);
  /* 사이드바가 열려있지 않을 때는 화면 밖으로 이동 */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  /* 핀 토글 영역의 풀-블리드 처리 시 가로 오버플로우를 차단 */
  overflow: hidden;
}

/* 핀 설정 시 pin-toggle-container의 margin-bottom 무효화 */
.action-buttons.pinned .pin-toggle-container {
  margin-bottom: 0;
}

/* 사이드바가 열려있을 때만 버튼 표시 */
body.sidebar-open .action-buttons.pinned {
  transform: translateX(0);
}

.pin-toggle-container {
  margin-top: 12px;
  /* 어떤 상태(pinned/미고정)에서도 사이드바 전체 너비를 차지하도록 풀-블리드 처리 */
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: -32px; /* .control-sections의 하단 패딩(32px)을 무효화하여 완전히 하단에 붙임 */
  padding: 12px 24px;
  /* 조금 더 밝은 무채색 배경으로 구분 */
  background-color: #242a35;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-checkbox {
  display: none; /* 기본 체크박스 숨김 */
}

.pin-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  color: #8a95a5;
  transition: color 0.2s ease;
  position: relative;
  padding-right: 36px; /* 토글 스위치 공간 확보 (28px + 8px 여백) */
}

.pin-label:hover {
  color: #b5bac5;
}

.pin-label svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.pin-label span {
  font-size: 0.9rem;
}

/* Custom Toggle Switch UI */
.pin-label::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 16px;
  background-color: #2a2d32;
  border: 1px solid #3a3e48;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.pin-label::before {
  content: '';
  position: absolute;
  right: 14px; /* (28 - 12) / 2 + 1 = 9, adjusted for visual balance */
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #8a95a5;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 1;
}

.pin-checkbox:checked + .pin-label::after {
  background-color: #4a7c9e;
  border-color: #4a7c9e;
}

.pin-checkbox:checked + .pin-label::before {
  transform: translate(12px, -50%);
  background-color: #e8f0f7;
}