/* =================================================================
   Custom UI Styles for LTAB
   - All visual styles are defined here.
   - JS is responsible for adding/removing classes only.
   ================================================================= */
   
/* -----------------------------------------
   화면 잠금 효과 body { font-family: 'Noto Sans KR', sans-serif, '돋움'; }
----------------------------------------- */
html.screen-locked { opacity: 0; pointer-events: none; }
html { --scrollbar-width: 4px !important; }
html.screen-locked { background-color: #222; } /* 페이지의 기본 배경색을 지정합니다 */
html.screen-locked body {  visibility: hidden; } /* 내용은 숨기되, 배경색은 보이게 합니다 */
html.js-content-loading body { visibility: hidden; } /* 화면 깜빡임 방지용 스타일 */

/* -----------------------------------------
   로그인/로그아웃 플로팅 버튼
----------------------------------------- */
.ltab-float-button {
  position: absolute;
  top: 50px;
  right: 10px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #999;
  background-color: #222;
  color: #fff;
  z-index: 9999;
  white-space: nowrap;
  
  /* 애니메이션 및 초기 상태 */
  border-radius: 50px;
  opacity: 0.4;
  transition: all 0.2s ease;
}

.ltab-float-button:hover {
  border-radius: 4px;
  opacity: 1;
}

/* -----------------------------------------
   갤러리 탐색 버튼 (하단)
----------------------------------------- */
#gallery-nav-buttons {
  position: fixed;
  display: flex;
  z-index: 9999;
  
  /* 기본 위치: 우측 하단 */
  bottom: 8px;
  right: 8px;
  left: auto;
}

/* 모바일 가로 배치 (구형 기기 호환성 개선) */
#gallery-nav-buttons.mobile {
  flex-direction: row;
  gap: 0;
  bottom: 12px;
  right: 12px;
}

/* 모바일 환경에서 각 버튼의 왼쪽에 여백(margin)을 주어 간격 생성 12px;*/
#gallery-nav-buttons.mobile .gallery-nav-btn {
  margin-left: 10px;
}

/* 단, 첫 번째 버튼에는 왼쪽 여백을 제거하여 정렬을 맞춤 */
#gallery-nav-buttons.mobile .gallery-nav-btn:first-child {
  margin-left: 0;
}

/* 데스크탑 세로 배치 */
#gallery-nav-buttons.desktop {
  flex-direction: column;
  gap: 10px;
}

/* --- 상태 기반 위치 제어 --- */
/* 댓글 패널 열렸을 때 */
body.comment-panel-open #gallery-nav-buttons.desktop {
  right: calc(315px + 5px); 
  bottom: 10px;
  left: auto;
}

/* 갤러리 개별 버튼 */
.gallery-nav-btn {
  background-color: #333;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  align-self: flex-end;
  margin: 0;
  opacity: 0.6;
}

.gallery-nav-btn:hover {
  opacity: 1;
  background-color: #00c217;
}


/* 좋아요 버튼 */
.like-button {
  opacity: 0.8;
  color: white; /* 기본 하트 색상 */
}
.like-button.liked {
  color: #00c217;       /* 추천된 하트 색상 */
  background-color: #ffffff; /* 추천된 배경 색상 */
  opacity: 0.8;
}

/* 댓글 버튼 */
.comment-button.has-comments {
  color: #00c217;
  background-color: #ffffff;
  opacity: 0.8;
}

/* 파일정보 버튼 */
.file-info-button.is-open {
  color: #00c217;
  background-color: #ffffff;
  opacity: 0.8;
}

/* -----------------------------------------
   사이드 패널 (댓글, 파일정보)
----------------------------------------- */
.side-panel {
  position: fixed;
  top: 0;
  width: 320px;
  height: 100%;
  background-color: #222;
  color: #eee;
  z-index: 10000;
  transition: transform 0.3s ease-in-out;
  display: flex; /* Flexbox 컨테이너로 만듭니다. */
  flex-direction: column; /* 아이템을 세로로 배치합니다. */
}

