body { margin: 0; background-color: #000; overflow: hidden; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #555; }

        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; }

        /* 애니메이션 */
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .animate-fade-in { animation: fadeIn 1s ease-out forwards; }

        @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .animate-slide-down { animation: slideDown 0.8s ease-out forwards; }

        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .animate-slide-up { animation: slideUp 0.8s ease-out forwards; }
        .animate-slide-up-fade { animation: slideUp 0.6s ease-out forwards; }

        @keyframes slideRight { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .animate-slide-right { animation: slideRight 0.6s ease-out forwards; }

        @keyframes flashFade { 0% { background-color: white; opacity: 1; } 100% { background-color: transparent; opacity: 0; } }
        .animate-flash-fade { animation: flashFade 0.5s ease-out forwards; }

        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        .animate-float { animation: float 3s ease-in-out infinite; }

        @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .animate-spin-slow { animation: spinSlow 8s linear infinite; }

        @keyframes implode { 0% { transform: rotate(var(--r)) translateY(400px); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(var(--r)) translateY(0); opacity: 0; } }
        .animate-implode { animation: implode 2s ease-in forwards; }

        @keyframes expandWidth { from { width: 2px; opacity: 0; } to { width: 100%; opacity: 1; } }
        .animate-expand-width { animation: expandWidth 1s ease-out forwards; }

        @keyframes pulseFast { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(2); } }
        .animate-pulse-fast { animation: pulseFast 0.5s ease-in-out infinite; }

        @keyframes flashEnd { 0% { opacity: 0; } 100% { opacity: 1; } }
        .animate-flash-end { animation: flashEnd 0.2s ease-out forwards; animation-delay: 3.5s; }

        @keyframes fadeOutDelay { 0% { opacity: 1; } 100% { opacity: 0; } }
        .animate-fade-out-delay { animation: fadeOutDelay 0.5s ease-out forwards; animation-delay: 3s; }

        @keyframes stamp { 0% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        .animate-stamp { animation: stamp 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards; }

        @keyframes rainUp {
            0% { transform: translateY(110vh); opacity: 0; }
            10% { opacity: 0.5; }
            90% { opacity: 0.5; }
            100% { transform: translateY(-10vh); opacity: 0; }
        }
        .rain-drop {
            position: absolute;
            background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.4), transparent);
            width: 1px;
            animation: rainUp linear infinite;
        }

        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }
        .animate-shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both infinite; }

        @keyframes filmScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-2000px); } }
        .animate-film-scroll { animation: filmScroll 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards; }

        @keyframes posterZoom { 0% { transform: scale(1.3); opacity: 0; filter: blur(10px); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
        .animate-poster-zoom { animation: posterZoom 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

        .motion-blur-vertical { filter: blur(0px); animation: blurIntensity 2s linear forwards; }
        @keyframes blurIntensity { 0% { filter: blur(0px); } 10% { filter: blur(4px); } 80% { filter: blur(4px); } 100% { filter: blur(0px); } }

        @keyframes holyRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .animate-holy-rotate { animation: holyRotate 20s linear infinite; }

        @keyframes majesticDescent {
            0% { transform: scale(2.5) translateY(-100px) rotateY(180deg); opacity: 0; filter: brightness(3) blur(10px); }
            30% { opacity: 1; transform: scale(1.5) translateY(-20px) rotateY(0deg); }
            100% { transform: scale(1) translateY(0) rotateY(0deg); filter: brightness(1) blur(0); }
        }
        @keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

        .animate-majestic-appear {
            animation: 
                majesticDescent 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
                gentleFloat 4s ease-in-out infinite 2.5s; 
            transform-origin: center center;
            z-index: 20;
        }

        @keyframes holyFlash {
            0% { opacity: 0; background-color: #fff; }
            10% { opacity: 0.8; }
            100% { opacity: 0; }
        }
        .animate-holy-flash {
            position: absolute; inset: 0; z-index: 80; pointer-events: none;
            animation: holyFlash 1.5s ease-out forwards;
        }

        @keyframes particlesOut {
            0% { transform: scale(0.5); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }
        .animate-particles { animation: particlesOut 3s ease-out infinite; }

        @keyframes tearShake {
            0% { transform: scale(1.3); clip-path: inset(0 0 0 0); filter: hue-rotate(0deg); }
            10% { transform: scale(1.3) translate(-2px, 2px); }
            20% { transform: scale(1.3) translate(2px, -2px); }
            30% { transform: scale(1.3) translate(-5px, 0); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 55%, 0 100%, 100% 100%, 100% 50%, 0 40%); filter: contrast(2) brightness(1.5); }
            35% { transform: scale(1.3) translate(5px, 0); clip-path: polygon(0 0, 100% 0, 100% 55%, 0 45%, 0 100%, 100% 100%, 100% 40%, 0 50%); }
            40% { transform: scale(1.3) translate(0, 0); clip-path: inset(0 0 0 0); filter: none; }
            100% { transform: scale(1); opacity: 1; }
        }
        .animate-poster-tear { animation: tearShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; }
        .animate-poster-static { animation: posterZoom 0.4s ease-out forwards; }
        .animate-pulse-slow { animation: pulseFast 3s ease-in-out infinite; }

        @keyframes scanSweep {
            0% { transform: translateY(-140px); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateY(140px); opacity: 0; }
        }
        .animate-scan-sweep { animation: scanSweep 1.8s ease-in-out infinite; }

        @keyframes floatWide {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        .animate-float-wide { animation: floatWide 2.6s ease-in-out infinite; }


/* --- 2026-09 font system: DreamGothic --- */
@font-face {
  font-family: 'DreamGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DreamGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root{
  --font-ui:'DreamGothic',sans-serif;
  --font-display:'DreamGothic',sans-serif;
  --font-tech:'DreamGothic',sans-serif;
}
body,button,input,select,textarea{font-family:var(--font-ui)}
h1,h2,h3,.inventory-header h1,.inventory-detail h2,.character-heading h2,.warp-header h1,.warp-description h2,.warp-rates h2,.gx-caption h2,.gx-info h2,.gx-summary h2{font-family:var(--font-display)}
.inventory-header small,.character-heading small,.warp-header small,.warp-ribbon,.shatter-caption,.gx-top,.gx-eyebrow,.gx-info small,.gx-card-foot{font-family:var(--font-tech);letter-spacing:.16em}


/* Codex and records: S-Core Dream headings, Gmarket Sans Medium body. */
:is(.codex-typography, .records-typography) { font-family: 'DreamGothic', sans-serif; font-weight: 400; }
:is(.codex-typography, .records-typography) .codex-title {
  font-family: 'DreamGothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.025em;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:is(.codex-typography, .records-typography) .codex-body {
  font-family: 'Gmarket Sans', 'DreamGothic', sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:is(.codex-typography, .records-typography) .codex-tab {
  font-family: 'DreamGothic', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
}
:is(.codex-typography, .records-typography) .codex-number {
  font-family: 'DreamGothic', sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
:is(.codex-typography, .records-typography) .codex-label {
  font-family: 'Cinzel', 'DreamGothic', sans-serif;
  line-height: 1.5;
}


/* Shop is a navigable screen; system settings use the same restrained palette. */
.shop-screen { height:100%; overflow:auto; color:#f2f1ed; background:radial-gradient(ellipse at 85% 15%,#342744 0,transparent 48%),#090d14; font-family:'DreamGothic',sans-serif; }
.shop-screen button { cursor:pointer; }
.shop-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 5%; border-bottom:1px solid #ffffff16; }
.shop-back,.shop-wallet { display:flex; align-items:center; gap:12px; }
.shop-back { background:none; border:0; color:#c4c9d3; font-size:14px; }
.shop-wallet { padding:12px 18px; border:1px solid #c8a4f538; background:#ffffff05; border-radius:8px; font-size:12px; color:#bbb1cb; }
.shop-wallet strong { color:#f0deff; font-size:20px; font-variant-numeric:tabular-nums; }
.shop-content { max-width:1160px; margin:auto; padding:48px 5%; }
.shop-eyebrow { font-family:'Cinzel','DreamGothic',sans-serif; font-size:10px; letter-spacing:.2em; color:#b9a5d2; }
.shop-intro h1 { margin:12px 0; font-size:36px; font-weight:700; letter-spacing:-.03em; }
.shop-intro p,.shop-product p { color:#a5abba; font-size:14px; line-height:1.7; }
.shop-category { display:flex; align-items:center; gap:10px; margin:32px 0 20px; padding-bottom:16px; border-bottom:1px solid #ffffff20; font-weight:700; }
.shop-category span { margin-left:auto; font-size:12px; font-weight:400; color:#a5abba; }
.shop-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.shop-product { padding:26px; background:linear-gradient(145deg,#20202d,#10151e); border:1px solid #b9a5d230; border-radius:12px; }
.shop-product-art { height:120px; display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:22px; color:#d8b5ff; background:radial-gradient(ellipse,#8b5dc426,transparent 70%); }
.shop-product-art span { font-size:32px; font-weight:700; }
.shop-product h2 { font-family:'DreamGothic',sans-serif; font-size:23px; font-weight:700; margin:10px 0; }
.shop-price { display:flex; justify-content:space-between; padding:20px 0; margin-top:18px; border-top:1px solid #ffffff15; font-size:12px; color:#a5abba; }
.shop-price strong { display:flex; align-items:center; gap:7px; color:#e7d0ff; font-size:17px; }
.shop-exchange { width:100%; padding:14px; border:1px solid #dac4f4; border-radius:6px; background:#dac4f4; color:#251934; font-size:14px; font-weight:700; }
.shop-exchange:hover { filter:brightness(1.08); }
.shop-exchange:disabled { cursor:default; background:#ffffff06; color:#959aa7; border-color:#ffffff18; }
.shop-notice { min-height:24px; color:#d5edcd; font-size:14px; }
.shop-screen button:focus-visible,.system-panel :is(button,input):focus-visible { outline:2px solid #dfc188; outline-offset:4px; }
.system-overlay { padding:20px; box-sizing:border-box; }
.system-panel { position:relative; width:min(760px,100%); max-height:90dvh; overflow:auto; padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:18px; color:#eceef4; background:linear-gradient(145deg,#1a2230,#0d121b); border:1px solid #a9b5c338; border-radius:16px; box-shadow:0 24px 90px #0009; font-family:'DreamGothic',sans-serif; }
.system-panel .system-heading { grid-column:1/-1; margin:0 0 6px; padding:0 35px 22px 0; border-bottom:1px solid #ffffff18; font-family:'DreamGothic',sans-serif; font-size:28px; font-weight:700; letter-spacing:-.025em; }
.system-panel > .system-section { min-width:0; padding:20px; margin:0; border:1px solid #ffffff12; border-radius:10px; background:#080d1670; }
.system-panel > .system-section > label { display:block; margin-bottom:16px; font-size:15px; font-weight:700; letter-spacing:0; color:#eee6d7; }
.system-panel p { font-size:12px; color:#9aa6b9; line-height:1.7; }
.system-panel input[type=text] { min-width:0; width:100%; font-family:'DreamGothic',sans-serif; }
.system-panel button { font-family:'DreamGothic',sans-serif; letter-spacing:0; }
.system-panel input[type=range] { min-width:0; }
@media(max-width:600px) {
 .shop-header { align-items:flex-start; flex-direction:column; padding:20px; }
 .shop-content { padding:28px 20px; }
 .shop-products { grid-template-columns:1fr; }
 .shop-intro h1 { font-size:30px; }
 .system-panel { grid-template-columns:1fr; padding:22px; }
 .system-panel > .system-section { padding:16px; }
}

/* ===== In-client feedback / confirmation ===== */
.game-feedback-center{position:fixed;z-index:5000;top:20px;right:20px;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:9px;pointer-events:none}.game-notice{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 26px;align-items:center;gap:10px;min-height:58px;padding:10px 10px 10px 12px;border:1px solid rgba(255,255,255,.14);border-left:2px solid #a4aebb;border-radius:5px;background:linear-gradient(100deg,rgba(13,17,23,.96),rgba(20,24,31,.94));box-shadow:0 14px 44px rgba(0,0,0,.38);backdrop-filter:blur(16px);pointer-events:auto;animation:gameNoticeIn .32s cubic-bezier(.2,.8,.2,1);overflow:hidden}.game-notice:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.22}.game-notice-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;opacity:.82}.game-notice-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.game-notice-copy small{font-family:'Cinzel',serif;font-size:7px;letter-spacing:.2em;color:#8e98a7}.game-notice-copy strong{font-family:'DreamGothic',sans-serif;font-size:12px;font-weight:600;line-height:1.45;color:#e9edf3;word-break:keep-all}.game-notice>button{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#697382}.game-notice>button:hover{background:#ffffff0d;color:#fff}.game-notice.tone-success{color:#8ebfa0;border-left-color:#8ebfa0}.game-notice.tone-reward{color:#d6b56f;border-left-color:#d6b56f;background:radial-gradient(circle at 8% 50%,rgba(205,165,82,.12),transparent 28%),linear-gradient(100deg,rgba(15,16,19,.97),rgba(27,24,18,.95))}.game-notice.tone-warning{color:#d5a86e;border-left-color:#d5a86e}.game-notice.tone-danger{color:#d88080;border-left-color:#d88080}.game-notice.tone-info{color:#91a8ca;border-left-color:#91a8ca}@keyframes gameNoticeIn{from{opacity:0;transform:translateX(18px) scale(.98)}to{opacity:1;transform:none}}
.game-confirm-overlay{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.76);backdrop-filter:blur(7px);cursor:default}.game-confirm-dialog{width:min(430px,100%);padding:26px;border:1px solid rgba(206,166,103,.28);border-radius:9px;background:radial-gradient(circle at 90% 0,rgba(194,151,76,.12),transparent 32%),linear-gradient(145deg,#15191f,#090c10);box-shadow:0 28px 90px rgba(0,0,0,.62);color:#ece8df;text-align:left;animation:gameConfirmIn .22s ease}.game-confirm-dialog>small{font-family:'Cinzel',serif;font-size:8px;letter-spacing:.22em;color:#9c8864}.game-confirm-dialog h2{margin:10px 0 12px;font-family:'DreamGothic',sans-serif;font-size:23px;font-weight:700}.game-confirm-dialog p{margin:0;color:#aeb6c1;font-family:'DreamGothic',sans-serif;font-size:12px;line-height:1.8;word-break:keep-all}.game-confirm-dialog>div{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.game-confirm-dialog button{min-width:92px;padding:11px 14px;border:1px solid #ffffff1c;border-radius:5px;background:#ffffff08;color:#cdd3dc;font-family:'DreamGothic',sans-serif;font-size:11px}.game-confirm-dialog button:hover{border-color:#ffffff42;color:#fff}.game-confirm-dialog .confirm-primary{border-color:#a75858aa;background:#6a202055;color:#f1c8c8}.game-confirm-dialog .confirm-primary:hover{border-color:#cd7373;background:#7a272766}.game-confirm-dialog.tone-info .confirm-primary{border-color:#9e834f;background:#9e834f26;color:#e8d6b3}@keyframes gameConfirmIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}@media(max-width:600px){.game-feedback-center{top:12px;right:12px}.game-confirm-dialog{padding:22px}.game-confirm-dialog h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.game-notice,.game-confirm-dialog{animation:none}}