/* ==========================================================================
   WOS Alliance Hub — 전체 스타일시트
   --------------------------------------------------------------------------
   index.html 의 <style> 에서 분리한 파일입니다 (2026-08). 테마 철학과 각
   규칙의 이유는 아래 주석에 그대로 남아 있습니다. 새 규칙을 넣을 때도
   "왜"를 한 줄 남겨 주세요.
   ========================================================================== */
  /* ==========================================================================
     WHITEOUT SURVIVAL — 도트(픽셀) 콘솔 테마
     --------------------------------------------------------------------------
     - 색: 로고의 빙결 블루/프로스트 화이트 + 화로 불꽃 앰버 포인트
     - 질감: 도트매트릭스 배경 + 스캔라인 오버레이
     - 형태: 라운드 없음(0px), 2px 베벨(좌상 밝게 / 우하 어둡게), 모서리 리벳
     - 서체: Galmuri (한/영/터키어를 모두 지원하는 도트 서체).
             네트워크가 없으면 모노스페이스로 자연스럽게 폴백합니다.
     ========================================================================== */
  /* 도트 서체(Galmuri)는 index.html 의 <link> 로 로드된다 — 큰 제목 전용. */

  :root{
    /* 빙원 — 로고 배경의 짙은 한랭 네이비 */
    --bg:#050c14; --bg2:#0a1826; --panel:#0e2136; --panel2:#143252;
    --steel:#122c45; --line:#1e4a72; --line2:#3a7fb8;
    /* 로고 레터링의 빙결 블루 */
    --accent:#6ec8f5; --accent2:#b5e8ff; --accent-dim:#3d7ea6;
    /* 화로 불꽃 — 포인트로만 쓴다 */
    --ember:#ff8a3d;
    /* 상태 */
    /* muted 는 11~12px 보조 텍스트가 주 용도라 작은 글자 AAA(7:1)에 맞춰 둔다 */
    --text:#e9f4fd; --muted:#9db8d2; --good:#5fd3a0; --warn:#ffb545; --bad:#ff6b6b;
    /* 파생 색 토큰 — 원시 hex 를 규칙 곳곳에 흩뿌리면 테마를 조정할 때 빠뜨린다 */
    --input-bg:#050d16;      /* 입력칸·게이지 홈의 움푹 파인 배경 */
    --btn-ink:#04121e;       /* 밝은 버튼 위의 글자색 */
    --bg-glow:#0d2138;       /* 화면 상단의 광원 그라디언트 시작색 */
    --frost-owner:#b18cff;   /* 프로스트 보호구역 소유자 표시 (맵 캔버스도 cssVar 로 읽음) */
    /* 맵 시설 전용 팔레트 — 색상환에 고르게 펼쳐 서로 헷갈리지 않게 한다.
       일반 상태색(--good·--warn·--bad 등)과 분리해 둬야, 여기서 조정해도
       버튼·토스트 같은 다른 UI 색이 같이 안 흔들린다. */
    --map-hq:#f0c869; --map-mine:#b9d453; --map-facility:#8b9bf5;
    --map-castle:#cd8ef2; --map-stronghold:#ff8fc4;
    --shadow:0 0 0 1px #000, 4px 4px 0 rgba(0,0,0,.55);

    /* 본문 — 라틴은 Electrolize, 한글은 Orbit (글리프 폴백으로 분담).
       둘 다 400 한 굵기뿐이라 bold 는 양쪽 모두 브라우저 합성 굵기로 나온다.
       터키어 특수문자(ş·ğ 등)는 Electrolize 에 없어 뒤 폴백이 받는다. */
    --font-ui:Electrolize,Orbit,Pretendard,"Pretendard Variable",Inter,-apple-system,BlinkMacSystemFont,
      "Segoe UI Variable Text","Segoe UI",Roboto,"Noto Sans KR","Malgun Gothic",sans-serif;
    /* 숫자·코드 */
    --font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"D2Coding",monospace;
    /* 도트 — 로고/제목 전용 */
    --font-dot:Galmuri11,"Galmuri11",ui-monospace,monospace;
  }

  *{box-sizing:border-box}

  /* hidden 속성이 항상 이기게 한다.
     .gate{display:flex} 같은 클래스 규칙은 UA 의 [hidden]{display:none} 보다
     우선하기 때문에, 이 한 줄이 없으면 hidden 을 걸어도 화면에 그대로 남는다. */
  [hidden]{display:none !important}

  /* 브라우저 기본 위젯(달력 팝업 등)을 어두운 테마로 그리게 한다.
     이게 없으면 날짜 선택기가 흰 배경으로 뜨고 아이콘이 배경에 묻힌다. */
  :root{color-scheme:dark}

  /* 스티키 푸터 — 본문이 짧은 탭에서도 푸터가 화면 중간에 뜨지 않도록
     body 를 세로 플렉스로 만들고 main 이 남는 높이를 전부 먹게 한다.
     (스플래시·게이트·모달·토스트는 전부 position:fixed 라 흐름 밖이므로
      플렉스 아이템이 되지 않는다.) */
  body{
    margin:0;font-family:var(--font-ui);color:var(--text);
    min-height:100vh;min-height:100dvh;
    display:flex;flex-direction:column;
    font-size:14px;line-height:1.65;letter-spacing:0;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    background:
      /* 도트매트릭스 */
      radial-gradient(rgba(110,200,245,.055) 1px,transparent 1px) 0 0/4px 4px,
      /* 강철 광원 */
      radial-gradient(900px 500px at 75% -10%,var(--bg-glow) 0%,var(--bg) 60%);
    background-attachment:fixed;
  }
  /* CRT 스캔라인 — 클릭을 막지 않도록 pointer-events 해제.
     줄이 굵고 진하면 글자 획 위에 얹혀 텍스트가 줄무늬로 갉인다.
     분위기만 남기고 가독성을 지키도록 주기를 넓히고 농도를 낮췄다.
     (맵 캔버스는 11px 라벨 때문에 아래에서 아예 이 층 위로 올린다) */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
    background:repeating-linear-gradient(180deg,rgba(0,0,0,.055) 0 1px,transparent 1px 4px);
  }

  /* 공용 베벨: 좌상 하이라이트 / 우하 그림자 = 8비트 금속판 */
  .bevel,section.panel,.stat,button.btn,button.ghost,nav button.active,.toast,
  input,select,textarea{
    border-radius:0;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.10), inset -1px -1px 0 rgba(0,0,0,.65);
  }

  header{
    display:flex;align-items:center;gap:14px;padding:14px 22px;
    border-bottom:2px solid var(--line);
    background:linear-gradient(180deg,var(--steel),var(--panel));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 0 rgba(0,0,0,.5);
    /* 맵 캔버스(z 101)가 스캔라인을 피해 올라와 있으므로, 스크롤 중
       헤더가 맵에 가리지 않도록 그보다 위에 둔다. 토스트(110)보다는 아래. */
    position:sticky;top:0;z-index:102;
  }
  /* 도트 고양이 로고 — SVG 사각형을 픽셀처럼 찍는다.
     header 안팎(로그인 화면)에서 모두 쓰이므로 header 로 한정하지 않는다. */
  .logo{display:flex;align-items:center;line-height:0;
    color:var(--accent);   /* 제목과 같은 빙결 블루 */
    filter:drop-shadow(0 0 6px rgba(110,200,245,.45))}
  /* width/height 를 SVG 속성으로 직접 박아 두므로 CSS 로 크기를 강제하지 않는다.
     height:auto 는 브라우저마다 해석이 달라 로고가 사라지는 일이 있었다. */
  .logo svg{shape-rendering:crispEdges;display:block}
  header h1{font-family:var(--font-dot);font-size:15px;margin:0;letter-spacing:1px;
    text-transform:uppercase;color:var(--accent);
    text-shadow:0 0 8px rgba(110,200,245,.35),2px 2px 0 #000}
  header .tag{color:var(--muted);font-size:12px;letter-spacing:.2px}
  header .spacer{flex:1}
  /* 로고+연맹명 = 홈으로 가는 링크. header 의 flex 아이템 하나로 묶이므로
     안쪽에서 원래의 gap 을 그대로 재현해 모양이 바뀌지 않게 한다.
     전역 a 규칙(파란 글자)이 h1 까지 물들이지 않도록 색은 상속으로 되돌린다. */
  .brand{
    display:flex;align-items:center;gap:14px;
    color:inherit;text-decoration:none;cursor:pointer;
  }
  .brand:hover h1{color:var(--accent2)}
  .brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  /* 로그인 게이트 — 인증 전에는 화면 전체를 덮는다 */
  /* 번역이 적용되기 전 한 프레임 동안 원문(한국어 폴백)이 스쳐 보이는 걸 막는다.
     applyI18n() 이 끝나면 <html> 에 i18n-ready 가 붙는다.
     또한 boot() 이 세션 확인을 끝내기 전까지( .booted 가 붙기 전까지 ) body 를
     숨긴다. 안 그러면 인증 여부가 정해지기 전 대시보드가 잠깐 새어 나온다. */
  html:not(.i18n-ready) body,
  html:not(.booted) body{visibility:hidden}

  /* 부팅(세션 확인) 동안 흰 화면 대신 로딩 스플래시를 보여준다.
     body 가 visibility:hidden 이어도 스플래시만은 보이게 override 한다.
     (visibility 는 상속되지만 자식에서 visible 로 되돌릴 수 있다) */
  #splash{position:fixed;inset:0;z-index:400;visibility:visible;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
    background:radial-gradient(700px 400px at 50% 0%,var(--bg-glow) 0%,var(--bg) 70%)}
  html.booted #splash{display:none}          /* 부팅 끝나면 제거 */
  #splash .logo{transform:scale(1)}
  #splash .cap{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
  /* 도트 느낌의 인디터미닛 바 — 채워진 칸이 좌우로 오간다 */
  .loadbar{width:180px;height:12px;padding:2px;
    background:var(--bg2);border:2px solid var(--line);
    box-shadow:inset 1px 1px 0 rgba(0,0,0,.5)}
  .loadbar>i{display:block;width:38%;height:100%;
    background:var(--accent);
    box-shadow:0 0 0 1px var(--accent2) inset;
    animation:load-slide 1.1s steps(6,end) infinite alternate}
  @keyframes load-slide{from{transform:translateX(0)}to{transform:translateX(163%)}}
  @media (prefers-reduced-motion:reduce){
    .loadbar>i{animation:load-pulse 1s ease-in-out infinite alternate}
    @keyframes load-pulse{from{opacity:.35}to{opacity:1}}
  }

  .gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
    padding:20px;background:radial-gradient(700px 400px at 50% 0%,var(--bg-glow) 0%,var(--bg) 70%)}
  .gate-box{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:2px solid var(--line);padding:26px 22px;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.10),4px 4px 0 rgba(0,0,0,.5)}
  .gate-box .logo{justify-content:center;margin-bottom:2px}
  .gate-box select.lang{align-self:flex-end;margin-right:0}
  .gate-box h2{margin:0;text-align:center}
  .gate-box .hint{margin:0 0 4px}
  .gate-box input{width:100%}
  .gate-msg{font-size:12.5px;min-height:1.3em;color:var(--bad);text-align:center}
  .gate-msg.info{color:var(--muted)}
  select.lang{background:var(--bg2);border:2px solid var(--line2);color:var(--accent2);
    padding:6px 9px;font-size:13px;font-family:inherit;margin-right:10px;cursor:pointer}
  select.lang:hover{border-color:var(--accent)}

  /* 커맨드 카드 스타일 탭 */
  nav{display:flex;gap:4px;padding:12px 22px 0;flex-wrap:wrap}
  nav button, nav a{
    background:linear-gradient(180deg,var(--steel),var(--panel));
    border:2px solid var(--line);color:var(--muted);
    padding:8px 15px;border-radius:0;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.2px;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),3px 3px 0 rgba(0,0,0,.45);
    text-decoration:none;display:inline-flex;align-items:center;gap:5px;
  }
  nav button:hover, nav a:hover{color:var(--accent2);border-color:var(--line2)}
  /* 외부 링크임을 알리는 작은 화살표 */
  nav a.ext::after{content:"↗";font-size:11px;opacity:.7}

  /* 지금 보고 있는 사람 표시 — 도트 테마라 원 대신 작은 사각형을 쓴다 */
  .presence{display:inline-flex;align-items:center;gap:5px;margin-right:10px;cursor:default}
  .presence i{width:9px;height:9px;display:block;background:var(--good);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
  /* 내 자리는 혼자일 때도 항상 같은 색으로 둔다.
     회색으로 흐려 두면 "연결 끊김"처럼 읽혀서 오해를 부른다. */
  .presence i.me{background:var(--accent2)}
  .presence span#presence-n{font-size:12px;color:var(--muted);letter-spacing:.2px}

  /* 아이콘 전용 버튼 (숨김 등) */
  button.icon{padding:6px 8px;line-height:0;display:inline-flex;align-items:center}
  button.icon svg{display:block}

  /* 모달 (숨김 연맹원 목록 등) */
  .modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
    padding:20px;background:rgba(2,8,14,.72)}
  .modal-box{width:100%;max-width:560px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:2px solid var(--line);padding:18px 20px 20px;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),5px 5px 0 rgba(0,0,0,.5)}

  nav button.active{
    color:var(--btn-ink);border-color:var(--accent2);
    background:linear-gradient(180deg,var(--accent2),var(--accent));
    text-shadow:none;box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),0 0 12px rgba(110,200,245,.4);
  }

  /* flex:1 로 남는 높이를 채워 푸터를 바닥으로 밀어낸다.
     가로 auto 마진이 있으면 플렉스 stretch 가 꺼져 내용 폭으로 줄어들므로,
     width:100% 로 예전과 같은 "최대 1120px, 가운데 정렬"을 유지한다. */
  main{padding:20px 22px 60px;max-width:1120px;margin:0 auto;
       width:100%;flex:1 0 auto}

  /* 맵 캔버스 — 격자가 픽셀로 또렷하게 떨어지도록 스무딩을 끈다 */
  #map-wrap{
    margin-top:12px;border:2px solid var(--line);background:var(--bg);
    position:relative;overflow:hidden;height:min(62vh,620px);
    /* 스캔라인(z 100) 위로 올려 캔버스만 원본 그대로 보이게 한다 —
       11px 닉네임 라벨은 옅은 줄무늬에도 획이 뭉갠다.
       헤더(z 102)·토스트(110)·모달(300)은 여전히 이 위에 뜬다. */
    z-index:101;
  }
  /* 수정 모드가 켜져 있는 동안은 테두리로 표시한다 — 스위치를 켜둔 걸 잊고
     맵을 만지다 배치를 흐트러뜨리는 게 이 기능이 막으려는 사고다. */
  #map-wrap.editing{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
  #map-canvas{display:block;width:100%;height:100%;cursor:crosshair;image-rendering:pixelated}
  #map-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--muted)}
  #map-legend span{display:inline-flex;align-items:center;gap:5px}
  #map-legend i{width:10px;height:10px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}

  /* 푸터 — 헤더의 아래 테두리를 위 테두리로 뒤집어 대칭을 맞춘다.
     그라디언트 방향도 반대로 줘서 화면 위아래가 같은 재질로 닫히게 한다. */
  footer{
    flex-shrink:0;   /* 내용이 길어 스크롤이 생겨도 푸터가 눌리지 않게 */
    border-top:2px solid var(--line);
    background:linear-gradient(180deg,var(--panel),var(--steel));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .foot-in{
    max-width:1120px;margin:0 auto;padding:14px 22px;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
    color:var(--muted);font-size:12px;line-height:1.7;
  }
  .foot-brand{font-family:var(--font-dot);color:var(--accent-dim);letter-spacing:.5px}
  .foot-sep{color:var(--line2)}
  .foot-by b{color:var(--accent-dim);font-weight:700}
  .grid{display:grid;gap:12px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

  /* 자원 카운터 느낌의 스탯 타일 */
  .stat{
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:2px solid var(--line);padding:14px 16px;position:relative;
  }
  .stat .n{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--accent);
    text-shadow:0 0 10px rgba(110,200,245,.4),2px 2px 0 #000;
    font-variant-numeric:tabular-nums}
  .stat .l{color:var(--muted);font-size:12px;margin-top:5px;letter-spacing:.2px}
  .stat .sub{font-size:12px;margin-top:2px}
  .stat .n.tier{font-size:19px}

  /* 패널 = 리벳 박은 장갑판 */
  section.panel{
    background:linear-gradient(180deg,var(--panel2) 0%,var(--panel) 100%);
    border:2px solid var(--line);padding:18px;margin-top:14px;position:relative;
  }
  section.panel::before,section.panel::after{
    content:"";position:absolute;width:4px;height:4px;background:var(--line2);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.35);
  }
  section.panel::before{top:5px;left:5px}
  section.panel::after{top:5px;right:5px}

  h2{font-size:14px;margin:0 0 12px;color:var(--accent);
    font-weight:700;letter-spacing:.3px;text-shadow:1px 1px 0 #000}
  h2::before{content:"\25B8 ";color:var(--accent2)}
  h3{font-size:13px;font-weight:700;letter-spacing:.2px;color:var(--accent2)}

  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--steel)}
  th{color:var(--accent2);font-weight:700;font-size:12px;letter-spacing:.2px;
    background:rgba(0,0,0,.25);border-bottom:2px solid var(--line)}
  td{font-variant-numeric:tabular-nums}
  td.mono,td .fid{font-family:var(--font-mono)}
  tr:hover td{background:rgba(110,200,245,.07)}

  .badge{display:inline-block;padding:2px 7px;border-radius:0;font-size:12px;font-weight:600;
    letter-spacing:.2px;background:var(--steel);border:1px solid var(--line2)}
  .badge.r5{background:rgba(255,207,92,.14);color:var(--warn);border-color:var(--warn)}
  .badge.r4{background:rgba(110,200,245,.12);color:var(--accent2);border-color:var(--accent)}

  input,select,textarea{
    /* 테두리는 --line2 — 패널 장식선(--line, 1.8:1)과 달리 입력 가능한 곳은
       경계가 3:1 이상으로 보여야 한다 (WCAG 1.4.11 비텍스트 대비) */
    background:var(--input-bg);border:2px solid var(--line2);color:var(--text);
    padding:7px 10px;font-size:13px;font-family:inherit;letter-spacing:0;
  }
  input::placeholder,textarea::placeholder{color:#6d92b0}   /* 입력 배경 위 5.9:1 */

  /* 날짜/시각 입력 — 칸 어디를 눌러도 달력이 열리도록 넉넉하게 잡는다 */
  input[type=date],input[type=datetime-local]{
    cursor:pointer;min-height:36px;padding-right:34px;position:relative;
    font-family:var(--font-mono);
  }
  input[type=date]:hover,input[type=datetime-local]:hover{border-color:var(--accent)}
  /* 기본 달력 아이콘이 너무 작고 어두워서, 키우고 밝힌 뒤 오른쪽 전체를 덮게 한다 */
  input[type=date]::-webkit-calendar-picker-indicator,
  input[type=datetime-local]::-webkit-calendar-picker-indicator{
    position:absolute;right:0;top:0;width:32px;height:100%;
    margin:0;padding:0 8px;cursor:pointer;opacity:.85;
    filter:invert(72%) sepia(35%) saturate(600%) hue-rotate(165deg) brightness(105%);
  }
  input[type=date]:hover::-webkit-calendar-picker-indicator,
  input[type=datetime-local]:hover::-webkit-calendar-picker-indicator{opacity:1}
  input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--accent);
    box-shadow:inset 1px 1px 0 rgba(0,0,0,.8),0 0 10px rgba(110,200,245,.35);
  }

  button.btn{
    background:linear-gradient(180deg,var(--accent2),var(--accent));
    border:2px solid #2f6d94;color:var(--btn-ink);
    font-family:inherit;font-weight:700;font-size:13px;
    padding:8px 15px;cursor:pointer;letter-spacing:.2px;
  }
  button.btn:hover{filter:brightness(1.12);box-shadow:0 0 14px rgba(110,200,245,.5)}
  button.btn:active{transform:translate(1px,1px)}
  button.ghost{
    background:linear-gradient(180deg,var(--steel),var(--panel));
    border:2px solid var(--line);color:var(--muted);
    font-family:inherit;font-size:12px;font-weight:600;padding:6px 11px;cursor:pointer;
    letter-spacing:.2px;
  }
  button.ghost:hover{color:var(--accent2);border-color:var(--accent)}
  button.ghost:active{transform:translate(1px,1px)}

  .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .muted{color:var(--muted)}

  /* 분절 게이지 — 연속 막대가 아니라 블록이 차오르는 방식 */
  .bar-wrap{background:var(--input-bg);border:1px solid var(--line);flex:1;padding:1px}
  .bar{height:10px;background:
      repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 7px);
    box-shadow:0 0 8px rgba(110,200,245,.45)}

  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    background:var(--panel2);border:2px solid var(--accent);color:var(--accent2);
    padding:11px 18px;font-size:13px;letter-spacing:.2px;
    opacity:0;transition:.2s;pointer-events:none;z-index:110}
  .toast.show{opacity:1;bottom:30px}
  .toast.bad{border-color:var(--bad);color:var(--bad)}
  .toast.good{border-color:var(--good);color:var(--good)}

  .hint{font-size:12.5px;color:var(--muted);margin:-2px 0 12px;line-height:1.75;
    border-left:2px solid var(--steel);padding-left:9px}

  .ev{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--steel)}
  .ev .icon{font-size:19px;width:32px;text-align:center}
  .ev .t{font-weight:400;color:var(--text);letter-spacing:.5px}
  .ev .when{color:var(--muted);font-size:12px}
  .ev .cd{margin-left:auto;font-variant-numeric:tabular-nums;
    color:var(--accent);text-shadow:0 0 8px rgba(110,200,245,.4)}

  code,.mono{font-family:var(--font-mono);background:var(--input-bg);
    border:1px solid var(--steel);padding:1px 5px;font-size:12px;color:var(--accent2)}

  .empty{color:var(--muted);text-align:center;padding:24px;font-size:13px}

  a{color:var(--accent);text-underline-offset:3px}
  a:hover{color:var(--accent2)}


  /* ===== 편성표 카드 ===== */
  .bcard{border:2px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));
    padding:12px 14px;margin-bottom:10px;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),3px 3px 0 rgba(0,0,0,.4)}
  .bcard .icon{font-size:20px;width:30px;text-align:center;flex:none}
  .bcard .t{font-size:15px;font-weight:700;color:var(--text);letter-spacing:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bcard .when{color:var(--accent);font-size:12.5px;font-family:var(--font-mono)}
  /* 참여자 칩 — 아이디는 번역하지 않고 그대로 노출 */
  .who{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;
    border-top:1px solid var(--steel);padding-top:11px}
  .chip{display:flex;align-items:center;gap:7px;background:var(--input-bg);
    border:1px solid var(--line);padding:5px 10px;font-size:13px}
  .chip .nm{color:var(--accent2)}
  .chip .tm{color:var(--accent2);font-family:var(--font-mono);font-size:12.5px;
    border-left:1px solid var(--steel);padding-left:8px}

  /* 명부 검색 콤보 — 입력 아래로 후보 목록이 펼쳐진다 */
  .combo{position:relative}
  .combo>input{width:100%}
  .combo-list{position:absolute;top:100%;left:0;right:0;z-index:60;
    background:var(--bg2);border:2px solid var(--line);border-top:0;
    max-height:250px;overflow:auto;
    box-shadow:4px 4px 0 rgba(0,0,0,.5)}
  .combo-item{padding:6px 10px;cursor:pointer;font-size:13px;
    display:flex;gap:8px;align-items:baseline;justify-content:space-between}
  .combo-item .sub{font-size:12px;color:var(--muted);font-family:var(--font-mono)}
  .combo-item:hover,.combo-item.sel{background:rgba(110,200,245,.14)}
  .combo-item:hover,.combo-item.sel,.combo-item:hover .sub,.combo-item.sel .sub{color:var(--accent2)}
  .combo-item.none{cursor:default;color:var(--muted)}
  .combo-item.none:hover{background:none;color:var(--muted)}

  /* 라벨이 붙은 좁은 입력 (병종 / 이벤트 시각) */
  /* 포인트 옆 총알 아이콘 — 게임의 포인트 표기를 흉내낸 표식.
     data URI 라 파일 요청이 늘지 않고, 어디서든 <i class="bullet"></i> 로 쓴다.
     (SVG 안의 # 은 CSS url() 에서 조각 구분자로 먹히므로 %23 으로 적는다) */
  .bullet{
    display:inline-block;width:8px;height:13px;flex:none;
    vertical-align:-2px;margin-right:4px;
    background:no-repeat center/contain url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'><path d='M4 0 6.9 4.4V7.2H1.1V4.4Z' fill='%23ffd98a'/><rect x='1.1' y='7.2' width='5.8' height='4.3' fill='%23c9922f'/><rect x='1.1' y='11.5' width='5.8' height='1.3' fill='%237d5a1c'/></svg>");
  }
  /* 파란 총알 — 적 처치 포인트 전용. 같은 탄피 모양에 색만 다르다. */
  .bullet.blue{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'><path d='M4 0 6.9 4.4V7.2H1.1V4.4Z' fill='%23a5dcff'/><rect x='1.1' y='7.2' width='5.8' height='4.3' fill='%233d8fd4'/><rect x='1.1' y='11.5' width='5.8' height='1.3' fill='%23205a8c'/></svg>");
  }
  .fset{display:flex;gap:6px;flex-wrap:wrap}
  .f{display:flex;flex-direction:column;gap:2px}
  .f > span{font-size:11px;color:var(--accent-dim);letter-spacing:.3px;font-weight:700}
  .f > input,.f > select{padding:4px 6px;font-size:12px}

  /* 통계 */
  .fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  /* Foundry 회차 목록 — 군단1/군단2 를 나란히. 좁은 화면에선 세로로 쌓인다. */
  .fd-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  @media (max-width:760px){ .fd-cols{grid-template-columns:1fr} }
  .fd-col-h{margin:2px 0 8px;font-size:13px;color:var(--accent2);letter-spacing:.3px}
  /* 고정 구조물 표의 레이어 구분 머리 — 현재는 청색, 계획(To-be)은 호박색.
     맵의 계획 모드 색(신설 표시 --warn)과 맞춰, 표만 봐도 어느 레이어인지 읽힌다. */
  .fac-layer-h{margin:14px 0 6px;font-size:13px;letter-spacing:.3px;
    border-left:3px solid var(--accent);padding-left:8px;color:var(--accent2)}
  .fac-layer-h.plan{border-left-color:var(--warn);color:var(--warn)}
  .fcard{border:2px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));
    padding:12px 14px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),3px 3px 0 rgba(0,0,0,.4)}
  .fcard h4{margin:0 0 9px;font-size:12.5px;color:var(--accent2);font-weight:700;
    display:flex;align-items:baseline;gap:6px}
  .fcard h4 small{color:var(--muted);font-weight:400;font-size:12px;margin-left:auto}
  .brow{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px}
  .brow .k{width:74px;flex:none;color:var(--text);font-family:var(--font-mono)}
  .brow .g{flex:1;background:var(--input-bg);border:1px solid var(--line);height:12px;padding:1px}
  .brow .g i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 7px)}
  .brow .v{width:34px;text-align:right;color:var(--accent2);font-family:var(--font-mono)}
  .brow.miss .k,.brow.miss .v{color:var(--muted)}
  .brow.miss .g i{background:repeating-linear-gradient(90deg,#3a4a5c 0 5px,transparent 5px 7px)}

  /* ===== 반응형 ===== */
  /* 표는 좁아지면 가로 스크롤로 (레이아웃이 깨지는 대신 스크롤) */
  table{display:block;overflow-x:auto;white-space:nowrap}
  @media (min-width:900px){ table{display:table;white-space:normal} }

  @media (max-width:900px){
    main{padding:16px 14px 48px}
    header{padding:12px 14px;gap:10px}
    nav{padding:10px 14px 0}
    .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  }

  @media (max-width:640px){
    body{line-height:1.55}
    header{flex-wrap:wrap}
    header h1{font-size:13px;letter-spacing:1px}
    header .tag{display:none}
    select.lang{margin-right:0}
    .pw{order:3;width:100%}
    .pw input{width:100%}
    nav{gap:3px}
    nav button, nav a{padding:7px 10px;font-size:12px;flex:1 1 auto;justify-content:center}
    section.panel{padding:13px}
    .cards{grid-template-columns:1fr 1fr}
    .stat .n{font-size:21px}
    /* 폼 요소는 한 줄에 하나씩 꽉 채워서 손가락으로 누르기 쉽게 */
    .row > input,.row > select,.row > textarea{flex:1 1 100%;min-width:0}
    .row > button{flex:1 1 auto}
    /* 표 안의 수정/삭제 같은 작은 버튼 — 데스크톱 크기(약 30px)는 손가락엔 너무 작다 */
    table button{min-height:40px;padding:8px 12px}
    .bcard .t{white-space:normal}
    .fgrid{grid-template-columns:1fr}
  }

  @media (max-width:380px){
    .cards{grid-template-columns:1fr}
  }

  /* 모션을 줄이도록 설정한 사용자에게는 전환 효과를 끈다 */
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;scroll-behavior:auto !important}
  }


/* ---- 진행 표시줄 (시트 업데이트 등 기다리는 동안) ----
   폭을 알 수 없는 작업이라 indeterminate: 밝은 조각이 좌우로 흐른다. */
.progress{height:6px;border-radius:3px;overflow:hidden;background:var(--input-bg);
  border:1px solid var(--line);margin:10px 0}
.progress>i{display:block;height:100%;width:38%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  animation:progress-slide 1.1s ease-in-out infinite}
@keyframes progress-slide{0%{margin-left:-38%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){ .progress>i{animation:none;width:100%} }