@charset "UTF-8";

/* BOX同士の上下余白（ギチギチ防止） */
.box30 + .box30 {
  margin-top: 14px;
}

/* base.html の <p> をやめたので、代わりの内容領域 */
.box-content {
  padding: 15px 20px;
}

/* =========================
   アプリ本体
   ========================= */
.app {
  display: grid;
  gap: 12px;
}

/* ドラッグ＆ドロップ領域 */
.dropzone {
  background: #fff;
  border: 2px dashed #77b9ff;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

/* hover/drag中 */
.dropzone:hover {
  background: #f7fbff;
}
.dropzone.is-dragover {
  background: #eef7ff;
  border-style: solid;
}

/* ドロップ領域の文言 */
.dropzone-text {
  font-size: 1.02em;
  font-weight: 400;
}

/* ファイルinputは隠す（クリックはdropzoneから発火） */
.file-input {
  display: none;
}

/* ステータス + 結合ボタンの横並び */
.status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ステータスBOX（改行しない前提に調整） */
.status {
  flex: 1 1 520px;      /* 0 1 → 1 1 にして縮む/伸びる */
  min-width: 0;         /* これが超重要（flex内で省略を効かせる） */
  max-width: 100%;
  box-sizing: border-box;

  font-size: 0.95em;
  line-height: 1.4;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  padding: 10px 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 既存の .button-1 を使う前提。無効時の見た目 */
/* 非活性（ダウンロードボタンと同じ色味） */
.button-1:disabled {
  border-color: #e6c99b !important;
  color: #e6c99b !important;
  background: #fff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.button-1:disabled::after {
  border-top-color: #e6c99b !important;
  border-right-color: #e6c99b !important;
}

/* ★ダウンロードボタンは不要 → 非表示（HTMLに残っててもOK） */
#downloadLink {
  display: none !important;
}

/* プレビュー：今の半分サイズ */
.preview {
  width: 100%;
  height: 46vh;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
/* PDFビューア説明文 */
.viewer-note {
  font-size: 0.9em;
  margin-top: 8px;
  color: #333;
}

.status-row {
  min-width: 0;
  max-width: 100%;
}

.app {
  overflow-x: hidden;
}

/* スマホでは長いファイル名で横はみ出し防止 */
@media (max-width: 600px) {
  .status {
    flex: 1 1 auto;          /* 幅を親に合わせる */
    min-width: 0;            /* これが無いと省略が効かないことがある */
    white-space: nowrap;     /* 1行のまま */
    overflow: hidden;
    text-overflow: ellipsis; /* … にする */
  }

  .status-row {
    flex-wrap: wrap;         /* 念のため */
  }
}