미디어위키:Nation List Manager.css

.nation-list-manager,
.nation-list-manager * {
box-sizing:border-box;
}

.nation-list-shell,
.nation-list-loading {
position:relative;
width:100%;
background:#080808;
border:1px solid #000;
color:#d8d8d8;
font-size:12px;
line-height:1.45;
box-shadow:
inset 0 1px 0 #1a1a1a,
inset 0 -1px 0 #050505;
}

.nation-list-loading {
padding:10px;
background:#101010;
}

.nation-list-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:32px;
padding:0 8px;
background:#111111;
border-bottom:1px solid #000;
}

.nation-list-title {
font-weight:700;
letter-spacing:.04em;
color:#e2e2e2;
text-shadow:1px 1px 0 #000;
}

.nation-list-summary {
color:#888;
font-size:11px;
white-space:nowrap;
}

.nation-list-toolbar {
display:flex;
align-items:center;
gap:5px;
padding:6px;
background:#0b0b0b;
border-bottom:1px solid #000;
}

.nation-list-toolbar label {
display:flex;
align-items:center;
gap:5px;
color:#aaa;
white-space:nowrap;
}

.nation-list-toolbar select,
.nation-list-toolbar input[type="search"],
.nation-list-table input[type="text"] {
height:25px;
background:#070707;
color:#e2e2e2;
border:1px solid #000;
box-shadow:
inset 1px 1px 0 #020202,
inset -1px -1px 0 #191919;
outline:none;
border-radius:0;
padding:4px 6px;
font:inherit;
}

.nation-list-toolbar input[type="search"] {
width:320px;
}

.nation-list-toolbar button,
.nation-list-add,
.nation-list-move,
.nation-list-delete,
.nation-list-continent-tab {
border:1px solid #000;
background:#171717;
color:#dcdcdc;
border-radius:0;
font:inherit;
cursor:pointer;
box-shadow:
inset 0 1px 0 #333,
inset 0 -1px 0 #080808;
}

.nation-list-toolbar button {
height:25px;
padding:0 8px;
}

.nation-list-toolbar button:hover,
.nation-list-add:hover,
.nation-list-move:hover,
.nation-list-delete:hover,
.nation-list-continent-tab:hover {
background:#222222;
color:#ffffff;
}

.nation-list-status {
margin-left:auto;
color:#9db7c7;
font-size:11px;
white-space:nowrap;
}

.nation-list-warning-box {
display:flex;
flex-direction:column;
gap:4px;
padding:6px;
background:#080808;
border-bottom:1px solid #000;
}

.nation-list-warning {
padding:5px 7px;
border:1px solid #202020;
background:#101010;
color:#aaa;
font-size:11px;
line-height:1.45;
}

.nation-list-warning.is-ok {
color:#9fc59f;
border-color:#1e3520;
background:#0c130c;
}

.nation-list-warning.is-warn {
color:#d0b16e;
border-color:#493a16;
background:#151006;
}

.nation-list-warning.is-soft {
color:#8a8a8a;
}

.nation-list-continent-tabs {
display:grid;
grid-template-columns:repeat(6, minmax(0,1fr));
gap:3px;
padding:6px;
background:#0b0b0b;
border-bottom:1px solid #000;
}

.nation-list-continent-tab {
height:26px;
padding:0 6px;
font-weight:700;
}

.nation-list-continent-tab.is-active {
background:#1d1d1d;
color:#ffffff;
border-top-color:#555555;
}

.nation-list-body {
max-height:calc(100vh - 285px);
overflow:auto;
padding:6px;
}

.nation-list-region {
margin:0 0 7px;
border:1px solid #000;
background:#0b0b0b;
box-shadow:
inset 0 1px 0 #191919,
inset 0 -1px 0 #050505;
}

.nation-list-region:last-child {
margin-bottom:0;
}

.nation-list-region-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:28px;
padding:0 6px;
background:#111111;
border-bottom:1px solid #000;
}

