/*
Theme Name: Fox Child
Template: fox
Version: 1.0
Description: 자유의새노래 자식테마
*/
 
 
/* =========================================================
   1. 웹폰트 등록 (Web Fonts)
   ========================================================= */
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}
 
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
 
@font-face {
    font-family: 'JeonjuCraftMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/JeonjuCraftMjL.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
 
@font-face {
    font-family: 'JeonjuCraftMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/JeonjuCraftMjB.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
 
 
/* =========================================================
   2. 타이포그래피 - 변수 및 전역 적용 (Typography)
   ========================================================= */
 
:root {
    --font-body: 'Suit', sans-serif;
    --font-heading: 'Suit', sans-serif;
    --font-nav: 'Suit', sans-serif;
}
 
/* 본문/제목/내비게이션 폰트 강제 적용 */
body,
.single56__post_content,
h1, h2, h3, h4, h5, h6,
.mainnav {
    font-family: 'Suit', sans-serif !important;
}
 
/* 명조체 — 특정 영역에 쓰고 싶을 때 클래스로 지정 */
.nsol-serif {
    font-family: 'JeonjuCraftMyungjo', serif;
}
 
 
/* =========================================================
   3. 헤더 - 상단바 (Header / Top Bar)
   ========================================================= */
 
/* 상단바 링크 (속보 / 지면신문 / 이달의 운세) - 다크모드 대응 */
.header56__html2 a {
    color: #777 !important;
    transition: color 0.2s ease;
}
.header56__html2 a:hover {
    color: #333 !important;
}
body.darkmode .header56__html2 a {
    color: #aaa !important;
}
body.darkmode .header56__html2 a:hover {
    color: #fff !important;
}
 
/* 상단 판 선택 탭 - 세로선 구분형 (국제판 / 본판 / 연합판) */
.header56__html3 a {
    color: #999 !important;
    text-decoration: none !important;
    font-weight: 400;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    padding: 0 10px;
    position: relative;
}
.header56__html3 a:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -1px;
    line-height: 2;
    color: #ddd;
}
.header56__html3 a:hover {
    color: #555 !important;
}
.header56__html3 a.current-tab {
    color: #111 !important;
    font-weight: 700;
}
body.darkmode .header56__html3 a {
    color: #666 !important;
}
body.darkmode .header56__html3 a:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -1px;
    line-height: 2;
    color: #333;
}
body.darkmode .header56__html3 a:hover {
    color: #ccc !important;
}
body.darkmode .header56__html3 a.current-tab {
    color: #fff !important;
}
 
/* 다크모드에서 로고 반전 */
body.darkmode .main-img-logo {
    filter: invert(1);
}
 
/* 스크롤 고정(sticky) 시 메뉴 줄 위아래 여백 균형 */
.masthead--sticky .masthead__wrapper.before-sticky .header56__section,
.masthead--sticky .masthead__wrapper.before-sticky .header56__section > .container {
    padding-bottom: 4px;
}
 
 
/* =========================================================
   4. 로그인 페이지 (Login Page)
   ========================================================= */
 
/* 2단 레이아웃 */
.nsol-login-wrap {
    align-items: center;
    gap: 60px;
    margin-top: 40px;
}
.nsol-login-left {
    text-align: left;
    border-right: 1px solid #e0e0e0;
    padding-right: 40px;
}
.nsol-login-logo img {
    width: 160px;
    height: auto;
    margin-bottom: 20px;
}
.nsol-login-slogan {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    letter-spacing: -0.2px;
    word-break: keep-all;
}
.nsol-login-right {
    padding-left: 0;
}
.nsol-login-right .um-form {
    max-width: 420px;
}
@media (max-width: 600px) {
    .nsol-login-wrap {
        gap: 20px;
        margin-top: 20px;
    }
    .nsol-login-slogan {
        font-size: 14px;
    }
}
 
/* 입력창 색상 */
.nsol-login-right input[type="text"],
.nsol-login-right input[type="email"],
.nsol-login-right input[type="password"] {
    border: 1px solid #d4d3d0 !important;
}
.nsol-login-right input[type="text"]:focus,
.nsol-login-right input[type="email"]:focus,
.nsol-login-right input[type="password"]:focus {
    border-color: #1c3659 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(28, 54, 89, 0.08);
}
 
/* 버튼 색상 */
.nsol-login-right .um-button,
.nsol-login-right button[type="submit"] {
    background: #1c3659 !important;
    border-color: #1c3659 !important;
    color: #fff !important;
}
.nsol-login-right .um-button:hover {
    background: #0a1626 !important;
}
 
 
/* =========================================================
   5. 인덱스 페이지 - 인터내셔널판 (Index Page - International)
   ========================================================= */