/* 댓글 패널 (오른쪽) */
#comment-ui {
  right: 0;
  transform: translateX(100%);
}

/* 파일 정보 패널 (왼쪽) */
#file-info-ui {
  left: 0;
  transform: translateX(-100%);
}

/* 패널이 열렸을 때 */
#comment-ui.is-open,
#file-info-ui.is-open {
  transform: translateX(0);
}

/* 특정 경로에서 네비게이션 버튼 숨김 처리 */
#gallery-nav-buttons.hidden {
  display: none !important;
}

/* 댓글 패널 내부 스크롤 영역 */
#comment-ui #comment-list {
  overflow-y: auto;
  flex-grow: 1;
  height: calc(100vh - 180px); /* 헤더, 입력창 등 제외한 높이 */
}

/* 댓글 패널의 다른 자식 요소들 (헤더, 입력 폼 등)은 
   높이가 고정되어야 하므로 flex-shrink: 0; 을 추가해주는 것이 좋습니다. */
#comment-ui #comment-header, 
#comment-ui #comment-form { 
    flex-shrink: 0;
}

/* 라이트박스 활성화 시 UI 숨김 처리 */
.lightbox-active-hide {
  visibility: hidden !important;
  transition: none !important; /* 숨길 때 애니메이션 방지 */
}

/* 파일 정보 트리 활성 항목 스타일 */
#file-tree-list .tree-leaf.active {
  background-color: #3a3a3a;
  border-radius: 4px;
}

/* 트리의 각 항목(leaf) 스타일 수정 */
#file-tree-list .tree-leaf {
  display: flex; /* 내부 요소들을 가로로 정렬 */
  justify-content: space-between; /* 요소들을 양 끝으로 분산 */
  align-items: baseline; /* 세로 중앙 정렬 */
  white-space: nowrap; /* 자동 줄바꿈 방지 */
  overflow: hidden; /* 내용이 넘칠 경우 숨김 */
  text-overflow: ellipsis; /* 내용이 넘칠 경우 ...으로 표시 */
}

/* 텍스트를 담는 컨테이너 */
.leaf-text {
  display: flex; /* 제목과 이름을 가로로 나란히 배치 */
  align-items: center; /* 세로 중앙 정렬 */
  flex-grow: 1; /* 가능한 모든 공간을 차지하도록 설정 */
  overflow: hidden; /* 자식 요소가 넘칠 경우 숨김 */
  text-overflow: ellipsis; /* 자식 요소가 넘칠 경우 ... 처리 */
}

/* 제목과 이름 사이의 간격 조정 */
.tree-title {
  margin-right: 5px; /* 제목과 이름 사이에 약간의 여백 추가 */
}

/* 이름 스타일 */
.tree-name {
  flex-shrink: 0; /* 이름이 길어도 줄어들지 않도록 설정 */
}

/* 페이지 이동 화살표 버튼 */
.nav-arrow {
  flex-shrink: 0; /* 화살표 아이콘이 줄어들지 않도록 함 */
  margin-left: 8px; /* 텍스트와 화살표 사이의 간격 확보 */
}

/* -----------------------------------------
   댓글 UI 상세 스타일
----------------------------------------- */
.comment-item {
  display: flex;
  list-style-type: none;
  margin-bottom: 15px;
  /* CSS 변수와 max() 함수를 사용하여 들여쓰기 제어 */
  margin-left: calc(max(0, var(--level) - 1) * 15px);
}

.comment-prefix {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 10px;
  color: #888;
}

.comment-box {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding-right: 30px; /* 텍스트가 사진 밑으로 가지 않도록 최소 여백 확보 */
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px; 
}

/* 프로필 사진 스타일 */
.comment-profile-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #5f5f5f;
  position: absolute; /* 레이어를 분리하여 다른 요소에 영향을 주지 않음 */
  top: 12px;
  right: 12px;
  z-index: 1; /* 다른 요소 위에 보이도록 설정 */
  cursor: pointer; /* [추가] 클릭 가능함을 나타냅니다. */
  transition: all 0.3s ease; /* [추가] 부드러운 확대/축소 효과 */
}

