/* ShelvingOption4 itukiデスク 専用スタイル
 *
 * 配置: eccube4/app/Plugin/ShelvingOption4/Resource/assets/css/desk.css (正本)
 * 配布: sync_plugin_assets.sh が html/plugin/ShelvingOption4/assets/css/ にミラー
 * 参照: desk_panel.twig / desk_admin_panel.twig の先頭で <link> 読み込み
 */

/* ============================================================
 * デスクモード専用レイアウト調整
 * body.is-desk-product は desk_panel.twig の mounted hook で付与。
 * product-box__inner には既に position: relative が定義済み (style.css)。
 * ============================================================ */

/* view-switch__button をデスクモードでは 3D canvas (#product-simulator) の
 * 右下に配置する。desk_panel.twig の mounted hook で要素を
 * #product-simulator 内に移動した後、この位置指定が効く。
 * #product-simulator は style.css L3983 で 700x700 / position:relative に
 * 定義されているので、絶対配置の親として機能する。
 * 棚のデフォルト値 `bottom: 300px; right: 486px` は .simulation-main 全体
 * 基準なので、デスクの短いレイアウトでは位置が狂うため上書きする。 */
body.is-desk-product .simulation-main #product-simulator .view-switch__button {
    position: absolute;
    top: auto;
    left: auto;
    bottom: 15px;
    right: 15px;
    z-index: 10;
}

/* ============================================================
 * デスク用タブバー (.desk-tab-list)
 *
 * EC-CUBE の .select__list は script.js の jQuery ハンドラが
 * `.simulation-main .panel-middle__box .select__list` に登録されており、
 * Vue の :class バインドと競合する。desk はクラス名を変えて回避し、
 * 表示切替を Vue の v-show で直接制御する。
 * CSS は EC-CUBE の .select__list と同じ見た目を再現。
 * ============================================================ */

/* デスクトップ: タブバー非表示（全項目が常に表示される） */
.simulation-main .panel-main .desk-tab-list {
    display: none;
}

