/* ===== 심연석 🔮 (js/gem.js) — 보라빛 심연 크리스탈 ===== */
.gem-chip{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:3px 4px 3px 8px;border-radius:999px;border:1px solid rgba(192,132,252,.7);
  background:linear-gradient(135deg,rgba(76,29,149,.85),rgba(30,10,60,.9));box-shadow:0 0 10px rgba(168,85,247,.45),inset 0 0 8px rgba(216,180,254,.15);color:#f3e8ff;font-size:13px;line-height:1;cursor:pointer;vertical-align:middle}
.gem-chip b{font-weight:900;letter-spacing:.2px}
.gem-chip i{font-style:normal;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#a855f7;color:#fff;font-weight:900;font-size:13px}
.gem-ic,.gem-orb{filter:drop-shadow(0 0 4px rgba(192,132,252,.9))}
.gem-pop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:16px;animation:gemIn .15s ease-out}
@keyframes gemIn{from{opacity:0}to{opacity:1}}
.gem-panel{position:relative;width:min(340px,100%);padding:22px 18px 16px;border-radius:20px;text-align:center;color:#f3e8ff;
  background:radial-gradient(120% 80% at 50% 0%,rgba(126,34,206,.55),rgba(17,6,32,.97) 60%);border:1px solid rgba(192,132,252,.45);box-shadow:0 0 40px rgba(147,51,234,.35)}
.gem-x{position:absolute;right:10px;top:8px;font-size:18px;opacity:.7}
.gem-big{display:flex;align-items:center;justify-content:center;gap:10px}
.gem-big .gem-orb{font-size:44px;animation:gemFloat 3s ease-in-out infinite}
.gem-big b{font-size:34px;font-weight:900}
@keyframes gemFloat{50%{transform:translateY(-4px) rotate(-6deg)}}
.gem-split{font-size:11px;opacity:.6;margin-top:2px}
.gem-charge{margin-top:12px;width:100%;padding:11px;border-radius:14px;font-weight:900;font-size:16px;color:#fff;background:linear-gradient(90deg,#7c3aed,#c026d3);box-shadow:0 4px 16px rgba(192,38,211,.35)}
.gem-soon{margin-top:8px;font-size:13px;color:#e9d5ff}
.gem-shop{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.gem-shop.one{grid-template-columns:1fr;max-width:160px;margin:0 auto}
.gem-buy{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(192,132,252,.3);color:#fff}
.gem-buy:hover:not(:disabled){border-color:#c084fc;background:rgba(168,85,247,.18)}
.gem-buy:disabled{opacity:.4}
.gem-buy-get{font-size:22px;display:flex;align-items:baseline;gap:3px}
.gem-buy-get b{font-size:13px;font-weight:900}
.gem-buy-p{font-size:12px;font-weight:800;color:#e9d5ff;background:rgba(0,0,0,.35);border-radius:999px;padding:2px 8px}
.gem-buy small{position:absolute;top:4px;right:6px;font-size:10px;opacity:.6}
.gem-how{margin-top:12px;font-size:10.5px;opacity:.55;line-height:1.5}
.gem-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:210;padding:9px 16px;border-radius:999px;background:rgba(46,16,101,.95);border:1px solid #a855f7;color:#f3e8ff;font-weight:700;font-size:14px;box-shadow:0 0 18px rgba(168,85,247,.5);white-space:nowrap}
/* 카드 뽑기: 소환권 사기 줄 */
.gr-gem{display:flex;justify-content:center;gap:10px;margin-top:10px}
.gr-gem .gem-buy{flex-direction:row;padding:7px 12px;gap:8px;background:rgba(20,6,40,.75);backdrop-filter:blur(4px)}
.gr-gem .gem-buy-get{font-size:16px}
.gr-gem .gem-buy10{border-color:#c084fc;box-shadow:0 0 12px rgba(168,85,247,.4)}
/* PvP 추가 도전 */
.pvp-gemtry{padding:0 12px;border-radius:12px;font-weight:900;color:#fff;background:linear-gradient(135deg,#6d28d9,#a21caf);border:1px solid #c084fc;white-space:nowrap}
.pvp-gemtry small{font-weight:700;opacity:.85}
.pvp-gemtry:disabled{opacity:.4}
/* 마이페이지 */
.gem-mp-top{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,rgba(76,29,149,.6),rgba(24,8,48,.8));border:1px solid rgba(192,132,252,.4);color:#f3e8ff}
.gem-mp-top .gem-orb{font-size:26px}.gem-mp-top b{font-size:22px;font-weight:900}.gem-mp-top small{margin-left:auto;font-size:11px;opacity:.6}
.gem-log{margin-top:8px;max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.gem-log-row{display:grid;grid-template-columns:1fr auto 74px;gap:8px;align-items:center;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:12.5px}
.gem-log-row b.up{color:#d8b4fe}.gem-log-row b.down{color:#a1a1aa}
.gem-log-row small{text-align:right;opacity:.5;font-size:11px}
.gem-log-empty{font-size:12px;opacity:.5;padding:6px}
/* 체력의 드링크 (trade_drink.sql) */
.drink-box { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(56, 189, 248, .08); border: 1px solid rgba(56, 189, 248, .25); text-align: left; }
.drink-top { display: flex; align-items: center; gap: 8px; }
.drink-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drink-top small { font-size: 11px; opacity: .75; }
.drink-ic { font-size: 26px; }
.drink-use { padding: 6px 10px; border-radius: 10px; font-weight: 800; font-size: 12px; background: #0ea5e9; color: #fff; }
.drink-use:disabled { opacity: .4; }
.drink-shop { display: flex; gap: 6px; margin-top: 8px; }
.drink-shop .gem-buy { flex: 1; }
.drink-how { margin-top: 6px; font-size: 10px; opacity: .6; }
.gem-panel { position: relative; }
.drink-ask { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); border-radius: inherit; }
.drink-ask-box { background: #18181b; border: 1px solid #3f3f46; border-radius: 12px; padding: 14px; width: 80%; text-align: center; font-size: 13px; }
.drink-ask-box div { display: flex; gap: 8px; margin-top: 12px; }
.drink-ask-box button { flex: 1; padding: 7px; border-radius: 9px; font-weight: 800; background: #3f3f46; color: #fff; }
.drink-ask-box [data-yes] { background: #0ea5e9; }
.ui-ic{display:inline-block;width:1.2em;height:1.2em;object-fit:contain;vertical-align:-.25em}.drink-ic .ui-ic{width:30px;height:30px}.gear-box .ui-ic{width:1em;height:1em;vertical-align:middle}
/* 📅 일일 미션·출석 (js/daily.js) */
.daily-panel{max-height:86vh;overflow:auto;text-align:left}
.daily-h{margin:6px 0 6px;font-size:15px;font-weight:800;color:#fde68a}.daily-h small{margin-left:6px;font-size:11px;color:#a1a1aa;font-weight:500}
.daily-att{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.daily-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:10px;text-align:center;line-height:1.25}
.daily-day b{font-size:11px;color:#e4e4e7}.daily-day.big{background:rgba(168,85,247,.18);border-color:rgba(192,132,252,.6)}
.daily-day.now{border-color:#fbbf24;box-shadow:0 0 10px rgba(251,191,36,.55)}.daily-day.got{opacity:.5}
.daily-day i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#4ade80;font-style:normal}
.daily-claim{display:block;width:100%;margin:8px 0 4px;padding:8px;border-radius:10px;background:linear-gradient(#f59e0b,#d97706);color:#1c1917;font-weight:800;border:0;cursor:pointer}
.daily-claim:disabled{background:#3f3f46;color:#a1a1aa;cursor:default}
.daily-claim.sm{width:64px;margin:0;padding:6px 4px;font-size:12px;flex:none}
.daily-list{display:flex;flex-direction:column;gap:6px}
.daily-m{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.05)}.daily-m.done{opacity:.55}.daily-m.all{background:rgba(251,191,36,.1)}
.daily-mt{flex:1;min-width:0;font-size:13px}.daily-mt small{display:block;color:#fcd34d;font-size:11px}
.daily-bar{height:5px;margin-top:4px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}.daily-bar i{display:block;height:100%;background:#22c55e}
.main-daily{flex:none}.main-cur:empty+.main-daily{margin-left:auto}
/* 👥 친구 (js/friends.js) */
.main-friend{flex:none}.main-cur:empty+.main-friend{margin-left:auto}.main-friend+.main-daily{margin-left:0!important}
.main-friend .story-mailbtn,.story-top [data-friendbtn] .story-mailbtn{min-height:34px}
.story-top [data-friendbtn]{margin-left:auto;flex:none}.story-top [data-friendbtn]~[data-mailbtn]{margin-left:0}
.friend-panel{max-height:86vh;overflow:auto;text-align:left;min-width:min(420px,92vw)}
.fr-code{color:#fde68a;cursor:pointer;letter-spacing:.05em}
.fr-tabs{display:flex;gap:4px;margin:4px 0 8px}
.fr-tab{position:relative;flex:1;padding:6px 4px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#d4d4d8;font-size:12px;cursor:pointer}
.fr-tab.on{background:rgba(251,191,36,.18);border-color:#fbbf24;color:#fde68a;font-weight:700}.fr-tab .story-badge{position:absolute;top:-6px;right:-4px;margin:0}
.fr-body{display:flex;flex-direction:column;gap:6px}
.fr-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.05)}
.fr-dot{width:8px;height:8px;border-radius:50%;background:#52525b;flex:none}.fr-dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e}
.fr-info{flex:1;min-width:0;font-size:13px}.fr-info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fr-info small{color:#a1a1aa;font-size:11px}
.fr-btns{display:flex;gap:4px;flex:none}
.fr-b{padding:5px 10px;border-radius:8px;background:linear-gradient(#f59e0b,#d97706);color:#1c1917;font-weight:800;font-size:12px;border:0;cursor:pointer}
.fr-b.ghost{background:#3f3f46;color:#e4e4e7}.fr-b:disabled{opacity:.5}
.fr-st{font-size:12px;color:#a1a1aa}
.fr-empty{padding:18px 8px;text-align:center;color:#a1a1aa;font-size:13px}
.fr-search{display:flex;gap:6px;margin-bottom:4px}.fr-search input{flex:1;min-width:0;padding:7px 10px;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);color:#fff}
.fr-fb{display:flex;align-items:center;gap:4px;font-size:12px;color:#fde68a;margin-bottom:2px}.fr-fb .fr-tab{flex:none;padding:3px 10px}.fr-fb small{margin-left:auto;color:#a1a1aa;font-size:11px}
/* 마이페이지(z 120) 위에서 연 친구 창은 그 위로 */
.gem-pop.friend-pop{z-index:130}
/* 일일 미션: 제목 탭 → 바로 가기 */
.daily-mt.go{cursor:pointer}.daily-mt.go:hover b,.daily-mt.go:focus-visible b{color:#6ee7b7}
.daily-arrow{color:#6ee7b7;font-weight:900;margin-left:2px}

/* 친구 일일 선물 */
.fr-giftbar{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;border-radius:8px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);font-size:12px;color:#fde68a}
.fr-giftbar small,.fr-giftbar span{flex:1;min-width:0}
.fr-giftbar .fr-b{flex:none}

/* 🏆 업적 (js/achievements.js) */
.main-ach{flex:none}.main-cur:empty+.main-ach{margin-left:auto}.main-ach+.main-daily{margin-left:0!important}
.main-ach .story-mailbtn{min-height:34px}
.ach-panel{max-height:86vh;overflow:auto;text-align:left;min-width:min(420px,92vw)}
.ach-tabs{display:flex;gap:4px;margin:4px 0 8px;flex-wrap:wrap}
.ach-tab{position:relative;flex:1;min-width:52px;padding:6px 4px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#d4d4d8;font-size:12px;cursor:pointer}
.ach-tab.on{background:rgba(251,191,36,.18);border-color:#fbbf24;color:#fde68a;font-weight:700}
.ach-tab .story-badge{position:absolute;top:-6px;right:-4px;margin:0}
.ach-tools{margin:0 0 8px}
.ach-score{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}
.ach-score-i{display:flex;flex-direction:column;gap:4px;align-items:center;padding:8px 4px;border-radius:10px;background:rgba(168,85,247,.12);border:1px solid rgba(192,132,252,.35);font-size:11px;text-align:center}
.ach-score-i b{color:#e9d5ff;font-size:13px}.ach-score-i span{color:#fcd34d;line-height:1.3}
.ach-score-i.done{opacity:.55}.ach-score-i.ready{border-color:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.4)}
.ach-list{display:flex;flex-direction:column;gap:8px}
.ach-m{padding:8px;border-radius:10px;background:rgba(255,255,255,.05)}.ach-m.done{opacity:.55}
.ach-mh{font-size:13px;margin-bottom:6px}.ach-mh small{display:block;color:#a1a1aa;font-size:11px;margin-top:2px}
.ach-tiers{display:flex;flex-direction:column;gap:4px}
.ach-tier{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;background:rgba(0,0,0,.2)}
.ach-tier.done{opacity:.55}.ach-tier.ready{background:rgba(251,191,36,.1)}
.ach-tt{flex:1;min-width:0;font-size:12px}.ach-tt small{display:block;color:#fcd34d;font-size:11px}

/* 🎁 방치 보상 상자 (js/idle-box.js) */
.main-idle{flex:none}.main-cur:empty+.main-idle{margin-left:auto}.main-idle+.main-ach,.main-idle+.main-daily{margin-left:0!important}
.main-idle .story-mailbtn{min-height:34px}
.idle-panel{max-height:86vh;overflow:auto;text-align:left;min-width:min(380px,92vw)}
.idle-bar-wrap{margin:4px 0 10px}.idle-bar-wrap small{display:block;margin-top:4px;color:#a1a1aa;font-size:11px}
.idle-bar{height:8px}
.idle-got{padding:10px;border-radius:10px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);color:#fde68a;font-size:14px;font-weight:700;text-align:center;margin-bottom:6px}
.idle-rate{font-size:11px;color:#a1a1aa;text-align:center;margin-bottom:8px}
.idle-boost{margin-top:12px;padding:10px;border-radius:10px;background:rgba(168,85,247,.12);border:1px solid rgba(192,132,252,.35)}
.idle-boost-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:13px;color:#e9d5ff}.idle-boost-h small{margin-left:auto;color:#a1a1aa;font-weight:500}
.idle-boost-r{font-size:12px;color:#fcd34d;margin-bottom:6px}
.idle-boost-btn{margin:0!important;background:linear-gradient(#a855f7,#7e22ce)!important;color:#fff!important}
.idle-boost-btn:disabled{background:#3f3f46!important;color:#a1a1aa!important}

/* 🎨 꾸미기 (js/cosmetics.js) */
.cosmo-panel{max-height:86vh;overflow:auto;text-align:left;min-width:min(400px,92vw)}
.cosmo-preview{display:flex;justify-content:center;padding:10px;margin-bottom:8px;border-radius:10px;background:rgba(255,255,255,.05)}
.cosmo-list{display:flex;flex-direction:column;gap:6px}
.cosmo-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.05)}
.cosmo-row.on{border:1px solid rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.cosmo-row.lock{opacity:.7}
.cosmo-meta{flex:1;min-width:0;font-size:13px}.cosmo-meta small{display:block;color:#a1a1aa;font-size:11px}
.cosmo-st{font-size:11px;color:#fde68a}.cosmo-st.dim{color:#71717a}
.cosmo-ttl-ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.08);flex:none}
.cosmo-chip{display:inline-flex;align-items:center;gap:8px;min-width:0;vertical-align:middle}
.cosmo-chip.sm{gap:5px}.cosmo-tx{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.cosmo-nm{font-size:13px;font-weight:800;color:#f4f4f5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cosmo-chip.sm .cosmo-nm{font-size:12px}
.cosmo-ttl{font-style:normal;font-size:10px;color:#fcd34d;font-weight:700}
.cosmo-ttl.t-abyss,.cosmo-ttl.t-abyss_pioneer{color:#e879f9;text-shadow:0 0 6px rgba(168,85,247,.6)}
.cosmo-ttl.t-pvp_gold{color:#fbbf24}.cosmo-ttl.t-pvp_platinum{color:#a5f3fc}.cosmo-ttl.t-pvp_diamond{color:#93c5fd}
.cosmo-av{position:relative;width:40px;height:40px;flex:none;border-radius:50%;display:inline-block}
.cosmo-av.sm{width:28px;height:28px}
.cosmo-av-img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:50%;display:block}
.cosmo-fr{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);object-fit:contain;pointer-events:none;z-index:2}
.cosmo-fr.miss{display:none}
/* 프레임 이미지 없을 때 CSS 테두리 */
.cosmo-av.f-frame_basic{box-shadow:0 0 0 2px rgba(161,161,170,.7)}
.cosmo-av.f-frame_bronze{box-shadow:0 0 0 2px #b45309,0 0 8px rgba(180,83,9,.5)}
.cosmo-av.f-frame_silver{box-shadow:0 0 0 2px #d4d4d8,0 0 8px rgba(212,212,216,.45)}
.cosmo-av.f-frame_gold{box-shadow:0 0 0 2px #fbbf24,0 0 10px rgba(251,191,36,.55)}
.cosmo-av.f-frame_abyss{box-shadow:0 0 0 2px #c084fc,0 0 12px rgba(168,85,247,.7)}
.cosmo-av.f-frame_guild{box-shadow:0 0 0 2px #f87171,0 0 8px rgba(248,113,113,.5)}
.mp-who .cosmo-chip{flex:1;min-width:0}
.mp-cosmo{margin-left:6px;padding:5px 10px;border-radius:8px;border:1px solid rgba(192,132,252,.5);background:rgba(88,28,135,.35);color:#e9d5ff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}

.fr-info .cosmo-chip{display:flex;margin-bottom:2px}
.gd-m-n .cosmo-ttl{margin-left:4px}
.pvp-rk-nm .cosmo-tx{display:inline-flex;flex-direction:column;min-width:0}
.pvp-rk-nm .cosmo-ttl{font-size:9px}

.cosmo-preview.has-board{background-size:cover;background-position:center;min-height:72px}
.cosmo-board-th,.cosmo-border-th{width:48px;height:36px;border-radius:6px;overflow:hidden;flex:none;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:10px;color:#a1a1aa}
.cosmo-board-th img,.cosmo-border-th img{width:100%;height:100%;object-fit:cover;display:block}
.cosmo-border-th{height:48px;width:36px}
.cosmo-board-th.miss,.cosmo-border-th.miss{border:1px dashed rgba(255,255,255,.25)}