:root{
 --bg:#090403;--ink:#f7ead0;--paper:#e8d2a7;--muted:#c4a879;--dim:#8f7650;
 --red:#8e0808;--red2:#cf2c1f;--blood:#4e0305;--gold:#f1c160;--gold2:#a8732c;
 --jade:#0f5960;--panel:rgba(30,12,9,.76);--panel2:rgba(88,28,16,.42);
 --line:rgba(241,193,96,.34);--line2:rgba(203,35,22,.48);--shadow:rgba(0,0,0,.72);
 --fx:rgba(255,225,143,.88);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%;overflow-x:hidden;scroll-behavior:smooth}
body{
 font-family:"Noto Serif KR","KoPub Batang","AppleMyungjo","Batang",serif;
 background:#050202;color:var(--ink);line-height:1.82;letter-spacing:-.018em;
}
button,input{font:inherit;color:inherit}button{cursor:pointer}
.bg-ritual{position:fixed;inset:0;z-index:-10;overflow:hidden;background:
 radial-gradient(circle at 50% -6%,rgba(245,193,96,.22),transparent 26%),
 radial-gradient(circle at 50% 20%,rgba(120,5,8,.38),transparent 34%),
 linear-gradient(180deg,#140705,#090403 50%,#030101)}
.bg-ritual:before{content:"";position:absolute;inset:0;background:
 url("./assets/images/crimson-river.webp") center/cover no-repeat;opacity:.18;filter:saturate(1.2) contrast(1.1);transform:scale(1.04)}
.bg-ritual:after{content:"";position:absolute;inset:0;background-image:
 radial-gradient(circle,rgba(241,193,96,.35) 0 1px,transparent 1.6px),
 linear-gradient(rgba(241,193,96,.04) 1px,transparent 1px),
 linear-gradient(90deg,rgba(241,193,96,.035) 1px,transparent 1px);
 background-size:51px 51px,38px 38px,38px 38px;mask-image:linear-gradient(#000,transparent 92%);opacity:.75}
.moon{position:absolute;right:-110px;top:-140px;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle at 42% 35%,#f7d98f,#a71a13 42%,rgba(69,3,5,.12) 70%);filter:blur(.3px);opacity:.23;box-shadow:0 0 120px rgba(203,44,31,.35);animation:moonFloat 18s ease-in-out infinite alternate}
.blood-river{position:absolute;left:-20%;right:-20%;bottom:-12%;height:38%;background:linear-gradient(110deg,transparent,rgba(162,7,8,.22),rgba(241,193,96,.16),rgba(64,3,3,.35),transparent);filter:blur(28px);animation:river 16s ease-in-out infinite alternate}
.gold-dust{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,211,112,.62) 0 1px,transparent 2px);background-size:73px 89px;animation:dust 18s linear infinite;opacity:.45}
.curtain{position:absolute;top:0;bottom:0;width:20vw;background:linear-gradient(90deg,rgba(58,1,4,.72),transparent);filter:blur(8px);opacity:.5;animation:curtain 9s ease-in-out infinite alternate}.curtain.right{right:0;transform:scaleX(-1)}.curtain.left{left:0}
@keyframes moonFloat{to{transform:translate(-28px,34px) scale(1.08)}}@keyframes river{to{transform:translateX(8%) rotate(-2deg)}}@keyframes dust{to{background-position:0 -500px}}@keyframes curtain{to{opacity:.78;width:23vw}}
.splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 36%,rgba(83,4,7,.82),rgba(6,2,2,.97) 62%,#020000);transition:.8s cubic-bezier(.22,1,.36,1)}
.splash.hide{opacity:0;pointer-events:none;filter:blur(14px);transform:scale(1.025)}
.seal-rings{position:absolute;width:min(86vw,560px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(241,193,96,.18);box-shadow:inset 0 0 80px rgba(142,8,8,.32);animation:rotate 28s linear infinite}
.seal-rings span{position:absolute;inset:8%;border-radius:50%;border:1px dashed rgba(207,44,31,.35)}.seal-rings span:nth-child(2){inset:19%;animation:rotate 18s linear reverse infinite}.seal-rings span:nth-child(3){inset:32%;border-style:solid;border-color:rgba(241,193,96,.3)}
@keyframes rotate{to{transform:rotate(360deg)}}
.gate-panel{position:relative;width:min(460px,100%);text-align:center;padding:32px 22px 26px;border-radius:32px;overflow:hidden;background:
 linear-gradient(145deg,rgba(248,213,142,.12),rgba(46,11,7,.8) 42%,rgba(9,4,4,.92)),
 url("./assets/images/prologue-scroll.webp") center/cover no-repeat;border:1px solid var(--line);box-shadow:0 32px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,235,180,.18)}
.gate-panel:before{content:"";position:absolute;inset:10px;border:1px solid rgba(241,193,96,.25);border-radius:25px;pointer-events:none}
.gate-panel:after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 20deg,transparent,rgba(241,193,96,.18),transparent,rgba(203,44,31,.2),transparent);animation:rotate 20s linear infinite;mix-blend-mode:screen}
.gate-panel>*{position:relative;z-index:1}.gate-top{font-size:12px;letter-spacing:.48em;color:var(--gold);margin-bottom:10px}
.gate-emblem{width:94px;height:94px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;color:#ffdf8a;font-size:28px;font-weight:900;background:radial-gradient(circle,#7f0909,#1d0504 62%);border:1px solid rgba(241,193,96,.55);box-shadow:0 0 38px rgba(207,44,31,.48),inset 0 0 28px rgba(0,0,0,.6);animation:pulse 3.8s ease-in-out infinite}
@keyframes pulse{50%{transform:translateY(-7px);box-shadow:0 0 65px rgba(241,193,96,.38),inset 0 0 34px rgba(207,44,31,.36)}}
.eyebrow{font-size:11px;letter-spacing:.32em;color:var(--gold);font-weight:900;text-transform:uppercase}.gate-panel h1{font-size:clamp(34px,9vw,52px);line-height:1.06;margin:12px 0 8px;text-shadow:0 0 24px rgba(207,44,31,.36);letter-spacing:-.07em}.subtitle{font-size:13px;color:#d5b984;letter-spacing:.18em}.notice{margin:22px 0;text-align:left;padding:15px 16px;border-radius:18px;border:1px solid rgba(241,193,96,.22);background:rgba(13,5,4,.58);font-size:13px;color:#ead6aa}
.enter-btn,.part-copy button,.portal-grid button,.bgm-btn{position:relative;overflow:hidden;border:1px solid rgba(241,193,96,.42);background:linear-gradient(110deg,#4b0606,#9c1410 46%,#b47b32 100%);box-shadow:0 14px 42px rgba(142,8,8,.28),inset 0 1px 0 rgba(255,241,180,.18);border-radius:18px;color:#fff3cf;font-weight:900;letter-spacing:.16em}
.enter-btn{width:100%;padding:16px}
.app{display:none;min-height:100vh;padding-bottom:50px}.app.show{display:block;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both}@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;padding:10px 12px env(safe-area-inset-top);background:linear-gradient(180deg,rgba(13,5,4,.88),rgba(13,5,4,.58));backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(241,193,96,.08);border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900;color:var(--gold)}.brand span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:rgba(142,8,8,.55)}
.nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}.nav::-webkit-scrollbar{display:none}.nav button{white-space:nowrap;border:1px solid rgba(241,193,96,.18);background:rgba(255,239,190,.06);border-radius:999px;padding:8px 11px;font-size:12px;color:#d9c28e}.nav button.active{background:linear-gradient(100deg,rgba(142,8,8,.75),rgba(241,193,96,.24));border-color:rgba(241,193,96,.42);color:#fff2cb}.bgm-btn{padding:8px 10px;font-size:10px;letter-spacing:.08em;background:linear-gradient(100deg,#21100b,#5a0b0b)}
.page{display:none}.page.active{display:block;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both}
.main-visual,.archive-page{max-width:1180px;margin:0 auto;padding:16px 14px 40px}.visual-frame{position:relative;min-height:62vh;border-radius:34px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(203,44,31,.18);background:#130605}
.visual-frame:before{content:"";position:absolute;inset:9px;border:1px solid rgba(241,193,96,.28);border-radius:26px;z-index:2;pointer-events:none}.visual-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.04)}.visual-glow{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,2,2,.1),rgba(6,1,1,.7)),radial-gradient(circle at 50% 20%,rgba(255,197,91,.2),transparent 34%);z-index:1}.seal-stamp{position:absolute;right:26px;top:26px;z-index:3;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(241,193,96,.55);color:#ffd87b;background:rgba(96,4,5,.35);font-size:32px;transform:rotate(12deg);box-shadow:0 0 34px rgba(203,44,31,.34)}
.visual-copy{position:absolute;left:20px;right:20px;bottom:22px;z-index:3;padding:20px;border-radius:24px;background:linear-gradient(135deg,rgba(11,4,3,.7),rgba(91,16,10,.38));border:1px solid rgba(241,193,96,.25);backdrop-filter:blur(10px)}.visual-copy h2{font-size:clamp(28px,8vw,58px);line-height:1.08;letter-spacing:-.07em;text-shadow:0 0 24px rgba(0,0,0,.6)}.visual-copy p:last-child{color:#e8d2a7;font-size:14px;margin-top:8px}
.portal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.portal-grid button{min-height:116px;text-align:left;padding:16px;background:linear-gradient(145deg,rgba(70,8,8,.82),rgba(17,6,5,.76)),url("./assets/images/blue-river.webp") center/cover;border-radius:24px}.portal-grid button:before{content:"";position:absolute;inset:7px;border:1px solid rgba(241,193,96,.2);border-radius:18px}.portal-grid span{display:block;color:var(--gold);font-size:20px}.portal-grid b{display:block;font-size:20px;margin-top:10px}.portal-grid small{color:#c7aa76}
.section-head{position:relative;overflow:hidden;border-radius:30px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(241,193,96,.12),rgba(49,13,9,.76)),url("./assets/images/crane-palace.webp") center/cover;padding:24px 18px;margin-bottom:16px;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.section-head:before{content:"";position:absolute;inset:8px;border:1px solid rgba(241,193,96,.19);border-radius:23px;pointer-events:none}.section-head>*{position:relative}.section-head h2{font-size:clamp(28px,8vw,46px);letter-spacing:-.06em;line-height:1.12}.section-head p:last-child{color:#e3cca0;margin-top:8px;font-size:14px}
.image-holder,.setting-mosaic,.character-card,.lore-card,.lore-control{position:relative;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(29,10,8,.82),rgba(102,28,14,.34));box-shadow:0 20px 54px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,231,177,.1)}
.image-holder img{width:100%;display:block;border-radius:26px;height:auto;max-height:none;object-fit:contain}
.character-stack{display:flex;flex-direction:column;gap:14px}.character-card{padding:18px}.character-card h3{font-size:22px;color:#ffdd89;margin-bottom:10px}.character-card .content{position:relative;overflow:hidden;white-space:pre-wrap;font-size:15px;font-weight:400;color:#f0dfbb;padding:15px;border-radius:18px;border:1px solid rgba(241,193,96,.18);background:rgba(255,229,165,.055);cursor:pointer}
.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.example-slot{position:relative;overflow:hidden;min-height:76px;border-radius:21px;border:1px solid rgba(241,193,96,.28);background:linear-gradient(145deg,rgba(241,193,96,.12),rgba(39,10,8,.68));display:grid;place-items:center;padding:13px;text-align:center;cursor:pointer;box-shadow:0 15px 36px rgba(0,0,0,.28)}.example-slot b{display:block}.example-slot span{font-size:18px;color:var(--gold)}
.lore-control{padding:14px;margin-bottom:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.lore-tabs,.part-copy{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0}
.lore-tabs button{white-space:nowrap;border:1px solid rgba(241,193,96,.24);background:rgba(255,229,165,.06);border-radius:999px;padding:10px 12px;color:#dfc48e;font-size:12px}
.lore-tabs button.active{background:linear-gradient(100deg,rgba(142,8,8,.86),rgba(241,193,96,.25));color:#fff2cf;border-color:rgba(241,193,96,.48);font-weight:900}
.part-copy{justify-content:flex-end}
.part-copy button{flex:0 0 auto;min-width:104px;padding:9px 13px;font-size:11px;letter-spacing:.02em;border-radius:999px}
.search{position:relative;grid-column:1/-1}.search input{width:100%;border:1px solid rgba(241,193,96,.22);outline:0;border-radius:18px;background:rgba(7,3,2,.55);padding:13px 14px 13px 42px;color:#f8e8c8;font-size:14px}.search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--gold);font-style:normal}.count{grid-column:1/-1;font-size:11px;color:#c5a66d;letter-spacing:.12em;margin:0 2px}
.lore-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lore-card{padding:18px;border-radius:28px}.lore-card:before,.character-card:before,.lore-control:before,.setting-mosaic:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(241,193,96,.12),transparent 30%),radial-gradient(circle at bottom left,rgba(203,44,31,.18),transparent 34%);pointer-events:none}.lore-card header{position:relative;display:flex;gap:14px;align-items:flex-start;margin-bottom:12px;cursor:pointer;overflow:hidden;border:1px solid transparent;border-radius:18px;padding:0 4px 5px 0}.numseal{min-width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#ffdc84;border:1px solid rgba(241,193,96,.42);background:radial-gradient(circle,#7d0909,#1b0504);font-weight:900;box-shadow:inset 0 0 20px rgba(0,0,0,.5)}.lore-card h3{font-size:24px;line-height:1.18;color:#ffe39d;text-shadow:0 2px 12px rgba(0,0,0,.45)}.lore-card .meta{font-size:11px;color:#c29d66;letter-spacing:.08em;margin-top:2px}.lore-card .tags{position:relative;display:flex;flex-wrap:wrap;gap:7px;margin:10px 0;overflow:hidden;border:1px solid transparent;border-radius:14px;cursor:pointer}.tag{font-size:11px;border:1px solid rgba(241,193,96,.26);background:linear-gradient(135deg,rgba(241,193,96,.14),rgba(92,12,8,.28));color:#f1d28b;border-radius:999px;padding:5px 9px;font-weight:700}.lore-card .body{position:relative;overflow:hidden;white-space:pre-wrap;padding:17px 18px;border-radius:18px;border:1px solid rgba(241,193,96,.22);background:linear-gradient(150deg,rgba(15,5,3,.48),rgba(88,22,10,.24));font-size:15.5px;font-weight:500;color:#f2dfb8;cursor:pointer;line-height:1.95;box-shadow:inset 0 0 32px rgba(0,0,0,.22)}
.setting-mosaic{display:grid;gap:14px;padding:14px}.setting-mosaic img{width:100%;border-radius:22px;border:1px solid rgba(241,193,96,.22)}.setting-mosaic div{padding:12px}.setting-mosaic b{font-size:24px;color:#ffdc89}.setting-mosaic p{color:#e6cea0;margin-top:8px}
.copyfx{animation:borderGlow 2.2s cubic-bezier(.22,1,.36,1) both!important}
.copyfx:after{content:"";position:absolute;inset:-34%;background:linear-gradient(112deg,transparent 24%,rgba(255,255,255,.08) 34%,rgba(255,236,174,.84) 48%,rgba(255,255,255,.18) 60%,transparent 76%);transform:translateX(-105%) rotate(5deg);animation:glass 2.2s cubic-bezier(.22,1,.36,1) forwards;pointer-events:none;mix-blend-mode:screen}
@keyframes glass{0%{transform:translateX(-110%) rotate(5deg);opacity:0}16%{opacity:.95}82%{opacity:.7}100%{transform:translateX(110%) rotate(5deg);opacity:0}}
@keyframes borderGlow{0%{outline:1px solid rgba(241,193,96,0);box-shadow:inset 0 0 0 rgba(241,193,96,0)}38%{outline:1px solid rgba(255,222,138,.95);box-shadow:inset 0 0 26px rgba(241,193,96,.14),0 0 25px rgba(203,44,31,.28)}100%{outline:1px solid rgba(241,193,96,0);box-shadow:inset 0 0 0 rgba(241,193,96,0)}}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;border-radius:999px;border:1px solid rgba(241,193,96,.45);background:rgba(29,8,6,.9);backdrop-filter:blur(14px);color:#ffdf91;padding:11px 18px;font-size:13px;font-weight:900;box-shadow:0 20px 50px rgba(0,0,0,.45);transition:.26s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:760px){.portal-grid{grid-template-columns:repeat(4,1fr)}.lore-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.lore-card{height:max-content}.setting-mosaic{grid-template-columns:1.1fr .9fr;align-items:center}.main-visual,.archive-page{padding-top:24px}.visual-frame{min-height:72vh}}
@media(max-width:440px){.topbar{gap:6px}.nav button{padding:8px 9px}.bgm-btn{padding:8px 8px}.portal-grid{grid-template-columns:1fr 1fr}.example-grid{grid-template-columns:1fr 1fr}.character-card .content,.lore-card .body{font-size:14px}.visual-copy{left:12px;right:12px;bottom:12px}}


/* v3 몰입감 강화 / 피드백 반영 */
body{
  font-family:"Iropke Batang","KoPub Batang","Noto Serif KR","AppleMyungjo","Batang",serif;
  background:#050202;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-7;pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%,rgba(241,193,96,.12),transparent 24%),
    radial-gradient(circle at 80% 8%,rgba(150,9,12,.2),transparent 25%),
    repeating-linear-gradient(90deg,rgba(241,193,96,.035) 0 1px,transparent 1px 42px);
  mix-blend-mode:screen;
}
.bg-ritual .gold-dust:before,.bg-ritual .gold-dust:after{
  content:"";position:absolute;inset:-20%;background:
  radial-gradient(circle,rgba(255,221,132,.7) 0 1px,transparent 1.6px);
  background-size:34px 34px;animation:goldFall 18s linear infinite;opacity:.38;
}
.bg-ritual .gold-dust:after{background-size:57px 57px;animation-duration:28s;opacity:.22;filter:blur(.3px)}
@keyframes goldFall{from{transform:translate3d(0,-10%,0) rotate(0deg)}to{transform:translate3d(-4%,10%,0) rotate(8deg)}}

.splash{
  background:
    linear-gradient(90deg,rgba(5,0,0,.92),rgba(24,3,4,.42),rgba(5,0,0,.92)),
    radial-gradient(circle at 50% 40%,rgba(158,7,11,.4),transparent 36%),
    url("./assets/images/blood-moon-palace.webp") center/cover no-repeat;
  overflow:hidden;
}
.splash:before,.splash:after{
  content:"";position:absolute;top:0;bottom:0;width:50.4%;z-index:0;
  background:
    linear-gradient(90deg,rgba(2,0,0,.98),rgba(45,4,5,.82) 52%,rgba(101,9,10,.42)),
    repeating-linear-gradient(0deg,rgba(241,193,96,.07) 0 1px,transparent 1px 38px);
  box-shadow:inset 0 0 90px rgba(0,0,0,.8), inset 0 0 0 1px rgba(241,193,96,.18);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter 1.1s cubic-bezier(.22,1,.36,1);
}
.splash:before{left:0;border-right:1px solid rgba(255,58,37,.68)}
.splash:after{right:0;border-left:1px solid rgba(255,58,37,.68)}
.splash.opening:before{transform:translateX(-104%) skewX(-3deg);filter:blur(2px)}
.splash.opening:after{transform:translateX(104%) skewX(3deg);filter:blur(2px)}
.splash .gate-panel,.splash .seal-rings{z-index:2}
.splash.opening .gate-panel{animation:sealBreak .95s cubic-bezier(.22,1,.36,1) forwards}
@keyframes sealBreak{0%{transform:scale(1);filter:none}36%{transform:scale(.985);filter:brightness(1.38)}100%{transform:scale(1.08);opacity:0;filter:blur(12px)}}
.splash .gate-panel{
  background:
   linear-gradient(145deg,rgba(245,202,112,.18),rgba(58,7,6,.85) 45%,rgba(5,1,1,.94)),
   url("./assets/images/crane-palace.webp") center/cover no-repeat;
}
.splash .gate-panel:before{
  border-color:rgba(255,221,132,.34);
  box-shadow:inset 0 0 45px rgba(154,8,11,.36);
}
.enter-btn:after,.portal-grid button:after,.part-copy button:after,.bgm-btn:after{
  content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 26%,rgba(255,248,202,.1) 36%,rgba(255,226,147,.74) 50%,rgba(255,255,255,.12) 63%,transparent 75%);
  transform:translateX(-115%) rotate(5deg);animation:idleSheen 5.4s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none;
}
@keyframes idleSheen{0%,48%{transform:translateX(-115%) rotate(5deg);opacity:0}60%{opacity:.75}88%,100%{transform:translateX(115%) rotate(5deg);opacity:0}}

.section-head{
  background:
    linear-gradient(180deg,rgba(8,2,2,.38),rgba(6,1,1,.78)),
    radial-gradient(circle at 50% 10%,rgba(255,224,145,.36),transparent 34%),
    url("./assets/images/crane-palace.webp") center 38%/cover no-repeat;
  min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;
}
.section-head h2{
  color:#ffe39b;text-shadow:0 3px 0 rgba(65,8,5,.85),0 0 28px rgba(255,210,108,.42),0 0 3px #140301;
  font-weight:950;
}
.section-head .eyebrow{color:#ffcf69;text-shadow:0 0 14px rgba(0,0,0,.9)}
.section-head p:last-child{color:#fff0ca;text-shadow:0 2px 10px #000;font-weight:700}
.image-holder{
  padding:12px;background:linear-gradient(145deg,rgba(35,9,7,.86),rgba(121,24,12,.2));
  display:grid;place-items:center;
}
.image-holder img{
  width:min(100%,793px);height:auto;max-height:none;object-fit:contain;border-radius:18px;
  box-shadow:0 0 0 1px rgba(241,193,96,.28),0 24px 70px rgba(0,0,0,.65);
}
.character-stack{gap:18px}
.character-card{
  padding:22px;background:
    linear-gradient(145deg,rgba(255,230,170,.08),rgba(39,6,5,.8) 52%,rgba(8,2,2,.9)),
    radial-gradient(circle at 100% 0,rgba(193,32,21,.28),transparent 36%);
}
.character-card h3,.lore-card h3{
  display:inline-block;position:relative;overflow:hidden;border:1px solid transparent;
  color:#ffdf91;text-shadow:0 0 16px rgba(241,193,96,.24);font-weight:950;
}
.character-card .content,.lore-card .body,.lore-card .tags{
  font-family:"Iropke Batang","KoPub Batang","Noto Serif KR","AppleMyungjo","Batang",serif;
  font-size:16px;line-height:2.05;color:#f5e5c0;font-weight:650;
}
.character-card .content{
  background:linear-gradient(180deg,rgba(255,229,165,.07),rgba(255,229,165,.03));
  box-shadow:inset 0 0 0 1px rgba(255,230,170,.04);
}
.example-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:760px;margin:16px auto 0}
.example-slot{min-height:58px;padding:10px;border-radius:16px}
.example-slot span{font-size:16px}.example-slot b{font-size:12px}

.lore-control{padding:14px}
.lore-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}
.part-copy{
  display:flex;justify-content:flex-end;gap:8px;margin:2px 0 10px;
}
.part-copy button{
  flex:0 0 auto;font-size:11px;padding:8px 11px;border-radius:999px;letter-spacing:.08em;
  background:linear-gradient(110deg,rgba(62,7,5,.88),rgba(149,26,13,.72),rgba(177,125,49,.72));
  box-shadow:0 8px 22px rgba(142,8,8,.22),inset 0 1px 0 rgba(255,241,180,.16);
}
.lore-card header{align-items:center}
.lore-card .lore-title{cursor:pointer;padding:4px 6px;border-radius:10px}
.lore-card .tags{cursor:pointer;border:1px solid transparent;border-left:0;border-right:0;border-radius:0;position:relative;overflow:hidden}
.lore-card .body{border:1px solid transparent;position:relative;overflow:hidden}
.tag{
  background:linear-gradient(145deg,rgba(255,223,137,.14),rgba(150,29,20,.14));
  color:#ffe4a1;border-color:rgba(241,193,96,.27);font-weight:800;
}

.copyfx{
  position:relative!important;
  animation:borderGlow 2.25s cubic-bezier(.22,1,.36,1) both!important;
}
.copyfx:after{
  content:""!important;position:absolute!important;inset:-38%!important;z-index:5!important;
  background:linear-gradient(112deg,transparent 23%,rgba(255,255,255,.08) 35%,rgba(255,234,162,.92) 49%,rgba(255,255,255,.2) 62%,transparent 77%)!important;
  transform:translateX(-110%) rotate(5deg)!important;animation:glass 2.25s cubic-bezier(.22,1,.36,1) forwards!important;pointer-events:none!important;mix-blend-mode:screen!important;
}
@keyframes borderGlow{0%{outline:1px solid rgba(241,193,96,0);box-shadow:inset 0 0 0 rgba(241,193,96,0)}34%{outline:1px solid rgba(255,222,138,1);box-shadow:inset 0 0 32px rgba(241,193,96,.18),0 0 28px rgba(203,44,31,.34),0 0 2px rgba(255,238,170,.8)}100%{outline:1px solid rgba(241,193,96,0);box-shadow:inset 0 0 0 rgba(241,193,96,0)}}
@media(max-width:680px){
  .example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head{min-height:160px}
  .part-copy{justify-content:flex-start;overflow-x:auto}
}

@media(max-width:760px){
 .lore-control{grid-template-columns:1fr}
 .part-copy{justify-content:flex-start}
 .lore-list{grid-template-columns:1fr}
}
.lore-title-line.copyfx,.lore-tags.copyfx,.character-card .content.copyfx,.example-slot.copyfx,.lore-card .body.copyfx,.part-copy button.copyfx{position:relative}



/* v5: 첨부 v2 기준 폰트/로어북 카드 복원 + MAIN 초기화 대응 */
.character-card .content,
.lore-card .body,
.lore-card .tags{
  font-family:"Noto Serif KR","KoPub Batang","AppleMyungjo","Batang",serif!important;
  font-weight:400!important;
}

.character-card .content{
  font-size:15px!important;
  line-height:1.95!important;
  color:#f0dfbb!important;
  padding:15px!important;
  border-radius:18px!important;
  border:1px solid rgba(241,193,96,.18)!important;
  background:rgba(255,229,165,.055)!important;
  box-shadow:none!important;
}

/* 로어북 항목은 v2의 문서철형 블럭으로 복원 */
.lore-list{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
.lore-card{
  padding:14px!important;
  border-radius:28px!important;
  border:1px solid var(--line)!important;
  background:linear-gradient(160deg,rgba(29,10,8,.82),rgba(102,28,14,.34))!important;
  box-shadow:0 20px 54px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,231,177,.1)!important;
}
.lore-card header,
.lore-card .lore-title-line{
  position:relative!important;
  display:flex!important;
  width:100%!important;
  gap:10px!important;
  align-items:flex-start!important;
  margin-bottom:10px!important;
  padding:0 8px 8px 0!important;
  border:1px solid transparent!important;
  border-radius:18px!important;
  cursor:pointer!important;
  overflow:hidden!important;
}
.title-copy-zone{
  flex:1 1 auto!important;
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.numseal{
  min-width:54px!important;
  width:54px!important;
  height:54px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:#ffdc84!important;
  border:1px solid rgba(241,193,96,.42)!important;
  background:radial-gradient(circle,#7d0909,#1b0504)!important;
  font-weight:900!important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.5)!important;
}
.lore-card h3,
.lore-card .lore-title{
  font-family:"Noto Serif KR","KoPub Batang","AppleMyungjo","Batang",serif!important;
  font-size:21px!important;
  line-height:1.25!important;
  color:#ffdf91!important;
  text-shadow:none!important;
  font-weight:900!important;
  padding:0!important;
  border:0!important;
}
.lore-card .meta{
  font-size:11px!important;
  color:#b99760!important;
  letter-spacing:.08em!important;
  margin:0!important;
}
.lore-card .tags,
.lore-card .lore-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:9px 0!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  cursor:pointer!important;
  overflow:hidden!important;
  line-height:1.4!important;
}
.tag{
  font-size:11px!important;
  border:1px solid rgba(241,193,96,.2)!important;
  background:rgba(241,193,96,.08)!important;
  color:#e5c783!important;
  border-radius:999px!important;
  padding:4px 8px!important;
  font-weight:400!important;
}
.lore-card .body{
  position:relative!important;
  overflow:hidden!important;
  white-space:pre-wrap!important;
  padding:14px!important;
  border-radius:18px!important;
  border:1px solid rgba(241,193,96,.18)!important;
  background:rgba(9,3,2,.36)!important;
  font-size:14.5px!important;
  color:#ead9b6!important;
  cursor:pointer!important;
  line-height:1.95!important;
  box-shadow:none!important;
}

.lore-title-line.copyfx,
.lore-tags.copyfx,
.character-card .content.copyfx,
.example-slot.copyfx,
.lore-card .body.copyfx,
.part-copy button.copyfx{
  position:relative!important;
  overflow:hidden!important;
}
@media(min-width:760px){
  .lore-list{display:flex!important;flex-direction:column!important}
}


/* v6: MAIN 복귀 정중앙 초기화 + 로어북 2열 복원 */
#splash{display:grid;place-items:center}
#splash:not(.hide){transform:none;filter:none;opacity:1}
@media(min-width:760px){
  .lore-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:start!important;
  }
  .lore-card{height:max-content!important}
}
@media(max-width:759px){
  .lore-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
}
.character-card .content,
.lore-card .body{
  font-weight:400!important;
}

/* v7: 설정집 - 자미관 기밀 아카이브 */
.settings-archive{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:22px 14px 54px;
  color:#efe4c7;
  isolation:isolate;
}
.settings-archive:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(2,5,14,.96),rgba(5,8,18,.94) 48%,rgba(12,3,4,.96)),
    url("./assets/jamigwan/night-sky.webp") center/cover no-repeat;
  opacity:0;
  pointer-events:none;
  transition:.55s ease;
}
#settings.active:before{opacity:1}
.settings-archive:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 28%,rgba(197,151,70,.16),transparent 30%),
    radial-gradient(circle at 78% 70%,rgba(84,0,12,.18),transparent 28%),
    linear-gradient(rgba(226,188,101,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(226,188,101,.025) 1px,transparent 1px);
  background-size:auto,auto,54px 54px,54px 54px;
  opacity:.75;
}
.settings-stars{
  position:absolute;
  inset:0 14px auto;
  height:620px;
  border-radius:38px;
  overflow:hidden;
  pointer-events:none;
  background:url("./assets/jamigwan/astro.webp") center 25%/cover no-repeat;
  opacity:.2;
  mix-blend-mode:screen;
  filter:saturate(.92) contrast(1.1);
  mask-image:linear-gradient(#000 38%,transparent 98%);
}
.settings-hero{
  position:relative;
  min-height:520px;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  border-radius:36px;
  border:1px solid rgba(219,177,91,.32);
  background:
    linear-gradient(180deg,rgba(6,11,28,.45),rgba(4,7,18,.9)),
    radial-gradient(circle at center,rgba(221,177,85,.18),transparent 36%);
  box-shadow:0 30px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,236,175,.12);
  margin-bottom:16px;
  padding:36px 18px;
}
.settings-hero:before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(221,177,85,.2);
  border-radius:28px;
  pointer-events:none;
}
.settings-orbit{position:absolute;width:min(78vw,610px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(221,177,85,.18);animation:rotate 44s linear infinite;opacity:.92}
.settings-orbit span{position:absolute;border-radius:50%;border:1px dashed rgba(221,177,85,.22)}
.settings-orbit span:nth-child(1){inset:9%}.settings-orbit span:nth-child(2){inset:23%;animation:rotate 24s linear reverse infinite}.settings-orbit span:nth-child(3){inset:37%;border-style:solid;border-color:rgba(169,30,27,.18)}
.settings-sigil{position:relative;width:min(330px,66vw);filter:drop-shadow(0 0 32px rgba(236,194,96,.35));opacity:.88;animation:sigilBreath 4.8s ease-in-out infinite;z-index:1}
@keyframes sigilBreath{50%{transform:scale(1.025);filter:drop-shadow(0 0 54px rgba(236,194,96,.42))}}
.settings-hero .eyebrow,.forbidden-card .eyebrow{position:relative;z-index:2;color:#d9b76b;letter-spacing:.34em}
.settings-hero h2{position:relative;z-index:2;font-size:clamp(34px,8vw,68px);line-height:1.04;color:#f8e6ad;text-shadow:0 0 28px rgba(232,186,92,.22);letter-spacing:-.07em;margin:8px 0}
.settings-lead{position:relative;z-index:2;max-width:690px;color:#d8c7a1;font-size:15px;margin:auto}
.archive-status{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(760px,100%);margin-top:22px}
.archive-status span{border:1px solid rgba(221,177,85,.22);border-radius:18px;background:rgba(2,5,14,.48);padding:10px 12px;box-shadow:inset 0 1px 0 rgba(255,235,176,.08)}
.archive-status b{display:block;font-size:11px;color:#a9905b;letter-spacing:.1em}.archive-status i{font-style:normal;color:#f5d889;font-weight:900}
.archive-hub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.archive-gate{position:relative;min-height:126px;text-align:left;border:1px solid rgba(221,177,85,.25);border-radius:24px;overflow:hidden;padding:18px 16px;background:linear-gradient(145deg,rgba(7,13,30,.86),rgba(5,6,14,.88));box-shadow:0 18px 44px rgba(0,0,0,.36);transition:.25s ease}
.archive-gate:before{content:"";position:absolute;inset:0;background:url("./assets/jamigwan/stars-sheet.webp") center/86px 76px no-repeat;opacity:.14;mix-blend-mode:screen;transition:.25s ease}.archive-gate:after{content:"";position:absolute;inset:8px;border:1px solid rgba(221,177,85,.13);border-radius:18px;pointer-events:none}
.archive-gate small,.archive-gate b,.archive-gate span{position:relative;z-index:1;display:block}.archive-gate small{font-size:10px;color:#9e8656;letter-spacing:.16em}.archive-gate b{font-size:21px;color:#f4d98d;margin:8px 0 4px}.archive-gate span{font-size:12px;color:#bba77d;line-height:1.55}
.archive-gate.active,.archive-gate:hover{transform:translateY(-3px);border-color:rgba(241,201,105,.52);box-shadow:0 25px 60px rgba(0,0,0,.48),0 0 24px rgba(220,176,83,.13)}.archive-gate.active:before,.archive-gate:hover:before{opacity:.2}.archive-gate:nth-child(3).active{border-color:rgba(189,35,31,.48)}
.archive-panel{display:none;position:relative;overflow:hidden;border:1px solid rgba(221,177,85,.28);border-radius:34px;background:linear-gradient(160deg,rgba(6,12,29,.86),rgba(3,5,12,.92));box-shadow:0 30px 80px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,235,176,.08);padding:16px;min-height:430px}.archive-panel.active{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;animation:fadeUp .45s cubic-bezier(.22,1,.36,1) both}.archive-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(221,177,85,.13),transparent 32%),url("./assets/jamigwan/simple-astro.webp") 88% 10%/360px no-repeat;opacity:.18;pointer-events:none}
.panel-visual,.record-board,.lineage-map,.forbidden-card,.haunt-map,.vault-list{position:relative;z-index:1}.panel-visual{min-height:420px;border-radius:26px;overflow:hidden;border:1px solid rgba(221,177,85,.22);background:#060a16}.panel-visual img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(1.05);opacity:.82}.panel-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(3,5,12,.76)),radial-gradient(circle at center,transparent 26%,rgba(0,0,0,.42));pointer-events:none}.visual-caption{position:absolute;left:18px;right:18px;bottom:18px;border:1px solid rgba(221,177,85,.24);border-radius:18px;background:rgba(3,5,12,.68);backdrop-filter:blur(8px);padding:13px}.visual-caption b{display:block;color:#f2d582;font-size:18px}.visual-caption span{color:#bca981;font-size:13px}
.record-board{display:grid;gap:12px}.record-paper{position:relative;overflow:hidden;border:1px solid rgba(221,177,85,.23);border-radius:24px;background:linear-gradient(150deg,rgba(14,19,36,.9),rgba(3,5,12,.74));padding:18px;box-shadow:inset 0 1px 0 rgba(255,235,176,.06)}.record-paper:before{content:"";position:absolute;right:-20px;top:-20px;width:210px;height:130px;background:url("./assets/jamigwan/frame-sheet.webp") right 12px top 10px/260px auto no-repeat;opacity:.24;pointer-events:none}.record-paper.critical{border-color:rgba(189,35,31,.42);box-shadow:0 0 28px rgba(123,13,18,.18),inset 0 1px 0 rgba(255,235,176,.06)}.record-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}.record-top span{font-size:11px;letter-spacing:.12em;color:#a9905b}.record-top img{width:52px;height:52px;object-fit:contain;opacity:.9;filter:drop-shadow(0 0 10px rgba(149,22,25,.26))}.record-paper h3{color:#f5dd9b;font-size:24px;line-height:1.2;margin-bottom:8px}.record-paper p{color:#ddcfaa;font-size:14.5px;line-height:1.85}.record-paper em{display:block;position:relative;font-style:normal;color:#f0d49c;background:linear-gradient(90deg,rgba(99,12,15,.55),rgba(99,12,15,.12));border-left:2px solid rgba(189,35,31,.75);padding:8px 10px;margin-top:12px;letter-spacing:.08em}.compact{grid-template-columns:1fr 1fr;margin-top:0}
.lineage-map{min-height:430px;border-radius:26px;border:1px solid rgba(221,177,85,.22);padding:24px;background:radial-gradient(circle at center,rgba(221,177,85,.12),transparent 36%),rgba(2,5,14,.38);grid-column:1/-1}.lineage-mark{position:absolute;inset:50% auto auto 50%;width:min(300px,66%);transform:translate(-50%,-50%);opacity:.13;filter:drop-shadow(0 0 18px rgba(221,177,85,.12))}.lineage-node{position:relative;border:1px solid rgba(221,177,85,.28);border-radius:18px;background:rgba(4,8,18,.72);padding:10px 12px;text-align:center;color:#f2d98e;box-shadow:0 10px 26px rgba(0,0,0,.28)}.lineage-node small{display:block;color:#bca77e;font-size:11px}.emperor{width:min(260px,100%);margin:0 auto 32px;font-size:24px}.lineage-row{display:grid;gap:10px;margin-top:14px}.lineage-row.queens,.lineage-row.princes{grid-template-columns:repeat(5,minmax(0,1fr))}.p5{border-color:rgba(189,35,31,.55);box-shadow:0 0 28px rgba(130,16,20,.24)}
.forbidden-panel{background:linear-gradient(150deg,rgba(3,5,12,.94),rgba(25,2,5,.9))}.forbidden-panel.active,.haunting-panel.active{grid-template-columns:1fr}.forbidden-card{display:grid;grid-template-columns:.85fr 1fr;gap:18px;align-items:center;border-radius:28px;border:1px solid rgba(189,35,31,.38);background:radial-gradient(circle at 20% 40%,rgba(141,15,20,.24),transparent 34%),rgba(3,5,12,.54);padding:16px;overflow:hidden}.forbidden-card img{width:100%;max-height:440px;object-fit:cover;border-radius:22px;opacity:.74;filter:contrast(1.12) saturate(.95)}.forbidden-card h3{font-size:clamp(28px,6vw,48px);color:#f3d88f;line-height:1.1;margin:4px 0 12px}.forbidden-card p{color:#dacba8}.forbidden-card strong{display:inline-block;margin-top:16px;color:#ffb2a3;border:1px solid rgba(189,35,31,.42);border-radius:999px;padding:7px 12px;background:rgba(99,12,15,.26)}.vault-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.vault-list span{border:1px solid rgba(221,177,85,.2);border-radius:18px;background:rgba(255,230,165,.045);padding:14px;text-align:center;color:#e4cc8e}
.haunt-map{min-height:520px;border-radius:28px;overflow:hidden;border:1px solid rgba(221,177,85,.22);background:#05060c}.haunt-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.74;filter:saturate(.9) contrast(1.08)}.haunt-map:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,transparent 20%,rgba(0,0,0,.68)),linear-gradient(180deg,rgba(5,8,18,.15),rgba(35,2,5,.62));pointer-events:none}.haunt-map button{position:absolute;z-index:2;border:1px solid rgba(241,201,105,.52);background:rgba(4,8,18,.72);border-radius:999px;padding:9px 12px;color:#f3d98b;font-size:12px;box-shadow:0 0 22px rgba(0,0,0,.6)}.haunt-map button:hover{background:rgba(91,8,12,.72);transform:translateY(-2px)}
@media(max-width:850px){.archive-status,.archive-hub,.archive-panel.active,.forbidden-card,.lineage-row.queens,.lineage-row.princes,.vault-list,.compact{grid-template-columns:1fr}.settings-hero{min-height:430px}.panel-visual{min-height:300px}.lineage-map{padding:16px}.haunt-map{min-height:420px}.archive-gate{min-height:104px}}
@media(max-width:520px){.settings-archive{padding-left:10px;padding-right:10px}.settings-sigil{width:78vw}.settings-hero{border-radius:28px}.archive-panel{border-radius:26px;padding:12px}.record-paper h3{font-size:21px}.archive-status span{padding:9px}.forbidden-card{padding:12px}.haunt-map button{font-size:11px;padding:7px 9px}}

/* v8: 설정집 심화 기록/오염 인터랙션 */
.settings-archive.red-moon:after{
  background:
    radial-gradient(circle at 74% 18%,rgba(142,12,18,.32),transparent 13%),
    radial-gradient(circle at 50% 28%,rgba(197,151,70,.13),transparent 30%),
    radial-gradient(circle at 78% 70%,rgba(112,0,12,.24),transparent 28%),
    linear-gradient(rgba(226,188,101,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(226,188,101,.02) 1px,transparent 1px);
  background-size:auto,auto,auto,54px 54px,54px 54px;
}
.settings-archive.corrupted .settings-orbit{animation-duration:20s;filter:drop-shadow(0 0 14px rgba(155,22,27,.32));}
.settings-archive.corrupted .settings-stars{opacity:.12;filter:saturate(.75) contrast(1.2) hue-rotate(-8deg)}
.interactive-record{cursor:pointer}.interactive-record:hover{transform:translateY(-2px);border-color:rgba(244,202,109,.46)}
.record-paper b{color:#f2d98e}.prophecy-paper{background:linear-gradient(150deg,rgba(13,18,34,.88),rgba(35,3,7,.58))}
.locked-record{display:none}.locked-record.unlocked{display:block;animation:fadeUp .35s ease both;border-color:rgba(174,33,31,.55)}
.erased-princes{position:relative;z-index:2;margin-top:18px;border:1px solid rgba(151,33,31,.38);border-radius:18px;background:rgba(20,4,7,.46);padding:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.erased-princes b{width:100%;text-align:center;color:#d2b56f;font-size:12px;letter-spacing:.12em}.erased-princes span{color:#d9c494;border:1px solid rgba(156,29,31,.42);border-radius:999px;background:linear-gradient(90deg,rgba(86,8,12,.45),rgba(3,5,12,.34));padding:7px 10px;font-size:12px}.erased-princes span:before{content:'▓ ';color:#8f1d22}.p4{border-color:rgba(221,177,85,.34)}
.deep-vault button{border:1px solid rgba(221,177,85,.2);border-radius:18px;background:rgba(255,230,165,.045);padding:14px;text-align:center;color:#e4cc8e;font-family:inherit}.deep-vault button:hover,.deep-vault button.active{border-color:rgba(191,39,37,.55);background:rgba(87,9,14,.28);transform:translateY(-2px)}.deep-vault small{display:block;margin-top:4px;color:#ad9870}.vault-detail{margin-top:12px}.haunt-detail p{letter-spacing:.02em}.haunt-map button.active{background:rgba(91,8,12,.82);box-shadow:0 0 26px rgba(145,24,28,.38)}
@keyframes archiveGlitch{0%,100%{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,0)}80%{transform:translate(1px,1px)}}
.settings-archive.corrupted .record-paper.critical{animation:archiveGlitch .28s steps(2,end) 2}


.glitch-rate{
animation:flickerRate 3s infinite;
color:#d9c27a;
}
.red-alert{
animation:redAlert 1.5s infinite;
color:#a10d0d;
text-shadow:0 0 8px rgba(255,0,0,.6);
}
@keyframes flickerRate{
0%{opacity:1}
48%{opacity:1}
49%{opacity:.4}
50%{opacity:1}
89%{opacity:1}
90%{opacity:.5}
100%{opacity:1}
}
@keyframes redAlert{
0%{opacity:1}
50%{opacity:.55}
100%{opacity:1}
}


/* v10 corrected single assets */
.settings-hero:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:22px;
  width:min(520px,68%);
  height:110px;
  transform:translateX(-50%);
  background:url("./assets/jamigwan/decor/별과부드러운프레임수정.webp") center/contain no-repeat;
  opacity:.18;
  pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(221,177,85,.18));
}
.record-paper:nth-child(2n):before{
  background-image:url("./assets/jamigwan/decor/보름달과초승달프레임수정.webp");
}
.record-paper.critical:before{
  background-image:url("./assets/jamigwan/decor/태양을감싼달프레임수정.webp");
  opacity:.28;
}
.archive-gate:nth-child(1):before{background-image:url("./assets/jamigwan/decor/얇은별수정.webp")}
.archive-gate:nth-child(2):before{background-image:url("./assets/jamigwan/decor/밝은태양수정.webp")}
.archive-gate:nth-child(3):before{background-image:url("./assets/jamigwan/decor/초승달수정.webp")}
.archive-gate:nth-child(4):before{background-image:url("./assets/jamigwan/decor/삐죽이는밝은별수정.webp")}


/* v11 immersive archive update */
body.red-moon{
 filter:hue-rotate(-18deg) saturate(1.12);
}

#red-moon-warning{
 position:fixed;
 top:28px;
 left:50%;
 transform:translateX(-50%);
 color:#c52a2a;
 font-size:12px;
 letter-spacing:4px;
 z-index:9999;
 opacity:.82;
 text-shadow:0 0 14px rgba(255,0,0,.65);
 animation:redMoonPulse 1.6s infinite;
}

.archive-corrupt{
 animation:archiveCorrupt .9s ease;
}

@keyframes archiveCorrupt{
 0%{transform:translateX(0)}
 20%{transform:translateX(-2px)}
 40%{transform:translateX(2px)}
 60%{filter:contrast(1.2) brightness(.9)}
 100%{transform:translateX(0)}
}

@keyframes redMoonPulse{
 0%{opacity:.4}
 50%{opacity:1}
 100%{opacity:.4}
}


/* v12 stronger effects */

.danger-error{
 color:#ff2b2b!important;
 text-shadow:0 0 14px rgba(255,0,0,.9);
 letter-spacing:3px;
 animation:errorBlink .12s infinite alternate;
}

.text-static{
 filter:blur(.4px);
 transform:skewX(8deg);
 opacity:.7;
}

.screen-glitch{
 animation:screenGlitch .42s linear;
}

.heavy-corruption{
 animation:heavyCorrupt 1.2s ease;
 filter:contrast(1.22) saturate(1.18);
}

.corruption-flash{
 position:fixed;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(120,0,0,.18);
 color:#ff4444;
 font-size:34px;
 letter-spacing:12px;
 z-index:999999;
 text-shadow:0 0 24px rgba(255,0,0,.95);
 animation:flashFlicker .08s infinite alternate;
 pointer-events:none;
}

@keyframes errorBlink{
 from{opacity:.35}
 to{opacity:1}
}

@keyframes screenGlitch{
 0%{transform:translateX(0)}
 20%{transform:translateX(-4px)}
 40%{transform:translateX(4px)}
 60%{transform:translateY(2px)}
 100%{transform:translateX(0)}
}

@keyframes heavyCorrupt{
 0%{filter:brightness(1)}
 20%{filter:brightness(.5) contrast(1.4)}
 50%{transform:scale(1.003)}
 100%{filter:brightness(1)}
}

@keyframes flashFlicker{
 from{opacity:.4}
 to{opacity:1}
}


/* v14 checked data effects */
.glitch-rate{
  display:inline-block;
  min-width:52px;
  color:#d9c27a;
  text-shadow:0 0 10px rgba(221,177,85,.55);
}
.red-alert{
  color:#b41919!important;
  text-shadow:0 0 10px rgba(255,0,0,.7);
  animation:redAlert 1.15s infinite steps(2,end);
}
.doom-star,
.doom-record{
  animation:doomStatic 2.2s infinite;
}
.doom-record h3:after{
  content:"  ERROR";
  color:#b42121;
  font-size:.7em;
  letter-spacing:3px;
  opacity:.0;
  animation:errorGhost 2.4s infinite;
}
@keyframes redAlert{
  0%,100%{opacity:1;filter:none}
  50%{opacity:.48;filter:blur(.5px)}
}
@keyframes doomStatic{
  0%,92%,100%{transform:none;filter:none}
  93%{transform:translateX(-1px);filter:contrast(1.25)}
  94%{transform:translateX(1px)}
  95%{transform:none}
}
@keyframes errorGhost{
  0%,78%,100%{opacity:0}
  80%,86%{opacity:1}
}


/* v22 clean fix: settings effects only inside active settings panels */
.screen-glitch-local{animation:screenGlitch .42s linear;}
.heavy-corruption-local{animation:heavyCorrupt 1.2s ease;filter:contrast(1.22) saturate(1.18);}
.danger-error{color:#ff2b2b!important;text-shadow:0 0 14px rgba(255,0,0,.9);letter-spacing:3px;animation:errorBlink .12s infinite alternate;}
.text-static{filter:blur(.4px);transform:skewX(8deg);opacity:.72;}
.corruption-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(120,0,0,.18);color:#ff4444;font-size:34px;letter-spacing:12px;z-index:50;text-shadow:0 0 24px rgba(255,0,0,.95);animation:flashFlicker .08s infinite alternate;pointer-events:none;border-radius:inherit;}
@keyframes errorBlink{from{opacity:.35}to{opacity:1}}
@keyframes screenGlitch{0%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateY(2px)}100%{transform:translateX(0)}}
@keyframes heavyCorrupt{0%{filter:brightness(1)}20%{filter:brightness(.5) contrast(1.4)}50%{transform:scale(1.003)}100%{filter:brightness(1)}}
@keyframes flashFlicker{from{opacity:.4}to{opacity:1}}

/* v22 clean fix: only imperial panel becomes a stacked full-width ledger. Other archive panels keep original grid. */
#archive-imperial.archive-panel.active{display:block!important;}
#archive-imperial .lineage-map{width:100%!important;max-width:100%!important;margin:0 auto 0!important;box-sizing:border-box!important;}
#archive-imperial .record-board.compact{width:100%!important;max-width:100%!important;margin:34px auto 0!important;padding:0 14px 8px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:stretch!important;justify-content:stretch!important;}
#archive-imperial .record-board.compact .record-paper{width:100%!important;max-width:100%!important;min-width:0!important;min-height:230px!important;margin:0!important;padding:24px 24px!important;box-sizing:border-box!important;display:block!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:break-word!important;}
#archive-imperial .record-board.compact .record-paper h3{font-size:clamp(23px,1.7vw,30px)!important;line-height:1.25!important;margin:0 0 14px!important;writing-mode:horizontal-tb!important;white-space:normal!important;word-break:keep-all!important;}
#archive-imperial .record-board.compact .record-paper p{margin:0!important;max-width:none!important;line-height:1.78!important;writing-mode:horizontal-tb!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:break-word!important;columns:auto!important;}
#archive-imperial .record-board.compact .record-paper.locked-record{grid-column:1 / -1!important;min-height:160px!important;}
@media(max-width:980px){#archive-imperial .record-board.compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:640px){#archive-imperial .record-board.compact{grid-template-columns:1fr!important;padding:0 10px 8px!important;}#archive-imperial .record-board.compact .record-paper.locked-record{grid-column:auto!important;}}


/* v23 cold palace + vault differentiated effects */
.archive-signal{
  position:absolute;
  left:50%;
  top:32px;
  transform:translateX(-50%);
  z-index:50;
  padding:10px 18px;
  border:1px solid rgba(213,177,95,.38);
  background:rgba(4,8,18,.82);
  color:#d8bd78;
  font-size:12px;
  letter-spacing:4px;
  text-shadow:0 0 10px rgba(213,177,95,.35);
  pointer-events:none;
  animation:archiveSignalFade 1.5s ease both;
}

.archive-signal.fall-signal{
  color:#b9bfd7;
  border-color:rgba(150,160,190,.25);
  background:rgba(0,0,0,.74);
}

.archive-signal.seal-signal{
  color:#b72727;
  border-color:rgba(160,25,25,.45);
  text-shadow:0 0 12px rgba(180,0,0,.5);
}

.archive-signal.blood-signal{
  color:#d6b468;
  border-color:rgba(120,16,16,.55);
  box-shadow:inset 0 0 18px rgba(120,0,0,.16);
}

.archive-signal.denied-signal{
  color:#8d0f0f;
  border-color:rgba(110,0,0,.45);
  background:rgba(8,0,0,.78);
  letter-spacing:5px;
}

@keyframes archiveSignalFade{
  0%{opacity:0;transform:translate(-50%,-8px);filter:blur(2px)}
  18%{opacity:1;transform:translate(-50%,0);filter:blur(0)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-3px)}
}

/* 금서 1호: 낙하/암전 */
#settings.vault-sky-fall .settings-stars,
#settings.vault-sky-fall .settings-hero{
  filter:brightness(.42) contrast(1.16);
}

#settings.vault-sky-fall:after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:44%;
  background:linear-gradient(to bottom, rgba(255,255,255,.0), rgba(190,190,220,.55), rgba(0,0,0,0));
  transform:translateX(-50%) rotate(12deg);
  opacity:.65;
  pointer-events:none;
  animation:fallingStarLine .9s ease both;
}

@keyframes fallingStarLine{
  0%{top:-30%;opacity:0}
  25%{opacity:.72}
  100%{top:80%;opacity:0}
}

.vault-detail.vault-fall-dark{
  animation:vaultFallDark 1.1s ease;
}

@keyframes vaultFallDark{
  0%{filter:brightness(1)}
  35%{filter:brightness(.45)}
  100%{filter:brightness(1)}
}

/* 금서 4호: 붉은 도장/먹 번짐 */
.vault-detail.vault-fail-stain{
  position:relative;
  overflow:hidden;
}

.vault-detail.vault-fail-stain:after{
  content:"封印失敗";
  position:absolute;
  right:24px;
  top:18px;
  color:rgba(150,0,0,.62);
  border:2px solid rgba(150,0,0,.46);
  padding:8px 12px;
  font-size:18px;
  letter-spacing:4px;
  transform:rotate(-12deg) scale(.92);
  animation:sealStampIn .55s ease both;
}

.vault-detail.vault-fail-stain:before{
  content:"";
  position:absolute;
  inset:auto -20px -28px -20px;
  height:70px;
  background:radial-gradient(circle at 30% 20%, rgba(110,0,0,.28), transparent 52%);
  opacity:.75;
  pointer-events:none;
}

@keyframes sealStampIn{
  0%{opacity:0;transform:rotate(-12deg) scale(1.6);filter:blur(2px)}
  100%{opacity:1;transform:rotate(-12deg) scale(.92);filter:blur(0)}
}

/* 금서 8호: 혈통선/왜곡률 상승 */
.vault-detail.vault-bloodline{
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 28px rgba(120,0,0,.16), 0 0 22px rgba(120,0,0,.08);
}

.vault-detail.vault-bloodline:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg, transparent 0 22%, rgba(110,0,0,.28) 22.5%, transparent 24%),
    linear-gradient(38deg, transparent 0 54%, rgba(200,160,80,.20) 55%, transparent 57%),
    linear-gradient(160deg, transparent 0 68%, rgba(110,0,0,.22) 69%, transparent 71%);
  opacity:.0;
  animation:bloodlineTrace 1.3s ease both;
  pointer-events:none;
}

@keyframes bloodlineTrace{
  0%{opacity:0;filter:blur(4px)}
  35%{opacity:.85;filter:blur(0)}
  100%{opacity:.24}
}

/* 열람 금지: 검열/감시 */
.vault-detail.vault-door-denied{
  position:relative;
  overflow:hidden;
  filter:brightness(.86);
}

.vault-detail.vault-door-denied p{
  animation:censorBreath 1.2s ease;
}

.vault-detail.vault-door-denied:after{
  content:"ACCESS DENIED";
  position:absolute;
  left:24px;
  bottom:18px;
  color:rgba(120,0,0,.55);
  font-size:12px;
  letter-spacing:5px;
  animation:deniedBlink .9s steps(2,end) both;
}

@keyframes censorBreath{
  0%,100%{filter:none}
  45%{filter:blur(1.2px);opacity:.72}
}

@keyframes deniedBlink{
  0%,20%,40%,60%,80%{opacity:.15}
  10%,30%,50%,70%,100%{opacity:1}
}


/* v24 stronger vault effects: visible full-panel impact */
#settings{
  position:relative !important;
  overflow:hidden;
}

#settings .vault-impact{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:99999;
  width:min(720px, 88vw);
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 34px;
  box-sizing:border-box;
  text-align:center;
  pointer-events:none;
  border:1px solid rgba(216,180,92,.54);
  background:
    radial-gradient(circle at 50% 40%, rgba(216,180,92,.18), transparent 55%),
    linear-gradient(180deg, rgba(5,8,18,.92), rgba(0,0,0,.96));
  box-shadow:
    0 0 60px rgba(0,0,0,.9),
    inset 0 0 45px rgba(216,180,92,.12);
  animation:vaultImpactIn 1.85s ease both;
}

#settings .vault-impact b{
  display:block;
  color:#e6c876;
  font-size:clamp(24px, 4vw, 48px);
  line-height:1.15;
  letter-spacing:6px;
  text-shadow:0 0 22px rgba(216,180,92,.52);
}

#settings .vault-impact span{
  display:block;
  margin-top:14px;
  color:rgba(239,226,181,.76);
  font-size:clamp(12px, 1.5vw, 16px);
  letter-spacing:3px;
}

@keyframes vaultImpactIn{
  0%{opacity:0;filter:blur(8px);transform:translate(-50%,-50%) scale(1.16)}
  12%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
  76%{opacity:1}
  100%{opacity:0;filter:blur(5px);transform:translate(-50%,-50%) scale(.98)}
}

/* 금서 1호: 화면 암전 + 거대한 낙하선 */
#settings.vault-sky-fall::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 28%, rgba(210,220,255,.15), transparent 14%),
    linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.62));
  animation:vaultFallBlackout 1.85s ease both;
}