/* 톱기사 블록 - 링크 색상/밑줄 제거 */
.top-article a {
    color: inherit !important;
    text-decoration: none !important;
}
/* 톱기사 부제목 - 이것만 24px 여백 */
.top-article-subtitle {
    margin: 0 0 24px !important;
}
/* 톱기사 블록 - 제목/부제 간격 줄이기 (전역 24px 마진 덮어쓰기) */
.top-article h1.wp-block-heading {
    margin: 0 0 8px !important;
}
/* 제목/부제 - 단어 단위로 줄바꿈 */
.wp-block-heading {
    word-break: keep-all !important;
}
/* 오피니언란 - 항목 간격 5px로 통일 */
.top-article .opinion-sidebar p.wp-block-paragraph {
    margin: 0 0 5px !important;
}
/* 오피니언란 - 구분선 간격 줄이기 */
.top-article .opinion-sidebar .wp-block-separator {
    margin: 10px 0 !important;
}
/* 오피니언란 - 구분선 얇게 */
.top-article .opinion-sidebar .wp-block-separator {
    border-top-width: 1px !important;
}
/* 태그바 - 간격으로 항목 구분 */
.tag-bar a {
    color: #999 !important;
    text-decoration: none !important;
    margin-right: 24px;
    font-size: 1em;
}
.tag-bar a:first-child {
    color: #111 !important;
    font-weight: 500;
    font-size: 1em;
}
.tag-bar a:hover {
    color: #000 !important;
}
.tag-bar {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
/* tag-bar 가로 스크롤바 숨기기 */
.tag-bar::-webkit-scrollbar {
    display: none !important;
}
.tag-bar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* tag-bar 아래 섹션(그날의 너를 만나고 등) - 링크 색상/밑줄 제거 */
.tag-bar ~ .wp-block-columns h4.wp-block-heading a,
.tag-bar ~ .wp-block-columns p.wp-block-paragraph a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}
.tag-bar ~ .wp-block-columns h4.wp-block-heading a:hover,
.tag-bar ~ .wp-block-columns p.wp-block-paragraph a:hover {
    color: #555 !important;
}

/* 국제판(/international/ 등) 인덱스 페이지에서만 적용 */
body.page-id-5057 h4.wp-block-heading:has(+ ul.wp-block-latest-posts) {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: none;
}
body.page-id-5057 ul.wp-block-latest-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.page-id-5057 ul.wp-block-latest-posts li {
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}
body.page-id-5057 ul.wp-block-latest-posts li:last-child {
    border-bottom: none;
}
body.page-id-5057 a.wp-block-latest-posts__post-title {
    display: block;
    font-size: 16.5px;
    line-height: 1.5;
    color: #1a1a1a;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
body.page-id-5057 a.wp-block-latest-posts__post-title:hover {
    color: #555;
    text-decoration: underline;
}

/* 인덱스 페이지 전체에서 구분선 굵기 1px로 통일 */
body.page-id-5057 hr.wp-block-separator,
body.page-id-5057 .wp-block-separator {
    border-top-width: 1px !important;
    border-top-color: #ddd !important;
}

/* 헤더 바로 아래 / 섹션 사이에 깔린 테마 자체 구분선 */
body.page-id-5057 .masthead,
body.page-id-5057 .site-header {
    border-bottom-width: 1px !important;
}

/* 푸터 */
.footer56__html1 .nsol-footer-grid {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    flex-wrap: wrap;
    text-align: left;
}
.footer56__html1 .nsol-footer-logo img {
    height: 32px;
    width: auto;
    display: block;
}
.footer56__html1 .nsol-footer-info {
    flex: 1 1 320px;
    min-width: 0;
    text-align: left;
    margin-left: 24px; /* 로고에서 살짝 더 띄움 */
}
.footer56__html1 .nsol-footer-info p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    text-align: left;
}
.footer56__html1 .nsol-footer-line1 {
    font-weight: 600;
    color: #333 !important;
}
.footer56__html1 .nsol-footer-line2 {
    margin-bottom: 12px !important;
}
.footer56__html1 .nsol-footer-line3 {
    margin-bottom: 8px !important;
}
.footer56__html1 .nsol-footer-menu {
    color: #999 !important;
}

