/*
Theme Name: GeneratePress Modern
Theme URI: https://example.com/generatepress-modern/
Description: 현대적이고 직관적인 GeneratePress 차일드 테마입니다. 넉넉한 여백, 한국어 가독성에 최적화된 타이포그래피, 부드러운 카드 레이아웃과 절제된 포인트 컬러, 다크 모드 자동 대응이 특징입니다. 블로그·정보성 콘텐츠에 적합합니다.
Author: 사용자 정의
Author URI: https://example.com
Template: generatepress
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gp-modern
Tags: blog, one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* v1.0.1 — 모바일 가로 넘침(카드가 화면 밖으로 나가는 현상) 방지 규칙 추가 */

/* =========================================================
   1. 디자인 토큰 (색상 · 타이포 · 간격)
   ========================================================= */
:root {
    /* 색상 - 라이트 */
    --gm-bg: #ffffff;
    --gm-bg-soft: #f7f8fa;
    --gm-surface: #ffffff;
    --gm-text: #1a1d21;
    --gm-text-soft: #4a5058;
    --gm-text-muted: #8b929c;
    --gm-line: #e8eaed;
    --gm-line-strong: #d7dbe0;

    /* 포인트 컬러 */
    --gm-accent: #2f6fed;
    --gm-accent-hover: #1e5bd6;
    --gm-accent-soft: #eef4ff;
    --gm-accent-contrast: #ffffff;

    /* 타이포 */
    --gm-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
    --gm-font-mono: "JetBrains Mono", "D2Coding", ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;

    --gm-fs-base: 1.0625rem;   /* 17px */
    --gm-lh-base: 1.8;
    --gm-fs-sm: 0.9375rem;     /* 15px */
    --gm-fs-xs: 0.8125rem;     /* 13px */

    /* 간격 · 모양 */
    --gm-radius: 14px;
    --gm-radius-sm: 8px;
    --gm-gap: 1.5rem;
    --gm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --gm-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
    --gm-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
    --gm-transition: 0.18s ease;

    /* 본문 폭 */
    --gm-content-width: 720px;
}

/* 다크 모드 자동 대응 (테마 설정과 무관하게 시스템 선호 존중) */
@media (prefers-color-scheme: dark) {
    :root {
        --gm-bg: #14161a;
        --gm-bg-soft: #1a1d22;
        --gm-surface: #1e2127;
        --gm-text: #e6e8eb;
        --gm-text-soft: #b3b8c0;
        --gm-text-muted: #7d848e;
        --gm-line: #2b2f36;
        --gm-line-strong: #3a3f47;
        --gm-accent: #5a8dff;
        --gm-accent-hover: #79a2ff;
        --gm-accent-soft: #1c2740;
        --gm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --gm-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        --gm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    }
}

/* =========================================================
   2. 기본 · 타이포그래피
   ========================================================= */
body,
button,
input,
select,
textarea {
    font-family: var(--gm-font-sans);
}

body {
    font-size: var(--gm-fs-base);
    line-height: var(--gm-lh-base);
    color: var(--gm-text);
    background-color: var(--gm-bg-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.003em;
    word-break: keep-all;       /* 한국어 어절 단위 줄바꿈 */
    overflow-wrap: anywhere;    /* 긴 URL·영문 토큰은 강제 줄바꿈 (모바일 가로 넘침 방지) */
}

/* 모바일 가로 스크롤(카드가 화면 밖으로 나가는 현상) 원천 차단 */
.site-content,
.inside-article,
.entry-content,
.widget {
    box-sizing: border-box;
    max-width: 100%;
}

/* 넓은 미디어·임베드가 뷰포트를 넘지 않도록 */
.entry-content img,
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gm-text);
    line-height: 1.35;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.entry-content h2 {
    font-size: 1.55rem;
    margin-top: 2.6em;
    margin-bottom: 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--gm-line);
}