.comment-profile-pic.zoomed {
  z-index: 10; /* 확대 시 다른 모든 요소 위에 표시 */
  border-radius: 4px;
}

.comment-author {
  color: #00c217; /* set.js의 hoverBgColor와 일치 */
  font-size: 0.8rem;
  font-weight: 900;
}

.comment-content {
  margin-bottom: 8px;
}

.comment-text {
  font-size: 0.8rem;
  line-height: 1.6;
  color: #e0e0e0;
  white-space: pre-wrap;
  margin: 0;
  word-wrap: break-word;
  position: relative; /* z-index를 위해 추가 */
  z-index: 0; /* 프로필 사진보다 뒤에 있도록 설정 */
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-timestamp {
  color: #888;
  font-size: 0.65rem;
}

/* 댓글 액션 버튼 공통 스타일 */
.comment-btn {
  font-size: 0.7rem;
  padding: 4px 8px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
  margin-bottom: 0;
  margin-left: 6px;
  transition: background-color 0.2s ease;
}
.comment-btn:first-child {
  margin-left: 0;
}

.comment-btn:hover {
  background-color: #242424 !important; /* 녹색 #00c217 으로 변경, 다른 스타일에 덮어씌워지지 않도록 !important 사용 */
}

/* 개별 버튼 색상 */
/* '저장' 버튼도 '수정' 버튼과 같은 색을 사용하도록 셀렉터 추가 */
.comment-edit-btn, .comment-reply-btn[data-action="save-reply"], .comment-btn[data-action="save"] { background-color: #7C7C7C; }
/* '취소' 버튼도 '삭제' 버튼과 같은 색을 사용하도록 셀렉터 추가 */
.comment-delete-btn, .comment-reply-btn[data-action="cancel-reply"], .comment-btn[data-action="cancel"] { background-color: #555555; }

/* 
.comment-edit-btn, .comment-reply-btn[data-action="save-reply"] { background-color: #7C7C7C; }
.comment-delete-btn, .comment-reply-btn[data-action="cancel-reply"] { background-color: #555555; }*/
.comment-reply-btn { background-color: #4a4a4a; } 

/* 댓글 수정/답글 폼 */
.comment-edit-form, .reply-form {
    margin-top: 10px;
}
.comment-edit-form textarea, .reply-form textarea {
    width: 100%;
    min-height: 100px;
    background: #222;
    color: white;
    border: 1px solid #555;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 4px;
    resize: vertical;
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 0px;
}
.comment-form-actions {
    text-align: right;
    margin-top: 5px;
}

/* -----------------------------------------
   파일 정보 패널 상세 스타일
----------------------------------------- */
#file-info-header {
  height: 60px;
  padding: 10px 15px;
  background-color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid #333;
  margin-bottom: 0;
}

#file-info-header .panel-title {
  font-size: 1rem;
  font-weight: 800;
  color: #eee;
}

#file-info-close-btn {
  margin-bottom: 0;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  line-height: 1;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 5px; /* 클릭 영역 확보 */
}

#file-tree-list {
  overflow-y: auto;
  flex-grow: 1;
  padding: 10px;
}

#file-info-details {
  padding: 15px;
  background-color: #1a1a1a;
  flex-shrink: 0;
  min-height: 150px;
  overflow-y: auto;
  border-top: 1px solid #444;
}

/* -----------------------------------------
   파일 정보 트리 스타일
----------------------------------------- */
.tree-leaf {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 2px 4px;
}

#file-tree-list .tree-leaf.active {
  background-color: #3a3a3a;
  border-radius: 4px;
}

/*▼*/
.toggle-arrow {
  text-decoration: none;
  color: #C8EFD4;
  margin-right: 4px;
  font-size: 0.7rem;
}

/*▶*/
.nav-arrow {
  text-decoration: none;
  color: #41c94d;
  margin-left: 8px;
  font-size: 0.7rem;
}

