/* markdown-converter.css
   markdown-converter.html 専用。page-common.css（ドロワー型 <body class="layout-3col l3-drawer">）の「後」に読み込むこと。
   ・上書きは page-common.css と同じ詳細度で書き、読み込み順で勝たせている。
   ・body の文字サイズ、a、buttonもここにある。
   ・色は page-common.css の :root にある変数（--c-*）を使う。色を変えたいときは :root 側を直す。 */


.layout-3col {
  /* 本文の最大幅。none = 画面幅いっぱい（上限を付けるなら min(95%, 1400px) など） */
  --l3-content-max: none;

  /* 余白・中央寄せ・幅以外（文字サイズなど） */
  font-size: 0.9rem;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* 余白・下マージン。横の余白は .layout の padding(1rem) が担当。
   上の 0.75rem が「バーと入出力欄の間隔」。入出力欄の高さ計算（- 0.75rem）と必ず揃えること */
.layout-3col.l3-drawer #content {
  padding: 0.75rem 0 1rem;
  margin-bottom: 2rem;
}

/* リンク要素（page-common.css には無い設定）。詳細度は最低にして、他の指定を邪魔しない */
a {
  cursor: pointer;
  transition: all 0.2s ease;
  color: inherit;
  text-decoration: none;
}

/* ボタン要素（同上）。サイドバー開閉ボタン(.topbar-btn)は専用の指定があるので除外。
   :where() で詳細度を 0 にして、.dd-item の display:block などが従来どおり勝つようにする */
button:where(:not(.topbar-btn)) {
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

/* ===== このページ専用 ===== */

/* メインの左右配置 */
.main-container {
  display: flex;
  gap: 1.25rem;
  /* 上揃え */
  align-items: flex-start;
}

.editor-section {
  flex: 1;
  /* 長いURL等の中身がflexアイテムの最小幅を押し広げてしまうのを防ぐ（主にSafari対策） */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* テキストエリア共通 */
textarea,
.output {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  background: var(--c-bg);
  box-sizing: border-box;
  font-family: monospace;
  font-size: 0.9rem;
  overflow-y: auto;
  /* 改行できない長いURL等も強制的に折り返す */
  overflow-wrap: anywhere;
  line-height: 1.25;
    /* 左右で行間をそろえる */
}

/* 入力と出力の高さを固定 */
#markdown-input,
#html-output {
  height: calc(100vh - var(--l3-topbar-h, 3.5rem) - 0.75rem);
  height: calc(100dvh - var(--l3-topbar-h, 3.5rem) - 0.75rem);
  min-height: 18rem;
}

#html-output {
  white-space: pre-wrap;
}

/* 左側の設定エリア */
.settings-wrapper {
  display: flex;
  flex-direction: column;
  /* 設定エリア同士の間隔 */
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* 設定エリア（左下） */
.settings-area {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.settings-area label {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--c-text-sub);
}

.settings-area textarea {
  height: 80px;
  background: var(--c-bg-subtle);
}

/* 予備欄（迷ってるmdの避難用メモ） */
.draft-label {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--c-text-weak);
  margin: 0.6rem 0 0.25rem;
}

#draft-input {
  height: 70vh;
  background: #fffdf5;
}

/* CSSプリセット切り替えボタン */
.css-preset-buttons {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.css-preset-btn {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-sub);
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
}

.css-preset-btn.active {
  background: var(--c-brand-vivid);
  border-color: var(--c-brand-vivid);
  color: white;
}

.settings-help {
  font-size: 0.75rem;
  color: var(--c-text-sub);
  margin-bottom: 0.6rem;
}

.settings-help summary {
  cursor: pointer;
  font-weight: bold;
}

.settings-help ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

#wrapper-input {
  height: 55vh;
  font-family: monospace;
}

/* 他タブでの更新を知らせるバナー */
.sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--c-accent-light);
  border: 1px solid var(--c-accent);
  color: var(--c-accent-dark);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.sync-banner.hidden {
  display: none;
}

.sync-banner-buttons {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sync-banner button {
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
}

.btn-sync-reload {
  background: var(--c-accent);
  color: white;
}

.btn-sync-dismiss {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-sub);
}

/* 共通ボタン・タグ */
button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  font-weight: bold;
  font-size: 0.8rem;
}

/* 共通のボタンスタイル */
.btn-tag {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-sub);
  /* 左側に少し太めの線を入れて、色分けの目印にする */
  border-left-width: 0.25rem;
}

/* Markdown形式のボタン（控えめなグレー） */
.btn-md {
  border-left-color: var(--c-border);
}

/* HTML形式のボタン（鮮やかなブルー） */
.btn-html {
  border-left-color: var(--c-brand-vivid);
}

.btn-tag:hover {
  background: var(--c-bg-subtle);
}

.btn-copy {
  background: var(--c-accent);
  color: white;
  position: relative;
}

/* コピー完了のチェック表示。
   ボタンの中で文字とチェックを同じ位置に重ねておき、押したときだけ入れ替える（ボタンの幅は変わらない） */
