/* 이벤트(오늘의 팬 라이프 · 출석 7일 · 골목 동선) · 밤 편의점: 큰 아트 + 번호 카드 화면(rpg-events-ui).
   모달 기본 테마(rpg-bubble · rpg-hud · rpg-experience)가 !important로 덮으므로 #modal 아래에서 다시 잡는다. */
#rpg-app #modal .ev-sheet,#rpg-app #modal .sh-sheet{--tone-bg:linear-gradient(135deg,#ffd9b8,#f7b7c9 45%,#c9b4f0)}
#rpg-app #modal .tone-peach{--tone-bg:linear-gradient(135deg,#ffe0bf 0%,#f8b9cb 48%,#c6b3f1 100%)}
#rpg-app #modal .tone-sky{--tone-bg:linear-gradient(160deg,#c8ecff 0%,#9fd6ea 42%,#c6f0d6 100%)}
#rpg-app #modal .tone-dusk{--tone-bg:linear-gradient(165deg,#ffc08f 0%,#ee8ea8 46%,#6d68b9 100%)}
#rpg-app #modal .tone-night{--tone-bg:linear-gradient(160deg,#272e66 0%,#4a3a8c 52%,#c46ca2 100%)}
#rpg-app #modal .tone-steel{--tone-bg:linear-gradient(160deg,#b2c6da 0%,#6a85a3 55%,#34445e 100%)}
#rpg-app #modal .tone-pink{--tone-bg:linear-gradient(160deg,#ffd6e9 0%,#f39cc2 50%,#b480e0 100%)}
#rpg-app #modal .tone-mint{--tone-bg:linear-gradient(160deg,#d2f5e5 0%,#8fd8c4 50%,#58a3b6 100%)}

#rpg-app #modal>.rpg-modal.ev-sheet,#rpg-app #modal>.rpg-modal.sh-sheet{position:relative;display:grid;padding:0!important;margin:0;max-height:none!important;overflow:hidden!important;border-radius:22px!important;border:1px solid #ffffff26!important;background:#131b29!important;color:#f6f2ea!important;box-shadow:0 30px 80px #05080f99!important;zoom:1}
#rpg-app #modal>.rpg-modal.ev-sheet{width:min(1120px,96vw);height:min(640px,90vh);grid-template-columns:212px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#rpg-app #modal>.rpg-modal.sh-sheet{width:min(1160px,96vw);height:min(690px,92vh);grid-template-columns:214px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
#rpg-app #modal>.rpg-modal :is(.ev-x,.sh-x){position:absolute;top:12px;right:12px;z-index:6;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff59!important;background:#141c2bcc!important;color:#fff!important;font-size:20px;line-height:1;cursor:pointer}

/* 왼쪽 배너 탭 */
#rpg-app #modal .ev-rail{display:flex;flex-direction:column;gap:10px;padding:16px 12px;background:linear-gradient(180deg,#18223400,#0f1520),#141c2b;border-right:1px solid #ffffff14;overflow-y:auto}
#rpg-app #modal .ev-rail header{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:2px 4px 6px!important;color:#f3d48e!important;border:0!important;margin:0!important;background:none!important}
#rpg-app #modal .ev-rail header b{font-size:16px;color:#fff!important}
#rpg-app #modal .ev-tab,#rpg-app #modal .sh-cat{position:relative;isolation:isolate;display:grid;align-content:end;gap:1px;min-height:78px;padding:10px 12px;border-radius:12px;border:2px solid transparent;overflow:hidden;text-align:left;color:#fff;font:inherit;cursor:pointer;background:var(--art,linear-gradient(transparent,transparent)) center/cover,var(--tone-bg);filter:saturate(.8) brightness(.78);transition:filter .16s,border-color .16s,transform .16s}
#rpg-app #modal .ev-tab::before,#rpg-app #modal .sh-cat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c1220d9 0%,#0c122066 62%,transparent)}
#rpg-app #modal .ev-tab img,#rpg-app #modal .sh-cat img{position:absolute;z-index:-1;right:-4px;bottom:-34px;height:124px;width:auto;filter:drop-shadow(0 4px 8px #0006)}
#rpg-app #modal .ev-tab b,#rpg-app #modal .sh-cat b{font-size:13px;text-shadow:0 1px 6px #000a}
#rpg-app #modal .ev-tab small{font-size:11px;color:#ffffffd0;text-shadow:0 1px 6px #000a}
#rpg-app #modal .ev-tab em{position:absolute;top:7px;right:8px;padding:1px 7px;border-radius:99px;background:#ff5d7d;color:#fff;font-size:10px;font-style:normal;font-weight:900;box-shadow:0 2px 6px #0005}
#rpg-app #modal .ev-tab:hover,#rpg-app #modal .sh-cat:hover{filter:saturate(.95) brightness(.92)}
#rpg-app #modal .ev-tab[aria-selected=true],#rpg-app #modal .sh-cat[aria-selected=true]{filter:none;border-color:#f3d48e;box-shadow:0 0 0 3px #f3d48e33,0 8px 20px #0007;transform:translateX(3px)}

