/* XHERTZ PROJECT OS — BLACK
   공연 프로덕션 소프트웨어 톤. 콘솔 앞에서 오래 봐도 눈이 편해야 하고,
   정보 밀도는 높되 어지럽지 않아야 한다.
   색은 상태에만 쓴다. 장식으로 쓰지 않는다. */

:root{
  --bg:#0a0b0d;          /* 화면 바닥 */
  --panel:#131519;       /* 패널 */
  --panel-2:#191c21;     /* 패널 위 한 겹 (표 머리 등) */
  --panel-3:#1f232a;     /* 호버 */
  --side:#08090b;
  --line:#23272e;
  --line-2:#1b1e24;

  --ink:#eef1f5;         /* 본문 */
  --ink-2:#98a1ae;       /* 보조 */
  --ink-3:#616a77;       /* 흐린 것 */

  --accent:#4d9fff;      /* 누를 수 있는 것 */
  --accent-dim:#16283f;
  --red:#ff5c6e;    --red-dim:#2a1216;
  --amber:#e0a83c;  --amber-dim:#2a2112;
  --green:#35c88a;  --green-dim:#0f2820;
  --violet:#a78bfa; --violet-dim:#1f1a33;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",
         "Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg)}
body{color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.6;
     -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2b3038;border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a414b}

/* ---------- 로그인 ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-card{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:34px 28px;display:flex;flex-direction:column;gap:13px}
.brand{font-size:23px;font-weight:700;letter-spacing:.2em;color:#fff}
.brand-sub{font-size:9px;letter-spacing:.24em;color:var(--ink-3);margin:-9px 0 12px;font-weight:600;
  font-family:var(--mono)}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:600;
  color:var(--ink-3);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.login-card input{padding:10px 12px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--ink)}
.login-card input:focus{outline:none;border-color:var(--accent)}
.login-card button{margin-top:8px;padding:11px;border:0;border-radius:6px;background:var(--accent);
  color:#04101f;font-weight:700;cursor:pointer;letter-spacing:.02em}
.login-card button:hover{background:#6bb0ff}
.login-card button:disabled{opacity:.4;cursor:default}
.login-note{font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:2px}
.err{background:var(--red-dim);color:var(--red);border:1px solid #3d1c22;
  padding:8px 10px;border-radius:6px;font-size:12px}

/* ---------- 레이아웃 ---------- */
#app{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.side{background:var(--side);display:flex;flex-direction:column;position:sticky;top:0;
  height:100vh;border-right:1px solid var(--line)}
.side-brand{padding:18px 16px 14px;color:#fff;font-weight:700;letter-spacing:.16em;font-size:14px;
  display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line)}
.side-brand span{font-size:8.5px;letter-spacing:.2em;color:var(--ink-3);font-weight:600;
  font-family:var(--mono)}
#nav{flex:1;padding:8px 7px;overflow-y:auto}
.nav-sec{font-size:9.5px;letter-spacing:.16em;color:#4a525d;padding:14px 9px 5px;font-weight:700;
  font-family:var(--mono)}
#nav a{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 9px;border-radius:5px;color:var(--ink-2);text-decoration:none;font-size:12.5px;
  cursor:pointer;margin-bottom:1px;border-left:2px solid transparent}
#nav a:hover{background:var(--panel-2);color:var(--ink)}
#nav a.on{background:var(--accent-dim);color:#fff;font-weight:600;border-left-color:var(--accent)}
#nav .pill{background:var(--red);color:#1a0509;font-size:9.5px;font-weight:700;
  padding:1px 6px;border-radius:8px;min-width:17px;text-align:center;font-family:var(--mono)}
