/* [기본 설정] */
body { font-family: 'MaruBuri', sans-serif; background: #fff; margin: 0; color: #333; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* [헤더] */
.header-container { width: 100%; max-width: 1440px; margin: 0 auto; border-bottom: 1px solid #eee; }
header { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 20px; }
.logo-block { display: flex; align-items: center; flex: 0 0 auto; }
#logo-link { display: flex; align-items: center; gap: 10px; }
.header-icon { width: 40px; height: auto; display: block; }
.logo { font-size: 1.6rem; font-weight: 700; color: #b36600; font-family: sans-serif; }

.header-search { flex: 1; display: flex; justify-content: center; gap: 8px; max-width: 500px; }
.header-search input { border: 1px solid #e1c099; border-radius: 6px; padding: 0.6em 1em; width: 100%; outline: none; font-size: 0.95rem; }
.header-search button { background: #e9b26e; color: #fff; border: none; border-radius: 6px; padding: 0 1.2em; cursor: pointer; font-weight: 600; white-space: nowrap; }

/* [레이아웃] */
.container { display: flex; max-width: 1440px; margin: 30px auto; gap: 20px; padding: 0 20px; }

/* [사이드바] */
.sidebar { width: 300px; flex-shrink: 0; padding: 1.5rem 1.2rem; }
.sidebar-header h2 { font-size: 1.4rem; color: #333; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 15px; font-weight: 700; }
#category-list li { margin-bottom: 4px; cursor: pointer; }

#category-list .all, #category-list .cat1 {
  display: flex !important; flex-wrap: wrap; align-items: center; padding: 10px 10px; border-radius: 6px; transition: background 0.2s; font-weight: 700; color: #444; font-size: 1.1rem; 
}
#category-list .all:hover, #category-list .cat1:hover { background-color: #f5f5f5; color: #b36600; }
#category-list .cat-icon { width: 24px; height: 24px; margin-right: 12px; object-fit: contain; display: block; }

#category-list .cat2-list {
  display: none; width: 100%; margin-top: 8px; margin-left: 36px; padding-left: 10px; border-left: 2px solid #e1c099; animation: slideDown 0.6s ease-out;
}
#category-list .cat1:hover .cat2-list { display: block; }
#category-list .cat2 { font-size: 0.9rem; line-height: 1.6; color: #666; padding: 5px 0; display: block; }
#category-list .cat2:hover { color: #b36600; text-decoration: none; font-weight: 600; }

/* [본문] */
.content { flex: 1; max-width: 900px; min-width: 0; padding: 2rem; display: flex; flex-direction: column; gap: .6rem; }
.main-catpath-area { margin-bottom: 20px; }
#main-category-path { font-size: 1.35rem; color: #888; font-weight: 600; }
#main-title { font-size: 1.8rem; margin-bottom: 20px; color: #222; }
#post-list li { padding: 12px 0; border-bottom: 1px solid #f1f1f1; }
#post-list a { display: block; font-size: 1.1rem; color: #333; }
#post-list a:hover { color: #b36600; }
.home-banner-img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 30px; display: block; }

/* [상세 페이지] */
#post-detail-wrapper { animation: fadeIn 0.3s; }
.post-header-area { margin-bottom: 30px; }
#detail-title { font-size: 2rem; margin-bottom: 10px; line-height: 1.3; }
.detail-meta { color: #777; font-size: 0.9rem; display: flex; gap: 15px; }
.detail-divider { margin: 20px 0; border: 0; height: 1px; background: #eee; }
#detail-content img { max-width: 100%; height: auto; border-radius: 4px; }

/* [SEO] H 태그 초기화 */
.vf-line h2, .vf-line h3 { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; display: inline-block; width: 100%; }

/* [텍스트 자동 서식 스타일] */
.vf-line { line-height: 1.8; margin-bottom: 6px; word-break: break-all; transition: all 0.3s ease; }
.vf-fmt-bold { margin-top: 24px; margin-bottom: 10px; color: #222; font-size: 1.15em; font-weight: 800; display: block; }
.vf-fmt-indent-1 { padding-left: 20px; color: #444; font-weight: normal; }
.vf-fmt-indent-2 { padding-left: 45px; color: #555; }
.vf-fmt-indent-3 { padding-left: 70px; color: #666; font-size: 0.95em; }
.vf-fmt-normal { color: #333; }
.simple-view .vf-fmt-indent-3 { display: none; }

/* [로딩 애니메이션] */
.loading-msg { text-align: center; padding: 40px; font-size: 1.2rem; color: #b36600; font-weight: bold; animation: blink 1.5s infinite; }
@keyframes blink { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

/* [태그 및 하단 버튼] */
.post-footer-area { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.tags-container a { display: inline-block; background-color: #f1f3f5; color: #495057; padding: 6px 14px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; transition: all 0.2s; cursor: pointer; }
.tags-container a:hover { background-color: #e9b26e; color: #fff; text-decoration: none; }

.list-btn-wrapper { margin-bottom: 40px; }
#back-to-list-btn { padding: 10px 20px; background: #e9b26e; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }

/* [NEW] 연관 글 섹션 스타일 */
.related-section { margin-top: 40px; padding-top: 30px; border-top: 2px solid #333; }
.related-section h3 { font-size: 1.3rem; margin-bottom: 15px; font-weight: 700; color: #b36600; }
.related-list { list-style: none; padding: 0; }
.related-list li { padding: 8px 0; border-bottom: 1px solid #eee; }
.related-list a { display: flex; justify-content: space-between; align-items: center; color: #444; font-size: 1rem; transition: color 0.2s; }
.related-list a:hover { color: #b36600; text-decoration: none; font-weight: 600; }
.related-list .date { font-size: 0.85rem; color: #999; }

/* 푸터 */
footer { text-align: center; padding: 40px 0; margin-top: 50px; border-top: 1px solid #eee; color: #888; font-size: 0.9rem; }

/* [플로팅 네비게이션] */
header nav.floating-nav { position: fixed; right: 35px; bottom: 35px; width: 300px; height: 220px; padding: 12px; background: rgba(255,255,255,0.98); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 9999; border: 1px solid #eee; }
.fn-grid { display: grid; width: 100%; height: 100%; gap: 8px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-template-areas: "search search searchBtn" "home all trend" "contact tPlus tMinus" "mode mode mode"; }
.cell-search { grid-area: search; } .cell-searchBtn { grid-area: searchBtn; } .cell-home { grid-area: home; } .cell-all { grid-area: all; } .cell-trend { grid-area: trend; } .cell-contact { grid-area: contact; } .cell-plus { grid-area: tPlus; } .cell-minus { grid-area: tMinus; } .cell-mode { grid-area: mode; }
.floating-nav .fn-btn, .floating-nav .fn-search-btn, .floating-nav .fn-toggle-btn { display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 600; cursor: pointer; border: 1px solid #e1c099; background: #fff; color: #b36600; text-decoration: none; font-size: 14px; transition: all 0.2s; }
.floating-nav .fn-btn:hover, .floating-nav .fn-toggle-btn:hover { background-color: #fff8f0; }
.floating-nav .fn-search-btn { background: #e9b26e; color: #fff; border: none; }
.floating-nav .fn-search-btn:hover { background: #d0944b; }
.floating-nav .fn-input { border: 1px solid #e1c099; border-radius: 8px; padding: 6px 10px; font-family: inherit; }
.floating-nav .fn-toggle-btn.active { background-color: #b36600; color: #fff; }

@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }