@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   N-PROTO ファイル便  |  style.css  v2.0
   Grey-Dominant · Steel · Red Accent
   ─ MC 在庫管理 / MC_Schedule のテンプレ踏襲 ─
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg-base:    #2e2e2e;
  --bg-surface: #383838;
  --bg-panel:   #424242;
  --bg-input:   #4c4c4c;
  --bg-hover:   #565656;

  --red:        #c8001e;
  --red-bright: #e8001f;
  --red-dim:    #7a0012;
  --red-glow:   rgba(200,0,30,0.20);

  --grey-100: #f5f5f5;
  --grey-200: #e2e2e2;
  --grey-300: #c0c0c0;
  --grey-400: #969696;
  --grey-500: #707070;
  --grey-600: #5a5a5a;
  --grey-700: #4e4e4e;

  --green:    #5cb85c;
  --green-bg: #2a402a;
  --yellow:   #f0c040;
  --yellow-bg:#3c3010;
  --blue:     #5599cc;
  --blue-bg:  #1f3346;
  --orange:   #e6892c;
  --orange-bg:#3d2a18;

  --font-d: 'Barlow Condensed', sans-serif;
  --font-b: 'Noto Sans JP', sans-serif;
  --font-m: 'JetBrains Mono', monospace;

  --bdr:    1px solid #5a5a5a;
  --bdr-lt: 1px solid #666666;
  --radius: 4px;
  --rad-lg: 8px;
  --trans:  0.16s ease;

  --topbar-h: 56px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg-base);
  color: var(--grey-200);
  font-family: var(--font-b);
  font-size: 13px;
  line-height: 1.6;
  padding-top: var(--topbar-h);
  -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--grey-600); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }
button, input, select, textarea { font-family: inherit; }

/* ══════════════ TOPBAR ══════════════ */

#topbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--topbar-h);
  background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
  border-bottom: 2px solid var(--red);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  display:flex; align-items:center;
  padding:0 20px; gap:14px;
}
.logo-block { display:flex; align-items:baseline; gap:7px; user-select:none; }
.logo-name {
  font-family:var(--font-d); font-size:26px; font-weight:900;
  letter-spacing:0.06em; color:var(--grey-100); text-transform:uppercase;
  cursor:default; user-select:none;
}
.logo-name em { color:var(--red); font-style:normal; }
.logo-sub {
  font-family:var(--font-d); font-size:10px; font-weight:600;
  letter-spacing:0.2em; color:var(--grey-500); text-transform:uppercase;
}
.topbar-divider { width:1px; height:26px; background:var(--grey-600); }
.topbar-title {
  font-family:var(--font-d); font-size:15px; font-weight:600;
  letter-spacing:0.08em; color:var(--grey-300);
}
.topbar-spacer { flex:1; }
.topbar-meta {
  font-family:var(--font-m); font-size:10px; color:var(--grey-500);
  text-align:right; line-height:1.6; white-space:nowrap;
}
.topbar-meta .usage-ok   { color: var(--grey-400); }
.topbar-meta .usage-warn { color: var(--yellow); }

/* ══════════════ レイアウト ══════════════ */

.wrap { max-width: 1020px; margin:0 auto; padding: 22px 18px 60px; }
.wrap-narrow { max-width: 660px; }

.card {
  background: var(--bg-surface);
  border: var(--bdr);
  border-radius: var(--rad-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.card-login { max-width: 420px; margin: 56px auto; }

h1, h2 {
  font-family: var(--font-d);
  letter-spacing: 0.06em;
  color: var(--grey-100);
  font-weight: 700;
}
h1 { font-size: 22px; margin-bottom: 6px; }
h2 { font-size: 18px; margin-bottom: 14px; }
h1::after, h2::after {
  content:''; display:block; width:38px; height:2px;
  background: var(--red); margin-top: 6px;
}

.foot {
  text-align:center; color: var(--grey-600);
  font-family: var(--font-d); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0 0 30px;
}

.muted  { color: var(--grey-400); font-size: 12px; }
.center { text-align:center; }
.note   { color: var(--grey-500); font-size: 11px; margin-top: 14px; }
.err {
  color: #ffb3b3;
  background: rgba(200,0,30,0.14);
  border: 1px solid rgba(200,0,30,0.45);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 9px 13px; margin: 12px 0 0;
  font-size: 12.5px;
}
code {
  background: var(--bg-input);
  color: var(--grey-200);
  font-family: var(--font-m);
  padding: 1px 6px; border-radius: 3px;
  font-size: 11.5px; word-break: break-all;
}

/* ══════════════ ボタン ══════════════ */

.btn {
  display:inline-block;
  background: var(--bg-input);
  border: var(--bdr-lt);
  color: var(--grey-200);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-family: var(--font-d);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: all var(--trans);
}
.btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--grey-400); }
.btn:disabled { opacity: .38; cursor: default; }

