/* ===== 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;
}

.category_list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.category_list li {
    display: block !important;
}

.category_list a {
    display: inline-block !important;
    color: #111 !important;
}


.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-family: "Gaegu", "Noto Sans KR", cursive; /* ✅ 이거 추가 */
    font-weight: 700;
    font-size: 22px; /* ✅ 살짝 키워주면 더 자연스러움 */
    color: #5b3f23;
    letter-spacing: -0.5px;
}


.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;
}



/* 카테고리 한 줄 정렬(왼쪽: 이름 / 오른쪽: (숫자) + ✔ ) */
.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;
}

/* =========================================================
   일상의 온도 최종 커스텀
   - 헤더 이미지 구도 유지
   - 제목/부제목 중앙 배치
   - 밑줄 제거
   - 아이보리 + 연레몬 톤
   - 카테고리 아이콘 톤 정리
========================================================= */

:root {
    --bg: #fffdf4;
    --ink: #3f3326;
    --muted: #8a7a63;
    --line: rgba(139, 111, 67, .16);
    --card: rgba(255, 254, 249, .94);
    --shadow: 0 10px 28px rgba(111, 86, 42, .10);
    --radius: 20px;
    --radius2: 16px;
    --max: 1200px;
    --hero-h: 300px;

    --warm-brown: #6b4e2e;
    --soft-brown: #7b684f;
    --lemon: #f3df9a;
    --sage: #7f9a68;
}

body {
    font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 5%, rgba(248, 225, 143, .30), transparent 28%),
        linear-gradient(180deg, #fffdf4 0%, #fffaf0 100%);
}

/* ===== NAV ===== */
.nav {
    background: rgba(255, 254, 249, .88) !important;
    border: 1px solid rgba(139, 111, 67, .13) !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 22px rgba(111, 86, 42, .08);
    backdrop-filter: blur(12px);
}

.nav-logo img {
    border-radius: 10px;
}

.nav-link {
    color: #5f4428 !important;
    font-weight: 800;
    gap: 6px;
    text-decoration: none !important;
}

.nav-link:hover {
    background: rgba(243, 223, 154, .38) !important;
    color: #6b4e2e !important;
}

.nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: #8aa06e;
    font-size: 15px;
    line-height: 1;
}

.nav-home {
    width: 42px;
    justify-content: center;
}