#settings.vault-sky-fall::after{
  content:"";
  position:fixed;
  left:50%;
  top:-20vh;
  z-index:99991;
  width:5px;
  height:120vh;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(238,238,255,.92), rgba(191,166,92,.6), transparent);
  box-shadow:
    0 0 26px rgba(255,255,255,.7),
    0 0 80px rgba(216,180,92,.38);
  transform:translateX(-50%) rotate(15deg);
  animation:vaultMeteorStrike 1.25s cubic-bezier(.12,.8,.18,1) both;
}

#settings .vault-impact.impact-fall{
  border-color:rgba(180,190,230,.52);
  box-shadow:0 0 90px rgba(0,0,0,.95), inset 0 0 65px rgba(180,190,230,.16);
}

@keyframes vaultFallBlackout{
  0%{opacity:0}
  12%,70%{opacity:1}
  100%{opacity:0}
}

@keyframes vaultMeteorStrike{
  0%{top:-120vh;opacity:0}
  16%{opacity:1}
  100%{top:70vh;opacity:0}
}

/* 금서 4호: 화면 중앙 붉은 도장 + 피먹 번짐 */
#settings.vault-seal-fail::before{
  content:"封印失敗";
  position:fixed;
  left:50%;
  top:50%;
  z-index:100000;
  transform:translate(-50%,-50%) rotate(-13deg);
  width:min(440px, 76vw);
  height:min(220px, 34vw);
  display:flex;
  align-items:center;
  justify-content:center;
  border:8px double rgba(185,0,0,.78);
  color:rgba(190,0,0,.86);
  background:rgba(38,0,0,.13);
  font-size:clamp(44px, 9vw, 96px);
  font-weight:900;
  letter-spacing:10px;
  text-shadow:0 0 22px rgba(220,0,0,.54);
  box-shadow:0 0 70px rgba(120,0,0,.56), inset 0 0 36px rgba(120,0,0,.28);
  pointer-events:none;
  animation:vaultSealPunch 1.45s ease both;
}

