/* 「명식이 사람이 되다」(2026-10-08) — 壹막 머리의 명식 판(.ming-board)과 막마다 놓이는 명식의 실(.ming-thread).
   마크업은 mingsik.mjs. 판은 한지 막 판 안에 놓이고, 실 카드는 그 자체로 한지 한 장이라 어두운 막(肆) 위에서도 글자가 읽힌다.
   색: --ming 은 일간 오행의 본색(선·매듭·번짐 장식), --ming-ink 는 같은 색을 먹으로 눌러 한지 위 글자 대비 4.5:1 이상을 맞춘 색.
   움직임은 늘 재생한다(동작 줄이기 설정 무시 — 프로젝트 규칙). style.css 의 전역 끄기(*{animation:none!important})보다 세게 건다. */

/* ── 오행 색 ─────────────────────────────────────────────── */
:is(.ming-board,.ming-thread,#life-result)[data-element="목"]{--ming:#4d8a5f;--ming-ink:#2f5e3d}
:is(.ming-board,.ming-thread,#life-result)[data-element="화"]{--ming:#b8463f;--ming-ink:#9a352f}
:is(.ming-board,.ming-thread,#life-result)[data-element="토"]{--ming:#c0952f;--ming-ink:#7a5a12}
:is(.ming-board,.ming-thread,#life-result)[data-element="금"]{--ming:#8a8f8c;--ming-ink:#4f5452}
:is(.ming-board,.ming-thread,#life-result)[data-element="수"]{--ming:#3d5f86;--ming-ink:#2f4c6d}
.ming-board i[data-el="목"]{--el:#4d8a5f}
.ming-board i[data-el="화"]{--el:#b8463f}
.ming-board i[data-el="토"]{--el:#c0952f}
.ming-board i[data-el="금"]{--el:#8a8f8c}
.ming-board i[data-el="수"]{--el:#3d5f86}

/* ── 현재 막 표시도 일간의 색으로 ─────────────────────────── */
/* 붉은 붓 자국 대신 같은 붓 자국 모양에 --ming-ink 를 채운다(밝은 글자 #f3e3b8 과 대비 5:1 이상) */
#life-result[data-element] .act-rail button[aria-current]{background:none;isolation:isolate}
#life-result[data-element] .act-rail button[aria-current]::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ming-ink);
 -webkit-mask:var(--brush-swash-red) center/120% 80% no-repeat;mask:var(--brush-swash-red) center/120% 80% no-repeat}
/* mask 에서 image-set(type()) 을 못 읽는 브라우저(iOS 16 이하 등): 사각 색면 대신 원래의 붉은 붓 자국으로 돌아간다 */
@supports not ((mask-image:image-set(url("x.png") type("image/png"))) or (-webkit-mask-image:image-set(url("x.png") type("image/png")))){
 #life-result[data-element] .act-rail button[aria-current]{background:var(--brush-swash-red) center/120% 80% no-repeat}
 #life-result[data-element] .act-rail button[aria-current]::before{content:none}
}

/* ── 명식 판(壹막) ───────────────────────────────────────── */
.ming-board{--ming:#974d3a;--ming-ink:#974d3a;position:relative;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:center;
 gap:clamp(20px,4vw,48px);margin:6px 0 34px;padding:0 0 30px;color:var(--ink,#29322c);
 border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ming) 55%,transparent) 18%,color-mix(in srgb,var(--ming) 55%,transparent) 82%,transparent) 1}

/* 일간의 상징: 투명 컷아웃이 오행 빛 번짐 위에 떠 있다 */
.ming-board__symbol{position:relative;margin:0;aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
.ming-board__symbol::before{content:'';position:absolute;inset:6% 6% 2%;z-index:-1;border-radius:50%;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--ming) 30%,transparent),color-mix(in srgb,var(--ming) 10%,transparent) 62%,transparent);
 filter:blur(6px)}
/* 바닥에 먹 그림자 한 점 — 떠 있음을 보여 준다 */
.ming-board__symbol::after{content:'';position:absolute;left:22%;right:22%;bottom:4%;height:7%;z-index:-1;border-radius:50%;
 background:radial-gradient(closest-side,#29322c55,transparent);filter:blur(4px)}
.ming-board__symbol picture{display:block;width:100%;height:100%}
.ming-board__symbol img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
/* 막에 들어오면 위로 떠오르고(0.9s), 그다음 숨 쉬듯 아주 조금 오르내린다 */
.ming-board__symbol img{
 animation:ming-rise .9s cubic-bezier(.2,.7,.2,1) both,ming-float 6.5s ease-in-out .9s infinite alternate!important}
.act:not(.is-in) .ming-board__symbol img{animation:none!important;opacity:0}
@keyframes ming-rise{0%{opacity:0;translate:0 36px;scale:.94;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)) blur(4px)}
 100%{opacity:1;translate:0 0;scale:1;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45)) blur(0)}}
@keyframes ming-float{0%{translate:0 0}100%{translate:0 -7px}}

.ming-board__body{min-width:0}
.ming-board__eyebrow{margin:0 0 14px;font:600 11px/1.4 var(--sans);letter-spacing:.34em;color:var(--ming-ink)}

/* 네 기둥: 時 日 月 年 — 한 칸에 천간 위, 지지 아래 */
.ming-pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ming-pillar{position:relative;display:grid;justify-items:center;gap:6px;padding:12px 4px 12px;text-align:center;
 background:color-mix(in srgb,#fffaf0 38%,transparent);border:1px solid #29322c1f}
.ming-pillar small{font:500 11px/1 var(--sans);letter-spacing:.12em;color:#5f6255;white-space:nowrap}
.ming-pillar small span{letter-spacing:.04em}
.ming-pillar b{display:grid;justify-items:center;gap:4px;font-weight:400}
.ming-pillar i{display:block;font:400 clamp(34px,4.4vw,46px)/1.08 'Hanja Brush','Hanja Kai','Song Myung',serif;font-style:normal;color:var(--ink,#29322c);
 padding:0 3px 3px;background:linear-gradient(var(--el,#29322c),var(--el,#29322c)) 50% 100%/72% 3px no-repeat}
.ming-pillar em{font:500 12px/1.2 var(--sans);font-style:normal;letter-spacing:.2em;padding-left:.2em;color:#5f6255}
.ming-pillar b.is-unknown{font:400 34px/2.6 'Hanja Brush','Song Myung',serif;color:#5f6255}
/* 일주: 이 사람 자신의 기둥 — 오행 색 테두리와 낙관 같은 표시 */
.ming-pillar.is-day{border:2px solid var(--ming);background:color-mix(in srgb,var(--ming) 9%,#fffaf0 40%);
 box-shadow:0 10px 26px -14px color-mix(in srgb,var(--ming) 80%,transparent)}
.ming-pillar.is-day small{color:var(--ming-ink);font-weight:700}
.ming-pillar.is-day::after{content:'我';position:absolute;top:-10px;right:-8px;width:20px;height:20px;display:grid;place-items:center;
 font:400 13px/1 'Hanja Brush','Song Myung',serif;color:#f6eedb;background:var(--ming-ink);rotate:6deg;box-shadow:0 2px 6px #0003}

.ming-board__line{margin:16px 0 0;font:500 15px/1.85 var(--serif);word-break:keep-all;color:var(--ink,#29322c)}
.ming-board__line b{font-weight:600;color:var(--ming-ink)}
.ming-board__line b[lang]{font:400 1.35em/1 'Hanja Brush','Hanja Kai','Song Myung',serif;vertical-align:-.05em}
.ming-board__note{margin:6px 0 0;font:500 12px/1.6 var(--sans);color:#5f6255}

/* ── 명식의 실(막마다) ───────────────────────────────────── */
.ming-thread{--ming:#974d3a;--ming-ink:#974d3a;position:relative;margin:30px 0 4px;padding:20px 24px 16px 46px;box-sizing:border-box;
 color:var(--ink,#29322c);background-color:color-mix(in srgb,#f4eedf 94%,transparent);background-image:var(--paper-grain);background-size:320px 320px;
 box-shadow:0 18px 44px -26px #000c,0 1px 0 #fff6 inset}
/* 붉은 실: 매듭에서 시작해 카드 끝까지 내려가는 한 가닥 */
.ming-thread::before{content:'';position:absolute;left:22px;top:30px;bottom:18px;width:2px;
 background:linear-gradient(var(--ming),color-mix(in srgb,var(--ming) 70%,transparent) 85%,transparent)}
.ming-thread__head{position:relative;margin:0 0 12px;font:600 11px/1.4 var(--sans);letter-spacing:.34em;color:var(--ming-ink)}
.ming-knot{position:absolute;left:-29px;top:50%;translate:0 -50%;width:10px;height:10px;border-radius:50%;background:var(--ming);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--ming) 22%,transparent)}
/* 관주의 한 줄: 실 머리에서 관주가 말하듯 — 명조, 본문보다 큰 글자 */
.ming-thread__lead{margin:0 0 16px;font:500 1.16rem/1.7 var(--serif);letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere;color:var(--ink,#29322c)}
.ming-thread__lead+.ming-thread__item{padding-top:14px;border-top:1px solid #29322c1f}
.ming-thread__item+.ming-thread__item{margin-top:12px;padding-top:12px;border-top:1px dashed #29322c2e}
/* 항목 이름: 오행 먹색의 작은 꼬리표 */
.ming-thread__title{position:relative;margin:0 0 4px;font:700 11.5px/1.4 var(--sans);letter-spacing:.14em;color:var(--ming-ink)}
/* 항목마다 실에 작은 마디 */
.ming-thread__title::before{content:'';position:absolute;left:-27px;top:.45em;width:6px;height:6px;rotate:45deg;background:var(--ming)}
/* 이야기 먼저: 이 사람에게 드러난 모습 한 줄이 본문 */
.ming-thread__result{margin:0;font:400 15px/1.75 var(--serif);word-break:keep-all;overflow-wrap:anywhere;color:var(--ink,#29322c)}

/* 짚은 근거(접힘): 조용한 작은 단추, 펼치면 명식 → 뜻 사슬과 짚은 방법 */
.ming-thread__rule{margin:0;border:0}
.ming-thread__rule summary{display:inline-flex;align-items:center;gap:6px;min-height:28px;box-sizing:border-box;padding:6px 10px 6px 0;font:500 11px/1.4 var(--sans);letter-spacing:.08em;color:#5f6255;cursor:pointer;list-style:none}
.ming-thread__rule summary::-webkit-details-marker{display:none}
.ming-thread__rule summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:-45deg;transition:rotate .25s}
.ming-thread__rule[open] summary::before{rotate:45deg}
.ming-thread__rule summary:hover{color:var(--ming-ink)}
.ming-thread__rule[open]>:not(summary){background:#29322c0d;border-left:2px solid color-mix(in srgb,var(--ming) 60%,transparent)}
.ming-thread__chain{list-style:none;margin:4px 0 0;padding:8px 12px 2px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
.ming-thread__chain:has(li:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.ming-thread__chain li{position:relative;min-width:0;font:400 12.5px/1.7 var(--sans);word-break:keep-all;overflow-wrap:anywhere;color:#4a4e43}
.ming-thread__chain small{display:block;margin-bottom:1px;font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;color:#5f6255}
.ming-thread__chain li+li::before{content:'→';position:absolute;left:-22px;top:15px;font:400 14px/1 var(--serif);color:var(--ming-ink)}
.ming-thread__rule p{margin:0;padding:6px 12px 8px;font:400 12px/1.7 var(--sans);color:#4a4e43}

/* 肆막: 판이 투명한 진열대라 실 카드가 밤 바탕 위에 홀로 놓인다 — 폭을 맞추고 그림자를 깊게 */
.act--hopae .ming-thread{margin-top:clamp(28px,5vw,48px);box-shadow:0 24px 60px -20px #000e}
/* 명식이 정하지 않은 것: 붉은 실 대신 끊어진 실(점선) */
.ming-thread[data-act="hopae"]::before{background:repeating-linear-gradient(var(--ming) 0 6px,transparent 6px 11px)}
.ming-thread[data-act="hopae"] .ming-knot{background:none;border:2px solid var(--ming);box-sizing:border-box}

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width:760px){
 .ming-board{grid-template-columns:1fr;gap:14px;padding-bottom:24px}
 .ming-board__symbol{width:auto;height:180px;justify-self:center;aspect-ratio:1}
 .ming-board__eyebrow{text-align:center;letter-spacing:.24em}
 .ming-pillars{gap:6px}
 .ming-pillar{padding:10px 2px}
 .ming-pillar small{font-size:10.5px;letter-spacing:.04em}
 .ming-pillar i{font-size:32px}
 .ming-board__line{font-size:14.5px}
 .ming-thread{padding:16px 16px 14px 38px}
 .ming-thread__lead{font-size:1.1rem;line-height:1.75;margin-bottom:14px}
 .ming-thread::before{left:17px}
 .ming-knot{left:-26px}
 .ming-thread__title::before{left:-24px}
 .ming-thread__chain,.ming-thread__chain:has(li:nth-child(3)){grid-template-columns:1fr;gap:6px 0}
 .ming-thread__chain li+li::before{content:none}
 .ming-thread__result{font-size:14.5px;line-height:1.7}
}

/* ── 관문: 명식 없는 인물을 열려 할 때 입력 카드 머리에 남는 관주의 말 ── */
.life-gate{margin:0 0 16px;padding:10px 14px;border-left:3px solid #b8463f;
 background:color-mix(in srgb,#b8463f 14%,transparent);
 font:500 15px/1.75 var(--serif);letter-spacing:.02em;color:var(--shell-label,#efe6d2);word-break:keep-all;overflow-wrap:anywhere}
.life-gate[hidden]{display:none}
/* 날짜 없는 주 단추: 막지 않고(누르면 입력 카드가 펼쳐진다) 흐리게만 */
#life-generate[aria-disabled="true"]{opacity:.62;filter:saturate(.55)}