/* =========================================================
   Blue Print 記事工場 — 新聞社 × 町工場 / レトロモダン
   ========================================================= */
:root{
  --paper:#f3eee3; --paper-2:#ebe4d4; --paper-3:#e1d8c4; --card:#fbf8f1;
  --ink:#14171d; --ink-2:#3b404a; --ink-3:#6c7280; --rule:#1d222c;
  --bp:#1d4f8c; --bp-deep:#0f2f57; --bp-night:#0a1f3b; --cyan:#5ecdf0; --ice:#d6eeff;
  --red:#c8321e; --red-soft:#f6ddd6; --safety:#f2b705; --green:#2f7d4f; --steel:#7a8494;
  --f-mincho:'Zen Old Mincho',serif; --f-goth:'Zen Kaku Gothic New',sans-serif;
  --f-display:'Bebas Neue',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace; --f-hand:'Klee One',cursive;
  --shadow:0 1px 0 rgba(20,23,29,.08),0 8px 24px -12px rgba(20,23,29,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-goth);color:var(--ink);background:var(--paper);line-height:1.7;min-height:100vh;
  background-image:radial-gradient(rgba(20,23,29,.035) 1px,transparent 1px);background-size:4px 4px}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E")}
::selection{background:var(--bp);color:#fff}
a{color:var(--bp)}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--f-mono)}
.hide{display:none!important}

/* ---------- masthead ---------- */
.mast{border-bottom:3px double var(--rule);background:var(--paper);position:relative;z-index:20}
.mast-top{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 28px;border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-2)}
.mast-top .lamp{display:inline-flex;align-items:center;gap:6px}
.lamp i{width:8px;height:8px;border-radius:50%;background:var(--steel);display:inline-block;box-shadow:0 0 0 2px rgba(0,0,0,.06)}
.lamp.on i{background:#39b56a;box-shadow:0 0 8px #39b56a}
.lamp.warn i{background:var(--safety);box-shadow:0 0 8px var(--safety)}
.lamp.off i{background:var(--red)}
.mast-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 28px 12px;gap:16px}
.mast-left{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);line-height:1.5}
.mast-left b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.12em;color:var(--ink);display:block;font-weight:400}
.mast-title{text-align:center;cursor:pointer;user-select:none}
.mast-title .en{font-family:var(--f-display);letter-spacing:.42em;font-size:.86rem;color:var(--bp);display:block;margin-bottom:-2px;padding-left:.42em}
.mast-title .jp{font-family:var(--f-mincho);font-weight:900;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.05;letter-spacing:.14em;padding-left:.14em}
.mast-title .jp small{font-size:.42em;letter-spacing:.06em;vertical-align:.55em;margin-left:.25em;color:var(--bp)}
.mast-right{display:flex;justify-content:flex-end;gap:10px;align-items:center}
.motto{font-family:var(--f-mincho);font-size:.8rem;border:1.5px solid var(--rule);padding:4px 10px 3px;line-height:1.35;text-align:center;max-width:220px}
.motto small{display:block;font-family:var(--f-display);font-size:.62rem;letter-spacing:.2em;color:var(--red)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--rule);background:var(--card);padding:8px 16px;cursor:pointer;
  font-weight:700;font-size:.86rem;letter-spacing:.04em;transition:transform .08s,box-shadow .15s,background .15s;box-shadow:3px 3px 0 var(--rule);white-space:nowrap}
