/*
 * 2026-10 디자인 改編.
 *
 * style.css 위에 덧씌우는 層. 각 덩어리는 <html>의 rd-* 클래스가 있을 때만 作動하고,
 * 그 클래스는 lib/design.php 의 스위치로 켜고 끈다.
 * 方向: 國漢文混用 時代의 雜誌·冊 紙面. 종이 빛·草綠·기울인 題字·明朝 漢字는 그대로 두고,
 *       웹다운 둥근 버튼을 줄이고 冊의 짜임새(題字, 目次, 扉, 들여쓰기, 奧付)로 옮긴다.
 */

:root {
    /* 子持ち罫(굵은 줄 + 가는 줄)에 쓰는 먹빛 */
    --rd-ink-rule: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
}


/* ==================================================================
   masthead — 題字
   ================================================================== */

html.rd-masthead .site-header { padding-top: 2.75rem; }

html.rd-masthead .site-header-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "search title account";
    align-items: last baseline;    /* 檢索·로그인 글자를 題字의 글자 밑선에 맞춤 */
    gap: 0.75rem 1.25rem;
}

html.rd-masthead .site-title {
    grid-area: title;
    justify-self: center;
    margin: 0;
    font-size: 2.6rem;
    font-weight: 450;
    letter-spacing: -0.02em;
    line-height: 0.9;
}

/* 檢索欄: 둥근 테두리 대신 밑줄 한 줄 */
html.rd-masthead .search-form {
    grid-area: search;
    justify-self: start;
    height: auto;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border-strong);
    border-radius: 0;
    background: transparent;
}
html.rd-masthead .search-form:focus-within {
    border-bottom-color: var(--color-accent-ink);
    box-shadow: none;
}
html.rd-masthead .search-form input[type="text"] {
    width: 7.5rem;
    padding: 0.3rem 0 0.25rem;
}
html.rd-masthead .search-form button {
    height: auto;
    padding: 0.3rem 0 0.25rem 0.6rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-accent-ink);
    filter: none;
}
html.rd-masthead .search-form button:hover { text-decoration: underline; text-underline-offset: 0.25em; }

html.rd-masthead .header-account {
    grid-area: account;
    justify-self: end;
    padding-bottom: 1px;            /* 檢索欄 밑줄 두께만큼 맞춤 */
    font-size: var(--fs-ui);
    line-height: inherit;
}
html.rd-masthead :is(.login-link, .user-badge) {
    height: auto;
    padding: 0.3rem 0 0.25rem;
    line-height: inherit;
}

/* 分類: 가운데로, 그 아래 子持ち罫 */
html.rd-masthead .site-header .category-nav {
    position: relative;
    justify-content: center;
    gap: 0.25rem 1.6rem;
    margin-top: 1.6rem;
    padding-bottom: 1.35rem;
    border-bottom: 0;
}
/* 題字의 子持ち罫과 아래 題目 사이 (記事 題目과 目錄 題目 모두) */
html.rd-masthead .site-main { padding-top: 3rem; }

html.rd-masthead .site-header .category-nav::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;                                  /* 두 줄 사이 틈 */
    border-top: 2.5px solid var(--rd-ink-rule);    /* 굵은 줄 */
    border-bottom: 1px solid var(--rd-ink-rule);   /* 가는 줄 */
}


/* ==================================================================
   contents — 目錄 (첫 화면, 分類, 檢索 結果)
   ================================================================== */

html.rd-contents .site-main:has(.post-list) > h1 {
    margin-bottom: 1.75rem;
    font-size: 1.375rem;
    text-align: center;
}
html.rd-contents .search-result-count { text-align: center; }