#settings.vault-seal-fail::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:99989;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 80%, rgba(120,0,0,.42), transparent 30%),
    radial-gradient(circle at 70% 20%, rgba(90,0,0,.30), transparent 28%),
    linear-gradient(180deg, rgba(50,0,0,.18), transparent);
  animation:vaultRedStain 1.65s ease both;
}

#settings .vault-impact.impact-seal b{
  color:#ff4a35;
  text-shadow:0 0 26px rgba(255,0,0,.62);
}

@keyframes vaultSealPunch{
  0%{opacity:0;filter:blur(8px);transform:translate(-50%,-50%) rotate(-13deg) scale(2.4)}
  18%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) rotate(-13deg) scale(1)}
  65%{opacity:.92}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-13deg) scale(.96)}
}

@keyframes vaultRedStain{
  0%{opacity:0}
  18%,72%{opacity:1}
  100%{opacity:0}
}

/* 금서 8호: 혈통선이 패널 전체를 가로지름 */
#settings.vault-blood-react::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(150,0,0,.75) 18.4%, transparent 19.5%),
    linear-gradient(38deg, transparent 0 43%, rgba(218,170,78,.55) 43.5%, transparent 45%),
    linear-gradient(162deg, transparent 0 62%, rgba(170,0,0,.68) 62.5%, transparent 64%),
    linear-gradient(82deg, transparent 0 76%, rgba(218,170,78,.38) 76.5%, transparent 78%);
  filter:drop-shadow(0 0 16px rgba(180,0,0,.7));
  animation:vaultBloodWeb 2.1s ease both;
}

