/**
 * 金十数据 - 重要事件 - 主题样式
 * 定义亮色和暗色两套主题颜色变量
 */

/* ==================== CSS Variables 定义 ==================== */
:root {
  /* 亮色主题 (Light) */
  --bg-page: #F7F9FE;
  --bg-card: #FFFFFF;
  --bg-comment: #F5F5F5;
  --app-nav-bg: #FFFFFF;
  --app-status-bar-height: 0px;
  --extra-safe-area-height: 0px;
  --app-safe-area-top: min(env(safe-area-inset-top, 0px), 24px);
  --app-safe-area-bottom: env(safe-area-inset-bottom, 0px);

  --text-primary: rgba(0, 0, 0, 0.9);
  --text-content: rgba(0, 0, 0, 0.8);
  --text-secondary: rgba(0, 0, 0, 0.5);
  --text-secondary-low: rgba(0, 0, 0, 0.2);
  --text-comment: rgba(0, 0, 0, 0.7);

  --color-primary: #5A82E6;
  --color-important: #E14454;
  --color-hot-2: #FF7F3A;
  --color-hot-3: #FF594D;
  --color-hot-4: #E24034;
  --plus-light: #DBFAFF;
  --on-plus-light: #137CA5;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* 边框色 */
  --border-avatar: #FFFFFF;
  --outline-color: rgba(0,0,0,0.1)
}

/* 暗色主题 (Dark) */
html.dark {
  --bg-page: #2C2F37;
  --bg-card: #1C1C1D;
  --bg-comment: #262626;
  --app-nav-bg: #1C1C1D;
  --app-safe-area-top: min(env(safe-area-inset-top, 0px), 24px);
  --app-safe-area-bottom: env(safe-area-inset-bottom, 0px);

  --text-primary: rgba(255, 255, 255, 0.8);
  --text-content: rgba(255, 255, 255, 0.7);
  --text-secondary: rgba(255, 255, 255, 0.3);
  --text-secondary-low: rgba(255, 255, 255, 0.2);
  --text-comment: rgba(255, 255, 255, 0.7);

  --color-primary: #4267C2;
  --color-important: #E02D48;
  --color-hot-2: #E57234;
  --color-hot-3: #E55045;
  --color-hot-4: rgba(226, 64, 52, 0.9);
  --plus-light: #DBFAFF;
  --on-plus-light: #137CA5;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);

  --border-avatar: #1C1C1D;
  --outline-color: rgba(255,255,255,0.1)
}

/* ==================== 基础样式重置 ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 原生APP样式：禁用点击高亮、文本选择、长按菜单 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html {
  font-size: 16px;
  width: 100%;
  min-height: 100vh;
}

body {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-content);
  width: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* ==================== 页面布局 ==================== */
.app-custom-nav {
  --app-nav-foreground: #FFFFFF;
  --app-nav-icon-color: var(--on-surface-low, var(--text-secondary));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: max(env(safe-area-inset-top, 0px), var(--app-status-bar-height, 0px));
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  display: flex;
  flex-direction: column;
}

