:root{
  --bg:#f7f5f0; --ink:#23282c; --dim:#646c72; --line:#e2ded4;
  --navy:#1f3a52; --navy-deep:#16293b; --accent:#b8860b; --accent-soft:#f4ead2; --card:#fff;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Yu Gothic UI","Meiryo",sans-serif;line-height:1.8;}
.mincho{font-family:"Shippori Mincho","Yu Mincho",serif;}
.wrap{max-width:1100px;margin:0 auto;padding:24px 18px 48px;}

header{margin-bottom:20px;}
.backlink a{color:var(--dim);text-decoration:none;font-size:13px;}
.backlink a:hover{color:var(--navy);}
h1{font-family:"Shippori Mincho",serif;font-size:26px;letter-spacing:2px;color:var(--navy);margin:12px 0 6px;}
h1 .ver{font-size:13px;color:var(--accent);letter-spacing:1px;margin-left:6px;}
.tagline{font-size:13.5px;color:var(--dim);margin:0;}

.layout{display:grid;grid-template-columns:minmax(360px,420px) 1fr;gap:22px;align-items:start;}
@media(max-width:860px){.layout{grid-template-columns:1fr;}}

/* ---- editor ---- */
.panel .card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:14px;}
.panel h2{font-size:14px;color:var(--navy);margin:0 0 12px;letter-spacing:.5px;}
.fld{display:block;font-size:12px;color:var(--dim);margin-bottom:10px;}
.fld input,.fld textarea,.fld select{display:block;width:100%;margin-top:4px;font:inherit;font-size:13.5px;color:var(--ink);
  border:1px solid var(--line);border-radius:5px;padding:7px 9px;background:#fdfcf9;}
.fld textarea{resize:vertical;}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--navy);}
.row2{display:flex;gap:10px;}
.row2 .fld{flex:1;}
.fld敬称{display:block;font-size:12px;color:var(--dim);width:92px;}
.fld敬称 select{display:block;width:100%;margin-top:4px;font:inherit;font-size:13.5px;border:1px solid var(--line);border-radius:5px;padding:7px 9px;background:#fdfcf9;}
.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);margin-top:4px;}
.chk input{width:16px;height:16px;}

