/* ===== Base ===== */
:root{
  --bg:#fff1f2;
  --ink:#121212;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius:18px;
  --radius2:14px;
  --max: 1200px;

  /* 상단(hero) 높이 고정 */
  --hero-h: 300px;

}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.wrap{ width:100%; }

/* ✅ 페이지 전체 선택 방지 */
body {
  -webkit-user-select: none;
  user-select: none;
}

/* ✅ 예외(입력/코드 블록은 선택 가능하게) */
input, textarea, button, select,
pre, code {
  -webkit-user-select: text;
  user-select: text;
}


/* ===== HERO ===== */
header.hero{
  width: min(var(--max), calc(100% - 32px));
  margin: 0px auto 18px;

  border-bottom-right-radius: 26px;
  border-bottom-left-radius: 26px;

  height: var(--hero-h);
  position: relative;
  overflow: visible;

  /* ✅ 배경 이미지 + 기존 효과 유지 */
  background-image:
    url("./images/background-bg.png"),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.08), transparent 40%);
    
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  background-color: #ffffff;

  display:flex;
  flex-direction:column;
  z-index: 50;
}


.post-title img {
  display: none;
}

.hero-inner{
  padding: 26px 24px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  
}

.brand-title{
  display:block;
  font-weight:800;
  color:#fff;
  font-size: 28px;
  letter-spacing:-.2px;
}

.brand-sub{
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: block;
  color: rgba(255,255,255,.72);
  font-size: 36px;

  margin: 0;
  text-align: center;
  pointer-events: none; /* 클릭 방해 안 하게 */
  text-shadow: 3px 1px 2px #D518F2;
}


.hero-search{ min-width: 280px; flex: 0 0 auto; }
.search-form{
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:999px;
  overflow:hidden;
  padding: 10px 12px;
  gap:10px;
}
.search-input{
  border:0; outline:none;
  width:100%;
  font-size:14px;
}
.search-btn{
  border:0; background:transparent;
  cursor:pointer;
  font-size:16px;
  padding: 0 8px;
}

/* ===== NAV + SUBMENU (✅ 여기만 제대로 되면 끝) ===== */
.nav{
  width: min(var(--max), calc(100% - 32px));
  margin: 24px auto 0px;
  /* border-radius: 26px; */
  border-top-right-radius: 26px;
  border-top-left-radius: 26px;
  background: rgba(17,24,39,.06);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.35);

  padding: 10px 14px;

  order: 1;              /* ⭐ 맨 위 */
  margin-top: 14px;
  top: 0;
  position: relative; /* ⭐ sub-menu 패널의 기준 */
  z-index: 9999;
  overflow: visible;
  display:flex;
  align-items:center;
}

/* 로고 자리 */
.nav-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:16px;
  color:#111827;
}

.nav-logo img{
  height:28px;     /* 필요하면 24~34로 조절 */
  width:auto;
  display:block;
}


/* 주메뉴 리스트 */
.nav-main{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left:auto;          /* ✅ 오른쪽 정렬 핵심 */
  justify-content:flex-end;  /* 우측으로 모으기 */

}

.nav-item{ position: relative; }

.nav-link{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:700;
  font-size: 14px;
  color:#111827;
}
.nav-link:hover{
  background: rgba(17,24,39,.06);
}


/* ===== Mega menu (있다면 그대로) ===== */
.has-mega .mega{
  position:absolute;
  left:0;
  top: calc(100% + 10px);
  min-width: 200px;
  background: #fff;
  border:1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
  display:none;
  z-index: 9000;
}
.has-mega:hover .mega{ display:block; }

.nav-item.has-mega { position: relative; }

.nav-item.has-mega > .mega{
  top: 100% !important;     /* ✅ 틈 제거 */
  margin-top: 0 !important; /* ✅ 틈 제거 */
} 


.mega-col a{
  display:block;
  padding: 5px 5px;
  border-radius: 12px;
  color:#111827;
  font-weight:600;
  font-size: 13px;
}
.mega-col a:hover{
  color: blue;
  
}
.mega-col a:visited{
  color: #7c3aed;
}

/* ===== LAYOUT ===== */
.layout{
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto 24px;
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
}

/* ===== SIDEBAR ===== */
.sidebar{ position: relative; }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 14px;
}

.card-title{
  font-weight: 800;
  font-size: 14px;
  margin:10px;
}

.card-body{ color:#111827; font-size: 13px; margin:10px;}

/* 쿠팡 광고 사이즈 조정 */
/* 왼쪽 광고 슬롯 */
.ad-left-slot{
  width: 100%;
  max-width: 780px;     /* 최대 780까지만 */
  overflow: hidden;     /* 780 고정으로 튀면 잘라버림 */
  /* margin-left: 10px;
  margin-right: 10px; */
}

/* 혹시 내부가 iframe이면 최대폭 제한 */
.ad-left-slot iframe,
.ad-left-slot img{
  max-width: 100% !important;
}

.ad-content{

  /* padding: 0.5rem 0.75rem; */

  background: rgb(82, 80, 80);            /* 검정 배경 */
  color: #fff;                 /* 흰 글씨 */

  border: 1px solid var(--line);
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  font-size: 0.73rem;          /* rem 단위 (약 12px) */
  line-height: 1.4;

  text-align: center;
}

.ad-content span{
  opacity: 0.9;                /* 살짝 부드럽게 */
}


.profile-top{
  display:flex;
  gap: 12px;
  align-items:center;
}
.profile-img{
  width: 104px; height: 104px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  flex: 0 0 auto;
  background:#f3f4f6;
}

.profile-img img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 또는 contain */
  display: block;
}


.profile-meta .profile-title{ font-weight: 900; font-size: 14px; }
.profile-meta .profile-desc{ color: var(--muted); font-size: 12px; margin-top:4px; }

.btn{
  flex: 1;
  text-align:center;
  border: 1px solid var(--line);
  background:#fff;
  padding: 10px 10px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 12px;
}
.btn:hover{ background: rgba(17,24,39,.04); }

.quick{ list-style:none; padding:0; margin:0; }
.quick li a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
}
.quick li a:hover{ background: rgba(17,24,39,.06); }

.ad-placeholder{
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 18px 12px;
  text-align:center;
  color: var(--muted);
  font-weight:700;
}

#tt-body-index .category_list,
.category_list{ font-size: 13px; }
.category_list a{ padding: 6px 0; display:inline-block; }

/* ===== CONTENT ===== */
.content{ min-width: 0; }

/* page title 카드 */
.page-title{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px;
  margin-bottom: 14px;

  /* ✅ 추가 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 제목(카테고리명) */
.page-title h1,
.page-title h2{
  margin: 0;
  font-size: 18px;
  letter-spacing: -.2px;
}

.page-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ===== 오른쪽 액션 영역 ===== */
.page-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; /* 글자가 길어져도 버튼 밀리지 않게 */
}

