:root{
  --paper:#ECEBE3;        /* 製図用紙 */
  --paper2:#F5F4EE;
  --ink:#1B1D1A;          /* 製図インク */
  --chalk:#2E63B4;        /* チャコ・縫い線 */
  --chalk-soft:#7fa3d6;
  --tape:#E0A23C;         /* メジャーの黄 */
  --vermilion:#C24033;    /* 裁ち切り線・赤の製図線 */
  --rule:#C9C6B8;
  --rule-soft:#dedbcf;
  --muted:#6b6b60;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  background-image:
    linear-gradient(var(--rule-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:18px 18px;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ---- layout ---- */
header{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1.5px solid var(--ink);
  background:var(--paper);
}
header .brand{font-size:22px;font-weight:800;letter-spacing:.22em}
header .brand b{color:var(--vermilion)}
header .tag{font-size:12px;color:var(--muted);letter-spacing:.04em}
header .sheets{margin-left:auto;display:flex;align-items:center;gap:10px}
.sheet-chip{
  font-size:12px;border:1.5px solid var(--ink);padding:4px 10px;border-radius:2px;
  background:var(--paper2)
}
.sheet-chip b{font-size:15px}

.app{display:flex;flex-direction:column;height:100%}
main{display:grid;grid-template-columns:320px 1fr;gap:0;flex:1;overflow:hidden}
@media (max-width:820px){
  main{grid-template-columns:1fr;height:auto;overflow:visible}
  .preview-wrap{min-height:60vh}
}

/* ---- controls ---- */
.panel{
  border-right:1.5px solid var(--ink);
  padding:16px;overflow-y:auto;background:var(--paper2);
}
.mode-tabs{display:flex;gap:0;margin-bottom:12px;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden}
.mode-tabs button{
  flex:1;font-family:inherit;font-size:11.5px;cursor:pointer;padding:8px 2px;
  border:none;border-right:1px solid var(--ink);background:var(--paper);color:var(--ink);
  transition:.12s;line-height:1.25;
}
.mode-tabs button:last-child{border-right:none}
.mode-tabs button[aria-pressed="true"]{background:var(--chalk);color:#fff}
.mode-tabs button:hover:not([aria-pressed="true"]){background:var(--rule-soft)}
.pat-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.pat-tabs button{
  flex:1;min-width:88px;font-family:inherit;font-size:12.5px;cursor:pointer;
  padding:9px 6px;border:1.5px solid var(--ink);background:var(--paper);
  border-radius:2px;color:var(--ink);transition:.12s;line-height:1.3;
}
.pat-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper2)}
.pat-tabs button:hover{background:var(--tape)}

.pat-note{font-size:11.5px;color:var(--muted);line-height:1.55;
  border-left:2.5px solid var(--tape);padding:4px 0 4px 9px;margin:0 0 10px}
.howto-link{display:inline-block;font-size:12px;color:var(--chalk);
  text-decoration:none;border:1px solid var(--tape);border-radius:6px;
  padding:5px 11px;margin:0 0 16px;transition:background .15s}
.howto-link:hover{background:var(--tape)}

.field{margin-bottom:13px}
.field label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;margin-bottom:5px}
.field label .v{font-size:13px;font-weight:700}
.field label .unit{color:var(--muted);font-size:11px;margin-left:2px}
.field input[type=range]{width:100%;accent-color:var(--chalk);margin:0}
.row{display:flex;gap:8px;align-items:center}
.row input[type=number]{
  width:74px;font-family:ui-monospace,monospace;font-size:13px;text-align:right;
  padding:5px 7px;border:1.5px solid var(--rule);border-radius:2px;background:var(--paper);
}
.row input[type=number]:focus{outline:2px solid var(--chalk);border-color:var(--chalk)}

.toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:13px;cursor:pointer}
.toggle input{accent-color:var(--chalk);width:16px;height:16px}
.presets{margin-bottom:14px}
.presets .ptitle{font-size:11px;color:var(--muted);margin-bottom:6px}
.presets .prow{display:flex;gap:6px;flex-wrap:wrap}
.presets button{
  font-family:inherit;font-size:12px;cursor:pointer;padding:6px 10px;
  border:1.5px solid var(--ink);background:var(--paper);border-radius:2px;
  color:var(--ink);transition:.12s;line-height:1.2;
}
.presets button:hover{background:var(--tape)}