#settings.vault-blood-react::after{
  content:"皇血反應";
  position:fixed;
  right:7vw;
  top:13vh;
  z-index:99991;
  color:rgba(216,180,92,.76);
  border:1px solid rgba(216,180,92,.48);
  padding:12px 16px;
  letter-spacing:6px;
  font-size:clamp(16px, 3vw, 36px);
  transform:rotate(8deg);
  text-shadow:0 0 20px rgba(216,180,92,.5);
  animation:vaultBloodSeal 1.9s ease both;
  pointer-events:none;
}

#settings .vault-impact.impact-blood{
  border-color:rgba(160,0,0,.72);
  background:
    radial-gradient(circle at 50% 40%, rgba(155,0,0,.26), transparent 55%),
    linear-gradient(180deg, rgba(12,4,8,.94), rgba(0,0,0,.97));
}

#settings .vault-impact.impact-blood b{
  color:#d8b45c;
  text-shadow:0 0 28px rgba(180,0,0,.82);
}

@keyframes vaultBloodWeb{
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  22%{opacity:1;clip-path:inset(0 0 0 0)}
  78%{opacity:1}
  100%{opacity:0}
}

@keyframes vaultBloodSeal{
  0%{opacity:0;filter:blur(4px);transform:rotate(8deg) scale(1.45)}
  22%,76%{opacity:1;filter:blur(0);transform:rotate(8deg) scale(1)}
  100%{opacity:0}
}

