/* style.css — リセット・ログイン画面・土台
   （管理画面本体の配色/装飾は app.js が設計どおりのインラインstyleを生成する） */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #33271C;
  background: #EFE9DE;
  -webkit-font-smoothing: antialiased;
}
input, select, button { font-family: inherit; }
input:focus, select:focus { outline: none; border-color: #DD8A2E !important; }
::selection { background: #DD8A2E; color: #fff; }
button { font-family: inherit; }

/* ===== ログイン画面 ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  background: linear-gradient(160deg, #F6F0E4 0%, #EFE9DE 55%, #E7DECC 100%);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border: 1px solid #EADDC8;
  border-radius: 20px;
  padding: 34px 30px 30px;
  box-shadow: 0 24px 50px -28px rgba(51, 39, 28, .45);
  text-align: center;
}
.login-logo { height: 56px; margin-bottom: 14px; }
.login-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; font-weight: 800; color: #33271C;
}
.login-sub { font-size: 12.5px; color: #9A8470; margin: 6px 0 22px; }
.pin-input {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid #DECBAE;
  border-radius: 12px;
  font-size: 24px;
  letter-spacing: .5em;
  text-align: center;
  background: #FCF8F0;
  color: #33271C;
}
.login-error { min-height: 18px; font-size: 12.5px; color: #C9462E; font-weight: 700; margin: 10px 0 4px; }
.login-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: #DD8A2E;
  color: #fff;
  font-size: 16px; font-weight: 800;
  font-family: 'Shippori Mincho', serif;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 14px 24px -12px rgba(221, 138, 46, .85);
}
.login-btn:active { transform: translateY(1px); }
.login-foot { font-size: 11.5px; color: #A8927A; }

/* ===== アプリ土台 ===== */
.app-root { min-height: 100vh; background: #EFE9DE; }

/* 商品写真スロット（image-slot 代替・GASアップロード対応） */
.photo-slot {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: #EADCC6; border-radius: 9px; overflow: hidden; cursor: pointer;
  font-size: 10px; color: #9A8470; text-align: center; line-height: 1.3;
  background-size: cover; background-position: center;
}
.photo-slot.over { outline: 2px solid #DD8A2E; outline-offset: -2px; }
.photo-slot .ph { pointer-events: none; }