.entry-content h3 {
    font-size: 1.25rem;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.entry-content h4 {
    font-size: 1.08rem;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    color: var(--gm-text-soft);
}

.entry-content p {
    margin-bottom: 1.45em;
    color: var(--gm-text-soft);
}

.entry-content > p:first-of-type {
    color: var(--gm-text);
}

a {
    color: var(--gm-accent);
    text-decoration: none;
    transition: color var(--gm-transition);
}

a:hover,
a:focus {
    color: var(--gm-accent-hover);
}

.entry-content a {
    text-decoration: underline;
    text-decoration-color: var(--gm-line-strong);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.entry-content a:hover {
    text-decoration-color: var(--gm-accent);
}

strong, b {
    font-weight: 700;
    color: var(--gm-text);
}

/* 리스트 */
.entry-content ul,
.entry-content ol {
    margin: 0 0 1.6em;
    padding-left: 1.4em;
    color: var(--gm-text-soft);
}

.entry-content li {
    margin-bottom: 0.5em;
}

.entry-content ul li::marker {
    color: var(--gm-accent);
}

/* 인용구 */
.entry-content blockquote {
    margin: 1.8em 0;
    padding: 1em 1.4em;
    border-left: 4px solid var(--gm-accent);
    background: var(--gm-accent-soft);
    border-radius: 0 var(--gm-radius-sm) var(--gm-radius-sm) 0;
    color: var(--gm-text-soft);
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* 코드 */
.entry-content code {
    font-family: var(--gm-font-mono);
    font-size: 0.9em;
    background: var(--gm-bg-soft);
    border: 1px solid var(--gm-line);
    border-radius: 5px;
    padding: 0.12em 0.4em;
}

.entry-content pre {
    font-family: var(--gm-font-mono);
    font-size: var(--gm-fs-sm);
    background: #1e2127;
    color: #e6e8eb;
    padding: 1.2em 1.4em;
    border-radius: var(--gm-radius-sm);
    overflow-x: auto;
    line-height: 1.6;
    margin: 1.8em 0;
}

.entry-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

/* 이미지 · 표 */
.entry-content img {
    border-radius: var(--gm-radius-sm);
    height: auto;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: var(--gm-fs-sm);
}

.entry-content th,
.entry-content td {
    border: 1px solid var(--gm-line);
    padding: 0.7em 0.9em;
    text-align: left;
}

.entry-content th {
    background: var(--gm-bg-soft);
    font-weight: 700;
}

hr {
    border: none;
    border-top: 1px solid var(--gm-line);
    margin: 2.6em 0;
}

/* =========================================================
   3. 레이아웃 · 사이트 컨테이너
   ========================================================= */
.site-content {
    background-color: var(--gm-bg-soft);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .site-content {
    background-color: var(--gm-surface);
}

/* 본문 컨테이너를 카드처럼 */
.separate-containers .inside-article {
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-sm);
    padding: 2.4em 2.6em;
    transition: box-shadow var(--gm-transition), transform var(--gm-transition);
}

.blog .separate-containers .inside-article:hover,
.archive .separate-containers .inside-article:hover,
.search .separate-containers .inside-article:hover {
    box-shadow: var(--gm-shadow);
    transform: translateY(-2px);
}

/* 싱글 글은 hover 이동 효과 제외 */
.single .separate-containers .inside-article:hover {
    transform: none;
}

/* 본문 가독 폭 */
.single-post .entry-content,
.page .entry-content {
    max-width: var(--gm-content-width);
}

/* =========================================================
   4. 헤더 · 네비게이션
   ========================================================= */
.site-header {
    background-color: var(--gm-surface);
    border-bottom: 1px solid var(--gm-line);
}

.main-title,
.site-title {
    font-weight: 800;
    letter-spacing: -0.03em;
}

.main-navigation {
    background-color: var(--gm-surface);
    border-bottom: 1px solid var(--gm-line);
}

.main-navigation .main-nav ul li a {
    font-weight: 600;
    font-size: var(--gm-fs-sm);
    transition: color var(--gm-transition), background-color var(--gm-transition);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--gm-accent);
}

.main-navigation .main-nav ul li.current-menu-item > a {
    box-shadow: inset 0 -3px 0 var(--gm-accent);
}

/* =========================================================
   5. 글 제목 · 메타
   ========================================================= */
.entry-title {
    font-size: 1.9rem;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

.entry-title a {
    color: var(--gm-text);
}

.entry-title a:hover {
    color: var(--gm-accent);
}

.single .entry-title {
    font-size: 2.2rem;
}

.entry-meta {
    font-size: var(--gm-fs-xs);
    color: var(--gm-text-muted);
}

.entry-meta a {
    color: var(--gm-text-muted);
}

.entry-meta a:hover {
    color: var(--gm-accent);
}

/* 카테고리 배지 */
.entry-meta .cat-links a {
    display: inline-block;
    background: var(--gm-accent-soft);
    color: var(--gm-accent);
    padding: 0.15em 0.7em;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--gm-fs-xs);
}

/* Read more 버튼 */
.read-more,
.entry-content .read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.4em;
    font-weight: 600;
    text-decoration: none;
    color: var(--gm-accent);
}

.read-more:hover {
    gap: 0.6em;
}

.read-more::after {
    content: "→";
    transition: transform var(--gm-transition);
}

/* =========================================================
   6. 버튼 · 폼 요소
   ========================================================= */
button,
.button,
input[type="submit"],
.wp-block-button__link {
    background-color: var(--gm-accent);
    color: var(--gm-accent-contrast);
    border: none;
    border-radius: var(--gm-radius-sm);
    padding: 0.7em 1.4em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--gm-transition), transform var(--gm-transition);
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--gm-accent-hover);
    transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background: var(--gm-surface);
    color: var(--gm-text);
    border: 1px solid var(--gm-line-strong);
    border-radius: var(--gm-radius-sm);
    padding: 0.65em 0.85em;
    transition: border-color var(--gm-transition), box-shadow var(--gm-transition);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gm-accent);
    box-shadow: 0 0 0 3px var(--gm-accent-soft);
}