#settings .glitch-rate.rate-impact{
  transform:scale(1.18);
  filter:drop-shadow(0 0 12px rgba(220,0,0,.78));
}

/* 열람 금지: 검열/감시를 확실하게 */
#settings.vault-door-watch::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 7px, rgba(120,0,0,.20) 8px 10px),
    radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(0,0,0,.82) 72%);
  animation:vaultDoorScan 1.8s ease both;
}

#settings.vault-door-watch::after{
  content:"ACCESS LOGGED";
  position:fixed;
  left:50%;
  bottom:12vh;
  z-index:99991;
  transform:translateX(-50%);
  color:rgba(255,0,0,.78);
  font-size:clamp(22px, 5vw, 58px);
  letter-spacing:10px;
  text-shadow:0 0 26px rgba(255,0,0,.58);
  animation:vaultAccessBlink 1.4s steps(2,end) both;
  pointer-events:none;
}

#settings .vault-impact.impact-denied{
  border-color:rgba(160,0,0,.78);
  background:
    repeating-linear-gradient(90deg, rgba(90,0,0,.16) 0 12px, transparent 12px 22px),
    linear-gradient(180deg, rgba(12,0,0,.96), rgba(0,0,0,.98));
}

#settings .vault-impact.impact-denied b{
  color:#ff2b2b;
  text-shadow:0 0 28px rgba(255,0,0,.78);
}

@keyframes vaultDoorScan{
  0%{opacity:0}
  12%,78%{opacity:1}
  100%{opacity:0}
}

@keyframes vaultAccessBlink{
  0%,18%,36%,54%,72%{opacity:.12}
  9%,27%,45%,63%,100%{opacity:1}
}

/* 카드 자체도 확실하게 반응 */
#vaultDetail.vault-detail.vault-fall-dark,
.vault-detail.vault-fall-dark{
  animation:v24CardFall 1.4s ease both;
}

#vaultDetail.vault-detail.vault-fail-stain,
.vault-detail.vault-fail-stain{
  animation:v24CardSeal 1.25s ease both;
}

#vaultDetail.vault-detail.vault-bloodline,
.vault-detail.vault-bloodline{
  animation:v24CardBlood 1.45s ease both;
}

#vaultDetail.vault-detail.vault-door-denied,
.vault-detail.vault-door-denied{
  animation:v24CardDenied 1.3s ease both;
}

@keyframes v24CardFall{
  0%,100%{filter:brightness(1)}
  35%{filter:brightness(.36) contrast(1.4)}
}

@keyframes v24CardSeal{
  0%{box-shadow:inset 0 0 0 rgba(180,0,0,0)}
  45%{box-shadow:inset 0 0 70px rgba(180,0,0,.34), 0 0 35px rgba(180,0,0,.28)}
  100%{box-shadow:inset 0 0 28px rgba(120,0,0,.18)}
}

@keyframes v24CardBlood{
  0%{box-shadow:inset 0 0 0 rgba(180,0,0,0)}
  50%{box-shadow:inset 0 0 85px rgba(140,0,0,.38), 0 0 50px rgba(160,0,0,.24)}
  100%{box-shadow:inset 0 0 30px rgba(120,0,0,.18)}
}

@keyframes v24CardDenied{
  0%,100%{filter:none}
  40%{filter:brightness(.62) contrast(1.8) blur(.5px)}
}


/* v25 vault tone adjustment: 북천 기록 훼손 + 황혈 은근한 반응 */
#settings .vault-impact{
  width:min(560px, 82vw) !important;
  min-height:112px !important;
  padding:22px 28px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(216,180,92,.12), transparent 58%),
    linear-gradient(180deg, rgba(5,8,18,.88), rgba(0,0,0,.93)) !important;
}

#settings .vault-impact b{
  font-size:clamp(22px, 3.1vw, 36px) !important;
  letter-spacing:5px !important;
}

#settings .vault-impact span{
  font-size:clamp(11px, 1.25vw, 14px) !important;
  letter-spacing:2.4px !important;
}

/* 금서 제1호: 과한 낙하선 축소, 짧은 암전 + 얇은 별빛 */
#settings.vault-sky-fall::before{
  background:
    radial-gradient(circle at 50% 28%, rgba(190,200,230,.11), transparent 18%),
    linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.34)) !important;
  animation:v25FallBlackout 1.25s ease both !important;
}

#settings.vault-sky-fall::after{
  left:56% !important;
  top:-18vh !important;
  width:2px !important;
  height:72vh !important;
  background:linear-gradient(to bottom, transparent, rgba(232,226,204,.78), rgba(212,177,96,.34), transparent) !important;
  box-shadow:
    0 0 12px rgba(255,245,214,.46),
    0 0 34px rgba(216,180,92,.22) !important;
  transform:translateX(-50%) rotate(18deg) !important;
  animation:v25MeteorStreak 1.05s ease both !important;
}

#settings .vault-impact.impact-fall{
  border-color:rgba(170,176,205,.38) !important;
  box-shadow:
    0 0 42px rgba(0,0,0,.82),
    inset 0 0 34px rgba(170,176,205,.10) !important;
}

@keyframes v25FallBlackout{
  0%{opacity:0}
  18%,62%{opacity:.82}
  100%{opacity:0}
}

@keyframes v25MeteorStreak{
  0%{top:-60vh;opacity:0}
  30%{opacity:.82}
  100%{top:60vh;opacity:0}
}

/* 금서 제8호: 촌스러운 혈통선 제거, 붉은 먹 번짐 + 희미한 황실 반응 */
#settings.vault-blood-react::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:99990 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 52% 48%, rgba(120,0,0,.18), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(216,180,92,.10), transparent 36%),
    linear-gradient(180deg, rgba(50,0,0,.09), transparent 62%) !important;
  filter:none !important;
  clip-path:none !important;
  animation:v25BloodInkBloom 1.75s ease both !important;
}

#settings.vault-blood-react::after{
  content:"皇室" !important;
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  z-index:99991 !important;
  width:190px !important;
  height:190px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translate(-50%,-50%) rotate(-7deg) !important;
  color:rgba(216,180,92,.22) !important;
  border:1px solid rgba(216,180,92,.18) !important;
  border-radius:50% !important;
  padding:0 !important;
  letter-spacing:10px !important;
  font-size:34px !important;
  text-shadow:0 0 18px rgba(130,0,0,.22) !important;
  animation:v25ImperialSealBreath 1.65s ease both !important;
  pointer-events:none !important;
}

#settings .vault-impact.impact-blood{
  border-color:rgba(155,24,18,.42) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(110,0,0,.16), transparent 58%),
    linear-gradient(180deg, rgba(12,5,8,.90), rgba(0,0,0,.94)) !important;
  box-shadow:
    0 0 46px rgba(0,0,0,.86),
    inset 0 0 38px rgba(120,0,0,.12) !important;
}

#settings .vault-impact.impact-blood b{
  color:#d9bd79 !important;
  text-shadow:0 0 18px rgba(150,0,0,.36) !important;
}

.vault-detail.vault-bloodline,
#vaultDetail.vault-detail.vault-bloodline{
  box-shadow:
    inset 0 0 34px rgba(112,0,0,.16),
    0 0 24px rgba(112,0,0,.10) !important;
  animation:v25CardBloodInk 1.35s ease both !important;
}

