#battle-zone{background:#000;color:#fff;padding:14px;font-family:system-ui}

/* ================= BASIC ================= */
/* 진영 전선 헤더 — 진영색 배지형(구역 시작을 한눈에) */
.army-label{
  font-weight:800; margin:4px 0 10px; display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; font-size:13.5px;
}
.army-label.pro{ background:linear-gradient(90deg,rgba(61,107,255,.22),rgba(61,107,255,.04)); border-left:4px solid #3d6bff; color:#bcd2ff; }
.army-label.con{ background:linear-gradient(90deg,rgba(255,77,103,.22),rgba(255,77,103,.04)); border-left:4px solid #ff4d67; color:#ffc6cf; }
.army-label .al-count{ margin-left:auto; font-size:11px; font-weight:700; opacity:.85; }
.pro{color:#5bbcff}
.con{color:#ff6b6b}

/* 전선 구분선 — 얇은 선 → '여기부터 반대 진영' 라벨이 박힌 확실한 경계 */
.battle-divider{
  position:relative; height:0; margin:26px 0 20px;
  border-top:2px dashed rgba(255,255,255,.14);
}
.battle-divider .bd-label{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  padding:5px 14px; border-radius:999px; white-space:nowrap;
  font-size:12px; font-weight:900; color:#fff;
  background:linear-gradient(90deg,#3d6bff,#ff4d67);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.battle-divider .bd-label b{ color:#fff; }

/* 🧭 현재 진영 구역 플로팅 배지(스크롤 추적) */
.zone-indicator{
  position:fixed; top:calc(70px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:900; padding:6px 15px; border-radius:999px; pointer-events:none;
  font-size:12.5px; font-weight:900; color:#fff; white-space:nowrap;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18);
  animation:ziPop .22s cubic-bezier(.2,1.3,.4,1);
}
.zone-indicator[hidden]{ display:none; }
.zone-indicator.pro{ background:rgba(38,60,140,.82); border-color:rgba(90,140,255,.6); }
.zone-indicator.con{ background:rgba(150,40,58,.82); border-color:rgba(255,110,130,.6); }
.zone-indicator .zi-ico{ margin-right:2px; }
@keyframes ziPop{ from{ opacity:0; transform:translate(-50%,-6px); } to{ opacity:1; transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .zone-indicator{ animation:none; } }

/* ================= BILLBOARD ================= */
.billboard{
  border-radius:10px;padding:12px;margin-bottom:10px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.85)),
    repeating-linear-gradient(45deg,#050505,#050505 6px,#0a0a0a 6px,#0a0a0a 12px);
  box-shadow:0 0 40px rgba(255,255,255,.35)
}
.billboard-title{
  font-size:11px;letter-spacing:3px;
  margin-bottom:10px;opacity:.9
}

/* ================= COMMENT ================= */
.comment{
  position:relative;
  border-radius:8px;border:1px solid rgba(255,255,255,.15);
  padding:8px;margin-bottom:6px;
  background:linear-gradient(180deg,#111,#020202)
}
.reply{position:relative;}
.billboard .comment{
  background:linear-gradient(180deg,#1a1a1a,#020202)
}

.head{display:flex;align-items:center;gap:8px;font-size:11px}
/* 신원 영역: 한 줄 고정 + 말줄임 → 배지들이 2줄로 깨지지 않는다 */
.user{display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden}
.anon{font-size:10px;padding:1px 5px;border-radius:4px;background:#333;opacity:.7;flex:none}

.hp-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}

.hp-bar{
  position:relative;
  width:50px;
  height:5px;
  background:#222;
  border-radius:4px;
  overflow:hidden;
}

.hp-fill{
  height:100%;
  background:linear-gradient(90deg,#00ffaa,#00cc66);
  box-shadow:0 0 6px rgba(0,255,170,.6);
}

.hp-text{
  font-size:10px;
  opacity:.85;
  min-width:22px;
  text-align:right;
}

/* ================= BODY ================= */
.body{font-size:13px;margin:6px 0}
.actions{font-size:12px;opacity:.75;display:flex;gap:10px}

/* ================= THREAD ================= */
.replies{
  margin-top:6px;
  border-left:1px solid rgba(255,255,255,.2);
  padding-left:8px
}
.reply{font-size:12px;margin-top:4px;opacity:.85}
.reply-meta{font-size:10px;opacity:.6;margin-top:4px}
.more{cursor:pointer;font-size:11px;color:#aaa;margin-top:4px}

/* ================= PAGING ================= */
.pager-wrap{
  display:flex;justify-content:center;margin:12px 0
}
.pager{
  display:flex;gap:8px;
  padding:6px 10px;border-radius:10px;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 16px rgba(255,255,255,.2)
}
.pager button{
  min-width:32px;height:30px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  color:#fff;font-size:13px;
  cursor:pointer;transition:.2s
}
.pager button:hover{background:rgba(255,255,255,.2)}
.pager button.active{
  background:linear-gradient(180deg,#ffffff33,#ffffff10);
  box-shadow:0 0 10px rgba(255,255,255,.5);
  font-weight:700
}

/* ================= 전황표 ================= */
.war-dashboard{
  margin-bottom:18px;
  padding:12px;
  border-radius:12px;
  background:linear-gradient(180deg,#0e0e0e,#030303);
  box-shadow:0 0 40px rgba(255,255,255,.25);
}

.war-title{
  font-size:12px;
  letter-spacing:3px;
  opacity:.8;
  margin-bottom:10px;
}

.war-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

.war-box{
  padding:10px;
  border-radius:10px;
  background:linear-gradient(180deg,#1a1a1a,#050505);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 16px rgba(255,255,255,.2);
}

.war-box.pro{box-shadow:0 0 18px rgba(91,188,255,.35)}
.war-box.con{box-shadow:0 0 18px rgba(255,107,107,.35)}

.war-label{font-size:11px;opacity:.7}
.war-stat{font-size:14px;margin:6px 0}
.war-sub{font-size:10px;opacity:.6}

/* ================= COMMENT WAR HEADER ================= */
.comment-war-header{
  margin:20px 0 12px;
  padding:14px 14px 12px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.9)),
    repeating-linear-gradient(45deg,#060606,#060606 6px,#0c0c0c 6px,#0c0c0c 12px);
  box-shadow:0 0 40px rgba(255,255,255,.35);
}

.comment-war-title{
  font-size:15px;
  font-weight:800;
  letter-spacing:3px;
  text-shadow:0 0 12px rgba(255,255,255,.5);
}

.comment-war-sub{
  margin-top:6px;
  font-size:11px;
  opacity:.7;
}

.reply-actions{
  margin-top:4px;
  display:flex;
  gap:10px;
  font-size:11px;
  opacity:.7;
}

.sub-reply-input{
  margin-top:6px;
  display:flex;
  gap:6px;
}

.sub-reply-input input{
  flex:1;
  background:#111;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:4px;
  border-radius:4px;
  font-size:11px;
}

.sub-reply-input button{
  background:#222;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:4px 8px;
  border-radius:4px;
  font-size:11px;
  cursor:pointer;
}

.action-more{
  margin-left:auto;
  position:relative;
  cursor:pointer;
  padding:0 4px;
  opacity:.6;
}

.action-more:hover{opacity:1}

.action-menu{
  position:absolute;
  right:0;
  top:16px;
  background:#111;
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  overflow:hidden;
  display:none;
  z-index:30;
  box-shadow:0 0 12px rgba(255,255,255,.25);
}

.action-more:hover .action-menu{display:block}

.action-menu div{
  padding:6px 10px;
  font-size:11px;
  white-space:nowrap;
}

.action-menu div:hover{background:rgba(255,255,255,.1)}

.hp-support-glow{
  position:absolute;
  inset:0;
  box-shadow:0 0 10px rgba(0,255,170,.9);
  animation:supportPulse .9s ease-out;
  pointer-events:none;
}

@keyframes supportPulse{
  from{opacity:1}
  to{opacity:0}
}

/* ===============================
   BATTLE INPUT CONSOLE (STARWARS HUD)
================================ */

.battle-input-wrapper{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  padding:12px;
  z-index:999;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.92)),
    repeating-linear-gradient(45deg,#060606,#060606 6px,#0c0c0c 6px,#0c0c0c 12px);
  border-top:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 40px rgba(255,255,255,.35);
}

/* 입력창 */
#battle-comment-input{
  width:100%;
  height:42px;
  padding:0 14px;
  border-radius:10px;
  background:linear-gradient(180deg,#111,#020202);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:13px;
  outline:none;
  box-shadow:inset 0 0 10px rgba(0,0,0,.6);
}

#battle-comment-input::placeholder{
  color:#aaa;
  opacity:.7;
}

/* 버튼 그룹 */
.battle-btn-group{
  display:flex;
  gap:8px;
  margin-top:8px;
}

/* 공통 버튼 */
.battle-btn-group button{
  flex:1;
  height:38px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg,#1a1a1a,#050505);
  box-shadow:0 0 14px rgba(255,255,255,.25);
  transition:.15s;
}

.battle-btn-group button:hover{
  box-shadow:0 0 18px rgba(255,255,255,.5);
}

/* 진영 색감 */
.btn-pro{
  border-color:rgba(91,188,255,.6);
  box-shadow:0 0 18px rgba(91,188,255,.35);
}

.btn-con{
  border-color:rgba(255,107,107,.6);
  box-shadow:0 0 18px rgba(255,107,107,.35);
}

.btn-fight{
  opacity:.85;
}

/* 네비게이션 밀착 */


.battle-btn-group,
.battle-input-actions{
  display:flex;
  gap:8px;
}

.battle-btn-group button,
.battle-input-actions button{
  flex:1;
  height:38px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg,#1a1a1a,#050505);
  box-shadow:0 0 14px rgba(255,255,255,.25);
  transition:.15s;
}

.side-btn.pro{ box-shadow:0 0 18px rgba(91,188,255,.35); }
.side-btn.con{ box-shadow:0 0 18px rgba(255,107,107,.35); }

.submit-btn{
  opacity:.9;
}

.battle-input-bar{
  position:fixed;
  left:0;
  right:0;
  padding:8px 10px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.85),#000);
  border-top:1px solid rgba(255,255,255,.15);
  box-shadow:0 -10px 30px rgba(0,0,0,.9);
  z-index:90;
}

.battle-input-top{
  display:flex;
  gap:8px;
  align-items:center;
}

#battle-comment-input{
  flex:1;
  height:38px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:#050505;
  color:#fff;
  font-size:13px;
}

.gif-btn,
.submit-btn{
  width:42px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,#111,#020202);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 0 10px rgba(255,255,255,.25);
}

.submit-btn{
  background:linear-gradient(180deg,#ff8a00,#ff4500);
  box-shadow:0 0 16px rgba(255,120,0,.55);
}

.battle-input-bottom{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.side-btn{
  flex:1;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg,#0f0f0f,#030303);
  color:#fff;
  font-size:12px;
  cursor:pointer;
  box-shadow:0 0 8px rgba(255,255,255,.2);
}

.side-btn.pro.active{
  border-color:#5bbcff;
  box-shadow:0 0 12px rgba(91,188,255,.6);
}

.side-btn.con.active{
  border-color:#ff6b6b;
  box-shadow:0 0 12px rgba(255,107,107,.6);
}

#app {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

.battle-input-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;

  /* 하단 네비(높이 58px) 바로 위에 고정 */
  bottom: 58px;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));

  background: linear-gradient(180deg, rgba(10,10,10,.95), rgba(0,0,0,.95));
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 8px 10px 10px;
  box-shadow: 0 -8px 20px rgba(0,0,0,.6);
  z-index: 91; /* 하단 네비(9999)보다 콘텐츠 위, 네비와 겹치지 않게 위에 배치 */
}

/* 고정 입력 바에 마지막 댓글이 가리지 않도록 여백 확보 */
#battle-zone {
  padding-bottom: 180px;
}

/* 모바일 키보드가 열렸을 때:
   - 하단 네비 숨김(키보드 위에 함께 떠서 겹치는 문제 제거)
   - 컴포저를 bottom:0으로 내려 키보드 바로 위에 붙임 */
/* ⚠️ 마우스(데스크톱)에는 소프트 키보드가 없다. 그런데도 바를 58px 내렸다가 포커스가 빠질 때 도로 올리면,
   「참전」을 누르는 순간 버튼이 위로 달아나 click 이 아예 나지 않는다 — 한 번 더 눌러야 달렸다
   (26.9.16 사장님 제보, 실측 재현: 버튼 top 452 → 510 → 432). 터치 기기에서만 적용한다. */
@media (pointer: coarse) {
  body.kb-open .nav {
    display: none !important;   /* 플로팅 네비가 키보드 위로 떠 겹치는 것 확실히 차단(단독 모드) */
  }
  body.kb-open .battle-input-bar {
    bottom: 0;
    z-index: 10000; /* 키보드 위 */
  }
}


#battle-comment-input {
  width: 100%;
  background: #070707;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  color: #fff;
  padding: 10px;
  /* iOS 사파리는 16px 미만 입력창 포커스 시 자동 줌인 → 반드시 16px 이상 */
  font-size: 16px;
  box-shadow: inset 0 0 12px rgba(255,255,255,.08);
}

.battle-input-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.side-btn, .submit-btn {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg,#1b1b1b,#050505);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.15);
}

.side-btn.pro.active { box-shadow: 0 0 16px rgba(91,188,255,.7); }
.side-btn.con.active { box-shadow: 0 0 16px rgba(255,107,107,.7); }

.submit-btn {
  max-width: 60px;
  background: linear-gradient(180deg,#ff9b2f,#ff6a00);
  color: #000;
}


.comment-gif {
  max-width: 140px;
  border-radius: 10px;
  display: block;
  margin-top: 6px;
}

.replies {
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid rgba(255,255,255,.08);
}

.reply {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}

.reply .body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.reply-actions {
  margin-top: 8px;
  font-size: 12px;
  opacity: .85;
}

/* =========================
   답글 스레드 (상시 노출)
========================= */
.reply-older{
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.reply-older:active{ transform: translateY(1px); }

.comment .replies{
  margin-top: 10px !important;
  padding-left: 14px !important;
  border-left: 2px solid rgba(255,255,255,.08) !important;
}

.comment .reply{
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.03) !important;
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.actions button {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 4px 8px;
  color: #eee;
  cursor: pointer;
}

.actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.like, .dislike, .action-support, .action-share, .action-more {
  cursor: pointer;
  user-select: none;
}

.reply-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  opacity: .9;
}

.like, .dislike {
  transition: all .15s ease;
}

.active-like {
  color: #4da3ff;
  text-shadow: 0 0 6px rgba(77,163,255,.8);
  font-weight: 600;
}

.active-dislike {
  color: #ff5c5c;
  text-shadow: 0 0 6px rgba(255,92,92,.8);
  font-weight: 600;
}

.battle-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.battle-tag {
  font-size: 12px;
  opacity: 0.7;
}

.action-attack,
.action-defend {
  background: none;
  border: none;
  color: #ccc;
  font-weight: 600;
  cursor: pointer;
}

.ally-user { color: #4fc3f7; }
.ally-level { color: #4fc3f7; border-color: #4fc3f7; }

.enemy-user { color: #ff6b6b; }
.enemy-level { color: #ff6b6b; border-color: #ff6b6b; }

.user {
  display: flex;
  align-items: center;
  gap: 6px;
}

.side-icon {
  font-size: 14px;
  opacity: .85;
}

.ally-user { color: #4fc3f7; }
.ally-level { color: #4fc3f7; border-color: #4fc3f7; }
.ally-icon { color: #4fc3f7; }

.enemy-user { color: #ff6b6b; }
.enemy-level { color: #ff6b6b; border-color: #ff6b6b; }
.enemy-icon { color: #ff6b6b; }
/* 실데이터 전환 보강 */
.empty-zone {
  padding: 24px 16px;
  text-align: center;
  color: #777;
  font-size: 13px;
  background: #0d0d0d;
  border: 1px dashed #2a2a2a;
  border-radius: 10px;
}
.actions .done,
.reply-actions .done {
  opacity: 0.35;
  pointer-events: auto; /* 클릭 시 '이미 참여' 안내를 위해 유지 */
}

/* ============================================================
   댓글 대전 게임 모드 강화 (HP 티어 / 격파 / FX / 사기게이지)
============================================================ */

/* HP 바 확대 + 티어 색 + 데미지 잔상(ghost) */
.hp-wrap { position: relative; }
.hp-bar {
  width: 74px; height: 9px; background: #1a1c22;
  border: 1px solid #2a2d36; border-radius: 6px; overflow: hidden;
}
.hp-ghost {
  position: absolute; left: 0; top: 0; height: 100%;
  background: rgba(255,255,255,.35);
  transition: width .5s ease .25s;
}
.hp-fill {
  position: relative; height: 100%; border-radius: 5px;
  transition: width .35s cubic-bezier(.22,1,.36,1);
  box-shadow: none;
}
.hp-bar.hp-hi  .hp-fill { background: linear-gradient(90deg,#22e39a,#12c46f); }
.hp-bar.hp-mid .hp-fill { background: linear-gradient(90deg,#ffd15c,#ff9f45); }
.hp-bar.hp-lo  .hp-fill { background: linear-gradient(90deg,#ff7a5c,#ff3b3b); }
.hp-bar.hp-lo  { animation: hpLowPulse 1s ease-in-out infinite; }
@keyframes hpLowPulse { 0%,100%{ box-shadow:0 0 0 rgba(255,59,59,0);} 50%{ box-shadow:0 0 10px rgba(255,59,59,.7);} }
.hp-wrap.ko .hp-text { color: #ff5c5c; font-weight: 800; }

/* 격파(KO) 유닛 */
.comment.ko, .reply.ko {
  filter: grayscale(.7) brightness(.72);
  position: relative;
}
.comment.ko::after {
  content: "💀 격파됨"; position: absolute; top: 10px; right: 12px;
  font-size: 12px; font-weight: 900; color: #ff5c5c;
  border: 1.5px solid #ff5c5c; border-radius: 6px; padding: 2px 8px;
  transform: rotate(-8deg); background: rgba(0,0,0,.4); letter-spacing: .5px;
}

/* 피격 / 힐 임팩트 */
@keyframes fxShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-5px);} 40%{transform:translateX(5px);} 60%{transform:translateX(-3px);} 80%{transform:translateX(3px);} }
.fx-hit { animation: fxShake .45s; box-shadow: inset 0 0 0 2px rgba(255,60,60,.55); border-radius: 12px; }
.fx-heal { box-shadow: inset 0 0 0 2px rgba(40,220,150,.55); border-radius: 12px; }

/* 플로팅 전투 텍스트 */
.combat-float {
  position: absolute; top: 8px; right: 14px; z-index: 20;
  font-size: 18px; font-weight: 900; pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  animation: floatUp 1.1s cubic-bezier(.2,.8,.3,1) forwards;
}
.combat-float.dmg  { color: #ff6a6a; }
.combat-float.crit { color: #ffd23b; font-size: 22px; }
.combat-float.heal { color: #35e0a0; }
@keyframes floatUp { 0%{opacity:0; transform:translateY(6px) scale(.7);} 15%{opacity:1; transform:translateY(-2px) scale(1.15);} 100%{opacity:0; transform:translateY(-34px) scale(1);} }

/* 전투력 칩 */
.cp-chip {
  font-size: 11px; font-weight: 800; color: #ffd977;
  background: rgba(255,196,0,.12); border: 1px solid rgba(255,196,0,.3);
  padding: 1px 7px; border-radius: 8px; margin-left: 2px;
}

/* 에이스 */
.comment.ace { border: 1px solid rgba(255,210,90,.5); box-shadow: 0 0 20px rgba(255,200,60,.15); }
.ace-badge {
  font-size: 10.5px; font-weight: 900; color: #ffdf7a;
  background: linear-gradient(135deg, rgba(255,200,60,.25), rgba(255,160,40,.15));
  border: 1px solid rgba(255,200,60,.55); padding: 1px 7px; border-radius: 8px;
}

/* 진영 사기 게이지 (tug of war) */
.battle-morale { margin-top: 14px; }
.bm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 800; margin-bottom: 7px; }
.bm-side.pro { color: #6db4ff; } .bm-side.con { color: #ff8a8a; }
.bm-side.lead { text-shadow: 0 0 10px currentColor; }
.bm-vs { color: #777; font-size: 10px; }
.bm-track {
  position: relative; height: 16px; border-radius: 9px; overflow: hidden;
  display: flex; background: #14161d; border: 1px solid #24262f;
}
.bm-pro { height: 100%; background: linear-gradient(90deg,#2f6bd6,#4da3ff); transition: width .7s cubic-bezier(.22,1,.36,1); }
.bm-con { height: 100%; background: linear-gradient(90deg,#ff6767,#c93a3a); transition: width .7s cubic-bezier(.22,1,.36,1); }
.bm-needle {
  position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fff;
  transform: translateX(-50%); border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,.8); transition: left .7s cubic-bezier(.22,1,.36,1);
}
.bm-status { margin-top: 7px; text-align: center; font-size: 12px; font-weight: 800; color: #cfd4e0; }

/* 진영 미선택 시 전투 잠금 안내 */
.action-locked {
  font-size: 12px; color: #8b90a0; cursor: pointer;
  border: 1px dashed #3a3d47; border-radius: 8px; padding: 2px 9px;
}
.action-locked:active { color: #cfd4e0; }

/* ============================================================
   실시간 전장: 킬 피드 / 격파 배너 / 콤보 / 전공 훈장
============================================================ */

/* 📡 전장 속보 */
.battle-feed {
  margin: 14px 0;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0c0d10, #050506);
  border: 1px solid #1c1e26;
}
.bf-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 2px; opacity: .85; margin-bottom: 9px; font-weight: 800;
}
.bf-live {
  font-size: 9px; letter-spacing: 1px; color: #ff5c5c;
  border: 1px solid #ff5c5c; border-radius: 5px; padding: 1px 5px;
  animation: liveBlink 1.4s ease-in-out infinite;
}
@keyframes liveBlink { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.bf-list { display: flex; flex-direction: column; gap: 5px; }
.bf-empty { font-size: 12px; color: #666; padding: 6px 0; }
.bf-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: #b9bec9;
  padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.03);
  border-left: 3px solid #333;
}
.bf-line.atk { border-left-color: #ff5c5c; }
.bf-line.def { border-left-color: #4da3ff; }
.bf-line.sup { border-left-color: #35e0a0; }
.bf-line.new { animation: bfSlide .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes bfSlide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.bf-time { font-size: 10px; color: #5c6070; font-variant-numeric: tabular-nums; }
.bf-actor.pro { color: #6db4ff; } .bf-actor.con { color: #ff8a8a; }
.bf-verb { font-weight: 700; }
.bf-arrow { color: #555; }
.bf-delta { margin-left: auto; font-weight: 900; }
.bf-line.atk .bf-delta { color: #ff6a6a; }
.bf-line.def .bf-delta, .bf-line.sup .bf-delta { color: #35e0a0; }

/* 💀 격파 배너 */
.ko-banner {
  position: fixed; left: 50%; top: 38%; transform: translateX(-50%);
  z-index: 4000; pointer-events: none;
  animation: koBanner 2.2s cubic-bezier(.2,.9,.3,1) forwards;
}
.ko-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 14px;
  background: rgba(10,0,0,.88);
  border: 2px solid #ff3b3b;
  box-shadow: 0 0 40px rgba(255,59,59,.55), inset 0 0 24px rgba(255,59,59,.15);
  color: #fff; font-size: 16px; font-weight: 800; white-space: nowrap;
}
.ko-skull { font-size: 26px; animation: koSkull .6s cubic-bezier(.2,1.6,.4,1); }
.ko-word { color: #ff5c5c; font-size: 20px; font-weight: 900; letter-spacing: 2px; }
@keyframes koBanner {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  20% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.96); }
}
@keyframes koSkull { 0%{transform:scale(0) rotate(-30deg);} 100%{transform:scale(1) rotate(0);} }

/* 🔥 콤보 팝 */
.combo-pop {
  position: fixed; left: 50%; top: 30%; transform: translateX(-50%);
  z-index: 4000; pointer-events: none;
  font-size: 30px; font-weight: 900; color: #ffd23b;
  text-shadow: 0 0 18px rgba(255,180,40,.8), 0 3px 8px rgba(0,0,0,.7);
  animation: comboPop 1.3s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes comboPop {
  0% { opacity: 0; transform: translateX(-50%) scale(.4) rotate(-6deg); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.25) rotate(2deg); }
  30% { transform: translateX(-50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-26px); }
}

/* 🎖 전공 훈장 */
/* 🏆 명예의 전당(빌보드) — 영향력 최상위 전사 TOP3, 클릭 시 해당 댓글로 스크롤 */
.billboard-board { margin: 14px 0; }
.bb-title { font-size: 12px; letter-spacing: 2px; opacity: .9; font-weight: 800; margin-bottom: 9px; }
.bb-list { display: flex; flex-direction: column; gap: 7px; }
.bb-card {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 9px 12px; border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, #101116, #08090c); border: 1px solid #22242e;
  transition: transform .12s ease, filter .12s ease;
}
.bb-card:active { transform: scale(.99); filter: brightness(1.12); }
.bb-card.pro { border-color: rgba(61,107,255,.42); box-shadow: 0 0 14px rgba(61,107,255,.1); }
.bb-card.con { border-color: rgba(255,77,103,.42); box-shadow: 0 0 14px rgba(255,77,103,.1); }
.bb-rank { font-size: 20px; flex: none; }
.bb-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-name { font-size: 13px; color: #fff; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-quote { font-size: 11px; color: #8b90a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-power {
  flex: none; font-size: 12px; font-weight: 900; color: #f5cf6b;
  padding: 3px 9px; border-radius: 999px; background: rgba(245,207,107,.12);
}

.battle-honors { margin: 14px 0; }
.bh-title { font-size: 12px; letter-spacing: 2px; opacity: .85; font-weight: 800; margin-bottom: 9px; }
.bh-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bh-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 6px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #101116, #08090c);
  border: 1px solid #22242e;
}
.bh-card.attack  { border-color: rgba(255,92,92,.4);  box-shadow: 0 0 14px rgba(255,92,92,.12); }
.bh-card.defend  { border-color: rgba(77,163,255,.4); box-shadow: 0 0 14px rgba(77,163,255,.12); }
.bh-card.support { border-color: rgba(53,224,160,.4); box-shadow: 0 0 14px rgba(53,224,160,.12); }
.bh-ic { font-size: 18px; }
.bh-name { font-size: 12.5px; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-label { font-size: 10.5px; color: #8b90a0; font-weight: 700; }

/* ============================================================
   BattleFX — 충격파 / 비네트 / 플래시 / 배너
============================================================ */
.fx-shockwave {
  position: fixed; z-index: 4400; pointer-events: none;
  width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.8);
  transform: translate(-50%, -50%);
  animation: fxRing .6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes fxRing {
  0%   { opacity: 1; width: 12px; height: 12px; border-width: 4px; }
  100% { opacity: 0; width: 190px; height: 190px; border-width: 1px; }
}

.fx-vignette {
  position: fixed; inset: 0; z-index: 4300; pointer-events: none;
  animation: fxVig .9s ease-out forwards;
}
.fx-vignette.danger { box-shadow: inset 0 0 120px 40px rgba(255,30,30,.55); }
.fx-vignette.heal   { box-shadow: inset 0 0 120px 40px rgba(40,220,150,.45); }
@keyframes fxVig { 0%{opacity:0;} 15%{opacity:1;} 55%{opacity:.7;} 100%{opacity:0;} }

.fx-flash {
  position: fixed; inset: 0; z-index: 4200; pointer-events: none;
  animation: fxFlash .18s ease-out forwards;
}
@keyframes fxFlash { 0%{opacity:1;} 100%{opacity:0;} }

.fx-banner {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%);
  z-index: 4600; pointer-events: none;
  padding: 11px 22px; border-radius: 12px;
  font-size: 15px; font-weight: 900; letter-spacing: .5px;
  /* ⚠️ 예전엔 white-space:nowrap 에 max-width 가 없었다. 짧은 배너("🛡 방어 성공!")만
     쓰다가 긴 문구를 넣는 순간 폭이 화면을 넘어 좌우가 잘렸다(실측: 412px 화면에 535px,
     양쪽 62px 씩 잘림). 폭을 화면 안으로 묶고, 넘치면 줄바꿈한다. */
  /* ⚠️ left:50% 만 주면 가용폭이 화면의 절반(206px)으로 잡혀 max-width 가 무의미해진다
     — 긴 문구가 218px 박스에서 4줄로 접혔다(실측). width:max-content 로 내용 폭을
     먼저 잡고 max-width 로 화면 안에 묶는다. */
  width: max-content; max-width: min(92vw, 520px);
  text-align: center; line-height: 1.35;
  animation: fxBanner 2.1s cubic-bezier(.2,.9,.3,1) forwards;
}
.fx-banner.warn {
  color: #fff; background: rgba(40,0,0,.92);
  border: 2px solid #ff3b3b;
  box-shadow: 0 0 30px rgba(255,59,59,.6);
  animation: fxBanner 2.1s cubic-bezier(.2,.9,.3,1) forwards, fxWarnShake .5s ease-in-out;
}
.fx-banner.cheer {
  color: #06210f; background: linear-gradient(135deg, #7cf5c8, #35e0a0);
  border: 2px solid #baffdf;
  box-shadow: 0 0 30px rgba(53,224,160,.6);
}
.fx-banner.info {
  color: #0a1533; background: linear-gradient(135deg, #a8d2ff, #4da3ff);
  border: 2px solid #d5eaff;
  box-shadow: 0 0 30px rgba(77,163,255,.55);
}
@keyframes fxBanner {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.7); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  20% { transform: translateX(-50%) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px); }
}
@keyframes fxWarnShake { 0%,100%{margin-left:0;} 25%{margin-left:-6px;} 50%{margin-left:6px;} 75%{margin-left:-3px;} }

/* ============================================================
   UX 명확화: 아군/적군 태그 · 내 진영 배지 · 쿨다운 · 진영 보더
============================================================ */

/* 아군/적군 관계 태그 */
.rel-tag {
  font-size: 9.5px; font-weight: 900; letter-spacing: .5px;
  padding: 1px 6px; border-radius: 6px;
}
.rel-tag.ally  { color: #7cf5c8; border: 1px solid rgba(53,224,160,.6); background: rgba(53,224,160,.1); }
.rel-tag.enemy { color: #ff9b9b; border: 1px solid rgba(255,92,92,.6); background: rgba(255,92,92,.1); }

/* 유닛 좌측 진영 보더 (한눈에 진영 구분) */
/* 댓글별 진영 스킨 강화 — 두꺼운 좌측 레일 + 진영색 배경 워시(스크롤 중에도 즉시 구분) */
.comment[data-side="pro"], .reply[data-side="pro"] {
  border-left: 5px solid #3d6bff;
  background: linear-gradient(90deg, rgba(61,107,255,.13), rgba(61,107,255,.02) 60%, #020202);
}
.comment[data-side="con"], .reply[data-side="con"] {
  border-left: 5px solid #ff4d67;
  background: linear-gradient(90deg, rgba(255,77,103,.13), rgba(255,77,103,.02) 60%, #020202);
}

/* 내 진영 안내줄 (사기 게이지 아래) */
.bm-mine {
  margin-top: 9px; text-align: center;
  font-size: 12px; font-weight: 800;
  padding: 7px 10px; border-radius: 9px;
}
.bm-mine.pro { color: #a8d2ff; background: rgba(51,86,255,.14); border: 1px solid rgba(77,163,255,.4); }
.bm-mine.con { color: #ffc2c2; background: rgba(255,79,110,.12); border: 1px solid rgba(255,92,92,.4); }
.bm-mine.none { color: #8b90a0; background: rgba(255,255,255,.05); border: 1px dashed #3a3d47; }
.bm-mine b { color: #fff; }

/* 쿨다운 중 전투 버튼 */
.action-attack.cooldown, .action-defend.cooldown, .action-support.cooldown {
  opacity: .45; cursor: default;
  font-variant-numeric: tabular-nums;
}

/* 잠긴 진영 버튼 */
.side-btn.side-locked { opacity: .35; }
.side-btn .side-mine {
  font-size: 9px; font-weight: 900; letter-spacing: .5px;
  padding: 1px 5px; border-radius: 5px; margin-left: 4px;
  background: rgba(255,210,90,.2); border: 1px solid rgba(255,210,90,.5); color: #ffdf7a;
}

/* ============================================================
   컴포저: 내 진영 상태바 + 적진 침투
============================================================ */
.side-caption {
  width: 100%; text-align: center;
  font-size: 11px; color: #8b90a0; font-weight: 700;
  margin-bottom: 6px;
}
.composer-side {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 11px;
  font-size: 12.5px; font-weight: 800;
}
.composer-side.pro { background: rgba(61,107,255,.12); border: 1px solid rgba(77,163,255,.5); color: #a9c2ff; }
.composer-side.con { background: rgba(255,77,103,.1); border: 1px solid rgba(255,92,92,.5); color: #ffb0bd; }
.composer-side.infiltrating {
  background: rgba(201,209,224,.1); border: 1px solid rgba(201,209,224,.6); color: #c9d1e0;
  animation: infilPulse 1.6s ease-in-out infinite;
}
@keyframes infilPulse { 0%,100%{ box-shadow: 0 0 0 rgba(201,209,224,0);} 50%{ box-shadow: 0 0 14px rgba(201,209,224,.45);} }
.infiltrate-btn {
  flex-shrink: 0;
  padding: 6px 11px; border-radius: 9px;
  background: rgba(201,209,224,.12); border: 1px solid rgba(201,209,224,.45); color: #c9d1e0;
  font-size: 11.5px; font-weight: 900; cursor: pointer;
}
.infiltrate-btn b { font-variant-numeric: tabular-nums; }
.composer-side.infiltrating .infiltrate-btn {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #ddd;
}

/* 🕵️ 침투자 뱃지 */
.rel-tag.infil { color: #c9d1e0; border: 1px solid rgba(201,209,224,.6); background: rgba(201,209,224,.1); }

/* ============================================================
   💬 진영 작전회의 (진영 전용 실시간 채팅)
============================================================ */
/* 채팅방 입장 배너 (카톡 오픈채팅 입장 느낌 — 채팅방임을 명확히) */
.fc-enter {
  display: flex; align-items: center; gap: 11px; width: 100%;
  margin-top: 10px; padding: 11px 13px; border-radius: 14px; cursor: pointer;
  text-align: left; color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .1s ease, filter .15s ease;
}
.fc-enter:active { transform: scale(.985); filter: brightness(1.08); }
.fc-enter.pro { background: linear-gradient(135deg, rgba(61,107,255,.22), rgba(61,107,255,.08)); border-color: rgba(61,107,255,.4); }
.fc-enter.con { background: linear-gradient(135deg, rgba(255,77,103,.22), rgba(255,77,103,.08)); border-color: rgba(255,77,103,.4); }
.fc-enter-ico {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: rgba(255,255,255,.1);
}
.fc-enter-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fc-enter-tx b { font-size: 13.5px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.fc-enter-tx small { font-size: 11px; color: #b9bdcc; font-weight: 600; }
.fc-enter-live {
  font-size: 8.5px; letter-spacing: 1px; color: #ff5c5c; font-weight: 900;
  border: 1px solid #ff5c5c; border-radius: 4px; padding: 1px 4px;
  animation: liveBlink 1.4s ease-in-out infinite;
}
.fc-enter-arrow { font-size: 22px; font-weight: 400; color: rgba(255,255,255,.5); flex: 0 0 auto; }
.faction-chat { position: fixed; inset: 0; z-index: 10050; display: none; } /* 하단 nav(9999)보다 위 — 입력란이 가려지지 않게 */
.faction-chat.open { display: block; }
.faction-chat .fc-dim { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(2px); }
.faction-chat .fc-sheet {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 480px; height: 72vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #101116, #08090c);
  border: 1px solid #22242e; border-bottom: none;
  border-radius: 20px 20px 0 0;
  animation: fcUp .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes fcUp { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.faction-chat.pro .fc-sheet { box-shadow: 0 -10px 50px rgba(61,107,255,.25); }
.faction-chat.con .fc-sheet { box-shadow: 0 -10px 50px rgba(255,77,103,.22); }

.fc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #1b1d25;
}
.fc-title { font-size: 14.5px; font-weight: 900; }
.faction-chat.pro .fc-title { color: #a9c2ff; }
.faction-chat.con .fc-title { color: #ffb0bd; }
.fc-live {
  font-size: 9px; letter-spacing: 1px; color: #ff5c5c;
  border: 1px solid #ff5c5c; border-radius: 5px; padding: 1px 5px;
  animation: liveBlink 1.4s ease-in-out infinite;
}
.fc-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: none; color: #ccc; cursor: pointer;
}
.fc-notice {
  padding: 8px 16px; font-size: 11px; color: #8b90a0; font-weight: 700;
  background: rgba(255,255,255,.03); border-bottom: 1px solid #16181f;
}
/* 🔥 난장으로 판 키우기 — 진영 색으로 물든 유도 배너(같은 편 전용) */
.fc-nanjang {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: calc(100% - 24px); margin: 10px 12px 2px; padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 13px; cursor: pointer;
  font-size: 14px; font-weight: 900; color: #fff; text-align: left;
  background: linear-gradient(135deg, rgba(255,120,40,.22), rgba(255,60,90,.14));
  transition: transform .12s ease, filter .12s ease;
}
.fc-nanjang i { font-style: normal; font-size: 10.5px; font-weight: 700; color: #cbb; opacity: .85; }
.fc-nanjang:active { transform: scale(.98); filter: brightness(1.1); }
.fc-nanjang:disabled { opacity: .6; cursor: default; }
.faction-chat.pro .fc-nanjang { background: linear-gradient(135deg, rgba(61,107,255,.28), rgba(255,120,40,.14)); }
.faction-chat.con .fc-nanjang { background: linear-gradient(135deg, rgba(255,77,103,.26), rgba(255,120,40,.14)); }

.fc-list {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.fc-loading { text-align: center; color: #666; font-size: 12px; padding: 20px 0; }
.fc-msg { display: flex; flex-direction: column; align-items: flex-start; }
.fc-msg.mine { align-items: flex-end; }
.fc-nick { font-size: 11px; color: #8b90a0; font-weight: 800; margin: 0 4px 3px; }
.fc-row { display: flex; align-items: flex-end; gap: 5px; max-width: 82%; }
.fc-bubble {
  padding: 9px 13px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.5; color: #eee;
  background: #1b1d26; border: 1px solid #262936;
  word-break: break-word; white-space: pre-wrap;
  border-top-left-radius: 5px;
}
.fc-msg.mine .fc-bubble { border-radius: 16px; border-top-right-radius: 5px; color: #fff; }
.faction-chat.pro .fc-msg.mine .fc-bubble { background: linear-gradient(135deg, #2b4fd0, #3d6bff); border-color: #3d6bff; }
.faction-chat.con .fc-msg.mine .fc-bubble { background: linear-gradient(135deg, #d0324c, #ff4d67); border-color: #ff4d67; }
.fc-time { font-size: 10px; color: #5c6070; flex-shrink: 0; }
.fc-inputrow {
  display: flex; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #1b1d25; background: rgba(10,10,14,.9);
}
.fc-inputrow input {
  flex: 1; height: 42px; padding: 0 16px; border-radius: 999px;
  background: #14161d; border: 1px solid #2a2d3a; color: #fff; font-size: 14px; outline: none;
}
.fc-inputrow button {
  height: 42px; padding: 0 18px; border-radius: 999px; border: none;
  font-size: 13px; font-weight: 900; color: #fff; cursor: pointer;
}
.faction-chat.pro .fc-inputrow button { background: linear-gradient(135deg, #2b4fd0, #3d6bff); }
.faction-chat.con .fc-inputrow button { background: linear-gradient(135deg, #d0324c, #ff4d67); }

/* =========================================================
   ⚔ 배틀 UX 고도화 — 인라인 컴포저 / 액션 칩 / 침투 유닛 / 슬림 전황
========================================================= */

/* 진영 전선 리스트 */
.zone-list{ display:flex; flex-direction:column; gap:10px; border-radius:12px; padding:8px; }
/* 진영 영토감 — 구역 전체에 은은한 진영색 배경 + 좌측 경계 레일 */
.zone-list.pro{ background:linear-gradient(180deg,rgba(61,107,255,.06),rgba(61,107,255,0)); box-shadow:inset 3px 0 0 rgba(61,107,255,.35); }
.zone-list.con{ background:linear-gradient(180deg,rgba(255,77,103,.06),rgba(255,77,103,0)); box-shadow:inset 3px 0 0 rgba(255,77,103,.35); }
.al-count{ margin-left:8px; font-size:11px; font-weight:700; color:#8b8b93; }
.al-count b{ color:#c9c9cf; }

/* 슬림 전황 한 줄 (전황표 3박스 통합) */
.bm-stats{
  margin-top:8px; font-size:11px; font-weight:700; color:#8b8b93;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.bm-stats b, .bm-stats span{ color:#d5d5da; }

/* 인라인 전투 컴포저 — 공격은 빨강, 방어는 파랑 */
.inline-composer{
  margin:10px 0 4px;
  padding:10px;
  border-radius:12px;
  background:#14161d;
  border:1px solid rgba(255,255,255,.16);
  animation: icUp .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes icUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.inline-composer.atk{ border-color:rgba(255,77,103,.55); box-shadow:0 0 18px rgba(255,77,103,.12); }
.inline-composer.def{ border-color:rgba(61,107,255,.55); box-shadow:0 0 18px rgba(61,107,255,.12); }

.ic-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ic-title{ flex:1; font-size:11.5px; font-weight:800; line-height:1.4; }
.inline-composer.atk .ic-title{ color:#ff8595; }
.inline-composer.def .ic-title{ color:#7f9dff; }
.ic-title b{ color:#fff; }
.ic-close{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:rgba(255,255,255,.07); border:none; color:#aaa; cursor:pointer; font-size:12px;
}

/* ⚠️ 이 행엔 이모지·GIF 버튼이 런타임에 주입된다(gif.js attach 등).
   input에 min-width:0 이 없으면 flex 기본값 min-width:auto 때문에 콘텐츠 최소폭
   아래로 안 줄어들어, 뒤따르는 전송 버튼(.ic-send)을 화면 밖으로 밀어낸다.
   좁은 모바일에서 '참전/공격' 버튼이 안 보이던 원인. */
.ic-row{ display:flex; gap:7px; align-items:center; }
.ic-row input{
  flex:1 1 auto; min-width:0;   /* ← 반드시 유지: 없으면 전송 버튼 잘림 */
  height:40px; padding:0 14px; border-radius:999px;
  background:#0a0a0b; border:1px solid #2a2d3a; color:#fff;
  font-size:16px; /* iOS 자동 줌 방지 */
  outline:none;
}
.inline-composer.atk .ic-row input:focus{ border-color:#ff4d67; }
.inline-composer.def .ic-row input:focus{ border-color:#3d6bff; }
.ic-send{
  flex:0 0 auto;                 /* ← 절대 찌그러지지 않게(전송은 최우선 요소) */
  height:40px; padding:0 14px; border-radius:999px; border:none;
  font-size:12.5px; font-weight:900; color:#fff; cursor:pointer;
  white-space:nowrap;
  transition:transform .1s ease;
}
.ic-send:active{ transform:scale(.96); }
.inline-composer.atk .ic-send{ background:linear-gradient(135deg,#d0324c,#ff4d67); box-shadow:0 6px 18px -6px rgba(255,77,103,.6); }
.inline-composer.def .ic-send{ background:linear-gradient(135deg,#2b4fd0,#3d6bff); box-shadow:0 6px 18px -6px rgba(61,107,255,.6); }

/* 답글 액션 칩 — 전투 서사가 스레드로 읽히게 */
.reply-chip{
  display:inline-block; margin-right:6px; padding:1px 8px;
  border-radius:6px; font-size:10px; font-weight:900; vertical-align:1px;
}
.reply-chip.atk{ background:rgba(255,77,103,.15); color:#ff8595; border:1px solid rgba(255,77,103,.4); }
.reply-chip.def{ background:rgba(61,107,255,.15); color:#7f9dff; border:1px solid rgba(61,107,255,.4); }

/* 🕵️ 침투 유닛 — 골드 아이덴티티 (적진에 껴 있는 게 한눈에) */
.comment.infil-unit{
  border-color:rgba(201,209,224,.55) !important;
  box-shadow:0 0 22px rgba(201,209,224,.14);
  background:linear-gradient(90deg, rgba(201,209,224,.07), rgba(255,255,255,.01)) !important;
}
.reply.infil-unit{
  border:1px solid rgba(201,209,224,.4);
  background:rgba(201,209,224,.05);
}

/* 하단 바 — '참전' 전용으로 단순화 */
.submit-btn{ width:auto; padding:0 14px; font-weight:900; font-size:13px; }
.composer-side.locked{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#8b8b93;
}

/* ⚔️ 격론 자동감지 → 댓글의 일기토 버튼 (답글 왕복이 쌓이면 자동 노출) */
.c-duel {
  border: none; cursor: pointer; border-radius: 99px; padding: 5px 12px;
  font-weight: 900; font-size: 12px; color: #0a0a0b;
  background: linear-gradient(135deg, #c9d1e0, #8b93a3);
  box-shadow: 0 0 14px rgba(201,209,224,.35);
  animation: cDuelPulse 1.8s ease-in-out infinite;
}
.c-duel:active { transform: scale(.94); }
@keyframes cDuelPulse { 50% { box-shadow: 0 0 22px rgba(201,209,224,.65); transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .c-duel { animation: none; } }

/* 격론 히트 단계 — 신경전(기본) < 설전 < 전면전 순으로 뜨거워진다 */
.c-duel.lv2 {
  background: linear-gradient(135deg, #ffb36b, #ff7a45); color: #1a0d05;
  box-shadow: 0 0 16px rgba(255,140,70,.45); animation-duration: 1.4s;
}
.c-duel.lv3 {
  background: linear-gradient(135deg, #ff6b81, #d0392b); color: #fff;
  box-shadow: 0 0 20px rgba(255,80,90,.55); animation-duration: 1s;
}
/* 관전자용 '격론 중' 배지 — 액션 없음, 구경 유도 */
.c-duel-watch {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 800;
  color: #ffb28a; background: rgba(255,122,69,.12); border: 1px solid rgba(255,122,69,.35);
}
.c-duel-watch b { color: #ffd7c2; }

/* ✨ 부스트: 하이라이트 댓글 */
.comment.hl, .reply.hl { border: 1px solid rgba(201,209,224,.5) !important; box-shadow: 0 0 16px rgba(201,209,224,.18); position: relative; }
.comment.hl::before, .reply.hl::before { content: "✨ 하이라이트"; position: absolute; top: -8px; left: 12px;
  font-size: 10px; font-weight: 900; color: #0a0a0b; background: linear-gradient(135deg,#c9d1e0,#8b93a3); padding: 1px 8px; border-radius: 99px; }

/* ============================================================
   ✨ 동적 애니메이션 — 댓글 등장 / 신규 강조 / HP바 생동
   ============================================================ */
@keyframes cmtIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.comment, .reply { animation: cmtIn .34s cubic-bezier(.2,1,.35,1) both; }
/* 최전방 몇 개만 스태거(과하지 않게) */
.comment:nth-child(1){animation-delay:.02s}.comment:nth-child(2){animation-delay:.06s}
.comment:nth-child(3){animation-delay:.10s}.comment:nth-child(4){animation-delay:.14s}
.comment:nth-child(5){animation-delay:.18s}.comment:nth-child(6){animation-delay:.22s}

/* 새로 참전한 댓글 강조 팝 */
@keyframes cmtJustIn { 0%{opacity:0;transform:scale(.82) translateY(-6px)} 55%{transform:scale(1.04)} 100%{opacity:1;transform:scale(1)} }
@keyframes cmtGlow { 0%,100%{box-shadow:0 0 0 rgba(201,209,224,0)} 30%{box-shadow:0 0 18px 2px rgba(201,209,224,.55)} }
.comment.just-in, .reply.just-in { animation: cmtJustIn .5s cubic-bezier(.2,1.4,.5,1), cmtGlow 1.6s ease-out; }

/* HP바 생동 — 살아있는 유닛은 은은한 흐름, 데미지 시 부드러운 감소 */
.hp-fill { transition: width .55s cubic-bezier(.3,1,.4,1); background-size: 200% 100%; }
.comment:not(.ko) .hp-fill { animation: hpFlow 2.6s linear infinite; }
@keyframes hpFlow { 0%{background-position:0 0} 100%{background-position:200% 0} }

@media (prefers-reduced-motion: reduce){
  .comment,.reply,.comment.just-in,.reply.just-in,.hp-fill{animation:none!important}
  .hp-fill{transition:none}
}

/* ⚔ 전황표 3박스 (이슈 배틀 헤더 — 피드 카드와 동일 정보) */
.bm-war{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.bmw-box{background:#0f1116;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 6px;text-align:center}
.bmw-box.pro{border-color:rgba(91,140,255,.35);background:linear-gradient(180deg,rgba(61,107,255,.12),#0f1116)}
.bmw-box.con{border-color:rgba(255,77,109,.35);background:linear-gradient(180deg,rgba(255,77,109,.12),#0f1116)}
.bmw-label{font-size:11px;font-weight:800;color:#9aa0ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmw-box.pro .bmw-label{color:#7fa0ff}.bmw-box.con .bmw-label{color:#ff8f9c}
.bmw-stat{font-size:13px;font-weight:700;color:#e7ebf3;margin-top:5px}
.bmw-stat b{font-size:17px;font-weight:900;color:#fff}
.bmw-sub{font-size:10.5px;color:#7a8090;margin-top:3px}

/* ============================================================
   ⚔ 전황 인포그래픽 — 박진감 강화 (동적 애니메이션)
   ============================================================ */
/* 전투력 대결 게이지 */
.bm-top { font-size: 13px !important; }
.bm-side { position: relative; transition: text-shadow .3s; }
.bm-side.lead { animation: bmLeadPulse 1.6s ease-in-out infinite; }
@keyframes bmLeadPulse { 0%,100%{ text-shadow:0 0 8px currentColor; } 50%{ text-shadow:0 0 18px currentColor, 0 0 30px currentColor; } }
.bm-vs { font-size: 12px !important; font-weight: 900 !important; color: #c9d1e0 !important;
  padding: 2px 8px; border-radius: 8px; background: rgba(201,209,224,.12); animation: bmVs 1.3s ease-in-out infinite; }
@keyframes bmVs { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.18); filter: drop-shadow(0 0 6px #c9d1e0); } }

.bm-track { height: 24px !important; border-radius: 12px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 0 22px rgba(91,140,255,.12); }
.bm-pro { background: linear-gradient(90deg,#2f6bd6,#4da3ff,#7fc0ff) !important; box-shadow: inset 0 0 14px rgba(120,190,255,.55); position: relative; overflow: hidden; }
.bm-con { background: linear-gradient(90deg,#ff8f8f,#ff5b5b,#c93a3a) !important; box-shadow: inset 0 0 14px rgba(255,120,120,.55); position: relative; overflow: hidden; }
/* 시머 스윕 */
.bm-pro::after, .bm-con::after { content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%); animation: bmSweep 2.4s ease-in-out infinite; }
.bm-con::after { animation-delay: 1.2s; }
@keyframes bmSweep { 0%{ transform: translateX(-120%); } 60%,100%{ transform: translateX(220%); } }
/* 니들 — 펄스 글로우 */
.bm-needle { width: 4px !important; background: linear-gradient(#fff,#dfe8ff) !important;
  box-shadow: 0 0 12px #fff, 0 0 22px rgba(120,180,255,.8) !important; animation: bmNeedle 1.1s ease-in-out infinite; }
@keyframes bmNeedle { 0%,100%{ box-shadow:0 0 10px #fff,0 0 16px rgba(120,180,255,.6); } 50%{ box-shadow:0 0 18px #fff,0 0 34px rgba(120,180,255,1); } }
.bm-needle::before { content:"▼"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:10px; color:#fff; text-shadow:0 0 6px #7fb0ff; }

/* 우세 상태 배지 */
.bm-status { margin-top: 10px !important; font-size: 13px !important; }
.bm-status { display:inline-block; width:auto; padding: 5px 14px; border-radius: 99px;
  background: linear-gradient(135deg, rgba(201,209,224,.16), rgba(201,209,224,.06));
  border: 1px solid rgba(201,209,224,.3); color: #dfe5f0 !important;
  animation: bmStatus 1.8s ease-in-out infinite; }
.bm-war + .bm-status, .bm-status { margin-left: 50%; transform: translateX(-50%); }
@keyframes bmStatus { 0%,100%{ box-shadow: 0 0 0 rgba(201,209,224,0); } 50%{ box-shadow: 0 0 16px rgba(201,209,224,.4); } }

/* 3박스 전황표 — 팝인 등장 + 승세 글로우 + 숫자 강조 */
.bm-war { gap: 9px !important; }
.bmw-box { position: relative; overflow: hidden; animation: bmwPop .5s cubic-bezier(.2,1.3,.4,1) both; }
.bmw-box:nth-child(1){ animation-delay:.05s; } .bmw-box:nth-child(2){ animation-delay:.15s; } .bmw-box:nth-child(3){ animation-delay:.25s; }
@keyframes bmwPop { 0%{ opacity:0; transform: translateY(14px) scale(.9); } 100%{ opacity:1; transform:none; } }
.bmw-stat b { display:inline-block; font-size:20px !important; animation: bmwNum .6s ease; text-shadow: 0 0 10px rgba(255,255,255,.25); }
@keyframes bmwNum { 0%{ transform: scale(1.5); } 100%{ transform: scale(1); } }
.bmw-box.neutral .bmw-stat b { color: #c9d1e0; text-shadow: 0 0 12px rgba(201,209,224,.5); }
/* 승세 진영 박스 — 테두리 글로우 펄스 + 왕관 */
.bmw-box.win::before { content:"👑"; position:absolute; top:5px; right:7px; font-size:13px; animation: bmwCrown 1.4s ease-in-out infinite; }
@keyframes bmwCrown { 0%,100%{ transform: translateY(0) rotate(-6deg); } 50%{ transform: translateY(-3px) rotate(6deg); } }
.bmw-box.win.pro { animation: bmwPop .5s cubic-bezier(.2,1.3,.4,1) both, bmwWinPro 1.6s ease-in-out .5s infinite; }
.bmw-box.win.con { animation: bmwPop .5s cubic-bezier(.2,1.3,.4,1) both, bmwWinCon 1.6s ease-in-out .5s infinite; }
@keyframes bmwWinPro { 0%,100%{ box-shadow: 0 0 0 rgba(91,140,255,0); border-color: rgba(91,140,255,.35); } 50%{ box-shadow: 0 0 20px rgba(91,140,255,.55); border-color: rgba(91,140,255,.9); } }
@keyframes bmwWinCon { 0%,100%{ box-shadow: 0 0 0 rgba(255,77,109,0); border-color: rgba(255,77,109,.35); } 50%{ box-shadow: 0 0 20px rgba(255,77,109,.55); border-color: rgba(255,77,109,.9); } }
/* 전체교전 박스 스캔라인 */
.bmw-box.neutral::after { content:""; position:absolute; left:0; right:0; height:2px; top:0;
  background: linear-gradient(90deg, transparent, rgba(201,209,224,.7), transparent); animation: bmwScan 2.6s linear infinite; }
@keyframes bmwScan { 0%{ top:0; opacity:0; } 10%{opacity:1;} 90%{opacity:1;} 100%{ top:100%; opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .bm-side.lead,.bm-vs,.bm-pro::after,.bm-con::after,.bm-needle,.bm-status,.bmw-box,.bmw-box.win.pro,.bmw-box.win.con,.bmw-box.neutral::after,.bmw-box.win::before{ animation: none !important; }
}

/* ============================================================
   전투 댓글 신원 영역 고도화 (프로필 사진 · 닉네임 · 레벨 · 등급)
   - 헤더는 항상 한 줄. 배지가 2줄로 깨지지 않는다.
   - 프로필 사진 클릭 → 마이페이지 (data-profile-uid 전역 핸들러)
============================================================ */

/* 프로필 사진 */
.c-avatar {
  flex: none;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  line-height: 0;
}
.c-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-avatar:active { transform: scale(.92); }
.c-avatar.anon-av { cursor: default; opacity: .55; }
.c-avatar-c { width: 32px; height: 32px; }   /* 댓글 */
.c-avatar-r { width: 22px; height: 22px; }   /* 답글(단순화) */

/* 진영 링 — 프로필 테두리로 아군/적군 한눈에 */
.comment[data-side="pro"] > .head > .c-avatar { border-color: rgba(77,163,255,.75); }
.comment[data-side="con"] > .head > .c-avatar { border-color: rgba(255,92,92,.75); }

/* 닉네임 — 길면 말줄임(줄바꿈 금지) */
.user .user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
/* 배지들은 절대 줄어들지 않게 */
.user .level-badge,
.user .rel-tag,
.user .ace-badge,
.user .nick-title,
.user .side-icon { flex: none; }

/* 칭호 배지는 댓글 헤더에선 아이콘만 (전체 텍스트는 줄바꿈 유발) */
.comment .nick-title,
.reply .nick-title { display: inline-flex !important; align-items: center; margin-right: 1px; }
.comment .nick-title .nt-name,
.reply .nick-title .nt-name { display: none !important; }
.comment .nick-title .nt-ico,
.reply .nick-title .nt-ico { font-size: 12px; line-height: 1; }

/* 에이스는 왕관 아이콘만 (텍스트 '에이스' 제거로 공간 확보) */
.ace-badge { flex: none; padding: 1px 5px; }

/* HP는 오른쪽 고정 폭 */
.head .hp-wrap { flex: none; margin-left: auto; }

/* ── 대댓글 단순화 ── */
.reply .head { gap: 6px; }
.reply .user { gap: 4px; font-size: 11px; }
.reply .head .hp-wrap { transform: scale(.9); transform-origin: right center; }

/* ============================================================
   모바일 탭 영역 확보
   기존엔 텍스트 크기 그대로라 좋아요 버튼이 23×20px → 손가락으로 못 누름.
   패딩·최소높이를 줘서 실제 누를 수 있는 버튼으로 만든다.
============================================================ */
.actions > .like,
.actions > .dislike,
.actions > .action-attack,
.actions > .action-defend,
.actions > .action-support,
.actions > .action-locked,
.actions > .c-duel,
.actions > .action-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  font-weight: 700;
  touch-action: manipulation;              /* 300ms 지연 제거 */
  -webkit-tap-highlight-color: transparent;
}
.actions > .like:active,
.actions > .dislike:active,
.actions > .action-attack:active,
.actions > .action-defend:active,
.actions > .action-support:active,
.actions > .c-duel:active,
.actions > .action-more:active {
  transform: scale(.94);
  background: rgba(255, 255, 255, .16);
}
.actions { gap: 6px; }
.actions > .action-more { margin-left: auto; padding: 6px 12px; }

/* 답글 액션도 동일하게(살짝 작게) */
.reply-actions > .like,
.reply-actions > .dislike,
.reply-actions > .action-attack,
.reply-actions > .action-defend,
.reply-actions > .action-support,
.reply-actions > .action-locked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.reply-actions > .like:active,
.reply-actions > .dislike:active,
.reply-actions > .action-defend:active,
.reply-actions > .action-support:active { transform: scale(.94); }
.reply-actions { gap: 6px; }

/* ── 하단 메타행: '답글 N'은 실제 버튼, 나머지는 통계 표시 ── */
.reply-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  opacity: 1;
}
.reply-meta .rm-replies {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #dfe4ee;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.reply-meta .rm-replies:active { transform: scale(.95); background: rgba(255,255,255,.16); }
/* 통계는 버튼처럼 보이지 않게 */
.reply-meta .rm-stat {
  color: #8a8f9a;
  font-weight: 700;
  cursor: default;
  user-select: none;
}
/* 답글로 이동 시 잠깐 강조 */
.replies-flash { animation: repliesFlash .9s ease; border-radius: 8px; }
@keyframes repliesFlash {
  0%, 100% { background: transparent; }
  30%      { background: rgba(255, 255, 255, .1); }
}

/* ============================================================
   전선 게이지 구성 분해 (여론 60% + 댓글 대전 40%)
   최종 점수가 무엇으로 만들어지는지 보여줘야
   "댓글을 왜 쓰는가"가 유저에게 전달된다.
============================================================ */
.fl-break {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.fl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.fl-row:last-of-type { margin-bottom: 0; }
.fl-name {
  flex: none;
  width: 104px;
  font-size: 11px;
  font-weight: 800;
  color: #c9d1e0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fl-name em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  color: #8a8f9a;
  background: rgba(255, 255, 255, .07);
  padding: 1px 4px;
  border-radius: 5px;
}
.fl-mini {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 999px;
  background: #ff4f6e;                 /* 반대(con) 바탕 */
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.fl-mini .fl-p {
  display: block;
  height: 100%;
  background: #3356ff;                 /* 찬성(pro) */
  transition: width .6s cubic-bezier(.34,1.35,.5,1);
}
.fl-val {
  flex: none;
  width: 40px;
  text-align: right;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
}
.fl-val small { font-size: 9px; opacity: .6; font-weight: 700; }
.fl-hint {
  margin-top: 9px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8a8f9a;
}
.fl-hint b { color: #c9d1e0; }

/* 역전 중 강조 */
.bm-status.flip {
  color: #ffd977;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 200, 60, .5);
}
.bm-status.flip b { color: #ffdf7a; }

/* 격파된 댓글의 영향력 칩은 0임을 시각적으로 */
.cp-chip.ko { opacity: .4; text-decoration: line-through; }

/* ── 종료 카운트다운 / 정산 결과 배너 ── */
.fl-countdown {
  margin-bottom: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #c9d1e0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.fl-countdown b { color: #fff; font-weight: 900; }
.fl-countdown.urgent {
  color: #ffd977;
  border-color: rgba(255, 200, 60, .45);
  background: rgba(255, 196, 0, .1);
}
.fl-countdown.urgent b { color: #ffdf7a; }
.fl-countdown.ending { color: #ffd977; }

.fl-settled {
  margin-bottom: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fl-settled b { font-weight: 900; }
.fl-settled small {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
}
.fl-settled.pro  { background: linear-gradient(135deg, rgba(51,86,255,.35), rgba(51,86,255,.12)); border: 1px solid rgba(77,163,255,.55); }
.fl-settled.con  { background: linear-gradient(135deg, rgba(255,79,110,.35), rgba(255,79,110,.12)); border: 1px solid rgba(255,92,92,.55); }
.fl-settled.draw { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); color: #c9d1e0; }

/* 🛡 보호막 — 지키는 행위에 아이템을 쓰게 유도하는 액션 + 상태 표시 */
.action-shield{
  display:inline-flex; align-items:center; gap:3px; cursor:pointer;
  padding:4px 9px; border-radius:99px; font-size:11px; font-weight:800;
  color:#9fc6ff; background:rgba(61,107,255,.12); border:1px solid rgba(61,107,255,.35);
  transition:.15s; white-space:nowrap;
}
.action-shield:hover{ background:rgba(61,107,255,.24); color:#fff; }
.action-shield:active{ transform:scale(.96); }
/* 보호막 중인 유닛 — 공격자가 '왜 반만 들어가지?'를 즉시 알게 */
/* 🛡 보호막 유닛 — 한눈에 '방패 켜진 놈'이 보이고, 부수고 싶어지게 */
.comment.shielded, .reply.shielded{
  position:relative;
  animation:shieldBreath 2.2s ease-in-out infinite;
}
@keyframes shieldBreath{
  0%,100%{ box-shadow:0 0 0 1.5px rgba(90,140,255,.55), 0 0 14px rgba(61,107,255,.20), inset 0 0 14px rgba(61,107,255,.07); }
  50%    { box-shadow:0 0 0 2px   rgba(120,170,255,.9),  0 0 30px rgba(80,130,255,.45), inset 0 0 22px rgba(80,130,255,.14); }
}
/* 에너지 빛줄기가 주기적으로 방패 표면을 훑는다 */
.comment.shielded::after, .reply.shielded::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(115deg, transparent 32%, rgba(140,180,255,.15) 45%, rgba(255,255,255,.12) 50%, rgba(140,180,255,.15) 55%, transparent 68%);
  background-size:250% 100%;
  animation:shieldSweep 2.6s linear infinite;
}
@keyframes shieldSweep{ 0%{background-position:130% 0} 100%{background-position:-150% 0} }
.shield-badge{
  margin-left:4px; font-size:13px; vertical-align:1px; display:inline-block;
  filter:drop-shadow(0 0 6px rgba(100,150,255,1));
  animation:shieldFloat 1.7s ease-in-out infinite;
}
@keyframes shieldFloat{ 0%,100%{transform:translateY(0) scale(1); opacity:.85} 50%{transform:translateY(-2px) scale(1.12); opacity:1} }

/* ⚡ 파쇄 실행 — 방패가 깨지는 순간 */
.shatter-flash{
  animation:shatterFlash .5s ease-out !important;
}
@keyframes shatterFlash{
  0%{ box-shadow:0 0 0 3px rgba(160,200,255,1), 0 0 60px rgba(120,170,255,.9), inset 0 0 40px rgba(160,200,255,.5); filter:brightness(1.9); }
  30%{ filter:brightness(1.4); }
  100%{ box-shadow:none; filter:brightness(1); }
}
.shatter-shake{ animation:shatterShake .45s cubic-bezier(.36,.07,.19,.97) !important; }
@keyframes shatterShake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} 100%{transform:none}
}
.shard{
  position:fixed; z-index:12100; pointer-events:none; width:12px; height:12px;
  background:linear-gradient(135deg,#cfe0ff,#5a8cff);
  clip-path:polygon(50% 0, 100% 60%, 20% 100%);
  filter:drop-shadow(0 0 5px rgba(120,170,255,.9));
}
@media (prefers-reduced-motion:reduce){
  .shield-badge, .comment.shielded, .reply.shielded, .comment.shielded::after, .reply.shielded::after{ animation:none }
  .comment.shielded, .reply.shielded{ box-shadow:0 0 0 1.5px rgba(90,140,255,.6), 0 0 18px rgba(61,107,255,.25); }
}

/* 파쇄 전체 화면 섬광 */
.shatter-screen{
  position:fixed; inset:0; z-index:12050; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 45%, rgba(170,200,255,.45), rgba(90,140,255,.12) 55%, transparent 75%);
  animation:shatterScreen .45s ease-out forwards;
}
@keyframes shatterScreen{ 0%{opacity:1} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .shatter-screen{ display:none } }

/* ═══ 전투 버튼 글자 잘림 방지(2026-07-23, 사장님 안드로이드) ═══
   안드로이드 웹뷰 폰트 부스팅이 '참전'을 키워 두 줄로 접혀 잘렸다(아이폰은 정상).
   줄바꿈 금지 + 부스팅 무력화 + 폭 여유. side-btn(진영 선택)도 같은 위험이라 함께. */
.submit-btn, .side-btn, #battle-comment-submit {
  white-space: nowrap;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; letter-spacing: -0.2px;
}
#battle-comment-submit.submit-btn { max-width: none; min-width: 56px; padding: 0 16px; }