@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans JP',sans-serif;background:#e8e8e8;font-size:13px;color:#333;height:100vh;overflow:hidden}

/* Layout */
.top-bar{background:#333;color:#fff;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;height:40px;flex-shrink:0}
.top-bar h1{font-size:14px;font-weight:500}
.top-bar .info{font-size:10px;color:#aaa}
.main{display:flex;height:calc(100vh - 40px);position:relative;overflow:hidden}

/* Guide button */
.btn-guide{background:#e65100}
.btn-guide:hover{background:#f57c00}
.btn-guide.active{background:#333}
.btn.active{background:#333!important}

/* Save button */
.btn-save-main{background:#2e7d32}
.btn-save-main:hover{background:#388e3c}

/* Outline small button */
.btn.btn-outline-sm{background:#fff;color:#333;border:1px solid #aaa;font-size:9px;padding:3px 8px}
.btn.btn-outline-sm:hover{background:#eee;color:#333}

/* Dev menu */
.dev-menu-item{display:block;width:100%;padding:8px 14px;background:none;border:none;border-bottom:1px solid #eee;font-size:11px;font-family:inherit;color:#333;text-align:left;cursor:pointer;white-space:nowrap}
.dev-menu-item:last-child{border-bottom:none}
.dev-menu-item:hover{background:#f5f5f5}

/* Guide */
.guide-item{flex:1;display:flex;gap:8px;align-items:flex-start;padding:8px 10px;background:#fafaf8;border-radius:4px;border:1px solid #e8e6e0}
.guide-icon{font-size:18px;line-height:1;flex-shrink:0;margin-top:1px}
.guide-item strong{font-size:11px;font-weight:700;color:#333;display:block;margin-bottom:2px}
.guide-item p{font-size:10px;color:#666;line-height:1.55;margin:0}
.panel{overflow-y:auto;padding:16px}
.panel-left{flex:0 0 50%;border-right:3px solid #333;background:#f5f5f5}
.panel-right{flex:0 0 50%;background:#f5f5f5}
.panel-label{position:sticky;top:0;z-index:10;background:#555;color:#fff;padding:6px 12px;font-size:11px;font-weight:500;margin:-16px -16px 12px;display:flex;justify-content:space-between;align-items:center}
.resize-handle{width:3px;background:#333;cursor:col-resize;flex-shrink:0;position:relative}
.resize-handle:hover{background:#666}

/* ===== CHECKLIST STYLES ===== */
.tabs{display:flex;gap:0;margin-bottom:0;border-bottom:2px solid #333}
.tab{padding:8px 16px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid #ddd;border-bottom:none;border-radius:6px 6px 0 0;background:#e8e8e8;color:#777;position:relative;bottom:-2px;display:flex;align-items:center;gap:4px}
.tab:hover{background:#f0f0f0}
.tab.active{background:#fff;color:#333;border-color:#333;border-bottom:2px solid #fff;z-index:1}
.tab .badge{font-size:9px;background:#ccc;color:#fff;padding:1px 5px;border-radius:8px}
.tab.active .badge{background:#333}
.tab[data-tab="text"].active{border-top:3px solid #e6c200}
.tab[data-tab="image"].active{border-top:3px solid #4a90d9}
.tab[data-tab="video"].active{border-top:3px solid #4caf50}
.tab[data-tab="fixed"].active{border-top:3px solid #999}
.tab-icon{width:10px;height:10px;border-radius:2px;display:inline-block}
.tab-content{display:none;background:#fff;border:1px solid #333;border-top:none;padding:0}
.tab-content.active{display:block}
.toolbar{padding:8px 12px;background:#fafafa;border-bottom:1px solid #eee;display:flex;gap:6px;align-items:center}
.btn{padding:5px 12px;color:#fff;border:none;border-radius:3px;font-size:10px;cursor:pointer;font-family:inherit}
.cl-table{width:100%;border-collapse:collapse;table-layout:fixed}
.cl-table th{background:#333;color:#fff;font-size:10px;font-weight:500;padding:6px 8px;text-align:left;position:sticky;top:0;z-index:1}
.cl-table th:nth-child(1){width:10%}
.cl-table th:nth-child(2){width:14%}
.cl-table th:nth-child(3){width:26%}
.cl-table th:nth-child(4){width:44%}
.cl-table th:nth-child(5){text-align:center;width:36px}
.cl-table td{padding:5px 8px;border-bottom:1px solid #e0e0e0;font-size:11px;vertical-align:middle}
.cl-table td:nth-child(5){text-align:center;background:#fafafa}
.cat{background:#d0cec9;font-weight:700;font-size:11px}
.cat td{padding:6px 8px;border-bottom:2px solid #b0aea9}
.text-row td:nth-child(1),.text-row td:nth-child(2),.text-row td:nth-child(3){background:#fff8e1}
.image-row td:nth-child(1),.image-row td:nth-child(2),.image-row td:nth-child(3){background:#ddeeff}
.video-row td:nth-child(1),.video-row td:nth-child(2),.video-row td:nth-child(3){background:#e8f5e9}
.fixed-row td:nth-child(1),.fixed-row td:nth-child(2),.fixed-row td:nth-child(3){background:#f0f0f0}
.ten{color:#e65100;font-style:italic}
.cl-table input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:#333}
.cl-table input[type="text"]{width:100%;border:1px solid #ddd;border-radius:3px;padding:3px 5px;font-size:10px;font-family:inherit;background:#fff}
.cl-table input[type="text"]:focus{outline:none;border-color:#999;background:#fffff0}
.cl-table tr:has(input[type="checkbox"]:checked) td:nth-child(1),
.cl-table tr:has(input[type="checkbox"]:checked) td:nth-child(2),
.cl-table tr:has(input[type="checkbox"]:checked) td:nth-child(3){text-decoration:line-through;color:#aaa}
.cl-table tr:has(input[type="checkbox"]:checked) td:nth-child(4){opacity:1;text-decoration:none}
.cl-table tr:has(input[type="checkbox"]:checked) td:nth-child(5){opacity:1;text-decoration:none}
.progress{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#f9f9f7;border-bottom:1px solid #eee;font-size:10px;color:#777}
.progress-bar{flex:0 0 150px;height:5px;background:#eee;border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:#333;border-radius:3px;transition:width 0.3s}
.pc{color:#1565C0;font-size:9px;background:#e3f2fd;padding:1px 4px;border-radius:3px}
.pd{color:#BF360C;font-size:9px;background:#fbe9e7;padding:1px 4px;border-radius:3px}
.pa{color:#666;font-size:9px}

/* ===== DRAFT STYLES ===== */
.toc-inline a:hover{color:#0969DA}
.page-header{background:#333;color:#fff;padding:10px 14px;border-radius:6px 6px 0 0;margin-top:24px;font-size:14px;font-weight:500;scroll-margin-top:60px}
.page-header small{display:none}
.page-header{cursor:pointer}
.page-header:hover{background:#444}
.page-toggle-arrow{font-size:10px;color:#aaa;float:right;transition:transform 0.2s}
.page-header.collapsed .page-toggle-arrow{transform:rotate(-90deg)}
.page-header.collapsed{border-radius:6px}
.page-body.collapsed{display:none}
.page-count{font-size:10px;color:#aaa;background:rgba(255,255,255,0.1);padding:2px 7px;border-radius:8px;margin-left:8px;font-weight:400}
.page-body{background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 6px 6px;padding:16px 20px;margin-bottom:8px}
.sec{font-size:13px;font-weight:700;margin:16px 0 6px;padding:5px 0;border-bottom:1px solid #eee;color:#333}
.lab{font-size:10px;color:#888;margin:10px 0 3px}
.draft-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px}
.draft-check-wrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px}
.draft-check{width:16px;height:16px;cursor:pointer;accent-color:#CC0000}
.check-label{font-size:8px;color:#ccc;white-space:nowrap;transition:all 0.2s}
.draft-check:checked+.check-label{color:#CC0000;font-weight:500}
.draft-text{font-size:12px;line-height:1.7;flex:1;white-space:pre-wrap;transition:all 0.2s}
.draft-text.struck{text-decoration:line-through;color:#aaa}
textarea{width:100%;min-height:50px;border:1px solid #ddd;border-radius:4px;padding:6px 8px;font-size:12px;font-family:inherit;line-height:1.5;resize:vertical;background:#fffff8;margin-bottom:12px}
textarea:focus{outline:none;border-color:#999;background:#fffff0}
textarea::placeholder{color:#ccc}
.note{font-size:10px;color:#CC0000;margin:3px 0 6px}
.divider{border:none;border-top:1px solid #ddd;margin:12px 0}
.dr-table{width:100%;border-collapse:collapse;margin:6px 0}
.dr-table th{background:#f0f0ef;font-size:11px;font-weight:500;padding:5px 8px;text-align:left;border:1px solid #ccc;width:100px}
.dr-table td{font-size:11px;padding:5px 8px;border:1px solid #ccc}
.tbl-edit{margin-top:4px}

.wf-links{display:inline;margin-left:12px}
.wf-link{font-size:11px;font-weight:500;color:#fff;text-decoration:none;background:#1565c0;padding:4px 12px;border-radius:3px;margin-left:4px}
.wf-link:hover{background:#1976d2;color:#fff}
@media print{.top-bar,.toolbar,.btn,.resize-handle{display:none}.main{display:block;height:auto}.panel{overflow:visible}}

/* ===== WF MODAL ===== */
#wf-modal {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  box-shadow: 0 0 32px rgba(0,0,0,0.35);
}
#wf-modal.active { display: flex; }
#wf-modal-bar {
  height: 38px;
  background: #1b5e20;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  gap: 8px;
}
#wf-modal-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
#wf-modal-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
#wf-modal-controls button {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  padding: 3px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  transition: background 0.15s;
}
#wf-modal-controls button:hover { background: rgba(255,255,255,0.3); }
#wf-modal-controls button.active { background: rgba(255,255,255,0.45); outline: 1px solid rgba(255,255,255,0.6); }
#wf-modal-close { font-size: 12px !important; padding: 3px 10px !important; margin-left: 4px; background: rgba(198,40,40,0.5) !important; }
#wf-guide-btn { font-size: 11px !important; background: #e65100 !important; margin-right: 8px; }
#wf-guide-btn:hover { background: #f57c00 !important; }
#wf-guide-btn.active { background: rgba(255,255,255,0.25) !important; }
#wf-modal-close:hover { background: rgba(198,40,40,0.85) !important; }
#wf-iframe {
  flex: 1;
  border: none;
  width: 100%;
  background: #f0eeeb;
}