/* ファイル受け渡し補助ツール
   UI設計ルール: 文字サイズは rem/em、高さは min-height + padding、横並びは flex-wrap、
   タップ領域は 44px 以上、OS文字サイズ 200% でも崩れないこと。 */

:root {
  --c-bg: #f5f7f5;
  --c-surface: #ffffff;
  --c-text: #1d2521;
  --c-muted: #5b655f;
  --c-primary: #1f6f5c;
  --c-primary-dark: #17564a;
  --c-border: #d3dad5;
  --c-focus: #f2b705;
  --c-ok-bg: #e6f4ea;
  --c-ok: #1e6b3a;
  --c-change-bg: #e9f0fb;
  --c-change: #1f4f9a;
  --c-warn-bg: #fff4dc;
  --c-warn: #7a4d00;
  --c-danger: #b3261e;
  --c-danger-bg: #fdecea;
  --c-band: #dff0e8;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.95em; }

.site-header, main { max-width: 52rem; margin: 0 auto; padding: 0 1rem; }
.site-header { padding-top: 1.25rem; }
h1 { font-size: 1.5em; line-height: 1.3; margin: 0 0 0.25em; }
.tagline { margin: 0 0 1rem; color: var(--c-muted); }

.privacy-band {
  background: var(--c-band);
  border-top: 1px solid #b8d9c8;
  border-bottom: 1px solid #b8d9c8;
  padding: 0.75rem 1rem;
  text-align: center;
}

main { padding-top: 1rem; padding-bottom: 1rem; }

/* ---- タブ ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tabs [role="tab"] {
  flex: 1 1 14rem;
  min-height: 3.25rem;
  padding: 0.6em 1em;
  font: inherit;
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-surface);
  border: 2px solid var(--c-primary);
  border-radius: 0.6rem;
  cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"] { background: var(--c-primary); color: #fff; }
.tabs [role="tab"]:focus-visible, .btn:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.lead { margin: 0 0 1rem; }

/* ---- 手順の枠 ---- */
.step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-size: 1.2em;
  line-height: 1.3;
  margin: 0 0 0.75em;
}
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  min-height: 1.8em;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 0.9em;
}

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  min-width: 44px;
  max-width: 100%;
  padding: 0.75em 1.5em;
  font: inherit;
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  border-radius: 0.75rem;
  border: 2px solid var(--c-primary);
  background: var(--c-surface);
  color: var(--c-primary);
  cursor: pointer;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.btn-secondary { font-size: 1em; margin-top: 0.75rem; }
.btn-file { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: default; }

.hint { color: var(--c-muted); font-size: 0.95em; margin: 0.5em 0; }
.small { font-size: 0.9em; }

/* ---- ドロップ枠(マウスのある端末だけ表示) ---- */
.dropzone {
  display: none;
  border: 2px dashed var(--c-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 0.75rem 0;
  text-align: center;
  color: var(--c-muted);
}
@media (hover: hover) and (pointer: fine) { .dropzone { display: block; } }
.dropzone.over { border-color: var(--c-primary); background: var(--c-ok-bg); color: var(--c-primary); }

/* ---- 折りたたみ・チェック ---- */
details { margin: 0.75rem 0; }
summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4em 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-primary);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.35em 0;
}
.check input { width: 1.4em; height: 1.4em; margin: 0.2em 0 0; flex-shrink: 0; }
ul.plain { padding-left: 1.2em; margin: 0.5em 0; }
ul.plain li { margin: 0.35em 0; }
.explain { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 0.75rem; padding: 0 1rem; }
.explain details.sub { margin: 0.25rem 0; border-top: 1px solid var(--c-border); }
.explain details.sub summary { color: var(--c-text); font-weight: 600; }
.explain details.sub p { margin: 0.4em 0 0.8em; }

/* ---- 状態表示 ---- */
.status { min-height: 1.6em; margin: 0.5em 0 0; }
.status.error { color: var(--c-danger); font-weight: 700; }
.summary { font-weight: 700; margin: 0 0 0.75em; }

