/* 供花名札メーカー
   明るい画面に、くすんだピンクを一色だけ。余白を広く、文字は大きく、角は丸く。
   札の文字だけ毛筆体にして、主役の札が一番目立つようにしている。 */
:root{
  --violet:#9c656c;          /* 主役の色 */
  --violet-deep:#7d4f56;
  --violet-soft:#f6eeee;     /* 選択中・やわらかい面 */
  --ground:#f7f5f5;          /* 画面の地 */
  --paper:#ffffff;
  --ink:#3f4049;
  --sub:#857b7e;
  --line:#ebe4e5;
  --field:#ddd1d3;
  --leaf:#4f8a72;            /* 確認済み */
  --leaf-soft:#e8f1ec;
  --warn:#9a6b2f;            /* 要確認 */
  --warn-soft:#f8efdc;
  --danger:#b5564f;
  --hl:#f3e3a6;
  --shadow:0 1px 2px rgba(95,65,70,.05),0 8px 28px rgba(95,65,70,.07);
  --ui:"LINE Seed JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --fude:"Fudacle Kaisho","Yuji Boku","Hiragino Mincho ProN",serif;
  /* 互換用（画面のコード内の指定で使われている名前） */
  --accent:var(--violet); --accent-soft:var(--violet-soft); --bg:var(--ground); --panel:var(--paper);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1100px 420px at 50% -120px,#f3e9ea,transparent 70%) no-repeat,var(--ground);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid rgba(156,101,108,.45);outline-offset:2px}
a{color:var(--violet)}

/* ---------- 上の帯：ロゴ・手順・アカウント ---------- */
.chrome{display:contents}
.tophead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 10px;background:var(--paper)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{flex:none;width:36px;height:36px;display:block}
.mark svg{display:block;width:100%;height:100%}
.brand-text{min-width:0}
.brand-text h1{margin:0;font-size:17px;font-weight:800;letter-spacing:.08em;line-height:1.25;white-space:nowrap}
h1 small{font-size:.62em;font-weight:700;letter-spacing:.06em;color:var(--sub);margin-left:.6em}
.brand-text p{margin:0;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub)}
.account #usage{display:none}
.account button{background:none;border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;color:var(--sub);cursor:pointer}
.account button:hover{border-color:var(--violet);color:var(--violet)}