.btn:hover{background:#fff}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--rule)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.blue{background:var(--bp);color:#fff;border-color:var(--bp-night);box-shadow:3px 3px 0 var(--bp-night)}
.btn.blue:hover{background:#245da3}
.btn.red{background:var(--red);color:#fff;border-color:#7b1d10;box-shadow:3px 3px 0 #7b1d10}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:3px;padding:6px 8px}
.btn.ghost:hover{background:rgba(29,79,140,.06)}
.btn.sm{padding:4px 10px;font-size:.76rem;box-shadow:2px 2px 0 var(--rule)}
.btn.icon{padding:6px 9px}
.btn-press{position:relative;font-family:var(--f-mincho);font-size:1.25rem;font-weight:900;letter-spacing:.12em;padding:18px 34px;
  background:var(--ink);color:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--safety);overflow:hidden}
.btn-press::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(-45deg,var(--safety) 0 10px,var(--ink) 10px 20px)}
.btn-press::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(-45deg,var(--safety) 0 10px,var(--ink) 10px 20px)}
.btn-press:hover{background:#1f2430}
.btn-press .gear{display:inline-block;transition:transform .6s}
.btn-press:hover .gear{transform:rotate(180deg)}

/* ---------- layout ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:24px 28px 80px}
.sec-label{font-family:var(--f-display);letter-spacing:.24em;color:var(--bp);font-size:.86rem;display:flex;align-items:center;gap:10px}
.sec-label::after{content:'';flex:1;height:1px;background:var(--rule);opacity:.5}
.h-mincho{font-family:var(--f-mincho);font-weight:900;letter-spacing:.04em}
.muted{color:var(--ink-3)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- desk (list) ---------- */
.desk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 0 22px;flex-wrap:wrap}
.desk-head h2{font-family:var(--f-mincho);font-weight:900;font-size:1.8rem;letter-spacing:.08em;line-height:1.2}
.desk-head h2 small{display:block;font-family:var(--f-display);font-size:.8rem;letter-spacing:.3em;color:var(--bp);font-weight:400}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.clip{background:var(--card);border:1px solid var(--rule);cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s;box-shadow:var(--shadow);display:flex;flex-direction:column}
.clip:hover{transform:translateY(-3px) rotate(-.25deg);box-shadow:0 14px 30px -14px rgba(20,23,29,.45)}
.clip-img{aspect-ratio:16/9;background:var(--bp-deep) center/cover;filter:saturate(.75) contrast(1.05);position:relative;border-bottom:1px solid var(--rule)}
.clip-img.empty{background:var(--bp-night);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;display:grid;place-items:center;color:rgba(255,255,255,.4);font-family:var(--f-display);letter-spacing:.3em}
.clip-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:6px}
.clip-name{font-family:var(--f-mincho);font-weight:900;font-size:1.12rem;line-height:1.35}
.clip-catch{font-size:.84rem;color:var(--ink-2);font-family:var(--f-mincho)}
.clip-meta{margin-top:auto;font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--paper-3)}
.stamp{position:absolute;top:10px;right:10px;font-family:var(--f-mincho);font-weight:900;font-size:.8rem;letter-spacing:.1em;padding:3px 9px;border:2.5px solid currentColor;border-radius:4px;
  transform:rotate(6deg);background:rgba(251,248,241,.9);mix-blend-mode:multiply}
.st-draft{color:var(--steel)} .st-generating,.st-proofing{color:var(--safety);animation:blink 1.2s steps(2) infinite}
.st-ready{color:var(--green)} .st-error{color:var(--red)}
@keyframes blink{50%{opacity:.35}}
.clip.new{border:2px dashed var(--rule);background:transparent;box-shadow:none;display:grid;place-items:center;min-height:240px;text-align:center}
.clip.new:hover{background:rgba(29,79,140,.05)}
.clip.new .plus{font-family:var(--f-display);font-size:3rem;line-height:1;color:var(--bp)}
.empty-desk{padding:60px 20px;text-align:center;color:var(--ink-3);font-family:var(--f-mincho)}

