@charset "UTF-8";

/* ===========================================
   placeholder_viewer.css
   Illustrator配置直後の選択状態を再現するプレースホルダー
   =========================================== */

:root{
  --ph-line: #4a90e2;   /* Illustratorの選択枠・バッテンの青 */
  --ph-handle-core: 9px; /* JS側 HANDLE_CORE と合わせる */
  --ph-handle-hit: 26px; /* JS側 HANDLE_HIT と合わせる */
}

.ph_box_multi .ph_handle{ display:block; }


/* コンテナの縁で画像をクリップ（はみ出しは非表示）。
   .ruled_section は ruler 側CSSで position:relative 済み。 */
.ruled_section[data-ruler-guide]{
  overflow:hidden;
}

.ph_box{
  position:absolute;
  top:0; left:0;
  transform-origin:center center;
  z-index:10;
  box-sizing:border-box;
  border:1px solid var(--ph-line);
  will-change:transform, width, height;
  cursor:move;
  /* 選択枠なので背景は透過。画像がその内側に敷かれる */
}

.ph_img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none; /* 画像自体はイベントを拾わない。掴むのは .ph_box */
}
/* 画像未設定（空フレーム）の間は非表示にして壊れ画像アイコンを防ぐ */
.ph_img:not([src]){ display:none; }

/* 複数エリア版：クロスフェード用。2枚の .ph_img を重ね、
   .is_shown が付いた方だけ opacity 1。transition-duration はJSで指定。 */
.ph_box_multi .ph_img{
  display:block;            /* :not([src]) の display:none を上書き */
  opacity:0;
  transition-property:opacity;
  transition-timing-function:ease;
}
.ph_box_multi .ph_img.is_shown{ opacity:1; }
.ph_box_multi .ph_img:not([src]){ display:block; } /* src無しでも重ねる（opacity0で不可視） */

/* 対角線バッテン */
.ph_cross{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}
.ph_cross line{
  stroke:var(--ph-line);
  stroke-width:1;
  vector-effect:non-scaling-stroke; /* 拡大しても線の太さを一定に */
}

/* ハンドル共通：見た目の□は ::before で描画し、
   要素自体は当たり判定(□＋回転余白)として一回り大きく取る */
.ph_handle{
  position:absolute;
  width:var(--ph-handle-hit);
  height:var(--ph-handle-hit);
  transform:translate(-50%, -50%);
  background:transparent;
  z-index:2;
}
.ph_handle::before{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:var(--ph-handle-core);
  height:var(--ph-handle-core);
  transform:translate(-50%,-50%);
  background:#fff;
  border:1px solid var(--ph-line);
  box-sizing:border-box;
}

/* 全ハンドル：機能あり。□内=リサイズ / □外=回転 */
.ph_handle_nw.is_active,
.ph_handle_se.is_active{ cursor:nwse-resize; }
.ph_handle_ne.is_active,
.ph_handle_sw.is_active{ cursor:nesw-resize; }
.ph_handle_n.is_active,
.ph_handle_s.is_active{ cursor:ns-resize; }
.ph_handle_e.is_active,
.ph_handle_w.is_active{ cursor:ew-resize; }

/* ---- デバッグ情報表示 #ph-info ---- */
#ph-info{
position: absolute;
z-index: 10;
left: 10px;
top: 35px;
right: auto;


width: fit-content;
height: fit-content;

font-size: 9px;
line-height:1.1;
color:#999;
white-space:nowrap;
}




#ph-info .ph-info-label{
display:inline-block;
margin: 0 3px 0 0;
padding: 0 0 0 0;
}


#ph-info .ph-info-val{
display:inline-block;
width: 60px;
text-align:left;
}

#ph-info .ph-info-val:last-child{
width: 28px;
}


/* スマホ終了
------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {


#ph-info{
position: fixed;
top: 35px;
bottom: auto;
left: 10px;

font-size: 10px;
line-height:1.0;
color: #fff;
white-space:nowrap;

mix-blend-mode: difference;
}

body.top_page #ph-info{
position: absolute;
top: 18px;
color: #999;
mix-blend-mode: normal;
}

}/*end PC*/