.vault-detail.vault-bloodline:before{
  background:
    radial-gradient(circle at 82% 14%, rgba(150,0,0,.22), transparent 24%),
    radial-gradient(circle at 8% 92%, rgba(216,180,92,.11), transparent 28%) !important;
  opacity:.55 !important;
  animation:v25DetailInk 1.25s ease both !important;
}

@keyframes v25BloodInkBloom{
  0%{opacity:0;filter:blur(8px)}
  34%{opacity:1;filter:blur(0)}
  100%{opacity:0}
}

@keyframes v25ImperialSealBreath{
  0%{opacity:0;filter:blur(8px);transform:translate(-50%,-50%) rotate(-7deg) scale(1.28)}
  36%{opacity:.9;filter:blur(0);transform:translate(-50%,-50%) rotate(-7deg) scale(1)}
  100%{opacity:0;filter:blur(3px)}
}

@keyframes v25CardBloodInk{
  0%{filter:brightness(1)}
  45%{filter:brightness(.92) saturate(1.18)}
  100%{filter:brightness(1)}
}

@keyframes v25DetailInk{
  0%{opacity:0;filter:blur(8px)}
  45%{opacity:.6;filter:blur(0)}
  100%{opacity:.22}
}


/* v27: keep vault effects, remove only the intrusive black rectangle popup */
#settings .vault-impact{
  width:auto !important;
  min-width:0 !important;
  max-width:86vw !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  pointer-events:none !important;
}

#settings .vault-impact b{
  display:block !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#e6c876 !important;
  font-size:clamp(24px, 3.6vw, 42px) !important;
  line-height:1.12 !important;
  letter-spacing:6px !important;
  text-shadow:
    0 0 14px rgba(216,180,92,.62),
    0 0 34px rgba(0,0,0,.95) !important;
}

#settings .vault-impact span{
  display:block !important;
  margin-top:10px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(239,226,181,.74) !important;
  font-size:clamp(11px, 1.25vw, 14px) !important;
  letter-spacing:3px !important;
  text-shadow:
    0 0 12px rgba(0,0,0,.95),
    0 0 18px rgba(216,180,92,.24) !important;
}

/* 금서 4호 텍스트도 박스 없이 붉은 글자만 */
#settings .vault-impact.impact-seal,
#settings .vault-impact.impact-blood,
#settings .vault-impact.impact-fall,
#settings .vault-impact.impact-denied{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#settings .vault-impact.impact-seal b,
#settings .vault-impact.impact-denied b{
  color:#d8392e !important;
  text-shadow:
    0 0 14px rgba(255,0,0,.62),
    0 0 34px rgba(0,0,0,.95) !important;
}

#settings .vault-impact.impact-blood b{
  color:#d9bd79 !important;
  text-shadow:
    0 0 12px rgba(150,0,0,.42),
    0 0 30px rgba(0,0,0,.95) !important;
}

/* 혹시 이전 팝업 배경 애니메이션이 남아도 네모가 보이지 않게 */
@keyframes vaultImpactIn{
  0%{opacity:0;filter:blur(5px);transform:translate(-50%,-50%) scale(1.08)}
  15%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1}
  100%{opacity:0;filter:blur(3px);transform:translate(-50%,-50%) scale(.98)}
}


/* v29: keep 금서 effects, remove only the full-screen covering background layer */

/* 금서 제1호: 암전 네모만 제거, 얇은 낙하선(::after)은 유지 */
#settings.vault-sky-fall::before{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
}

/* 금서 제4호: 화면 전체 붉은/검은 덮개만 제거.
   봉인실패 대형 도장(::before)은 그대로 유지. */
#settings.vault-seal-fail::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
}

/* 금서 제8호: 화면 전체 먹 번짐 덮개만 제거.
   희미한 황실 문양/반응(::after)은 그대로 유지. */
#settings.vault-blood-react::before{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
}

/* 열람 금지: 화면 전체 스캔/검은 덮개만 제거.
   ACCESS LOGGED 문구(::after)는 그대로 유지. */
#settings.vault-door-watch::before{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
}

/* 중앙 문구는 검은 박스 없이 텍스트만 유지 */
#settings .vault-impact{
  width:auto !important;
  min-width:0 !important;
  max-width:82vw !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  pointer-events:none !important;
}

#settings .vault-impact b{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:
    0 0 14px rgba(216,180,92,.62),
    0 0 34px rgba(0,0,0,.95) !important;
}

#settings .vault-impact span{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:
    0 0 12px rgba(0,0,0,.95),
    0 0 18px rgba(216,180,92,.24) !important;
}

/* 혹시 v28식 전체 제거 룰이 끼어들지 않았는지 대비: 남아있다면 효과 핵심만 다시 활성화 */
#settings.vault-sky-fall::after{
  display:block !important;
  visibility:visible !important;
}

#settings.vault-seal-fail::before{
  display:flex !important;
  visibility:visible !important;
}

#settings.vault-blood-react::after{
  display:flex !important;
  visibility:visible !important;
}

#settings.vault-door-watch::after{
  display:block !important;
  visibility:visible !important;
}


/* v31 BGM control */
.bgm-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100000;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border:1px solid rgba(215,180,96,.42);
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 20%, rgba(215,180,96,.14), transparent 48%),
    rgba(5,7,14,.74);
  color:rgba(235,215,160,.86);
  font-size:12px;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:
    0 0 24px rgba(0,0,0,.46),
    inset 0 0 18px rgba(215,180,96,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.bgm-toggle:hover{
  transform:translateY(-2px);
  border-color:rgba(232,198,113,.7);
  color:#f1d98a;
  box-shadow:
    0 0 30px rgba(0,0,0,.54),
    0 0 18px rgba(215,180,96,.16),
    inset 0 0 18px rgba(215,180,96,.11);
}

.bgm-toggle.playing{
  border-color:rgba(170,38,35,.55);
  color:#e9c56d;
  box-shadow:
    0 0 34px rgba(95,0,0,.32),
    inset 0 0 20px rgba(170,38,35,.14);
}

.bgm-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(215,180,96,.36);
  font-size:13px;
  line-height:1;
}

.bgm-toggle.playing .bgm-icon{
  animation:bgmPulse 1.5s ease infinite;
}

@keyframes bgmPulse{
  0%,100%{box-shadow:0 0 0 rgba(215,180,96,0); transform:scale(1)}
  50%{box-shadow:0 0 14px rgba(215,180,96,.42); transform:scale(1.05)}
}

@media (max-width: 640px){
  .bgm-toggle{
    right:12px;
    bottom:12px;
    padding:9px 11px;
    font-size:11px;
  }
  .bgm-text{
    max-width:62px;
  }
}


/* v32 BGM readiness/autostart label */
.bgm-toggle.ready{
  border-color:rgba(215,180,96,.58);
  color:#ecd08a;
  box-shadow:
    0 0 30px rgba(0,0,0,.50),
    0 0 14px rgba(215,180,96,.12),
    inset 0 0 18px rgba(215,180,96,.10);
}

.bgm-toggle.ready .bgm-icon{
  animation:bgmReadyPulse 1.8s ease infinite;
}

@keyframes bgmReadyPulse{
  0%,100%{opacity:.72; transform:scale(1)}
  50%{opacity:1; transform:scale(1.06)}
}


/* v33 BGM toggle state hard fix */
.bgm-toggle .bgm-text{
  min-width:66px;
  text-align:left;
}

.bgm-toggle.playing .bgm-text{
  color:#f2d782;
}

.bgm-toggle:not(.playing) .bgm-text{
  color:rgba(235,215,160,.78);
}


/* v34 BGM hard state sync */
#bgmToggle[data-bgm-state="on"] .bgm-text::before,
#bgmToggle[data-bgm-state="off"] .bgm-text::before{
  content:"" !important;
}

#bgmToggle[data-bgm-state="on"]{
  border-color:rgba(170,38,35,.65) !important;
  color:#f2d782 !important;
}

#bgmToggle[data-bgm-state="off"]{
  border-color:rgba(215,180,96,.42) !important;
  color:rgba(235,215,160,.82) !important;
}

#bgmToggle[data-bgm-state="on"] .bgm-icon{
  animation:bgmPulse 1.5s ease infinite !important;
}

#bgmToggle .bgm-text{
  min-width:68px !important;
  display:inline-block !important;
}


/* v35: original header BGM button is the only visible BGM control */
#bgmBtn.bgm-btn{
  user-select:none;
}

#bgmBtn.bgm-btn.playing,
#bgmBtn.bgm-btn[data-bgm-state="on"]{
  color:#f2d782 !important;
  border-color:rgba(170,38,35,.62) !important;
  box-shadow:
    0 0 22px rgba(90,0,0,.30),
    inset 0 0 16px rgba(170,38,35,.12) !important;
}

#siteBgm,
#bgmToggle,
.bgm-toggle{
  display:none !important;
}


/* v37 example copy hint */
.example-slot small{
  display:block;
  margin-top:6px;
  font-size:10px;
  letter-spacing:2px;
  color:rgba(218,188,118,.58);
  font-weight:400;
}

.example-slot:hover small{
  color:rgba(238,209,139,.88);
}


/* v39 MOBILE ONLY PATCH — PC layout untouched */
@media(max-width:760px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
    touch-action:pan-y;
  }

  body,
  body button,
  body input,
  body textarea,
  body select,
  .lore-card,
  .character-card,
  .record-paper,
  .archive-gate,
  .archive-panel,
  .vault-detail,
  .haunt-detail,
  .example-slot,
  .visual-copy,
  .panel-text,
  .lineage-map{
    font-family:"Iropke Batang","KoPub Batang","Noto Serif KR","AppleMyungjo","Batang","Nanum Myeongjo",serif !important;
  }

  img,
  video,
  canvas,
  svg{
    max-width:100% !important;
  }

  #app,
  main,
  .page,
  .archive-page,
  .settings-archive,
  #settings{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .bg-ritual,
  .bg-ritual:before,
  .bg-ritual:after,
  .settings-stars,
  .settings-stars:before,
  .settings-stars:after,
  .corruption-flash,
  .vault-impact,
  .archive-signal{
    max-width:100vw !important;
    overflow:hidden !important;
  }

  .topbar{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .nav{
    min-width:0 !important;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .main-visual,
  .archive-page,
  .settings-archive{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .settings-hero{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    border-radius:24px !important;
  }

  .archive-status{
    grid-template-columns:1fr !important;
  }

  .archive-hub{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    margin:14px 0 16px !important;
  }

  .archive-gate{
    min-width:0 !important;
    min-height:112px !important;
    padding:14px 12px !important;
    border-radius:18px !important;
    transform:none !important;
  }

  .archive-gate.active,
  .archive-gate:hover{
    transform:none !important;
  }

  .archive-gate small{
    font-size:8.5px !important;
    letter-spacing:.12em !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .archive-gate b{
    font-size:clamp(15px, 4.2vw, 18px) !important;
    line-height:1.24 !important;
    margin:7px 0 4px !important;
    word-break:keep-all !important;
  }

  .archive-gate span{
    font-size:10.5px !important;
    line-height:1.45 !important;
    word-break:keep-all !important;
  }

  .archive-panel.active{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:12px !important;
    border-radius:24px !important;
    overflow-x:hidden !important;
  }

  .archive-panel:before{
    background-size:220px auto !important;
    background-position:105% 0 !important;
  }

  .panel-visual{
    min-height:260px !important;
    width:100% !important;
    max-width:100% !important;
    margin-bottom:12px !important;
  }

  .record-board,
  .record-board.compact,
  .vault-list,
  .lineage-map,
  .haunt-map,
  .forbidden-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  .record-board,
  .record-board.compact{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .record-paper{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
  }

  .lineage-row{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    overflow-x:hidden !important;
  }

  .lineage-node{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .erased-princes{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  .erased-princes span{
    min-width:0 !important;
  }

  .haunt-map{
    min-height:260px !important;
  }

  .haunt-map button{
    max-width:42vw !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }

  .vault-list{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .vault-list button{
    min-width:0 !important;
    white-space:normal !important;
    word-break:keep-all !important;
  }

  .vault-impact{
    left:50% !important;
    max-width:88vw !important;
    transform:translateX(-50%) !important;
  }
}

@media(max-width:390px){
  .archive-hub{
    gap:8px !important;
  }

  .archive-gate{
    min-height:104px !important;
    padding:12px 10px !important;
  }

  .archive-gate small{
    font-size:8px !important;
  }

  .archive-gate b{
    font-size:14.5px !important;
  }

  .archive-gate span{
    font-size:10px !important;
  }
}


/* v40 MOBILE ONLY: compact royal lineage map */
@media(max-width:760px){
  #archive-imperial .lineage-map{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:14px 12px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  #archive-imperial .lineage-mark{
    width:74px !important;
    max-width:22vw !important;
    margin:0 auto 2px !important;
    opacity:.68 !important;
  }

  #archive-imperial .lineage-node.emperor{
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    padding:11px 12px !important;
    margin:0 !important;
    border-radius:16px !important;
  }

  #archive-imperial .lineage-node.emperor span{
    font-size:18px !important;
  }

  #archive-imperial .lineage-node.emperor small{
    font-size:10px !important;
  }

  #archive-imperial .lineage-row.queens,
  #archive-imperial .lineage-row.princes{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  #archive-imperial .lineage-node{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:10px 8px !important;
    border-radius:15px !important;
    line-height:1.3 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  #archive-imperial .lineage-node span,
  #archive-imperial .lineage-node{
    font-size:13.5px !important;
    word-break:keep-all !important;
  }

  #archive-imperial .lineage-node small{
    display:block !important;
    margin-top:3px !important;
    font-size:9.5px !important;
    line-height:1.25 !important;
    opacity:.82 !important;
    word-break:keep-all !important;
  }

  #archive-imperial .lineage-node.p5,
  #archive-imperial .lineage-node.doom-star{
    grid-column:auto !important;
  }

  #archive-imperial .erased-princes{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:2px !important;
    padding:10px !important;
    border-radius:16px !important;
  }

  #archive-imperial .erased-princes b{
    grid-column:1 / -1 !important;
    font-size:11px !important;
    line-height:1.3 !important;
    margin:0 0 2px !important;
  }

  #archive-imperial .erased-princes span{
    display:block !important;
    min-width:0 !important;
    width:100% !important;
    padding:5px 4px !important;
    font-size:9.5px !important;
    line-height:1.15 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  #archive-imperial .record-board.compact.imperial-fullwidth-records,
  #archive-imperial .record-board.compact{
    margin-top:14px !important;
  }
}