.nation-list-region-title {
font-weight:700;
color:#e2e2e2;
}

.nation-list-region-count {
margin-left:7px;
color:#777;
font-size:11px;
}

.nation-list-add {
height:22px;
padding:0 7px;
font-size:11px;
}

.nation-list-table-wrap {
overflow:auto;
}

.nation-list-table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}

.nation-list-table th,
.nation-list-table td {
border:1px solid #000;
padding:4px;
vertical-align:middle;
background:#0d0d0d;
}

.nation-list-table th {
background:#151515;
color:#aaa;
font-size:11px;
font-weight:600;
}

.nation-list-table tr:hover td {
background:#141414;
}

.nation-list-table input[type="text"] {
width:100%;
}

.nation-list-order-col {
width:56px;
text-align:center;
}

.nation-list-small-col {
width:58px;
text-align:center;
}

.nation-list-check-col {
width:48px;
text-align:center;
}

.nation-list-action-col {
width:56px;
text-align:center;
}

.nation-list-move {
width:22px;
height:22px;
margin:0 1px;
padding:0;
line-height:18px;
}

.nation-list-delete {
height:22px;
padding:0 6px;
font-size:11px;
}

.nation-list-delete:hover {
background:#2a1515;
color:#ffd0d0;
}

.nation-list-flag-cell {
display:grid;
grid-template-columns:24px minmax(0,1fr);
align-items:center;
gap:5px;
}

.nation-list-flag-cell img,
.nation-list-flag-cell span {
display:block;
width:16px;
height:16px;
object-fit:contain;
background:#080808;
border:1px solid #050505;
box-shadow:0 0 0 1px #2b2b2b;
}

.nation-list-flag-cell span {
box-shadow:none;
border-color:#202020;
background:#050505;
}

.nation-list-empty {
height:31px;
text-align:center;
color:#777;
background:#0b0b0b !important;
}

/* 20260705: 국가 목록 관리 - 드래그 정렬 / 저장 시 국기 보정 */
.nation-list-toolbar select,
.nation-list-table select {
height:25px;
background:#070707;
color:#e2e2e2;
border:1px solid #000;
box-shadow:
inset 1px 1px 0 #020202,
inset -1px -1px 0 #191919;
outline:none;
border-radius:0;
padding:3px 5px;
font:inherit;
}

.nation-list-body {
max-height:none;
overflow:visible;
}

.nation-list-table-wrap {
overflow:visible;
}

.nation-list-drag-col {
width:46px;
text-align:center;
}

.nation-list-offset-col {
width:86px;
text-align:center;
}

.nation-list-drag-handle {
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:22px;
background:#171717;
border:1px solid #000;
box-shadow:
inset 0 1px 0 #333,
inset 0 -1px 0 #080808;
color:#c8c8c8;
cursor:grab;
user-select:none;
font-weight:700;
line-height:1;
}

.nation-list-drag-handle:hover {
background:#222222;
color:#ffffff;
}

.nation-list-table tr[draggable="true"] {
cursor:default;
}

.nation-list-table tr.is-dragging td {
opacity:.42;
background:#101010 !important;
}

.nation-list-table tr.is-drop-before td {
box-shadow:inset 0 2px 0 #d0b16e;
}

.nation-list-table tr.is-drop-after td {
box-shadow:inset 0 -2px 0 #d0b16e;
}

.nation-list-table tbody.is-region-drop {
box-shadow:inset 0 0 0 1px #493a16;
}

.nation-list-measure-stage {
position:absolute;
left:-10000px;
top:-10000px;
width:auto;
height:auto;
visibility:hidden;
pointer-events:none;
white-space:nowrap;
font-size:12px;
line-height:1.45;
}

.nation-list-measure-item {
display:inline-block;
margin:0 16px 0 0;
}

.nation-list-offset-col select {
width:100%;
}

/* 20260705: Nation List Manager flag picker */
.nation-list-flag-input {
font-family:inherit;
}

