/*
Theme Name:   GameDevLLM Child
Description:  GameDevLLM.com 블로그 자식 테마
Template:     generatepress
Version:      1.0.1
*/

/*
 * 부모 테마 폴더명을 Template 값에 입력하세요.
 * 예: 부모 테마가 "astra"면 → Template: astra
 *     부모 테마가 "generatepress"면 → Template: generatepress
 */

/* 포스트 본문 이미지 자동 중앙 정렬 */
.entry-content img {
    display: block;
    margin: 0 auto;
    width: auto !important;
    max-width: 100%;
}

/* 대표 이미지(썸네일) 중앙 정렬 */
.post-image,
.featured-image {
    text-align: center;
}

.post-image img,
.featured-image img,
img.wp-post-image {
    display: block;
    margin: 0 auto;
    width: auto !important;
    max-width: 100%;
}

/* ───────────────────────────────────────────
   홈페이지 레이아웃 — 히어로 + 카드 그리드
   ─────────────────────────────────────────── */

/* 홈 페이지 배경 */
.home .site-content,
.home #page {
    background-color: #0f0f0f;
}

.gdl-home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* 히어로 */
.gdl-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: #1a1a1a;
    border-radius: 16px;
    padding: 1.6rem;
    margin-bottom: 2.4rem;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

.gdl-hero:hover {
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

/* 화이트 오버레이 */
.gdl-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    pointer-events: none;
    transition: background 0.2s;
}

.gdl-hero:hover::after {
    background: rgba(255, 255, 255, 0.04);
}

.gdl-hero__image {
    overflow: hidden;
    border-radius: 10px;
}

.gdl-hero__image img,
.gdl-hero__image--placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: #333;
    transition: transform 0.35s ease;
}

.gdl-hero:hover .gdl-hero__image img {
    transform: scale(1.04);
}

.gdl-date {
    font-size: 0.82rem;
    color: #888;
    margin: 0 0 0.6rem;
}

.gdl-hero__title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gdl-hero__title {
    color: #fff;
}

.gdl-hero:hover .gdl-hero__title {
    color: #00b4d8;
}