.app-custom-nav.scrolled {
  --app-nav-foreground: var(--text-primary);
  background: var(--app-nav-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0.5px solid var(--outline-color);
}

.app-custom-nav[hidden] {
  display: none !important;
}

body.is-app-webview .app-custom-nav {
  display: block;
}

.app-custom-nav__inner {
  width: 100%;
  max-width: 1200px;
  height: 44px;
  margin: 0 auto;
  padding: 0 8px 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.app-custom-nav__back {
  width: 32px;
  height: 44px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--app-nav-icon-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.app-custom-nav__back:active {
  opacity: 0.68;
}

.app-custom-nav__back-icon {
  width: 32px;
  height: 32px;
  display: block;
  background-color: currentColor;
  mask-image: url('../img/arrow-left.7ff56525.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('../img/arrow-left.7ff56525.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.app-custom-nav__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--app-nav-foreground);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.app-custom-nav.scrolled .app-custom-nav__title {
  opacity: 1;
}

.app-custom-nav__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.app-custom-nav__action {
  width: 44px;
  height: 44px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--app-nav-icon-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-custom-nav__action:active {
  opacity: 0.68;
}

.app-custom-nav__action svg {
  width: 20px;
  height: 20px;
}

.app-custom-nav__calendar-icon {
  width: 32px;
  height: 32px;
  display: block;
  background-color: currentColor;
  mask-image: url('../img/jin10_important_news/figma-calendar.08d700f8.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('../img/jin10_important_news/figma-calendar.08d700f8.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.page-container {
  position: relative;
  padding-top: 42vw;
  min-height: 100vh;
  background-color: var(--bg-page);
}

/* 顶部背景图 */
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  overflow: hidden;
  padding-top: var(--extra-safe-area-height, 0px);
  /* 移动端亮色模式默认背景 */
  background: linear-gradient(180deg, #BBD5F4 41%, #FFFFFF 68%, rgba(255, 255, 255, 0) 100%);
}

/* 头部背景区域 */
.header-bg-area {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 12 / 5;
  height: auto;
  margin: 0 auto;
  position: relative;
}

/* 顶部背景图片 */
.header-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* 移动端暗色模式背景 */
html.dark .header-bg {
  background: linear-gradient(180deg, #152F4F 43%, #16273B 68%, rgba(0, 0, 0, 0) 100%);
}

/* 顶部背景图片 */
.header-bg-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/* 移动端亮色模式图片 */
.header-bg-img {
  content: url('../img/jin10_important_news/header-bg-light.107424f3.png');
}

/* 移动端暗色模式图片 */
html.dark .header-bg-img {
  content: url('../img/jin10_important_news/header-bg-dark.8fd75153.png');
}

/* Logo 区域 */
.logo-area {
  position: absolute;
  display: block;
  top: 7.7294686vw;
  left: 7.7294686vw;
  display: flex;
  align-items: center;
  gap: 2.89855vw;
  gap: min(12px, 2.89855vw);
  text-decoration: none;
  z-index: 3;
}

/* 品牌 Logo */
.brand-logo {
  width: 28.9855vw;
  max-width: 160px;
  min-width: 110px;
  aspect-ratio: 120 / 32;
  height: auto;
}

/* 返回首页链接 */
.back-home {
  font-size: 15px;
  color: var(--text-secondary);
}

/* 水波纹动画容器 */
.ripple-container {
  position: absolute;
  left: 23vw;
  top: -17vw;
  width: 100vw;
  height: 100vw;
  pointer-events: none;
}

/* 水波纹圆圈 */
.ripple {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  margin: auto;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  box-shadow: inset 0px 1vw 2.5vw 0px #FFFFFF;
  animation: ripple-animation 30s linear infinite;
  z-index: 1;
}

.ripple:nth-child(1) {
  animation-delay: -20s;
}

.ripple:nth-child(2) {
  animation-delay: -10s;
}

.ripple:nth-child(3) {
  animation-delay: 0s;
}

/* 水波纹动画关键帧 */
@keyframes ripple-animation {
 0% {
   width: 20%;
   height: 20%;
   opacity: 0;
 }
 50% {
   opacity: var(--ripple-mid-opacity, 0.5);
 }
 100% {
   width: 100%;
   height: 100%;
   opacity: 0;
 }
}

/* 暗色模式水波纹透明度 */
html.dark .ripple {
  --ripple-mid-opacity: 0.16;
}

/* 内容区域 */
.content-wrapper {
  position: relative;
  z-index: 1;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-top: var(--extra-safe-area-height, 0px);
}

.events-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-load-more {
  width: 100%;
  min-height: 48px;
  margin: 0 auto;
  margin-top: 4px;
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.home-load-more:disabled {
  cursor: default;
}

.home-load-more[hidden] {
  display: none !important;
}

.home-load-more[data-status="loading"]::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid var(--text-secondary-low);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: home-load-more-spin 0.8s linear infinite;
}

@keyframes home-load-more-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================== 重要事件卡片样式 ==================== */
.event-card {
  background-color: var(--bg-card);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
}

.card-main {
  text-decoration: none !important;
  color: inherit !important;
  -webkit-touch-callout: none !important;
  pointer-events: auto;
}

.card-main[data-jump-url],
.news-image[data-jump-url],
.featured-comment[data-comment-jump-url] {
  cursor: pointer;
}

.card-main[data-jump-url]:focus-visible,
.news-image[data-jump-url]:focus-visible,
.featured-comment[data-comment-jump-url]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 卡片头部：序号 + 时间 + 讨论人数 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  margin-bottom: 10px;
}

.header-left {
  display: flex;
  align-items: flex-end;
}

.event-index {
  font-family: 'D-DIN-PRO-JIN10', sans-serif;
  font-size: 28px;
  line-height: 28px;
  color: var(--text-secondary-low);
}

.event-index.index-1 { color: var(--color-hot-4); }
.event-index.index-2 { color: var(--color-hot-3); }
.event-index.index-3 { color: var(--color-hot-2); }

.event-time {
  font-family: 'D-DIN-PRO-JIN10', sans-serif;
  font-size: 14px;
  color: var(--text-secondary-low);
  margin-left: 7px;
  margin-bottom: 2px;
}

.time-divider {
  width: 1px;
  height: 12px;
  background-color: var(--text-secondary-low);
  margin-left: 8px;
  margin-bottom: 4px;
  transform: skew(-15deg);
}

/* 讨论人数 */
.discussion-info {
  display: flex;
  align-items: center;
  position: relative;
}

.avatar-stack {
  display: flex;
  margin-right: -6px;
}

.avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-avatar);
  margin-left: -6px;
  object-fit: cover;
  box-sizing: content-box;
}

.avatar:first-child {
  margin-left: 0;
}

.discussion-tag {
  display: flex;
  align-items: center;
  height: 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  padding-left: 10px;
}

.discussion-tag.important {
  color: var(--color-important);
}

.discussion-tag.normal {
  color: var(--text-secondary);
}

/* 卡片标题 */
.card-title {
  font-family: 'SourceHanSerifCN';
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 28px;
  margin-bottom: 7px;
}

/* 卡片正文 */
.card-content {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.important-news-list-view .event-card:not(:has(.news-image)):not(:has(.featured-comment)) .card-content,
.date-list-view .event-card:not(:has(.news-image)):not(:has(.featured-comment)) .card-content {
  margin-bottom: 0;
}

/* 无标题时正文颜色正常 */
.card-content.no-title {
  color: var(--text-content);
}

/* 新闻图片 */
.news-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  display: block;
  overflow: hidden;
  -webkit-touch-callout: none !important;
}

.news-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.news-image.is-extra-media img {
  object-position: center bottom;
}

html.dark .news-image {
  opacity: 0.8;
}

/* 只有左上、右上有圆角（下方有精选评论时） */
.news-image.top-radius-only {
  border-radius: 2px 2px 0 0;
}

/* 精选评论 */
.featured-comment {
  background-color: var(--bg-comment);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  position: relative;
  border-radius: 2px;
}

/* 只有左下、右下有圆角（上方有新闻图片时） */
.featured-comment.bottom-radius-only {
  border-radius: 0 0 2px 2px;
}

.featured-comment::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 19px;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--bg-comment);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 150px;
  object-fit: cover;
}

.comment-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-likes {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  height: 24px;
  overflow: hidden;
}

.comment-likes.animating {
    overflow: visible;
}

.comment-likes.active {
  color: var(--color-primary);
}

/* Lottie 点赞动画容器 */
.lottie-like-container {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -64px;
  margin-top: -2px;
}

.lottie-like-container svg {
  width: 100% !important;
  height: 100% !important;
}

/* 点赞数量 */
.likes-count {
  font-family: PingFang SC;
  font-weight: 600;
  margin-left: 2px;
}

.comment-text {
  font-size: 15px;
  color: var(--text-comment);
  line-height: 24px;
}

/* ==================== 主题切换按钮 ==================== */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

.sun-icon, .moon-icon {
  display: none;
}

/* 暗色主题：显示太阳图标（用于切换到亮色） */
html.dark .sun-icon {
  display: block;
}

html.dark .moon-icon {
  display: none;
}

/* 亮色主题：显示月亮图标（用于切换到暗色） */
html:not(.dark) .sun-icon {
  display: none;
}

html:not(.dark) .moon-icon {
  display: block;
}

/* ==================== 响应式适配 ==================== */
@media (max-width: 414px) {
  .events-container {
    padding: 0;
  }
}

/* PC 端适配：>= 768px */
@media (min-width: 768px) {

  .page-container {
    padding-top: clamp(120px, 20vw, 240px);
  }
  
/* PC端亮色模式背景 */
  .header-bg {
    background: linear-gradient(180deg, #BBD5F4 0%, #F8FAFF 47%, rgba(248, 250, 255, 0) 100%);
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* PC端暗色模式背景 */
  html.dark .header-bg {
    background: linear-gradient(180deg, #102743 0%, #111111 47%, rgba(17, 17, 17, 0) 100%);
  }

  /* PC端图片 */
  .header-bg-img {
    width: 100%;
    height: 100%;
    content: url('../img/jin10_important_news/header-bg-light-big.f168fd71.png');
  }

  /* PC端暗色模式图片 */
  html.dark .header-bg-img {
    content: url('../img/jin10_important_news/header-bg-dark-big.d4494c0a.png');
  }

  .logo-area {
    top: min(39px, 3.25vw);
    left: 0;
    gap: 12px;
  }

  .brand-logo {
    width: 10vw;
    max-width: 120px;
    min-width: 100px;
    height: auto;
  }

  .ripple-container {
    left: 59%;
    top: max(-7vw, -84px);
    width: min(50vw, 600px);
    height: min(50vw, 600px);
  }

  .events-container {
    gap: 0;
    max-width: 1200px;
    padding: 0 24px;
    box-sizing: border-box;
    background-color: var(--bg-card);
    border-radius: 8px;
  }
  /* 事件卡片：固定高度，水平布局 */
  .event-card {
    height: 164px;
    flex-direction: row;
    padding: 24px 0;
    gap: 12px;
    box-shadow: unset;
    border-radius: unset;
    position: relative;
    background-color: transparent;
  }

  .event-card::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--outline-color);
    transform: scaleY(0.5);
  }

  /* 左侧主体区域 - 保持在最左边（默认 order: 0） */
  .card-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    order: 0;
  }

  .card-main:hover .event-index:not(.index-1):not(.index-2):not(.index-3) {
    color: var(--color-primary);
  }


  .card-main:hover .event-time {
    color: var(--text-secondary);
  }

  .card-main:hover .time-divider {
    background-color: var(--text-secondary);
  }

  .card-main:hover .card-title {
    color: var(--color-primary);
  }

  .event-card:nth-child(1) .card-main:hover .card-title {
    color: var(--color-hot-4);
  }

  .event-card:nth-child(2) .card-main:hover .card-title {
    color: var(--color-hot-3);
  }

  .event-card:nth-child(3) .card-main:hover .card-title {
    color: var(--color-hot-2);
  }

  .card-header {
    margin-bottom: 7px;
  }

  /* PC 端有精选评论时显示箭头 */
  .event-card:has(.featured-comment) .discussion-info:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -12px;
    width: 0;
    height: 0;
    margin: auto;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--bg-comment);
  }

  .card-content {
    margin-bottom: 0;
  }

  /* 精选评论：固定宽度，始终圆角，放在中间 */
  .featured-comment {
    width: 205px;
    height: 100%;
    flex-shrink: 0;
    border-radius: 2px !important;
    padding: 12px;
    gap: 12px;
    order: 1;
  }

  .featured-comment::before {
    display: none;
  }

  .comment-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 评论文字为3行时的样式 */
  .comment-text.three-lines {
    font-size: 13px;
    line-height: 18px;
  }

  /* 新闻图片：固定宽度，始终圆角，放在右边 */
  .news-image {
    width: 206px;
    height: 100%;
    aspect-ratio: auto;
    flex-shrink: 0;
    border-radius: 2px !important;
    order: 2;
  }

  .news-image.is-extra-media {
    height: 116px;
  }

  /* 移除移动端的圆角处理类（PC端不需要） */
  .news-image.top-radius-only {
    border-radius: 2px;
  }

  .featured-comment.bottom-radius-only {
    border-radius: 2px;
  }
}


/* 移动端适配：< 768px - card-main 在上，news-image 在中，featured-comment 在下 */
@media (max-width: 767px) {
  .event-card {
    flex-direction: column;
  }

  /* 左侧主体区域 - 在最上面 */
  .card-main {
    order: 0;
  }

  /* 新闻图片 - 在中间 */
  .news-image {
    order: 1;
  }

  .news-image.is-extra-media {
    width: 100%;
    height: auto;
    aspect-ratio: 358 / 203;
  }

  /* 精选评论 - 在底部 */
  .featured-comment {
    order: 2;
  }
}

/* ==================== 重要事件日历入口与二级页 ==================== */
.important-news-view[hidden],
.bottom-sheet-mask[hidden],
.plus-dialog-mask[hidden] {
  display: none !important;
}

.desktop-unsupported-view {
  display: none;
}

.important-news-iframe-popup {
  position: fixed;
  top: 50%;
  right: 200px;
  z-index: 500;
  width: min(var(--iframe-popup-width, 414px), calc(100vw - 24px));
  height: min(var(--iframe-popup-height, 865px), calc(100vh - 24px));
  overflow: hidden;
  border: 1px solid var(--outline-color);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%);
  transform-origin: center;
}

