/* ============================================================
   管理画面スタイル（統一UI）
   ============================================================ */
:root{
  --adm-accent:#2563eb;
  --adm-bg:#f1f5f9;
  --adm-panel:#fff;
  --adm-border:#e2e8f0;
  --adm-text:#1e293b;
  --adm-muted:#64748b;
  --adm-danger:#dc2626;
}
*{box-sizing:border-box;}
body{margin:0;font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;background:var(--adm-bg);color:var(--adm-text);line-height:1.6;}
a{color:var(--adm-accent);}

/* トップバー */
.adm-top{display:flex;align-items:center;gap:1rem;background:#0f172a;color:#fff;padding:0 1.2rem;height:56px;position:sticky;top:0;z-index:80;}
.adm-brand{font-weight:700;}
.adm-spacer{flex:1;}
.adm-top a{color:#cbd5e1;text-decoration:none;font-size:.9rem;}
.adm-top a:hover{color:#fff;}
.adm-logout{margin-left:1rem;}
.adm-burger{display:none;background:none;border:0;width:36px;height:36px;flex-direction:column;justify-content:center;gap:4px;cursor:pointer;}
.adm-burger span{display:block;height:2px;background:#fff;border-radius:2px;}

/* 本体レイアウト */
.adm-body{display:flex;min-height:calc(100vh - 56px);}
.adm-side{width:220px;background:#fff;border-right:1px solid var(--adm-border);flex-shrink:0;}
.adm-side ul{list-style:none;margin:0;padding:.8rem;}
.adm-side a{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:8px;color:var(--adm-text);text-decoration:none;font-size:.95rem;margin-bottom:.15rem;}
.adm-side a:hover{background:var(--adm-bg);}
.adm-side a.is-active{background:var(--adm-accent);color:#fff;}
/* グループ見出し（クリック不可の小見出し） */
.adm-side-head{margin:1rem 0 .3rem;padding:.4rem .8rem;background:var(--adm-bg);border-radius:6px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--adm-muted);text-transform:none;}
.adm-side-head:first-child{margin-top:0;}
/* アイコン */
.adm-ico{width:18px;height:18px;flex-shrink:0;opacity:.8;}
.adm-side a:hover .adm-ico{opacity:1;}
.adm-side a.is-active .adm-ico{opacity:1;}
.adm-side-label{flex:1;min-width:0;}
.adm-main{flex:1;padding:2rem;max-width:880px;}

/* 見出し */
.adm-h1{font-size:1.5rem;margin:0 0 1.2rem;}
.adm-h2{font-size:1.15rem;margin:0 0 .4rem;}
.adm-note{color:var(--adm-muted);font-size:.9rem;margin:.2rem 0 1rem;}
.adm-welcome{color:var(--adm-muted);}
.adm-section{background:var(--adm-panel);border:1px solid var(--adm-border);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;}
.adm-empty{color:var(--adm-muted);background:#fff;border:1px dashed var(--adm-border);padding:1.2rem;border-radius:10px;}

/* カード */
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem;}
.adm-card{background:#fff;border:1px solid var(--adm-border);border-radius:12px;padding:1.2rem;text-decoration:none;color:var(--adm-text);display:flex;flex-direction:column;gap:.3rem;transition:box-shadow .15s;}
.adm-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);}
.adm-card-label{font-size:.8rem;color:var(--adm-muted);}
.adm-card-value{font-size:1.25rem;}
.adm-card-act{font-size:.85rem;color:var(--adm-accent);margin-top:.4rem;}

/* ページ一覧 */
.adm-pagelist{list-style:none;margin:0;padding:0;}
.adm-pagelist li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid var(--adm-border);border-radius:10px;margin-bottom:.6rem;background:#fff;}
.pg-edit{display:flex;flex-direction:column;text-decoration:none;flex:1;}
.pg-title{font-weight:600;color:var(--adm-text);}
.pg-slug{font-size:.8rem;color:var(--adm-muted);}
.pg-actions{display:flex;gap:.4rem;align-items:center;}

/* ボタン */
.adm-btn{display:inline-block;border:1px solid var(--adm-border);background:#fff;color:var(--adm-text);padding:.55rem 1rem;border-radius:8px;font-size:.9rem;cursor:pointer;text-decoration:none;line-height:1.2;}
.adm-btn:hover{background:var(--adm-bg);}
.adm-btn.primary{background:var(--adm-accent);border-color:var(--adm-accent);color:#fff;}
.adm-btn.primary:hover{filter:brightness(1.05);}
.adm-btn.danger{color:var(--adm-danger);border-color:#fecaca;}
.adm-btn.danger:hover{background:#fef2f2;}
.adm-btn.ghost{background:transparent;}
/* soft＝淡い青の"操作系"ボタン（トグル・＋追加など。塗りの「保存」より一段軽く、透明ghostより目立つ中間） */
.adm-btn.soft{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.4);color:var(--adm-accent);}
.adm-btn.soft:hover{background:rgba(37,99,235,.15);border-color:rgba(37,99,235,.55);}
.adm-btn.sm{padding:.35rem .6rem;font-size:.8rem;}
.adm-btn.block{width:100%;}
.adm-btn:disabled{opacity:.4;cursor:default;}

/* フォーム */
.adm-form ::placeholder,.adm-inline-form ::placeholder,.menu-form ::placeholder{color:#c2c8d0;opacity:1;}
.adm-form .fld,.adm-inline-form label{margin-bottom:1rem;display:block;}
.fld-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem;}
.fld-hint{display:block;font-size:.78rem;color:var(--adm-muted);margin-bottom:.4rem;}
.adm-form input[type=text],.adm-form input[type=email],.adm-form input[type=password],.adm-form input[type=number],.adm-form input[type=url],.adm-form textarea,.adm-form select,.adm-inline-form input,.adm-inline-form select{
  width:100%;padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:8px;font-size:.95rem;font-family:inherit;background:#fff;}
/* プルダウンは中身の文字幅に（1行テキスト入力欄と区別しやすくする） */
.adm-form select,.adm-inline-form select{width:auto;max-width:100%;min-width:6rem;}
.adm-form textarea{resize:vertical;}
.fld-check{display:flex;align-items:center;gap:.4rem;}
.fld-check input{width:auto;}
.adm-narrow{max-width:520px;}

/* 画像入力 */
.fld-image{display:flex;flex-direction:column;gap:.5rem;}
.fld-thumb{max-width:180px;max-height:120px;border-radius:8px;border:1px solid var(--adm-border);object-fit:cover;}
.fld-thumb.big{max-width:320px;max-height:200px;}
.fld-current{font-size:.78rem;color:var(--adm-muted);}
.fld-imgdel{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--adm-muted);cursor:pointer;width:fit-content;}
.fld-imgdel input{margin:0;}

/* ブロック編集 */
.adm-back{display:inline-block;margin-bottom:.6rem;font-size:.9rem;text-decoration:none;}
.adm-block{background:#fff;border:1px solid var(--adm-border);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1rem;}
.adm-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--adm-border);}
.adm-block-label{display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;font:inherit;font-weight:700;color:var(--adm-text);padding:.2rem 0;text-align:left;}
/* クリックできる（開閉トグル）のは button の見出しだけ。span の見出しはリンク風にしない */
button.adm-block-label{cursor:pointer;}
button.adm-block-label:hover{color:var(--adm-accent);}
.block-chevron{font-size:.7rem;color:var(--adm-muted);transition:transform .15s;}
.adm-block:not(.is-collapsed) .block-chevron{transform:rotate(90deg);}
/* ラベルはパーツ名＋入力済み見出し文を縦積み（見出し文は折りたたみ時だけ・小さく薄く） */
.adm-block-label-text{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
.adm-block-heading{font-weight:400;font-size:.8rem;color:var(--adm-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch;}
.adm-block:not(.is-collapsed) .adm-block-heading{display:none;} /* 展開時は見出し入力欄が出るので非表示 */
.adm-block-tools{display:flex;gap:.4rem;}
/* パーツの使い方説明 */
/* パーツ説明文＝案内テキスト（背景・枠なし・読めるグレー。ブロック最上部に置く） */
.part-note{color:var(--adm-muted);font-size:.84rem;line-height:1.7;margin:.1rem 0 1.1rem;}
.part-note a{color:var(--adm-accent);}
/* メニュー管理 */
.adm-block.menu-child{margin-left:1.6rem;border-left:3px solid var(--adm-accent);}
.menu-target-badge{font-size:.74rem;color:var(--adm-muted);font-weight:400;margin-left:.5rem;}
.adm-add-card{background:#f1f5f9;}
/* 案内ボックス */
.adm-guide{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:10px;padding:.8rem 1rem;font-size:.88rem;line-height:1.7;margin-bottom:1.2rem;}
.adm-guide a{font-weight:600;}
/* 新しいページを追加（目立つボタン） */
.adm-add-page{margin-top:1rem;}
.adm-add-page .adm-add-btn{display:inline-block;cursor:pointer;list-style:none;background:var(--adm-accent);color:#fff;font-weight:600;padding:.7rem 2rem;border-radius:8px;}
.adm-add-btn::-webkit-details-marker{display:none;}
.adm-add-btn:hover{filter:brightness(1.06);}
.adm-add-page[open] .adm-add-btn{border-radius:8px 8px 0 0;}
.adm-add-page[open]{background:#fff;border:1px solid var(--adm-border);border-radius:10px;}
.adm-add-page .adm-inline-form{padding:1rem;}
/* 見出し・本文（共通）と本体の区切り */
.fld-sep{border:0;border-top:1px dashed var(--adm-border);margin:1.2rem 0;}

/* ▼ 入力フォームの整理（グループ箱・調整項目の階層化・ボタン群） */
/* グループ箱：共通設定／パーツ内容を視覚的に分ける */
.adm-cardgroup{border:1px solid var(--adm-border);border-radius:10px;background:#fbfcff;padding:1rem 1.1rem .3rem;margin-bottom:1.1rem;}
.adm-cardgroup-title{font-size:.8rem;font-weight:700;color:var(--adm-muted);letter-spacing:.03em;margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid var(--adm-border);}
/* セクション設定＝「見出しの文字」ボックス内・入力欄の直下に置くボタン風トグル（details/summary） */
.adm-meta{margin-top:.1rem;}
summary.adm-meta-toggle{list-style:none;display:inline-block;}
summary.adm-meta-toggle::-webkit-details-marker{display:none;}
.adm-meta[open] .adm-meta-body{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--adm-border);}
/* 調整項目（寄せ・装飾）は一段下げて従属に見せる */
.adm-form .fld.fld-sub{margin-left:.9rem;margin-bottom:.7rem;padding-left:.8rem;border-left:2px solid var(--adm-border);}
.fld-sub .fld-label{font-size:.78rem;font-weight:500;color:var(--adm-muted);}
/* セグメント型ボタン（左寄せ／中央寄せ など） */
.adm-seg,.adm-swatch{display:inline-flex;flex-wrap:wrap;gap:.35rem;}
.adm-seg input,.adm-swatch input{position:absolute;opacity:0;width:0;height:0;}
.adm-seg label{display:inline-block;padding:.35rem .9rem;border:1px solid var(--adm-border);border-radius:6px;background:#fff;font-size:.85rem;cursor:pointer;transition:all .12s;}
.adm-seg input:checked+label{background:var(--adm-accent);border-color:var(--adm-accent);color:#fff;}
.adm-seg input:focus-visible+label,.adm-swatch input:focus-visible+label{outline:2px solid var(--adm-accent);outline-offset:1px;}
/* 切替タブ（記事管理/リスト管理・物件/実績・設定/受信箱タブ等）＝管理画面共通。
   非アクティブも「白地＋青枠1px＋青文字」でボタンとはっきり分かるようにする。 */
.listpro-subnav,.listpro-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem;}
.listpro-subnav a,.listpro-tab{padding:.4rem .9rem;border-radius:8px;background:#fff;border:1px solid var(--adm-accent);color:var(--adm-accent);text-decoration:none;font-weight:600;font-size:.9rem;cursor:pointer;}
.listpro-subnav a:hover,.listpro-tab:hover{background:#eff6ff;}
.listpro-subnav a.is-current,.listpro-tab.is-active{background:var(--adm-accent);border-color:var(--adm-accent);color:#fff;}
/* 色見本ボタン（背景色） */
.adm-swatch label{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border:1px solid var(--adm-border);border-radius:6px;background:#fff;font-size:.8rem;cursor:pointer;transition:all .12s;}
.adm-swatch input:checked+label{border-color:var(--adm-accent);box-shadow:inset 0 0 0 1px var(--adm-accent);font-weight:600;}
.adm-swatch-chip{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.18);display:inline-block;flex-shrink:0;}
/* 折りたたみ：見出しだけ残してフォームを隠す */
.adm-block.is-collapsed > .adm-form{display:none;}
.adm-block.is-collapsed > .adm-block-body{display:none;}
.adm-block.is-collapsed .part-note{display:none;} /* 折りたたみ時は説明文も隠す＝パーツ名だけ */
.adm-block.is-collapsed{padding:.7rem 1.4rem;}
/* パーツ追加直後のブロックを3秒だけ光らせる（admin.js が ?new=1 のとき is-new を付与→3秒後に外す）。
   目的＝一覧モーダルが閉じて下へスクロールするため上部のフラッシュが見えず、追加に気づけないのを補う */
.adm-block.is-new{animation:admBlockNew 2.8s ease-out .2s backwards 1;} /* .2s待ってから開始＝一瞬“素の状態”を見せて変化を際立たせる。backwards＝待ち時間中も0%（＝素の見た目）を維持。2.8s+.2s=3s＝JSの除去タイミングと一致 */
@keyframes admBlockNew{
  0%{background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,0);}      /* 無 */
  12%{background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.55);} /* 0.36秒で素早くフェードイン＝動きで気づかせる */
  60%{background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.55);} /* 保持 */
  100%{background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,0);}     /* 残り1.2秒でゆっくりフェードアウト */
}
/* 見出し横の「追加されました」＝赤（青枠の中で最も目立つ／依頼者要望）・枠のフェードと同じタイミングで消える（JSが3秒後にDOMごと除去） */
.adm-new-badge{color:var(--adm-danger);font-size:.78rem;font-weight:700;white-space:nowrap;animation:admBadgeNew 2.8s ease-out .2s backwards 1;}
@keyframes admBadgeNew{0%{opacity:0;}12%{opacity:1;}60%{opacity:1;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.adm-block.is-new,.adm-new-badge{animation:none;}}
.adm-block.is-collapsed .adm-block-head{margin-bottom:0;padding-bottom:0;border-bottom:0;}
.meta-block summary,.adm-add summary{cursor:pointer;font-weight:600;padding:.5rem 0;}
.meta-block{background:#fff;border:1px solid var(--adm-border);border-radius:12px;padding:.8rem 1.4rem;margin-bottom:1.5rem;}

/* リピーター */
.rep{border:1px dashed var(--adm-border);border-radius:10px;padding:1rem;margin-bottom:1rem;}
/* リピーター各行：開閉式（閉じている時は見出しバーだけ表示） */
.rep-row{background:#fff;border:1px solid var(--adm-border);border-radius:8px;margin-bottom:.6rem;overflow:hidden;}
.rep-row.rep-simple{padding:.9rem;}  /* 折りたたみ型でない素の行（フッターメニュー等）に内側余白を付ける */
.rep-row-head{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;cursor:pointer;background:var(--adm-bg);user-select:none;}
.rep-row-head:hover{background:#e9eef5;}
.rep-row-head::before{content:"";width:.45em;height:.45em;border-right:2px solid var(--adm-muted);border-bottom:2px solid var(--adm-muted);transform:rotate(45deg);transition:transform .15s;flex-shrink:0;margin:0 .15rem;}
.rep-row.is-collapsed .rep-row-head::before{transform:rotate(-45deg);}
.rep-row-num{font-weight:700;color:var(--adm-muted);font-size:.82rem;flex-shrink:0;min-width:1.4em;}
.rep-row-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem;color:var(--adm-text);}
.rep-row-title:empty::before{content:"（クリックで開く）";color:var(--adm-muted);}
.rep-row-move{display:inline-flex;gap:.15rem;flex-shrink:0;margin-left:auto;}
.rep-row-mv{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;padding:0;border:1px solid var(--adm-border);border-radius:6px;background:#fff;color:var(--adm-muted);cursor:pointer;line-height:1;}
.rep-row-mv:hover{background:#e9eef5;color:var(--adm-text);}
.rep-row-mv .ti{font-size:1rem;}
.rep-row-del{flex-shrink:0;}
.rep-row-body{padding:.9rem;}
.rep-row.is-collapsed .rep-row-body{display:none;}

/* リンク入力（type:link）：ページ選択プルダウン＋自由入力欄 */
.fld-link{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;}
.fld-link-select{width:auto;max-width:100%;min-width:6rem;}
.fld-link-text{width:100%;}

/* 「非公開でも管理者には見える」の案内（adm_hidden_note）。
   非公開になっている“その行の中”に出す＝どれの話か迷わせない。
   背景・枠線は付けず色付きテキストのみ（各行に出るので、囲むと場所を取りすぎる・依頼者決定）。
   flex-basis:100% ＝ flex の行（.adm-pagelist li）の中でも折り返して下の段に落ちる。 */
.adm-hidden-note{flex-basis:100%;color:#9a3412;font-size:.82rem;line-height:1.6;margin:.5rem 0 0;}

/* 公開状態トグル（ページ一覧＝ページ単位／パーツの見出し＝パーツ単位。クリックで公開⇄非公開） */
.pg-status{font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;border-radius:6px;padding:.2rem .7rem;line-height:1.4;border:1px solid transparent;}
.pg-status.is-public{color:#15803d;background:#dcfce7;border-color:#bbf7d0;}
.pg-status.is-public:hover{background:#bbf7d0;}
.pg-status.is-draft{color:#9a3412;background:#ffedd5;border-color:#fed7aa;}
.pg-status.is-draft:hover{background:#fed7aa;}

/* 本文ツールバー（太字／リンク） */
.rt-toolbar{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-bottom:.35rem;}
.rt-toolbar .adm-btn{white-space:nowrap;}
.rt-tip{font-size:.78rem;color:var(--adm-muted);}
.rt-linkbar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.4rem;padding:.5rem;background:var(--adm-bg);border:1px solid var(--adm-border);border-radius:8px;}
.rt-linkbar[hidden]{display:none;}
.rt-linkbar .rt-link-page{width:auto;max-width:100%;min-width:6rem;}
.rt-linkbar .rt-link-url{flex:1;min-width:8rem;}

/* パーツ追加 */
.adm-addblock{background:#eef2ff;border:1px solid #c7d2fe;border-radius:12px;padding:1.2rem 1.4rem;margin-top:1.5rem;}
.adm-addblock h3{margin:0 0 .7rem;font-size:1rem;}
.adm-inline-form{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;}
.adm-inline-form label{margin-bottom:0;flex:1;min-width:140px;}
.adm-add{margin-top:1rem;}

/* メイン画像：スライドブロック */
.mv-slide{background:#fff;border:1px solid var(--adm-border);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem;}
.mv-slide .adm-block-head{margin-bottom:.8rem;}
.mv-slide textarea{min-height:2.6em;}
/* 管理：2列フォーム */
.cols2-admin{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
@media (max-width:640px){.cols2-admin{grid-template-columns:1fr;}}
.cols3-admin{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 1rem;}
@media (max-width:760px){.cols3-admin{grid-template-columns:1fr;}}

/* ドラッグ&ドロップ領域 */
.dropzone{border:2px dashed var(--adm-border);border-radius:10px;padding:.7rem .9rem;background:#fafbfc;transition:border-color .15s,background .15s;}
.dropzone.is-over{border-color:var(--adm-accent);background:#eff6ff;}
.dropzone-hint{font-size:.82rem;color:var(--adm-muted);margin-bottom:.4rem;}
.dropzone-file{font-size:.82rem;color:var(--adm-accent);margin-top:.4rem;word-break:break-all;}
.dropzone input[type=file]{max-width:100%;}

/* 無料版の透かし＆バッジ */
.adm-trial-mark{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5;overflow:hidden;}
.adm-trial-mark::before{content:"Free";font-size:22vw;font-weight:900;color:rgba(15,23,42,.05);transform:rotate(-24deg);white-space:nowrap;letter-spacing:.1em;}
.adm-trial-badge{display:inline-block;background:#f59e0b;color:#fff;font-size:.7rem;font-weight:700;padding:.05rem .45rem;border-radius:6px;margin-left:.4rem;vertical-align:middle;}

/* アイコン選択フィールド */
.icon-field{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.icon-field .icon-preview{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--adm-border);border-radius:8px;font-size:1.1rem;color:var(--adm-text);background:#fff;}
.icon-field [data-icon-input]{width:auto;flex:1;min-width:140px;background:#f8fafc;color:var(--adm-muted);}
/* アイコン選択モーダル */
.icon-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:flex-start;justify-content:center;z-index:1000;padding:4vh 1rem;}
.icon-modal.is-open{display:flex;}
.icon-modal-box{background:#fff;border-radius:12px;max-width:640px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;}
.icon-modal-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.1rem;border-bottom:1px solid var(--adm-border);}
.icon-modal-search{padding:.7rem 1.1rem;border-bottom:1px solid var(--adm-border);}
.icon-modal-search input{width:100%;padding:.55rem .8rem;border:1px solid var(--adm-border);border-radius:8px;font-size:.95rem;font-family:inherit;background:#fff;box-sizing:border-box;}
.icon-modal-search input:focus{outline:2px solid var(--adm-accent);outline-offset:1px;}
.icon-modal-body{padding:1rem 1.1rem;overflow:auto;}
.icon-pick-hint{font-size:.8rem;color:var(--adm-muted);margin:0 0 .7rem;padding:.55rem .75rem;background:var(--adm-bg);border-radius:6px;line-height:1.5;}
.icon-cat-name{font-weight:700;font-size:.85rem;color:var(--adm-muted);margin:.8rem 0 .5rem;}
.icon-cat-name:first-child{margin-top:0;}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:.5rem;}
.icon-cell{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .3rem;border:1px solid var(--adm-border);border-radius:8px;background:#fff;cursor:pointer;font-size:1.2rem;color:var(--adm-text);}
.icon-cell span{font-size:.68rem;color:var(--adm-muted);line-height:1.2;}
.icon-cell:hover{border-color:var(--adm-accent);background:#f1f5f9;}

/* ===== テーマカラー =====
   色は縦1列。各行を grid にして「ラベル｜色見本｜カラーコード｜文字色」の“列”で揃える。
   ★幅を px/rem で指定して flex に任せる書き方は使わない。理由：
     `.adm-form input[type=text]{width:100%;padding:.6rem .7rem}`（詳細度 0,2,1）が効いていて、
     `.color-hex{width:...}`（0,1,0）は負けるため。数値をいじっても直らず、
     flex-shrink を切った瞬間に width:100% が素で出て崩れた（2026-08-05に実際に踏んだ）。
     grid なら列幅が親側で決まるので、input 側の width 指定に依存しない。 */
.color-grid{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.color-item{display:grid;grid-template-columns:8.5rem 1fr;align-items:center;gap:.8rem;font-size:.82rem;}
.color-name{color:var(--adm-text);}
/* 色見本56px｜カラーコード5.6rem｜文字色（無い行は0幅）。最後の 1fr が余白を吸って左詰めになる */
.color-row{display:grid;grid-template-columns:56px 5.6rem auto 1fr;align-items:center;gap:.5rem;}
.color-item input[type=color]{width:100%;height:42px;border:1px solid var(--adm-border);border-radius:8px;background:none;cursor:pointer;padding:2px;}
/* .adm-form input[type=text] と同じ詳細度(0,2,1)にして、後に書くことで勝たせる */
.adm-form input.color-hex{width:100%;font-size:.82rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;padding:.45rem .3rem;border:1px solid var(--adm-border);border-radius:8px;}
.adm-form input.color-hex:focus{outline:2px solid var(--adm-accent);outline-offset:1px;}
/* その色に乗る文字の色（自動/白/濃色）。背景色・文字色は互いが対なので出さない＝この列が空になる */
.color-inv{display:inline-flex;align-items:center;gap:.4rem;}
.color-inv-label{color:var(--adm-muted);font-size:.78rem;white-space:nowrap;}
.adm-form .color-inv select{width:auto;font-size:.8rem;padding:.35rem .5rem;}
/* 上級者向け：テーマカラーのCSS直接編集 */
/* CSS直接編集はパレットとは別機能なので、区切り線で切り離す。
   ボタンの見た目はリセットと同じ控えめ（ghost）でよい＝線で分かれていれば紛れない。 */
.theme-css-box{margin:1.3rem 0 0;padding-top:1.1rem;border-top:1px solid var(--adm-border);}
/* white-space:pre＝折り返さず横スクロール。CSSは1行が意味のまとまりなので、途中で折り返されると読みにくい */
.adm-form textarea.theme-css-area{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.6;padding:.7rem .8rem;resize:vertical;white-space:pre;overflow-x:auto;}
.theme-css-area[readonly]{background:#f8fafc;color:var(--adm-muted);}
.color-actions{margin:.9rem 0 .5rem;}

/* フレーム選択 */
.frame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.2rem;}
.frame-card{position:relative;display:flex;flex-direction:column;gap:.4rem;border:2px solid var(--adm-border);border-radius:12px;padding:1.1rem;cursor:pointer;background:#fff;}
.frame-card:hover{border-color:#94a3b8;}
.frame-card.is-active{border-color:var(--adm-accent);background:#eff6ff;}
.frame-card input{position:absolute;top:1rem;right:1rem;}
.frame-thumb{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--adm-border);background:#f1f5f9;margin-bottom:.2rem;}
.frame-name{font-weight:700;font-size:1.05rem;}
.frame-desc{font-size:.82rem;color:var(--adm-muted);}
.frame-badge{position:absolute;bottom:1rem;right:1rem;font-size:.7rem;background:var(--adm-accent);color:#fff;padding:.1rem .5rem;border-radius:20px;}
.frame-preview-link{align-self:flex-start;margin-top:.2rem;font-size:.8rem;font-weight:600;color:var(--adm-accent);text-decoration:none;}
.frame-preview-link:hover{text-decoration:underline;}
/* 使用中フレームを常時表示＋他フレームは折りたたみ（フレームが増えても画面が伸びない） */
.frame-current{display:flex;gap:1rem;align-items:flex-start;border:2px solid var(--adm-accent);background:#eff6ff;border-radius:12px;padding:1rem;margin-bottom:1rem;}
.frame-current-thumb{flex:none;width:180px;max-width:38%;height:auto;display:block;border-radius:8px;border:1px solid var(--adm-border);background:#f1f5f9;}
.frame-current-body{display:flex;flex-direction:column;gap:.3rem;min-width:0;}
.frame-current-badge{align-self:flex-start;font-size:.7rem;background:var(--adm-accent);color:#fff;padding:.1rem .5rem;border-radius:20px;}
.frame-current-name{font-weight:700;font-size:1.05rem;}
.frame-current-desc{font-size:.82rem;color:var(--adm-muted);}
summary.frame-switch-toggle{list-style:none;display:inline-block;margin-bottom:.9rem;}
summary.frame-switch-toggle::-webkit-details-marker{display:none;}
@media (max-width:600px){.frame-current{flex-direction:column;}.frame-current-thumb{width:100%;max-width:none;}}

/* メイン画像 */
.mv-type-pick{display:flex;gap:1.2rem;margin-bottom:1.2rem;flex-wrap:wrap;}
.mv-radio{display:flex;align-items:center;gap:.4rem;font-weight:600;}
.mv-panel{border:1px solid var(--adm-border);border-radius:10px;padding:1.1rem;margin-bottom:1.2rem;}
.mv-slides{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem;}
.mv-slide-item{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;}
.mv-slide-item img{width:120px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--adm-border);}

/* フラッシュ */
.adm-flash{padding:.8rem 1rem;border-radius:8px;margin-bottom:1.2rem;font-size:.92rem;}
.adm-flash.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.adm-flash.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}

/* ログイン */
.adm-login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.adm-login{background:#fff;border:1px solid var(--adm-border);border-radius:16px;padding:2.4rem;width:100%;max-width:400px;box-shadow:0 10px 40px rgba(0,0,0,.06);}
.adm-login-ttl{margin:0 0 1rem;font-size:1.3rem;text-align:center;}
.adm-login-lead{font-size:.88rem;color:var(--adm-muted);margin-bottom:1.2rem;}
.adm-login label{display:block;margin-bottom:1rem;font-size:.85rem;font-weight:600;}
.adm-login input{width:100%;padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:8px;font-size:.95rem;margin-top:.3rem;}

/* モバイル */
@media (max-width:760px){
  .adm-burger{display:flex;}
  .adm-side{position:fixed;top:56px;bottom:0;left:0;transform:translateX(-100%);transition:transform .2s;z-index:70;}
  body.adm-nav-open .adm-side{transform:translateX(0);}
  .adm-main{padding:1.2rem;}
}

/* 着せ替え（スキン切替）フォーム — カード系パーツで「見た目だけ」を一発で切り替える */
.adm-skin-form{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem;padding:.6rem .8rem;background:var(--adm-soft,#f4f7fb);border:1px solid var(--adm-border);border-radius:8px;}
.adm-skin-label{font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:.4rem;}
.adm-skin-form select{padding:.35rem .5rem;border:1px solid var(--adm-border);border-radius:6px;background:#fff;}
.adm-skin-form .fld-hint{flex:1 1 100%;margin:0;}
.adm-block.is-collapsed .adm-skin-form{display:none;}

/* 「＋パーツを追加」横の「パーツ一覧をみる」リンク（サムネ一覧ページへ） */
.adm-addblock h3 .adm-catalog-link{font-size:.82rem;font-weight:normal;margin-left:.6rem;white-space:nowrap;}

/* パーツピッカー（サムネから選ぶ画像グリッド） */
.part-picker-tools{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center;margin:.2rem 0 1rem;}
.part-search{flex:1;min-width:200px;padding:.5rem .7rem;border:1px solid var(--adm-border);border-radius:8px;font-size:.9rem;background:#fff;}
.part-search::placeholder{color:#b3bac6;}
.part-cat-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.part-chip{font-size:.8rem;padding:.28rem .7rem;border:1px solid var(--adm-border);border-radius:999px;background:#fff;color:var(--adm-muted);cursor:pointer;line-height:1.3;}
.part-chip:hover{border-color:#94a3b8;}
.part-chip.is-active{background:var(--adm-accent);border-color:var(--adm-accent);color:#fff;font-weight:700;}
.part-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem;}
.part-card{position:relative;}
.part-card-add{display:flex;flex-direction:column;gap:.35rem;width:100%;text-align:left;border:2px solid var(--adm-border);border-radius:12px;padding:.6rem;background:#fff;cursor:pointer;font:inherit;color:inherit;}
.part-card-add:hover{border-color:var(--adm-accent);box-shadow:0 2px 10px rgba(37,99,235,.12);}
.part-card-add:focus-visible{outline:2px solid var(--adm-accent);outline-offset:2px;}
.part-thumb-wrap{display:block;}
.part-zoom{position:absolute;top:.9rem;right:.9rem;width:2rem;height:2rem;border:0;border-radius:50%;background:rgba(15,23,42,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;z-index:2;}
.part-zoom:hover{background:rgba(15,23,42,.85);}
.part-zoom:focus-visible{outline:2px solid #fff;outline-offset:1px;}
.part-thumb{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--adm-border);background:#f1f5f9;}
.part-thumb-none{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;color:#c2c8d0;}
.part-name{font-weight:700;font-size:.9rem;line-height:1.3;}
.part-cat-badge{font-size:.72rem;color:var(--adm-muted);}
.part-card-current{align-self:flex-start;font-size:.7rem;font-weight:700;background:var(--adm-accent);color:#fff;padding:.05rem .5rem;border-radius:999px;}
.part-empty{color:var(--adm-muted);font-size:.9rem;padding:1rem .2rem;}
/* サムネ一覧モーダル */
.part-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}
.part-modal[hidden]{display:none;}
.part-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5);}
.part-modal-panel{position:relative;background:#fff;border-radius:14px;width:min(920px,100%);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;}
.part-modal-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--adm-border);}
.part-modal-title{font-size:1rem;}
.part-modal-x{border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--adm-muted);padding:.1rem .5rem;border-radius:8px;}
.part-modal-x:hover{background:#f1f5f9;color:#111;}
.part-modal .part-picker-tools{padding:.9rem 1.1rem 0;margin:0;}
.part-modal-body{overflow:auto;padding:1rem 1.1rem 1.3rem;}
/* パーツ追加後の#block-アンカー着地：固定ヘッダー(.adm-top 56px)に見出しが隠れないよう余白 */
.adm-block{scroll-margin-top:70px;}
/* サムネ拡大ライトボックス（モーダルの上・虫眼鏡から） */
.part-lightbox{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}
.part-lightbox[hidden]{display:none;}
.part-lightbox-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7);}
.part-lightbox-panel{position:relative;background:#fff;border-radius:14px;width:min(680px,100%);max-height:88vh;overflow:auto;padding:1.3rem;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.part-lightbox-x{position:absolute;top:.4rem;right:.6rem;border:0;background:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--adm-muted);padding:.1rem .4rem;border-radius:8px;}
.part-lightbox-x:hover{background:#f1f5f9;color:#111;}
.part-lightbox-media img,.part-lightbox-media video{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--adm-border);background:#f1f5f9;}
.part-lightbox-none{padding:3rem;text-align:center;color:#c2c8d0;background:#f1f5f9;border-radius:10px;}
.part-lightbox-info{margin-top:.9rem;}
.part-lightbox-name{font-size:1.05rem;}
.part-lightbox-cat{margin-left:.5rem;font-size:.8rem;color:var(--adm-muted);}
.part-lightbox-desc{margin:.5rem 0 1rem;font-size:.9rem;color:var(--adm-muted);line-height:1.5;}
