/* 재미 도구 4종(띠 궁합·이름 궁합·MBTI 궁합·주사위) 전용 스타일 */
/* 첫머리 '근거 없는 놀이' 경고 상자. 붉은 기운은 글자색과 섞어 라이트·다크 모두 대비를 맞춘다 */
.fn-warn{font-size:15px;line-height:1.6;margin-bottom:14px;background:color-mix(in srgb,var(--red) 12%,transparent);border-left:4px solid var(--red)}
.fn-warn b{display:block;font-size:16px;color:color-mix(in srgb,var(--red) 70%,var(--ink))}
.fn-warn p{margin:6px 0 0}
/* 사람별 입력 묶음 */
.fn-person{border:1px solid var(--line);border-radius:12px;padding:2px 12px 12px;margin:14px 0 0;min-width:0}
.fn-person legend{font-weight:700;padding:0 6px;color:var(--ink)}
.fn-md{display:flex;align-items:center;gap:6px}
.fn-md input{width:72px;min-width:0}
.fn-md span{color:var(--muted);font-size:14px}
/* 두 띠 배지 */
.fn-pair{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.fn-badge{display:flex;flex-direction:column;align-items:center;min-width:96px;padding:10px 12px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}
.fn-badge .fn-h{font-family:'Hahmlet','Noto Serif KR',serif;font-size:40px;line-height:1.1;color:var(--ink)}
.fn-badge b{font-size:16px;color:var(--ink)}
.fn-badge small{color:var(--muted);font-size:12.5px}
.fn-x{font-size:24px;color:var(--muted)}
/* 한 줄 판정 꼬리표. 색 대신 굵은 테두리와 글자로 구분하고 배경은 옅게 */
.fn-lv{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid var(--line);color:var(--ink)}
.fn-lv.good{background:color-mix(in srgb,var(--mint) 18%,transparent);border-color:color-mix(in srgb,var(--mint) 60%,var(--ink))}
.fn-lv.clash{background:color-mix(in srgb,var(--coral) 16%,transparent);border-color:color-mix(in srgb,var(--coral) 60%,var(--ink))}
.fn-lv.care{background:color-mix(in srgb,var(--yellow) 26%,transparent);border-color:color-mix(in srgb,var(--yellow) 55%,var(--ink))}
.fn-list{margin:12px 0 0;padding-left:18px;color:var(--ink2);line-height:1.6}
.fn-list li{margin-top:4px}
.fn-list b{color:var(--ink)}
/* 열두 띠 원 */
.fn-wheel{max-width:300px;margin:0 auto}
.fn-wsvg{width:100%;height:auto;display:block}
.fn-wring{fill:none;stroke:var(--line);stroke-width:1.5}
.fn-wsvg g circle{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.fn-wsvg g.on circle{fill:color-mix(in srgb,var(--yellow) 30%,var(--card));stroke:var(--yellow);stroke-width:3}
.fn-wh{fill:var(--ink);font-size:14px;text-anchor:middle;font-family:'Hahmlet','Noto Serif KR',serif}
.fn-wa{fill:var(--muted);font-size:8px;text-anchor:middle}
.fn-wsvg g.on .fn-wa{fill:var(--ink)}
.fn-wline{stroke:var(--ink2);stroke-width:2.5}
.fn-wline.clash{stroke-dasharray:6 4}
.fn-wline.care{stroke-dasharray:2 4}
.fn-rt th{white-space:nowrap;vertical-align:top}
.fn-rt td{line-height:1.6}
/* 이름 궁합 숫자 줄(삼각형). 칸 폭을 고정해 줄마다 가운데로 모은다 */
.fn-tri{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.fn-tr{display:flex;gap:4px;justify-content:center}
.fn-tr span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--soft);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.fn-tr.fn-ch span{background:none;border:1px solid var(--line)}
.fn-tr.fn-ch span.b{border-style:dashed;border-color:var(--ink2)}
.fn-tr.fn-ch span.a{border-bottom:3px solid var(--ink)}
.fn-tr.last span{background:color-mix(in srgb,var(--yellow) 30%,var(--card));border:2px solid var(--yellow)}
@media(max-width:380px){.fn-tr span{width:25px;height:26px;font-size:14px}.fn-tr{gap:3px}}
/* 획수표 */
.fn-st{display:flex;flex-wrap:wrap;gap:6px}
.fn-st span{display:inline-flex;gap:4px;align-items:baseline;padding:3px 8px;border-radius:8px;background:var(--soft);color:var(--ink2);font-size:13.5px}
.fn-st b{color:var(--ink);font-size:15px}
/* MBTI 판정 글자는 길어 큰 숫자보다 작게 */
.fn-bigsm{font-size:30px;line-height:1.25}
@media(max-width:420px){.fn-bigsm{font-size:25px}}
.fn-ax{margin-top:12px}
.fn-ax td,.fn-ax th{white-space:nowrap}
/* 16×16 궁합표. 기호로 가르고, 고른 행·열 머리와 교차 칸만 굵게 */
.fn-mx{border-collapse:collapse;font-size:12.5px;margin-top:8px}
.fn-mx th,.fn-mx td{border:1px solid var(--line);padding:3px 4px;text-align:center;color:var(--ink)}
.fn-mx td{min-width:22px}
.fn-mx thead th{height:52px;vertical-align:bottom;padding:2px}
.fn-mx thead th span{writing-mode:vertical-rl;font-weight:600}
.fn-mx tbody th{white-space:nowrap;font-weight:600;text-align:left}
.fn-mx th.on{background:var(--soft);color:var(--ink);font-weight:800}
.fn-mx td.hit{background:color-mix(in srgb,var(--yellow) 30%,var(--card));outline:2px solid var(--yellow);outline-offset:-2px;font-weight:800}
/* 좁은 화면 한 열(1fr)에서 넓은 표가 열 폭을 밀어내지 않게 칸 최소 폭을 0 으로 */
.fn-body>*{min-width:0}
/* 주사위·제비뽑기 */
.fn-note{font-size:15px;line-height:1.6}
.fn-chk{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:14px;color:var(--ink2)}
.fn-chk input{margin-top:3px;flex:none}
.fn-dice,.fn-lots{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fn-die{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.fn-lot{padding:8px 14px;border-radius:12px;background:color-mix(in srgb,var(--yellow) 30%,var(--card));border:2px solid var(--yellow);color:var(--ink);font-size:18px;font-weight:800;overflow-wrap:anywhere;max-width:100%}
.fn-h3{font-size:15px;margin:16px 0 4px}
.fn-hist{margin:0;padding-left:22px;color:var(--ink2);font-size:14px;line-height:1.7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fn-ord{margin:10px 0 0;padding-left:26px;font-size:17px;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
.fn-ord li::marker{font-weight:800}
.fn-seq{overflow-wrap:anywhere;word-break:break-all}
#dcTab{margin-bottom:6px}