/* 게시판 「서버 이전」 (2026-10-15) — 시안 4차(r15, PO 확정) 그대로.
   ① 노트북 디자인 토큰: 값은 그대로, 걸리는 범위만 서버 이전 본문·창·창 배경(PO 261015 「서버 이전 판에만」).
      게시판 제목·판 고르기 줄은 꿀팁 화면과 같은 사이트 모양으로 둔다.
   ② 화면 규칙: 흑백 글자 위계와 가는 선, 색은 주 버튼과 시상대(월계관 금 · 메달 은·동)뿐. */

/* ① 토큰 */
#mgBody, #mgModal, #mgBk {
  --ds-n0: #FFFFFF;
  --ds-n1: #FAFBFC;
  --ds-n2: #F4F5F8;
  --ds-n3: #ECEEF4;
  --ds-n4: #DCDFE8;
  --ds-n5: #686F7E;
  --ds-n6: #666C79;
  --ds-n7: #5A5E68;
  --ds-n8: #111317;
  --ds-surface: var(--ds-n0);
  --ds-canvas: var(--ds-n1);
  --ds-sunken: var(--ds-n2);
  --ds-ink: var(--ds-n8);
  --ds-sub: var(--ds-n7);
  --ds-muted: var(--ds-n6);
  --ds-line: var(--ds-n3);
  --ds-line-strong: var(--ds-n4);
  --ds-line-control: var(--ds-n5);
  --ds-shade: 20 28 58;
  --ds-shadow-1: 0 1px 2px rgb(var(--ds-shade) / .05), 0 2px 6px -2px rgb(var(--ds-shade) / .07);
  --ds-shadow-3: 0 6px 12px -6px rgb(var(--ds-shade) / .10), 0 28px 56px -16px rgb(var(--ds-shade) / .20);
  --ds-scrim: rgb(17 19 23 / .30);
  --ds-accent: #3B5BDB;
  --ds-accent-deep: #2742B8;
  --ds-accent-soft: #EEF1FD;
  --ds-on-accent: #FFFFFF;
  --ds-focus: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-accent);
  --ds-focus-line: 2px solid var(--ds-accent);
  --ds-focus-gap: 2px;
  --ds-focus-inset: -2px;
  --ds-focus-field-inset: -1px;
  --ds-focus-field-line: 1px solid var(--ds-accent);
  --ds-focus-field-bg: var(--ds-accent-soft);
  --ds-warn-ink: #C62A2F;
  --ds-t-display: 24px;
  --ds-t-title: 19px;
  --ds-t-section: 15.5px;
  --ds-t-lead: 14px;
  --ds-w-regular: 400;
  --ds-w-medium: 500;
  --ds-w-strong: 600;
  --ds-w-bold: 700;
  --ds-ls-title: -.02em;
  --ds-ls-section: -.015em;
  --ds-ls-lead: -.008em;
  --ds-ls-body: 0;
  --ds-lh-tight: 1.25;
  --ds-lh-heading: 1.35;
  --ds-lh-body: 1.62;
  --ds-lh-flat: 1.4;
  --ds-r-sm: 8px;
  --ds-r-md: 10px;
  --ds-r-lg: 14px;
  --ds-r-pill: 999px;
  --ds-s1: 4px;
  --ds-s2: 6px;
  --ds-s3: 8px;
  --ds-s4: 12px;
  --ds-s5: 16px;
  --ds-s6: 20px;
  --ds-s7: 24px;
  --ds-s8: 32px;
  --ds-pad-card: var(--ds-s6);
  --ds-pad-modal: var(--ds-s7);
  --ds-gap-card: var(--ds-s5);
  --ds-gap-section: var(--ds-s7);
  --ds-hit: 44px;
  --ds-h-lg: 44px;
  --ds-ease: cubic-bezier(.22,1,.36,1);
  --ds-dur-1: 120ms;
  --ds-dur-2: 200ms;
  --ds-dvh: 100vh;
  --ds-live-silver: #5C6570;
}
@supports (height:100dvh) {
  #mgBody, #mgModal, #mgBk { --ds-dvh: 100dvh; }
}
/* 추출 블록 끝. 아래는 이름 연결과 토큰 계산만 둡니다. */
#mgBody, #mgModal, #mgBk {
  --sp-1: var(--ds-s1);
  --sp-2: var(--ds-s3);
  --sp-3: var(--ds-s4);
  --sp-4: var(--ds-s5);
  --sp-5: var(--ds-s6);
  --sp-6: var(--ds-s7);
  --sp-7: var(--ds-s8);
  --sp-8: calc(var(--ds-s6) * 2);
  --sp-9: calc(var(--ds-s7) * 2);
  --sp-10: calc(var(--ds-s8) * 2);
  --fs-10: var(--ds-t-lead);
  --fs-11: var(--ds-t-lead);
  --fs-12: var(--ds-t-lead);
  --fs-13: var(--ds-t-lead);
  --fs-14: var(--ds-t-lead);
  --fs-15: var(--ds-t-section);
  --fs-17: var(--ds-t-section);
  --fs-18: var(--ds-t-title);
  --fs-20: var(--ds-t-title);
  --fs-24: var(--ds-t-display);
  --fs-min-body: var(--ds-t-lead);
  --fs-min-meta: var(--ds-t-lead);
  --fw-400: var(--ds-w-regular);
  --fw-500: var(--ds-w-medium);
  --fw-600: var(--ds-w-strong);
  --fw-700: var(--ds-w-bold);
  --fw-800: var(--ds-w-bold);
  --r-6: var(--ds-r-sm);
  --r-8: var(--ds-r-sm);
  --r-10: var(--ds-r-md);
  --r-12: var(--ds-r-md);
  --r-16: var(--ds-r-lg);
  --r-20: var(--ds-r-lg);
  --r-24: var(--ds-r-lg);
  --r-pill: var(--ds-r-pill);
  --ctl-h-sm: var(--ds-h-lg);
  --ctl-h: var(--ds-h-lg);
  --ctl-h-lg: var(--ds-h-lg);
  --touch-min: var(--ds-hit);
  --seg-h: var(--ctl-h-lg);
  --seg-pad: var(--ds-s1);
  --seg-pad-sm: var(--ds-s1);
  --sh-1: var(--ds-shadow-1);
  --sh-2: var(--ds-shadow-3);
  --ring-focus: var(--ds-focus);
  --ring-sel: var(--ds-focus);
  --lh-1: var(--ds-lh-tight);
  --lh-tight: var(--ds-lh-heading);
  --lh-body: var(--ds-lh-body);
  --lh-loose: var(--ds-lh-body);
  --ls-tight: var(--ds-ls-title);
  --ls-title: var(--ds-ls-title);
  --ls-0: var(--ds-ls-body);
  --dur-1: var(--ds-dur-1);
  --dur-2: var(--ds-dur-2);
  --ease: var(--ds-ease);
  --m4-control-line: var(--line);
  --m4-silver: var(--sub);
  --m4-modal-radius: calc(var(--ds-r-lg) + var(--ds-s1));
}
:root:not([data-theme="dark"]) :is(#mgBody, #mgModal, #mgBk) {
  --ink: var(--ds-ink);
  --sub: var(--ds-sub);
  --sub-2: var(--ds-muted);
  --line: var(--ds-line);
  --tint: var(--ds-sunken);
  --soft: var(--ds-canvas);
  --bg: var(--ds-canvas);
  --card: var(--ds-surface);
  --blue: var(--ds-accent);
  --blue7: var(--ds-accent);
  --blue8: var(--ds-accent-deep);
  --pick-bg: var(--ds-accent);
  --pick-hover-bg: var(--ds-accent-deep);
  --pick-fg: var(--ds-on-accent);
  --sel: var(--ds-accent-soft);
  --selection-bg: var(--ds-sunken);
  --selection-fg: var(--ds-ink);
  --selection-line: var(--ds-accent);
  --dot-line: var(--ds-line-strong);
  --sep: var(--ds-line-control);
  --st-alert-fg: var(--ds-warn-ink);
  --st-alert-bg: var(--ds-sunken);
  --st-alert-line: var(--ds-line-strong);
  --toast-bg: var(--ds-ink);
  --toast-fg: var(--ds-surface);
  --toast-line: var(--ds-ink);
  --hd-bg: var(--ds-surface);
  --backdrop: var(--ds-scrim);
  --seg-on: var(--ds-surface);
  --m4-control-line: var(--ds-line-control);
  --m4-silver: var(--ds-live-silver);
}
/* 다크의 라이브 색을 유지하며 공통 초점 부품만 현재 테마에 연결합니다. */
:root[data-theme="dark"] :is(#mgBody, #mgModal, #mgBk) {
  --ds-accent: var(--blue7);
  --ds-surface: var(--card);
  --ds-focus-field-bg: var(--soft);
}

