/* a_devlog - 수정기록 게시판 스킨
   사이트 전역 테마(:root)의 색상·폰트 토큰을 그대로 사용합니다.
   (accent-color, card-bg-color, content-font-family 등은 사이트 전역 CSS에서 정의됨)

   --dl-* 토큰은 :root에 정의합니다 (.dl-wrap 등 특정 요소에 scope하지 않음).
   플로팅 버튼(.dl-fab)과 모달(.dl-thread-panel)은 .dl-wrap/.dl-view-wrap
   바깥(형제 위치)에 렌더링되므로, 거기에만 scope된 변수는 상속되지 않아
   깨져 보입니다 — 반드시 :root에 둘 것. */
:root {
  --dl-accent: var(--accent-color, #00d643);
  --dl-accent-bg: var(--btn-accent-bg, #002b0f);
  --dl-accent-text: var(--btn-accent-text, #00d643);
  --dl-card: var(--card-bg-color, #111111);
  --dl-border: var(--card-border-color, #2e2e2e);
  --dl-radius: var(--card-border-radius, 10px);
  --dl-text: var(--content-font-color, #f4f4f4);
  --dl-title-font: var(--title-font-family, 'MissedSimsim', 'Chosunilbo_myungjo', serif);
  --dl-body-font: var(--content-font-family, 'Paperlogy-4Regular', 'Pretendard', sans-serif);
  --dl-sub: var(--gray-400, #a5a5a5);
  --dl-sub2: var(--gray-500, #767676);
  --dl-error: var(--error-color, #ff6b6b);
  --dl-info: var(--info-color, #3b82f6);
  --dl-warning: var(--warning-color, #ffdb71);
  --dl-btn-primary-bg: var(--btn-primary-bg, #1c1c1e);
  --dl-btn-primary-text: var(--btn-primary-text, #949398);
  --dl-form-bg: var(--form-bg-color, #111111);
  --dl-form-border: var(--form-border-color, #2e2e2e);
}

.dl-wrap, .dl-view-wrap, .dl-write-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 70px;
  font-family: var(--dl-body-font);
  color: var(--dl-text);
  background: transparent;
}

/* 페이지 진입 시 부드럽게 페이드인 */
.dl-wrap, .dl-view-wrap, .dl-write-wrap, .dl-pc-shell {
  animation: dl-fade-in 0.28s ease;
}
@keyframes dl-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-wrap, .dl-view-wrap, .dl-write-wrap, .dl-pc-shell { animation: none; }
}
.dl-wrap *, .dl-view-wrap *, .dl-write-wrap * { box-sizing: border-box; }

/* Navbar */
.dl-navbar { margin: 0 0 16px; }
.dl-back-btn {
  color: var(--dl-accent); font-size: 16px; font-weight: 500;
  background: none; border: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 2px;
}

.dl-searchbar {
  display: flex; align-items: center; gap: 6px;
  background: var(--dl-form-bg); border: 1px solid var(--dl-form-border);
  border-radius: var(--dl-radius); padding: 8px 10px; font-size: 14px; color: var(--dl-sub);
}
.dl-searchbar form { display: flex; align-items: center; gap: 6px; width: 100%; }
.dl-searchbar input {
  border: none; background: transparent; outline: none;
  font-size: 14px; color: var(--dl-text); width: 100%; font-family: inherit;
}

/* Category tabs — 개수와 상관없이 가로 전체를 균등하게 채움 */
.dl-tabs {
  display: flex; gap: 4px; margin: 12px 0 4px;
  background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: 9px; padding: 2px;
}
.dl-tab {
  flex: 1 1 0; min-width: 0; padding: 7px 4px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--dl-sub);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.dl-tab .dl-tab-count { opacity: 0.65; font-weight: 500; }
.dl-tab.active { background: var(--dl-btn-primary-bg); color: var(--dl-accent); }

/* List card / rows */
.dl-card { background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: var(--dl-radius); overflow: hidden; }
.dl-row {
  display: flex; align-items: center; padding: 12px 14px; gap: 12px;
  border-bottom: 1px solid var(--dl-border); text-decoration: none; color: inherit;
}
.dl-row:last-child { border-bottom: none; }
.dl-row:active { background: rgba(255,255,255,0.04); }
.dl-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.dl-icon.cat-fix { background: rgba(255,107,107,0.14) !important; color: var(--dl-error) !important; }
.dl-icon.cat-skin { background: rgba(59,130,246,0.14) !important; color: var(--dl-info) !important; }
.dl-icon.cat-feature { background: rgba(0,214,67,0.14) !important; color: var(--dl-accent) !important; }
.dl-icon.cat-default { background: rgba(148,147,152,0.16) !important; color: var(--dl-sub) !important; }

.dl-row-body { flex: 1; min-width: 0; }
.dl-row-title { font-size: 15px; font-weight: 600; color: var(--dl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-row-preview {
  font-size: 12px; color: var(--dl-sub2); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.dl-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dl-row-flag { font-size: 13px; color: var(--dl-sub2); }
.dl-chevron { color: var(--dl-sub2); font-size: 18px; }

.dl-empty { text-align: center; color: var(--dl-sub2); font-size: 14px; padding: 60px 0; }

.dl-fab {
  position: fixed; right: 22px; bottom: 26px; z-index: 150; width: 56px; height: 56px; border-radius: 50%;
  background: var(--dl-accent-bg); color: var(--dl-accent-text); border: 1px solid rgba(0,214,67,0.35); font-size: 22px;
  box-shadow: 0 4px 18px rgba(0,214,67,0.25); display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.dl-fab:hover { background: #003b18; }

.dl-paging { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.dl-page {
  min-width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--dl-text); text-decoration: none; background: var(--dl-card); border: 1px solid var(--dl-border);
}
.dl-page.active { background: var(--dl-accent-bg); border-color: rgba(0,214,67,0.4); color: var(--dl-accent); }

/* Detail / view */
.dl-nav-icon-btn {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--dl-btn-primary-bg); border: 1px solid var(--dl-border);
  color: var(--dl-text); font-size: 15px; cursor: pointer; text-decoration: none;
}
.dl-nav-icon-btn:hover { background: rgba(255,255,255,0.08); }

.dl-detail {
  background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: var(--dl-radius);
  padding: 18px 18px 20px;
}
.dl-detail-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.dl-detail h2 { font-family: var(--dl-title-font); color: var(--title-font-color, var(--dl-text)); font-size: 19px; margin: 0; font-weight: 600; }
.dl-pill {
  font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  background: rgba(255,255,255,0.08); color: var(--dl-sub); border: 1px solid var(--dl-border);
}
.dl-pill.cat-fix { background: rgba(255,107,107,0.14) !important; color: var(--dl-error) !important; border-color: rgba(255,107,107,0.35) !important; }
.dl-pill.cat-skin { background: rgba(59,130,246,0.14) !important; color: var(--dl-info) !important; border-color: rgba(59,130,246,0.35) !important; }
.dl-pill.cat-feature { background: rgba(0,214,67,0.14) !important; color: var(--dl-accent) !important; border-color: rgba(0,214,67,0.35) !important; }

.dl-detail-path {
  font-family: "SF Mono", Consolas, monospace; font-size: 12.5px; color: var(--dl-accent);
  background: rgba(0,214,67,0.09); display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 8px; margin: 8px 0;
}

.dl-detail-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--dl-border);
}
.dl-detail-footer-date { font-size: 12.5px; color: var(--dl-sub2); display: flex; align-items: center; gap: 6px; }
.dl-nav-icon-btn-sm { width: 32px; height: 32px; font-size: 13px; }

.dl-field-label { font-size: 12.5px; font-weight: 600; color: var(--dl-sub2); margin: 8px 0 6px; }

/* 왜 고쳤는지 — 콜아웃 박스 (흑백) */
.dl-why-box {
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border); border-radius: var(--dl-radius);
  padding: 10px 12px 11px; margin: 8px 0;
}
.dl-why-head {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--dl-sub2); margin-bottom: 10px;
}
.dl-why-body { font-size: 13.5px; line-height: 0.8; color: var(--dl-text); white-space: pre-wrap; word-break: break-word; margin: 0 5px 6px;}

/* 수정 전 / 수정 후 코드 비교 — 라벨 헤더 + 좌측 컬러 바 */
.dl-code-box { background: #000000 !important; margin: 8px 0; border: 1px solid var(--dl-border); border-left-width: 3px; border-radius: var(--dl-radius); overflow: hidden; }
.dl-code-box.before { border-left-color: var(--dl-error); }
.dl-code-box.after { border-left-color: var(--dl-accent); }
.dl-code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 10px; }
.dl-code-label { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.dl-code-box.before .dl-code-head { background: rgba(255,107,107,0.1); }
.dl-code-box.before .dl-code-label { color: var(--dl-error); }
.dl-code-box.after .dl-code-head { background: rgba(0,214,67,0.1); }
.dl-code-box.after .dl-code-label { color: var(--dl-accent); }
.dl-code-box pre {
  background: #000000 !important; color: #d8d8d8 !important; padding: 14px; font-size: 12.5px;
  line-height: 1.6; overflow-x: auto; margin: 0;
  font-family: "SF Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word;
  border-top: 1px solid var(--dl-border);
}
.dl-copy-btn {
  background: rgba(255,255,255,0.08); border: 1px solid var(--dl-border);
  color: var(--dl-sub); font-size: 11px; padding: 4px 9px; border-radius: 6px; cursor: pointer;
}
.dl-copy-btn:hover { background: rgba(255,255,255,0.15); color: var(--dl-text); }

/* 게시글/타래 자유 메모 */
.dl-thread-memo { font-size: 13.5px; line-height: 0.7; color: var(--dl-text); white-space: pre-wrap; word-break: break-word; margin: 8px 0; }

/* 첨부 이미지 (view = 클릭 시 슬라이더, write = 삭제/추가 가능) */
.dl-image-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-top: 8px; }
.dl-image-thumb {
  position: relative; flex-shrink: 0; width: 120px; height: 90px; border-radius: 10px;
  overflow: hidden; background: var(--dl-card); border: 1px solid var(--dl-border); cursor: pointer;
}
.dl-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-image-thumb .dl-remove {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 11px; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.dl-image-add {
  flex-shrink: 0; width: 120px; height: 90px; border-radius: 10px; border: 1.5px dashed var(--dl-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--dl-accent); font-size: 12px; font-weight: 600; cursor: pointer; background: transparent;
}
.dl-image-add span.plus { font-size: 18px; line-height: 1; }

.dl-view-nav { display: flex; gap: 8px; margin-top: 18px; }
.dl-view-nav a {
  flex: 1; background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: var(--dl-radius);
  padding: 10px 12px; text-decoration: none; color: var(--dl-text); font-size: 12.5px;
}
.dl-view-nav .dl-nav-label { display: block; color: var(--dl-sub2); margin-bottom: 2px; }
.dl-view-nav .dl-nav-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lightbox */
.dl-lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease;
}
.dl-lightbox-overlay.open { opacity: 1; }
.dl-lightbox-stage { max-width: 92vw; max-height: 86vh; }
.dl-lightbox-stage img { max-width: 92vw; max-height: 86vh; object-fit: contain; display: block; }
.dl-lightbox-close, .dl-lightbox-prev, .dl-lightbox-next {
  position: absolute; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff;
  width: 42px; height: 42px; border-radius: 50%; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dl-lightbox-close { top: 18px; right: 18px; }
.dl-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.dl-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.dl-lightbox-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 20px;
}

/* Write form */
.dl-write-title { font-family: var(--dl-title-font); color: var(--title-font-color, var(--dl-text)); font-size: 21px; font-weight: 600; margin: 4px 0 16px; }
.dl-field { margin-bottom: 16px; }
.dl-label { display: block; font-size: 13px; font-weight: 600; color: var(--dl-sub2); margin-bottom: 6px; }
.dl-input, .dl-textarea {
  width: 100%; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--dl-radius); padding: 10px 12px;
  font-size: 14.5px; background: rgba(255,255,255,0.06); color: var(--dl-text); font-family: inherit;
}
.dl-input::placeholder, .dl-textarea::placeholder { color: var(--dl-sub2); }

/* 분류(카테고리) 드롭다운 — 다른 입력창과 같은 색 톤 */
.dl-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--dl-radius);
  padding: 10px 34px 10px 12px; font-size: 14.5px; font-family: inherit; cursor: pointer;
  background-color: rgba(255,255,255,0.06); color: var(--dl-text);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2300d643'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  color-scheme: dark; /* 네이티브 드롭다운 팝업(옵션 목록)도 다크 톤으로 그리도록 브라우저에 알려줌 */
}
.dl-select option { background: #1a1a1a; color: var(--dl-text); }
/* 팝업 자체의 모서리 — 최신 Chrome/Edge에서만 적용됨(다른 브라우저는 무시), 구형에서는 각지게 보일 수 있음 */
.dl-select::picker(select) { border-radius: var(--dl-radius); border: 1px solid var(--dl-border); overflow: hidden; }

/* 클릭(focus)/hover 시 기본 브라우저 강조 효과(테두리 색 변경, box-shadow) 전부 제거
   — 사이트 전역 CSS가 더 강하게 덮어쓰는 경우가 있어서 !important로 확실히 고정함 */
.dl-input:hover, .dl-input:focus,
.dl-textarea:hover, .dl-textarea:focus,
.dl-select:hover, .dl-select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.dl-textarea { resize: vertical; min-height: 70px; }
.dl-textarea.code { font-family: "SF Mono", Consolas, monospace; font-size: 12.5px; min-height: 110px; }
.dl-image-manage-input { display: flex; gap: 8px; margin-bottom: 10px; }
.dl-image-manage-input input { flex: 1; }
.dl-image-manage-input button {
  background: var(--dl-accent-bg); color: var(--dl-accent-text); border: 1px solid rgba(0,214,67,0.35); border-radius: var(--dl-radius);
  padding: 0 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.dl-write-actions { display: flex; gap: 8px; margin-top: 20px; }
.dl-write-actions button, .dl-write-actions a {
  flex: 1; padding: 12px; border-radius: var(--dl-radius); border: none; font-size: 15px; font-weight: 600;
  cursor: pointer; text-align: center; text-decoration: none;
}
.dl-write-actions .dl-btn-submit { background: var(--dl-accent-bg); color: var(--dl-accent-text); border: 1px solid rgba(0,214,67,0.35); box-shadow: 0 0 20px rgba(0,214,67,0.12); }
.dl-write-actions .dl-btn-cancel { background: var(--dl-btn-primary-bg); color: var(--dl-btn-primary-text); }

/* 공개범위 / 비밀글 */
.dl-visibility-group { display: flex; gap: 8px; }
.dl-visibility-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--dl-radius); border: 1.5px solid var(--dl-border);
  font-size: 13.5px; font-weight: 600; color: var(--dl-sub); cursor: pointer;
}
.dl-visibility-option input { display: none; }
.dl-visibility-option.checked { border-color: var(--dl-accent); color: var(--dl-accent); background: rgba(0,214,67,0.08); }
.dl-visibility-option.checked.is-secret { border-color: var(--dl-error); color: var(--dl-error); background: rgba(255,107,107,0.08); }

.dl-view-restricted {
  text-align: center; color: var(--dl-sub2); font-size: 14px; padding: 40px 10px;
}
.dl-view-restricted i { display: block; font-size: 24px; margin-bottom: 10px; color: var(--dl-sub); }
.dl-visibility-note {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--dl-sub2); margin-left: 8px;
}

/* 타래 (게시글 뷰 안에서 이어 쓰는 기록) */
.dl-thread-wrap { margin-top: 10px; }

.dl-thread-empty { text-align: center; color: var(--dl-sub2); font-size: 13px; padding: 20px 0; }
.dl-thread-item {
  background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: var(--dl-radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.dl-thread-item-title { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; color: var(--dl-text); }

.dl-thread-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dl-border);
}
.dl-thread-date { font-size: 12px; color: var(--dl-sub2); }
.dl-thread-menu-wrap { position: relative; }
.dl-thread-kebab {
  color: var(--dl-sub2); font-size: 14px; padding: 4px 8px; background: none; border: none;
  cursor: pointer; border-radius: 8px;
}
.dl-thread-kebab:hover { background: rgba(255,255,255,0.08); color: var(--dl-text); }
.dl-thread-menu {
  display: none; position: absolute; bottom: 32px; right: 0; min-width: 130px;
  background: #1a1a1a; border: 1px solid var(--dl-border); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  padding: 6px; z-index: 60;
}
.dl-thread-menu.open { display: block; }
.dl-thread-menu a {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--dl-text); text-decoration: none;
}
.dl-thread-menu a:hover { background: rgba(255,255,255,0.07); }
.dl-thread-menu a.danger { color: var(--dl-error); }

/* 타래 남기기 — 모달 */
.dl-thread-panel-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 190;
}
.dl-thread-panel-backdrop.open { display: block; }
.dl-thread-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: 440px; max-width: 88vw; max-height: 86vh;
  background: var(--dl-card); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7); z-index: 200;
  overflow-y: auto; padding: 18px 18px 26px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.dl-thread-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.dl-thread-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) { .dl-thread-panel { transition: none; } }

/* ==========================================================================
   PC 레이아웃 (1000px 이상에서만 표시, 그 아래는 위의 모바일 스킨 그대로)
   타임라인형(기본) / 사이드바형 토글. 색상·폰트는 위와 동일한 --dl-* 토큰 사용.
   ========================================================================== */
.dl-pc-shell { display: none; }
@media (min-width: 1000px) {
  .dl-wrap { display: none; }
  .dl-list-fab { display: none; }
  .dl-pc-shell { display: block; max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; font-family: var(--dl-body-font); color: var(--dl-text); }
}
.dl-pc-shell * { box-sizing: border-box; }

.dl-pc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dl-pc-brand { display: flex; align-items: center; gap: 8px; font-family: var(--dl-title-font); color: var(--title-font-color, var(--dl-text)); font-size: 17px; font-weight: 700; }
.dl-pc-brand i { color: var(--dl-accent); }
.dl-pc-view-toggle {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0;
  background: var(--dl-btn-primary-bg); color: var(--dl-sub); border: 1px solid var(--dl-border); border-radius: 8px;
  cursor: pointer; font-size: 13px;
}
.dl-pc-view-toggle:hover { background: rgba(255,255,255,0.08); color: var(--dl-accent); }

/* ── 타임라인형 ── */
.dl-pc-timeline-view[hidden], .dl-pc-sidebar-view[hidden] { display: none !important; }

.dl-pc-timeline-view {
  background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: 14px;
  overflow: hidden; padding: 16px 18px 24px;
}
.dl-pc-timeline-view .dl-pc-toolbar {
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 6px;
}
.dl-pc-search { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 7px 11px; font-size: 12.5px; color: var(--dl-sub2); width: 220px; }
.dl-pc-search input { border: none; background: none; outline: none; color: var(--dl-text); font-size: 12.5px; width: 100%; font-family: inherit; }
.dl-pc-toolbar .dl-pc-tabs { display: flex; gap: 4px; }
.dl-pc-toolbar .dl-pc-tabs a { border: none; background: none; color: var(--dl-sub2); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 7px; text-decoration: none; }
.dl-pc-toolbar .dl-pc-tabs a.active { background: var(--dl-btn-primary-bg); color: var(--dl-accent); }
.dl-pc-toolbar .dl-fab-inline {
  margin-left: auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  background: var(--dl-accent-bg); color: var(--dl-accent-text); border: 1px solid rgba(0,214,67,0.35); border-radius: 8px; cursor: pointer;
}
.dl-pc-toolbar .dl-fab-inline:hover { background: #003b18; }

.dl-pc-timeline { margin: 0 auto; }
.dl-pc-entry { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--dl-border); }
.dl-pc-entry:last-child { border-bottom: none; }
.dl-pc-entry-date { text-align: right; font-size: 11px; color: var(--dl-sub2); line-height: 1.5; padding-top: 3px; }
.dl-pc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-bottom: 4px; }
.dl-pc-dot.cat-fix { background: var(--dl-error) !important; }
.dl-pc-dot.cat-skin { background: var(--dl-info) !important; }
.dl-pc-dot.cat-feature { background: var(--dl-accent) !important; }
.dl-pc-entry-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.dl-pc-entry-top h2 { font-family: var(--dl-title-font); color: var(--title-font-color, var(--dl-text)); font-size: 18px; font-weight: 600; margin: 0; }
.dl-pc-restricted { color: var(--dl-sub2); font-size: 13px; display: flex; align-items: center; gap: 6px; }

/* 게시글 "..." 메뉴 — 제목 줄 맨 오른쪽에 배치(타임라인/사이드바 공용) */
.dl-pc-entry-top .dl-thread-menu-wrap { margin-left: auto; align-self: center; }
/* 위쪽(제목 줄)에 있을 땐 메뉴가 아래로 펼쳐져야 함 — 기본(카드 하단용)은 위로 펼쳐지므로 여기서 뒤집음 */
.dl-thread-menu.dl-thread-menu-below { bottom: auto; top: 32px; }

/* ── 사이드바형 ── */
.dl-pc-sidebar-view { display: flex; min-width: 960px; height: 700px; border: 1px solid var(--dl-border); border-radius: 14px; overflow: hidden; }
.dl-pc-sidebar { width: 236px; flex-shrink: 0; background: #0a0a0a; border-right: 1px solid var(--dl-border); display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; }
.dl-pc-sidebar-searchrow { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.dl-pc-sidebar-searchrow .dl-pc-search { width: auto; flex: 1; min-width: 0; margin-bottom: 0; }
.dl-pc-sidebar-new {
  display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--dl-accent-bg); color: var(--dl-accent-text);
  border: 1px solid rgba(0,214,67,0.35); border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 650; cursor: pointer; margin-bottom: 14px;
}
.dl-pc-sidebar-new:hover { background: #003b18; }
.dl-pc-sidebar-label { font-size: 10.5px; color: var(--dl-sub2); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 650; margin: 0 4px 8px; }
.dl-pc-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.dl-pc-sidebar-nav a { display: flex; align-items: center; gap: 9px; border-radius: 8px; padding: 8px 9px; font-size: 13px; font-weight: 600; color: var(--dl-sub); text-decoration: none; }
.dl-pc-sidebar-nav a .cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dl-pc-sidebar-nav a .cat-dot.cat-fix { background: var(--dl-error) !important; }
.dl-pc-sidebar-nav a .cat-dot.cat-skin { background: var(--dl-info) !important; }
.dl-pc-sidebar-nav a .cat-dot.cat-feature { background: var(--dl-accent) !important; }
.dl-pc-sidebar-nav a .cat-dot.cat-default, .dl-pc-sidebar-nav a .cat-dot.cat-all { background: var(--dl-sub2) !important; }
.dl-pc-sidebar-nav a .cnt { margin-left: auto; font-size: 11px; color: var(--dl-sub2); font-weight: 500; }
.dl-pc-sidebar-nav a:hover { background: rgba(255,255,255,0.04); }
.dl-pc-sidebar-nav a.active { background: var(--dl-btn-primary-bg); color: var(--dl-text); }
.dl-pc-sidebar-nav a.active .cnt { color: var(--dl-accent); }

.dl-pc-list-col { width: 372px; flex-shrink: 0; border-right: 1px solid var(--dl-border); overflow-y: auto; background: var(--dl-card); }
.dl-pc-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--dl-border); border-left: 2px solid transparent; padding: 12px 16px; cursor: pointer; color: inherit;
}
.dl-pc-row:hover { background: var(--dl-card-hover, rgba(255,255,255,0.03)); }
.dl-pc-row.active { background: var(--dl-card); border-left-color: var(--dl-accent); }
.dl-pc-row-icon { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; margin-top: 1px; }
.dl-pc-row-icon.cat-fix { background: rgba(255,107,107,0.14) !important; color: var(--dl-error) !important; }
.dl-pc-row-icon.cat-skin { background: rgba(59,130,246,0.14) !important; color: var(--dl-info) !important; }
.dl-pc-row-icon.cat-feature { background: rgba(0,214,67,0.14) !important; color: var(--dl-accent) !important; }
.dl-pc-row-icon.cat-default { background: rgba(148,147,152,0.16) !important; color: var(--dl-sub) !important; }
.dl-pc-row-body { flex: 1; min-width: 0; }
.dl-pc-row-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-pc-row-preview { font-size: 11.5px; color: var(--dl-sub2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-pc-row-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10.5px; color: var(--dl-sub2); }
.dl-pc-row-meta i { color: var(--dl-sub2); font-size: 10.5px; }

.dl-pc-detail-col { flex: 1; min-width: 0; overflow-y: auto; background: var(--dl-card); }
.dl-pc-detail-inner { max-width: 700px; margin: 0 auto; padding: 26px 30px 60px; display: none; }
.dl-pc-detail-inner.active { display: block; }

/* ── 타임라인/사이드바 공용 상세 콘텐츠 ── */
.dl-pc-pill { font-size: 11px; font-weight: 650; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; background: rgba(255,255,255,0.08); color: var(--dl-sub); border: 1px solid var(--dl-border); }
.dl-pc-pill.cat-fix { background: rgba(255,107,107,0.14) !important; color: var(--dl-error) !important; border-color: rgba(255,107,107,0.35) !important; }
.dl-pc-pill.cat-skin { background: rgba(59,130,246,0.14) !important; color: var(--dl-info) !important; border-color: rgba(59,130,246,0.35) !important; }
.dl-pc-pill.cat-feature { background: rgba(0,214,67,0.14) !important; color: var(--dl-accent) !important; border-color: rgba(0,214,67,0.35) !important; }
.dl-pc-path { font-family: "SF Mono", Consolas, monospace; font-size: 12.5px; color: var(--dl-accent); background: rgba(0,214,67,0.09); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; margin: 10px 0; }
.dl-pc-why { background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border); border-radius: 10px; padding: 12px 14px 13px; margin: 10px 0; }
.dl-pc-why-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dl-sub2); margin-bottom: 6px; }
.dl-pc-why-body { font-size: 13.5px; line-height: 1.6; }
.dl-pc-memo { font-size: 13.5px; line-height: 1.6; margin: 10px 0; }
.dl-pc-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.dl-pc-diff > .dl-pc-code:only-child { grid-column: 1 / -1; }
.dl-pc-code { background: #000 !important; border: 1px solid var(--dl-border); border-left-width: 3px; border-radius: 10px; overflow: hidden; }
.dl-pc-code.before { border-left-color: var(--dl-error); }
.dl-pc-code.after { border-left-color: var(--dl-accent); }
.dl-pc-code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; }
.dl-pc-code-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.dl-pc-code.before .dl-pc-code-head { background: rgba(255,107,107,0.1); }
.dl-pc-code.before .dl-pc-code-label { color: var(--dl-error); }
.dl-pc-code.after .dl-pc-code-head { background: rgba(0,214,67,0.1); }
.dl-pc-code.after .dl-pc-code-label { color: var(--dl-accent); }
.dl-pc-code pre { background: #000 !important; color: #d8d8d8 !important; padding: 12px; font-size: 11.5px; line-height: 1.55; margin: 0; font-family: "SF Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--dl-border); overflow-x: auto; }
.dl-pc-images { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0; }
.dl-pc-images img { width: 108px; height: 78px; object-fit: cover; border-radius: 8px; border: 1px solid var(--dl-border); flex-shrink: 0; cursor: pointer; }

.dl-pc-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--dl-border); }
.dl-pc-footer-date { font-size: 12px; color: var(--dl-sub2); }

.dl-pc-threads { margin-top: 22px; }
.dl-pc-threads-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dl-pc-thread-add { display: flex; align-items: center; gap: 6px; background: var(--dl-accent-bg); color: var(--dl-accent-text); border: 1px solid rgba(0,214,67,0.35); border-radius: 20px; padding: 6px 13px; font-size: 12px; font-weight: 650; cursor: pointer; margin-left: auto; }
.dl-pc-thread-add:hover { background: #003b18; }
.dl-pc-thread-toggle {
  display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--dl-sub);
  font-size: 12.5px; font-weight: 650; cursor: pointer; padding: 4px 0;
}
.dl-pc-thread-toggle:hover { color: var(--dl-text); }
.dl-pc-thread-toggle i { transition: transform 0.15s ease; font-size: 11px; }
.dl-pc-thread-item { background: rgba(255,255,255,0.05); border: 1px solid var(--dl-border); border-radius: var(--dl-radius); padding: 13px 15px; margin-bottom: 9px; }
.dl-pc-thread-item-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.dl-pc-thread-memo { font-size: 13px; line-height: 1.55; color: var(--dl-text); }
.dl-pc-thread-date { font-size: 11px; color: var(--dl-sub2); }
.dl-pc-thread-empty { text-align: center; color: var(--dl-sub2); font-size: 12px; padding: 14px 0; }