html.rd-contents .post-list-item {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 0.7rem;
    padding: 0.42rem 0;
    border-bottom: 0;
}
html.rd-contents .post-list-item > a {
    flex: 0 1 auto;
    min-width: 0;
}
/* 題目과 날짜 사이를 잇는 點線 */
html.rd-contents .post-list-item::after {
    content: "";
    order: 1;
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    border-bottom: 1.5px dotted var(--color-rule);
    transform: translateY(-0.3em);
}
html.rd-contents .post-list-item > .post-meta {
    order: 2;
    flex: 0 0 auto;
}
html.rd-contents :is(.post-date, .category-nav .count) {
    font-variant-numeric: oldstyle-nums tabular-nums;
}


/* ==================================================================
   tabs — 小分類 고르기와 「目錄으로」
   ================================================================== */

html.rd-tabs .site-main > .category-nav {
    gap: 0.25rem 1.4rem;
    margin-bottom: 2rem;
}
html.rd-contents.rd-tabs .site-main > .category-nav { justify-content: center; }

html.rd-tabs .site-main > .category-nav a {
    height: auto;
    padding: 0.2rem 0 0.15rem;
    border: 0;
    border-bottom: 1.5px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--color-muted-5);
}
html.rd-tabs .site-main > .category-nav a:hover {
    border-bottom-color: var(--color-border-strong);
    color: var(--color-text);
}
html.rd-tabs .site-main > .category-nav a.is-active {
    border-bottom-color: var(--color-accent-ink);
    background: none;
    color: var(--color-accent-ink);
}
html.rd-tabs .site-main > .category-nav a.is-active .count { opacity: 1; color: var(--color-muted-3); }

html.rd-tabs :is(.return-link, .return-button a) {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--color-accent-ink);
}
html.rd-tabs :is(.return-link, .return-button a):hover {
    transform: none;
    text-decoration: underline !important;
}


/* ==================================================================
   article — 글 첫머리 (扉)
   ================================================================== */

html.rd-article .post h1 {
    margin: 0 0 0.75rem;
    font-size: var(--fs-h1);
    line-height: 1.4;
    text-align: center;
}

html.rd-article .post > .post-meta {
    position: relative;
    justify-content: center;
    margin: 0 0 1.9rem;
    padding-bottom: 1.5rem;
    border-bottom: 0;
}
/* 題目 덩어리와 本文 사이의 짧은 줄 */
html.rd-article .post > .post-meta::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2.5rem;
    margin-left: -1.25rem;
    border-top: 1px solid var(--rd-ink-rule);
}

/* 本文 小題目: 앞 글과는 멀리, 뒤따르는 글과는 가깝게 */
html.rd-article .post-body :is(h2, h3, h4) { margin-bottom: 0.7em; }
html.rd-article .post-body h2:not(:first-child) { margin-top: 1.6em; }
html.rd-article .post-body :is(h3, h4):not(:first-child) { margin-top: 1.45em; }


/* ==================================================================
   indent — 本文 文段: 띄우지 않고 첫 줄 들여쓰기
   ================================================================== */

html.rd-indent .post-body > p {
    margin: 0;
    text-indent: 1em;
}
html.rd-indent .post-body > p + :not(p) { margin-top: 1.4em; }


/* ==================================================================
   colophon — 꼬리말 (奧付)
   ================================================================== */

html.rd-colophon .site-footer { text-align: center; }
html.rd-colophon .site-footer::before {
    content: "";
    display: block;
    width: 2.5rem;
    margin: 0 auto 1rem;
    border-top: 1px solid var(--rd-ink-rule);
}


/* ==================================================================
   textsize — 國漢文混用과 한글專用의 글자 크기 맞춤
   ================================================================== */

/* 한글專用에서만 本文을 1.05倍로 키우던 것을 두 모드 모두에 適用 */
html.rd-textsize .post-body { font-size: calc(var(--fs-body) * 1.05); }
/* 本文을 키운 만큼 가장 작은 小題目(####~)이 本文보다 작아지지 않게: 本文의 1.06倍 */
html.rd-textsize .post-body :is(h4, h5, h6) { font-size: 1.06em; }
/* 漢字를 1.1倍로 키우던 것을 1.02倍로: 明朝 漢字가 한글보다 커 보이지 않게 */
html.rd-textsize .hj,
html.rd-textsize body:not(.reading-mode) .post-body ruby { font-size: 1.02em; }