/* ② 화면 */
#viewMigrate .m4,#mgModalBody.m4{color:var(--ink);font-size:var(--fs-15);line-height:var(--lh-body)}
.m4 *{box-sizing:border-box}
:where(.m4) :where(h3,h4,p,ol,ul,dl,dd,figure){margin:0;padding:0}
:where(.m4) :where(ol,ul){list-style:none}
.m4-sub{color:var(--sub);font-size:var(--fs-14)}
.m4 .nw{white-space:nowrap}

/* 버튼 — 보이는 높이 48·40, 입력 사각형 44 이상 */
.m4-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--ctl-h-lg);padding:0 var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-12);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-15);font-weight:var(--fw-600);
  line-height:var(--lh-tight);cursor:pointer;transition:background var(--dur-1)}
.m4-btn:hover{background:var(--soft)}
.m4-btn.pri{background:var(--pick-bg);border-color:var(--pick-bg);color:var(--pick-fg)}
.m4-btn.pri:hover{background:var(--pick-hover-bg);border-color:var(--pick-hover-bg)}
.m4-btn.sm{min-height:var(--ctl-h);padding:0 var(--sp-4);font-size:var(--fs-14);border-radius:var(--r-8)}
.m4-btn.sm::after{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.m4-btn.wide{width:100%}
.m4-btn:focus-visible,.m4-row:focus-visible,.m4-pod:focus-visible,.m4-face:focus-visible{outline:none;box-shadow:var(--ring-focus)}

.m4-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-8)}
@media (min-width:1081px){.m4-cta{max-width:520px}}

