:root{
  --brand:#00bce4; --brand-d:#0098ba; --brand-l:#e7f8fd;
  --ink:#222; --muted:#666; --line:#d8dde1; --bg:#54606a; --paper:#fff;
  --warn-bg:#fff7d6; --warn-bd:#e7c84b; --warn-ink:#7a5b00;
  --ok:#2e9b54; --danger:#e23b32;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  font-size:15px;line-height:1.75;-webkit-print-color-adjust:exact;print-color-adjust:exact;
}
a{color:var(--brand-d)}

/* ===== top toolbar ===== */
.toolbar{
  position:sticky;top:0;z-index:100;background:var(--brand);color:#fff;
  display:flex;align-items:center;gap:10px;padding:8px 14px;box-shadow:0 2px 8px rgba(0,0,0,.25);
  flex-wrap:wrap;
}
.toolbar .home{color:#fff;text-decoration:none;font-size:18px;opacity:.9}
.toolbar .home:hover{opacity:1}
.toolbar .ttl{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.toolbar .spacer{flex:1}
.toolbar .pageind{display:flex;align-items:center;gap:4px;font-size:13px;background:rgba(255,255,255,.15);padding:3px 8px;border-radius:8px}
.toolbar .pageind input{width:42px;text-align:center;border:none;border-radius:5px;height:26px;font-weight:700}
.btn{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);color:#fff;
  padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.32)}
