:root{
  --bg:#eef6f3; --card:#ffffff; --panel:#f3faf7; --line:#dcebe4;
  --ink:#2e4a41; --sub:#7a938a; --accent:#2f9e7b; --accent-soft:#e2f3ec;
  --warn:#e0762f; --danger:#d05252; --blue:#3d6fb4;
  --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{margin:0; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; background:var(--bg); color:var(--ink);}
header.app{position:sticky; top:0; z-index:20; background:rgba(238,246,243,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.app-inner{max-width:860px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.brand{font-weight:700; font-size:15px;}
.brand a{color:var(--ink); text-decoration:none;}
.brand small{display:block; font-weight:400; color:var(--sub); font-size:11px;}
.topnav{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.topnav a{font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; padding:8px 13px; border-radius:999px; background:#e0ede7;}
.topnav a.cta{background:var(--accent); color:#fff;}
.topnav a.sub{background:transparent; color:var(--sub);}
main{max-width:860px; margin:0 auto; padding:20px 16px 80px;}
.card{background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:0 1px 4px rgba(46,74,65,.06); margin-bottom:16px;}
h1{font-size:20px; margin:0 0 4px;}
.lead{color:var(--sub); font-size:13px; margin:0 0 6px;}
.sec{background:var(--panel); border-radius:12px; padding:14px; margin-top:14px;}
.sec-title{font-size:13px; font-weight:700; margin-bottom:8px;}
.sec-title .req{color:var(--danger); margin-left:2px;}
.hint{font-size:11px; color:var(--sub); margin-top:6px;}
label.fl{display:block; font-size:12px; color:var(--sub); margin:8px 0 4px;}
input[type=text],input[type=date],input[type=password],input[type=email],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; background:#fff; color:var(--ink); font-family:inherit;
}
textarea{min-height:70px; resize:vertical;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(max-width:560px){.grid2{grid-template-columns:1fr;}}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; font-size:13px; cursor:pointer; user-select:none;}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.chip.cat.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;}
.seg button{border:0; background:transparent; padding:9px 18px; font-size:13px; cursor:pointer; color:var(--sub); font-family:inherit;}
.seg button.on{background:var(--accent); color:#fff; font-weight:600;}
.drawwrap{position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; touch-action:none;}
.drawwrap svg{display:block; width:100%; height:auto;}
.drawwrap canvas{position:absolute; inset:0; width:100%; height:100%;}
.tools{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0;}
.tool{border:1px solid var(--line); background:#fff; border-radius:9px; padding:7px 12px; font-size:12px; cursor:pointer; font-family:inherit;}
.tool.on{outline:2px solid var(--accent); border-color:var(--accent);}
.dot{display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:-1px; margin-right:4px;}
.btn{display:inline-block; border:0; border-radius:12px; padding:13px 22px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; text-decoration:none; text-align:center;}
.btn.primary{background:var(--accent); color:#fff; width:100%;}
.btn.ghost{background:#fff; border:1px solid var(--line); color:var(--ink); font-size:13px; padding:9px 14px; font-weight:600;}
.badge{display:inline-block; font-size:11px; font-weight:700; border-radius:999px; padding:3px 10px;}
.b-new{background:#fdeadd; color:var(--warn);}
.b-chk{background:#e3ecf8; color:var(--blue);}
.b-mk{background:var(--accent-soft); color:var(--accent);}
.b-ship{background:#e8e8ee; color:#666;}
.b-urgent{background:#fbe3e3; color:var(--danger);}
.order-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:8px; cursor:pointer; text-decoration:none; color:var(--ink);}
.order-item:hover{border-color:var(--accent);}
.order-item .t1{font-weight:700; font-size:14px;}
.order-item .t2{font-size:12px; color:var(--sub); margin-top:2px;}
table.detail{width:100%; border-collapse:collapse; font-size:13px;}
table.detail th{white-space:nowrap; text-align:left; color:var(--sub); font-weight:600; padding:7px 12px 7px 0; vertical-align:top; width:110px;}
table.detail td{padding:7px 0;}
table.detail tr{border-bottom:1px solid var(--line);}
.designimg{position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; margin-top:8px;}
.designimg svg{display:block; width:100%; height:auto;}
.designimg img{position:absolute; inset:0; width:100%; height:100%;}
.steps{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0;}
.step{flex:1; min-width:90px; text-align:center; font-size:12px; font-weight:700; padding:10px 6px; border-radius:10px; background:#fff; border:1px solid var(--line); color:var(--sub); cursor:pointer; font-family:inherit;}
.step.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.comment{background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:8px;}
.comment .who{font-size:11px; color:var(--sub); margin-bottom:3px;}
.comment.mine{border-color:var(--accent); background:var(--accent-soft);}
.receipt{text-align:center; padding:30px 10px;}
.receipt .num{font-size:28px; font-weight:800; color:var(--accent); letter-spacing:1px; margin:10px 0;}
.note-orange{color:var(--warn); font-size:12px; font-weight:700;}
.hidden{display:none !important;}
.backlink{font-size:13px; color:var(--accent); cursor:pointer; font-weight:700; margin-bottom:10px; display:inline-block; text-decoration:none;}
.flash{background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:13px; padding:12px 16px; border-radius:12px; margin-bottom:14px;}
.error{background:#fbe3e3; color:var(--danger); font-weight:700; font-size:13px; padding:12px 16px; border-radius:12px; margin-bottom:14px;}
.login-box{max-width:400px; margin:60px auto 0;}
.filterbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
@media print{
  header.app, .steps, .cmtform, .noprint, .flash{display:none !important;}
  body{background:#fff;}
  .card{box-shadow:none; padding:0;}
}