@charset "UTF-8";

/* ===========================================
   text_frame_viewer.css
   Illustratorのエリア内文字（テキストフレーム）を再現。
   選択枠 + 8ハンドル（四隅=比率非固定リサイズ / 辺中央=単軸リサイズ / □外=回転）。
   ダブルクリックで編集モード、シングルは選択。
   placeholder_viewer.css の見た目・変数を踏襲。
   =========================================== */

:root{
  --tf-line: #5A7FF7;   /* Illustratorの選択枠の青 */
  --tf-handle-core: 7px;   /* JS側 HANDLE_CORE と合わせる */
  --tf-handle-hit: 26px;   /* JS側 HANDLE_HIT と合わせる */
}

/* 座標基準コンテナ。ruler側で position:relative 済みなら不要だが単体でも効くように。 */
.ruled_section[data-text-frame]{
  overflow:hidden;
}

.tf_box{
  position:absolute;
  z-index: 998;
  top: 0;
  left: 0;
  transform-origin:center center;

  box-sizing:border-box;
  border:1px solid var(--tf-line);
  will-change:transform, width, height;
  cursor:move;
  background:transparent;
}

/* 選択中だけ枠・ハンドルを見せる。非選択時は枠のみ薄く（イラレのオブジェクト境界風） */
.tf_box:not(.is_selected):not(.is_editing){
  border-color:transparent;
}
.tf_box:not(.is_selected):not(.is_editing) .tf_handle,
.tf_box:not(.is_selected):not(.is_editing) .tf_cross,
.tf_box:not(.is_selected):not(.is_editing) .tf_baselines,
.tf_box:not(.is_selected):not(.is_editing) .tf_out_point,
.tf_box:not(.is_selected):not(.is_editing) .tf_center_point{
  display:none;
}

/* 編集中・リサイズ中は選択マーク（8ハンドル・アウトポート・中心点）を全部隠す。終了で復帰。 */
.tf_box.is_editing .tf_handle,
.tf_box.is_editing .tf_out_point,
.tf_box.is_editing .tf_center_point,
.tf_box.is_resizing .tf_handle,
.tf_box.is_resizing .tf_out_point,
.tf_box.is_resizing .tf_center_point{
  display:none;
}

/* 回転中はアンダーライン（ベースライン）・ハンドル・アウトポート・中心点を全部隠す。 */
.tf_box.is_rotating .tf_handle,
.tf_box.is_rotating .tf_out_point,
.tf_box.is_rotating .tf_center_point,
.tf_box.is_rotating .tf_baselines{
  display:none;
}
/* 回転中はボックスの枠線も消す */
.tf_box.is_rotating{
  border-color:transparent;
}

/* 編集中はカーソルをテキスト用に。移動カーソルを消す */
.tf_box.is_editing{
  cursor:default;
}

/* ---- テキスト本体（エリア内文字） ---- */
/*上書きcss別途ある*/
.tf_text{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:0px;/*テキストボックスに対して*/

  overflow:hidden;              /* エリアからあふれた行は隠す（イラレのオーバーフロー） */
  outline:none;
  border:none;
  background:transparent;


  color:#fff;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:break-word;

  cursor:text;
  /* 非編集時はテキスト選択・キャレットを出さない */
  user-select:none;
  -webkit-user-select:none;
}

/* 編集モードのみ実際に編集可能に見せる */
.tf_box.is_editing .tf_text{
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}

/* リサイズ中はテキストの色を枠と同じ水色にする */
.tf_box.is_resizing .tf_text,
.tf_box.is_rotating .tf_text{
  color:var(--tf-line);
}

/* テキスト選択時のハイライトはこのテキストボックス限定（黒地＋白文字）。
.tf_text 配下にスコープしているので、ページ全体の ::selection には影響しない。 */
.tf_text ::selection{
  background:#fff;
  color:#000;
}
.tf_text::selection{
  background:#fff;
  color:#000;
}
/* 非編集時はテキストがドラッグ移動を邪魔しないよう、イベントは枠が拾う */
.tf_box:not(.is_editing) .tf_text{
  pointer-events:none;
}