/* 구역 머리 */
.m4-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.m4-h h3{font-size:var(--fs-20);font-weight:var(--fw-700);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.m4-h h4{font-size:var(--fs-17);font-weight:var(--fw-700);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.m4-sec+.m4-sec{margin-top:var(--sp-9)}

/* ── 서버 랭킹: 세 가지 순서 + 시상대 ── */
.m4-rank .seg{margin-bottom:var(--sp-6)}
@media (min-width:561px){.m4-rank .seg{max-width:480px}}
.m4-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--sp-2)}
@media (min-width:1081px){.m4-rank-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:end}.m4-rows{margin-top:0;border-top:1px solid var(--line)}}
.m4-pod{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;border-radius:var(--r-12)}
.m4-pod-sv{font-size:var(--fs-18);font-weight:var(--fw-700);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.m4-pod-tribe{margin-top:2px;font-size:var(--fs-14);color:var(--sub);overflow-wrap:anywhere}
.m4-pod-val{margin-top:var(--sp-2);font-size:var(--fs-20);font-weight:var(--fw-700);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.m4-pod-base{width:100%;margin-top:var(--sp-3);border-radius:var(--r-12) var(--r-12) 0 0;background:var(--tint);display:grid;place-items:center;
  font-size:var(--fs-28);font-weight:var(--fw-700);font-variant-numeric:tabular-nums}
.m4-pod.p1 .m4-pod-base{height:96px;color:var(--gold-fg)}
.m4-pod.p2 .m4-pod-base{height:68px;color:var(--m4-silver)}
.m4-pod.p3 .m4-pod-base{height:52px;color:var(--tone-deb-fg)}
.m4-pod.p1 .m4-pod-val{font-size:var(--fs-24)}
.m4-pod:hover .m4-pod-base{background:var(--soft)}
.m4-podline{height:1px;background:var(--line)}
.m4-rows{margin-top:var(--sp-2)}
.m4-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);width:100%;min-height:56px;padding:var(--sp-2) 0;
  border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.m4-row:hover{background:var(--soft)}
.m4-row-n{font-size:var(--fs-15);font-weight:var(--fw-700);color:var(--sub);text-align:center;font-variant-numeric:tabular-nums}
.m4-row-sv{min-width:0}
.m4-row-sv b{font-size:var(--fs-17);font-weight:var(--fw-700)}
.m4-row-sv span{margin-left:var(--sp-2);font-size:var(--fs-14);color:var(--sub)}
.m4-row-v{font-size:var(--fs-17);font-weight:var(--fw-700);font-variant-numeric:tabular-nums;white-space:nowrap}
.m4-note{margin-top:var(--sp-3);font-size:var(--fs-14);color:var(--sub);line-height:var(--lh-body)}

/* ── 서버 홍보 카드 ── 색 없이 글자 위계로만 */
.m4-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
@media (min-width:720px){.m4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.m4-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.m4-card{display:flex;flex-direction:column;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-16);background:var(--card)}
.m4-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.m4-card-sv{display:block;font-size:var(--fs-20);font-weight:var(--fw-700);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.m4-card-tribe{display:block;margin-top:2px;font-size:var(--fs-15);color:var(--sub)}
.m4-card-n{flex:none;text-align:right;line-height:var(--lh-tight)}
.m4-card-n b{display:block;font-size:var(--fs-20);font-weight:var(--fw-700);font-variant-numeric:tabular-nums}
.m4-card-n span{font-size:var(--fs-14);color:var(--sub)}
.m4-card-say{margin-top:var(--sp-3);font-size:var(--fs-15);font-weight:var(--fw-500);line-height:var(--lh-body)}
.m4-facts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.m4-facts dt{font-size:var(--fs-14);color:var(--sub);line-height:var(--lh-tight);white-space:nowrap}
.m4-facts dd{margin-top:var(--sp-1);font-size:var(--fs-17);font-weight:var(--fw-700);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;white-space:nowrap}
.m4-card-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-5)}
.m4-card-acts .m4-btn{width:100%;padding:0 var(--sp-3)}
.m4-card.empty{background:var(--soft);border-style:dashed}
.m4-mine{display:inline-flex;align-items:center;height:24px;padding:0 var(--sp-2);border-radius:var(--r-6);border:1px solid var(--line);color:var(--ink);font-size:var(--fs-14);font-weight:var(--fw-700);white-space:nowrap;vertical-align:middle;margin-left:var(--sp-2)}

/* ── 서버 찾기 ── */
.m4-find{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-7)}
.m4-find>label{font-size:var(--fs-15);font-weight:var(--fw-700)}
.m4-find-row{display:flex;gap:var(--sp-2);max-width:420px}
.m4-find-row .m4-srv{flex:1}
.m4-err{flex-basis:100%;color:var(--st-alert-fg);font-size:var(--fs-14);font-weight:var(--fw-600)}
.m4-foot{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-14);line-height:var(--lh-loose);color:var(--sub)}

