:root{
  --navy:#2d3a5e; --navy-2:#3a4a73; --navy-line:#4a5a85;
  --ink:#1e2330; --muted:#6b7280; --line:#e6e8ef; --bg:#f6f7fb; --card:#fff;
  --a1:#e8c06a; --a2:#7fa6e8; --a3:#e88b8b;
  --leg1:#7fa6e8; --leg2:#e8a86a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%;
}
code{background:rgba(0,0,0,.06); padding:1px 5px; border-radius:5px; font-size:12px; font-family:ui-monospace,Menlo,monospace}

/* 상단바 */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; padding-top:max(14px, env(safe-area-inset-top));
  background:linear-gradient(180deg,#34426b,#2d3a5e); color:#fff;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo{display:inline-flex; gap:3px; align-items:flex-end; height:26px}
.logo i{display:block; width:5px; border-radius:3px}
.logo i:nth-child(1){background:var(--a1); height:18px}
.logo i:nth-child(2){background:var(--a2); height:26px}
.logo i:nth-child(3){background:var(--a3); height:22px}
.logo.big{height:40px} .logo.big i{width:8px}
.logo.big i:nth-child(1){height:27px}.logo.big i:nth-child(2){height:40px}.logo.big i:nth-child(3){height:33px}
.brand h1{font-size:18px; margin:0; font-weight:700; letter-spacing:-0.3px}
.brand .sub{margin:2px 0 0; font-size:12px; color:#c2cbe2}
.ghost-btn{color:#c2cbe2; text-decoration:none; font-size:13px; border:1px solid var(--navy-line); padding:6px 11px; border-radius:8px}
.ghost-btn:active{background:var(--navy-2)}

main{padding:14px 16px 28px}

/* 공개 - 준비중 */
.prep{text-align:center; padding:56px 20px; color:var(--muted)}
.prep-emoji{font-size:40px}
.prep h2{margin:14px 0 6px; color:var(--ink); font-size:20px}
.prep p{margin:0; font-size:14px}

/* 공개 - 군단 섹션 */
.legion{margin-bottom:20px}
.legion-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:12px 12px 0 0; color:#fff;
}
.legion-head.leg1{background:linear-gradient(135deg,#5b86d6,#3f63b0)}
.legion-head.leg2{background:linear-gradient(135deg,#d68f56,#b06b3f)}
.legion-head h2{margin:0; font-size:17px}
.legion-head .time{margin:3px 0 0; font-size:12px; opacity:.92}
.lcount{font-size:13px; background:rgba(255,255,255,.22); padding:4px 10px; border-radius:20px}

.rolebar{display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; background:#eef1f8; border-left:1px solid var(--line); border-right:1px solid var(--line)}
.rb{font-size:12px; font-weight:600; color:#fff; padding:3px 9px; border-radius:14px}
.rb-0{background:#e0564f}.rb-1{background:#4f7fe0}.rb-2{background:#3fae9a}.rb-3{background:#e0a23f}.rb-4{background:#9a6fd6}.rb-5{background:#9aa3b2}

/* 테이블 공통 */
.table-wrap{background:var(--card); border:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch}
.legion .table-wrap{border-radius:0 0 12px 12px; border-top:none}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:560px}
thead th{text-align:left; font-weight:600; font-size:12px; color:var(--muted); padding:10px 11px; border-bottom:1px solid var(--line); white-space:nowrap; background:#fafbfe}
tbody td{padding:9px 11px; border-bottom:1px solid #f1f3f8; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.nick{font-weight:600}
.num{font-variant-numeric:tabular-nums; color:#374151}
.rk{color:var(--muted); font-variant-numeric:tabular-nums; width:30px}
.score{font-weight:600; color:#2d3a5e}
.lane{color:#4b5563}
.rank{display:inline-block; min-width:26px; text-align:center; font-size:12px; font-weight:600; color:#3a4a73; background:#eef1fa; border:1px solid #dde3f3; border-radius:6px; padding:1px 6px}
.empty{background:var(--card); border:1px dashed #d8b6b6; color:#9a5b5b; border-radius:0 0 12px 12px; padding:18px; font-size:14px; text-align:center}

/* 역할 뱃지 */
.role{display:inline-block; font-size:12px; font-weight:600; color:#fff; padding:2px 9px; border-radius:13px}
.role--공격{background:#e0564f}
.role--수비1{background:#4f7fe0}
.role--수비2{background:#3fae9a}
.role--유격{background:#e0a23f}
.role--콜러{background:#9a6fd6}
.role--대기{background:#9aa3b2}

/* 카드(관리자) */
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; box-shadow:0 1px 2px rgba(20,30,60,.04)}
.card.pad0{padding:0; overflow:hidden}
.card-title{font-weight:700; font-size:15px; margin-bottom:10px}
.setrow{display:flex; gap:14px; align-items:flex-start; padding:10px 0; border-top:1px solid #f1f3f8; flex-wrap:wrap}
.setrow:first-of-type{border-top:none}
.setrow.tight{align-items:center; justify-content:space-between}
.setlabel{font-size:13px; color:var(--muted); min-width:72px; padding-top:6px}
.slider-box{flex:1; min-width:200px}
.slider-box input[type=range]{width:100%; accent-color:#4f7fe0}
.slider-val{font-size:13px; color:#374151; margin-top:4px}
.slider-val strong{color:#2d3a5e}
.counts{display:flex; flex-wrap:wrap; gap:10px}
.cnt{display:flex; flex-direction:column; gap:3px}
.cnt label{font-size:11px; color:var(--muted); text-align:center}
.cnt input{width:60px; padding:6px; border:1px solid var(--line); border-radius:8px; font-size:14px; text-align:center}
.chk{font-size:14px; display:flex; align-items:center; gap:7px}
.chk input{width:17px; height:17px; accent-color:#3fae9a}
.legion-counts{font-size:13px; color:var(--muted)}
.legion-counts strong{color:var(--ink)}

.btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn{appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:14px; font-weight:600; padding:10px 16px; border-radius:10px; cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#2d3a5e; color:#fff; border-color:#2d3a5e}
.btn.wide{flex:1}
.hint{font-size:12px; color:var(--muted); margin:10px 0 0; line-height:1.55}

/* 관리자 테이블 */
.table-wrap.admin table{min-width:680px}
.sel{padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#fff; max-width:110px}
.sel-lg{min-width:78px}
.lg1-row{box-shadow:inset 3px 0 0 var(--leg1)}
.lg2-row{box-shadow:inset 3px 0 0 var(--leg2)}
.none-row td{color:#9aa3b2}
.none-row .nick{color:#6b7280}

.sticky-save{position:sticky; bottom:0; padding:12px 16px; background:linear-gradient(180deg,rgba(246,247,251,0),var(--bg) 40%); margin:0 -16px}

/* 로그인 */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 26px; width:100%; max-width:340px; text-align:center; box-shadow:0 4px 20px rgba(30,40,80,.08)}
.login-card h1{font-size:18px; margin:14px 0 18px}
.login-card form{display:flex; flex-direction:column; gap:10px}
.login-card input{padding:12px; border:1px solid var(--line); border-radius:10px; font-size:15px}
.login-card button{padding:12px; border:none; border-radius:10px; background:#2d3a5e; color:#fff; font-size:15px; font-weight:600; cursor:pointer}
.login-note{font-size:13px; border-radius:10px; padding:11px 13px; margin-bottom:14px; line-height:1.5; text-align:left}
.login-note.warn{background:#fff7e6; border:1px solid #f0dca8; color:#7a5b16}
.login-note.err{background:#fdeaea; border:1px solid #f3c9c9; color:#a23a3a}
.login-back{display:inline-block; margin-top:16px; color:var(--muted); font-size:13px; text-decoration:none}

footer{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:14px 16px; padding-bottom:max(14px, env(safe-area-inset-bottom)); color:var(--muted); font-size:12px; border-top:1px solid var(--line)}
@media (max-width:520px){ .brand h1{font-size:16px} }

/* 공개 토글 카드 */
.pub-card{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px}
.pub-card.on{border-color:#bfe3d8; background:#f2fbf8}
.pub-state{font-weight:700; font-size:15px}
.pub-sub{font-size:12px; color:var(--muted); margin-top:2px}

/* ===== 다국어 선택 ===== */
.head-right{display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end}
.lang-sel{background:var(--navy-2); color:#fff; border:1px solid var(--navy-line); border-radius:8px; padding:6px 8px; font-size:13px; max-width:38vw}
.lang-sel.dark{background:#eef1fa; color:#2d3a5e; border-color:#dde3f3}
.login-lang{display:flex; justify-content:flex-end; margin-bottom:6px}

/* ===== 공개: 멤버 카드 리스트 ===== */
.mlist{background:var(--card); border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; overflow:hidden}
.mrow{display:flex; align-items:center; gap:12px; padding:11px 13px; border-bottom:1px solid #f1f3f8}
.mrow:last-child{border-bottom:none}
.mrank{flex:0 0 auto; min-width:24px; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; font-size:13px}
.minfo{min-width:0; flex:1}
.mline1{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.mnick{font-weight:700; font-size:15px}
.rank.sm{min-width:24px; font-size:11px; padding:1px 6px}
.lane-badge{font-size:11px; font-weight:600; color:#4b5563; background:#eef1f6; border:1px solid #e1e6ef; border-radius:11px; padding:2px 8px}
.mline2{font-size:12px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums}
.rb b{font-weight:700}

/* ===== 관리자: 멤버 카드 리스트 ===== */
.alist{display:flex; flex-direction:column}
.acard{padding:12px 13px; border-bottom:1px solid #f1f3f8}
.acard:last-child{border-bottom:none}
.acard-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.acard .ascore{margin-left:auto; font-size:12px; color:#2d3a5e; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.acard-pow{font-size:12px; color:var(--muted); margin:4px 0 9px; font-variant-numeric:tabular-nums}
.acard-sel{display:flex; gap:8px; flex-wrap:wrap}
.acard-sel .sel{flex:1 1 30%; min-width:92px; max-width:none}
.lg1-row{box-shadow:inset 4px 0 0 var(--leg1)}
.lg2-row{box-shadow:inset 4px 0 0 var(--leg2)}
.none-row{opacity:.78}

/* ===== 작전 보드 ===== */
.board{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:18px; box-shadow:0 1px 2px rgba(20,30,60,.04)}
.board-h{font-weight:800; font-size:16px; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.board-h::before{content:"🗺️"}
.zonemap{display:block; width:100%; max-width:330px; height:auto; margin:2px auto 0}
.zone-sub{text-align:center; font-size:12px; color:var(--muted); margin:2px 0 14px}
.ladder{display:flex; flex-direction:column; align-items:stretch}
.lnode{background:#fafbfe; border:1px solid var(--line); border-left:4px solid #9aa3b2; border-radius:10px; padding:9px 12px; font-size:13px; font-weight:600; color:#374151}
.lnode.hq{border-left-color:#9a6fd6}
.lnode.outpost{border-left-color:#9aa3b2}
.lnode.garrison{border-left-color:#4f7fe0}
.lnode.gateway{border-left-color:#3fae9a}
.lnode.temple{border-left-color:#e0564f; background:#fff6f5}
.larrow{align-self:center; color:#c2c8d4; font-size:13px; line-height:1; padding:3px 0}
.board-sub{font-weight:700; font-size:14px; margin:16px 0 8px}
.phases{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; counter-reset:ph}
.phases li{position:relative; padding:8px 10px 8px 34px; background:#f6f7fb; border-radius:9px; font-size:13px; line-height:1.45}
.phases li::before{counter-increment:ph; content:counter(ph); position:absolute; left:8px; top:7px; width:19px; height:19px; background:#2d3a5e; color:#fff; border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center}
.howto{display:flex; flex-direction:column; gap:8px}
.hcard{display:flex; gap:9px; align-items:flex-start; background:#fafbfe; border:1px solid var(--line); border-radius:9px; padding:9px 11px}
.hcard .role{flex:0 0 auto; margin-top:1px}
.hcard p{margin:0; font-size:13px; line-height:1.45; color:#374151}
.tips{font-size:12.5px; color:#4b5563; line-height:1.55; background:#fff7e6; border:1px solid #f0dca8; border-radius:9px; padding:9px 11px; margin:0}
.board-note{font-size:12px; color:var(--muted); margin:12px 0 0; text-align:center; font-style:italic}
.prep-mini{background:var(--card); border:1px dashed #cbd2e0; color:var(--muted); border-radius:12px; padding:16px; text-align:center; font-size:14px}

/* ================= 반응형: PC / 모바일 분리 ================= */
.topbar{display:block}
.topbar-in{max-width:1080px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px}
main{max-width:1080px; margin-left:auto; margin-right:auto; width:100%}
footer{max-width:1080px; margin-left:auto; margin-right:auto; width:100%}

/* 명단 컨테이너: 테두리를 wrap 으로 이동 */
.roster-wrap{background:var(--card); border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; overflow:hidden}
.mlist{border:none; border-radius:0}
.roster-table{display:none; width:100%; border-collapse:collapse; font-size:14px}
.roster-table thead th{text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:10px 12px; background:#fafbfe; border-bottom:1px solid var(--line); white-space:nowrap}
.roster-table tbody td{padding:9px 12px; border-bottom:1px solid #f1f3f8; white-space:nowrap; vertical-align:middle}
.roster-table tbody tr:last-child td{border-bottom:none}
.roster-table tbody tr:nth-child(even){background:#fcfdff}
.roster-table .rk{color:var(--muted); width:36px; text-align:center; font-variant-numeric:tabular-nums}

/* 관리자 카드: 모바일은 한 장씩, 카드 테두리 일원화 */
.acard{border:1px solid var(--line); border-radius:10px}
.acard:last-child{border-bottom:1px solid var(--line)}
.alist{display:flex; flex-direction:column; gap:8px; padding:12px}

/* PC (≥760px) */
@media (min-width:760px){
  .mlist{display:none}
  .roster-table{display:table}
  .board-grid{display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start}
  .howto{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .alist{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .hint{max-width:none}
}
@media (min-width:1040px){
  .board-grid{grid-template-columns:340px 1fr}
}

/* 회차 관리 카드 */
.round-card{background:#f4f6fc; border:1px solid #d7def0; border-radius:14px; padding:12px 14px; margin-bottom:14px}
.round-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.round-now{font-weight:800; color:#2d3a5e; display:flex; align-items:center; gap:6px}
.round-now select{font-size:14px; font-weight:800; padding:4px 10px; border-radius:8px; border:1px solid #c5cde6; background:#fff; color:#2d3a5e; cursor:pointer}
.round-note{font-size:12px; color:#6b7280; margin:8px 0 0; line-height:1.5}
.btn.small{padding:6px 12px; font-size:13px}
.btn.ghost{background:#fff; color:#3a4a78; border:1px solid #c5cde6}
.btn.ghost:hover{background:#eef1fb}

/* 로스터 역할 구분 헤더 */
.role-sep{display:flex; align-items:center; gap:8px; margin:12px 0 6px; padding:4px 2px; border-bottom:1px solid #e8ebf2}
.role-sep:first-child{margin-top:2px}
.role-sep b{margin-left:auto; font-size:12px; font-weight:700; color:#8a93a5}
.roster-table .role-sep-row td{background:#f4f6fc; padding:7px 12px; border-top:1px solid #e3e8f2; text-align:left}
.roster-table .role-sep-row b{font-size:12px; font-weight:700; color:#8a93a5; margin-left:8px}

/* 관리자 군단 구분 헤더 */
.leg-sep{display:flex; align-items:center; gap:8px; margin:14px 4px 6px; padding:5px 11px; border-radius:8px; font-weight:800; font-size:13px}
.leg-sep:first-child{margin-top:2px}
.leg-sep b{margin-left:auto; font-weight:700; font-size:12px; opacity:.7}
.leg-sep--1{background:#eaf0fc; color:#2f4f9e}
.leg-sep--2{background:#e6f6f2; color:#1f7a68}
.leg-sep--none{background:#f1f3f7; color:#6b7280}

/* 위험(해제) 버튼 */
.btn.danger{background:#fff; color:#c0392b; border:1px solid #e6b3ac}
.btn.danger:hover{background:#fdecea}

/* 방향(좌/중/우) 배지 */
.dir-badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:11px; border:1px solid transparent}
.dir--L{background:#eaf0fc; color:#2f4f9e; border-color:#cfdcfa}
.dir--C{background:#eef6ee; color:#2f7a3f; border-color:#cfe7d2}
.dir--R{background:#fdeeea; color:#b4502f; border-color:#f3d2c5}

/* 관리자 미공개 미리보기 배너 */
.preview-banner{max-width:1080px; margin:0 auto 14px; background:#fff7e6; border:1px solid #f0dca8; color:#7a5b16; padding:9px 13px; border-radius:10px; font-size:13px; font-weight:600}
.preview-banner::before{content:"👁 "}