/* Your CSS inserted here. Ready for Tistory adjustments. */

/* --------------------------------------------------
   Tistory Custom Skin - style.css
   Twitter-style Sidebar + Responsive Gallery
-------------------------------------------------- */

/* 🎨 구글 폰트 임포트 */
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; 
    background: linear-gradient(135deg, #e8ecf3, #ffffff);
    color: #333; 
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Layout */
#wrap {
    display: flex;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background: #ffffff;
}

/* --------------------------------------------------
   Sidebar (Twitter-like)
-------------------------------------------------- */
#sidebar {
    width: 500px;
    padding: 30px 20px;
    position: sticky;
    top: 0;
    height: 100vh;

    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(24px) brightness(1.2);
    -webkit-backdrop-filter: blur(24px) brightness(1.2);

    border-right: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
}

.profile-box {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 5px;
    border: none !important;
}

.profile-img img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
}


/* 닉네임 */
.nickname {
    font-family: 'Pretendard', sans-serif;
    font-size: 17px;
    font-weight: 600;
    margin-top: 10px;
    letter-spacing: -0.3px;
}

.bio {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    color: #777;
    margin-top: 6px;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

.sns-links li {
    margin-top: 10px;
}
.sns-links a {
    font-size: 14px;
    color: #1d9bf0;
}

/* 프로필 이미지 */
.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
}

/* 툴팁 */
.tooltip {
    visibility: hidden;
    opacity: 0;
    background: black;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.avatar-link {
    position: relative;
    display: inline-block;
}

.avatar-link:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* 카테고리 여백 */
.sidebar-nav {
    margin-top: 30px;
    text-align: center;
}

/* 🔥 웹에서는 카테고리 토글 버튼 숨김 */
.mobile-category-toggle {
    display: none;
}

/* 웹에서는 카테고리 항상 표시 */
.sidebar-nav ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    max-height: none;
    opacity: 1;
}
.sidebar-nav li {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.sidebar-nav a {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-nav a:hover {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.35);
}

.sidebar-nav .active a {
    background: rgba(29, 155, 240, 0.12);
    color: #1d9bf0;
    font-weight: 600;
}

/* 1차 카테고리 */
.sidebar-nav > ul > li > a {
    font-weight: 500;
}

/* ================================
   Sidebar Category Fix (FINAL)
================================ */

/* 웹에서만 최상위 카테고리 숨김 */
.sidebar-nav .tt_category > li > a {
    display: none;
}

.sidebar-nav .tt_category > li > ul {
    padding-left: 0;
}

/* 3️⃣ Diet info의 부카테고리(d) 기본 숨김 */
.sidebar-nav .tt_category li ul ul {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

/* 4️⃣ PC: Diet info hover 시 d 표시 */
@media (hover: hover) {
    .sidebar-nav .tt_category li:hover > ul > li > ul {
        max-height: 200px;
        opacity: 1;
    }
}

/* 5️⃣ Mobile: 터치 시 d 표시 */
@media (hover: none) {
    .sidebar-nav .tt_category li:focus-within > ul > li > ul {
        max-height: 200px;
        opacity: 1;
    }
}

/* 6️⃣ d 카테고리 스타일 */
.sidebar-nav .tt_category li ul ul li {
    padding-left: 16px;
    margin-top: 6px;
}

.sidebar-nav .tt_category li ul ul li a {
    font-size: 14px;
    opacity: 0.7;
}

.sidebar-nav .tt_category li ul ul li a:hover {
    opacity: 1;
}

/* 🆕 SNS 아이콘 영역 */
.sns-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 0; /* 🔥 패딩 제거 */
    border-top: none; /* 🔥 바이오 밑 구분선 제거 */
    padding-bottom: 20px; /* 아래쪽 여백 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* 🔥 방명록 아이콘 밑 구분선 추가 */
}
.sns-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    color: #666;
    font-size: 18px;
    transition: all 0.25s ease;
    position: relative;
}

.sns-icon:hover {
    background: rgba(29, 155, 240, 0.12);
    color: #1d9bf0;
    transform: translateY(-2px);
}

/* 방명록 아이콘 호버 색상 */
.sns-icon:nth-child(1):hover {
    background: rgba(255, 107, 107, 0.12);
    color: #ff6b6b;
}

/* Spin 메시지 아이콘 호버 색상 */
.sns-icon:nth-child(2):hover {
    background: rgba(138, 43, 226, 0.12);
    color: #8a2be2;
}

/* 툴팁 효과 (선택사항) */
.sns-icon::after {
    content: attr(title);
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sns-icon:hover::after {
    opacity: 1;
}

/* 바이오 - 카테고리 사이 구분선 */
.sidebar-nav::before {
    display: none; /* 🔥 구분선 제거 */
}


/* --------------------------------------------------
   Main Content
-------------------------------------------------- */
#container {
    flex: 1;
    padding: 40px;
    background: #ffffff;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; /* 🔥 추가 */
}

#content {
    background: #ffffff;
}

main {
    background: #ffffff;
}

/* --------------------------------------------------
   Gallery List (Pinterest Masonry Layout)
-------------------------------------------------- */
.post-gallery {
    max-width: 1200px;
    margin: 0 auto;
}