/* ==================================================================
   shaken — 寫硏 書體 (TypeSquare)
   70·80年代 日本 書籍처럼: 本文 漢字·가나는 石井明朝 オールド R,
   題目·굵은 글씨·表 머리는 石井ゴシック B (그 時代엔 굵은 明朝가 없어 强調는 고딕으로 했다),
   메뉴·날짜 같은 작은 글씨는 石井ゴシック R.
   한글은 寫硏 書體에 없으므로 고딕은 은돋움(undotum 스위치를 끄면 부크크 고딕)으로 떨어진다. 라틴 文字는 本文에선 Newsreader 그대로.
   ================================================================== */

html.rd-shaken {
    --font-hanja: var(--font-latin), "IshiiMincho Old R", "Zen Old Mincho", "Shippori Mincho B1", var(--font-body);
    --rd-gothic: "IshiiGothic R", "Bookk Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --rd-gothic-b: "IshiiGothic B", "Bookk Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
html.rd-shaken :is(h1, h2, h3, h4, h5, h6, strong, b, th):not(.site-title) {
    font-family: var(--rd-gothic-b);
    font-synthesis: none;   /* 이미 굵은 글꼴이므로 브라우저가 한 번 더 굵히지 않게 */
}
/* 단추·입력란·링크 단추 같은 UI 도 메뉴와 같은 고딕 R */
html.rd-shaken :is(.category-nav, .post-meta, .post-date, .search-result-count, .site-footer, figcaption, .header-account, .comment-meta, .return-link, button, input, select, .discord-login-btn, .return-button, .login-link, .edit-link, .reply-link, .delete-link, .inline-fix-form) {
    font-family: var(--rd-gothic);
}
/* 題目·굵은 글씨·메뉴 안의 漢字(.hj, 루비)도 둘레의 고딕을 따른다 */
html.rd-shaken :is(h1, h2, h3, h4, h5, h6, strong, b, th, .category-nav, .post-meta, .post-date, .search-result-count, .site-footer, figcaption, .header-account, .comment-meta, .return-link, button, input, select, .discord-login-btn, .return-button, .login-link, .edit-link, .reply-link, .delete-link, .inline-fix-form) :is(.hj, ruby) {
    font-family: inherit;
}


/* ==================================================================
   unbatang — 本文 한글을 은바탕으로 (明朝로 맞춘 옛 冊 紙面)
   글꼴은 /assets/fonts/unbatang.css (layout.php 가 이 스위치일 때만 읽는다).
   은바탕은 한글을 50/1000em 올려 두었으므로 漢字(.hj)를 내리지 않는다.
   題目·굵은 글씨·메뉴처럼 고딕이 부크크 고딕인 곳(undotum 을 끈 때)은 예전처럼 漢字를 조금 내린다.
   ================================================================== */

html.rd-unbatang {
    --font-body: var(--font-latin), "UnBatang", "Bookk Gothic", "Zen Old Mincho", "Shippori Mincho B1", "Apple SD Gothic Neo", "Malgun Gothic", serif;
}
html.rd-unbatang .hj { top: 0; }
html.rd-unbatang :is(h1, h2, h3, h4, h5, h6, strong, b, th, .category-nav, .post-meta, .post-date, .search-result-count, .site-footer, figcaption, .header-account, .comment-meta, .return-link, button, input, select, .discord-login-btn, .return-button, .login-link, .edit-link, .reply-link, .delete-link, .inline-fix-form) .hj { top: 0.08em; }
html.rd-unbatang .katex .math-ko { top: 0; }
/* 國漢文混用 모드의 루비(漢字)도 예전엔 처진 한글에 맞춰 0.07em 내렸었다. 은바탕 本文에서는 내리지 않는다 */
html.rd-unbatang body.mode-mixed ruby { vertical-align: 0; }
html.rd-unbatang body.mode-mixed :is(h1, h2, h3, h4, h5, h6, strong, b, th, .category-nav, .post-meta, .post-date, .search-result-count, .site-footer, figcaption, .header-account, .comment-meta, .return-link, button, input, select, .discord-login-btn, .return-button, .login-link, .edit-link, .reply-link, .delete-link, .inline-fix-form) ruby { vertical-align: -0.07em; }


/* ==================================================================
   undotum — 고딕 한글을 은돋움으로 (shaken 과 함께 쓴다)
   글꼴은 /assets/fonts/undotum.css (layout.php 가 이 스위치일 때만 읽는다).
   한글을 70/1000em 올려 두었으므로 고딕 자리에서도 漢字를 (작은 글씨에선) 내리지 않는다.
   ================================================================== */

html.rd-shaken.rd-undotum {
    --rd-gothic: "IshiiGothic R", "UnDotum", "Bookk Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --rd-gothic-b: "IshiiGothic B", "UnDotum", "Bookk Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* 크기에 따른 눈의 補正: 작은 글씨는 글자 밑을, 큰 글씨는 가운데를 보고 맞춰 읽는다.
   한글은 0.07em 올려 두었으므로 작은 글씨에선 그대로 두고, 17px 쯤부터 漢字를 조금씩 내려
   26px(글 題目) 쯤에서 0.03em (한글을 0.10em 올린 것과 같은 效果)에 이르러 멈춘다.
   .hj 는 1.1em 이므로 그 안의 1em 은 둘레 글자의 1.1배다 (18.7px = 둘레 17px). */
html.rd-undotum :is(h1, h2, h3, h4, h5, h6, strong, b, th, .category-nav, .post-meta, .post-date, .search-result-count, .site-footer, figcaption, .header-account, .comment-meta, .return-link, button, input, select, .discord-login-btn, .return-button, .login-link, .edit-link, .reply-link, .delete-link, .inline-fix-form) .hj { top: clamp(0px, (1em - 18.7px) * 0.079, 0.027em); }
html.rd-undotum body.mode-mixed :is(h1, h2, h3, h4, h5, h6, strong, b, th, .category-nav, .post-meta, .post-date, .search-result-count, .site-footer, figcaption, .header-account, .comment-meta, .return-link, button, input, select, .discord-login-btn, .return-button, .login-link, .edit-link, .reply-link, .delete-link, .inline-fix-form) ruby { vertical-align: clamp(-0.027em, (17.5px - 1em) * 0.067, 0px);   /* 國漢文混用 모드의 루비도 같은 補正 (루비는 1.02~1.12em) */ }


/* ==================================================================
   좁은 화면
   ================================================================== */

@media (max-width: 560px) {
    html.rd-masthead .site-header-top {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title  title"
            "search account";
        row-gap: 1.25rem;
    }
    html.rd-masthead .site-title { font-size: 2.25rem; }
    html.rd-masthead .search-form { justify-self: stretch; }
    html.rd-masthead .search-form input[type="text"] { width: 100%; flex: 1; }
    html.rd-masthead .site-header .category-nav { gap: 0.25rem 1.1rem; margin-top: 1.25rem; }
    html.rd-masthead .site-main { padding-top: 2.25rem; }

    /* 點線은 한 줄에 들어갈 때만 */
    html.rd-contents .post-list-item { flex-wrap: wrap; row-gap: 0.2rem; padding: 0.55rem 0; }   /* 題目과 날짜 줄 사이 */
    html.rd-contents .post-list-item::after { display: none; }
    html.rd-contents .post-list-item > a { flex-basis: 100%; }

}

/* 題目 첫머리의 여는 全角 괄호: 字面의 왼쪽 빈 반을 당긴다 (글 화면·목록) */
.opn { margin-left: -0.5em; }

/* 모바일 목록: 좌우에 같은 여백을 두어 무게중심을 가운데로 */
@media (max-width: 560px) {
    html.rd-contents .post-list-item { padding-inline: 1.25rem; }
}