/* No.12: SP専用ガイドテキスト（タブバーの直上）。PC では非表示 */
.simulation-main .panel-main .desk-tab-note {
    display: none;
}
@media screen and (max-width: 1000px) {
  .simulation-main .panel-main .desk-tab-note {
    display: block;
    margin: 0 0 10px;
    text-align: center;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .simulation-main .panel-main .desk-tab-note {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 1000px) {
  /* モバイル (〜1000px): タブバー表示。棚の .select__list CSS (style.css L4628〜) と同一 */
  .simulation-main .panel-main .desk-tab-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 -30px 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .simulation-main .panel-main .desk-tab-list::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important;
  }
  .simulation-main .panel-main .desk-tab-list ul {
    position: relative; display: inline-block; white-space: nowrap; letter-spacing: -0.4em;
    list-style: none; padding: 0; margin: 0;
  }
  .simulation-main .panel-main .desk-tab-list ul li {
    display: inline-block; letter-spacing: 0; padding: 0 5px;
  }
  .simulation-main .panel-main .desk-tab-list ul li:first-child { padding-left: 20px; }
  .simulation-main .panel-main .desk-tab-list ul li:last-child { padding-right: 20px; }
  .simulation-main .panel-main .desk-tab-list ul li a {
    display: inline-block; padding: 2px 10px; border-radius: 4px; cursor: pointer;
    text-decoration: none; color: inherit;
  }
  .simulation-main .panel-main .desk-tab-list ul li a.active {
    color: #ffffff; background-color: #898989;
  }
}
@media screen and (max-width: 767px) {
  /* スマホ (〜767px): 棚と同じ font-size: 1.4rem (style.css L4781 と同一) */
  .simulation-main .panel-main .desk-tab-list {
    margin: 0 -20px 15px;
    font-size: 1.4rem;
  }
  .simulation-main .panel-main .desk-tab-list ul li:first-child { padding-left: 15px; }
  .simulation-main .panel-main .desk-tab-list ul li:last-child { padding-left: 15px; }
}

/* モバイル幅 (max-width: 1000px) では棚と同じタブ切替 UI を使う。
 * desk-panel-front の Vue template が activeTab を管理し、各 <li.dfp-row> に
 * :class="{'is-active-tab': activeTab === '...'}" を付与する。
 * 以下の SP 専用ルールでアクティブ tab の li だけ表示する。
 * PC では .desk-tab-list が display:none かつ全 li が flex で並ぶため
 * 現状の縦並びレイアウトに一切影響しない。 */
/* 「引出」タブは SP のタブ切替専用 (棚 SP の item-drawer 相当)。
 * PC では機能しても意味がないので非表示。 SP モーダル時は下の @media で
 * is-active-tab のときだけ display: flex に切り替わる。 */
.dfp-root .dfp-list > li.dfp-row-drawer { display: none; }

@media screen and (max-width: 1000px) {
  .dfp-root .dfp-list > li.dfp-row { display: none; }
  /* タブで項目が分かるので、各 row 内の名前ラベルは隠す (棚も同様) */
  .dfp-root .dfp-list > li.dfp-row .dfp-name { display: none; }
  /* アクティブ行は中央寄せに統一 (棚の SP UI と同じ) */
  .dfp-root .dfp-list > li.dfp-row.is-active-tab {
    display: flex;
    justify-content: center;
  }
  /* デフォルト (ボタン群: スタイル / 奥行き / カラー / ハンドル /
     扉の開き方 / 配線孔 / バックパネル): dfp-value 自身を中央寄せ */
  .dfp-root .dfp-list > li.dfp-row.is-active-tab .dfp-value {
    flex: 0 1 auto;
    width: auto;
    text-align: center;
    justify-content: center;
  }
  .dfp-root .dfp-list > li.dfp-row.is-active-tab .dfp-icon-pair,
  .dfp-root .dfp-list > li.dfp-row.is-active-tab .dfp-seg {
    justify-content: center;
  }
  /* スライダー系 (幅 / 列数 / 机の位置): 棚と同じく横幅いっぱい。
     dfp-value をフル幅にして内部の input[type=range] が伸びるようにする */
  .dfp-root .dfp-list > li.dfp-row.is-active-tab.dfp-row-slider .dfp-value,
  .dfp-root .dfp-list > li.dfp-row.is-active-tab.dfp-row-pos .dfp-value {
    flex: 1 1 auto;
    width: 100%;
  }
  .dfp-root .dfp-list > li.dfp-row.is-active-tab .dfp-sld {
    justify-content: center;
  }
  /* 机の位置の ticks (1 / 2 / 3 / 4 …) はスライダーの目盛りなので、
     スライダー幅に対して space-between で両端寄せ (元の挙動を維持)。
     PC 側 .dfp-ticks は grid-column:3 の 1fr 列で space-between。
     SP でも同じ振る舞いを保持する。 */
}

/* ============================================================
 * デスクセル ホバーポップアップ (desk_cell_popup.twig)
 * ============================================================ */
.desk-cp-root {
    position: fixed;
    z-index: 99999;
    width: 220px;
    padding: 15px 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 3px 20px rgba(74, 74, 74, 0.16);
    font-size: 13px;
}
.desk-cp-root .title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #3C3C3C;
}
.desk-cp-root .custom__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.desk-cp-root .custom__list > li { margin-top: 10px; }
.desk-cp-root .custom__list > li:first-child { margin-top: 0; }
.desk-cp-root .custom__list .name {
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: #555;
}
.desk-cp-root .value.switch { font-size: 1.3rem; }
.desk-cp-root .value.switch ul {
    display: table;
    width: 100%;
    max-width: 240px;
    background-color: #EDEDED;
    border-radius: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.desk-cp-root .value.switch li {
    position: relative;
    display: table-cell;
    text-align: center;
}
.desk-cp-root .value.switch li + li:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 1px;
    height: calc(100% - 20px);
    background-color: #BABABA;
}
.desk-cp-root .value.switch li label {
    position: relative;
    display: block;
    padding: 6px 0;
    color: #BABABA;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}
.desk-cp-root .value.switch li label.active {
    background-color: #FFFFFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    color: #3C3C3C;
    font-weight: 700;
}
.desk-cp-root .value.range {
    display: flex;
    align-items: center;
    gap: 8px;
}
.desk-cp-root .value.range input[type="range"] { flex: 1; }
.desk-cp-root .value.range .val {
    min-width: 52px;
    text-align: right;
    color: #3C3C3C;
}

.caption {
  color: #888;
  font-size: 14px;
  font-weight: normal;
}
/* ====================================================================
 * itukiデスク フロント構成パネル — 正本: 設計/仕様/正解.png
 *   シンプル・装飾最小（区切り線なし / 通常フォント 14px）
 * ==================================================================== */
.dfp-root {
  font-size: 14px;
  color: #3C3C3C;
  background: #fff;
  padding: 6px 0;
}
.dfp-root .dfp-list { list-style: none; padding: 0; margin: 0; }
/* 引出タブ用ガイドテキスト (3D ビューでセルをタップする案内) */
.dfp-root .dfp-guide {
  margin: 0;
  font-size: 14px;
  color: #555;
  text-align: center;
  line-height: 1.6;
}
.dfp-root .dfp-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
}
.dfp-root .dfp-name {
  flex: 0 0 84px;
  font-size: 14px;
  color: #3C3C3C;
  font-weight: normal;
}
.dfp-root .dfp-value { flex: 1 1 auto; min-width: 0; }