/* 🎨 섹션 타이틀 스타일 개선 */
.section-title {
    font-family: 'Outfit', 'Pretendard', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    margin-bottom: 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

/* ================================
   홈 = 갤러리형 / 카테고리 = 리스트형 분기
================================ */

/* 🏠 기본 갤러리 스타일 (모든 페이지) */
.gallery-list {
    column-count: 3;
    column-gap: 25px;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 25px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform .2s;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ================================
   HOME (Pinterest) - 비율 자유
================================ */
.page-home .gallery-item img {
    width: 100%;
    height: auto !important;
    object-fit: contain;
}

.gallery-item h3 {
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
}

/* 리스트 콘텐츠는 기본적으로 숨김 */
.list-content {
    display: none;
}

/* 📋 카테고리/검색 페이지: 리스트형으로 변경 */
.page-category .gallery-list,
.page-search .gallery-list {
    column-count: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.page-category .gallery-item,
.page-search .gallery-item {
    break-inside: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 20px;
    margin-bottom: 0;
}

.page-category .gallery-item:hover,
.page-search .gallery-item:hover {
    transform: translateX(4px);
}

.page-category .gallery-item a,
.page-search .gallery-item a {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
}

/* 썸네일 영역 */
.page-category .list-thumbnail,
.page-search .list-thumbnail {
    flex-shrink: 0;
    width: 200px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.page-category .list-thumbnail img,
.page-search .list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 콘텐츠 영역 표시 */
.page-category .list-content,
.page-search .list-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

/* 제목 */
.page-category .gallery-item h3,
.page-search .gallery-item h3 {
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #1a1a1a;
}
/* ================================
   LIST (Category / Search)
================================ */

/* 썸네일 박스 */
.page-category .list-thumbnail,
.page-search .list-thumbnail {
    flex-shrink: 0;
    width: 200px;
    aspect-ratio: 16 / 9; /* ✅ 여기서만 비율 고정 */
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

/* 썸네일 이미지 */
.page-category .list-thumbnail img,
.page-search .list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 썸네일 없거나 로딩 전 상태 방어 */
.gallery-item img:not([src]),
.gallery-item img[src=""] {
    visibility: hidden;
}

.gallery-item img {
    background: #f2f2f2;
}

/* 요약 (있으면 표시) */
.page-category .list-summary,
.page-search .list-summary {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 메타 정보 */
.page-category .list-meta,
.page-search .list-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 10px;
}

/* --------------------------------------------------
   Article View (글 상세 페이지)
-------------------------------------------------- */
.article-detail-wrap {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 🎨 글 제목 스타일 개선 */
.article-title {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.8px;
    color: #1a1a1a;
    margin-bottom: 16px;
    word-break: keep-all;
}

/* 🎨 메타 정보 스타일 개선 */
.article-meta {
    font-family: 'Outfit', 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #999;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
}

/* 🎨 본문 내용 스타일 개선 */
.article-content {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: -0.2px;
    color: #333;
}

.article-tags {
    margin-top: 30px;
    font-size: 14px;
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */
#footer {
    text-align: center;
    padding-top: 40px;
    margin-top: auto;
    font-size: 13px;
    opacity: 0.8;
    font-family: 'Pretendard', sans-serif;
}

/* ================================
   HOME Pinterest Gallery Override
================================ */

/* ✅ HOME에서만 갤러리 */
.page-home #content .article-list {
    column-count: 3;
    column-gap: 25px;
}

/* 스크롤 버튼 */
.scroll-buttons {
    position: fixed;
    right: 20px;
    bottom: 35px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.scroll-buttons button {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    cursor: pointer;
	color: #000000 !important;
    background: #ffffff !important;
    backdrop-filter: blur(12px) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);

    transition: all 0.25s ease;
}

.scroll-buttons button:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

.scroll-buttons button:active {
    transform: scale(0.92);
}

/* 텍스트 드래그 시 블러 효과 */
::selection {
    color: transparent;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
    transition: all 250ms ease-in;
}

::-moz-selection {
    color: transparent;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
    transition: all 250ms ease-in;
}

/* ================================
   검색창 (그리드 정렬 + 글래스모피즘)
================================ */
.search-section {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* 오른쪽 정렬 */
    padding: 20px 40px 10px 0; /* 상단 20px, 오른쪽 40px 여백 확보 */
    margin-bottom: 20px; /* 제목과의 간격 생성 */
}
.search-container {
    /* position: absolute; 를 삭제했습니다. 겹침 방지 */
    z-index: 100;
}

.search-form {
    display: flex;
    align-items: center;
    /* 투명 유리 효과 (Glassmorphism) */
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: 24px;
    padding: 6px 8px 6px 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5); /* 흰색 반투명 테두리 */
    transition: all 0.3s ease;
}

/* 제목(Discover Stories)과의 간격을 확실히 하기 위한 코드 */
.section-title {
    margin-top: 10px; /* 검색창과의 거리 */
    padding-top: 10px;
    clear: both; /* 주변 요소와의 간섭 차단 */
}
/* 포커스 시 효과 */
.search-form:focus-within {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    /* 썸네일 그리드와 맞추기 위해 기본 길이를 짧게 고정 (이미지의 돋보기 아이콘 위치 고려) */
    width: 140px; 
    padding: 6px 0;
    color: #333;
    transition: width 0.3s ease;
}

/* 포커스 시에도 너무 길어지지 않게 조정 */
.search-input:focus {
    width: 170px;
}

.search-input::placeholder {
    color: #888;
}

/* 돋보기 버튼: 파란색 제거 및 무채색 투명 스타일 */
.search-button {
    border: none;
    background: rgba(0, 0, 0, 0.05); /* 연한 회색 투명 */
    color: #555; /* 진한 회색 */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-size: 14px;
}

.search-button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
    transform: scale(1.05);
}

.search-button:active {
    transform: scale(0.95);
}

/*검색결과 없을 시*/
.post-gallery .section-title:only-child {
    text-align: center;
    padding: 100px 0;
    color: #bbb;
    border-bottom: none;
}

/* ===== DM(방명록) 스타일 최종 통합본 ===== */

/* 1. 기본 레이아웃 및 가로폭 */
.page-guestbook #content { background: #fff !important; padding: 0 !important; }

#container { padding-left: 10px !important; }

.article-detail-wrap, .dm-page {
    max-width: 1000px !important; 
    width: 95% !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 방명록 페이지 전체 레이아웃 */
.dm-page { 
    max-width: 600px; 
    margin: 0 auto; 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    min-height: 80vh; 
    border-left: 1px solid #eff3f4; 
    border-right: 1px solid #eff3f4; 
}

/* 상단 프로필 섹션 */
.dm-profile-header { 
    padding: 10px 15px; 
    border-bottom: none; 
    text-align: center; 
}

.header-back { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    font-size: 18px; 
    font-weight: bold; 
    margin-bottom: 20px; 
}

.dm-main-avatar { 
    width: 64px; 
    height: 64px; 
    border-radius: 50%; 
    margin-bottom: 8px; 
}

.dm-main-name { 
    font-size: 18px; 
    font-weight: 800; 
    color: #0f1419; 
}

.dm-main-handle { 
    font-size: 15px; 
    color: #536471; 
    margin-bottom: 12px; 
}

.view-profile-btn { 
    background: transparent; 
    border: 1px solid #cfd9de; 
    padding: 8px 16px; 
    border-radius: 9999px; 
    font-weight: 700; 
    font-size: 14px; 
    cursor: pointer;
}

/* 날짜 구분선 */
/* DM 날짜 스타일: 트위터 DM 스타일 적용 */
.dm-date-only, 
.dm-date-separator {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    align-items: center;
    margin: 20px 0;
    font-size: 13px; /* 이미지와 유사한 크기 */
    font-weight: normal !important; /* 굵게 하지 않음 */
    color: #536471; /* 트위터 특유의 회색조 */
    border: none !important; /* 선 제거 */
    background: none !important;
}

.dm-profile-summary { 
    text-align: center; 
    padding: 40px 0 20px 0 !important; 
    border-bottom: 1px solid #eff3f4; 
}

.summary-avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    object-fit: cover; 
}

.summary-name { 
    font-weight: 800; 
    font-size: 18px; 
    margin-top: 10px; 
}

.summary-id::after { 
    content: "@TXTMNTS"; 
    font-size: 16px; 
    color: #536471; 
}

.summary-date, .view-profile-btn { 
    display: none !important; 
}

.dm-divider-date { 
    margin-top: 20px; 
    color: #536471; 
    font-size: 13px; 
    font-weight: 500; 
}

.dm-time { 
    font-size: 11px; 
    color: #536471; 
    white-space: nowrap; 
    margin-bottom: 4px; 
}

/* 말풍선 UI */
.dm-body-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 🔥 드롭다운이 가려지지 않도록 overflow 설정 */
.dm-list-container { 
    padding: 20px 10px;
    overflow: visible !important;
}

.dm-bubble-row { 
    display: flex; 
    margin-bottom: 6px;
    position: relative;
    overflow: visible !important;
}

/* 🔥 드롭다운이 열려있으면 해당 row의 z-index를 최상위로 */
.dm-bubble-row:has(.dm-dropdown.show) {
    z-index: 10000 !important;
}

.dm-bubble-group {
    max-width: 80%;
    overflow: visible !important;
}

.dm-bubble-content { 
    position: relative;
    overflow: visible !important;
}

.dm-message-text { 
    padding: 12px 16px; 
    border-radius: 20px; 
    font-size: 15px; 
    line-height: 1.5; 
    background: #eff3f4; 
    color: #0f1419;
}

.dm-time-stamp { 
    font-size: 11px; 
    color: #536471; 
    margin-top: 5px; 
    padding: 0 5px; 
}

/* 4. 주인(오른쪽/검정) vs 손님(왼쪽/회색) */
.dm-bubble-row.admin { 
    justify-content: flex-end !important; 
    flex-direction: row !important;
}

.dm-bubble-row.admin .dm-message-text { 
    background: #000 !important; 
    color: #fff !important;
    border-bottom-right-radius: 2px;
}

.dm-bubble-row.admin .dm-bubble-content { 
    flex-direction: row-reverse !important; 
}

.dm-bubble-row:not(.admin) { 
    justify-content: flex-start !important; 
}

.dm-bubble-row:not(.admin) .dm-message-text { 
    background: #eff3f4 !important; 
    color: #0f1419 !important;
    border-bottom-left-radius: 2px;
}

.dm-bubble-row:not(.admin) .dm-bubble-content { 
    flex-direction: row !important; 
}


.dm-bubble-row.admin.reply {
    margin-top: 4px;
    padding-left: 40px;
}


/* 5. 수정/삭제 버튼 (마우스 올릴 때만 표시) */
.dm-control {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
    font-size: 10px;
    opacity: 0; /* 평소엔 숨김 */
    transition: opacity 0.2s;
}

.dm-message-text:hover .dm-control { 
    opacity: 1; 
} /* 호버 시 노출 */

.dm-control a { 
    text-decoration: none; 
    cursor: pointer; 
    color: inherit; 
}

.dm-bubble-row.admin .dm-control a { 
    color: #fff; 
    opacity: 0.7; 
}

/* 🔥 호버 도구 모음 - 말풍선 바로 옆에 위치 */
.dm-hover-tools {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.6s;
    z-index: 10;
}

.dm-bubble-content:hover .dm-hover-tools {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.dm-hover-tools:has(.dm-dropdown.show) {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    z-index: 10001 !important;
}

.tool-icon { 
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: #657786;
    border-radius: 4px;
    transition: background 0.2s;
}

.tool-icon:hover {
    background: rgba(29, 161, 242, 0.1);
    color: #1da1f2;
}

/* 🔥 드롭다운 메뉴 (수정, 삭제, 복사) */
.more-menu-wrap { 
    position: relative;
}

.dm-dropdown { 
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10002;
    min-width: 160px;
    display: none;
    margin-top: 4px;
}

.dm-dropdown.show {
    display: block;
}

/* 🔥 맨 아래 메시지는 드롭다운이 위로 열림 */
.dm-bubble-row:last-child .dm-dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}

.dm-dropdown a { 
    display: block;
    padding: 10px 16px;
    color: #14171a;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}

.dm-dropdown a:hover { 
    background: #f7f9fa;
}

.delete-link { 
    color: #e0245e !important;
}

/* 🔥 수정 모드 스타일 */
.edit-mode-container {
    width: 100%;
}

.edit-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #1da1f2;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    font-size: inherit;
}

.edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

.edit-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.save-btn {
    background: #1da1f2;
    color: white;
}

.save-btn:hover {
    background: #1a91da;
}

.cancel-btn {
    background: #e1e8ed;
    color: #14171a;
}

.cancel-btn:hover {
    background: #d1d8dd;
}

/* 6. 하단 입력바 */
.dm-input-area {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 15px;
    border-top: 1px solid #eff3f4;
}

.dm-input-container {
    width: 100%;
}

.dm-guest-info-row { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 10px; 
}

.dm-info-input { 
    border: 1px solid #cfd9de; 
    padding: 6px 12px; 
    border-radius: 9999px; 
    font-size: 13px; 
    width: 65px; 
    outline: none;
}

.dm-info-input:focus { 
    border-color: #1d9bf0; 
}

.dm-input-box-wrap { 
    background: #eff3f4; 
    border-radius: 15px; 
    padding: 10px 15px; 
    display: flex; 
    flex-direction: column;
}

.dm-text-input { 
    width: 100%; 
    border: none; 
    background: transparent; 
    resize: none; 
    min-height: 40px; 
    font-size: 14px; 
    outline: none; 
    padding: 5px 0;
}

.dm-input-bottom-actions { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 10px; 
    border-top: 1px solid rgba(0,0,0,0.05); 
    padding-top: 8px;
}

/* 🔥 비밀댓글 체크박스 강제 활성화 */
.secret-label { 
    font-size: 13px; 
    color: #536471; 
    cursor: pointer !important;
    display: flex; 
    align-items: center; 
    gap: 5px;
    opacity: 1 !important;
    pointer-events: auto !important;
}

input[name*="secret"] {
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

.dm-send-btn { 
    border: none; 
    background: transparent; 
    color: #1d9bf0; 
    cursor: pointer; 
    font-size: 18px; 
    transition: transform 0.2s; 
}

.dm-send-btn:hover { 
    transform: scale(1.1); 
}

/* ================================
   CENTER ALIGN FIX (NO DESIGN CHANGE)
   게시글 + DM 중앙 정렬 보정
================================ */

/* 1️⃣ 게시글 상세 중앙 정렬 */
.article-detail-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2️⃣ DM 페이지 중앙 정렬 */
.page-guestbook .dm-page {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 수정/삭제 클릭 시 뜨는 팝업 기본 위치 확보 */
#guestbook_password_layer {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff !important;
    border: 1px solid #eff3f4 !important;
    padding: 20px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    z-index: 99999 !important;
}

/* --------------------------------------------------
    Responsive (Mobile) - 새 디자인 적용
-------------------------------------------------- */
@media screen and (max-width: 900px) {
    /* 1. 기본 레이아웃 재설정 */
    #wrap { flex-direction: column; }
    
	
/* 1. 카테고리 목록: 들여쓰기 제거 및 폰트 통일 */
.category_list li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 12px !important; /* 모든 카테고리 간격 통일 */
}

.category_list li a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #555 !important;
}

/* 2. ALL(전체보기) 메뉴 스타일 및 간격 */
.link_tit {
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 12px !important; /* 카테고리와 동일한 간격 */
    display: block;
    padding-left: 0 !important;
}

/* 3. 'TAG' 메뉴만 베이비핑크 색상 (폰트/굵기는 동일) */
.link_tit[href*="tag"], 
.menu_id_tag a,
.tag_title,
a[href="/tag"],
a[href*="/tag"] { 
    color: #FFB6C1 !important; /* 베이비핑크 */
    font-weight: 400 !important; /* 다른 카테고리와 동일 */
    font-size: 14px !important; /* 다른 카테고리와 동일 */
    margin-bottom: 12px !important; /* 간격 통일 */
}

    /* 3. 개별 태그(태그 클라우드)들 스타일 통일 */
    .tag_cloud a, 
    .tags a {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #888 !important; /* 태그 단어들은 일반 색상 */
    }

    /* 4. ALL(전체보기) 및 기타 메뉴 폰트 스타일 통일 */
    .link_tit {
        font-size: 14px !important;
        font-weight: 400 !important;
        padding-left: 0 !important;
        margin-bottom: 15px !important;
        display: block;
    }

    /* 5. 불필요한 숫자(c_cnt) 및 아이콘 제거 확인 */
    .c_cnt, .ico_new, img[src*="new_ico"] {
        display: none !important;
    }

    /* 기존 사이드바 숨기기 (PC용 컨텐츠) */
    .pc-sidebar-content { display: none !important; }
    #sidebar { 
        position: fixed; top: 0; left: 0; width: 100% !important; height: auto !important; 
        background: transparent; backdrop-filter: none !important; z-index: 9999; border: none; box-shadow: none; padding: 0;
		box-shadow: none !important;         /* 🔥 그림자 제거 */
	}
	
	

    /* 2. 모바일 상단 헤더 (프로필 & 토글버튼) */
    .mobile-only-header { 
        display: flex !important; justify-content: space-between; align-items: flex-start; 
        padding: 15px; width: 100%; box-sizing: border-box; background: transparent !important
    }
    
    .m-profile-set { 
    display: flex !important; 
    flex-direction: row !important; /* 가로로 배치 */
    align-items: center; 
    gap: 12px; 
}
    .m-avatar-img { 
    width: 65px; 
    height: 65px; 
    border-radius: 18px; 
    object-fit: cover; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    border: 2px solid #fff;
}
    /* 기존 .m-sns-bar의 배경과 테두리를 투명하게 수정 */
    .m-sns-bar-vertical {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    gap: 4px; /* 아이콘 사이 좁은 간격 */
}
.m-sns-bar-vertical a {
    color: #555;
    font-size: 14px; /* 아이콘 크기 */
    background: rgba(255, 255, 255, 0.8); /* 살짝 배경 제공 */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
}

.page-category .list-summary, 
    .page-search .list-summary,
    .page-category .list-meta, 
    .page-search .list-meta,
    .list-body p, /* 일반적인 요약글 태그 */
    .summary { 
        display: none !important; 
    }
    
    /* 추가로 헤더 영역 자체에 배경이 잡혀있을 경우를 대비해 투명화 */
    /* 2. 모바일 상단 헤더 (프로필 & 토글버튼) - 수정본 */
.mobile-only-header { 
    display: flex !important; 
    justify-content: space-between; 
    align-items: center; /* 중앙 정렬로 변경 */
    padding: 15px; 
    width: 100%; 
    box-sizing: border-box; 
    background: transparent !important;
}

    /* 우측 메뉴 버튼 (=) */
    .m-menu-btn { 
        width: 44px; height: 44px; background: #FFD6E0; color: #fff; border: none; 
        border-radius: 50%; font-size: 20px; cursor: pointer; 
        box-shadow: 0 4px 10px rgba(51,102,255,0.3); margin-top: 5px;
    }

    /* 3. 우측 드롭다운 메뉴 창 */
    .m-dropdown-menu { 
        position: absolute; top: 75px; right: 15px; width: 260px; 
        background: #fff; border-radius: 24px; padding: 25px; 
        box-shadow: 0 15px 35px rgba(0,0,0,0.15); display: none; z-index: 10001;
    }
    .m-dropdown-menu.active { display: block; }

    /* 검색창 & 카테고리 라벨 */
    .m-label { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 12px; font-family: 'Pretendard', sans-serif; }
    .m-search-wrap { margin-bottom: 30px; }
    .m-search-box { 
        background: #f1f3f5; border-radius: 12px; padding: 10px 15px; 
        display: flex; align-items: center; justify-content: space-between; 
    }
    .m-search-box input { border: none; background: transparent; width: 85%; outline: none; font-size: 14px; }
    .m-search-box i { color: #adb5bd; font-size: 15px; }

    /* 카테고리 리스트 */
    .m-cat-list ul { list-style: none; padding: 0; }
    .m-cat-list ul li { margin-bottom: 10px; }
    .m-cat-list ul li a { color: #666; font-size: 15px; text-decoration: none; font-weight: 500; }
    .m-cat-list .sub_category_list { padding-left: 15px; margin-top: 8px; display: none; }
    /* 터치/활성화 시 하위 카테고리 보이기 */
    .m-cat-list li:active > .sub_category_list,
    .m-cat-list li:hover > .sub_category_list { display: block; }

    /* 4. 본문 영역 조절 */
    #container { 
        margin-left: 0 !important; width: 100% !important; 
        padding: 100px 15px 40px 15px !important; box-sizing: border-box;
    }

    /* 5. 홈 화면 갤러리 (2열 정사각형) */
    .page-home .gallery-list { 
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important; padding: 0 !important;
		margin-top: 30px !important; /* 헤더와의 간격 */
		padding-top: 20px !important;
    }
    .page-home .gallery-item { 
        aspect-ratio: 1/1 !important; margin-bottom: 0 !important;
        border-radius: 18px !important; overflow: hidden; border: none !important;
    }
    .page-home .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
    .page-home .list-content, .page-home .section-title { display: none !important; }

	 .page-home #container {
    padding-top: 120px !important; /* 기본 100px에서 120px로 증가 */
	}
	
    /* 배경 흐리게 (오버레이) 숨김 처리 */
    body::before { display: none !important; }
}

심플 페이지네이션 디자인 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
	border: none !important;
    background: transparent !important;
    padding: 30px 0 !important;
    text-align: center;
	width: 100%;    /* 전체 너비 사용 */
    /* 제미나이 시스템 폰트 스타일 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 홈 화면에서는 페이지 표시 안 함 */
.page-home .pagination {
    display: none !important;
}

.pagination a, 
.pagination span,
.pagination .num {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: 13px;
    color: #aaa;
    font-weight: 300;
    text-decoration: none;
    padding: 5px;
    border: none !important; /* 숫자 주위 선 제거 */
}

/* 현재 페이지만 검정색 강조 (-1- 형태) */
.pagination .selected,
.pagination b,
.pagination strong {
    color: #000 !important;
    font-weight: 600;
	font-size: 14px !important;
}
/* 현재 숫자 앞뒤에 대시(-) 추가 */
.pagination .selected::before, 
.pagination b::before,
.pagination strong::before { 
    content: "-"; 
    margin-right: 2px;
}
.pagination .selected::after, 
.pagination b::after,
.pagination strong::after { 
    content: "-"; 
    margin-left: 2px;
}

/* 1. 카테고리 다른 글 (이전글, 다음글) 영역 선 제거 */
.another_category, 
.another_category h4, 
.another_category table, 
.another_category th, 
.another_category td {
    background-color: transparent !important; /* 배경 흰색 제거 */
    border: none !important; /* 모든 선 제거 */
    border-collapse: collapse !important;
}

/* 2. 페이지네이션 (1, 2, 3 번호) 영역 선 제거 및 텍스트 수정 */
.pagination {
    border: none !important;
    padding: 20px 0 !important;
    text-align: center;
}

.pagination::before,
.pagination::after {
    display: none !important;
}

/* 3. 번호 리스트 및 이전/다음 버튼 스타일 */
.pagination li, 
.pagination a, 
.pagination span {
    border: none !important;
    font-weight: 400 !important;
}

/* 이전/다음 글자 스타일 (요청하신 11px 적용) */
.pagination .prev, 
.pagination .next,
.pagination .prev-page,
.pagination .next-page {
    font-size: 11px !important;
    letter-spacing: 1px;
    color: #ccc !important;
    text-transform: uppercase;
}

/* 현재 페이지 번호 스타일 (선택사항: 깔끔하게 강조) */
.pagination .selected {
    color: #333 !important;
    font-weight: 600 !important;
}

/* 공유 / 분석 버튼 제거 */
.article-share,
.btn_share,
.share_layer,
.btn_analyze,
.article-analyze,
.article_statistics {
  display: none !important;
}

/* 공감 버튼만 표시 */
.btn_like,
.article-like {
  display: inline-flex !important;
}

.post-btn-wrap .btn:not(.btn_like) {
  display: none !important;
}

/* 4. 모바일 환경에서의 폰트 사이즈 미세 조정 */
@media screen and (max-width: 768px) {
	display: -webkit-box;
    -webkit-line-clamp: 2;    /* 제목을 최대 2줄로 제한 */
    -webkit-box-orient: vertical;
    overflow: hidden;         /* 2줄 넘치는 글자 숨김 */
	word-break: break-all;
    .post-item .title { font-size: 11px !important; }
    .post-item .excerpt { font-size: 11px !important; }
    .entry-content { font-size: 12px !important; }
	
	/* 프로필 세트 가로 정렬 유지 */
    .m-profile-set {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px; /* 간격 살짝 축소 */
    }

    /* 세로 아이콘 바 유지 */
    .m-sns-bar-vertical {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px;
    }

    .m-sns-bar-vertical a {
        font-size: 14px; /* 아이콘 크기 살짝 축소 */
        width: 24px;
        height: 24px;
    }
	  /* 태그, 카테고리, 검색 페이지 목록 */
    .page-tag .gallery-list,
    .page-category .gallery-list,
    .page-search .gallery-list {
        padding: 0 15px;
    }
    
    /* 목록 아이템: 가로 배치 */
    .page-tag .gallery-item,
    .page-category .gallery-item,
    .page-search .gallery-item {
        border-bottom: 1px solid #eff3f4;
        padding: 12px 0 !important;
        margin: 0 !important;
    }
    
    .page-tag .gallery-item a,
    .page-category .gallery-item a,
    .page-search .gallery-item a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* 썸네일: 작은 정사각형 */
    .page-tag .list-thumbnail,
    .page-category .list-thumbnail,
    .page-search .list-thumbnail {
        width: 70px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background-color: #f7f9fa !important;
    }

    .page-tag .list-thumbnail img,
    .page-category .list-thumbnail img,
    .page-search .list-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 제목 영역 */
    .page-tag .list-content,
    .page-category .list-content,
    .page-search .list-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }
    
    /* 제목: 최대 2줄 */
    .page-tag .list-title,
    .page-category .list-title,
    .page-search .list-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #0f1419 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: keep-all !important;
    }
    
    /* 요약글 숨김 */
    .page-tag .list-summary,
    .page-category .list-summary,
    .page-search .list-summary {
        display: none !important;
    }
	/* ================================
       이전글/다음글 네비게이션
    ================================ */
    
    /* 🎨 모바일 이전/다음글 네비게이션 디자인 */
    .prev-next-navigation {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 40px !important;
        margin: 30px 15px 20px 15px !important;
        padding: 15px 0 !important;
        border-top: 1px solid #eff3f4 !important;
        border-bottom: 1px solid #eff3f4 !important;
    }
    
    .prev-next-navigation a {
		display: inline-flex;
        text-decoration: none !important;
        color: #8899a6 !important;
        font-size: 7pt !important;
        font-weight: 400 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        transition: all 0.2s ease !important;
    }
	.prev-next-navigation a {
	  font-size: 11px;
	  letter-spacing: 1px;
	  color: #bbb;
	  text-decoration: none;
	  text-transform: uppercase;
}
	
    .prev-next-navigation a:empty {
		display: none !important;
	}
    .prev-next-navigation a:hover,
    .prev-next-navigation a:active {
        color: #1da1f2 !important;
    }
    
    /* 화살표 스타일 */
    .prev-next-navigation .btn-prev::before {
        content: "<" !important;
        font-size: 7pt !important;
        margin-right: 2px !important;
    }
    
    .prev-next-navigation .btn-next::after {
        content: ">" !important;
        font-size: 7pt !important;
        margin-left: 2px !important;
    }
    
    /* 버튼이 없을 때 숨김 */
    .prev-next-navigation:empty {
        display: none !important;
    }
}

