:root{--hanji-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");--hanji-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)' opacity='0.34'/%3E%3C/svg%3E");--c-seal:#8f2b20}#panel{z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#060403b8;justify-content:center;align-items:center;padding:5vh 4vw;display:flex;position:fixed;inset:0}#panel[hidden]{display:none}.panel-sheet{background-image:var(--hanji-grain), var(--hanji-fiber), linear-gradient(180deg, #261d13fc, #17110bfc);background-blend-mode:soft-light, soft-light, normal;border:1px solid #a8814f59;border-radius:2px;width:min(760px,100%);max-height:90vh;position:relative;overflow:hidden;box-shadow:0 30px 80px #000000a6,inset 0 0 60px #00000059}#panel-body{scrollbar-width:thin;scrollbar-color:#a8814f73 transparent;max-height:90vh;padding:40px 44px 48px;overflow-y:auto}#panel-close{z-index:2;color:var(--c-ivory-faint);font-size:var(--fs-lg);background:0 0;border:none;padding:6px 8px;position:absolute;top:10px;right:12px}#panel-close:hover{color:var(--c-flame)}.reading-head{border-bottom:1px solid #a8814f47;grid-template-columns:auto auto 1fr auto;align-items:start;gap:20px;margin-bottom:24px;padding-bottom:18px;display:grid}.intro-head{grid-template-columns:auto 1fr;align-items:center}.intro-head .reading-title{writing-mode:horizontal-tb;text-orientation:mixed;font-size:var(--fs-7xl);letter-spacing:.24em}.intro-head .seal{justify-self:end}.reading-title{writing-mode:vertical-rl;text-orientation:upright;font-size:var(--fs-8xl);letter-spacing:.16em;color:var(--c-ivory);text-shadow:0 1px #00000080;margin:0;font-weight:600;line-height:1.05}.reading-meta{flex-direction:column;gap:7px;padding-top:4px;display:flex}.reading-no{font-size:var(--fs-sm);letter-spacing:.3em;color:var(--c-ochre)}.reading-ko{font-size:var(--fs-xl);letter-spacing:.22em;color:var(--c-ivory)}.reading-tri{font-size:var(--fs-sm);letter-spacing:.24em;color:var(--c-ivory-faint)}.seal{background:var(--c-seal);background-image:var(--hanji-grain);background-blend-mode:multiply;color:#f2e2c8;opacity:.88;border-radius:2px;flex-direction:column;justify-content:center;align-self:start;align-items:center;width:38px;height:38px;padding:3px 0;display:flex;transform:rotate(-2deg);box-shadow:inset 0 0 6px #00000073}.seal span{font-size:var(--fs-md);letter-spacing:0;line-height:1.15}.reading-summary p{font-size:var(--fs-lg2);color:var(--c-ivory);margin:0 0 10px;line-height:1.95}.reading-section{margin-top:26px}.reading-section h3{border-bottom:1px solid #a8814f29;align-items:baseline;gap:10px;margin:0 0 10px;padding-bottom:5px;font-weight:600;display:flex}.sec-hanja{font-size:var(--fs-2xl);letter-spacing:.18em;color:var(--c-ochre)}.sec-ko{font-size:var(--fs-sm);letter-spacing:.26em;color:var(--c-patina)}.reading-section p{font-size:var(--fs-lg);color:var(--c-ivory-dim);margin:0 0 8px;line-height:1.95}.steps{margin:6px 0 10px;padding-left:26px;list-style-type:cjk-ideographic}.steps li{font-size:var(--fs-lg);color:var(--c-ivory-dim);margin:0 0 7px;padding-left:6px;line-height:1.9}.steps li::marker{color:var(--c-ochre);font-size:var(--fs-sm)}.quote{font-size:var(--fs-lg);color:var(--c-ivory);border-left:2px solid #a8814f66;margin:12px 0 4px;padding-left:14px;line-height:1.9}cite{font-size:var(--fs-sm);letter-spacing:.2em;color:var(--c-ochre);margin-bottom:10px;font-style:normal;display:block}.source-note{font-size:var(--fs-sm);letter-spacing:.06em;color:var(--c-ivory-faint);border-top:1px solid #a8814f38;margin-top:34px;padding-top:14px}.quiet{font-size:var(--fs-md);color:var(--c-ivory-faint)}.hex-grid{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.hex-cell{color:var(--c-ivory-dim);font-family:var(--serif);background:#0c09064d;border:1px solid #a8814f29;border-radius:2px;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;transition:border-color .24s,background .24s,color .24s;display:flex}.hex-cell:hover{border-color:var(--c-flame);color:var(--c-ivory);background:#2a1f1499}.hex-cell-no{font-size:var(--fs-3xs);letter-spacing:.05em;color:var(--c-ochre)}.hex-cell-name{font-size:var(--fs-md);letter-spacing:0}.hex-cell-ko{font-size:var(--fs-3xs);letter-spacing:0;color:var(--c-ivory-faint);white-space:nowrap}.hexagram.small{gap:2px;width:24px;margin-bottom:2px}.hexagram.small .hx-line{gap:3px;height:3px}.reading-head .hexagram.small{gap:3px;width:34px;margin-top:6px}.reading-head .hexagram.small .hx-line{gap:4px;height:4px}@media (max-width:640px),(orientation:portrait){.reading-head:not(.intro-head){grid-template-columns:auto auto 1fr;gap:14px}.reading-head:not(.intro-head) .seal{grid-column:3;justify-self:end}.seal{width:32px;height:32px}.intro-head .reading-title{font-size:var(--fs-5xl)}.reading-title{font-size:var(--fs-6xl)}.hex-grid{grid-template-columns:repeat(4,1fr);gap:5px}}:root{--fs-3xs:8px;--fs-2xs:9px;--fs-xs:10px;--fs-sm:11px;--fs-base:12px;--fs-md:13px;--fs-lg:14px;--fs-lg2:15px;--fs-xl:16px;--fs-2xl:18px;--fs-3xl:20px;--fs-4xl:22px;--fs-5xl:24px;--fs-6xl:26px;--fs-7xl:28px;--fs-8xl:32px;--fs-icon:38px;--c-charcoal:#0b0906;--c-darkwood:#2a1f14;--c-patina:#4f6b5a;--c-ochre:#a8814f;--c-flame:#e8a75c;--c-ivory:#e9dfc8;--c-ivory-dim:#e9dfc89e;--c-ivory-faint:#e9dfc857;--serif:"Noto Serif KR", "Apple SD Gothic Neo", serif;--sans:"Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--c-charcoal);height:100%;color:var(--c-ivory);font-family:var(--serif);font-size:var(--fs-lg);-webkit-font-smoothing:antialiased;margin:0;padding:0;overflow:hidden}#stage{width:100%;height:100%;display:block;position:fixed;inset:0}#labels{pointer-events:none;z-index:3;position:fixed;inset:0}.coin-label{font-family:var(--serif);font-size:var(--fs-md);color:var(--c-flame);text-shadow:0 0 10px #000000e6;opacity:0;will-change:transform;transition:opacity .9s;position:absolute;top:0;left:0}.coin-label.shown{opacity:.78}#hud{z-index:4;flex-direction:column;align-items:center;gap:14px;transition:opacity .6s,transform .6s;display:flex;position:fixed;bottom:5vh;left:50%;transform:translate(-50%)}#hud.gone{opacity:0;pointer-events:none;transform:translate(-50%)translateY(18px)}.hud-links{align-items:center;gap:6px;display:flex}.link-sep{color:var(--c-ivory-faint);font-size:var(--fs-sm)}#sound-btn{z-index:5;opacity:.5;transition:opacity .3s,color .3s;position:fixed;bottom:12px;right:14px}#sound-btn:hover{opacity:1}#hint{font-size:var(--fs-md);letter-spacing:.14em;color:var(--c-ivory-dim);margin:0}button{font-family:var(--serif);cursor:pointer}#cast-btn{font-size:var(--fs-xl);letter-spacing:.3em;color:var(--c-ivory);background:#0c09068c;border:1px solid #a8814f8c;border-radius:2px;padding:12px 34px 12px 40px;transition:background .32s,border-color .32s,color .32s}#cast-btn:hover:not(:disabled){border-color:var(--c-flame);color:#fff3dd;background:#2a1f14cc}#cast-btn:disabled{opacity:.35;cursor:default}.link{color:var(--c-ivory-faint);font-size:var(--fs-sm);letter-spacing:.22em;background:0 0;border:none;padding:2px 4px;transition:color .3s}.link:hover{color:var(--c-flame)}#result{z-index:4;opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:16px;transition:opacity .9s;display:flex;position:fixed;top:50%;right:5vw;transform:translateY(-50%)}#result.shown{opacity:1;pointer-events:auto}#result.revealing .result-actions,#result.revealing #again-note{opacity:0;pointer-events:none}.hexagram{flex-direction:column;gap:6px;width:76px;display:flex}.hx-line{opacity:.88;gap:7px;height:6px;transition:opacity .9s;display:flex}.hx-line.pending{opacity:.06}.hx-line .bar{background:linear-gradient(#e2d2b0eb,#a8814fd9);border-radius:1px;flex:1}#hex-name{font-size:var(--fs-3xl);letter-spacing:.16em;color:var(--c-ivory);text-align:center;min-height:26px}.result-actions{gap:10px;transition:opacity .7s;display:flex}.result-actions button{white-space:nowrap;font-size:var(--fs-md);letter-spacing:.2em;color:var(--c-ivory);background:#0c090680;border:1px solid #a8814f73;border-radius:2px;padding:8px 18px;transition:border-color .3s,color .3s}.result-actions button:hover{border-color:var(--c-flame);color:#fff3dd}.result-actions .ghost{color:var(--c-ivory-dim);border-color:#a8814f38}#again-note{font-size:var(--fs-xs);letter-spacing:.12em;color:var(--c-ivory-faint);margin:0;transition:opacity .7s}#notice{z-index:6;text-align:center;max-width:80vw;font-size:var(--fs-md);letter-spacing:.1em;color:var(--c-ivory-dim);opacity:0;pointer-events:none;margin:0;line-height:1.9;transition:opacity .6s;position:fixed;top:42%;left:50%;transform:translate(-50%,-50%)}#notice.shown{opacity:1}@media (max-width:640px),(orientation:portrait){#result{flex-direction:column;gap:12px;inset:auto auto 4vh 50%;transform:translate(-50%)}.hexagram{gap:5px;width:68px}.result-actions button{letter-spacing:.12em;padding:8px 14px}#hex-name{font-size:var(--fs-2xl)}#panel-body{padding:30px 22px 36px}.reading h2{font-size:var(--fs-4xl)}#cast-btn{font-size:var(--fs-lg2);padding:11px 26px 11px 32px}}