/* 큰 아트 */
#rpg-app #modal .ev-main,#rpg-app #modal .sh-main{position:relative;isolation:isolate;min-width:0;min-height:0;overflow:hidden;background:var(--art,linear-gradient(transparent,transparent)) center/cover,var(--tone-bg)}
#rpg-app #modal .ev-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 18% 22%,#ffffffa6 0 2px,transparent 3px),radial-gradient(circle at 34% 12%,#ffffff80 0 1.5px,transparent 2.5px),radial-gradient(circle at 62% 30%,#ffffff70 0 2px,transparent 3px),radial-gradient(circle at 80% 64%,#ffffff60 0 1.5px,transparent 2.5px),radial-gradient(circle at 28% 70%,#ffffff40 0 30px,transparent 70px),radial-gradient(circle at 70% 18%,#ffffff47 0 46px,transparent 110px),radial-gradient(ellipse at 22% 108%,#ffffffa0 0 90px,transparent 220px),conic-gradient(from 200deg at 12% -10%,transparent 0 8deg,#ffffff26 10deg 16deg,transparent 18deg 30deg,#ffffff1a 32deg 38deg,transparent 40deg)}
#rpg-app #modal .ev-main::after,#rpg-app #modal .sh-main::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,#120c2459 0%,transparent 55%),linear-gradient(0deg,#120c2440,transparent 40%)}
#rpg-app #modal .ev-cast{position:absolute;z-index:0;left:1%;bottom:0;height:min(86%,400px);width:34%;pointer-events:none}
#rpg-app #modal .ev-cast img{position:absolute;bottom:0;height:calc(100% - var(--i) * 14%);left:calc(var(--i) * 38%);filter:drop-shadow(0 18px 24px #2a163866);z-index:calc(2 - var(--i))}
#rpg-app #modal .ev-head{position:absolute;z-index:1;top:26px;right:62px;left:40%;text-align:right;display:grid;justify-items:end;gap:8px}
#rpg-app #modal .ev-head h2{margin:0;font-size:34px;font-weight:900;line-height:1.1;color:#fff!important;text-shadow:0 2px 0 #3a225066,0 6px 22px #2a163880;letter-spacing:-.01em}
#rpg-app #modal .ev-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
#rpg-app #modal .ev-chips span{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;background:#141c2bd0;color:#fff;font-size:11.5px;font-weight:800}
#rpg-app #modal .ev-rule{cursor:help;background:#ffffffe0!important;color:#2a2440!important}
#rpg-app #modal .ev-head p{margin:0;max-width:460px;font-size:13px;line-height:1.6;color:#fff;text-shadow:0 1px 8px #2a1638b3}