/* 아주 작은 화면 대응 */
@media screen and (max-width: 600px) {
    .m-avatar-img { width: 55px; height: 55px; }
    #container { padding-top: 90px !important; }
    .m-dropdown-menu { width: calc(100% - 30px); right: 15px; }
	.m-avatar-img { 
        width: 55px !important; 
        height: 55px !important; 
    }

    /* 헤더 상단 여백 조절 */
    #container { 
        padding-top: 90px !important; 
    }

    /* 아이콘 크기 및 간격 미세 조정 */
    .m-sns-bar-vertical {
        gap: 4px;
    }

    .m-sns-bar-vertical a {
        font-size: 13px;
        width: 22px;
        height: 22px;
    }
    
    /* 드롭다운 메뉴 너비 꽉 차게 */
    .m-dropdown-menu { 
        width: calc(100% - 30px); 
        right: 15px; 
    }
}
/*디엠 페이지*/
.dm-paging-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0 40px;
}

.dm-paging-wrap a,
.dm-paging-wrap span {
  margin: 0 4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e1e8ed;
  color: #dee2e6;
  text-decoration: none;
  font-size: 13px;
}

.dm-paging-wrap .selected {
  background: #1da1f2;
  color: #fff;
  border-color: #1da1f2;
}

.dm-guest-info-row input {
  flex: 1;
  min-width: 0;
}

