/* エディタUI専用CSS。プレビュー内容（SLテーマ）のスタイルは一切持たない
   — テーマは sl-theme.js の文字列としてのみ保持し、iframe内とエクスポートHTMLでだけ実体化する */
:root{
  --ink:#3b2a1f;
  --bar:#3b2a1f;
  --bar-text:#fbf3e7;
  --ui-bg:#efe9dd;
  --pane-bg:#fffdf8;
  --line:#d8c9b0;
  --accent:#a04c2a;
  --sub:#8a7a68;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:-apple-system,"system-ui","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  background:var(--ui-bg); color:var(--ink);
}

/* ---- トップバー ---- */
.topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; background:var(--bar); color:var(--bar-text);
}
.brand{font-weight:700; font-size:15px; letter-spacing:.04em; white-space:nowrap;}
.stats{font-size:12px; opacity:.85; white-space:nowrap;}
.spacer{flex:1;}
.btn{
  min-height:36px; padding:6px 14px; border-radius:8px; font-size:13px; cursor:pointer;
  border:1px solid rgba(251,243,231,.4); background:transparent; color:var(--bar-text);
  display:inline-flex; align-items:center; gap:6px; font-family:inherit;
}
.btn:hover{background:rgba(251,243,231,.12);}
.btn-primary{background:var(--accent); border-color:var(--accent);}
.btn-primary:hover{background:#8d4225;}
.btn-icon{padding:6px 10px;}
.btn-dark{background:var(--bar); color:var(--bar-text); border-color:var(--bar); align-self:flex-end;}
.avatar-group{display:inline-flex; gap:4px;}
#avatarThumb{width:22px; height:22px; border-radius:50%; object-fit:cover;}
.doc-current{
  background:none; border:0; color:var(--bar-text); font-weight:700; font-size:13px;
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer; font-family:inherit; min-height:36px; padding:6px 4px;
}
.doc-current:hover{text-decoration:underline; text-underline-offset:3px;}
.seg{display:inline-flex; border:1px solid rgba(251,243,231,.4); border-radius:8px; overflow:hidden;}
.seg-btn{
  min-height:36px; padding:6px 12px; border:0; font-size:13px; cursor:pointer;
  background:transparent; color:var(--bar-text); font-family:inherit;
}
.seg-btn.is-active{background:rgba(251,243,231,.22); font-weight:700;}

/* ---- タブ（モバイルのみ表示） ---- */
.tabs{display:none;}

/* ---- サイドバー（ドキュメント一覧） ---- */
.main{flex:1; min-height:0; display:flex; position:relative;}
.sidebar{
  width:232px; flex:none; min-height:0;
  background:#f6efe2; border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:12px 12px 8px;}
.sidebar-title{font-size:12px; font-weight:700; color:var(--sub); letter-spacing:.06em;}
.sbtn{
  min-height:32px; padding:4px 12px; border:1px solid var(--accent); border-radius:8px;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.sbtn:hover{background:#8d4225;}
.doc-list{flex:1; overflow-y:auto; margin:0; padding:4px 8px 12px; list-style:none;}
.doc-item{display:flex; align-items:center; border-radius:8px; margin-bottom:2px;}
.doc-item:hover{background:#efe5d0;}
.doc-item.is-active{background:#eadec5;}
.doc-item-main{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left;
  background:none; border:0; padding:8px 6px 8px 10px; cursor:pointer;
  font-family:inherit; color:var(--ink);
}
.doc-item-name{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.doc-item-date{font-size:11px; color:var(--sub);}
.doc-item-actions{display:flex; visibility:hidden; padding-right:4px;}
.doc-item:hover .doc-item-actions,
.doc-item.is-active .doc-item-actions{visibility:visible;}
.doc-act{background:none; border:0; cursor:pointer; font-size:13px; color:var(--sub); padding:6px 5px; border-radius:6px;}
.doc-act:hover{color:var(--accent); background:rgba(160,76,42,.1);}
.sidebar-note{margin:0; padding:8px 12px 12px; font-size:10.5px; color:var(--sub); border-top:1px solid var(--line);}
.sidebar-dim{position:fixed; inset:0; background:rgba(40,25,15,.4); z-index:55;}
.sidebar-dim[hidden]{display:none;}
@media (min-width:901px){
  .main.sidebar-collapsed .sidebar{display:none;}
}

/* ---- 2ペイン＋サブヘッドパネル（プレビューの左隣に密着。実機SLページのPC目次と同じ並び） ---- */
.panes{flex:1; min-width:0; min-height:0; display:grid; grid-template-columns:1fr 1fr;}
.toc-panel{
  width:260px; min-height:0; flex:none;
  background:#f6efe2; border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.toc-panel[hidden]{display:none;}
.toc-panel-head{padding:12px 14px 8px; font-size:12px; font-weight:700; color:var(--sub); letter-spacing:.06em;}
.toc-panel-list{flex:1; overflow-y:auto; margin:0; padding:0 8px 16px; list-style:none;}
.toc-panel-item{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:12px; line-height:1.55; color:var(--ink);
  padding:7px 8px; border-radius:6px; margin-bottom:1px;
}
.toc-panel-item:hover{background:#efe5d0;}
.toc-panel-item.is-current{background:#eadec5; font-weight:700;}
.toc-panel-no{color:var(--sub); font-size:11px; margin-right:2px;}
.pane{min-width:0; min-height:0; display:flex;}
.pane-edit{background:var(--pane-bg); border-right:1px solid var(--line);}
#editor{
  flex:1; width:100%; border:0; outline:none; resize:none; background:transparent;
  color:var(--ink); padding:20px 22px 48px;
  font-family:inherit; font-size:14.5px; line-height:1.9;
}
#editor::placeholder{color:var(--sub); opacity:.7;}
.pane-preview{background:#e7dcc7; justify-content:center; overflow:hidden;}
#preview{border:0; height:100%; width:100%; background:#fbf3e7;}
.panes[data-width="393"] #preview{
  width:393px; max-width:100%;
  box-shadow:0 0 0 1px var(--line), 0 8px 30px rgba(120,80,40,.18);
}

/* ---- トースト・モーダル ---- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--bar); color:var(--bar-text);
  padding:10px 18px; border-radius:10px; font-size:13px; z-index:99;
  box-shadow:0 6px 24px rgba(0,0,0,.25); max-width:90vw;
}
.modal{
  position:fixed; inset:0; background:rgba(40,25,15,.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
/* display指定が hidden 属性（UAのdisplay:none）に勝ってしまうのを防ぐ */
.modal[hidden],.toast[hidden]{display:none;}
.modal-box{
  background:var(--pane-bg); border-radius:12px; padding:18px;
  max-width:640px; width:100%; display:flex; flex-direction:column; gap:12px;
}
.modal-narrow{max-width:380px;}
/* 記法一覧: SLテーマCSSを当てたiframeで実例を描画する（正本が変われば一覧も追従） */
.modal-cheat{max-width:680px; height:min(86vh, 920px);}
.modal-cheat iframe{flex:1; width:100%; border:1px solid var(--line); border-radius:8px; background:#fbf3e7;}
.modal-cheat .btn{align-self:flex-end;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end;}
.btn-danger{background:#c0392b; border-color:#c0392b;}
#nameModalInput{
  width:100%; min-height:40px; padding:8px 10px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:8px; color:var(--ink);
}
.modal-title{margin:0; font-size:13px;}
#copyModalText{
  width:100%; height:220px; font-size:12px; font-family:Menlo,Consolas,monospace;
  border:1px solid var(--line); border-radius:8px; padding:10px;
}

/* ---- レスポンシブ（03_website/README.md 規約: 393px基準・タップ44px） ---- */
@media (max-width:900px){
  .tabs{display:flex; background:var(--pane-bg); border-bottom:1px solid var(--line);}
  .tab-btn{
    flex:1; min-height:44px; border:0; background:transparent; cursor:pointer;
    font-family:inherit; font-size:14px; font-weight:700; color:var(--sub);
    border-bottom:3px solid transparent;
  }
  .tab-btn.is-active{color:var(--accent); border-bottom-color:var(--accent);}
  /* タブ切替は visibility で行う（display:none だと iframe のスクロール位置が飛ぶ環境がある） */
  .panes{display:block; position:relative;}
  .pane{position:absolute; inset:0;}
  .panes[data-tab="edit"] .pane-preview{visibility:hidden; pointer-events:none;}
  .panes[data-tab="preview"] .pane-edit{visibility:hidden; pointer-events:none;}
  .pane-edit{border-right:0;}
  .seg{display:none;} /* 実機幅がそのままプレビュー幅になるため切替不要 */
  .panes[data-width="393"] #preview{width:100%; box-shadow:none;}
  .toc-panel{display:none;} /* モバイルはプレビュー内のインライン目次（実機と同じ見え方）を使う */
  .btn{min-height:44px;}
  /* サイドバーはオフキャンバス化（☰で開閉・背景タップで閉じる） */
  .sidebar{
    position:fixed; top:0; bottom:0; left:0; z-index:60; width:268px;
    transform:translateX(-105%); transition:transform .2s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.18);
  }
  .sidebar.is-open{transform:translateX(0);}
  .sbtn{min-height:44px;}
  .doc-act{padding:10px 8px; font-size:15px;}
  .doc-item-main{padding:10px 6px 10px 12px;}
  .doc-current{max-width:130px;}
}
@media (max-width:600px){
  .topbar{gap:8px; padding:8px 10px;}
  .brand{font-size:14px;}
  .btn{padding:6px 10px; font-size:12px;}
  #docSelect{max-width:130px;}
}
@media (max-width:400px){
  .stats{display:none;}
}