.btn-primary {
  background: var(--red); border-color: var(--red);
  color: #fff; font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  background: var(--red-bright); border-color: var(--red-bright);
  box-shadow: 0 0 10px var(--red-glow);
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--grey-400); }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: var(--grey-200); }
.btn-lg { padding: 12px 30px; font-size: 16px; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn-danger { color: #ff9a9a; }
.btn-danger:hover:not(:disabled) { background: var(--red-dim); color:#fff; border-color: var(--red); }

/* ══════════════ 入力 ══════════════ */

input[type=text], input[type=password], input[type=email], select, textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--bg-input);
  border: var(--bdr);
  border-radius: var(--radius);
  color: var(--grey-100);
  font-size: 13px;
  transition: border-color var(--trans), box-shadow var(--trans);
}
input::placeholder, textarea::placeholder { color: var(--grey-500); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red-glow);
}
textarea { resize: vertical; line-height: 1.6; }
select { cursor: pointer; }

label {
  display:block;
  font-family: var(--font-d);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--grey-400);
  text-transform: uppercase;
}
label input, label select, label textarea {
  margin-top: 5px;
  font-family: var(--font-b); font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
.opt {
  font-family: var(--font-b); font-weight: 400;
  margin-left: 8px; font-size: 11px;
  color: var(--grey-500); letter-spacing: 0; text-transform: none;
}

#loginForm { display:flex; flex-direction:column; gap: 12px; margin-top: 16px; }
.pwform { display:flex; gap: 8px; margin-top: 16px; }
.pwform input { flex: 1; }
.setup { display:flex; flex-direction:column; gap: 15px; margin-top: 18px; }

/* チェックボックス行 */
.chk {
  display:flex; align-items:center; gap: 9px;
  font-family: var(--font-b); font-size: 13px;
  color: var(--grey-200); text-transform:none; letter-spacing:0;
  font-weight: 400; cursor: pointer; user-select:none;
}
.chk input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; flex: none;
  accent-color: var(--red); cursor: pointer;
}

/* ══════════════ ドロップ領域 ══════════════ */

.drop {
  border: 2px dashed var(--grey-600);
  border-radius: var(--rad-lg);
  background: var(--bg-panel);
  text-align:center;
  padding: 36px 16px;
  transition: all var(--trans);
}
.drop.over {
  border-color: var(--red);
  background: rgba(200,0,30,0.10);
  box-shadow: inset 0 0 26px var(--red-glow);
}
.drop-main {
  font-family: var(--font-d); font-size: 19px; font-weight: 600;
  letter-spacing: 0.05em; color: var(--grey-200); margin-bottom: 4px;
}
.drop-sub  { color: var(--grey-500); font-size: 11px; margin-bottom: 12px; }
.drop-note { color: var(--grey-500); font-size: 11px; margin-top: 14px; font-family: var(--font-m); }

.filelist { list-style:none; margin-top: 14px; }
.filelist li {
  display:flex; align-items:center; gap: 11px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: var(--bdr);
  border-left: 3px solid var(--grey-600);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-size: 13px;
}
.filelist .fname { flex:1; word-break: break-all; color: var(--grey-200); }
.filelist .fsize { color: var(--grey-400); font-family: var(--font-m); font-size: 11px; white-space:nowrap; }
.filelist .fstat {
  font-family: var(--font-d); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-500); min-width: 5em; text-align:right; white-space:nowrap;
}
.filelist .fstat.done { color: var(--green); }
.filelist li.done-row { border-left-color: var(--green); }
.filelist li.over-limit { border-left-color: var(--red); background: rgba(200,0,30,0.10); }
.filelist .fdel {
  border:none; background:none; cursor:pointer;
  color: var(--grey-500); font-size: 17px; line-height:1; padding: 0 3px;
  transition: color var(--trans);
}
.filelist .fdel:hover { color: var(--red-bright); }

/* ══════════════ 入力グリッド ══════════════ */