/* ============================================
   🔥 관리자 말풍선 오른쪽 정렬 + 검은색
   style.css 파일 맨 아래에 추가하세요!
============================================ */

/* 관리자 말풍선 검은색 */
.dm-bubble-row.guest_admin .dm-message-text,
.dm-bubble-row.admin .dm-message-text {
    background: #000000 !important; /* 검은색 */
    color: #ffffff !important;
    border-radius: 18px 18px 4px 18px !important;
}

/* 삭제 애니메이션 */
.dm-bubble-row {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 방문자 댓글: 왼쪽 정렬 + 회색 말풍선 */
.dm-bubble-row.guest_general { 
    justify-content: flex-start !important; 
    padding-right: 50px !important;
    padding-left: 10px !important;
}

.dm-bubble-row.guest_general .dm-bubble-group {
    align-items: flex-start !important;
}

.dm-bubble-row.guest_general .dm-message-text { 
    background: #eff3f4 !important; 
    color: #0f1419 !important;
    border-radius: 18px 18px 18px 4px !important;
}

.dm-bubble-row.guest_general .dm-bubble-content { 
    flex-direction: row !important; 
}

.dm-bubble-row.guest_general .dm-time-stamp {
    text-align: left !important;
}

/* 관리자 댓글: 오른쪽 정렬 */
.dm-bubble-row.guest_admin,
.dm-bubble-row.admin { 
    justify-content: flex-end !important; 
    padding-left: 50px !important;
    padding-right: 10px !important;
}

.dm-bubble-row.guest_admin .dm-bubble-group,
.dm-bubble-row.admin .dm-bubble-group {
    align-items: flex-end !important;
}

.dm-bubble-row.guest_admin .dm-bubble-content,
.dm-bubble-row.admin .dm-bubble-content { 
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

.dm-bubble-row.guest_admin .dm-time-stamp,
.dm-bubble-row.admin .dm-time-stamp {
    text-align: right !important;
    color: #8899a6 !important;
}

/* 관리자 호버 툴 위치 조정 */
.dm-bubble-row.guest_admin .dm-hover-tools,
.dm-bubble-row.admin .dm-hover-tools {
    position: relative;
    right: auto;
    left: 8px;
}

/* 답글 여백 */
.dm-bubble-row.guest_admin.reply,
.dm-bubble-row.admin.reply {
    margin-top: 4px;
    padding-left: 70px;
}

.dm-bubble-row.guest_admin .reply-target,
.dm-bubble-row.admin .reply-target {
    text-align: right;
    font-size: 12px;
    color: #8899a6;
    margin-bottom: 4px;
}

/* 모바일 반응형 */
@media screen and (max-width: 900px) {
    .dm-bubble-row.guest_admin.reply,
    .dm-bubble-row.admin.reply {
        padding-left: 50px;
    }
    
    .dm-bubble-row.guest_general {
        padding-right: 30px;
    }
    
    .dm-bubble-row.guest_admin,
    .dm-bubble-row.admin {
        padding-left: 30px;
    }
	
}

/* 기본 상태: 모바일용 요소는 숨김 */
.mobile-only-header { display: none; }

@media (max-width: 768px) {

  /* 📱 모바일: 완전 밀착 정사각형 그리드 */
  .page-home .gallery-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;                 /* 🔥 여백 제거 */
    padding: 0 !important;
    margin: 0 !important;
  }

  .page-home .gallery-item {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;    /* 🔥 정사각형 고정 */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: none !important;
  }

  /* 썸네일 감싸는 div */
  .page-home .list-thumbnail {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 이미지 */
  .page-home .list-thumbnail img {
    width: 100% !important;
    height: 100% !important;           /* 🔥 높이 강제 */
    object-fit: cover !important;      /* 🔥 검은 여백 제거 */
    display: block !important;
  }

  /* 텍스트 완전 제거 */
  .page-home .section-title,
  .page-home .list-content,
  .page-home .list-title,
  .page-home .list-summary {
    display: none !important;
  }
}

/* 1. 글 목록(리스트)의 제목과 요약 폰트 수정 */
.post-item .title,
.post-item .excerpt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 목록 제목: 검정색, 600 두께 */
.post-item .title {
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: -0.5px;
}

/* 목록 요약: 회색, 300 두께, 제미나이보다 작은 사이즈 */
.post-item .excerpt {
    color: #888 !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    line-height: 1.6;
}

/* 2. 게시글 본문 상세 페이지 폰트 수정 */
.entry-content,
.article-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 본문 제목: 검정색 */
.article-title {
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 20px !important;
}

/* 본문 내용: 회색, 300 두께, 작은 사이즈 */
.entry-content,
.entry-content p,
.entry-content span {
    color: #888 !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    line-height: 1.8;
}
/* 태그 클라우드 섹션 디자인 */
.tag-cloud-section {
    padding: 20px;
    max-width: 100%;
}

/* 태그 타이틀 (Tags 글자) - 기존 디자인과 통일감을 위해 */
.tag-cloud-section .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #14171a;
}

/* 태그 리스트 레이아웃: 가로로 나열되다 줄바꿈 */
.tag-list {
    display: flex;
    flex-wrap: wrap; /* 가로가 꽉 차면 아래로 넘김 */
    gap: 8px;       /* 태그 사이 간격 */
    list-style: none;
    padding: 0;
}

/* 개별 태그(#단어) 디자인 */
.tag-list li a {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f0f2f5; /* 연한 회색 배경 */
    color: #5b7083;            /* 차분한 글자색 */
    font-size: 10pt !important; /* 요청하신 10pt 크기 */
    border-radius: 20px;       /* 둥근 테두리 */
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* 태그 앞에 # 붙이기 */
.tag-list li a::before {
    content: "#";
}

/* 마우스 올렸을 때 효과 */
.tag-list li a:hover {
    background-color: #e1e8ed;
    color: #1da1f2;            /* 트위터 느낌의 파란색 포인트 */
    border-color: #1da1f2;
}

/* 태그 클라우드에서 선택된 태그 강조 (필요 시) */
.tag-list li a.selected {
    background-color: #1da1f2;
    color: #ffffff;
}

/* 모바일 대응: 여백 조정 */
@media screen and (max-width: 768px) {
    .tag-cloud-section {
        padding: 15px;
    }
    .tag-list {
        gap: 6px;
    }
    .tag-list li a {
        padding: 5px 10px;
    }
	.page-tag .gallery-item {
    border-bottom: 1px solid #eff3f4 !important;
    padding: 12px 0 !important;
    margin: 0 !important;
  }
.page-tag .gallery-item a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* 썸네일 크기 = 일반 카테고리와 동일 */
  .page-tag .list-thumbnail {
    width: 70px !important;
    height: 70px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .page-tag .list-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 📌 제목 스타일 통일 (핵심) */
  .page-tag .list-title,
  .page-tag .gallery-item h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #0f1419 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;   /* ✅ 2줄 제한 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    margin: 0 !important;
    word-break: keep-all !important;
  }

  /* 요약 / 메타 전부 숨김 (카테고리와 동일) */
  .page-tag .list-summary,
  .page-tag .list-meta {
    display: none !important;
  }
	
}
/* 태그 페이지 전용 리스트 스타일 - 더 크게 수정 */
.page-tag .gallery-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 20px;
}

.page-tag .gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid #eff3f4; /* 트위터 스타일 연한 구분선 */
    padding: 20px 0; /* 위아래 여백을 늘려 시원하게 */
    margin: 0 !important;
}