.gdl-hero__excerpt {
    color: #bbb;
    line-height: 1.75;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gdl-btn {
    display: inline-block;
    background: #00b4d8;
    color: #fff;
    padding: 0.55rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.gdl-btn:hover {
    background: #0096c7;
    color: #fff;
}

/* 카드 그리드 */
.gdl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.gdl-card {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s;
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.gdl-card:hover {
    transform: translateY(-3px);
    color: inherit;
    text-decoration: none;
}

/* 화이트 오버레이 */
.gdl-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    border-radius: 12px;
    pointer-events: none;
    transition: background 0.2s;
}

.gdl-card:hover::after {
    background: rgba(255, 255, 255, 0.04);
}

.gdl-card__thumb {
    position: relative;
    overflow: hidden;
}

.gdl-card__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.gdl-card:hover .gdl-card__thumb img {
    transform: scale(1.06);
}

.gdl-card__cats {
    position: absolute;
    bottom: 0.65rem;
    left: 0.75rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.gdl-card__cats span {
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.gdl-card__body {
    padding: 1.1rem 1.25rem 1.4rem;
}

.gdl-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 0.6rem;
    color: #f0f0f0;
}

.gdl-card:hover .gdl-card__title {
    color: #00b4d8;
}

.gdl-card__excerpt {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.65;
    margin: 0;
}

/* 반응형 */
@media (max-width: 900px) {
    .gdl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .gdl-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gdl-hero__title {
        font-size: 1.5rem;
    }

    .gdl-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────────────────────────────────────────
   글로벌 다크 모드
   ─────────────────────────────────────────── */

/* 기본 배경 + 텍스트 */
html {
    scrollbar-gutter: auto;
}

@media (min-width: 769px) {
    html {
        scrollbar-gutter: stable;
    }
}

body {
    background-color: #0f0f0f;
    color: #d0d0d0;
    overflow-x: hidden;
}

#page {
    overflow-x: hidden;
}

/* 헤더 */
.site-header,
.inside-header,
.site-header .header-widget,
.top-bar {
    background-color: #141414;
    border-bottom: 1px solid #2a2a2a;
    color: #d0d0d0;
}

/* 네비게이션 바 배경 */
.nav-wrap,
.main-nav-wrap,
.inside-navigation,
.main-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav ul {
    background-color: #141414;
}

/* 네비게이션 링크 */
.main-navigation a,
.main-navigation .current-menu-item > a,
.main-navigation li a,
.main-navigation ul li a {
    color: #d0d0d0 !important;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a:hover,
.main-navigation li a:hover {
    color: #00b4d8 !important;
    background-color: transparent !important;
}

/* 검색·다크모드·RSS 포커스 영역 통일 */
.main-navigation .search-toggle {
    align-self: stretch;
}

/* 드롭다운 메뉴 */
.main-navigation ul ul,
.main-navigation .sub-menu {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
}

/* 모바일 메뉴 토글 */
button.menu-toggle,
.menu-toggle {
    color: #e0e0e0 !important;
    background: transparent !important;
    border-color: #bbb !important;
}

button.menu-toggle:hover {
    color: #00b4d8 !important;
    border-color: #00b4d8 !important;
}

/* 사이트 제목 / 로고 */
.site-title a,
.site-description {
    color: #f0f0f0;
}

/* 콘텐츠 영역 */
.site-content,
#page,
.content-area,
.inside-page-hero,
.page-hero-content {
    background-color: #0f0f0f;
}

/* 포스트/페이지 컨테이너 */
.inside-article,
.block-10,
.block-12,
.block-16 {
    background-color: #0f0f0f !important;
    color: #d0d0d0;
    padding-top: 10px !important;
}

/* 아카이브/카테고리 페이지 — 헤더 아래 여백 제거 */
.archive .site-main,
.category .site-main,
.tag .site-main,
.search .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.archive .content-area,
.category .content-area,
.tag .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.archive article.hentry:first-of-type,
.category article.hentry:first-of-type,
.archive .hentry:first-child,
.category .hentry:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.post,
.page,
.type-post,
.type-page,
article.post,
article.page {
    background-color: #0f0f0f;
    color: #d0d0d0;
}

/* 포스트 본문 */
.entry-title,
.entry-title a {
    color: #f0f0f0;
}

.entry-title a:hover {
    color: #00b4d8;
}

.entry-content,
.entry-summary {
    color: #d0d0d0;
}

.entry-content h2 {
    font-size: 1.45rem;
    margin-bottom: 0.25em;
    color: #00b4d8;
}

.entry-content h3 {
    font-size: 1.15rem;
    margin-bottom: 0.2em;
    color: #5bc8e0;
}

.entry-content h4 {
    margin-bottom: 0.2em;
    color: #a0d8e8;
}

.entry-content a {
    color: #00b4d8;
}

.entry-content a:hover {
    color: #0096c7;
}

/* 메타 정보 */
.entry-meta,
.entry-meta a,
.posted-on,
.byline,
.cat-links,
.tags-links {
    color: #888;
}

.entry-meta a:hover {
    color: #00b4d8;
}

/* 코드 블록 */
pre,
code,
.entry-content pre,
.entry-content code {
    background-color: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #2a2a2a;
}

pre,
.entry-content pre {
    overflow-x: auto;
}

/* 테이블 */
.entry-content table {
    border-color: #2a2a2a;
}

.entry-content th {
    background-color: #1a1a1a;
    color: #f0f0f0;
    border-color: #2a2a2a;
}

.entry-content td {
    border-color: #2a2a2a;
    color: #d0d0d0;
}

.entry-content tr:nth-child(even) td {
    background-color: #161616;
}

/* blockquote */
.entry-content blockquote {
    border-left-color: #00b4d8;
    color: #aaa;
    background-color: #1a1a1a;
}

/* 푸터 */
.site-footer,
.footer-bar,
.site-info,
.inside-footer-bar,
.footer-widgets,
.inside-footer-widgets {
    background-color: #141414 !important;
    color: #888 !important;
    border-top: 1px solid #2a2a2a;
    text-align: center;
}

.site-footer a,
.footer-bar a,
.site-info a {
    color: #aaa !important;
}

.site-footer a:hover,
.footer-bar a:hover,
.site-info a:hover {
    color: #00b4d8 !important;
}

/* 사이드바 */
.widget-area,
.sidebar,
.is-right-sidebar,
.inside-right-sidebar {
    background-color: #0f0f0f !important;
    color: #d0d0d0;
}

/* 위젯 박스 */
.widget,
.sidebar .widget,
.widget-area .widget {
    background-color: #1a1a1a !important;
    color: #d0d0d0;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.5rem;
}

.widget-title,
.widgettitle {
    color: #f0f0f0 !important;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

/* 위젯 링크 */
.widget a {
    color: #00b4d8;
}

.widget a:hover {
    color: #0096c7;
}

/* 최근 포스트 */
.widget_recent_entries ul li,
.widget ul li {
    border-bottom: 1px solid #2a2a2a;
    padding: 0.4rem 0;
    color: #d0d0d0;
}

.widget ul li:last-child {
    border-bottom: none;
}

/* 검색 박스 */
.search-field,
input[type="search"] {
    background-color: #1a1a1a;
    color: #d0d0d0;
    border-color: #333;
}

/* 모바일: nav 버튼은 햄버거 메뉴로 이동하므로 숨김 */
@media (max-width: 768px) {
    #gdl-theme-toggle,
    #gdl-rss-btn {
        display: none !important;
    }
}

/* 모바일 햄버거 메뉴 내 다크모드·RSS 버튼 */
.gdl-theme-menu-item,
.gdl-rss-menu-item {
    display: none;
}

@media (max-width: 768px) {
    .gdl-theme-menu-item,
    .gdl-rss-menu-item {
        display: block !important;
    }

    #gdl-theme-toggle-mobile {
        background: none;
        border: none;
        cursor: pointer;
        color: #d0d0d0;
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    #gdl-theme-toggle-mobile:hover { color: #00b4d8; }

    #gdl-theme-toggle-mobile .gdl-icon-sun  { display: inline; }
    #gdl-theme-toggle-mobile .gdl-icon-moon { display: none; }

    html.light-mode #gdl-theme-toggle-mobile .gdl-icon-sun  { display: none; }
    html.light-mode #gdl-theme-toggle-mobile .gdl-icon-moon { display: inline; }
    html.light-mode #gdl-theme-toggle-mobile { color: #555; }
}

/* Polylang 언어 스위처 — 국기 크기에 맞게 축소 */
.pll-parent-menu-item,
.menu-item.pll-parent-menu-item {
    width: auto !important;
    min-width: 0 !important;
}

.pll-parent-menu-item > a,
.menu-item.pll-parent-menu-item > a {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    min-width: 0 !important;
}

.pll-parent-menu-item .sub-menu,
.menu-item.pll-parent-menu-item .sub-menu {
    min-width: 0 !important;
    width: auto !important;
}

.pll-parent-menu-item .sub-menu .lang-item a,
.menu-item.pll-parent-menu-item .sub-menu li a {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    white-space: nowrap;
}

/* 헤더 검색 모달 */
.search-modal,
.search-modal-container,
.inside-search-modal,
.gp-modal,
.gp-search-modal,
.gp-modal__container {
    background-color: #141414 !important;
    border-bottom: 1px solid #2a2a2a;
}

.search-modal .search-field,
.search-modal input[type="search"],
.inside-search-modal input[type="search"],
.search-modal-input,
input.search-modal-input {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

.search-modal .search-field::placeholder,
.inside-search-modal input::placeholder,
.search-modal-input::placeholder {
    color: #666;
}

.search-modal .search-submit,
.search-modal button[type="submit"] {
    color: #d0d0d0;
}

/* 검색 모달 닫기 버튼 */
.search-modal .close-search,
.search-modal .close-button {
    color: #d0d0d0;
}

/* hr 구분선 */
hr,
.entry-content hr {
    border: none;
    border-top: 1px solid #555 !important;
    height: 0;
    margin: 1.8em 0;
}

/* ───────────────────────────────────────────
   검색 결과 페이지
   ─────────────────────────────────────────── */

/* 페이지 헤더 */
.page-header,
.search .page-header,
.archive .page-header {
    background-color: #0f0f0f !important;
    color: #f0f0f0;
    border-bottom: 1px solid #2a2a2a;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.inside-page-header {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

.page-header {
    margin-bottom: 10px !important;
}

.page-title,
.search .page-title,
.archive-title {
    color: #f0f0f0 !important;
    font-size: 1.5rem !important;
    margin: 0;
}

.archive-description,
.search .page-header p {
    color: #888;
}

/* 검색 결과 각 항목 */
.search .inside-article,
.search article {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    color: #d0d0d0;
}

/* 검색 결과 제목 */
.search .entry-title a {
    color: #f0f0f0;
}

.search .entry-title a:hover {
    color: #00b4d8;
}

/* 검색 결과 없음 */
.search .no-results,
.search .not-found {
    background-color: #1a1a1a !important;
    color: #d0d0d0;
    padding: 2rem;
    border-radius: 8px;
}

/* 검색 폼 (결과 페이지 내) */
.search-form .search-field,
.search .search-form input[type="search"] {
    background-color: #1a1a1a;
    color: #d0d0d0;
    border: 1px solid #333;
    border-radius: 4px;
}

.search-form .search-submit,
.search .search-form button {
    background-color: #00b4d8;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-form .search-submit:hover {
    background-color: #0096c7;
}

/* ───────────────────────────────────────────
   페이지네이션
   ─────────────────────────────────────────── */

.gdl-pagination {
    margin: 2.5rem 0 1rem;
    display: flex;
    justify-content: center;
}

.gdl-pagination ul {
    display: flex;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.gdl-pagination ul li a,
.gdl-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.75rem;
    border-radius: 6px;
    background: #1a1a1a;
    color: #d0d0d0;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid #2a2a2a;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.gdl-pagination ul li a:hover {
    background: #00b4d8;
    color: #fff;
    border-color: #00b4d8;
}

.gdl-pagination ul li span.current {
    background: #00b4d8;
    color: #fff;
    border-color: #00b4d8;
}

/* 라이트 모드 페이지네이션 */
html.light-mode .gdl-pagination ul li a,
html.light-mode .gdl-pagination ul li span {
    background: #fff;
    color: #333;
    border-color: #e0e0e0;
}

html.light-mode .gdl-pagination ul li a:hover,
html.light-mode .gdl-pagination ul li span.current {
    background: #00b4d8;
    color: #fff;
    border-color: #00b4d8;
}

/* ───────────────────────────────────────────
   테마 토글 버튼
   ─────────────────────────────────────────── */

#gdl-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #d0d0d0;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    align-self: stretch;
    line-height: 1;
    transition: color 0.2s;
}

#gdl-theme-toggle:hover {
    color: #00b4d8;
}

/* 다크 모드: 해 아이콘 표시 (클릭 시 라이트로 전환) */
#gdl-theme-toggle .gdl-icon-sun  { display: inline; }
#gdl-theme-toggle .gdl-icon-moon { display: none; }

/* 라이트 모드: 달 아이콘 표시 (클릭 시 다크로 전환) */
html.light-mode #gdl-theme-toggle .gdl-icon-sun  { display: none; }
html.light-mode #gdl-theme-toggle .gdl-icon-moon { display: inline; }
html.light-mode #gdl-theme-toggle { color: #555; }

/* RSS 피드 버튼 */
#gdl-rss-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #f26522 !important;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    align-self: stretch;
    line-height: 1;
    transition: color 0.2s;
    text-decoration: none;
}

#gdl-rss-btn svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

#gdl-rss-btn:hover {
    color: #ff8c00;
    text-decoration: none;
}

html.light-mode #gdl-rss-btn { color: #e5600f !important; }
html.light-mode #gdl-rss-btn:hover { color: #c4500d !important; }

/* ───────────────────────────────────────────
   라이트 모드 오버라이드
   ─────────────────────────────────────────── */

html.light-mode body {
    background-color: #fff;
    color: #333;
}

html.light-mode .site-header,
html.light-mode .inside-header,
html.light-mode .nav-wrap,
html.light-mode .main-nav-wrap,
html.light-mode .inside-navigation,
html.light-mode .main-navigation,
html.light-mode .main-navigation .main-nav,
html.light-mode .main-navigation .main-nav ul {
    background-color: #fff !important;
    border-bottom-color: #e8e8e8;
    color: #333;
}

html.light-mode .main-navigation a,
html.light-mode .main-navigation li a {
    color: #333 !important;
}

html.light-mode .main-navigation a:hover,
html.light-mode .main-navigation li a:hover {
    color: #00b4d8 !important;
    background-color: transparent !important;
}

html.light-mode .main-navigation ul ul,
html.light-mode .main-navigation .sub-menu {
    background-color: #fff;
    border-color: #e8e8e8;
}

html.light-mode .site-title a { color: #111; }

html.light-mode .site-content,
html.light-mode #page,
html.light-mode .content-area {
    background-color: #fff !important;
}

html.light-mode .inside-article,
html.light-mode .block-10,
html.light-mode .block-12,
html.light-mode .block-16,
html.light-mode .post,
html.light-mode .page,
html.light-mode .type-post,
html.light-mode .type-page {
    background-color: #fff !important;
    color: #333;
}

html.light-mode .entry-title,
html.light-mode .entry-title a { color: #111 !important; }
html.light-mode .entry-title a:hover { color: #00b4d8 !important; }
html.light-mode .entry-content { color: #333; }
html.light-mode .entry-content h2 { color: #0096c7; }
html.light-mode .entry-content h3 { color: #0284c7; }
html.light-mode .entry-content h4 { color: #0369a1; }
html.light-mode .entry-meta,
html.light-mode .entry-meta a { color: #666; }

html.light-mode pre,
html.light-mode code,
html.light-mode .entry-content pre,
html.light-mode .entry-content code {
    background-color: #f5f5f5;
    color: #333;
    border-color: #e0e0e0;
}

html.light-mode .entry-content table { border-color: #e0e0e0; }
html.light-mode .entry-content th {
    background-color: #f5f5f5;
    color: #111;
    border-color: #e0e0e0;
}
html.light-mode .entry-content td { border-color: #e0e0e0; color: #333; }
html.light-mode .entry-content tr:nth-child(even) td { background-color: #fafafa; }
html.light-mode .entry-content blockquote {
    background-color: #f9f9f9;
    color: #555;
}

html.light-mode hr,
html.light-mode .entry-content hr { border-top-color: #ccc !important; }

html.light-mode .site-footer,
html.light-mode .footer-bar,
html.light-mode .inside-footer-bar {
    background-color: #f5f5f5 !important;
    color: #666 !important;
    border-top-color: #e0e0e0;
}
html.light-mode .site-footer a,
html.light-mode .footer-bar a { color: #555 !important; }

html.light-mode .widget-area,
html.light-mode .sidebar,
html.light-mode .is-right-sidebar,
html.light-mode .inside-right-sidebar {
    background-color: #fff !important;
}
html.light-mode .widget,
html.light-mode .sidebar .widget {
    background-color: #f9f9f9 !important;
    border-color: #e0e0e0;
    color: #333;
}
html.light-mode .widget-title,
html.light-mode .widgettitle { color: #111 !important; border-bottom-color: #e0e0e0; }
html.light-mode .widget a { color: #0096c7; }
html.light-mode .widget ul li { border-bottom-color: #e0e0e0; color: #333; }

html.light-mode .search-field,
html.light-mode input[type="search"] {
    background-color: #fff;
    color: #333;
    border-color: #ccc;
}

html.light-mode .gp-modal__container,
html.light-mode .gp-modal,
html.light-mode .gp-search-modal,
html.light-mode .search-modal,
html.light-mode .search-modal-container {
    background-color: #fff !important;
    border-bottom-color: #e0e0e0;
}
html.light-mode .search-modal-input,
html.light-mode input.search-modal-input {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border-color: #ccc !important;
}
html.light-mode .search-modal-input::placeholder { color: #999; }

html.light-mode .page-header,
html.light-mode .search .page-header {
    background-color: #fff !important;
    color: #111;
    border-bottom-color: #e0e0e0;
}
html.light-mode .page-title,
html.light-mode .archive-title { color: #111 !important; }

html.light-mode .search .inside-article,
html.light-mode .search article {
    background-color: #f9f9f9 !important;
    border-color: #e0e0e0;
    color: #333;
}

/* 홈 히어로 & 카드 라이트 모드 */
html.light-mode .home .site-content,
html.light-mode .home #page { background-color: #f2f2f2; }
html.light-mode .gdl-home { background-color: #f2f2f2; }

html.light-mode .gdl-hero {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
html.light-mode .gdl-hero__title { color: #111; }
html.light-mode .gdl-hero:hover .gdl-hero__title { color: #00b4d8; }
html.light-mode .gdl-hero__excerpt { color: #555; }
html.light-mode .gdl-hero:hover::after { background: rgba(0,0,0,0.02); }

html.light-mode .gdl-card {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
html.light-mode .gdl-card__title { color: #111; }
html.light-mode .gdl-card:hover .gdl-card__title { color: #00b4d8; }
html.light-mode .gdl-card__excerpt { color: #666; }
html.light-mode .gdl-card:hover::after { background: rgba(0,0,0,0.02); }

/* ───────────────────────────────────────────
   카테고리 필터 바
   ─────────────────────────────────────────── */

.gdl-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2rem;
}

.gdl-filter__btn {
    border: 1px solid #444;
    border-radius: 20px;
    padding: 6px 18px;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    line-height: 1.4;
}

.gdl-filter__btn:hover {
    border-color: #00b4d8;
    color: #00b4d8;
}

.gdl-filter__btn.is-active {
    background: #00b4d8;
    border-color: #00b4d8;
    color: #fff;
}

/* ───────────────────────────────────────────
   카테고리 배지 (히어로·카드 본문 하단)
   ─────────────────────────────────────────── */

.gdl-cat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.9rem;
    margin-bottom: 0.6rem;
}

.gdl-cat-badge {
    display: inline-block;
    border: 1px solid #555;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.75rem;
    color: #999;
    cursor: default;
    transition: border-color 0.2s, color 0.2s;
    line-height: 1.5;
}

.gdl-cat-badge:hover {
    border-color: #00b4d8;
    color: #00b4d8;
}

/* ───────────────────────────────────────────
   필터 바·배지 라이트 모드
   ─────────────────────────────────────────── */

html.light-mode .gdl-filter__btn {
    border-color: #ccc;
    color: #555;
}
html.light-mode .gdl-filter__btn:hover {
    border-color: #00b4d8;
    color: #00b4d8;
}
html.light-mode .gdl-filter__btn.is-active {
    background: #00b4d8;
    border-color: #00b4d8;
    color: #fff;
}

html.light-mode .gdl-cat-badge {
    border-color: #ddd;
    color: #888;
}
html.light-mode .gdl-cat-badge:hover {
    border-color: #00b4d8;
    color: #00b4d8;
}
html.light-mode .gdl-date { color: #888; }

/* ───────────────────────────────────────────
   댓글 영역 — 다크 모드 (기본)
   ─────────────────────────────────────────── */

#comments,
.comments-area {
    background-color: #0f0f0f !important;
    color: #d0d0d0;
}

.comments-title,
.comment-reply-title {
    color: #f0f0f0;
}

/* 개별 댓글 */
.comment-list .comment,
.comment-list article {
    border-bottom: 1px solid #2a2a2a;
}

.comment-author .fn,
.comment-author .fn a {
    color: #f0f0f0;
}

.comment-metadata,
.comment-metadata a {
    color: #666;
    font-size: 0.82rem;
}

.comment-metadata a:hover {
    color: #00b4d8;
}

.comment-content {
    color: #d0d0d0;
}

.comment-content a {
    color: #00b4d8;
}

.comment-reply-link {
    color: #00b4d8;
    font-size: 0.82rem;
}

.comment-reply-link:hover {
    color: #0096c7;
}

/* 댓글 입력 폼 */
#respond,
.comment-respond {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.comment-form label {
    color: #aaa;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
#comment {
    background-color: #0f0f0f;
    color: #d0d0d0;
    border: 1px solid #333;
    border-radius: 4px;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus,
#comment:focus {
    border-color: #00b4d8;
    outline: none;
}

.comment-form input[type="submit"],
#submit {
    background-color: #00b4d8;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    transition: background 0.2s;
}

.comment-form input[type="submit"]:hover,
#submit:hover {
    background-color: #0096c7;
}

/* ───────────────────────────────────────────
   댓글 영역 — 라이트 모드 오버라이드
   ─────────────────────────────────────────── */

html.light-mode #comments,
html.light-mode .comments-area {
    background-color: #fff !important;
    color: #333;
}

html.light-mode .comments-title,
html.light-mode .comment-reply-title {
    color: #111;
}

html.light-mode .comment-list .comment,
html.light-mode .comment-list article {
    border-bottom-color: #e0e0e0;
}

html.light-mode .comment-author .fn,
html.light-mode .comment-author .fn a {
    color: #111;
}

html.light-mode .comment-metadata,
html.light-mode .comment-metadata a {
    color: #888;
}

html.light-mode .comment-content {
    color: #333;
}

html.light-mode #respond,
html.light-mode .comment-respond {
    background-color: #f9f9f9;
    border-color: #e0e0e0;
}

html.light-mode .comment-form label {
    color: #555;
}

html.light-mode .comment-form input[type="text"],
html.light-mode .comment-form input[type="email"],
html.light-mode .comment-form input[type="url"],
html.light-mode .comment-form textarea,
html.light-mode #comment {
    background-color: #fff;
    color: #333;
    border-color: #ccc;
}

/* ───────────────────────────────────────────
   Rail 사이드바 — 데스크탑 우측 고정 광고·위젯 영역
   ─────────────────────────────────────────── */

#gdl-rail {
    position: fixed;
    top: 120px;
    width: 200px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 100;
    scrollbar-width: none;
}

#gdl-rail::-webkit-scrollbar { display: none; }

/* 포스트 본문: GP 컨테이너 ~1100px → 브레이크포인트 1560px */
body.single #gdl-rail { left: calc(50% + 580px); }
@media (min-width: 1560px) { body.single #gdl-rail { display: flex; } }

/* 홈·아카이브: 컨테이너 ~1200px → 브레이크포인트 1660px */
body.home #gdl-rail,
body.archive #gdl-rail,
body.category #gdl-rail,
body.tag #gdl-rail { left: calc(50% + 630px); }
@media (min-width: 1660px) {
    body.home #gdl-rail,
    body.archive #gdl-rail,
    body.category #gdl-rail,
    body.tag #gdl-rail { display: flex; }
}

/* Rail 위젯 카드 — 다크 모드 (기본) */
/* margin-bottom 리셋: 기존 .widget { margin-bottom } 규칙이 flex gap과 중첩되는 것을 방지 */
#gdl-rail .widget { margin-bottom: 0 !important; }

.gdl-rail-widget {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 1rem;
}

.gdl-rail-widget-title {
    color: #f0f0f0;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2a2a2a;
}

/* ───────────────────────────────────────────
   코드 블록 복사하기 버튼
   ─────────────────────────────────────────── */
.gdl-code-block {
    position: relative;
}

.gdl-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.08);
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.72em;
    line-height: 1.6;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: 'Courier New', Consolas, monospace;
    z-index: 1;
    letter-spacing: 0.02em;
}

.gdl-copy-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #e2e8f0;
}

html.light-mode .gdl-copy-btn {
    background: rgba(0,0,0,0.06);
    color: #64748b;
    border-color: rgba(0,0,0,0.12);
}

html.light-mode .gdl-copy-btn:hover {
    background: rgba(0,0,0,0.12);
    color: #1e293b;
}

/* Rail 위젯 카드 — 라이트 모드 */
html.light-mode .gdl-rail-widget {
    background-color: #fff;
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

html.light-mode .gdl-rail-widget-title {
    color: #111;
    border-bottom-color: #e0e0e0;
}