/* =========================================================
   7. 사이드바 위젯
   ========================================================= */
.widget {
    background: var(--gm-surface);
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-sm);
    padding: 1.5em 1.6em;
    margin-bottom: var(--gm-gap);
}

.widget .widget-title {
    font-size: 1.15rem;
    margin-bottom: 0.9em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--gm-line);
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget ul li {
    padding: 0.5em 0;
    border-bottom: 1px dashed var(--gm-line);
    font-size: var(--gm-fs-sm);
}

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

.widget ul li a {
    color: var(--gm-text-soft);
}

.widget ul li a:hover {
    color: var(--gm-accent);
}

/* =========================================================
   8. 페이지네이션
   ========================================================= */
.generate-columns-container .paging-navigation,
nav.paging-navigation,
nav.navigation {
    margin-top: var(--gm-gap);
}

.nav-links a,
.nav-links .current,
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    height: 2.4em;
    padding: 0 0.6em;
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-radius-sm);
    background: var(--gm-surface);
    color: var(--gm-text-soft);
    font-weight: 600;
    transition: all var(--gm-transition);
}

.page-numbers.current {
    background: var(--gm-accent);
    border-color: var(--gm-accent);
    color: var(--gm-accent-contrast);
}

a.page-numbers:hover {
    border-color: var(--gm-accent);
    color: var(--gm-accent);
}

/* =========================================================
   9. 댓글
   ========================================================= */
.comments-area {
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-radius);
    padding: 2em 2.2em;
}

.comment-body {
    padding: 1.2em 0;
    border-bottom: 1px solid var(--gm-line);
}

.comment-author .fn {
    font-weight: 700;
    color: var(--gm-text);
}

.comment-meta {
    font-size: var(--gm-fs-xs);
    color: var(--gm-text-muted);
}

/* =========================================================
   10. 푸터
   ========================================================= */
.site-footer,
.site-info {
    background-color: var(--gm-surface);
    border-top: 1px solid var(--gm-line);
    color: var(--gm-text-muted);
    font-size: var(--gm-fs-sm);
}

.site-info a {
    color: var(--gm-text-soft);
}

/* =========================================================
   11. 접근성 · 유틸
   ========================================================= */
:focus-visible {
    outline: 2px solid var(--gm-accent);
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 맨 위로 버튼(GeneratePress 백투탑) */
.generate-back-to-top {
    background-color: var(--gm-accent);
    border-radius: 50%;
    box-shadow: var(--gm-shadow);
}

/* 부드러운 스크롤 */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* =========================================================
   12. 반응형
   ========================================================= */
@media (max-width: 768px) {
    :root {
        --gm-fs-base: 1.0625rem;    /* 17px — 데스크톱과 동일 (한국어 가독성) */
    }

    .separate-containers .inside-article {
        padding: 1.6em 1.4em;
        border-radius: var(--gm-radius-sm);
    }

    /* 카드가 화면 가장자리에 붙지 않도록 좌우 숨 여백
       (더/덜 띄우려면 아래 8px 값만 조절하세요) */
    .separate-containers .inside-article,
    .widget,
    .comments-area {
        margin-left: 8px;
        margin-right: 8px;
    }

    .single .entry-title {
        font-size: 1.7rem;
    }

    .entry-title {
        font-size: 1.4rem;
    }

    .entry-content h2 {
        font-size: 1.35rem;
    }

    /* 소제목 등 긴 제목의 오른쪽 여백 확보 */
    .single .entry-title,
    .entry-title {
        overflow-wrap: anywhere;
    }

    /* 칼럼 많은 표는 카드를 뚫지 말고 카드 안에서 가로 스크롤 */
    .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}