/*
Theme Name: GeneratePress Clean
Theme URI: https://example.com/generatepress-clean/
Description: 사이드바 없는 단일 컬럼 전용의 심플·미니멀 GeneratePress 차일드 테마입니다. 넉넉한 여백과 한국어 가독성에 최적화된 타이포그래피, 카드·그림자를 걷어낸 에디토리얼 레이아웃, 하나의 절제된 포인트 컬러, 다크 모드 자동 대응이 특징입니다. 글에 집중하는 블로그·정보성 콘텐츠에 적합합니다.
Author: 사용자 정의
Author URI: https://example.com
Template: generatepress
Version: 1.0.0
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-clean
Tags: blog, one-column, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

/* =========================================================
   GeneratePress Clean
   - 사이드바 없는 단일 컬럼 전용 (functions.php 에서 강제)
   - 카드/그림자 없는 에디토리얼 미니멀
   - 글 읽기에 집중하는 넉넉한 여백 + 한국어 가독성
   ========================================================= */

/* =========================================================
   1. 디자인 토큰
   ========================================================= */
:root {
    /* 색상 - 라이트 */
    --gc-bg: #ffffff;          /* 본문(글) 영역 배경 */
    --gc-bg-soft: #f4f6f8;     /* 페이지(양쪽 여백) 배경 — 본문과 은은히 대비 */
    --gc-text: #1c1e21;
    --gc-text-soft: #444a52;
    --gc-text-muted: #8a9099;
    --gc-line: #eceef1;
    --gc-line-strong: #dcdfe4;
    --gc-mark: #fbf3d6;        /* 형광펜 하이라이트 */

    /* 포인트 컬러 (단 하나) */
    --gc-accent: #1163c9;
    --gc-accent-hover: #0d4fa3;
    --gc-accent-soft: #eef4fc;

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

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

    /* 간격 · 모양 */
    --gc-radius-sm: 6px;
    --gc-transition: 0.18s ease;

    /* 본문 폭.
       100% = 위 헤더·메뉴와 같은 컨테이너 전체 폭을 사용(현재 설정).
       한 줄이 너무 길어 읽기 불편하면 720px~880px 처럼 px 값으로 바꾸면
       본문이 그 폭으로 가운데 정렬됩니다. */
    --gc-content-width: 100%;
}

/* 다크 모드 자동 대응 (시스템 선호 존중) */
@media (prefers-color-scheme: dark) {
    :root {
        --gc-bg: #1c1f24;          /* 본문(글) 영역 — 페이지보다 살짝 밝게 떠 보이도록 */
        --gc-bg-soft: #131519;     /* 페이지(양쪽 여백) 배경 */
        --gc-text: #e6e8eb;
        --gc-text-soft: #b6bbc2;
        --gc-text-muted: #7c828b;
        --gc-line: #262a30;
        --gc-line-strong: #363b43;
        --gc-mark: #3d3a1f;

        --gc-accent: #64a0ff;
        --gc-accent-hover: #86b5ff;
        --gc-accent-soft: #1a2536;
    }
}

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

