/*
 * 自動型紙アプリ共通UI
 * 各アプリは auto-pattern-* クラスを使い、図形固有の線・入力説明だけを個別CSSに置く。
 */
:root {
  color-scheme: light;
  font-family: "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  color: #4c3929;
  background: #fffdf8;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #fffdf8; }
button, input, select, textarea { font: inherit; }

.auto-pattern-workspace {
  display: grid;
  grid-template-columns: 388px minmax(600px, 1fr);
  min-width: 988px;
  min-height: 100vh;
}
.auto-pattern-form-panel {
  display: flex;
  flex-direction: column;
  padding: 14px 13px 24px;
  border-right: 1px solid #efb35f;
  background: #fffdf8;
}
.auto-pattern-title { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.auto-pattern-title > img,
.auto-pattern-title > svg,
.auto-pattern-title-icon {
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:0;
  border-radius:0;
  object-fit:contain;
  color:#8b5140;
  background:transparent;
  font-size:30px;
}
.mobile-help-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:36px;
  margin:0 0 16px;
  padding:6px 12px;
  border:1px solid #bd4c50;
  border-radius:6px;
  color:#fff;
  background:#dc575c;
  box-shadow:0 2px 0 #8f333733;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
}
.mobile-help-link:hover { background:#c54248; }
.auto-pattern-title-copy { display:grid; gap:4px; color:#705846; line-height:1.45; }
.auto-pattern-title-copy strong { color:#4c3929; font-size:20px; }
.auto-pattern-title-copy small { font-size:13px; }
.auto-pattern-form-panel h1 { margin:0 0 10px; font-size:22px; }
.auto-pattern-intro { margin:0; color:#705846; line-height:1.65; }
.auto-pattern-form {
  display:grid;
  gap:10px;
  margin-top:20px;
  padding:16px;
  border:1px solid #e4be8a;
  border-radius:12px;
  background:#fffaf0;
}
.auto-pattern-form > label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:700; }
.auto-pattern-measurement { display:flex; align-items:center; gap:6px; font-weight:400; }
.auto-pattern-measurement input[type="number"] {
  width:6.2em;
  padding:8px 9px;
  border:1px solid #d7a76e;
  border-radius:8px;
  color:#4c3929;
  background:#fffdf8;
  text-align:right;
}
.auto-pattern-button,
.auto-pattern-links a,
.auto-pattern-actions button,
.auto-pattern-actions a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:6px 12px;
  border:1px solid #957e63;
  border-radius:8px;
  color:#5c4736;
  background:#fffdf8;
  box-shadow:0 2px 0 #5e483733;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.auto-pattern-button:hover,.auto-pattern-links a:hover,.auto-pattern-actions button:hover,.auto-pattern-actions a:hover { background:#fff0dc; }
.auto-pattern-primary { color:#fff !important; background:#957e63 !important; }
.auto-pattern-primary:hover { background:#836a52 !important; }
.auto-pattern-form .auto-pattern-primary { width:100%; margin-top:5px; }
.auto-pattern-note {
  margin:14px 0 0;
  padding:11px 13px;
  border-left:4px solid #db8c4d;
  color:#705846;
  background:#fffaf0;
  font-size:13px;
  line-height:1.65;
}
.auto-pattern-note.is-caution { margin-top:8px; border-left-color:#b66d4d; }
.auto-pattern-line-length-option { display:flex; align-items:center; gap:8px; margin:12px 0 8px; padding:9px 11px; border:1px solid #e4be8a; border-radius:8px; color:#4c3929; background:#fffaf0; font-weight:700; cursor:pointer; }
.auto-pattern-line-length-option input { width:18px; height:18px; margin:0; accent-color:#957e63; }
.auto-pattern-message { min-height:1.6em; margin:12px 0 0; color:#a23427; line-height:1.55; }
.auto-pattern-message.success { color:#176b3a; }
.auto-pattern-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.auto-pattern-links a { padding:7px 10px; font-size:13px; }
.auto-pattern-resource-links { display:grid; gap:8px; margin-top:14px; }
.auto-pattern-resource-links a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:39px;
  padding:7px 13px;
  border:1px solid #957e63;
  border-radius:8px;
  color:#5c4736;
  background:#fffdf8;
  box-shadow:0 2px 0 #5e483733;
  font-weight:700;
  text-decoration:none;
}
.auto-pattern-resource-links a:hover { background:#fff0dc; }
.auto-pattern-copyright { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 11px; margin:14px 0 0; color:#705846; font-size:14px; }
.auto-pattern-copyright a { color:#5c4736; font-weight:700; }
.auto-pattern-canvas-area { display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; min-height:100vh; }
.auto-pattern-toolbar {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
  padding:14px 18px;
  border-bottom:1px solid #efb35f;
  background-color:#fff7dc;
  background-image:linear-gradient(#f28c281f 1px,transparent 1px),linear-gradient(90deg,#f28c281f 1px,transparent 1px);
  background-size:20px 20px;
  box-shadow:0 2px 8px #6d4e381f;
}
.auto-pattern-toolbar-title { display:none; font-size:18px; font-weight:700; }
.auto-pattern-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.auto-pattern-actions .mobile-only { display:none; }
.auto-pattern-actions .desktop-help-link { display:inline-flex; }
.auto-pattern-mobile-header,.auto-pattern-mobile-footer { display:none; }
.auto-pattern-drawing-panel {
  position:relative;
  min-height:640px;
  overflow:hidden;
  background-color:#fffdf8;
  background-image:url("../img/haikei.png");
  background-repeat:repeat;
}
.auto-pattern-canvas { display:block; width:100%; height:100%; min-height:640px; touch-action:none; }
.auto-pattern-canvas.pan-ready { cursor:grab; }
.auto-pattern-canvas.is-panning { cursor:grabbing; }
.auto-pattern-drawing-message {
  position:absolute;
  inset:auto 20px 20px;
  margin:0;
  padding:10px 14px;
  border:1px solid #ebc99e;
  border-radius:8px;
  color:#705846;
  background:#fffdf8e8;
}
.auto-pattern-drawing-message[hidden] { display:none; }
.auto-pattern-grain-label { fill:#315f91; font-family:"BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif; font-size:4px; }
.auto-pattern-credit-copy { fill:#4c3929; font-family:"BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif; font-size:5px; text-anchor:start !important; dominant-baseline:hanging; }
.auto-pattern-line-length { fill:#4c3929; font-family:"BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif; font-size:4px; font-weight:700; }
.auto-pattern-identity-label { text-anchor:start !important; dominant-baseline:hanging; }

@media (max-width:720px) {
  html,body { min-width:0; overflow-x:hidden; }
  .auto-pattern-workspace { display:block; min-width:0; min-height:100dvh; }
  .auto-pattern-canvas-area { display:none; height:auto; min-height:100dvh; grid-template-rows:auto auto auto auto; }
  body.mobile-drawing-mode .auto-pattern-form-panel { display:none; }
  body.mobile-drawing-mode .auto-pattern-canvas-area { display:grid; }
  .auto-pattern-mobile-header { display:flex; align-items:center; gap:8px; min-height:76px; padding:10px 14px; border-bottom:1px solid #efb35f; background:#fffdf8; }
  .auto-pattern-mobile-header img,.auto-pattern-mobile-header svg,.auto-pattern-mobile-header .auto-pattern-title-icon { width:42px; height:42px; object-fit:contain; }
  .auto-pattern-mobile-header span { display:grid; gap:3px; color:#705846; }
  .auto-pattern-mobile-header strong { color:#4c3929; font-size:19px; }
  .auto-pattern-mobile-header small { font-size:12px; }
  .auto-pattern-toolbar { align-items:flex-start; flex-direction:column; min-height:0; padding:8px; }
  .auto-pattern-toolbar-title { display:none; }
  .auto-pattern-actions { width:100%; flex-wrap:wrap; gap:4px; }
  .auto-pattern-actions button,.auto-pattern-actions a { flex:1 1 auto; min-height:34px; padding:5px 6px; font-size:clamp(10px,3.2vw,12px); white-space:nowrap; }
  .auto-pattern-actions [data-action="zoom-out"] { order:1; min-width:30px; }
  .auto-pattern-actions [data-action="fit"] { order:2; }
  .auto-pattern-actions [data-action="zoom-in"] { order:3; }
  .auto-pattern-actions [data-action="print"] { order:4; color:#fff; border-color:#9d8165; background:#9d8165; }
  .auto-pattern-actions [data-action="edit"] { display:inline-flex; order:5; }
  .auto-pattern-actions .desktop-help-link { display:none; }
  .auto-pattern-actions .mobile-info-link { display:inline-flex; order:6; flex:1 1 auto; }
  .auto-pattern-drawing-panel,.auto-pattern-canvas { min-height:70vh; }
  .auto-pattern-mobile-footer { display:grid; gap:9px; padding:16px 6px 10px; border-top:1px solid #efb35f; background-color:#fff7dc; background-image:linear-gradient(#f28c281f 1px,transparent 1px),linear-gradient(90deg,#f28c281f 1px,transparent 1px); background-size:20px 20px; }
  .auto-pattern-mobile-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; }
  .auto-pattern-mobile-links a { display:flex; align-items:center; justify-content:center; min-height:37px; padding:6px; border:1px solid #957e63; border-radius:8px; color:#5c4736; background:#fffdf8; box-shadow:0 2px 0 #5e483733; font-size:clamp(10px,3.1vw,12px); font-weight:700; text-align:center; text-decoration:none; white-space:nowrap; }
  .auto-pattern-mobile-copyright { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 10px; margin:0; color:#705846; font-size:12px; }
  .auto-pattern-mobile-copyright a { color:#5c4736; }
}
@media (max-width:420px) {
  .auto-pattern-form-panel { padding:14px 12px 20px; }
  .auto-pattern-form { padding:13px; }
  .auto-pattern-form > label { font-size:14px; }
  .auto-pattern-measurement input[type="number"] { width:5.4em; }
  .auto-pattern-links { grid-template-columns:1fr; }
}