.tree-node {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 2px 0;
}

/* 하위 메뉴가 접혔을 때 (숨김 처리) */
.tree-children-container.is-collapsed {
  display: none;
}


/* 파일 정보 트리 - 제목 스타일 */
.tree-leaf .tree-title {
  /* set.js의 styles.hoverBgColor 값 */
  color: #00c217; 
  font-weight: 900;
}

/* 파일 정보 트리 - 이름 스타일 */
.tree-leaf .tree-name {
  color: #BFBFBF;
}

/* 제목 바로 뒤에 이름이 올 경우에만 왼쪽 여백 추가 */
.tree-leaf .tree-title + .tree-name {
  margin-left: 4px;
}

/* 파일 정보 패널 상세 정보 스타일 */
#file-info-details .details-description {
  font-size: 0.8em;
  margin: 5px 0;
  color: #ccc;
}

#file-info-details .details-body {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

#file-info-details .details-stats {
  color: #BFBFBF;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#file-info-details .details-stats p {
  margin: 2px 0;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* =================================================================
   Exception Page Styles (e.g., Archive, Portrait)
   - Activated only when the .exception-page class is on the html tag.
   ================================================================= */

/* 1. 기본 링크 스타일 (비활성 상태) */
.exception-page a.item.img-link.item-link {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

/*
 * 2. Hover 스타일 (데스크톱 등 마우스 사용 기기 전용)
 * - 이전의 중복된 hover 규칙들을 하나로 통합했습니다.
 * - 갤러리의 기본 녹색 효과를 덮어쓰고, 원하는 불투명도 효과만 적용합니다.
 */
@media (hover: hover) {
  .exception-page .gallery a.item.img-link.item-link:hover {
    /* 갤러리 기본 스타일(녹색 테두리 등) 강제 제거 */
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    
    /* 원하는 불투명도 효과 적용 */
    opacity: 0.9;
  }
}

/*
 * 3. 터치 기기에서의 Hover 스타일 (아이패드 등)
 * - '끈적이는 hover' 현상을 막기 위해, 터치 시에는 아무런 시각적 변화가 없도록 설정합니다.
 */
@media (hover: none) {
  .exception-page .gallery a.item.img-link.item-link:hover {
    /* 갤러리 기본 스타일 강제 제거 */
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;

    /* 불투명도를 기본 상태와 동일하게 유지하여 터치 잔상 방지 */
    opacity: 0.5;
  }
}

/* 4. 활성 링크 스타일 (현재 페이지) */
.exception-page a.item.img-link.item-link.active {
  opacity: 1 !important;
  cursor: default; 
  pointer-events: none;
  color: inherit !important;
}

/* 5. 작은 화면에서의 반응형 스타일 (모바일 등) */
@media (max-width: 600px) {
  .exception-page a.item.img-link.item-link {
    width: 32px !important;
    height: 32px !important;
  }
}

/* --- 아이패드 및 태블릿용 갤러리 버튼 크기 조정 --- */
@media screen and (min-width: 768px) and (max-width: 1180px) and (pointer: coarse) {

  /* 버튼 자체의 크기를 키웁니다 */
  #gallery-nav-buttons.mobile .gallery-nav-btn {
    /* 기본 값보다 약 1.3배 크게 설정 (원하는 크기로 조절 가능) */
    font-size: 16px;
    padding: 12px 15px;
  }

  /* 버튼과 버튼 사이의 간격을 넓힙니다 */
  #gallery-nav-buttons.mobile { gap: 12px; }

  /* --- 아이패드 및 태블릿용 파일 트리 스타일 조정 --- */
  /* 파일 정보 트리의 폴더(노드) 폰트 및 터치 영역 확대 */
  .tree-node { font-size: 1rem;    /* 기존 0.76rem에서 확대 */ padding: 8px 0;     /* 상하 여백을 늘려 터치 영역 확보 */ }
  /* 파일 정보 트리의 항목(리프) 폰트 및 터치 영역 확대 */
  .tree-leaf { font-size: 1rem; /* 기존 0.8rem에서 확대 */ padding: 5px 4px;   /* 상하 여백을 늘려 터치 영역 확보 */ }
  /* 댓글 작성자 폰트 크기 확대 */
  .comment-author { font-size: 1rem; /* 기존 0.8rem에서 확대 */ }
  /* 댓글 내용 폰트 크기 확대 */
  .comment-text { font-size: 1.05rem; /* 기존 0.8rem에서 확대 */ }
  /* 댓글 시간 폰트 크기 확대 */
  .comment-timestamp { font-size: 0.8rem; /* 기존 0.65rem에서 확대 */ }
}