.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 22px; }
.grid .col2 { grid-column: 1 / -1; }
.actions { margin-top: 22px; display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

/* ZIP まとめのブロック */
.zipbox {
  grid-column: 1 / -1;
  background: var(--bg-panel);
  border: var(--bdr);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 13px 15px;
}
.zipbox .zip-body { margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.zipbox .zip-body.col1 { grid-template-columns: 1fr; }
.zipbox .zip-note { color: var(--grey-500); font-size: 11px; margin-top: 10px; line-height: 1.6; }

/* ══════════════ 進捗 ══════════════ */

.progress-box { margin-top: 20px; }
.progress {
  height: 12px;
  background: var(--bg-base);
  border: var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
}
.progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--red-dim), var(--red-bright));
  transition: width .2s linear;
}
.progress-text {
  font-family: var(--font-m); font-size: 11.5px;
  color: var(--grey-300);
  margin: 9px 0 11px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* ══════════════ 発行結果 ══════════════ */

.card-result { border-color: var(--green); border-left: 3px solid var(--green); }
.card-result h2::after { background: var(--green); }
.result-url { display:flex; gap: 8px; margin: 14px 0 10px; }
.result-url input {
  flex:1; font-family: var(--font-m); font-size: 12.5px; color: var(--grey-100);
}
#resMailText { margin-top: 14px; font-size: 12.5px; }

/* ══════════════ 一覧テーブル ══════════════ */

.table-scroll { overflow-x:auto; }
.tbl { width:100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px; }
.tbl th {
  font-family: var(--font-d); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey-400);
  background: var(--bg-panel);
  border-bottom: 2px solid var(--grey-600);
  padding: 8px 10px; text-align:left; white-space:nowrap;
}
.tbl td {
  border-bottom: 1px solid var(--grey-700);
  padding: 9px 10px; vertical-align: middle;
}
.tbl tbody tr:hover { background: rgba(255,255,255,0.035); }
.tbl td.num, .tbl th.num { text-align:right; font-family: var(--font-m); font-variant-numeric: tabular-nums; }
.tbl tr.is-expired { color: var(--grey-500); }
.tbl tr.is-expired .t-title { color: var(--grey-500); }
.tbl .t-title { font-weight: 500; color: var(--grey-100); word-break: break-all; }
.tbl .t-url {
  display:block; margin-top: 2px;
  font-family: var(--font-m); font-size: 10.5px;
  color: var(--grey-500); word-break: break-all;
}
.tbl .ops { display:flex; gap: 6px; white-space:nowrap; }

.badge {
  display:inline-block;
  font-family: var(--font-d); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; margin-left: 7px; vertical-align: 2px;
}
.badge-pw     { background: var(--blue-bg);  color: var(--blue);   border: 1px solid var(--blue); }
.badge-zip    { background: var(--orange-bg);color: var(--orange); border: 1px solid var(--orange); }
.badge-expire { background: rgba(200,0,30,0.16); color: #ff8f8f; border: 1px solid var(--red); }

/* ══════════════ 得意先ダウンロード画面 ══════════════ */

body.dl .card { padding: 26px 28px; }
.dl-title {
  font-family: var(--font-d); font-size: 19px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--grey-100); margin-top: 12px;
}
.dl-msg {
  background: var(--bg-panel);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 13px 16px; margin-top: 15px;
  font-size: 13.5px; word-break: break-word;
}
.dl-files { list-style:none; margin-top: 22px; }
.dl-files li {
  display:flex; align-items:center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-panel);
  border: var(--bdr);
  border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 9px;
  transition: border-color var(--trans);
}
.dl-files li:hover { border-color: var(--grey-400); }
.dl-file-name { flex:1; min-width: 55%; font-weight: 500; color: var(--grey-100); word-break: break-all; }
.dl-file-size { color: var(--grey-400); font-family: var(--font-m); font-size: 11.5px; white-space:nowrap; }

.dl-meta { margin-top: 24px; border-top: 1px solid var(--grey-700); padding-top: 15px; font-size: 12.5px; }
.dl-meta > div { display:flex; gap: 12px; padding: 3px 0; }
.dl-meta dt {
  width: 7em; flex:none; color: var(--grey-500);
  font-family: var(--font-d); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding-top: 2px;
}
.dl-meta dd { color: var(--grey-200); }

.zip-hint {
  margin-top: 16px;
  background: var(--blue-bg);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 12.5px; color: #bcd9ef;
}

/* ══════════════ 狭い画面 ══════════════ */

@media (max-width: 720px) {
  #topbar { padding: 0 12px; gap: 9px; }
  .topbar-divider, .topbar-title { display:none; }
  .logo-name { font-size: 21px; }
  .topbar-meta { font-size: 9px; }
  .wrap { padding: 16px 12px 48px; }
  .card { padding: 16px; }
  .grid, .zipbox .zip-body { grid-template-columns: 1fr; }
  .grid .col2 { grid-column: auto; }
  .result-url { flex-direction: column; }
  .dl-meta dt { width: 6em; }
}