/* ファビコンメーカー ツール固有スタイル（スコープ: #app-faviconmaker） */

#app-faviconmaker .lead-custom { max-width: 640px; }

/* ドロップゾーン */
#app-faviconmaker .fav-drop {
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  border-color: var(--bs-border-color);
}
#app-faviconmaker .fav-drop:hover,
#app-faviconmaker .fav-drop.is-hot {
  border-color: var(--bs-primary);
  background-color: rgba(124, 90, 195, .08);
}
#app-faviconmaker .border-dashed { border-style: dashed !important; }

/* 追従プレビュー（プレビュー＋貼り付け用HTMLを一体で追従させる。
   高さがビューポートを超えたら内部スクロールにして、下端が見えなくなるのを防ぐ） */
@media (min-width: 992px) {
  #app-faviconmaker .tool-results-sticky {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* プレビュー（透過が分かるよう市松模様を敷く） */
#app-faviconmaker .fav-big,
#app-faviconmaker .fav-actualrow canvas {
  image-rendering: pixelated;      /* 実寸の見え方を正しく確認するため補間しない */
  border-radius: 4px;
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.22) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.22) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.22) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.22) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
#app-faviconmaker .fav-big {
  width: 200px; height: 200px;
  image-rendering: auto;           /* 大きい方はなめらかに */
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

/* ブラウザタブ見本 */
#app-faviconmaker .fav-tabmock {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem .5rem 0 0;
  padding: .4rem .4rem 0;
}
#app-faviconmaker .fav-tab {
  display: flex; align-items: center; gap: .5rem;
  max-width: 260px;
  padding: .45rem .6rem;
  background: var(--bs-body-bg);
  border-radius: .45rem .45rem 0 0;
  border: 1px solid var(--bs-border-color);
  border-bottom: none;
  color: var(--bs-body-color);
}
#app-faviconmaker .fav-tabtitle {
  font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
#app-faviconmaker .fav-tabx { font-size: .7rem; opacity: .55; }

/* HTMLスニペット */
#app-faviconmaker .fav-snippet {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: .4rem;
  padding: .75rem;
  font-size: .78rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

#app-faviconmaker .form-control-color { width: 3rem; height: 2.4rem; flex: 0 0 auto; }
/* アイコン色・ドット色は列いっぱいに広げたいので幅指定を打ち消す */
#app-faviconmaker .form-control-color.w-100 { width: 100% !important; }

/* フォント読込用のダミー（display:none だとフォントが要求されないので画面外へ逃がす） */
.fav-fontpreload {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* 元になるもの（4つになったので小さい画面では文字を詰める） */
#app-faviconmaker .fav-srcgroup .btn { padding-left: .25rem; padding-right: .25rem; font-size: .8rem; }

/* ---------- アイコン選択 ---------- */
#app-faviconmaker .fav-icongrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: .35rem;
  max-height: 240px;
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-body-bg);
}
#app-faviconmaker .fav-iconbtn {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  font-size: 1.25rem;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: .4rem;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
#app-faviconmaker .fav-iconbtn:hover { border-color: var(--bs-primary); background: rgba(124, 90, 195, .1); }
#app-faviconmaker .fav-iconbtn.is-on {
  border-color: var(--bs-primary);
  background: rgba(124, 90, 195, .18);
}
/* Material Symbols はリガチャ（合字）で字形になるので、グリッド内でも liga を有効にする */
#app-faviconmaker .fav-iconbtn .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal;
  font-size: 1.4rem; line-height: 1;
  letter-spacing: normal; text-transform: none;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ---------- ドット絵エディタ ---------- */
#app-faviconmaker .fav-pixwrap { display: flex; justify-content: center; }
#app-faviconmaker .fav-pixcanvas {
  width: 320px; max-width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: none;               /* ドラッグ塗りでページがスクロールしないように */
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.22) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.22) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.22) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.22) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#app-faviconmaker .fav-palette { display: flex; flex-wrap: wrap; gap: .3rem; }
#app-faviconmaker .fav-swatch {
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  cursor: pointer;
  padding: 0;
}
#app-faviconmaker .fav-swatch.is-on { outline: 2px solid var(--bs-primary); outline-offset: 1px; }