/* 번호 카드 */
#rpg-app #modal .ev-cards{position:absolute;z-index:1;right:26px;bottom:24px;display:grid;gap:10px}
#rpg-app #modal .ev-cards.attend{grid-template-columns:repeat(3,104px) 148px;grid-template-rows:126px 126px}
#rpg-app #modal .ev-cards.missions{grid-template-columns:repeat(3,150px) 136px;grid-template-rows:244px}
#rpg-app #modal .ev-cards.route{grid-template-columns:repeat(3,176px);grid-auto-rows:minmax(112px,auto);left:44%;justify-content:end}
#rpg-app #modal .ev-card{position:relative;display:grid;justify-items:center;align-content:center;gap:5px;min-width:0;padding:22px 10px 32px;border-radius:14px;background:#fffdf8;color:#2b2540;box-shadow:0 12px 26px #1d123566;overflow:hidden;text-align:center}
#rpg-app #modal .ev-card.big{grid-column:4;grid-row:1/-1;background:linear-gradient(180deg,#fff6d8,#ffd877);box-shadow:0 0 0 2px #fff3c4,0 14px 30px #a8761f66}
#rpg-app #modal .ev-no{position:absolute;left:9px;top:4px;font-size:28px;font-weight:900;line-height:1;letter-spacing:-.02em;color:#ece5d6;font-family:"Outfit","Noto Sans KR",sans-serif}
#rpg-app #modal .ev-card.big .ev-no{font-size:40px;color:#f2c14e}
#rpg-app #modal .ev-coin{color:#e2a426;filter:drop-shadow(0 3px 4px #b9801f55)}
#rpg-app #modal .ev-card strong{display:inline-flex;align-items:center;gap:4px;font-size:16px;font-weight:900;color:#3a2c12}
#rpg-app #modal .ev-card.big strong{font-size:22px}
#rpg-app #modal .ev-state{position:absolute;left:0;right:0;bottom:0;padding:6px 4px;font-size:11px;font-style:normal;font-weight:800;background:#f2ede3;color:#7b7262}
#rpg-app #modal .ev-card.big .ev-state{background:#ffffff80;color:#6b4c0e}
#rpg-app #modal .ev-check{position:absolute;z-index:3;top:50%;left:50%;width:44px;height:44px;margin:-34px 0 0 -22px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:900;color:#2b2210;background:linear-gradient(180deg,#f8dd8a,#e0ad3f);box-shadow:0 0 0 3px #fff8,0 6px 14px #0006}
#rpg-app #modal .ev-card.st-done::after{content:"";position:absolute;inset:0;z-index:2;background:#2a2438b3}
#rpg-app #modal .ev-card.st-done .ev-state{z-index:3;background:#00000040;color:#fff}
#rpg-app #modal .ev-card.st-today{box-shadow:0 0 0 3px #f3d48e,0 12px 26px #1d123566}
#rpg-app #modal .ev-card.st-today .ev-state{background:linear-gradient(180deg,#f8dd8a,#e0ad3f);color:#2b2210}
#rpg-app #modal .ev-card.st-today .ev-check{margin-top:-40px;width:34px;height:34px;font-size:18px;top:24px;left:auto;right:6px;margin:0}
#rpg-app #modal .ev-card.st-next .ev-state{background:#dff0ff;color:#2c6aa1}
#rpg-app #modal .ev-card.mission{align-content:start;padding-top:40px;gap:8px}
#rpg-app #modal .ev-ic{font-size:36px;line-height:1;filter:drop-shadow(0 4px 6px #0002)}
#rpg-app #modal .ev-card.mission b{font-size:13px;line-height:1.4;min-height:2.8em;display:grid;place-items:center}
#rpg-app #modal .ev-bar{width:100%;height:8px;border-radius:99px;background:#ece6da;overflow:hidden}
#rpg-app #modal .ev-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f6b04c,#f27f9b)}
#rpg-app #modal .ev-card.mission small{font-size:11px;color:#7a7266;display:inline-flex;align-items:center;gap:3px}
#rpg-app #modal .ev-card.mission .ev-btn{margin-top:4px}
#rpg-app #modal .ev-card.st-ready{box-shadow:0 0 0 3px #f3d48e,0 12px 26px #1d123566}
#rpg-app #modal .ev-card.bonus{align-content:center}
#rpg-app #modal .ev-card.spot{justify-items:start;text-align:left;padding:30px 12px 12px;gap:3px}
#rpg-app #modal .ev-card.spot small{font-size:11px;font-weight:800;color:#c05b82}
#rpg-app #modal .ev-card.spot b{font-size:14px}
#rpg-app #modal .ev-card.spot>span:not(.ev-no){font-size:11px;line-height:1.5;color:#6e6680}
#rpg-app #modal .ev-card.spot .ev-state{left:auto;right:8px;top:8px;bottom:auto;border-radius:99px;padding:2px 8px;background:#ff5d7d;color:#fff}
#rpg-app #modal .ev-card.spot.now{box-shadow:0 0 0 3px #ff8fab,0 12px 26px #1d123566}
#rpg-app #modal .ev-btn{font:inherit;font-size:12px;font-weight:800;padding:8px 14px;border-radius:99px;border:0;cursor:pointer;background:#24324a;color:#fff;box-shadow:0 3px 0 #111a2a}
#rpg-app #modal .ev-btn.gold{background:linear-gradient(180deg,#f8dd8a,#e0ad3f);color:#2b2210;box-shadow:0 3px 0 #a87b22}
#rpg-app #modal .ev-btn.wide{grid-column:-2/-1;justify-self:end;align-self:end;width:auto!important;height:auto!important;min-height:0!important;border-radius:99px!important;padding:9px 18px!important}
#rpg-app #modal .ev-btn:disabled{filter:grayscale(.7) opacity(.6);cursor:default}

