/* Hallmark · built: the project · redesign: polish · genre: playful · scope: app · theme: brand (픽셀크로니클 보라·금 픽셀) */
/* critique: 이모지 아이콘·가운뎃점 줄·보라→파랑 그라데이션·자간 넓힌 라벨·transition all을 걷어 냄. 색은 아직 토큰으로 다 못 옮김(48) */
/* 목표 화면(goals.js) — 풀스크린 방향: 장면 한 장 위에 아래 깔림, 목록은 상자 없이 줄로 */
.goal-scene{position:relative;margin:-14px -12px 14px;min-height:300px;background:#120d1c center/cover;display:flex;align-items:flex-end}
.goal-scrim{width:100%;padding:60px 16px 18px;background:linear-gradient(180deg,rgba(8,5,14,0),rgba(8,5,14,.86) 40%,rgba(8,5,14,.96));text-shadow:1px 1px 0 #000}
.goal-kick{font-size:12px;color:#cfc3e8;margin-bottom:6px}
.goal-title{font-size:40px;line-height:1.05;color:var(--gold)}
.goal-sub{font-size:12px;color:#cfc3e8;margin-top:6px;line-height:1.6}
.goal-cta{margin-top:14px;font-size:16px;padding:14px}
.goal-list-title{font-size:14px;color:var(--gold);margin:18px 0 8px}
.goal-list{list-style:none;margin:0;padding:0}
.goal-list li{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid rgba(195,166,255,.12);font-size:13px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.goal-list li.me{background:rgba(242,193,78,.1)}
.goal-list li b{color:var(--text3);font-weight:400;text-align:right}
.goal-list li i{font-style:normal;font-size:11px;color:var(--text3);margin-left:4px}
.goal-list li em{font-style:normal;font-size:12px}
.goal-list li.empty{display:block;color:var(--text3);border:0}
.goal-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.goal-row .input-field{flex:1;margin:0}
.goal-strip{margin:0 0 14px;padding:12px 14px;background:linear-gradient(90deg,rgba(242,193,78,.14),rgba(30,23,48,.92) 60%);box-shadow:inset 0 1px 0 rgba(242,193,78,.3);cursor:pointer}
.goal-strip:empty{display:none}
.gs-main{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.gs-tier{font-size:20px}
.gs-dim{color:var(--text3);font-size:12px}
.gs-sub{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:#cfc3e8}
.gs-claim{font:inherit;font-size:12px;color:#1a1328;background:var(--gold);border:0;padding:6px 10px;cursor:pointer;animation:gsPulse 1.6s ease-in-out infinite}
.gs-claim:disabled{background:#3a2d55;color:var(--text3);animation:none}
@keyframes gsPulse{50%{filter:brightness(1.25)}}
.goal-result{margin-bottom:12px}
.rr-stage{position:relative;height:272px;background:center 70%/cover}
.rr-cam{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 6px 14px}
.rr-side{display:flex;flex-direction:column;align-items:center;font-size:12px;text-shadow:1px 1px 0 #000;position:relative}
.rr-fig{position:relative;height:172px;display:flex;align-items:flex-end;justify-content:center;min-width:64px;margin-bottom:4px}
.rr-side.opp .rr-body{transform:scaleX(-1)}
.rr-body{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.rr-fig{transform-origin:50% 100%;transition:transform .6s cubic-bezier(.5,0,.75,0),opacity .6s}
.rr-side.down .rr-fig{transform:translate(6px,14px) rotate(80deg);opacity:.6}
.rr-side.opp.down .rr-fig{transform:translate(-6px,14px) rotate(-80deg)}
.rr-side.kneel .rr-fig{transform:translateY(6px) scaleY(.84);opacity:.75}
.rr-bar{position:relative;width:108px;height:8px;background:#120d1c;box-shadow:0 0 0 2px #000;margin-bottom:8px}
.rr-bar i,.rr-bar u{position:absolute;left:0;top:0;bottom:0;width:100%}
.rr-bar i{background:#efe6ff;transition:width .5s .25s steps(6,end)}
.rr-bar u{background:#5fd068;transition:width .12s steps(3,end)}
.rr-side.low .rr-bar u{background:#ef6461}
.rr-side.opp .rr-bar{transform:scaleX(-1)}
.rr-fx{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.rr-dmg{position:absolute;left:50%;top:6px;z-index:5;font-size:18px;font-weight:900;color:#fff;text-shadow:2px 2px 0 #000;white-space:nowrap;pointer-events:none}
.rr-dmg.crit{font-size:24px;color:var(--gold)}
.rr-side:not(.opp) .rr-dmg{left:75%}
.rr-side.opp .rr-dmg{left:25%}
.rr-call{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:6;font-size:34px;color:var(--gold);text-shadow:3px 3px 0 #000;pointer-events:none}
.rr-skip{position:absolute;left:50%;transform:translateX(-50%);top:6px;z-index:7;font:inherit;font-size:11px;color:#cfc3e8;background:rgba(10,7,16,.6);border:0;padding:6px 10px;cursor:pointer}
.rr-stage{overflow:hidden}
.rr-fig .rr-char{image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.rr-fig img.rr-char{height:172px}
.rr-fig img.rr-char:not(.hero){height:110px}
.rr-fig .rr-pet{position:absolute;height:40px;bottom:0;right:-42px;image-rendering:pixelated}
.rr-fig .rr-wep{position:absolute;height:40px;right:-14px;bottom:26px;transform:rotate(-20deg);image-rendering:pixelated;filter:drop-shadow(1px 1px 0 #000)}
.rr-side.shadow .rr-fig{filter:brightness(.25) saturate(0) drop-shadow(2px 0 0 #7a52c4) drop-shadow(-2px 0 0 #7a52c4)}
.rr-side .rr-gear{max-width:130px;text-align:center;color:var(--text3);line-height:1.35;margin-top:2px}
.rr-side small{color:#cfc3e8;font-size:11px}
.rr-vs{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:30px;text-shadow:3px 3px 0 #000;text-align:center;animation:rrPop .45s cubic-bezier(.16,1,.3,1)}
.rr-vs.win{color:var(--gold)} .rr-vs.lose{color:#ef6461}
.rr-vs small{display:block;font-size:14px;color:#fff}
@keyframes rrPop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.rr-log{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--text3);margin-top:8px}
.rr-log .me{color:#cfe8c3} .rr-log .opp{color:#e8c3c3}
/* 홍보용 세로 카드 */
.share-card-wrap{position:fixed;inset:0;z-index:10050;background:rgba(5,3,10,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}
.share-card{position:relative;width:min(84vw,46vh*0.5625*2);aspect-ratio:9/16;max-height:78vh;background:center/cover;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold),0 20px 60px rgba(0,0,0,.6)}
.sc-top{padding:16px;font-size:22px;color:var(--gold);text-shadow:2px 2px 0 #000}
.sc-pet{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:42%;filter:drop-shadow(0 6px 0 rgba(0,0,0,.5))}
.sc-bottom{padding:60px 16px 18px;background:linear-gradient(180deg,rgba(8,5,14,0),rgba(8,5,14,.92) 35%);text-shadow:1px 1px 0 #000}
.sc-kick{font-size:13px;color:#cfc3e8}
.sc-tier{font-size:52px;line-height:1}
.sc-name{font-size:15px;margin-top:8px}
.sc-line{font-size:13px;color:#cfc3e8;margin-top:4px}
.sc-url{font-size:11px;color:var(--text3);margin-top:12px}
.sc-hint{font-size:12px;color:#cfc3e8}
.share-card-wrap .btn{width:auto;padding:10px 24px}
@media (prefers-reduced-motion:reduce){.rr-vs,.gs-claim{animation:none}}

/* 대전 생동감: 발밑 그림자·먼지·화살·마지막 일격 번쩍·펫 들썩임 */
.rr-shade{position:absolute;left:50%;bottom:-4px;width:74px;height:12px;margin-left:-37px;background:rgba(0,0,0,.42);clip-path:ellipse(50% 50%)}
.rr-side.down .rr-shade{width:110px;margin-left:-55px}
.rr-dust{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;background:#c9b48a;pointer-events:none}
.rr-arrow{position:absolute;width:28px;height:3px;margin-top:-1px;background:#e8d9b0;box-shadow:0 1px 0 #000;pointer-events:none}
.rr-arrow::after{content:"";position:absolute;right:-6px;top:-3px;border-left:7px solid #fff;border-top:4px solid transparent;border-bottom:5px solid transparent}
.rr-arrow.l{margin-left:-28px}
.rr-arrow.l::after{right:auto;left:-6px;border-left:0;border-right:7px solid #fff}
.rr-white{position:absolute;inset:0;background:#fff6d8;pointer-events:none;z-index:6}
.rr-fig .rr-pet{animation:rrPetHop .9s steps(2,end) infinite}
@keyframes rrPetHop{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.rr-fig .rr-pet{animation:none}}

/* ── 직업·전직(jobs.js, 11-09) ── */
#tab-job .job-head{padding:14px;background:#120d1c;box-shadow:inset 0 0 0 1px #2a1f3d;margin-bottom:12px}
.job-title{font-size:18px;color:#ffe29a;text-shadow:1px 1px 0 #000;margin-bottom:4px}
#tab-job p{margin:2px 0;font-size:12px;color:#cfc3e8;line-height:1.6}
#tab-job .btn{margin-top:8px}
.job-me{display:flex;gap:14px;align-items:flex-end}
.job-me img.hero-pose{flex:none;image-rendering:pixelated}
.job-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.job-card{background:#160f22;box-shadow:inset 0 0 0 1px #2f2346;padding:10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.job-card img{height:96px;width:auto;image-rendering:pixelated}
.job-card b{font-size:15px;color:#fff}
.job-card small{font-size:11px;color:#b9a8d8}
.job-card em{font-style:normal;font-size:11px;color:var(--gold)}
.job-card ul{list-style:none;margin:6px 0 0;padding:0;font-size:11px;color:#e6dcff;line-height:1.7}
.job-card ul i{font-style:normal;color:#9d8cc0}
.job-card .btn{width:100%}
.job-stage{margin-bottom:12px}
.job-stage h4{margin:0 0 6px;font-size:14px;color:#ffe29a}
.job-stage h4 small{color:#9d8cc0;font-size:11px;margin-left:6px}
.job-stage ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.job-stage.off h4{color:#7d6f99}
.job-sk{background:#160f22;box-shadow:inset 0 0 0 1px #2f2346;padding:8px 10px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12px}
.job-sk b{color:#fff}
.job-sk em{font-style:normal;font-size:11px;padding:1px 6px;color:#1a1007;background:#c9a2ff;align-self:start}
.job-sk em.hunt{background:#7fd6a3}.job-sk em.boss{background:#ff9a7a}.job-sk em.buff{background:#ffe29a}
.job-sk span{grid-column:1/-1;color:#cfc3e8;line-height:1.5}
.job-sk small{grid-column:1/-1;color:#9d8cc0;font-size:11px}
.job-sk.off{opacity:.45}
.pz-job{animation:pzJob 1s steps(2,end) infinite}
@keyframes pzJob{50%{filter:brightness(1.35)}}
/* 사냥터 직업 스킬 */
.hunt-jobbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
.hunt-jobbar:empty{display:none}
.hunt-jobbar .hunt-act{padding:9px 4px;font-size:12px}
.hunt-act.job{background:#3d2f5c;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.hunt-act.job.hunt{background:#2f5a46}.hunt-act.job.boss{background:#6a2f2f}.hunt-act.job.buff{background:#6a5520}
.hunt-act.job span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.job-banner{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:7;font-size:22px;color:#fff;white-space:nowrap;pointer-events:none;
  text-shadow:2px 2px 0 #000,0 0 10px rgba(255,226,154,.8);animation:jobBanner 1.3s steps(12,end) forwards}
.job-banner.boss{color:#ffd0c0}.job-banner.hunt{color:#d4ffe6}.job-banner.buff{color:#ffe29a}
.job-banner.ult{font-size:28px;color:#ffe29a}
@keyframes jobBanner{0%{opacity:0;transform:translateX(-50%) scale(1.6)}12%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
.job-arrow{position:absolute;width:30px;height:3px;margin:-1px 0 0 -15px;background:#e8d9b0;box-shadow:0 1px 0 #000;pointer-events:none;transform-origin:50% 50%}
.job-arrow::after{content:"";position:absolute;right:-6px;top:-3px;border-left:7px solid #fff;border-top:4px solid transparent;border-bottom:5px solid transparent}
.job-star{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;background:#d7dde8;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 1px 0 #000)}
.hunt-hero.job-charge img{filter:drop-shadow(0 0 6px #8fd3ff) drop-shadow(0 0 14px #5aa8ff) brightness(1.2)}
.hunt-hero.job-aura::before{content:"";position:absolute;left:-12%;right:-12%;bottom:-4%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--aura,rgba(255,226,154,.55)),transparent 70%);animation:jobAura 1.2s steps(6,end) infinite;pointer-events:none}
.hunt-hero.job-aura[data-aura="w"]{--aura:rgba(255,140,90,.6)}.hunt-hero.job-aura[data-aura="a"]{--aura:rgba(140,255,190,.55)}
.hunt-hero.job-aura[data-aura="m"]{--aura:rgba(140,180,255,.6)}.hunt-hero.job-aura[data-aura="t"]{--aura:rgba(200,140,255,.6)}
@keyframes jobAura{50%{transform:scale(1.15);opacity:.7}}
@media (prefers-reduced-motion:reduce){.job-banner,.hunt-hero.job-aura::before,.pz-job{animation:none}}

/* 전직 시험(11-09): 사냥터 위 시험 띠(남은 시간), 실패 창, 직업 화면 응시료 안내 */
.job-trial-note{font-size:12px;color:#cfc3e6;margin:6px 0 8px;line-height:1.5}
.job-trial-hud{position:absolute;left:10px;right:84px;top:54px;z-index:6;max-width:340px;pointer-events:none;
  padding:6px 10px 8px;background:rgba(10,6,18,.78);box-shadow:0 0 0 2px #000,inset 0 0 0 1px #6b4a1f;color:#fff;text-align:center}
.job-trial-hud b{display:block;font-size:14px;color:#ffe29a;text-shadow:1px 1px 0 #000}
.job-trial-hud span{display:block;font-size:11px;color:#d8cfe8;margin:1px 0 5px}
.job-trial-hud i{display:block;height:8px;background:#2a1a3a;box-shadow:inset 0 0 0 1px #000}
.job-trial-hud s{display:block;height:100%;width:100%;background:#ffd76a;transition:width .2s linear}
.job-trial-hud em{position:absolute;right:10px;top:6px;font-style:normal;font-size:13px;color:#fff;text-shadow:1px 1px 0 #000}
.job-trial-hud.low s{background:#ff6a5a}.job-trial-hud.low em{color:#ff9a8a}
.job-trial-end{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(8,4,14,.72);color:#fff;text-align:center;padding:16px}
.job-trial-end b{font-size:26px;color:#ff9a8a;text-shadow:2px 2px 0 #000}
.job-trial-end p{font-size:13px;color:#e6dcff;max-width:300px;line-height:1.5;margin:0}
.job-trial-end div{display:flex;gap:8px;margin-top:6px}
.job-trial-end .btn{white-space:nowrap;min-width:104px}

/* 직업 스킬 연출(jobfx.js): 옛 픽셀RPG 이펙트 시트 4×4, 용사 잔상·분신 */
.skfx{position:absolute;pointer-events:none;background-repeat:no-repeat;image-rendering:pixelated;z-index:4}
.skghost{position:absolute;pointer-events:none;width:auto;image-rendering:pixelated;z-index:3}

/* PC 넓게(11-09 오너 "모든 걸 한 창에 다 보이게, 게임을 더 넓게 해도 돼"): 가운데 480px 띠 → 창 폭 1240px까지 */
@media (min-width:900px){
  #app{max-width:min(1240px,100vw)}
  .town-nav{width:min(720px,100%)!important}
}

/* PC 한 창에 다 보이게(11-09 오너 "스크롤 내려야만 보이게 하지 마, 딱 한 창에"): 창 폭 900px 이상에서 화면마다 2~5칸으로 나눔.
   긴 목록(성장 경로·옷장·무한성 층 등)은 그 칸 안에서만 넘김 */
@media (min-width:900px){
  #app .section>.section-header{min-height:84px}
  #tab-quest.active,#tab-profile.active,#tab-gacha.active,#tab-primordial.active,#tab-abyssaltar.active,#tab-partyboss.active{column-count:2;column-gap:14px}
  #tab-profile.active{column-count:4}
  #tab-profile .profile-avatar{height:118px!important;min-height:0!important}
  #tab-profile.active>*{margin-bottom:8px!important}
  .section.active>.section-header,.section.active>.gacha-type-tabs,.section.active>.goal-strip{column-span:all}
  #tab-quest.active>*,#tab-profile.active>*,#tab-gacha.active>*,#tab-shop.active>*,#tab-primordial.active>*,#tab-abyssaltar.active>*,#tab-partyboss.active>*{break-inside:avoid}
  #growth-route-list{max-height:calc(100vh - 480px);min-height:160px;overflow:auto}
  #mission-list{max-height:calc(100vh - 650px);min-height:110px;overflow:auto}
  #tab-wardrobe .avatar-pane{column-count:2;column-gap:14px}
  #tab-wardrobe .avatar-pane>*{break-inside:avoid}
  #tab-wardrobe .avatar-pane>.panel{max-height:calc((100vh - 330px)/2);overflow:auto}
  #tab-shop.active{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:14px;align-items:start}
  #tab-shop.active>.section-header{grid-column:1/-1}
  #tab-shop.active>.section-header+.panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:start}
  #tab-shop.active>.section-header+.panel>:first-child{grid-column:1/-1}
  #shop-inventory{max-height:calc(100vh - 300px);overflow:auto}
  /* 직업: 전직 5단계를 한 줄에 */
  #job-body{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}
  #job-body>button{grid-column:1/-1;justify-self:start}
  /* 생활: 일 5개를 3칸 */
  #life-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  #life-jobs>*{margin:0!important}
  /* 도감: 7칸 */
  #codex-grid-page{grid-template-columns:repeat(9,minmax(0,1fr))!important}
  /* 아바타 소환: 두 칸, 긴 쪽은 칸 안에서 넘김 */
  #avatar-pane-bg{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  #avatar-pane-bg>.av-sec{max-height:calc(100vh - 300px);overflow:auto}
  /* 강화: 왼쪽 모루(미리보기)·확률·버튼, 오른쪽 기록·속성 부여(+30부터 길어짐) — 두 단으로 흘려서 높이를 나눔 */
  #tab-enhance.active{column-count:2;column-gap:16px}
  #tab-enhance.active>*{break-inside:avoid}
  #tab-enhance.active>.enhance-preview{margin:0 0 10px!important}
  #tab-enhance.active>div:has(>#enh-log-box){break-before:column;margin-top:0!important}
  #enh-log-box{max-height:110px}
  /* 보스: 보스 그림 왼쪽, 설명·버튼 오른쪽 */
  #boss-lobby:not([style*="none"]){display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:start}
  #boss-lobby>:first-child{grid-row:1/span 4}
  /* 무한성: 왼쪽 싸움, 오른쪽 층 목록 */
  #tab-tower.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;align-items:start}
  #tab-tower.active>*{grid-column:1}
  #tab-tower.active>.section-header{grid-column:1/-1}
  #tab-tower.active>#floor-grid{grid-column:2;grid-row:2/span 8;max-height:calc(100vh - 270px);overflow:auto;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  /* 펫 훈련소: 두 칸 */
  #pettrain-lobby:not([style*="none"]){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:start}
  #pettrain-lobby>*{max-height:calc(100vh - 300px);overflow:auto;margin:0!important}
  /* 운명의 수레바퀴: 왼쪽 바퀴, 오른쪽 번호·베팅·돌리기 */
  #roulette-play-view:not([style*="none"]){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:18px;align-items:start}
  #roulette-play-view>*{grid-column:2}
  #roulette-play-view>:has(#roulette-exp-display){grid-column:1;grid-row:1}
  #roulette-play-view>:has(#roulette-wheel){grid-column:1;grid-row:2/span 9}
  /* 챔피언 레이스: 왼쪽 경주로, 오른쪽 두 칸에 나머지 */
  #horserace-play-view:not([style*="none"]){display:grid!important;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,.5fr));gap:10px;align-items:start}
  #horserace-play-view>#horserace-track{grid-column:1;grid-row:1/span 6}
  #horserace-play-view>*{margin:0!important}
  /* 러시안 룰렛: 두 칸 */
  #rr-lobby:not([style*="none"]){column-count:2;column-gap:14px}
  #rr-lobby>*{break-inside:avoid}
}
/* PC인데 창 높이가 낮을 때(900px 미만): 제목 그림·기록 칸·속성 버튼을 줄여 한 창에 */
@media (min-width:900px) and (max-height:900px){
  #app .section>.section-header{min-height:58px;padding-bottom:6px!important}
  #app .section>.section-header .section-title{font-size:20px}   /* 위 '← 돌아가기' 띠에 가려 글자 윗부분이 잘리지 않게 */
  #enh-log-box{max-height:60px;min-height:0}
  #elem-panel button{padding-top:5px!important;padding-bottom:5px!important;min-height:0!important}
  #elem-panel{padding-top:8px!important;padding-bottom:8px!important}
}

/* PC: 채팅 버튼은 내용 위가 아니라 창 오른쪽 아래 빈 모서리(아래 띠 옆)로 */
@media (min-width:900px){ #worldchat-fab{right:16px!important;bottom:8px!important} }
/* PC 인벤토리: 칸을 늘리고 목록은 그 안에서만 넘김 */
@media (min-width:900px){ #inv-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:calc(100vh - 250px);overflow:auto} }

/* Hallmark polish(11-10): 라벨 자간 없앰, 아이콘 자리(이모지 걷어 낸 빈칸) 숨김, 키보드 포커스 테두리 */
.panel-title,.section-title,.dmg-num,#live-feed-side .feed-header{letter-spacing:0!important}
.section-icon,.logo-sprite,.lv-pick-a{display:none!important}
#lv-intro div:empty{display:none}
html{overflow-x:clip}
:where(button,a,input,select,textarea,[tabindex],.cat-btn,.gacha-tab,.btn):focus-visible{outline:2px solid var(--gold,#f5c842);outline-offset:2px;transition:none}
.input-field:focus{outline:2px solid var(--gold,#f5c842);outline-offset:1px}

/* 폰(11-10 오너 "폰에서도 바라보는 시점을 좀 더 키우되 스크롤은 최대한 줄여"): 전체를 조금 작게(더 많이 보이게),
   제목 그림·여백을 줄이고 작은 카드는 2~5칸으로 */
@media (max-width:899px){
  #app{zoom:.92}
  #app .section>.section-header{min-height:64px;padding-bottom:6px!important}
  #app .section>.section-header .section-title{font-size:20px}
  .panel{padding:10px}
  #tab-enhance .enhance-preview{min-height:210px}
  #life-jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #life-jobs>*{margin:0!important}
  #codex-grid-page{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .shop-item{padding:8px 10px;margin-bottom:6px;gap:8px}
  .shop-item-icon{font-size:24px}
  .shop-item-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
  #job-body .job-sk span{display:none}
  #job-body .job-sk{padding:6px 8px}
  .hr-lane{height:30px}
  #inv-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  #floor-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  #avatar-pane-bg .av-grid,#avatar-pane-wardrobe .av-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #roulette-play-view>:has(#roulette-wheel){zoom:.72;margin-bottom:6px!important}   /* 바퀴째로 줄여 숫자 자리가 그대로 */
  .gacha-banner{padding:10px}
  #codex-grid-page>*{min-height:0!important;padding:4px!important}
  #floor-grid .floor-cell{min-height:0!important}
  #job-body .job-stage{margin-bottom:8px}
}

/* 장비 등급 빛(gearlook.js가 body[data-gear]): 내 용사 둘레, 바꾼 장비가 보이게. 직업 모으기 빛(job-charge) 중엔 그쪽이 먼저 */
body[data-gear="legendary"] :is(.pz-p.me img.hero-pose,#hunt-hero:not(.job-charge) #hunt-hero-img,#hunt-lobby-hero){filter:drop-shadow(0 0 2px #ffd76a) drop-shadow(0 0 6px rgba(255,196,70,.55)) drop-shadow(0 3px 0 rgba(0,0,0,.5))}
body[data-gear="mythic"] :is(.pz-p.me img.hero-pose,#hunt-hero:not(.job-charge) #hunt-hero-img,#hunt-lobby-hero){filter:drop-shadow(0 0 2px #e6a2ff) drop-shadow(0 0 7px rgba(190,100,255,.6)) drop-shadow(0 3px 0 rgba(0,0,0,.5))}
body[data-gear="primordial"] :is(.pz-p.me img.hero-pose,#hunt-hero:not(.job-charge) #hunt-hero-img,#hunt-lobby-hero){filter:drop-shadow(0 0 2px #e8fbff) drop-shadow(0 0 8px rgba(120,220,255,.65)) drop-shadow(0 0 14px rgba(255,240,170,.35)) drop-shadow(0 3px 0 rgba(0,0,0,.5))}
/* 갑옷 등급 고리(gearlook.js가 body[data-armor]): 내 용사 발밑. 스킨을 입어도 갑옷을 바꾸면 보이게 */
body[data-armor="legendary"],body[data-armor="mythic"],body[data-armor="primordial"]{--ar:transparent}
body[data-armor="legendary"]{--ar:rgba(255,206,90,.75)}body[data-armor="mythic"]{--ar:rgba(200,120,255,.75)}body[data-armor="primordial"]{--ar:rgba(140,230,255,.8)}
body:is([data-armor="legendary"],[data-armor="mythic"],[data-armor="primordial"]) :is(.pz-p.me,#hunt-hero)::after{content:"";position:absolute;left:50%;width:62%;height:10px;transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;box-shadow:0 0 0 2px var(--ar),0 0 10px 1px var(--ar)}
body .pz-p.me::after{bottom:13px}
body #hunt-hero::after{bottom:-3px}