.btn-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  visibility: hidden;
}

.btn-copy.copied .btn-label {
  visibility: hidden;
}

.btn-copy.copied .btn-done {
  visibility: visible;
}

.btn-preview {
  background: var(--c-brand-vivid);
  color: white;
}

button:hover {
  opacity: 0.8;
}

/* 目立つ操作ボタンは、opacity ではなく page-common.css の :root にある hover 用の色に変える
   （色の濃さを変えたいときは :root の --c-*-hover だけ直す） */
.btn-preview:hover,
.css-preset-btn.active:hover {
  background: var(--c-brand-vivid-hover);
  border-color: var(--c-brand-vivid-hover);
  opacity: 1;
}

.btn-copy:hover,
.btn-sync-reload:hover {
  background: var(--c-accent-hover);
  opacity: 1;
}

/* ===== 上部バー（site の .topbar に、このツールの操作ボタンを同居させる） =====
   背景（白）と下線は site 既定のまま。page-common.css の .layout-3col .topbar（高さ44px固定）を、
   「44px以上・折り返し可」に上書きする。詳細度を同じ(0,2,0)にして、後から読み込む本ファイルで勝たせる。 */
.layout-3col .topbar {
  /* 設定パネル(40)・ドロワー(40)より上。バー内のドロップダウンが隠れないように */
  z-index: 50;
  height: auto;
  /* 固定値。実測した高さは --l3-topbar-h に入れる（min-height に使うと縮まなくなる） */
  min-height: 44px;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
}

/* バー内のボタンを 32px に揃えて、バーを44pxに収める（左の開閉ボタンも32px）。
   旧 common.css 由来の min-height:3rem はここだけ小さくする。
   ドロップダウン内の項目(.dd-item)と設定パネル内のボタンは従来どおり 3rem のまま */
.layout-3col .topbar button:not(.topbar-btn):not(.dd-item) {
  min-height: 2rem;
  padding-block: 0.25rem;
}

/* 共通の button:hover { opacity: .8 } が、サイドバー開閉ボタンとツールチップまで薄くしないように */
.layout-3col .topbar-btn:hover {
  opacity: 1;
}

/* ページ名。page-common.css の h1 装飾（青い左線・背景・余白）を打ち消す */
.layout-3col .topbar h1 {
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
  white-space: nowrap;
}

.mode-badge {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--c-brand-vivid);
  border: 1px solid var(--c-brand-vivid);
  border-radius: 1rem;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
  background: var(--c-bg);
  cursor: pointer;
}

/* .mode-badge::after {
  content: ' ⇄';
} */

/* 切り替えられると分かる目印 */
.mode-badge:hover {
  background: var(--c-brand-vivid);
  color: white;
  opacity: 1;
}



.tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.right-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-sub);
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* 💡 記号の歯車だけを大きく、少し濃い色にする */
/* .btn-icon-symbol {
  font-size: 1.25rem;
  color: var(--c-text);
  line-height: 1;
} */



/* 文字ラベル付きの設定ボタンは、隣の Preview / Copy HTML と同じ文字サイズにそろえる */
#settings-btn {
  font-size: 0.8rem;
}

/* 設定パネルが開いている間の設定ボタン（閉じる操作はこのボタンの再クリックだけなので、開閉の状態が分かるようにする） */
.icon-btn[aria-expanded="true"] {
  background: var(--c-brand2-2);
  border-color: var(--c-brand-vivid);
}

.pin-btn {
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
}

.dd {
  position: relative;
}

.dd-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 15rem;
  max-height: calc(100vh - var(--l3-topbar-h, 3.5rem) - 1rem);
  /* version1 70vh */
  max-height: calc(100dvh - var(--l3-topbar-h, 3.5rem) - 1rem);
  /* version1 70vh */
  overflow-y: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.3rem;
}

.dd-panel.open {
  display: block;
}

.dd-title {
  font-size: 0.7rem;
  color: var(--c-text-weak);
  font-weight: bold;
  padding: 0.4rem 0.5rem 0.1rem;
}

.dd-sep {
  border-top: 1px solid var(--c-border);
  margin: 0.2rem 0;
}

.dd-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: normal;
  padding: 0.4rem 0.5rem;
}

.dd-item:hover,
.dd-item.current {
  background: var(--c-brand2-2);
  opacity: 1;
}

.dd-item.current::after {
  content: ' ✓';
}

/* ===== 右側の設定パネル（Preview用CSS / HTML） ===== */
.settings-panel {
  position: fixed;
  right: 0;
  top: var(--l3-topbar-h, 3.5rem);
  bottom: 0;
  width: min(440px, 92vw);
  z-index: 40;
  background: var(--c-bg);
  border-left: 1px solid var(--c-border);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.12);
  padding: 0.75rem;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.2s, visibility 0.2s;
}

.settings-panel.open {
  visibility: visible;
  transform: none;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-panel .settings-area textarea {
  height: 32vh;
  height: 32dvh;
}