body {
  font-family: 'Sawarabi Mincho', serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
}

/* ノイズオーバーレイ */
body::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  z-index: 1000;
  mix-blend-mode: overlay;
}

/* CONTENT */
.content { width: 100%; max-width: 900px; padding: 32px 20px; }

.field-label {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 10px;
  color: var(--cream-dk);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-label::before { content:''; display:inline-block; width:18px; height:2px; background:var(--rust); flex-shrink:0; }
.field-label::after  { content:''; flex:1; height:1px; background:rgba(122,58,26,0.3); }

/* 説明文エリア */
.description-box {
  width: 100%;
  border: 1px solid rgba(122,58,26,0.5);
  background: rgba(42,40,32,0.6);
  padding: 20px 24px;
  margin-bottom: 28px;
  position: relative;
}
.description-box::before {
  content: '用途説明';
  position: absolute;
  top: -1px; left: 20px;
  transform: translateY(-50%);
  background: var(--soot);
  padding: 0 8px;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 10px;
  color: var(--rust-lt);
  letter-spacing: 0.2em;
}
.description-box p {
  font-family: 'Sawarabi Mincho', serif;
  font-size: 13px;
  color: var(--smoke);
  line-height: 2;
  letter-spacing: 0.05em;
}
.description-box p + p {
  margin-top: 10px;
}
.description-box strong {
  color: var(--cream-dk);
  font-weight: normal;
}

/* DROP ZONE */
.drop-zone {
  width: 100%;
  border: 2px solid var(--rust);
  background: var(--iron);
  padding: 52px 32px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 28px;
  overflow: hidden;
}
.drop-zone::before, .drop-zone::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--amber);
  border-style: solid;
}
.drop-zone::before { top:6px; left:6px; border-width:2px 0 0 2px; }
.drop-zone::after  { bottom:6px; right:6px; border-width:0 2px 2px 0; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--amber); background: var(--iron); }

.drop-arrow {
  font-size: 36px;
  color: var(--rust-lt);
  margin-bottom: 14px;
  display: block;
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.drop-main { font-family:'Shippori Mincho B1',serif; font-size:17px; color:var(--stencil); letter-spacing:0.12em; margin-bottom:8px; }
.drop-sub  { font-family:'Shippori Mincho B1',serif; font-size:11px; color:var(--smoke); letter-spacing:0.08em; }
.drop-stamp {
  position:absolute; bottom:10px; right:14px;
  font-family:'Shippori Mincho B1',serif; font-size:9px;
  color:rgba(160,72,32,0.5); border:1px solid rgba(160,72,32,0.3);
  padding:2px 6px; transform:rotate(-3deg); letter-spacing:0.15em; pointer-events:none;
}
#file-input { display:none; }

/* PREVIEW */
.preview-section { display:none; margin-bottom:24px; }
.preview-frame {
  position:relative; background:#000;
  border:2px solid var(--olive); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  max-height:320px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.6);
}
#preview-img { max-width:100%; max-height:320px; display:block; object-fit:contain; }
.crop-line {
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--amber-lt);
  box-shadow:0 0 6px rgba(240,168,32,0.9), 0 0 1px #fff;
  opacity:0; transition:opacity 0.5s; pointer-events:none;
}
#line-left  { left:0; }
#line-right { right:0; }
.crop-label {
  position:absolute; top:8px;
  font-family:'Shippori Mincho B1',serif; font-size:9px;
  color:var(--amber-lt); background:rgba(0,0,0,0.7);
  padding:1px 4px; opacity:0; transition:opacity 0.5s; white-space:nowrap; pointer-events:none;
}
#label-left  { left:6px; }
#label-right { right:6px; }

/* ANALYZING */
.analyzing {
  display:none; margin-bottom:24px;
  border:2px solid var(--olive); background:var(--iron);
  padding:28px 24px; text-align:center;
}
.analyzing-title { font-family:'Shippori Mincho B1',serif; font-size:15px; color:var(--amber-lt); letter-spacing:0.2em; margin-bottom:18px; }
.gauge-track { width:100%; height:10px; background:var(--soot); border:1px solid var(--olive-lt); overflow:hidden; }
.gauge-fill {
  height:100%;
  background: repeating-linear-gradient(90deg, var(--amber) 0px, var(--amber) 8px, var(--amber-lt) 8px, var(--amber-lt) 12px);
  animation: gauge 1.6s ease-in-out infinite;
}
@keyframes gauge { 0%{width:0%;margin-left:0} 50%{width:65%;margin-left:10%} 100%{width:0%;margin-left:100%} }
.analyzing-sub { margin-top:12px; font-family:'Shippori Mincho B1',serif; font-size:10px; color:var(--smoke); letter-spacing:0.12em; animation:blink-t 1.2s step-end infinite; }
@keyframes blink-t { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ERROR */
.error-box {
  display:none; margin-bottom:24px;
  border:2px solid var(--rust); background:rgba(122,58,26,0.15);
  padding:14px 18px; font-family:'Shippori Mincho B1',serif;
  font-size:12px; color:var(--rust-lt); letter-spacing:0.06em;
}

/* NO CROP */
.no-crop-box {
  display:none; margin-bottom:24px;
  border:2px solid var(--olive-lt); background:rgba(58,58,30,0.3);
  padding:14px 18px; font-family:'Shippori Mincho B1',serif;
  font-size:12px; color:var(--olive-lt); letter-spacing:0.06em;
}

/* RESULT */
.result-panel {
  display:none; margin-bottom:24px;
  border:2px solid var(--rust); background:var(--plate);
  position:relative; overflow:hidden;
  animation: stamp-in 0.35s cubic-bezier(0.22,1,0.36,1);
}
@keyframes stamp-in { from{opacity:0;transform:scale(0.97) translateY(6px)} to{opacity:1;transform:none} }
.result-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: repeating-linear-gradient(90deg, var(--rust) 0px, var(--rust) 12px, var(--iron) 12px, var(--iron) 16px);
}
.result-header {
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(122,58,26,0.4);
  display:flex; align-items:center; justify-content:space-between;
  margin-top:3px;
}
.result-header-title { font-family:'Shippori Mincho B1',serif; font-size:11px; color:var(--rust-lt); letter-spacing:0.25em; }
.result-header-no    { font-family:'Shippori Mincho B1',serif; font-size:10px; color:var(--cream-dk); letter-spacing:0.15em; }