.page-tag .gallery-item a {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start; /* 썸네일과 텍스트 상단 맞춤 */
    gap: 20px; /* 사진과 글 사이 간격 넓힘 */
}

/* 썸네일 크기 확대 */
.page-tag .list-thumbnail {
    width: 140px !important;  /* 기존 80px에서 140px로 대폭 확대 */
    height: 140px !important;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f7f9fa;
}

.page-tag .list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 영역 */
.page-tag .list-content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding-top: 5px;
    flex: 1;
}

.page-tag .list-title {
    font-size: 18px !important; /* 제목 크기 확대 */
    font-weight: 700 !important;
    color: #0f1419 !important;
    margin-bottom: 10px;
    line-height: 1.3;
}

.page-tag .list-summary {
    display: -webkit-box !important;
    font-size: 15px !important;
    color: #536471 !important;
    -webkit-line-clamp: 3; /* 요약글도 3줄까지 넉넉하게 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* 모바일 대응 (화면이 작아지면 적절히 조절) */
@media screen and (max-width: 768px) {
    .page-tag .gallery-list {
        padding: 0 15px;
    }
    .page-tag .list-thumbnail {
        width: 100px !important; /* 모바일은 100px */
        height: 100px !important;
    }
    .page-tag .list-title {
        font-size: 16px !important;
        margin-bottom: 6px;
    }
    .page-tag .list-summary {
        font-size: 14px !important;
        -webkit-line-clamp: 2; /* 모바일은 요약 2줄 */
    }
	
	/* 목록 아이템을 세로로 */
  .gallery-item a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* 썸네일은 위 */
  .list-thumbnail {
    width: 100%;
    margin-bottom: 8px;
  }

  /* 썸네일 이미지 꽉 차게 */
  .list-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
  }

  /* 제목 영역 */
  .list-content {
    width: 100%;
  }
  
   .list-summary {
    display: none !important;
  }
  .list-title {
    font-size: 15px;
    line-height: 1.4;
    margin: 4px 0 2px;
    word-break: keep-all;
  }
  /* 썸네일 박스 비율 고정 (정사각형) */
  .list-thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
  }

  /* 이미지 꽉 채우기 */
  .list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* 사이드바 메뉴 호버 스타일 (Home 포함 전체 메뉴) */