@media(max-width:390px){
  #archive-imperial .lineage-row.queens,
  #archive-imperial .lineage-row.princes{
    gap:6px !important;
  }

  #archive-imperial .lineage-node{
    padding:9px 6px !important;
  }

  #archive-imperial .lineage-node span,
  #archive-imperial .lineage-node{
    font-size:12.5px !important;
  }

  #archive-imperial .lineage-node small{
    font-size:8.8px !important;
  }

  #archive-imperial .erased-princes{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v41 MOBILE ONLY: real loaded serif font + PC-like royal map + horizontal lock */
@media(max-width:760px){
  html{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }

  body{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y !important;
    position:relative !important;
  }

  /* Mobile had no real Korean serif installed, so force the loaded webfont on every text element. */
  body,
  body *,
  body *::before,
  body *::after{
    font-family:"Nanum Myeongjo","AppleMyungjo","Batang","Noto Serif KR",serif !important;
  }

  /* Avoid iOS sideways rubber-band caused by oversized decorative layers. */
  #splash,
  #app,
  main,
  .page,
  .main-visual,
  .archive-page,
  .settings-archive,
  #settings,
  .archive-panel,
  .settings-hero,
  .visual-frame,
  .topbar{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    contain:paint;
  }

  .bg-ritual,
  .bg-ritual *,
  .bg-ritual::before,
  .bg-ritual::after,
  .gold-dust,
  .gold-dust::before,
  .gold-dust::after,
  body::before,
  .splash::before,
  .splash::after,
  .settings-stars,
  .settings-stars::before,
  .settings-stars::after,
  #settings::before,
  #settings::after,
  .archive-panel::before,
  .archive-panel::after,
  .corruption-flash,
  .vault-impact,
  .archive-signal{
    max-width:100vw !important;
    overflow:hidden !important;
    pointer-events:none;
  }

  .main-visual,
  .archive-page,
  .settings-archive{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .nav{
    min-width:0 !important;
    max-width:calc(100vw - 106px) !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain !important;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}

  .archive-hub{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* PC-like royal hierarchy: keep 5-wide rows, but make the whole map a mini organizational chart. */
  #archive-imperial .lineage-map{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:12px 8px 10px !important;
    border-radius:22px !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at center,rgba(221,177,85,.10),transparent 38%),
      rgba(2,5,14,.40) !important;
  }

  #archive-imperial .lineage-mark{
    width:150px !important;
    max-width:52vw !important;
    opacity:.10 !important;
  }

  #archive-imperial .lineage-node.emperor{
    width:44% !important;
    min-width:0 !important;
    max-width:180px !important;
    margin:0 auto 12px !important;
    padding:8px 6px !important;
    border-radius:14px !important;
    font-size:15px !important;
    line-height:1.18 !important;
  }

  #archive-imperial .lineage-node.emperor span{
    display:block !important;
    font-size:17px !important;
    line-height:1.15 !important;
  }

  #archive-imperial .lineage-node.emperor small{
    font-size:9px !important;
    margin-top:2px !important;
  }

  #archive-imperial .lineage-row.queens,
  #archive-imperial .lineage-row.princes{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:8px !important;
  }

  #archive-imperial .lineage-row.queens{
    position:relative;
    padding-top:8px;
  }

  #archive-imperial .lineage-row.queens::before,
  #archive-imperial .lineage-row.princes::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(221,177,85,.32),transparent);
  }

  #archive-imperial .lineage-row.princes{
    position:relative;
    padding-top:8px;
  }

  #archive-imperial .lineage-node{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    padding:7px 2px !important;
    border-radius:10px !important;
    font-size:10.6px !important;
    line-height:1.18 !important;
    letter-spacing:-.05em !important;
    word-break:keep-all !important;
    white-space:normal !important;
    box-shadow:0 5px 15px rgba(0,0,0,.22) !important;
  }

  #archive-imperial .lineage-node small{
    display:block !important;
    margin-top:2px !important;
    font-size:7.8px !important;
    line-height:1.14 !important;
    letter-spacing:-.06em !important;
    opacity:.82 !important;
    word-break:keep-all !important;
  }

  #archive-imperial .lineage-node.p5,
  #archive-imperial .lineage-node.doom-star{
    grid-column:auto !important;
    border-color:rgba(189,35,31,.68) !important;
    box-shadow:0 0 16px rgba(130,16,20,.28) !important;
  }

  #archive-imperial .erased-princes{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:10px !important;
    padding:8px 6px !important;
    border-radius:14px !important;
  }

  #archive-imperial .erased-princes b{
    width:100% !important;
    font-size:9.5px !important;
    line-height:1.25 !important;
    margin-bottom:2px !important;
    letter-spacing:.08em !important;
  }

  #archive-imperial .erased-princes span{
    flex:0 1 auto !important;
    min-width:0 !important;
    padding:4px 5px !important;
    font-size:8.8px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  #archive-imperial .record-board.compact{
    margin-top:12px !important;
  }
}

@media(max-width:390px){
  #archive-imperial .lineage-map{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  #archive-imperial .lineage-row.queens,
  #archive-imperial .lineage-row.princes{
    gap:3px !important;
  }

  #archive-imperial .lineage-node{
    padding:6px 1px !important;
    font-size:9.8px !important;
  }

  #archive-imperial .lineage-node small{
    font-size:7.2px !important;
  }

  #archive-imperial .lineage-node.emperor{
    width:48% !important;
  }
}


/* v42 MOBILE ONLY: copyable data serif fix + scroll comfort stabilization */
@media(max-width:760px){
  /*
    복사 가능한 데이터 영역은 기존 카드/본문 규칙에 밀려 고딕으로 떨어질 수 있어서
    PC 감성에 가까운 명조 계열을 가장 마지막에서 직접 강제한다.
  */
  .character-card .content,
  .lore-card .body,
  .lore-card .lore-title-line,
  .lore-card .lore-title,
  .lore-card .tags,
  .lore-card .tag,
  .example-slot,
  .example-slot *,
  .record-paper,
  .record-paper *,
  .archive-gate,
  .archive-gate *,
  .vault-detail,
  .vault-detail *,
  .haunt-detail,
  .haunt-detail *,
  [data-copy],
  [data-lore-title],
  [data-lore-tags],
  [data-lore-body],
  [data-example]{
    font-family:"Nanum Myeongjo","Iropke Batang","KoPub Batang","Noto Serif KR","AppleMyungjo","Batang",serif !important;
  }

  .character-card .content,
  .lore-card .body,
  .record-paper p,
  .vault-detail p,
  .haunt-detail p{
    letter-spacing:-.025em !important;
    line-height:1.78 !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
  }

  /*
    모바일 스크롤 중 화면이 순간적으로 안 보였다 보이는 느낌을 줄이기 위해
    fixed + blur/filter + 큰 배경 애니메이션을 모바일에서만 정리한다.
    PC의 연출은 건드리지 않는다.
  */
  *{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  html,
  body{
    overflow-x:hidden !important;
    background:#050202 !important;
  }

  .bg-ritual{
    position:fixed !important;
    transform:none !important;
    will-change:auto !important;
    contain:strict !important;
  }

  .bg-ritual:before,
  .bg-ritual:after,
  body:before,
  .gold-dust:before,
  .gold-dust:after{
    animation:none !important;
    transform:none !important;
    filter:none !important;
    will-change:auto !important;
  }

  .gold-dust{
    opacity:.14 !important;
  }

  .page,
  .archive-panel,
  .main-visual,
  .visual-frame,
  .settings-hero,
  .record-paper,
  .lore-card,
  .character-card{
    transform:translateZ(0);
    will-change:auto !important;
  }

  .visual-frame img,
  .panel-visual img,
  .forbidden-card img{
    filter:none !important;
    transform:none !important;
  }

  .visual-glow,
  .settings-stars,
  .settings-stars:before,
  .settings-stars:after{
    animation:none !important;
    will-change:auto !important;
  }

  .visual-copy,
  .visual-caption,
  .record-paper,
  .lore-card,
  .character-card,
  .archive-gate,
  .archive-panel,
  .toast{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .archive-gate,
  .record-paper,
  .lore-card,
  .character-card,
  .example-slot,
  .lineage-node{
    transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease !important;
  }

  .archive-gate:hover,
  .deep-vault button:hover,
  .example-slot:hover,
  .lore-card:hover,
  .character-card:hover{
    transform:none !important;
  }

  .splash.opening:before,
  .splash.opening:after{
    filter:none !important;
  }

  .splash:before,
  .splash:after{
    will-change:transform !important;
  }

  #settings.vault-sky-fall .settings-stars,
  #settings.vault-sky-fall .settings-hero{
    filter:none !important;
  }

  .vault-detail.vault-fall-dark{
    animation:none !important;
  }

  .corruption-flash{
    animation:none !important;
    opacity:.14 !important;
  }

  .vault-impact,
  .archive-signal{
    position:fixed !important;
    max-width:86vw !important;
    backface-visibility:hidden !important;
  }

  @supports (overflow: clip){
    html,
    body,
    #app,
    main,
    .page,
    .archive-page,
    .settings-archive,
    #settings{
      overflow-x:clip !important;
    }
  }
}

@media(max-width:760px) and (prefers-reduced-motion: reduce){
  *,
  *:before,
  *:after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}


/* v44 MOBILE ONLY: 황궁 괴담집 이미지/지도와 설명 블럭 간격 보정 */
@media(max-width:760px){
  #archive-haunting.archive-panel.active{
    display:block !important;
  }

  #archive-haunting .haunt-map{
    margin-bottom:18px !important;
  }

  #archive-haunting .haunt-detail,
  #archive-haunting .record-paper.haunt-detail{
    margin-top:18px !important;
  }

  #archive-haunting .haunt-map + .haunt-detail,
  #archive-haunting .haunt-map + .record-paper{
    margin-top:20px !important;
  }

  #archive-haunting .record-board{
    gap:16px !important;
  }
}

@media(max-width:390px){
  #archive-haunting .haunt-map{
    margin-bottom:16px !important;
  }

  #archive-haunting .haunt-detail,
  #archive-haunting .record-paper.haunt-detail{
    margin-top:16px !important;
  }
}


/* v45 MOBILE ONLY: stability mode + fixed two-row navigation
   - fixes mobile rendering flicker caused by transform/contain/backface hacks
   - keeps MAIN + BGM on row 1, category nav on row 2
   - reduces heavy fixed/blur/filter animation layers on mobile only
*/
@media(max-width:760px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    background:#050202 !important;
    overscroll-behavior-x:none !important;
    -webkit-text-size-adjust:100% !important;
  }

  body{
    position:relative !important;
    touch-action:pan-y !important;
  }

  /* Undo earlier mobile GPU hacks that can make text/cards disappear on iOS */
  *,
  *::before,
  *::after{
    -webkit-backface-visibility:visible !important;
    backface-visibility:visible !important;
  }

  #app,
  main,
  .page,
  .main-visual,
  .archive-page,
  .settings-archive,
  #settings,
  .archive-panel,
  .settings-hero,
  .visual-frame,
  .record-board,
  .record-paper,
  .lore-card,
  .character-card,
  .example-slot,
  .lineage-map,
  .haunt-map{
    contain:none !important;
    transform:none !important;
    will-change:auto !important;
    overflow-x:hidden !important;
  }

  .app.show,
  .page.active,
  .archive-panel.active{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  /* Lightweight mobile background: avoid repeated repaint black layers */
  .bg-ritual{
    position:fixed !important;
    inset:0 !important;
    z-index:-10 !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 50% 0%,rgba(122,21,18,.32),transparent 32%),
      linear-gradient(180deg,#100404,#050202 62%,#020101) !important;
    contain:none !important;
    transform:none !important;
    will-change:auto !important;
  }

  .bg-ritual::before,
  .bg-ritual::after,
  body::before,
  .moon,
  .blood-river,
  .gold-dust,
  .gold-dust::before,
  .gold-dust::after,
  .curtain{
    display:none !important;
    animation:none !important;
    filter:none !important;
    transform:none !important;
    opacity:0 !important;
  }

  .visual-glow,
  .settings-stars,
  .settings-stars::before,
  .settings-stars::after,
  .archive-panel::before,
  .archive-panel::after,
  .corruption-flash{
    animation:none !important;
    filter:none !important;
    transform:none !important;
    will-change:auto !important;
  }

  .visual-frame img,
  .panel-visual img,
  .forbidden-card img,
  .haunt-map img{
    filter:none !important;
    transform:none !important;
    will-change:auto !important;
  }

  .visual-copy,
  .visual-caption,
  .topbar,
  .record-paper,
  .lore-card,
  .character-card,
  .archive-gate,
  .archive-panel,
  .toast{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Top menu: row 1 MAIN + BGM, row 2 categories, always visible */
  .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:100000 !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:
      "brand spacer bgm"
      "nav nav nav" !important;
    gap:8px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100vw !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 8px)
      10px
      8px
      10px !important;
    background:linear-gradient(180deg,rgba(13,5,4,.98),rgba(13,5,4,.94)) !important;
    border-bottom:1px solid rgba(241,193,96,.28) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.42) !important;
    transform:none !important;
    contain:none !important;
  }

  .brand{
    grid-area:brand !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }

  .bgm-btn{
    grid-area:bgm !important;
    justify-self:end !important;
    white-space:nowrap !important;
    min-width:74px !important;
  }

  .nav{
    grid-area:nav !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .nav button{
    width:100% !important;
    min-width:0 !important;
    padding:8px 4px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  /* Make room for fixed two-row topbar */
  #app.show{
    padding-top:calc(env(safe-area-inset-top, 0px) + 92px) !important;
  }

  main{
    padding-top:0 !important;
  }

  .main-visual,
  .archive-page{
    padding-top:12px !important;
  }

  .page{
    scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 102px) !important;
  }

  /* Prevent accidental side swipe area */
  #app,
  main,
  .page,
  .archive-page,
  .settings-archive{
    width:100% !important;
    max-width:100vw !important;
  }

  @supports (overflow:clip){
    html,
    body,
    #app,
    main,
    .page,
    .archive-page,
    .settings-archive{
      overflow-x:clip !important;
    }
  }

  /* Keep copyable text visible and stable during scroll */
  .character-card .content,
  .lore-card .body,
  .record-paper,
  .example-slot,
  .archive-gate,
  .vault-detail,
  .haunt-detail{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    contain:none !important;
    will-change:auto !important;
  }

  /* Lighter touch/copy effects on mobile */
  .copyfx{
    animation:none !important;
    outline:1px solid rgba(255,222,138,.72) !important;
    box-shadow:inset 0 0 18px rgba(241,193,96,.12) !important;
  }

  .copyfx::after{
    display:none !important;
  }
}