.fslightbox-container {
    /* rgba(0, 0, 0, 1.0) 
      -> 0,0,0 = 검은색
      -> 1.0 = 100% 불투명 (투명도 없음)
    */
    background: rgba(0, 0, 0, 1.0) !important;
}

/* FsLightbox 툴바 위치 교체 */
.fslightbox-nav {
  position: fixed !important;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between; /* 좌우 분리 */
  align-items: center;
  z-index: 9999;
  pointer-events: none; /* 클릭 차단 방지 */
}

/* FsLightbox 네비 전체를 기준 좌표로 설정 */
.fslightbox-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 50px; /* 높이 확보 */
  z-index: 9999;
  pointer-events: none;
}

/* 전체 네비 영역 기준 */
.fslightbox-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9999;
  pointer-events: none;
}

/* 툴바 자체는 숨기지 않고 유지 */
.fslightbox-toolbar {
  display: block !important;
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: auto;
  z-index: 10000;
}

.fslightbox-toolbar {
  background: none !important;       /* 배경 제거 */
  box-shadow: none !important;       /* 그림자 제거 */
  padding: 0 !important;             /* 여백 제거 */
}

/* 툴바 버튼 자체는 그대로 유지 */
.fslightbox-toolbar-button {
  background: none !important;       /* 버튼 배경 제거 */
  box-shadow: none !important;       /* 버튼 그림자 제거 */
}

/* 닫기 버튼만 왼쪽 상단 고정 */
.fslightbox-toolbar-button[title="Close"] {
  position: relative !important; /* 부모 툴바 기준 상대 위치 */
  display: flex !important;      /* display:none 방지 */
  z-index: 10001;
}

/* 전체화면 버튼 숨김 */
.fslightbox-toolbar-button[title="Enter fullscreen"] {
  display: none !important;
}

/* 사진 장수 표시를 우측 상단 고정 */
.fslightbox-slide-number-container {
  position: absolute !important;
  top: 10px;
  right: 15px;
  pointer-events: auto;
  font-size: 15px;
  color: #fff;
}

/* 모바일 화면 기준 */
@media (max-width: 768px) {
  /* 닫기(X) 버튼 왼쪽 상단 고정 */
  .fslightbox-toolbar-button[title="Close"] {
    position: absolute !important;
    top: 10px;
    left: 5px;
    z-index: 10001;
  }

  /* 사진 장수 오른쪽 상단 고정 */
  .fslightbox-slide-number-container {
    position: absolute !important;
    top: 10px;
    right: 10px;
    z-index: 10000;
  }

  /* 툴바 배경 제거 */
  .fslightbox-toolbar {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  /* 모바일 페이지 하단 스크롤 시 UI 숨김 처리 */
  #gallery-nav-buttons.is-hidden-at-bottom {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
}


/*
 * 댓글 UI (comment-ui) 전용 스타일시트
 */

#comment-list .comment-item-no-comments {
    text-align: center;
    color: #888;
    padding-top: 30px;
    font-size: 0.9em;
}

#comment-input::placeholder {
    color: #777;
}

#comment-submit-btn:hover {
    opacity: 0.85;
    transition: opacity 0.2s;
}

/* 스크롤바 스타일 */
#comment-list::-webkit-scrollbar {
    width: 4px !important;
}

#comment-list::-webkit-scrollbar-track {
    background: rgba(182, 182, 182, 0.3);
}