/* ---- 結果の一覧 ---- */
.item {
  border: 1px solid var(--c-border);
  border-left: 0.4rem solid var(--c-border);
  border-radius: 0.6rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.item.changed { border-left-color: var(--c-change); }
.item.same { border-left-color: var(--c-ok); }
.item.warn { border-left-color: var(--c-warn); }
.item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-bottom: 0.4em; }
.badge {
  display: inline-block;
  padding: 0.1em 0.7em;
  border-radius: 1em;
  font-size: 0.85em;
  font-weight: 700;
  white-space: normal;
}
.badge.kind { background: #e7ebe8; color: var(--c-muted); }
.badge.same { background: var(--c-ok-bg); color: var(--c-ok); }
.badge.changed { background: var(--c-change-bg); color: var(--c-change); }
.badge.removed { background: var(--c-warn-bg); color: var(--c-warn); }
.badge.warn { background: var(--c-warn-bg); color: var(--c-warn); }

.namepair { margin: 0; }
.namepair dt { font-size: 0.85em; color: var(--c-muted); }
.namepair dd { margin: 0 0 0.4em; font-family: ui-monospace, "SF Mono", Consolas, monospace; word-break: break-all; }
.namepair dd.to { font-weight: 700; }
.reasons { margin: 0.25em 0 0; padding-left: 1.2em; font-size: 0.95em; }
.reasons li { margin: 0.15em 0; }
.reasons li.warn { color: var(--c-warn); }
.error-note { background: var(--c-danger-bg); color: var(--c-danger); border-radius: 0.5rem; padding: 0.5em 0.75em; margin: 0.5em 0; }
.zip-counts { margin: 0.5em 0 0; }

.entries { list-style: none; padding: 0; margin: 0; }
.entries li { padding: 0.5em 0; border-top: 1px solid var(--c-border); }
.entries .path { font-family: ui-monospace, "SF Mono", Consolas, monospace; word-break: break-all; }
.entries .path.from { color: var(--c-muted); }
.entries .path.removed { text-decoration: line-through; color: var(--c-muted); }
.entries .why { font-size: 0.9em; color: var(--c-muted); }

/* ---- CSV パネル ---- */
.check.radio { align-items: flex-start; }
.check.radio input { border-radius: 50%; }
.item-name { font-family: ui-monospace, "SF Mono", Consolas, monospace; word-break: break-all; }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; margin: 0.5em 0; }
.field-label { font-weight: 600; }
.select {
  font: inherit;
  min-height: 44px;
  padding: 0.4em 0.6em;
  border: 2px solid var(--c-border);
  border-radius: 0.5rem;
  background: var(--c-surface);
  color: var(--c-text);
  max-width: 100%;
}
.preview-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: 0.5rem; margin: 0.5em 0; }
table.preview { border-collapse: collapse; font-size: 0.9em; }
table.preview td {
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  padding: 0.35em 0.6em;
  vertical-align: top;
  max-width: 14em;
  overflow-wrap: anywhere;
}
table.preview tr:first-child td { background: #f0f3f1; font-weight: 600; }
.warn-text { color: var(--c-warn); }
.convert-to { font-weight: 700; margin: 0.5em 0 0; word-break: break-all; }
.error-note p { margin: 0.25em 0; }

/* ---- HEIC パネル ---- */
.progress { display: block; width: 100%; min-height: 1rem; margin: 0.75rem 0 0.25rem; accent-color: var(--c-primary); }
.item.photo { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.photo .thumb {
  flex: 0 0 auto;
  width: 6rem;
  min-height: 4.5rem;
  background: #eef1ef;
  border-radius: 0.4rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo .thumb img { display: block; max-width: 100%; max-height: 8rem; }
.photo-body { flex: 1 1 14rem; min-width: 0; }
.photo-body .item-head { margin-bottom: 0.25em; }

footer { text-align: center; color: var(--c-muted); padding: 1.5rem 1rem 2rem; }
footer p { margin: 0.25em 0; }