.nation-list-flag-picker {
position:absolute;
z-index:1000;
max-height:260px;
overflow:auto;
background:#080808;
border:1px solid #000;
box-shadow:
inset 0 1px 0 #2b2b2b,
inset 0 -1px 0 #050505,
0 8px 18px rgba(0,0,0,.65);
padding:4px;
}

.nation-list-flag-picker[hidden] {
display:none;
}

.nation-list-flag-picker-loading,
.nation-list-flag-picker-empty {
padding:6px;
color:#8a8a8a;
background:#101010;
border:1px solid #202020;
}

.nation-list-flag-option {
display:grid;
grid-template-columns:22px minmax(0,1fr);
align-items:center;
gap:6px;
width:100%;
min-height:26px;
margin:0 0 3px;
padding:3px 5px;
border:1px solid #202020;
background:#101010;
color:#d8d8d8;
text-align:left;
cursor:pointer;
box-sizing:border-box;
font:inherit;
}

.nation-list-flag-option:last-child {
margin-bottom:0;
}

.nation-list-flag-option:hover {
background:#1d1d1d;
border-color:#333;
color:#fff;
}

.nation-list-flag-option img {
display:block;
width:16px;
height:auto;
max-height:16px;
object-fit:contain;
border:1px solid #050505;
background:#080808;
box-sizing:content-box;
}

