/*!
Theme Name: MaulNews
Theme URI: http://underscores.me/
Author: 마을목회신문
Author URI: http://maulnews.mycafe24.com
Description: 마을목회신문 커스텀 뉴스 테마
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: maulnews

Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

MaulNews is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* ========================================
   사이트 전체 레이아웃 (박스형)
   ======================================== */
body {
  background-color: #ffffff; /* 바깥 배경색을 은은한 회색으로 */
}

#page {
  max-width: 1280px; /* 사이트 전체 가로 폭을 1280px로 제한 */
  margin: 0 auto; /* 화면 중앙에 배치하는 마법의 코드 */
  background-color: #ffffff; /* 우리 사이트의 배경은 흰색 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/* ========================================
   중간/오른쪽 칼럼 제목 밑줄 제거
   ======================================== */
.center-column .entry-title-large a,
.right-column .entry-title-small a {
  text-decoration: none;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: #333; /* ★ 기본 글자색을 본문과 동일한 #333 (검은색 계열)로 변경 */
  text-decoration: none;
}

a:visited {
  color: #333;
}

a:hover,
a:focus,
a:active {
  color: #191970;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  width: 100%;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* ========================================
   헤더 스타일 (3단 레이아웃)
   ======================================== */

.site-header {
  background: #ffffff;
}

.header-top-area {
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
}

.site-header .container .header-right {
  margin-left: auto; /* 왼쪽 여백을 최대로 늘려서 오른쪽으로 밀어버림 */
}

/* 3단 그리드 컨테이너 */
.header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 왼쪽(자동) 중앙(자동) 오른쪽(자동) */
  align-items: center;
  gap: 20px;
}

/* 왼쪽 빈 공간 */
.header-left {
  /* 비워둠 */
}

/* 중앙 로고 */
.header-center {
  text-align: center;
}

.custom-logo-link {
  display: inline-block;
}

.custom-logo {
  width: 400px;
  height: 80px;
  max-width: 100%;
  height: auto;
}

/* ========================================
   전국구 공용 검색창 스타일
   ======================================== */

.search-form {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 20px; /* 캡슐 모양 */
  background: #fff;
  padding: 0 5px 0 15px;
  max-width: 300px;
  transition: all 0.2s ease;
  overflow: hidden; /* 내부 요소가 삐져나가지 않도록 */
}
.search-form:focus-within {
  border-color: #0073aa;
  box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.5);
}

/* 핵심 1: label이 공간을 꽉 채우도록 */
.search-form label {
  flex-grow: 1;
  display: flex;
}

/* 핵심 2: input의 기본 스타일 완전 박살 */
.search-field {
  width: 100%; /* 너비 100% */
  border: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 8px 0 !important; /* 내부 여백 초기화 */
  margin: 0 !important; /* 외부 여백 초기화 */
  box-shadow: none !important;
  -webkit-appearance: none !important;
  font-size: 14px;
  color: #333;
}