.btn.solid{background:#fff;color:var(--brand-d);border-color:#fff}
.btn.warn{background:var(--danger);border-color:var(--danger)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn[disabled]{opacity:.45;cursor:default}
.badge{font-size:11px;background:#fff;color:var(--brand-d);padding:2px 8px;border-radius:20px;font-weight:700}
.badge.edit{background:#ffd34d;color:#6b4e00}

/* ===== A4 paged document ===== */
.doc{padding:24px 12px 80px;display:flex;flex-direction:column;align-items:center;gap:20px}
.sheet{
  width:210mm;height:297mm;overflow:hidden;background:var(--paper);padding:15mm 14mm;
  box-shadow:0 4px 18px rgba(0,0,0,.35);position:relative;border-radius:2px;
}
.sheet .fit{transform-origin:top left}
.sheet .pageno{position:absolute;right:10mm;bottom:7mm;font-size:11px;color:#9aa0a6;z-index:3}
.sheet.target{outline:3px solid #ffd34d;outline-offset:4px}
/* edit mode: show content at natural size (no scaling) for easy editing */
.doc[data-editing="1"] .sheet{height:auto;min-height:297mm;overflow:visible}
.doc[data-editing="1"] .sheet .fit{transform:none !important;width:auto !important}

/* cover sheet */
.sheet.cover{padding:0;overflow:hidden;display:flex;flex-direction:column}
.sheet.cover img{width:100%;display:block}
.sheet.cover .meta{padding:26px 24px;text-align:center}
.sheet.cover .meta h1{margin:0 0 8px;font-size:30px;color:#0a7fa0}
.sheet.cover .meta p{margin:3px 0;color:#0c5e76;font-weight:600;font-size:17px}

/* ===== content components (shared with stored content_html) ===== */
h2.chap{background:var(--brand);color:#fff;font-size:21px;margin:0 0 22px;padding:12px 18px;border-radius:6px;display:flex;align-items:baseline;gap:12px}
h2.chap .no{font-size:15px;opacity:.9;font-weight:700}
h3{font-size:17px;color:var(--brand-d);margin:26px 0 12px;padding:7px 12px 7px 14px;border-left:6px solid var(--brand);background:var(--brand-l);border-radius:0 6px 6px 0}
h3:first-of-type{margin-top:2px}
h4.mini{font-size:14px;color:var(--brand-d);margin:16px 0 6px;font-weight:700}
p{margin:.5em 0}
ul,ol{margin:.5em 0;padding-left:1.5em}
li{margin:.2em 0}
.lead{font-size:15px}.center{text-align:center}.muted{color:var(--muted)}.small{font-size:13px}

.tbl-wrap{overflow-x:auto;margin:12px 0}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
thead th{background:var(--brand);color:#fff;font-weight:700;white-space:nowrap}
tbody th{background:var(--brand-l);color:var(--brand-d);white-space:nowrap}
tbody tr:nth-child(even) td{background:#fafcfd}
td.c,th.c{text-align:center}td.r{text-align:right}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.card .k{font-size:12px;color:var(--muted);font-weight:700}
.card .v{font-size:15px;margin-top:2px}
.keyvals{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:10px 0}
.keyvals dt{font-weight:700;color:var(--brand-d)}.keyvals dd{margin:0}
.note{background:var(--brand-l);border:1px solid #bce8f4;border-radius:8px;padding:10px 14px;margin:12px 0}
.tbd{background:var(--warn-bg);border:1px dashed var(--warn-bd);color:var(--warn-ink);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}
.tbd-block{background:var(--warn-bg);border:1px dashed var(--warn-bd);color:var(--warn-ink);border-radius:8px;padding:10px 14px;margin:12px 0;font-size:13px}
figure{margin:14px 0;text-align:center}
figure img{max-width:100%;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
figcaption{font-size:12px;color:var(--muted);margin-top:6px}

/* org chart */
.org{margin:16px 0}
.org-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:0 0 6px}
.obox{border:2px solid var(--brand);border-radius:6px;min-width:180px;background:#fff;overflow:hidden}
.obox .oh{background:var(--brand);color:#fff;font-weight:700;text-align:center;padding:5px}
.obox .ob{padding:8px 10px;text-align:center;font-size:13px;line-height:1.5}
.org .conn{width:2px;height:16px;background:var(--brand);margin:0 auto}
.org-floor{border:1px solid var(--brand);border-radius:8px;padding:10px;margin-top:10px}
.org-floor .flabel{display:inline-block;background:var(--brand);color:#fff;font-weight:700;font-size:12px;padding:2px 10px;border-radius:4px;margin-bottom:8px}
.pos-row{display:flex;gap:8px;flex-wrap:wrap}
.pos{border:1px solid var(--brand);border-radius:6px;min-width:92px;flex:1;overflow:hidden;text-align:center}
.pos .ph{background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:3px 4px}
.pos .pb{font-size:12px;padding:6px 4px}
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.contacts .c{border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:6px;padding:8px 12px}
.contacts .c .name{font-weight:700}
.contacts .c .tel{font-size:18px;color:var(--brand-d);font-weight:700}

/* gantt */
.gantt{margin:14px 0;overflow-x:auto}
.gantt .inner{min-width:600px;--rh:20px}
.g-head{display:grid}
.g-head .hc{border:1px solid var(--line);background:#e3e7ea;font-weight:700;text-align:center;padding:4px 2px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1.2}
.g-head .hc.brand{background:var(--brand);color:#fff}
.g-body{display:grid;position:relative;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.g-time{grid-column:1;display:flex;align-items:flex-start;justify-content:center;font-size:10px;color:#555;border-right:1px solid var(--line);border-bottom:1px solid #c4c9cd;padding-top:1px}
.g-lane{border-right:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rh) - 1px),#ededed calc(var(--rh) - 1px),#ededed var(--rh))}
.blk{margin:1px;border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.18;padding:1px 2px;z-index:2;font-size:10px;overflow:hidden}
.blk.under{z-index:1}
.c-gray{background:#e2e2e2;color:#555}.c-pink{background:#f1a9c7;color:#fff}.c-purple{background:#c7a2d4;color:#fff}
.c-magenta{background:#ef79b3;color:#fff}.c-orange{background:#f2a866;color:#fff}.c-dorange{background:#e8893c;color:#fff}
.c-blue{background:#8fa9de;color:#fff}.c-dblue{background:#4071c2;color:#fff}.c-green{background:#a0cb90;color:#fff}
.c-yellow{background:#f7d469;color:#6e5600}.c-cyan{background:#48b3e8;color:#fff}.c-sky{background:#a9c9e8;color:#fff}
.c-red{background:#e23b32;color:#fff}.c-pale{background:#e7ecfa;color:#5a6473;font-size:9px}.c-pale2{background:#b9c6e9;color:#33406b;font-size:9px}

/* ===== editor affordances ===== */
.doc[data-editing="1"] [data-edit]{cursor:text;border-radius:3px;transition:background .12s}
.doc[data-editing="1"] [data-edit]:hover{background:#fff6c9;box-shadow:0 0 0 2px #ffe27a}
[contenteditable="true"]{outline:2px solid var(--brand);background:#fffef0;cursor:text}
.doc[data-editing="1"] img{cursor:pointer}
.doc[data-editing="1"] figure img,.doc[data-editing="1"] .sheet.cover img{outline:2px dashed var(--brand);outline-offset:2px}
img.dragover{outline:3px solid var(--ok) !important;filter:brightness(.85)}
.edit-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#222;color:#fff;
  padding:8px 16px;border-radius:20px;font-size:13px;z-index:90;opacity:.9;box-shadow:0 3px 12px rgba(0,0,0,.4)}

/* ===== modal / login ===== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200}
.modal{background:#fff;border-radius:12px;padding:24px;width:340px;max-width:92vw;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.modal h3{border:none;background:none;padding:0;margin:0 0 14px;color:var(--ink);font-size:18px}
.modal input[type=password],.modal input[type=text]{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px;margin-bottom:12px}
.modal .row{display:flex;gap:8px;justify-content:flex-end}
.modal .btn{color:var(--brand-d);background:var(--brand-l);border-color:var(--brand-l)}
.modal .btn.solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.modal .err{color:var(--danger);font-size:13px;margin:-6px 0 10px}

/* ===== event list (index) ===== */
.list-wrap{max-width:880px;margin:30px auto;padding:0 16px}
.list-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#fff}
.list-head h1{font-size:22px;margin:0;flex:1}
.ev-card{background:#fff;border-radius:12px;padding:16px 18px;margin-bottom:12px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 8px rgba(0,0,0,.18);text-decoration:none;color:var(--ink)}
.ev-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.28)}
.ev-card .info{flex:1}
.ev-card .info .t{font-weight:700;font-size:16px}
.ev-card .info .m{font-size:13px;color:var(--muted)}
.ev-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.ev-status.published{background:#dff5e6;color:#1f7a43}
.ev-status.draft{background:#f0f0f0;color:#777}
.empty{color:#fff;text-align:center;opacity:.85;margin-top:40px}

/* ===== print: each sheet = 1 A4 page ===== */
@page{size:A4;margin:0}
@media print{
  body{background:#fff}
  .toolbar,.edit-hint,.modal-bg{display:none !important}
  .doc{padding:0;gap:0}
  .sheet{box-shadow:none;border-radius:0;margin:0;break-after:page}
  .sheet:last-child{break-after:auto}
  [contenteditable]{outline:none !important;background:none !important}
  .doc[data-editing] img{outline:none !important}
  table,figure,.org,.contacts,.note,.gantt{break-inside:avoid}
  .gantt{overflow:visible}.gantt .inner{min-width:0 !important}
  .tbl-wrap{overflow:visible}
}

@media(max-width:680px){
  .grid2,.grid3,.contacts{grid-template-columns:1fr}
  .toolbar .ttl{max-width:40vw}
}