/* 버튼 공통 */
.page-actions a{
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition: all .15s ease;
  white-space: nowrap;
}

/* 글쓰기 버튼 강조 */
/* .page-actions .btn-write{
  font-weight: 600;
} */

.post-list{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.post-item{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.post-item:last-child{ border-bottom:0; }

.post-thumb{
  width: 140px;
  height: 96px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  background:#f3f4f6;
  position: relative;
}
.post-thumb .thumb-img{ width:100%; height:100%; object-fit: cover; }
.post-thumb .thumb-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-weight:800;
  font-size:12px;
}
.post-thumb .thumb-img + .thumb-empty{ display:none; }

.post-title{
  display:block;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.2px;
  margin-top: 2px;
}
.post-title:hover{ text-decoration: underline; }

.post-meta{
  margin-top: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;

  /* ✅ 글자 가시성 강화 */
  color: #6b7280; /* var(--muted) 보다 확실히 보이게 */
}

/* dot은 post-meta 안에서만 적용되게 */
.post-meta .dot{
  opacity: .65;
}

/* 카테고리 pill */
.post-meta .cat{
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:#fff;
  color:#374151;
  font-weight:700;
  text-decoration: none;
}
/* ✅ 날짜/댓글이 안 보이는 문제를 확실히 막기 */
.post-meta .date,
.post-meta .rp-count{
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

/* 카테고리만 진하게, 나머지는 은은하게 */
.post-meta .cat{
  color:#374151;
}


.post-desc{
  margin-top: 8px;
  color:#374151;
  font-size: 13px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.paging{ margin-top: 14px; text-align:center; }
.paging a, .paging span{
  display:inline-block;
  margin: 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:#fff;
  font-weight: 800;
  font-size: 12px;
}
.paging a:hover{ background: rgba(17,24,39,.04); }

.article{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
}
.article-head{ margin-bottom: 14px; }
.article-title{
  margin:0;
  font-size: 22px;
  letter-spacing: -.4px;
}
/* 메타 + 네비 한 줄 배치 */
.article-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}

.article-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  flex:1;
}
/* 버튼 영역 */
.article-nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

/* 🔥 버튼 사이즈 축소 */
.article-nav .nav-btn{
  padding:3px 8px;          /* 핵심 */
  font-size:11px;           /* 메타와 비슷하게 */
  line-height:1.2;
  border:1px solid #e5e7eb;
  border-radius:6px;
  background:#fff;
  color:#555;
  text-decoration:none;
  white-space:nowrap;
}

/* hover 최소 효과 */
.article-nav .nav-btn:hover{
  background:#f3f4f6;
}

.article-body{ 
  margin-top: 16px; 
  font-size: 15px;
  border-top: 1px solid rgba(17, 24, 39, 0.15); /* 연한 선 */
  padding-top: 20px;
}

.article-body pre{
  padding: 14px;
  border-radius: 16px;
  background:#0b1020;
  color:#e5e7eb;
  overflow:auto;
}
.article-body code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.cta-box{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:#fff;
  font-weight: 900;
  font-size: 13px;
}
.cta:hover{ background: rgba(17,24,39,.04); }

.tags{ margin-top: 12px; }
.tag{
  display:inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  font-weight: 800;
  font-size: 12px;
  color:#374151;
}

.footer{
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto 24px;
  
  
  border-radius: 26px;
  background: rgba(17,24,39,.06);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding: 10px 14px;
}

.footer-inner{
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 24px;   /* 🔥 오른쪽 벽과 HOME/Admin 간 거리 */
}
.footer-copy{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #111827;
  white-space: nowrap;
}
.footer-links{
  margin-left: auto;
  display: flex;
  gap: 20px;           /* HOME ↔ Admin 간격 */
}

.footer-links a{
  font-size: 12px;
  color: #111827;
  text-decoration: none;
}



.footer-links a:hover{ text-decoration: underline; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }

  .hero{ height: auto; }
  .hero-inner{
    flex-direction: column;
    align-items:flex-start;
    order: 2; 
  }
  .hero-search{ width:100%; min-width: 0; }


}

@media (max-width: 560px){
  .post-item{ grid-template-columns: 1fr; }
  .post-thumb{ width:100%; height: 160px; }
}

/* ===== TISTORY CATEGORY FIX (사이드바 카테고리) ===== */
.card .tt_category,
.card .category_list,
.card .category_list ul,
.card .category_list li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

.card .category_list a{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px !important;
  border-radius:12px;
  color:#111827;
  font-weight:700;
}

.card .category_list a:hover{
  background: rgba(17,24,39,.06);
}

.card .category_list .c_cnt,
.card .category_list .count{
  margin-left:8px;
  font-size:12px;
  color: var(--muted);
  font-weight:400;
}

/* ✅ 카테고리 한 줄을 '좌:카테고리 / 우:(숫자)+토글' 형태로 */
.tt_category > li > a.link_item{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* (숫자) span 클래스가 스킨마다 다를 수 있어 2개 같이 대응 */
.tt_category .c_cnt,
.tt_category .count{
  margin-left:0;
  font-size:12px;
}

/* ✅ 토글 버튼(체크/화살표) */
.cat-toggle{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  flex:0 0 auto;
}



/* 기본(닫힘): 빈 체크 */
.cat-toggle::before{
  content:"";
  font-size:15px;
  color:#9ca3af;
  line-height:1;
}

.link_tit {
  display: none;
}


/* 카테고리 한 줄 정렬(왼쪽: 이름 / 오른쪽: (숫자) + ✔ ) */
.card .category_list > li > a.link_item{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important; /* space-between 금지 */
  gap:6px !important;
}

/* 하위 카테고리 li 자체를 들여쓰기 */
/* 하위 카테고리 전체 톤 다운 */
.sub_category_list li{
  padding-left: 22px;
  margin-top: 6px;
  position: relative;

  font-size: 12px;        /* 🔽 상위보다 작게 */
  font-weight: 400;       /* 🔽 얇게 */
  color: #8b95a1;   /* 👈 연한 쿨그레이 */
}

/* 하위 카테고리 링크 */
.sub_category_list .link_sub_item{
  font-size: inherit;     /* li 기준 따라감 */
  color: #8b95a1;
}


/* 하위 카테고리 링크 */
.link_sub_item{
  display: block;
  font-size: 13px;
  color: #374151;
}



/* (0) 같은 카운트 */
.card .category_list a .c_cnt{
  margin-left:0px;
  font-size:12px;
  color:#374151;
  font-weight:400;
}

/* 하위 목록은 기본 숨김 */
.card .category_list .sub_category_list{
  display:none;
  margin-top:8px;
  list-style: disc;
  padding-left:18px;
  margin-left: 14px;
}

/* ✅ (1) 카운트는 이름 바로 옆 */
.card .category_list > li > a.link_item .c_cnt,
.card .category_list > li > a.link_item .count{
  margin-left:4px !important;
  display:inline !important;
  white-space:nowrap !important;
}

/* ✅ 토글 버튼만 오른쪽 끝으로 밀기 */
.card .category_list > li > a.link_item .cat-toggle{
  margin-left:auto !important;
}

/* li가 열림 상태일 때만 하위 표시 */
.card .category_list > li.is-open > .sub_category_list{
  display:block;
}

/* ✔ 토글 버튼 */
.card .cat-toggle{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:0px 8px;
  border-radius:10px;
}

/* 닫힘: 빈 체크박스 느낌 */
.card .category_list > li:not(.is-open) > a .cat-toggle{
  opacity:.55;
}

/* 열림: ✔ 강조 */
.card .category_list > li.is-open > a .cat-toggle{
  opacity:1;
  font-weight:900;
}

/* 부모 카테고리 */
.category_list > li{
  position: relative;
}

/* ● 동그라미
.card .category_list .sub_category_list > li::before{
  content: "●";
  position: absolute;
  left: 10px;
  top: 6px;
  font-size: 8px;
  color: #9ca3af; 
} */

/* ✅ 1) 상위(부모) 카테고리 링크에만 flex/패딩 적용 */
.card .category_list > li > a{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px !important;
  border-radius:12px;
  font-weight:700;
}

/* ✅ 2) 하위 카테고리 링크는 flex 금지 + 들여쓰기 보이게 */
.card .category_list .sub_category_list a.link_sub_item{
  display:block !important;
  padding:6px 0 !important;
  border-radius:0 !important;
  font-weight:600;
}

/* ✅ 3) 하위 UL 자체의 기본 들여쓰기(브라우저/초기화 충돌) 제거 */
.card .category_list .sub_category_list{
  margin:8px 0 0 0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* ✅ 4) 하위 LI 들여쓰기 + 동그라미는 LI에서만 */
.card .category_list .sub_category_list > li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
}