/* 밤 편의점 */
#rpg-app #modal .sh-top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:12px 66px 12px 18px!important;background:#0f1520;border-bottom:1px solid #ffffff14!important;margin:0!important}
#rpg-app #modal .sh-sign small{display:block;font-size:10px;letter-spacing:.16em;font-weight:800;color:#f3d48e!important}
#rpg-app #modal .sh-sign h2{margin:0;font-size:22px;font-weight:900;color:#fff!important}
#rpg-app #modal .sh-coin{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;border-radius:99px;background:#ffffff14;border:1px solid #ffffff26;color:#f3d48e}
#rpg-app #modal .sh-coin b{color:#fff;font-size:14px}
#rpg-app #modal .sh-cats{grid-row:2;display:flex;flex-direction:column;gap:10px;padding:14px 12px;background:#141c2b;border-right:1px solid #ffffff14;overflow-y:auto}
#rpg-app #modal .sh-cat{min-height:84px;flex:0 0 auto}
#rpg-app #modal .sh-cat-ic{position:absolute;left:10px;top:8px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#ffffffd9;color:#2b2540;box-shadow:0 4px 10px #0004}
#rpg-app #modal .sh-main{grid-row:2}
#rpg-app #modal .sh-cast{position:absolute;z-index:0;left:2%;bottom:0;height:min(88%,420px);filter:drop-shadow(0 18px 24px #120c2480);pointer-events:none}
#rpg-app #modal .sh-main .ev-head{left:34%}
#rpg-app #modal .sh-products{position:absolute;z-index:1;right:24px;bottom:22px;left:30%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}
#rpg-app #modal .sh-card{position:relative;width:134px;display:grid;justify-items:center;gap:4px;padding:30px 10px 12px;border-radius:14px;background:#fffdf8;color:#2b2540;box-shadow:0 12px 26px #120c2466;text-align:center}
#rpg-app #modal .sh-ic{width:66px;height:66px;display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle at 50% 35%,#fff,#f1ead9);color:#3a2f56}
#rpg-app #modal .sh-card b{font-size:13px}
#rpg-app #modal .sh-card small{font-size:10.5px;line-height:1.45;color:#7a7266;min-height:3em}
#rpg-app #modal .sh-have{position:absolute;right:9px;top:8px;font-style:normal;font-size:11px;font-weight:900;color:#e0457b}
#rpg-app #modal .sh-price{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;background:linear-gradient(180deg,#ffe58a,#ffbf2e);color:#4a3307;font-size:13px;box-shadow:0 2px 0 #c78f12}
#rpg-app #modal .sh-buy{display:flex;gap:6px;margin-top:4px}
#rpg-app #modal .sh-buy button{font:inherit;font-size:12px;font-weight:800;padding:7px 12px;border-radius:99px;border:0;cursor:pointer;background:#24324a;color:#fff;box-shadow:0 3px 0 #111a2a}
#rpg-app #modal .sh-buy button+button{background:#eef0f5;color:#24324a;box-shadow:0 3px 0 #c7ccd8}
#rpg-app #modal .sh-buy button:disabled{filter:grayscale(.7) opacity(.55);cursor:default}
#rpg-app #modal .sh-line{position:absolute;z-index:1;left:3%;top:18px;max-width:28%;margin:0;padding:8px 12px;border-radius:12px;background:#141c2bc7;color:#fff;font-size:12px;line-height:1.5;font-style:italic}
#rpg-app #modal .sh-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#0f1520;border-top:1px solid #ffffff14}
#rpg-app #modal .sh-mini{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;font:inherit;padding:8px 14px;border-radius:12px;border:1px solid #f3d48e66;background:#f3d48e1a;color:#f3d48e;cursor:pointer}
#rpg-app #modal .sh-mini svg{grid-row:1/3}
#rpg-app #modal .sh-mini b{font-size:13px;color:#fff}
#rpg-app #modal .sh-mini small{font-size:11px;color:#ffffffb3}

