/* 2026-10-12 사주팁 게시판 새 디자인 — body.sjt-new 일 때만 (sajutip_new.js 가 붙임). 예전 검정·금색 레이아웃 위에 덮는다 */
body.sjt-new {
	--xet-theme-text-strong-color: #1F1D24; --xet-theme-text-base-color: #4A4752; --xet-theme-muted-color: #8E8B96;
	--xet-theme-border-color: #ECEAF0; --xet-theme-primary-color: #FF5A76; --xet-theme-color: #FF5A76;
	--xet-theme-input-bg: #FFFFFF; --xet-theme-input-focus-bg: #FFFFFF; --xet-theme-input-border-color: #ECEAF0;
	--xet-theme-btn-bg: #FFFFFF; --xet-theme-btn-hover-bg: #F6F5F8; --xet-theme-btn-hover-color: #1F1D24;
	--xet-theme-btn-submit-bg: #FF5A76; --xet-theme-btn-hover-submit-bg: #FF5A76;
	--sj-bg: #F6F5F8; --sj-ink: #1F1D24; --sj-text: #2A2830; --sj-sub: #7A7782; --sj-line: #F0EEF2;
	--sj-pink: #FF5A76; --sj-soft: #FFF1F4; --sj-soft-line: #FFD5DD;
	color: var(--sj-ink);
}
body.sjt-new, body.sjt-new .xet-layout, body.sjt-new .layout-content, body.sjt-new .xet-container, body.sjt-new .xet-content { background: var(--sj-bg) !important; background-image: none !important; }
body.sjt-new .board-skin { color: var(--sj-sub); font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
body.sjt-new .board-skin .xet-btn { background: #fff; color: var(--sj-ink); border: 1px solid var(--sj-line); box-shadow: none; }
body.sjt-new .board-skin .xet-btn i { color: var(--sj-ink); }

/* ── 목록 ── */
body.sjt-new .board__title .title { color: var(--sj-ink); font-weight: 800; }
body.sjt-new .sjt-head { margin: 4px 2px 14px; }
body.sjt-new .sjt-head b { display: block; font-size: 22px; font-weight: 800; color: var(--sj-ink); letter-spacing: -.01em; }
body.sjt-new .sjt-head span { font-size: 13px; color: var(--sj-sub); }
body.sjt-new .search-form { background: #fff; border: 1px solid #ECEAF0; border-radius: 999px; overflow: hidden; }
body.sjt-new .search-form select, body.sjt-new .search-form input { background: transparent !important; color: var(--sj-ink) !important; border: 0 !important; }
body.sjt-new .search-form input::placeholder { color: #A3A0AC; }
body.sjt-new .search-form select { border-right: 1px solid var(--sj-line) !important; }
body.sjt-new .sajutip-style ul { gap: 12px !important; }
body.sjt-new .sajutip-style li { background: #fff; border: 1px solid var(--sj-line); border-radius: 18px; overflow: hidden; }
body.sjt-new .sajutip-style .thumbnail, body.sjt-new .sajutip-style .thumbnail img { border-radius: 0 !important; display: block; }
body.sjt-new .sajutip-style .title { padding: 10px 12px 12px; }
body.sjt-new .sajutip-style .title .subject { color: var(--sj-ink) !important; font-size: 14px; font-weight: 700; line-height: 1.45; }
body.sjt-new .pagination a, body.sjt-new .pagination span, body.sjt-new .pagination strong { color: var(--sj-sub); }
body.sjt-new .pagination .active, body.sjt-new .pagination strong, body.sjt-new .pagination .is-active { color: #fff !important; background: var(--sj-pink) !important; border-radius: 999px; }

/* 목록 맨 위 '내 일주 글만 보기' */
body.sjt-new .sjt-mine { display: flex; align-items: center; gap: 10px; background: var(--sj-soft); border: 1px solid var(--sj-soft-line); border-radius: 18px; padding: 12px 14px; margin: 14px 0; }
body.sjt-new .sjt-mine .tx { flex: 1; min-width: 0; }
body.sjt-new .sjt-mine b { display: block; font-size: 14.5px; color: var(--sj-ink); }
body.sjt-new .sjt-mine small { display: block; font-size: 12px; color: var(--sj-sub); }
body.sjt-new .sjt-mine form { display: flex; gap: 6px; margin-top: 8px; }
body.sjt-new .sjt-mine input { flex: 1; min-width: 0; height: 40px; border: 1px solid #F0D3DA; border-radius: 12px; padding: 0 12px; font: inherit; font-size: 14px; background: #fff; color: var(--sj-ink); }
body.sjt-new .sjt-mine button { flex: none; height: 40px; border: 0; border-radius: 12px; padding: 0 16px; background: var(--sj-pink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
body.sjt-new .sjt-mine .err { color: #D9304E; font-size: 12px; margin: 4px 0 0; }

/* ── 글 화면 ── */
body.sjt-new .board__view > article { background: #fff; border: 1px solid var(--sj-line); border-radius: 22px; padding: 18px 16px 20px; margin-top: 8px; }
body.sjt-new .board__view .board__title { margin-bottom: 6px; }
body.sjt-new .board__view .subject { color: var(--sj-ink); font-size: 21px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; }
body.sjt-new .sjt-cat { display: inline-block; background: var(--sj-soft); color: #E0405E; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; margin: 4px 0 8px; }
body.sjt-new .board__view .profile { color: var(--sj-sub); border-bottom: 1px solid #F3F1F5; padding-bottom: 12px; margin-bottom: 16px; }
body.sjt-new .board__view .profile a { color: var(--sj-ink); }
body.sjt-new .board__view .xe_content { color: var(--sj-text) !important; }
body.sjt-new .board__view .xe_content img { border-radius: 14px; }
/* 예전 어두운 바탕에 맞춰 흰 글씨로 적은 줄은 진한 글씨로 */
body.sjt-new .board__view .xe_content [style*="color: rgb(255, 255, 255)"], body.sjt-new .board__view .xe_content [style*="color:#fff"], body.sjt-new .board__view .xe_content [style*="color: #fff"], body.sjt-new .board__view .xe_content [style*="color:#FFF"], body.sjt-new .board__view .xe_content [style*="color: #FFF"], body.sjt-new .board__view .xe_content font[color="#ffffff"] { color: var(--sj-text) !important; }
body.sjt-new .board__view .toolbar { background: #fff !important; border-top: 1px solid var(--sj-line); box-shadow: 0 -4px 16px rgba(30, 20, 40, .05); }
body.sjt-new .board__view .toolbar button, body.sjt-new .board__view .toolbar a, body.sjt-new .board__view .toolbar i, body.sjt-new .board__view .toolbar span { color: #3A3842 !important; }
body.sjt-new .board__view .comment-title strong { color: var(--sj-ink); }
body.sjt-new .board__view .comment-title, body.sjt-new .board__view .comment-list { color: var(--sj-sub); }
body.sjt-new .layout-footer, body.sjt-new .layout-footer * { color: #8E8B96 !important; }

/* ── 가입 카드 공통 ── */
.sjt-card { background: var(--sj-soft); border: 1px solid var(--sj-soft-line); border-radius: 18px; padding: 16px 14px; margin: 22px 0; text-align: left; color: var(--sj-ink); font-size: 14px; line-height: 1.5; }
.sjt-card * { box-sizing: border-box; }
.sjt-card .q { font-weight: 800; font-size: 16px; line-height: 1.4; color: var(--sj-ink); }
.sjt-card .q small { display: block; font-weight: 500; color: var(--sj-sub); font-size: 12.5px; margin-top: 2px; }
.sjt-card .row { display: flex; gap: 6px; margin-top: 10px; }
.sjt-card input { flex: 1; min-width: 0; height: 44px; border: 1px solid #F0D3DA; border-radius: 12px; padding: 0 12px; font: inherit; font-size: 15px; background: #fff; color: var(--sj-ink); }
.sjt-card .sx { display: flex; border: 1px solid #F0D3DA; border-radius: 12px; overflow: hidden; flex: none; background: #fff; }
.sjt-card .sx button { border: 0; background: #fff; font: inherit; font-size: 14px; padding: 0 13px; color: var(--sj-sub); cursor: pointer; }
.sjt-card .sx button.on { background: var(--sj-ink); color: #fff; }
.sjt-card .go, .sjt-card .cta { display: block; width: 100%; border: 0; border-radius: 14px; background: var(--sj-pink); color: #fff !important; font: inherit; font-weight: 700; font-size: 15.5px; padding: 13px; margin-top: 10px; cursor: pointer; text-align: center; text-decoration: none !important; }
.sjt-card .go:disabled { background: #F7B3C0; cursor: default; }
.sjt-card .cta small { display: block; font-weight: 500; font-size: 12px; opacity: .92; }
.sjt-card .err { color: #D9304E; font-size: 12.5px; margin: 6px 0 0; min-height: 1em; }
.sjt-card .again { display: block; margin: 8px auto 0; background: none; border: 0; color: var(--sj-sub); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.sjt-card .res { text-align: center; }
.sjt-card .pair { display: flex; justify-content: center; align-items: center; gap: 14px; }
.sjt-card .pair div { display: flex; flex-direction: column; align-items: center; font-size: 12.5px; font-weight: 700; gap: 3px; }
.sjt-card .pair img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 50% !important; }
.sjt-card .pair .x { color: var(--sj-pink); font-weight: 800; font-size: 17px; }
.sjt-card .sc { font-size: 36px; font-weight: 900; color: var(--sj-pink); line-height: 1.1; margin-top: 8px; }
.sjt-card .lb { display: inline-block; background: #fff; color: #D9304E; font-size: 12.5px; font-weight: 700; padding: 2px 11px; border-radius: 999px; margin-top: 4px; }
.sjt-card .blur { position: relative; margin-top: 12px; text-align: left; font-size: 13.5px; line-height: 1.7; color: #3A3842; background: #fff; border-radius: 12px; padding: 11px 13px; }
.sjt-card .blur p { margin: 0 0 4px; }
.sjt-card .blur .hid { filter: blur(4px); user-select: none; }
.sjt-card .lock { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; }
.sjt-card .lock span { background: #fff; border: 1px solid #F0D3DA; color: #D9304E; font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 5px 12px; box-shadow: 0 4px 12px rgba(255, 90, 118, .15); }
/* 글 끝 회원 카드(홈 셀프소개 카드와 같은 결) */
.sjt-card h4 { margin: 0 2px; font-size: 16px; line-height: 1.4; font-weight: 800; color: var(--sj-ink); }
.sjt-card .s { color: var(--sj-sub); font-size: 12.5px; margin: 3px 2px 10px; }
.sjt-card .tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.sjt-card .tabs button { flex: 1; border: 1px solid #F0D3DA; background: #fff; border-radius: 12px; padding: 8px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--sj-sub); cursor: pointer; }
.sjt-card .tabs button.on { background: #FFE3E8; border-color: #FFE3E8; color: #E0405E; }
.sjt-card .mem { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border-radius: 16px; margin-bottom: 8px; color: inherit !important; text-decoration: none !important; }
.sjt-card .mem img { width: 52px; height: 52px; flex: none; object-fit: contain; border-radius: 0 !important; }
.sjt-card .mem .t { min-width: 0; flex: 1; }
.sjt-card .mem .t b { font-size: 14.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 800; color: var(--sj-ink); }
.sjt-card .mem .t b em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
/* 2026-10-20 구간 색 = 대표 기준(앱 10:10): hi(90+) 천생연분 #FF5A76 · md(70) 찰떡 궁합 #C8962D · lo(60 이하) 보통·아쉬운 #7D7E87 */
.sjt-card .mem .t b em.hi { background: #FFF1F4; color: #FF5A76; }
.sjt-card .mem .t b em.md { background: #FDF7E7; color: #C8962D; }
.sjt-card .mem .t b em.lo { background: #F2F3F4; color: #7D7E87; }
.sjt-card .mem .t p { margin: 1px 0 0; font-size: 12.5px; color: var(--sj-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sjt-card .mem .t p.m { color: #3A3842; }
.sjt-card .empty { font-size: 13px; color: var(--sj-sub); text-align: center; padding: 10px 0; }
/* 하단 고정 */
.sjt-stick { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: 456px; margin: 0 auto; background: var(--sj-pink); color: #fff !important; border-radius: 16px; padding: 11px 40px 11px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 22px rgba(255, 90, 118, .35); font-weight: 700; font-size: 14.5px; z-index: 90; text-decoration: none !important; transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.sjt-stick.on { transform: none; opacity: 1; pointer-events: auto; }
.sjt-stick img { width: 34px; height: 34px; background: #fff; border-radius: 50% !important; object-fit: contain; flex: none; }
.sjt-stick small { display: block; font-weight: 500; font-size: 12px; opacity: .92; }
.sjt-stick .x { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .18); color: #fff; font-size: 12px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sjt-stick { transition: none; } }
body.sjt-new .board__title .xet-btn, body.sjt-new .board__title .xet-btn.back { background: #fff !important; border: 1px solid var(--sj-line) !important; color: var(--sj-ink) !important; }
body.sjt-new .board__title .xet-btn i { color: var(--sj-ink) !important; }

/* ── 2026-10-12 글 중간 궁합: 입력 = 궁합보기(/gunghab) 입력 칸, 결과 = 궁합보기 결과 화면(chemistry.html #cmp-app)과 같은 모양 ── */
.sjt-gh { margin: 24px 0; text-align: left; color: #1A1A1A; font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.sjt-gh * { box-sizing: border-box; }
.sjt-gh .gh-q { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: #1A1A1A; text-align: left; }
.sjt-gh .gh-box { background: #fff; border: 1px solid #ECECEC; border-radius: 20px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.sjt-gh .person-head { margin-bottom: 18px; }
.sjt-gh .gpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sjt-gh .gp { height: 46px; padding: 0; border: 1px solid #E3E3E8; border-radius: 10px; background: #fff; font: inherit; cursor: pointer; }
.sjt-gh .gp .gl { font-size: 15px; font-weight: 600; color: #7D7E87; }
.sjt-gh .gp[aria-pressed="true"] { background: #FFF2F5; border-color: #FFF2F5; }
.sjt-gh .gp[aria-pressed="true"] .gl { color: #FF5A76; font-weight: 800; }
.sjt-gh .bt-row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 8px; align-items: end; }
.sjt-gh .bt-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sjt-gh .bt-l { font-size: 12.5px; font-weight: 600; color: #7D7E87; margin: 0; }
.sjt-gh .bt-f input { width: 100%; min-width: 0; height: 48px; border: 1px solid #E3E3E8; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; background: #fff; color: #1A1A1A; -webkit-text-fill-color: #1A1A1A; caret-color: #FF5A76; box-shadow: none; outline: none; }
.sjt-gh .bt-f input::placeholder { color: #B4B4BA; -webkit-text-fill-color: #B4B4BA; }
.sjt-gh .bt-f input:disabled { background: #F7F7F9; color: #7D7E87; -webkit-text-fill-color: #7D7E87; }
.sjt-gh .bt-f input:focus { border-color: #FFA4B4; }
.sjt-gh .bt-unk { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; border: 1px solid #E3E3E8; border-radius: 10px; background: #fff; font-size: 13.5px; color: #4A4F55; cursor: pointer; white-space: nowrap; margin: 0; }
.sjt-gh .bt-unk:has(input:checked) { border-color: #FFF2F5; background: #FFF2F5; color: #FF5A76; font-weight: 700; }
.sjt-gh .bt-unk input { width: 18px; height: 18px; margin: 0; accent-color: #FF5A76; }
.sjt-gh .err { color: #D9304E; font-size: 12.5px; margin: 8px 0 0; min-height: 1em; text-align: left; }
.sjt-gh .gh-go { display: block; width: 100%; height: 52px; margin-top: 12px; border: 0; border-radius: 16px; background: #FF5A76; color: #fff !important; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.sjt-gh .gh-go:disabled { opacity: .7; cursor: default; }
/* 결과 */
.sjt-cmp { background: #fff; border: 1px solid #ECECEC; border-radius: 20px; padding: 20px 16px 8px; }
.sjt-cmp .cmp-pair { display: flex; }
.sjt-cmp .cmp-p { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sjt-cmp .cmp-p img { width: 100%; max-width: 150px; height: 130px; object-fit: contain; display: block; border-radius: 0 !important; }
.sjt-cmp .cmp-p b { font-size: 16px; font-weight: 500; letter-spacing: -0.32px; color: #1A1A1A; }
.sjt-cmp .cmp-score { margin-top: 24px; padding: 15px 21px; border-radius: 10px; background: #FDF2F5; display: flex; flex-direction: column; gap: 11px; }
.sjt-cmp .cmp-top { display: flex; justify-content: space-between; align-items: flex-end; }
.sjt-cmp .cmp-top span { font-size: 16px; font-weight: 500; color: #1A1A1A; }
.sjt-cmp .cmp-top b { font-size: 36px; font-weight: 600; line-height: 1; color: #FF5A76; }
.sjt-cmp .cmp-top b i { font-style: normal; font-size: 27px; font-weight: 500; }
.sjt-cmp .hbar { --hw: 19.5px; --th: 9px; position: relative; display: block; width: 100%; height: 18.5px; }
.sjt-cmp .hbar-t { position: absolute; left: 0; right: 0; top: 50%; height: var(--th); transform: translateY(-50%); border-radius: 10px; background: #FEBDD0; overflow: hidden; }
.sjt-cmp .hbar-f { display: block; height: 100%; background: #FF5A76; }
.sjt-cmp .hbar-h { position: absolute; top: 0; width: var(--hw); height: 100%; transform: translateX(-50%); }
.sjt-cmp .hbar-h svg { display: block; width: 100%; height: 100%; }
.sjt-cmp .cmp-text { margin-top: 24px; padding: 20px 16px; border: 1px solid #EBECF1; border-radius: 16px; display: flex; flex-direction: column; gap: 20px; }
.sjt-cmp .cmp-text h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; color: #1A1A1A; }
.sjt-cmp .cmp-text p { margin: 0; font-size: 14px; line-height: 1.55; letter-spacing: -0.28px; color: #4A4F55 !important; white-space: pre-line; word-break: keep-all; text-align: left; }
.sjt-cmp .cmp-text.clamp p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sjt-cmp .cmp-text.clamp2 p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sjt-cmp .cmp-none { padding: 24px 16px; text-align: center; font-size: 14px; line-height: 1.5; color: #4A4F55; }
.sjt-cmp .cmp-err { margin-top: 24px; padding: 22px 16px; border-radius: 10px; background: #FDF2F5; text-align: center; font-weight: 700; color: #FF5A76; }
.sjt-cmp .cmp-foot { padding: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.sjt-cmp .cmp-btn { width: 100%; height: 50px; border: 0; border-radius: 10px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.sjt-cmp .cmp-btn.pink { background: #FF5A76; color: #fff !important; }
.sjt-cmp .cmp-btn.gray { background: #EBECF1; color: #4A4F55 !important; }
/* 비회원 더보기 → 회원가입 안내 */
#sjt-gate { position: fixed; inset: 0; z-index: 300; background: rgba(26, 26, 26, .45); display: flex; align-items: flex-end; justify-content: center; }
#sjt-gate[hidden] { display: none; }
#sjt-gate .g-sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 24px 24px 0 0; padding: 28px 24px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
#sjt-gate img { width: 52px; height: auto; }
#sjt-gate b { font-size: 18px; font-weight: 700; color: #1A1A1A; letter-spacing: -0.36px; }
#sjt-gate p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #4A4F55; word-break: keep-all; }
#sjt-gate .g-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 0; border-radius: 10px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none !important; }
#sjt-gate .g-btn.pink { background: #FF5A76; color: #fff !important; }
#sjt-gate .g-btn.gray { background: #EBECF1; color: #4A4F55; }
.sjt-gh .gh-box { padding: 18px 14px; }
.sjt-gh .bt-f input { padding: 0 10px; font-size: 14.5px; }
.sjt-gh .bt-unk { padding: 0 10px; }
.sjt-gh .bt-row.one { grid-template-columns: 1fr; }

/* 2026-10-13 가입 안내 창: 가입 방법 버튼을 창 안에 */
#sjt-gate b b, #sjt-gate p b { font-size: inherit; color: #1A1A1A; }
#sjt-gate .g-btn.sns { gap: 8px; background: #fff; color: #1A1A1A !important; border: 1px solid #E3E3E8; }
#sjt-gate .g-btn.sns img, #sjt-gate .g-btn.sns svg { width: 20px; height: 20px; }
#sjt-gate .g-btn.sns.dark { background: #000; color: #fff !important; border-color: #000; }
/* 2026-10-13 아래 탭 아이콘: 글자색을 진하게 바꾸면 색 안 정한 도형(로테이션 머리)이 검게 보임 → 다른 화면처럼 흰색 */
body.sjt-new .sy-tabbar svg { fill: #FFFFFF; }