.important-news-iframe-popup:focus {
  outline: none;
}

.important-news-iframe-popup.is-entering {
  animation: important-news-iframe-popup-enter 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.important-news-iframe-popup.is-flashing {
  animation: important-news-iframe-popup-flash 0.4s ease-in-out 2;
}

.important-news-iframe-popup.is-leaving {
  opacity: 0;
  transform: translateY(-50%) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.important-news-iframe-popup__bar {
  height: 48px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--bg-card);
}

.important-news-iframe-popup__close {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-comment);
  cursor: pointer;
}

.important-news-iframe-popup__close::before,
.important-news-iframe-popup__close::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 7px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-secondary);
}

.important-news-iframe-popup__close::before {
  transform: rotate(45deg);
}

.important-news-iframe-popup__close::after {
  transform: rotate(-45deg);
}

.important-news-iframe-popup__content {
  width: 100%;
  height: calc(100% - 48px);
  padding: 0 1px 1px;
}

.important-news-iframe-popup__content iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--bg-card);
}

@keyframes important-news-iframe-popup-enter {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes important-news-iframe-popup-flash {
  50% {
    box-shadow: 0 0 0 3px var(--color-primary), 0 0 30px rgba(0, 0, 0, 0.3);
  }
}

body.is-desktop-secondary-unsupported .page-container.is-subview {
  min-height: 100vh;
  padding-top: 0;
  background: var(--surface, var(--bg-page));
}

.desktop-unsupported-view {
  min-height: 100vh;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  color: var(--on-surface, var(--text-content));
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

@media (min-width: 1200px) {
  .bottom-sheet-mask {
    display: none !important;
  }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  body[data-important-news-page="calendar"] .page-container.is-subview,
  body[data-important-news-page="date"] .page-container.is-subview {
    min-height: 100vh;
    padding-top: 0;
    background: var(--surface, var(--bg-page));
  }

  body[data-important-news-page="calendar"] .page-container.is-subview > .important-news-view,
  body[data-important-news-page="date"] .page-container.is-subview > .important-news-view {
    display: none !important;
  }

  body[data-important-news-page="calendar"] .desktop-unsupported-view,
  body[data-important-news-page="date"] .desktop-unsupported-view {
    display: flex;
  }
}

.web-calendar-entry {
  position: absolute;
  top: calc(6px + var(--extra-safe-area-height, 0px));
  right: 7px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--on-surface-low, var(--text-secondary));
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.web-calendar-entry__text {
  display: none;
}

body.is-app-webview .web-calendar-entry {
  display: none !important;
}

.enhanced-nav-button {
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--on-surface, var(--text-content));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.calendar-loading {
  padding: 28px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.calendar-loading.is-page-loading {
  width: 100%;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.calendar-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--text-secondary-low);
  border-top-color: var(--on-primary-light, var(--color-primary));
  border-radius: 50%;
  animation: calendar-loading-spin 0.8s linear infinite;
}

@keyframes calendar-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 768px) {
  .web-calendar-entry {
    display: inline-flex;
    top: min(39px, 3.25vw);
    right: 0;
    width: auto;
    padding: 0 4px;
    gap: 4px;
    color: var(--on-surface-low, var(--text-secondary));
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
  }

  .web-calendar-entry .app-custom-nav__calendar-icon {
    width: 32px;
    height: 32px;
  }

  .web-calendar-entry__text {
    display: inline-block;
    white-space: nowrap;
  }
}

@media (max-width: 1199px) {
  .web-calendar-entry {
    display: inline-flex;
  }

  .page-container.is-subview {
    padding-top: 0;
  }

  .calendar-view {
    --secondary-nav-safe-top: 0px;
    --secondary-nav-height: 44px;
    --calendar-month-title-height: 53px;
    --calendar-weekdays-height: 28px;
    min-height: 100vh;
    background: var(--surface, var(--bg-card));
    color: var(--on-surface-high, var(--text-primary));
    padding-top: calc(
      var(--secondary-nav-height) +
      var(--calendar-month-title-height) +
      var(--calendar-weekdays-height)
    );
  }

  .date-list-view {
    --secondary-nav-safe-top: 0px;
    --secondary-nav-height: 44px;
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--on-surface-high, var(--text-primary));
    padding-top: calc(var(--secondary-nav-height) + 50px);
    overflow-x: hidden;
  }

  body.is-app-webview .calendar-view,
  body.is-app-webview .date-list-view {
    --secondary-nav-safe-top: max(env(safe-area-inset-top, 0px), var(--app-status-bar-height, 0px));
    --secondary-nav-height: calc(44px + var(--secondary-nav-safe-top));
  }

  .calendar-topbar,
  .date-list-topbar {
    height: var(--secondary-nav-height);
    padding: calc(var(--secondary-nav-safe-top) + 6px) 7px 6px;
    background: var(--surface, var(--bg-card));
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .calendar-view .calendar-topbar,
  .date-list-view .date-list-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }

  .calendar-month-title {
    position: fixed;
    top: var(--secondary-nav-height);
    left: 0;
    right: 0;
    z-index: 29;
    height: var(--calendar-month-title-height);
    padding: 4px 16px 5px;
    background: var(--surface, var(--bg-card));
    color: var(--on-surface-high, var(--text-primary));
    font-size: 32px;
    font-weight: 600;
    line-height: 44px;
    text-align: left;
  }

  .calendar-month-title.is-align-left {
    text-align: left;
  }

  .calendar-month-title.is-align-right {
    text-align: right;
  }

  .calendar-view.is-loading .calendar-month-title,
  .calendar-view.is-loading .calendar-weekdays {
    display: none;
  }

  .calendar-view.is-loading {
    padding-top: var(--secondary-nav-height);
  }

  .calendar-view.is-loading .calendar-grid {
    min-height: calc(100vh - var(--secondary-nav-height));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .calendar-weekdays {
    position: fixed;
    top: calc(var(--secondary-nav-height) + var(--calendar-month-title-height));
    left: 0;
    right: 0;
    z-index: 29;
    height: var(--calendar-weekdays-height);
    border-bottom: 0.5px solid var(--outline, var(--outline-color));
    background: var(--surface, var(--bg-card));
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    color: var(--on-surface, var(--text-content));
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .calendar-weekdays span:first-child,
  .calendar-weekdays span:last-child {
    color: var(--on-surface-low, var(--text-secondary));
  }

  .calendar-scroll {
    width: 100%;
    overflow: hidden;
  }

  .calendar-grid {
    display: block;
  }

  .calendar-month-section {
    display: block;
  }

  .calendar-month-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 5px;
    padding: 0 3px;
  }

  .calendar-month-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--calendar-month-divider-height, 0px);
    pointer-events: none;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 122.5px,
      var(--outline, var(--outline-color)) 122.5px,
      var(--outline, var(--outline-color)) 123px
    );
  }

  .calendar-adjacent-month-title {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 5px;
    padding: 24px 3px 0;
    color: var(--on-surface-high, var(--text-primary));
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
  }

  .calendar-adjacent-month-title::after {
    content: '';
    grid-column: var(--calendar-month-start-column, 1) / 8;
    grid-row: 1;
    align-self: end;
    justify-self: stretch;
    height: 0.5px;
    background: var(--outline, var(--outline-color));
    transform: translateY(0);
  }

  .calendar-adjacent-month-title span {
    grid-column: var(--calendar-month-start-column, 1);
    grid-row: 1;
    justify-self: center;
    white-space: nowrap;
  }

  .calendar-day-cell {
    position: relative;
    height: 123px;
    min-width: 0;
    border: 0;
    padding: 8px 3px 3px;
    background: transparent;
    color: var(--on-surface, var(--text-content));
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    cursor: pointer;
  }

  .calendar-day-cell.is-empty {
    pointer-events: none;
  }

  .calendar-day-cell.is-weekend .calendar-day-number,
  .calendar-day-cell.is-out-range .calendar-day-number {
    color: var(--on-surface-low, var(--text-secondary));
  }

  .calendar-day-cell.is-out-range {
    cursor: default;
    opacity: 0.5;
  }

  .calendar-day-cell:disabled {
    pointer-events: none;
  }

  .calendar-day-number {
    width: 27px;
    height: 27px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface, var(--text-content));
    font-family: 'D-DIN-PRO-JIN10', sans-serif;
    font-size: 18px;
    line-height: 27px;
  }

  .calendar-day-cell.is-today .calendar-day-number {
    color: var(--on-primary, #fff);
    background: var(--primary, var(--color-primary));
    border-radius: 2px;
  }

  .calendar-title-list {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .calendar-title-chip {
    --calendar-title-chip-bg: var(--primary-light, #f1f5ff);
    position: relative;
    width: 100%;
    height: 18px;
    padding: 2px 2px 2px 4px;
    border-radius: 2px;
    background: var(--calendar-title-chip-bg);
    color: var(--on-primary-light, #5073cc);
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: left;
  }

  .calendar-title-chip::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 12px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, transparent, var(--calendar-title-chip-bg) 75%);
    pointer-events: none;
  }

  .calendar-more-count {
    height: 18px;
    color: var(--on-surface-low, var(--text-secondary));
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
  }

  .date-list-topbar {
    justify-content: space-between;
    border-bottom: 0;
  }

  .date-list-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 96px);
    overflow: hidden;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .date-list-topbar .enhanced-nav-button {
    flex: 0 0 32px;
  }

  .date-list-datebar {
    position: fixed;
    top: var(--secondary-nav-height);
    left: 0;
    right: 0;
    z-index: 29;
    height: 50px;
    padding: 12px 16px;
    background: var(--bg-card);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .date-list-date-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
  }

  .date-list-date-text {
    color: var(--on-surface, var(--text-content));
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
  }

  .date-list-weekday-text,
  .date-list-summary {
    color: var(--on-surface-low, var(--text-secondary));
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
  }

  .date-list-weekday-text {
    margin-bottom: 2px;
  }

  .date-list-summary {
    padding-top: 2px;
  }

  .date-list-content {
    margin-top: 0;
    padding: 16px 16px 24px;
    background: var(--bg-page);
  }

  .date-list-view .events-container {
    gap: 16px;
    max-width: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .date-list-view.is-loading .events-container {
    min-height: calc(100vh - var(--secondary-nav-height) - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .date-list-view .event-card {
    height: auto;
    flex-direction: column;
    padding: 16px 12px;
    gap: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    background-color: var(--bg-card);
  }

  .date-list-view .event-card::before,
  .date-list-view .event-card:has(.featured-comment) .discussion-info::before {
    display: none;
  }

  .date-list-view .card-main {
    display: block;
    order: 0;
  }

  .date-list-view .card-header {
    height: 30px;
    margin-bottom: 10px;
  }

  .date-list-view .header-left {
    align-items: flex-end;
    min-width: 0;
  }

  .date-list-view .event-index {
    line-height: 34px;
  }

  .date-list-view .event-index:not(.index-1):not(.index-2):not(.index-3) {
    color: var(--text-secondary);
  }

  .date-list-view .time-divider {
    position: relative;
    width: 5px;
    height: 12px;
    margin-left: 4px;
    margin-bottom: 5px;
    background: transparent;
    transform: none;
    flex-shrink: 0;
  }

  .date-list-view .time-divider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0;
    width: 1px;
    height: 12px;
    background: var(--text-secondary-low);
    transform: skew(-15deg);
  }

  .date-list-view .event-time {
    margin-left: 7px;
    margin-bottom: 3px;
    color: var(--text-secondary-low);
    font-size: 16px;
    line-height: 16px;
  }

  .date-list-view .discussion-info {
    flex-shrink: 0;
  }

  .date-list-view .card-title {
    margin-bottom: 8px;
  }

  .date-list-view .card-content {
    margin-bottom: 0;
  }

  .date-list-view .news-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    order: 1;
  }

  .date-list-view .news-image.is-extra-media {
    width: 100%;
    height: auto;
    aspect-ratio: 358 / 203;
  }

  .date-list-view .featured-comment {
    width: auto;
    height: auto;
    padding: 10px 12px;
    gap: 6px;
    order: 2;
    border-radius: 2px;
  }

  .date-list-view .featured-comment::before {
    display: block;
  }

  .date-list-view .news-image.top-radius-only {
    border-radius: 2px 2px 0 0;
  }

  .date-list-view .featured-comment.bottom-radius-only {
    border-radius: 0 0 2px 2px;
  }

  .bottom-sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.18s ease;
  }

  .bottom-sheet-mask.is-open {
    opacity: 1;
  }

  .bottom-sheet {
    width: 100%;
    max-width: none;
    padding: 0 15px max(16px, env(safe-area-inset-bottom, 0px));
    border-radius: 2px 2px 0 0;
    background: var(--surface, var(--bg-card));
    transform: translateY(18px);
    transition: transform 0.18s ease;
  }

  .bottom-sheet-mask.is-open .bottom-sheet {
    transform: translateY(0);
  }

  .bottom-sheet-header {
    height: 49px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 0;
  }

  .bottom-sheet-header h2 {
    color: var(--on-surface, var(--text-content));
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
  }

  .sheet-close-button {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    position: relative;
    cursor: pointer;
  }

  .sheet-close-button::before,
  .sheet-close-button::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 5px;
    width: 14px;
    height: 1px;
    background: var(--on-surface-low, var(--text-secondary));
  }

  .sheet-close-button::before {
    transform: rotate(45deg);
  }

  .sheet-close-button::after {
    transform: rotate(-45deg);
  }

  .bottom-sheet-desc {
    color: var(--on-surface, var(--text-content));
    font-size: 15px;
    line-height: 24px;
    text-align: justify;
  }

  .bottom-sheet-actions {
    height: 61px;
    padding-top: 16px;
    display: flex;
    gap: 12px;
  }

  .sheet-button {
    -webkit-appearance: none;
    appearance: none;
    height: 45px;
    min-width: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    cursor: pointer;
  }

  .sheet-button-secondary {
    flex: 1;
    background: var(--plus-light);
    color: var(--on-plus-light);
  }

  .sheet-button-primary {
    flex: 1;
    width: auto;
    background: linear-gradient(96deg, #54cdfb 1.54%, #137ca5 98.99%);
    color: #fff;
    gap: 2px;
  }

  .sheet-button-primary img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

}

