/* SPK File Sharing 共通スタイル（CSP の style-src 'self' のため、インラインの style は使わない） */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; color: #1f2933; background: #f5f7fa; line-height: 1.6; }
a { color: #1d5fbf; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 24px; background: #12355b; color: #fff; }
.site-header a, .site-header .brand { color: #fff; text-decoration: none; }
.site-header .brand { font-weight: bold; font-size: 1.1rem; }
/* 社員のメニュー: サービス名の段（濃い紺）とは分けて、白い段にタブの形で並べる */
.menu { display: flex; gap: 4px; padding: 0 24px; background: #fff; border-bottom: 1px solid #d9e2ec; overflow-x: auto; }
.menu a { padding: 10px 14px 7px; border-bottom: 3px solid transparent; color: #486581; text-decoration: none; white-space: nowrap; }
.menu a:hover { color: #12355b; background: #f0f4f8; }
.menu a.active { color: #12355b; border-bottom-color: #12355b; font-weight: bold; }
.site-header .account { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.site-header .account form { margin: 0; }
.content { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
.site-footer { max-width: 1100px; margin: 48px auto 24px; padding: 0 24px; color: #616e7c; font-size: 0.85rem; }
.notice { padding: 10px 16px; border-radius: 4px; background: #e3f9e5; color: #05400a; }
.alert { padding: 10px 16px; border-radius: 4px; background: #ffe3e3; color: #610404; }
.field-error { color: #ab091e; font-size: 0.9rem; }
.error-page { background: #fff; padding: 24px; border-radius: 6px; }
.request-id code { font-size: 1rem; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px; border-bottom: 1px solid #e4e7eb; text-align: left; }
button, .button { padding: 6px 14px; border: 1px solid #12355b; border-radius: 4px; background: #12355b; color: #fff; cursor: pointer; }
.site-header button { background: transparent; border-color: #fff; }
/* ---- 画面の部品の決まり（社員・ログイン・エラーの画面。顧客の画面の個別の指定は下の .customer で上書きする） ----
   ページ見出し（h1）> カードの見出し（.panel > h2）> 項目名（dt・label・th。灰色の小さめの字）> 値（濃い字）の順に、
   大きさ・色・面で区別する。 */
.content h1 { margin: 0 0 20px; font-size: 1.6rem; font-weight: 700; line-height: 1.35; color: #102a43; overflow-wrap: anywhere; }
.page-sub { margin: -14px 0 20px; color: #486581; }
.panel > h2 { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e4e7eb; font-size: 1.1rem; font-weight: 700; color: #12355b; }
.panel > h2 .count { margin-left: 8px; font-weight: normal; font-size: 0.9rem; color: #627d98; }
.content input[type="text"], .content input[type="email"], .content textarea, .content select { padding: 8px 10px; border: 1px solid #9aa5b1; border-radius: 4px; background: #fff; color: #102a43; font: inherit; }
.content input[type="text"]:focus, .content input[type="email"]:focus, .content textarea:focus, .content select:focus { border-color: #1d5fbf; outline: 3px solid #c6dbf7; }
.field-wide { width: 100%; max-width: 32em; }
button, .button { font: inherit; font-size: 0.95rem; line-height: 1.4; padding: 7px 18px; }
.layout-staff td button, .layout-staff td .button, button.copy { padding: 3px 12px; font-size: 0.85rem; }
.button:hover, button:hover:not(:disabled) { filter: brightness(1.15); }
th { background: #f0f4f8; color: #486581; font-size: 0.85rem; font-weight: 600; }
td { vertical-align: middle; }
.panel table { border: 1px solid #e4e7eb; }
.table-scroll { overflow-x: auto; }
.back-link { margin: 8px 0 0; }
.back-link a::before { content: "← "; }
.check-option { margin: 0 0 16px; }
.check-option label { font-weight: bold; }
.check-option .help { margin: 2px 0 0 1.6em; }
.auth { max-width: 480px; margin: 24px auto 0; }
.danger-text { color: #ab091e; font-weight: bold; }
.filename { display: inline-block; max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 640px) {
  .site-header .account { margin-left: 0; }
  .content { padding: 0 12px; }
}

/* ---- 共有（G10〜G14）とアップロードの画面操作（upload.js。C10 でも使う） ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted, .help { color: #616e7c; font-size: 0.9rem; }
.empty { color: #616e7c; }
.required { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: #ab091e; color: #fff; font-size: 0.75rem; }
.field { margin: 0 0 20px; }
.field label, .field .field-label { display: block; font-weight: bold; margin-bottom: 4px; }
.field input[type="text"], .field input[type="email"], .field select, .recipient-row input, .field textarea { padding: 6px 8px; border: 1px solid #9aa5b1; border-radius: 4px; font-size: 1rem; }
.field input[type="text"], .field textarea { width: 100%; }
.recipient-row { display: flex; gap: 8px; margin-bottom: 6px; }
.recipient-row input { flex: 1; max-width: 32em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
button.secondary, .button.secondary { background: #fff; color: #12355b; }
button.danger, .button.danger { background: #ab091e; border-color: #ab091e; color: #fff; }
button.copy, button.remove, button.retry { padding: 2px 10px; font-size: 0.85rem; }
button.remove { background: #fff; color: #12355b; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.button { display: inline-block; text-decoration: none; }
form.inline { display: inline-block; margin: 0 8px 0 0; }
.props { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; background: #fff; padding: 16px; border-radius: 6px; }
.props dt { color: #627d98; font-size: 0.9rem; font-weight: 600; }
.props dd { margin: 0; color: #102a43; word-break: break-all; }
.panel > .props { padding: 0; border: 0; margin: 0 0 16px; }
.panel > .props:last-child { margin-bottom: 0; }
.props ul { margin: 0; padding-left: 1.2em; }
.share-url code, .props code { word-break: break-all; }
.label { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 0.8rem; white-space: nowrap; }
.label-enabled { background: #e3f9e5; color: #05400a; }
.label-disabled { background: #e4e7eb; color: #3e4c59; }
.label-expired { background: #616e7c; color: #fff; }
.label-scan { background: #fff3c4; color: #513c06; }
tr.expired td { background: #f0f2f5; color: #7b8794; }
.drop-area { padding: 28px 16px; border: 2px dashed #9aa5b1; border-radius: 6px; background: #fff; text-align: center; }
.drop-area.dragover { border-color: #1d5fbf; background: #eaf2fd; }
.drop-area p { margin: 0 0 8px; }
.field label.file-select { display: inline-block; font-weight: normal; margin: 0; }
.file-select input[type="file"] { display: none; }
.upload-summary { margin: 8px 0; font-weight: bold; }
.upload-summary.over-limit { color: #ab091e; }
/* 未送信のファイルがあるときの案内（upload.js が作る）。追加しただけで送られたと思われないよう、目立たせる */
.upload-hint { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid #f0b429; background: #fff8e1; color: #513c06; font-weight: bold; font-size: 0.9rem; }
.upload-list { list-style: none; margin: 0; padding: 0; background: #fff; }
.upload-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #e4e7eb; }
.upload-item .filename { flex: 1; min-width: 10em; }
.upload-item .size { width: 6em; text-align: right; color: #616e7c; }
.upload-item progress { width: 120px; }
.upload-item .state { width: 4em; }
.upload-item.status-done .state { color: #05400a; }
.upload-item.status-failed .state { color: #ab091e; font-weight: bold; }
@media (max-width: 640px) {
  .props { grid-template-columns: 1fr; }
  table.shares thead { display: none; }
  table.shares tr, table.shares td { display: block; }
}

/* ---- 顧客の画面（C01〜C12）。社員の画面と同じ部品（.field・.props・.drop-area・.upload-list・.actions・帯）を使い、
   白い面（.panel）にまとめる。社員の画面には .customer を付けないので、ここの指定は社員の画面に影響しない ---- */
.customer { max-width: 800px; margin: 0 auto; }
.customer h1 { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.35; overflow-wrap: anywhere; }
.customer h2 { margin: 0 0 12px; font-size: 1.15rem; }
.customer .lead { margin: 0 0 20px; color: #3e4c59; }
.customer .notice, .customer .alert { margin: 0 0 16px; }
.customer .props { margin: 0 0 16px; border: 1px solid #e4e7eb; }
.panel { margin: 0 0 16px; padding: 20px 24px; border: 1px solid #e4e7eb; border-radius: 6px; background: #fff; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.customer .field input[type="email"] { width: 100%; max-width: 28em; }
.customer .field:last-child { margin-bottom: 0; }
.customer .actions { margin-top: 20px; }
.customer .actions button, .customer .actions .button { padding: 8px 24px; font-size: 1rem; }
.customer .drop-area { background: #f8fafc; }
.customer .upload-list { border-top: 1px solid #e4e7eb; }
.customer .upload-list:empty { border-top: 0; }
.customer .field-error:empty { display: none; }
/* 注意書き: 目立たせすぎず、読み落とされないよう枠の左に色を付ける */
.note { margin: 16px 0 0; padding: 8px 12px; border-left: 4px solid #9aa5b1; background: #f5f7fa; color: #3e4c59; font-size: 0.9rem; }
/* 送信したファイルの一覧（C11。upload.js が li を作る） */
.sent-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e4e7eb; }
.sent-list li { padding: 6px 8px; border-bottom: 1px solid #e4e7eb; overflow-wrap: anywhere; }
/* 「続けて送る」は残り回数があるときだけ文字が入る（無ければ出さない） */
[data-field="continueText"]:empty { display: none; }
/* 送信が完了したら（upload.js がフォームを隠す）、C10 の見出し・宛先ごと隠して C11 だけを見せる */
#c10:has(form[data-upload][hidden]) { display: none; }
/* ダウンロードのファイル一覧（C06） */
.customer table.files { border: 1px solid #e4e7eb; }
.customer table.files th:nth-child(2), .customer table.files td:nth-child(2) { white-space: nowrap; text-align: right; }
.customer table.files td:last-child { text-align: right; white-space: nowrap; }
.customer table.files tfoot td { font-weight: bold; border-bottom: 0; }
.customer .filename { max-width: 32em; }
.zip-panel .help { margin: 12px 0 0; }
.zip-panel [data-zip-creating], .zip-panel [data-zip-done] { margin: 12px 0 0; font-weight: bold; }
.zip-panel .alert { margin: 12px 0 0; }
@media (max-width: 640px) {
  .customer h1 { font-size: 1.35rem; }
  .panel { padding: 16px; }
  .customer .filename { max-width: 100%; }
  .customer table.files thead { display: none; }
  .customer table.files, .customer table.files tbody, .customer table.files tfoot { display: block; }
  .customer table.files tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid #e4e7eb; }
  .customer table.files td { display: block; padding: 0; border: 0; }
  .customer table.files td:first-child { flex: 1 0 100%; min-width: 0; }
  .customer table.files td:nth-child(2) { color: #616e7c; }
  .customer table.files td:last-child { margin-left: auto; }
  .customer .actions button, .customer .actions .button { flex: 1 1 auto; text-align: center; }
}
.panel > input[type="hidden"]:first-child + * { margin-top: 0; }
.customer.error-page h1 { margin-bottom: 12px; }
/* 顧客の画面では、フッターを本文の幅にそろえる（ログイン前の社員の画面 G01〜G04 は変えない） */
.layout-public:has(main .customer) .site-footer { max-width: 848px; }
@media (max-width: 640px) {
  .layout-public:has(main .customer) .site-footer { padding: 0 12px; }
  .customer .props { gap: 0 16px; }
  .customer .props dt { color: #616e7c; font-size: 0.85rem; font-weight: normal; }
  .customer .props dd { margin-bottom: 8px; }
  .customer .props dd:last-child { margin-bottom: 0; }
}
/* 見出しの横にボタンを置く行（G10） */
.page-head { margin: 0 0 20px; }
.page-head h1 { margin: 0; }
table.shares td:first-child { min-width: 7em; }
@media (max-width: 640px) {
  /* 表は列を押しつぶさず、横にスクロールさせる（G10 は縦に並べ替えるので除く） */
  .table-scroll > table:not(.shares) { min-width: 640px; }
  .menu { padding: 0 4px; gap: 0; }
  .menu a { padding: 10px 8px 7px; font-size: 0.875rem; }
  .content h1 { font-size: 1.35rem; }
}
table.shares th:last-child, table.shares td:last-child { white-space: nowrap; }