:root {
  font-family: "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  color: #4c3929;
  background: #fff7dc;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fffdf8;
}

.sleeve-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 7px 12px;
  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;
}

.sleeve-title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.sleeve-title img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.sleeve-title strong { font-size: 18px; }

.sleeve-title-copy { display:grid; gap:3px; color:#705846; font-size:13px; line-height:1.45; }

.mobile-help-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:36px;
  margin:13px 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; }

.sleeve-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.sleeve-actions button,
.sleeve-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #957e63;
  border-radius: 8px;
  color: #5c4736;
  background: #fffdf8;
  box-shadow: 0 2px 0 #5e483733;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.sleeve-actions button:hover,
.sleeve-actions a:hover { background: #fff0dc; }
.mobile-only { display:none !important; }
.mobile-action-label { display:none; }
.auto-pattern-mobile-header, .auto-pattern-mobile-footer { display:none; }

.sleeve-stage {
  position: relative;
  min-height: 0;
  background: #fffdf8;
}

#cadFrame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fffdf8;
}

.loading-message {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  max-width: min(520px, calc(100% - 28px));
  padding: 12px 16px;
  border: 1px solid #efb35f;
  border-radius: 10px;
  color: #705846;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 4px 16px #6d4e3826;
  font-size: 15px;
  pointer-events: none;
}

.loading-message[hidden] { display: none; }

@media (max-width: 920px) {
  body { overflow: auto; }
  .sleeve-toolbar { align-items: flex-start; }
  .sleeve-title strong { font-size: 16px; }
  .sleeve-actions button,
  .sleeve-actions a { min-height: 34px; padding: 5px 9px; font-size: 13px; }
  .sleeve-stage { min-height: 720px; }
}