#nav .pill.n{background:var(--amber);color:#1a1405}
.side-foot{border-top:1px solid var(--line);padding:11px 14px;display:flex;flex-direction:column;gap:1px}
.who{display:flex;flex-direction:column;margin-bottom:6px}
.who b{color:#fff;font-size:12.5px}
.who span{font-size:9.5px;color:var(--ink-3);letter-spacing:.08em;font-family:var(--mono)}
.linkish{background:none;border:0;color:var(--ink-3);text-align:left;padding:2px 0;
  font-size:11.5px;cursor:pointer}
.linkish:hover{color:var(--accent)}

.main{min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:16px 22px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.top h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em;color:#fff}
.crumb{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.top-right{position:relative}
#q{width:240px;padding:7px 12px;border:1px solid var(--line);border-radius:5px;
  background:var(--bg);color:var(--ink);font-size:12.5px}
#q:focus{outline:none;border-color:var(--accent)}
#q::placeholder{color:var(--ink-3)}
.search-pop{position:absolute;right:0;top:38px;width:330px;background:var(--panel);
  border:1px solid var(--line);border-radius:7px;box-shadow:0 14px 40px rgba(0,0,0,.7);
  max-height:62vh;overflow:auto;z-index:40}
.search-pop div{padding:8px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:12.5px}
.search-pop div:last-child{border:0}
.search-pop div:hover{background:var(--panel-3)}
.search-pop small{color:var(--ink-3);display:block;font-size:10.5px;font-family:var(--mono)}
.view{padding:18px 22px 60px;flex:1}

/* ---------- 조각 ---------- */
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.card > h3{margin:0;padding:11px 14px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;font-family:var(--mono);color:var(--ink-2);
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:8px;background:var(--panel-2)}
.card > h3 small{font-weight:400;color:var(--ink-3);font-size:10.5px;letter-spacing:.03em;
  text-transform:none}
.card-body{padding:13px 14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:13px 15px}
.stat .k{font-size:9.5px;color:var(--ink-3);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;font-family:var(--mono)}
.stat .v{font-size:24px;font-weight:650;margin-top:5px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:#fff;line-height:1.1}
.stat .s{font-size:11px;color:var(--ink-3);margin-top:3px}
.stat.hide .v{color:var(--ink-3);font-size:13px;font-weight:600;letter-spacing:0}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:9.5px;color:var(--ink-3);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;font-family:var(--mono);padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--panel-3)}
.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.masked{color:var(--ink-3);font-size:11px;font-style:italic;white-space:nowrap}
td.num,td.mono,th{white-space:nowrap}
.tbl-scroll{overflow-x:auto}
.dim{color:var(--ink-3)}

.tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;white-space:nowrap;font-family:var(--mono);text-transform:uppercase}
.t-gray{background:var(--panel-3);color:var(--ink-2)}
.t-blue{background:var(--accent-dim);color:var(--accent)}
.t-green{background:var(--green-dim);color:var(--green)}
.t-amber{background:var(--amber-dim);color:var(--amber)}
.t-red{background:var(--red-dim);color:var(--red)}
.t-violet{background:var(--violet-dim);color:var(--violet)}

.empty{padding:30px 16px;text-align:center;color:var(--ink-3);font-size:12.5px}
.muted{color:var(--ink-3);font-size:11.5px}
.deny{background:var(--panel);border:1px dashed var(--line);border-radius:7px;
  padding:32px;text-align:center;color:var(--ink-3)}
.deny b{display:block;color:var(--ink-2);margin-bottom:4px;font-size:13.5px}

.btn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);border-radius:5px;
  padding:6px 12px;font-size:11.5px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#04101f;font-weight:700}