/* ---------- article header + tabs ---------- */
.art-head{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.art-head .back{font-family:var(--f-mono);font-size:.74rem;cursor:pointer;color:var(--ink-3);display:inline-block;margin-bottom:4px}
.art-head .back:hover{color:var(--bp)}
.art-head h2{font-family:var(--f-mincho);font-weight:900;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.25}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--rule);margin-bottom:26px;overflow-x:auto;scrollbar-width:none}
.tab{border:1.5px solid var(--rule);border-bottom:none;background:var(--paper-2);padding:9px 18px 7px;cursor:pointer;font-weight:700;font-size:.88rem;
  border-radius:8px 8px 0 0;position:relative;top:2px;white-space:nowrap;display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.tab .n{font-family:var(--f-display);font-size:1.05rem;color:var(--bp);letter-spacing:.06em}
.tab.on{background:var(--paper);color:var(--ink);border-bottom:2px solid var(--paper)}
.tab .dot{width:7px;height:7px;border-radius:50%;background:var(--red)}
.tab:hover:not(.on){background:var(--paper-3)}

/* ---------- panels ---------- */
.panel{background:var(--card);border:1px solid var(--rule);margin-bottom:22px;position:relative;box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rule);background:linear-gradient(var(--paper-2),var(--paper-2))}
.panel-h .no{font-family:var(--f-display);font-size:1.35rem;color:#fff;background:var(--ink);width:38px;height:38px;display:grid;place-items:center;letter-spacing:.04em;flex-shrink:0}
.panel-h h3{font-family:var(--f-mincho);font-weight:900;font-size:1.12rem;letter-spacing:.06em;line-height:1.3}
.panel-h h3 small{display:block;font-family:var(--f-goth);font-weight:500;font-size:.74rem;color:var(--ink-3);letter-spacing:0}
.panel-b{padding:18px}
.panel.bp{background:var(--bp-night);color:#e5eefb;border-color:var(--bp-night)}
.panel.bp .panel-h{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.15)}
.bp-grid{background-image:linear-gradient(rgba(94,205,240,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(94,205,240,.09) 1px,transparent 1px),
  linear-gradient(rgba(94,205,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(94,205,240,.045) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}

/* ---------- form ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px 14px}
.f{display:flex;flex-direction:column;gap:4px;grid-column:span 4;min-width:0}
.f.s2{grid-column:span 2}.f.s3{grid-column:span 3}.f.s5{grid-column:span 5}.f.s6{grid-column:span 6}.f.s8{grid-column:span 8}.f.s12{grid-column:span 12}
.f label{font-size:.72rem;font-weight:700;color:var(--ink-2);letter-spacing:.05em;display:flex;gap:6px;align-items:center}
.f label .req{color:var(--red);font-size:.66rem}
.f label .hint{font-weight:400;color:var(--ink-3)}
input[type=text],input[type=date],input[type=password],input[type=url],input[type=number],select,textarea{
  width:100%;border:1px solid #b9b2a2;background:#fffdf8;padding:8px 10px;font-size:.9rem;border-radius:0;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;line-height:1.75;min-height:64px}
input:focus,select:focus,textarea:focus{border-color:var(--bp);box-shadow:0 0 0 3px rgba(29,79,140,.14)}
.check{display:flex;gap:8px;align-items:center;cursor:pointer;font-size:.86rem}
.check input{width:16px;height:16px;accent-color:var(--bp)}

/* 取材対象者＝社員証 */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.badge{background:#fffdf8;border:1.5px solid var(--rule);position:relative;padding:28px 16px 14px;box-shadow:4px 4px 0 var(--paper-3)}
.badge::before{content:'';position:absolute;top:9px;left:50%;width:46px;height:8px;margin-left:-23px;border-radius:5px;background:var(--paper-2);border:1.5px solid var(--rule)}
.badge-band{position:absolute;top:0;left:0;right:0;height:4px}
.badge.k-社長 .badge-band,.badge.k-役員 .badge-band{background:var(--bp)}
.badge.k-従業員 .badge-band{background:var(--green)}
.badge.k-取引先 .badge-band{background:var(--safety)}
.badge.k-その他 .badge-band{background:var(--steel)}
.badge-id{position:absolute;top:8px;left:12px;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
.badge-del{position:absolute;top:4px;right:6px}
.badge .grid{gap:8px 10px}
.add-card{border:2px dashed #b9b2a2;display:grid;place-items:center;min-height:120px;cursor:pointer;color:var(--ink-3);font-weight:700;background:transparent}
.add-card:hover{border-color:var(--bp);color:var(--bp);background:rgba(29,79,140,.04)}

/* drop zone */

.drop{display:block;border:2px dashed #a49c8a;padding:22px;text-align:center;cursor:pointer;background:repeating-linear-gradient(-45deg,transparent 0 12px,rgba(20,23,29,.025) 12px 24px);transition:all .15s;position:relative}
.drop:hover,.drop.over{border-color:var(--bp);background-color:rgba(29,79,140,.06)}
.drop b{font-family:var(--f-mincho);font-size:1.05rem;display:block}
.drop small{color:var(--ink-3);font-size:.76rem}
.drop input{display:none}

/* 原稿リスト */
.src-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.src{display:grid;grid-template-columns:auto 1fr 170px 190px auto;gap:10px;align-items:center;border:1px solid #cfc6b3;background:#fffdf8;padding:10px 12px}
.src-ico{width:36px;height:44px;background:var(--paper-2);border:1px solid var(--rule);position:relative;font-family:var(--f-display);font-size:.7rem;display:grid;place-items:end center;padding-bottom:3px;letter-spacing:.05em}
.src-ico::before{content:'';position:absolute;top:-1px;right:-1px;border:6px solid;border-color:var(--paper) var(--paper) var(--rule) var(--rule)}
.src-name{font-weight:700;font-size:.88rem;word-break:break-all}
.src-head{font-size:.72rem;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.src select{font-size:.8rem;padding:5px 6px}
.paste{margin-top:12px}
.paste summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--bp)}

/* 写真＝コンタクトシート */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:14px;background:#1a1c20;padding:16px;border:1px solid var(--rule);
  background-image:radial-gradient(circle at 10px 6px,#2b2e33 3px,transparent 3.5px),radial-gradient(circle at 10px 6px,#2b2e33 3px,transparent 3.5px);background-size:22px 100%,22px 100%;background-position:0 0,0 calc(100% - 0px)}
.sheet:empty{display:none}
.frame{background:#f4f1ea;padding:8px 8px 10px;position:relative;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#333}
.frame .pid{position:absolute;top:12px;left:12px;background:rgba(10,31,59,.88);color:#fff;font-family:var(--f-mono);font-size:.68rem;padding:1px 6px}
.frame .hero-flag{position:absolute;top:12px;right:12px;background:var(--safety);color:var(--ink);font-family:var(--f-display);letter-spacing:.12em;font-size:.78rem;padding:1px 6px}
.frame textarea{margin-top:8px;font-family:var(--f-hand);font-size:.86rem;min-height:56px;background:#fffef6;border-color:#d9d2bd;line-height:1.5}
.frame .row{margin-top:6px;gap:6px;flex-wrap:nowrap}
.frame select{font-size:.76rem;padding:4px}
.frame.skip img{filter:grayscale(1) opacity(.45)}

/* generate bar */
.gen-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px;border:2px solid var(--rule);background:var(--paper-2);position:relative}
.gen-bar .checklist{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem}
.gen-bar .checklist span{display:flex;align-items:center;gap:6px}
.gen-bar .checklist i{font-style:normal;font-family:var(--f-mono);font-weight:600}
.ok{color:var(--green)} .ng{color:var(--red)}

/* ---------- 製造ライン ---------- */
.line{border:2px solid var(--rule);color:#e5eefb;position:relative;overflow:hidden;padding:26px 26px 22px;background-color:var(--bp-night)}
.line-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
.line-title{font-family:var(--f-display);letter-spacing:.3em;font-size:.9rem;color:var(--cyan)}
.line-title b{display:block;font-family:var(--f-mincho);font-size:1.6rem;letter-spacing:.1em;color:#fff;font-weight:900}
.clock{font-family:var(--f-mono);font-size:1.6rem;color:var(--safety);text-shadow:0 0 12px rgba(242,183,5,.45);letter-spacing:.05em;text-align:right;line-height:1.2}
.clock small{display:block;font-size:.66rem;color:rgba(229,238,251,.6);letter-spacing:.2em}
.stations{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:30px 0 8px;position:relative;z-index:2}
.station{text-align:center;position:relative;padding-top:4px}
.st-box{width:84px;height:84px;margin:0 auto;border:2px solid rgba(229,238,251,.35);display:grid;place-items:center;background:rgba(10,31,59,.85);position:relative;transition:all .3s}
.st-box svg{width:46px;height:46px;stroke:rgba(229,238,251,.55);fill:none;stroke-width:1.8;transition:stroke .3s}
.st-name{margin-top:10px;font-family:var(--f-mincho);font-weight:900;font-size:1rem;letter-spacing:.08em;opacity:.55}
.st-sub{font-family:var(--f-mono);font-size:.64rem;color:rgba(229,238,251,.5);letter-spacing:.06em}
.station.on .st-box{border-color:var(--safety);box-shadow:0 0 0 4px rgba(242,183,5,.18),0 0 26px rgba(242,183,5,.35)}
.station.on .st-box svg{stroke:var(--safety)}
.station.on .st-name{opacity:1;color:var(--safety)}
.station.done .st-box{border-color:var(--cyan)}
.station.done .st-box svg{stroke:var(--cyan)}
.station.done .st-name{opacity:.95}
.station.done .st-box::after{content:'✓';position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;background:var(--cyan);color:var(--bp-night);font-weight:900;font-size:.8rem;display:grid;place-items:center}
.station.err .st-box{border-color:var(--red);box-shadow:0 0 20px rgba(200,50,30,.5)}
.station.on .spin{animation:spin 2.4s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.station.on .bob{animation:bob .5s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-3px)}}
.conveyor{height:22px;margin:-62px 6% 52px;position:relative;z-index:1;border-top:2px solid rgba(229,238,251,.35);border-bottom:2px solid rgba(229,238,251,.35);
  background:repeating-linear-gradient(90deg,rgba(229,238,251,.18) 0 2px,transparent 2px 26px)}
.line.running .conveyor{animation:belt .9s linear infinite}
@keyframes belt{to{background-position:26px 0}}
.sheet-runner{position:absolute;top:-30px;width:30px;height:38px;background:#f3eee3;border:1px solid #c9c0ad;transition:left 1.1s cubic-bezier(.6,.05,.3,1);box-shadow:0 4px 8px rgba(0,0,0,.4)}
.sheet-runner::before{content:'';position:absolute;left:5px;right:5px;top:7px;height:20px;background:repeating-linear-gradient(transparent 0 3px,#9aa3b1 3px 4px)}
.line.running .sheet-runner{animation:wobble .6s ease-in-out infinite alternate}
@keyframes wobble{to{transform:translateY(-3px) rotate(-2deg)}}
.line-cols{display:grid;grid-template-columns:270px 1fr;gap:22px;margin-top:6px;position:relative;z-index:2}
.gauge-wrap{text-align:center}
.gauge-wrap svg{width:100%;max-width:250px}
.gauge-label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:rgba(229,238,251,.65)}
.gauge-val{font-family:var(--f-mono);font-size:1.5rem;color:#fff}
.needle{transition:transform .5s cubic-bezier(.4,1.6,.5,1);transform-origin:125px 125px}
.flap{background:#05080f;border:1px solid rgba(229,238,251,.18);padding:14px 16px;font-family:var(--f-mincho);font-weight:700;font-size:1.06rem;color:#fff;min-height:58px;display:flex;align-items:center;gap:12px;overflow:hidden}
.flap .bulb{width:10px;height:10px;border-radius:50%;background:var(--safety);box-shadow:0 0 10px var(--safety);flex-shrink:0;animation:blink 1s steps(2) infinite}
.flap span{display:inline-block;animation:flapIn .45s cubic-bezier(.2,.8,.3,1)}
@keyframes flapIn{from{transform:translateY(100%) rotateX(-70deg);opacity:0}to{transform:none;opacity:1}}
.logbook{margin-top:12px;background:#f3eee3;color:var(--ink);font-family:var(--f-mono);font-size:.74rem;line-height:1.75;padding:12px 14px 12px 46px;height:220px;overflow:auto;position:relative;
  background-image:linear-gradient(90deg,transparent 34px,rgba(200,50,30,.45) 34px,rgba(200,50,30,.45) 35px,transparent 35px),repeating-linear-gradient(transparent 0 20.9px,rgba(29,79,140,.18) 20.9px 21px);background-attachment:local}
.logbook .t{color:var(--red);position:absolute;left:-44px;width:30px;text-align:right}
.logbook div{position:relative}
.logbook-h{font-family:var(--f-display);letter-spacing:.24em;font-size:.82rem;color:var(--cyan);margin-top:16px}
.press-done{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(10,31,59,.6);backdrop-filter:blur(2px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
.press-done .paper{background:var(--paper);color:var(--ink);padding:28px 36px 24px;text-align:center;border:1px solid var(--rule);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:paperOut .8s cubic-bezier(.2,.9,.3,1.2);max-width:92%}
@keyframes paperOut{from{transform:translateY(80px) scale(.9);opacity:0}}
.press-done .gogai{font-family:var(--f-mincho);font-weight:900;font-size:.9rem;letter-spacing:.4em;color:var(--red);border-top:2px solid var(--red);border-bottom:2px solid var(--red);display:inline-block;padding:2px 10px 2px 14px;margin-bottom:12px}
.press-done h4{font-family:var(--f-mincho);font-weight:900;font-size:1.7rem;line-height:1.35;margin-bottom:8px}
.press-done .big-stamp{position:absolute;right:-14px;top:-18px;font-family:var(--f-mincho);font-weight:900;color:var(--red);border:4px double var(--red);border-radius:50%;width:84px;height:84px;display:grid;place-items:center;font-size:1.25rem;transform:rotate(-14deg);background:rgba(243,238,227,.9);animation:stampIn .5s .5s both cubic-bezier(.3,1.8,.5,1)}
@keyframes stampIn{from{transform:rotate(-14deg) scale(2.4);opacity:0}}
.idle-line{padding:30px 0 10px;text-align:center;position:relative;z-index:2}
.idle-line p{font-family:var(--f-mincho);font-size:1.05rem;margin-bottom:18px}

/* ---------- 編集室 ---------- */
.editor{display:grid;grid-template-columns:minmax(380px,1fr) minmax(420px,1.1fr);gap:20px;align-items:start}
.ed-left{min-width:0}
.ed-right{position:sticky;top:12px;min-width:0}
.ed-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;background:var(--ink);color:var(--paper);margin-bottom:14px;position:sticky;top:0;z-index:15}
.ed-toolbar .saved{font-family:var(--f-mono);font-size:.7rem;color:rgba(243,238,227,.7)}
.ed-toolbar .btn{box-shadow:2px 2px 0 rgba(243,238,227,.4);border-color:var(--paper);color:var(--ink)}
.ed-toolbar .btn.red{color:#fff}
.notes{background:#fff6b8;border:1px solid #d8c55a;padding:12px 14px 12px 34px;margin-bottom:14px;position:relative;transform:rotate(-.3deg);box-shadow:2px 3px 0 rgba(0,0,0,.08)}
.notes::before{content:'申送';position:absolute;left:6px;top:10px;writing-mode:vertical-rl;font-family:var(--f-mincho);font-weight:900;font-size:.78rem;color:var(--red);letter-spacing:.2em}
.notes li{font-size:.82rem;margin-left:16px;line-height:1.6}
.blk{border:1px solid #cfc6b3;background:#fffdf8;margin-bottom:12px}
.blk>summary{list-style:none;cursor:pointer;padding:10px 14px;display:flex;gap:10px;align-items:center;font-weight:700;background:var(--paper-2);border-bottom:1px solid transparent}
.blk[open]>summary{border-bottom-color:#cfc6b3}
.blk>summary::-webkit-details-marker{display:none}
.blk>summary::before{content:'▸';font-size:.8rem;transition:transform .15s;color:var(--bp)}
.blk[open]>summary::before{transform:rotate(90deg)}
.blk>summary .tag{font-family:var(--f-display);letter-spacing:.16em;font-size:.82rem;color:var(--bp);font-weight:400}
.blk>summary .ttl{font-family:var(--f-mincho);font-weight:900;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blk-b{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.fld{display:flex;flex-direction:column;gap:3px;position:relative}
.fld>.lbl{font-size:.7rem;font-weight:700;color:var(--ink-3);display:flex;align-items:center;gap:6px;letter-spacing:.04em}
.fld>.lbl .cnt{font-family:var(--f-mono);font-weight:400;margin-left:auto}
.fld textarea{min-height:44px;font-size:.88rem;line-height:1.85;font-family:var(--f-goth)}
.paras{display:flex;flex-direction:column;gap:6px}
.para{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:start}
.para-ops{display:flex;flex-direction:column;gap:2px;opacity:.35;transition:opacity .15s}
.para:hover .para-ops,.para:focus-within .para-ops{opacity:1}
.mini{border:1px solid #cfc6b3;background:#fff;width:24px;height:22px;cursor:pointer;font-size:.72rem;line-height:1;display:grid;place-items:center;padding:0}
.mini:hover{background:var(--ice);border-color:var(--bp)}
.mini.x:hover{background:var(--red-soft);border-color:var(--red)}
.ai-btn{font-family:var(--f-display);letter-spacing:.1em;font-size:.72rem;border:1px solid var(--bp);color:var(--bp);background:#fff;padding:1px 7px;cursor:pointer}
.ai-btn:hover{background:var(--bp);color:#fff}
.qa-card{border-left:3px solid var(--bp);padding:8px 0 8px 12px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(90deg,rgba(29,79,140,.04),transparent 40%)}
.qa-card .qhead{display:flex;gap:6px;align-items:center}
.qa-card .qhead b{font-family:var(--f-display);color:var(--bp);font-size:1rem;letter-spacing:.08em;width:30px}
.photo-pick{display:flex;gap:10px;align-items:center}
.photo-pick .ph{width:96px;aspect-ratio:4/3;background:var(--paper-3) center/cover;border:1px solid var(--rule);cursor:pointer;display:grid;place-items:center;font-size:.7rem;color:var(--ink-3);flex-shrink:0}
.photo-pick .ph:hover{outline:2px solid var(--bp)}
.photo-pick .info{font-size:.74rem;color:var(--ink-3);flex:1;min-width:0}
.preview-frame{border:1px solid var(--rule);background:#fff;box-shadow:var(--shadow)}
.preview-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--paper-2);border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-size:.7rem}
.preview-bar .dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#c9c0ad;margin-right:4px}
.preview-bar .url{flex:1;background:#fff;border:1px solid #cfc6b3;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-frame iframe{width:100%;height:calc(100vh - 120px);border:0;display:block;background:#f4f1ec;transition:width .3s}
.preview-frame.sp iframe{width:390px;margin:0 auto}
.preview-frame.sp{background:#2a2e35}

/* ---------- 赤ペン校閲 ---------- */
.proof-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;margin-bottom:18px}
.proof-sum{font-family:var(--f-hand);font-size:1.05rem;color:var(--red);line-height:1.7;background:#fffdf8;border:1px solid #e3c9c2;padding:14px 18px;position:relative}
.proof-sum::before{content:'校閲部より';display:block;font-family:var(--f-mincho);font-weight:900;font-size:.76rem;letter-spacing:.2em;color:var(--ink-3);margin-bottom:4px}
.proof-stats{display:flex;gap:10px}
.pstat{border:1.5px solid var(--rule);background:#fffdf8;padding:8px 14px;text-align:center;min-width:90px}
.pstat b{display:block;font-family:var(--f-display);font-size:2rem;line-height:1;letter-spacing:.04em}
.pstat small{font-size:.68rem;color:var(--ink-3);font-weight:700}
.pstat.red b{color:var(--red)}
.issues{display:flex;flex-direction:column;gap:12px}
.issue{background:#fffdf8;border:1px solid #d9d1bf;display:grid;grid-template-columns:44px 1fr;position:relative;transition:opacity .2s}
.issue .chk{display:grid;place-items:start center;padding-top:16px;border-right:1px dashed #d9d1bf}
.issue .chk input{width:20px;height:20px;accent-color:var(--red);cursor:pointer}
.issue .body{padding:12px 16px 14px;min-width:0}
.issue .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.72rem;margin-bottom:8px}
.kind{font-weight:900;padding:1px 8px;border:1.5px solid currentColor;font-size:.7rem;letter-spacing:.06em}
.k-unsupported{color:var(--red)} .k-mismatch{color:#b5410f} .k-typo{color:var(--bp)} .k-name{color:#7b2a8c} .k-consistency{color:var(--green)} .k-readability{color:var(--steel)}
.sev{font-family:var(--f-mono)} .sev-high{color:var(--red);font-weight:600}
.where{color:var(--ink-3);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.diff{font-size:.92rem;line-height:1.9}
.diff del{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;background:var(--red-soft)}
.diff .arrow{color:var(--red);margin:0 6px;font-weight:900}
.diff ins{text-decoration:none;font-family:var(--f-hand);color:var(--red);font-size:1.02rem;border-bottom:1.5px solid var(--red)}
.diff ins.del-only{font-family:var(--f-goth);font-size:.78rem;border:1px solid var(--red);padding:0 6px}
.issue .reason{font-size:.82rem;margin-top:6px;color:var(--ink-2)}
.issue .evid{font-size:.74rem;color:var(--ink-3);margin-top:3px;font-family:var(--f-mincho)}
.issue .sug-edit{margin-top:8px;display:none}
.issue.editing .sug-edit{display:block}
.issue.blocked{background:repeating-linear-gradient(-45deg,#fffdf8 0 14px,#fbf3e6 14px 28px)}
.guard{display:flex;gap:10px;align-items:center;margin-top:10px;padding:8px 12px;border:2px solid var(--red);color:var(--red);font-size:.8rem;font-weight:700;background:#fff}
.guard .seal{font-family:var(--f-mincho);font-weight:900;border:2px solid var(--red);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-size:.72rem;line-height:1.15;text-align:center;transform:rotate(-12deg);flex-shrink:0}
.issue.applied{opacity:.6}
.issue.applied::after{content:'反映済';position:absolute;right:14px;top:10px;font-family:var(--f-mincho);font-weight:900;color:var(--green);border:2px solid var(--green);padding:0 8px;transform:rotate(8deg)}
.issue.unlocatable .diff{opacity:.6}
.proof-actions{position:sticky;bottom:0;background:var(--paper);border-top:2px solid var(--rule);padding:12px 0;margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:5}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--rule);padding:2px 10px;font-size:.74rem;cursor:pointer;background:#fffdf8;font-weight:700}
.chip.on{background:var(--ink);color:var(--paper)}

/* ---------- 出荷 ---------- */
.ship{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.crate{border:2px solid var(--rule);background:#fffdf8;padding:20px 18px 18px;position:relative;cursor:pointer;transition:transform .12s;box-shadow:5px 5px 0 var(--rule);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px}
.crate:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--rule)}
.crate:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--rule)}
.crate .lbl{font-family:var(--f-display);letter-spacing:.24em;color:var(--bp);font-size:.8rem}
.crate h4{font-family:var(--f-mincho);font-weight:900;font-size:1.25rem;line-height:1.3}
.crate p{font-size:.8rem;color:var(--ink-2)}
.crate .ext{position:absolute;top:14px;right:14px;font-family:var(--f-mono);font-size:.7rem;border:1px solid var(--rule);padding:1px 6px;background:var(--paper)}
.crate.primary{background:var(--bp-night);color:#e5eefb;border-color:var(--bp-night);box-shadow:5px 5px 0 var(--safety)}
.crate.primary .lbl{color:var(--cyan)} .crate.primary p{color:rgba(229,238,251,.75)} .crate.primary .ext{background:transparent;border-color:rgba(229,238,251,.4)}
.manifest{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:8px}
.manifest th,.manifest td{border-bottom:1px solid #d9d1bf;padding:7px 8px;text-align:left;vertical-align:top}
.manifest th{font-size:.7rem;color:var(--ink-3);letter-spacing:.06em}
.manifest td.mono{font-size:.76rem}
.manifest img{width:64px;aspect-ratio:4/3;object-fit:cover;display:block}

/* ---------- modal / drawer ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(10,15,25,.55);z-index:500;display:grid;place-items:center;padding:20px;animation:fade .15s}
.modal{background:var(--paper);border:2px solid var(--rule);width:min(720px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:10px 10px 0 rgba(0,0,0,.35)}
.modal.wide{width:min(1000px,100%)}
.modal-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:2px solid var(--rule);background:var(--paper-2)}
.modal-h h3{font-family:var(--f-mincho);font-weight:900;font-size:1.1rem;flex:1}
.modal-b{padding:16px;overflow:auto}
.modal-f{padding:12px 16px;border-top:1px solid var(--rule);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pick-grid .pk{cursor:pointer;border:2px solid transparent;background:#fff;padding:4px}
.pick-grid .pk:hover{border-color:var(--bp)}
.pick-grid .pk.sel{border-color:var(--red)}
.pick-grid .pk img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pick-grid .pk small{display:block;font-size:.7rem;line-height:1.4;padding:4px 2px 0;color:var(--ink-2);font-family:var(--f-hand)}
.versions{display:flex;flex-direction:column}
.ver{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px dashed #cfc6b3}
.ver .vno{font-family:var(--f-display);font-size:1.2rem;color:var(--bp);width:40px}
.ver .vl{font-weight:700;font-size:.88rem} .ver .vt{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
.rw-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rw-compare>div{border:1px solid #cfc6b3;padding:10px 12px;font-size:.86rem;background:#fff;white-space:pre-wrap;line-height:1.85;max-height:46vh;overflow:auto}
.rw-compare h5{font-family:var(--f-display);letter-spacing:.2em;color:var(--bp);font-weight:400;margin-bottom:4px}
.rw-compare .after{border-color:var(--red);background:#fffaf8}
.chips-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.timecard{width:min(380px,100%);background:#f7f1dd;border:1px solid #b9ad8a;padding:22px 24px 26px;box-shadow:0 24px 50px -20px rgba(0,0,0,.45);position:relative;
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(200,50,30,.25) 27px 28px)}
.timecard::before{content:'';position:absolute;left:50%;top:-12px;width:20px;height:24px;margin-left:-10px;border-radius:0 0 10px 10px;background:var(--paper);border:1px solid #b9ad8a;border-top:none}
.timecard .tc-h{text-align:center;border-bottom:3px double var(--rule);padding-bottom:10px;margin-bottom:16px}
.timecard .tc-h small{font-family:var(--f-display);letter-spacing:.4em;color:var(--red)}
.timecard .tc-h b{display:block;font-family:var(--f-mincho);font-size:1.7rem;font-weight:900;letter-spacing:.2em}
.timecard .stamp-in{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2);text-align:center;margin-top:14px;min-height:1.4em}
.timecard .btn{width:100%;justify-content:center;margin-top:12px}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--paper);padding:10px 18px;font-size:.86rem;border-left:5px solid var(--safety);box-shadow:0 10px 24px -8px rgba(0,0,0,.5);animation:toastIn .25s;pointer-events:auto;max-width:90vw}
.toast.err{border-left-color:var(--red)} .toast.ok{border-left-color:#39b56a}
@keyframes toastIn{from{transform:translateY(16px);opacity:0}}
.spin-ico{display:inline-block;animation:spin 1s linear infinite}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .editor{grid-template-columns:1fr}
  .ed-right{position:relative;top:0}
  .preview-frame iframe{height:70vh}
  .line-cols{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{padding:16px 14px 70px}
  .mast-main{grid-template-columns:1fr;text-align:center;padding:10px 14px}
  .mast-left,.mast-right .motto{display:none}
  .mast-right{justify-content:center}
  .mast-top{padding:5px 14px;font-size:.62rem}
  .mast-top .hide-sp{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .f,.f.s2,.f.s3,.f.s5,.f.s6,.f.s8,.f.s12{grid-column:span 2}
  .f.half{grid-column:span 1}
  .src{grid-template-columns:auto 1fr auto;grid-template-areas:"i n d" "c c c" "p p p"}
  .src>.src-ico{grid-area:i}.src>.src-meta{grid-area:n}.src>.sel-cat{grid-area:c}.src>.sel-person{grid-area:p}.src>.src-ops{grid-area:d}
  .stations{grid-template-columns:repeat(5,1fr);gap:2px}
  .st-box{width:52px;height:52px}.st-box svg{width:30px;height:30px}
  .st-name{font-size:.72rem}.st-sub{display:none}
  .conveyor{margin:-44px 8% 40px}
  .proof-head{grid-template-columns:1fr}
  .rw-compare{grid-template-columns:1fr}
  .preview-frame.sp iframe{width:100%}
  .badges{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.flash{animation:flash 1.6s ease}
@keyframes flash{0%,40%{box-shadow:0 0 0 4px rgba(200,50,30,.45);background:#fff4f0}}
.ask-bg{position:fixed;inset:0;background:rgba(10,15,25,.5);z-index:800;display:grid;place-items:center;padding:20px;animation:fade .12s}
.ask{background:var(--paper);border:2px solid var(--rule);box-shadow:8px 8px 0 rgba(0,0,0,.35);padding:22px 22px 18px;width:min(440px,100%);position:relative}
.ask::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(-45deg,var(--safety) 0 8px,var(--ink) 8px 16px)}
.ask p{font-family:var(--f-mincho);font-weight:700;font-size:1rem;line-height:1.7;margin:6px 0 16px;white-space:pre-wrap}