@charset "UTF-8";
/* ===========================
   Home Content iframe 样式
   被 home-content.html 引用
   =========================== */

/* 全局基础 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: var(--theme-image-items-cursor, url("/assets/items/cursor.png?v=b88c1f007a55")), auto;
}

a, button, [role="button"] {
  cursor: var(--theme-image-items-select, url("/assets/items/select.png?v=bde734b4ad4d")), pointer;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "MS PGothic", "Unifont", sans-serif;
  font-size: 1.6vw;
  line-height: 1.6;
  /* Match the 12:8 viewport so spacing preserves the cell proportions. */
  padding: calc(2vw * 2 / 3) 2vw;
  /* change: tiled background only for home-content area */
  background-image: var(--theme-image-images-content-backgrand, url("/assets/images/content-backgrand.jpg?v=0646b71f89e1"));
  /* Keep the same tile count and placement as the 12:8 iframe scales. */
  background-size: 21vw 35vw;
  background-repeat: repeat;
  background-position: top left;
  color: var(--theme-home-content-color-3b2b2b, #3b2b2b);
}

a {
  color: var(--theme-home-content-color-d46493, #d46493);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

/* ========== 网格布局 ========== */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Equal columns: the first two rows have 4:3 cells, the last has 2:1. */
  grid-template-rows: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr);
  gap: calc(0.8vw * 2 / 3) 0.8vw;
  width: 100%;
  height: 100%;

  /* 核心魔法：用名字拼出参考图的排版 */
  grid-template-areas:
    "announce announce gif1"
    "png      picture  gif2"
    "png      text     text";
}

.home-grid > * {
  min-width: 0;
  min-height: 0;
}

/* ========== 1. 公告栏 ========== */
.announce-bar {
  grid-area: announce; /* 对应 grid-template-areas 里的名字 */
  min-width: 0;

  /* 下方保留你原有的样式 */
  background-image: var(--theme-image-images-announce, url("/assets/images/announce.jpg?v=928775a740f3"));
  background-size: cover;
  background-position: center;
  border: 1px solid var(--theme-home-content-color-e8879c, #e8879c);
  border-radius: 8px;
  padding: 1.5vw 2vw;
  font-size: calc(1.6vw * var(--announcement-scale, 1));
  position: relative;
  z-index: 2;
}

/* .announce-bar h3, li 等子元素样式保持不变 */
.announce-bar h3 {
  font-size: 1.167em;
  color: var(--theme-home-content-color-c44569, #c44569);
  margin-bottom: 0.5em;
  letter-spacing: 0.083em;
  overflow-wrap: anywhere;
}

.announce-bar .announce-list {
  list-style: none;
  font-size: 0.917em;
  color: var(--theme-home-content-color-5a3e4b, #5a3e4b);
}

.announce-bar .announce-list li {
  padding: 0.273em 0;
  border-bottom: 1px dashed var(--theme-home-content-color-e8a0b4, #e8a0b4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.announce-bar .announce-list li:last-child {
  border-bottom: none;
}

.announce-bar .announce-list .date {
  color: var(--theme-home-content-color-c44569, #c44569);
  font-weight: bold;
  margin-right: 0.364em;
}

/* ========== 2. gif 动图区 (通用外观) ========== */
.gif-area {
  background: linear-gradient(135deg, var(--theme-home-content-color-c5b3e6, #c5b3e6), var(--theme-home-content-color-d4c4f0, #d4c4f0));
  border: 1px solid var(--theme-home-content-color-a08cc4, #a08cc4);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gif-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 分别为两个 gif 分配网格位置 */
.gif-area-1 {
  grid-area: gif1;
}

.gif-area-2 {
  grid-area: gif2;
}

/* ========== 3. 图片展示区 (居中浮动) ========== */
.center-image {
  grid-area: picture;
  background: var(--theme-home-content-color-fff, #fff);
  border: 0.4vw solid var(--theme-home-content-color-5daf5b, #5daf5b);
  border-radius: 6px;
  padding: 0;
  box-shadow: 2px 2px 6px var(--theme-home-content-color-rgba-0-0-0-0-1, rgba(0, 0, 0, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.center-image img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== 4. png 图片区 ========== */
.png-area {
  grid-area: png;

  /* 修改：去掉固定的 width: 200px，让网格区域自动决定它的宽度 */
  background: transparent;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.png-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== 5. 文字区 ========== */
.text-area {
  grid-area: text;

  /* 保留你原有的样式 */
  background-image: var(--theme-image-images-note, url("/assets/images/note.jpg?v=7a07b3e0ae29"));
  background-size: cover;
  background-position: center;
  border: 1px solid var(--theme-home-content-color-e8879c, #e8879c);
  border-radius: 8px;
  padding: 1.5vw 2vw;
  color: var(--theme-home-content-color-5a3e4b, #5a3e4b);
  font-size: 1.47vw;
  line-height: 1.7;
}

.text-area h3 {
  font-size: 1.87vw;
  color: var(--theme-home-content-color-c44569, #c44569);
  margin-bottom: 0.8vw;
}