/* 袖専用の自動型紙作成画面 */
html, body { min-height:100%; height:auto; overflow:auto; }
body { display:block; background:#fffdf8; }
.sleeve-workspace { display:grid; grid-template-columns:388px minmax(600px,1fr); min-width:988px; min-height:100vh; }
.sleeve-form-panel { display:flex; flex-direction:column; align-items:stretch; padding:14px 13px 24px; border-right:1px solid #efb35f; background:#fffdf8; }
.sleeve-form-panel h1 { margin:0 0 10px; font-size:22px; }
.sleeve-form-panel h2 { margin:0; font-size:17px; }
.intro,.help { margin:0; color:#705846; line-height:1.65; }
.simple-formula-note { margin:10px 0 0; color:#8b5140; font-size:13px; line-height:1.65; }
.sleeve-guide-image { display:block; width:50%; max-width:180px; aspect-ratio:1; margin:0 0 17px; border:1px solid #efb35f; object-fit:contain; background:#fff; }
.intro + .intro { margin-top:4px; }
.input-group { display:grid; gap:10px; margin-top:24px; padding:16px; border:1px solid #e4be8a; border-radius:12px; background:#fffaf0; }
.formula { margin:0; color:#8b5140; font-weight:700; line-height:1.6; }
.draw-button { width:100%; margin-top:10px; color:#fff; border-color:#957e63; background:#957e63; }
.draw-button:hover { background:#ad967d; }
.form-message { min-height:1.6em; margin:14px 0 0; color:#a23427; line-height:1.55; }
.form-message.success { color:#176b3a; }
.sleeve-canvas-area { display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; min-height:100vh; background:#fffdf8; }
.sleeve-canvas-area .sleeve-toolbar { min-height:72px; padding:14px 18px; }
.drawing-panel { position:relative; min-height:640px; overflow:hidden; background-color:#fffdf8; background-image:url("../../img/haikei.png"); background-repeat:repeat; }
#sleeveSvg { display:block; width:100%; height:100%; min-height:640px; touch-action:none; background:transparent; }
#sleeveSvg.pan-ready { cursor:grab; }
#sleeveSvg.is-panning { cursor:grabbing; }
.drawing-message { position:absolute; inset:auto 20px 20px; margin:0; padding:10px 14px; border:1px solid #ebc99e; border-radius:8px; color:#705846; background:#fffdf8e8; }
.drawing-message[hidden] { display:none; }
.cut-line { fill:none; stroke:#202020; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.grain-line { fill:none; stroke:#315f91; stroke-width:1; stroke-dasharray:7 4; vector-effect:non-scaling-stroke; }
.grain-tag { fill:#315f91; font-weight:700; text-anchor:start; }
.notch { fill:#315f91; stroke:#fffdf8; stroke-width:.8; vector-effect:non-scaling-stroke; }
.sleeve-label { fill:#4c3929; font-size:18px; text-anchor:middle; }
.sleeve-detail { fill:#705846; font-size:13px; text-anchor:middle; }
.sleeve-side-label { fill:#8b5140; font-size:14px; font-weight:700; text-anchor:end; }
.seam-allowance-notice { fill:#4c3929; text-anchor:middle; }
.question-dialog { width:min(520px, calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid #d7a76e; border-radius:14px; color:#4c3929; background-color:#fffdf8; background-image:url("../../img/haikei.png"); background-repeat:repeat; box-shadow:0 12px 40px #4c392966; }
.question-dialog::backdrop { background:#4c392966; }
.question-form { padding:24px; overflow:auto; }
.question-step { display:grid; gap:14px; }
.question-step[hidden] { display:none; }
.question-form h1 { margin:0; font-size:22px; }
.question-form h2 { margin:0; font-size:21px; }
.question-form label { display:grid; gap:7px; margin-top:4px; font-weight:700; }
.question-form input[type="number"] { width:100%; padding:10px 12px; border:1px solid #d7a76e; border-radius:8px; background:#fffdf8; font:inherit; text-align:right; }
.compact-measurement { display:flex; align-items:center; gap:6px; width:max-content; font-weight:400; }
.question-form .compact-measurement input[type="number"] { width:5.5em; padding:10px 8px; text-align:center; }
.question-form .inline-dimension { display:flex; align-items:center; gap:10px; margin:4px 0; }
.question-form .armhole-dimension { justify-content:center; gap:2em; }
.cuff-step .inline-dimension { justify-content:center; }
.sleeve-start-image { display:block; width:min(50%, 180px); aspect-ratio:1; margin:0 auto; border:1px solid #efb35f; object-fit:contain; background:#fff; }
.question-start-actions { display:flex; justify-content:center; gap:10px; margin-top:4px; }
.question-start-actions > * { display:flex; align-items:center; justify-content:center; min-height:42px; margin:0; padding:7px 10px; border-radius:8px; font:inherit; font-weight:700; text-align:center; text-decoration:none; }
.question-start-actions .question-help-link { flex:1 1 auto; }
.question-start-actions .draw-button { flex:0 1 27%; }
.question-start-actions .question-help-link { border:1px solid #bd4c50; color:#fff; background:#dc575c; box-shadow:0 2px 0 #8f333733; }
.question-start-actions .question-help-link:hover { background:#c54248; }
.question-start-actions .draw-button { width:auto; border:1px solid #957e63; color:#fff; background:#957e63; }
.armhole-guide { display:block; width:100%; max-width:420px; margin:0 auto; border:1px solid #e4be8a; border-radius:8px; background:#fff; }
.shoulder-height-guide { display:block; width:100%; max-width:420px; margin:0 auto; border:1px solid #e4be8a; border-radius:8px; background:#fff; }
.sleeve-length-guide { display:block; width:100%; max-width:420px; margin:0 auto; border:1px solid #e4be8a; border-radius:8px; background:#fff; }
.question-form input[type="range"] { width:100%; margin:0; accent-color:#b66d4d; }
.range-labels { display:flex; justify-content:space-between; font-weight:700; }
.question-form output { color:#8b5140; font-weight:700; text-align:center; }
.question-actions { display:flex; justify-content:center; gap:10px; margin-top:4px; }
.question-actions button { flex:0 1 35%; width:35%; min-height:42px; margin-top:0; border:1px solid #957e63; border-radius:8px; color:#5c4736; background:#fffdf8; font:inherit; font-weight:700; cursor:pointer; }
.question-actions .draw-button { width:35%; margin-top:0; color:#fff; background:#957e63; }
.question-error { min-height:1.5em; margin:12px 0 0; color:#a23427; line-height:1.55; }
.formula-box { padding:13px 15px; border:1px solid #e4be8a; border-radius:10px; color:#705846; background:#fff7dc; line-height:1.6; }
.formula-box p { margin:5px 0 0; color:#8b5140; font-weight:700; }
.sleeve-resource-links { display:grid; gap:8px; margin-top:14px; }
.sleeve-resource-links a { display:flex; align-items:center; justify-content:center; width:100%; 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; }
.sleeve-resource-links a:hover { background:#fff0dc; }
.sleeve-copyright { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 11px; margin:14px 0 0; color:#705846; font-size:14px; }
.sleeve-copyright a { color:#5c4736; font-weight:700; }
@media (max-width:820px) { .sleeve-canvas-area .sleeve-toolbar { padding:9px 12px; } .sleeve-actions button,.sleeve-actions a { font-size:13px; } }
@media (max-width:720px) {
  html, body { min-width:0; overflow-x:hidden; }
  .sleeve-workspace { display:block; min-width:0; min-height:100vh; min-height:100dvh; }
  .sleeve-form-panel { display:none; }
  .sleeve-canvas-area { display:grid; height:auto; min-height:100dvh; grid-template-rows:auto auto auto auto; }
  body:not(.mobile-drawing-mode) .sleeve-canvas-area { display:none; }
  .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 { 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; }
  .sleeve-canvas-area .sleeve-toolbar { min-height:0; padding:8px; }
  .sleeve-actions { width:100%; flex-wrap:wrap; gap:4px; }
  .sleeve-actions button, .sleeve-actions a { min-height:34px; padding:5px 6px; font-size:clamp(10px, 3.2vw, 12px); white-space:nowrap; }
  .sleeve-actions [data-action="zoom-out"] { order:1; min-width:30px; }
  .sleeve-actions [data-action="fit"] { order:2; }
  .sleeve-actions [data-action="zoom-in"] { order:3; }
  .sleeve-actions [data-action="print"] { order:4; color:#fff; border-color:#9d8165; background:#9d8165; box-shadow:0 2px 0 #5e483766; }
  .sleeve-actions [data-action="print"]:hover { background:#836a52; }
  .sleeve-actions [data-action="edit"] { order:5; }
  .sleeve-actions .mobile-info-link { display:inline-flex !important; order:6; flex:1 1 auto; }
  .desktop-action-label { display:none; }
  .mobile-action-label { display:inline; }
  .mobile-only { display:inline-flex !important; }
  .desktop-help-link { display:none !important; }
  .desktop-help-link.mobile-info-link { display:inline-flex !important; }
  .drawing-panel { height:var(--sleeve-mobile-drawing-height, 240px); min-height:0; aspect-ratio:auto; }
  #sleeveSvg { min-height:0; height:100%; }
  .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; }
  .question-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
  .question-form { padding:18px; }
  .question-step { gap:11px; }
}