/* =========================
   Potablen UI Base
   ========================= */

/* ===== SWELL: pota系CPTは常に1カラム + 幅統一 ===== */
.single-pota_test .l-sidebar,
.single-pota_set .l-sidebar,
.single-pota_powerstation .l-sidebar,
.single-pota_appliance .l-sidebar,
.single-pota_recipe .l-sidebar,
.single-pota_sale .l-sidebar,
.single-pota_video .l-sidebar{
  display: none !important;
}

/* SWELLコンテナ幅（外側） */
.single-pota_test .l-content.l-container,
.single-pota_set .l-content.l-container,
.single-pota_powerstation .l-content.l-container,
.single-pota_appliance .l-content.l-container,
.single-pota_recipe .l-content.l-container,
.single-pota_sale .l-content.l-container,
.single-pota_video .l-content.l-container{
  max-width: 1100px;
}

/* メイン領域を100%に */
.single-pota_test .l-content,
.single-pota_set .l-content,
.single-pota_powerstation .l-content,
.single-pota_appliance .l-content,
.single-pota_recipe .l-content,
.single-pota_sale .l-content,
.single-pota_video .l-content{
  width: 100%;
}

/* ===== Design Tokens ===== */
:root{
  --p-bg:#fff;
  --p-surface: rgba(0,0,0,.02);
  --p-surface2: rgba(0,0,0,.04);
  --p-border: rgba(0,0,0,.08);
  --p-border2: rgba(0,0,0,.06);
  --p-text: rgba(0,0,0,.90);
  --p-muted: rgba(0,0,0,.62);

  --p-radius: 16px;
  --p-radius-sm: 12px;

  --p-shadow-sm: 0 6px 18px rgba(0,0,0,.05);

  --p-max: 980px;
  --p-gap: 14px;
}

/* pota pages base text color */
.pota-test-page,
.pota-appliance-page,
.pota-powerstation-page,
.pota-recipe-page,
.pota-set-page,
.pota-sale-page,
.pota-video-page{
  color: var(--p-text);
}

/* ===== unified inner container ===== */
.pota-container{
  width: 100%;
  max-width: var(--p-max);
  margin: 0 auto;
  padding: 0;                 /* ←要望どおり 0 */
  box-sizing: border-box;
}
.pota-section{ margin: 26px 0; }

/* header */
.pota-header{ margin: 6px 0 14px; }
.pota-title{
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: .2px;
}
.pota-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .95rem;
  color: var(--p-muted);
}
.pota-meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--p-surface);
  border: 1px solid var(--p-border2);
}

/* headings */
.pota-h2{ font-size: 1.2rem; margin: 0 0 12px; letter-spacing:.2px; }
.pota-h3{ font-size: 1.05rem; margin: 0 0 10px; }

/* surface */
.pota-box{
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  background: var(--p-bg);
  box-shadow: var(--p-shadow-sm);
  padding: 14px 16px;
}
.pota-editor{ color: var(--p-text); }

/* links */
.pota-container a{ text-decoration: none; }
.pota-container a:hover{ text-decoration: underline; }

/* ===== summary box ===== */
.pota-box--summary{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(0,0,0,.02);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  padding: 14px;
  position: relative;
}
.pota-box--summary:before{
  content:"";
  position:absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
}
.pota-box--summary .pota-h2{ margin-left: 14px; }
.pota-summary{
  margin-left: 14px;
  font-size: 1.02rem;
  line-height: 1.75;
  opacity: .9;
}

/* ===== editor tail ===== */
.pota-editor-tail{ margin-top: 18px; }
.pota-tail-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 18px 0 14px;
}

/* ===== note-like reading ===== */
.pota-editor--reading{
  font-size: 1.02rem;
  line-height: 1.9;
  opacity: .92;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}
.pota-editor--reading h2{ font-size: 1.35rem; margin-top: 2.2em; }
.pota-editor--reading h3{ font-size: 1.1rem; margin-top: 1.8em; }
.pota-editor--reading p{ line-height: 1.85; margin: 1.2em 0; }
.pota-editor--reading ul,
.pota-editor--reading ol{ padding-left: 1.25em; margin: 0 0 1.1em; }
.pota-editor--reading img{ border-radius: 16px; height: auto; padding-top:.8em; }

/* ===== video embed (common) ===== */
.pota-video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* default = long */
  border-radius: var(--p-radius);
  overflow: hidden;
  background: var(--p-surface);
  box-shadow: var(--p-shadow-sm);
}
.pota-video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.pota-video-embed--short{
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin: 0 auto;
}
.pota-video-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p-gap);
  margin-top: 14px;
}
@media (max-width: 900px){ .pota-video-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .pota-video-grid{ grid-template-columns: 1fr; } }

/* mobile */
@media (max-width: 600px){
  .pota-container{ padding: 0; }   /* ←要望どおり 0 */
  .pota-title{ font-size: 1.45rem; }
  .pota-h2{ font-size: 1.12rem; }
  .pota-editor--reading{ max-width: 100%; padding: 0; }
}