#comment-list::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px !important;
}

/* 정렬 버튼 스타일 */
.sort-btn { 
    background: none; 
    border: none; 
    color: #888; 
    cursor: pointer; 
    font-size: 12px; 
    padding: 4px 6px; 
    border-radius: 4px; 
    margin-bottom: 0; 
    text-decoration: none; 
    display: inline-block; 
}

.sort-btn.active { 
    color: white; 
    font-weight: normal; /* 'nomal' 오타 수정 */
    background-color: #333; 
}

.sort-btn:not(.active):hover { 
    color: #bbb !important; 
    background-color: transparent !important; 
}


/* 댓글 입력 <textarea> */
#comment-input {
    width: 100%;
    height: 60px; /* (comment_ui.php 기준 60px) */
    resize: none;
    background: #333;
    color: white;
    border: 1px solid #555;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 0px;
    font-size: 0.8em;
}

/* 댓글 '등록' <button> */
#comment-submit-btn {
    background: #555555;
    color: white;
    border: none;
    padding: 0 15px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: normal;
    margin-bottom: 0px;
    font-size: 1em;
}

/* '로그인 후 이용' 안내 메시지 */
.comment-login-prompt {
    width: 100%; 
    text-align: center; 
    color: #888; 
    padding: 20px 0; 
    font-size: 0.9em;
}

/* -----------------------------------------
   사이드 패널 (댓글, 파일정보)
----------------------------------------- */
.side-panel {
  position: fixed;
  top: 0;
  width: 310px;
  height: 100%;
  background-color: #222;
  color: #eee;
  z-index: 10000;
  transition: transform 0.3s ease-in-out;
  display: flex; /* Flexbox 컨테이너로 만듭니다. */
  flex-direction: column; /* 아이템을 세로로 배치합니다. */
}

/* 댓글 패널 (오른쪽) */
#comment-ui {
  right: 0;
  transform: translateX(100%);

  background-color: rgba(20, 20, 20, 0.98);
  border-left: 1px solid #444;
}

/* 댓글 패널 헤더 스타일 */
.comment-panel-header {
    padding: 15px;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center; /* (flex-start에서 center로 변경하는 것을 권장) */
    flex-shrink: 0;
}

/* --- ▼▼▼ [추가] 댓글 패널 제목 스타일 ▼▼▼ --- */
.comment-panel-title {
    color: white;
    margin: 0;
    font-size: 1rem;
    font-weight: 900; /* (get_comment_ui.php와 통일) */
    font-family: 'Noto Sans KR', sans-serif; /* (get_comment_ui.php와 통일) */
}

/* --- ▼▼▼ [추가] 댓글 패널 닫기 버튼 스타일 ▼▼▼ --- */
#comment-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px; /* (comment_ui.php 기준 20px) */
    cursor: pointer;
    line-height: 1;
    margin-bottom: 0;
}

/* --- ▼▼▼ [추가] 댓글 목록(ul) 스타일 ▼▼▼ --- */
#comment-list {
    list-style: none;
    padding: 15px;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
    color: #ccc;
}

/* --- ▼▼▼ [추가] 댓글 패널 하단(푸터) 스타일 ▼▼▼ --- */
.comment-panel-footer {
    padding: 10px; /* (comment_ui.php 기준 10px) */
    border-top: 1px solid #444;
    display: flex;
    background-color: #1a1a1a; /* (get_comment_ui.php 스타일 적용) */
    flex-shrink: 0;
}

/* 제목과 검색 버튼을 감싸는 컨테이너 */
.details-header-container {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}

/* [갤러리], [사진] 검색 링크 스타일 */
.details-search-link {
    /* color는 set.js의 styles.searchLinkColor 에서 동적으로 설정됩니다 */
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
    flex-shrink: 0; /* 버튼 텍스트가 줄어들지 않도록 함 */
}

/* 전체 컨텐츠 래퍼 border-top: 1px solid #555;*/
.details-content {
  padding: 8px;
}