/* 관계사 보기 드롭다운 */
.footer56__html1 .nsol-footer-dropdown {
    flex: 0 0 auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0;
    font-size: 13px;
    align-self: flex-start;
    min-width: 140px;
}
.footer56__html1 .nsol-footer-dropdown summary {
    padding: 10px 16px;
    cursor: pointer;
    color: #555;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.footer56__html1 .nsol-footer-dropdown summary::-webkit-details-marker {
    display: none;
}
.footer56__html1 .nsol-footer-dropdown summary::after {
    content: "▾";
    margin-left: 8px;
    font-size: 11px;
    color: #999;
    transition: transform 0.2s ease;
}
.footer56__html1 .nsol-footer-dropdown[open] summary::after {
    transform: rotate(180deg);
}
.footer56__html1 .nsol-footer-dropdown-content {
    padding: 0 16px 12px;
    line-height: 1.8;
    color: #555;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* 다크모드 대응 */
body.darkmode .footer56__html1 .nsol-footer-line1 {
    color: #ddd !important;
}
body.darkmode .footer56__html1 .nsol-footer-info p {
    color: #999;
}
body.darkmode .footer56__html1 .nsol-footer-dropdown {
    border-color: #444;
}
body.darkmode .footer56__html1 .nsol-footer-dropdown summary {
    color: #aaa;
}
body.darkmode .footer56__html1 .nsol-footer-dropdown-content {
    color: #aaa;
    border-top-color: #333;
}
body.darkmode .footer56__html1 .nsol-footer-logo img {
    filter: invert(1);
}

/* 반응형 (모바일) */
@media (max-width: 768px) {
    .footer56__html1 .nsol-footer-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .footer56__html1 .nsol-footer-info {
        flex: none;
        width: 100%;
        margin-left: 0; /* 모바일에선 로고 아래로 쌓이니 들여쓰기 불필요 */
    }
    .footer56__html1 .nsol-footer-dropdown {
        width: 100%;
    }
}

/* =========================================================
   6. 카테고리 페이지
   ========================================================= */

/* 칼럼별 excerpt 줄 수 다르게 설정 */

/* 큰 칼럼 (썸네일 있는 메인 글) */
.row56__col--big .excerpt56 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 중간 칼럼 */
.row56__col--medium .excerpt56 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 작은 칼럼 */
.row56__col--small .excerpt56 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 카테고리 리스트 본문 */
.excerpt56 {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* 오피니언 하위 카테고리 목록 - 박스형 태그 디자인 */
.terms56 {
    margin-top: 10px;
}
.terms56 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 9px;
    list-style: none;
    margin: 28px 0 16px;
    padding: 0;
}

.terms56 ul li {
    margin: 0;
}

.terms56 ul li a {
    display: inline-block;
    background: #fff;
    color: #444 !important;
    text-decoration: none !important;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.2px;
    transition: all 0.18s ease;
}

.terms56 ul li a:hover {
    background: #1c3659;
    border-color: #1c3659;
    color: #fff !important;
}

/* 다크모드 대응 */
body.darkmode .terms56 ul li a {
    background: #222;
    border-color: #444;
    color: #ccc !important;
}
body.darkmode .terms56 ul li a:hover {
    background: #4a6fa5;
    border-color: #4a6fa5;
    color: #fff !important;
}
/* 글 상세 페이지 - 부제(서브타이틀) 줄바꿈 살리기
   원본 텍스트에 입력된 엔터(줄바꿈 문자)가 HTML에서는 무시되고
   공백으로 합쳐져 출력되는데, white-space: pre-line을 쓰면
   입력하신 줄바꿈 그대로 화면에 표시됨 */
.post-subtitle.single56__subtitle {
    white-space: pre-line;
}
/* 카테고리 태그 - 제목 사이 간격 좁히기 (테마 변수 덮어쓰기) */
.single56__title {
    margin-top: 8px !important;
}

/* 제목 - 부제 사이 간격 5px 넓히기 */
.single56__title.post-title {
    margin-bottom: 20px !important; /* 원하는 만큼 늘려서 테스트 */
}

/* 다크모드 - 목차(Table of Contents) 가독성 확보 */
body.darkmode #ez-toc-container {
    background: #1a1a1a !important;
    border-color: #444 !important;
}
body.darkmode #ez-toc-container .ez-toc-title {
    color: #eee !important;
}
body.darkmode #ez-toc-container .ez-toc-link {
    color: #ccc !important;
}
body.darkmode #ez-toc-container .ez-toc-link:hover {
    color: #fff !important;
}
body.darkmode #ez-toc-container svg {
    fill: #aaa !important;
    color: #aaa !important;
}