/* パッケージ商品ページの左カラム。
   ★.kdw-pdp__gallery は base.css で position:sticky; top:78px。中身が画面より高くなると
     「上端が 78px に達した時点で止まる」ため、下端が二度と画面に入らなくなる。
     いまの左カラムが短い（納期カレンダーだけ）から成立していた設定なので、ここでは外す。
   ★詳細度はテーマ（0,1,0）を上回る必要がある。body クラスと組んで (0,2,0) にする。 */
body.kdw-has-pkg-visual .kdw-pdp__gallery { position: static; }

.kdw-pkgv { margin: 0 0 16px; }
.kdw-pkgv-fig { margin: 0; padding: 0; }
.kdw-pkgv-cap { font-size: 13px; font-weight: 600; color: #5a4a30; margin: 0 0 6px; }
.kdw-pkgv-stage { border: 1px solid #e6ded0; border-radius: 10px; background: #fffdf9;
                  padding: 10px; min-height: 210px; }
.kdw-pkgv-stage svg { display: block; width: 100%; height: auto; }
/* 最初の寸法が来るまでの案内文。stage の min-height と揃えて空枠に見せない。 */
.kdw-pkgv-placeholder { margin: 0; padding: 84px 8px; text-align: center;
                        font-size: 12px; color: #9a8d74; line-height: 1.6; }
/* ★スマホでの3Dドラッグ回転。touch-action:none が無いと、指で引いた瞬間に
   ブラウザがスクロールとして処理してしまい pointercancel でポインタを奪われるため、
   回転が数十pxで止まってページが流れる。preventDefault() ではなく CSS で止める
   （pointerdown 後の preventDefault は iOS Safari では手遅れになりうる）。 */
.kdw-pkgv-stage canvas { touch-action: none; }
.kdw-pkgv-note { margin: 6px 0 0; font-size: 12px; color: #7a6a52; line-height: 1.6; }

/* 左カラムへ移した展開図。左は 0.82fr で右より狭いので、高さの上限を右カラム前提の
   230px（kodawari-package-shape.php の styles()）から下げる。詳細度は (0,2,0)。 */
body.kdw-has-pkg-visual .kdw-pdp__gallery .kps-pv { margin: 0 0 16px; }
body.kdw-has-pkg-visual .kdw-pdp__gallery .kps-dieline { max-height: 190px; }

.kdw-pkgv-3d { display: block; width: 100%; margin: 8px 0 0; padding: 9px 12px;
               font-size: 13px; font-weight: 700; color: #e6007e; cursor: pointer;
               background: #fff; border: 1px solid #e6007e; border-radius: 999px; }
.kdw-pkgv-3d:hover { background: #fff5fa; }
.kdw-pkgv-3d:disabled { color: #c9a9bf; border-color: #e8c9db; cursor: default; background: #fff; }
.kdw-pkgv-3d:disabled:hover { background: #fff; }
.kdw-pkgv-3dmsg { margin: 6px 0 0; font-size: 12px; color: #7a6a52; line-height: 1.6; }

.kdw-pkgv-uses { margin: 16px 0 0; }
.kdw-pkgv-uses-h { font-size: 13px; font-weight: 600; color: #5a4a30; margin: 0 0 6px; }
.kdw-pkgv-uses-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
                      gap: 8px; padding: 0; margin: 0; }
.kdw-pkgv-uses-list li { margin: 0; text-align: center; }
.kdw-pkgv-uses-list img { width: 100%; height: auto; border-radius: 8px; display: block; }
.kdw-pkgv-uses-list span { display: block; margin-top: 4px; font-size: 11px; color: #6b5b40; }
.kdw-pkgv-uses-note { margin: 6px 0 0; font-size: 11px; color: #9a8d74; }