.card .category_list .sub_category_list > li::before{
  content:"●";
  position:absolute;
  left:6px;
  top:10px;
  font-size:6px;
  color:#9ca3af;
}

/* ✅ 5) (중요) 너가 만든 a::before 동그라미는 제거해야 함 */
.link_sub_item::before{
  content:none !important;
}



/* ✅ 하위 li/a는 더 이상 absolute 동그라미/내어쓰기 요소 쓰지 않기 */
.card .category_list > li > .sub_category_list > li{
  margin: 6px 0 !important;
  padding: 0 !important;
}

.card .category_list > li > .sub_category_list > li::before{
  content: none !important;       /* ✅ 너가 만든 before 동그라미 제거 */
}

.card .category_list > li > .sub_category_list a.link_sub_item{
  display:inline !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;      /* ✅ 내어쓰기 방지 */
}

/* ✅ 기본: 하위 카테고리 닫힘 */
.card .category_list > li > .sub_category_list{
  display:none !important;
  margin: 6px 0 0 0 !important;
  padding: 0 0 0 18px !important;
  list-style: disc !important;
  list-style-position: inside;
}

/* ✅ 열림 상태에서만 펼침 */
.card .category_list > li.is-open > .sub_category_list{
  display:block !important;
}

.link_item img, .link_sub_item img {
  display: none;
}

.card-title{
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.card-title::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  background: #e5e7eb; /* 연한 회색 */
  margin-top:8px;
}

/* page-sub 전체 스타일 */
.page-sub{
  font-size: 14px;        /* '총', '개' 기본 크기 */
  color: #6b7280;
}

.page-sub-count{
  font-size: 28pt;
  font-weight: 900;
  background: #fee2e2;
  color: #b91c1c;
  padding: 2px 12px;
  border-radius: 999px;
}

/* 댓글 영역 상단 구분선 */
.comment {
  border-top: 1px solid rgba(17, 24, 39, 0.15);
  margin-top: 28px;
  padding-top: 20px;
}


/* ✅ 목록 페이지(홈/카테고리/태그/검색)에서는 글 본문 숨김 */
#tt-body-index .article,
#tt-body-category .article,
#tt-body-tag .article,
#tt-body-search .article {
  display: none !important;
}


/* 댓글 영역 기본 박스 */
section.comment{
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 24, 39, 0.15);
}

/* 티스토리 댓글 폼/리스트에서 자주 쓰는 입력들 */
section.comment input[type="text"],
section.comment input[type="password"],
section.comment textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

section.comment textarea{
  min-height: 110px;
  resize: vertical;
}

/* 버튼류(등록/취소 등) */
section.comment button,
section.comment input[type="submit"]{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

section.comment button:hover,
section.comment input[type="submit"]:hover{
  background: rgba(17,24,39,.04);
}
/* =========================
   댓글 입력폼(로그인 사용자) 레이아웃 수정
   - 썸네일 왼쪽, textarea 오른쪽
   - 유저이름은 textarea 안쪽 상단에 표시
   ========================= */

/* 전체 줄: 썸네일 + 입력영역을 가로로 */
.comment-form .cmt-ui{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

/* 왼쪽 썸네일 영역(너 코드에선 comment-avatar 사용) */
.comment-form .comment-avatar{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}

.comment-form .comment-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 오른쪽 입력영역 */
.comment-form .cmt-inputwrap{
  flex:1;
  min-width:0;            /* flex 줄바꿈/넘침 방지 */
  position:relative;      /* 내부 오버레이(이름) 기준 */
}

/* 유저 이름을 textarea 내부 상단에 얹기 */
.comment-form .cmt-who-in{
  position:absolute;
  top:10px;
  left:14px;
  z-index:2;
  pointer-events:none;    /* 클릭 방해 금지 */
  
}
#comments form:not(.kk-guest-mode) .comment-form .cmt-who-in{
  position: static !important;
}

.comment-form .cmt-who-name{
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  opacity:.9;
}

/* textarea는 이름 들어갈 공간만큼 padding-top 늘림 */
.comment-form textarea{
  width:100%;
  min-height:90px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:36px 12px 12px;   /* ✅ 상단 여백: 이름 자리 */
  font-size:14px;
  outline:none;
  resize:vertical;
  box-sizing:border-box;
}

/* 하단 액션(비밀댓글/등록)은 우측 정렬 */
.comment-form .cmt-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.comment-form .cmt-secret{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color: #333;
}

/* 등록 버튼이 줄바꿈으로 튀지 않게 */
.comment-form .cmt-submit{
  white-space:nowrap;
}
/* 댓글 등록 버튼 정리 */
.cmt-submit{
  padding: 6px 14px !important;   /* 버튼 크기 축소 */
  font-size: 13px !important;     /* 너무 크지 않게 */
  font-weight: 400 !important;    /* ✅ 보통 글자 */
  line-height: 1.2;

  border-radius: 10px;
  background-color: #fff;
  color: #333;

  border: 1px solid #e5e7eb;
  box-shadow: none !important;
}

/* hover 시에도 과하지 않게 */
.cmt-submit:hover{
  background-color: #f9fafb;
}


.comment-form input{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size:13px;
}
.comment-form button{
  border:1px solid var(--line);
  background:#fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight:800;
  cursor:pointer;
}
.cmt-guest{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.cmt-member{
  margin-top:10px;
}
.comment-ul{
  list-style:none;
  margin: 14px 0 0;
  padding:0;
}
.comment-item{
  position: relative;
  padding: 14px 0;
}
/* 댓글 1개당 아래 구분선 */
.comment-ul > .comment-item{
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.12);
}



/* (⋮) 버튼을 오른쪽 위로 */
#comments .comment-item .comment-more,
#comments .comment-item .comment-more-btn,
#comments .comment-item .comment-menu-btn,
#comments .comment-item .cmt-more-btn{
  position: absolute !important;
  top: 10px !important;     /* 🔼 더 올리고 싶으면 6~12px 사이로 */
  right: 12px !important;
  margin: 0 !important;
}