/* 서버 입력: 한국 KR / 월드 W 고르기 + 번호 */
.m4-srv{display:flex;align-items:stretch;gap:var(--sp-2);min-width:0}
.m4-reg{display:inline-grid;grid-template-columns:1fr 1fr;flex:none;padding:3px;border-radius:var(--r-12);background:var(--tint);height:var(--ctl-h-lg)}
.m4-reg button{position:relative;min-width:72px;padding:0 var(--sp-3);border:0;border-radius:var(--r-8);background:none;color:var(--sub);font:inherit;font-size:var(--fs-14);font-weight:var(--fw-700);cursor:pointer;white-space:nowrap}
.m4-reg button::after{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.m4-reg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.m4-reg button:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.m4-srv input{flex:1;min-width:0;width:100%;height:var(--ctl-h-lg);border:1px solid var(--line);border-radius:var(--r-12);padding:0 var(--sp-4);font:inherit;font-size:var(--fs-17);font-weight:var(--fw-700);background:var(--card);color:var(--ink)}
.m4-srv input:focus{outline:none;border-color:var(--blue)}
.m4-srv input::placeholder{color:var(--sub);font-weight:var(--fw-500)}


/* ── 겹창 ── */
.modal.m4-modal{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-6)}
@media (min-width:561px){.modal.m4-modal{width:480px}.modal.m4-modal.wide{width:560px}}
@media (max-width:560px){.modal.m4-modal{padding:var(--sp-5);max-height:calc(100dvh - 24px)}}
#mgModalTitle:focus{outline:none}
.m4-mhead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.m4-mhead h3{font-size:var(--fs-20)!important;font-weight:var(--fw-700)!important}
.m4-x{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--tint);color:var(--ink);cursor:pointer}
.m4-x::after{content:'';position:absolute;inset:-2px}
.m4-x svg{width:18px;height:18px}
.m4-sticky{position:sticky;bottom:calc(-1 * var(--sp-6));margin:var(--sp-6) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6));padding:var(--sp-3) var(--sp-6) var(--sp-6);background:var(--card);border-top:1px solid var(--line)}
@media (max-width:560px){.m4-sticky{bottom:calc(-1 * var(--sp-5));margin:var(--sp-6) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));padding:var(--sp-3) var(--sp-5) var(--sp-5)}}
.m4-detail{display:flex;flex-direction:column;gap:var(--sp-7)}
.m4-detail .m4-card-say{margin-top:0;font-size:var(--fs-17)}
.m4-by{margin-top:var(--sp-2);font-size:var(--fs-14);color:var(--sub)}
.m4-by button{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:var(--fw-700);cursor:pointer;position:relative}
.m4-by button::after{content:'';position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}
.m4-detail .m4-facts{margin-top:0;padding-top:var(--sp-4)}
.m4-top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.m4-top3>div{padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.m4-top3 span{display:block;font-size:var(--fs-14);color:var(--sub)}
.m4-top3 b{display:block;margin-top:var(--sp-1);font-size:var(--fs-18);font-weight:var(--fw-700);font-variant-numeric:tabular-nums}
.m4-none{padding:var(--sp-5);border-radius:var(--r-12);background:var(--soft);color:var(--sub);text-align:center}
.m4-none .m4-btn{margin-top:var(--sp-3)}

/* 신청자: 얼굴(누르면 프로필 캡처) — 무채색 첫 글자 */
.m4-face{position:relative;flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;overflow:hidden;
  background:var(--tint);color:var(--sub);font:inherit;font-size:var(--fs-17);font-weight:var(--fw-700);cursor:zoom-in}
.m4-face::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.m4-face img{width:100%;height:100%;object-fit:cover;display:block}
.m4-face.s64{width:64px;height:64px;font-size:var(--fs-24)}
.m4-face.s72{width:72px;height:72px;font-size:var(--fs-28)}
.m4-apod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--sp-2)}
.m4-apod>div{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.m4-apod .m4-face{margin-bottom:var(--sp-2)}
.m4-apod-nick{font-size:var(--fs-15);font-weight:var(--fw-700);line-height:var(--lh-tight);overflow-wrap:anywhere}
.m4-apod-from{margin-top:2px;font-size:var(--fs-14);color:var(--sub)}
.m4-apod-pow{margin-top:var(--sp-1);font-size:var(--fs-18);font-weight:var(--fw-700);font-variant-numeric:tabular-nums}
.m4-apod .m4-pod-base{margin-top:var(--sp-2);font-size:var(--fs-24)}
.m4-apod .p1 .m4-pod-base{height:72px;color:var(--gold-fg)}
.m4-apod .p2 .m4-pod-base{height:52px;color:var(--m4-silver)}
.m4-apod .p3 .m4-pod-base{height:40px;color:var(--tone-deb-fg)}
.m4-alist{margin-top:var(--sp-2)}
.m4-arow{display:grid;grid-template-columns:28px 40px minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);min-height:64px;padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
.m4-arow-n{font-size:var(--fs-15);font-weight:var(--fw-700);color:var(--sub);text-align:center;font-variant-numeric:tabular-nums}
.m4-arow-who{min-width:0}
.m4-arow-who b{font-size:var(--fs-15);font-weight:var(--fw-700);overflow-wrap:anywhere}
.m4-arow-who span:not(.m4-mine){display:block;font-size:var(--fs-14);color:var(--sub)}
.m4-arow-pow{font-size:var(--fs-17);font-weight:var(--fw-700);font-variant-numeric:tabular-nums;white-space:nowrap}
.m4-arow.mine{background:var(--selection-bg);border-radius:var(--r-8);border-bottom-color:transparent;padding-left:var(--sp-2);padding-right:var(--sp-2);margin:0 calc(-1 * var(--sp-2))}
.m4-shot{display:block;width:100%;height:auto;border-radius:var(--r-12);background:var(--soft)}
.m4-shot-note{margin-top:var(--sp-3);font-size:var(--fs-14);color:var(--sub);text-align:center}

/* 입력 칸 */
.m4-form{display:flex;flex-direction:column;gap:var(--sp-5)}
.m4-fs{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.m4-fs+.m4-fs{padding-top:var(--sp-5);border-top:1px solid var(--line)}
.m4-legend{font-size:var(--fs-17);font-weight:var(--fw-700);line-height:var(--lh-tight)}
.m4-legend small{margin-left:var(--sp-2);font-size:var(--fs-14);font-weight:var(--fw-500);color:var(--sub)}
.m4-f{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.m4-f>label,.m4-f>.m4-lab{font-size:var(--fs-15);font-weight:var(--fw-700)}
.m4-f>label small,.m4-f>.m4-lab small{margin-left:var(--sp-1);font-size:var(--fs-14);font-weight:var(--fw-500);color:var(--sub)}
.m4-in{width:100%;height:var(--ctl-h-lg);border:1px solid var(--line);border-radius:var(--r-12);padding:0 var(--sp-4);font:inherit;font-size:var(--fs-17);background:var(--card);color:var(--ink)}
.m4-in:focus{outline:none;border-color:var(--blue)}
.m4-in::placeholder{color:var(--sub)}
.m4-unit{display:flex;align-items:center;gap:var(--sp-2)}
.m4-unit span{flex:none;font-size:var(--fs-15);font-weight:var(--fw-700);color:var(--sub)}
.m4-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.m4-tri label{display:block;margin-bottom:var(--sp-1);font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--sub)}
.m4-tri .m4-in{padding:0 var(--sp-3)}
.m4-help{font-size:var(--fs-14);color:var(--sub);line-height:var(--lh-body)}
.m4-prev{font-size:var(--fs-15);font-weight:var(--fw-700);color:var(--ink)}
.m4-fixed{display:flex;align-items:center;justify-content:space-between;height:var(--ctl-h-lg);padding:0 var(--sp-4);border-radius:var(--r-12);background:var(--soft)}
.m4-fixed span{font-size:var(--fs-15);color:var(--sub)}
.m4-fixed b{font-size:var(--fs-18);font-weight:var(--fw-700)}
.m4-up{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--sp-4);align-items:center;padding:var(--sp-4);border-radius:var(--r-12);border:1px dashed var(--dot-line);background:var(--soft)}
.m4-up.done{border-style:solid;border-color:var(--ink)}
.m4-up figure{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.m4-up figure img{width:88px;height:132px;object-fit:cover;object-position:top;border-radius:var(--r-8);display:block;background:var(--card)}
.m4-up figcaption{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--sub)}
.m4-up.done figcaption{color:var(--ink)}
.m4-up-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.m4-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-2);margin-top:var(--sp-2)}
.m4-acts .m4-btn{width:100%}

/* 노트북 디자인 시스템 부품 결. 승인된 열 배치와 문구는 유지합니다. */
.m4{word-break:keep-all;overflow-wrap:break-word}
.m4-btn,.m4-btn.sm{flex:none;min-width:var(--ds-hit);height:var(--ds-h-lg);min-height:var(--ds-hit);border-radius:var(--ds-r-md);padding:0 calc(var(--ds-s4) + var(--ds-s2));font-size:var(--ds-t-lead);font-weight:var(--ds-w-strong);white-space:nowrap;color:var(--sub)}
.m4-btn.pri{color:var(--pick-fg)}
.m4-btn.sm::after{inset:0}
.m4-btn:hover{border-color:var(--dot-line);color:var(--ink)}
.m4-btn.pri:hover{color:var(--pick-fg)}
.m4-h h3,.m4-h h4,.m4-legend{font-size:var(--ds-t-title);font-weight:var(--ds-w-bold);line-height:var(--ds-lh-heading)}
.m4-pod-val,.m4-pod.p1 .m4-pod-val,.m4-card-n b{font-size:var(--ds-t-display)}
.m4-grid{gap:var(--ds-gap-card)}
.m4-card{padding:var(--ds-pad-card);border:0;border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-1)}
.m4-card.empty{border:calc(var(--ds-s1) / 4) dashed var(--dot-line);box-shadow:none}
.m4-pod-base{border-radius:var(--ds-r-md) var(--ds-r-md) 0 0}
.m4-facts dd,.m4-row-v,.m4-arow-pow{font-size:var(--ds-t-section);font-weight:var(--ds-w-strong)}
.m4-pod-tribe,.m4-apod-nick{word-break:keep-all;overflow-wrap:anywhere}
.m4-h{flex-wrap:wrap}