.sidebar-nav ul li a {
    display: block;
    padding: 10px 15px;
    transition: all 0.2s ease;
}

.sidebar-nav ul li a:hover {
    color: #1da1f2 !important;
    background-color: rgba(29, 161, 242, 0.1);
    border-radius: 20px;
    padding-left: 20px; /* 호버 시 살짝 오른쪽으로 미는 효과 */
    transition: all 0.2s ease;
}
/* 🎨 베이비블루 얇은 스크롤바 (PC + 모바일) */

/* Webkit 브라우저 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px; /* 세로 스크롤바 너비 */
  height: 8px; /* 가로 스크롤바 높이 */
}

::-webkit-scrollbar-track {
  background: #f0f4f8; /* 트랙 배경 (연한 회색) */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #FFB6C1; /* 베이비핑크 */
  border-radius: 10px;
  border: 2px solid #f0f4f8; /* 트랙과 구분을 위한 여백 */
}

::-webkit-scrollbar-thumb:hover {
  background: #FFD6E0; /* 호버 시 조금 더 진한 블루 */
}

::-webkit-scrollbar-thumb:active {
  background: #FFB6C1; 
}

/* Firefox */
* {
  scrollbar-width: thin; /* 얇은 스크롤바 */
  scrollbar-color: #FFD6E0 #FFE4EC; /* thumb 색상, track 색상 */
}

