/* Shared equipment comparison: equal columns, image above a two-line name. */
body .tile.rarity-frame{border:1px solid #728291!important;box-shadow:none!important;box-sizing:border-box;overflow:hidden}
body .tile.rarity-frame.mythic{border-color:#edc54e!important}
body .tile.rarity-frame.legendary{border-color:#b564ec!important}
body .tile.rarity-frame.heroic{border-color:#ec555c!important}
body .tile.rarity-frame.rare{border-color:#469bed!important}
body .tile.rarity-frame.unique{border-color:#70deec!important}
body .tile.rarity-frame img{border:0!important;box-shadow:none!important;width:100%;height:100%;object-fit:contain}
body #picker.clean-equipment .exchange-table-head{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body #picker.clean-equipment .exchange-table-head h3{text-align:center!important;margin:0!important;padding:10px 4px!important}
body #picker.clean-equipment #exchange-rows .clean-comparison{display:grid!important;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:0;padding:6px 12px;border-bottom:1px solid #3a505f;min-width:0}
body #picker.clean-equipment .clean-side{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:40px 36px 30px;gap:4px;align-items:center;justify-items:center;align-content:start;min-width:0;padding:0 5px;position:relative}
body #picker.clean-equipment .clean-side .tile,body #picker.clean-equipment .clean-empty-icon{width:36px!important;height:40px!important;min-width:36px!important;margin:0!important}
body #picker.clean-equipment .clean-empty-icon{display:grid;place-items:center;border:1px solid #385261;color:#607c8e}
body #picker.clean-equipment .clean-name{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-align:center!important;width:100%;max-width:350px;min-width:0;margin:0!important;font-size:13px!important;line-height:18px!important;font-weight:500!important;word-break:keep-all!important;overflow-wrap:normal!important}
body #picker.clean-equipment .clean-placeholder{color:#8099aa}
body #picker.clean-equipment .clean-arrow{margin-top:8px;text-align:center;font-size:20px;color:#9db4c5;line-height:24px;align-self:start}
body #picker.clean-equipment .clean-select{position:static!important;min-width:92px;min-height:28px!important;height:28px!important;padding:3px 10px!important;font-size:12px!important;margin:0!important;background:linear-gradient(#8b7440,#5a4824)!important;border:1px solid #b69c63!important;color:#fff2d0!important;border-radius:3px!important;white-space:nowrap}
body .clean-actions{display:flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap;font-size:11px;color:#c7d4df}
body .clean-delete{border:1px solid #ae6976;background:#542e3a;color:#f2dde2;padding:4px 8px;min-height:27px;border-radius:4px;font-size:11px;white-space:nowrap}
body #picker.clean-equipment .clean-reason{grid-column:1;font-size:11px;text-align:center;line-height:1.4;color:#a8bdcb}
body #target-picker.clean-target{width:min(800px,calc(100vw - 24px))!important;max-width:800px!important}
body #target-picker.clean-target #target-body{padding:14px!important;overflow-x:hidden}
body .clean-source-name{font-size:15px;font-weight:500;color:#e3cd9a}
body .clean-limit{font-size:13px;font-weight:400;color:#c4d6e3;margin:9px 0}
body .clean-target-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 6px;border-bottom:1px solid #395361;min-width:0}
body .clean-target-info{display:flex;gap:10px;align-items:center;min-width:0}
body .clean-target-info .tile,body .clean-basket-row .tile{width:36px!important;height:40px!important;flex:0 0 36px;min-width:36px}
body .clean-target-info strong{font-size:13px;font-weight:500;word-break:keep-all;line-height:1.5}
body .clean-target-info small{display:block;font-size:11px;color:#a9bfce;margin-top:3px}
body .clean-target-settings{display:flex;gap:10px;align-items:center}
body .clean-target-settings select{width:72px!important;height:36px!important;min-height:36px!important;padding:5px 7px!important;background:#102533;color:#f4dfaa;border:1px solid #6b889b;border-radius:4px;font-size:13px}
body .clean-bless{display:flex!important;align-items:center;gap:5px;white-space:nowrap;font-size:12px;color:#d8e4eb}
body .clean-bless input{width:16px!important;height:16px!important;margin:0!important;accent-color:#d3b675}
body .clean-add{height:36px;min-width:68px;padding:4px 10px;border:1px solid #72a3bd;background:#28546a;color:#e0f0ff;font-size:13px;border-radius:4px;white-space:nowrap}
body .clean-add:disabled{opacity:.4;cursor:default}
body .clean-basket{margin-top:18px;padding:12px;background:#112330;border:1px solid #3b576b;border-radius:5px}
body .clean-basket h3{font-size:14px;font-weight:500;margin:0 0 8px}
body .clean-basket-row{display:flex;gap:8px;align-items:center;min-width:0;padding:7px 0;border-top:1px solid #304b5c}
body .clean-basket-row>span:not(.tile){flex:1;min-width:0;font-size:12px;word-break:keep-all}
body .clean-basket-row small{font-size:11px;white-space:nowrap;color:#d8c69f}
/* Apply the same image/name placement to the real comparison and final plan. */
body .category-row.has-items .exchange-pair .item-with-icon{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;min-width:0!important;padding:5px!important}
body .category-row.has-items .exchange-pair .item-with-icon>.tile{width:40px!important;height:44px!important;min-width:40px!important;margin:0!important;flex:none!important}
body .category-row.has-items .exchange-pair .item-with-icon>div{width:100%;min-width:0;text-align:center}
body .category-row.has-items .exchange-pair .item-with-icon strong{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center!important;word-break:keep-all!important;overflow-wrap:normal!important;line-height:18px;font-size:13px}
body .category-row.has-items .exchange-pair .pair-arrow{align-self:start!important;margin-top:16px!important}
body .category-row.has-items .exchange-pair .item-with-icon>div{flex:none!important;min-height:36px}
@media(min-width:601px){
body #wizard-items .separate-actions .exchange-pair{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 60px!important}
body #wizard-items .separate-actions .exchange-pair .pair-arrow{display:block!important;grid-column:2;grid-row:1;align-self:start!important;margin:24px 0 0!important;text-align:center;transform:none!important}
body #wizard-items .separate-actions .pair-heading{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 60px!important}
body #wizard-items .separate-actions .pair-heading>span:nth-child(1){grid-column:1}
body #wizard-items .separate-actions .pair-heading>span:nth-child(2){grid-column:3}
body #wizard-items .separate-actions .pair-heading>.selection-action-heading{grid-column:4}
}
@media(min-width:1100px){
body #picker.clean-equipment .clean-side{grid-template-rows:40px 32px}
body #picker.clean-equipment .clean-select{position:absolute!important;top:4px;right:0;min-width:78px;font-size:11px!important}
body #picker.clean-equipment .clean-actions{position:absolute;top:2px;right:0;flex-direction:column;gap:4px;font-size:10px}
body #picker.clean-equipment .clean-name{max-width:calc(100% - 12px);line-height:16px!important}
}
@media(max-width:650px){
body #picker.clean-equipment #exchange-rows .clean-comparison{padding:7px 3px;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}
body #picker.clean-equipment .clean-side{padding:0 2px;grid-template-rows:40px 34px 28px;gap:4px}
body #picker.clean-equipment .clean-name{font-size:12px!important;line-height:17px!important;max-width:none}
body #picker.clean-equipment .clean-actions{gap:4px;font-size:10px;flex-wrap:wrap}
body #picker.clean-equipment .clean-delete{padding:3px 5px;font-size:10px;min-height:24px}
body #target-picker.clean-target #target-body{padding:10px!important}
body .clean-target-row{grid-template-columns:minmax(0,1fr) 88px;gap:7px;padding:9px 2px}
body .clean-target-info{gap:6px}
body .clean-target-info strong{font-size:12px}
body .clean-target-info .tile{width:30px!important;height:34px!important;min-width:30px;flex-basis:30px}
body .clean-target-settings{display:grid;grid-template-columns:1fr;gap:6px;justify-items:stretch}
body .clean-target-settings select{width:100%!important;height:30px!important;min-height:30px!important}
body .clean-add{height:30px;font-size:12px}
body .clean-bless{font-size:11px}
body .clean-basket{padding:8px}
body .clean-basket-row{gap:5px}
}
@media(max-width:600px){
body:not(.items-mode) .category-row.has-items .exchange-pair .paired-before,body:not(.items-mode) .category-row.has-items .exchange-pair .paired-after{padding:8px 4px!important}
body:not(.items-mode) .category-row.has-items .exchange-pair .item-with-icon{height:auto!important;min-height:0!important;flex-wrap:nowrap!important;align-content:start!important}
body:not(.items-mode) .category-row.has-items .exchange-pair .paired-after .item-with-icon{display:grid!important;grid-template-columns:minmax(0,1fr) 32px;grid-template-rows:44px 36px 32px;gap:5px!important;justify-items:center}
body:not(.items-mode) .paired-after .item-with-icon>.tile{grid-column:1/-1;grid-row:1}
body:not(.items-mode) .paired-after .item-with-icon>div{grid-column:1/-1;grid-row:2}
body:not(.items-mode) .paired-after .item-with-icon>.item-exchange-cost{grid-column:1;grid-row:3;align-self:center;margin:0!important;min-height:0!important;padding:0!important;display:flex!important;align-items:center;gap:4px;white-space:nowrap}
body:not(.items-mode) .paired-after .item-with-icon:not(:has(button))>.item-exchange-cost{grid-column:1/-1}
body:not(.items-mode) .paired-after .item-with-icon>.remove-button{grid-column:2;grid-row:3;position:static!important;transform:none!important;align-self:center;margin:0!important;width:32px!important;min-width:32px!important;height:30px!important;min-height:30px!important;border:1px solid #ae6976;border-radius:4px;background:#542e3a;color:#f2dde2;font-size:0!important}
body:not(.items-mode) .paired-after .item-with-icon>.remove-button:after{content:'삭제';font-size:10px}
body:not(.items-mode) .paired-after .item-with-icon>.item-exchange-cost b{font-size:15px!important;font-weight:500!important}
body:not(.items-mode) .category-row.has-items .exchange-pair .pair-arrow{margin-top:20px!important}
}