/* 돋보기 버튼 */
.search-submit {
  text-indent: -9999px;
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 35px;
  height: 35px;
  flex-shrink: 0; /* 버튼 크기 고정 */
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.search-submit:hover {
  opacity: 1;
}

/* 특정 페이지에서 검색창 크기 조절 */
.error-404 .search-form,
.no-results .search-form {
  max-width: 500px;
  margin: 40px auto;
}

/* 네비게이션 메뉴 (이전과 동일) */
.main-navigation {
  background: #0073aa;
}
.main-navigation .container {
  justify-content: center;
}
/* ... (이하 네비게이션 스타일은 그대로 둔다) ... */

/* ========================================
   네비게이션 메뉴 & 드롭다운 스타일 (최종 수정 2)
   ======================================== */

/* 메인 네비게이션 바 전체 */
.main-navigation {
  background-color: #ffffff;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

/* 메뉴 아이템들을 담는 컨테이너 */
.main-navigation .container {
  /* 여기서 정렬할 필요 없으니 비워둠 */
}

/* 상위 메뉴 ul 태그 자체를 Flexbox로! */
.main-navigation ul.menu {
  display: flex;
  justify-content: space-between; /* 양 끝에 붙이고 나머지는 균등 분배! */
  width: 100%; /* 메뉴바의 가로폭을 100% 꽉 채워라! 이게 핵심이노. */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 상위 메뉴 링크 (li > a) 스타일 */
.main-navigation ul.menu > li > a {
  display: block;
  font-weight: bold;
  color: #000000;
  padding: 20px 25px;
  text-decoration: none;
  transition: all 0.2s;
}

/* 상위 메뉴에 마우스 올렸을 때 */
.main-navigation ul.menu > li > a:hover {
  background-color: #f0f0f0;
  color: #0073aa;
}

/* --- 드롭다운 메뉴 스타일 (이전과 동일) --- */
.main-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-top: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  list-style: none;
  width: 200px;
  z-index: 999;
}

.main-navigation ul li:hover > ul {
  display: block;
}

.main-navigation ul ul li a {
  font-weight: normal;
  color: #333333;
  padding: 12px 20px;
  white-space: nowrap;
}

.main-navigation ul ul li a:hover {
  background-color: #f5f5f5;
  color: #0073aa;
}

.main-navigation ul ul ul {
  top: -1px;
  left: 100%;
}

/* ========================================
   홈페이지 기사 목록 스타일
   ======================================== */

.content-area {
  padding: 40px 0; /* 본문 영역의 위아래 여백 */
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 세로 중앙 정렬 */
  flex-wrap: wrap; /* 화면 좁아지면 줄바꿈 */

  /* 기존 구분선 스타일은 헤더가 갖도록 합니다 */
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.page-title {
  font-size: 32px;
  margin: 0;
}

/* 개별 기사 (article) 스타일 */
.site-main > article {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.site-main > article:last-child {
  border-bottom: none; /* 마지막 기사는 아래 선 없앰 */
  margin-bottom: 0;
}

.entry-title {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 10px;
}

.entry-title a {
  text-decoration: none;
  color: #222;
}

.entry-title a:hover {
  color: #0073aa;
}

.entry-summary {
  color: #555;
  line-height: 1.7;
}

.entry-footer {
  margin-top: 20px;
  font-size: 14px;
  color: #777;
}

.entry-footer .byline {
  margin-left: 15px;
}

/* ========================================
   홈페이지 3단 그리드 스타일 (최종 완성본)
   ======================================== */
.content-area {
  padding: 40px 0;
}

.homepage-grid {
  display: grid;
  grid-template-columns: 2fr 5fr 3fr; /* 왼쪽:중간:오른쪽 너비 비율 */
  gap: 30px; /* 칼럼 사이의 간격 */
  align-items: start;

  /* 
    * 그리드 섹션 아래쪽에 2px 굵기의 검은색 실선을 추가합니다.
    */
  border-bottom: 2px solid #000000;
  padding-bottom: 40px; /* 구분선과 그리드 내용 사이의 여백 */
  margin-bottom: 40px; /* 구분선과 다음 섹션 사이의 여백 */
}

/* --- 모든 칼럼에 공통으로 적용할 스타일 --- */
.left-column,
.center-column,
.right-column {
  /* 
     * 모든 칼럼의 최대 높이를 600px로 제한하고,
     * 넘치는 내용은 깔끔하게 숨깁니다.
     */
  max-height: 650px;
  overflow: hidden;
}

/* --- 왼쪽 칼럼 --- */
.left-column .list-item {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.left-column .list-item:last-child {
  border-bottom: none;
}
.left-column .entry-title {
  font-size: 18px;
  margin: 0 0 10px;
}
.left-column .entry-summary {
  font-size: 15px;
  color: #555;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 텍스트를 최대 3줄로 제한 */
  overflow: hidden;
}

/* --- 중간 칼럼 --- */
.center-column .thumbnail-large {
  height: 420px;
  overflow: hidden;
}
.center-column .thumbnail-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.center-column .entry-title-large {
  font-size: 32px;
  margin: 15px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --- 오른쪽 칼럼 --- */
.right-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 아이템들을 위아래 양 끝으로 보냅니다. */

  /* 
   * 오른쪽 칼럼의 높이를 왼쪽/중간 칼럼의 내용물 높이와 비슷하게 맞추기 위해
   * 이 칼럼에만 높이를 직접 지정합니다.
   * 왼쪽/중간 칼럼의 실제 렌더링 높이를 보고 이 값을 조절하면 됩니다.
   */
  height: 100%;
  max-height: 500px;
  min-width: 0;
}

.right-column .thumbnail-small {
  height: 190px;
  overflow: hidden;
}
.right-column .thumbnail-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.right-column .entry-title-small {
  font-size: 20px;
  margin: 10px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 대표 이미지 없을 때 빈 공간 채우기 */

.placeholder-thumbnail {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0; /* 은은한 회색 배경 */
  border: 1px dashed #ccc; /* "여긴 원래 이미지 자리요" 하는 점선 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 빈 공간에 텍스트나 아이콘을 넣고 싶으면 추가 */
.placeholder-thumbnail::after {
  content: "🏞️"; /* 이미지 아이콘 */
  font-size: 48px;
  color: #ddd;
}

/* ========================================
   카테고리 그리드 최종 통합 스타일 (ver. 2025.10.30)
   ======================================== */

/* --- 기본 설정: 모든 요소의 너비 계산 방식을 통일 --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- 상위 레이아웃 (기존 3단 그리드) --- */
.homepage-grid {
  display: grid;
  grid-template-columns: 2fr 5fr 3fr;
  gap: 30px;
  align-items: start;
  border-bottom: 2px solid #000;
  padding-bottom: 40px;
  margin-bottom: 40px;
}

/* --- 새 2단 레이아웃 (가장 중요!) --- */
.new-homepage-layout {
  display: grid;
  /* 2:1 비율을 유지하되, 내용물이 넘치면 줄어들도록 허용 */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- 모든 컬럼의 내용물 넘침 방지 --- */
.main-article-section,
.right-sidebar,
.left-column,
.center-column,
.right-column {
  min-width: 0; /* 이게 모든 문제의 해결책이다! */
}

/* --- 카테고리 섹션 스타일 --- */
.main-article-section .category-section {
  margin-bottom: 50px;
}

/* 카테고리 제목과 '전체보기'를 포함하는 헤더 */
.category-header {
  display: flex;
  justify-content: space-between; /* 제목과 링크를 양 끝으로 */
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;

  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #ddd;
}

/* 헤더 안의 실제 카테고리 제목 */
.category-header .category-title {
  font-size: 28px;
  margin: 0;
  padding: 0;
  border-bottom: none; /* 밑줄은 .category-header로 옮겼으므로 제거 */
}

/* '전체보기' 텍스트 링크 */
.new-homepage-layout .main-article-section .category-header a.more-link {
  all: unset; /* 다른 스타일의 간섭을 원천 차단 */
  font-size: 14px;
  font-weight: 400;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.new-homepage-layout .main-article-section .category-header a.more-link:hover {
  color: #333;
  text-decoration: underline;
}

/* 카테고리 기사 카드 그리드 */
.main-article-section .article-list {
  display: grid;
  /* 카드의 최소 너비를 220px로 줄여서 더 많이 들어가도록 설정 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.main-article-section .list-item-new {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease-in-out;
  background: #fff;
  border-bottom: none; /* 그리드에선 밑줄 필요없음 */
}
.main-article-section .list-item-new:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.main-article-section .post-thumbnail img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.main-article-section .article-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.main-article-section .entry-title-new {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 17px;
}

/* 요약문 여러 줄 자르기 */
.main-article-section .entry-summary-new {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 요약문을 최대 '3'줄로 제한 */
  overflow: hidden;
}

/* 카드뉴스 제목 밑줄 제거 */
.main-article-section .entry-title-new a {
  text-decoration: none; /* 밑줄 제거 */
  color: inherit; /* 부모 요소의 글자색을 그대로 사용 */
}

.main-article-section .entry-title-new a:hover {
  color: #0073aa; /* 마우스 올렸을 때만 색깔 변경 */
}

/* --- 오른쪽 사이드바 및 인기글 스타일 --- */
.right-sidebar .sidebar-widget {
  margin-bottom: 40px;
}
.right-sidebar .widget-title {
  font-size: 22px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #333;
}
.popular-posts-list ul {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 5px;
  border-left: 2px dotted #ccc;
  padding-left: 20px;
}
.popular-posts-list li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 15px;
}
.popular-posts-list li:last-child {
  margin-bottom: 0;
}
.popular-posts-list li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 9px;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 2px solid #555;
  border-radius: 50%;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  z-index: 1;
}
.popular-posts-list li:hover::before {
  background: #d9534f;
  border-color: #d9534f;
}
.popular-posts-list a {
  font-size: 17px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  line-height: 1.5; /* 줄 간격을 적당히 줘서 가독성 확보 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 최대 '2'줄까지 허용 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal; /* 줄바꿈을 허용해야 여러 줄이 나온다 */
}
.popular-posts-list a:hover {
  color: #000;
  text-decoration: none;
}

/* ========================================
   배너 스타일
   ======================================== */

.ad-banner {
  line-height: 0; /* 이미지 하단의 미세한 여백 제거 */
}

.ad-banner a img {
  border-radius: 6px; /* 모서리를 살짝 둥글게 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 은은하고 깊이감 있는 그림자 */
  transition: all 0.2s ease-in-out;
}

/* 마우스를 올렸을 때 살짝 띄우는 효과 */
.ad-banner a:hover img {
  transform: translateY(-4px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* ========================================
   포토/동영상 섹션 레이아웃
   ======================================== */
.media-section-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 60px;
  align-items: start; /* 높이가 달라도 위쪽 기준으로 정렬 */
}

.media-section-title {
  font-size: 24px;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* ========================================
   푸터 스타일
   ======================================== */
.site-footer {
  background-color: #ffffff; /* 배경은 다시 흰색으로 */
  color: #6c757d; /* 기본 텍스트 색상 */
  font-size: 13px;
}

/* --- 상단 메뉴 목록 영역 --- */
.footer-sitemap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px;
  border-bottom: 1.5px solid #e9ecef;
  border-top: 1.5px solid #000000;
}

.footer-menu-grid {
  list-style: none;
  padding: 0;
  margin: 0;

  /* 
     * 메뉴 목록을 6개의 열로 자동으로 나눠줌
     */
  column-count: 6;
  column-gap: 20px;
}

.footer-menu-grid > li {
  /* 
     * 각 카테고리(정치, 경제 등) 그룹이
     * 다른 열로 잘려나가지 않게 막아줍니다.
     */
  break-inside: avoid-column;
  padding-bottom: 25px;
}

/* 상위 카테고리 (정치, 경제 등) 링크 스타일 */
.footer-menu-grid > li > a {
  font-weight: bold;
  color: #212529; /* 진한 검은색 계열 */
  text-decoration: none;
  font-size: 21px;
}

/* 하위 카테고리 메뉴 스타일 */
.footer-menu-grid .sub-menu {
  list-style: none;
  padding: 20px 0 0 0;
  margin: 0;
}

.footer-menu-grid .sub-menu li a {
  color: #6c757d; /* 상위 메뉴보다 연한 색상 */
  text-decoration: none;
  line-height: 2.2; /* 줄 간격을 넉넉하게 */
  font-size: 16px;
}

.footer-menu-grid .sub-menu li a:hover {
  color: #212529; /* 마우스 올리면 진하게 */
}

/* --- 하단 정보 바 영역 --- */
.footer-info-bar {
  padding: 25px 0;
}

.info-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center; /* 로고와 내용을 수직 중앙 정렬 */
}

.footer-logo {
  font-size: 24px;
  font-weight: bold;
  margin-right: 40px;
  flex-shrink: 0; /* 로고가 찌그러지지 않도록 방지 */
}
.footer-logo a {
  color: #212529;
  text-decoration: none;
}

/* 새로 추가한 div가 남은 공간을 모두 차지하도록 설정 */
.footer-content {
  flex-grow: 1;
}

.footer-address p {
  margin: 0;
  line-height: 1.8;
  color: #6c757d;
}

.copyright {
  color: #adb5bd; /* 저작권 표시는 더 연하게 */
  margin-top: 5px; /* 주소와 저작권 사이의 간격 */
  margin-bottom: 0;
}

/* --- 1. 카테고리 카드 4개 이상 표시되도록 수정 --- */
.main-article-section .article-list {
  display: grid;
  /* 카드의 최소 너비를 220px로 줄여서 더 많이 들어가도록 설정 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px; /* 간격도 살짝 줄임 */
}

/* --- 2. '더보기' 버튼 스타일 추가 --- */
.category-header {
  display: flex;
  justify-content: space-between; /* 제목과 버튼을 양 끝으로 보냄 */
  align-items: center; /* 수직 중앙 정렬 */
  margin-bottom: 20px;
}

.category-header .category-title {
  margin: 0; /* 기존 여백 제거 */
  padding: 0;
  border-bottom: none; /* 기존 밑줄 제거 */
}

.category-header .more-link {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.category-header .more-link:hover {
  background-color: #f0f0f0;
  color: #000;
  border-color: #999;
}

/* ========================================
   기본 검색창 성형수술
   ======================================== */

/* 검색창 전체를 감싸는 form 태그 */
.header-right .search-form {
  display: flex; /* 입력창과 버튼을 한 줄에 */
  align-items: center; /* 수직 중앙 정렬 */
  border: 1px solid #ccc;
  border-radius: 20px; /* 캡슐 모양 */
  background: #fff;
  padding: 0 5px 0 15px; /* 안쪽 여백 (왼쪽은 넉넉하게, 오른쪽은 아이콘에 맞춰서) */
  width: 250px;
  transition: all 0.2s ease;
}

/* 사용자가 검색창을 클릭했을 때 */
.header-right .search-form:focus-within {
  border-color: #0073aa;
  box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.5);
}

/* 글자 입력하는 input 창 */
.header-right .search-field {
  border: none;
  background: transparent;
  outline: none;
  flex-grow: 1; /* 남는 공간 다 차지 */
  padding: 8px 0;
  font-size: 14px;
}

/* '검색' 글자가 나오는 input 버튼 */
.header-right .search-submit {
  /* 기존 '검색' 글자는 숨겨버린다 */
  text-indent: -9999px;
  font-size: 0;

  /* 배경에 돋보기 아이콘을 넣는다! */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 35px; /* 아이콘이 들어갈 공간 확보 */
  height: 35px;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.header-right .search-submit:hover {
  opacity: 1;
}

/* ========================================
   카테고리 페이지 - 최종 리스트 스타일
   ======================================== */

/* 대표 기사, 그리드 레이아웃은 확실히 비활성화 */
.kuki-top-post,
.kuki-post-list-dense {
  display: block; /* 그리드 설정 해제 */
}

/* 개별 기사 아이템 스타일 */
.kuki-list-item-dense {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #eee; /* 구분선 색 연하게 */
}

.kuki-list-item-dense:first-child {
  padding-top: 0;
}

/* 썸네일 이미지 */
.kuki-list-thumbnail-dense {
  width: 200px;
  height: 133px;
  flex-shrink: 0;
}
.kuki-list-thumbnail-dense img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px; /* 이미지 모서리 살짝 둥글게 */
}

/* 기사 내용 */
.kuki-list-content-dense {
  display: flex;
  flex-direction: column;
}
.kuki-list-content-dense .entry-title-dense {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.4;
}
.kuki-list-content-dense .entry-title-dense a {
  text-decoration: none;
  color: #222;
}
.kuki-list-content-dense .entry-title-dense a:hover {
  color: #0073aa;
}

/* 요약문 2줄 제한 */
.kuki-list-content-dense .entry-summary-dense {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kuki-list-content-dense .entry-meta {
  font-size: 13px;
  color: #888;
  margin-top: auto; /* 남는 공간을 밀어내고 맨 아래에 붙임 */
}

/* ========================================
   카테고리 페이지 3:1 레이아웃 + 사이드바 스타일
   ======================================== */

.category-layout-wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr; /* 3:1 황금비율로 변경 */
  gap: 45px; /* 간격 살짝 넓혀서 시원하게 */
  align-items: start;
}

/* 오른쪽 카테고리 사이드바 스타일 */
.category-sidebar .widget-title {
  font-size: 18px; /* 제목 크기 살짝 줄임 */
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid #000;
}

.all-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #f9f9f9; /* 은은한 배경색 추가 */
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 10px;
}

.all-categories-list li {
  padding: 0;
  border: none; /* 개별 밑줄은 제거 */
}

.all-categories-list li a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  font-size: 14px;
  color: #444;
  padding: 10px 12px;
  border-radius: 4px; /* 마우스 올렸을 때를 위해 미리 설정 */
  transition: all 0.2s ease-in-out;
}

/* 마우스를 올렸을 때 스타일 */
.all-categories-list li a:hover {
  background-color: #0073aa;
  color: #fff;
}

/* 현재 보고 있는 카테고리 스타일 */
.all-categories-list .current-cat > a {
  background-color: #333;
  color: #fff;
  font-weight: 600;
}
.all-categories-list .current-cat > a:hover {
  background-color: #000; /* 호버 시 더 진하게 */
}

/* ==========================================================================
   4.9 Category Navigation (카테고리 뒤로가기 링크)
   ========================================================================== */

/* '목록으로' 링크를 감싸는 영역 (이름 변경 및 스타일 제거) */
.page-header-navigation {
  /* (margin/padding/border는 부모인 .page-header로 이동됨) */
  margin-right: 20px; /* 제목과 살짝 띄우기 (옵션) */
}

/* '목록으로' 링크 자체 */
.category-back-link {
  display: inline-block;
  padding: 8px 12px;
  background-color: #f0f0f0;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.2s;
  white-space: nowrap; /* (목록으로) 글자가 줄바꿈되지 않게 함 */
}

/* 마우스 올렸을 때 */
.category-back-link:hover {
  background-color: #e0e0e0;
  color: #111;
}

/* ========================================
   페이지네이션 스타일
   ======================================== */

.maul-pagination {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  margin: 60px 0 40px;
}

.maul-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px; /* 버튼 사이 간격 */
}

/* 모든 버튼의 기본 스타일 */
.maul-pagination li a,
.maul-pagination li .page-numbers.current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 마우스를 올렸을 때 스타일 */
.maul-pagination li a:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* 현재 페이지 버튼 스타일 */
.maul-pagination li .page-numbers.current {
  background: #333;
  border-color: #333;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

/* 이전/다음 글자 버튼 스타일 */
.maul-pagination li .prev,
.maul-pagination li .next {
  font-weight: 500;
}

/* ========================================
   개별 기사 페이지(single.php) 스타일
   ======================================== */

.maul-single-article {
  background: #fff;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 5px;
}

/* 모든 게시물 유형(블로그 목록, 개별 기사 등)에 적용 */
.entry-header {
  margin-bottom: 25px; /* 헤더와 본문 사이의 간격 */
  padding-bottom: 25px; /* 헤더 내부의 아래쪽 여백 */
  border-bottom: 1px solid #e0e0e0; /* 연한 회색 구분선 */
}

/* 개별 기사 페이지에서만 제목 위아래 간격을 더 줌 (선택 사항) */
.single .entry-header {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.maul-single-article .entry-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.maul-single-article .entry-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}

.maul-single-article .entry-meta {
  font-size: 14px;
  color: #666;
}

.maul-single-article .meta-item-divider {
  margin: 0 10px;
}

.maul-single-article .post-thumbnail {
  margin-bottom: 30px;
}

.maul-single-article .post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.maul-single-article .entry-content {
  font-size: 17px;
  line-height: 1.8;
  color: #333;
}

.maul-single-article .entry-content p {
  margin-bottom: 1.5em;
}

.maul-single-article .entry-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  font-size: 14px;
}

/* 이전/다음 글 네비게이션 */
.post-navigation {
  margin: 40px 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.post-navigation .nav-links {
  display: flex;
  width: 100%;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  width: 50%;
  padding: 20px;
}
.post-navigation .nav-previous {
  border-right: 1px solid #ddd;
}
.post-navigation a {
  text-decoration: none;
  color: #444;
}
.post-navigation .nav-subtitle {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
}
.post-navigation .nav-title {
  font-size: 16px;
  font-weight: 600;
}

/* ========================================
   싱글 페이지 메타 정보 및 작성자 박스
   ======================================== */

/* 글 상단 메타 정보 (작성자 | 날짜) */
.single .entry-meta {
  font-size: 15px;
  color: #555;
}
.single .entry-meta .author-name a {
  font-weight: 600;
  color: #222;
  text-decoration: none;
}
.single .entry-meta .author-name a:hover {
  text-decoration: underline;
}
.single .entry-meta .meta-divider {
  margin: 0 8px;
  color: #ccc;
}

/* 글 하단 메타 정보 (카테고리, 태그) */
.single .entry-footer {
  font-size: 14px;
  color: #666;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.single .entry-footer div {
  margin-bottom: 10px;
}
.single .entry-footer .cat-links-title,
.single .entry-footer .tag-links-title {
  font-weight: 600;
}
.single .entry-footer a {
  color: #0073aa;
  text-decoration: none;
}
.single .entry-footer a:hover {
  text-decoration: underline;
}

.single .entry-footer .meta-section div {
  margin-bottom: 10px;
}

.single .entry-footer .cat-links-title,
.single .entry-footer .tag-links-title {
  font-weight: 600;
  color: #888; /* 은은한 회색으로 변경 */
}

/* 작성자 소개 박스 */
.author-info-box {
  display: flex;
  gap: 25px;
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 25px;
  margin: 40px 0;
}
.author-info-box .author-avatar img {
  border-radius: 50%;
}
.author-info-box .author-title {
  margin: 0 0 10px;
}
.author-info-box .author-title a {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
}
.author-info-box .author-bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

/* ========================================
   수정 버튼 및 댓글창 스타일
   ======================================== */

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-link a {
  display: inline-block;
  padding: 8px 15px;
  background: #555;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;
}
.edit-link a:hover {
  background: #000;
}

/* 댓글 폼 스타일 */
.comment-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.comment-form input[type="text"],
.comment-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
}

.comment-form .form-submit .submit {
  display: inline-block;
  padding: 12px 30px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.comment-form .form-submit .submit:hover {
  background: #005a87;
}

/* ========================================
   댓글창 최종 스타일
   ======================================== */

.comment-list,
.comment-list ul,
.comment-list ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.comment-list .children {
  margin-left: 50px !important;
}

/* 댓글 목록 제목 */
.comments-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #000;
}

/* 개별 댓글 스타일 */
/* 댓글 목록과 그 안의 모든 자식 목록의 숫자/점을 완전히 제거 */
.comment-list,
.comment-list ul.children {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

/* 개별 댓글 스타일 */
.comment-list .comment-body {
  display: flex;
  gap: 15px;
  padding: 25px 0;
  border-bottom: 1px solid #eee;
}

.comment-list .comment-author-avatar {
  flex-shrink: 0;
}
.comment-list .comment-author-avatar img {
  border-radius: 50%; /* 아바타 이미지 동그랗게 */
}
.comment-list .comment-meta {
  margin-bottom: 10px;
  font-size: 14px;
}
.comment-list .comment-meta .fn {
  font-size: 16px;
  font-weight: 700;
}
.comment-list .comment-meta time {
  color: #888;
  margin-left: 10px;
}
.comment-list .comment-text {
  font-size: 16px;
  line-height: 1.7;
}
.comment-list .comment-reply {
  margin-top: 15px;
}
.comment-list .comment-reply-link {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  background: #eee;
  padding: 5px 10px;
  border-radius: 4px;
}
.comment-list .comment-reply-link:hover {
  background: #ddd;
  color: #000;
}

/* ========================================
   본문 + 사이드바 2단 레이아웃
   ======================================== */

.category-layout-wrapper,
.maul-container-with-sidebar {
  display: grid;
  grid-template-columns: 3fr 1fr; /* 3:1 황금비율 */
  gap: 45px;
  align-items: start;
}

/* 오른쪽 사이드바 공통 스타일 */
.right-sidebar {
  position: sticky; /* 스크롤 따라다니는 효과 */
  top: 50px;
}

/* ========================================
   기사 하단 푸터 (메타 정보 + 관리자 버튼)
   ======================================== */

.single .entry-footer {
  display: flex;
  justify-content: space-between; /* 양쪽으로 쫙 벌리기 */
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.single .entry-footer .meta-section div {
  margin-bottom: 10px;
}

/* 관리자 버튼 영역 */
.admin-actions {
  display: flex;
  gap: 10px;
}

.admin-actions .post-edit-link a,
.admin-actions .post-delete-link {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* 수정 버튼 (파란색) */
.admin-actions .post-edit-link a {
  background-color: #0073aa;
}
.admin-actions .post-edit-link a:hover {
  background-color: #005a87;
}

/* 삭제 버튼 (빨간색) */
.admin-actions .post-delete-link {
  background-color: #d9534f;
}
.admin-actions .post-delete-link:hover {
  background-color: #c9302c;
}

/* ========================================
   404 에러 페이지
   ======================================== */

.error-404 {
  max-width: 740px;
  margin: 0 auto;
  text-align: center; /* 모든 내용을 가운데 정렬 */
  padding: 60px 20px;
}

.error-404 .page-header {
  margin-bottom: 30px;
  border-bottom: none; /* 밑줄 제거 */
}

.error-404 .page-title {
  font-size: 48px;
  font-weight: 700;
  color: #333;
}

.error-404 .page-content p {
  font-size: 18px;
  color: #666;
  line-height: 1.7;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 404 페이지의 검색창 */
.error-404 .search-form {
  margin: 40px auto;
  max-width: 500px;
  display: flex;
}
.error-404 .search-field {
  flex-grow: 1;
  padding: 15px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px 0 0 5px;
}
.error-404 .search-submit {
  padding: 0 30px;
  background: #0073aa;
  border: 2px solid #0073aa;
  color: #fff;
  font-weight: 700;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
.error-404 .search-submit:hover {
  background: #005a87;
}

/* 404 페이지의 최신 기사 목록 */
.recent-posts-404 {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}
.recent-posts-404 h3 {
  font-size: 22px;
  margin-bottom: 20px;
}
.recent-posts-404 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recent-posts-404 li {
  margin-bottom: 10px;
}
.recent-posts-404 a {
  font-size: 17px;
  color: #0073aa;
  text-decoration: none;
}
.recent-posts-404 a:hover {
  text-decoration: underline;
}

/* ========================================
   저자 페이지 (author.php) 스타일
   ======================================== */

.author-header .author-info-box {
  display: flex;
  gap: 25px;
  background: transparent; /* 배경 없음 */
  border: none; /* 테두리 없음 */
  border-bottom: 2px solid #333; /* 페이지 제목처럼 밑줄만 */
  border-radius: 0;
  padding: 0 0 30px 0;
  margin: 0 0 40px 0;
}

.author-header .author-name-title {
  font-size: 36px;
  margin: 0 0 15px;
  padding: 0;
}

.author-header .author-bio {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

.author-posts-title {
  font-size: 24px;
  margin-bottom: 20px;
}

/* ========================================
   페이지네이션 버튼 스타일
   ======================================== */

.maul-pagination {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  margin: 60px 0 40px;
}

.maul-pagination .nav-links {
  /* the_posts_pagination이 만드는 기본 컨테이너 */
  display: flex;
  gap: 8px; /* 버튼 사이 간격 */
  padding-left: 0;
  list-style: none;
}

/* 모든 버튼의 기본 스타일 */
.maul-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 마우스를 올렸을 때 스타일 */
.maul-pagination .page-numbers:hover {
  background: #f5f5f5;
  border-color: #ccc;
  color: #333;
}

/* 현재 페이지 버튼 스타일 */
.maul-pagination .page-numbers.current {
  background: #333;
  border-color: #333;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

/* 이전/다음 글자 버튼 스타일 */
.maul-pagination .prev,
.maul-pagination .next {
  font-weight: 500;
}

/* ==========================================================================
   5.0 Share Buttons (공유하기 버튼 스타일 - V2 로고 버전)
   ========================================================================== */

/* 버튼들을 감싸는 영역 */
.share-buttons {
  display: flex; /* 버튼들을 가로로 나열 */
  flex-wrap: wrap; /* 화면 좁아지면 줄바꿈 */
  gap: 10px; /* 버튼 사이의 간격 */
  align-items: center; /* 버튼들 세로 중앙 정렬 */
}

/* 모든 공유 버튼의 기본 스타일 */
.share-button {
  display: inline-block;
  padding: 10px 15px; /* 버튼 내부 여백 (텍스트 버튼 기본값) */
  border: none; /* 테두리 없음 */
  border-radius: 5px; /* 살짝 둥근 모서리 */
  color: #ffffff; /* 글자색은 흰색 */
  font-size: 14px; /* 글자 크기 */
  font-weight: bold; /* 굵은 글씨 */
  text-decoration: none; /* 링크 밑줄 제거 */
  cursor: pointer; /* 마우스 올리면 손가락 모양 */
  transition: opacity 0.2s; /* 부드러운 호버 효과 */
  line-height: 1.2; /* 줄 간격 */
  box-sizing: border-box; /* 패딩을 크기에 포함 */
}

/* 마우스 올렸을 때 살짝 투명하게 */
.share-button:hover {
  opacity: 0.85;
  color: #ffffff; /* 호버 시에도 글자색 유지 */
}

/* (필수) 링크 복사 버튼은 <button> 태그이므로 글꼴 등을 상속받도록 설정 */
.share-button.share-copy-link {
  font-family: inherit; /* 테마 기본 글꼴 상속 */
  background-color: #555555; /* 링크 복사 버튼 (회색) */
}

/* --- 정사각형 로고 버튼 스타일 --- */
.share-logo-button {
  width: 44px; /* 정사각형 가로 크기 */
  height: 44px; /* 정사각형 세로 크기 */
  padding: 10px; /* SVG 아이콘 주변 여백 */
  display: flex; /* SVG를 중앙 정렬하기 위함 */
  align-items: center;
  justify-content: center;
}

/* 로고 버튼 안의 SVG 스타일 */
.share-logo-button svg {
  width: 24px; /* 아이콘 크기 */
  height: 24px; /* 아이콘 크기 */
  display: block;
}

/* 2. 카카오톡 버튼 (노란색) - ★★★ 이 부분을 아래 코드로 덮어쓰세요. ★★★ */
.share-button.share-kakao {
  background-color: #fee500;
  font-size: 20px; /* 큼지막한 'K'를 위한 크기 설정 */
}

/* 카카오 버튼의 모든 링크 상태(기본, 방문, 호버, 포커스)에서 색상을 검은색으로 고정 */
.share-button.share-kakao,
.share-button.share-kakao:link,
.share-button.share-kakao:visited,
.share-button.share-kakao:hover,
.share-button.share-kakao:focus,
.share-button.share-kakao:active {
  color: #191919 !important; /* !important로 모든 링크 스타일을 무시하고 강제 적용 */
  text-decoration: none; /* 혹시 모를 밑줄도 확실히 제거 */
}

/* 3. 페이스북 버튼 (파란색) */
.share-button.share-facebook {
  background-color: #1877f2;
}

/* ==========================================================================
   6.0 Mobile Responsive Styles (모바일 대응 스타일)
   ========================================================================== */

/* 화면 너비가 768px 이하일 때 (태블릿, 모바일) */
@media screen and (max-width: 768px) {
  /* 2/3 너비를 100%로 강제 */
  .content-area,
  .category-main-content,
  .right-sidebar,
  .widget-area {
    width: 100% !important; /* 너비를 100%로 강제 */
    max-width: 100%; /* 최대 너비 제한 해제 */
    flex: 1 1 100%; /* Flex 너비도 100% */
    padding: 0 15px; /* 좌우 여백 재설정 */
  }

  /* 레이아웃 래퍼가 flex인 경우 block으로 변경 */
  .category-layout-wrapper,
    .new-homepage-layout,          /* [홈페이지] 2단 그리드 해제 */
    .maul-container-with-sidebar {
    /* [싱글페이지] 2단 그리드 해제 */
    display: block;
  }

  /* 사이드바는 본문 아래로 (위젯 영역) */
  .right-sidebar,
  .widget-area {
    margin-top: 30px;
  }

  /* --- [A] 사이드바 숨기기 (요청 사항 2) --- */
  /* ★ 1. 싹 다 숨기기 (홈페이지, 싱글, 카테고리) */
  .home .right-sidebar,
  .home .widget-area,
  .single .right-sidebar,
  .single .widget-area,
  .category .right-sidebar,
  .category .widget-area {
    display: none !important; /* !important로 강제 숨김 */
  }

  /* --- [B] 목록 스타일 (작은 썸네일 좌측) (요청 사항 1) --- */

  /* 'kuki-list-item-dense' */
  .kuki-list-item-dense {
    display: flex;
    flex-direction: row; /* ★ 세로 쌓기(column)를 가로(row)로 변경 */
    align-items: flex-start; /* 세로 상단 정렬 */
  }

  /* 썸네일 (대표 이미지) 영역 수정 */
  .kuki-list-thumbnail-dense {
    width: 100px; /* ★ '아주 작게' (100px) */
    height: 80px; /* 썸네일 높이 (비율 맞춤) */
    flex-shrink: 0; /* 찌그러지지 않게 */
    margin-bottom: 0; /* ★ 하단 여백 제거 (기존 10px) */
  }

  /* 썸네일 안의 이미지 크기 조정 */
  .kuki-list-thumbnail-dense img {
    width: 100%;
    height: 100%; /* ★ 80px 높이에 맞춤 */
    object-fit: cover; /* 찌그러짐 방지 */
  }

  /* 컨텐츠 영역 (제목, 본문) 수정 */
  .kuki-list-content-dense {
    width: auto; /* ★ 100% 대신 자동으로 */
    flex: 1; /* ★ 남은 공간 꽉 채우기 */
    padding-left: 0;
  }

  /* (옵션) 모바일에서 요약 텍스트 숨기기 (필요시 주석 해제) */
  /*
    .entry-summary-dense {
        display: none;
    }
    */

  /* --- [C] 헤더 및 푸터 (기존 모바일 스타일 유지) --- */
  /* (이 코드는 님이 주신 CSS에 이미 포함되어 있던 내용입니다) */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .info-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-logo {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .footer-address .footer-links {
    display: none;
  }
  .footer-sitemap {
    display: none;
  }

  #site-navigation {
    display: none;
  }
  .menu-toggle-button,
  .mobile-navigation {
    display: block;
  }

  /* --- [D] 싱글 포스트 푸터 (관리자/공유 버튼) 모바일 대응 --- */
  .single .entry-footer {
    flex-direction: column; /* ★ 가로 정렬을 세로로 변경 */
    align-items: flex-start; /* 세로로 쌓고 왼쪽 정렬 */
    gap: 25px; /* ★ 각 섹션(메타, 관리, 공유) 사이에 간격 추가 */
  }

  .single .entry-footer .meta-section {
    width: 100%; /* 메타 섹션은 너비 100% */
  }

  .single .entry-footer .admin-actions,
  .single .entry-footer .share-buttons {
    /* (이 영역들은 이미 flex-wrap: wrap이 걸려있어서 
         모바일에서도 버튼이 잘 정렬됩니다) */
  }

  /* --- [E] 헤더 모바일 레이아웃 (로고, 검색창) (★ 새로 추가) --- */
  .header-grid {
    display: block; /* 3단 그리드를 해제하고 세로로 쌓음 */
  }

  .header-left {
    display: none; /* 왼쪽 빈 공간은 모바일에서 숨김 */
  }

  .header-center {
    /* 로고가 가운데 정렬되어 있으므로 그대로 둠 */
  }

  .header-right {
    margin-top: 20px; /* 로고와 검색창 사이에 간격 */
  }

  /* 검색창이 화면 너비를 꽉 채우도록 */
  .header-right .search-form {
    margin: 0 auto; /* 검색창을 가운데 정렬 */
    width: 100%; /* 너비를 100%로 설정 */
    max-width: 100%; /* 최대 너비 제한 해제 */
  }
}

/* ==========================================================================
   7.0 Mobile Navigation (모바일 햄버거 + 아코디언 메뉴)
   ========================================================================== */

/* 1. 햄버거 버튼 (기본 숨김) */
.menu-toggle-button {
  display: none; /* ★ 데스크탑에서는 숨김 */
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 1001;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}
.menu-toggle-button .icon-bar {
  display: block;
  width: 22px;
  height: 3px;
  background-color: #333;
  margin: 4px 0;
  transition: all 0.3s;
}
.menu-toggle-button.toggled .icon-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle-button.toggled .icon-bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle-button.toggled .icon-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 2. 모바일 메뉴 영역 (기본 숨김) */
.mobile-navigation {
  display: none; /* ★ 데스크탑에서는 숨김 */
  position: fixed;
  top: 0;
  left: -300px; /* 화면 왼쪽 밖으로 숨김 */
  width: 300px;
  height: 100vh;
  background: #222;
  z-index: 1000;
  transition: left 0.3s ease;
  overflow-y: auto;
  padding-top: 80px;
}
.mobile-navigation.toggled {
  left: 0; /* 열렸을 때 */
}

/* 3. 모바일 메뉴 내부 스타일 */
.mobile-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-navigation ul li a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #444;
}
.mobile-navigation ul li a:hover {
  background: #333;
}

/* 5. 아코디언 하위 메뉴 */
.mobile-navigation ul .sub-menu {
  display: none; /* 기본 숨김 */
  background: #333;
}
.mobile-navigation ul .sub-menu.toggled {
  display: block; /* 토글 시 보임 */
}
.mobile-navigation ul .sub-menu li a {
  padding-left: 40px;
  font-size: 14px;
}

/* ==========================================================================
   8.0 Mobile Media Queries
   ========================================================================== */

/* 화면 너비가 1024px (태블릿) 이하일 때 */
@media screen and (max-width: 1024px) {
  /* 1. 데스크탑 메뉴 숨기기 */
  #site-navigation {
    display: none;
  }

  /* 2. 모바일 햄버거 버튼 + 메뉴 보이기 */
  .menu-toggle-button,
  .mobile-navigation {
    display: block;
  }
}

/* ==========================================================================
   9.0 모바일 카테고리 탭 스타일 (추가)
   ========================================================================== */

/* --- [A] 기본 구조 및 데스크탑/모바일 전환 --- */

/* 데스크탑에서는 모바일 탭 숨기기 (769px 이상) */
.mobile-category-tabs {
  display: none;
}

/* 모바일에서는 데스크탑 리스트 숨기기 (768px 이하) */
@media screen and (max-width: 768px) {
  .desktop-category-list {
    display: none;
  }
  .mobile-category-tabs {
    display: block;
  }

  /* (참고) 포토/동영상 섹션도 모바일에서는 세로로 쌓기 */
  .media-section-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* --- [B] 모바일 탭 버튼 (2열 3행) --- */
.mobile-tab-nav .tab-buttons {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* ★ 요청하신 2열 그리드 */
  gap: 10px; /* 버튼 사이 간격 */
}

.mobile-tab-nav .tab-button {
  width: 100%;
  padding: 15px 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.3;

  /* 버튼 높이가 달라도 동일하게 보이도록 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

/* 활성화된 탭 버튼 */
.mobile-tab-nav .tab-button.active {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

/* --- [C] 모바일 탭 컨텐츠 패널 --- */

/* 모든 패널 기본 숨기기 */
.tab-content-panels .tab-panel {
  display: none;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 5px;
}

/* 활성화된 패널만 보이기 */
.tab-content-panels .tab-panel.active {
  display: block;
}

/* 1. 최신 기사 (썸네일 + 제목) */
.tab-latest-post .thumbnail-link {
  display: block;
  margin-bottom: 15px;
}
.tab-latest-post .thumbnail-link img {
  width: 100%;
  height: 180px; /* ★ 썸네일 높이 강제 고정 */
  object-fit: cover;
  border-radius: 4px;
}
.placeholder-thumbnail-tab {
  width: 100%;
  height: 180px; /* 썸네일 높이와 비슷하게 */
  background: #f0f0f0;
  border: 1px dashed #ccc;
}
.tab-latest-post .entry-title-latest {
  font-size: 20px;
  margin: 0 0 15px 0;
}
.tab-latest-post .entry-title-latest a {
  text-decoration: none;
  color: #222;
}

/* 구분선 */
.tab-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0;
}

/* 2. 다음 기사 2개 (제목만) */
.tab-title-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-title-list .title-list-item {
  margin-bottom: 12px;
  padding-left: 20px; /* '•' 아이콘을 위한 공간 */
  position: relative;
}
.tab-title-list .title-list-item:last-child {
  margin-bottom: 0;
}
.tab-title-list .title-list-item::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 18px;
  color: #555;
}
.tab-title-list .title-list-item a {
  font-size: 16px;
  text-decoration: none;
  color: #444;
}
.tab-title-list .title-list-item a:hover {
  color: #0073aa;
}
.no-more-posts {
  font-size: 14px;
  color: #888;
  list-style: none;
}

/* --- [D] 모바일 탭 '전체보기' 링크 --- */
.tab-more-link {
  display: block; /* 버튼처럼 한 줄 다 차지 */
  width: 100%;
  text-align: center;
  padding: 12px 15px;
  margin-top: 25px; /* 위 요소(제목 리스트)와 간격 */
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s;
}
.tab-more-link:hover {
  background-color: #e9e9e9;
}

/* ==========================================================================
   10.0 공용 슬라이더 스타일 (V2: 레이아웃 찐빠 수정)
   ========================================================================== */

/* --- [A] 데스크탑/모바일 전환 (최근기사 슬라이더 전용) --- */

/* 데스크탑에서는 모바일 슬라이더 숨기기 */
.mobile-top-slider {
  display: none;
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
  /* 데스크탑 3단 그리드 숨기기 */
  .desktop-top-grid {
    display: none;
  }
  /* 모바일 슬라이더 보이기 */
  .mobile-top-slider {
    display: block;
    margin: 0 -15px 30px;
  }
}

/* --- [B] 공용 슬라이더 내부 스타일 (모든 슬라이더에 적용) --- */

/*
 * 그리드 자식 요소가 컨텐츠(슬라이더) 크기만큼 
 * 무한정 커지는 것을 방지합니다.
 */
.main-article-section,
.photo-slider-section,
.video-slider-section {
  min-width: 0;
}

/* 슬라이더 제목 (H2) - 모바일 전용 */
.mobile-section-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 15px 20px 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}

/* Swiper 컨테이너 공통 */
.recent-posts-swiper,
.photo-swiper-container,
.video-swiper-container {
  padding-bottom: 30px; /* 페이지네이션(점)을 위한 공간 */

  /*
     * 슬라이더가 컨테이너 밖으로 뚫고 나가는 것을 방지합니다.
     */
  overflow: hidden;
}
.recent-posts-swiper {
  padding-left: 15px;
  padding-right: 15px;
}

/* 개별 슬라이드 공통 */
.recent-posts-swiper .swiper-slide,
.photo-swiper-container .swiper-slide,
.video-swiper-container .swiper-slide {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.slider-article {
  display: flex;
  flex-direction: column;
}

/* 썸네일 공통 */
.slider-thumbnail {
  display: block;
  line-height: 0;
}
.slider-thumbnail img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.placeholder-thumbnail-slider {
  width: 100%;
  height: 190px;
  background: #f0f0f0;
}

/* 슬라이더 컨텐츠 (제목+요약) 공통 */
.slider-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.slider-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 포토/비디오 슬라이더는 제목만 있으므로 하단 여백 제거 */
.photo-swiper-container .slider-title,
.video-swiper-container .slider-title {
  margin-bottom: 0;
}

.slider-title a {
  text-decoration: none;
  color: #222;
}

/* '최근기사' 슬라이더에만 요약 텍스트 표시 */
.slider-summary {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 슬라이더 페이지네이션 (점) 스타일 공통 */
.swiper-pagination-bullet {
  background: #ccc;
  opacity: 0.8;
}
.swiper-pagination-bullet-active {
  background: #333;
  opacity: 1;
}