/* スタンプフォト：スマホ向けのスタイル */

/* 画像に入れる文字のフォント（アプリに同梱。ライセンスは fonts/OFL.txt） */
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --paper: #f8f4ec;
  --ink: #b8322a;
  --text: #2b2723;
  --muted: #7a7169;
  --line: #e2dacd;
  --card: #fffdf8;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  background: var(--paper);
  color: var(--text);
  overscroll-behavior: none;
}
[hidden] { display: none !important; }

.view { position: fixed; inset: 0; display: flex; flex-direction: column; }
.bar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background: var(--ink); color: #fff;
}
.bar h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: .05em; }
.back { background: none; border: none; color: #fff; font-size: 16px; padding: 4px 6px 4px 0; }
.bar-btn { margin-left: auto; background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.5); padding: 6px 10px; font-size: 13px; }
.bar-btn.icon { padding: 6px 9px; font-size: 15px; line-height: 1; }
.credits { margin: 0; font-size: 13px; line-height: 1.6; }
.credits dt { color: var(--muted); font-size: 12px; margin-top: 8px; }
.credits dt:first-child { margin-top: 0; }
.credits dd { margin: 0; }
.credits a { color: inherit; }
.wide { width: 100%; margin-top: 10px; }
.steps { margin: 4px 0 0; padding-left: 1.4em; font-size: 13px; line-height: 1.7; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.actions {
  display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom));
  background: var(--card); border-top: 1px solid var(--line);
}
.actions .big { flex: 1; }

button { font: inherit; border-radius: 10px; cursor: pointer; }
.primary { background: var(--ink); color: #fff; border: none; padding: 12px 16px; font-weight: 700; }
.primary:disabled { opacity: .5; }
.ghost { background: var(--card); color: var(--text); border: 1px solid var(--line); padding: 10px 14px; }
.danger { background: var(--card); color: #b00020; border: 1px solid #e8b4b4; padding: 10px 14px; }
.big { font-size: 17px; padding: 14px; }
.small { padding: 8px 10px; font-size: 14px; white-space: nowrap; }

/* 一覧 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: left; padding: 0; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #fff; }
.card .cap { padding: 6px 8px 8px; }
.card .place { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .addr { color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .date { color: var(--muted); font-size: 12px; }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; line-height: 1.7; }
.empty-title { font-size: 18px; color: var(--text); font-weight: 700; }
.tips { text-align: left; display: inline-block; margin: 8px auto 0; }

/* 範囲調整 */
.hint { margin: 0; padding: 8px 12px; font-size: 14px; color: var(--muted); text-align: center; }
.stage { flex: 1; position: relative; background: #222; touch-action: none; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 写真の拡大・縮小ボタン（範囲調整の画面の右下） */
.zoom-ctrl { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.zoom-ctrl button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.55); color: #fff; font-size: 22px; line-height: 1; padding: 0;
}
.zoom-ctrl button.text { font-size: 12px; }
.zoom-ctrl button:active { background: rgba(0,0,0,.8); }
.toolbar { display: flex; gap: 8px; padding: 8px 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.seg button { border: none; border-radius: 0; background: none; padding: 9px 14px; color: var(--text); }
.seg button.on { background: var(--ink); color: #fff; }

/* 仕上げ */
.preview-pane {
  position: relative; flex: 0 0 auto; height: 44vh; padding: 10px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); background: #efe9de;
}
#preview-canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.busy { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.busy.center { right: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; padding: 10px 16px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 auto 12px; max-width: 480px; }
.row { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; margin: 12px 0 6px; }
.row:first-child { margin-top: 0; }
.row span { color: var(--muted); font-weight: 400; }
.note { color: var(--muted); font-size: 12px; margin: 6px 0 0; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
input[type=range] { width: 100%; accent-color: var(--ink); }
input[type=text], input[type=datetime-local], textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
}
.inline { display: flex; gap: 6px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; color: #fff; font-size: 12px; padding: 0; }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset; }
.swatch.auto { width: auto; min-width: 52px; border-radius: 20px; padding: 0 10px; font-weight: 700; }

/* 詳細 */
.detail-img { width: 100%; max-width: 520px; display: block; margin: 0 auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.info { max-width: 520px; margin: 14px auto; display: grid; grid-template-columns: 5.5em 1fr; gap: 6px 10px; font-size: 14px; }
.info dt { color: var(--muted); }
.info dd { margin: 0; word-break: break-all; }
.detail-actions { max-width: 520px; margin: 0 auto 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-actions .full { grid-column: 1 / -1; }
.legal-note { max-width: 520px; margin: 0 auto 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.note a { color: inherit; }

.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%);
  background: rgba(30,30,30,.9); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 14px; z-index: 10;
}