/* 드롭다운(서브메뉴)도 버튼 바로 아래로 */
#comments .comment-item .comment-menu,
#comments .comment-item .comment-dropdown,
#comments .comment-item .comment-actions-menu{
  position: absolute !important;
  top: 0px !important;     /* 🔼 더 올리고 싶으면 32~42px 사이로 */
  right: 12px !important;
  margin: 0 !important;
  z-index: 50 !important;
}

.comment-meta{
  display:flex;
  align-items: center;
  gap:10px;
  font-size:12px;
  color: var(--muted);
}
/* .comment-text{
  margin-top:6px;
  font-size:14px;
} */
.comment-text{
  margin-left: 52px;   /* ✅ 아바타 영역만큼 들여쓰기 */
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}


/* 댓글 작성자(아이디) 표시 */
.comment-form .cmt-who{
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 8px 2px;   /* textarea 위 간격 */
}

/* textarea 이미 잘 쓰고 있으면 유지, 없으면 이거 적용 */
.comment-form textarea{
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  font-size: 14px;
  outline: none;
  resize: vertical;
}

/* ✅ 비밀댓글 + 등록 버튼 오른쪽 정렬 */
.comment-form .cmt-actions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;  /* 오른쪽 정렬 */
  align-items: center;
  gap: 12px;
}

/* .comment-form .cmt-secret{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
} */

.comment-form .cmt-submit{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

/* 댓글 입력폼 아래 구분선 */
#comments .comment-form{
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.15);
}


/* 댓글 입력 UI (아바타 + 내부 아이디 라벨) */
#comments .comment-form.enhanced{
  padding-top: 6px;
}

#comments .comment-form .rp-ui{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

#comments .comment-form .rp-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f3f4f6;
  flex:0 0 auto;
}

#comments .comment-form .rp-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#comments .comment-form .rp-inputwrap{
  position:relative;
  flex:1;
}

/* textarea "안에" 있는 것처럼 보이는 아이디 라벨 */
#comments .comment-form .rp-username{
  position:absolute;
  top:10px;
  left:14px;
  font-weight:800;
  font-size:13px;
  color:#111827;
  pointer-events:none;
}

/* textarea 패딩 위쪽을 넉넉히 줘서 라벨 공간 확보 */
#comments .comment-form textarea{
  width:100% !important;
  min-height:92px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:34px 14px 14px; /* ⭐ 상단 패딩 크게 */
  outline:none;
  resize:vertical;
  background:#fff;
  font-size:14px;
}

#comments .comment-form textarea::placeholder{
  color:#9ca3af;
}

/* 비밀댓글+등록 버튼 오른쪽 정렬 */
#comments .comment-form .rp-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}

#comments .comment-form .rp-actions label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#111827;
}

#comments .comment-form .rp-actions input[type="checkbox"]{
  width:14px;
  height:14px;
}

#comments .comment-form .rp-actions input[type="submit"],
#comments .comment-form .rp-actions button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:8px 14px;
  font-weight:800;
  cursor:pointer;
}

#comments .comment-form .rp-actions input[type="submit"]:hover,
#comments .comment-form .rp-actions button:hover{
  background: rgba(17,24,39,.04);
}

/* 댓글 제목 위쪽 선 제거 */
#comments,
#comments .comment-title {
  border-top: none !important;
}

/* 댓글 제목 아래 수평선 */
#comments .comment-title {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.15);
  margin-top: 0 !important;
}

.article hr {
  display: none !important;
}

/* 작성자 카드 높이 줄이기 */
.article .author {
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

/* 댓글 영역 위로 당기기 */
#comments {
  margin-top: 16px !important;
}

/* 댓글 제목 위 여백 제거 */
#comments .comment-title {
  margin-top: 0 !important;
}

/* 작성자 카드 아래 불필요한 간격 제거 */
.article > div + #comments {
  margin-top: 0 !important;
}


/* ===== Namecard 전체 레이아웃 ===== */
.tt_box_namecard{
  margin: 0 !important;
  height: 100px !important;
  min-height: 30px !important;

  display: flex !important;              /* 🔥 이 줄 중요 */
  justify-content: space-between !important;
  gap: 12px !important;

  padding: 20px 14px !important;
  box-sizing: border-box !important;
}

/* ===== 텍스트 영역 (코드콕콕 + 블로그) 가로 배치 ===== */
.tt_box_namecard .tt_cont{
  /* flex: 1 1 auto !important; */
  padding: 1 !important;
  margin: 0 !important;

  flex-direction: column !important;
  justify-content: center !important; /* ✅ 텍스트도 세로 중앙 */
  line-height: 1 !important;
  gap: 12px !important;
}


.tt_box_namecard .tt_desc , .tt_box_namecard .tt_tit_cont{
  font-size: 13px;
  color: #888;
}

.tt_cont a {
  display: block;
  width: 100%;
}

/* 링크 기본 block/width 강제 해제 */
.tt_box_namecard .tt_cont a{
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}


/* ✅ 썸네일 박스: 내부 콘텐츠(IMG/SVG) 무조건 정중앙 */
.tt_box_namecard .tt_wrap_thumb{
  margin-top: 0;
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  border:1px solid var(--line) !important;
  background:#f3f4f6 !important;

  flex:0 0 40px !important;

  /* 🔥 핵심 */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:0 !important;     /* baseline 영향 제거 */
}

/* ✅ 이미지 들어오면 꽉 채우기 */
.tt_box_namecard .tt_wrap_thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* ✅ 이미지 없고 SVG(기본 아이콘)일 때도 정중앙 */
.tt_box_namecard .tt_wrap_thumb svg{
  display:block !important;
  margin: 0;
  padding :0 ;
}

/* 썸네일 링크(동그라미) 자체를 중앙정렬 컨테이너로 */
div[data-tistory-react-app="Namecard"] .tt_box_namecard a.tt_wrap_thumb{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  background: #f3f4f6 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 0 !important; /* baseline 처짐 방지 */
  font-size: 0 !important;
}