/* 세그 통은 가라앉은 면, 고른 칸은 흰 면입니다. */
.m4 .seg,.m4-reg{height:var(--seg-h);padding:var(--ds-s1);gap:0;border:0;border-radius:var(--ds-r-md);background:var(--tint)}
.m4 .seg>button,.m4-reg button{height:calc(var(--ctl-h-lg) - var(--ds-s1) * 2);min-height:0;border-radius:var(--ds-r-sm);font-size:var(--ds-t-lead);font-weight:var(--ds-w-medium);color:var(--sub);padding:0 var(--ds-s3)}
.m4 .seg>button.on,.m4-reg button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:var(--ds-w-strong);box-shadow:var(--ds-shadow-1)}
.m4 .seg>button::after,.m4-reg button::after{content:'';position:absolute;inset:calc(var(--ds-s1) * -1) 0}
.m4-srv{align-items:center}
.m4-srv input,.m4-in{min-height:var(--ds-hit);height:var(--ds-hit);padding:0 var(--ds-s4);border-color:var(--m4-control-line);border-radius:var(--ds-r-md);font-size:var(--ds-t-section);font-weight:var(--ds-w-strong);background:var(--card);color:var(--ink)}
.m4-f>label,.m4-f>.m4-lab,.m4-tri label,.m4-find>label{font-size:var(--ds-t-section);font-weight:var(--ds-w-strong);color:var(--sub);line-height:var(--ds-lh-flat)}
.m4-in::placeholder,.m4-srv input::placeholder{font-weight:var(--ds-w-regular)}
.m4-fixed{min-height:var(--ds-hit);background:var(--tint);border-radius:var(--ds-r-md)}
.m4-fixed b{font-size:var(--ds-t-section);font-weight:var(--ds-w-strong)}
.m4-err{color:var(--st-alert-fg)}

/* 초점은 크기를 바꾸지 않는 바깥 선, 입력 칸은 안쪽 선입니다. */
:is(.m4-btn,.m4-row,.m4-pod,.m4-face,.m4-x,.m4-by button,.m4-reg button,.m4 .seg>button):focus-visible{outline:var(--ds-focus-line);outline-offset:var(--ds-focus-gap);box-shadow:none}
:is(.m4-in,.m4-srv input):focus-visible{background:var(--ds-focus-field-bg);outline:var(--ds-focus-field-line);outline-offset:var(--ds-focus-field-inset);border-color:var(--blue7)}

/* 창은 처음부터 닫힐 때까지 자리와 크기를 고정하고 머리와 발치를 붙입니다. */
.modal.m4-modal{--m4-pad:var(--ds-pad-modal);top:calc(var(--ds-dvh) * .06);transform:translateX(-50%);height:calc(var(--ds-dvh) * .88);max-height:calc(var(--ds-dvh) * .88);padding:0;border:0;border-radius:var(--m4-modal-radius);box-shadow:var(--ds-shadow-3);scroll-padding-top:calc(var(--ds-hit) + var(--ds-s5) * 2);scroll-padding-bottom:calc(var(--ds-h-lg) + var(--ds-s4) * 2);overflow-anchor:none}
.modal.m4-modal{transition:opacity var(--dur-2),visibility var(--dur-2)}
.modal.m4-modal.show{display:flex;flex-direction:column;transform:translateX(-50%)}
.m4-mhead{position:sticky;top:0;z-index:2;flex:none;margin:0;padding:var(--ds-s5) var(--m4-pad);background:var(--card);border-bottom:calc(var(--ds-s1) / 4) solid var(--line)}
.m4-mhead h3{min-width:0;line-height:var(--ds-lh-heading);letter-spacing:var(--ds-ls-title);word-break:keep-all}
.m4-x{width:var(--ds-hit);height:var(--ds-hit);border-radius:var(--ds-r-sm);background:var(--card);border:calc(var(--ds-s1) / 4) solid var(--line)}
.m4-x::after{inset:0}
#mgModalBody{flex:1 0 auto;display:flex;flex-direction:column;padding:var(--ds-s4) var(--m4-pad) 0;min-width:0}
.m4-form{flex:1 0 auto;gap:var(--ds-gap-card)}
.m4-f,.m4-fs{flex-shrink:0}
.m4-detail{flex:1;padding-bottom:var(--ds-s5);gap:var(--ds-gap-section)}
.m4-sticky,.m4-acts{position:sticky;bottom:0;z-index:1;flex:none;display:flex;justify-content:space-between;gap:var(--ds-s2);margin:var(--ds-s5) calc(var(--m4-pad) * -1) 0;padding:var(--ds-s4) var(--m4-pad);background:var(--card);border-top:calc(var(--ds-s1) / 4) solid var(--line)}
.m4-acts{margin-top:auto}
.m4-sticky .m4-btn,.m4-acts .m4-btn{width:auto;max-width:100%}
.m4-acts-r{display:flex;gap:var(--ds-s2);margin-left:auto}
.m4-legend small{display:block;margin:var(--ds-s2) 0 0;line-height:var(--ds-lh-flat)}
.m4-modal:has(.m4-fs) #mgModalBody{background:var(--tint)}
.m4-fs{padding:var(--ds-pad-card);border:calc(var(--ds-s1) / 4) solid var(--line);border-radius:var(--ds-r-lg);background:var(--card)}
.m4-fs+.m4-fs{padding-top:var(--ds-pad-card)}
.m4-up{padding:var(--ds-s4);gap:var(--ds-s4);background:var(--soft)}
#mgModalBody>.m4-shot~div:has(>[data-act="close"]){position:sticky;bottom:0;display:flex;justify-content:flex-start;margin:auto calc(var(--m4-pad) * -1) 0!important;padding:var(--ds-s4) var(--m4-pad);background:var(--card);border-top:calc(var(--ds-s1) / 4) solid var(--line)}
#mgModalBody>.m4-shot~div>.m4-btn{width:auto}
@media (max-width:560px){
  .modal.m4-modal{--m4-pad:var(--ds-s5);left:50%;right:auto;bottom:auto;max-width:calc(100vw - var(--ds-s5) * 2);width:calc(100vw - var(--ds-s5) * 2)}
  .m4-fs{padding:var(--ds-s4)}
  .m4-fs+.m4-fs{padding-top:var(--ds-s4)}
  .m4-srv{gap:var(--ds-s2)}
  .m4-reg button{min-width:calc(var(--ds-s8) * 2);padding:0 var(--ds-s2)}
  :is(.m4-acts,.m4-sticky) .m4-btn{padding:0 var(--ds-s3)}
  .m4-tri{gap:var(--ds-s2)}
  .m4-tri .m4-in{padding:0 var(--ds-s2)}
  .m4-up{grid-template-columns:calc(var(--ds-s8) * 2) minmax(0,1fr);gap:var(--ds-s3)}
  .m4-up figure img{width:calc(var(--ds-s8) * 2);height:calc(var(--ds-s8) * 3)}
}