.divider{border:none;border-top:1px dashed var(--rule);margin:16px 0}
.sec-h{font-size:11px;letter-spacing:.14em;color:var(--muted);margin:0 0 10px;font-weight:700}

.print-btn{
  width:100%;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:.08em;
  padding:13px;border:1.5px solid var(--ink);background:var(--vermilion);color:#fff;
  border-radius:2px;cursor:pointer;margin-top:4px;
}
.print-btn:hover{background:#a8362b}
.scale-warn{font-size:11px;color:var(--muted);line-height:1.55;margin-top:9px}
.scale-warn b{color:var(--vermilion)}
.pdf-tip{font-size:10.5px;color:var(--muted)}
.pdf-tip b{color:var(--ink)}

/* ---- profile storage (F-20) ---- */
.profile-section{margin:14px 0 0}
.profile-list{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;min-height:0}
.profile-item{
  display:flex;align-items:center;gap:0;
  border:1.5px solid var(--ink);border-radius:2px;background:var(--paper);
  overflow:hidden;font-size:12px;
}
.p-load{
  font-family:inherit;font-size:12px;cursor:pointer;padding:5px 9px;
  border:none;background:none;color:var(--ink);line-height:1.25;
}
.p-load:hover{background:var(--tape)}
.p-del{
  font-family:inherit;font-size:12px;cursor:pointer;padding:5px 7px;
  border:none;border-left:1px solid var(--rule);background:none;color:var(--muted);
  line-height:1.25;
}
.p-del:hover{background:var(--vermilion);color:#fff}
.profile-save{
  font-family:inherit;font-size:12px;cursor:pointer;padding:6px 10px;
  border:1.5px dashed var(--ink);background:none;border-radius:2px;
  color:var(--ink);transition:.12s;
}
.profile-save:hover{background:var(--chalk);color:#fff;border-style:solid}

/* ---- preview ---- */
.preview-wrap{position:relative;overflow:auto;display:flex;
  align-items:center;justify-content:center;padding:26px}
.preview-inner{position:relative}
svg.preview{display:block;background:var(--paper2);
  box-shadow:0 1px 0 var(--rule),0 14px 30px -18px rgba(0,0,0,.4);
  border:1px solid var(--rule)}
.legend{position:absolute;left:18px;bottom:14px;display:flex;gap:14px;flex-wrap:wrap;
  font-size:11px;background:rgba(245,244,238,.9);padding:7px 11px;border:1px solid var(--rule);
  border-radius:2px}
.legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:5px}
.lg-cut i{border-top:2.5px solid var(--vermilion)}
.lg-sew i{border-top:2px dashed var(--chalk)}
.lg-fold i{border-top:2px dashed var(--ink)}
.lg-grid i{border-top:1.5px dashed var(--tape)}

/* ---- footer ---- */
.app-footer{
  border-top:1px solid var(--rule);padding:10px 20px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  font-size:11px;color:var(--muted);background:var(--paper2);
}
.app-footer a{color:var(--muted);text-decoration:underline;cursor:pointer}
.app-footer a:hover{color:var(--ink)}

/* ---- modal ---- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--paper2);border:1.5px solid var(--ink);border-radius:2px;
  max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--rule);
}
.modal-head h2{margin:0;font-size:15px;font-weight:800;letter-spacing:.05em}
.modal-close{
  font-family:inherit;font-size:18px;background:none;border:none;cursor:pointer;
  color:var(--muted);line-height:1;padding:2px 6px;
}
.modal-close:hover{color:var(--ink)}
.modal-body{padding:18px;overflow-y:auto;font-size:12.5px;line-height:1.75;color:var(--ink)}
.modal-body h3{font-size:12.5px;margin:16px 0 4px;font-weight:700}
.modal-body p{margin:0 0 8px}
.modal-body a{color:var(--chalk)}
.modal-body .policy-date{margin-top:16px;font-size:11px;color:var(--muted)}

/* ---- print ---- */
#print-root{display:none}
@media print{
  @page{size:A4;margin:0}
  body{background:#fff;background-image:none}
  .app{display:none!important}
  #print-root{display:block}
  .sheet{
    width:210mm;height:297mm;position:relative;overflow:hidden;
    page-break-after:always;break-after:page;background:#fff;
  }
  .sheet:last-child{page-break-after:auto}
}