/* 실제 썸네일은 span 배경이미지이므로 span을 꽉 채우고 중앙 고정 */
div[data-tistory-react-app="Namecard"] .tt_box_namecard a.tt_wrap_thumb .tt_thumb_g{
  width: 100% !important;
  height: 100% !important;
  display: block !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* 혹시 티스토리 기본이 position/transform으로 건드리면 무력화 */
div[data-tistory-react-app="Namecard"] .tt_box_namecard a.tt_wrap_thumb .tt_thumb_g{
  position: static !important;
  transform: none !important;
}


/* 텍스트 영역: 남는 공간 채우고 세로 중앙 느낌 */
.tt_box_namecard .tt_cont{
  /* flex: 1 1 auto !important; */
  padding: 0 !important;
  margin: 0 !important;

  /* display: flex !important; */
  flex-direction: column !important;
  justify-content: center !important; /* ✅ 텍스트도 세로 중앙 */
  line-height: 1.25 !important;
}

.kk-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:28px 0 10px;
}

.kk-page{
  text-decoration:none;
  color:#111;
  font-size:16px;
  line-height:1;
}

.kk-num{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.kk-num.selected{
  background:#111;
  color:#fff;
  font-weight:700;
}

.kk-arrow{
  font-size:22px;
  padding:0 6px;
}

/* 링크가 비어있는 prev/next는 흐리게 (티스토리 케이스별로 빈 href/속성 미출력 등 차이가 있어 보강) */
.kk-page:not([href]),
.kk-page[href=""],
.kk-page[href="#"]{
  pointer-events:none;
  opacity:.35;
}


/* 글쓰기/관리 버튼 영역 (목록 버튼과 동일 톤) */
.article-admin-actions{
  display:flex;
  gap:8px;
}

.article-admin-actions .btn-write,
.article-admin-actions .btn-manage{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius: 16px;
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  font-size:13px;
}

/* 상단 액션 정렬 */
.article-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.article-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.article-toolbox{
  display:flex;
  align-items:center;
  padding:6px 10px;
  background:#fff;
  min-height:36px;
}

/* 티스토리 공감바(#post_button_group) 자체 스타일이 깨지지 않도록 */
.article-toolbox .container_postbtn{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

/* 모바일에서 줄바꿈 */
@media (max-width: 860px){
  .article-head-row{ flex-direction:column; align-items:flex-start; }
  .article-head-actions{ width:100%; flex-wrap:wrap; justify-content:flex-start; }
}


/* 댓글 메타(프로필 + 이름/날짜) */
.comment-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f3f4f6;
  flex:0 0 auto;
}

.comment-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


.comment-meta-right{
  display:flex;
  align-items:baseline;
  gap:10px;
}



.comment-actions button,
.comment-actions a{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.reply-ul{
  margin-top:10px;
  padding-left:18px;
  border-left:2px solid rgba(17,24,39,0.10);
}

.reply-item{
  padding-left:10px;
}

/* ✅ PROFILE 배지 숨김 (티스토리 기본 배지/라벨) */
.comment-item .profile,
.comment-item .txt_profile,
.comment-item .badge_profile,
.comment-item [class*="profile"]{
  display:none !important;
}

/* ✅ 오른쪽 상단 메뉴 영역 */
/* .comment-actions{
  margin-left:auto;
  position: relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
} */

.comment-actions{
  position: absolute;
  top: 12px;        /* 🔥 여기서 위아래 미세조정 */
  right: 12px;

  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.cmt-menu{
  top: 38px;   /* 버튼 바로 아래 */
  right: 0;
  background:#fff;
  border: none;                  /* 테두리 제거 */
  border-radius:12px;
  box-shadow: var(--shadow);
  padding:6px;
}


/* ⋮ 메뉴 버튼 기본 상태 */
button.cmt-more-btn{
  width: 26px !important;
  height: 26px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: none !important;
  padding: 0 !important;

  color: #9ca3af !important;   /* 기본 점 색 (연한 회색) */
  cursor: pointer !important;
  border-radius: 8px !important;
}

/* hover 시 연분홍 배경 */
button.cmt-more-btn:hover{
  background-color: #fff1f2 !important;  /* 연분홍 */
}

.cmt-more-dot{
  width:2px;
  height:2px;
  border-radius:999px;
  background:#111;
  display:block;
}

/* 드롭다운 메뉴 */
.cmt-menu{
  position:absolute;
  top: 40px;
  right: 0;
  min-width: 140px;
  background:#fff;
  
  border-radius:12px;
  box-shadow: var(--shadow);
  padding:6px;
  display:none;
  z-index: 9999;
}

.comment-actions.is-open .cmt-menu{
  display:block;
}

/* 메뉴 아이템 버튼 */
.cmt-menu-item{
  width:100%;
  text-align:left;

  /* 테두리/배경 완전 제거 */
  border: none !important;
  background: transparent !important;

  padding:8px 10px;
  cursor:pointer;

  font-size:13px;
  font-weight:400;               /* 글자 연하게 */
  color:#6b7280;                 /* 연한 그레이 */

  border-radius:8px;             /* hover 대비 */
}

/* hover 시만 살짝 표시 */
.cmt-menu-item:hover{
  background:#f9fafb;
  color:#374151;
}


/* 모바일에서도 메뉴 잘 보이게 */
@media (max-width: 560px){
  .cmt-menu{ min-width: 160px; }
}

.cmt-guest{display:flex; gap:8px; margin:10px 0; flex-wrap:wrap;}
.cmt-guest input{flex:1; min-width:160px;}


/* 비밀댓글 내부 secret 텍스트 숨김 */
.comment-text {
  white-space: pre-line;
}

.comment-text::first-line {
  display: none;
}

/* 혹시 단독으로 나올 경우 대비 */
.comment-text:contains(" secret ") {
  display: none;
}

/* 댓글 입력폼에 튀어나오는 secret 텍스트 제거 */
.comment-form > text {
  display: none !important;
}


/* 비로그인 입력폼 '익명' 라벨 */
.kk-guest-label{
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 6px 0;
  color: #111;
}

/* 본문 첫 번째 이미지를 숨김 */
/* .article-view img:first-of-type {
  display: none;
} */



@media (max-width: 640px){
  .article-nav{
    justify-content:space-between; /* 모바일에서 좌우로 보기 좋게 */
  }
  .article-nav .nav-btn{
    flex:1 1 auto;
  }
}

/* 구독하기 버튼 미니멀 스타일 */
.tt_btn_subscribe{
  /* 위치 미세 조정 (이미 쓰던 값 유지 가능) */
  transform: translateY(-12px);

  /* 크기 */
  padding: 2px 10px !important;
  font-size: 10px !important;
  line-height: 1;

  /* 색상 : 배경과 어울리는 연분홍 */
  background-color: #fff1f2 !important;   /* 사이트 바탕색과 동일 */
  color: #c0265c !important;              /* 톤다운된 핑크 텍스트 */

  /* 테두리 */
  border: 1px solid #fce7f3 !important;
  border-radius: 999px;                   /* 알약 버튼 */

  /* 그림자/강조 제거 */
  box-shadow: none !important;

  /* 기타 */
  font-weight: 500;
  opacity: 0.9;
}

/* 게스트 폼에서 textarea 위에 '익명' 라벨 */
.kk-guest-mode .kk-guest-label{
  display:block;
  margin: 8px 0 6px;
  font-weight:700;
  font-size:14px;
  color:#111;
}


/* 게스트 textarea placeholder 2줄 줄바꿈 반영 */
/* #comments .kk-guest-mode textarea::placeholder{
  white-space: pre-line;
  line-height: 1.4;
} */

/* 게스트일 때만 여백을 로그인 폼 수준으로 정리 */
.kk-guest-mode .cmt-guest { margin-bottom: 8px !important; }
.kk-guest-mode .cmt-who-in { margin: 6px 0 8px !important; }

/* ================================
   댓글 폼 겹침 해결 (로그인/비로그인 분리)
   - 로그인: textarea 내부에 이름 오버레이
   - 비로그인(.kk-guest-mode): 위 input들이 있어서 오버레이 금지(겹침 방지)
================================ */

/* 1) 기본(로그인/회원) : textarea 내부 오버레이 */
#comments form:not(.kk-guest-mode) .comment-form .cmt-inputwrap{
  position: relative !important;
}
#comments form:not(.kk-guest-mode) .comment-form .cmt-who-in{
  position: absolute !important;
  top: 10px !important;
  left: 14px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
#comments form:not(.kk-guest-mode) .comment-form textarea{
  padding: 34px 14px 14px !important;  /* 이름 자리 확보 */
}

/* 2) 비로그인(게스트) : 오버레이 쓰면 input에 겹침 → 블록 라벨로 변경 */
#comments form.kk-guest-mode .comment-form .cmt-who-in{
  position: static !important;          /* absolute 금지 */
  margin: 10px 0 6px !important;        /* textarea 위로 내려줌 */
}
#comments form.kk-guest-mode .comment-form textarea{
  padding: 14px 14px 14px !important;   /* 불필요한 상단 패딩 제거 */
}