@media (min-width: 1200px) {
  .home-load-more {
    max-width: 1200px;
  }

  .plus-dialog-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 0.18s ease;
  }

  .plus-dialog-mask.is-open {
    opacity: 1;
  }

  .plus-dialog {
    width: 388px;
    padding: 22px 24px 24px;
    border-radius: 6px;
    background: var(--surface, var(--bg-card));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease;
  }

  html.dark .plus-dialog {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  }

  .plus-dialog-mask.is-open .plus-dialog {
    transform: translateY(0) scale(1);
  }

  .plus-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .plus-dialog-title {
    color: var(--on-surface-high, var(--text-primary));
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
  }

  .plus-dialog-close {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
  }

  .plus-dialog-close::before,
  .plus-dialog-close::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 5px;
    width: 14px;
    height: 1px;
    background: var(--on-surface-low, var(--text-secondary));
  }

  .plus-dialog-close::before {
    transform: rotate(45deg);
  }

  .plus-dialog-close::after {
    transform: rotate(-45deg);
  }

  .plus-dialog-desc {
    margin-top: 12px;
    color: var(--on-surface, var(--text-content));
    font-size: 14px;
    line-height: 23px;
  }

  .plus-dialog-actions {
    margin-top: 22px;
    display: flex;
    gap: 12px;
  }

  .plus-dialog-actions .sheet-button {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 42px;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    cursor: pointer;
  }

  .plus-dialog-actions .sheet-button-secondary {
    background: var(--plus-light);
    color: var(--on-plus-light);
  }

  .plus-dialog-actions .sheet-button-primary {
    background: linear-gradient(96deg, #54cdfb 1.54%, #137ca5 98.99%);
    color: #fff;
    gap: 2px;
  }

  .plus-dialog-actions .sheet-button-primary img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
}