/* スタイル / ハンドル: 丸アイコンペア */
.dfp-root .dfp-icon-pair { display: flex; gap: 14px; justify-content: flex-end; }
.dfp-root .dfp-icon-btn {
  background: transparent; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: normal;
}
.dfp-root .dfp-icon-btn .circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: #ECECEC;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; box-sizing: border-box;
}
.dfp-root .dfp-icon-btn img,
.dfp-root .dfp-icon-btn svg {
  width: 34px; height: 34px; object-fit: contain; display: block;
}
.dfp-root .dfp-icon-btn.small .circle { width: 48px; height: 48px; }
.dfp-root .dfp-icon-btn .cap { font-size: 12px; color: #555; font-weight: normal; }
.dfp-root .dfp-icon-btn.active .circle { border-color: #1C1C1C; }
.dfp-root .dfp-icon-btn.disabled { opacity: 0.35; cursor: not-allowed; }

/* No.25 ハンドル: 棚 (.simulation-main .panel-main .custom__list .value.list) と同一見た目を再現。
   画像そのものがボタン。40px の透明→黒枠の丸 span、灰色背景なし、画像が span を満たす。 */
.dfp-root .dfp-row-handle .value.list ul {
  display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center;
  margin: -10px -5px 0; padding: 0; list-style: none;
}
.dfp-root .dfp-row-handle .value.list li { width: 40px; margin: 10px 5px 0; }
.dfp-root .dfp-row-handle .value.list li label {
  padding: 0; display: block; cursor: pointer; font-size: 1.3rem; text-align: center; color: #A8A8A8;
}
.dfp-root .dfp-row-handle .value.list li label span {
  position: relative; overflow: hidden; display: block;
  border-radius: 50%; border: 2px solid transparent;
}
.dfp-root .dfp-row-handle .value.list li label span img { display: block; width: 100%; height: auto; }
.dfp-root .dfp-row-handle .value.list li label.active { color: #000000; }
.dfp-root .dfp-row-handle .value.list li label.active span { border-color: #000000; }

/* スライダー（-/+ + 値バブル） */
.dfp-root .dfp-slider {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  width: 100%;
}
.dfp-root .dfp-slider .step {
  width: 28px; height: 28px; border-radius: 50%;
  background: #ECECEC; border: none; color: #444;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.dfp-root .dfp-slider .step:disabled { opacity: 0.35; cursor: not-allowed; }
.dfp-root .dfp-slider .bubble-wrap { position: relative; }
.dfp-root .dfp-slider .bubble {
  position: absolute; top: -22px; transform: translateX(-50%);
  font-size: 14px; color: #3C3C3C; white-space: nowrap;
  pointer-events: none; font-weight: normal;
}
.dfp-root .dfp-slider input[type="range"],
.dfp-root .dfp-pos-range {
  width: 100%; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; height: 22px;
}
.dfp-root .dfp-slider input[type="range"]::-webkit-slider-runnable-track,
.dfp-root .dfp-pos-range::-webkit-slider-runnable-track {
  height: 2px; background: #D0D0D0; border-radius: 1px;
}
.dfp-root .dfp-slider input[type="range"]::-moz-range-track,
.dfp-root .dfp-pos-range::-moz-range-track {
  height: 2px; background: #D0D0D0; border-radius: 1px;
}
.dfp-root .dfp-slider input[type="range"]::-webkit-slider-thumb,
.dfp-root .dfp-pos-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #999; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  margin-top: -7px; cursor: pointer;
}
.dfp-root .dfp-slider input[type="range"]::-moz-range-thumb,
.dfp-root .dfp-pos-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #999; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer;
}

/* 机の位置: pos-line と ticks-wrap を同一 grid template で並べる */
.dfp-root .dfp-pos-line,
.dfp-root .dfp-ticks-wrap {
  display: grid;
  grid-template-columns: 44px 28px 1fr 28px;
  gap: 10px;
  align-items: center;
}
.dfp-root .dfp-pos-line { margin: 6px 0 2px; }
.dfp-root .dfp-pos-line .pos-label { font-size: 14px; color: #3C3C3C; }
.dfp-root .dfp-ticks-wrap { margin-bottom: 6px; }
.dfp-root .dfp-ticks {
  grid-column: 3;
  display: flex; justify-content: space-between;
  font-size: 12px; color: #aaa;
  padding: 0 8px;
}
.dfp-root .dfp-ticks span.on { color: #1C1C1C; font-weight: 600; }

/* セグメント（pill 風トグル） */
.dfp-root .dfp-row .dfp-segmented {
  display: inline-flex; background: #ECECEC;
  border-radius: 22px; padding: 3px; margin-left: auto;
}
.dfp-root .dfp-segmented button {
  border: none; background: transparent;
  padding: 6px 16px; font-size: 14px; color: #888;
  cursor: pointer; border-radius: 18px; font-weight: normal; white-space: nowrap;
}
.dfp-root .dfp-segmented button.active {
  background: #FFFFFF; color: #1C1C1C; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* カラー: ピル型ボタン */
.dfp-root .dfp-pill {
  background: #fff; border: 1px solid #D0D0D0; color: #1C1C1C;
  font-size: 14px; padding: 8px 22px; border-radius: 22px;
  cursor: pointer; font-weight: normal;
}

/* control 右寄せ（スタイル / 机の位置 以外。ハンドルは SVG 版 UI から
 * 文字 dfp-seg に置き換わったので、他のセグメント (奥行き等) と揃えて右寄せ） */
.dfp-root .dfp-row:not(.dfp-row-style):not(.dfp-row-pos) .dfp-value {
  display: flex; justify-content: flex-end;
}
.dfp-root .dfp-row-pos .dfp-value { width: 100%; }

/* admin 用 価格ヘッダ */
.dfp-root .dfp-admin-price {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0 14px;
}
.dfp-root .dfp-admin-price .lbl { color: #888; font-size: 14px; }
.dfp-root .dfp-admin-price .val { font-size: 22px; font-weight: 700; color: #1C1C1C; }

/* ====================================================================
 * フロント商品ページ デスク構成パネル — オーダーシェルフ（棚）準拠リスタイル
 *
 *   対象 : detail_2.twig から include される desk_panel.twig
 *          ルート要素 <div id="ShelvingOption" class="dfp-root">
 *   方針 : スライダー本体は EC-CUBE グローバル input[type="range"]
 *          (style.css L151〜) をそのまま継承させ、棚（オーダーシェルフ）
 *          の設定変更部と完全に同一の見た目にする。
 *          太さ・トラック・つまみは一切上書きしない。
 *          +/- ボタン・セグメント・カラーボタン・文字サイズ(16px)・余白も
 *          棚 (.value.switch / .item-color .value.list .btn / .step-slider)
 *          を再現する。
 *   限定 : 管理画面パネル (#DeskOption) に影響させないため、全ルールを
 *          #ShelvingOption スコープに閉じる。
 * ==================================================================== */
#ShelvingOption.dfp-root { font-size: 16px; }
#ShelvingOption .dfp-name { flex-basis: 100px; font-size: 16px; }
#ShelvingOption .dfp-row { padding: 0; }
#ShelvingOption .dfp-row + .dfp-row { margin-top: 15px; }

/* ---- スライダー行（幅 / 列数） ---- */
#ShelvingOption .dfp-row-slider { align-items: flex-start; }
#ShelvingOption .dfp-row-slider .dfp-name { padding-top: 28px; }
#ShelvingOption .dfp-row-slider .dfp-value { display: block; }
#ShelvingOption .dfp-sld { width: 100%; }
#ShelvingOption .dfp-sld-val {
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: #3C3C3C;
  font-weight: normal;
}
#ShelvingOption .dfp-sld-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* range 本体: グローバル input[type="range"] を継承（棚と同一）。
 * 太さ・トラック・つまみは上書きしない。レイアウト幅のみ指定。 */
#ShelvingOption .dfp-sld-range {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* +/- ボタン（棚 icon_minus.svg / icon_plus.svg と同一の円アイコン 28px） */
#ShelvingOption .dfp-step {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ShelvingOption .dfp-step svg { width: 28px; height: 28px; display: block; }
#ShelvingOption .dfp-step:disabled { cursor: default; opacity: 1; }

/* ---- 机の位置（デスク固有レイアウト・スライダーは棚準拠） ---- */
#ShelvingOption .dfp-row-pos { align-items: flex-start; }
#ShelvingOption .dfp-row-pos .dfp-name { padding-top: 6px; }
#ShelvingOption .dfp-pos-line {
  grid-template-columns: 40px 28px 1fr 28px;
  gap: 4px;
  margin: 0 0 2px;
}
/* 「N列目」ラベルは grid 列(40px)いっぱいに広げ右寄せする。
   ラベルに固定 width を付けると grid セルより狭くなり − ボタンとの間に
   余分な隙間ができるため、width は付けず text-align:right で詰める。 */
#ShelvingOption .dfp-pos-line .pos-label {
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}
/* No.31: 目盛り(数字)をスライダーのつまみ位置に合わせる。スライダー行 .dfp-sld-line は
   [±28px][gap8][range][gap8][±28px]（flex, gap8）。目盛りも同じ 28px/1fr/28px・gap8 の
   グリッドにし、目盛り本体(.dfp-ticks)を range と同じ 2列目に置く。旧 grid は先頭に余分な
   40px 列があり、数字が右へずれていた（カーソル停止位置と不一致）。 */
#ShelvingOption .dfp-ticks-wrap {
  grid-template-columns: 28px 1fr 28px;
  gap: 8px;
  margin-bottom: 8px;
}
#ShelvingOption .dfp-ticks {
  grid-column: 2;
}

/* ---- セグメント（奥行き / 扉の開き方 / 配線孔 / バックパネル） ----
 *   棚 .value.switch（#EDEDED・角丸10px・1px 区切り線・白アクティブ）を再現 */
#ShelvingOption .dfp-seg {
  display: inline-flex;
  background: #EDEDED;
  border-radius: 10px;
  margin-left: auto;
}
#ShelvingOption .dfp-seg button {
  position: relative;
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-size: 16px;
  color: #BABABA;
  cursor: pointer;
  font-weight: normal;
  white-space: nowrap;
}
#ShelvingOption .dfp-seg button + button::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: calc(100% - 20px);
  background-color: #BABABA;
}
#ShelvingOption .dfp-seg button.active {
  background: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  color: #3C3C3C;
}
#ShelvingOption .dfp-seg button.active::before,
#ShelvingOption .dfp-seg button.active + button::before { display: none; }