/* 3) 비로그인 input 3개 줄과 textarea 사이 간격 안정화 */
#comments form.kk-guest-mode .comment-form .cmt-guest{
  margin: 0 0 10px !important;
}

/* 게스트일 때 textarea 내부에 "익명" 오버레이 */
#comments form.kk-guest-mode .kk-ta-wrap{
  position: relative !important;
}

#comments form.kk-guest-mode .kk-ta-wrap .cmt-who-in{
  position: absolute !important;
  top: 10px !important;
  left: 14px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#comments form.kk-guest-mode .kk-ta-wrap .cmt-who-name{
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  opacity: .9 !important;
}

/* "익명" 자리만큼 padding-top 확보 */
#comments form.kk-guest-mode .kk-ta-wrap textarea{
  padding: 34px 14px 14px !important;
}

/* placeholder가 안 보이는 문제 강제 복구 */
#comments .comment-form textarea::placeholder{
  color:#9ca3af !important;
  opacity:1 !important;
}

/* ✅ 로그인(회원)도 placeholder 보이게: 이름 라벨을 textarea 위로 빼기 */
#comments form:not(.kk-guest-mode) .comment-form .cmt-who-in{
  position: static !important;   /* absolute 제거 */
  margin: 0 0 6px !important;    /* textarea 위 간격 */
}

#comments form:not(.kk-guest-mode) .comment-form textarea{
  padding: 14px 14px 14px !important;  /* 상단 패딩(34px) 제거 */
}

/* placeholder는 확실히 보이게 유지 */
#comments .comment-form textarea::placeholder{
  color:#9ca3af !important;
  opacity:1 !important;
}

/* 익명(게스트) 댓글 입력 폼 숨기기 */
#comments .comment-form.kk-guest-mode .cmt-inputwrap,
#comments .comment-form.kk-guest-mode .cmt-actions,
#comments .comment-form.kk-guest-mode .cmt-guest{
  display:none !important;
}

/* 안내문구 박스 */
#comments .kk-guest-block{
  margin: 12px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px dashed var(--line) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.65) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
#comments .kk-guest-block a{
  text-decoration: underline !important;
}

/* 익명(게스트) 댓글 입력 UI 전체 숨기기 (프로필/아바타 포함) */
#comments .comment-form.kk-guest-mode .cmt-ui,
#comments .comment-form.kk-guest-mode .comment-avatar,
#comments .comment-form.kk-guest-mode .comment-form{
  display: none !important;
}

/* ==========================
   비로그인(익명) 댓글 폼: 읽기전용 UI
   ========================== */

/* 입력창은 클릭/입력 안되게 보이도록 */
#comments .comment-form.kk-guest-mode textarea[name="comment"]{
  background: #fff !important;
  cursor: not-allowed !important;
}

/* 비밀댓글/등록 버튼 영역 흐리게 + 클릭 막기 */
#comments .comment-form.kk-guest-mode .cmt-actions{
  opacity: .35 !important;
  pointer-events: none !important; /* 클릭 완전 차단 */
}

/* 게스트 입력(이름/비번/홈페이지) 라인은 숨김 */
#comments .comment-form.kk-guest-mode .cmt-guest{
  display: none !important;
}

/* '익명' 라벨은 보이게(원래 숨겼다면 복구) */
#comments .comment-form.kk-guest-mode .cmt-who-in{
  display: block !important;
  margin: 0 0 6px !important;
  font-weight: 800 !important;
}

/* =========================================================
   방명록(Guestbook) 전용 CSS - 정리본 (필요한 것만)
   대상: <section id="guestbook" class="kk-card kk-guestbook"> ... </section>
   ========================================================= */

:root{
  --kk-bg: #fff1f2;
  --kk-card: rgba(255,255,255,.88);
  --kk-line: rgba(0,0,0,.08);
  --kk-ink: #111827;
  --kk-muted: #6b7280;
  --kk-radius: 18px;
  --kk-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* 공통 카드 */
.kk-card{
  background: var(--kk-card);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius);
  box-shadow: var(--kk-shadow);
  overflow: hidden;
}

/* ✅ 방명록 페이지 content 배경(사이 부분 연분홍/투명 톤) */
body#tt-body-guestbook .content,
body#tt-body-guestbook section.content{
  background: var(--kk-bg) !important;
}

/* 방명록 카드 자체 */
#guestbook.kk-guestbook{
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ✅ body를 별도 카드처럼(내부 React 영역을 하나의 카드로) */
#guestbook.kk-guestbook > .kk-guestbook-body{
  margin: 0 !important;
  padding: 14px 16px 16px;
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius);
  background: var(--kk-card);
  box-shadow: var(--kk-shadow);
}

