/* ── Auth Modal & My Folders ── */

/* Auth modal */
.auth-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.auth-modal {
  background: var(--ocean-panel-solid, #0a1a2e);
  border: 1px solid var(--ocean-border);
  border-radius: 16px;
  padding: 28px 32px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.auth-modal h3 {
  color: var(--ocean-accent);
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 0.05em;
}
.auth-modal input {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--ocean-border);
  background: var(--ocean-input);
  color: var(--ocean-text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.auth-modal input:focus {
  border-color: var(--ocean-accent);
  box-shadow: 0 0 12px rgba(72,187,227,0.18);
}
.auth-error {
  color: var(--ocean-red, #e94560);
  font-size: 13px;
  min-height: 18px;
  margin-bottom: 8px;
}
.auth-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.auth-modal-actions .auth-btn {
  flex: 1;
}
.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ocean-text3);
}
.auth-switch a {
  color: var(--ocean-accent);
  text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }

/* Auth area in left panel */
#authArea {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ocean-border);
  background: rgba(5,18,32,0.50);
}
.auth-logged-in {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-user {
  flex: 1;
  font-size: 12px;
  color: var(--ocean-accent);
  font-weight: 600;
}
.auth-guest {
  display: flex;
  gap: 8px;
}
.auth-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--ocean-border);
  background: transparent;
  color: var(--ocean-text2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-btn:hover {
  background: rgba(72,187,227,0.12);
  border-color: var(--ocean-accent);
  color: var(--ocean-accent);
}
.auth-btn-primary {
  background: var(--ocean-accent);
  color: #000;
  border-color: var(--ocean-accent);
  font-weight: 600;
}
.auth-btn-primary:hover {
  background: var(--ocean-accent2, #5be0a8);
}
.auth-btn-secondary {
  border-color: rgba(72,187,227,0.40);
  color: rgba(200,214,224,0.85);
}
.auth-logout {
  font-size: 11px;
  padding: 4px 8px;
}

/* ── My Folders: 개인 폴더 아이콘만 형광파란색 ── */

#myFolderSection {
  border-bottom: 1px solid var(--ocean-border);
}
#myFolderSection:not(:has(.my-folder-header)) {
  display: none;
}
.my-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ocean-accent);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.my-folder-header span.folder-icon {
  font-size: 14px;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0,229,255,0.5);
}
.my-folder-header #myFolderCount {
  color: var(--ocean-text3);
  font-weight: 400;
}
.my-folder-new {
  display: flex;
  gap: 4px;
  padding: 4px 12px 8px;
}
.my-folder-new input {
  flex: 1;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--ocean-border);
  background: var(--ocean-input);
  color: var(--ocean-text);
  font-size: 12px;
  outline: none;
}
.my-folder-new input:focus {
  border-color: var(--ocean-accent);
}
.my-folder-new button {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ocean-accent);
  background: rgba(72,187,227,0.10);
  color: var(--ocean-accent);
  font-size: 12px;
  cursor: pointer;
}

/* 폴더 아이콘만 형광파란색 글로우 — 나머지는 기본 트리와 동일 */
.my-folder-item {
  position: relative;
}
.my-folder-item:hover {
  background: rgba(72,187,227,0.10);
}
.my-folder-item.active {
  background: rgba(72,187,227,0.18);
  color: var(--ocean-accent);
}
.my-folder-item .tree-toggle {
  color: var(--ocean-text3);
}
.my-folder-item .tree-label {
  color: var(--ocean-text2);
}
.my-folder-icon {
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0,229,255,0.5), 0 0 16px rgba(0,229,255,0.2);
  -webkit-text-fill-color: #00e5ff;
}
.my-file-icon {
  /* keep normal — inherits from tree-icon */
}
.my-folder-del {
  margin-left: auto;
  font-size: 10px;
  color: var(--ocean-text3);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.my-folder-item:hover .my-folder-del,
.my-file-item:hover .my-folder-del {
  opacity: 1;
}
.my-folder-del:hover {
  color: var(--ocean-red, #e94560);
  background: rgba(233,69,96,0.10);
}
.my-file-item {
  height: 26px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  margin-bottom: 1px;
  transition: background 0.15s;
  color: var(--ocean-text2);
}
.my-file-item:hover { background: rgba(72,187,227,0.10); }
.my-file-item.active { background: rgba(72,187,227,0.18); color: var(--ocean-accent); }

/* Upload button per folder */
.my-folder-upload {
  display: inline-block;
  font-size: 10px;
  color: var(--ocean-accent);
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.my-folder-item:hover .my-folder-upload {
  opacity: 1;
}
.my-folder-upload:hover {
  background: rgba(72,187,227,0.15);
}

/* Drag & Drop visual feedback */
.tree-item.dragging {
  opacity: 0.5;
  background: rgba(0,229,255,0.10);
}
.my-folder-item.drag-over {
  background: rgba(0,229,255,0.20) !important;
  outline: 2px dashed #00e5ff;
  outline-offset: -2px;
  border-radius: 6px;
}