/* K-MUDANG Blog — 한지(韓紙) Theme */
/* ── 포스트 좋아요 + 댓글 위젯 ── */
#km-widget { max-width: 820px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.km-widget-inner { border-top: 1px solid rgba(180,150,80,0.3); padding-top: 2rem; }
/* 포스트 좋아요 */
.km-post-like-area { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.km-post-like-btn { display: flex; align-items: center; gap: 0.5rem; background: rgba(200,56,46,0.08); border: 1.5px solid rgba(200,56,46,0.3); border-radius: 50px; padding: 0.6rem 1.4rem; cursor: pointer; font-size: 1rem; font-weight: 700; color: #c8382e; transition: all 0.2s; }
.km-post-like-btn:hover { background: rgba(200,56,46,0.15); border-color: #c8382e; transform: scale(1.05); }
.km-heart-icon { font-size: 1.3rem; line-height: 1; transition: transform 0.15s; }
.km-post-like-count { font-size: 1.1rem; min-width: 2ch; }
.km-post-like-hint { font-size: 0.82rem; color: #9a8a78; }
@keyframes km-pop { 0%,100%{transform:scale(1)} 40%{transform:scale(1.35)} 70%{transform:scale(0.92)} }
.km-pop .km-heart-icon { animation: km-pop 0.4s ease; }
/* 댓글 영역 */
.km-comments-area { border-top: 1px solid rgba(180,150,80,0.2); padding-top: 1.5rem; }
.km-comments-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.km-comments-title { font-size: 1rem; font-weight: 700; color: #2C2C2C; }
.km-comments-count { background: #B8902A; color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: 10px; padding: 0.1rem 0.5rem; }
/* 인증 */
.km-auth-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; flex-wrap: nowrap; }
.km-user-avatar { width: 32px !important; height: 32px !important; min-width: 32px; max-width: 32px; min-height: 32px; max-height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
.km-avatar-fallback { display: inline-flex !important; align-items: center; justify-content: center; background: #B8902A; color: #fff; font-size: 0.85rem; font-weight: 700; }
.km-user-name { font-size: 0.88rem; font-weight: 600; color: #2C2C2C; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.km-logout-btn { font-size: 0.78rem; color: #9a8a78; background: none; border: 1px solid rgba(154,138,120,0.4); border-radius: 10px; padding: 0.25rem 0.65rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.km-google-login-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.2rem; background: #fff; border: 1px solid rgba(180,150,80,0.35); border-radius: 20px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 1.25rem; transition: box-shadow 0.2s; width: 100%; box-sizing: border-box; justify-content: center; }
.km-google-login-btn:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.18); }
/* 댓글 입력폼 */
.km-new-comment-form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; width: 100%; }
.km-textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(180,150,80,0.35); border-radius: 8px; padding: 0.75rem; font-size: 0.92rem; font-family: inherit; color: #2C2C2C; background: #FAF8F3; resize: vertical; min-height: 88px; line-height: 1.65; outline: none; transition: border-color 0.2s; display: block; }
.km-textarea::placeholder { color: #b0a498; }
.km-textarea:focus { border-color: #B8902A; }
.km-post-btn { width: 100%; background: #B8902A; color: #fff; border: none; border-radius: 8px; padding: 0.65rem 1.2rem; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.km-post-btn:hover { background: #9e7a22; }
/* 댓글 목록 */
.km-empty-msg { color: #9a8a78; font-size: 0.88rem; text-align: center; padding: 1.5rem 0; }
.km-comment { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.km-reply { margin-left: 2.5rem; margin-top: 0.75rem; }
.km-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.km-reply .km-avatar { width: 28px; height: 28px; }
.km-comment-content { flex: 1; min-width: 0; }
.km-comment-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.km-cname { font-size: 0.88rem; font-weight: 700; color: #2C2C2C; }
.km-cdate { font-size: 0.78rem; color: #9a8a78; }
.km-del-btn { margin-left: auto; font-size: 0.75rem; color: #c8382e; background: none; border: none; cursor: pointer; padding: 0; opacity: 0.6; }
.km-del-btn:hover { opacity: 1; }
.km-ctext { font-size: 0.9rem; color: #2C2C2C; line-height: 1.7; margin: 0 0 0.4rem; white-space: pre-wrap; word-break: break-word; }
.km-cactions { display: flex; gap: 0.75rem; align-items: center; }
.km-clike-btn { background: none; border: 1px solid rgba(180,150,80,0.3); border-radius: 12px; padding: 0.2rem 0.65rem; font-size: 0.8rem; color: #9a8a78; cursor: pointer; transition: all 0.15s; }
.km-clike-btn.km-liked { background: rgba(200,56,46,0.1); border-color: #c8382e; color: #c8382e; }
.km-clike-btn:hover { border-color: #c8382e; color: #c8382e; }
.km-creply-btn { background: none; border: none; font-size: 0.8rem; color: #9a8a78; cursor: pointer; padding: 0; }
.km-creply-btn:hover { color: #B8902A; }
.km-reply-form { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.km-reply-textarea { min-height: 60px; }
.km-replies { margin-top: 0.75rem; border-left: 2px solid rgba(180,150,80,0.2); padding-left: 0.75rem; }
/* 수정/삭제 버튼 */
.km-comment-actions-meta { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }
.km-edit-btn { font-size: 0.75rem; color: #9a8a78; background: none; border: none; cursor: pointer; padding: 0; }
.km-edit-btn:hover { color: #B8902A; }
.km-edited-mark { font-size: 0.72rem; color: #b0a498; font-style: italic; }
.km-edit-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.km-edit-textarea { min-height: 70px; }
.km-edit-btns { display: flex; gap: 0.5rem; }
.km-edit-cancel-btn { background: none; border: 1px solid rgba(154,138,120,0.4); border-radius: 8px; padding: 0.5rem 0.9rem; font-size: 0.85rem; color: #9a8a78; cursor: pointer; }
@media (max-width: 600px) {
.km-reply { margin-left: 1.25rem; }
.km-post-like-hint { display: none; }
}
html, body { overflow-x: hidden; max-width: 100%; }
/* Class aliases for index/post HTML */
/* 🚨 머리띠는 배경을 칠하지 않는다 (2026-09-09 운영자 지시 — 「윗부분과 아랫부분 색을 아래 것으로」).
종전엔 `rgba(246,236,210,0.92)` 단색 + `backdrop-filter: blur(12px)` 라
한지 결(body::before)이 머리에서만 뭉개져 **가로 띠처럼 보였다.**
⚠️ 투명이 안전한 이유는 이 머리띠가 **sticky 가 아니기 때문**이다 — 같은 선언에 있던
`position: sticky` 를 뒤의 `position: relative` 가 이미 덮고 있었다(죽은 선언이라 지웠다).
다시 sticky 로 만들려면 배경을 같이 되살려야 한다. 안 그러면 카드가 글자 밑으로 비쳐 지나간다. */
.blog-header { z-index: 100; background: transparent; border-bottom: none; padding: 0.5rem 1.5rem 2.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; }
.blog-header .logo-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #2C2C2C; font-weight: 700; font-size: 1.1rem; }
.blog-header .logo-img { width: 28px; height: 28px; }
.blog-header nav { margin-left: auto; }
.blog-header nav a { color: #7a7265; text-decoration: none; font-size: 0.875rem; position: absolute; right: 1.5rem; bottom: 0.5rem; }
.blog-header nav a:hover { color: #2C2C2C; }
.blog-footer { border-top: 1px solid rgba(180,150,80,0.25); padding: 2rem 1.5rem; text-align: center; color: #7a7265; font-size: 0.82rem; }
.blog-footer a { color: #7a7265; text-decoration: none; }
/* ── Oracle Card (사주 앱 동일 스타일) ── */
.blog-oc { position:relative; margin:2rem auto 2.5rem; max-width:680px; padding:1.8rem 2rem 1.5rem; background:#FAF1D9; border:1px solid rgba(150,110,50,0.22); overflow:hidden; animation:oc-fade 0.8s ease; box-shadow: 0 3px 10px rgba(80,55,20,0.10), 0 1px 2px rgba(80,55,20,0.06); }
/* 한지 데클 가장자리 — 위/아래 부드러운 결 (밝은 한지) */
.blog-oc::before, .blog-oc::after { content:""; position:absolute; left:0; right:0; height:6px; pointer-events:none; z-index:2; }
.blog-oc::before { top:0; background-image: url("data:image/svg+xml;utf8,"); background-size:100% 100%; }
.blog-oc::after { bottom:0; background-image: url("data:image/svg+xml;utf8,"); background-size:100% 100%; }
.blog-oc-hanja { position:absolute; right:-4px; top:-12px; font-family:'Ma Shan Zheng',serif; font-size:clamp(80px,22vw,120px); line-height:1; color:rgba(138,36,16,0.08); pointer-events:none; z-index:0; user-select:none; }
.blog-oc-meta { position:relative; z-index:1; display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:3px; color:#9a7a20; font-weight:800; text-transform:uppercase; margin-bottom:16px; }
.blog-oc-meta::before { content:""; flex:0 0 20px; height:1px; background:#B8902A; }
.blog-oc-meta::after { content:""; flex:1 1 12px; min-width:12px; height:1px; background:linear-gradient(90deg,#B8902A,transparent); }
/* 2026-10-02 — 머리줄 글이 «조각마다» 꺾이지 않게 한 덩이로 묶고, 줄은 « · » 자리에서만 바뀐다(오늘의 괘에 간지가 붙어 폰에서 글자 사이로 깨졌다). */
.blog-oc-mt { flex:0 1 auto; min-width:0; line-height:1.7; }
.blog-oc-seg { white-space:nowrap; }
@media (max-width:480px) { .blog-oc-meta { letter-spacing:1.5px; gap:6px; } }
.blog-oc-line { position:relative; z-index:1; font-family:'Cormorant Garamond','Noto Serif KR',serif; font-size:clamp(20px,5.5vw,30px); line-height:1.25; letter-spacing:-0.5px; font-weight:500; color:#2C2C2C; word-break:keep-all; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1, "onum" 0; }
.blog-oc-line b, .blog-oc-author { font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1, "onum" 0; }
.blog-oc-line b { font-weight:700; color:#8a2418; font-style:italic; }
.blog-oc-author { position:relative; z-index:1; margin-top:14px; font-size:11px; letter-spacing:2.5px; color:#9a7a20; font-weight:700; text-transform:uppercase; font-family:'Cormorant Garamond','Noto Serif KR',serif; opacity:0.9; }
.blog-oc-foot { position:relative; z-index:1; margin-top:14px; display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:2px; color:#7a7265; font-weight:700; }
.blog-oc-seal { width:22px; height:22px; background:#8a2418; color:#F5F0E8; display:inline-flex; align-items:center; justify-content:center; font-family:'Ma Shan Zheng',serif; font-size:14px; transform:rotate(-6deg); border-radius:2px; flex-shrink:0; }
/* 다시 뽑기 — 오늘의 괘를 두고도 더 보고 싶은 사람을 위한 것. 오른쪽 끝에 조용히 둔다. */
.blog-oc-again { margin-left:auto; flex-shrink:0; background:transparent; border:1px solid rgba(150,110,50,0.35); color:#9a7a20; font-family:inherit; font-size:10px; letter-spacing:1.5px; font-weight:700; padding:5px 11px; border-radius:2px; cursor:pointer; transition:background 0.18s, color 0.18s, border-color 0.18s; }
.blog-oc-again:hover { background:#8a2418; border-color:#8a2418; color:#F5F0E8; }
.blog-oc-again:active { transform:translateY(1px); }
@keyframes oc-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.engine-notice { max-width: 1200px; margin: 0 auto 1.25rem; padding: 0.85rem 1.1rem; background: linear-gradient(135deg, rgba(184,144,42,0.08), rgba(138,36,16,0.06)); border: 1px solid rgba(184,144,42,0.28); border-radius: 8px; font-size: 0.88rem; line-height: 1.55; color: #4a3f30; text-align: center; word-break: keep-all; }
.engine-notice strong { color: #8a2418; font-weight: 700; }
.engine-notice a { color: #B8902A; font-weight: 700; text-decoration: none; border-bottom: 1px dashed rgba(184,144,42,0.5); padding-bottom: 1px; }
.engine-notice a:hover { color: #8a2418; border-bottom-color: #8a2418; }
.post-engine-label { margin: 0 0 1.5rem; padding: 0.65rem 1rem; background: linear-gradient(135deg, rgba(184,144,42,0.07), rgba(138,36,16,0.05)); border: 1px solid rgba(184,144,42,0.25); border-radius: 7px; font-size: 0.8rem; color: #5a4e3c; text-align: center; line-height: 1.5; }
.post-engine-label strong { color: #8a2418; font-weight: 700; }
.post-engine-ver { margin: -1.1rem 0 1.5rem; font-size: 0.82rem; color: #8a7f6d; text-align: center; letter-spacing: 0.02em; }
.post-engine-ver b { color: #8a2418; font-weight: 700; }
/* 글 머리 — 2026-09-27 C안: 금색 박스 대신 위아래 얇은 선 사이에 날짜·엔진 한 줄 + 안내 한 문장.
.post-engine-ver 는 「날짜 … vN」 꼴을 도구들이 읽으니 마크업을 그대로 두고 여기서만 모양을 바꾼다. */
.post-engine-head { margin: 0 0 1.6rem; padding: 0.55rem 0 0.7rem; border-top: 1px solid var(--text); border-bottom: 1px solid var(--border); }
.post-engine-head .post-engine-ver { margin: 0; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-dim); text-align: left; }
.post-engine-head .post-engine-ver b { color: var(--text); letter-spacing: 0.04em; }
.post-engine-head .post-engine-label { margin: 0.3rem 0 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 0.86rem; color: var(--text); text-align: left; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.post-engine-head .post-engine-label strong { color: var(--text); }
:lang(ja) .post-engine-head .post-engine-label { word-break: normal; line-break: strict; }
.posts-grid, .post-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1.25rem; margin: 0 auto 4rem; max-width: 1200px; padding: 0 1.25rem; }
.section-divider { grid-column: 1 / -1; margin: 1.5rem 0 0.5rem; border-bottom: 2px solid rgba(180,150,80,0.3); padding-bottom: 0.5rem; }
.section-title { font-size: 1.15rem; font-weight: 700; color: #B8902A; margin: 0; letter-spacing: 0.03em; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; box-shadow: 0 2px 6px rgba(60,40,15,0.12), 0 1px 2px rgba(60,40,15,0.08); position: relative; }
.post-card::after { content:""; position:absolute; inset:0; pointer-events:none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; border-radius: 6px; }
.post-card a { text-decoration: none; color: var(--text); display: block; position: relative; z-index: 1; }
.post-card:hover { transform: translateY(-3px); border-color: var(--red-soft); box-shadow: 0 6px 18px rgba(60,40,15,0.18), 0 2px 4px rgba(60,40,15,0.10); }
.card-img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #E4DFD4; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cat-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(200,56,46,0.88); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; }
.card-body { padding: 0.9rem 1rem; }
.card-body h2 { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.card-sub { font-size: 0.8rem; color: #7a7265; margin-bottom: 0.2rem; }
.card-date { font-size: 0.75rem; color: #9a9285; }
.disclaimer { font-size: 0.75rem; color: #aaa298; margin-top: 0.3rem; }
/* Post page aliases */
.post-main { max-width: 820px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.hero-section { display: flex; gap: 1.75rem; align-items: flex-start; padding: 2rem 0 1.5rem; flex-wrap: wrap; }
.celeb-photo-wrap { position: relative; flex-shrink: 0; }
.celeb-photo { width: 160px; height: 200px; object-fit: cover; object-position: top; border-radius: 12px; border: 2px solid rgba(180,150,80,0.3); background: #E4DFD4; display: block; }
.animal-icon { position: absolute; bottom: -10px; right: -10px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #F9F6F0; background: #E4DFD4; object-fit: cover; }
.hero-info { flex: 1; min-width: 200px; }
.category-badge { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #B8902A; margin-bottom: 0.5rem; }
.post-title { font-size: clamp(1.3rem,3.5vw,1.9rem); font-weight: 800; line-height: 1.3; margin-bottom: 0.5rem; color: #2C2C2C; }
.post-title .post-tagline { display: block; font-size: 0.8em; font-weight: 500; color: #9a8a78; margin-top: 0.22rem; line-height: 1.4; }
.post-title .subtitle { font-size: 0.85rem; font-weight: 400; color: #7a7265; display: block; margin-top: 0.25rem; }
.zodiac-animal { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #7a7265; }
.saju-section { margin: 1.5rem 0 2rem; }
.saju-section h2 { font-size: 1rem; font-weight: 700; color: #7a7265; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(180,150,80,0.25); }
.saju-table-wrap { overflow-x: auto; }
.pillar-cell { text-align: center; padding: 0.7rem; border: 1px solid rgba(180,150,80,0.2); }
.stem { font-size: 1.6rem; font-weight: 800; color: #2C2C2C; }
.branch { font-size: 1.2rem; font-weight: 600; color: #3C3C3C; }
.elem-tag { font-size: 0.75rem; color: #7a7265; }
.label-cell, .desc-cell { padding: 0.5rem 0.7rem; border: 1px solid rgba(180,150,80,0.2); font-size: 0.8rem; color: #7a7265; text-align: center; background: #EDE9DF; }
.time-note { font-size: 0.82rem; color: #9a9285; margin-top: 0.75rem; }
/* 8글자 카드 — 셀럽 표를 보고 「내 것은?」 하는 자리에 버튼으로 (2026-09-27 C안). 카드 전체가 눌린다(.e8-go::after). */
.eight-cta { position: relative; display: flex; align-items: center; gap: 0.75rem; margin-top: 0.7rem; padding: 0.75rem 0.85rem; border: 1px solid var(--text); border-radius: 3px; background: rgba(255,250,236,0.55); }
.eight-cta .e8-n { font-family: 'Noto Serif KR',serif; font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--red); flex-shrink: 0; min-width: 1.3em; text-align: center; }
.eight-cta .e8-t { flex: 1; min-width: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.eight-cta .e8-t b { display: block; font-size: 0.9rem; font-weight: 700; }
.eight-cta .e8-go { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--bg); background: var(--text); padding: 0.45rem 0.7rem; border-radius: 2px; white-space: nowrap; text-decoration: none; }
.eight-cta .e8-go::after { content: ''; position: absolute; inset: 0; }
.eight-cta:hover .e8-go, .eight-cta .e8-go:focus-visible { background: var(--red); }
:lang(ja) .eight-cta .e8-t { word-break: normal; line-break: strict; }
:lang(ja) .eight-cta .e8-n { font-family: 'KMudang Brush','Noto Serif JP','Noto Serif KR',serif; font-weight: 400; }
.strength-section { margin-top: 1rem; }
.strength-section h3 { font-size: 0.9rem; color: #7a7265; margin-bottom: 0.5rem; }
.elem-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.elem-bar { display: flex; align-items: center; gap: 0.75rem; font-size: 0.82rem; }
.elem-bar span:first-child { width: 30px; font-weight: 600; }
.bar { flex: 1; height: 8px; background: #E4DFD4; border-radius: 4px; overflow: hidden; }
.fill { height: 100%; border-radius: 4px; }
.fill.wood { background: #388e3c; } .fill.fire { background: #c62828; } .fill.earth { background: #e65100; } .fill.metal { background: #607d8b; } .fill.water { background: #1565c0; }
.val { width: 24px; font-size: 0.78rem; color: #7a7265; }
.sinsal-section, .interactions-section, .format-section { margin: 1.5rem 0; }
.sinsal-section h2, .interactions-section h2, .format-section h2 { font-size: 1rem; font-weight: 700; color: #7a7265; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(180,150,80,0.25); }
.sinsal-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 0.75rem; }
.sinsal-card { background: #EDE9DF; border: 1px solid rgba(180,150,80,0.2); border-radius: 8px; padding: 0.75rem 1rem; }
.sinsal-card.good { border-color: rgba(56,142,60,0.4); }
.sinsal-card.neutral { border-color: rgba(230,81,0,0.35); }
.sinsal-card.bad { border-color: rgba(198,40,40,0.35); }
.sinsal-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; color: #2C2C2C; }
.sinsal-desc { font-size: 0.78rem; color: #7a7265; }
.interaction-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.interaction-tag { background: #EDE9DF; border: 1px solid rgba(180,150,80,0.25); border-radius: 6px; padding: 0.4rem 0.8rem; font-size: 0.82rem; color: #2C2C2C; }
.format-box { background: #EDE9DF; border: 1px solid rgba(200,56,46,0.2); border-radius: 10px; padding: 1.25rem 1.5rem; }
.format-name { font-size: 1.1rem; font-weight: 800; color: #c8382e; margin-bottom: 0.5rem; }
.format-desc { font-size: 0.88rem; color: #5a5550; }
.blog-cta-section { background: linear-gradient(135deg,rgba(200,56,46,0.07),rgba(184,144,42,0.06)); border: 1px solid rgba(200,56,46,0.2); border-radius: 12px; padding: 2rem 1.5rem; text-align: center; margin: 2.5rem 0; }
.blog-cta-section h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; color: #2C2C2C; }
.post-content h2 { font-size: 1.25rem; font-weight: 800; margin: 2rem 0 0.75rem; padding-left: 0.75rem; border-left: 3px solid #c8382e; color: #2C2C2C; }
.post-content h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: #B8902A; }
.post-content p { margin-bottom: 1rem; line-height: 1.75; color: #2C2C2C; }
:root {
--bg: #F6ECD2; /* 밝은 한지 톤 */
--bg-deep: #EDDFB8; /* 약간 진한 한지 */
--surface: #F1E4C2; /* 카드 표면 */
--surface2: #E8D7AB; /* 음각/탭/구분선 영역 */
--border: rgba(150,110,50,0.22);
--border-soft: rgba(150,110,50,0.14);
--red: #8B2418; /* 단청 주칠(朱漆) */
--red-soft: rgba(139,36,24,0.85);
--blue: #1565c0;
--gold: #A07820; /* 황칠(黃漆) — antique gold */
--gold-soft: rgba(160,120,32,0.55);
--text: #2A1E10; /* 묵색(墨色) */
--text-dim: #7A6850; /* 옅은 묵 */
--radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* History restores the previous viewport immediately; animated travel from
the top also decodes every lazy image along the way. */
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
background-color: var(--bg);
color: var(--text);
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
font-size: 16px;
line-height: 1.75;
}
/* 🚨 한지 배경은 body 가 아니라 고정 가상요소가 그린다 (2026-09-02 성능 수리).
`background-attachment: fixed` 로 두면 합성기 스크롤을 못 써서 스크롤 한 프레임마다
10겹(radial 5 + SVG 4 + linear 1)을 뷰포트 전체에 다시 칠한다 — 그게 버벅임의 원인이었다.
가상요소를 뷰포트에 고정하면 **보이는 결과는 같고** 칠은 한 번만 한다.
⚠️ 되돌려 `background-attachment: fixed` 로 옮기지 말 것. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:/* 갈색 반점 — 흐릿하게 (밝은 한지 age spots) */
radial-gradient(ellipse 200px 140px at 8% 12%, rgba(140,90,35,0.05), transparent 70%),
radial-gradient(ellipse 150px 220px at 92% 22%, rgba(150,100,40,0.04), transparent 70%),
radial-gradient(ellipse 240px 160px at 18% 65%, rgba(130,85,30,0.04), transparent 70%),
radial-gradient(ellipse 180px 120px at 78% 78%, rgba(140,90,35,0.05), transparent 70%),
radial-gradient(ellipse 260px 200px at 50% 95%, rgba(135,85,30,0.03), transparent 75%),
/* 실사 한지 4겹 (2026-09-02, 앱 디자인 갱신 A 와 동일한 결) — 가로 섬유·세로 섬유·잔 알갱이·얼룩. base64 SVG, 요청 0 */
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MjAnIGhlaWdodD0nNTIwJz48ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC4wMTIgMC41NScgbnVtT2N0YXZlcz0nMicgc2VlZD0nNycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwLjU5ICAwIDAgMCAwIDAuNDMgIDAgMCAwIDAgMC4yICAwIDAgMCAwLjIgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg=="),
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MjAnIGhlaWdodD0nNTIwJz48ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC41IDAuMDInIG51bU9jdGF2ZXM9JzInIHNlZWQ9JzExJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuNTkgIDAgMCAwIDAgMC40MyAgMCAwIDAgMCAwLjIgIDAgMCAwIDAuMTEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg=="),
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJz48ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45NScgbnVtT2N0YXZlcz0nMycgc2VlZD0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwLjU5ICAwIDAgMCAwIDAuNDMgIDAgMCAwIDAgMC4yICAwIDAgMCAwLjIgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg=="),
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc3MDAnIGhlaWdodD0nNzAwJz48ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC4wMTgnIG51bU9jdGF2ZXM9JzQnIHNlZWQ9JzUnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMC41OSAgMCAwIDAgMCAwLjQzICAwIDAgMCAwIDAuMiAgMCAwIDAgMC4yNiAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+"),
/* 한지 베이스 그라디언트 — 밝은 톤 */
linear-gradient(170deg, #FAF1D9 0%, #F6ECD2 35%, #F1E4C2 70%, #F6ECD2 100%);
}
/* 한지 가장자리 음영 — 종이 한 장 느낌. 클릭 통과, 콘텐츠 위에 그림자만 */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:2147483000;box-shadow:inset 0 0 140px rgba(150,110,50,0.20), inset 0 0 12px rgba(150,110,50,0.08)}
/* ── 언어별 폰트 스택 (CJK 폴백 깨짐 방지) ─────────────────
문제: 본문 한국어 폰트(Noto Sans KR)만 지정 시, JP/EN 페이지에서
특정 한자(沖·熄·劫·衰 등)나 굵은 자형이 글리프 단위로
다른 시스템 폰트(MS Mincho·SimSun 등)로 폴백 → 한 줄 안에서
글자마다 폰트가 섞여 보이는 현상 발생.
해결: i18n.js가 을 ko/ja/en 으로 동적 갱신하므로
:lang() 선택자로 언어별 시스템 폰트 스택 강제. 추가 HTTP 요청 0. */
:lang(ja), :lang(ja) * {
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
}
:lang(en), :lang(en) * {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 예외: 장식용 캘리그래피·세리프 클래스는 :lang() override 면제 */
:lang(ja) .blog-oc-hanja, :lang(en) .blog-oc-hanja,
:lang(ja) .blog-oc-seal, :lang(en) .blog-oc-seal { font-family: 'Ma Shan Zheng', serif; }
:lang(ja) .blog-oc-line, :lang(en) .blog-oc-line,
:lang(ja) .blog-oc-author, :lang(en) .blog-oc-author { font-family: 'Cormorant Garamond', 'Noto Serif KR', serif; }
:lang(ja) .bj-elem-label, :lang(en) .bj-elem-label { font-family: 'Noto Serif KR', serif; }
/* ── Header ──────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(249,246,240,0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(180,150,80,0.25);
padding: 0 1.5rem;
height: 60px;
display: flex;
align-items: center;
gap: 1rem;
}
.site-header .logo {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--text);
font-weight: 700;
font-size: 1.1rem;
}
.site-header .logo img {
width: 28px;
height: 28px;
}
.site-header nav {
margin-left: auto;
display: flex;
gap: 1.2rem;
}
.site-header nav a {
color: var(--text-dim);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.site-header nav a:hover { color: var(--text); }
/* ── Layout ──────────────────────────────── */
.container {
max-width: 820px;
margin: 0 auto;
padding: 0 1.25rem;
}
/* ── Index page ──────────────────────────── */
.page-hero {
text-align: center;
padding: 4rem 1rem 2.5rem;
}
.page-hero h1 {
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 800;
background: linear-gradient(135deg, var(--red), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.75rem;
}
.page-hero p {
color: var(--text-dim);
font-size: 0.95rem;
}
.filter-tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 2rem;
}
.filter-tabs button {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text-dim);
padding: 0.4rem 1rem;
border-radius: 99px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
}
.filter-tabs button.active,
.filter-tabs button:hover {
background: var(--red);
border-color: var(--red);
color: #fff;
}
.post-grid, .posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
margin-bottom: 4rem;
}
.post-card {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJz48ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45NScgbnVtT2N0YXZlcz0nMycgc2VlZD0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwLjU5ICAwIDAgMCAwIDAuNDMgIDAgMCAwIDAgMC4yICAwIDAgMCAwLjIgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg=="), var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: var(--text);
transition: transform 0.2s, border-color 0.2s;
display: block;
}
.post-card:hover {
transform: translateY(-3px);
border-color: rgba(200,56,46,0.35);
}
.post-card .card-img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
object-position: top;
background: var(--surface2);
}
.post-card .card-body {
padding: 0.9rem 1rem;
}
.post-card .card-category {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold);
margin-bottom: 0.3rem;
}
.post-card h3 {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: 0.3rem;
}
.post-card .card-sub {
font-size: 0.8rem;
color: var(--text-dim);
}
/* ── Post page ───────────────────────────── */
.post-breadcrumb {
padding: 1rem 0 0;
font-size: 0.8rem;
color: var(--text-dim);
}
.post-breadcrumb a {
color: var(--text-dim);
text-decoration: none;
}
.post-breadcrumb a:hover { color: var(--text); }
.post-hero {
display: flex;
gap: 1.75rem;
align-items: flex-start;
padding: 2rem 0 1.5rem;
flex-wrap: wrap;
}
.post-hero .celeb-photo {
width: 160px;
height: 200px;
object-fit: cover;
object-position: top;
border-radius: var(--radius);
border: 2px solid var(--border);
flex-shrink: 0;
background: var(--surface2);
}
.post-hero .animal-badge {
position: relative;
}
.post-hero .animal-badge .celeb-photo { display: block; }
.post-hero .animal-icon {
position: absolute;
bottom: -10px;
right: -10px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--bg);
background: var(--surface2);
object-fit: cover;
}
.post-hero .hero-info { flex: 1; min-width: 200px; }
.post-hero .hero-category {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold);
margin-bottom: 0.5rem;
}
.post-hero h1 {
font-size: clamp(1.3rem, 3.5vw, 1.9rem);
font-weight: 800;
line-height: 1.3;
margin-bottom: 0.75rem;
color: var(--text);
}
.post-hero .hero-meta {
font-size: 0.85rem;
color: var(--text-dim);
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
}
.post-hero .hero-meta span { display: flex; align-items: center; gap: 0.3rem; }
/* ── Saju Table ──────────────────────────── */
.saju-section {
margin: 1.5rem 0 2rem;
}
.saju-section h2 {
font-size: 1rem;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.saju-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.saju-table th, .saju-table td {
padding: 0.7rem 0.9rem;
text-align: center;
border: 1px solid var(--border);
}
.saju-table thead th {
background: var(--surface2);
color: var(--text-dim);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.saju-table .pillar-stem {
font-size: 1.4rem;
font-weight: 800;
display: block;
line-height: 1;
margin-bottom: 0.2rem;
color: var(--text);
}
.saju-table .pillar-branch {
font-size: 1.1rem;
font-weight: 600;
display: block;
color: var(--text);
}
.saju-table .pillar-romanized {
font-size: 0.75rem;
color: var(--text-dim);
display: block;
margin-top: 0.15rem;
}
/* 오행 색상 */
.elem-wood { color: #2e7d32; }
.elem-fire { color: #c62828; }
.elem-earth { color: #e65100; }
.elem-metal { color: #455a64; }
.elem-water { color: #1565c0; }
/* 오행 바 */
.ohaeng-bars {
margin: 1.5rem 0;
}
.ohaeng-bars h2 {
font-size: 1rem;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.ohaeng-bar-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}
.ohaeng-bar-label {
width: 40px;
text-align: right;
font-weight: 600;
}
.ohaeng-bar-track {
flex: 1;
height: 8px;
background: var(--surface2);
border-radius: 4px;
overflow: hidden;
}
.ohaeng-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
.bar-wood { background: #388e3c; }
.bar-fire { background: #c62828; }
.bar-earth { background: #e65100; }
.bar-metal { background: #607d8b; }
.bar-water { background: #1565c0; }
.ohaeng-bar-count {
width: 24px;
font-size: 0.8rem;
color: var(--text-dim);
}
/* ── Post content ────────────────────────── */
.post-content {
margin: 2rem 0;
}
.post-content h2 {
font-size: 1.25rem;
font-weight: 800;
margin: 2rem 0 0.75rem;
padding-left: 0.75rem;
border-left: 3px solid var(--red);
color: var(--text);
}
.post-content h3 {
font-size: 1.05rem;
font-weight: 700;
margin: 1.5rem 0 0.5rem;
color: var(--gold);
}
.post-content p {
margin-bottom: 1rem;
color: var(--text);
}
.post-content ul, .post-content ol {
margin: 0.5rem 0 1rem 1.5rem;
}
.post-content li { margin-bottom: 0.3rem; color: var(--text); }
.saju-tag {
display: inline-block;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.15rem 0.5rem;
font-size: 0.82rem;
font-weight: 600;
margin: 0 0.15rem;
color: var(--text);
}
/* ── CTA ─────────────────────────────────── */
.cta-box {
background: linear-gradient(135deg, rgba(200,56,46,0.07), rgba(184,144,42,0.06));
border: 1px solid rgba(200,56,46,0.2);
border-radius: var(--radius);
padding: 2rem 1.5rem;
text-align: center;
margin: 2.5rem 0;
}
.cta-box h3 {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: var(--text);
}
.cta-box p {
color: var(--text-dim);
font-size: 0.9rem;
margin-bottom: 1.25rem;
}
.cta-btn {
display: inline-block;
background: var(--red);
color: #fff;
text-decoration: none;
padding: 0.7rem 2rem;
border-radius: 8px;
font-weight: 700;
font-size: 0.95rem;
transition: background 0.2s, transform 0.15s;
}
.cta-btn:hover {
background: #a02820;
transform: translateY(-1px);
}
/* ── Footer ──────────────────────────────── */
.site-footer {
border-top: 1px solid rgba(180,150,80,0.25);
padding: 2rem 1.5rem;
text-align: center;
color: var(--text-dim);
font-size: 0.82rem;
}
.site-footer a {
color: var(--text-dim);
text-decoration: none;
}
.site-footer a:hover { color: var(--text); }
/* ── CTA Logo ────────────────────────────── */
.cta-logo {
max-width: 160px;
width: 100%;
height: auto;
display: block;
margin: 0 auto 1rem;
}
/* ── Zodiac animal icon (post page inline, not overlay) ── */
.zodiac-animal .animal-icon {
position: static;
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
/* ── YouTube 배너 (blog index) ───────────── */
.yt-banner {
max-width: 1200px;
margin: 0 auto 2rem;
padding: 0 1.25rem;
}
.yt-banner-inner {
display: flex;
align-items: center;
gap: 1rem;
background: #12121a;
border: 1px solid rgba(255,50,50,0.3);
border-radius: 12px;
padding: 1rem 1.25rem;
flex-wrap: wrap;
}
.yt-icon {
font-size: 1.8rem;
flex-shrink: 0;
color: #ff4444;
}
.yt-banner-text { flex: 1; min-width: 160px; }
.yt-banner-text strong { display: block; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.yt-banner-text p { font-size: 0.8rem; color: #888; margin: 0; }
.yt-btn {
display: inline-block;
background: #ff4444;
color: #fff;
text-decoration: none;
padding: 0.55rem 1.25rem;
border-radius: 8px;
font-weight: 700;
font-size: 0.88rem;
white-space: nowrap;
transition: background 0.2s, transform 0.15s;
flex-shrink: 0;
}
.yt-btn:hover { background: #cc2222; transform: translateY(-1px); }
/* ── CTA v2: chips, pitch, collapsible table ─── */
.cta-chips { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin:1rem 0; }
.cta-chip { display:inline-block; padding:0.4rem 1rem; border:1px solid rgba(184,144,42,0.4);
border-radius:20px; font-size:0.85rem; color:var(--text); text-decoration:none;
transition:background 0.2s, border-color 0.2s; }
.cta-chip:hover { background:rgba(184,144,42,0.12); border-color:rgba(184,144,42,0.7); }
.cta-pitch { font-size:0.95rem; color:var(--text); font-weight:600;
margin:0.8rem 0 1.2rem; line-height:1.6; text-align:center; }
.cta-details { margin-top:1.5rem; text-align:center; }
.cta-details summary { cursor:pointer; color:var(--text-dim); font-size:0.85rem;
letter-spacing:0.05em; padding:0.5rem 0; }
.cta-details summary:hover { color:var(--text); }
.cta-compare-table { width:100%; margin-top:0.8rem; border-collapse:collapse; font-size:0.8rem; text-align:center; }
.cta-compare-table th, .cta-compare-table td { padding:0.45rem 0.5rem; border-bottom:1px solid rgba(200,56,46,0.12); }
.cta-compare-table thead th { font-weight:700; font-size:0.82rem; }
.cta-compare-old { color:var(--text-dim); opacity:0.6; }
.cta-compare-new { color:#c8a84b; font-weight:700; }
/* ── Section dividers (blog index grid) ─── */
.section-divider { grid-column: 1 / -1; margin: 1.5rem 0 0.5rem; border-bottom: 2px solid rgba(180,150,80,0.3); padding-bottom: 0.5rem; }
.section-title { font-size: 1.15rem; font-weight: 700; color: #B8902A; margin: 0; letter-spacing: 0.03em; }
/* ── 부적 (Bujeok) ───────────────────────── */
.hero-bujeok { flex-shrink: 0; text-align: center; }
.hero-bujeok img { width: 160px; height: 200px; object-fit: cover; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 20px rgba(184,144,42,0.35); border: 2px solid rgba(184,144,42,0.45); transition: transform 0.2s, box-shadow 0.2s; display: block; }
.hero-bujeok img:hover { transform: scale(1.04); box-shadow: 0 6px 28px rgba(184,144,42,0.55); }
.bujeok-label { font-size: 0.72rem; color: #888; margin-top: 0.4rem; letter-spacing: 0.03em; }
#bujeok-modal, #gunghap-bujeok-modal { display: none; position: fixed; inset: 0; background: transparent; z-index: 9999; align-items: center; justify-content: center; cursor: pointer; flex-direction: column; }
#bujeok-modal.open, #gunghap-bujeok-modal.open { display: flex; }
#bujeok-modal img, #gunghap-bujeok-modal img { max-height: 92vh; max-width: 92vw; width: auto; border-radius: 14px; display: block; }
#bujeok-modal.open img, #gunghap-bujeok-modal.open img { animation: bj-rise .35s cubic-bezier(.22,1,.36,1) both; }
.gunghap-bujeok-img { width: 160px; max-width: 48%; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 20px rgba(184,144,42,0.35); border: 2px solid rgba(184,144,42,0.45); transition: transform 0.2s, box-shadow 0.2s; display: block; margin: 0 auto; }
.gunghap-bujeok-img:hover { transform: scale(1.04); box-shadow: 0 6px 28px rgba(184,144,42,0.55); }
.bj-elem-label { text-align: center; margin-top: 14px; font-size: 28px; font-weight: 900; font-family: 'Noto Serif KR', serif; pointer-events: none; }
@keyframes bj-rise { from { opacity: 0; transform: translateY(28px) scale(.91); } to { opacity: 1; transform: none; } }
/* ── 셀럽 사진 라이트박스 (blog-fx.js Feature 6) ── */
.celeb-photo { cursor: zoom-in; transition: transform 0.2s, box-shadow 0.2s; }
.celeb-photo:hover { transform: scale(1.04); box-shadow: 0 6px 28px rgba(184,144,42,0.45); }
#celeb-photo-modal { display: none; position: fixed; inset: 0; background: rgba(20,16,12,0.82); z-index: 9999; align-items: center; justify-content: center; cursor: zoom-out; }
#celeb-photo-modal.open { display: flex; }
#celeb-photo-modal img { max-height: 85vh; max-width: 88vw; width: auto; border-radius: 14px; display: block; }
#celeb-photo-modal.open img { animation: bj-rise .35s cubic-bezier(.22,1,.36,1) both; }
/* ── 사주박스 / 섹션태그 / 요약바 ─────────── */
.saju-box { background: rgba(150,110,50,0.11); border: 1px solid rgba(150,110,50,0.38); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.2rem 0; font-size: 0.92rem; line-height: 1.9; }
.saju-box p { margin: 0; }
.saju-box .box-row { margin: 0.2rem 0; }
.saju-box .box-key { font-weight: 700; color: #6B4A16; }
.saju-box .box-key::after { content: ":"; margin: 0 0.45em 0 0.05em; font-weight: 700; color: #6B4A16; }
.saju-box .box-val { color: inherit; }
.section-tag { display: block; background: transparent; color: #2A1E10; font-size: 0.92rem; font-weight: 700; padding: 0 0 0.42em; border-radius: 0; border-bottom: 1px solid rgba(150,110,50,0.34); margin: 2rem 0 0.75rem; letter-spacing: 0.1em; }
.summary-bar { border-left: 3px solid #8B2418; padding-left: 0.95rem; margin: 1.1rem 0; font-style: italic; color: #6B4A16; font-weight: 600; font-size: 1rem; line-height: 1.75; }
/* ── Responsive ──────────────────────────── */
@media (max-width: 600px) {
.post-hero {
flex-direction: column;
align-items: center;
text-align: center;
}
.post-hero .hero-meta {
justify-content: center;
}
.post-grid, .posts-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
/* ── Share Buttons ───────────────────────── */
.share-section { text-align: center; padding: 1.8rem 1rem 0.8rem; }
.share-label { font-size: 0.8rem; color: #888; margin-bottom: 0.9rem; letter-spacing: 0.04em; }
.share-buttons { display: flex; gap: 0.65rem; justify-content: center; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 1.15rem; border-radius: 22px; font-size: 0.83rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(184,144,42,0.35); background: rgba(184,144,42,0.09); color: #c8a84b; text-decoration: none; transition: all 0.22s; font-family: inherit; }
.share-btn:hover { background: rgba(184,144,42,0.22); color: #D4AF37; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(184,144,42,0.2); }
.share-btn:active { transform: translateY(0); }
/* ── Language Toggle ────────────────────── */
.lang-toggle { display: inline-flex; gap: 0.25rem; margin-left: 0.75rem; vertical-align: middle; }
.lang-btn {
background: var(--surface2); border: 1px solid var(--border);
color: var(--text-dim); padding: 0.35rem 0.75rem; border-radius: 4px;
cursor: pointer; font-size: 0.85rem; font-weight: 700;
transition: all 0.2s; font-family: inherit; letter-spacing: 0.03em;
line-height: 1.4; white-space: nowrap;
}
.lang-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.lang-btn:hover:not(.active) { background: var(--surface); border-color: var(--gold); color: var(--gold); }
@media (max-width: 600px) {
.lang-toggle { margin-left: 0.4rem; gap: 0.2rem; }
.lang-btn { padding: 0.35rem 0.45rem; font-size: 0.85rem; letter-spacing: 0; }
.blog-header nav { gap: 0.3rem; display: flex; align-items: center; }
/* 모바일: 로고+언어버튼 같은 줄 (메인과 동일), 목록으로가기만 아래 */
.blog-header { height: auto; padding: 0.5rem 1.5rem 2.5rem; position: relative; border-bottom: none; flex-wrap: nowrap; justify-content: space-between; }
.blog-header .logo-link { flex-shrink: 0; white-space: nowrap; }
.blog-header nav { display: flex; flex-wrap: nowrap; align-items: center; }
.blog-header nav .lang-toggle { margin-left: 0; gap: 0.25rem; display: inline-flex; }
.blog-header nav a { position: absolute; right: 1.5rem; bottom: 0.5rem; font-size: 0.85rem; }
}
/* 용해인(龍海仁) 통일 색 — 천기를 묻다 버튼 아래 인라인 스타일과 동일 */
.km-yh{color:#B8860B;font-weight:700;text-shadow:0 0 8px rgba(184,134,11,0.95),0 0 16px rgba(160,110,0,0.8),0 0 30px rgba(130,90,0,0.6);}
/* "왜 K-MUDANG인가" CTA 글로우 펄스 — 메인앱 ko/en/jp.html 동일 패턴 */
@keyframes kmWhyPulse{0%,100%{box-shadow:0 0 8px rgba(239,83,80,0.2)}50%{box-shadow:0 0 22px rgba(239,83,80,0.85),0 0 6px rgba(239,83,80,0.5)}}
.km-why-pulse{animation:kmWhyPulse 2.4s ease-in-out infinite}
.km-why-pulse:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.km-why-pulse{animation:none}}
/* ── 사주 팔자표 (2026-08-04) — 단조로움 해소 ──────────────────
오행 색은 부적 팔레트 권위값과 통일한다(ko.html 부적 생성기와 같은 값).
일주는 '나 자신'이라 표에서 가장 무거워야 한다. */
.saju-table .pillar-cell{position:relative;transition:background .18s}
.elem-tag{
display:inline-block;padding:.12em .55em;border-radius:999px;
font-size:.92rem;font-weight:400;letter-spacing:0;
font-family:'KMudang Brush','Noto Serif KR',serif;
border:1px solid currentColor;background:rgba(255,255,255,.42);
}
.elem-tag.木,.elem-tag.elem-wood{color:#1B5E20}
.elem-tag.火,.elem-tag.elem-fire{color:#B71C1C}
.elem-tag.土,.elem-tag.elem-earth{color:#795548}
.elem-tag.金,.elem-tag.elem-metal{color:#A8870F} /* 금 원색(#C9A825)은 밝은 바탕에서 흐려 한 단계 낮춘다 */
.elem-tag.水,.elem-tag.elem-water{color:#0D47A1}
.elem-tag:not(.木):not(.火):not(.土):not(.金):not(.水):not(.elem-wood):not(.elem-fire):not(.elem-earth):not(.elem-metal):not(.elem-water){
color:#9a9186;border-style:dashed;font-weight:400; /* 시주 미상 */
}
/* 일주 = 나 자신 — 기둥 하나만 도드라지게 */
.saju-table .pillar-row .pillar-cell:nth-child(3){
background:rgba(200,168,75,.16);
box-shadow:inset 0 0 0 2px rgba(200,168,75,.55);
}
.saju-table .pillar-row .pillar-cell:nth-child(3) .stem{color:#8a6a2a}
/* 시주 미상 기둥은 물러나게 */
.saju-table .pillar-row .pillar-cell:nth-child(4){opacity:.62}
.stem{letter-spacing:.02em}
.label-cell{font-weight:700;color:#6d6455}
@media (prefers-color-scheme:dark){
.elem-tag{background:rgba(0,0,0,.25)}
.elem-tag.木,.elem-tag.elem-wood{color:#7CC47F}.elem-tag.火,.elem-tag.elem-fire{color:#E77}.elem-tag.土,.elem-tag.elem-earth{color:#C0A08A}
.elem-tag.金,.elem-tag.elem-metal{color:#E3C765}.elem-tag.水,.elem-tag.elem-water{color:#7FA8DE}
.saju-table .pillar-row .pillar-cell:nth-child(3) .stem{color:#e8c877}
}
/* === KMudang Brush (blog) === */@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-ko-rest.woff2') format('woff2');unicode-range:U+AC00-D7A3}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-ko.woff2') format('woff2');unicode-range:U+3131-3163,U+3165-318E,U+AC00-AC01,U+AC04,U+AC07-AC09,U+AC10-AC16,U+AC19-AC1A,U+AC1C-AC1D,U+AC2D,U+AC2F,U+AC31,U+AC38,U+AC70-AC71,U+AC74,U+AC77-AC78,U+AC80-AC81,U+AC83,U+AC89,U+AC8C,U+AC90,U+ACA0,U+ACA8-ACAA,U+ACAC,U+ACB0,U+ACB8-ACB9,U+ACBC-ACBD,U+ACC1,U+ACC4,U+ACE0-ACE1,U+ACE4,U+ACE7-ACE8,U+ACF0-ACF1,U+ACF3,U+ACF5,U+ACFC-ACFD,U+AD00,U+AD04,U+AD11,U+AD18,U+AD1C,U+AD34,U+AD44,U+AD49,U+AD50,U+AD6C-AD6D,U+AD70,U+AD73-AD76,U+AD7D,U+AD7F,U+AD81,U+AD88,U+AD8C,U+AD90,U+ADA4,U+ADC0,U+ADC4,U+ADC8,U+ADDC,U+ADE0,U+ADF8-ADF9,U+ADFC,U+AE00-AE01,U+AE08-AE09,U+AE0B,U+AE0D,U+AE30,U+AE34,U+AE38,U+AE40-AE41,U+AE43,U+AE45,U+AE4A,U+AE4C,U+AE4E,U+AE50,U+AE54,U+AE5C-AE5D,U+AE65,U+AE68,U+AE6C,U+AE70,U+AEBC,U+AEBE,U+AECD,U+AECF,U+AED8,U+AEF4,U+AF08,U+AF2C-AF2D,U+AF34,U+AF3C-AF3D,U+AF3F,U+AF41-AF43,U+AF49,U+AF5D,U+AF64,U+AF80,U+AFB8,U+AFBC,U+AFC0,U+AFC7-AFC8,U+AFCB,U+AFD4,U+AFF0,U+B00C,U+B010,U+B014,U+B01C,U+B044,U+B048,U+B04A,U+B04C,U+B053-B054,U+B057,U+B059,U+B05D,U+B07C,U+B080,U+B084,U+B08C,U+B098-B099,U+B09C,U+B0A0-B0A1,U+B0A8-B0A9,U+B0AB-B0AF,U+B0B1,U+B0B3-B0B4,U+B0B8,U+B0BC,U+B0C4-B0C5,U+B0C7-B0C9,U+B0D0,U+B0D8,U+B0E5,U+B108-B109,U+B10C,U+B110,U+B113,U+B118,U+B11D,U+B123-B125,U+B12C,U+B137,U+B140-B141,U+B144,U+B150,U+B154-B155,U+B158,U+B178-B179,U+B17C,U+B180,U+B188,U+B18D,U+B192-B194,U+B1CC,U+B1E8,U+B204-B205,U+B208,U+B20C,U+B215,U+B220,U+B258,U+B274,U+B290-B291,U+B294,U+B298-B299,U+B2A0,U+B2A5-B2A6,U+B2AA,U+B2AC,U+B2C8,U+B2CC,U+B2D0,U+B2D8-B2D9,U+B2DD,U+B2E4-B2E6,U+B2E8,U+B2EB-B2EE,U+B2F3-B2F5,U+B2F7,U+B2F9,U+B2FB,U+B2FF-B301,U+B304,U+B308,U+B310,U+B313-B315,U+B354-B355,U+B358,U+B35C,U+B35F,U+B364-B365,U+B367,U+B369,U+B36B,U+B36E,U+B370-B371,U+B378,U+B38C,U+B390,U+B3A0,U+B3C4-B3C5,U+B3C8,U+B3CB-B3CC,U+B3D5,U+B3D9,U+B3DB,U+B3FC,U+B410,U+B418,U+B41C,U+B420,U+B428-B429,U+B450-B451,U+B454,U+B458,U+B460-B461,U+B465,U+B46C,U+B480,U+B4A4,U+B4B7,U+B4C0,U+B4C8,U+B4DC-B4DD,U+B4E0,U+B4E3-B4E4,U+B4E6,U+B4EC-B4ED,U+B4EF,U+B4F1,U+B514,U+B518,U+B51B-B51C,U+B524-B525,U+B527,U+B529-B52A,U+B530-B531,U+B534,U+B538,U+B540,U+B545,U+B54C,U+B550,U+B554,U+B55C,U+B5A0-B5A1,U+B5A4,U+B5A8,U+B5B3-B5B4,U+B5BB-B5BC,U+B5C4,U+B610-B611,U+B625,U+B62C,U+B664,U+B69C-B69D,U+B6AB,U+B6B1,U+B6F0,U+B728-B729,U+B72C,U+B72F-B730,U+B738,U+B73B,U+B744,U+B760,U+B764,U+B77C-B77D,U+B780,U+B784,U+B78C-B78D,U+B790-B791,U+B798-B799,U+B79C,U+B7A8,U+B7AB-B7AD,U+B7B5,U+B7C9,U+B7EC-B7ED,U+B7F0,U+B7F4,U+B7FC-B7FD,U+B7FF-B801,U+B807-B809,U+B80C,U+B818,U+B824-B825,U+B828,U+B82C,U+B834-B835,U+B837-B839,U+B840,U+B85C-B85D,U+B860,U+B864,U+B86C-B86D,U+B86F,U+B871,U+B8B0,U+B8CC,U+B8E1,U+B8E8-B8E9,U+B8EC,U+B8F0,U+B8F9,U+B904,U+B958,U+B960,U+B968,U+B96D,U+B974-B975,U+B978,U+B97C,U+B984-B985,U+B987,U+B98E,U+B9AC-B9AD,U+B9B0,U+B9B4,U+B9BC-B9BD,U+B9BF,U+B9C1,U+B9C8-B9C9,U+B9CC,U+B9CE-B9D1,U+B9D9,U+B9DB,U+B9DD-B9DE,U+B9E1,U+B9E3-B9E5,U+B9E8,U+B9F5,U+B9F7,U+B9F9-B9FA,U+BA38-BA39,U+BA3C,U+BA40,U+BA48,U+BA4B,U+BA4D,U+BA54,U+BA58,U+BA5C,U+BA64,U+BA70,U+BA74,U+BA78,U+BA85,U+BA87,U+BAA8-BAA9,U+BAAB-BAAC,U+BAB0,U+BAB8-BAB9,U+BABB,U+BABD,U+BB18,U+BB34-BB36,U+BB38,U+BB3B-BB3C,U+BB44,U+BB49,U+BB50,U+BB54,U+BB58,U+BBA4,U+BBAC,U+BBC0,U+BBF8-BBF9,U+BBFC,U+BBFF-BC00,U+BC0B-BC0D,U+BC0F,U+BC11,U+BC14-BC16,U+BC18,U+BC1B-BC1D,U+BC1F,U+BC24-BC25,U+BC29,U+BC2D,U+BC30-BC31,U+BC38,U+BC40,U+BC43,U+BC45,U+BC49,U+BC84-BC85,U+BC88,U+BC8C,U+BC94-BC95,U+BC97,U+BCA0,U+BCA4,U+BCA8,U+BCB3,U+BCBC-BCBD,U+BCC0,U+BCC4,U+BCCD,U+BCD1,U+BCD5,U+BCF4-BCF6,U+BCF8,U+BCFC,U+BD04-BD05,U+BD09,U+BD10,U+BD24,U+BD80-BD81,U+BD84,U+BD88-BD89,U+BD93,U+BD95,U+BD99,U+BDD4,U+BDF0,U+BE0C,U+BE14,U+BE44-BE45,U+BE48,U+BE4C,U+BE57,U+BE59-BE5B,U+BE60-BE61,U+BE68,U+BE7C-BE7D,U+BE8F,U+BED1,U+BED4,U+BED7-BED8,U+BEE3,U+BF08,U+BF18,U+BF1B,U+BF50-BF51,U+BFB0,U+BFCC-BFCD,U+BFD0,U+BFD4,U+BFDC,U+C058,U+C05C,U+C068,U+C090,U+C0AC-C0AD,U+C0B0,U+C0B4,U+C0B6,U+C0BC-C0BD,U+C0C1,U+C0C5,U+C0C8-C0C9,U+C0CC,U+C0D8,U+C0DD,U+C0E4,U+C0F7,U+C11C-C11E,U+C120,U+C123-C124,U+C12C-C12D,U+C12F-C131,U+C138-C139,U+C13C,U+C140,U+C148-C149,U+C14B,U+C154,U+C158,U+C168,U+C170,U+C18C-C18D,U+C190,U+C194,U+C19C,U+C19F,U+C1A1,U+C1A5,U+C1C4,U+C1E0,U+C1F3,U+C218-C219,U+C21C,U+C220,U+C228,U+C22B,U+C22D,U+C22F,U+C231-C232,U+C26C,U+C270,U+C274,U+C27C-C27D,U+C288,U+C2A4,U+C2A8,U+C2AC,U+C2B4-C2B5,U+C2B7,U+C2B9,U+C2DC-C2DD,U+C2E0,U+C2E3-C2E4,U+C2EB-C2ED,U+C2F1,U+C2F6,U+C2F8-C2F9,U+C2FC,U+C30D,U+C313,U+C368-C369,U+C379,U+C37C,U+C3D8,U+C3DF-C3E0,U+C465,U+C4F0,U+C4F4,U+C4F8,U+C500,U+C50C,U+C528-C529,U+C52C,U+C53B,U+C544-C545,U+C548-C54A,U+C54C,U+C553-C555,U+C557-C559,U+C55E,U+C560-C561,U+C564,U+C568,U+C570-C571,U+C575,U+C57C-C57D,U+C580,U+C587,U+C58C,U+C591,U+C595,U+C597-C598,U+C5B4-C5B5,U+C5B8-C5B9,U+C5BB-C5BD,U+C5C4-C5C9,U+C5CC,U+C5CE,U+C5D0,U+C5D4,U+C5D8,U+C5EC-C5EE,U+C5F0,U+C5F4,U+C5FC-C601,U+C606,U+C608,U+C61B,U+C624-C625,U+C628,U+C62C-C62E,U+C633-C635,U+C637,U+C639,U+C640,U+C644,U+C654-C655,U+C65C,U+C678,U+C67C,U+C694-C695,U+C6A9,U+C6B0-C6B1,U+C6B4,U+C6B8,U+C6C0,U+C6C3,U+C6C5,U+C6CC,U+C6D0,U+C6D4,U+C6E0,U+C6E8-C6E9,U+C6EC,U+C6F9,U+C6FB,U+C704,U+C717,U+C720-C721,U+C724,U+C728,U+C735,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774-C775,U+C778,U+C77C-C77D,U+C783-C785,U+C787-C78A,U+C78E,U+C790-C791,U+C794,U+C796,U+C798,U+C7A0-C7A1,U+C7A3,U+C7A5-C7A6,U+C7AC,U+C7B0,U+C7C1,U+C800-C801,U+C804,U+C808,U+C80A,U+C810-C811,U+C815-C816,U+C81C-C81D,U+C820,U+C824,U+C82F,U+C838,U+C84C,U+C870-C871,U+C874,U+C880-C881,U+C885,U+C887,U+C88B-C88C,U+C8C4,U+C8FC-C8FD,U+C900,U+C904,U+C90C-C90D,U+C90F,U+C911,U+C918,U+C92C,U+C950,U+C954,U+C958,U+C988-C989,U+C990,U+C998,U+C99D,U+C9C0-C9C1,U+C9C4,U+C9C8,U+C9CA,U+C9D0-C9D1,U+C9D3,U+C9D5,U+C9D9-C9DA,U+C9DC-C9DD,U+C9E0,U+C9E4,U+C9E7,U+C9F1,U+C9F8,U+CA4C-CA4D,U+CA61,U+CABC-CABD,U+CAD3,U+CB10,U+CBE4,U+CC0C-CC0D,U+CC10,U+CC14,U+CC22,U+CC28-CC29,U+CC2C,U+CC2E,U+CC30,U+CC38,U+CC3B-CC3E,U+CC44-CC45,U+CC54,U+CC59,U+CC98-CC99,U+CC9C,U+CCA0,U+CCA8-CCA9,U+CCAB,U+CCAD,U+CCB4,U+CCD0,U+CCE4,U+CD08-CD09,U+CD0C,U+CD18,U+CD1B,U+CD1D,U+CD2C,U+CD5C,U+CD94-CD95,U+CD98,U+CD9C,U+CDA4-CDA5,U+CDA7,U+CDA9,U+CDB0,U+CDE8,U+CE20-CE21,U+CE24,U+CE35,U+CE58-CE59,U+CE5C,U+CE60,U+CE68-CE69,U+CE6B,U+CE6D,U+CE74,U+CE78,U+CE7C,U+CE84,U+CE90,U+CE94,U+CE98,U+CEE4-CEE5,U+CEE8,U+CEEC,U+CEF4-CEF5,U+CEF7-CEF9,U+CF00,U+CF04,U+CF1C,U+CF20,U+CF24,U+CF30,U+CF54,U+CF58,U+CF5C,U+CF64-CF65,U+CF67,U+CF69,U+CF8C,U+CFE0,U+CFE8,U+D034,U+D06C,U+D070,U+D074,U+D07C,U+D0A4,U+D0A8,U+D0AC,U+D0B4,U+D0B7,U+D0B9,U+D0C0-D0C1,U+D0C4,U+D0C8,U+D0D0-D0D1,U+D0D3-D0D5,U+D0DC-D0DD,U+D0E0,U+D0EC-D0ED,U+D0F1,U+D130-D131,U+D134,U+D138,U+D141,U+D145,U+D14C-D14D,U+D150,U+D15C,U+D168,U+D1A0-D1A1,U+D1A4,U+D1B0-D1B1,U+D1B5,U+D1F4,U+D22C-D22D,U+D230,U+D234,U+D23C,U+D280,U+D284,U+D295,U+D29C,U+D2B8-D2B9,U+D2BC,U+D2C0,U+D2C8,U+D2CB,U+D2D4,U+D2F0-D2F1,U+D2F4,U+D2F8,U+D300-D301,U+D305,U+D30C,U+D30E,U+D310,U+D314,U+D31D,U+D320-D321,U+D328-D329,U+D32C,U+D33D,U+D37C,U+D380,U+D384,U+D391,U+D398-D399,U+D39C,U+D3B4,U+D3B8,U+D3BC,U+D3C9,U+D3D0,U+D3EC-D3ED,U+D3F0,U+D3F4,U+D3FC,U+D45C,U+D478-D479,U+D47C,U+D480,U+D488,U+D48B,U+D48D,U+D4E8,U+D504,U+D508,U+D50C,U+D514,U+D53C-D53D,U+D540,U+D544,U+D54C-D54D,U+D54F,U+D551,U+D558-D559,U+D55C,U+D560,U+D568-D569,U+D56B,U+D56D,U+D574-D575,U+D578,U+D587-D589,U+D5A5,U+D5C8,U+D5CC,U+D5D0,U+D5D8,U+D5DB,U+D5E4,U+D5EC,U+D600-D601,U+D604,U+D608,U+D611,U+D614-D615,U+D61C,U+D638-D639,U+D63C,U+D640,U+D648-D649,U+D64D,U+D654-D655,U+D658,U+D65C,U+D667,U+D669,U+D683,U+D68C-D68D,U+D69F,U+D6A1,U+D6A8,U+D6C4-D6C5,U+D6C8,U+D6CC,U+D6D1,U+D6D4,U+D6D7,U+D6E4,U+D6E8,U+D718,U+D720,U+D729,U+D734,U+D749,U+D750-D751,U+D754,U+D758-D759,U+D760-D761,U+D765,U+D769,U+D76C,U+D770,U+D788,U+D78C,U+D790,U+D798-D799,U+D7A3}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-kanji-rest.woff2') format('woff2');unicode-range:U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-kanji.woff2') format('woff2');unicode-range:U+4E00,U+4E07,U+4E0A-4E0B,U+4E0D-4E0E,U+4E16,U+4E21,U+4E26,U+4E2D,U+4E38,U+4E3B,U+4E57,U+4E71,U+4E7E,U+4E86,U+4E88-4E89,U+4E8B-4E8C,U+4E92,U+4E94,U+4EA4,U+4EAC,U+4ECA,U+4ED5-4ED6,U+4ED8,U+4EE3-4EE5,U+4EEE,U+4EF2,U+4EF6,U+4EFB,U+4F01,U+4F0F,U+4F11,U+4F1A,U+4F1D,U+4F34,U+4F38,U+4F3C,U+4F4E,U+4F53,U+4F55,U+4F59,U+4F5C,U+4F7F,U+4F9B,U+4FA1,U+4FC2,U+4FDD,U+4FE1,U+500B,U+5012,U+5019,U+5024,U+505C,U+5065,U+5074,U+5076,U+508D,U+5099,U+50BE,U+50CD,U+50CF,U+512A,U+5148-5149,U+5165,U+5168,U+516C,U+5171,U+5177-5178,U+5185,U+518D,U+51B2,U+51B7,U+51C4,U+51CD,U+51E6,U+51FA,U+5200,U+5207,U+521D,U+5224-5225,U+5229,U+5236,U+523A-523B,U+5247,U+524A,U+524D,U+5263,U+526F,U+5272,U+5275,U+529B,U+529F-52A0,U+52A9-52AA,U+52B4,U+52B9,U+52D5,U+52D9,U+52DD,U+5305,U+5316-5317,U+533A,U+5341,U+5343,U+5354,U+5357-5358,U+5360,U+5371,U+5373,U+539A,U+539F,U+53B3,U+53BB,U+53C2,U+53CB,U+53CD-53CE,U+53D6-53D7,U+53E3,U+53EF-53F0,U+53F3,U+53F7,U+540C-540D,U+5410-5411,U+541B,U+541F,U+5438-5439,U+544A,U+5468,U+5473,U+547C,U+548C,U+54B2,U+54C1,U+54E1,U+54F2,U+552F,U+5546,U+554F,U+55B6,U+565B,U+5668,U+5674,U+56DE,U+56F2-56F3,U+56FA,U+56FD,U+5727-5728,U+5730,U+5747,U+578B,U+57CB,U+57DF,U+57F7,U+57FA,U+5805,U+5831,U+5834,U+585E,U+5883,U+5897,U+58A8,U+58C1,U+58CA,U+58EB,U+58F0,U+5909,U+5916,U+591A,U+591C,U+592A-592B,U+5931,U+5951,U+5965,U+596A,U+597D,U+5999,U+59BB,U+59CB,U+59D4,U+59FF,U+5A01,U+5A18,U+5A5A,U+5A66,U+5B58,U+5B63,U+5B66,U+5B88-5B89,U+5B8C,U+5B9A,U+5B9D,U+5B9F,U+5BA4,U+5BB6,U+5BB9,U+5BC2,U+5BC4,U+5BC6,U+5BCC,U+5BD2,U+5BDD,U+5BDF,U+5BFE,U+5C02,U+5C0A,U+5C0E-5C0F,U+5C11,U+5C3D,U+5C45,U+5C4A-5C4B,U+5C5E,U+5C71,U+5CA9,U+5D29,U+5DBD,U+5DDD,U+5DE1,U+5DE6-5DE8,U+5DEE,U+5E03,U+5E2B,U+5E2F-5E30,U+5E38,U+5E73,U+5E78,U+5E7C,U+5E7E,U+5E83,U+5E95,U+5EA6-5EA7,U+5EAD,U+5EB7,U+5EF6,U+5F0F,U+5F15,U+5F35,U+5F53,U+5F62,U+5F71,U+5F79,U+5F7C,U+5F85,U+5F8B-5F8C,U+5F93,U+5F97,U+5FA1,U+5FA9,U+5FB3-5FB4,U+5FB9,U+5FC3,U+5FC5,U+5FCD,U+5FD7,U+5FDC,U+5FF5,U+601D,U+6025,U+6027,U+604B,U+6050,U+606F,U+6075,U+60A3,U+60A9-60AA,U+60C5,U+60DC,U+60F3,U+60F9,U+610F,U+611B,U+611F,U+614B,U+614E,U+6163,U+6182,U+61D0,U+61F8,U+6210-6211,U+6226,U+6238,U+624B,U+624D,U+6253,U+6255,U+6271,U+6280,U+6291,U+6295,U+6298,U+629C,U+629E,U+62B1,U+62BC,U+62C5,U+62E1,U+6301,U+6307,U+632F,U+6368,U+6388,U+6398,U+639B,U+63A2,U+63A5,U+63A8,U+63B4,U+63CF-63D0,U+63DB,U+63E1,U+63EE,U+63FA,U+640D,U+6483,U+652F,U+653E,U+654F,U+6557,U+6559,U+6563,U+6570,U+6574,U+6577,U+6599,U+65AD,U+65B0,U+65C5,U+65CF,U+65E2,U+65E9,U+6607,U+660E,U+6613,U+6620,U+6669,U+666E-666F,U+6697,U+66AE,U+66F2,U+66F8,U+66FF-6700,U+6709,U+670D,U+671B,U+671D,U+671F,U+672B-672C,U+675F,U+6761,U+6765,U+676F,U+6771,U+677E,U+6790,U+679C,U+67A0,U+67AF,U+67C4,U+67D3-67D4,U+6838,U+6848,U+68EE,U+691C,U+696D,U+6975,U+697D,U+69CB,U+6A19,U+6A29,U+6A39,U+6A5F,U+6B20-6B21,U+6B32,U+6B4C,U+6B62,U+6B66,U+6B69,U+6B73,U+6B8B,U+6BB5,U+6BCD-6BCE,U+6BD2,U+6C17,U+6C37,U+6C42,U+6C7A,U+6C88,U+6CBB,U+6CC1,U+6CC9,U+6CD5,U+6CE2,U+6CE8,U+6D17,U+6D1E,U+6D3B,U+6D41,U+6D6E,U+6D88,U+6D99,U+6DAF,U+6DB8,U+6DBC,U+6DF1,U+6E05,U+6E07-6E08,U+6E1B,U+6E21,U+6E29,U+6E2C,U+6E6F,U+6E7F-6E80,U+6E90,U+6E96,U+6EA2,U+6EB6,U+6EF4,U+6F0F,U+6F14,U+6F20,U+6F5C,U+6F64,U+6F84,U+6FC0,U+706F,U+7089,U+708E,U+70B9-70BA,U+70C8,U+7121,U+7126,U+7136,U+713C,U+7167,U+716E,U+71B1,U+71C3,U+71E5,U+7206,U+7236,U+7247,U+7269,U+7279,U+72B6,U+72D9,U+72EC,U+7387,U+73FE,U+74A7,U+74B0,U+7523,U+7531,U+753B,U+754C,U+7551,U+7559,U+7565,U+756A,U+7570,U+75B2,U+75C7,U+75DB,U+767A,U+767E,U+7684,U+76AE,U+76DB,U+76E4,U+76EE,U+76F4,U+76FE,U+7709,U+771F-7720,U+773C,U+7740,U+77AC,U+77B3,U+77DB,U+77E5,U+77ED,U+77F3,U+7802,U+7814,U+786C,U+78BA,U+78E8,U+793A,U+793E,U+7984,U+79C1,U+79D8,U+79FB,U+7A0B,U+7A2E,U+7A3C,U+7A4D,U+7A4F,U+7A81,U+7AEF,U+7AF6,U+7B26,U+7B2C,U+7B49,U+7B4B,U+7B54,U+7B56,U+7B97,U+7BA1,U+7BC9,U+7C98,U+7CBE,U+7CFB,U+7D04,U+7D0D,U+7D14,U+7D19,U+7D20,U+7D22,U+7D30,U+7D42,U+7D44,U+7D4C,U+7D50,U+7D61,U+7D71,U+7D75,U+7D9A,U+7DCA,U+7DCF,U+7DD1-7DD2,U+7DDA,U+7DE0,U+7DF4,U+7E01,U+7E1B,U+7E4A,U+7E54,U+7F6E,U+7F8E,U+7FA4,U+7FA9,U+7FD2,U+8001,U+8003,U+8005,U+8010,U+8033,U+805E,U+8077,U+8089,U+808C,U+809D,U+80B2,U+80BA,U+80C3,U+80C6,U+80CC,U+80F8,U+80FD,U+8106,U+8108,U+8133,U+814E,U+8178-8179,U+819A,U+81D3,U+81EA,U+81F4,U+8208,U+820C,U+821E,U+822C,U+826F,U+8272,U+82B8,U+82BD,U+82E5-82E6,U+8336,U+8352,U+8377,U+843D,U+8449,U+845B,U+84B8,U+84C4,U+8535,U+8584,U+85AA,U+85AC,U+85E4,U+865A,U+878D,U+8840,U+8846,U+884C,U+8853,U+885D,U+8861,U+8863,U+8868,U+88C5,U+88CF,U+88DC,U+897F,U+8981,U+8986,U+898B,U+898F,U+8996-8997,U+899A,U+89AA,U+89B3,U+89C0,U+89D2,U+89E3,U+89E6,U+8A00,U+8A08,U+8A18,U+8A2A,U+8A2D,U+8A3C,U+8A66,U+8A70-8A71,U+8A89,U+8A8D,U+8A9E,U+8AAD,U+8AB0,U+8ABF,U+8AD6,U+8B58,U+8B66,U+8B77,U+8C4A,U+8C61,U+8CA0,U+8CAC,U+8CC7,U+8CE2,U+8CEA,U+8D64,U+8D77,U+8D85,U+8D8A,U+8DB3,U+8DDD,U+8DE1,U+8DEF,U+8E0A,U+8E0F,U+8ECD,U+8EDF,U+8EE2,U+8EF8,U+8EFD,U+8F1D,U+8FBA,U+8FBC,U+8FCE,U+8FD1,U+8FD4,U+8FEB,U+8FFD,U+9000-9001,U+9006,U+9014,U+901F-9020,U+9023,U+9032,U+9045,U+904E,U+9053-9055,U+9060,U+9069,U+9078,U+907F,U+90E8,U+914D,U+9177,U+91C8,U+91CD-91CE,U+91DD,U+9244,U+9271,U+9280,U+92AD,U+92ED,U+935B,U+9451,U+9589,U+958B,U+9593,U+95A2,U+95C7,U+9632,U+964D,U+9650,U+9664,U+967A,U+969B,U+96A0,U+96C6,U+96E2-96E3,U+96E8,U+96EA,U+970A,U+971C,U+9732,U+9752,U+9759,U+975E,U+9762,U+97F3,U+97FF,U+9802-9803,U+9805-9806,U+9808,U+9811,U+9818,U+982D,U+983B-983C,U+984C-984D,U+9854,U+9858,U+985E,U+98A8,U+98DB,U+98F2,U+9999,U+9A13,U+9AA8,U+9AD8,U+9B31,U+9B42,U+9B45,U+9CF4,U+9EBB,U+9EC4,U+9ED2,U+9ED9,U+9F3B}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-kana.woff2') format('woff2');unicode-range:U+3040-30FF}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-sym.woff2') format('woff2');unicode-range:U+A0-FF,U+131,U+141-142,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+2002,U+2013-2016,U+2018-201A,U+201C-201E,U+2020-2022,U+2025-2026,U+2030,U+2039-203B,U+2044,U+205A,U+205D,U+2190-2193,U+21C4-21C6,U+21E6-21E9,U+2212,U+2215,U+2312,U+23A7-23A9,U+23AB-23AD,U+2460-2490,U+249C-24B5,U+24EA,U+2500-254B,U+2550,U+255E,U+2561,U+256A,U+256D-2573,U+2581-258F,U+2594-2595,U+25A0-25A2,U+25B2-25B3,U+25B7,U+25BC-25BD,U+25C1,U+25C6-25C7,U+25C9,U+25CB,U+25CE-25CF,U+25E2-25E5,U+25EF,U+2600-2603,U+2605-2606,U+260E,U+261C-261F,U+2640,U+2642,U+2660-2667,U+266A,U+266D,U+266F,U+2776-277E,U+27A1,U+3000-3015,U+301D,U+301F-3020,U+3036,U+FF01-FF5E,U+FF61-FF9F,U+FFE0-FFE5,U+FFE8}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-han.woff2') format('woff2');unicode-range:U+4E01,U+4E03,U+4E09,U+4E11,U+4E19,U+4E59,U+4EA1,U+4EA5,U+4EBA,U+4EC1,U+4F4D,U+504F,U+50B7,U+5143,U+516B,U+516D,U+51A0,U+51AC,U+51F6,U+5203,U+5206,U+5211,U+524B,U+52AB,U+52E2,U+5348,U+534A,U+536F-5370,U+53E4,U+5408-5409,U+547D,U+54C0,U+559C,U+55D4,U+56DB,U+571F,U+57CE,U+5802,U+5893,U+58C7,U+58EC,U+58FD,U+590F,U+5927,U+5929,U+5973,U+59FB,U+5B50,U+5B57,U+5B64,U+5B85,U+5B98,U+5BAE,U+5BB3,U+5BBF,U+5BC5,U+5BE1,U+5C07,U+5C40,U+5DF1,U+5DF3,U+5E1D,U+5E36,U+5E72,U+5E74,U+5E9A,U+5EFA,U+5F31,U+5F37,U+5FB7,U+5FCC,U+6012,U+6028,U+620A,U+620C,U+6240,U+6587,U+65B9,U+65E3,U+65E5,U+65FA,U+660C,U+661F,U+6625,U+6642,U+6708,U+6728,U+672A,U+67F1,U+6839,U+683C,U+6843,U+6A02,U+6B63,U+6B72,U+6B7B,U+6BBA,U+6BD4,U+6C23,U+6C34,U+6C90,U+6C96,U+6D29,U+6D74,U+6D77,U+706B,U+707D,U+7406,U+751F,U+7528,U+7532-7533,U+7537,U+75C5,U+7678,U+767D,U+76F8,U+7834,U+784F,U+795E,U+797F,U+7981,U+798F,U+79CB,U+7A76,U+7A7A,U+7ACB,U+7BC0,U+7D05,U+7D2B,U+7D76,U+7DE3,U+7F8A,U+80A9,U+80CE,U+812B,U+81F3,U+8276,U+82B1,U+82F1,U+83EF,U+84CB,U+864E,U+8870,U+8CA1,U+8CB4,U+8EAB,U+8F3F,U+8F9B,U+8FB0,U+900F,U+901A,U+904B,U+9149,U+91D1,U+92B3,U+9577,U+9580,U+9591,U+9670,U+967D,U+97D3,U+98DF,U+990A,U+99AC,U+9A5B,U+9B3C,U+9B41,U+9F8D}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-patch.woff2') format('woff2');unicode-range:U+715E,U+7F61}@font-face{font-family:'KMudang Brush';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kmb-latin.woff2') format('woff2');unicode-range:U+20-7E,U+A2-A3,U+A5,U+A7,U+A9,U+B0-B1,U+B6,U+D7,U+F7}
/* 포스트 제목과 일주 부제 — 가장 크게 보이는 자리 */
.post-title{font-family:'KMudang Brush','Noto Serif KR',serif;font-size:clamp(1.68rem,4.5vw,2.45rem);letter-spacing:.01em}
.post-title .post-tagline{font-family:'KMudang Brush','Noto Serif KR',serif}
/* 날짜·카테고리 줄은 정보라 기존 서체 유지 */
.post-title .subtitle{font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
font-size:.62em;letter-spacing:0}
/* 명식표 여덟 글자 — 한자라 붓글씨가 가장 어울리는 자리 */
.saju-table .stem,.saju-table .branch{font-family:'KMudang Brush','Noto Serif KR',serif}
.saju-table .label-cell{font-family:'KMudang Brush','Noto Serif KR',serif;font-size:1rem;letter-spacing:.02em}
.saju-section h2,.sinsal-section h2,.interactions-section h2,.format-section h2,.ohaeng-bars h2{font-family:'KMudang Brush','Noto Serif KR',serif;font-size:1.2rem;letter-spacing:.04em}
/* 인덱스 섹션 제목 */
.section-title{font-family:'KMudang Brush','Noto Serif KR',serif;font-size:1.45rem}
/* 카드 우상단 오행 한자 뱃지 */
.blog-fx-el-badge{font-family:'KMudang Brush','Noto Serif KR',serif}
/* 공유 문구 「천기는 흘러야 복이 된다」 — 서예체. 폰트가 unicode-range 로
한글·한자·가나·라틴을 각각 제 서브셋으로 보내므로 언어별 글자꼴이 알아서 갈린다.
붓글씨는 자간을 벌리면 획이 끊겨 보이니 letter-spacing 을 0 으로 되돌린다. */
.share-label{font-family:'KMudang Brush','Noto Serif KR',serif;font-size:1.05rem;letter-spacing:0;color:#9a8a78}
/* :lang() 시스템 폰트 강제에서 면제 — 없으면 일본어/영어 토글에서 붓글씨가 사라진다 */
:lang(ja) .post-title,:lang(en) .post-title,
:lang(ja) .post-title .post-tagline,:lang(en) .post-title .post-tagline,
:lang(ja) .saju-table .stem,:lang(en) .saju-table .stem,
:lang(ja) .saju-table .branch,:lang(en) .saju-table .branch,
:lang(ja) .section-title,:lang(en) .section-title,
:lang(ja) .saju-table .label-cell,:lang(en) .saju-table .label-cell,
:lang(ja) .elem-tag,:lang(en) .elem-tag,
:lang(ja) .saju-section h2,:lang(ja) .sinsal-section h2,:lang(ja) .interactions-section h2,:lang(ja) .format-section h2,:lang(ja) .ohaeng-bars h2,:lang(en) .saju-section h2,:lang(en) .sinsal-section h2,:lang(en) .interactions-section h2,:lang(en) .format-section h2,:lang(en) .ohaeng-bars h2,
:lang(ja) .blog-fx-el-badge,:lang(en) .blog-fx-el-badge,
:lang(ja) .share-label,:lang(en) .share-label{font-family:'KMudang Brush','Noto Serif KR',serif}
:lang(ja) .post-title .subtitle,:lang(en) .post-title .subtitle{
font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
/* 🚨 가짜 굵게 차단. 이 폰트는 굵기가 400 하나뿐인데 .post-title 은 800 을 요구한다.
없는 굵기를 부르면 브라우저가 획을 부풀려 합성하고 흐릿하게 번진다. */
body{font-synthesis-weight:none;font-synthesis:none}
.post-title,.post-title .post-tagline,.saju-table .stem,.saju-table .branch,
.section-title,.blog-fx-el-badge,.share-label,.saju-table .label-cell,.elem-tag,.saju-section h2,.sinsal-section h2,.interactions-section h2,.format-section h2,.ohaeng-bars h2{font-weight:400!important}
/* === /KMudang Brush (blog) === */
/* === 명식표 칸·줄 정리 (2026-08-06) ===
모바일에서 열 너비가 89/85/84/76 으로 제각각이고, word-break 가 normal 이라
한국어 어절 중간에서 끊겼다("나 자신·배/우자 인연", "자녀·말/년·미래", "년주(年/柱)").
실측: 설명행 3줄 91px -> 2줄 52px, 헤더 79px -> 64px. */
.saju-table{table-layout:fixed}
.saju-table .label-cell,.saju-table .desc-cell{word-break:keep-all;overflow-wrap:break-word}
.saju-table .label-cell{font-size:.95rem;line-height:1.35}
.saju-table .desc-cell{font-size:.75rem;line-height:1.45;padding:.5rem .35rem}
/* === 인트로(용해인 첫마디 — 섹션 1 앞의 도입부)를 서예체로 (2026-08-06) ===
메인 앱이 '용해인 도입부'에 이미 KMudang Brush 를 쓴다 — 블로그도 같은 자리에 맞춘다.
⚠️ 클래스로 잡으면 안 된다. 인트로 마크업이 세대별로 8종이다(.intro-narr 16 · .intro-text 10 ·
.oracle-intro 6 · .post-intro 4 · .mudang-intro 2 · .mudang-says 1 · .post-lead 1 · 클래스 없음 124).
164개 전부가 공통으로 가진 것은 data-i18n="intro" 뿐이고, 그 바로 뒤가 main_h2/섹션1 이다.
⚠️ 14개는 인라인 style 로 font-size·font-style 이 박혀 있어 !important 가 있어야 이긴다.
나눔펜은 잉크 폭이 본문의 1.59배 좁아 같은 크기면 작아 보이므로 1.3배로 키운다.
b 는 굵기가 400 하나뿐인 폰트라 합성 굵게가 번진다 -> 획을 직접 두껍게. */
[data-i18n="intro"]{font-family:'KMudang Brush','Noto Serif KR',serif;font-size:1.3em!important;line-height:1.75!important;font-style:normal!important;word-break:keep-all}
[data-i18n="intro"] em,[data-i18n="intro"] i{font-style:normal}
[data-i18n="intro"] b,[data-i18n="intro"] strong{font-weight:400!important;-webkit-text-stroke:.4px currentColor}
:lang(ja) [data-i18n="intro"],:lang(en) [data-i18n="intro"]{font-family:'KMudang Brush','Noto Serif KR',serif}
/* 60갑자 두 칸 — 명식표 아래 · 태어난 날(일주) + 태어난 해 2027 (2026-10-17 운영자 A안 · _tools/build_post_archetype_cards.js) */
.km-arch2{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:560px;margin:16px auto 6px}
.km-arch2 .km-a2t{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(158,123,47,.3);border-radius:12px;overflow:hidden;text-decoration:none;color:#2A1E10;text-align:center;padding:0 0 10px;box-shadow:0 2px 8px rgba(80,60,20,.08)}
.km-arch2 .km-a2t:active{transform:translateY(1px)}
.km-arch2 .km-a2t-im{position:relative;display:block;aspect-ratio:16/9;background:#EFE6D6}
.km-arch2 .km-a2t-im img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;margin:0;border-radius:0;box-shadow:none}
.km-arch2 .km-a2t-k{position:absolute;left:6px;top:6px;max-width:calc(100% - 12px);padding:2px 7px;border-radius:9px;background:rgba(251,247,242,.93);font-size:10.5px;line-height:1.4;color:#5A4A33;text-align:left}
.km-arch2 .km-a2t-seal~.km-a2t-k,.km-arch2 .km-a2t-k:has(~.km-a2t-seal){max-width:calc(100% - 46px)}
.km-arch2 .km-a2t-seal{position:absolute;right:6px;top:6px;width:30px;height:30px;border-radius:5px;background:#B33A2E;color:#FBF7F2;font-size:9px;font-weight:900;line-height:1.05;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(8deg);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.km-arch2 .km-a2t-n{display:block;font-size:14px;font-weight:700;margin-top:7px;padding:0 4px;color:#2A1E10}
.km-arch2 .km-a2t-s{display:block;font-size:11.5px;color:#6B5A44;margin:3px 6px 8px;line-height:1.4;min-height:2.8em}
.km-arch2 .km-a2t-g{display:block;margin:auto 8px 0;padding:7px 2px;border-radius:40px;font-size:12px;font-weight:700;line-height:1.35;color:#fff;background:linear-gradient(135deg,#B8902A,#9E7B2F);box-shadow:0 3px 10px rgba(158,123,47,.3)}
.km-arch2 .km-a2t-g.r{background:linear-gradient(135deg,#B33A2E,#8B2E2E);box-shadow:0 3px 10px rgba(139,46,46,.28)}
:lang(ko) .km-arch2 .km-a2t-s,:lang(ko) .km-arch2 .km-a2t-n{word-break:keep-all}
.km-arch2 .km-a2t-wood{color:#004D00}.km-arch2 .km-a2t-fire{color:#B20000}.km-arch2 .km-a2t-earth{color:#6B5344}.km-arch2 .km-a2t-metal{color:#8B7500}.km-arch2 .km-a2t-water{color:#0000AA}
@media (min-width:600px){.km-arch2 .km-a2t-n{font-size:16px}.km-arch2 .km-a2t-s{font-size:12.5px}.km-arch2 .km-a2t-g{font-size:13px}.km-arch2 .km-a2t-k{font-size:11.5px}}