/* manseone — 시안 B (2026-09-18). 표·생극도·대운 기하는 T3 이식분 그대로. 강조색은 먹 하나다(일간 오행색으로 바꾸는 안은 2026-09-18 에 걷었다 — 버튼을 누르면 색이 바뀌는 게 이상하다는 피드백). 오행 색은 표의 띠·생극도·십성 열에만. 배경은 고정 일월오봉도 선묘 (public/images/obong.png — 종이톤을 미리 뺀 투명 PNG. 새 그림은 cli/ink.html 로 같은 처리). */ [hidden]{display:none!important;} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ --종이: #F3F3F0; /* 페이지 종이(고정 층이 그린다) */ --바탕: #DCDCD7; /* body, 430px 밖 */ --판: #FCFCFA; /* 카드·인풋 면 */ --먹: #1E2022; --회: #64686C; /* 2차 텍스트 */ --선: #C6C7C3; /* 테두리 */ /* 석간(T5) 이름은 별칭으로 남긴다 — 게이트 테스트와 옛 규칙이 이 이름을 읽는다. */ --거터: var(--바탕); --갱지: var(--종이); --석회: var(--회); /* 오행 — 청·적·황·백·흑의 낮은 채도판. 표의 띠·생극도·십성 열 색. UI 크롬에는 쓰지 않는다. */ --oh-wood: #3F6B48; --oh-fire: #B5432F; --oh-earth: #8C6A25; --oh-metal: #5F6670; --oh-water: #2F4F73; --radius: 10px; --r: 10px; --serif: "Noto Serif KR", serif; --sans: "Pretendard", system-ui, sans-serif; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s7:64px; --s8:80px; --pad:16px; --bg: var(--종이); --text: var(--먹); --muted: var(--회); --accent: var(--먹); --mark: var(--회); --surface: var(--판); --on-accent: #fff; --field: var(--판); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --mark-soft: color-mix(in srgb, var(--mark) 22%, transparent); --rule: color-mix(in srgb, var(--text) 12%, transparent); --track: color-mix(in srgb, var(--text) 8%, transparent); } html{font-family:var(--sans);} body{background:var(--바탕);color:var(--먹);font-family:var(--sans);font-size:16px;line-height:1.7;} /* 종이 기둥(430px 가운데)은 body 배경 자체가 그린다 — 고정 층이 어떤 이유로든 안 그려져도 종이는 남는다. 그림은 body::after 한 층뿐: fixed · 음수 z 라 페이지의 무엇보다도 뒤다(.wrap 안의 fixed 층은 합성층 승격으로 카드 위에 올라왔다 — 2026-09-18 실측). 그림 URL 은 layout.php 가 --bg-art 로 넘긴다(?v= 캐시버스팅). .page-manse 로 묶는다 — admin 페이지도 이 파일을 읽는다. */ /* 루트 배경의 100% 높이는 문서가 아니라 첫 뷰포트 기준이라(2026-09-18 실측: 아래로 스크롤하면 종이가 끊김) 세로로 반복해 깐다. */ body.page-manse{position:relative;background:linear-gradient(var(--종이),var(--종이)) top center/min(100%,430px) 64px repeat-y var(--바탕);} body.page-manse::after{ content:"";position:fixed;top:0;bottom:0;left:50%;width:min(100vw,430px);margin-left:max(-50vw,-215px);pointer-events:none; z-index:-1;background:var(--bg-art) top center/100% auto no-repeat;opacity:.3; -webkit-mask-image:linear-gradient(#000 60%,transparent 92%);mask-image:linear-gradient(#000 60%,transparent 92%); } .wrap{max-width:430px;margin-inline:auto;padding:0 var(--pad) var(--s7);} /* 카드 밖 글자의 종이색 후광 — 배경 선이 글자 밑에서 끊긴다. 카드(판)는 불투명이라 필요 없고, 진한 바탕 위 흰 글자는 번져 보여 뺀다. */ .page-manse .wrap{text-shadow:0 0 3px var(--종이),0 0 6px var(--종이),0 0 10px var(--종이);} .manse,.birth,.cta,.m-ident,.manse-x .is-day{text-shadow:none;} .brand{padding:var(--s4) 0 0;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--먹);} .hero{padding-top:var(--s6);} .hero h1{font-family:var(--sans);font-weight:800;font-size:38px;line-height:1.15;letter-spacing:-.03em;color:var(--먹);} .lede{margin-top:var(--s2);font-size:15px;line-height:1.75;color:var(--회);max-width:32ch;} footer{margin:var(--s5) calc(var(--pad) * -1) 0;padding:var(--s3) var(--pad) var(--s4);font-size:12px;line-height:1.7;color:var(--회);background:var(--판);border-top:1px solid var(--선);text-shadow:none;} .sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} button.manse-x-dwc{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:center;} .loading{margin:var(--s3) 0;font-size:14px;color:var(--muted);} /* ---- 폼 — 네이티브 input 은 남긴다(키보드·required). 라디오는 뒤따르는 이 칩을 그린다(input:checked + span — has 선택자 없이 CSS2 형제 선택자만. has 미지원 브라우저에서 라디오가 보이지 않던 문제, 2026-09-18). ---- */ .birth{margin-top:var(--s4);padding:var(--s3) var(--pad);background:var(--판);border-radius:var(--r);box-shadow:0 0 0 1px var(--선);} .birth fieldset{border:0;min-width:0;} .birth fieldset + fieldset{margin-top:var(--s3);} .birth legend{display:block;padding:0;margin-bottom:8px;font-size:12.5px;line-height:1.4;font-weight:600;color:var(--먹);} .birth label{display:inline-flex;margin:0 6px 0 0;} .birth input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;} .birth input[type=radio] + span{ display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px; border:1px solid var(--선);border-radius:var(--r);background:var(--field); font-size:14.5px;color:var(--text);cursor:pointer; } .birth input[type=radio]:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent);} .birth input[type=radio]:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;} .birth label.chk{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13.5px;color:var(--muted);cursor:pointer;} .birth input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent);} .birth select{ appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:46px;padding:0 30px 0 12px; border:1px solid var(--선);border-radius:var(--r);background-color:var(--field); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 10px center;background-size:14px; font:inherit;font-size:15px;color:var(--text); } .birth select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;} .birth .dob{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;} .birth .hm{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .birth .hm label{grid-column:1 / -1;} .cta{ display:block;width:100%;height:52px;margin-top:var(--s3); border:0;border-radius:var(--r);background:var(--accent);color:var(--on-accent); font:inherit;font-size:16px;font-weight:700;letter-spacing:.01em;cursor:pointer; } .cta:focus-visible{outline:2px solid var(--text);outline-offset:2px;} .cta:disabled{opacity:.5;cursor:default;} /* ---- 명식 카드 머리 · 풀이 본문 ---- */ .manse-birth{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3);font-size:13.5px;} .manse-birth .r{display:flex;gap:12px;} .manse-birth .k{color:var(--muted);} .reading-section + .reading-section{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);} .reading-section h2{font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.4;color:var(--text);} .reading-section p{margin-top:12px;font-size:15px;line-height:1.85;color:var(--text);} .reading-section p + p{margin-top:10px;} /* ---- 계산 근거 아래: 풀이 카드와 하단 안내문 ---- */ .sec-lower .manse{background:var(--판);border-radius:var(--r);box-shadow:0 0 0 1px var(--선);padding:var(--s3) var(--pad);} .qa summary{padding:12px 0;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition:none!important;animation:none!important;} } .sec{margin:28px 0;} .sec-head{margin-bottom:12px;} .sec-kicker{display:inline-block;font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:-.02em;} .sec-sub{display:block;font-size:13px;margin-top:7px;line-height:1.6;} .sec-krule{display:none;} .manse{padding:12px 9px 16px;} .manse-x-more{box-shadow:none;} .manse-birth .k{flex:none;width:64px;font-family:var(--serif);} .qa summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;} .qa svg{width:15px;height:15px;margin-left:auto;} /* ===================== 만세력 조회(/manse · .page-manse) — design/manse.html 정본 이식 ===================== 정본의 --cinnabar 는 이 파일의 --ju 와 같은 한 색(주사)이라 전량 --ju 로 번역했다. 정본 :root (컬러·타이포·8pt 그리드·--grain)와 .mock-band(목업 전용 비계)는 가져오지 않는다 — 앞의 것은 이미 있고 뒤의 것은 구현물이 아니다. 신규 hex 0(TokenGate). 기존 .manse-* (preview/result 공유 만세력 카드)는 한 줄도 건드리지 않는다. 확장 명식은 .manse-x-* 라는 별도 계열이고, .manse 카드 표면만 재사용한다. ⚠ .m-late 는 쓰지 않는다 — 이 파일 위쪽 `html.js .manse .m-late{opacity:0}` 가 saju.js 로드 페이지에서 요소를 조용히 지운다. 전역 폼 프리미티브(.form-card/.field/.seg/.selbox/select/.cta/.field-hint)와 섹션 프리미티브 (.sec/.sec-head/.sec-kicker/.sec-krule/.sec-sub/.sec-rule/.wrap)·.qa·.final·.colophon 은 하우스 공유라 재정의하지 않고, 이 페이지에서만 갈리는 값은 .page-manse 스코프 오버라이드로 둔다. */ /* ---- 페이지 머리 ---- */ .m-hero{padding:var(--s5) var(--pad) 0;} #manseResultHead{scroll-margin-top:12px;} .m-title{font-family:var(--sans);font-weight:800;font-size:26px;line-height:1.3;color:var(--text);letter-spacing:-.02em;} .m-title:focus:not(:focus-visible){outline:none;} .m-desc{margin-top:10px;font-size:15px;line-height:1.75;color:var(--회);} /* 윤달·시 모름 체크박스는 위 .birth label.chk 하나가 그린다(이 앱에는 다른 폼이 없어 '전역 위젯'이 따로 없다). */ /* 오류 슬롯 — BirthCalendar::dateError() 문구가 도착할 자리. ⚠ 느낌표 글리프를 쓰지 않는다(카피 규칙). 주의를 끄는 일은 주사색 세로줄이 맡는다. :empty 면 렌더되지 않으므로 평상시 레이아웃에 영향이 0이다(뷰가 공백 없이 비워 낸다). */ .f-err{ margin-top:7px;font-size:13px;color:var(--accent);line-height:1.5; padding-left:9px;border-left:2px solid var(--accent); } .f-err:empty{display:none;} /* ---- .page-manse 스코프 오버라이드(전역 프리미티브 무접촉) ---- */ /* 이 페이지의 .qa 요약은 'Q' 글리프 없이 용어뜻 꼴이라, 전역의 Q 자리 들여쓰기(padding-left:43px)와 굵은 요약(600)이 어긋난다. 들여쓰기를 접고 본문만 한 단 좁힌다. */ .page-manse .qa summary{gap:8px;font-weight:400;} .page-manse .qa .a{padding-left:var(--s2);font-size:14px;line-height:1.75;} /* 결과 하단 고정 CTA(.cta-bar, _manse-result.php) — 이 페이지엔 스크롤로 여닫는 saju.js 가 없다 (manse.js 는 gzip 예산이 빠듯해 스크롤 리스너를 더할 여유가 없다). fixed 대신 sticky 로 바꿔 같은 문제를 CSS만으로 푼다: #manseResult(결과 조각) 안에서 바닥에 붙어 있다가, 결과를 다 지나쳐 소개·해설·푸터로 넘어가면 #manseResult 자체가 스크롤에서 밀려나며 바도 함께 사라진다 — #manseResult 바로 다음이 그 소개 섹션이라 푸터를 계속 가리는 일이 없다. body. 접두사로 특이도를 올린다 — .cta-bar.show 와 같은 특이도(0,2,0)라 시트 순서에만 기대면 나중에 규칙이 재배치될 때 조용히 깨진다. */ /* .final(바로 위 형제)에 바 높이만큼 여백을 준다 — 안 주면 .final 의 CTA 버튼이 정확히 바가 들러붙는 마지막 한 화면 구간에서 바에 가려 스쳐 지나간다. 바 실측 높이(패딩 10+10·버튼 39px 안팎)보다 넉넉히 잡고 safe-area 도 더한다 — 덜 주면 그대로 재발하고, 더 주는 쪽은 소개 섹션 전 빈 여백 몇 px 뿐이라 해가 없다. */ /* 소개 산문 — 하단 색인 본문. 카드도 접힘도 없이 그냥 읽히는 글이라 프리미티브를 새로 세우지 않고 본문 색·행간만 잡는다. 소제목은 .sec-title(23px)보다 한 단 낮다 — 섹션 킥커 아래의 소제목이라 킥커를 이기면 위계가 뒤집힌다. */ .m-about{padding:0 var(--pad);font-size:14px;line-height:1.85;color:var(--먹);} .m-about h2{margin:var(--s5) 0 10px;} .m-about h2:first-child{margin-top:0;} .m-about h3:first-of-type{margin-top:var(--s3);} .m-about h3{margin:var(--s3) 0 8px;font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.5;color:var(--text);} /* ---- 일간 히어로 — 이름을 받지 않는 대신 이 명식의 식별자를 준다. ---- .m-hero 안에 좌측으로 앉는다(패딩은 hero 몫). 한때 중앙 부유 박스였으나 제목과 설명이 좌측이라 이 박스만 중앙이면 시선 축이 지그재그였다. 아래 여백도 걷었다 — 히어로와 명식 표의 분리는 .sec 의 padding-top(--s5) 하나가 맡는다(겹치면 유령 공백). */ .m-ident{ margin:var(--s3) 0 0;padding:var(--s2) var(--s3); border-radius:var(--r);background:var(--accent);color:var(--on-accent); display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px; } .m-ident b{font-family:var(--serif);font-size:48px;color:var(--on-accent);font-weight:400;line-height:1;} .m-ident span{font-size:15px;font-weight:600;} .m-ident i{font-style:normal;color:var(--on-accent);opacity:.85;} .m-ident s{text-decoration:none;color:var(--on-accent);opacity:.5;} /* ---- 읽는 순서 — 해석이 아니라 목차다. 개별 값에 대한 판단을 한 글자도 쓰지 않는다. 라벨(i)은 명식 카드의 '태어난 때'(.manse-birth .k)와 같은 토큰(--f-display·--ash)으로 세운다(크기·자간 값은 각자의 자리에 맞고 서로 다르다). 설명 문장은 두지 않는다. ---- */ .m-order{margin:14px 0 0;font-size:11.5px;color:var(--muted);line-height:1.7;} .m-order i{font-style:normal;font-family:var(--serif);font-size:10.5px;letter-spacing:.06em;margin-right:10px;} .m-order b{color:var(--먹);font-weight:400;} .m-order i{font-family:var(--sans);} .m-order span{color:var(--선);padding:0 5px;} /* ===== 확장 명식 표 — preview/result 의 4주 카드는 열마다 세로 flex 스택이라 행이 서로 맞지 않는다. 확장 명식은 행이 열(궁성·천간십성·천간·지지·지지십성·지장간·12운성·납음·12신살·길신)로 늘어 '가로로 읽는 표'가 되므로 진짜 (table-layout:fixed)로 짠다. · 행 정렬·열 등폭·스크린리더 행/열 헤더가 전부 공짜로 따라온다. · 모바일에서도 4열을 유지하고 행만 아래로 늘어난다. 밀도를 견디는 장치는 셋이다. 1) 행 이름을 왼쪽 여백(좌단 게터)으로 밀어낸다 — 데이터가 주인공, 라벨은 방주(傍註). 2) 행을 다섯 묶음(궁성·천간군·지지군·파생군·신살군)으로 나눠 로 끊는다. 행마다 줄을 긋지 않는다. 3) 셀마다 큰 글자는 하나뿐이다. 간지 한자만 크고 나머지는 전부 작고 조용하다. ===== */ /* border-collapse 는 separate 다(border-spacing:0 이라 폭·정렬은 collapse 와 같다). collapse 모델에서는 border-radius 가 무효라 일주 금 띠의 모서리를 굴릴 수 없고, 굴리려면 테두리가 셀에 얹혀야 한다. 그 대가로 ·에 준 테두리가 무시되므로 아래 두 곳 (열 묶음 구분선·금 띠)이 전부 셀 선택자로 내려간다. */ .manse-x{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;} .manse-x-cl{width:46px;} /* 일주 열 — 석간 먹 띠. 열의 모든 셀이 같은 배경·좌우 테두리를 이어받아 전 행을 관통한다. */ .manse-x .is-day{background:var(--accent);color:var(--판);border-left:1px solid var(--accent);border-right:1px solid var(--accent);} .manse-x .is-day .manse-x-char, .manse-x .is-day .manse-x-eum, .manse-x .is-day .manse-x-tg, .manse-x .is-day .manse-x-st, .manse-x .is-day .manse-x-np, .manse-x .is-day .manse-x-jjg b, .manse-x .is-day .manse-x-jjg i, .manse-x .is-day .manse-x-gung, .manse-x .is-day .manse-x-gung b, .manse-x .is-day .manse-x-gung i, .manse-x .is-day .manse-x-gs, .manse-x .is-day .manse-x-ss, .manse-x .is-day .manse-x-none, .manse-x th.is-day{color:var(--판);} .manse-x th,.manse-x td{padding:var(--s1) 6px;text-align:center;vertical-align:middle;} .manse-x thead th{ font-family:var(--serif);font-weight:400; font-size:12px;color:var(--muted);letter-spacing:.10em; padding-top:2px;padding-bottom:var(--s1); } /* 금 띠의 윗마개. r 은 8px — preview/result 의 같은 것(.manse-col, 일주 강조 박스)이 쓰는 값이다. 두 화면에서 같은 자리가 같은 모서리로 읽힌다. 10px 은 이 표를 감싼 카드(.manse)의 값이고, 중첩된 사각형은 부모보다 한 단 작게 굴리는 편이 안쪽으로 맞물려 보인다. */ .manse-x thead th.is-day{ color:var(--판);font-weight:700; border-top:1px solid var(--accent); border-radius:8px 8px 0 0; } .manse-x thead td{padding:0;} .manse-x th[scope="row"]{ font-family:var(--serif);font-weight:400; font-size:10px;color:var(--muted);letter-spacing:.02em;line-height:1.35; text-align:right;padding-right:var(--s1);white-space:nowrap; } /* 열 묶음 구분선 — separate 모델에서는 테두리가 무시되므로 그 묶음 첫 행의 셀에 얹는다. */ .manse-x tbody + tbody > tr:first-child > *{border-top:1px solid var(--rule);} /* 금 띠의 아랫마개는 표의 마지막 행 하나에만. tbody 전체에 걸면 12운성·납음 사이가 끊어진다. */ .manse-x tbody:last-of-type tr:last-child td.is-day{ border-bottom:1px solid var(--accent); border-radius:0 0 8px 8px; } .manse-x tbody tr:first-child > *{padding-top:var(--s1);} .manse-x tbody tr:last-child > *{padding-bottom:var(--s1);} /* tbody 그룹 사이 — 경계가 1px 선 하나뿐이라 다섯 묶음이 평면으로 읽혔다(2026-08-08). */ .manse-x tbody + tbody tr:first-child > *{padding-top:var(--s2);} .manse-x tbody:last-of-type tr:last-child > *{padding-bottom:var(--s2);} /* 셀 안 요소 — 십성(매화) · 간지(한자) · 독음(재) */ .manse-x-tg{font-size:12px;color:var(--oh-fire);letter-spacing:.03em;} .manse-x-tg.is-me{color:var(--accent);font-weight:700;} .manse-x-char{display:block;font-family:var(--serif);font-size:28px;line-height:1.15;color:var(--text);} .manse-x-eum{display:block;font-size:10px;color:var(--muted);margin-top:6px;letter-spacing:.01em;} /* 지장간 — 한자 아래가 아니라 옆에 십성을 붙이고 줄로 쌓는다. 좁은 셀에서 가로로 우겨넣지 않는다. */ .manse-x-jjg{display:flex;flex-direction:column;align-items:center;gap:3px;} .manse-x-jjg > span{display:flex;align-items:baseline;gap:4px;} .manse-x-jjg b{font-family:var(--serif);font-weight:400;font-size:12px;color:var(--text);line-height:1;} /* 지장간 십성은 본기 십성보다 한 단 낮은 정보 — 같은 매화색을 알파로 눕혀 위계를 만든다. */ .manse-x-jjg i{font-style:normal;font-size:10px;color:var(--oh-fire);opacity:.8;line-height:1;letter-spacing:.01em;} .manse-x-st{font-size:12px;color:var(--text);letter-spacing:.02em;} .manse-x-np{font-size:12px;color:var(--muted);letter-spacing:.02em;} .manse-x-none{font-size:12px;color:var(--선);} /* 시 모름일 때 빈 칸 */ /* 궁성 행 — 명사만. 형용사·서술·판정을 넣지 않는다. */ .manse-x-gung{display:flex;flex-direction:column;gap:1px;line-height:1.25;} .manse-x-gung b{font-size:10px;color:var(--mark);font-weight:400;font-family:var(--serif);} .manse-x-gung i{font-size:10px;color:var(--muted);font-style:normal;} /* ── 만세력 페이지 전용 여백(2026-08-08 밀도 리뷰 안 B) ──────────────────────────── ⚠ .manse 카드와 .sec 은 preview/result·홈과 **공유하는 전역**이라 값을 직접 못 고친다. 그래서 views/manse.php 가 이미 달고 있는 로 스코프를 좁힌다. (POST 결과 조각 경로도 body 는 그대로라 두 입구가 같은 여백을 받는다.) 카드 좌우 12px 은 .wrap 16px 과 합쳐도 표를 화면 끝까지 밀어붙였고, 섹션 리듬은 padding-top 40px 하나뿐이라 2,053px 짜리 섹션과 327px 짜리 섹션이 같은 간격으로 붙었다. */ .page-manse .manse{--card-gut:var(--s2);padding:var(--s3) var(--card-gut);background:var(--판);border-radius:var(--r);box-shadow:0 0 0 1px var(--선);} .page-manse .sec{padding-top:var(--s6);} /* 대운 스트립만 위 카드 좌우 패딩을 되돌린다 — 10칸이 한 화면에 서려면 417px 이 필요한데 좌우 16px 로는 clientWidth 가 416px 이라 1px 이 모자란다(실측). 스크롤 영역이 카드 가장자리까지 닿는 것은 가로 스크롤 UI 에서 오히려 "옆에 더 있다"는 신호라 시각적으로도 손해가 아니다. 세운(.manse-x-swrap)은 480px 에서도 원래 스크롤이라(폭 예산 없음) 함께 상쇄해 두 줄을 맞춘다. ⚠ 상수(-16px)를 박지 않는다. 좁은 화면 갈래가 카드 거터를 9px 로 줄이는데 상쇄만 16px 로 남으면 스트립이 카드 밖으로 7px 씩 삐져나가, 스트롤 영역의 표면색 슬래브가 카드의 둥근 모서리와 금색 실선을 덮는다(2026-08-08 실측: 320·360·375·380px 에서 좌우 7px). */ .page-manse .manse-x-dwrap, .page-manse .manse-x-swrap{margin-left:calc(var(--card-gut) * -1);margin-right:calc(var(--card-gut) * -1);} /* 기운의 분포 블록 — 오행 · 십성 · 돕는 자리 셋이 한 카드에 12~16px 로 붙어 한 덩어리로 읽혔다(2026-08-08 밀도 리뷰 안 B). 각자 이름을 갖고 --s4 로 벌어진다. ⚠ 소제목은 카드 안 좌측이다. 가운데로 띄우면 아래 그림 둘(오각형·막대)의 축과 어긋난다. */ .manse-x-eblock + .manse-x-eblock{ margin-top:var(--s4);padding-top:var(--s3); border-top:1px solid var(--rule); } .manse-x-ehead{ font-family:var(--serif);font-weight:400; font-size:12px;color:var(--mark);letter-spacing:.10em; margin-bottom:var(--s2);padding:0 6px; } .manse-x-sum{margin-top:0;} /* ===== 대운 스트립 10칸 — 기존 .manse-dw-*(6~8칸)와 별개 계열. 조사된 경쟁 3사 전원이 10칸/100년이다. minmax 하한을 두어 좁은 화면에서는 .manse-x-dscroll 안에서 가로로 밀린다. 하한 39px 근거: 10*39 + 9*3(gap) = **417px** 이 10칸을 다 보이게 하는 최소 폭이다. 기본 컬럼(480)에서 .manse-x-dscroll 의 clientWidth 는 아래 .page-manse 상쇄를 거쳐 448px 이라 (카드 콘텐츠 416 + 좌우 상쇄 32 = 카드 바깥 폭과 같다) 417 <= 448 로 선다. 10칸이 다 보이는 경계는 **뷰포트 449px** 이다 — clientWidth = 컬럼 - 32(.wrap) 이고 417 이 필요하니 컬럼 >= 449 다. 그보다 좁으면 스트립 안에서 가로로 민다(375·390·414 같은 흔한 폰 폭이 여기 든다). ⚠ 이 자리에 오래 "360px 화면에서만 밀린다"고 적혀 있었는데 사실이 아니었다. 상쇄를 넣기 전 공식은 컬럼 - 56 이라 경계가 473px 이었고, 그때도 360 이 아니라 473 이 답이었다. 칸 안의 최장 문자열은 "100세"(12px, 실측 약 32px)라 39px 안에 들어간다. (2026-09-18 실측: 이 앱은 .wrap 이 430px 로 잠겨 있어 clientWidth 가 398px — 10칸은 항상 스트립 안에서 민다. 아래 수치는 명리 480px 컬럼 기준의 기록이다.) ⚠ 이 417px 은 빠듯하다. gap·하한·카드 패딩 중 무엇이든 건드리면 10칸이 한 화면에서 깨진다 — 실제로 2026-08-08 에 .page-manse .manse 의 좌우 패딩을 12→16px 로 올리자 상쇄를 넣기 전 clientWidth 가 424→416 으로 떨어져 마지막 칸이 1px 잘렸다. 그래서 아래 .page-manse 상쇄가 있다. 바꾸기 전에 반드시 브라우저에서 .manse-x-dscroll 의 scrollWidth 와 clientWidth 를 재라. ===== */ .manse-x-dw{display:grid;grid-template-columns:repeat(10,minmax(39px,1fr));gap:3px;} .manse-x-dwc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s1) 1px;border-radius:6px;transition:background .15s ease;} .manse-x-dwc:hover{background:var(--track);} .manse-x-dwc:focus-visible{outline:2px solid var(--mark);outline-offset:1px;} .manse-x-dwc.now{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);} /* 선택 대운(?dw=n)이 현재 대운과 다를 수 있다 — 두 상태를 분리해 표시한다. */ .manse-x-dwc.is-sel:not(.now){box-shadow:inset 0 0 0 1px var(--mark);} .manse-x-dwage{font-family:var(--serif);font-size:12px;color:var(--muted);letter-spacing:.01em;} .manse-x-dwc.now .manse-x-dwage{color:var(--accent);font-weight:700;} .manse-x-dwgz{font-family:var(--serif);font-size:14px;color:var(--text);line-height:1.1;} .manse-x-dweum{font-size:10px;color:var(--muted);line-height:1.1;} .manse-x-dwtg{font-size:10px;color:var(--oh-fire);opacity:.8;line-height:1.1;} .manse-x-dwst{font-size:10px;color:var(--muted);line-height:1.1;} .manse-x-note{ margin-top:12px;padding-top:11px;border-top:1px solid var(--rule); font-size:12px;color:var(--muted);text-align:center;line-height:1.7; } .manse-x-note b{color:var(--text);font-weight:600;} /* ===== 세운 표 10년 — 대운과 함께 가로로 미는 두 곳 중 하나 ===== */ .manse-x-swrap{position:relative;} .manse-x-sscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;} .manse-x-sscroll:focus-visible{outline:2px solid var(--mark);outline-offset:2px;border-radius:6px;} .manse-x-sw{display:flex;gap:3px;width:max-content;} .manse-x-swc{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s1) 1px;border-radius:6px;} .manse-x-swc.now{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);} .manse-x-swy{font-family:var(--serif);font-size:12px;color:var(--muted);letter-spacing:.01em;} .manse-x-swc.now .manse-x-swy{color:var(--accent);font-weight:700;} .manse-x-dwrap{position:relative;} .manse-x-dscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;} .manse-x-dscroll:focus-visible{outline:2px solid var(--mark);outline-offset:2px;border-radius:6px;} /* ---- 가로 스크롤 가장자리 표시 (대운·세운 공용) ---- 전경 오버레이(::after)가 아니라 배경 레이어로 그린다. 두 가지를 동시에 고친다. 1) 배경은 글자 뒤에 깔리므로 칸을 어둡게 덮지 않는다. 전경 방식은 10칸이 전부 들어가는 480px 컬럼에서도 마지막 칸을 덮어 잘린 것처럼 보이게 했다. 2) 덮개는 local, 그림자는 scroll 로 붙인다. 덮개는 콘텐츠 끝에 붙어 함께 밀리고 그림자는 보이는 가장자리에 고정되므로, 끝에 닿거나 애초에 밀 것이 없으면 덮개가 그림자를 정확히 가린다. 즉 더 볼 게 실제로 있을 때만 나타난다. JS 0줄. 덮개(26px)를 그림자(24px)보다 넓게 잡아 가장자리가 새지 않게 한다. */ .manse-x-dscroll,.manse-x-sscroll{ background: linear-gradient(var(--surface),var(--surface)) left center/26px 100% no-repeat local, linear-gradient(var(--surface),var(--surface)) right center/26px 100% no-repeat local, linear-gradient(90deg,var(--rule),transparent) left center/24px 100% no-repeat scroll, linear-gradient(270deg,var(--rule),transparent) right center/24px 100% no-repeat scroll; } /* ===== 계산 근거 — 산출 과정 단계도 ===== 입력 → 서머타임 → 시주 → 일주 → 절입 → 월주 → 년주. 진짜 순서라
    이고 번호가 선다. 왼쪽 세로선이 단계를 잇고, 오른쪽 .calc-r 에 그 단계가 확정한 기둥 하나가 선다. 값은 뷰가 계산하지 않는다. */ .calc{list-style:none;counter-reset:calc;padding:0 6px;} .calc-step{ position:relative;display:grid;grid-template-columns:22px 1fr auto;column-gap:10px;align-items:start; padding:10px 0 14px;counter-increment:calc; } .calc-step::before{ content:counter(calc);grid-row:1 / span 2; width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--mark); font-family:var(--serif);font-size:11px;line-height:22px;text-align:center;color:var(--mark);background:var(--surface); } .calc-step::after{content:"";position:absolute;left:10.5px;top:34px;bottom:-2px;width:1px;background:color-mix(in srgb,var(--mark) 30%,transparent);} .calc-step:last-child::after{display:none;} .calc-k{grid-column:2;font-family:var(--serif);font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:22px;} .calc-n{grid-column:2;margin-top:2px;font-size:13px;line-height:1.65;color:var(--text);} .calc-n small{font-size:11.5px;color:var(--muted);} .calc-r{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;} .calc-r em{font-style:normal;font-family:var(--serif);font-size:22px;line-height:1.1;color:var(--text);letter-spacing:.04em;} .calc-r small{font-size:10px;color:var(--muted);} /* 적용 여부 칩 — 규칙은 설명, 칩은 이 사람의 상태. 문장 꼬리에 같은 크기로 붙이면 스캔이 안 된다. */ .calc-step .st{ grid-column:3;grid-row:1;justify-self:end;align-self:start; font-family:var(--serif);font-size:10px;letter-spacing:.02em;white-space:nowrap; padding:2px 8px;border-radius:999px; } .calc-step .st.on{color:var(--mark);box-shadow:inset 0 0 0 1px var(--mark);} .calc-step .st.off{color:var(--muted);box-shadow:inset 0 0 0 1px var(--선);} .calc-step .manse-x-axis{grid-column:2 / -1;margin:12px 0 0;} /* 절입 축(節入軸) — 이 페이지의 표식. 절기 데이터가 분 단위(JPL DE421)인데 그걸 드러내는 화면이 없었다. "소한과 입춘 사이"를 문장으로 읽히게 두지 않고 한 줄의 축 위에 세운다. 새 색·애니메이션 없음. 상단 패딩은 눈금 라벨(축 위 27px + 글자 높이)이 자기 박스 안에 들어갈 만큼 잡는다. */ .manse-x-axis{position:relative;margin:16px 6px 0;padding:34px 0 0;} .manse-x-axis-line{position:relative;height:1px;background:linear-gradient(90deg,var(--mark),var(--mark-soft));} .manse-x-axis-line::before,.manse-x-axis-line::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;transform:translateY(-50%);} .manse-x-axis-line::before{left:0;background:var(--mark);} .manse-x-axis-line::after{right:0;background:transparent;box-shadow:inset 0 0 0 1px var(--mark);} /* 태어난 때. 실제 비율이 0%·100% 에 붙으면 눈금이 끝점에 먹히므로 뷰가 [4%, 96%] 로 clamp 한다. */ .manse-x-axis-mark{position:absolute;left:4%;bottom:0;width:1px;height:13px;background:var(--accent);} .manse-x-axis-mark span{position:absolute;left:0;bottom:14px;white-space:nowrap;font-size:10px;color:var(--accent);letter-spacing:.02em;} /* 축의 오른쪽 절반에 붙는 경우 — 라벨을 왼쪽으로 흘려야 컨테이너를 넘지 않는다. */ .manse-x-axis-mark.is-end span{left:auto;right:0;} .manse-x-axis-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;color:var(--muted);} .manse-x-axis-ends b{color:var(--text);font-weight:400;font-family:var(--serif);} .manse-x-src{margin-top:var(--s2);padding:0 6px;font-size:12px;color:var(--muted);line-height:1.6;} /* 계산 근거의 접힘 — '계산 방식' 한 문단. 전역 .qa 카드를 그대로 쓴다(요약 글꼴·셰브런·포커스 링 공유). */ .manse-x-more{margin-top:14px;} /* .manse-x-src 의 좌우 6px 은 .manse 직계 자식과 줄을 맞추던 값이다. 접힘 안에서는 기준선이 .qa .a 의 패딩이라 그만큼 되돌린다. 대운 산출 근거 접힘(.manse-x-dwmore)도 같은 자리에 선다 — .manse-x-dwexp 가 같은 6px 을 갖고 있어 함께 되돌리지 않으면 네 줄과 산식 문장만 카드 안 다른 요소보다 6px 밀린다. */ .manse-x-more .manse-x-src{padding:0;} .manse-x-dwmore{margin-top:14px;} .manse-x-dwmore .manse-x-src, .manse-x-dwmore .manse-x-dwexp{padding:0;} /* 시 모름일 때 대운 자리를 대신하는 블록. 시 모름은 대운을 '조금 부정확하게' 만드는 게 아니라 첫 칸을 통째로 어긋나게 한다 — 원국은 00:00, 대운은 12:00 을 쓰는데 두 축이 절기 경계를 반대로 넘기 때문이다. 빈 카드가 아니라 '무엇을 하면 채워지는가'를 말하는 자리라 점선 테두리로 미완을 표시한다. */ .manse-x-empty{padding:24px 14px;text-align:center;border:1px dashed var(--선);border-radius:8px;} .manse-x-empty p{font-family:var(--serif);font-size:14.5px;color:var(--text);line-height:1.6;} .manse-x-empty .sub{font-family:var(--sans);font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.65;max-width:34ch;margin-inline:auto;} /* ===================== 확장 명식 신규분 ===================== 12신살·길신 행 · 기준지지 선 · 오행 오각형 · 십성 열 · 인라인 사전 · 대운 산출 근거 · 세운 100년 격자 · 삼재 배지. 신규 hex 0 — 색은 전부 기존 토큰이거나 토큰과 같은 RGB 의 rgba() 다(TokenGate 가 app.css 전체의 6자리 hex 를 정본 12색으로 잠근다). ⚠ .m-late 는 쓰지 않는다(이 파일 위쪽 `html.js .manse .m-late{opacity:0}`). ===================== */ /* ---- 12신살 · 길신 행 ---- 길신은 한 칸에 여럿 걸린다. 가로로 이으면 4열 표에서 셀이 먼저 무너지므로 줄로 쌓는다. */ .manse-x-ss{font-size:12px;color:var(--oh-fire);letter-spacing:.02em;} .manse-x-gs{display:block;font-size:10px;color:var(--mark);line-height:1.35;} .manse-x-gs i{display:block;font-style:normal;} /* ---- 12신살 기준지지 선 ---- 표와 **같은 격자 규칙**(46px + 4등분)이라 열 중심과 자동으로 맞는다. 확정 시안은 SVG(viewBox 332×30)로 그렸는데, 표는 첫 열만 고정폭이고 나머지가 균등이라 SVG 를 비례로 늘리면 폭이 332px 이 아닌 화면에서 눈금이 열을 벗어난다. 모양만 가져오고 격자는 CSS 로 짠다. ⚠ 첫 열 46px 은 .manse-x-cl 과 같은 값이다. 한쪽만 바꾸면 눈금이 열에서 떨어진다 (좁은 화면 38px 짝도 아래 @media 에 함께 둔다). */ .manse-x-ssaxis{ display:grid;grid-template-columns:46px repeat(4,1fr); height:20px;margin-top:2px;position:relative; } .manse-x-ssgut{grid-column:1;} .manse-x-ssaxis .c{position:relative;} /* 가로선 — 첫 열을 건너뛰고 값 네 열의 **중심에서 중심까지만** 긋는다. 열 하나의 폭이 (100% - 46px)/4 이므로 양끝에 남길 반 칸은 그 절반, 곧 (100% - 46px)/8 이다. ::before 를 셀마다 나눠 그리면 기준 열(.is-base)의 점과 같은 의사요소를 다투게 된다 — 컨테이너에 한 줄로 긋고 점은 셀에 남긴다. position:absolute 라 그리드 항목이 되지 않는다. */ .manse-x-ssaxis::before{ content:"";position:absolute;top:6px;height:1px; left:calc(46px + (100% - 46px) / 8);right:calc((100% - 46px) / 8); background:var(--mark-soft); } /* 세로 tick — 각 열 중심에서 위로 뻗어 셀 밑동에 닿는다. */ .manse-x-ssaxis .c::after{ content:"";position:absolute;left:50%;top:0;width:1px;height:6px;margin-left:-.5px; background:var(--mark-soft); } /* 기준 열(일지)만 점으로 찍고 tick 을 선 아래로 내린다. */ .manse-x-ssaxis .c.is-base::after{top:6px;height:7px;} .manse-x-ssaxis .c.is-base::before{ content:"";position:absolute;left:50%;top:3px;width:6px;height:6px; margin-left:-3px;border-radius:50%;background:var(--mark); } /* 선 바로 아래 붙는 한 줄이라 .manse-x-src 의 위 여백 12px 을 접는다. */ .manse-x-ssnote{margin-top:2px;} /* ---- 오행 오각형 생극도 ---- 좌표·화살표가 전부 뷰의 상수라 서버가 계산하는 것은 원 반지름 다섯뿐이다. JS 0줄. viewBox(172×176) 를 1:1 로 두면 그림이 너무 작다 — 폭을 300px 로 늘려 1.74배로 키운다. SVG 안 font-size 도 같은 배로 커지므로 화면 px 은 선언값 × 1.74 다(아래 각주 크기 주의). */ .manse-x-ohwrap{text-align:center;margin:10px 0 4px;} .manse-x-oh{width:100%;max-width:300px;height:auto;} .manse-x-oh .manse-x-sang line{stroke:var(--mark-soft);stroke-width:1.3;fill:none;} .manse-x-oh .manse-x-geuk line{stroke:var(--accent);opacity:.45;stroke-width:1;fill:none;stroke-dasharray:3 2.5;} /* 화살촉은 안에 있어 상생·상극 그룹의 자손이 아니다. id 로만 잡힌다. */ .manse-x-oh #mx-sang path{fill:var(--mark);} .manse-x-oh #mx-geuk path{fill:var(--accent);} .manse-x-oh circle{fill:var(--bg);stroke-width:1.4;} .manse-x-oh text{font-family:var(--serif);text-anchor:middle;} .manse-x-ohname{font-size:12px;} .manse-x-ohnum{font-size:8.5px;fill:var(--muted);} /* 각주만 확대에 딸려가면 본문 각주(.manse-x-src 11px)보다 커진다 — 6.5 × 1.74 ≒ 11px. */ .manse-x-ohfoot{font-size:6.5px;fill:var(--muted);} /* 0자인 오행도 자리를 남긴다. 지우면 '없다'가 아니라 '못 뽑았다'로 읽힌다. */ .manse-x-ohnode.is-zero{opacity:.42;} /* 오행 색 — 명식 표·십성 열과 같은 클래스를 공유한다. 신규 hex 0. */ .manse-x-oh-wood circle{stroke:var(--oh-wood);} .manse-x-oh-wood .manse-x-ohname{fill:var(--oh-wood);} .manse-x-oh-fire circle{stroke:var(--oh-fire);} .manse-x-oh-fire .manse-x-ohname{fill:var(--oh-fire);} .manse-x-oh-earth circle{stroke:var(--oh-earth);} .manse-x-oh-earth .manse-x-ohname{fill:var(--oh-earth);} .manse-x-oh-metal circle{stroke:var(--oh-metal);} .manse-x-oh-metal .manse-x-ohname{fill:var(--oh-metal);} .manse-x-oh-water circle{stroke:var(--oh-water);} .manse-x-oh-water .manse-x-ohname{fill:var(--oh-water);} /* ---- 십성 다섯 무리 세로 열 ---- ⚠ 이름은 .manse-x-tgsec 다. .manse-x-tg 는 위에서 표 셀의 십성 글자가 이미 쓴다. 열 하나가 한 무리(비겁·식상·재성·관성·인성)이고 위가 정(正) 아래가 편(偏)이다. 색은 그 십성이 딛는 오행이고, 칸 안 글자가 곧 개수다. 0인 십성도 칸을 남긴다(가운뎃점 하나). 2026-09-18 에 가로 막대 열 줄에서 옮겼다. 폭 예산은 320px 기준이다 — .wrap 32 + .manse 24 를 뺀 264px 이 다섯 열에 틈 6px 넷을 빼고 48px 씩 돌아간다. 그 안에 서야 하는 최장 문자열은 자리 두 자('시지' 8px ≈ 16px)와 한자 한 자(16px)다. ⚠ 격자는 **열 우선**(grid-auto-flow:column)이다. 마크업은 무리마다 [이름·정·편] 세 덩이로 묶여 있는데, 행 우선으로 흘리면 그 순서가 그대로 행을 채워 무리가 가로로 눕는다. .manse-x-tgc 가 display:contents 인 것도 같은 이유다 — 무리 래퍼가 격자 항목이 되면 칸 높이가 열마다 따로 놀아 정/편 두 줄이 어긋난다. 색(color)은 상속이라 래퍼가 사라져도 칸까지 내려간다. */ .manse-x-tgsec{margin-top:0;} .manse-x-tgcols{display:grid;grid-auto-flow:column;grid-template-rows:auto auto auto;grid-auto-columns:1fr;gap:5px 6px;} .manse-x-tgc{display:contents;} .manse-x-tgg{font-family:var(--serif);font-size:11px;text-align:center;letter-spacing:.04em;} .manse-x-tgg.is-zero{opacity:.45;} /* 칸 — 글자가 없으면 테두리만 남는다. 배경 틴트는 color-mix 라 못 쓰는 브라우저에서는 조용히 빠지고 테두리와 글자색이 그대로 남는다(정보를 색만으로 전달하지 않는다 — WCAG 1.4.1). */ .manse-x-tgt{ display:flex;flex-direction:column;align-items:center;min-width:0; border-radius:6px;padding:6px 3px;min-height:52px; box-shadow:inset 0 0 0 1px var(--선); } .manse-x-tgt.is-on{ background:color-mix(in srgb, currentColor 12%, transparent); box-shadow:inset 0 0 0 1px currentColor; } .manse-x-tgn{display:block;font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.02em;} .manse-x-tgn.is-faint{opacity:.72;} .manse-x-tgt.is-on .manse-x-tgn{color:var(--text);} .manse-x-tgz{display:block;font-style:normal;font-size:11px;color:var(--선);margin-top:5px;} .manse-x-tgw{display:flex;flex-direction:column;gap:2px;margin-top:4px;} .manse-x-tgch{display:block;} .manse-x-tgch b{display:block;font-family:var(--serif);font-size:16px;line-height:1.15;font-weight:400;color:var(--text);} .manse-x-tgch i{display:block;font-style:normal;font-size:8.5px;color:var(--muted);letter-spacing:.03em;} /* 일간 — 밑줄 하나로 표시한다(2026-09-18 운영자 결정). 이 테마에 금색은 없고(--mark 는 석회라 오행색과 구별이 안 선다), 표의 일주 열처럼 먹색으로 반전시키면 48px 칸에서 그 한 글자만 먹칠처럼 무거워진다. 선은 글자와 자리 라벨 사이를 지나 칸 폭을 긋는다 — b 가 블록이라 밑줄도 칸 폭이고, 그래서 두 글자가 든 칸(일간과 또 한 글자)에서도 어느 줄인지가 분명하다. */ .manse-x-tgch.is-me b{border-bottom:2px solid var(--먹);padding:1px 2px 2px;} /* 신강신약 — 평범한 말이 주인공이고 명리 용어는 각주다. 근거 줄은 결론과 함께만 선다(스펙 §4). 끄면 마크업이 아예 렌더되지 않으므로 이 규칙들은 조용히 놀고 있게 된다. */ .manse-x-bs{margin-top:0;} .manse-x-bslead{text-align:center;font-size:14px;line-height:1.65;color:var(--text);} .manse-x-bslead b{color:var(--mark);font-weight:normal;} .manse-x-bsterm{display:block;font-size:10px;color:var(--muted);margin-top:5px;letter-spacing:.04em;} .manse-x-bsver{font-family:var(--serif);color:var(--mark);} .manse-x-bsrows{margin-top:var(--s2);} .manse-x-bsrow{display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:var(--s1);padding:var(--s1) 0;border-bottom:1px solid var(--rule);font-size:12px;} .manse-x-bsrow:last-child{border-bottom:0;} .manse-x-bsrowk{color:var(--muted);font-size:12px;} .manse-x-bsrowv{color:var(--muted);} .manse-x-bsrow.is-on .manse-x-bsrowv{color:var(--text);} .manse-x-bsrowt{font-family:var(--serif);font-size:10px;color:var(--muted);text-align:right;} .manse-x-bsrow.is-on .manse-x-bsrowt{color:var(--mark);} .manse-x-bsdot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--선);} .manse-x-bsrow.is-on .manse-x-bsdot{background:var(--mark);} .manse-x-bsscale{margin-top:14px;} .manse-x-bsscaletrack{display:flex;gap:3px;} .manse-x-bsscalecell{flex:1;height:22px;border-radius:2px;background:var(--track);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);} .manse-x-bsscalecell.is-filled{background:var(--mark-soft);} .manse-x-bsscalecell.is-me{background:var(--mark);color:var(--bg);font-weight:600;} .manse-x-bsscaleax{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:5px;} .manse-x-bsnext{margin-top:var(--s2);padding:var(--s2);border:1px solid var(--accent);border-radius:6px;background:var(--accent-soft);} .manse-x-bsnext p{font-size:12px;color:var(--muted);line-height:1.75;} /* 십성 칸은 이름과 같은 색을 쓴다 — 같은 오행 클래스가 글자색을 정하고, 칸의 테두리와 틴트가 그 currentColor 를 받는다. 같은 클래스가 오각형의 에도 붙지만 거기서는 color 가 아무것도 칠하지 않는다(fill/stroke 는 위에서 정한다). */ .manse-x-oh-wood{color:var(--oh-wood);} .manse-x-oh-fire{color:var(--oh-fire);} .manse-x-oh-earth{color:var(--oh-earth);} .manse-x-oh-metal{color:var(--oh-metal);} .manse-x-oh-water{color:var(--oh-water);} /* ---- 인라인 사전 — 값 옆에 서는 정의. 하단 안내문(.m-about)과 층이 다르다. ---- */ .manse-x-dict .a{display:flex;flex-direction:column;gap:9px;} .manse-x-dicte{border-left:2px solid var(--mark-soft);padding-left:10px;} .manse-x-dicte b{display:block;font-family:var(--serif);font-weight:400;font-size:14px;color:var(--mark);line-height:1.5;} .manse-x-dicte b s{text-decoration:none;opacity:.5;} .manse-x-dicte b span{font-size:10px;color:var(--muted);} .manse-x-dicte p{margin-top:2px;font-size:12px;line-height:1.62;color:var(--text);} /* ---- 대운 산출 근거 — 네 줄 전부 이미 계산된 값이다. ---- */ .manse-x-dwexp{display:flex;flex-direction:column;gap:5px;margin-top:12px;padding:0 6px;} .manse-x-dwexp .r{display:flex;gap:10px;font-size:11.5px;line-height:1.6;} /* '기준 절기' 가 가운데 빈칸에서 접히지 않을 만큼만 잡는다(10.5px × 4자 + 빈칸). */ .manse-x-dwexp .k{flex:none;width:56px;color:var(--muted);font-family:var(--serif);font-size:10.5px;} .manse-x-dwexp .v{flex:1;min-width:0;color:var(--text);} .manse-x-dwexp .v em{font-style:normal;font-family:var(--serif);color:var(--text);} .manse-x-dwexp .v b{color:var(--mark);font-weight:700;} .manse-x-dwexp .v small{font-size:10.5px;color:var(--muted);} /* 간기 위 개인정보 고지 — 이 페이지만의 약속(미저장·주소 미노출)이라 공용 _footer.php 밖에 둔다. */ .page-manse .colophon .m-privacy{font-size:11px;color:var(--muted);line-height:1.7;} /* 모션 — 이 페이지는 개장(開帳) 애니메이션이 없다. 조회 도구는 즉시 읽혀야 한다. hover 트랜지션만 접는다. */ @media (prefers-reduced-motion: reduce){ .manse-x-dwc{transition:none!important;} } /* 360px 안전 — 4열 유지, 글자만 한 단 내린다. */ @media (max-width:380px){ .m-title{font-size:27px;} /* 좌우 거터가 줄면 아래 스트립 상쇄도 같이 줄어야 한다 — --card-gut 하나로 묶여 있다. */ .page-manse .manse{--card-gut:9px;padding:16px var(--card-gut);} .manse-x-cl{width:38px;} .manse-x th[scope="row"]{font-size:10px;padding-right:6px;} .manse-x-char{font-size:22px;} .manse-x-jjg b{font-size:11.5px;} .manse-x-jjg i{font-size:9px;} .manse-x-np{font-size:10px;} .manse-x-dwgz{font-size:12px;} .manse-x-swc{flex-basis:54px;} .manse-x-gung b{font-size:9px;} .manse-x-gung i{font-size:8.5px;} /* 표는 열 행이다. 4열 폭 예산은 그대로다 — 320px 에서 .wrap 32 + .manse 18 + 줄머리 38 을 뺀 232px 이 값 네 열에 58px 씩 돌아간다. 이 폭 안에서 최장 문자열은 길신 넉 자 ('관귀학관' 9px ≈ 36px)라 아직 남는다. */ .manse-x-ss{font-size:10px;} .manse-x-gs{font-size:10px;} /* 기준지지 선의 첫 열은 .manse-x-cl 과 같은 값이어야 눈금이 열 중심에 선다. */ .manse-x-ssaxis{grid-template-columns:38px repeat(4,1fr);} .manse-x-ssaxis::before{left:calc(38px + (100% - 38px) / 8);right:calc((100% - 38px) / 8);} .manse-x-tgg{font-size:10px;} .manse-x-tgch b{font-size:15px;} }