/* ---- ベースライン（各行の下の水色下線）＋中央ポイント ---- */
.tf_baselines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.tf_baseline{
  position:absolute;
  height:0;
  border-top:1px solid var(--tf-line);
}
/* ボックス中心の点 */
.tf_center_point{
  position:absolute;
  top:50%;
  left:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--tf-line);
  box-sizing:border-box;
  z-index:3;
}
/* 右辺中央の外に置くアウトポート表示：□の右端 ── ●
   線・丸ともに要素の中心を縦中央に合わせ、手動のpx補正を使わない。
   JS が top = ボックス縦中央 を設定し、translateY(-50%) で中心を合わせる。 */
.tf_out_point{
  position:absolute;
  left:calc(100% + 3px);   /* □(7px)の右端に密着させて線を始める */
  top:50%;                 /* ボックスの縦中央 */
  width:15px;              /* 線の長さ（□右端から●まで） */
  height:1px;              /* 線そのもの（背景で描く） */
  background:var(--tf-line);
  transform:translateY(-50%);   /* 線の中心を縦中央に */
  z-index:3;
}
/* 右端の丸●（中白・水色1px罫線。四角と統一）。線の中心と同じ高さに揃える。 */
.tf_out_point::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;                 /* 線の中心と同じ高さ */
  width:7px;
  height:7px;
  transform:translate(50%,-50%);   /* 円の中心を線の中心に合わせる */
  background:#fff;
  border:1px solid var(--tf-line);
  border-radius:50%;
  box-sizing:border-box;
}

/* オーバーフロー標示（あふれると出る □＋＋）：赤。
   横：□の中心を右辺ライン上に置く（右辺をまたぐ）。
   縦：下辺から少し上に離す。 */
.tf_overflow{
  position:absolute;
  left:100%;               /* 右辺ラインに □中心を合わせる */
  bottom:8px;              /* 下辺から少し上へ離す */
  width:9px;               /* 水色□(7px)より2px大きい */
  height:9px;
  transform:translateX(-50%);
  border:1px solid #e24b4a;
  background:#fff;
  box-sizing:border-box;
  display:none;
  pointer-events:none;
  z-index:3;
}
.tf_overflow::before,
.tf_overflow::after{
  content:'';
  position:absolute;
  background:#e24b4a;
}
.tf_overflow::before{ left:50%; top:2px; bottom:2px; width:1px; transform:translateX(-50%); }
.tf_overflow::after { top:50%; left:2px; right:2px; height:1px; transform:translateY(-50%); }
.tf_box.is_overflow .tf_overflow{ display:block; }
/* 編集中や非選択時は＋を隠す（イラレは選択時のみ表示） */
.tf_box:not(.is_selected) .tf_overflow{ display:none; }

/* ---- ハンドル：見た目□は ::before、要素本体は当たり判定（□＋回転余白） ---- */
.tf_handle{
  position:absolute;
  width:var(--tf-handle-hit);
  height:var(--tf-handle-hit);
  transform:translate(-50%, -50%);
  background:transparent;
  z-index:2;
}
.tf_handle::before{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:var(--tf-handle-core);
  height:var(--tf-handle-core);
  transform:translate(-50%,-50%);
  background:#fff;
  border:1px solid var(--tf-line);
  box-sizing:border-box;
}

.tf_handle_nw{ cursor:nwse-resize; }
.tf_handle_se{ cursor:nwse-resize; }
.tf_handle_ne{ cursor:nesw-resize; }
.tf_handle_sw{ cursor:nesw-resize; }
.tf_handle_n { cursor:ns-resize; }
.tf_handle_s { cursor:ns-resize; }
.tf_handle_e { cursor:ew-resize; }
.tf_handle_w { cursor:ew-resize; }

/* ---- デバッグ情報 #tf-info（任意） ---- */
#tf-info{
  position:absolute;
  z-index:10;
  bottom:26px;
  left:10px;

  font-size:10px;
  line-height:1.0;
  color:#fff;
  white-space:nowrap;
  mix-blend-mode:difference;
}
#tf-info .tf-info-label{
  display:inline-block;
  margin:0 5px 0 0;
}
#tf-info .tf-info-label:first-child{ margin-left:0; }
#tf-info .tf-info-val{
  display:inline-block;
  width:44px;
  text-align:left;
}