@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101316;--panel:#191d22;--line:#2c333a;--muted:#909ba7;--mint:#b4efd0;--blue:#81bdf7;--purple:#c5a6f3}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#edf0f3;font:13px 'Noto Sans KR',sans-serif}
button,input{font:inherit}
button,a,input{outline-offset:4px}
button{cursor:pointer;border:1px solid #3a454f;background:#252e36;color:#edf0f3;border-radius:9px;padding:9px 13px}
button:hover{background:#35424d}
button:disabled{cursor:default;opacity:.4}
a{color:inherit;text-decoration:none}
header{height:79px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#15191d}
.brand{display:flex;gap:12px;align-items:center;font-size:19px;letter-spacing:2px}
.brand b{font-weight:500;color:var(--mint)}
.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.8px;margin-top:2px}
.brand-icon{background:var(--mint);color:#143c2c;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;font-weight:800}
.header-actions{display:flex;gap:12px;align-items:center}
#connection{color:var(--muted);font-size:12px}
#connection.connected{color:var(--mint)}
.app-shell{display:grid;grid-template-columns:232px minmax(0,1fr)}
aside{padding:28px 18px;border-right:1px solid var(--line);background:#14181c;position:sticky;top:0;height:calc(100vh - 0px);overflow:auto}
.source-label,.eyebrow{font-size:10px;letter-spacing:1.8px;color:#a0b5aa;font-weight:700}
aside h2{font-size:17px;margin:10px 0 5px}
aside p{font-size:11px;color:var(--muted)}
.collection-stats{display:flex;gap:9px;align-items:baseline;border-bottom:1px solid var(--line);padding:12px 0 20px;margin-bottom:12px}
.collection-stats strong{font-size:21px}
.collection-stats span{color:var(--muted);margin-right:10px;font-size:11px}
nav{display:flex;flex-direction:column;gap:3px}
nav button{text-align:left;border:0;background:transparent;padding:9px 10px;font-size:12px;display:flex;justify-content:space-between;color:#aab4bf}
nav button.active{background:#263a30;color:var(--mint)}
nav button span{opacity:.6}
.source-link{display:block;margin:24px 8px 12px;color:var(--mint);font-size:12px}
.source-note{line-height:1.8}
main{padding:30px 32px 20px;min-width:0}
.page-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
h1{font-size:30px;letter-spacing:-1.4px;margin:8px 0 7px}
.page-intro p{font-size:12px;color:var(--muted);margin:0}
#clear{background:transparent;color:#b0b8c0;font-size:11px}
.inspector{position:sticky;top:0;z-index:5;border:1px solid #425d50;background:#1a2421f5;backdrop-filter:blur(15px);border-radius:15px;box-shadow:0 12px 35px #0004;margin-bottom:20px;overflow:hidden}
.inspector-title{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid #34473f;color:#d6e9df;font-size:12px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}
#pin-state{margin-left:auto;font-size:9px;letter-spacing:1px;color:#a5b7ad}
.empty{height:125px;display:flex;align-items:center;justify-content:center;gap:20px;color:#a1b4a9}
.empty>span{font-size:42px;color:var(--mint)}
.empty strong{font-size:16px;color:#e1ece5}
.empty p{font-size:12px}
#recipe{padding:14px 18px;max-height:290px;overflow:auto}
.recipe-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.recipe-heading h3{font-size:16px;margin:0 0 5px}
.recipe-heading small{color:#a1b4a9}
.tag{padding:4px 8px;font-size:10px;border-radius:5px;white-space:nowrap;background:#38453f;color:var(--mint)}
.recipe-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px}
.ingredient{display:flex;gap:9px;align-items:center;background:#26332d;border:1px solid #43594c;min-width:142px;text-align:left;padding:8px;border-radius:8px}
.ingredient img{width:34px;height:34px;border-radius:6px;object-fit:cover}
.ingredient b{display:block;font-size:11px;max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ingredient small{font-size:10px;color:#b4c3b9}
.ingredient.missing{border-color:#735744}
.ingredient.missing small{color:#e6b58d}
.missing-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid #34473f;margin-top:9px;padding-top:9px}
.missing-row>span{font-size:10px;color:#a1b4a9;margin-right:6px}
.missing-chip{font-size:10px;padding:4px 7px;background:#322e26;border-color:#635542;color:#e6c5a1}
.toolbar{display:flex;gap:18px;align-items:center;margin-bottom:13px}
.search{display:flex;align-items:center;gap:10px;background:#1c2228;border:1px solid var(--line);border-radius:9px;padding:8px 12px;flex:1;max-width:470px}
.search>span{font-size:23px;color:var(--muted)}
.search input{border:0;background:transparent;outline:none;color:white;min-width:50px;width:100%;font-size:12px}
.search kbd{border:1px solid #46515d;color:#8b97a3;border-radius:4px;padding:1px 6px}
.owned-filter{font-size:11px;white-space:nowrap;color:#b5bec7}
input[type=checkbox]{accent-color:var(--mint)}
#visible-count{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.legend{display:flex;gap:18px;font-size:10px;color:#aab3bd;align-items:center;margin-bottom:20px}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:7px;height:7px;border-radius:2px}
.direct-key{background:var(--mint)}
.nested-key{background:var(--blue)}
.parent-key{background:var(--purple)}
.legend .help{margin-left:auto;color:#6e7a86}
.group{margin:0 0 28px}
.group-heading{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:14px}
.group-heading span{font-size:10px;color:#8a98a4;border:1px solid var(--line);border-radius:5px;padding:2px 5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:9px}
.unit{position:relative;border:1px solid var(--line);border-radius:10px;background:#1c2127;padding:10px;min-height:136px;transition:border-color .12s,background .12s,opacity .12s;cursor:pointer}
.unit:hover,.unit:focus-visible{border-color:#dce9e3;background:#29322e}
.portrait{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.portrait img{height:40px;width:40px;object-fit:cover;border-radius:8px;background:#303840}
.portrait .count{font-size:11px;color:#8a96a1}
.portrait .count.has{color:var(--mint);font-weight:700}
.unit h3{font-size:11px;line-height:1.55;margin:0;min-height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.unit-controls{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.unit-controls small{font-size:9px;color:#85929e}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{border:0;background:#29323b;border-radius:4px;padding:0;width:21px;height:20px;line-height:18px}
.stepper input{width:30px;background:transparent;border:0;color:#ccd7df;text-align:center;font-size:11px;appearance:textfield}
.stepper input::-webkit-inner-spin-button{appearance:none}
.unit.direct{border:1px solid var(--mint);background:#24382e;box-shadow:0 0 0 1px #b4efd022}
.unit.nested{border-color:#6997bf;background:#202d3b}
.unit.parent{border-color:#9e81c9;background:#2d2638}
.unit.selected{border:2px solid #e6c476;background:#393322;padding:9px}
.unit.dim{opacity:.38}
.unit.banned{filter:grayscale(1)}
.unit.banned:after{content:'밴';position:absolute;right:8px;top:32px;color:#e7a3a3;font-size:10px}
.relation{font-size:8px;position:absolute;right:8px;top:32px;color:var(--mint)}
.nested .relation{color:var(--blue)}
.parent .relation{color:var(--purple)}
#notice{padding:11px 14px;border:1px solid #6c573b;border-radius:8px;background:#30281e;color:#dec3a1;font-size:12px}
footer{border-top:1px solid var(--line);padding-top:18px;color:#65717e;font-size:10px}
.no-results{padding:50px;text-align:center;color:#9aa7b4}
@media(min-width:1550px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media(max-width:900px){.app-shell{grid-template-columns:180px minmax(0,1fr)}
aside{padding:20px 12px}
main{padding:24px 18px}
.legend .help{display:none}
.page-intro p{max-width:310px;line-height:1.7}
h1{font-size:25px}}
@media(max-width:650px){header{padding:0 14px;height:72px}
.brand{font-size:15px}
.header-actions{gap:6px}
#connection{font-size:10px}
#connect,#disconnect{font-size:10px;padding:7px}
.app-shell{display:block}
aside{position:static;height:auto;padding:15px;border-right:0}
aside h2{margin:5px 0}
aside p,.collection-stats,.source-label,.source-note,.source-link{display:none}
nav{flex-direction:row;overflow-x:auto;margin-top:10px}
nav button{white-space:nowrap;gap:8px}
main{padding:18px 12px}
.page-intro{gap:8px}
.page-intro p{font-size:10px}
h1{font-size:24px}
.inspector{top:0}
#recipe{max-height:245px}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.unit{padding:8px}
.unit h3{font-size:10px}
.toolbar{gap:8px;flex-wrap:wrap}
.search{flex-basis:100%;max-width:none}
.empty{height:95px}
.empty p{font-size:10px}
.legend{gap:12px}
.unit-controls{flex-wrap:wrap;gap:4px}
.stepper{gap:4px}}
.availability{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:15px 18px;background:#1c2823;border:1px solid #3b5547;border-radius:12px;margin-bottom:18px}
.availability strong{color:var(--mint);margin-right:auto}
.availability label{font-size:11px;white-space:nowrap}
.availability p{flex-basis:100%;margin:0;color:#9aac9f;font-size:10px;line-height:1.7}
.toolbar{flex-wrap:wrap}
.progress{margin-top:8px;font-size:9px;color:#b3c8ba}
.progress meter{display:block;width:100%;height:6px;margin-top:4px;accent-color:var(--mint)}
.compact .grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:5px}
.compact .unit{min-height:100px;padding:6px}
.compact .portrait img{width:28px;height:28px}
.compact .unit h3{font-size:9px;min-height:28px}
.compact .unit-controls{display:none}
.compact .portrait .count{font-size:9px}
.compact .relation{top:26px;font-size:7px}
.compact .group{margin-bottom:15px}
.compact .inspector{position:relative}
.compact .unit.selected{padding:5px}
/* Vertical build board: the default view prioritizes the complete collection. */
.compact{height:100vh;overflow:hidden}
.compact header{height:48px;padding:0 16px}
.compact .brand{font-size:14px}
.compact .brand-icon{width:27px;height:27px;border-radius:7px}
.compact .brand small{display:none}
.compact .app-shell{display:block;height:calc(100vh - 48px)}
.compact aside{display:none}
.compact main{height:100%;padding:8px 12px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.compact .page-intro{margin:0;min-height:25px}
.compact .page-intro h1{font-size:17px;margin:0;letter-spacing:-.5px}
.compact .eyebrow,.compact .page-intro p{display:none}
.compact #clear{padding:4px 8px}
.compact .inspector{flex-shrink:0;margin:0;border-radius:8px}
.compact .inspector-title{padding:5px 10px;font-size:10px}
.compact #recipe{padding:5px 10px;max-height:130px}
.compact .empty{height:28px;justify-content:flex-start;gap:10px}
.compact .empty>span{font-size:20px}
.compact .empty strong{font-size:11px}
.compact .empty p{display:none}
.compact .recipe-heading{margin-bottom:3px}
.compact .recipe-heading h3{font-size:12px;margin:0}
.compact .recipe-heading small{font-size:9px}
.compact .recipe-strip{padding:0;gap:5px}
.compact .ingredient{min-width:115px;padding:4px;gap:5px}
.compact .ingredient img{width:23px;height:23px}
.compact .ingredient b,.compact .ingredient small{font-size:9px}
.compact .missing-row{margin-top:4px;padding-top:4px}
.compact .availability{padding:7px 10px;margin:0;gap:10px;border-radius:7px;flex-shrink:0}
.compact .availability strong{font-size:11px}
.compact .availability p{font-size:9px;line-height:1.3}
.compact .toolbar{margin:0;gap:10px;flex-shrink:0}
.compact .search{padding:2px 8px;max-width:270px}
.compact .search>span{font-size:18px}
.compact .legend{margin:0;gap:14px;font-size:9px;flex-shrink:0}
.compact #notice{margin:0;padding:5px 10px;font-size:10px}
.compact footer{display:none}
#category-filter{background:#202a30;color:#dbe8df;border:1px solid #42544b;border-radius:6px;padding:5px;font:inherit;font-size:11px}
.compact #catalog{display:flex;gap:6px;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;align-items:stretch}
.compact .catalog-lane{flex:1 0 124px;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#40584c #171e1b;padding-right:2px}
.compact .catalog-lane[hidden]{display:none}
.compact .group{margin:0 0 7px}
.compact .group-heading{position:sticky;top:0;z-index:2;background:#304b40;color:#dcf5e7;border-radius:4px;padding:5px 6px;font-size:10px;margin:0 0 3px;gap:5px}
.compact .group-heading span{font-size:8px;border:0;padding:0;margin-left:auto;color:#b5c7bd}
.compact .grid{display:flex;flex-direction:column;gap:2px}
.compact .unit,.compact .unit.selected{display:grid;grid-template-columns:21px minmax(0,1fr) 36px;grid-template-rows:19px 17px;column-gap:4px;min-height:42px;padding:3px 4px;border-width:1px;border-radius:4px;align-items:center}
.compact .unit[hidden]{display:none}
.compact .portrait{display:contents}
.compact .portrait img{width:19px;height:19px;border-radius:3px;grid-column:1;grid-row:1}
.compact .portrait .count{grid-column:3;grid-row:1;font-size:8px;text-align:right}
.compact .unit h3{grid-column:2;grid-row:1;min-height:0;font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:19px}
.compact .progress{grid-column:1/3;grid-row:2;margin:0;min-width:0}
.compact .progress meter{height:3px;margin-top:0;max-width:70px}
.compact .unit-controls{display:flex;grid-column:3;grid-row:2;margin:0;justify-content:flex-end}
.compact .unit-controls>small{display:none}
.compact .stepper{gap:1px}
.compact .stepper button{width:11px;height:14px;font-size:10px;line-height:12px}
.compact .stepper input{width:16px;font-size:9px;padding:0}
.compact .relation{display:none}
.compact .unit.dim{opacity:.55}
.compact .no-results{padding:20px;width:100%}
.compact .unit.banned:after{top:3px;right:3px;background:#302021}
.catalog-lane[hidden]{display:none}
@media(max-width:650px){.compact .availability p{display:none}
.compact .availability{gap:6px}
.compact .availability label{font-size:9px}
.compact .toolbar .search{flex-basis:auto;max-width:160px}
.compact .catalog-lane{flex-basis:124px}
.compact .page-intro{display:none}
.compact .legend .help{display:none}}
/* One unit per compact row: portrait, name, percentage, owned quantity. */
.compact .unit,.compact .unit.selected{grid-template-columns:18px minmax(0,1fr) 27px 37px;grid-template-rows:21px;min-height:25px;padding:1px 3px;column-gap:3px}
.compact .portrait img{height:17px;width:17px}
.compact .portrait .count{display:none}
.compact .unit h3{font-size:10px;line-height:21px}
.compact .progress{grid-column:3;grid-row:1;position:relative;margin:0}
.compact .progress meter{position:absolute;bottom:0;width:25px;height:2px}
.compact .unit-controls{grid-column:4;grid-row:1}
.compact .stepper button{height:17px;line-height:15px}
.compact .stepper input{height:17px}
.compact .inspector{height:132px}
.compact #recipe{height:106px;max-height:106px}
.compact .empty{height:83px}
.compact .empty p{display:block;font-size:10px}
/* Give the immediate ingredients stronger emphasis than their ancestors. */
.unit.direct{border-color:#74ffbd;background:#164b34;box-shadow:inset 4px 0 #74ffbd,0 0 9px #64ffb52e}
.unit.direct h3{color:#eafff2;font-weight:800}
.unit.direct .portrait img{outline:1px solid #9dffd0;box-shadow:0 0 6px #7cffb97a}
.unit.direct .count{color:#c2ffdd}
.unit.selected{border-color:#ffd579;background:#51401d;box-shadow:inset 4px 0 #ffd579}
.unit.nested{background:#1c2b39;border-color:#526e89;box-shadow:none}
.unit.parent{background:#282331;border-color:#66557e;box-shadow:none}
.compact .unit.direct,.compact .unit.selected{padding-left:6px}
.compact .unit.direct h3:before{content:'◆ ';color:#74ffbd;font-size:8px}
.compact .unit.selected h3:before{content:'★ ';color:#ffd579;font-size:9px}
.compact .unit.dim{opacity:.32}
.compact .unit.direct:hover,.compact .unit.direct:focus-visible{background:#226545;border-color:#c6ffe0}
.ingredient{border-color:#72c99c}
.ingredient.missing{border-color:#b99563}
.direct-key{background:#74ffbd;box-shadow:0 0 5px #74ffbd99}
/* Highlight the full ingredient chain, not only the immediate recipe. */
.unit.nested{border-color:#79c7ff;background:#183e5b;box-shadow:inset 4px 0 #79c7ff,0 0 8px #79c7ff22}
.unit.nested h3{color:#e1f3ff;font-weight:800}
.unit.nested .portrait img{outline:1px solid #a0d8ff;box-shadow:0 0 5px #79c7ff66}
.compact .unit.nested{padding-left:6px}
.compact .unit.nested h3:before{content:'◆ ';color:#8ed1ff;font-size:8px}
.compact .unit.nested:hover,.compact .unit.nested:focus-visible{background:#235778;border-color:#d0eeff}
.nested-key{background:#79c7ff;box-shadow:0 0 5px #79c7ff88}
#recipe-tooltip{position:fixed;z-index:1000;width:310px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:hidden;pointer-events:none;background:#172721;border:1px solid #8dc9aa;border-radius:10px;padding:11px;box-shadow:0 12px 35px #000b;color:#edf8f2;font-size:12px}
#recipe-tooltip[hidden]{display:none}
.tooltip-heading{display:flex;gap:9px;align-items:center;border-bottom:1px solid #385246;padding-bottom:9px}
.tooltip-heading img{width:32px;height:32px;border-radius:5px}
.tooltip-heading strong{display:block;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.tooltip-heading small{display:block;color:#9eb9ab;font-size:10px;margin-top:2px}
.tooltip-materials{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.tooltip-material{display:flex;gap:8px;align-items:center;background:#21372c;border-radius:6px;padding:6px}
.tooltip-material img{height:27px;width:27px;border-radius:4px}
.tooltip-material>div{flex:1;min-width:0}
.tooltip-material b{display:block;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.tooltip-material small{display:block;font-size:10px;color:#a3b9ac}
.tooltip-material>span{font-weight:800;white-space:nowrap}
.tooltip-material .enough{color:#9effc5}
.tooltip-material .short{color:#ffd09b}
.tooltip-empty{color:#adc0b5;font-size:11px;margin:12px 0 3px}
.detail-actions{display:flex;gap:6px;align-items:center}
#toggle-details{padding:4px 8px;font-size:11px;background:transparent;color:#c0d6c9}
.details-collapsed #recipe{display:none}
.compact.details-collapsed .inspector{height:27px}
.details-collapsed .inspector{margin-bottom:7px}
.compact .availability p{display:none}
.compact .availability{padding:6px 10px}
#recipe-tooltip{pointer-events:auto;overflow:auto}
.tooltip-path{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.tooltip-path button{font-size:10px;padding:3px 5px;background:#243b32;border-color:#496454}
.tooltip-path span{color:#95b09f}
.tooltip-material{width:100%;text-align:left;border:1px solid #5d725f;cursor:pointer}
.tooltip-material:hover,.tooltip-material:focus-visible{background:#594221;border-color:#ffbb65}
.unit.hover-material,.compact .unit.hover-material{opacity:1;background:#59401f;border-color:#ffc477;box-shadow:inset 4px 0 #ffb957,0 0 8px #ffb95755}
.unit.hover-material h3{color:#fff0d8;font-weight:800}
.compact .unit.hover-material h3:before{content:'◆ ';color:#ffc477}
.unit.hover-target,.compact .unit.hover-target{opacity:1;background:#254d61;border-color:#9ce4ff;box-shadow:inset 4px 0 #9ce4ff}
.compact .unit.hover-target h3:before{content:'▸ ';color:#a8ecff}
.hover-key{background:#ffbb65}
/* Read-only live inventory gives its space to a larger completion indicator. */
.unit{--completion-color:#697b88;--completion-fill:#697b8833}
.unit[data-progress=low]{--completion-color:#99c9f5;--completion-fill:#4998d93d}
.unit[data-progress=mid]{--completion-color:#ffda84;--completion-fill:#d49d353d}
.unit[data-progress=high]{--completion-color:#ffc085;--completion-fill:#e8893a4d}
.unit[data-progress=complete]{--completion-color:#9dffc1;--completion-fill:#39c87855}
.compact .unit,.compact .unit.selected{grid-template-columns:18px minmax(0,1fr) 45px 37px;grid-template-rows:25px;min-height:29px}
.compact .progress{width:45px;height:23px;border-radius:4px;background:linear-gradient(to right,var(--completion-fill) var(--completion),#101b2077 var(--completion));border-bottom:2px solid var(--completion-color);text-align:center}
.compact .progress meter{display:none}
.live-mode .unit-controls{display:none!important}
.compact.live-mode .unit,.compact.live-mode .unit.selected{grid-template-columns:18px minmax(0,1fr) 48px 23px}
.compact.live-mode .progress{width:48px}
.compact.live-mode .portrait .count{display:block;grid-column:4;grid-row:1;font-size:0;white-space:nowrap;text-align:center}
.compact.live-mode .portrait .count:before{content:attr(data-owned);font-size:9px;color:#8ea69a}
.compact.live-mode .portrait .count.has:before{color:#b9f6ce;font-weight:700}
.live-mode .legend .help{font-size:0}
.live-mode .legend .help:before{content:'게임 수량 자동 반영 · ×숫자 = 보유 수량';font-size:9px}
.tier-badge{padding:0;width:23px;height:20px;font-size:9px;font-weight:800;line-height:18px;border-radius:4px;border:1px solid #50615a;background:#27332e;color:#b9c5bf;flex-shrink:0}
.tier-badge[data-rank=S]{color:#ffb5d1;background:#63354a;border-color:#cd7296}
.tier-badge[data-rank=A]{color:#ffde92;background:#554325;border-color:#b49a59}
.tier-badge[data-rank=B]{color:#b8dbff;background:#294762}
.tier-badge[data-rank=C]{color:#b3e5c5;background:#2a4b37}
.tier-badge[data-rank=D]{color:#cbbde6;background:#40374e}
.compact .unit,.compact .unit.selected{grid-template-columns:23px 18px minmax(0,1fr) 45px 37px}
.compact.live-mode .unit,.compact.live-mode .unit.selected{grid-template-columns:23px 18px minmax(0,1fr) 48px 23px}
.compact .tier-badge{grid-column:1;grid-row:1}
.compact .portrait img{grid-column:2}
.compact .unit h3{grid-column:3}
.compact .progress{grid-column:4}
.compact .unit-controls{grid-column:5}
.compact.live-mode .portrait .count{grid-column:5}
.tier-editor{background:#1b2822;color:#e7f0eb;border:1px solid #668774;border-radius:12px;max-width:360px;padding:22px}
.tier-editor::backdrop{background:#0008}
.tier-editor h3{margin-top:0}
.tier-editor p{font-size:12px;color:#a9b9af}
.tier-editor select{background:#2c3e33;color:#eaf4ee;border:1px solid #668774;border-radius:5px;padding:6px;margin:10px}
.tier-editor form>div{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}
.tier-badge[data-rank="1"]{color:#ffb5d1;background:#63354a;border-color:#cd7296}
.tier-badge[data-rank="2"]{color:#ffde92;background:#554325;border-color:#b49a59}
.tier-badge[data-rank="3"]{color:#b8dbff;background:#294762}
.tier-badge[data-rank="4"]{color:#b3e5c5;background:#2a4b37}
.tier-badge[data-rank="5"]{color:#cbbde6;background:#40374e}
.tier-source-link{color:#dcc6f4;font-size:9px;white-space:nowrap}
.legend{flex-wrap:wrap}
.collection-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.collection-picker select{max-width:340px;background:#202a30;color:#dbe8df;border:1px solid #42544b;border-radius:6px;padding:6px}
.collection-picker a{font-size:11px;color:var(--mint)}
#collection-url{width:100%;min-width:300px;padding:9px;background:#101316;color:white;border:1px solid #42544b}
.compact .page-intro{display:flex;flex-wrap:wrap;gap:6px}
.command-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:7px 0;color:#ffe2a6;font-size:11px}
.command-row button{color:#ffe2a6}
.installer-link{font-size:11px;color:var(--mint);white-space:nowrap}
#upper-depth{background:#202a30;color:#dbe8df;border:1px solid #42544b;border-radius:5px;padding:3px}
#upper-tree{border:1px solid #514661;border-radius:7px;background:#1c1923;padding:8px 10px;flex-shrink:0;max-height:24vh;overflow:auto}
#upper-tree[hidden]{display:none}
.upper-title{display:flex;align-items:center;gap:12px;margin-bottom:6px;color:#dfc6ff;font-size:12px}
.upper-title small{color:var(--muted);font-size:10px}
.upper-level{display:flex;gap:8px;padding:4px 0;border-top:1px solid #342c40}
.upper-level>b{flex:0 0 52px;font-size:10px;color:#c5a6f3;padding-top:5px}
.upper-level>div{display:flex;flex-wrap:wrap;gap:4px}
.upper-level button{display:flex;align-items:center;gap:4px;padding:4px 6px;font-size:10px;border-color:#514661}
.upper-level img{width:20px;height:20px;border-radius:3px}
.upper-level small{font-size:9px;color:var(--muted)}
#upper-tree p{font-size:11px;color:var(--muted);margin:4px}
.board-area{display:flex;align-items:stretch;gap:8px;min-width:0}
.board-area>#catalog{flex:1;min-width:0}
.compact .board-area{flex:1;min-height:0;overflow:hidden}
.board-area>#upper-tree{flex:0 0 240px;width:240px;max-width:30vw;max-height:none;margin:0;overflow-y:auto;overflow-x:hidden;padding:7px;scrollbar-width:thin}
.compact .board-area>#upper-tree{height:100%}
.board-area .upper-title{position:sticky;top:-7px;background:#1c1923;z-index:2;display:flex;flex-wrap:wrap;gap:5px;padding:5px 0 8px}
.board-area .upper-title strong{flex:1;font-size:11px}
.board-area .upper-title small{width:100%;font-size:9px}
.board-area .upper-title button{padding:3px 6px;font-size:10px}
.board-area .upper-level{display:block}
.board-area .upper-level>b{display:block;padding:3px 0 6px}
.board-area .upper-level>div{display:flex;flex-direction:column}
.board-area .upper-level button{width:100%;text-align:left}
.board-area .upper-level small{margin-left:auto}
.board-area>#upper-tree[hidden]{display:none}
@media(max-width:650px){.board-area>#upper-tree{flex-basis:165px;width:165px;max-width:40vw}
.board-area .upper-level small{display:none}}
/* Keep the rest of the hand readable while exploring a recipe. */
.unit.dim,.compact .unit.dim{opacity:1}
.unit.direct,.compact .unit.direct{background:#202c27;border-color:#4d7561;box-shadow:inset 2px 0 #79ac90}
.unit.nested,.compact .unit.nested{background:#202830;border-color:#465e72;box-shadow:inset 2px 0 #7097b6}
.unit.parent,.compact .unit.parent{background:#25232b;border-color:#554c64;box-shadow:none}
.unit.selected,.compact .unit.selected{background:#302c22;border-color:#998454;box-shadow:inset 2px 0 #c5ab70}
.unit.hover-material,.compact .unit.hover-material{opacity:1;background:#30291f;border-color:#93764e;box-shadow:inset 2px 0 #c29a65}
.unit.hover-target,.compact .unit.hover-target{opacity:1;background:#223039;border-color:#64889b;box-shadow:inset 2px 0 #88afc1}
.unit.direct h3,.unit.nested h3,.unit.hover-material h3{color:inherit;font-weight:600}
.unit.direct .portrait img,.unit.nested .portrait img{outline:none;box-shadow:none}
.compact .unit.direct:hover,.compact .unit.direct:focus-visible{background:#293b31;border-color:#789b85}
.compact .unit.nested:hover,.compact .unit.nested:focus-visible{background:#293541;border-color:#7894aa}
.direct-key,.nested-key{box-shadow:none}
.header-fold-bar{height:28px;display:flex;align-items:center;gap:12px;padding:2px 12px;border-bottom:1px solid var(--line);background:#15191d}
.header-fold-bar button{font-size:10px;padding:2px 8px;border-radius:4px}
.header-fold-bar #connection{font-size:10px;margin-left:auto}
.header-fold-bar .header-actions{gap:8px;flex-shrink:0}
.header-fold-bar .installer-link{font-size:10px}
.header-fold-bar .header-actions button{white-space:nowrap}
@media(max-width:640px){.header-fold-bar{gap:6px;padding-inline:6px}.header-fold-bar .guide-link{display:none}}
.compact .app-shell{height:calc(100vh - 76px)}
.headers-collapsed>header,.headers-collapsed .page-intro,.headers-collapsed .inspector,.headers-collapsed .availability,.headers-collapsed .toolbar,.headers-collapsed .legend,.headers-collapsed aside{display:none!important}
.headers-collapsed .app-shell{display:block}
.compact.headers-collapsed .app-shell{height:calc(100vh - 28px)}
.tier-badge{width:15px;height:17px;line-height:15px;font-size:9px;border-radius:3px}
.tier-badge[data-rank="미정"]{background:transparent;border-color:transparent}
.tier-badge[data-rank="미정"]:hover,.tier-badge[data-rank="미정"]:focus-visible{border-color:#50615a;background:#202823}
.compact .unit,.compact .unit.selected{grid-template-columns:15px 18px minmax(0,1fr) 45px 37px}
.compact.live-mode .unit,.compact.live-mode .unit.selected{grid-template-columns:15px 18px minmax(0,1fr) 48px 23px}
.unit[data-progress=wisp-ready]{--completion-color:#efa9cf;--completion-fill:#b25b8a33}
.unit[data-progress=wisp-partial]{--completion-color:#e9d18a;--completion-fill:#ac913533}
.tooltip-progress{font-size:11px;color:#dfc6ff;margin:7px 0}
/* A single segmented bar: owned materials, selection wisps, then missing. */
.unit .progress,.compact .unit .progress{height:18px;min-height:18px;border:1px solid #45524c;border-radius:3px;background:linear-gradient(to right,#669e7e 0%,#669e7e var(--completion,0%),#c784a5 var(--completion,0%),#c784a5 var(--with-wisps,0%),#151b20 var(--with-wisps,0%),#151b20 100%);box-shadow:none}
/* Keep the owned-material percentage readable over both bar segments. */
.unit .progress,.compact .unit .progress{position:relative}
.unit .progress:after{content:attr(data-owned-percent);position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;line-height:16px;color:#e9d18a;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
/* Readiness is conveyed by the owned-percentage number, not a border highlight. */

.unit[data-progress="complete"] .progress:after{color:#9dffc1}
.unit[data-progress="wisp-ready"] .progress:after{color:#efa9cf}
.unit.banned .progress:after{color:#adb6bf}
.extra-cost{margin:8px 0;padding:7px 8px;background:#28251f;border:1px solid #514735;border-radius:5px;font-size:11px}
.extra-cost>strong{color:#e9d1a2}
.extra-cost p{margin:5px 0;line-height:1.5}
.extra-cost small{display:block;color:#a7a396;font-size:9px;margin-top:5px}
.extra-cost a{display:block;font-size:9px;color:#b5c7d2;margin-top:4px}
.cost-line{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.cost-line .short{color:#efb0a3}

/* Only the centered segmented-bar label is visible. */
.unit .progress-text,.unit .progress meter{display:none!important}

.header-fold-bar .guide-link{font-size:10px;color:#b4c3bb;white-space:nowrap}.header-fold-bar .guide-link:hover{text-decoration:underline}