/*
 * 사주연 이슈게시판(유명인 사주) 스킨 — 2026-10-08
 * 토큰: modules/selfso/skins/default (앱 디자인 토큰과 같음)
 * 밝은 배경은 .syi-light 가 있는 목록/본문에서만 (글쓰기 화면은 기존 다크 그대로)
 */

/* ---------- 페이지 배경을 밝게 (사이트 기본은 body.color_scheme_dark 검정) ---------- */
body:has(.syi-light),
body:has(.syi-light) .xet-layout,
body:has(.syi-light) .layout-content,
body:has(.syi-light) .xet-container,
body:has(.syi-light) .xet-content { background:#FDFAFA !important; background-image:none !important; }

.syi {
	--bg:#FDFAFA; --surface:#FFFFFF; --lav:#F8F2FC; --pink-soft:#FFF0FA; --pink-tint:#FFF2F5;
	--fg:#1A1A1A; --sub:#4A4F55; --muted:#7D7E87; --line:#EBECF1; --line-2:#CBCDD7;
	--accent:#FF5A76; --accent-2:#FFA4B4; --accent-3:#FF96A4;
	--violet:#9A62C9;
	--r-card:20px; --r-sm:12px;
	--shadow:0 0 4px rgba(0,0,0,.08); --shadow-2:0 4px 16px rgba(26,26,26,.06);
	/* 사이트 다크 테마 변수(댓글·버튼 등 기존 부품이 씀)를 밝은 값으로 */
	--xet-theme-text-strong-color:#1A1A1A;
	--xet-theme-text-base-color:#4A4F55;
	--xet-theme-muted-color:#7D7E87;
	--xet-theme-border-color:#EBECF1;
	--xet-theme-primary-color:#FF5A76;
	--xet-theme-btn-bg:#F4F4F7;
	--xet-theme-btn-hover-bg:#F4F4F7;
	--xet-theme-btn-hover-color:#1A1A1A;
	--xet-theme-input-bg:#FFFFFF;
	--xet-theme-input-focus-bg:#FFFFFF;
	--xet-theme-input-border-color:#E3E3E8;
	color:var(--fg);
	font-family:"Pretendard","Pretendard Variable","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
	letter-spacing:-0.01em;
	-webkit-font-smoothing:antialiased;
	word-break:keep-all;
	overflow-wrap:anywhere;
}
.syi *, .syi *::before, .syi *::after { box-sizing:border-box; }
.syi a { color:inherit; text-decoration:none; }
/* 레이아웃 전역 svg 규칙(width:1rem; fill:흰색) 무력화 */
.syi svg, .syi svg * { fill:none; }
.syi svg { width:auto; height:auto; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.syi-wrap { max-width:640px; margin:0 auto; padding:16px 16px 40px; }
.board-skin.syi .board__view.syi-wrap { padding:12px 16px 120px; }

/* ================= 목록 ================= */
.syi-head { position:relative; padding:22px 20px 20px; border-radius:var(--r-card); background:var(--lav); overflow:hidden; margin-bottom:14px; }
.syi-head::after { content:""; position:absolute; right:14px; top:50%; width:76px; height:76px; margin-top:-38px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23FFC4D0' stroke='%23FF96A4' stroke-width='.6'%3E%3Ccircle cx='0' cy='-6' r='5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='5'/%3E%3Ccircle cx='3.5' cy='4.9' r='5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='5'/%3E%3C/g%3E%3Ccircle r='2.4' fill='%23fff' stroke='%23FF96A4' stroke-width='.6'/%3E%3C/svg%3E") no-repeat center / contain; opacity:.95; }
.syi .syi-eyebrow { display:inline-block; margin:0 0 6px; font-size:12px; font-weight:800; color:var(--accent); letter-spacing:0; }
.syi-head-title { margin:0; font-size:23px; font-weight:800; line-height:1.3; letter-spacing:-0.03em; color:var(--fg); }
.syi-head-desc { margin:6px 0 0; font-size:13.5px; font-weight:600; color:var(--violet); position:relative; z-index:1; }
.syi-head-cog { position:absolute; right:12px; top:12px; z-index:2; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:var(--muted); }
.syi-head-cog svg { width:18px; height:18px; }

.syi-cats { display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; }
.syi-cats::-webkit-scrollbar { display:none; }
.syi-cats a { flex-shrink:0; height:34px; padding:0 14px; display:inline-flex; align-items:center; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--sub); font-size:13.5px; font-weight:700; }
.syi-cats a.on { background:var(--pink-tint); border-color:var(--pink-tint); color:var(--accent); }

.syi-search { display:flex; align-items:center; gap:6px; height:46px; padding:0 6px 0 4px; margin-bottom:10px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.syi-search select { flex-shrink:0; height:34px; max-width:96px; padding:0 6px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:600; }
.syi-search input[type=search] { flex:1; min-width:0; height:40px; border:0 !important; background:transparent !important; color:var(--fg); font:inherit; font-size:15px; outline:0; padding:0 4px; box-shadow:none !important; }
.syi-search input::placeholder { color:#A9AAB2; }
.syi-search button, .syi-search-x { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; }
.syi-search button svg { width:19px; height:19px; stroke-width:2.2; }
.syi-search-x { background:transparent; color:var(--muted); font-size:20px; }

.syi-count { margin:4px 2px 10px; font-size:13px; color:var(--muted); }
.syi-count b { color:var(--fg); font-weight:800; }

.syi-notices { list-style:none; margin:0 0 10px; padding:4px 16px; border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.syi-notices li { display:flex; align-items:center; gap:8px; padding:11px 0; font-size:14px; font-weight:700; }
.syi-notices li + li { border-top:1px solid var(--line); }
.syi-notices a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.syi-chip { flex-shrink:0; padding:2px 8px; border-radius:999px; background:var(--pink-tint); color:var(--accent); font-size:11px; font-weight:800; }

.syi-cards { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.syi-card { position:relative; }
.syi-card-link { display:grid; grid-template-columns:112px 1fr; gap:14px; align-items:start; padding:12px; border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease; }
.syi-card-link:active { transform:scale(.99); filter:none; }
@media (hover:hover) { .syi-card-link:hover { box-shadow:var(--shadow), var(--shadow-2); } }
.syi-thumb { position:relative; display:block; width:100%; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--pink-soft); }
.syi-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.syi-thumb-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#FFF0FA,#F8F2FC); color:var(--accent-2); }
.syi .syi-thumb-ph svg path { fill:#FFD3DC; }
.syi-thumb-ph svg { width:34%; height:auto; stroke:var(--accent-2); stroke-width:1.2; }
.syi-new { position:absolute; left:6px; top:6px; padding:2px 6px; border-radius:6px; background:var(--accent); color:#fff; font-size:9.5px; font-weight:900; letter-spacing:.02em; }
.syi-card-body { min-width:0; display:flex; flex-direction:column; gap:4px; padding-top:1px; }
.syi-card-title { font-size:15.5px; font-weight:800; line-height:1.38; color:var(--fg); letter-spacing:-0.02em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.syi-card-sum { font-size:13px; line-height:1.5; color:var(--sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.syi-card-meta { display:flex; align-items:center; gap:8px; margin-top:2px; font-size:12px; color:var(--muted); }
.syi-cmt { color:var(--accent-3); font-weight:700; }
.syi-cart { position:absolute; right:10px; bottom:10px; }

.syi-empty { padding:40px 10px; text-align:center; color:var(--muted); font-size:14px; }

.syi-paging { display:flex; justify-content:center; align-items:center; gap:6px; margin:22px 0 6px; }
.syi-paging a, .syi-paging strong { min-width:36px; height:36px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; font-size:14px; font-weight:700; color:var(--sub); background:#fff; border:1px solid var(--line); }
.syi-paging strong.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.syi-paging .syi-pg-arrow { font-size:20px; font-weight:500; color:var(--muted); }

.syi-admin { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding:10px 14px; border-radius:14px; background:#fff; border:1px dashed var(--line-2); font-size:13px; color:var(--muted); }
.syi-admin a { color:var(--accent); font-weight:700; }
.syi-write { position:fixed; right:20px; bottom:84px; z-index:40; height:48px; padding:0 18px; display:inline-flex; align-items:center; border-radius:999px; background:var(--accent); color:#fff !important; font-size:15px; font-weight:800; box-shadow:0 6px 16px rgba(255,90,118,.3); }

/* ================= 본문 ================= */
.syi-crumb { display:flex; align-items:center; gap:6px; margin:2px 2px 10px; font-size:12.5px; color:var(--muted); }
.syi-crumb a:last-child { color:var(--sub); font-weight:700; }

.board-skin.syi .board__view article.syi-article { margin:0 0 16px; border-bottom:0; padding:22px 18px 26px; border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow); }
.syi-article-head { padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.syi-title { margin:2px 0 12px; font-size:24px; font-weight:800; line-height:1.36; letter-spacing:-0.035em; color:var(--fg); }
.syi-byline { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12.5px; color:var(--muted); }
.syi-by { display:inline-flex; align-items:center; gap:6px; color:var(--sub); font-weight:700; }
.syi-by img { width:22px; height:22px; border-radius:7px; object-fit:cover; }
.syi-byline > * + *::before { content:""; display:inline-block; width:2px; height:2px; margin-right:10px; vertical-align:middle; border-radius:50%; background:var(--line-2); }
.syi-admin-bar { display:flex; gap:6px; margin-top:12px; }
.syi-admin-bar a { height:30px; padding:0 12px; display:inline-flex; align-items:center; border-radius:8px; background:#F4F4F7; color:var(--sub); font-size:12.5px; font-weight:700; }

/* ----- 본문 타이포 (HTMLFilter 가 class 를 지우므로 태그 기준) ----- */
.syi .syi-content .rhymix_content,
.syi .syi-content .xe_content,
.board-skin.syi .board__view article .rhymix_content { color:#2A2C30; font-size:16.5px; line-height:1.75; letter-spacing:-0.012em; word-break:keep-all; overflow-wrap:anywhere; }
.syi-content > :first-child > :first-child { margin-top:0; }
.syi-content p { margin:0 0 1.05em; }
.syi-content p:empty { display:none; }
.syi-content strong, .syi-content b { font-weight:800; color:var(--fg); }
.syi-content em { font-style:normal; color:var(--accent); font-weight:700; }
.syi-content a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.syi-content h2 { position:relative; margin:2.1em 0 .8em; padding-left:14px; font-size:20px; font-weight:800; line-height:1.4; letter-spacing:-0.03em; color:var(--fg); }
.syi-content h2::before { content:""; position:absolute; left:0; top:.22em; bottom:.22em; width:5px; border-radius:3px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); }
.syi-content h3 { margin:1.7em 0 .6em; font-size:17.5px; font-weight:800; line-height:1.45; color:var(--fg); letter-spacing:-0.02em; }
.syi-content h3::before { content:"#"; margin-right:6px; color:var(--accent-2); font-weight:900; }
.syi-content h4 { margin:1.4em 0 .5em; font-size:16px; font-weight:800; color:var(--sub); }
.syi-content ul, .syi-content ol { margin:0 0 1.1em; padding-left:1.25em; }
.syi-content li { margin:.3em 0; padding-left:.15em; }
.syi-content ul li::marker { color:var(--accent-2); }
.syi-content ol li::marker { color:var(--accent); font-weight:800; }

.syi-content img { max-width:100%; height:auto !important; border-radius:16px; display:block; margin:0 auto; }
.syi-content p > img { margin:1.3em auto; }
.syi-content figure { margin:1.5em 0; }
.syi-content figure img { width:100%; margin:0; }
.syi-content figcaption { margin-top:8px; font-size:12px; line-height:1.5; color:var(--muted); text-align:center; }

/* 표 (만세력·오행 표: 칸 안 inline 배경색은 그대로 살림) */
.syi-content table { width:100%; margin:1.3em 0; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14.5px; line-height:1.45; text-align:center; background:#fff; table-layout:fixed; }
.syi-content caption { caption-side:bottom; padding-top:8px; font-size:12px; color:var(--muted); }
.syi-content th, .syi-content td { padding:10px 6px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; word-break:keep-all; }
.syi-content tr > :last-child { border-right:0; }
.syi-content tbody tr:last-child > *, .syi-content table > tr:last-child > * { border-bottom:0; }
.syi-content thead th, .syi-content th { background:#F7F7FA; color:var(--sub); font-size:13px; font-weight:800; }
.syi-content td { color:var(--fg); }
.syi-content td strong, .syi-content td b, .syi-content th strong { font-size:1.15em; color:inherit; }

/* 요약·면책 박스 */
.syi-content blockquote { margin:1.4em 0; padding:14px 16px 14px 18px; border:0; border-left:4px solid var(--accent-2); border-radius:0 14px 14px 0; background:var(--pink-soft); color:var(--sub); font-size:15px; line-height:1.7; quotes:none; }
.syi-content blockquote p { margin:0 0 .5em; }
.syi-content blockquote > :last-child, .syi-content blockquote p:last-child { margin-bottom:0; }
.syi-content blockquote strong { color:var(--accent); }
/* 마지막 blockquote = 면책 문구 (작은 회색 한 줄) */
/* (본문 뒤쪽에 h2·p·표 등 내용이 더 없는 blockquote) */
.syi-content .rhymix_content > blockquote:last-child,
.syi-content .rhymix_content > blockquote:not(:has(~ h2, ~ h3, ~ p, ~ table, ~ figure, ~ details, ~ ul, ~ ol, ~ blockquote)) { margin-top:2em; padding:12px 14px; border-left:0; border-radius:12px; background:#F7F7FA; color:var(--muted); font-size:12.5px; line-height:1.6; }
.syi-content .rhymix_content > blockquote:last-child strong,
.syi-content .rhymix_content > blockquote:not(:has(~ h2, ~ h3, ~ p, ~ table, ~ figure, ~ details, ~ ul, ~ ol, ~ blockquote)) strong { color:var(--sub); }

/* FAQ 아코디언 */
.syi-content details { margin:0 0 8px; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; }
.syi-content details[open] { border-color:#FFD3DC; background:#FFFBFC; }
.syi-content summary { position:relative; list-style:none; cursor:pointer; padding:14px 42px 14px 16px; font-size:15.5px; font-weight:800; line-height:1.45; color:var(--fg); }
.syi-content summary::-webkit-details-marker { display:none; }
.syi-content summary::before { content:"Q"; margin-right:8px; color:var(--accent); font-weight:900; }
.syi-content summary::after { content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; }
.syi-content details[open] summary::after { transform:rotate(-135deg); margin-top:-2px; border-color:var(--accent); }
.syi-content details > :not(summary) { margin:0; padding:0 16px 14px 16px; font-size:15px; color:var(--sub); }
.syi-content details > p + p { padding-top:0; }

.syi-content hr { height:0; margin:2em auto; border:0; border-top:1px dashed var(--line-2); }
.syi-content hr::after { content:""; }

/* ----- 섹션 공통 ----- */
.syi-sec-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.syi-sec-title { margin:0 0 12px; font-size:18px; font-weight:800; letter-spacing:-0.03em; color:var(--fg); }
.syi-sec-row .syi-sec-title { margin:0; }
.syi-more { font-size:13px; font-weight:700; color:var(--muted); }

/* ----- 사주연에서 더 보기 ----- */
.syi-cta { margin:24px 0 8px; }
.syi-cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.syi-cta-card { position:relative; display:flex; flex-direction:column; gap:4px; min-height:132px; padding:16px 14px 14px; border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow); color:var(--fg); }
.syi-cta-card strong { font-size:15.5px; font-weight:800; line-height:1.32; letter-spacing:-0.03em; }
.syi-cta-card > span:not(.syi-ic) { font-size:12.5px; line-height:1.45; color:var(--muted); }
.syi-ic { width:38px; height:38px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--pink-tint); color:var(--accent); }
.syi-ic svg { width:22px; height:22px; stroke-width:1.9; }
.syi-cta-card.is-main { background:linear-gradient(150deg,#FF6F87 0%,#FF5A76 55%,#FF8FA3 100%); color:#fff; box-shadow:0 6px 18px rgba(255,90,118,.28); }
.syi-cta-card.is-main > span:not(.syi-ic) { color:rgba(255,255,255,.9); }
.syi-cta-card.is-main .syi-ic { background:rgba(255,255,255,.22); color:#fff; }
.syi .syi-cta-card.is-main .syi-ic svg path { fill:#fff; }
.syi-cta-card.is-main .syi-ic svg { stroke:#fff; }
.syi-cta-card.is-app { grid-column:1 / -1; flex-direction:row; align-items:center; gap:12px; min-height:0; padding:14px 16px; background:var(--lav); box-shadow:none; border:1px solid #E1C5F3; }
.syi-cta-card.is-app .syi-ic { margin:0; background:#fff; color:var(--violet); flex-shrink:0; }
.syi-cta-card.is-app > .syi-app-txt { color:var(--fg); font-size:inherit; }
.syi-app-txt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.syi-app-txt span { font-size:12.5px; color:var(--violet); font-weight:600; }
.syi-app-go { font-size:22px; color:var(--violet); line-height:1; }
.syi-cta-card:active { transform:scale(.98); filter:none; }

/* ----- 공유 ----- */
.board-skin.syi .board__view .shareon { margin:18px 0 6px; }

/* ----- 하단 고정 툴바 (좋아요·저장·조회·댓글 + 댓글 입력) ----- */
.board-skin.syi .board__view .toolbar { background:#fff; box-shadow:0 -1px 4px rgba(0,0,0,.05), 0 -6px 20px rgba(26,26,26,.05); border-top:1px solid var(--line); max-width:640px; margin:0 auto; }
.board-skin.syi .board__view .toolbar > div:not(.comment-editor) a,
.board-skin.syi .board__view .toolbar > div:not(.comment-editor) button { color:var(--sub); font-size:13.5px; font-weight:700; }
.board-skin.syi .board__view .toolbar > div:not(.comment-editor) i { font-size:19px; }
.board-skin.syi .board__view .toolbar button.active,
.board-skin.syi .board__view .toolbar button.vi-article-vote-active { color:var(--accent) !important; }
.board-skin.syi .board__view .comment-editor .xet-form .text-editor textarea { background:#F7F7FA; border:1px solid var(--line); color:var(--fg); }
.board-skin.syi .board__view .comment-editor .xet-form .text-editor button[type=submit] { background:var(--accent); color:#fff; }

/* ----- 댓글 ----- */
.syi-comments { margin:20px 0 0; padding:18px 16px; border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow); }
.board-skin.syi .board__view .comment-title { font-size:17px; margin-bottom:12px; }
.board-skin.syi .board__view .comment-title > span { color:var(--accent); font-weight:800; }
.syi-comments .text-center { color:var(--muted); font-size:14px; padding:18px 0 6px; }
.board-skin.syi .board__view .comment-list > ul li + li { border-top:1px solid var(--line); }
.board-skin.syi .board__view .comment-list .rhymix_content { color:var(--fg); font-size:15px; }
.syi-comments .pagination a { color:var(--sub); }
.syi-comments .pagination .page_on { color:var(--accent); }

/* ----- 다른 유명인 사주 ----- */
.syi-related { margin:26px 0 0; }
.syi-rel-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px 8px; }
.syi-rel-grid a { display:flex; flex-direction:column; gap:6px; }
.syi-rel-grid .syi-thumb { aspect-ratio:1/1; border-radius:14px; box-shadow:var(--shadow); }
.syi-rel-grid strong { font-size:13px; font-weight:800; line-height:1.4; color:var(--fg); letter-spacing:-0.02em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.syi-rel-grid time { font-size:11.5px; color:var(--muted); }

@media (min-width:600px) {
	.syi-card-link { grid-template-columns:150px 1fr; padding:14px; }
	.syi-card-title { font-size:16.5px; }
	.syi-cta-grid { grid-template-columns:repeat(4,1fr); }
	.syi-title { font-size:28px; }
	.board-skin.syi .board__view article.syi-article { padding:28px 28px 32px; }
}
@media (min-width:992px) {
	.board-skin.syi .board__view.syi-wrap { padding:20px 16px 130px; }
	.board-skin.syi .board__view .toolbar { width:640px; }
	.syi-write { bottom:32px; right:32px; }
}
@media (max-width:360px) {
	.syi-card-link { grid-template-columns:96px 1fr; gap:12px; }
	.syi-title { font-size:22px; }
}