/* 분할 작업대. 루트 zoom으로 줄어든 실제 공간에 맞춰 전환한다. */
#editor-screen { container:editor / inline-size; background:#0d1420; color:#edf1f6; overflow-y:auto; }
#editor-screen button,#editor-screen select,#editor-screen input[type=text],#editor-screen summary { border:1px solid #35445a; border-radius:7px; background:#192638; color:#edf1f6; font:inherit; font-size:12px; padding:7px 10px; min-height:34px; max-width:100%; }
#editor-screen button:hover,#editor-screen summary:hover { background:#24354c; border-color:#d6c18f; }
#editor-screen button[aria-pressed=true],#editor-screen #btn-ed-save { background:#d6c18f; color:#182030; border-color:#d6c18f; }
#editor-screen :is(button,summary,input,select):focus-visible { outline:2px solid #e7d4a6; outline-offset:2px; }
#editor-screen [hidden] { display:none!important; }
.editor-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 18px; border-bottom:1px solid #304057; flex:none; }
.editor-head h2 { font-size:18px; white-space:nowrap; margin-right:8px; }
.editor-title-fields { display:flex; align-items:center; gap:8px; flex:1 1 360px; min-width:0; }
#editor-screen #ed-name { flex:1 1 140px; min-width:0; width:140px; font-size:14px; }
#ed-tools { position:relative; margin-left:auto; }
#ed-tools>summary { display:block; cursor:pointer; list-style:none; }
#ed-tools>summary::-webkit-details-marker { display:none; }
#ed-tools:not([open]) .editor-tools-items { display:none; }
#ed-tools[open] .editor-tools-items { position:absolute; z-index:10; right:0; top:calc(100% + 6px); width:150px; display:grid; gap:5px; padding:6px; background:#162132; border:1px solid #35445a; border-radius:8px; box-shadow:0 8px 24px #0008; }
.editor-identity { display:flex; align-items:center; gap:6px; flex:0 1 250px; max-width:48%; min-width:0; }
#ed-legend-art { width:30px; height:42px; object-fit:cover; object-position:top; border-radius:5px; flex:none; }
.editor-legend-choice { flex:1; min-width:0; }
#editor-screen #ed-legend-picker { width:100%; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#d6c18f; }
.editor-mobile-tabs { display:none; }
#editor-screen #editor-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,30%); gap:14px; padding:14px 18px; flex:1; min-height:180px; }
#editor-screen #ed-pool-panel,#editor-screen #ed-deck-panel { border:1px solid #304057; border-radius:10px; background:#162132; min-width:0; min-height:0; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.editor-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid #304057; flex:none; }
.editor-panel-head h3 { font-size:14px; }
.editor-panel-head small { color:#a7b5c9; font-size:11px; }
#editor-screen .ed-imgview { margin:0; font-size:11px; color:#a7b5c9; }
#editor-screen .ed-filters { padding:10px; gap:6px; background:transparent; border-bottom:1px solid #304057; color:#a7b5c9; flex:none; }
#editor-screen .ed-filters>* { min-width:0; }
#editor-screen #ed-search { order:-1; flex:1 1 150px; width:150px; }
#editor-screen .ed-filters label { font-size:11px; display:inline-flex; align-items:center; gap:4px; }
#editor-screen .ed-filter-toggle { display:inline-flex; align-items:center; font-size:11px; position:relative; gap:5px; padding:4px 5px; min-height:28px; border:1px solid #35445a; border-radius:6px; background:#111c2b; color:#a7b5c9; cursor:pointer; white-space:nowrap; }
#editor-screen .ed-filter-toggle input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
#editor-screen .ed-filter-toggle:has(input:checked) { background:#29291f; border-color:#8c805f; color:#e7d4a6; }
#editor-screen .ed-filter-toggle:has(input:focus-visible) { outline:2px solid #e7d4a6; outline-offset:2px; }
#editor-screen .ed-filter-toggle:has(input:disabled) { opacity:.45; cursor:default; }
#editor-screen .ed-filter-toggle input:disabled { cursor:default; }
.ed-toggle-track { width:22px; height:12px; border-radius:8px; background:#46546a; flex:none; pointer-events:none; }
.ed-toggle-track::after { content:''; display:block; width:8px; height:8px; margin:2px; border-radius:50%; background:#bdc8d8; }
.ed-filter-toggle input:checked + .ed-toggle-track { background:#d6c18f; }
.ed-filter-toggle input:checked + .ed-toggle-track::after { transform:translateX(10px); background:#182030; }
#ed-add-target { color:#d6c18f; font-size:11px; }
#editor-screen #ed-pool { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; padding:8px; overflow:auto; min-height:0; }
#editor-screen #ed-pool .card-mini { width:100%; height:auto; aspect-ratio:74/104; min-width:0; margin:0; background-position:center top; }
#editor-screen #ed-pool { scrollbar-gutter:stable; }
#editor-screen .card-mini:hover { transform:none; }
#editor-screen .cm-deck-counts { position:absolute; top:2px; right:2px; display:flex; gap:4px; z-index:1; }
#editor-screen .cm-deck-counts .cm-inpool { position:static; flex:none; font-weight:bold; }
#editor-screen .cm-count-side { background:#735a12; color:#fff0b3; border-color:#f1ce55; }
#editor-screen .cm-ctl { flex-wrap:nowrap; gap:8px; }
#editor-screen .cm-ctl button { min-width:34px; width:34px; height:34px; min-height:34px; padding:0; border:0; border-radius:50%; color:#fff; font-size:18px; font-weight:bold; line-height:1; }
#editor-screen .cm-ctl .cm-minus { background:#e05555; }
#editor-screen .cm-ctl .cm-plus { background:#3fbf6f; }
.editor-section-tabs { display:flex; gap:4px; padding:8px; border-bottom:1px solid #304057; flex:none; }
#editor-screen .editor-section-tabs button { padding:6px; flex:1; min-width:0; white-space:normal; }
.editor-deck-content { overflow:auto; padding:10px; flex:1; min-height:0; }
#editor-screen .ed-section { color:#edf1f6; font-size:12px; }
#editor-screen .ed-section>small { display:block; color:#a7b5c9; font-size:11px; margin-top:3px; }
#editor-screen .ed-cardlist:not(.imgview) { display:flex; flex-direction:column; }
#editor-screen .ed-row { width:100%; min-width:0; min-height:32px; padding:6px 8px; background:#1c293b; border-color:#304057; overflow-wrap:anywhere; }
#editor-screen .ed-row:hover { background:#382935; border-color:#b78088; }
#editor-screen .ed-cardlist.imgview { grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); }
#editor-screen .ed-rune-ctl { background:#192638; border-color:#35445a; }
#editor-screen .ed-rune-image { width:60px; max-width:100%; }
#editor-screen #ed-inspector img { width:90px; max-width:100%; }
#editor-screen #ed-inspector .insp-name { font-size:15px; }
#editor-screen #ed-inspector .insp-text { font-size:12px; }
.editor-status { padding:6px 18px; border-top:1px solid #304057; color:#d6c18f; font-size:11px; flex:none; max-height:25%; overflow:auto; }
#editor-screen #ed-msg { font-size:12px; margin:0; color:#efa5ae; }
@container editor (max-width:900px) {
  #ed-tools>summary { display:block; }
  #ed-tools:not([open]) .editor-tools-items { display:none; }
  #ed-tools[open] .editor-tools-items { position:absolute; z-index:10; right:0; top:calc(100% + 6px); width:150px; display:grid; padding:6px; background:#162132; border:1px solid #35445a; border-radius:8px; box-shadow:0 8px 24px #0008; }
  #editor-screen #ed-pool { grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px; padding:6px; }
}
@container editor (max-width:700px) {
  .editor-head { padding:7px 10px; gap:5px; }
  .editor-head h2 { font-size:15px; }
  .editor-title-fields { flex-basis:100%; order:2; gap:6px; }
  #editor-screen #ed-name { font-size:16px; }
  #ed-legend-art { width:30px; height:40px; }
  #editor-screen #ed-legend-picker { font-size:11px; padding:4px 6px; }
  .editor-mobile-tabs { display:flex; gap:6px; padding:6px 10px 0; flex:none; }
  .editor-mobile-tabs button { flex:1; }
  #editor-screen #editor-body { display:flex; flex-direction:column; gap:0; padding:8px 10px; min-height:300px; }
  #editor-screen #ed-pool-panel,#editor-screen #ed-deck-panel { flex:1; }
  #editor-screen[data-editor-pane=catalog] #ed-deck-panel,#editor-screen[data-editor-pane=deck] #ed-pool-panel { display:none; }
  #ed-pool-panel>.editor-panel-head { display:none; }
  #editor-screen #ed-pool { grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); }
  #editor-screen #ed-search { flex-basis:100%; font-size:16px; }
  #editor-screen .ed-filters select { flex:1 0 calc(50% - 6px); }
  .editor-status { padding:5px 10px; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .editor-head { padding:4px 10px; }
  #ed-legend-art { height:32px; width:26px; }
  #editor-screen #editor-body { gap:8px; padding:6px 10px; }
  .editor-panel-head { padding:5px 8px; }
  #ed-pool-panel>.editor-panel-head { display:none; }
  #editor-screen .ed-filters { padding:5px; gap:4px; flex-wrap:nowrap; overflow-x:auto; }
  #editor-screen .ed-filters :is(select,input) { padding:4px; min-height:28px; }
  #editor-screen .ed-filters label { font-size:10px; flex:none; }
  #editor-screen #ed-search { flex:1 1 80px; width:80px; min-width:60px; font-size:12px; }
  #editor-screen .ed-filters select { flex:0 0 76px; width:76px; font-size:11px; }
  #editor-screen #ed-sort { flex-basis:82px; width:82px; }
  #editor-screen #ed-add-target { flex:none; white-space:nowrap; font-size:10px; }
  #editor-screen #ed-pool .card-mini { aspect-ratio:1; background-size:cover; }
  .editor-section-tabs { padding:4px; }
}
/* 모바일에서는 편집 공간을 확보하되 저장 오류 안내는 유지한다. */
@media (pointer:coarse) and (max-width:900px), (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  body.editor-visible #legal-footer { display:none!important; }
  #editor-screen { padding-bottom:0; }
  #editor-screen #ed-status-count { display:none; }
  #editor-screen .editor-status:has(#ed-msg:empty) { display:none; }
}
/* 전장 풀과 덱 이미지 보기 모두 가로 원본을 자르거나 늘리지 않는다. */
#editor-screen[data-editor-section=settings] #ed-pool { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
#editor-screen #ed-pool .card-mini.ed-battlefield,#editor-screen #ed-bfs.imgview .ed-battlefield { aspect-ratio:104/74; background-size:contain; background-repeat:no-repeat; background-position:center; }
#editor-screen #ed-bfs.imgview { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
@container editor (max-width:700px) {
  #editor-screen[data-editor-section=settings] #ed-pool { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.legend-gallery-dialog { width:960px; max-width:calc(100% - 24px); height:680px; max-height:calc(100% - 32px); margin:auto; padding:0; border:1px solid #35445a; border-radius:16px; background:#111b2a; color:#edf1f6; box-shadow:0 24px 80px #0009; }
.legend-gallery-dialog[open] { display:flex; flex-direction:column; }
.legend-gallery-dialog::backdrop { background:#030812bd; backdrop-filter:blur(3px); }
.legend-gallery-dialog button { font:inherit; color:#c8d2df; background:#192638; border:1px solid #35445a; border-radius:7px; padding:8px 12px; cursor:pointer; }
.legend-gallery-dialog button:focus-visible { outline:2px solid #e7d4a6; outline-offset:-3px; }
.legend-gallery-dialog header { display:flex; align-items:center; gap:12px; padding:20px 24px 12px; flex:none; }
.legend-gallery-dialog h2 { font-size:23px; margin:0; }
.legend-gallery-dialog p { color:#a7b5c9; font-size:12px; margin:5px 0 0; }
.legend-gallery-dialog .lg-close { margin-left:auto; font-size:20px; padding:3px 10px; }
.lg-tools { padding:0 24px 12px; flex:none; }
.legend-gallery-dialog .lg-custom { color:#d6c18f; }
.lg-grid { overflow:auto; min-height:0; flex:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:16px 24px; align-content:start; border-top:1px solid #304057; }
.legend-gallery-dialog .lg-card { position:relative; padding:0; height:177px; min-width:0; overflow:hidden; border-radius:10px; text-align:left; }
.lg-card img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.lg-info { position:absolute; bottom:0; left:0; right:0; padding:26px 10px 10px; background:linear-gradient(transparent,#101b2be6 40%,#101b2b); }
.lg-info strong { display:block; font-size:15px; }
.lg-info small { display:block; margin-top:4px; color:#bcc8d8; font-size:11px; }
.lg-check { display:none; position:absolute; right:7px; top:7px; border-radius:50%; background:#d6c18f; color:#182030; width:21px; height:21px; text-align:center; line-height:21px; }
.legend-gallery-dialog [aria-pressed=true] { border:2px solid #d6c18f; }
.lg-card[aria-pressed=true] .lg-check { display:block; }
.legend-gallery-dialog footer { display:flex; align-items:center; gap:8px; padding:12px 24px; background:#162132; border-top:1px solid #35445a; flex:none; }
.lg-selection { margin-right:auto; min-width:0; color:#e7d4a6; font-size:13px; overflow-wrap:anywhere; }
.legend-gallery-dialog .lg-confirm { background:#d6c18f; color:#182030; border-color:#d6c18f; flex:none; }
@media(max-width:600px) {
  .legend-gallery-dialog { max-width:calc(100% - 16px); max-height:calc(100% - 16px); height:800px; border-radius:12px; }
  .legend-gallery-dialog header { padding:14px 12px 10px; }
  .legend-gallery-dialog h2 { font-size:20px; }
  .lg-tools { padding:0 12px 10px; }
  .lg-grid { padding:12px; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .legend-gallery-dialog .lg-card { height:150px; }
  .lg-info { padding:23px 6px 8px; }
  .lg-info strong { font-size:13px; }
  .lg-info small { font-size:10px; }
  .legend-gallery-dialog footer { padding:10px 12px; gap:6px; }
  .legend-gallery-dialog footer button { padding:8px; font-size:12px; }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .legend-gallery-dialog { height:100%; max-height:calc(100% - 12px); }
  .legend-gallery-dialog header { padding:8px 14px 6px; }
  .legend-gallery-dialog h2 { font-size:17px; display:inline; }
  .legend-gallery-dialog p { display:inline; margin-left:10px; font-size:10px; }
  .lg-tools { padding:0 14px 6px; }
  .legend-gallery-dialog .lg-custom { padding:4px 8px; font-size:11px; }
  .lg-grid { padding:8px 14px; gap:8px; grid-template-columns:repeat(6,minmax(0,1fr)); }
  .legend-gallery-dialog .lg-card { height:115px; }
  .lg-info { padding:19px 6px 6px; }
  .lg-info strong { font-size:12px; }
  .lg-info small { font-size:9px; }
  .legend-gallery-dialog footer { padding:6px 14px; }
  .legend-gallery-dialog footer button { padding:6px 10px; font-size:11px; }
}
.champion-picker-dialog { box-sizing:border-box; width:460px; max-width:calc(100% - 24px); max-height:calc(100% - 24px); margin:auto; padding:0; overflow:hidden; border:1px solid #35445a; border-radius:13px; background:#111b2a; color:#edf1f6; }
.champion-picker-dialog[open] { display:flex; flex-direction:column; }
.champion-picker-dialog::backdrop { background:#030812bd; backdrop-filter:blur(3px); }
.champion-picker-dialog button { font:inherit; cursor:pointer; border:1px solid #35445a; border-radius:7px; background:#192638; color:#c8d2df; padding:8px 12px; }
.champion-picker-dialog button:focus-visible { outline:2px solid #e7d4a6; outline-offset:-3px; }
.champion-picker-dialog header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; flex:none; }
.champion-picker-dialog h2 { font-size:19px; margin:0; }
.champion-picker-dialog .cp-close { font-size:20px; padding:3px 10px; }
.champion-picker-dialog .cp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; align-content:start; gap:10px; padding:0 14px; min-height:0; overflow:auto; }
.champion-picker-dialog .cp-card { position:relative; min-width:0; padding:0; overflow:hidden; text-align:left; flex:none; }
.champion-picker-dialog .cp-card img { display:block; width:100%; height:168px; object-fit:cover; object-position:center top; }
.champion-picker-dialog .cp-card strong { display:block; padding:8px; font-size:12px; overflow-wrap:anywhere; }
.champion-picker-dialog [aria-pressed=true] { border-color:#d6c18f; box-shadow:inset 0 0 0 1px #d6c18f; background:#2c2c25; }
.champion-picker-dialog .cp-check { display:none; position:absolute; top:7px; right:7px; width:21px; height:21px; line-height:21px; text-align:center; border-radius:50%; background:#d6c18f; color:#182030; }
.champion-picker-dialog [aria-pressed=true] .cp-check { display:block; }
.champion-picker-dialog .cp-tools { display:flex; justify-content:flex-end; padding:8px 14px; flex:none; }
.champion-picker-dialog .cp-direct { font-size:12px; border-color:transparent; background:transparent; }
.champion-picker-dialog footer { display:flex; justify-content:flex-end; gap:8px; padding:10px 14px; border-top:1px solid #35445a; background:#162132; flex:none; }
.champion-picker-dialog footer button { font-size:12px; }
.champion-picker-dialog .cp-confirm { background:#d6c18f; border-color:#d6c18f; color:#182030; }
.champion-picker-dialog .cp-confirm:disabled { opacity:.5; cursor:default; }
.champion-picker-dialog.cp-manual { width:860px; }
.champion-picker-dialog.cp-manual .cp-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:600px) {
  .champion-picker-dialog .cp-card img { height:138px; }
  .champion-picker-dialog.cp-manual .cp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .champion-picker-dialog.cp-manual .cp-card img { height:110px; }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .champion-picker-dialog header { padding:8px 14px; }
  .champion-picker-dialog h2 { font-size:17px; }
  .champion-picker-dialog .cp-card img { height:100px; }
  .champion-picker-dialog .cp-tools { padding:4px 14px; }
  .champion-picker-dialog footer { padding:6px 14px; }
  .champion-picker-dialog.cp-manual .cp-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

/* 일치하는 선발 후보는 카드 설명까지 전체 비율로 표시한다. */
.champion-picker-dialog:not(.cp-manual) .cp-card img { height:240px; max-height:38dvh; object-fit:contain; }
#editor-screen .ed-champion-summary { display:flex; align-items:center; gap:10px; margin-top:8px; }
#editor-screen .ed-champion-choice { flex:1; min-width:0; }
#editor-screen #ed-champ-preview { flex:none; width:80px; padding:0; overflow:hidden; background:#0d1420; }
#editor-screen #ed-champ-art { display:block; width:100%; height:auto; }
#editor-screen #ed-champ-select-picker { width:100%; text-align:left; white-space:normal; overflow-wrap:anywhere; }
#editor-screen #ed-champ { display:block; margin-top:6px; }
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  #editor-screen #ed-champ-preview { width:64px; }
}

#editor-screen #ed-store-label { display:block; font-size:10px; font-weight:normal; color:#d6c18f; max-width:180px; white-space:normal; overflow-wrap:anywhere; }

@media(pointer:fine) {
  @container editor (min-width:900px) {
    #editor-screen #ed-tools>summary { display:none; }
    #editor-screen #ed-tools::details-content { content-visibility:visible; }
    #editor-screen #ed-tools .editor-tools-items { display:flex; position:static; width:auto; gap:8px; padding:0; border:0; background:none; box-shadow:none; }
    #editor-screen #ed-tools .editor-tools-items button,
    #editor-screen #btn-ed-cancel,
    #editor-screen #btn-ed-save { min-width:88px; padding-inline:20px; text-align:center; }
  }
}

/* 폰 가로(높이 500px 이하)에서는 편집 공간이 한 줄밖에 안 남아 법적 고지 푸터를 숨긴다 — 다른 입장 화면에는 그대로 보인다 (병합 때 추가, 2026-10-19) */
@media (max-height:500px) { body.editor-visible #legal-footer { display:none !important; } }