.btn.pri:hover{background:#6bb0ff;color:#04101f}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- 탭 ---------- */
.tabs{display:flex;gap:1px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3);
  padding:8px 14px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:#fff;border-bottom-color:var(--accent);font-weight:600}

/* ---------- 확인 필요 ---------- */
.imp{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.imp:last-child{border:0}
.imp .bar{width:2px;align-self:stretch;border-radius:1px;flex:none}
.imp.action .bar{background:var(--red)} .imp.warning .bar{background:var(--amber)}
.imp.info .bar{background:var(--ink-3)}
.imp .msg{flex:1;min-width:0}
.imp .msg b{font-size:12.5px;font-weight:600;color:var(--ink)}
.imp .meta{font-size:10.5px;color:var(--ink-3);margin-top:3px;font-family:var(--mono)}

/* ---------- 캘린더 ---------- */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cal-head b{font-size:15px;color:#fff}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  /* 1fr 은 '내용 크기 아래로는 안 줄어든다'는 뜻이라, 공연명이 긴 날의
     칸만 넓어지고 빈 날은 좁아진다. 폰에서 일·월·화가 손톱만 해지고
     토요일이 화면 밖으로 잘려 나갔다. minmax(0,1fr) 이라야 칠 칸이
     정말로 똑같이 나뉜다. */
  border:1px solid var(--line);border-radius:7px;overflow:hidden}
.cal .dow{background:var(--panel-2);padding:6px;text-align:center;font-size:9.5px;
  font-weight:700;color:var(--ink-3);font-family:var(--mono);letter-spacing:.1em}
.cal .day{background:var(--panel);min-height:92px;padding:4px 5px}
.cal .day.out{background:var(--bg)}
.cal .dn{font-size:10.5px;color:var(--ink-3);font-weight:700;margin-bottom:3px;font-family:var(--mono)}
.cal .day.sat .dn{color:var(--accent)} .cal .day.sun .dn{color:var(--red)}
.ev{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:2px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.show{background:var(--red-dim);color:var(--red);font-weight:700}
.ev.setup{background:var(--accent-dim);color:var(--accent)}
.ev.rehearsal{background:var(--amber-dim);color:var(--amber)}
.ev.strike{background:var(--panel-3);color:var(--ink-2)}
.ev.load_in,.ev.load_out{background:var(--green-dim);color:var(--green)}

/* ---------- 상세 ---------- */
.back{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-size:12px;
  margin-bottom:10px}
.kv{display:grid;grid-template-columns:82px 1fr;gap:6px 12px;font-size:12.5px}
.kv dt{color:var(--ink-3);font-size:11.5px}
.kv dd{margin:0;color:var(--ink)}
.flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:13px 14px}
.step{border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-size:11px;
  background:var(--bg);text-align:center;min-width:70px;color:var(--ink-3)}
.step.done{background:var(--green-dim);border-color:#1c3b30;color:var(--green);font-weight:700}
.step.now{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:700}
.step small{display:block;font-size:9px;opacity:.85;font-weight:500;font-family:var(--mono)}
.arrow{color:var(--ink-3);font-size:10px}

.banner{background:var(--amber-dim);color:var(--amber);border:1px solid #3a2d14;
  padding:9px 13px;border-radius:6px;margin-bottom:14px;font-size:12px;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.banner.red{background:var(--red-dim);color:var(--red);border-color:#3d1c22}
.banner button{background:var(--amber);color:#14100a;border:0;border-radius:4px;
  padding:4px 12px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.banner.red button{background:var(--red);color:#180509}
.banner button:hover{filter:brightness(1.15)}

/* ---------- 폼 · 모달 ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;
  z-index:80;padding:20px}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:22px;
  width:100%;max-width:460px;display:flex;flex-direction:column;gap:11px;max-height:86vh;overflow:auto}
.modal-card h2{margin:0;font-size:15px;color:#fff}
.modal-card label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;
  color:var(--ink-3);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.modal-card input,.modal-card select,.modal-card textarea{padding:8px 10px;border:1px solid var(--line);
  border-radius:5px;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:12.5px}
.modal-card textarea{min-height:96px;resize:vertical}
.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{
  outline:none;border-color:var(--accent)}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- 게시글 ---------- */
.post-body{white-space:pre-wrap;font-size:13px;line-height:1.75;color:var(--ink);padding:16px 18px}
.post-links{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 14px}
.cmt{padding:11px 18px;border-top:1px solid var(--line-2);font-size:12.5px}
.cmt .who{flex-direction:row;gap:8px;align-items:baseline;margin-bottom:3px}
.cmt .who b{font-size:12px} .cmt .who span{font-size:10px}

/* ---------- 도시 목록 ---------- */
.legs{display:flex;flex-direction:column}
.leg{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-2);
  cursor:pointer}
.leg:last-child{border:0}
.leg:hover{background:var(--panel-3)}
.leg .no{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);width:24px;flex:none}
.leg .city{font-weight:650;color:#fff;min-width:96px}
.leg .meta{color:var(--ink-3);font-size:11.5px;font-family:var(--mono);flex:1}

@media (max-width:860px){
  #app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto}
  #nav{display:flex;gap:3px;padding:7px} .nav-sec{display:none}
  .side-foot{border:0;flex-direction:row;gap:10px} .who{display:none}
  #q{width:140px} .view{padding:14px} .cal .day{min-height:60px}
}

/* ============================================================
   폰 화면 (공연장에서 폰으로 보는 경우)
   ------------------------------------------------------------
   직원들이 해외 공연장에서 폰으로 본다. 그래서 여기가 중요하다.

   처음에는 '가로 스크롤이 생기는가' 만 재고 "정상" 이라고 했다.
   그런데 화면을 실제로 찍어 보니 엉망이었다.
     · 메뉴 글자가 한 글자씩 세로로 쪼개졌다  (미/수/금/관/리)
     · 표 오른쪽이 잘려 나가 금액이 "22,000..." 에서 끊겼다
     · 거래처 이름이 아무 데서나 줄바꿈됐다
   가로로 안 밀린 이유는 '넘친 게 아니라 잘리고 쪼개졌기' 때문이다.
   숫자는 정상이라고 했고 그림은 아니라고 했다. 그림이 맞았다.
   ============================================================ */
@media (max-width:640px){

  /* 메뉴 : 한 줄로 눕히고 옆으로 밀어서 본다.
     글자가 쪼개지지 않는 것이 가장 중요하다. */
  .side{padding:0}
  #nav{
    display:flex; flex-wrap:nowrap;          /* 줄바꿈 금지 */
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:2px; padding:6px 8px;
    scrollbar-width:none;
  }
  #nav::-webkit-scrollbar{display:none}
  #nav a{
    flex:0 0 auto;                            /* 줄어들지 않게 */
    white-space:nowrap;                       /* 글자 쪼개짐 방지 */
    padding:8px 11px; font-size:13px;
    border-left:0; border-radius:6px;
  }
  #nav a.on{border-left:0; background:var(--accent-dim)}
  #nav .pill{margin-left:5px}

  .side-foot{
    flex-wrap:nowrap; overflow-x:auto; gap:8px;
    padding:6px 8px; font-size:12px; white-space:nowrap;
  }
  .side-foot a,.side-foot button{flex:0 0 auto; white-space:nowrap}

  /* 표 : 잘라내지 말고 옆으로 밀 수 있게 한다.
     폰에서 표를 억지로 접으면 숫자를 비교할 수가 없다.
     밀어서 보는 편이 낫다. */
  /* 표가 .card 바로 아래 있을 때도, 한 겹 더 싸여 있을 때도 잡히게 한다.
     처음에는 '.card > table' 로만 적었는데, 미수금 화면의 표는
     id 가 붙은 상자 안에 한 겹 더 들어 있어서 안 걸렸다.
     그래서 표는 그냥 화면 너비로 찌그러졌고 오른쪽 칸이 잘렸다. */
  .card table{min-width:520px}
  .card{overflow-x:auto; -webkit-overflow-scrolling:touch}
  th,td{padding:7px 9px; font-size:12px}

  /* 한글 이름이 한 글자씩 끊기지 않게.
     keep-all 은 한국어를 낱말 단위로 끊는다. */
  td{word-break:keep-all; overflow-wrap:break-word}
  td:first-child{min-width:118px}

  /* 숫자 카드는 두 칸이 아니라 한 칸씩 (폰에서 두 칸은 너무 좁다) */
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .stat .v{font-size:26px}

  .view{padding:12px 11px}
  #page-title{font-size:19px}
  .modal .box{max-width:100%; padding:16px}

  /* 달력 : 칸을 억지로 줄이면 공연명을 못 읽는다.
     제 너비를 지키고 옆으로 밀어서 보게 한다. */
  .cal-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -11px; padding:0 11px}
  .cal{min-width:560px}
  .cal .day{min-height:70px}

  /* 손가락으로 누를 수 있는 크기 */
  .btn,button{min-height:40px}
  input,select,textarea{font-size:16px}   /* 16px 미만이면 아이폰이 확대해 버린다 */
}