.steps{display:flex;align-items:center;gap:2px;padding:8px 12px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.stepbar{position:sticky;top:0;z-index:6}
.steps button{flex:none;display:flex;align-items:center;gap:7px;border:0;background:none;padding:7px 12px 7px 8px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap;color:var(--sub);cursor:pointer;transition:background .15s,color .15s}
.steps button:hover{background:var(--ground)}
.steps button b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--sub);font-size:12px;font-weight:800}
.steps button.done b{background:var(--leaf-soft);color:var(--leaf);font-size:0}
.steps button.done b::before{content:"✓";font-size:13px}
.steps button.on{background:var(--violet);color:#fff}
.steps button.on b{background:#fff;color:var(--violet)}
.steps .link{width:14px;height:2px;border-radius:2px;background:var(--line);flex:none}
@media(max-width:480px){.steps{padding:8px 8px;gap:0}.steps .link{width:6px}.steps button{font-size:13px;padding:7px 9px 7px 6px;gap:5px}.steps button[data-step="4"]{padding:6px 10px}}
.steps .sep{flex:1;min-width:10px}
.steps button[data-step="4"]{padding-left:12px;border:1.5px solid var(--line)}
.steps button[data-step="4"].on{border-color:var(--violet)}
.steps button[data-step="4"] b{display:none}

main{max-width:1160px;margin:0 auto;padding:22px 14px 80px}
.view{display:none}.view.on{display:block;animation:rise .25s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(min-width:900px){
  .chrome{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;height:68px;position:sticky;top:0;z-index:6;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .tophead{display:contents}
  .brand{grid-column:1;grid-row:1}
  .stepbar{grid-column:2;grid-row:1;position:static}
  .account{grid-column:3;grid-row:1;justify-self:end}
  .steps{padding:0;background:none;backdrop-filter:none;border:0;overflow:visible;gap:4px}
  .steps button{font-size:14.5px;padding:9px 16px 9px 10px}
  .steps button b{width:24px;height:24px}
  .steps .link{width:26px}
  .steps .sep{flex:none;width:28px}
  .steps button[data-step="4"]{padding-left:16px}
  .brand-text h1{font-size:18px}
  .account #usage{display:inline}
  main{padding:36px 28px 90px}
}

/* ---------- 面と見出し ---------- */
.pagehead{margin:4px 2px 22px}
.pagehead h2{margin:0;font-size:26px;font-weight:800;letter-spacing:.01em;line-height:1.3}
.pagehead p{margin:6px 0 0;color:var(--sub);font-size:14.5px;max-width:42em}
.card{background:var(--paper);border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2{margin:0 0 14px;font-size:18px;font-weight:800;line-height:1.4}
.card h3{margin:0 0 12px;font-size:15px;font-weight:800}
.muted{color:var(--sub);font-size:13.5px}
.card > p.muted{margin:-6px 0 14px;max-width:44em}
.hint{margin:12px 0 0;font-size:12.5px;color:var(--sub)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.printbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
@media(min-width:900px){.pagehead h2{font-size:32px}.pagehead{margin-bottom:28px}.card{padding:28px}}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;background:linear-gradient(180deg,#ab767c,var(--violet));color:#fff;border-radius:999px;padding:13px 28px;font-weight:700;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 12px rgba(156,101,108,.22);transition:filter .15s,transform .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px rgba(156,101,108,.28)}
.btn:active{transform:none}
.btn.wide{width:100%;padding:16px;font-size:16px}
.btn.ghost{background:var(--paper);color:var(--violet);box-shadow:0 0 0 1.5px var(--field) inset;padding:10px 20px;font-size:14px}
.btn.ghost:hover{background:var(--violet-soft);box-shadow:0 0 0 1.5px var(--violet) inset;filter:none}
.btn:disabled{opacity:.4;cursor:default;box-shadow:none;transform:none;filter:none}
/* ボタンの絵（文字が切り替わっても残るよう、CSSで描く） */
#readBtn::before,.printbtn::before,#toTags::after,#xlsSum::before,#pdfSum::before,#addHall::before{content:"";width:18px;height:18px;background:currentColor;flex:none;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
#readBtn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3M4 12h16'/%3E%3C/svg%3E")}
.printbtn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5M7 17H5a1 1 0 0 1-1-1v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a1 1 0 0 1-1 1h-2M7 14h10v6H7z'/%3E%3C/svg%3E")}
#toTags{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E")}
#xlsSum,#pdfSum{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0-4.500-4.500M12 15l4.500-4.500M5 19h14'/%3E%3C/svg%3E")}
.exports{display:flex;gap:8px;flex-wrap:wrap}
.exports .btn{padding:9px 16px;font-size:13.500px}
#addHall{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.btn.busy::before{-webkit-mask:none!important;mask:none!important;background:none!important;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 1 取り込み ---------- */
.hero{display:grid;gap:18px;margin-bottom:18px}
.hero .card{margin:0;padding:14px}
@media(min-width:900px){.hero{grid-template-columns:1.5fr 1fr;align-items:stretch}.hero .card{display:flex;flex-direction:column}.hero .upload{flex:1;display:flex;flex-direction:column;justify-content:center}}
.upload{display:block;border:2px dashed #dcc5c7;border-radius:16px;padding:46px 16px 42px;text-align:center;font-weight:800;font-size:18px;background:linear-gradient(180deg,#faf5f5,var(--violet-soft));cursor:pointer;transition:border-color .15s,transform .15s}
.upload::before{content:"";display:block;width:64px;height:64px;margin:0 auto 16px;border-radius:20px;background:linear-gradient(180deg,#ab767c,var(--violet)) ;box-shadow:0 10px 22px rgba(156,101,108,.32);-webkit-mask:none}
.upload{position:relative}
.upload::after{content:"";position:absolute;left:50%;top:46px;width:64px;height:64px;transform:translateX(-50%);background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5m0 0L7.5 9.5M12 5l4.5 4.5M5 17v1.5A1.5 1.5 0 0 0 6.500 20h11a1.5 1.5 0 0 0 1.500-1.500V17'/%3E%3C/svg%3E") center/30px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5m0 0L7.5 9.5M12 5l4.5 4.5M5 17v1.5A1.5 1.5 0 0 0 6.500 20h11a1.5 1.5 0 0 0 1.500-1.500V17'/%3E%3C/svg%3E") center/30px no-repeat;pointer-events:none}
.upload span{display:block;margin-top:6px;font-weight:400;font-size:13.5px;color:var(--sub)}
.upload input{display:none}
.upload:hover,.upload.over{border-color:var(--violet)}
.upload.over{transform:scale(1.01)}
.note{background:var(--warn-soft);color:#6f5226;border-radius:12px;padding:12px 16px;font-size:14px;margin:12px 0 0;display:none}
.howto{list-style:none;margin:0;padding:22px;border-radius:22px;background:var(--paper);border:1px solid var(--line);color:var(--ink);display:grid;gap:18px;align-content:center}
.howto li{display:flex;gap:14px;align-items:flex-start}
.howto b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-deep);font-size:14px;font-weight:800}
.howto strong{display:block;font-size:15px;font-weight:800;line-height:1.5}
.howto span{display:block;font-size:13px;color:var(--sub);line-height:1.6}
.recent{display:grid;gap:8px}
.recent button{text-align:left;border:0;background:var(--ground);border-radius:14px;padding:13px 16px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.recent button:hover{background:var(--violet-soft);color:var(--violet)}

/* ---------- FAX ---------- */
.split{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:1040px){.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.split > .card:first-child{position:sticky;top:86px;max-height:calc(100vh - 104px);overflow:auto}}
.faxmark{position:absolute;left:-4px;right:-4px;height:9%;border-radius:8px;background:rgba(243,227,166,.42);box-shadow:0 0 0 2px #e6cf9a;pointer-events:none;animation:rise .25s ease both}
.card.order.active{box-shadow:0 0 0 2px var(--violet),var(--shadow)}
.card.order.warn.active{box-shadow:0 0 0 2px var(--violet),var(--shadow)}
@media(max-width:1039px){
  /* スマホ・タブレット：FAX原本を上に固定して、下の注文と一緒に見られるようにする */
  #v2 .split > .card:first-child{position:sticky;top:52px;z-index:4;max-height:38vh;overflow:auto;padding:10px 12px;box-shadow:0 2px 4px rgba(80,55,60,.06),0 10px 24px rgba(80,55,60,.16)}
  #v2 .split > .card:first-child h2{font-size:13px;margin:0 0 6px}
  #v2 .split > .card:first-child .faxwrap{padding:6px}
}
.faxwrap{position:relative;overflow:hidden;border-radius:14px;background:#efe9ea;padding:14px}
.faxwrap img{border-radius:4px;box-shadow:0 2px 10px rgba(63,64,73,.18)}
.faxwrap button{border-radius:999px!important}
.scan{position:absolute;left:0;right:0;height:80px;top:-80px;background:linear-gradient(180deg,transparent,rgba(156,101,108,.35),transparent);pointer-events:none;display:none}
.scan.go{display:block;animation:scan 1.6s ease-in-out}
@keyframes scan{from{top:-80px}to{top:100%}}
.v{border-radius:3px}.v.hl{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}

/* ---------- 2 確認 ---------- */
.facts{padding:18px 22px}
.common{display:flex;flex-wrap:wrap;gap:10px 34px;margin:0;font-size:14px}
.common dt{color:var(--sub);font-size:12px}
.common dd{margin:0;font-weight:800;font-size:16px}
.hallbar{border-radius:12px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;font-weight:700}
.hallbar.ok{background:var(--leaf-soft);color:#3d6b58}
.hallbar.new{background:var(--warn-soft);color:#6f5226}
.card.order{padding:20px 22px;margin-bottom:14px;border:0}
.order.warn{box-shadow:0 0 0 2px #e6cf9a,var(--shadow)}
.order .ohead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.order .ohead strong{font-size:17px;font-weight:800}
.obody{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start}
.mini{padding:14px 12px;border-radius:14px;background:linear-gradient(180deg,#f4eeee,#ece4e5);align-self:stretch;display:flex;align-items:center}
.mini .tag{box-shadow:0 2px 3px rgba(80,55,60,.1),0 8px 18px rgba(80,55,60,.16)}
@media(max-width:560px){.obody{grid-template-columns:1fr}.mini{order:-1;justify-content:center;padding:14px}}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;border-radius:999px;padding:3px 11px;background:var(--leaf-soft);color:var(--leaf);font-weight:700;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.w{background:var(--warn-soft);color:var(--warn)}
.fields{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px 10px;align-items:center}
.fields label{font-size:13px;color:var(--sub)}
.fields input,.fields textarea,.fields select,
.controls select,.controls input,.hall input,#sumMonth{width:100%;min-width:0;font-size:16px;border:1.5px solid var(--field);border-radius:11px;padding:9px 12px;background:var(--paper);transition:border-color .15s,box-shadow .15s}
.fields textarea{resize:vertical;min-height:44px;line-height:1.5}
.fields input:focus,.fields textarea:focus,.fields select:focus,.controls input:focus,.controls select:focus,.hall input:focus,#sumMonth:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(156,101,108,.16)}
input[type=checkbox]{width:20px;height:20px;flex:none;padding:0;accent-color:var(--violet)}
.fields input[type=checkbox]{width:20px}
.fields .flag{border-color:#d2b06a;background:var(--warn-soft)}
.warnmsg{grid-column:1/-1;font-size:13px;color:var(--warn);font-weight:700;margin-top:-2px}
.placeholder{color:var(--sub);text-align:center;padding:60px 16px;font-size:14px}
.actionbar{position:sticky;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 2px 4px rgba(95,65,70,.06),0 14px 36px rgba(95,65,70,.18);margin-top:18px}
.actionbar .muted{font-weight:700}

/* ---------- 3 名札・印刷 ---------- */
.print-layout{display:grid;gap:18px}
@media(min-width:1000px){.print-layout{grid-template-columns:minmax(0,1fr) 330px;align-items:start}.panel{position:sticky;top:86px}}
.stage-card{padding:0;overflow:hidden;background:linear-gradient(180deg,#f4eeee,#ece4e5)}
#preview .tags{display:flex;gap:34px 28px;flex-wrap:wrap;justify-content:center;align-items:flex-end;padding:44px 20px 34px;min-height:420px;align-content:center}
.tagbox{text-align:center}
.tagbox .cap{font-size:12px;color:var(--sub);margin-top:12px;font-weight:700}
.tag{background:#fff;position:relative;overflow:hidden;margin:0 auto;border-radius:2px;box-shadow:0 2px 4px rgba(80,55,60,.08),0 16px 34px rgba(80,55,60,.2)}
.tag .col{position:absolute;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;color:#111;line-height:1}
.panel .card{padding:22px}
.count{font-size:15px;font-weight:700;color:var(--sub);margin-bottom:16px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.count b{font-size:44px;font-weight:800;color:var(--ink);line-height:1}
.count span{width:100%;font-size:12.5px;font-weight:400}
.check{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:12px;cursor:pointer}
.controls{display:grid;gap:14px}
.controls label{font-size:13px;color:var(--sub);display:block;margin-bottom:4px}
.pair{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:13px}
.settings summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.settings summary::-webkit-details-marker{display:none}
.settings summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--sub);border-bottom:2.5px solid var(--sub);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.settings[open] summary::after{transform:rotate(-135deg)}
.settings .controls{margin-top:18px}

/* ---------- 斎場・集計 ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
.kpis > div{background:var(--ground);border-radius:16px;padding:14px 16px}
.kpis span{display:block;font-size:12.5px;color:var(--sub);font-weight:700}
.kpis b{font-size:28px;font-weight:800;line-height:1.3}
.kpis i{font-style:normal;font-size:13px;font-weight:700;margin-left:3px;color:var(--sub)}
.kpis em{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.75)}
.kpis .main{background:linear-gradient(135deg,#ab767c,var(--violet-deep));color:#fff;grid-column:1/-1}
.kpis .main span,.kpis .main i{color:rgba(255,255,255,.8)}
@media(min-width:760px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr)) 1.6fr}.kpis .main{grid-column:auto}}
.hall{border-radius:16px;padding:16px;margin-bottom:12px;background:var(--ground);display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.hall label{font-size:13px;color:var(--sub);display:block;margin-bottom:4px}
.hall-foot{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.hall .del{border:0;background:none;color:var(--danger);font-size:13px;font-weight:700;cursor:pointer;margin-right:auto;padding:0}
.hall .save{padding:10px 26px;font-size:14px}
.savestate{font-size:13px;font-weight:700;color:var(--warn)}
.savestate.ok{color:var(--leaf)}
.hall .del:hover{text-decoration:underline}
.seg{display:inline-flex;background:var(--ground);border-radius:999px;padding:4px}
.seg button{border:0;background:none;color:var(--sub);padding:7px 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--paper);color:var(--violet);box-shadow:0 1px 4px rgba(80,55,60,.14)}
#sumMonth{width:auto;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700}
.sumtbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.sumtbl th{font-size:12px;color:var(--sub);font-weight:700}
.sumtbl th,.sumtbl td{border-bottom:1px solid var(--line);padding:11px 8px;text-align:left}
.sumtbl td.n,.sumtbl th.n{text-align:right;white-space:nowrap}
.sumtbl tr.sub td{background:var(--ground);font-weight:800;border-bottom:0}
.sumtbl tr.sub td:first-child{border-radius:10px 0 0 10px}.sumtbl tr.sub td:last-child{border-radius:0 10px 10px 0}
details.case{background:var(--ground);border-radius:16px;padding:14px 16px;margin-bottom:10px}
details.case summary{font-weight:700}
details.case summary::-webkit-details-marker{display:none}
details.case .sumtbl td{border-color:#e4dadc}

/* ---------- お知らせ・読み込み ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:18px;font-size:14px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:92vw;z-index:20;box-shadow:0 10px 30px rgba(63,64,73,.3);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.loading{position:fixed;inset:0;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;background:var(--ground);color:var(--sub);z-index:30;font-size:14px;font-weight:700}
.loading .mark{width:60px;height:60px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.92);opacity:.7}}
.typing{animation:rise .3s ease both}

/* ---------- ログイン：画面のつくりは login.html の中に書いてある ---------- */

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 印刷ボタン（紙のサイズごと） */
#printBtns{display:grid;gap:10px}
.printbtn span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35;text-align:left}
.printbtn small{font-size:12px;font-weight:400;opacity:.85}

/* ---------- 注意の帯・リンク風ボタン・案件の修正 ---------- */
.dupnote{color:var(--warn)}
.dupbar{margin-bottom:10px;line-height:1.7}
.linkbtn{border:0;background:none;padding:4px 2px;font:inherit;font-size:13px;font-weight:700;color:var(--violet-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn.danger{color:var(--danger)}
.dupbar .linkbtn{margin-left:6px;color:inherit}
.case-foot{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:10px}
.caseform{padding:16px;border-radius:16px;background:var(--ground);box-shadow:0 0 0 2px var(--violet) inset;margin-bottom:8px}
.caseform label{display:block;font-size:12px;font-weight:700;color:var(--sub);margin-bottom:3px}
.caseform input,.caseform select{width:100%;border:1.5px solid var(--field);border-radius:10px;padding:8px 10px;background:var(--paper);font-size:15px}
.caseform input:focus,.caseform select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(156,101,108,.16)}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin-bottom:14px}
@media(min-width:760px){.cf-grid{grid-template-columns:1.1fr 1.4fr 1fr .6fr}}
.cf-line{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) auto minmax(0,.7fr) auto auto;gap:6px;align-items:center;margin-bottom:8px}
.cf-line span{font-size:13px;color:var(--sub)}
.caseform .btn{padding:10px 22px;font-size:14px}

/* ---------- 注文ごとのメモ・途中で保存・注意の帯のボタン ---------- */
.memo{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--warn-soft)}
.memo label{display:block;font-size:12px;font-weight:700;color:#6f5226;margin-bottom:5px}
.memo textarea{width:100%;border:1.5px solid #e6cf9a;border-radius:10px;padding:8px 11px;background:var(--paper);font-size:15px;line-height:1.6;resize:vertical}
.memo textarea:focus{outline:none;border-color:var(--warn);box-shadow:0 0 0 4px rgba(154,107,47,.16)}
.chip.m{background:var(--warn-soft);color:#6f5226;margin-left:8px}
.dupacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dupacts .btn{padding:8px 16px;font-size:13.500px;background:var(--paper)}
.tagnote{font-size:12px;font-weight:700;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:1px 9px}
.tagnote.plain{color:var(--sub);background:var(--ground)}
.actionbar #saveDraft{margin-left:auto;padding:11px 18px;font-size:14px}
@media(max-width:480px){.actionbar{padding-left:14px;gap:8px}.actionbar #saveDraft{padding:10px 12px;font-size:13px}.actionbar #v2count{font-size:12px}}

/* ---------- 要確認の「確認済み」チェック ---------- */
.warnmsg .okcheck{display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding:3px 12px 3px 8px;border-radius:999px;background:var(--paper);border:1.5px solid #e6cf9a;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.warnmsg .okcheck input{width:16px;height:16px;margin:0;accent-color:var(--leaf)}
.warnmsg.ok{color:var(--leaf)}
.warnmsg.ok .okcheck{border-color:#bcd6c9}
.fields .flag.ok{border-color:#bcd6c9;background:var(--leaf-soft)}

/* ---------- 確認画面：斎場・喪家はその場で直せる ---------- */
.common dd input{width:100%;min-width:9em;max-width:16em;border:1.5px solid var(--field);border-radius:10px;padding:6px 10px;background:var(--paper);font-weight:800;font-size:16px}
.common dd input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(156,101,108,.16)}
.faxmark.box{right:auto;border-radius:6px;background:rgba(243,227,166,.3);box-shadow:0 0 0 2.5px #d9b65a}

/* ---------- 使い方の案内（右上の「使い方」から開く） ---------- */
.account button{white-space:nowrap}
.account #helpBtn{border-color:var(--violet);color:var(--violet-deep)}
#helpPanel{position:fixed;right:20px;top:78px;z-index:25;width:392px;max-width:calc(100vw - 24px);max-height:calc(100vh - 98px);display:flex;flex-direction:column;background:var(--paper);border-radius:22px;box-shadow:0 2px 4px rgba(80,55,60,.08),0 24px 60px rgba(80,55,60,.26);overflow:hidden}
#helpPanel[hidden]{display:none}
#helpPanel header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px 20px;border-bottom:1px solid var(--line)}
#helpPanel header h2{margin:0;font-size:16px}
#helpClose{border:1.5px solid var(--line);background:none;border-radius:999px;padding:4px 14px;font-size:12px;font-weight:700;color:var(--sub);cursor:pointer}
.hlog{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--ground);min-height:220px}
.hmsg{max-width:94%;border-radius:16px;padding:12px 14px;font-size:14.500px;line-height:1.75;scroll-margin-top:8px}
.hmsg.bot{background:var(--paper);align-self:flex-start;border-top-left-radius:4px}
.hmsg.me{background:var(--violet);color:#fff;align-self:flex-end;border-top-right-radius:4px;font-weight:700}
.hmsg h3{margin:0 0 6px;font-size:15px}
.hmsg h3:not(:first-child){margin-top:14px}
.hmsg p{margin:0}
.hmsg p + p,.hmsg ol + p{margin-top:8px}
.hmsg ol{margin:0;padding-left:1.4em}
.hmsg li + li{margin-top:6px}
.hmsg .more{font-size:13px;color:var(--sub)}
.hchips{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px}
.hchips button,.hall{border:1.5px solid var(--field);background:var(--paper);border-radius:14px;padding:7px 13px;font:inherit;font-size:13.500px;font-weight:700;color:var(--violet-deep);text-align:left;cursor:pointer}
.hchips button:hover,.hall:hover{border-color:var(--violet);background:var(--violet-soft)}
.hall{margin-top:10px;color:var(--sub)}
.hcontact{display:inline-block;margin-top:10px;background:var(--violet);color:#fff;border-radius:999px;padding:8px 20px;font-weight:700;font-size:14px;text-decoration:none}
#helpForm{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
#helpIn{flex:1;min-width:0;border:1.5px solid var(--field);border-radius:999px;padding:10px 16px;font-size:15px;background:var(--paper)}
#helpIn:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(156,101,108,.16)}
#helpForm .btn{padding:10px 20px;font-size:14px}
@media(max-width:600px){
  #helpPanel{right:0;left:0;top:auto;bottom:0;width:auto;max-width:none;max-height:82vh;border-radius:22px 22px 0 0}
  .account{gap:6px}.account button{padding:5px 11px}
  .brand-text h1 small{display:none}
}

/* ---------- 取り込んだFAXの上のボタン（回す・削除） ---------- */
.pagetools{position:absolute;top:6px;right:6px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.faxwrap .pagetools button{border:0;border-radius:999px;background:rgba(63,64,73,.8);color:#fff;font:inherit;font-size:12px;font-weight:700;padding:6px 11px;cursor:pointer}
.faxwrap .pagetools button:hover{background:rgba(63,64,73,.95)}

/* ---------- 直近3日の注文：開く・削除 ---------- */
.recrow{display:flex;gap:8px;align-items:stretch}
.recrow > button[data-rec]{flex:1;min-width:0}
.recent .recdel{flex:none;width:auto;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:0 14px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;text-align:center}
.recent .recdel:hover,.recent .recdel.sure{border-color:var(--danger);color:var(--danger)}

/* ---------- 札の拡大表示 ---------- */
button.mini{border:0;font:inherit;cursor:zoom-in;flex-direction:column;justify-content:center;gap:10px;transition:box-shadow .15s}
button.mini:hover{box-shadow:0 0 0 2px var(--violet) inset}
.zoomhint{font-size:11.500px;font-weight:700;color:var(--sub)}
.zoom{position:fixed;inset:0;z-index:40;background:rgba(63,64,73,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px;cursor:zoom-out;animation:rise .2s ease both}
.zoom .tag{flex:none;margin:0}
.zoombar{display:flex;align-items:center;gap:14px;color:#fff;font-weight:700;font-size:14px}
.zoombar .btn{padding:7px 18px;font-size:13px;background:var(--paper)}