/* =========================
   방명록(React Comment) - 최종 정리본
   목표:
   [썸네일] [유저 · 날짜 · 답글(한줄)] 
           [본문(다음줄)]
   + 빨간 세로줄 정도로 왼쪽 들여쓰기(썸네일 오른쪽 기준)
   ========================= */

/* React 컨테이너 바탕 정리 */
#guestbook [data-tistory-react-app="Comment"] .tt-comment-cont{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 상단 타이틀/카운트 */
#guestbook .tt-box-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 2px 12px;
  margin: 0 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#guestbook .tt-box-total .tt_txt_g{ font-weight: 900; }
#guestbook .tt-box-total .tt_num_g{ font-weight: 900; opacity:.65; }

/* 리스트 기본 */
#guestbook .tt-list-reply{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
}
#guestbook .tt-item-reply{
  position:relative;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#guestbook .tt-item-reply:last-child{ border-bottom:0; }

/* ✅ 한 아이템: 썸네일(왼쪽) + 내용(오른쪽) */
#guestbook .tt-item-reply .tt-wrap-cmt{
  display:flex !important;
  align-items:flex-start !important;
  gap: 14px !important;
  width:100% !important;
}

/* 썸네일 */
#guestbook .tt-item-reply .tt-box-thumb{
  flex: 0 0 44px !important;
  width:44px !important;
}
#guestbook .tt-item-reply .tt-thumbnail{
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  background-size:cover !important;
  background-position:center !important;
  border: 1px solid rgba(0,0,0,.06);
}

/* ✅ 오른쪽 내용칸(빨간 세로줄 느낌: 썸네일 오른쪽으로 들여쓰기된 영역) */
#guestbook .tt-item-reply .tt-box-content{
  flex: 1 1 auto !important;
  min-width:0 !important;
  padding-left: 6px !important;          /* ← 빨간 세로줄 정도 “살짝” 더 들여쓰기 */
}

/* ✅ "유저 · 날짜 · 답글"을 같은 줄로 만들기
   - meta(유저) + info(날짜/답글)를 한 행에 올림 */
#guestbook .tt-item-reply .tt-box-meta{
  display:inline-flex !important;
  align-items:center !important;
  gap: 10px !important;
  margin: 0 !important;
}

#guestbook .tt-item-reply .tt-link-user{
  font-weight: 900 !important;
  color: var(--kk-ink, #111827);
}

/* info(날짜/답글)를 meta 옆(같은 줄)으로 끌어올림 */
#guestbook .tt-item-reply .tt-wrap-info{
  display:inline-flex !important;
  align-items:center !important;
  gap: 10px !important;
  margin: 0 !important;
  margin-left: 10px !important;          /* 유저와 간격 */
  color: var(--kk-muted, #6b7280);
  font-size: 12px;
}

/* "답글" 링크도 같은 톤 */
#guestbook .tt-item-reply .tt-link-comment .tt_txt_g{
  font-weight: 800;
  color: var(--kk-muted, #6b7280);
}

/* ✅ 본문은 다음 줄 */
#guestbook .tt-item-reply .tt-wrap-desc{
  margin-top: 10px !important;
}
#guestbook .tt-item-reply .tt_desc{
  margin: 0 !important;
  line-height: 1.65;
  color: var(--kk-ink, #111827);
  white-space: pre-line;
}

/* ✅ 더보기(⋮) 버튼: 오른쪽 위 고정 */
#guestbook .tt-item-reply .tt-box-modify{
  position:absolute !important;
  top: 12px !important;
  right: 12px !important;
}

/* 더보기 리스트 위치 */
#guestbook .tt-item-reply .tt-list-modify{
  right: 0;
  left: auto;
}

/* =========================
   작성 영역(하단 입력폼) - 톤만 정리
   ========================= */
#guestbook .tt-area-write{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
}
#guestbook .tt-area-write .tt-box-thumb{
  width:44px;
  min-width:44px;
  margin-right:10px;
}

/* 입력 textarea(contenteditable) */
#guestbook .tt-cmt{
  min-height: 84px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.95);
  line-height: 1.6;
}

/* 등록 버튼 줄 */
#guestbook .tt-box-write{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#guestbook .tt-btn_register{
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
}
.kk-gb-top {
  display: flex;
  gap: 10px;
  align-items: center;
}


/* =========================
   [PATCH] 방명록 제목/본문 안보임 강제 복구
   (방명록 CSS 맨 아래에 추가)
   ========================= */

/* 1) 방명록 제목(방명록 / 2) 무조건 표시 */
#guestbook [data-tistory-react-app="Comment"] .tt-box-total{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  overflow:visible !important;
  margin:0 0 10px !important;
}

/* 2) 리스트 본문(글) 무조건 보이게 */
#guestbook [data-tistory-react-app="Comment"] .tt-wrap-desc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  margin-top:6px !important;
}

/* p 본문 자체 */
#guestbook [data-tistory-react-app="Comment"] .tt_desc{
  display:block !important;
  color: var(--kk-ink, #111827) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin:0 !important;
  white-space: pre-line !important;
}

/* 3) 오른쪽 내용 영역이 혹시 flex로 눌려서 0폭 되는 케이스 방지 */
#guestbook [data-tistory-react-app="Comment"] .tt-item-reply .tt-box-content{
  display:block !important;  /* 중요: block으로 고정 */
  min-width:0 !important;
}

/* 4) 우리가 만든 상단 1줄(유저/시간/답글) 라인 */
#guestbook [data-tistory-react-app="Comment"] .kk-gb-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

/* 유저/시간/답글이 한 줄로 보이게(시간+답글은 info 안에 있음) */
#guestbook [data-tistory-react-app="Comment"] .tt-box-meta{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
}
#guestbook [data-tistory-react-app="Comment"] .tt-wrap-info{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  color: var(--kk-muted, #6b7280) !important;
  font-size:12px !important;
}

/* 5) 썸네일 옆 “빨간 세로줄 만큼” 들여쓰기 느낌(원하면 값 조절) */
#guestbook [data-tistory-react-app="Comment"] .tt-item-reply .tt-box-content{
  padding-left: 6px !important; /* <- 여기 조절(0~12px 사이 추천) */
}


/* =========================
   PC에서 560 이하가 되면 상단 가로 메뉴 숨김
   (모바일 CSS는 건드리지 않음)
   ========================= */
@media (max-width: 600px){
  .nav-main, .brand-sub{ 
    display: none !important;
  }

}

.kk-num .selected:hover {
  background-color: #ffffff !important;  /* 연분홍 */
}

/* =========================
   사이드바 미니 달력
========================= */
.kk-calendar{
  width:100%;
  font-size:12px;
}

/* 달력 상단 헤더 */
.kk-cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