/* ---- カラー選択ボタン（棚 .item-color .value.list .btn 準拠） ---- */
#ShelvingOption .dfp-pill {
  margin: 0;
  padding: 10px 0;
  width: 160px;
  text-align: center;
  font-size: 16px;
  color: #000;
  background: #fff;
  border: none;
  border-radius: 7px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

/* control 右寄せ（スタイル / 机の位置 / スライダー行 以外。ハンドルは
 * SVG 版から文字 dfp-seg に置き換わったので他セグメントと揃えて右寄せ） */
#ShelvingOption .dfp-row:not(.dfp-row-style):not(.dfp-row-pos):not(.dfp-row-slider) .dfp-value {
  display: flex;
  justify-content: flex-end;
}

/* ---- スタイル選択（画像そのものをボタン化し、大きく表示） ---- */
#ShelvingOption .dfp-row-style .dfp-style-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#ShelvingOption .dfp-style-img {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
}
#ShelvingOption .dfp-style-img.active { border-color: #1C1C1C; }
#ShelvingOption .dfp-style-img.disabled { opacity: 0.35; cursor: not-allowed; }
#ShelvingOption .dfp-row-style .cap { font-size: 12px; color: #555; }

/* ====================================================================
 * カラー選択モーダル
 *   desk_panel.twig が棚 (detail_2.twig の .custom__list .item-color) と
 *   同一マークアップを描画し、テーマ CSS (style.css) でそのまま装飾させる
 *   ＝ 棚のダイアログと完全に同一。開閉は body.is-color-modal で棚と同じ。
 *   ここでは閉じている間にホストを非表示にしてレイアウトを取らせないだけ。
 * ==================================================================== */
