/* ============================================================
   호박빛 서재 (Amber-Lit Study) — Tistory dark skin
   ============================================================ */

:root{
  --bg-0: #15161a;
  --bg-1: #1d1f24;
  --bg-2: #24262d;
  --border: #2a2d34;
  --border-strong: #383b44;

  --text-primary: #ece7de;
  --text-secondary: #b8b6ae;
  --text-muted: #8b8d97;

  --accent: #e0a458;
  --accent-dim: #b98246;
  --accent-ink: #2a1c0d;

  --font-sans: 'Pretendard', 'Pretendard-Regular', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Nanum Gothic', Dotum, '돋움', Helvetica, sans-serif;
  --font-serif: 'Noto Serif KR', serif;
  --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;

  --radius: 10px;
  --content-width: 700px;
  --sidebar-width: 280px;
  --side-width: 260px;
  --side-gap: 16px;
}

*{ box-sizing: border-box; }

html{ background: var(--bg-0); }

body{
  margin: 0;
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
input, button{ border: none; background: none; color: inherit; }

#wrap{ min-height: 100vh; position: relative; }

/* ---------------- Left sidebar (fixed) ---------------- */

.side-toggle{
  display: none;
  position: fixed;
  top: 16px; left: 16px;
  z-index: 70;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 18px;
}

.side-left{
  position: fixed;
  top: 0; left: 0;
  width: var(--side-width);
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-0);
  border-right: 1px solid var(--border);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--side-gap);
  z-index: 65;
}

.side-left__avatar{
  display: block;
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.side-left__avatar img{ width: 100%; height: 100%; object-fit: cover; }

.side-left__name{
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: -4px;
}

.side-left__desc{
  white-space: pre-line !important;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: -8px 0 0;
}

.side-left__search{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
}
.side-left__search input{
  width: 100%;
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
}
.side-left__search input::placeholder{ color: var(--text-muted); }
.side-left__search button{ color: var(--text-muted); font-size: 15px; display: flex; flex-shrink: 0; }
.side-left__search button:hover{ color: var(--accent); }

.side-left__subscribe{
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  width: 100% !important;
  height: auto !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  cursor: pointer;
  font-family: var(--font-sans);
}
.side-left__subscribe:hover{ background: var(--accent-dim) !important; }
.side-left__subscribe .txt_state{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--accent-ink) !important;
  font-style: normal !important;
}
/* 블로그 이름은 위 프로필 영역에 이미 표시되므로 버튼 안에서는 숨김 */
.side-left__subscribe .txt_tool_id{ display: none !important; }
.side-left__subscribe .ico_check_type1{
  width: 14px; height: 14px;
  flex-shrink: 0;
}

.side-left__contact{
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.side-left__contact-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 16px;
}
.side-left__contact-btn:hover{ color: var(--accent); border-color: var(--accent-dim); }

.side-left__nav{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
}
.side-left__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: left;
}
.side-left__item i{ font-size: 17px; color: var(--text-muted); width: 18px; }
.side-left__item:hover{ background: var(--bg-1); color: var(--text-primary); }
.side-left__item:hover i{ color: var(--accent); }

.side-left__backdrop{
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 62;
}

/* ---------------- Layout ---------------- */

.shell{ margin-left: var(--side-width); min-height: 100vh; display: flex; flex-direction: column; }

#container{
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: 48px;
  flex: 1;
}

#main{ min-width: 0; }

/* ---------------- Home cover ---------------- */

.cover-area{ margin-bottom: 48px; }