/* ── r10(PO 261015): 창 위쪽 닫기 없앰 · 자세히 창 구역은 카드로 구분 · 안내는 「?」 도움말 ── */
/* 자세히 창: 가라앉은 바탕 위에 구역마다 카드(입력 창의 묶음 카드와 같은 모양) */
.m4-modal:has(.m4-dcard) #mgModalBody{background:var(--tint)}
.m4-detail{gap:var(--ds-gap-card)}
.m4-dcard{padding:var(--ds-pad-card);border:calc(var(--ds-s1) / 4) solid var(--line);border-radius:var(--ds-r-lg);background:var(--card)}
.m4-dcard .m4-h{align-items:center}
.m4-dcard .m4-by{margin-bottom:0}
.m4-dcard .m4-top3>div{padding:0;border-top:0}
.m4-dcard .m4-none{background:var(--tint)}
@media (max-width:560px){.m4-dcard{padding:var(--ds-s4)}}

/* 시상대 아래 표(캡처 인증 · 내 신청)는 같은 모양 */
.m4-apod .m4-mine{margin:var(--ds-s2) 0 0}
span.m4-face{cursor:default}

/* 도움말: 이름표 옆 「?」(보이는 24, 누르는 44) + 말풍선 */
.m4-labrow{position:relative;display:flex;align-items:center;gap:var(--ds-s2);min-width:0}
.m4-labrow>label,.m4-labrow>.m4-lab{font-size:var(--ds-t-section);font-weight:var(--ds-w-strong);color:var(--sub);line-height:var(--ds-lh-flat)}
.m4-labrow>label small,.m4-labrow>.m4-lab small{margin-left:var(--sp-1);font-size:var(--fs-14);font-weight:var(--fw-500);color:var(--sub)}
.m4-legend{position:relative;display:flex;align-items:center;gap:var(--ds-s2)}
.m4-q{position:relative;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:calc(var(--ds-s1) / 4) solid var(--m4-control-line);border-radius:50%;
  background:var(--card);color:var(--sub);font:inherit;font-size:var(--fs-14);font-weight:var(--ds-w-bold);line-height:1;cursor:pointer}
.m4-q::after{content:'';position:absolute;left:50%;top:50%;width:var(--ds-hit);height:var(--ds-hit);transform:translate(-50%,-50%)}
.m4-q[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.m4-q:focus-visible{outline:var(--ds-focus-line);outline-offset:var(--ds-focus-gap)}
.m4-tip{position:absolute;left:0;top:calc(100% + var(--ds-s2));z-index:5;width:max-content;max-width:min(320px,calc(100vw - var(--ds-s8) * 2));
  padding:var(--ds-s3) var(--ds-s4);border-radius:var(--ds-r-md);background:var(--toast-bg);color:var(--toast-fg);
  font-size:var(--fs-14);font-weight:var(--ds-w-medium);line-height:var(--lh-body);letter-spacing:0;box-shadow:var(--sh-2);white-space:normal}
.m4-tip[hidden]{display:none}

/* PC: 순위 줄이 10위까지 길어져 시상대 위가 비지 않게 받침을 높인다 */
@media (min-width:1081px){
  .m4-pod.p1 .m4-pod-base{height:240px}
  .m4-pod.p2 .m4-pod-base{height:180px}
  .m4-pod.p3 .m4-pod-base{height:140px}
}

/* r11(PO 261015): 본인 인증은 캡처 두 장(프로필 + 랭킹 모험가 전투력) — 나란히 두 칸 */
.m4-caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-s3)}
.m4-caps .m4-up{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;text-align:center;gap:var(--ds-s2);padding:var(--ds-s4) var(--ds-s3)}
.m4-up-k{font-size:var(--fs-14);font-weight:var(--ds-w-strong);color:var(--ink)}
.m4-caps .m4-err{text-align:center}
.m4-capview{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-s4)}
.m4-capview figure{display:flex;flex-direction:column;gap:var(--ds-s2);min-width:0}
.m4-capview figure[hidden]{display:none}
#mgModalBody>.m4-capview~.m4-sticky{margin-top:auto}
/* PO 261020 「한 장씩 꽉차게 · 칩으로 전환」: 나란히 두 칸 대신 한 장씩 창 폭을 채우고 칩으로 바꾼다.
   칩 줄은 창 머리 밑에 붙는다. 바탕 위 여백을 칩 줄이 품어 맨 위에서도 붙은 자리와 같은 높이 → 눌러도 칩이 안 움직인다 */
.m4-captabs{position:sticky;top:var(--m4-head-h,0px);z-index:1;flex:none;margin:calc(var(--ds-s4) * -1) calc(var(--m4-pad) * -1) var(--ds-s4);padding:var(--ds-s4) var(--m4-pad);background:var(--mg-surface);border-bottom:calc(var(--ds-s1) / 4) solid var(--line)}
.m4-captabs .seg{width:100%;background:var(--mg-well)}   /* 칩 줄 = 판의 서버 랭킹 칩과 같은 모양(흰 바탕 · 회색 홈 · 흰 칩) */

