/* assets/app.css */
/* ====== WPテーマのCSS影響を抑制 ====== */
.tw-scope, .tw-scope * { box-sizing: border-box; }
.tw-scope * { font-family: inherit; color: inherit; }
.tw-scope img { max-width: 100%; height: auto; }

/* ====== エディタ基調 ====== */
@font-face { font-family: 'NotoSerifJP'; src: local('Noto Serif JP'), local('NotoSerifJP'); font-display: swap; }
@font-face { font-family: 'NotoSansJP';  src: local('Noto Sans JP'),  local('NotoSansJP');  font-display: swap; }

:root {
  --paper-w: 148mm; /* A5相当 */
  --paper-h: 210mm;
  --paper-pad: 14mm;
}

.tw-root {font-family: NotoSerifJP, serif; color:#111;}
.tw-topbar {position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; z-index:10;}
.tw-brand {font-weight:700;}
.tw-actions {display:flex; gap:8px; align-items:center;}
.tw-btn {padding:6px 10px; border:1px solid #ddd; border-radius:8px; background:#fafafa; cursor:pointer;}
.tw-btn.mini{padding:4px 8px; font-size:12px;}
.tw-title {min-width:220px; padding:6px 10px; border:1px solid #ddd; border-radius:8px;}
.tw-body {display:grid; grid-template-columns: 240px 1fr 320px; gap:12px; padding:12px;}
.tw-left, .tw-right {position:sticky; top:56px; height: calc(100vh - 72px); overflow:auto;}
.tw-toolbar {display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px; border:1px solid #eee; border-radius:10px; background:#fff; position:sticky; top:0; z-index:5;}
.tw-canvas {padding:16px; display:flex; flex-direction:column; align-items:center; gap:16px; min-height: 200px;}
.tw-page {
  width: var(--paper-w);
  height: var(--paper-h);
  background:#fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  position:relative;
  padding: var(--paper-pad);
  display:flex;
  overflow:hidden;
}
.tw-page .page-inner {
  flex:1;
  outline:none;
  writing-mode: vertical-rl;
  overflow:auto;
  letter-spacing: .03em;
}
.tw-page.horizontal .page-inner { writing-mode: horizontal-tb; }
.tw-page .guides::before, .tw-page .guides::after {
  content:"";
  position:absolute;
  border:2px solid transparent;
}
.tw-page .guides.l::before {
  left:8px; top:8px; width:24px; height:24px; border-left-color:#c2c2c2; border-top-color:#c2c2c2;
}
.tw-page .guides.r::after {
  right:8px; bottom:8px; width:24px; height:24px; border-right-color:#c2c2c2; border-bottom-color:#c2c2c2;
}
.tw-grid.vert {
  background-image: repeating-linear-gradient( to left, rgba(0,0,0,.08) 0 1px, transparent 1px 24px);
}
.tw-grid.mesh {
  background-image:
    repeating-linear-gradient( to left, rgba(0,0,0,.08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient( to bottom, rgba(0,0,0,.08) 0 1px, transparent 1px 24px);
}
.tw-page .header, .tw-page .footer {
  position:absolute; left: var(--paper-pad); right: var(--paper-pad); font-size:10px; color:#555;
}
.tw-page .header { top:6mm; text-align:center; writing-mode: horizontal-tb;}
.tw-page .footer { bottom:6mm; text-align:center; writing-mode: horizontal-tb;}
.tw-page .page-inner h1, .tw-page .page-inner h2, .tw-page .page-inner h3, .tw-page .page-inner h4, .tw-page .page-inner h5 { font-weight:700; margin: 0 0 .5em 0; }
.tw-page .page-inner h1 + * { margin-block-start: .5em; }
.tw-pane {border:1px solid #eee; border-radius:10px; background:#fff;}
.tw-pane-tabs {display:flex; gap:4px; border-bottom:1px solid #eee; padding:6px;}
.tw-pane-tabs button {border:none; background:transparent; padding:6px 8px; border-bottom:2px solid transparent; cursor:pointer;}
.tw-pane-tabs button.active {border-bottom-color:#333;}
.tw-style-panel {border:1px solid #eee; border-radius:10px; background:#fff; padding:8px;}
.tw-style-tabs {display:flex; gap:6px; border-bottom:1px solid #eee; margin-bottom:8px;}
.tw-style-tabs button {border:none; background:transparent; padding:6px 8px; border-bottom:2px solid transparent; cursor:pointer;}
.tw-style-tabs button.active {border-bottom-color:#333;}
.tw-style-content .tab {display:block;}
.tw-style-content .tab:not(.active){display:none;}
.tw-el-item{padding:4px 6px; border-bottom:1px dashed #eee; cursor:pointer;}
.tw-img-free { position:absolute; cursor:move; }

/* 直感的な表グリッド */
.tw-table-grid { display:grid; grid-template-columns: repeat(10, 16px); gap:2px; margin-top:8px; }
.tw-table-grid div { width:16px; height:16px; border:1px solid #ddd; cursor:pointer; }
.tw-table-grid div.active { background:#cde4ff; }

/* 縦書き対応のカスタムリストマーカー */
.tw-list { counter-reset: tw-li; padding:0; margin:0 0 0 1em; }
.tw-list li { list-style: none; position: relative; writing-mode: vertical-rl; }
.tw-list[data-type="disc"] li::before {
  content: "•";
  position: relative;
  margin-inline-start: .5em;
}
.tw-list[data-type="decimal"] li::before {
  counter-increment: tw-li;
  content: counter(tw-li) " ";
}
.tw-list[data-type="lower-alpha"] li::before { counter-increment: tw-li; content: counter(tw-li, lower-alpha) " "; }
.tw-list[data-type="upper-alpha"] li::before { counter-increment: tw-li; content: counter(tw-li, upper-alpha) " "; }
.tw-list[data-type="upper-roman"] li::before { counter-increment: tw-li; content: counter(tw-li, upper-roman) " "; }

/* 見開き時レスポンシブ */
@media (max-width: 1200px) {
  .tw-body {grid-template-columns: 1fr;}
  .tw-left, .tw-right {display:none;}
}

/* enforce visibility */
.tw-root{display:block !important;}
.tw-body{display:grid !important;}

/* Scope headings to avoid theme interference */
.tw-scope .page-inner h1,
.tw-scope .page-inner h2,
.tw-scope .page-inner h3,
.tw-scope .page-inner h4,
.tw-scope .page-inner h5 { all: unset; display:block; font-weight:700; margin:0 0 .5em 0; }
.tw-scope .page-inner h1 { font-size: 1.6em; }
.tw-scope .page-inner h2 { font-size: 1.4em; }
.tw-scope .page-inner h3 { font-size: 1.25em; }
.tw-scope .page-inner h4 { font-size: 1.15em; }
.tw-scope .page-inner h5 { font-size: 1.05em; }

/* Modal */
.tw-modal { position:fixed; inset:0; display:none; z-index:1000; }
.tw-modal.show { display:block; }
.tw-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.tw-modal-dialog { position:relative; width:420px; max-width:90vw; background:#fff; border-radius:12px; margin:10vh auto; padding:12px; box-shadow:0 8px 32px rgba(0,0,0,.25); }
.tw-modal-head { font-weight:700; margin-bottom:8px; }
.tw-modal-body { display:flex; flex-direction:column; gap:12px; }
.tw-modal-body input[type="text"] { width:120px; }
.tw-modal-foot { text-align:right; margin-top:6px; }

/* Tabs visibility controlled by .active */
.tw-pane-content .tab { display: none; }
.tw-pane-content .tab.active { display: block; }
.tw-style-content > .tab { display: none; }
.tw-style-content > .tab.active { display: block; }

/* Ensure main containers are visible even if theme applies display:none */
.tw-root, .tw-body, .tw-main { display: block !important; }
.tw-body { display: grid !important; }