body {
    font-size: var(--gc-fs-base);
    line-height: var(--gc-lh-base);
    color: var(--gc-text);
    background-color: var(--gc-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 {
    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(--gc-text);
    line-height: 1.35;
    letter-spacing: -0.021em;
    font-weight: 700;
}

.entry-content h2 {
    font-size: 1.5rem;
    margin-top: 1.8em;
    margin-bottom: 0.7em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--gc-line);
}

.entry-content h3 {
    font-size: 1.22rem;
    margin-top: 1.5em;
    margin-bottom: 0.55em;
}

.entry-content h4 {
    font-size: 1.06rem;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
    color: var(--gc-text-soft);
}

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

/* 첫 문단은 조금 더 또렷하게 */
.entry-content > p:first-of-type {
    color: var(--gc-text);
}

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

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

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

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

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

mark {
    background: var(--gc-mark);
    color: inherit;
    padding: 0.05em 0.15em;
    border-radius: 3px;
}

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

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

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

/* 인용구 - 심플하게 좌측 라인만 */
.entry-content blockquote {
    margin: 1.9em 0;
    padding: 0.2em 0 0.2em 1.3em;
    border-left: 3px solid var(--gc-line-strong);
    color: var(--gc-text-muted);
    font-style: italic;
}

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

/* 코드 */
.entry-content code {
    font-family: var(--gc-font-mono);
    font-size: 0.9em;
    background: var(--gc-accent-soft);
    border-radius: 4px;
    padding: 0.12em 0.4em;
}

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

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

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

.entry-content figcaption {
    text-align: center;
    font-size: var(--gc-fs-xs);
    color: var(--gc-text-muted);
    margin-top: 0.6em;
}

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

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

.entry-content th {
    background: var(--gc-accent-soft);
    font-weight: 700;
    color: var(--gc-text);
}

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

/* =========================================================
   3. 레이아웃 - 단일 컬럼, 카드/그림자 없음
   ========================================================= */
/* 본문(글) 영역만 흰색으로 — 그 바깥(.site-content 여백)은 body 의
   옅은 배경(--gc-bg-soft)이 비쳐 본문과 자연스럽게 대비된다.
   테두리·그림자 없이 색 대비만으로 "글 영역"이 떠오르게 하는 방식. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .site-content {
    background-color: var(--gc-bg);
}

/* 카드 테두리·그림자만 제거 — 글 사이 구분은 라인 하나로.
   좌우 여백(padding)은 부모 테마 기본값을 그대로 두어 본문이 헤더 로고·
   메뉴와 같은 폭으로 정렬되게 한다. (여백을 0으로 없애면 본문이 헤더보다
   넓게 퍼져 어긋나 보임) */
.separate-containers .inside-article {
    box-shadow: none;
    border: none;
}

/* 글 목록(블로그·아카이브)에서 글마다 하단 구분선 */
.blog .separate-containers .inside-article,
.archive .separate-containers .inside-article,
.search .separate-containers .inside-article {
    margin-bottom: 1.6em;
    border-bottom: 1px solid var(--gc-line);
}

/* 컨텐츠 폭: 모든 화면에서 읽기 좋은 폭으로 중앙 정렬
   (사이드바가 없으므로 본문이 과하게 넓어지지 않게 제한) */
.single-post .entry-content,
.page .entry-content,
.single-post .entry-header,
.page .entry-header,
.single-post .entry-meta,
.single-post .post-navigation,
.single-post .comments-area {
    max-width: var(--gc-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* 디자인 글(+디자인, .pts-preset 자기완결 HTML)은 자체 골격 폭(980px)을
   그대로 쓰도록 720px 캡을 해제한다. 텍스트 글만 읽기 좋은 720px 유지.
   (전체 폭으로 배치한 블록 alignwide/alignfull 도 함께 예외 처리) */
.single-post .entry-content:has(.pts-preset),
.page .entry-content:has(.pts-preset) {
    max-width: none;
}

.entry-content > .alignwide,
.entry-content > .alignfull {
    max-width: none;
}

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

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

.site-description {
    color: var(--gc-text-muted);
}

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

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

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

/* 현재 메뉴 항목은 밑줄 하나로만 표시 */
.main-navigation .main-nav ul li.current-menu-item > a {
    box-shadow: inset 0 -2px 0 var(--gc-accent);
}

/* 서브메뉴 */
.main-navigation ul ul {
    border: 1px solid var(--gc-line);
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
}

/* =========================================================
   5. 글 제목 · 메타
   ========================================================= */
.entry-header {
    margin-bottom: 1.4em;
}

.entry-title {
    font-size: 1.75rem;
    line-height: 1.3;
    letter-spacing: -0.028em;
    margin-bottom: 0.35em;
}

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

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

.single .entry-title {
    font-size: 2.15rem;
    margin-bottom: 0.45em;
}

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

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

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

/* 카테고리는 배지 대신 담백한 텍스트로 */
.entry-meta .cat-links a {
    color: var(--gc-accent);
    font-weight: 600;
}

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

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

.read-more:hover::after {
    transform: translateX(3px);
}

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

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

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(--gc-bg);
    color: var(--gc-text);
    border: 1px solid var(--gc-line-strong);
    border-radius: var(--gc-radius-sm);
    padding: 0.65em 0.85em;
    transition: border-color var(--gc-transition), box-shadow var(--gc-transition);
}

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

/* =========================================================
   7. 페이지네이션 (심플 텍스트형)
   ========================================================= */
nav.paging-navigation,
nav.navigation,
nav.post-navigation {
    margin-top: 2.6em;
    padding-top: 1.6em;
    border-top: 1px solid var(--gc-line);
}

.nav-links a,
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3em;
    height: 2.3em;
    padding: 0 0.6em;
    border-radius: var(--gc-radius-sm);
    color: var(--gc-text-soft);
    font-weight: 600;
    transition: color var(--gc-transition), background-color var(--gc-transition);
}

.page-numbers.current {
    background: var(--gc-accent);
    color: #ffffff;
}

a.page-numbers:hover,
.nav-links a:hover {
    color: var(--gc-accent);
    background: var(--gc-accent-soft);
}

/* 이전/다음 글 내비 링크 */
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

/* =========================================================
   8. 댓글
   ========================================================= */
.comments-area {
    margin-top: 2.8em;
    padding-top: 2em;
    border-top: 1px solid var(--gc-line);
}

.comments-title,
.comment-reply-title {
    font-size: 1.3rem;
    margin-bottom: 1em;
}

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

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

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

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

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

/* =========================================================
   10. 접근성 · 유틸
   ========================================================= */
:focus-visible {
    outline: 2px solid var(--gc-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;
}

/* 맨 위로 버튼 */
.generate-back-to-top {
    background-color: var(--gc-accent);
    border-radius: 50%;
}

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

/* =========================================================
   11. 반응형
   ========================================================= */
@media (max-width: 768px) {
    /* 모바일 좌우 여백은 GeneratePress 기본 테마와 동일하게 부모 테마
       기본값을 그대로 사용한다. (추가 여백 없음 — 기본 테마와 일치)
       더 띄우거나 좁히려면 아래에 .site-content .content-area 에
       padding-left/right 값을 주면 됩니다. */

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

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

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

    /* 칼럼 많은 표는 가로 스크롤로 */
    .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }
}