/*
Theme Name: Soap (비누)
Theme URI: https://monim.net
Author: monim
Version: 1.0
*/

/* 1. 영문 폰트: Inter (구글 폰트에서 가져오기) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* 2. 한글 폰트: 나눔스퀘어 네오 */
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"),
         url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"),
         url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
    font-display: fallback;
    /* 한글 영역만 이 폰트에서 처리하도록 명시 (선택사항이나 성능에 좋음) */
    unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}

/* 3. 사이트 전체 폰트 적용 (영문 Inter -> 한글 NanumSquareNeo 순서) */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, lead, .nav-link, .navbar-brand {
    font-family: 'NanumSquareNeo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    word-break: keep-all;
}

/* (기존에 추가하셨던 사이즈 조정이나 언더라인 제거 등의 다른 CSS는 이 아래에 그대로 두시면 됩니다) */
html {
}

.navbar-nav .menu-item a {
    text-decoration: none !important;
    color: #555 !important;
    padding: 0.5rem 1rem !important;
    display: block;
    transition: color 0.2s ease;
}

.navbar-nav .menu-item a:hover {
    color: #0d6efd !important;
}


.post-title a {
    text-decoration: none;
    color: #222;
    transition: 0.2s;
}

.post-title a:hover {
    color: #0d6efd;
}

/* 3. 모바일에서 메뉴가 너무 붙지 않게 조정 */
@media (max-width: 991.98px) {
    .navbar-nav .menu-item a {
        padding: 10px 0 !important;
        border-bottom: 1px solid #f8f9fa;
    }
}

/* 4. 나눔스퀘어 네오 폰트가 메뉴에도 확실히 적용되도록 보정 */
.navbar-brand, .nav-link, .menu-item a {
    font-family: 'NanumSquareNeo', sans-serif !important;
}

/* 1. 본문 문단(Enter) 사이의 위아래 여백을 시원하게 확보 */
.entry-content p {
    margin-bottom: 2rem !important; /* 약 한 줄 반 정도의 여백 */
    line-height: 1.8;
}

/* 2. 본문 내 중간 제목(H2, H3)이 이전 문단과 확실히 떨어지도록 분리감 부여 */
.entry-content h1,
.entry-content h2,
.entry-content h3 {
    margin-top: 3.5rem !important; /* 위쪽 문단과 멀찍이 띄움 */
    margin-bottom: 1.5rem !important; /* 아래쪽 본문과는 살짝 가깝게 */
    word-break: keep-all;
}

/* 3. 혹시 모를 이미지 캡션이나 인용구 여백 보정 */
.entry-content figure {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* 1. 썸네일 액자(틀)에 옅은 회색 아웃라인과 은은한 그림자 추가 */
.post-list .ratio {
    border: 2px solid #efefef; /* 사진을 잡아주는 아주 연한 회색 테두리 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 테두리가 생겼으니 그림자는 더 가볍고 은은하게 */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.post-list .ratio:hover {
    border-color: #dee2e6; /* 마우스를 올리면 테두리가 한 톤 진해지며 입체감 형성 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 2. 마우스 올렸을 때 이미지 자체를 부드럽게 확대 (줌인 - 기존과 동일) */
.post-list .ratio img {
    transition: transform 0.4s ease-in-out;
}

.post-list .ratio:hover img {
    transform: scale(1.08);
}

/* 상단 메뉴에서 현재 보고 있는 페이지(Active) 강조 */
.navbar-nav .current-menu-item a {
    color: #0d6efd !important; /* 부트스트랩 기본 파란색 */
    font-weight: 700 !important;
}

blockquote,
.wp-block-quote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
}

/* 가상 요소를 사용해 큰 따옴표(“) 추가 */
blockquote::before,
.wp-block-quote::before {
    content: "“";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 10px;
    font-size: 3rem;
    color: #cccccc;
    font-family: serif;
    line-height: 1;
}

blockquote p,
.wp-block-quote p {
    margin: 0;
    font-size: 1.1rem;
    color: #333333;
    font-weight: 500;
}

/* 강조 (mark) - 형광펜 그은 듯한 효과 */
mark {
    background-color: #fff2ac; /* 부드러운 노란색 */
    color: #333333;
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

/* 인라인 코드 (code) - 개발 블로그처럼 텍스트 중간에 코드 넣을 때 */
p code,
li code {
    font-family: Consolas, Monaco, monospace;
    background-color: #f0f1f3;
    color: #e83e8c; /* 보통 가독성을 위해 포인트 컬러(ex: 핑크/레드)를 많이 씁니다 */
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* 위첨자(sup), 아래첨자(sub) - 글 줄 간격(line-height) 틀어짐 방지 */
sup,
sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* 취소선 (del, s) */
del,
s {
    text-decoration: line-through;
    color: #999999; /* 취소된 글자는 살짝 흐리게 처리하면 좋습니다 */
}

/* 워드프레스 기본 페이징 스타일이 Bootstrap과 충돌하는 경우 방지 */
.page-item .page-link {
    box-shadow: none !important;
    outline: none !important;
}

/* 코드 블록 전체 컨테이너 */
.wp-block-code {
    background-color: #1e1e1e;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    border: 1px solid #333;
}

/* 내부 코드 텍스트 */
.wp-block-code code {
    font-family: 'Fira Code', 'Cascadia Code', Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 0.95rem;
    color: #dcdcdc;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
}

/* style-editor.css */

/* 에디터 내부의 코드 블록 컨테이너 스타일 */
.editor-styles-wrapper .wp-block-code {
    background-color: #1e1e1e !important;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #333;
    margin: 1.5rem 0;
}

/* 에디터 내에서 글을 작성하는 실제 영역 스타일 */
.editor-styles-wrapper .wp-block-code code,
.editor-styles-wrapper .wp-block-code .block-editor-rich-text__editable {
    font-family: Consolas, Monaco, monospace !important;
    font-size: 14px !important;
    color: #dcdcdc !important;
    line-height: 1.6 !important;
    background: transparent !important;
    outline: none !important;
}

/* 텍스트 선택 시 색상 */
.editor-styles-wrapper .wp-block-code .block-editor-rich-text__editable::selection {
    background-color: #264f78;
}