/* ===== HERO : 이미지 전체 구도 안정화 ===== */
header.hero {
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto 18px;

    height: var(--hero-h);

    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    overflow: hidden;

    position: relative;
    z-index: 50;

    background-image: url("./images/header_bg_clean_wide.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;   /* 잘림 방지: 이미지 전체가 헤더 안에 맞게 들어감 */
    background-position: center center !important;
    background-color: #fff8e8 !important;

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

/* 이전에 생겼던 뿌연 네모/오버레이 계열 제거 */
header.hero::before,
header.hero::after,
.hero-inner::before,
.hero-inner::after,
.brand::before,
.brand::after {
    content: none !important;
    display: none !important;
}

.hero-inner {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;

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

    text-align: center !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* 제목 링크 밑줄 제거 */
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:active {
    width: 100%;
    height: 100%;

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

    color: inherit;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* 제목 */
.brand-title {
    display: block !important;
    position: static !important;

    font-family: "Gaegu", "Noto Sans KR", cursive !important;
    font-size: 70px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    color: #5b3f23 !important;
    letter-spacing: -2px !important;

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

    text-decoration: none !important;
    border-bottom: 0 !important;

    text-shadow:
        0 2px 10px rgba(255, 255, 255, .92),
        0 0 1px rgba(255, 255, 255, .95) !important;
}

/* 부제목 */
.brand-sub {
    display: block !important;
    position: static !important;

    margin: 14px 0 0 !important;
    padding: 0 !important;

    transform: none !important;

    font-family: "Noto Sans KR", system-ui, sans-serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;

    color: #6f5b40 !important;
    letter-spacing: -0.4px !important;

    text-align: center !important;
    pointer-events: auto !important;

    text-decoration: none !important;
    border-bottom: 0 !important;

    text-shadow:
        0 2px 8px rgba(255, 255, 255, .9) !important;
}

/* 혹시 브라우저/스킨 기본 a 밑줄이 들어오는 경우까지 제거 */
.brand-title,
.brand-sub,
.brand-title *,
.brand-sub * {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* ===== LAYOUT/CARDS ===== */
.layout {
    gap: 20px;
}

.card,
.page-title,
.post-list,
.article,
.footer {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow) !important;
}

.card-title {
    color: #5f4428;
}

.card-title::after {
    background: rgba(139, 111, 67, .16) !important;
}

.post-title,
.article-title {
    color: #3f3326;
}

.post-title:hover {
    color: #7a5a2f;
    text-decoration: none;
}

.post-meta .cat,
.tag {
    background: #fffaf0 !important;
    border-color: rgba(139, 111, 67, .16) !important;
    color: #6b4e2e !important;
}

.post-desc,
.article-body {
    color: #4f4336;
}

.profile-title,
.profile-meta .profile-title {
    color: #5f4428;
}

.profile-desc a {
    color: #7f9a68;
    font-weight: 700;
}

/* ===== 사이드바 카테고리 아이콘 느낌 ===== */
.card .category_list > li > a {
    color: #5f4428 !important;
    text-decoration: none !important;
}

.card .category_list > li > a:hover {
    background: rgba(243, 223, 154, .32) !important;
}

.card .category_list > li > a::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    margin-right: 6px;
    color: #8aa06e;
    font-size: 15px;
}

.card .category_list > li:nth-child(1) > a::before { content: "⌂"; }
.card .category_list > li:nth-child(2) > a::before { content: "✈"; }
.card .category_list > li:nth-child(3) > a::before { content: "☕"; }
.card .category_list > li:nth-child(4) > a::before { content: "♡"; }
.card .category_list > li:nth-child(5) > a::before { content: "▤"; }

/* ===== 버튼/페이지네이션 ===== */
.kk-num.selected {
    background: #7f9a68 !important;
    color: #fff !important;
}

.kk-page {
    color: #5f4428 !important;
}

.cmt-submit,
.article-nav .nav-btn,
.page-actions a,
.btn {
    background: #fffaf0 !important;
    border-color: rgba(139, 111, 67, .18) !important;
    color: #5f4428 !important;
}

.cmt-submit:hover,
.article-nav .nav-btn:hover,
.page-actions a:hover,
.btn:hover {
    background: rgba(243, 223, 154, .30) !important;
}

/* ===== FOOTER ===== */
.footer {
    background: rgba(255, 254, 249, .88) !important;
    color: #5f4428;
}

.footer-copy,
.footer-links a {
    color: #5f4428 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
    header.hero {
        height: 260px !important;
        background-size: cover !important; /* 모바일은 너무 납작해지지 않게 자연스럽게 */
        background-position: center center !important;
    }

    .nav {
        border-radius: 22px 22px 0 0;
    }

    .nav-main {
        justify-content: center;
        margin-left: 0;
        width: 100%;
    }

    .nav-logo {
        display: none;
    }
}

@media (max-width: 560px) {
    header.hero {
        width: calc(100% - 24px);
        height: 230px !important;
        border-radius: 22px;
        background-size: cover !important;
        background-position: center center !important;
    }

    .brand-title {
        font-size: 44px !important;
        letter-spacing: -1px !important;
    }

    .brand-sub {
        font-size: 14px !important;
        margin-top: 8px !important;
        padding: 0 18px !important;
    }

    .nav-link {
        padding: 8px 9px;
        font-size: 13px;
    }
}



/* ===== 프로필 카드 부분만 수정 ===== */
.profile-img {
    width: 104px;
    height: 104px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(139, 111, 67, .16);
    background: #fffaf0;
}

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

/* 홈페이지로 이동 문구 제거 후 들어가는 부제목 */
.profile-sub {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.45;
    color: #7a684f;
    letter-spacing: -0.3px;
    word-break: keep-all;
}

.profile-desc {
    display: none !important;
}


/* ===== 상단 왼쪽 로고만 수정 ===== */
.nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #5b3f23 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.nav-logo img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 0 !important;
}

.nav-logo-text {
    font-family: "Gaegu", "Noto Sans KR", cursive !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    color: #5b3f23 !important;
    letter-spacing: -0.8px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.nav-logo:hover .nav-logo-text {
    color: #6b4e2e !important;
}



/* 선택된 카테고리 라인 */
.category_list .selected > a::before {
    width: 18px;
    background: linear-gradient(90deg, #d6c48b, #bfa76a);
}

/* subtle underline 효과 */
.category_list a::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: -2px;

    width: 0%;
    height: 1px;

    background: rgba(0,0,0,0.08);

    transition: width 0.35s ease;
}

.category_list a:hover::after {
    width: 100%;
}

/* =========================================================
   ✅ CATEGORY FINAL (프리미엄 + 미니멀 + 타이포 튜닝)
   ========================================================= */

/* 전체 영역 */
.category_list {
    margin-top: 14px;
}

/* 항목 간격 */
.category_list li {
    margin-bottom: 6px;
}

/* ===== 기본 텍스트 ===== */
.category_list a {
    position: relative;
    display: inline-block;

    /* ✅ 핵심: 크기 + 폰트 */
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;

    color: #7a6a55;

    padding-left: 16px;

    transition: all 0.35s cubic-bezier(.4,0,.2,1);
}

/* ===== 왼쪽 라인 ===== */
.category_list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;

    width: 0;
    height: 1px;

    background: linear-gradient(90deg, #e6d8a8, #cdbb7a);

    transform: translateY(-50%);
    transition: width 0.35s cubic-bezier(.4,0,.2,1);
}

/* ===== hover ===== */
.category_list a:hover {
    color: #3f3326;
    transform: translateX(5px);
}

/* hover 시 라인 확장 */
.category_list a:hover::before {
    width: 12px;
}

/* ===== 카운트 숫자 ===== */
.category_list .c_cnt {
    margin-left: 6px;
    font-size: 11px;
    color: #b2a48c;
    transition: all 0.3s ease;
}

/* hover 시 숫자 */
.category_list a:hover .c_cnt {
    color: #8f7f63;
}

/* ===== 현재 카테고리 ===== */
.category_list .selected > a {
    color: #1f1a14;
    font-weight: 500;
}

/* 선택된 라인 */
.category_list .selected > a::before {
    width: 16px;
    background: linear-gradient(90deg, #d6c48b, #bfa76a);
}

/* ===== 은은한 밑줄 효과 ===== */
.category_list a::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -2px;

    width: 0%;
    height: 1px;

    background: rgba(0,0,0,0.08);

    transition: width 0.35s ease;
}

.category_list a:hover::after {
    width: 100%;
}