/* 바삭젤리단 연구실 V22 — 통합 테마 레이어 (반드시 마지막에 로드)
   라이트 "Porcelain" / 다크 "Midnight Grape" · 폰 / 아이패드 / PC 반응형 */
:root{color-scheme:light;
--bg:#f3f1f7;--surface:#fff;--surface-2:#f8f6fc;--field:#fff;--line:#e5e1ee;
--text:#1d1a2f;--text-2:#575270;--text-3:#8a859f;
--accent:#6a4fd6;--accent-2:#8d75f2;--accent-soft:#eeeafd;--accent-ink:#4b34a9;
--gold:#b97a14;--gold-soft:#fdf0d6;--mint:#18856c;--mint-soft:#e1f5ee;--rose:#b8446a;--rose-soft:#fde8ef;--danger:#c2413f;
--sh:0 1px 2px #1d1a2f0d,0 10px 28px #2a1f5a12;--sh-hover:0 2px 4px #1d1a2f10,0 18px 40px #2a1f5a22;
--r-ctl:12px;--r-card:20px;--r-hero:28px;
--font:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif}
html[data-theme=dark]{color-scheme:dark;
--bg:#0e0c1b;--surface:#171430;--surface-2:#1e1a3b;--field:#120f27;--line:#2e2951;
--text:#f0edfb;--text-2:#b9b3d3;--text-3:#8882a8;
--accent:#a794ff;--accent-2:#8f78f5;--accent-soft:#2a2352;--accent-ink:#d6ccff;
--gold:#f2c26b;--gold-soft:#3a2d17;--mint:#63dcc0;--mint-soft:#10332d;--rose:#ff9fbd;--rose-soft:#3d1c2b;--danger:#ff8b86;
--sh:0 1px 2px #0006,0 12px 30px #0000004d;--sh-hover:0 2px 4px #0006,0 20px 44px #00000073}

html{font-family:var(--font);-webkit-text-size-adjust:100%}
body{font-family:var(--font)!important;color:var(--text)!important;background:var(--bg)!important;
background-image:radial-gradient(ellipse 60% 40% at 70% -8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)!important;
background-attachment:fixed!important;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
::selection{background:var(--accent);color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent)!important;outline-offset:2px}
h1,h2,h3{color:var(--text);letter-spacing:-.035em}
.eyebrow,.lab-kicker,.raid-kicker,.side-label,.mode-label,.dungeon-text small,.raid-entry>small{letter-spacing:.08em!important;font-weight:800}

/* ───────── 표면(카드·패널) ───────── */
.deck-card,.guide-card,.panel,.filterbar,.stats-bar,.power-box,.stage-card,.dungeon-choice,.build-board,.raid-panel,.raid-rank-card,.raid-beam-card,.dimension-force,.dimension-lookup,.cookie-intel-card,.intel-section,.intel-synergy-panel,.admin-item,.empty-box,.crumb-back,.modal,.raid-recommend-panel,.raid-output{
background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-card)!important;box-shadow:var(--sh)!important;color:var(--text-2)}
.filterbar{border-radius:var(--r-card)!important}
.crumb-back{border-radius:var(--r-ctl)!important;box-shadow:none!important;color:var(--text-2)}
.form-section,.check-row,.unit-tile,.cookie-tile-rich,.build-slot-card,.raid-cookie-entry,.raid-equipment,.raid-result-tops>div,.swap-slot,.unit-pill,.raid-applied,.alternate-editor,.deck-scan-panel,.deck-scan-results,.deck-scan-review-item,.intel-link-group,.rune-box,.df-stat-grid>div,.df-rate-summary,.dimension-intro,.boss-repeat-note,.meta-bulk,.raid-multishot,.raid-info-banner,.raid-warnings,.raid-captain-rule,.demo-notice,.raid-wasabi-note{
background:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:none!important;color:var(--text-2)}
.build-slot-card:before{background:linear-gradient(90deg,var(--gold),var(--accent-2))!important}
.build-slot-card.captain{border-color:var(--gold)!important}
.deck-card:hover,.guide-card:hover,.stage-card:hover,.dungeon-choice:hover{box-shadow:var(--sh-hover)!important;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important;transform:translateY(-3px)}
.modal-head{background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important}
.modal::backdrop{background:rgba(10,8,24,.72);backdrop-filter:blur(6px)}
.empty-box{border-style:dashed!important;box-shadow:none!important}

