:host {
  display: block;
  width: 100%;
  height: 100%;
  --canvas-bg: #f8f9fa;
  --canvas-grid: #dee2e6;
  --paper-bg: #fffbf0;
  --paper-shadow: rgba(0,0,0,0.1);
  --selection-color: #0d6efd;
}

:host-context([data-bs-theme="dark"]) {
  --canvas-bg: #0f1114;
  --canvas-grid: #2b3035;
  --paper-shadow: rgba(0,0,0,0.8);
  /* 紙張保持米黃，因為它是實物模擬 */
}


.designer-root {
  /* 防止瀏覽器預設捲動影響畫布 */
  overflow: hidden;
}

.canvas-area {
    background-color: var(--canvas-bg);
    background-image: linear-gradient(45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--canvas-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--canvas-grid) 75%);
    background-size: 20px 20px;
    transition: background-color 0.3s;
    min-height: 100vw;
   
}

.tablet-paper {
  background-color: var(--paper-bg);
  box-shadow: 0 10px 30px var(--paper-shadow);
  transition: all 0.3s;
  overflow: hidden;
  /* 確保在列印時被視為一個分頁單元 */
  page-break-inside: avoid;
}

.tablet-element {
  cursor: move;
  padding: 4px;
  color: black !important; /* 強制墨水為黑色 */
  border: 1px solid transparent;
  transition: writing-mode 0.3s, transform 0.2s;
}
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }


/* 直書模式核心 */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 這是關鍵：中文直立，英文轉90度 */
  white-space: pre-wrap;
}

/* 縱中橫 (讓直書中的數字變成橫向) */
.tate-chu-yoko {
  text-combine-upright: all; /* 擠在一起 */
  /* 或者使用 digits 4 (但在某些瀏覽器支援度不一，all 比較保險) */
  display: inline-block;
  letter-spacing: 0; /* 數字之間不要有間距 */
}

/* 名單金字塔佈局容器 */
.roster-container {
  width: 100%; height: 100%;
  writing-mode: vertical-rl; /* 直書 */
  display: flex;
  //flex-direction: column; /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
  flex-direction: row;     /* 上下分層 (Top / Bottom) */
  align-items: center;    /* 左右置中對齊 */
  justify-content: center;
  gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
}

.roster-row {
  display: flex;
  flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
  justify-content: center;
  gap: 8px; /* 名字之間的間距 */
  margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
}

.name-group {
  display: flex;
  flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
  justify-content: center;
  align-items: center;
  /* gap 由 HTML 動態綁定 */
}

.roster-name {
  text-orientation: upright;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1.2;
  font-family: 'Kaiti', serif;
  /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
/*  width: fit-content;*/
}


/* 選取框 */
.selection-border {
  position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
  border: 2px solid var(--selection-color); pointer-events: none; z-index: 100;
}

.resize-handle {
  position: absolute; width: 10px; height: 10px; background: white;
  border: 2px solid var(--selection-color); border-radius: 50%;
}
.top-left { top: -6px; left: -6px; } .top-right { top: -6px; right: -6px; }
.bottom-left { bottom: -6px; left: -6px; } .bottom-right { bottom: -6px; right: -6px; }

.x-small { font-size: 0.7rem; } .ls-1 { letter-spacing: 1px; }
.bg-gradient-primary { background: linear-gradient(135deg, #0d6efd 0%, #0043a8 100%); }
.bg-gradient-dark { background: linear-gradient(135deg, #212529 0%, #000000 100%); }

.page-info-badge {
  background: rgba(255,255,255,0.9); padding: 5px 15px; border-radius: 20px; font-weight: bold; color: #333;
}

/* Print Mode */
@media print {
  app-floating-widget, .canvas-area, .page-info-badge { display: none !important; }
  :host { display: block; background: white; }

  .tablet-paper {
    position: relative !important;
    margin: 0;
    page-break-after: always; /* 強制分頁 */
    box-shadow: none !important; background: transparent !important;
    width: 100% !important; height: 100% !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .tablet-paper:last-child { page-break-after: auto; }

  .paper-size-label, .selection-border { display: none; }

  /* 確保背景圖列印 */
  img.bg-image-layer {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    display: block !important;
  }
}

.resizable-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;

  /* 關鍵屬性 */
  resize: both; /* 允許水平和垂直調整 (或是 horizontal, vertical) */
  overflow: auto; /* 必須設定 overflow (非 visible) resize 才會生效 */

  /* 選用：限制最小最大尺寸 */
  min-width: 100px;
  min-height: 100px;
}


.combined-vertical-mode {
  writing-mode: vertical-rl; /* 設定為直排 */
  font-family: "KaiTi", "BiauKai", serif;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 0.1em;
  /* 為了讓排版置中好看，可以加這行 */
  align-items: center;
}

.combined {
  /* --- 關鍵修改 --- */

  /* 1. 取消原本的擠壓設定 */
  text-combine-upright: none;

  /* 2. 將這三個字改回「橫向排版」 */
  writing-mode: horizontal-tb;

  /* 3. 讓它變成一個區塊，這樣字體才會撐開空間，不會擠在一起 */
  display: inline-block;

  /* 4. (選用) 調整它跟下方直書文字的對齊方式 */
  vertical-align: middle;

  /* 5. (選用) 如果希望字與字之間稍微寬鬆一點 */
  letter-spacing: 0.05em;
}

.combined-small {
  font-size: 32px !important;
}

.auto-wrap-text {
  /* 1. 設定為直書模式 */
  writing-mode: vertical-rl;
  text-orientation: upright; /* 讓文字直立 */

  /* 2. 關鍵：限制最大高度 */
  /* 設定為 8em 代表大約 8 個字的高度，超過就會自動換行 */
  max-height: 8em;

  /* 3. 關鍵：允許換行 */
  white-space: normal; /* 或 pre-wrap */

  /* 4. 調整換行的方向與對齊 (選用) */
  display: inline-block; /* 讓容器隨內容撐開 */
  word-break: break-all; /* 確保長單字或連續文字也能強制切斷換行 */
}

.ancestor-wrapper {
    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
    writing-mode: horizontal-tb;
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平置中 */
    justify-content: center;
    width: fit-content;
}

.main-name {
    line-height: 1.2;
    /* 保持大字 */
}

.sub-text {
    font-size: 0.6em; /* 縮小字體 */
    line-height: 1.2;
    margin-top: 4px; /* 與上方林張的間距 */
    white-space: nowrap; /* 避免自動換行 */
    writing-mode:vertical-rl
}