/* === style === */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0c0d12;--s1:#151720;--s2:#0f1017;--bd:#1e2030;--bd2:#2a2d3e;--tx:#f5f5f7;--sub:#a1a1a6;--dim:#86868b;--dk:#636366}
body{background:var(--bg);color:var(--tx);font-family:-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;font-size:15px;max-width:440px;margin:0 auto;padding:20px 16px 60px;min-height:100vh;-webkit-font-smoothing:antialiased}
body.modal-lock{position:fixed;left:0;right:0;overflow:hidden;width:100%;touch-action:none}
.hdr{display:none}
.hdr h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.hdr p{font-size:14px;color:var(--dim);font-weight:500}
.card{background:var(--s1);border-radius:16px;padding:18px;margin-bottom:14px;border:1px solid var(--bd)}
.card-label{font-size:18px;font-weight:500;color:#b7c0da;margin-bottom:12px;letter-spacing:-.01em}
/* 캐릭터 선택 */
.char-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;padding-right:20px;scrollbar-width:none;margin-bottom:12px;touch-action:pan-x;cursor:grab}
.char-row::-webkit-scrollbar{display:none}
.char-row.dragging{cursor:grabbing}
.char-btn{flex-shrink:0;padding:9px 16px;border-radius:20px;border:1.5px solid color-mix(in srgb,var(--cc) 42%, #000);background:color-mix(in srgb,var(--cc) 20%, #000 80%);color:var(--cc);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.char-btn.on{color:#fff;border-color:color-mix(in srgb,var(--cc) 75%, #000);background:color-mix(in srgb,var(--cc) 38%, #000 62%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc) 22%, transparent)}
.char-btn img{width:18px;height:18px;object-fit:contain;margin-right:6px;vertical-align:-4px}
.char-btn span{vertical-align:middle}
/* 빌드 */
.builds{display:flex;gap:8px;flex-wrap:wrap}
.mode-tabs{display:flex;gap:0;margin-bottom:12px;border-radius:10px;overflow:hidden;border:1px solid var(--bd2);background:var(--bg)}
.mode-tab{flex:1;padding:11px;background:none;border:none;color:var(--dk);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.mode-tab.on{background:var(--bd2);color:var(--tx);font-weight:700}
.mode-tab{position:relative}
.mode-tab-keycap{display:none;position:absolute;top:7px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:6px;align-items:center;justify-content:center;font-size:10px;font-weight:800;line-height:1;color:#e5edf8;background:linear-gradient(180deg,#1f2937,#111827);border:1px solid rgba(148,163,184,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 10px rgba(0,0,0,.35)}
@media (min-width: 1024px){.mode-tab-keycap{display:inline-flex}.mode-tab{padding-right:34px}}

.app-tabs{display:flex;gap:0;margin:12px 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--bd2);background:var(--s1);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.app-tab{position:relative;flex:1;padding:13px 10px;background:transparent;border:none;color:var(--sub);font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:.18s}
.app-tab+.app-tab{border-left:1px solid rgba(255,255,255,.05)}
.app-tab.on{background:linear-gradient(180deg, color-mix(in srgb,var(--cc) 14%, var(--s2)), var(--s2));color:#fff;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--cc) 65%, transparent)}
.app-tab small{display:block;font-size:11px;font-weight:700;color:var(--dk);margin-top:2px}
.app-tab.on small{color:color-mix(in srgb,var(--cc) 65%, #fff)}
.guide-tab{display:none}
.guide-list{display:flex;flex-direction:column;gap:10px}
.guide-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:14px}
.guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.guide-head-main{min-width:0;flex:1}
.guide-title{font-size:18px;font-weight:800;color:var(--tx);line-height:1.2}
.guide-desc{font-size:13px;color:var(--sub);line-height:1.6}
.guide-meta{margin-top:8px;font-size:12px;color:var(--dim);line-height:1.6}

.build-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px;font-size:12px;color:var(--dim);line-height:1.6}
.build-completion{position:relative;display:inline-flex;align-items:center;gap:8px;padding:2px 0 2px 2px;white-space:nowrap}
.build-completion.rank-up{animation:completionPop .75s cubic-bezier(.2,.9,.2,1)}
.flame-wrap{position:relative;width:22px;height:26px;display:inline-block;flex:0 0 auto}
.flame-icon{position:absolute;left:2px;bottom:0;width:18px;height:24px;border-radius:60% 60% 55% 55%/72% 72% 34% 34%;transform-origin:50% 100%;filter:drop-shadow(0 0 8px rgba(251,191,36,.25));animation:flameFlicker 1.05s ease-in-out infinite;background:radial-gradient(circle at 50% 72%, rgba(255,246,214,.98) 0 16%, rgba(255,214,102,.98) 24%, rgba(251,191,36,.96) 42%, rgba(245,124,0,.9) 68%, rgba(190,24,93,.72) 100%)}
.flame-icon::before{content:'';position:absolute;left:4px;top:2px;width:10px;height:12px;border-radius:60% 60% 50% 50%/66% 66% 34% 34%;background:radial-gradient(circle at 50% 72%, rgba(255,251,235,.98) 0 26%, rgba(254,240,138,.86) 48%, rgba(254,240,138,0) 100%);opacity:.95}
.flame-burst,.flame-ring,.flame-sparks{position:absolute;pointer-events:none;opacity:0}
.flame-burst{inset:-14px;border-radius:999px}
.flame-ring{inset:-10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);transform:scale(.4)}
.flame-sparks{inset:-18px;filter:blur(.3px)}
.flame-sparks::before,.flame-sparks::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 28% 35%, rgba(255,255,255,.95) 0 1.8px, transparent 2.2px),
  radial-gradient(circle at 64% 24%, rgba(255,255,255,.9) 0 1.6px, transparent 2px),
  radial-gradient(circle at 78% 48%, rgba(255,255,255,.9) 0 1.8px, transparent 2.1px),
  radial-gradient(circle at 34% 74%, rgba(255,255,255,.8) 0 1.5px, transparent 1.9px),
  radial-gradient(circle at 70% 70%, rgba(255,255,255,.85) 0 1.7px, transparent 2px)}
.build-completion.rank-up .flame-burst{animation:flameBurst .85s cubic-bezier(.2,.8,.2,1)}
.build-completion.rank-up .flame-ring{animation:flameRing .9s ease-out}
.build-completion.rank-up .flame-sparks{animation:sparkBurst .95s ease-out}
.completion-text{font-size:12px;font-weight:800;letter-spacing:-.01em;color:rgba(224,228,238,.86);text-shadow:none;display:inline-block}
.completion-text .percent{font-weight:900}
.build-completion.level-1 .flame-icon{background:radial-gradient(circle at 50% 72%, rgba(229,186,132,.95) 0 12%, rgba(154,95,42,.92) 28%, rgba(103,64,34,.84) 58%, rgba(50,32,19,.55) 100%);filter:drop-shadow(0 0 6px rgba(154,95,42,.18));animation-duration:1.28s}
.build-completion.level-1 .completion-text{color:#b98556}
.build-completion.level-2 .flame-icon{background:radial-gradient(circle at 50% 72%, rgba(243,246,251,.94) 0 14%, rgba(191,199,213,.94) 24%, rgba(137,147,163,.90) 54%, rgba(84,95,115,.72) 100%);filter:drop-shadow(0 0 7px rgba(148,163,184,.22));animation-duration:1.04s}
.build-completion.level-2 .completion-text{color:#c8d0de}
.build-completion.level-3 .flame-icon{background:radial-gradient(circle at 50% 72%, rgba(255,246,214,.98) 0 14%, rgba(245,198,84,.98) 24%, rgba(206,145,44,.95) 52%, rgba(125,84,26,.80) 100%);filter:drop-shadow(0 0 10px rgba(245,198,84,.30));animation-duration:.94s}
.build-completion.level-3 .completion-text{background:linear-gradient(90deg,#fff1c4 0%,#f1c25c 24%,#fff1c4 50%,#bf8730 76%,#fff1c4 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;animation:textSweepBg 3.4s linear infinite}
.build-completion.level-4 .flame-icon{background:radial-gradient(circle at 50% 72%, rgba(255,247,226,.98) 0 12%, rgba(255,184,76,.98) 18%, rgba(255,108,56,.97) 42%, rgba(212,58,37,.92) 68%, rgba(118,16,24,.78) 100%);filter:drop-shadow(0 0 12px rgba(239,68,68,.38));animation-duration:.82s}
.build-completion.level-4 .completion-text{background:linear-gradient(90deg,#ffe7b8 0%,#ffb347 18%,#ff7a4f 42%,#ffd38f 66%,#ff9c54 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;animation:textSweepBg 2.4s linear infinite}
.build-completion.level-5 .flame-icon{background:linear-gradient(135deg,#fff4b1 2%,#ff9ad8 16%,#8be9ff 34%,#fff07d 50%,#d4b3ff 68%,#ff889e 84%,#fff4b1 100%);background-size:230% 230%;filter:drop-shadow(0 0 14px rgba(192,132,252,.46));animation:flameFlicker .78s ease-in-out infinite, prismShift 1.9s linear infinite}
.build-completion.level-5 .flame-icon::after{content:'';position:absolute;inset:-5px;border-radius:999px;background:conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,.48), rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));filter:blur(3px);opacity:.8;animation:prismShift 1.75s linear infinite}
.build-completion.level-5 .completion-text{background:linear-gradient(90deg,#fff6ca 0%,#ffc8e6 22%,#bcf4ff 44%,#fff0a8 66%,#dfc3ff 88%,#fff6ca 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;animation:textSweepBg 1.6s linear infinite}
.build-completion.level-1 .flame-burst{background:radial-gradient(circle, rgba(205,127,50,.42) 0, rgba(205,127,50,.2) 36%, rgba(205,127,50,0) 74%)}
.build-completion.level-2 .flame-burst{background:radial-gradient(circle, rgba(226,232,240,.6) 0, rgba(203,213,225,.28) 40%, rgba(203,213,225,0) 78%)}
.build-completion.level-3 .flame-burst{background:radial-gradient(circle, rgba(255,225,107,.62) 0, rgba(255,184,61,.3) 40%, rgba(255,184,61,0) 78%)}
.build-completion.level-4 .flame-burst{background:radial-gradient(circle, rgba(255,217,102,.64) 0, rgba(255,108,56,.34) 42%, rgba(229,57,53,0) 80%)}
.build-completion.level-5 .flame-burst{background:radial-gradient(circle, rgba(255,255,255,.72) 0, rgba(217,70,239,.36) 26%, rgba(34,211,238,.3) 46%, rgba(250,204,21,.22) 64%, rgba(255,255,255,0) 84%)}
@keyframes flameFlicker{0%{transform:translateY(0) scale(.94)}22%{transform:translateY(-1.4px) scale(1.02)}54%{transform:translateY(-3px) scale(1.16)}100%{transform:translateY(0) scale(.97)}}
@keyframes completionPop{0%{transform:scale(1)}28%{transform:scale(1.14)}55%{transform:scale(.98)}100%{transform:scale(1)}}
@keyframes flameBurst{0%{opacity:0;transform:scale(.28)}24%{opacity:1;transform:scale(.9)}55%{opacity:.9;transform:scale(1.35)}100%{opacity:0;transform:scale(1.85)}}
@keyframes flameRing{0%{opacity:.1;transform:scale(.36)}25%{opacity:.72;transform:scale(.96)}100%{opacity:0;transform:scale(1.58)}}
@keyframes sparkBurst{0%{opacity:0;transform:scale(.45) rotate(0deg)}28%{opacity:1;transform:scale(1) rotate(8deg)}100%{opacity:0;transform:scale(1.55) rotate(18deg)}}
@keyframes textSweep{0%,12%{transform:translateX(-120%)}32%,100%{transform:translateX(135%)}}
@keyframes textSweepBg{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes prismShift{0%{background-position:0% 50%}100%{background-position:220% 50%}}

.fireworks{position:absolute;left:0;top:50%;width:0;height:0;pointer-events:none}
.fireworks::before,.fireworks::after{content:'';position:absolute;left:0;top:0;width:3px;height:3px;border-radius:999px;opacity:0;transform:translate(-50%,-50%) scale(.2);}
.build-completion.perfect .fireworks::before{background:radial-gradient(circle, rgba(255,255,255,.95) 0 20%, rgba(255,215,80,.95) 42%, rgba(255,105,180,.82) 68%, rgba(255,255,255,0) 74%);box-shadow:0 0 0 0 rgba(255,255,255,.0);animation:fireworkBlastA 1.15s ease-out infinite}
.build-completion.perfect .fireworks::after{background:radial-gradient(circle, rgba(255,255,255,.95) 0 20%, rgba(124,232,255,.95) 42%, rgba(218,112,255,.82) 68%, rgba(255,255,255,0) 74%);animation:fireworkBlastB 1.25s .2s ease-out infinite}
@keyframes fireworkBlastA{0%{opacity:0;transform:translate(-16px,-50%) scale(.15)}12%{opacity:1}100%{opacity:0;transform:translate(-16px,-50%) scale(1.5)}}
@keyframes fireworkBlastB{0%{opacity:0;transform:translate(110px,-54%) scale(.15)}12%{opacity:1}100%{opacity:0;transform:translate(110px,-54%) scale(1.55)}}

.guide-rep-row{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.guide-rep-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:var(--s2);color:#d9dbe3;font-size:12px;font-weight:700;line-height:1;cursor:pointer;font-family:inherit;max-width:100%}
.guide-rep-badge .k{color:var(--dim);font-weight:700;flex-shrink:0}
.guide-rep-badge .v{color:var(--tx);font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guide-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.guide-btn{padding:10px 12px;border-radius:10px;border:1px solid var(--bd2);background:var(--bg);color:var(--tx);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.guide-btn.primary{border-color:var(--cc);color:var(--cc)}
.build-btn{padding:9px 16px;border-radius:20px;border:1.5px solid var(--bd2);background:var(--s2);color:var(--dim);font-size:14px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.build-btn.on{border-color:var(--bc);color:var(--bc);background:color-mix(in srgb,var(--bc) 14%,transparent);font-weight:700}

.build-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.build-pct{
  font-size:11px;
  font-weight:800;
  letter-spacing:-.01em;
  opacity:.96;
}
.build-pct.level-1{color:#9ca3af}
.build-pct.level-2{color:#f59e0b}
.build-pct.level-3{color:#fbbf24}
.build-pct.level-4{color:#f87171}
.build-pct.level-5{
  background:linear-gradient(120deg,#ff4fd8,#7cf7ff,#fff27a,#ff4fd8);
  background-size:220% 220%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:prismShift 2.8s linear infinite;
}

.build-info{margin-top:10px;font-size:14px;color:var(--sub);line-height:1.7}
/* 보상 */
.reward-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.reward-slot{border-radius:10px;border:2px dashed var(--bd2);background:var(--s2);cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:.15s;height:88px;min-height:88px;aspect-ratio:auto}
.reward-slot:hover{border-color:var(--dim)}
.reward-slot.filled{border-style:solid;border-color:var(--bd2)}
.reward-slot .rs-ph{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--dk);font-weight:600;text-align:center;padding:0}.reward-slot .rs-ph .ph-plus{font-size:18px;line-height:1;opacity:.9}.reward-slot .rs-ph .ph-label{font-size:12px;line-height:1.25;opacity:.8}
.reward-slot .rs-img{width:100%;height:100%;display:block;object-fit:contain;object-position:center center;border-radius:8px;padding:4px;background:transparent}
.reward-slot .rs-name{position:absolute;bottom:0;left:0;right:0;padding:12px 4px 6px;background:linear-gradient(transparent,rgba(0,0,0,.88));font-size:13px;font-weight:700;color:#fff;text-align:center}
.reward-slot .rs-tier{position:absolute;top:5px;right:5px;font-size:11px;font-weight:800;color:#fff;padding:3px 7px;border-radius:6px}
.reward-slot .rs-clear{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.5);border:none;color:#fff;font-size:14px;cursor:pointer;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.shop-pool-info{margin-bottom:10px;padding:10px 12px;border-radius:12px;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.18)}
.shop-pool-head{font-size:12px;font-weight:800;color:#93c5fd;margin-bottom:4px;letter-spacing:.01em}
.shop-pool-desc{font-size:12px;color:var(--sub);line-height:1.55}
.shop-pool-desc strong{color:var(--tx)}
.shop-slot-group{margin-top:10px}
.shop-slot-group.colorless{padding:10px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08)}
.shop-slot-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;color:var(--tx);margin-bottom:8px}
.shop-slot-label span{font-size:11px;font-weight:700;color:var(--dim)}
.reward-row-shop,.reward-row-colorless{display:grid;gap:8px;margin-bottom:0}
.reward-row-shop .reward-slot,.reward-row-colorless .reward-slot{height:88px;min-height:88px;aspect-ratio:auto}
.reward-row-shop .reward-slot .rs-ph,.reward-row-colorless .reward-slot .rs-ph{height:100%}
.reward-row-shop .reward-slot .rs-img,.reward-row-colorless .reward-slot .rs-img{width:100%;height:100%;object-fit:contain;object-position:center center;padding:4px}
.slot-dot.colorless{background:#374151}.slot-dot.on.colorless{background:#93c5fd}
.slot-hint{margin:-2px 0 10px;font-size:12px;color:#93c5fd;font-weight:700}

.tier-S,.sg-tier.tier-S,.rs-tier.tier-S,.res-tier-pill.tier-S{
  color:#243244;
  background:linear-gradient(120deg,#ff4fd8,#7cf7ff,#fff27a,#ff4fd8);
  background-size:220% 220%;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 0 12px rgba(255,79,216,.28), inset 0 0 10px rgba(255,255,255,.12);
  animation:prismShift 2.8s linear infinite, tierPulseSoft 2.2s ease-in-out infinite;
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 0 1px rgba(31,41,55,.45),
    0 1px 2px rgba(31,41,55,.28);
  -webkit-text-stroke:.15px rgba(31,41,55,.22);
}
.tier-S,.sg-tier.tier-S,.rs-tier.tier-S,.res-tier-pill.tier-S{
  font-weight:800;
}
.tier-A,.sg-tier.tier-A,.rs-tier.tier-A,.res-tier-pill.tier-A{
  color:#221305;
  background:linear-gradient(180deg,#ffe083,#f59e0b);
  border:1px solid rgba(255,214,102,.65);
  box-shadow:0 0 10px rgba(245,158,11,.22);
  animation:tierShimmerGold 2.6s linear infinite, tierPulseSoft 2.4s ease-in-out infinite;
  background-size:180% 180%;
}
.tier-B,.sg-tier.tier-B,.rs-tier.tier-B,.res-tier-pill.tier-B{
  color:#f8fafc;
  background:linear-gradient(180deg,#d5dce8,#8d98a9);
  border:1px solid rgba(226,232,240,.45);
  box-shadow:0 0 8px rgba(148,163,184,.16);
  animation:tierShimmerSilver 3.2s linear infinite, tierPulseSoft 2.8s ease-in-out infinite;
  background-size:180% 180%;
}
.tier-C,.sg-tier.tier-C,.rs-tier.tier-C,.res-tier-pill.tier-C{
  color:#fff7ed;
  background:linear-gradient(180deg,#b98252,#7c4a24);
  border:1px solid rgba(217,119,6,.35);
  box-shadow:0 0 7px rgba(146,64,14,.16);
  animation:tierShimmerBronze 3.2s linear infinite, tierPulseSoft 2.8s ease-in-out infinite;
  background-size:180% 180%;
}
.tier-D,.sg-tier.tier-D,.rs-tier.tier-D,.res-tier-pill.tier-D{
  color:#e5e7eb;
  background:linear-gradient(180deg,#5b6474,#3a4250);
  border:1px solid rgba(148,163,184,.24);
}
@keyframes prismShift{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}
@keyframes tierShimmerGold{
  0%{background-position:0% 50%;filter:brightness(1)}
  50%{filter:brightness(1.07)}
  100%{background-position:180% 50%;filter:brightness(1)}
}
@keyframes tierShimmerSilver{
  0%{background-position:0% 50%;filter:brightness(1)}
  50%{filter:brightness(1.06)}
  100%{background-position:180% 50%;filter:brightness(1)}
}
@keyframes tierShimmerBronze{
  0%{background-position:0% 50%;filter:brightness(1)}
  50%{filter:brightness(1.06)}
  100%{background-position:180% 50%;filter:brightness(1)}
}
@keyframes tierPulseSoft{
  0%,100%{transform:translateZ(0);box-shadow:0 0 0 rgba(255,255,255,0)}
  50%{transform:translateY(-.5px);box-shadow:0 0 10px rgba(255,255,255,.05)}
}

/* 모달 */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-bg.open{display:flex}
.modal-box{background:var(--s1);border-radius:18px;width:100%;max-width:400px;height:80vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--bd2)}
.modal-top{padding:14px 16px;border-bottom:1px solid var(--bd);flex-shrink:0}
.modal-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-top h2{font-size:17px;font-weight:800}
.modal-close{background:var(--bd2);border:none;color:var(--sub);font-size:16px;cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-top input{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--bd2);background:var(--bg);color:var(--tx);font-size:15px;outline:none;font-family:inherit}
.modal-body{overflow-y:auto;flex:1;padding:10px 12px 16px;overscroll-behavior:contain}
.search-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sg-card{position:relative;border-radius:8px;overflow:visible;cursor:pointer;border:1.5px solid var(--bd2);background:var(--s2)}
.sg-card:active{transform:scale(.97)}
.sg-card img{width:100%;display:block}
.sg-card .sg-ph{width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--dk)}
.sg-card .sg-name{position:absolute;bottom:0;left:0;right:0;padding:10px 3px 5px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-size:12px;font-weight:700;color:#fff;text-align:center}
.sg-card .sg-tier{position:absolute;top:4px;right:4px;font-size:9px;font-weight:800;color:#fff;padding:2px 5px;border-radius:4px}
.sg-card .sg-info{position:absolute;top:4px;left:4px;font-size:9px;font-weight:600;color:#ccc;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:4px}
.sg-card .unlock-mini{display:none}
.lock-corner{position:absolute;left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:18px;height:18px;border-radius:999px;background:#11131b;border:1.5px solid rgba(251,191,36,.5);box-shadow:0 2px 6px rgba(0,0,0,.24);display:flex;align-items:center;justify-content:center;color:#fbbf24;font-size:10px;font-weight:800;z-index:4;pointer-events:none}.lock-bottom{position:absolute;left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:18px;height:18px;border-radius:999px;background:#11131b;border:1.5px solid rgba(251,191,36,.5);box-shadow:0 2px 6px rgba(0,0,0,.24);display:flex;align-items:center;justify-content:center;color:#fbbf24;font-size:10px;font-weight:800;z-index:4;pointer-events:none}
.combo-card-link{color:rgb(96, 165, 250);font-weight:700;text-decoration:underline;cursor:pointer}
.search-empty{text-align:center;color:var(--dk);font-size:15px;padding:40px 0}
.search-keycap{
  position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 6px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
  color:#e5edf8;background:linear-gradient(180deg,#1f2937,#111827);
  border:1px solid rgba(148,163,184,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.35);
  z-index:2
}
@media (max-width: 768px){.search-keycap{display:none}}
/* 결과 */
.res-item{border-radius:14px;padding:16px;margin-bottom:10px;border:1.5px solid var(--bd);background:var(--s2)}
.res-item.best{overflow:hidden; isolation:isolate; background:#0f1f0f;border-color:#22c55e44}
.res-item.skip-best{overflow:hidden; isolation:isolate; background:#0f1f0f;border-color:#22c55e44}
.res-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.res-badge{font-size:13px;font-weight:800;padding:4px 10px;border-radius:6px;color:#fff}
.res-state{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 8px}
.res-chip{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--s1);border:1px solid var(--bd2);color:var(--sub)}
.res-chip.good{color:#34d399;border-color:#1f6f56;background:rgba(52,211,153,.08)}
.res-chip.mid{color:#fbbf24;border-color:#6b4d10;background:rgba(251,191,36,.08)}
.res-chip.bad{color:#f87171;border-color:#6f2d2d;background:rgba(248,113,113,.08)}
.res-summary{font-size:14px;color:var(--tx);font-weight:700;line-height:1.45;margin-bottom:4px}
.res-unlock-mini{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#fbbf24;line-height:1.2;margin-top:4px;padding:3px 7px;border-radius:999px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.22)}
.res-note{font-size:13px;color:var(--sub);line-height:1.5}
.res-reason{font-size:13px;color:var(--sub);line-height:1.55}
.res-reason.warn{color:#f87171;font-weight:600}
.state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.state-box{background:var(--s2);border:1px solid var(--bd);border-radius:12px;padding:10px 12px}
.state-k{font-size:11px;color:var(--dim);margin-bottom:4px;font-weight:700;letter-spacing:.02em}
.state-v{font-size:14px;color:var(--tx);font-weight:800;line-height:1.35}
.res-btn{width:100%;padding:13px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:10px;transition:.15s}
.res-btn.pick{border:none;background:#22c55e;color:#fff}
.res-btn.ghost{border:1px solid var(--bd2);background:transparent;color:var(--dim)}
/* 덱 */
.deck-head{display:flex;justify-content:space-between;align-items:center}
.deck-head span{font-size:16px;font-weight:800;color:var(--tx)}
.deck-reset{background:none;border:none;color:rgb(229,115,104);font-size:12px;cursor:pointer;font-family:inherit;font-weight:700;display:inline-flex;align-items:center;gap:6px}.deck-reset svg{width:14px;height:14px;display:block}
.deck-grid{margin-top:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dk-card{position:relative;border-radius:8px;overflow:hidden;border:1.5px solid var(--bd2);background:var(--s2);cursor:pointer}
.dk-card.must{border-color:#ef444466}.dk-card.rec{border-color:#22c55e44}
.dk-card img{width:100%;display:block}
.dk-card .dk-ph{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--dk)}
.dk-card .dk-name{position:absolute;bottom:0;left:0;right:0;padding:8px 4px 5px;background:linear-gradient(transparent,rgba(0,0,0,.92));font-size:11px;font-weight:700;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.2;z-index:1;pointer-events:none}
.dk-card .dk-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;max-width:100%}

.dk-card .dk-action-label{
  display:flex;
  justify-content:center;
  pointer-events:none;
  width:100%;
}
.dk-card .dk-action-pill{
  font-size:10px;
  font-weight:800;
  line-height:1;
  padding:4px 7px;
  border-radius:999px;
  letter-spacing:-.01em;
  backdrop-filter:blur(4px);
  box-shadow:0 6px 18px rgba(0,0,0,.26);
}
.dk-card .dk-action-pill.remove{
  color:#fff5f5;
  background:rgba(185,28,28,.88);
  border:1px solid rgba(254,202,202,.22);
}
.dk-card .dk-action-pill.upgrade{
  color:#f0fdf4;
  background:rgba(21,128,61,.9);
  border:1px solid rgba(187,247,208,.22);
}

.dk-card .dk-tag{position:absolute;top:3px;left:3px;font-size:8px;font-weight:800;padding:2px 5px;border-radius:4px;color:#fff}
.dk-card .dk-overlay{
  position:absolute;inset:0;
  background:rgba(3,8,20,.52);
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  opacity:0;pointer-events:none;
  transition:.15s;
  backdrop-filter:blur(4px);
  z-index:4
}
.dk-wrap.selected .dk-card{border-color:#ef4444}
.dk-wrap.selected .dk-overlay{opacity:1;pointer-events:auto}
.dk-overlay-btns{
  min-width:84px;
  gap:8px;
  align-items:center;
  position:relative
}
.dk-ov-x{
  position:absolute;top:-22px;right:-10px;
  width:20px;height:20px;border:none;border-radius:999px;
  background:rgba(15,23,42,.96);color:#fff;font-size:11px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 12px rgba(0,0,0,.18)
}
.dk-ov-btn{
  border:none;
  border-radius:8px;
  padding:7px 14px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
  min-width:84px;
  text-align:center;
  letter-spacing:-.01em;
  box-shadow:0 4px 12px rgba(0,0,0,.14)
}
.dk-ov-info{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:#fff}.dk-ov-del{background:linear-gradient(180deg,#fb7185,#ef4444);color:#fff}
.dk-add{position:relative;border-radius:8px;border:2px dashed var(--dim);background:rgba(255,255,255,.03);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;aspect-ratio:3/4;transition:.15s}
.dk-add:hover{border-color:var(--sub);background:rgba(255,255,255,.06)}

.dk-add-keycap{position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 6px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#e5edf8;background:linear-gradient(180deg,#1f2937,#111827);border:1px solid rgba(148,163,184,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.35);z-index:2}
@media (max-width:768px){.dk-add-keycap{display:none}}
.pc-result-desc{margin-bottom:12px !important;font-size:13px !important;color:var(--sub) !important;font-weight:700}
@media (max-width: 1023px){
  .pc-result-desc{display:none !important;}
}


.dk-add span{font-size:22px;color:var(--sub)}.dk-add small{font-size:10px;color:var(--sub);font-weight:700}
.slot-open-keycap{position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 6px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#e5edf8;background:linear-gradient(180deg,#1f2937,#111827);border:1px solid rgba(148,163,184,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.35);z-index:2}
@media (max-width:768px){.slot-open-keycap{display:none}}
.pc-pane-title{display:none}
@media (min-width:1024px){.pc-pane-title{display:block}}

/* 히스토리 */
.hist-row{font-size:13px;color:var(--dk);padding:6px 0;border-bottom:1px solid #1a1c24;line-height:1.6;word-break:break-all}
.hist-row:last-child{border:none}
.hist-pick{font-weight:700;display:inline}
.hist-pick.skip{color:#f59e0b}.hist-pick.card{color:#22c55e}
.hist-from{color:var(--dk);font-size:12px}
/* 상세 모달 */
.detail-box{position:relative;background:var(--s1);border-radius:18px;width:100%;max-width:360px;padding:20px;border:1px solid var(--bd2);max-height:85vh;overflow-y:auto}
.detail-img{width:220px;max-width:100%;height:auto;border-radius:10px;margin:0 auto 14px;display:block}
.detail-name{font-size:18px;font-weight:700;margin-bottom:6px}
.detail-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.detail-chip{padding:4px 10px;border-radius:8px;font-size:12px;font-weight:700}
.detail-section{margin-bottom:12px}
.detail-label{font-size:12px;font-weight:700;color:var(--dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
.detail-text{font-size:14px;color:var(--sub);line-height:1.7}
.detail-combo{background:var(--s2);border-radius:10px;padding:10px 12px;margin-bottom:6px;border:1px solid var(--bd)}
.detail-combo-name{font-size:13px;font-weight:800;margin-bottom:2px}
.detail-combo-why{font-size:12px;color:var(--sub)}
.detail-close{width:100%;padding:12px;border-radius:10px;border:none;background:var(--bd2);color:var(--tx);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:8px}
.detail-top-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:999px;border:none;background:rgba(255,255,255,.06);color:var(--sub);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit}

.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mini-card{position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:1.5px solid var(--bd);background:var(--bd2);cursor:pointer;padding:0;font-family:inherit;transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease, filter .18s ease}
.mini-card:hover{transform:translateY(-1px)}
.mini-card img{width:100%;height:100%;object-fit:cover;display:block}
.mini-card-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:13px;font-weight:800;background:var(--bd2)}
.mini-card.owned{border-color:rgba(52,211,153,.95);box-shadow:0 0 0 1px rgba(16,185,129,.20), 0 14px 30px rgba(16,185,129,.16)}
.mini-card.owned img{filter:saturate(1.02) brightness(1.03)}
.mini-card.owned .mini-name{background:linear-gradient(transparent,rgba(2,14,11,.92))}
.mini-card.missing{opacity:1;filter:none;border-color:rgba(130,145,170,.38);box-shadow:none}.mini-card.missing img{filter:none}.mini-card.missing::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,15,.06),rgba(5,8,15,.22));pointer-events:none}.mini-card.missing .mini-name{background:linear-gradient(transparent,rgba(5,8,15,.88))}
.mini-card.target{opacity:1;filter:none;border-color:#ffd76b;box-shadow:0 0 0 1.5px rgba(255,215,107,.38),0 0 24px rgba(255,166,0,.28),0 0 48px rgba(255,92,0,.18);animation:targetPulse 1.06s ease-in-out infinite}
.mini-card.target::after{content:'';position:absolute;inset:-12%;background:radial-gradient(circle, rgba(255,224,130,.00) 40%, rgba(255,191,36,.24) 68%, rgba(255,90,31,.12) 82%, transparent 100%);animation:targetBurstHalo 1.06s ease-in-out infinite;pointer-events:none}
.mini-card.target .mini-name{background:linear-gradient(transparent,rgba(41,12,0,.90));text-shadow:0 0 10px rgba(255,220,120,.26)}
.mini-owned-check{position:absolute;right:6px;top:6px;padding:3px 6px;border-radius:999px;background:linear-gradient(180deg,#34d399,#059669);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#f7fffb;font-size:9px;line-height:1;font-weight:800;letter-spacing:-.02em;box-shadow:0 8px 18px rgba(16,185,129,.28);z-index:5;pointer-events:none;white-space:nowrap}
.mini-target-mark{position:absolute;left:50%;top:8px;transform:translateX(-50%);padding:3px 8px;border-radius:999px;background:linear-gradient(180deg,#ffd76b,#ff9f43);border:1px solid rgba(255,255,255,.28);color:#261300;font-size:10px;font-weight:800;letter-spacing:.02em;box-shadow:0 10px 24px rgba(255,159,67,.34);z-index:5;pointer-events:none}
.guide-almost{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 13px;border-radius:14px;border:1.5px solid rgba(255,215,107,.42);background:linear-gradient(135deg,rgba(56,31,0,.62),rgba(21,13,3,.34));color:#ffe3a3;font-size:12px;font-weight:800;box-shadow:0 10px 30px rgba(255,159,67,.14)}
.guide-almost::before{content:'✦';display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:rgba(255,215,107,.16);color:#ffd76b;box-shadow:0 0 18px rgba(255,196,69,.22)}
@keyframes targetPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.03)}}
@keyframes targetBurstHalo{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:.95;transform:scale(1.03)}}
.mini-name{position:absolute;left:0;right:0;bottom:0;padding:10px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#fff;font-size:12px;font-weight:800;line-height:1.18;text-align:center;display:flex;flex-direction:column;align-items:center}
.guide-group-title{font-size:16px;font-weight:850;margin-bottom:8px;letter-spacing:-0.01em}
.guide-group.core{border:2.5px solid #ff5a5f;background:rgba(255,90,95,.12);border-radius:18px;padding:16px}
.guide-group.key{border:2.5px solid #f5b942;background:rgba(245,185,66,.12);border-radius:18px;padding:16px}
.guide-group.core .guide-group-title{color:#ff8a8f}
.guide-group.key .guide-group-title{color:#ffd166}
.guide-divider{height:1px;background:rgba(255,255,255,.08);margin:28px 0 24px}
.guide-group{border:1.5px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;background:rgba(255,255,255,.03)}
.guide-group + .guide-group{margin-top:22px}

.unlock-box{margin-bottom:12px;padding:10px 12px;border-radius:10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.22)}
.unlock-title{font-size:11px;font-weight:800;color:#fbbf24;letter-spacing:.02em;margin-bottom:4px}
.unlock-text{font-size:13px;color:#fcd34d;line-height:1.5}
.relic-link{background:none;border:none;padding:0;color:#60a5fa;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.card-link{color:#60a5fa;cursor:pointer;border-bottom:1px dashed #60a5fa44}
.card-link:hover{color:#93c5fd}
.build-stat{cursor:pointer;color:#60a5fa;border-bottom:1px dashed rgba(96,165,250,.38);font-weight:700}
.build-stat:hover{color:#93c5fd}
.build-list-wrap{margin-top:14px;border-radius:18px;padding:14px;border:2.5px solid var(--bd2);background:var(--s2)}
.build-list-wrap.must{border-color:#60a5fa;background:rgba(96,165,250,.10)}
.build-list-wrap.core{border-color:#34d399;background:rgba(52,211,153,.09)}
.build-list-wrap.all{border-color:var(--bd2);background:var(--s1)}
.build-list-wrap.divided{margin-top:26px;padding-top:22px;border-top-width:2.5px}
.build-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.build-list-title{font-size:16px;font-weight:850;line-height:1.2}
.build-list-wrap.must .build-list-title{color:#60a5fa}
.build-list-wrap.core .build-list-title{color:#34d399}
.build-list-wrap.all .build-list-title{color:var(--tx)}
.build-list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.build-list-card{position:relative;background:rgba(8,10,16,.24);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 8px 10px;cursor:pointer;font-family:inherit;color:var(--tx);display:flex;flex-direction:column;align-items:center;gap:6px;overflow:hidden}
.build-list-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--bd2);background:#0b1020}
.build-list-footer{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-height:46px;width:100%}
.build-list-lock{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:#11131b;border:1.5px solid rgba(251,191,36,.5);box-shadow:0 2px 6px rgba(0,0,0,.24);color:#fbbf24;font-size:9px;font-weight:800;line-height:1;flex-shrink:0}
.build-list-name{font-size:12px;font-weight:800;text-align:center;line-height:1.25;margin-top:0;word-break:keep-all}.build-list-desc{font-size:12px;color:var(--sub);line-height:1.55;margin-bottom:14px}
.build-list-owned{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700;line-height:1;color:#86EFAC;opacity:.95;white-space:nowrap}
.build-list-owned .check{width:10px;height:10px;border-radius:999px;background:#34D399;position:relative;display:inline-block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(16,185,129,.14),0 3px 8px rgba(16,185,129,.18)}
.build-list-owned .check::after{content:'';position:absolute;top:2px;left:3px;width:3px;height:5px;border:solid #022c22;border-width:0 2px 2px 0;transform:rotate(45deg)}
.build-list-card.must,.build-list-card.core,.build-list-card.all{border-color:rgba(255,255,255,.10)}

/* 유물 그리드 */
.relic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.relic-tile{background:var(--s1);border:1px solid var(--bd2);border-radius:12px;padding:10px 8px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:106px;transition:.15s}
.relic-tile:hover{border-color:var(--dim);transform:translateY(-1px)}
.relic-tile-img{width:48px;height:48px;object-fit:contain;display:block;margin-bottom:8px}
.relic-tile-ph{width:48px;height:48px;border-radius:10px;border:1px dashed var(--bd2);display:flex;align-items:center;justify-content:center;color:var(--dk);font-size:11px;margin-bottom:8px}
.relic-tile-name{font-size:12px;line-height:1.3;text-align:center;color:var(--tx);font-weight:700;word-break:keep-all}
.count-note{margin-top:10px;font-size:12px;color:var(--dim)}

.gnb-wrap{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--bg) 78%,rgba(12,13,18,0));padding:0 0 10px;margin:0 -2px 14px}
.gnb-shell{background:linear-gradient(180deg,var(--s1),color-mix(in srgb,var(--s1) 82%, #0a0b10));border:1px solid var(--bd2);border-radius:18px;padding:11px 12px;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.char-row{margin-bottom:0;padding-bottom:2px}
.char-btn{position:relative;padding:8px 14px;border-radius:999px;color:color-mix(in srgb,var(--cc) 72%, #fff 28%);font-size:13px;background:color-mix(in srgb,var(--cc) 10%, #0c0f15 90%);border-color:color-mix(in srgb,var(--cc) 36%, #000);box-shadow:none;overflow:hidden}
.char-btn.on{color:#fff;border-color:color-mix(in srgb,var(--cc) 82%, #000);background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 34%, #0e1016),color-mix(in srgb,var(--cc) 18%, #0b0d12));box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 28%, transparent),0 8px 22px color-mix(in srgb,var(--cc) 24%, transparent);animation:charGlow 2.2s ease-in-out infinite}
.char-btn.on::after{content:'';position:absolute;inset:1px;border-radius:999px;background:linear-gradient(120deg,transparent 15%,rgba(255,255,255,.18) 45%,transparent 65%);transform:translateX(-130%);animation:charSweep 2.8s ease-in-out infinite;pointer-events:none}
@keyframes charGlow{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 24%, transparent),0 8px 22px color-mix(in srgb,var(--cc) 18%, transparent)}50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 34%, transparent),0 10px 26px color-mix(in srgb,var(--cc) 28%, transparent)}}
@keyframes charSweep{0%,20%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}
.hdr{display:none}
.hdr h1{font-size:24px;margin-bottom:2px}
.hdr p{font-size:13px}
.deck-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.summary-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--s2);border:1px solid var(--bd);font-size:12px;line-height:1;color:var(--sub);font-weight:700}
.summary-pill strong{color:var(--tx);font-weight:800}
.deck-toolbar{display:none}
.deck-tools{display:flex;gap:6px;flex-wrap:wrap}
.ghost-btn{background:var(--s2);border:1px solid var(--bd2);color:var(--sub);font-size:12px;font-weight:700;border-radius:999px;padding:7px 10px;cursor:pointer;font-family:inherit}
.inline-picker{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.inline-picker .mode-tabs{margin-bottom:8px}
.inline-picker .reward-row{margin-bottom:0}
.inline-result{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.inline-result.open{display:block}
.build-panel{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.build-panel.open{display:block}
.hist-toggle-wrap{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.hist-toggle-wrap.open{display:block}
.card-label{font-size:18px;font-weight:500;color:#d7dbe5;margin-bottom:10px}
#resultSection{margin-top:0}
#resultSection .card-label{margin-bottom:10px}
#resultSection.card{background:transparent;border:none;padding:0;margin-bottom:0}


.res-compact-btn{
  position:relative; overflow:hidden;
width:100%;padding:13px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:10px;border:1px solid var(--bd2);background:transparent;color:var(--dim)}
.res-item.best .res-compact-btn{
  position:relative; overflow:hidden;
background:#22c55e;border-color:#22c55e;color:#fff}
.res-title-row,.res-clickarea{display:flex;align-items:center;gap:12px}
.res-tier-pill{margin-left:auto;font-size:13px;font-weight:800;padding:4px 10px;border-radius:8px;color:#fff}
.res-title{font-size:18px;font-weight:800;color:var(--tx);line-height:1.2}
.res-clickarea{cursor:pointer}
.build-panel{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.build-line-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.build-line{font-size:14px;color:var(--sub);line-height:1.6;min-width:0}
.build-list-link{flex-shrink:0;font-size:13px;color:#60a5fa;font-weight:700;text-decoration:none;background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.build-meta{margin-top:6px;font-size:13px;color:var(--dim);line-height:1.6}
.build-next{margin-top:6px;font-size:13px;color:var(--sub);line-height:1.55}
.deck-summary{display:none}
.hist-toggle-wrap{display:none !important}
.deck-divider{height:0;border-top:1px solid var(--bd);margin:14px 0 0}
.slot-progress{display:flex;gap:6px;align-items:center;margin:0 0 10px}
.slot-dot{width:8px;height:8px;border-radius:50%;background:var(--bd2)}
.slot-dot.on{background:var(--cc,#22c55e)}
.slot-text{font-size:12px;color:var(--sub);font-weight:700}

.guide-subsec{margin-top:18px}
.guide-subttl{font-size:18px;font-weight:500;color:#d7dbe5;margin:0 0 10px 2px}
.guide-intro{background:var(--s1);border:1px solid var(--bd2);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.guide-intro h3{font-size:16px;font-weight:800;margin-bottom:6px}
.guide-intro p{font-size:13px;color:var(--sub);line-height:1.6}
.coop-card{background:var(--s1);border:1px solid var(--bd2);border-radius:14px;padding:14px 15px;margin-bottom:10px}
.coop-title{font-size:16px;font-weight:800;margin-bottom:6px}
.coop-title-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.coop-title-plus{color:var(--dim);font-size:15px;font-weight:900}
.coop-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--cc) 32%, #000);background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 16%, #111827),color-mix(in srgb,var(--cc) 8%, #0b0d12));color:#fff;font-size:13px;font-weight:700;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.coop-pill img{width:18px;height:18px;object-fit:contain;display:block}
.coop-pill.sm{gap:0;padding:0;font-size:0;font-weight:700;border:none;box-shadow:none;vertical-align:middle;background:none}
.coop-pill.sm img{width:14px;height:14px}
.mini-lock{display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px;width:16px;height:16px;border-radius:999px;background:rgba(17,19,27,.92);border:1.5px solid rgba(251,191,36,.5);color:#fbbf24;font-size:10px;font-weight:800;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.24)}
.mini-name .mini-meta-pill{margin-top:4px;line-height:1;display:flex;justify-content:center}
.coop-metrics{margin-top:8px;font-size:12px;color:var(--dim);line-height:1.6}
.coop-desc{font-size:13px;color:var(--sub);line-height:1.6}
.coop-meta{font-size:12px;color:var(--sub);margin-top:8px}


.res-compact-btn{
  
}
.res-compact-btn::after{
  content:'';
  position:absolute; inset:-1px;
  background:linear-gradient(120deg,transparent 0%, rgba(255,255,255,.10) 40%, transparent 70%);
  transform:translateX(-130%);
  animation:btnSweepSoft 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btnSweepSoft{
  0%,65%,100%{transform:translateX(-130%)}
  78%{transform:translateX(130%)}
}
@keyframes btnFloatSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}


.res-keycap{
  position:absolute; top:8px; left:8px; min-width:20px; height:20px; padding:0 6px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
  color:#e5edf8; background:linear-gradient(180deg,#1f2937,#111827);
  border:1px solid rgba(148,163,184,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.35);
  z-index:3;
}
@media (max-width:768px){.res-keycap{display:none}}


.res-action-keycap,.res-skip-keycap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:6px;
  margin-right:6px;font-size:10px;font-weight:800;line-height:1;
  color:#e5edf8;background:linear-gradient(180deg,#1f2937,#111827);
  border:1px solid rgba(148,163,184,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.35);
  vertical-align:middle;
}
@media (max-width:768px){.res-action-keycap,.res-skip-keycap{display:none}}

.res-compact-btn.is-recommended,
.res-select-btn.is-recommended{
  position:relative;
  overflow:hidden;
  animation:btnFloatSoft 2.8s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(34,197,94,.28), 0 0 18px rgba(34,197,94,.10);
}
.res-compact-btn.is-recommended::before,
.res-select-btn.is-recommended::before{
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg, rgba(34,197,94,0) 0%, rgba(74,222,128,.95) 35%, rgba(34,197,94,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transform:translateX(-120%);
  animation:greenBorderSweep 2.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes greenBorderSweep{
  0%,65%,100%{transform:translateX(-120%)}
  78%{transform:translateX(120%)}
}


.search-grid.loading{position:relative;min-height:220px}
.search-grid.loading::before{
  content:'';
  position:absolute;left:0;right:0;top:8px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,rgba(56,189,248,.08),rgba(56,189,248,.65),rgba(56,189,248,.08));
  background-size:200% 100%;
  animation:searchLoadBar 1.2s linear infinite;
}
.search-grid.loading::after{
  content:'로딩 중';
  position:absolute;left:50%;top:22px;transform:translateX(-50%);
  font-size:12px;font-weight:700;color:#8fb6ff;letter-spacing:.02em;
}
@keyframes searchLoadBar{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sg-card{min-height:168px}
.sg-card img{
  width:100%;display:block;aspect-ratio:2/3;
  background:linear-gradient(180deg,#172033,#111827);
}
.img-loading{
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.08) 35%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg,#172033,#111827) !important;
  background-size:200% 100%, 100% 100% !important;
  animation:imgSkeleton 1.15s linear infinite;
}
@keyframes imgSkeleton{0%{background-position:180% 0,0 0}100%{background-position:-180% 0,0 0}}

.res-action-keycap,.res-skip-keycap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:6px;
  margin-right:6px;font-size:10px;font-weight:800;line-height:1;
  color:#e5edf8;background:linear-gradient(180deg,#1f2937,#111827);
  border:1px solid rgba(148,163,184,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.35);
  vertical-align:middle;
}
@media (max-width:768px){.res-action-keycap,.res-skip-keycap{display:none}}

.res-item.best .res-compact-btn{
  position:relative;overflow:hidden;
  background:#22c55e;border-color:#22c55e;color:#fff;
  box-shadow:0 0 0 1px rgba(34,197,94,.22),0 0 22px rgba(34,197,94,.12);
  
}
.res-item.best .res-compact-btn::before{
  content:'';
  position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,rgba(34,197,94,0) 0%,rgba(110,231,183,.95) 35%,rgba(34,197,94,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transform:translateX(-120%);
  animation:greenEdgeSweep 1.9s ease-in-out infinite;
  pointer-events:none;
}
.skip-best .res-compact-btn{
  position:relative;overflow:hidden;
  background:#38bdf8;border-color:#38bdf8;color:#082f49;
  box-shadow:0 0 0 1px rgba(56,189,248,.22),0 0 20px rgba(56,189,248,.12);
}
@keyframes greenEdgeSweep{
  0%,68%,100%{transform:translateX(-120%)}
  82%{transform:translateX(120%)}
}
@keyframes btnLiftSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}


.res-item.best{overflow:hidden; isolation:isolate; 
  border:2px solid rgba(34,197,94,.9) !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.25),
    0 0 18px rgba(34,197,94,.18),
    0 0 34px rgba(34,197,94,.10),
    inset 0 0 22px rgba(34,197,94,.06);
  position:relative;
}
.res-item.best::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg, rgba(34,197,94,0) 0%, rgba(74,222,128,.16) 35%, rgba(34,197,94,0) 70%);
  transform:translateX(-110%);
  animation:bestSweep 2.6s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes bestSweep{
  0%,72%,100%{transform:translateX(-120%)}
  84%{transform:translateX(120%)}
}
.res-item.best .res-title{
  text-shadow:0 0 10px rgba(34,197,94,.14);
}
.res-item.best .res-badge{
  box-shadow:0 0 10px rgba(34,197,94,.25);
}
.res-compact-btn.is-recommended,
.res-select-btn.is-recommended{
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(34,197,94,.34), 0 0 16px rgba(34,197,94,.12);
}
.res-compact-btn.is-recommended::before,
.res-select-btn.is-recommended::before{
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(120deg, rgba(34,197,94,0) 0%, rgba(74,222,128,.95) 34%, rgba(34,197,94,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transform:translateX(-120%);
  animation:greenBorderSweep 2.2s ease-in-out infinite;
  pointer-events:none;
}
.res-compact-btn:not(.is-recommended)::before,
.res-select-btn:not(.is-recommended)::before{
  content:none !important;
}
.res-compact-btn:not(.is-recommended),
.res-select-btn:not(.is-recommended){
  box-shadow:none !important;
}
.res-loading-wrap{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:22px 16px; color:#cbd5e1; font-weight:700;
}
.res-loading-avatar{
  width:22px;height:22px;border-radius:999px; overflow:hidden; border:1px solid rgba(148,163,184,.28);
  animation:loadingBob 1.1s ease-in-out infinite;
}
.res-loading-avatar img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes loadingBob{
  0%,100%{transform:translateY(0); opacity:.8}
  50%{transform:translateY(-2px); opacity:1}
}


.res-compact-btn,
.res-select-btn{
  animation:none !important;
}
.res-compact-btn::before,
.res-compact-btn::after,
.res-select-btn::before,
.res-select-btn::after{
  content:none !important;
  animation:none !important;
  box-shadow:none !important;
}
.res-compact-btn:not(.is-recommended),
.res-select-btn:not(.is-recommended){
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.res-compact-btn.is-recommended,
.res-select-btn.is-recommended{
  position:relative;
  overflow:hidden;
  animation:none !important;
  box-shadow:0 0 0 1px rgba(34,197,94,.34), 0 0 18px rgba(34,197,94,.10) !important;
}
.res-compact-btn.is-recommended::before,
.res-select-btn.is-recommended::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(120deg, rgba(34,197,94,0) 0%, rgba(74,222,128,.95) 34%, rgba(34,197,94,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transform:translateX(-120%);
  animation:greenBorderSweep 2.2s ease-in-out infinite !important;
  pointer-events:none;
}
.res-compact-btn.is-recommended::after,
.res-select-btn.is-recommended::after{
  content:none !important;
}
.res-item.best > *{
  position:relative;
  z-index:1;
}


.dk-wrap.selected .dk-action-label{opacity:1;transform:none;z-index:6}
.dk-card .dk-action-label{
  transition:.18s ease;
}
.dk-overlay{position:absolute;inset:0;background:rgba(3,8,20,.52);display:flex;align-items:center;justify-content:center;border-radius:6px;opacity:0;pointer-events:none;transition:.15s;backdrop-filter:blur(4px);z-index:4}
.dk-overlay-btns{
  min-width:84px;
  gap:8px;
  align-items:center;
  position:relative
}
.dk-ov-x{
  position:absolute;top:-22px;right:-10px;
  width:20px;height:20px;border:none;border-radius:999px;
  background:rgba(15,23,42,.96);color:#fff;font-size:11px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 12px rgba(0,0,0,.18)
}
.dk-ov-btn{
  border:none;
  border-radius:8px;
  padding:7px 14px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
  min-width:84px;
  text-align:center;
  letter-spacing:-.01em;
  box-shadow:0 4px 12px rgba(0,0,0,.14)
}
.dk-ov-info{
  background:linear-gradient(180deg,#60a5fa,#3b82f6);
  border-color:rgba(191,219,254,.28);
  color:#fff;
}
.dk-ov-info:hover{filter:brightness(1.06)}
.dk-ov-del{
  background:linear-gradient(180deg,#fb7185,#ef4444);
  border-color:rgba(254,205,211,.28);
  color:#fff;
}
.dk-ov-del:hover{filter:brightness(1.06)}


.dk-card.upgraded{
  border-color:#22c55e88;
  box-shadow:0 0 0 1px rgba(34,197,94,.18), inset 0 0 0 1px rgba(34,197,94,.14);
}
.dk-overlay-btns{min-width:90px;gap:8px;align-items:center;position:relative}
.dk-ov-btn{min-width:90px;padding:7px 14px}
.dk-ov-up{background:linear-gradient(180deg,#4ade80,#16a34a);color:#fff}


.dk-card.upgraded .dk-name,
.dk-card.upgraded .dk-name-text{
  color:#9dfb63 !important;
  text-shadow:
    0 0 1px rgba(11,40,10,.9),
    0 1px 0 rgba(8,24,8,.95),
    0 0 8px rgba(157,251,99,.18);
  font-weight:800;
}


.guide-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yt-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:6px;
  background:#ff0033;color:#fff;font-size:10px;font-weight:900;
  box-shadow:0 4px 10px rgba(255,0,51,.18);
  flex:0 0 auto;
}
.guide-source{margin-top:6px;font-size:12px;color:var(--dim);line-height:1.5}
.detail-source{margin-top:8px;font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.detail-source a:hover{text-decoration:underline}

.build-source-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:#64748b;text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;min-width:0;flex:0 0 auto
}
.build-source-link svg{width:12px;height:12px;display:block;flex:0 0 auto;opacity:.9}
.build-source-link:hover{opacity:.9}


/* ===== v25 cleanup ===== */
.deck-count-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;margin-bottom:10px}
.deck-count-note{font-size:14px;color:var(--sub);font-weight:700}
.deck-count-note strong{color:var(--tx);font-weight:900}
.live-tab-top-actions{display:none}
.deck-head{display:none}
.hailot-guide-overlay{position:fixed;inset:0;display:none;z-index:2147483000}
.hailot-guide-overlay.show{display:block}
.hailot-guide-dim{position:fixed;background:rgba(0,0,0,.84);pointer-events:none}
.hailot-guide-spot{
  position:fixed;
  background:transparent !important;
  border:2px solid rgba(255,255,255,.92);
  border-radius:18px;
  box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 0 0 8px rgba(96,165,250,.16);
  pointer-events:none;
  z-index:2147483001;
}
.hailot-guide-bubble{
  position:fixed;
  width:280px;
  max-width:280px;
  background:linear-gradient(180deg,#171e2d,#101522);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 14px 12px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  z-index:2147483002;
  --arrow-left:28px;
}
.hailot-guide-bubble::before{
  content:'';
  position:absolute;
  top:-8px;
  left:var(--arrow-left);
  width:14px;
  height:14px;
  background:#171e2d;
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  transform:rotate(45deg);
}
.hailot-guide-bubble.above::before{
  top:auto;
  bottom:-8px;
  transform:rotate(225deg);
}
.hailot-guide-step{font-size:11px;font-weight:900;color:#8cb2ff;letter-spacing:.06em;margin-bottom:6px}
.hailot-guide-text{font-size:15px;line-height:1.45;font-weight:800;letter-spacing:-.02em}
.hailot-guide-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}
.hailot-guide-skip{border:none;background:none;color:#8f97a8;font-size:13px;font-weight:800;padding:0;cursor:pointer}
.hailot-guide-next{border:none;background:#2d6bff;color:#fff;font-weight:900;font-size:14px;padding:9px 14px;border-radius:999px;cursor:pointer}


/* hide only the divider above build buttons */
.card#liveTab > .deck-divider:first-of-type{
  display:none !important;
}


/* remove divider just above build buttons */
#liveTab .build-panel{
  border-top:none !important;
  padding-top:0 !important;
  margin-top:0 !important;
}

/* character button active fill should respect rounded corners and feel more obvious */
.char-btn{
  position:relative;
  overflow:hidden;
}
.char-btn.on{
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--cc) 34%, transparent),
    0 10px 26px color-mix(in srgb,var(--cc) 30%, transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--cc) 18%, transparent) !important;
  animation:charGlowSlow 1.35s ease-in-out infinite !important;
}
.char-btn.on::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 16%, transparent),transparent 55%);
  pointer-events:none;
}
.char-btn.on::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 12%,rgba(255,255,255,.26) 42%,transparent 68%);
  transform:translateX(-130%);
  animation:charSweepFast 1.35s ease-in-out infinite !important;
  pointer-events:none;
}
@keyframes charGlowSlow{
  0%,100%{
    box-shadow:
      0 0 0 1px color-mix(in srgb,var(--cc) 26%, transparent),
      0 8px 18px color-mix(in srgb,var(--cc) 20%, transparent),
      inset 0 0 0 1px color-mix(in srgb,var(--cc) 14%, transparent);
  }
  50%{
    box-shadow:
      0 0 0 1px color-mix(in srgb,var(--cc) 44%, transparent),
      0 12px 34px color-mix(in srgb,var(--cc) 38%, transparent),
      inset 0 0 0 1px color-mix(in srgb,var(--cc) 24%, transparent);
  }
}
@keyframes charSweepFast{
  0%,18%{transform:translateX(-130%)}
  58%,100%{transform:translateX(130%)}
}


/* disable old onboarding */
.hailot-guide-overlay{display:none !important}

/* intro + contextual onboarding */
.hx-onboard-overlay{position:fixed;inset:0;display:none;z-index:2147483400}
.hx-onboard-overlay.show{display:block}
.hx-dim{position:fixed;background:rgba(0,0,0,.84);pointer-events:none}
.hx-spot{
  position:fixed;
  background:transparent !important;
  border:2px solid rgba(255,255,255,.92);
  border-radius:18px;
  box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 0 0 8px rgba(96,165,250,.16);
  pointer-events:none;
  z-index:2147483401;
}
.hx-bubble{
  position:fixed;
  width:280px;
  max-width:280px;
  background:linear-gradient(180deg,#171e2d,#101522);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 14px 12px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  z-index:2147483402;
  --arrow-left:28px;
}
.hx-bubble::before{
  content:'';
  position:absolute;
  top:-8px;
  left:var(--arrow-left);
  width:14px;
  height:14px;
  background:#171e2d;
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  transform:rotate(45deg);
}
.hx-bubble.above::before{
  top:auto;
  bottom:-8px;
  transform:rotate(225deg);
}
.hx-step{font-size:11px;font-weight:900;color:#8cb2ff;letter-spacing:.06em;margin-bottom:6px}
.hx-text{font-size:15px;line-height:1.45;font-weight:800;letter-spacing:-.02em}
.hx-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}
.hx-skip{border:none;background:none;color:#8f97a8;font-size:13px;font-weight:800;padding:0;cursor:pointer}
.hx-ghost{border:none;background:none;color:#c7cfde;font-size:13px;font-weight:800;padding:0;cursor:pointer}
.hx-next{border:none;background:#2d6bff;color:#fff;font-weight:900;font-size:14px;padding:9px 14px;border-radius:999px;cursor:pointer}


.recommend-hint{
  font-size:12px;
  color:#8a93a3;
  margin-top:4px;
  margin-bottom:10px;
  font-weight:500;
}


/* stronger mobile bottom breathing room */
body{
  padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 768px){
  body{
    padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

body{
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 768px){
  body{
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* mobile top spacing tightened */
@media (max-width: 768px){
  .gnb-wrap{
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
  }
  .gnb-shell{
    padding: 9px 10px !important;
  }
  .app-tabs{
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }
  .app-tab{
    padding: 10px 8px !important;
  }
  .app-tab small{
    margin-top: 1px !important;
    font-size: 10px !important;
  }
  .card{
    margin-bottom: 10px !important;
  }
  .app-tabs + .card,
  #liveTab,
  #guideTab{
    margin-top: 0 !important;
  }
}



/* ===== PC 3-column layout (real app) ===== */
@media (min-width: 1180px){
  body{
    max-width:none !important;
    margin:0 !important;
    padding:24px 28px 80px !important;
  }
  @media (min-width: 1400px){
    body{padding:24px 190px 80px !important;}
  }
  .hdr,
  .gnb-wrap,
  .app-tabs{
    max-width:1520px;
    margin-left:auto;
    margin-right:auto;
  }
  .gnb-wrap{margin-bottom:16px !important;}
  .app-tabs{margin:14px auto 16px !important;}

  #guideTab .guide-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:flex-start;
  }
  #guideTab .guide-card{
    width:100%;
    max-width:860px;
    padding:16px 18px;
    margin-left:0;
    margin-right:0;
  }
  #guideTab .guide-title{font-size:18px;}
  #guideTab .guide-desc{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    max-width:72ch;
  }
  #guideTab .guide-meta{font-size:12px;}
  #guideTab .guide-actions{
    margin-top:10px;
    justify-content:flex-start;
  }
  #guideTab .guide-btn{
    width:auto;
    justify-content:flex-start;
    align-self:flex-start;
    display:inline-flex;
  }

  /* 멀티 조합도 빌드 모음과 동일 폭/정렬 */
  #guideTab #coopSection .guide-subsec{
    width:100%;
    max-width:860px;
    margin-top:18px;
  }
  #guideTab #coopSection .guide-subttl{
    margin:0 0 10px 2px;
    text-align:left;
  }
  #guideTab #coopSection .coop-card{
    width:100%;
    max-width:860px;
    padding:16px 18px;
    margin-left:0;
    margin-right:0;
  }
  #guideTab #coopSection .guide-actions{
    justify-content:flex-start;
  }

  #liveTab{
    max-width:1520px;
    margin:0 auto 20px !important;
    padding:20px !important;
    border-radius:20px;
  }
  #guideTab{
    max-width:1520px;
    margin:0 auto 20px !important;
  }
  .pc-live-shell{
    display:grid;
    grid-template-columns:1.12fr .92fr 1.08fr;
    gap:18px;
    align-items:start;
  }
  .pc-col{min-width:0;}
  .pc-pane{
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:16px;
  }
  .pc-pane + .pc-pane{margin-top:14px;}
  .pc-pane-title{
    font-size:15px;
    font-weight:800;
    color:#dce5f4;
    margin:0 0 12px;
    letter-spacing:-.01em;
  }
  .pc-col-center #resultSection,
  .pc-col-right .pc-deck-pane,
  .pc-col-left .pc-input-pane{margin-top:0 !important;}
  .pc-col-center .pc-result-pane,
  .pc-col-right .pc-deck-pane{position:sticky; top:18px;}
  .pc-col-center .pc-result-pane{
    max-height:calc(100vh - 36px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .pc-col-left .build-panel,
  .pc-col-left #pickerSection,
  .pc-col-center #resultSection,
  .pc-col-right #deckCountRow,
  .pc-col-right #deckGrid{border-top:none !important; margin-top:0 !important; padding-top:0 !important;}
  .pc-col-left .build-panel{display:block !important;}
  .pc-col-left .inline-picker{margin-top:0; padding-top:0; border-top:none;}
  .pc-col-left .mode-tabs{margin-bottom:12px;}
  .pc-col-left .reward-row{grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;}
  .pc-col-left .reward-slot,
  .pc-col-left .reward-row-shop .reward-slot,
  .pc-col-left .reward-row-colorless .reward-slot{height:124px; min-height:124px;}
  .pc-col-left .shop-slot-group.colorless{margin-top:14px;}
  .pc-col-center .inline-result{display:block;}
  .pc-col-center #resultSection{
    display:flex !important;
    flex-direction:column;
    min-height:0;
    flex:1 1 auto;
  }
  .pc-col-center #resultSection.open{
    display:flex !important;
  }
  .pc-col-center #resultBody{
    min-height:0;
    overflow:auto;
    padding-right:4px;
  }
  .pc-col-center #resultBody::-webkit-scrollbar{width:10px;}
  .pc-col-center #resultBody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;border:2px solid transparent;background-clip:padding-box;}
  .pc-col-center #resultSection .card-label{font-size:20px; margin-bottom:10px;}
  .pc-col-center .recommend-hint{margin-bottom:10px; font-size:13px;}
  .pc-col-center .res-item{padding:12px; border-radius:14px; margin-bottom:8px;}
  .pc-col-center .res-item.res-compact-choice{padding:9px 10px;}
  .pc-col-center .res-item.res-compact-choice .res-clickarea{gap:9px; align-items:flex-start;}
  .pc-col-center .res-item.res-compact-choice .res-title{font-size:15px;}
  .pc-col-center .res-item.res-compact-choice .res-badge{font-size:10px;padding:2px 7px;}
  .pc-col-center .res-item.res-compact-choice .res-tier-pill{font-size:10px;padding:2px 7px;}
  .pc-col-center .res-item.res-compact-choice .res-state{display:flex; margin:3px 0 4px; gap:4px; flex-wrap:wrap;}
  .pc-col-center .res-item.res-compact-choice .res-chip{font-size:10px; padding:3px 7px;}
  .pc-col-center .res-item.res-compact-choice .res-summary{font-size:11px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0; color:#d7dbe5; line-height:1.35;}
  .pc-col-center .res-item.res-compact-choice .res-note,
  .pc-col-center .res-item.res-compact-choice .res-unlock-mini{display:none !important;}
  .pc-col-center .res-item.res-compact-choice .res-compact-btn{margin-top:6px; padding:7px 9px; font-size:12px; border-radius:10px; position:relative; z-index:8; pointer-events:auto;}
  .pc-col-center .res-skip-compact .res-compact-btn{position:relative; z-index:8; pointer-events:auto;}
  .pc-col-center .res-item .res-clickarea{position:relative; z-index:1;}
  .pc-col-center .res-skip-compact{padding:8px 10px;}
  .pc-col-center .res-skip-compact .res-title{font-size:14px;}
  .pc-col-center .res-skip-compact .res-summary{font-size:12px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0;}
  .pc-col-center .res-skip-compact .res-compact-btn{margin-top:7px; padding:8px 10px; font-size:12px;}
  .pc-col-center .res-title{font-size:18px;}
  .pc-col-center .res-summary{font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .pc-col-center .res-note,
  .pc-col-center .res-reason{display:none;}
  .pc-col-center .build-line,
  .pc-col-center .build-meta,
  .pc-col-center .build-next{font-size:13px;}
  .pc-col-right #deckCountRow{display:flex !important; margin-bottom:12px;}
  .pc-col-right .deck-count-note{font-size:15px;}
  .pc-col-right #deckGrid{margin-top:0; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px;}
  .pc-col-right .dk-card,
  .pc-col-right .dk-add{border-radius:10px;}
  .pc-col-right .dk-card .dk-name{font-size:12px; padding:10px 5px 7px;}
  .pc-col-right .deck-reset{font-size:13px;}
  .pc-col-right .dk-add small{font-size:11px;}
  .pc-col-right .dk-add span{font-size:24px;}
  .pc-col-left .card-label,
  .pc-col-right .card-label{font-size:20px;}
  .modal-box{max-width:1020px !important; height:84vh !important;}
  .search-grid{grid-template-columns:repeat(5,1fr) !important; gap:10px;}
  .sg-card{min-height:210px;}
}


.result-feedback{display:flex;align-items:center;gap:12px;padding:16px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));margin-top:6px}
.feedback-icon{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.18);color:#86efac;font-weight:900;flex:0 0 auto;border:1px solid rgba(134,239,172,.32);box-shadow:0 0 0 1px rgba(34,197,94,.10), 0 0 14px rgba(34,197,94,.12);font-size:16px;line-height:1}
.feedback-text{font-size:14px;font-weight:800;color:var(--tx);line-height:1.45}
.dk-card.card-added{overflow:visible;z-index:5;animation:cardAddedGlow 1.25s ease-out}
.dk-card.card-added::after{content:'';position:absolute;inset:-22px;border-radius:22px;pointer-events:none;background:radial-gradient(circle, rgba(34,197,94,.52) 0, rgba(34,197,94,.26) 30%, rgba(34,197,94,.10) 48%, rgba(34,197,94,0) 74%);animation:cardAddedHalo 1.05s ease-out}
.dk-card.card-added .confetti-bit{position:absolute;width:10px;height:14px;border-radius:3px;pointer-events:none;opacity:0;animation:confettiBurst 1s ease-out forwards;z-index:8;box-shadow:0 0 12px rgba(255,255,255,.18)}
@keyframes cardAddedGlow{0%{box-shadow:0 0 0 rgba(34,197,94,0), 0 0 0 rgba(16,185,129,0)}35%{box-shadow:0 0 26px rgba(34,197,94,.55), 0 0 48px rgba(16,185,129,.26)}100%{box-shadow:0 0 0 rgba(34,197,94,0), 0 0 0 rgba(16,185,129,0)}}
@keyframes cardAddedHalo{0%{opacity:.95;transform:scale(.78)}100%{opacity:0;transform:scale(1.4)}}
@keyframes confettiBurst{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0deg)}16%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.14) rotate(240deg)}}


@media (max-width:768px){.pc-result-desc{display:none !important;}}

/* HOTKEY BADGE FIX */
.search-card .hotkey-badge{
  position:absolute;
  top:4px;
  left:4px;
  width:28px;
  height:28px;
  font-size:14px;
  font-weight:700;
  background:rgba(0,0,0,0.85);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}


/* SEARCH KEYCAP SIZE FIX */
.search-keycap {
  position:absolute;
  top:4px;
  left:4px;
  width:34px;
  height:34px;
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.9);
  color:#fff;
  border-radius:8px;
  z-index:10;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
}


/* ONBOARDING FLICKER FIX */
.onboarding {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.onboarding.show {
  opacity: 1;
}


@media (min-width: 1024px) {
  .res-tier-pill {
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 8px;
  }
}


/* MATCH TIER WITH KEYCAP */
.sg-tier{
  position:absolute;
  top:4px;
  right:4px;
  min-width:34px;
  width:34px;
  height:34px;
  padding:0;
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  z-index:10;
  line-height:1;
}


/* ONBOARDING HARD FIX */
.onboarding {
  visibility:hidden;
  opacity:0;
}
.onboarding.show {
  visibility:visible;
  opacity:1;
  transition:opacity 0.15s ease;
}


/* ONBOARDING POSITION READY FIX */
.hx-onboard-overlay.show .hx-bubble,
.hx-onboard-overlay.show .hx-spot,
.hx-onboard-overlay.show .hx-dim{
  visibility:hidden;
}
.hx-onboard-overlay.show.ready .hx-bubble,
.hx-onboard-overlay.show.ready .hx-spot,
.hx-onboard-overlay.show.ready .hx-dim{
  visibility:visible;
}


/* FORCE SG TIER SIZE TO MATCH SEARCH KEYCAP */
.sg-tier{
  position:absolute;
  top:4px;
  right:4px;
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  padding:0 !important;
  font-size:16px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:8px !important;
  line-height:1 !important;
  z-index:10 !important;
}


/* SEARCH RESULT CARD SEPARATION */
.search-grid{
  gap:14px !important;
}
.sg-card{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:14px !important;
  padding:8px !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
  overflow:hidden !important;
}
.sg-card img,
.sg-card .sg-ph{
  border-radius:10px !important;
}
.sg-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.18) !important;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
}
@media (min-width: 1024px){
  .search-grid{
    gap:16px !important;
  }
}


/* SHOP SKIP BUTTON VISUAL DIFFERENTIATION */
.shop-skip-btn{
  background:#f3f4f6 !important;
  color:#111827 !important;
  border-color:#d1d5db !important;
}
.shop-skip-btn:hover{
  background:#ffffff !important;
  color:#000 !important;
  border-color:#ffffff !important;
}
.shop-exit-btn .res-skip-keycap{
  margin-right:6px;
}


/* PAGE SCROLL INSTEAD OF INNER RESULT SCROLL */
.pc-result-pane,
.pc-result-pane .inline-result,
.pc-result-pane #resultSection,
.pc-result-pane #resultBody{
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
}


/* TOP RECOMMEND SHOP EXIT */
.res-skip-compact.is-top-recommend{
  margin-bottom:14px !important;
}
.res-skip-compact.is-top-recommend .res-summary{
  opacity:0.95;
}


/* FORCE SHOP EXIT TO TOP WHEN IT IS BEST */
#resultBody{
  display:flex;
  flex-direction:column;
}
#resultBody .res-skip-compact.skip-best{
  order:-999 !important;
  margin-bottom:14px !important;
}



/* PC에서 빌드모음 상세 모달 크게 보기 */
@media (min-width: 1180px){
  #detailModal{
    align-items:center;
    justify-content:center;
    padding:28px;
  }
  #detailModal .detail-box{
    width:min(1100px, calc(100vw - 80px));
    max-width:min(1100px, calc(100vw - 80px));
    max-height:88vh;
    padding:28px 30px 26px;
    border-radius:24px;
    box-shadow:0 28px 80px rgba(0,0,0,.42);
  }
  #detailModal .detail-name{
    font-size:28px;
    line-height:1.2;
    margin-bottom:10px;
    padding-right:44px;
  }
  #detailModal .detail-text,
  #detailModal .detail-combo-why,
  #detailModal .build-list-desc,
  #detailModal .guide-desc,
  #detailModal .guide-meta,
  #detailModal .coop-desc,
  #detailModal .coop-meta,
  #detailModal .detail-source{
    font-size:15px;
    line-height:1.75;
  }
  #detailModal .detail-label{
    font-size:13px;
    margin-bottom:6px;
  }
  #detailModal .detail-chip{
    font-size:13px;
    padding:6px 12px;
    border-radius:10px;
  }
  #detailModal .detail-section{margin-bottom:16px;}
  #detailModal .guide-group,
  #detailModal .guide-group.core,
  #detailModal .guide-group.key,
  #detailModal .build-list-wrap,
  #detailModal .coop-card,
  #detailModal .guide-intro{
    padding:22px;
    border-radius:22px;
  }
  #detailModal .guide-group-title,
  #detailModal .guide-subttl,
  #detailModal .coop-title,
  #detailModal .detail-combo-name{
    font-size:24px;
    line-height:1.25;
    margin-bottom:10px;
  }
  #detailModal .mini-grid,
  #detailModal .build-list-grid{
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:16px;
  }
  #detailModal .mini-card,
  #detailModal .build-list-card{
    border-radius:14px;
  }
  #detailModal .mini-name,
  #detailModal .build-list-name{
    font-size:14px;
  }
  #detailModal .guide-actions{gap:10px; margin-top:14px;}
  #detailModal .guide-btn,
  #detailModal .detail-close{
    font-size:15px;
    padding:13px 16px;
    border-radius:12px;
  }
  #detailModal .detail-close{margin-top:14px;}
  #detailModal .detail-top-close{
    top:16px;
    right:16px;
    width:38px;
    height:38px;
    font-size:20px;
  }

  #detailModal .detail-summary-compact{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
    margin-bottom:12px;
  }
  #detailModal .detail-summary-compact .summary-pill{
    padding:8px 12px;
    font-size:12px;
  }
  #detailModal .detail-two-col{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:14px;
  }
  #detailModal .detail-two-col .guide-group,
  #detailModal .detail-two-col .guide-group.core,
  #detailModal .detail-two-col .guide-group.key{
    margin-top:0 !important;
    height:100%;
  }
  #detailModal .detail-two-col .guide-group-title{
    font-size:21px;
    margin-bottom:8px;
  }
  #detailModal .detail-two-col .ref-mini-desc{
    font-size:14px;
    line-height:1.6;
    margin-bottom:14px !important;
  }
  #detailModal .detail-two-col .guide-group.core .mini-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
  }
  #detailModal .detail-two-col .guide-group.key .mini-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
  }
  #detailModal .detail-two-col .mini-card{
    border-radius:12px;
  }
  #detailModal .detail-two-col .mini-name{
    font-size:13px;
  }
  #detailModal .detail-secondary-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  #detailModal .guide-group.compact-section .guide-group-title{
    font-size:20px;
  }
  #detailModal .guide-group.compact-section .mini-grid{
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:12px;
  }
  @media (min-width: 1024px){
    #detailModal .detail-box{
      width:min(1040px, calc(100vw - 72px));
      max-width:min(1040px, calc(100vw - 72px));
      padding:24px 26px 22px;
    }
  }
  @media (min-width: 1180px){
    #detailModal .detail-two-col{
      grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
      gap:18px;
    }
    #detailModal .detail-secondary-grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:18px;
      align-items:start;
    }
  }
}
/* === style: search-scope-chip-fix === */
.search-scope-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.search-scope-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--bd2,#2a2d3e);background:var(--bg,#0c0d12);color:var(--sub,#a1a1a6);font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;line-height:1;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.search-scope-chip.on{background:var(--bd2,#2a2d3e);color:var(--tx,#f5f5f7);border-color:var(--bd2,#2a2d3e)}
.search-scope-chip img{width:16px;height:16px;object-fit:contain;display:block;flex:0 0 auto}
.search-scope-keycap{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:6px;align-items:center;justify-content:center;font-size:10px;font-weight:800;line-height:1;color:#e5edf8;background:linear-gradient(180deg,#1f2937,#111827);border:1px solid rgba(148,163,184,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 10px rgba(0,0,0,.35)}
@media (max-width:768px){.search-scope-keycap{display:none}}
/* === style === */
.shop-card-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.shop-card-actions .res-compact-btn{
  margin-top:0;
  width:auto;
  flex:1 1 0;
}
.shop-card-actions .shop-skip-btn{
  background:transparent;
  color:var(--sub);
}
/* === style: mobile-modal-tighten-fix === */
@media (max-width:768px){
  #searchModal .modal-box{height:86vh !important;}
  #searchModal .modal-top{padding:10px 12px !important;}
  #searchModal .modal-top-row{margin-bottom:8px !important;}
  #searchModal .modal-top h2{font-size:16px !important;}
  #searchModal .modal-top input{padding:9px 12px !important;}
  #searchModal .search-scope-tabs{margin-top:8px !important; gap:6px !important;}
  #searchModal .modal-body{padding:8px 10px 12px !important;}
}
/* === style === */
@media (max-width: 768px){
  #searchModal .modal-box{height:86vh !important;}
  #searchModal .modal-top{padding:10px 12px 8px !important;}
  #searchModal .modal-top-row{margin-bottom:6px !important;}
  #searchModal .modal-top h2{font-size:16px !important;}
  #searchModal .modal-close{width:26px !important;height:26px !important;font-size:15px !important;}
  #searchModal .modal-top input{padding:9px 12px !important;font-size:14px !important;}
  #searchModal .search-scope-tabs{margin-top:8px !important;gap:6px !important;}
  #searchModal .search-scope-chip{padding:6px 10px !important;font-size:12px !important;gap:6px !important;}
  #searchModal .search-scope-chip img{width:14px !important;height:14px !important;}
  #searchModal .modal-body{padding:6px 10px 12px !important;}
}
/* === style: mobile-search-modal-top-align-fix === */
@media (max-width: 768px){
  #searchModal.modal-bg{
    align-items:flex-start !important;
    justify-content:center !important;
    padding:6px 6px 0 !important;
  }
  #searchModal .modal-box{
    width:100% !important;
    max-width:none !important;
    height:calc(100vh - 6px) !important;
    margin:0 !important;
    border-radius:18px 18px 0 0 !important;
  }
  #searchModal .modal-top{
    padding:8px 10px 6px !important;
  }
  #searchModal .modal-top-row{
    margin-bottom:4px !important;
  }
  #searchModal .modal-top h2{
    font-size:15px !important;
  }
  #searchModal .modal-close{
    width:24px !important;
    height:24px !important;
  }
  #searchModal .modal-top input{
    padding:8px 10px !important;
  }
  #searchModal .search-scope-tabs{
    margin-top:6px !important;
    gap:6px !important;
  }
  #searchModal .search-scope-chip{
    padding:6px 10px !important;
    font-size:12px !important;
    gap:6px !important;
  }
  #searchModal .search-scope-chip img{
    width:14px !important;
    height:14px !important;
  }
  #searchModal .modal-body{
    padding:4px 8px 10px !important;
  }
}
/* === style: search-flow-stable-v4-style === */
.search-scope-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.search-scope-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--bd2);background:var(--bg);color:var(--tx);font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.search-scope-chip img{width:16px;height:16px;object-fit:contain;display:block}
.search-scope-chip.on{border-color:color-mix(in srgb,var(--cc) 48%, #fff 8%);background:color-mix(in srgb,var(--cc) 16%, var(--bg));box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 18%, transparent) inset}
.search-scope-keycap{font-size:11px;color:var(--sub);font-weight:800}
.sg-name-sub{display:block;margin-top:3px;font-size:10px;line-height:1.2;color:#b6bfd2;font-weight:700;opacity:.95}