.cover-list__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cover-list__title{
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.cover-list__more{
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.cover-list__more:hover{ color: var(--accent); }

.cover-list__items{ display: flex; flex-direction: column; }

.cover-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cover-item:first-child{ padding-top: 0; }

.cover-item__body{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.cover-item__thumb{
  display: block;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
}
.cover-item__thumb img{ width: 100%; height: 100%; object-fit: cover; }

.cover-item__category{
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.cover-item__title{
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cover-item__title:hover{ color: var(--accent); }
.cover-item__meta{
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---------------- Post list ---------------- */

.post-list__header{ margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.post-list__title{ font-family: var(--font-sans); font-size: 24px; margin: 0 0 6px; }
.post-list__desc{ font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; }
.post-list__count{ font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
.post-list__empty{ text-align: center; color: var(--text-muted); padding: 60px 0; font-size: 14px; }

.post-row{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  padding-left: 16px;
  margin-left: -16px;
  transition: border-color .2s ease;
}
.post-row:hover{ border-left-color: var(--accent); }

.post-row__body{ flex: 1; min-width: 0; }

.post-row__thumb{
  display: block;
  flex-shrink: 0;
  width: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.post-row__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.list-style-card .post-list__items{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.list-style-card .post-row{
  border-left: none;
  padding: 20px;
  margin-left: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.list-style-card .post-row:hover{ border-color: var(--accent-dim); }

.post-row__category{
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 4px;
}
.post-row__title{
  display: block;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
.post-row__title:hover{ color: var(--accent); }
.post-row__meta{
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}

/* ---------------- Paging ---------------- */

.paging{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.paging__arrow, .paging__num{
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-secondary);
}
.paging__num:hover, .paging__arrow:hover{ background: var(--bg-1); color: var(--accent); }
.no-more-next, .no-more-prev{ opacity: .3; pointer-events: none; }

/* ---------------- Single post ---------------- */

.post{ padding-bottom: 40px; border-bottom: 1px solid var(--border); }

.post__category{
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 10px;
}
.post__title{
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 14px;
}
.post__meta{
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}
.post__meta a{ color: var(--text-muted); }
.post__meta a:hover{ color: var(--accent); }

.post__body{
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-primary);
}
.post__body img{ border-radius: 8px; margin: 20px 0; }
.post__body a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post__body blockquote{
  margin: 20px 0;
  padding: 4px 20px;
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
  font-family: var(--font-serif);
}
.post__body pre, .post__body code{
  font-family: var(--font-mono);
  background: var(--bg-1);
  border-radius: 6px;
}
.post__body pre{ padding: 16px; overflow-x: auto; border: 1px solid var(--border); }

.post__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.post__tags a{
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
}
.post__tags a:hover{ color: var(--accent); border-color: var(--accent-dim); }

.post__admin{
  display: flex;
  gap: 12px;
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-muted);
}
.post__admin a:hover{ color: var(--accent); }

.post-notice{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.post-notice__badge{
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
}
.post-notice__title:hover{ color: var(--accent); }
.post-notice__date{ margin-left: auto; font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); }

.post-protected{
  text-align: center;
  padding: 60px 20px;
}
.post-protected__title{ font-family: var(--font-sans); font-size: 20px; margin-bottom: 8px; }
.post-protected__desc{ color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.post-protected__input{
  border: 1px solid var(--border);
  background: var(--bg-1);
  border-radius: 6px;
  padding: 8px 12px;
  margin-right: 8px;
  color: var(--text-primary);
}
.post-protected__submit{
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: 6px;
  padding: 8px 16px;
}
.post-protected__submit:hover{ background: var(--accent); color: var(--accent-ink); }

/* ---------------- Related / prev-next ---------------- */

.related{ padding: 32px 0; border-bottom: 1px solid var(--border); }
.related__title{ font-family: var(--font-sans); font-size: 16px; margin: 0 0 16px; }
.related__items{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related-item__thumb{ display: block; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; margin-bottom: 8px; background: var(--bg-1); }
.related-item__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.related-item__title{ display: block; font-size: 13px; margin-bottom: 4px; }
.related-item__title:hover{ color: var(--accent); }
.related-item__date{ font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); }

.post-nav{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.post-nav__item{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-nav__item--prev{ border-right: 1px solid var(--border); }
.post-nav__item--next{ text-align: right; align-items: flex-end; }
.post-nav__label{ font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); }
.post-nav__title{ font-size: 14px; }
.post-nav__item:hover .post-nav__title{ color: var(--accent); }

/* ---------------- Comments / guestbook ---------------- */

.comments, .guestbook{ padding: 32px 0; }

/* 티스토리 표준 통합 앱 다크모드 전용 보정 */
.comments [data-tistory-react-app="Comment"],
.guestbook [data-tistory-react-app="Guestbook"] {
  color: var(--text-primary) !important;
  background-color: transparent !important; /* 👈 이 부분을 추가하세요 */
}
.comments .tt-comment-form .write-field,
.guestbook .tt-guestbook-form .write-field {
  background-color: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius);
}
.comments .tt-btn-register,
.guestbook .tt-btn-register {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 600 !important;
}

/* ---------------- Tag cloud page ---------------- */

.tagcloud-page{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
}
.tagcloud-page__item{
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-secondary);
}
.tagcloud-page__item:hover{ color: var(--accent); border-color: var(--accent-dim); }

/* ---------------- Sidebar ---------------- */

#sidebar{ display: flex; flex-direction: column; gap: 32px; }

.widget__title{
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.widget-profile{ text-align: center; }
.widget-profile img{
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  border: 1px solid var(--border);
}
.widget-profile__name{ font-family: var(--font-sans); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.widget-profile__desc{ font-size: 12px; color: var(--text-muted); margin: 0; }

.widget-category :is(a){ color: var(--text-secondary); }
.widget-category a:hover{ color: var(--accent); }

/* 카테고리 트리에서 현재 선택된(active) 항목: 티스토리가 activeBgColor 값을
   배경(하이라이트 박스)과 글자색 양쪽에 동시에 적용해서 글자가 안 보이는 문제 보정.
   배경은 그대로 두고 글자만 강제로 읽히는 색으로 덮어씌움 (인라인 스타일보다 우선되도록 !important) */
.widget-category div[id^="text_"][style*="e0a458"]{
  color: var(--accent-ink) !important;
  font-weight: 600;
}
.widget-category div[id^="text_"][style*="e0a458"] .c_cnt{
  color: var(--accent-ink) !important;
  opacity: .75;
}

.widget-recent__list li, .widget-popular__list li, .widget-pin__list li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.widget-recent__list li:first-child, .widget-popular__list li:first-child, .widget-pin__list li:first-child{ padding-top: 0; }
.widget-recent__thumb, .widget-popular__thumb, .widget-pin__thumb{
  display: block; width: 44px; height: 44px;
  border-radius: 6px; overflow: hidden; background: var(--bg-1);
}
.widget-recent__thumb img, .widget-popular__thumb img, .widget-pin__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.widget-recent__title, .widget-popular__title, .widget-pin__title{
  display: block; font-size: 13px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.widget-recent__title:hover, .widget-popular__title:hover, .widget-pin__title:hover{ color: var(--accent); }
.widget-recent__date, .widget-popular__date, .widget-pin__note{ font-family: var(--font-sans); font-size: 10px; color: var(--text-muted); }


.widget-rctrp__list li{ padding: 8px 0; border-bottom: 1px solid var(--border); }
.widget-rctrp__list li:first-child{ padding-top: 0; }
.widget-rctrp__desc{
  display: block; font-size: 13px; margin-bottom: 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.widget-rctrp__desc:hover{ color: var(--accent); }
.widget-rctrp__meta{ font-family: var(--font-sans); font-size: 10px; color: var(--text-muted); }

.widget-tags__cloud{ display: flex; flex-wrap: wrap; gap: 6px; }
.widget-tags__item{
  font-family: var(--font-sans);
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--text-secondary);
}
.widget-tags__item:hover{ color: var(--accent); border-color: var(--accent-dim); }

/* cloud1(많이 사용) ~ cloud5(적게 사용) : 아래에 위치해야 위 .widget-tags__item의
   font-size/color를 태그별로 정확히 덮어쓸 수 있습니다. */
.cloud1{ font-size: 18px; opacity: 1; color: var(--accent); font-weight: 600; }
.cloud2{ font-size: 16px; opacity: .9; color: var(--accent); }
.cloud3{ font-size: 14px; opacity: .8; }
.cloud4{ font-size: 13px; opacity: .7; }
.cloud5{ font-size: 12px; opacity: .6; }

.widget-visitor__list > div{
  display: flex; justify-content: space-between;
  font-family: var(--font-sans); font-size: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.widget-visitor__list > div:last-child{ border-bottom: none; }
.widget-visitor__list dd{ margin: 0; color: var(--accent); }
.widget-visitor__list dt{ margin: 0; }

/* ---------------- Footer ---------------- */

#footer{ border-top: 1px solid var(--border); }
.footer-inner{
  max-width: 1080px; margin: 0 auto; padding: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 12px; color: var(--text-muted);
}
.footer__rss{ display: flex; align-items: center; gap: 6px; }
.footer__rss:hover{ color: var(--accent); }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px){
  #container{ grid-template-columns: 1fr; }
  #sidebar{ order: 2; }

  .side-toggle{ display: flex; }

  .shell{ margin-left: 0; }
  #container{ padding-top: 76px; }

  .side-left{
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  .side-left.is-open{ transform: translateX(0); }

  .side-left__backdrop.is-open{ display: block; }

  .list-style-card .post-list__items{ grid-template-columns: 1fr; }
  .related__items{ grid-template-columns: 1fr; }
}

/* ============================================================
   호박빛 서재 — 댓글창 다크모드 추가 보정
   ============================================================ */

/* 2. 댓글창 내부 묻히는 요소들(닉네임, 아이콘) 가독성 확보 */

/* 로그인한 사용자 닉네임 글자색을 호박색 포인트 컬러로 변경 */
.comments .tt-comment-form .write-info .name,
.comments .tt-comment-form .write-info .uid {
  color: var(--accent) !important;
  opacity: 1 !important;
}

/* 비로그인 작성자명/비밀번호 입력란 가독성 보정 */
.comments .tt-comment-form .write-info input {
  background-color: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* 하단 비밀글(자물쇠) 아이콘 및 텍스트 가시성 보정 */
.comments .tt-comment-form .btn-secret,
.comments .tt-comment-form .btn-secret *,
.comments .tt-comment-form .ico-secret {
  color: var(--text-secondary) !important;
  fill: var(--text-secondary) !important;
  opacity: 0.8 !important;
}

/* 댓글 기본 안내 문구 (내용을 입력하세요) 색상 */
.comments .tt-comment-form .write-field::placeholder {
  color: var(--text-muted) !important;
}

/* ============================================================
   티스토리 순정 댓글창 다크모드 강제 오버라이드 (완벽 보정)
   ============================================================ */

/* 댓글 영역 전체 텍스트 및 기본 정렬 */
.comments, .comments *, 
.guestbook, .guestbook * {
  color: var(--text-primary) !important;
}

/* 닉네임, 아이디, 작성자 영역 무조건 밝은색/호박색 강제 고정 */
.comments div[class*="Comment"] span[class*="name"],
.comments div[class*="Comment"] span[class*="uid"],
.comments div[class*="Comment"] a[class*="name"],
.comments div[class*="Comment"] strong,
.comments .tt-comment-form .write-info .name,
.comments .tt-comment-form .write-info .uid {
  color: var(--accent) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--accent) !important; /* 브라우저 강제 채우기 방지 */
}

/* 자물쇠 아이콘 및 비밀글 텍스트 강제 보정 */
.comments button[class*="secret"],
.comments label[class*="secret"],
.comments span[class*="secret"],
.comments [class*="ico-secret"],
.comments [class*="txt-secret"] {
  color: var(--text-secondary) !important;
  fill: var(--text-secondary) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
}

/* 입력창 테두리 및 배경 어둡게 */
.comments textarea, 
.comments [class*="write-field"] {
  background-color: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* 등록 버튼 호박색 고정 */
.comments button[class*="register"],
.comments [class*="btn-register"] {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: bold !important;
}

/* ============================================================
   티스토리 강제 주입 리액트 네임카드(프로필 박스) 완벽 제거
   ============================================================ */
div[data-tistory-react-app="Namecard"],
figure[data-tistory-react-app="Namecard"],
div[class*="Namecard"],
.tt-wrap-profile,
.tt-profile-box {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.comments [class*="btn-more"],
.comments [class*="btn_more"],
.comments button[class*="more"] {
  background-color: transparent !important;
  border: none !important;
}

/* ============================================================
   점 세 개 버튼: 항상 하얀색으로 고정
   ============================================================ */
/* 1. 기본 상태 및 마우스 올렸을 때, 클릭했을 때 모든 배경색 투명 고정 */
.tt-wrap-cmt .tt-button-modify,
.tt-wrap-cmt .tt-button-modify:hover,
.tt-wrap-cmt .tt-box-modify.tt-box-modify-open .tt-button-modify {
  background-color: #ffffff !important;
}

/* 2. 아이콘 색상을 하얀색으로 강제 고정 */
.tt-wrap-cmt .tt-button-modify,
.tt-wrap-cmt .tt-button-modify svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 팝업 메뉴 스타일 (배경 하양, 글자 검정) */
.tt-list-modify {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 8px 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.tt-list-modify li a {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.tt-list-modify li a:hover {
  background-color: #f5f5f5 !important;
  color: #000000 !important;
}

/* ============================================================
   티스토리 공통 에디터 콘텐츠(#article-view) 다크모드 보정

   id 선택자(#article-view)는 class 선택자(.post__body)보다 항상 이기기
   때문에, 우리 스킨의 기본 글자색 지정이 티스토리 기본값(#333 계열)에
   전부 밀리고 있었습니다. 그래서 순서를 이렇게 바꿉니다:

   1) #article-view 전체 기본값을 우리 밝은 글자색으로 강제 통일
   2) 그중 원래부터 검정이 아니었던 것(파랑 링크, 초록 코드, 회색 캡션 등)
      이나 자체 밝은 배경이 있어 원래도 잘 보이던 것만 아래에서
      원래 색으로 다시 복원
   ============================================================ */

/* 1) 기본값 강제 통일
   (span은 제외 - 에디터에서 사용자가 직접 글자색을 지정한 부분이라
   여기까지 덮어쓰면 사용자가 고른 색이 다 사라집니다. span은 색이
   지정 안 돼 있으면 어차피 부모(p 등)의 색을 자연스럽게 물려받습니다) */
#article-view,
#article-view p,
#article-view li,
#article-view td,
#article-view th,
#article-view h1,
#article-view h2,
#article-view h3,
#article-view h4 {
  color: var(--text-primary) !important;
}

/* 에디터가 문단마다 자동으로 박아넣는 인라인 회색(#333333 등) - 콕 집어 수정
   (사용자가 직접 고른 다른 색은 이 목록에 없으니 그대로 유지됩니다) */
#article-view [style*="color: #333333"],
#article-view [style*="color:#333333"],
#article-view [style*="color: #333"],
#article-view [style*="color:#333"],
#article-view [style*="color: #000000"],
#article-view [style*="color:#000000"],
#article-view [style*="color: #000"],
#article-view [style*="color:#000"] {
  color: var(--text-primary) !important;
}

/* 2) 원래부터 검정이 아니었던 것들 - 원래 색으로 복원 */

/* 본문 링크 - 원래 파랑(#0070d1) */
#article-view a {
  color: #0070d1 !important;
}

/* 코드블럭 - 원래 초록 계열 */
#article-view pre,
#article-view pre code.hljs {
  color: rgba(34, 85, 51, 0.87) !important;
}

/* 이미지 캡션 - 원래 회색(#777) */
#article-view figure figcaption {
  color: #777 !important;
}

/* 첨부파일 용량 텍스트 - 원래 회색(#777) */
#article-view figure.fileblock .size {
  color: #777 !important;
}

/* 오픈그래프 설명 - 원래 회색(#909090) */
#article-view figure[data-ke-type='opengraph'] .og-desc {
  color: #909090 !important;
}

/* 인용구 style1(#333)/style2(#666) - 자체 배경 없음 → 밝은 색으로 수정 */
#article-view blockquote[data-ke-style='style1'],
#article-view blockquote[data-ke-style='style2'] {
  color: var(--text-secondary) !important;
}

/* 인용구 style3 - 자체 밝은 배경(#fcfcfc)이 있어 원래 색(#666) 그대로 */
#article-view blockquote[data-ke-style='style3'] {
  color: #666 !important;
}

/* 접은글(moreLess) - 자체 밝은 배경(#fafafa)이 있어 원래 색(#333) 그대로 */
#article-view div[data-ke-type='moreLess'] {
  color: #333333 !important;
}

/* 표(table) - 스타일이 16종류라 이번엔 보류. 특정 스타일에서 여전히
   글자가 안 보이면 어떤 표 스타일인지 알려주시면 정확히 고칠게요 */