/* r12(PO 261015): 모험가 전투력 랭킹 1·2·3위 = 닉네임 + 전투력, 순위 칸마다 본인 인증 */
.m4-fact-sub{display:block;margin-top:2px;font-size:var(--fs-14);font-weight:var(--ds-w-medium);color:var(--sub);letter-spacing:0}
.m4-slots{display:flex;flex-direction:column}
.m4-slot{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:var(--ds-s3);min-height:64px;padding:var(--ds-s2) 0;border-bottom:calc(var(--ds-s1) / 4) solid var(--line)}
.m4-slot:last-child{border-bottom:0}
.m4-slot-n{font-size:var(--ds-t-section);font-weight:var(--ds-w-bold);color:var(--sub);font-variant-numeric:tabular-nums}
.m4-slot-who{min-width:0}
.m4-slot-who b{font-size:var(--ds-t-section);font-weight:var(--ds-w-bold);overflow-wrap:anywhere}
.m4-slot-who>span:not(.m4-mine){display:block;margin-top:2px;font-size:var(--fs-14);color:var(--sub);font-variant-numeric:tabular-nums}
.m4-slotin{display:flex;flex-direction:column;gap:var(--ds-s2)}
.m4-slotin-row{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,112px);gap:var(--ds-s2);align-items:center}
.m4-slotin-n{font-size:var(--fs-14);font-weight:var(--ds-w-strong);color:var(--sub)}
.m4-reg.m4-my{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.m4-reg.m4-my button{min-width:0}

/* r13(PO 261015): 티오의 탑·원시왕도 캡처로 인증 — 값 아래 가로형 캡처 칸(자세히 창의 「인증 캡처」 줄은 261018 「티오의 탑 · 원시왕」 카드 줄로 바뀌었다) */
.m4-up.m4-up-wide .m4-up-body{align-items:flex-start;text-align:left}
/* 캡처 한 장 보기도 본인 인증 캡처와 같은 폭(창 폭을 꽉 채움, PO 261020) — 옛 400px 상한은 없앴다 */

/* r14(PO 261015): 1위 전투력 탭은 서버 1위 유저 닉네임을 부족 이름 자리에 — 사람 이름이라 글자색을 본문색으로 */
.m4-pod-tribe.nick{color:var(--ink);font-size:var(--ds-t-section);font-weight:var(--ds-w-strong)}
.m4-row-sv span.nick{color:var(--ink);font-size:var(--ds-t-section);font-weight:var(--ds-w-strong)}

/* r15(PO 261015 "8번 월계관 좋다"): 시상대 = 월계관 1위 + 2·3위 은·동 메달 줄 + 4위부터 줄 — 서버 랭킹과 신청한 사람 공통 */
.m4-hero{display:flex;flex-direction:column;align-items:center;width:100%;padding:var(--sp-2) var(--sp-2) var(--sp-6);border:0;border-radius:var(--ds-r-lg);background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
button.m4-hero:hover{background:var(--soft)}
.m4-hero:focus-visible{outline:var(--ds-focus-line);outline-offset:var(--ds-focus-gap)}
.m4-hero-static{cursor:default;padding-bottom:var(--sp-5)}
.m4-laurel{position:relative;width:150px;height:118px;display:grid;place-items:center;color:var(--gold-band-1)}
.m4-laurel-svg{position:absolute;inset:0;width:100%;height:100%}
.m4-hero-av,.m4-face.s84{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--gold-bg);color:var(--gold-fg);font-size:var(--fs-32);font-weight:var(--ds-w-bold);box-shadow:0 0 0 3px var(--gold-line)}
.m4-hero-pill{margin:var(--sp-2) 0;padding:2px var(--sp-3);border-radius:var(--r-pill);background:var(--gold-bg);color:var(--gold-fg);font-size:var(--fs-14);font-weight:var(--ds-w-bold)}
.m4-hero-name{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-1) var(--sp-2);font-size:var(--fs-20);font-weight:var(--ds-w-bold);line-height:var(--lh-tight);overflow-wrap:anywhere}
.m4-hero-name .m4-mine{margin-left:0}
.m4-hero-sv{margin-top:2px;font-size:var(--fs-14);color:var(--sub)}
.m4-hero-val{margin-top:var(--sp-1);font-size:var(--fs-24);font-weight:var(--ds-w-bold);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight)}
.m4-row.r2,.m4-arow.r2{--c:var(--m4-silver)}
.m4-row.r3,.m4-arow.r3{--c:var(--tone-deb-fg)}
.m4-medal{display:block;width:24px;height:32px;margin:0 auto;color:var(--c)}
.m4-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.m4-row-n,.m4-arow-n{position:relative}
.m4-rows{border-top:1px solid var(--line)}
.m4-alist{border-top:1px solid var(--line);margin-top:0}
@media (min-width:1081px){.m4-rank-body{align-items:center}}
/* PC: 월계관 1위를 목록 높이만큼의 카드 위에, 조금 크게 */
@media (min-width:1081px){
  .m4-rank-body{align-items:stretch}
  .m4-rank-body>div:first-child{display:flex}
  .m4-rank .m4-hero{justify-content:center;background:var(--card);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-1)}
  .m4-rank button.m4-hero:hover{background:var(--soft)}
  .m4-rank .m4-laurel{width:200px;height:158px}
  .m4-rank .m4-hero-av{width:112px;height:112px;font-size:var(--fs-40)}
  .m4-rank .m4-hero-name{font-size:var(--fs-24)}
  .m4-rank .m4-hero-val{font-size:var(--fs-32)}
}

/* 운영: 불러오는 중 · 못 불러옴 · 보내는 중 · 저장 버튼 위 오류 */
.m4-state{margin-top:var(--sp-5)}
.m4-state .m4-btn{margin-top:var(--sp-3)}
.m4-btn[disabled]{cursor:progress}
.m4-form-err{flex:none;text-align:right}
.m4-shot{min-height:160px}

/* ③ 구분감(PO 261015 "전체적으로 구분감이 너무 없는데? 카드색이랑 배경색이 너무 비슷해" → 비교 A안):
   판 아래를 회색으로 깔고 랭킹·홍보 카드·서버 찾기·빈 판 안내를 흰 카드로 띄운다. 자세히 창·입력 창도 같은 방식.
   어두운 화면은 바탕을 더 어둡게 할 단계가 없어 카드에 진한 테두리를 둘러 나눈다. */