.dfp-cm-host { list-style: none; margin: 0; padding: 0; }
/* カラーモーダル閉じる × ボタン (style.css の .is-close-btn と同等の見た目)。
 * is-close-btn は jQuery $('.is-modal-open, .is-close-btn').on('click') が
 * Vue の addEventListener と二重発火して toggle が打ち消し合う問題があるため、
 * 独自クラス dfp-cm-close に切り替えた (CSS は同等)。 */
.dfp-cm-host .item-color .value.list .dfp-cm-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 40px;
  right: 40px;
  cursor: pointer;
}
.dfp-cm-host .item-color .value.list .dfp-cm-close::before,
.dfp-cm-host .item-color .value.list .dfp-cm-close::after {
  content: "";
  padding: 0;
  width: 40px;
  height: 1px;
  background: #a8a8a8;
  position: absolute;
  top: 20px;
  right: 0;
}
.dfp-cm-host .item-color .value.list .dfp-cm-close::before { transform: rotate(45deg); }
.dfp-cm-host .item-color .value.list .dfp-cm-close::after  { transform: rotate(-45deg); }
body:not(.is-color-modal) .dfp-cm-host { display: none; }
/* 棚 SP CSS の `.simulation-main .panel-main .custom__list > li { display: none; li.active { block } }`
 * が機の dfp-cm-host 内 li.item-color にも適用される (custom__list class が両方に付くため)。
 * 機側は Vue 制御で active を付けないので、SP でモーダル開いても中身が表示されなくなる。
 * dfp-cm-host 配下の item-color は常時 block にして上書き。
 * 親 .dfp-cm-host 自体が body.is-color-modal の時のみ表示されるので、 cascade で
 * モーダル時のみ正しく表示される。 */
