:root{
  --ui-bg:#0c1326; --ui-panel:#111a30; --ui-panel-2:#16203a; --ui-line:#243255;
  --ui-text:#e8edf7; --ui-muted:#9fb0d0; --ui-accent:#2dd4bf; --ui-accent-2:#38bdf8;
  --ui-warn:#fbbf24; --ui-err:#f87171; --ui-ok:#4ade80;
  --ui-radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ui-bg); color:var(--ui-text);
  font-family:'Hiragino Sans','Noto Sans CJK JP','Noto Sans JP',system-ui,sans-serif;
  font-size:16px; line-height:1.7;
}
a{color:var(--ui-accent-2)}
.wrap{max-width:1838px; margin:0 auto; padding:24px 16px 64px}

/* ---- header ---- */
.head{display:flex; flex-direction:column; gap:8px; margin-bottom:24px}
.head h1{margin:0; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; line-height:1.35}
.head p{margin:0; color:var(--ui-muted); font-size:16px}

/* ---- 3 columns ---- */
/* 左右のサイドバーは同幅で固定。中央は画面幅に応じて伸縮させる。
   上限1266pxはステージの枠(12px×2＋境界線1px×2)を含む値で、
   プレビュー本体が実サイトの本文幅と同じ1240pxで止まる */
.cols{display:grid; grid-template-columns:250px minmax(0,1266px) 250px; gap:20px;
      justify-content:center; align-items:start}
@media (max-width:1040px){ .cols{grid-template-columns:1fr} }

.panel{background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:var(--ui-radius); padding:16px}
.panel h2{margin:0 0 12px; font-size:17px; letter-spacing:-.01em}
.panel h3{margin:18px 0 8px; font-size:16px; color:var(--ui-muted); font-weight:600}
.hint{color:var(--ui-muted); font-size:16px; margin:8px 0 0}

/* ---- theme buttons ---- */
.themes{display:flex; flex-direction:column; gap:8px}
.grp{font-size:16px; color:var(--ui-muted); margin:14px 0 6px}
.grp small{display:block; overflow-wrap:anywhere}
.grp:first-child{margin-top:0}
.grp small{font-size:16px; opacity:.75}
.fontnote{margin-top:8px; font-size:16px; color:var(--ui-warn); min-height:1.7em}
.theme-btn{
  width:100%; text-align:left; cursor:pointer; font:inherit; font-size:16px;
  background:var(--ui-panel-2); color:var(--ui-text);
  border:1px solid var(--ui-line); border-radius:8px; padding:11px 12px;
  display:flex; align-items:center; gap:10px; transition:border-color .15s, background .15s;
}
.theme-btn:hover{border-color:var(--ui-accent)}
.theme-btn[aria-pressed="true"]{border-color:var(--ui-accent); background:#12283a}
.swatches{display:flex; gap:3px; flex:0 0 auto}
.swatches i{width:11px; height:20px; border-radius:3px; display:block; border:1px solid rgba(255,255,255,.15)}
.theme-btn span{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}

textarea{
  width:100%; min-height:150px; font-size:16px; line-height:1.6;
  font-family:'SFMono-Regular',Menlo,Consolas,monospace;
  background:#0a1122; color:var(--ui-text); border:1px solid var(--ui-line);
  border-radius:8px; padding:10px; resize:vertical;
}
.btn{
  cursor:pointer; font:inherit; font-size:16px; font-weight:600;
  background:linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); color:#06222b;
  border:0; border-radius:8px; padding:10px 14px; width:100%;
}
.btn+.btn{margin-top:8px}

/* ---- prompt ---- */
#prompt{min-height:280px}
.copied{color:var(--ui-ok); font-size:16px; margin:8px 0 0; min-height:1.7em}

/* =========================================================
   LP PREVIEW — テーマのトークンだけで描画する領域
   ========================================================= */
