/* ================================
   Tategaki Writer - app.css （フル置換）
   ================================ */

#tw-root{font-family:system-ui,"Noto Sans JP",Meiryo,sans-serif;position:relative}

/* --- バッジ --- */
.tw-watermark{position:fixed;left:8px;top:8px;z-index:999999;background:#222;color:#fff;padding:2px 6px;border-radius:6px;font-size:12px;opacity:.9}

/* --- 上部アクション／カウンタ --- */
.tw-actions{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.tw-counts{margin-left:auto}

/* ================================
   ツールバー（サイズ統一／色チップ）
   ================================ */
#tw-root .tw-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:10px 0}
#tw-root .tw-toolbar .tw-toolwrap{display:inline-flex;align-items:center;gap:6px}

/* ボタン：最小寄りの余白＆高さ統一 */
#tw-root .tw-btn{
  border:1px solid #ccc;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:28px;              /* ← ボタン基準高さ */
  padding:2px 6px;          /* 0ではない最小寄り */
  line-height:1.1;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;       /* ラベル改行しない */
  box-sizing:border-box;
}

/* プルダウン・テキスト/数値入力もボタンと同じ背丈に */
#tw-root .tw-toolbar select,
#tw-root .tw-toolbar input[type="number"],
#tw-root .tw-toolbar input[type="text"]{
  height:28px;
  line-height:28px;
  padding:0 6px;
  font-size:13px;
  vertical-align:middle;
  box-sizing:border-box;
}

/* sup/sub が他より背高くならないように（アイコンでも対応） */
#tw-root .tw-btn sup,
#tw-root .tw-btn sub,
#tw-root .tw-btn .sup-icon,
#tw-root .tw-btn .sub-icon{
  font-size:.6em;
  line-height:1;
  position:relative;
}
#tw-root .tw-btn sup,
#tw-root .tw-btn .sup-icon{ top:-0.4em; }
#tw-root .tw-btn sub,
#tw-root .tw-btn .sub-icon{ top:.2em; }

/* 太字ボタンの見た目も太字 */
#tw-root #tw-bold{ font-weight:700; }

/* 取り消し線ボタンのラベルを視覚化 */
#tw-root #tw-strike .tw-s{
  text-decoration:line-through;
  text-decoration-thickness:from-font;
}

/* 色チップ：文字と重ならないようボタン下にスペース確保 */
#tw-root .tw-chip-btn{ position:relative; padding-bottom:14px; }
#tw-root .tw-chip{
  position:absolute;
  left:6px; right:6px; bottom:4px;
  height:6px; border-radius:4px;
  background:#111; pointer-events:none;
  box-sizing:border-box;
}

/* ================================
   レイアウト／キャンバス
   ================================ */
.tw-body{display:grid;grid-template-columns:220px 1fr 280px;gap:16px;align-items:start}
.tw-left,.tw-right{position:sticky;top:10px;align-self:start;border:1px solid #eee;border-radius:10px;background:#fff;padding:8px;max-height:80vh;overflow:auto}

.tw-left-tabs button,.tw-right-tabs button{border:1px solid #ddd;background:#fff;padding:4px 8px;border-radius:8px;cursor:pointer}
.tw-left-tabs button.is-active,.tw-right-tabs button.is-active{background:#111;color:#fff}
.tw-style-pane{display:none}
.tw-style-pane.is-active{display:block}

.tw-canvas{display:flex;flex-direction:column;gap:16px;min-height:200px;padding:8px 0;--tw-zoom:1}
.tw-page{width:148mm;min-height:210mm;background:#fff;border:1px solid #eee;box-shadow:0 4px 16px rgba(0,0,0,.06);margin:0 auto;padding:14mm;display:flex;transform:scale(var(--tw-zoom));transform-origin:top center}
.tw-page .page-inner{flex:1;outline:none;font-weight:400}
.tw-page.horizontal .page-inner{writing-mode:horizontal-tb}
.tw-page.vertical .page-inner{writing-mode:vertical-rl}

/* 見出し：SWELL等のテーマ装飾をエディタ内では無効化 */
#tw-root .tw-page .page-inner h1,
#tw-root .tw-page .page-inner h2,
#tw-root .tw-page .page-inner h3,
#tw-root .tw-page .page-inner h4,
#tw-root .tw-page .page-inner h5{
  all:unset;               /* テーマの影響を完全リセット */
  display:block;
  font-weight:700;
  margin:.6em 0 .4em;
  line-height:1.25;
  writing-mode:inherit;    /* ページの書字方向に追随 */
}

/* ================================
   モーダル
   ================================ */
.tw-modal{position:fixed;inset:0;display:none;z-index:99999}
.tw-modal.show{display:block}
.tw-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.2);cursor:pointer}
.tw-modal-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;max-width:92vw;background:#fff;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.2);max-height:80vh;overflow:auto}
.tw-modal-head{padding:10px 12px;border-bottom:1px solid #eee;font-weight:600}
.tw-modal-body{padding:12px}
.tw-modal-foot{padding:10px 12px;border-top:1px solid #eee;display:flex;gap:8px;justify-content:flex-end}
.tw-modal-x{float:right;background:transparent;border:none;font-size:18px;cursor:pointer}

/* ================================
   画像一覧グリッド（挿入モーダル）
   ================================ */
.tw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.tw-grid .cell{border:1px solid #eee;border-radius:8px;padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tw-grid .cell img{max-width:100%;max-height:100px;display:block}

/* ================================
   表ピッカー（直感式）
   ensureTablePicker() と連動
   ================================ */
#tw-root .tw-table-size{ font-size:12px; color:#666; margin-top:8px; margin-bottom:4px; }
#tw-root .tw-table-picker{
  display:grid;
  grid-template-columns:repeat(12,16px);
  gap:2px;
  user-select:none;
}
#tw-root .tw-table-picker b{
  display:block;
  width:16px;
  height:16px;
  border:1px solid #ddd;
  background:#fafafa;
  box-sizing:border-box;
}
#tw-root .tw-table-picker b.is-on{
  background:#cfe8ff;
  border-color:#5aa0ff;
}
#tw-root .tw-table-dir{ margin-top:10px; font-size:12px; }

/* ================================
   表（エディタ内）
   収まり優先／はみ出し防止／折返し強化
   writing-mode は JS 挿入時に付与
   ================================ */
#tw-root .page-inner table{
  max-width:100%;
  width:100%;
  table-layout:fixed;        /* セル幅を均等割りに */
  border-collapse:collapse;
  box-sizing:border-box;
  overflow:hidden;           /* 親をはみ出さない */
}
#tw-root .page-inner table td,
#tw-root .page-inner table th{
  border:1px solid #ccc;
  padding:4px 6px;
  word-break:break-word;
  overflow-wrap:anywhere;
  vertical-align:top;
  box-sizing:border-box;
}
#tw-root{ margin-top:5px; } /* 追加 */

/* 上側余白 5px */
#tw-root { margin-top:5px; }

/* 表のはみ出し防止（縦書きでも効くよう inline-size 系を使用） */
#tw-root .page-inner table{
  max-inline-size:100%;
  inline-size:100%;
  table-layout:fixed;
  border-collapse:collapse;
  overflow:hidden;
  display:block;
  box-sizing:border-box;
}
#tw-root .page-inner table td,
#tw-root .page-inner table th{
  border:1px solid #ccc;
  padding:4px 6px;
  word-break:break-word;
  overflow-wrap:anywhere;
  vertical-align:top;
}
#tw-root .page-inner table img,
#tw-root .page-inner table svg{
  max-width:100%;
  height:auto;
  display:block;
}