/* 본문 텍스트: 컨테이너 안은 토큰 색으로 통일 (라이트·다크 공통) */
:is(.deck-card,.guide-card,.panel,.filterbar,.stats-bar,.power-box,.stage-card,.dungeon-choice,.build-board,.build-slot-card,.raid-panel,.raid-recommend-panel,.raid-output,.dimension-force,.dimension-lookup,.cookie-intel-card,.intel-section,.intel-synergy-panel,.admin-item,.form-section,.cookie-tile-rich,.unit-tile,.raid-info-banner,.dimension-intro,.boss-repeat-note,.modal,.empty-box,.meta-studio,.raid-cookie-entry,.raid-equipment,.raid-rank-card,.raid-beam-card,.swap-slot,.deck-scan-panel,.alternate-editor) :where(p,span,small,label,em,li,td,th,summary,div,code){color:var(--text-2)}
:is(.deck-card,.guide-card,.panel,.power-box,.stage-card,.dungeon-choice,.build-board,.build-slot-card,.raid-panel,.raid-recommend-panel,.raid-output,.dimension-force,.cookie-intel-card,.intel-section,.admin-item,.cookie-tile-rich,.unit-tile,.modal,.raid-rank-card,.raid-beam-card) :where(h1,h2,h3,h4,strong,b,.deck-card-title,.unit-name,.tile-skill-name,.raid-rank-number){color:var(--text)}
:is(.count-line,.deck-card-desc,.guide-card p,.subhead p,.form-hint,.tile-attribute-value,.detail-sub,.raid-help,.raid-note,.df-note,.footer,.stats-bar small) {color:var(--text-3)}
.subhead p{color:var(--text-2)}.count-line span:first-child{color:var(--text-2)}
.subhead h1{font-size:clamp(30px,4.2vw,46px);letter-spacing:-.045em;font-weight:900;color:var(--text)!important}
.accent-dot{color:var(--gold)!important}
.eyebrow{color:var(--accent)!important}

/* 입력 */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{background:var(--field)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:var(--r-ctl)!important}
input::placeholder,textarea::placeholder{color:var(--text-3)!important;opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
input[type=file]{background:var(--field)!important;border:1px dashed var(--line)!important;color:var(--text-2)!important;border-radius:var(--r-ctl)!important}
input[type=file]::file-selector-button{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border:0;border-radius:9px}
.search-wrap>span{color:var(--text-3)}
.df-input-grid input,.df-input-grid select,.lookup-form input,.stage-search-inline input,.deck-scan-search-input,.deck-scan-option-list,.deck-scan-option{background:var(--field)!important;color:var(--text)!important;border-color:var(--line)!important}
.deck-scan-option:hover,.deck-scan-option:focus-visible{background:var(--accent-soft)!important;color:var(--accent-ink)!important}

/* 버튼 — 젤리 광택은 주요 버튼에만 */
.btn,.raid-light-btn,.raid-main-btn,.small-add{border-radius:var(--r-ctl);font-weight:800}
.btn-dark,.raid-main-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 100%,#fff 12%),var(--accent))!important;color:#fff!important;border:1px solid color-mix(in srgb,var(--accent) 70%,#000)!important;box-shadow:inset 0 1px 0 #ffffff55,0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)!important}
html[data-theme=dark] .btn-dark,html[data-theme=dark] .raid-main-btn{color:#120d2b!important;background:linear-gradient(180deg,#c3b6ff,#a794ff)!important}
.btn-dark:hover,.raid-main-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-light,.raid-light-btn,.small-add{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))!important}
.btn-outline,.icon-btn,.top-admin,.admin-item-actions button{background:var(--surface)!important;color:var(--text-2)!important;border:1px solid var(--line)!important}
.admin-item-actions .danger{color:var(--danger)!important}
.text-link,.mode-link,.card-go,.dungeon-end,.stage-arrow,.guide-arrow{color:var(--accent)!important}