@media(max-width:860px){
  #rpg-app #modal>.rpg-modal.ev-sheet,#rpg-app #modal>.rpg-modal.sh-sheet{width:min(560px,96vw);height:min(92dvh,900px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  #rpg-app #modal>.rpg-modal.sh-sheet{grid-template-rows:auto auto minmax(0,1fr) auto}
  #rpg-app #modal .ev-rail,#rpg-app #modal .sh-cats{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:10px;border-right:0;border-bottom:1px solid #ffffff14}
  #rpg-app #modal .ev-rail header{display:none}
  #rpg-app #modal .ev-tab,#rpg-app #modal .sh-cat{flex:0 0 150px;min-height:64px}
  #rpg-app #modal .sh-cats{grid-row:2;grid-column:1}
  #rpg-app #modal .sh-main{grid-row:3;grid-column:1}
  #rpg-app #modal .sh-bar{grid-row:4}
  #rpg-app #modal .ev-main,#rpg-app #modal .sh-main{overflow-y:auto;padding:16px 14px 18px;display:grid;align-content:start;gap:14px}
  #rpg-app #modal .ev-cast,#rpg-app #modal .sh-cast{position:absolute;opacity:.35;left:-6%;height:60%;top:0;bottom:auto;width:60%}
  #rpg-app #modal .sh-cast{width:auto}
  #rpg-app #modal .ev-head,#rpg-app #modal .sh-main .ev-head{position:relative;inset:auto;text-align:left;justify-items:start;padding-right:40px}
  #rpg-app #modal .ev-chips{justify-content:flex-start}
  #rpg-app #modal .ev-head h2{font-size:26px}
  #rpg-app #modal .ev-cards,#rpg-app #modal .sh-products{position:relative;inset:auto}
  #rpg-app #modal .ev-cards.attend{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}
  #rpg-app #modal .ev-cards.attend .big{grid-column:auto;grid-row:auto}
  #rpg-app #modal .ev-cards.missions{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  #rpg-app #modal .ev-cards.missions .big{grid-column:auto;grid-row:auto}
  #rpg-app #modal .ev-cards.route{grid-template-columns:1fr 1fr}
  #rpg-app #modal .sh-products{justify-content:center}
  #rpg-app #modal .sh-card{width:calc(50% - 5px)}
  #rpg-app #modal .sh-line{position:relative;inset:auto;max-width:none}
  #rpg-app #modal .sh-bar{flex-wrap:wrap}
}