/* items input */
.items-input{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:10px;}
.items-input th{font-size:11px;color:var(--dim);font-weight:500;text-align:left;padding:0 4px 6px;}
.items-input td{padding:2px 4px 2px 0;vertical-align:middle;}
.items-input input,.items-input select{width:100%;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:5px;padding:6px 7px;background:#fdfcf9;}
.items-input input:focus,.items-input select:focus{outline:none;border-color:var(--navy);}
.items-input .c-name{width:auto;}
.items-input .c-qty{width:58px;}
.items-input .c-unit{width:92px;}
.items-input .c-rate{width:66px;}
.items-input .num{text-align:right;}
.del-row{border:0;background:none;color:#b04a4a;font-size:18px;line-height:1;cursor:pointer;padding:0 4px;}
.del-row:hover{color:#8a2f2f;}

button{font:inherit;cursor:pointer;}
.ghost{background:#fff;border:1px solid var(--navy);color:var(--navy);border-radius:5px;padding:8px 16px;font-size:13px;}
.ghost:hover{background:var(--accent-soft);}
.primary{background:var(--navy);border:1px solid var(--navy);color:#fff;border-radius:5px;padding:11px 22px;font-size:14px;font-weight:700;}
.primary:hover{background:var(--navy-deep);}
.editor-actions{display:flex;gap:10px;align-items:center;margin-top:4px;}

/* ---- invoice preview ---- */
.preview{position:sticky;top:16px;}
@media(max-width:860px){.preview{position:static;}}
.inv{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 24px rgba(31,58,82,.10);
  padding:38px 40px 34px;font-size:13px;color:var(--ink);}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--navy);padding-bottom:14px;}
.inv-title{font-size:30px;letter-spacing:8px;color:var(--navy);margin:0;}
.inv-meta{font-size:12px;text-align:right;color:var(--dim);}
.inv-meta div{margin-bottom:3px;}
.inv-meta span{margin-right:10px;}
.inv-meta b{color:var(--ink);font-weight:600;}

.inv-parties{display:flex;justify-content:space-between;gap:24px;margin-top:22px;}
.inv-to{flex:1;}
.to-name{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 4px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.to-name .honor{font-size:14px;font-weight:500;margin-left:6px;}
.to-info{font-size:12px;color:var(--dim);margin:6px 0 0;white-space:pre-wrap;}
.inv-from{width:44%;text-align:right;}
.from-name{font-size:14px;font-weight:700;margin:0 0 4px;color:var(--navy);}
.from-info{font-size:11.5px;color:var(--dim);margin:0;white-space:pre-wrap;line-height:1.7;}
.from-reg{font-size:11.5px;color:var(--dim);margin:4px 0 0;}

.inv-subject{margin:18px 0 0;font-size:13px;}
.inv-subject:empty{display:none;}

.inv-total-lead{display:flex;justify-content:space-between;align-items:center;
  background:var(--accent-soft);border:1px solid #e7d6a8;border-radius:6px;
  padding:12px 18px;margin:14px 0 20px;}
.inv-total-lead span{font-size:13px;font-weight:700;color:#6f5406;}
.inv-total-lead b{font-family:"Shippori Mincho",serif;font-size:24px;color:var(--navy);}

.inv-items{width:100%;border-collapse:collapse;font-size:12.5px;}
.inv-items thead th{background:var(--navy);color:#f2efe7;font-weight:500;padding:8px 10px;text-align:left;}
.inv-items thead th.ic-qty,.inv-items thead th.ic-unit,.inv-items thead th.ic-amt{text-align:right;}
.inv-items tbody td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
.inv-items .ic-qty,.inv-items .ic-unit,.inv-items .ic-amt{text-align:right;white-space:nowrap;}
.inv-items .reduced{display:inline-block;font-size:10px;color:#7a5a08;background:var(--accent-soft);border-radius:3px;padding:0 5px;margin-left:6px;}
.inv-items .empty td{color:var(--dim);text-align:center;padding:18px;}

.inv-sum{display:flex;justify-content:flex-end;margin-top:14px;}
.inv-sum table{border-collapse:collapse;min-width:280px;font-size:13px;}
.inv-sum th{text-align:left;font-weight:400;color:var(--dim);padding:6px 14px;}
.inv-sum td{text-align:right;padding:6px 0;white-space:nowrap;font-variant-numeric:tabular-nums;}
.inv-sum .tax-row span{font-size:11px;color:var(--dim);}
.inv-sum .grand th{color:var(--ink);font-weight:700;font-size:15px;border-top:2px solid var(--navy);padding-top:9px;}
.inv-sum .grand td{color:var(--navy);font-weight:700;font-size:17px;font-family:"Shippori Mincho",serif;border-top:2px solid var(--navy);padding-top:9px;}

.inv-foot{display:flex;gap:24px;margin-top:26px;}
.inv-foot>div{flex:1;}
.inv-foot .lbl{font-size:11px;color:#fff;background:var(--navy);display:inline-block;padding:2px 10px;border-radius:3px;margin:0 0 6px;}
.inv-foot p{font-size:12px;color:var(--ink);margin:0;white-space:pre-wrap;line-height:1.7;}
.inv-foot .inv-note p:last-child:empty{display:none;}

.site-foot{font-size:12px;color:var(--dim);text-align:center;margin-top:32px;line-height:1.8;}

/* ---- print ---- */
@media print{
  @page{margin:14mm;}
  body{background:#fff;}
  .wrap{max-width:none;padding:0;}
  .screenonly{display:none!important;}
  .layout{display:block;}
  .preview{position:static;top:auto;}
  .inv{border:0;box-shadow:none;border-radius:0;padding:0;font-size:12px;}
  .inv-total-lead{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .inv-items thead th,.inv-foot .lbl{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}