/* 관주의 점방(2026-10-11, 강호 사주 v10) — 산문(입력)과 막 열한 개.
   결: 밤의 산수(바탕 #141a18) 위에 종이 한 장씩. 모션은 떠오름 + 먹 번짐(blur), ease(.22,.9,.28,1), 숨 6.5s.
   동작 줄이기 분기를 두지 않는다(2026-10-03 결정). */
.jb{--jb-ease:cubic-bezier(.22,.9,.28,1);--jb-paper:#efe8d6;--jb-paper-2:#e6dcc4;--jb-ink:#29322c;--jb-soft:#5f6255;--jb-red:#974d3a;--jb-gold:#c5a779;
 --jb-hanja:'Hanja Brush','Hanja Kai','Song Myung',serif;--jb-serif:'Song Myung','Noto Serif KR',serif;position:relative}

/* ───── 산문 ───── */
.jb-form input[type=text]{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text);border-radius:0;padding:12px 13px;font:14px/1.4 var(--sans);width:100%;transition:border-color .2s}
.jb-form input[type=text]::placeholder{color:var(--shell-small)}
.jb-form input[type=text]:hover{border-color:var(--gold)}
.jb-form input[type=text]:focus-visible{border-color:var(--em)}
.jb-name-row{grid-template-columns:1fr!important}
.jb-form .gender-choice legend small{font-size:11px;color:var(--shell-label-sub);margin-left:6px;font-weight:400}
.jb-gate-note{margin:0;padding:10px 12px;border-left:3px solid var(--jb-red);background:#974d3a22;color:#f0d9c9;font:500 14px/1.7 var(--serif)}
.jb-form.is-shake{animation:jb-shake .52s var(--jb-ease)}
@keyframes jb-shake{0%,100%{translate:0}18%{translate:-10px}36%{translate:9px}54%{translate:-6px}72%{translate:4px}88%{translate:-2px}}
.jb-form[aria-busy=true] .life-primary{opacity:.75}

.jb-invite{position:relative;isolation:isolate;overflow:hidden;background:#101513;color:var(--shell-text);
 padding:clamp(70px,10vw,140px) var(--gutter,24px);display:grid;place-items:center;min-height:min(92svh,860px)}
.jb-invite__art{position:absolute;inset:0;z-index:-1}
.jb-invite__art img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.8);animation:jb-breathe 13s ease-in-out infinite alternate}
.jb-invite__art::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,#10151388 0,#101513e6 70%),linear-gradient(#101513 0,transparent 22%,transparent 78%,#101513 100%)}
@keyframes jb-breathe{0%{scale:1.02}100%{scale:1.08}}
.jb-invite__copy{width:min(880px,100%);text-align:center}
.jb-invite__eyebrow{font:600 12px/1 var(--sans);letter-spacing:.42em;color:var(--jb-gold);margin:0 0 22px}
.jb-invite h2{font:400 clamp(34px,5.4vw,68px)/1.25 var(--jb-serif);margin:0 0 20px;letter-spacing:.02em;color:#f4ecd8;text-shadow:0 6px 40px #000}
.jb-invite__copy>p{max-width:36em;margin:0 auto;font:16px/2 var(--sans);color:var(--shell-intro);word-break:keep-all}
.jb-invite__acts{list-style:none;margin:clamp(34px,5vw,56px) auto;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#ffffff14;border:1px solid #ffffff14;max-width:820px}
.jb-invite__acts li{display:grid;gap:8px;justify-items:center;padding:18px 8px;background:#121816d9}
.jb-invite__acts b{font:400 32px/1 var(--jb-hanja);color:#ead8b0}
.jb-invite__acts span{font:500 12px/1.4 var(--sans);color:var(--shell-quiet);word-break:keep-all}
.jb-invite__copy.is-in .jb-invite__acts li{animation:jb-ink .9s var(--jb-ease) both;animation-delay:calc(var(--i)*.08s)}
.jb-peek{display:inline-grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:left;text-decoration:none;color:#f1e9d6;
 padding:16px 22px;border:1px solid #c5a77966;background:#1a221fcc;transition:border-color .3s,translate .4s var(--jb-ease)}
.jb-peek:hover{border-color:var(--jb-gold);translate:0 -2px}
.jb-peek small{display:block;font:600 11px/1.2 var(--sans);letter-spacing:.3em;color:var(--jb-gold);margin-bottom:6px}
.jb-peek__seal{font:400 16px/1.05 var(--jb-hanja);color:#f6eedb;background:var(--jb-red);padding:7px 6px;writing-mode:vertical-rl;rotate:-4deg}

/* ───── 점방 막 공통 ───── */
.jb-fate-host{background:#141a18;color:var(--shell-text);position:relative}
.jb-fate{position:relative;padding:0 0 clamp(60px,8vw,120px)}
.jb-act{position:relative;padding:clamp(54px,8vw,120px) var(--gutter,20px) 0;scroll-margin-top:calc(var(--head-h,64px) + 8px)}
.jb-act__ghost{position:absolute;top:clamp(10px,3vw,40px);right:max(var(--gutter,20px),calc(50% - 640px));font:400 clamp(120px,22vw,320px)/1 var(--jb-hanja);color:#ffffff08;pointer-events:none;user-select:none}
.jb-act__art,.jb-act__sheet{width:min(1040px,100%);margin-inline:auto;position:relative}
.jb-act__sheet{background-color:var(--jb-paper);background-image:var(--paper-grain,none);background-size:320px 320px;color:var(--jb-ink);
 padding:clamp(28px,4.4vw,60px) clamp(20px,4.6vw,64px) clamp(26px,3.6vw,44px);box-shadow:0 30px 80px -30px #000c,0 0 0 1px #00000014;
 border-top:3px solid var(--jb-red)}
.jb-act__head{display:flex;align-items:center;gap:16px;margin:0 0 clamp(18px,2.6vw,28px)}
.jb-han{display:grid;place-items:center;width:clamp(52px,6vw,66px);aspect-ratio:1;flex:none;font:400 clamp(30px,3.6vw,40px)/1 var(--jb-hanja);color:#f6eedb;background:var(--jb-red);
 box-shadow:inset 0 0 0 3px #f6eedb22,0 8px 20px -8px #974d3a;rotate:-3deg}
.jb-act__head h2{margin:0;font:400 clamp(22px,2.6vw,30px)/1.3 var(--jb-serif);letter-spacing:.06em;color:var(--jb-ink)}
.jb-say{margin:0 0 clamp(22px,3vw,34px);font:400 clamp(24px,3.1vw,38px)/1.62 var(--jb-serif);color:#1f2622;word-break:keep-all;letter-spacing:-.005em}
.jb-w{display:inline-block;white-space:nowrap}
.jb-ch{display:inline-block}
.jb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;margin:0 0 22px}
.jb-card{background:#fffcf4cc;border:1px solid #29322c17;padding:18px 20px 16px}
.jb-card h4{margin:0 0 8px;font:600 16px/1.45 var(--serif);color:var(--jb-ink);word-break:keep-all}
.jb-card p{margin:0;font:15px/1.85 var(--sans);color:#3c4741;word-break:keep-all}
.jb-why{border-top:1px dashed #29322c33;padding-top:12px;margin-top:6px}
.jb-why summary{cursor:pointer;font:600 14px/1.6 var(--serif);color:var(--jb-red);list-style:none;display:inline-flex;align-items:center;gap:8px}
.jb-why summary::-webkit-details-marker{display:none}
.jb-why summary::before{content:'問';font:400 15px/1 var(--jb-hanja);display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;rotate:-4deg}
.jb-why summary::after{content:'＋';font-size:12px;opacity:.6}
.jb-why[open] summary::after{content:'－'}
.jb-why ul{margin:12px 0 4px;padding-left:20px;display:grid;gap:6px}
.jb-why li{font:14px/1.8 var(--sans);color:var(--jb-soft);word-break:keep-all}

/* 막 등장: 떠오름 + 먹 번짐. 관주의 한 마디는 글자마다 번진다. 카드는 .16s 간격으로. */
@keyframes jb-ink{0%{opacity:0;translate:0 26px;filter:blur(10px)}60%{filter:blur(1px)}100%{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes jb-char{0%{opacity:0;filter:blur(8px);scale:1.3;color:#000}100%{opacity:1;filter:blur(0);scale:1}}
.jb-act:not(.is-in) .jb-act__sheet,.jb-act:not(.is-in) .jb-act__art{opacity:0}
.jb-act.is-in .jb-act__art{animation:jb-ink 1.1s var(--jb-ease) both}
.jb-act.is-in .jb-act__sheet{animation:jb-ink 1s var(--jb-ease) .12s both}
.jb-act.is-in .jb-ch{animation:jb-char .7s var(--jb-ease) both;animation-delay:calc(.45s + var(--c)*min(.035s,1.6s/var(--len,40)))}
.jb-act:not(.is-in) .jb-ch{opacity:0}
.jb-act.is-in .jb-card,.jb-act.is-in .jb-job,.jb-act.is-in .jb-sect,.jb-act.is-in .jb-times li,.jb-act.is-in .jb-words li{animation:jb-ink .9s var(--jb-ease) both;animation-delay:calc(1.4s + var(--i,0)*.16s)}
.jb-act.is-in .jb-act__ghost{animation:jb-ghost 2.4s var(--jb-ease) both}
@keyframes jb-ghost{0%{opacity:0;filter:blur(20px);scale:.9}100%{opacity:1;filter:blur(0);scale:1}}

/* 머리 그림 판 */
.jb-act__art{margin-bottom:-2px}
.jb-plate{position:relative;aspect-ratio:21/8;overflow:hidden;box-shadow:0 30px 80px -30px #000c}
.jb-plate img{width:100%;height:100%;object-fit:cover;display:block;animation:jb-breathe 6.5s ease-in-out infinite alternate}
.jb-plate::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#141a1866)}

/* 막 건너가기(넓은 화면만) */
.jb-rail{position:fixed;right:14px;top:50%;translate:0 -50%;z-index:20;display:none}
.jb-rail ol{list-style:none;margin:0;padding:8px 6px;display:grid;gap:2px;background:#141a18cc;border:1px solid #ffffff14;backdrop-filter:blur(6px)}
.jb-rail a{display:flex;align-items:center;gap:8px;text-decoration:none;color:#9aa596;padding:4px 6px}
.jb-rail b{font:400 17px/1 var(--jb-hanja);width:20px;text-align:center}
.jb-rail span{font:500 11px/1 var(--sans);max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--jb-ease)}
.jb-rail:hover span{max-width:160px}
.jb-rail a[aria-current]{color:#f1d9a8}
.jb-rail a[aria-current] b{color:#f6eedb;text-shadow:0 0 12px #c5a779}
@media(min-width:1180px){.jb-rail{display:block}}

/* ───── 序 산문 ───── */
.jb-scroll{position:relative;width:min(860px,100%);margin:0 auto -18px;z-index:2}
.jb-scroll picture,.jb-scroll img{display:block;width:100%;height:auto}
.jb-scroll img{filter:drop-shadow(0 20px 30px #000a)}
.jb-scroll__text{position:absolute;inset:14% 18% 16%;display:grid;place-content:center;justify-items:center;gap:6px;color:#2b2a24}
.jb-scroll__text b{font:400 clamp(40px,7vw,88px)/1 var(--jb-hanja);letter-spacing:.2em;padding-left:.2em}
.jb-scroll__text small{font:500 clamp(12px,1.4vw,16px)/1 var(--serif);letter-spacing:.3em;color:#6b4a36}
.jb-act--gate.is-in .jb-scroll img{animation:jb-unroll 1.4s var(--jb-ease) both}
@keyframes jb-unroll{0%{clip-path:inset(0 46% 0 46%)}100%{clip-path:inset(0 0 0 0)}}
.jb-act--gate.is-in .jb-scroll__text{animation:jb-ink 1.2s var(--jb-ease) .9s both}

/* ───── 壹 점방에 들다: 관주의 손이 내려오고 산가지가 하나씩 떨어진 뒤 명식 판 ───── */
.jb-act--table .jb-act__art{width:min(1240px,100%)}
.jb-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0d1110;box-shadow:0 40px 90px -30px #000}
.jb-stage__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jb-act--table.is-in .jb-stage__bg img{animation:jb-push 6.5s var(--jb-ease) both}
@keyframes jb-push{0%{scale:1.14;filter:blur(6px) brightness(.4)}40%{filter:blur(0) brightness(.85)}100%{scale:1.02;filter:brightness(.9)}}
.jb-stage::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,transparent 30%,#0d1110cc 100%);pointer-events:none}
.jb-stage__lamp{position:absolute;left:50%;top:58%;width:60%;aspect-ratio:2;translate:-50% -50%;background:radial-gradient(closest-side,#ffcf7a33,transparent);z-index:1;animation:jb-flicker 6.5s ease-in-out infinite alternate}
@keyframes jb-flicker{0%,100%{opacity:.75}45%{opacity:1}60%{opacity:.85}}
.jb-stage__hands{position:absolute;left:50%;top:22%;width:52%;translate:-50% 0;z-index:3}
.jb-stage__hands img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 30px #000c)}
.jb-act--table:not(.is-in) .jb-stage__hands{opacity:0}
.jb-act--table.is-in .jb-stage__hands{animation:jb-hands 2.2s var(--jb-ease) .3s both}
@keyframes jb-hands{0%{opacity:0;translate:-50% -70%;filter:blur(8px)}100%{opacity:1;translate:-50% 0;filter:blur(0)}}
.jb-stage__bundle{position:absolute;right:6%;bottom:6%;width:22%;z-index:2;rotate:-6deg}
.jb-stage__bundle img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 16px #000b)}
.jb-act--table.is-in .jb-stage__bundle{animation:jb-ink 1.2s var(--jb-ease) .2s both}
.jb-sticks{list-style:none;margin:0;padding:0;position:absolute;left:50%;bottom:8%;translate:-50% 0;width:min(70%,640px);z-index:4;display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(4px,1vw,12px)}
.jb-sticks li{height:clamp(64px,10vw,130px);border-radius:3px;background:linear-gradient(90deg,#8a6638,#c9a36a 40%,#e0c08a 55%,#9c7442);box-shadow:0 10px 14px -6px #000c,inset 0 0 0 1px #00000033;
 display:grid;align-items:start;justify-items:center;padding-top:8px;rotate:calc((var(--k) - 3.5) * 1.4deg)}
.jb-sticks span{font:400 clamp(18px,2.6vw,34px)/1 var(--jb-hanja);color:#2a1d10;opacity:.88}
.jb-act--table:not(.is-in) .jb-sticks li{opacity:0}
.jb-act--table.is-in .jb-sticks li{animation:jb-drop .62s cubic-bezier(.3,.6,.4,1.25) both;animation-delay:calc(1.5s + var(--k)*.26s)}
@keyframes jb-drop{0%{opacity:0;translate:0 -180%;rotate:calc((var(--k) - 3.5) * 9deg)}70%{opacity:1}100%{opacity:1;translate:0 0}}
.jb-board{margin:0 0 22px}
.jb-board .ming-board{margin:0;background:#fffaf0aa;border:1px solid #29322c1a}
.jb-act--table:not(.is-in) .jb-board{opacity:0}
.jb-act--table.is-in .jb-board{animation:jb-bleed 1.6s var(--jb-ease) 3.4s both}
@keyframes jb-bleed{0%{opacity:0;filter:blur(14px) contrast(.6);scale:.97;clip-path:circle(8% at 50% 50%)}55%{filter:blur(3px)}100%{opacity:1;filter:blur(0);scale:1;clip-path:circle(120% at 50% 50%)}}
.jb-act--table .jb-act__sheet{margin-top:clamp(-120px,-8vw,-40px);z-index:5;width:min(1040px,calc(100% - 0px))}
.jb-act--table.is-in .jb-act__sheet{animation-delay:2.8s}
.jb-act--table.is-in .jb-ch{animation-delay:calc(3.2s + var(--c)*.03s)}
.jb-act--table.is-in .jb-card{animation-delay:calc(4.4s + var(--i)*.16s)}
.jb-cards--pillars{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* ───── 貳 일간 자연물 ───── */
.jb-nature{position:relative;display:grid;justify-items:center;margin-bottom:-60px;z-index:2}
.jb-nature__art{width:clamp(200px,28vw,320px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #efe8d6,0 0 0 7px #974d3a55,0 30px 60px -20px #000}
.jb-nature__art img{width:100%;height:100%;object-fit:cover;animation:jb-breathe 6.5s ease-in-out infinite alternate}
.jb-nature__gan{position:absolute;left:calc(50% + clamp(80px,11vw,130px));bottom:30px;font:400 clamp(60px,8vw,110px)/1 var(--jb-hanja);color:#f6eedb;text-shadow:0 6px 30px #000}
.jb-act--self .jb-act__art,.jb-act--qi .jb-act__art{z-index:6}
.jb-act--self .jb-act__sheet{padding-top:clamp(80px,9vw,110px)}

/* ───── 參 기질 기운 ───── */
.jb-qi{position:relative;display:grid;justify-items:center;margin-bottom:-70px;z-index:2}
.jb-qi__art{width:clamp(220px,28vw,320px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#fffaf0,#efe8d6 70%);box-shadow:0 0 0 1px #c5a77966,0 30px 60px -20px #000}
.jb-qi__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:jb-spin 60s linear infinite}
@keyframes jb-spin{to{rotate:360deg}}
.jb-qi__name{position:absolute;top:50%;left:50%;translate:-50% -60%;display:grid;justify-items:center;gap:6px;color:#22303a}
.jb-qi__name b{font:400 clamp(46px,6vw,74px)/1 var(--jb-hanja);letter-spacing:.08em}
.jb-qi__name small{font:600 13px/1 var(--serif);letter-spacing:.4em;padding-left:.4em}
.jb-qi__fit{position:absolute;bottom:-4px;margin:0;font:500 13px/1 var(--serif);letter-spacing:.14em;color:#f6eedb;background:var(--jb-red);padding:10px 16px;box-shadow:0 8px 20px -8px #000}
.jb-qi__arms{position:absolute;bottom:-46px;margin:0;display:flex;gap:6px}
.jb-qi__arms span{font:600 12px/1 var(--sans);padding:6px 10px;border:1px solid #c5a77999;color:#f0e2c2;background:#141a18cc}
.jb-act--qi .jb-act__sheet{padding-top:clamp(100px,10vw,130px)}
.jb-act--qi.is-in .jb-qi__art{animation:jb-ink 1.2s var(--jb-ease) both}

/* ───── 肆 생업·문파 ───── */
.jb-sub{display:flex;align-items:center;gap:12px;margin:clamp(26px,3.4vw,40px) 0 16px;font:400 clamp(20px,2.2vw,26px)/1.3 var(--jb-serif);color:var(--jb-ink)}
.jb-sub b{font:400 22px/1 var(--jb-hanja);color:#f6eedb;background:var(--jb-ink);width:36px;height:36px;display:grid;place-items:center}
.jb-sub--quiet b{background:#7d7f74}
.jb-jobs,.jb-sects{display:grid;gap:14px}
.jb-swipe{display:none}
@keyframes jb-nudge{0%,100%{transform:none}50%{transform:translateX(6px)}}
.jb-job,.jb-sect{display:grid;grid-template-columns:clamp(110px,16vw,170px) 1fr;background:#fffcf4;border:1px solid #29322c1c;overflow:hidden}
.jb-job:first-child{border-color:var(--jb-red);box-shadow:0 14px 30px -18px #974d3a}
.jb-job__art,.jb-sect__art{position:relative;overflow:hidden;background:#1a211e}
.jb-job__art picture,.jb-sect__art picture{position:absolute;inset:0}
.jb-job__art img,.jb-sect__art img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55;filter:saturate(.7)}
.jb-sect__art img{opacity:.9;filter:none}
.jb-job__mark{position:absolute;inset:0;display:grid;place-items:center;color:#f3e6c6}
.jb-job__mark svg{width:78%;height:auto;filter:drop-shadow(0 2px 6px #000a);position:relative}
.jb-job__mark i{position:absolute;font:400 clamp(70px,10vw,110px)/1 var(--jb-hanja);font-style:normal;color:#ffffff14}
.jb-job__body,.jb-sect__body{padding:18px clamp(16px,2.4vw,26px)}
.jb-job__rank,.jb-sect__type{margin:0 0 6px;font:600 11px/1.4 var(--sans);letter-spacing:.2em;color:var(--jb-red)}
.jb-job h4,.jb-sect h4{margin:0 0 8px;font:400 clamp(21px,2.3vw,26px)/1.35 var(--jb-serif);color:var(--jb-ink);word-break:keep-all}
.jb-job h4 small{display:block;font:500 14px/1.6 var(--sans);color:var(--jb-soft);margin-top:2px}
.jb-job p,.jb-sect p{margin:0 0 6px;font:15px/1.8 var(--sans);color:#3c4741;word-break:keep-all}
.jb-job__eli5,.jb-sect__eli5{font-weight:600!important;color:#2c3530!important}
.jb-job__martial b,.jb-sect__modern b{font:600 12px/1 var(--serif);color:var(--jb-red);margin-right:4px;letter-spacing:.06em}
.jb-job__why,.jb-sect__why{font-size:14px!important;color:var(--jb-soft)!important;border-top:1px dashed #29322c26;padding-top:8px;margin-top:8px!important}
.jb-sect__virtue{font-family:var(--serif)!important;color:#5a3e2c!important}
.jb-sects{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.jb-sect{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.jb-sect__art{aspect-ratio:16/9}
.jb-sects--avoid .jb-sect{grid-template-columns:clamp(110px,16vw,170px) 1fr;grid-template-rows:none;background:#ece6d6;opacity:.92}
.jb-sects--avoid .jb-sect__art{aspect-ratio:auto}
.jb-sects--avoid .jb-sect__art img{filter:grayscale(1);opacity:.6}

/* ───── 伍 때를 읽다 ───── */
.jb-times{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px}
.jb-times li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:#fffcf4cc;border:1px solid #29322c17;padding:16px 18px}
.jb-times__han{font:400 30px/1 var(--jb-hanja);color:var(--jb-red);width:42px;height:42px;display:grid;place-items:center;border:1px solid #974d3a55}
.jb-times strong{display:block;font:600 15px/1.5 var(--serif);color:var(--jb-ink);margin-bottom:4px}
.jb-times li>span>span{font:15px/1.8 var(--sans);color:#3c4741;word-break:keep-all}
.jb-flow{margin:0 calc(-1 * clamp(8px,2vw,24px)) 20px}
.jb-flow .reading-chapter{margin:0}

/* ───── 拾 당부·신표 ───── */
.jb-words{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px;counter-reset:w}
.jb-words li{position:relative;padding:18px 22px 18px 66px;background:#fffcf4cc;border:1px solid #29322c17}
.jb-words li::before{counter-increment:w;content:counter(w,cjk-ideographic);position:absolute;left:18px;top:16px;font:400 30px/1 var(--jb-hanja);color:var(--jb-red)}
.jb-words b{display:block;font:600 14px/1.4 var(--serif);color:var(--jb-soft);margin-bottom:4px;letter-spacing:.1em}
.jb-words p{margin:0;font:400 clamp(17px,1.8vw,20px)/1.8 var(--jb-serif);color:#1f2622;word-break:keep-all}
.jb-keep{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin:10px 0 30px}
.jb-sinpyo{position:relative;margin:0;aspect-ratio:2/3;box-shadow:0 30px 60px -24px #000d}
.jb-sinpyo__paper,.jb-sinpyo__paper picture{position:absolute;inset:0}
.jb-sinpyo__paper img{width:100%;height:100%;object-fit:cover;display:block}
.jb-sinpyo__sheet{position:absolute;left:21%;right:20%;top:12%;bottom:13%;display:grid;grid-template-rows:auto auto auto 1fr auto;justify-items:center;text-align:center;color:#2a241c}
.jb-sinpyo__eyebrow{margin:0 0 6%;font:600 clamp(9px,1vw,11px)/1 var(--sans);letter-spacing:.3em;color:#7a5a3e}
.jb-sinpyo__day{margin:0;font:400 clamp(58px,7.4vw,96px)/1.05 var(--jb-hanja);letter-spacing:.06em;white-space:nowrap;color:#1e1a14}
.jb-sinpyo__dayk{margin:6px 0 0;font:600 clamp(11px,1.2vw,13px)/1.4 var(--serif);color:#5a4532;letter-spacing:.12em}
.jb-sinpyo__list{margin:8% 0 0;display:grid;gap:8px;align-content:start;width:100%}
.jb-sinpyo__list div{display:grid;gap:2px;border-top:1px solid #5a453233;padding-top:6px}
.jb-sinpyo__list dt{font:600 clamp(9px,.9vw,10px)/1 var(--sans);letter-spacing:.24em;color:#8a6a4a}
.jb-sinpyo__list dd{margin:0;font:400 clamp(14px,1.6vw,18px)/1.35 var(--jb-serif);color:#221d16;word-break:keep-all}
.jb-sinpyo__list dd b{font:400 1.2em/1 var(--jb-hanja)}
.jb-sinpyo__list dd small{display:block;font:500 clamp(9px,.9vw,11px)/1.4 var(--sans);color:#7a6550}
.jb-sinpyo__to{align-self:end;margin:0 0 4px;font:500 clamp(11px,1.2vw,13px)/1 var(--serif);color:#5a4532;letter-spacing:.1em}
.jb-sinpyo__seal{position:absolute;right:-17%;bottom:-6%;display:grid;justify-items:center;gap:2px;padding:7px 8px 6px;background:#a8402e;color:#f9e9dc;rotate:-8deg;box-shadow:0 0 0 2px #a8402e,inset 0 0 0 1px #f9e9dc88;opacity:0;scale:2.2}
.jb-sinpyo__seal b{font:400 clamp(18px,2vw,24px)/1 var(--jb-hanja);writing-mode:vertical-rl}
.jb-sinpyo__seal small{font:600 9px/1 var(--sans);letter-spacing:.1em}
.jb-sinpyo.is-sealed .jb-sinpyo__seal{animation:jb-seal .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes jb-seal{0%{opacity:0;scale:2.2}100%{opacity:.95;scale:1}}
.jb-sinpyo figcaption{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font:12px/1.4 var(--sans);color:var(--jb-soft)}
.jb-act--word.is-in .jb-sinpyo__day{animation:jb-ink 1.4s var(--jb-ease) .8s both}
.jb-share{display:grid;gap:12px;align-content:start}
.jb-share__head{margin:0;font:400 clamp(22px,2.4vw,28px)/1.4 var(--jb-serif);color:var(--jb-ink)}
.jb-share__note{margin:0;font:14px/1.8 var(--sans);color:var(--jb-soft)}
.jb-share__field{display:grid;gap:6px}
.jb-share__field span{font:600 12px/1 var(--sans);letter-spacing:.2em;color:var(--jb-soft)}
.jb-share__url{width:100%;padding:12px 14px;font:14px/1.4 var(--sans);border:1px solid #29322c33;background:#fffcf4;color:var(--jb-ink);border-radius:0}
.jb-share__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.jb-share .life-primary{background:var(--brush-swash-ink) center/100% 100% no-repeat!important;color:#f3ecdb;min-width:240px;justify-content:space-between}
.jb-share .life-primary.is-done{background:var(--brush-swash-red) center/100% 100% no-repeat!important}
.jb-share__again{font:600 14px/1 var(--sans);color:var(--jb-red);text-underline-offset:4px}
.jb-restart{justify-self:start;background:none;border:0;padding:6px 0;font:500 14px/1 var(--sans);color:var(--jb-soft);cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* ───── 좁은 화면(390px 기준) ───── */
@media(max-width:700px){
 .jb-invite{padding:70px 16px;min-height:0}
 .jb-invite__acts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .jb-invite__acts li{grid-template-columns:auto 1fr;justify-items:start;align-items:center;padding:12px 14px;gap:12px}
 .jb-invite__acts b{font-size:24px}
 .jb-invite__copy>p{font-size:15px}
 .jb-peek{grid-template-columns:auto 1fr;padding:14px 16px}
 .jb-peek>span:last-child{display:none}
 .jb-act{padding:44px 12px 0}
 .jb-act__sheet{padding:26px 18px 22px}
 .jb-act__head{gap:12px}
 .jb-say{font-size:23px;line-height:1.6}
 .jb-plate{aspect-ratio:16/10}
 .jb-scroll{margin-bottom:-6px}
 .jb-stage{aspect-ratio:9/13}
 .jb-stage__hands{width:96%;top:16%}
 .jb-stage__bundle{width:44%;right:-4%;bottom:30%}
 .jb-sticks{width:92%;bottom:14%;gap:5px}
 .jb-act--table .jb-act__sheet{margin-top:-70px}
 .jb-job{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .jb-job__art{aspect-ratio:16/7}
 /* 생업·문파: 옆으로 넘기는 한 줄(다음 카드가 살짝 보이게) */
 .jb-swipe{display:flex;align-items:center;gap:10px;margin:-6px 0 10px;font:500 13px/1 var(--sans);color:var(--jb-soft)}
 .jb-swipe b{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--jb-red);padding:5px 8px;border:1px solid #974d3a55}
 .jb-swipe i{font-style:normal;margin-left:auto;font-size:18px;color:var(--jb-red);animation:jb-nudge 1.6s var(--jb-ease) infinite}
 [data-swipe]{display:grid;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:86%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 2px;margin:0 -18px;padding:0 18px 10px;scrollbar-width:none}
 [data-swipe]::-webkit-scrollbar{display:none}
 [data-swipe]>*{scroll-snap-align:start}
 .jb-job__mark svg{width:auto;height:84%}
 .jb-invite__acts li{text-align:left}
 .jb-job__body,.jb-sect__body{padding:14px 14px}
 .jb-job h4,.jb-sect h4{font-size:20px}
 .jb-sects--avoid .jb-sect{grid-template-columns:92px 1fr}
 .jb-keep{grid-template-columns:1fr;gap:50px}
 .jb-sinpyo{width:min(340px,100%);justify-self:center}
 .jb-words li{padding:16px 16px 16px 56px}
 .jb-act--qi .jb-act__sheet{padding-top:132px}
 .jb-words li::before{left:14px}
 .jb-flow{margin:0 -10px 20px}
}
.more-links [hidden]{display:none!important}
/* 산수 첫 화면처럼 전폭으로(가로 스크롤은 body에서 막는다) */
.jb-invite,.jb-fate-host{width:100vw;margin-left:calc(50% - 50vw)}
html.is-jeombang .vrail{display:none}
@media(min-width:900px){.jb-sects:not(.jb-sects--avoid){grid-template-columns:repeat(3,minmax(0,1fr))}.jb-times{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}.jb-times li{grid-template-columns:1fr;gap:10px}}

/* 관주의 말에 이어지는 본문(쉽게 풀어 쓴 말) — 따로 상자 없이 */
.jb-more{margin:-8px 0 clamp(24px,3vw,34px);font:17px/2 var(--sans);color:#34403a;word-break:keep-all;max-width:62ch}
.jb-act.is-in .jb-more{animation:jb-ink .9s var(--jb-ease) 1.1s both}
.jb-act--table.is-in .jb-more{animation-delay:3.6s}
.jb-sub small{font:500 13px/1 var(--sans);color:var(--jb-soft);margin-left:6px;letter-spacing:0}

/* 생업·문파: 하나만 권하고 「다른 추천」 */
.jb-pick{display:grid;gap:12px;margin-bottom:34px}
.jb-pick__one[hidden]{display:none}
.jb-reroll{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid #29322c33;background:#fffaf0;color:var(--jb-ink);font:600 14px/1 var(--sans);cursor:pointer;transition:background .2s,border-color .2s}
.jb-reroll:hover{background:#f3ead6;border-color:var(--jb-red)}
.jb-reroll span{font-size:18px;color:var(--jb-red);transition:rotate .5s var(--jb-ease)}
.jb-reroll:active span{rotate:-200deg}
.jb-reroll small{font:500 12px/1 var(--sans);color:var(--jb-soft)}

/* 伍막: 그래프가 먼저 */
.jb-act--timing .jb-flow{margin:0 0 clamp(26px,3vw,36px)}

/* 장별 풀이 — 막 안에서 두루마리가 아래로 펼쳐진다 */
.jb-unroll{margin:0 0 16px;position:relative}
.jb-unroll summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 22px;background:linear-gradient(#2b2219,#1c1611);color:#f3e6c8;box-shadow:0 10px 22px -12px #000a;position:relative}
.jb-unroll summary::-webkit-details-marker{display:none}
.jb-unroll summary::before,.jb-unroll summary::after{content:"";position:absolute;top:50%;width:14px;height:calc(100% + 10px);translate:0 -50%;background:linear-gradient(90deg,#6d5330,#c9a36a 45%,#7a5c33);border-radius:3px}
.jb-unroll summary::before{left:-7px}.jb-unroll summary::after{right:-7px}
.jb-unroll__title{display:flex;align-items:baseline;gap:10px;font:400 21px/1.3 var(--jb-serif)}
.jb-unroll__title b{font:400 26px/1 var(--jb-hanja);color:#e6b36a}
.jb-unroll__hint{margin-left:auto;font:600 12px/1 var(--sans);letter-spacing:.2em;color:#d9c49c}
.jb-unroll__hint::after{content:" ▾";display:inline-block;transition:rotate .4s}
.jb-unroll[open] .jb-unroll__hint::after{rotate:180deg}
.jb-unroll[open] .jb-unroll__hint{font-size:0}.jb-unroll[open] .jb-unroll__hint::after{font-size:12px;content:"접기 ▴";rotate:0deg}
.jb-unroll__rod{display:none}
.jb-unroll__paper{margin:0 10px;padding:clamp(22px,3vw,36px) clamp(20px,4vw,52px);background-color:#f7efdc;background-image:var(--paper-grain,none);background-size:320px;border-inline:10px solid #2c3b52;border-image:linear-gradient(#34465f,#22324a) 1;box-shadow:inset 0 14px 18px -14px #0005,inset 0 -14px 18px -14px #0005}
.jb-unroll__paper p{margin:0 0 1.1em;font:17px/2.05 var(--sans);color:#2f3a34;word-break:keep-all;max-width:64ch}
.jb-unroll__paper p:first-child::first-letter{font:400 2.1em/1 var(--jb-serif);color:var(--jb-red)}
.jb-unroll__paper p:last-child{margin-bottom:0}
.jb-unroll__rod--end{display:block;height:16px;margin:0 -4px;background:linear-gradient(#7a5c33,#d6b277 45%,#6a4f2c);border-radius:8px;box-shadow:0 8px 14px -6px #000a}
.jb-unroll[open] .jb-unroll__paper{animation:jb-unroll .9s cubic-bezier(.2,.7,.2,1) both;transform-origin:top}
.jb-unroll[open] .jb-unroll__paper p{animation:jb-ink .8s var(--jb-ease) both;animation-delay:calc(.35s + var(--pi,0) * .12s)}
@keyframes jb-unroll{0%{clip-path:inset(0 0 100% 0);opacity:.6}100%{clip-path:inset(0 0 0 0);opacity:1}}
@media (max-width:700px){
 .jb-more{font-size:16px;line-height:1.95}
 .jb-unroll summary{padding:14px 16px}.jb-unroll__title{font-size:18px}
 .jb-unroll__paper{padding:20px 18px;border-inline-width:6px}
 .jb-unroll__paper p{font-size:16px}
}

/* 한자 읽기·뜻 — 큰 한자 아래 작은 한글 */
.jb-han{display:flex;flex-direction:column;gap:3px;height:auto;aspect-ratio:auto;min-height:clamp(52px,6vw,66px);padding:6px 4px}
.jb-han small{font:600 10px/1 var(--sans);letter-spacing:.04em;color:#f6eedbcc;white-space:nowrap}
.jb-scroll__text .jb-gloss{font:600 clamp(12px,1.3vw,15px)/1 var(--sans);letter-spacing:.18em;color:#8a3b2a;margin-top:-2px}
.jb-qi__name .jb-gloss{font:500 12px/1.3 var(--sans);font-style:normal;color:#4b5a66;letter-spacing:.04em}
.jb-times__han{flex-direction:column;gap:2px;height:auto;min-height:42px;padding:4px 2px}
.jb-times__han small{font:600 9.5px/1 var(--sans);color:#974d3a;white-space:nowrap;letter-spacing:0}
.jb-sticks small{display:block;margin-top:4px;font:700 clamp(10px,1.1vw,13px)/1 var(--sans);color:#3b2a16;opacity:.75}

/* 壹막: 다섯 기운 카드는 한 줄 전체(4+1로 홀로 남지 않게), 산가지는 종이 띠에 가리지 않게 위로 */
.jb-cards--pillars{grid-template-columns:repeat(4,minmax(0,1fr))}
.jb-cards--pillars .jb-card:nth-child(5){grid-column:1/-1}
.jb-sticks{bottom:max(17%,calc(clamp(40px,8vw,120px) + 2%))}
@media (max-width:700px){
 .jb-cards--pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
 .jb-sticks{bottom:20%}
}
/* 參막: 기질 그림은 먹 테두리 족자 — 원으로 오려 내지 않고 온전히 */
.jb-qi{margin-bottom:-130px}
.jb-qi__art{width:clamp(250px,25vw,320px);aspect-ratio:2/3;border-radius:2px;background:#fbf6ea;box-shadow:0 0 0 1px #c5a77955,0 40px 70px -24px #000,0 0 0 8px #1a1f1d,0 0 0 9px #c5a77966}
.jb-qi__art img{object-fit:contain;object-position:50% 50%;animation:jb-qi-breathe 9s ease-in-out infinite alternate}
@keyframes jb-qi-breathe{0%{scale:1;filter:none}100%{scale:1.035;filter:drop-shadow(0 0 6px #6f86a055)}}
.jb-qi__name{translate:-50% -64%}
.jb-qi__fit{bottom:58px}
.jb-qi__arms{bottom:18px}
.jb-act--qi .jb-act__sheet{padding-top:clamp(160px,13vw,190px)}
@media (max-width:700px){
 .jb-qi__art{width:230px}
 .jb-qi{margin-bottom:-110px}
 .jb-act--qi .jb-act__sheet{padding-top:150px}
}

/* 관주: 팔만이 아니라 사람으로(m_i1 b7, v7 화풍) — 탁자 뒤에 앉아 산가지를 쥔 모습, 아래는 탁자 그늘로 스민다 */
.jb-stage__guanju{top:auto;bottom:22%;width:30%;-webkit-mask-image:linear-gradient(#000 78%,transparent 99%);mask-image:linear-gradient(#000 78%,transparent 99%)}
.jb-stage__guanju img{filter:drop-shadow(0 20px 40px #000b) saturate(.92)}
@media (max-width:700px){ .jb-stage__guanju{width:78%;top:auto;bottom:24%} }

/* 붓질 단추: 손으로 그린 듯한 기하 붓 대신 실제 붓 자국(m_i1 b7) */
.jb{--brush-swash-ink:url("assets/jeombang/brush-swash-2.webp");--brush-swash-red:url("assets/jeombang/brush-swash-red.webp");--brush-swash-gold:url("assets/jeombang/brush-swash-3.webp")}
.jb .life-primary,.jb .button.light{color:#f6eedb!important;text-shadow:0 1px 2px #0008;padding-inline:34px}
.jb .life-primary:hover{filter:brightness(1.25)}

/* 장별 풀이 두루마리: 실제 표구 종이와 축 */
.jb-unroll__paper{background:url("assets/jeombang/scroll-paper-tile.webp") center top/100% auto repeat-y;border:0;border-image:none;padding-inline:clamp(40px,8%,80px)}
.jb-unroll__rod--end{height:22px;background:url("assets/jeombang/scroll-rod.webp") center/100% 100% no-repeat;box-shadow:none;border-radius:0;margin:-4px -14px 0}
@media (max-width:700px){ .jb-unroll__paper{padding-inline:34px} }
.jb-act--table.is-in .jb-stage__guanju{animation:jb-guanju 2.4s var(--jb-ease) .2s both}
@keyframes jb-guanju{0%{opacity:0;translate:-50% 6%;filter:blur(10px)}100%{opacity:1;translate:-50% 0;filter:blur(0)}}
/* 카드가 넷이면 2×2, 다섯이면 마지막이 한 줄 — 하나만 홀로 남지 않게 */
.jb-cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.jb-cards:has(> :nth-child(5):last-child) > :last-child{grid-column:1/-1}
@media (max-width:700px){ .jb-cards:has(> :nth-child(4):last-child){grid-template-columns:1fr} }
/* 표구 비단 띠(종이 폭의 약 8.5%) 안쪽으로 글을 들인다 */
.jb-unroll__paper{padding-inline:calc(9% + 30px)}
@media (max-width:700px){ .jb-unroll__paper{padding-inline:calc(9% + 14px)} }

/* 산가지: 넓적한 대나무 패(m_i1 b8) 세 결을 돌려 쓰고, 패 머리 아래에 글자를 먹으로 */
.jb-sticks{width:min(60%,560px);gap:clamp(6px,1.2vw,14px)}
.jb-sticks li{height:auto;aspect-ratio:1/3.7;border-radius:0;box-shadow:none;background:url("assets/jeombang/plank-1.webp") center/100% 100% no-repeat;filter:drop-shadow(0 12px 10px #000c);padding-top:58%;align-content:start;gap:2px}
.jb-sticks li:nth-child(3n+2){background-image:url("assets/jeombang/plank-2.webp")}
.jb-sticks li:nth-child(3n){background-image:url("assets/jeombang/plank-3.webp")}
.jb-sticks span{font-size:clamp(17px,2.3vw,30px);color:#1c130a;opacity:.92;text-shadow:0 1px 0 #f2d9a855}
.jb-sticks small{color:#2b1d0f;opacity:.8}
@media (max-width:700px){ .jb-sticks{width:94%;gap:4px;bottom:19%} .jb-sticks span{font-size:17px} .jb-sticks small{font-size:10px} }
/* 붓 단추: 붓 그림을 위아래로 자르지 않는다 — 자르면 붓이 시작하는 왼쪽 끝이 뭉툭하게 잘려 보인다(2026-10-12 사용자 지적) */
.jb{--brush-swash-ink:url("assets/jeombang/brush-swash-1.webp");--brush-swash-gold:url("assets/jeombang/brush-swash-3.webp")}
.jb .life-primary,.jb .button.light{background-size:100% 100%!important;background-position:center!important;min-height:64px}
.jb .life-primary:hover{background-size:100% 108%!important}
/* 장별 풀이 머리 그림(이미 있는 chapter-art) — 펼친 종이 맨 위에 먹 번지듯 */
.jb-unroll__art{margin:0 0 clamp(18px,2.4vw,26px);aspect-ratio:21/8;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.jb-unroll__art img{display:block;width:100%;height:100%;object-fit:cover}
.jb-unroll[open] .jb-unroll__art{animation:jb-ink 1.1s var(--jb-ease) .2s both}
.jb-unroll__art + p::first-letter{font:400 2.1em/1 var(--jb-serif);color:var(--jb-red)}

/* 무인 생업: 사주로 고른 문파 무공 한 덩이 */
.jb-art{margin:12px 0;padding:14px 16px 14px 18px;background:linear-gradient(90deg,#f3e7cd,#fbf5e8);border-left:3px solid var(--jb-red)}
.jb-art__head{margin:0 0 6px;font:600 12px/1 var(--sans);letter-spacing:.2em;color:var(--jb-red)}
.jb-art__name{margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.jb-art__name strong{font:400 22px/1.3 var(--jb-serif);color:var(--jb-ink)}
.jb-art__name small{font:500 13px/1.4 var(--sans);color:var(--jb-soft)}
.jb-art__eli5{margin:0 0 6px;font:600 14px/1.8 var(--sans);color:#3a2e22}
.jb-art__why{margin:0;font:14px/1.85 var(--sans);color:#4a5650;word-break:keep-all}
.jb-art__name em{font:500 13px/1.4 var(--sans);font-style:normal;color:#7a5a3a}
.jb-art__prov{margin-left:auto;font:600 11px/1 var(--sans);font-style:normal;letter-spacing:.06em;color:var(--jb-red);border:1px solid #974d3a55;padding:4px 7px}

/* 마감 검사(scripts/visual-qa.py, 2026-10-12): 글자는 11px 아래로 내리지 않고, 휴대폰에서 누르는 자리는 44px */
.jb-han small{font-size:11px}
.jb-times__han small{font-size:11px}
.jb-sinpyo__eyebrow{font-size:clamp(11px,1vw,12px)}
.jb-sinpyo__eyebrow small{font-size:11px}
.jb-sinpyo__list dt{font-size:11px}
.jb-sinpyo__seal small{font-size:11px}
.jb-why summary{min-height:44px}
@media (max-width:700px){ .jb-reroll{min-height:44px} .jb-unroll summary{min-height:52px} }
.jb-sinpyo__list dd small{font-size:11px}
.jb .ming-pillar small{font-size:11px}
@media (max-width:700px){ .jb-share__again,.jb-restart{display:inline-flex;align-items:center;min-height:44px} }
/* 「본문으로 이동」은 키보드 초점일 때만 — 화면 캡처·스크롤 중에 흰 상자로 비치던 것 막음 */
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;white-space:nowrap}

/* 작은 움직임의 박자(2026-10-12, transitions.dev 움직임 기준을 수묵 결로) — 여닫기는 열 때 느긋이·닫을 때 재게,
   바꿔 넣기는 살짝 흐렸다 맺히게, 큰 판은 부드럽게 멈추게. 소스: vendor/jakubantalik-transitions-dev(참고만) */
.jb{--mo-quick:150ms;--mo-fast:250ms;--mo-medium:350ms;--mo-slow:400ms;--mo-emph:500ms;--mo-out:cubic-bezier(.22,1,.36,1);--mo-pop:cubic-bezier(.34,1.36,.64,1)}
/* 다른 추천: 나가는 카드는 재게 흐려지고, 들어오는 카드는 먹이 맺히듯 */
.jb-pick__one.is-leaving{animation:jb-mo-leave var(--mo-quick) ease-in both}
.jb-pick__one.is-entering{animation:jb-mo-enter var(--mo-slow) var(--mo-out) both}
@keyframes jb-mo-leave{to{opacity:0;filter:blur(2px);translate:0 -4px}}
@keyframes jb-mo-enter{from{opacity:0;filter:blur(2px);translate:0 8px}to{opacity:1;filter:none;translate:0 0}}
.jb-reroll [data-reroll-at].is-pop{animation:jb-mo-pop var(--mo-emph) var(--mo-pop) both}
@keyframes jb-mo-pop{from{opacity:0;filter:blur(2px);scale:.8}to{opacity:1;filter:none;scale:1}}
/* 두루마리: 펼칠 때 400ms 부드럽게, 접을 때 350ms로 재게(닫는 쪽이 늘 빠르다) */
.jb-unroll[open] .jb-unroll__paper{animation:jb-unroll var(--mo-slow) var(--mo-out) both}
.jb-unroll.is-closing .jb-unroll__paper{animation:jb-unroll-close var(--mo-medium) var(--mo-out) both}
@keyframes jb-unroll-close{to{clip-path:inset(0 0 100% 0);opacity:.4}}
/* 왜 그렇게 보오: 판이 열리듯 */
.jb-why[open] > ul{animation:jb-mo-enter var(--mo-slow) var(--mo-out) both}
/* 막 길잡이: 지금 막 표시가 미끄러지듯 옮겨 감 */
.jb-rail a{transition:color var(--mo-fast) var(--mo-out),translate var(--mo-fast) var(--mo-out)}
.jb-rail a b{transition:color var(--mo-fast) var(--mo-out),text-shadow var(--mo-fast) var(--mo-out)}
.jb-rail a[aria-current]{translate:-4px 0}
/* 공유 주소 베낌: 붉은 붓으로 바뀌며 글자가 한 번 맺힘 */
.jb-share .life-primary.is-done{animation:jb-mo-pop var(--mo-emph) var(--mo-pop) both}

/* 생년월일·태어난 시는 숫자로 직접 적는다(달력·시계 고르개 대신, 2026-10-12 사용자 지시) */
.issue input.jb-typed{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text);border-radius:0;display:block;box-sizing:border-box;width:100%;min-width:0;height:48px;padding:12px 13px;font:16px/1.4 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.04em;transition:border-color .2s}
.issue input.jb-typed::placeholder{color:var(--shell-label-sub);opacity:.75}
.issue input.jb-typed:hover{border-color:var(--gold)}
.issue input.jb-typed:focus-visible{border-color:var(--em);outline:none}
.issue input.jb-typed[aria-invalid=true]{border-color:#c0634b}

/* 생업 문양: 붓 무대가 긋기 전엔 숨긴다(긋기가 끝나 is-drawn이 붙어야 보인다) */
.jb-job:not(.is-drawn):not(.is-drawing) .jb-job__mark svg{opacity:0}
/* 무대에서 카드 자리로 날아가는 문양 */
.jb-fly{position:fixed;z-index:2147482500;pointer-events:none;color:#f3e6c6;transform-origin:0 0;display:block}
.jb-fly svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 8px #000c)}
/* 때 카드 한자 칸: 풀이(위 · 자리)가 칸 밖으로 나가지 않게 칸이 글자에 맞춰 넓어진다 */
.jb-times__han{width:auto;min-width:46px;padding:6px 7px;box-sizing:border-box}

/* 점괘 그림 아래 풀이 글: 두 줄로 접히면 그림을 덮던 것을 그림 아래로 내린다 */
.jb-sinpyo{margin-bottom:68px}
.jb-sinpyo figcaption{bottom:auto;top:calc(100% + 14px);padding-inline:4px;font-size:13px}
/* 공유 주소: 화면이 좁아도 주소 전체가 보이게 줄을 바꾼다 */
.jb-share__url{display:block;box-sizing:border-box;resize:none;overflow:hidden;word-break:break-all;overflow-wrap:anywhere;font:13px/1.55 var(--sans);font-variant-numeric:tabular-nums}

/* 산문 카드 머리의 한자에 읽는 소리·뜻을 단다 */
.jb-head-han{display:inline-grid;gap:5px;justify-items:start}
.jb-head-han b{font:inherit;letter-spacing:inherit;color:inherit}
.jb-head-han small{font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--shell-label-sub)}

/* 카드 문양은 붓 무대와 같은 갈래 금빛으로(날아와 박힐 때 색이 바뀌지 않게) */
.jb-job__mark{color:var(--mark,#d8c89a)}

/* 산문 작은 글자 하한(2026-10-12 전수검사: 9~10px이던 것) */
.jb .awaken__eyebrow{font-size:11px}
.jb .issue__head .jb-head-han b{font-size:13px}
.jb .birth-row small,.jb .gender-choice small{font-size:12px}
.jb .entry-note{font-size:12px}
/* 무공의 결 카드: 그림(연기·물결)이 글자 뒤로 지나가도 읽히게 종이빛 테를 두른다 */
.jb-qi__name b,.jb-qi__name small,.jb-qi__name .jb-gloss{text-shadow:0 0 3px #fbf6ea,0 0 8px #fbf6ea,0 0 14px #fbf6eacc}
.jb-qi__name .jb-gloss{background:#fbf6eae6;padding:2px 8px;box-shadow:0 0 10px 4px #fbf6eacc}
/* 첫 화면 메뉴(2026-10-18 「한 화면에 다 보이게」): 생일 한 번 + 칸 열두 개. 칸마다 그 쪽 그 막으로 바로 든다 */
.jb-who-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.jb .jb-who-row select{width:100%;min-height:44px;box-sizing:border-box;background:#0c100f;color:#f1e9d6;border:1px solid #ffffff33;padding:0 12px;font:500 15px/1 var(--sans)}
.jb-menu{display:grid;gap:14px;margin-top:6px}
.jb-menu__group{display:grid;gap:8px;min-width:0}
.jb-menu__head{display:flex;align-items:center;gap:10px;min-width:0}
.jb-menu__head>b{font:400 26px/1 var(--jb-hanja);color:var(--jb-gold)}
.jb-menu__head>span{display:grid;gap:2px;flex:1;min-width:0;font:700 15px/1.2 var(--sans);color:#f1e9d6}
.jb-menu__head small{font:500 12px/1.2 var(--sans);color:var(--shell-quiet)}
.jb .jb-menu__all{background:none!important;border:1px solid #c9a75a99;color:#f1d9a8;font:600 13px/1 var(--sans);padding:0 12px;min-height:36px;cursor:pointer;white-space:nowrap}
.jb .jb-menu__all:hover{border-color:var(--jb-gold);color:#fff3d6}
.jb-menu__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.jb .jb-tile{display:grid;gap:6px;justify-items:center;align-content:center;min-height:72px;min-width:0;padding:8px 4px;background:#0c100fcc;border:1px solid #ffffff1f;color:#efe6d2;cursor:pointer;transition:border-color .2s,background .2s,translate .2s}
.jb .jb-tile b{font:400 24px/1 var(--jb-hanja);color:#ead8b0}
.jb .jb-tile span{font:600 12.5px/1.25 var(--sans);word-break:keep-all;text-align:center}
.jb .jb-tile:hover,.jb .jb-tile:focus-visible{border-color:var(--jb-gold);background:#1b1712e6;translate:0 -1px}
.jb-menu__group--gangho .jb-tile{border-color:#c9a75a4d}
.jb .jb-door.is-busy{opacity:.6;pointer-events:none}
.jb-door.is-waiting{filter:none}
.jb-invite__peeks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(26px,4vw,40px)}
.jb-invite__peeks .jb-peek{display:grid;width:100%;box-sizing:border-box;text-align:left}
@media (max-width:760px){ .jb-invite__peeks{grid-template-columns:1fr} }
/* 휴대폰 첫 화면: 머리말을 줄여 생일과 메뉴가 한 화면에 들게 */
@media (max-width:700px){
 .jb .awaken__lede{font-size:13px;line-height:1.7}
 .jb .jb-form .entry-note{margin-top:4px}
 .jb .awaken__stage{padding-top:14px}
}
/* 풀이 화면: 위에 붙는 막 띠, 아래에 붙는 쪽 바꾸기 탭 */
.jb-chips{position:sticky;top:0;z-index:30;background:#121816f2;border-bottom:1px solid #ffffff1a;backdrop-filter:blur(6px)}
.jb-chips ol{list-style:none;margin:0;padding:8px 12px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.jb-chips ol::-webkit-scrollbar{display:none}
.jb-chips a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;white-space:nowrap;text-decoration:none;color:#c9c2b0;font:600 13px/1 var(--sans);border:1px solid #ffffff1f;border-radius:999px}
.jb-chips b{font:400 15px/1 var(--jb-hanja);color:#a99a7a}
.jb-chips a[aria-current]{color:#1b1712;background:#e9d9b4;border-color:#e9d9b4}
.jb-chips a[aria-current] b{color:#7a2f22}
@media(min-width:1180px){.jb-chips{display:none}}
.jb-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#121816f5;border-top:1px solid #ffffff1f;padding-bottom:env(safe-area-inset-bottom,0px);backdrop-filter:blur(8px)}
.jb-tabbar__tab{display:grid;gap:4px;justify-items:center;align-content:center;min-height:56px;background:none;border:0;color:#a9a294;text-decoration:none;cursor:pointer;font:600 11.5px/1 var(--sans)}
.jb-tabbar__tab b{font:400 19px/1 var(--jb-hanja)}
.jb-tabbar__tab[aria-current]{color:#f1d9a8}
.jb-tabbar__tab[aria-current] b{color:#f6eedb;text-shadow:0 0 10px #c5a779}
html.has-tabbar body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
/* 점괘 끝: 같은 생일로 다른 문에 드는 고리 */
.jb-other{display:grid;gap:4px;justify-self:start;font:700 16px/1.3 var(--sans);color:var(--jb-red);text-decoration:none;padding:10px 0;min-height:44px}
.jb-other small{font:500 12px/1.2 var(--sans);color:var(--jb-soft);letter-spacing:.08em}
.jb-other:hover{text-decoration:underline;text-underline-offset:4px}
.jb-tabbar__tab{font-family:var(--sans,sans-serif)}
.more-links a[aria-current]{font-weight:700}
.jb-tabbar .jb-tabbar__tab span{display:block;font:600 11.5px/1.15 var(--sans,sans-serif);white-space:nowrap}
.jb-tabbar .jb-tabbar__tab b{display:block;font:400 19px/1 var(--jb-hanja,serif);background:none;padding:0}
.jb-chips ol{padding-right:64px}
/* 휴대폰: 메뉴 마지막 줄까지 아래 탭 위에 들게 */
@media (max-width:700px){
 .jb-lede-more{display:none}
 .jb .jb-tile{min-height:62px;gap:4px}
 .jb .jb-tile b{font-size:21px}
 .jb-menu{gap:10px}
}
.jb .awaken__title{position:relative;z-index:5}
@media (max-width:700px){ .jb .awaken__moon{opacity:.45} }
/* 아래 탭(브라키오 사주처럼): 다섯 칸, 가운데 관주 얼굴 단추가 막대 위로 솟는다 */
.jb-tabbar{grid-template-columns:repeat(5,minmax(0,1fr));left:0;right:0;translate:none;bottom:0;width:auto;border:0;border-top:1px solid #ffffff1f;border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 20px #0007;overflow:visible}
.jb-tabbar__tab{min-height:58px}
.jb-tabbar__main{position:relative;align-content:end;padding-bottom:7px}
.jb-tabbar__face{position:absolute;left:50%;top:-24px;translate:-50% 0;width:58px;height:58px;border-radius:50%;overflow:hidden;background:#e9d9b4;border:3px solid #121816;box-shadow:0 0 0 2px #c9a75a,0 6px 16px #000a}
.jb-tabbar__face picture,.jb-tabbar__face img{display:block;width:100%;height:auto;margin-top:-4px}
.jb-tabbar__main[aria-current]>span:last-child{color:#f1d9a8}
@media(min-width:900px){ .jb-tabbar{left:50%;right:auto;translate:-50% 0;bottom:12px;width:min(560px,calc(100vw - 32px));border:1px solid #ffffff24;border-radius:18px;padding-bottom:0} }
html.has-tabbar body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* 휴대폰: 제목 왼쪽 정렬(달과 겹치지 않게), 한 줄 안내는 접고 카드가 첫 화면에 들게 */
@media (max-width:700px){
 .jb .awaken__copy{text-align:left;justify-items:start}
 .jb .awaken__title{font-size:clamp(30px,8.6vw,38px)}
 .jb .awaken__lede{display:none}
}
/* 첫 화면 메뉴(2026-10-18): 짜임은 운세 앱(넘기는 큰 판 → 줄 메뉴 → 두 칸 카드 → 엿보기), 그림새는 이 집 것 —
   어두운 판에 금빛 가는 테, 각진 모서리, 명조 제목, 붉은 낙관, 판 뒤에 막 한자를 옅게 */
.jb .awaken__copy>.jb-home{width:100%;max-width:520px;justify-self:center;text-align:left;position:relative;z-index:6}
.jb-home{display:grid;gap:10px}
.jb-home button.jb-pick{all:unset;display:block;width:100%;cursor:pointer;min-width:0;box-sizing:border-box}
.jb-home button.jb-pick:focus-visible>*{outline:2px solid var(--jb-gold);outline-offset:2px}
.jb-list .jb-pick>*{position:relative;overflow:hidden;box-sizing:border-box;color:#f1e9d6;background:color-mix(in srgb,var(--panel) 86%,transparent);border:1px solid #c5a77966;backdrop-filter:blur(7px);transition:border-color .3s,translate .4s var(--jb-ease)}
.jb-list .jb-pick:hover>*{border-color:var(--jb-gold);translate:0 -2px}
.jb-ghost{position:absolute;right:-.06em;bottom:-.2em;z-index:0;font:400 150px/1 var(--jb-hanja);color:#c5a7791a;pointer-events:none}
.jb-badge{display:inline-block;justify-self:start;position:relative;z-index:2;font:600 11.5px/1 var(--sans);letter-spacing:.08em;color:var(--seal-text);background:var(--jb-red);padding:5px 7px;rotate:-3deg}
/* 넘기는 큰 판 */
.jb .jb-hero{position:relative;width:100%;min-width:0}
.jb .jb-hero__track{list-style:none;margin:0;padding:0;width:100%;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.jb-hero__track::-webkit-scrollbar{display:none}
.jb-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.jb-slide>button.jb-pick{position:relative;display:grid;align-content:start;gap:10px;height:236px;padding:20px 20px 0;color:#f1e9d6;background:color-mix(in srgb,var(--panel) 86%,transparent);border:1px solid #c5a77966;backdrop-filter:blur(7px);overflow:hidden;transition:border-color .3s}
.jb-slide>button.jb-pick:hover{border-color:var(--jb-gold)}
.jb-slide>button.jb-pick:focus-visible{outline:2px solid var(--jb-gold);outline-offset:2px}
.jb-slide>button.jb-pick::before{content:'';position:absolute;inset:6px;border:1px solid #c5a77926;pointer-events:none}
.jb-slide__title{font:400 30px/1.2 var(--jb-serif);letter-spacing:.02em;color:#f6eedb;position:relative;z-index:2;max-width:62%}
.jb-slide__hook{font:400 14px/1.6 var(--sans);color:var(--shell-intro);max-width:56%;word-break:keep-all;position:relative;z-index:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jb-slide__cta{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 18px;background:var(--btn);color:var(--btn-ink);border:1px solid var(--btn-border);font:600 15px/1 var(--sans)}
.jb-slide__cta i{font-style:normal}
.jb-slide>button.jb-pick:hover .jb-slide__cta{background:var(--btn-hover)}
.jb-slide__art{position:absolute;right:-6px;bottom:52px;top:8px;width:46%;z-index:1;display:flex;align-items:flex-end;justify-content:center}
.jb-slide__art picture{display:contents}
.jb-slide__art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.jb-slide:first-child .jb-slide__art{top:-4px;bottom:44px}
.jb .jb-hero__nav{position:absolute;top:50%;translate:0 -50%;z-index:4;width:30px;height:30px;min-height:0;border:1px solid #c5a77999;background:#141a18e6;color:var(--jb-gold);font:400 18px/1 var(--sans);display:grid;place-items:center;cursor:pointer;padding:0}
.jb .jb-hero__nav:hover{border-color:var(--jb-gold);color:#f6eedb}
.jb .jb-hero__nav--prev{left:-10px}.jb .jb-hero__nav--next{right:-10px}
.jb-hero__dots{display:flex;justify-content:center;gap:10px;padding:2px 0 0}
.jb-hero__dots span{width:6px;height:6px;rotate:45deg;background:#c5a77940;transition:background .2s}
.jb-hero__dots span.is-on{background:var(--jb-gold)}
/* 줄 메뉴 */
.jb-list{display:grid;gap:8px}
.jb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:58px;padding:8px 14px 8px 10px;text-decoration:none}
.jb-row .jb-ghost{font-size:84px;bottom:-.24em}
.jb-row__ico{position:relative;z-index:1;width:42px;height:42px;display:block;border:1px solid #c5a77940;background:#0c100f99}
.jb-row__ico picture,.jb-row__ico img{display:block;width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.jb-row__txt{position:relative;z-index:1;display:grid;gap:3px;min-width:0}
.jb-row__txt b{font:400 16px/1.3 var(--jb-serif);color:#f6eedb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-row__txt small{font:600 12px/1.2 var(--sans);letter-spacing:.06em;color:var(--jb-gold)}
.jb-row>i{position:relative;z-index:1;font:400 22px/1 var(--sans);font-style:normal;color:var(--jb-gold)}
/* 두 칸 카드 */
.jb-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.jb-tile3{display:grid;align-content:start;gap:6px;min-height:118px;padding:12px}
.jb-tile3 .jb-ghost{font-size:110px}
.jb-tile3 b{font:400 17px/1.25 var(--jb-serif);color:#f6eedb;position:relative;z-index:2;margin-top:2px}
.jb-tile3 small{font:400 12.5px/1.4 var(--sans);color:var(--shell-intro);position:relative;z-index:2;max-width:58%;word-break:keep-all}
.jb-tile3__art{position:absolute;right:-4px;bottom:-6px;width:42%;height:74%;z-index:1;display:flex;align-items:flex-end;justify-content:flex-end}
.jb-tile3__art picture{display:contents}
.jb-tile3__art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.jb-list>.jb-peek{display:grid;width:100%;box-sizing:border-box;padding:10px 16px;gap:14px}
.jb-list>.jb-peek .jb-peek__seal{font-size:13px;padding:5px 4px}
.jb-list>.jb-peek small{margin-bottom:3px}
/* 생일 판: 메뉴를 고르면 아래에서 올라온다(이 집 입력 판 그대로) */
.jb-sheet{position:fixed;inset:0;z-index:60;display:grid;align-items:end;justify-items:center}
.jb-sheet[hidden]{display:none!important}
.jb-sheet__dim{position:absolute;inset:0;background:var(--backdrop)}
.jb .jb-sheet__panel.life-form{position:relative;width:min(560px,100%);max-width:none;margin:0;box-sizing:border-box;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));background:var(--panel);border:1px solid var(--panel-line);border-bottom:0;box-shadow:0 -12px 40px #000a;max-height:92vh;overflow:auto;text-align:left;animation:jb-sheet-up .32s var(--jb-ease) both}
@keyframes jb-sheet-up{from{translate:0 40px;opacity:0}to{translate:0 0;opacity:1}}
.jb .jb-sheet__x{position:absolute;top:10px;right:10px;width:40px;height:40px;min-height:0;padding:0;border:0;background:none;color:var(--shell-quiet);font:400 26px/1 var(--sans);cursor:pointer}
.jb-sheet__pick{margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--shell-line);font:600 12px/1.2 var(--sans);letter-spacing:.2em;color:var(--shell-label-sub)}
.jb-sheet__pick span{font:400 16px/1 var(--jb-hanja);letter-spacing:0;color:var(--jb-gold);margin-right:6px}
.jb-sheet__pick b{color:var(--shell-label);font-weight:600}
.jb-sheet__title{margin:8px 0 14px;font:400 22px/1.3 var(--jb-serif);color:#f6eedb}
.jb .jb-sheet__go{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:54px;margin-top:6px;padding:0 22px;background:var(--btn);color:var(--btn-ink);border:1px solid var(--btn-border);border-radius:0;font:600 15px/1 var(--sans);cursor:pointer}
.jb .jb-sheet__go:hover{background:var(--btn-hover)}
.jb .jb-sheet__go i{font-style:normal}
.jb .jb-sheet .birth-row{margin-bottom:14px}
.jb .jb-sheet .birth-row label{display:block;min-width:0}
.jb .jb-sheet .birth-row input,.jb .jb-sheet .birth-row select{margin-top:6px;width:100%;box-sizing:border-box}
html.is-sheet{overflow:hidden}
html.is-sheet .jb-tabbar{visibility:hidden}
/* 휴대폰: 큰 제목·안내를 접고 메뉴가 첫 화면에 */
@media (max-width:700px){
 .jb .awaken__eyebrow,.jb .awaken__lede{display:none}
 .jb .awaken__title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .jb .awaken__stage{padding-top:10px}
 .jb .awaken__copy{gap:0}
}
@media (max-width:700px) and (min-height:781px){
 .jb-slide>button.jb-pick{height:252px}
 .jb-tile3{min-height:136px}
 .jb-row{min-height:64px}
 .jb-list,.jb-home{gap:10px}
}
@media (max-width:700px) and (max-height:760px){
 .jb-slide>button.jb-pick{height:204px;padding-top:16px}
 .jb-slide__title{font-size:26px}
 .jb-slide__hook{font-size:13px}
 .jb-tile3{min-height:100px}
 .jb-row{min-height:52px}
 .jb-row__ico{width:36px;height:36px}
}
/* 넓은 화면: 왼쪽 제목, 오른쪽 메뉴 */
@media (min-width:1080px){
 .jb .awaken__copy{grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:56px;align-items:center;text-align:left;justify-items:start}
 .jb .awaken__copy>*{grid-column:1}
 .jb .awaken__copy>.jb-home{grid-column:2;grid-row:1/span 4;align-self:start}
 .jb .awaken__title{font-size:clamp(56px,6vw,96px)}
 .jb .awaken__stage{padding-top:clamp(20px,4vh,48px)}
 .jb-slide>button.jb-pick{height:212px}
}
/* 메뉴 본체 두 칸 격자 2×2 */
@media (max-width:700px) and (min-height:781px){ .jb-tile3{min-height:148px} }
@media (min-width:1080px){ .jb-tile3{min-height:112px} }
/* 주제 메뉴 여섯 칸(2×3)까지 첫 화면에: 판·카드 높이를 줄인다 */
.jb-tile3{min-height:100px;padding:10px 12px}
.jb-tile3 .jb-ghost{font-size:92px}
@media (max-width:700px) and (min-height:781px){ .jb-slide>button.jb-pick{height:222px} .jb-tile3{min-height:108px} }
@media (max-width:700px) and (max-height:780px){ .jb-slide>button.jb-pick{height:190px;padding-top:14px} .jb-slide__title{font-size:24px} .jb-tile3{min-height:88px;gap:3px;padding:8px 10px} .jb-tile3 b{font-size:15.5px} .jb-tile3 small{font-size:11.5px} .jb-home,.jb-pair{gap:7px} .jb-tile3__art{height:66%} }
@media (min-width:1080px){ .jb-slide>button.jb-pick{height:196px} .jb-tile3{min-height:94px} .jb-home{gap:8px} }
@media (min-width:1080px){ .jb-tile3{min-height:88px} }
@media (min-width:1080px){ .jb-slide>button.jb-pick{height:186px} }
/* 카드 비율(2026-10-18 「카드 하나하나 사이즈 비율이 다른데」): 사주아이처럼 세로로 긴 카드(약 173×235) —
   위에 정사각 그림 칸, 아래 이름과 무료 낙관 한 줄, 그 밑에 한 줄 설명 */
.jb .jb-tile3,.jb-tile3{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"art art" "title badge" "hook hook";align-content:start;align-items:center;gap:8px 6px;min-height:0;padding:10px 10px 12px}
.jb-tile3 .jb-ghost{display:none}
.jb .jb-tile3 .jb-tile3__art{grid-area:art;position:relative;inset:auto;right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#0c100fb3;border:1px solid #c5a77933;overflow:hidden}
.jb-tile3 .jb-tile3__art::after{content:attr(data-han);position:absolute;inset:auto -.05em -.18em auto;font:400 96px/1 var(--jb-hanja);color:#c5a7791a;pointer-events:none}
.jb .jb-tile3 .jb-tile3__art img{max-width:78%;max-height:78%;position:relative;z-index:1}
.jb-tile3 b{grid-area:title;margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jb-tile3 .jb-badge{grid-area:badge;justify-self:end}
.jb .jb-tile3 small,.jb-tile3 small{grid-area:hook;max-width:none;font-size:12px;line-height:1.35}
@media (max-width:700px) and (max-height:780px){ .jb .jb-tile3,.jb-tile3{padding:8px 8px 10px;gap:6px 4px} .jb-tile3 b{font-size:15px} }
@media (min-width:1080px){ .jb .jb-tile3,.jb-tile3{min-height:0} .jb-pair{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* 아직 펴지 않은 판(2026-10-19): 낙관을 먹빛으로, 그림을 조금 어둡게 */
.jb-badge--soon{background:#3a3f3a;color:#d8d0bc;border:1px solid #c5a77966}
.jb-pick[data-soon] .jb-tile3__art img{filter:saturate(.55) brightness(.72)}
.jb-pick[data-soon] .jb-slide__cta{background:transparent;color:var(--jb-gold);border-color:#c5a77980}
/* 카드 그림 칸은 장면 그림으로 꽉 채운다 */
.jb .jb-tile3 .jb-tile3__art img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.jb-tile3 .jb-tile3__art::after{display:none}
/* 카드 이름이 낙관에 밀려 잘리지 않게: 두 줄까지 */
.jb-tile3 b{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;line-height:1.25}
.jb-tile3 .jb-badge{align-self:start;margin-top:1px}
/* 나의 별호(2026-10-19): 나무 명패에 별호 한자를 새기고, 곁에 별호·근거·문파·생업·벗 */
.jb-bh{margin:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,4vw,48px);align-items:center;padding:clamp(24px,4vw,48px) clamp(18px,4vw,48px);background:linear-gradient(160deg,#1e2822,#141a18);border:1px solid #c5a77966}
.jb-bh__plate{position:relative;justify-self:center;width:min(240px,100%)}
.jb-bh__plate picture,.jb-bh__plate img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 22px #000a)}
.jb-bh__carve{position:absolute;left:50%;top:22%;bottom:12%;translate:-50% 0;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;font:400 clamp(30px,5vw,46px)/1.05 var(--jb-hanja);letter-spacing:.08em;color:#f3d79a;text-shadow:0 1px 0 #3a2410,0 -1px 0 #ffeec8,0 0 12px #000a}
.jb-bh__card{min-width:0;color:#f1e9d6}
.jb-bh__head{margin:0;font:600 12px/1 var(--sans);letter-spacing:.3em;color:var(--jb-gold)}
.jb-bh__name{margin:10px 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.jb-bh__name b{font:400 clamp(32px,5.4vw,52px)/1.1 var(--jb-serif);color:#f6eedb}
.jb-bh__name span{font:400 clamp(18px,2.4vw,24px)/1 var(--jb-hanja);color:var(--jb-gold)}
.jb-bh__why{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:4px;font:400 14px/1.65 var(--sans);color:var(--shell-intro)}
.jb-bh .jb-reroll{margin-top:6px}
.jb-bh__list{margin:16px 0 0;display:grid;gap:0}
.jb-bh__list div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid #ffffff1a}
.jb-bh__list dt{font:600 12px/1.6 var(--sans);letter-spacing:.12em;color:var(--jb-gold)}
.jb-bh__list dd{margin:0;font:500 15px/1.5 var(--sans);color:#f1e9d6}
.jb-bh__list dd span{font-family:var(--jb-hanja);color:var(--jb-gold);margin-left:4px}
.jb-bh__list small{display:block;font:400 12.5px/1.6 var(--sans);color:var(--shell-intro);margin-top:2px}
.jb-bh__talk{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;margin:4px 0 0}
.jb-bh__face{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#e9d9b4;border:2px solid var(--jb-gold)}
.jb-bh__face picture,.jb-bh__face img{display:block;width:100%;height:auto;margin-top:-4px}
.jb-bh__talk div{display:grid;gap:8px}
.jb-bh__talk p{margin:0;padding:10px 14px;background:#fffaf0;border:1px solid #5a453233;font:400 15px/1.7 var(--sans);color:var(--jb-ink)}
.jb-bh__talk small{font:600 12px/1 var(--sans);color:var(--jb-soft)}
.jb-bh__next{margin:18px 0 0}
.jb-bh__next a{font:600 14px/1 var(--sans);color:var(--jb-red);text-underline-offset:4px}
@media (max-width:700px){
 .jb-bh{grid-template-columns:1fr;padding:22px 16px}
 .jb-bh__plate{width:44%}
 .jb-bh__list div{grid-template-columns:6.5em minmax(0,1fr)}
}
/* 점괘 한 장에 「나의 별호」 줄이 더해져 넉 줄: 간격을 좁혀 종이 안에 */
.jb-sinpyo__list{margin-top:5%;gap:5px}
.jb-sinpyo__list div{padding-top:4px}
.jb-sinpyo__eyebrow{margin-bottom:3%}
.jb-sinpyo__day{font-size:clamp(44px,5.8vw,80px)}
.jb-sinpyo__list dd{font-size:clamp(13px,1.45vw,17px);line-height:1.3}
.jb-sinpyo__list dd small{line-height:1.3}
/* 지난 생의 숙제(2026-10-19, 따로 보는 판) */
.jb-past__plate{position:relative;margin:0}
.jb-past__plate figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;padding:56px clamp(18px,4vw,40px) clamp(18px,3vw,30px);background:linear-gradient(transparent,#0c100fe6 55%);color:#f1e9d6}
.jb-past__plate figcaption span{font:400 clamp(30px,4.6vw,48px)/1 var(--jb-hanja);color:var(--jb-gold)}
.jb-past__plate figcaption b{font:400 clamp(20px,2.6vw,28px)/1.3 var(--jb-serif);color:#f6eedb}
.jb-past__plate figcaption small{font:400 14px/1.6 var(--sans);color:#d8d2c2}
.jb-past{list-style:none;margin:22px 0 18px;padding:0;display:grid;gap:0}
.jb-past__row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid #5a453233}
.jb-past__han{display:grid;place-items:center;width:46px;height:46px;font:400 26px/1 var(--jb-hanja);color:#f9e9dc;background:var(--jb-red);rotate:-3deg}
.jb-past__row h3{margin:0 0 4px;font:600 12px/1.4 var(--sans);letter-spacing:.2em;color:#8a6a4a}
.jb-past__main{margin:0;font:400 clamp(18px,2.2vw,22px)/1.45 var(--jb-serif);color:var(--jb-ink);word-break:keep-all}
.jb-past__sub{margin:4px 0 0;font:500 15px/1.6 var(--sans);color:var(--jb-ink)}
.jb-past__why{margin:6px 0 0;font:400 13.5px/1.7 var(--sans);color:var(--jb-soft)}
.jb-solo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;width:min(1040px,100%);margin:28px auto 0;padding:0 var(--gutter,20px)}
.jb-solo a:not(.life-primary){font:600 14px/1 var(--sans);color:#e9d9b4;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
/* 기연의 때: 앞으로 열두 해 띠 */
.jb-gien__strip{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.jb-gien__strip li{display:grid;justify-items:center;gap:2px;padding:8px 2px;border:1px solid #5a453233;background:#fffaf0aa}
.jb-gien__strip b{font:600 12px/1 var(--sans);color:var(--jb-soft);font-variant-numeric:tabular-nums}
.jb-gien__strip span{font:400 18px/1.1 var(--jb-hanja);color:var(--jb-ink)}
.jb-gien__strip i{display:block;width:calc(6px + var(--s) * 6px);height:4px;background:#c5a779;margin-top:2px}
.jb-gien__strip li.is-pick{background:var(--jb-red);border-color:var(--jb-red)}
.jb-gien__strip li.is-pick b,.jb-gien__strip li.is-pick span{color:#f9e9dc}
.jb-gien__strip li.is-pick i{background:#f9e9dc}
@media (min-width:900px){ .jb-gien__strip{grid-template-columns:repeat(12,minmax(0,1fr))} }
/* 출행 길일: 서른 날 띠 */
.jb-travel__strip{grid-template-columns:repeat(6,minmax(0,1fr))}
.jb-travel__strip span{font-size:15px}
.jb-gien__strip li.is-avoid{background:repeating-linear-gradient(135deg,#5a453218 0 4px,transparent 4px 8px);opacity:.75}
@media (min-width:900px){ .jb-travel__strip{grid-template-columns:repeat(10,minmax(0,1fr))} }
/* 의형제·정혼 궁합 */
.jb-match{display:block}
.jb-match__form{display:grid;gap:12px;max-width:560px;margin:0 auto}
.jb-match__kind{display:flex;flex-wrap:wrap;gap:8px 18px;color:#f1e9d6;font:500 15px/1.4 var(--sans)}
.jb-match__kind label{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer}
.jb .jb-match .birth-row{margin-bottom:0}
.jb .jb-match .birth-row label{display:block;color:#e8e2d2}
.jb .jb-match .birth-row input{width:100%;box-sizing:border-box;margin-top:6px}
.jb-match__note{margin:0;color:#f3b9a8;font:500 14px/1.5 var(--sans)}
.jb-match .life-primary{justify-self:start}
.jb-match__result{text-align:center}
.jb-match__result .jb-bh__name{justify-content:center}
.jb-match__pair{margin:6px 0;font:500 15px/1.6 var(--sans);color:#e8e2d2}
.jb-match__pair span{font:400 22px/1 var(--jb-hanja);color:var(--jb-gold);margin:0 4px}
.jb-match__pair i{font-style:normal;color:var(--jb-gold);margin:0 6px}
.jb-match__line{margin:0;font:400 16px/1.7 var(--sans);color:var(--shell-intro)}
.jb-match__again{margin-top:18px;border-top:1px solid #ffffff1a;padding-top:12px}
.jb-match__again summary{cursor:pointer;color:var(--jb-gold);font:600 14px/1 var(--sans);min-height:44px;display:flex;align-items:center}
.jb-past__row--care .jb-past__han{background:#5a4532}
.jb .jb-match input[type=text]{height:45px;min-height:45px;padding:10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:0;font:15px var(--sans);color-scheme:dark}
.jb .jb-match input[type=text]::placeholder{color:#8e9a88}
.jb .jb-match input[type=radio]{accent-color:var(--jb-gold);width:18px;height:18px}
/* 강호 해몽 */
.jb .jb-dream__form textarea{width:100%;box-sizing:border-box;min-height:88px;padding:10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);font:15px/1.6 var(--sans);resize:vertical;border-radius:0}
.jb-dream__or{margin:6px 0 0;font:600 12px/1 var(--sans);letter-spacing:.2em;color:var(--jb-gold)}
.jb-dream__chips{display:flex;flex-wrap:wrap;gap:8px}
.jb .jb-dream__chip{min-height:40px;padding:0 12px;border:1px solid #c5a77966;background:transparent;color:#efe6d2;font:500 14px/1 var(--sans);cursor:pointer;border-radius:0}
.jb .jb-dream__chip:hover{border-color:var(--jb-gold);color:#fff3d6}
.jb-match__result + .jb-dream__or{margin-top:16px;text-align:center}
.jb-match__result ~ .jb-dream__chips{justify-content:center;margin-top:8px}
/* ───────── PC 화면(2026-10-19 「PC버전 구성 레이아웃도 신경써」) ─────────
   첫 화면: 위에 [제목 | 넘기는 판], 그 아래 카드를 화면 폭 전체로(넓으면 6열, 아니면 4열).
   아래 탭은 PC에서 머리 띠 가운데로 올려 내용을 가리지 않게 한다. */
@media (min-width:1080px){
 .jb .awaken__copy{width:min(1240px,calc(100vw - 96px));grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-rows:auto auto auto auto auto;column-gap:56px;row-gap:14px;align-items:start}
 .jb .awaken__copy>.jb-home{display:contents}
 .jb .awaken__eyebrow{grid-column:1;grid-row:1;align-self:end}
 .jb .awaken__title{grid-column:1;grid-row:2}
 .jb .awaken__lede{grid-column:1;grid-row:3}
 .jb .jb-hero{grid-column:2;grid-row:1/span 3;align-self:start;max-width:560px}
 .jb .jb-hero__dots{grid-column:2;grid-row:4}
 .jb .jb-list{grid-column:1/-1;grid-row:5;width:100%;margin-top:18px;gap:14px}
 .jb .jb-pair{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
 .jb .jb-tile3,.jb-tile3{padding:12px 12px 14px}
 .jb .jb-tile3 b{font-size:17px}
 .jb .jb-tile3 small{font-size:13px}
 .jb-slide>button.jb-pick{height:236px}
 .jb .jb-list>.jb-peek{max-width:none}
 .jb .awaken__stage{padding-top:clamp(28px,5vh,56px);padding-bottom:110px}
 /* 아래 탭 → 머리 띠 가운데 */
 .jb-tabbar{top:18px;bottom:auto;left:50%;right:auto;translate:-50% 0;width:min(560px,calc(100vw - 520px));grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #c5a77940;border-radius:0;background:#121816e6;box-shadow:0 8px 24px #0006}
 .jb-tabbar__tab{min-height:60px}
 .jb-tabbar__main{align-content:center;padding-bottom:0}
 .jb-tabbar__face{position:static;translate:none;width:34px;height:34px;border-width:2px;margin:0 auto}
 html.has-tabbar body{padding-bottom:0}
 /* 한 판 화면: 위 여백 줄이기 */
 .jb-fate--solo .jb-act{padding-top:28px}
}
@media (min-width:1180px){
 .jb .jb-pair{grid-template-columns:repeat(6,minmax(0,1fr))}
 .jb .jb-tile3 b{font-size:16px}
 .jb .jb-tile3 small{font-size:12.5px}
}
/* 오늘의 강호 운: 다른 날 보기 */
.jb-today__pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.jb-today__pick label{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);color:var(--jb-soft)}
.jb-today__pick input{height:40px;padding:0 8px;border:1px solid #5a453244;background:#fffaf0;color:var(--jb-ink);font:15px var(--sans)}
.jb-past__row--rumor .jb-past__han{background:#5a4532}
/* 첫 화면: 많이 찾는 판 + 갈래별 모두 보기(2026-10-19) */
.jb-list__head{margin:14px 0 2px;font:600 13px/1 var(--sans);letter-spacing:.24em;color:var(--jb-gold)}
.jb-cats{display:grid;gap:10px;margin-top:6px}
.jb-cats__tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.jb-cats__tabs::-webkit-scrollbar{display:none}
.jb .jb-cats__tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid #c5a77955;background:#141a18cc;color:#d8d2c2;font:600 14px/1 var(--sans);cursor:pointer;border-radius:0;white-space:nowrap}
.jb .jb-cats__tab small{font:500 11px/1 var(--sans);color:#8e9a88}
.jb .jb-cats__tab[aria-selected="true"]{background:var(--jb-gold);border-color:var(--jb-gold);color:#1b1712}
.jb .jb-cats__tab[aria-selected="true"] small{color:#3a2c1c}
@media (min-width:1080px){ .jb .jb-cats__tabs{flex-wrap:wrap;overflow:visible} }
/* 새 판 공통(2026-10-19 참고 플랫폼 항목 전부): 띠·입력판·부적 그림 */
.jb-gen__strip{grid-template-columns:repeat(min(var(--n,6),6),minmax(0,1fr))}
@media (min-width:900px){ .jb-gen__strip{grid-template-columns:repeat(var(--n,12),minmax(0,1fr))} }
.jb-gen__strip span{font-size:15px}
.jb-gen__svg{display:grid;place-items:center;padding:18px 0 4px}
.jb-gen__svg svg{width:min(200px,60%);height:auto;filter:drop-shadow(0 10px 18px #000a)}
.jb-gen__label{display:grid;gap:6px;color:#e8e2d2;font:500 14px/1.4 var(--sans)}
.jb .jb-gen__form input[type=text],.jb .jb-gen__form select{height:45px;padding:0 10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:0;font:15px var(--sans);color-scheme:dark}
.jb-gen__set{border:0;margin:0;padding:0;display:grid;gap:4px}
.jb-gen__set legend{margin-bottom:6px;font:600 15px/1.4 var(--sans);color:#f1e9d6}
.jb-gen__set label{display:flex;align-items:center;gap:8px;min-height:40px;color:#d8d2c2;font:400 14.5px/1.4 var(--sans);cursor:pointer}
.jb .jb-gen__set input[type=radio]{accent-color:var(--jb-gold);width:18px;height:18px;flex:0 0 auto}
.jb-gen__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jb-gen__pair label{display:grid;gap:6px;color:#e8e2d2;font:500 14px/1.4 var(--sans)}
.jb-gen__go{margin:6px 0 0}
.jb-gen__go a{font:600 14px/1 var(--sans);color:var(--jb-red);text-underline-offset:4px}
/* 명부 입문(로그인, 2026-10-19 studio/member.mjs): 생일 판과 같은 그림새. 카카오·네이버·구글 단추만 각 회사 표기 규정의 빛깔 */
.mh-lede{margin:0 0 14px;font:14px/1.6 var(--sans);color:var(--shell-quiet)}
.mh-brands{display:grid;gap:8px}
.mh-brand{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border:1px solid transparent;font:600 15px/1 var(--sans);text-decoration:none;box-sizing:border-box}
.mh-brand svg{width:20px;height:20px;flex:none}
.mh-brand span{flex:1;text-align:center;margin-right:30px}
.mh-brand--kakao{background:#FEE500;color:#191919}
.mh-brand--naver{background:#03C75A;color:#fff}
.mh-brand--google{background:#fff;color:#1f1f1f;border-color:#747775}
.mh-brand--apple{background:#000;color:#fff}
.mh-brand.is-soon{opacity:.45;cursor:not-allowed}
.mh-brand.is-soon span{margin-right:0}
.mh-brand small{font:500 11px/1 var(--sans);opacity:.8}
.mh-or{display:flex;align-items:center;gap:10px;margin:18px 0 12px;font:500 12px/1 var(--sans);letter-spacing:.12em;color:var(--shell-label-sub)}
.mh-or::before,.mh-or::after{content:'';flex:1;height:1px;background:var(--shell-line)}
.jb .mh-sheet input[type=password],.jb .mh-sheet select{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text);border-radius:0;padding:12px 13px;font:14px/1.4 var(--sans);width:100%;box-sizing:border-box}
.jb .mh-sheet label small{font-size:11px;color:var(--shell-label-sub);margin-left:6px}
.jb .mh-sheet .birth-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.mh-say{margin:0 0 10px;padding:10px 12px;border-left:2px solid var(--jb-gold);background:#c5a7791a;font:14px/1.5 var(--sans);color:var(--shell-label)}
.jb .mh-link{display:block;margin:12px auto 0;padding:6px 4px;min-height:0;border:0;background:none;color:var(--jb-gold);font:500 13px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.jb .mh-link--warn{color:#c9826d}
.mh-foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--shell-line)}
.jb .mh-foot .mh-link{margin:0}
.mh-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.mh-list li{display:flex;gap:6px}
.jb .mh-row{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"name rel go" "when when go";gap:4px 10px;align-items:center;padding:12px 14px;border:1px solid #c5a77966;background:none;color:var(--shell-label);text-align:left;font:14px/1.3 var(--sans);cursor:pointer}
.jb .mh-row:hover{border-color:var(--jb-gold)}
.mh-row b{grid-area:name;font:400 17px/1.2 var(--jb-serif);color:#f6eedb}
.mh-row small{grid-area:rel;font-size:12px;color:var(--jb-gold)}
.mh-row span{grid-area:when;color:var(--shell-quiet);font-variant-numeric:tabular-nums}
.mh-row i{grid-area:go;font-style:normal;color:var(--jb-gold)}
.jb .mh-del{flex:none;padding:0 12px;min-height:0;border:1px solid #c5a77933;background:none;color:var(--shell-quiet);font:13px/1 var(--sans);cursor:pointer}
.mh-empty{padding:14px;border:1px dashed #c5a77955;font:14px/1.5 var(--sans);color:var(--shell-quiet)}
.mh-add{margin-bottom:6px;border:1px solid #c5a77944;padding:0 14px}
.mh-add summary{padding:12px 0;font:600 14px/1.2 var(--sans);color:var(--jb-gold);cursor:pointer}
.mh-add form{padding-bottom:14px}
.mh-pick{margin:0 0 12px}
.mh-pick__head{margin:0 0 6px;font:600 12px/1 var(--sans);letter-spacing:.12em;color:var(--shell-label-sub)}
.mh-pick__row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.jb .mh-chip{flex:none;display:grid;gap:3px;padding:8px 12px;min-height:0;border:1px solid #c5a77966;background:none;color:var(--shell-label);text-align:left;cursor:pointer}
.mh-chip b{font:400 15px/1.1 var(--jb-serif);color:#f6eedb}
.mh-chip small{font:12px/1 var(--sans);color:var(--shell-quiet);font-variant-numeric:tabular-nums}
.mh-save{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font:14px/1.4 var(--sans);color:var(--shell-label)}
.mh-save input{width:18px;height:18px;accent-color:var(--jb-gold)}
.jb .mh-mail .birth-row{grid-template-columns:1fr!important}

/* 사업자 정보·약관 고리(2026-10-19 결제대행 심사): 첫 화면 바닥에 글자로 보임 */
footer{flex-wrap:wrap}
.biz-foot{flex-basis:100%;display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--shell-line);font-family:system-ui,sans-serif}
.biz-foot p{font-size:11.5px;line-height:1.7;opacity:.85;word-break:keep-all}
.biz-foot a{text-decoration:underline;text-underline-offset:2px}

/* ───────── 2026-10-19 사용자: 「아래 바·삼선 메뉴 사주아이처럼」「PC에서 메뉴가 위에 있으면 안 돼」 ─────────
   짜임은 참고 서비스(머리는 이름+로그인만, 아래에 떠 있는 막대 넷), 그림새는 이 집 것(어두운 판·금빛 가는 테·각진 모서리·한자 아이콘) */
.more-menu{display:none!important}
.sidebar .head-login{margin-left:auto;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid #c5a77999;background:#141a18cc;color:#f1e6c9;font:600 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none}
.sidebar .head-login:hover{border-color:var(--jb-gold);color:#fff3d6}
.jb-tabbar,.jb-tabbar[class]{top:auto;left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));translate:-50% 0;width:min(380px,calc(100vw - 32px));grid-template-columns:repeat(4,minmax(0,1fr));padding:0 6px;border:1px solid #c5a77966;border-radius:0;background:#121816f0;box-shadow:0 10px 30px #000b,inset 0 0 0 4px #121816f0,inset 0 0 0 5px #c5a77926;overflow:visible}
.jb-tabbar .jb-tabbar__tab{min-height:58px;gap:5px}
.jb-tabbar .jb-tabbar__tab b{font-size:21px}
.jb-tabbar .jb-tabbar__tab span{font-size:11px;letter-spacing:.04em}
html.has-tabbar body,html.has-tabbar[class] body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.mh-more{display:grid;gap:2px;margin-top:18px;padding-top:12px;border-top:1px solid #c5a77933}
.jb .mh-more a,.jb .mh-more button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:0 4px;border:0;background:none;color:inherit;font:600 14px/1.3 var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.jb .mh-more small{font:500 11.5px/1 var(--sans);opacity:.65}

/* 제목 글자 가시성(2026-10-19 사용자 「전체적으로 제목 글자 가시성 확보해」): 가는 명조(Song Myung) 대신 굵은 명조, 어두운 판에서 또렷하게 */
.jb .jb-tile3 b,.jb-tile3 b,.jb-slide__title,.jb .jb-cats__tab{font-family:'Noto Serif KR','Song Myung',serif!important;font-weight:700!important;color:#fbf3df;text-shadow:0 1px 2px #000c,0 0 10px #0008;letter-spacing:-.01em}
.jb .jb-tile3 small,.jb-tile3 small{color:#d9d0bb;text-shadow:0 1px 2px #000b}
.jb-list__head{font-size:14px;color:#e2c48a;text-shadow:0 1px 2px #000a}
.jb h2,.jb h3{text-shadow:0 1px 2px #0009;-webkit-text-stroke:.35px currentColor}
.awaken__title{text-shadow:0 2px 14px #000a}
/* 첫 판: 강호 환생 하나, 인물 그림 없이 한자와 글로 */
.jb-slide>button.jb-pick{align-content:center}
.jb-slide__title,.jb-slide__hook{max-width:78%}
.jb-slide__title{font-size:32px}
.jb-slide__hook{font-size:15px;line-height:1.6;color:#ece3cc}
.jb-slide .jb-ghost{font-size:180px;opacity:.16}

/* 정분운: 인연의 붉은 실이 카드 테두리를 돈다(참고 서비스 연애운 카드의 테두리 선 → 월하노인의 붉은 실) */
.jb-tile3--thread{position:relative}
.jb-thread{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);z-index:3;pointer-events:none;overflow:visible}
.jb-thread rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke-linejoin:miter}
.jb-thread__base{stroke:#c0392b;stroke-width:1.2;opacity:.5}
.jb-thread__run{stroke:#e0523f;stroke-width:3;stroke-linecap:round;stroke-dasharray:24 76;filter:drop-shadow(0 0 3px #ff6a4d) drop-shadow(0 0 7px #c0392b99);animation:jb-thread-run 4.2s linear infinite}
@keyframes jb-thread-run{to{stroke-dashoffset:-100}}
.jb-slide>button.jb-pick,.jb-slide>button.jb-pick[class]{height:auto!important;min-height:200px;padding-bottom:20px;gap:12px}
.jb-slide__cta{position:static!important;margin-top:6px}
.jb-slide__hook{-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important}
@media (max-width:700px){ .sidebar .head-login{margin-right:52px;min-height:34px;padding:0 11px;font-size:12px} }