:root{--ink:#e8e8e3;--muted:#a7a9b2;--line:#303644;--gold:#d9b45d;--gold-d:#a8873f;--panel:rgba(13,15,20,.92);--bar:52px}
*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:#0d0f14;color:var(--ink);font-family:"Pretendard","Noto Sans KR","Hiragino Sans","Noto Sans JP","PingFang TC","Noto Sans TC","Malgun Gothic",system-ui,sans-serif;overflow:hidden}
a{color:inherit;text-decoration:none}button,input{font:inherit}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#entrance{position:fixed;inset:0;z-index:50;display:grid;background:#0d0f14}#entrance[hidden]{display:none}
.entry-visual{position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,11,16,.96) 0,rgba(9,11,16,.82) 38%,rgba(9,11,16,.25) 70%,rgba(9,11,16,.55) 100%),url("https://51yb.org/SAR/bg/1.webp") center/cover no-repeat;animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.08) translateX(-1.2%)}}
@media (prefers-reduced-motion:reduce){.entry-visual{animation:none}}
.entry-panel{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:100%;padding:28px clamp(20px,6vw,88px);max-width:760px}
.entry-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.entry-seal{color:var(--gold);font-size:1.4rem}
.entry-languages{display:flex;gap:6px;flex-wrap:wrap}.entry-languages a,.language-switch a{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:.8rem;color:#c6c8cf;background:rgba(255,255,255,.03)}
.entry-languages a[aria-current],.language-switch a[aria-current]{border-color:var(--gold);color:var(--gold)}.entry-languages a:hover,.language-switch a:hover{border-color:var(--gold-d);color:var(--ink)}
.entry-copy{padding:40px 0}.eyebrow{color:var(--gold);font-size:.74rem;font-weight:800;letter-spacing:.2em;margin:0 0 14px}
.entry-copy .work{margin:0 0 10px;color:#d4d6dc;font-size:1rem;letter-spacing:.04em}
#entrance-title{font-family:Georgia,"Noto Serif KR","Noto Serif JP","Noto Serif TC",serif;font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 20px;word-break:keep-all;text-wrap:balance}
:lang(ja) #entrance-title,:lang(zh-Hant) #entrance-title{word-break:normal}
.intro{color:#c3c6cf;line-height:1.8;margin:0 0 30px;max-width:560px}
.entry-options{border:0;padding:0;margin:0 0 24px;display:flex;gap:10px;flex-wrap:wrap}.entry-options legend{color:var(--muted);font-size:.78rem;margin-bottom:10px;letter-spacing:.06em}
.entry-options label{cursor:pointer}.entry-options input{position:absolute;opacity:0}.entry-options span{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:10px 16px;background:rgba(255,255,255,.035);color:#d4d6dc;transition:.15s}
.entry-options input:checked+span{border-color:var(--gold);color:var(--gold);background:rgba(217,180,93,.1)}.entry-options input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
#enter-site{display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:#1a1408;border:0;border-radius:12px;padding:14px 26px;font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 12px 34px rgba(217,180,93,.22)}#enter-site:hover{filter:brightness(1.07)}
.entry-note{display:block;margin-top:14px;color:var(--muted);font-size:.8rem}
.entry-bottom{color:#7f8492;font-size:.72rem;letter-spacing:.2em;display:flex;gap:18px;flex-wrap:wrap}.entry-bottom span{color:var(--gold-d)}
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:10;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--panel);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;min-width:0}.seal{color:var(--gold)}.brand-text{font-weight:900;color:var(--gold);letter-spacing:.08em;font-size:.86rem;display:flex;flex-direction:column;line-height:1.15}.brand-text small{color:var(--muted);font-weight:500;letter-spacing:.02em;font-size:.68rem;overflow:hidden;text-overflow:ellipsis}
.player{flex:1;display:flex;align-items:center;gap:8px;min-width:0;justify-content:center;position:relative}
#music-toggle{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--gold-d);background:rgba(217,180,93,.12);color:var(--gold);cursor:pointer;font-size:.8rem}
.time{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
#music-seek{flex:1;max-width:340px;min-width:60px;accent-color:var(--gold)}.vol{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:.8rem}#music-volume{width:76px;accent-color:var(--gold)}
.loop{display:flex;align-items:center;cursor:pointer;color:var(--muted)}.loop input{position:absolute;opacity:0}.loop span[aria-hidden]{border:1px solid var(--line);border-radius:7px;padding:2px 7px}.loop input:checked+span{color:var(--gold);border-color:var(--gold-d)}.loop input:focus-visible+span{outline:2px solid var(--gold)}
.status{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#232735;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.75rem;white-space:nowrap}
.language-switch{display:flex;gap:4px}.language-switch a{padding:4px 9px;font-size:.72rem}
#show-entrance{border:1px solid var(--line);background:transparent;color:#c6c8cf;border-radius:8px;padding:6px 10px;font-size:.75rem;cursor:pointer;white-space:nowrap}#show-entrance:hover{border-color:var(--gold-d);color:var(--ink)}
main{position:fixed;top:var(--bar);left:0;right:0;bottom:0}#viewer{width:100%;height:100%;border:0;display:block;background:#0d0f14}
body.entry-pending .bar,body.entry-pending main{visibility:hidden}
@media (max-width:860px){.brand-text small,.vol,.loop{display:none}}
@media (max-width:640px){:root{--bar:92px}.bar{flex-wrap:wrap;height:var(--bar);padding:8px 12px;gap:6px 10px;align-content:center}.brand{order:1}.language-switch{order:2;margin-left:auto}#show-entrance{order:3;padding:4px 8px}.player{order:4;flex-basis:100%}#music-seek{max-width:none}.entry-panel{padding:20px 16px}.entry-copy{padding:24px 0}}