#mgBody,#mgModal{--mg-canvas:var(--ds-n3);--mg-surface:var(--ds-surface);--mg-edge:1px solid transparent;--mg-lift:var(--ds-shadow-1);--mg-inline:var(--ds-n3);--mg-well:var(--ds-n2)}
:root[data-theme="dark"] :is(#mgBody,#mgModal){--mg-canvas:var(--bg);--mg-surface:var(--card);--mg-edge:1px solid var(--dot-line);--mg-lift:none;--mg-inline:var(--line);--mg-well:var(--tint)}
#mgBody{background:var(--mg-canvas);box-shadow:0 0 0 100vmax var(--mg-canvas);clip-path:inset(0 -100vmax);padding:var(--ds-s1) 0 var(--ds-s8)}
#mgBody :is(.m4-card,.m4-rank-body,.m4-none,.m4-find){background:var(--mg-surface);border:var(--mg-edge);box-shadow:var(--mg-lift);border-radius:var(--ds-r-lg)}
#mgBody .m4-card.empty{border-style:dashed;border-color:var(--dot-line);box-shadow:none}
#mgBody .m4-rank-body{padding:var(--ds-s2) var(--ds-s5) var(--ds-s3)}
#mgBody .m4-find{padding:var(--ds-s5);margin-top:var(--ds-s6)}
#mgBody .m4-rank .m4-hero{background:none;box-shadow:none}
#mgBody .m4-rows{border-top:0}
#mgBody .m4-row{border-bottom-color:var(--mg-inline)}
#mgBody .m4-row:last-child{border-bottom:0}
#mgBody .m4-facts{border-top-color:var(--mg-inline)}
#mgBody :is(.m4-reg,.m4 .seg){background:var(--mg-well)}
@media (min-width:1081px){#mgBody .m4-rank-body{padding:var(--ds-s5)}#mgBody .m4-rows{border-left:1px solid var(--mg-inline);padding-left:var(--ds-s6)}}
#mgModal.m4-modal #mgModalBody{background:var(--mg-canvas)}
#mgModal :is(.m4-dcard,.m4-fs){background:var(--mg-surface);border:var(--mg-edge);box-shadow:var(--mg-lift)}
#mgModal :is(.m4-reg,.m4-fixed){background:var(--mg-well)}
#mgModal :is(.m4-slot,.m4-arow){border-bottom-color:var(--mg-inline)}
#mgModal :is(.m4-alist,.m4-facts){border-top-color:var(--mg-inline)}

/* 부족 3개까지(PO 261016 「서버당 부족 3개까지 등재가능」): 입력 창은 부족마다 한 묶음(이름 · 티오의 탑 · 탑 캡처),
   둘째·셋째는 「부족 더하기」로 연다. 부족이 하나면 「부족 1」 머리를 숨겨 예전 모양 그대로. 자세히 창은 「티오의 탑 · 원시왕」 카드에 부족마다 한 줄(261018) */
.m4-tribes,.m4-tribe{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.m4-tribe+.m4-tribe{padding-top:var(--sp-4);border-top:1px solid var(--mg-inline,var(--line))}
.m4-tribe-h{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-s2);min-height:var(--ds-hit)}
.m4-tribe-h b{font-size:var(--ds-t-section);font-weight:var(--ds-w-bold)}
.m4-tribe-add{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-s2)}
:is(.m4-tribe,.m4-tribe-h,.m4-tribe-add)[hidden]{display:none}
.m4-trow{grid-template-columns:minmax(0,1fr) auto}

/* 인증 고치기(PO 261018 「투력인증 수정 기능」 · 티오의 탑 · 원시왕 참여도): 인증된 줄은 「인증 보기」 + 「수정」 두 버튼.
   좁은 화면은 두 버튼을 위아래로 쌓아(폭을 맞춰) 이름 칸을 넓게 둔다. 자세히 창의 「티오의 탑 · 원시왕」 카드도 순위 카드와 같은 줄 모양 */
.m4-row-acts{display:flex;align-items:center;gap:var(--ds-s2)}
@media (max-width:560px){.m4-row-acts{flex-direction:column;align-items:stretch}}

/* 신청 명단은 홍보를 올린 사람만(PO 261022 「서버 홍보게시한 사람만 볼수있는권한」): 판 위 안내는 신청 · 홍보 버튼 아래 한 줄,
   신청 창 맨 위는 옅은 칸 한 줄, 자세히 창 「신청한 사람」 카드는 신청 수 · 합계 + 안내 + 홍보 비밀번호 칸 */
.m4-cta-note{grid-column:1/-1;margin-top:0}
.m4-private{padding:var(--ds-s3) var(--ds-s4);border-radius:var(--ds-r-md);background:var(--mg-surface,var(--card));border:var(--mg-edge,1px solid var(--line));box-shadow:var(--mg-lift,none);color:var(--ink);font-size:var(--fs-15);line-height:var(--lh-body)}
.m4-lock{display:flex;flex-direction:column;align-items:center;gap:var(--ds-s4)}
.m4-lock-f{display:flex;flex-direction:column;gap:var(--ds-s2);width:100%;max-width:340px;text-align:left}
.m4-lock-f>label{font-size:var(--ds-t-section);font-weight:var(--ds-w-strong);color:var(--sub);line-height:var(--ds-lh-flat)}
.m4-lock-row{display:flex;gap:var(--ds-s2)}
.m4-lock-row .m4-in{flex:1;min-width:0}
.m4-lock .m4-btn{margin-top:0}
/* 공개 범위(PO 261022 「공개를 하고싶은 사람도 있잖아」): 「홍보 올린 분만 · 모두에게」 두 칸을 폭에 맞춰. 공개 신청 줄 아래 잠금 칸은 한 칸 띄운다 */
.m4-reg.m4-pub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.m4-reg.m4-pub button{min-width:0}
.m4-alist+.m4-lock{margin-top:var(--ds-s4)}
.m4-arow.r1{--c:var(--gold-band-1)}   /* 공개 신청만 보일 때는 1위도 목록 줄에 선다(월계관과 같은 금색) */