.dfp-cm-host > li.item-color { display: block !important; }

/* ====================================================================
 * 管理画面「オーダー初期値設定」 デスク用パネル (#DeskOption)
 *   admin/desk_admin_panel.twig の Vue コンポーネント。
 *   棚の管理画面 (shelving_option.twig) に準拠し、幅・列数・机の位置を
 *   数値入力 + スライダーで設定できる管理画面向けフォーム。
 *   desk_admin_panel.twig は #app(Vue ルート)内で include されるため
 *   <style> を書けない（Vue が除去）。CSS は <link> で残る本ファイルに置く。
 *   #DeskOption 限定スコープ → フロント商品ページ(#ShelvingOption)に無影響。
 * ==================================================================== */
#DeskOption.dao-root { font-size: 13px; color: #333; line-height: 1.5; }
#DeskOption, #DeskOption *, #DeskOption *::before, #DeskOption *::after { box-sizing: border-box; }
#DeskOption .dao-list { list-style: none; padding: 0; margin: 0; }
#DeskOption .dao-price {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0 12px; border-bottom: 1px solid #ccc; margin-bottom: 16px;
}
#DeskOption .dao-price-lbl { font-size: 13px; color: #888; }
#DeskOption .dao-price-val { font-size: 20px; font-weight: 700; color: #3c3c3c; }
#DeskOption .dao-block { margin-bottom: 16px; }
#DeskOption .dao-label {
  font-size: 13px; font-weight: 700; color: #525263; margin-bottom: 6px;
}
#DeskOption .dao-unit { font-weight: normal; color: #999; font-size: 11px; }
#DeskOption .dao-numrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#DeskOption .dao-num {
  width: 88px; height: 32px; padding: 4px 8px; margin: 0;
  border: 1px solid #ccc; border-radius: 4px; font-size: 14px; color: #333;
  background: #fff;
}
#DeskOption .dao-num-sm { width: 60px; }
#DeskOption .dao-hint { font-size: 11px; color: #aaa; }
#DeskOption .dao-range { width: 100%; margin: 2px 0 0; display: block; }
#DeskOption .dao-range-inline { flex: 1 1 auto; min-width: 0; margin: 0; }
#DeskOption .dao-posrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#DeskOption .dao-posrow:last-child { margin-bottom: 0; }
#DeskOption .dao-pos-lbl { font-size: 12px; color: #888; flex: 0 0 40px; }
#DeskOption .dao-pos-suffix { font-size: 12px; color: #888; flex: 0 0 auto; }
#DeskOption .dao-coltag {
  flex: 0 0 auto; font-size: 11px; color: #888;
  border: 1px solid #ddd; border-radius: 3px; padding: 1px 5px; line-height: 1.4;
}
#DeskOption .dao-coltag.open { color: #5b9bd5; border-color: #5b9bd5; }
#DeskOption .dao-cellcol {
  border: 1px solid #e0e0e0; border-radius: 4px;
  padding: 8px 10px; margin-bottom: 8px;
}
#DeskOption .dao-cellcol-hd {
  font-size: 12px; font-weight: 700; color: #525263; margin-bottom: 6px;
}
#DeskOption .dao-cellrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
#DeskOption .dao-cellrow:last-child { margin-bottom: 0; }
#DeskOption .dao-cell-lbl {
  flex: 0 0 76px; font-size: 11px; color: #888;
}
#DeskOption .dao-btn-sm { min-width: 0; padding: 4px 8px; font-size: 12px; }
#DeskOption .dao-note {
  margin-top: 6px; font-size: 11px; color: #888; line-height: 1.5;
}
#DeskOption .dao-note strong { color: #d9534f; font-weight: 700; }
#DeskOption .dao-btnset { display: flex; flex-wrap: wrap; gap: 6px; }
#DeskOption .dao-btn {
  min-width: 56px; padding: 6px 12px; margin: 0;
  border: 1px solid #ccc; border-radius: 4px; background: #fff;
  font-size: 13px; color: #525263; cursor: pointer; line-height: 1.4;
}
#DeskOption .dao-btn:hover:not(:disabled) { background: #f5f5f5; }
#DeskOption .dao-btn.active {
  border-color: #5b9bd5; background: #5b9bd5; color: #fff; font-weight: 700;
}
#DeskOption .dao-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#DeskOption .dao-colors { display: flex; flex-wrap: wrap; gap: 6px 8px; }
/* No.3: スウォッチごとに色名を表示（縦並び: 画像の下に名前）。 */
#DeskOption .dao-swatch {
  margin: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 64px; text-align: center;
  border: 2px solid transparent; border-radius: 3px;
}
#DeskOption .dao-swatch img {
  width: 38px; height: 38px; object-fit: cover; display: block; opacity: 0.5;
}
#DeskOption .dao-swatch.active { border-color: #333; }
#DeskOption .dao-swatch.active img { opacity: 1; }
#DeskOption .dao-swatch input { display: none; }
#DeskOption .dao-swatch-name {
  font-size: 10px; line-height: 1.2; color: #555; word-break: break-all;
}
#DeskOption .dao-swatch.active .dao-swatch-name { color: #111; font-weight: bold; }