.result-grid {
  display:grid; grid-template-columns:1fr 1fr;
  border-top:none;
}
.result-cell {
  padding:20px 22px;
  border-right:1px solid rgba(122,58,26,0.3);
  border-bottom:1px solid rgba(122,58,26,0.3);
  position:relative; overflow:hidden;
}
.result-cell:nth-child(even)    { border-right:none; }
.result-cell:nth-child(3),
.result-cell:nth-child(4)       { border-bottom:none; }

.cell-label {
  font-family:'Shippori Mincho B1',serif;
  font-size:10px; color:var(--cream-dk);
  letter-spacing:0.2em; margin-bottom:10px;
  text-transform:uppercase;
}

.cell-value {
  font-family:'Shippori Mincho B1',serif;
  font-size:clamp(18px,4vw,36px);
  font-weight:400;
  color:var(--cream);
  letter-spacing:0.04em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  display:block;
  width:100%;
}
.cell-value.highlight {
  color:var(--amber-lt);
  font-size:clamp(22px,5vw,42px);
}

.cell-sub {
  font-family:'Shippori Mincho B1',serif;
  font-size:10px; color:var(--smoke);
  letter-spacing:0.12em; margin-top:8px;
}
.result-stamp {
  position:absolute; bottom:8px; right:10px;
  font-family:'Shippori Mincho B1',serif; font-size:8px;
  color:rgba(160,72,32,0.35); border:1px solid rgba(160,72,32,0.2);
  padding:1px 5px; transform:rotate(-2deg); letter-spacing:0.15em;
}

/* EXPORT */
.export-panel {
  display:none; margin-bottom:24px;
  border:2px solid var(--olive); background:var(--iron);
  position:relative; overflow:hidden;
}
.export-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: repeating-linear-gradient(90deg, var(--olive) 0px, var(--olive) 12px, var(--iron) 12px, var(--iron) 16px);
}
.export-header {
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(74,74,42,0.5);
  margin-top:3px;
  font-family:'Shippori Mincho B1',serif; font-size:11px;
  color:var(--olive-lt); letter-spacing:0.25em;
}
.export-body {
  padding:20px 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.export-format {
  font-family:'Shippori Mincho B1',serif; font-size:11px;
  color:var(--smoke); letter-spacing:0.15em;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.export-format label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.export-format input[type=radio] { accent-color:var(--amber); }
.export-btn {
  font-family:'Shippori Mincho B1',serif;
  font-size:14px; letter-spacing:0.15em;
  color:var(--soot);
  background: var(--amber);
  border:none; cursor:pointer;
  padding:10px 22px;
  position:relative;
  transition: background 0.15s, transform 0.1s;
  flex-shrink:0;
}
.export-btn:hover  { background:var(--amber-lt); }
.export-btn:active { transform:scale(0.97); }
.export-btn:disabled { background:var(--smoke); color:var(--iron); cursor:not-allowed; }
.export-progress {
  display:none;
  font-family:'Shippori Mincho B1',serif; font-size:11px;
  color:var(--amber); letter-spacing:0.12em;
  animation:blink-t 1s step-end infinite;
  margin-left:4px;
}
.export-dl-wrap {
  width:100%; margin-top:4px;
  display:none;
}
.export-dl-link {
  display:inline-block;
  font-family:'Shippori Mincho B1',serif; font-size:12px;
  color:var(--amber-lt); letter-spacing:0.1em;
  text-decoration:none;
  border:1px solid rgba(212,137,10,0.5);
  padding:6px 14px;
  transition:border-color 0.15s, color 0.15s;
}
.export-dl-link:hover { border-color:var(--amber-lt); color:#fff; }
.export-dl-info {
  display:block; margin-top:6px;
  font-family:'Shippori Mincho B1',serif; font-size:10px;
  color:var(--smoke); letter-spacing:0.1em;
}

/* LOG */
.log-section { margin-bottom:24px; }
.log-box {
  background:var(--soot);
  border:1px solid rgba(122,58,26,0.4);
  padding:14px 18px;
  font-family:'Shippori Mincho B1',serif;
  font-size:11px; color:var(--smoke);
  line-height:1.9; letter-spacing:0.06em;
  max-height:160px; overflow-y:auto;
}
.log-box::-webkit-scrollbar { width:4px; }
.log-box::-webkit-scrollbar-track { background:var(--soot); }
.log-box::-webkit-scrollbar-thumb { background:var(--rust); }
.log-entry.ok   { color:var(--amber); }
.log-entry.info { color:var(--smoke); }
.log-entry.err  { color:var(--rust-lt); }
.log-entry.head { color:var(--cream-dk); }

/* フッター：margin-top:auto でページ下部に固定 */

@media (max-width:560px){
  .content { padding:24px 14px; }
  .nameplate-inner { padding:20px 14px 16px; }
  .result-grid { grid-template-columns:1fr; }
  .result-cell { border-right:none; }
  .result-cell:nth-child(3){ border-bottom:1px solid rgba(122,58,26,0.3); }
  .result-cell:nth-child(4){ border-bottom:none; }
  .description-box p { font-size:12px; }
}