.stage{background:#1d2740; border:1px solid var(--ui-line); border-radius:var(--ui-radius); padding:12px}
.stage .lp{box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 12px 28px rgba(0,0,0,.35)}
.stage-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.stage-bar strong{font-size:16px}
.stage-bar em{font-style:normal; color:var(--ui-muted); font-size:16px}

.lp{
  --lp-bg:#ffffff; --lp-text:#111111; --lp-muted:#666666; --lp-card:#f5f5f5;
  --lp-line:#dddddd; --lp-accent:#3355ff; --lp-on-accent:#ffffff;
  --lp-accent2:#884444; --lp-on-accent2:#ffffff;
  --lp-radius:8px; --lp-gap:16px; --lp-pad:24px;
  --lp-h-font:system-ui,sans-serif; --lp-h-size:clamp(26px,5.2cqi,40px); --lp-h-weight:700; --lp-h-ls:-0.02em; --lp-h-lh:1.15;
  --lp-b-font:system-ui,sans-serif; --lp-b-size:16px; --lp-b-weight:400; --lp-b-lh:1.7;
  --lp-l-font:system-ui,sans-serif; --lp-l-size:16px; --lp-l-ls:0.06em;
  container-type:inline-size;
  background:var(--lp-bg); color:var(--lp-text); border-radius:var(--lp-radius);
  overflow:hidden; font-family:var(--lp-b-font); font-size:var(--lp-b-size); line-height:var(--lp-b-lh);
}
.lp-nav{display:flex; align-items:center; gap:var(--lp-gap); padding:14px var(--lp-pad); border-bottom:1px solid var(--lp-line); flex-wrap:wrap}
.lp-logo{font-family:var(--lp-h-font); font-weight:var(--lp-h-weight); letter-spacing:var(--lp-h-ls); font-size:19px; margin-right:auto}
.lp-nav a{color:var(--lp-muted); text-decoration:none; font-size:16px}
.lp-hero{padding:calc(var(--lp-pad) * 1.6) var(--lp-pad)}
.lp-eyebrow{font-family:var(--lp-l-font); font-size:var(--lp-l-size); letter-spacing:var(--lp-l-ls); color:var(--lp-accent); text-transform:uppercase; margin:0 0 12px}
.lp-hero h2{
  font-family:var(--lp-h-font); font-size:var(--lp-h-size); font-weight:var(--lp-h-weight);
  letter-spacing:var(--lp-h-ls); line-height:var(--lp-h-lh); margin:0 0 14px;
  text-wrap:balance;
}
.lp-hero p{margin:0 0 20px; color:var(--lp-muted); max-width:52ch}
.lp-actions{display:flex; gap:12px; flex-wrap:wrap}
.lp-btn{
  border:0; cursor:pointer; font:inherit; font-size:16px; font-weight:600;
  background:var(--lp-accent); color:var(--lp-on-accent);
  border-radius:var(--lp-radius); padding:12px 20px;
}
.lp-btn.ghost{background:transparent; color:var(--lp-accent); border:1px solid var(--lp-accent)}
.lp-btn.second{background:var(--lp-accent2); color:var(--lp-on-accent2)}
.lp-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--lp-gap); padding:0 var(--lp-pad) var(--lp-pad)}
@media (max-width:640px){ .lp-cards{grid-template-columns:1fr} }
.lp-card{background:var(--lp-card); border:1px solid var(--lp-line); border-radius:var(--lp-radius); padding:var(--lp-pad)}
.lp-card h3{font-family:var(--lp-h-font); font-size:19px; font-weight:var(--lp-h-weight); letter-spacing:var(--lp-h-ls); margin:0 0 8px; text-wrap:balance}
.lp-card p{margin:0; color:var(--lp-muted); font-size:16px}
.lp-form{border-top:1px solid var(--lp-line); padding:var(--lp-pad); display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.lp-form input{
  flex:1 1 220px; font:inherit; font-size:16px; padding:12px 14px;
  background:var(--lp-bg); color:var(--lp-text);
  border:1px solid var(--lp-line); border-radius:var(--lp-radius);
}
.lp-foot{padding:14px var(--lp-pad); border-top:1px solid var(--lp-line); color:var(--lp-muted); font-size:16px}
.lp-spec{border-top:1px solid var(--lp-line); padding:var(--lp-pad); display:flex; flex-direction:column; gap:18px}
.lp-spec-h{font-family:var(--lp-l-font); font-size:var(--lp-l-size); letter-spacing:var(--lp-l-ls); color:var(--lp-accent); text-transform:uppercase; margin:0}
.spec-row{display:flex; flex-direction:column; gap:2px}
.spec-meta{font-size:16px; color:var(--lp-muted); font-family:'SFMono-Regular',Menlo,Consolas,monospace}
.spec-sample{margin:0; overflow-wrap:anywhere}

/* ---- token dump ---- */
.tokens{margin-top:14px}
.tok-grid{display:flex; flex-wrap:wrap; gap:6px}
.tok{display:flex; align-items:center; gap:6px; font-size:16px; background:var(--ui-panel-2); border:1px solid var(--ui-line); border-radius:6px; padding:3px 8px}
.tok i{width:14px; height:14px; border-radius:3px; border:1px solid rgba(255,255,255,.2)}
details summary{cursor:pointer; color:var(--ui-muted); font-size:16px}

/* 広告（ツール規格: PC/SPとも320×100・PCは右下フローティング） */
.footer-ad{position:fixed; right:0; bottom:0; z-index:90;
           display:flex; flex-direction:column; align-items:center; gap:2px; padding:0;
           width:320px; overflow:hidden; /* AdSenseレスポンシブの横伸び防止＋×を右端に固定 */
           background:transparent; border:none; box-shadow:none}
.footer-ad.is-closed{display:none}
.ad-widget__head{display:flex; align-items:center; justify-content:space-between; width:100%; position:relative; z-index:1}
.ad-widget__label{color:#64748b; font-size:12px; letter-spacing:0.04em; background:#f1f5f9; padding:2px 8px; border-radius:999px}
.ad-widget__close{
  appearance:none; border:none; background:#f1f5f9; color:#64748b;
  width:18px; height:18px; border-radius:50%; font-size:12px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.ad-widget__close:hover{background:#e2e8f0; color:#1e293b}
.footer-ad ins.adsbygoogle{display:block; width:320px; height:100px}

@media screen and (max-width:768px){
  .footer-ad{
    position:static; align-self:center; margin:24px auto 0;
    gap:0; padding:0; background:none; border:none; border-radius:0; box-shadow:none; z-index:auto;
  }
  .footer-ad.is-closed{display:flex}  /* PCで閉じてもSPでは表示 */
  .ad-widget__head{display:none}      /* SPはラベル・×を隠す */
  .footer-ad ins.adsbygoogle{width:320px; height:100px}
}

footer.site{margin-top:40px; border-top:1px solid var(--ui-line); padding-top:16px; color:var(--ui-muted); font-size:16px}
.foot-nav{display:flex; justify-content:flex-start; flex-wrap:wrap; gap:12px 24px; margin-top:14px}
footer.site a{color:var(--ui-accent-2)}