.nation-list-flag-option span {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

/* 20260705: Nation List ↔ Nation Link Map 연동 상태 */
.nation-list-link-col {
width:112px;
text-align:center;
}

.nation-list-link-status {
display:flex;
align-items:center;
justify-content:center;
gap:4px;
min-height:24px;
font-size:11px;
white-space:nowrap;
}

.nation-list-link-status > span {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:19px;
padding:1px 6px;
border:1px solid #202020;
background:#101010;
color:#9a9a9a;
box-shadow:inset 0 1px 0 #1d1d1d,inset 0 -1px 0 #050505;
}

.nation-list-link-status.is-ok > span {
color:#9fc59f;
border-color:#1e3520;
background:#0c130c;
}

.nation-list-link-status.is-missing > span,
.nation-list-link-status.is-flag-mismatch > span,
.nation-list-link-status.is-incomplete > span {
color:#d0b16e;
border-color:#493a16;
background:#151006;
}

.nation-list-link-status.is-soft > span {
color:#777;
}

.nation-list-link-create,
.nation-list-link-sync-one {
height:21px;
padding:0 5px;
border:1px solid #000;
background:#171717;
color:#dcdcdc;
border-radius:0;
font:inherit;
font-size:11px;
cursor:pointer;
box-shadow:inset 0 1px 0 #333,inset 0 -1px 0 #080808;
}

.nation-list-link-create:hover,
.nation-list-link-sync-one:hover {
background:#222;
color:#fff;
}


.nation-list-tag-col {
width:58px;
min-width:58px;
text-align:center;
}

.nation-list-tag-col input[type="text"] {
width:48px;
text-align:center;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
}

/* 20260705: 국기 미리보기 결손/크기 정규화 */
.nation-list-flag-cell img.nation-list-flag-preview {
width:18px !important;
height:12px !important;
max-width:18px !important;
max-height:12px !important;
object-fit:contain !important;
}

.nation-list-flag-cell img.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing {
width:16px !important;
height:10px !important;
max-width:16px !important;
max-height:10px !important;
border:1px solid #4a1b1b !important;
background:repeating-linear-gradient(45deg,#130707 0,#130707 3px,#2a0b0b 3px,#2a0b0b 6px) !important;
box-shadow:0 0 0 1px #2d1111 !important;
box-sizing:border-box !important;
}

.nation-list-flag-cell.is-flag-missing .nation-list-flag-input {
border-color:#4a1b1b !important;
box-shadow:inset 1px 1px 0 #020202,inset -1px -1px 0 #191919,0 0 0 1px #4a1b1b !important;
}


/* 20260705: 국기 미리보기/선택지 테두리 기준 보정
   preview 박스가 16x16으로 고정되는 것이 아니라, 이미지가 16x16 한계 안에서 비율 유지로 들어가고 테두리가 그 결과 크기를 따른다. */
.nation-list-flag-cell {
grid-template-columns:24px minmax(0,1fr) !important;
}

.nation-list-flag-cell img.nation-list-flag-preview:not(.is-missing),
.nation-list-flag-option img:not(.is-missing) {
display:block !important;
justify-self:center !important;
align-self:center !important;
width:auto !important;
height:auto !important;
max-width:16px !important;
max-height:16px !important;
min-width:0 !important;
min-height:0 !important;
object-fit:contain !important;
box-sizing:content-box !important;
}

/* 20260705: 국기 결손 표시 정리
   없는/로드 실패 국기는 빨간 대체 박스로 보이지 않게 한다. */
.nation-list-flag-cell img.nation-list-flag-preview:not(.is-missing),
.nation-list-flag-option img:not(.is-missing) {
  display:block !important;
  justify-self:center !important;
  align-self:center !important;
  width:auto !important;
  height:auto !important;
  max-width:16px !important;
  max-height:16px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  box-sizing:content-box !important;
}

.nation-list-flag-cell img.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing {
  display:none !important;
  width:0 !important;
  height:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.nation-list-flag-cell.is-flag-missing .nation-list-flag-input {
  border-color:#000 !important;
  box-shadow:inset 1px 1px 0 #020202,inset -1px -1px 0 #191919 !important;
}

/* 20260705: Nation List Manager table must not collapse after async font/image/layout updates.
   The flag file cell is an editor field, not a flexible leftover column. */
.nation-list-table-wrap {
  overflow:auto !important;
}

.nation-list-table {
  width:max-content !important;
  min-width:100% !important;
  table-layout:auto !important;
}

.nation-list-table th,
.nation-list-table td {
  white-space:nowrap !important;
}

.nation-list-table th:nth-child(1),
.nation-list-table td:nth-child(1) { width:40px !important; min-width:40px !important; }
.nation-list-table th:nth-child(2),
.nation-list-table td:nth-child(2) { width:76px !important; min-width:76px !important; }
.nation-list-table th:nth-child(3),
.nation-list-table td:nth-child(3) { width:270px !important; min-width:270px !important; }
.nation-list-table th:nth-child(4),
.nation-list-table td:nth-child(4) { width:270px !important; min-width:270px !important; }
.nation-list-table th:nth-child(5),
.nation-list-table td:nth-child(5) { width:94px !important; min-width:94px !important; }
.nation-list-table th:nth-child(6),
.nation-list-table td:nth-child(6) { width:430px !important; min-width:430px !important; }
.nation-list-table th:nth-child(7),
.nation-list-table td:nth-child(7) { width:58px !important; min-width:58px !important; }
.nation-list-table th:nth-child(8),
.nation-list-table td:nth-child(8) { width:52px !important; min-width:52px !important; }
.nation-list-table th:nth-child(9),
.nation-list-table td:nth-child(9) { width:100px !important; min-width:100px !important; }
.nation-list-table th:nth-child(10),
.nation-list-table td:nth-child(10) { width:220px !important; min-width:220px !important; }
.nation-list-table th:nth-child(11),
.nation-list-table td:nth-child(11) { width:52px !important; min-width:52px !important; }
.nation-list-table th:nth-child(12),
.nation-list-table td:nth-child(12) { width:56px !important; min-width:56px !important; }

.nation-list-table td:nth-child(6) .nation-list-flag-cell {
  display:flex !important;
  grid-template-columns:none !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}

.nation-list-table td:nth-child(6) .nation-list-flag-preview,
.nation-list-table td:nth-child(6) .nation-list-flag-cell > span {
  flex:0 0 auto !important;
}

.nation-list-table td:nth-child(6) .nation-list-flag-input {
  flex:1 1 auto !important;
  width:100% !important;
  min-width:360px !important;
  box-sizing:border-box !important;
}