:root{--bg-primary:#ffffff;--bg-secondary:#f9fafb;--bg-hover:#f3f4f6;--border-color:#e5e7eb;--text-main:#111827;--text-muted:#475569;--primary-color:#3b82f6;--primary-hover:#2563eb;--accent-color:#ec4899;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.08),0 2px 4px -1px rgba(0,0,0,0.04);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--sidebar-width:240px;--header-height:64px;}*{box-sizing:border-box;margin:0;padding:0;}html{background-color:var(--bg-primary);-webkit-text-size-adjust:100%;min-height:100%;overscroll-behavior-y:auto;}body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;overscroll-behavior-y:auto;overflow-x:hidden;}a{color:inherit;text-decoration:none;}button{cursor:pointer;border:none;background:none;font-family:inherit;}.app-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#ffffff;border-bottom:1px solid var(--border-color);box-shadow:0 1px 3px rgba(0,0,0,0.04);display:flex;align-items:center;justify-content:space-between;z-index:1000;padding:0 36px;transition:padding 0.2s ease;}@media (min-width:1440px){.app-header{padding:0 64px;}}@media (min-width:1920px){.app-header{padding:0 120px;}}.header-left{display:flex;align-items:center;gap:16px;width:var(--sidebar-width);}.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--text-main);letter-spacing:-0.5px;}.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:1.1rem;}.header-search{flex:1;max-width:540px;position:relative;margin:0 20px;}.search-input{width:100%;padding:10px 16px 10px 42px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:9999px;font-size:0.9rem;color:var(--text-main);transition:all 0.2s ease;}.search-input:focus{outline:none;background:#ffffff;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,0.15);}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}.header-right{display:flex;align-items:center;gap:12px;}.btn{padding:8px 16px;border-radius:9999px;font-size:0.9rem;font-weight:600;transition:all 0.15s ease;display:inline-flex;align-items:center;gap:6px;}.btn-upload{background:var(--text-main);color:#ffffff;}.btn-upload:hover{background:#374151;}.btn-login{color:var(--text-main);border:1px solid var(--border-color);}.btn-login:hover{background:var(--bg-secondary);}.btn-signup{background:var(--primary-color);color:#ffffff;}.btn-signup:hover{background:var(--primary-hover);}.app-container{display:flex;margin-top:var(--header-height);min-height:calc(100vh - var(--header-height));}.app-sidebar{width:var(--sidebar-width);background:var(--bg-primary);border-right:1px solid var(--border-color);position:fixed;top:var(--header-height);bottom:0;left:0;padding:20px 12px;overflow-y:auto;z-index:90;}.sidebar-menu{list-style:none;display:flex;flex-direction:column;gap:4px;}.sidebar-item a{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-sm);font-size:0.95rem;font-weight:500;line-height:1.35;color:var(--text-muted);transition:all 0.15s ease;}.sidebar-item.active a,.sidebar-item a:hover{background:var(--bg-secondary);color:var(--primary-color);font-weight:600;}.sidebar-divider{height:1px;background:var(--border-color);margin:16px 12px;}.sidebar-heading{font-size:0.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;padding:0 16px 8px 16px;letter-spacing:0.5px;}.app-main{flex:1;margin-left:var(--sidebar-width);padding:0 32px 60px 32px;}.category-container{margin-top:0;margin-bottom:20px;position:sticky;top:var(--header-height);background:#ffffff;padding:10px 0;z-index:500;border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px rgba(0,0,0,0.02);}.category-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}.category-bar::-webkit-scrollbar{display:none;}.cat-btn{padding:7px 18px;border-radius:9999px;background:var(--bg-secondary);border:1px solid var(--border-color);font-size:0.88rem;font-weight:500;color:var(--text-muted);white-space:nowrap;transition:all 0.2s ease;}.cat-btn:hover{background:var(--bg-hover);color:var(--text-main);}.cat-btn.active{background:var(--text-main);color:#ffffff;border-color:var(--text-main);font-weight:600;}.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;}.art-card{background:#ffffff;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:transform 0.25s ease,box-shadow 0.25s ease;display:flex;flex-direction:column;cursor:pointer;position:relative;}.art-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}.art-image-wrapper{position:relative;width:100%;aspect-ratio:16 / 10;background:#0f172a;overflow:hidden;display:flex;align-items:center;justify-content:center;}@supports not (aspect-ratio:16 / 10){.art-image-wrapper{padding-top:62.5%;}}.art-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.3s ease;display:block;}.art-card:hover .art-image{transform:scale(1.04);}.play-hover-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(15,23,42,0.88);color:#38bdf8;border:1px solid #38bdf8;font-size:0.76rem;font-weight:800;padding:4px 12px;border-radius:20px;opacity:0;transition:all 0.2s ease;pointer-events:none;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.4);}.art-card:hover .play-hover-hint{opacity:1;transform:translateX(-50%) translateY(0);}.art-info{padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:#ffffff;}.art-title{font-size:0.98rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.art-meta{display:flex;align-items:center;justify-content:space-between;font-size:0.82rem;color:var(--text-muted);}.art-artist{display:flex;align-items:center;gap:6px;font-weight:500;}.artist-avatar{width:20px;height:20px;border-radius:50%;background:var(--primary-color);color:white;display:inline-flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:bold;}.popular-creators-list{list-style:none;padding:0;margin:6px 0 12px 0;display:flex;flex-direction:column;gap:6px;}.creator-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background 0.15s ease,transform 0.1s ease;}.creator-item:hover{background:var(--bg-hover,rgba(0,0,0,0.04));transform:translateX(2px);}.creator-rank{font-size:0.8rem;font-weight:800;color:var(--text-muted);width:16px;text-align:center;}.creator-rank.rank-1{color:#f59e0b;}.creator-rank.rank-2{color:#94a3b8;}.creator-rank.rank-3{color:#b45309;}.creator-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,0.1);}.creator-info{display:flex;flex-direction:column;overflow:hidden;}.creator-name{font-size:0.85rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.creator-stats{font-size:0.72rem;color:var(--text-muted);margin-top:1px;}.art-stats{display:flex;align-items:center;gap:10px;}.stat-item{display:flex;align-items:center;gap:4px;}.loading-indicator{text-align:center;padding:40px 0;color:var(--text-muted);font-size:0.9rem;grid-column:1 / -1;}.spinner{display:inline-block;width:24px;height:24px;border:3px solid rgba(0,0,0,0.1);border-radius:50%;border-top-color:var(--primary-color);animation:spin 0.8s linear infinite;margin-bottom:8px;}@keyframes spin{to{transform:rotate(360deg);}}.no-more-msg{text-align:center;padding:40px 0;color:var(--text-muted);font-size:0.9rem;grid-column:1 / -1;}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000;display:none;visibility:hidden;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.25s ease,visibility 0.25s ease;}.modal-overlay.open{display:flex !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important;}.modal-overlay.open .modal-card,.modal-overlay.open .modal-card *{pointer-events:auto !important;}body.modal-open-no-scroll .category-container,body.modal-open-no-scroll .category-bar,body.modal-open-no-scroll .app-header,body.modal-open-no-scroll .app-sidebar{pointer-events:none !important;}body.modal-open-no-scroll .modal-overlay{pointer-events:auto !important;}.modal-card{background:#ffffff;border-radius:var(--radius-lg);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-lg);transform:scale(0.95);transition:transform 0.25s ease;}.modal-overlay.open .modal-card{transform:scale(1);}.modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:#1e293b;color:#ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:1.4rem;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:all 0.2s ease;}.modal-close:hover{background:#0f172a;transform:scale(1.05);}.detail-body{display:grid;grid-template-columns:1fr 320px;}.detail-img-box{background:#111827;display:flex;align-items:center;justify-content:center;padding:16px;min-height:380px;border-radius:14px;overflow:hidden;}.detail-img-box img{max-width:100%;max-height:65vh;width:auto;height:auto;object-fit:contain;border-radius:10px;display:block;margin:0 auto;}.detail-side-info{padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;}.form-group{margin-bottom:16px;}.form-label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;color:var(--text-main);}.form-input,.form-select{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-color);font-size:0.9rem;background:#ffffff;}.form-input:focus,.form-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,0.12);}@media (max-width:900px){.mobile-menu-btn{display:flex;align-items:center;justify-content:center;}.header-search{display:none;}.mobile-search-btn{display:flex !important;}.app-sidebar{position:fixed;top:var(--header-height);left:-300px;bottom:0;width:270px;height:calc(100vh - var(--header-height));background:#ffffff;z-index:9999;box-shadow:6px 0 24px rgba(0,0,0,0.2);transition:left 0.3s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:22px 18px 30px 18px;display:block;border-top:1px solid var(--border-color);border-right:1px solid var(--border-color);box-sizing:border-box;margin-top:0;}.app-sidebar.mobile-open{left:0;}.app-main{margin-left:0;padding:20px 16px 60px 16px;}.header-left{width:auto;}.detail-body{grid-template-columns:1fr;}}.kbd-badge{background:var(--bg-hover);border:1px solid var(--border-color);border-radius:4px;padding:2px 6px;font-family:inherit;font-size:0.75rem;font-weight:700;color:var(--text-main);box-shadow:0 1px 1px rgba(0,0,0,0.1);}.qr-drop-zone{width:100%;min-height:200px;border:2px dashed #93c5fd;border-radius:var(--radius-md);background:#f0f7ff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;transition:all 0.2s ease;cursor:pointer;}.qr-drop-zone:hover,.qr-drop-zone.dragover{border-color:var(--primary-color);background:#e0f2fe;}.qr-drop-content{display:flex;flex-direction:column;align-items:center;text-align:center;}.qr-icon-circle{width:52px;height:52px;border-radius:50%;background:#ffffff;color:var(--primary-color);display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:var(--shadow-sm);}.qr-result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}.qr-status-badge{padding:4px 12px;border-radius:9999px;font-size:0.8rem;font-weight:700;}.qr-status-badge.success{background:#dcfce7;color:#166534;}.qr-status-badge.error{background:#fee2e2;color:#991b1b;}.qr-type-badge{background:var(--bg-hover);color:var(--text-main);padding:4px 12px;border-radius:9999px;font-size:0.8rem;font-weight:600;border:1px solid var(--border-color);}.qr-content-box{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;margin-bottom:16px;}.qr-decoded-text{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:0.95rem;word-break:break-all;color:var(--text-main);background:#ffffff;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border-color);max-height:120px;overflow-y:auto;}.qr-spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}.qr-spec-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:12px;text-align:center;}.qr-spec-label{font-size:0.72rem;color:var(--text-muted);font-weight:600;margin-bottom:4px;}.qr-spec-value{font-size:0.95rem;font-weight:800;color:var(--text-main);}@media (max-width:600px){.qr-spec-grid{grid-template-columns:repeat(2,1fr);}}.user-profile-badge{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 6px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;font-size:0.88rem;font-weight:600;color:var(--text-main);}.user-avatar-img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color);}.user-avatar-text{width:28px;height:28px;border-radius:50%;background:var(--primary-color);color:#ffffff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;}.btn-google-custom:hover{background-color:#f8f9fa !important;border-color:#c6c9ce !important;box-shadow:0 2px 6px rgba(0,0,0,0.12) !important;}.mobile-menu-btn{display:none;font-size:1.3rem;padding:6px 10px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-main);cursor:pointer;margin-right:6px;}.mobile-sidebar-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.25s ease;}.mobile-sidebar-backdrop.active{display:block;opacity:1;pointer-events:auto;}@media (max-width:992px){.app-header{padding:0 16px;}.header-left{width:auto;}.header-search{margin:0 10px;max-width:320px;}}body.sidebar-open-no-scroll{overflow:hidden !important;touch-action:none !important;}body.modal-open-no-scroll{overflow:hidden !important;}.modal-overlay{overscroll-behavior:contain !important;-webkit-overflow-scrolling:touch !important;touch-action:pan-y !important;}.modal-container,.modal-card,.modal-content{overscroll-behavior:contain !important;-webkit-overflow-scrolling:touch !important;touch-action:pan-y !important;overflow-y:auto !important;}@media (max-width:768px){.mobile-menu-btn{display:flex;align-items:center;justify-content:center;}.app-sidebar{position:fixed !important;top:56px !important;left:-300px !important;bottom:0 !important;width:270px !important;height:calc(100vh - 56px) !important;background:#ffffff !important;z-index:9999 !important;box-shadow:6px 0 24px rgba(0,0,0,0.2) !important;transition:left 0.3s cubic-bezier(0.4,0,0.2,1) !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;padding:22px 18px 30px 18px !important;margin-top:0 !important;display:block !important;border-top:1px solid var(--border-color) !important;border-right:1px solid var(--border-color) !important;box-sizing:border-box !important;}.app-sidebar.mobile-open{left:0 !important;}.sidebar-menu{display:flex !important;flex-direction:column !important;gap:8px !important;}.sidebar-item a{color:#1e293b !important;font-size:0.92rem !important;font-weight:600 !important;padding:12px 16px !important;border-radius:var(--radius-sm) !important;background:#f8fafc !important;border:1px solid #e2e8f0 !important;display:flex !important;align-items:center !important;gap:10px !important;}.sidebar-item.active a{background:#eff6ff !important;color:var(--primary-color) !important;border-color:#bfdbfe !important;}.app-header{height:56px !important;}.app-container{margin-top:56px !important;}.app-main{margin-left:0 !important;padding:0 16px 60px 16px !important;width:100% !important;}.category-container{margin-top:0 !important;margin-bottom:16px !important;padding:8px 0 !important;position:sticky !important;top:56px !important;background:#ffffff !important;border-bottom:1px solid var(--border-color) !important;border-top:none !important;box-shadow:0 2px 4px rgba(0,0,0,0.03) !important;z-index:500 !important;}.header-search{display:none !important;}.mobile-search-btn{display:flex !important;}.header-right{gap:6px;}.header-right .btn,.header-right .btn-login,.header-right .btn-signup,.header-right .btn-upload,.header-right #btn-header-admin{padding:4px 9px !important;font-size:0.72rem !important;font-weight:700 !important;}#user-profile-bar{gap:4px !important;}#user-name-display{display:none;}.cat-bar{overflow-x:auto;white-space:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;display:flex;gap:6px;}.cat-btn{flex:0 0 auto;padding:6px 12px;font-size:0.8rem;}.art-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;gap:10px !important;}.art-card-img{height:160px !important;}.art-card-title{font-size:0.85rem !important;}.modal-overlay{padding:8px !important;align-items:center !important;justify-content:center !important;}.modal-container,.modal-card{width:95% !important;max-width:95vw !important;max-height:85vh !important;margin:0 auto !important;padding:18px 14px !important;border-radius:16px !important;overflow-y:auto !important;box-sizing:border-box !important;-webkit-overflow-scrolling:touch !important;}.modal-close{top:12px !important;right:14px !important;width:36px !important;height:36px !important;font-size:1.8rem !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}input[type="text"],input[type="url"],input[type="number"],input[type="email"],input[type="password"],input[type="file"],select,textarea{font-size:16px !important;touch-action:manipulation;}button,a,.btn,.btn-action,.cat-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}}@media (max-width:480px){.app-header{height:56px !important;padding:0 10px !important;}.app-container{margin-top:56px !important;}.app-sidebar{top:56px !important;margin-top:0 !important;}.category-container{top:56px !important;margin-top:0 !important;padding:6px 0 !important;}.logo img{height:26px !important;}.header-search{display:none !important;}.header-right{gap:4px !important;}.header-right .btn,.header-right .btn-login,.header-right .btn-signup,.header-right .btn-upload,.header-right #btn-header-admin{padding:5px 8px !important;font-size:0.75rem !important;border-radius:8px !important;}.art-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;}.art-card{height:250px !important;display:flex !important;flex-direction:column !important;}.art-card-img{height:115px !important;object-fit:cover !important;}.qr-spec-grid{grid-template-columns:repeat(1,1fr) !important;}.action-bar{flex-direction:column;width:100%;gap:8px !important;}.action-bar .btn-action{width:100%;justify-content:center;padding:12px 0 !important;}.mypage-card,.admin-card-section{padding:16px !important;border-radius:14px !important;}.stats-grid{grid-template-columns:repeat(1,1fr) !important;gap:10px !important;}.metrics-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;}.feature-grid{grid-template-columns:1fr !important;gap:14px !important;}.code-guide-grid{grid-template-columns:1fr !important;gap:10px !important;}}.mobile-desktop-notice{position:fixed;bottom:0;left:0;right:0;z-index:9995;pointer-events:none;transform:translateY(105%);transition:transform 0.38s cubic-bezier(0.4,0,0.2,1);background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#1d4ed8 100%);color:#ffffff;border-radius:20px 20px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,0.3),0 -2px 8px rgba(29,78,216,0.4);padding:0;border-top:2px solid rgba(99,102,241,0.5);padding-bottom:env(safe-area-inset-bottom,0px);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.mobile-desktop-notice.mdn-show{transform:translateY(0);pointer-events:auto;}body.modal-open-no-scroll .mobile-desktop-notice{pointer-events:none !important;z-index:9990 !important;}.mdn-inner{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 14px 18px;}.mdn-icon{font-size:1.8rem;line-height:1;flex-shrink:0;margin-top:2px;}.mdn-body{flex:1;min-width:0;}.mdn-title{font-size:0.95rem;font-weight:900;color:#ffffff;margin-bottom:5px;letter-spacing:-0.2px;}.mdn-desc{font-size:0.78rem;color:rgba(255,255,255,0.78);line-height:1.55;margin-bottom:12px;}.mdn-steps{display:flex;flex-direction:column;gap:7px;}.mdn-step{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:rgba(255,255,255,0.9);line-height:1.4;}.mdn-step strong{color:#93c5fd;font-weight:800;}.mdn-step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(99,102,241,0.7);color:#ffffff;font-size:0.7rem;font-weight:800;flex-shrink:0;border:1px solid rgba(147,197,253,0.4);}.mdn-close{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.75);font-size:0.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;margin-top:0;}.mdn-close:hover{background:rgba(255,255,255,0.22);color:#ffffff;}.mdn-footer{padding:11px 18px 0 18px;border-top:1px solid rgba(255,255,255,0.1);padding-bottom:calc(16px + env(safe-area-inset-bottom,12px));}.mdn-dismiss{width:100%;padding:9px 0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:10px;color:rgba(255,255,255,0.75);font-size:0.8rem;font-weight:700;cursor:pointer;transition:all 0.2s ease;font-family:inherit;letter-spacing:-0.1px;}.mdn-dismiss:hover,.mdn-dismiss:active{background:rgba(255,255,255,0.2);color:#ffffff;}@media (min-width:1024px){.mobile-desktop-notice{display:none !important;}}.btn-code-tab{background:transparent;color:#64748b;transition:all 0.2s ease;}.btn-code-tab:hover{color:#1e293b;background:rgba(255,255,255,0.5);}.btn-code-tab.active{background:#ffffff !important;color:#4f46e5 !important;box-shadow:0 2px 5px rgba(0,0,0,0.08);}.btn-qr-generate{font-weight:900 !important;font-size:1rem !important;border:2.5px solid #3730a3 !important;background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%) !important;color:#ffffff !important;border-radius:12px !important;box-shadow:0 4px 14px rgba(79,70,229,0.4) !important;cursor:pointer !important;transition:all 0.2s ease !important;}.btn-qr-generate:hover{transform:translateY(-2px);background:linear-gradient(135deg,#4338ca 0%,#3730a3 100%) !important;border-color:#312e81 !important;box-shadow:0 6px 20px rgba(79,70,229,0.55) !important;}.btn-qr-generate:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(79,70,229,0.3) !important;}.mobile-search-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-muted);cursor:pointer;transition:all 0.2s ease;flex-shrink:0;}.mobile-search-btn:hover,.mobile-search-btn:active{background:var(--primary-color);color:#ffffff;border-color:var(--primary-color);}.mobile-search-overlay{display:none;position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding-top:0;opacity:0;transition:opacity 0.22s ease;}.mobile-search-overlay.open{display:flex;opacity:1;}.mobile-search-overlay-inner{width:100%;background:#ffffff;padding:12px 14px 16px 14px;box-shadow:0 8px 32px rgba(0,0,0,0.18);transform:translateY(-20px);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);border-bottom:1px solid var(--border-color);}.mobile-search-overlay.open .mobile-search-overlay-inner{transform:translateY(0);}.mobile-search-overlay-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;}.mobile-search-overlay-label{font-size:0.82rem;font-weight:700;color:var(--text-muted);flex:1;}.mobile-search-overlay-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border-color);background:transparent;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1;transition:all 0.15s ease;}.mobile-search-overlay-close:hover{background:#f1f5f9;color:var(--text-main);}.mobile-search-overlay-input-wrap{position:relative;}.mobile-search-overlay-input-wrap .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}#mobile-search-input{width:100%;box-sizing:border-box;padding:11px 16px 11px 44px;background:var(--bg-secondary);border:1.5px solid var(--border-color);border-radius:9999px;font-size:0.95rem;color:var(--text-main);transition:all 0.2s ease;}#mobile-search-input:focus{outline:none;background:#ffffff;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,0.15);}.modal-auth-card{max-width:440px;width:92%;padding:32px 28px;border-radius:24px;box-shadow:0 24px 48px rgba(0,0,0,0.18),0 4px 16px rgba(0,0,0,0.08);position:relative;overflow:auto;border:1px solid rgba(226,232,240,0.8);}.modal-login-style{background:#ffffff;border-top:5px solid #6366f1;}.modal-logout-style{background:#ffffff;border-top:5px solid #f43f5e;}.auth-modal-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:20px;}.auth-badge-icon{width:60px;height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.85rem;margin-bottom:14px;box-shadow:0 8px 18px rgba(0,0,0,0.06);}.login-badge{background:linear-gradient(135deg,#e0e7ff 0%,#e0f2fe 100%);color:#4f46e5;border:1.5px solid #c7d2fe;}.logout-badge{background:linear-gradient(135deg,#ffe4e6 0%,#ffedd5 100%);color:#e11d48;border:1.5px solid #fecdd3;}.auth-subtag{font-size:0.7rem;font-weight:800;letter-spacing:1px;color:#6366f1;background:#f5f3ff;padding:4px 12px;border-radius:12px;margin-bottom:8px;}.logout-subtag{color:#e11d48;background:#fff1f2;}.auth-modal-title{font-size:1.35rem;font-weight:900;color:var(--text-main);margin-bottom:6px;letter-spacing:-0.3px;}.auth-modal-subtitle{font-size:0.85rem;color:var(--text-muted);line-height:1.5;margin:0;}.social-login-box{display:flex;justify-content:center;width:100%;margin:16px 0 12px 0;background:#f8fafc;padding:14px;border-radius:16px;border:1px solid #e2e8f0;}.auth-divider{display:flex;align-items:center;text-align:center;margin:14px 0;color:#94a3b8;font-size:0.78rem;font-weight:600;}.auth-divider::before,.auth-divider::after{content:'';flex:1;border-bottom:1px solid #e2e8f0;}.auth-divider span{padding:0 12px;}.btn-auth-primary{width:100%;padding:13px 0;font-size:0.9rem;font-weight:800;border-radius:14px;border:none;cursor:pointer;transition:all 0.25s ease;}.auth-feature-list{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px;}.feature-tag{font-size:0.72rem;font-weight:700;color:#475569;background:#f1f5f9;padding:4px 10px;border-radius:8px;display:flex;align-items:center;gap:4px;}.auth-modal-footer{margin-top:20px;border-top:1px solid #f1f5f9;padding-top:16px;width:100%;text-align:center;}.btn-auth-guest{width:100%;background:transparent;border:none;color:#64748b;font-size:0.82rem;font-weight:700;cursor:pointer;padding:8px;text-align:center;transition:color 0.15s ease;}.btn-auth-guest:hover{color:#1e293b;}.logout-profile-card{background:linear-gradient(135deg,#fff5f5 0%,#fff0f6 100%);border:1px solid #fecdd3;border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:12px;margin:16px 0 20px 0;text-align:left;position:relative;}.logout-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #ffffff;box-shadow:0 4px 8px rgba(0,0,0,0.08);}.logout-user-info{flex:1;overflow:hidden;}.logout-name{font-weight:800;font-size:0.95rem;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.logout-email{font-size:0.78rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.session-badge{font-size:0.68rem;font-weight:800;color:#059669;background:#d1fae5;padding:3px 8px;border-radius:10px;}.dual-buttons{display:flex;gap:10px;border-top:none;padding-top:0;}.btn-auth-danger{flex:1;background:linear-gradient(135deg,#f43f5e 0%,#e11d48 100%);color:#ffffff;font-weight:800;font-size:0.88rem;padding:12px 0;border-radius:12px;border:none;cursor:pointer;transition:all 0.2s ease;box-shadow:0 6px 16px rgba(225,29,72,0.3);display:flex;align-items:center;justify-content:center;gap:6px;}.btn-auth-danger:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(225,29,72,0.4);}.btn-auth-secondary{flex:1;background:#f1f5f9;color:#475569;font-weight:800;font-size:0.88rem;padding:12px 0;border-radius:12px;border:1px solid #cbd5e1;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:6px;}.btn-auth-secondary:hover{background:#e2e8f0;color:#1e293b;}@media (max-width:768px){html,body{width:100% !important;max-width:100vw !important;overflow-x:hidden !important;background-color:#ffffff !important;-webkit-overflow-scrolling:touch !important;}.app-container{width:100% !important;max-width:100vw !important;overflow-x:hidden !important;box-sizing:border-box !important;min-height:calc(100vh - 56px) !important;min-height:calc(100dvh - 56px) !important;}.app-main{width:100% !important;max-width:100% !important;box-sizing:border-box !important;overflow-x:hidden !important;padding-left:12px !important;padding-right:12px !important;}.metrics-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;}}@media (max-width:480px){.metrics-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;}}.detail-header-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--border-color);gap:10px;}.detail-type-badge{font-size:0.8rem;font-weight:800;padding:4px 11px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 1px 3px rgba(0,0,0,0.05);}.modal-close-btn:hover{transform:scale(1.08);background:#334155 !important;}#detail-story-full-container{animation:fadeIn 0.2s ease-in-out;}#detail-story-header-card{transition:all 0.2s ease;}#detail-story-text{font-feature-settings:"liga","kern";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}#detail-story-text.theme-dark{background:#0f172a !important;color:#f8fafc !important;border-color:#334155 !important;}#detail-story-text.theme-sepia{background:#fef9c3 !important;color:#451a03 !important;border-color:#fde047 !important;}#detail-story-text.theme-light{background:#ffffff !important;color:#0f172a !important;border-color:#e2e8f0 !important;}#tab-btn-detail-story.active{background:#9333ea !important;color:#ffffff !important;border-color:#7e22ce !important;box-shadow:0 2px 8px rgba(147,51,234,0.3) !important;}#tab-btn-detail-cover.active{background:#4f46e5 !important;color:#ffffff !important;border-color:#4338ca !important;box-shadow:0 2px 8px rgba(79,70,229,0.3) !important;}@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}@media (max-width:640px){.detail-header-bar{flex-direction:row;gap:6px;}#detail-story-header-card{flex-direction:column;align-items:flex-start !important;gap:10px !important;}#detail-story-header-card > div:last-child{width:100%;}#detail-story-header-card #btn-story-like-action{width:100%;}#detail-story-text{padding:18px 16px !important;font-size:1rem !important;max-height:52vh !important;}#detail-game-iframe{height:340px !important;min-height:300px !important;}}