@media(max-width:390px){
  #app.show{
    padding-top:calc(env(safe-area-inset-top, 0px) + 88px) !important;
  }

  .brand{
    padding:6px 8px !important;
    font-size:10px !important;
  }

  .brand span{
    width:22px !important;
    height:22px !important;
  }

  .bgm-btn{
    min-width:68px !important;
    padding:7px 7px !important;
    font-size:9px !important;
  }

  .nav button{
    font-size:10.5px !important;
    padding:7px 2px !important;
  }
}


/* v46 MOBILE ONLY: 금서 이펙트 문구 하단 잘림 보정 */
@media(max-width:760px){
  #settings .vault-impact,
  #settings .archive-signal{
    overflow:visible !important;
    line-height:1.45 !important;
    padding-top:12px !important;
    padding-bottom:14px !important;
    min-height:auto !important;
  }

  #settings .vault-impact b,
  #settings .archive-signal b,
  #settings .fall-signal,
  #settings .impact-fall{
    display:block !important;
    overflow:visible !important;
    line-height:1.48 !important;
    padding-bottom:3px !important;
    text-decoration:none !important;
    border-bottom:0 !important;
    -webkit-text-decoration:none !important;
  }

  #settings .vault-impact span{
    display:block !important;
    line-height:1.35 !important;
    margin-top:2px !important;
    overflow:visible !important;
  }
}


/* v47 MOBILE ONLY: '북천 기록 훼손' 한 줄 고정 */
@media(max-width:760px){
  #settings .vault-impact{
    width:min(94vw, 420px) !important;
    max-width:94vw !important;
    min-height:auto !important;
    padding:16px 12px 18px !important;
    box-sizing:border-box !important;
  }

  #settings .vault-impact.impact-fall b{
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow:visible !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    font-size:clamp(18px, 5.2vw, 24px) !important;
    letter-spacing:1.2px !important;
    line-height:1.35 !important;
    padding:0 0 4px !important;
  }

  #settings .vault-impact.impact-fall span{
    white-space:nowrap !important;
    word-break:keep-all !important;
    font-size:10.5px !important;
    letter-spacing:.8px !important;
    line-height:1.35 !important;
  }
}

@media(max-width:390px){
  #settings .vault-impact{
    width:96vw !important;
    max-width:96vw !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  #settings .vault-impact.impact-fall b{
    font-size:17px !important;
    letter-spacing:.4px !important;
  }

  #settings .vault-impact.impact-fall span{
    font-size:9.5px !important;
    letter-spacing:.2px !important;
  }
}


/* v48 MOBILE STABLE FINAL
   PC = 기존 화려한 효과 유지.
   Mobile = 안정성/스크롤/가독성 우선. 무거운 fixed/filter/blur/animation 레이어 최소화.
*/
@media(max-width:760px){
  :root{
    --mobile-topbar-space:calc(env(safe-area-inset-top, 0px) + 96px);
  }

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    background:#050202 !important;
    overscroll-behavior-x:none !important;
    -webkit-text-size-adjust:100% !important;
    scroll-behavior:auto !important;
  }

  body{
    position:relative !important;
    touch-action:pan-y !important;
    color:var(--ink) !important;
  }

  /* 모바일 텍스트/카드 사라짐 방지: GPU 레이어 강제 제거 */
  *,
  *::before,
  *::after{
    -webkit-backface-visibility:visible !important;
    backface-visibility:visible !important;
    will-change:auto !important;
  }

  #app,
  main,
  .page,
  .main-visual,
  .archive-page,
  .settings-archive,
  #settings,
  .archive-panel,
  .settings-hero,
  .visual-frame,
  .record-board,
  .record-paper,
  .lore-card,
  .character-card,
  .example-slot,
  .lineage-map,
  .haunt-map,
  .forbidden-card,
  .vault-detail,
  .haunt-detail{
    contain:none !important;
    transform:none !important;
    will-change:auto !important;
    overflow-x:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .app.show,
  .page.active,
  .archive-panel.active,
  .lore-card,
  .character-card,
  .record-paper{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  /* 모바일 배경은 정적 경량 배경으로 교체 */
  .bg-ritual{
    position:fixed !important;
    inset:0 !important;
    z-index:-10 !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 50% -4%,rgba(121,17,15,.34),transparent 34%),
      radial-gradient(circle at 50% 30%,rgba(83,10,11,.20),transparent 42%),
      linear-gradient(180deg,#110403 0%,#050202 58%,#020101 100%) !important;
    contain:none !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }

  .bg-ritual::before,
  .bg-ritual::after,
  body::before,
  .moon,
  .blood-river,
  .gold-dust,
  .gold-dust::before,
  .gold-dust::after,
  .curtain,
  .visual-glow,
  .settings-stars,
  .settings-stars::before,
  .settings-stars::after{
    display:none !important;
    content:none !important;
    animation:none !important;
    filter:none !important;
    transform:none !important;
    opacity:0 !important;
  }

  /* 모바일 스크롤 재렌더링 부담 제거 */
  .visual-frame img,
  .panel-visual img,
  .forbidden-card img,
  .haunt-map img{
    filter:none !important;
    transform:none !important;
    animation:none !important;
    will-change:auto !important;
  }

  .visual-copy,
  .visual-caption,
  .topbar,
  .record-paper,
  .lore-card,
  .character-card,
  .archive-gate,
  .archive-panel,
  .toast{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .archive-gate,
  .record-paper,
  .lore-card,
  .character-card,
  .example-slot,
  .lineage-node,
  .deep-vault button,
  .haunt-map button,
  .nav button,
  .bgm-btn,
  .brand{
    transition:border-color .14s ease, background-color .14s ease, box-shadow .14s ease, color .14s ease !important;
  }

  .archive-gate:hover,
  .archive-gate.active,
  .deep-vault button:hover,
  .example-slot:hover,
  .lore-card:hover,
  .character-card:hover,
  .haunt-map button:hover{
    transform:none !important;
  }

  /* 금서/글리치 효과는 모바일에서 가벼운 텍스트 오버레이로 유지 */
  #settings.vault-sky-fall::before,
  #settings.vault-sky-fall::after,
  #settings.vault-seal-fail::before,
  #settings.vault-seal-fail::after,
  #settings.vault-blood-react::before,
  #settings.vault-blood-react::after,
  #settings.vault-door-watch::before,
  #settings.vault-door-watch::after,
  .corruption-flash{
    display:none !important;
    content:none !important;
    animation:none !important;
    filter:none !important;
    opacity:0 !important;
  }

  #settings .vault-impact,
  #settings .archive-signal{
    position:fixed !important;
    left:50% !important;
    top:46% !important;
    transform:translate(-50%,-50%) !important;
    width:min(94vw,420px) !important;
    max-width:94vw !important;
    min-height:auto !important;
    padding:16px 12px 18px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    animation:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(3,5,12,.94) !important;
    border:1px solid rgba(216,180,92,.50) !important;
    box-shadow:0 0 28px rgba(0,0,0,.72), inset 0 0 22px rgba(216,180,92,.10) !important;
    z-index:100001 !important;
  }

  #settings .vault-impact b,
  #settings .archive-signal b{
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow:visible !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    font-size:clamp(17px,5vw,23px) !important;
    letter-spacing:.6px !important;
    line-height:1.36 !important;
    padding:0 0 4px !important;
    text-decoration:none !important;
    border-bottom:0 !important;
  }

  #settings .vault-impact span{
    display:block !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    font-size:10px !important;
    letter-spacing:.2px !important;
    line-height:1.34 !important;
    margin-top:2px !important;
  }

  .vault-detail.vault-fall-dark,
  .vault-detail.vault-fail-stain,
  .vault-detail.vault-bloodline,
  .vault-detail.vault-door-denied,
  .settings-archive.corrupted .record-paper.critical,
  .glitch-rate,
  .red-alert,
  .text-static,
  .rate-impact{
    animation:none !important;
    filter:none !important;
  }

  .vault-detail.vault-fail-stain::after,
  .vault-detail.vault-door-denied::after,
  .vault-detail.vault-bloodline::after{
    display:none !important;
    content:none !important;
  }

  /* 복사 효과도 스크롤/렌더링 부담 없는 형태로 */
  .copyfx{
    animation:none !important;
    outline:1px solid rgba(255,222,138,.72) !important;
    box-shadow:inset 0 0 18px rgba(241,193,96,.12) !important;
  }

  .copyfx::after{
    display:none !important;
    content:none !important;
  }

  /* 상단 메뉴: 1줄 MAIN/BGM, 2줄 카테고리. 항상 고정. */
  .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:100000 !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:
      "brand spacer bgm"
      "nav nav nav" !important;
    gap:8px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100vw !important;
    padding:
      calc(env(safe-area-inset-top,0px) + 8px)
      10px
      8px
      10px !important;
    background:linear-gradient(180deg,rgba(13,5,4,.99),rgba(13,5,4,.96)) !important;
    border-bottom:1px solid rgba(241,193,96,.28) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.42) !important;
    transform:none !important;
    contain:none !important;
  }

  .brand{
    grid-area:brand !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }

  .bgm-btn{
    grid-area:bgm !important;
    justify-self:end !important;
    white-space:nowrap !important;
    min-width:74px !important;
  }

  .nav{
    grid-area:nav !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .nav button{
    width:100% !important;
    min-width:0 !important;
    padding:8px 4px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  #app.show{
    padding-top:var(--mobile-topbar-space) !important;
  }

  main{
    padding-top:0 !important;
  }

  .main-visual,
  .archive-page{
    padding-top:12px !important;
  }

  .page{
    scroll-margin-top:calc(var(--mobile-topbar-space) + 10px) !important;
  }

  #app,
  main,
  .page,
  .archive-page,
  .settings-archive{
    width:100% !important;
    max-width:100vw !important;
  }

  @supports (overflow:clip){
    html,
    body,
    #app,
    main,
    .page,
    .archive-page,
    .settings-archive{
      overflow-x:clip !important;
    }
  }
}

@media(max-width:390px){
  :root{
    --mobile-topbar-space:calc(env(safe-area-inset-top,0px) + 90px);
  }

  .brand{
    padding:6px 8px !important;
    font-size:10px !important;
  }

  .brand span{
    width:22px !important;
    height:22px !important;
  }

  .bgm-btn{
    min-width:68px !important;
    padding:7px 7px !important;
    font-size:9px !important;
  }

  .nav button{
    font-size:10.5px !important;
    padding:7px 2px !important;
  }

  #settings .vault-impact,
  #settings .archive-signal{
    width:96vw !important;
    max-width:96vw !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  #settings .vault-impact b,
  #settings .archive-signal b{
    font-size:16px !important;
    letter-spacing:.1px !important;
  }

  #settings .vault-impact span{
    font-size:9px !important;
  }
}


/* v49 STABILITY PATCH — BGM 자동 시작 유지, 모바일 스크롤/검은 레이어 안정화 */
.splash.splash-gone{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  filter:none !important;
  transform:none !important;
}

/* 복사 가능한 데이터 폰트: PC/모바일 모두 본문 명조 계열로 고정 */
.character-card .content,
.lore-card .lore-title-line,
.lore-card .lore-title,
.lore-card .tags,
.lore-card .tag,
.lore-card .body,
.example-slot,
.example-slot *,
.record-paper,
.record-paper *,
.archive-gate,
.archive-gate *,
.vault-detail,
.vault-detail *,
.haunt-detail,
.haunt-detail *,
[data-copy],
[data-copy] *,
[data-lore-title],
[data-lore-title] *,
[data-lore-tags],
[data-lore-tags] *,
[data-lore-body],
[data-lore-body] *,
[data-example],
[data-example] *{
  font-family:"Nanum Myeongjo","Iropke Batang","KoPub Batang","Noto Serif KR","AppleMyungjo","Batang",serif !important;
}

@media(max-width:760px){
  /* 숨겨진 splash/fixed 레이어가 스크롤 중 검은 막처럼 남는 현상 차단 */
  #splash.hide{
    pointer-events:none !important;
    filter:none !important;
    transform:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  #splash.splash-gone,
  #splash.splash-gone::before,
  #splash.splash-gone::after,
  #splash.splash-gone *{
    display:none !important;
    animation:none !important;
    transition:none !important;
  }

  /* 모바일에서는 읽는 중 요소가 사라졌다 나타나는 계열의 렌더링 효과를 더 강하게 차단 */
  .app.show,
  .page.active,
  .archive-panel.active,
  .main-visual,
  .archive-page,
  .section-head,
  .visual-frame,
  .visual-copy,
  .portal-grid,
  .portal-grid button,
  .character-card,
  .character-card .content,
  .example-slot,
  .lore-control,
  .lore-card,
  .lore-card .lore-title-line,
  .lore-card .tags,
  .lore-card .body,
  .settings-hero,
  .archive-gate,
  .record-paper,
  .vault-detail,
  .haunt-detail,
  .lineage-map,
  .haunt-map,
  .forbidden-card{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
    will-change:auto !important;
    contain:none !important;
  }

  .page.active{
    display:block !important;
  }

  .topbar{
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
  }

  /* iOS에서 fixed 배경 레이어가 검게 재도장되는 부담을 추가로 줄임 */
  .bg-ritual{
    background:#050202 !important;
  }

  .bg-ritual::before,
  .bg-ritual::after,
  .settings-archive::before,
  .settings-archive::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
    animation:none !important;
    filter:none !important;
    transform:none !important;
  }

  .toast{
    transition:opacity .14s ease !important;
    transform:translateX(-50%) !important;
  }

  .toast.show{
    transform:translateX(-50%) !important;
  }
}