/* 모바일 대응 */
@media screen and (max-width: 900px) {
  ::-webkit-scrollbar {
    width: 6px; /* 모바일에서는 더 얇게 */
    height: 6px;
  }
  
  ::-webkit-scrollbar-thumb {
    border: 1px solid #f0f4f8; /* 모바일에서는 여백 줄임 */
  }
  .modal-close-btn {
    display: none !important;
  }
}
/* 📱 모바일 홈 보호글 강력 숨김 CSS */
@media screen and (max-width: 900px) {
  /* 방법 1: :has() 선택자 */
  .page-home .gallery-item:has(a[href*="password"]),
  .page-home .gallery-item:has(a[href*="protected"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }
  
  /* 방법 2: 직접 링크 타겟팅 */
  .page-home .gallery-item a[href*="password"],
  .page-home .gallery-item a[href*="protected"] {
    display: none !important;
  }
  
  /* 방법 3: 부모 요소 숨김 */
  .page-home a[href*="password"],
  .page-home a[href*="protected"] {
    display: none !important;
  }
  
  /* 방법 4: 보호글 클래스 숨김 */
  .page-home .protected,
  .page-home .password-protected,
  .page-home .entry-protected {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* 방법 5: 리스트 아이템 전체 */
  .page-home .gallery-list > li:has(a[href*="password"]),
  .page-home .gallery-list > li:has(a[href*="protected"]) {
    display: none !important;
  }
}

/* 홈 페이지 전용 */
body.page-home .gallery-item a[href*="password"],
body.page-home .gallery-item a[href*="protected"] {
  display: none !important;
}

body.page-home .gallery-item:has(a[href*="password"]),
body.page-home .gallery-item:has(a[href*="protected"]) {
  display: none !important;
}

/* 📌 고정 DM */
.dm-bubble-row.pinned {
  order: -999;
}

.dm-bubble-row.pinned .dm-bubble-content {
  background: inherit !important;
  border: none !important;
}

/* 고정 표시, 배경 전부 제거 */
.dm-bubble-row.pinned::before {
  display: none !important;
}
.page-guestbook .pagination,
.page-guestbook s_paging,
.page-guestbook .paging {
  display: none !important;
}
/* 1. 이전글, 다음글 위아래 구분선 및 배경 제거 */
.another_category,
.another_category * {
  border: none !important;
  background: transparent !important;
}
/* 위/아래 가짜 선 제거 */
.another_category::before,
.another_category::after {
  display: none !important;
}

/* ================================
   게시글 하단: 공감 버튼만 남기기
================================ */

/* 전체 버튼 래퍼 */
.container_postbtn {
  background: none !important;
  border: none !important;
  padding: 20px 0 !important;
}

/* 공감 버튼 외 전부 제거 */
.container_postbtn .btn_menu_toolbar,
.container_postbtn .wrap_btn_etc,
.container_postbtn .btn_share,
.container_postbtn .btn_statistics,
.container_postbtn .btn_etc,
.container_postbtn .postbtn_ccl,
.container_postbtn .postbtn_subscribe {
  display: none !important;
}

/* 공감 버튼만 표시 */
.container_postbtn .postbtn_like {
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 공감 버튼 감싸는 틀 제거 */
.container_postbtn .postbtn_like button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* 하트만 둥둥 떠 있는 느낌 */
.postbtn_like button {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.postbtn_like button:hover {
  transform: scale(1.25);
}

/* ================================
   PC 이전 / 다음글 디자인
================================ */

@media screen and (min-width: 901px) {

  /* 같은 카테고리 글 숨김 */
  .another_category table tr:nth-child(n+3) {
    display: none !important;
  }

  .another_category {
    max-width: 720px;
    margin: 60px auto 40px;
    background: transparent !important;
  }

  .another_category h4 {
    display: none !important;
  }

  .another_category table {
    width: 100%;
    border-collapse: collapse;
  }

  .another_category th {
    display: none !important;
  }

  .another_category td {
    padding: 18px 0 !important;
    text-align: center;
    border: none !important;
  }

  /* 🔥 이전글 / 다음글만 정확히 */
  .another_category tr:nth-child(1) td a,
  .another_category tr:nth-child(2) td a {
    font-size: 11px !important;
    letter-spacing: 1px;
    color: #bbb !important;
    text-transform: uppercase;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.2s ease;
  }

  .another_category tr:nth-child(1) td a::before {
    content: "< ";
  }

  .another_category tr:nth-child(2) td a::after {
    content: " >";
  }

  .another_category tr:nth-child(1) td a:hover,
  .another_category tr:nth-child(2) td a:hover {
    color: #000 !important;
  }
}


  /* 위아래 구분선 완전 제거 */
  .another_category tr {
    border: none !important;
  }
  
}
.uoc-icon {
    display: flex !important;
    align-items: center;
    gap: 5px;
}

/* '공감' 글자 숨기기 (공감 안 눌렀을 때 뜨는 텍스트) */
.uoc-icon .txt_like {
    display: none !important;
}

/* 공감 숫자 (+1 등) 스타일 수정 */
.uoc-icon .count {
    font-family: 'Outfit', sans-serif !important; /* 세련된 영문/숫자 폰트 */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ff4d4f !important; /* 하트와 어울리는 붉은 계열 */
    margin-left: 2px;
}

/* 3. 이전/다음글 구분선 및 페이징 디자인 */
.another_category, 
.another_category h4, 
.another_category table, 
.another_category th, 
.another_category td,
.pagination,
.pagination li {
    border: none !important;
	background-color: transparent !important;
}

.pagination .prev, 
.pagination .next {
    font-size: 11px !important;
    letter-spacing: 1px;
    color: #ccc !important;
    text-transform: uppercase;
}

/* 공감 버튼 외 불필요한 분석/공유 아이콘 숨김 (재확인) */
.btn_menu_toolbar, 
.postbtn_like .btn_share, 
.postbtn_like .btn_statistics, 
.postbtn_like .btn_etc,
.wrap_btn_etc {
    display: none !important;
}
/* 태그 검색 결과 및 모든 목록 페이지에서 본문 요약 숨김 */
.page-archive .list-summary, 
.page-tag .list-summary, 
.page-search .list-summary,
.page-category .list-summary,
.list-body p,
.summary {
    display: none !important;
}

/* 사이드바 카테고리 옆의 글 개수 숫자 숨기기 */
.category_list .c_cnt,
.category_list span,
.link_item .c_cnt {
    display: none !important;
}

/* 혹시 남아있을 수 있는 괄호() 제거를 위한 설정 */
.category_list li {
    font-size: 0; /* 부모 요소의 폰트 사이즈를 0으로 */
}

.category_list li a {
    font-size: 14px; /* 실제 카테고리 이름 글자 크기만 다시 복구 (원하시는 크기로 조절) */
}

/* 1. 새로운 글 알림(N 아이콘) 숨기기 */
img[src*="new_ico"], 
.ico_new, 
.new_icon {
    display: none !important;
}

/* 2. 카테고리 ALL(전체보기) 옆의 숫자 숨기기 */
.link_tit .c_cnt, 
.link_item .c_cnt,
.category_list .c_cnt {
    display: none !important;
}
/* ================================
   모바일 공지사항 스타일 (무한 마퀴)
================================ */
.m-notice-wrap {
    margin: 8px 0 15px 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none !important;
    cursor: default !important;
}

.m-notice-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-notice-content .fa-bullhorn {
    color: #FFB6C1;
    font-size: 14px;
    flex-shrink: 0;
}

.m-notice-text-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 18px;
}

/* 🔥 무한 마퀴 효과를 위한 래퍼 */
.m-notice-marquee {
    display: flex;
    width: fit-content;
    animation: infiniteMarquee 20s linear infinite;
}

.m-notice-text {
    display: inline-block;
    white-space: nowrap;
    color: #888;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    padding-right: 50px; /* 텍스트 사이 간격 */
}

/* 🎯 끊김 없는 무한 스크롤 애니메이션 */
@keyframes infiniteMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* 복제된 텍스트 2개 중 1개만큼 이동 */
    }
}

/* 맥북 스타일 팝업 모달 */
.notice-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.notice-modal.active {
  display: flex;
}

.modal-window {
  width: 90%;
  max-width: 500px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  background: linear-gradient(180deg, #e8e8e8 0%, #d5d5d5 100%);
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #c0c0c0;
}

.modal-header .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.modal-header .dot.red {
  background: #ff5f56;
}

.modal-header .dot.yellow {
  background: #ffbd2e;
}

.modal-header .dot.green {
  background: #27c93f;
}

.modal-content {
  padding: 30px 25px;
  min-height: 120px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.modal-body {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.modal-footer {
  padding: 15px 25px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e8e8e8;
}

.modal-close-btn {
  padding: 8px 24px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.modal-close-btn:hover {
  background: #0051d5;
}

@media screen and (max-width: 900px) {
  .modal-window {
    width: 85%;
    max-width: 400px;
  }
  
  .modal-content {
    padding: 25px 20px;
  }
}