/* ✅ "1월" 중앙 타이틀 */
.kk-cal-title{
  font-weight:700;
  font-size:13px;
  text-align:center;
  flex:1;
}


/* ✅ 좌/우 버튼: 원형 + 아이콘 중앙 정렬 */
.kk-cal-nav{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  line-height:1;
  padding:0;
}

/* 주간/그리드 */
.kk-cal-week,
.kk-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
}

.kk-cal-week{
  margin-bottom:4px;
  color:#666;
  font-weight:600;
}
.kk-cal-week div{ padding:4px 0; }

.kk-cal-grid div{
  padding:6px 0;
  border-radius:10px;
  position:relative; /* ✅ 도트 표시용 */
}

/* 기본 날짜 */
.kk-cal-day{ cursor:default; }

/* 오늘 */
.kk-cal-day.today{
  background:#5B4BFF;
  color:#fff;
  font-weight:700;
}

/* ✅ 공휴일: 원(도트) 표시 */
.kk-cal-day.holiday::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#ff3b30;
  position:absolute;
  left:50%;
  bottom:3px;
  transform:translateX(-50%);
}

/* 빈칸 */
.kk-cal-empty{ background:none; }

/* =========================================================
   KK RESTORE PATCH (Sidebar Category / Top Nav / Post List / Comments)
   - 이 블록은 반드시 style.css 맨 아래
   ========================================================= */

/* =========================
   1) LEFT CATEGORY ACCORDION
   ========================= */
.sidebar .card .category_list,
.sidebar .card .category_list ul,
.sidebar .card .category_list li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* 1뎁스 */
.sidebar .card .category_list > li{ position:relative; }

.sidebar .card .category_list > li > a{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  font-weight:800 !important;
  color:#111827 !important;
  justify-content:flex-start !important;
}
.sidebar .card .category_list > li > a:hover{
  background: rgba(17,24,39,.06) !important;
}

/* 카운트 */
.sidebar .card .category_list > li > a .c_cnt,
.sidebar .card .category_list > li > a .count{
  font-size:12px !important;
  font-weight:500 !important;
  color:#6b7280 !important;
  margin-left:4px !important;
  display:inline !important;
}

/* 서브 있는 부모만 화살표 */
.sidebar .card .category_list > li.has-sub > a::after{
  content:"▸";
  margin-left:auto;
  opacity:.7;
  font-size:12px;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.sidebar .card .category_list > li.is-open.has-sub > a::after{
  transform: rotate(90deg);
}

/* 2뎁스: 기본 닫힘 */
.sidebar .card .category_list > li > ul,
.sidebar .card .category_list > li > .sub_category_list{
  display:none !important;
  margin:6px 0 10px 0 !important;
  padding:0 0 0 16px !important;
}
.sidebar .card .category_list > li.is-open > ul,
.sidebar .card .category_list > li.is-open > .sub_category_list{
  display:block !important;
}

/* 2뎁스 li */
.sidebar .card .category_list > li > ul > li,
.sidebar .card .category_list > li > .sub_category_list > li{
  position:relative;
  margin:6px 0 !important;
  padding-left:14px !important;
}
.sidebar .card .category_list > li > ul > li::before,
.sidebar .card .category_list > li > .sub_category_list > li::before{
  content:"●";
  position:absolute;
  left:0;
  top:8px;
  font-size:6px;
  color:#9ca3af;
}

/* 2뎁스 링크 */
.sidebar .card .category_list > li > ul a,
.sidebar .card .category_list > li > .sub_category_list a{
  display:inline-block !important;
  padding:0 !important;
  border-radius:0 !important;
  font-weight:600 !important;
  font-size:13px !important;
  color:#8b95a1 !important;
}

/* 이미지/불필요 before 제거 */
.sidebar .card .category_list a img,
.sidebar .card .category_list a::before{
  display:none !important;
  content:none !important;
}

/* =========================
   2) TOP NAV (유지 + 안정화)
   ========================= */
header.hero{ z-index: 50 !important; }
.nav{
  z-index: 9999 !important;
  overflow: visible !important;
}

/* nav가 흐리게 보일 때 대비 */
.nav-link{
  color:#111827 !important;
  font-weight:800 !important;
}

/* =========================
   3) POST LIST CARD (목록 카드 톤 고정)
   ========================= */
.post-list{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow:hidden !important;
}

.post-item{
  display:grid !important;
  grid-template-columns: 140px 1fr !important;
  gap:14px !important;
  padding:14px !important;
  border-bottom:1px solid var(--line) !important;
}
.post-item:last-child{ border-bottom:0 !important; }

.post-thumb{
  width:140px !important;
  height:96px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  border:1px solid var(--line) !important;
  background:#f3f4f6 !important;
}

.post-title{
  font-weight:900 !important;
  font-size:15px !important;
}
.post-meta{
  color:#6b7280 !important;
  font-size:12px !important;
  opacity:1 !important;
}
.post-meta .date,
.post-meta .rp-count{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* =========================
   4) COMMENTS (댓글 레이아웃 고정)
   ========================= */
#comments{
  margin-top: 16px !important;
}

section.comment,
#comments .comment-form{
  border-top: 1px solid rgba(17,24,39,0.15) !important;
}

.comment-ul > .comment-item{
  border-bottom: 1px solid rgba(17,24,39,0.12) !important;
}

/* 댓글 내용 들여쓰기(아바타 폭 기준) */
.comment-text{
  margin-left: 52px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}

/* ⋮ 메뉴 버튼 우상단 고정(혹시 다른 규칙에 밀릴 때) */
.comment-actions{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
}

/* =========================
   사이드바 미니 달력
========================= */
.kk-calendar{
  width:100%;
  font-size:12px;
}

/* 달력 상단 헤더 */
.kk-cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

/* ✅ "1월" 중앙 타이틀 */
.kk-cal-title{
  font-weight:700;
  font-size:13px;
  text-align:center;
  flex:1;
}


/* ✅ 좌/우 버튼: 원형 + 아이콘 중앙 정렬 */
.kk-cal-nav{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  line-height:1;
  padding:0;
}

/* 주간/그리드 */
.kk-cal-week,
.kk-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
}

.kk-cal-week{
  margin-bottom:4px;
  color:#666;
  font-weight:600;
}
.kk-cal-week div{ padding:4px 0; }

.kk-cal-grid div{
  padding:6px 0;
  border-radius:10px;
  position:relative; /* ✅ 도트 표시용 */
}

/* 기본 날짜 */
.kk-cal-day{ cursor:default; }

/* 오늘 */
.kk-cal-day.today{
  background:#5B4BFF;
  color:#fff;
  font-weight:700;
}

/* ✅ 공휴일: 원(도트) 표시 */
.kk-cal-day.holiday::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#ff3b30;
  position:absolute;
  left:50%;
  bottom:3px;
  transform:translateX(-50%);
}

/* 빈칸 */
.kk-cal-empty{ background:none; }