/* 헤더 (제목 + 검색 버튼 래퍼) */
.details-header-container {
  display: flex;
  flex-wrap: wrap;       /* 화면 좁아지면 줄바꿈 */
  align-items: baseline; /* 텍스트 기준선 정렬 */
  gap: 4px 8px;          /* 세로 4px, 가로 8px 간격 */
  margin-bottom: 10px;
}

/* 제목 (strong) */
.details-title {
  /* set.js의 styles.hoverBgColor 값을 변수로 사용 */
  color: var(--ltab-hover-bg-color, #00c217); 
  font-size: 1.1em;
  font-weight: bold;
  /* display: block;을 사용하지 않아 <a> 태그와 같은 줄에 배치됨 */
  margin-right: 4px; /* 제목과 첫 버튼 사이 간격 */
}

/* 갤러리/사진 검색 링크 (a) */
.details-search-link {
  /* set.js의 styles.searchLinkColor 값을 변수로 사용 */
  color: var(--ltab-search-link-color, #00a3dfff);
  font-size: 0.9em;
}
.details-search-link:hover {
  text-decoration: underline;
}

/* 설명 텍스트 (p) */
.details-description {
  font-size: 0.9em;
  margin: 0;
  line-height: 1.4;
}

/* 본문 (이미지 + 통계 래퍼) */
.details-body {
  display: flex;
  gap: 16px; /* 이미지와 통계 정보 사이 간격 */
  margin-top: 12px;
}

/* 썸네일 이미지 래퍼 (div) */
.details-thumbnail-wrapper {
  flex-shrink: 0; /* 크기 줄어들지 않음 */
}

/* 썸네일 이미지 (img) */
.details-thumbnail {
  width: 130px;
  height: auto;
  border-radius: 4px;
  display: block; /* div 래퍼 내에서 정렬 기준 */
}

/* 통계 정보 래퍼 (div) */
.details-stats {
  flex-grow: 1; /* 남은 공간 모두 차지 */
  min-width: 0; /* flex-shrink시 크기 줄어듦 */
}

/* 통계 항목 (p) */
.details-stats p {
  margin: 0 0 4px 0;
  font-size: 0.9em;
  line-height: 1.3;
  word-break: break-all;
}

.details-stats p > strong {
  /* display: inline-block;
  min-width: 60px; 'Date:', 'Hits:' 등 라벨 너비 고정 */
  color: #ccc;
}

/* 스크랩 피드백 (토스트 메시지) */
.ltab-scrap-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 20px;
  z-index: 10001; /* pswp(10000) 보다 높게 */
  font-size: 0.9rem;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.ltab-scrap-toast.success {
  background-color: #28a745;
}
.ltab-scrap-toast.error {
  background-color: #dc3545;
}
.ltab-scrap-toast.info {
  background-color: #17a2b8;
}
/* [추가] 스크랩용 커스텀 컨텍스트 메뉴 */
.ltab-custom-context-menu {
  position: fixed; /* 화면 기준 고정 */
  z-index: 10001;  /* pswp(10000) 보다 높게 */
  background-color: #2a2a2a;
  border: 1px solid #555;
  border-radius: 26px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  display: block;
}

.ltab-custom-context-menu button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  color: #eee;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  margin-bottom: 0px;
}

.ltab-custom-context-menu button:hover {
  background-color: #007bff; /* (테마에 맞는 하이라이트 색상으로 변경하세요) */
  color: #fff;
  border-radius: 26px;
}

/* =================================================================
   추가: 메시지 오버레이 (권한 없음 등)
   ================================================================= */
#ltab-message-overlay {
  position: fixed;
  /* 갤러리 버튼(9999), 사이드 패널(10000)보다 높게 설정 */
  z-index: 10001; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.6;
  font-family: 'Noto Sans KR', sans-serif, '굴림';
}

#ltab-message-overlay #ltab-countdown {
  font-weight: bold;
  /* set.js의 styles.hoverBgColor 값과 일치 */
  color: var(--ltab-hover-bg-color, #00c217); 
}