/* 칩·태그 (의미색 3종 + 장미) */
.mini-tag,.synergy-tag.receive,.mini-chip.receive,.mini-chip.pending,.synergy-tag-on,.df-level-badge,.lookup-meta span,.stage-chip-list b,.stage-mini-chip,.detail-badge,.cover-chip,.rune-community,.picked,.picker-chip.on,.deck-intel-preview{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)!important}
.mini-chip.alt,.tile-alt-line>span:first-child{background:var(--gold-soft)!important;color:var(--gold)!important;border-color:color-mix(in srgb,var(--gold) 35%,transparent)!important}
.tile-alt-line>span:first-child{background:none!important;border:0!important}
.synergy-tag.give,.mini-chip.verified,.mini-chip.rune,.rune-tag,.status-pill,.swap-changed,.df-ready,.tile-rune-verified,.intel-replaced{background:var(--mint-soft)!important;color:var(--mint)!important;border-color:color-mix(in srgb,var(--mint) 30%,transparent)!important}
.tile-rune-verified,.intel-replaced{background:none!important;border:0!important}
.mini-chip.give{background:var(--rose-soft)!important;color:var(--rose)!important;border-color:color-mix(in srgb,var(--rose) 30%,transparent)!important}
.status-pill.draft{background:var(--gold-soft)!important;color:var(--gold)!important}
.picker-chip,.selected-chip{background:var(--surface-2)!important;color:var(--text-2)!important;border:1px solid var(--line)!important}
.selected-chip,.slot-badge,.captain-flag,.intel-type,.beam-order,.detail-badge.primary,.cover-boss{background:var(--accent)!important;color:#fff!important;border-color:transparent!important}
html[data-theme=dark] :is(.selected-chip,.slot-badge,.captain-flag,.intel-type,.beam-order,.detail-badge.primary) *,html[data-theme=dark] :is(.selected-chip,.slot-badge,.captain-flag,.intel-type,.beam-order,.detail-badge.primary){color:#120d2b!important}
.captain-flag{background:var(--gold)!important;color:#2a1b00!important}
html[data-theme=dark] .captain-flag{color:#2a1b00!important}
.cover-boss{background:#0e0c1bcc!important;color:#fff!important}
html[data-theme=dark] .cover-boss{color:#fff!important}

/* 아바타·덱 커버·표 */
.unit-avatar,.raid-avatar,.micro-avatar,.mini-avatar{background:linear-gradient(145deg,var(--accent-soft),var(--gold-soft))!important;border:1px solid var(--line)!important}
.slot-head-left .unit-avatar{background:linear-gradient(135deg,#2a2150,#14102c)!important}
.deck-cover{background:radial-gradient(circle at 78% 10%,#8f78f555,transparent 50%),linear-gradient(145deg,#2a2150,#14102c)!important}
.boss-photo{background:radial-gradient(circle at 40% 38%,#4a3d82,#17132f 80%)!important}
.stage-hero{background:linear-gradient(100deg,#17132f,#3a2d6e)!important;border-radius:var(--r-hero)!important}
.stage-hero *{color:#f0edfb}
.power-table th,.df-table th,.df-table-toggle>summary{background:var(--surface-2)!important;color:var(--text-3)!important}
.power-table td,.df-table td{border-color:var(--line)!important;color:var(--text-2)!important}
.power-table td b{color:var(--gold)!important}
.df-table tbody tr:nth-child(even){background:var(--surface-2)!important}
.df-table tbody tr.df-active-row{background:var(--accent-soft)!important}
.df-table-toggle{border-color:var(--line)!important;background:var(--surface)}
.df-result{background:linear-gradient(135deg,var(--accent-soft),var(--surface-2))!important;border:1px solid var(--line)!important}
.df-result-top strong,.df-stat-grid b,.df-future b{color:var(--accent-ink)!important}
.df-progress{background:var(--line)!important}.df-progress span,.raid-rank-bar>span{background:linear-gradient(90deg,var(--gold),var(--accent-2))!important}
.raid-rank-bar{background:var(--line)!important}
.raid-result-tops strong,.intelligence-kpis strong{color:var(--accent-ink)!important}
.intelligence-kpis>div{background:var(--surface-2)!important;border:1px solid var(--line)!important}
.raid-rank-row{border-color:var(--line)!important}.raid-rank-row.picked{background:var(--accent-soft)!important}
.raid-beam-list li{background:var(--surface-2)!important;border-color:var(--line)!important}
.upload-inline-status{background:var(--accent-soft);border-color:var(--line);color:var(--accent-ink)}

/* ───────── 사이드바·상단바 (브랜드 앵커: 항상 짙은 포도색) ───────── */
.sidebar{background:linear-gradient(172deg,#14112a,#1f1944 60%,#151030)!important;border-right:1px solid #ffffff12;box-shadow:none}
.brand-mark,.mobile-mark{background:radial-gradient(circle at 32% 24%,#fff4cf,#f4bb5a 55%,#d68a26)!important;box-shadow:inset 0 1px 0 #fff9,inset 0 -6px 10px #b3690f66,0 8px 20px #f2b55a40!important;color:#3a2200}
.nav-link{color:#b4aed3;border:1px solid transparent;border-radius:14px}
.nav-link.active,.nav-link:hover{background:linear-gradient(95deg,#8d75f233,#ffffff08)!important;border-color:#ffffff1c!important;box-shadow:inset 3px 0 0 #f2c26b!important;color:#fff}
.nav-link.active .nav-emoji{color:#f2c26b}
.mini-about{background:#ffffff0a;border:1px solid #ffffff17}.admin-side{border:1px solid #ffffff24;background:#ffffff08;color:#d2caf5}
.topbar{background:color-mix(in srgb,var(--bg) 78%,transparent)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(18px) saturate(1.4);padding-top:env(safe-area-inset-top,0)}
.breadcrumb,.breadcrumb b{color:var(--text-3)}.breadcrumb b{color:var(--text)}
.topbar-feature{background:var(--gold-soft)!important;color:var(--gold)!important;border-color:color-mix(in srgb,var(--gold) 30%,transparent)!important}
.top-right{color:var(--text-3)}
.theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:17px;line-height:1;display:grid;place-items:center;margin-left:4px;box-shadow:var(--sh);cursor:pointer}
.theme-toggle:hover{border-color:var(--accent)}
.mobile-brand{color:var(--text)}.mobile-brand b{color:var(--gold)}
.mobile-bottom-nav{background:color-mix(in srgb,var(--surface) 90%,transparent)!important;border-top:1px solid var(--line)!important;backdrop-filter:blur(18px)}
.mobile-bottom-nav button{color:var(--text-3)}.mobile-bottom-nav button.active{color:var(--accent)!important}
.footer{border-color:var(--line)}.footer span:first-child{color:var(--text-2)}.footer button{color:var(--text-3)}
.toast{background:var(--text);color:var(--bg)}

/* ───────── 홈 히어로 + 젤리 카드 (이 사이트의 시그니처) ───────── */
#page-home.active{min-height:0;align-items:stretch!important}
.lab-landing{border-radius:var(--r-hero)!important;color:#fff;padding:clamp(32px,5vw,64px) clamp(22px,4vw,64px) clamp(28px,4vw,48px)!important;
background:radial-gradient(circle at 88% 6%,#f2c26b38,transparent 36%),radial-gradient(circle at 6% 92%,#7a5cf070,transparent 44%),linear-gradient(125deg,#17132f,#1d1742 62%,#2a1f55)!important;box-shadow:0 24px 70px #1a104a33!important}
.lab-landing:before{opacity:.12!important}.lab-landing:after{color:#f2c26b12!important}
.lab-kicker{color:#f2c26b!important}
.lab-landing h1{color:#fff!important;font-weight:900;letter-spacing:-.05em}.lab-landing h1 em{color:#f6cf86!important}
.lab-landing>p{color:#cfc8ee!important;max-width:52ch}.lab-landing .landing-note{color:#aaa3cf!important}
.lab-seal{background:radial-gradient(circle at 32% 24%,#fff4cf,#f4bb5a 55%,#d68a26)!important;box-shadow:inset 0 2px 0 #fffb,inset 0 -10px 16px #b3690f66,0 12px 34px #f2b55a55!important}
.mode-card{--jel:#8d75f2;position:relative;border:1px solid color-mix(in srgb,var(--jel) 60%,#ffffff30)!important;border-radius:24px!important;color:#fff!important;
background:linear-gradient(165deg,color-mix(in srgb,var(--jel) 44%,#17132f),color-mix(in srgb,var(--jel) 14%,#17132f))!important;
box-shadow:inset 0 1px 0 #ffffff4d,inset 0 -22px 34px color-mix(in srgb,var(--jel) 28%,transparent),0 18px 36px #0a06235c!important;backdrop-filter:none!important}
.mode-card:before{background:color-mix(in srgb,var(--jel) 40%,transparent)!important;filter:blur(18px)}
.mode-card:after{content:"";position:absolute;left:16px;top:9px;width:52%;height:20%;border-radius:50%;background:linear-gradient(#ffffff59,#ffffff00);pointer-events:none}
.mode-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:inset 0 1px 0 #ffffff66,inset 0 -22px 34px color-mix(in srgb,var(--jel) 34%,transparent),0 26px 50px #0a062380!important}
.guild-mode{--jel:#f0a93c}.arena-mode{--jel:#f0658e}.dungeon-mode{--jel:#3fcdb0}.dimension-mode{--jel:#8d75f2}
.mode-card .mode-label,.mode-card small,.mode-card .mode-link{color:#fff!important;opacity:.88}.mode-card strong{color:#fff!important}.mode-card .mode-link{opacity:1;font-weight:900}
.raid-entry{border-radius:var(--r-hero)!important;box-shadow:inset 0 1px 0 #ffffff40,0 18px 40px #1a104a33!important}
.raid-entry-reco{background:linear-gradient(135deg,#7a3a52,#35244f)!important}.raid-entry-builder{background:linear-gradient(130deg,#1f4b5c,#1b2650)!important}

/* ───────── 반응형: 폰 → 아이패드 → PC ───────── */
main{padding:clamp(18px,3vw,40px) clamp(16px,4.2vw,56px) 80px;max-width:1400px}
.deck-grid,.guide-grid,.stage-grid,.dungeon-choice-grid{gap:clamp(12px,1.6vw,20px)}

/* 폰 (~699px): 하단 탭바 */
@media(max-width:699px){
.app-shell{grid-template-columns:1fr}.sidebar{display:none!important}
.mobile-brand{display:flex!important}.mobile-bottom-nav{display:grid!important}.topbar-feature,.breadcrumb{display:none}
.topbar{height:calc(58px + env(safe-area-inset-top,0));padding-left:16px;padding-right:12px}
main{padding:14px 14px calc(92px + env(safe-area-inset-bottom,0))}
.deck-grid,.guide-grid,.stage-grid,.dungeon-choice-grid{grid-template-columns:1fr!important}
.mode-grid{grid-template-columns:1fr!important;gap:10px}
.mode-card{min-height:0!important;border-radius:20px!important}
.lab-landing{border-radius:24px!important}
.modal{width:100vw!important;max-width:none!important;max-height:92dvh!important;margin:auto 0 0!important;border-radius:26px 26px 0 0!important}
.editor-modal{max-height:96dvh!important}
.filterbar{padding:10px}.footer{display:none}
.raid-edit-grid,.raid-trio,.form-grid{grid-template-columns:1fr!important}
.toast{bottom:calc(84px + env(safe-area-inset-bottom,0))}}
@media(max-width:699px){.mobile-bottom-nav button{min-height:56px}}

/* 아이패드·태블릿 (700–1099px): 아이콘 레일 사이드바, 2열 */
@media(min-width:700px) and (max-width:1099px){
.app-shell{grid-template-columns:84px minmax(0,1fr)}
.sidebar{display:flex!important;padding:22px 12px;align-items:center}
.brand{padding:0 0 22px;justify-content:center}.brand-text,.side-label,.nav-arrow,.mini-about,.disclaimer,.admin-side,.mobile-brand{display:none!important}
.side-nav{width:100%}.nav-link{font-size:0!important;justify-content:center;padding:14px 0;min-height:52px}.nav-emoji{font-size:23px;margin:0}
.mobile-bottom-nav{display:none!important}
.deck-grid,.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.stage-grid,.dungeon-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.topbar{height:68px}.topbar-feature{display:none}
.footer{display:flex}
.raid-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.modal{width:min(760px,calc(100vw - 48px))}}
@media(min-width:700px) and (max-width:899px){.stage-grid{grid-template-columns:1fr!important}}

/* PC (1100px~): 전체 사이드바, 3열 / 4열 모드 카드 */
@media(min-width:1100px){
.app-shell{grid-template-columns:252px minmax(0,1fr)}
.deck-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:1200px){.mode-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.mode-card{min-height:290px}}
@media(min-width:1600px){main{max-width:1560px}.deck-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* 터치 기기: 44px 터치 영역, iOS 자동 확대 방지 */
@media(pointer:coarse){
.btn,.nav-link,.icon-btn,.admin-item-actions button,.picker-chip,.small-add{min-height:44px}
input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;min-height:44px}
.theme-toggle{width:40px;height:40px}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mode-card:hover,.deck-card:hover{transform:none!important}}

/* ───────── V22.1 폰 가로 넘침·여백 버그 수정 ───────── */
html{background:var(--bg);overflow-x:hidden;max-width:100%}
.app-shell{overflow-x:clip}
.main-column,main,.page,.panel,.dimension-lookup,.dimension-force,.lookup-form,.stage-search-inline{min-width:0;max-width:100%}
.dimension-lookup,.dimension-force{box-sizing:border-box}
@media(max-width:699px){
.app-shell{grid-template-columns:minmax(0,1fr)!important}
.lookup-form>label,.stage-search-inline>label{flex:0 0 auto!important}
.lookup-form,.stage-search-inline{gap:12px}
.dimension-lookup{padding:18px!important;gap:14px}
.lookup-copy p{font-size:13px}
.stage-chip-list,.lookup-meta{min-width:0}
img,svg,video,table{max-width:100%}
.df-table-scroll,.power-box{overflow-x:auto}}