/* ---------- ---------- ---------- ---------- ---------- ---------- */
/* コマンド生成ツールのCSS                                             */
/* ---------- ---------- ---------- ---------- ---------- ---------- */
/* ========== ========== */
/* フルワイド      */
/* ========== ========== */
.l-article{
  max-width: 100%;
}
.l-mainContent__inner>.post_content{
  padding:0;
}

/* ========== ========== */
/* 記事サムネイル画像      */
/* ========== ========== */
.p-articleThumb {
  width: 800px;
  height: 450px;
  overflow: hidden;
  display: block;
  margin: 0; /* 中央揃えを削除して左寄せに */
}

.p-articleThumb__img {
  width: 800px !important;
  height: 450px !important;
  object-fit: cover; /* アスペクト比を保ちつつ枠に収める */
  object-position: center; /* 画像の中央を表示 */
}
/* レスポンシブ対応 */
@media (max-width: 900px) {
  .p-articleThumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* 800:450の比率を維持 */
  }
  
  .p-articleThumb__img {
    width: 100% !important;
    height: auto !important;
    max-width: 800px;
  }
}
/* ========== ========== */
/* 入力エリア            */
/* ========== ========== */
/* 見出し用セクション */
.heading-section {
  width: 100%;
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  padding: 8px 0 4px 0;
  margin: 12px 0 8px 0;
  border-bottom: 1px solid #e5e7eb;
}

/* インプット */
input.command-input{
	padding: 0;
	border-radius: 0;
	font-size:12px;
}

input.command-input[type="text"],
input.command-input[type="number"],
input.command-input[type="search"]{
	width:100%;
	height:100%;
	background-color:white;
  border: #aaa 1px solid;
}
/* [type="color"]はcssをうまく読み取れないため、直接styleを指定することとする。 */

select.command-input{
	font-size: 12px;
	padding:0px;
	border-radius:0;
	width:100%;
	height:100%;
	background-color:white;
  border: #aaa 1px solid;
}
select.command-input:disabled{
	background-color: #ccc;
	opacity: 0.35;
  border: #000 1px solid;
}
.select2-container--default,.select2-selection--single{
	font-size: 12px!important;
	border-radius:0!important;	
	width:100%!important;
	height:100%!important;
}


/* ========== ========== */
/* グリッド全体           */
/* ========== ========== */
.panel-content{
  display:grid;
  grid-template-columns: 400px 800px;
  grid-template-rows: auto auto 1fr;
  gap:8px;
  align-items:start;
}

@media (max-width: 900px){
  .panel-content{ display:block }
}

/* ========== ========== */
/* グリッド入力エリア      */
/* ========== ========== */
/* グリッド */
.basic-grid{
  display:inline-grid; /* allow grids to sit side-by-side when space permits */
  vertical-align:top;
  gap:1px;
  align-items:start;
  margin-right:2px; /* spacing between grids */
  margin-bottom:6px; /* spacing between grids */
}
/* グリッド - 行ラベル */
.basic-grid .g-label-row{
  background: #DDEBF7;
  padding:0 6px;
  border-radius:0px;
  font-size:12px;
  height:32px;
  display:inline-flex;
  align-items:center;
}
/* グリッド - 列ラベル */
.basic-grid .g-label-col{
  background: #DDEBF7;
  padding:0 0px;
  border-radius:0px;
  font-size:12px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* グリッド - 行サブラベル */
.basic-grid .g-label-row--sub{
  background: ghostwhite;
  padding:0 6px;
  border-radius:0px;
  font-size:12px;
  height:32px;
  display:inline-flex;
  align-items:center;
}
/* グリッド - コントロール */
.basic-grid .g-control{
  font-size:12px;
  height:32px;
  display:flex;
  align-items:center;
}

/* グリッド - ノート */
.basic-grid .g-note{
  background: transparent;
  padding:0 6px;
  font-size:12px;
  color:var(--muted);
  height:auto;
  display:block;
  align-self:center;
}

/* グリッド - フル幅ノート */
.basic-grid .g-note--full{
  grid-column: 1 / -1;
  padding:4px 6px;
}

/* グリッド - 入力欄、セレクトボックス、テキストエリア */
.basic-grid .g-control input,
.basic-grid .g-control button,
.basic-grid .g-control select{
  width:100%;
  height:32px;
  border-radius:0;
  padding:0 6px;
  box-sizing:border-box;
  font-size:12px;
}

/* グリッド - 列数バリエーション */
.basic-grid.cols-2{grid-template-columns:145px 250px}

/* グリッド - 縦スクロール */
.components-scroll{ max-height:600px; overflow:auto; overflow-x:hidden; padding-right:0px; position:relative; isolation:isolate }
.components-scroll::-webkit-scrollbar{ width:10px }
.components-scroll::-webkit-scrollbar-thumb{ background:rgba(11,61,97,0.12); border-radius:6px }
.components-scroll > .basic-grid { padding-top: 0px; }

/* 子のグリッドがコンテナをはみ出して横スクロールを発生させないようにする */
.components-scroll .basic-grid{ max-width:100%; box-sizing:border-box; grid-auto-columns: minmax(0, auto); }

/* グリッド - 縦スクロールのヘッダー */
.components-scroll .components-header{ display: contents }
.components-scroll .components-header .g-label-col{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 12; /* higher to cover active rows */
}

/* ========== ========== */
/* 出力エリア            */
/* ========== ========== */
/*コマンド出力ボックス*/
.cmdOutput{
	border-radius:	0;
	font-size:		12px;
	min-height: 100px;
	margin: 0;
	width: 100%;
	height: 80px;
  background-color:#fff;
}

/*文字数出力エリア*/
.count{
	margin: 0;
}

/*コマンド生成ボタン/コマンドコピーボタン*/
.cmdButton {
	position: relative;
	width:150px;
	height:50px;
	margin-top: 0;
	margin-bottom:5px;
	margin-right:5px;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
}
.cmdButton:hover {
	background: #1B1B1B;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}

/* ========== ========== */
/* コンポーネント詳細      */
/* ========== ========== */
.component-details .detail{ display:none }
.component-details .detail.active{ display:block }

.comp-btn{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:6px 4px;
  cursor:pointer;
  font:inherit;
}
.comp-btn:hover{ background: rgba(0,0,0,0.03); }
.comp-btn.active{
  background-color: #0b61d9;
  color: #fff;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(11,97,217,0.18);
  border-radius:6px;
}

.comp-btn:focus-visible{
  outline: 3px solid rgba(11,97,217,0.18);
  outline-offset: 2px;
}

.basic-grid .g-control > .comp-btn{ width:100% }


/* ========== ========== */
/* Quill Editor Styles   */
/* ========== ========== */
.ql-toolbar .ql-obfuscated::before {
    content: '§';
}
.ql-editor {
    font-family: 'Courier New', monospace;
}
.ql-editor .ql-obfuscated-true {
    position: relative;
    color: transparent;
}
.ql-editor .ql-obfuscated-true::before {
    content: attr(data-symbol);
    position: absolute;
    top: 0;
    left: 0;
    color: black;
    font-family: inherit;
}